/* ============================================================================ ALTERNATE THEMES — for evaluation, not shipped as a user-facing choice. Every visual decision in this build already routes through the custom properties in tokens-calm.css, so a theme is nothing more than a block that redefines them. No component CSS is touched here, and none of these blocks apply unless something sets data-theme on . With the attribute absent the page is exactly the calm build it was. Selectors are :root[data-theme="…"] rather than [data-theme="…"] so they out-specify the :root block in tokens-calm.css regardless of load order. The three themes are lifted from the Instagram carousel styles in design/social/carousels — this is how the product would look wearing each of them. Switch with the panel from debug-themes.js (?debug=1) or ?theme=NAME. ========================================================================== */ /* ──────────────────────────────────────────────────────────────────────────── BLUSH — the boarding-pass carousel. Hot pink on warm cream, one very heavy display face, deep plum instead of black. The status green survives because "within the limit" has to read as a verdict, not as decoration. ─────────────────────────────────────────────────────────────────────────── */ :root[data-theme="blush"] { --font-display: 'Archivo Black', 'Inter var', Inter, system-ui, sans-serif; --font-numeral: 'Archivo Black', 'Inter var', Inter, system-ui, sans-serif; --weight-display: 400; /* Archivo Black ships one weight */ --weight-numeral: 400; --track-h1: -.035em; --track-h2: -.022em; --track-numeral: -.04em; --bg: #FFF6F2; --surface: #FFFFFF; --ink: #2B1B2E; --ink-2: #6B5560; --ink-3: #A08B94; --line: #F6D9E3; --ok: #2E7D63; --warn: #C4761A; --bad: #D6335A; --accent: #FF4D8D; --accent-ink: #FFFFFF; --link: #D6266B; --focus: #FF4D8D; --field-bg: #FFF4F7; --trust-bg: #FFE9F0; --trust-ink: #6B5560; --offer-bg: #FFF0E9; --legend-bg: #FFE9F0; --note-bg: #FFF3E4; --note-border: #FFD9B8; --note-ink: #8A5A25; --bar-track: #FBE0E9; --stat-hero-bg: #FFFFFF; --stat-hero-border: #FFC2D6; --day-hover: #FFEFF4; --day-in-bg: #FFE3EC; --day-in-border: #FFB9D0; --day-in-ink: #B0175A; --day-preview: #FFF2F6; --day-over-bg: #FBD5D5; --day-over-ink: #A32036; --today-ring: #FF4D8D; --btn-bg: #2B1B2E; --btn-ink: #FFF6F2; --sticky-bg: rgba(255,246,242,.94); --radius: 20px; --radius-sm: 14px; --radius-day: 10px; } /* Archivo Black has no italic and a large x-height; ease the headline down a touch so it does not out-shout the number it is introducing. */ :root[data-theme="blush"] h1 { font-size: calc(var(--fs-h1) * .92); } /* ──────────────────────────────────────────────────────────────────────────── BLUSH + CALM — calm's layout and paper, wearing blush's colours and display face. Every value below is lifted from the blush block unchanged, so the mark, the buttons, the link colour, the site name, the status green, the headline face and its tracking are identical in the two themes. What stays calm is the paper ground, the body ink, the radii, and Inter for running text — blush does not override --font-ui either, so body copy is the same in both. ─────────────────────────────────────────────────────────────────────────── */ :root[data-theme="blush-calm"] { --ok: #2E7D63; /* blush's green, not calm's deeper #2D6A4F */ --accent: #FF4D8D; /* the mark, selected days, open-trip borders */ --accent-ink: #FFFFFF; --btn-bg: #2B1B2E; /* blush's deep plum button, not a pink one */ --btn-ink: #FFF6F2; --link: #D6266B; /* link buttons */ --focus: #D6266B; /* Blush's display face. Archivo Black ships a single weight, so the display and numeral weights drop to 400 and the tracking tightens to stop the headline from setting loose. --font-ui is left alone: running text stays Inter, exactly as it does under blush. */ --font-display: 'Archivo Black', 'Inter var', Inter, system-ui, sans-serif; --font-numeral: 'Archivo Black', 'Inter var', Inter, system-ui, sans-serif; --weight-display: 400; --weight-numeral: 400; --track-h1: -.035em; --track-h2: -.022em; --track-numeral: -.04em; } /* The same size correction blush makes: Archivo Black's x-height is large enough that the headline at full --fs-h1 out-shouts the number it introduces. */ :root[data-theme="blush-calm"] h1 { font-size: calc(var(--fs-h1) * .92); } /* The site name, exactly as blush sets it: plum, with "Visa" taking the accent from the shared rule above. Plum rather than calm's navy because the wordmark sits beside the pink mark and has to belong to it. */ :root[data-theme="blush-calm"] .brand__n { color: #2B1B2E; } /* ──────────────────────────────────────────────────────────────────────────── JOURNAL — the travel-journal carousel. Handwriting for headings only; the numbers stay in a rounded sans, because a handwritten "49/90" is a number you have to decipher and this page exists to stop people deciphering things. ─────────────────────────────────────────────────────────────────────────── */ :root[data-theme="journal"] { --font-display: Caveat, 'Bradley Hand', cursive; --font-numeral: Quicksand, 'Inter var', Inter, system-ui, sans-serif; --weight-display: 700; --weight-numeral: 700; --track-h1: 0; /* a script face does not want tightening */ --track-h2: 0; --track-numeral: -.02em; --bg: #FDF8F3; --surface: #FFFFFF; --ink: #3A3238; --ink-2: #6C5F67; --ink-3: #A2929B; --line: #EDE0D4; --ok: #5C8A6A; --warn: #B8842F; --bad: #C25A64; --accent: #B4739A; --accent-ink: #FFFFFF; --link: #A8557F; --focus: #B4739A; --field-bg: #FBF5EE; --trust-bg: #F6EDE4; --trust-ink: #6C5F67; --offer-bg: #F7EFE6; --legend-bg: #F6EDE4; --note-bg: #FFF6D9; /* highlighter yellow */ --note-border: #F2DFA4; --note-ink: #7A6320; --bar-track: #EFE4DA; --stat-hero-bg: #FFFFFF; --stat-hero-border: #E3CDD9; --day-hover: #F6EDE4; --day-in-bg: #FBE3EE; --day-in-border: #F2C2D8; --day-in-ink: #8E3B67; --day-preview: #FCF1F6; --day-over-bg: #F7DADD; --day-over-ink: #9C3B46; --today-ring: #B4739A; --btn-bg: #3A3238; --btn-ink: #FDF8F3; --sticky-bg: rgba(253,248,243,.95); --radius: 16px; --radius-sm: 12px; --radius-day: 8px; } /* Caveat sits small for its point size — headings need the size back. */ :root[data-theme="journal"] h1 { font-size: calc(var(--fs-h1) * 1.3); line-height: 1.02; } :root[data-theme="journal"] h2 { font-size: calc(var(--fs-h2) * 1.28); } /* The ruled-paper ground that makes it read as a journal rather than as beige. */ :root[data-theme="journal"] body { background-image: repeating-linear-gradient(var(--bg) 0 37px, #EFE4DA 37px 38px); } /* ──────────────────────────────────────────────────────────────────────────── BLOOM — the soft-gradient carousel. Lilac into peach, one rounded face at every size, generous corners. The gradient is fixed to the viewport so the page scrolls over it instead of dragging it along. ─────────────────────────────────────────────────────────────────────────── */ :root[data-theme="bloom"] { --font-ui: Quicksand, 'Inter var', Inter, system-ui, sans-serif; --font-display: Quicksand, 'Inter var', Inter, system-ui, sans-serif; --font-numeral: Quicksand, 'Inter var', Inter, system-ui, sans-serif; --weight-display: 700; --weight-numeral: 700; --track-h1: -.025em; --track-h2: -.015em; --track-numeral: -.03em; --bg: #F3E9F8; --surface: #FFFFFF; --ink: #34243D; --ink-2: #5B4666; --ink-3: #9784A3; --line: #E8DBF0; --ok: #5E9B7D; --warn: #C08A3E; --bad: #CC5D7A; --accent: #A47FC4; --accent-ink: #FFFFFF; --link: #8B5FB0; --focus: #A47FC4; --field-bg: #F7F1FC; --trust-bg: rgba(255,255,255,.72); --trust-ink: #5B4666; --offer-bg: rgba(255,255,255,.72); --legend-bg: rgba(255,255,255,.72); --note-bg: #FDEFE2; --note-border: #F5D8BE; --note-ink: #8A5F32; --bar-track: rgba(255,255,255,.7); --stat-hero-bg: #FFFFFF; --stat-hero-border: #DCC8EC; --day-hover: #F2E7FA; --day-in-bg: #EADCF7; --day-in-border: #D3BCEC; --day-in-ink: #6A3E92; --day-preview: #F6EFFC; --day-over-bg: #F9DCE4; --day-over-ink: #A83E5F; --today-ring: #A47FC4; --btn-bg: #34243D; --btn-ink: #FFFFFF; --sticky-bg: rgba(249,240,250,.94); --radius: 26px; --radius-sm: 18px; --radius-day: 12px; } :root[data-theme="bloom"] body { background: linear-gradient(155deg, #E7DAF6 0%, #F7DDEA 48%, #FFE4D5 100%); background-attachment: fixed; } :root[data-theme="bloom"] .topbar { background: rgba(247,238,250,.88); } /* ──────────────────────────────────────────────────────────────────────────── Shared corrections — anything true of every theme but not of the calm build. ─────────────────────────────────────────────────────────────────────────── */ /* "Visa" in the wordmark is green because green is this build's accent. Under a theme the accent moves and the green is left behind as the one unexplained colour on the page, so it follows the accent instead. Base stays untouched: the attribute selector never matches the shipping build. */ :root[data-theme] .brand__n b { color: var(--accent); } :root[data-theme] .brand:hover .brand__n { color: var(--accent); } /* ──────────────────────────────────────────────────────────────────────────── The switcher itself. Injected by debug-themes.js, styled here so the panel is not affected by whichever theme is currently loaded. ─────────────────────────────────────────────────────────────────────────── */ .themebar { /* Clears the sticky action bar, the same 68px the toast clears — a panel for judging a design must not sit on top of the design. */ position: fixed; left: 14px; bottom: calc(68px + 14px); z-index: 9999; display: flex; align-items: center; gap: 6px; padding: 8px; border-radius: 14px; background: #14161Aee; backdrop-filter: blur(8px); box-shadow: 0 8px 30px rgba(0,0,0,.34); font: 500 12px/1 ui-sans-serif, system-ui, -apple-system, sans-serif; } .themebar__l { color: #8A94A2; text-transform: uppercase; letter-spacing: .09em; font-size: 9.5px; padding: 0 6px 0 4px; } .themebar button { appearance: none; border: 0; cursor: pointer; color: #E6E8EB; background: #2A2E35; border-radius: 9px; padding: 8px 11px; font: inherit; transition: background .12s, color .12s; } .themebar button:hover { background: #3A3F48; } .themebar button[aria-pressed="true"] { background: #F4F5F7; color: #14161A; font-weight: 700; } .themebar__x { margin-left: 2px; background: transparent !important; color: #6C7480 !important; padding: 8px 6px !important; font-size: 14px !important; } @media (max-width: 560px) { .themebar { left: 8px; right: 8px; bottom: calc(68px + 8px); justify-content: center; } } @media print { .themebar { display: none; } }