/* =========================================================================== Tessen — pricing page --------------------------------------------------------------------------- This sheet loads after tessen.css, so every rule below is scoped to .page-pricing on . Nothing here redeclares a shared component class at the top level: an unscoped .ts-plan or .ts-planboard written here would outrank the shared responsive rules and break the other pages' mobile layout silently, with no error to find it by. Colours come from the --sf-* surface set, which the tone engine rebinds per section. No hex value appears in this file. =========================================================================== */ /* =========================================================================== Sub-page hero — the landing page's opening at a fraction of the height. No figure panel here: the ledger panel is the index signature and repeating it on four sub-pages would spend it. =========================================================================== */ .page-pricing .ts-hero-sm { padding-top: 156px; padding-bottom: 84px; } .page-pricing .ts-hero-sm__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px var(--ts-gutter); align-items: end; } .page-pricing .ts-hero-sm__stated { display: grid; gap: 20px; align-content: start; } /* the mono strip under the title: three facts that hold for every plan */ .page-pricing .ts-brow { display: grid; gap: 12px; padding-top: 20px; border-top: 1px solid var(--sf-line); } .page-pricing .ts-brow li { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 12px; align-items: baseline; font-family: var(--ts-font-mono); font-size: var(--ts-fs-2); line-height: 1.5; color: var(--sf-muted); } .page-pricing .ts-brow li b { font-weight: 400; color: var(--sf-accent); font-variant-numeric: tabular-nums; } /* current-page marker moved to the shared sheet (tessen.css) — all five pages need it */ /* =========================================================================== 1. Plans — the board repeats, the table does not =========================================================================== */ .page-pricing .ts-planhint { margin-top: 14px; font-family: var(--ts-font-mono); font-size: var(--ts-fs-1); letter-spacing: 0.08em; text-transform: uppercase; color: var(--sf-muted); } /* group headers inside the comparison table. Capability rows run to two dozen here, which is the point of the page — but two dozen undivided rows read as a wall, so each block of four is announced by a ruled band. */ .page-pricing .ts-plan__group th { padding-top: 30px; padding-bottom: 10px; background: transparent; border-left-color: transparent; border-right-color: transparent; border-bottom-color: var(--sf-fg); } .page-pricing .ts-plan tbody:first-of-type .ts-plan__group th { padding-top: 22px; } .page-pricing .ts-plan__grouplabel { display: inline-block; font-family: var(--ts-font-mono); font-size: var(--ts-fs-1); font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sf-fg); } .page-pricing .ts-plan__groupcount { margin-left: 12px; color: var(--sf-muted); font-variant-numeric: tabular-nums; letter-spacing: 0.1em; } /* a group band is a heading, not a row: it must not take the row hover rule */ .page-pricing .ts-plan__group:hover { background: transparent; } .page-pricing .ts-plan__group:hover th { box-shadow: none; } /* =========================================================================== 2. Rate axes — why the number is what it is. Read as a table, not solved by a calculator: the landing page prices a transaction, this page prices a month, and the difference between those is what a buyer is actually asking. =========================================================================== */ .page-pricing .ts-tierwrap { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px var(--ts-gutter); align-items: start; } .page-pricing .ts-tiers thead th:first-child { width: 34%; } .page-pricing .ts-tiers td { font-family: var(--ts-font-mono); font-size: var(--ts-fs-2); font-variant-numeric: tabular-nums; letter-spacing: 0.02em; } .page-pricing .ts-tiers tbody th { font-family: var(--ts-font-mono); font-size: var(--ts-fs-2); font-variant-numeric: tabular-nums; letter-spacing: 0.02em; } .page-pricing .ts-tiers .ts-plan__tier b { font-size: var(--ts-fs-4); } .page-pricing .ts-tiers__note { margin-top: 20px; max-width: 62ch; } .page-pricing .ts-tierfig { display: grid; gap: 14px; align-content: start; } .page-pricing .ts-tierfig img { width: 100%; border: 1px solid var(--sf-line); border-radius: var(--ts-radius-1); } .page-pricing .ts-tierfig figcaption { font-size: var(--ts-fs-2); line-height: 1.6; color: var(--sf-muted); } /* the three axes that are not volume. Each is a ruled leg: index, name, the explanation, and the cell that says which way the rate moves. */ .page-pricing .ts-axes { display: grid; margin-top: 56px; border-top: 1px solid var(--sf-line); } .page-pricing .ts-axis { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px var(--ts-gutter); padding-block: 28px; border-bottom: 1px solid var(--sf-line); } .page-pricing .ts-axis__head { display: grid; gap: 8px; align-content: start; } .page-pricing .ts-axis__no { font-family: var(--ts-font-mono); font-size: var(--ts-fs-1); font-variant-numeric: tabular-nums; letter-spacing: 0.14em; color: var(--sf-accent); } .page-pricing .ts-axis__name { font-family: var(--ts-font-display); font-size: var(--ts-fs-5); font-weight: 600; letter-spacing: -0.02em; } .page-pricing .ts-axis__body { font-size: var(--ts-fs-3); line-height: 1.68; color: var(--sf-muted); max-width: 62ch; text-wrap: pretty; } .page-pricing .ts-axis__effect { display: grid; gap: 8px; align-content: start; padding: 16px 18px; background: var(--sf-panel); border-radius: var(--ts-radius-1); } .page-pricing .ts-axis__effectlabel { font-family: var(--ts-font-mono); font-size: var(--ts-fs-1); letter-spacing: 0.14em; text-transform: uppercase; color: var(--sf-muted); } .page-pricing .ts-axis__effectvalue { font-family: var(--ts-font-mono); font-size: var(--ts-fs-3); font-variant-numeric: tabular-nums; color: var(--sf-accent); text-wrap: balance; } /* =========================================================================== 3. Terms — what is signed. Figures first, then the questions that follow from them. =========================================================================== */ .page-pricing .ts-termgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1px; background: var(--sf-line); border: 1px solid var(--sf-line); margin-bottom: 56px; } .page-pricing .ts-term { display: grid; gap: 10px; align-content: start; padding: 22px 20px 24px; background: var(--sf-bg); } .page-pricing .ts-term__label { font-family: var(--ts-font-mono); font-size: var(--ts-fs-1); letter-spacing: 0.12em; text-transform: uppercase; color: var(--sf-muted); } .page-pricing .ts-term__value { font-family: var(--ts-font-display); font-size: clamp(24px, 2.4vw, 34px); font-weight: 600; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; line-height: 1.1; } .page-pricing .ts-term__body { font-size: var(--ts-fs-2); line-height: 1.6; color: var(--sf-muted); } /* =========================================================================== 4. Enterprise — the desk. The only form on the page, and the only place a figure gets quoted rather than published. =========================================================================== */ .page-pricing .ts-ask { display: grid; grid-template-columns: minmax(0, 1fr); gap: 48px var(--ts-gutter); align-items: start; } .page-pricing .ts-ask__side { display: grid; gap: 26px; align-content: start; } .page-pricing .ts-ask__list { display: grid; gap: 0; } .page-pricing .ts-ask__list li { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 14px; padding-block: 14px; border-top: 1px solid var(--sf-line); font-size: var(--ts-fs-3); line-height: 1.6; color: var(--sf-muted); } .page-pricing .ts-ask__list li span { font-family: var(--ts-font-mono); font-size: var(--ts-fs-1); font-variant-numeric: tabular-nums; letter-spacing: 0.1em; color: var(--sf-accent); padding-top: 4px; } .page-pricing .ts-ask__form { display: grid; gap: 20px; padding: 28px 24px 30px; background: var(--sf-panel); border: 1px solid var(--sf-line); border-radius: var(--ts-radius-1); } .page-pricing .ts-ask__field { display: grid; gap: 8px; } .page-pricing .ts-ask__row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; } .page-pricing .ts-ask__label { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; font-family: var(--ts-font-mono); font-size: var(--ts-fs-1); letter-spacing: 0.12em; text-transform: uppercase; color: var(--sf-fg); } .page-pricing .ts-ask__req { font-size: var(--ts-fs-1); letter-spacing: 0.1em; color: var(--sf-accent); } .page-pricing .ts-ask__opt { font-size: var(--ts-fs-1); letter-spacing: 0.1em; color: var(--sf-muted); } .page-pricing .ts-ask__control { width: 100%; min-height: 48px; padding: 12px 14px; border: 1px solid var(--sf-line); border-radius: var(--ts-radius-1); background: var(--sf-bg); color: var(--sf-fg); font-family: var(--ts-font-body); font-size: var(--ts-fs-3); line-height: 1.5; } .page-pricing textarea.ts-ask__control { min-height: 116px; resize: vertical; } .page-pricing select.ts-ask__control { appearance: none; padding-right: 40px; cursor: pointer; } /* the chevron is drawn from the line token so the control matches the rules around it; a background-image would need a colour outside the set */ .page-pricing .ts-ask__select { position: relative; display: grid; } .page-pricing .ts-ask__select::after { content: ""; position: absolute; right: 18px; top: 50%; width: 8px; height: 8px; margin-top: -6px; border-right: 1.5px solid var(--sf-muted); border-bottom: 1.5px solid var(--sf-muted); transform: rotate(45deg); pointer-events: none; } .page-pricing .ts-ask__control::placeholder { color: var(--sf-muted); } .page-pricing .ts-ask__control:focus-visible { border-color: var(--sf-accent); } .page-pricing .ts-ask__control[aria-invalid="true"] { border-color: var(--sf-fg); box-shadow: inset 2px 0 0 var(--sf-fg); } /* the rails group: checkboxes read as a ruled list, not as chips */ .page-pricing .ts-ask__group { display: grid; gap: 8px; margin: 0; padding: 0; border: 0; } .page-pricing .ts-ask__legend { padding: 0; } .page-pricing .ts-ask__checks { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 2px 16px; } .page-pricing .ts-ask__check { display: flex; align-items: center; gap: 10px; min-height: 44px; font-size: var(--ts-fs-3); color: var(--sf-fg); cursor: pointer; } .page-pricing .ts-ask__check input { width: 18px; height: 18px; flex: none; accent-color: var(--sf-accent); cursor: pointer; } /* one message element per field: it carries the hint until the field is wrong, then it carries the reason. A second colour would break the one-accent budget, so the failed state takes weight and a rule instead. */ .page-pricing .ts-ask__msg { min-height: 1lh; font-size: var(--ts-fs-2); line-height: 1.5; color: var(--sf-muted); padding-left: 0; border-left: 0 solid transparent; transition: padding-left var(--ts-dur-micro) var(--ts-ease); } .page-pricing .ts-ask__msg[data-ts-state="bad"] { color: var(--sf-fg); font-weight: 600; padding-left: 10px; border-left: 2px solid var(--sf-fg); } .page-pricing .ts-ask__foot { display: grid; gap: 14px; padding-top: 6px; border-top: 1px solid var(--sf-line); } .page-pricing .ts-ask__status { min-height: 1lh; font-family: var(--ts-font-mono); font-size: var(--ts-fs-2); line-height: 1.5; color: var(--sf-muted); } .page-pricing .ts-ask__status[data-ts-state="ok"] { color: var(--sf-accent); } .page-pricing .ts-ask__status[data-ts-state="bad"] { color: var(--sf-fg); font-weight: 600; } .page-pricing .ts-ask__note { font-size: var(--ts-fs-2); line-height: 1.6; color: var(--sf-muted); } /* the footer note carried two inline declarations on the landing page; they live here instead so this file ships with none */ .page-pricing .ts-foot__note { margin-top: 16px; max-width: 34ch; } /* =========================================================================== Responsive. The shared sheet's breakpoints are restated here rather than overridden from outside, so the two never disagree. =========================================================================== */ @media (min-width: 700px) { .page-pricing .ts-axis { grid-template-columns: minmax(0, 1fr) minmax(0, 260px); align-items: start; } .page-pricing .ts-ask__row { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 1000px) { .page-pricing .ts-hero-sm { padding-top: 190px; padding-bottom: 96px; } .page-pricing .ts-hero-sm__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: 72px; } .page-pricing .ts-brow { border-top: 0; padding-top: 0; padding-left: 26px; border-left: 1px solid var(--sf-line); } .page-pricing .ts-tierwrap { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 56px; } .page-pricing .ts-tierfig { position: sticky; top: 108px; } .page-pricing .ts-axis { grid-template-columns: minmax(0, 3fr) minmax(0, 5fr) minmax(0, 3fr); gap: 40px; padding-block: 34px; } .page-pricing .ts-axis__head { gap: 10px; } .page-pricing .ts-ask { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 72px; } .page-pricing .ts-ask__form { padding: 34px 32px 36px; } } @media (max-width: 699px) { .page-pricing .ts-hero-sm { padding-top: 124px; padding-bottom: 56px; } /* both tables keep their width and scroll inside their own container, the same contract the landing page's table already signed */ .page-pricing .ts-tiers { min-width: 560px; } .page-pricing .ts-plan__group th { border-right-color: transparent; } /* the group name follows the horizontal scroll so a band never loses its label off the left edge. The counter goes: pinned alongside the longest name it runs past 375 and gets cut, and it is the decorative half. */ .page-pricing .ts-plan__grouplabel { position: sticky; left: 0; } .page-pricing .ts-plan__groupcount { display: none; } .page-pricing .ts-ask__form { padding: 22px 18px 24px; } .page-pricing .ts-axis__effect { padding: 14px 16px; } }