/* ============================================================================ bureau-theme.css - Direction D "Bureau" theme, SITE-WIDE. Loaded on every page by Base.astro (after /styles.css) and applied under . It flips the site from the original dark theme to the warm/light Bureau theme by: 1. Re-mapping the shared design tokens (styles.css :root --color-*) to the light Bureau palette. Set on the body-level .theme-bureau, so it overrides the html-level :root for all page content (a closer ancestor wins for inherited custom properties). Token-driven components re-theme for free. 2. Theming the shared chrome (sticky light top nav, contained content, nav links, footer) and the primary/ghost buttons. 3. Fixing the finite set of places in styles.css that HARDCODE a dark literal instead of a token (invisible near-white tracks/borders, dark tooltip and panel surfaces), scoped to the components that actually render on content pages. Everything else is token-driven and flips automatically. styles.css is left untouched; removing this file's and the body class fully reverts the site to the dark theme. Homepage-only section styles live separately in /home-bureau.css. ============================================================================ */ .theme-bureau { /* -- Bureau palette -- */ --bg: #F7F5F0; --surface: #FFFFFF; --surface-2: #FBFAF7; --ink: #171A1F; --navy: #171A1F; --muted: #6B6A64; --hair: rgba(23, 26, 31, 0.12); --hair-strong: rgba(23, 26, 31, 0.22); --gold: #FCBC32; --teal: #10BFCC; --teal-ink: #0A8791; --coral: #E7694E; --coral-ink: #C6482F; --green-ink: #2F7A4D; --serif: 'Fraunces', 'Source Serif 4', Georgia, 'Times New Roman', serif; --sans: 'Source Sans 3', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; --mono: 'Source Code Pro', ui-monospace, 'SF Mono', Menlo, Consolas, monospace; --maxw: 1220px; --pad: clamp(1.25rem, 4vw, 3rem); --section-y: clamp(4rem, 9vw, 8rem); --ease: cubic-bezier(0.22, 0.61, 0.36, 1); /* -- Re-map shared dark tokens to the light theme -- */ --color-bg: #F7F5F0; --color-bg-deep: #F0EDE5; --color-surface: #FFFFFF; --color-surface-elevated: #FFFFFF; --color-border: rgba(23, 26, 31, 0.12); --color-border-subtle: rgba(23, 26, 31, 0.08); --color-border-strong: rgba(23, 26, 31, 0.22); --color-border-input: rgba(23, 26, 31, 0.28); --color-divider: rgba(23, 26, 31, 0.12); --color-text: #171A1F; --color-text-primary: rgba(23, 26, 31, 0.92); --color-text-heading: rgba(23, 26, 31, 0.80); --color-text-body: rgba(23, 26, 31, 0.70); --color-text-secondary: rgba(23, 26, 31, 0.62); --color-text-muted: #6B6A64; --color-text-faint: rgba(23, 26, 31, 0.50); --color-text-ghost: rgba(23, 26, 31, 0.18); --color-cta: #171A1F; --color-cta-hover: #FCBC32; --color-cta-text: #FFFFFF; --color-viz: #10BFCC; --color-accent: #0A8791; --color-accent-bright: #10BFCC; --color-accent-bright-hover: #0A8791; --color-accent-link: #0A8791; --color-gold: #FCBC32; --input-bg: #FFFFFF; --overlay-bg: rgba(23, 26, 31, 0.55); background: var(--bg); color: var(--ink); font-family: var(--sans); } /* Hide the dark animated background canvas on the light theme. */ .theme-bureau #radial-wave { display: none !important; } /* ---------- Chrome: sticky light top nav, content contained to the column ---------- */ .theme-bureau .topnav { position: sticky; top: 0; z-index: 100; background: rgba(247, 245, 240, 0.86); -webkit-backdrop-filter: saturate(140%) blur(12px); backdrop-filter: saturate(140%) blur(12px); border-bottom: 1px solid var(--hair); /* Bar and hairline stay full-bleed; content is inset to the centered 1220px column so the brand lines up with the page content and the CTA with its right edge. */ padding-left: calc(var(--pad) + max(0px, calc((100% - var(--maxw)) / 2))); padding-right: calc(var(--pad) + max(0px, calc((100% - var(--maxw)) / 2))); } .theme-bureau .topnav__brand svg path { fill: var(--ink); } /* Larger, sentence-case nav links with an animated underline, grouped right. */ .theme-bureau .topnav__links { margin-left: auto; } .theme-bureau .topnav__link { font-size: 0.95rem; font-weight: 500; letter-spacing: normal; text-transform: none; color: var(--ink); position: relative; padding-bottom: 2px; } .theme-bureau .topnav__link::after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 1.5px; background: var(--ink); transform: scaleX(0); transform-origin: left; transition: transform 0.26s var(--ease); } .theme-bureau .topnav__link:hover { color: var(--ink); } .theme-bureau .topnav__link:hover::after, .theme-bureau .topnav__link[aria-current="page"]::after { transform: scaleX(1); } @media (prefers-reduced-motion: reduce) { .theme-bureau .topnav__link::after { transition: none; } } /* ---------- Buttons ---------- */ /* Primary and ghost buttons become Bureau pills; primary hovers to gold, so its label must switch to ink (base sets it to white, which is unreadable on gold). */ .theme-bureau .btn-primary { border-radius: 999px; } .theme-bureau .btn-ghost { border-radius: 999px; } .theme-bureau .topnav__cta { border-radius: 999px; padding: 0.72rem 1.4rem; font-size: 0.9rem; } .theme-bureau .btn-primary:hover, .theme-bureau .topnav__cta:hover, .theme-bureau .bp-primary:hover, .theme-bureau .bp-feature .bp-btn:hover, .theme-bureau .form-submit:hover { color: var(--ink); } .theme-bureau .btn-ghost:hover { background: rgba(23, 26, 31, 0.05); border-color: var(--ink); } .theme-bureau .bp-btn:hover { background: rgba(23, 26, 31, 0.05); } .theme-bureau .bp-card:hover { border-color: var(--hair-strong); box-shadow: 0 18px 40px -24px rgba(23, 26, 31, 0.18); } /* Bureau button base + variants, needed site-wide because the shared PricingLadder uses .btn / .btn-secondary / .btn-on-navy. These lived only in home-bureau.css (homepage-only), so on /pricing they fell back to plain links. .btn-primary is NOT redefined here: it already resolves site-wide via styles.css plus the token remap (--color-cta = ink, --color-cta-hover = gold), and interior primary/ghost buttons must keep their existing styling. */ .theme-bureau .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; font-family: var(--sans); font-size: 0.98rem; font-weight: 600; line-height: 1; padding: 1.05rem 1.9rem; border-radius: 999px; border: 1px solid transparent; cursor: pointer; text-decoration: none; transition: background-color 0.24s var(--ease), color 0.24s var(--ease), transform 0.24s var(--ease), border-color 0.24s var(--ease), box-shadow 0.24s var(--ease); } .theme-bureau .btn-secondary { background: transparent; color: var(--ink); border-color: var(--hair-strong); } .theme-bureau .btn-secondary:hover { background: rgba(23, 26, 31, 0.05); border-color: var(--ink); } .theme-bureau .btn-on-navy { background: var(--gold); color: var(--ink); border-color: var(--gold); box-shadow: 0 12px 28px -12px rgba(252, 188, 50, 0.55); } .theme-bureau .btn-on-navy:hover { background: #fff; color: var(--ink); border-color: #fff; transform: translateY(-2px); } @media (prefers-reduced-motion: reduce) { .theme-bureau .btn:hover { transform: none; } } /* Mono / numeric utilities, also relocated from home-bureau.css so the shared PricingLadder group subtitles (.price-group-sub.mono) render in the mono face on /pricing, not only on the homepage. */ .theme-bureau .num, .theme-bureau .mono { font-variant-numeric: tabular-nums; } .theme-bureau .mono { font-family: var(--mono); letter-spacing: -0.01em; } /* Eyebrow labels read as quiet muted tracking on the light theme (base uses the old sage accent). */ .theme-bureau .eyebrow { color: var(--muted); } /* ============================================================================ Literal fixes: dark-theme hardcoded values in styles.css that a token flip cannot reach. Scoped to components that actually render on content pages (gate-/channel-/funnel-meter, band-scale, pipeline, feature-row panel, info-card, timeline). Dead old-homepage components are not touched. ============================================================================ */ /* Meter tracks were near-white for a dark bg; invisible on light -> ink hairline. */ .theme-bureau .gate-meter__bar, .theme-bureau .channel-meter__bar, .theme-bureau .funnel-meter__bar { background: rgba(23, 26, 31, 0.10); } /* Data-viz fills to Bureau teal (base literal was the old green-teal). */ .theme-bureau .funnel-meter__fill { background: rgba(16, 191, 204, 0.55); } /* Credible-interval brackets were near-white; invisible on light -> ink. */ .theme-bureau .channel-meter__range { border-color: rgba(23, 26, 31, 0.5); } .theme-bureau .channel-meter__range::after { background: rgba(23, 26, 31, 0.25); } /* Row tooltips were near-black panels with (now) dark ink text -> readable dark bubble with light text. */ .theme-bureau .gate-meter__row[data-tip]::before, .theme-bureau .channel-meter__row[data-tip]::before, .theme-bureau .funnel-meter__row[data-tip]::before { background: var(--ink); color: var(--surface); box-shadow: 0 8px 24px -10px rgba(23, 26, 31, 0.35); } /* Rating-scale segments: the lowest ("F") segment was a near-white wash that vanishes on light; give it a faint ink wash. Teal segments shift to Bureau teal. */ .theme-bureau .band-scale__seg--f { background: rgba(23, 26, 31, 0.06); } .theme-bureau .band-scale__seg--a { background: rgba(16, 191, 204, 0.85); } .theme-bureau .band-scale__seg--b { background: rgba(16, 191, 204, 0.42); } /* Pipeline gate tint (old green-teal) -> faint Bureau teal. */ .theme-bureau .pipeline__gate { background: rgba(16, 191, 204, 0.06); } /* Feature-row side panel used a sage-to-dark gradient (a dark island on light) -> flat light surface with a soft border. Renders on tier pages + agencies + solutions. */ .theme-bureau .feature-row__panel { background: var(--surface-2); border: 1px solid var(--hair); box-shadow: 0 24px 50px -34px rgba(23, 26, 31, 0.2); } /* Residual off-palette literals the base leaves for content pages. The CTA band's radial tint was the retired sage green; swap to a faint gold wash (gold rewards the call to action). The whitepapers "Forthcoming" status pill used a translucent gold that read about 1.4:1 on the light ground; drop the text to muted (pending items read lower-key) and keep the gold border. */ .theme-bureau .cta-band { background: radial-gradient(ellipse 70% 130% at 50% 0%, rgba(252, 188, 50, 0.06), transparent 70%); } .theme-bureau .paper-list__status--forthcoming { color: var(--muted); } /* Info card lift was a ~2% white wash (invisible on light) -> solid surface. */ .theme-bureau .info-card { background: var(--surface); border: 1px solid var(--hair); } /* Timeline accents to Bureau teal. */ .theme-bureau .timeline__item { border-color: rgba(16, 191, 204, 0.35); } /* ============================================================================ Typography: match the Bureau editorial scale site-wide. The token remap flipped color but not the type scale, so content pages kept the original lighter (weight 440), smaller display headings and 16px body, which reads as the old theme. Bureau uses heavier Fraunces (500), a slightly larger display scale, and a 17px body. The homepage uses its own section classes (home-bureau.css) and is not affected by these shared-class rules. ============================================================================ */ .theme-bureau { font-size: 17px; } /* Fraunces is the display face site-wide. --type-display-fam already resolves to Fraunces, but not every heading is wired to it: interior subheads and the pricing section titles fell back to the sans body font. Only the homepage set this (home-bureau.css). Establish it for every themed page so all headings read as editorial. Since --serif equals --type-display-fam (both Fraunces), this only changes headings that were wrongly sans; already-serif headings are unaffected. */ .theme-bureau h1, .theme-bureau h2, .theme-bureau h3, .theme-bureau h4 { font-family: var(--serif); } .theme-bureau .hero__title, .theme-bureau .product-preview__title, .theme-bureau .measurement-engine__title, .theme-bureau .integrations__title, .theme-bureau .waitlist-title, .theme-bureau .section-band__title, .theme-bureau .page-hero__title, .theme-bureau .feature-row__title, .theme-bureau .pricing__title, .theme-bureau .cta-band__title, .theme-bureau .section__title, .theme-bureau .page-content h1, .theme-bureau .page-content h2, .theme-bureau .reading-shell h1, .theme-bureau .reading-shell h2 { font-weight: 500; letter-spacing: -0.02em; } /* Nudge the most-used content headings up to the Bureau size + tighter leading. */ .theme-bureau .section__title { font-size: clamp(1.95rem, 4vw, 3rem); line-height: 1.06; } .theme-bureau .feature-row__title { font-size: clamp(1.95rem, 3.8vw, 2.85rem); line-height: 1.06; } .theme-bureau .pricing__title { font-size: clamp(2rem, 4.4vw, 3.1rem); line-height: 1.06; } /* Interior running copy (.page-content, used by every reading/legal/methodology page and wrapped by .reading-shell) was 16px; bring it to the Bureau 17px reading size with a more generous line-height. */ .theme-bureau .page-content p, .theme-bureau .page-content ul, .theme-bureau .page-content ol { font-size: 1.0625rem; line-height: 1.7; } .theme-bureau .page-content li { margin: 0.4rem 0; } /* ============================================================================ Editorial polish (added 2026-07-23): site-wide typographic discipline plus opt-in long-form / marketing devices. All lives in this override layer; styles.css stays untouched (DR 0001). Discipline rules apply to every page; device rules (.lede drop cap, .pull-quote) only fire where a page adds the class, so conversion, data-viz, and utility pages are unaffected. ============================================================================ */ /* ---------- Discipline: legibility rendering (site-wide) ---------- */ .theme-bureau { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-kerning: normal; text-rendering: optimizeLegibility; } /* Balance short display lines; keep body copy from orphaning its last word. Both degrade to normal wrapping on browsers that lack text-wrap. */ .theme-bureau h1, .theme-bureau h2, .theme-bureau h3, .theme-bureau .section__title, .theme-bureau .feature-row__title, .theme-bureau .page-hero__title, .theme-bureau .pricing__title, .theme-bureau .cta-band__title { text-wrap: balance; } .theme-bureau p { text-wrap: pretty; } /* Tabular figures wherever numbers sit in columns or must not jitter. */ .theme-bureau .gate-meter, .theme-bureau .channel-meter, .theme-bureau .funnel-meter, .theme-bureau .band-scale, .theme-bureau .pipeline, .theme-bureau .stat-strip, .theme-bureau .status-table, .theme-bureau table, .theme-bureau .paper-list__meta, .theme-bureau .timeline__date, .theme-bureau .last-updated, .theme-bureau .tier-price, .theme-bureau .tier-panel-card__price, .theme-bureau .bp-price, .theme-bureau .p-price { font-variant-numeric: tabular-nums; } /* ---------- Discipline: reading-page hierarchy (h2 > h3 > body) ---------- */ /* styles.css leaves reading-page h3 at 1.0625rem, the same size as body copy, so a subhead and its paragraph read as one undifferentiated block. Restore a clear step: h2 (up to 1.875rem) > h3 (1.3rem) > body (1.0625rem). The whitepaper list titles are sized deliberately, so exclude them. */ .theme-bureau .page-content h3:not(.paper-list__title), .theme-bureau .reading-shell h3:not(.paper-list__title) { font-size: 1.3rem; font-weight: 600; line-height: 1.25; letter-spacing: -0.01em; margin-top: 1.75rem; color: var(--ink); } /* ---------- Device: dateline (reading + legal pages) ---------- */ /* Promote the existing .last-updated line into a proper editorial dateline. */ .theme-bureau .reading-shell .last-updated, .theme-bureau .page-content .last-updated { font-family: var(--mono); font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.14em; color: var(--muted); padding-bottom: 0.85rem; border-bottom: 1px solid var(--hair); } /* ---------- Device: drop cap + standfirst (long-form, opt-in via .lede) ---------- */ .theme-bureau .lede { font-size: 1.1875rem; line-height: 1.65; color: var(--ink); } .theme-bureau .lede::first-letter { float: left; font-family: var(--serif); font-weight: 500; font-size: 3.6em; line-height: 0.78; padding: 0.02em 0.14em 0 0; color: var(--ink); } /* ---------- Device: pull quote (long-form + marketing, opt-in) ---------- */ .theme-bureau .pull-quote { font-family: var(--serif); font-weight: 500; font-size: clamp(1.5rem, 3vw, 2.1rem); line-height: 1.2; letter-spacing: -0.02em; color: var(--ink); margin: 2.5rem 0; padding: 0.1em 0 0.1em 1.1rem; border-left: 3px solid var(--gold); text-wrap: balance; } .theme-bureau .pull-quote cite { display: block; margin-top: 0.7rem; font-family: var(--mono); font-style: normal; font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.14em; color: var(--muted); } /* In the reading grid, the pull quote sits on the wide track. */ .theme-bureau .page-content .pull-quote { grid-column: wide; } /* Marketing band: centered, gold rule above, no left border (no reading grid). */ .theme-bureau .pull-quote--band { max-width: 46rem; margin: 0 auto; padding: clamp(2.5rem, 6vw, 4rem) var(--pad); border-left: 0; text-align: center; } .theme-bureau .pull-quote--band::before { content: ""; display: block; width: 2.5rem; height: 3px; background: var(--gold); margin: 0 auto 1.5rem; } /* ============================================================================ Shared pricing ladder (added 2026-07-23): the homepage pricing UI, extracted to src/components/PricingLadder.astro and reused on /pricing so the two cannot drift. These rules were moved here from home-bureau.css (which loads only on the homepage) so both pages get them site-wide. Prices come from tiers.ts. ============================================================================ */ .theme-bureau .price-group-head { margin-bottom: 1.75rem; } .theme-bureau .price-group-title { font-size: clamp(1.4rem, 2.6vw, 1.9rem); line-height: 1.1; margin-bottom: 0.4rem; } .theme-bureau .price-group-sub { font-size: 0.8rem; letter-spacing: 0.01em; color: var(--muted); } .theme-bureau .price-group-divider { height: 1px; background: var(--hair); margin: clamp(3rem, 6vw, 5rem) 0; } .theme-bureau .price-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; } .theme-bureau .price-card { border: 1px solid var(--hair); border-radius: 18px; padding: 2rem; background: var(--surface); display: flex; flex-direction: column; position: relative; transition: transform 0.24s var(--ease), box-shadow 0.24s var(--ease), border-color 0.24s var(--ease); } .theme-bureau .price-card:hover { transform: translateY(-3px); box-shadow: 0 24px 46px -28px rgba(23, 26, 31, 0.3); border-color: var(--hair-strong); } @media (prefers-reduced-motion: reduce) { .theme-bureau .price-card:hover { transform: none; } } .theme-bureau .price-card.free { background: var(--navy); color: #fff; border-color: var(--navy); } .theme-bureau .price-card.free .p-name, .theme-bureau .price-card.free .p-desc { color: rgba(255, 255, 255, 0.8); } .theme-bureau .price-card.free .p-price .amount { color: #fff; } .theme-bureau .price-card.featured { border-color: var(--gold); border-width: 1.5px; box-shadow: 0 24px 46px -28px rgba(252, 188, 50, 0.5); } .theme-bureau .ribbon { position: absolute; top: -1px; right: 1.6rem; background: var(--gold); color: var(--ink); font-family: var(--mono); font-size: 0.64rem; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 500; padding: 0.4rem 0.8rem; border-radius: 0 0 8px 8px; } .theme-bureau .p-name { font-family: var(--serif); font-size: 1.4rem; font-weight: 500; margin-bottom: 0.9rem; } .theme-bureau .p-price { display: flex; align-items: baseline; gap: 0.35rem; margin-bottom: 1.1rem; font-variant-numeric: tabular-nums; } .theme-bureau .p-price .amount { font-family: var(--serif); font-size: 2.4rem; font-weight: 600; line-height: 1; letter-spacing: -0.02em; } .theme-bureau .p-price .unit { font-family: var(--mono); font-size: 0.8rem; color: var(--muted); } .theme-bureau .price-card.free .p-price .unit { color: rgba(255, 255, 255, 0.72); } .theme-bureau .p-desc { color: var(--muted); font-size: 0.94rem; line-height: 1.55; margin-bottom: 1.6rem; flex: 1; } .theme-bureau .price-card .btn { width: 100%; } .theme-bureau .enterprise-strip { margin-top: 1.5rem; border: 1px solid var(--hair); border-radius: 18px; padding: 1.9rem 2rem; background: var(--surface); display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; } .theme-bureau .enterprise-strip .es-left { display: flex; flex-direction: column; gap: 0.35rem; } .theme-bureau .enterprise-strip .es-name { font-family: var(--serif); font-size: 1.35rem; font-weight: 500; } .theme-bureau .enterprise-strip .es-desc { color: var(--muted); font-size: 0.94rem; max-width: 58ch; } .theme-bureau .enterprise-strip .es-right { display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap; } .theme-bureau .enterprise-strip .es-price { font-family: var(--mono); font-weight: 500; font-size: 0.88rem; } @media (max-width: 960px) { .theme-bureau .price-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 600px) { .theme-bureau .price-grid { grid-template-columns: 1fr; } .theme-bureau .enterprise-strip { flex-direction: column; align-items: flex-start; } } /* Per-tier advantage checklist (shown on /pricing via PricingLadder showInsights). Items come from each tier's features in tiers.ts. The list is the flexible filler so CTAs stay bottom-aligned across cards of unequal content. */ .theme-bureau .price-card:has(.tier-insights) .p-desc { flex: 0 0 auto; } .theme-bureau .tier-insights { list-style: none; margin: 0.2rem 0 1.6rem; padding: 1.15rem 0 0; border-top: 1px dashed var(--hair-strong); display: grid; gap: 0.62rem; flex: 1 1 auto; } .theme-bureau .tier-insights li { position: relative; padding-left: 1.65rem; font-size: 0.9rem; line-height: 1.4; color: var(--ink); } .theme-bureau .tier-insights li::before { content: ""; position: absolute; left: 0; top: 0.12em; width: 1.05rem; height: 1.05rem; border-radius: 50%; background: var(--teal); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center / 0.62rem no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center / 0.62rem no-repeat; } /* Dark free card variant keeps the list readable. */ .theme-bureau .price-card.free .tier-insights { border-top-color: rgba(255, 255, 255, 0.25); } .theme-bureau .price-card.free .tier-insights li { color: rgba(255, 255, 255, 0.85); }