/* Karthikeyan Wealth — theme tokens. Switch themes at runtime by setting data-theme="dark" | "light" on . Add a new theme by adding another :root[data-theme="..."] block — no HTML/JS changes needed. */ :root, :root[data-theme="dark"] { --ink: 10 12 16; /* page background */ --surface: 17 20 26; --elevated: 24 29 38; --line: 34 41 54; --muted: 142 152 168; --primary: 212 175 55; /* gold — primary brand accent */ --secondary: 212 175 55; --paper: 244 244 246; /* main foreground/text */ } :root[data-theme="light"] { --ink: 250 249 246; /* pearl */ --surface: 255 255 255; --elevated: 243 244 246; --line: 229 231 235; --muted: 107 114 128; --primary: 6 78 59; /* emerald — primary brand accent */ --secondary: 180 83 9; /* brass — secondary accent */ --paper: 17 24 39; /* main foreground/text */ } /* ---------- Nav links (shared across every page) ---------- */ .nav-link { position: relative; } .nav-link::after { content: ''; position: absolute; bottom: -6px; left: 0; width: 0; height: 1.5px; background: rgb(var(--paper)); transition: width 0.3s ease; } .nav-link:hover::after { width: 100%; } .nav-link.active::after { width: 100%; background: rgb(var(--primary)); } /* ---------- Mobile nav dropdown (animated open/close, toggled via .open) ---------- */ .mobile-menu { max-height: 0; opacity: 0; transform: translateY(-6px); overflow: hidden; pointer-events: none; transition: max-height 0.35s ease, opacity 0.25s ease, transform 0.25s ease; } .mobile-menu.open { max-height: 24rem; opacity: 1; transform: translateY(0); pointer-events: auto; box-shadow: 0 20px 40px rgba(0, 0, 0, 0.35); }