/* Per-event skin theming — makes the landing page pick up the same look as the social card that linked to it (see api/card-svg.ts selectSiteSkin, mirrored at build time by scripts/skin-select.mjs). Only the answer/hero panel is themed; nav, footer, and network-foot stay in the site's own cobalt identity always, so howmanydaysuntil.co is still recognizably itself no matter which of the 4 skins an event lands on. The since site draws from a disjoint 5-skin pool for the same reason from the other direction — the two sites never show the same skin for a different event. `data-skin` is set on at build time from {{SKIN}}; JS never needs to touch it. Each block below only overrides the handful of properties that carry that skin's identity — layout stays exactly as style.css defines it. */ body[data-skin] .event-content .hero { padding: var(--space-md) var(--space-lg); border-radius: 0.5rem; } /* ---- win95: beveled gray dialog box, navy accent, system-font numerals ---- */ body[data-skin="win95"] .event-content .hero { background: #c0c0c0; border: 3px solid #ffffff; border-right-color: #000000; border-bottom-color: #000000; box-shadow: inset -1px -1px 0 #808080, inset 1px 1px 0 #dfdfdf; color: #000000; } body[data-skin="win95"] .event-content .eyebrow { color: #000080; font-weight: 700; } body[data-skin="win95"] .event-content .num, body[data-skin="win95"] .event-content .lede { color: #000080; font-family: Arial, sans-serif; } body[data-skin="win95"] .event-content .until, body[data-skin="win95"] .event-content .sub { color: #1a1a1a; } /* ---- retro: cream diner card, red/orange accent, condensed impact numerals ---- */ body[data-skin="retro"] .event-content .hero { background: #FAF4E8; border: 4px solid #121212; box-shadow: 4px 4px 0 #FB8C00; } body[data-skin="retro"] .event-content .eyebrow { color: #E53935; } body[data-skin="retro"] .event-content .num { color: #E53935; font-family: Impact, "Arial Black", sans-serif; letter-spacing: 0.01em; } body[data-skin="retro"] .event-content .until strong, body[data-skin="retro"] .event-content .lede { color: #121212; } body[data-skin="retro"] .event-content .until, body[data-skin="retro"] .event-content .sub { color: #5E5A54; } /* ---- flipclock: dark split-flap tile, amber accent, monospace numerals ---- */ body[data-skin="flipclock"] .event-content .hero { background: #18191e; border: 3px solid #ffcc00; color: #ffffff; } body[data-skin="flipclock"] .event-content .eyebrow { color: #ffcc00; } body[data-skin="flipclock"] .event-content .num { color: #ffffff; font-family: "Courier New", monospace; } body[data-skin="flipclock"] .event-content .until, body[data-skin="flipclock"] .event-content .lede, body[data-skin="flipclock"] .event-content .sub { color: #d6d8de; } body[data-skin="flipclock"] .event-content .sub a, body[data-skin="flipclock"] .event-content .until a { color: #ffcc00; } /* ---- neon: near-black glow panel, turquoise/magenta accent ---- */ body[data-skin="neon"] .event-content .hero { background: #080d18; border: 2px solid #18f0c8; box-shadow: 0 0 18px rgba(24, 240, 200, 0.35); color: #f5f7ff; } body[data-skin="neon"] .event-content .eyebrow { color: #fc3cff; } body[data-skin="neon"] .event-content .num { color: #18f0c8; text-shadow: 0 0 14px rgba(24, 240, 200, 0.6); } body[data-skin="neon"] .event-content .until, body[data-skin="neon"] .event-content .lede, body[data-skin="neon"] .event-content .sub { color: #e7e9f5; } body[data-skin="neon"] .event-content .sub a, body[data-skin="neon"] .event-content .until a { color: #18f0c8; }