/* ============================ THEME DROP-IN (colors only) Load this AFTER your base CSS. Toggle with: ============================ */ /* ---- Baseline tokens (safe defaults if no data-theme set) ---- */ :root{ --brand: #2142ff; /* primary brand color */ --brand-ink: #ffffff; /* text on brand */ --accent: #5b77ff; /* optional secondary accent */ --ink: #111111; /* main text */ --muted: #666666; /* secondary text */ --bg: #ffffff; /* page background */ --surface: #ffffff; /* card background */ --bg-soft: #f7f7f9; /* soft/alt surface (e.g., logo wells) */ --border: rgba(0,0,0,.10); /* generic border color */ --badge-bg: #f0f3ff; /* badge background */ --badge-bd: #dfe6ff; /* badge border */ --link: var(--brand); --link-hover: #1a2bd9; --focus: #7aa2ff; /* focus ring */ } /* ---- Theme: Deep Dark Blue (slightly off-white page) ---- */ html[data-theme="navy"]{ --brand: #0f2a6b; /* deep navy */ --brand-ink: #ffffff; --accent: #2a6af0; /* crisp blue accent */ --ink: #0d1220; --muted: #4c5875; --bg: #f6f8ff; /* “slightly white” with cool cast */ --surface: #ffffff; --bg-soft: #eef2ff; --border: #d9e1ff; --badge-bg: #edf1ff; --badge-bd: #d7e0ff; --link: #214fdb; --link-hover: #183db0; --focus: #6aa2ff; } /* ---- Theme: Professional Deep Red (white page) ---- */ html[data-theme="crimson"]{ --brand: #9b1c31; /* deep, professional red */ --brand-ink: #ffffff; --accent: #d23b4a; /* supporting accent red */ --ink: #111111; --muted: #6a6a6a; --bg: #ffffff; --surface: #ffffff; --bg-soft: #fff5f6; /* soft pinkish well for logos */ --border: #f0d7db; --badge-bg: #ffe9ec; --badge-bd: #ffd1d8; --link: #9b1c31; --link-hover: #7e1628; --focus: #ff90a0; } /* ---- Theme: Deep Blue & Silver (white page) ---- */ html[data-theme="blue-silver"]{ --brand: #0b3d91; /* deep blue */ --brand-ink: #ffffff; --accent: #c0c7d6; /* “silver” accent */ --ink: #0e1422; --muted: #5b6475; --bg: #ffffff; --surface: #ffffff; --bg-soft: #f2f4f8; /* silvery well */ --border: #d9dde6; --badge-bg: #eef1f6; --badge-bd: #e1e6ef; --link: #0b3d91; --link-hover: #072e6e; --focus: #99b4ff; } /* ========================================================== Gentle overrides so existing components use the tokens. (No layout changes—colors only.) ========================================================== */ /* Page + type */ body{ background: var(--bg) !important; color: var(--ink) !important; } a{ color: var(--link); } a:hover{ color: var(--link-hover); } /* Cards / surfaces */ .card{ background: var(--surface) !important; border-color: var(--border) !important; } .card__logo{ background: var(--bg-soft) !important; border-bottom-color: var(--border) !important; } .cards-grid .card, .offer-grid .card{ box-shadow: 0 1px 2px rgba(0,0,0,.06); } /* Badges */ .badges .badge{ background: var(--badge-bg) !important; border-color: var(--badge-bd) !important; color: var(--ink); } /* Buttons (handles both .btn and .button classes if used) */ .btn, .button{ background: var(--brand) !important; border-color: var(--brand) !important; color: var(--brand-ink) !important; } .btn:hover, .button:hover{ filter: brightness(0.95); } .btn--ghost, .button--ghost{ background: var(--surface) !important; color: var(--brand) !important; border-color: var(--brand) !important; } .btn--ghost:hover, .button--ghost:hover{ background: var(--bg-soft) !important; } /* Quick stats tiles & borders */ .stat{ border-color: var(--border) !important; } .quick-stats .label{ color: var(--muted) !important; } /* Ad placeholders or containers you’ve styled */ .ad-row > *{ background: var(--bg-soft) !important; border-color: var(--border) !important; color: var(--muted) !important; } /* Inputs / focus rings */ input, select, textarea{ border-color: var(--border) !important; color: var(--ink) !important; background: var(--surface) !important; } input:focus, select:focus, textarea:focus, a:focus, button:focus{ outline: 3px solid var(--focus); outline-offset: 2px; } /* Small text helpers */ .small, .meta, .disclosure{ color: var(--muted) !important; }