/* ============================================================ CommonBench Marketing — /shared/site.css "Quiet Luxury, Full Volume" design system (2026-06-09) Scope: marketing pages ONLY. Chat surfaces keep /shared/styles.css. Fonts load via preconnect + in each page head — never @import. ============================================================ */ /* ---------------------------------------------------------- */ /* 1. DESIGN TOKENS */ /* ---------------------------------------------------------- */ :root { /* Colour palette (dark theme default) */ --ink: #0E0E0C; /* Page background: warm black */ --ink-2: #161613; /* Card/section background */ --ink-3: #1E1D19; /* Slightly lighter surface */ --ink-4: #2A2824; /* Even lighter: borders, subtle fills */ --rule: #2F2D27; /* Default separator */ --rule-soft: #221F1B; /* Softer separator */ --paper: #F3EEE4; /* Wordmark "Common", body text: cream */ --paper-2: #E8E1D1; /* Secondary text */ --muted: #9A958A; /* Tertiary text, labels (6.48:1 on ink) */ --muted-2: #6E6A62; /* DECORATIVE / >=18px ONLY — 3.37:1 on ink-2, below WCAG AA for normal text. Use --muted for any text smaller than 18px. */ --accent: #C9A961; /* Muted gold: "Bench", accents */ --accent-soft: #8A7642; /* Darker gold: borders, soft affordances */ --accent-ink: #1A160C; /* Near-black w/ gold tone: text on accent */ --verified: #8FB98B; /* Green: verification, success */ --warn: #C96A5B; /* Red-brown: warnings */ --red-ink: #6B2E28; /* Dark red: text on warn backgrounds */ /* Typography */ --font-serif: 'Newsreader', Georgia, 'Times New Roman', serif; --font-sans: 'Geist', ui-sans-serif, system-ui, -apple-system, 'Helvetica Neue', sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace; /* Type scale (fluid) */ --display-1: clamp(48px, 7vw, 96px); --display-2: clamp(36px, 5vw, 72px); --display-3: clamp(28px, 4vw, 48px); --text-lg: 18px; --text-base: 16px; --text-sm: 14px; --text-xs: 12px; --mono-lg: 13px; --mono-base: 11px; --mono-sm: 10px; --lh-display: 1.1; --lh-text: 1.6; --lh-mono: 1.5; --ls-display: -0.02em; --ls-body: -0.005em; --ls-mono: 0.08em; /* Layout & spacing */ --container: 1240px; --gutter: 40px; --gutter-tablet: 24px; --gutter-mobile: 16px; --sp-4: 4px; --sp-8: 8px; --sp-12: 12px; --sp-16: 16px; --sp-20: 20px; --sp-24: 24px; --sp-28: 28px; --sp-32: 32px; --sp-40: 40px; --sp-48: 48px; --sp-56: 56px; --sp-64: 64px; --sp-80: 80px; --sp-96: 96px; --sp-120: 120px; --density: 1; /* Radius */ --radius: 4px; --radius-lg: 10px; /* Shadows */ --shadow-sm: 0 1px 3px rgba(0,0,0,0.12); --shadow-md: 0 4px 12px rgba(0,0,0,0.15); --shadow-lg: 0 8px 24px rgba(0,0,0,0.2); --shadow-xl: 0 20px 40px rgba(0,0,0,0.25); /* Accent glow */ --glow-soft: rgba(201, 169, 97, 0.08); --glow-med: rgba(201, 169, 97, 0.15); --glow-strong: rgba(201, 169, 97, 0.25); /* Motion */ --duration-micro: 0.1s; --duration-short: 0.15s; --duration-base: 0.2s; --duration-long: 0.6s; --easing-out: cubic-bezier(0.25, 0.46, 0.45, 0.94); --easing-in-out: cubic-bezier(0.4, 0, 0.2, 1); /* Z-index scale */ --z-base: 1; --z-grain: 5; --z-dropdown: 10; --z-sticky-nav: 50; --z-modal-backdrop: 100; --z-modal: 101; --z-tooltip: 110; } /* Light theme (opt-in via data-theme="light" on ) */ [data-theme="light"] { --ink: #F3EEE4; --ink-2: #EDE7DA; --ink-3: #E4DCCB; --ink-4: #D6CDB9; --rule: #CFC6B0; --rule-soft: #DFD6C0; --paper: #0E0E0C; --paper-2: #1E1D19; --muted: #5C584F; --muted-2: #7A7569; --accent: #8A7130; --accent-soft: #6E5A21; --accent-ink: #F5EFDE; --verified: #3E6B3A; --warn: #9A3A2D; } /* ---------------------------------------------------------- */ /* 2. BASE */ /* ---------------------------------------------------------- */ * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } html { scroll-behavior: smooth; } body { background: var(--ink); color: var(--paper); font-family: var(--font-sans); font-size: var(--text-base); line-height: 1.55; letter-spacing: var(--ls-body); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-feature-settings: "ss01", "ss02", "cv11"; overflow-x: hidden; } /* Film grain — full-viewport, non-interactive, very low opacity. feTurbulence noise as data-URI (CSP img-src allows data:). Opt out per page with . */ body::after { content: ""; position: fixed; inset: 0; z-index: var(--z-grain); pointer-events: none; opacity: 0.04; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); background-size: 160px 160px; } body.no-grain::after { display: none; } /* Body scroll lock while mobile nav overlay is open */ body.nav-open { overflow: hidden; } a { color: inherit; text-decoration: none; } img { max-width: 100%; display: block; height: auto; } button { font-family: inherit; cursor: pointer; border: none; padding: 0; } a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; } ::selection { background: var(--accent); color: var(--accent-ink); } ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-track { background: var(--ink); } ::-webkit-scrollbar-thumb { background: var(--rule); border-radius: 4px; } ::-webkit-scrollbar-thumb:hover { background: var(--muted); } /* ---------------------------------------------------------- */ /* 3. LAYOUT UTILITIES & SECTION RHYTHM */ /* ---------------------------------------------------------- */ .container { max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); } .section { padding: calc(120px * var(--density)) 0; border-top: 1px solid var(--rule); contain: layout style paint; } .section-tight { padding: calc(80px * var(--density)) 0; contain: layout style paint; } .section-compact { padding: calc(56px * var(--density)) 0; contain: layout style paint; } /* Standard interior page hero */ .page-hero { padding: calc(120px * var(--density)) var(--gutter) calc(60px * var(--density)); max-width: var(--container); margin: 0 auto; } .page-hero.centered { text-align: center; } .page-hero .lede { margin-top: 24px; } .page-hero.centered .lede { margin-left: auto; margin-right: auto; } /* Light-on-ink radial vignette — gold glow bleeding from above the fold */ .vignette-top { position: relative; background: radial-gradient(ellipse 1200px 500px at 50% -200px, var(--glow-soft), transparent 70%), var(--ink); } .vignette-center { position: relative; background: radial-gradient(ellipse 900px 480px at 50% 40%, var(--glow-soft), transparent 70%), var(--ink); } .grid { display: grid; gap: 24px; } .two-col { grid-template-columns: 1fr 1fr; } .three-col { grid-template-columns: repeat(3, 1fr); } .four-col { grid-template-columns: repeat(4, 1fr); } .five-col { grid-template-columns: repeat(5, 1fr); } .gx-4 { gap: var(--sp-4); } .gx-8 { gap: var(--sp-8); } .gx-16 { gap: var(--sp-16); } .gx-24 { gap: var(--sp-24); } .gx-28 { gap: var(--sp-28); } .gx-32 { gap: var(--sp-32); } .gx-40 { gap: var(--sp-40); } .gx-56 { gap: var(--sp-56); } .rule { height: 1px; background: var(--rule); border: 0; margin: 0; } /* ---------------------------------------------------------- */ /* 4. TYPOGRAPHY */ /* ---------------------------------------------------------- */ .eyebrow { font-family: var(--font-mono); font-size: var(--mono-base); letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); display: inline-flex; align-items: center; gap: 10px; } .eyebrow::before { content: ""; width: 18px; height: 1px; background: var(--accent); } .display { font-family: var(--font-serif); font-weight: 400; font-size: var(--display-1); line-height: var(--lh-display); letter-spacing: var(--ls-display); color: var(--paper); margin: 0; } .display em { font-style: italic; color: var(--accent); font-weight: 300; } h1, h2, h3, h4, h5 { font-family: var(--font-serif); font-weight: 500; letter-spacing: -0.015em; line-height: 1.08; color: var(--paper); margin: 0; } h1 { font-size: var(--display-1); } h2 { font-size: var(--display-2); margin-bottom: 16px; } h3 { font-size: var(--display-3); margin-bottom: 8px; } h4 { font-size: 18px; margin-bottom: 6px; font-family: var(--font-sans); font-weight: 500; letter-spacing: var(--ls-body); } h5 { font-size: 12px; margin: 0; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); } p { color: var(--muted); margin: 0 0 16px; line-height: var(--lh-text); } p:last-child { margin-bottom: 0; } .lede { font-size: var(--text-lg); line-height: 1.6; color: var(--paper-2); max-width: 680px; margin-bottom: 0; } /* Wordmark — IMMUTABLE. Newsreader, "Common" cream, "Bench" gold. */ .wordmark { font-family: var(--font-serif); font-size: 22px; font-weight: 500; letter-spacing: -0.01em; color: var(--paper); white-space: nowrap; } .wordmark .bench-gold { color: var(--accent); } /* ---------------------------------------------------------- */ /* 5. SKIP LINK & SCREEN-READER UTILITIES */ /* ---------------------------------------------------------- */ .skip-link { position: absolute; top: -9999px; left: -9999px; z-index: 999; font-family: var(--font-sans); font-size: var(--text-sm); } .skip-link:focus { top: 0; left: 0; background: var(--accent); color: var(--accent-ink); padding: 10px 20px; text-decoration: underline; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border-width: 0; } /* ---------------------------------------------------------- */ /* 6. NAVIGATION (static, server-rendered) */ /* ---------------------------------------------------------- */ .nav { position: sticky; top: 0; z-index: var(--z-sticky-nav); background: color-mix(in oklab, var(--ink), transparent 6%); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--rule); transition: background var(--duration-base) ease, box-shadow var(--duration-base) ease; } /* Scrolled state — toggled by site.js once page scrolls past 8px */ .nav.scrolled { background: color-mix(in oklab, var(--ink), transparent 2%); box-shadow: var(--shadow-md); } .nav.scrolled .nav-inner { padding-top: 12px; padding-bottom: 12px; } .nav-inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 18px var(--gutter); max-width: var(--container); margin: 0 auto; transition: padding var(--duration-base) ease; } .nav-links { display: flex; gap: 36px; align-items: center; font-size: var(--text-sm); color: var(--muted); } .nav-links a { transition: color var(--duration-short) ease; } .nav-links a:hover, .nav-links a.active, .nav-links a[aria-current="page"] { color: var(--paper); } .nav-actions { display: flex; align-items: center; gap: 12px; } .nav-cta { display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; background: var(--paper); color: var(--ink); border-radius: 999px; font-size: var(--text-sm); font-weight: 500; border: 1px solid var(--paper); transition: transform var(--duration-short) ease, box-shadow var(--duration-short) ease; white-space: nowrap; } .nav-cta:hover { transform: translateY(-1px); box-shadow: var(--shadow-md); } .nav-cta:active { transform: scale(0.98); } /* Hamburger (mobile only) */ .nav-hamburger { display: none; align-items: center; justify-content: center; width: 44px; height: 44px; background: none; border: 1px solid var(--rule); border-radius: var(--radius); color: var(--paper); -webkit-tap-highlight-color: transparent; transition: border-color var(--duration-short) ease; } .nav-hamburger:hover { border-color: var(--paper); } .nav-hamburger svg { pointer-events: none; width: 22px; height: 16px; } /* Mobile nav overlay */ .nav-overlay { display: none; position: fixed; inset: 0; z-index: var(--z-modal-backdrop); background: color-mix(in oklab, var(--ink), transparent 2%); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); flex-direction: column; justify-content: center; align-items: center; padding: 40px; } .nav-overlay.open { display: flex; animation: slideUp var(--duration-short) var(--easing-out); } .nav-overlay-links { display: flex; flex-direction: column; align-items: center; gap: 28px; } .nav-overlay-links a { font-family: var(--font-serif); font-size: 28px; font-weight: 400; color: var(--paper); letter-spacing: var(--ls-display); transition: color var(--duration-short); } .nav-overlay-links a:hover { color: var(--accent); } .nav-overlay-links .nav-cta, .nav-overlay-links .nav-cta:hover { margin-top: 12px; font-family: var(--font-sans); font-size: 16px; padding: 14px 28px; color: var(--ink); } .nav-close { position: absolute; top: 18px; right: 18px; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; background: none; border: 1px solid var(--rule); border-radius: var(--radius); color: var(--paper); font-size: 24px; line-height: 1; transition: border-color var(--duration-short); } .nav-close:hover { border-color: var(--paper); } /* ---------------------------------------------------------- */ /* 7. BUTTONS & CTAs */ /* ---------------------------------------------------------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 14px 24px; border-radius: 999px; font-size: 15px; font-weight: 500; border: 1px solid transparent; transition: all var(--duration-short) ease; font-family: var(--font-sans); text-align: center; will-change: transform, box-shadow; } .btn:disabled { opacity: 0.5; cursor: not-allowed; } .btn-primary { background: var(--paper); color: var(--ink); border-color: var(--paper); } .btn-primary:hover:not(:disabled) { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); transform: translateY(-2px); box-shadow: 0 8px 20px var(--glow-med); } .btn-primary:active:not(:disabled) { transform: scale(0.98); } .btn-ghost { background: transparent; color: var(--paper); border-color: var(--rule); } .btn-ghost:hover:not(:disabled) { border-color: var(--paper); color: var(--accent); transform: translateY(-2px); } .btn-ghost:active:not(:disabled) { transform: scale(0.98); } .btn-gold { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); } .btn-gold:hover:not(:disabled) { background: var(--paper); color: var(--ink); border-color: var(--paper); transform: translateY(-2px); box-shadow: 0 8px 20px var(--glow-strong); } .btn-gold:active:not(:disabled) { transform: scale(0.98); } /* ---------------------------------------------------------- */ /* 8. CARDS */ /* ---------------------------------------------------------- */ .card { border: 1px solid var(--rule); border-radius: var(--radius-lg); background: var(--ink-2); padding: 40px; transition: all var(--duration-short) ease; will-change: transform, border-color, box-shadow; contain: content; } .card:hover { border-color: var(--accent-soft); transform: translateY(-4px); box-shadow: 0 20px 40px var(--glow-med); } .card.featured { border-color: var(--accent); background: linear-gradient( 180deg, color-mix(in oklab, var(--accent) 6%, var(--ink-2)), var(--ink-2) ); } .card.featured:hover { box-shadow: 0 20px 40px var(--glow-strong); } /* Feature card (numbered, gold tab top-left) */ .feature-grid { display: grid; gap: calc(56px * var(--density)); margin-top: calc(60px * var(--density)); } .feature-card { border: 1px solid var(--rule); background: var(--ink-2); padding: calc(48px * var(--density)); border-radius: var(--radius-lg); position: relative; display: flex; flex-direction: column; transition: all var(--duration-short) ease; will-change: transform, border-color, box-shadow; contain: content; } .feature-card::before { content: ""; position: absolute; top: 0; left: 0; width: 40px; height: 3px; background: var(--accent); border-radius: 0 0 2px 0; } .feature-card:hover { border-color: var(--accent-soft); transform: translateY(-4px); box-shadow: 0 8px 24px var(--glow-soft); } .feature-card h3 { color: var(--paper); margin-top: 12px; } .feature-card .accent-num { font-family: var(--font-serif); font-size: 32px; font-weight: 400; color: var(--accent); letter-spacing: var(--ls-display); line-height: 1; } /* Pricing tier card */ .tier { border: 2px solid var(--rule); border-radius: var(--radius); padding: calc(40px * var(--density)); background: var(--ink-2); position: relative; display: flex; flex-direction: column; transition: all var(--duration-short) ease; will-change: transform, border-color, box-shadow; } .tier:hover { border-color: var(--accent-soft); transform: translateY(-4px); box-shadow: 0 20px 40px var(--glow-med); } .tier.featured { border-color: var(--accent); box-shadow: 0 20px 40px var(--glow-med); } .tier.featured:hover { box-shadow: 0 20px 40px var(--glow-strong); } .tier-name { font-family: var(--font-mono); font-size: var(--mono-base); letter-spacing: 0.12em; color: var(--muted); text-transform: uppercase; margin-bottom: 12px; } .tier-price { font-family: var(--font-serif); font-size: 48px; font-weight: 400; color: var(--paper); line-height: 1; margin-bottom: 4px; } .tier-period { font-family: var(--font-mono); font-size: var(--mono-base); color: var(--muted); margin-bottom: 32px; } .tier h3 { font-size: 24px; margin-bottom: 24px; } .tier-features { flex: 1; margin-bottom: 32px; } .tier-features ul { list-style: none; margin: 0; padding: 0; } .tier-features li { font-size: var(--text-sm); color: var(--paper-2); padding: 8px 0; border-top: 1px solid var(--rule); } .tier-features li:first-child { border-top: 0; } .tier-cta { width: 100%; } /* Jurisdiction cell */ .juris-cell { border: 1px solid var(--rule); background: var(--ink-2); padding: calc(32px * var(--density)); border-radius: var(--radius-lg); text-align: center; transition: all var(--duration-short) ease; will-change: transform, border-color, box-shadow; contain: content; } .juris-cell:hover { border-color: var(--accent-soft); background: color-mix(in oklab, var(--accent) 2%, var(--ink-2)); transform: translateY(-2px); } .juris-cell .j-num { font-family: var(--font-serif); font-size: 32px; font-weight: 400; color: var(--paper); letter-spacing: var(--ls-display); line-height: 1; } .juris-cell .j-name { font-size: var(--text-sm); color: var(--paper); margin-top: 8px; font-weight: 500; } .juris-cell .j-label { font-family: var(--font-mono); font-size: var(--mono-base); color: var(--muted); letter-spacing: 0.08em; margin-top: 6px; text-transform: uppercase; } /* ---------------------------------------------------------- */ /* 9. TABLES */ /* ---------------------------------------------------------- */ .table-wrap { overflow-x: auto; } table { width: 100%; border-collapse: collapse; border: 1px solid var(--rule); border-radius: var(--radius-lg); overflow: hidden; } caption { font-size: var(--mono-base); color: var(--muted); padding: 12px; text-align: left; font-family: var(--font-mono); } thead { background: var(--ink-3); border-bottom: 1px solid var(--rule); } th { text-align: left; padding: 16px; font-size: var(--text-sm); font-weight: 500; color: var(--paper); font-family: var(--font-serif); letter-spacing: var(--ls-display); } tbody tr:nth-child(odd) { background: var(--ink-2); } tbody tr:nth-child(even) { background: var(--ink); } td { padding: 16px; font-size: var(--text-sm); color: var(--paper-2); border-top: 1px solid var(--rule); font-family: var(--font-sans); } .check { color: var(--verified); font-weight: 600; } .check::before { content: "✓ "; } .dash { color: var(--muted); } .dash::before { content: "— "; } /* ---------------------------------------------------------- */ /* 10. FAQ (details/summary) */ /* ---------------------------------------------------------- */ .faq details { border-bottom: 1px solid var(--rule); } .faq summary { cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 22px 0; font-family: var(--font-serif); font-size: 18px; font-weight: 500; color: var(--paper); transition: color var(--duration-short) ease; } .faq summary::-webkit-details-marker { display: none; } .faq summary:hover { color: var(--accent); } .faq summary::after { content: "+"; font-family: var(--font-mono); font-size: 18px; font-weight: 400; color: var(--accent); flex: 0 0 auto; transition: transform var(--duration-base) var(--easing-out); } .faq details[open] summary::after { transform: rotate(45deg); } .faq details > p, .faq .faq-body { padding: 0 0 22px; color: var(--muted); max-width: 65ch; } /* ---------------------------------------------------------- */ /* 11. FORMS */ /* ---------------------------------------------------------- */ .form-field { display: flex; flex-direction: column; } .form-field label { font-weight: 500; color: var(--paper); margin-bottom: 8px; font-size: var(--text-sm); } .form-field input, .form-field select, .form-field textarea { padding: 12px; border: 1px solid var(--rule); border-radius: var(--radius); background: var(--ink-2); color: var(--paper); font-family: inherit; font-size: var(--text-sm); transition: border-color var(--duration-short) ease; } .form-field input::placeholder, .form-field textarea::placeholder { color: var(--muted); } .form-field input:hover, .form-field select:hover, .form-field textarea:hover { border-color: var(--ink-4); } .form-field input:focus, .form-field select:focus, .form-field textarea:focus { border-color: var(--accent-soft); outline: 2px solid var(--accent); outline-offset: 1px; } .form-field textarea { resize: vertical; min-height: 120px; } .form-hint { font-size: var(--text-xs); color: var(--muted); margin: 8px 0 0; } /* ---------------------------------------------------------- */ /* 12. TAGS & BADGES */ /* ---------------------------------------------------------- */ .tag { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border: 1px solid var(--rule); border-radius: 999px; font-family: var(--font-mono); font-size: var(--mono-base); color: var(--muted); letter-spacing: 0.04em; text-transform: uppercase; } .tag .dot { width: 5px; height: 5px; border-radius: 50%; background: var(--accent); } .tag.verified .dot { background: var(--verified); } /* ---------------------------------------------------------- */ /* 13. MARQUEE BAND (mono jurisdiction/source strip) */ /* ---------------------------------------------------------- */ .marquee-band { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 18px 48px; padding: 24px var(--gutter); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); background: var(--ink-2); font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); } .marquee-band .sep { color: var(--accent); /* decorative — mark up with aria-hidden="true" */ } /* ---------------------------------------------------------- */ /* 14. FOOTER */ /* ---------------------------------------------------------- */ .footer { border-top: 1px solid var(--rule); padding: calc(80px * var(--density)) 0 calc(40px * var(--density)); background: var(--ink-2); } .footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr 1fr 1fr; gap: 40px; margin-bottom: 60px; } .footer-col { display: flex; flex-direction: column; gap: 14px; align-items: flex-start; } .footer-col .wordmark { font-size: 18px; margin-bottom: 6px; } .footer-col h3 { font-family: var(--font-mono); font-size: var(--mono-base); letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); margin: 0 0 2px; font-weight: 500; } .footer-col p { font-size: 13px; color: var(--muted); line-height: var(--lh-text); margin: 0; max-width: 30ch; } .footer-col a { color: var(--paper-2); font-size: var(--text-sm); transition: color var(--duration-short); } .footer-col a:hover { color: var(--accent); } /* "Manage subscription" — a real button (no dead # hrefs), styled as a link */ .footer-link-btn { background: none; border: 0; padding: 0; text-align: left; color: var(--paper-2); font-size: var(--text-sm); font-family: var(--font-sans); letter-spacing: var(--ls-body); line-height: inherit; transition: color var(--duration-short); } .footer-link-btn:hover { color: var(--accent); } .footer-bottom { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; padding-top: 32px; border-top: 1px solid var(--rule); font-family: var(--font-mono); font-size: var(--mono-base); letter-spacing: var(--ls-mono); text-transform: uppercase; color: var(--muted); /* --muted (not --muted-2): 11px text must clear 4.5:1 */ gap: 16px; } .footer-bottom .disclaimer { font-weight: 500; color: var(--paper-2); margin: 0; } /* ---------------------------------------------------------- */ /* 15. SCROLL-REVEAL SYSTEM (no-JS safe) */ /* ---------------------------------------------------------- */ /* Hidden initial state applies ONLY when was set by the head bootstrap snippet. Without JS, .reveal content is fully visible — never hide content behind a script that may not run. */ html.js .reveal { opacity: 0; transform: translateY(20px); } html.js .reveal.in-view { opacity: 1; transform: translateY(0); transition: opacity var(--duration-long) var(--easing-out), transform var(--duration-long) var(--easing-out); } /* Staggered cascade for grids/siblings (nth-child fallback). For explicit control use data-reveal-delay="" — site.js applies it as an inline transition-delay, which overrides these. */ html.js .reveal:nth-child(2).in-view { transition-delay: 50ms; } html.js .reveal:nth-child(3).in-view { transition-delay: 100ms; } html.js .reveal:nth-child(4).in-view { transition-delay: 150ms; } html.js .reveal:nth-child(5).in-view { transition-delay: 200ms; } html.js .reveal:nth-child(n+6).in-view { transition-delay: 250ms; } /* Parallax target (site.js drives transform; ≥900px only) */ .parallax { will-change: transform; } /* ---------------------------------------------------------- */ /* 16. KEYFRAMES */ /* ---------------------------------------------------------- */ @keyframes slideUp { from { transform: translateY(20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } } @keyframes blink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0.3; } } @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.6; } } @keyframes pulseGlow { 0%, 100% { box-shadow: 0 0 0 3px var(--glow-med); } 50% { box-shadow: 0 0 0 8px transparent; } } /* ---------------------------------------------------------- */ /* 17. REDUCED MOTION */ /* ---------------------------------------------------------- */ @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; } /* Reveals: never start hidden — show everything immediately */ html.js .reveal { opacity: 1; transform: none; } } /* ---------------------------------------------------------- */ /* 18. RESPONSIVE BREAKPOINTS */ /* ---------------------------------------------------------- */ @media (max-width: 900px) { :root { --gutter: var(--gutter-tablet); --display-1: clamp(36px, 8vw, 56px); --display-2: clamp(28px, 5vw, 40px); } .nav-links { display: none; } .nav-hamburger { display: flex; } .section { padding: 80px 0; } .section-tight { padding: 64px 0; } .section-compact { padding: 48px 0; } .page-hero { padding-top: 80px; padding-bottom: 48px; } .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; } .footer-bottom { flex-direction: column; gap: 12px; text-align: center; justify-content: center; } .two-col, .three-col, .four-col, .five-col { grid-template-columns: 1fr; } .lede { font-size: 17px; } } @media (max-width: 480px) { :root { --gutter: var(--gutter-mobile); --display-1: clamp(28px, 7vw, 44px); --display-2: clamp(24px, 4vw, 32px); } .section { padding: 56px 0; } .section-tight { padding: 48px 0; } .section-compact { padding: 32px 0; } .page-hero { padding-top: 64px; padding-bottom: 40px; } .footer-grid { grid-template-columns: 1fr; gap: 28px; } .nav-cta { padding: 10px 16px; font-size: 13px; } .marquee-band { gap: 16px 24px; font-size: 11px; padding: 16px var(--gutter); } } /* ---------------------------------------------------------- */ /* 19. PRINT SANITY */ /* ---------------------------------------------------------- */ @media print { body { background: white; color: black; } /* Cream-on-ink tokens invert to invisible on paper — force black text */ h1, h2, h3, h4, h5, p, li, td, th, blockquote, .display, .lede, .eyebrow, .wordmark, .wordmark .bench-gold { color: black !important; } body::after { display: none; } /* no grain on paper */ .nav, .nav-overlay, .skip-link, .marquee-band, .nav-hamburger { display: none !important; } html.js .reveal { opacity: 1 !important; transform: none !important; } .section, .section-tight, .section-compact { padding: 24px 0; border-top: 0; } a { color: black; text-decoration: underline; } .footer { background: white; padding: 24px 0; } .footer-grid { display: none; } /* keep only the legal line */ .footer-bottom, .footer-bottom .disclaimer { color: black; } .card, .feature-card, .tier, .juris-cell { box-shadow: none; } }