/* ============================================================ Dygram Designs — dark theme Loaded last on every page. Activated by data-theme="dark" on , set before first paint by the inline script in . This is now almost entirely a TOKEN SWAP. styles.css separates "always dark / always light" (--ink, --paper) from the roles that actually flip (--bg, --fg, --card, --slab, --surface, --line, --mute), so flipping seven values carries the whole site. The previous version was ~200 lines of per-component overrides and was the direct cause of white headings rendering on white cards. The one rule survives unchanged: lime is a FILL. On #0A0C0A it measures 13.9:1, so it also works as an accent colour here. ============================================================ */ :root[data-theme="dark"]{ --bg:#0A0C0A; --fg:#F2F2ED; --card:#151913; --slab:#151913; /* dark slabs must sit ABOVE the page, not match it */ /* #131711 sat four points from the page background — cards effectively did not separate from it, which is what made the whole page read as flat. Lifted, and paired with a hairline below: dark UI elevates by tint plus border, not by fill alone. */ --surface:#161B14; --surface-2:#1E241C; --card-line:rgba(255,255,255,.07); --line:#283022; --mute:#9CA598; /* 7.4:1 on --bg */ --nav-bg:rgba(10,12,10,.82); --accent-text:var(--lime); /* 13.9:1 on the dark page */ --ink-70:rgba(242,242,237,.70); --shadow-card:0 1px 2px rgba(0,0,0,.4),0 8px 24px -12px rgba(0,0,0,.6); --shadow-float:0 12px 40px -12px rgba(0,0,0,.7); } /* ---------- the few things a token swap cannot reach ---------- */ /* The hero gradient already ends at --bg, so it resolves on its own. Only the final hand-off stop needs re-weighting or it steps against the page. */ [data-theme="dark"] .hero{ /* Dark has a far shorter luminance run to cover, so it needs fewer stops — but the same oklab interpolation and the same long ramp. */ background:linear-gradient(180deg, #080A08 0%,#090909 34%,#0E1009 56%,#151810 72%,#171A12 86%,var(--bg) 100%); background:linear-gradient(180deg in oklab, #080A08 0%,#090909 34%,#0E1009 56%,#151810 72%,#171A12 86%,var(--bg) 100%); } /* Nested fills inside a dark slab need to lift, not darken. */ [data-theme="dark"] .section--dark .step, [data-theme="dark"] .section--dark .why__item{background:rgba(255,255,255,.06)} /* The featured package card is --slab, which now equals --card, so it would lose its distinction. Lime outline restores it. */ [data-theme="dark"] .pkrow--on{box-shadow:inset 0 0 0 1.5px var(--lime)} /* Guide covers and review cards on the portfolio page are light documents; letterboxing them on a dark mat reads as a print error, so they stay light. */ [data-theme="dark"] .rev,[data-theme="dark"] .guide__cover{background:#FFF;color:#080A08} /* The card is forced white but its children still resolved --fg / --mute, which are LIGHT in dark mode — light text on a white card, measured at 1.12:1. Pin every descendant that sets its own colour back to ink. */ [data-theme="dark"] .rev .rev__who b, [data-theme="dark"] .rev .rev__rate b, [data-theme="dark"] .rev blockquote, [data-theme="dark"] .rev .rev__body{color:#080A08} [data-theme="dark"] .rev .rev__meta span, [data-theme="dark"] .rev .rev__who span, [data-theme="dark"] .rev figcaption{color:#4A5247} [data-theme="dark"] .rev .rev__stars i{color:#B8901A} /* The reviews band is lime in dark too, so its heading and stats must be ink rather than the light --fg they were inheriting. */ [data-theme="dark"] .revs .h2, [data-theme="dark"] .revs__stat, [data-theme="dark"] .revs__stat b{color:var(--ink)} [data-theme="dark"] .revs__note{color:rgba(8,10,8,.72)} /* ---------- theme toggle ---------- */ .themetoggle{ width:calc(var(--pod-h) - .7rem);height:calc(var(--pod-h) - .7rem); flex:none;display:grid;place-items:center; border-radius:var(--r-pill);cursor:pointer; color:rgba(255,255,255,.7);background:rgba(255,255,255,.07); transition:background-color .2s var(--ease),color .2s var(--ease); } .themetoggle:hover{background:rgba(255,255,255,.16);color:#FFF} .themetoggle svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round} .themetoggle .i-moon{display:none} [data-theme="dark"] .themetoggle .i-moon{display:block} [data-theme="dark"] .themetoggle .i-sun{display:none} /* The pods sit slightly above the page in dark so they still read as objects rather than merging into the background. */ [data-theme="dark"]{--pod:#191E17;--pod-line:rgba(255,255,255,.13)} @media (max-width:860px){ .nav__inner .themetoggle{display:none} .nav__mobile .themetoggle{display:grid;margin-top:1rem} .pf .nav__inner .themetoggle{display:grid;width:36px;height:36px} }