/* ============================================================================ Datapyre Technologies — Theme system (light / dark) ---------------------------------------------------------------------------- The default look (deep-navy dark) lives in each page's inline :root and is left untouched. This file ONLY adds: 1. the light-mode palette + targeted fixes, under :root[data-theme="light"] 2. the nav theme-toggle button styling (works in both modes) Light mode is opt-in: it activates when . Toggle logic + persistence lives in /theme.js ========================================================================== */ /* ── LIGHT PALETTE ───────────────────────────────────────────────────────── Same variable names as the dark :root, flipped for a light surface. Because [data-theme="light"] is more specific than :root, these win regardless of source order. */ :root[data-theme="light"] { --ink: #f4f7fc; /* page background (was #0a1733) */ --ink-soft: #ffffff; /* cards, inputs, surfaces (was #112248) */ --ink-line: #dbe3f0; /* borders, hairlines, grid (was #20335c) */ --paper: #0d1b38; /* primary text (was #eaf0fb) */ --silver: #3c4763; /* secondary text (was #c9d2de) */ --muted: #5a6884; /* muted text (was #8ea0c0) */ --accent: #1a74e0; /* deepened a touch for legibility on white */ --accent-bright:#2e8bff; --accent-dim: #0a5fd0; --gold: #a86a1a; /* darker gold for contrast on light */ } /* ── TARGETED FIXES for hardcoded (non-variable) dark surfaces ───────────── */ /* Frosted nav bars were hardcoded dark; make them frosted-light */ :root[data-theme="light"] nav { background: rgba(255,255,255,0.62); } :root[data-theme="light"] nav.scrolled { background: rgba(244,247,252,0.90); } /* Mobile slide-down menu panel (hardcoded navy) */ @media (max-width: 860px) { :root[data-theme="light"] .nav-links { background: rgba(244,247,252,0.98); } :root[data-theme="light"] .nav-links a:not(.btn){ border-bottom-color: rgba(190,203,224,0.7); } } /* Soften the fixed grid + noise overlays so they read gently on a light bg */ :root[data-theme="light"] body::after { opacity: 0.5; } :root[data-theme="light"] body::before { opacity: 0.02; } /* Small translucent-white surfaces (e.g. footer social chips) need to darken */ :root[data-theme="light"] .social-bar a { background: rgba(10,23,51,0.05); } /* Hero photo scrim was a dark navy wash (text sat light on top). Flip it to a light wash so the now-dark hero text reads, keeping the photo as faint texture. */ :root[data-theme="light"] header.hero::after { background: rgba(244,247,252,0.90); } /* Fixed dark "chrome" bars/buttons whose text uses --muted (now dark): flip their surfaces to light so the dark text stays legible. */ :root[data-theme="light"] #cookie-ribbon { background: rgba(244,247,252,0.96); } :root[data-theme="light"] .scroll-top { background: rgba(244,247,252,0.85); } /* ── WHITE LOGOS / ICONS that vanish on a light surface ───────────────────── These use hardcoded white (text or SVG stroke/fill). CSS beats inline SVG presentation attributes, so we can simply repaint them for light mode. */ /* Client marquee ("Trusted to deliver for") — names were pure white text. */ :root[data-theme="light"] .marquee-inner span { color: var(--paper); } /* Verticals cards: icons are drawn with stroke="#ffffff" on a faint blue tile. Repaint the strokes with the accent and deepen the tile so they read. */ :root[data-theme="light"] .vertical-icon { background: rgba(46,139,255,0.10); } :root[data-theme="light"] .v-card:hover .vertical-icon { background: rgba(46,139,255,0.18); } :root[data-theme="light"] .vertical-icon svg { stroke: var(--accent); } /* Hero tech-orbit badges (NX, Re, Py…) were dark-navy chips carried over from the default theme. Give them a light card look so they belong in light mode. */ :root[data-theme="light"] .orbit-icon .oi-abbr { background: #ffffff; border-color: rgba(26,116,224,0.45); color: #0d1b38; box-shadow: 0 4px 14px rgba(10,23,51,0.10); } :root[data-theme="light"] .orbit-ring-outer .orbit-icon .oi-abbr { border-color: rgba(168,106,26,0.55); } :root[data-theme="light"] .orbit-icon:hover .oi-abbr { background: #ffffff; border-color: rgba(168,106,26,0.9); color: var(--gold); box-shadow: 0 0 16px rgba(168,106,26,0.32); } /* The wordmark PNG is white with gold/blue accents — invisible on light. Sit it on a subtle navy chip so brand colours stay intact. */ :root[data-theme="light"] .logo { background: #0a1733; padding: 7px 14px; border-radius: 12px; box-shadow: 0 2px 10px rgba(10,23,51,0.14); } :root[data-theme="light"] .logo-mark { filter: drop-shadow(0 1px 3px rgba(0,0,0,0.35)); } :root[data-theme="light"] .logo:hover .logo-mark { filter: drop-shadow(0 0 12px rgba(194,125,40,0.55)); } /* ── THEME TOGGLE BUTTON (present in every nav, styled for both modes) ────── */ .theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; margin-left: 6px; border-radius: 50%; background: transparent; border: 1px solid var(--ink-line); color: var(--muted); cursor: pointer; flex-shrink: 0; transition: color .25s, border-color .25s, background .25s, transform .35s cubic-bezier(0.34,1.56,0.64,1); } .theme-toggle:hover { color: var(--gold); border-color: var(--gold); transform: translateY(-2px) rotate(-12deg); } .theme-toggle:active { transform: translateY(0) scale(0.94); } .theme-toggle .ico { width: 18px; height: 18px; display: none; } /* Dark (default) → offer light: show the sun. Light → offer dark: show the moon. Pure CSS, driven by data-theme. */ .theme-toggle .ico-sun { display: block; } :root[data-theme="light"] .theme-toggle .ico-sun { display: none; } :root[data-theme="light"] .theme-toggle .ico-moon { display: block; }