/* ===================================================================================== TOWN / VILLAGE MOBILE SYSTEM — SHARED PRESENTATION LAYER (2026-08-07) The production rollout of the mobile system approved on the Beaumaris mobile-scan v2 prototype (the design) and the Conwy town one (the transfer test — the same file, unchanged, on a different town's content). Both prototypes were deleted 2026-08-07 once this shared layer superseded them; they are recoverable from git history and nothing here depends on them. The transfer test is why this is one shared file rather than 35 page-local ones: the prototype pair differed only in a header comment and three editorial strings, and all three of those strings are now DERIVED FROM THE PAGE'S OWN MARKUP by assets/town-mobile.js. Nothing below is tuned to a town. Loaded by every town/village page, LAST in the head so it wins on order where specificity ties with assets/town-guide.css and assets/town-pilot.css. SCOPE — one gate on every rule that changes anything: `@media (max-width: 760px)` — the shared layer's own mobile breakpoint. Above 760px this file contributes nothing but `display: none` on the four elements the system itself injects, so DESKTOP RENDERS THE PRODUCTION DESIGN EXACTLY, including "The town in one walk". The prototype's second gate — `body.msv2` — is deliberately NOT carried over. It exists in no production page (12 of the 35 carry a bare `` with no class at all), and adding one would be 35 edits buying nothing: this file is loaded only by town/village pages, and every rule below still outranks the shared declaration it replaces without it. Checked, not assumed — the two ties that matter are noted at 1b and 4. FIVE CHANGES, in the order the page meets them: 1. #snapshot — overview fact cards: one open at a time 2. #catalogue — featured first card + compact editorial landscape rows after it 3. #story — summary-first, with one editorial reveal 4. #life — .life__foot ("The town in one walk") omitted on mobile only 5. #next — the four nearby cards become a horizontal snap rail ===================================================================================== */ /* ------------------------------------------------------------------------------------- INJECTED ELEMENTS — hidden at every width this file does not explicitly cover, the same guard assets/town-guide.css puts on .momsel and .catmore. A desktop visitor never sees the story reveal, the rail indicator or a fact-card chevron, whatever route they took to that width. ------------------------------------------------------------------------------------- */ .tmob-reveal, .tmob-railnav, .tmob-fact__t, .tmob-fact__mark { display: none; } @media (max-width: 760px) { /* ===================================================================================== 1 · OVERVIEW FACT CARDS — one open at a time The four #snapshot cards keep their icon, label and serif headline in both states, so a collapsed card is still a card — never a menu row. Only the paragraph moves. TWO GATES, both required: html.tmob-facts-on (stamped only after the controls are wired) and [data-fact-open] (the state). With JavaScript off neither exists and all four paragraphs render, exactly as production. ===================================================================================== */ /* The outer plate loses its edge on mobile so the four cards are not boxes inside a box. The gradient ground stays — only the ruled border and its lift come off. */ html.tmob-facts-on .snapshot__card { border-color: transparent; box-shadow: none; } html.tmob-facts-on .facts > div { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 34px; align-items: center; transition: background 0.25s ease, border-color 0.25s ease, padding 0.25s ease; } /* Closed: tighter and quieter — a calm surface with a soft edge, still a card. */ html.tmob-facts-on .facts > div[data-fact-open="false"] { padding: 11px 18px; border-color: rgba(228, 196, 122, 0.14); background: rgba(255, 255, 255, 0.018); } /* Equal top and bottom padding plus a tighter gap between the label row and the headline, so the icon/category/headline group sits centred in the card with no dead band above or below it. `margin-top: 0` is load-bearing: .facts__head is a

, and the shared `.facts p` (0,1,1) outranks `.facts__head` (0,1,0), so the head was inheriting a 9px top margin — which is exactly why the group sat 21px from the top edge and 12px from the bottom. */ html.tmob-facts-on .facts > div[data-fact-open="false"] p.facts__head { margin: 0 0 5px; } html.tmob-facts-on .facts > div[data-fact-open="false"] h3 { margin: 0; } /* Open: the subject. More light in the ground and a warmer edge, nothing louder. */ html.tmob-facts-on .facts > div[data-fact-open="true"] { padding: 17px 18px 18px; border-color: rgba(228, 196, 122, 0.5); background: rgba(255, 255, 255, 0.06); } html.tmob-facts-on .facts .facts__head { grid-column: 1; margin-bottom: 9px; } html.tmob-facts-on .facts h3 { grid-column: 1; } html.tmob-facts-on .facts .tmob-fact__body { grid-column: 1 / -1; } html.tmob-facts-on .facts > div[data-fact-open="false"] .tmob-fact__body { display: none; } html.tmob-facts-on .facts > div[data-fact-open="true"] .tmob-fact__body { animation: tmob-in 0.22s ease-out; } /* Whole-card trigger — the same device town-guide.js injects into .catcard. */ html.tmob-facts-on .tmob-fact__t { display: block; position: absolute; inset: 0; z-index: 2; margin: 0; padding: 0; border: 0; background: transparent; border-radius: var(--r-md); cursor: pointer; } .tmob-fact__t:focus-visible { outline: 2px solid var(--gold-bright); outline-offset: -3px; } /* A quiet right-facing chevron on a CLOSED card, and nothing at all on the open one — the open card offers no close, so it carries no indicator. No circle, no box: a bordered round button here would read as an FAQ accordion. */ html.tmob-facts-on .tmob-fact__mark { display: block; position: relative; grid-column: 2; grid-row: 1 / span 2; justify-self: end; width: 28px; height: 16px; } .tmob-fact__mark i { position: absolute; right: 3px; width: 9px; height: 1.5px; border-radius: 1px; background: var(--gold-warm); opacity: 0.6; transition: width 0.25s ease, height 0.25s ease, top 0.25s ease, right 0.25s ease, transform 0.25s ease, opacity 0.25s ease; } /* Both strokes hinge on the SAME point — right edge, vertical middle — so their right ends coincide and the two diagonals actually meet at an apex. Giving them different `top` values instead leaves two separate dashes with a gap between them. */ .tmob-fact__mark i:first-child { top: 7.25px; transform: rotate(-45deg); transform-origin: right center; } .tmob-fact__mark i:last-child { top: 7.25px; transform: rotate(45deg); transform-origin: right center; } /* Open: no mark at all. The column collapses with it so the copy keeps the full width. */ html.tmob-facts-on .facts > div[data-fact-open="true"] { grid-template-columns: minmax(0, 1fr); } /* Matching the specificity of the rule that SHOWED it — a shorter selector here loses to `html.tmob-facts-on .tmob-fact__mark` and silently does nothing. */ html.tmob-facts-on .facts > div[data-fact-open="true"] .tmob-fact__mark { display: none; } @media (prefers-reduced-motion: reduce) { html.tmob-facts-on .facts > div, .tmob-fact__mark i { transition: none; } html.tmob-facts-on .facts > div[data-fact-open="true"] .tmob-fact__body { animation: none; } } /* ===================================================================================== 2 · WHAT TO SEE AND DO — compact mobile presentation The card markup is NOT touched: no card is cloned, re-authored, re-ordered or given a new class. These rules only change how the existing .catcard boxes lay out. The shared "Show N more places" toggle (assets/town-guide.js initCatalogueMore) is untouched and still governs cards 4..N — and because "compact" is expressed as `.catcard:not(:first-child)`, the revealed cards inherit the same compact pattern with no extra wiring. NO LINE-CLAMP anywhere below, deliberately. The detail dialog reads `summaryLong` from CATALOGUE_DETAIL, not the card's own summary (town-guide.js: `detail.summaryLong || fromCard(card,'summary')`), so on any entry that defines summaryLong a clamped card summary would exist nowhere else in the DOM and could not be recovered by any interaction. Same trap assets/town-guide.css records against .sigcard. ===================================================================================== */ /* --- 2a. The featured card: still photograph-led, just not as tall ------------------- */ /* 3:2 -> 16:9 on the hero image only. At 359px of card width that is 240px -> 202px of photograph; the subject survives the crop because the card keeps its authored --card-pos. */ #catgrid > .catcard:first-child .catcard__media { aspect-ratio: 16 / 9; } /* Padding and internal rhythm tightened; type sizes untouched, so the card reads as the same card, only denser. */ #catgrid > .catcard:first-child .catcard__body { padding: 15px 16px 17px; } #catgrid > .catcard:first-child p.catcard__tag { margin-bottom: 6px; } #catgrid > .catcard:first-child p { margin-top: 8px; } #catgrid > .catcard:first-child p.catcard__meta { padding-top: 12px; gap: 6px 14px; } #catgrid > .catcard:first-child .catcard__cue { margin-top: 11px; } /* --- 2b. Cards 2..N: compact card with a FLOATED LANDSCAPE THUMBNAIL ------------------ The photograph keeps its own landscape shape and is FLOATED into the text: the copy wraps beside it, and once the text clears the image the metadata and the action get the full card width instead of a 200px gutter. Centre positioning is the default and no card needs tuning to look right — which is the whole reason this is a component and not per-page art direction. The rejected alternative was a two-column grid: a full-height column is a PORTRAIT frame, and almost every Atlas photograph is landscape, so every card became a hard vertical crop needing its own object-position on every one of 35 pages. Three CSS facts make it work, and all three are load-bearing: 1. `.catcard` must be `display: block`. The shared layer makes it a flex column; a flex container would lay the media and the body out as siblings again. 2. `.catcard__body` must be `display: block` too. It is a flex column in the shared layer, and a flex container establishes a block formatting context — a BFC box never overlaps a float, so the body would be pushed beside the image and become exactly the narrow column this pattern exists to remove. As a plain block its LINE boxes shorten beside the float and run full width below it, which is the whole effect. 3. `.catcard__meta` must `clear: left`. It is `display: flex`, so it is a BFC too and would be shoved beside the image rather than wrapping under it. Clearing puts the duration row and the action on their own full-width line every time, whatever the copy length — the layout cannot go cramped on a long title. The injected `.catcard__trigger` is `position: absolute`, so it is out of flow and unaffected by any of this. `:not(:where(:first-child))` — the :where() is load-bearing, not style. A plain `:not(:first-child)` scores (1,2,0) here, and the shared layer's `html.tg-catmore-on #catalogue[data-catalogue-collapsed="true"] .catmore-extra { display: none }` scores (1,3,1) — which must keep winning, or all cards render while the "Show N more places" toggle still claims some are hidden. :where() contributes nothing to specificity. Measured on the prototype, not guessed: the catalogue was 2350px against production's 1950px before this. */ #catgrid > .catcard:not(:where(:first-child)) { display: block; padding: 13px 15px 13px; } #catgrid > .catcard:not(:first-child) .catcard__body { display: block; padding: 0; } #catgrid > .catcard:not(:first-child) .catcard__media { float: left; width: 47%; /* Measured, not eyeballed. At 390px every compact card puts the last line that sits BESIDE the photograph at bottom 152 (relative to the card) while the photograph finished at 139 — a 13px gap under the image. 1.132 takes it from 123 to 136 tall so its foot lands on that line instead. */ aspect-ratio: 1.132; height: auto; min-height: 0; /* The bottom margin absorbs the extra 13px, so the FLOAT still occupies exactly the same vertical space as before (2 + 123 + 11 = 2 + 136 - 2). The wrap point is unchanged, so no line of copy moves — only the picture grows downward. */ margin: 2px 15px -2px 0; border-radius: 9px; } /* Duration left, action right, both on the one line below the picture. Two floats rather than a flex row because the pair has to CLEAR the image first, and the card's own `overflow: hidden` already contains them. */ #catgrid > .catcard:not(:first-child) p.catcard__meta { clear: left; float: left; margin: 0; padding-top: 13px; gap: 0; font-size: 0.82rem; } #catgrid > .catcard:not(:first-child) .catcard__cue { float: right; margin: 0; padding-top: 13px; font-size: 0.69rem; letter-spacing: 0.1em; white-space: nowrap; } /* Location is carried by the detail dialog; the footer keeps duration and the action. Two metadata items plus an action on one line at 360px left nothing breathing. */ #catgrid > .catcard:not(:first-child) .catcard__meta [data-field="locationRelationship"] { display: none; } #catgrid > .catcard:not(:first-child) .catcard__visit { clear: both; margin-top: 11px; } /* Centre by default. Each page's authored `--card-pos` values were tuned for the DESKTOP 3:2 card and are deliberately NOT consulted here: the component has to be right without per-image tuning, and a rule that silently inherits one page's art direction would hide whether it is. */ #catgrid > .catcard:not(:first-child) .catcard__media img { object-position: 50% 50%; } /* Type steps down about one notch — enough to hold a real sentence beside a 130px thumbnail without becoming caption-sized. Nothing is truncated at any width. */ #catgrid > .catcard:not(:first-child) p.catcard__tag { margin-bottom: 5px; font-size: 0.66rem; letter-spacing: 0.12em; } #catgrid > .catcard:not(:first-child) h3 { font-size: 1.05rem; line-height: 1.24; } #catgrid > .catcard:not(:first-child) p { margin-top: 6px; font-size: 0.89rem; line-height: 1.5; } #catgrid > .catcard:not(:first-child) .catcard__meta svg { width: 13px; height: 13px; } #catgrid > .catcard:not(:first-child) .catcard__cue svg { width: 12px; height: 12px; } #catgrid > .catcard:not(:first-child) .catcard__visit { font-size: 0.82rem; } /* The grid gap between cards, closed up a little now that the cards themselves are short. `#catgrid` (1,0,0) beats the shared `.catgrid` (0,1,0) on the id alone. */ #catgrid { gap: 12px; } /* ===================================================================================== 3 · STORY — summary-first Collapsed, the section carries the chapter marker, the heading, the lede and the first two timeline layers — every town's origin and its next defining move — and then one reveal control. Behind the control: the remaining layers and the closing photograph with its quotation. How many that is differs per page and is READ FROM THE DOM, never hard-coded: a page with four layers hides two, a page with five hides three. NO WRITING IS AUTHORED AND NONE IS HIDDEN FROM THE READER. There is no collapsed-only bridge paragraph — an earlier prototype revision tried one and it read as temporary content and broke the timeline's rule and markers. What the reader would otherwise lose is carried by the control itself, as a subordinate preview line naming the chapters behind it — and those names are the pages' own layer headings, read out of the markup. A label may list what it opens; that is not prose, and it disappears with the collapsed state because there is nothing left to preview. TWO GATES, both required, so nothing can leak and nothing depends on a script: html.tmob-story-on stamped only AFTER the control is in the DOM #story[data-story-collapsed=…] the current state With JavaScript off neither exists, so the full authored Story renders untouched. ===================================================================================== */ html.tmob-story-on #story[data-story-collapsed="true"] .tmob-story-extra { display: none; } /* Collapsed, the shared connector on the last VISIBLE layer is deliberately KEPT: it runs down into the reveal control's own marker, so the control reads as the next step in the timeline rather than a form control parked underneath it. The control takes the SPINE'S OWN GEOMETRY: the same 56px marker column and 20px gutter as `.layer`, with the chevron sitting in a ring exactly like `.layer__m`. No border, no fill, no radius — the only chrome is the ring the timeline already uses. A bordered, filled, full-width box read as a form control dropped into an editorial timeline. */ html.tmob-story-on .tmob-reveal { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 20px; align-items: center; width: 100%; margin: 6px 0 0; padding: 0; border: 0; background: none; color: var(--gold-bright); font-family: var(--sans); text-align: left; cursor: pointer; } .tmob-reveal__col { display: flex; flex-direction: column; gap: 6px; min-width: 0; grid-column: 2; grid-row: 1; } /* The action. */ .tmob-reveal__t { font-size: 0.76rem; font-weight: 700; letter-spacing: 0.11em; text-transform: uppercase; } /* The preview. Clearly subordinate: sentence case, no tracking, lighter weight, and a dimmer cream rather than gold — so the eye reads the action first and the contents second. It is a list of what opens, never a sentence. */ .tmob-reveal__sub { font-size: 0.8rem; font-weight: 400; letter-spacing: 0.01em; text-transform: none; line-height: 1.4; color: rgba(248, 239, 216, 0.62); } /* Expanded there is nothing left to preview, and the hidden chapters are on screen saying it properly. */ .tmob-reveal[aria-expanded="true"] .tmob-reveal__sub { display: none; } .tmob-reveal:focus-visible { outline: 2px solid var(--gold-bright); outline-offset: 4px; border-radius: 4px; } /* The chevron IS the marker — same 56px ring, border and ground as .layer__m, so it lines up with the spine's markers to the pixel and the descending connector meets it. */ .tmob-reveal svg { /* Row 1 explicitly: the svg is the SECOND DOM child, so auto-placement would drop it onto a new row under the text instead of into the marker column beside it. */ grid-column: 1; grid-row: 1; width: 56px; height: 56px; box-sizing: border-box; padding: 17px; border-radius: 50%; border: 1px solid rgba(228, 196, 122, 0.36); background: rgba(10, 26, 19, 0.66); color: var(--gold-warm); fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform 0.25s ease, border-color 0.25s ease, background 0.25s ease; } .tmob-reveal:hover svg { border-color: rgba(228, 196, 122, 0.7); background: rgba(228, 196, 122, 0.1); } .tmob-reveal:hover .tmob-reveal__t { color: #fdf7e6; } .tmob-reveal[aria-expanded="true"] svg { transform: rotate(180deg); } /* Revealed material settles in on opacity alone — the section height is never animated. */ html.tmob-story-on #story[data-story-collapsed="false"] .tmob-story-extra { animation: tmob-in 0.22s ease-out; } @keyframes tmob-in { from { opacity: 0; } to { opacity: 1; } } /* INSURANCE, not decoration. .story__fig carries .reveal, whose shared rule holds it at opacity 0 until an IntersectionObserver stamps .is-visible. An element that was display:none when the observer ran has never intersected, so on a slow or clipped reveal it could arrive invisible. Expanded, it is simply shown. */ html.tmob-story-on #story[data-story-collapsed="false"] .story__fig.reveal { opacity: 1; transform: none; } /* ===================================================================================== 4 · LOCAL LIFE — "The town in one walk" omitted on mobile .life__foot is the whole composed closing panel: the kicker, the heading, the copy, the "Plan your time" action, the photograph grid, the pull-quote and its sign-off. It duplicates the planning job that "Choose the pace that fits your day" (#visit) does properly a screen later, and costs roughly a screenful to say so. Hidden, not deleted, and only here: at 761px and above the panel is present and unchanged. Nothing from it is moved into another section. Ties with the shared `.life__foot { display: grid }` at (0,1,0) and wins on load order — this file is the last stylesheet in the head. abersoch.html's page-local `.life__foot` rules set gap and grid-template-columns only, never display, so they cannot interfere. ===================================================================================== */ .life__foot { display: none; } /* ===================================================================================== 5 · WHERE TO GO NEXT — horizontal swipe rail The four .ncard anchors stay exactly as authored — same links, same photographs, same headings, same descriptions, same distances. Only the container changes: a native horizontal snap scroller instead of four stacked cards, plus an injected indicator that states the position and can move the rail from the keyboard. Native scrolling, no library, no transform track, no autoplay. ===================================================================================== */ .nextgrid { display: flex; gap: 12px; /* grid-template-columns from the shared layer no longer applies to a flex box, but stating it costs nothing and makes the override explicit. Both this and the shared `@media (max-width: 760px) .sig, .catgrid, .nextgrid` rule score (0,1,0); this file loads later, so it wins the tie. */ grid-template-columns: none; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; scrollbar-width: none; /* Firefox */ -ms-overflow-style: none; /* legacy Edge */ /* Room for the lifted card and its shadow, so neither is clipped by the scroller. */ padding-bottom: 4px; } .nextgrid::-webkit-scrollbar { display: none; } /* 82% + centre snapping: one card is clearly the subject, both neighbours show an edge, and the first and last clamp flush to their end because there is nothing beyond them to reveal. Same mechanism as the page's own .cgcards ribbon. */ .nextgrid > .ncard { flex: 0 0 82%; scroll-snap-align: center; } /* A fixed photograph height rather than a ratio: the card is now a fraction of the viewport, so a ratio would swing the rail's height across device widths. */ .nextgrid > .ncard .ncard__media { aspect-ratio: auto; height: 178px; } .nextgrid > .ncard .ncard__body { padding: 16px 17px 17px; } .nextgrid > .ncard h3 { font-size: 1.2rem; } .nextgrid > .ncard p { margin-top: 9px; font-size: 0.93rem; line-height: 1.5; } /* THE ONE MECHANISM CHANGE THE ROLLOUT REQUIRED, and it removes content risk rather than adding it. `.ncard__d` carries `margin: auto 0 0` in the shared layer, which pins the distance to the foot of the card. Stacked (production) every card is its own grid row and sizes to its own content, so that never shows. A flex rail EQUALISES the four to the tallest, and the authored descriptions vary by up to 101 characters across a set (Beaumaris: 103 / 173 / 152 / 204) — roughly three lines, so the shortest card opened a ~70-90px hole between its description and its distance. The Beaumaris prototype answered that by substituting shortened descriptions on mobile. That does not transfer: it is per-page copy authoring on 35 pages, and the rollout brief requires every description retained. Releasing the auto-margin instead puts the distance directly under the description on every card and lets the equalising slack fall at the card's foot, where it reads as padding. One declaration, no copy touched, no page tuned. `.nextgrid > .ncard .ncard__d` (0,3,0) outranks the shared `.ncard__d` (0,1,0). */ .nextgrid > .ncard .ncard__d { margin: 0; padding-top: 13px; font-size: 0.86rem; } /* --- The indicator: position, not decoration ---------------------------------------- A serif counter and gold segments, taking the deep band's own vocabulary (the .sigcard numeral, the .momsel active rule) rather than a generic dot carousel. The segments are real buttons with real names, so the rail is operable from the keyboard without touching the cards' own tab order. */ html.tmob-rail-on .tmob-railnav { display: flex; align-items: center; gap: 14px; margin: 16px 0 0; } .tmob-railcount { flex: none; margin: 0; font-family: var(--serif); font-size: 0.9rem; font-weight: 700; letter-spacing: 0.06em; color: rgba(248, 239, 216, 0.6); } .tmob-railcount b { font-weight: 700; color: var(--gold-bright); } .tmob-railsegs { display: flex; flex: 1 1 auto; gap: 6px; } /* 44px of tappable height around a 2px rule: the target is comfortable, the mark is not. */ .tmob-railseg { flex: 1 1 0; height: 44px; padding: 0; border: 0; background: none; cursor: pointer; } .tmob-railseg::before { content: ""; display: block; height: 2px; border-radius: 2px; background: rgba(228, 196, 122, 0.26); transition: background 0.25s ease, height 0.25s ease; } .tmob-railseg[aria-current="true"]::before { height: 3px; background: var(--gold-bright); } .tmob-railseg:focus-visible { outline: 2px solid var(--gold-bright); outline-offset: 2px; } @media (prefers-reduced-motion: reduce) { html.tmob-story-on .tmob-reveal, .tmob-reveal svg, .tmob-railseg::before { transition: none; } html.tmob-story-on #story[data-story-collapsed="false"] .tmob-story-extra { animation: none; } } } /* end @media (max-width: 760px) */