/* tokens.css — design tokens for travelguides.lk * * Source of truth: the approved homepage mock (`Discover Home.dc.html`). Values * are taken verbatim from that design so the build matches it pixel-for-pixel. * (The generic `_ds/` token export that shipped in the handoff used a different * palette/serif and does NOT match the screens — it is intentionally ignored.) */ :root { /* ---- Brand ---- */ --teal: #147b82; /* primary */ --teal-press: #0f6066; /* darker press/hover */ --teal-surface: #eef4f3; /* light teal fill behind icons/chips */ --teal-ink: #147b82; /* teal text on light */ /* ---- Neutrals (from the mock) ---- */ --canvas: #e9ecec; /* page backdrop behind the app column (desktop) */ --app-bg: #f6f7f7; /* app surface */ --surface: #ffffff; /* cards, inputs, buttons */ --ink: #1a1a1a; /* headings / primary text */ --body: #4b5563; /* body paragraphs */ --muted: #a1a1a1; /* secondary text */ --muted-2: #9ca3af; /* tertiary / inactive icons */ --label: #6b7280; /* eyebrow labels */ --hairline: rgba(0,0,0,0.06); /* card/control borders */ --hairline-2: rgba(0,0,0,0.05); /* inner dividers */ /* ---- Status ---- */ --danger: #c14a3c; --danger-bg: #fbeae7; --danger-border: #f3d4cd; --danger-ink: #9a4334; /* ---- Radii (from the mock) ---- */ --r-sm: 10px; --r-md: 13px; --r-lg: 14px; --r-card: 18px; --r-xl: 22px; --r-2xl: 24px; --r-pill: 9999px; --r-screen: 40px; /* ---- Shadows ---- */ --shadow-card: 0 1px 2px rgba(0,0,0,0.04); --shadow-screen: 0 25px 50px -12px rgba(0,0,0,0.22); --shadow-nav: 0 16px 40px -16px rgba(8,26,30,0.42); --shadow-fab: 0 8px 20px -10px rgba(0,0,0,0.30); /* ---- Glass ---------------------------------------------------------------- ONE material, two contexts, so the app stops carrying a dozen ad-hoc blur recipes. Consume these; do not hand-roll new backdrop-filters. --glass-* : chrome on the PALE app background (nav, status strip, action bar). Cool-tinted and genuinely translucent so content refracts; ink-tinted hairline, never white. --glass-dark-* : chrome over PHOTOGRAPHY (place-detail hero controls, .bx-glass, image pills). A white hairline is correct here because it sits on an image. The blur is intentionally strong; the *fill* is what controls how much shows through, so keep the fills low. */ /* NB: for the bottom nav these values did nothing for a long time — the nav carried an unconditional view-transition-name, which isolated it from the page backdrop so its backdrop-filter sampled nothing and no fill/blur ever rendered as glass. That is fixed in design-system.css (the name is now gated to html.is-vt, i.e. only during a navigation). With the blur finally live, these are the screenshot-verified values: a 0.40 fill + blur(28px) saturate(200%) frosts the backdrop enough that detail behind the bar is no longer legible, while the bright top edge (--glass-hi) + elevation shadow keep it reading as a pane on a flat page. */ --glass-bg: rgba(255,255,255,0.40); --glass-blur: blur(28px) saturate(200%); --glass-border: rgba(255,255,255,0.60); --glass-hi: rgba(255,255,255,0.95); /* 1px top inner highlight — the pane edge */ /* The specular sheen laid OVER --glass-bg: brighter at the top, fading down, so the surface has the gradient of a real pane instead of a flat wash. This, the bright top edge (--glass-hi) and the elevation shadow are what make the chrome read as glass on a near-flat page, where the fill alone cannot. */ --glass-sheen: linear-gradient(180deg, rgba(255,255,255,0.28) 0%, rgba(255,255,255,0.10) 55%, rgba(255,255,255,0.20) 100%); --glass-edge-lo: inset 0 -1px 0 rgba(10,30,32,0.07); /* faint bottom inner line — the pane's far edge */ --glass-dark-bg: rgba(10,26,28,0.34); --glass-dark-blur: blur(20px) saturate(150%); --glass-dark-border: rgba(255,255,255,0.20); --glass-dark-strong: rgba(12,26,28,0.52); /* for controls that pass over bright photo */ /* --glass-panel-* : POPUPS / SHEETS / DROP-DOWNS that carry dense text. Unlike the chrome bars, readability is the constraint, so the fill is high (frosted, not a film) while the strong blur still lets the page defocus behind it. This is the material the drawer, sheets, menu grid, filter sheet, notifications, assistant, consent + install cards and map dropdown were missing entirely. */ --glass-panel-bg: rgba(252,253,253,0.58); --glass-panel-blur: blur(34px) saturate(220%) brightness(104%); --glass-panel-border: rgba(255,255,255,0.62); /* The pane EDGE. On a near-flat page the blur alone cannot read as glass — blurring a flat colour returns that same flat colour — so a bright top highlight plus real elevation is what makes it look like a sheet of glass rather than a white film. */ --glass-panel-hi: inset 0 1px 0 rgba(255,255,255,0.75); --glass-panel-shadow: 0 18px 48px -16px rgba(10,30,32,0.34), 0 2px 10px rgba(10,30,32,0.10); /* --glass-scrim-* : the dimmer BEHIND a panel. A little blur makes the page visibly go out of focus instead of just darkening — the single thing that makes an overlay read as glass rather than a white box on a grey wash. */ --glass-scrim-bg: rgba(14,26,28,0.38); --glass-scrim-blur: blur(10px) saturate(112%); /* ---- Typography ---- */ --font: 'Manrope', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; /* ---- Motion ---- */ --ease: cubic-bezier(0.16, 1, 0.3, 1); --dur: 220ms; --dur-page: 180ms; /* page-enter slide/fade (View Transitions) */ --dur-page-out: 120ms; /* outgoing page */ /* ---- App column ---- */ --app-max: 440px; /* the mobile-app column width on desktop */ --gutter: 24px; /* horizontal screen padding */ --nav-space: calc(116px + var(--safe-b, 0px)); /* bottom pad clears floating nav + home indicator */ /* ---- Safe areas (notch, Dynamic Island, punch-hole, home indicator) ---- Raw device insets. env() resolves to the 0px fallback wherever a device has no cutout (desktop, Android without a notch, iOS Safari tabs in portrait), so every derived value below collapses to the design's original number and nothing changes. Never hard-code a per-device pixel value here. */ --safe-t: env(safe-area-inset-top, 0px); --safe-b: env(safe-area-inset-bottom, 0px); --safe-l: env(safe-area-inset-left, 0px); --safe-r: env(safe-area-inset-right, 0px); --safe-gap: 12px; /* breathing room below the cutout */ --pad-top: max(32px, calc(var(--safe-t) + var(--safe-gap))); /* .app__main top */ --pad-top-lg: max(44px, calc(var(--safe-t) + var(--safe-gap))); /* header / hero bars */ --gutter-l: calc(var(--gutter) + var(--safe-l)); --gutter-r: calc(var(--gutter) + var(--safe-r)); } /* ============================================================================ Adaptive tiers: retuning these two tokens reflows the whole app (shell, nav, action bar, sheets, assistant, consent all key off them). Tier 0: foldable cover screens and other ultra-narrow displays. Tier 2: unfolded foldables and small tablets held portrait. Tier 3: tablets and unfolded foldables held landscape. ========================================================================== */ @media (max-width: 359px) { :root { --gutter: 16px; --nav-space: calc(104px + var(--safe-b, 0px)); } } @media (min-width: 600px) { :root { --app-max: 584px; --gutter: 28px; } } @media (min-width: 800px) { :root { --app-max: 720px; --gutter: 32px; } }