/* One stylesheet for every public page (Kyle 2026-07-29, option B). * * Before this file, all 35 pages under preview/public carried their own copy * of the base styles — 11 distinct copies of the same 5 KB. They drifted: * /landing/ set its body text in the sans face at 16px while the other 34 set * it in the serif face at 17px, section headings split between serif 1.35rem * and sans 1.05rem, and the site header was a wrapped run of underlined links * sitting below the intro copy while the app header was a clean row. * * The rule now: shared look lives here, page-specific rules stay in the page. * A page that needs a new shared value changes THIS file, not its own copy. * preview/test/public-site.test.js locks the parts that must not drift again. */ @font-face { font-family: "Clash Grotesk"; src: url("/fonts/ClashGrotesk-Variable.woff2") format("woff2-variations"); font-weight: 200 700; font-display: swap; } :root { /* Type tokens. Same three as the app. Kyle 2026-07-31: DROP Georgia. Kyle 2026-08-01: body = system UI; Clash (gothic) for brand only. Nothing on this site may name a family of its own (Kyle 2026-07-27). */ --cz-display: "Clash Grotesk", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --cz-sans: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --cz-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace; color-scheme: light; --bg: #f4f4f0; --ink: #17181a; --muted: #5c5f66; --card: #ffffff; --inset: #fafaf6; --line: rgba(23, 24, 26, 0.10); --accent: #17181a; --money: #15803d; --max: 40rem; --shell-max: 1080px; --shell-pad: 28px; /* Masthead tokens, copied from the app's own palette (PALETTES in credenza-fashion.jsx: --cz-sub, --cz-faint, --cz-hair). The page's --muted and --line are a shade off the app's, and Kyle 2026-07-30 asked for the header to carry NO difference from the one in the product. */ --mast-ink: #17181a; --mast-sub: #4f545b; --mast-faint: #6b7078; --mast-hair: #d2d2c9; --mast-hover-bg: rgba(23, 24, 26, 0.04); /* The avatar ring's fill. The app's --cz-card-solid, not the page's --card. */ --mast-avatar-bg: #ffffff; /* Body chrome uses system sans; brand wordmark still uses display. */ font-family: var(--cz-sans); } /* The dark theme. It is keyed to an attribute, not to the operating system's * light/dark setting (Kyle 2026-07-30, option B). The app never reads that * setting — it keeps its own choice — so a Mac set to Light used to show light * pages beside a dark product. Every page ships with data-theme="dark" on * , and /theme.js moves the page to light only when the visitor picked * the app's Gallery theme. Dark is what a new visitor sees. * * Kyle 2026-08-01: match Kimi measurements feel — #050506 field, #0d0d10 card. */ :root[data-theme="dark"] { color-scheme: dark; --bg: #050506; /* Kyle 2026-08-01: lighter body and meta text — sharper on near-black. */ --ink: #fafafa; --muted: #c8c8d0; --card: #0d0d10; --inset: #141418; --line: rgba(255, 255, 255, 0.10); --accent: #fafafa; --money: #4ade80; /* Mast matches app Blackout palette. */ --mast-ink: #fafafa; --mast-sub: #c8c8d0; --mast-faint: #a3a3ab; --mast-hair: rgba(255, 255, 255, 0.10); --mast-hover-bg: rgba(255, 255, 255, 0.04); --mast-avatar-bg: #0d0d10; } * { box-sizing: border-box; } /* Hide scroll bars on every public page — same rule as the app (credenza-fashion.css ~3275, Kyle 2026-08-01). A classic macOS bar steals ~15px from the viewport, so the 1080px shell sits left of the app's shell. Scroll still works with trackpad, wheel, drag, and keyboard. */ html, body { scrollbar-width: none; -ms-overflow-style: none; } html::-webkit-scrollbar, body::-webkit-scrollbar { width: 0 !important; height: 0 !important; display: none !important; background: transparent; } body { position: relative; min-height: 100vh; margin: 0; background: var(--bg); color: var(--ink); line-height: 1.55; font-size: 1.0625rem; } /* Copy the application's Blackout background. The app renders these same four neutral lights behind its shell in components/atoms.jsx. Keeping the layer here means a page change does not replace the field behind it. */ body::before, body::after { content: ""; position: fixed; pointer-events: none; } body::before { z-index: 0; inset: -10%; background: radial-gradient(ellipse 70% 55% at 42% 28%, color-mix(in srgb, var(--card) 95%, transparent) 0%, color-mix(in srgb, var(--card) 45%, transparent) 40%, transparent 72%), radial-gradient(ellipse 55% 50% at 72% 62%, color-mix(in srgb, var(--card) 72%, transparent) 0%, color-mix(in srgb, var(--bg) 28%, transparent) 45%, transparent 75%), radial-gradient(ellipse 50% 40% at 22% 70%, color-mix(in srgb, var(--inset) 40%, transparent) 0%, transparent 70%), radial-gradient(ellipse 90% 60% at 50% 100%, color-mix(in srgb, var(--bg) 98%, transparent) 0%, transparent 55%); filter: blur(48px); opacity: 0.9; transform: scale(1.05); } body::after { z-index: 1; inset: 0; background: linear-gradient(180deg, rgba(245, 245, 247, 0.04) 0%, transparent 22%), radial-gradient(ellipse 80% 50% at 50% 0%, color-mix(in srgb, var(--card) 55%, transparent) 0%, transparent 60%); } header, main, footer { position: relative; z-index: 2; width: 100%; max-width: var(--shell-max); margin: 0 auto; padding-left: var(--shell-pad); padding-right: var(--shell-pad); } header { /* 28px, not 2rem. The app's .cz-shell pads its top by 28px (credenza-fashion.css:3202), and the masthead is the first thing inside it. 2rem is 32px, which put the whole public header block 4px lower than the product's — the last visible difference Kyle reported 2026-07-30. */ padding-top: 28px; padding-bottom: 0.25rem; } /* Article copy keeps the same centered 640px stage as the application's empty shelf. The landing page owns full-width sections inside the shell. */ body:not(:has(> main > .hero.wrap)) > header > :where(:not(.site-head)), body:not(:has(> main > .hero.wrap)) > main > * { max-width: var(--max); margin-left: auto; margin-right: auto; } body:not(:has(> main > .hero.wrap)) > header > h1 { max-width: 16ch; margin-top: 58px; text-align: center; } body:not(:has(> main > .hero.wrap)) > header > .lede { max-width: 44ch; text-align: center; } /* The intro copy sits in
and the body in
, each with its own 1.25rem of padding. Stacked, that left 40px of empty page mid-article that read as a missing element. */ main { padding-top: 0.25rem; } /* ── The site header ────────────────────────────────────────────────────── * One row, the same shape as the app's masthead: the mark on the left, the * page links in the middle, the way into the product on the right, a hairline * under all of it. Before this, the links were a wrapped list of underlined * text below the intro paragraphs, and /landing/ had no links at all. * The long tail — About, Privacy, Terms, llms.txt — lives in the footer, * which every page already carries. Eleven links do not fit in a header row. */ /* Two rows, on purpose. The reading column is 40rem, and a wordmark plus six links plus a button do not fit in 40rem — laid out as one flex row the button wrapped on its own and left a hole. So: the mark and the way into the product hold the first line, the page links hold the second. */ /* Every colour in this row comes from a --mast- token, which holds the app's own value. The page tokens (--ink, --muted, --line) are each a shade off, and a page may override them for its own sections — /landing/ does. The header must read the same on all 36 pages and in the product (Kyle 2026-07-30: "make sure the color is perfectly matching"). */ .site-head { display: grid; grid-template-columns: 1fr auto; align-items: center; row-gap: 0.8rem; column-gap: 1rem; padding-bottom: 0.85rem; margin-bottom: 1.6rem; color: var(--mast-ink); border-bottom: 1px solid var(--mast-hair); } .brand { grid-row: 1; grid-column: 1; display: inline-flex; align-items: center; gap: 11px; margin: 0; color: inherit; text-decoration: none; flex: 0 0 auto; font-family: var(--cz-sans); } .brand:hover { color: inherit; opacity: 0.9; } .mark { display: block; flex: 0 0 auto; } .brand-name { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 3px; line-height: 1; } .wordmark { font-size: 13.5px; font-weight: 800; letter-spacing: 0.16em; line-height: 1; } .kicker { font-size: 8.5px; font-weight: 700; letter-spacing: 0.30em; text-transform: uppercase; line-height: 1; color: var(--mast-faint); } .nav { grid-row: 2; grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1.15rem; margin: 0; font-family: var(--cz-sans); font-size: 0.9rem; font-weight: 500; } /* No underline in the header. The app's masthead has none, and a row of ten underlined words reads as a paragraph, not as navigation. */ .nav a { color: var(--mast-sub); text-decoration: none; } .nav a:hover { color: var(--mast-ink); } .nav a[aria-current="page"] { color: var(--mast-ink); font-weight: 600; } /* The way into the product is the app's own masthead avatar, not a wide pill (Kyle 2026-07-30: "I don't want there to be any difference"). Every number is copied from .cz-avatar (credenza-fashion.css:6278): 44px square, 50% radius, a 1px --mast-hair ring, the --mast-avatar-bg fill, and the --mast-sub person glyph. A visitor is signed out, so the app draws that same glyph rather than initials. */ .nav-open { grid-row: 1; grid-column: 2; justify-self: end; width: 44px; height: 44px; padding: 0; display: grid; place-items: center; background: var(--mast-avatar-bg); border: 1px solid var(--mast-hair); border-radius: 50%; color: var(--mast-sub); text-decoration: none; } /* The app brightens the glyph on hover. It must not take --bg, which is the page behind it: on the old pill that was the readable colour, on a ring it is invisible. */ .nav-open:hover { color: var(--mast-ink); } .nav-open svg { display: block; } /* On a phone the six links wrap to two lines of three. That is fine; what is not fine is them touching, so the row gap grows a little. */ @media (max-width: 640px) { .nav { font-size: 0.875rem; gap: 0.55rem 0.95rem; } } /* One row on a wide screen (Kyle 2026-07-30): mark left, links centred, the * way into the product right — the app's masthead shape exactly. * * The two-row layout above exists only because
is capped at the * 40rem reading column, and a wordmark plus six links plus a button do not * fit in 37.5rem of content box. The app masthead has the whole window, so it * fits one line. So widen the HEADER BAND only, and leave the reading column * alone: the words still wrap at 40rem, which is what makes the pages read. * * The band breaks out of its parent with a negative left margin. The offset * is measured from the PARENT's own centre (50%), never from a literal column * width: /landing/ caps its
at 70rem, not 40rem, so a formula built * on 37.5rem hung that page's band 240px left of centre. A percentage margin * resolves against whatever the parent turns out to be, so both cap widths * land on the same centre line. 100vw includes the scrollbar in WebKit, hence * the 4rem subtraction rather than the 2.5rem of real padding; without it a * wide page can gain a horizontal scrollbar. * * The nav keeps flex-wrap: wrap on purpose. At the narrow end of this range * the six links can still exceed the centre column; wrapping puts them on a * second line inside that column, where overflow would instead push the * button off the page. */ @media (min-width: 1024px) { /* The app's .cz-shell caps at 1080px and includes 28px of padding on each side. The visible masthead is therefore 1024px wide. This element is the masthead itself, not its padded shell, so copy the inner width. 100vw includes the scrollbar in WebKit, so a small subtraction keeps a narrow window from gaining a horizontal scrollbar. */ .site-head { /* The app's row is as tall as its 44px avatar, which puts the hairline at 59px. Match the row, or the header under the same wordmark ends 9px higher than the one in the product. */ min-height: 59px; width: 100%; margin-left: 0; margin-right: 0; /* Equal outer columns, so the links sit on the REAL centre line. The app fixed the same complaint the same way (credenza-fashion.css:9418 gives the brand and the actions flex: 1 1 0). With `auto 1fr auto` the middle column centres inside the LEFTOVER room: a 190px brand against a 105px button pushed the row 65px right of centre, measured at 1280px. */ grid-template-columns: 1fr auto 1fr; row-gap: 0; column-gap: 1.5rem; /* The app masthead's own spacing (credenza-fashion.css:3492). */ padding: 0 0 14px; margin-bottom: 18px; border-bottom-color: var(--mast-hair); } .brand { justify-self: start; gap: 12px; } /* The width/height attributes in the page markup say 30; the app draws 34. */ .mark { width: 34px; height: 34px; } .brand-name { gap: 4px; } .wordmark { font-size: 19px; letter-spacing: 0.16em; } .kicker { font-size: 10.5px; letter-spacing: 0.34em; color: var(--mast-faint); } /* The nav keeps flex-wrap: wrap on purpose. At the narrow end of this range the six links can still exceed the centre column; wrapping puts them on a second line inside that column, where overflow would instead push the button off the page. */ .nav { grid-row: 1; grid-column: 2; justify-content: center; gap: 0.35rem 2px; font-size: 13px; } .nav a { padding: 7px 11px; border-radius: 999px; color: var(--mast-sub); font-weight: 600; letter-spacing: -0.01em; transition: color 120ms ease, background 120ms ease; } .nav a:hover { color: var(--mast-ink); background: var(--mast-hover-bg); } .nav-open { grid-column: 3; justify-self: end; } body:not(:has(> main > .hero.wrap)) > header > h1 { font-size: clamp(40px, 4.8vw, 52px); } } @media (width <= 480px) { :root { --shell-pad: 14px; } header { padding-top: 16px; } } /* ── One title scale ────────────────────────────────────────────────────── * h1 names the page, h2 names a section, h3 names a card. All three used to * differ per page. They do not now. */ h1 { font-family: var(--cz-display); font-size: clamp(34px, 4.3vw, 58px); font-weight: 500; letter-spacing: -0.04em; line-height: 1; margin: 0 0 24px; } h2 { font-family: var(--cz-display); font-size: 1.35rem; font-weight: 400; line-height: 1.25; margin: 0 0 0.4rem; } h3 { font-family: var(--cz-sans); font-size: 1.05rem; font-weight: 600; line-height: 1.3; margin: 0 0 0.4rem; } .lede { color: var(--muted); margin: 0 0 1.5rem; font-size: 1.05rem; } a { color: var(--ink); } a:hover { color: var(--money); } .card { background: var(--card); border: 1px solid var(--line); border-radius: 1rem; padding: 1.15rem 1.2rem; margin: 0 0 0.85rem; transition: background 150ms cubic-bezier(0.23, 1, 0.32, 1), border-color 150ms cubic-bezier(0.23, 1, 0.32, 1); } .card p { margin: 0 0 0.65rem; color: var(--muted); } .card p:last-child { margin-bottom: 0; } .card ul { margin: 0.35rem 0 0; padding-left: 1.15rem; color: var(--muted); } .card li { margin: 0.25rem 0; } .n { font-family: var(--cz-mono); font-size: 0.7rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); display: block; margin-bottom: 0.35rem; } .note { margin: 1.5rem 0; padding: 0.85rem 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); color: var(--muted); font-size: 0.98rem; } /* Kyle 2026-08-04: end-of-page stack was misaligned. The CTA is an inline-block, so margin:auto never centred it; the related line and the footer used different rules. One stack now: CTA, related, footer — all under the reading column, all text-centred. Landing keeps .site-foot. */ footer { color: var(--muted); font-size: 0.85rem; font-family: var(--cz-sans); line-height: 1.7; padding-top: 1.5rem; padding-bottom: 3rem; text-align: center; } /* Article and guide pages only: pin the footer to the same 40rem column as the body copy so the centred line sits under the page, not under the wide shell. Landing keeps the full shell for its dark bar. */ body:not(:has(> main > .hero.wrap)) > footer { max-width: var(--max); } /* CTA must shrink-wrap and centre. inline-block + margin:auto does not centre; table does. */ .cta { display: table; margin: 1.25rem auto 0; padding: 0.7rem 1.15rem; background: var(--accent); color: var(--bg); text-decoration: none; border: 1px solid var(--line); border-radius: 999px; font-family: var(--cz-sans); font-size: 0.9rem; font-weight: 600; transition: opacity 150ms cubic-bezier(0.23, 1, 0.32, 1), background 150ms cubic-bezier(0.23, 1, 0.32, 1); } .cta:hover { opacity: 0.92; color: var(--bg); } .related { display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: 0.35rem 0.85rem; margin: 1.25rem auto 0; max-width: var(--max); font-family: var(--cz-sans); font-size: 0.9rem; line-height: 1.55; color: var(--muted); text-align: center; } .related a { margin: 0; white-space: nowrap; } /* Pricing page puts the CTA inside a card cell — keep it left there. */ .plan .cta, .plans .cta, .card .cta { display: inline-block; margin: 0.5rem 0 0; }