/* GovBid AI · Editorial GovCon Design System */
/* Bloomberg Businessweek × GAO report × instrument panel */
/* Phase 2H+ Lighthouse fix: render-blocking @import removed.
Fonts load via +
in each apex HTML · see _font-link.html for the canonical block.
Trimmed weights: only 400/500/600/700 are actually used (no 800/900).
Dropped Instrument Serif + Newsreader (unused in compiled JSX). */
:root {
/* Paper & ink */
--cream: #fafaf7;
--cream-2: #f1efe8;
--cream-3: #e6e3d8;
--paper: #ffffff;
--navy: #14233d;
--navy-2: #1c2f4d;
--navy-3: #2c3e5e;
--navy-soft: #4a5a78;
--ink: #14233d;
--ink-soft: #3a4860;
--ink-mute: #5a6478; /* WCAG AA fix 2026-05-16: was #6b7689 (3.98:1 on cream FAIL); now 4.95:1 PASS */
--rule: #d8d4c8;
--rule-soft: #e6e3d8;
--amber: #e8a317;
--amber-deep: #8c5e00; /* Phase 2H+ A2 a11y fix: was #c98a0a (2.82:1 fail on cream); now 5.40:1 pass AA */
--amber-tint: #f4d488;
--amber-wash: #fbf3df; /* very pale amber backdrop · handoff token */
--doc-paper: #fdfbf5; /* doc surface · handoff token */
--paper: #ffffff; /* paper · handoff token */
--moss: #4a6741; /* status moss · handoff token */
--oxblood: #8a2a2a; /* status oxblood · handoff token */
--status-compliant: #4a6741;
--status-warn: #c98a0a;
--status-miss: #8a2a2a;
--status-draft: #4a5a78;
--bg: var(--cream);
--ink-faint: var(--ink-mute);
--oxblood: #8a2a2a;
--moss: #4a6741;
/* Functional palette · for product UI use too */
--status-compliant: #4a6741;
--status-warn: #c98a0a;
--status-miss: #8a2a2a;
--status-draft: #4a5a78;
/* Working type ramp · long-form reading metrics */
--doc-paper: #fdfbf5;
--doc-text-size: 16px;
--doc-line-height: 1.65;
--doc-measure: 68ch;
/* Type stack */
--serif: 'Fraunces', 'Newsreader', Georgia, serif;
--serif-italic: 'Fraunces', 'Instrument Serif', Georgia, serif;
--sans: 'Inter', -apple-system, system-ui, sans-serif;
--mono: 'JetBrains Mono', 'SF Mono', Menlo, monospace;
/* Scale */
--container: 1280px;
--container-wide: 1440px;
--container-narrow: 920px;
}
/* C19 dark mode 2026-05-05 ────────────────────────────────────────────
Inverted editorial palette. Activated via [data-theme="dark"] on
(set by inline-script.js before paint to avoid FOUC) or via prefers-
color-scheme: dark when no explicit choice has been made.
──────────────────────────────────────────────────────────────────── */
[data-theme="dark"] {
--cream: #0f1319; /* was #fafaf7 · page bg */
--cream-2: #161b22; /* was #f1efe8 · recessed bg */
--cream-3: #1d232c; /* was #e6e3d8 · card bg */
--paper: #11161c; /* was #ffffff · surface */
--navy: #d8e1f0; /* was #14233d · used as headings/accent in dark */
--navy-2: #c2cee3;
--navy-3: #a6b3cb;
--navy-soft: #8593b0;
--ink: #e8edf5; /* body text */
--ink-soft: #b6c1d4; /* secondary text */
--ink-mute: #8a93a6; /* muted captions */
/* WCAG 2.1 AA fix 2026-05-05: --rule #2d343f was 1.49:1 on cream
(FAIL 1.4.11 non-text contrast 3:1). #5a6478 is now 3.21:1 PASS. */
--rule: #5a6478; /* primary borders · 3.13:1 on cream PASS AA UI */
--rule-soft: #4a5363; /* hairline borders · 2.50:1 (decorative-only per WCAG 1.4.11 exception for hairline dividers) */
--amber: #f0b743; /* slightly brighter on dark */
--amber-deep: #f0b743; /* legible on dark · replaces 5.4:1 on cream */
--amber-tint: #5a4308; /* deepened tint for dark backgrounds */
--oxblood: #d96d6d; /* status-miss text-readable on dark */
--moss: #8fb682; /* status-compliant text-readable on dark */
--status-compliant: #8fb682;
--status-warn: #f0b743;
--status-miss: #d96d6d;
--status-draft: #a6b3cb;
--doc-paper: #131820; /* document body */
/* Subtle paper grain disabled in dark · too noisy on near-black */
color-scheme: dark;
}
/* WCAG 2.1 AA fix 2026-05-05 (extended 2026-05-16): amber CTA buttons
need dark text in BOTH light AND dark mode (amber stays bright in
both). Inverting --ink to light in dark mode would put light text on
light amber = 1.55:1 FAIL. Override via descendant selectors so any
element with explicit `var(--amber)` or amber background carries
proper contrast. Covers all three dark-mode triggers: html.dark,
data-theme="dark", and prefers-color-scheme: dark. */
[data-theme="dark"] .btn-amber,
[data-theme="dark"] [style*="background: var(--amber)"],
[data-theme="dark"] [style*="background:var(--amber)"],
html.dark .btn-amber,
html.dark [style*="background: var(--amber)"],
html.dark [style*="background:var(--amber)"] {
color: #0f1319 !important;
}
@media (prefers-color-scheme: dark) {
html:not([data-theme="light"]) .btn-amber,
html:not([data-theme="light"]) [style*="background: var(--amber)"],
html:not([data-theme="light"]) [style*="background:var(--amber)"] {
color: #0f1319 !important;
}
}
/* Navy-bg sections: inline `background: var(--navy)` was designed for
dark navy editorial bands (cream text on dark navy). In dark mode
--navy flips to #d8e1f0 (light) so the bg goes light → text inside
(amber, cream, or navy) all fail. Pin navy-bg containers AND re-pin
all relevant tokens inside them to their LIGHT-mode values so existing
CSS (`color: var(--cream)` etc) resolves to cream/amber as designed. */
[data-theme="dark"] [style*="background: var(--navy)"],
[data-theme="dark"] [style*="background:var(--navy)"],
html.dark [style*="background: var(--navy)"],
html.dark [style*="background:var(--navy)"] {
background: #14233d !important;
--cream: #fafaf7;
--cream-2: #f1efe6;
--cream-3: #e6e3d8;
--paper: #ffffff;
--navy: #14233d;
--amber: #e8a317;
--amber-deep: #8c5e00;
--amber-tint: #f4d488;
--ink: #14233d;
--ink-soft: #3a4860;
}
@media (prefers-color-scheme: dark) {
html:not([data-theme="light"]) [style*="background: var(--navy)"],
html:not([data-theme="light"]) [style*="background:var(--navy)"] {
background: #14233d !important;
--cream: #fafaf7;
--cream-2: #f1efe6;
--cream-3: #e6e3d8;
--paper: #ffffff;
--navy: #14233d;
--amber: #e8a317;
--amber-deep: #8c5e00;
--amber-tint: #f4d488;
--ink: #14233d;
--ink-soft: #3a4860;
}
}
/* Inline `color: var(--navy)` text in the footer · gb-footer keeps a
hardcoded #14233d navy bg in BOTH modes. In dark mode --navy flips
to #d8e1f0 (light) but the footer bg stays dark; so any inline
`color: var(--navy)` inside the footer paints dark-on-dark. Pin to
cream so text stays legible against the always-navy footer. */
[data-theme="dark"] .gb-footer [style*="color: var(--navy)"],
[data-theme="dark"] .gb-footer [style*="color:var(--navy)"],
html.dark .gb-footer [style*="color: var(--navy)"],
html.dark .gb-footer [style*="color:var(--navy)"] {
color: #f1efe8 !important;
}
@media (prefers-color-scheme: dark) {
html:not([data-theme="light"]) .gb-footer [style*="color: var(--navy)"],
html:not([data-theme="light"]) .gb-footer [style*="color:var(--navy)"] {
color: #f1efe8 !important;
}
}
/* Auto-honor system preference when user hasn't explicitly picked */
@media (prefers-color-scheme: dark) {
html:not([data-theme="light"]) {
--cream: #0f1319;
--cream-2: #161b22;
--cream-3: #1d232c;
--paper: #11161c;
--navy: #d8e1f0;
--navy-2: #c2cee3;
--navy-3: #a6b3cb;
--navy-soft: #8593b0;
--ink: #e8edf5;
--ink-soft: #b6c1d4;
--ink-mute: #8a93a6;
--rule: #2d343f;
--rule-soft: #1f242d;
--amber: #f0b743;
--amber-deep: #f0b743;
--amber-tint: #5a4308;
--oxblood: #d96d6d;
--moss: #8fb682;
--status-compliant: #8fb682;
--status-warn: #f0b743;
--status-miss: #d96d6d;
--status-draft: #a6b3cb;
--doc-paper: #131820;
color-scheme: dark;
}
}
/* In dark mode the cream paper-grain ::before texture reads as dirty
noise · suppress it, keep it on light. */
[data-theme="dark"] body::before { display: none; }
@media (prefers-color-scheme: dark) {
html:not([data-theme="light"]) body::before { display: none; }
}
/* Theme toggle button · small, mono, slots into the editorial nav */
.theme-toggle {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 4px 10px;
background: transparent;
border: 1px solid var(--rule);
border-radius: 0;
color: var(--ink-soft);
font-family: var(--mono);
font-size: 11px;
letter-spacing: 0.1em;
text-transform: uppercase;
cursor: pointer;
transition: color 120ms, border-color 120ms;
}
.theme-toggle:hover { color: var(--amber-deep); border-color: var(--amber-deep); }
.theme-toggle .theme-toggle-icon { font-size: 13px; line-height: 1; }
*, *::before, *::after { box-sizing: border-box; }
html, body {
margin: 0;
padding: 0;
background: var(--cream);
color: var(--ink);
font-family: var(--sans);
font-size: 16px;
line-height: 1.5;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
/* C17 cross-browser fix 2026-05-05: marginalia annotations intentionally extend
past main grid; clip at viewport edge to prevent horizontal scroll on
monitors narrower than the 1920px design target (e.g. 1440px laptops). */
overflow-x: clip;
}
/* Subtle paper grain */
body::before {
content: '';
position: fixed;
inset: 0;
pointer-events: none;
z-index: 1;
opacity: 0.4;
background-image:
radial-gradient(circle at 20% 30%, rgba(20, 35, 61, 0.015) 0%, transparent 40%),
radial-gradient(circle at 80% 70%, rgba(20, 35, 61, 0.015) 0%, transparent 40%);
mix-blend-mode: multiply;
}
a { color: inherit; text-decoration: none; }
/* ================== TYPE ================== */
.eyebrow {
font-family: var(--mono);
font-size: 11px;
font-weight: 500;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--ink-soft);
display: flex;
align-items: baseline;
justify-content: space-between;
padding: 24px 0 12px;
border-top: 1px solid var(--navy);
}
.eyebrow-amber {
font-family: var(--mono);
font-size: 11px;
font-weight: 500;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--amber-deep);
}
.smallcaps {
font-family: var(--sans);
font-size: 11px;
font-weight: 600;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--ink-soft);
}
.mono { font-family: var(--mono); }
.serif-display {
font-family: var(--serif);
font-weight: 400;
letter-spacing: -0.02em;
line-height: 0.96;
font-variation-settings: "opsz" 144;
}
.italic-amber {
font-style: italic;
color: var(--amber-deep);
font-variation-settings: "opsz" 144;
}
/* ================== LAYOUT ================== */
.container {
max-width: var(--container);
margin: 0 auto;
padding: 0 32px;
position: relative;
z-index: 2;
}
.container-wide {
max-width: var(--container-wide);
margin: 0 auto;
padding: 0 32px;
position: relative;
z-index: 2;
}
.container-narrow {
max-width: var(--container-narrow);
margin: 0 auto;
padding: 0 32px;
position: relative;
z-index: 2;
}
.rule {
border: 0;
border-top: 1px solid var(--rule);
margin: 0;
}
.rule-thin {
border: 0;
border-top: 1px solid var(--rule-soft);
margin: 0;
}
.rule-double {
border: 0;
border-top: 3px double var(--rule);
margin: 0;
}
/* ================== NAV ================== */
.gb-nav {
position: sticky;
top: 0;
z-index: 100;
background: var(--cream);
border-bottom: 1px solid var(--rule);
}
.gb-nav-inner {
max-width: var(--container-wide);
margin: 0 auto;
padding: 16px 32px;
display: flex;
align-items: center;
gap: 40px;
}
.gb-mark {
font-family: var(--serif);
font-size: 22px;
font-weight: 600;
letter-spacing: -0.02em;
color: var(--navy);
display: flex;
align-items: baseline;
gap: 8px;
}
.gb-mark-dot {
width: 8px;
height: 8px;
background: var(--amber);
border-radius: 50%;
display: inline-block;
align-self: center;
}
.gb-mark em {
font-style: italic;
color: var(--amber-deep);
font-variation-settings: "opsz" 144;
}
.gb-nav-links {
display: flex;
gap: 28px;
font-size: 14px;
font-weight: 500;
color: var(--ink-soft);
}
.gb-nav-links a {
position: relative;
padding: 6px 0;
transition: color 0.15s;
}
.gb-nav-links a:hover { color: var(--navy); }
.gb-nav-links a.active {
color: var(--navy);
}
.gb-nav-links a.active::after {
content: '';
position: absolute;
left: 0;
right: 0;
bottom: -1px;
height: 2px;
background: var(--amber);
}
.gb-nav-spacer { flex: 1; }
.gb-nav-cta {
display: flex;
align-items: center;
gap: 16px;
font-size: 14px;
}
/* ================== BUTTONS ================== */
.btn {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 12px 22px;
font-family: var(--sans);
font-size: 14px;
font-weight: 500;
letter-spacing: 0.01em;
border: 1px solid var(--navy);
background: var(--navy);
color: var(--cream);
cursor: pointer;
transition: all 0.15s;
border-radius: 0;
white-space: nowrap;
}
.btn:hover { background: var(--navy-2); }
.btn-amber {
background: var(--amber);
border-color: var(--amber);
color: var(--navy);
font-weight: 600;
}
.btn-amber:hover {
background: var(--amber-deep);
border-color: var(--amber-deep);
}
.btn-ghost {
background: transparent;
color: var(--navy);
}
.btn-ghost:hover {
background: var(--navy);
color: var(--cream);
}
.btn-link {
background: transparent;
border: 0;
color: var(--navy);
padding: 0;
font-weight: 500;
border-bottom: 1px solid var(--navy);
border-radius: 0;
}
.btn-link:hover {
color: var(--amber-deep);
border-bottom-color: var(--amber-deep);
}
.btn-arrow::after {
content: '→';
font-family: var(--serif);
transition: transform 0.15s;
}
.btn-arrow:hover::after { transform: translateX(3px); }
/* ================== INSTITUTIONAL CHIP ================== */
.inst-chip {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 4px 10px;
border: 1px solid var(--rule);
background: var(--paper);
font-family: var(--mono);
font-size: 11px;
font-weight: 500;
color: var(--ink-soft);
letter-spacing: 0.02em;
}
.inst-chip-label {
color: var(--ink-mute);
font-size: 10px;
letter-spacing: 0.1em;
text-transform: uppercase;
}
.inst-chip strong {
color: var(--navy);
font-weight: 600;
}
/* ================== TRUST BAR ================== */
.trust-bar {
background: var(--paper);
border-bottom: 1px solid var(--rule);
}
.trust-bar-inner {
max-width: var(--container-wide);
margin: 0 auto;
padding: 12px 32px;
display: flex;
align-items: center;
gap: 24px;
flex-wrap: nowrap;
overflow-x: auto;
font-family: var(--mono);
font-size: 11px;
letter-spacing: 0.04em;
color: var(--ink-soft);
white-space: nowrap;
}
.trust-item {
display: flex;
align-items: baseline;
gap: 8px;
}
.trust-item-label {
font-size: 10px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--ink-mute);
}
.trust-item-value {
color: var(--navy);
font-weight: 600;
}
.trust-divider {
width: 1px;
height: 12px;
background: var(--rule);
}
/* ================== FOOTER ================== */
.gb-footer {
/* GBA-A11Y-001: pinned to literal hex so the navy ground stays consistent
in light AND dark mode. */
background: #14233d;
color: #f1efe8;
padding: 0;
margin-top: 120px;
position: relative;
z-index: 2;
}
/* === Top hero band: brand + newsletter signup === */
.gb-footer-hero {
border-bottom: 1px solid rgba(243, 236, 217, 0.10);
}
.gb-footer-hero-grid {
max-width: var(--container-wide);
margin: 0 auto;
padding: 80px 32px 64px;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 96px;
align-items: start;
}
.gb-footer-newsletter {
border-left: 1px solid rgba(243, 236, 217, 0.12);
padding-left: 56px;
}
.gb-footer-mark {
font-family: var(--serif);
font-size: 56px;
font-weight: 500;
color: #fafaf7;
margin: 0 0 24px;
letter-spacing: -0.025em;
line-height: 1;
font-variation-settings: "opsz" 144;
}
.gb-footer-mark em {
font-style: italic;
color: #e8a317;
}
.gb-footer-blurb {
font-family: var(--serif);
font-size: 18px;
font-style: italic;
line-height: 1.5;
color: #f1efe8;
opacity: 0.78;
max-width: 460px;
margin: 0;
}
.gb-footer-subscribe {
display: flex;
gap: 0;
align-items: stretch;
max-width: 460px;
position: relative;
}
.gb-footer-subscribe input[type="email"] {
flex: 1 1 auto;
min-width: 0;
padding: 14px 16px;
background: transparent;
border: 1px solid rgba(243, 236, 217, 0.25);
border-right: none;
color: #fafaf7;
font-family: var(--mono);
font-size: 13px;
outline: none;
letter-spacing: 0.02em;
}
.gb-footer-subscribe input[type="email"]::placeholder {
color: rgba(241, 239, 232, 0.4);
}
.gb-footer-subscribe input[type="email"]:focus {
border-color: #f4d488;
}
.gb-footer-subscribe button {
padding: 14px 22px !important;
font-size: 12px !important;
}
/* === Middle band: 6 equal-width link columns === */
.gb-footer-cols {
max-width: var(--container-wide);
margin: 0 auto;
padding: 64px 32px 48px;
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 40px;
}
.gb-footer h3, .gb-footer h4 {
font-family: var(--mono);
font-size: 10px;
font-weight: 600;
letter-spacing: 0.18em;
text-transform: uppercase;
color: #f4d488;
margin: 0 0 20px;
}
.gb-footer ul {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 12px;
font-size: 13.5px;
}
.gb-footer ul a {
color: #f1efe8;
opacity: 0.72;
transition: opacity 0.15s, color 0.15s;
text-decoration: none;
line-height: 1.4;
}
.gb-footer ul a:hover {
opacity: 1;
color: #f4d488;
}
/* === Bottom utility row === */
.gb-footer-bottom {
max-width: var(--container-wide);
margin: 0 auto;
padding: 22px 32px 36px;
border-top: 1px solid rgba(243, 236, 217, 0.10);
display: flex;
justify-content: space-between;
align-items: center;
gap: 24px;
flex-wrap: wrap;
font-family: var(--mono);
font-size: 11px;
color: rgba(241, 239, 232, 0.55);
letter-spacing: 0.02em;
}
.gb-footer-bottom-left {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 14px;
}
.gb-footer-bottom-right {
display: flex;
align-items: center;
gap: 28px;
}
.gb-footer-bottom-divider {
opacity: 0.35;
}
.gb-footer-bottom a {
color: inherit;
text-decoration: none;
border-bottom: 1px solid transparent;
transition: color 0.15s, border-color 0.15s;
}
.gb-footer-bottom a:hover {
color: #f4d488;
border-bottom-color: #f4d488;
}
.gb-footer-social {
display: inline-flex;
gap: 14px;
align-items: center;
}
.gb-footer-social a {
color: rgba(241, 239, 232, 0.55);
display: inline-flex;
border-bottom: none !important;
transition: color 0.15s;
}
.gb-footer-social a:hover {
color: #f4d488;
}
.itc-mark {
display: inline-flex;
align-items: center;
gap: 8px;
font-family: var(--mono);
font-size: 10px;
letter-spacing: 0.12em;
text-transform: uppercase;
}
.itc-mark-dot {
width: 16px;
height: 16px;
border: 1px solid currentColor;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 8px;
font-weight: 700;
}
/* ================== SECTION HEADERS ================== */
.section-head {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 32px;
padding-bottom: 18px;
border-bottom: 1px solid var(--rule);
margin-bottom: 56px;
}
.section-head-num {
font-family: var(--mono);
font-size: 11px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--ink-mute);
}
.section-head-title {
font-family: var(--serif);
font-size: 18px;
font-weight: 500;
font-style: italic;
color: var(--navy);
font-variation-settings: "opsz" 144;
}
/* ================== UTILITIES ================== */
.section { padding: 96px 0; position: relative; z-index: 2; }
.section-sm { padding: 64px 0; position: relative; z-index: 2; }
.section-lg { padding: 128px 0; position: relative; z-index: 2; }
.dotted-rule {
border: 0;
border-top: 1px dotted var(--rule);
margin: 0;
}
.bg-paper { background: var(--paper); }
.bg-cream2 { background: var(--cream-2); }
.bg-navy { background: var(--navy); color: var(--cream); }
.text-mute { color: var(--ink-mute); }
.text-amber { color: var(--amber-deep); }
.text-navy { color: var(--navy); }
/* Tweaks panel positioning override */
.tweaks-panel-host {
font-family: var(--sans) !important;
}
/* No-fancy serif for big numerals */
.tabular { font-variant-numeric: tabular-nums; }
/* ================== EDITORIAL PHOTOGRAPHY ================== */
/* Duotone treatment · navy shadows, amber highlights · applied to all photos
for a unified editorial feel. Approximates Bloomberg / FT photo treatment. */
.photo-duotone {
position: relative;
display: block;
overflow: hidden;
background: var(--navy);
}
.photo-duotone img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
filter: grayscale(1) contrast(1.05) brightness(0.95);
mix-blend-mode: luminosity;
opacity: 0.92;
}
.photo-duotone::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(20,35,61,0.55) 0%, rgba(20,35,61,0.85) 100%);
mix-blend-mode: multiply;
pointer-events: none;
z-index: 1;
}
.photo-duotone::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(232,163,23,0.18) 0%, rgba(232,163,23,0) 60%);
mix-blend-mode: screen;
pointer-events: none;
z-index: 2;
}
.photo-frame {
position: relative;
border: 1px solid var(--rule);
background: var(--navy);
}
.photo-caption {
font-family: var(--mono);
font-size: 11px;
color: var(--ink-mute);
letter-spacing: 0.06em;
margin-top: 10px;
display: flex;
align-items: baseline;
gap: 10px;
}
.photo-caption-num {
color: var(--amber-deep);
font-weight: 600;
letter-spacing: 0.16em;
}
/* Frame markers (corner ticks) */
.photo-ticks {
position: absolute;
inset: 8px;
pointer-events: none;
z-index: 3;
}
.photo-ticks::before,
.photo-ticks::after {
content: '';
position: absolute;
width: 18px;
height: 18px;
border: 1px solid var(--amber);
opacity: 0.85;
}
.photo-ticks::before {
top: 0; left: 0;
border-right: 0;
border-bottom: 0;
}
.photo-ticks::after {
bottom: 0; right: 0;
border-left: 0;
border-top: 0;
}
/* Marker / pen-feel SVG style */
.ink-stroke {
stroke: var(--navy);
fill: none;
stroke-width: 1.4;
stroke-linecap: round;
stroke-linejoin: round;
}
.ink-stroke-amber {
stroke: var(--amber-deep);
fill: none;
stroke-width: 1.6;
stroke-linecap: round;
stroke-linejoin: round;
}
.ink-fill { fill: var(--navy); }
.ink-fill-amber { fill: var(--amber-deep); }
/* Annotation arrows / labels */
.annot-label {
font-family: var(--mono);
font-size: 10px;
letter-spacing: 0.08em;
text-transform: uppercase;
fill: var(--ink-soft);
}
.annot-label-amber {
font-family: var(--mono);
font-size: 10px;
letter-spacing: 0.08em;
text-transform: uppercase;
fill: var(--amber-deep);
font-weight: 600;
}
/* Tweaks panel · match editorial design */
.tweaks-panel-host * {
font-family: var(--sans);
}
/* ========================================================================
MOBILE RESPONSIVE (Phase 2H+ · 2026-05-04)
Apex marketing site: shrink padding, stack nav links, collapse footer
grid, drop section paddings on phones.
======================================================================== */
@media (max-width: 900px) {
:root { --doc-text-size: 15px; }
body { overflow-x: hidden; }
.container, .container-wide, .container-narrow {
padding: 0 18px;
}
/* Nav · collapse links on mobile, keep mark + CTA */
.gb-nav-inner {
padding: 12px 18px;
gap: 12px;
}
.gb-nav-links {
display: none;
}
.gb-nav-cta {
margin-left: auto;
gap: 10px;
font-size: 13px;
}
.gb-nav-cta .btn-link { display: none; }
.gb-mark { font-size: 18px; }
/* Section padding scaled down */
.section { padding: 56px 0; }
.section-sm { padding: 36px 0; }
.section-lg { padding: 72px 0; }
/* Footer hero / cols collapse for tablets */
.gb-footer-hero-grid {
grid-template-columns: 1fr !important;
gap: 48px !important;
padding: 56px 18px 40px !important;
}
.gb-footer-newsletter {
border-left: none;
border-top: 1px solid rgba(243, 236, 217, 0.12);
padding-left: 0;
padding-top: 36px;
}
.gb-footer-mark { font-size: 44px !important; }
.gb-footer-cols {
grid-template-columns: 1fr 1fr 1fr !important;
gap: 32px 24px !important;
padding: 48px 18px 32px !important;
}
.gb-footer-bottom {
flex-direction: column;
align-items: flex-start;
gap: 16px;
padding: 20px 18px 28px !important;
}
.gb-footer-bottom-left {
gap: 8px 12px;
}
.gb-footer-bottom-divider { display: none; }
/* Headings scaled down */
h1 { font-size: clamp(34px, 8vw, 56px) !important; line-height: 1.05 !important; }
h2 { font-size: clamp(26px, 6vw, 40px) !important; line-height: 1.1 !important; }
h3 { font-size: clamp(20px, 5vw, 28px) !important; }
/* Generic 2/3/4-col layouts collapse */
.grid-2, .grid-3, .grid-4,
[style*="grid-template-columns"] {
grid-template-columns: 1fr !important;
gap: 18px !important;
}
/* Trust bar wrap */
.trust-bar-inner { flex-wrap: wrap; gap: 14px; padding: 18px 0; }
.trust-divider { display: none; }
/* Tables */
table { display: block; overflow-x: auto; max-width: 100%; }
/* Section head */
.section-head { gap: 12px; }
.section-head-title { font-size: clamp(22px, 5.5vw, 36px) !important; }
/* Buttons full-width on phones */
.btn, .btn-amber, .btn-ghost {
padding: 12px 18px;
font-size: 14px;
}
.btn-arrow { white-space: nowrap; }
/* Photos */
.photo-frame, .photo-duotone { max-width: 100%; }
/* Tweaks panel hidden on mobile (it's a desktop-only utility) */
.tweaks-panel-host { display: none !important; }
}
@media (max-width: 480px) {
.container, .container-wide, .container-narrow { padding: 0 14px; }
.gb-nav-inner { padding: 10px 14px; }
.gb-nav-cta { font-size: 12px; gap: 8px; }
.section { padding: 44px 0; }
.section-sm { padding: 28px 0; }
h1 { font-size: clamp(28px, 8vw, 40px) !important; }
h2 { font-size: clamp(22px, 6vw, 32px) !important; }
.gb-footer-cols {
grid-template-columns: 1fr 1fr !important;
gap: 28px 18px !important;
}
.gb-footer-mark { font-size: 36px !important; }
.btn { padding: 11px 16px; font-size: 13px; }
}
/* MAJ-38 (audit v3 2026-05-07): hero card margin notation gets clipped on
screens narrower than ~1280px because the absolute-positioned annotation
sits past the viewport edge. Hide on those screens; the notation is a
nice-to-have flourish, not load-bearing copy. */
@media (max-width: 1279px) {
.hero-card-marginalia { display: none; }
}
/* ================== HOME REFINEMENT · 2026-05-17 ==================
Additions for the home-page finishing pass: full-bleed plate section,
promoted section H2 register, founder mini-card, footer hero meta strip.
No existing tokens or selectors changed. Drop-in additive only. */
/* Full-bleed editorial plate · 21:9 photograph that escapes container-wide
and bleeds to viewport edges. Caption sits in the wide container below.
The photo-frame keeps its corner ticks; top/bottom borders are dropped
so the plate reads as a true bleed. */
.bleed-plate {
position: relative;
margin: 0;
padding: 80px 0 56px;
background: var(--cream);
}
.bleed-plate.bleed-plate-paper { background: var(--paper); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.bleed-plate .photo-frame {
width: 100%;
border-left: 0;
border-right: 0;
border-top: 1px solid var(--rule);
border-bottom: 1px solid var(--rule);
}
.bleed-plate-eyebrow {
max-width: var(--container-wide);
margin: 0 auto 22px;
padding: 0 32px;
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 24px;
}
.bleed-plate-caption {
max-width: var(--container-wide);
margin: 20px auto 0;
padding: 0 32px;
display: flex;
align-items: baseline;
gap: 16px;
}
.bleed-plate-caption .plate-num {
font-family: var(--mono);
font-size: 11px;
font-weight: 600;
letter-spacing: 0.16em;
color: var(--amber-deep);
flex-shrink: 0;
}
.bleed-plate-caption .plate-rule {
flex-shrink: 0;
width: 56px;
height: 1px;
background: var(--rule);
align-self: center;
}
.bleed-plate-caption .plate-text {
font-family: var(--serif);
font-style: italic;
font-size: 18px;
line-height: 1.45;
color: var(--ink-soft);
max-width: 680px;
font-variation-settings: "opsz" 96;
}
/* Thin editorial strip · ~21:6, between sections, single-row photo
without the heavy plate apparatus. */
.bleed-strip {
background: var(--cream);
padding: 56px 0 56px;
}
.bleed-strip .photo-frame {
width: 100%;
border-left: 0;
border-right: 0;
border-top: 1px solid var(--rule);
border-bottom: 1px solid var(--rule);
aspect-ratio: 21 / 6;
}
.bleed-strip-caption {
max-width: var(--container-wide);
margin: 16px auto 0;
padding: 0 32px;
font-family: var(--mono);
font-size: 10px;
letter-spacing: 0.16em;
color: var(--ink-mute);
text-transform: uppercase;
}
.bleed-strip-caption .amber { color: var(--amber-deep); margin-right: 12px; }
/* Promoted section H2 · the real headline of a section, sits below the
thin section-head meta strip. Reference: features FeatureBlock H2.
Pinned to 400 weight to fix the chunkiness Fraunces shows at default
browser bold (700). */
.section-h2 {
font-family: var(--serif);
font-size: 48px;
font-weight: 400;
line-height: 1.06;
letter-spacing: -0.022em;
color: var(--navy);
font-variation-settings: "opsz" 144;
text-wrap: balance;
margin: 0 0 20px;
max-width: 880px;
}
.section-h2 em {
font-style: italic;
color: var(--amber-deep);
font-variation-settings: "opsz" 144;
}
.section-h2-sub {
font-family: var(--serif);
font-style: italic;
font-size: 22px;
line-height: 1.4;
color: var(--amber-deep);
margin: 0 0 32px;
max-width: 720px;
font-variation-settings: "opsz" 96;
font-weight: 400;
}
/* Founder mini-card · the "ask the founder" anchor inside the Diligence
sticky intro. Small portrait + name + title + role line. */
.founder-card {
display: flex;
gap: 16px;
align-items: flex-start;
padding: 24px 0 0;
margin-top: 24px;
border-top: 1px solid var(--rule);
}
.founder-card-photo {
flex-shrink: 0;
width: 72px;
height: 88px;
position: relative;
border: 1px solid var(--rule);
background: var(--navy);
overflow: hidden;
}
.founder-card-photo .photo-duotone { position: absolute; inset: 0; }
.founder-card-meta { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.founder-card-name {
font-family: var(--serif);
font-size: 16px;
font-weight: 500;
color: var(--navy);
letter-spacing: -0.01em;
font-variation-settings: "opsz" 96;
}
.founder-card-role {
font-family: var(--mono);
font-size: 10px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--ink-mute);
}
.founder-card-quote {
font-family: var(--serif);
font-style: italic;
font-size: 13.5px;
line-height: 1.45;
color: var(--ink-soft);
margin: 6px 0 0;
text-wrap: pretty;
}
/* Footer hero meta strip · sits under the wordmark/blurb to balance the
newsletter card's visual weight on the opposite side. */
.gb-footer-meta {
margin-top: 28px;
padding-top: 18px;
border-top: 1px solid rgba(243, 236, 217, 0.12);
display: flex;
flex-direction: column;
gap: 8px;
font-family: var(--mono);
font-size: 10px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: rgba(241, 239, 232, 0.55);
}
.gb-footer-meta-row {
display: flex;
align-items: baseline;
gap: 12px;
}
.gb-footer-meta-row .gb-footer-meta-label { color: #f4d488; min-width: 88px; }
.gb-footer-meta-row .gb-footer-meta-value { color: rgba(241, 239, 232, 0.78); letter-spacing: 0.06em; text-transform: none; font-size: 12px; font-family: var(--serif); font-style: italic; }
/* Newsletter footer · cadence note under the form, mirrors brand-side blurb */
.gb-footer-newsletter-cadence {
margin-top: 18px;
font-family: var(--mono);
font-size: 10px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: rgba(241, 239, 232, 0.45);
display: flex;
align-items: baseline;
gap: 10px;
}
.gb-footer-newsletter-cadence .amber { color: #f4d488; }
/* Mechanics navy band · increase padding rhythm so the median 8:00 metric
gets the breathing room it earned. */
.median-band {
margin-top: 64px;
padding: 44px 48px;
background: var(--navy);
color: var(--cream);
display: grid;
grid-template-columns: 1fr auto;
gap: 32px;
align-items: center;
border: 1px solid var(--navy);
}
.median-band-num {
font-family: var(--serif);
font-size: 56px;
line-height: 1;
font-weight: 400;
font-variation-settings: "opsz" 144;
letter-spacing: -0.025em;
color: var(--cream);
}
.median-band-num em {
font-style: italic;
color: var(--amber-tint);
font-size: 22px;
margin-left: 12px;
letter-spacing: 0;
}
@media (max-width: 900px) {
.bleed-plate { padding: 48px 0 32px; }
.bleed-strip { padding: 32px 0; }
.bleed-strip .photo-frame { aspect-ratio: 21 / 9; }
.section-h2 { font-size: clamp(28px, 6vw, 40px) !important; line-height: 1.08 !important; }
.section-h2-sub { font-size: 18px !important; }
.median-band { grid-template-columns: 1fr !important; padding: 32px 24px !important; }
.median-band-num { font-size: 40px !important; }
.gb-footer-meta { margin-top: 20px; padding-top: 16px; }
}
/* MAJ-36 (audit v3 2026-05-07): pages were ending with multiple full
viewports of empty cream/navy alternating space below the footer. Clamp
the body and footer so nothing extends past the footer's natural end. */
body { min-height: 100vh; }
.gb-footer { margin-bottom: 0 !important; }
.gb-footer + * { display: none; }