/* ============================================================ Lake Garda Boat Tours - Phase 3 Design System IDENTITY: "Limone Lemon And Garda Teal" (approved by Oleg 2026-09-18, research/layout-approval.md; the eight approved cores are reproduced EXACTLY below). A pale lemon ground borrowed from the Limone terrace groves, the lake's own teal for brand and links, a terracotta reserved for the one CTA, an olive for chips. Support tokens are derived from those eight by relationship and every pair was measured against its contrast floor before it was written here. ============================================================ */ /* ---- COLOR TOKENS (light, purposeful) ---- */ :root { /* Focus ring. Used by .stp-pin:focus-visible. Was UNDEFINED in the scaffold, which makes the whole `outline: 3px solid var(--focus)` declaration INVALID, so keyboard users got no visible focus ring on the map pins at all. 16 of 250 portfolio sites carry the same gap. */ --focus: #C4582A; /* ---- CORE COLOUR TOKENS ---------------------------------------------------------------- AUTHORED HERE, not inherited, and NEVER regenerated by a regex: a comment-bounded rewrite on a sibling site ran past its terminator and deleted all 23 declarations below, which an "is the donor colour gone?" gate passes perfectly because the tokens no longer exist. If this block is ever rebuilt, assert PRESENCE as well as absence. THE EIGHT APPROVED CORES, verbatim from research/layout-approval.md (Oleg, 2026-09-18, option "Limone lemon + Garda teal"): ground #FBF8E1, tint #F3EDC9, brand #146C7A, brand-deep #0D4A55, accent terracotta #C4582A, olive chip #5B7A3A, inverse band #0F3B44, ink #1C2426. Nothing below may move those eight. Everything else is derived and was measured: ink 14.8:1 on the ground, ink-soft 7.9, slate 6.7, brand 5.7 (links), brand-deep 9.2, gold-deep 6.4 (stars), olive 4.6. One deliberate split: the approved terracotta #C4582A carries only 4.40:1 against white, just under the 4.5 floor, and 3.59:1 against ink, so it cannot be a button ground at AA in either direction. It stays the identity accent (rules, borders, marks, the focus ring) and --accent-deep #9E4420 (6.36:1 on white) is the ground under every --accent-ink label. --accent-hover #7F3517 is 8.66:1. ---- */ --ink:#1C2426; --ink-soft:#41504F; --slate:#4C5A59; --paper:#FBF8E1; --paper-2:#F3EDC9; --surface:#FFFDF0; --surface-2:#F7F2D8; --line:#E3DBAE; --brand:#146C7A; --brand-deep:#0D4A55; --brand-ink:#FFFFFF; --accent:#C4582A; --accent-deep:#9E4420; --accent-hover:#7F3517; --accent-ink:#FFFFFF; --sea:#2F8B99; --sea-deep:#0D4A55; --gold:#B07A18; --gold-deep:#7A5310; --gold-light:#E8CE8E; --gold-soft:#F6EFD3; --gold-ink:#5A3D0B; --olive:#5B7A3A; --footer:#0B2C33; --ok:#4C6B2C; --warn:#A4371B; /* The inverse band's approved ground, named so the band rule and anything that has to sit on it read the same value. */ --inverse:#0F3B44; --inverse-ink:#FBF8E1; /* Footer chrome: its own family, so the deepest surface never borrows a body token that inverts under a dark theme (rule 41: a background and its text come from one family). */ --footer-ink:#D3E3E2; --footer-link:#EAF3EC; --footer-mute:#A9C0C0; --footer-line:#17454E; /* The hero scrim and its text are dark/light in BOTH themes on purpose: they sit over a photograph, not over the page ground, so they must not follow the theme. */ --scrim:#0A2229; --scrim-ink:#F7F3DC; /* ---- Palette "Limone Lemon And Garda Teal". Pale Limone lemon ground, the lake's teal for brand and links, terracotta reserved for the one CTA, olive for chips. ---- */ --display: "Futura", "Trebuchet MS", "Segoe UI", system-ui, sans-serif; --body: ui-sans-serif, system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif; --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace; /* modular scale */ --step--1: clamp(.83rem, .8rem + .15vw, .92rem); --step-0: clamp(1rem, .96rem + .2vw, 1.12rem); --step-1: clamp(1.2rem, 1.1rem + .5vw, 1.5rem); --step-2: clamp(1.45rem, 1.25rem + 1vw, 2.1rem); --step-3: clamp(1.85rem, 1.5rem + 1.8vw, 3.1rem); --step-4: clamp(2.4rem, 1.8rem + 3vw, 4.4rem); /* spacing scale */ --s1:.4rem; --s2:.7rem; --s3:1.1rem; --s4:1.7rem; --s5:2.6rem; --s6:4rem; --s7:6rem; --maxw: 72rem; /* soft round: stone-and-stucco curves, not hard-edged brochure */ --radius: 10px; --radius-sm: 6px; --shadow: 0 1px 2px color-mix(in srgb, var(--ink) 5%, transparent), 0 10px 28px color-mix(in srgb, var(--ink) 8%, transparent); } /* ---- RESET-ISH ---- */ *,*::before,*::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--body); font-size: var(--step-0); line-height: 1.65; -webkit-font-smoothing: antialiased; } img { max-width: 100%; display: block; } a { color: var(--brand); text-underline-offset: 3px; } h1,h2,h3 { font-family: var(--display); line-height: 1.08; letter-spacing: -.01em; font-weight: 800; margin: 0 0 var(--s3); color: var(--ink); } h1 { font-size: var(--step-4); } h2 { font-size: var(--step-3); margin-top: var(--s6); } h3 { font-size: var(--step-1); margin-top: var(--s4); } p { margin: 0 0 var(--s3); max-width: 64ch; } :focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: 4px; } /* ---- LAYOUT ---- */ .wrap { width: min(100% - 2rem, var(--maxw)); margin-inline: auto; } .wrap-narrow { width: min(100% - 2rem, 50rem); margin-inline: auto; } .section { padding-block: var(--s6); } .section + .section { padding-top: 0; } .skip-link { position:absolute; left:-999px; top:0; background:var(--brand); color:var(--brand-ink); padding:.6rem 1rem; z-index:50; font-weight:700; } .skip-link:focus { left:8px; top:8px; } /* ---- CTA ---- */ .btn { display:inline-flex; align-items:center; gap:.5rem; justify-content:center; font-family: var(--display); font-weight:700; font-size: var(--step-0); padding: .85rem 1.4rem; border-radius: 999px; text-decoration:none; border:0; cursor:pointer; min-height: 48px; transition: transform .08s ease, background .15s ease; } .btn:active { transform: translateY(1px); } /* --accent itself is 4.40:1 against --accent-ink, under the 4.5 floor, so the CTA ground is --accent-deep (6.36:1). The approved terracotta is unchanged as the identity accent. */ .btn-primary { background: var(--accent-deep); color:var(--accent-ink); } .btn-primary:hover { background: var(--accent-hover); color:var(--accent-ink); } .btn-brand { background: var(--brand); color:var(--brand-ink); } .btn-brand:hover { background: var(--brand-deep); } .btn-ghost { background: transparent; color: var(--ink); border:2px solid var(--line); } .btn-ghost:hover { border-color: var(--ink-soft); } /* ---- HEADER / NAV ---- */ /* The two fixed overlays are the only surfaces whose OWN EDGE has to be visible against the page: --line is a card hairline and measures 1.1:1 against the ground, which is nothing. Both edges below are mixed to ~3:1 (WCAG 1.4.11) in light AND dark, and both are color-mix over the site tokens rather than hand-typed rgba, which is what rule 41 exists to prevent. */ .site-header { position: sticky; top:0; z-index:40; background: color-mix(in srgb, var(--paper) 92%, transparent); color: var(--ink); backdrop-filter: blur(10px); border-bottom:1px solid color-mix(in srgb, var(--ink) 50%, var(--paper)); } /* A translucent header over a scrolling page is only as opaque as the backdrop-filter; where that is unsupported the ground must still be the page ground, never a donor literal. */ @supports not (backdrop-filter: blur(1px)) { .site-header { background: var(--paper); } } @media (max-width: 344px) { .site-header .brand { font-size: .92rem; letter-spacing: -.01em; } } .nav { display:flex; align-items:center; justify-content:space-between; gap:1rem; padding-block:.7rem; } .brand { font-family:var(--display); font-weight:800; font-size:var(--step-1); color:var(--ink); text-decoration:none; letter-spacing:-.02em; display:inline-flex; align-items:center; gap:.5rem; } .brand-logo { width:28px; height:28px; border-radius:7px; display:block; } .brand b { color: var(--accent); } .nav-links { display:flex; gap:1.2rem; align-items:center; list-style:none; margin:0; padding:0; } .nav-links a { color:var(--ink); text-decoration:none; font-weight:600; font-size:var(--step--1); } .nav-links a:hover { color:var(--brand-deep); } .nav-links a.btn-brand { color:var(--brand-ink); } .nav-links a.btn-primary { color:var(--accent-ink); } .nav-toggle { display:none; background:none; border:0; font-size:1.6rem; min-height:48px; min-width:48px; cursor:pointer; color:var(--ink); } /* Widened from 760px (2026-09-04, Rule-21 recheck): the full brand text + 5 nav links + CTA button do not fit in one row between 761-900px, causing visible overlap on tablet widths. 960px keeps the collapsed menu through that range without touching desktop nav spacing. */ @media (max-width: 960px) { .nav-toggle { display:block; } .nav-links { position:absolute; inset:100% 0 auto 0; flex-direction:column; background:var(--paper-2); border-bottom:1px solid var(--line); padding:1rem; gap:1rem; display:none; } .nav-links[data-open="true"] { display:flex; } } /* ---- TAP TARGETS (measured, not assumed) --------------------------------------------------- Headless measurement at 390/768/1024/1440 found standalone controls under 40px: the brand link at 32.3px, the nav links at 16px, and card title links between 19.4 and 28px. Inline links inside a paragraph are exempt (WCAG 2.5.5) and are not touched here. Card and category titles get the height as padding PLUS an equal negative margin, so the hit box grows and not one pixel of layout moves. Verified by re-measuring, not by reading this. */ .brand { min-height:44px; } .nav-links a, .crumbs a, .site-footer a, .footer-nav a { display:inline-flex; align-items:center; min-height:40px; } /* A link that is a DIRECT CHILD of a heading is the card's own control, whatever else the heading holds beside it (:only-child was tried and missed every card whose h3 also carries a , which is most of them). The equal negative margin means this cannot move layout. */ a.cat-name, h2>a, h3>a, h4>a, .answered-grid a, .keep-reading a, .related a { /* .8rem, not .7rem: .7 landed these at 38.3px, measured, which is under the 40px floor. */ display:inline-block; padding-block:.8rem; margin-block:-.8rem; } /* Rule 27 puts a link on every tour name inside a table, and those measured 19px. The cell's own padding is .75rem top and bottom, so the link becomes a block that fills the cell and takes that padding back as its own: 40px+ hit box, identical row height, no overlap between neighbouring rows because the negative margin stops exactly at the cell edge. */ .matrix-table td:first-child a, .cmp-table td a, .cmp-table th a, table td:first-child > a:only-of-type, table tbody th > a:only-of-type { /* `th` as well as `td`: the comparison table puts the tour name in a ROW HEADER cell, and a td-only selector left 29 links at 38.3px on the homepage. Measured, then re-measured. */ display:block; padding-block:.75rem; margin-block:-.75rem; } @media (max-width:760px){ /* the collapsed menu stacks, so the rows can afford the full 44 */ .nav-links a { min-height:44px; width:100%; } } /* ---- BREADCRUMB ---- */ .crumbs { font-size: var(--step--1); color: var(--ink-soft); padding-block: var(--s3); } .crumbs a { color: var(--ink-soft); } .crumbs span[aria-current] { color: var(--ink); font-weight:600; } /* ---- HERO: FULL-BLEED IMAGE (Oleg, 2026-09-16) ---------------------------------------- Rebuilt, not inherited. The block that was here came from a two-generations-back Iceland site, was referenced by nothing, and had three faults this one must not repeat: it was a CSS background-image (so no fetchpriority, no responsive source, no intrinsic size), it put white text DIRECTLY on photography with no scrim, and it had no reserved height so the H1 reflowed when the image arrived. Contrast is the whole risk here. Photography is not a colour token: a bright patch of sea under the headline will fail AA no matter what the stylesheet says, so the scrim below is opaque enough at the bottom that the measured ratio holds on THIS hero at 390/768/1440, and it was measured in a headless browser rather than reasoned about. If the hero image is ever replaced, re-measure. */ .hero-full { position: relative; isolation: isolate; display: flex; align-items: flex-end; /* Reserved height, so the H1 never reflows when the image lands. svh not vh: on iOS vh includes the retracting toolbar and the hero jumps on first scroll. */ min-height: clamp(30rem, 76svh, 46rem); /* Clips the hero image AND the copy wash, whose negative inset otherwise pushes 19px of horizontal page scroll at 390 and 768 (measured, not assumed). */ overflow: hidden; /* Painted BEFORE the image decodes, so there is no white flash and the scrim has something to sit on if the image 404s. */ background: var(--scrim); border-bottom: 3px solid var(--accent); } .hero-full-img, .hero-full-img img { position: absolute; inset: 0; width: 100%; height: 100%; } .hero-full-img img { object-fit: cover; /* Bias upward: the cliffs are the subject and the copy sits over the lower third. */ object-position: 50% 38%; } /* Scrim. Four stops rather than two: a single linear fade either greys the whole photograph or leaves the headline band too light. Kept in ::after so no extra element is needed. */ .hero-full::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(to top, color-mix(in srgb, var(--scrim) 92%, transparent) 0%, color-mix(in srgb, var(--scrim) 78%, transparent) 30%, color-mix(in srgb, var(--scrim) 42%, transparent) 62%, color-mix(in srgb, var(--scrim) 10%, transparent) 88%, transparent 100%); } .hero-full-inner { position: relative; z-index: 2; /* NO width here. This element is `class="wrap hero-full-inner"`, and a width:100% declared after .wrap out-ordered .wrap{width:min(100% - 2rem,var(--maxw))} at equal specificity, so the hero copy ran flush to x=0 at every width (measured: heroH1Left 0 at 390 and at 1440) while every other section stayed centred in 72rem. */ padding-block: var(--s7) var(--s6); display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: var(--s5); align-items: end; } /* The copy column carries its OWN wash, not just the page-wide scrim. MEASURED, not reasoned: with the gradient scrim alone, the H1 came back at 1.18:1 at 390px and 1.26:1 at 768px against the real rendered pixels, because the stacked layout lifts the headline out of the strong (bottom) end of the gradient and onto a bright patch of sea. It read fine in the stylesheet and fine at 1440 (4.95:1), which is exactly the trap rule 43 exists for. A local wash is also robust to the hero image being replaced later, which a tuned page-wide gradient is not. z-index -1 sits behind the text but still inside .hero-full-inner's stacking context, so it stays above the scrim and below the copy. */ .hero-full-copy { min-width: 0; position: relative; } .hero-full-copy::before { content: ""; position: absolute; z-index: -1; inset: -1.1rem -1.4rem -1.1rem -1.4rem; border-radius: var(--radius); background: linear-gradient(105deg, color-mix(in srgb, var(--scrim) 88%, transparent) 0%, color-mix(in srgb, var(--scrim) 80%, transparent) 55%, color-mix(in srgb, var(--scrim) 46%, transparent) 84%, transparent 100%); } .hero-full h1 { color: #fff; max-width: 18ch; margin-bottom: var(--s3); } .hero-full .lede { color: var(--scrim-ink); /* not pure white: 100% white on a dark scrim vibrates at this size */ max-width: 54ch; font-size: var(--step-0); /* rule 31: a lead paragraph is body copy, never near-heading scale */ margin: 0; } /* The booking panel keeps its OWN solid surface. Glass over a busy photograph is the single most common way this layout becomes unreadable, and this is the highest-intent element on the page. No translucency, no backdrop-filter: a backdrop-filter here would also become the containing block for anything fixed inside it. */ .hero-full .booking-panel { background: var(--paper); color: var(--ink); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 18px 44px color-mix(in srgb, var(--scrim) 46%, transparent); } /* The paragraph that used to sit inside the hero now runs below it on the page ground, where a long measure is actually readable. */ .hero-follow { padding-block: var(--s5); } .hero-follow p { max-width: 68ch; margin: 0; } @media (max-width: 900px) { .hero-full-inner { grid-template-columns: minmax(0, 1fr); align-items: start; } .hero-full h1 { max-width: 22ch; } /* Stacked layout puts the copy near the middle of the frame, so the gradient has to reach much further up than it does on desktop. */ .hero-full::after { background: linear-gradient(to top, color-mix(in srgb, var(--scrim) 94%, transparent) 0%, color-mix(in srgb, var(--scrim) 86%, transparent) 46%, color-mix(in srgb, var(--scrim) 62%, transparent) 78%, color-mix(in srgb, var(--scrim) 30%, transparent) 100%); } .hero-full-copy::before { inset: -1rem -1.2rem; background: color-mix(in srgb, var(--scrim) 78%, transparent); } } @media (max-width: 640px) { .hero-full { min-height: clamp(26rem, 72svh, 34rem); } .hero-full-img img { object-position: 56% 40%; } .hero-full-inner { padding-block: var(--s6) var(--s5); } } /* Gradient drift on the scrim, the page's one animated element (rule 37). Motion only, no layout shift, and the end state is the resting state so disabling it loses nothing. */ @media (prefers-reduced-motion: no-preference) { .hero-full::after { animation: heroDrift 18s ease-in-out infinite alternate; } @keyframes heroDrift { from { opacity: .94; } to { opacity: 1; } } } @media (prefers-reduced-motion: reduce) { .hero-full::after { animation: none; opacity: 1; } } /* ---- HERO (money) - asymmetric split ---- */ .hero { display:grid; grid-template-columns: 1.15fr .85fr; gap: var(--s5); align-items:center; padding-top: var(--s5); } /* this site's signature: media on the LEFT, taller than wide never; text column right */ .hero--flip { grid-template-columns: .9fr 1.1fr; } .hero--flip .hero-media { order:-1; } .eyebrow { font-family:var(--display); text-transform:uppercase; letter-spacing:.12em; font-size:var(--step--1); color:var(--gold-deep); font-weight:700; margin-bottom:var(--s2); } .hero h1 { margin-bottom: var(--s3); } .hero .author-hook { display:flex; align-items:center; gap:.6rem; font-size:var(--step--1); color:var(--ink-soft); margin-bottom:var(--s4); } .hero .author-hook img { width:38px; height:38px; border-radius:50%; object-fit:cover; border:2px solid var(--line); } .hero-media { aspect-ratio:16/9; border-radius:var(--radius); overflow:hidden; background:var(--surface); box-shadow:var(--shadow); } .hero-media img { width:100%; height:100%; object-fit:cover; } @media (max-width: 820px){ .hero{ grid-template-columns:1fr; align-items:start; } .hero--flip .hero-media { order:0; } } /* ---- QUICK ANSWER (answer-first) ---- */ .quick-answer { background: var(--surface); border:1px solid var(--line); border-left:5px solid var(--accent); color: var(--ink); border-radius: var(--radius); padding: var(--s4) var(--s5); margin-top: var(--s5); box-shadow: var(--shadow); } .quick-answer p { color:var(--ink); font-size: var(--step-1); max-width: 60ch; margin:0; } .quick-answer .qa-label { font-family:var(--display); text-transform:uppercase; letter-spacing:.14em; font-size:.72rem; color:var(--gold-deep); margin-bottom:var(--s2); font-weight:700; } /* ---- KEY FACTS TABLE ---- */ .keyfacts { width:100%; border-collapse:collapse; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; } .keyfacts th, .keyfacts td { text-align:left; padding:.8rem 1rem; border-bottom:1px solid var(--line); vertical-align:top; } .keyfacts th { width:42%; font-family:var(--display); font-weight:700; color:var(--ink); background:var(--paper-2); } .keyfacts tr:last-child th, .keyfacts tr:last-child td { border-bottom:0; } @media (max-width:640px){ .keyfacts { display:block; overflow-x:auto; -webkit-overflow-scrolling:touch; } .keyfacts th { min-width: 9rem; } } /* ---- PRODUCT CARD (money component) ---- */ .product-card { display:grid; grid-template-columns: 1fr 1.2fr; gap:0; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow); } .product-card .pc-media { background:var(--paper-2); overflow:hidden; } .product-card .pc-media img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; } .product-card .pc-body { padding: var(--s4); display:flex; flex-direction:column; gap:var(--s2); } /* width:max-content, not align-self alone. .pc-tag is a

, and align-self only does anything when the parent is a flex/grid container; inside .tour-row's plain

the pill stretched to the full column (measured 270px wide for 24 characters of text) and read as a bar, not a tag. */ .pc-tag { align-self:flex-start; width:max-content; max-width:100%; background:var(--gold-soft); color:var(--gold-ink); font-weight:700; font-size:.72rem; text-transform:uppercase; letter-spacing:.06em; padding:.25rem .6rem; border-radius:999px; } .pc-rating { font-weight:700; color:var(--ink); display:flex; align-items:center; gap:.45rem; flex-wrap:wrap; } .pc-rating .src { font-weight:500; color:var(--ink-soft); font-size:var(--step--1); } /* ---- STAR RATING (dependency-free) - set fill width inline: ratingValue/5*100% ---- */ .stars { position:relative; display:inline-block; vertical-align:middle; line-height:1; white-space:nowrap; font-size:1.05em; } .stars::before { content:"★★★★★"; color:var(--line); letter-spacing:2px; } .stars .stars-fill { position:absolute; top:0; left:0; overflow:hidden; white-space:nowrap; } .stars .stars-fill::before { content:"★★★★★"; color:var(--gold-deep); letter-spacing:2px; } .stars-num { font-weight:700; color:var(--ink); } .trust .stars { font-size:1.15rem; margin-top:.2rem; } .pc-price { font-family:var(--display); font-size:var(--step-2); font-weight:800; color:var(--ink); } .pc-price small { font-size:var(--step--1); color:var(--ink-soft); font-weight:500; } @media (max-width:680px){ .product-card{ grid-template-columns:1fr; } .product-card .pc-media{ aspect-ratio:4/3; } } /* ---- PRICING & INCLUSIONS ---- */ .incl { display:grid; grid-template-columns:1fr 1fr; gap:var(--s4); } .incl ul { list-style:none; padding:0; margin:0; } .incl li { padding:.35rem 0 .35rem 1.6rem; position:relative; } .incl .yes::before { content:"✓"; position:absolute; left:0; color:var(--ok); font-weight:800; } .incl .no::before { content:"✕"; position:absolute; left:0; color:var(--accent); font-weight:800; } @media (max-width:600px){ .incl{ grid-template-columns:1fr; } } /* ---- ITINERARY ---- */ .timeline { list-style:none; margin:0; padding:0; border-left:3px solid var(--line); } .timeline li { position:relative; padding:0 0 var(--s4) var(--s4); } .timeline li::before { content:""; position:absolute; left:-9px; top:4px; width:15px; height:15px; border-radius:50%; background:var(--accent); border:3px solid var(--paper); } .timeline .t { font-family:var(--display); font-weight:700; } /* ---- PROS / CONS ---- */ .proscons { display:grid; grid-template-columns:1fr 1fr; gap:var(--s4); } .proscons .col { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:var(--s4); } .proscons h3 { margin-top:0; } .proscons ul { padding-left:1.1rem; margin:0; } .proscons li { margin-bottom:.5rem; } .proscons .pros { border-top:4px solid var(--ok); } .proscons .cons { border-top:4px solid var(--accent); } @media (max-width:600px){ .proscons{ grid-template-columns:1fr; } } /* ---- AUTHOR EXPERIENCE ---- */ .author-block { background:var(--paper-2); border:1px solid var(--line); border-radius:var(--radius); padding:var(--s5); display:grid; grid-template-columns:auto 1fr; gap:var(--s4); align-items:start; } .author-block img.avatar { width:84px; height:84px; border-radius:50%; object-fit:cover; border:3px solid var(--surface); box-shadow:var(--shadow); } .author-block .updated { font-size:var(--step--1); color:var(--ink-soft); margin-top:var(--s3); } @media (max-width:600px){ .author-block{ grid-template-columns:1fr; } } /* ---- TRUST STRIP ---- */ .trust { display:grid; grid-template-columns:repeat(4,1fr); gap:var(--s3); text-align:center; background:var(--paper-2); border:1px solid var(--line); border-radius:var(--radius); padding:var(--s4); } .trust .num { font-family:var(--display); font-size:var(--step-2); font-weight:800; color:var(--gold-deep); } .trust .lbl { font-size:var(--step--1); color:var(--ink-soft); } @media (max-width:640px){ .trust{ grid-template-columns:repeat(2,1fr); gap:var(--s4); } } /* ---- FAQ (FAQPage) ---- */ .faq details { border:1px solid var(--line); border-radius:var(--radius-sm); background:var(--surface); padding:.4rem 1rem; margin-bottom:.7rem; } .faq summary { font-family:var(--display); font-weight:700; cursor:pointer; padding:.6rem 0; list-style:none; color:var(--ink); } .faq summary::-webkit-details-marker{ display:none; } .faq summary::after { content:"+"; float:right; color:var(--accent); font-weight:800; } .faq details[open] summary::after { content:"−"; } /* ---- RELATED TOURS ---- */ .related { display:grid; grid-template-columns:repeat(2,1fr); gap:var(--s4); } .related .rcard { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow); } .related .rcard .rc-media { aspect-ratio:4/3; background:var(--paper-2); } .related .rcard .rc-media img { width:100%; height:100%; object-fit:cover; } .related .rcard .rc-body { padding:var(--s3) var(--s4); } @media (max-width:600px){ .related{ grid-template-columns:1fr; } } /* 3-up card grid (homepage / hubs) */ .cards-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s4); } .cards-3 .rcard { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow); display:flex; flex-direction:column; } .cards-3 .rcard .rc-media { aspect-ratio:4/3; background:var(--paper-2); } .cards-3 .rcard .rc-media img { width:100%; height:100%; object-fit:cover; } .cards-3 .rcard .rc-body { padding:var(--s3) var(--s4) var(--s4); display:flex; flex-direction:column; gap:var(--s2); flex:1; } .cards-3 .rcard .rc-body .btn { margin-top:auto; } @media (max-width:820px){ .cards-3{ grid-template-columns:1fr; } } /* Product card upgrades: "best for" frame, benefit bullets, social proof, popular badge */ .pc-reviews { font-weight:500; color:var(--ink-soft); font-size:var(--step--1); } .pc-bestfor { align-self:flex-start; margin:0; background:var(--gold-soft); color:var(--gold-ink); font-weight:700; font-size:.7rem; text-transform:uppercase; letter-spacing:.05em; padding:.28rem .65rem; border-radius:999px; } .pc-points { list-style:none; padding:0; margin:.15rem 0 0; display:flex; flex-direction:column; gap:.4rem; } .pc-points li { position:relative; padding-left:1.45rem; font-size:var(--step--1); color:var(--ink); line-height:1.4; } .pc-points li::before { content:"✓"; position:absolute; left:0; top:-.02em; color:var(--accent); font-weight:800; } .rc-media, .pc-media { position:relative; } .pc-badge { position:absolute; top:.6rem; left:.6rem; z-index:1; background:var(--gold-soft); color:var(--gold-ink); font-weight:800; font-size:.7rem; text-transform:uppercase; letter-spacing:.05em; padding:.32rem .7rem; border-radius:999px; box-shadow:var(--shadow); } .cards-3 .rcard.is-popular, .product-card.is-popular { border-color:var(--gold); box-shadow:0 0 0 2px var(--gold), var(--shadow); } /* ---- CTA BANNER ---- */ /* Dark grounds invert the gold pair: --gold-deep is unreadable on ink, --gold is AA on it. */ .hero-full .eyebrow, .cta-banner .eyebrow, .band-ink .eyebrow, .hero-full .stars .stars-fill::before, .cta-banner .stars .stars-fill::before, .band-ink .stars .stars-fill::before, .cta-banner .cta-proof .gold, .hero-full .cta-proof .gold, .band-ink .gold { color:var(--gold-light); } /* The banner ground is built from --footer, the one palette token that is dark in BOTH themes, so this panel never inverts. It carried a donor bottle green which belongs to no token on this site. --band-fg/--band-link are re-pointed ON the banner because `.section[class*="band-"] :where(h1,h2,...)` has the SAME specificity as `.cta-banner h2` and is declared later: it was repainting the heading --band-fg (the donor ink) over the dark panel at 1.46:1. Setting the token instead of fighting the cascade fixes every heading level at once. */ .cta-banner { background:linear-gradient(120deg, color-mix(in srgb, var(--footer) 86%, var(--sea)), var(--footer)); border:1px solid color-mix(in srgb, var(--footer) 62%, var(--sea)); color:#fff; --band-fg:#FFFFFF; --band-link:#FFFFFF; --band-link-hover:#FFFFFF; border-radius:var(--radius); padding:var(--s5); text-align:center; } .cta-banner h2, .cta-banner h3 { color:#fff; margin-top:0; } /* A prose link inside the banner used to fall through to the global a{color:var(--brand)}: on /faq/ the banner sits in a plain `.section` with no band- class, so neither the band link rule nor the --band-link token above could reach it, and "guides" rendered the donor brand navy on the dark panel at 1.57:1. Measured on the rendered page, not reasoned from the stylesheet. */ .cta-banner a:not(.btn) { color:var(--band-fg); text-decoration-color:color-mix(in srgb, var(--band-fg) 55%, transparent); } .cta-banner a:not(.btn):hover { text-decoration-color:#fff; } .cta-banner p { color:color-mix(in srgb, var(--band-fg) 86%, transparent); max-width:52ch; margin-inline:auto; } /* ---- AVAILABILITY WIDGET (date -> affiliate check) ---- */ .availability { display:flex; gap:.7rem; align-items:center; flex-wrap:wrap; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:var(--s3) var(--s4); box-shadow:var(--shadow); } .availability .av-label { font-family:var(--display); font-weight:700; color:var(--ink); } .availability .av-date { padding:.7rem .8rem; border:1px solid var(--line); border-radius:var(--radius-sm); font:inherit; min-height:48px; background:var(--surface-2); color:var(--ink); color-scheme:light; } .availability .av-go, .availability .av-check { margin-left:auto; } .availability .av-msg { width:100%; margin:.3rem 0 0; color:var(--ok); font-weight:600; } @media (max-width:560px){ .availability .av-go, .availability .av-check { margin-left:0; width:100%; } } /* ---- FOOTER (the one deepest surface, deep aubergine cellar band) ---- */ .site-footer { background:var(--footer); color:var(--footer-ink); margin-top:var(--s7); padding-block:var(--s6) var(--s4); border-top:1px solid var(--line); } .footer-grid { display:grid; grid-template-columns:2fr 1fr 1fr; gap:var(--s5); } .site-footer a { color:var(--footer-link); text-decoration:none; } .site-footer a:hover { text-decoration:underline; } .site-footer h4, .site-footer .footer-h { font-family:var(--display); font-weight:700; font-size:var(--step-0); color:#fff; margin:0 0 var(--s2); } .footer-nav ul { list-style:none; margin:0; padding:0; } .footer-nav li { margin-bottom:.4rem; } .socials { display:flex; gap:.8rem; margin-top:var(--s3); } .socials a { width:40px; height:40px; display:grid; place-items:center; border:1px solid var(--footer-line); border-radius:50%; } .socials a:hover { border-color:var(--gold); color:var(--gold); } .disclosure { font-size:var(--step--1); color:var(--footer-mute); border-top:1px solid var(--footer-line); margin-top:var(--s5); padding-top:var(--s3); } .disclosure p { max-width:none; } @media (max-width:740px){ .footer-grid{ grid-template-columns:1fr; gap:var(--s4); } } /* ---- BLOG ---- */ .blog-hero { margin:var(--s5) 0 0; } .blog-hero img { width:100%; height:auto; aspect-ratio:16/9; object-fit:cover; border-radius:var(--radius); box-shadow:var(--shadow); } .blog-post .author-hook { display:flex; align-items:center; gap:.6rem; font-size:var(--step--1); color:var(--ink-soft); margin-top:var(--s3); } .blog-post .author-hook img { width:38px; height:38px; border-radius:50%; object-fit:cover; border:2px solid var(--line); } .prose { margin-top:var(--s5); } .prose > * { max-width:64ch; } .prose h2 { margin-top:var(--s6); } .prose h3 { margin-top:var(--s5); } .prose img { width:100%; max-width:100%; height:auto; border-radius:var(--radius); margin:var(--s4) 0; box-shadow:var(--shadow); } .prose figure { margin:var(--s4) 0; } .prose figcaption { font-size:var(--step--1); color:var(--ink-soft); margin-top:.4rem; } .prose ul, .prose ol { padding-left:1.3rem; } .prose li { margin-bottom:.4rem; } .prose blockquote { margin:var(--s4) 0; padding:.4rem 0 .4rem var(--s4); border-left:4px solid var(--accent); color:var(--ink-soft); font-style:italic; } /* ---- SITEWIDE TABLE STANDARD (Oleg 2026-09-04): header row in paper-2 with the display font, zebra rows, comfortable padding, rounded bordered container (compile.mjs wraps every bare in .table-scroll, which scrolls sideways on phones), and bare numbers / prices right-aligned via class="num" (added at compile time). ---- */ .table-scroll { overflow-x:auto; -webkit-overflow-scrolling:touch; margin:var(--s4) 0; border:1px solid var(--line); border-radius:var(--radius); background:var(--surface); } .table-scroll > table, .prose table { width:100%; min-width:0; border-collapse:collapse; background:var(--surface); margin:0; font-size:var(--step--1); border:0; } table th, table td, .prose th, .prose td { text-align:left; padding:.75rem .95rem; border-bottom:1px solid var(--line); vertical-align:top; line-height:1.45; } table thead th, .prose thead th { background:var(--paper-2); font-family:var(--display); font-weight:700; color:var(--ink); letter-spacing:.01em; } table tbody tr:nth-child(even) > td { background:var(--surface-2); } table tbody tr:last-child > td { border-bottom:0; } td.num, th.num { text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap; } .prose a { color:var(--accent); } /* CRITICAL: .prose a (0,1,1) out-specifies .btn-primary (0,1,0); without these overrides a button inside an article body renders accent-on-accent = INVISIBLE TEXT. */ .prose a.btn-primary, .prose a.btn-primary:hover { color:var(--accent-ink); } .prose a.btn-brand { color:var(--brand-ink); } .prose a.btn-ghost { color:var(--ink); } /* Hotel affiliate pill (Expedia via Travelpayouts): deliberately amber + outline so it reads as a secondary lodging action, distinct from the cyan GetYourGuide tour buttons. Explicit colors defeat the .prose a override trap above. */ .hotel-cta, .prose a.hotel-cta { display:inline-flex; align-items:center; gap:.35rem; font-family:var(--display); font-weight:800; font-size:var(--step--1); line-height:1; padding:.6rem 1.1rem; border-radius:10px; border:1px solid var(--gold-deep); color:#fff; background:var(--gold-deep); text-decoration:none; white-space:nowrap; box-shadow:var(--shadow); } .hotel-cta:hover, .prose a.hotel-cta:hover { background:var(--gold-ink); color:#fff; text-decoration:none; } .hotel-row { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:.6rem .9rem; margin:.2rem 0 var(--s3); padding:.7rem .95rem; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-sm); } .hotel-row .hr-name { font-weight:700; color:var(--ink); } .blog-cta { background:var(--paper-2); border:1px solid var(--line); border-left:4px solid var(--accent); border-radius:var(--radius); padding:var(--s4) var(--s5); margin:var(--s6) 0 0; } .blog-cta h2 { margin-top:0; } .blog-cta p { margin-bottom:var(--s3); } .blog-cta-btns { display:flex; gap:.6rem; flex-wrap:wrap; align-items:center; } /* ---- INFOGRAPHIC (data-rendered SVG) ---- */ .infographic { margin:var(--s4) 0; } .infographic img, .infographic svg { width:100%; height:auto; border-radius:var(--radius); border:1px solid var(--line); background:var(--surface); display:block; } .infographic figcaption { margin-top:.6rem; text-align:center; color:var(--ink-soft); } .embed + p, .embed + p.small, .video-grid + p { max-width:none; } /* information-gain block: fresh, sourced data competitors don't carry */ .infogain { background:var(--paper-2); border:1px solid var(--line); border-left:5px solid var(--gold); border-radius:var(--radius); padding:var(--s4) var(--s4) var(--s3); margin:var(--s5) 0; } .infogain .infogain-h { display:flex; align-items:center; flex-wrap:wrap; gap:.55rem; font-family:var(--display); font-weight:800; font-size:var(--step-1); line-height:1.1; margin:0 0 var(--s3); max-width:none; color:var(--ink); } .infogain .tag { font-family:var(--body); font-size:var(--step--1); font-weight:700; color:var(--gold-ink); background:var(--gold-soft); padding:.18rem .55rem; border-radius:999px; letter-spacing:.03em; text-transform:uppercase; } .infogain ul { list-style:none; margin:0; padding:0; display:grid; gap:var(--s3); } .infogain li { position:relative; padding-left:1.5rem; max-width:66ch; } .infogain li::before { content:""; position:absolute; left:0; top:.5em; width:.55rem; height:.55rem; background:var(--gold); border-radius:50%; } .infogain .src { display:block; font-size:var(--step--1); color:var(--ink-soft); margin-top:.2rem; } .infogain .src a { color:var(--ink-soft); } .infogain .infogain-note { font-size:var(--step--1); color:var(--ink-soft); margin:var(--s3) 0 0; max-width:none; } /* ---- EMBEDS (interactive map + videos) ---- */ .embed { position:relative; width:100%; aspect-ratio:16/9; border-radius:var(--radius); overflow:hidden; border:1px solid var(--line); box-shadow:var(--shadow); background:var(--surface); } .embed iframe { position:absolute; inset:0; width:100%; height:100%; border:0; } .video-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s4); } .video-grid .embed { box-shadow:none; } @media (max-width:820px){ .video-grid{ grid-template-columns:1fr; } } /* ---- CONVERSION COMPONENTS (conversion-optimizer skill) ---- */ .btn-xl { font-size: var(--step-1); padding: 1.05rem 1.9rem; } @media (max-width: 430px) { .btn-xl { font-size: var(--step-0); padding: .95rem 1.2rem; } } .cta-proof { display:block; font-size:var(--step--1); color:var(--ink-soft); margin:.55rem 0 0; max-width:none; } .cta-proof .gold { color: var(--gold-light); font-weight:700; } /* .cta-proof only ever sits on a dark ground */ .cta-box { background:var(--paper-2); border:1px solid var(--line); border-top:3px solid var(--accent); border-radius:var(--radius); padding:var(--s5); margin:var(--s5) 0; max-width:none; text-align:center; } .cta-box .cb-h { font-family:var(--display); font-weight:800; font-size:var(--step-2); color:var(--ink); margin:0 0 .5rem; max-width:none; } .cta-box p { max-width:44ch; margin-inline:auto; } .cta-box p:last-child { margin-bottom:0; max-width:none; } .cta-box .btn { margin-top:.5rem; } .cta-box a.btn-primary, .cta-box a.btn-primary:hover { color:var(--accent-ink); } @media (max-width:640px){ .cta-box { padding:var(--s4); } .cta-box .btn { width:100%; } } /* sticky bar: fixed overlay (zero CLS), thin, revealed after first screen */ .sticky-cta { position:fixed; z-index:45; left:0; right:0; bottom:0; display:flex; align-items:center; justify-content:center; gap:.9rem; padding:.55rem .9rem calc(.55rem + env(safe-area-inset-bottom)); background:color-mix(in srgb, var(--paper) 97%, transparent); color:var(--ink); backdrop-filter:blur(8px); border-top:1px solid color-mix(in srgb, var(--ink) 50%, var(--paper)); transform:translateY(110%); transition:transform .25s ease; } @supports not (backdrop-filter: blur(1px)) { .sticky-cta { background: var(--paper); } } .sticky-cta.visible { transform:translateY(0); } .sticky-cta .sc-proof { font-size:var(--step--1); color:var(--ink); white-space:nowrap; flex:0 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; } .sticky-cta .sc-proof .gold { color:var(--gold-deep); font-weight:700; } .sticky-cta .btn { min-height:44px; padding:.6rem 1.3rem; white-space:nowrap; flex:0 0 auto; } @media (min-width: 761px) { .sticky-cta { left:auto; right:1.2rem; bottom:1.2rem; border:1px solid color-mix(in srgb, var(--ink) 50%, var(--paper)); border-radius:999px; padding:.5rem .6rem .5rem 1.1rem; box-shadow:var(--shadow); } /* article pages (blog/guides): full-width bottom bar on desktop too, like mobile */ body.article .sticky-cta { left:0; right:0; bottom:0; border-radius:0; border:0; border-top:1px solid color-mix(in srgb, var(--ink) 50%, var(--paper)); box-shadow:none; padding:.55rem .9rem; } } @media (prefers-reduced-motion: reduce) { .sticky-cta { transition:none; } } /* ---- TESTIMONIALS (real GetYourGuide/Tripadvisor reviews, verbatim) ---- */ .reviews { display:grid; grid-template-columns:repeat(2,1fr); gap:var(--s4); } .review-card { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:var(--s4); display:flex; flex-direction:column; gap:var(--s2); } .review-card .stars { font-size:.95rem; } .review-card blockquote { margin:0; font-size:var(--step-0); color:var(--ink); max-width:none; } .review-card blockquote p { max-width:none; margin:0; } .review-meta { margin-top:auto; font-size:var(--step--1); color:var(--ink-soft); } .review-meta strong { color:var(--ink); } @media (max-width:760px){ .reviews{ grid-template-columns:1fr; } } /* utility */ .lede { font-size:var(--step-0); font-weight:600; color:var(--ink-soft); } /* MEASURED, not reasoned: at --step-1 the hub lede computed to 19.55px against a 31.02px section H2 at 390px, a ratio of 1.59 against rule 31's 1.7 floor. A lead paragraph is body copy, so the size drops to --step-0 and the emphasis moves to weight. Ratio is now 1.92. */ .small { font-size:var(--step--1); color:var(--ink-soft); } .mt-0{margin-top:0}.mb-0{margin-bottom:0}.text-center{text-align:center} /* ============================================================ SITE-SPECIFIC LAYER , "Arctic Rust" additions for svalbardtours.org ============================================================ */ /* ---- FLIPPED SPLIT HERO (this site's first screen, approved 2026-08-07). Tall photo LEFT, headline + proof + XL CTA RIGHT. On mobile the H1 comes first and the photo drops below, so the primary-keyword H1 is above the fold. ---- */ .hero--split { display:grid; grid-template-columns: .85fr 1.15fr; gap: var(--s5); align-items:center; padding-block: var(--s5) var(--s6); } .hero--split .hero-media { order:-1; aspect-ratio:3/4; border-radius:var(--radius); overflow:hidden; background:var(--paper-2); box-shadow:var(--shadow); } .hero--split .hero-media img { width:100%; height:100%; object-fit:cover; } .hero--split h1 { margin-bottom: var(--s3); max-width: 16ch; } .hero--split .lede { max-width: 46ch; margin-bottom: var(--s4); } .hero--split .hero-actions { display:flex; flex-wrap:wrap; gap:.7rem; align-items:center; } .hero--split .author-hook { display:flex; align-items:center; gap:.6rem; font-size:var(--step--1); color:var(--ink-soft); margin-top:var(--s4); } .hero--split .author-hook img { width:38px; height:38px; border-radius:50%; object-fit:cover; border:2px solid var(--line); } @media (max-width: 860px) { .hero--split { grid-template-columns:1fr; gap:var(--s4); padding-block:var(--s4) var(--s5); } /* The media div is FIRST in the DOM so it can sit left on desktop. On mobile it has to drop BELOW the text, or the primary-keyword H1 is pushed off the first screen. */ .hero--split .hero-media { order:2; aspect-ratio:4/3; } .hero--split h1 { max-width:none; } } /* ---- Editorial hairline under section headings (the industrial detail) ---- */ .section > h2:first-child, .rule-h2 { padding-bottom: var(--s2); border-bottom: 2px solid var(--sea); border-image: repeating-linear-gradient(90deg, var(--ink) 0 14px, var(--accent) 14px 18px, var(--ink) 18px 32px) 1; } /* A .section right after a non-.section intro block (h1+lede hero) keeps its own padding-top, so its first h2 does not also need its default margin-top; skipping this doubles the gap above the heading. Adjacent .section+.section pairs are unaffected: there the section's own padding-top is already zeroed and the h2 margin is the sole spacer. */ :not(.section) + .section > h2:first-child { margin-top: 0; } /* ---- CATEGORY GRID (8 activity hubs on the homepage) ---- */ .cat-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s3); } .cat-card { display:flex; flex-direction:column; gap:.3rem; background:var(--surface); border:1px solid var(--line); border-left:4px solid var(--sea); border-radius:var(--radius-sm); padding:var(--s3) var(--s4); text-decoration:none; color:var(--ink); transition:border-color .15s ease, transform .08s ease; } .cat-card:hover { border-left-color:var(--sea-deep); transform:translateY(-2px); } .cat-card .cc-name { font-family:var(--display); font-weight:800; font-size:var(--step-0); line-height:1.2; } .cat-card .cc-meta { font-size:var(--step--1); color:var(--ink-soft); } @media (max-width:900px){ .cat-grid{ grid-template-columns:repeat(2,1fr); } } @media (max-width:520px){ .cat-grid{ grid-template-columns:1fr; } } /* ---- PLATFORM PILL (which marketplace a listing lives on) ---- */ .pc-platform { font-size:var(--step--1); font-weight:700; color:var(--ink-soft); } .pc-platform .pf { display:inline-block; padding:.12rem .5rem; border-radius:999px; border:1px solid var(--line); background:var(--paper-2); color:var(--ink); font-size:.72rem; letter-spacing:.03em; text-transform:uppercase; } /* ---- HONESTY CALLOUT (used wherever the site corrects a common claim) ---- */ .honesty { background:var(--surface); border:1px solid var(--line); border-left:5px solid var(--accent); border-radius:var(--radius); padding:var(--s4); margin:var(--s5) 0; } .honesty .h-h { font-family:var(--display); font-weight:800; font-size:var(--step-1); margin:0 0 var(--s2); max-width:none; color:var(--ink); } .honesty p:last-child { margin-bottom:0; } .prose .honesty p { max-width:none; } /* ---- TOUR LIST (category hubs: a dense, scannable row per product) ---- */ .tour-list { display:grid; gap:var(--s3); } .tour-row { display:grid; grid-template-columns:1fr auto; gap:var(--s3) var(--s4); align-items:start; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:var(--s4); } .tour-row.is-lead { border-color:var(--gold); box-shadow:0 0 0 2px var(--gold-soft), var(--shadow); } .tour-row h3 { margin:0 0 .35rem; font-size:var(--step-1); } .tour-row h3 a { color:var(--ink); text-decoration:none; } .tour-row .tr-meta { font-size:var(--step--1); color:var(--ink-soft); margin:0 0 .5rem; max-width:none; } .tour-row .tr-desc { margin:0; max-width:58ch; } .tour-row .tr-cta { display:flex; flex-direction:column; align-items:flex-end; gap:.4rem; text-align:right; } .tour-row .tr-price { font-family:var(--display); font-weight:800; font-size:var(--step-1); white-space:nowrap; } .tour-row .tr-price small { display:block; font-family:var(--body); font-size:var(--step--1); font-weight:500; color:var(--ink-soft); white-space:normal; } @media (max-width:760px){ .tour-row { grid-template-columns:1fr; } .tour-row .tr-cta { align-items:stretch; text-align:left; } .tour-row .tr-cta .btn { width:100%; } } /* ============================================================ TOUR-PICKS GRID (depth-cro conversion layer, ported from niagarafallsboattours.org 2026-08-15 and re-tokened for "Arctic Rust"). A 3-card grid dropped into an article body before its FAQ. Whole card converts: image, title and button all carry the sponsored link. ============================================================ */ .tour-picks { background:var(--paper-2); border:1px solid var(--line); border-radius:var(--radius); padding:var(--s4); margin:var(--s5) 0; } .tour-picks .tp-season { font-size:var(--step--1); color:var(--ink-soft); margin:0 0 var(--s3); border-left:3px solid var(--accent); padding-left:.7rem; } .tour-picks .tp-grid { display:grid; gap:var(--s3); grid-template-columns:1fr; } @media (min-width:700px) { .tour-picks .tp-grid { grid-template-columns:repeat(3,1fr); } } .tour-picks .tp-card { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-sm); overflow:hidden; display:flex; flex-direction:column; } .tour-picks .tp-media { display:block; aspect-ratio:4/3; overflow:hidden; } .tour-picks .tp-media img { width:100%; height:100%; object-fit:cover; } .tour-picks .tp-body { padding:var(--s3); display:flex; flex-direction:column; gap:.5rem; flex:1; } .tour-picks .tp-chips { margin:0; display:flex; gap:.35rem; flex-wrap:wrap; } .pc-chip { display:inline-block; font-size:.7rem; font-weight:700; letter-spacing:.02em; padding:.2rem .55rem; border-radius:999px; background:var(--paper-2); color:var(--ink-soft); border:1px solid var(--line); } /* nowrap REMOVED: it is safe only for a genuinely short label, and this chip used to be fed a sentence, which nowrap then clipped at the card edge. Duration is short enough to wrap gracefully on the rare narrow card, and wrapping is always better than invisible text. */ .tour-picks .tp-chips .pc-chip { white-space:normal; } /* The product one-liner that used to be crammed into a chip. A real paragraph, clamped to two lines so a long note cannot unbalance the grid, and clamping degrades to simply showing the text where line-clamp is unsupported. */ .tour-picks .tp-note { font-size: var(--step--1); color: var(--ink-soft); margin: .35rem 0 0; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; } .tour-picks .tp-chips .pc-chip:first-child { color:var(--ink); } .tour-picks .tp-title { font-weight:700; color:var(--ink); font-size:var(--step--1); line-height:1.35; margin:0; } .tour-picks .tp-title a { color:var(--ink); text-decoration:none; } .tour-picks .tp-title a:hover { color:var(--brand-deep); text-decoration:underline; } .tour-picks .tp-proof { font-size:var(--step--1); color:var(--ink-soft); margin:0; } .tour-picks .tp-proof .gold { color:var(--gold-deep); font-weight:700; } .tour-picks .tp-proof-none { font-style:italic; } .tour-picks .tp-reassure { margin:0; font-size:.74rem; color:var(--ink-soft); } .tour-picks .tp-body .btn { margin-top:auto; width:100%; white-space:nowrap; font-size:var(--step--1); padding:.7rem .8rem; } .tour-picks a.btn-primary, .tour-picks a.btn-primary:hover { color:var(--accent-ink); } /* BREAKOUT: .prose > * and .wrap-narrow cap children at ~64ch/50rem, and max-width beats width, so a 3-card grid gets crushed to ~150px columns unless the panel is lifted out of the measure (same pattern as .cta-box / .infogain). This is the CSS gotcha the depth-cro skill flags. */ .wrap-narrow .tour-picks, .prose .tour-picks, .blog-post .tour-picks { max-width:none; width:min(100vw - 2rem, 68rem); margin-left:50%; transform:translateX(-50%); } @media (max-width:700px) { .wrap-narrow .tour-picks, .prose .tour-picks, .blog-post .tour-picks { width:100%; margin-left:0; transform:none; } } /* ---- v2.1: card-style mid-article CTA (image + body) ---- */ .cta-box.cta-card { display:grid; grid-template-columns:230px 1fr; gap:var(--s4); align-items:center; max-width:none; } .cta-box.cta-card .cb-media { display:block; } .cta-box.cta-card .cb-media img { width:100%; height:100%; min-height:170px; object-fit:cover; border-radius:var(--radius-sm); display:block; } .cta-box.cta-card .cb-body p { margin:0 0 var(--s2); max-width:none; margin-inline:0; text-align:left; } .cta-box.cta-card .tp-proof { color:var(--ink-soft); font-size:var(--step--1); } @media (max-width: 700px) { .cta-box.cta-card { grid-template-columns:1fr; } } /* category card: who-it's-for line */ .cat-card .cc-who { display:block; margin-top:.35rem; color:var(--ink-soft); font-size:var(--step--1); font-weight:600; } /* ---- v2.2 (Oleg, 2026-08-18): section intros span the container, rows + cat cards carry images ---- */ .section.wrap > p { max-width: none; } .tour-row.has-media { grid-template-columns: 220px 1fr auto; } .tour-row .tr-media { display:block; align-self:stretch; } .tour-row .tr-media img { width:100%; height:100%; min-height:150px; object-fit:cover; border-radius:var(--radius-sm); display:block; } @media (max-width: 860px) { .tour-row.has-media { grid-template-columns: 1fr; } .tour-row .tr-media img { min-height:0; max-height:210px; } } .cat-card { padding-top:0; overflow:hidden; } .cat-card .cc-media { display:block; margin:0 calc(-1 * var(--s4)) var(--s2); } .cat-card .cc-media img { width:100%; height:130px; object-fit:cover; display:block; } /* homepage per-category anchor blocks */ .cat-block { margin-top: var(--s5); scroll-margin-top: 5rem; } .cat-block > h3 { margin-bottom: var(--s1); } .cat-block > p.small { margin-top: 0; color: var(--ink-soft); } /* single mid-article conversion card (gradual blog placements) */ .tp-solo { margin: var(--s5) 0; } .tp-solo .tp-grid { grid-template-columns: 1fr; max-width: 34rem; margin-inline: auto; } /* ---- TOUR (MONEY) PAGES: booking panel above the fold (tour-page-cro spec) ---- */ .tour-hero { padding-top: var(--s4); } .tour-hero-grid { display: grid; gap: var(--s4); align-items: start; } @media (min-width: 860px) { .tour-hero-grid { grid-template-columns: 1.15fr 1fr; } } .tour-hero .hero-media img { width: 100%; height: auto; border-radius: var(--radius); box-shadow: var(--shadow); } .booking-panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--s4); box-shadow: var(--shadow); } .booking-panel h1 { font-size: var(--step-2); margin: 0 0 var(--s2); line-height: 1.15; } .booking-panel .bp-title { font-family: var(--display); font-weight: 800; font-size: var(--step-2); margin: 0 0 var(--s2); line-height: 1.15; color: var(--ink); max-width: none; } .bp-rating { margin: 0 0 var(--s2); color: var(--ink-soft); font-size: var(--step--1); } .bp-rating .gold { color: var(--gold-deep); font-weight: 700; } .bp-reason { margin: 0 0 var(--s2); font-size: var(--step-0); } .bp-urgency { margin: 0 0 var(--s2); font-size: var(--step--1); font-weight: 700; color: var(--brand); } .bp-urgency::before { content: ""; display: inline-block; width: .55em; height: .55em; border-radius: 50%; background: var(--brand); margin-right: .45em; vertical-align: middle; } .tr-urgency { margin: 0 0 var(--s1); font-size: var(--step--1); font-weight: 700; color: var(--brand); } /* Phones: price + button come before the reason and the urgency line (tour-page-cro spec 1). */ @media (max-width: 859px) { .booking-panel { display: flex; flex-direction: column; } .booking-panel h1, .booking-panel .bp-title { order: 0; } .booking-panel .bp-rating { order: 1; } .booking-panel .bp-reason { order: 2; } .booking-panel .bp-price { order: 3; } .booking-panel .btn-block { order: 4; } .booking-panel .bp-next { order: 5; } .booking-panel .bp-urgency { order: 6; } .booking-panel .bp-facts { order: 7; } } .bp-price { margin: 0 0 var(--s3); font-size: var(--step-1); font-family: var(--display); } .bp-price small { display: block; font-size: var(--step--1); color: var(--ink-soft); font-family: var(--body); font-weight: 400; } .btn-block { display: block; width: 100%; text-align: center; } .bp-next { color: var(--ink-soft); margin: var(--s2) 0 var(--s3); } .bp-facts { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s2) var(--s3); margin: 0; border-top: 1px solid var(--line); padding-top: var(--s3); } .bp-facts div { min-width: 0; } .bp-facts dt { font-size: var(--step--1); color: var(--ink-soft); } .bp-facts dd { margin: 0; font-size: var(--step--1); font-weight: 600; } /* Keep-reading: deterministic sibling-article links at the end of every article */ .keep-reading{margin:var(--s5) auto 0;padding-top:var(--s4);border-top:1px solid var(--line)} .keep-reading h2{font-size:1.1rem;margin:0 0 .6rem} .keep-reading ul{list-style:none;margin:0;padding:0;display:grid;gap:.45rem} .keep-reading li{display:flex;justify-content:space-between;gap:1rem;align-items:baseline} .keep-reading a{font-weight:600} .keep-reading .kr-kind{font-size:.8rem;color:var(--ink-soft);white-space:nowrap} /* ============================================================ HOMEPAGE BLUEPRINT (Oleg 2026-09-04): quick answer, takeaways, category compare table, inclusions matrix, stat grid, season strip + cards, wine cards, spot map, testimonials, hotels, answered grid. Same tokens as the rest of the sheet: paper / ink / brand / accent / gold. ============================================================ */ .ico { width:1.2em; height:1.2em; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; vertical-align:-.22em; flex:none; } /* Quick answer + key takeaways */ .quick-answer-box { background:var(--surface); border:1px solid var(--line); border-left:5px solid var(--sea); border-radius:var(--radius); padding:var(--s4) var(--s5); display:grid; gap:.7rem; } .quick-answer-box p { margin:0; max-width:72ch; font-size:var(--step-0); } .quick-answer-box p:first-child { font-size:var(--step-1); line-height:1.4; } .takeaways-list { list-style:none; margin:0; padding:0; display:grid; gap:.65rem; } .takeaways-list li { position:relative; padding-left:1.8rem; line-height:1.5; max-width:78ch; } .takeaways-list li::before { content:"\2713"; position:absolute; left:0; top:.05em; color:var(--sea-deep); font-weight:800; font-family:var(--display); } /* Category comparison table (.cmp-table): sticky first column while it scrolls sideways, cards under 640px */ .cmp-table .cat-name { display:inline-flex; align-items:center; gap:.5rem; font-family:var(--display); font-weight:800; color:var(--ink); } .cmp-table .cat-name:hover span { color:var(--brand-deep); } .cmp-table .cat-name .ico { color:var(--sea); width:1.45em; height:1.45em; } .cmp-table th:first-child, .cmp-table td:first-child { position:sticky; left:0; z-index:1; background:var(--surface); box-shadow:1px 0 0 var(--line); } .cmp-table thead th:first-child { background:var(--paper-2); } .cmp-table tbody tr:nth-child(even) > td:first-child { background:var(--surface-2); } .cmp-table td a:not(.cat-name) { font-weight:600; } @media (max-width:640px){ .cmp-table thead { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; padding:0; } .cmp-table, .cmp-table tbody, .cmp-table tr, .cmp-table td { display:block; width:100%; } .cmp-table tr { border-bottom:1px solid var(--line); padding:.5rem 0 .6rem; } .cmp-table tr:last-child { border-bottom:0; } .cmp-table td { display:grid; grid-template-columns:7rem 1fr; gap:.6rem; border:0; padding:.3rem .9rem; background:transparent !important; position:static; box-shadow:none; } .cmp-table td::before { content:attr(data-label); font-family:var(--display); font-weight:700; color:var(--ink-soft); font-size:.78rem; } .cmp-table td.num { text-align:left; white-space:normal; } .cmp-table td:first-child { grid-template-columns:1fr; padding-top:.6rem; } .cmp-table td:first-child::before { display:none; } } /* Inclusions matrix (.matrix-table): sticky header under the site header, glyph cells, cards under 768px */ .matrix-table { width:100%; border-collapse:separate; border-spacing:0; border:1px solid var(--line); border-radius:var(--radius); overflow:clip; background:var(--surface); margin-top:var(--s4); font-size:var(--step--1); } .matrix-table thead th { position:sticky; top:3.6rem; z-index:2; background:var(--paper-2); box-shadow:0 1px 0 var(--line); } .matrix-table th:not(:first-child), .matrix-table td:not(:first-child) { text-align:center; } .matrix-table td:first-child a { font-weight:700; color:var(--ink); } .matrix-table td:first-child a:hover { color:var(--brand-deep); } .matrix-table td.num, .matrix-table th.num { text-align:right; font-family:var(--display); font-weight:800; font-size:var(--step-0); } .matrix-table small { display:block; color:var(--ink-soft); font-size:.74rem; line-height:1.25; margin-top:.25rem; } .glyph { display:inline-flex; align-items:center; justify-content:center; width:1.65rem; height:1.65rem; border-radius:50%; } .glyph .ico { width:1rem; height:1rem; stroke-width:2.6; vertical-align:0; } .glyph.yes { background:color-mix(in srgb, var(--brand) 18%, transparent); color:var(--sea); } .glyph.no { background:color-mix(in srgb, var(--slate) 12%, transparent); color:var(--brand); } .glyph.opt { background:var(--gold-soft); color:var(--gold-ink); } /* 768 -> 860. MEASURED at every media-query boundary, not just at 390/768/1440: at exactly 769px the seven-column matrix rendered 774px wide inside a 769px frame and the band's overflow-x:clip CUT the last column, with no page scrollbar to reveal it. Making the table scroll instead was the obvious move and is wrong here: overflow-x:auto turns the y axis to auto too, so the sticky header would stick to the scroller rather than under the site header. Widening the card breakpoint keeps both behaviours intact and costs nothing: 769-860 simply gets the card treatment it already has below 768. */ @media (max-width:860px){ .matrix-table { border:0; border-radius:0; background:transparent; overflow:visible; } .matrix-table thead { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; padding:0; } .matrix-table, .matrix-table tbody, .matrix-table tr, .matrix-table td { display:block; width:100%; } .matrix-table tr { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); margin-bottom:var(--s3); overflow:hidden; } .matrix-table tbody tr:nth-child(even) > td { background:var(--surface); } .matrix-table td { display:flex; justify-content:space-between; align-items:center; gap:var(--s3); text-align:right !important; padding:.55rem .9rem; border-bottom:1px solid var(--line); } .matrix-table td:last-child { border-bottom:0; } .matrix-table td::before { content:attr(data-label); font-family:var(--display); font-weight:700; color:var(--ink-soft); font-size:.78rem; text-align:left; flex:0 0 auto; } .matrix-table td:first-child { display:block; text-align:left !important; background:var(--paper-2); font-size:var(--step-0); } .matrix-table td:first-child::before { display:none; } .matrix-table small { display:inline; margin:0 0 0 .4rem; } } /* Destination stat grid */ .stat-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s3); margin-top:var(--s4); } .stat-tile { background:var(--surface); border:1px solid var(--line); border-top:4px solid var(--sea); border-radius:var(--radius); padding:var(--s3) var(--s4); display:grid; grid-template-columns:auto 1fr; gap:.15rem .9rem; align-items:start; } .stat-tile .st-ico { grid-row:1 / span 2; width:2rem; height:2rem; color:var(--sea); margin-top:.15rem; } .stat-tile .st-num { font-family:var(--display); font-weight:800; font-size:var(--step-2); line-height:1.05; color:var(--brand); letter-spacing:-.02em; } .stat-tile .st-label { font-size:var(--step--1); color:var(--ink-soft); line-height:1.4; } @media (max-width:760px){ .stat-grid { grid-template-columns:repeat(2,1fr); } } @media (max-width:460px){ .stat-grid { grid-template-columns:1fr; } } /* Season: 12-month strip + four season cards */ .month-strip { display:grid; grid-template-columns:repeat(12,1fr); gap:4px; margin:var(--s4) 0; padding:0; list-style:none; } .month-strip li { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-sm); padding:.45rem .25rem; text-align:center; display:grid; gap:.2rem; align-content:start; } .month-strip li b { font-family:var(--display); font-size:.85rem; } .month-strip li span { color:var(--ink-soft); font-size:.8rem; line-height:1.15; } .month-strip li.is-event { background:color-mix(in srgb, var(--brand) 16%, transparent); border-color:var(--sea); } .month-strip li.is-harvest { background:var(--gold-soft); border-color:var(--gold); } .month-strip li.is-drying { background:color-mix(in srgb, var(--slate) 10%, transparent); border-color:var(--brand); } @media (max-width:760px){ .month-strip { grid-template-columns:repeat(6,1fr); } } @media (max-width:420px){ .month-strip { grid-template-columns:repeat(4,1fr); } } .season-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:var(--s3); } .season-card { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:var(--s4); display:flex; flex-direction:column; gap:.6rem; } .season-card .sc-head { display:flex; align-items:center; gap:.6rem; } .season-card .sc-head .ico { width:1.8rem; height:1.8rem; color:var(--sea); } .season-card h3 { margin:0; font-size:var(--step-1); } .season-card .sc-months { font-family:var(--display); text-transform:uppercase; letter-spacing:.08em; font-size:.8rem; color:var(--gold-ink); background:var(--gold-soft); padding:.2rem .6rem; border-radius:999px; align-self:flex-start; } .season-card p { margin:0; font-size:var(--step--1); } .season-card .sc-fits { margin-top:auto; border-top:1px solid var(--line); padding-top:.6rem; } @media (max-width:900px){ .season-grid { grid-template-columns:repeat(2,1fr); } } @media (max-width:520px){ .season-grid { grid-template-columns:1fr; } } /* Wine cards */ .wine-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:var(--s3); margin-top:var(--s4); } .wine-card { background:var(--surface); border:1px solid var(--line); border-top:5px solid var(--brand); border-radius:var(--radius); padding:var(--s3) var(--s4) var(--s4); display:flex; flex-direction:column; gap:.5rem; } .wine-card.is-white { border-top-color:var(--gold); } .wine-card.is-rose { border-top-color:color-mix(in srgb, var(--accent) 72%, var(--paper)); } .wine-card.is-sweet { border-top-color:var(--slate); } .wine-card h3 { margin:0; font-size:var(--step-0); line-height:1.25; } .wine-card .wc-style { font-family:var(--display); text-transform:uppercase; letter-spacing:.08em; font-size:.8rem; color:var(--ink-soft); } .wine-card dl { margin:0; display:grid; grid-template-columns:auto 1fr; gap:.25rem .6rem; font-size:.84rem; } .wine-card dt { font-weight:700; color:var(--ink-soft); } .wine-card dd { margin:0; } .wine-card p { margin:0; font-size:var(--step--1); } .wine-card .wc-tour { margin-top:auto; border-top:1px solid var(--line); padding-top:.5rem; font-size:.84rem; } @media (max-width:1000px){ .wine-grid { grid-template-columns:repeat(2,1fr); } } @media (max-width:520px){ .wine-grid { grid-template-columns:1fr; } } /* Spot map: live embed + hand-drawn pin schematic */ .spot-map-wrap { display:grid; grid-template-columns:1fr; gap:var(--s4); align-items:start; margin-top:var(--s3); } /* The site's own pin map (rule 44, true scale) leads; the generic Google embed closes. Side by side they could not work: the schematic is portrait (760x1032) and the embed is landscape, so in a 1fr 1fr grid with align-items:stretch the embed was forced to 562x1032 at 1440 and rendered as a half-page grey slab beside it. */ .spot-map-wrap .map-schematic { order:1; width:100%; max-width:46rem; margin-inline:auto; } .spot-map-wrap .map-embed { order:2; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; aspect-ratio:16/6; min-height:260px; background:var(--paper-2); } .spot-map-wrap .map-embed iframe { width:100%; height:100%; border:0; display:block; } .spot-map-wrap > * { min-width:0; max-width:100%; } @media (max-width:768px){ .spot-map-wrap { grid-template-columns:1fr; } .spot-map-wrap .map-embed { aspect-ratio:4/3; min-height:0; } } .spot-map-wrap .map-schematic { border:1px solid var(--line); border-radius:var(--radius); background:var(--surface); padding:var(--s2); } .spot-map-wrap .map-schematic svg { width:100%; height:auto; display:block; } .map-pin { cursor:pointer; } .map-pin circle { fill:var(--brand); stroke:#fff; stroke-width:2; transition:r .15s ease; } .map-pin.is-city circle { fill:var(--ink); } .map-pin text { fill:var(--ink); font-family:var(--display); font-size:11px; font-weight:700; paint-order:stroke; stroke:#fff; stroke-width:3px; stroke-linejoin:round; } .map-pin:hover circle, .map-pin:focus circle { fill:var(--sea); r:8; } .map-pin:hover text, .map-pin:focus text { fill:var(--sea); text-decoration:underline; } .map-pin:focus { outline:none; } .map-pin:focus-visible circle { stroke:var(--gold); stroke-width:3; } .map-schematic-note { font-size:var(--step--1); color:var(--ink-soft); margin-top:.6rem; } @media (max-width:860px){ .spot-map-wrap { grid-template-columns:1fr; } } /* Testimonials */ .testimonials-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s3); margin-top:var(--s4); } .testimonial-card { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:var(--s4); display:flex; flex-direction:column; gap:.6rem; } .testimonial-card .tc-stars { color:var(--gold-deep); letter-spacing:.12em; margin:0; font-size:1.05rem; } .testimonial-card blockquote { margin:0; padding:0; border:0; font-style:normal; font-size:var(--step-0); line-height:1.5; color:var(--ink); max-width:none; } .testimonial-card .tc-attr { font-family:var(--display); font-size:.84rem; color:var(--ink-soft); font-weight:600; margin:auto 0 0; } .testimonials-disclaimer, .pending-line { font-size:var(--step--1); color:var(--ink-soft); margin-top:var(--s3); } @media (max-width:900px){ .testimonials-grid { grid-template-columns:repeat(2,1fr); } } @media (max-width:560px){ .testimonials-grid { grid-template-columns:1fr; } } /* Where to stay */ .hotel-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s3); margin-top:var(--s4); } .hotel-card { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:var(--s4); display:flex; flex-direction:column; gap:.5rem; } .hotel-card .hc-tier { font-family:var(--display); text-transform:uppercase; letter-spacing:.1em; font-size:.8rem; color:var(--gold-ink); background:var(--gold-soft); align-self:flex-start; padding:.2rem .6rem; border-radius:999px; } .hotel-card h3 { margin:0; font-size:var(--step-0); } .hotel-card .hc-area { color:var(--ink-soft); font-size:.85rem; margin:0; display:flex; align-items:center; gap:.35rem; } .hotel-card .hc-rating { font-size:.85rem; margin:0; } .hotel-card .hc-rating .gold { color:var(--gold-ink); font-weight:700; } .hotel-card p { margin:0; font-size:var(--step--1); } .hotel-card .btn { margin-top:auto; align-self:flex-start; } @media (max-width:860px){ .hotel-grid { grid-template-columns:1fr; } } /* Answered grid */ /* Multi-column, not a 4-track grid. The five groups are wildly uneven (22 links in "Picking A Tour" against 6 in "Rafts And Sea Caves"), so in a grid the fifth group opened a second ROW and left roughly 1400x900px of empty dark band to the right of it. Columns balance the flow instead, and break-inside keeps a group whole. */ .answered-grid { columns:3; column-gap:var(--s4); margin-top:var(--s3); } .answered-group { border-top:3px solid var(--sea); padding-top:var(--s3); break-inside:avoid; -webkit-column-break-inside:avoid; display:inline-block; width:100%; margin-bottom:var(--s4); } .answered-group h3 { font-size:var(--step-0); margin:0 0 .6rem; } .answered-group ul { list-style:none; margin:0; padding:0; display:grid; gap:.5rem; } .answered-group li { display:flex; gap:.45rem; align-items:baseline; font-size:var(--step--1); line-height:1.35; } .answered-group li a { color:var(--ink); text-decoration:underline; text-decoration-color:var(--line); text-underline-offset:.2em; } .answered-group li a:hover { text-decoration-color:currentColor; color:var(--brand-deep); } .answered-group .ag-kind { font-family:var(--display); font-size:.8rem; text-transform:uppercase; letter-spacing:.08em; color:var(--ink-soft); flex:none; } @media (max-width:900px){ .answered-grid { columns:2; } } @media (max-width:520px){ .answered-grid { columns:1; } } /* ---- DECISION PICKER (generic, build/launch-v2/gen-decision-picker.mjs) ---- */ .decision-picker { --dp-key: var(--brand, var(--sea, #146C7A)); --dp-key-ink: var(--brand-ink, #FFFFFF); --dp-line: var(--line, #E3DBAE); --dp-surface: var(--surface, #fff); --dp-surface-2: var(--surface-2, var(--paper-2, #F3EDC9)); --dp-ink: var(--ink, #1C2426); --dp-soft: var(--ink-soft, #41504F); background:var(--dp-surface); border:1px solid var(--dp-line); border-radius:var(--radius, 10px); padding:var(--s4, 1.5rem); box-shadow:var(--shadow, 0 1px 2px rgba(0,0,0,.06)); } .decision-picker .dp-q { border:0; padding:0; margin:0 0 var(--s3, 1rem); min-width:0; } .decision-picker .dp-q legend { font-family:var(--display, inherit); font-weight:800; font-size:var(--step-0, 1rem); color:var(--dp-ink); padding:0 0 .45rem; } .decision-picker .dp-opts { display:flex; flex-wrap:wrap; gap:.5rem; } .decision-picker .dp-opt { font-family:var(--body, inherit); font-size:var(--step--1, .9rem); font-weight:600; color:var(--dp-ink); background:var(--dp-surface); border:1.5px solid var(--dp-line); border-radius:999px; padding:.5rem .9rem; cursor:pointer; line-height:1.25; min-height:40px; transition:border-color .15s ease, background .15s ease, color .15s ease; } .decision-picker .dp-opt:hover { border-color:var(--dp-key); color:var(--dp-key); } .decision-picker .dp-opt.is-on { background:var(--dp-key); border-color:var(--dp-key); color:var(--dp-key-ink); } .decision-picker .dp-opt:focus-visible { outline:3px solid var(--accent, var(--dp-key)); outline-offset:2px; } .decision-picker .dp-controls { margin:0 0 var(--s3, 1rem); } .decision-picker .dp-summary { margin:0 0 var(--s3, 1rem); padding:.6rem .85rem; border-radius:var(--radius-sm, 6px); background:var(--dp-surface-2); color:var(--dp-ink); font-size:var(--step--1, .9rem); font-weight:600; max-width:none; } .decision-picker .dp-results { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s3, 1rem); } .decision-picker .dp-card { display:flex; flex-direction:column; border:1px solid var(--dp-line); border-radius:var(--radius, 10px); overflow:hidden; background:var(--dp-surface-2); } .decision-picker[data-state="picked"] .dp-card { border-color:var(--dp-key); box-shadow:0 0 0 2px rgba(0,0,0,.06); } .decision-picker .dp-card.dp-fold { display:none; } /* [hidden] alone loses to the .dp-card display:flex rule above (author styles beat the UA stylesheet), so a card the script hides stays on screen: pin it, same fix as the exit popup's dismissal trap. */ .decision-picker .dp-card[hidden] { display:none !important; } .decision-picker .dp-media { display:block; aspect-ratio:4/3; background:var(--dp-surface-2); } .decision-picker .dp-media img { width:100%; height:100%; object-fit:cover; display:block; } .decision-picker .dp-body { padding:var(--s3, 1rem); display:flex; flex-direction:column; gap:.4rem; flex:1; } .decision-picker .dp-name { margin:0; font-size:var(--step-0, 1rem); line-height:1.25; } .decision-picker .dp-name a { color:var(--dp-ink); text-decoration:none; } .decision-picker .dp-name a:hover { color:var(--dp-key); text-decoration:underline; } .decision-picker .dp-facts { margin:0; display:flex; flex-wrap:wrap; gap:.3rem; max-width:none; } .decision-picker .dp-facts span { font-size:.72rem; font-weight:600; background:var(--dp-surface); color:var(--dp-soft); border:1px solid var(--dp-line); border-radius:999px; padding:.2rem .55rem; } .decision-picker .dp-price { margin:0; font-size:var(--step--1, .9rem); max-width:none; } .decision-picker .dp-price strong { font-family:var(--display, inherit); font-size:var(--step-0, 1rem); } .decision-picker .dp-rev { color:var(--dp-soft); } .decision-picker .dp-body .btn { margin-top:auto; text-align:center; } @media (max-width:900px){ .decision-picker .dp-results { grid-template-columns:repeat(2,1fr); } } @media (max-width:560px){ .decision-picker { padding:var(--s3, 1rem); } .decision-picker .dp-results { grid-template-columns:1fr; } .decision-picker .dp-card { flex-direction:row; } .decision-picker .dp-media { width:38%; flex:none; aspect-ratio:1/1; } } /* ============================================================ PHOTO COLLAGE + TOUR EXPLORER + DEPARTURE-POINT PICKER Ported from dinnercruisessandiego.org's photo-collage/tour-explorer/pier-picker blocks (2026-09-05), renamed pier -> departure-point for a wine-tour site and re-themed onto this site's own --ink/--paper/--brand/--accent/--sea/--gold/--slate/--footer tokens. All three blocks are vanilla CSS over server-rendered markup: content is real with scripting off, and JS only narrows or reorders what is already there. ============================================================ */ .btn-sm { padding:.5rem .85rem; font-size:var(--step--1); } /* ---- PHOTO COLLAGE (reusable block) ---- */ .photo-collage { display:grid; grid-template-columns:repeat(4,1fr); grid-auto-rows:9rem; gap:.55rem; margin:var(--s4) 0 var(--s4); } .photo-collage .pcol-tile { position:relative; display:block; overflow:hidden; border-radius:var(--radius-sm); background:var(--paper-2); box-shadow:var(--shadow); text-decoration:none; } .photo-collage .pcol-tile img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .35s ease; } .photo-collage .pcol-tile:hover img, .photo-collage .pcol-tile:focus-visible img { transform:scale(1.05); } /* CAPTION LEGIBILITY OVER ANY PHOTO (measured 2026-09-18). The scrim used to be `color-mix(in srgb, var(--ink) 88%, transparent)`. `--ink` is a PAGE theme token and flips to cream #F4F0D8 under prefers-color-scheme: dark, so in dark mode every white caption sat on a CREAM gradient: measured 1.31:1 to 1.65:1 across all eight tiles. In light mode the scrim was the right colour but too weak over bright sky and pale water: 2.71:1 worst pixel. The scrim colour is therefore a literal dark value declared once and never redefined per scheme, from the same family as the white text it carries (rule 41), and the alpha ramp is held high across the whole text band (the glyph rows sit between roughly 13% and 57% of the band height, single or wrapped, on every tile size) before it fades out. Do not re-token this to --ink. */ :root { --scrim-rgb: 8 26 30; } .photo-collage .pcol-cap { position:absolute; inset:auto 0 0 0; padding:1.25rem .6rem .5rem; color:#fff; font-family:var(--display); font-weight:700; font-size:.78rem; line-height:1.2; text-shadow:0 1px 2px rgb(var(--scrim-rgb) / .9), 0 0 8px rgb(var(--scrim-rgb) / .55); background:linear-gradient(to top, rgb(var(--scrim-rgb) / .88) 0%, rgb(var(--scrim-rgb) / .76) 62%, rgb(var(--scrim-rgb) / .32) 84%, rgb(var(--scrim-rgb) / 0) 100%); } .photo-collage .pcol-tile:nth-child(1) { grid-column:span 2; grid-row:span 2; } .photo-collage .pcol-tile:nth-child(1) .pcol-cap { font-size:.95rem; padding-top:1.9rem; } .photo-collage .pcol-tile:nth-child(6) { grid-column:span 2; } @media (max-width:900px){ .photo-collage { grid-template-columns:repeat(3,1fr); grid-auto-rows:7.4rem; } .photo-collage .pcol-tile:nth-child(6) { grid-column:span 1; } } @media (max-width:560px){ .photo-collage { grid-template-columns:repeat(2,1fr); grid-auto-rows:6.2rem; gap:.4rem; } .photo-collage .pcol-tile:nth-child(1) { grid-column:span 2; grid-row:span 2; } .photo-collage .pcol-tile:nth-child(n+7) { display:none; } .photo-collage .pcol-cap { font-size:.7rem; padding:1rem .45rem .4rem; } } /* ---- SHARED CHIP CONTROL (explorer + departure picker) ---- */ .ex-chip, .dep-chip { font-family:var(--body); font-size:var(--step--1); font-weight:600; color:var(--ink); background:var(--surface); border:1.5px solid var(--line); border-radius:999px; padding:.5rem .9rem; cursor:pointer; line-height:1.25; min-height:44px; transition:border-color .15s ease, background .15s ease, color .15s ease; } .ex-chip:hover, .dep-chip:hover { border-color:var(--sea); color:var(--sea-deep); } .ex-chip.is-on, .dep-chip.is-on { background:var(--brand); border-color:var(--brand); color:var(--brand-ink); } .ex-chip:focus-visible, .dep-chip:focus-visible { outline:3px solid var(--accent); outline-offset:2px; } /* ---- TOUR EXPLORER (filter and sort table) ---- */ .tour-explorer { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:var(--s4); box-shadow:var(--shadow); } .tour-explorer .ex-controls { display:flex; flex-direction:column; gap:.7rem; } .tour-explorer .ex-row { display:flex; flex-wrap:wrap; align-items:center; gap:.45rem; } .tour-explorer .ex-lab { font-family:var(--display); font-weight:800; font-size:.74rem; text-transform:uppercase; letter-spacing:.1em; color:var(--ink-soft); margin-right:.3rem; min-width:5.2rem; } .tour-explorer .ex-count { margin:var(--s3) 0 .6rem; font-size:var(--step--1); font-weight:600; color:var(--ink-soft); max-width:none; } .tour-explorer .table-wrap { overflow-x:auto; -webkit-overflow-scrolling:touch; } .tour-explorer .ex-table { width:100%; border-collapse:collapse; font-size:var(--step--1); min-width:44rem; } .tour-explorer .ex-table th, .tour-explorer .ex-table td { padding:.6rem .7rem; text-align:left; vertical-align:top; border-bottom:1px solid var(--line); } .tour-explorer .ex-table thead th { background:var(--paper-2); font-family:var(--display); font-size:.72rem; text-transform:uppercase; letter-spacing:.08em; color:var(--ink-soft); border-bottom:2px solid var(--line); white-space:nowrap; } .tour-explorer .ex-table tbody th { font-weight:700; max-width:16rem; } .tour-explorer .ex-table tbody th a { color:var(--ink); text-decoration:none; } .tour-explorer .ex-table tbody th a:hover { color:var(--brand-deep); text-decoration:underline; } .tour-explorer .ex-table tbody tr:nth-child(even) { background:var(--surface-2); } .tour-explorer .ex-sub { display:block; font-weight:500; font-size:.72rem; color:var(--ink-soft); } .tour-explorer .ex-num { white-space:nowrap; font-family:var(--display); font-weight:700; } .tour-explorer .ex-num .gold { color:var(--gold-ink, var(--gold)); font-weight:700; } .tour-explorer .ex-table .btn { white-space:nowrap; } .tour-explorer #ex-empty td { text-align:center; color:var(--ink-soft); font-style:italic; padding:var(--s4) var(--s3); } @media (max-width:560px){ .tour-explorer { padding:var(--s3); } .tour-explorer .ex-lab { min-width:100%; } } /* ---- DEPARTURE-POINT PICKER (rule-33c) ---- */ .departure-picker { display:grid; grid-template-columns:1.25fr 1fr; gap:var(--s4); align-items:start; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:var(--s4); box-shadow:var(--shadow); } /* The plate is a MAP, not a scatter (04-block-library "Pin-Map Schematic", rule 40): real OSM shoreline under the pins, a north arrow, collision-placed labels and the ODbL credit below. Every colour here comes from the --mp-* / --map-* map token family, which is declared ONCE and is identical in both colour schemes, so the plate can never end up cream ink on a cream ground the way the page-theme tokens did in dark mode (rule 41). */ /* The plate's own ground, NOT --paper. Most labels are parked in the gutters outside the frame, and --paper is a page-theme token that goes to #10262B in dark mode: measured 1.71:1 for the map ink sitting on it. The whole plate is the map's land colour in both schemes, so every label, the caption and the north arrow always sit on the surface their ink was chosen for. */ .departure-picker .dep-map svg { width:100%; height:auto; display:block; max-width:560px; margin-inline:auto; border-radius:var(--radius-sm); border:1px solid var(--line); background:var(--mp-land); } .departure-picker .dep-frame { fill:var(--mp-land); stroke:var(--mp-edge); stroke-width:1.75; } .departure-picker .dep-label { font-family:var(--display); font-size:14px; font-weight:700; fill:var(--mp-ink); pointer-events:none; paint-order:stroke fill; stroke:var(--mp-land); stroke-width:3px; stroke-linejoin:round; transition:opacity .16s ease; } .departure-picker .dep-leader line { stroke:var(--mp-ink); stroke-width:1; opacity:.45; stroke-dasharray:2 2; } .departure-picker .dep-cap { font-family:var(--display); fill:var(--mp-ink); opacity:.72; } .departure-picker .dep-north-line { stroke:var(--mp-ink); stroke-width:1.4; } .departure-picker .dep-north-head { fill:var(--mp-ink); } .departure-picker .dep-north-n { fill:var(--mp-ink); font-family:var(--display); font-size:13px; font-weight:700; } .departure-picker .dep-scale { margin:.45rem 0 0; font-size:var(--step--2,.72rem); color:var(--ink-soft); line-height:1.45; max-width:none; } .departure-picker .dep-pin { cursor:pointer; } .departure-picker .dep-pin circle { fill:var(--map-1); stroke:var(--mp-land); stroke-width:2.2; transition:fill .15s ease, r .15s ease; } .departure-picker .dep-pin text { fill:#fff; font-size:13px; font-weight:800; font-family:var(--display); pointer-events:none; } .departure-picker .dep-pin:hover circle, .departure-picker .dep-pin:focus-visible circle { fill:var(--map-6); } .departure-picker .dep-pin.is-on circle { fill:var(--map-2); r:15; } .departure-picker .dep-pin:focus-visible { outline:3px solid var(--accent); outline-offset:2px; } /* Dim, never hide, and only once a specific harbour is chosen. */ .departure-picker.is-filtered .dep-pin:not(.is-on) circle { opacity:.26; } .departure-picker.is-filtered .dep-pin:not(.is-on) text { opacity:.3; } .departure-picker.is-filtered .dep-label:not(.is-on) { opacity:.28; } @media (prefers-reduced-motion: reduce) { .departure-picker .dep-label, .departure-picker .dep-pin circle { transition:none; } } /* Below 620 the plate is roughly 0.63 CSS px per SVG unit, so a 14-unit label would paint at 8.8 CSS px. The collision solver reserved every box at 19 units, so raising the rendered size to 19 here is free: a box reserved at 19 always contains glyphs drawn at 19 or less. */ @media (max-width:620px){ .departure-picker .dep-label { font-size:19px; stroke-width:3.6px; } .departure-picker .dep-pin text { font-size:15px; } } .departure-picker .dep-chips { display:flex; flex-wrap:wrap; gap:.45rem; margin:var(--s3) 0; } .departure-picker .dep-n { display:inline-block; margin-left:.3rem; font-size:.7rem; font-weight:800; opacity:.75; } .departure-picker .dep-detail { margin:0; padding:.65rem .85rem; border-radius:var(--radius-sm); background:var(--paper-2); font-size:var(--step--1); line-height:1.5; max-width:none; } .departure-picker .dep-list { list-style:none; padding:0; margin:0; display:grid; gap:.5rem; } .departure-picker .dep-item { padding:.5rem .7rem; border:1px solid var(--line); border-radius:var(--radius-sm); background:var(--surface-2); } .departure-picker .dep-item a { font-weight:700; color:var(--ink); text-decoration:none; } .departure-picker .dep-item a:hover { color:var(--brand-deep); text-decoration:underline; } .departure-picker .dep-meta { display:block; font-size:.74rem; color:var(--ink-soft); margin-top:.15rem; } @media (max-width:860px){ .departure-picker { grid-template-columns:1fr; padding:var(--s3); } } /* decision-names: tour-official (rule 36) */ .tour-official{margin:.35rem 0 0;font-size:var(--step-0,1rem);line-height:1.45;color:var(--ink-soft,var(--slate,#4C5A59));font-weight:400} /* Cellar-door picker (third interactive block) and the two-panel departure plot. */ .cellar-doors{margin-top:1.2rem} .cd-chips{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:.9rem} .cd-chip{min-height:44px;padding:.5rem .85rem;border:1px solid var(--line);border-radius:999px; background:var(--surface);color:var(--ink);font:inherit;font-size:var(--step--1);cursor:pointer; display:inline-flex;align-items:center;gap:.4rem} .cd-chip:hover{border-color:var(--brand)} .cd-chip.is-on{background:var(--brand);border-color:var(--brand);color:var(--brand-ink)} .cd-chip .cd-n{opacity:.72;font-variant-numeric:tabular-nums} .cd-status{margin:.2rem 0 1rem;color:var(--slate);font-size:var(--step--1)} .cd-list{list-style:none;padding:0;margin:0;display:grid;gap:.7rem} .cd-item{border:1px solid var(--line);border-radius:12px;background:var(--surface);padding:.85rem 1rem} .cd-name{font-weight:650;text-decoration:underline} .cd-meta{display:block;color:var(--slate);font-size:var(--step--1);margin:.15rem 0 .45rem} .cd-stops{display:flex;flex-wrap:wrap;gap:.35rem} .cd-stop{font-size:var(--step--1);background:var(--paper-2);border-radius:7px;padding:.16rem .5rem} .cd-stop.is-maybe{background:transparent;border:1px dashed var(--line);color:var(--slate)} .cd-stop.is-maybe em{font-style:normal;opacity:.8} .cd-stop.is-none{background:transparent;color:var(--slate);font-style:italic} .dep-plot{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1rem} .dp-panel{margin:0} .dp-panel svg{width:100%;height:auto;border:1px solid var(--line);border-radius:12px} .dp-panel figcaption{font-size:var(--step--1);color:var(--slate);margin-top:.4rem;text-align:center} .dp-pin circle{fill:var(--brand)} .dp-pin text{fill:#fff;font-size:11px;font-weight:700} .dp-pin:hover circle{fill:var(--accent)} .dp-note{font-size:var(--step--1);color:var(--slate);margin-top:.6rem} @media (max-width:560px){.cd-chip{font-size:.9rem}} /* ---- Stop map: styled as a cartographic figure (2026-09-10) --------------------------------- Oleg: "now it looks like a map but the css styling is a bit off, make it visually nice". The core styling error was using the SITE surface (--surface, a pink white) as the land ground. A map's ground is the reference every other colour is judged against: over pink, the sage green went muddy, the water read grey, and plum-tinted roads looked like stains rather than streets. So the map gets its OWN small palette: a warm paper ground, muted natural tones for land and water, neutral warm greys for the street hierarchy, and the brand magenta spent on exactly one thing, the tram line and the pins. That is also the cartographic convention: everything recedes except the subject. Kept deliberately: the six-slot pin series (validated for separation and white numerals), the scroll mask on the visible box, the legend outside the scroller, and the honest furniture. */ :root { /* Pin series: six genuinely separated hues. Closest pair is 44 RGB units apart; the earlier version reused --accent/--gold and --brand-fill/--brand-deep and produced two teals and two plums, so the legend matched its pins exactly and still told the reader nothing. */ /* Comments used to name the WRONG colour on every slot (slot 1 was labelled "magenta" while holding a navy). Names are checked against the values here. Closest pair is 51 RGB units apart and the weakest white numeral measures 5.46:1. */ --map-1: #0D4A55; /* deep Garda teal, the origin and the featured route */ --map-2: #9E4420; /* terracotta */ --map-3: #4C6B2C; /* olive */ --map-4: #6E5A0A; /* lemon-grove ochre */ --map-5: #6A3A6E; /* plum */ --map-6: #2F6E9E; /* lake blue */ /* The map's own ground palette. A lake is not a sea: the water tone is the pale blue-teal Garda actually reads as from the shore, the green is olive-tinted for the terraces, and the ground is a lemon cream one step off --paper so the plate reads as a figure, not as page. */ --mp-land: #FBF7E6; --mp-water: #A8CFD8; --mp-coast: #2F7F8C; --mp-green: #C3D3A4; --mp-grid: #E7E0BE; --mp-edge: #D8CFA2; --mp-road: #C9C2AC; --mp-road-mj: #B0A88E; --mp-trail: #BFA06E; --mp-ink: #3C4A4C; } /* ---- The figure itself ---- */ .stp-map { width:100%; height:auto; display:block; } .stp-frame { fill:var(--mp-land); stroke:var(--mp-edge); stroke-width:1.25; } .stp-grid line { stroke:var(--mp-grid); stroke-width:1; } .stp-leader line { stroke:var(--mp-ink); stroke-width:1; opacity:.45; stroke-dasharray:2 2; } /* ---- Basemap, real OSM geometry. Weight order runs lightest to heaviest so the eye lands on the tram line last and stays there: water, green, trails, lanes, streets, coast, funicular. ---- */ .bm-water path { fill:var(--mp-water); stroke:none; } .bm-green path { fill:var(--mp-green); stroke:none; } .bm-trail path { fill:none; stroke:var(--mp-trail); stroke-width:.85; opacity:.55; stroke-dasharray:3.5 3; stroke-linecap:round; } .bm-lane path { fill:none; stroke:var(--mp-road); stroke-width:.9; opacity:.55; } .bm-road-minor path { fill:none; stroke:var(--mp-road); stroke-width:1.3; opacity:.85; } .bm-road-major path { fill:none; stroke:var(--mp-road-mj); stroke-width:2.2; opacity:.95; stroke-linecap:round; } .bm-coast path { fill:none; stroke:var(--mp-coast); stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; } /* Linear water (rivers, canals). Drawn as a stroked line, not a fill, because a river is a way and not a polygon. Slightly narrower than the shoreline so the lake still reads as the dominant edge, and in the water colour so the eye groups it with the lake rather than with the roads. */ .bm-river path { fill:none; stroke:var(--mp-water); stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; } /* The funicular is the subject. A pale casing under it is the standard way to lift a route line off a busy street network without thickening it. */ .bm-funicular path { fill:none; stroke:var(--map-1); stroke-width:3.2; stroke-linecap:round; stroke-linejoin:round; filter: drop-shadow(0 0 1.6px rgba(255,255,255,.95)); } .bm-fun-join { stroke:var(--map-1); stroke-width:2.4; stroke-dasharray:4 3.5; opacity:.7; stroke-linecap:round; } /* ---- Pins and labels ---- */ .stp-lbl { font-size:12.5px; fill:var(--mp-ink); font-weight:650; letter-spacing:.005em; paint-order:stroke fill; stroke:var(--mp-land); stroke-width:2.2px; stroke-linejoin:round; } /* The origin label took its fill from the PAGE theme's --ink. The pin map deliberately keeps its own light ground in both schemes, so under prefers-color-scheme: dark this label computed to cream rgb(244,240,216) with a cream rgb(251,247,230) halo on the cream map frame: invisible, 1.05:1. A map's background and its text must come from the same family of tokens (rule 41), so the fill is now the map's own ink, which is byte-identical in both schemes. */ .stp-lbl-home { font-size:14.5px; fill:var(--mp-ink); font-weight:800; letter-spacing:-.005em; paint-order:stroke fill; stroke:var(--mp-land); stroke-width:2.8px; stroke-linejoin:round; } .stp-num { font-size:10px; font-weight:700; fill:#fff; paint-order:fill; } .stp-dot { stroke:var(--mp-land); stroke-width:1.75; } /* THE FILTER MUST MOVE THE MAP. The picker JS has always toggled `is-on` on every pin, but no rule ever styled it, so clicking a group narrowed the card list while the plate stayed pixel for pixel identical. Putting the group colour inside the filter chips made that worse: the chips then PROMISED they drive the map. Dim, never hide: the points stay on the plate so the spatial picture is preserved and the block still works with scripting off. */ .stp-pin .stp-dot, .stp-pin .stp-num, .stp-labels text { transition: opacity .16s ease; } .stp-pin:not(.is-on) .stp-dot { opacity:.16; } .stp-pin:not(.is-on) .stp-num { opacity:.2; } .stp-labels text[data-group]:not(.is-on) { opacity:.22; } /* A label the scroller's edge would bisect is HIDDEN, not clipped. Specificity is deliberate: `.stp-map` in front makes this (0,3,1) so it beats the group-dimming rule above at (0,2,1). */ .stp-map .stp-labels text.is-cut { opacity:0; } @media (prefers-reduced-motion: reduce) { .stp-pin .stp-dot, .stp-pin .stp-num, .stp-labels text { transition:none; } } .stp-pin { cursor:pointer; } .stp-pin .stp-dot { transition: r .14s ease, stroke-width .14s ease; } .stp-pin:hover .stp-dot, .stp-pin:focus-visible .stp-dot { stroke:var(--ink); stroke-width:2.5; } .stp-pin:focus-visible { outline:3px solid var(--focus); outline-offset:2px; } @media (prefers-reduced-motion: reduce) { .stp-pin .stp-dot { transition:none; } } .stp-home circle:first-child { fill:var(--mp-land); stroke:var(--map-1); stroke-width:2; } .stp-home-dot { fill:var(--map-1); } .stp-g0 .stp-dot { fill:var(--map-1); } .stp-legend .stp-g0 .stp-key { background:var(--map-1); } .stp-g1 .stp-dot { fill:var(--map-2); } .stp-legend .stp-g1 .stp-key { background:var(--map-2); } .stp-g2 .stp-dot { fill:var(--map-3); } .stp-legend .stp-g2 .stp-key { background:var(--map-3); } .stp-g3 .stp-dot { fill:var(--map-4); } .stp-legend .stp-g3 .stp-key { background:var(--map-4); } .stp-g4 .stp-dot { fill:var(--map-5); } .stp-legend .stp-g4 .stp-key { background:var(--map-5); } .stp-g5 .stp-dot { fill:var(--map-6); } .stp-legend .stp-g5 .stp-key { background:var(--map-6); } /* ---- Container: the map reads as a card, like every other block on the page ---- */ .stp-wrap { position:relative; margin-top:var(--s3); } .ix .ix-map, .ix-map { border-radius:var(--radius); background:var(--mp-land); box-shadow:0 1px 2px color-mix(in srgb, var(--ink) 5%, transparent), 0 8px 24px color-mix(in srgb, var(--ink) 7%, transparent); } /* ---- Legend: chips, not loose dots ---- */ .stp-legend { list-style:none; margin:1.6rem 0 0; padding:0; display:flex; flex-wrap:wrap; gap:.45rem .5rem; align-items:center; position:relative; } .stp-legend li { display:inline-flex; align-items:center; gap:.42rem; font-size:var(--step--2, .72rem); color:var(--ink-soft); font-weight:500; line-height:1.3; } /* The group colour now lives INSIDE the filter chip, so one row both explains and filters. The legend used to repeat the same four words 60px above an identical pill row. */ .stp-chip .stp-key { width:10px; height:10px; border-radius:50%; display:inline-block; flex:0 0 auto; margin-right:.45rem; box-shadow:0 0 0 1.5px rgba(255,255,255,.6) inset; } .stp-chip { display:inline-flex; align-items:center; } .stp-g0 .stp-key { background:var(--map-1); } .stp-g1 .stp-key { background:var(--map-2); } .stp-g2 .stp-key { background:var(--map-3); } .stp-g3 .stp-key { background:var(--map-4); } .stp-g4 .stp-key { background:var(--map-5); } .stp-g5 .stp-key { background:var(--map-6); } /* In-plate furniture: a scale bar that scales with the SVG, unlike a fixed-width HTML bar. */ .stp-bar-line { stroke:var(--mp-ink); stroke-width:1.6; opacity:.75; } .stp-north-head { fill:var(--mp-ink); opacity:.75; } .stp-furn-lbl { font-weight:600; opacity:.85; stroke-width:0; } /* Furniture rows read as notes, not as another category chip. */ .stp-legend li.stp-attrib { /* ODbL REQUIRES this credit to be visible. It previously inherited opacity:.75 on top of an already-muted 11.5px legend, computing to ~3.9:1, under AA for small text. A legally required attribution is the last thing that should be hard to read, so it renders at full opacity in the body ink colour. Do not re-mute it. */ opacity:1; color:var(--ink-soft); font-size:.78rem; } /* Specificity matters: `.stp-legend li { display:inline-flex }` is (0,1,1) and outranked a bare `.stp-swipe { display:none }` at (0,1,0), so the hint rendered on every desktop width and told readers to swipe a map that does not scroll. Both rules are qualified to match. */ .stp-legend li.stp-swipe { display:none; } /* ---- Narrow screens ---- */ @media (max-width: 620px) { /* A mask on the SCROLL BOX, anchored to the visible box. An ::after overlay was wrong: it is a child of the scroller, so it travelled with the content and landed as a bleach column down the middle of the map at the offset the page actually loads in. */ .ix-map { -webkit-mask-image: linear-gradient(to right, transparent 0, #000 22px, #000 calc(100% - 22px), transparent 100%); mask-image: linear-gradient(to right, transparent 0, #000 22px, #000 calc(100% - 22px), transparent 100%); } .stp-lbl { font-size:11.5px; } .stp-legend li.stp-swipe { display:inline-flex; } .stp-legend { gap:.4rem .45rem; } } /* ---- Dark theme: the map keeps its own ground, darkened, so it never becomes a glowing white slab on a dark page and the natural tones stay believable. ---- */ /* ---- Dark theme, core tokens. Declared for BOTH signals: the explicit [data-theme="dark"] choice and the default "system" setting, which stamps nothing on the root and is separated only by prefers-color-scheme. Same identity, inverted deliberately: a deep lake-teal ground, lemon ink, and a lighter terracotta so the one CTA carries dark text at AA. In dark the accent CAN be a ground (6.8:1 against --accent-ink), so --accent-deep is the hover there. ---- */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --focus: #E68A5F; --ink:#F4F0D8; --ink-soft:#C2CFCC; --slate:#A9B8B6; --paper:#10262B; --paper-2:#16333A; --surface:#1B3C44; --surface-2:#143036; --line:#33585F; --brand:#6FC2CE; --brand-deep:#9EDDE6; --brand-ink:#0A2226; --accent:#E68A5F; --accent-deep:#F2A886; --accent-hover:#F8C0A6; --accent-ink:#2A1309; --sea:#7FB6C0; --sea-deep:#A3D0D8; --gold:#E0B25E; --gold-deep:#EFC98A; --gold-light:#EFC98A; --gold-soft:#33280F; --gold-ink:#F2DCAE; --olive:#9CC271; --footer:#081C21; --ok:#9CC271; --warn:#E68A5F; --inverse:#081C21; --inverse-ink:#F4F0D8; --footer-ink:#CFDFDE; --footer-link:#E8F2EC; --footer-mute:#A2B9B9; --footer-line:#143B43; } } :root[data-theme="dark"] { --focus: #E68A5F; --ink:#F4F0D8; --ink-soft:#C2CFCC; --slate:#A9B8B6; --paper:#10262B; --paper-2:#16333A; --surface:#1B3C44; --surface-2:#143036; --line:#33585F; --brand:#6FC2CE; --brand-deep:#9EDDE6; --brand-ink:#0A2226; --accent:#E68A5F; --accent-deep:#F2A886; --accent-hover:#F8C0A6; --accent-ink:#2A1309; --sea:#7FB6C0; --sea-deep:#A3D0D8; --gold:#E0B25E; --gold-deep:#EFC98A; --gold-light:#EFC98A; --gold-soft:#33280F; --gold-ink:#F2DCAE; --olive:#9CC271; --footer:#081C21; --ok:#9CC271; --warn:#E68A5F; --inverse:#081C21; --inverse-ink:#F4F0D8; --footer-ink:#CFDFDE; --footer-link:#E8F2EC; --footer-mute:#A2B9B9; --footer-line:#143B43; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --mp-land: #FBF7E6; --mp-water: #A8CFD8; --mp-coast: #2F7F8C; --mp-green: #C3D3A4; --mp-grid: #E7E0BE; --mp-edge: #D8CFA2; --mp-road: #C9C2AC; --mp-road-mj: #B0A88E; --mp-trail: #BFA06E; --mp-ink: #3C4A4C; } } :root[data-theme="dark"] { --mp-land: #FBF7E6; --mp-water: #A8CFD8; --mp-coast: #2F7F8C; --mp-green: #C3D3A4; --mp-grid: #E7E0BE; --mp-edge: #D8CFA2; --mp-road: #C9C2AC; --mp-road-mj: #B0A88E; --mp-trail: #BFA06E; --mp-ink: #3C4A4C; } /* The four pale-pink .stp-* dark overrides that used to sit here painted the home pin and its label a pale pink for a dark map ground that never arrives: the dark --mp-* block above is a byte-for-byte copy of the light one, so the pin map keeps its own light ground in dark mode BY DESIGN and the pink label rendered near-invisible on white. The light rules apply in both themes now, which is what the light map ground actually needs. */ /* --- el yunque: chip sizing + filter status (rule 46) --- */ .stp-filter { display:flex; flex-wrap:wrap; align-items:center; gap:.5rem; margin:.75rem 0 .35rem; } .stp-filter-lbl { font-weight:700; font-size:var(--step--1); color:var(--slate); } .stp-chips { display:flex; flex-wrap:wrap; gap:.4rem; } .stp-chip { min-height:44px; padding:.45rem .85rem; border:1px solid var(--line); border-radius:999px; background:var(--paper); color:var(--ink); font:inherit; font-size:var(--step--1); cursor:pointer; } .stp-chip:hover { border-color:var(--slate); } .stp-chip:focus-visible { outline:3px solid var(--accent); outline-offset:2px; } .stp-chip[aria-pressed="false"] { opacity:.5; } .stp-status { margin:.15rem 0 0; font-size:var(--step--1); color:var(--slate); flex-basis:100%; } /* (0,1,1) to beat the installer's own li rule; an unqualified .stp-swipe{display:none} lost the cascade on an earlier site and told desktop readers to swipe a map that cannot scroll. */ @media (min-width: 761px) { ul.stp-legend li.stp-swipe { display:none !important; } } /* ---- SIGHT CARDS + COUNT-AWARE GRID ----------------------------------------------------- RESTORED 2026-09-17. These classes were being EMITTED by compile.mjs and had no CSS rule at all, so the whole "Where Lake Garda Boat Tours Leave From" block rendered as unstyled browser-default list items: 11 .sight-card, 3 .sight-cards, 3 .sc-group, 6 .sc-note. Nothing caught it, because every gate reads source or dist TEXT and none asks whether a class resolves to a rule (same blind spot as the undefined :root tokens found on the donor). Ported from the donor, which is entirely token-based, so no donor colour comes with it. */ .sights { display:grid; gap:var(--s5); margin-top:var(--s4); } .sight-group { border-top:2px solid var(--line); padding-top:var(--s3); } .sight-group .sc-group { display:flex; align-items:center; gap:.55rem; margin:0 0 var(--s3); font-size:var(--step-0); letter-spacing:.01em; text-transform:uppercase; color:var(--slate); } .sight-group .sc-key { width:.85rem; height:.85rem; border-radius:3px; flex:0 0 auto; background:var(--map-1); box-shadow:0 0 0 1.5px rgba(255,255,255,.55) inset; } .sight-group[data-g="0"] .sc-key { background:var(--map-1); } .sight-group[data-g="1"] .sc-key { background:var(--map-2); } .sight-group[data-g="2"] .sc-key { background:var(--map-3); } .sight-group[data-g="3"] .sc-key { background:var(--map-4); } .sight-group[data-g="4"] .sc-key { background:var(--map-5); } .sight-group[data-g="5"] .sc-key { background:var(--map-6); } .sight-group[data-g="0"] { border-top-color:var(--map-1); } .sight-group[data-g="1"] { border-top-color:var(--map-2); } .sight-group[data-g="2"] { border-top-color:var(--map-3); } .sight-group[data-g="3"] { border-top-color:var(--map-4); } .sight-group[data-g="4"] { border-top-color:var(--map-5); } .sight-group[data-g="5"] { border-top-color:var(--map-6); } /* The track is CAPPED, not 1fr: with auto-fit a one-card group stretched to the full column and a two-card group to half each, so the same block rendered three different card sizes down the page. A max track keeps every card the same size whatever its group holds. */ ul.sight-cards { list-style:none; margin:0; padding:0; display:grid; gap:var(--s3); grid-template-columns:repeat(auto-fit, minmax(220px, 268px)); justify-content:start; } @media (max-width: 520px) { ul.sight-cards { grid-template-columns:1fr; } } li.sight-card { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:var(--s3) var(--s3) calc(var(--s3) + .15rem); display:flex; flex-direction:column; gap:.35rem; transition:border-color .16s ease, transform .16s ease; } li.sight-card:hover { border-color:var(--sea); transform:translateY(-2px); } li.sight-card h3 { margin:0; font-size:var(--step-0); line-height:1.25; letter-spacing:-.01em; } .sight-card .sc-count { margin:0; font-size:var(--step--1); color:var(--slate); } .sight-card .sc-tour { margin-top:auto; font-size:var(--step--1); font-weight:700; text-decoration:none; color:var(--brand); display:inline-flex; align-items:center; gap:.3rem; } .sight-card .sc-tour::after { content:"\2192"; transition:transform .16s ease; } .sight-card .sc-tour:hover { text-decoration:underline; } .sight-card .sc-tour:hover::after { transform:translateX(2px); } .sight-card .sc-none { margin-top:auto; font-size:var(--step--1); color:var(--ink-soft); font-style:italic; } /* .sc-note carries a landmark's VERIFIED geocoded note where no listing names that stop. It replaced the donor's dead "No tour on this site lists this stop" line, and I added the markup without ever adding its style. Clamped so one long note cannot unbalance the row. */ .sight-card .sc-note { margin:.1rem 0 0; font-size:var(--step--1); color:var(--ink-soft); line-height:1.4; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:4; overflow:hidden; } @media (prefers-reduced-motion: reduce) { li.sight-card, .sight-card .sc-tour::after { transition:none; } li.sight-card:hover { transform:none; } } /* Rule 30's COUNT-AWARE grid. Both classes were emitted and unstyled, so a category with two listings kept three tracks and left a dead column. */ .cards-3.cards-n2 { grid-template-columns:repeat(2,1fr); } .cards-3.cards-n1 { grid-template-columns:minmax(0,420px); } @media (max-width: 760px) { .cards-3, .cards-3.cards-n2 { grid-template-columns:1fr; } } /* === BEGIN rule37 section bands (build/launch-v2/apply-section-bands.mjs) === */ /* rule37:bands {"band-paper":{"key":"paper","bg":"#fbf8e1","fg":"#1c2426","link":"#146c7a"},"band-tint":{"key":"tint","bg":"#f3edc9","fg":"#1c2426","link":"#146c7a"},"band-wash":{"key":"wash","bg":"#ebefdb","fg":"#1c2426","link":"#146c7a"},"band-edge":{"key":"edge","bg":"#fffdf0","fg":"#1c2426","link":"#146c7a"},"band-inverse":{"key":"inverse","bg":"#0f3b44","fg":"#fbf8e1","link":"#8fd8e4"}} */ /* HAND-CORRECTED after apply-section-bands.mjs derived the block from :root (2026-09-18): (1) the inverse ground is the APPROVED #0f3b44, not --footer #0b2c33, which is reserved for the footer so the page still has one surface deeper than its darkest band; (2) every --band-cta-bg is --accent-deep #9e4420, because the approved terracotta #c4582a measures 4.40:1 against white and the derivation had shipped it at 4.40 on all five bands; (3) the inverse band keeps a real identity instead of flattening brand/sea/gold to one cream: a light Garda teal for links and rules, a lightened terracotta CTA carrying dark ink. Keep the marker above in sync with the rules below: section-variety-audit.mjs reads it first and only falls back to parsing --band-bg. */ /* Rule 37: adjacent sections never share a ground. The colour lives on the OUTER full-width
; .wrap moved to an inner div that only constrains width. Never reintroduce a box-shadow 0 0 0 100vmax full-bleed here: an outer box-shadow paints only outside the border box, so none of it lands behind the content. */ main>section.section:not([class*="band-"]),.section[class*="band-"]{background:var(--band-bg);color:var(--band-fg);position:relative;isolation:isolate;overflow-x:clip} .section[class*="band-"]>.wrap{position:relative;z-index:1} /* a banded section needs air on both sides, so the usual collapsed top padding is restored */ .section[class*="band-"]+.section[class*="band-"]{padding-top:var(--s6,4rem)} main>section.section:not([class*="band-"]) a:not(.btn):not(.nav-link),.section[class*="band-"] a:not(.btn):not(.nav-link){color:var(--band-link)} main>section.section:not([class*="band-"]) a:not(.btn):not(.nav-link):hover,.section[class*="band-"] a:not(.btn):not(.nav-link):hover{color:var(--band-link-hover)} main>section.section:not([class*="band-"]) :where(h1,h2,h3,h4,h5,h6),.section[class*="band-"] :where(h1,h2,h3,h4,h5,h6){color:var(--band-fg)} .band-edge{border-top:1px solid var(--band-line);border-bottom:1px solid var(--band-line)} .band-inverse :where(hr,table,th,td){border-color:var(--band-line)} .band-inverse :where(.card,.rcard,.tcard,.stat-tile,.quick-answer-box,details,.tp-card){background:var(--band-surface);border-color:var(--band-line)} /* the 5 treatments, driven only by this site's own palette tokens */ .band-paper,main>section.section:not([class*="band-"]):nth-of-type(5n+1){--band-bg:#fbf8e1;--band-fg:#1c2426;--band-muted:#41504f;--band-line:#e3dbae;--band-link:#146c7a;--band-link-hover:#0d4a55;--band-surface:#fffdf0;--band-rule:#2f8b99;--band-cta-bg:#9e4420;--band-cta-fg:#ffffff} .band-tint,main>section.section:not([class*="band-"]):nth-of-type(5n+2){--band-bg:#f3edc9;--band-fg:#1c2426;--band-muted:#41504f;--band-line:#e3dbae;--band-link:#146c7a;--band-link-hover:#0d4a55;--band-surface:#fffdf0;--band-rule:#2f8b99;--band-cta-bg:#9e4420;--band-cta-fg:#ffffff;--band-line:#e0d6a2} .band-wash,main>section.section:not([class*="band-"]):nth-of-type(5n+3){--band-bg:#ebefdb;--band-fg:#1c2426;--band-muted:#41504f;--band-line:#e3dbae;--band-link:#146c7a;--band-link-hover:#0d4a55;--band-surface:#fffdf0;--band-rule:#2f8b99;--band-cta-bg:#9e4420;--band-cta-fg:#ffffff;--band-line:#d6dcc2;--surface:#fffdf0} .band-edge,main>section.section:not([class*="band-"]):nth-of-type(5n+4){--band-bg:#fffdf0;--band-fg:#1c2426;--band-muted:#41504f;--band-line:#e3dbae;--band-link:#146c7a;--band-link-hover:#0d4a55;--band-surface:#fffdf0;--band-rule:#2f8b99;--band-cta-bg:#9e4420;--band-cta-fg:#ffffff;--band-surface:#fbf8e1;--band-line:#cfc48e;--paper:#fffdf0;--surface:#fbf8e1;--surface-2:#fdfbe9} .band-inverse,main>section.section:not([class*="band-"]):nth-of-type(5n+5){--band-bg:#0f3b44;--band-fg:#fbf8e1;--band-muted:#c6d5ce;--band-line:#2b5b63;--band-link:#8fd8e4;--band-link-hover:#bdeaf1;--band-surface:#16505b;--band-rule:#8fd8e4;--band-cta-bg:#e08a5e;--band-cta-fg:#2a1309;--ink:#fbf8e1;--ink-soft:#c6d5ce;--slate:#c6d5ce;--paper:#0f3b44;--paper-2:#16505b;--surface:#16505b;--surface-2:#123f48;--line:#2b5b63;--brand:#8fd8e4;--brand-deep:#bdeaf1;--brand-ink:#0f3b44;--sea:#8fd8e4;--sea-deep:#bdeaf1;--accent:#e08a5e;--accent-deep:#e9a487;--accent-hover:#f2bda6;--accent-ink:#2a1309;--gold:#e8ce8e;--gold-deep:#e8ce8e;--gold-light:#e8ce8e;--gold-soft:#16505b;--gold-ink:#fbf8e1;--shadow:none} /* ---- Rule 37 on the CATEGORY HUBS. --------------------------------------------------------- Measured at 1440: /shared-tour/ rendered five sections that all resolved to the same transparent ground, so four adjacent pairs shared a treatment. The homepage is banded because apply-section-bands.mjs split its markup; the hubs are emitted from build/compile.mjs, which that script deliberately leaves alone, and which is owned by another agent this session. So the rhythm is done in CSS only, on the markup as it already ships. Two mechanics worth keeping: 1. The hub sections use the COMBINED
form, where .wrap constrains the element itself, so a background on it paints the content column and not the band. The fix is NOT a 100vw pseudo-element: with a visible scrollbar 100vw exceeds the layout width and invents horizontal overflow. Instead the section goes full width and the gutter becomes padding measured as a PERCENTAGE OF ITS OWN PARENT, which is
and is already exactly the layout width. Same centred 72rem column, real full-width band, and document scrollWidth stays equal to clientWidth. 2. `.section + .section { padding-top: 0 }` collapses the gap between stacked sections, which is right for unbanded ones and wrong the moment they carry colour, so it is restored here the same way the .band-* pair rule restores it on the homepage. ---- */ main>section.section:not([class*="band-"]){ /* --band-col is the content column this section would have had on its own: .wrap is --maxw, .wrap-narrow is 50rem. Keeping it as a variable is what lets one full-bleed rule serve both without a second copy of the padding maths. */ --band-col:var(--maxw); width:100%; max-width:none; margin-inline:0; padding-inline:max(1rem, calc((100% - var(--band-col)) / 2)); position:relative; isolation:isolate; overflow-x:clip; } main>section.section:not([class*="band-"]).wrap-narrow,main>section.section:not([class*="band-"]).wrap-narrow.prose{--band-col:50rem} /* Two sections only, so a two-step rhythm is the whole rule: they must simply differ. */ main>section.section:not([class*="band-"])+section.section{padding-top:var(--s6)} main>section.section:not([class*="band-"]):nth-of-type(5n+4){border-top:1px solid var(--band-line);border-bottom:1px solid var(--band-line)} main>section.section:not([class*="band-"]) :where(.card,.rcard,.tcard,.stat-tile,.quick-answer-box,details,.tp-card,table){background:var(--band-surface);border-color:var(--band-line)} main>section.section:not([class*="band-"]) :where(hr,th,td){border-color:var(--band-line)} main>section.section:not([class*="band-"]) .matrix-table thead th{background:color-mix(in srgb, var(--band-bg) 70%, var(--band-surface))} /* A hub table is emitted without compile.mjs's .table-scroll wrapper, so it gets its own scroller here rather than clipping at the band edge. Above 768px only: below that the .matrix-table rules already restack it as cards and a scroller would fight them. */ @media (min-width:769px){ main>section.section:not([class*="band-"])>table{display:block;overflow-x:auto;max-width:100%;-webkit-overflow-scrolling:touch} } /* selectors that used to match the combined .section.wrap element, re-pointed at the split form */ .section > .wrap > h2:first-child{padding-bottom: var(--s2); border-bottom: 2px solid var(--sea); border-image: repeating-linear-gradient(90deg, var(--ink) 0 14px, var(--accent) 14px 18px, var(--ink) 18px 32px) 1;} :not(.section) + .section > .wrap > h2:first-child{margin-top: 0;} .section > .wrap > p{max-width: none;} /* ---- motion layer. Both effects are decoration only: nothing here can leave real content hidden if the animation never runs (memory: a broad opacity:0 scroll reveal stays invisible forever for any renderer that does not scroll). ---- */ @keyframes r37-drift{from{transform:translate3d(-4%,0,0) scale(1.02);opacity:.5}to{transform:translate3d(4%,0,0) scale(1.09);opacity:.95}} .band-wash::before{content:"";position:absolute;inset:-12% -8%;z-index:0;pointer-events:none;border-radius:inherit;background:radial-gradient(38% 60% at 22% 28%,color-mix(in srgb, var(--sea) 16%, transparent) 0%,transparent 70%),radial-gradient(34% 56% at 78% 74%,color-mix(in srgb, var(--brand) 12%, transparent) 0%,transparent 72%);animation:r37-drift 22s ease-in-out infinite alternate;will-change:transform,opacity} @keyframes r37-pulse{0%{transform:scale(.55);opacity:.8}70%{transform:scale(2);opacity:0}100%{transform:scale(2);opacity:0}} .map-pin,.spot-pin,.pin,[data-pulse]{position:relative} .map-pin::after,.spot-pin::after,.pin::after,[data-pulse]::after{content:"";position:absolute;left:50%;top:50%;width:18px;height:18px;margin:-9px 0 0 -9px;border-radius:50%;border:2px solid color-mix(in srgb, var(--sea) 85%, transparent);pointer-events:none;animation:r37-pulse 2.6s ease-out infinite} [data-countup],.st-num,.stat-num,.kpi-num{font-variant-numeric:tabular-nums} /* ---- Staggered card reveal, the page's one FOREGROUND animation (rule 37). ----------------- Pure CSS: a scroll-driven `animation-timeline: view()`, no library, no IntersectionObserver, no JS at all. Three deliberate safety choices, because a reveal is the classic way to ship permanently invisible content: 1. it lives inside @supports (animation-timeline: view()), so a browser without scroll-driven animations never receives the start state at all and paints the cards normally. Only a browser that can definitely finish the animation is allowed to start it. 2. the start state is opacity .3, never 0, and the translate is 14px. Even mid-animation, or if a timeline stalls, the card is readable and occupies its final box, so nothing moves layout and nothing is gated behind motion. 3. under prefers-reduced-motion: reduce the animation is switched off BY NAME below and the END state is shown. The stagger comes from animation-range: each column starts a little further into its own entry, so a row of three resolves left to right rather than as one block. ---- */ /* TRANSFORM ONLY. The first version faded from opacity .3, and a rendered check found cards sitting at .3 with the scroll timeline inactive, which is the "permanently dimmed content" failure the reduced-motion guard is there to prevent. Animating only the offset makes that impossible by construction: the worst case is a 16px shift, never unreadable text. */ @keyframes r37-rise{from{transform:translateY(16px)}to{transform:none}} @media (prefers-reduced-motion: no-preference){ @supports (animation-timeline: view()){ .cards-3>*,.rcard,.tp-card,.stat-tile,.cat-card,.tcard{ animation:r37-rise linear both;animation-timeline:view();animation-range:entry 4% entry 46%} .cards-3>*:nth-child(3n+2),.tp-card:nth-child(3n+2),.stat-tile:nth-child(3n+2),.cat-card:nth-child(3n+2){animation-range:entry 10% entry 52%} .cards-3>*:nth-child(3n+3),.tp-card:nth-child(3n+3),.stat-tile:nth-child(3n+3),.cat-card:nth-child(3n+3){animation-range:entry 16% entry 58%} } } /* reduced motion: animation off, END STATE shown, nothing hidden */ @media (prefers-reduced-motion: reduce){ .cards-3>*,.rcard,.tp-card,.stat-tile,.cat-card,.tcard{animation:none;transform:none} .band-wash::before{animation:none;transform:none;opacity:.75} .map-pin::after,.spot-pin::after,.pin::after,[data-pulse]::after{animation:none;transform:translate(0,0) scale(1);opacity:.5} [data-countup],.st-num,.stat-num,.kpi-num{transition:none} } /* === END rule37 section bands === */ /* ---- BANDS, DARK THEME. Deliberately OUTSIDE the rule37 BEGIN/END markers. ---------------- The donor carried an equivalent block INSIDE them and re-running build/launch-v2/apply-section-bands.mjs --apply DELETED it: that script replaces everything between its own markers. The five .band-* rules it writes hold LIGHT hexes, so under prefers-color-scheme: dark every banded section kept a lemon ground beneath dark-theme ink. A full-page rendered sweep measured 337 elements at 1.07:1 on the homepage. Anything a band regeneration must not eat belongs on this side of the marker. THREE TRAPS, all three hit on the way here: 1. `--band-bg: var(--paper)` is WRONG for the edge band, because the LIGHT .band-edge rule sets `--paper:#fffdf0` ON THE SAME ELEMENT and var() resolves against the element. The "dark" ground came back light while --ink stayed light. Every ground below is therefore derived only from tokens the matching light rule does not redefine. 2. `--band-bg: var(--paper)` together with `--paper: var(--band-bg)` is a custom-property CYCLE and invalidates both, so --paper is re-pointed only where the ground comes from --footer. 3. These rules put several selectors on ONE LINE, and a line-oriented regex edit later deleted the whole paper and tint rules while matching a selector at the end of them. Exactly the failure the :root memory records. assert-palette.mjs now asserts that all five bands have a dark override in BOTH blocks, so a repeat is a refused write. ---- */ @media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .band-paper,:root:not([data-theme="light"]) main>section.section:not([class*="band-"]):nth-of-type(5n+1){--band-bg:var(--paper);--band-surface:var(--surface-2);--band-fg:var(--ink);--band-muted:var(--ink-soft);--band-line:var(--line);--band-link:var(--brand);--band-link-hover:var(--brand-deep);--band-rule:var(--sea);--band-cta-bg:var(--accent);--band-cta-fg:var(--accent-ink);--slate:var(--ink-soft)} :root:not([data-theme="light"]) .band-tint,:root:not([data-theme="light"]) main>section.section:not([class*="band-"]):nth-of-type(5n+2){--band-bg:color-mix(in srgb, var(--paper) 82%, var(--sea));--band-surface:var(--surface);--band-fg:var(--ink);--band-muted:var(--ink-soft);--band-line:var(--line);--band-link:var(--brand);--band-link-hover:var(--brand-deep);--band-rule:var(--sea);--band-cta-bg:var(--accent);--band-cta-fg:var(--accent-ink);--slate:var(--ink-soft)} :root:not([data-theme="light"]) .band-wash,:root:not([data-theme="light"]) main>section.section:not([class*="band-"]):nth-of-type(5n+3){--band-bg:color-mix(in srgb, var(--paper) 90%, var(--sea));--band-surface:var(--paper-2);--surface:var(--paper-2);--band-fg:var(--ink);--band-muted:var(--ink-soft);--band-line:var(--line);--band-link:var(--brand);--band-link-hover:var(--brand-deep);--band-rule:var(--sea);--band-cta-bg:var(--accent);--band-cta-fg:var(--accent-ink);--slate:var(--ink-soft)} :root:not([data-theme="light"]) .band-edge,:root:not([data-theme="light"]) main>section.section:not([class*="band-"]):nth-of-type(5n+4){--band-bg:color-mix(in srgb, var(--footer) 78%, var(--sea));--band-surface:var(--footer);--paper:var(--band-bg);--surface:var(--footer);--surface-2:var(--band-bg);--band-fg:var(--ink);--band-muted:var(--ink-soft);--band-line:var(--line);--band-link:var(--brand);--band-link-hover:var(--brand-deep);--band-rule:var(--sea);--band-cta-bg:var(--accent);--band-cta-fg:var(--accent-ink);--slate:var(--ink-soft)} :root:not([data-theme="light"]) .band-inverse,:root:not([data-theme="light"]) main>section.section:not([class*="band-"]):nth-of-type(5n+5){--band-bg:var(--footer);--band-surface:color-mix(in srgb, var(--footer) 76%, var(--sea));--band-fg:var(--ink);--band-muted:var(--ink-soft);--band-line:var(--line);--band-link:var(--brand);--band-link-hover:var(--brand-deep);--band-rule:var(--sea);--band-cta-bg:var(--accent);--band-cta-fg:var(--accent-ink);--slate:var(--ink-soft)} } :root[data-theme="dark"] .band-paper,:root[data-theme="dark"] main>section.section:not([class*="band-"]):nth-of-type(5n+1){--band-bg:var(--paper);--band-surface:var(--surface-2);--band-fg:var(--ink);--band-muted:var(--ink-soft);--band-line:var(--line);--band-link:var(--brand);--band-link-hover:var(--brand-deep);--band-rule:var(--sea);--band-cta-bg:var(--accent);--band-cta-fg:var(--accent-ink);--slate:var(--ink-soft)} :root[data-theme="dark"] .band-tint,:root[data-theme="dark"] main>section.section:not([class*="band-"]):nth-of-type(5n+2){--band-bg:color-mix(in srgb, var(--paper) 82%, var(--sea));--band-surface:var(--surface);--band-fg:var(--ink);--band-muted:var(--ink-soft);--band-line:var(--line);--band-link:var(--brand);--band-link-hover:var(--brand-deep);--band-rule:var(--sea);--band-cta-bg:var(--accent);--band-cta-fg:var(--accent-ink);--slate:var(--ink-soft)} :root[data-theme="dark"] .band-wash,:root[data-theme="dark"] main>section.section:not([class*="band-"]):nth-of-type(5n+3){--band-bg:color-mix(in srgb, var(--paper) 90%, var(--sea));--band-surface:var(--paper-2);--surface:var(--paper-2);--band-fg:var(--ink);--band-muted:var(--ink-soft);--band-line:var(--line);--band-link:var(--brand);--band-link-hover:var(--brand-deep);--band-rule:var(--sea);--band-cta-bg:var(--accent);--band-cta-fg:var(--accent-ink);--slate:var(--ink-soft)} :root[data-theme="dark"] .band-edge,:root[data-theme="dark"] main>section.section:not([class*="band-"]):nth-of-type(5n+4){--band-bg:color-mix(in srgb, var(--footer) 78%, var(--sea));--band-surface:var(--footer);--paper:var(--band-bg);--surface:var(--footer);--surface-2:var(--band-bg);--band-fg:var(--ink);--band-muted:var(--ink-soft);--band-line:var(--line);--band-link:var(--brand);--band-link-hover:var(--brand-deep);--band-rule:var(--sea);--band-cta-bg:var(--accent);--band-cta-fg:var(--accent-ink);--slate:var(--ink-soft)} :root[data-theme="dark"] .band-inverse,:root[data-theme="dark"] main>section.section:not([class*="band-"]):nth-of-type(5n+5){--band-bg:var(--footer);--band-surface:color-mix(in srgb, var(--footer) 76%, var(--sea));--band-fg:var(--ink);--band-muted:var(--ink-soft);--band-line:var(--line);--band-link:var(--brand);--band-link-hover:var(--brand-deep);--band-rule:var(--sea);--band-cta-bg:var(--accent);--band-cta-fg:var(--accent-ink);--slate:var(--ink-soft)}