/* ============================================================ triestetravelguide.com - Phase 3 Design System IDENTITY: "Karst Limestone and Adriatic" Karst limestone and Habsburg stucco, deep Adriatic, terracotta and ochre. Measured clear of 251 sibling stylesheets (research/palette-proposal.md). Support tokens are DERIVED from the nine approved cores by build/lib/palette-apply.mjs, which measures every contrast pair and refuses to write when one misses its floor. ============================================================ */ /* ---- COLOR TOKENS (light, purposeful) ---- */ :root { /* ---- Palette "Karst Limestone and Deep Adriatic" (site.config.md; approved by Oleg at the Phase C gate, 2026-09-17; record research/palette-proposal.md). Measured against 251 sibling stylesheets with all six contrast pairs passing, so the BRAND colour is the differentiator: with this many light grounds in the portfolio no light ground can be unique on its own. NO LIVE SIBLING SHARES THIS DESTINATION, so there is no same-city palette to be confused with. Every pair below is recomputed by build/check-contrast.mjs and FAILS THE BUILD; the ratios in this comment are the approved record, not the gate: body text 12.72:1, links 7.68:1, white on the CTA 6.59:1. NOTE ON THE SWAP ITSELF. Replacing the donor palette touched THREE layers, and only the first is obvious: the :root tokens, the .band-* section-band definitions further down, and 11 rgb TRIPLETS inside rgba() calls. Three of those triplets were not the donor's colours at all but ANCESTOR palettes that had survived every clone in this lineage untouched, because an rgb triplet is invisible to any search for a colour name or a hex code: a teal #24735B, a gold #A8571F and a cream #FAF4F1, plus a pink #F7E0F7 still painting the dark-mode map pins. Grep rgba( as well as # before believing a palette swap is finished. ---- */ --ink: #182126; /* APPROVED - primary text: graphite blue-black */ --ink-soft: #4D5962; /* derived: secondary text */ --paper: #F1E0D3; /* APPROVED - page ground: Karst limestone and Habsburg stucco */ --paper-2: #ECCFB9; /* derived: raised panels (info blocks, table headers) */ --surface: #FFFFFF; /* cards */ --surface-2: #F4EDE7; /* derived: inputs, one step off --paper */ --line: #EACDB7; /* derived: hairline borders on light */ --brand: #0A4A56; /* APPROVED - deep Adriatic: links, structural text (9.3:1, AAA) */ --brand-bright:#376B79; /* lifted Adriatic for FILLS ON LIGHT, never text (3.46:1) */ --signature: #7FB3BF; /* APPROVED - shallow-water Adriatic, DARK BANDS ONLY (1.71:1 on --paper, so it is never text on light; 8.27:1 on the dark band). */ --brand-deep: #062E36; /* nav/footer fills, deep bands */ --accent: #964618; /* APPROVED - terracotta-ochre, CTA ONLY (white text, 5.76:1, AA) */ --accent-warm:#B05C22; /* derived: warm wash and hover only, never text on light (3.1:1) */ --accent-deep:#773813; /* CTA hover */ --accent-ink: #FFFFFF; /* text colour that sits on --accent */ --gold: #7A5A12; /* real ratings only (5.4:1 on --paper, AA) */ --gold-soft: #D5BF8D; /* derived: amber wash for badge backgrounds (DARK text on top) */ --gold-ink: #060501; /* CANONICAL ALIASES required by build/lib/palette-apply.mjs. The tool derives a fixed token set (sea, sea-deep, slate, footer, gold-light, gold-deep) and then refuses to write unless every one is declared in :root. This stylesheet's lineage named the same roles --signature, --brand-bright, --ink-soft, --brand-deep, --gold-soft and --gold-ink, so all six read as MISSING and the tool reported "a token was destroyed" for tokens that had never existed under those names. Declaring them satisfies the contract honestly instead of silencing it, and each is seeded with the value of the sibling token it aliases so the donor-value map stays sound. */ --sea: #7FB3BF; --focus: #0A4A56; /* referenced by the focus ring and never declared until now */ /* alias of --signature */ --sea-deep: #376B79; /* alias of --brand-bright */ --slate: #4A5560; /* alias of --ink-soft */ --footer: #06313A; /* alias of --brand-deep */ --gold-light: #C5962D; /* alias of --gold-soft */ --gold-deep: #211805; /* alias of --gold-ink */ /* derived: text colour that sits on --gold-soft */ /* map base, derived: the schematic on /map/ paints real OSM geometry. Trieste's map problem is a narrow shelf of city pinned between the Gulf of Trieste and the Carso limestone plateau that rises straight behind it, with the Slovenian border a few kilometres inland and the day-trip range crossing it. So the water is deep Adriatic, the land is warm limestone and stucco, and the city tier and the day-trip tier cannot share one scale, which is why places.json carries two of them. */ --map-sea: #A8CED4; /* derived: the Gulf of Trieste, 1.51:1 against --map-land so the shore reads */ --map-land: #EEEBE6; /* derived: the pale stone and grid of the city */ --map-shore: #016A7E; /* derived: --brand, for the shoreline and the Rive */ --ok: #016A7E; /* derived: same hue as --brand */ --warn: #953905; /* derived: same hue as --accent-deep */ /* ---- TYPE - assertive sans display + neutral sans body. System stacks, no webfont (protects LCP); contrast comes from weight and scale, an editorial feel. ---- */ --display: "Helvetica Neue", "Segoe UI", system-ui, Arial, sans-serif; --body: ui-sans-serif, system-ui, -apple-system, "Segoe UI", "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-square: reads kitchen-clean, not scenic-rustic */ --radius: 8px; --radius-sm: 5px; --shadow: 0 1px 2px rgba(24,33,38,.05), 0 10px 28px rgba(24,33,38,.09); } /* ---- 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 { font-family: var(--display); line-height: 1.05; letter-spacing: -.025em; font-weight: 800; margin: 0 0 var(--s3); color: var(--ink); } h3 { font-family: var(--display); line-height: 1.2; letter-spacing: -.01em; font-weight: 700; 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:#fff; 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); } .btn-primary { background: var(--accent); color:var(--accent-ink); } .btn-primary:hover { background: var(--accent-deep); color:var(--accent-ink); } .btn-brand { background: var(--brand); color:#fff; } .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 ---- */ .site-header { position: sticky; top:0; z-index:40; background: rgba(241,224,211,.9); backdrop-filter: blur(10px); border-bottom:1px solid var(--line); } /* NAV SIZING (rebuilt 2026-09-09). The previous pass added `white-space:nowrap` and stopped there. Measured over HTTP, that fix was treating the wrong thing: nowrap keeps a LABEL off a second line, but it cannot keep the ROW inside the content column, and the row had no room left. At 1440/1360/1280 the brand (326px) plus the ten items (810px) plus the gap came to exactly 1152px in a 1152px column: SLACK = 0. At 1100 it was -39px and at 1024 it was -105px, which pushed real horizontal page scroll (documentElement.scrollWidth 1114 on a 1024 viewport). With zero slack, anything that widens the row by a few pixels (browser zoom, a wider fallback face before the display font settles, a longer label) tips it over, which is what the screenshot shows. The old 1023px collapse point made it worse: the row already failed at about 1150px, so 1024-1150 was a dead zone, too narrow for the row and too wide for the menu. The row is now sized to FIT with real slack instead of being told not to wrap: the brand and the link type scale down between 1024 and 1440, the inter-item gap is fluid, the nav CTA is a compact pill rather than a full-size button, the brand never shrinks below its own text (so it can no longer be squeezed into the links), and the collapse point moved to 1023px only because the row genuinely fits from 1024 up now. Verified at 1024-1600 in 8px steps: minimum slack 44px. nowrap stays as a second line of defence. */ .nav { display:flex; align-items:center; justify-content:space-between; gap:clamp(.75rem, 1.4vw, 1.5rem); padding-block:.7rem; flex-wrap:nowrap; } .brand { font-family:var(--display); font-weight:800; font-size:clamp(1.02rem, .62rem + .62vw, 1.35rem); color:var(--ink); text-decoration:none; letter-spacing:-.02em; display:inline-flex; align-items:center; gap:.45rem; flex:0 0 auto; white-space:nowrap; } .brand-logo { width:28px; height:28px; border-radius:7px; display:block; flex:0 0 auto; } .brand b { color: var(--accent); } .nav-links { display:flex; gap:clamp(.62rem, .12rem + .78vw, 1.2rem); align-items:center; list-style:none; margin:0; padding:0; flex:0 1 auto; min-width:0; } /* nowrap: "Day Trips" broke onto a second line at 1440 and pushed the whole row out of alignment, on all 398 pages. A nav label is never a wrapping phrase. */ .nav-links li { white-space:nowrap; flex:0 0 auto; } .nav-links a { color:var(--ink); text-decoration:none; font-weight:600; font-size:clamp(.8rem, .68rem + .19vw, .92rem); white-space:nowrap; } .nav-links a:hover { color:var(--accent); } .nav-links a.btn-brand { color:#fff; } .nav-links a.btn-primary { color:#fff; } /* The shortlist pill was 159x51 in a row with no room to give. It stays the only filled target in the header, just sized for a nav bar rather than for a page body. */ .nav-links .btn { padding:.5rem clamp(.62rem, .2rem + .62vw, 1.05rem); min-height:0; border-radius:9px; line-height:1.15; } .nav-toggle { display:none; background:none; border:0; font-size:1.6rem; min-height:48px; min-width:48px; cursor:pointer; color:var(--ink); } /* Below 1024 the row cannot fit at any honest type size, so it becomes the menu. */ @media (max-width: 1023px) { .nav-toggle { display:block; } .nav-links { position:absolute; inset:100% 0 auto 0; flex-direction:column; align-items:flex-start; background:var(--paper-2); border-bottom:1px solid var(--line); padding:1rem; gap:1rem; display:none; } .nav-links[data-open="true"] { display:flex; } /* In the collapsed menu the links were 18px-tall tap targets. */ .nav-links a { font-size:1rem; display:flex; align-items:center; min-height:44px; width:100%; } .nav-links .btn { padding:.7rem 1.1rem; justify-content:center; } } /* Belt and braces: even if a future nav item overruns the budget, the header clips instead of giving all 398 pages a horizontally scrolling body. */ .site-header { overflow-x: clip; } /* ---- HTML SITEMAP: 398 links, so they read as columns rather than one long ribbon ---- */ .sitemap-list { list-style:none; margin:0 0 var(--s5); padding:0; columns: 2; column-gap: var(--s5); } .sitemap-list li { break-inside:avoid; margin:0 0 .35rem; font-size:var(--step--1); line-height:1.45; } .sitemap-list a { color:var(--ink); text-decoration:none; } .sitemap-list a:hover { color:var(--accent); text-decoration:underline; } @media (max-width: 640px) { .sitemap-list { columns: 1; } } /* ---- 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-SCREEN BACKGROUND (this site's first screen, approved 2026-07-25: blue ice glittering on black sand, headline overlaid) ---- */ /* Vertically CENTRED, not bottom-anchored (Oleg, 2026-09-09). `align-items:flex-end` pinned the headline, the lede, the proof line and the shortlist button to the bottom edge of an 88svh band, leaving a large empty stripe under the header and putting the CTA within a few pixels of the fold. Centring moves the whole block up: at 390 the button's bottom goes from 676px to about 565px in an 844px viewport, so it clears the fold by a wider margin than before. */ .hero-full { min-height: 88svh; background-size: cover; background-position: center; display: flex; align-items: center; color: #fff; border-bottom: 3px solid var(--accent); } /* The padding that used to hold the copy off the bottom edge would now bias a centred block downwards, so it is balanced. */ .hero-full .hero-inner { padding-block: var(--s6); } .hero-full-inner { padding-block: var(--s7) var(--s6); } .hero-full h1 { color: #fff; max-width: 21ch; } .hero-full .lede { color: rgba(255,255,255,.9); max-width: 56ch; font-size: var(--step-1); } .hero-full .author-hook { color: rgba(255,255,255,.85); display:flex; align-items:center; gap:.6rem; font-size:var(--step--1); margin: var(--s3) 0 var(--s4); } .hero-full .author-hook a { color: #fff; } .hero-full .author-hook img { width:38px; height:38px; border-radius:50%; object-fit:cover; border:2px solid rgba(255,255,255,.5); } .hero-full-ghost { color:#fff; border-color: rgba(255,255,255,.55); } .hero-full-ghost:hover { border-color:#fff; } .hero-full .cta-proof { color: rgba(255,255,255,.92); } .hero-full .cta-proof .gold { color:#E9B98A; } .hero-cta { margin: var(--s3) 0 0; } /* 72svh, not 78: on a 390px screen the hero used most of the first screen and the shortlist CTA still fell below it. */ @media (max-width: 640px) { .hero-full { min-height: 72svh; background-position: 64% center !important; } .hero-cta .btn-xl { width:100%; text-align:center; } } /* ---- 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:.14em; font-size:var(--step--1); color:var(--gold); 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); 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); } .pc-tag { align-self:flex-start; 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); 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); } .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 ---- */ .cta-banner { background:linear-gradient(120deg,#376B79,#06313A); border:1px solid #06313A; color:#fff; border-radius:var(--radius); padding:var(--s5); text-align:center; } .cta-banner h2, .cta-banner h3 { color:#fff; margin-top:0; } .cta-banner p { color:rgba(255,255,255,.82); 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, near-black glacier navy) ---- */ .site-footer { background:#083F30; color:#B7D2C9; 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:#EFDED8; 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 #2C5D4E; border-radius:50%; } .socials a:hover { border-color:#E06D5E; color:#E06D5E; } .disclosure { font-size:var(--step--1); color:#8FB3A7; border-top:1px solid #2C5D4E; 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; } /* EVERY TABLE ON THE SITE, not only the ones inside article prose. `.prose table` is a DESCENDANT selector, so it styles a table only when an ancestor carries .prose. compile.mjs wraps EVERY markdown table as `
`, and `.datatable` had ZERO rules: inside prose the element selector below still caught them, but every table on the homepage, a hub or a rendered block shipped as a bare browser default. That is the exact defect the skill records from a sibling, where a "When to Go" block emitted `.table-wrap` + `.datatable`, neither class existed, and the table shipped with no border, no header tint, no zebra and a clipped last column instead of a scrollable one. Valid markup, passing build, passing qa-dist, visibly broken, and found by Oleg opening the page. Keyed to `main table` rather than to a wrapper class, because keying the fix to a wrapper misses any donor that uses a different one. The .prose rules below still win on specificity where they differ, so article tables are unchanged. */ main table, table.datatable { width:100%; max-width:100%; border-collapse:collapse; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; margin:var(--s4) 0; font-size:var(--step--1); } main th, main td, table.datatable th, table.datatable td { text-align:left; padding:.7rem .9rem; border-bottom:1px solid var(--line); vertical-align:top; } main thead th, table.datatable thead th { background:var(--paper-2); font-family:var(--display); color:var(--ink); } main tbody tr:nth-child(even) td, table.datatable tbody tr:nth-child(even) td { background:color-mix(in srgb, var(--paper-2) 45%, transparent); } main tbody tr:last-child td, table.datatable tbody tr:last-child td { border-bottom:0; } /* A wide table must scroll INSIDE its own container. The page body must never scroll sideways. */ .table-wrap { overflow-x:auto; -webkit-overflow-scrolling:touch; max-width:100%; } .table-wrap > table { min-width:min(640px, 100%); } .prose table { width:100%; max-width:100%; border-collapse:collapse; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; margin:var(--s4) 0; font-size:var(--step--1); } .prose th, .prose td { text-align:left; padding:.7rem .9rem; border-bottom:1px solid var(--line); vertical-align:top; } .prose thead th { background:var(--paper-2); font-family:var(--display); color:var(--ink); } .prose tbody tr:last-child td { border-bottom:0; } @media (max-width:640px){ .prose table { display:block; overflow-x:auto; -webkit-overflow-scrolling:touch; } .table-scroll { overflow-x:auto; -webkit-overflow-scrolling:touch; } .table-scroll > table { min-width: 640px; } } .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:#fff; } .prose a.btn-brand { color:#fff; } .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); color:#fff; background:var(--gold); text-decoration:none; white-space:nowrap; box-shadow:var(--shadow); } .hotel-cta:hover, .prose a.hotel-cta:hover { background:#953905; 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 (generated 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; } .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); font-weight:700; } .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:rgba(255,255,255,.97); backdrop-filter:blur(8px); border-top:1px solid var(--line); transform:translateY(110%); transition:transform .25s ease; } .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); font-weight:700; } .sticky-cta .btn { min-height:44px; padding:.6rem 1.3rem; } @media (min-width: 761px) { .sticky-cta { left:auto; right:1.2rem; bottom:1.2rem; border:1px solid var(--line); 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 var(--line); 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-1); color:var(--ink-soft); } .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(--ink); border-image: repeating-linear-gradient(90deg, var(--ink) 0 14px, var(--accent) 14px 18px, var(--ink) 18px 32px) 1; } /* ---- 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(--brand); 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(--accent); 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; } .tr-price { font-family:var(--display); font-weight:800; font-size:var(--step-1); white-space:nowrap; } .tr-price small { display:block; margin-top:2px; 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 2026-09-17. This selector is (0,3,0) and the ported chip-wrap fix below is (0,1,0), so the fix lost on specificity and was inert: the chips in this band still could not wrap. A chip here carries a product one-liner, which is a SENTENCE, inside a card with overflow:hidden, which is how "Best value for first-time visitors set on the heavy hi" shipped. Wrapping is the honest failure mode: the card grows a line instead of hiding words. */ .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(--accent); 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); 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:#fff; } /* 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; } /* THE THIRD COLUMN MUST BE CAPPED. It was `auto`, which sizes to content, so a long price note grew the CTA column until the middle column had almost no room: the lead card rendered its title one word per line with the note taking half the card. `auto` is safe only while every note is short, and 45 of 46 ran past 120 characters. A max width makes the layout independent of the copy, which is the property it needed all along. */ .tour-row.has-media { grid-template-columns: 220px minmax(0, 1fr) minmax(9rem, 15rem); } .tour-row { grid-template-columns: minmax(0, 1fr) minmax(9rem, 15rem); } .tour-row .tr-cta { min-width: 0; } .tour-row .tr-price small { display:block; max-width: 15rem; margin-left: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; } .bp-rating { margin: 0 0 var(--s2); color: var(--ink-soft); font-size: var(--step--1); } .bp-rating .gold { color: var(--gold); font-weight: 700; } .bp-reason { margin: 0 0 var(--s2); font-size: var(--step-0); } .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; } /* ============================================================ CITY-GUIDE additions: free-entry treatment + wide comparison table ============================================================ */ .pc-free { font-weight:700; color:var(--ok); margin:.1rem 0; } .bp-free { font-family:var(--display); font-weight:800; color:var(--ok); font-size:var(--step-1); margin:0 0 var(--s2); } .table-scroll { overflow-x:auto; -webkit-overflow-scrolling:touch; margin:var(--s3) 0; } .keyfacts.compare { min-width:680px; } .keyfacts.compare th, .keyfacts.compare td { width:auto; white-space:nowrap; vertical-align:middle; } .keyfacts.compare thead th { white-space:nowrap; } .keyfacts.compare td:nth-child(2), .keyfacts.compare th:nth-child(2) { white-space:normal; min-width:12rem; } .keyfacts.compare th[scope="row"] { background:var(--surface); font-weight:700; } .keyfacts.compare th[scope="row"] a { color:var(--ink); text-decoration:none; } .keyfacts.compare th[scope="row"] a:hover { color:var(--accent); text-decoration:underline; } .keyfacts.compare .gold { color:var(--gold); font-weight:700; } /* free-entry card / passes shell */ .passes-shell { background:var(--paper-2); border:1px solid var(--line); border-left:5px solid var(--accent); border-radius:var(--radius); padding:var(--s4) var(--s5); margin:var(--s4) 0; } .passes-shell h2 { margin-top:0; } /* ---- DECISION PICKER (generic, build/launch-v2/gen-decision-picker.mjs) ---- */ .decision-picker { --dp-key: var(--brand, var(--sea, #24606A)); --dp-line: var(--line, #DFE5E6); --dp-surface: var(--surface, #fff); --dp-surface-2: var(--surface-2, var(--paper-2, #F5F6F7)); --dp-ink: var(--ink, #1B2123); --dp-soft: var(--ink-soft, #5B6A70); 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:#fff; } .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; } /* Rule 33 floor applies to the card's title LINK too, not only to the chips. Measured at 39.2px on a 390px viewport (kualalumpuraquarium.com, 2026-09-05) while every chip sat at exactly 40px, so the highest-intent target in the block was the one under the floor. */ @media (max-width: 760px) { .decision-picker .dp-name a { display:block; min-height:44px; line-height:1.35; padding-block:9px; } } .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; } } /* ============================================================ D1 BLOCK LAYER (compile tokens added in Phase D1) Count-aware card grid (rule 30) + photo collage (rule 32) + testimonials and hotels (homepage blueprint rule 26). Every colour is a palette token, so nothing here re-tunes the approved palette. ============================================================ */ /* ---- COUNT-AWARE CARD GRID (rule 30 / block library 4.5c.A) ---- Two leftover cards sit two-per-row and one sits in a capped single column, so a short group never stretches across a three-column track and reads as "everything looks the same". */ .cards-3.cards-n2 { grid-template-columns:repeat(2,1fr); } .cards-3.cards-n1 { grid-template-columns:minmax(0,1fr); max-width:420px; } @media (max-width:1040px){ .cards-3, .cards-3.cards-n2 { grid-template-columns:repeat(2,1fr); } } @media (max-width:760px){ .cards-3, .cards-3.cards-n1, .cards-3.cards-n2 { grid-template-columns:1fr; max-width:none; } } /* ---- PHOTO COLLAGE (rule 32 / block library 4.5c.C) ---- */ .photo-collage { display:grid; grid-template-columns:repeat(4,1fr); grid-auto-rows:130px; gap:.6rem; margin:var(--s3) 0 var(--s4); } .photo-collage .pcol-tile { position:relative; display:block; overflow:hidden; border-radius:var(--radius-sm); background:var(--paper-2); } .photo-collage .pcol-tile.pcol-hero { grid-column:span 2; grid-row:span 2; } .photo-collage .pcol-tile.pcol-wide { grid-column:span 2; } .photo-collage .pcol-tile img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .3s ease; } .photo-collage .pcol-tile:hover img { transform:scale(1.04); } .photo-collage .pcol-cap { position:absolute; left:0; right:0; bottom:0; padding:1.4rem .6rem .5rem; font-size:.78rem; font-weight:700; color:#fff; background:linear-gradient(to top, rgba(24,33,38,.78), rgba(24,33,38,0)); line-height:1.25; } @media (max-width:900px){ .photo-collage { grid-template-columns:repeat(3,1fr); grid-auto-rows:110px; } .photo-collage .pcol-tile.pcol-wide { grid-column:span 1; } } @media (max-width:560px){ .photo-collage { grid-template-columns:repeat(2,1fr); grid-auto-rows:100px; } .photo-collage .pcol-tile.pcol-wide { grid-column:span 2; } .photo-collage .pcol-tile:nth-child(n+7) { display:none; } } @media (prefers-reduced-motion: reduce){ .photo-collage .pcol-tile img { transition:none; } .photo-collage .pcol-tile:hover img { transform:none; } } /* ---- TESTIMONIALS ({{ testimonials }}, real reviews only) ---- */ .testimonials-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s3); } .testimonial-card { background:var(--surface); border:1px solid var(--line); border-top:3px solid var(--gold); border-radius:var(--radius); padding:var(--s4); display:flex; flex-direction:column; gap:var(--s2); } .testimonial-card .tc-stars { margin:0; color:var(--gold); letter-spacing:.08em; font-size:.95rem; } .testimonial-card blockquote { margin:0; max-width:none; color:var(--ink); } .testimonial-card .tc-attr { margin:auto 0 0; font-size:var(--step--1); color:var(--ink-soft); } .testimonials-disclaimer { margin-top:var(--s3); font-size:var(--step--1); color:var(--ink-soft); } @media (max-width:980px){ .testimonials-grid { grid-template-columns:repeat(2,1fr); } } @media (max-width:640px){ .testimonials-grid { grid-template-columns:1fr; } } /* ---- HOTELS ({{ hotels }}, minted Travelpayouts links) ---- */ .hotel-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s3); } .hotel-card { background:var(--surface); border:1px solid var(--line); border-left:4px solid var(--brand); border-radius:var(--radius); padding:var(--s4); display:flex; flex-direction:column; gap:.45rem; } .hotel-card h3 { margin:0; font-size:var(--step-0); line-height:1.25; } .hotel-card .hc-tier { align-self:flex-start; font-size:.72rem; font-weight:800; letter-spacing:.04em; text-transform:uppercase; color:var(--gold-ink); background:var(--gold-soft); border-radius:999px; padding:.14rem .6rem; } .hotel-card .hc-area, .hotel-card .hc-rating { margin:0; font-size:var(--step--1); color:var(--ink-soft); } .hotel-card .hc-rating .gold { color:var(--gold); 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:980px){ .hotel-grid { grid-template-columns:repeat(2,1fr); } } @media (max-width:640px){ .hotel-grid { grid-template-columns:1fr; } } /* === BEGIN rule37 section bands (build/launch-v2/apply-section-bands.mjs) === */ /* rule37:bands {"band-paper":{"key":"paper","bg":"#F1E0D3","fg":"#182126","link":"#016A7E"},"band-tint":{"key":"tint","bg":"#ECCFB9","fg":"#182126","link":"#016A7E"},"band-wash":{"key":"wash","bg":"#EDE8E0","fg":"#182126","link":"#016A7E"},"band-edge":{"key":"edge","bg":"#FFFFFF","fg":"#182126","link":"#016A7E"},"band-inverse":{"key":"inverse","bg":"#182126","fg":"#F1E0D3","link":"#7FB3BF"}} */ /* 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. */ .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)} .section[class*="band-"] a:not(.btn):not(.nav-link){color:var(--band-link)} .section[class*="band-"] a:not(.btn):not(.nav-link):hover{color:var(--band-link-hover)} .section[class*="band-"] :where(h1,h2,h3,h4,h5,h6){color:var(--band-fg)} .band-edge{--band-bg:#FFFFFF;--band-fg:#182126;--band-muted:#4D5962;--band-line:#EACDB7;--band-link:#0A4A56;--band-link-hover:#062E36;--band-rule:#7FB3BF;--band-cta-bg:#964618;--band-cta-fg:#FFFFFF;--band-surface:#FFFFFF;--paper:#FFFFFF;--surface:#F1E0D3;--surface-2:#F4EDE7} .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{--band-bg:#F1E0D3;--band-fg:#182126;--band-muted:#4D5962;--band-line:#EACDB7;--band-link:#0A4A56;--band-link-hover:#062E36;--band-rule:#7FB3BF;--band-cta-bg:#964618;--band-cta-fg:#FFFFFF;--band-surface:#FFFFFF} .band-tint{--band-bg:#ECCFB9;--band-fg:#182126;--band-muted:#4D5962;--band-line:#EACDB7;--band-link:#0A4A56;--band-link-hover:#062E36;--band-rule:#7FB3BF;--band-cta-bg:#964618;--band-cta-fg:#FFFFFF;--band-surface:#FFFFFF} .band-wash{--band-bg:#EED8C6;--band-fg:#182126;--band-muted:#4D5962;--band-line:#EACDB7;--band-link:#0A4A56;--band-link-hover:#062E36;--band-rule:#7FB3BF;--band-cta-bg:#964618;--band-cta-fg:#FFFFFF;--band-surface:#FFFFFF;--surface:#FFFFFF} .band-edge{--band-bg:#FFFFFF;--band-fg:#182126;--band-muted:#4D5962;--band-line:#EACDB7;--band-link:#0A4A56;--band-link-hover:#062E36;--band-rule:#7FB3BF;--band-cta-bg:#964618;--band-cta-fg:#FFFFFF;--band-surface:#FFFFFF;--paper:#FFFFFF;--surface:#F1E0D3;--surface-2:#F4EDE7} .band-inverse{--band-bg:#06313A;--band-fg:#F1E0D3;--band-muted:#AD9888;--band-line:#0E6F84;--band-link:#C5962D;--band-link-hover:#D99357;--band-surface:#095A56;--band-rule:#C5962D;--band-cta-bg:#D9864E;--band-cta-fg:#182126;--ink:#F1E0D3;--ink-soft:#A9B8BD;--paper:#182126;--paper-2:#243028;--surface:#243028;--surface-2:#243028;--line:#334037;--brand:#7FB3BF;--brand-bright:#7FB3BF;--brand-deep:#7FB3BF;--accent:#D9864E;--accent-warm:#D9864E;--accent-deep:#7FB3BF;--accent-ink:#182126;--gold:#E2B48A;--gold-soft:#243028;--gold-ink:#F1E0D3;--shadow:none} /* 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(--ink); border-image: repeating-linear-gradient(90deg, var(--ink) 0 14px, var(--accent) 14px 18px, var(--ink) 18px 32px) 1;} .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%,rgba(122,90,18,0.16) 0%,transparent 70%),radial-gradient(34% 56% at 78% 74%,rgba(1,106,126,0.12) 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 rgba(122,90,18,0.85);pointer-events:none;animation:r37-pulse 2.6s ease-out infinite} [data-countup],.st-num,.stat-num,.kpi-num{font-variant-numeric:tabular-nums} /* reduced motion: animation off, END STATE shown, nothing hidden */ @media (prefers-reduced-motion: reduce){ .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 === */ /* === BEGIN crowd calendar (homepage #when, build/compile.mjs > crowdCalendarHtml) === The block sits on the inverse band, so every colour resolves from the band tokens with a light-band fallback: moving the section to another treatment needs no edit here. */ .crowd{--cw-fg:var(--band-fg,var(--ink));--cw-muted:var(--band-muted,var(--ink-soft)); --cw-line:var(--band-line,var(--line));--cw-surface:var(--band-surface,var(--surface)); --cw-accent:var(--band-rule,var(--gold));--cw-bar:rgba(24,33,38,.30); display:grid;gap:var(--s4);margin-top:var(--s4)} .band-inverse .crowd{--cw-bar:rgba(255,255,255,.42)} .crowd-fig{margin:0;background:var(--cw-surface);border:1px solid var(--cw-line);border-radius:var(--radius);padding:var(--s3)} .crowd-fig figcaption{margin-top:var(--s2);font-size:var(--step--1);color:var(--cw-muted);max-width:76ch} .crowd-chart{display:block;width:100%;height:auto;overflow:visible} .crowd-chart .ch-grid{stroke:var(--cw-line);stroke-width:1;opacity:.55} .crowd-chart .ch-axis{stroke:var(--cw-line);stroke-width:1.5} .crowd-chart .ch-bar{fill:var(--cw-bar)} .crowd-chart .ch-bar.is-peak{fill:var(--cw-accent)} .crowd-chart .ch-ylab,.crowd-chart .ch-xlab{fill:var(--cw-muted);font-size:15px;font-family:var(--body)} .crowd-chart .ch-val{fill:var(--cw-fg);font-size:16px;font-weight:700;font-family:var(--body)} .crowd-chart .ch-cap{stroke:var(--cw-accent);stroke-width:1.5;stroke-dasharray:6 5} .crowd-chart .ch-caplab{fill:var(--cw-accent);font-size:14px;font-weight:700;font-family:var(--body)} .crowd-now{background:var(--cw-surface);border:1px solid var(--cw-line);border-radius:var(--radius);padding:var(--s3)} /* min-height reserves the tallest wording BEFORE the fetch resolves, so replacing the text with the live reading cannot shift a single pixel of the page below it. */ .cn-live{margin:0;font-size:var(--step-0);font-weight:600;min-height:5.4em} .cn-refresh{margin:.5rem 0 0;font-size:var(--step--1);color:var(--cw-muted)} .cn-live[data-state="live"]{font-weight:700} .cn-gauge{margin-top:var(--s2);height:14px;border-radius:999px;background:var(--cw-bar);overflow:hidden} .cn-gauge span{display:block;height:100%;width:var(--pct,2%);border-radius:inherit;background:var(--cw-accent); transition:width .6s ease;animation:cw-fill .9s cubic-bezier(.2,.7,.3,1) both;transform-origin:left center} @keyframes cw-fill{from{transform:scaleX(0)}to{transform:scaleX(1)}} .cn-scale{display:flex;justify-content:space-between;margin:.35rem 0 0;font-size:var(--step--1);color:var(--cw-muted)} .cn-next{margin:var(--s3) 0 0;padding-top:var(--s2);border-top:1px solid var(--cw-line);font-size:var(--step--1)} .crowd-cal{background:var(--cw-surface);border:1px solid var(--cw-line);border-radius:var(--radius);padding:var(--s3)} .cc-lede{margin:0 0 var(--s3);font-size:var(--step--1);max-width:78ch} .cc-controls{display:flex;flex-wrap:wrap;gap:.5rem} .cc-chip{min-height:44px;padding:.5rem .95rem;border-radius:999px;border:1px solid var(--cw-line); background:transparent;color:var(--cw-fg);font:inherit;font-size:var(--step--1);font-weight:600;cursor:pointer} .cc-chip:hover{border-color:var(--cw-accent)} .cc-chip:focus-visible{outline:3px solid var(--cw-accent);outline-offset:2px} .cc-chip.is-on{background:var(--cw-accent);border-color:var(--cw-accent);color:var(--band-cta-fg,#182126)} .cc-status{margin:var(--s2) 0 var(--s3);font-size:var(--step--1);color:var(--cw-muted);min-height:1.5em} .cc-month + .cc-month{margin-top:var(--s3)} .cc-mname{margin:0 0 .5rem;font-size:var(--step-0);letter-spacing:.02em} .cc-grid{list-style:none;margin:0;padding:0;display:grid;gap:.4rem;grid-template-columns:repeat(auto-fill,minmax(88px,1fr))} .cd-day{border:1px solid var(--cw-line);border-radius:var(--radius-sm);padding:.4rem .45rem; display:flex;flex-direction:column;gap:.1rem;font-size:.78rem;line-height:1.25;min-height:74px} .cd-dnum{font-weight:800;font-size:1rem} .cd-dow{color:var(--cw-muted);font-size:.7rem;text-transform:uppercase;letter-spacing:.05em} .cd-ships{font-weight:600} .cd-quiet{color:var(--cw-muted);font-weight:500} .cd-pax{color:var(--cw-muted);font-variant-numeric:tabular-nums} .cd-bar{display:block;height:4px;margin-top:auto;border-radius:999px;background:var(--cw-bar)} .cd-bar::before{content:"";display:block;height:100%;width:var(--w,0%);border-radius:inherit;background:var(--cw-accent)} .cd-none{opacity:.72} .cd-busy{border-color:var(--cw-accent);border-width:2px} @media (max-width:520px){ .cc-grid{grid-template-columns:repeat(auto-fill,minmax(74px,1fr))} .cd-day{min-height:68px;font-size:.72rem} } @media (prefers-reduced-motion: reduce){ .cn-gauge span{animation:none;transition:none} } /* === END crowd calendar === */ /* === BEGIN pin-map schematic + tour explorer (/map/, build/compile.mjs) === NOTE ON SVG STYLING: these rules live HERE, in the site stylesheet, and never in a