/* ═══════════════════════════════════════════════════════════════════════ TaxClue — "Ledger & Lamp" LIGHT THEME · Global light professional system ------------------------------------------------------------------------ Loaded LAST in , site-wide, scoped to html[data-theme="light"]. Strategy -------- The whole public site is built on quantum.css's DARK design tokens (--navy-void bg, --bone text, --navy-surface cards …). Rather than rewrite every template, we REMAP those tokens to light values here. Because html[data-theme="light"] (0,0,1,1) out-specifies plain :root (0,0,1,0), this also overrides the ~34 tool-page inline :root duplicates. Beyond the token remap we also repair the two things a remap can't reach: · hardcoded DARK section bands (#05080F / #10281A …) → light bands · hardcoded CREAM text literals (rgba(245,240,230,…)) → ink on light Intentionally kept DARK: the Indian tricolor strip, admin/billing areas. (The footer is now an IVORY light surface — styled in footer.php — see §J.) ═══════════════════════════════════════════════════════════════════════ */ /* ============ A · CORE TOKEN REMAP ============ */ html[data-theme="light"]{ color-scheme: light; /* Surfaces — navy(dark) → cool paper (Ice White / Pure White) */ --navy-void: #FBFAF7; /* page canvas — warm ivory */ --navy-deep: #FFFFFF; /* content block / card — pure white (pops on ivory) */ --navy-mid: #F6F1E7; /* nested / secondary surface — warm cream */ --navy-surface: #FFFFFF; /* card background */ --navy-line: #E7E1D6; /* warm border / divider */ /* Foreground — cream → ink */ --bone: #101828; /* primary text — ink */ --bone-dim: rgba(16,24,40,.66); /* secondary text — slate */ --bone-faint: rgba(16,24,40,.46); /* muted / captions */ /* Gold ramp — Champagne, shifted deeper for legibility on paper */ --gold: #B45309; /* primary gold — AA on paper */ --gold-bright: #E31937; /* champagne accent / gradient stop */ --gold-soft: rgba(227,25,55,.10); /* wash */ --gold-glow: rgba(227,25,55,.20); /* glow */ /* Electric blue — technology / interaction / links / tech-CTA */ --blue: #E31937; --blue-600: #C01530; /* deeper — AA for link text on white */ --blue-soft: rgba(227,25,55,.10); /* Cyan token repointed to electric blue (neon cyan is invisible on light) */ --cyan: #C01530; --cyan-soft: rgba(227,25,55,.10); /* Status — calibrated for contrast on light */ --success: #E31937; --danger: #D6293E; --warning: #B45309; --info: #C01530; /* Shadows — soft ink, calibrated for a light background */ --shadow-sm: 0 1px 2px rgba(10,19,43,.05), 0 1px 2px rgba(10,19,43,.04); --shadow-md: 0 2px 6px rgba(10,19,43,.06), 0 10px 24px rgba(10,19,43,.07); --shadow-lg: 0 4px 12px rgba(10,19,43,.07), 0 20px 44px rgba(10,19,43,.10); --shadow-xl: 0 8px 20px rgba(10,19,43,.08), 0 30px 64px rgba(10,19,43,.14); --shadow-gold: 0 8px 28px rgba(227,25,55,.16); --shadow-gold-lg: 0 16px 44px rgba(227,25,55,.20); /* Header token set (defined inline in header.php :root) */ --black: #FFFFFF; /* header bg → paper */ --white: #0A132B; /* header text → ink */ --gold-light: #B45309; /* header accent text */ --gray-100: rgba(10,19,43,.04); --gray-200: rgba(10,19,43,.07); --gray-400: rgba(10,19,43,.40); --gray-600: rgba(10,19,43,.60); --gray-800: rgba(10,19,43,.85); } /* ============ B · BASE / GLOBAL ============ */ html[data-theme="light"] body{ background: var(--navy-void); color: var(--bone); } html[data-theme="light"] ::selection{ background: rgba(227,25,55,.22); color:#0A132B; } html[data-theme="light"]{ scrollbar-color: #E31937 #E7E1D6; } html[data-theme="light"] ::-webkit-scrollbar-track{ background:#F6F1E7; } html[data-theme="light"] ::-webkit-scrollbar-thumb{ background:#D8CFC0; border-radius:8px; } /* Sitewide space-background decorations → warm paper on light */ html[data-theme="light"] .bg-canvas{ background: radial-gradient(60% 45% at 50% 0%, rgba(227,25,55,.06), transparent 70%), radial-gradient(50% 40% at 100% 20%, rgba(10,19,43,.03), transparent 70%), var(--navy-void); } html[data-theme="light"] .bg-grid, html[data-theme="light"] .orb, html[data-theme="light"] .orb-1, html[data-theme="light"] .orb-2{ display:none !important; } /* ============ C · HARDCODED DARK SECTION BANDS → LIGHT BANDS ============ quantum.css paints several section backgrounds with literal dark hex that a token remap cannot reach. Left alone they become black stripes on the light page. Remap them to a calm alternating rhythm: paper ↔ soft ivory, with the occasional faint gold wash. Specificity html[data-theme] #id (0,1,1,1) beats the bare #id (0,1,0,0) rules in quantum.css. */ html[data-theme="light"] #services, html[data-theme="light"] #how, html[data-theme="light"] #comparison, html[data-theme="light"] #case-studies, html[data-theme="light"] #featured-clients, html[data-theme="light"] #downloads-teaser, html[data-theme="light"] #reviews, html[data-theme="light"] #partners, html[data-theme="light"] #about, html[data-theme="light"] #faq, html[data-theme="light"] #compliance-live, html[data-theme="light"] #calc-teaser{ background: var(--navy-void) !important; } /* Alternating WARM cream bands for vertical rhythm. Canvas = ivory (--navy-void); these bands = one warm cream (#F6F1E7). Never pure white here — white is reserved for content blocks so they always pop off the band. */ html[data-theme="light"] #services, html[data-theme="light"] #comparison, html[data-theme="light"] #featured-clients, html[data-theme="light"] #reviews{ background: #F6F1E7 !important; } html[data-theme="light"] #case-studies, html[data-theme="light"] #downloads-teaser{ background: radial-gradient(70% 60% at 50% 0%, rgba(227,25,55,.05), transparent 70%), #F6F1E7 !important; } /* ============ D · GENERIC SURFACES built from literal dark rgba ============ Cards, glass panels and inputs that used rgba(5,16,31,…) / rgba(10,19,43,…) directly (not the token). Force them onto clean paper. */ html[data-theme="light"] .glass, html[data-theme="light"] .card, /* Match only the card CONTAINER (…-card), never its inner sub-elements (…-card-icon / …-card-title / …-card-tag …). Those contain "-card-" and were wrongly getting a white box + border, drawing outline rectangles around every element inside a card. */ html[data-theme="light"] [class*="-card"]:not([class*="-card-"]), html[data-theme="light"] .q-form-wrap, html[data-theme="light"] .q-cs, html[data-theme="light"] .q-rv, html[data-theme="light"] .ind-fcard, html[data-theme="light"] .ind-card{ background: #FFFFFF; border: 1px solid var(--navy-line); box-shadow: var(--shadow-sm); /* every block lifts off the band */ } /* ============ E · CREAM TEXT LITERALS → INK ============ rgba(245,240,230,…) hardcoded across cards is near-invisible on paper. */ html[data-theme="light"] [style*="245,240,230"], html[data-theme="light"] .q-cs p, html[data-theme="light"] .q-rv-quote, html[data-theme="light"] .q-rv-role, html[data-theme="light"] .q-rv-name, html[data-theme="light"] .q-client-name, html[data-theme="light"] .q-ptnr-item span{ color: var(--bone-dim); } html[data-theme="light"] .q-cs h3, html[data-theme="light"] .q-rv-name{ color: var(--bone); } /* ============ F · HOME HERO (space → ledger) ============ */ html[data-theme="light"] .qhp-hero{ background: radial-gradient(ellipse 62% 52% at 50% 0%, rgba(227,25,55,.12), transparent 70%), linear-gradient(180deg, #FFFFFF 0%, #FBFAF7 60%, #F6F1E7 100%) !important; animation: none !important; border-bottom: 1px solid var(--navy-line); } /* Hide the night-sky layers — white stars are wrong on paper */ html[data-theme="light"] .ph-sky, html[data-theme="light"] .ph-sky-stars, html[data-theme="light"] .ph-sky-stars2, html[data-theme="light"] .ph-shooting-star, html[data-theme="light"] .ph-aurora, html[data-theme="light"] #mythWarp{ display:none !important; } /* Keep a faint ledger grid instead of the gold neon grid */ html[data-theme="light"] .ph-grid-bg{ background-image: linear-gradient(rgba(10,19,43,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(10,19,43,.035) 1px, transparent 1px); opacity: 1 !important; } /* Aurora + dark vignette pseudo-elements → soft gold wash on light */ html[data-theme="light"] .qhp-hero::before{ background: linear-gradient(115deg, transparent 20%, rgba(227,25,55,.06) 45%, transparent 75%) !important; } html[data-theme="light"] .qhp-hero::after{ display:none !important; } html[data-theme="light"] .ph-spotlight{ display:none !important; } /* Tricolor gradient-clip headings → ink + gold (white stop invisible on paper) */ html[data-theme="light"] .ph-h1{ background:none !important; -webkit-text-fill-color:#0A132B !important; color:#0A132B !important; } html[data-theme="light"] .ph-h1 em{ background:none !important; -webkit-text-fill-color:var(--gold) !important; color:var(--gold) !important; font-style: italic; } html[data-theme="light"] .ph-tagline{ background:none !important; -webkit-text-fill-color:#8A4B09 !important; color:#8A4B09 !important; } html[data-theme="light"] .ph-stat-num{ color:#0A132B !important; } html[data-theme="light"] .ph-sub{ color: var(--bone-dim) !important; } /* Floating dashboard cards → clean paper with soft ink shadow */ html[data-theme="light"] .ph-float-card, html[data-theme="light"] .qhp-mod{ background:#FFFFFF !important; border-color:var(--navy-line) !important; color:var(--bone-dim) !important; box-shadow: var(--shadow-md); opacity: 1 !important; } html[data-theme="light"] .ph-float-card .fc-icon{ background: rgba(227,25,55,.10); } html[data-theme="light"] .ph-float-card .fc-status{ color: var(--success); } /* ============ G · SERVICE-PAGE hero decorations ============ */ html[data-theme="light"] .sp-const, html[data-theme="light"] .sp-const-star, html[data-theme="light"] .sp-star, html[data-theme="light"] .sp-nebula, html[data-theme="light"] .sp-rocket{ display:none !important; } html[data-theme="light"] .sp-hero{ background: radial-gradient(ellipse 60% 50% at 50% 0%, rgba(227,25,55,.10), transparent 70%), linear-gradient(180deg,#FFFFFF,#FBFAF7) !important; } /* ============ H · GOLD BUTTONS — force ink text on gold ============ */ html[data-theme="light"] .btn-primary, html[data-theme="light"] .sp-btn, html[data-theme="light"] .cta-primary, html[data-theme="light"] .qhp-cta-primary, html[data-theme="light"] .ph-cta-primary, html[data-theme="light"] .ph-btn-primary, html[data-theme="light"] .btn-gold, html[data-theme="light"] [class*="cta"][class*="primary"]{ color:#0A132B !important; } /* Carousel edge-fades used --navy-void (now ivory) — keep them matching */ html[data-theme="light"] .q-clients-outer::before, html[data-theme="light"] .q-ptnr-outer::before{ background:linear-gradient(to right,var(--navy-void),transparent) !important; } html[data-theme="light"] .q-clients-outer::after, html[data-theme="light"] .q-ptnr-outer::after{ background:linear-gradient(to left,var(--navy-void),transparent) !important; } /* ============ I · MISC hardcoded structural overrides ============ */ html[data-theme="light"] #btt{ background:#FFFFFF !important; border:1px solid var(--navy-line) !important; color:var(--gold) !important; box-shadow: var(--shadow-md) !important; } html[data-theme="light"] #btt:hover{ background: var(--gold-soft) !important; } html[data-theme="light"] .skip-link{ background: var(--gold); color:#0A132B; } /* Scroll progress bar → gold on light */ html[data-theme="light"] #tc-progress{ background: linear-gradient(90deg,#E31937,#F5405E); } /* ============ J · FOOTER: now LIGHT (ivory) to match the light theme ============ */ /* Footer was previously kept deep-navy as an anchor; it is now an ivory surface styled entirely within footer.php (.tcf), so it must render in the light color-scheme. Do NOT force color-scheme:dark here or form controls/scrollbars inside the footer would flip back to dark. */ html[data-theme="light"] footer, html[data-theme="light"] .tcf, html[data-theme="light"] .site-footer{ color-scheme: light; } /* ============ K · REDUCED MOTION ============ */ @media (prefers-reduced-motion: reduce){ html[data-theme="light"] .qhp-hero, html[data-theme="light"] .ph-grid-bg, html[data-theme="light"] .ph-float-card, html[data-theme="light"] .ph-btn-primary, html[data-theme="light"] [class*="-track"], html[data-theme="light"] .ph-h1, html[data-theme="light"] .ph-sub, html[data-theme="light"] .ph-ctas, html[data-theme="light"] .ph-tagline{ animation:none !important; opacity:1 !important; transform:none !important; } } /* ============ M · HEADER ============ The main header + mega-menu + mobile drawer were rebuilt LIGHT-FIRST in templates/partials/header.php (self-contained `--h-*` token block, navy ink + crimson + amber on white paper). That inline CSS is now the single source of truth, so the old dark-remap overrides that used to live here are gone — keeping them would fight the new crimson-accent hover/active states. Nothing to remap here anymore. */ /* ============ N · FORM CONTROLS (global light fix) ============ Many pages hardcode DARK input backgrounds left over from the dark theme — `.dl-modal-form input` (rgba(5,16,31,.6)), `.bna-field input`, `.cr-field input` (rgba(5,16,31,.7)), popup inline `rgba(0,0,0,.3)`, `.cw-select option` (#05101f), etc. A token remap can't reach a literal background, so those fields render as dark blocks on the light site. Force every REAL text field onto a light surface site-wide. `!important` is required to beat both later-in-body page