/* ============================================================================ CLAUDE DESIGN LANGUAGE — base.css Reset, base typography, the canvas grid, section rhythm, editorial detailing, surfaces (grain/shadow/glass), reveal/stagger primitives. Uses tokens.css. ============================================================================ */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; } html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; /* 100vw full-bleed surfaces include the classic-scrollbar gutter; clip (not hidden — no scroll container) keeps sticky + scrollIntoView working */ overflow-x: clip; } body { background: var(--bg); color: var(--text); font-family: var(--font-body); font-size: var(--step-0); line-height: var(--leading-body); font-feature-settings: var(--feat-body); font-kerning: normal; font-optical-sizing: auto; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; transition: background-color var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out); } img, picture, video, canvas, svg { display: block; max-width: 100%; height: auto; } input, button, textarea, select { font: inherit; color: inherit; } a { color: inherit; text-decoration: none; } ul[role="list"], ol[role="list"] { list-style: none; padding: 0; } /* ---- SEO crawl fallback (lives inside #app on the React shells) ---- Generated by scripts/build-seo.mjs. Visible only when JS is off (crawlers, social/AI scrapers, hardening). An inline script adds html.js before first paint, hiding this pre-render; React then replaces #app entirely, so JS users never see it and there is no flash. Not cloaking: every client gets the same HTML and the same information React renders, only progressively enhanced. */ .seo-fallback { max-width: 64rem; margin: 0 auto; padding: var(--space-xl-fluid) var(--bleed); } .seo-fallback h1 { font-size: var(--step-4); line-height: 1.04; margin: 0 0 var(--space-s); color: var(--ink); } .seo-fallback .roles { font-family: var(--font-mono); font-size: var(--step--1); text-transform: uppercase; letter-spacing: .14em; color: var(--muted); margin: 0 0 var(--space-m); } .seo-fallback p { max-width: 64ch; margin: 0 0 var(--space-m); } .seo-fallback nav.seo-links { margin: var(--space-m) 0; font-family: var(--font-mono); font-size: var(--step--1); text-transform: uppercase; letter-spacing: .08em; } .seo-fallback nav.seo-links a { margin-right: var(--space-m); color: var(--accent-2); } .seo-fallback ul { list-style: none; padding: 0; margin: var(--space-m) 0; } .seo-fallback li { padding: var(--space-2xs) 0; border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; gap: var(--space-m); } .seo-fallback li a { color: var(--ink); } .seo-fallback li .yr { color: var(--muted); font-family: var(--font-mono); font-size: var(--step--1); flex: 0 0 auto; } html.js .seo-fallback { display: none !important; } /* ---- Headings ---- */ h1, h2, h3, h4, h5, h6 { font-family: var(--font-heading); line-height: var(--leading-heading); letter-spacing: var(--tracking-heading); text-wrap: balance; font-weight: 600; } h1, h2, .display { font-family: var(--font-display); } h1 { font-size: var(--step-5); } h2 { font-size: var(--step-4); } h3 { font-size: var(--step-3); } h4 { font-size: var(--step-2); line-height: var(--leading-snug); } h5 { font-size: var(--step-1); line-height: var(--leading-snug); } h6 { font-size: var(--step-0); line-height: var(--leading-snug); } .display { font-size: var(--step-7); line-height: var(--leading-display); letter-spacing: var(--tracking-display); } .headline { font-family: var(--font-display); font-size: var(--step-6); line-height: var(--leading-display); letter-spacing: var(--tracking-display); } /* ---- Prose / reading ---- */ .prose { max-width: var(--measure); } .prose p { text-wrap: pretty; } .prose p + p { margin-top: 1em; } .prose > * + * { margin-top: 1em; } .prose h2, .prose h3 { margin-top: 1.6em; } /* ---- Editorial detailing (the craft signals AI omits) ---- */ .eyebrow, .kicker, .label { font-family: var(--font-sans); text-transform: uppercase; letter-spacing: var(--tracking-caps); font-size: var(--step--1); font-weight: 600; color: var(--muted); } .numbering, .tabular { font-variant-numeric: tabular-nums lining-nums; font-feature-settings: "tnum" 1; } .smallcaps { font-variant-caps: all-small-caps; letter-spacing: 0.02em; } .caption, small { font-size: var(--step--1); line-height: var(--leading-loose); color: var(--muted); max-width: 44ch; } .meta-row { font-family: var(--font-mono); font-size: var(--step--1); color: var(--muted); letter-spacing: 0; } .rule { border: 0; border-top: 1px solid var(--border); } .rule-strong { border: 0; border-top: 1px solid var(--border-strong); } .pull-quote { font-family: var(--font-display); font-size: var(--step-3); line-height: 1.2; max-width: 24ch; text-wrap: balance; } code, pre, kbd, samp { font-family: var(--font-mono); font-size: 0.9em; } /* ============================================================================ THE CANVAS GRID — named-line breakout system. Children opt into a zone. ============================================================================ */ .canvas { display: grid; grid-template-columns: [full-start] minmax(var(--bleed), 1fr) [feature-start] var(--feature) [popout-start] var(--popout) [content-start] var(--content) [content-end] var(--popout) [popout-end] var(--feature) [feature-end] minmax(var(--bleed), 1fr) [full-end]; } .canvas > * { grid-column: content; } .popout { grid-column: popout; } .feature { grid-column: feature; } .full { grid-column: full; } .bleed-left { grid-column: full-start / content-end; } .bleed-right { grid-column: content-start / full-end; } /* Page wrapper (centered, max-width, with side bleed) */ .wrap { width: min(var(--page-max), 100% - var(--bleed) * 2); margin-inline: auto; } /* Numbered grid — default to UNEVEN splits (antidote to 3 equal cards) */ .grid-12 { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--space-m-fluid); } .col-7 { grid-column: span 7; } .col-5 { grid-column: span 5; } .col-8 { grid-column: span 8; } .col-4 { grid-column: span 4; } .col-6 { grid-column: span 6; } .col-3 { grid-column: span 3; } @media (max-width: 48rem) { .grid-12 > [class^="col-"] { grid-column: 1 / -1; } } /* Bento module grid */ .bento { display: grid; grid-template-columns: repeat(6, 1fr); grid-auto-rows: minmax(11rem, auto); gap: var(--space-s); grid-auto-flow: dense; } .bento .tile-lg { grid-column: span 4; grid-row: span 2; } .bento .tile-tall { grid-column: span 2; grid-row: span 2; } .bento .tile-wide { grid-column: span 4; } .bento .tile { grid-column: span 2; } @media (max-width: 40rem) { .bento { grid-template-columns: repeat(2, 1fr); } .bento > * { grid-column: span 1 !important; grid-row: auto !important; } } /* ============================================================================ SECTION RHYTHM — rotate these so no two adjacent sections match. ============================================================================ */ .section { padding-block: var(--space-xl-fluid); } .section--pause { padding-block: var(--space-4xl); } .section--tight { padding-block: var(--space-xl-fluid); } .section--invert { background: var(--text); color: var(--bg); } .section--invert .eyebrow, .section--invert .muted, .section--invert .caption { color: color-mix(in oklab, var(--bg) 70%, transparent); } .section--tint { background: var(--surface-2); } .section--surface{ background: var(--surface); } .section--split { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: var(--space-xl-fluid); } @media (max-width: 48rem) { .section--split { grid-template-columns: 1fr; gap: var(--space-l); } } .stack > * + * { margin-top: var(--space-m); } .stack-l > * + * { margin-top: var(--space-l); } /* ============================================================================ SURFACES — grain, layered shadow, glass, hairline frames ============================================================================ */ .grain { position: relative; isolation: isolate; } .grain::after { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 1; opacity: 0.04; mix-blend-mode: multiply; background-image: url("data:image/svg+xml;utf8,"); } [data-mode="dark"] .grain::after, [data-theme="nocturne"] .grain::after, [data-theme="signal"][data-mode="dark"] .grain::after { mix-blend-mode: screen; opacity: 0.05; } .elev-1 { box-shadow: 0 1px 1px hsl(var(--shadow-color)/.05), 0 2px 2px hsl(var(--shadow-color)/.05), 0 4px 4px hsl(var(--shadow-color)/.05); } .elev-2 { box-shadow: 0 1px 1px hsl(var(--shadow-color)/.04), 0 2px 4px hsl(var(--shadow-color)/.05), 0 6px 8px hsl(var(--shadow-color)/.06); } .elev-3 { box-shadow: 0 1px 1px hsl(var(--shadow-color)/.04), 0 2px 4px hsl(var(--shadow-color)/.05), 0 8px 12px hsl(var(--shadow-color)/.06), 0 16px 24px hsl(var(--shadow-color)/.06); } .glass { background: color-mix(in oklab, var(--bg) 72%, transparent); backdrop-filter: blur(12px) saturate(1.1); -webkit-backdrop-filter: blur(12px) saturate(1.1); border: 1px solid color-mix(in oklab, var(--text) 8%, transparent); } @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .glass { background: var(--bg); } } .hairline { border: 1px solid var(--border); } .hairline-strong { border: 1px solid var(--border-strong); } /* ---- Tonal / mesh backgrounds done right (one per page) ---- */ .bg-glow { background: radial-gradient(60% 50% at 50% 0%, color-mix(in oklab, var(--accent) 14%, transparent), transparent 70%), var(--bg); } .bg-tonal { background: linear-gradient(in oklab, var(--bg), var(--surface-2)); } /* ============================================================================ FOCUS + ACCESSIBILITY ============================================================================ */ :where(a, button, input, textarea, select, [tabindex]):focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; border-radius: 2px; } .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; } .skip-link { position: absolute; left: var(--space-s); top: -3rem; background: var(--accent); color: var(--accent-contrast); padding: var(--space-2xs) var(--space-s); border-radius: var(--radius); z-index: var(--z-modal); transition: top var(--dur-fast) var(--ease-out); } .skip-link:focus { top: var(--space-s); } /* ---- Utility colors ---- */ .muted { color: var(--muted); } .subtle { color: var(--subtle); } .accent { color: var(--accent); } .on-accent { color: var(--accent-contrast); } /* ============================================================================ REVEAL / STAGGER (paired with motion.js; safe static fallback) ============================================================================ */ .reveal { opacity: 0; transform: translateY(16px); transition: opacity var(--dur-slow) var(--ease-out-expo), transform var(--dur-slow) var(--ease-out-expo); } .reveal.is-in { opacity: 1; transform: none; } .stagger > * { opacity: 0; transform: translateY(12px); transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out); } .stagger.is-in > * { opacity: 1; transform: none; } .stagger.is-in > *:nth-child(1) { transition-delay: 0ms; } .stagger.is-in > *:nth-child(2) { transition-delay: 60ms; } .stagger.is-in > *:nth-child(3) { transition-delay: 120ms; } .stagger.is-in > *:nth-child(4) { transition-delay: 180ms; } .stagger.is-in > *:nth-child(5) { transition-delay: 240ms; } .stagger.is-in > *:nth-child(6) { transition-delay: 300ms; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } .reveal, .stagger > * { opacity: 1 !important; transform: none !important; } }