/* ════════════════════════════════════════════════════════════
VARIANT D THEME — geometric light, Geist, hairlines
Shared across all Navedas Intelligence pages.
Loaded as
from each page's AFTER the existing CSS so it wins.
═════════════════════════════════════════════════════════════ */
:root {
--vd-bg: #FFFFFF;
--vd-bg-tint: #FAFAFA;
--vd-ink: #0A0A0A;
--vd-ink-soft: #525252;
--vd-ink-faint: #A3A3A3;
--vd-line: #E5E5E5;
--vd-line-strong: #D4D4D4;
}
/* ── Body + global typography ───────────────────────────────── */
html body,
html body *,
html body p, html body span, html body a, html body div, html body button,
html body input, html body textarea, html body label,
html body h1, html body h2, html body h3, html body h4, html body h5, html body h6 {
font-family: 'Geist', 'Inter', -apple-system, system-ui, sans-serif !important;
}
.mono, code, pre,
[class*="mono"],
[style*="font-family:'JetBrains Mono'"],
[style*="font-family: 'JetBrains Mono'"],
[style*="font-family:'Geist Mono'"],
[style*="font-family: 'Geist Mono'"] {
font-family: 'Geist Mono', ui-monospace, SFMono-Regular, monospace !important;
}
html body {
background: var(--vd-bg) !important;
color: var(--vd-ink) !important;
}
/* ── Section backgrounds → neutral white/tint ───────────────── */
section[id]:not(.section-dark):not([class*="section-dark"]):not(#credentials):not(#delivery-anchor):not(#promise):not(.matrix-section):not(.cta-big):not([class*="eu-hero"]),
section[class*="section"]:not(.section-dark):not([class*="section-dark"]):not(.matrix-section):not(.cta-big) {
background: var(--vd-bg) !important;
}
/* Dark intent sections — the blanket cream override above was forcing
white-text-on-cream and hiding content. These stay dark. */
section.section-dark, section[class*="section-dark"],
section.matrix-section, section.cta-big {
background: #0A0A0A !important;
color: #FFFFFF !important;
}
/* White-background CTA buttons inside dark CTA sections (e.g. the
security page's "Book a Technical & Security Deep Dive") were
inheriting cream text color from the Brihaspati CTA overrides,
making them invisible. Force dark text on any white-bg pill CTA. */
html body a.cta-button,
html body .cta-section a.cta-button,
html body section a.cta-button {
color: #0A0A0A !important;
-webkit-text-fill-color: #0A0A0A !important;
background: #FFFFFF !important;
}
section[style*="F8F7FF"], section[style*="#F8F7FF"] { background: var(--vd-bg) !important; }
section[style*="F7F5FF"], section[style*="#F7F5FF"] { background: var(--vd-bg) !important; }
section[style*="FAFAFF"], section[style*="#FAFAFF"] { background: var(--vd-bg) !important; }
section[style*="180deg,#FFFFFF"], section[style*="180deg, #FFFFFF"] { background: var(--vd-bg) !important; }
#governance-engine, #how-we-deliver { background: var(--vd-bg) !important; }
/* Alternating sections get a subtle tint */
#trusted, #problem, #pillars, #where-it-works, #faq, #dashboard {
background: var(--vd-bg-tint) !important;
}
/* ── DARK SECTIONS: preserve as dark with Variant D black gradient ──
Sections that originally had a dark/purple bg with white text inside.
We override the background to a clean Variant D dark gradient AND
keep the white text inside. Without this, the section text becomes
white-on-white invisible after the generic white override above. */
html body section[style*="background:#4A2B7E"],
html body section[style*="background: #4A2B7E"],
html body section[style*="background:#2D2047"],
html body section[style*="background:#0F0A1E"],
html body section[style*="background: #0F0A1E"],
html body section[style*="background:#0D0A1A"],
html body section#promise {
background: linear-gradient(135deg, #0A0A0A 0%, #1A1A1A 100%) !important;
background-image: linear-gradient(135deg, #0A0A0A 0%, #1A1A1A 100%) !important;
color: var(--vd-bg) !important;
}
html body section[style*="background:#4A2B7E"] h1,
html body section[style*="background:#4A2B7E"] h2,
html body section[style*="background:#4A2B7E"] h3,
html body section[style*="background:#4A2B7E"] p,
html body section[style*="background:#4A2B7E"] span:not([style*="color"]),
html body section[style*="background:#4A2B7E"] div:not([style*="color"]),
html body section#promise h1,
html body section#promise h2,
html body section#promise h3,
html body section#promise p,
html body section#promise span,
html body section#promise div {
color: var(--vd-bg) !important;
-webkit-text-fill-color: var(--vd-bg) !important;
}
/* Pillar icons inside dark sections — keep them subtle on dark */
html body section#promise [style*="background:rgba"] {
background: rgba(255,255,255,0.06) !important;
}
/* ── Hide gradient orbs ──────────────────────────────────────── */
.orb, .orb-1, .orb-2, .orb-3 { display: none !important; }
/* ── Wave separators ────────────────────────────────────────── */
svg path[fill="#F8F7FF"] { fill: var(--vd-bg) !important; }
/* ── Headings ───────────────────────────────────────────────── */
html body h1, html body h2, html body h3, html body h4, html body h5 {
letter-spacing: -0.03em !important;
color: var(--vd-ink) !important;
line-height: 1.12 !important;
font-family: 'Geist', 'Inter', -apple-system, system-ui, sans-serif !important;
}
html body h1 { font-weight: 600 !important; }
html body h2 { font-weight: 600 !important; }
html body h3 { font-weight: 600 !important; }
/* ── HERO H1 normalization — beat navedas-core.css + per-page .hero h1 ── */
html body .hero h1,
html body #hero h1,
html body section.hero h1,
html body section#hero h1,
html body .hero-inner h1,
html body .hero-title,
html body .hero-h1,
html body .eu-hero h1 {
font-family: 'Geist', 'Inter', -apple-system, system-ui, sans-serif !important;
font-weight: 600 !important;
font-size: clamp(2.4rem, 5vw, 4.2rem) !important;
letter-spacing: -0.04em !important;
line-height: 1.0 !important;
color: var(--vd-ink) !important;
}
/* Dark hero (EU AI Act) — H1 stays white */
html body .eu-hero h1,
html body section[class*="cta-big"] h1,
html body section[class*="cta-big"] h2,
html body .cta-big-title {
color: var(--vd-bg) !important;
-webkit-text-fill-color: var(--vd-bg) !important;
}
/* ── HERO H2 / Section title normalization ───────────────────── */
html body .hero h2,
html body section.hero h2,
html body .section-title {
font-family: 'Geist', 'Inter', -apple-system, system-ui, sans-serif !important;
font-weight: 600 !important;
letter-spacing: -0.025em !important;
line-height: 1.15 !important;
}
/* Kill the legacy purple gradient on .section-title (defined in
navedas-core.css). Variant D wants solid black; the legacy gradient
leaks purple/violet/teal even on pages we have otherwise migrated. */
html body .section-title {
background: none !important;
background-image: none !important;
background-clip: border-box !important;
-webkit-background-clip: border-box !important;
-webkit-text-fill-color: #0A0A0A !important;
color: #0A0A0A !important;
}
html body .section-dark .section-title,
html body .dark-section .section-title,
html body [class*="dark"] .section-title {
-webkit-text-fill-color: #FFFFFF !important;
color: #FFFFFF !important;
}
/* ── Gradient text → grayscale (HIGH-SPECIFICITY chain to beat navedas-core.css) ── */
html body .gradient-text,
html body .hero h1 .gradient-text,
html body #hero h1 .gradient-text,
html body .hero h1 em,
html body #hero h1 em,
html body .hero-title em,
html body .hero-inner h1 em,
html body section h1 .gradient-text,
html body section h2 .gradient-text,
html body section h1 em,
html body section h2 em {
background: none !important;
background-image: none !important;
-webkit-background-clip: initial !important;
-webkit-text-fill-color: var(--vd-ink-soft) !important;
background-clip: initial !important;
color: var(--vd-ink-soft) !important;
}
/* Hero h1 gradient on /why-vertical-ai and other inline gradients */
html body .hero h1,
html body .hero-title,
html body .hero-h1,
html body #hero h1,
html body section.hero h1 {
background: none !important;
background-image: none !important;
-webkit-background-clip: initial !important;
-webkit-text-fill-color: var(--vd-ink) !important;
background-clip: initial !important;
color: var(--vd-ink) !important;
}
/* ── Pill badges → mono CAPS eyebrow ────────────────────────── */
.hero-badge, .feat-tag, .eu-badge, .solution-pill {
background: transparent !important;
border: none !important;
border-radius: 0 !important;
font-family: 'Geist Mono', ui-monospace, monospace !important;
font-size: 0.72rem !important;
letter-spacing: 0.08em !important;
text-transform: uppercase !important;
color: var(--vd-ink-faint) !important;
padding: 0 !important;
font-weight: 500 !important;
box-shadow: none !important;
}
.hero-badge .dot, .feat-tag::before { background: var(--vd-ink) !important; }
.feat-tag.green, .feat-tag.red, .feat-tag.amber, .feat-tag.violet,
.solution-pill { color: var(--vd-ink-faint) !important; }
/* ── Buttons → black rounded 6px ────────────────────────────── */
.btn-primary, .btn-demo, .btn-nav, .nv-nav-cta,
.cta-btn.cta-primary, .cta-primary {
background: var(--vd-ink) !important;
color: var(--vd-bg) !important;
border-radius: 6px !important;
box-shadow: none !important;
font-weight: 500 !important;
border: 0 !important;
font-family: 'Geist', sans-serif !important;
letter-spacing: -0.005em !important;
}
.btn-primary:hover, .btn-demo:hover, .btn-nav:hover, .nv-nav-cta:hover,
.cta-btn.cta-primary:hover, .cta-primary:hover {
background: #262626 !important;
transform: none !important;
}
.btn-secondary, .cta-btn.cta-secondary, .cta-secondary {
background: transparent !important;
color: var(--vd-ink) !important;
border: 1px solid var(--vd-line-strong) !important;
border-radius: 6px !important;
box-shadow: none !important;
font-weight: 500 !important;
}
.btn-secondary:hover, .cta-btn.cta-secondary:hover, .cta-secondary:hover {
border-color: var(--vd-ink) !important;
}
/* ── Cards → hairline borders, no shadows ───────────────────── */
.card, .hiw-card,
.outcome-card, .problem-card, .proof-card,
.path-card, .use-card,
.team-card, .value-card, .stat-block, .metric-card {
background: var(--vd-bg) !important;
border: 1px solid var(--vd-line) !important;
box-shadow: none !important;
border-radius: 10px !important;
}
.card:hover, .hiw-card:hover,
.outcome-card:hover, .problem-card:hover,
.path-card:hover, .use-card:hover,
.team-card:hover, .value-card:hover, .stat-block:hover {
box-shadow: none !important;
transform: none !important;
border-color: var(--vd-line-strong) !important;
}
/* Path-card variants (used in /why-vertical-ai) */
.path-card.wrong, .path-card.right { border-top: 1px solid var(--vd-ink) !important; }
.path-card.right { box-shadow: none !important; }
/* ── Solution pills → small mono caps chips ──────────────────── */
.solution-pill {
background: transparent !important;
border: 1px solid var(--vd-line-strong) !important;
border-radius: 4px !important;
color: var(--vd-ink) !important;
font-family: 'Geist Mono', monospace !important;
font-size: 0.7rem !important;
letter-spacing: 0.06em !important;
text-transform: uppercase !important;
padding: 4px 9px !important;
}
/* ── Soft text colors → neutral grays ───────────────────────── */
[style*="color:#6B6480"], [style*="color: #6B6480"] { color: var(--vd-ink-soft) !important; }
[style*="color:#9B92B0"], [style*="color: #9B92B0"] { color: var(--vd-ink-faint) !important; }
[style*="color:#5A6380"], [style*="color: #5A6380"] { color: var(--vd-ink-soft) !important; }
[style*="color:#3F3858"], [style*="color: #3F3858"] { color: var(--vd-ink-soft) !important; }
/* ── Inline border + background neutralization ──────────────── */
[style*="border:1px solid #E8E6F0"], [style*="border: 1px solid #E8E6F0"] { border-color: var(--vd-line) !important; }
[style*="border:1px solid #F0EEF8"], [style*="border: 1px solid #F0EEF8"] { border-color: var(--vd-line) !important; }
[style*="background:#F8F7FF"]:not(section), [style*="background: #F8F7FF"]:not(section) { background: var(--vd-bg-tint) !important; }
[style*="background:#FAFAFB"], [style*="background: #FAFAFB"] { background: var(--vd-bg-tint) !important; }
/* ── Kill all soft purple/teal shadows ──────────────────────── */
[style*="box-shadow:0 2px 12px"], [style*="box-shadow: 0 2px 12px"],
[style*="box-shadow:0 4px 16px"], [style*="box-shadow: 0 4px 16px"],
[style*="box-shadow:0 4px 20px"], [style*="box-shadow: 0 4px 20px"],
[style*="box-shadow:0 8px 24px"], [style*="box-shadow: 0 8px 24px"],
[style*="box-shadow:0 8px 32px"], [style*="box-shadow: 0 8px 32px"],
[style*="box-shadow:0 12px 32px"], [style*="box-shadow: 0 12px 32px"],
[style*="box-shadow:0 12px 36px"], [style*="box-shadow: 0 12px 36px"],
[style*="box-shadow:0 16px 40px"], [style*="box-shadow: 0 16px 40px"] { box-shadow: none !important; }
/* ── Heavily rounded radii (16-20px) → 10px ─────────────────── */
[style*="border-radius:16px"], [style*="border-radius: 16px"],
[style*="border-radius:18px"], [style*="border-radius: 18px"],
[style*="border-radius:20px"], [style*="border-radius: 20px"] { border-radius: 10px !important; }
/* ── Purple-bordered highlighted Co-Build card → black hairline ─ */
[style*="border:2px solid #4A2B7E"] { border: 1px solid var(--vd-ink) !important; }
/* ── "Where the work happens" pill → mono caps neutral ───────── */
[style*="background:#4A2B7E"][style*="color:#FFFFFF"],
[style*="background:#4A2B7E"][style*="color:white"] {
background: var(--vd-ink) !important;
color: var(--vd-bg) !important;
border-radius: 4px !important;
font-family: 'Geist Mono', monospace !important;
letter-spacing: 0.06em !important;
}
/* ── Inline gradient alert blocks → hairline neutral ────────── */
[style*="linear-gradient(135deg,#FEF2F2"],
[style*="linear-gradient(135deg,#FFF7ED"],
[style*="linear-gradient(135deg,#FFF1F2"],
[style*="linear-gradient(135deg,#ECFDF5"],
[style*="linear-gradient(135deg,#F3F0FF"] {
background: var(--vd-bg) !important;
border-color: var(--vd-ink) !important;
}
/* ── Big stat values: multi-color → single ink ──────────────── */
span[style*="color:#4A2B7E"][style*="font-size:1.75rem"],
span[style*="color:#3BAA96"][style*="font-size:1.75rem"],
span[style*="color:#D94452"][style*="font-size:1.75rem"] {
color: var(--vd-ink) !important;
}
/* ── Vertical divider bars → hairline ───────────────────────── */
[style*="background:rgba(74,43,126,0.15)"] { background: var(--vd-line) !important; }
/* ── Console mockups: keep structure, neutralize colored borders ─ */
.console { background: var(--vd-bg) !important; border: 1px solid var(--vd-line) !important; box-shadow: none !important; }
.console-top { background: var(--vd-bg-tint) !important; border-bottom: 1px solid var(--vd-line) !important; }
.pre-decision { border-color: var(--vd-line-strong) !important; }
/* ── Hover transforms killed (no card-lift effects) ─────────── */
[class*="-card"]:hover { transform: none !important; }
/* ── ROI math sidebar cards (use-case pages) → hairlines ────── */
[style*="border-left:3px solid #4A2B7E"],
[style*="border-left:3px solid #D94452"],
[style*="border-left:3px solid #D4850A"],
[style*="border-left:3px solid #3BAA96"] {
border-left: 2px solid var(--vd-ink) !important;
}
/* ── Engine cell + verdict cells use neutral hairlines ──────── */
.engine-cell, .verdict-block, .verdict-blocked, .verdict-offer,
.verdict-cited, .verdict-export, .verdict-handoff {
background: var(--vd-bg) !important;
border: 1px solid var(--vd-line) !important;
}
.verdict-blocked, .verdict-cited { border-color: var(--vd-ink) !important; }
/* ── Section eyebrow gold/green/red dots → neutral ──────────── */
.section-eyebrow.purple, .section-eyebrow.green, .section-eyebrow.red {
color: var(--vd-ink-faint) !important;
}
/* ── Dark CTA bands stay dark but get Geist treatment ───────── */
section[style*="linear-gradient(135deg,#0F0A1E"] {
background: linear-gradient(135deg, #0A0A0A 0%, #1A1A1A 100%) !important;
}
section[style*="linear-gradient(135deg,#0F0A1E"] * { color: inherit; }
/* ── Vocab strip tags → hairline neutral ────────────────────── */
.vocab-tag {
background: var(--vd-bg) !important;
border: 1px solid var(--vd-line) !important;
color: var(--vd-ink) !important;
font-family: 'Geist Mono', monospace !important;
font-size: 0.72rem !important;
letter-spacing: 0.04em !important;
}
/* ════════════════════════════════════════════════════════════
PAGE-SPECIFIC OVERRIDES — catch remaining purple/colored elements
═════════════════════════════════════════════════════════════ */
/* ── FAQ filter tabs ────────────────────────────────────────── */
html body .faq-tab {
background: transparent !important;
color: var(--vd-ink-soft) !important;
border: 1px solid var(--vd-line) !important;
border-radius: 4px !important;
font-family: 'Geist Mono', monospace !important;
font-size: 0.7rem !important;
letter-spacing: 0.06em !important;
text-transform: uppercase !important;
font-weight: 500 !important;
box-shadow: none !important;
}
html body .faq-tab.active, html body .faq-tab:hover {
background: var(--vd-ink) !important;
color: var(--vd-bg) !important;
border-color: var(--vd-ink) !important;
}
/* ── FAQ "Still have questions" purple cta card ─────────────── */
html body .faq-cta, html body [class*="faq-cta"] {
background: var(--vd-ink) !important;
color: var(--vd-bg) !important;
border-radius: 10px !important;
}
html body .faq-cta input, html body .faq-cta textarea, html body .faq-cta select {
background: rgba(255,255,255,0.08) !important;
border: 1px solid rgba(255,255,255,0.16) !important;
color: var(--vd-bg) !important;
border-radius: 4px !important;
}
/* ── EU AI Act page overrides ───────────────────────────────── */
html body .eu-hero {
background: linear-gradient(135deg, #0A0A0A 0%, #1A1A1A 100%) !important;
}
html body .eu-badge {
background: rgba(255,255,255,0.08) !important;
color: var(--vd-bg) !important;
border: 1px solid rgba(255,255,255,0.18) !important;
border-radius: 4px !important;
font-family: 'Geist Mono', monospace !important;
}
html body .countdown,
html body .countdown.fade-up {
background: rgba(255,255,255,0.05) !important;
border: 1px solid rgba(255,255,255,0.12) !important;
border-radius: 6px !important;
}
html body .countdown-num, html body .countdown-lbl, html body .countdown-date {
color: var(--vd-bg) !important;
font-family: 'Geist', sans-serif !important;
}
html body .section-eyebrow,
html body .section-eyebrow.purple,
html body .section-eyebrow.green,
html body .section-eyebrow.red {
color: var(--vd-ink-faint) !important;
font-family: 'Geist Mono', monospace !important;
letter-spacing: 0.08em !important;
text-transform: uppercase !important;
}
html body .track-cta,
html body .btn.btn-primary,
html body .eu-cta {
background: var(--vd-ink) !important;
color: var(--vd-bg) !important;
border-radius: 6px !important;
box-shadow: none !important;
font-family: 'Geist', sans-serif !important;
font-weight: 500 !important;
border: 0 !important;
}
html body .btn.btn-ghost {
background: transparent !important;
color: var(--vd-ink) !important;
border: 1px solid var(--vd-line-strong) !important;
border-radius: 6px !important;
font-family: 'Geist', sans-serif !important;
}
html body .matrix-table { font-family: 'Geist', sans-serif !important; }
html body .matrix-table th.us,
html body .matrix-table td.us {
background: var(--vd-bg-tint) !important;
color: var(--vd-ink) !important;
}
html body .matrix-table td.matrix-yes { color: var(--vd-ink) !important; font-weight: 600 !important; }
html body .matrix-table td.matrix-no { color: var(--vd-ink-faint) !important; }
html body .matrix-table td.matrix-partial { color: var(--vd-ink-soft) !important; }
html body .eu-track, html body .track-card {
background: var(--vd-bg) !important;
border: 1px solid var(--vd-line) !important;
box-shadow: none !important;
border-radius: 10px !important;
}
html body .eu-persona-row a {
background: rgba(255,255,255,0.04) !important;
border: 1px solid rgba(255,255,255,0.16) !important;
}
/* EU hero H1 em — local gradient text rendered near-black on dark.
Force cream and kill the gradient/clip. */
html body .eu-hero h1 em,
html body section.eu-hero h1 em {
background: none !important;
background-image: none !important;
-webkit-background-clip: border-box !important;
background-clip: border-box !important;
-webkit-text-fill-color: var(--vd-bg) !important;
color: var(--vd-bg) !important;
opacity: 0.85;
}
/* Ghost buttons inside the dark EU hero — default Brihaspati ghost
uses dark ink color which is invisible on the dark hero bg. */
html body .eu-hero .btn.btn-ghost,
html body section.eu-hero .btn.btn-ghost,
html body .cta-big .btn.btn-ghost,
html body section.cta-big .btn.btn-ghost {
color: var(--vd-bg) !important;
-webkit-text-fill-color: var(--vd-bg) !important;
border: 1px solid rgba(255,255,255,0.4) !important;
background: rgba(255,255,255,0.06) !important;
}
html body .eu-hero .btn.btn-ghost:hover,
html body section.eu-hero .btn.btn-ghost:hover,
html body .cta-big .btn.btn-ghost:hover,
html body section.cta-big .btn.btn-ghost:hover {
background: rgba(255,255,255,0.12) !important;
border-color: rgba(255,255,255,0.6) !important;
}
/* Scope chips — replace red with purple (palette compliance). */
html body .scope-chip.active {
background: rgba(78, 44, 120, 0.10) !important;
border-color: rgba(78, 44, 120, 0.30) !important;
color: #4E2C78 !important;
}
/* Matrix section (dark) — section-title rule globally forces dark ink
via -webkit-text-fill-color. Re-assert white inside .matrix-section. */
html body .matrix-section .section-title,
html body .matrix-section h2,
html body .matrix-section h3,
html body section.matrix-section .section-title,
html body section.matrix-section h2,
html body section.matrix-section h3 {
color: #FFFFFF !important;
-webkit-text-fill-color: #FFFFFF !important;
background: none !important;
background-image: none !important;
}
html body .matrix-section .section-title em,
html body section.matrix-section .section-title em {
color: rgba(255,255,255,0.55) !important;
-webkit-text-fill-color: rgba(255,255,255,0.55) !important;
background: none !important;
background-image: none !important;
}
html body .matrix-section .section-sub,
html body section.matrix-section .section-sub,
html body .matrix-section p,
html body section.matrix-section p {
color: rgba(255,255,255,0.78) !important;
}
/* Matrix table — comparison columns were styled for cream surface and
disappear on dark. Re-color for the actual dark context. */
html body .matrix-section .matrix-table th,
html body section.matrix-section .matrix-table th {
color: rgba(255,255,255,0.62) !important;
}
html body .matrix-section .matrix-table td,
html body section.matrix-section .matrix-table td {
color: rgba(255,255,255,0.82) !important;
}
html body .matrix-section .matrix-table td.capability,
html body section.matrix-section .matrix-table td.capability {
color: #FFFFFF !important;
font-weight: 700 !important;
}
html body .matrix-section .matrix-table td.matrix-no,
html body section.matrix-section .matrix-table td.matrix-no {
color: rgba(255,255,255,0.42) !important;
}
html body .matrix-section .matrix-table td.matrix-partial,
html body section.matrix-section .matrix-table td.matrix-partial {
color: rgba(255,255,255,0.70) !important;
}
html body .matrix-section .matrix-table td.matrix-yes,
html body section.matrix-section .matrix-table td.matrix-yes {
color: #FFFFFF !important;
font-weight: 700 !important;
}
/* The Navedas column (.us) overlays both matrix-yes and the dark
bg — give it white bg with dark text. Two-class selector to win
against td.matrix-yes above. */
html body .matrix-section .matrix-table th.us,
html body section.matrix-section .matrix-table th.us,
html body .matrix-section .matrix-table td.us,
html body section.matrix-section .matrix-table td.us,
html body .matrix-section .matrix-table td.us.matrix-yes,
html body section.matrix-section .matrix-table td.us.matrix-yes {
background: #FFFFFF !important;
color: #0A0A0A !important;
-webkit-text-fill-color: #0A0A0A !important;
font-weight: 600 !important;
}
/* Fine cards — red euro figures → brand purple (palette compliance). */
html body .fine-card .amount {
color: #4E2C78 !important;
}
html body .fine-card .category {
color: var(--vd-ink) !important;
}
/* (moved later in file to win over the dark-section H2 cascade) */
/* ── CTA bands with purple gradients → neutral dark ────────── */
html body section[class*="cta-big"],
html body section[class*="cta-band"],
html body .cta-big {
background: linear-gradient(135deg, #0A0A0A 0%, #1A1A1A 100%) !important;
}
/* ── Inline purple gradient backgrounds anywhere ─────────────── */
[style*="background:linear-gradient(135deg,#4A2B7E"],
[style*="background: linear-gradient(135deg, #4A2B7E"],
[style*="background:linear-gradient(135deg, #4A2B7E"],
[style*="background:linear-gradient(180deg,#4A2B7E"],
[style*="background:linear-gradient(rgba(74,43,126"],
[style*="background: linear-gradient(rgba(74,43,126"] {
background: var(--vd-ink) !important;
color: var(--vd-bg) !important;
}
/* ── Homepage pricing tier cards (.card.stagger-child) ──────── */
html body .card.stagger-child,
html body .card.stagger-child * {
border-color: var(--vd-line) !important;
}
html body .card.stagger-child {
background: var(--vd-bg) !important;
border: 1px solid var(--vd-line) !important;
box-shadow: none !important;
}
/* ── Solution icon wrappers + governance engine band ───────── */
html body .sol-icon-wrap {
background: var(--vd-bg-tint) !important;
border: 1px solid var(--vd-line) !important;
}
html body .sol-icon-wrap svg path { stroke: var(--vd-ink) !important; }
html body .gov-engine {
background: var(--vd-bg) !important;
border: 1px solid var(--vd-line) !important;
}
/* ── Skip-link (hidden, but if visible) ────────────────────── */
html body .skip-link {
background: var(--vd-ink) !important;
color: var(--vd-bg) !important;
}
/* ── Faq accordion items + general ───────────────────────────── */
html body .faq-item, html body .faq-q, html body .faq-a {
font-family: 'Geist', sans-serif !important;
}
html body .faq-q {
color: var(--vd-ink) !important;
border-bottom: 1px solid var(--vd-line) !important;
}
html body .faq-a {
color: var(--vd-ink-soft) !important;
}
/* ── Make sure all H1/H2 anywhere are Geist + neutral ────────── */
html body section h1,
html body section h2,
html body .hero h1,
html body .hero-title {
font-family: 'Geist', 'Inter', -apple-system, sans-serif !important;
color: var(--vd-ink) !important;
-webkit-text-fill-color: var(--vd-ink) !important;
background: none !important;
-webkit-background-clip: initial !important;
}
/* In dark sections (CTA bands, EU hero), H2 stays white */
html body section[style*="0F0A1E"] h1,
html body section[style*="0F0A1E"] h2,
html body section[style*="#0F0A1E"] h1,
html body section[style*="#0F0A1E"] h2,
html body .eu-hero h1,
html body .cta-big h1, html body .cta-big h2,
html body section[style*="linear-gradient(135deg,#0A0A0A"] h1,
html body section[style*="linear-gradient(135deg,#0A0A0A"] h2,
html body section.section-dark h1,
html body section.section-dark h2,
html body section.section-dark h3,
html body section[class*="section-dark"] h1,
html body section[class*="section-dark"] h2,
html body section[class*="section-dark"] h3 {
color: var(--vd-bg) !important;
-webkit-text-fill-color: var(--vd-bg) !important;
}
/* ── Inline span gradient text (e.g. on EU page accent) ────────── */
em, [style*="-webkit-text-fill-color:transparent"] {
-webkit-text-fill-color: inherit !important;
}
.cta-big-title em, .section-title em {
color: var(--vd-ink-soft) !important;
font-style: normal !important;
}
/* Blog/post hero H1s sit on dark gradient bg but use class-based
selectors (no inline gradient), so the dark-section H1 rule above
doesn't catch them. Force cream here. */
html body .blog-hero h1,
html body .post-hero h1,
html body section.blog-hero h1,
html body section.post-hero h1 {
color: #FFFFFF !important;
-webkit-text-fill-color: #FFFFFF !important;
font-family: 'Source Serif 4', Georgia, serif !important;
font-weight: 600 !important;
}
html body .blog-hero .subtitle,
html body .blog-hero p,
html body .post-hero .subtitle,
html body .post-hero p {
color: rgba(255,255,255,0.78) !important;
}
html body .crumbs,
html body .crumbs a,
html body .post-meta {
color: rgba(255,255,255,0.62) !important;
}
/* H2/H3 inside a WHITE inline-bg card must stay dark, even when the
outer section is dark and forces cream H2s via the cascade. This
block must come AFTER the dark-section H2 rules above. */
html body section [style*="background:#FFFFFF"] h1,
html body section [style*="background:#FFFFFF"] h2,
html body section [style*="background:#FFFFFF"] h3,
html body section [style*="background: #FFFFFF"] h1,
html body section [style*="background: #FFFFFF"] h2,
html body section [style*="background: #FFFFFF"] h3,
html body section [style*="background:#fff"] h2,
html body section [style*="background:#fff"] h3,
html body section .bd-card h1,
html body section .bd-card h2,
html body section .bd-card h3 {
color: #0A0A0A !important;
-webkit-text-fill-color: #0A0A0A !important;
}
/* ── Footer "winner" badge image → hide it ───────────────────── */
.footer-brand img[src*="winner"],
.footer-brand img[src*="Winner"],
.footer-brand img[alt*="Winner"],
[class*="badge"] img[src*="winner"],
.footer img[src*="winner"] { display: none !important; }
img[src*="winner"], img[alt*="Winner"] { display: none !important; }
/* ── Pink "Best Tech Startup Winner" badge in footer (.nv-ft-timmy) ── */
.nv-ft-timmy {
background: var(--vd-bg-tint) !important;
background-image: none !important;
color: var(--vd-ink) !important;
border: 1px solid rgba(255,255,255,0.12) !important;
border-radius: 6px !important;
}
.nv-ft-timmy * { color: var(--vd-ink-soft) !important; }
/* ── FAQ "Still have questions" purple cta card (.cta-section) ── */
html body .cta-section,
html body div.cta-section {
background: var(--vd-ink) !important;
background-image: linear-gradient(135deg, #0A0A0A 0%, #1A1A1A 100%) !important;
border: 1px solid #1A1A1A !important;
border-radius: 10px !important;
}
html body .cta-section *,
html body .cta-headline,
html body .cta-sub {
color: var(--vd-bg) !important;
font-family: 'Geist', sans-serif !important;
}
html body .cta-section input,
html body .cta-section textarea,
html body .cta-section select {
background: rgba(255,255,255,0.08) !important;
border: 1px solid rgba(255,255,255,0.16) !important;
color: var(--vd-bg) !important;
border-radius: 4px !important;
}
html body .cta-section input::placeholder,
html body .cta-section textarea::placeholder { color: rgba(255,255,255,0.4) !important; }
html body .cta-section button,
html body .cta-section .cta-btn,
html body .cta-section button[type="submit"] {
background: var(--vd-bg) !important;
color: var(--vd-ink) !important;
border: 0 !important;
border-radius: 6px !important;
font-family: 'Geist', sans-serif !important;
font-weight: 600 !important;
}
/* ── Catch any inline purple-on-purple gradient bg (FAQ-style cards) ── */
[style*="background:linear-gradient(135deg,#2D1B5E"],
[style*="background: linear-gradient(135deg, #2D1B5E"],
[style*="background:linear-gradient(135deg, #2D1B5E"] {
background: linear-gradient(135deg, #0A0A0A 0%, #1A1A1A 100%) !important;
}
/* The .cta-section has its gradient defined via stylesheet (not inline), already caught above. */
/* ════════════════════════════════════════════════════════════
NAV OVERRIDES — Variant D nav (logo + links + CTA)
The nav is injected by /public/nav.js; we restyle via CSS only.
═════════════════════════════════════════════════════════════ */
.nv-nav {
background: rgba(255,255,255,0.85) !important;
-webkit-backdrop-filter: blur(8px) !important;
backdrop-filter: blur(8px) !important;
border-bottom: 1px solid var(--vd-line) !important;
box-shadow: none !important;
font-family: 'Geist', -apple-system, system-ui, sans-serif !important;
}
.nv-nav-inner { padding: 18px 32px !important; }
/* Logo: show the real N logo image (restored from Variant D diamond placeholder) */
.nv-nav-logo {
display: flex !important;
align-items: center !important;
gap: 10px !important;
color: var(--vd-ink) !important;
}
.nv-nav-logo img {
display: block !important;
}
/* Brand text — matches the N logo color */
.nv-nav-brand {
font-family: 'Geist', sans-serif !important;
font-weight: 700 !important;
font-size: 0.96rem !important;
letter-spacing: -0.025em !important;
color: #4A2B7E !important;
}
.nv-nav-brand em {
color: rgba(74, 43, 126, 0.55) !important;
font-weight: 400 !important;
font-style: normal !important;
font-size: 0.82rem !important;
margin-left: 2px !important;
}
/* Nav links */
.nv-nav-link {
font-family: 'Geist', sans-serif !important;
font-size: 0.84rem !important;
color: var(--vd-ink-soft) !important;
font-weight: 500 !important;
background: transparent !important;
border: none !important;
letter-spacing: -0.005em !important;
}
.nv-nav-link:hover, .nv-nav-link.is-active { color: var(--vd-ink) !important; font-weight: 600 !important; }
.nv-nav-link-urgent { color: var(--vd-ink) !important; }
.nv-nav-link-urgent:hover { color: var(--vd-ink) !important; }
.nv-pulse { background: var(--vd-ink) !important; }
/* Nav dropdown */
.nv-nav-dd {
background: var(--vd-bg) !important;
border: 1px solid var(--vd-line) !important;
border-radius: 8px !important;
box-shadow: 0 8px 24px rgba(0,0,0,0.06) !important;
}
.nv-nav-dd a {
color: var(--vd-ink) !important;
font-family: 'Geist', sans-serif !important;
border-radius: 4px !important;
}
.nv-nav-dd a:hover, .nv-nav-dd a.is-active {
background: var(--vd-bg-tint) !important;
color: var(--vd-ink) !important;
}
/* Nav CTA */
.nv-nav-cta {
background: var(--vd-ink) !important;
color: var(--vd-bg) !important;
border-radius: 6px !important;
box-shadow: none !important;
font-family: 'Geist', sans-serif !important;
font-weight: 500 !important;
font-size: 0.84rem !important;
padding: 8px 14px !important;
letter-spacing: -0.005em !important;
}
.nv-nav-cta:hover {
background: #262626 !important;
transform: none !important;
box-shadow: none !important;
}
/* Mobile drawer */
.nv-nav-mobile { background: var(--vd-bg) !important; font-family: 'Geist', sans-serif !important; }
.nv-nav-mobile-brand { color: var(--vd-ink) !important; }
.nv-nav-mobile-brand em { color: var(--vd-ink-faint) !important; }
.nv-nav-mobile-link { color: var(--vd-ink) !important; border-bottom: 1px solid var(--vd-line) !important; font-family: 'Geist', sans-serif !important; }
.nv-nav-mobile-link.is-active { color: var(--vd-ink) !important; }
.nv-nav-mobile-section-label { color: var(--vd-ink-faint) !important; font-family: 'Geist Mono', monospace !important; }
.nv-nav-mobile-sublink { color: var(--vd-ink) !important; font-family: 'Geist', sans-serif !important; }
.nv-nav-mobile-cta { background: var(--vd-ink) !important; color: var(--vd-bg) !important; border-radius: 6px !important; box-shadow: none !important; font-family: 'Geist', sans-serif !important; }
/* ════════════════════════════════════════════════════════════
FOOTER OVERRIDES — Variant D footer
═════════════════════════════════════════════════════════════ */
footer {
background: var(--b-warmdark) !important;
border-top: 1px solid var(--b-warmdark) !important;
font-family: 'Geist', sans-serif !important;
}
.footer-brand, .footer-name, .footer-tagline,
.footer-links a, .footer-copy { font-family: 'Geist', sans-serif !important; }
.footer-logo-box {
background: var(--vd-bg) !important;
color: var(--vd-ink) !important;
border-radius: 2px !important;
transform: rotate(45deg);
font-size: 0 !important;
}
/* ════════════════════════════════════════════════════════════
BRIHASPATI LAYER — warm cream + amber + serif headings
Promoted from /v4 spike (2026-05-21). Loaded as the final
section of this file so it wins on equal-specificity rules.
Rules from navedas-repositioning-fixes.md Fix 09:
- Amber is for credentialing (eyebrows, 01/02/03, metric labels)
- Amber is NOT for CTAs. CTAs stay Saturnian (warm-dark).
- Cream background dominates; dark sections become warm-dark
(#1F1A12) not pure black.
- Headlines shift sans → serif.
- Subtle highlighter under CSAT.AI as a credentialing gesture.
═════════════════════════════════════════════════════════════ */
:root {
/* Brihaspati base */
--b-bg: #FAF7EE; /* warm cream */
--b-bg-deep: #F2EDE0; /* deeper cream for banded sections */
--b-surface: #FFFFFF; /* cards stay white */
--b-ink: #1A1714; /* warm dark (not pure black) */
--b-body: #4D453A; /* warm body text */
--b-text-muted: #7A6F60; /* warm muted */
--b-hairline: #E5DFD0; /* warm-gray hairline */
/* Brihaspati gold — for credentialing */
/* CSAT.AI brand family — purple is the credentialing accent.
The token names keep the "amber" suffix for backwards-compat with
existing selectors; the values now resolve to Shukra purple. */
--b-amber: #604289; /* softened, for cream surfaces */
--b-amber-deep: #4E2C78; /* full strength, CSAT.AI parity */
--b-amber-light: #B89BD4; /* on dark surfaces */
--b-amber-soft: rgba(96, 66, 137, 0.14);
--b-amber-tint: rgba(96, 66, 137, 0.22);
/* Dark sections — pure Saturnian black (per user choice 2026-05-21:
the warm-dark #1F1A12 read too brown next to cream; pure #0A0A0A
gives the sharper contrast). */
--b-warmdark: #0A0A0A;
/* Moss/forest green — replaces teal-seafoam #3BAA96 */
/* Sage shifted slightly cooler to sit harmoniously with purple+cream. */
--b-moss: #5D8A6B;
--b-moss-soft: rgba(93, 138, 107, 0.10);
}
/* ── Background + text ─────────────────────────────────────── */
html body { background: var(--b-bg) !important; color: var(--b-ink) !important; }
/* Nav harmonizes with cream */
html body .nv-nav-shell,
html body header.nv-nav,
html body nav.nv-nav {
background: rgba(250, 247, 238, 0.92) !important;
backdrop-filter: blur(20px) !important;
-webkit-backdrop-filter: blur(20px) !important;
border-bottom: 1px solid var(--b-hairline) !important;
}
/* White full-bleed sections get hairline edges so they sit on cream
as "card-like bands" rather than floating untethered. */
html body section[style*="background:#fff"]:not([style*="border-radius"]),
html body section[style*="background:#FFFFFF"]:not([style*="border-radius"]),
html body section[style*="background:#FFF"]:not([style*="border-radius"]) {
border-top: 1px solid var(--b-hairline);
border-bottom: 1px solid var(--b-hairline);
}
/* Light-gray (#FAFAFA) banded sections take a deeper cream instead. */
html body section[style*="background:#FAFAFA"] {
background: var(--b-bg-deep) !important;
}
/* ── SERIF HEADINGS — Source Serif 4 ───────────────────────── */
/* Beat the inline #hero-copy * rule on the homepage with id-anchored
selectors. Override every H1/H2; H3 stays sans for crispness. */
html body section#hero #hero-copy h1#hero-h1,
html body #hero-h1,
html body h1#hero-h1 {
font-family: 'Source Serif 4', 'Source Serif Pro', 'Tiempos Headline', Georgia, serif !important;
font-weight: 600 !important;
letter-spacing: -0.02em !important;
color: var(--b-ink) !important;
}
html body #hero-copy h1,
html body #hero-copy h1 * {
font-family: 'Source Serif 4', 'Source Serif Pro', Georgia, serif !important;
}
html body .hero h1,
html body section h1,
html body section.hero h1,
html body main h1,
html body h1,
html body .hero h2,
html body section h2,
html body main h2,
html body h2 {
font-family: 'Source Serif 4', 'Source Serif Pro', 'Tiempos Headline', Georgia, serif !important;
font-weight: 600 !important;
letter-spacing: -0.02em !important;
line-height: 1.08 !important;
}
html body h3 { font-family: 'Geist', 'Inter', sans-serif !important; }
/* ── AMBER ACCENTS (credentialing) ─────────────────────────── */
/* Mono-CAPS eyebrow tag + leading dot — all eyebrow variants unified to
the CSAT.AI purple. Dark-section eyebrows override below. */
html body .vd-eyebrow,
html body .eg-eyebrow,
html body .eg-section-eyebrow,
html body .ref-eyebrow,
html body .ref-second-eyebrow,
html body .hero-badge,
html body .feat-tag,
html body .section-eyebrow,
html body .section-eyebrow.purple,
html body .section-eyebrow.green,
html body .section-eyebrow.red,
html body .section-eyebrow.teal,
html body .rd-eyebrow,
html body .wp-section-eyebrow,
html body .nf-eyebrow,
html body .nf-suggest-eyebrow,
html body .blog-hero-tag { color: var(--b-amber) !important; }
/* On dark sections, eyebrows shift to the light-purple accent so they
stay legible on the dark surface. */
html body .section-dark .vd-eyebrow,
html body .section-dark .eg-eyebrow,
html body .section-dark .eg-section-eyebrow,
html body .section-dark .eg-section-eyebrow-dark,
html body .section-dark .ref-eyebrow,
html body .section-dark .hero-badge,
html body .section-dark .feat-tag,
html body .section-dark .section-eyebrow,
html body .section-dark .rd-eyebrow,
html body .section-dark .wp-section-eyebrow,
html body .section-dark .blog-hero-tag,
html body .eg-section-eyebrow-dark { color: var(--b-amber-light) !important; }
html body span[style*="background:#0A0A0A;"][style*="border-radius:50%"],
html body span[style*="background:#0A0A0A"][style*="border-radius:50%;"] {
background: var(--b-amber) !important;
}
/* Numbered prefixes in the hero triple and on tile cards */
html body .vd-num { color: var(--b-amber) !important; }
/* Generic STAGE 01 / 01-04 mono labels used on tile bands */
html body div[style*="font-family:'Geist Mono'"][style*="color:#A3A3A3"],
html body div[style*='font-family:"Geist Mono"'][style*="color:#A3A3A3"] {
color: var(--b-amber) !important;
}
/* Mono-CAPS section eyebrows (the "● VERTICAL AI · ..." style) */
html body div[style*="color:#0A0A0A"][style*="letter-spacing"][style*="text-transform:uppercase"],
html body div[style*="color:#525252"][style*="letter-spacing"][style*="text-transform:uppercase"] {
color: var(--b-amber-deep) !important;
}
/* Price chip in primary CTA — amber border + amber-deep text */
html body .vd-price {
border-color: var(--b-amber) !important;
color: var(--b-amber-deep) !important;
}
/* Patent link — amber */
html body a[href*="patents.google.com"] {
color: var(--b-amber-deep) !important;
text-decoration-color: var(--b-amber) !important;
text-underline-offset: 3px;
}
/* Highlighter gesture under "CSAT.AI" (or any strong tag wrapping a
credentialed phrase with color:#0A0A0A in body copy). */
html body #hero-copy strong[style*="color:#0A0A0A"],
html body p strong[style*="color:#0A0A0A"] {
background: linear-gradient(180deg, transparent 0%, transparent 58%, var(--b-amber-tint) 58%, var(--b-amber-tint) 92%, transparent 92%) !important;
padding: 0 2px !important;
color: var(--b-ink) !important;
}
/* ── WARM DARK SECTIONS (replace pure black) ───────────────── */
html body section[style*="background:#0A0A0A"],
html body div[style*="background:#0A0A0A"][style*="border-radius:14px"],
html body section#promise {
background: var(--b-warmdark) !important;
border-color: var(--b-warmdark) !important;
}
/* Retarget legacy purple section backgrounds to warm-dark. Kept
`#promise` OFF this list — it sits next to the Decision Gate dark
card, and any gradient creates a visible boundary band between two
sections that should read as one continuous warm-dark surface. */
html body section[style*="background:#4A2B7E"],
html body section[style*="background: #4A2B7E"],
html body section[style*="background:#2D2047"],
html body section[style*="background:#0F0A1E"],
html body section[style*="background: #0F0A1E"],
html body section[style*="background:#0D0A1A"] {
background: var(--b-warmdark) !important;
background-image: none !important;
}
/* Dark hero gradients on inner pages (contact, book-demo, whitepaper) */
html body section[style*="linear-gradient(135deg,#0A0A0A 0%,#1A1A1A 100%)"] {
background: linear-gradient(135deg, var(--b-warmdark) 0%, #2A231A 100%) !important;
}
/* ── MOSS GREEN — replaces seafoam teal (#3BAA96) ──────────── */
html body svg[stroke="#3BAA96"] { stroke: var(--b-moss) !important; }
html body svg path[stroke="#3BAA96"] { stroke: var(--b-moss) !important; }
html body span[style*="color:#3BAA96"] { color: var(--b-moss) !important; }
html body [style*="background:rgba(59,170,150"] {
background: var(--b-moss-soft) !important;
}
/* CTAs stay Saturnian — shift pure-black to warm-dark for color
consistency across every dark surface on the page. Covers pill CTAs,
square CTAs (.nv-nav-cta), skip-link, and the Operator Console
footer bar — any element that was sitting at #0A0A0A becomes the
same warm-dark as the section anchors. */
html body a[style*="background:#0A0A0A"],
html body button[style*="background:#0A0A0A"],
html body div[style*="background:#0A0A0A"]:not([style*="border-radius:14px"]),
html body a.vd-cta-primary,
html body a.nv-nav-cta,
html body .nv-nav-cta,
html body a.skip-link {
background: var(--b-warmdark) !important;
}
html body a[style*="background:#0A0A0A"][style*="border-radius:100px"]:hover,
html body button[style*="background:#0A0A0A"][style*="border-radius:100px"]:hover,
html body a.vd-cta-primary:hover {
box-shadow: 0 8px 24px rgba(184, 148, 31, 0.32) !important;
}
/* ── Hairlines and dividers ────────────────────────────────── */
html body [style*="border:1px solid #E5E5E5"],
html body [style*="border: 1px solid #E5E5E5"] {
border-color: var(--b-hairline) !important;
}
/* ── WHITESPACE TIGHTENING ─────────────────────────────────────
Brihaspati wants generous whitespace, but the current homepage
has dead air at the top of sections that reads as "empty"
rather than "intentional pause." Trim ~30% off section padding.
═════════════════════════════════════════════════════════════════ */
html body section.hero,
html body section#hero { padding-top: 3rem !important; padding-bottom: 3rem !important; }
html body section[style*="padding:5rem 0"],
html body section[style*="padding: 5rem 0"] { padding-top: 3.5rem !important; padding-bottom: 3.5rem !important; }
html body section[style*="padding:4rem 0"],
html body section[style*="padding: 4rem 0"] { padding-top: 3rem !important; padding-bottom: 3rem !important; }
html body section[style*="padding:6rem"],
html body section[style*="padding: 6rem"] { padding-top: 4rem !important; padding-bottom: 4rem !important; }
html body section[style*="padding:80px"] { padding-top: 56px !important; padding-bottom: 56px !important; }
html body section[style*="padding:96px"] { padding-top: 64px !important; padding-bottom: 64px !important; }
/* Tighten the gap between the hero copy and the operator console mockup */
html body section#hero .grid { gap: 2.5rem !important; }
/* ── ANTHROPIC-STYLE WARM TRANSITIONS ─────────────────────────
The body is warm cream (#FAF7EE). Block-level surfaces must be
either warm-cream variations or hairline-bordered white. Anything
cool-gray or lavender breaks the warmth and reads as "off-brand".
═════════════════════════════════════════════════════════════════ */
/* Kill any lavender/lilac card backgrounds — these were holdovers
from the old purple palette. Retarget to warm amber-cream so the
block reads as a credentialing card, not a different colorway. */
html body [style*="background:#F8F5FF"],
html body [style*="background: #F8F5FF"],
html body [style*="background:#F5F0FF"],
html body [style*="background: #F5F0FF"],
html body [style*="background:#EDE9FE"],
html body [style*="background: #EDE9FE"] {
background: #FBF6E8 !important;
border-color: rgba(184, 148, 31, 0.18) !important;
}
/* Deeper-cream banded sections (the #FAFAFA retarget) — tune toward
a still-subtle warm step so transitions feel like Anthropic's:
cream-on-cream with a barely-there warmth shift, not a contrast band. */
:root, html body {
--b-bg-deep: #F5F1E8 !important;
/* Override Variant-D base tokens so every section consuming
var(--vd-bg) / var(--vd-bg-tint) inherits warm cream, not
cool gray-white. This makes the entire site cream-on-cream. */
--vd-bg: #FCFAF4 !important;
--vd-bg-tint: #F5F1E8 !important;
}
/* White full-bleed sections get a hairline + faint warmth so they
sit on cream as bands, not floating panels. */
html body section[style*="background:#FFFFFF"]:not([style*="border-radius"]),
html body section[style*="background:#fff"]:not([style*="border-radius"]),
html body section[style*="background:#FFF"]:not([style*="border-radius"]),
html body section[style*="background: #FFFFFF"]:not([style*="border-radius"]) {
background: #FCFAF4 !important;
border-top: 1px solid var(--b-hairline) !important;
border-bottom: 1px solid var(--b-hairline) !important;
}
/* White cards on cream pick up a warm hairline so they don't float */
html body div[style*="background:#FFFFFF"][style*="border-radius"]:not([style*="background:#0A0A0A"]),
html body div[style*="background:#fff"][style*="border-radius"]:not([style*="background:#0A0A0A"]) {
border-color: var(--b-hairline) !important;
}
/* Warm-dark anchor sections — these are the rhythm breaks. The
site-level `section[id] { background: var(--vd-bg) }` rule otherwise
forces them to cream; reassert warm-dark with high specificity. */
html body section[style*="background:#0A0A0A"],
html body section[style*="background: #0A0A0A"],
html body section[id="credentials"],
html body section[id="delivery-anchor"] {
background: #0A0A0A !important;
color: #FAF7EE !important;
}
/* Inside warm-dark anchor sections, headings must be cream — the
generic `section h2 { color: var(--vd-ink); -webkit-text-fill-color: var(--vd-ink) }`
rule otherwise wins on specificity AND clobbers via the webkit fill
color, which makes anchor headlines invisible on dark. */
html body section[id="credentials"] h1,
html body section[id="credentials"] h2,
html body section[id="credentials"] h3,
html body section[id="credentials"] p,
html body section[id="delivery-anchor"] h1,
html body section[id="delivery-anchor"] h2,
html body section[id="delivery-anchor"] h3,
html body section[id="delivery-anchor"] p {
color: #FAF7EE !important;
-webkit-text-fill-color: #FAF7EE !important;
}
/* Restore the two-tone editorial accent inside dark anchor h2s and ps —
the amber accent line + the subtly-de-emphasized mid line. */
html body section[id="credentials"] h2 span[style*="color:rgba"],
html body section[id="credentials"] p span[style*="color:rgba"],
html body section[id="delivery-anchor"] h2 span[style*="color:rgba"],
html body section[id="delivery-anchor"] p span[style*="color:rgba"] {
color: rgba(250, 247, 238, 0.55) !important;
-webkit-text-fill-color: rgba(250, 247, 238, 0.55) !important;
}
html body section[id="credentials"] h2 span[style*="#B89BD4"],
html body section[id="delivery-anchor"] h2 span[style*="#B89BD4"],
html body section[id="credentials"] p span[style*="#B89BD4"],
html body section[id="delivery-anchor"] p span[style*="#B89BD4"] {
color: #B89BD4 !important;
-webkit-text-fill-color: #B89BD4 !important;
}
/* New delivery-positioning section (cream) — let the purple span accent
on "We embed engineers." win against the generic h2 webkit-fill rule. */
html body section[id="delivery"] h2 span[style*="#604289"] {
color: #604289 !important;
-webkit-text-fill-color: #604289 !important;
}
/* The editorial pull-quote sits on cream (right after the dark
promise/credentials) so the giant serif statement breathes on a
warm light surface — Anthropic-style. */
html body section[id="pullquote"] {
background: #FCFAF4 !important;
border-top: 1px solid #E5DFD0 !important;
border-bottom: 1px solid #E5DFD0 !important;
}
/* Hero internal vertical rhythm — the triple block sat in a sea of
air. Pull the triple closer to the sub-paragraph. */
html body .vd-triple { margin-top: 1.5rem !important; }
html body .vd-cta-row { margin-top: 1.5rem !important; }
/* Eyebrow tag tighter to H1 */
html body .vd-eyebrow + h1,
html body .vd-eyebrow + #hero-h1 { margin-top: 0.875rem !important; }
/* Homepage H1: hold the 2-line break "Defend every decision / your AI ships."
At the universal clamp (max 4.2rem) the first half wraps inside the
~585px hero copy column. Cap slightly smaller and forbid the first
half from breaking so the in markup defines the line break. */
html body section#hero h1#hero-h1,
html body section.hero h1#hero-h1 {
font-size: clamp(2.0rem, 4.0vw, 3.2rem) !important;
line-height: 1.05 !important;
}
html body section#hero h1#hero-h1 .h1-line,
html body section#hero h1#hero-h1 .accent,
html body section.hero h1#hero-h1 .h1-line,
html body section.hero h1#hero-h1 .accent {
display: block;
white-space: nowrap;
}
/* Narrow viewports: allow natural wrap so neither half overflows */
@media (max-width: 640px) {
html body section#hero h1#hero-h1 .h1-line,
html body section#hero h1#hero-h1 .accent,
html body section.hero h1#hero-h1 .h1-line,
html body section.hero h1#hero-h1 .accent {
white-space: normal;
}
}
/* ═════════════════════════════════════════════════════════════════
BLOG TEMPLATE MIGRATION
/blog/index.html + 8 individual posts share an amber/moss palette
(--primary:#B8941F, --accent:#5A7A3F) that pre-dates the Brihaspati
purple system. Re-skin the shared classes here so every blog page
inherits the unified style without editing each HTML file.
═════════════════════════════════════════════════════════════════════ */
/* Body bg on the listing page */
html body[class] { /* no-op anchor */ }
html body .blog-hero,
html body .post-hero {
background: linear-gradient(135deg, #0A0A0A 0%, #1A1A1A 100%) !important;
}
html body .blog-hero::before,
html body .post-hero::before {
background-image:
radial-gradient(circle at 80% 20%, rgba(184,155,212,0.16) 0%, transparent 55%),
radial-gradient(circle at 15% 85%, rgba(78,44,120,0.18) 0%, transparent 50%) !important;
}
html body .blog-hero h1 em {
background: none !important;
background-image: none !important;
-webkit-background-clip: border-box !important;
background-clip: border-box !important;
-webkit-text-fill-color: #B89BD4 !important;
color: #B89BD4 !important;
}
html body .blog-hero-tag .dot,
html body .post-tag .dot {
background: #B89BD4 !important;
}
html body .blog-hero-tag,
html body .post-tag {
font-family: 'Geist Mono', monospace !important;
border-radius: 6px !important;
}
/* Post card listing */
html body .post-card {
border-radius: 10px !important;
border-color: var(--vd-line) !important;
}
html body .post-card:hover {
box-shadow: 0 18px 44px rgba(78,44,120,0.10) !important;
border-color: rgba(78,44,120,0.25) !important;
}
html body .post-card .tag {
background: rgba(78,44,120,0.08) !important;
color: #4E2C78 !important;
font-family: 'Geist Mono', monospace !important;
border-radius: 6px !important;
}
html body .post-card .arrow,
html body .related-card .arrow,
html body .related-card .tag,
html body a.btn-cta-primary {
color: #4E2C78 !important;
}
/* CTA banner — was amber gradient */
html body .blog-cta-inner,
html body .post-cta {
background: linear-gradient(135deg, #0A0A0A 0%, #1A1A1A 100%) !important;
background-image: linear-gradient(135deg, #0A0A0A 0%, #1A1A1A 100%) !important;
box-shadow: 0 18px 44px rgba(10,10,10,0.18) !important;
border-radius: 12px !important;
}
html body .blog-cta-inner h3,
html body .post-cta h3 {
color: #FFFFFF !important;
-webkit-text-fill-color: #FFFFFF !important;
font-family: 'Source Serif 4', Georgia, serif !important;
}
html body .blog-cta-inner p,
html body .post-cta p {
color: rgba(255,255,255,0.78) !important;
}
html body a.btn-cta-primary {
background: #FFFFFF !important;
color: #0A0A0A !important;
-webkit-text-fill-color: #0A0A0A !important;
border-radius: 6px !important;
font-family: 'Geist', sans-serif !important;
}
html body a.btn-cta-ghost {
background: rgba(255,255,255,0.08) !important;
color: #FFFFFF !important;
border-color: rgba(255,255,255,0.4) !important;
border-radius: 6px !important;
font-family: 'Geist', sans-serif !important;
}
/* Post body editorial accents */
html body .post-body em {
color: #4E2C78 !important;
}
html body .lede,
html body .pullquote {
border-left-color: #4E2C78 !important;
}
html body .pullquote {
background: linear-gradient(90deg, rgba(78,44,120,0.05) 0%, transparent 100%) !important;
}
html body .post-body a {
color: #4E2C78 !important;
text-decoration-color: rgba(78,44,120,0.45) !important;
text-underline-offset: 3px !important;
}
/* "FILED UNDER" tag pills at the end of a post — were amber. */
html body .post-tags a,
html body .tags-row a,
html body .post-tags-label + a,
html body article.post .post-tags a {
background: rgba(78,44,120,0.08) !important;
color: #4E2C78 !important;
-webkit-text-fill-color: #4E2C78 !important;
border-radius: 6px !important;
font-family: 'Geist Mono', monospace !important;
}
html body .post-tags-label {
font-family: 'Geist Mono', monospace !important;
color: var(--vd-ink-faint) !important;
}
/* Ghost button in blog/post CTA — generic article-link override below
was forcing purple. Re-assert white explicitly. */
html body a.btn-cta-ghost,
html body .post-cta a.btn-cta-ghost,
html body .blog-cta a.btn-cta-ghost {
color: #FFFFFF !important;
-webkit-text-fill-color: #FFFFFF !important;
}
/* Scenario box was red */
html body .scenario {
background: #FCFAF4 !important;
border-color: rgba(78,44,120,0.18) !important;
}
html body .scenario-title,
html body .signals-title {
color: #4E2C78 !important;
font-family: 'Geist Mono', monospace !important;
}
html body .issue-icon {
background: rgba(78,44,120,0.12) !important;
color: #4E2C78 !important;
}
/* Listing body bg (cream) */
html body .blog-list,
html body .blog-cta,
html body article.post,
html body .related {
background: var(--vd-bg) !important;
}
/* Headings in blog body — keep editorial serif */
html body .post-body h2,
html body .post-card h2,
html body .blog-cta-inner h3,
html body .post-cta h3,
html body .related-card h4 {
font-family: 'Source Serif 4', Georgia, serif !important;
font-weight: 600 !important;
letter-spacing: -0.02em !important;
}
/* ═════════════════════════════════════════════════════════════════
TAG / TOPIC PAGE MIGRATION
/tag/.html (23 pages) and /tag/ hub all share /public/tag.css
which uses the amber/moss palette. Re-skin the shared classes.
═════════════════════════════════════════════════════════════════════ */
html body .tag-hero {
background: linear-gradient(135deg, #0A0A0A 0%, #1A1A1A 100%) !important;
}
html body .tag-hero::before {
background-image:
radial-gradient(circle at 80% 20%, rgba(184,155,212,0.14) 0%, transparent 55%),
radial-gradient(circle at 15% 85%, rgba(78,44,120,0.18) 0%, transparent 50%) !important;
}
html body .tag-hero h1 {
color: #FFFFFF !important;
-webkit-text-fill-color: #FFFFFF !important;
font-family: 'Source Serif 4', Georgia, serif !important;
font-weight: 600 !important;
letter-spacing: -0.03em !important;
}
html body .tag-hero .subtitle {
color: rgba(255,255,255,0.78) !important;
}
html body .tag-hero .crumbs,
html body .tag-hero .crumbs a {
color: rgba(255,255,255,0.72) !important;
}
html body .topic-pill {
background: rgba(255,255,255,0.08) !important;
border: 1px solid rgba(255,255,255,0.14) !important;
font-family: 'Geist Mono', monospace !important;
border-radius: 6px !important;
}
html body .topic-pill .dot { background: #B89BD4 !important; }
/* Body editorial */
html body .tag-section h2 {
font-family: 'Source Serif 4', Georgia, serif !important;
font-weight: 600 !important;
color: var(--vd-ink) !important;
-webkit-text-fill-color: var(--vd-ink) !important;
}
html body .tag-section .lede {
border-left-color: #4E2C78 !important;
}
html body .tag-section a {
color: #4E2C78 !important;
text-decoration-color: rgba(78,44,120,0.45) !important;
text-underline-offset: 3px !important;
}
/* Resource cards */
html body .resources-title,
html body .siblings-title,
html body .hub-group-label,
html body .hub-card .group {
font-family: 'Geist Mono', monospace !important;
color: var(--vd-ink-faint) !important;
}
html body .res-card,
html body .hub-card {
background: #FFFFFF !important;
border-color: var(--vd-line) !important;
border-radius: 10px !important;
}
html body .res-card:hover,
html body .hub-card:hover {
box-shadow: 0 14px 38px rgba(78,44,120,0.09) !important;
border-color: rgba(78,44,120,0.25) !important;
}
html body .res-card .kind {
color: #4E2C78 !important;
font-family: 'Geist Mono', monospace !important;
}
html body .res-card .arrow,
html body .hub-card .arrow {
color: #4E2C78 !important;
}
html body .res-card h3,
html body .hub-card h3 {
font-family: 'Source Serif 4', Georgia, serif !important;
font-weight: 600 !important;
}
/* FAQ */
html body .faq-section-title {
font-family: 'Source Serif 4', Georgia, serif !important;
font-weight: 600 !important;
}
html body .tag-section + .faq .faq-item,
html body .faq .faq-item {
background: var(--vd-bg-tint) !important;
border-color: var(--vd-line) !important;
border-radius: 10px !important;
}
html body .faq .faq-item h3 {
font-family: 'Geist', sans-serif !important;
font-weight: 600 !important;
color: var(--vd-ink) !important;
-webkit-text-fill-color: var(--vd-ink) !important;
}
/* Sibling chips — were amber on white */
html body .sibling-chip {
background: var(--vd-bg) !important;
border-color: rgba(78,44,120,0.20) !important;
color: #4E2C78 !important;
border-radius: 6px !important;
font-family: 'Geist Mono', monospace !important;
letter-spacing: 0.04em !important;
}
html body .sibling-chip:hover {
background: rgba(78,44,120,0.08) !important;
border-color: rgba(78,44,120,0.35) !important;
}
/* Topic CTA — the amber banner */
html body .topic-cta {
background: linear-gradient(135deg, #0A0A0A 0%, #1A1A1A 100%) !important;
background-image: linear-gradient(135deg, #0A0A0A 0%, #1A1A1A 100%) !important;
box-shadow: 0 18px 44px rgba(10,10,10,0.18) !important;
border-radius: 12px !important;
}
html body .topic-cta h3 {
color: #FFFFFF !important;
-webkit-text-fill-color: #FFFFFF !important;
font-family: 'Source Serif 4', Georgia, serif !important;
font-weight: 600 !important;
}
html body .topic-cta p {
color: rgba(255,255,255,0.78) !important;
}
html body .topic-cta .btn-primary {
background: #FFFFFF !important;
color: #0A0A0A !important;
-webkit-text-fill-color: #0A0A0A !important;
border-radius: 6px !important;
font-family: 'Geist', sans-serif !important;
}
html body .topic-cta .btn-ghost {
background: rgba(255,255,255,0.08) !important;
color: #FFFFFF !important;
-webkit-text-fill-color: #FFFFFF !important;
border-color: rgba(255,255,255,0.4) !important;
border-radius: 6px !important;
font-family: 'Geist', sans-serif !important;
}