/** * ============================================================================= * VOYAGER - Ayten's themeable design layer * ============================================================================= * * The token layer behind the itinerary redesign (#29). It is ADDITIVE: including * it does not restyle a page. Nothing here targets a bare element selector, so * `ayten.css` keeps its meaning until a page opts in by using `v-` classes and * `--v-` tokens. * * THREE THEME STATES, NOT TWO * --------------------------- * A viewer is in one of three states, and all three must resolve: * * 1. No choice made -> nothing stamped on ; only the OS setting * (prefers-color-scheme) separates light from dark. * 2. Explicitly light -> * 3. Explicitly dark -> * * So: bare :root carries the COMPLETE light palette; the media query redefines * only the tokens, guarded with :not([data-theme="light"]) so an explicit light * choice beats a dark OS; and [data-theme="dark"] redefines them again so the * toggle wins in the other direction. * * THE RULE THAT BREAKS PAGES: never give a colour its only definition inside a * media query or a [data-theme] block. Style components through the tokens. * A colour defined only under [data-theme] never applies in state 1 above, and * the page renders one theme's text on the other theme's ground. * * `public/js/theme.js` writes the stamp and persists the choice. * * BORDERS ARE PROHIBITED. Separation comes from tonal shifts between surface * levels and from negative space, never a 1px rule. --v-hairline exists only for * the accessibility fallback described in the design system doc. * * See docs/architecture/VOYAGER-DESIGN-SYSTEM.md. * ============================================================================= */ /* ----------------------------------------------------------------------------- 1. LIGHT PALETTE - the complete set, on bare :root -------------------------------------------------------------------------- */ :root { /* Surfaces, low to high. A card lifts by moving UP this scale against its ground; a well recesses by moving down. */ --v-bg: #edf1f8; --v-surface-lowest: #dfe6f3; --v-surface-low: #e5eaf5; --v-surface: #f4f7fc; --v-surface-high: #ffffff; --v-surface-highest: #f6f8fd; /* Ink, most to least prominent. */ --v-ink: #131b2e; --v-ink-muted: #4d5771; --v-ink-subtle: #5a6480; /* was #5f6a85: 4.48:1 as text on --v-surface-lowest */ /* Accent. --v-accent-on is the only colour guaranteed legible ON the accent. */ --v-accent: #09734d; /* was #0a7a55: 4.43:1 as text on --v-surface-lowest */ --v-accent-on: #ffffff; --v-accent-soft: rgba(10, 122, 85, 0.14); /* Semantic. Separate from the accent - never reuse the accent for state. */ /* Ink guaranteed legible ON each semantic surface. One --v-accent-on for all of them does not work: the warning amber is dark in light mode and bright in dark mode, so its ink has to flip with it. */ --v-danger: #c0392f; --v-warning: #8a5c07; --v-positive: #09734d; /* was #0a7a55: 4.43:1 as text on --v-surface-lowest */ --v-warning-on: #ffffff; --v-danger-on: #ffffff; --v-positive-on: #ffffff; /* Map surfaces. */ --v-sea: #dbe3f1; --v-land: #f4f7fc; --v-coast: rgba(19, 27, 46, 0.16); /* The accessibility fallback only. Not a divider. */ --v-hairline: rgba(19, 27, 46, 0.14); /* Ambient shadows: wide, soft, tucked under. Never a hard drop shadow. */ --v-lift: 0 12px 28px -14px rgba(19, 27, 46, 0.40); --v-lift-high: 0 26px 60px -22px rgba(19, 27, 46, 0.45); /* Category accents. Four, matching the venue taxonomy. Bars and pubs are Food & Drink - do not add a fifth for nightlife. */ --v-cat-food: #8a6200; --v-cat-culture: #8b3fd4; --v-cat-outdoors: #087a51; --v-cat-wellness: #4f52d8; /* ---- Non-colour tokens. Identical in both themes. ---- */ --v-font-display: "Space Grotesk", "Segoe UI", system-ui, sans-serif; --v-font-body: "Manrope", "Segoe UI", system-ui, sans-serif; --v-text-display: 3.5rem; --v-text-headline: 2rem; --v-text-title: 1.125rem; --v-text-body: 0.9375rem; --v-text-small: 0.8125rem; /* Raised from 0.6875rem (11px). The owner asked twice for a larger minimum text size, and 11px uppercase was the smallest thing on the page. Changed at the TOKEN so the whole scale moves together rather than each page deviating — the five steps stay five steps. */ --v-text-label: 0.75rem; --v-space-1: 4px; --v-space-2: 8px; --v-space-3: 12px; --v-space-4: 16px; --v-space-5: 24px; --v-space-6: 32px; --v-space-7: 48px; --v-radius-sm: 10px; --v-radius: 15px; --v-radius-lg: 20px; --v-radius-xl: 26px; --v-radius-pill: 999px; --v-ease: cubic-bezier(0.4, 0, 0.2, 1); --v-ease-sheet: cubic-bezier(0.32, 0.72, 0, 1); --v-dur: 300ms; --v-dur-slow: 480ms; } /* ----------------------------------------------------------------------------- 2. DARK PALETTE - tokens only, twice -------------------------------------------------------------------------- */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --v-bg: #0b1326; --v-surface-lowest: #101829; --v-surface-low: #131b2e; --v-surface: #182137; --v-surface-high: #1c2438; --v-surface-highest: #2d3449; --v-ink: #dae2fd; --v-ink-muted: #a3adc9; --v-ink-subtle: #8792ad; /* was #79839e: 4.09:1 on --v-surface-high, under AA */ --v-accent: #4edea3; --v-accent-on: #002e1e; --v-accent-soft: rgba(78, 222, 163, 0.15); --v-danger: #ffb4ab; --v-warning: #ffbf00; --v-positive: #4edea3; --v-warning-on: #2a1f00; --v-danger-on: #4a0d07; --v-positive-on: #002e1e; --v-sea: #070d1c; --v-land: #182137; --v-coast: rgba(218, 226, 253, 0.14); --v-hairline: rgba(218, 226, 253, 0.16); --v-lift: 0 12px 30px -14px rgba(0, 0, 0, 0.70); --v-lift-high: 0 26px 60px -20px rgba(0, 0, 0, 0.80); --v-cat-food: #ffbf00; --v-cat-culture: #c084fc; --v-cat-outdoors: #34d399; --v-cat-wellness: #a5a7ff; } } :root[data-theme="dark"] { --v-bg: #0b1326; --v-surface-lowest: #101829; --v-surface-low: #131b2e; --v-surface: #182137; --v-surface-high: #1c2438; --v-surface-highest: #2d3449; --v-ink: #dae2fd; --v-ink-muted: #a3adc9; --v-ink-subtle: #8792ad; /* was #79839e: 4.09:1 on --v-surface-high, under AA */ --v-accent: #4edea3; --v-accent-on: #002e1e; --v-accent-soft: rgba(78, 222, 163, 0.15); --v-danger: #ffb4ab; --v-warning: #ffbf00; --v-positive: #4edea3; --v-warning-on: #2a1f00; --v-danger-on: #4a0d07; --v-positive-on: #002e1e; --v-sea: #070d1c; --v-land: #182137; --v-coast: rgba(218, 226, 253, 0.14); --v-hairline: rgba(218, 226, 253, 0.16); --v-lift: 0 12px 30px -14px rgba(0, 0, 0, 0.70); --v-lift-high: 0 26px 60px -20px rgba(0, 0, 0, 0.80); --v-cat-food: #ffbf00; --v-cat-culture: #c084fc; --v-cat-outdoors: #34d399; --v-cat-wellness: #a5a7ff; } /* Tell the browser which form controls and scrollbars to draw. Without this the native bits stay light on a dark page. */ :root { color-scheme: light; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; } } :root[data-theme="dark"] { color-scheme: dark; } /* ----------------------------------------------------------------------------- 3. PAGE GROUND Opt in per page with . Without it this file changes nothing, which is what makes it safe to ship ahead of the rollout. -------------------------------------------------------------------------- */ .v-page { background: var(--v-bg); color: var(--v-ink); font-family: var(--v-font-body); font-size: var(--v-text-body); line-height: 1.5; -webkit-font-smoothing: antialiased; } /* Only while theme.js is swapping the stamp, so the change does not strobe. */ .v-theme-animating, .v-theme-animating * { transition: background-color 260ms var(--v-ease), color 260ms var(--v-ease), box-shadow 260ms var(--v-ease) !important; } /* ----------------------------------------------------------------------------- 4. TYPOGRAPHY The signature pairing is display at weight 300 against headline at 700. The contrast between them is the look; do not even out the weights. -------------------------------------------------------------------------- */ .v-display { font-family: var(--v-font-display); font-weight: 300; font-size: var(--v-text-display); line-height: 1.02; letter-spacing: -0.022em; text-wrap: balance; margin: 0; } .v-display b, .v-display strong { font-weight: 700; } .v-headline { font-family: var(--v-font-display); font-weight: 700; font-size: var(--v-text-headline); line-height: 1.1; letter-spacing: -0.015em; text-wrap: balance; margin: 0; } .v-title { font-family: var(--v-font-body); font-weight: 600; font-size: var(--v-text-title); line-height: 1.25; margin: 0; } .v-body { font-size: var(--v-text-body); color: var(--v-ink-muted); } .v-small { font-size: var(--v-text-small); color: var(--v-ink-subtle); } .v-label { font-family: var(--v-font-display); font-weight: 500; font-size: var(--v-text-label); letter-spacing: 0.15em; text-transform: uppercase; color: var(--v-ink-subtle); } .v-label-accent { color: var(--v-accent); } /* Any column of digits that a reader compares down the page. */ .v-num { font-variant-numeric: tabular-nums; } .v-prose { max-width: 65ch; } /* ----------------------------------------------------------------------------- 5. SURFACES -------------------------------------------------------------------------- */ .v-card { background: var(--v-surface-high); border-radius: var(--v-radius); padding: var(--v-space-3); transition: background var(--v-dur) var(--v-ease), box-shadow var(--v-dur) var(--v-ease); } .v-card-interactive { cursor: pointer; } .v-card-interactive:hover { background: var(--v-surface-highest); box-shadow: var(--v-lift); } .v-panel { background: var(--v-surface-low); border-radius: var(--v-radius-lg); padding: var(--v-space-4); } .v-well { background: var(--v-surface-lowest); border-radius: var(--v-radius-lg); padding: var(--v-space-4); } /* Floating over a map or photo. The blur is what makes it readable. */ .v-glass { background: color-mix(in srgb, var(--v-surface-high) 78%, transparent); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); box-shadow: var(--v-lift); border-radius: var(--v-radius-pill); } /* ----------------------------------------------------------------------------- 6. CONTROLS -------------------------------------------------------------------------- */ .v-btn { font-family: var(--v-font-display); font-size: var(--v-text-label); font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; border: 0; border-radius: var(--v-radius-pill); padding: 9px 18px; background: var(--v-surface-low); color: var(--v-ink-muted); cursor: pointer; transition: background var(--v-dur) var(--v-ease), color var(--v-dur) var(--v-ease); } .v-btn:hover { background: var(--v-surface-highest); color: var(--v-ink); } .v-btn-primary { background: var(--v-accent); color: var(--v-accent-on); } .v-btn-primary:hover { background: var(--v-accent); filter: brightness(1.08); } .v-btn-quiet { background: transparent; } .v-btn-danger { color: var(--v-danger); } .v-icon-btn { width: 38px; height: 38px; border: 0; border-radius: 12px; background: none; color: var(--v-ink-subtle); display: grid; place-items: center; cursor: pointer; transition: background 180ms var(--v-ease), color 180ms var(--v-ease); } .v-icon-btn:hover { background: var(--v-surface-highest); color: var(--v-ink); } .v-icon-btn svg { width: 18px; height: 18px; } /* Segmented control. Children are .v-seg with aria-pressed. */ .v-segmented { display: inline-flex; gap: 2px; padding: 4px; background: var(--v-surface-low); border-radius: var(--v-radius-pill); } .v-seg { font-family: var(--v-font-display); font-size: var(--v-text-label); font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; border: 0; background: none; color: var(--v-ink-subtle); padding: 7px 16px; border-radius: var(--v-radius-pill); cursor: pointer; transition: background var(--v-dur) var(--v-ease), color var(--v-dur) var(--v-ease); } .v-seg:hover { color: var(--v-ink); } .v-chip { display: inline-flex; align-items: center; gap: 7px; font-family: var(--v-font-display); font-size: var(--v-text-label); font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; background: var(--v-surface-low); color: var(--v-accent-on); border: 0; border-radius: var(--v-radius-pill); padding: 6px 13px; } /* Category chip. Set --v-cat on the element: Food & Drink */ .v-chip-cat { color: var(--v-cat); background: color-mix(in srgb, var(--v-cat) 13%, transparent); } .v-thumb { width: 42px; height: 42px; border-radius: 11px; flex: none; display: grid; place-items: center; color: var(--v-cat); background: color-mix(in srgb, var(--v-cat) 16%, transparent); } /* Bottom-border-only input that animates to the accent on focus. */ .v-input { width: 100%; font: inherit; color: var(--v-ink); background: var(--v-surface-low); border: 0; border-bottom: 2px solid var(--v-hairline); border-radius: var(--v-radius-sm) var(--v-radius-sm) 0 0; padding: 11px 13px; transition: border-color var(--v-dur) var(--v-ease), background var(--v-dur) var(--v-ease); } .v-input:focus { outline: none; border-bottom-color: var(--v-accent); background: var(--v-surface-high); } .v-input::placeholder { color: var(--v-ink-subtle); } /* ----------------------------------------------------------------------------- 7. SLOT COVERAGE Seven ticks, one per venue slot, in pipeline order: breakfast, morning, lunch, afternoon, dinner, evening, nighttime. Encodes which slots a day has filled. -------------------------------------------------------------------------- */ .v-ticks { display: flex; gap: 3px; align-items: center; } .v-tick { height: 4px; flex: 1; border-radius: 2px; background: var(--v-hairline); transition: background var(--v-dur) var(--v-ease); } .v-tick-on { background: var(--v-accent); } /* ----------------------------------------------------------------------------- 8. FOCUS + MOTION -------------------------------------------------------------------------- */ .v-page :focus-visible { outline: 2px solid var(--v-accent); outline-offset: 2px; border-radius: 6px; } @media (prefers-reduced-motion: reduce) { .v-page *, .v-theme-animating * { transition-duration: 1ms !important; animation-duration: 1ms !important; } }