/* ========================================================================== The Agentic Standard — shared design system ("The Operator's Study") site.css — dark-first, flat, sharp-edged, one burnt-orange accent. FONTS: loaded via link (see SYSTEM-NOTES.md), NOT @import: Cormorant Garamond (variable, ital+wght 300..700) -> display Instrument Sans (variable, ital+wght 400..700) -> body / labels CONTENTS 1. Tokens (hex canon + OKLCH-derived layer + P3 boost) 2. Reset + base 3. Typography (fluid scale, kicker, accent-italic) 4. Layout primitives (container, reading, section, grids) 5. Grain overlay 6. Header / nav 7. Footer 8. Buttons 9. Cards (container-query-ready) 10. Cream inverted sections 11. Scroll-driven utilities (.reveal, .scroll-progress) 12. Cross-document view transitions 13. Details / FAQ 14. Bracket framing device + pull quote 15. Focus, selection, skip link, Calendly, print ========================================================================== */ /* -------------------------------------------------------------------------- 1. TOKENS -------------------------------------------------------------------------- */ :root { /* surfaces — canonical hex */ --bg: #100D0A; --bg-soft: #15110D; --panel: #1B1611; /* ink on dark */ --fg: #E8E1D4; --fg-dim: #C4BCAC; --muted: #918A80; --muted-dim: #635C52; --fg-body: var(--fg-dim); /* the one accent */ --accent: #D27A3F; --accent-soft: #E89968; /* hairlines */ --hairline: rgba(232, 225, 212, 0.08); --hairline-strong: rgba(232, 225, 212, 0.14); /* derived accent steps — hex fallbacks first, OKLCH overrides below */ --accent-hover: #DC8B55; --accent-active: #BC6A31; --accent-ghost: rgba(210, 122, 63, 0.18); --accent-tint: #1D1209; /* layout */ --container: min(1180px, 92vw); --gutter: clamp(20px, 4vw, 60px); --reading: min(720px, 92vw); /* type */ --font-display: "Cormorant Garamond", "Cormorant", Georgia, "Times New Roman", serif; --font-sans: "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif; --text-hero: clamp(2.75rem, 1.9rem + 4.4vw, 4.75rem); --text-h2: clamp(2rem, 1.5rem + 2.4vw, 3.2rem); --text-h3: clamp(1.45rem, 1.25rem + 1vw, 1.95rem); --text-h4: clamp(1.2rem, 1.1rem + 0.5vw, 1.45rem); --text-lead: clamp(1.1rem, 1rem + 0.5vw, 1.3rem); --text-body: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem); --text-small: 0.875rem; --text-kicker: clamp(0.72rem, 0.7rem + 0.15vw, 0.8rem); color-scheme: dark; interpolate-size: allow-keywords; /* animatable height:auto for
*/ } /* OKLCH-derived layer — brand hex stays the single source of truth */ @supports (color: color-mix(in oklch, red, white 10%)) { :root { --accent-hover: color-mix(in oklch, var(--accent), white 10%); --accent-active: color-mix(in oklch, var(--accent), black 12%); --accent-tint: color-mix(in oklch, var(--accent) 7%, var(--bg)); } } @supports (color: oklch(from red l c h)) { :root { --accent-ghost: oklch(from var(--accent) l c h / 0.2); } } /* wide gamut: chroma-only boost on P3 displays — never shift L or H */ @media (color-gamut: p3) { @supports (color: oklch(from red l calc(c * 1.1) h)) { :root { --accent: oklch(from #D27A3F l calc(c * 1.18) h); --accent-soft: oklch(from #E89968 l calc(c * 1.12) h); } } } /* -------------------------------------------------------------------------- 2. RESET + BASE -------------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { background: var(--bg); color: var(--fg); font-family: var(--font-sans); font-size: var(--text-body); line-height: 1.6; min-height: 100svh; overflow-x: clip; -webkit-font-smoothing: antialiased; } img, svg, video, canvas { display: block; max-width: 100%; } img, video { height: auto; } input, button, textarea, select { font: inherit; color: inherit; } textarea { field-sizing: content; min-height: 6rem; max-height: 16rem; } a { color: inherit; } hr, .hr { border: 0; border-top: 1px solid var(--hairline); margin-block: clamp(2rem, 5vw, 3.5rem); } /* -------------------------------------------------------------------------- 3. TYPOGRAPHY -------------------------------------------------------------------------- */ h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 500; line-height: 1.08; letter-spacing: -0.02em; text-wrap: balance; } h1 { font-size: var(--text-hero); } h2 { font-size: var(--text-h2); margin-block-end: 0.6em; } h3 { font-size: var(--text-h3); line-height: 1.15; margin-block-end: 0.4em; } h4 { font-size: var(--text-h4); line-height: 1.2; margin-block-end: 0.4em; } p, li { text-wrap: pretty; } p { color: var(--fg-body); } p + p { margin-block-start: 1em; } strong { color: var(--fg); font-weight: 600; } /* the signature move: one burnt-orange Cormorant italic word per headline */ .accent-italic, :is(h1, h2, h3, h4, .pull-quote) :is(em, i) { font-family: var(--font-display); font-style: italic; font-weight: inherit; color: var(--accent); } /* small uppercase letterspaced label above headlines */ .kicker { font-family: var(--font-sans); font-size: var(--text-kicker); font-weight: 600; text-transform: uppercase; letter-spacing: 0.18em; color: var(--muted); margin-block-end: clamp(0.9rem, 2vw, 1.4rem); } .kicker.accent { color: var(--accent); } .lead { font-size: var(--text-lead); line-height: 1.55; color: var(--fg-dim); max-width: var(--reading); } .muted { color: var(--muted); } .small { font-size: var(--text-small); } /* -------------------------------------------------------------------------- 4. LAYOUT PRIMITIVES -------------------------------------------------------------------------- */ .container { width: var(--container); margin-inline: auto; } .reading { max-width: var(--reading); } .section { padding-block: clamp(3.5rem, 9vw, 7rem); } .section-rule { border-top: 1px solid var(--hairline); } .auto-grid { display: grid; gap: clamp(1rem, 2.5vw, 1.75rem); grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); } .grid-2, .grid-3 { display: grid; gap: clamp(1rem, 2.5vw, 1.75rem); } @media (min-width: 760px) { .grid-2 { grid-template-columns: repeat(2, 1fr); } .grid-3 { grid-template-columns: repeat(3, 1fr); } } /* -------------------------------------------------------------------------- 5. GRAIN OVERLAY — fg-colored feTurbulence noise, ~2.5% opacity, static -------------------------------------------------------------------------- */ body.grain::after { content: ""; position: fixed; inset: 0; z-index: 60; pointer-events: none; opacity: 0.025; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.910 0 0 0 0 0.882 0 0 0 0 0.831 0 0 0 0.85 0'/%3E%3C/filter%3E%3Crect width='260' height='260' filter='url(%23g)'/%3E%3C/svg%3E"); background-size: 260px 260px; } /* -------------------------------------------------------------------------- 6. HEADER / NAV — sticky, hairline bottom, subtle backdrop blur -------------------------------------------------------------------------- */ .site-header { position: sticky; top: 0; z-index: 50; background: var(--bg); border-bottom: 1px solid var(--hairline); } @supports (backdrop-filter: blur(8px)) { .site-header { background: color-mix(in oklch, var(--bg) 84%, transparent); backdrop-filter: blur(8px); } } .site-header-inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 64px; } .site-lockup { display: inline-flex; align-items: center; gap: 0.65rem; text-decoration: none; color: var(--fg); } .site-mark { width: 30px; height: 30px; flex: none; } .site-wordmark { font-family: var(--font-display); font-weight: 500; font-size: 1.35rem; letter-spacing: -0.01em; line-height: 1; } .wordmark-dot { color: var(--accent); } .site-nav { display: flex; align-items: center; gap: clamp(1rem, 2.2vw, 1.8rem); } .site-nav a:not(.nav-cta) { font-size: 0.9rem; font-weight: 450; text-decoration: none; color: var(--muted); transition: color 0.18s ease; } .site-nav a:not(.nav-cta):hover { color: var(--fg); } .site-nav a[aria-current="page"] { color: var(--fg); text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 7px; } .nav-cta { display: inline-flex; align-items: center; background: var(--accent); color: #100D0A; font-size: 0.875rem; font-weight: 600; text-decoration: none; padding: 0.55em 1.1em; border-radius: 2px; transition: background 0.18s ease; } .nav-cta:hover { background: var(--accent-hover); } @media (max-width: 780px) { .site-header-inner { flex-wrap: wrap; padding-block: 0.6rem; } .site-nav { order: 3; flex-basis: 100%; overflow-x: auto; padding-block-end: 0.5rem; scrollbar-width: none; } .site-nav::-webkit-scrollbar { display: none; } .site-nav a { white-space: nowrap; } } /* -------------------------------------------------------------------------- 7. FOOTER -------------------------------------------------------------------------- */ .site-footer { border-top: 1px solid var(--hairline); padding-block: clamp(3rem, 6vw, 4.5rem) 1.75rem; font-size: var(--text-small); } .footer-grid { display: grid; gap: clamp(1.75rem, 4vw, 3rem); grid-template-columns: 1fr; } @media (min-width: 760px) { .footer-grid { grid-template-columns: 2fr 1fr 1fr 1.3fr; } } .footer-lockup { display: inline-flex; align-items: center; gap: 0.55rem; text-decoration: none; color: var(--fg); } .footer-lockup .site-mark { width: 26px; height: 26px; } .footer-lockup .site-wordmark { font-size: 1.2rem; } .footer-tagline { margin-block-start: 0.9rem; color: var(--muted); max-width: 30ch; } .footer-heading { font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.16em; color: var(--muted-dim); margin-block-end: 0.9rem; } .footer-col a { display: block; color: var(--muted); text-decoration: none; padding-block: 0.28rem; transition: color 0.18s ease; } .footer-col a:hover { color: var(--fg); } .footer-detail { color: var(--muted-dim); margin-block-start: 0.5rem; } .footer-bottom { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; justify-content: space-between; border-top: 1px solid var(--hairline); margin-block-start: clamp(2rem, 5vw, 3rem); padding-block-start: 1.5rem; color: var(--muted-dim); } /* -------------------------------------------------------------------------- 8. BUTTONS — sharp, flat, one accent -------------------------------------------------------------------------- */ .btn, .btn-ghost { display: inline-flex; align-items: center; gap: 0.5em; font-family: var(--font-sans); font-size: 0.95rem; font-weight: 600; line-height: 1; text-decoration: none; padding: 0.95em 1.6em; border-radius: 2px; border: 1px solid transparent; cursor: pointer; transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease, translate 0.18s ease; } .btn { background: var(--accent); color: var(--bg); } .btn:hover { background: var(--accent-hover); translate: 0 -1px; } .btn:active { background: var(--accent-active); translate: 0 0; } .btn-ghost { background: transparent; color: var(--fg); border-color: var(--hairline-strong); } .btn-ghost:hover { border-color: var(--accent); color: var(--fg); translate: 0 -1px; } .btn-ghost:active { translate: 0 0; } /* inline text link with arrow, e.g. "Read the beliefs →" */ .text-link { color: var(--fg); font-weight: 500; text-decoration: none; border-bottom: 1px solid var(--hairline-strong); padding-block-end: 2px; transition: border-color 0.18s ease, color 0.18s ease; } .text-link:hover { border-color: var(--accent); color: var(--accent-soft); } /* -------------------------------------------------------------------------- 9. CARDS — container-query-ready Wrap EVERY card in a .card-slot (the grid child); the card queries it. -------------------------------------------------------------------------- */ .card-slot { container-type: inline-size; container-name: card; } .card { height: 100%; background: var(--panel); border: 1px solid var(--hairline); border-radius: 2px; padding: clamp(1.4rem, 5cqi, 2.25rem); display: grid; gap: 0.7rem; align-content: start; } a.card { text-decoration: none; transition: border-color 0.18s ease, translate 0.18s ease; } a.card:hover { border-color: var(--accent); translate: 0 -2px; } .card h3, .card h4 { margin: 0; font-size: 1.35rem; font-size: clamp(1.2rem, 4.5cqi, 1.65rem); /* scales with the card, not the page */ } .card p { color: var(--muted); font-size: var(--text-small); font-size: clamp(0.875rem, 3cqi, 0.975rem); } .card-tag { font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.16em; color: var(--accent); } .card-num { font-family: var(--font-display); font-size: clamp(1.8rem, 8cqi, 2.6rem); font-weight: 500; line-height: 1; color: var(--muted-dim); } .card-cta { color: var(--fg); font-size: var(--text-small); font-weight: 500; } .card-cta .arrow { color: var(--accent); } /* .card-split: stacked by default; 2-col (num/tag rail + content) when wide */ .card-split { grid-template-columns: 1fr; } @container card (min-width: 30rem) { .card-split { grid-template-columns: minmax(6.5rem, 9rem) 1fr; column-gap: clamp(1rem, 4cqi, 2rem); align-items: start; } .card-split > .card-num, .card-split > .card-tag { grid-column: 1; } .card-split > :not(.card-num):not(.card-tag) { grid-column: 2; } } /* -------------------------------------------------------------------------- 10. CREAM INVERTED SECTIONS — flip every token, keep one accent -------------------------------------------------------------------------- */ .inverted { --bg: #ECE5D5; --bg-soft: #E9E1CF; --panel: #E5DDCB; --fg: #2A241C; --fg-dim: #4E4538; --fg-body: #4E4538; --muted: #857A66; --muted-dim: #9C917C; --accent: #B85A20; --accent-soft: #A34F1B; --hairline: #C4B8A5; --hairline-strong: #B3A68F; --accent-hover: #C76A2F; --accent-active: #9E4C19; --accent-ghost: rgba(184, 90, 32, 0.18); --accent-tint: #E5D9C2; background: var(--bg); color: var(--fg); color-scheme: light; } @supports (color: color-mix(in oklch, red, white 10%)) { .inverted { --accent-hover: color-mix(in oklch, var(--accent), white 8%); --accent-active: color-mix(in oklch, var(--accent), black 12%); --accent-tint: color-mix(in oklch, var(--accent) 7%, var(--bg)); } } @supports (color: oklch(from red l c h)) { .inverted { --accent-ghost: oklch(from var(--accent) l c h / 0.2); } } @media (color-gamut: p3) { @supports (color: oklch(from red l calc(c * 1.1) h)) { .inverted { --accent: oklch(from #B85A20 l calc(c * 1.15) h); } } } .inverted .btn { color: #ECE5D5; } .inverted .nav-cta { color: #ECE5D5; } /* -------------------------------------------------------------------------- 11. SCROLL-DRIVEN UTILITIES -------------------------------------------------------------------------- */ /* .reveal — subtle fade-up bound to the element's own viewport journey */ @supports (animation-timeline: view()) { .reveal { animation: reveal-rise linear both; animation-timeline: view(); animation-range: entry 0% entry 45%; } .reveal-late { animation-range: entry 12% entry 60%; } } @keyframes reveal-rise { from { opacity: 0; translate: 0 1.25rem; } to { opacity: 1; translate: 0 0; } } /* JS-driven fallback: site.js sets html.no-scroll-timeline and an IntersectionObserver adds .in-view. No JS => content simply stays visible. */ html.no-scroll-timeline .reveal { opacity: 0; translate: 0 1rem; transition: opacity 0.6s ease, translate 0.6s ease; } html.no-scroll-timeline .reveal-late { transition-delay: 0.12s; } html.no-scroll-timeline .reveal.in-view { opacity: 1; translate: 0 0; } /* .scroll-progress — 2px accent hairline; long editorial pages only */ .scroll-progress { position: fixed; inset: 0 0 auto 0; height: 2px; z-index: 55; background: var(--accent); transform-origin: left; scale: 0 1; animation: fill-x linear both; animation-timeline: scroll(root); } @keyframes fill-x { to { scale: 1 1; } } @supports not (animation-timeline: scroll(root)) { .scroll-progress { display: none; } } /* reduced motion: still page, everything visible */ @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 { animation: none !important; opacity: 1 !important; translate: none !important; } .scroll-progress { display: none; } } /* -------------------------------------------------------------------------- 12. CROSS-DOCUMENT VIEW TRANSITIONS (MPA) -------------------------------------------------------------------------- */ @view-transition { navigation: auto; } .site-lockup { view-transition-name: site-mark; } .site-header { view-transition-name: site-header; } .page-title { view-transition-name: page-title; } /* on ONE h1 wrapper per page */ ::view-transition-old(root) { animation: vt-page-out 0.15s ease both; } ::view-transition-new(root) { animation: vt-page-in 0.2s ease both; } @keyframes vt-page-out { to { opacity: 0; } } @keyframes vt-page-in { from { opacity: 0; translate: 0 0.5rem; } } /* pin the persistent header — no flicker */ ::view-transition-old(site-header), ::view-transition-new(site-header), ::view-transition-old(site-mark), ::view-transition-new(site-mark) { animation: none; } @media (prefers-reduced-motion: reduce) { ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; } } /* -------------------------------------------------------------------------- 13. DETAILS / FAQ — native accordions, animated where supported -------------------------------------------------------------------------- */ details.faq { border-top: 1px solid var(--hairline); } details.faq:last-of-type { border-bottom: 1px solid var(--hairline); } /* block layout, NOT flex: a summary containing is multiple inline children, and flex + space-between scatters them across the row */ details.faq summary { list-style: none; cursor: pointer; display: block; position: relative; padding-block: 1.1rem; padding-inline-end: 2.5rem; /* room for the + marker */ font-family: var(--font-display); font-size: var(--text-h4); font-weight: 500; line-height: 1.35; letter-spacing: -0.01em; color: var(--fg); text-wrap: balance; } details.faq summary::-webkit-details-marker { display: none; } details.faq summary::after { content: "+"; position: absolute; inset-inline-end: 0; top: 1.1rem; font-family: var(--font-sans); font-weight: 400; color: var(--accent); font-size: 1.2rem; /* line box = the summary's first text line, so the + centers on it */ line-height: calc(1.35 * var(--text-h4)); transition: rotate 0.25s ease; } details.faq[open] summary::after { rotate: 45deg; } details.faq summary:hover { color: var(--accent-soft); } details.faq::details-content { height: 0; overflow: clip; transition: height 0.3s ease, content-visibility 0.3s allow-discrete; } details.faq[open]::details-content { height: auto; } details.faq .faq-body { padding-block: 0 1.4rem; max-width: var(--reading); color: var(--fg-body); } /* -------------------------------------------------------------------------- 14. BRACKET FRAMING DEVICE + PULL QUOTE Markup pattern (see SYSTEM-NOTES.md): .framed wraps content plus two corner SVGs (.frame-bracket.frame-tl / .frame-br), stroke currentColor. -------------------------------------------------------------------------- */ .framed { position: relative; padding: clamp(1.75rem, 5vw, 3rem); } .frame-bracket { position: absolute; width: clamp(28px, 4vw, 40px); height: clamp(28px, 4vw, 40px); color: var(--accent); pointer-events: none; } .frame-tl { top: 0; left: 0; } .frame-br { bottom: 0; right: 0; } .pull-quote { font-family: var(--font-display); font-weight: 500; font-size: clamp(1.5rem, 1.2rem + 1.6vw, 2.3rem); line-height: 1.25; letter-spacing: -0.015em; color: var(--fg); text-wrap: balance; max-width: var(--reading); } /* -------------------------------------------------------------------------- 15. FOCUS, SELECTION, SKIP LINK, CALENDLY, PRINT -------------------------------------------------------------------------- */ :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; } ::selection { background: var(--accent); color: #100D0A; } .skip-link { position: fixed; top: -100%; left: var(--gutter); z-index: 100; background: var(--accent); color: #100D0A; font-weight: 600; text-decoration: none; padding: 0.6em 1.1em; border-radius: 2px; } .skip-link:focus-visible { top: 0.75rem; } /* lazy Calendly slot — site.js injects the iframe on intersection */ [data-calendly] { min-height: 720px; border: 1px solid var(--hairline); border-radius: 2px; background: var(--bg-soft); position: relative; } [data-calendly]::before { content: "Loading scheduler\2026"; position: absolute; inset: 0; display: grid; place-content: center; color: var(--muted-dim); font-size: var(--text-small); } [data-calendly].is-loaded::before { content: none; } .calendly-frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } /* -------------------------------------------------------------------------- 16. BG-FIELD — site-wide ambient constellation behind every surface site.js injects .bg-field-canvas, tags surface-painting sections with [data-fx-band] (after caching their computed colors), then sets html.fx-live. The canvas paints every band's surface color itself and draws the constellation in that band's own ink, so the effect follows the background wherever it changes color (cream/alt sections). No JS or no canvas => fx-live never set => sections paint themselves. -------------------------------------------------------------------------- */ .bg-field-canvas { position: fixed; inset: 0; z-index: -1; width: 100%; height: 100%; } html.fx-live [data-fx-band] { background-color: transparent !important; } @media print { body { background: #fff; color: #000; } body.grain::after, .scroll-progress, .nav-cta, .skip-link, .bg-field-canvas { display: none; } .site-header { position: static; background: #fff; } .reveal { opacity: 1 !important; translate: none !important; animation: none !important; } a { color: inherit; text-decoration: underline; } }