/* ============================================================ Shared theme system — Inzaghi Trades Dark is the default (defined in each page's :root). Light is applied when . Color names match every page: --bg --surface --surface-2 --bdr --cyan --cyan-light --cyan-dark --ink-1 --ink-2 ============================================================ */ :root[data-theme="light"] { --bg: #ECF1F8; --surface: #FFFFFF; --surface-2: #F3F6FB; --bdr: #D7E0EC; --cyan: #0097A7; --cyan-light: #4DD0E1; --cyan-dark: #0097A7; --ink-1: #0C1A29; --ink-2: #5B7388; } /* Smooth cross-fade when switching themes */ html, body { transition: background-color .3s ease, color .3s ease; } /* Navbars hardcode a dark translucent background when scrolled — give them a light equivalent in light mode. */ :root[data-theme="light"] #navbar.scrolled { background: rgba(236, 241, 248, .85) !important; box-shadow: 0 1px 0 rgba(15, 30, 50, .08) !important; } /* coming-soon.html builds its backdrop from hardcoded dark gradient layers — swap them for light ones in light mode. */ :root[data-theme="light"] .cs-bg-base { background: radial-gradient(ellipse 75% 65% at 50% 48%, #ffffff 0%, #eef2f8 55%, #dbe5f0 100%) !important; } :root[data-theme="light"] .cs-vignette { background: radial-gradient(ellipse 88% 82% at 50% 50%, transparent 38%, rgba(150, 175, 200, .40) 100%) !important; } /* Light mode: soften dark-tuned shadows + fix ghost button (its border/hover were white, invisible on a light backdrop). */ :root[data-theme="light"] .card-s { box-shadow: 0 1px 2px rgba(15,30,50,.04), 0 10px 28px rgba(15,30,50,.06); } :root[data-theme="light"] .card-s:hover { box-shadow: 0 14px 34px rgba(8,145,178,.12), 0 2px 8px rgba(15,30,50,.08); } :root[data-theme="light"] .partner-card { box-shadow: 0 1px 2px rgba(15,30,50,.04), 0 12px 32px rgba(15,30,50,.07); } :root[data-theme="light"] .partner-card:hover { box-shadow: 0 22px 50px rgba(15,30,50,.10), 0 4px 12px rgba(8,145,178,.10); } :root[data-theme="light"] .btn-ghost { border-color: var(--bdr); color: var(--ink-1); } :root[data-theme="light"] .btn-ghost:hover { border-color: var(--cyan); color: var(--cyan); } /* ===== Theme toggle button ===== */ .theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 999px; border: 1px solid var(--bdr); background: var(--surface-2); color: var(--ink-1); cursor: pointer; flex-shrink: 0; padding: 0; transition: border-color .2s ease, color .2s ease, background .2s ease, transform .2s ease; } .theme-toggle:hover { border-color: var(--cyan); color: var(--cyan); transform: translateY(-1px); } .theme-toggle:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(8, 145, 178, .3); } .theme-toggle svg { width: 18px; height: 18px; display: block; } /* Show the icon for the theme you'll switch TO */ .theme-toggle .icon-moon { display: none; } .theme-toggle .icon-sun { display: block; } :root[data-theme="light"] .theme-toggle .icon-sun { display: none; } :root[data-theme="light"] .theme-toggle .icon-moon { display: block; } /* Big variant for the mobile overlay menu */ .theme-toggle.lg { width: 54px; height: 54px; } .theme-toggle.lg svg { width: 24px; height: 24px; }