/* ───────────────────────────────────────────────────────────────────────── Dark mode — the site's original dark-navy/moodboard palette, brought back as a toggle instead of being lost when journal.css repainted the whole site into the light watercolor-paper direction. Loaded after journal.css, so this wins the cascade on equal specificity the same way journal.css already wins over styles.css. Everything here is scoped under [data-theme="dark"] (set on by theme.js, which also persists the choice to localStorage and defaults to the current light theme for anyone who hasn't chosen yet) - so with the attribute absent, the site renders exactly as journal.css already left it, no different from before this file existed. This is NOT a rewrite of journal.css's approach - it's journal.css's mirror image. Every rule below exists because a specific rule in journal.css changed something (a root color token, or a component's color to compensate for one) that needs to go back to its pre-journal value here. Two exceptions on purpose, left alone in both themes since they're not really "color theme" at all: the softened ink-wash card/ button shadows (a stylistic choice, not light-vs-dark), and the fixed music player's vintage-wood-radio redesign (its own self-contained material, never tied to the page's palette to begin with - see its own header comment further down journal.css). The mobile menu panel was already hardcoded dark navy before any of this existed, so it needs nothing here either. ───────────────────────────────────────── */ :root[data-theme="dark"] { --color-midnight: #00021e; --color-ink: #1a1330; --color-pearl: #f8f9fb; --color-platinum: #d9d9d9; --color-accent-red: #c8102e; --color-ember: #ff8a4c; --foreground: var(--color-pearl); --sticker-yellow: #ffd23f; --sticker-pink: #ff6fb0; --sticker-lime: #b6ff5c; --sticker-sky: #5fd8f9; --card: #0a1240; --muted-foreground: #9aa4c2; --glass-bg-dark: rgb(11 22 51 / 55%); --glass-border-dark: rgb(217 217 217 / 12%); --shadow-premium: 0 8px 32px rgb(0 3 41 / 30%), 0 0 0 1px rgb(217 217 217 / 8%); color-scheme: dark; } [data-theme="dark"] body { background-color: var(--color-midnight); background-image: none; } [data-theme="dark"] ::selection { background: rgba(255, 138, 76, 0.35); } /* Halftone: back to the original dot-grid (the wash-bloom look in journal.css was built specifically to sit on light paper). */ [data-theme="dark"] .halftone, [data-theme="dark"] .halftone--tr, [data-theme="dark"] .halftone--bl, [data-theme="dark"] .halftone--mid { background-image: radial-gradient(rgba(255, 255, 255, 0.18) 1.4px, transparent 1.6px); background-size: 15px 15px; filter: none; } [data-theme="dark"] .halftone { opacity: 0.5; } [data-theme="dark"] .halftone--tr, [data-theme="dark"] .halftone--bl { mask-image: radial-gradient(circle, black 40%, transparent 72%); border-radius: 0; } [data-theme="dark"] .halftone--mid { mask-image: radial-gradient(ellipse, black 30%, transparent 70%); border-radius: 0; opacity: 0.3; } [data-theme="dark"] .hero { background: radial-gradient(ellipse 70% 50% at 50% 0%, #170b3a 0%, transparent 60%), linear-gradient(180deg, #0b0424 0%, var(--color-midnight) 55%, #000114 100%); } [data-theme="dark"] .hero__title { color: var(--color-pearl); } /* .oct-* paper-context text: three of the five read --oct-cream (a hardcoded #fffdd0 that was never touched by journal.css and already works correctly against a dark page on its own - just needs journal.css's ink override to stop applying), the other two read --color-pearl directly. */ [data-theme="dark"] .oct-hero__title, [data-theme="dark"] .oct-chapter__title, [data-theme="dark"] .oct-route__name { color: var(--oct-cream); } [data-theme="dark"] .oct-hero__stat-num, [data-theme="dark"] .oct-chapter__kicker { color: var(--color-pearl); } [data-theme="dark"] .site-footer__link { color: var(--color-pearl) !important; } [data-theme="dark"] .poster--orange, [data-theme="dark"] .poster--yellow, [data-theme="dark"] .poster--pink, [data-theme="dark"] .poster--sky, [data-theme="dark"] .poster--lime, [data-theme="dark"] .gimmick-pill--yellow:hover, [data-theme="dark"] .gimmick-pill--sky:hover, [data-theme="dark"] .gimmick-pill--lime:hover, [data-theme="dark"] .trip-card__price, [data-theme="dark"] .intl-card__ribbon { color: var(--color-ink); } [data-theme="dark"] .reel__tag { color: var(--color-midnight); } [data-theme="dark"] .topbar__passport, [data-theme="dark"] .trips-month-tab.is-active, [data-theme="dark"] .trips-month-tab.is-active:hover { color: var(--color-ink); } [data-theme="dark"] .boot-screen__sticker--1, [data-theme="dark"] .sticker--shuffle, [data-theme="dark"] .modal--yellow .modal__eyebrow, [data-theme="dark"] .modal--yellow .modal__headline, [data-theme="dark"] .modal--yellow .modal__quote, [data-theme="dark"] .stamp--unlocked, [data-theme="dark"] .toast--stamp { color: var(--color-ink); } [data-theme="dark"] .topbar__menu-btn, [data-theme="dark"] .theme-toggle { color: var(--color-pearl); } [data-theme="dark"] .seal-wave { opacity: 0.7; } [data-theme="dark"] .gimmick-pill { color: var(--color-pearl); } [data-theme="dark"] .boot-screen__duotone { background: linear-gradient(155deg, rgba(200, 16, 46, 0.55) 0%, rgba(255, 138, 76, 0.4) 45%, rgba(255, 111, 176, 0.5) 100%); mix-blend-mode: color; } [data-theme="dark"] .boot-screen__scrim { background: linear-gradient(180deg, rgba(0, 2, 20, 0.4) 0%, rgba(0, 2, 20, 0.2) 40%, rgba(0, 2, 20, 0.88) 100%); } /* .bl scaffold (brands/creators/deck): back to brands.css's own original aliasing - --bl-cream/-dim/-faint reading straight off the shared tokens again, which now resolve dark-navy-page/light-text the same way this whole file does everywhere else. The photo-scrim/ accent-fill re-scopes further down journal.css (.bl-hero, .bl-final, the peak flow/wheel nodes, etc.) all resolve to var(--color-pearl) or var(--color-ember)/var(--color-accent-red) either way - pearl stays a light value in both themes, so those need no dark-mode counterpart. */ [data-theme="dark"] .bl { --bl-cream: var(--color-pearl); --bl-cream-dim: var(--color-platinum); --bl-cream-faint: rgb(217 217 217 / 45%); } /* .mag-* (goa/gokarna/pondicherry/varkala): body.mag's default text color goes back to pearl, its own original value, now that the page itself is dark navy again. .mag-hero's re-scope in journal.css already resolves to var(--color-pearl) either way, so it needs no counterpart here - same reasoning as .bl's photo-scrim islands above. */ [data-theme="dark"] body.mag { color: var(--color-pearl); } [data-theme="dark"] .mag-cta__questions li { color: var(--color-pearl); } [data-theme="dark"] .xp__outro { color: var(--xp-cream); } [data-theme="dark"] .mag-intro__lede { color: var(--color-pearl); } /* Back to the single bright --mag-accent every one of these five originally read, now that the page itself is dark navy again and the darkened --mag-accent-ink variant isn't needed. */ [data-theme="dark"] .mag-section__eyebrow, [data-theme="dark"] .mag-list__num, [data-theme="dark"] .mag-list__tag, [data-theme="dark"] .mag-pullquote__mark, [data-theme="dark"] .mag-plan__label, [data-theme="dark"] .mag-plan__hint, [data-theme="dark"] .mag-intro p:first-of-type::first-letter, [data-theme="dark"] .xp__intro-sub, [data-theme="dark"] .xp__title, [data-theme="dark"] .xp__tag::after { color: var(--mag-accent); }