/* ========================================================================== Atlas of Wales — shared saved-place control styling (Phase 1C) Owns only the Save control + status disclosure rendered by assets/saved-places-ui.js. It reuses the location pages' editorial tokens (--gold / --cream / --border / --forest) with safe fallbacks so it also works on a page that has not declared them. It touches no page component. State is never colour-only: the label text and the bookmark fill both change. ========================================================================== */ .atlas-save { position: relative; display: inline-flex; align-items: center; gap: 10px; font: inherit; } /* ---- primary Save button (matches the page .button pill) ---------------- */ .atlas-save__primary { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 18px; border: 1px solid var(--border, rgba(228, 196, 122, 0.42)); border-radius: 999px; background: rgba(228, 196, 122, 0.10); color: var(--cream, #f8efd8); font: inherit; font-weight: 600; line-height: 1; cursor: pointer; transition: border-color 0.24s ease, background 0.24s ease, transform 0.24s ease; } .atlas-save__primary:hover, .atlas-save__primary:focus-visible { border-color: rgba(244, 216, 161, 0.86); background: rgba(217, 130, 59, 0.16); transform: translateY(-1px); } /* Visible keyboard focus (the page buttons rely on border alone — the Save control gets a proper ring so keyboard users always see focus). */ .atlas-save__primary:focus-visible, .atlas-save__status:focus-visible, .atlas-save__remove:focus-visible { outline: 2px solid var(--gold-warm, #edb05a); outline-offset: 2px; } .atlas-save.is-saved .atlas-save__primary { border-color: rgba(227, 196, 126, 0.7); background: rgba(227, 196, 126, 0.20); color: var(--cream, #f8efd8); } /* ---- bookmark icon: outline (unsaved) -> filled (saved) ----------------- */ .atlas-save__icon { width: 15px; height: 18px; flex: 0 0 auto; background: center / contain no-repeat; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f8efd8' stroke-width='1.8' stroke-linejoin='round'%3E%3Cpath d='M6 3.6h12a1 1 0 0 1 1 1V21l-7-4.1L5 21V4.6a1 1 0 0 1 1-1z'/%3E%3C/svg%3E"); } .atlas-save.is-saved .atlas-save__icon { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23e3c47e' stroke='%23e3c47e' stroke-width='1.8' stroke-linejoin='round'%3E%3Cpath d='M6 3.6h12a1 1 0 0 1 1 1V21l-7-4.1L5 21V4.6a1 1 0 0 1 1-1z'/%3E%3C/svg%3E"); } /* ---- on-device confirmation / persistence note ------------------------- */ .atlas-save__note { font-size: 0.82rem; color: var(--muted, rgba(250, 241, 218, 0.82)); letter-spacing: 0.01em; white-space: nowrap; } .atlas-save__note[hidden] { display: none; } /* ========================================================================== Status management panel — shared body-level portal (2026-07 redesign) ONE panel node for the whole document (assets/saved-places-ui.js appends it to once, on first open) rather than one per mounted control. Being a body-level, position:fixed portal, it is never clipped by an ancestor's overflow:hidden (the hero and the map-preview card both clip an absolutely-positioned child — see the JS module comment). Desktop position is computed against the clicked trigger's own rect (positionPanel() in the JS); under 760px it becomes a fixed bottom sheet via the --sheet modifier below. Popover sizing/tone: ~256px wide, translucent forest, restrained shadow, compact rows — a quiet popover, not a card. ========================================================================== */ .atlas-save__panel { position: fixed; z-index: 970; /* above .site-header (20) and the feedback trigger/overlay (900/950) */ width: 256px; max-width: calc(100vw - 16px); padding: 10px; border: 1px solid rgba(228, 196, 122, 0.28); border-radius: 12px; background: rgba(23, 39, 32, 0.92); backdrop-filter: blur(16px) saturate(1.3); -webkit-backdrop-filter: blur(16px) saturate(1.3); box-shadow: 0 12px 30px rgba(0, 0, 0, 0.32); } .atlas-save__panel[hidden] { display: none; } .atlas-save__panel-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 2px 2px 6px; } .atlas-save__panel-title { margin: 0; font-size: 0.66rem; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: var(--gold, #e3c47e); } .atlas-save__panel-close { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; flex: 0 0 auto; border: 0; border-radius: 50%; background: transparent; color: var(--muted, rgba(250, 241, 218, 0.7)); font-size: 1rem; line-height: 1; cursor: pointer; transition: background 0.15s ease, color 0.15s ease; } .atlas-save__panel-close:hover { background: rgba(250, 241, 218, 0.1); color: var(--cream, #f8efd8); } .atlas-save__statuses { display: flex; flex-direction: column; gap: 2px; } .atlas-save__status { display: flex; align-items: center; gap: 9px; width: 100%; min-height: 32px; padding: 0 8px; border: 0; border-radius: 8px; background: transparent; color: var(--cream, #f8efd8); font: inherit; font-size: 0.88rem; text-align: left; cursor: pointer; transition: background 0.16s ease; } .atlas-save__status:hover { background: rgba(250, 241, 218, 0.07); } /* Current status: subtle gold wash + filled tick, not a solid block. */ .atlas-save__tick { width: 14px; height: 14px; flex: 0 0 auto; border: 1.5px solid rgba(250, 241, 218, 0.32); border-radius: 50%; background: center / 9px no-repeat transparent; } .atlas-save__status[aria-pressed="true"] { background: rgba(227, 196, 126, 0.10); font-weight: 600; } .atlas-save__status[aria-pressed="true"] .atlas-save__tick { border-color: var(--gold, #e3c47e); background-color: var(--gold, #e3c47e); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231a2c21' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E"); } /* Remove is a low-emphasis destructive TEXT action (never a large outlined button). Scoped through .atlas-save__panel so this never touches the My Places page's own reuse of the bare .atlas-save__remove classname on its status-menu markup (assets/my-places.css / my-places.js), which is a separate DOM tree with its own, more specific rules. */ .atlas-save__panel .atlas-save__remove { display: block; width: 100%; min-height: auto; margin-top: 6px; padding: 6px 8px; border: 0; background: transparent; color: var(--amber, #d9823b); font: inherit; font-size: 0.82rem; font-weight: 500; text-align: left; text-decoration: underline; text-decoration-color: transparent; cursor: pointer; transition: color 0.15s ease, text-decoration-color 0.15s ease; } .atlas-save__panel .atlas-save__remove:hover, .atlas-save__panel .atlas-save__remove:focus-visible { color: #e39a5c; text-decoration-color: currentColor; } /* ---- quiet footer link into My Places (saved state only) ---------------- */ .atlas-save__myplaces { display: block; margin-top: 6px; padding-top: 6px; border-top: 1px solid rgba(228, 196, 122, 0.16); color: var(--muted, rgba(250, 241, 218, 0.72)); font-size: 0.78rem; font-weight: 500; text-align: center; text-decoration: none; } .atlas-save__myplaces:hover { color: var(--gold, #e3c47e); text-decoration: underline; } .atlas-save__myplaces:focus-visible { outline: 2px solid var(--gold-warm, #edb05a); outline-offset: 2px; border-radius: 6px; } /* ---- mobile (<=760px): compact bottom sheet, not a floating popover ----- */ @media (max-width: 760px) { .atlas-save__panel--sheet { left: 16px; right: 16px; width: auto; max-width: none; top: auto; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); border-radius: 16px; } .atlas-save__panel--sheet .atlas-save__status, .atlas-save__panel--sheet .atlas-save__remove { min-height: 40px; /* comfortable touch target on the sheet */ } } /* ---- shared visually-hidden live region -------------------------------- */ .atlas-save__live { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; } /* ---- mobile: control goes full-width ------------------------------------- The panel itself is handled by the .atlas-save__panel--sheet rules above (JS applies that class under the same <=760px breakpoint), not here. */ @media (max-width: 480px) { .atlas-save { flex: 1 1 100%; flex-wrap: wrap; } .atlas-save__primary { flex: 1 1 auto; } .atlas-save__note { flex: 1 1 100%; white-space: normal; } } /* ---- reduced motion ---------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { .atlas-save__primary, .atlas-save__status, .atlas-save__remove { transition: none; } .atlas-save__primary:hover, .atlas-save__primary:focus-visible { transform: none; } } /* ========================================================================== Mountain-trail cohort — save-control integration (Phase 1E, July 2026; hero utility row replaces the quick-brief control, Phase 1F, July 2026; hero-copy desktop pill added, Phase 1G, July 2026) Layout for the THREE save entry points every mountain-trail page now carries: the compact hero utility icon (.hero-nav-save, in .site-nav beside "Open the map", mobile only), the hero-copy pill (.hero-actions-save, inside .hero__actions beside the two .btn CTAs, desktop only) and the map-panel control (.mapview__save, both breakpoints). All are plain [data-saved-place-control] hooks hydrated by assets/saved-places-ui.js and synced through the shared store — there is no per-page JS and no second state source. .hero-nav-save replaces the earlier .brief__save (quick-brief row) control, which read as clutter inside the introduction and forced a reserved flex column there. As of Phase 1G, .hero-nav-save and .hero-actions-save split the same way canonical-coast's .nav-save / hero-copy control already do: .hero-nav-save is the mobile-only icon, .hero-actions-save is the desktop-only full pill — exactly one hero-area entry point is visible at any given breakpoint, never both, never neither. Centralised here rather than inlined per page: these rules are shared verbatim by all eight mountain pages. Every selector is scoped through .hero-nav-save, .hero-actions-save or .mapview, which exist only on the mountain-trail cohort, so nothing leaks to the place-guide pages that also load this stylesheet. ========================================================================== */ /* --- Header utility row: compact icon-only control beside "Open the map" (all widths) As of 2026-07-29 this is the ONLY hero-area Save on a mountain page at every breakpoint — the hero-copy pill below is retired so Save no longer sits third in a row of CTAs. Matches the town/village header treatment. -- */ .hero-nav-save { display: none; } /* pre-mount: the empty div never sits in the nav row */ .hero-nav-save.atlas-save { display: inline-flex; flex: 0 0 auto; } .hero-nav-save .atlas-save__primary { width: 44px; height: 44px; min-height: 44px; padding: 0; border-radius: 50%; gap: 0; } .hero-nav-save .atlas-save__icon { width: 15px; height: 18px; } /* Icon-only: the label text stays in the DOM (the primary's aria-label already carries the full accessible name) but is visually hidden so no text sits beside the icon — the compact bookmark treatment the utility row needs. */ .hero-nav-save .atlas-save__label { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } .hero-nav-save .atlas-save__note { position: absolute; top: calc(100% + 6px); right: 0; z-index: 25; padding: 4px 9px; border: 1px solid rgba(228, 196, 122, 0.3); border-radius: 8px; background: rgba(20, 34, 27, 0.94); font-size: 0.7rem; white-space: nowrap; } /* --- Hero-copy row: RETIRED 2026-07-29 -------------------------------------- The full-pill Save that sat third in the hero's .btn row is hidden at every width; .hero-nav-save in the header is the sole hero-area entry point, exactly as on a town/village page. The markup stays on the pages (harmless, hydrated by the same shared control) so no per-page edit is needed to bring it back. */ .hero-actions-save, .hero-actions-save.atlas-save { display: none; } /* --- Map panel: quiet secondary action below the primary CTA ------------ */ /* Selectors are scoped through the existing .mapview wrapper (3 classes deep) so they reliably beat this stylesheet's own .atlas-save__primary / .is-saved rules regardless of cascade order. .mapview__save IS the shared control's own root (the JS adds .atlas-save directly onto this element — .mapview__save.atlas-save is one node, not a descendant), so the is-saved and :not(.is-saved) rules below chain onto .mapview__save with NO space before .atlas-save. display:block overrides .atlas-save's own inline-flex so the control stacks as its own line below .btn instead of flowing inline beside it. STACKING FIX: .mapview__content (z-index 3) is its own stacking context sitting BELOW .mapview__overlay (z-index 5) — a child's z-index (e.g. .btn's 6) only wins comparisons inside .mapview__content, it cannot outrank a sibling of its own parent. .btn "works" without this only because either click path lands on the same map URL; for Save that would silently swallow the click as navigation instead. Scoped via :has() so only a panel that actually contains a save control is raised above the overlay — a map panel without one keeps the original stacking untouched. */ .mapview__content:has(.mapview__save) { z-index: 7; } .mapview .mapview__save { display: block; position: relative; z-index: 6; margin-top: 14px; } .mapview .mapview__save .atlas-save__primary { min-height: 36px; padding: 0 2px; border: 0; background: transparent; box-shadow: none; color: rgba(248, 239, 216, 0.7); font-weight: 500; font-size: 0.88rem; } .mapview .mapview__save .atlas-save__primary:hover, .mapview .mapview__save .atlas-save__primary:focus-visible { background: transparent; color: var(--gold-warm); transform: none; } .mapview .mapview__save.is-saved .atlas-save__primary { border: 0; background: transparent; color: var(--gold-warm); } .mapview .mapview__save .atlas-save__icon { width: 13px; height: 16px; } .mapview .mapview__save:not(.is-saved) .atlas-save__label::after { content: " to My Places"; } /* ========================================================================== Canonical-coast place-guide cohort — map-preview save control (2026-07) The quiet secondary "Save to My Places" action that sits below the primary "Open on the Map" button inside the map-preview panel (.map-banner__content), directly mirroring the mountain-trail .mapview__save above and the approved betws-y-coed-master-template-v1 reference. Same shared saved-places-ui.js component and store as the hero control — no page-local JS, no second state source; the two controls share one place id and synchronise through the store. .map-banner__save IS the shared control's own root (the JS adds .atlas-save onto this same node), so .is-saved / :not(.is-saved) chain onto it with NO space before .atlas-save. display:block overrides .atlas-save's inline-flex so the control stacks as its own line below the .button. z-index:6 lifts it above the whole-card .map-preview-overlay (z-index 5) in the shared .map-banner stacking context (.map-banner__content is not itself a stacking context, so the control competes with the overlay directly, exactly as .map-banner__content .button already does) — without it the overlay would swallow the click as navigation instead of a save. Scoped through .map-banner__save so nothing leaks to any other surface that loads this stylesheet. ========================================================================== */ .map-banner__save { display: block; position: relative; z-index: 6; margin-top: 14px; } .map-banner__save .atlas-save__primary { min-height: 36px; padding: 0 2px; border: 0; background: transparent; box-shadow: none; color: rgba(248, 239, 216, 0.7); font-weight: 500; font-size: 0.88rem; } .map-banner__save .atlas-save__primary:hover, .map-banner__save .atlas-save__primary:focus-visible { background: transparent; color: var(--gold-warm, #edb05a); transform: none; } .map-banner__save.is-saved .atlas-save__primary { border: 0; background: transparent; color: var(--gold-warm, #edb05a); } .map-banner__save .atlas-save__icon { width: 13px; height: 16px; } .map-banner__save:not(.is-saved) .atlas-save__label::after { content: " to My Places"; } /* ========================================================================== Canonical-coast place-guide cohort — header Save icon (2026-07) The compact icon-only Save control in the .site-header nav on CANONICAL-COAST PLACE-GUIDE pages only. As of 2026-07-29 it is shown at EVERY width (was <=760px), and the hero Save it used to replace only on mobile is now hidden at every width by assets/location-motion.css — so Save no longer sits third in the hero's CTA row, matching the town/village header treatment. Same shared saved-places-ui.js component + store as the map-preview control: one place id, one state source, no page-local JS. Scope: this is the canonical-coast place-guide pattern ONLY. This stylesheet is also loaded by mountain-trail pages, but no .nav-save element exists there, so every rule below is inert on those pages. It must never be read as an "all location pages" rule, and it is not applied to mountain-trail or town/village templates. .nav-save IS the shared control's own root (saved-places-ui.js adds .atlas-save onto this same node -> .nav-save.atlas-save is one element, not a descendant). The two-class .nav-save.atlas-save desktop-hidden selector is deliberate: this file's base `.atlas-save { display: inline-flex }` (0,1,0) would otherwise tie on specificity, so the hidden state needs 0,2,0 to hold regardless of order. */ .nav-save { display: none; } /* pre-mount: the empty div never sits in the nav row */ .nav-save.atlas-save { display: inline-flex; flex: 0 0 auto; } .nav-save .atlas-save__primary { width: 44px; height: 44px; min-height: 44px; padding: 0; border-radius: 50%; gap: 0; } .nav-save .atlas-save__icon { width: 16px; height: 19px; } /* Icon-only: the label text stays in the DOM (the primary's aria-label already carries the full accessible name) but is visually hidden so no text sits beside the icon. */ .nav-save .atlas-save__label { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } /* The panel itself is no longer a descendant of .nav-save — it is the one shared body-level portal (see the "Status management panel" block above and assets/saved-places-ui.js), positioned generically by JS regardless of which control opened it. Only the transient note stays scoped here, since that one IS still a child of this control. */ .nav-save .atlas-save__note { position: absolute; top: calc(100% + 6px); right: 0; z-index: 25; padding: 4px 9px; border: 1px solid rgba(228, 196, 122, 0.3); border-radius: 8px; background: rgba(20, 34, 27, 0.94); font-size: 0.7rem; white-space: nowrap; }