/* Night theme for the baked /v/ and /m/ pages — SINGLE SOURCE OF TRUTH. * * Linked by the templates (so newly baked pages paint dark immediately) and * injected by seo-night.js (so pages baked before this change get it too). * It previously existed twice — once inline in each template, once as an * escaped JS string — and the two copies drifted, which is how contrast bugs * survived a fix. Edit here only. */ /* ================================================================== NIGHT THEME — baked, not injected. Matches the homepage: near-black ground, one quiet purple wash, warm off-white ink, gold reserved for the single CTA, cyan for map geometry. Baked into the template so a page renders dark on first paint; the JS-injected copy in seo-night.js only exists to cover pages baked before this change. Colour only — no layout, no content, nothing an SEO crawler reads. ================================================================== */ :root { --vn-bg: #0B0D14; --vn-2: #141826; --vn-3: #1E2334; --vn-ink: #F4F1EA; --vn-ink2: #B8B2C4; --vn-ink3: #857F94; --vn-rule: rgba(244, 241, 234, 0.12); --vn-purple: #8B5BF5; --vn-cyan: #76E7E3; --vn-gold: #E5CB56; } /* Tailwind's CDN build injects its stylesheet at runtime, i.e. after this block, so `bg-canvas` on would otherwise win. */ html, body { background: var(--vn-bg) !important; color: var(--vn-ink) !important; } body.bg-canvas, body.brand-mosaic-page { background-image: none !important; background-color: var(--vn-bg) !important; } header { background: rgba(20, 24, 38, .86) !important; border-color: var(--vn-rule) !important; } header a, header span { color: var(--vn-ink) !important; } /* Every surface the old light layout painted white or cream. Listed explicitly rather than with a blanket selector so nothing that is meant to stay coloured (pin swatches, brand chips) gets flattened. */ .seo-content .seo-fact, .seo-content .seo-list li, .seo-content .seo-mini-preview, .seo-content .ct-pill, .seo-content a.secondary, #map-shell, #loading, #error, #map-expand, #spot-preview .spot-row, #spot-preview .food-chip { background: linear-gradient(180deg, rgba(244,241,234,.055), rgba(244,241,234,.02)) !important; border-color: var(--vn-rule) !important; color: var(--vn-ink2) !important; } .seo-content .seo-fact strong, .seo-content .seo-list li strong, #spot-preview .spot-row strong { color: var(--vn-ink) !important; } .seo-content .seo-fact-label { color: var(--vn-ink3) !important; } /* ---- Contrast repair ------------------------------------------- Measured with a WCAG pass over a live page, not by eye. The light theme's inks survived into the dark one and failed badly: strong / #111 ink ......... ratio 1.03 (needs 4.5) .ct-cta label ............. ratio 1.18 #6011F2 brand purple ...... ratio 2.64 Brand purple is kept as an identity colour but lifted to #8B5BF5, which is the same hue at a luminance this ground can carry. ---------------------------------------------------------------- */ .seo-content strong, .seo-content b, #spot-preview strong, #trip-facts strong { color: var(--vn-ink) !important; } .seo-content [style*="#111"], .seo-content [style*="rgb(17"], #map-shell [style*="#111"] { color: var(--vn-ink2) !important; } /* Small brand-purple text: same hue, luminance this ground can carry. */ .seo-content .seo-eyebrow, #map-eyebrow, .text-accent-purple, { /* removed: matched background declarations too */ } /* Any CTA that inherited dark-on-dark becomes the one gold action. */ .seo-content .ct-cta, .seo-content .seo-actions a, #sticky-cta a, #sticky-cta button { background: var(--vn-gold) !important; color: #14110A !important; border-color: transparent !important; } .seo-content .ct-cta *, .seo-content .seo-actions a * { color: #14110A !important; } /* Muted body copy that used ink-at-55% now reads against the dark. */ .seo-content p, .seo-content li, .seo-content dd, #spot-preview .spot-row span { color: var(--vn-ink2) !important; } .seo-content a:not([class*="cta"]):not(.secondary):not(.inline-block) { color: var(--vn-cyan) !important; } /* ---- Contrast repair, round 2 ------------------------------------ The first pass over-reached. Two specific mistakes, both measured: 1. `[style*="#6011F2"]` matches an inline style ANYWHERE in the attribute, so it recoloured the text of elements whose BACKGROUND is brand purple — purple on purple, 1.72:1. 2. The blanket cyan link colour hit call-to-action links that sit on the gold button — cyan on gold, 1.1:1. Text on a brand surface must contrast with that surface, not with the page, so those cases are stated explicitly here. ------------------------------------------------------------------ */ .seo-content .ct-cta, .seo-content .ct-cta *, .seo-content .seo-actions a, .seo-content .seo-actions a *, .seo-content a.secondary, .seo-content a.inline-block, .bg-ink, .bg-ink *, #sticky-cta a, #sticky-cta a *, #sticky-cta span { color: #14110A !important; } .bg-accent-purple, .bg-accent-purple *, a.text-white, a.text-white * { color: #FFFFFF !important; } /* Faded light-theme inks that survived as inline rgba(). */ #independence-note, #independence-note *, #vrd-proof-cluster div, #vrd-proof-cluster span { color: var(--vn-ink3) !important; } body { background-image: radial-gradient(70rem 46rem at 82% -14%, rgba(139, 91, 245, .15), transparent 64%); background-repeat: no-repeat; background-attachment: fixed; } h1, h2, h3, #map-title { color: var(--vn-ink); letter-spacing: -.02em; text-wrap: balance; } p, li, #map-subtitle { color: var(--vn-ink2); } a { color: var(--vn-cyan); } /* Surfaces: every light card in the baked body, re-grounded. */ .seo-content .seo-card, .seo-content .seo-list li, .seo-content .seo-link-list li, .seo-content .seo-chip-list li:nth-child(3n+3), #spot-preview .spot-row, #spot-preview .food-chip, #trip-facts, #tourism-link { background: linear-gradient(180deg, rgba(244, 241, 234, .055), rgba(244, 241, 234, .02)); border-color: var(--vn-rule); color: var(--vn-ink2); box-shadow: none; } .seo-content .seo-card { border-top-color: var(--vn-purple); } .seo-content h2, .seo-content h3 { color: var(--vn-ink); } .seo-content details { border-color: var(--vn-rule); background: rgba(244, 241, 234, .03); } .seo-content summary { color: var(--vn-ink); } /* The one gold thing on the page is the thing we want tapped. */ .seo-content .seo-actions a, #sticky-cta a, #sticky-cta button { background: var(--vn-gold); color: #14110A; box-shadow: 0 10px 30px -12px rgba(229, 203, 86, .55); } #sticky-cta { background: rgba(20, 24, 38, .92); border-top: 1px solid var(--vn-rule); backdrop-filter: blur(10px); color: var(--vn-ink); } /* Reading measure. The prose was full-bleed app chrome; give it a column so the page reads as an article. */ .seo-content .seo-inner { max-width: 748px; } /* ---- Contrast repair, round 3 --------------------------------------------- Measured on a live page with a WCAG pass. Three cases the earlier rounds missed or caused: 1. Tailwind's opacity utilities (`text-ink/70`, `text-ink/55`) generate rgba(17,17,17,.7) on pages baked BEFORE the tailwind token flip. They need catching by class, since the colour is baked into the utility. 2. The star rating inherited the sticky-CTA's dark-on-gold ink while sitting on the dark bar — dark on dark. 3. Footer links inside the gold CTA block were still taking the page's cyan link colour instead of the button's ink. --------------------------------------------------------------------------- */ [class*="text-ink/"] { color: var(--vn-ink2) !important; } .text-ink { color: var(--vn-ink) !important; } /* Stars are decorative gold on a dark bar, not button ink. */ #vrd-proof-cluster span[aria-hidden="true"], #sticky-cta .stars, #sticky-cta span[aria-hidden="true"] { color: var(--vn-gold) !important; } /* Anything sitting on the gold action surface takes the button's ink. */ .seo-content .seo-actions a, .seo-content .seo-actions a *, .seo-content .ct-cta, .seo-content .ct-cta *, .seo-guide-cta a, .seo-guide-cta a * { color: #14110A !important; } /* ---- Specificity floor ----------------------------------------------------- This sheet has to beat two things it does not control: the baked page's own inline