/* ============================================================ site.css — dark mode layer for rehmanali.com Add to every page's , after the page's own stylesheet. ============================================================ */ /* ── Dark mode token overrides ── */ [data-theme="dark"] { --ink: #EDEAE3; --stone: #BDB9B2; --mist: #8A8680; --surface: #111110; --card: #1C1B19; --card-muted: #161614; --border: #2C2A27; --border-mid: #3E3B37; --accent: #C49A6C; --accent-light: #D4B896; --accent-warm: #C49A6C; /* alias used by writing.css */ } /* ── Nav: hardcoded rgba(250,250,248,...) must be overridden ── */ [data-theme="dark"] nav, [data-theme="dark"] nav#nav { background: rgba(17, 17, 16, 0.95) !important; } /* ── Sticky mobile CTA (index.html) ── */ [data-theme="dark"] .sticky-cta { background: rgba(17, 17, 16, 0.95); border-top-color: var(--border); } /* ── Keep ink-background sections literally dark in dark mode ── Their text uses hardcoded rgba(250,250,248,...) which requires a dark surface to remain readable. */ [data-theme="dark"] #interstitial-cta, [data-theme="dark"] #final-cta, [data-theme="dark"] .article-cta-block { background: #111110; } [data-theme="dark"] #about { background-color: #111110; } [data-theme="dark"] footer { background: #0a0a09; border-top-color: rgba(255, 255, 255, 0.06); } /* ── Dark mode toggle button ── */ .theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--border-mid); background: transparent; cursor: pointer; color: var(--mist); transition: color 180ms ease, border-color 180ms ease; flex-shrink: 0; padding: 0; } .theme-toggle:hover { color: var(--ink); border-color: var(--ink); } .theme-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 50%; } /* Sun shown in light mode, moon in dark mode */ .theme-toggle .icon-sun { display: block; } .theme-toggle .icon-moon { display: none; } [data-theme="dark"] .theme-toggle .icon-sun { display: none; } [data-theme="dark"] .theme-toggle .icon-moon { display: block; }