/* Global Styles */ body { font-family: 'Lexend', sans-serif; -webkit-tap-highlight-color: transparent; } /* Hide scrollbars while keeping scroll functionality */ .hide-scrollbar { -ms-overflow-style: none; scrollbar-width: none; } .hide-scrollbar::-webkit-scrollbar { display: none; } /* ===== Dynamic Theme CSS Variables =================================================== Defaults match the original green theme. Overridden at runtime by applyTheme() in global.js (reads from CompanyData API) or by the inline script which applies the cached value from localStorage. Colors are stored as bare "R G B" channel triplets so Tailwind's `rgb(var(--theme-X) / )` colour format works with opacity modifiers. ======================================================================================== */ :root { --theme-primary: 19 236 91; /* #13ec5b – electric green */ --theme-bg-dark: 16 34 22; /* #102216 – deep forest dark */ --theme-bg-light: 246 248 246; /* #f6f8f6 – near-white */ --theme-card-dark: 28 39 31; /* #1c271f – card background */ --theme-card-active: 37 50 41; /* #253229 – active/hover card */ --theme-text-muted: 157 185 166; /* #9db9a6 – muted text */ --theme-glow: 0 0 10px rgb(19 236 91 / 0.6); /* Light-mode variants (used when html:not(.dark) remaps below) */ --theme-card-light: 255 255 255; /* white cards */ --theme-card-light-active: 234 244 238; /* very light green hover card */ --theme-text-light-muted: 95 130 108; /* readable muted green on white */ } /* ── Light mode ─────────────────────────────────────────────────────────────── Remap the "dark-named" CSS variables to their light equivalents. Every existing Tailwind class (bg-background-dark, bg-card-dark, etc.) automatically renders correctly in both modes — no HTML changes needed. ───────────────────────────────────────────────────────────────────────── */ html:not(.dark) { --theme-bg-dark: var(--theme-bg-light); --theme-card-dark: var(--theme-card-light); --theme-card-active: var(--theme-card-light-active); --theme-text-muted: var(--theme-text-light-muted); } /* Smooth transition while switching modes (added/removed by toggleDarkMode()) */ html.mode-transitioning, html.mode-transitioning * { transition: background-color 0.25s ease, border-color 0.25s ease, color 0.15s ease, box-shadow 0.25s ease !important; } /* ── Floating dark/light toggle button (injected by global.js on all pages) ─ */ .js-dark-toggle-btn { position: fixed; bottom: 5.5rem; /* sits above the mobile footer nav */ right: 1rem; z-index: 50; width: 2.5rem; height: 2.5rem; border-radius: 9999px; background: rgb(var(--theme-card-dark)); border: 1px solid rgb(var(--theme-primary) / 0.35); display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 2px 12px rgb(0 0 0 / 0.25); transition: transform 0.15s, background-color 0.25s; } .js-dark-toggle-btn:hover { transform: scale(1.08); } .js-dark-toggle-btn span { font-size: 1.25rem; color: rgb(var(--theme-primary)); line-height: 1; } /* Dark toggle is in the burger/sidebar menu — hide the floating button everywhere */ .js-dark-toggle-btn { display: none !important; } /* ── Mode-icon visibility ──────────────────────────────────────────────────── */ /* .js-dark-icon-dark = element shown when dark mode is active (e.g. ☀ "Go light") */ /* .js-dark-icon-light = element shown when light mode is active (e.g. 🌙 "Go dark") */ .js-dark-icon-dark { display: none; } .js-dark-icon-light { display: block; } html.dark .js-dark-icon-dark { display: block; } html.dark .js-dark-icon-light { display: none; }