/* Self-hosted fonts (CSP: style-src/font-src 'self') */ /* latin */ @font-face { font-family: "Bricolage Grotesque"; font-style: normal; font-weight: 400 800; font-stretch: 100%; font-display: swap; src: url("/fonts/bricolage-grotesque-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* latin-ext */ @font-face { font-family: "Bricolage Grotesque"; font-style: normal; font-weight: 400 800; font-stretch: 100%; font-display: swap; src: url("/fonts/bricolage-grotesque-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* latin */ @font-face { font-family: "Wix Madefor Text"; font-style: normal; font-weight: 400 800; font-display: swap; src: url("/fonts/wix-madefor-text-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* latin-ext */ @font-face { font-family: "Wix Madefor Text"; font-style: normal; font-weight: 400 800; font-display: swap; src: url("/fonts/wix-madefor-text-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* latin */ @font-face { font-family: "Wix Madefor Text"; font-style: italic; font-weight: 400 800; font-display: swap; src: url("/fonts/wix-madefor-text-italic-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* latin-ext */ @font-face { font-family: "Wix Madefor Text"; font-style: italic; font-weight: 400 800; font-display: swap; src: url("/fonts/wix-madefor-text-italic-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } :root { color-scheme: light dark; /* Colors - Light mode (flat grey canvas, green accent) */ --color-primary: oklch(0.54 0.18 145); --color-primary-hover: oklch(0.48 0.17 145); --color-primary-active: oklch(0.48 0.17 145); /* Pure white, not an off-white: the near-white this used to be (oklch(0.985 0.005 145), #f8fbf8) measured 4.44:1 on --color-primary, just under the 4.5:1 AA floor for 16px text like the primary pill CTA. White clears it at 4.63:1 and is indistinguishable on a green ground. */ --color-on-primary: oklch(1 0 0); /* One step darker than the 0.47 this started at, which measured 4.36:1 on the 12%-primary soft green the "verified" pill uses as its ground — just under the 4.5:1 AA floor. 0.455 reads 4.63:1 there and improves every other green-on-light-ground use of this token too. */ --color-primary-text: oklch(0.455 0.17 145); --color-background: oklch(0.93 0.004 250); --color-surface: oklch(0.975 0.002 250); --color-text: oklch(0.22 0.012 260); --color-text-muted: oklch(0.44 0.014 260); --color-border: oklch(0.84 0.008 250); /* Form-control chrome (WCAG 1.4.11). --color-border is a decorative divider and only reads ~1.3–1.5:1 on surface/background; field borders need 3:1. Light 0.60 measures 3.21:1 on --color-background and 3.67:1 on --color-surface. */ --color-field-border: oklch(0.6 0.012 250); /* One step darker than the 0.55 this started at, which measured 4.34:1 on --color-background for 15px danger-pill text (Delete account on /account) — just under the 4.5:1 AA floor. 0.535 reads 4.64:1 there and keeps filled danger buttons further above the floor too. */ --color-danger: oklch(0.535 0.19 25); --color-danger-hover: oklch(0.5 0.18 25); --color-on-danger: oklch(0.985 0.005 25); /* Amber, not a pale yellow: 0.72 still reads as yellow on the light canvas, and 0.48 warning-text clears 4.5:1 on --color-background. */ --color-warning: oklch(0.72 0.16 85); --color-warning-text: oklch(0.48 0.15 80); /* Warm light cast by the lantern Kody holds (landing + auth heroes) */ --lantern-glow: oklch(0.88 0.11 85 / 0.4); --lantern-glow-dark: oklch(0.8 0.13 80 / 0.55); /* Colors - Dark mode (graphite canvas, brighter green) */ --color-primary-dark: oklch(0.72 0.205 145); --color-primary-hover-dark: oklch(0.78 0.21 145); --color-primary-active-dark: oklch(0.78 0.21 145); --color-on-primary-dark: oklch(0.2 0.05 148); --color-primary-text-dark: oklch(0.75 0.2 145); --color-background-dark: oklch(0.19 0.008 255); --color-surface-dark: oklch(0.235 0.01 255); --color-text-dark: oklch(0.945 0.005 250); --color-text-muted-dark: oklch(0.72 0.01 255); --color-border-dark: oklch(0.33 0.01 255); /* 0.55 measures 3.81:1 on --color-background-dark and 3.44:1 on --color-surface-dark. */ --color-field-border-dark: oklch(0.55 0.012 255); --color-danger-dark: oklch(0.75 0.16 25); --color-danger-hover-dark: oklch(0.7 0.17 25); --color-on-danger-dark: oklch(0.2 0.05 25); --color-warning-dark: oklch(0.84 0.16 85); --color-warning-text-dark: oklch(0.84 0.15 85); /* Tab stops in code and other preformatted text. Browsers default to 8. */ tab-size: 2; /* Typography */ --font-display: "Bricolage Grotesque", system-ui, sans-serif; --font-body: "Wix Madefor Text", system-ui, sans-serif; --font-family: var(--font-body); --font-mono: ui-monospace, "SF Mono", Menlo, monospace; --font-size-xs: 0.75rem; --font-size-sm: 0.875rem; --font-size-base: 1rem; --font-size-lg: 1.25rem; --font-size-xl: 2rem; --font-size-2xl: 3rem; --font-weight-normal: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; --line-height-body: 1.62; --line-height-body-dark: 1.7; /* Spacing */ --spacing-xs: 0.25rem; --spacing-sm: 0.5rem; --spacing-md: 1rem; --spacing-lg: 1.5rem; --spacing-xl: 2rem; --spacing-2xl: 3rem; /* Border radius */ --radius-sm: 0.25rem; --radius-md: 0.5rem; --radius-lg: 0.75rem; --radius-xl: 1rem; --radius-card: 14px; --radius-full: 999px; /* Shadows */ --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05); --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); --shadow-sm-dark: 0 1px 2px 0 rgb(255 255 255 / 0.05); --shadow-md-dark: 0 4px 6px -1px rgb(255 255 255 / 0.08), 0 2px 4px -2px rgb(255 255 255 / 0.08); /* Motion */ --ease-out: cubic-bezier(0.22, 1, 0.36, 1); --transition-fast: 160ms var(--ease-out); --transition-normal: 200ms var(--ease-out); /* Kody shirt pattern, used as a mask for background whispers. */ --kody-pattern: url("/images/kody-pattern.webp"); /* Select chevron (see `getSelectCss`). A data-URI background image cannot read `currentColor`, so the stroke is baked in and the token is themed instead. Each value is its theme's muted-text color, which clears the 3:1 non-text contrast minimum on both that theme's surfaces. */ --select-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234e535a' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); --select-chevron-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a0a5ab' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); /* Responsive spacing - used for page-level padding */ --spacing-page: var(--spacing-2xl); --spacing-section: var(--spacing-xl); --spacing-header: var(--spacing-xl); } /* Tablet responsive overrides */ @media (max-width: 1024px) { :root { --spacing-page: var(--spacing-xl); --spacing-section: var(--spacing-lg); --spacing-header: var(--spacing-lg); } } /* Mobile responsive overrides */ @media (max-width: 640px) { :root { --spacing-page: var(--spacing-md); --spacing-section: var(--spacing-md); --spacing-header: var(--spacing-md); --font-size-xl: 1.5rem; --font-size-2xl: 2rem; } } @media (prefers-color-scheme: dark) { :root { color-scheme: dark; --color-primary: var(--color-primary-dark); --color-primary-hover: var(--color-primary-hover-dark); --color-primary-active: var(--color-primary-active-dark); --color-on-primary: var(--color-on-primary-dark); --color-primary-text: var(--color-primary-text-dark); --color-background: var(--color-background-dark); --color-surface: var(--color-surface-dark); --color-text: var(--color-text-dark); --color-text-muted: var(--color-text-muted-dark); --color-border: var(--color-border-dark); --color-field-border: var(--color-field-border-dark); --color-danger: var(--color-danger-dark); --color-danger-hover: var(--color-danger-hover-dark); --color-on-danger: var(--color-on-danger-dark); --color-warning: var(--color-warning-dark); --color-warning-text: var(--color-warning-text-dark); --lantern-glow: var(--lantern-glow-dark); --select-chevron: var(--select-chevron-dark); --line-height-body: var(--line-height-body-dark); /* Dark mode shadows - lighter for visibility */ --shadow-sm: var(--shadow-sm-dark); --shadow-md: var(--shadow-md-dark); } } /* Reset and base styles */ *, *::before, *::after { box-sizing: border-box; } body { margin: 0; padding: 0; font-family: var(--font-family); font-size: 1.0625rem; line-height: var(--line-height-body); color: var(--color-text); background-color: var(--color-background); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: clip; } h1, h2, h3 { font-family: var(--font-display); font-optical-sizing: auto; text-wrap: balance; } /* No `border-radius` here. This rule used to force 4px onto whatever you tabbed to, visibly resquaring pills, cards, and rounded fields at the moment they took focus — and since it is unlayered, no component style could win against it, so it had grown a set of per-component escape hatches whose only job was to put the real radius back. `outline` already follows the element's own `border-radius`, so the declaration was never needed. */ :focus-visible { outline: 2px solid #3b82f6; outline-offset: 2px; } /* The router moves focus to
after client-side navigation (and the skip link targets it). That focus is managed wayfinding for assistive tech — an outline around the entire page region communicates nothing, and keyboard users still get real indicators on the elements inside. */ main:focus-visible { outline: none; } /* Native
questions (account explainers, FAQ). Clicking the summary leaves :focus-visible on, and the global blue outline then boxes the label. Unlayered so it beats :focus-visible above. */ details > summary:focus-visible { outline: none; } /* Connected pill controls (community search): the container shows one focus ring via :focus-within; inner segments must not draw their own. Unlayered on purpose — component styles live in @layer rmx, which the global :focus-visible rule above would otherwise always beat. */ [data-focus-container] :focus-visible { outline: none; } /* ...except a submit button inside one. The suppression above is meant for the text segments, which share the container's ring and show a caret. The button is its own action, and by the time focus reaches it the container ring is already lit, so without this there was no indication at all that the button had focus. Drawn inside the button (negative offset) so it cannot collide with the container edge, in the on-primary tone that the button's own label uses: 4.6:1 on the green fill in light, 7.8:1 in dark. */ [data-focus-container] button:focus-visible { outline: 2.5px solid var(--color-on-primary); outline-offset: -5px; } /* Individually bordered redesign fields (login form): the field draws its own focus ring — green border + soft glow, see getAuthInputCss() — so the global outline above would double-ring it. Same unlayered escape hatch as data-focus-container. The radius override this used to carry is gone with the global one it was undoing. */ [data-field-ring]:focus-visible { outline: none; } ::selection { background: oklch(from var(--color-primary) l c h / 0.3); } input[type="radio"], input[type="checkbox"] { accent-color: #3b82f6; } #root { min-height: 100vh; } /* Header hairline is CSS-only so it paints before JS. A scroll-timeline fade hung a11y waits (scroll-driven animations never finish), so the line is always on. */ .site-header { border-bottom: 1px solid var(--color-border); } html:has([data-account-shell]) .site-header { background: transparent; border-bottom: none; padding: 0; } html:has([data-account-shell]) footer { border-top: none; background: transparent; padding: 24px 18px 18px; } @media (max-width: 760px) { html:has([data-account-shell]) footer { padding: 16px 10px 10px; } } html:has([data-account-shell]) footer > * { max-width: 1120px; } /* Same box as `.ao-landing`: pill then wrap inside one padded parent. */ main:has([data-account-shell]) { padding: 18px 18px 0; display: flex; flex-direction: column; flex: 1; } [data-account-shell]:has(> [data-account-page]) { margin-top: 16px; } @media (max-width: 760px) { [data-account-shell]:has(> [data-account-page]) { margin-top: 12px; } } /* Nested account panels sit on the sheet, like Hey list rows — not boxed cards. */ [data-account-page] [data-account-section] { background: transparent; border: none; box-shadow: none; padding: 0; border-radius: 0; } [data-account-page] table thead { display: none; } [data-account-page] table td { padding-inline: 0; padding-block: 0.85rem; } @media (max-width: 760px) { main:has([data-account-shell]) { padding: 10px 10px 0; } } /* Always reserve the classic scrollbar's track, so a short page and a long one have the same content width. Without it, every navigation between the two shifts the layout sideways — which the route view transition then animates. No-op where scrollbars overlay the content (macOS default, touch). */ html { scrollbar-gutter: stable; } /* Smooth scrolling only after the initial #hash jump has settled (set by page-init.js) so cross-page anchor arrivals land instantly. */ html.is-settled { scroll-behavior: smooth; } /* Shiki dual-theme tokens follow the system color scheme. Inline light colors are the default. */ @media (prefers-color-scheme: dark) { .shiki, .shiki span { color: var(--shiki-dark) !important; background-color: var(--shiki-dark-bg) !important; font-style: var(--shiki-dark-font-style) !important; font-weight: var(--shiki-dark-font-weight) !important; text-decoration: var(--shiki-dark-text-decoration) !important; } } /* ---------- motion system (2026 landing redesign) ---------- Enhance-only: content is fully visible without JS; the `html.js` class (set pre-paint by page-init.js) gates initial-hidden states, and reduced-motion removes everything. One ease everywhere (--ease-out). */ @media (prefers-reduced-motion: no-preference) { /* list rhythm + illustration entrances (classes added by client/reveal.ts) */ html.js .reveal { opacity: 0; translate: 0 20px; transition: opacity 600ms var(--ease-out), translate 600ms var(--ease-out); transition-delay: var(--reveal-delay, 0ms); } html.js .reveal-pop { opacity: 0; translate: 0 8px; scale: 0.94; transition: opacity 420ms var(--ease-out), translate 420ms var(--ease-out), scale 420ms var(--ease-out); transition-delay: var(--reveal-delay, 0ms); } html.js .reveal.in, html.js .reveal-pop.in { opacity: 1; translate: 0 0; scale: 1; } /* Card reveal: the same quiet rise as .reveal, but as an animation rather than a transition, so the card's own hover transitions (border, lift) keep their easing after the entrance. No scale — text never pops. */ html.js .reveal-card { opacity: 0; } html.js .reveal-card.in { opacity: 1; animation: card-in 600ms var(--ease-out) var(--reveal-delay, 0ms) backwards; } /* Page-open choreography: full document loads only — SPA navigations set html[data-spa-nav] (client-router) and get the view transition as their entrance instead. `both` + opacity 0 delays LCP on the homepage h1 (PSI lab). Keep the motion anyway — the entrance is worth that hit. */ html.js:not([data-spa-nav]) [data-rise] { animation: rise 700ms var(--ease-out) both; animation-delay: calc(60ms + var(--rise, 0) * 90ms); } /* SPA route transitions (View Transitions API). The router wraps the DOM swap in startViewTransition (client/client-router.tsx). Motion lives on `page` (`
`), not `root` — otherwise the account rail (inside main, no name of its own until lifted) fades and slides with the content. Always-present chrome is pinned static. The rail is named so it lifts out of `page`, but it is *not* always on screen: leaving `/account` or `/admin` has an old snapshot and no new one. Pinning old/new (`animation: none`) froze that leftover rail on top of the destination. Old/new fade; only the group stays still so account↔admin (rail on both sides) does not morph/squash. Browsers without the API never match these pseudos — the swap is instant. */ ::view-transition-old(root), ::view-transition-new(root) { animation: none; } ::view-transition-old(page) { animation: vt-page-out 120ms var(--ease-out) both; } ::view-transition-new(page) { animation: vt-page-in 220ms var(--ease-out) both; } ::view-transition-old(site-header), ::view-transition-new(site-header), ::view-transition-group(site-header), ::view-transition-old(site-footer), ::view-transition-new(site-footer), ::view-transition-group(site-footer), ::view-transition-old(nav-progress), ::view-transition-new(nav-progress), ::view-transition-group(nav-progress), ::view-transition-group(account-nav), ::view-transition-group(files-back), ::view-transition-group(files-head), ::view-transition-group(files-tree), ::view-transition-group(files-blob) { animation: none; } /* Same treatment for the whole playbook files explorer: switching files is an in-place content swap, so nothing there may lift and slide the way a route change does. Every part is named (lifted out of `page`) with its group pinned — the file pane's height changes per file, and an unpinned group would squash between the two sizes. Old/new cross-fade rather than being pinned outright: none of these are on screen outside `/files`, and pinning old/new strands the leftover snapshot. */ ::view-transition-old(account-nav), ::view-transition-old(files-back), ::view-transition-old(files-head), ::view-transition-old(files-tree), ::view-transition-old(files-blob) { animation: vt-page-out 120ms var(--ease-out) both; } ::view-transition-new(account-nav), ::view-transition-new(files-back), ::view-transition-new(files-head), ::view-transition-new(files-tree), ::view-transition-new(files-blob) { animation: vt-account-nav-in 220ms var(--ease-out) both; } @keyframes vt-page-out { to { opacity: 0; } } @keyframes vt-page-in { from { opacity: 0; transform: translateY(8px); } } @keyframes vt-account-nav-in { from { opacity: 0; } } @keyframes rise { from { opacity: 0; translate: 0 26px; } to { opacity: 1; translate: 0 0; } } @keyframes card-in { from { opacity: 0; translate: 0 20px; } to { opacity: 1; translate: 0 0; } } @keyframes success-in { from { opacity: 0; translate: 0 6px; scale: 0.97; } to { opacity: 1; translate: 0 0; scale: 1; } } } @media (prefers-reduced-motion: reduce) { html.is-settled { scroll-behavior: auto; } } .app-shell { min-height: 100vh; display: flex; align-items: center; justify-content: center; } .loading-spinner { width: 36px; height: 36px; border-radius: 999px; border: 4px solid color-mix(in srgb, var(--color-border) 70%, transparent); border-top-color: var(--color-primary); opacity: 0; animation: spinner-fade-in 0.2s ease 120ms forwards, spinner-spin 0.9s linear 120ms infinite; } @keyframes spinner-spin { to { transform: rotate(360deg); } } @keyframes spinner-fade-in { to { opacity: 1; } } .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* Landing page — static classes so SSR does not emit a