/*
* Version "A Glass" (ui/variant-a-glass.html): version A's layout and behaviour in a calm glass look, after the
* Parallex hubs. Loaded after parallex-ui.css, which still provides the tokens, the map markers, popups, tooltips,
* the switch and the From / To dropdown.
*
* Glass recipe. One surface per panel, never nested and never on markers.
* real glass (html.gl-glass, set by glass-gl.js once WebGL2 runs): the map under each surface is redrawn through
* the hubs' rippled glass with a bent rim and a colour split, then the surface adds
* fill the hubs' white at 60 % (52 % on icon-only pills) with a faint top sheen
* frost backdrop-filter: blur(3px) saturate(150%), plus -webkit-backdrop-filter for Safari
* edge the hubs' inner highlights, a 1 px light hairline and a 0.5 px dark outline
* lift two soft outer shadows
* without WebGL2 the surfaces fall back to v6's frosted glass: 74 % white and blur(24px)
* Contrast. Text on glass is --ink or --ink-2. Over dark water (about #143c5a, darker than this map's sea), the 60 %
* fill leaves about #a1b1bd behind the text: 5.7:1 for --ink-2 (#333338) and 8.8:1 for --ink (#0b0d12). Blue text uses --primary-ink (#2b4379); the brand blue #506fb3 is used only as a fill, behind white text.
*/
:root {
--ink: #0b0d12;
--ink-2: #3f3f46;
--primary-ink: #2b4379;
--g-fill: rgb(255 255 255 / .74);
--g-fill-thin: rgb(255 255 255 / .62);
--g-sheen: linear-gradient(180deg, rgb(255 255 255 / .22), rgb(255 255 255 / 0) 96px);
--g-edge: inset 0 1px 0 0 rgb(255 255 255 / .9), inset 0 0 0 1px rgb(255 255 255 / .4), inset 0 0 3px 1px rgb(255 255 255 / .3);
--g-shadow: 0 0 0 .5px rgb(17 24 39 / .14), 0 2px 6px -1px rgb(17 24 39 / .08), 0 24px 56px -18px rgb(17 24 39 / .34);
--well: rgb(15 23 42 / .055);
--hair: rgb(15 23 42 / .07);
--chip: rgb(255 255 255 / .6);
--chip-edge: inset 0 0 0 1px rgb(255 255 255 / .5), 0 0 0 .5px rgb(15 23 42 / .08), 0 1px 2px rgb(15 23 42 / .06);
/* hub glass-tab-switcher thumb: the hubs' inset highlight on a white pill */
--thumb: inset 2px 2px 0 -2px rgb(255 255 255 / .7), inset 0 0 3px 1px rgb(255 255 255 / .7), 0 0 0 .5px rgb(15 23 42 / .08), 0 1px 2px rgb(15 23 42 / .08), 0 4px 10px -3px rgb(15 23 42 / .16);
/* three radii: surfaces, things inside them (surface radius minus its 8 px inset), pills */
--r-surface: 24px;
--r-inner: 16px;
--calm: cubic-bezier(.25, .8, .25, 1);
--dock-w: 360px;
--card-w: 376px;
--gap: 16px;
--nav-h: 56px;
/* panels start under the top navigation */
--top: calc(var(--gap) + var(--nav-h) + 12px);
}
html.gl-glass { --g-fill: rgb(255 255 255 / .6); --g-fill-thin: rgb(255 255 255 / .52); --ink-2: #333338;
--g-edge: inset 2px 2px 0 -2px rgb(255 255 255 / .7), inset 0 0 3px 1px rgb(255 255 255 / .7), inset 0 1px 0 0 rgb(255 255 255 / .85), inset 0 0 0 1px rgb(255 255 255 / .35); }
body { color: var(--ink); }
/* ---------- the glass ---------- */
.glass { background-color: var(--g-fill); background-image: var(--g-sheen); box-shadow: var(--g-edge), var(--g-shadow);
-webkit-backdrop-filter: blur(24px) saturate(180%); backdrop-filter: blur(24px) saturate(180%); }
.glass.thin { background-color: var(--g-fill-thin); }
html.gl-glass .glass { -webkit-backdrop-filter: blur(3px) saturate(150%); backdrop-filter: blur(3px) saturate(150%); }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
.glass, .glass.thin { background-color: rgb(250 250 250 / .96); }
}
@media (prefers-reduced-transparency: reduce) {
.glass, .glass.thin { background-color: rgb(250 250 250 / .97); -webkit-backdrop-filter: none; backdrop-filter: none; }
}
/* Markers carry no blur: the landmark icons get a slightly denser fill instead (A blurred each one). */
.lm .ic { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgb(24 24 27 / .8); }
/* The glass can't bend HTML markers, so one under a surface fades out (glass-gl.js). MapLibre fades marker roots
itself (transition: opacity .2s) and, without terrain, only ever writes opacity 1 inline, hence !important. */
.maplibregl-marker.under-glass { opacity: 0 !important; pointer-events: none; }
/* Closed surfaces are not painted at all, so their blur costs nothing. */
.fade { opacity: 0; visibility: hidden; transition: opacity .18s var(--calm), transform .22s var(--calm), visibility 0s linear .22s; }
.fade.open { opacity: 1; visibility: visible; transform: none; transition: opacity .22s var(--calm), transform .26s var(--calm), visibility 0s; }
/* ---------- shared controls ---------- */
.gbtn { display: inline-flex; flex: none; align-items: center; justify-content: center; gap: 6px; height: 40px; padding: 0 18px; border: 0; border-radius: 999px; background: var(--chip);
box-shadow: var(--chip-edge); color: var(--ink); font-size: 14px; font-weight: 500; white-space: nowrap; text-decoration: none; outline: none; transition: background-color .15s, box-shadow .15s; }
.gbtn:hover { background: rgb(255 255 255 / .9); }
.gbtn.primary { background: var(--primary); color: #fff; box-shadow: inset 0 1px 0 rgb(255 255 255 / .22), 0 0 0 .5px rgb(30 45 90 / .4), 0 4px 12px -4px rgb(var(--primary-rgb) / .55); }
.gbtn.primary:hover { background: #4864a3; }
.gbtn .ti { width: 16px; height: 16px; }
.gicon { display: inline-grid; place-items: center; flex: none; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 999px; background: var(--chip); box-shadow: var(--chip-edge);
color: var(--ink); outline: none; text-decoration: none; transition: background-color .15s, color .15s, box-shadow .15s; }
.gicon:hover { background: rgb(255 255 255 / .9); }
.gicon .ti { width: 18px; height: 18px; }
.gicon[aria-pressed="true"] { background: rgb(var(--primary-rgb) / .16); color: var(--primary-ink); box-shadow: inset 0 0 0 1px rgb(var(--primary-rgb) / .35); }
.gicon[aria-pressed="true"]:hover { background: rgb(var(--primary-rgb) / .22); }
.glink { display: inline-flex; align-items: center; gap: 4px; height: 32px; padding: 0 10px; border: 0; border-radius: 999px; background: transparent; color: var(--primary-ink);
font-size: 13px; font-weight: 500; outline: none; }
.glink:hover { background: rgb(var(--primary-rgb) / .08); }
.glink .ti { width: 14px; height: 14px; transition: transform .2s var(--calm); }
.gbtn:focus-visible, .gicon:focus-visible, .glink:focus-visible, .seg > button:focus-visible, .modes > button:focus-visible, .prow:focus-visible, .nrow:focus-visible, .qrow:focus-visible {
box-shadow: 0 0 0 2px #fff, 0 0 0 4px rgb(var(--primary-rgb) / .7); }
/* Segmented switch (hub glass-tab-switcher): a recessed track with one white thumb that slides. */
.seg, .modes { position: relative; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; align-items: stretch; height: 40px; padding: 4px; border-radius: 999px;
background: var(--well); box-shadow: inset 0 1px 2px rgb(15 23 42 / .06); color: var(--ink-2); }
.seg::before, .modes::before { content: ""; position: absolute; top: 4px; bottom: 4px; left: 4px; border-radius: 999px; background: rgb(255 255 255 / .94); box-shadow: var(--thumb);
transition: transform .3s var(--calm), opacity .2s; pointer-events: none; }
.seg > button, .modes > button { position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 0; height: auto; padding: 0 8px; border: 0;
border-radius: 999px; background: transparent; color: var(--ink-2); font-size: 13.5px; font-weight: 500; white-space: nowrap; outline: none; transition: color .2s; }
.seg > button:hover, .modes > button:not(.on):hover { color: var(--ink); background: transparent; }
.seg > button.on, .modes > button.on { color: var(--ink); background: transparent; box-shadow: none; }
.modes::before { width: calc(50% - 4px); }
.modes:has(> [data-mode="walking"].on)::before { transform: translateX(100%); }
.modes .ti { width: 16px; height: 16px; }
/* Inputs: a lighter well inside the glass */
.ginput { width: 100%; min-width: 0; height: 40px; padding: 0 14px; border: 0; border-radius: 999px; background: rgb(255 255 255 / .6); color: var(--ink);
box-shadow: inset 0 0 0 1px var(--hair); font-size: 14px; outline: none; transition: background-color .15s, box-shadow .15s; }
.ginput::placeholder, .loc input::placeholder { color: #52525b; }
.ginput:focus, .loc input:focus { background: #fff; box-shadow: inset 0 0 0 1px rgb(var(--primary-rgb) / .55), 0 0 0 3px rgb(var(--primary-rgb) / .22); }
.loc input { height: 40px; padding: 0 14px; border: 0; border-radius: 14px; background: rgb(255 255 255 / .6); box-shadow: inset 0 0 0 1px var(--hair); color: var(--ink); }
.gselect { appearance: none; -webkit-appearance: none; width: 100%; height: 36px; padding: 0 30px 0 12px; border: 0; border-radius: 999px; color: var(--ink); font-size: 13px; cursor: pointer; outline: none;
background: rgb(255 255 255 / .6) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%233f3f46' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6l6 -6'/%3E%3C/svg%3E") no-repeat right 10px center;
box-shadow: inset 0 0 0 1px var(--hair); }
.gselect:focus-visible { box-shadow: inset 0 0 0 1px rgb(var(--primary-rgb) / .55), 0 0 0 3px rgb(var(--primary-rgb) / .22); }
.switch { background: rgb(15 23 42 / .16); }
.switch[aria-checked="true"] { background: var(--primary); }
/* Solid surfaces that sit on the glass or on the map (no blur of their own). */
.dd { border-radius: var(--r-inner); background: rgb(255 255 255 / .98); box-shadow: 0 0 0 .5px rgb(15 23 42 / .12), 0 12px 32px -8px rgb(15 23 42 / .28); }
.dd button { border-radius: 10px; color: var(--ink); }
.dd .grp, .dd button small, .dd .none { color: var(--ink-2); }
[data-tip]::after { border-radius: 999px; padding: 5px 10px; background: rgb(17 19 24 / .92); }
.maplibregl-popup.lm-pop .maplibregl-popup-content { border-radius: 20px; background: rgb(255 255 255 / .97); box-shadow: inset 0 1px 0 rgb(255 255 255 / .9), var(--g-shadow); }
.lm-pop img { width: 248px; height: 140px; margin: 6px 6px 0; border-radius: 14px; }
.lm-pop .maplibregl-popup-content > div { padding: 10px 12px 12px; }
.lm-pop small { color: var(--ink-2); }
.lm-pop .go button { height: 34px; border-radius: 999px; background: rgb(15 23 42 / .06); color: var(--ink); }
.lm-pop .go button:hover { background: rgb(15 23 42 / .1); }
/* ---------- top navigation (the hub's): logo, the map's sections, Contact Us ---------- */
.topnav { position: fixed; z-index: 30; top: var(--gap); left: 50%; display: flex; align-items: center; gap: 4px; height: var(--nav-h); padding: 6px; border-radius: 999px;
transform: translateX(-50%); transition: opacity .2s, visibility 0s; }
.nav-logo { display: grid; place-items: center; flex: none; height: 44px; padding: 0 16px 0 14px; border: 0; border-radius: 999px; background: transparent; outline: none; transition: background-color .15s; }
.nav-logo:hover { background: rgb(255 255 255 / .45); }
.nav-logo img { display: block; height: 28px; width: auto; }
.nav-items { position: relative; display: flex; align-items: center; gap: 2px; padding-left: 8px; }
/* a hairline between the logo and the sections */
.nav-items::before { content: ""; position: absolute; left: 0; top: 12px; bottom: 12px; width: 1px; background: rgb(15 23 42 / .12); }
.nav-item { position: relative; z-index: 1; height: 44px; padding: 0 18px; border: 0; border-radius: 999px; background: transparent; color: var(--ink); font-size: 15px; font-weight: 500;
letter-spacing: .01em; white-space: nowrap; outline: none; transition: background-color .15s; }
.nav-item:not(.on):hover { background: rgb(255 255 255 / .45); }
/* the open section: the hub's white thumb, sliding between tabs */
.nav-thumb { position: absolute; top: 0; left: 0; width: var(--w, 0); height: 44px; border-radius: 999px; background: rgb(255 255 255 / .94); box-shadow: var(--thumb); opacity: 0;
transform: translateX(var(--x, 0)); transition: transform .3s var(--calm), width .3s var(--calm), opacity .2s; pointer-events: none; }
.nav-items.has-on .nav-thumb { opacity: 1; }
.nav-cta { display: inline-flex; flex: none; align-items: center; gap: 8px; height: 44px; margin-left: 6px; padding: 0 20px 0 16px; border: 0; border-radius: 999px; background: var(--primary);
color: #fff; font-size: 15px; font-weight: 500; white-space: nowrap; outline: none; box-shadow: inset 0 1px 0 rgb(255 255 255 / .22), 0 0 0 .5px rgb(30 45 90 / .4), 0 4px 12px -4px rgb(var(--primary-rgb) / .55);
transition: background-color .15s; }
.nav-cta:hover { background: #4864a3; }
.nav-cta .ti { width: 18px; height: 18px; }
.nav-logo:focus-visible, .nav-item:focus-visible, .nav-cta:focus-visible { box-shadow: 0 0 0 2px #fff, 0 0 0 4px rgb(var(--primary-rgb) / .7); }
/* the phone tab bar (the same three sections) */
.tabbar { display: none; }
.tabbar .seg::before { width: calc((100% - 8px) / 3); opacity: 0; }
body.dock-open:not(.layers-open)[data-section="projects"] .tabbar .seg::before { opacity: 1; }
body.dock-open:not(.layers-open)[data-section="directions"] .tabbar .seg::before { opacity: 1; transform: translateX(100%); }
body.layers-open .tabbar .seg::before { opacity: 1; transform: translateX(200%); }
.seg .ti { display: none; }
/* ---------- dock (desktop): Projects or Directions, on the left under the navigation ---------- */
.dock { position: fixed; z-index: 20; top: var(--top); left: var(--gap); width: var(--dock-w); padding: 8px; border-radius: var(--r-surface);
opacity: 0; visibility: hidden; transform: translateX(-8px); transition: opacity .18s var(--calm), transform .22s var(--calm), visibility 0s linear .22s; }
body.dock-open .dock { opacity: 1; visibility: visible; transform: none; transition: opacity .22s var(--calm), transform .26s var(--calm), visibility 0s; }
.sheet-grab { display: none; }
/* projects */
.search { position: relative; margin: 0 0 6px; }
.search > .ti { position: absolute; left: 14px; top: 12px; color: var(--ink-2); pointer-events: none; }
.search .ginput { padding-left: 38px; }
.plist { display: flex; flex-direction: column; gap: 2px; max-height: calc(100dvh - var(--top) - var(--gap) - 16px - 46px); overflow: auto; margin: 0 -2px; padding: 0 2px; }
.prow { display: flex; align-items: center; gap: 12px; width: 100%; padding: 6px; border: 0; border-radius: var(--r-inner); background: transparent; color: var(--ink); text-align: left; outline: none;
transition: background-color .15s, box-shadow .15s; }
.prow:hover, .prow.hover { background: rgb(255 255 255 / .55); }
.prow.on { background: rgb(255 255 255 / .9); box-shadow: 0 0 0 .5px rgb(15 23 42 / .08), 0 2px 8px -3px rgb(15 23 42 / .18); }
.prow .thumb { flex: none; width: 48px; height: 48px; border-radius: 10px; background: rgb(15 23 42 / .08) center/cover no-repeat; box-shadow: inset 0 0 0 .5px rgb(0 0 0 / .08); }
.prow .txt { min-width: 0; }
.prow b { display: block; font-size: 14px; font-weight: 500; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.prow small { display: block; margin-top: 2px; font-size: 12.5px; color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.empty { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 22px 12px 18px; text-align: center; color: var(--ink-2); font-size: 13px; }
.empty b { color: var(--ink); font-weight: 500; }
.empty .gbtn { height: 34px; margin-top: 6px; font-size: 13px; }
/* directions */
.dir { padding: 2px 4px 2px; }
.route-box { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 36px; gap: 8px 6px; align-items: center; }
.route-box .loc { grid-column: 1; }
.route-box .swap { grid-column: 2; grid-row: 1 / span 2; width: 36px; height: 36px; }
.route-box .loc .dd { left: 0; right: -42px; }
/* a dotted line from A to B */
.route-box::before { content: ""; position: absolute; left: 10px; top: 34px; height: 20px; border-left: 2px dotted rgb(15 23 42 / .25); }
.dir .modes { margin: 12px 0 0; }
#result { align-items: baseline; gap: 8px; margin: 16px 2px 0; }
#result b, #result span { transition: opacity .2s; }
#rTime { font-size: 24px; font-weight: 600; letter-spacing: -.02em; line-height: 1.1; }
#result .dotsep, #rDist { color: var(--ink-2); font-size: 15px; font-weight: 500; }
#result.busy #rDist, #result.busy #rTime { opacity: .35; }
#result.none #rTime, #result.none .dotsep { display: none; }
.dir-foot { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin: 4px 0 0 2px; }
.dir-foot:has(#dirClear[hidden]):has(.result-note:not(.show)) { display: none; }
.result-note { margin: 0; font-size: 12.5px; color: var(--ink-2); }
.result-note .ti { display: inline-block; vertical-align: -3px; width: 14px; height: 14px; margin-right: 4px; }
.dir-foot .glink { margin-left: auto; color: var(--ink-2); }
.quick { display: flex; flex-direction: column; gap: 2px; margin-top: 12px; }
.quick:empty { display: none; }
.quick-label { margin: 14px 4px 4px; font-size: 12.5px; font-weight: 500; color: var(--ink-2); }
.quick-label:empty { display: none; }
.qrow { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 44px; padding: 6px 8px; border: 0; border-radius: 14px; background: transparent; color: var(--ink); text-align: left;
font-size: 13.5px; outline: none; }
.qrow:hover { background: rgb(255 255 255 / .55); }
.qrow i { width: 28px; height: 28px; border-radius: 999px; display: grid; place-items: center; background: var(--well); flex: none; }
.qrow i svg { width: 15px; height: 15px; }
.qrow span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qrow small { color: var(--ink-2); font-size: 12.5px; white-space: nowrap; }
body.has-route .quick, body.has-route .quick-label { display: none; }
/* ---------- layers popover ---------- */
/* hangs under the Layers tab of the navigation (the page sets left) */
.lpop { position: fixed; z-index: 22; top: var(--top); left: 50%; width: 288px; padding: 8px; border-radius: var(--r-surface); transform: translateY(-4px); }
.lgroup + .lgroup::before { content: ""; display: block; height: 1px; margin: 6px 8px; background: var(--hair); }
.lrow { display: flex; align-items: center; gap: 12px; min-height: 40px; padding: 4px 8px 4px 10px; border-radius: 12px; cursor: pointer; user-select: none; }
.lrow:hover { background: rgb(255 255 255 / .55); }
.lrow > .ti { width: 18px; height: 18px; color: var(--ink-2); }
.lrow span { flex: 1; min-width: 0; font-size: 13.5px; font-weight: 500; }
.lrow em { display: inline-block; width: 8px; height: 8px; margin-left: 6px; border-radius: 50%; vertical-align: 1px; box-shadow: 0 0 0 1.5px #fff; }
.zoom-hint { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 6px 2px 0; padding: 6px 6px 6px 12px; border-radius: 14px;
background: rgb(var(--primary-rgb) / .1); color: var(--primary-ink); font-size: 12.5px; }
.zoom-hint .gbtn { height: 30px; padding: 0 12px; font-size: 12.5px; }
.lcirc { display: block; padding: 2px 4px 2px; }
.lcirc > span { display: block; margin: 0 6px 6px; font-size: 12.5px; font-weight: 500; color: var(--ink-2); }
/* ---------- project card (desktop: floating, top right) ---------- */
.card { position: fixed; z-index: 25; top: var(--top); right: var(--gap); width: var(--card-w); max-height: calc(100dvh - var(--top) - var(--gap) - 48px - 12px); display: flex; flex-direction: column;
border-radius: var(--r-surface); overflow: hidden; transform: translateY(6px) scale(.99); transform-origin: 50% 0; }
.hero { position: relative; flex: none; margin: 8px 8px 0; aspect-ratio: 3 / 2; border-radius: var(--r-inner); overflow: hidden; background: rgb(15 23 42 / .1) center/cover no-repeat;
box-shadow: inset 0 0 0 .5px rgb(0 0 0 / .08); }
.hero video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgb(0 0 0 / .2), transparent 34%, transparent 62%, rgb(0 0 0 / .28)); pointer-events: none; }
.hero-btn { position: absolute; z-index: 2; display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 32px; border: 0; border-radius: 999px; background: rgb(255 255 255 / .9);
color: var(--ink); font-size: 12.5px; font-weight: 500; box-shadow: inset 0 0 0 .5px rgb(255 255 255 / .6), 0 2px 8px rgb(0 0 0 / .18); outline: none; }
.hero-btn:hover { background: #fff; }
.hero-btn .ti { width: 15px; height: 15px; }
.hero-close { top: 10px; right: 10px; width: 32px; padding: 0; }
/* Watch video: the hub drawer's big video button, in the middle of the looping preview */
.watch { position: absolute; z-index: 2; left: 50%; top: 50%; display: inline-flex; align-items: center; gap: 12px; height: 52px; padding: 0 22px 0 7px; border: 0; border-radius: 999px;
background: rgb(255 255 255 / .94); color: var(--ink); font-size: 15px; font-weight: 600; white-space: nowrap; outline: none; transform: translate(-50%, -50%);
box-shadow: inset 0 1px 0 #fff, 0 0 0 .5px rgb(0 0 0 / .1), 0 12px 32px -8px rgb(0 0 0 / .5);
transition: transform .2s var(--calm), background-color .15s; }
.watch:hover { background: #fff; transform: translate(-50%, -50%) scale(1.04); }
.watch:focus-visible { box-shadow: 0 0 0 2px #fff, 0 0 0 4px rgb(var(--primary-rgb) / .8); }
.watch i { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 999px; background: var(--primary); color: #fff; animation: watch-ring 1.8s ease-out .6s 3; }
.watch i .ti { width: 18px; height: 18px; margin-left: 2px; fill: currentColor; }
@keyframes watch-ring { from { box-shadow: 0 0 0 0 rgb(var(--primary-rgb) / .55); } to { box-shadow: 0 0 0 14px rgb(var(--primary-rgb) / 0); } }
.card-body { flex: 1; min-height: 0; overflow: auto; padding: 14px 16px 16px; }
.card h2 { margin: 0; font-size: 20px; font-weight: 600; letter-spacing: -.015em; line-height: 1.2; }
.quiet { margin: 4px 0 0; font-size: 13px; color: var(--ink-2); }
.acts { display: flex; gap: 8px; margin-top: 14px; }
.acts .primary { flex: 1; min-width: 0; padding: 0 14px; }
.nearby { margin-top: 18px; }
.nearby h3 { margin: 0 0 4px 2px; font-size: 13px; font-weight: 600; }
.near, .nearx { display: flex; flex-direction: column; }
.near .nrow:nth-child(n + 4), .nearx, .more-box { display: none; }
.card.more .near .nrow:nth-child(n + 4), .card.more .nearx { display: flex; }
.card.more .more-box { display: block; animation: fade-in .2s var(--calm); }
.nrow { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 46px; padding: 6px 8px 6px 4px; border: 0; border-radius: 14px; background: transparent; color: var(--ink); text-align: left;
font-size: 13.5px; outline: none; }
.nrow:hover { background: rgb(255 255 255 / .55); }
.nrow i { width: 30px; height: 30px; border-radius: 999px; display: grid; place-items: center; background: var(--well); color: var(--ink); flex: none; }
.nrow i svg { width: 16px; height: 16px; }
.nrow > span { flex: 1; min-width: 0; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nrow b { display: flex; flex-direction: column; align-items: flex-end; font-weight: 600; text-align: right; white-space: nowrap; line-height: 1.25; }
.nrow b small { font-size: 12px; font-weight: 400; color: var(--ink-2); }
.nrow b .ti { width: 14px; height: 14px; color: var(--ink-2); }
.more-box p { margin: 10px 4px 0; font-size: 12.5px; color: var(--ink-2); }
.more-box p + p { margin-top: 2px; }
.more-btn { margin: 4px 0 0 -2px; }
.card.more .more-btn .ti { transform: rotate(180deg); }
/* ---------- map controls, hint, toast, boot ---------- */
.ctrls { position: fixed; z-index: 15; right: var(--gap); bottom: 20px; display: flex; align-items: center; gap: 2px; padding: 4px; border-radius: 999px; }
.ctrls .gb { display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 999px; background: transparent; color: var(--ink); font-size: 13px; font-weight: 600;
outline: none; transition: background-color .15s; }
.ctrls .gb:hover { background: rgb(255 255 255 / .7); }
.ctrls .gb:focus-visible { box-shadow: 0 0 0 2px rgb(var(--primary-rgb) / .7); }
.ctrls .gb .ti { width: 18px; height: 18px; }
.ctrls .vsep { width: 1px; height: 20px; margin: 0 3px; background: rgb(15 23 42 / .12); }
.hint { position: fixed; z-index: 15; left: 50%; bottom: 54px; transform: translateX(-50%); padding: 9px 16px; border-radius: 999px; font-size: 12.5px; color: var(--ink); white-space: nowrap;
transition: opacity .8s, visibility 0s linear .8s; }
.hint b { font-weight: 600; }
.hint.gone { opacity: 0; visibility: hidden; pointer-events: none; }
.toast { top: var(--top); padding: 6px 6px 6px 16px; border-radius: 999px; font-size: 13.5px; color: var(--ink); }
.toast.show { animation: toast-in .22s var(--calm); }
@keyframes toast-in { from { opacity: 0; transform: translateX(-50%) translateY(-4px); } to { opacity: 1; transform: translateX(-50%); } }
.toast .ti { color: var(--primary-ink); }
.toast .glink { color: var(--ink); background: rgb(15 23 42 / .06); height: 30px; padding: 0 12px; }
.boot { border-radius: 999px; color: var(--ink-2); }
.boot.gone { visibility: hidden; transition: opacity .4s, visibility 0s linear .4s; }
/* Contact Us */
.modal { position: fixed; z-index: 45; inset: 0; display: grid; place-items: center; padding: 16px; background: rgb(15 23 42 / .26); }
.contact { position: relative; width: min(420px, 100%); max-height: calc(100dvh - 32px); overflow: auto; padding: 22px 22px 20px; border-radius: var(--r-surface); }
.contact h2 { margin: 0 40px 0 0; font-size: 20px; font-weight: 600; letter-spacing: -.015em; }
.contact .quiet { margin: 6px 0 16px; }
.contact form { display: grid; gap: 12px; }
.contact label { display: grid; gap: 6px; font-size: 12.5px; font-weight: 500; color: var(--ink-2); }
.contact textarea.ginput { height: auto; padding: 10px 14px; border-radius: var(--r-inner); resize: vertical; font: inherit; font-size: 14px; }
.contact .gselect { height: 40px; font-size: 14px; }
.contact .gbtn.primary { margin-top: 4px; }
.cclose { position: absolute; top: 14px; right: 14px; }
/* short windows: the card would reach the controls, so the controls step aside */
@media (max-height: 640px) and (min-width: 761px) {
.card { max-height: calc(100dvh - var(--top) - var(--gap)); }
body.card-open .ctrls { right: calc(var(--gap) * 2 + var(--card-w)); }
}
@media (max-width: 899px) and (min-width: 761px) { :root { --card-w: 332px; } }
/* ---------- phones: the navigation at the top, a glass tab bar at the bottom, glass bottom sheets ---------- */
@media (max-width: 760px) {
:root { --gap: 8px; --nav-h: 48px; }
.hint { display: none !important; }
/* the navigation keeps the logo and Contact Us; its map sections move to the tab bar */
.topnav { top: max(10px, env(safe-area-inset-top)); padding: 4px; }
.nav-items { display: none; }
.nav-logo { height: 40px; padding: 0 12px; }
.nav-logo img { height: 22px; }
.nav-cta { height: 40px; margin-left: 2px; padding: 0 14px 0 12px; font-size: 13.5px; }
.tabbar { display: block; position: fixed; z-index: 21; left: 50%; bottom: max(12px, env(safe-area-inset-bottom)); width: min(calc(100vw - 24px), 380px); padding: 6px; border-radius: 999px;
transform: translateX(-50%); transition: opacity .2s, transform .25s var(--calm), visibility 0s; }
.tabbar .seg { height: 48px; }
.seg .ti { display: block; width: 19px; height: 19px; }
.seg > button { font-size: 13px; }
body.card-open:not(.dock-open):not(.layers-open) .tabbar { opacity: 0; visibility: hidden; pointer-events: none; transform: translateX(-50%) translateY(16px); transition: opacity .2s, transform .25s var(--calm), visibility 0s linear .25s; }
.dock, body.dock-open .dock, .lpop { position: fixed; z-index: 20; left: var(--gap) !important; right: var(--gap); top: auto; width: auto; display: flex; flex-direction: column; opacity: 1;
bottom: calc(max(12px, env(safe-area-inset-bottom)) + 60px + 8px); max-height: min(64dvh, 560px); padding: 0 8px 8px; border-radius: 28px;
transform: translateY(calc(100% + 90px)); transition: transform .3s var(--calm), visibility 0s linear .3s; visibility: hidden; }
body.dock-open:not(.layers-open) .dock, body.layers-open .lpop { transform: none; visibility: visible; transition: transform .3s var(--calm), visibility 0s; }
.lpop { padding-bottom: 10px; }
.sheet-grab { display: flex; flex: none; height: 22px; align-items: center; justify-content: center; touch-action: none; cursor: grab; }
.sheet-grab span { width: 38px; height: 4px; border-radius: 999px; background: rgb(15 23 42 / .22); }
.dock-scroll { flex: 1; min-height: 0; overflow: auto; }
.plist { max-height: none; overflow: visible; }
.route-box .loc .dd { max-height: 34dvh; }
.ctrls { top: max(10px, env(safe-area-inset-top)); bottom: auto; right: 10px; }
.ctrls .zoom { display: none; }
body.card-open.card-full .topnav, body.card-open.card-full .ctrls { opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .2s, visibility 0s linear .2s; }
/* project sheet: peeks at 56 % of the screen, drag up for all of it */
.card { top: auto; left: var(--gap); right: var(--gap); bottom: var(--gap); width: auto; height: 56dvh; max-height: none; border-radius: 28px; transform: translateY(calc(100% + 16px));
opacity: 1; transition: transform .3s var(--calm), height .3s var(--calm), visibility 0s linear .3s; }
.card.open { transition: transform .3s var(--calm), height .3s var(--calm), visibility 0s; }
body.dock-open .card.open, body.layers-open .card.open { transform: translateY(calc(100% + 16px)); visibility: hidden; transition: transform .3s var(--calm), visibility 0s linear .3s; }
.card.full { height: calc(100dvh - 2 * var(--gap) - max(0px, env(safe-area-inset-top))); }
.card .sheet-grab { position: absolute; z-index: 3; top: 8px; left: 50%; width: 96px; margin-left: -48px; height: 26px; }
.card .sheet-grab span { background: rgb(255 255 255 / .9); box-shadow: 0 1px 4px rgb(0 0 0 / .3); }
.hero { aspect-ratio: auto; height: 200px; touch-action: none; }
.card.full .hero { height: 240px; }
.watch { height: 46px; gap: 10px; padding: 0 18px 0 6px; font-size: 14px; }
.watch i { width: 34px; height: 34px; }
.card-body { padding: 12px 14px calc(16px + env(safe-area-inset-bottom)); }
.card h2 { font-size: 19px; }
.toast { top: calc(max(10px, env(safe-area-inset-top)) + 54px); max-width: calc(100vw - 24px); white-space: normal; }
}
@media (prefers-reduced-motion: reduce) {
.fade, .card, .lpop, .dock, .tabbar, .seg::before, .modes::before, .nav-thumb { transition-duration: .01s !important; }
.watch i { animation: none; }
}
/* ---------- tinted glass pins (the hub embed and ?pins=tint) ----------
Each project keeps a soft hue of its colour (--h, --s from variant-a-glass.html tint()) instead of a loud fill:
a see-through tinted pane with a white sheen, a light rim in the same hue and a tinted shadow. Selected = deeper. */
.pin.tint .pill { background: linear-gradient(180deg, rgb(255 255 255 / .62), rgb(255 255 255 / .18) 70%), hsl(var(--h) var(--s) 70% / .5);
box-shadow: inset 0 1px 0 rgb(255 255 255 / .95), inset 0 0 0 1px hsl(var(--h) var(--s) 94% / .75), inset 0 0 6px 1px rgb(255 255 255 / .35),
0 0 0 .5px hsl(var(--h) 30% 22% / .28), 0 10px 26px -10px hsl(var(--h) var(--s) 24% / .6);
-webkit-backdrop-filter: blur(10px) saturate(170%); backdrop-filter: blur(10px) saturate(170%); }
.pin.tint .stem { background: linear-gradient(hsl(var(--h) var(--s) 94% / .95), hsl(var(--h) var(--s) 85% / .3)); }
.pin.tint .dot { background: hsl(var(--h) var(--s) 58%); box-shadow: 0 0 0 5px hsl(var(--h) var(--s) 85% / .4), 0 2px 6px rgb(0 0 0 / .3); }
.pin.tint.hl .pill { box-shadow: inset 0 1px 0 rgb(255 255 255 / .95), inset 0 0 0 1px hsl(var(--h) var(--s) 94% / .75), 0 0 0 3px hsl(var(--h) var(--s) 62% / .85),
0 12px 30px -8px hsl(var(--h) var(--s) 22% / .55); }
.pin.tint.sel .pill { background: linear-gradient(180deg, rgb(255 255 255 / .32), rgb(255 255 255 / 0) 70%), hsl(var(--h) var(--s) 40% / .84);
box-shadow: inset 0 1px 0 rgb(255 255 255 / .55), inset 0 0 0 1px hsl(var(--h) var(--s) 82% / .55), 0 0 0 3px rgb(255 255 255 / .9),
0 12px 32px -6px hsl(var(--h) var(--s) 28% / .7); }
.pin.tint.sel .pill img { filter: brightness(0) invert(1); }
/* ---------- ?embed: inside a hub page, which shows its own panels ---------- */
html.embed .topnav, html.embed .tabbar, html.embed .dock, html.embed .lpop, html.embed .card, html.embed .hint, html.embed .modal, html.embed .toast { display: none !important; }
html.embed .ctrls { top: auto; bottom: 20px; right: var(--gap); }
html.embed .boot { display: none; }
@media (max-width: 760px) { html.embed .ctrls { display: none; } }
/* ---------- ?hub: the home page of a live hub, under the hub's own navigation ----------
The map's top bar goes (the hub's is there); its Projects / Directions / Layers move to the floating bar at the
bottom on every screen size, and the panels start below the hub's navigation. */
html.hubmode { --top: 96px; }
html.hubmode .topnav { display: none !important; }
html.hubmode .tabbar { display: block; position: fixed; z-index: 21; left: 50%; bottom: max(16px, env(safe-area-inset-bottom)); width: min(calc(100vw - 24px), 380px); padding: 6px;
border-radius: 999px; transform: translateX(-50%); }
html.hubmode .tabbar .seg { height: 48px; }
html.hubmode .tabbar .seg .ti { display: block; }
html.hubmode .lpop { top: auto; bottom: calc(max(16px, env(safe-area-inset-bottom)) + 72px); }
html.hubmode .hint { bottom: calc(max(16px, env(safe-area-inset-bottom)) + 76px); }
@media (min-width: 761px) { html.hubmode .card { top: 136px; max-height: calc(100dvh - 136px - 96px); } } /* clear of the hub's heart button */
@media (max-width: 760px) {
html.hubmode .ctrls { top: 64px; }
}
html.hubmode .pin .pill .nm { font-size: 14px; font-weight: 600; color: hsl(var(--h, 220) 30% 18%); white-space: nowrap; }
html.hubmode .pin .pill img + .nm { margin-left: 8px; }
html.hubmode .pin .pill:has(.nm) { display: flex; align-items: center; }
html.hubmode .pin.off { cursor: default; }
html.hubmode .pin.off .pill { opacity: .82; }
html.hubmode .maplibregl-marker.pin.in-area { opacity: 0 !important; pointer-events: none; }
.area-tag { padding: 8px 14px; border-radius: 999px; font-size: 13px; font-weight: 600; color: var(--ink); pointer-events: none; transition: opacity .2s, transform .2s var(--calm); }
.area-tag.hl { transform: scale(1.06); }
.area-tag.gone { opacity: 0; }