/* ========================================================================= OurTrips design system — tokens + flat components (multi-theme) ------------------------------------------------------------------------- One surface scale, one radius scale, semantic status colors. Dark is the default; set data-theme on to switch palette. Light themes: spring, apricot, honey, frost, lilac, cherry, sky. Dark themes: dark (default), onyx, ember, forest. Pair data-theme with data-mode (dark|light) on — the dark set is { dark, onyx, ember, forest }. Opt a page in with the `ds-app` class on — that scopes the compatibility layer (which re-skins existing Tailwind/glass markup) so rollout is page-by-page. ========================================================================= */ /* Cross-document (MPA) view transitions: every same-origin page navigation gets a native-style crossfade for free, no JS/router. Progressive enhancement — unsupported browsers hard-cut exactly as before. This file is loaded by every page, so both the outgoing and incoming document opt in. */ @view-transition { navigation: auto; } /* Honor the OS "Reduce Motion" setting: smooth in-page scrolling only when motion is welcome, and no page-transition animation when it isn't. */ @media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } } @media (prefers-reduced-motion: reduce) { ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; } } /* Site-wide scroll baseline: every page should be vertically scrollable and should not leak horizontal overflow into the viewport. */ html, body { overscroll-behavior-y: auto; max-width: 100%; overflow-x: clip; overflow-y: auto; } /* Photo thumbnail → full-page hero morph. The thumbnail is cover-cropped; height:100% keeps the cross-fade box stable as the element grows from thumbnail size to full-screen. */ @media (prefers-reduced-motion: no-preference) { ::view-transition-old(photo-hero), ::view-transition-new(photo-hero) { height: 100%; object-fit: cover; } } :root { /* surfaces (dark) */ --ds-bg: #0b111d; --ds-surface-1: #141c2c; --ds-surface-2: #1c2638; --ds-surface-raised: #243049; --ds-border: rgba(255, 255, 255, 0.08); --ds-border-strong: rgba(255, 255, 255, 0.15); /* text */ --ds-text: #e9eef7; --ds-text-2: #94a3b8; --ds-text-3: #64748b; /* brand + status (status meaning is fixed, never decorative) */ --ds-accent: #2dd4bf; --ds-accent-ink: #04241f; --ds-accent-soft: rgba(45, 212, 191, 0.12); --ds-pending: #64748b; --ds-visited: #3b82f6; --ds-here: #10b981; --ds-warn: #f59e0b; --ds-danger: #f87171; --ds-danger-soft: rgba(248, 113, 113, 0.12); /* radius scale (4 steps + pill) */ --ds-r-sm: 8px; --ds-r-md: 12px; --ds-r-lg: 16px; --ds-r-xl: 20px; --ds-r-pill: 999px; /* one soft elevation, used sparingly */ --ds-shadow: 0 8px 24px rgba(0, 0, 0, 0.28); /* subtle card lift — flat (none) in dark, a whisper in the light themes */ --ds-card-shadow: none; } /* ---- Spring: fresh green on warm cream ---- */ :root[data-theme="spring"] { --ds-bg: #f6f4ea; --ds-surface-1: #ffffff; --ds-surface-2: #efeddf; --ds-surface-raised: #ffffff; --ds-border: rgba(55, 50, 25, 0.12); --ds-border-strong: rgba(55, 50, 25, 0.20); --ds-text: #242218; --ds-text-2: #585244; --ds-text-3: #7d7664; --ds-accent: #3f9d57; --ds-accent-ink: #ffffff; --ds-accent-soft: rgba(63, 157, 87, 0.12); --ds-pending: #9aa088; --ds-visited: #4a8fd0; --ds-here: #2f8f4e; --ds-warn: #b5791a; --ds-danger: #d2553f; --ds-danger-soft: rgba(210, 85, 63, 0.10); --ds-shadow: 0 8px 24px rgba(60, 55, 25, 0.10); --ds-card-shadow: 0 1px 2px rgba(60, 55, 25, 0.05), 0 4px 14px rgba(60, 55, 25, 0.06); } /* ---- Apricot: warm coral on soft peach ---- */ :root[data-theme="apricot"] { --ds-bg: #fdf4ec; --ds-surface-1: #ffffff; --ds-surface-2: #f7ece2; --ds-surface-raised: #ffffff; --ds-border: rgba(80, 45, 25, 0.12); --ds-border-strong: rgba(80, 45, 25, 0.20); --ds-text: #2f251f; --ds-text-2: #68584f; --ds-text-3: #907d71; --ds-accent: #e0744f; --ds-accent-ink: #ffffff; --ds-accent-soft: rgba(224, 116, 79, 0.12); --ds-pending: #b89a86; --ds-visited: #3f86c8; --ds-here: #4f9e6a; --ds-warn: #c2761b; --ds-danger: #d2553f; --ds-danger-soft: rgba(210, 85, 63, 0.10); --ds-shadow: 0 8px 24px rgba(80, 45, 25, 0.10); --ds-card-shadow: 0 1px 2px rgba(80, 45, 25, 0.05), 0 4px 14px rgba(80, 45, 25, 0.06); } /* ---- Honey: golden amber on warm white ---- */ :root[data-theme="honey"] { --ds-bg: #faf6e8; --ds-surface-1: #fffdf7; --ds-surface-2: #f4eed9; --ds-surface-raised: #fffdf7; --ds-border: rgba(70, 55, 15, 0.13); --ds-border-strong: rgba(70, 55, 15, 0.20); --ds-text: #2a2516; --ds-text-2: #5d533d; --ds-text-3: #817761; --ds-accent: #d99b2a; --ds-accent-ink: #3a2a05; --ds-accent-soft: rgba(217, 155, 42, 0.14); --ds-pending: #b3a784; --ds-visited: #3f86c8; --ds-here: #4f9e6a; --ds-warn: #b5791a; --ds-danger: #d2553f; --ds-danger-soft: rgba(210, 85, 63, 0.10); --ds-shadow: 0 8px 24px rgba(70, 55, 15, 0.10); --ds-card-shadow: 0 1px 2px rgba(70, 55, 15, 0.05), 0 4px 14px rgba(70, 55, 15, 0.06); } /* ---- Frost: cool slate-blue on cool white ---- */ :root[data-theme="frost"] { --ds-bg: #eef2f8; --ds-surface-1: #ffffff; --ds-surface-2: #e2e8f1; --ds-surface-raised: #ffffff; --ds-border: rgba(30, 50, 80, 0.12); --ds-border-strong: rgba(30, 50, 80, 0.20); --ds-text: #1b2533; --ds-text-2: #4a5a70; --ds-text-3: #74839a; --ds-accent: #3f6fd1; --ds-accent-ink: #ffffff; --ds-accent-soft: rgba(63, 111, 209, 0.12); --ds-pending: #94a3b8; --ds-visited: #2f6fb0; --ds-here: #2f8f4e; --ds-warn: #b5791a; --ds-danger: #d2553f; --ds-danger-soft: rgba(210, 85, 63, 0.10); --ds-shadow: 0 8px 24px rgba(30, 50, 80, 0.10); --ds-card-shadow: 0 1px 2px rgba(30, 50, 80, 0.05), 0 4px 14px rgba(30, 50, 80, 0.06); } /* ---- Lilac: soft violet on lavender white ---- */ :root[data-theme="lilac"] { --ds-bg: #f4f1f9; --ds-surface-1: #ffffff; --ds-surface-2: #ebe6f4; --ds-surface-raised: #ffffff; --ds-border: rgba(70, 50, 100, 0.12); --ds-border-strong: rgba(70, 50, 100, 0.20); --ds-text: #2a2435; --ds-text-2: #5a5072; --ds-text-3: #847a98; --ds-accent: #7c4ddb; --ds-accent-ink: #ffffff; --ds-accent-soft: rgba(124, 77, 219, 0.12); --ds-pending: #a89fc0; --ds-visited: #4a8fd0; --ds-here: #4f9e6a; --ds-warn: #b5791a; --ds-danger: #d2553f; --ds-danger-soft: rgba(210, 85, 63, 0.10); --ds-shadow: 0 8px 24px rgba(70, 50, 100, 0.10); --ds-card-shadow: 0 1px 2px rgba(70, 50, 100, 0.05), 0 4px 14px rgba(70, 50, 100, 0.06); } /* ---- Cherry Blossom: sakura pink on warm pink-white ---- */ :root[data-theme="cherry"] { --ds-bg: #fdf0f3; --ds-surface-1: #ffffff; --ds-surface-2: #f8e3e9; --ds-surface-raised: #ffffff; --ds-border: rgba(120, 40, 60, 0.12); --ds-border-strong: rgba(120, 40, 60, 0.20); --ds-text: #3a212a; --ds-text-2: #6e5058; --ds-text-3: #97757f; --ds-accent: #d6608a; --ds-accent-ink: #ffffff; --ds-accent-soft: rgba(214, 96, 138, 0.12); --ds-pending: #c2a3ac; --ds-visited: #4a8fd0; --ds-here: #4f9e6a; --ds-warn: #c2761b; --ds-danger: #d2553f; --ds-danger-soft: rgba(210, 85, 63, 0.10); --ds-shadow: 0 8px 24px rgba(120, 40, 60, 0.10); --ds-card-shadow: 0 1px 2px rgba(120, 40, 60, 0.05), 0 4px 14px rgba(120, 40, 60, 0.06); } /* ---- Sky Blue: bright airy blue on sky-white ---- */ :root[data-theme="sky"] { --ds-bg: #eef6fd; --ds-surface-1: #ffffff; --ds-surface-2: #dcecf9; --ds-surface-raised: #ffffff; --ds-border: rgba(20, 60, 100, 0.12); --ds-border-strong: rgba(20, 60, 100, 0.20); --ds-text: #102433; --ds-text-2: #3f5b72; --ds-text-3: #6c879e; --ds-accent: #0e8fd6; --ds-accent-ink: #ffffff; --ds-accent-soft: rgba(14, 143, 214, 0.12); --ds-pending: #93acc0; --ds-visited: #2f6fb0; --ds-here: #2f8f4e; --ds-warn: #b5791a; --ds-danger: #d2553f; --ds-danger-soft: rgba(210, 85, 63, 0.10); --ds-shadow: 0 8px 24px rgba(20, 60, 100, 0.10); --ds-card-shadow: 0 1px 2px rgba(20, 60, 100, 0.05), 0 4px 14px rgba(20, 60, 100, 0.06); } /* ---- Onyx: true black (OLED) with brand teal ---- */ :root[data-theme="onyx"] { --ds-bg: #000000; --ds-surface-1: #0c0c0e; --ds-surface-2: #141416; --ds-surface-raised: #1b1b1f; --ds-border: rgba(255, 255, 255, 0.10); --ds-border-strong: rgba(255, 255, 255, 0.18); --ds-text: #f4f4f6; --ds-text-2: #a0a0a8; --ds-text-3: #6c6c74; --ds-accent: #2dd4bf; --ds-accent-ink: #04241f; --ds-accent-soft: rgba(45, 212, 191, 0.14); --ds-pending: #64748b; --ds-visited: #3b82f6; --ds-here: #10b981; --ds-warn: #f59e0b; --ds-danger: #f87171; --ds-danger-soft: rgba(248, 113, 113, 0.12); --ds-shadow: 0 8px 24px rgba(0, 0, 0, 0.6); --ds-card-shadow: none; } /* ---- Ember: warm espresso dark with amber accent ---- */ :root[data-theme="ember"] { --ds-bg: #17110d; --ds-surface-1: #221913; --ds-surface-2: #2c211a; --ds-surface-raised: #382a20; --ds-border: rgba(255, 235, 210, 0.10); --ds-border-strong: rgba(255, 235, 210, 0.18); --ds-text: #f7ede2; --ds-text-2: #c2ab98; --ds-text-3: #8c7563; --ds-accent: #f0883e; --ds-accent-ink: #2a1606; --ds-accent-soft: rgba(240, 136, 62, 0.14); --ds-pending: #8c7563; --ds-visited: #5a9bd4; --ds-here: #3fae72; --ds-warn: #f5a623; --ds-danger: #f0705a; --ds-danger-soft: rgba(240, 112, 90, 0.14); --ds-shadow: 0 8px 24px rgba(0, 0, 0, 0.5); --ds-card-shadow: none; } /* ---- Dark Forest: deep green dark with fresh-leaf accent ---- */ :root[data-theme="forest"] { --ds-bg: #0c140f; --ds-surface-1: #14201a; --ds-surface-2: #1b2a22; --ds-surface-raised: #24362c; --ds-border: rgba(210, 255, 225, 0.10); --ds-border-strong: rgba(210, 255, 225, 0.18); --ds-text: #e8f2ea; --ds-text-2: #9bb3a4; --ds-text-3: #6a8275; --ds-accent: #4ade80; --ds-accent-ink: #052311; --ds-accent-soft: rgba(74, 222, 128, 0.14); --ds-pending: #6a8275; --ds-visited: #56a8d8; --ds-here: #34d399; --ds-warn: #e0a82e; --ds-danger: #f0705a; --ds-danger-soft: rgba(240, 112, 90, 0.14); --ds-shadow: 0 8px 24px rgba(0, 0, 0, 0.5); --ds-card-shadow: none; } /* Activity category badge: the auto-derived emoji that leads each "to-do here" checklist row (see app.locals.activityIcon). Token-based so it stays a subtle tinted chip across every theme. Shared by the trip-detail row partial and the point-detail page. */ .point-activity-icon { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 1.6rem; height: 1.6rem; border-radius: var(--ds-r-sm); background: var(--ds-surface-2); border: 1px solid var(--ds-border); font-size: 0.95rem; line-height: 1; } /* A ticked-off activity dims its icon to match the struck-through text. */ .point-activity[data-activity-done="true"] .point-activity-icon { opacity: 0.5; } /* ---- reusable flat components (for new markup) ---- */ .ds-card { background: var(--ds-surface-1); border: 1px solid var(--ds-border); border-radius: var(--ds-r-xl); padding: 1rem 1.25rem; box-shadow: var(--ds-card-shadow); } .ds-btn { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: 14px; line-height: 1; padding: 10px 16px; border-radius: var(--ds-r-pill); border: 1px solid transparent; cursor: pointer; transition: background-color .15s ease, border-color .15s ease, transform .05s ease; } .ds-btn:active { transform: scale(0.98); } .ds-btn-primary { background: var(--ds-accent); color: var(--ds-accent-ink); } .ds-btn-secondary { background: transparent; border-color: var(--ds-border-strong); color: var(--ds-text); } .ds-btn-secondary:hover { background: var(--ds-surface-2); } .ds-btn-ghost { background: var(--ds-surface-2); color: var(--ds-text-2); } .ds-btn-danger { background: var(--ds-danger-soft); color: var(--ds-danger); } .ds-pill { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; padding: 3px 10px; border-radius: var(--ds-r-pill); border: 1px solid var(--ds-border); color: var(--ds-text-2); } .ds-input, .ds-select { width: 100%; background: var(--ds-surface-2); color: var(--ds-text); border: 1px solid var(--ds-border); border-radius: var(--ds-r-md); padding: 9px 12px; font-size: 14px; } .ds-input::placeholder { color: var(--ds-text-3); } /* ========================================================================= ds-app — page opt-in. Scopes the redefinition of legacy classes + a compatibility layer that maps the most common Tailwind utilities onto tokens, so existing markup goes flat + theme-aware with no edits. ========================================================================= */ body.ds-app { background: var(--ds-bg); color: var(--ds-text); -webkit-font-smoothing: antialiased; } /* glass is gone: redefine the dominant card class as a flat token surface. --ds-card-shadow is `none` in dark and a whisper of lift in the light themes. */ .ds-app .glass-panel, .ds-app .route-point-shell { background: var(--ds-surface-1); border: 1px solid var(--ds-border); border-radius: var(--ds-r-xl); -webkit-backdrop-filter: none; -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: var(--ds-card-shadow); } /* primary action: flat accent fill, no gradient */ .ds-app .cta-primary { background: var(--ds-accent); color: var(--ds-accent-ink); border: 1px solid transparent; box-shadow: none; white-space: nowrap; } .ds-app .cta-primary:hover { filter: brightness(1.05); } /* Quick-share trigger while the link is being generated. */ [data-share-trip].is-sharing { opacity: 0.6; cursor: progress; pointer-events: none; } [data-share-trip].is-sharing svg { animation: ot-share-spin 0.8s linear infinite; } @keyframes ot-share-spin { to { transform: rotate(360deg); } } /* hero glow / decorative gradients off in flat mode */ .ds-app .hero-glow { display: none; } /* --- compatibility map: common Tailwind utilities -> tokens (specificity 0,2,0 beats the 0,1,0 utility, so no markup change is needed) --- */ .ds-app .text-white, .ds-app .text-slate-50, .ds-app .text-slate-100, .ds-app .text-slate-200, .ds-app .text-slate-300 { color: var(--ds-text); } .ds-app .text-slate-400 { color: var(--ds-text-2); } .ds-app .text-slate-500 { color: var(--ds-text-3); } /* opacity-modified slate/white (e.g. "Added by" = text-slate-300/80) — Tailwind makes these distinct classes, so they need their own remap or they stay the raw pale colour and wash out on a light surface. */ .ds-app .text-white\/90, .ds-app .text-white\/80 { color: var(--ds-text); } .ds-app .text-slate-300\/80, .ds-app .text-slate-400\/80 { color: var(--ds-text-2); } .ds-app .text-cyan-100, .ds-app .text-cyan-200, .ds-app .text-cyan-300 { color: var(--ds-accent); } .ds-app .text-emerald-100, .ds-app .text-emerald-200 { color: var(--ds-here); } .ds-app .text-red-100, .ds-app .text-red-200 { color: var(--ds-danger); } .ds-app .text-amber-100, .ds-app .text-amber-200 { color: var(--ds-warn); } .ds-app .bg-white\/5 { background-color: var(--ds-surface-1); } .ds-app .bg-white\/10 { background-color: var(--ds-surface-2); } .ds-app .bg-slate-950, .ds-app .bg-slate-900 { background-color: var(--ds-surface-2); } /* arbitrary-opacity + extra variants found across the other pages */ .ds-app [class*="bg-white/["] { background-color: var(--ds-surface-1); } .ds-app .bg-slate-950\/90, .ds-app .bg-slate-900\/90 { background-color: var(--ds-surface-2); } .ds-app .bg-cyan-300\/10, .ds-app .bg-cyan-400\/5, .ds-app .bg-teal-300\/10 { background-color: var(--ds-accent-soft); } .ds-app .bg-cyan-400\/10 { background-color: var(--ds-accent-soft); } .ds-app .bg-emerald-400\/10 { background-color: var(--ds-accent-soft); } .ds-app .bg-teal-200\/10, .ds-app .bg-teal-100\/10 { background-color: var(--ds-accent-soft); } .ds-app .border-white\/10 { border-color: var(--ds-border); } .ds-app .border-white\/15, .ds-app .border-white\/20 { border-color: var(--ds-border-strong); } .ds-app .border-cyan-300\/20, .ds-app .border-cyan-300\/25, .ds-app .border-cyan-300\/30, .ds-app .border-teal-200\/30, .ds-app .border-teal-200\/40 { border-color: color-mix(in srgb, var(--ds-accent) 35%, transparent); } /* opacity-variant accent text + amber (warn) badges that the base remap missed — without these they keep their raw pale colour and wash out on a light surface. */ .ds-app .text-cyan-100\/80, .ds-app .text-cyan-200\/80 { color: var(--ds-accent); } .ds-app .text-emerald-200\/80, .ds-app .text-emerald-200\/90 { color: var(--ds-here); } .ds-app .text-amber-100\/90, .ds-app .text-amber-200\/90 { color: var(--ds-warn); } .ds-app .bg-amber-300\/10, .ds-app .bg-amber-300\/15, .ds-app .bg-amber-400\/10, .ds-app .bg-amber-400\/15 { background-color: color-mix(in srgb, var(--ds-warn) 16%, transparent); } .ds-app .border-amber-300\/20, .ds-app .border-amber-300\/25, .ds-app .border-amber-400\/30 { border-color: color-mix(in srgb, var(--ds-warn) 35%, transparent); } /* ========================================================================= Light-theme overrides for the trip-detail page's bespoke components. These have hardcoded dark surfaces + light text in the page's inline