/* ========================================================================== Laura & Ian • 15th Anniversary Trail - Bundled Production Stylesheet Generated automatically by scripts/build.py ========================================================================== */ /* --- Module: tokens.css --- */ /* ========================================================================== Design Tokens — GENERATED FILE, DO NOT EDIT BY HAND. Source of truth: data/theme_defaults.yaml engine themes (palette, type, spacing, pacing) data/tokens.yaml this project's `theme:` + overrides Regenerate with: python3 scripts/build.py Active theme: adventure_roadtrip (Adventure Roadtrip) ========================================================================== */ /* Active theme: Adventure Roadtrip — Autumn byways, orchard stands, and leather-bound trail dossiers. */ :root { --theme-name: 'adventure_roadtrip'; --canvas: #F4EFEA; --card-front: #FFFFFF; --card-back: #FCFAF6; --card-detour: #F9F5EE; --forest: #222E21; --forest-deep: #162016; --forest-light: #344433; --terracotta: #B54728; --terracotta-soft: #D96041; --amber: #D5841D; --amber-light: #FCF4E8; --wine: #742537; --sage: #4B6853; --ink: #221C17; --ink-muted: #6B6258; --leather-base: #382516; --leather-edge: #23160D; --parchment: #F8F3E6; --parchment-border: #D8CBB6; --gold: #C08A2E; --sign-accent: #FFDDA6; --alert: #FF9A8B; --wood-dark: #322114; --wood-grain: #4A321E; --washi-tape: rgba(236, 220, 192, 0.92); --font-display: 'Fraunces', Georgia, serif; --font-ui: 'Plus Jakarta Sans', -apple-system, sans-serif; --font-hand: 'Caveat', cursive; --font-mono: 'Space Mono', monospace; --font-body: 'Plus Jakarta Sans', -apple-system, sans-serif; --font-size-2xs: 0.64rem; --font-size-xs: 0.7rem; --font-size-sm: 0.78rem; --font-size-base: 0.88rem; --font-size-md: 1.0rem; --font-size-lg: 1.15rem; --font-size-xl: 1.3rem; --font-size-2xl: 1.6rem; --page-pad-bottom: 270px; --radius-3xs: 2px; --radius-2xs: 4px; --radius-xs: 6px; --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px; --radius-xl: 20px; --radius-pill: 999px; --card-radius: 16px; --pill-radius: 999px; --bg-page-color: var(--canvas); --bg-page-image: radial-gradient(rgba(181, 71, 40, 0.035) 1px, transparent 1px), radial-gradient(rgba(34, 46, 33, 0.035) 1px, transparent 1px); --bg-page-size: 28px 28px, 28px 28px; --bg-page-position: 0 0, 14px 14px; --bg-page-attachment: scroll, scroll; --bg-gate: radial-gradient(circle at 50% 25%, #243423 0%, #131E12 70%, #0A110A 100%); --bg-gate-card: linear-gradient(180deg, #382416 0%, #25160C 55%, #190E07 100%); --bg-gate-card-border: #8B6547; --bg-flag: #D5841D; --bg-flag-color: #1F2A1E; --bg-header: rgba(24, 34, 24, 0.98); --bg-header-border: rgba(255, 255, 255, 0.14); --bg-logo-pill: linear-gradient(135deg, var(--terracotta) 0%, #8C2C13 100%); --bg-logo-pill-color: #FFFFFF; --bg-day-tag: var(--forest); --bg-day-tag-border: #FFFFFF; --bg-theme-color: #182218; --z-behind: -1; --z-ambient: 10; --z-delight: 25; --z-header: 120; --z-compass: 220; --z-dock: 300; --z-folio: 500; --z-qr: 600; --z-gate: 900; --z-switcher: 950; --z-modal: 1000; --z-modal-top: 1100; --dur-instant: 0.15s; --dur-fast: 0.2s; --dur-base: 0.28s; --dur-slow: 0.45s; --dur-deliberate: 0.7s; --ease-standard: cubic-bezier(0.4, 0.0, 0.2, 1); --ease-entrance: cubic-bezier(0.0, 0.0, 0.2, 1); --ease-exit: cubic-bezier(0.4, 0.0, 1, 1); --ambient-particle-shape: leaf; --ambient-particle-colors: #B54728, #D5841D, #8C5C38; --ambient-particle-count: 9; --ambient-particle-opacity: 0.65; --ambient-particle-size: 22; --elevation-sm: 0 2px 6px rgba(0, 0, 0, 0.08); --elevation-card: 0 10px 28px rgba(34, 46, 33, 0.08); --elevation-card-hover: 0 14px 34px rgba(34, 46, 33, 0.12); --elevation-card-raised: 0 18px 42px rgba(0, 0, 0, 0.28); --elevation-overlay: 0 24px 60px rgba(0, 0, 0, 0.5); --elevation-chip: 0 2px 4px rgba(0, 0, 0, 0.1); --elevation-inset: inset 0 2px 4px rgba(0, 0, 0, 0.2); --pacing-shared-bg: #FCF4E8; --pacing-shared-color: #784606; --pacing-active-bg: #EBF2EC; --pacing-active-color: #204627; --pacing-unwind-bg: #F7EDE9; --pacing-unwind-color: #7D2912; --chip-shared-bg: var(--sage); --chip-shared-ink: #FFFFFF; --chip-active-bg: var(--wine); --chip-active-ink: #FFFFFF; --chip-unwind-bg: var(--forest-light); --chip-unwind-ink: #FFFFFF; --chip-amber-bg: var(--amber); --chip-amber-ink: #1F1A12; --chip-orchard-bg: var(--terracotta); --chip-orchard-ink: #FFFFFF; --chip-wood-bg: var(--leather-base); --chip-wood-ink: #FFFFFF; --chip-moss-bg: var(--sage); --chip-moss-ink: #FFFFFF; --chip-wine-bg: var(--wine); --chip-wine-ink: #FFFFFF; --chip-sepia-bg: var(--ink-muted); --chip-sepia-ink: #FFFFFF; --chip-tunnel-bg: var(--forest-deep); --chip-tunnel-ink: #FFFFFF; --surface-badge-bg: var(--forest-deep); --surface-badge-ink: #FFFFFF; --surface-badge-ink-muted: #BEC1BE; --surface-badge-veil: rgba(255, 255, 255, 0.06); --surface-badge-line: rgba(255, 255, 255, 0.16); --surface-badge-fill: rgba(255, 255, 255, 0.24); --surface-badge-well: rgba(31, 26, 18, 0.3); --surface-action-bg: var(--forest); --surface-action-ink: #FFFFFF; --surface-action-ink-muted: #C1C4C1; --surface-action-veil: rgba(255, 255, 255, 0.06); --surface-action-line: rgba(255, 255, 255, 0.16); --surface-action-fill: rgba(255, 255, 255, 0.24); --surface-action-well: rgba(31, 26, 18, 0.3); --surface-sign-bg: var(--wood-dark); --surface-sign-ink: #FFFFFF; --surface-sign-ink-muted: #C6C1BD; --surface-sign-veil: rgba(255, 255, 255, 0.06); --surface-sign-line: rgba(255, 255, 255, 0.16); --surface-sign-fill: rgba(255, 255, 255, 0.24); --surface-sign-well: rgba(31, 26, 18, 0.3); --surface-panel-bg: var(--leather-edge); --surface-panel-ink: #FFFFFF; --surface-panel-ink-muted: #C1BEBB; --surface-panel-veil: rgba(255, 255, 255, 0.06); --surface-panel-line: rgba(255, 255, 255, 0.16); --surface-panel-fill: rgba(255, 255, 255, 0.24); --surface-panel-well: rgba(31, 26, 18, 0.3); } /* Theme: Adventure Roadtrip — Autumn byways, orchard stands, and leather-bound trail dossiers. */ body[data-theme="adventure_roadtrip"] { --theme-name: 'adventure_roadtrip'; --canvas: #F4EFEA; --card-front: #FFFFFF; --card-back: #FCFAF6; --card-detour: #F9F5EE; --forest: #222E21; --forest-deep: #162016; --forest-light: #344433; --terracotta: #B54728; --terracotta-soft: #D96041; --amber: #D5841D; --amber-light: #FCF4E8; --wine: #742537; --sage: #4B6853; --ink: #221C17; --ink-muted: #6B6258; --leather-base: #382516; --leather-edge: #23160D; --parchment: #F8F3E6; --parchment-border: #D8CBB6; --gold: #C08A2E; --sign-accent: #FFDDA6; --alert: #FF9A8B; --wood-dark: #322114; --wood-grain: #4A321E; --washi-tape: rgba(236, 220, 192, 0.92); --font-display: 'Fraunces', Georgia, serif; --font-ui: 'Plus Jakarta Sans', -apple-system, sans-serif; --font-hand: 'Caveat', cursive; --font-mono: 'Space Mono', monospace; --font-body: 'Plus Jakarta Sans', -apple-system, sans-serif; --font-size-2xs: 0.64rem; --font-size-xs: 0.7rem; --font-size-sm: 0.78rem; --font-size-base: 0.88rem; --font-size-md: 1.0rem; --font-size-lg: 1.15rem; --font-size-xl: 1.3rem; --font-size-2xl: 1.6rem; --page-pad-bottom: 270px; --radius-3xs: 2px; --radius-2xs: 4px; --radius-xs: 6px; --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px; --radius-xl: 20px; --radius-pill: 999px; --card-radius: 16px; --pill-radius: 999px; --bg-page-color: var(--canvas); --bg-page-image: radial-gradient(rgba(181, 71, 40, 0.035) 1px, transparent 1px), radial-gradient(rgba(34, 46, 33, 0.035) 1px, transparent 1px); --bg-page-size: 28px 28px, 28px 28px; --bg-page-position: 0 0, 14px 14px; --bg-page-attachment: scroll, scroll; --bg-gate: radial-gradient(circle at 50% 25%, #243423 0%, #131E12 70%, #0A110A 100%); --bg-gate-card: linear-gradient(180deg, #382416 0%, #25160C 55%, #190E07 100%); --bg-gate-card-border: #8B6547; --bg-flag: #D5841D; --bg-flag-color: #1F2A1E; --bg-header: rgba(24, 34, 24, 0.98); --bg-header-border: rgba(255, 255, 255, 0.14); --bg-logo-pill: linear-gradient(135deg, var(--terracotta) 0%, #8C2C13 100%); --bg-logo-pill-color: #FFFFFF; --bg-day-tag: var(--forest); --bg-day-tag-border: #FFFFFF; --bg-theme-color: #182218; --z-behind: -1; --z-ambient: 10; --z-delight: 25; --z-header: 120; --z-compass: 220; --z-dock: 300; --z-folio: 500; --z-qr: 600; --z-gate: 900; --z-switcher: 950; --z-modal: 1000; --z-modal-top: 1100; --dur-instant: 0.15s; --dur-fast: 0.2s; --dur-base: 0.28s; --dur-slow: 0.45s; --dur-deliberate: 0.7s; --ease-standard: cubic-bezier(0.4, 0.0, 0.2, 1); --ease-entrance: cubic-bezier(0.0, 0.0, 0.2, 1); --ease-exit: cubic-bezier(0.4, 0.0, 1, 1); --ambient-particle-shape: leaf; --ambient-particle-colors: #B54728, #D5841D, #8C5C38; --ambient-particle-count: 9; --ambient-particle-opacity: 0.65; --ambient-particle-size: 22; --elevation-sm: 0 2px 6px rgba(0, 0, 0, 0.08); --elevation-card: 0 10px 28px rgba(34, 46, 33, 0.08); --elevation-card-hover: 0 14px 34px rgba(34, 46, 33, 0.12); --elevation-card-raised: 0 18px 42px rgba(0, 0, 0, 0.28); --elevation-overlay: 0 24px 60px rgba(0, 0, 0, 0.5); --elevation-chip: 0 2px 4px rgba(0, 0, 0, 0.1); --elevation-inset: inset 0 2px 4px rgba(0, 0, 0, 0.2); --pacing-shared-bg: #FCF4E8; --pacing-shared-color: #784606; --pacing-active-bg: #EBF2EC; --pacing-active-color: #204627; --pacing-unwind-bg: #F7EDE9; --pacing-unwind-color: #7D2912; --chip-shared-bg: var(--sage); --chip-shared-ink: #FFFFFF; --chip-active-bg: var(--wine); --chip-active-ink: #FFFFFF; --chip-unwind-bg: var(--forest-light); --chip-unwind-ink: #FFFFFF; --chip-amber-bg: var(--amber); --chip-amber-ink: #1F1A12; --chip-orchard-bg: var(--terracotta); --chip-orchard-ink: #FFFFFF; --chip-wood-bg: var(--leather-base); --chip-wood-ink: #FFFFFF; --chip-moss-bg: var(--sage); --chip-moss-ink: #FFFFFF; --chip-wine-bg: var(--wine); --chip-wine-ink: #FFFFFF; --chip-sepia-bg: var(--ink-muted); --chip-sepia-ink: #FFFFFF; --chip-tunnel-bg: var(--forest-deep); --chip-tunnel-ink: #FFFFFF; --surface-badge-bg: var(--forest-deep); --surface-badge-ink: #FFFFFF; --surface-badge-ink-muted: #BEC1BE; --surface-badge-veil: rgba(255, 255, 255, 0.06); --surface-badge-line: rgba(255, 255, 255, 0.16); --surface-badge-fill: rgba(255, 255, 255, 0.24); --surface-badge-well: rgba(31, 26, 18, 0.3); --surface-action-bg: var(--forest); --surface-action-ink: #FFFFFF; --surface-action-ink-muted: #C1C4C1; --surface-action-veil: rgba(255, 255, 255, 0.06); --surface-action-line: rgba(255, 255, 255, 0.16); --surface-action-fill: rgba(255, 255, 255, 0.24); --surface-action-well: rgba(31, 26, 18, 0.3); --surface-sign-bg: var(--wood-dark); --surface-sign-ink: #FFFFFF; --surface-sign-ink-muted: #C6C1BD; --surface-sign-veil: rgba(255, 255, 255, 0.06); --surface-sign-line: rgba(255, 255, 255, 0.16); --surface-sign-fill: rgba(255, 255, 255, 0.24); --surface-sign-well: rgba(31, 26, 18, 0.3); --surface-panel-bg: var(--leather-edge); --surface-panel-ink: #FFFFFF; --surface-panel-ink-muted: #C1BEBB; --surface-panel-veil: rgba(255, 255, 255, 0.06); --surface-panel-line: rgba(255, 255, 255, 0.16); --surface-panel-fill: rgba(255, 255, 255, 0.24); --surface-panel-well: rgba(31, 26, 18, 0.3); } /* Theme: Tropical Paradise — Yacht havens, reef water, and late-gold harbour light. */ body[data-theme="tropical"] { --theme-name: 'tropical'; --canvas: #0F282F; --card-front: #173842; --card-back: #14313B; --card-detour: #112A32; --forest: #00A896; --forest-deep: #028090; --forest-light: #05668D; --terracotta: #F4A261; --terracotta-soft: #E76F51; --amber: #E9C46A; --amber-light: #264653; --wine: #D81E5B; --sage: #2A9D8F; --ink: #E0F2F1; --ink-muted: #B2DFDB; --leather-base: #1C3144; --leather-edge: #0F1B29; --parchment: #1E3F4A; --parchment-border: #2A5A68; --gold: #E9C46A; --sign-accent: #F2D9A0; --alert: #FF9A8B; --wood-dark: #322114; --wood-grain: #4A321E; --washi-tape: rgba(42, 157, 143, 0.38); --font-display: 'Fraunces', Georgia, serif; --font-ui: 'Plus Jakarta Sans', -apple-system, sans-serif; --font-hand: 'Caveat', cursive; --font-mono: 'Space Mono', monospace; --font-body: 'Plus Jakarta Sans', -apple-system, sans-serif; --font-size-2xs: 0.64rem; --font-size-xs: 0.7rem; --font-size-sm: 0.78rem; --font-size-base: 0.88rem; --font-size-md: 1.0rem; --font-size-lg: 1.15rem; --font-size-xl: 1.3rem; --font-size-2xl: 1.6rem; --page-pad-bottom: 270px; --radius-3xs: 2px; --radius-2xs: 4px; --radius-xs: 6px; --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px; --radius-xl: 20px; --radius-pill: 999px; --card-radius: 16px; --pill-radius: 999px; --bg-page-color: var(--canvas); --bg-page-image: radial-gradient(rgba(233, 196, 106, 0.05) 1px, transparent 1px), radial-gradient(rgba(0, 168, 150, 0.06) 1px, transparent 1px), radial-gradient(ellipse 70% 45% at 12% -5%, rgba(42, 157, 143, 0.30) 0%, transparent 62%), radial-gradient(ellipse 60% 40% at 92% 4%, rgba(233, 196, 106, 0.14) 0%, transparent 58%), linear-gradient(0deg, rgba(5, 20, 26, 0.55) 0%, transparent 34%); --bg-page-size: 28px 28px, 28px 28px, auto, auto, auto; --bg-page-position: 0 0, 14px 14px, 0 0, 0 0, 0 0; --bg-page-attachment: scroll, scroll, fixed, fixed, fixed; --bg-gate: radial-gradient(circle at 50% 18%, #16505C 0%, #0F282F 58%, #061419 100%); --bg-gate-card: linear-gradient(180deg, #17414C 0%, #113039 55%, #0B1F27 100%); --bg-gate-card-border: #2F7F86; --bg-flag: #E9C46A; --bg-flag-color: #0F282F; --bg-header: linear-gradient(180deg, rgba(18, 52, 61, 0.97) 0%, rgba(12, 36, 43, 0.97) 100%); --bg-header-border: rgba(42, 157, 143, 0.30); --bg-logo-pill: linear-gradient(135deg, #1F756B 0%, #045677 100%); --bg-logo-pill-color: #FFFFFF; --bg-day-tag: linear-gradient(135deg, #028090 0%, #05668D 100%); --bg-day-tag-border: rgba(233, 196, 106, 0.75); --bg-theme-color: #0F282F; --z-behind: -1; --z-ambient: 10; --z-delight: 25; --z-header: 120; --z-compass: 220; --z-dock: 300; --z-folio: 500; --z-qr: 600; --z-gate: 900; --z-switcher: 950; --z-modal: 1000; --z-modal-top: 1100; --dur-instant: 0.15s; --dur-fast: 0.2s; --dur-base: 0.28s; --dur-slow: 0.45s; --dur-deliberate: 0.7s; --ease-standard: cubic-bezier(0.4, 0.0, 0.2, 1); --ease-entrance: cubic-bezier(0.0, 0.0, 0.2, 1); --ease-exit: cubic-bezier(0.4, 0.0, 1, 1); --ambient-particle-shape: frond; --ambient-particle-colors: #2A9D8F, #E9C46A, #00A896; --ambient-particle-count: 9; --ambient-particle-opacity: 0.45; --ambient-particle-size: 24; --elevation-sm: 0 0 0 1px rgba(255, 255, 255, 0.08), 0 2px 6px rgba(0, 0, 0, 0.3); --elevation-card: 0 0 0 1px rgba(255, 255, 255, 0.10), 0 10px 28px rgba(0, 0, 0, 0.4); --elevation-card-hover: 0 0 0 1px rgba(233, 196, 106, 0.25), 0 14px 34px rgba(0, 0, 0, 0.5); --elevation-card-raised: 0 0 0 1px rgba(233, 196, 106, 0.35), 0 18px 42px rgba(0, 0, 0, 0.6); --elevation-overlay: 0 0 0 1px rgba(255, 255, 255, 0.15), 0 24px 60px rgba(0, 0, 0, 0.75); --elevation-chip: 0 0 0 1px rgba(255, 255, 255, 0.08), 0 2px 4px rgba(0, 0, 0, 0.3); --elevation-inset: inset 0 2px 4px rgba(0, 0, 0, 0.4); --pacing-shared-bg: rgba(233, 196, 106, 0.16); --pacing-shared-color: #F1D79B; --pacing-active-bg: rgba(0, 168, 150, 0.18); --pacing-active-color: #8FE3D6; --pacing-unwind-bg: rgba(231, 111, 81, 0.18); --pacing-unwind-color: #F7B49C; --chip-shared-bg: var(--sage); --chip-shared-ink: #1F1A12; --chip-active-bg: var(--wine); --chip-active-ink: #FFFFFF; --chip-unwind-bg: var(--forest-light); --chip-unwind-ink: #FFFFFF; --chip-amber-bg: var(--amber); --chip-amber-ink: #1F1A12; --chip-orchard-bg: var(--terracotta); --chip-orchard-ink: #1F1A12; --chip-wood-bg: var(--leather-base); --chip-wood-ink: #FFFFFF; --chip-moss-bg: var(--sage); --chip-moss-ink: #1F1A12; --chip-wine-bg: var(--wine); --chip-wine-ink: #FFFFFF; --chip-sepia-bg: var(--ink-muted); --chip-sepia-ink: #1F1A12; --chip-tunnel-bg: var(--forest-deep); --chip-tunnel-ink: #FFFFFF; --surface-badge-bg: var(--forest-deep); --surface-badge-ink: #FFFFFF; --surface-badge-ink-muted: #FFFFFF; --surface-badge-veil: rgba(255, 255, 255, 0.06); --surface-badge-line: rgba(255, 255, 255, 0.16); --surface-badge-fill: rgba(255, 255, 255, 0.24); --surface-badge-well: rgba(31, 26, 18, 0.3); --surface-action-bg: var(--forest); --surface-action-ink: #1F1A12; --surface-action-ink-muted: #1A3127; --surface-action-veil: rgba(31, 26, 18, 0.06); --surface-action-line: rgba(31, 26, 18, 0.16); --surface-action-fill: rgba(31, 26, 18, 0.24); --surface-action-well: rgba(255, 255, 255, 0.3); --surface-sign-bg: var(--wood-dark); --surface-sign-ink: #FFFFFF; --surface-sign-ink-muted: #C6C1BD; --surface-sign-veil: rgba(255, 255, 255, 0.06); --surface-sign-line: rgba(255, 255, 255, 0.16); --surface-sign-fill: rgba(255, 255, 255, 0.24); --surface-sign-well: rgba(31, 26, 18, 0.3); --surface-panel-bg: var(--leather-edge); --surface-panel-ink: #FFFFFF; --surface-panel-ink-muted: #BCBFC3; --surface-panel-veil: rgba(255, 255, 255, 0.06); --surface-panel-line: rgba(255, 255, 255, 0.16); --surface-panel-fill: rgba(255, 255, 255, 0.24); --surface-panel-well: rgba(31, 26, 18, 0.3); } /* Theme: Mountain Camping — Alpine dusk, moonlit ridgelines, and a low campfire in the pines. */ body[data-theme="mountain_camping"] { --theme-name: 'mountain_camping'; --canvas: #1B241E; --card-front: #232E27; --card-back: #1F2822; --card-detour: #1A221D; --forest: #4F772D; --forest-deep: #31572C; --forest-light: #90A955; --terracotta: #D4A373; --terracotta-soft: #FAEDCD; --amber: #E07A5F; --amber-light: #2E3B32; --wine: #81B29A; --sage: #A3B18A; --ink: #F4F1DE; --ink-muted: #CCD5AE; --leather-base: #3D405B; --leather-edge: #22223B; --parchment: #2B3830; --parchment-border: #3E4F44; --gold: #D4A373; --sign-accent: #F0DCB4; --alert: #FF9A8B; --wood-dark: #322114; --wood-grain: #4A321E; --washi-tape: rgba(163, 177, 138, 0.30); --font-display: 'Fraunces', Georgia, serif; --font-ui: 'Plus Jakarta Sans', -apple-system, sans-serif; --font-hand: 'Caveat', cursive; --font-mono: 'Space Mono', monospace; --font-body: 'Plus Jakarta Sans', -apple-system, sans-serif; --font-size-2xs: 0.64rem; --font-size-xs: 0.7rem; --font-size-sm: 0.78rem; --font-size-base: 0.88rem; --font-size-md: 1.0rem; --font-size-lg: 1.15rem; --font-size-xl: 1.3rem; --font-size-2xl: 1.6rem; --page-pad-bottom: 270px; --radius-3xs: 2px; --radius-2xs: 4px; --radius-xs: 6px; --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px; --radius-xl: 20px; --radius-pill: 999px; --card-radius: 16px; --pill-radius: 999px; --bg-page-color: var(--canvas); --bg-page-image: radial-gradient(rgba(163, 177, 138, 0.055) 1px, transparent 1px), radial-gradient(rgba(144, 169, 85, 0.045) 1px, transparent 1px), radial-gradient(ellipse 55% 38% at 8% 102%, rgba(224, 122, 95, 0.16) 0%, transparent 68%), radial-gradient(ellipse 85% 48% at 52% -12%, rgba(212, 226, 205, 0.11) 0%, transparent 64%), linear-gradient(180deg, rgba(49, 87, 44, 0.30) 0%, rgba(27, 36, 30, 0) 46%), linear-gradient(0deg, rgba(9, 14, 11, 0.58) 0%, transparent 32%); --bg-page-size: 26px 26px, 26px 26px, auto, auto, auto, auto; --bg-page-position: 0 0, 13px 13px, 0 0, 0 0, 0 0, 0 0; --bg-page-attachment: scroll, scroll, fixed, fixed, fixed, fixed; --bg-gate: radial-gradient(circle at 76% 13%, rgba(244, 241, 222, 0.20) 0%, rgba(244, 241, 222, 0.05) 18%, transparent 34%), radial-gradient(ellipse 60% 34% at 10% 100%, rgba(224, 122, 95, 0.20) 0%, transparent 72%), radial-gradient(circle at 50% 20%, #2F4634 0%, #1B241E 58%, #0B110D 100%); --bg-gate-card: linear-gradient(180deg, #2B3931 0%, #1F2A23 55%, #141B16 100%); --bg-gate-card-border: #587459; --bg-flag: #E07A5F; --bg-flag-color: #20291F; --bg-header: linear-gradient(180deg, rgba(31, 42, 35, 0.97) 0%, rgba(22, 30, 25, 0.97) 100%); --bg-header-border: rgba(163, 177, 138, 0.24); --bg-logo-pill: linear-gradient(135deg, #486D29 0%, #2D5028 100%); --bg-logo-pill-color: #F4F1DE; --bg-day-tag: linear-gradient(135deg, #4F772D 0%, #31572C 100%); --bg-day-tag-border: rgba(163, 177, 138, 0.85); --bg-theme-color: #1B241E; --z-behind: -1; --z-ambient: 10; --z-delight: 25; --z-header: 120; --z-compass: 220; --z-dock: 300; --z-folio: 500; --z-qr: 600; --z-gate: 900; --z-switcher: 950; --z-modal: 1000; --z-modal-top: 1100; --dur-instant: 0.15s; --dur-fast: 0.2s; --dur-base: 0.28s; --dur-slow: 0.45s; --dur-deliberate: 0.7s; --ease-standard: cubic-bezier(0.4, 0.0, 0.2, 1); --ease-entrance: cubic-bezier(0.0, 0.0, 0.2, 1); --ease-exit: cubic-bezier(0.4, 0.0, 1, 1); --ambient-particle-shape: needle; --ambient-particle-colors: #A3B18A, #90A955, #E07A5F; --ambient-particle-count: 9; --ambient-particle-opacity: 0.5; --ambient-particle-size: 18; --elevation-sm: 0 0 0 1px rgba(255, 255, 255, 0.08), 0 2px 6px rgba(0, 0, 0, 0.3); --elevation-card: 0 0 0 1px rgba(255, 255, 255, 0.10), 0 10px 28px rgba(0, 0, 0, 0.4); --elevation-card-hover: 0 0 0 1px rgba(163, 177, 138, 0.25), 0 14px 34px rgba(0, 0, 0, 0.5); --elevation-card-raised: 0 0 0 1px rgba(224, 122, 95, 0.35), 0 18px 42px rgba(0, 0, 0, 0.6); --elevation-overlay: 0 0 0 1px rgba(255, 255, 255, 0.15), 0 24px 60px rgba(0, 0, 0, 0.75); --elevation-chip: 0 0 0 1px rgba(255, 255, 255, 0.08), 0 2px 4px rgba(0, 0, 0, 0.3); --elevation-inset: inset 0 2px 4px rgba(0, 0, 0, 0.4); --pacing-shared-bg: rgba(224, 122, 95, 0.16); --pacing-shared-color: #F0B49F; --pacing-active-bg: rgba(144, 169, 85, 0.18); --pacing-active-color: #C3D69A; --pacing-unwind-bg: rgba(129, 178, 154, 0.18); --pacing-unwind-color: #A8D3C0; --chip-shared-bg: var(--sage); --chip-shared-ink: #1F1A12; --chip-active-bg: var(--wine); --chip-active-ink: #1F1A12; --chip-unwind-bg: var(--forest-light); --chip-unwind-ink: #1F1A12; --chip-amber-bg: var(--amber); --chip-amber-ink: #1F1A12; --chip-orchard-bg: var(--terracotta); --chip-orchard-ink: #1F1A12; --chip-wood-bg: var(--leather-base); --chip-wood-ink: #FFFFFF; --chip-moss-bg: var(--sage); --chip-moss-ink: #1F1A12; --chip-wine-bg: var(--wine); --chip-wine-ink: #1F1A12; --chip-sepia-bg: var(--ink-muted); --chip-sepia-ink: #1F1A12; --chip-tunnel-bg: var(--forest-deep); --chip-tunnel-ink: #FFFFFF; --surface-badge-bg: var(--forest-deep); --surface-badge-ink: #FFFFFF; --surface-badge-ink-muted: #C5D0C4; --surface-badge-veil: rgba(255, 255, 255, 0.06); --surface-badge-line: rgba(255, 255, 255, 0.16); --surface-badge-fill: rgba(255, 255, 255, 0.24); --surface-badge-well: rgba(31, 26, 18, 0.3); --surface-action-bg: var(--forest); --surface-action-ink: #FFFFFF; --surface-action-ink-muted: #F1F4EE; --surface-action-veil: rgba(255, 255, 255, 0.06); --surface-action-line: rgba(255, 255, 255, 0.16); --surface-action-fill: rgba(255, 255, 255, 0.24); --surface-action-well: rgba(31, 26, 18, 0.3); --surface-sign-bg: var(--wood-dark); --surface-sign-ink: #FFFFFF; --surface-sign-ink-muted: #C6C1BD; --surface-sign-veil: rgba(255, 255, 255, 0.06); --surface-sign-line: rgba(255, 255, 255, 0.16); --surface-sign-fill: rgba(255, 255, 255, 0.24); --surface-sign-well: rgba(31, 26, 18, 0.3); --surface-panel-bg: var(--leather-edge); --surface-panel-ink: #FFFFFF; --surface-panel-ink-muted: #C1C1C8; --surface-panel-veil: rgba(255, 255, 255, 0.06); --surface-panel-line: rgba(255, 255, 255, 0.16); --surface-panel-fill: rgba(255, 255, 255, 0.24); --surface-panel-well: rgba(31, 26, 18, 0.3); } /* Theme: Metropolitan Luxury — Obsidian galleries, brushed gold, and after-hours city light. */ body[data-theme="metropolitan"] { --theme-name: 'metropolitan'; --canvas: #121212; --card-front: #1E1E1E; --card-back: #181818; --card-detour: #141414; --forest: #C5A059; --forest-deep: #8E733E; --forest-light: #E5C17C; --terracotta: #D4AF37; --terracotta-soft: #F3E5AB; --amber: #C5A059; --amber-light: #2A261F; --wine: #A40000; --sage: #708090; --ink: #F5F5F5; --ink-muted: #A0A0A0; --leather-base: #1A1A1A; --leather-edge: #000000; --parchment: #222222; --parchment-border: #3A3A3A; --gold: #C5A059; --sign-accent: #E5C17C; --alert: #FF9A8B; --wood-dark: #322114; --wood-grain: #4A321E; --washi-tape: rgba(197, 160, 89, 0.26); --font-display: 'Fraunces', Georgia, serif; --font-ui: 'Plus Jakarta Sans', -apple-system, sans-serif; --font-hand: 'Caveat', cursive; --font-mono: 'Space Mono', monospace; --font-body: 'Plus Jakarta Sans', -apple-system, sans-serif; --font-size-2xs: 0.64rem; --font-size-xs: 0.7rem; --font-size-sm: 0.78rem; --font-size-base: 0.88rem; --font-size-md: 1.0rem; --font-size-lg: 1.15rem; --font-size-xl: 1.3rem; --font-size-2xl: 1.6rem; --page-pad-bottom: 270px; --radius-3xs: 2px; --radius-2xs: 4px; --radius-xs: 6px; --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px; --radius-xl: 20px; --radius-pill: 999px; --card-radius: 16px; --pill-radius: 999px; --bg-page-color: var(--canvas); --bg-page-image: radial-gradient(rgba(197, 160, 89, 0.05) 1px, transparent 1px), radial-gradient(rgba(245, 245, 245, 0.03) 1px, transparent 1px), radial-gradient(ellipse 72% 42% at 50% -8%, rgba(197, 160, 89, 0.13) 0%, transparent 62%), linear-gradient(0deg, rgba(0, 0, 0, 0.55) 0%, transparent 30%); --bg-page-size: 30px 30px, 30px 30px, auto, auto; --bg-page-position: 0 0, 15px 15px, 0 0, 0 0; --bg-page-attachment: scroll, scroll, fixed, fixed; --bg-gate: radial-gradient(ellipse 55% 30% at 50% 0%, rgba(197, 160, 89, 0.18) 0%, transparent 60%), radial-gradient(circle at 50% 22%, #262119 0%, #121212 60%, #040404 100%); --bg-gate-card: linear-gradient(180deg, #242424 0%, #1A1A1A 55%, #0E0E0E 100%); --bg-gate-card-border: #C5A059; --bg-flag: #C5A059; --bg-flag-color: #121212; --bg-header: linear-gradient(180deg, rgba(20, 20, 20, 0.97) 0%, rgba(10, 10, 10, 0.97) 100%); --bg-header-border: rgba(197, 160, 89, 0.30); --bg-logo-pill: linear-gradient(135deg, #C5A059 0%, #AD8C4B 100%); --bg-logo-pill-color: #121212; --bg-day-tag: linear-gradient(135deg, #C5A059 0%, #8E733E 100%); --bg-day-tag-border: rgba(245, 245, 245, 0.55); --bg-theme-color: #121212; --z-behind: -1; --z-ambient: 10; --z-delight: 25; --z-header: 120; --z-compass: 220; --z-dock: 300; --z-folio: 500; --z-qr: 600; --z-gate: 900; --z-switcher: 950; --z-modal: 1000; --z-modal-top: 1100; --dur-instant: 0.15s; --dur-fast: 0.2s; --dur-base: 0.28s; --dur-slow: 0.45s; --dur-deliberate: 0.7s; --ease-standard: cubic-bezier(0.4, 0.0, 0.2, 1); --ease-entrance: cubic-bezier(0.0, 0.0, 0.2, 1); --ease-exit: cubic-bezier(0.4, 0.0, 1, 1); --ambient-particle-shape: dust; --ambient-particle-colors: #C5A059, #E5C17C, #8E733E; --ambient-particle-count: 14; --ambient-particle-opacity: 0.3; --ambient-particle-size: 10; --elevation-sm: 0 0 0 1px rgba(255, 255, 255, 0.08), 0 2px 6px rgba(0, 0, 0, 0.4); --elevation-card: 0 0 0 1px rgba(255, 255, 255, 0.10), 0 10px 28px rgba(0, 0, 0, 0.5); --elevation-card-hover: 0 0 0 1px rgba(197, 160, 89, 0.3), 0 14px 34px rgba(0, 0, 0, 0.6); --elevation-card-raised: 0 0 0 1px rgba(197, 160, 89, 0.45), 0 18px 42px rgba(0, 0, 0, 0.7); --elevation-overlay: 0 0 0 1px rgba(197, 160, 89, 0.2), 0 24px 60px rgba(0, 0, 0, 0.85); --elevation-chip: 0 0 0 1px rgba(255, 255, 255, 0.08), 0 2px 4px rgba(0, 0, 0, 0.3); --elevation-inset: inset 0 2px 4px rgba(0, 0, 0, 0.5); --pacing-shared-bg: rgba(197, 160, 89, 0.16); --pacing-shared-color: #E5C17C; --pacing-active-bg: rgba(245, 245, 245, 0.10); --pacing-active-color: #E8E8E8; --pacing-unwind-bg: rgba(164, 0, 0, 0.20); --pacing-unwind-color: #E9A0A0; --chip-shared-bg: #5B6876; --chip-shared-ink: #FFFFFF; --chip-active-bg: var(--wine); --chip-active-ink: #FFFFFF; --chip-unwind-bg: var(--forest-light); --chip-unwind-ink: #1F1A12; --chip-amber-bg: var(--amber); --chip-amber-ink: #1F1A12; --chip-orchard-bg: var(--terracotta); --chip-orchard-ink: #1F1A12; --chip-wood-bg: var(--leather-base); --chip-wood-ink: #FFFFFF; --chip-moss-bg: #5B6876; --chip-moss-ink: #FFFFFF; --chip-wine-bg: var(--wine); --chip-wine-ink: #FFFFFF; --chip-sepia-bg: var(--ink-muted); --chip-sepia-ink: #1F1A12; --chip-tunnel-bg: #745E32; --chip-tunnel-ink: #FFFFFF; --surface-badge-bg: #745E32; --surface-badge-ink: #FFFFFF; --surface-badge-ink-muted: #E3DFD6; --surface-badge-veil: rgba(255, 255, 255, 0.06); --surface-badge-line: rgba(255, 255, 255, 0.16); --surface-badge-fill: rgba(255, 255, 255, 0.24); --surface-badge-well: rgba(31, 26, 18, 0.3); --surface-action-bg: var(--forest); --surface-action-ink: #1F1A12; --surface-action-ink-muted: #403520; --surface-action-veil: rgba(31, 26, 18, 0.06); --surface-action-line: rgba(31, 26, 18, 0.16); --surface-action-fill: rgba(31, 26, 18, 0.24); --surface-action-well: rgba(255, 255, 255, 0.3); --surface-sign-bg: var(--wood-dark); --surface-sign-ink: #FFFFFF; --surface-sign-ink-muted: #C6C1BD; --surface-sign-veil: rgba(255, 255, 255, 0.06); --surface-sign-line: rgba(255, 255, 255, 0.16); --surface-sign-fill: rgba(255, 255, 255, 0.24); --surface-sign-well: rgba(31, 26, 18, 0.3); --surface-panel-bg: var(--leather-edge); --surface-panel-ink: #FFFFFF; --surface-panel-ink-muted: #B8B8B8; --surface-panel-veil: rgba(255, 255, 255, 0.06); --surface-panel-line: rgba(255, 255, 255, 0.16); --surface-panel-fill: rgba(255, 255, 255, 0.24); --surface-panel-well: rgba(31, 26, 18, 0.3); } /* Theme switcher swatches (available under every active theme) */ .theme-chip[data-theme-chip="adventure_roadtrip"] .theme-chip-dot { background: linear-gradient(135deg, #F4EFEA 0%, #B54728 50%, #222E21 100%); } .theme-chip[data-theme-chip="tropical"] .theme-chip-dot { background: linear-gradient(135deg, #0F282F 0%, #2A9D8F 50%, #E9C46A 100%); } .theme-chip[data-theme-chip="mountain_camping"] .theme-chip-dot { background: linear-gradient(135deg, #1B241E 0%, #4F772D 50%, #E07A5F 100%); } .theme-chip[data-theme-chip="metropolitan"] .theme-chip-dot { background: linear-gradient(135deg, #121212 0%, #C5A059 50%, #F5F5F5 100%); } /* --- Module: themes.css --- */ /* ========================================================================== Theme Structure -------------------------------------------------------------------------- All theme COLOR and BACKGROUND values now live in data/theme_defaults.yaml and are compiled into css/tokens.css by scripts/build.py. Nothing in this file should hard-code a theme palette. What belongs here: structural treatments a flat custom property can't carry — extra painted layers, silhouettes, per-theme geometry. ========================================================================== */ /* -------------------------------------------------------------------------- Mountain Camping — layered alpine depth. The token stack in theme_defaults.yaml paints the sky (moonwash, tree-line band, campfire glow, valley vignette). These two silhouettes add the ridge itself: a far ridgeline behind the page content, and a nearer, darker treeline across the foot of the trailhead gate. -------------------------------------------------------------------------- */ /* Far ridgeline, pinned behind all page content. */ body[data-theme="mountain_camping"]::before { content: ''; position: fixed; left: 0; right: 0; bottom: 0; height: 30vh; z-index: var(--z-behind); pointer-events: none; background: linear-gradient(180deg, rgba(20, 30, 23, 0) 0%, rgba(15, 22, 17, 0.72) 40%, rgba(10, 15, 12, 0.94) 100%); clip-path: polygon( 0% 100%, 0% 64%, 7% 50%, 13% 60%, 21% 36%, 29% 55%, 37% 43%, 46% 62%, 54% 40%, 63% 58%, 71% 32%, 79% 52%, 88% 45%, 95% 57%, 100% 48%, 100% 100%); } /* Nearer treeline on the locked gate, one shade darker and a touch taller. */ body[data-theme="mountain_camping"] .trailhead-gate::after { content: ''; position: fixed; left: 0; right: 0; bottom: 0; height: 34vh; z-index: 0; pointer-events: none; background: linear-gradient(180deg, rgba(11, 17, 13, 0.55) 0%, rgba(8, 12, 9, 0.95) 55%, #070B08 100%); clip-path: polygon( 0% 100%, 0% 58%, 6% 44%, 12% 56%, 19% 30%, 26% 49%, 34% 38%, 43% 57%, 51% 34%, 60% 53%, 68% 27%, 76% 47%, 85% 40%, 93% 54%, 100% 43%, 100% 100%); } /* --- Module: base.css --- */ /* Base Styles, Reset, Leaves, Common Helpers & Day Banners */ * { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; } html { scroll-behavior: smooth; } /* Focus ring for keyboard accessibility */ :focus-visible { outline: 2px solid var(--amber, #D5841D); outline-offset: 2px; } /* Page surface is entirely token-driven — see data/theme_defaults.yaml (`backgrounds.page_*`). Themes stack their own gradient layers here. */ body { background-color: var(--bg-page-color, var(--canvas)); background-image: var(--bg-page-image); background-size: var(--bg-page-size); background-position: var(--bg-page-position); background-attachment: var(--bg-page-attachment); background-repeat: repeat; font-family: var(--font-ui); color: var(--ink); line-height: 1.65; padding-bottom: var(--page-pad-bottom, 270px); overflow-x: hidden; } body.gate-locked { overflow: hidden; height: 100vh; } /* Ambient Leaves */ .leaf-canvas { position: fixed; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: var(--z-ambient); overflow: hidden; } .falling-leaf { position: absolute; top: -45px; font-size: var(--font-size-xl); user-select: none; opacity: 0.65; animation: driftSlow linear infinite; } @keyframes driftSlow { 0% { transform: translateY(0) rotate(0deg) translateX(0); opacity: 0.75; } 50% { transform: translateY(50vh) rotate(140deg) translateX(45px); } 100% { transform: translateY(105vh) rotate(320deg) translateX(-35px); opacity: 0; } } /* Common Card Layout Helpers */ .card-layout-row { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 12px; } @media (max-width: 480px) { .trail-station { margin-bottom: 48px; } .card-layout-row { flex-direction: column; } .farmstand-thumb, .vista-thumb { width: 100%; height: 140px; } header { padding: 9px 12px; } .header-top { gap: 6px; } .brand-title-row { gap: 5px; } .brand-heading { font-size: var(--font-size-lg); letter-spacing: -0.01em; white-space: nowrap; } .brand-logo-pill { font-size: var(--font-size-2xs); padding: 2px 5px; } .brand-subtitle { font-size: var(--font-size-2xs); } .step-counter-badge { padding: 4px 7px; gap: 4px; } .step-counter-text { font-size: var(--font-size-2xs); } .floating-live-compass { bottom: 16px; right: 14px; padding: 6px 12px 6px 8px; } .cassette-dock.visible ~ .floating-live-compass { bottom: 175px; } } .meta-inline-svg { width: 12px; height: 12px; flex-shrink: 0; } /* Day Banner */ .day-banner { position: relative; z-index: 3; margin: 64px 0 30px; text-align: center; } .day-tag { display: inline-flex; background: var(--bg-day-tag, var(--forest)); color: #fff; padding: 7px 20px; border-radius: var(--radius-pill); box-shadow: var(--elevation-sm); border: 2px solid var(--bg-day-tag-border, #FFFFFF); } .day-tag h2 { font-family: var(--font-display); font-size: var(--font-size-md); font-weight: 700; } /* ========================================================================== Reduced motion -------------------------------------------------------------------------- This app runs continuous ambient motion — drifting leaves, mist, lantern flicker, card flips — and until now offered no way out of it. One global block is the payoff for tokenising durations: there is a single place to honour the preference. Ambient canvases are removed outright rather than sped up; a 0.01ms leaf animation is still a leaf teleporting around the viewport. ========================================================================== */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } html { scroll-behavior: auto; } /* Purely decorative motion layers: remove, don't accelerate. */ .leaf-canvas, .trail-atmospheric-canvas { display: none; } } /* --- Module: gate.css --- */ /* Trailhead Gate & Countdown Hearth */ /* Trailhead Checkpoint Password Gate (Pre-Trip Teaser Dossier) */ .trailhead-gate { position: fixed; inset: 0; z-index: var(--z-gate); background: var(--bg-gate, radial-gradient(circle at 50% 25%, #243423 0%, #131E12 70%, #0A110A 100%)); display: flex; align-items: flex-start; justify-content: center; padding: 36px 16px; opacity: 1; transition: opacity var(--dur-slow) ease; overflow-y: auto; } .trailhead-gate.unlocked { opacity: 0; pointer-events: none; } .gate-card { position: relative; width: 100%; max-width: 480px; background: var(--bg-gate-card, linear-gradient(180deg, #382416 0%, #25160C 55%, #190E07 100%)); color: #F8EFE4; border-radius: var(--radius-xl); padding: 28px 22px; border: 1.5px solid var(--bg-gate-card-border, #8B6547); z-index: 1; box-shadow: var(--elevation-overlay); text-align: center; margin: auto; display: flex; flex-direction: column; gap: 18px; } .gate-header-cluster { display: flex; flex-direction: column; align-items: center; gap: 6px; } .gate-flag { display: inline-block; font-family: var(--font-mono); font-size: var(--font-size-2xs); font-weight: 700; background: var(--bg-flag, #D5841D); color: var(--bg-flag-color, #1F2A1E); padding: 3px 10px; border-radius: var(--radius-2xs); text-transform: uppercase; letter-spacing: 0.08em; } .gate-title { font-family: var(--font-display); font-size: var(--font-size-2xl); font-weight: 700; color: var(--sign-accent); line-height: 1.2; margin-top: 4px; } .gate-sub { font-size: var(--font-size-base); color: var(--parchment-border); line-height: 1.4; } .gate-route-badge { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: var(--font-size-xs); background: rgba(0,0,0,0.35); border: 1px solid rgba(255,221,166,0.25); padding: 5px 12px; border-radius: var(--radius-xl); color: #F8EFE4; margin-top: 4px; } .route-arrow { color: var(--sign-accent); } .route-classified { color: var(--sign-accent); font-weight: 700; } /* Teaser Countdown Box */ .gate-countdown-box { background: rgba(18, 12, 7, 0.7); border: 1px solid rgba(139, 101, 71, 0.5); border-radius: var(--radius-md); padding: 14px 12px; } .gate-countdown-label { font-family: var(--font-mono); font-size: var(--font-size-2xs); font-weight: 700; color: var(--sign-accent); letter-spacing: 0.08em; margin-bottom: 10px; } .gate-countdown-box .clock-grid { display: flex; justify-content: center; gap: 8px; margin-bottom: 4px; } .gate-countdown-box .clock-slot { background: rgba(0, 0, 0, 0.45); border: 1px solid rgba(255, 221, 166, 0.25); border-radius: var(--radius-md); padding: 8px 6px; min-width: 58px; display: flex; flex-direction: column; align-items: center; } .gate-countdown-box .clock-slot-val { font-family: var(--font-mono); color: var(--sign-accent); font-size: var(--font-size-xl); font-weight: 700; text-shadow: 0 0 10px rgba(255, 221, 166, 0.3); } .gate-countdown-box .clock-slot-lbl { font-family: var(--font-mono); color: var(--parchment-border); font-size: var(--font-size-2xs); text-transform: uppercase; letter-spacing: 0.5px; } /* Teaser Weather & Packing Guide */ .gate-weather-teaser { background: rgba(255, 255, 255, 0.05); border: 1px dashed rgba(213, 132, 29, 0.4); border-radius: var(--radius-md); padding: 14px 14px; text-align: left; } .gate-weather-header { display: flex; align-items: center; gap: 7px; font-family: var(--font-mono); font-size: var(--font-size-2xs); font-weight: 700; color: var(--sign-accent); letter-spacing: 0.06em; margin-bottom: 10px; } .gate-temp-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 10px; } .gate-temp-slot { background: rgba(0,0,0,0.3); border: 1px solid rgba(255,255,255,0.1); border-radius: var(--radius-sm); padding: 6px 4px; text-align: center; } .gate-temp-num { display: block; font-family: var(--font-mono); font-size: var(--font-size-base); font-weight: 700; color: var(--sign-accent); } .gate-temp-label { display: block; font-size: var(--font-size-2xs); color: var(--parchment-border); margin-top: 2px; } .gate-packing-pills { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 8px; } .gp-pill { font-family: var(--font-mono); font-size: var(--font-size-2xs); font-weight: 700; color: var(--sign-accent); background: rgba(213, 132, 29, 0.15); border: 1px solid rgba(213, 132, 29, 0.3); padding: 3px 6px; border-radius: var(--radius-2xs); } .gate-weather-note { font-size: var(--font-size-xs); color: var(--parchment-border); line-height: 1.35; font-style: italic; } /* Unlock Section */ .gate-unlock-section { display: flex; flex-direction: column; gap: 8px; } .gate-input-label { font-family: var(--font-mono); font-size: var(--font-size-2xs); font-weight: 700; color: var(--sign-accent); letter-spacing: 0.08em; } .gate-form { display: flex; flex-direction: column; gap: 10px; } .gate-input { font-family: var(--font-mono); font-size: var(--font-size-lg); font-weight: 700; letter-spacing: 0.12em; text-align: center; text-transform: uppercase; color: var(--bg-flag-color, #1F2A1E); background: var(--parchment); border: 2px solid var(--amber); border-radius: var(--radius-md); padding: 12px 10px; box-shadow: var(--elevation-inset); } .gate-hint { font-size: var(--font-size-xs); color: var(--parchment-border); } .gate-input.shake { animation: gateShake 0.4s ease; } @keyframes gateShake { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-8px); } 40% { transform: translateX(8px); } 60% { transform: translateX(-6px); } 80% { transform: translateX(6px); } } .gate-submit { font-family: var(--font-ui); font-size: var(--font-size-base); font-weight: 700; color: var(--bg-flag-color, #1F2A1E); background: var(--amber); border: none; border-radius: var(--radius-md); padding: 12px 10px; cursor: pointer; } .gate-error { display: none; color: #FFB4A0; font-size: var(--font-size-xs); font-weight: 600; margin-top: 12px; } .gate-error.show { display: block; } h1, h2, h3, h4, p, .card-title, .card-body-text, .track-desc, .sign-text { text-wrap: balance; text-wrap: pretty; } /* --- Module: header.css --- */ /* Sticky Navigation Header & Step Counter */ /* Tactile Boardgame Step Counter & Header Controls */ .header-controls { display: flex; align-items: center; gap: 8px; flex-shrink: 0; } .header-control-btn { background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.16); border-radius: var(--radius-pill); width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; color: #FFFFFF; cursor: pointer; transition: all var(--dur-fast) ease; flex-shrink: 0; } .header-control-btn:hover { background: rgba(255, 255, 255, 0.22); transform: translateY(-1px); } .step-counter-badge { background: linear-gradient(180deg, var(--leather-base) 0%, var(--leather-edge) 100%); color: #F8EFE4; border: 1.5px solid var(--parchment-border); border-radius: var(--radius-xl); padding: 5px 10px; display: inline-flex; align-items: center; gap: 5px; box-shadow: var(--elevation-sm); transition: transform var(--dur-base) ease; cursor: default; user-select: none; flex-shrink: 0; } .step-counter-badge.bump { transform: scale(1.1); } .step-counter-svg { width: 13px; height: 13px; fill: var(--sign-accent); flex-shrink: 0; } .step-counter-text { font-family: var(--font-mono); font-size: var(--font-size-2xs); font-weight: 800; line-height: 1; letter-spacing: 0.4px; color: #FFFFFF; } /* Sticky Mobile-First Header */ header { position: sticky; top: 0; z-index: var(--z-header); background: var(--bg-header, rgba(24, 34, 24, 0.98)); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-bottom: 1px solid var(--bg-header-border, rgba(255,255,255,0.14)); color: #fff; padding: 12px 16px; box-shadow: var(--elevation-card); } .header-box { max-width: 680px; margin: 0 auto; display: flex; flex-direction: column; gap: 8px; } .header-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; } .brand-meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .brand-title-row { display: flex; align-items: center; gap: 8px; } .brand-logo-pill { background: var(--bg-logo-pill, linear-gradient(135deg, var(--terracotta) 0%, #8C2C13 100%)); color: var(--bg-logo-pill-color, #fff); font-family: var(--font-display); font-weight: 700; font-size: var(--font-size-xs); padding: 3px 7px; border-radius: var(--radius-xs); border: 1px solid rgba(255,255,255,0.3); letter-spacing: 0.6px; white-space: nowrap; flex-shrink: 0; } .brand-heading { font-family: var(--font-display); font-size: var(--font-size-xl); font-weight: 700; letter-spacing: -0.015em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .brand-subtitle { font-size: var(--font-size-xs); color: #D3C9BE; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .weather-quick-btn { background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.22); color: #EDE5D8; font-family: var(--font-ui); font-size: var(--font-size-xs); font-weight: 700; padding: 5px 10px; border-radius: var(--radius-xl); cursor: pointer; display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; flex-shrink: 0; transition: all var(--dur-fast) ease; } .weather-quick-btn:hover { background: rgba(255,255,255,0.18); border-color: rgba(255,255,255,0.35); } .weather-quick-btn svg { width: 13px; height: 13px; stroke: var(--sign-accent); flex-shrink: 0; } .nav-track { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; } .nav-track::-webkit-scrollbar { display: none; } .nav-pill { background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.18); color: #EDE5D8; font-family: var(--font-ui); font-size: var(--font-size-xs); font-weight: 600; padding: 5px 12px; border-radius: var(--radius-md); cursor: pointer; white-space: nowrap; transition: all var(--dur-fast) ease; } .nav-pill.active { background: #FFFFFF; color: var(--forest); border-color: #FFFFFF; box-shadow: var(--elevation-sm); font-weight: 700; } .nav-pill-curator { margin-left: auto; border: 1px dashed rgba(255, 255, 255, 0.35); color: #EDE5D8; opacity: 0.88; display: inline-flex; align-items: center; gap: 4px; } .nav-pill-curator:hover { background: rgba(213, 132, 29, 0.2); border-color: var(--amber); color: #FFF2DF; opacity: 1; } .nav-pill-curator.active { background: var(--terracotta); border-color: var(--terracotta); color: #FFFFFF; opacity: 1; font-weight: 700; } /* Desktop & Mobile Responsive Header Search Pill */ .header-search-pill { background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.18); border-radius: var(--radius-pill); height: 28px; padding: 0 8px; display: flex; align-items: center; gap: 6px; color: #FFFFFF; cursor: pointer; transition: all var(--dur-fast) ease; flex-shrink: 0; } .header-search-pill:hover { background: rgba(255, 255, 255, 0.2); border-color: rgba(255, 255, 255, 0.35); transform: translateY(-1px); } .header-search-pill .search-pill-label { display: none; font-family: var(--font-ui); font-size: var(--font-size-xs); color: rgba(255, 255, 255, 0.85); } .header-search-pill .search-pill-kbd { display: none; background: rgba(255, 255, 255, 0.16); border-radius: 4px; padding: 1px 5px; font-family: var(--font-mono); font-size: 10px; font-weight: 700; color: rgba(255, 255, 255, 0.9); letter-spacing: 0.5px; } @media (min-width: 520px) { .header-search-pill { padding: 0 10px; gap: 7px; } .header-search-pill .search-pill-label { display: inline-block; } .header-search-pill .search-pill-kbd { display: inline-block; } } /* ---------------------------------------------------------------------- R1 — The header must fit a 430px phone without eating the traveler's own name. Priority order when space runs out, cheapest sacrifice first: 1. the brand subtitle (repeated on the welcome card) 2. the "OFFLINE READY" wording (the dot still carries the state) 3. the step counter (Passport is its real home) `.brand-heading` never truncates — it is the one piece of the header that is about the people on the trip. See docs/HUMAN_CENTERED_DESIGN.md § 6, R1. ---------------------------------------------------------------------- */ .brand-heading { flex-shrink: 0; overflow: visible; text-overflow: clip; } @media (max-width: 519px) { .brand-subtitle { display: none; } /* Keep the live dot, drop the words — the badge is a state, not a claim. */ .offline-status-badge #offline-status-text { display: none; } .offline-status-badge { gap: 0; padding: 5px 7px; } } @media (max-width: 400px) { .step-counter-badge { display: none; } } /* ---------------------------------------------------------------------- R2 — The offline badge is authored for a light surface (forest ink on a near-transparent forest wash) but it lives inside the dark header, so it rendered dark-green-on-dark-green and failed AA outright. Inside the header it gets header-appropriate ink. See docs/HUMAN_CENTERED_DESIGN.md § 6, R2. ---------------------------------------------------------------------- */ header .offline-status-badge { background: rgba(75, 104, 83, 0.35); color: #CFE3D4; border-color: rgba(207, 227, 212, 0.28); } header .offline-status-badge.is-offline { background: rgba(181, 71, 40, 0.28); color: #FFD9CC; border-color: rgba(255, 217, 204, 0.35); } header .offline-status-badge .offline-dot { background: #8FBF9B; box-shadow: 0 0 0 2px rgba(143, 191, 155, 0.25); } header .offline-status-badge.is-offline .offline-dot { background: #FFD9CC; box-shadow: 0 0 0 2px rgba(255, 217, 204, 0.3); } /* --- Module: theme-switcher.css --- */ /* ========================================================================== Demo Theme Switcher -------------------------------------------------------------------------- Only rendered into the VacayGo demo builds (build.py fills {{THEME_SWITCHER_HTML}}); client itineraries get an empty string, so none of this ever paints on a real trip site. It sits ABOVE the trailhead gate (z-index 950 vs 900) on purpose — the gate is the most theme-heavy screen in the app, so you want to hop between themes without unlocking first. ========================================================================== */ .theme-switcher { position: sticky; top: 0; z-index: var(--z-switcher); background: rgba(10, 12, 11, 0.94); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); border-bottom: 1px solid rgba(255, 255, 255, 0.12); padding: 7px 14px; font-family: var(--font-ui); } .theme-switcher-inner { max-width: 980px; margin: 0 auto; display: flex; align-items: center; gap: 14px; } .theme-switcher-brand { font-family: var(--font-display); font-size: var(--font-size-xs); letter-spacing: 0.10em; text-transform: uppercase; color: rgba(255, 255, 255, 0.55); white-space: nowrap; flex-shrink: 0; } .theme-switcher-brand b { color: rgba(255, 255, 255, 0.92); font-weight: 700; } /* The chips must never be clipped by the tagline: the track sizes to its content and the tagline takes only what is left (flex-basis 0). */ .theme-switcher-track { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; flex: 0 1 auto; min-width: 0; padding: 2px 0; } .theme-switcher-track::-webkit-scrollbar { display: none; } .theme-chip { display: inline-flex; align-items: center; gap: 7px; padding: 5px 11px 5px 7px; border-radius: var(--radius-pill); border: 1px solid rgba(255, 255, 255, 0.16); background: rgba(255, 255, 255, 0.06); color: rgba(255, 255, 255, 0.78); font-size: var(--font-size-xs); font-weight: 600; text-decoration: none; white-space: nowrap; transition: background var(--dur-fast) ease, border-color var(--dur-fast) ease, color var(--dur-fast) ease; } .theme-chip:hover { background: rgba(255, 255, 255, 0.13); border-color: rgba(255, 255, 255, 0.32); color: #FFFFFF; } .theme-chip.active { background: #FFFFFF; border-color: #FFFFFF; color: #12160F; font-weight: 700; box-shadow: var(--elevation-sm); } /* Per-theme gradient fill for the dot is generated into css/tokens.css. */ .theme-chip-dot { width: 15px; height: 15px; border-radius: 50%; flex-shrink: 0; border: 1px solid rgba(255, 255, 255, 0.35); box-shadow: var(--elevation-inset); } .theme-switcher-tagline { font-size: var(--font-size-xs); color: rgba(255, 255, 255, 0.45); font-style: italic; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1 1 0; min-width: 0; max-width: 40ch; } /* The sticky app header has to clear the switcher when one is present. */ body:has(.theme-switcher) header { top: 44px; } body:has(.theme-switcher) .trailhead-gate { padding-top: 74px; } @media (max-width: 720px) { .theme-switcher-tagline { display: none; } } @media (max-width: 520px) { .theme-switcher-brand { display: none; } .theme-switcher { padding: 6px 10px; } .theme-chip { font-size: 0.7rem; padding: 4px 9px 4px 6px; } body:has(.theme-switcher) header { top: 40px; } } /* --- Module: welcome.css --- */ /* Expedition Welcome Dossier & Route Map */ /* ========================================================================== EXPEDITION WELCOME & ROUTE MAP CARD (.expedition-welcome-card) ========================================================================== */ .expedition-welcome-card { position: relative; z-index: 5; background: var(--card-front); border: 1.5px solid var(--parchment-border); border-radius: var(--radius-xl); padding: 24px 22px; margin-bottom: 40px; box-shadow: var(--elevation-card); } .welcome-washi-tape { position: absolute; top: -10px; left: 50%; transform: translateX(-50%); width: 110px; height: 20px; background: rgba(226, 210, 185, 0.9); border-left: 2px dashed rgba(160, 130, 95, 0.4); border-right: 2px dashed rgba(160, 130, 95, 0.4); box-shadow: var(--elevation-chip); z-index: 6; } .welcome-card-inner { display: flex; flex-direction: column; gap: 20px; } .welcome-header { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 8px; } .welcome-badge-cluster { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 2px; } .welcome-badge { font-family: var(--font-mono); font-size: var(--font-size-2xs); font-weight: 700; background: var(--forest); color: #FFF; padding: 3px 9px; border-radius: var(--radius-2xs); letter-spacing: 0.06em; text-transform: uppercase; } .welcome-date-tag { font-family: var(--font-mono); font-size: var(--font-size-2xs); font-weight: 700; color: var(--terracotta); background: rgba(162, 72, 43, 0.1); border: 1px solid rgba(162, 72, 43, 0.25); padding: 3px 8px; border-radius: var(--radius-2xs); letter-spacing: 0.04em; } .welcome-title { font-family: var(--font-display); font-size: var(--font-size-2xl); font-weight: 700; color: var(--forest); line-height: 1.22; text-wrap: balance; } .welcome-lede { font-size: var(--font-size-base); color: var(--ink-muted); line-height: 1.55; max-width: 580px; margin: 0 auto; text-wrap: pretty; } /* Stylized Topographic Route Map Panel */ .welcome-map-panel { background: var(--parchment); border: 1.5px solid var(--parchment-border); border-radius: var(--radius-md); overflow: hidden; box-shadow: var(--elevation-inset); } .map-panel-header { display: flex; justify-content: space-between; align-items: center; padding: 10px 14px; background: rgba(255,255,255,0.6); border-bottom: 1px solid var(--parchment-border); flex-wrap: wrap; gap: 8px; } .map-title-label { font-family: var(--font-mono); font-size: var(--font-size-2xs); font-weight: 700; color: var(--forest); letter-spacing: 0.06em; } .btn-apple-maps-route { display: inline-flex; align-items: center; gap: 5px; font-family: var(--font-ui); font-size: var(--font-size-xs); font-weight: 700; background: var(--forest); color: #FFF; padding: 5px 11px; border-radius: var(--radius-xs); text-decoration: none; transition: all var(--dur-fast) ease; } .btn-apple-maps-route:hover { background: #172A1C; transform: translateY(-1px); } .route-canvas-box { padding: 12px 10px; position: relative; } .route-map-vector { width: 100%; height: auto; display: block; } .map-label-main { font-family: var(--font-ui); font-size: 21px; font-weight: 800; fill: #1A291B; paint-order: stroke fill; stroke: #F3ECE0; stroke-width: 5px; stroke-linejoin: round; } .map-label-sub { font-family: var(--font-mono); font-size: 14.5px; font-weight: 700; fill: #6E4420; paint-order: stroke fill; stroke: #F3ECE0; stroke-width: 4px; stroke-linejoin: round; } .map-label-return { font-family: var(--font-mono); font-size: 13px; font-weight: 800; fill: #2D4C37; letter-spacing: 0.05em; text-transform: uppercase; paint-order: stroke fill; stroke: #F3ECE0; stroke-width: 4px; stroke-linejoin: round; } .map-waypoint circle, .map-waypoint rect { transition: transform var(--dur-fast) ease; } .map-waypoint:hover circle, .map-waypoint:hover rect { transform: scale(1.3); cursor: pointer; } /* 4 Activity Category Tiles */ .welcome-activities-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; } .activity-tile { background: var(--card-front); border: 1px solid var(--parchment-border); border-radius: var(--radius-md); padding: 14px 12px; display: flex; gap: 12px; align-items: flex-start; box-shadow: var(--elevation-sm); transition: transform var(--dur-fast) ease, box-shadow var(--dur-fast) ease; } .activity-tile:hover { transform: translateY(-2px); box-shadow: var(--elevation-card-hover); } .act-icon-wrap { width: 36px; height: 36px; border-radius: var(--radius-md); background: rgba(45, 76, 55, 0.1); color: var(--forest); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .act-text { display: flex; flex-direction: column; gap: 3px; } .act-title { font-family: var(--font-display); font-size: var(--font-size-base); font-weight: 700; color: var(--forest); line-height: 1.25; text-wrap: balance; } .act-desc { font-size: var(--font-size-sm); color: var(--ink-muted); line-height: 1.45; text-wrap: pretty; } /* Stamp Game Callout Banner */ .stamp-game-banner { background: linear-gradient(135deg, var(--card-back) 0%, var(--parchment) 100%); border: 1.5px dashed var(--terracotta); border-radius: var(--radius-md); padding: 16px 16px; display: flex; align-items: center; gap: 14px; box-shadow: var(--elevation-sm); } .stamp-banner-icon-wrap { flex-shrink: 0; width: 44px; height: 44px; } .stamp-banner-seal { width: 100%; height: 100%; display: block; filter: drop-shadow(0 2px 4px rgba(162, 72, 43, 0.2)); } .stamp-banner-content { flex: 1; display: flex; flex-direction: column; gap: 2px; } .stamp-banner-tag { font-family: var(--font-mono); font-size: var(--font-size-2xs); font-weight: 700; color: var(--terracotta); letter-spacing: 0.08em; } .stamp-banner-heading { font-family: var(--font-display); font-size: var(--font-size-lg); font-weight: 700; color: var(--forest); line-height: 1.25; text-wrap: balance; } .stamp-banner-text { font-size: var(--font-size-sm); color: var(--ink-muted); line-height: 1.45; text-wrap: pretty; } .btn-stamp-scroll { display: inline-flex; align-items: center; gap: 6px; background: var(--terracotta); color: #FFF; font-family: var(--font-ui); font-size: var(--font-size-xs); font-weight: 700; padding: 8px 14px; border-radius: var(--radius-sm); border: none; cursor: pointer; flex-shrink: 0; box-shadow: var(--elevation-chip); transition: all var(--dur-fast) ease; white-space: nowrap; } .btn-stamp-scroll:hover { background: #87381F; transform: translateY(-1px); } @media (max-width: 600px) { .expedition-welcome-card { padding: 20px 14px; margin-bottom: 30px; } .welcome-activities-grid { grid-template-columns: 1fr; } .stamp-game-banner { flex-direction: column; align-items: flex-start; gap: 12px; } .btn-stamp-scroll { width: 100%; justify-content: center; } } /* --- Module: passport.css --- */ /* 15-Year Passport & Trail Stamps */ /* Passport Book & Easter Egg Folio */ .passport-book-card { position: relative; z-index: 5; background: var(--card-front); border: 2px solid var(--parchment-border); border-radius: var(--radius-xl); padding: 22px 16px; margin-bottom: 48px; box-shadow: var(--elevation-card); } .passport-book-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; } .passport-book-title { font-family: var(--font-display); font-size: var(--font-size-xl); font-weight: 700; color: var(--forest); } .passport-book-counter { font-family: var(--font-mono); font-size: var(--font-size-xs); font-weight: 700; background: var(--forest); color: #FFFFFF; padding: 3px 9px; border-radius: var(--radius-md); } .passport-book-tagline { font-size: var(--font-size-sm); color: var(--ink-muted); margin-bottom: 14px; } /* Tactile Confidential / Expedition Log Pocket */ .easter-egg-visa-pocket { background: linear-gradient(180deg, var(--parchment) 0%, var(--amber-light) 100%); border: 2px dashed var(--parchment-border); border-radius: var(--radius-md); padding: 14px 16px; margin-bottom: 22px; cursor: pointer; position: relative; box-shadow: var(--elevation-sm); transition: all var(--dur-base) ease; user-select: none; } .easter-egg-visa-pocket:hover { border-color: var(--terracotta); box-shadow: var(--elevation-chip); } .pocket-tab-header { display: flex; justify-content: space-between; align-items: center; gap: 10px; } .pocket-tab-title-group { display: flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: var(--font-size-xs); font-weight: 700; color: var(--forest); letter-spacing: 0.03em; line-height: 1.3; min-width: 0; } .pocket-title-text { color: var(--forest); white-space: normal; } .dossier-icon { flex-shrink: 0; color: var(--terracotta); } .pocket-tab-prompt { color: var(--terracotta); font-family: var(--font-mono); font-size: var(--font-size-2xs); font-weight: 800; letter-spacing: 0.04em; white-space: nowrap; flex-shrink: 0; padding: 4px 9px; background: rgba(181, 71, 40, 0.08); border: 1px solid rgba(181, 71, 40, 0.28); border-radius: var(--radius-xs); transition: all var(--dur-fast) ease; } .easter-egg-visa-pocket:hover .pocket-tab-prompt { background: rgba(181, 71, 40, 0.16); border-color: var(--terracotta); } .secret-visa-drawer { display: none; margin-top: 14px; padding-top: 14px; border-top: 1px dashed rgba(181, 71, 40, 0.35); animation: flapUnfold 0.35s ease; } .secret-visa-drawer.open { display: block; } @keyframes flapUnfold { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } } /* Vintage Circular & Octagonal Transit Visas Grid */ .marriage-stamps-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 12px; } .vintage-cachet { position: relative; background: var(--card-back); border-radius: 50%; width: 100%; aspect-ratio: 1 / 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 6px; box-shadow: var(--elevation-inset); transition: transform var(--dur-fast) ease, box-shadow var(--dur-fast) ease; user-select: none; } .vintage-cachet:hover { transform: scale(1.06) rotate(0deg) !important; box-shadow: var(--elevation-sm); } /* Individual authentic cachet styling */ .cachet-ist { border: 2px solid #2B4570; color: #2B4570; transform: rotate(-2.5deg); } .cachet-ebb { border: 2px solid #8C2E20; color: #8C2E20; border-radius: 46%; transform: rotate(3deg); } .cachet-mci { border: 2px dashed #345438; color: #345438; border-radius: var(--radius-md); transform: rotate(-1.5deg); } .cachet-mco { border: 2px solid #B86B1B; color: #B86B1B; transform: rotate(2deg); } .cachet-chs { border: 2px solid #4D382A; color: #4D382A; clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%); border-radius: 0; background: var(--parchment); transform: rotate(-3deg); } .cachet-bwi { border: 2px solid #1C485A; color: #1C485A; transform: rotate(1.5deg); } .cachet-jfk { border: 2px solid #8C281F; color: #8C281F; border-radius: var(--radius-sm); transform: rotate(-2deg); } .cachet-msn { border: 2px solid #2D5936; color: #2D5936; transform: rotate(2.5deg); } .cachet-pdx { border: 2px solid #265257; color: #265257; transform: rotate(-1deg); } .cachet-inner-ring { position: absolute; inset: 4px; border: 1px dashed currentColor; border-radius: inherit; pointer-events: none; opacity: 0.6; } .cachet-auth { font-family: var(--font-mono); font-size: var(--font-size-2xs); font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; line-height: 1; margin-bottom: 2px; } .cachet-code { font-family: var(--font-display); font-size: var(--font-size-lg); font-weight: 800; line-height: 1; letter-spacing: 0.06em; } .cachet-date { font-family: var(--font-mono); font-size: var(--font-size-2xs); font-weight: 600; line-height: 1; margin: 2px 0; border-top: 1px solid currentColor; border-bottom: 1px solid currentColor; padding: 1px 4px; } .cachet-dest { font-family: var(--font-ui); font-size: var(--font-size-2xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.02em; line-height: 1; } .cachet-sub { font-family: var(--font-mono); font-size: var(--font-size-2xs); opacity: 0.8; text-transform: uppercase; } .visa-section-label { font-family: var(--font-mono); font-size: var(--font-size-2xs); font-weight: 700; color: var(--terracotta); text-transform: uppercase; letter-spacing: 0.8px; margin-bottom: 8px; } /* Live Trail Stamp Cards with Pencil Sketch Effect */ .stamps-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; } .stamp-slot { background: var(--card-front); border: 1.5px dashed var(--parchment-border); border-radius: var(--radius-md); padding: 10px 8px; text-align: center; cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 92px; position: relative; user-select: none; transition: all var(--dur-base) ease; } .stamp-slot:hover { border-color: var(--terracotta); transform: translateY(-2px); } .stamp-slot.stamped { border-style: solid; border-color: var(--terracotta); background: var(--card-detour); box-shadow: var(--elevation-chip); } .stamp-sketch-svg { width: 36px; height: 36px; margin-bottom: 6px; stroke: var(--leather-base); fill: none; filter: grayscale(100%) contrast(175%) sepia(35%) opacity(0.72); transition: filter var(--dur-base) ease, stroke var(--dur-base) ease, transform var(--dur-base) cubic-bezier(0.34, 1.56, 0.64, 1); } .stamp-slot.stamped .stamp-sketch-svg { filter: none; stroke: var(--terracotta); fill: rgba(181, 71, 40, 0.08); transform: scale(1.1); } .stamp-name { font-size: var(--font-size-xs); font-weight: 700; color: var(--ink-muted); line-height: 1.25; text-align: center; transition: color var(--dur-fast) ease; } .stamp-slot.stamped .stamp-name { color: var(--terracotta); } .stamp-seal { position: absolute; top: 3px; right: 4px; font-family: var(--font-mono); font-size: var(--font-size-2xs); font-weight: 800; color: var(--terracotta); border: 1px solid var(--terracotta); border-radius: var(--radius-3xs); padding: 1px 3px; display: none; transform: rotate(8deg); background: rgba(255, 255, 255, 0.9); } .stamp-slot.stamped .stamp-seal { display: block; animation: stampThump 0.35s cubic-bezier(0.2, 0.8, 0.4, 1.2); } @keyframes stampThump { 0% { transform: scale(1.35) rotate(-6deg); opacity: 0; } 50% { transform: scale(0.95) rotate(-2deg); opacity: 0.9; } 100% { transform: scale(1) rotate(0deg); opacity: 1; } } /* --- Module: cards.css --- */ /* Trail Stage, 3D Flipper Anchor Cards */ /* Trail Container */ .trail-stage { position: relative; max-width: 680px; margin: 24px auto 0; padding: 0 14px; } .candy-track-svg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; } /* ALL TRAIL STATIONS (Restored Natural Spacing & Slower Graceful Reveal) */ .trail-station { position: relative; z-index: 2; margin-bottom: 60px; scroll-margin-top: 130px; opacity: 0; transform: translateY(24px); transition: opacity var(--dur-deliberate) ease, transform var(--dur-deliberate) ease; } .trail-station.placed { opacity: 1; transform: translateY(0); } /* TYPE 1: MAIN ROAD ANCHOR (3D Card) */ .anchor-station { perspective: 1400px; -webkit-perspective: 1400px; } .flipper-card { position: relative; width: 100%; transform-style: preserve-3d; -webkit-transform-style: preserve-3d; transition: transform var(--dur-deliberate) cubic-bezier(0.34, 1.15, 0.64, 1); } .trail-station.is-flipped .flipper-card { transform: rotateY(180deg); } .flipper-card:hover { box-shadow: var(--elevation-card); border-radius: var(--radius-xl); } .farmstand-trail-card { transition: transform var(--dur-base) ease, box-shadow var(--dur-base) ease; } .farmstand-trail-card:hover { transform: translateY(-2px); box-shadow: var(--elevation-card-hover); } .scenic-vista-card { transition: transform var(--dur-base) ease, box-shadow var(--dur-base) ease; } .scenic-vista-card:hover { transform: translateY(-2px); box-shadow: var(--elevation-card-raised); } .card-face { background: var(--card-front); border-radius: var(--radius-xl); padding: 22px 18px; box-shadow: var(--elevation-card); border: 1px solid rgba(220, 210, 196, 0.9); backface-visibility: hidden; -webkit-backface-visibility: hidden; display: flex; flex-direction: column; transition: box-shadow var(--dur-base) ease; } .card-face.back { position: absolute; inset: 0; background: var(--card-back); transform: rotateY(180deg); border: 2px dashed var(--amber); overflow-y: auto; overscroll-behavior: contain; } .trail-station.current-live .card-face.front { border: 2px solid var(--amber); box-shadow: 0 0 0 4px rgba(213, 132, 29, 0.25), var(--elevation-card-hover); } .washi-strip { position: absolute; top: -10px; left: 50%; transform: translateX(-50%); width: 90px; height: 20px; background: var(--washi-tape); border-left: 2px dashed rgba(180, 150, 110, 0.4); border-right: 2px dashed rgba(180, 150, 110, 0.4); z-index: 5; } .milestone-badge-inline { width: 32px; height: 32px; border-radius: 50%; background: var(--forest); color: #FFFFFF; font-family: var(--font-display); font-size: 1rem; font-weight: 700; display: flex; align-items: center; justify-content: center; border: 2px solid #FFFFFF; flex-shrink: 0; } .milestone-alt-badge-inline { background: var(--amber); color: var(--bg-flag-color, #1F2A1E); font-family: var(--font-mono); font-size: 0.68rem; font-weight: 800; padding: 3px 8px; border-radius: var(--radius-sm); display: flex; align-items: center; border: 2px solid #FFFFFF; flex-shrink: 0; } .card-meta-bar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; flex-wrap: wrap; gap: 6px 10px; } .meta-bar-left { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .stop-time-label { font-size: var(--font-size-xs); font-weight: 700; color: var(--terracotta); text-transform: uppercase; letter-spacing: 0.05em; } /* Chips are token-driven: `chips` in data/theme_defaults.yaml supplies the background, and --chip-*-ink is DERIVED per theme by measuring contrast, so a palette colour that flips light between themes still reads. Every pair is gated at WCAG AA by the build. */ .pacing-chip { font-size: var(--font-size-2xs); font-weight: 700; text-transform: uppercase; padding: 3px 8px; border-radius: var(--radius-xs); color: var(--chip-ink, #fff); white-space: nowrap; } .chip-shared { background: var(--chip-shared-bg); --chip-ink: var(--chip-shared-ink); } .chip-active { background: var(--chip-active-bg); --chip-ink: var(--chip-active-ink); } .chip-unwind { background: var(--chip-unwind-bg); --chip-ink: var(--chip-unwind-ink); } .chip-amber { background: var(--chip-amber-bg); --chip-ink: var(--chip-amber-ink); } .chip-orchard { background: var(--chip-orchard-bg); --chip-ink: var(--chip-orchard-ink); } .chip-wood { background: var(--chip-wood-bg); --chip-ink: var(--chip-wood-ink); } .chip-moss { background: var(--chip-moss-bg); --chip-ink: var(--chip-moss-ink); } .chip-wine { background: var(--chip-wine-bg); --chip-ink: var(--chip-wine-ink); } .chip-sepia { background: var(--chip-sepia-bg); --chip-ink: var(--chip-sepia-ink); } .chip-tunnel { background: var(--chip-tunnel-bg); --chip-ink: var(--chip-tunnel-ink); } .stop-heading-block { display: flex; flex-direction: column; margin-bottom: 14px; } .card-title { font-family: var(--font-display); font-size: var(--font-size-2xl); color: var(--forest); font-weight: 700; line-height: 1.25; margin-bottom: 4px; text-wrap: balance; } .clickable-location-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: var(--font-size-sm); color: var(--ink-muted); } .click-meta-link { color: var(--ink-muted); text-decoration: underline; text-decoration-color: var(--parchment-border); text-underline-offset: 3px; cursor: pointer; } .polaroid-box { background: #FFFFFF; padding: 8px 8px 30px; border-radius: var(--radius-2xs); box-shadow: var(--elevation-sm); margin-bottom: 18px; position: relative; } .polaroid-img { width: 100%; height: 190px; object-fit: cover; display: block; border-radius: var(--radius-3xs); } .polaroid-text { position: absolute; bottom: 6px; left: 10px; right: 10px; font-family: var(--font-hand); font-size: var(--font-size-xl); color: #352B23; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .card-body-text { font-size: var(--font-size-base); color: var(--ink); line-height: 1.62; margin-bottom: 18px; text-wrap: pretty; } .pacing-container { display: flex; flex-direction: column; gap: 8px; margin-bottom: 18px; } /* Pacing tracks are token-driven: data/theme_defaults.yaml -> pacing_tracks */ .pacing-card { background: var(--pacing-shared-bg, #F8F4ED); border: 1px solid var(--parchment-border); border-left: 4px solid var(--pacing-shared-color, var(--forest)); border-radius: var(--radius-md); padding: 10px 12px; display: flex; flex-direction: column; gap: 2px; } .pacing-card.active-track { background: var(--pacing-active-bg, #EBF2EC); border-left-color: var(--pacing-active-color, var(--wine)); } .pacing-card.unwind-track { background: var(--pacing-unwind-bg, #F7EDE9); border-left-color: var(--pacing-unwind-color, var(--sage)); } .track-badge { font-weight: 800; font-size: var(--font-size-xs); text-transform: uppercase; letter-spacing: 0.05em; } .track-badge.active { color: var(--pacing-active-color, var(--wine)); } .track-badge.unwind { color: var(--pacing-unwind-color, var(--sage)); } .track-badge.shared { color: var(--pacing-shared-color, var(--forest)); } .track-desc { font-size: var(--font-size-base); color: var(--ink); } /* Option Cards Grid */ .option-cards-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(125px, 1fr)); gap: 8px; margin-bottom: 18px; } .clickable-thumb-card { background: var(--parchment); border: 1px solid var(--parchment-border); border-radius: var(--radius-md); padding: 8px; cursor: pointer; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; } .thumb-img { width: 100%; height: 70px; object-fit: cover; border-radius: var(--radius-xs); } .thumb-label { font-size: var(--font-size-sm); font-weight: 700; color: var(--forest); } .thumb-sub { font-size: var(--font-size-2xs); color: var(--terracotta); font-weight: 600; } /* Campy Audio Exhibit Box */ .audio-embed-box { border: 1px solid var(--parchment-border); border-left: 3px solid var(--amber); background: var(--amber-light); border-radius: var(--radius-md); padding: 10px 12px; margin-bottom: 18px; display: flex; align-items: center; justify-content: space-between; gap: 10px; } .audio-embed-meta { display: flex; align-items: center; gap: 10px; } .audio-number-badge { font-family: var(--font-mono); font-weight: 700; font-size: var(--font-size-base); color: var(--terracotta); border: 1.5px solid var(--terracotta); border-radius: var(--radius-xs); padding: 3px 6px; background: #FFFFFF; } .audio-embed-text { display: flex; flex-direction: column; } .audio-embed-label { font-size: var(--font-size-2xs); text-transform: uppercase; font-weight: 700; color: var(--terracotta); } .audio-embed-title { font-family: var(--font-display); font-size: var(--font-size-base); font-weight: 700; color: var(--forest); } .btn-audio-guide { background: var(--forest); color: #FFFFFF; font-family: var(--font-ui); font-size: var(--font-size-sm); font-weight: 700; padding: 7px 12px; border-radius: var(--radius-sm); border: none; cursor: pointer; white-space: nowrap; } /* Card Footer Actions */ .card-footer-cluster { display: flex; justify-content: space-between; align-items: center; margin-top: auto; padding-top: 12px; border-top: 1px solid var(--parchment-border); } .btn-clean-pill { display: inline-flex; align-items: center; gap: 5px; font-size: var(--font-size-xs); font-weight: 700; padding: 6px 12px; border-radius: var(--radius-sm); text-decoration: none; color: var(--forest); background: var(--card-front); border: 1px solid var(--parchment-border); cursor: pointer; white-space: nowrap; } .btn-clean-pill.primary { background: var(--forest); color: #FFFFFF; border-color: var(--forest); } .btn-card-flipper { display: inline-flex; align-items: center; gap: 5px; font-size: var(--font-size-xs); font-weight: 700; padding: 6px 12px; border-radius: var(--radius-sm); color: var(--terracotta); background: var(--amber-light); border: 1px solid var(--parchment-border); cursor: pointer; white-space: nowrap; } /* --- Module: stations.css --- */ /* Station accent --------------- A station that names a `station_type` gets that type's accent as an inline --station-accent custom property (see render_station_html). The types set it to a palette token, not a literal, so it follows the active theme. Stations without a type simply fall back to --forest and nothing moves. */ .trail-station { --station-accent-resolved: var(--station-accent, var(--forest)); } .farmstand-trail-card, .scenic-vista-card { border-left-width: 4px; border-left-color: var(--station-accent-resolved); } /* ========================================================================== Station Cards Polish: Farmstands & Scenic Vistas - Detours / Farmstands: Artisan Kraft parchment, leather-stitch, clear pills - Scenic Vistas / Outlooks: Blue Ridge Parkway timber slab, warm typography, high-contrast elevation badges, and framed 16:9 panoramic photo ========================================================================== */ /* TYPE 2: DETOUR & FARMSTAND TRAIL CARD */ .farmstand-trail-card { background: var(--card-back); background-image: radial-gradient(rgba(100, 70, 40, 0.04) 1px, transparent 1px), radial-gradient(rgba(44, 76, 56, 0.03) 1px, transparent 1px); background-size: 16px 16px; color: var(--ink); border-radius: var(--radius-lg); padding: 20px 22px; border: 1.5px solid var(--parchment-border); box-shadow: var(--elevation-card); position: relative; transition: transform var(--dur-base) ease, box-shadow var(--dur-base) ease; } .farmstand-trail-card:hover { transform: translateY(-2px); box-shadow: var(--elevation-card-hover); } /* Subtle inner saddle-stitch echo */ .farmstand-trail-card::before { content: ''; position: absolute; inset: 5px; border: 1.5px dashed rgba(142, 107, 73, 0.28); border-radius: var(--radius-md); pointer-events: none; } .farmstand-top-bar { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px 12px; border-bottom: 1px solid rgba(158, 129, 102, 0.22); padding-bottom: 9px; margin-bottom: 12px; position: relative; z-index: 2; } .farmstand-badge { font-family: var(--font-mono); font-size: var(--font-size-2xs); font-weight: 700; background: var(--surface-badge-bg); border: 1px solid var(--parchment-border); color: var(--surface-badge-ink); padding: 3px 9px; border-radius: var(--radius-pill); text-transform: uppercase; letter-spacing: 0.05em; box-shadow: var(--elevation-sm); white-space: nowrap; flex-shrink: 0; } .farmstand-tag { font-family: var(--font-mono); font-size: var(--font-size-xs); font-weight: 600; color: var(--ink-muted); background: rgba(213, 132, 29, 0.1); padding: 2px 8px; border-radius: var(--radius-xs); border: 1px solid rgba(213, 132, 29, 0.2); white-space: nowrap; } .farmstand-title { font-family: var(--font-display); font-size: var(--font-size-xl); font-weight: 700; color: var(--ink); margin-bottom: 6px; line-height: 1.25; text-wrap: balance; position: relative; z-index: 2; } .farmstand-metadata-row { display: flex; flex-wrap: wrap; gap: 6px 10px; font-size: var(--font-size-sm); color: var(--ink-muted); margin-bottom: 14px; align-items: center; line-height: 1.4; position: relative; z-index: 2; } .farmstand-meta-link { color: var(--terracotta); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; font-weight: 600; display: inline-flex; align-items: center; gap: 4px; } .farmstand-thumb { width: 110px; height: 84px; object-fit: cover; border-radius: var(--radius-md); border: 1px solid var(--parchment-border); box-shadow: var(--elevation-chip); flex-shrink: 0; cursor: pointer; transition: transform var(--dur-fast) ease; } .farmstand-thumb:hover { transform: scale(1.03); } .farmstand-text { font-size: var(--font-size-base); color: var(--ink); line-height: 1.55; text-wrap: pretty; } .farmstand-action-bar { display: flex; justify-content: flex-end; border-top: 1px dashed rgba(158, 129, 102, 0.35); padding-top: 12px; margin-top: 8px; position: relative; z-index: 2; } .btn-farmstand-fieldguide { background: var(--surface-action-bg); color: var(--surface-action-ink); border: 1px solid var(--forest-deep); font-family: var(--font-ui); font-size: var(--font-size-sm); font-weight: 700; padding: 7px 15px; border-radius: var(--radius-pill); cursor: pointer; display: inline-flex; align-items: center; gap: 6px; transition: all var(--dur-fast) ease; box-shadow: var(--elevation-chip); } .btn-farmstand-fieldguide:hover { background: var(--forest-light); transform: translateY(-1px); } /* TYPE 3: SCENIC VISTA POINT (Refined Blue Ridge Parkway Overlook Slab) */ .scenic-vista-card { background: linear-gradient(145deg, var(--wood-grain) 0%, var(--wood-dark) 60%, var(--leather-edge) 100%); color: var(--surface-sign-ink); border-radius: var(--radius-lg); padding: 22px 22px; box-shadow: var(--elevation-card-hover); border: 2px solid var(--wood-grain); position: relative; transition: transform var(--dur-base) ease, box-shadow var(--dur-base) ease; } .scenic-vista-card:hover { transform: translateY(-2px); box-shadow: var(--elevation-card-raised); } /* Authentic rustic brass corner screws */ .sign-screw { width: 9px; height: 9px; border-radius: 50%; /* Brass hardware: deliberately fixed in every theme — it is a metal object on the sign, not a themed surface. */ background: radial-gradient(circle at 35% 30%, #F5DFA3 0%, #C9973F 50%, #5E4218 100%); border: 1px solid var(--leather-edge); box-shadow: var(--elevation-chip); position: absolute; z-index: 3; } .sign-screw.tl { top: 9px; left: 9px; } .sign-screw.tr { top: 9px; right: 9px; } .sign-screw.bl { bottom: 9px; left: 9px; } .sign-screw.br { bottom: 9px; right: 9px; } .vista-top-bar { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px 12px; border-bottom: 1px dashed rgba(248, 239, 228, 0.25); padding-bottom: 9px; margin-bottom: 12px; position: relative; z-index: 2; } .vista-flag { font-family: var(--font-mono); font-size: var(--font-size-2xs); font-weight: 700; background: var(--amber); color: var(--bg-flag-color); padding: 3px 9px; border-radius: var(--radius-pill); text-transform: uppercase; letter-spacing: 0.05em; white-space: nowrap; flex-shrink: 0; box-shadow: var(--elevation-chip); } .vista-elevation-badge { font-family: var(--font-mono); font-size: var(--font-size-xs); color: var(--sign-accent); background: rgba(213, 132, 29, 0.22); border: 1px solid rgba(255, 221, 166, 0.38); padding: 3px 9px; border-radius: var(--radius-xs); white-space: nowrap; } .vista-title { font-family: var(--font-display); font-size: var(--font-size-xl); font-weight: 700; color: var(--sign-accent); text-shadow: 0 2px 4px rgba(0,0,0,0.8); margin-bottom: 6px; line-height: 1.25; text-wrap: balance; position: relative; z-index: 2; } .vista-metadata-row { display: flex; flex-wrap: wrap; gap: 6px 10px; font-size: var(--font-size-sm); color: var(--parchment-border); margin-bottom: 14px; align-items: center; position: relative; z-index: 2; } .vista-meta-link { color: var(--sign-accent); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; font-weight: 600; display: inline-flex; align-items: center; gap: 4px; } .vista-thumb { width: 120px; height: 90px; object-fit: cover; border-radius: var(--radius-md); border: 1.5px solid rgba(255, 221, 166, 0.35); box-shadow: var(--elevation-card); flex-shrink: 0; cursor: pointer; transition: transform var(--dur-fast) ease; } .vista-thumb:hover { transform: scale(1.03); } .vista-text { font-size: var(--font-size-base); color: var(--surface-sign-ink); line-height: 1.55; text-wrap: pretty; } .vista-action-bar { display: flex; justify-content: flex-end; border-top: 1px dashed rgba(248, 239, 228, 0.22); padding-top: 12px; margin-top: 8px; position: relative; z-index: 2; } .btn-vista-fieldguide { background: rgba(255, 221, 166, 0.14); border: 1.5px solid var(--sign-accent); color: var(--sign-accent); font-family: var(--font-ui); font-size: var(--font-size-sm); font-weight: 700; padding: 7px 15px; border-radius: var(--radius-pill); cursor: pointer; display: inline-flex; align-items: center; gap: 6px; transition: all var(--dur-fast) ease; box-shadow: var(--elevation-sm); } .btn-vista-fieldguide:hover { background: rgba(255, 221, 166, 0.26); transform: translateY(-1px); } @media (max-width: 480px) { .farmstand-trail-card, .scenic-vista-card { padding: 16px 14px; } .farmstand-thumb, .vista-thumb { width: 100%; height: 140px; } } /* --- Module: folio.css --- */ /* Leather Folio Modal & Parchment Notes */ /* Aged Leather Folio Modal */ .folio-backdrop { position: fixed; inset: 0; background: rgba(18, 24, 17, 0.78); backdrop-filter: blur(8px); z-index: var(--z-folio); opacity: 0; pointer-events: none; transition: opacity var(--dur-slow) ease; display: flex; align-items: center; justify-content: center; padding: 16px; } .folio-backdrop.open { opacity: 1; pointer-events: auto; } .leather-folio-case { background: linear-gradient(145deg, var(--leather-base) 0%, var(--leather-edge) 100%); width: 100%; max-width: 580px; border-radius: var(--radius-lg); padding: 10px; box-shadow: var(--elevation-overlay); border: 1.5px solid var(--wood-grain); position: relative; max-height: 86vh; display: flex; flex-direction: column; transform: scale(0.95); transition: transform var(--dur-base) cubic-bezier(0.16, 1, 0.3, 1); } .folio-backdrop.open .leather-folio-case { transform: scale(1); } /* Subtle Archival Brass Rivets */ .brass-rivet { position: absolute; width: 10px; height: 10px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #F5DFA3 0%, #C9973F 50%, #7A5720 100%); box-shadow: var(--elevation-sm); z-index: 4; } .brass-rivet.tl { top: 8px; left: 8px; } .brass-rivet.tr { top: 8px; right: 8px; } .brass-rivet.bl { bottom: 8px; left: 8px; } .brass-rivet.br { bottom: 8px; right: 8px; } /* Streamlined Clean Parchment Sheet */ .parchment-sheet { background: var(--card-back); border-radius: var(--radius-md); border: 1.5px solid var(--parchment-border); padding: 24px 22px 20px; box-shadow: var(--elevation-inset); overflow-y: auto; display: flex; flex-direction: column; gap: 14px; } .parchment-header { display: flex; justify-content: space-between; align-items: flex-start; border-bottom: 2px dashed var(--parchment-border); padding-bottom: 10px; } .parchment-stamp-seal { font-family: var(--font-mono); font-size: var(--font-size-2xs); font-weight: 700; color: var(--terracotta); border: 1px solid var(--terracotta); padding: 2px 6px; border-radius: var(--radius-2xs); text-transform: uppercase; margin-bottom: 4px; display: inline-block; } .parchment-title { font-family: var(--font-display); font-size: var(--font-size-xl); color: #162016; /* Physical paper sheet: always dark title */ font-weight: 700; } .close-folio-btn { background: var(--parchment); border: 1px solid var(--parchment-border); border-radius: 50%; width: 32px; height: 32px; cursor: pointer; font-size: var(--font-size-base); display: flex; align-items: center; justify-content: center; color: var(--forest); flex-shrink: 0; } .parchment-body { display: flex; flex-direction: column; gap: 14px; font-size: var(--font-size-base); line-height: 1.6; color: #221C17; /* Physical paper sheet: always dark ink */ } .parchment-section-title { font-weight: 800; font-size: var(--font-size-xs); text-transform: uppercase; letter-spacing: 0.06em; color: var(--terracotta); margin-bottom: 4px; } .parchment-actions-cluster { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 12px; } .parchment-section-block { display: flex; flex-direction: column; gap: 4px; } .packing-list-grid { display: grid; grid-template-columns: 1fr; gap: 7px; margin-top: 4px; } .packing-pill-item { background: var(--card-front); border: 1px solid var(--parchment-border); border-radius: var(--radius-sm); padding: 6px 10px; font-size: var(--font-size-sm); color: var(--ink); display: flex; align-items: center; gap: 8px; } .packing-pill-tag { font-family: var(--font-mono); font-size: var(--font-size-2xs); font-weight: 800; color: var(--terracotta); background: rgba(181, 71, 40, 0.1); border: 1px solid rgba(181, 71, 40, 0.3); padding: 1px 5px; border-radius: var(--radius-2xs); letter-spacing: 0.04em; flex-shrink: 0; } /* ========================================================================== Vouchers, QR Passes & Confirmation Codes ========================================================================== */ .voucher-conf-banner { background: var(--parchment); border: 1.5px solid var(--parchment-border); border-left: 4px solid var(--terracotta); border-radius: var(--radius-sm); padding: 10px 14px; display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; } .conf-badge-meta { display: flex; flex-direction: column; gap: 2px; } .conf-kicker { font-family: var(--font-mono); font-size: var(--font-size-2xs); font-weight: 800; color: var(--terracotta); letter-spacing: 0.08em; text-transform: uppercase; } .conf-code-val { font-family: var(--font-mono); font-size: var(--font-size-lg); font-weight: 800; color: var(--forest); letter-spacing: 0.06em; user-select: all; } .btn-copy-conf { background: var(--card-front); border: 1px solid var(--parchment-border); border-radius: var(--radius-xs); padding: 5px 10px; font-family: var(--font-body); font-size: var(--font-size-xs); font-weight: 700; color: var(--forest); cursor: pointer; display: inline-flex; align-items: center; gap: 5px; transition: all var(--dur-fast) ease; flex-shrink: 0; } .btn-copy-conf:hover { background: var(--amber-light); border-color: var(--terracotta); color: var(--terracotta); } .btn-copy-conf.copied { background: var(--forest-light); border-color: var(--forest-light); color: #FFFFFF; } /* Vouchers Grid */ .vouchers-cards-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; margin: 6px 0 10px; } .voucher-item-card { background: var(--card-front); border: 1px solid var(--parchment-border); border-radius: var(--radius-sm); padding: 8px 10px; display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); transition: transform var(--dur-fast) ease, border-color var(--dur-fast) ease, box-shadow var(--dur-fast) ease; cursor: pointer; } .voucher-item-card:hover { transform: translateY(-2px); border-color: var(--terracotta); box-shadow: var(--elevation-chip); } .voucher-qr-thumb-box { position: relative; width: 48px; height: 48px; background: #FFFFFF; border: 1px solid var(--parchment-border); border-radius: var(--radius-xs); padding: 2px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; overflow: hidden; } .voucher-qr-img { width: 100%; height: 100%; object-fit: contain; } .qr-zoom-hint { display: none; } .voucher-doc-icon { width: 44px; height: 44px; border-radius: var(--radius-xs); display: flex; flex-direction: column; align-items: center; justify-content: center; flex-shrink: 0; } .voucher-doc-icon.pdf-icon { background: var(--amber-light); color: var(--terracotta); border: 1px solid rgba(181, 71, 40, 0.3); } .pdf-tag { font-family: var(--font-mono); font-size: var(--font-size-2xs); font-weight: 800; margin-top: -2px; } .voucher-card-info { display: flex; flex-direction: column; overflow: hidden; } .voucher-card-title { font-weight: 700; font-size: var(--font-size-base); color: var(--forest); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .voucher-card-sub { font-size: var(--font-size-xs); color: var(--ink-muted); } /* Email Confirmation Drawer */ .voucher-email-box { background: var(--parchment); border: 1px solid var(--parchment-border); border-radius: var(--radius-sm); overflow: hidden; margin: 6px 0 10px; } .voucher-email-header { padding: 8px 12px; background: var(--amber-light); display: flex; align-items: center; justify-content: space-between; cursor: pointer; user-select: none; } .email-header-left { display: flex; align-items: center; gap: 8px; color: var(--forest); font-weight: 700; font-size: var(--font-size-sm); } .email-toggle-cue { font-family: var(--font-mono); font-size: var(--font-size-2xs); color: var(--terracotta); font-weight: 700; } .voucher-email-drawer { padding: 10px 12px; display: none; background: var(--card-back); border-top: 1px solid var(--parchment-border); font-size: var(--font-size-sm); } .voucher-email-box.open .voucher-email-drawer { display: block; } .email-meta-line { font-size: var(--font-size-xs); color: var(--ink-muted); margin-bottom: 3px; } .email-body-text { white-space: pre-wrap; font-family: var(--font-body); font-size: var(--font-size-sm); line-height: 1.5; color: var(--ink); background: var(--card-front); padding: 8px 10px; border-radius: var(--radius-xs); border: 1px solid var(--parchment-border); margin-top: 6px; } /* ========================================================================== Expedition Scratchpad / Live Editable Notes (Stored Locally) ========================================================================== */ .parchment-scratchpad-block { background: var(--parchment); border: 1.5px solid var(--parchment-border); border-radius: var(--radius-md); padding: 12px 14px; margin-top: 8px; display: flex; flex-direction: column; gap: 6px; } .scratchpad-header-row { display: flex; align-items: center; justify-content: space-between; } .scratchpad-title-group { display: flex; align-items: center; gap: 6px; color: var(--terracotta); } .scratchpad-heading { font-family: var(--font-mono); font-size: var(--font-size-2xs); font-weight: 800; letter-spacing: 0.08em; color: var(--terracotta); } .scratchpad-status { font-family: var(--font-mono); font-size: var(--font-size-2xs); color: var(--ink-muted); transition: color var(--dur-base) ease; } .scratchpad-status.saving { color: var(--gold); } .scratchpad-status.saved { color: var(--forest); font-weight: 700; } .scratchpad-textarea { width: 100%; min-height: 80px; max-height: 200px; background: var(--card-front); border: 1px solid var(--parchment-border); border-radius: var(--radius-xs); padding: 8px 10px; font-family: var(--font-body); font-size: var(--font-size-base); line-height: 1.5; color: var(--ink); resize: vertical; box-shadow: var(--elevation-inset); transition: border-color var(--dur-fast) ease, box-shadow var(--dur-fast) ease; } .scratchpad-textarea:focus { outline: none; border-color: var(--forest); box-shadow: 0 0 0 3px rgba(45, 76, 55, 0.15); } .scratchpad-footer-row { display: flex; align-items: center; justify-content: space-between; font-size: var(--font-size-xs); color: var(--ink-muted); } .scratchpad-tip { font-size: var(--font-size-2xs); } .btn-revert-notes { background: none; border: none; font-family: var(--font-mono); font-size: var(--font-size-2xs); font-weight: 700; color: var(--terracotta); text-decoration: underline; cursor: pointer; padding: 0; } /* ========================================================================== Full-Screen High-Contrast QR Code Pass Modal ========================================================================== */ .qr-modal-backdrop { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.88); backdrop-filter: blur(10px); z-index: var(--z-qr); opacity: 0; pointer-events: none; transition: opacity var(--dur-base) ease; display: flex; align-items: center; justify-content: center; padding: 20px; } .qr-modal-backdrop.open { opacity: 1; pointer-events: auto; } .qr-modal-card { background: #FFFFFF; border-radius: var(--radius-lg); padding: 24px; max-width: 380px; width: 100%; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 12px; box-shadow: var(--elevation-overlay); } .qr-modal-kicker { font-family: var(--font-mono); font-size: var(--font-size-2xs); font-weight: 800; color: var(--terracotta); letter-spacing: 0.08em; text-transform: uppercase; } .qr-modal-title { font-family: var(--font-display); font-size: var(--font-size-lg); color: var(--forest); font-weight: 700; line-height: 1.3; } .qr-modal-img-wrap { width: 240px; height: 240px; background: #FFFFFF; border: 2px solid var(--parchment-border); border-radius: var(--radius-md); padding: 10px; display: flex; align-items: center; justify-content: center; box-shadow: var(--elevation-sm); } .qr-modal-img { width: 100%; height: 100%; object-fit: contain; } .qr-modal-code { font-family: var(--font-mono); font-size: var(--font-size-xl); font-weight: 800; letter-spacing: 0.08em; color: var(--forest); background: var(--parchment); padding: 6px 14px; border-radius: var(--radius-sm); } .btn-close-qr-modal { background: var(--forest-deep); color: #FFFFFF; border: none; border-radius: var(--radius-sm); padding: 10px 24px; font-family: var(--font-body); font-size: var(--font-size-base); font-weight: 700; cursor: pointer; width: 100%; margin-top: 6px; } /* --- Module: audio.css --- */ /* Cassette Boombox & Speech Audio Deck */ /* Pop-Up Cassette Boombox */ .cassette-dock { position: fixed; bottom: 12px; left: 12px; right: 12px; max-width: 640px; margin: 0 auto; background: linear-gradient(180deg, #FDD84C 0%, var(--amber) 55%, #B77502 100%); border: 3px solid #FFFFFF; border-radius: var(--radius-xl); padding: 14px 16px; box-shadow: var(--elevation-overlay); z-index: var(--z-dock); display: flex; flex-direction: column; gap: 10px; transform: translateY(160%); transition: transform var(--dur-deliberate) cubic-bezier(0.16, 1, 0.3, 1), max-height var(--dur-slow) ease; } .cassette-dock.visible { transform: translateY(0); } .cassette-dock.expanded { max-height: 84vh; } .tape-display-deck { background: var(--leather-edge); border: 2px solid var(--leather-base); border-radius: var(--radius-md); padding: 8px 12px; display: flex; justify-content: space-between; align-items: center; } .lcd-text-wrap { display: flex; flex-direction: column; overflow: hidden; width: 78%; } .lcd-sub { font-family: var(--font-mono); font-size: 0.66rem; color: var(--amber); } .marquee-container { width: 100%; overflow: hidden; white-space: nowrap; } .lcd-title { font-family: var(--font-mono); font-size: 0.92rem; color: #62FF83; text-shadow: 0 0 6px rgba(98, 255, 131, 0.7); display: inline-block; animation: radioMarquee 12s linear infinite alternate; } @keyframes radioMarquee { 0%, 20% { transform: translateX(0%); } 80%, 100% { transform: translateX(-45%); } } .reels-hub { display: flex; gap: 10px; } .reel { width: 24px; height: 24px; border-radius: 50%; border: 2px dashed #999; background: #2E2519; } .reel.spinning { animation: spinTape 2.2s linear infinite; } @keyframes spinTape { 100% { transform: rotate(360deg); } } .tape-progress-groove { width: 100%; height: 6px; background: #281E0F; border-radius: var(--radius-2xs); overflow: hidden; } .tape-ribbon { width: 0%; height: 100%; background: linear-gradient(90deg, #FF4820, #FFD23F); transition: width var(--dur-base) linear; } .tape-controls-bar { display: flex; justify-content: space-between; align-items: center; } .mechanical-keys { display: flex; gap: 6px; } .key-btn { background: linear-gradient(180deg, #F3F3F3 0%, #D0D0D0 50%, #A4A4A4 100%); border: 1px solid #666; border-radius: var(--radius-sm); padding: 6px 12px; font-weight: 800; font-size: 0.8rem; cursor: pointer; color: #262626; } .key-btn.play { background: linear-gradient(180deg, #4ADE80 0%, #16A34A 50%, #14532D 100%); color: #fff; } .deck-action-group { display: flex; gap: 6px; } .btn-deck-alt { background: var(--ink); color: var(--sign-accent); border: 1px solid var(--sign-accent); border-radius: var(--radius-sm); padding: 6px 10px; font-family: var(--font-mono); font-size: var(--font-size-xs); font-weight: 700; cursor: pointer; } .liner-notes-drawer { display: none; background: var(--card-back); border: 2px dashed var(--parchment-border); border-radius: var(--radius-md); padding: 16px; max-height: 260px; overflow-y: auto; font-size: var(--font-size-base); line-height: 1.6; } .liner-notes-drawer.open { display: block; } .liner-notes-header { font-family: var(--font-display); font-size: var(--font-size-lg); color: var(--forest); font-weight: 700; margin-bottom: 6px; display: flex; justify-content: space-between; align-items: center; } .j-card-meta { font-family: var(--font-mono); font-size: var(--font-size-2xs); color: var(--terracotta); text-transform: uppercase; margin-bottom: 6px; } /* Tactile Cassette Button Press Feedback */ .key-btn:active, .btn-deck-alt:active { transform: translateY(2px) scale(0.97); box-shadow: var(--elevation-inset); } /* --- Module: compass.css --- */ /* Floating Live Stop Compass Widget */ /* Floating Live Stop Compass Widget (Always Accessible) */ .floating-live-compass { position: fixed; bottom: 22px; right: 18px; z-index: var(--z-compass); display: flex; align-items: center; gap: 9px; background: linear-gradient(145deg, var(--forest) 0%, var(--forest-deep) 100%); border: 1.5px solid var(--sign-accent); border-radius: var(--radius-pill); padding: 7px 15px 7px 10px; box-shadow: var(--elevation-card-raised); cursor: pointer; user-select: none; transition: all var(--dur-base) cubic-bezier(0.16, 1, 0.3, 1); } .floating-live-compass:hover { transform: translateY(-3px) scale(1.03); box-shadow: var(--elevation-overlay); border-color: var(--sign-accent); } .floating-live-compass:active { transform: translateY(-1px) scale(0.98); } .compass-icon-wrap { width: 30px; height: 30px; border-radius: 50%; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,221,166,0.3); display: flex; align-items: center; justify-content: center; color: var(--sign-accent); flex-shrink: 0; } .compass-needle { transform-origin: 12px 12px; transition: transform var(--dur-base) ease; } .floating-live-compass:hover .compass-needle { animation: needleWiggle 0.6s ease-in-out infinite alternate; } @keyframes needleWiggle { 0% { transform: rotate(-24deg); } 100% { transform: rotate(24deg); } } .live-compass-text-wrap { display: flex; flex-direction: column; text-align: left; line-height: 1.15; } .live-compass-kicker { font-family: var(--font-mono); font-size: var(--font-size-2xs); font-weight: 800; color: var(--sign-accent); letter-spacing: 0.08em; } .live-compass-title { font-family: var(--font-ui); font-size: var(--font-size-xs); font-weight: 700; color: #FFFFFF; } .live-pulse-ring { width: 8px; height: 8px; border-radius: 50%; background: #4ADE80; box-shadow: 0 0 0 0 rgba(74, 222, 128, 0.7); animation: livePulse 2s infinite; flex-shrink: 0; } @keyframes livePulse { 0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(74, 222, 128, 0.7); } 70% { transform: scale(1); box-shadow: 0 0 0 7px rgba(74, 222, 128, 0); } 100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(74, 222, 128, 0); } } .cassette-dock.visible ~ .floating-live-compass { bottom: 185px; } /* --- Module: offline.css --- */ /* Offline Indicator & Archive Viewer UI */ .offline-status-badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: var(--radius-pill); font-size: var(--font-size-xs); font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; background: rgba(34, 46, 33, 0.08); color: var(--forest); border: 1px solid rgba(34, 46, 33, 0.16); transition: all var(--dur-base) ease; } .offline-status-badge.is-offline { background: rgba(181, 71, 40, 0.12); color: var(--terracotta); border-color: rgba(181, 71, 40, 0.3); } .offline-dot { width: 7px; height: 7px; border-radius: 50%; background: #2E7D32; box-shadow: 0 0 0 2px rgba(46, 125, 50, 0.2); } .offline-status-badge.is-offline .offline-dot { background: var(--terracotta); box-shadow: 0 0 0 2px rgba(181, 71, 40, 0.3); animation: pulse-offline 1.8s infinite; } @keyframes pulse-offline { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.3); opacity: 0.6; } } /* Offline Action Pills */ .btn-clean-pill.offline-archive-btn { background: var(--amber-light); color: var(--forest); border-color: var(--sage); display: inline-flex; align-items: center; gap: 5px; } .btn-clean-pill.offline-archive-btn:hover { background: var(--parchment); border-color: var(--forest); } .offline-saved-chip { display: inline-flex; align-items: center; gap: 4px; font-size: var(--font-size-2xs); font-weight: 700; color: var(--forest); background: var(--amber-light); padding: 2px 7px; border-radius: var(--radius-xs); border: 1px solid var(--sage); } /* In-App Offline Archive Viewer Modal */ .archive-viewer-backdrop { position: fixed; inset: 0; z-index: var(--z-modal); background: rgba(18, 26, 18, 0.85); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); display: flex; flex-direction: column; opacity: 0; pointer-events: none; transition: opacity var(--dur-base) ease; } .archive-viewer-backdrop.open { opacity: 1; pointer-events: auto; } .archive-viewer-window { display: flex; flex-direction: column; width: 96%; max-width: 1040px; height: 92vh; margin: auto; background: var(--card-front); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--elevation-overlay); } .archive-viewer-header { display: flex; align-items: center; justify-content: space-between; padding: 12px 18px; background: var(--forest-deep); color: #F8EFE4; border-bottom: 1px solid rgba(255, 255, 255, 0.12); gap: 12px; } .archive-viewer-title-group { display: flex; flex-direction: column; overflow: hidden; } .archive-viewer-sub { font-size: var(--font-size-2xs); font-weight: 700; letter-spacing: 0.08em; color: var(--amber); text-transform: uppercase; display: flex; align-items: center; gap: 6px; } .archive-viewer-title { font-family: var(--font-display); font-size: var(--font-size-lg); font-weight: 700; color: #FFFFFF; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .archive-viewer-url { font-family: var(--font-mono); font-size: var(--font-size-xs); color: #C4B49D; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .archive-viewer-controls { display: flex; align-items: center; gap: 8px; flex-shrink: 0; } .archive-btn-open-ext { display: inline-flex; align-items: center; gap: 5px; padding: 6px 12px; background: rgba(255, 255, 255, 0.12); color: #F8EFE4; border: 1px solid rgba(255, 255, 255, 0.22); border-radius: var(--radius-sm); font-size: var(--font-size-xs); font-weight: 600; text-decoration: none; cursor: pointer; transition: background var(--dur-fast) ease; } .archive-btn-open-ext:hover { background: rgba(255, 255, 255, 0.22); } .archive-btn-close { width: 32px; height: 32px; border-radius: 50%; background: rgba(255, 255, 255, 0.15); border: none; color: #FFFFFF; font-size: var(--font-size-md); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background var(--dur-fast) ease; } .archive-btn-close:hover { background: rgba(255, 255, 255, 0.3); } .archive-viewer-frame { flex: 1; width: 100%; height: 100%; border: none; background: #FAFAFA; } /* Prepared geographic enrichment. The package stays quiet until a trip has real records; the fallback concierge remains useful for anchor-only stops. */ .nearby-discovery-block { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--parchment-border); } .nearby-discovery-heading { margin-bottom: 7px; color: var(--forest); font-size: 0.72rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; } .nearby-discovery-category { margin-top: 8px; color: var(--ink-muted); font-size: 0.74rem; } .nearby-discovery-category > strong { display: block; margin-bottom: 3px; color: var(--ink); } .nearby-discovery-item { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; padding: 4px 0; } .nearby-discovery-item span { flex: 1 1 100%; color: var(--ink-muted); font-size: 0.7rem; } .nearby-discovery-item a { color: var(--terracotta); font-weight: 650; text-decoration: underline; } .nearby-discovery-status { margin-top: 10px; color: var(--ink-muted); font-size: 0.68rem; font-style: italic; line-height: 1.4; } /* --- Module: schedule.css --- */ /* ========================================================================== Schedule Manager & Control Table Styles This module is built on the `panel` surface: a deep, themed control chrome that reads as a separate mode from the itinerary itself. Everything on it — body ink, secondary ink, hairlines, control fills, input wells — is DERIVED from that one authored background by scripts/theme_engine.py, so a theme that authors a light panel gets dark hairlines rather than invisible ones. Before this pass the module carried five phantom custom properties (--dark-moss, --border-gold, --parchment-light, --muted-parchment, --burnt-orange). None of them was ever defined in any theme; each only rendered because of its `var(--x, #hex)` fallback, so the whole panel was hard-coded to the adventure_roadtrip palette in all four themes. ========================================================================== */ .schedule-manager-panel { background: var(--surface-panel-bg); border: 1.5px solid var(--gold); border-radius: var(--radius-md); margin-top: 20px; padding: 16px; color: var(--surface-panel-ink); box-shadow: var(--elevation-sm); } .schedule-panel-header { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; } .schedule-panel-tag { font-family: var(--font-mono); font-size: 0.65rem; letter-spacing: 0.12em; color: var(--amber); text-transform: uppercase; display: block; margin-bottom: 2px; } .schedule-panel-heading { font-family: var(--font-display); font-size: 1.15rem; font-weight: 700; margin: 0; color: var(--surface-panel-ink); } .btn-schedule-toggle { background: var(--surface-action-bg); color: var(--surface-action-ink); border: none; border-radius: var(--radius-xl); padding: 8px 16px; font-family: var(--font-ui); font-size: 0.82rem; font-weight: 600; cursor: pointer; transition: all var(--dur-fast) ease; display: inline-flex; align-items: center; gap: 6px; } /* Hover lifts the authored action colour rather than naming a second hex, so it follows every theme instead of only the one it was picked against. */ .btn-schedule-toggle:hover { filter: brightness(1.12); transform: translateY(-1px); } .schedule-drawer { display: none; margin-top: 16px; border-top: 1px dashed var(--surface-panel-line); padding-top: 14px; } .schedule-drawer.open { display: block; } .schedule-drawer-toolbar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; margin-bottom: 14px; } .schedule-drawer-hint { font-size: 0.78rem; color: var(--surface-panel-ink-muted); font-style: italic; } .schedule-drawer-btns { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .btn-schedule-sub { background: var(--surface-panel-veil); color: var(--surface-panel-ink); border: 1px solid var(--surface-panel-line); border-radius: var(--radius-2xs); padding: 5px 10px; font-size: 0.75rem; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; gap: 5px; transition: background var(--dur-fast); } .btn-schedule-sub:hover { background: var(--surface-panel-fill); } .btn-schedule-sub.warning { border-color: var(--alert); color: var(--alert); } .btn-schedule-sub.warning:hover { background: var(--surface-panel-fill); } /* Schedule Table */ .schedule-table-container { overflow-x: auto; } .schedule-table { width: 100%; border-collapse: collapse; font-size: 0.82rem; text-align: left; } .schedule-table th { font-family: var(--font-mono); font-size: 0.7rem; text-transform: uppercase; color: var(--amber); padding: 8px 10px; border-bottom: 1px solid var(--surface-panel-line); } .schedule-table td { padding: 10px; border-bottom: 1px solid var(--surface-panel-veil); vertical-align: middle; } .schedule-table tr:hover { background: var(--surface-panel-veil); } .day-header-row td { background: var(--surface-panel-fill); font-family: var(--font-display); font-weight: 700; color: var(--amber); font-size: 0.9rem; padding: 8px 10px; } .reorder-btns { display: flex; gap: 4px; } .btn-arrow { background: var(--surface-panel-veil); border: 1px solid var(--surface-panel-line); color: var(--surface-panel-ink); border-radius: var(--radius-2xs); width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; font-size: 0.75rem; } .btn-arrow:disabled { opacity: 0.3; cursor: not-allowed; } .btn-arrow:not(:disabled):hover { background: var(--surface-action-bg); border-color: var(--surface-action-bg); color: var(--surface-action-ink); } .btn-edit-sm { background: var(--surface-panel-veil); border: 1px solid var(--surface-panel-line); color: var(--surface-panel-ink); border-radius: var(--radius-2xs); padding: 4px 8px; font-size: 0.75rem; cursor: pointer; transition: all var(--dur-instant) ease; } .btn-edit-sm:hover { background: var(--surface-action-bg); color: var(--surface-action-ink); border-color: var(--surface-action-bg); } .badge-modified { background: var(--surface-action-bg); color: var(--surface-action-ink); font-size: 0.62rem; padding: 2px 5px; border-radius: var(--radius-3xs); font-family: var(--font-mono); margin-left: 6px; display: inline-block; } /* Edit Modal Drawer */ .edit-modal-backdrop { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; /* DELIBERATELY FIXED. A modal scrim has to darken every theme, including the three that are already dark; keying it to the palette would make it disappear exactly where the canvas is closest to it. */ background: rgba(10, 15, 10, 0.75); backdrop-filter: blur(4px); z-index: var(--z-modal-top); display: none; align-items: center; justify-content: center; padding: 16px; } .edit-modal-backdrop.open { display: flex; } .edit-modal-card { background: var(--surface-panel-bg); border: 2px solid var(--gold); border-radius: var(--radius-md); width: 100%; max-width: 520px; max-height: 90vh; overflow-y: auto; padding: 20px; color: var(--surface-panel-ink); box-shadow: var(--elevation-card); } .edit-modal-header { display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--surface-panel-line); padding-bottom: 12px; margin-bottom: 16px; } .edit-modal-title { font-family: var(--font-display); font-size: 1.2rem; font-weight: 700; margin: 0; } .btn-close-modal { background: none; border: none; color: var(--surface-panel-ink-muted); font-size: 1.3rem; cursor: pointer; } .btn-close-modal:hover { color: var(--surface-panel-ink); } .form-group { margin-bottom: 14px; } .form-label { display: block; font-family: var(--font-mono); font-size: 0.72rem; text-transform: uppercase; color: var(--amber); margin-bottom: 5px; } .form-input, .form-textarea { width: 100%; background: var(--surface-panel-well); border: 1px solid var(--surface-panel-line); border-radius: var(--radius-xs); padding: 8px 12px; color: var(--surface-panel-ink); font-family: var(--font-ui); font-size: 0.88rem; box-sizing: border-box; } .form-input:focus, .form-textarea:focus { outline: none; border-color: var(--amber); background: var(--surface-panel-well); } .form-textarea { min-height: 80px; resize: vertical; } .edit-modal-footer { display: flex; align-items: center; justify-content: flex-end; gap: 10px; margin-top: 20px; border-top: 1px solid var(--surface-panel-line); padding-top: 14px; } .btn-save-edit { background: var(--surface-action-bg); color: var(--surface-action-ink); border: none; border-radius: var(--radius-xs); padding: 8px 16px; font-weight: 600; font-size: 0.88rem; cursor: pointer; } .btn-save-edit:hover { filter: brightness(1.12); } .btn-cancel-edit { background: var(--surface-panel-veil); color: var(--surface-panel-ink-muted); border: none; border-radius: var(--radius-xs); padding: 8px 14px; font-size: 0.88rem; cursor: pointer; } /* History Modal */ .history-modal-card { background: var(--surface-panel-bg); border: 2px solid var(--gold); border-radius: var(--radius-md); width: 100%; max-width: 600px; max-height: 85vh; overflow-y: auto; padding: 20px; color: var(--surface-panel-ink); box-shadow: var(--elevation-card); } .history-item { background: var(--surface-panel-well); border: 1px solid var(--surface-panel-line); border-radius: var(--radius-sm); padding: 12px; margin-bottom: 10px; } .history-item-header { display: flex; align-items: center; justify-content: space-between; font-size: 0.8rem; color: var(--amber); margin-bottom: 6px; } .history-item-body { font-size: 0.85rem; color: var(--surface-panel-ink-muted); line-height: 1.4; } /* --- Module: delights.css --- */ /* ========================================================================== Whimsical Trail Delights & Ambient Winks - Full-width horizontal atmospheric parallax landscapes (Orchard, Mountains, Downtown) - Drifting horizontal mountain mist bands - Mountain pass flanks that glide in at cabin/ridge elevation - Tumbling orchard apples at cider & fruit stands - Evening gaslight lantern at Staunton & dinner - Cool stone mist at Blue Ridge Tunnel - Brass cowbell at Moo Thru Creamery ========================================================================== */ /* Full-Width Horizontal Atmospheric Parallax Canvas */ .trail-atmospheric-canvas { position: fixed; top: 0; left: 0; right: 0; bottom: 0; width: 100vw; height: 100vh; pointer-events: none; z-index: 0; overflow: hidden; } .atmospheric-env { position: absolute; inset: 0; opacity: 0; transition: opacity 1.2s cubic-bezier(0.16, 1, 0.3, 1); will-change: opacity; } .atmospheric-env.active { opacity: 1; } /* Horizontal Landscape SVGs pinned along bottom horizon */ .horizontal-landscape-svg { position: absolute; bottom: 0; left: 0; width: 100%; height: 35vh; min-height: 220px; pointer-events: none; transition: transform var(--dur-deliberate) cubic-bezier(0.16, 1, 0.3, 1); will-change: transform; } /* 1. Orchard Country Environment */ .orchard-glow { position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 100%, rgba(220, 150, 45, 0.14) 0%, transparent 75%); } .orchard-svg { height: 28vh; opacity: 0.75; } /* 2. Blue Ridge Mountain Pass & Horizontal Drifting Mist */ .mountain-glow { position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 100%, rgba(35, 55, 42, 0.28) 0%, transparent 80%); } .mountain-far-svg { height: 48vh; opacity: 0.45; filter: blur(1px); } .mountain-mid-svg { height: 38vh; opacity: 0.75; } /* Horizontal Mountain Mist Ribbons */ .horizontal-mist-layer { position: absolute; left: -20%; width: 140%; height: 80px; pointer-events: none; border-radius: 50%; background: radial-gradient(ellipse at 50% 50%, rgba(240, 246, 242, 0.55) 0%, rgba(240, 246, 242, 0.22) 50%, transparent 80%); filter: blur(14px); will-change: transform; } .mist-ribbon-1 { bottom: 16vh; height: 70px; animation: horizontalMistFloat 28s ease-in-out infinite alternate; } .mist-ribbon-2 { bottom: 24vh; height: 90px; opacity: 0.45; animation: horizontalMistFloat 38s ease-in-out infinite alternate-reverse; } .mist-valley-floor { bottom: 0; left: 0; width: 100%; height: 120px; border-radius: 0; background: linear-gradient(to top, rgba(235, 242, 238, 0.4) 0%, transparent 100%); filter: blur(8px); } @keyframes horizontalMistFloat { 0% { transform: translateX(-8%) translateY(0); } 50% { transform: translateX(4%) translateY(-8px); } 100% { transform: translateX(12%) translateY(4px); } } /* 3. Historic Downtown Staunton Environment */ .twilight-glow { position: absolute; inset: 0; background: linear-gradient(to top, rgba(32, 20, 46, 0.32) 0%, rgba(32, 20, 46, 0.08) 50%, transparent 100%); } .downtown-svg { height: 30vh; opacity: 0.65; } .downtown-lantern-glow-strip { position: absolute; bottom: 12vh; left: 0; right: 0; height: 40px; background: radial-gradient(circle at 50% 50%, rgba(255, 196, 68, 0.25) 0%, transparent 70%); filter: blur(12px); animation: lanternFlicker 3s infinite alternate ease-in-out; } /* 4. Mountain Ridge Pass Crowd-In (Left & Right Flanks) */ .mountain-flank { position: fixed; top: 0; bottom: 0; width: 140px; max-width: 22vw; pointer-events: none; z-index: 1; opacity: 0; transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1), opacity 1.2s ease; } .mountain-flank.left { left: 0; transform: translateX(-100%); background: linear-gradient(90deg, rgba(34, 46, 33, 0.18) 0%, rgba(34, 46, 33, 0.08) 55%, transparent 100%); } .mountain-flank.right { right: 0; transform: translateX(100%); background: linear-gradient(-90deg, rgba(34, 46, 33, 0.18) 0%, rgba(34, 46, 33, 0.08) 55%, transparent 100%); } .mountain-flank-svg { width: 100%; height: 100%; object-fit: cover; opacity: 0.45; } /* When body enters mountain pass (Cabin, Overlooks, Crest) */ body.in-mountain-pass .mountain-flank.left { transform: translateX(0); opacity: 1; } body.in-mountain-pass .mountain-flank.right { transform: translateX(0); opacity: 1; } /* 2. Tumbling Orchard & Cidery Apples */ .apple-tumble-cluster { position: absolute; top: -14px; right: 24px; display: flex; align-items: flex-end; gap: 3px; pointer-events: auto; z-index: var(--z-delight); cursor: pointer; } .card-face.front { overflow: visible !important; } .farmstand-trail-card .apple-tumble-cluster, .scenic-vista-card .apple-tumble-cluster { top: -14px; right: 26px; } .tumble-apple { position: relative; display: inline-block; transition: transform var(--dur-fast) cubic-bezier(0.34, 1.56, 0.64, 1); filter: drop-shadow(0 3px 6px rgba(0,0,0,0.18)); } .tumble-apple:hover { transform: scale(1.22) rotate(-8deg); } .tumble-apple:active { transform: scale(0.92); } .apple-1 { width: 28px; height: 28px; opacity: 0; transform: translateY(-40px) rotate(-90deg); } .apple-2 { width: 24px; height: 24px; opacity: 0; transform: translateY(-50px) rotate(120deg); } .apple-3 { width: 20px; height: 20px; opacity: 0; transform: translateY(-30px) rotate(-45deg); } /* Trigger tumbling bounce when station is placed in view */ .trail-station.placed .apple-1 { animation: appleTumbleDrop 0.85s cubic-bezier(0.34, 1.56, 0.64, 1) 0.2s forwards; } .trail-station.placed .apple-2 { animation: appleTumbleBounce 1.05s cubic-bezier(0.34, 1.56, 0.64, 1) 0.35s forwards; } .trail-station.placed .apple-3 { animation: appleTumbleRoll 0.95s cubic-bezier(0.34, 1.56, 0.64, 1) 0.5s forwards; } @keyframes appleTumbleDrop { 0% { opacity: 0; transform: translateY(-40px) rotate(-90deg) scale(0.6); } 60% { opacity: 1; transform: translateY(4px) rotate(12deg) scale(1.08); } 80% { transform: translateY(-4px) rotate(-6deg) scale(0.98); } 100% { opacity: 1; transform: translateY(0) rotate(0deg) scale(1); } } @keyframes appleTumbleBounce { 0% { opacity: 0; transform: translateY(-50px) rotate(120deg) scale(0.5); } 55% { opacity: 1; transform: translateY(6px) rotate(-15deg) scale(1.12); } 75% { transform: translateY(-6px) rotate(8deg) scale(0.95); } 100% { opacity: 1; transform: translateY(0) rotate(-5deg) scale(1); } } @keyframes appleTumbleRoll { 0% { opacity: 0; transform: translateY(-30px) rotate(-180deg) scale(0.6); } 65% { opacity: 1; transform: translateY(3px) rotate(20deg) scale(1.05); } 85% { transform: translateY(-3px) rotate(-8deg) scale(0.98); } 100% { opacity: 1; transform: translateY(0) rotate(10deg) scale(1); } } /* Interactive Apple Sparkle Toast */ .apple-sparkle-toast { position: absolute; top: -30px; right: 0; background: var(--forest-deep); color: var(--sign-accent); font-family: var(--font-mono); font-size: var(--font-size-2xs); font-weight: 700; padding: 3px 8px; border-radius: var(--radius-pill); white-space: nowrap; pointer-events: none; animation: floatSparkle 1.6s cubic-bezier(0.16, 1, 0.3, 1) forwards; box-shadow: var(--elevation-sm); border: 1px solid rgba(213, 132, 29, 0.4); } @keyframes floatSparkle { 0% { opacity: 0; transform: translateY(10px) scale(0.8); } 25% { opacity: 1; transform: translateY(-5px) scale(1.05); } 75% { opacity: 1; transform: translateY(-16px) scale(1); } 100% { opacity: 0; transform: translateY(-28px) scale(0.9); } } /* 3. Evening Gaslight Lantern (Staunton / Dinner) */ .evening-lantern-wrap { position: absolute; top: 6px; left: 16px; display: flex; align-items: center; gap: 6px; pointer-events: none; z-index: var(--z-delight); } .evening-lantern-svg { width: 26px; height: 38px; filter: drop-shadow(0 2px 6px rgba(0,0,0,0.2)); } .lantern-glow-halo { position: absolute; top: 14px; left: 4px; width: 18px; height: 18px; border-radius: 50%; background: radial-gradient(circle, rgba(255, 196, 68, 0.85) 0%, rgba(213, 132, 29, 0.35) 50%, transparent 80%); animation: lanternFlicker 2.8s infinite alternate ease-in-out; } @keyframes lanternFlicker { 0% { transform: scale(0.92); opacity: 0.75; } 35% { transform: scale(1.08); opacity: 0.95; } 70% { transform: scale(0.96); opacity: 0.82; } 100% { transform: scale(1.15); opacity: 1; } } /* 4. Cool Mountain Mist at Blue Ridge Tunnel */ .tunnel-mist-layer { position: absolute; bottom: 0; left: 0; right: 0; height: 48px; pointer-events: none; background: linear-gradient(to top, rgba(226, 234, 230, 0.45) 0%, rgba(226, 234, 230, 0.15) 60%, transparent 100%); border-radius: 0 0 16px 16px; overflow: hidden; } .mist-cloud { position: absolute; bottom: -6px; width: 160%; height: 36px; background: radial-gradient(ellipse at 50% 60%, rgba(255, 255, 255, 0.55) 0%, transparent 70%); animation: mistDrift 14s ease-in-out infinite alternate; } @keyframes mistDrift { 0% { transform: translateX(-20%); opacity: 0.6; } 100% { transform: translateX(10%); opacity: 0.9; } } /* 5. Country Creamery Cowbell (Moo Thru) */ .cowbell-wrap { position: absolute; top: -14px; right: 24px; cursor: pointer; z-index: var(--z-delight); transition: transform var(--dur-fast) ease; } .cowbell-wrap:hover { transform: scale(1.15); } .cowbell-svg { width: 26px; height: 28px; transform-origin: top center; } .trail-station.placed .cowbell-svg { animation: cowbellSwing 2.2s cubic-bezier(0.36, 0, 0.66, -0.56) 0.4s; } @keyframes cowbellSwing { 0% { transform: rotate(0deg); } 20% { transform: rotate(24deg); } 40% { transform: rotate(-18deg); } 60% { transform: rotate(12deg); } 80% { transform: rotate(-6deg); } 100% { transform: rotate(0deg); } } /* Mobile responsive tuning */ @media (max-width: 640px) { .mountain-flank { width: 60px; opacity: 0.5; } .apple-tumble-cluster { right: 18px; top: -14px; } .apple-1 { width: 24px; height: 24px; } .apple-2 { width: 20px; height: 20px; } .apple-3 { width: 16px; height: 16px; } } /* --- Module: journey-roadside.css --- */ /* DOM/SVG roadside journey layer. It is deliberately independent of SpatialCore: the scenic backplane must remain cheap to scroll and offline. */ .journey-roadside-scene { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; opacity: .88; contain: layout paint style; } .journey-roadside-scene.journey-theme-parked { display: none; } .journey-roadside-svg { display: block; width: 100%; height: 100%; overflow: visible; } .journey-horizon-roll { fill: rgba(107, 123, 77, .24); transition: fill .7s ease; } .journey-ground-band { fill: url(#journey-road-gradient); transition: fill .7s ease; } .journey-water-swells { display: none; } .journey-water-swells path { fill: none; stroke: rgba(226, 255, 242, .34); stroke-width: 3; stroke-linecap: round; } .journey-road { fill: rgba(72, 62, 51, .30); stroke: rgba(250, 241, 213, .28); stroke-width: 3; transition: fill .7s ease; } .journey-road-edges line { stroke: rgba(255, 245, 211, .50); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 22 24; } .journey-road-center-dashes rect { fill: rgba(255, 245, 211, .58); } .journey-parcel path.parcel-fill { fill: rgba(121, 145, 77, .22); stroke: rgba(73, 91, 53, .22); stroke-width: 2; } .journey-parcel path.parcel-row { fill: none; stroke: rgba(229, 203, 125, .20); stroke-width: 2; stroke-linecap: round; } .journey-parcel .parcel-art, .journey-fence-run { overflow: visible; } .journey-parcel .parcel-art { color: var(--forest-deep, #162016); } .journey-parcel .parcel-art.accent { color: var(--terracotta, #B54728); } .journey-life-layer { position: absolute; inset: 0; overflow: hidden; } .journey-life-actor { position: absolute; left: 0; top: 0; /* Fixed actor frame: the roadside layer currently uses one measured silhouette box, so these stay literal until per-actor sizing ships. */ width: 80px; height: 80px; color: var(--forest-deep); transform-origin: 50% 100%; will-change: transform, opacity; contain: layout paint; } .journey-life-actor > svg { display: block; width: 100%; height: 100%; overflow: visible; } .journey-life-actor.gesture-deer, .journey-life-actor.gesture-fox { animation: roadside-breathe 3.4s ease-in-out infinite; } .journey-life-actor.gesture-fox::after { content: '•'; position: absolute; right: 6%; top: 15%; color: var(--amber, #D5841D); font-size: 9px; opacity: .0; animation: roadside-wink 7s ease-in-out infinite; } .journey-life-actor .jitter { animation: roadside-jitter 1.4s ease-in-out infinite; transform-origin: 50% 100%; } .journey-life-actor .flap .wL, .journey-life-actor .flap .wR { transform-box: fill-box; transform-origin: center; animation: roadside-flap 1.7s ease-in-out infinite alternate; } .journey-life-actor .flap .wR { animation-delay: -.18s; } .journey-life-actor .sway { transform-box: fill-box; transform-origin: 50% 100%; animation: roadside-sway 5s ease-in-out infinite alternate; } @keyframes roadside-breathe { 0%, 100% { margin-top: 0; } 50% { margin-top: -2px; } } @keyframes roadside-wink { 0%, 72%, 100% { opacity: 0; } 76%, 80% { opacity: .9; } } @keyframes roadside-jitter { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(1px); } } @keyframes roadside-flap { from { transform: rotate(-8deg) scaleY(.82); } to { transform: rotate(8deg) scaleY(1.08); } } @keyframes roadside-sway { from { transform: rotate(-2deg); } to { transform: rotate(2deg); } } .journey-roadside-scene.journey-water-world .journey-horizon-roll { fill: rgba(78, 176, 174, .30); } .journey-roadside-scene.journey-water-world .journey-ground-band { fill: url(#journey-water-gradient); } .journey-roadside-scene.journey-water-world .journey-road { fill: rgba(31, 105, 111, .18); stroke: rgba(230, 255, 239, .30); opacity: .12; } .journey-roadside-scene.journey-water-world .journey-water-swells { display: block; } .journey-roadside-scene.journey-water-world .journey-parcels, .journey-roadside-scene.journey-water-world .journey-fences { opacity: 0; } body[data-dressing="plain"] .journey-roadside-scene { opacity: .55; } @media (prefers-reduced-motion: reduce) { .journey-life-layer { display: none; } .journey-roadside-scene { opacity: .55; } } @media (max-width: 600px) { .journey-roadside-scene { opacity: .72; } .journey-life-actor { transform-origin: 50% 100%; } } /* --- Module: weather.css --- */ /* Weather & Live Transit API Widgets CSS Module */ .live-weather-card { background: var(--card-front); border: 1px solid var(--parchment-border); border-radius: var(--radius-md); padding: 16px; margin: 16px 0; box-shadow: var(--elevation-sm); font-family: var(--font-ui); } .weather-header { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px dashed var(--parchment-border); padding-bottom: 8px; margin-bottom: 12px; } .weather-location { font-weight: 700; font-size: var(--font-size-base); color: var(--forest); display: flex; align-items: center; gap: 6px; } .weather-status-tag { font-size: var(--font-size-xs); text-transform: uppercase; letter-spacing: 0.05em; background: var(--amber-light); color: var(--amber); padding: 2px 8px; border-radius: var(--radius-md); font-weight: 600; } .weather-body { display: flex; align-items: center; justify-content: space-between; } .weather-temp-main { font-size: var(--font-size-2xl); font-weight: 800; color: var(--ink); font-family: var(--font-display); line-height: 1; } .weather-condition-desc { font-size: var(--font-size-base); color: var(--ink-muted); margin-top: 4px; font-weight: 500; } .weather-metrics-grid { display: flex; gap: 12px; font-size: var(--font-size-sm); color: var(--ink-muted); } .weather-metric-item { display: flex; flex-direction: column; align-items: flex-end; } .weather-metric-val { font-weight: 700; color: var(--ink); } /* Transit & Flight Card */ .transit-status-card { background: var(--card-back); border: 1px solid var(--parchment-border); border-left: 4px solid var(--terracotta); border-radius: var(--radius-md); padding: 14px; margin: 14px 0; } .transit-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; } .transit-mode-badge { display: inline-flex; align-items: center; gap: 5px; font-size: var(--font-size-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--terracotta); } .transit-time-pill { font-family: var(--font-mono); font-size: var(--font-size-xs); background: var(--parchment); padding: 3px 8px; border-radius: var(--radius-2xs); color: var(--ink-muted); } .transit-route-row { display: flex; align-items: center; justify-content: space-between; margin: 8px 0; } .transit-code { font-size: var(--font-size-xl); font-weight: 800; font-family: var(--font-display); color: var(--ink); } .transit-arrow { color: var(--amber); font-size: var(--font-size-md); } .transit-details-row { display: flex; justify-content: space-between; font-size: var(--font-size-sm); color: var(--ink-muted); padding-top: 8px; border-top: 1px solid var(--parchment-border); } /* --- Module: map.css --- */ /* ========================================================================== Expedition Route Map, Waypoint Markers & Circuit Launcher Styles ========================================================================== */ .map-actions-cluster { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .btn-route-action { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-ui); font-size: var(--font-size-xs); font-weight: 700; padding: 6px 12px; border-radius: var(--radius-xs); text-decoration: none; border: 1px solid transparent; cursor: pointer; transition: all var(--dur-fast) ease; line-height: 1.2; } .btn-route-action.primary { background: var(--forest); color: #FFFFFF; border-color: rgba(255, 255, 255, 0.15); box-shadow: var(--elevation-sm); } .btn-route-action.primary:hover { background: #152216; transform: translateY(-1px); box-shadow: var(--elevation-card-hover); } .btn-route-action.apple-btn { background: #FFFFFF; color: var(--forest); border-color: var(--parchment-border); box-shadow: var(--elevation-sm); } .btn-route-action.apple-btn:hover { background: var(--parchment); transform: translateY(-1px); } .btn-route-action.secondary { background: var(--amber-light, #FCF4E8); color: var(--amber, #D5841D); border-color: rgba(213, 132, 29, 0.3); } .btn-route-action.secondary:hover { background: #F8E8CE; transform: translateY(-1px); } /* Secondary Map Toolbar: Day Filter Chips & Zoom Controls */ .map-toolbar-row { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; margin-top: 10px; padding-top: 8px; border-top: 1px dashed var(--parchment-border); } .map-toolbar-label { font-family: var(--font-mono); font-size: var(--font-size-2xs); font-weight: 700; text-transform: uppercase; color: var(--ink-muted); letter-spacing: 0.04em; } .map-toggles-cluster { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } .map-filter-chip { display: inline-flex; align-items: center; gap: 4px; font-family: var(--font-ui); font-size: var(--font-size-xs); font-weight: 700; padding: 4px 10px; border-radius: var(--radius-pill); background: var(--parchment); color: var(--ink-muted); border: 1px solid var(--parchment-border); cursor: pointer; transition: all var(--dur-fast) ease; } .map-filter-chip .chip-check { font-size: 11px; font-weight: 800; color: var(--ink-muted); } .map-filter-chip.active { background: var(--forest); color: #FFFFFF; border-color: var(--forest); } .map-filter-chip.active .chip-check { color: var(--gold); } .map-filter-chip:hover { transform: translateY(-1px); } .map-zoom-cluster { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .map-preset-group { display: inline-flex; background: var(--parchment); border: 1px solid var(--parchment-border); border-radius: var(--radius-pill); padding: 2px; gap: 2px; } .map-preset-pill { font-family: var(--font-ui); font-size: var(--font-size-2xs); font-weight: 700; padding: 3px 8px; border-radius: var(--radius-pill); border: none; background: transparent; color: var(--ink-muted); cursor: pointer; transition: all var(--dur-fast) ease; line-height: 1.2; } .map-preset-pill.active { background: #FFFFFF; color: var(--forest); box-shadow: var(--elevation-sm); } .map-preset-pill:hover:not(.active) { color: var(--ink); } .map-zoom-buttons { display: inline-flex; gap: 4px; } .map-zoom-btn { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: var(--radius-xs); background: #FFFFFF; border: 1px solid var(--parchment-border); color: var(--forest); font-weight: 800; font-size: 12px; cursor: pointer; transition: all var(--dur-fast) ease; padding: 0; line-height: 1; } .map-zoom-btn:hover { background: var(--parchment); transform: translateY(-1px); } /* Route Segments & Waypoint Dynamic Filtering */ .map-route-segment { transition: opacity var(--dur-fast) ease, stroke-width var(--dur-fast) ease; } .map-route-segment.hidden { opacity: 0; pointer-events: none; } .day-segment-1 { stroke: #D5841D; stroke-width: 4.5px; stroke-dasharray: 8 6; } .day-segment-2 { stroke: #2D4C37; stroke-width: 4.5px; stroke-dasharray: 8 6; } .day-segment-3 { stroke: #A2482B; stroke-width: 4.5px; stroke-dasharray: 8 6; } .map-waypoint { cursor: pointer; transition: opacity var(--dur-fast) ease, transform var(--dur-fast) ease; } .map-waypoint.hidden { opacity: 0; pointer-events: none; } .route-canvas-box.panning { cursor: grab; } /* Illustrated Vector Map Canvas & Waypoints */ .route-canvas-box { padding: 12px 10px; position: relative; overflow: hidden; background: radial-gradient(circle at 50% 30%, rgba(255,255,255,0.7) 0%, rgba(248, 243, 230, 0.5) 100%); border-radius: var(--radius-sm); } .route-map-vector { width: 100%; height: auto; display: block; } .map-waypoint { cursor: pointer; transition: transform var(--dur-fast) ease; } .map-waypoint:hover { filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.35)); } .map-waypoint:hover circle, .map-waypoint:hover rect { transform: scale(1.15); transform-origin: center; transition: transform var(--dur-fast) ease; } .map-waypoint.active-live circle { animation: liveMarkerPulse 1.8s infinite ease-in-out; } @keyframes liveMarkerPulse { 0% { r: 8px; stroke-width: 3px; } 50% { r: 11px; stroke-width: 5px; stroke: #FFDDA6; } 100% { r: 8px; stroke-width: 3px; } } .map-label-main { font-family: var(--font-ui); font-size: 15.5px; font-weight: 800; fill: #1A291B; paint-order: stroke fill; stroke: #F3ECE0; stroke-width: 4px; stroke-linejoin: round; user-select: none; } .map-label-sub { font-family: var(--font-mono); font-size: 11px; font-weight: 700; fill: #6E4420; paint-order: stroke fill; stroke: #F3ECE0; stroke-width: 3px; stroke-linejoin: round; user-select: none; letter-spacing: 0.02em; } .map-label-return { font-family: var(--font-mono); font-size: 13px; font-weight: 800; fill: #2D4C37; letter-spacing: 0.05em; text-transform: uppercase; paint-order: stroke fill; stroke: #F3ECE0; stroke-width: 4px; stroke-linejoin: round; user-select: none; } /* Route Selector Drawer / Modal */ .route-modal-backdrop { position: fixed; inset: 0; background: rgba(10, 16, 11, 0.7); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); z-index: var(--z-modal, 1000); display: flex; align-items: center; justify-content: center; padding: 16px; opacity: 0; visibility: hidden; transition: opacity var(--dur-base) ease, visibility var(--dur-base) ease; } .route-modal-backdrop.open { opacity: 1; visibility: visible; } .route-modal-card { background: var(--card-front, #FFFFFF); border: 2px solid var(--parchment-border); border-radius: var(--radius-lg); width: 100%; max-width: 540px; max-height: 88vh; overflow-y: auto; box-shadow: var(--elevation-overlay); display: flex; flex-direction: column; transform: translateY(20px) scale(0.97); transition: transform var(--dur-base) cubic-bezier(0.16, 1, 0.3, 1); } .route-modal-backdrop.open .route-modal-card { transform: translateY(0) scale(1); } .route-modal-header { padding: 16px 20px; background: linear-gradient(180deg, var(--parchment) 0%, #EFE7D5 100%); border-bottom: 1.5px solid var(--parchment-border); display: flex; justify-content: space-between; align-items: center; } .route-modal-title { font-family: var(--font-display); font-size: var(--font-size-md); font-weight: 700; color: var(--forest); } .route-modal-close { background: none; border: none; font-size: 1.3rem; color: var(--ink-muted); cursor: pointer; padding: 4px 8px; border-radius: var(--radius-xs); } .route-modal-close:hover { background: rgba(0, 0, 0, 0.08); color: var(--ink); } .route-circuits-list { padding: 18px 20px; display: flex; flex-direction: column; gap: 12px; } .circuit-item-card { background: var(--card-detour, #F9F5EE); border: 1px solid var(--parchment-border); border-radius: var(--radius-md); padding: 14px 16px; display: flex; flex-direction: column; gap: 8px; } .circuit-card-top { display: flex; justify-content: space-between; align-items: center; } .circuit-card-badge { font-family: var(--font-mono); font-size: var(--font-size-2xs); font-weight: 700; color: var(--amber); text-transform: uppercase; letter-spacing: 0.5px; } .circuit-card-title { font-family: var(--font-ui); font-size: var(--font-size-sm); font-weight: 700; color: var(--forest); } .circuit-links-row { display: flex; gap: 8px; margin-top: 4px; } .btn-circuit-link { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px; font-family: var(--font-ui); font-size: var(--font-size-xs); font-weight: 700; padding: 8px 10px; border-radius: var(--radius-xs); text-decoration: none; transition: all var(--dur-fast) ease; } .btn-circuit-link.gmaps { background: var(--forest); color: #FFFFFF; } .btn-circuit-link.gmaps:hover { background: #142015; } .btn-circuit-link.amaps { background: #FFFFFF; color: var(--forest); border: 1px solid var(--parchment-border); } .btn-circuit-link.amaps:hover { background: var(--parchment); } /* --- Module: spatial.css --- */ /* ========================================================================== SpatialCore WebGL2 Backplane Styles & Law 11 Dressing Dial Integration - Viewport-locked 3D landscape and roadside fixtures - Transparent pointer-events to preserve 100% native HTML scroll performance - Zero-allocation power savings in "plain" mode ========================================================================== */ #ambientCanvas { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; z-index: 0; pointer-events: none; display: block; transform: translateZ(0); will-change: transform; opacity: 1; transition: opacity 0.4s ease; } /* -------------------------------------------------------------------------- Law 11 — Dressing Dial Rules -------------------------------------------------------------------------- */ /* PLAIN: Clean editorial paper mode. Completely detaches/hides canvas for 0 GPU & 0 battery cost. */ body[data-dressing="plain"] #ambientCanvas { display: none !important; } body[data-dressing="plain"] .candy-track-svg { opacity: 0.25; } /* WARM: Subtle horizon and sky atmospheric depth without heavy particle flourishes. */ body[data-dressing="warm"] #ambientCanvas { opacity: 0.85; } /* FULL: Default production balanced mode (scenic road, SVG silhouettes, horizon mist). */ body[data-dressing="full"] #ambientCanvas { opacity: 1; } /* MAXIMAL: Full dynamic flourishes, high density motes, roaming actors, and peak horizon depth. */ body[data-dressing="maximal"] #ambientCanvas { opacity: 1; } /* Reduced Motion Override */ @media (prefers-reduced-motion: reduce) { #ambientCanvas { opacity: 0.7; } } .reduced-motion-override #ambientCanvas { opacity: 0.7; } /* Ensure trail stage and stations float clearly over the ambient backplane */ .trail-stage { z-index: 2; } .candy-track-svg { z-index: 1; } .trail-station { z-index: 2; } header { z-index: 20; } .bottom-nav { z-index: 20; } /* -------------------------------------------------------------------------- Legacy 2D Stand-in SVGs Retirement (PARKED 2026-09-06: DOM scene is the backplane again; GL canvas element removed from template. Rules kept for a future flip-back — re-enable together with the canvas element.) -------------------------------------------------------------------------- */ /* body:not([data-dressing="plain"]) .trail-atmospheric-canvas, body:not([data-dressing="plain"]) .mountain-flank { display: none !important; } */ /* body:not([data-dressing="plain"]) .candy-track-svg { display: none !important; } */ /* --- Module: bottom-nav.css --- */ /* ========================================================================== VacayGo Native Bottom Navigation Bar ========================================================================== */ .vg-bottom-nav { position: fixed; bottom: 0; left: 0; right: 0; z-index: var(--z-dock, 300); background: var(--bg-header, rgba(24, 34, 24, 0.96)); border-top: 1px solid var(--bg-header-border, rgba(255, 255, 255, 0.12)); display: flex; align-items: center; justify-content: space-around; padding: 6px 12px calc(6px + env(safe-area-inset-bottom, 0px)); box-shadow: 0 -4px 18px rgba(0, 0, 0, 0.28); user-select: none; transition: transform var(--dur-base) ease, opacity var(--dur-base) ease; } /* Hide navigation bar on locked gate screen */ body.gate-locked .vg-bottom-nav { display: none !important; } .vg-nav-item { background: none; border: none; outline: none; cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; padding: 4px 10px; border-radius: var(--radius-sm); color: rgba(255, 255, 255, 0.65); transition: all var(--dur-fast) ease; position: relative; min-width: 58px; } .vg-nav-icon-wrap { width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; transition: transform var(--dur-fast) ease; } .vg-nav-icon-wrap svg { width: 20px; height: 20px; stroke: currentColor; } .vg-nav-label { font-family: var(--font-ui); font-size: var(--font-size-2xs, 0.64rem); font-weight: 700; letter-spacing: 0.3px; line-height: 1; transition: color var(--dur-fast) ease; } .vg-nav-item:hover { color: #FFFFFF; } .vg-nav-item:hover .vg-nav-icon-wrap { transform: translateY(-2px); } .vg-nav-item.active { color: var(--sign-accent, #FFDDA6); } .vg-nav-item.active::after { content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 18px; height: 2.5px; background: var(--sign-accent, #FFDDA6); border-radius: var(--radius-pill); box-shadow: 0 0 6px rgba(255, 221, 166, 0.7); } /* Center Highlight Button (Expedition Search) */ .vg-nav-item-highlight { position: relative; } .vg-nav-item-highlight .search-bubble { background: linear-gradient(135deg, var(--terracotta) 0%, var(--amber) 100%); width: 32px; height: 32px; border-radius: 50%; color: #FFFFFF; box-shadow: 0 2px 10px rgba(181, 71, 40, 0.45); margin-top: -8px; border: 2px solid rgba(255, 255, 255, 0.2); transition: transform var(--dur-fast) cubic-bezier(0.16, 1, 0.3, 1), box-shadow var(--dur-fast) ease; } .vg-nav-item-highlight .search-bubble svg { width: 17px; height: 17px; stroke: #FFFFFF; } .vg-nav-item-highlight:hover .search-bubble { transform: translateY(-3px) scale(1.08); box-shadow: 0 4px 14px rgba(213, 132, 29, 0.6); } /* Audio Cassette Dock elevation coordination */ .cassette-dock { bottom: calc(66px + env(safe-area-inset-bottom, 0px)) !important; } /* Ensure page bottom content is not obscured by bottom nav */ @media (max-width: 900px) { body { padding-bottom: calc(var(--page-pad-bottom, 270px) + 40px); } } /* --- Module: settings.css --- */ /* ========================================================================== Expedition Settings Bar & Controls Drawer ========================================================================== */ .settings-modal-backdrop { position: fixed; inset: 0; background: rgba(10, 16, 11, 0.75); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); z-index: var(--z-modal, 1000); display: flex; align-items: flex-end; justify-content: center; opacity: 0; visibility: hidden; transition: opacity var(--dur-base) ease, visibility var(--dur-base) ease; } @media (min-width: 640px) { .settings-modal-backdrop { align-items: center; padding: 20px; } } .settings-modal-backdrop.open { opacity: 1; visibility: visible; } .settings-modal-card { background: var(--card-front, #FFFFFF); border: 2px solid var(--parchment-border); border-top-left-radius: var(--radius-xl); border-top-right-radius: var(--radius-xl); width: 100%; max-width: 580px; max-height: 86vh; overflow-y: auto; box-shadow: var(--elevation-overlay); display: flex; flex-direction: column; transform: translateY(100%); transition: transform var(--dur-slow) cubic-bezier(0.16, 1, 0.3, 1); } @media (min-width: 640px) { .settings-modal-card { border-radius: var(--radius-xl); transform: translateY(30px) scale(0.97); } } .settings-modal-backdrop.open .settings-modal-card { transform: translateY(0) scale(1); } .settings-header { padding: 18px 22px; background: linear-gradient(180deg, var(--parchment) 0%, #EFE8D7 100%); border-bottom: 1.5px solid var(--parchment-border); display: flex; justify-content: space-between; align-items: center; position: sticky; top: 0; z-index: 10; } .settings-header-title-wrap { display: flex; flex-direction: column; gap: 2px; } .settings-badge { font-family: var(--font-mono); font-size: var(--font-size-2xs); font-weight: 700; color: var(--terracotta); letter-spacing: 0.8px; } .settings-title { font-family: var(--font-display); font-size: var(--font-size-md); font-weight: 700; color: var(--forest); margin: 0; } .settings-close-btn { background: none; border: none; font-size: 1.4rem; color: var(--ink-muted); cursor: pointer; padding: 6px 10px; border-radius: var(--radius-xs); line-height: 1; } .settings-close-btn:hover { background: rgba(0, 0, 0, 0.07); color: var(--ink); } .settings-content { padding: 20px 22px calc(24px + env(safe-area-inset-bottom, 0px)); display: flex; flex-direction: column; gap: 22px; } .settings-group { display: flex; flex-direction: column; gap: 10px; } .settings-group-label { font-family: var(--font-mono); font-size: var(--font-size-2xs); font-weight: 800; color: var(--forest-light); letter-spacing: 0.6px; text-transform: uppercase; display: flex; align-items: center; gap: 6px; } .settings-row-card { background: var(--card-detour, #F9F5EE); border: 1px solid var(--parchment-border); border-radius: var(--radius-md); padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; } .settings-row-desc { font-size: var(--font-size-xs); color: var(--ink-muted); line-height: 1.45; margin: 0; } /* Segmented Control Pills */ .settings-segmented-bar { display: flex; background: rgba(0, 0, 0, 0.06); border-radius: var(--radius-xs); padding: 3px; gap: 3px; } .settings-segment-btn { flex: 1; background: none; border: none; padding: 7px 10px; font-family: var(--font-ui); font-size: var(--font-size-xs); font-weight: 700; color: var(--ink-muted); border-radius: var(--radius-2xs); cursor: pointer; transition: all var(--dur-fast) ease; text-align: center; } .settings-segment-btn.active { background: #FFFFFF; color: var(--forest); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12); } /* Soundscapes Volume Slider Row */ .settings-slider-row { display: flex; align-items: center; gap: 14px; } .settings-slider-range { flex: 1; accent-color: var(--amber); cursor: pointer; height: 6px; } .settings-mute-btn { background: var(--card-front, #FFF); border: 1px solid var(--parchment-border); border-radius: var(--radius-xs); padding: 6px 12px; font-family: var(--font-ui); font-size: var(--font-size-xs); font-weight: 700; color: var(--forest); cursor: pointer; display: inline-flex; align-items: center; gap: 5px; } .settings-mute-btn.muted { background: #FFE8E5; color: #B52A18; border-color: #F8B4AC; } /* Themes Quick Switcher Grid */ .settings-themes-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; } .settings-theme-pill { background: #FFFFFF; border: 1.5px solid var(--parchment-border); border-radius: var(--radius-sm); padding: 10px 12px; text-align: left; cursor: pointer; transition: all var(--dur-fast) ease; display: flex; flex-direction: column; gap: 2px; text-decoration: none; } .settings-theme-pill:hover { border-color: var(--amber); transform: translateY(-1px); } .settings-theme-pill.active { border-color: var(--forest); background: var(--amber-light, #FCF4E8); } .settings-theme-pill-title { font-family: var(--font-ui); font-size: var(--font-size-xs); font-weight: 800; color: var(--forest); } .settings-theme-pill-sub { font-family: var(--font-mono); font-size: var(--font-size-2xs); color: var(--ink-muted); } /* Action Utility Buttons */ .settings-actions-cluster { display: flex; flex-wrap: wrap; gap: 8px; } .btn-settings-action { display: inline-flex; align-items: center; gap: 6px; background: #FFFFFF; border: 1px solid var(--parchment-border); border-radius: var(--radius-xs); padding: 8px 12px; font-family: var(--font-ui); font-size: var(--font-size-xs); font-weight: 700; color: var(--forest); cursor: pointer; transition: all var(--dur-fast) ease; } .btn-settings-action:hover { background: var(--parchment); border-color: var(--forest); } .btn-settings-action.danger { color: #B52A18; border-color: rgba(181, 42, 24, 0.3); } .btn-settings-action.danger:hover { background: #FFF2F0; border-color: #B52A18; } /* Advanced Accordion & Curator Tools Section */ .settings-advanced-details { border-top: 2px dashed var(--parchment-border); padding-top: 14px; margin-top: 16px; } .settings-advanced-summary { font-family: var(--font-ui); font-size: var(--font-size-xs); font-weight: 700; color: var(--forest); cursor: pointer; padding: 8px 12px; background: var(--parchment); border: 1px solid var(--parchment-border); border-radius: var(--radius-xs); user-select: none; display: flex; align-items: center; gap: 8px; transition: all var(--dur-fast) ease; } .settings-advanced-summary:hover { border-color: var(--amber); background: #F4EEDF; } .settings-advanced-content { display: flex; flex-direction: column; gap: 16px; padding-top: 14px; } /* Curator Toggle Button */ .settings-curator-toggle-btn { width: 100%; padding: 10px 14px; background: #FFFFFF; border: 1.5px solid var(--parchment-border); border-radius: var(--radius-xs); font-family: var(--font-ui); font-size: var(--font-size-xs); font-weight: 700; color: var(--forest); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all var(--dur-fast) ease; } .settings-curator-toggle-btn:hover { background: var(--parchment); border-color: var(--terracotta); } .settings-curator-toggle-btn.active { background: var(--terracotta); border-color: var(--terracotta); color: #FFFFFF; } /* Reset Preferences Card */ .settings-reset-card { display: flex; justify-content: space-between; align-items: center; gap: 12px; background: #FFFFFF; border: 1px solid var(--parchment-border); border-radius: var(--radius-xs); padding: 12px; } .btn-settings-reset { flex-shrink: 0; background: #FFFFFF; border: 1px solid rgba(181, 42, 24, 0.35); border-radius: var(--radius-xs); padding: 8px 12px; font-family: var(--font-ui); font-size: var(--font-size-xs); font-weight: 700; color: #B52A18; cursor: pointer; transition: all var(--dur-fast) ease; } .btn-settings-reset:hover { background: #FFF2F0; border-color: #B52A18; } /* Schedule Manager Table Container inside Settings */ .settings-schedule-wrapper { background: #FFFFFF; border: 1px solid var(--parchment-border); border-radius: var(--radius-xs); padding: 10px; max-height: 380px; overflow-y: auto; } .settings-modal-card .schedule-drawer-hint { color: var(--ink-muted); } .settings-modal-card .btn-schedule-sub { background: #FFFFFF; color: var(--forest) !important; border-color: var(--parchment-border); } .settings-modal-card .btn-schedule-sub span { color: var(--forest) !important; } .settings-modal-card .btn-schedule-sub:hover { background: var(--parchment); border-color: var(--forest); } .settings-modal-card .btn-schedule-sub.warning, .settings-modal-card .btn-schedule-sub.warning span { color: #B52A18 !important; border-color: rgba(181, 42, 24, 0.35); } .settings-modal-card .btn-schedule-sub.warning:hover { background: #FFF2F0; border-color: #B52A18; } .settings-modal-card .schedule-table th { color: var(--terracotta); border-bottom-color: var(--parchment-border); } .settings-modal-card .schedule-table td { color: var(--ink); border-bottom-color: var(--parchment); } .settings-modal-card .schedule-table tr:hover { background: var(--parchment); } .settings-modal-card .day-header-row td { background: var(--parchment); color: var(--forest); } .settings-modal-card .btn-arrow, .settings-modal-card .btn-edit-sm { background: #FFFFFF; border: 1px solid var(--parchment-border); color: var(--forest); } .settings-modal-card .btn-arrow:not(:disabled):hover, .settings-modal-card .btn-edit-sm:hover { background: var(--forest); color: #FFFFFF; border-color: var(--forest); } /* Global Floating Toast */ .expedition-floating-toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(20px); background: var(--forest, #1E2E20); color: #FFFFFF; border: 1px solid rgba(255, 255, 255, 0.2); border-radius: var(--radius-pill); padding: 10px 20px; font-family: var(--font-ui); font-size: var(--font-size-xs); font-weight: 700; box-shadow: var(--elevation-overlay); z-index: calc(var(--z-modal, 1000) + 100); opacity: 0; transition: transform var(--dur-base) ease, opacity var(--dur-base) ease; pointer-events: none; } .expedition-floating-toast.visible { transform: translateX(-50%) translateY(0); opacity: 1; } /* --- Module: search.css --- */ /* ========================================================================== Expedition Global Search Engine Styles ========================================================================== */ .search-modal-backdrop { position: fixed; inset: 0; background: rgba(10, 16, 11, 0.78); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); z-index: var(--z-modal, 1000); display: flex; align-items: flex-start; justify-content: center; padding: 16px; padding-top: max(24px, env(safe-area-inset-top, 24px)); opacity: 0; visibility: hidden; transition: opacity var(--dur-base) ease, visibility var(--dur-base) ease; } .search-modal-backdrop.open { opacity: 1; visibility: visible; } .search-modal-card { background: var(--card-front, #FFFFFF); border: 2px solid var(--parchment-border); border-radius: var(--radius-xl); width: 100%; max-width: 640px; max-height: 84vh; box-shadow: var(--elevation-overlay); display: flex; flex-direction: column; overflow: hidden; transform: translateY(-20px) scale(0.97); transition: transform var(--dur-base) cubic-bezier(0.16, 1, 0.3, 1); } .search-modal-backdrop.open .search-modal-card { transform: translateY(0) scale(1); } /* Search Bar Input Row */ .search-input-header { padding: 14px 18px; background: linear-gradient(180deg, var(--parchment) 0%, #F1E9DA 100%); border-bottom: 1.5px solid var(--parchment-border); display: flex; align-items: center; gap: 12px; } .search-icon-svg { width: 20px; height: 20px; stroke: var(--forest); flex-shrink: 0; } .search-input-field { flex: 1; background: transparent; border: none; outline: none; font-family: var(--font-ui); font-size: var(--font-size-base); font-weight: 600; color: var(--ink); } .search-input-field::placeholder { color: rgba(107, 98, 88, 0.7); font-weight: 500; } .search-clear-btn { background: none; border: none; font-size: 1.2rem; color: var(--ink-muted); cursor: pointer; padding: 4px; border-radius: var(--radius-pill); display: none; } .search-clear-btn.visible { display: block; } .search-esc-badge { font-family: var(--font-mono); font-size: var(--font-size-2xs); background: rgba(0, 0, 0, 0.08); border: 1px solid rgba(0, 0, 0, 0.12); color: var(--ink-muted); padding: 3px 6px; border-radius: var(--radius-2xs); user-select: none; } /* Filter Categories Track */ .search-filters-bar { display: flex; gap: 6px; padding: 10px 18px; overflow-x: auto; background: #FAF7F0; border-bottom: 1px solid var(--parchment-border); scrollbar-width: none; } .search-filters-bar::-webkit-scrollbar { display: none; } .search-filter-chip { background: #FFFFFF; border: 1px solid var(--parchment-border); border-radius: var(--radius-pill); padding: 4px 12px; font-family: var(--font-ui); font-size: var(--font-size-xs); font-weight: 700; color: var(--ink-muted); cursor: pointer; white-space: nowrap; transition: all var(--dur-fast) ease; } .search-filter-chip:hover { border-color: var(--amber); color: var(--forest); } .search-filter-chip.active { background: var(--forest); border-color: var(--forest); color: #FFFFFF; } /* Search Results Area */ .search-results-viewport { flex: 1; overflow-y: auto; padding: 16px 18px; display: flex; flex-direction: column; gap: 10px; } .search-result-card { background: var(--card-detour, #F9F5EE); border: 1px solid var(--parchment-border); border-radius: var(--radius-md); padding: 12px 16px; display: flex; flex-direction: column; gap: 6px; cursor: pointer; transition: all var(--dur-fast) ease; text-decoration: none; text-align: left; } .search-result-card:hover { background: #FFFFFF; border-color: var(--amber); transform: translateY(-1px); box-shadow: var(--elevation-sm); } .search-result-header { display: flex; justify-content: space-between; align-items: center; } .search-result-category { font-family: var(--font-mono); font-size: var(--font-size-2xs); font-weight: 800; letter-spacing: 0.5px; text-transform: uppercase; color: var(--terracotta); } .search-result-category.cat-stop { color: var(--terracotta); } .search-result-category.cat-lore { color: var(--forest); } .search-result-category.cat-audio { color: #2B6CB0; } .search-result-category.cat-voucher { color: #8A4B1A; } .search-result-category.cat-secret { color: #8A2BE2; font-weight: 900; } .search-result-day { font-family: var(--font-mono); font-size: var(--font-size-2xs); color: var(--ink-muted); } .search-result-title { font-family: var(--font-ui); font-size: var(--font-size-sm); font-weight: 800; color: var(--forest); margin: 0; } .search-result-snippet { font-size: var(--font-size-xs); color: var(--ink); line-height: 1.5; margin: 0; } mark.search-highlight { background: #FFE8A3; color: #573A00; padding: 1px 3px; border-radius: 2px; font-weight: 800; } /* Empty / Suggestions State */ .search-empty-state { padding: 24px 12px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 12px; } .search-empty-title { font-family: var(--font-display); font-size: var(--font-size-md); color: var(--forest); margin: 0; } .search-empty-sub { font-size: var(--font-size-xs); color: var(--ink-muted); max-width: 380px; line-height: 1.5; } .search-suggestions-cloud { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 8px; } .search-suggestion-pill { background: var(--card-front, #FFF); border: 1px solid var(--parchment-border); border-radius: var(--radius-pill); padding: 6px 14px; font-family: var(--font-ui); font-size: var(--font-size-xs); font-weight: 600; color: var(--forest); cursor: pointer; transition: all var(--dur-fast) ease; } .search-suggestion-pill:hover { background: var(--amber-light, #FCF4E8); border-color: var(--amber); transform: translateY(-1px); } /* Target Station Highlight Animation */ @keyframes targetStationPulse { 0% { box-shadow: 0 0 0 0 rgba(213, 132, 29, 0.8); transform: scale(1); } 50% { box-shadow: 0 0 0 16px rgba(213, 132, 29, 0); transform: scale(1.02); } 100% { box-shadow: 0 0 0 0 rgba(213, 132, 29, 0); transform: scale(1); } } .search-target-highlight { animation: targetStationPulse 1.8s ease-in-out 2 !important; outline: 3px solid var(--amber, #D5841D) !important; outline-offset: 6px; border-radius: var(--radius-md); } /* --- Module: games.css --- */ /* ========================================================================== Car Games — Shared Component Structure -------------------------------------------------------------------------- Structural/layout rules only — every visual value comes from --game-* custom properties. Deliberately NOT touched by scripts/theme_engine.py: the "skin" (the actual --game-* token values) lives in one of the css/games-skin-*.css files, selected at runtime via a [data-games-theme=""] attribute on #games-shell-backdrop (see applyGamesTheme() in js/games-engine.js). This file must not define any --game-* token itself — only consume them — so every skin file's [data-games-theme="x"] block is a complete, independent set of values. The skin contract every css/games-skin-*.css file must define in full: --game-text, --game-ink, --game-ink-solid (copy / line+shadow / guaranteed-dark-fill) --game-paper, --game-surface (page bg / card bg) --game-red, --game-orange, --game-yellow, --game-green, --game-teal, --game-blue, --game-purple, --game-pink (all 8 — grid cells and tile badges assign one of these 8 names at random, so every skin needs all 8 defined even if it remaps them to its own palette) --game-driver, --game-passenger --game-border-w, --game-radius-sm/md/lg/pill --game-shadow-sm/md/lg --game-font, --game-fs-sm/body/md/lg/xl/2xl --game-ink is the line/border/shadow color and MAY be any hue (Deco Voyage uses gold, not black). --game-ink-solid MUST stay dark regardless — it's the guaranteed-readable-with-white-text fill for .game-score-badge and .game-reveal-card.is-hidden. Nested overrides (targeted Y over default X): shared classes are the default rendering everywhere. When a primitive reads wrong in ONE skin, that skin file adds a scoped rule — [data-games-theme=""] first, narrowing to [data-game=""] (set by openGame/renderGamesMenu on #games-shell-body, "menu" for the hub) when only one game is affected. Example: Concourse's near-white red needs dark text on .is-bad while every other skin keeps white. Never restyle a primitive globally to fix one skin; scope it. ========================================================================== */ /* -------------------------------------------------------------------------- Shell — same fixed overlay pattern as #settings-drawer-modal, but a full screen takeover (games need the whole viewport, not a drawer). -------------------------------------------------------------------------- */ .games-shell-backdrop { position: fixed; inset: 0; z-index: var(--z-modal-top, 1100); background: rgba(15, 15, 20, 0.6); display: none; align-items: stretch; justify-content: stretch; } .games-shell-backdrop.open { display: flex; } /* Passthrough by default — only the Cell-Shaded skin adds padding/background here, for the trip-context mat. Every other skin renders this as if it weren't there. */ .games-trip-mat { flex: 1; display: flex; flex-direction: column; } .games-trip-strip { display: none; } .games-shell-card { flex: 1; display: flex; flex-direction: column; background: var(--game-paper); color: var(--game-text); font-family: var(--game-font); overflow-y: auto; -webkit-overflow-scrolling: touch; } .game-header { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; gap: 12px; padding: 14px 16px calc(14px + env(safe-area-inset-top, 0px)); padding-top: 14px; background: var(--game-paper); border-bottom: var(--game-border-w) solid var(--game-ink); } .game-header-back, .game-header-end { flex-shrink: 0; width: 40px; height: 40px; border-radius: var(--game-radius-pill); border: var(--game-border-w) solid var(--game-ink); background: var(--game-surface); box-shadow: var(--game-shadow-sm); font-family: var(--game-font); font-weight: 800; font-size: 1.1rem; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: transform 0.1s ease, box-shadow 0.1s ease; } .game-header-back:active, .game-header-end:active { transform: translate(2px, 2px); box-shadow: 0 0 0 var(--game-ink); } .game-header-titles { flex: 1; min-width: 0; } .game-header-title { font-weight: 800; font-size: var(--game-fs-lg); line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .game-header-sub { font-size: var(--game-fs-sm); font-weight: 600; opacity: 0.7; } /* -------------------------------------------------------------------------- Menu grid -------------------------------------------------------------------------- */ .game-menu-intro { padding: 18px 18px 4px; } .game-menu-intro h2 { font-size: var(--game-fs-xl); font-weight: 800; } .game-menu-intro p { font-size: var(--game-fs-sm); font-weight: 600; opacity: 0.75; margin-top: 4px; } .game-menu { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; padding: 16px 18px calc(32px + env(safe-area-inset-bottom, 0px)); } .game-tile { display: flex; flex-direction: column; gap: 8px; text-align: left; background: var(--game-surface); border: var(--game-border-w) solid var(--game-ink); border-radius: var(--game-radius-md); box-shadow: var(--game-shadow-sm); padding: 14px; cursor: pointer; font-family: var(--game-font); color: var(--game-text); transition: transform 0.1s ease, box-shadow 0.1s ease; } .game-tile:active { transform: translate(3px, 3px); box-shadow: 0 0 0 var(--game-ink); } .game-tile-badge { width: 44px; height: 44px; border-radius: 50%; border: var(--game-border-w) solid var(--game-ink); background: var(--tile-color, var(--game-yellow)); display: flex; align-items: center; justify-content: center; font-size: 1.4rem; font-weight: 800; color: var(--game-text); } .game-tile-title { font-weight: 800; font-size: var(--game-fs-md); line-height: 1.2; } .game-tile-blurb { font-size: var(--game-fs-sm); opacity: 0.75; font-weight: 500; line-height: 1.3; } .game-tile-meta { display: flex; gap: 6px; flex-wrap: wrap; margin-top: auto; padding-top: 4px; } .game-tag { font-size: 0.66rem; font-weight: 800; letter-spacing: 0.02em; padding: 3px 8px; border-radius: var(--game-radius-pill); border: 2px solid var(--game-ink); background: var(--game-surface); white-space: nowrap; } /* -------------------------------------------------------------------------- In-game shared primitives -------------------------------------------------------------------------- */ .game-body { flex: 1; width: 100%; max-width: 640px; margin-left: auto; margin-right: auto; display: flex; flex-direction: column; align-items: center; padding: 8px 16px calc(28px + env(safe-area-inset-bottom, 0px)); gap: 18px; } .game-top-row { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 14px; } .game-turn-chip { display: inline-flex; align-items: center; gap: 6px; font-weight: 800; font-size: var(--game-fs-sm); padding: 8px 16px; border-radius: var(--game-radius-pill); border: var(--game-border-w) solid var(--game-ink); box-shadow: var(--game-shadow-sm); background: var(--game-surface); } .game-turn-chip.is-driver { background: var(--game-driver); } .game-turn-chip.is-passenger { background: var(--game-passenger); } .game-score-badge { font-family: var(--font-mono, monospace); font-weight: 800; font-size: var(--game-fs-sm); background: var(--game-ink-solid); color: #fff; padding: 7px 14px; border-radius: var(--game-radius-pill); white-space: nowrap; } .game-prompt-row { width: 100%; display: flex; align-items: stretch; gap: 12px; } .game-prompt-row .game-prompt-card { flex: 1; } .game-prompt-card { width: 100%; border: var(--game-border-w) solid var(--game-ink); border-radius: var(--game-radius-lg); box-shadow: var(--game-shadow-md); background: var(--game-yellow); padding: 34px 20px; text-align: center; font-weight: 800; font-size: var(--game-fs-2xl); line-height: 1.2; color: var(--game-text); } .game-prompt-card.family-word { background: var(--game-yellow); } .game-prompt-card.family-trivia { background: var(--game-blue); color: #fff; } .game-prompt-card.family-story { background: var(--game-purple); color: #fff; } .game-prompt-card.family-grid { background: var(--game-green); } .game-prompt-card.family-social { background: var(--game-pink); color: #fff; } .game-prompt-sub { font-size: var(--game-fs-sm); font-weight: 600; opacity: 0.85; margin-top: 8px; } /* Big single-glyph badge — a letter, a number, a die face. Sits alongside a prompt card when a game needs one extra piece of at-a-glance info. */ .game-letter-badge { width: 64px; height: 64px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; border: var(--game-border-w) solid var(--game-ink); border-radius: var(--game-radius-md); box-shadow: var(--game-shadow-sm); background: var(--game-orange); font-weight: 800; font-size: var(--game-fs-xl); } /* Reveal / hide mechanic — secret word games. A quick scale+opacity swap rather than a 3D flip: just as legible, and it degrades cleanly under prefers-reduced-motion via the global rule in css/base.css. */ .game-reveal-card { width: 100%; border: var(--game-border-w) solid var(--game-ink); border-radius: var(--game-radius-lg); box-shadow: var(--game-shadow-md); padding: 34px 20px; text-align: center; min-height: 120px; display: flex; align-items: center; justify-content: center; } .game-reveal-card .reveal-face { font-weight: 800; font-size: var(--game-fs-xl); transition: transform var(--dur-fast, 0.2s) ease, opacity var(--dur-fast, 0.2s) ease; } .game-reveal-card.is-hidden { background: var(--game-ink-solid); } .game-reveal-card.is-hidden .reveal-face { color: var(--game-paper); font-size: var(--game-fs-md); opacity: 0.85; } .game-reveal-card.is-revealed { background: var(--game-yellow); } /* -------------------------------------------------------------------------- Buttons -------------------------------------------------------------------------- */ .game-actions { width: 100%; display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; } .game-btn { font-family: var(--game-font); font-weight: 800; font-size: var(--game-fs-md); border: var(--game-border-w) solid var(--game-ink); border-radius: var(--game-radius-md); padding: 14px 22px; box-shadow: var(--game-shadow-sm); background: var(--game-surface); color: var(--game-text); cursor: pointer; transition: transform 0.1s ease, box-shadow 0.1s ease; -webkit-tap-highlight-color: transparent; } .game-btn:active { transform: translate(3px, 3px); box-shadow: 0 0 0 var(--game-ink); } .game-btn-primary { background: var(--game-green); } .game-btn-secondary { background: var(--game-surface); } .game-btn-danger { background: var(--game-red); color: #fff; } .game-btn-wide { flex: 1 1 100%; } .game-btn:disabled { opacity: 0.45; cursor: not-allowed; transform: none; box-shadow: var(--game-shadow-sm); } /* -------------------------------------------------------------------------- Grid primitive — License Plate Spotting now, Codenames word grid later. -------------------------------------------------------------------------- */ .game-grid { width: 100%; display: grid; grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); gap: 8px; } .game-grid-cell { position: relative; border: 2.5px solid var(--game-ink); border-radius: var(--game-radius-sm); background: var(--tile-color, var(--game-surface)); color: var(--game-text); box-shadow: 2px 2px 0 var(--game-ink); padding: 10px 4px; text-align: center; font-weight: 800; font-size: var(--game-fs-sm); cursor: pointer; transition: transform 0.1s ease, box-shadow 0.1s ease, opacity 0.1s ease; } .game-grid-cell.is-marked { background: var(--game-green); text-decoration: line-through; opacity: 0.5; box-shadow: none; transform: translate(2px, 2px); } /* Crossword grid — same tile family as every other game, not newsprint: letter tiles are bordered cards, blocks are solid ink tiles, the active word tints to the surface color. Capped narrow so big grids stay small. */ .game-grid.game-xword { gap: 6px; width: 100%; max-width: 400px; margin-left: auto; margin-right: auto; } .game-grid.game-xword .game-grid-cell { aspect-ratio: 1 / 1; padding: 0; display: flex; align-items: center; justify-content: center; font-size: var(--game-fs-md); } .game-grid.game-xword .game-grid-cell:active { transform: translate(2px, 2px); } .game-grid.game-xword .game-grid-cell.is-word { background: var(--game-surface); } .game-grid-cell.is-active { outline: 3px solid var(--game-ink); outline-offset: -3px; } .game-grid-cell.is-locked { background: var(--game-green); } /* Wrong / dangerous picks — quote misses, assassins. White ink on red is the same pairing the danger button already uses in every skin. */ .game-grid-cell.is-bad { background: var(--game-red); color: #fff; } /* Hit / miss picks — Battleship, Minesweeper, and any grid game where a tap resolves for or against the player. Hit is the danger pairing; miss is a peg dot drawn with the ink token, no extra markup. */ .game-grid-cell.is-hit { background: var(--game-red); color: #fff; box-shadow: none; transform: translate(2px, 2px); } .game-grid-cell.is-miss { background-image: radial-gradient(circle, var(--game-ink) 20%, transparent 21%); } /* Filler blocks for sparse grids — solid ink tiles in the family radius, usable by any grid game, not just crosswords. */ .game-grid-block { aspect-ratio: 1 / 1; background: var(--game-ink); border-radius: var(--game-radius-sm); } .game-clue-label { align-self: flex-start; font-weight: 800; font-size: var(--game-fs-sm); letter-spacing: 0.04em; margin-top: 6px; } .game-grid-cell.is-locked { background: var(--game-green); } .game-grid-cell .cell-num { position: absolute; top: 1px; left: 4px; font-size: 0.6rem; font-weight: 800; opacity: 0.55; pointer-events: none; } /* -------------------------------------------------------------------------- Rules disclosure — reuses the
/ pattern already used in the settings drawer (render_settings_modal in scripts/build.py). -------------------------------------------------------------------------- */ .game-rules-details { width: 100%; border: 2px dashed var(--game-ink); border-radius: var(--game-radius-md); padding: 10px 14px; background: var(--game-surface); } .game-rules-details summary { font-weight: 800; font-size: var(--game-fs-sm); cursor: pointer; } .game-rules-details p { font-size: var(--game-fs-sm); font-weight: 500; line-height: 1.5; margin-top: 8px; opacity: 0.85; } .game-history-list { width: 100%; display: flex; flex-direction: column; gap: 6px; font-size: var(--game-fs-sm); font-weight: 700; } .game-history-row { display: flex; justify-content: space-between; border: 2px solid var(--game-ink); border-radius: var(--game-radius-sm); padding: 6px 12px; background: var(--game-surface); } @media (max-width: 380px) { .game-menu { grid-template-columns: 1fr 1fr; gap: 10px; } .game-prompt-card { font-size: var(--game-fs-xl); padding: 26px 16px; } } /* Breakpoints — the hub is phone-first; tablets and desktops get more menu columns while game bodies stay capped so cards never go wide. */ @media (min-width: 768px) { .game-menu { grid-template-columns: repeat(3, 1fr); } } @media (min-width: 1100px) { .game-menu { grid-template-columns: repeat(4, 1fr); } } /* Versus variant — two prompt cards sharing one row ("Is It More Like…?"). Layout only, no skin tokens: stacks below 480px where two cards + the divider badge no longer fit side by side. Single-card rows (Category) are untouched. */ @media (max-width: 480px) { .game-prompt-row.is-versus { flex-direction: column; } .game-prompt-row.is-versus .game-letter-badge { margin: 0 auto; } } /* King of Snacks — compact ledger cards inside the shared Games shell. */ .kos-view { display: flex; flex-direction: column; gap: 14px; padding: 16px 18px calc(30px + env(safe-area-inset-bottom, 0px)); } .kos-hero, .kos-shop-head, .kos-advance-row, .kos-meters, .kos-shop-stats { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .kos-hero { align-items: flex-start; } .kos-hero h2 { font-size: var(--game-fs-2xl); line-height: 1.05; margin: 4px 0; } .kos-hero p, .kos-muted, .kos-new-game p { font-size: var(--game-fs-sm); font-weight: 600; opacity: 0.72; } .kos-eyebrow { font-size: 0.68rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.7; } .kos-day { flex-shrink: 0; border: var(--game-border-w) solid var(--game-ink); border-radius: var(--game-radius-pill); background: var(--game-yellow); padding: 7px 10px; font-size: var(--game-fs-sm); font-weight: 800; } .kos-meters { display: grid; grid-template-columns: repeat(4, 1fr); border: var(--game-border-w) solid var(--game-ink); border-radius: var(--game-radius-md); background: var(--game-surface); box-shadow: var(--game-shadow-sm); padding: 10px 8px; } .kos-meters div { display: flex; flex-direction: column; align-items: center; gap: 3px; font-size: 0.7rem; text-transform: uppercase; } .kos-meters b { font-size: var(--game-fs-md); } .kos-shop-card, .kos-contract, .kos-festival { border: var(--game-border-w) solid var(--game-ink); border-radius: var(--game-radius-md); background: var(--game-surface); box-shadow: var(--game-shadow-sm); padding: 14px; } .kos-shop-head h3 { margin-top: 2px; } .kos-shop-vertical { font-weight: 800; text-transform: capitalize; } .kos-shop-stats { justify-content: flex-start; flex-wrap: wrap; margin: 12px 0; font-size: var(--game-fs-sm); } .kos-shop-stats span { margin-right: 8px; } .kos-shop-stats b { margin-left: 3px; } .kos-control { display: flex; flex-direction: column; gap: 5px; margin-top: 10px; font-size: var(--game-fs-sm); font-weight: 800; } .kos-control span { display: flex; justify-content: space-between; } .kos-control input { width: 100%; accent-color: var(--game-orange); } .kos-crew-line { margin-top: 12px; font-size: 0.76rem; font-weight: 700; opacity: 0.72; } .kos-actions, .kos-new-game { display: flex; flex-wrap: wrap; gap: 8px; } .kos-actions .game-btn { flex: 1 1 42%; } .kos-advance-row { flex-wrap: wrap; } .kos-advance-row .kos-muted { flex: 1 1 100%; } .kos-advance-row .game-btn { flex: 1 1 42%; } .kos-contract, .kos-festival { display: flex; flex-direction: column; gap: 5px; } .kos-contract span, .kos-festival p { font-size: var(--game-fs-sm); font-weight: 600; } .kos-report { font-size: var(--game-fs-sm); padding: 12px 14px; } .kos-new-game { align-items: center; margin-top: 10px; } .kos-new-game label { display: flex; flex-direction: column; gap: 4px; font-weight: 800; } .kos-new-game input { max-width: 150px; padding: 8px; border: 2px solid var(--game-ink); border-radius: var(--game-radius-sm); } .kos-history { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; padding-left: 20px; font-size: var(--game-fs-sm); font-weight: 600; } .kos-sync { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; } .kos-sync label { display: flex; flex-direction: column; gap: 4px; font-size: var(--game-fs-sm); font-weight: 800; } .kos-sync textarea { width: 100%; min-height: 70px; resize: vertical; padding: 8px; border: 2px solid var(--game-ink); border-radius: var(--game-radius-sm); font: 0.68rem var(--game-font); } .kos-sync-qr { min-height: 0; } .kos-sync-message { font-size: var(--game-fs-sm); font-weight: 700; } .kos-sync p:last-child { font-size: 0.72rem; font-weight: 600; opacity: 0.72; } @media (max-width: 420px) { .kos-meters { grid-template-columns: repeat(2, 1fr); gap: 10px; } .kos-hero h2 { font-size: var(--game-fs-xl); } } /* --- Module: games-skin-cellshaded.css --- */ /* ========================================================================== Games Skin — Cell-Shaded (default) -------------------------------------------------------------------------- The original shipped look: thick ink borders, flat crayon palette, hard unblurred offset shadows. Theme-invariant on purpose — see css/games.css header comment for why. ========================================================================== */ [data-games-theme="cellshaded"] { --game-text: #16171D; --game-ink: #16171D; --game-ink-solid: #16171D; --game-paper: #FFF9EF; --game-surface: #FFFFFF; --game-red: #FF5A5F; --game-orange: #FF9F43; --game-yellow: #FFD93D; --game-green: #4ECB71; --game-teal: #2EC4B6; --game-blue: #4D96FF; --game-purple: #9B6BFF; --game-pink: #FF6FB5; --game-driver: var(--game-orange); --game-passenger: var(--game-teal); --game-border-w: 3px; --game-radius-sm: 12px; --game-radius-md: 18px; --game-radius-lg: 26px; --game-radius-pill: 999px; /* Hard, unblurred offset shadows are what read as "cell-shaded" rather than the soft blurred elevation used by the rest of the app. */ --game-shadow-sm: 3px 3px 0 var(--game-ink); --game-shadow-md: 5px 5px 0 var(--game-ink); --game-shadow-lg: 7px 7px 0 var(--game-ink); --game-font: 'Poppins', var(--font-ui, -apple-system, sans-serif); --game-fs-sm: 0.85rem; --game-fs-body: 1rem; --game-fs-md: 1.15rem; --game-fs-lg: 1.5rem; --game-fs-xl: 2rem; --game-fs-2xl: 2.6rem; } /* -------------------------------------------------------------------------- Trip-context mat — Cell-Shaded only. A colored outer mat + a small location strip naming the current/next stop, both driven by applyTripContextMat() in js/games-engine.js. The card inside stays completely unchanged; only the frame around it responds to the trip. -------------------------------------------------------------------------- */ [data-games-theme="cellshaded"] .games-shell-backdrop { padding: 0; background: rgba(15, 15, 20, 0.6); } [data-games-theme="cellshaded"] .games-trip-mat { flex: 1; display: flex; flex-direction: column; padding: 14px; background: var(--games-trip-mat-bg, linear-gradient(180deg, #E9C08A 0%, #D5841D 45%, #B54728 100%)); } [data-games-theme="cellshaded"] .games-trip-strip { display: flex; align-items: center; gap: 8px; padding: 8px 14px; margin-bottom: 12px; background: rgba(22, 32, 22, 0.88); border-radius: 999px; color: #FCF4E8; font-family: var(--game-font); font-size: 0.72rem; font-weight: 700; } [data-games-theme="cellshaded"] .games-trip-strip-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--games-trip-mat-accent, #D5841D); flex-shrink: 0; } [data-games-theme="cellshaded"] .games-trip-strip-label { opacity: 0.65; text-transform: uppercase; font-size: 0.62rem; letter-spacing: 0.06em; } [data-games-theme="cellshaded"] .games-shell-card { flex: 1; border-radius: 20px; overflow-y: auto; overflow-x: hidden; box-shadow: 0 12px 30px rgba(0, 0, 0, 0.25); } /* White text fails AA on this skin's pink and red — dark text on social cards, picked-wrong tiles, and danger buttons. */ [data-games-theme="cellshaded"] .game-prompt-card.family-social, [data-games-theme="cellshaded"] .game-grid-cell.is-bad, [data-games-theme="cellshaded"] .game-btn-danger { color: var(--game-text); } /* --- Module: games-skin-deco.css --- */ /* ========================================================================== Games Skin — Deco Voyage (World's Fair) -------------------------------------------------------------------------- Thin gold linework, no drop shadows, deep jewel-tone fills instead of flat crayon colors. Deliberately reuses the same gold/forest-deep hues as data/theme_defaults.yaml's adventure_roadtrip palette and the deco-light grammar docs/HUMAN_CENTERED_DESIGN.md §7 already specifies for the journey backgrounds — so this skin and that system read as one visual language. ========================================================================== */ [data-games-theme="deco"] { --game-text: #F8F3E6; --game-ink: #C08A2E; --game-ink-solid: #162016; --game-paper: #162016; --game-surface: #1F2A1E; --game-red: #7A3B3B; --game-orange: #9E5423; --game-yellow: #C08A2E; --game-green: #3F6B4F; --game-teal: #2A6B63; --game-blue: #2A4A6B; --game-purple: #5B3A6B; --game-pink: #7A4A5E; --game-driver: var(--game-orange); --game-passenger: var(--game-teal); --game-border-w: 1.5px; --game-radius-sm: 3px; --game-radius-md: 4px; --game-radius-lg: 6px; --game-radius-pill: 999px; --game-shadow-sm: none; --game-shadow-md: none; --game-shadow-lg: none; --game-font: 'Poppins', var(--font-ui, -apple-system, sans-serif); --game-fs-sm: 0.85rem; --game-fs-body: 1rem; --game-fs-md: 1.15rem; --game-fs-lg: 1.5rem; --game-fs-xl: 2rem; --game-fs-2xl: 2.4rem; } [data-games-theme="deco"] .games-shell-card { background-color: var(--game-paper); background-image: repeating-conic-gradient( from 0deg at 50% -160px, rgba(192, 138, 46, 0.14) 0deg 3deg, transparent 3deg 11deg ); background-repeat: no-repeat; } [data-games-theme="deco"] .game-header-title, [data-games-theme="deco"] .game-tile-title, [data-games-theme="deco"] .game-tag { text-transform: uppercase; letter-spacing: 0.06em; } /* Gold linework needs a dark text pairing on the lightest fills for contrast; everything else stays the base cream. */ [data-games-theme="deco"] .game-prompt-card.family-word, [data-games-theme="deco"] .game-prompt-card.family-grid { color: #1A1206; } /* Cream text fails on this skin's brightest gold tile — near-black text on yellow badges and plate cells. Orange keeps the default cream. */ [data-games-theme="deco"] .game-tile-badge[data-tile="yellow"], [data-games-theme="deco"] .game-grid-cell[data-tile="yellow"] { color: var(--game-ink-solid); } /* --- Module: games-skin-transit.css --- */ /* ========================================================================== Games Skin — Transit Diagram -------------------------------------------------------------------------- Bold flat color blocks, square corners, no drop shadows, high-contrast ink/paper. Wayfinding-grade legibility under motion. ========================================================================== */ [data-games-theme="transit"] { --game-text: #111214; --game-ink: #111214; --game-ink-solid: #111214; --game-paper: #F7F7F5; --game-surface: #FFFFFF; --game-red: #C03A20; --game-orange: #E8871E; --game-yellow: #E8B923; --game-green: #177245; --game-teal: #0B7373; --game-blue: #1E5AA8; --game-purple: #6A4FB0; --game-pink: #C43F73; --game-driver: var(--game-orange); --game-passenger: var(--game-teal); --game-border-w: 3px; --game-radius-sm: 0px; --game-radius-md: 0px; --game-radius-lg: 0px; --game-radius-pill: 0px; --game-shadow-sm: none; --game-shadow-md: none; --game-shadow-lg: none; --game-font: 'Poppins', var(--font-ui, -apple-system, sans-serif); --game-fs-sm: 0.85rem; --game-fs-body: 1rem; --game-fs-md: 1.15rem; --game-fs-lg: 1.5rem; --game-fs-xl: 2rem; --game-fs-2xl: 2.4rem; } [data-games-theme="transit"] .game-header { background: var(--game-ink); color: #fff; } [data-games-theme="transit"] .game-header-back, [data-games-theme="transit"] .game-header-end { border-radius: 0; } [data-games-theme="transit"] .game-header-title, [data-games-theme="transit"] .game-tile-title, [data-games-theme="transit"] .game-tag, [data-games-theme="transit"] .game-btn, [data-games-theme="transit"] .game-turn-chip { text-transform: uppercase; letter-spacing: 0.03em; } /* Station-plate treatment: heavy top/bottom rules instead of a boxed card. */ [data-games-theme="transit"] .game-prompt-card { border-left: none; border-right: none; border-top-width: 5px; border-bottom-width: 5px; } [data-games-theme="transit"] .game-tag { background: var(--game-ink); color: #fff; border-color: var(--game-ink); } /* Dark text fails AA on this skin's saturated tiles — white on red, green, teal, blue, purple, and pink badges and plate cells. Orange and yellow keep dark text. */ [data-games-theme="transit"] .game-tile-badge[data-tile="red"], [data-games-theme="transit"] .game-tile-badge[data-tile="green"], [data-games-theme="transit"] .game-tile-badge[data-tile="teal"], [data-games-theme="transit"] .game-tile-badge[data-tile="blue"], [data-games-theme="transit"] .game-tile-badge[data-tile="purple"], [data-games-theme="transit"] .game-tile-badge[data-tile="pink"], [data-games-theme="transit"] .game-grid-cell[data-tile="red"], [data-games-theme="transit"] .game-grid-cell[data-tile="green"], [data-games-theme="transit"] .game-grid-cell[data-tile="teal"], [data-games-theme="transit"] .game-grid-cell[data-tile="blue"], [data-games-theme="transit"] .game-grid-cell[data-tile="purple"], [data-games-theme="transit"] .game-grid-cell[data-tile="pink"] { color: #fff; } /* Dark text on this skin's mid green falls just short of AA — confirmed picks read white instead. */ [data-games-theme="transit"] .game-grid-cell.is-locked { color: #fff; } /* --- Module: games-skin-constellation.css --- */ /* ========================================================================== Games Skin — Constellation -------------------------------------------------------------------------- A dusk skin: deep navy, thin gold linework, a handful of sparse gold star points (never a dense starfield — texture should stay texture, not noise). Best suited as an evening variant, but works as a standalone pick too. ========================================================================== */ [data-games-theme="constellation"] { --game-text: #F2EAD3; --game-ink: #D9B65C; --game-ink-solid: #0B1220; --game-paper: #0B1220; --game-surface: #131C2E; --game-red: #7A3B4A; --game-orange: #B5722A; --game-yellow: #D9B65C; --game-green: #3F6B5B; --game-teal: #2A6B78; --game-blue: #3A5B8B; --game-purple: #6B4F9B; --game-pink: #8B4F73; --game-driver: var(--game-orange); --game-passenger: var(--game-teal); --game-border-w: 1px; --game-radius-sm: 4px; --game-radius-md: 4px; --game-radius-lg: 6px; --game-radius-pill: 999px; --game-shadow-sm: none; --game-shadow-md: none; --game-shadow-lg: none; --game-font: 'Poppins', var(--font-ui, -apple-system, sans-serif); --game-fs-sm: 0.85rem; --game-fs-body: 1rem; --game-fs-md: 1.15rem; --game-fs-lg: 1.5rem; --game-fs-xl: 2rem; --game-fs-2xl: 2.4rem; } [data-games-theme="constellation"] .game-header-title { font-family: 'Fraunces', serif; } /* Sparse stars — 7 fixed points, never more. Pure CSS, no extra markup. */ [data-games-theme="constellation"] .games-shell-card { background-color: var(--game-paper); background-image: radial-gradient(circle, #D9B65C 0 1.5px, transparent 1.5px), radial-gradient(circle, #D9B65C 0 1.5px, transparent 1.5px), radial-gradient(circle, #D9B65C 0 1.5px, transparent 1.5px), radial-gradient(circle, #D9B65C 0 1.5px, transparent 1.5px), radial-gradient(circle, #D9B65C 0 1.5px, transparent 1.5px), radial-gradient(circle, #D9B65C 0 1.5px, transparent 1.5px), radial-gradient(circle, #D9B65C 0 1.5px, transparent 1.5px); background-repeat: no-repeat; background-size: 3px 3px; background-position: 12% 8%, 32% 16%, 22% 24%, 78% 10%, 88% 18%, 18% 88%, 82% 84%; } /* Cream text fails on this skin's gold tiles — near-black text on orange and yellow badges and plate cells. */ [data-games-theme="constellation"] .game-tile-badge[data-tile="orange"], [data-games-theme="constellation"] .game-tile-badge[data-tile="yellow"], [data-games-theme="constellation"] .game-grid-cell[data-tile="orange"], [data-games-theme="constellation"] .game-grid-cell[data-tile="yellow"] { color: var(--game-ink-solid); } /* Cream text fails on this skin's driver orange too — the turn chip and the letter badge (both orange) read near-black instead. */ [data-games-theme="constellation"] .game-turn-chip.is-driver, [data-games-theme="constellation"] .game-letter-badge { color: var(--game-ink-solid); } /* --- Module: games-skin-concourse.css --- */ /* ========================================================================== Games Skin — Concourse -------------------------------------------------------------------------- Airport-signage discipline (Schiphol/Mijksenaar), not an airport theme: black type, one accent, a strict grid, almost no metaphor. Also the universal "spoilsport" rendering — js/games-engine.js forces this skin whenever the app's existing dressing dial (Law 11) is set to `plain`, regardless of which flavor skin someone otherwise picked. ========================================================================== */ [data-games-theme="concourse"] { --game-text: #14151A; --game-ink: #14151A; --game-ink-solid: #14151A; --game-paper: #FAFAF8; --game-surface: #FFFFFF; /* Deliberately near-white tints, not saturated hues — Concourse doesn't color-code, it labels. Grid variety survives as a faint texture only. */ --game-red: #F0ECE8; --game-orange: #C08A2E; --game-yellow: #F2F0E6; --game-green: #EAF0EA; --game-teal: #E6EFEF; --game-blue: #E9EDF2; --game-purple: #EEEAF0; --game-pink: #F2E9ED; --game-driver: var(--game-orange); --game-passenger: var(--game-orange); --game-border-w: 1px; --game-radius-sm: 0px; --game-radius-md: 0px; --game-radius-lg: 0px; --game-radius-pill: 0px; --game-shadow-sm: none; --game-shadow-md: none; --game-shadow-lg: none; --game-font: 'IBM Plex Sans', var(--font-ui, -apple-system, sans-serif); --game-fs-sm: 0.78rem; --game-fs-body: 0.95rem; --game-fs-md: 1.1rem; --game-fs-lg: 1.4rem; --game-fs-xl: 1.9rem; --game-fs-2xl: 2.1rem; } [data-games-theme="concourse"] .game-header { border-bottom-color: #DAD8D2; } [data-games-theme="concourse"] .game-header-title, [data-games-theme="concourse"] .game-tag { text-transform: uppercase; letter-spacing: 0.1em; } /* Flat label + a small square mark instead of a colored pill — text alone carries driver-vs-passenger, matching Concourse's "label, don't color-code" ethos. */ [data-games-theme="concourse"] .game-turn-chip { border: none; box-shadow: none; border-radius: 0; padding: 0; gap: 10px; color: var(--game-text); } [data-games-theme="concourse"] .game-turn-chip.is-driver, [data-games-theme="concourse"] .game-turn-chip.is-passenger { background: transparent; } [data-games-theme="concourse"] .game-turn-chip::before { content: ''; display: inline-block; width: 9px; height: 9px; flex-shrink: 0; background: var(--game-orange); } /* Solid flat plate buttons instead of colored pills. */ [data-games-theme="concourse"] .game-btn { background: var(--game-ink); color: var(--game-paper); text-transform: uppercase; letter-spacing: 0.05em; } [data-games-theme="concourse"] .game-btn-danger { background: var(--game-surface); color: var(--game-ink); border-color: var(--game-ink); } /* The base component contract hardcodes white text on family-trivia/story/ social, correct when those crayons are mid-to-dark saturated colors — but Concourse's crayons are deliberately near-white tints, so that white text would be nearly invisible. Force dark text back on here specifically. */ [data-games-theme="concourse"] .game-prompt-card.family-trivia, [data-games-theme="concourse"] .game-prompt-card.family-story, [data-games-theme="concourse"] .game-prompt-card.family-social { color: var(--game-text); } /* Same story for picked-wrong tiles: .is-bad pairs white text with red, invisible on Concourse's near-white red. Dark text here specifically. */ [data-games-theme="concourse"] .game-grid-cell.is-bad { color: var(--game-text); } /* And the danger button shares the pairing (white on red) — same fix. */ [data-games-theme="concourse"] .game-btn-danger { color: var(--game-text); } /* --- Module: games-skin-blueyworld.css --- */ /* ========================================================================== Games Skin — Bluey World -------------------------------------------------------------------------- Corrected against the show's actual production-design technique (per the art director's own account, not guesswork): every line is a shifted tint of the shape's OWN fill color — never a neutral black outline — and every shape is a big, friendly rounded rectangle. No characters, no black outlines: the technique, not the IP. Grid cells (License Plate Spotting) fall back to a uniform warm-ink border rather than a per-tile hue-matched one — their fill color is an inline custom property set by JS, and giving each of the 8 crayon names its own matching "line" tint there would mean touching the JS, which the shared component contract deliberately avoids per skin. Every class-based element (prompt cards, badges, chips, buttons) gets the full hue-matched treatment. ========================================================================== */ [data-games-theme="blueyworld"] { --game-text: #463522; --game-ink: #5B4630; --game-ink-solid: #5B4630; --game-paper: #FFF6E6; --game-surface: #FFFFFF; --game-red: #FF8FA3; --game-orange: #FFB067; --game-yellow: #FFD93D; --game-green: #8FDBA0; --game-teal: #4FD3C4; --game-blue: #7FB2FF; --game-purple: #C9A6FF; --game-pink: #FF8FBE; --game-driver: var(--game-orange); --game-passenger: var(--game-teal); --game-border-w: 4px; --game-radius-sm: 16px; --game-radius-md: 22px; --game-radius-lg: 32px; --game-radius-pill: 999px; --game-shadow-sm: 0 4px 0 rgba(91, 70, 48, 0.3); --game-shadow-md: 0 6px 0 rgba(91, 70, 48, 0.3); --game-shadow-lg: 0 8px 0 rgba(91, 70, 48, 0.3); --game-font: 'Poppins', var(--font-ui, -apple-system, sans-serif); --game-fs-sm: 0.85rem; --game-fs-body: 1rem; --game-fs-md: 1.15rem; --game-fs-lg: 1.5rem; --game-fs-xl: 2rem; --game-fs-2xl: 2.4rem; } /* Flattened two-tone "graphic space" backdrop behind the games hub, echoing the show's non-literal-perspective environments — a horizon, not a room. */ [data-games-theme="blueyworld"] .games-shell-card { background: radial-gradient(ellipse at 50% 130%, #D9ECCF 0%, #D9ECCF 40%, transparent 41%), var(--game-paper); } /* Colored lineart: each family's border/shadow is a shifted tint of its own fill, not the shared warm-ink default. */ [data-games-theme="blueyworld"] .game-prompt-card, [data-games-theme="blueyworld"] .game-prompt-card.family-word { border-color: #B4790C; box-shadow: 0 6px 0 rgba(180, 121, 12, 0.35); } [data-games-theme="blueyworld"] .game-prompt-card.family-trivia { border-color: #2A5FA8; box-shadow: 0 6px 0 rgba(42, 95, 168, 0.35); } [data-games-theme="blueyworld"] .game-prompt-card.family-story { border-color: #6B3FA0; box-shadow: 0 6px 0 rgba(107, 63, 160, 0.35); } [data-games-theme="blueyworld"] .game-prompt-card.family-grid { border-color: #2E8B4F; box-shadow: 0 6px 0 rgba(46, 139, 79, 0.35); } [data-games-theme="blueyworld"] .game-prompt-card.family-social { border-color: #B23D6B; box-shadow: 0 6px 0 rgba(178, 61, 107, 0.35); } [data-games-theme="blueyworld"] .game-letter-badge { border-color: #C25E12; box-shadow: 0 5px 0 rgba(194, 94, 18, 0.35); } [data-games-theme="blueyworld"] .game-turn-chip.is-driver { border-color: #C25E12; box-shadow: 0 4px 0 rgba(194, 94, 18, 0.35); } [data-games-theme="blueyworld"] .game-turn-chip.is-passenger { border-color: #1B6E64; box-shadow: 0 4px 0 rgba(27, 110, 100, 0.35); } [data-games-theme="blueyworld"] .game-btn-primary { border-color: #2E8B4F; box-shadow: 0 5px 0 rgba(46, 139, 79, 0.35); } [data-games-theme="blueyworld"] .game-btn-danger { border-color: #B23D55; box-shadow: 0 5px 0 rgba(178, 61, 85, 0.35); } [data-games-theme="blueyworld"] .game-header-back, [data-games-theme="blueyworld"] .game-header-end, [data-games-theme="blueyworld"] .game-btn-secondary { border-color: #C25E12; box-shadow: 0 5px 0 rgba(194, 94, 18, 0.35); } /* Vertical-offset shadows read as "resting on the ground," not "cast diagonally" — the press state should collapse straight down too. */ [data-games-theme="blueyworld"] .game-tile:active, [data-games-theme="blueyworld"] .game-header-back:active, [data-games-theme="blueyworld"] .game-header-end:active, [data-games-theme="blueyworld"] .game-btn:active { transform: translateY(3px); box-shadow: none; } /* White text fails AA on this skin's pink and red — dark text on social cards, picked-wrong tiles, and danger buttons. */ [data-games-theme="blueyworld"] .game-prompt-card.family-social, [data-games-theme="blueyworld"] .game-grid-cell.is-bad, [data-games-theme="blueyworld"] .game-btn-danger { color: var(--game-text); }