/* ============================================================ Wayfinder — design tokens Source of truth: "Vietnam Wayfinder - Styles.dc.html" Light = default (:root). Dark = [data-theme="dark"] (Đêm). Việt Red (#DA251D) is the single primary red in both modes. ============================================================ */ :root { /* Type families */ --font: 'Space Grotesk', system-ui, -apple-system, sans-serif; --mono: 'IBM Plex Mono', ui-monospace, Menlo, monospace; --display: 'Bricolage Grotesque', 'Space Grotesk', sans-serif; /* Radii (Styles · Shape & rhythm) */ --r-pill: 999px; /* buttons, header bar, chips, toggles */ --r-card: 16px; /* cards & option rows */ --r-input: 14px; /* text inputs */ --r-chip: 11px; /* small chips */ --r-sheet: 20px; /* sheets / overlays */ --r-tile: 14px; /* section tiles */ --r-photo: 16px; /* place photos */ --r-thumb: 12px; /* feed thumbnails */ /* ---- LIGHT (default) ---- */ --bg: #F1F0F3; --gold-wash: #F5E3B5; /* secondary / flow pages in light */ --card: #FFFFFF; --tile-fill: #E4E3E8; /* solid chip fill for the back button — a step DOWN from --bg in light */ --tile-sheen: rgba(255,255,255,.95); /* light on the tile's curved top. Stronger in light: a white sheen over a grey chip has far less to work with than over a near-black one. */ --ink: #191A22; --ink-2: rgba(25,26,34,.65); /* body-secondary */ --ink-3: rgba(25,26,34,.55); /* captions */ --ink-4: rgba(25,26,34,.5); --ink-5: rgba(25,26,34,.45); --line: rgba(25,26,34,.12); --line-soft: rgba(25,26,34,.08); --line-strong: rgba(25,26,34,.25); --line-mid: rgba(25,26,34,.18); --primary: #DA251D; /* Việt Red */ --on-primary: #FFFFFF; --primary-ring: rgba(218,37,29,.08); --primary-soft: rgba(218,37,29,.15); --gold: #F5C242; /* Star Gold */ --gold-ink: #9A6B00; /* gold text on light */ --teal: #23A69D; --nav-hover: var(--teal); /* header-nav hover: teal in light, gold in dark */ --nav-active: #0F6F69; /* active pill ring + label — 6.00:1 on #FFF (WCAG 1.4.11) */ --nav-active-fill: rgba(35,166,157,.14); /* teal wash; label on it = 5.22:1 (WCAG 1.4.3) */ --eyebrow: #23A69D; /* mono section eyebrows on light */ --explore: #1F56AB; /* Explore seat & compass — light scheme */ --field-bg: #FFFFFF; /* OPAQUE twin of --field-bg, used only by the :-webkit-autofill inset-shadow fix (an alpha fill would let Chrome's blue show through). Light: --field-bg is already opaque, so identical. */ --field-fill: #FFFFFF; --field-line: rgba(25,26,34,.14); --header-flat: #FFFFFF; --header-flat-line: rgba(25,26,34,.10); --sheet: rgba(255,255,255,.96); --sheet-line: rgba(25,26,34,.12); --shadow-card: 0 1px 3px rgba(25,26,34,.06); --shadow-pill: 0 2px 10px rgba(25,26,34,.06); --shadow-pop: 0 12px 40px rgba(25,26,34,.08); /* header pill over imagery (both themes) */ --header-glass: rgba(12,13,18,.55); --header-glass-line: rgba(255,255,255,.12); --on-glass: #ECEBF2; } /* ---- DARK — Đêm ---- */ [data-theme="dark"] { --bg: #0C0D12; --card: #171A26; --tile-fill: #1F2230; /* and a step UP from --bg in dark, so the tile lifts either way */ --tile-sheen: rgba(255,255,255,.16); --ink: #ECEBF2; --ink-2: rgba(236,235,242,.6); --ink-3: rgba(236,235,242,.45); --ink-4: rgba(236,235,242,.45); --ink-5: rgba(236,235,242,.4); --line: rgba(255,255,255,.14); --line-soft: rgba(255,255,255,.10); --line-strong: rgba(255,255,255,.25); --line-mid: rgba(255,255,255,.20); --primary: #DA251D; /* Việt Red — single red, both modes */ --on-primary: #FFFFFF; --primary-ring: rgba(218,37,29,.14); --primary-soft: rgba(255,255,255,.12); --gold: #F5C242; --gold-ink: #F5C242; /* gold text on dark = bright gold */ --teal: #23A69D; --nav-hover: var(--gold); /* header-nav hover: gold in dark */ --nav-active: #F5C242; /* active pill ring + label — 10.46:1 on #171A26 (WCAG 1.4.11) */ --nav-active-fill: rgba(245,194,66,.16); /* gold wash; label on it = 7.33:1 (WCAG 1.4.3) */ --eyebrow: #F5C242; /* mono section eyebrows on dark */ --explore: #3E7DC4; /* Explore seat & compass — dark scheme */ --field-bg: rgba(255,255,255,.06); /* the flattened result of --field-bg over --bg (#0C0D12 + 6% white) — matches an unfilled field exactly, where --card (#171A26) would have read as a slightly different, bluer shade. */ --field-fill: #1B1C21; --field-line: rgba(255,255,255,.16); --header-flat: #171A26; --header-flat-line: rgba(255,255,255,.14); --sheet: rgba(23,26,38,.92); --sheet-line: rgba(255,255,255,.14); --shadow-card: 0 1px 3px rgba(0,0,0,.4); --shadow-pill: 0 2px 12px rgba(0,0,0,.5); --shadow-pop: 0 16px 48px rgba(0,0,0,.55); } /* Flow / secondary pages take the gold wash in LIGHT mode only. Browse pages (landing, section, place) keep the standard surface. */ [data-theme="light"] body[data-wash] { --bg: var(--gold-wash); } :root body[data-wash] { --bg: var(--gold-wash); } [data-theme="dark"] body[data-wash] { --bg: #0C0D12; } /* ============================================================ Wayfinder — app styles All styling lives here. No CSS in any HTML document. Reproduces "Pass 1" + "Pass 2" as one responsive app. Mobile-first; desktop layout kicks in at 760px. ============================================================ */ /* ---------- reset / base ---------- */ *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; max-width: 100%; overflow-x: clip; } /* clip stray horizontal scroll; clip (not hidden) keeps sticky headers working */ html { -webkit-text-size-adjust: 100%; } body { background: var(--bg); color: var(--ink); font-family: var(--font); line-height: 1.5; min-height: 100vh; transition: background .25s ease, color .25s ease; } a { color: inherit; text-decoration: none; } button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; } img { max-width: 100%; display: block; } h1, h2, h3, p { margin: 0; } ul { margin: 0; padding: 0; list-style: none; } :focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: 4px; } /* ---------- layout shell ---------- */ .app { min-height: 100vh; display: flex; flex-direction: column; } .view { flex: 1 0 auto; } /* header slot is a semantics-free wrapper — display:contents removes its box so the sticky .site-header inside it belongs to the tall .app (its real containing block). Without this the sticky header sits in a wrapper only as tall as itself and scrolls away the instant you scroll past its own height. */ [data-slot="header"] { display: contents; } .wrap { width: 100%; max-width: 1128px; margin: 0 auto; padding: 0 20px; } @media (min-width: 760px) { .wrap { padding: 0 40px; } } .stack > * + * { margin-top: 18px; } .spacer { flex: 1; } /* mono eyebrow / label */ .eyebrow { font: 500 9.5px var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--eyebrow); } .eyebrow--muted { color: var(--ink-4); } .mono { font-family: var(--mono); } /* ---------- wordmark ---------- */ .wordmark { font: 500 16px var(--font); letter-spacing: -.01em; white-space: nowrap; } .wordmark .star { color: var(--primary); } .wordmark--lg { font-size: 24px; font-weight: 500; } /* primary logo (Four Tiles) locked up left of the wordmark. On a light chip so the dark tile keeps its backing on the dark header (brand rule: marks need solid backing). */ .brand-lock { display: inline-flex; align-items: center; gap: 9px; } .brand-logo { width: 26px; height: 26px; flex: none; display: inline-flex; background: #F1F0F3; border-radius: 7px; padding: 2px; box-sizing: border-box; } .brand-logo svg { width: 100%; height: 100%; display: block; } /* header brand lockup — first-visit chooser only (no-city header, "Landing Final" design). Same VIETNAM/badge/WAYFINDER pattern as .brand-lockup (signin page, footer) but sized for the header pill. Absolutely centred on the header-bar itself (NOT flex-centred in the remaining space beside the hamburger/avatar) — flex-centring left it visually off-center, since the hamburger's own width biased the "remaining space" left of true center. */ .header-bar--nonav { position: relative; } .header-bar--nonav .header-brand-lockup { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); } /* Chooser page only: NO HAMBURGER, and the toggle takes its slot. ui.js:167 records that the original mock for this page was a bare pill, and the hamburger was kept solely because the flyout was the only route to theme, language and sign-in for a signed-out visitor with no city. Language now lives in this header and sign-in has its own buttons on the page, so the flyout was guarding a menu with no section tiles and no city name. Theme moves one tap later, after a city is picked, which is the only thing this page asks anyone to do. */ .header-bar--nonav .hamburger { display: none; } /* ...and the toggle then sits almost on the phone's edge. The lockup is centred across the FULL bar, so every pixel the toggle gives back is a pixel it stops covering "WAYFINDER". Two-class selector so it beats the mobile .header-bar padding regardless of source order, and capped below 760px because the toggle does not exist above it. */ @media (max-width: 759px) { .header-bar.header-bar--nonav { padding-right: 2.5px; } .header-bar--nonav .header-lang { margin-right: 0; } } .header-brand-lockup { display: flex; align-items: center; justify-content: center; gap: 8px; text-decoration: none; min-width: 0; } .header-brand-lockup__word { font-family: 'Aboreto', serif; letter-spacing: .3em; text-indent: .3em; text-transform: uppercase; font-size: 12px; color: var(--ink); white-space: nowrap; } .header-brand-lockup__icon svg { width: 34px; height: 34px; border-radius: 8px; display: block; flex: none; } @media (min-width: 760px) { .header-brand-lockup__word { font-size: 14px; letter-spacing: .34em; text-indent: .34em; } .header-brand-lockup__icon svg { width: 40px; height: 40px; } } /* ---------- header ---------- */ .site-header { position: sticky; top: 0; z-index: 40; padding: 12px 0 0; } .header-bar { display: flex; align-items: center; gap: 14px; border-radius: var(--r-pill); padding: 2.5px 16px 2.5px 20px; /* vertical halved 5→2.5; left 20 (more room before the pin), right 16 (desktop band; mobile overrides below) */ background: var(--header-flat); border: 1px solid var(--header-flat-line); box-shadow: var(--shadow-pill); } .header-nav { display: none; gap: 4px; margin-left: auto; } /* transparent ring by default → the active pill adds no width, so nothing shifts on state change */ .header-nav a { font: 500 13.5px var(--font); color: var(--ink); display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; border-radius: var(--r-pill); border: 1.5px solid transparent; transition: background-color .12s ease, color .12s ease, border-color .12s ease; } /* Nav tiles, SITE-WIDE (owner): bare colour tiles — NO gold glow, NO white backing card; +15% size. (Was scoped to .header-nav; lifted to the base so the mobile tab bar + nav drawer match.) */ .nav-ico { width: 25.3px; height: 25.3px; flex: none; } /* 22 +15% */ .nav-ico > rect:first-of-type { fill: transparent; } /* drop the white backing card behind the colour chip */ .header-nav .nav-ico { width: 40px; height: 40px; } /* desktop header tiles — matched to the city icon (owner: all 40px, even) */ /* Desktop nav: hover shows the gold text colour; the ACTIVE/selected item gets NO pill (owner's call — removed the wash + ring + bold). aria-current="true" still marks it for screen readers, so the visual "where I am" pill is gone but the SR state remains. Desktop only — .header-nav is display:none under 760px, so the mobile tab bar keeps its own dim/undim mechanic. */ .header-nav a:hover { color: var(--nav-hover); } .header-nav a.is-active { color: var(--nav-hover); } /* current section = same gold/teal as hover, colour only (no pill) */ /* destination tile is icons-only (owner's call — matches the mobile bar), so it needs a squarer pad than the icon+label items or it reads as a stretched lozenge */ .header-nav__dest { padding-left: 8px; padding-right: 8px; } .header-actions { display: flex; align-items: center; gap: 10px; margin-left: auto; } .hamburger { display: inline-flex; flex-direction: column; justify-content: center; gap: 4px; width: 30px; height: 30px; flex: none; color: inherit; padding: 6px; } .hamburger span { display: block; width: 18px; height: 2px; border-radius: 2px; background: currentColor; } /* EN/VI in the header bar — MOBILE ONLY, hidden at the same breakpoint that hides the hamburger so the two can never disagree about what mobile means. ⚠ NOT a filled segmented pill: at this size the active fill became a squashed circle overlapping its neighbour. Plain text with a hairline between, active in the site red, which also keeps the control the same height as the bar — the header is sticky sitewide, so anything taller shifts every page down. */ .header-lang { position: relative; flex: none; display: inline-flex; align-items: center; height: 29px; padding: 2px; /* 29px sits inside the hamburger's 30px, bar unchanged */ margin-right: 6px; /* a little air before the hamburger */ background: var(--primary-soft); border: 0; border-radius: var(--r-pill); font: 500 12px/1 var(--font); letter-spacing: .02em; cursor: pointer; } /* the sliding indicator. One tap anywhere on the button flips the class and the pill travels, which is the whole point of the control — the labels never move, only the fill does. */ .header-lang__pill { position: absolute; top: 2px; left: 2px; width: 31px; height: 25px; border-radius: var(--r-pill); background: var(--primary); transition: transform .18s ease; } .header-lang.is-vi .header-lang__pill { transform: translateX(31px); } .header-lang__opt { position: relative; z-index: 1; width: 31px; text-align: center; color: var(--ink-2); transition: color .18s ease; } .header-lang:not(.is-vi) .header-lang__opt[data-lang="en"], .header-lang.is-vi .header-lang__opt[data-lang="vi"] { color: var(--on-primary); font-weight: 700; } @media (prefers-reduced-motion: reduce) { .header-lang__pill, .header-lang__opt { transition: none; } } @media (min-width: 760px) { .header-nav { display: flex; } .hamburger { display: none; } /* desktop uses the inline nav instead */ .header-lang { display: none; } /* desktop reaches language through Preferences */ /* Anchor the desktop bar as a fixed 3-zone grid so the nav sits DEAD-CENTRE and stops sliding: equal minmax(0,1fr) side rails mean the city-name length (left) and avatar (right) can't move the centre. Only when a city is chosen (3 real zones exist) — the first-visit chooser keeps the flex layout. Replaces the old margin-left:auto float that made the nav position depend on neighbour widths (city name → shift #1; Stay/Live label width → shift #2). */ .header-bar--hascity { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); } .header-bar--hascity .header-city { justify-self: start; min-width: 0; } .header-bar--hascity .header-nav { margin-left: 0; justify-self: center; } .header-bar--hascity .header-actions { margin-left: 0; justify-self: end; } /* long city names ellipsize inside the left rail instead of spilling toward the nav */ .header-city .city-dd__trigger { min-width: 0; } .header-city .city-dd__value { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; } /* reserve a constant width for the stay↔live seat label so the persona swap can't resize the nav (kills the residual shift — "Stay" is wider than "Live" in this proportional font). inline-block so min-width + centring apply to the span. */ .header-nav a[data-nav="stay"] span, .header-nav a[data-nav="live"] span { display: inline-block; min-width: 2.6em; text-align: center; } } @media (max-width: 759px) { /* folder-tab header: a full-width band fused to the iOS status-bar frame, with rounded-bottom "shoulders". Extends up under the status bar via safe-area-inset-top; colour follows the theme so it keeps matching the status-bar backing. (Capacitor-ready: same env() the native WebView uses.) */ .site-header { padding: 0; } .site-header .wrap { padding: 0; max-width: none; } .header-bar { border-radius: 0; border: none; /* left inset 14px (was 10 — still a touch tight against the pin); right stays 20 for the hamburger */ padding: calc(9px + env(safe-area-inset-top, 0px)) 20px 12px 14px; box-shadow: 0 4px 12px rgba(0,0,0,.14); } /* the no-city brand lockup (VIETNAM [logo] WAYFINDER) is absolutely centred on .header-bar's full box (see the rule above) — fine when top/bottom padding are equal, but on a standalone-install iPhone (camera-pill/notch) the top padding balloons via env(safe-area-inset-top) while bottom stays 12px, so true 50% lands the lockup well above the hamburger's actual row (which still centers on the padding BOX, i.e. lower, closer to the smaller bottom pad). Nudge down by half that top/bottom padding delta so it lines up with the hamburger regardless of notch size — evaluates to ~0 on a browser tab (env() is 0 there) and to the right offset on any notched device without hardcoding a specific inset value. */ .header-bar--nonav .header-brand-lockup { top: calc(50% + (env(safe-area-inset-top, 0px) - 3px) / 2); } /* landing: let the hero photo be the background — no tinted glass band */ .hero .header-bar { box-shadow: none; background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; } /* content/image directly below the menu should be square, not rounded */ .hero__media { border-radius: 0; } /* mobile: profile moves into the flyout, so the header avatar is gone — the hamburger (now inside header-actions) takes the far-right slot the avatar used to hold */ .header-actions .avatar { display: none; } } /* Header city switcher — the building tile + shared city dropdown, lifted out of the profile sheet for one-tap change. Shown on BOTH mobile and desktop (owner's call), taking the top-left slot the brand used to occupy; the brand moves to the footer (desktop) / drops (mobile — logo lives on the app icon). Only rendered when a city is chosen, so it never appears on the first-visit chooser. */ /* pin RIGHT of the dropdown → ( City ⌄ ) [pin] on BOTH mobile & desktop (owner, 2026-08-07) — supersedes the earlier "pin LEFT of the dropdown" order below. */ .header-city { display: inline-flex; align-items: center; gap: 12px; min-width: 0; } /* WAYFINDER text-tag on desktop RETIRED (owner: wasn't supposed to be there) — desktop now matches mobile's [pin] City⌄, no separate desktop-only branch needed. .header-brand-tag kept in the DOM (app.js still emits it) but permanently hidden so nothing depends on removing the markup. */ .header-brand-tag { display: none; } /* Pin back on the LEFT of the dropdown pill (2026-08-08), both breakpoints — reverts the v325 order-swap. DOM order (pin, then dropdown — see ui.js headerBar) is what we want, so no `order` override needed at all; explicit order:1/2 kept anyway (rather than deleting the rule) so a future markup reorder can't silently flip this again. */ .header-city__pin { order: 1; } .header-city .city-dd { order: 2; } .header-city .city-dd__value { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; } .header-city .city-dd__trigger { min-width: 0; } .header-city__pin { display: inline-flex; align-items: center; } /* decorative — not clickable */ .header-city .nav-ico { width: 40px; height: 40px; } /* the map-pin beside the dropdown */ /* tile removed → the bare pin lifts off the screen with a soft drop shadow (overflow visible so the shadow isn't clipped by the svg box) */ /* hug the glyph — the pin is tall/narrow, so a 40px-wide box left ~10px dead space on each side that pushed it off the edge; 24px width trims that to the glyph */ /* pin with the TIGHT ground-ring: viewBox hugs it (24×47.3, slim) → box 18×36 to match that aspect; overrides .nav-ico's 40×40. Tunable if the owner wants it bigger/smaller. */ .header-city .city-pin { width: 16.2px; height: 32.4px; overflow: visible; filter: drop-shadow(0 3px 3px rgba(0,0,0,.32)); } .header-city .city-dd { margin-top: 0; align-self: center; } /* neutralise the settings-sheet spacing */ /* chevron BACK to the RIGHT of the city name (owner reverted, 2026-08-07) — the brief "chevron LEFT" row-reverse experiment above is gone; natural DOM order (value, chev), same as pre-v325. */ .header-city .city-dd__trigger { padding: 6px 12px; font-size: 14px; border-radius: var(--r-pill); } /* light mode: reverse the desktop header pill → dark fill + light text (dark mode already reads that way) */ [data-theme="light"] .header-city .city-dd__trigger { background: var(--ink); border-color: var(--ink); color: #FFFFFF; } [data-theme="light"] .header-city .city-dd__trigger:hover { border-color: var(--ink); } [data-theme="light"] .header-city .city-dd__chev { color: rgba(255,255,255,.6); } /* brand moves to the footer (desktop) / drops (mobile) — ONLY when a city control replaces it (the first-visit chooser has no city → brand stays). Applies at every width now. */ .header-bar--hascity .brand-lock { display: none; } /* profile avatar button */ .avatar { width: 30px; height: 30px; border-radius: 50%; border: 1.5px solid var(--ink); position: relative; flex: none; background: none; } .avatar svg { width: 100%; height: 100%; display: block; } .avatar svg path, .avatar svg circle { fill: var(--ink); } .avatar--filled { background: var(--primary); border-color: var(--primary); } .avatar--filled svg path, .avatar--filled svg circle { fill: var(--on-primary); } .avatar__initials { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font: 700 12px var(--font); letter-spacing: .01em; color: var(--on-primary); } .iconbtn { font: 400 15px var(--font); color: var(--ink-3); padding: 4px; line-height: 1; } /* header pill floating over a hero image */ .hero .header-bar { background: var(--header-glass); border-color: var(--header-glass-line); backdrop-filter: blur(11px); -webkit-backdrop-filter: blur(11px); color: var(--on-glass); box-shadow: none; } .hero .header-nav a { color: #fff; } .hero .header-nav a:hover, .hero .header-nav a.is-active { color: var(--nav-hover); } .hero .wordmark { color: var(--on-glass); } .hero .avatar { border-color: var(--on-glass); } .hero .avatar svg path, .hero .avatar svg circle { fill: var(--on-glass); } /* ---------- footer ---------- */ .site-footer { flex: none; } /* 3-zone grid so the wordmark is dead-centre regardless of the side groups' widths (equal 1fr rails flank an auto centre). Left group left-justified, CTA right-justified. */ .footer-bar { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 16px; /* minmax(0,…) rails stay equal so the centre wordmark can't drift off true centre */ border-top: 1px solid var(--line); padding: 16px 0 26px; margin-top: 24px; } .footer-bar__left { display: flex; align-items: center; gap: 16px; justify-self: start; } .footer-bar__right { justify-self: end; } /* Suggest page: the visitor already clicked "Suggest a place" to get here — the footer's duplicate CTA is redundant. Now hidden on both mobile and desktop. */ body[data-page="suggest"] .footer-bar__right { display: none; } .footer-wordmark { justify-self: center; } .header-logo__img { width: 30px; height: 30px; border-radius: 8px; display: block; } /* header brand-lock (no-city state): app-icon logo — unrelated to the footer lockup below */ .footer-bar a { font: 400 11.5px var(--font); color: var(--ink-4); } .footer-bar a:hover { color: var(--ink); } /* About/Contact ride at full brightness (the brand-page white = --ink #ECEBF2 on dark), not the muted --ink-4 — owner request. */ .footer-bar__left a { color: var(--ink); } .footer-bar a.btn--pill-cta, .footer-bar a.btn--pill-cta:hover { color: #fff; } /* CTA text stays bright white on coral */ /* ---------- buttons ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border-radius: var(--r-pill); font: 700 14px var(--font); padding: 13px 26px; white-space: nowrap; transition: transform .04s ease, filter .15s ease; } .btn:active { transform: translateY(1px); } .btn--primary { background: var(--primary); color: var(--on-primary); } .btn--primary:hover { filter: brightness(1.05); } .btn--ghost { border: 1px solid var(--line-strong); color: var(--ink-2); font-weight: 500; font-size: 13px; padding: 12px 20px; } .btn--back { background: var(--teal); color: #0C0D12; border: 0; } .btn--back:hover { filter: brightness(1.05); } .btn--block { display: flex; width: 100%; } .btn--sm { padding: 9px 17px; font-size: 12px; } .btn--pill-cta { padding: 9px 17px; font: 700 12px var(--font); color: #fff; } /* ---------- chips / tags ---------- */ .chips { display: flex; gap: 6px; flex-wrap: wrap; } .chip { border: 1px solid var(--line-strong); border-radius: var(--r-pill); padding: 3px 9px; font: 400 10px var(--font); color: var(--ink-2); white-space: nowrap; } .chip--price { font-family: var(--mono); font-weight: 500; color: var(--gold-ink); } /* Michelin flags only, filled in the site red rather than outlined like every other chip */ .chip--michelin { background: var(--primary); border-color: var(--primary); color: #fff; font-weight: 500; } .chip--toggle { cursor: pointer; } .chip.is-on { border-color: var(--primary); color: var(--primary); box-shadow: 0 0 0 3px var(--primary-ring); } /* wizard-only: selected flag chips read dark ink on light's pale red wash, white on dark's solid wash — not red-on-red */ .wizard__body .chip.is-on { color: var(--ink); } [data-theme="dark"] .wizard__body .chip.is-on { color: #fff; } /* price marker in listings */ .price { font: 500 10px var(--mono); color: var(--gold-ink); flex: none; } /* price meter — repeated đồng signs (₫, no $, we're in Việt Nam). tier 1–4 = that many filled ₫ to four; filled slots use currentColor, empty slots fade; null → nothing (unknown ≠ cheap); Free places show a tag instead. The venue icon moved to the name (.type-ico). */ .price-meter { display: inline-flex; align-items: center; gap: 1px; flex: none; vertical-align: middle; color: var(--teal); } [data-theme="dark"] .price-meter { color: var(--gold-ink); } /* gold in dark, teal in light — like the old $ */ .price-meter__slot { display: inline-flex; line-height: 0; opacity: .22; } .price-meter__slot.is-on { opacity: 1; } /* ₫ at its natural glyph width (NOT a fixed box) — a centred ₫ in a 15px box left big gaps. */ .price-meter__dong { font: 400 14px/1 var(--font); display: block; } /* Free is the word FOLLOWED BY a full faded meter (25 Aug), so every place shows a meter of the same width and free reads as the bottom of one scale rather than a different kind of answer. */ /* ⚠ The gap belongs on the TAG, not the row. `.price-meter` is a flex row with `gap: 1px` holding the đồng together, so widening the gap here pushed every đồng apart and the free meter came out visibly looser than every other meter on the same list. */ .price-meter--free .tag-free { margin-right: 6px; } .tag-free { display: inline-flex; align-items: center; flex: none; font: 700 9px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--teal); border: 1px solid var(--teal); border-radius: var(--r-pill); padding: 2px 7px; } /* compact inside the feed meta line (inherits its teal/ink colour via currentColor) */ .feed-row__meta .price-meter__dong { font-size: 10px; } .feed-row__meta .tag-free { font-size: 8px; padding: 1px 5px; } /* place-detail eyebrow: sit the meter on the text baseline */ .detail__eyebrow-price { display: inline-flex; vertical-align: middle; } .detail__eyebrow-price .price-meter__dong { font-size: 13px; } /* wizard live preview under the tier buttons */ /* The tiers are a SCALE, so wrapping the top one onto a row of its own breaks the one thing the control is saying. They share the width instead of wrapping. ⚠ SIX buttons since the meter went to five đồng (25 Aug), so the type had to come down a step to keep them on one line on a narrow phone. Verify on a small device before trusting it. */ .seg--tier { flex-wrap: nowrap; } /* ⚠ `flex: 1 1 0` + `min-width: 0` + `nowrap` is what made Treat look like it was sitting on Everyday: every cell was forced to the same width, and a label longer than its share simply OVERFLOWED into the neighbour, where the selected pill's fill then painted over it. It read as crowding and was really an overflow. `min-width: max-content` is the floor that stops it — a cell can still give away spare width, it just can never be narrower than its own word. */ .seg--tier button { flex: 0 1 auto; min-width: max-content; padding: 8px 5px; font-size: 10px; letter-spacing: -.02em; white-space: nowrap; } .seg--tier { justify-content: space-between; } /* The meter sits under whichever tier is selected — a transform, no layout. It does NOT animate across: owner's call, it just appears under the new tier. The travel was tried and read as fussy for something you tap five times in a row. */ .tier-preview { position: relative; margin-top: 12px; min-height: 22px; color: var(--gold-ink); } /* centred on a phone, where placeEditMeter deliberately leaves the transform alone */ @media (max-width: 759px) { .tier-preview { display: flex; justify-content: center; } } @media (prefers-reduced-motion: reduce) { .switch, .switch__knob { transition: none; } } .tier-preview .price-meter__dong { font-size: 20px; } /* name-prefix venue icons (up to 2) — lead the place name at a larger-than-text size. Sized in em so they scale with each surface (card, feed, detail title). Colour follows the old venue-glyph treatment: teal in light, gold in dark. Inline before the name, so they stay on line 1 when a long name wraps. */ .type-ico { display: inline-flex; align-items: center; gap: 2px; margin-right: 7px; vertical-align: -.12em; color: var(--teal); } [data-theme="dark"] .type-ico { color: var(--gold-ink); } .type-ico__svg { width: 1em; height: 1em; display: block; flex: none; } /* two-icon places (e.g. cafe + work_spot): the glyphs carry ~0.2em of baked-in edge padding that scales with font size, so the inter-icon gap looked fine on small cards but loose on large ones. A negative em margin between adjacent icons cancels that padding proportionally. Only applies when there IS a second icon — single-icon places + icon→text spacing untouched. */ .type-ico__svg + .type-ico__svg { margin-left: -.1em; } /* Per-glyph sizing hook, kept but UNUSED. ⚠ Growing a glyph's BOX misaligns it: .type-ico centres the two svgs on each other, so a taller box overhangs its neighbour top AND bottom. Size the ARTWORK in the transform instead, against the neighbour's real extent. See beer_tap in ui.js. */ /* editor/wizard venue-type picker: order badge on a selected chip (1 = lead) + a live name-icon preview so the owner sees the real result on-device (no self-screenshot). */ .vtype-chip__ord { display: inline-flex; align-items: center; justify-content: center; width: 14px; height: 14px; margin-right: 5px; border-radius: 999px; background: var(--gold); color: #1b1300; font: 700 9px var(--mono); } /* Name then icons, centred — it is a sample of what the tags will draw on the card, so it reads left to right as the card does. The glyphs are sized in `em`, so raising the font raises them with it; ⚠ .type-ico's margin-RIGHT is for leading icons and has to flip here. */ /* Name on its own line, the glyphs under it. A long name wrapped to two lines and left the icons stranded beside the second one, which read as if they belonged to the last word. */ .vtype-preview { display: flex; flex-direction: column; align-items: center; gap: 8px; margin-top: 14px; min-height: 34px; font: 600 22px var(--font); color: var(--ink); } .vtype-preview__name { letter-spacing: -.01em; text-align: center; } /* the leading margin is wrong in both directions once the glyphs are on a line of their own */ .vtype-preview .type-ico { margin-right: 0; margin-left: 0; } /* ---------- first-visit city chooser ("Landing Final" design, rebuilt 2026-08-06; mobile region layout REVERTED 2026-08-07 to the pre-rebuild horizontal-scroll rails + dot indicators) ---------- Single centered column at both breakpoints: hero → pick-line/account (order swaps by breakpoint, see .chooser__pick below) → the regions. Mobile: all three regions always visible, each a horizontal-scroll rail of city cards with a dot row that tracks scroll position (see wireChooserDots() in app.js). Desktop: all three as static columns, unchanged. */ .chooser { display: flex; flex-direction: column; padding: 8px 0 44px; } /* mobile order (2026-08-07, owner-specified): title → sub1 → divider → sub2 → pick-line → regions → account question → account CTAs. Desktop restores the original grouped layout — see the @media override below. */ .chooser__title { order: 1; margin: 0; padding-top: 16px; font: 700 27px/1.12 var(--font); letter-spacing: -.02em; text-wrap: balance; text-align: center; } .chooser__sub { order: 2; margin: 10px 0 0; font: 400 13px/1.5 var(--font); color: var(--gold-ink); text-align: center; } .chooser__sub2 { order: 3; margin: 2px 0 0; font: 400 13px/1.5 var(--font); color: var(--gold-ink); text-align: center; } [data-theme="dark"] .chooser__sub, [data-theme="dark"] .chooser__sub2 { color: var(--gold); } .chooser__divider { order: 4; height: 0; margin: 14px 0 0; border: 0; border-top: 1px solid var(--line-strong); } .chooser__pick { order: 5; margin-top: 14px; font: 600 15px var(--font); color: var(--ink); text-align: center; } .chooser__account-q { order: 7; margin: 18px 0 0; font: 400 13px/1.5 var(--font); color: var(--ink); text-align: center; } .chooser__account-btns { order: 8; display: flex; align-items: center; gap: 10px; justify-content: center; margin-top: 12px; } .chooser__account-or { font: 600 11.5px var(--font); color: var(--teal); } .pill-btn { border-radius: var(--r-pill); font: 700 13.5px var(--font); padding: 13px 26px; white-space: nowrap; text-decoration: none; } .pill-btn--red { background: var(--primary); color: var(--on-primary); } .pill-btn--ghost { border: 1.5px solid var(--line-strong); color: inherit; font-weight: 600; padding: 11.5px 24.5px; } .chooser__regions { order: 6; margin-top: 18px; } .region { display: block; margin-top: 14px; } /* mobile: label left + dot row right, plain (no border/pill) — restored from the pre-rebuild design */ .region__head { display: flex; align-items: center; gap: 8px; } .region__head-dt { font: 700 15px/1 var(--font); letter-spacing: -.01em; text-align: left; white-space: nowrap; color: var(--gold-ink); } [data-theme="dark"] .region__head-dt { color: var(--gold); } .region__dots { display: flex; gap: 4px; margin-left: auto; } .region__dot { width: 5px; height: 5px; border-radius: 50%; background: rgba(35,166,157,.5); } .region__dot.is-on { background: var(--primary); } /* horizontal-scroll rail, peeking next-card bleed to the screen edge */ .region__rail { display: flex; gap: 9px; margin-top: 8px; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-right: 20px; margin-right: -20px; } .region__rail::-webkit-scrollbar { display: none; } .city-card { position: relative; display: block; flex: 0 0 190px; height: 112px; border-radius: 14px; overflow: hidden; text-decoration: none; scroll-snap-align: start; } .city-card .ph__cap { top: 8px; bottom: auto; left: auto; right: 8px; } /* cap top-right on city cards */ .city-card--soon { opacity: .5; pointer-events: none; } .city-card__label { position: absolute; left: 0; right: 0; bottom: 0; padding: 0 52px 9px 12px; /* right padding clears the arrow badge */ background: linear-gradient(to top, rgba(12,13,18,.9), rgba(12,13,18,0)); } .city-card__name { font: 600 18px/1.1 var(--font); letter-spacing: -.01em; color: #FFFFFF; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .city-card__count { margin-top: 2px; font: 400 8px var(--mono); letter-spacing: .04em; color: var(--gold); } .city-card__count.is-soon { font-size: 16px; color: var(--teal); } /* owner v613: twice the size, brand teal */ /* Crop anchors for the destination photo, mirroring .hero__photo--* — the card is a much wider, thinner box than the hero, so the three photos that already carry a heroFocus override need it here too. Written as .ph__img. (0,2,0) so they beat .ph__img's own object-position no matter where they sit in the file. */ .ph__img.city-card__photo--bottom { object-position: center bottom; } .ph__img.city-card__photo--center { object-position: center center; } .ph__img.city-card__photo--left-top { object-position: left top; } /* arrow badge — its own circle, bottom-right, both breakpoints (was inline-after-the-name, desktop-only) */ .city-card__arrow { position: absolute; right: 12px; bottom: 12px; z-index: 1; display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; background: rgba(10,11,17,.55); border: 1px solid rgba(255,255,255,.32); color: #FFFFFF; font: 700 15px var(--font); } @media (min-width: 760px) { .chooser { max-width: 1080px; margin: 0 auto; padding: 28px 0 48px; align-items: center; } .chooser__title, .chooser__sub, .chooser__sub2, .chooser__pick, .chooser__account-q, .chooser__account-btns { width: 100%; } /* desktop keeps the original grouped layout, unaffected by the mobile-only reorder above: hero (title → sub1 → sub2) → account (question → buttons) → pick-line (own divider) → regions */ .chooser__title { order: 1; padding-top: 0; font-size: 36px; letter-spacing: -.025em; } .chooser__sub { order: 2; } .chooser__sub2 { order: 3; margin-top: 0; } .chooser__account-q { order: 4; margin-top: 14px; } .chooser__account-btns { order: 5; margin-top: 12px; } .chooser__divider { display: none; } .chooser__pick { order: 6; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line-strong); font-size: 17px; } .chooser__regions { order: 7; width: 100%; display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 22px; } .region { display: block; margin-top: 0; } /* desktop region-head: centered piped line in its own bordered pill, no dots (unchanged from before the mobile revert) */ .region__head { display: flex; justify-content: center; border-radius: 14px; padding: 13px 17px; border: 1px solid rgba(35,166,157,.5); } .region__head-dt { font: 700 20px/1 var(--font); letter-spacing: -.02em; text-align: center; } .region__dots { display: none; } .region__rail { flex-direction: column; overflow: visible; margin: 0; padding: 0; gap: 10px; margin-top: 12px; } .city-card { flex: none; width: 100%; height: 128px; scroll-snap-align: none; } .city-card__arrow { width: 30px; height: 30px; font-size: 16px; } } /* ---------- photo placeholders ---------- Every "photo" in the source is a CSS-gradient placeholder with a mono caption. No real images exist in the design files. */ .ph { position: relative; overflow: hidden; background-repeat: no-repeat; background-size: cover; } /* real uploaded photo, covering the gradient. If it 404s, app.js adds .is-broken → it hides and the gradient shows through (no inline onerror). */ /* image policy: cover fills the frame for BOTH portrait & landscape (symmetric centre crop). The only way to fill a fixed frame gap-free; trims a little, by design. */ .ph__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; z-index: 0; } .wf-photo.is-broken { display: none; } .ph__cap { position: absolute; left: 8px; bottom: 8px; z-index: 1; font: 400 8.5px var(--mono); color: rgba(255,255,255,.85); background: rgba(0,0,0,.42); padding: 2px 6px; border-radius: 4px; white-space: nowrap; max-width: calc(100% - 16px); overflow: hidden; text-overflow: ellipsis; } .ph__cap--tr { left: auto; right: 8px; bottom: auto; top: 8px; } .ph__like { position: absolute; right: 12px; top: 12px; width: 38px; height: 38px; border-radius: 50%; background: rgba(0,0,0,.35); backdrop-filter: blur(8px); border: 1px solid rgba(255,255,255,.35); display: flex; align-items: center; justify-content: center; font: 400 17px/1 sans-serif; color: #fff; } /* gradient recipes (theme-independent — they represent photos) */ .ph-food { background-image: radial-gradient(140px 90px at 60% 30%, rgba(218,37,29,.25), transparent), repeating-linear-gradient(45deg, rgba(255,255,255,.045) 0 10px, rgba(255,255,255,0) 10px 20px), linear-gradient(160deg,#b7a08a,#7d6650); } .ph-blue { background-image: radial-gradient(140px 90px at 60% 30%, rgba(245,194,66,.30), transparent), repeating-linear-gradient(45deg, rgba(255,255,255,.045) 0 10px, rgba(255,255,255,0) 10px 20px), linear-gradient(160deg,#9aa4b8,#5d6678); } .ph-tan { background-image: radial-gradient(140px 90px at 60% 30%, rgba(218,37,29,.20), transparent), repeating-linear-gradient(45deg, rgba(255,255,255,.045) 0 10px, rgba(255,255,255,0) 10px 20px), linear-gradient(160deg,#a89a8a,#6b5c4a); } .ph-green { background-image: radial-gradient(140px 90px at 60% 30%, rgba(245,194,66,.28), transparent), repeating-linear-gradient(45deg, rgba(255,255,255,.045) 0 10px, rgba(255,255,255,0) 10px 20px), linear-gradient(160deg,#a8b89a,#5c6e50); } .ph-purple { background-image: radial-gradient(140px 90px at 60% 30%, rgba(218,37,29,.18), transparent), repeating-linear-gradient(45deg, rgba(255,255,255,.045) 0 10px, rgba(255,255,255,0) 10px 20px), linear-gradient(160deg,#b39ab0,#6e5468); } .ph-slate { background-image: radial-gradient(140px 90px at 60% 30%, rgba(218,37,29,.14), transparent), repeating-linear-gradient(45deg, rgba(255,255,255,.045) 0 10px, rgba(255,255,255,0) 10px 20px), linear-gradient(160deg,#a0a8b0,#565e66); } .ph-teal { background-image: radial-gradient(140px 90px at 60% 30%, rgba(94,120,255,.20), transparent), repeating-linear-gradient(45deg, rgba(255,255,255,.045) 0 10px, rgba(255,255,255,0) 10px 20px), linear-gradient(160deg,#9ab0b8,#50646e); } .ph-indigo { background-image: radial-gradient(140px 90px at 60% 30%, rgba(94,120,255,.20), transparent), repeating-linear-gradient(45deg, rgba(255,255,255,.045) 0 10px, rgba(255,255,255,0) 10px 20px), linear-gradient(160deg,#8f96b8,#3a405c); } .ph-river { background-image: radial-gradient(140px 90px at 70% 30%, rgba(94,160,255,.22), transparent), repeating-linear-gradient(45deg, rgba(255,255,255,.045) 0 10px, rgba(255,255,255,0) 10px 20px), linear-gradient(160deg,#1d2a3d,#0f1622); } .ph-river-l{ background-image: radial-gradient(140px 90px at 70% 30%, rgba(218,37,29,.15), transparent), repeating-linear-gradient(45deg, rgba(255,255,255,.045) 0 10px, rgba(255,255,255,0) 10px 20px), linear-gradient(160deg,#8f96b8,#3a405c); } /* ---------- HERO (city landing) ---------- */ .hero { position: relative; } .hero__media { position: relative; height: 300px; border-radius: 0 0 20px 20px; overflow: hidden; } /* real hero photo layered over the gradient placeholder (gradient shows if the image is slow/blocked) */ .hero__photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center top; z-index: 0; } .hero__photo--bottom { object-position: center bottom; } /* anchor the crop to the image's bottom (e.g. Hội An's river-level boats) */ .hero__photo--center { object-position: center center; } /* centre the crop vertically (e.g. HCMC — the Landmark spire sits too high for center top) */ .hero__photo--left-top { object-position: left top; } /* pin the crop to the top-LEFT, so it's the bottom-right that gets cut (Đà Nẵng: skyline + beach are top-left, the rest is open sea) */ .hero__grad, .hero .site-header, .hero__cap { z-index: 1; } .hero__inner { position: absolute; inset: 0; display: flex; flex-direction: column; } .hero__grad { position: absolute; left: 0; right: 0; bottom: 0; padding: 0 14px 14px; background: linear-gradient(180deg, rgba(12,13,18,0), rgba(12,13,18,.9) 72%); color: #ECEBF2; } /* visiting persona: title top-left, city name bottom-right — each sits on its OWN tight mask (dark right at the edge, quick falloff) rather than a broad wash, so most of the photo stays visible; the mask height is sized to the text, not the whole top/bottom third of the image */ .hero__top { position: absolute; left: 0; right: 0; top: 0; z-index: 1; padding: 14px 14px 16px; background: linear-gradient(180deg, rgba(8,9,13,.82) 0%, rgba(8,9,13,0) 100%); color: #ECEBF2; } .hero__top .hero__title { margin-top: 0; } .hero__title-break {} /* mobile: renders as a normal line break */ @media (min-width: 760px) { .hero__title-break { display: none; } } /* desktop: back to one line */ .hero__city-mask { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; padding: 16px 14px 14px; background: linear-gradient(0deg, rgba(8,9,13,.82) 0%, rgba(8,9,13,0) 100%); text-align: right; } .hero__city { color: var(--gold); font: 700 40px var(--font); letter-spacing: .005em; } .hero__eyebrow { font: 500 10px var(--mono); letter-spacing: .13em; color: var(--gold); } .hero__title { margin-top: 6px; font: 700 30px/1.1 var(--font); letter-spacing: -.025em; } .hero__sub { margin-top: 5px; font: 400 12.5px/1.5 var(--font); color: rgba(236,235,242,.68); } .hero__row { display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap; } .state-chip { font: 500 8px var(--mono); letter-spacing: .14em; color: #0C0D12; background: var(--gold); border-radius: var(--r-pill); padding: 3px 8px; white-space: nowrap; } @media (min-width: 760px) { /* on desktop the hero floats as a card that matches the content width, not full-bleed */ .hero { max-width: 1128px; margin: 16px auto 0; padding: 0 40px; } .hero__media { height: 340px; border-radius: 20px; } .hero__title { font-size: 40px; white-space: nowrap; } .hero__sub { font-size: 14px; } .hero__grad { padding: 0 18px 18px; } .hero__top { padding: 18px 18px 20px; } .hero__city-mask { padding: 20px 18px 18px; } .hero__city { font-size: 42px; } } /* visiting persona: the tagline that used to live in the hero, now sitting just above the section tiles, right-aligned */ .sections__lead { margin: 0; padding-top: 14px; text-align: left; color: #fff; font: 500 13px var(--font); } @media (min-width: 760px) { .sections__lead { padding-top: 18px; font-size: 14px; } } /* ---------- section tiles (Eat/Drink/Explore/Stay/Live) ---------- */ .sections { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; padding-top: 8px; } @media (min-width: 760px) { .sections { grid-template-columns: repeat(4, 1fr); gap: 12px; padding-top: 10px; } } .section-tile { position: relative; height: 90px; border-radius: var(--r-tile); overflow: hidden; display: block; } .section-tile__photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; } @media (min-width: 760px) { .section-tile { height: 120px; border-radius: var(--r-photo); } } .section-tile__label { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; /* above the is-empty darken overlay */ display: flex; align-items: flex-end; gap: 7px; padding: 0 12px 10px; background: linear-gradient(180deg, rgba(12,13,18,0), rgba(12,13,18,.82) 80%); color: #ECEBF2; } /* stacked: title over the count chip */ .section-tile__text { display: flex; flex-direction: column; align-items: flex-start; gap: 5px; min-width: 0; } .section-tile__name { font: 600 17px/1 var(--font); letter-spacing: -.01em; text-shadow: 0 1px 4px rgba(0,0,0,.85); } /* count in its own tinted-black chip */ .section-tile__count { font: 400 8px var(--mono); color: var(--gold); white-space: nowrap; background: rgba(0,0,0,.55); padding: 3px 7px; border-radius: 5px; } .section-tile__arrow { margin-left: auto; font: 500 14px/1 var(--font); text-shadow: 0 1px 4px rgba(0,0,0,.85); } /* 0-place tile: read as clearly UNavailable, not just un-hovered — desaturate + dim the photo, deepen the overlay, and mute the text to grey (no bright white, no drop-shadow pop) so it never looks clickable */ .section-tile.is-empty { cursor: default; } .section-tile.is-empty .section-tile__photo { filter: grayscale(1) brightness(.55); } .section-tile.is-empty::after { content: ''; position: absolute; inset: 0; z-index: 1; background: rgba(8,9,12,.55); } .section-tile.is-empty .section-tile__label { background: linear-gradient(180deg, rgba(12,13,18,0), rgba(12,13,18,.6) 80%); } .section-tile.is-empty .section-tile__name { color: #8B8B93; text-shadow: none; } .section-tile.is-empty .section-tile__count { color: var(--teal); background: rgba(0,0,0,.35); } /* "Coming Soon" in teal */ @media (min-width: 760px) { .section-tile__name { font-size: 19px; } .section-tile__count { font-size: 8.5px; } } /* ---------- feed (recently posted / useful this week) ---------- */ .feed { padding-top: 20px; } .feed__head { display: flex; align-items: baseline; gap: 10px; } .feed__list { margin-top: 12px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; } /* minmax(0,…): let the track shrink so nowrap blurbs ellipsize, not overflow the screen */ @media (min-width: 760px) { .feed__list { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 40px; row-gap: 13px; } } .feed-row { display: flex; align-items: center; gap: 11px; text-align: left; width: 100%; } .feed-row__thumb { width: 50px; height: 50px; border-radius: var(--r-thumb); flex: none; } .feed-row__body { flex: 1; min-width: 0; } .feed-row__top { display: flex; align-items: baseline; gap: 8px; min-width: 0; } .feed-row__name { min-width: 0; font: 600 13px var(--font); letter-spacing: -.01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* THE FEED IS THE SMALLEST THIS GLYPH EVER RENDERS — 13px, against 20px on the place detail's icons row and 26px in its title, because .type-ico__svg is 1em of whatever name it leads. Only `work_spot` cares: a Lucide mark is three or four strokes with room between them and simply gets lighter, while that one is a doodle carrying a head, a body, an arm and a laptop in the same 24-unit box. Its interior gaps are a couple of units wide — one or two real pixels at 13px — so they fill in and the outline reads as a solid blob. Thinning it here is the fix the glyph's own history already found once (it shipped at stroke-width 1 for exactly this, then went to 2 to match its neighbours at the sizes it is big). ⚠ `stroke-width` on the is a PRESENTATION ATTRIBUTE, so this plain rule beats it — no !important needed, and none should be added. Covers the saved list too, which reuses .feed-row__name. */ .feed-row__name .ico-dense { stroke-width: 1.25; } /* The SECTION LISTING card has the same problem one size up — its name is 15px against the feed's 13px, so the laptop doodle's interior gaps are still only a few real pixels and it reads heavy beside a plain Lucide neighbour. Thinned less than the feed, because 15px has more room. ⚠ Both rules are stroke-width on a PRESENTATION ATTRIBUTE, so a plain selector wins. Never reach for !important here. Everywhere bigger (detail icons row 20px, detail title 26px) the glyph is left at the set's own weight 2 on purpose. */ .place-card__name .ico-dense { stroke-width: 1.5; } .feed-row__meta { display: inline-flex; align-items: center; margin-left: auto; font: 500 10px var(--mono); flex: none; white-space: pre; } /* inline-flex + center so the ₫ meter sits on the same line-centre as the uppercase AGO/CAT text (vertical-align:middle rode low against caps). white-space:pre keeps the " · " separator spaces as flex items */ .feed-row__meta .cat { color: var(--eyebrow); } .feed-row__meta .ago, .feed-row__meta .pr { color: var(--ink-4); } .feed-row__desc { margin-top: 2px; font: 400 11px/1.4 var(--font); color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* mobile: only the SAVED-places list stacks (title over its category meta). The Recent-Updates FEED now inherits the desktop inline row — đồng meter on the SAME line as the name, name truncates to ellipsis (owner wanted the feed to render like desktop). Scoped to .saved-list so savedRow is untouched. */ @media (max-width: 759px) { .saved-list .feed-row__top { flex-direction: column; align-items: flex-start; gap: 2px; } .saved-list .feed-row__meta { order: -1; margin-left: 0; } .saved-list .feed-row__meta, .saved-list .feed-row__meta .cat { color: var(--teal); } .saved-list .feed-row__name { white-space: normal; } } .feed-row__heart { font: 400 15px var(--font); color: var(--primary); flex: none; } /* ---------- section listing (Eat in Hải Phòng) ---------- */ /* Redesigned head (v2): title left; count-over-byline column to its right; a full-width hairline divider; then the ₫ legend as a horizontal "Per Pax" row below it (was a right-side reverse-staircase stack). */ /* sticky section head: it pins right below the (also-sticky) site header so place cards scroll UP and vanish beneath the divider line. --header-h is JS-measured (header height varies: safe-area on mobile, padding desktop); z below the z-40 header so any 1px overlap is harmlessly covered; opaque --bg (matches the page) so passing cards are hidden, not seen through. Only renders on section pages. */ .listing-head { padding-top: 22px; position: sticky; top: var(--header-h, 56px); z-index: 30; background: var(--bg); } /* ‹ back button, inline-left of the title (byline below stays flush-left). ROUNDED SQUARE, not a circle (v615): people were telling the owner a bare circle did not read as "back". The rounded square is the shape phones use for this control, so it carries the meaning the circle did not. */ .listing-head__row { display: flex; align-items: center; gap: 12px; } .listing-head__home { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 11px; /* Solid fill, NO outline (v616) — the owner's reference is a filled tile, and an outlined box on the card colour was not reading as the same control. --tile-fill resolves in both themes; a hardcoded near-black would vanish on the light one. */ border: none; color: var(--ink); /* A domed piece of glass — brightest at the top where the surface turns toward you, falling away down the face, with a soft settle along the bottom edge. Deliberately ONE BROAD GRADIENT across the whole fill and NOT an inset 1px top edge: that is the standard way to fake glass and it is exactly what was built and rejected on the floating nav capsule, where it read as a drawn line rather than as light on a curve. A gradient has no edge to misread. The source sits off to the TOP RIGHT rather than straight overhead — a centred, symmetric falloff reads as a shape with a gradient on it, an off-centre one reads as a lit object. */ background: radial-gradient(120% 110% at 78% -12%, var(--tile-sheen), transparent 58%), var(--tile-fill); /* the settle sits BOTTOM-LEFT, opposite the light, and the drop shadow leans the same way — a centred shadow under an angled highlight is the tell that the light was never real. */ box-shadow: -1px 2px 3px rgba(0,0,0,.20), inset 3px -5px 10px -8px rgba(0,0,0,.6); text-decoration: none; transition: color .12s ease, border-color .12s ease, background-color .12s ease; } .listing-head__home:hover { color: var(--nav-hover); } /* border-color would be inert now — the tile has no border */ .listing-head__home-ico { width: 22px; height: 22px; } /* SVG chevron — geometry centers it, no glyph-metric hack needed */ /* the desktop box grows 36 -> 40, so its radius has to grow with it or the tile renders less round there than on a phone. Proportional roundness is what the reference has. */ @media (min-width: 760px) { .listing-head__home { width: 40px; height: 40px; border-radius: 12px; } .listing-head__home-ico { width: 24px; height: 24px; } } .listing-head__title { font: 700 30px/1.1 var(--font); letter-spacing: -.02em; } /* suggest-gate title row: back button sits left of the (still page-centered) title. The button's own width is mirrored as invisible right-side spacing so the title's centre point doesn't drift toward the button. */ .wizard__title-row { justify-content: center; gap: 0; margin-top: 20px; } .wizard__title-row .listing-head__home { margin-right: 12px; } .wizard__title-row .wizard__title { flex: none; margin-top: 0; margin-right: 48px; } @media (min-width: 760px) { .wizard__title-row .wizard__title { margin-right: 52px; } } /* multi-step wizard's own exit control (add.html): small muted text, bottom-right of the card, below the Back/Next footer — deliberately NOT a top corner X, which reads as a reflex "close" tap and got hit by accident. Opens a confirm dialog (base .overlay + .sheet--wizcancel below) rather than exiting directly. */ .wiz-cancel-row { display: flex; justify-content: flex-end; margin-top: 36px; } .wiz-cancel-link { background: none; border: 0; padding: 4px; cursor: pointer; font: 500 12px var(--font); color: var(--ink-4); text-decoration: underline; } .wiz-cancel-link:hover { color: var(--primary); } /* confirm dialog — same .overlay/.sheet pattern as qhelp/name-editor, declared after the base rules (source-order rule this file has scars from — see the qhelp comment above). */ .sheet--wizcancel { text-align: center; } .sheet--wizcancel__title { font: 700 17px var(--font); color: var(--ink); } .sheet--wizcancel__text { margin-top: 8px; font: 400 14px/1.55 var(--font); color: var(--ink-3); } .sheet--wizcancel__foot { display: flex; gap: 10px; margin-top: 20px; } .sheet--wizcancel__foot .btn { flex: 1; } /* "Coming Soon" placeholder page (soon.html) — back button left of the title, left-aligned (not centered like the suggest-gate row above); same margin-onto-the-row fix so align-items:center works */ .soon-title-row { margin-top: 20px; } .soon-title-row .page__title { margin-top: 0; } /* Services hub rows (2026-08-12) — Itinerary/Tours as non-tappable "real thing, not available yet" cards, one level down from the section-tiles' 0-place treatment (that one's built for a dark photo backdrop; soon.html is a data-wash page that renders on both themes, so this is authored with an explicit light default + dark override rather than reusing those literals — see the v242/wizard- phase-1 scars for what happens when a dim-on-dark color ships unconditionally). */ .soon-service-list { margin-top: 20px; display: flex; flex-direction: column; gap: 10px; } .soon-service { display: flex; align-items: center; justify-content: space-between; gap: 16px; border: 1px solid var(--line-strong); border-radius: 14px; padding: 16px 18px; background: rgba(140,147,166,.06); } .soon-service__text { display: flex; flex-direction: column; gap: 3px; min-width: 0; } .soon-service__name { font: 600 15px var(--font); color: var(--ink-3); } .soon-service__sub { font: 400 12.5px/1.4 var(--font); color: var(--ink-4); } .soon-service__tag { flex: 0 0 auto; font: 500 9.5px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--teal); background: rgba(35,166,157,.1); border-radius: 999px; padding: 5px 10px; } [data-theme="dark"] .soon-service__tag { color: var(--gold-ink); background: rgba(245,194,66,.12); } @media (min-width: 760px) { .listing-head__title { font-size: 40px; } } .listing-head__count { margin-left: 12px; font: 500 9.5px var(--mono); letter-spacing: .14em; color: var(--gold-ink); white-space: nowrap; } /* inline in the h1 → bottom-aligned to the title baseline */ /* byline + Per Pax legend share ONE row on desktop (byline left, legend right); stacked on mobile. The full-width divider sits BELOW this whole row. */ .listing-head__legend { margin-top: 10px; padding-bottom: 14px; border-bottom: 1px solid var(--field-line); display: flex; flex-direction: column; gap: 8px; } /* One item since the price key was deleted (25 Aug). Kept as a row rather than collapsed, so the byline still sits on its own line above the hairline exactly where it always did. */ @media (min-width: 760px) { .listing-head__legend { flex-direction: row; align-items: baseline; gap: 20px; } } .listing-head__byline { font: 400 12.5px/1.4 var(--font); color: var(--ink); } /* bright text (was muted --ink-2 → unreadable) */ /* đồng price legend — horizontal, full-width, under a divider. "Per Pax" lead + pipe-separated tiers. Each tier (incl. its leading |) is nowrap so it wraps at tier boundaries and never strands a pipe. */ .place-list { padding-top: 18px; display: grid; grid-template-columns: 1fr; gap: 18px; } @media (min-width: 760px) { .place-list { grid-template-columns: 1fr 1fr; column-gap: 40px; row-gap: 26px; } } .place-card { display: block; text-align: left; width: 100%; } .place-card__photo { height: 150px; border-radius: var(--r-photo); } @media (min-width: 760px) { .place-card__photo { height: 190px; } } /* "Back to …" from a place detail scrolls this card to centre + a brief gold ring so the user sees which card they returned to (JS adds .is-return for ~2s). */ .place-card.is-return { border-radius: 14px; animation: cardReturn 2s ease-out; } @keyframes cardReturn { 0% { box-shadow: 0 0 0 3px var(--gold); } 100% { box-shadow: 0 0 0 3px rgba(245,194,66,0); } } @media (prefers-reduced-motion: reduce) { .place-card.is-return { animation: none; box-shadow: 0 0 0 3px var(--gold); } } .place-card__head { margin-top: 9px; display: flex; align-items: baseline; gap: 8px; } .place-card__name { font: 600 15px var(--font); letter-spacing: -.01em; } /* Two lines, then an ellipsis. A derived blurb is a whole sentence and Vietnamese runs longer than English, so the card has to bound it rather than trust the copy to be short. The feed's own .feed-row__desc is already clipped to one line and needs nothing. */ .place-card__desc { margin-top: 3px; font: 400 12px/1.5 var(--font); color: var(--ink-2); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; } .place-card .chips { margin-top: 7px; } .listing-more { padding-top: 16px; text-align: center; font: 400 9.5px var(--mono); letter-spacing: .12em; color: var(--ink-4); } /* ---------- place detail ---------- */ .detail { padding-top: 14px; } /* A real pill button (replaced the whisper-grey footnote link) — ~40px tap target, reads as "go back" at a glance. Lives inside .detail__body now (last item, via .listing-back below) — NOT centred below the whole two-column grid, which on desktop stranded it far under the shorter text column whenever the photo column ran taller (v259: was flex order:2 on .detail, moved after the media-taller-than-text gap complaint). */ .detail__back { margin: 26px 0 4px; display: inline-flex; align-items: center; gap: 3px; padding: 11px 18px 11px 13px; border-radius: var(--r-pill); font: 600 13px var(--font); color: var(--ink); /* Same domed glass as the .listing-head__home tile, lit from the same top-right, using the same two tokens. The NUMBERS differ because the shape does: this pill is wide and its width changes with the label, so the tile's tight corner hotspot would leave the left two thirds flat and read as a stain. The dome is broader and less cornered here, sweeping across the label instead. Border dropped to match the tile — glass with an outline is neither one thing nor the other. Lit from the TOP LEFT here, while the square tile is lit from the top right — the owner picked each one on its own, on the device. */ border: none; background: radial-gradient(170% 130% at 24% -25%, var(--tile-sheen), transparent 62%), var(--tile-fill); box-shadow: 1px 2px 3px rgba(0,0,0,.18), inset -2px -4px 9px -8px rgba(0,0,0,.5); /* /legal renders this pill as a