/* ========================================================================== "dusk" — read from the illustration. LIVE ON PRODUCTION since 2026-09-15. Loaded unconditionally from default.hbs, after cosmic-colors.css. It overrides that file's violet palette; everything else in cosmic-colors (type scale, block rhythm, image ratios, Koenig cards, font families) still applies and is NOT duplicated here. To roll back to the violet aamir-cosmic palette: remove the for this file from default.hbs. Nothing else references it. A dark room looking out at a sunset: deep indigo dominating, with the sky burning gold through orange into magenta, a star field above it, and cool teal as the one non-warm note. Why the darks are rich here and were mud in the previous attempt: these sit at 59-75% SATURATION but very LOW lightness. The sewer palette had the opposite — low chroma at mid lightness, which is mud at any hue. ground: deep indigo #120E28 65% 1.00 dominant, as asked panel #1C1640 66% 1.11 panel lit #261E52 63% 1.24 border #3A2D6E 59% 1.59 ink: lavender white #EDE7FF 9% 15.61 body text ink: dim lavender #A093CC 28% 6.74 secondary sun gold #FFD166 60% 13.01 links planet teal #3DD6D0 71% 10.48 code - the cool note sunset orange #FF8C42 74% 8.11 cloud magenta #E8459B 70% 5.14 accent ========================================================================== */ :root, [data-theme="dark"], [data-theme="light"] { --ghost-accent-color: #E8459B !important; --c-theme: #E8459B; /* cloud magenta — the chromatic mass */ --c-body-bg: #120E28; /* deep indigo, dominant */ --c-text-main: #EDE7FF; /* lavender white */ --c-text-light: #A093CC; /* dim lavender */ --c-gray-lighter: #1C1640; /* panel */ --c-gray-light: #261E52; /* panel, lit */ --c-border: #3A2D6E; --c-border-light: #261E52; --c-white: #EDE7FF; --c-black: #0C0820; /* deepest silhouette */ --c-button-text: #120E28; --c-success: #3DD6D0; --c-error: #FF8C42; --c-shadow: 0 18px 48px rgba(6, 4, 18, 0.7); } ::selection { background: color-mix(in srgb, #E8459B 34%, transparent); } /* Headings are the sky itself: sun gold burning through orange into the magenta cloud line. Hues 42deg -> 23deg -> 328deg is a continuous 74deg warm sweep — analogous, so it reads as a sunset and not as a spectrum. */ h1, h2, h3, h4, h5, h6 { background-image: linear-gradient(100deg, #FFD166, #FF8C42 48%, #E8459B) !important; -webkit-background-clip: text !important; background-clip: text !important; -webkit-text-fill-color: transparent !important; /* The illustration is flat, so the bloom is barely there — just enough to suggest the sun. Delete for fully flat. */ filter: drop-shadow(0 0 10px rgba(255, 140, 66, 0.16)); } .h1, .h2, .h3, .h4, .h5, .h6 { color: #FFD166; } /* Inline code takes the teal — the little planet on the mobile, and the only cool colour in the frame. It keeps code distinct from gold links. */ .post-content :not(pre) > code, .post-content code:not([class*="language-"]) { background-color: #1C1640 !important; color: #3DD6D0 !important; border-color: #3A2D6E; } :not(pre) > code { color: #3DD6D0; } /* Links: sun gold. */ .post-content a { color: #FFD166; border-bottom-color: #6B5320; } .post-content a:hover { color: #FFE39C; border-bottom-color: #FFD166; } /* ========================================================================== The ground mirrors the illustration's composition: night sky with stars up top, the sunset burning low and off-centre, dark silhouette closing in at the edges. No pattern tiles — this scene is lit, not printed. ========================================================================== */ body { background-image: /* stars — white, gold and a little magenta, sparse and small */ radial-gradient(rgba(237, 231, 255, 0.55) 0.8px, transparent 1.4px), radial-gradient(rgba(255, 209, 102, 0.40) 0.9px, transparent 1.6px), radial-gradient(rgba(232, 69, 155, 0.30) 0.8px, transparent 1.5px), /* the sun, low and off to one side, burning through cloud */ radial-gradient(ellipse 620px 380px at 72% 88%, rgba(255, 209, 102, 0.22), transparent 66%), radial-gradient(ellipse 900px 520px at 68% 92%, rgba(255, 140, 66, 0.18), transparent 70%), radial-gradient(ellipse 1200px 700px at 58% 96%, rgba(232, 69, 155, 0.16), transparent 72%), /* night sky deepening upward */ radial-gradient(ellipse 1400px 900px at 40% 2%, rgba(34, 70, 126, 0.30), transparent 70%), /* the room closing in */ radial-gradient(ellipse 150% 118% at 50% 52%, transparent 40%, rgba(12, 8, 32, 0.72) 92%); background-size: 340px 300px, 520px 460px, 700px 620px, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%; background-attachment: scroll, scroll, scroll, fixed, fixed, fixed, fixed, fixed; background-color: #120E28; } /* -------------------------------------------------------------------------- NAV LINKS — a purple tint at rest. The three nav links sat on --c-text-main (#EDE7FF), the same lavender white as body copy, so they read as text rather than as navigation. #D9CCF7 keeps the hue (258deg, unchanged) and drops lightness 95% -> 88%: enough violet to see, not enough to look like a different colour. Contrast stays high — 10.97 over the transparent header at the top of the page, 12.45 once the header goes solid on scroll. HOVER IS DELIBERATELY NOT TOUCHED. The vendor rule `.nav-wrap a:active, :focus, :hover { color: var(--c-theme) }` is (0,2,1) and this is (0,2,0), so hover still wins on specificity and still lands on the accent magenta. The fade is the global `a { transition: all .25s }`, also untouched — it now simply runs from violet instead of from white. Scoped to `.nav-link`, which only the three text links carry, so the search icon in the same nav keeps its own colour. -------------------------------------------------------------------------- */ .nav-wrap .nav-link { color: #D9CCF7; }