/* ========================================================================== 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; --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; --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; --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-action-bg: var(--forest); --surface-action-ink: #FFFFFF; --surface-sign-bg: var(--wood-dark); --surface-sign-ink: #FFFFFF; } /* 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; --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; --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; --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-action-bg: var(--forest); --surface-action-ink: #FFFFFF; --surface-sign-bg: var(--wood-dark); --surface-sign-ink: #FFFFFF; } /* 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; --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; --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; --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-action-bg: var(--forest); --surface-action-ink: #1F1A12; --surface-sign-bg: var(--wood-dark); --surface-sign-ink: #FFFFFF; } /* 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; --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; --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; --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-action-bg: var(--forest); --surface-action-ink: #FFFFFF; --surface-sign-bg: var(--wood-dark); --surface-sign-ink: #FFFFFF; } /* 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; --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; --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; --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-action-bg: var(--forest); --surface-action-ink: #1F1A12; --surface-sign-bg: var(--wood-dark); --surface-sign-ink: #FFFFFF; } /* 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%); } /* Dark themes: the card stack needs a hairline to separate from the canvas. */ body[data-theme="mountain_camping"] .pacing-card, body[data-theme="tropical"] .pacing-card, body[data-theme="metropolitan"] .pacing-card { border-color: rgba(255, 255, 255, 0.10); } /* --- 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; } /* 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: 1.35rem; 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: 1.05rem; letter-spacing: -0.01em; white-space: nowrap; } .brand-logo-pill { font-size: 0.62rem; padding: 2px 5px; } .brand-subtitle { font-size: 0.64rem; } .step-counter-badge { padding: 4px 7px; gap: 4px; } .step-counter-text { font-size: 0.65rem; } .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: 0 6px 18px rgba(0, 0, 0, 0.28); border: 2px solid var(--bg-day-tag-border, #FFFFFF); } .day-tag h2 { font-family: var(--font-display); font-size: 1rem; 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: 0 24px 60px rgba(0,0,0,0.65), inset 0 1px 0 rgba(255,255,255,0.15); 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: 0.65rem; 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: 1.65rem; font-weight: 700; color: #FFDDA6; line-height: 1.2; margin-top: 4px; } .gate-sub { font-size: 0.88rem; color: #D5C8B8; line-height: 1.4; } .gate-route-badge { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 0.72rem; 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: #FFDDA6; } .route-classified { color: #FFDDA6; 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: 0.62rem; font-weight: 700; color: #FFDDA6; 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: #FFDDA6; font-size: 1.35rem; 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: #C2B49F; font-size: 0.58rem; 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: 0.66rem; font-weight: 700; color: #FFDDA6; 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: 0.92rem; font-weight: 700; color: #FFF0D4; } .gate-temp-label { display: block; font-size: 0.62rem; color: #C0B09E; 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: 0.58rem; font-weight: 700; color: #FFDDA6; 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: 0.72rem; color: #A99885; 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: 0.65rem; font-weight: 700; color: #FFDDA6; letter-spacing: 0.08em; } .gate-form { display: flex; flex-direction: column; gap: 10px; } .gate-input { font-family: var(--font-mono); font-size: 1.1rem; font-weight: 700; letter-spacing: 0.12em; text-align: center; text-transform: uppercase; color: #1F2A1E; background: #F8EFE4; border: 2px solid #D5841D; border-radius: var(--radius-md); padding: 12px 10px; box-shadow: inset 0 2px 4px rgba(0,0,0,0.2); } .gate-hint { font-size: 0.74rem; color: #D5C8B8; } .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: 0.88rem; font-weight: 700; 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: 0.76rem; 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; } .step-counter-badge { background: linear-gradient(180deg, #5C3D24 0%, #3D2614 100%); color: #F8EFE4; border: 1.5px solid #E0CEB5; border-radius: var(--radius-xl); padding: 5px 10px; display: inline-flex; align-items: center; gap: 5px; box-shadow: 0 2px 6px rgba(0,0,0,0.3); 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: #FFDDA6; flex-shrink: 0; } .step-counter-text { font-family: var(--font-mono); font-size: 0.68rem; 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: 0 8px 24px rgba(0,0,0,0.24); } .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: 0.7rem; 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: 1.28rem; font-weight: 700; letter-spacing: -0.015em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .brand-subtitle { font-size: 0.72rem; 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: 0.7rem; 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: #FFDDA6; 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: 0.74rem; 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: 0 3px 10px rgba(0,0,0,0.16); font-weight: 700; } /* --- 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: 0.74rem; 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: 0.74rem; 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: 0 3px 12px rgba(0, 0, 0, 0.35); } /* 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: inset 0 1px 2px rgba(0, 0, 0, 0.35); } .theme-switcher-tagline { font-size: 0.7rem; 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: #FAF6F0; border: 1.5px solid #D8CCBA; border-radius: var(--radius-xl); padding: 24px 22px; margin-bottom: 40px; box-shadow: 0 14px 36px rgba(34, 46, 33, 0.08); } .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: 0 2px 4px rgba(0,0,0,0.06); 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: 0.64rem; 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: 0.64rem; 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: 1.55rem; font-weight: 700; color: var(--forest); line-height: 1.22; text-wrap: balance; } .welcome-lede { font-size: 0.88rem; color: #554336; line-height: 1.55; max-width: 580px; margin: 0 auto; text-wrap: pretty; } /* Stylized Topographic Route Map Panel */ .welcome-map-panel { background: #F3ECE0; border: 1.5px solid #CFC0A8; border-radius: var(--radius-md); overflow: hidden; box-shadow: inset 0 2px 6px rgba(0,0,0,0.04); } .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 #DFD2BF; flex-wrap: wrap; gap: 8px; } .map-title-label { font-family: var(--font-mono); font-size: 0.65rem; 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: 0.72rem; 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: #FFFFFF; border: 1px solid #E2D7C7; border-radius: var(--radius-md); padding: 14px 12px; display: flex; gap: 12px; align-items: flex-start; box-shadow: 0 4px 12px rgba(45, 30, 15, 0.03); transition: transform var(--dur-fast) ease, box-shadow var(--dur-fast) ease; } .activity-tile:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(45, 30, 15, 0.08); } .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: 0.94rem; font-weight: 700; color: var(--forest); line-height: 1.25; text-wrap: balance; } .act-desc { font-size: 0.78rem; color: #635345; line-height: 1.45; text-wrap: pretty; } /* Stamp Game Callout Banner */ .stamp-game-banner { background: linear-gradient(135deg, #FFF9F3 0%, #F5EAE0 100%); border: 1.5px dashed #C99076; border-radius: var(--radius-md); padding: 16px 16px; display: flex; align-items: center; gap: 14px; box-shadow: 0 4px 14px rgba(162, 72, 43, 0.06); } .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: 0.62rem; font-weight: 700; color: var(--terracotta); letter-spacing: 0.08em; } .stamp-banner-heading { font-family: var(--font-display); font-size: 1.05rem; font-weight: 700; color: #431E12; line-height: 1.25; text-wrap: balance; } .stamp-banner-text { font-size: 0.78rem; color: #5D4336; 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: 0.75rem; font-weight: 700; padding: 8px 14px; border-radius: var(--radius-sm); border: none; cursor: pointer; flex-shrink: 0; box-shadow: 0 3px 8px rgba(162, 72, 43, 0.25); 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: #FAF7F2; border: 2px solid #D8CEBF; border-radius: var(--radius-xl); padding: 22px 16px; margin-bottom: 48px; box-shadow: 0 8px 24px rgba(0,0,0,0.05); } .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: 1.2rem; font-weight: 700; color: var(--forest); } .passport-book-counter { font-family: var(--font-mono); font-size: 0.72rem; font-weight: 700; background: var(--forest); color: #fff; padding: 3px 9px; border-radius: var(--radius-md); } .passport-book-tagline { font-size: 0.8rem; color: var(--ink-muted); margin-bottom: 14px; } /* Tactile Confidential / Expedition Log Pocket */ .easter-egg-visa-pocket { background: linear-gradient(180deg, #EDE5D8 0%, #E2D7C5 50%, #D8CBB5 100%); border: 2px dashed #9E8166; border-radius: var(--radius-md); padding: 14px 16px; margin-bottom: 22px; cursor: pointer; position: relative; box-shadow: 0 4px 12px rgba(60, 40, 20, 0.08), inset 0 1px 0 rgba(255,255,255,0.6); transition: all var(--dur-base) ease; user-select: none; } .easter-egg-visa-pocket:hover { border-color: var(--terracotta); box-shadow: 0 6px 16px rgba(181, 71, 40, 0.14); } .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: 0.74rem; 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: 0.68rem; 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: #FFFDF9; 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: 0 2px 6px rgba(0,0,0,0.06), inset 0 0 8px rgba(0,0,0,0.03); 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: 0 4px 12px rgba(0,0,0,0.12); } /* 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: #FAF5EC; 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: 0.52rem; 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: 1.15rem; font-weight: 800; line-height: 1; letter-spacing: 0.06em; } .cachet-date { font-family: var(--font-mono); font-size: 0.54rem; 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: 0.58rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.02em; line-height: 1; } .cachet-sub { font-family: var(--font-mono); font-size: 0.48rem; opacity: 0.8; text-transform: uppercase; } .visa-section-label { font-family: var(--font-mono); font-size: 0.66rem; 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: #FFFFFF; border: 1.5px dashed #D0C5B5; 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: #FFF8F5; box-shadow: 0 4px 10px rgba(181, 71, 40, 0.12); } .stamp-sketch-svg { width: 36px; height: 36px; margin-bottom: 6px; stroke: #3D2D20; 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: 0.72rem; 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: 0.5rem; 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: 0 16px 36px rgba(34, 46, 33, 0.12); 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: 0 14px 34px rgba(60, 40, 20, 0.12); } .scenic-vista-card { transition: transform var(--dur-base) ease, box-shadow var(--dur-base) ease; } .scenic-vista-card:hover { transform: translateY(-2px); box-shadow: 0 18px 42px rgba(0, 0, 0, 0.5); } .card-face { background: var(--card-front); border-radius: var(--radius-xl); padding: 22px 18px; box-shadow: 0 10px 30px rgba(34, 46, 33, 0.08); 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), 0 16px 36px rgba(34, 46, 33, 0.15); } .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: #fff; font-family: var(--font-display); font-size: 1rem; font-weight: 700; display: flex; align-items: center; justify-content: center; border: 2px solid #fff; flex-shrink: 0; } .milestone-alt-badge-inline { background: var(--amber); 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 #fff; 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: 0.74rem; 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: 0.64rem; 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: 1.45rem; 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: 0.8rem; color: var(--ink-muted); } .click-meta-link { color: var(--ink-muted); text-decoration: underline; text-decoration-color: #D8CFBF; text-underline-offset: 3px; cursor: pointer; } .polaroid-box { background: #FFFFFF; padding: 8px 8px 30px; border-radius: var(--radius-2xs); box-shadow: 0 6px 18px rgba(0,0,0,0.1); 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: 1.2rem; color: #352B23; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .card-body-text { font-size: 0.92rem; 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: 0.7rem; 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: 0.85rem; 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: #F7F2E9; border: 1px solid #DFD5C4; 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: 0.76rem; font-weight: 700; color: var(--forest); } .thumb-sub { font-size: 0.66rem; color: var(--terracotta); font-weight: 600; } /* Campy Audio Exhibit Box */ .audio-embed-box { border: 1px solid #D6CCBE; 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: 0.82rem; 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: 0.62rem; text-transform: uppercase; font-weight: 700; color: var(--terracotta); } .audio-embed-title { font-family: var(--font-display); font-size: 0.9rem; font-weight: 700; color: var(--forest); } .btn-audio-guide { background: var(--forest); color: #fff; font-family: var(--font-ui); font-size: 0.76rem; 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 #EFEAE0; } .btn-clean-pill { display: inline-flex; align-items: center; gap: 5px; font-size: 0.74rem; font-weight: 700; padding: 6px 12px; border-radius: var(--radius-sm); text-decoration: none; color: var(--forest); background: #FAF7F2; border: 1px solid #DCD2C3; 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: 0.74rem; font-weight: 700; padding: 6px 12px; border-radius: var(--radius-sm); color: #734208; background: var(--amber-light); border: 1px solid #E2C296; 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: 0 10px 28px rgba(60, 40, 20, 0.08); position: relative; transition: transform var(--dur-base) ease, box-shadow var(--dur-base) ease; } .farmstand-trail-card:hover { transform: translateY(-2px); box-shadow: 0 14px 34px rgba(60, 40, 20, 0.13); } /* 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: 0.64rem; 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: 0 1px 3px rgba(0,0,0,0.15); white-space: nowrap; flex-shrink: 0; } .farmstand-tag { font-family: var(--font-mono); font-size: 0.70rem; 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: 1.25rem; 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: 0.76rem; 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: 0 4px 10px rgba(0,0,0,0.1); flex-shrink: 0; cursor: pointer; transition: transform var(--dur-fast) ease; } .farmstand-thumb:hover { transform: scale(1.03); } .farmstand-text { font-size: 0.88rem; 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: 0.76rem; 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: 0 2px 6px rgba(45, 76, 55, 0.2); } .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: 0 14px 34px rgba(0,0,0,0.45); 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: 0 18px 42px rgba(0, 0, 0, 0.55); } /* 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: inset 0 1px 1px rgba(255,255,255,0.4), 0 1px 2px rgba(0,0,0,0.6); 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: 0.64rem; 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: 0 1px 3px rgba(0,0,0,0.3); } .vista-elevation-badge { font-family: var(--font-mono); font-size: 0.70rem; 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: 1.25rem; 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: 0.78rem; 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: 0 4px 12px rgba(0,0,0,0.45); flex-shrink: 0; cursor: pointer; transition: transform var(--dur-fast) ease; } .vista-thumb:hover { transform: scale(1.03); } .vista-text { font-size: 0.88rem; 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: 0.76rem; 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: 0 2px 8px rgba(0,0,0,0.3); } .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, #2D1B10 0%, #170E08 100%); width: 100%; max-width: 580px; border-radius: var(--radius-lg); padding: 10px; box-shadow: 0 24px 60px rgba(0,0,0,0.65); border: 1.5px solid #4A3020; 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: 0 1px 3px rgba(0,0,0,0.6), inset 0 1px 1px rgba(255,255,255,0.4); 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: #FCFAF6; border-radius: var(--radius-md); border: 1.5px solid #D6C8B4; padding: 24px 22px 20px; box-shadow: inset 0 0 16px rgba(184, 163, 135, 0.15); 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 #D6C8B4; padding-bottom: 10px; } .parchment-stamp-seal { font-family: var(--font-mono); font-size: 0.6rem; 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: 1.35rem; color: var(--forest); font-weight: 700; } .close-folio-btn { background: #EAE1D0; border: 1px solid #C5B7A0; border-radius: 50%; width: 32px; height: 32px; cursor: pointer; font-size: 0.95rem; 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: 0.9rem; line-height: 1.6; color: var(--ink); } .parchment-section-title { font-weight: 800; font-size: 0.74rem; 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: rgba(255, 255, 255, 0.75); border: 1px solid #D8CBB6; border-radius: var(--radius-sm); padding: 6px 10px; font-size: 0.82rem; color: #382516; display: flex; align-items: center; gap: 8px; } .packing-pill-tag { font-family: var(--font-mono); font-size: 0.58rem; 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: #F1E9DB; border: 1.5px solid #C8B59B; 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: 0.58rem; font-weight: 800; color: var(--terracotta); letter-spacing: 0.08em; text-transform: uppercase; } .conf-code-val { font-family: var(--font-mono); font-size: 1.05rem; font-weight: 800; color: var(--forest); letter-spacing: 0.06em; user-select: all; } .btn-copy-conf { background: #FFFFFF; border: 1px solid #C8B59B; border-radius: var(--radius-xs); padding: 5px 10px; font-family: var(--font-body); font-size: 0.76rem; 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: #EFE7D8; border-color: var(--terracotta); color: var(--terracotta); } .btn-copy-conf.copied { background: #2D4C37; border-color: #2D4C37; 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: #FFFFFF; border: 1px solid #D8CBB6; 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: 0 4px 12px rgba(181, 71, 40, 0.12); } .voucher-qr-thumb-box { position: relative; width: 48px; height: 48px; background: #FFFFFF; border: 1px solid #D8CBB6; 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: #FDF1ED; color: var(--terracotta); border: 1px solid rgba(181, 71, 40, 0.3); } .pdf-tag { font-family: var(--font-mono); font-size: 0.52rem; font-weight: 800; margin-top: -2px; } .voucher-card-info { display: flex; flex-direction: column; overflow: hidden; } .voucher-card-title { font-weight: 700; font-size: 0.84rem; color: var(--forest); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .voucher-card-sub { font-size: 0.72rem; color: #7A6956; } /* Email Confirmation Drawer */ .voucher-email-box { background: #F7F3EB; border: 1px solid #D8CBB6; border-radius: var(--radius-sm); overflow: hidden; margin: 6px 0 10px; } .voucher-email-header { padding: 8px 12px; background: #EFE8DA; 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: 0.8rem; } .email-toggle-cue { font-family: var(--font-mono); font-size: 0.64rem; color: var(--terracotta); font-weight: 700; } .voucher-email-drawer { padding: 10px 12px; display: none; background: #FAF8F5; border-top: 1px solid #E2D7C5; font-size: 0.8rem; } .voucher-email-box.open .voucher-email-drawer { display: block; } .email-meta-line { font-size: 0.75rem; color: #6B5B49; margin-bottom: 3px; } .email-body-text { white-space: pre-wrap; font-family: var(--font-body); font-size: 0.82rem; line-height: 1.5; color: var(--ink); background: #FFFFFF; padding: 8px 10px; border-radius: var(--radius-xs); border: 1px solid #E4D9C8; margin-top: 6px; } /* ========================================================================== Expedition Scratchpad / Live Editable Notes (Stored Locally) ========================================================================== */ .parchment-scratchpad-block { background: #FAF6EE; border: 1.5px solid #D8CBB6; 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: 0.65rem; font-weight: 800; letter-spacing: 0.08em; color: var(--terracotta); } .scratchpad-status { font-family: var(--font-mono); font-size: 0.62rem; color: #7A6956; transition: color var(--dur-base) ease; } .scratchpad-status.saving { color: var(--gold); } .scratchpad-status.saved { color: #2D6B3C; font-weight: 700; } .scratchpad-textarea { width: 100%; min-height: 80px; max-height: 200px; background: #FFFFFF; border: 1px solid #D0C2AE; border-radius: var(--radius-xs); padding: 8px 10px; font-family: var(--font-body); font-size: 0.85rem; line-height: 1.5; color: #2E2218; resize: vertical; box-shadow: inset 0 1px 3px rgba(0,0,0,0.04); 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: 0.72rem; color: #7A6956; } .scratchpad-tip { font-size: 0.68rem; } .btn-revert-notes { background: none; border: none; font-family: var(--font-mono); font-size: 0.64rem; 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: 0 20px 50px rgba(0,0,0,0.5); } .qr-modal-kicker { font-family: var(--font-mono); font-size: 0.68rem; font-weight: 800; color: var(--terracotta); letter-spacing: 0.08em; text-transform: uppercase; } .qr-modal-title { font-family: var(--font-display); font-size: 1.15rem; color: var(--forest); font-weight: 700; line-height: 1.3; } .qr-modal-img-wrap { width: 240px; height: 240px; background: #FFFFFF; border: 2px solid #E2D7C5; border-radius: var(--radius-md); padding: 10px; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 16px rgba(0,0,0,0.06); } .qr-modal-img { width: 100%; height: 100%; object-fit: contain; } .qr-modal-code { font-family: var(--font-mono); font-size: 1.2rem; font-weight: 800; letter-spacing: 0.08em; color: var(--forest); background: #F4EFE6; padding: 6px 14px; border-radius: var(--radius-sm); } .btn-close-qr-modal { background: #182218; color: #FFFFFF; border: none; border-radius: var(--radius-sm); padding: 10px 24px; font-family: var(--font-body); font-size: 0.85rem; 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%, #EAA21D 55%, #B77502 100%); border: 3px solid #FFFFFF; border-radius: var(--radius-xl); padding: 14px 16px; box-shadow: 0 18px 45px rgba(0,0,0,0.6); 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: #1B1713; border: 2px solid #5C4B33; 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: #221C17; color: #FFE6B0; border: 1px solid #FFE6B0; border-radius: var(--radius-sm); padding: 6px 10px; font-family: var(--font-mono); font-size: 0.7rem; font-weight: 700; cursor: pointer; } .liner-notes-drawer { display: none; background: #FCFAF6; border: 2px dashed #B8A387; border-radius: var(--radius-md); padding: 16px; max-height: 260px; overflow-y: auto; font-size: 0.9rem; line-height: 1.6; } .liner-notes-drawer.open { display: block; } .liner-notes-header { font-family: var(--font-display); font-size: 1.15rem; 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: 0.66rem; 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: inset 0 2px 5px rgba(0,0,0,0.5); } /* --- 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, #273827 0%, #152215 100%); border: 1.5px solid #FFDDA6; border-radius: var(--radius-pill); padding: 7px 15px 7px 10px; box-shadow: 0 8px 24px rgba(0,0,0,0.35), 0 2px 6px rgba(0,0,0,0.2); 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: 0 12px 30px rgba(0,0,0,0.45); border-color: #FFF2D1; } .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: #FFDDA6; 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: 0.58rem; font-weight: 800; color: #FFDDA6; letter-spacing: 0.08em; } .live-compass-title { font-family: var(--font-ui); font-size: 0.76rem; 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: 0.72rem; 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: #EBF2EC; color: #1E4620; border-color: #A3C9A8; display: inline-flex; align-items: center; gap: 5px; } .btn-clean-pill.offline-archive-btn:hover { background: #DCEDDD; border-color: #81B288; } .offline-saved-chip { display: inline-flex; align-items: center; gap: 4px; font-size: 0.68rem; font-weight: 700; color: #2E6835; background: #E8F5E9; padding: 2px 7px; border-radius: var(--radius-xs); border: 1px solid #C8E6C9; } /* 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: #FFFFFF; border-radius: var(--radius-lg); overflow: hidden; box-shadow: 0 24px 70px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.1); } .archive-viewer-header { display: flex; align-items: center; justify-content: space-between; padding: 12px 18px; background: #243423; 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: 0.68rem; font-weight: 700; letter-spacing: 0.08em; color: #D5841D; text-transform: uppercase; display: flex; align-items: center; gap: 6px; } .archive-viewer-title { font-family: var(--font-display); font-size: 1.05rem; font-weight: 700; color: #FFFFFF; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .archive-viewer-url { font-family: var(--font-mono); font-size: 0.72rem; 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: 0.76rem; 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: 1rem; 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; } /* --- Module: schedule.css --- */ /* ========================================================================== Schedule Manager & Control Table Styles ========================================================================== */ .schedule-manager-panel { background: var(--dark-moss, #1A271B); border: 1.5px solid var(--border-gold, #A28458); border-radius: var(--radius-md); margin-top: 20px; padding: 16px; color: var(--parchment-light, #F5EFEB); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25); } .schedule-panel-header { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; } .schedule-panel-tag { font-family: 'Space Mono', monospace; font-size: 0.65rem; letter-spacing: 0.12em; color: var(--terracotta, #D5841D); text-transform: uppercase; display: block; margin-bottom: 2px; } .schedule-panel-heading { font-family: 'Fraunces', serif; font-size: 1.15rem; font-weight: 700; margin: 0; color: #FFF; } .btn-schedule-toggle { background: var(--burnt-orange, #A2482B); color: #FFF; border: none; border-radius: var(--radius-xl); padding: 8px 16px; font-family: 'Plus Jakarta Sans', sans-serif; font-size: 0.82rem; font-weight: 600; cursor: pointer; transition: all var(--dur-fast) ease; display: inline-flex; align-items: center; gap: 6px; } .btn-schedule-toggle:hover { background: #B85333; transform: translateY(-1px); } .schedule-drawer { display: none; margin-top: 16px; border-top: 1px dashed rgba(255, 255, 255, 0.15); 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(--muted-parchment, #C8BDAE); font-style: italic; } .schedule-drawer-btns { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .btn-schedule-sub { background: rgba(255, 255, 255, 0.08); color: var(--parchment-light, #F5EFEB); border: 1px solid rgba(255, 255, 255, 0.2); border-radius: var(--radius-xs); 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: rgba(255, 255, 255, 0.18); } .btn-schedule-sub.warning { border-color: rgba(217, 65, 50, 0.5); color: #FFA197; } .btn-schedule-sub.warning:hover { background: rgba(217, 65, 50, 0.25); } /* 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: 'Space Mono', monospace; font-size: 0.7rem; text-transform: uppercase; color: var(--terracotta, #D5841D); padding: 8px 10px; border-bottom: 1px solid rgba(255, 255, 255, 0.15); } .schedule-table td { padding: 10px; border-bottom: 1px solid rgba(255, 255, 255, 0.07); vertical-align: middle; } .schedule-table tr:hover { background: rgba(255, 255, 255, 0.04); } .day-header-row td { background: rgba(213, 132, 29, 0.15); font-family: 'Fraunces', serif; font-weight: 700; color: var(--terracotta, #D5841D); font-size: 0.9rem; padding: 8px 10px; } .reorder-btns { display: flex; gap: 4px; } .btn-arrow { background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.15); color: #FFF; 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(--terracotta, #D5841D); border-color: var(--terracotta, #D5841D); } .btn-edit-sm { background: rgba(255, 255, 255, 0.12); border: 1px solid rgba(255, 255, 255, 0.2); color: var(--parchment-light, #F5EFEB); 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(--burnt-orange, #A2482B); color: #FFF; border-color: var(--burnt-orange, #A2482B); } .badge-modified { background: #A2482B; color: #FFF; font-size: 0.62rem; padding: 2px 5px; border-radius: var(--radius-3xs); font-family: 'Space Mono', monospace; margin-left: 6px; display: inline-block; } /* Edit Modal Drawer */ .edit-modal-backdrop { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; 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(--dark-moss, #1A271B); border: 2px solid var(--border-gold, #A28458); border-radius: var(--radius-md); width: 100%; max-width: 520px; max-height: 90vh; overflow-y: auto; padding: 20px; color: #FFF; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5); } .edit-modal-header { display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid rgba(255, 255, 255, 0.15); padding-bottom: 12px; margin-bottom: 16px; } .edit-modal-title { font-family: 'Fraunces', serif; font-size: 1.2rem; font-weight: 700; margin: 0; } .btn-close-modal { background: none; border: none; color: #AAA; font-size: 1.3rem; cursor: pointer; } .btn-close-modal:hover { color: #FFF; } .form-group { margin-bottom: 14px; } .form-label { display: block; font-family: 'Space Mono', monospace; font-size: 0.72rem; text-transform: uppercase; color: var(--terracotta, #D5841D); margin-bottom: 5px; } .form-input, .form-textarea { width: 100%; background: rgba(0, 0, 0, 0.3); border: 1px solid rgba(255, 255, 255, 0.2); border-radius: var(--radius-xs); padding: 8px 12px; color: #FFF; font-family: 'Plus Jakarta Sans', sans-serif; font-size: 0.88rem; box-sizing: border-box; } .form-input:focus, .form-textarea:focus { outline: none; border-color: var(--terracotta, #D5841D); background: rgba(0, 0, 0, 0.5); } .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 rgba(255, 255, 255, 0.15); padding-top: 14px; } .btn-save-edit { background: var(--terracotta, #D5841D); color: #FFF; border: none; border-radius: var(--radius-xs); padding: 8px 16px; font-weight: 600; font-size: 0.88rem; cursor: pointer; } .btn-save-edit:hover { background: #E8952E; } .btn-cancel-edit { background: rgba(255, 255, 255, 0.1); color: #CCC; border: none; border-radius: var(--radius-xs); padding: 8px 14px; font-size: 0.88rem; cursor: pointer; } /* History Modal */ .history-modal-card { background: var(--dark-moss, #1A271B); border: 2px solid var(--border-gold, #A28458); border-radius: var(--radius-md); width: 100%; max-width: 600px; max-height: 85vh; overflow-y: auto; padding: 20px; color: #FFF; } .history-item { background: rgba(0, 0, 0, 0.25); border: 1px solid rgba(255, 255, 255, 0.1); 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(--terracotta, #D5841D); margin-bottom: 6px; } .history-item-body { font-size: 0.85rem; color: var(--muted-parchment, #C8BDAE); 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: #182218; color: #FFE6B0; font-family: var(--font-mono); font-size: 0.68rem; 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: 0 4px 12px rgba(0,0,0,0.25); 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: 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: 0 4px 12px rgba(0, 0, 0, 0.05); 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: 0.95rem; color: var(--forest); display: flex; align-items: center; gap: 6px; } .weather-status-tag { font-size: 0.72rem; 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: 2rem; font-weight: 800; color: var(--ink); font-family: var(--font-display); line-height: 1; } .weather-condition-desc { font-size: 0.85rem; color: var(--ink-muted); margin-top: 4px; font-weight: 500; } .weather-metrics-grid { display: flex; gap: 12px; font-size: 0.78rem; 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: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--terracotta); } .transit-time-pill { font-family: var(--font-mono); font-size: 0.75rem; 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: 1.2rem; font-weight: 800; font-family: var(--font-display); color: var(--ink); } .transit-arrow { color: var(--amber); font-size: 1rem; } .transit-details-row { display: flex; justify-content: space-between; font-size: 0.8rem; color: var(--ink-muted); padding-top: 8px; border-top: 1px solid var(--parchment-border); }