/* ───────────────────────────────────────── SMOOTH THEME TRANSITION Specificity (0,0,0) — the lowest possible. Any class- or element-scoped transition in the page stylesheets overrides this, so scroll reveals, hover effects, and the toggle pill all keep their own timings. ───────────────────────────────────────── */ *, *::before, *::after { transition: background-color 0.4s ease, color 0.4s ease, border-color 0.4s ease; } /* ───────────────────────────────────────── LIGHT MODE VARIABLE OVERRIDES Dark mode = :root defaults in each page. Light mode = data-theme="light" on ───────────────────────────────────────── */ /* html[data-theme="light"] specificity = (0,1,1) — beats :root's (0,1,0) */ html[data-theme="light"] { --bg: #edece8; --text: #222427; --div: rgba(34,36,39,0.14); } /* ───────────────────────────────────────── THEME TOGGLE PILL ───────────────────────────────────────── */ .theme-toggle { display: flex; align-items: center; width: 54px; height: 28px; border-radius: 14px; border: 1px solid rgba(237,236,232,0.22); background: rgba(237,236,232,0.10); cursor: pointer; padding: 0; position: relative; flex-shrink: 0; margin-left: 14px; outline: none; -webkit-appearance: none; appearance: none; transition: background 0.28s ease, border-color 0.28s ease; } .theme-toggle:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; } [data-theme="light"] .theme-toggle { background: rgba(34,36,39,0.09); border-color: rgba(34,36,39,0.20); } /* Sliding knob */ .theme-toggle-thumb { position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #edece8; color: #222427; display: flex; align-items: center; justify-content: center; /* Default = dark mode: knob sits on RIGHT */ transform: translateX(26px); transition: transform 0.28s ease, background 0.28s ease, color 0.28s ease; pointer-events: none; } /* Light mode: knob moves to LEFT */ [data-theme="light"] .theme-toggle-thumb { transform: translateX(0); background: #2e3033; color: #edece8; } /* Icons */ .t-icon { width: 11px; height: 11px; flex-shrink: 0; } /* Dark mode default: show moon (right knob) */ .t-sun { display: none; } .t-moon { display: block; } /* Light mode: show sun (left knob) */ [data-theme="light"] .t-sun { display: block; } [data-theme="light"] .t-moon { display: none; } /* Hide toggle on very small viewports to prevent nav overflow */ @media (max-width: 520px) { .theme-toggle { display: none; } } /* ───────────────────────────────────────── LIGHT MODE PAGE-SPECIFIC OVERRIDES ───────────────────────────────────────── */ /* m360 step rows are intentionally dark UI panels — lighten in light mode */ [data-theme="light"] .step-row { background: #d2d0cc; color: var(--text); opacity: 1; } [data-theme="light"] .step-row:hover { background: #c8c6c2; } /* Resume square bullets: #d9d9d9 is too light on a light bg */ [data-theme="light"] .job-bullets li::before { background: #555860; } /* Contact links on homepage */ [data-theme="light"] .contact-link { color: var(--text); } /* ── Keep card & banner text light regardless of mode ── Work grid cards and next-project banners sit on coloured backgrounds — their text should always stay #edece8. */ html[data-theme="light"] .card-title, html[data-theme="light"] .card-desc { color: #edece8; } html[data-theme="light"] .next-eyebrow { color: #edece8; }