/* ========================================================= WORKFABRIC — SITE-WIDE DESIGN SYSTEM One accent ("twin cyan") that only appears on the twinned layer. Everything else is ink on bone. ========================================================= */ :root { --bone: oklch(98.2% 0.004 95); --bone-2: oklch(96.2% 0.005 95); --ink: oklch(18% 0.01 260); --ink-2: oklch(32% 0.012 260); --ink-3: oklch(52% 0.015 260); --rule: oklch(90% 0.008 260); --rule-2: oklch(84% 0.01 260); --twin-h: 230; --twin: oklch(68% 0.09 var(--twin-h)); --twin-soft: oklch(68% 0.09 var(--twin-h) / 0.14); --twin-softer: oklch(68% 0.09 var(--twin-h) / 0.07); --twin-ink: oklch(46% 0.10 var(--twin-h)); /* Step-box accent palette (Behavior Observed = warm/amber, Simulated Insight = cool/blue). Defined as theme-aware tokens so light/dark both stay legible. */ --observed: oklch(64% 0.10 75); --insight: oklch(58% 0.16 260); --insight-soft: oklch(58% 0.16 260 / 0.16); --insight-softer: oklch(58% 0.16 260 / 0.08); --insight-ink: oklch(40% 0.16 260); /* dot grid color and blend — overridden in dark mode */ --dot-color: oklch(0% 0 0 / 0.025); --dot-blend: multiply; /* Surfaces that should stay dark even in light mode (and stay dark in dark mode). For sections that intentionally invert — closing CTAs, dark heroes, etc. */ --ink-deep: oklch(14% 0.012 260); /* always dark surface */ --bone-on-deep: oklch(96% 0.005 95); /* light text/foreground for use on --ink-deep */ --gutter: clamp(20px, 4vw, 56px); --max: 1280px; --font-display: "Inter Tight", ui-sans-serif, system-ui, -apple-system, sans-serif; --font-serif: "Instrument Serif", ui-serif, Georgia, serif; --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace; /* =========================================================== TYPE SCALE — four sizes for the entire site. --fs-hero: only the top-of-page H1. --fs-display: every section H2/H3 and standalone card title. --fs-body: paragraphs, lede, button text, nav links, table cells. --fs-meta: eyebrows, pills, mono labels, captions, footer fine print. ----------------------------------------------------------- */ --fs-hero: clamp(48px, 7vw, 96px); --fs-display: clamp(32px, 4.4vw, 56px); --fs-dropdown: clamp(20px, 1.8vw, 26px); --fs-lede: 19px; --fs-body: 16px; --fs-meta: 16px; color-scheme: light; } /* ========================================================= DARK MODE — warm charcoal, paper-like inversion Triggered by [data-theme="dark"] on . ========================================================= */ html[data-theme="dark"] { /* Bone -> warm charcoal. Slight warmth in chroma keeps paper feel. */ --bone: oklch(17% 0.008 75); --bone-2: oklch(21% 0.009 75); /* Ink -> warm off-white, never pure white */ --ink: oklch(94% 0.006 85); --ink-2: oklch(78% 0.008 80); --ink-3: oklch(58% 0.010 75); /* Rules slightly cooler than bg so they read as edges */ --rule: oklch(28% 0.010 75); --rule-2: oklch(34% 0.012 75); /* Twin accent — re-tuned: lighter, slightly more saturated so it pops on dark without going neon. */ --twin: oklch(74% 0.11 var(--twin-h)); --twin-soft: oklch(74% 0.11 var(--twin-h) / 0.18); --twin-softer: oklch(74% 0.11 var(--twin-h) / 0.09); --twin-ink: oklch(80% 0.10 var(--twin-h)); /* Step-box accents in dark mode: lighter, slightly more saturated so they pop on the warm-charcoal surface without going neon. */ --observed: oklch(74% 0.10 75); --insight: oklch(72% 0.16 260); --insight-soft: oklch(72% 0.16 260 / 0.22); --insight-softer: oklch(72% 0.16 260 / 0.10); --insight-ink: oklch(82% 0.14 260); --dot-color: oklch(100% 0 0 / 0.04); --dot-blend: screen; /* Inverted/deep sections: in dark mode these become slightly DEEPER than the page bg, so they still read as a distinct "feature dark" surface. Foreground stays light. */ --ink-deep: oklch(11% 0.008 75); --bone-on-deep: oklch(94% 0.006 85); color-scheme: dark; } /* Smooth theme transition without flashing animations on first paint */ html[data-theme-ready] body, html[data-theme-ready] body::before, html[data-theme-ready] .nav, html[data-theme-ready] footer, html[data-theme-ready] .card, html[data-theme-ready] .btn, html[data-theme-ready] section { transition: background-color 280ms ease, border-color 280ms ease, color 220ms ease; } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } html { scroll-behavior: smooth; } body { font-family: var(--font-display); background: var(--bone); color: var(--ink); font-size: 16px; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; font-feature-settings: "ss01", "cv11"; line-height: 1.5; overflow-x: hidden; } body::before { content: ""; position: fixed; inset: 0; background-image: radial-gradient(var(--dot-color) 1px, transparent 1px); background-size: 3px 3px; pointer-events: none; z-index: 1; opacity: 0.7; mix-blend-mode: var(--dot-blend); } .wrap { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); position: relative; z-index: 2; } /* ---------- Type ---------- */ .eyebrow { font-family: var(--font-display); font-size: 16px; text-transform: none; letter-spacing: normal; color: var(--ink-3); font-weight: 400; } .eyebrow .dot { display: inline-block; width: 6px; height: 6px; border-radius: 999px; background: var(--twin); vertical-align: middle; margin-right: 8px; transform: translateY(-1px); } h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 500; letter-spacing: -0.025em; margin: 0; text-wrap: balance; } h1 { font-size: clamp(48px, 7vw, 96px); line-height: 0.98; letter-spacing: -0.035em; font-weight: 500; } h2 { font-size: clamp(32px, 4.4vw, 56px); line-height: 1.02; letter-spacing: -0.03em; } h3 { font-size: clamp(20px, 1.8vw, 26px); line-height: 1.15; font-weight: 500; letter-spacing: -0.015em; } h4 { font-size: 18px; font-weight: 500; letter-spacing: -0.01em; } p { margin: 0; text-wrap: pretty; } .lede { font-size: 19px; line-height: 1.5; color: var(--ink-2); max-width: 60ch; font-weight: 400; } /* ---------- Buttons ---------- */ .btn { display: inline-flex; align-items: center; gap: 10px; padding: 14px 22px; border-radius: 999px; font-family: var(--font-display); font-size: 16px; font-weight: 500; letter-spacing: -0.005em; cursor: pointer; border: 1px solid transparent; text-decoration: none; transition: transform .2s ease, background .2s ease, border-color .2s ease, color .2s ease; white-space: nowrap; } .btn-primary { background: var(--ink); color: var(--bone); } .btn-primary:hover { transform: translateY(-1px); background: oklch(25% 0.01 260); } .btn-ghost { background: transparent; color: var(--ink); border-color: var(--rule-2); } .btn-ghost:hover { background: var(--bone-2); border-color: var(--ink-3); } .btn .arrow { display: inline-block; transition: transform .25s ease; } .btn:hover .arrow { transform: translateX(3px); } /* ---------- Nav ---------- */ .nav { position: sticky; top: 0; z-index: 50; backdrop-filter: saturate(1.4) blur(10px); background: color-mix(in oklch, var(--bone) 82%, transparent); border-bottom: 1px solid transparent; transition: border-color .3s ease; } .nav.scrolled { border-bottom-color: var(--rule); } .nav-inner { display: flex; align-items: center; justify-content: space-between; height: 64px; gap: 16px; } .logo { display: flex; align-items: center; gap: 10px; font-weight: 500; font-size: 14px; letter-spacing: -0.015em; color: var(--ink); text-decoration: none; } .logo-mark { width: 22px; height: 22px; position: relative; flex: none; } .logo-mark::before, .logo-mark::after { content: ""; position: absolute; inset: 0; border: 1.5px solid var(--ink); border-radius: 4px; } .logo-mark::after { border-color: var(--twin); transform: translate(3px, 3px); background: var(--twin-soft); } .nav-links { display: flex; gap: 28px; font-size: 14px; color: var(--ink-2); position: relative; } .nav-links a { color: inherit; text-decoration: none; transition: color .2s; position: relative; padding: 4px 0; } .nav-links a:hover { color: var(--ink); } .nav-links a.active { color: var(--ink); } .nav-links a.active::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px; background: var(--twin); border-radius: 1px; } /* Dropdown */ .nav-drop { position: relative; } .nav-drop-menu { position: absolute; top: calc(100% + 14px); left: 50%; transform: translateX(-50%) translateY(-6px); min-width: 280px; background: var(--bone); border: 1px solid var(--rule); border-radius: 12px; padding: 10px; box-shadow: 0 24px 60px -30px oklch(0% 0 0 / 0.25); opacity: 0; pointer-events: none; transition: opacity .18s ease, transform .18s ease; z-index: 60; } .nav-drop:hover .nav-drop-menu, .nav-drop:focus-within .nav-drop-menu { opacity: 1; transform: translateX(-50%) translateY(0); pointer-events: auto; } .nav-drop-menu a { display: flex; gap: 10px; align-items: baseline; padding: 10px 12px; border-radius: 8px; color: var(--ink); } .nav-drop-menu a:hover { background: var(--bone-2); } .nav-drop-menu a .nd-label { font-size: 14px; font-weight: 500; letter-spacing: -0.01em; } .nav-drop-menu a .nd-desc { font-size: 11px; color: var(--ink-3); margin-top: 2px; } .nav-drop-menu a .nd-idx { font-family: var(--font-display); font-size: 14px; color: var(--ink-3); letter-spacing: normal; margin-right: 4px; } .nav-drop-menu a .nd-body { flex: 1; } .nav-cta { display: flex; gap: 10px; align-items: center; } .nav-cta .btn { padding: 9px 16px; font-size: 14px; } .theme-toggle { appearance: none; width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; background: transparent; border: 1px solid var(--rule-2); border-radius: 999px; color: var(--ink-2); cursor: pointer; transition: background .2s ease, border-color .2s ease, color .2s ease, transform .2s ease; flex-shrink: 0; } .theme-toggle:hover { background: var(--bone-2); border-color: var(--ink-3); color: var(--ink); } .theme-toggle:active { transform: scale(0.94); } .theme-toggle svg { display: block; } @media (max-width: 860px) { .nav-links { display: none; } .nav-cta .btn-ghost { display: none; } } /* ---------- Section scaffolding ---------- */ section { position: relative; z-index: 2; } .section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; margin-bottom: 64px; flex-wrap: wrap; } .section-head .meta { font-family: var(--font-display); font-size: 16px; color: var(--ink-3); text-transform: none; letter-spacing: normal; white-space: nowrap; } .rule { height: 1px; background: var(--rule); margin: 0; } /* ---------- Breadcrumb ---------- */ .breadcrumb { display: flex; align-items: center; gap: 10px; font-family: var(--font-display); font-size: 16px; letter-spacing: normal; text-transform: none; color: var(--ink-3); margin-bottom: 24px; } .breadcrumb a { color: var(--ink-3); text-decoration: none; } .breadcrumb a:hover { color: var(--ink); } .breadcrumb .sep { opacity: 0.5; } /* ---------- Footer ---------- */ footer { padding: 64px 0 64px; border-top: 1px solid var(--rule); color: var(--ink-3); font-size: 14px; position: relative; z-index: 2; background: var(--bone); } .foot-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 48px; padding-bottom: 48px; border-bottom: 1px solid var(--rule); } .foot-col h5 { margin: 0 0 16px; font-family: var(--font-display); font-size: 16px; text-transform: none; letter-spacing: normal; color: var(--ink-3); font-weight: 500; } .foot-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; } .foot-col a { color: var(--ink-2); text-decoration: none; font-size: 14px; letter-spacing: -0.005em; transition: color .2s; } .foot-col a:hover { color: var(--ink); } .foot-tag { display: inline-block; font-family: var(--font-display); font-size: 14px; color: var(--twin-ink); background: var(--twin-softer); padding: 2px 6px; border-radius: 3px; letter-spacing: normal; margin-left: 6px; vertical-align: middle; } .foot-bottom { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px; padding-top: 32px; } .foot-legal { display: flex; gap: 24px; } .foot-legal a { color: var(--ink-3); text-decoration: none; } .foot-legal a:hover { color: var(--ink); } @media (max-width: 780px) { .foot-grid { grid-template-columns: 1fr 1fr; gap: 32px; } } @media (max-width: 480px) { .foot-grid { grid-template-columns: 1fr; } } /* ---------- Utility: twin shadow text ---------- */ .twinned { position: relative; display: inline-block; color: var(--ink); } .twinned::after { content: attr(data-twin); position: absolute; left: 0; top: 0; color: var(--twin); opacity: 0.55; transform: translate(0.12em, 0.12em); pointer-events: none; z-index: -1; font: inherit; letter-spacing: inherit; } /* keyframes */ @keyframes pulse-soft { 0%, 100% { opacity: 0.35; } 50% { opacity: 0.9; } } @keyframes breathe { 0%, 100% { transform: translate(var(--dx, 6px), var(--dy, 6px)) scale(1); } 50% { transform: translate(calc(var(--dx, 6px) * 1.2), calc(var(--dy, 6px) * 1.2)) scale(1.015); } } @keyframes dash-flow { to { stroke-dashoffset: -24; } } body[data-motion="off"] * { animation-play-state: paused !important; transition-duration: 0s !important; } /* ---------- Common page chrome ---------- */ .page-hero { padding: clamp(60px, 9vw, 120px) 0 clamp(40px, 6vw, 80px); } .page-hero h1 { font-size: clamp(48px, 6.4vw, 88px); letter-spacing: -0.035em; line-height: 0.98; max-width: 18ch; } .page-hero .lede { margin-top: 24px; max-width: 60ch; } .page-hero .hero-ctas { margin-top: 40px; display: flex; gap: 12px; flex-wrap: wrap; } .card { background: var(--bone); border: 1px solid var(--rule); border-radius: 14px; padding: 28px; } .card-mute { background: var(--bone-2); } .card-twin { background: linear-gradient(180deg, var(--bone) 0%, var(--twin-softer) 100%); border-color: var(--twin-soft); } .tag { display: inline-block; font-family: var(--font-display); font-size: 14px; letter-spacing: normal; text-transform: none; color: var(--twin-ink); background: var(--twin-softer); padding: 4px 8px; border-radius: 4px; } .divider { border-top: 1px solid var(--rule); } /* Twin rail — hide scrollbar but keep scrolling */ .twin-rail::-webkit-scrollbar { display: none; }