/* Tonaut — tonaut.app · shared shell for all four pages ------------------------------------------------------------------ Palette and type come from the design handoff (design_handoff_site). Ground is the LIGHT housing: the instrument's default, so the site's default too. Red is the only non-neutral and it means what it means in the app — recording, armed, active. Type: Archivo (labels, headings, body) + Martian Mono (numbers and short readouts only — it is wide and wraps badly in long strings). Both SIL Open Font License 1.1, self-hosted in assets/fonts/. NOTE: nothing here may set overflow-x: hidden on html or body. An ancestor with overflow-x: hidden becomes the scrollport and silently kills position: sticky on the landing page's scroll stage (handoff §6.1). Use overflow-x: clip, or nothing. */ @font-face { font-family: "Archivo"; src: url("../fonts/Archivo-Variable.ttf") format("truetype-variations"); font-weight: 100 900; font-stretch: 62% 125%; font-display: swap; } @font-face { font-family: "Martian Mono"; src: url("../fonts/MartianMono-Variable.ttf") format("truetype-variations"); font-weight: 100 800; font-stretch: 75% 112.5%; font-display: swap; } :root { --ground: #e8ecf0; /* page below the hero */ --head-bg: #edf1f5; /* where the hero gradient starts */ --ink: #16181b; --ink-2: #3d4349; /* body copy */ --ink-3: #5a6067; /* small labels and captions — 5.35:1 on ground */ --rule: #c6ccd3; /* hairlines */ --accent: #cc2317; --accent-text: #f0675a; /* red TYPE on #16181b — 5.75:1 */ --accent-soft: #ffe7e4; /* body copy on the red block — 4.66:1 */ --dark: #16181b; --dark-ink: #f0f3f6; --dark-ink-2: #b7bcc2; --dark-rule: #3a3f45; --screen: #070708; /* #8b9199 and #b3bac2 are NOT text colours (2.68:1 and 1.65:1). They stay legal as stroke on crop marks and dimension rules. */ --draw: #b3bac2; /* One measure, no exceptions (handoff §2): .wrap, .sec and the stage's sticky child all take --col, so the header, the footer and every section on all four pages are the same width. --col is the OUTER box and box-sizing is border-box, so the content is --col minus two gutters: 1440 of content needs 1600 here. The page therefore reaches its full 1440 at a 1600 px viewport, and below that the content shrinks while the 80 px gutters hold - which is what the gutters are for. At 1440 of viewport that is 1280 of content inside 80. The gutter ramps from the tablet value it has always had at 820 to 80 at 1440 and stops there; below 48em the phone keeps its own curve, set in the narrow block at the end of this file. */ --col: 1600px; /* Two corner radii, both measured off what is already on the page rather than chosen. --r-img is the black screen's own corner as the crops carry it at the size they are drawn (6.7 rendered). --r-panel is the panel's corner as the hero draws it (19.5 rendered at the stage's scale). Nothing on this page was rounded in CSS before: the rounding people could see was baked into the screenshots, which is why a crop of the keys looked square beside a crop of a screen. */ --r-img: 7px; --r-panel: 20px; --gutter: clamp(26px, calc(8.68vw - 45px), 80px); --block: clamp(56px, 7vw, 104px); --half: clamp(26px, 3vw, 40px); /* Sized around the App Store button rather than chosen: the header carries the same button the hero does, 46 tall, with 9 of air above and below it. The sticky scenes and the scroll offset both derive from this, so they follow. */ --head-h: 64px; } *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--head-h) + 8px); } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { margin: 0; background: var(--ground); color: var(--ink); font-family: "Archivo", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif; font-weight: 400; font-size: clamp(14px, 0.8rem + 0.25vw, 16px); line-height: 1.6; -webkit-font-smoothing: antialiased; } img { max-width: 100%; height: auto; display: block; } a { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--rule); } a:hover { color: var(--accent); border-bottom-color: var(--accent); } a:focus-visible, button:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; } /* ---------- the measure: one width, no exceptions ---------- */ .wrap { width: 100%; max-width: var(--col); margin: 0 auto; padding-inline: var(--gutter); } /* The policy pages' measure: 1200px of CONTENT, Richard's number. Written as content plus two gutters because --col is the outer box here and box-sizing is border-box, which is the same reason the home page's 1440 is declared as 1600. Asking for 1200 flat would have drawn 1128 and quietly missed. */ .narrow { max-width: calc(1200px + var(--gutter) * 2); } /* ---------- type roles ---------- */ h1, h2, h3 { margin: 0; font-weight: 600; } .t-h1 { font-variation-settings: "wdth" 118; font-size: clamp(21px, 2.7vw, 36px); line-height: 1.04; letter-spacing: -0.008em; text-wrap: balance; } .t-head { font-variation-settings: "wdth" 118; font-size: clamp(16px, 1.7vw, 21px); letter-spacing: 0.12em; text-transform: uppercase; line-height: 1.2; } .t-label { font-weight: 600; font-variation-settings: "wdth" 115; font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; line-height: 1.3; } .t-label--lg { font-size: 11px; letter-spacing: 0.16em; } .t-ro { font-family: "Martian Mono", ui-monospace, "SFMono-Regular", Menlo, monospace; font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: 0; } .t-dim { color: var(--ink-3); } .t-body { font-size: 13px; line-height: 1.5; color: var(--ink-2); text-wrap: pretty; } /* a section's header rule: number · title · aside */ .head { display: flex; align-items: flex-end; gap: 16px; border-bottom: 1px solid var(--ink); padding-bottom: 12px; } .head__no { font-family: "Martian Mono", ui-monospace, monospace; font-weight: 600; font-size: clamp(22px, 2.4vw, 32px); line-height: 0.9; color: var(--ink-3); } .head__spacer { flex: 1 1 auto; } .head__aside { color: var(--ink-3); } /* ---------- header ---------- */ .site-head { position: sticky; top: 0; z-index: 30; background: var(--head-bg); border-bottom: 1px solid var(--ink); } .site-head .wrap { display: flex; align-items: center; gap: 14px; height: var(--head-h); } .brand { border: 0; display: inline-flex; align-items: baseline; gap: 10px; font-variation-settings: "wdth" 118; font-weight: 600; font-size: 17px; letter-spacing: 0.18em; text-transform: uppercase; white-space: nowrap; } .brand:hover { color: var(--accent); } .brand .ver { font-family: "Martian Mono", ui-monospace, monospace; font-weight: 500; font-size: 9px; letter-spacing: 0; color: var(--ink-3); } /* The phone menu's key. Hidden at desktop width, where the bar holds everything. */ .menu-btn { display: none; margin-left: auto; width: 44px; height: 44px; padding: 0; border: 0; background: none; align-items: center; justify-content: center; cursor: pointer; color: var(--ink); } /* Three bars from one element: the middle is the box, the outer two are its pseudo-elements, so the mark costs no extra markup. */ .menu-btn__bars, .menu-btn__bars::before, .menu-btn__bars::after { display: block; width: 20px; height: 2px; background: currentColor; } .menu-btn__bars { position: relative; } .menu-btn__bars::before, .menu-btn__bars::after { content: ""; position: absolute; left: 0; } .menu-btn__bars::before { top: -6px; } .menu-btn__bars::after { top: 6px; } /* Open: the outer bars meet in the middle and cross, the middle one goes. */ [data-menu="open"] .menu-btn__bars { background: transparent; } [data-menu="open"] .menu-btn__bars::before { top: 0; transform: rotate(45deg); } [data-menu="open"] .menu-btn__bars::after { top: 0; transform: rotate(-45deg); } @media (prefers-reduced-motion: no-preference) { .menu-btn__bars, .menu-btn__bars::before, .menu-btn__bars::after { transition: transform .18s ease, top .18s ease, background .18s ease; } } .site-nav { display: flex; gap: clamp(12px, 2vw, 26px); align-items: center; margin-left: auto; } .site-nav a { border: 0; color: var(--ink); white-space: nowrap; } /* The nav takes the button's size, because the button is the biggest thing on the row and a label two points under it reads as an afterthought. 0.14em is the button's own tracking, so at 11px the two sit on the same rhythm. */ .site-nav a.t-label { font-size: 11px; letter-spacing: 0.14em; } .site-nav a[aria-current="page"] { color: var(--accent); } /* ---------- the App Store button ---------- */ /* Not a link and not a badge. The app is not on the store yet, so there is nowhere for it to go; it is a statement, with an Apple mark drawn here as inline SVG beside plain words. Apple's official "Download on the App Store" lockup is deliberately NOT used — that lockup is for apps you can actually download. */ .cta { border-radius: var(--r-img); display: inline-flex; align-items: center; justify-content: center; gap: 8px; background: var(--accent); color: #fff; border: 0; height: 30px; padding: 0 13px; font-family: inherit; font-weight: 600; font-variation-settings: "wdth" 115; font-size: 9px; letter-spacing: 0.12em; text-transform: uppercase; white-space: nowrap; cursor: default; } .cta__mark { width: 11px; height: 13px; flex: none; fill: currentColor; } .cta--lg { height: 46px; padding: 0 24px; font-size: 11px; letter-spacing: 0.14em; gap: 11px; } .cta--lg .cta__mark { width: 15px; height: 18px; } .cta--xl { height: 52px; padding: 0 30px; font-size: 12px; letter-spacing: 0.14em; gap: 12px; } .cta--xl .cta__mark { width: 16px; height: 19px; } /* ---------- prose pages: privacy · terms · support ---------- */ .page-head { padding: var(--block) 0 var(--half); } .page-head .eyebrow { display: flex; align-items: center; gap: 9px; color: var(--accent); margin: 0 0 14px; } .page-head .eyebrow::before { content: ""; width: 7px; height: 7px; background: var(--accent); } .page-head h1 { font-size: clamp(26px, 3.4vw, 44px); line-height: 1.04; letter-spacing: -0.01em; } /* the page label reads as the landing page's eyebrow */ .page-head .label { display: flex; align-items: center; gap: 9px; color: var(--accent); margin-bottom: 14px; } .page-head .label::before { content: ""; width: 7px; height: 7px; background: var(--accent); flex: none; } /* Vertical rhythm for the prose pages' own sections: space above only, so the next section owns its own space (handoff §2). Scoped to sections that carry no class, or the shorthand would put a block of padding on top of the landing page's scroll stage — which only declares padding-bottom. */ main > section:not([class]) { padding: var(--block) 0 0; } main > section:not([class]):last-child { padding-bottom: var(--block); } .stamp { margin: 14px 0 0; color: var(--ink-3); font-size: 11px; } .stamp .t-ro { font-size: 10px; } .prose > * + * { margin-top: 1.1em; } .prose p, .prose li { font-size: 14.5px; line-height: 1.62; color: var(--ink-2); } .prose .lede { font-size: clamp(15px, 1.2vw, 18px); line-height: 1.5; color: var(--ink); } .prose h2 { margin-top: clamp(40px, 5vw, 60px); padding-bottom: 10px; border-bottom: 1px solid var(--ink); font-variation-settings: "wdth" 118; font-size: clamp(15px, 1.5vw, 19px); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink); } .prose h3 { margin-top: 2em; font-variation-settings: "wdth" 115; font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink); } .prose h2 + p, .prose h3 + p { margin-top: 0.9em; } .prose ul, .prose ol { margin: 1em 0 0; padding-left: 1.2em; } .prose li { margin-bottom: 0.5em; } .prose li::marker { color: var(--ink-3); } .prose dl { margin: 0; } /* a plain callout — a rule and a line, not a tinted card */ .note { padding-left: 16px; border-left: 2px solid var(--accent); color: var(--ink-3); font-size: 13px; line-height: 1.55; } .note b { color: var(--ink); font-weight: 600; } .note p + p { margin-top: 0.8em; } /* faq rows */ .faq { border-top: 1px solid var(--ink); margin-top: var(--half); } .faq > div { border-bottom: 1px solid var(--rule); padding: clamp(20px, 2.6vw, 28px) 0; } .faq h3 { margin: 0 0 0.7em; } .faq p + p { margin-top: 0.8em; } /* definition rows — label left, value right */ .rows { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 0 clamp(24px, 4vw, 64px); } .rows > div { display: flex; justify-content: space-between; gap: 16px; border-bottom: 1px solid var(--rule); padding: 11px 0; } .rows dt { margin: 0; font-weight: 600; font-variation-settings: "wdth" 115; font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); } .rows dd { margin: 0; font-family: "Martian Mono", ui-monospace, monospace; font-weight: 500; font-size: 12px; text-align: right; } /* ---------- footer ---------- */ .site-foot { border-top: 1px solid var(--ink); } .site-foot .wrap { padding-top: clamp(22px, 2.6vw, 32px); padding-bottom: clamp(40px, 5vw, 56px); display: flex; gap: 14px 18px; align-items: baseline; flex-wrap: wrap; } .site-foot .mark { font-variation-settings: "wdth" 118; font-weight: 600; font-size: 11px; letter-spacing: 0.24em; text-transform: uppercase; } .site-foot__spacer { flex: 1 1 auto; } .site-foot nav { display: flex; gap: 18px; flex-wrap: wrap; } .site-foot a { color: var(--ink-3); border-bottom-color: var(--rule); } .site-foot a:hover { color: var(--accent); border-bottom-color: var(--accent); } .site-foot .stampline { font-family: "Martian Mono", ui-monospace, monospace; font-weight: 500; font-size: 9px; color: var(--ink-3); } /* The one outbound link on the site. It is a credit, not a call to action, so it sits in the footer's own type and colour and competes with nothing. It opens in a new tab: a visitor reading about the app should not lose their place to follow a byline. */ .credit-line { color: var(--ink-3); } .credit { color: var(--ink-3); border-bottom-color: var(--rule); } .credit:hover { color: var(--accent); border-bottom-color: var(--accent); } /* Two sentences on one row: the licence note, then the trademark note whose right edge has to land on the copyright's right edge above it. A grid, not a wrapping flex row, because the second column's right edge then IS the .wrap's content edge - which is where the copyright sits, being the last item on its own line in the same .wrap. No shared padding is assumed and no scrollbar gutter enters into it. Below 48em there is not room for two columns, so the pair stacks and the trademark note goes back to reading from the left: one media query drives both the column count and the alignment, so they cannot disagree. */ .foot-note { border-top: 1px solid var(--rule); margin-top: 4px; padding-top: 14px; width: 100%; display: grid; gap: 10px 26px; grid-template-columns: 1fr; font-size: 11px; line-height: 1.5; color: var(--ink-3); } .foot-note p { margin: 0; max-width: 52ch; } @media (min-width: 48em) { .foot-note { grid-template-columns: 1fr 1fr; } /* The home page carries two of these notes and the three policy pages carry three. Pinning only the last one left the middle note — the font licence — stranded at the top of the right column, reading as a third column that is neither left nor right. So every note but the last stacks in column one, and the trademark line takes column two on its own row. Two pages, one shape. */ .foot-note p { grid-column: 1; } .foot-note p:last-child { grid-column: 2; grid-row: 1; margin-left: auto; text-align: right; } } /* ---------- utilities the prose pages use ---------- */ /* Same roles as .t-label / .t-ro above, under the names privacy.html, terms.html and support.html already carry. Their copy is verified and was not rewritten, so the stylesheet meets the markup where it is. */ .label { font-weight: 600; font-variation-settings: "wdth" 115; font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); margin: 0 0 var(--half); } .readout { font-family: "Martian Mono", ui-monospace, "SFMono-Regular", Menlo, monospace; font-weight: 500; font-variant-numeric: tabular-nums; letter-spacing: 0; } .small { font-size: 12px; line-height: 1.55; } .muted { color: var(--ink-3); } .prose b, .faq b { font-weight: 600; color: var(--ink); } /* a definition list of measurements, under the name support.html uses */ .specs { border-top: 1px solid var(--rule); margin: 0; } .specs > div { display: flex; flex-wrap: wrap; gap: 4px 18px; align-items: baseline; justify-content: space-between; padding: 11px 0; border-bottom: 1px solid var(--rule); } .specs dt { margin: 0; font-weight: 600; font-variation-settings: "wdth" 115; font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); } .specs dd { margin: 0; font-size: 13px; } .specs dd.readout { font-size: 12px; } /* a screenshot. The box is reserved before the file lands so nothing jumps; full panels are 874 x 402, and the phone crops are one 370 x 137 window. */ figure { margin: 0; } /* The support page's figure is a whole panel at 874/402, the same thing the housings figure is, so it takes the panel's radius rather than the small one. It already clipped its image, so the radius is all it needed. */ .shot { background: var(--screen); overflow: hidden; border-radius: var(--r-panel); } .shot img { width: 100%; aspect-ratio: 874 / 402; object-fit: cover; } figcaption { margin-top: 12px; font-size: 12.5px; line-height: 1.5; color: var(--ink-3); max-width: 62ch; } figcaption b { color: var(--ink); font-weight: 600; } /* ---------- responsive ---------- */ @media (max-width: 47.99em) { /* 80 px a side is 160 of a 390 px phone. The gutter the phone already had stays exactly as it was; the 80 is a desktop figure. */ :root { --gutter: clamp(16px, 3.2vw, 44px); } .site-head .wrap { gap: 10px; } /* The bar cannot hold the brand, the labels and a button whose words are fixed, so on a phone it holds the brand and a key. The same