/* ============================================================ Theme layer — loaded on every page AFTER the page stylesheet. Dark is the default (the page CSS). Light mode activates when is set. Sections built on background images or the red brand color intentionally stay dark in both. ============================================================ */ /* ---- Header actions cluster (theme toggle + CTA button) ---- */ .nav-actions{display:flex;align-items:center;gap:12px} /* ---- Theme toggle button (works in both themes) ---- */ .theme-toggle{ display:inline-grid;place-items:center; width:40px;height:40px;flex:none; background:transparent;border:1px solid var(--line); color:inherit;border-radius:9px;cursor:pointer; font-size:16px;line-height:1; } .theme-toggle:hover{border-color:var(--red)} .theme-toggle .i-light{display:none} .theme-toggle .i-dark{display:inline} :root[data-theme="light"] .theme-toggle .i-dark{display:none} :root[data-theme="light"] .theme-toggle .i-light{display:inline} /* ============================================================ LIGHT THEME ============================================================ */ /* Core tokens — these cascade through every rule that already uses var(--ink) / var(--muted) / var(--line). */ :root[data-theme="light"]{ --ink:#f4f6f9; /* page background */ --muted:#59636f; /* secondary text */ --line:rgba(17,26,36,.14); /* borders / hairlines */ --panel:#ffffff; --panel2:#ffffff; } :root[data-theme="light"] body{color:#131b23;background:var(--ink)} /* Sticky header goes light and translucent */ :root[data-theme="light"] header{background:rgba(255,255,255,.9)} /* Alternating sections + full-width strips */ :root[data-theme="light"] .alt{background:#e9edf2} :root[data-theme="light"] .workflow article, :root[data-theme="light"] .video-data-strip, :root[data-theme="light"] .step{background:#ffffff} /* Flat panels / cards → clean white surfaces */ :root[data-theme="light"] .card, :root[data-theme="light"] .benefit, :root[data-theme="light"] .pillar, :root[data-theme="light"] .legacy-card, :root[data-theme="light"] .report, :root[data-theme="light"] .field-component, :root[data-theme="light"] .copy-panel, :root[data-theme="light"] .image-panel, :root[data-theme="light"] .immediate, :root[data-theme="light"] .origin-copy, :root[data-theme="light"] .validation-copy, :root[data-theme="light"] .content, :root[data-theme="light"] .stat, :root[data-theme="light"] .focus-list div, :root[data-theme="light"] .compat div, :root[data-theme="light"] .video-tile{ background:linear-gradient(150deg,#ffffff,#eef2f6); } /* Watermark numbers on hardware cards (were near-white) */ :root[data-theme="light"] .number{color:rgba(0,0,0,.06)} /* Report screenshot backing + empty video placeholder */ :root[data-theme="light"] .report img{background:#f0f2f5} :root[data-theme="light"] .empty-video{ background:radial-gradient(circle at 50% 35%,rgba(225,22,29,.10),transparent 34%),linear-gradient(150deg,#ffffff,#e9eef3); color:#4a545e; } /* Footer */ :root[data-theme="light"] footer{color:#5a6673} /* ---- Keep text readable on RED brand surfaces ---- */ :root[data-theme="light"] .topbar, :root[data-theme="light"] .demo, :root[data-theme="light"] .contact, :root[data-theme="light"] .time-strip, :root[data-theme="light"] .cta h2, :root[data-theme="light"] .btn{color:#fff} /* ---- Image-backed sections stay dark: force their text light ---- */ /* Install / Home hero (background photo) */ :root[data-theme="light"] .page-install .hero h1, :root[data-theme="light"] .page-install .hero h2, :root[data-theme="light"] .page-home .hero h1, :root[data-theme="light"] .page-home .hero h2{color:#fff} :root[data-theme="light"] .meta{color:#fff} /* Proof photos, yard band, origin photo, portrait caption (over images) */ :root[data-theme="light"] .photo-overlay h3, :root[data-theme="light"] .yard-copy h3, :root[data-theme="light"] .origin-photo h3, :root[data-theme="light"] .portrait-caption{color:#fff} /* Architecture section is a dark diagram scene in both themes */ :root[data-theme="light"] .arch-copy h3, :root[data-theme="light"] .arch-point strong{color:#fff} :root[data-theme="light"] .arch-copy p, :root[data-theme="light"] .arch-point span{color:#c7d0d9} /* About & Contact heroes are flat gradients (no photo, opaque dark bg from about.css) → flip them to light so the dark heading text stays readable. */ :root[data-theme="light"] .page-about .hero, :root[data-theme="light"] .page-contact .hero{ background:radial-gradient(circle at 75% 30%,rgba(223,23,29,.10),transparent 32%),linear-gradient(135deg,#eef2f6,#f6f8fa 55%,#eaeef3); } :root[data-theme="light"] .page-about .hero p, :root[data-theme="light"] .page-contact .hero p{color:#48525c}