/* ============================================================================ Coriven — Global Theme (navy / gold) theme.css SINGLE SOURCE OF TRUTH for site color + type. Linked LAST in every so this :root overrides each page's inline :root by cascade order. Palette (locked): deep navy #0C1A36 background · gold #C9A84C accent · Arial. Brand-red (#e8272c) is REMAPPED to gold; red survives only as --error and the [estimated] confidence tag. DO NOT reintroduce red as a brand accent. ============================================================================ */ :root{ /* --- backgrounds (navy ramp) --- */ --bg:#0C1A36; /* page background */ --bg2:#0F2244; --bg3:#15294E; --bg4:#1B3159; --surface:rgba(20,40,75,0.55); /* card */ --surface2:rgba(20,40,75,0.78); --bg-card:rgba(20,40,75,0.55); --bg-card-alt:rgba(20,40,75,0.78); /* --- text --- */ --white:#FFFFFF; --text:#E8ECF4; /* primary */ --text-bright:#FFFFFF; --text-dim:#94A3C0; /* secondary */ --text-muted:#94A3C0; --text-mid:#B4C0D8; --gray:#94A3C0; --dim:#5A6B8C; /* --- gold (brand accent) --- */ --gold:#C9A84C; --gold-bright:#D9BD6B; /* bold inline spans */ --gold-dark:#A98B38; --gold-dim:rgba(201,168,76,0.15); --gold-glow:rgba(201,168,76,0.10); /* --- legacy brand-red vars REMAPPED to gold (do not show red as brand) --- */ --red:#C9A84C; --red-dark:#A98B38; --red-glow:rgba(201,168,76,0.10); --accent:#C9A84C; --accent-glow:rgba(201,168,76,0.15); /* --- semantic / status --- */ --error:#E8272C; /* form errors + [estimated] only */ --green:#22C55E; /* [verified] */ --green-bg:rgba(34,197,94,0.12); --green-border:rgba(34,197,94,0.35); --green-glow:rgba(34,197,94,0.10); --yellow:#EAB308; /* [calculated] amber */ --yellow-green:#84CC16; --orange:#F97316; --blue:#EAB308; /* legacy "calculated" used blue -> amber per spec */ /* --- structure --- */ --border:rgba(255,255,255,0.10); --border-focus:rgba(201,168,76,0.45); --font:Arial, Helvetica, "Helvetica Neue", system-ui, -apple-system, sans-serif; --max:1320px; /* widened from 1200 */ --radius:12px; --transition:0.3s cubic-bezier(.4,0,.2,1); } /* ---------- base ---------- */ html{ background:var(--bg); } body{ background:var(--bg) !important; color:var(--text) !important; font-family:var(--font) !important; line-height:1.7; -webkit-font-smoothing:antialiased; } /* generous, human spacing (de-compact) */ p{ line-height:1.75; } section, .section{ } /* ---------- headings ---------- */ h1{ color:var(--gold); } h2{ color:var(--text-bright); font-weight:700; } h3{ color:var(--gold); } /* gold eyebrows / kickers / section labels: uppercase + letter-spacing */ .eyebrow, .kicker, .label, .section-label, .overline, .tag-label{ color:var(--gold) !important; text-transform:uppercase; letter-spacing:.12em; } /* ---------- links / CTAs ---------- */ a{ color:var(--gold); } a:hover{ color:var(--gold-bright); } /* ---------- cards / surfaces (where pages use these vars they already pick up; this is a safety net for common card class names) ---------- */ .card, .tile, .panel, .box{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); } /* ---------- confidence tags (standardize green / amber / red) ---------- */ .confidence-verified, .conf-verified, .tag-verified, .verified-tag, .badge-verified{ color:var(--green) !important; } .confidence-calculated, .conf-calculated, .tag-calculated, .calculated-tag, .badge-calculated{ color:var(--yellow) !important; } .confidence-estimated, .conf-estimated, .tag-estimated, .estimated-tag, .badge-estimated{ color:var(--error) !important; } /* ---------- global nav override (nav.css is also edited, this is belt+braces for pages with inline navs that use the remapped vars) ---------- */ .nav{ background:rgba(12,26,54,0.95) !important; border-bottom:1px solid var(--border) !important; box-shadow:0 1px 3px rgba(0,0,0,0.35) !important; } .nav-links a{ color:var(--text-dim) !important; } .nav-links a:hover{ color:var(--text-bright) !important; background:rgba(255,255,255,0.05) !important; } .nav-links a.nav-highlight{ color:var(--gold) !important; } .nav-cta{ background:var(--gold) !important; color:#0C1A36 !important; } .nav-cta:hover{ background:var(--gold-bright) !important; } .nav-hamburger span{ background:var(--text-dim) !important; } /* ---------- footer page numbers / accents stay gold ---------- */ .footer a{ color:var(--gold); } /* ============================================================================ INVERTED LIGHT-PAGE NORMALIZERS These pages were originally white-themed (white body / dark text / white cards): the 25 blog articles, the 2 calculators, and the case-studies index. theme.css loads LAST, so these rules flip their dark hardcodes to the navy palette. Class names are page-specific (.article-/.cs-/.calc-/.page-) so these overrides do not collide with the dark-themed pages. ============================================================================ */ /* shared page header on calculators + case-studies index */ .page-title{ color:var(--gold) !important; } .page-desc{ color:var(--text-dim) !important; } /* --- blog articles --- */ .article-title{ color:var(--gold) !important; } .article-body, .article-body em{ color:var(--text) !important; } .article-back, .article-byline{ color:var(--text-dim) !important; } .article-cta a{ color:#0C1A36 !important; } /* navy text on gold button */ /* --- case-studies index cards --- */ .cs-card{ background:var(--surface) !important; border:1px solid var(--border) !important; } .cs-name, .cs-stat-value{ color:var(--text-bright) !important; } .cs-desc, .cs-stat-label{ color:var(--text-dim) !important; } .cs-tag.method{ background:rgba(255,255,255,0.06) !important; color:var(--text-dim) !important; } /* --- calculators (ai-spend-calculator, proof-calculator) --- */ .calc-field label, .toggle-label, .risk-label{ color:var(--text) !important; } .result-big .label, .result-big .sub, .stat-card .s-label, .calc-footer, .toggle-btn{ color:var(--text-dim) !important; } /* --- light footers (case-studies index etc.) --- */ .footer-col h4{ color:var(--text) !important; } .footer-col a, .footer-brand-col p{ color:var(--text-dim) !important; } .footer-col a:hover{ color:var(--gold) !important; }