/* ============================================================ THE WANDER ALMANAC — WEB DESIGN SYSTEM (FINAL 2026-07) The web-authoritative port of mockups/redesign-2026-07/final.html: Current (Horizon) palette + MERIDIAN light glass (verbatim) + MERIDIAN dark block (Current-depth #070A14) · LATITUDE craft (elevation tiers, event-dot day chips, dotted rail, column-locked money) · SKYLIGHT type (100% SF Pro, no serif, headings ≥700, display 800, tabular money). Desktop-first (--maxw grid), responsive down to mobile browsers. Toggle dark mode by adding class "dark" to . No prefers-color-scheme. ============================================================ */ :root { --font: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', 'Helvetica Neue', sans-serif; /* SKYLIGHT type ramp — desktop-adapted (larger display sizes, same roles) */ --fs-display: 52px; /* marketing / landing hero */ --fs-hero: 40px; /* page display title (Explore, trip name, Booked!) */ --fs-title: 30px; /* primary page title / greeting */ --fs-title2: 22px; /* detail hero / big section */ --fs-title3: 19px; /* section title, card group head */ --fs-body: 16px; --fs-sub: 14px; --fs-foot: 12.5px; --fs-cap: 11px; --tr-disp: -0.02em; /* display / hero tracking */ --tr-num: -0.03em; /* big tabular numbers */ --fw-head: 700; /* headings floor */ --fw-disp: 800; /* biggest display + numbers */ --r-xl: 28px; --r-lg: 22px; --r-md: 16px; --r-sm: 12px; --r-pill: 100px; --maxw: 1280px; --bar-h: 66px; /* category accents */ --c-flight: #0A84FF; --c-lodging: #E8932A; --c-activity: #16B89A; --c-dining: #FF6B5C; --c-car: #9B6BF2; --accent-a: #0A84FF; --accent-b: #2EC4B6; --accent-grad: linear-gradient(135deg, #0A84FF 0%, #2EC4B6 100%); --accent-ink: #0A6FDC; --ok-ink: #0E8C7E; --warn-ink: #C4791A; /* LAT elevation tiers (layered shadow depth) */ --tier1: 0 1px 2px rgba(23,61,94,0.05), 0 4px 12px rgba(23,61,94,0.07); --tier2: 0 2px 6px rgba(23,61,94,0.07), 0 14px 34px rgba(23,61,94,0.12); --tier3: 0 6px 16px rgba(23,61,94,0.10), 0 26px 60px rgba(23,61,94,0.18); /* LIGHT = Horizon canvas + MERIDIAN light glass (verbatim) */ --canvas: linear-gradient(180deg, #D8EDF9 0%, #EAF5FB 34%, #FBFDFE 72%, #F4F9FC 100%); --canvas-bg: #EAF5FB; --mesh-opacity: 0; --ink: #0B1B2B; --ink-2: #4A6076; --ink-3: #8DA2B5; --glass: rgba(255,255,255,0.50); --glass-strong: rgba(255,255,255,0.66); --glass-soft: rgba(255,255,255,0.34); --glass-edge: rgba(255,255,255,0.95); --glass-edge-soft: rgba(120,150,180,0.26); --spec: rgba(255,255,255,0.95); --bar-bg: rgba(255,255,255,0.62); --shadow: 0 2px 6px rgba(23,61,94,0.06), 0 12px 32px rgba(23,61,94,0.13); --shadow-soft: 0 1px 3px rgba(23,61,94,0.05), 0 6px 18px rgba(23,61,94,0.08); --glow: none; --sep: rgba(11,27,43,0.08); --field: rgba(255,255,255,0.7); --pill-outline: rgba(11,27,43,0.16); --photo-filter: saturate(1.06); --canvas-fade: #EAF5FB; } html.dark { --c-flight: #64D2FF; --c-lodging: #FFB84D; --c-activity: #2EE6A8; --c-dining: #FF7AB2; --c-car: #BF5AF2; --accent-a: #64D2FF; --accent-b: #5E5CE6; --accent-c: #BF5AF2; --accent-grad: linear-gradient(120deg, #64D2FF 0%, #5E5CE6 50%, #BF5AF2 100%); --accent-ink: #8FC7FF; --ok-ink: #2EE6A8; --warn-ink: #FFB84D; --tier1: 0 1px 4px rgba(0,0,0,0.42), 0 6px 20px rgba(0,0,0,0.46); --tier2: 0 2px 8px rgba(0,0,0,0.55), 0 16px 40px rgba(0,0,0,0.65); --tier3: 0 8px 22px rgba(0,0,0,0.6), 0 30px 70px rgba(0,0,0,0.72); --canvas: #070A14; --canvas-bg: #070A14; --mesh-opacity: 1; --ink: #F0F4FF; --ink-2: #8B9CC4; --ink-3: #4A5780; --glass: rgba(255,255,255,0.07); --glass-strong: rgba(255,255,255,0.11); --glass-soft: rgba(255,255,255,0.04); --glass-edge: rgba(255,255,255,0.16); --glass-edge-soft: rgba(255,255,255,0.14); --spec: rgba(255,255,255,0.22); --bar-bg: rgba(10,16,28,0.66); --shadow: 0 2px 8px rgba(0,0,0,0.55), 0 16px 40px rgba(0,0,0,0.65); --shadow-soft: 0 1px 4px rgba(0,0,0,0.4), 0 6px 20px rgba(0,0,0,0.45); --glow: 0 0 24px rgba(94,92,230,0.30); --sep: rgba(255,255,255,0.09); --field: rgba(255,255,255,0.06); --pill-outline: rgba(255,255,255,0.22); --photo-filter: brightness(0.9) contrast(1.1) saturate(1.16); --canvas-fade: #070A14; } * { margin: 0; padding: 0; box-sizing: border-box; -webkit-font-smoothing: antialiased; } html, body { height: 100%; } body { font-family: var(--font); color: var(--ink); background: var(--canvas); background-attachment: fixed; min-height: 100vh; position: relative; line-height: 1.45; } /* aurora mesh (dark) — fixed behind everything */ .mesh { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; opacity: var(--mesh-opacity); } .mesh::before { content:''; position: absolute; inset: -10%; background: radial-gradient(ellipse 50% 40% at 18% 12%, rgba(94,92,230,0.16) 0%, transparent 62%), radial-gradient(ellipse 46% 38% at 84% 24%, rgba(46,196,182,0.13) 0%, transparent 60%), radial-gradient(ellipse 44% 36% at 60% 82%, rgba(191,90,242,0.11) 0%, transparent 60%), radial-gradient(ellipse 55% 34% at 8% 92%, rgba(100,210,255,0.09) 0%, transparent 64%); } .mesh::after { content:''; position: absolute; inset: 0; background-image: radial-gradient(circle 1px at 12% 18%, rgba(255,255,255,0.5) 0, transparent 1px), radial-gradient(circle 1px at 37% 9%, rgba(255,255,255,0.4) 0, transparent 1px), radial-gradient(circle 1.4px at 68% 14%, rgba(255,255,255,0.32) 0, transparent 1.5px), radial-gradient(circle 1px at 88% 7%, rgba(255,255,255,0.45) 0, transparent 1px), radial-gradient(circle 1px at 26% 40%, rgba(255,255,255,0.28) 0, transparent 1px), radial-gradient(circle 1px at 78% 33%, rgba(255,255,255,0.4) 0, transparent 1px), radial-gradient(circle 1.4px at 52% 28%, rgba(255,255,255,0.26) 0, transparent 1.5px); } .page { position: relative; z-index: 1; } /* MERIDIAN faded-image background (photo top → melts to canvas). Use height per page. */ .bgfade { position: absolute; left: 0; right: 0; top: 0; height: 46vh; z-index: 0; pointer-events: none; overflow: hidden; } .bgfade img { width: 100%; height: 100%; object-fit: cover; filter: var(--photo-filter); -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 30%, transparent 100%); mask-image: linear-gradient(180deg, #000 0%, #000 30%, transparent 100%); } .bgfade::after { content:''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8,14,26,0.30) 0%, rgba(8,14,26,0.10) 34%, var(--canvas-fade) 100%); } html:not(.dark) .bgfade::after { background: linear-gradient(180deg, rgba(20,40,66,0.22) 0%, rgba(230,244,251,0.20) 40%, var(--canvas-fade) 100%); } html:not(.dark) .bgfade img { filter: var(--photo-filter) brightness(1.02); } /* ============================================================ TOP APP BAR ============================================================ */ .appbar { position: sticky; top: 0; z-index: 100; height: var(--bar-h); display: flex; align-items: center; gap: 18px; padding: 0 max(20px, 4vw); background: var(--bar-bg); backdrop-filter: blur(30px) saturate(180%); -webkit-backdrop-filter: blur(30px) saturate(180%); border-bottom: 1px solid var(--glass-edge-soft); } .brand { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 17px; letter-spacing: -0.3px; color: var(--ink); text-decoration: none; flex-shrink: 0; } .brand .nc, .brandmark { border-radius: 24%; overflow: hidden; flex-shrink: 0; display: block; width: 32px; height: 32px; box-shadow: 0 4px 14px rgba(0,0,0,0.25); } .brand .nc svg, .brandmark svg { width: 100%; height: 100%; display: block; } .wordmark { font-weight: 800; letter-spacing: -0.3px; } .nav { display: flex; align-items: center; gap: 4px; margin-left: 8px; } .nav a { padding: 9px 15px; border-radius: var(--r-pill); font-size: var(--fs-sub); font-weight: 600; color: var(--ink-2); text-decoration: none; white-space: nowrap; } .nav a:hover { color: var(--ink); background: var(--glass-soft); } .nav a.active { color: var(--accent-ink); background: rgba(10,132,255,0.10); } html.dark .nav a.active { background: rgba(100,210,255,0.12); } .appbar .spacer { flex: 1; } .appbar .actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; } .icon-btn { width: 40px; height: 40px; border-radius: 50%; background: var(--glass); border: 1px solid var(--glass-edge-soft); backdrop-filter: blur(22px) saturate(180%); -webkit-backdrop-filter: blur(22px) saturate(180%); display: flex; align-items: center; justify-content: center; cursor: pointer; position: relative; flex-shrink: 0; box-shadow: var(--shadow-soft); } .icon-btn svg { width: 18px; height: 18px; stroke: var(--ink-2); fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .icon-btn .dot { position: absolute; top: 2px; right: 2px; width: 9px; height: 9px; border-radius: 50%; background: #FF6B5C; border: 2px solid var(--glass-edge); } .icon-btn .badge { position: absolute; top: -3px; right: -3px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 9px; background: var(--accent-a); color: #04121e; font-size: 10px; font-weight: 800; display: flex; align-items: center; justify-content: center; border: 2px solid var(--canvas-bg); } .avatar { width: 40px; height: 40px; border-radius: 50%; background: var(--accent-grad); color: #fff; font-weight: 700; font-size: 14px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; cursor: pointer; background-size: cover; background-position: center; } .avatar.sm, .avatar-sm { width: 28px; height: 28px; font-size: 11px; border-radius: 50%; background: var(--accent-grad); color: #fff; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .hamburger { display: none; } /* ============================================================ LAYOUT ============================================================ */ .container { max-width: var(--maxw); margin: 0 auto; padding: 0 max(20px, 4vw); } .container.narrow { max-width: 880px; } /* padding-block only — .section is often combined with .container and must not zero its horizontal inset */ .section { padding-block: 30px; } .page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 18px; } .page-title { font-size: var(--fs-title); font-weight: var(--fw-disp); letter-spacing: var(--tr-disp); line-height: 1.05; } .page-kicker { font-size: var(--fs-cap); color: var(--ink-3); font-weight: var(--fw-head); text-transform: uppercase; letter-spacing: 0.14em; } .section-head { display: flex; align-items: baseline; justify-content: space-between; margin: 6px 0 14px; } .section-title { font-size: var(--fs-title3); font-weight: var(--fw-disp); letter-spacing: var(--tr-disp); color: var(--ink); } .section-link { font-size: var(--fs-sub); color: var(--accent-ink); font-weight: 600; text-decoration: none; cursor: pointer; } .muted { color: var(--ink-2); } .tiny { font-size: var(--fs-cap); } .center { text-align: center; } .fw7 { font-weight: 700; } .fw8 { font-weight: 800; } .row { display: flex; align-items: center; } .row-between { display: flex; align-items: center; justify-content: space-between; } .gap6 { gap: 6px; } .gap8 { gap: 8px; } .gap10 { gap: 10px; } .divider { height: 1px; background: var(--sep); margin: 8px 0; } /* ── SKYLIGHT TYPE ROLES (see redesign-2026-07/TYPE-GUIDE.md) — no serif, ever ── */ .h-hero { font-size: var(--fs-hero); font-weight: var(--fw-disp); letter-spacing: var(--tr-disp); color: var(--ink); line-height: 1.03; } .h-disp { font-weight: var(--fw-disp); letter-spacing: var(--tr-disp); color: var(--ink); line-height: 1.03; } .h-title { font-size: var(--fs-title3); font-weight: var(--fw-disp); color: var(--ink); letter-spacing: var(--tr-disp); } .kicker, .h-label { font-size: var(--fs-cap); font-weight: var(--fw-head); color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.14em; } .money { font-variant-numeric: tabular-nums; font-weight: var(--fw-head); letter-spacing: -0.2px; } .num-disp { font-variant-numeric: tabular-nums; font-weight: var(--fw-disp); letter-spacing: var(--tr-num); line-height: 0.9; color: var(--ink); } .txt-w { color: #fff; } .txt-w2 { color: rgba(255,255,255,0.82); } .h-disp.txt-w, .h-hero.txt-w, .num-disp.txt-w, .section-title.txt-w, .h-title.txt-w { color: #fff; } .kicker.txt-w2, .h-label.txt-w2 { color: rgba(255,255,255,0.82); } /* two-column app layout: main + right rail */ .cols { display: grid; grid-template-columns: 1fr 360px; gap: 26px; align-items: start; } .cols.sidebar-left { grid-template-columns: 280px 1fr; } .rail { position: sticky; top: calc(var(--bar-h) + 22px); display: flex; flex-direction: column; gap: 16px; } /* ============================================================ GLASS / CARDS — MERIDIAN fills + LAT tiers ============================================================ */ .glass, .card { background: var(--glass); backdrop-filter: blur(30px) saturate(180%); -webkit-backdrop-filter: blur(30px) saturate(180%); border: 1px solid var(--glass-edge-soft); box-shadow: var(--shadow-soft); position: relative; } .card { border-radius: var(--r-lg); } .card.pad { padding: 20px; } .glass-strong { background: var(--glass-strong); backdrop-filter: blur(40px) saturate(190%); -webkit-backdrop-filter: blur(40px) saturate(190%); border: 1px solid var(--glass-edge-soft); box-shadow: var(--shadow); } .glass.t2 { background: var(--glass-strong); box-shadow: var(--tier2); } .glass.t3 { background: var(--glass-strong); box-shadow: var(--tier3); } /* specular top edge for elevation realism */ .spec::before { content:''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; border-top: 1px solid var(--spec); opacity: .7; -webkit-mask: linear-gradient(180deg, #000, transparent 42%); mask: linear-gradient(180deg, #000, transparent 42%); } .card-inline { background: var(--glass); backdrop-filter: blur(28px) saturate(180%); -webkit-backdrop-filter: blur(28px) saturate(180%); border: 1px solid var(--glass-edge-soft); border-radius: var(--r-md); box-shadow: var(--shadow-soft); position: relative; cursor: pointer; } /* responsive auto grid */ .cardgrid { display: grid; gap: 18px; grid-template-columns: repeat(auto-fill, minmax(248px, 1fr)); } .cardgrid.tiles { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); } .hscroll { display: flex; gap: 16px; overflow-x: auto; padding-bottom: 6px; scroll-snap-type: x mandatory; } .hscroll::-webkit-scrollbar { height: 0; } .hscroll > * { scroll-snap-align: start; flex-shrink: 0; } /* photo tile (destinations / trips) */ .tile { position: relative; border-radius: var(--r-lg); overflow: hidden; cursor: pointer; box-shadow: var(--tier2); display: block; text-decoration: none; color: inherit; } .tile > img { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; filter: var(--photo-filter); } .tile .plate { position: absolute; left: 9px; right: 9px; bottom: 9px; border-radius: 14px; padding: 11px 13px; color: #fff; background: rgba(14,22,38,0.4); border: 1px solid rgba(255,255,255,0.24); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); } .tile .plate .t { font-weight: 700; font-size: var(--fs-sub); } .tile .plate .s { font-size: var(--fs-cap); color: rgba(255,255,255,0.82); margin-top: 1px; } /* SKY featured / photo-overlay card — text on a full photo */ .photocard { position: relative; border-radius: var(--r-lg); overflow: hidden; cursor: pointer; display: block; text-decoration: none; color: inherit; border: 1px solid var(--glass-edge-soft); box-shadow: var(--tier2); } .photocard > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: var(--photo-filter); } .photocard .pc-scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(6,12,22,0.10) 0%, transparent 34%, rgba(6,12,22,0.72) 100%); } .photocard .pc-in { position: relative; z-index: 2; display: flex; flex-direction: column; height: 100%; padding: 16px 18px; } .stars-txt { color: #F5A623; letter-spacing: 1px; font-size: 12px; } /* image-left result/event card */ .lcard { display: flex; gap: 0; border-radius: var(--r-lg); overflow: hidden; cursor: pointer; text-decoration: none; color: inherit; position: relative; background: var(--glass); backdrop-filter: blur(30px) saturate(180%); -webkit-backdrop-filter: blur(30px) saturate(180%); border: 1px solid var(--glass-edge-soft); box-shadow: var(--shadow-soft); } .lcard.book { border-left: 3px solid var(--accent-a); } .lcard .ph { width: 156px; flex-shrink: 0; position: relative; overflow: hidden; min-height: 132px; } .lcard .ph img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: var(--photo-filter); } .lcard .ph .dots { position: absolute; bottom: 7px; left: 0; right: 0; display: flex; gap: 3px; justify-content: center; } .lcard .ph .dots i { width: 4px; height: 4px; border-radius: 50%; background: rgba(255,255,255,0.55); } .lcard .ph .dots i.on { background: #fff; width: 11px; border-radius: 2px; } .lcard .bd { flex: 1; min-width: 0; padding: 14px 16px; display: flex; flex-direction: column; } .lc-title { font-weight: 700; font-size: var(--fs-body); color: var(--ink); letter-spacing: -0.2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .lc-sub { font-size: var(--fs-foot); color: var(--ink-2); margin-top: 3px; } .lc-desc { font-size: var(--fs-foot); color: var(--ink-2); margin-top: 7px; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .lc-meta { display: flex; align-items: center; gap: 9px; margin-top: auto; padding-top: 10px; flex-wrap: wrap; } .lc-price { font-size: var(--fs-title3); font-weight: var(--fw-disp); color: var(--ink); white-space: nowrap; font-variant-numeric: tabular-nums; } .lc-price small { font-size: var(--fs-cap); font-weight: 600; color: var(--ink-3); } /* SHARED HERO-TRIP-CARD (.htc) — Home Next-Trip + Trips hero (compact spec). Desktop photo breathes a little taller; collapses toward the iOS 158px on mobile. */ .htc { border-radius: var(--r-xl); overflow: hidden; cursor: pointer; box-shadow: var(--tier3); display: block; text-decoration: none; color: inherit; } .htc-photo { position: relative; height: 252px; } .htc-photo > img { width: 100%; height: 100%; object-fit: cover; filter: var(--photo-filter); } .htc-scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(6,12,22,0.28) 0%, transparent 38%, transparent 46%, rgba(6,12,22,0.74) 100%); } .htc-top { position: absolute; top: 13px; left: 16px; right: 16px; display: flex; justify-content: space-between; align-items: flex-start; } .htc-cap { position: absolute; left: 18px; right: 18px; bottom: 14px; color: #fff; } .htc-count { display: flex; align-items: flex-end; gap: 8px; } .htc-num { font-size: 44px; font-weight: var(--fw-disp); line-height: 0.86; letter-spacing: -1.4px; font-variant-numeric: tabular-nums; } .htc-count-lbl > div:first-child { font-size: 11px; font-weight: 800; opacity: .92; letter-spacing: 0.5px; } .htc-count-lbl > div:last-child { font-size: 11px; font-weight: 600; opacity: .8; } .htc-name { font-size: 24px; font-weight: var(--fw-disp); margin-top: 6px; letter-spacing: -0.4px; line-height: 1.1; } .htc-meta { font-size: 12.5px; opacity: .86; font-weight: 600; margin-top: 3px; } .htc-foot { display: flex; align-items: center; justify-content: space-between; padding: 12px 18px; background: var(--glass); backdrop-filter: blur(30px) saturate(180%); -webkit-backdrop-filter: blur(30px) saturate(180%); border-top: 1px solid var(--glass-edge-soft); } .htc-prog { flex: 1; min-width: 0; } .htc-prog-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; } .htc-prog-row .htc-booked { font-size: 13px; font-weight: 800; color: var(--ink); } .htc-prog-row .htc-finish { font-size: 12.5px; font-weight: 800; color: var(--accent-ink); cursor: pointer; text-decoration: none; } .htc-track { height: 6px; border-radius: 3px; background: var(--sep); overflow: hidden; } .htc-track > div { width: 56%; height: 100%; background: var(--accent-grad); border-radius: 3px; } /* ============================================================ PILLS / CHIPS / BUTTONS ============================================================ */ .pill { display: inline-flex; align-items: center; gap: 5px; padding: 5px 11px; border-radius: var(--r-pill); font-size: var(--fs-cap); font-weight: 600; white-space: nowrap; border: 1px solid var(--pill-outline); } .pill-soft { background: var(--glass-soft); color: var(--ink-2); } .pill-tint { background: rgba(10,132,255,0.10); color: var(--accent-ink); border-color: rgba(10,132,255,0.5); } html.dark .pill-tint { background: rgba(100,210,255,0.12); } .pill-warn { background: rgba(232,147,42,0.14); color: #B9750E; border-color: rgba(232,147,42,0.55); } html.dark .pill-warn { color: #FFB84D; background: rgba(255,184,77,0.12); } .pill-ok { background: rgba(22,184,154,0.13); color: #14937F; border-color: rgba(22,184,154,0.5); } html.dark .pill-ok { color: #2EE6A8; background: rgba(46,230,168,0.12); } .pill-glass, .pill-onphoto { background: rgba(16,24,40,0.42); color: #fff; border: 1px solid rgba(255,255,255,0.30); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } .pill-accent { background: rgba(10,132,255,0.14); color: var(--accent-ink); border-color: rgba(10,132,255,0.45); } html.dark .pill-accent { background: rgba(94,92,230,0.24); color: #fff; border-color: rgba(120,150,255,0.4); } .pill-key { background: var(--accent-grad); color: #fff; border: none; cursor: pointer; } .pill-dot::before { content:''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; display: inline-block; } .star { width: 12px; height: 12px; fill: #F5A623; vertical-align: -1px; } .stars { display: inline-flex; gap: 1px; align-items: center; } .chip { padding: 9px 15px; border-radius: var(--r-pill); font-size: var(--fs-foot); font-weight: 600; background: var(--glass); backdrop-filter: blur(20px) saturate(180%); -webkit-backdrop-filter: blur(20px) saturate(180%); border: 1px solid var(--glass-edge-soft); color: var(--ink-2); white-space: nowrap; cursor: pointer; box-shadow: var(--shadow-soft); } .chip.active { background: var(--ink); color: var(--canvas-bg); border-color: transparent; } html.dark .chip.active { background: var(--accent-grad); color: #fff; box-shadow: var(--glow); } .chiprow { display: flex; gap: 9px; flex-wrap: wrap; } .seg { display: inline-flex; background: var(--glass); border: 1px solid var(--glass-edge-soft); border-radius: var(--r-pill); padding: 4px; gap: 2px; box-shadow: var(--shadow-soft); backdrop-filter: blur(30px) saturate(180%); -webkit-backdrop-filter: blur(30px) saturate(180%); } .seg a { padding: 8px 16px; border-radius: var(--r-pill); font-size: var(--fs-sub); font-weight: 600; color: var(--ink-2); text-decoration: none; cursor: pointer; white-space: nowrap; } .seg a.active { background: var(--glass-strong); color: var(--ink); box-shadow: var(--shadow-soft); border: 1px solid var(--glass-edge-soft); } html.dark .seg a.active { background: rgba(255,255,255,0.12); color: #fff; } .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 22px; border-radius: var(--r-md); font-size: var(--fs-body); font-weight: 700; cursor: pointer; border: none; font-family: var(--font); letter-spacing: -0.1px; white-space: nowrap; text-decoration: none; } .btn-primary { background: var(--accent-grad); color: #fff; box-shadow: 0 8px 22px rgba(10,132,255,0.32), inset 0 1px 0 rgba(255,255,255,0.32); } html.dark .btn-primary { box-shadow: 0 0 26px rgba(94,92,230,0.5), inset 0 1px 0 rgba(255,255,255,0.25); } .btn-glass { background: var(--glass-strong); backdrop-filter: blur(24px) saturate(180%); -webkit-backdrop-filter: blur(24px) saturate(180%); border: 1px solid var(--glass-edge-soft); color: var(--ink); box-shadow: var(--shadow-soft); } .btn-soft { background: var(--glass-soft); border: 1px solid var(--glass-edge-soft); color: var(--ink); } .btn-dark-glass { background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.22); color: #fff; backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); } .btn-dark { background: #000; color: #fff; } .btn-sm { padding: 9px 18px; font-size: var(--fs-sub); } .btn-lg { padding: 15px 28px; font-size: var(--fs-title3); } .btn-block { display: flex; width: 100%; } /* orb icon button (round glass) */ .orb { width: 40px; height: 40px; border-radius: 50%; background: var(--glass); backdrop-filter: blur(22px) saturate(180%); -webkit-backdrop-filter: blur(22px) saturate(180%); border: 1px solid var(--glass-edge-soft); box-shadow: var(--shadow-soft); display: flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0; position: relative; } .orb svg { width: 17px; height: 17px; stroke: var(--ink-2); fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .orb.on-photo { background: rgba(16,24,40,0.34); border-color: rgba(255,255,255,0.34); } .orb.on-photo svg { stroke: #fff; } /* mini circular control */ .cmini { width: 34px; height: 34px; border-radius: 50%; background: var(--glass-strong); border: 1px solid var(--glass-edge-soft); display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: var(--shadow-soft); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); } .cmini svg { width: 16px; height: 16px; stroke: var(--ink-2); fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } /* search box / fields */ .search { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-radius: var(--r-md); background: var(--glass); backdrop-filter: blur(30px) saturate(180%); -webkit-backdrop-filter: blur(30px) saturate(180%); border: 1px solid var(--glass-edge-soft); box-shadow: var(--shadow-soft); } .search svg { width: 17px; height: 17px; stroke: var(--ink-3); fill: none; stroke-width: 2; flex-shrink: 0; } .search input { flex: 1; border: none; background: none; outline: none; font: var(--fs-body) var(--font); color: var(--ink); } .search input::placeholder { color: var(--ink-3); } .field { width: 100%; padding: 13px 15px; border-radius: var(--r-md); border: 1px solid var(--glass-edge-soft); background: var(--field); color: var(--ink); font: var(--fs-body) var(--font); outline: none; } .field::placeholder { color: var(--ink-3); } /* input summary card (Explore Where/When) */ .incard { flex: 1; border-radius: var(--r-md); padding: 12px 14px; cursor: pointer; background: var(--glass-strong); border: 1px solid var(--glass-edge-soft); box-shadow: var(--tier2); backdrop-filter: blur(30px) saturate(180%); -webkit-backdrop-filter: blur(30px) saturate(180%); } .incard .in-v { display: flex; align-items: center; gap: 6px; margin-top: 5px; font-size: 14px; font-weight: 800; color: var(--ink); } .incard .in-v svg { width: 15px; height: 15px; stroke: var(--accent-ink); fill: none; stroke-width: 2; flex-shrink: 0; } /* form rows */ .formrow { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; min-height: 54px; } .formrow + .formrow { border-top: 1px solid var(--sep); } .fr-label { display: flex; align-items: center; gap: 12px; font-weight: 500; } .fr-value { font-size: var(--fs-body); color: var(--ink-2); font-variant-numeric: tabular-nums; } .icon-sq { width: 34px; height: 34px; border-radius: 10px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .icon-sq svg { width: 18px; height: 18px; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .toggle { width: 50px; height: 30px; border-radius: 15px; background: var(--accent-a); position: relative; flex-shrink: 0; cursor: pointer; } .toggle.off { background: rgba(130,150,170,0.34); } .toggle::after { content:''; width: 26px; height: 26px; border-radius: 50%; background: #fff; position: absolute; top: 2px; right: 2px; box-shadow: 0 2px 4px rgba(0,0,0,0.18); } .toggle.off::after { right: auto; left: 2px; } .stepper { display: flex; align-items: center; gap: 12px; } .stepper button { width: 30px; height: 30px; border-radius: 50%; background: var(--glass-strong); border: 1px solid var(--glass-edge-soft); color: var(--ink); font-size: 17px; font-weight: 700; cursor: pointer; box-shadow: var(--shadow-soft); } /* timeline (itinerary) — LAT dotted rail */ .tl { display: flex; flex-direction: column; } .tl-row { display: flex; gap: 16px; padding-bottom: 16px; } .tl-rail { width: 40px; flex-shrink: 0; display: flex; flex-direction: column; align-items: center; } .tl-node { width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; background: var(--glass-strong); border: 1px solid var(--glass-edge-soft); box-shadow: var(--shadow-soft); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); } .tl-node svg { width: 18px; height: 18px; fill: none; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; } .tl-line { flex: 1; width: 2px; margin-top: 4px; background: repeating-linear-gradient(180deg, var(--glass-edge-soft) 0 5px, transparent 5px 10px); } .tl-time { font-size: var(--fs-cap); font-weight: 700; color: var(--ink-3); margin-top: 7px; text-align: center; line-height: 1.25; } .tl-gap { display: flex; align-items: center; gap: 6px; padding: 0 0 14px 56px; font-size: var(--fs-cap); color: var(--ink-2); font-weight: 600; } .tl-gap svg { width: 12px; height: 12px; stroke: var(--ink-3); fill: none; stroke-width: 1.8; } .n-flight svg { stroke: var(--c-flight); } .n-lodging svg { stroke: var(--c-lodging); } .n-activity svg { stroke: var(--c-activity); } .n-dining svg { stroke: var(--c-dining); } /* itinerary event card: image · details+vote · price/actions rail (desktop), stacks on mobile */ .ev { display: flex; align-items: stretch; border-radius: var(--r-lg); overflow: hidden; background: var(--glass); border: 1px solid var(--glass-edge-soft); box-shadow: var(--shadow-soft); backdrop-filter: blur(30px) saturate(180%); -webkit-backdrop-filter: blur(30px) saturate(180%); position: relative; } .ev .main { flex: 1; min-width: 0; display: flex; cursor: pointer; text-decoration: none; color: inherit; } a, a:visited { text-decoration: none; } .lcard, .lcard:hover, .tile, .ev .main { text-decoration: none; } .ev .ph { width: 184px; flex-shrink: 0; position: relative; overflow: hidden; } .ev .ph img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: var(--photo-filter); } .ev .ph .dots { position: absolute; bottom: 7px; left: 0; right: 0; display: flex; gap: 3px; justify-content: center; } .ev .ph .dots i { width: 4px; height: 4px; border-radius: 50%; background: rgba(255,255,255,0.55); } .ev .ph .dots i.on { background: #fff; width: 11px; border-radius: 2px; } .ev .bd { flex: 1; min-width: 0; padding: 14px 18px; display: flex; flex-direction: column; } .tvote { display: flex; align-items: center; gap: 14px; margin-top: auto; padding-top: 10px; } .tvote .tv { display: flex; align-items: center; gap: 5px; cursor: pointer; } .tvote .tv svg { width: 17px; height: 17px; stroke: var(--ink-3); fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; } .tvote .tv .n { font-size: 13px; font-weight: 700; color: var(--ink-2); } .tvote .tv.up.on svg { stroke: var(--c-activity); fill: rgba(22,184,154,0.18); } .tvote .tv.up.on .n { color: var(--c-activity); } .tvote .tv.down.on svg { stroke: var(--c-dining); fill: rgba(255,107,92,0.18); } .tvote .tv.down.on .n { color: var(--c-dining); } /* inline detail facts on the vote row */ .ev-facts { margin-left: auto; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; } .ev-fact { display: inline-flex; align-items: baseline; gap: 5px; padding: 5px 11px; border-radius: var(--r-pill); background: var(--glass-soft); border: 1px solid var(--pill-outline); white-space: nowrap; } .ev-fact .k { font-size: 9.5px; text-transform: uppercase; letter-spacing: .5px; color: var(--ink-3); font-weight: 700; } .ev-fact .v { font-size: var(--fs-cap); font-weight: 700; color: var(--ink-2); } /* right-side rail: price over vertical Remove/Edit/View — solid-ink money (Skylight) */ .ev-rail { width: 168px; flex-shrink: 0; display: flex; flex-direction: column; border-left: 1px solid var(--glass-edge-soft); } .ev-price { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 14px 12px; font-size: var(--fs-title2); font-weight: var(--fw-disp); color: var(--ink); text-align: center; line-height: 1.1; letter-spacing: -0.3px; font-variant-numeric: tabular-nums; } .ev-price small { font-size: var(--fs-cap); font-weight: 600; color: var(--ink-3); } .ev-price .cap { font-size: 10px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; color: var(--ink-3); } .card-foot { display: flex; flex-direction: column; border-top: 1px solid var(--glass-edge-soft); } .card-foot a { flex: 1; display: flex; align-items: center; justify-content: flex-start; gap: 8px; padding: 10px 16px; font-size: var(--fs-foot); font-weight: 600; color: var(--ink-2); text-decoration: none; background: var(--glass-soft); cursor: pointer; } .card-foot a + a { border-top: 1px solid var(--glass-edge-soft); } .card-foot a.view { color: var(--accent-ink); } .card-foot a svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } /* stacked fallback — tablet/mobile */ @media (max-width: 620px) { .ev-facts { display: none; } } @media (max-width: 860px) { .ev { flex-direction: column; } .ev-rail { width: auto; flex-direction: row; border-left: none; border-top: 1px solid var(--glass-edge-soft); } .ev-price { flex: 0 0 auto; flex-direction: row; align-items: baseline; gap: 5px; padding: 11px 18px; border-right: 1px solid var(--glass-edge-soft); font-size: var(--fs-title3); } .ev-price .cap { display: none; } .card-foot { flex: 1; flex-direction: row; border-top: none; } .card-foot a { justify-content: center; padding: 11px 0; } .card-foot a + a { border-top: none; border-left: 1px solid var(--glass-edge-soft); } } @media (max-width: 460px) { .ev .main { flex-direction: column; } .ev .ph { width: 100%; height: 150px; } } /* day chips — LAT event-dot spec: dow / num / per-event colored dots */ .daychip { min-width: 56px; padding: 9px 8px 8px; border-radius: 16px; text-align: center; cursor: pointer; flex-shrink: 0; background: var(--glass); border: 1px solid var(--glass-edge-soft); box-shadow: var(--shadow-soft); backdrop-filter: blur(18px) saturate(180%); -webkit-backdrop-filter: blur(18px) saturate(180%); } .daychip .dow { font-size: 10px; font-weight: 700; letter-spacing: .6px; color: var(--ink-3); text-transform: uppercase; } .daychip .num { font-size: 18px; font-weight: 800; color: var(--ink); margin-top: 1px; } .daychip .dc-dots { display: flex; gap: 2px; justify-content: center; margin-top: 3px; height: 4px; } .daychip .dc-dots i { width: 4px; height: 4px; border-radius: 50%; display: block; } .daychip.active { background: var(--ink); border-color: transparent; } html.dark .daychip.active { background: var(--accent-grad); box-shadow: var(--glow); } .daychip.active .dow, .daychip.active .num { color: var(--canvas-bg); } html.dark .daychip.active .dow, html.dark .daychip.active .num { color: #fff; } .daychip.active .dc-dots i { background: rgba(255,255,255,0.9) !important; } /* price rows / stats / avatars — solid-ink money everywhere (Skylight) */ .price-row { display: flex; justify-content: space-between; padding: 7px 0; color: var(--ink-2); font-variant-numeric: tabular-nums; } .price-row b { color: var(--ink); font-weight: 700; } .price-row.total { font-weight: 800; font-size: var(--fs-title3); color: var(--ink); padding-top: 11px; margin-top: 4px; border-top: 1px solid var(--sep); } .stat { text-align: center; } .stat .n { font-size: var(--fs-title); font-weight: var(--fw-disp); letter-spacing: var(--tr-num); color: var(--ink); font-variant-numeric: tabular-nums; } .stat .l { font-size: var(--fs-cap); color: var(--ink-2); font-weight: 600; } .avatar-stack { display: flex; } .avatar-stack .avatar, .avatar-stack .avatar-sm { margin-left: -8px; border: 2px solid var(--canvas-bg); } .avatar-stack .avatar:first-child, .avatar-stack .avatar-sm:first-child { margin-left: 0; } /* hero carousel */ .hero-car { position: relative; border-radius: var(--r-xl); overflow: hidden; } .hero-car img { width: 100%; height: 100%; object-fit: cover; filter: var(--photo-filter); display: block; } .hero-car .dots { position: absolute; bottom: 14px; left: 0; right: 0; display: flex; gap: 6px; justify-content: center; } .hero-car .dots i { width: 7px; height: 7px; border-radius: 50%; background: rgba(255,255,255,0.5); } .hero-car .dots i.on { background: #fff; width: 20px; border-radius: 3px; } /* trust strip */ .trust-strip { display: flex; align-items: center; gap: 8px; padding: 11px 14px; border-radius: var(--r-md); background: rgba(10,132,255,0.10); border: 1px solid rgba(10,132,255,0.4); } .trust-strip svg { width: 16px; height: 16px; stroke: var(--accent-ink); fill: none; stroke-width: 1.9; flex-shrink: 0; } /* progress steps (planning progress) */ .prog-step { display: flex; gap: 13px; padding: 11px 0; position: relative; } .prog-icon { width: 38px; height: 38px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; z-index: 1; background: var(--glass-strong); border: 1px solid var(--glass-edge-soft); box-shadow: var(--shadow-soft); } .prog-icon svg { width: 17px; height: 17px; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .prog-icon.done svg { stroke: var(--c-activity); } .prog-icon.active { background: var(--accent-grad); } .prog-icon.active svg { stroke: #fff; } .prog-icon.warn { background: rgba(232,147,42,0.18); } .prog-icon.warn svg { stroke: #E8932A; } .prog-icon.pending svg { stroke: var(--ink-3); } .prog-line { position: absolute; left: 18px; top: 52px; bottom: -6px; width: 2px; background: repeating-linear-gradient(180deg, var(--glass-edge-soft) 0 5px, transparent 5px 10px); } .prog-step:last-child .prog-line { display: none; } .prog-body { flex: 1; padding-bottom: 2px; } .ring { transform: rotate(-90deg); } .ring circle { fill: none; stroke-linecap: round; } .spinner { width: 15px; height: 15px; border: 2.5px solid rgba(255,255,255,0.4); border-top-color: #fff; border-radius: 50%; animation: spin 0.9s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } /* success PNR card — solid backing so ink stays high-contrast over photo */ .pnr-card { background: var(--glass-strong); } html.dark .pnr-card { background: rgba(10,14,24,0.66); border-color: rgba(255,255,255,0.16); } /* full-photo canvas (login / landing / success) */ .photocanvas { position: fixed; inset: 0; z-index: 0; overflow: hidden; } .photocanvas img { width: 100%; height: 100%; object-fit: cover; filter: var(--photo-filter); } .grade { position: fixed; inset: 0; z-index: 0; pointer-events: none; } /* chat bubbles */ .bubble { max-width: 82%; padding: 12px 16px; border-radius: 20px; font-size: var(--fs-body); line-height: 1.45; } .bubble.user { align-self: flex-end; background: var(--accent-grad); color: #fff; border-bottom-right-radius: 7px; } .bubble.ai { align-self: flex-start; background: var(--glass); border: 1px solid var(--glass-edge-soft); backdrop-filter: blur(24px) saturate(180%); -webkit-backdrop-filter: blur(24px) saturate(180%); color: var(--ink); border-bottom-left-radius: 7px; box-shadow: var(--shadow-soft); } /* motion annotation chip */ .motion-chip { display: inline-flex; align-items: center; gap: 5px; font-size: 10px; font-weight: 700; color: var(--ink-3); background: var(--glass-soft); border: 1px solid var(--glass-edge-soft); border-radius: 100px; padding: 3px 9px; } .motion-chip svg { width: 10px; height: 10px; stroke: var(--ink-3); fill: none; stroke-width: 2; } html.dark .motion-chip { color: rgba(255,255,255,0.7); } /* ── select/popover primitives (web adaptation of the iOS .sel-* sheets). Desktop: an anchored .popover card; mobile ≤760: full-width bottom sheet. ── */ .popover { position: relative; } .pop-card { border-radius: var(--r-lg); background: var(--glass-strong); backdrop-filter: blur(40px) saturate(190%); -webkit-backdrop-filter: blur(40px) saturate(190%); border: 1px solid var(--glass-edge-soft); box-shadow: var(--tier3); overflow: hidden; } .sel-seclabel { font-size: var(--fs-cap); font-weight: 700; color: var(--ink-3); text-transform: uppercase; letter-spacing: 1px; margin-bottom: 10px; } .sel-listrow { display: flex; align-items: center; gap: 14px; padding: 14px 16px; cursor: pointer; } .sel-listrow + .sel-listrow { border-top: 1px solid var(--sep); } .sel-listicon { width: 36px; height: 36px; border-radius: 12px; background: var(--glass-soft); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .sel-listicon.on { background: rgba(10,132,255,0.12); } html.dark .sel-listicon.on { background: rgba(100,210,255,0.14); } .sel-listicon svg { width: 17px; height: 17px; fill: none; stroke: var(--ink-3); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .sel-listicon.on svg { stroke: var(--accent-ink); } .sel-radio { width: 20px; height: 20px; border-radius: 50%; border: 1.6px solid var(--glass-edge-soft); flex-shrink: 0; } .sel-radio.on { border: none; background: var(--accent-grad); display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 6px rgba(10,132,255,0.38); } .sel-radio.on svg { width: 10px; height: 10px; stroke: #fff; fill: none; stroke-width: 2.8; stroke-linecap: round; stroke-linejoin: round; } .sel-step { display: flex; align-items: center; justify-content: space-between; padding: 15px 16px; } .sel-step + .sel-step { border-top: 1px solid var(--sep); } .sel-step .st-t { font-size: var(--fs-body); font-weight: 600; color: var(--ink); } .sel-step .st-s { font-size: var(--fs-foot); color: var(--ink-3); margin-top: 1px; } /* calendar + price-trend (select dates) */ .cal-dow { display: grid; grid-template-columns: repeat(7, 1fr); margin-bottom: 4px; } .cal-dow > div { text-align: center; font-size: 10.5px; font-weight: 700; color: var(--ink-3); padding: 3px 0; } .cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px 0; } .cd { text-align: center; padding: 5px 2px; font-size: 13px; font-weight: 500; color: var(--ink); cursor: pointer; border-radius: 9px; } .cd.dim { color: var(--ink-3); } .cd-wrap { position: relative; cursor: pointer; } .cd-band { position: absolute; inset: 3px 0; background: rgba(10,132,255,0.13); } html.dark .cd-band { background: rgba(100,210,255,0.16); } .cd-band.l { left: 50%; right: 0; top: 3px; bottom: 3px; } .cd-band.r { left: 0; right: 50%; top: 3px; bottom: 3px; } .cd-end { position: relative; margin: 3px 2px; text-align: center; font-size: 13px; font-weight: 800; color: #fff; background: var(--accent-grad); border-radius: 9px; padding: 2px 0; box-shadow: 0 3px 8px rgba(10,132,255,0.38); } .cd-mid { position: relative; text-align: center; padding: 5px 2px; font-size: 13px; font-weight: 700; color: var(--accent-ink); } .trend { display: flex; align-items: flex-end; gap: 5px; height: 56px; padding: 0 2px; } .trend .bar { flex: 1; border-radius: 5px 5px 0 0; background: var(--glass-soft); border: 1px solid var(--glass-edge-soft); position: relative; } .trend .bar.lo { background: rgba(22,184,154,0.32); border-color: rgba(22,184,154,0.5); } .trend .bar.hi { background: rgba(232,147,42,0.30); border-color: rgba(232,147,42,0.5); } /* filters — range slider + rating pills */ .frange { position: relative; height: 30px; display: flex; align-items: center; margin: 0 4px; } .frange .track { position: absolute; left: 11px; right: 11px; height: 4px; border-radius: 2px; background: var(--sep); } .frange .fill { position: absolute; height: 4px; border-radius: 2px; background: var(--accent-grad); } .frange .thumb { position: absolute; width: 22px; height: 22px; border-radius: 50%; background: var(--glass-strong); border: 2px solid var(--accent-a); box-shadow: 0 2px 8px rgba(10,132,255,0.32); cursor: pointer; z-index: 2; } .rpill { padding: 9px 14px; border-radius: var(--r-pill); cursor: pointer; font-size: var(--fs-foot); font-weight: 600; color: var(--ink-2); background: var(--glass); border: 1px solid var(--glass-edge-soft); backdrop-filter: blur(18px) saturate(180%); -webkit-backdrop-filter: blur(18px) saturate(180%); display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; } .rpill.on { background: var(--ink); color: var(--canvas-bg); border-color: transparent; font-weight: 700; } html.dark .rpill.on { background: var(--accent-grad); color: #fff; } /* ── shared page helpers (promoted from per-page duplicates) ── */ /* deal / watch card (Home deals rail, Inbox watch-more) */ .deal { border-radius: var(--r-lg); overflow: hidden; cursor: pointer; display: block; color: inherit; } .deal .dp { position: relative; height: 118px; } .deal .dp img { width: 100%; height: 100%; object-fit: cover; filter: var(--photo-filter); display: block; } .deal .dp .sc { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, rgba(6,12,22,0.6)); } .deal .dp .pct { position: absolute; top: 9px; left: 9px; background: rgba(14,140,126,0.92); color: #fff; border: none; } .deal .dp .city { position: absolute; left: 12px; bottom: 9px; color: #fff; font-size: 13.5px; font-weight: 800; } .deal .drow { display: flex; align-items: center; justify-content: space-between; padding: 10px 13px; } .deal .dl { font-size: 11px; color: var(--ink-3); font-weight: 700; } .deal .dv { font-size: 16px; font-weight: 800; color: var(--ink); } .deal .dv s { font-size: 11px; color: var(--ink-3); font-weight: 600; } /* back link */ .back-link { display: inline-flex; align-items: center; gap: 7px; color: var(--ink-2); font-size: var(--fs-sub); font-weight: 600; text-decoration: none; margin-bottom: 18px; } .back-link:hover { color: var(--ink); } .back-link svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } /* detail-page two-column (main + 380px rail) */ .detail-cols { display: grid; grid-template-columns: 1fr 380px; gap: 28px; align-items: start; margin-top: 22px; } @media (max-width: 1023px) { .detail-cols { grid-template-columns: 1fr; } .detail-cols .rail { position: static; } } .rail-card { padding: 20px; } .rail-divider { height: 1px; background: var(--sep); margin: 16px 0; } /* explore chrome rows */ .in-row { display: flex; gap: 12px; margin: 18px 0 14px; flex-wrap: wrap; } .sortbar { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; margin-bottom: 20px; } .sortbar::-webkit-scrollbar { height: 0; } /* footer */ .footer { margin-top: 40px; border-top: 1px solid var(--glass-edge-soft); background: var(--bar-bg); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); position: relative; z-index: 1; } .footer .inner { max-width: var(--maxw); margin: 0 auto; padding: 30px clamp(20px, 4vw, 40px); display: flex; flex-wrap: wrap; gap: 30px; justify-content: space-between; color: var(--ink-2); font-size: var(--fs-sub); } .footer a { color: var(--ink-2); text-decoration: none; display: block; padding: 4px 0; } .footer a:hover { color: var(--ink); } .footer h4 { color: var(--ink); font-size: var(--fs-sub); margin-bottom: 8px; } /* ============================================================ RESPONSIVE ============================================================ */ @media (max-width: 1023px) { .cols, .cols.sidebar-left { grid-template-columns: 1fr; } .rail { position: static; } } @media (max-width: 760px) { :root { --fs-display: 36px; --fs-hero: 30px; --fs-title: 24px; } .nav { display: none; } .hamburger { display: flex; } .appbar { gap: 10px; } .appbar .actions { gap: 7px; } .appbar .actions .hide-sm { display: none; } /* hamburger reveals the nav as a dropdown panel under the bar (app.js toggles body.nav-open) */ /* solid panel: nested backdrop-filters don't compose inside the already-filtered appbar */ body.nav-open .appbar .nav { display: flex; position: absolute; top: var(--bar-h); left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 2px; margin-left: 0; padding: 10px max(20px, 4vw) 14px; background: var(--canvas-bg); border-bottom: 1px solid var(--glass-edge-soft); box-shadow: var(--shadow); } body.nav-open .appbar .nav a { padding: 12px 15px; } .lcard .ph { width: 116px; min-height: 116px; } .lc-desc { -webkit-line-clamp: 2; } .htc-photo { height: 176px; } .htc-num { font-size: 36px; } .htc-name { font-size: 19px; } } @media (max-width: 480px) { /* keep the bar within a true phone viewport: mark-only brand, tighter icon row */ .appbar .wordmark, .mktbar .wordmark { display: none; } } @media (max-width: 460px) { .lcard { flex-direction: column; } .lcard .ph { width: 100%; height: 150px; min-height: 0; } .lcard.book { border-left: none; border-top: 3px solid var(--accent-a); } .cardgrid, .cardgrid.tiles { grid-template-columns: 1fr 1fr; } .htc-photo { height: 158px; } }