/* ========================================================================= The Field Guide - immersive design system (v2, "Worlds") Concept: the page becomes the place. Pick a Disney world and the whole surface re-themes to that park's palette and story. Map-anchored, scan-first, data-shown-not-written. Mobile first. Rules honored: no em or en dashes anywhere, no emoji, light and airy. ========================================================================= */ /* ---- Reset -------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } img, picture, svg { display: block; max-width: 100%; } button, input, textarea { font: inherit; color: inherit; } a { color: inherit; text-decoration: none; } :focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 6px; } /* ---- Base tokens (homepage / neutral premium) -------------------------- */ :root { --ink: #15161B; --ink-soft: #565A66; --ink-mute: #8A8E9B; --paper: #FFFFFF; --wash: #F4F5F8; --line: rgba(21, 22, 27, 0.10); --line-2: rgba(21, 22, 27, 0.16); --accent: #2B6CF0; /* bright, refined blue */ --accent-2: #FFB020; /* gold */ --deep: #10131E; /* cinematic dark section bg */ --tint: rgba(12, 16, 30, 0.40); /* hero photo darkening */ --glow: rgba(43, 108, 240, 0.35); --star-on: var(--accent-2); --star-off: rgba(21, 22, 27, 0.15); --r-s: 12px; --r-m: 20px; --r-l: 30px; --r-xl: 40px; --sh-1: 0 2px 10px rgba(20, 22, 40, 0.06); --sh-2: 0 14px 40px rgba(20, 22, 40, 0.14); --sh-3: 0 30px 80px rgba(16, 19, 40, 0.26); --sans: "Inter", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; --serif: "Fraunces", ui-serif, Georgia, "Times New Roman", serif; --mono: "Space Mono", ui-monospace, SFMono-Regular, Menlo, monospace; --ease: cubic-bezier(.22, .61, .36, 1); --maxw: 1180px; } /* ---- Per-world palettes (set on ) ------------------ */ body[data-park="mk"] { --accent: #FF3E88; --accent-2: #FFC24B; --deep: #241033; --tint: rgba(35, 12, 52, 0.42); --wash: #FFF3F7; --glow: rgba(255, 62, 136, 0.38); } body[data-park="epcot"] { --accent: #12B5CE; --accent-2: #6C5CE0; --deep: #0C2634; --tint: rgba(8, 30, 44, 0.46); --wash: #EEF7FA; --glow: rgba(18, 181, 206, 0.34); } body[data-park="hs"] { --accent: #FF5A34; --accent-2: #7A5CFF; --deep: #190E2B; --tint: rgba(22, 11, 38, 0.46); --wash: #FFF1EC; --glow: rgba(255, 90, 52, 0.36); } body[data-park="ak"] { --accent: #16B98A; --accent-2: #E0A93B; --deep: #0E271E; --tint: rgba(9, 32, 24, 0.44); --wash: #EEF7F0; --glow: rgba(22, 185, 138, 0.34); } /* ---- Page shell -------------------------------------------------------- */ body { font-family: var(--sans); color: var(--ink); background: var(--paper); line-height: 1.6; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; } .wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: 20px; } @media (min-width: 700px) { .wrap { padding-inline: 34px; } } .serif { font-family: var(--serif); font-optical-sizing: auto; } .eyebrow { font-family: var(--mono); font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent); font-weight: 700; display: inline-flex; align-items: center; gap: 9px; } .eyebrow .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px var(--glow); } .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } /* ---- Buttons ----------------------------------------------------------- */ .btn { display: inline-flex; align-items: center; gap: 9px; justify-content: center; padding: 14px 24px; border-radius: 999px; border: 0; cursor: pointer; font-weight: 700; font-size: 15.5px; letter-spacing: 0.005em; transition: transform .25s var(--ease), box-shadow .25s var(--ease), background .25s var(--ease); will-change: transform; } .btn:active { transform: translateY(1px); } .btn-accent { background: var(--accent); color: #fff; box-shadow: 0 10px 26px var(--glow); } .btn-accent:hover { transform: translateY(-2px); box-shadow: 0 18px 40px var(--glow); } .btn-ink { background: var(--ink); color: #fff; } .btn-ink:hover { transform: translateY(-2px); box-shadow: var(--sh-2); } .btn-glass { background: rgba(255, 255, 255, 0.16); color: #fff; border: 1.5px solid rgba(255, 255, 255, 0.55); backdrop-filter: blur(8px); } .btn-glass:hover { background: rgba(255, 255, 255, 0.28); transform: translateY(-2px); } .btn-line { background: transparent; color: var(--ink); border: 1.5px solid var(--line-2); } .btn-line:hover { border-color: var(--accent); color: var(--accent); } .btn .arw { transition: transform .25s var(--ease); } .btn:hover .arw { transform: translateX(4px); } /* ---- Top nav (transparent over hero, solid on scroll) ------------------ */ .nav { position: fixed; inset: 0 0 auto 0; z-index: 60; transition: background .3s var(--ease), box-shadow .3s var(--ease), backdrop-filter .3s var(--ease); } .nav .in { display: flex; align-items: center; justify-content: space-between; height: 68px; } .nav.scrolled { background: rgba(255, 255, 255, 0.86); backdrop-filter: saturate(1.4) blur(14px); box-shadow: 0 1px 0 var(--line); } .brand { display: inline-flex; align-items: center; gap: 11px; font-weight: 800; letter-spacing: -0.01em; color: #fff; } .nav.scrolled .brand { color: var(--ink); } .brand .mk { width: 30px; height: 30px; flex: none; border-radius: 9px; background: linear-gradient(135deg, var(--accent), var(--accent-2)); position: relative; box-shadow: 0 6px 16px var(--glow); } .brand .mk::after { content: ""; position: absolute; inset: 0; margin: auto; width: 15px; height: 15px; background: #fff; clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); } .brand b { font-size: 17px; line-height: 1; } .brand .sub { display: block; font-size: 10.5px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; opacity: .7; margin-top: 3px; font-family: var(--mono); } .nav .links { display: flex; align-items: center; gap: 6px; } .nav .links a { padding: 9px 14px; border-radius: 999px; font-weight: 600; font-size: 14.5px; color: rgba(255, 255, 255, 0.92); transition: background .2s, color .2s; } .nav.scrolled .links a { color: var(--ink-soft); } .nav .links a:hover { background: rgba(255, 255, 255, 0.16); } .nav.scrolled .links a:hover { background: var(--wash); color: var(--ink); } .nav .links a.cta { background: rgba(255,255,255,0.16); border: 1.5px solid rgba(255,255,255,0.5); color: #fff; } .nav.scrolled .links a.cta { background: var(--accent); border-color: var(--accent); color: #fff; } .menu-btn { display: none; width: 42px; height: 42px; border-radius: 12px; background: rgba(255,255,255,0.16); border: 1px solid rgba(255,255,255,0.35); position: relative; cursor: pointer; } .nav.scrolled .menu-btn { background: var(--wash); border-color: var(--line); } .menu-btn span { position: absolute; left: 11px; right: 11px; height: 2px; background: #fff; border-radius: 2px; transition: .25s var(--ease); } .nav.scrolled .menu-btn span { background: var(--ink); } .menu-btn span:nth-child(1) { top: 15px; } .menu-btn span:nth-child(2) { top: 20px; } .menu-btn span:nth-child(3) { top: 25px; } @media (max-width: 820px) { .menu-btn { display: block; } .nav .links { position: absolute; top: 64px; right: 14px; left: 14px; flex-direction: column; align-items: stretch; gap: 4px; background: rgba(255,255,255,0.97); backdrop-filter: blur(16px); border-radius: 18px; padding: 10px; box-shadow: var(--sh-2); transform: translateY(-8px) scale(.98); opacity: 0; pointer-events: none; transition: .22s var(--ease); } .nav .links.open { transform: none; opacity: 1; pointer-events: auto; } .nav .links a, .nav.scrolled .links a { color: var(--ink); padding: 13px 15px; } .nav .links a.cta, .nav.scrolled .links a.cta { background: var(--accent); color: #fff; text-align: center; margin-top: 4px; } } /* ---- Cinematic hero ---------------------------------------------------- */ .hero { position: relative; min-height: 100svh; display: flex; align-items: flex-end; overflow: hidden; color: #fff; } .hero.short { min-height: 82svh; } .hero .bg { position: absolute; inset: 0; background-size: cover; background-position: center; transform: scale(1.08); } .hero .bg.kb { animation: kenburns 26s var(--ease) infinite alternate; } @keyframes kenburns { from { transform: scale(1.06) translate3d(0, 0, 0); } to { transform: scale(1.18) translate3d(-2.2%, -2.4%, 0); } } .hero .scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0.28) 0%, rgba(0,0,0,0) 34%), linear-gradient(0deg, var(--deep) 2%, rgba(0,0,0,0) 60%), var(--tint); } .hero .in { position: relative; z-index: 2; width: 100%; max-width: var(--maxw); margin-inline: auto; padding: 0 20px 46px; } @media (min-width: 700px) { .hero .in { padding: 0 34px 62px; } } .hero h1 { font-family: var(--serif); font-optical-sizing: auto; font-weight: 900; font-size: clamp(2.9rem, 9vw, 6.2rem); line-height: 0.98; letter-spacing: -0.02em; margin: 16px 0 0; text-wrap: balance; text-shadow: 0 4px 40px rgba(0,0,0,0.35); } .hero p.sub { font-size: clamp(1.05rem, 2.4vw, 1.35rem); max-width: 40ch; margin-top: 18px; color: rgba(255,255,255,0.94); } .hero .cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; } .hero .credit { position: absolute; right: 16px; bottom: 14px; z-index: 2; font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.05em; color: rgba(255,255,255,0.7); } /* Hero glance strip (data woven into the hero) */ .glance { display: flex; flex-wrap: wrap; gap: 10px 22px; margin-top: 30px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,0.22); } .glance .g { min-width: 96px; } .glance .g .k { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255,255,255,0.7); } .glance .g .v { font-weight: 700; font-size: 15px; margin-top: 3px; display: flex; align-items: center; gap: 7px; } /* ---- Section scaffolding ----------------------------------------------- */ section { position: relative; } .pad { padding: clamp(56px, 9vw, 118px) 0; } .pad-s { padding: clamp(38px, 6vw, 72px) 0; } .sec-head { max-width: 640px; margin-bottom: clamp(26px, 4vw, 44px); } .sec-head.center { margin-inline: auto; text-align: center; } .sec-head.center .eyebrow { justify-content: center; } .sec-head h2 { font-family: var(--serif); font-weight: 900; font-size: clamp(2rem, 5vw, 3.4rem); line-height: 1.02; letter-spacing: -0.02em; margin-top: 14px; text-wrap: balance; } .sec-head p { color: var(--ink-soft); font-size: clamp(1.02rem, 2vw, 1.18rem); margin-top: 14px; max-width: 54ch; } .sec-head.center p { margin-inline: auto; } .dark { background: var(--deep); color: #fff; } .dark .sec-head p { color: rgba(255,255,255,0.76); } .dark .eyebrow { color: var(--accent-2); } .dark .eyebrow .dot { background: var(--accent-2); } .softbg { background: var(--wash); } /* ---- Choose your world (homepage portals) ------------------------------ */ .worlds { display: grid; grid-template-columns: 1fr; gap: 16px; } @media (min-width: 720px) { .worlds { grid-template-columns: repeat(2, 1fr); gap: 18px; } } .world { position: relative; display: block; border-radius: var(--r-l); overflow: hidden; min-height: 340px; color: #fff; isolation: isolate; box-shadow: var(--sh-1); transition: transform .4s var(--ease), box-shadow .4s var(--ease); } @media (min-width: 720px) { .world.tall { grid-row: span 2; min-height: 100%; } } .world:hover { transform: translateY(-4px); box-shadow: var(--sh-3); } .world .bg { position: absolute; inset: 0; background-size: cover; background-position: center; transform: scale(1.04); transition: transform .7s var(--ease); z-index: -2; } .world:hover .bg { transform: scale(1.12); } .world .veil { position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(0,0,0,0.05) 0%, rgba(0,0,0,0) 30%, var(--w-deep, #241033) 96%); mix-blend-mode: multiply; opacity: 0.92; } .world .veil2 { position: absolute; inset: 0; z-index: -1; background: linear-gradient(200deg, transparent 40%, var(--w-accent, #FF3E88) 140%); opacity: 0.5; } .world .body { position: relative; z-index: 1; display: flex; flex-direction: column; justify-content: flex-end; height: 100%; min-height: 340px; padding: 26px; } .world .tag { font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: #fff; display: inline-flex; align-self: flex-start; align-items: center; gap: 8px; background: transparent; padding: 0; border-radius: 0; text-shadow: 0 1px 10px rgba(0,0,0,0.5); } .world .tag .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--w-accent, #FF3E88); box-shadow: 0 0 0 4px rgba(255,255,255,0.2); } .world h3 { font-family: var(--serif); font-weight: 900; font-size: clamp(1.7rem, 4vw, 2.5rem); line-height: 1; letter-spacing: -0.02em; margin: 12px 0 8px; } .world p { color: rgba(255,255,255,0.9); font-size: 0.98rem; max-width: 34ch; } .world .go { margin-top: 16px; display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: 14.5px; } .world .go .arw { transition: transform .25s var(--ease); } .world:hover .go .arw { transform: translateX(5px); } .world .mini { display: flex; gap: 16px; margin-top: 16px; } .world .mini .k { font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255,255,255,0.7); } .world .mini .v { font-weight: 700; font-size: 13.5px; margin-top: 2px; } /* keep anchored sections clear of the fixed nav on jump */ section[id] { scroll-margin-top: 84px; } /* ---- Real interactive Walt Disney World map (Leaflet) ------------------ */ .mapframe { position: relative; border-radius: var(--r-l); overflow: hidden; box-shadow: var(--sh-1); border: 1px solid var(--line); background: #DCE7EA; } #wdwmap { height: 560px; width: 100%; background: #DCE7EA; } .leaflet-container { font-family: var(--sans); background: #DCE7EA; } .leaflet-fade-anim .leaflet-tile { will-change: opacity; } /* loading shimmer while first tiles arrive */ .map-loading { position: absolute; inset: 0; display: grid; place-items: center; background: #DCE7EA; z-index: 450; transition: opacity .5s ease; } .map-loading span { width: 34px; height: 34px; border-radius: 50%; border: 3px solid rgba(20,40,60,0.15); border-top-color: var(--accent); animation: mspin .8s linear infinite; } .mapframe.ready .map-loading { opacity: 0; pointer-events: none; } @keyframes mspin { to { transform: rotate(360deg); } } /* branded park markers (divIcon) */ .mpin-wrap { background: none; border: 0; } .mpin { position: relative; display: flex; flex-direction: column; align-items: center; } .mpin-dot { width: 46px; height: 46px; border-radius: 50%; background: var(--c, var(--accent)); border: 3px solid #fff; box-shadow: 0 5px 14px rgba(10,22,36,0.34); display: grid; place-items: center; transition: transform .22s var(--ease), box-shadow .22s var(--ease); } .mpin-dot svg { width: 24px; height: 24px; display: block; } .mpin-label { margin-top: 6px; font-weight: 700; font-size: 12.5px; line-height: 1; color: #15161B; background: rgba(255,255,255,0.96); padding: 5px 9px; border-radius: 999px; white-space: nowrap; box-shadow: 0 2px 7px rgba(10,22,36,0.2); } .leaflet-marker-icon:hover .mpin-dot, .leaflet-marker-icon:focus-visible .mpin-dot { transform: translateY(-4px) scale(1.07); box-shadow: 0 10px 22px rgba(10,22,36,0.4); } .leaflet-marker-icon:focus-visible .mpin-dot { outline: none; box-shadow: 0 10px 22px rgba(10,22,36,0.4), 0 0 0 4px #fff, 0 0 0 7px var(--c, var(--accent)); } .leaflet-marker-icon { outline: none !important; } .leaflet-container:focus, .leaflet-container *:focus { outline: none; } /* secondary marker (Disney Springs) */ .mpin.mini .mpin-dot { width: 30px; height: 30px; border-width: 2.5px; } .mpin.mini .mpin-dot svg { width: 15px; height: 15px; } .mpin.mini .mpin-label { font-size: 11px; padding: 4px 8px; color: #3a3d47; } /* rich popup card */ .leaflet-popup-content-wrapper { border-radius: 18px; padding: 0; box-shadow: 0 20px 44px rgba(10,22,36,0.28); overflow: hidden; } .leaflet-popup-content { margin: 0; width: 264px !important; line-height: 1.4; } .leaflet-popup-tip { box-shadow: 0 12px 22px rgba(10,22,36,0.2); } .mpop { --c: var(--accent); } .mpop-img { height: 132px; background-size: cover; background-position: center; position: relative; } .mpop-img::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, rgba(0,0,0,0.42)); } .mpop-eyebrow { position: absolute; left: 14px; bottom: 10px; z-index: 2; font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: #fff; display: inline-flex; align-items: center; gap: 7px; } .mpop-eyebrow::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 2px rgba(255,255,255,0.55); } .mpop-body { padding: 13px 16px 16px; } .mpop-body h3 { font-family: var(--serif); font-size: 21px; font-weight: 600; line-height: 1.05; color: var(--ink); margin: 0 0 5px; } .mpop-body p { font-size: 13px; color: var(--ink-soft); margin: 0 0 12px; } .mpop-meta { display: flex; gap: 14px; margin: 0 0 13px; } .mpop-meta div { font-size: 11px; color: var(--ink-mute); } .mpop-meta .mv { display: block; font-weight: 700; font-size: 13.5px; color: var(--ink); font-family: var(--sans); } .mpop-cta { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: 13.5px; color: #fff; background: var(--c); padding: 9px 15px; border-radius: 999px; transition: filter .2s var(--ease), transform .2s var(--ease); } .mpop-cta:hover { filter: brightness(1.06); transform: translateX(2px); } .leaflet-popup-close-button { width: 30px !important; height: 30px !important; padding: 6px 0 0 !important; font-size: 20px !important; color: #fff !important; text-shadow: 0 1px 4px rgba(0,0,0,0.5); } /* Map / Satellite segmented switch */ .map-switch { position: absolute; top: 14px; right: 14px; z-index: 620; display: inline-flex; background: rgba(255,255,255,0.92); backdrop-filter: blur(8px); border: 1px solid rgba(20,40,60,0.1); border-radius: 999px; padding: 3px; box-shadow: 0 4px 14px rgba(10,22,36,0.18); } .map-switch button { font-family: var(--sans); font-weight: 700; font-size: 12.5px; color: var(--ink-soft); background: none; border: 0; padding: 7px 15px; border-radius: 999px; cursor: pointer; transition: background .2s var(--ease), color .2s var(--ease); } .map-switch button.on { background: var(--ink); color: #fff; } /* Leaflet controls, tuned to brand */ .leaflet-bar { border: 0 !important; box-shadow: 0 4px 14px rgba(10,22,36,0.18) !important; border-radius: 12px !important; overflow: hidden; } .leaflet-bar a { width: 34px !important; height: 34px !important; line-height: 34px !important; color: var(--ink) !important; background: rgba(255,255,255,0.94) !important; font-size: 18px !important; border-bottom: 1px solid rgba(20,40,60,0.08) !important; } .leaflet-bar a:hover { background: #fff !important; color: var(--accent) !important; } .leaflet-control-attribution { background: rgba(255,255,255,0.78) !important; font-size: 10.5px !important; padding: 2px 7px !important; border-radius: 8px 0 0 0; color: #5b6470 !important; } .leaflet-control-attribution a { color: #3a4653 !important; } .map-legend { display: flex; flex-wrap: wrap; gap: 10px 18px; margin-top: 18px; justify-content: center; } .map-legend a, .map-legend .leg { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: 14px; color: var(--ink-soft); } .map-legend .leg { color: var(--ink-mute); } .map-legend .sw { width: 12px; height: 12px; border-radius: 50%; box-shadow: 0 0 0 2px rgba(255,255,255,0.7); } .map-legend a:hover { color: var(--ink); } @media (max-width: 700px) { #wdwmap { height: 440px; } .map-switch { top: 10px; right: 10px; } .map-switch button { padding: 7px 13px; } } /* ---- Trail (sticky scroll map on park pages) --------------------------- */ .parkbody { display: block; } @media (min-width: 1000px) { .parkbody { display: grid; grid-template-columns: 218px 1fr; gap: 46px; align-items: start; } } .trail { display: none; } @media (min-width: 1000px) { .trail { display: block; position: sticky; top: 96px; } .trail .title { font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-mute); margin-bottom: 16px; } .trail ol { list-style: none; position: relative; padding-left: 22px; } .trail ol::before { content: ""; position: absolute; left: 6px; top: 6px; bottom: 6px; width: 2px; background: var(--line-2); border-radius: 2px; } .trail li { position: relative; margin: 2px 0; } .trail a { display: block; padding: 8px 0; font-weight: 600; font-size: 14.5px; color: var(--ink-mute); transition: color .2s, transform .2s var(--ease); } .trail a::before { content: ""; position: absolute; left: -22px; top: 15px; width: 11px; height: 11px; border-radius: 50%; background: var(--paper); border: 2px solid var(--line-2); transition: .25s var(--ease); } .trail a:hover { color: var(--ink); } .trail li.on a { color: var(--ink); transform: translateX(3px); } .trail li.on a::before { background: var(--accent); border-color: var(--accent); box-shadow: 0 0 0 4px var(--glow); } /* The CTA is a .btn, not a trail link: restore flex centering + button padding and drop the trail timeline dot that .trail a would otherwise draw on it. */ .trail .cta-mini { display: inline-flex; justify-content: center; align-items: center; margin-top: 22px; padding: 14px 24px; color: #fff; } .trail .cta-mini::before { content: none; display: none; } } .parkmain { min-width: 0; } .chapter { scroll-margin-top: 92px; padding: clamp(40px, 6vw, 72px) 0; border-top: 1px solid var(--line); } .chapter:first-child { border-top: 0; padding-top: clamp(30px, 4vw, 48px); } .chapter h2 { font-family: var(--serif); font-weight: 900; font-size: clamp(1.7rem, 4vw, 2.7rem); line-height: 1.03; letter-spacing: -0.02em; } .chapter .lead { font-size: clamp(1.08rem, 2.2vw, 1.32rem); color: var(--ink-soft); margin-top: 14px; max-width: 60ch; } .chapter .kicker { margin-bottom: 12px; } /* Mobile chapter strip (horizontal scroll spy) */ .railnav { display: flex; gap: 8px; overflow-x: auto; padding: 12px 20px; position: sticky; top: 68px; z-index: 40; background: rgba(255,255,255,0.9); backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); scrollbar-width: none; } .railnav::-webkit-scrollbar { display: none; } @media (min-width: 1000px) { .railnav { display: none; } } .railnav a { flex: none; padding: 8px 14px; border-radius: 999px; font-weight: 600; font-size: 13.5px; color: var(--ink-soft); background: var(--wash); white-space: nowrap; } .railnav a.on { background: var(--accent); color: #fff; } /* ---- Scan-rhythm blocks ------------------------------------------------ */ .rblock { display: grid; grid-template-columns: 1fr; gap: 18px; align-items: center; margin-top: 26px; } @media (min-width: 720px) { .rblock { grid-template-columns: 1.05fr 1fr; gap: 34px; } .rblock.flip .media { order: 2; } } .rblock .media { border-radius: var(--r-m); overflow: hidden; position: relative; box-shadow: var(--sh-1); aspect-ratio: 4 / 3; } .rblock .media .ph { position: absolute; inset: 0; background-size: cover; background-position: center; transition: transform .8s var(--ease); } .rblock:hover .media .ph { transform: scale(1.05); } .rblock .words .h { font-family: var(--serif); font-weight: 700; font-size: clamp(1.3rem, 3vw, 1.9rem); line-height: 1.08; letter-spacing: -0.01em; } .rblock .words p { color: var(--ink-soft); margin-top: 10px; font-size: 1.04rem; } .rblock .words .tags { margin-top: 14px; } /* Gallery strip (scannable) */ .strip { display: grid; grid-auto-flow: column; grid-auto-columns: 76%; gap: 14px; overflow-x: auto; padding-bottom: 8px; margin-top: 24px; scroll-snap-type: x mandatory; scrollbar-width: none; } .strip::-webkit-scrollbar { display: none; } @media (min-width: 720px) { .strip { grid-auto-columns: 40%; } } @media (min-width: 1000px) { .strip { grid-auto-columns: 31%; } } .shot { position: relative; border-radius: var(--r-m); overflow: hidden; aspect-ratio: 3 / 4; scroll-snap-align: start; box-shadow: var(--sh-1); } .shot .ph { position: absolute; inset: 0; background-size: cover; background-position: center; transition: transform .8s var(--ease); } .shot:hover .ph { transform: scale(1.06); } .shot .cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 14px; color: #fff; background: linear-gradient(0deg, rgba(0,0,0,0.6), transparent); font-weight: 600; font-size: 14px; } .shot .cap small { display: block; font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; opacity: .8; } /* Pull quote */ .pull { margin: 30px 0; padding: 30px 26px; border-radius: var(--r-m); background: var(--wash); border-left: 4px solid var(--accent); } .pull q { font-family: var(--serif); font-weight: 600; font-size: clamp(1.35rem, 3.4vw, 2rem); line-height: 1.2; letter-spacing: -0.01em; quotes: none; } .pull .by { display: block; margin-top: 14px; font-family: var(--mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-mute); } .dark .pull { background: rgba(255,255,255,0.06); } /* Motion moment (cinemagraph via slow zoom on a real photo) */ .film { position: relative; border-radius: var(--r-l); overflow: hidden; aspect-ratio: 16 / 10; box-shadow: var(--sh-2); margin-top: 26px; } .film .ph { position: absolute; inset: 0; background-size: cover; background-position: center; transform: scale(1.05); animation: kenburns 30s var(--ease) infinite alternate; } .film .grade { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(0,0,0,0.5), transparent 55%); } .film .lbl { position: absolute; left: 18px; bottom: 16px; color: #fff; z-index: 2; } .film .lbl .live { display: inline-flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; } .film .lbl .live .rec { width: 8px; height: 8px; border-radius: 50%; background: #fff; animation: pulse 1.8s ease-in-out infinite; } @keyframes pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .4; transform: scale(.8); } } .film .lbl .t { font-family: var(--serif); font-weight: 700; font-size: clamp(1.3rem, 3.4vw, 2rem); margin-top: 6px; } /* Before / after slider (day to night) */ .ba { position: relative; border-radius: var(--r-l); overflow: hidden; aspect-ratio: 16 / 10; box-shadow: var(--sh-2); margin-top: 26px; touch-action: none; user-select: none; } .ba .layer { position: absolute; inset: 0; background-size: cover; background-position: center; } .ba .after { clip-path: inset(0 0 0 var(--split, 50%)); } .ba .tagx { position: absolute; top: 14px; padding: 6px 12px; border-radius: 999px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: #fff; background: rgba(0,0,0,0.4); backdrop-filter: blur(6px); } .ba .tagx.l { left: 14px; } .ba .tagx.r { right: 14px; } .ba .handle { position: absolute; top: 0; bottom: 0; left: var(--split, 50%); width: 3px; background: #fff; box-shadow: 0 0 18px rgba(0,0,0,0.4); transform: translateX(-1.5px); } .ba .grip { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 48px; height: 48px; border-radius: 50%; background: #fff; box-shadow: var(--sh-2); display: flex; align-items: center; justify-content: center; } .ba .grip::before, .ba .grip::after { content: ""; width: 0; height: 0; border-block: 6px solid transparent; } .ba .grip::before { border-right: 8px solid var(--ink); margin-right: 5px; } .ba .grip::after { border-left: 8px solid var(--ink); margin-left: 5px; } /* ---- Data shown, not written ------------------------------------------ */ .meters { display: grid; grid-template-columns: 1fr; gap: 14px; margin-top: 22px; } @media (min-width: 620px) { .meters { grid-template-columns: repeat(2, 1fr); gap: 16px 34px; } } .meter { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-bottom: 12px; border-bottom: 1px solid var(--line); } .meter .k { font-weight: 600; color: var(--ink-soft); } .stars { display: inline-flex; gap: 4px; } .stars .s { width: 16px; height: 16px; background: var(--star-off); clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); } .stars .s.on { background: var(--star-on); } .dark .stars .s { background: rgba(255,255,255,0.2); } .dark .stars .s.on { background: var(--accent-2); } /* Cost panel */ .cost { display: grid; grid-template-columns: 1fr; gap: 12px; margin-top: 24px; } @media (min-width: 620px) { .cost { grid-template-columns: repeat(2, 1fr); gap: 14px 30px; } } .costrow .top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; } .costrow .name { font-weight: 600; } .costrow .amt { font-family: var(--mono); font-weight: 700; font-size: 14px; color: var(--accent); } .dark .costrow .amt { color: var(--accent-2); } .bar { height: 9px; border-radius: 6px; background: var(--line); margin-top: 9px; overflow: hidden; } .dark .bar { background: rgba(255,255,255,0.12); } .bar > i { display: block; height: 100%; border-radius: 6px; background: linear-gradient(90deg, var(--accent), var(--accent-2)); width: var(--w, 50%); } .pricetag { font-family: var(--mono); font-weight: 700; letter-spacing: 0.05em; } .pricetag .off { opacity: 0.3; } /* ---- Place cards (restaurants, hotels, hidden gems) -------------------- */ .cards { display: grid; grid-template-columns: 1fr; gap: 16px; margin-top: 24px; } @media (min-width: 640px) { .cards { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1040px) { .cards.three { grid-template-columns: repeat(3, 1fr); } } .card { border-radius: var(--r-m); overflow: hidden; background: var(--paper); border: 1px solid var(--line); box-shadow: var(--sh-1); transition: transform .3s var(--ease), box-shadow .3s var(--ease); display: flex; flex-direction: column; } .card:hover { transform: translateY(-4px); box-shadow: var(--sh-2); } .card .pic { position: relative; aspect-ratio: 16 / 10; overflow: hidden; } .card .pic .ph { position: absolute; inset: 0; background-size: cover; background-position: center; transition: transform .7s var(--ease); } .card:hover .pic .ph { transform: scale(1.06); } .card .pic .pill { position: absolute; top: 12px; left: 12px; padding: 6px 11px; border-radius: 999px; font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 700; color: #fff; background: rgba(0,0,0,0.42); backdrop-filter: blur(6px); } .card .b { padding: 16px 17px 17px; display: flex; flex-direction: column; flex: 1; } .card .b h4 { font-size: 1.12rem; font-weight: 700; letter-spacing: -0.01em; } .card .b .row { display: flex; align-items: center; gap: 10px; margin-top: 8px; flex-wrap: wrap; } .card .b .rate { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: 14px; } .card .b .muted { color: var(--ink-mute); font-size: 13.5px; } .card .b p { color: var(--ink-soft); font-size: 0.96rem; margin-top: 10px; flex: 1; } .card .b .acts { display: flex; align-items: center; gap: 10px; margin-top: 15px; } .dot-sep { width: 3px; height: 3px; border-radius: 50%; background: var(--ink-mute); } /* Add-to-itinerary chip */ .chip { display: inline-flex; align-items: center; gap: 7px; padding: 9px 15px; border-radius: 999px; font-weight: 700; font-size: 13.5px; cursor: pointer; border: 1.5px solid var(--line-2); background: var(--paper); color: var(--ink); transition: .2s var(--ease); } .chip:hover { border-color: var(--accent); color: var(--accent); } .chip .plus { position: relative; width: 13px; height: 13px; } .chip .plus::before, .chip .plus::after { content: ""; position: absolute; background: currentColor; border-radius: 2px; } .chip .plus::before { left: 5.5px; top: 0; width: 2px; height: 13px; } .chip .plus::after { top: 5.5px; left: 0; height: 2px; width: 13px; } .chip.saved { background: var(--accent); border-color: var(--accent); color: #fff; } .chip.saved .plus { transform: rotate(45deg); } .txtlink { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: 14px; color: var(--accent); } .txtlink .arw { transition: transform .25s var(--ease); } .txtlink:hover .arw { transform: translateX(4px); } /* ---- Tags -------------------------------------------------------------- */ .tags { display: flex; flex-wrap: wrap; gap: 8px; } .tag { padding: 6px 12px; border-radius: 999px; background: var(--wash); font-weight: 600; font-size: 13px; color: var(--ink-soft); } .dark .tag { background: rgba(255,255,255,0.1); color: rgba(255,255,255,0.85); } /* ---- Insider tips (expandable) ---------------------------------------- */ .tips { margin-top: 22px; border-top: 1px solid var(--line); } .tip { border-bottom: 1px solid var(--line); } .tip summary { list-style: none; cursor: pointer; padding: 18px 4px; display: flex; align-items: center; gap: 14px; font-weight: 700; font-size: 1.06rem; } .tip summary::-webkit-details-marker { display: none; } .tip summary .n { font-family: var(--mono); font-size: 13px; color: var(--accent); font-weight: 700; flex: none; } .tip summary .ic { margin-left: auto; position: relative; width: 16px; height: 16px; flex: none; transition: transform .25s var(--ease); } .tip summary .ic::before, .tip summary .ic::after { content: ""; position: absolute; background: var(--ink); border-radius: 2px; } .tip summary .ic::before { left: 7px; top: 0; width: 2px; height: 16px; } .tip summary .ic::after { top: 7px; left: 0; height: 2px; width: 16px; } .tip[open] summary .ic { transform: rotate(45deg); } .tip .body { padding: 0 4px 20px 34px; color: var(--ink-soft); font-size: 1.02rem; } /* ---- Animated statistics ---------------------------------------------- */ .stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 4px 20px; } @media (min-width: 760px) { .stats { grid-template-columns: repeat(4, 1fr); } } .stat { padding: 22px 6px; text-align: center; } .stat .num { font-family: var(--serif); font-weight: 900; font-size: clamp(2.6rem, 7vw, 4.4rem); line-height: 1; letter-spacing: -0.02em; background: linear-gradient(135deg, var(--accent), var(--accent-2)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .stat .lab { font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-mute); margin-top: 8px; } .dark .stat .lab { color: rgba(255,255,255,0.66); } /* ---- Convert band (the professional pull into chat) -------------------- */ .convert { position: relative; border-radius: var(--r-xl); overflow: hidden; color: #fff; padding: clamp(40px, 6vw, 76px) clamp(26px, 5vw, 64px); box-shadow: var(--sh-3); } .convert .bg { position: absolute; inset: 0; z-index: -2; background: linear-gradient(135deg, var(--deep), color-mix(in srgb, var(--accent) 45%, var(--deep))); } .convert .ph { position: absolute; inset: 0; z-index: -1; background-size: cover; background-position: center; opacity: 0.24; mix-blend-mode: screen; } .convert .in { position: relative; max-width: 640px; } .convert .eyebrow { color: #fff; } .convert .eyebrow .dot { background: #fff; box-shadow: 0 0 0 4px rgba(255,255,255,0.25); } .convert h2 { font-family: var(--serif); font-weight: 900; font-size: clamp(1.9rem, 5vw, 3.2rem); line-height: 1.02; letter-spacing: -0.02em; margin-top: 14px; text-wrap: balance; } .convert p { color: rgba(255,255,255,0.9); font-size: clamp(1.02rem, 2.2vw, 1.2rem); margin-top: 14px; } .convert .cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; } .convert .trust { margin-top: 20px; display: flex; align-items: center; gap: 10px; font-size: 13.5px; color: rgba(255,255,255,0.82); } .convert .trust .live { width: 9px; height: 9px; border-radius: 50%; background: #35E08A; box-shadow: 0 0 0 4px rgba(53,224,138,0.28); } /* ---- Email capture (earned, not gated) -------------------------------- */ .capture { display: grid; grid-template-columns: 1fr; gap: 22px; align-items: center; padding: clamp(28px, 4vw, 44px); border-radius: var(--r-l); background: var(--wash); border: 1px solid var(--line); } @media (min-width: 780px) { .capture { grid-template-columns: 1.1fr 1fr; gap: 40px; } } .capture h3 { font-family: var(--serif); font-weight: 800; font-size: clamp(1.5rem, 3.4vw, 2.1rem); letter-spacing: -0.01em; } .capture p { color: var(--ink-soft); margin-top: 10px; } .field { display: flex; gap: 10px; flex-wrap: wrap; } .field input { flex: 1; min-width: 200px; padding: 15px 18px; border-radius: 999px; border: 1.5px solid var(--line-2); background: var(--paper); font-size: 15px; } .field input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px var(--glow); } .fine { font-size: 12.5px; color: var(--ink-mute); margin-top: 10px; } /* ---- Crumb ------------------------------------------------------------- */ .crumb { display: flex; align-items: center; gap: 9px; font-size: 13.5px; color: var(--ink-mute); font-weight: 600; padding-top: 88px; } .crumb a:hover { color: var(--accent); } .crumb .sep { opacity: 0.5; } /* ---- Footer ------------------------------------------------------------ */ .foot { background: var(--deep); color: rgba(255,255,255,0.8); padding: 54px 0 40px; } .foot .ftop { display: flex; flex-wrap: wrap; gap: 22px; justify-content: space-between; align-items: center; padding-bottom: 26px; border-bottom: 1px solid rgba(255,255,255,0.12); } .foot .brand { color: #fff; } .foot nav { display: flex; flex-wrap: wrap; gap: 8px 20px; } .foot nav a { font-weight: 600; font-size: 14.5px; color: rgba(255,255,255,0.8); } .foot nav a:hover { color: #fff; } .foot .disc { font-size: 12px; line-height: 1.7; color: rgba(255,255,255,0.5); margin-top: 24px; max-width: 78ch; } /* ---- Floating ask + toast --------------------------------------------- */ .float-ask { position: fixed; right: 18px; bottom: 18px; z-index: 70; display: inline-flex; align-items: center; gap: 10px; padding: 14px 20px; border-radius: 999px; background: var(--ink); color: #fff; font-weight: 700; font-size: 14.5px; box-shadow: var(--sh-2); transition: transform .25s var(--ease); } .float-ask:hover { transform: translateY(-3px); } .float-ask .g { width: 9px; height: 9px; border-radius: 50%; background: #35E08A; box-shadow: 0 0 0 4px rgba(53,224,138,0.3); } @media (max-width: 560px) { .float-ask .lbl { display: none; } .float-ask { padding: 15px; } } .toast { position: fixed; left: 50%; bottom: 26px; transform: translate(-50%, 20px); z-index: 90; background: var(--ink); color: #fff; padding: 13px 20px; border-radius: 14px; font-weight: 600; font-size: 14.5px; box-shadow: var(--sh-2); opacity: 0; pointer-events: none; transition: .3s var(--ease); max-width: 90vw; } .toast.show { opacity: 1; transform: translate(-50%, 0); } /* ---- Saved-picks tray ------------------------------------------------- */ .fg-tray { position: fixed; right: 18px; bottom: 18px; z-index: 80; display: flex; flex-direction: column; align-items: flex-end; gap: 10px; } .fg-tray-toggle { display: inline-flex; align-items: center; gap: 9px; padding: 13px 18px; border: 0; border-radius: 999px; background: var(--ink); color: #fff; font-family: var(--sans); font-weight: 700; font-size: 14.5px; cursor: pointer; box-shadow: var(--sh-2); transition: transform .25s var(--ease); } .fg-tray-toggle:hover { transform: translateY(-3px); } .fg-tray-mk { width: 9px; height: 9px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px var(--glow); } .fg-tray-n { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px; background: var(--accent); color: #fff; font-size: 12.5px; font-weight: 800; } .fg-tray-panel { width: min(340px, 86vw); background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-m); box-shadow: var(--sh-2); overflow: hidden; } .fg-tray-head { display: flex; align-items: center; justify-content: space-between; padding: 15px 16px 11px; font-weight: 800; font-size: 15.5px; color: var(--ink); border-bottom: 1px solid var(--line); } .fg-tray-close { border: 0; background: none; font-size: 22px; line-height: 1; color: var(--ink-mute); cursor: pointer; padding: 0 2px; } .fg-tray-close:hover { color: var(--ink); } .fg-tray-list { max-height: min(46vh, 360px); overflow-y: auto; padding: 6px 16px 4px; } .fg-grp { padding: 9px 0; } .fg-grp + .fg-grp { border-top: 1px solid var(--line); } .fg-grp-h { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); font-weight: 700; margin-bottom: 6px; } .fg-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 5px 0; } .fg-row-n { font-size: 14px; font-weight: 600; color: var(--ink); } .fg-row-x { flex: none; width: 22px; height: 22px; border: 1px solid var(--line-2); border-radius: 50%; background: var(--paper); color: var(--ink-mute); font-size: 15px; line-height: 1; cursor: pointer; transition: .2s var(--ease); } .fg-row-x:hover { border-color: var(--accent); color: var(--accent); } .fg-tray-cta { display: flex; align-items: center; justify-content: center; gap: 7px; margin: 6px 14px 14px; padding: 13px 16px; border-radius: 999px; background: var(--accent); color: #fff; font-weight: 800; font-size: 14.5px; box-shadow: 0 10px 26px var(--glow); transition: transform .2s var(--ease); } .fg-tray-cta:hover { transform: translateY(-2px); } .fg-tray-cta .arw { transition: transform .25s var(--ease); } .fg-tray-cta:hover .arw { transform: translateX(4px); } @media (max-width: 560px) { .fg-tray { right: 12px; bottom: 12px; } } @media (prefers-reduced-motion: reduce) { .fg-tray-toggle:hover, .fg-tray-cta:hover { transform: none; } } /* ========================================================================= Live "right now" section: glance stat cards + weather + live ride map. Powered by guide-live.js / guide-glance.js / guide-park-map.js. Real, current park data pulled straight into the guide. Premium, calm, colour-coded. No em dashes, no emoji. ========================================================================= */ /* ---- Section frame ----------------------------------------------------- */ .live-now .live-badge { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 14px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); font-weight: 700; } .live-now .live-badge::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 0 var(--glow); animation: livePulse 2.2s var(--ease) infinite; } @keyframes livePulse { 0% { box-shadow: 0 0 0 0 var(--glow); } 70% { box-shadow: 0 0 0 9px rgba(0,0,0,0); } 100% { box-shadow: 0 0 0 0 rgba(0,0,0,0); } } /* ---- Glance stat cards ------------------------------------------------- */ #glance { display: block; margin: 4px 0 22px; } .glance-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin: 0 0 16px; } .gcard { position: relative; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-m); padding: 18px 18px 16px; box-shadow: var(--sh-1); overflow: hidden; transition: transform .25s var(--ease), box-shadow .25s var(--ease); } .gcard::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--gc, var(--accent)); opacity: 0.9; } .gcard:hover { transform: translateY(-3px); box-shadow: var(--sh-2); } .gcard-l { display: block; font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-mute); margin-bottom: 9px; } .gcard-b { display: block; font-family: var(--serif); font-weight: 600; font-size: clamp(22px, 3.4vw, 30px); line-height: 1; color: var(--ink); letter-spacing: -0.01em; } .gcard-b i { font-style: normal; font-family: var(--sans); font-size: 0.5em; font-weight: 700; color: var(--ink-mute); margin-left: 2px; } .gcard-s { display: block; margin-top: 8px; font-size: 12.5px; color: var(--ink-soft); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Skeletons */ .gcard.is-sk { min-height: 96px; } .gsk-l, .gsk-b { display: block; border-radius: 7px; background: linear-gradient(100deg, var(--wash) 30%, rgba(255,255,255,0.65) 50%, var(--wash) 70%); background-size: 220% 100%; animation: gsh 1.3s linear infinite; } .gsk-l { width: 52%; height: 11px; margin-bottom: 14px; } .gsk-b { width: 74%; height: 24px; } @keyframes gsh { to { background-position: -220% 0; } } /* ---- Weather strip ----------------------------------------------------- */ .wx-strip { display: flex; align-items: stretch; gap: 18px; flex-wrap: wrap; background: linear-gradient(180deg, var(--wash), var(--paper)); border: 1px solid var(--line); border-radius: var(--r-m); padding: 16px 18px; box-shadow: var(--sh-1); } .wx-strip.is-loading { min-height: 80px; } .wx-sk { width: 100%; height: 48px; border-radius: 10px; background: linear-gradient(100deg, var(--wash) 30%, rgba(255,255,255,0.6) 50%, var(--wash) 70%); background-size: 220% 100%; animation: gsh 1.3s linear infinite; } .wx-now { display: flex; align-items: center; gap: 12px; padding-right: 18px; border-right: 1px solid var(--line); } .wx-now-ic { width: 42px; height: 42px; color: var(--accent); flex: none; } .wx-now-t { font-family: var(--serif); font-weight: 600; font-size: 34px; line-height: 1; color: var(--ink); } .wx-now-t i { font-style: normal; font-size: 0.42em; color: var(--ink-mute); vertical-align: super; margin-left: 1px; } .wx-now-l { display: flex; flex-direction: column; font-size: 13px; font-weight: 600; color: var(--ink); } .wx-now-l em { font-style: normal; font-size: 11.5px; font-weight: 500; color: var(--ink-mute); margin-top: 2px; } .wx-days { display: flex; gap: 6px; flex: 1; min-width: 0; overflow-x: auto; padding-bottom: 2px; -webkit-overflow-scrolling: touch; } .wx-day { flex: 1 0 auto; min-width: 58px; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 6px 8px; border-radius: var(--r-s); text-align: center; } .wx-day.is-today { background: rgba(0,0,0,0.03); } .wx-dow { font-size: 11px; font-weight: 700; color: var(--ink-soft); text-transform: uppercase; letter-spacing: 0.04em; } .wx-ic { width: 26px; height: 26px; color: var(--ink-soft); } .wx-hi { font-size: 14px; font-weight: 700; color: var(--ink); } .wx-lo { font-size: 12px; color: var(--ink-mute); } .wx-pop { font-size: 10.5px; font-weight: 700; color: var(--accent); } /* ---- Live map toolbar -------------------------------------------------- */ .live-mapwrap { margin-top: 4px; } .lm-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 12px; flex-wrap: wrap; } .lm-filters { display: inline-flex; background: var(--wash); border: 1px solid var(--line); border-radius: 999px; padding: 3px; } .lm-filters button { font-family: var(--sans); font-weight: 700; font-size: 12.5px; color: var(--ink-soft); background: none; border: 0; padding: 8px 15px; border-radius: 999px; cursor: pointer; transition: background .2s var(--ease), color .2s var(--ease); } .lm-filters button.on { background: var(--accent); color: #fff; box-shadow: 0 3px 10px var(--glow); } .lm-meta { display: inline-flex; align-items: center; gap: 14px; font-size: 12px; color: var(--ink-mute); } .lm-count { font-weight: 700; color: var(--ink-soft); } .lm-fresh { display: inline-flex; align-items: center; gap: 7px; } .lm-fresh::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #16B98A; box-shadow: 0 0 0 3px rgba(22,185,138,0.2); } .lm-refresh { font-family: var(--sans); font-weight: 700; font-size: 12px; color: var(--accent); background: none; border: 0; cursor: pointer; padding: 4px 2px; } .lm-refresh:hover { text-decoration: underline; } /* Live map is a bit taller than the overview. */ .live-mapwrap .mapframe { height: 460px; } @media (max-width: 720px) { .live-mapwrap .mapframe { height: 380px; } } #livemap { position: absolute; inset: 0; } /* ---- Live ride pins ---------------------------------------------------- */ .rpin-wrap { background: none; border: 0; } .rpin { position: relative; display: block; width: 40px; height: 48px; } .rpin-badge { position: absolute; left: 50%; top: 0; transform: translateX(-50%); min-width: 34px; height: 34px; padding: 0 4px; border-radius: 999px; background: var(--c, var(--accent)); border: 2.5px solid #fff; box-shadow: 0 5px 13px rgba(10,22,36,0.32); display: flex; flex-direction: column; align-items: center; justify-content: center; color: #fff; line-height: 1; transition: transform .2s var(--ease), box-shadow .2s var(--ease); } .rpin-badge b { font-size: 14px; font-weight: 800; letter-spacing: -0.02em; } .rpin-badge i { font-style: normal; font-size: 7.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; opacity: 0.9; margin-top: -1px; } .rpin-stem { position: absolute; left: 50%; top: 30px; transform: translateX(-50%); width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 9px solid var(--c, var(--accent)); filter: drop-shadow(0 3px 3px rgba(10,22,36,0.24)); } .rpin.saved .rpin-badge { box-shadow: 0 5px 13px rgba(10,22,36,0.32), 0 0 0 3px #fff, 0 0 0 6px var(--accent-2); } .leaflet-marker-icon:hover .rpin-badge, .leaflet-marker-icon:focus-visible .rpin-badge { transform: translateX(-50%) translateY(-4px) scale(1.09); box-shadow: 0 11px 22px rgba(10,22,36,0.4); } .leaflet-marker-icon:focus-visible .rpin-badge { outline: none; box-shadow: 0 11px 22px rgba(10,22,36,0.4), 0 0 0 3px #fff, 0 0 0 6px var(--c, var(--accent)); } /* ---- Live ride popup --------------------------------------------------- */ .rpop-wrap .leaflet-popup-content { width: 224px !important; } .rpop { --c: var(--accent); } .rpop-status { background: var(--c); color: #fff; padding: 11px 15px 10px; font-size: 12.5px; font-weight: 500; } .rpop-status b { font-weight: 800; } .rpop h4 { font-family: var(--serif); font-size: 17px; font-weight: 600; line-height: 1.12; color: var(--ink); margin: 0; padding: 12px 15px 10px; } .rpop-actions { display: flex; gap: 8px; padding: 0 15px 14px; } .rpop-save { flex: 1; font-family: var(--sans); font-weight: 700; font-size: 12.5px; color: var(--ink); background: var(--wash); border: 1px solid var(--line); border-radius: 999px; padding: 8px 10px; cursor: pointer; transition: background .18s var(--ease), color .18s var(--ease); } .rpop-save[aria-pressed="true"] { background: var(--accent-2); border-color: var(--accent-2); color: #3a2b00; } .rpop-ask { flex: 1.2; text-align: center; font-family: var(--sans); font-weight: 700; font-size: 12.5px; color: #fff; background: var(--accent); border-radius: 999px; padding: 8px 10px; transition: filter .18s var(--ease); } .rpop-ask:hover { filter: brightness(1.07); } /* ---- Legend ------------------------------------------------------------ */ .lm-legend { position: absolute; left: 12px; bottom: 12px; z-index: 620; display: flex; flex-wrap: wrap; gap: 5px 12px; background: rgba(255,255,255,0.94); backdrop-filter: blur(8px); border: 1px solid rgba(20,40,60,0.1); border-radius: 12px; padding: 9px 12px; box-shadow: 0 4px 14px rgba(10,22,36,0.16); max-width: min(340px, calc(100% - 24px)); } .lm-legend span { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 600; color: var(--ink-soft); } .lm-legend span::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--lc); border: 1.5px solid #fff; box-shadow: 0 1px 3px rgba(10,22,36,0.3); } @media (max-width: 560px) { .lm-legend { display: none; } } /* ---- Responsive glance ------------------------------------------------- */ @media (max-width: 860px) { .glance-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 720px) { .wx-now { border-right: 0; padding-right: 0; width: 100%; } } @media (max-width: 420px) { .glance-grid { grid-template-columns: 1fr 1fr; gap: 10px; } .gcard { padding: 14px 14px 12px; } } @media (prefers-reduced-motion: reduce) { .live-now .live-badge::before, .gsk-l, .gsk-b, .wx-sk { animation: none; } .gcard:hover { transform: none; } } /* ---- Reveal on scroll -------------------------------------------------- */ .reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s var(--ease), transform .7s var(--ease); } .reveal.on { opacity: 1; transform: none; } .reveal.d1 { transition-delay: .06s; } .reveal.d2 { transition-delay: .12s; } .reveal.d3 { transition-delay: .18s; } .reveal.d4 { transition-delay: .24s; } @media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } .hero .bg.kb, .film .ph, .film .lbl .live .rec, .float-ask .g, .convert .trust .live { animation: none !important; } } /* ========================================================================= Polish kit: liquid-glass surface, tactile press feedback, reusable skeleton, auto-stagger reveal. Additive utilities used by the live cost widget, the upgraded collection tray, and the day plan board. ========================================================================= */ :root { --glass-bg: linear-gradient(135deg, rgba(255,255,255,0.78), rgba(255,255,255,0.56)); --glass-edge: rgba(255,255,255,0.7); --glass-hi: inset 0 1px 0 rgba(255,255,255,0.85); --glass-sh: 0 1px 2px rgba(20,22,40,0.05), 0 16px 38px -18px rgba(16,19,40,0.30); --glass-sh-hover: 0 2px 6px rgba(20,22,40,0.07), 0 26px 60px -20px rgba(16,19,40,0.36); } .glass { background: var(--glass-bg); border: 1px solid var(--glass-edge); box-shadow: var(--glass-hi), var(--glass-sh); -webkit-backdrop-filter: blur(14px) saturate(1.3); backdrop-filter: blur(14px) saturate(1.3); border-radius: var(--r-m); } /* Tactile press feedback across interactive elements. */ .btn:active, .chip:active, [data-press]:active, .lm-filters button:active, .lm-refresh:active, .fg-step:active, .fg-seg button:active, .fg-optchip:active { transform: scale(0.97); transition-duration: 80ms; } .card:active, .world:active, .gcard:active { transform: scale(0.99); } /* Reusable shimmer skeleton (colour-transparent so text height is preserved). */ .fg-skel { background: linear-gradient(90deg, var(--wash) 0%, #fff 50%, var(--wash) 100%); background-size: 200% 100%; animation: fgsh 1.5s linear infinite; border-radius: var(--r-s); color: transparent !important; } @keyframes fgsh { from { background-position: 200% 0; } to { background-position: -200% 0; } } /* Auto-stagger: any .reveal.stagger container cascades its direct children. */ .reveal.stagger.on > * { animation: fgRise .6s var(--ease) both; } .reveal.stagger.on > *:nth-child(1) { animation-delay: .04s; } .reveal.stagger.on > *:nth-child(2) { animation-delay: .10s; } .reveal.stagger.on > *:nth-child(3) { animation-delay: .16s; } .reveal.stagger.on > *:nth-child(4) { animation-delay: .22s; } .reveal.stagger.on > *:nth-child(5) { animation-delay: .28s; } .reveal.stagger.on > *:nth-child(6) { animation-delay: .34s; } @keyframes fgRise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { .fg-skel { animation: none; } .btn:active, .chip:active, [data-press]:active, .card:active, .world:active, .gcard:active { transform: none; } .reveal.stagger.on > * { animation: none; } } /* ========================================================================= Live cost estimator (guide-cost.js), mounted in the #cost chapter. ========================================================================= */ #fg-cost { margin: 4px 0 20px; } .fg-cost { padding: 22px 22px 18px; } .fg-cost-controls { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px 22px; margin-bottom: 16px; } .fg-ctrl { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .fg-ctrl-l { font-size: 13.5px; font-weight: 600; color: var(--ink-soft); } .fg-stepper { display: inline-flex; align-items: center; background: var(--wash); border: 1px solid var(--line); border-radius: 999px; padding: 3px; } .fg-step { width: 30px; height: 30px; border: 0; background: var(--paper); border-radius: 50%; font-size: 18px; font-weight: 700; line-height: 1; color: var(--accent); cursor: pointer; box-shadow: var(--sh-1); transition: transform .12s var(--ease), filter .15s var(--ease); } .fg-step:hover { filter: brightness(1.04); } .fg-stepval { min-width: 34px; text-align: center; font-family: var(--mono); font-weight: 700; font-size: 15px; color: var(--ink); } .fg-seg { display: inline-flex; background: var(--wash); border: 1px solid var(--line); border-radius: 999px; padding: 3px; } .fg-seg button { font-family: var(--sans); font-weight: 700; font-size: 12px; color: var(--ink-soft); background: none; border: 0; padding: 7px 12px; border-radius: 999px; cursor: pointer; transition: background .18s var(--ease), color .18s var(--ease); } .fg-seg button.on { background: var(--accent); color: #fff; } .fg-optchips { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 18px; } .fg-optchip { display: inline-flex; align-items: center; gap: 9px; font-family: var(--sans); font-weight: 700; font-size: 13px; color: var(--ink-soft); background: var(--paper); border: 1px solid var(--line); border-radius: 999px; padding: 8px 15px 8px 10px; cursor: pointer; transition: border-color .18s var(--ease), background .18s var(--ease), color .18s var(--ease); } .fg-optchip-box { width: 18px; height: 18px; border-radius: 6px; border: 2px solid var(--line-2); position: relative; transition: background .18s var(--ease), border-color .18s var(--ease); } .fg-optchip.on { border-color: var(--accent); color: var(--ink); } .fg-optchip.on .fg-optchip-box { background: var(--accent); border-color: var(--accent); } .fg-optchip.on .fg-optchip-box::after { content: ""; position: absolute; left: 5px; top: 1px; width: 5px; height: 10px; border: solid #fff; border-width: 0 2.5px 2.5px 0; transform: rotate(42deg); } .fg-cost-out { border-top: 1px solid var(--line); padding-top: 16px; } .fg-cost-total { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px; margin-bottom: 14px; } .fg-cost-total-l { font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-mute); width: 100%; } .fg-cost-total-b .fg-sym { font-family: var(--sans); font-weight: 600; font-size: 22px; color: var(--ink-soft); vertical-align: super; margin-right: 1px; } .fg-cost-total-b .fg-int { font-family: var(--mono); font-weight: 700; font-size: clamp(34px, 6vw, 46px); letter-spacing: -0.02em; color: var(--ink); } .fg-substats { display: inline-flex; gap: 14px; } .fg-substat { font-size: 13px; color: var(--ink-soft); } .fg-substat .fg-sym { font-weight: 700; color: var(--ink); } .fg-substat .fg-int { font-family: var(--mono); font-weight: 700; color: var(--ink); } .fg-substat i { font-style: normal; color: var(--ink-mute); font-size: 11.5px; } .fg-costbar { display: flex; height: 10px; border-radius: 999px; overflow: hidden; gap: 3px; margin-bottom: 16px; background: var(--wash); } .fg-costbar > i { display: block; min-width: 3px; transition: flex .5s var(--ease); } .fg-catrows { display: flex; flex-direction: column; gap: 10px; } .fg-catrow { display: grid; grid-template-columns: 14px 1fr 90px auto; align-items: center; gap: 10px; } .fg-cat-dot { width: 10px; height: 10px; border-radius: 50%; } .fg-cat-name { font-size: 13.5px; font-weight: 600; color: var(--ink); } .fg-cat-track { height: 6px; border-radius: 999px; background: var(--wash); overflow: hidden; } .fg-cat-track > i { display: block; height: 100%; border-radius: 999px; transition: width .6s var(--ease); } .fg-cat-amt { text-align: right; } .fg-cat-amt .fg-sym { font-size: 12px; color: var(--ink-mute); } .fg-cat-amt .fg-int { font-family: var(--mono); font-weight: 700; font-size: 14px; color: var(--ink); } .fg-cost-note { margin-top: 16px; font-size: 12.5px; color: var(--ink-mute); line-height: 1.5; } @media (max-width: 560px) { .fg-cost-controls { grid-template-columns: 1fr; } .fg-catrow { grid-template-columns: 12px 1fr auto; } .fg-catrow .fg-cat-track { display: none; } } /* ========================================================================= Collection tray upgrade: progress bar, count pills, status checkboxes, best-effort live wait badges (guide.js tray render + guide-store status). ========================================================================= */ .fg-tray-prog { padding: 12px 16px 8px; } .fg-tray-prog-t { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 7px; } .fg-prog-lbl { font-size: 12.5px; font-weight: 600; color: var(--ink-soft); } .fg-prog-pct { font-family: var(--mono); font-weight: 700; font-size: 12.5px; color: var(--accent); } .fg-prog-bar { height: 7px; border-radius: 999px; background: var(--wash); overflow: hidden; } .fg-prog-bar > i { display: block; height: 100%; border-radius: 999px; background: var(--accent); box-shadow: 0 0 8px var(--glow); transition: width .5s var(--ease); } .fg-tray-prog.done .fg-prog-bar > i { background: linear-gradient(90deg, #16B98A, #4FD1A0); box-shadow: 0 0 10px rgba(22,185,138,0.5); } .fg-tray-prog.done .fg-prog-pct { color: #16B98A; } .fg-grp-h { display: flex; align-items: center; justify-content: space-between; } .fg-grp-n { font-family: var(--mono); font-weight: 700; font-size: 11px; color: var(--ink-mute); background: var(--wash); border-radius: 999px; padding: 2px 8px; } .fg-row { justify-content: flex-start; gap: 9px; } .fg-row-n { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .fg-row-check { flex: none; width: 22px; height: 22px; border: 2px solid var(--line-2); border-radius: 7px; background: var(--paper); cursor: pointer; position: relative; padding: 0; transition: background .18s var(--ease), border-color .18s var(--ease); } .fg-row-check .fg-check-tick { position: absolute; left: 6px; top: 2px; width: 5px; height: 10px; border: solid #fff; border-width: 0 2.5px 2.5px 0; transform: rotate(42deg) scale(0); transition: transform .2s var(--ease); } .fg-row-check[aria-pressed="true"] { background: #16B98A; border-color: #16B98A; } .fg-row-check[aria-pressed="true"] .fg-check-tick { transform: rotate(42deg) scale(1); } .fg-row.is-done .fg-row-n { color: var(--ink-mute); text-decoration: line-through; text-decoration-color: var(--line-2); } .fg-row-wait { flex: none; font-family: var(--mono); font-weight: 700; font-size: 10.5px; color: #fff; background: var(--wc, #8A8E9B); border-radius: 999px; padding: 3px 7px; opacity: 0; transition: opacity .3s var(--ease); white-space: nowrap; } .fg-row-wait:empty { padding: 0; } .fg-row-wait.on { opacity: 1; } @media (prefers-reduced-motion: reduce) { .fg-prog-bar > i, .fg-row-check .fg-check-tick, .fg-row-wait { transition: none; } } /* ========================================================================= Day plan board (guide-dayplan.js), mounted in plan.html. ========================================================================= */ .fg-dp-board { display: flex; gap: 16px; overflow-x: auto; padding: 4px 2px 14px; -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity; } .fg-dp-col { flex: 0 0 clamp(240px, 78vw, 300px); scroll-snap-align: start; background: var(--wash); border: 1px solid var(--line); border-radius: var(--r-m); padding: 14px; transition: background .18s var(--ease), box-shadow .18s var(--ease), border-color .18s var(--ease); } .fg-dp-col.pool { background: linear-gradient(180deg, rgba(43,108,240,0.05), var(--wash)); } .fg-dp-col.fg-dp-over { border-color: var(--accent); box-shadow: inset 0 0 0 2px var(--accent), 0 10px 26px -12px var(--glow); background: var(--paper); } .fg-dp-col-h { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; font-family: var(--sans); font-weight: 800; font-size: 14.5px; color: var(--ink); } .fg-dp-col-h > span:first-child { flex: 1; } .fg-dp-col-n { font-family: var(--mono); font-weight: 700; font-size: 11px; color: var(--ink-mute); background: var(--paper); border: 1px solid var(--line); border-radius: 999px; padding: 2px 8px; } .fg-dp-delday { border: 0; background: none; color: var(--ink-mute); font-size: 18px; line-height: 1; cursor: pointer; padding: 0 2px; } .fg-dp-delday:hover { color: var(--accent); } .fg-dp-cards { display: flex; flex-direction: column; gap: 9px; min-height: 54px; } .fg-dp-hint { border: 1.5px dashed var(--line-2); border-radius: var(--r-s); padding: 14px 12px; text-align: center; font-size: 12.5px; color: var(--ink-mute); } .fg-dp-wrap { display: flex; flex-direction: column; gap: 0; } .fg-dp-card { display: flex; align-items: center; gap: 9px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-s); padding: 11px 11px; box-shadow: var(--sh-1); cursor: grab; transition: transform .14s var(--ease), box-shadow .18s var(--ease); } .fg-dp-card:active { cursor: grabbing; } .fg-dp-card.dragging { opacity: 0.45; box-shadow: var(--sh-2); } .fg-dp-card:hover { box-shadow: var(--sh-2); transform: translateY(-1px); } .fg-dp-grip { flex: none; width: 12px; height: 16px; background-image: radial-gradient(circle 1.4px, var(--line-2) 1.4px, transparent 1.5px); background-size: 6px 5px; background-position: 0 2px; opacity: 0.9; } .fg-dp-card-n { flex: 1; min-width: 0; font-size: 13.5px; font-weight: 600; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .fg-dp-kind { flex: none; font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); background: var(--wash); border-radius: 999px; padding: 3px 7px; } .fg-dp-wait { flex: none; font-family: var(--mono); font-weight: 700; font-size: 10px; color: #fff; background: var(--wc, #8A8E9B); border-radius: 999px; padding: 3px 7px; opacity: 0; transition: opacity .3s var(--ease); white-space: nowrap; } .fg-dp-wait:empty { padding: 0; } .fg-dp-wait.on { opacity: 1; } .fg-dp-rm { flex: none; width: 20px; height: 20px; border: 0; background: none; color: var(--ink-mute); font-size: 15px; line-height: 1; cursor: pointer; border-radius: 50%; } .fg-dp-rm:hover { color: var(--accent); background: var(--wash); } .fg-dp-move { margin: 6px 0 2px; width: 100%; font-family: var(--sans); font-size: 12px; font-weight: 600; color: var(--ink-soft); background: var(--paper); border: 1px solid var(--line); border-radius: 8px; padding: 6px 8px; cursor: pointer; } /* The move menu is a touch/keyboard aid; on fine pointers the drag grip leads. */ @media (hover: hover) and (pointer: fine) { .fg-dp-move { opacity: 0.72; } .fg-dp-wrap:hover .fg-dp-move { opacity: 1; } } .fg-dp-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 18px; } .fg-dp-addday { font-family: var(--sans); font-weight: 700; font-size: 13.5px; color: var(--accent); background: var(--paper); border: 1.5px dashed var(--accent); border-radius: 999px; padding: 11px 18px; cursor: pointer; transition: background .18s var(--ease); } .fg-dp-addday:hover { background: var(--wash); } .fg-dp-cta { display: inline-flex; align-items: center; gap: 8px; margin-left: auto; padding: 13px 22px; border-radius: 999px; background: var(--accent); color: #fff; font-weight: 800; font-size: 14.5px; box-shadow: 0 12px 30px var(--glow); transition: transform .2s var(--ease); } .fg-dp-cta:hover { transform: translateY(-2px); } .fg-dp-cta .arw { transition: transform .25s var(--ease); } .fg-dp-cta:hover .arw { transform: translateX(4px); } .fg-dp-stay { margin-top: 14px; font-size: 13.5px; color: var(--ink-soft); } .fg-dp-stay b { color: var(--ink); } .fg-dp-empty { text-align: center; padding: 44px 26px; } .fg-dp-empty-mk { width: 54px; height: 54px; margin: 0 auto 18px; border-radius: 16px; background: linear-gradient(135deg, var(--accent), var(--accent-2)); box-shadow: 0 12px 30px -8px var(--glow); position: relative; } .fg-dp-empty-mk::after { content: ""; position: absolute; inset: 0; margin: auto; width: 22px; height: 22px; background: #fff; clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%); } .fg-dp-empty h3 { font-family: var(--serif); font-size: 1.5rem; font-weight: 600; color: var(--ink); margin-bottom: 8px; } .fg-dp-empty p { color: var(--ink-soft); max-width: 42ch; margin: 0 auto 20px; line-height: 1.55; } @media (max-width: 560px) { .fg-dp-cta { margin-left: 0; width: 100%; justify-content: center; } .fg-dp-actions { flex-direction: column; align-items: stretch; } } @media (prefers-reduced-motion: reduce) { .fg-dp-card, .fg-dp-cta, .fg-dp-wait { transition: none; } } /* ========================================================================= Canvas mode: the guide page embedded as the left panel of home.html. Strips standalone chrome so it reads as one surface with the docked chat. ========================================================================= */ body.canvas .nav, body.canvas .foot, body.canvas .railnav, body.canvas .fg-tray, body.canvas .float-ask { display: none !important; } body.canvas { background: var(--paper); } body.canvas .trail { top: 20px; } /* Park canvases keep their cinematic hero but trimmed; the plan canvas drops its hero and everything except the day board. */ body.canvas[data-park] .hero.short { min-height: 46vh; } body.canvas:not([data-park]) .hero { display: none; } body.canvas:not([data-park]) section.pad:not(#days) { display: none; } body.canvas:not([data-park]) #days { padding-top: 26px; }