/* ════════════════════════════════════════════════════════════════════════ * dp-home.css — the media-first homepage, in two themes. * * SCOPE. This file owns the homepage's own chrome: header, hero reel, * Hot/Latest tabs, the card grid, the pop-out panel. The CARD itself is * public/css/dp-attraction-card.css and is deliberately independent of * everything here — same card, dark page, white page or pop-out panel. * * TWO THEMES, ONE TOKEN SET (Aug 2026) * ───────────────────────────────────── * DARK IS THE DEFAULT. The page shipped white; the feedback was that it * read as a different website from /share, /profile, /download and the * portals, all of which are the purple register. So the dark values are * now the ones the page renders with, and the white ones are kept intact * behind an env var (HOME_THEME=light — see lib/pageTheme.js) so the two * can be compared on the live page and so reverting is a restart rather * than a deploy. * * Which one applies is a class on BOTH and : .dp-dark or * .dp-light, written by views/home.ejs. Both blocks below define exactly * the same six --dp-* tokens with different values, and nothing under * this line — nor in dp-attraction-feed.css or dp-attraction-panel.css — * references a literal colour. That is what keeps the themes in sync: a * new rule written against the tokens is correct in both by * construction, and a rule written against a hex is a bug in one of them. * * The class is on as well because a root element with a * non-transparent background stops the browser propagating 's * background to the canvas. Painting only body left Safari filling its * rubber-band overscroll white above a dark page. /download hit the same * thing from the other direction — see html.dl-light in views/download.ejs. * * WHAT NEITHER THEME TOUCHES * ────────────────────────── * public/css/mydreampark-ui.css is dark-only and this page uses its * components — the auth modal above all, which is what "Build Your Park" * eventually reaches. We do NOT restyle it and we NEVER override its * --mdp-ui-* tokens: those would leak into every modal on the page. * * That rule did not relax when the default went dark. The dark theme * COMPOSES with those tokens — it reads --mdp-ui-ink-void and * --mdp-ui-ink-deep to build its background, with the literals repeated * as fallbacks — rather than redefining them. Reading is safe; writing * is what leaks. * * NO TEXT IS A DESIGN CONSTRAINT, NOT A LICENCE * ───────────────────────────────────────────── * The only visible words on this page are the two buttons and the * Hot/Latest selector. Everything that makes the page findable and usable * — the

, the JSON-LD, aria-labels, alt text — is present and * invisible. .sr-only below is load-bearing, not a leftover. * ════════════════════════════════════════════════════════════════════ / / ── Tokens that are the same in both themes ─────────────────────────── * The brand violet, straight from .dl-mega on /download — same three * stops, so the two pages' CTAs are the same object. It does not flip * between themes: the violet IS the brand, and the only thing that * changes with the background is how much glow it can carry (see the * .dp-cta block). / .dp-light, .dp-dark { --dp-violet: #7700ff; --dp-violet-2: #9d4edd; --dp-violet-3: #c77dff; / THE VIOLET BUTTON'S PAINT, as one token rather than one recipe * copied per button. Two things wear it — the header's GET pill and, * on the dark page, the Discord button in the middle of the grid — and * they cannot share a RULE because they are different sizes and the * sheets load in an order that would let the small one win. They can * share the values. Add a third caller here, never a third gradient. / --dp-violet-fill: linear-gradient(180deg, rgba(255, 255, 255, .24) 0%, transparent 46%), linear-gradient(135deg, var(--dp-violet) 0%, var(--dp-violet-2) 55%, var(--dp-violet-3) 115%); --dp-violet-edge: rgba(199, 125, 255, .55); --dp-gutter: clamp(14px, 3vw, 32px); --dp-ease: cubic-bezier(.16, 1, .3, 1); } / ── LIGHT: the original white page, now behind HOME_THEME=light ─────── / .dp-light { --dp-ink: #0b0b0f; --dp-ink-soft: rgba(11, 11, 15, .55); --dp-surface: #ffffff; --dp-surface-2: #f6f6f8; --dp-line: rgba(11, 11, 15, .10); / The ink a BORROWED component paints itself with — today the ghost * Discord button in the middle of the grid, which is site-header's * .dph-cta-ghost and is written against --mdp-. dp-attraction-feed.css maps these onto those; see the long note on .dp-break there for why * the mapping lives at that end and the values live here. / --dp-chrome-ink: #150a24; --dp-chrome-line: rgba(21, 10, 36, .18); --dp-chrome-line-hover: rgba(21, 10, 36, .34); --dp-chrome-wash: linear-gradient(to bottom, rgba(21, 10, 36, 0), rgba(21, 10, 36, .06)); / The Discord band. Unchanged from what --dp-surface-2 gave it. / --dp-break-bg: #f6f6f8; --dp-break-edge: transparent; } / ── DARK: the default, and the register the rest of the site is in ──── * --dp-surface / --dp-surface-2 are TRANSLUCENT here, where the light * theme's are opaque, and that difference is deliberate rather than an * oversight. They are consumed as the fill of things that sit ON the * page — the Show-more pill, its hover state, the Discord band, the * loading skeleton. On white, "a surface" means a slightly grey solid. * On a page whose background is a gradient with three coloured washes in * it, an opaque slab is a hole punched through that gradient; a white * veil at 6-10% is the same object rendered correctly, and it keeps the * wash showing through exactly as the glass panels elsewhere do. * * The body background is therefore written out below rather than taken * from --dp-surface the way the light theme takes it. / .dp-dark { --dp-ink: #ffffff; --dp-ink-soft: rgba(235, 228, 245, .62); --dp-surface: rgba(255, 255, 255, .05); --dp-surface-2: rgba(255, 255, 255, .07); --dp-line: rgba(255, 255, 255, .14); / See the light block. White ink, and a veil rather than a tint, for * the same reason --dp-surface is translucent here. / --dp-chrome-ink: #ffffff; --dp-chrome-line: rgba(255, 255, 255, .20); --dp-chrome-line-hover: rgba(255, 255, 255, .38); --dp-chrome-wash: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, .07)); / THE DISCORD BAND, and the reason it is not just a lighter veil. * A flat white-at-7% panel over a three-colour gradient is a grey * rectangle laid ON the page rather than a part of it: it desaturates * everything behind it and its top and bottom edges are the only hard * horizontals on the whole homepage. So the band is VIOLET instead, * and it is a gradient of its own — brightest where the button sits * and falling away at both edges, which is the same move the page * background makes at the top of the screen. * * The ellipse is centred at 62% because that is roughly where the * button lands, not at 50%: the glow should be behind the thing you * are meant to press, not behind the middle of the box. / --dp-break-bg: radial-gradient(ellipse 120% 90% at 50% 62%, rgba(157, 78, 221, .30), transparent 70%), linear-gradient(180deg, rgba(119, 0, 255, .04) 0%, rgba(119, 0, 255, .13) 50%, rgba(119, 0, 255, .04) 100%); / A hairline at each edge so the band still has a boundary once the * fill fades out to nothing there. The light theme wants no such line * — its band is a solid block and an edge on top of one is a seam. / --dp-break-edge: rgba(199, 125, 255, .18); } body.dp-light, body.dp-dark { margin: 0; padding: 0; color: var(--dp-ink); font-family: 'Outfit', system-ui, -apple-system, 'Segoe UI', sans-serif; -webkit-font-smoothing: antialiased; overflow-x: hidden; } body.dp-light { background: var(--dp-surface); } / THE canonical DreamPark backdrop, character for character the stack in * views/share/share-head.ejs and views/download.ejs: one violet ellipse * at the top, a pink and a cyan wash further down at low opacity, over * the ink-void → ink-deep vertical gradient. It is copied rather than * shared because those two are inline