:root { /* --color-accent mirrors the Python CARD_ACCENT_COLOR constant (render.py) as a literal - there's no mechanism for HTML_SHELL's .format()-based templating to pull a Python constant into an arbitrary CSS position, so if CARD_ACCENT_COLOR ever changes, update this literal too. */ --color-accent: #f0512e; /* Core neutral/text palette, extracted 2026-08-07 (design-system Phase 3b). These are the exact literals already in heaviest use across the file - tokenized here so a future palette change is one edit, not a find-replace across hundreds of call sites. This first pass is a pure alias (token value == the literal it replaces), so it changes zero pixels; collapsing the near- duplicate off-palette browns/oranges into these is a separate, reviewable step. */ --color-ink: #33261e; /* darkest body text / headings */ --color-body: #6b5e52; /* standard body-text brown */ --color-muted: #9c8f82; /* secondary / muted text */ --color-border: #d8d4cc; /* light tan hairline borders */ --color-close-bg: #f5efe1; /* circular close-button disc */ /* Corner-radius scale, extracted 2026-08-07 (design-system Phase 3b). Step 1 = the unambiguous "fully round" family only: --radius-pill absorbs 999px AND the 100px/200px variants (all render identically as a full pill on the short/wide elements they're used on - buttons, inputs, pill rows - a radius only differs below ~2x the element's own smaller dimension). Pure alias, zero pixels changed. The numeric mid-scale (6/8/12/16px etc.) is a separate reviewed step. */ --radius-pill: 999px; --radius-circle: 50%; /* Numeric radius scale (step 2), named 2026-08-07. Pure alias - each token is the exact value already in use, so nothing moves; this just centralizes the scale. The steps are granular (2px apart through the middle) because that's what the app grew organically - lg/xl/2xl/3xl (10-16px) sit close and are a fair candidate to tighten later, but tightening moves pixels so it's a separate reviewed decision, not this pass. The rare one-off radii (2/3/4/5/15/18/22/24px, 1-4 uses each) are intentionally left literal, not dignified with a scale name. */ --radius-sm: 6px; --radius-md: 8px; /* default - the app's workhorse radius */ --radius-lg: 10px; --radius-xl: 12px; --radius-2xl: 14px; --radius-3xl: 16px; --radius-4xl: 20px; --radius-5xl: 28px; /* Elevation shadow scale, extracted 2026-08-07 (design-system Phase 3b). Collapses ~55 near-identical card/panel shadows (~30 unique values, mixing warm-brown and muddy black) onto 4 warm-brown steps - the warm family reads cleaner on the cream background. Approved against a rendered scale + in-context examples. NOT touched: the orange accent/button shadows, the directional drawer/sheet edge shadows, border-via-shadow insets, focus glows, and explicit `none` - all legitimately their own thing. */ --shadow-sm: 0 1px 3px rgba(80,60,40,0.10); --shadow-md: 0 4px 16px rgba(80,60,40,0.10); --shadow-lg: 0 8px 24px rgba(80,60,40,0.12); --shadow-xl: 0 20px 40px rgba(80,60,40,0.16); /* Spacing scale (2px grid), extracted 2026-08-07 (design-system Phase 3b). The app uses a real 2px-step scale, not a 4px grid - these name the even steps in actual use. Swapped into single- value padding/gap declarations (pure alias, zero pixels changed); multi-value shorthands and margins stay literal (shorthands read worse as var() soup; negative margins are precise positioning). Rare large one-offs (30/40/50px) left literal - not scale steps. */ --space-2: 2px; --space-4: 4px; --space-6: 6px; --space-8: 8px; --space-10: 10px; --space-12: 12px; --space-14: 14px; --space-16: 16px; --space-18: 18px; --space-20: 20px; --space-22: 22px; --space-24: 24px; --space-26: 26px; --space-28: 28px; --space-32: 32px; /* Type scale, extracted 2026-08-07 (design-system Phase 3b). The app had 33 font-sizes stepping in 0.5px increments - real drift, not a deliberate scale. Collapsed to 12 whole-px steps. The body range (12-16) stays granular on purpose: 13/14/15/16 are each heavily used for distinct text roles, so forcing them together would visibly resize huge amounts of text for little gain. What got removed: every 0.5px variant (snapped to nearest whole, imperceptible) and the rare one-off large sizes (21/22/23/25/26/ 27/30 -> nearest step). Pixel-named (--text-13) like --space-*, since a 12-step scale doesn't map cleanly to t-shirt names. */ --text-10: 10px; --text-11: 11px; --text-12: 12px; --text-13: 13px; --text-14: 14px; --text-15: 15px; --text-16: 16px; --text-18: 18px; --text-20: 20px; --text-24: 24px; --text-32: 32px; --text-48: 48px; --color-greeting: var(--color-body); --ease-decel: cubic-bezier(0.16, 1, 0.3, 1); /* User-chosen avatar background (see the Profile tab's avatar- color-row/selectAvatarColor) - falls back to --color-accent (the original fixed avatar color) whenever no profiles.avatar_color is set, via var()'s own fallback rather than a JS default, so an unauthenticated visitor's avatar circle needs no JS at all to look right. */ --user-avatar-color: var(--color-accent); /* Same value .nav-drawer's own desktop width media query uses - shared via custom property (rather than repeating the literal in both places) so #app-shift-wrap's push-over margin (a sibling of .nav-drawer, not a descendant of it) always matches the drawer's real rendered width exactly. Only ever consumed inside a min-width:900px block - harmless to leave defined at every width. */ --nav-drawer-desktop-w: clamp(300px, 28vw, 360px); } @media (prefers-reduced-motion: reduce) { .bg-cloud, .start-logo, .start-tagline-line, .app-bg, .home-content-fade { animation: none !important; transition: opacity 0.2s ease !important; transform: none !important; } } /* Form controls don't inherit body's font by default in any browser (textarea in particular falls back to a UA-stylesheet monospace, not body's own sans stack) - every text field/dropdown/button in the app gets Baloo 2 explicitly here so none of them silently read as the browser's system font. A specific selector elsewhere (e.g. a bold 700-weight button) still wins over this on weight/size, only the family was missing app-wide. */ input, textarea, select, button { font-family: 'Baloo 2', sans-serif; } /* Field active state, per Figma's Components frame (node 434:4661): accent border + soft orange glow, fading in on focus rather than snapping - applies app-wide so every text field (however each one's resting style is defined) picks up the same active treatment. */ input[type="text"], input[type="email"], input[type="password"], input[type="date"], input[type="time"], textarea, select { transition: border-color 0.2s ease-out, box-shadow 0.2s ease-out; } input[type="text"]:focus, input[type="email"]:focus, input[type="password"]:focus, input[type="date"]:focus, input[type="time"]:focus, textarea:focus, select:focus { outline: none; border-color: var(--color-accent); box-shadow: 0 0 11px rgba(240,81,46,0.66); } body { font-family: 'Google Sans Flex', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; max-width: 480px; margin: 0 auto; padding: 24px 16px; background: #fbf3e7; color: #2c2c2a; /* Targeted attempt at "tapping a date pill scrolls to the right spot, then drifts back up slightly" - this is the classic signature of iOS's elastic/rubber-band overscroll kicking in when a programmatic smooth-scroll's target lands at or near the page's max scrollable position, then snapping back once the animation "overshoots" past the real bottom. Applies to every browser on iOS, not just Safari - Apple requires all of them (Chrome included) to run on the same WebKit engine underneath, so this isn't a Safari-only fix. contain stops that bounce from happening on body's own scroll without changing any layout/ measurement - unconfirmed against the real device yet, flagged here in case it needs revisiting. */ overscroll-behavior-y: contain; } /* Trip detail screens (Itinerary/Expenses/Ideas) get a flat page background instead of the cream body default - toggled on body in showTripCategory/showHomeScreen (see .app-bg-hidden just below) so the Start/Home screens' own illustrated background is completely untouched by this. Compound selector beats the plain `body` rule above regardless of source order. #fcf7f0 (not the previous pale blue) plus hiding .app-bg entirely - not just its scenery, see .app-bg-hide-scenery elsewhere - matches the flat, illustration- free canvas every Itinerary v3 Figma frame uses; the Home Screen's own app-bg gradient is untouched since it never gets this class. */ body.trip-screen-bg { background: #fcf7f0; } body.trip-screen-bg .app-bg { display: none; } h1 { font-family: 'Baloo 2', sans-serif; font-size: var(--text-18); font-weight: 700; } /* Header styling copied from the Itinerary Figma file - #fbf3e7 (see body, above) as the cream page background everything else sits on top of. Flush square-bottomed white bar with no shadow of its own on every screen - on a trip screen, .trip-subtabs (below) continues this same white surface with no gap, and is the one that actually gets the rounded-bottom-corners + soft shadow treatment, so the two read as one continuous white card rather than two separate stacked boxes. On the home screen (no .trip-subtabs at all) this just ends flush, which reads fine on its own. */ .page-header { padding: 14px 16px 18px; margin: -24px -16px 0; background: #675f55; } /* Back arrow removed on mobile too now (direct feedback) - was already desktop-only-hidden below since the logo/avatar row plus the rest of that screen's own navigation already covered getting back to Home there; the mobile nav drawer's hamburger trigger (first button in this same row) covers the same job here, so the reasoning now applies at every width. JS only ever toggles this button's `visibility` (see showTripCategory/showHomeScreen), never `display`, so this unconditional rule can't be fought by an inline style the way a JS-driven `display` toggle could. */ .page-header .trip-title-back-btn { display: none; } /* Avatar (button.page-header-avatar-btn, below where .home-avatar-btn is defined) and the trip-switcher chevron (.trip-switcher-btn's own rule, further down) are also removed on mobile - see their own rules for why, kept next to what they're overriding instead of here so cascade order can't quietly undo them again. */ /* Title stacks to two lines on mobile now (trip name, then date directly below, no separator) instead of one run-on line with a bullet between them (direct feedback) - reverts to this card's ORIGINAL two-line design (see .page-title-sub's own history comment on why it went inline in the first place) but mobile-only this time; desktop keeps the inline treatment (see the >=900px override below), which has more width to spare. Scoped by #page-title specifically (not the shared .page-title-main/-sub/ -bullet classes bare) so this doesn't reach into the Overview card's own reuse of .page-title-main or the trip-switcher dropdown's reuse of all three - both need to stay exactly as they are. */ #page-title .page-title-main, #page-title .page-title-sub { display: block; } #page-title .page-title-bullet { display: none; } /* On desktop this becomes the exact same white bar as .home-custom-header - same padding, no curve, pinned in place - not just its logo+avatar dropped onto the old dark bar (that read as a mismatched patch). The back button disappears entirely here (the logo/avatar row plus the rest of this page's own navigation already cover getting back to the Home Screen); the trip title recolors to the same dark-on-light scheme the rest of this page already uses instead of the white-on-dark scheme the mobile dark bar needs. Compound selectors throughout so these reliably beat each element's own base color rule regardless of source order. Sticky, with .trip-subtabs/.itinerary-sticky-stack/ .idea-category-tabs/.trip-map-col all shifted down by this bar's own live-measured height (--page-header-h, see syncStickyHeaderOffsets) so the whole stack pins cleanly instead of overlapping. */ @media (min-width: 900px) { .page-header { /* Without this, the 50px padding above adds on top of the element's existing full-bleed width (see .page-header's own margin trick) instead of being carved out of it, overflowing the viewport by 100px and forcing a horizontal scrollbar. */ box-sizing: border-box; padding: 32px 50px 36px; background: #fff; border-radius: 0; box-shadow: var(--shadow-md); position: sticky; top: 0; z-index: 20; } /* trip-title-back-btn stays hidden here too now - see its own unconditional rule above, which already covers desktop. */ /* Same dark-on-light flip .trip-switcher-btn gets right below - the hamburger trigger is white against the mobile dark bar (.page-header's default background) but needs to become dark once that bar turns white at this width. */ .page-header .nav-drawer-trigger { color: #2c2c2a; } .page-header .page-title-main { color: #2c2c2a; } .page-header .page-title-sub, .page-header .page-title-bullet { color: #6b6a63; } /* Real bug: the switcher arrow (added after this block already existed) never got its own dark-on-light override here, so on desktop specifically it stayed white-on-white against this same header's white background - functionally present (every click handler worked) but genuinely invisible, not just easy to miss. */ .page-header .trip-switcher-btn { color: #2c2c2a; display: flex; } /* Title-stacking change above (direct feedback) was mobile-only - restored to its original desktop treatment (inline title/date/ bullet) here. The avatar's own desktop restore isn't here - see button.page-header-avatar-btn's mobile-hide rule further down (near .home-avatar-btn) for why it has to sit AFTER that rule in source order instead. */ #page-title .page-title-main, #page-title .page-title-sub { display: inline; } #page-title .page-title-bullet { display: inline; } } .page-header-inner { display: flex; align-items: center; gap: var(--space-8); } .page-header h1 { margin: 0; text-align: center; } /* Wraps the title itself (unchanged) plus the new trip-switcher arrow (see #trip-switcher-btn) - takes over the flex:1 the h1 used to claim directly against .page-header-inner, so the header's overall balance (logo/back-btn on one side, avatar on the other) is unaffected by this new wrapper existing. Real bug: the h1 itself ALSO kept its own flex:1, which made it (not this wrapper) claim all the extra width - centering the title text in that full-width box while the arrow sat tight against its right edge, nowhere near the date. Only .page-title-wrap should grow; the h1+arrow pair inside it should size to content and get centered as one group. */ .page-title-wrap { display: flex; align-items: center; justify-content: center; flex: 1; gap: var(--space-2); min-width: 0; position: relative; } .trip-switcher-btn { background: none; border: none; color: #ffffff; padding: var(--space-2); cursor: pointer; /* Hidden on mobile (direct feedback) - the nav drawer's own Trips list already offers a way to jump between trips in the same category, so this in-header control was redundant there. _updateTripSwitcher (JS) clears this button's inline style (`btn.style.display = ''`) rather than setting an explicit value whenever more than one trip exists in the category, so this class-level rule is what actually decides visibility in that case - no inline-style fight to worry about. Restored to flex on desktop (see the >=900px override, .page-header .trip-switcher- btn's own color-flip rule, which now also sets display back). */ display: none; flex-shrink: 0; } .trip-switcher-btn .material-symbols-outlined { font-size: var(--text-20); transition: transform 150ms ease; } .trip-switcher-btn-open .material-symbols-outlined { transform: rotate(180deg); } .trip-switcher-menu { position: absolute; top: 100%; left: 50%; transform: translateX(-50%); margin-top: 8px; background: #fff; border-radius: var(--radius-xl); box-shadow: var(--shadow-lg); padding: var(--space-6); min-width: 220px; max-width: 90vw; z-index: 50; } .trip-switcher-item { display: block; width: 100%; text-align: left; font-family: inherit; font-size: var(--text-14); color: #3a352c; background: none; border: none; border-radius: var(--radius-md); padding: 10px 12px; cursor: pointer; } .trip-switcher-item:hover { background: #f7f2ea; } /* .page-title-main/-sub/-bullet default to white text (readable against the header's own dark background) - this menu reuses the exact same .trip-title-text markup on a white dropdown instead, so all three need dark overrides here or the city name would render white-on-white. */ .trip-switcher-item .page-title-main { color: #3a352c; font-weight: 700; } .trip-switcher-item .page-title-bullet { color: var(--color-muted); margin: 0 6px; } .trip-switcher-item .page-title-sub { color: var(--color-muted); } /* Logo (same element/markup as .home-custom-header-inner) only ever shows up here on desktop - on mobile this row is already tight with just the back button and a (sometimes two-line) trip title, and the Home Screen is one tap away via the back button anyway. The avatar stays visible at every width though - it's the only way to reach Account settings from inside a trip, and a user's own initials/photo are a small enough circle not to fight the title for space. Compound selector (not just .page-header-logo alone) so this reliably beats .home-logo-small's own base rule regardless of which one ends up later in the stylesheet. */ .page-header-logo.home-logo-small { display: none; } @media (min-width: 900px) { .page-header-logo.home-logo-small { display: block; } } .page-title-main { display: inline; color: #ffffff; } /* Inline with the trip name (was its own block/line below it) - the separator (ยท) lives in the Python-side string that builds this span (see the trip-title assembly), not here - see .page-title- bullet for its own spacing. */ .page-title-sub { display: inline; font-family: 'Baloo 2', sans-serif; font-size: var(--text-15); font-weight: 600; color: #efebe6; } /* 20px clear of the trip name on one side and the date on the other - was just a plain space-dot-space in the string, too tight. */ .page-title-bullet { display: inline; margin: 0 20px; color: #efebe6; } .home-screen-hidden { display: none; } /* Independent of body's own max-width, which a >=900px media query further down (see .trip-section's two-column desktop layout) intentionally clears to `none` for the itinerary view - without its own cap here, the Home Screen's trip card would stretch to the full browser width on a wide desktop window. */ #home-screen { position: relative; max-width: 620px; margin: 0 auto; } /* No background of its own anymore - the Home Screen now shows the exact same shared .app-bg-sky gradient the Start Screen uses (carried straight over, rather than a second, differently-toned gradient of its own), so the two screens read as one continuous background rather than crossfading between two different looks. The header itself is NOT a separate rounded/shadowed panel (see .home-custom-header) - it reuses .page-header's own flush, shadow-less white-bar treatment instead, so the two screens' headers read as the same surface too. */ .page-header-hidden { display: none; } /* .home-custom-header (see HTML_SHELL/TRIPS_PAGE_TEMPLATE) used to be rendered inside #home-screen and inherit its visibility for free from #home-screen's own home-screen-hidden toggle - now a sibling of .page-header instead (both permanent, full-width, un-pushed rows above #app-shift-wrap - see .nav-drawer's own "top:" comment for why), so it needs this same explicit hidden class, toggled in step with .page-header-hidden by showHomeScreen/showTripCategory. */ .home-header-hidden { display: none; } /* Shared decorative illustration behind the Start Screen, the Home Screen, and the itinerary view too - mounted once and left in place across the Stage-2 transition rather than being duplicated per screen. Fixed, so it stays put in the viewport as the itinerary view scrolls (rather than scrolling away with the document), matching the Home Screen's own always-visible background instead of only showing once at the top. */ .app-bg { position: fixed; top: 0; bottom: 0; /* Real bug, only visible above a 620px viewport (every mobile test naturally stays under that): the old `inset:0` (pins left:0 AND right:0) plus `max-width:620px; margin:0 auto` never actually centers - browsers resolve left/right first (auto margins collapse to 0 since width:auto), THEN clamp the box to max-width without redistributing the freed space back into the margins. The box stayed flush against the left edge with the body's own plain background showing through the gap on the right - masked for a long time by the illustration art's own irregular edges, glaring now that .app-bg-sky is a flat rectangle. left:50% + translateX(-50%) is the reliable centering trick for a box whose resolved width isn't known ahead of time (100% clamped by max-width), unlike the margin:auto version above. */ left: 50%; width: 100%; max-width: 620px; transform: translateX(-50%); /* Negative, not 0 - a positioned element at z-index:0 paints AFTER (in front of) plain in-flow content per CSS stacking order (that only holds a "z-index:auto" level, not stacking-context level 0), so this was covering ordinary cards/content that have no z-index of their own instead of sitting behind them. -1 unambiguously stays behind all normal-flow content. */ z-index: -1; overflow: hidden; pointer-events: none; } .app-bg > div { position: absolute; } /* Full strength on the Start/Home screens; dialed back to a faint wash behind the itinerary view instead of being fully hidden there (see showTripCategory/showHomeScreen) - transition makes that handoff a fade rather than an abrupt swap. */ .app-bg-faded { opacity: 0.22; transition: opacity 400ms ease; } .app-bg-sky { position: absolute; inset: 0; /* Explicit white backing behind the gradient - the blue stop is translucent by design, so without this it was blending against the body's warm eggshell background (#fbf3e7) showing through instead of white, reading as a darker, muddier blue. Matches the Figma "Sign in - Desktop" frame's own base gradient - on THIS screen (unlike Home/Itinerary, see .app-bg-hide-scenery below) the dune-hill illustration is still visible and is what actually supplies the warm cream tone lower down, so this stays a plain soft blue wash rather than fading to cream itself - doing both would double up and look muddy. */ background-color: #fff; background-image: linear-gradient(180deg, rgba(104,149,219,0.22) 0%, rgba(104,149,219,0.22) 15%, rgba(104,149,219,0.08) 55%, #fff 85%); } /* Home/Itinerary only (illustration hidden, see .app-bg-hide-scenery itself) - real bug caught by a direct side-by-side screenshot comparison (Figma left, this page right): the flat CSS pulled from Figma's Dev Mode inspector for the equivalent "Desktop - 1" (Trips) frame (a sharp ~4-point transition around 60-64%, ending in pure white) only describes ONE background rectangle layer, shared with the Sign-in frame above - the actual composited Trips frame the user sees in Figma also has the same soft blurred ellipse shapes layered on top of it (just without an illustration in front to read as intentional), producing a much longer, smoother fade that ends in a warm cream, not white. Rather than reproduce those extra layers (the user explicitly wants just a flat gradient here, no illustration shapes), these stops are colors sampled directly from the two screenshots at 5%-height increments down the frame, reconstructing the same visual fade with a single gradient. */ .app-bg-hide-scenery .app-bg-sky { background-color: #f1e5d7; background-image: linear-gradient(180deg, #ccd8ec 0%, #f1e5d7 78%); } .app-bg svg { display: block; width: 100%; height: 100%; } .bg-dune-back, .bg-dune-mid { overflow: hidden; } .bg-dune-back-inner, .bg-dune-mid-inner { width: 100%; height: 100%; } /* Matches Figma's own rotate+flip on these two layers exactly (the source shapes are drawn "upside down" relative to how they should sit as background hills) - Ellipse 3 (back) is rotate(-177.1deg) scaleY(-1), Ellipse 2 (mid) is rotate(180deg) scaleY(-1), applied in that order to match Tailwind's fixed rotate-then-scale composition order. */ .bg-dune-back-inner { transform: rotate(-177.1deg) scaleY(-1); } .bg-dune-mid-inner { transform: rotate(180deg) scaleY(-1); } .bg-dune-back { left: -60%; top: 72.2%; width: 212%; height: 42.1%; } .bg-dune-mid { left: -45.7%; top: 61.1%; width: 189.8%; height: 45.2%; } .bg-dune-front { left: -24.6%; top: 73.2%; width: 127.2%; height: 29.9%; } .bg-skyline { left: 55.5%; top: 56.8%; width: 51.3%; height: 10.7%; } .bg-tree-1 { left: 10%; top: 67.9%; width: 13.4%; height: 17.5%; } .bg-tree-2 { left: 21.5%; top: 75.1%; width: 9.2%; height: 12.1%; } /* Trees/skyline/dune hills/clouds hidden on the Home Screen and the Itinerary/Ideas views alike (see showTripCategory/showHomeScreen toggling this class) per request - just the flat .app-bg-sky gradient stays, matching the Figma reference exactly. */ .app-bg-hide-scenery .bg-skyline, .app-bg-hide-scenery .bg-tree, .app-bg-hide-scenery .bg-dune, .app-bg-hide-scenery .bg-cloud { display: none; } /* Home Screen only (see showHomeScreen/_hideAppBgScenery) - the gradient bleeds the full viewport width above 620px instead of staying capped/centered like every other screen, matching the Figma "Desktop - 1" frame's own full-bleed background exactly (direct feedback: the cream body color showing on either side of the centered box read as a bug, not a deliberate margin). NOT applied to the Itinerary/Ideas views (.app-bg-hide-scenery alone, without this) - those deliberately keep the narrower, content- column-tracking illustration once a trip's map column claims the rest of a wide desktop viewport (see the @900px override below). */ .app-bg-full-bleed { left: 0; width: 100%; max-width: none; transform: none; } /* Fully hides the shared illustration on trip detail screens (see body.trip-screen-bg above) - Start/Home screens never get this class, so their illustration is unaffected. */ .app-bg-hidden { display: none; } /* Moved closer in/up from its old -6%/31.2% spot (mostly hidden, peeking from behind the left edge) so it now sits near the greeting text instead of off past the illustration's own edge - see .home-content-inset's own comment for where that text lands. */ .bg-cloud-1 { left: 6%; top: 20%; width: 27.4%; height: 5.8%; } .bg-cloud-2 { left: 84.3%; top: 46.6%; width: 19.2%; height: 4.6%; } /* Same top band as bg-cloud-1 (20%) but on the right side, for a balanced pair near the greeting instead of just the one cloud on the left - bg-cloud-2 stays where it was, lower and further right. */ .bg-cloud-3 { left: 68%; top: 17%; width: 19.2%; height: 4.6%; } @media (prefers-reduced-motion: no-preference) { .bg-cloud { opacity: 0.6; transform: translateX(-20px); animation: cloud-settle 800ms var(--ease-decel) forwards, cloud-drift 42s ease-in-out 800ms infinite; } .bg-cloud-2 { animation-delay: 100ms, 900ms; } .bg-cloud-3 { animation-delay: 200ms, 1400ms; } @keyframes cloud-settle { to { opacity: 1; transform: translateX(0); } } /* Was a barely-perceptible 10px sway over 18s - widened and slowed way down (now a real ~90px round trip over 42s) so the drift actually reads as clouds slowly moving, not a subtle wobble. Starts/ends at 0 (not the endpoints) so the handoff from cloud-settle above lands smoothly instead of jump-cutting to a mid-sway position. Still a back-and-forth sway rather than a true one-directional endless drift - the illustration itself is a fixed-width, bounded scene (not a repeating/tiled background), so a cloud drifting off one edge for good would just leave empty sky rather than looping back in from the other side. */ @keyframes cloud-drift { 0% { transform: translateX(0); } 25% { transform: translateX(45px); } 75% { transform: translateX(-45px); } 100% { transform: translateX(0); } } } .start-screen { position: fixed; top: 0; bottom: 0; /* See .app-bg's own comment above - inset:0 + max-width + margin:auto doesn't actually center above a 620px viewport, same fix. */ left: 50%; width: 100%; max-width: 620px; transform: translateX(-50%); z-index: 1000; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; /* Roughly matches Figma's own logo position (~20% down the frame) rather than dead-centering it in the viewport. */ padding-top: 22%; /* No background of its own (see .app-bg-sky) - transparent here so the shared illustration behind it (sky + dunes/trees/clouds) shows through around the logo/tagline instead of being covered by an opaque layer in front of it. */ /* Defense-in-depth: force-hides itself ~5s after paint even if the Stage-2 JS never runs at all (e.g. a script error elsewhere in the page) - nothing else on this fixed, full-bleed, top-most layer can otherwise be dismissed without JS. */ animation: start-screen-force-hide 0s 5s forwards; } @keyframes start-screen-force-hide { to { opacity: 0; pointer-events: none; } } .start-screen-exit { transition: opacity 350ms ease; opacity: 0; pointer-events: none; } html.skip-splash .start-screen { display: none; } .start-logo { position: relative; z-index: 1; width: 251px; max-width: 62%; } .start-tagline { position: relative; z-index: 1; text-align: center; margin-top: 18px; } .start-tagline-line { font-family: 'Baloo 2', sans-serif; } .start-tagline-line-1 { font-size: var(--text-18); font-weight: 400; color: var(--color-greeting); } .start-tagline-line-2 { font-size: var(--text-24); font-weight: 700; /* Same brown as the logo wordmark itself (var(--color-greeting) = #6b5e52 = the logo SVG's own fill color), not a separate darker near-black tone. */ color: var(--color-greeting); } @media (prefers-reduced-motion: no-preference) { .start-logo, .start-tagline-line { opacity: 0; animation-duration: 550ms; animation-timing-function: var(--ease-decel); animation-fill-mode: forwards; } .start-logo { transform: translateY(18px); animation-name: start-fade-slide; animation-delay: 300ms; } .start-tagline-line { transform: translateY(12px); animation-name: start-fade-slide; animation-duration: 400ms; } .start-tagline-line-1 { animation-delay: 900ms; } .start-tagline-line-2 { animation-delay: 1250ms; } @keyframes start-fade-slide { to { opacity: 1; transform: translateY(0); } } } @media (prefers-reduced-motion: reduce) { .start-logo, .start-tagline-line { opacity: 1; } } /* Same edge-bleed/sticky mechanics as .page-header (same negative margin trick, same z-index), but WITH the rounded-bottom + shadow .page-header itself doesn't have. On a trip screen that curve comes from .trip-subtabs sitting flush beneath the (flush) .page-header, continuing it into one visually-curved white surface - the Home Screen has no equivalent second element below its header, so the header itself carries the curve directly here, for the same overall "curved white block up top" read. */ .home-custom-header { /* Extra padding vs. .page-header's own 14px/18px - measured empirically against the itinerary header's REAL rendered height (a two-line title, which runs taller than plain font-size math predicts), not derived analytically. */ padding: 32px 16px 36px; margin: -24px -16px 0; background: #fff; border-radius: 0 0 20px 20px; box-shadow: var(--shadow-md); position: sticky; top: 0; z-index: 20; } /* Unlike .page-header (bleeds only to body's own edges, which is already the full viewport on desktop - see body's max-width:none above), this one sits inside #home-screen, which keeps its 620px cap at every width on purpose (see #home-screen's own comment) so the home screen's trip cards don't stretch edge-to-edge on a wide desktop window. The header alone still breaks out of that cap via the standard width:100vw + negative-viewport-margin full-bleed trick, rather than lifting #home-screen's own cap. */ @media (min-width: 900px) { .home-custom-header { /* Without this, the 50px padding below adds on top of the 100vw already set, overflowing the viewport by 100px and forcing a horizontal scrollbar. */ box-sizing: border-box; width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); padding-left: 50px; padding-right: 50px; border-radius: 0; } } .home-custom-header-inner { display: flex; align-items: center; gap: var(--space-12); } /* Was justify-content:space-between back when this row only ever had two children (logo, avatar) - adding the hamburger trigger as a third child in front of the logo would've centered the logo instead of keeping it flush left. Same visual result as before (logo left, avatar right) via margin-left:auto on the avatar button instead, now that there are three children to arrange. */ .home-custom-header-inner .home-avatar-btn { margin-left: auto; } @media (prefers-reduced-motion: no-preference) { /* Slides down into place rather than fading up like the rest of .home-content-fade - the header is what reads as "arriving" once the Start Screen has fully faded out. Compound selector (not just .home-custom-header) so this wins over .home-content-fade's own translateY(8px) regardless of stylesheet order, at equal specificity otherwise. */ .home-custom-header.home-content-fade { transform: translateY(-24px); } } /* Back to Figma's own 130px/43px sizing - a same-height match against the itinerary page's header turns out to need this larger size, not a smaller one: that header commonly carries a two-line title (city + dates), which makes its real rendered height taller than a single-line assumption would suggest (measured ~109px vs. ~68px with the smaller 36px avatar this rule used previously). */ /* A