/* ============================================================ Food Tours in Modena - Phase 3 Design System. IDENTITY: "Modena Dried Plum" (site.config.md > PALETTE, approved by Oleg 2026-09-07). Dried Lambrusco rose ground (hue 351, a region with zero occupants across 108 distinct --paper values in 211 portfolio sites), Lambrusco plum for links and structural fills, balsamic maroon for section rules and icons, Parmigiano straw for real ratings only, and a basil green reserved for the CTA and nothing else. The CTA is green rather than red BY DESIGN: a crimson button sits 7 degrees of hue from this ground and reads as tonal, while basil green sits 160 degrees away and separates on hue and lightness at once. Soft 10px radii, hairline rules under headings. Mobile-first, zero heavy deps, system fonts. ============================================================ */ /* ---- COLOR TOKENS (light, purposeful) ---- */ :root { /* ---- Palette "Modena Dried Plum". The ten tokens marked APPROVED are copied verbatim from the site.config.md table and must never be altered here: they were contrast-checked against both the ground and the tinted panel before they were written. Re-verified at D1 with the WCAG 2.1 relative-luminance formula, on --paper / on --paper-2: --ink 13.87 / 11.87 --ink-soft 7.21 / 6.16 --brand 8.12 / 6.95 --sea 6.83 / 5.84 --gold 6.19 / 5.29 --slate 6.04 / 5.17 white on --accent 8.11 white on --footer 17.46 The remaining tokens are DERIVED mechanically from those ten (a fixed darkening for the hover pairs, a tint toward --paper for the washes) and are listed with their own measured ratios where text ever sits on them. ---- */ --ink: #241820; /* APPROVED. body text: near-black plum */ --ink-soft: #57454C; /* APPROVED. secondary text */ --paper: #F2E4E6; /* APPROVED. page ground: dried Lambrusco rose */ --paper-2: #E6D2D6; /* APPROVED. raised panels (info blocks, table headers) */ --surface: #ffffff; /* cards (--ink on white 17.12, --brand on white 10.02) */ --surface-2: #FAF2F3; /* derived: palest rose wash for inputs and the edged band */ --line: #D8C0C5; /* derived: hairline borders on light */ --brand: #6B2C4E; /* APPROVED. Lambrusco plum: links, structural fills, DOMINANT */ --brand-deep: #4E1F39; /* derived: btn-brand hover */ --accent: #1F5A3D; /* APPROVED. basil green - CTA fill (white text) ONLY, nothing else */ --accent-deep: #164430; /* derived: CTA hover */ --accent-ink: #ffffff; /* text colour that sits on --accent (8.11) */ --sea: #7A3B2E; /* APPROVED. balsamic maroon - section rules, icons, hovers */ --sea-deep: #5C2C22; /* derived: darker balsamic for hover/active states */ --gold: #6B4F0F; /* APPROVED. Parmigiano straw - real ratings only */ --gold-soft: #EFE2C7; /* derived: straw wash for badge grounds (--gold-ink on it 8.46) */ --gold-ink: #4E3A0E; /* text colour that sits on --gold-soft */ --slate: #5F5347; /* APPROVED. tertiary tints and borders */ --footer: #23161C; /* APPROVED. deep plum-black: nav and footer fills, deep bands */ /* footer-band component tokens, derived as mixes of --paper into --footer so the footer carries no raw hex of its own. Measured on --footer: ink 9.83, link 11.00, muted 7.81, line 3.30 (a control boundary needs 3.0). */ --footer-ink: color-mix(in srgb, var(--paper) 82%, var(--footer)); --footer-link: color-mix(in srgb, color-mix(in srgb, var(--paper) 88%, var(--gold)) 96%, var(--footer)); --footer-muted: color-mix(in srgb, var(--paper) 72%, var(--footer)); --footer-line: color-mix(in srgb, var(--paper) 40%, var(--footer)); --gold-on-dark: color-mix(in srgb, var(--gold) 45%, #ffffff); /* 8.12 on --footer */ --ok: #2A5B3F; --warn: #8A4A12; /* ---- 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 round: whitewash curves, not hard-edged brochure */ --radius: 10px; --radius-sm: 6px; --shadow: 0 1px 2px rgba(36,24,32,.05), 0 10px 28px rgba(36,24,32,.08); } /* ---- 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(--brand); 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(242,228,230,.92); /* --paper at 92% */ backdrop-filter: blur(10px); border-bottom:1px solid var(--line); } @media (max-width: 430px) { .site-header .brand { font-size: 1.05rem; letter-spacing: -.015em; } } @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; min-width:0; flex:0 1 auto; } /* Brand lockup: the wordmark is ONE flex item, so the flex row can never split it into "Best Restaurants" | "in" | "Florence". Inside it the only break opportunity is the space before "in Florence", and that pair is glued, so the wordmark reads either as one line or as "Best Restaurants" over "in Florence". No word is ever orphaned. */ .brand-name { display:inline-block; } .brand-tail { white-space:nowrap; } .brand-logo { width:28px; height:28px; border-radius:7px; display:block; } .brand b { color: var(--brand); } .nav-links { display:flex; gap:1.2rem; align-items:center; list-style:none; margin:0; padding:0; } /* 761-900px is the crunch band: the mobile toggle is gone, so the wordmark shares one row with six nav items plus the button. Tighten the row and hold the wordmark on one line. */ @media (min-width: 761px) and (max-width: 900px) { .nav-links { gap:.8rem; } .nav-links a.btn-brand { padding-inline:.7rem; } .site-header .brand { font-size:1.15rem; letter-spacing:-.015em; } } .nav-links a { color:var(--ink); text-decoration:none; font-weight:600; font-size:var(--step--1); } .nav-links a:hover { color:var(--sea); } .nav-links a.btn-brand { color:#fff; } .nav-links a.btn-primary { color:#fff; } .nav-toggle { display:none; background:none; border:0; font-size:1.6rem; min-height:48px; min-width:48px; cursor:pointer; color:var(--ink); } @media (max-width: 760px) { .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; } } /* ---- 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) ---- */ .hero-full { min-height: 88svh; background-size: cover; background-position: center; display: flex; align-items: flex-end; color: #fff; border-bottom: 3px solid var(--sea); } .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:var(--gold-on-dark); } @media (max-width: 640px) { .hero-full { min-height: 78svh; background-position: 64% center !important; } } /* ---- 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(--brand); 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:.75rem; 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:.75rem; 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(--sea); 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(--brand); 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(--sea); } @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(--brand); 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). Count-aware modifiers (rule 30, launch-site SKILL v2.4 addenda #30 / 04-block-library.md > 4.5c.A): a 2-leftover or 1-leftover remainder after a lead row sits 2-up or capped-single rather than stretching a 3-column track. Breakpoints: 3-up above 1040px, 2-up 761-1040px, 1-up below 761px with the horizontal image-left card as the phone fallback (Tour/Product Card rule, 04-block-library.md, unchanged). */ .cards-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s4); } .cards-3.cards-n2 { grid-template-columns:repeat(2,1fr); } .cards-3.cards-n1 { grid-template-columns:minmax(0,1fr); max-width:420px; } .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: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; } .cards-3 .rcard { flex-direction:row; } .cards-3 .rcard .rc-media { width:38%; flex:none; aspect-ratio:1/1; } .cards-3 .rcard .rc-body { padding:var(--s3); gap:.5rem; } .cards-3 .rcard .rc-body .btn { min-height:44px; display:flex; align-items:center; justify-content:center; } } /* 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:.75rem; 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(--brand); 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:.75rem; 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,var(--sea),var(--footer)); border:1px solid var(--footer); 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, deep gable-brick near-black 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-muted); 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(--sea); color:var(--ink-soft); font-style:italic; } .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(--brand); } /* 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:color-mix(in srgb, var(--gold) 82%, #000); 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(--brand); 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 (hand-authored 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); font-weight:700; } .cta-box { background:var(--paper-2); border:1px solid var(--line); border-top:3px solid var(--brand); 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; white-space:nowrap; flex:0 0 auto; } @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 , "Florence Stone" additions for this site ============================================================ */ /* ---- 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, .band > .wrap > 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(--sea) 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(--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:.75rem; 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(--sea); 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 (in-article conversion layer and re-tokened for this palette). 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(--brand); 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:.75rem; 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); } .tour-picks .tp-chips .pc-chip { white-space:nowrap; } .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(--sea); 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-price { margin:0; font-family:var(--display); font-weight:800; font-size:var(--step-0); color:var(--ink); } .tour-picks .tp-price small { font-family:var(--body); font-weight:500; font-size:.75rem; color:var(--ink-soft); } .tour-picks .tp-price-none { font-weight:600; font-size:var(--step--1); color:var(--ink-soft); } .tour-picks .tp-reassure { margin:0; font-size:.75rem; 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; } .band > .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; } /* Tour page second line (Oleg 2026-09-05): the operator's official listing title sits directly under the decision-name H1 so the click-through still matches the listing. Body scale, muted, never heading-scale (rule 31). */ .booking-panel h1:has(+ .tour-official) { margin-bottom: .3rem; } .booking-panel .tour-official { margin: 0 0 var(--s2); font-size: var(--step--1); color: var(--ink-soft); line-height: 1.35; max-width: none; } .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); 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; } /* ============================================================ HOMEPAGE BLUEPRINT (Oleg 2026-09-04): quick answer, takeaways, category compare table, inclusions matrix, stat grid, season strip + cards, sight cards, spot map, testimonials, hotels, answered grid. Same tokens as the rest of the sheet: paper / ink / brand / sea / gold. Generic component CSS, keyed only by class name, so it inherits this file's own "Gable Terracotta & Delft Blue" token values automatically. ============================================================ */ .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); 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(--sea); } .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(--sea); } .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:.75rem; 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:rgba(156,78,28,.14); color:var(--sea); } .glyph.no { background:rgba(138,58,34,.10); color:var(--brand); } .glyph.opt { background:var(--gold-soft); color:var(--gold-ink); } @media (max-width:768px){ .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:rgba(156,78,28,.12); border-color:var(--sea); } .month-strip li.is-harvest { background:var(--gold-soft); border-color:var(--gold); } .month-strip li.is-drying { background:rgba(138,58,34,.08); 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; } } /* Sight cards ("What You'll See") */ .sight-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:var(--s3); margin-top:var(--s4); } .sight-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; } .sight-card h3 { margin:0; font-size:var(--step-0); line-height:1.25; } .sight-card .wc-style { font-family:var(--display); text-transform:uppercase; letter-spacing:.08em; font-size:.8rem; color:var(--ink-soft); } .sight-card p { margin:0; font-size:var(--step--1); } .sight-card .wc-tour { margin-top:auto; border-top:1px solid var(--line); padding-top:.5rem; font-size:.84rem; } @media (max-width:1000px){ .sight-grid { grid-template-columns:repeat(2,1fr); } } @media (max-width:520px){ .sight-grid { grid-template-columns:1fr; } } /* Spot map: live embed + hand-drawn pin schematic */ .spot-map-wrap { display:grid; grid-template-columns:1fr 1fr; gap:var(--s4); align-items:stretch; margin-top:var(--s3); } .spot-map-wrap .map-embed { border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; aspect-ratio:600/360; min-height:280px; 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); 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 */ .answered-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:var(--s4); margin-top:var(--s3); } .answered-group { border-top:3px solid var(--sea); padding-top:var(--s3); } .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(--sea); } .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 { grid-template-columns:repeat(2,1fr); } } @media (max-width:520px){ .answered-grid { grid-template-columns:1fr; } } /* Richer table-scroll wrapper for wrapTables() output (overrides the thin donor rule above) */ .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 { width:100%; min-width:560px; border-collapse:collapse; background:var(--surface); margin:0; font-size:var(--step--1); border:0; } .table-scroll th, .table-scroll td { text-align:left; padding:.75rem .95rem; border-bottom:1px solid var(--line); vertical-align:top; line-height:1.45; } .table-scroll thead th { background:var(--paper-2); font-family:var(--display); font-weight:700; color:var(--ink); letter-spacing:.01em; } .table-scroll tbody tr:nth-child(even) > td { background:var(--surface-2); } .table-scroll tbody tr:last-child > td { border-bottom:0; } .table-scroll td.num, .table-scroll th.num { text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap; } /* ---- DECISION PICKER (generic, build/launch-v2/gen-decision-picker.mjs) ---- */ .decision-picker { --dp-key: var(--brand, var(--sea, #6B2C4E)); --dp-line: var(--line, #D8C0C5); --dp-surface: var(--surface, #fff); --dp-surface-2: var(--surface-2, var(--paper-2, #FAF2F3)); --dp-ink: var(--ink, #241820); --dp-soft: var(--ink-soft, #57454C); 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[data-js="on"] .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:.75rem; 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 (rule 32, build/compile.mjs photoCollageHtml) ---- */ .photo-collage { display:grid; grid-template-columns:repeat(4,1fr); grid-auto-rows:130px; gap:.6rem; margin:var(--s3, 1rem) 0 var(--s4, 1.5rem); } .photo-collage .pcol-tile { position:relative; display:block; overflow:hidden; border-radius:var(--radius-sm, 8px); 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(0,0,0,.72), rgba(0,0,0,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-hero { grid-column:span 2; grid-row:span 2; } .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-hero { grid-column:span 2; grid-row:span 2; } .photo-collage .pcol-tile.pcol-wide { grid-column:span 2; } .photo-collage .pcol-tile:nth-child(n+7) { display:none; } } /* ---- TOUR EXPLORER (rule 33 block 2, build/compile.mjs tourExplorerHtml) ---- */ .tour-explorer { margin:var(--s3, 1rem) 0; } .tour-explorer .tex-controls { display:flex; flex-wrap:wrap; align-items:center; gap:.75rem 1.1rem; margin:0 0 .75rem; } .tour-explorer .tex-cats { display:flex; flex-wrap:wrap; gap:.4rem; } .tour-explorer .tex-chip { font-size:var(--step--1, .9rem); font-weight:600; color:var(--ink); background:var(--surface); border:1.5px solid var(--line); border-radius:999px; padding:.5rem .9rem; min-height:40px; cursor:pointer; } .tour-explorer .tex-chip:hover { border-color:var(--sea); color:var(--sea); } .tour-explorer .tex-chip.is-on { background:var(--sea); border-color:var(--sea); color:#fff; } .tour-explorer .tex-chip:focus-visible { outline:3px solid var(--brand); outline-offset:2px; } .tour-explorer .tex-meal, .tour-explorer .tex-sort { display:flex; align-items:center; gap:.4rem; font-size:var(--step--1, .9rem); font-weight:600; min-height:40px; } .tour-explorer .tex-meal input[type="checkbox"] { width:24px; height:24px; accent-color:var(--brand); } .tour-explorer .tex-meal, .tour-explorer .tex-reset { min-height:44px; } .tour-explorer .tex-sort select { min-height:40px; padding:.35rem .5rem; border-radius:var(--radius-sm, 6px); border:1.5px solid var(--line); background:var(--surface); color:var(--ink); font:inherit; } .tour-explorer .tex-status { margin:0 0 .6rem; padding:.55rem .85rem; border-radius:var(--radius-sm, 6px); background:var(--paper-2); font-size:var(--step--1, .9rem); font-weight:600; max-width:none; } .tour-explorer .tex-table { width:100%; min-width:640px; } .tour-explorer .tex-table .tex-name a { font-weight:700; color:var(--ink); text-decoration:none; } .tour-explorer .tex-table .tex-name a:hover { color:var(--sea); text-decoration:underline; } .tour-explorer .tex-rev { color:var(--ink-soft); font-weight:500; } .tour-explorer .tex-table tr[hidden] { display:none !important; } .tour-explorer .tex-empty { margin:.75rem 0 0; padding:.9rem 1rem; border-radius:var(--radius-sm, 6px); background:var(--paper-2); color:var(--ink-soft); font-weight:600; } @media (max-width:560px){ .tour-explorer .tex-controls { gap:.6rem; } } /* The explorer table is a real horizontal scroller (7 columns), so on a phone the Book column would otherwise sit several hundred pixels past the right edge and the reader has to drag before any CTA is reachable. Pinning the last column to the right keeps the booking link on screen at every scroll position without dropping a single data column. */ @media (max-width:700px){ .tour-explorer .tex-table { min-width:560px; } .tour-explorer .tex-table th:last-child, .tour-explorer .tex-table td:last-child { position:sticky; right:0; z-index:2; background:var(--surface); border-left:1px solid var(--line); box-shadow:var(--shadow); } .tour-explorer .tex-table thead th:last-child { background:var(--paper-2); } .tour-explorer .tex-table tbody tr:nth-child(even) > td:last-child { background:var(--surface-2); } .tour-explorer .tex-table td:last-child .btn { white-space:nowrap; padding-inline:.7rem; } } /* ---- BUDGET AND TIME SLIDER (rule 33 block 3, substituted; build/compile.mjs budgetSliderHtml) ---- */ .budget-slider { margin:var(--s3, 1rem) 0; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius, 10px); padding:var(--s4, 1.5rem); } .budget-slider .bud-controls { display:flex; flex-wrap:wrap; align-items:center; gap:1.25rem; margin:0 0 .75rem; } .budget-slider .bud-field { display:flex; flex-direction:column; gap:.35rem; font-size:var(--step--1, .9rem); font-weight:700; color:var(--ink); flex:1 1 220px; min-width:200px; } .budget-slider .bud-field output { color:var(--sea); font-family:var(--display); } .budget-slider input[type="range"] { width:100%; height:40px; accent-color:var(--sea); cursor:pointer; } .budget-slider .bud-status { margin:0 0 .9rem; padding:.55rem .85rem; border-radius:var(--radius-sm, 6px); background:var(--paper-2); font-size:var(--step--1, .9rem); font-weight:600; max-width:none; } .budget-slider .bud-list { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s3, 1rem); } .budget-slider .bud-card { border:1px solid var(--line); border-radius:var(--radius-sm, 8px); padding:.9rem; background:var(--surface-2); display:flex; flex-direction:column; gap:.45rem; } .budget-slider .bud-card[hidden] { display:none !important; } .budget-slider .bud-name { margin:0; font-size:var(--step-0, 1rem); line-height:1.25; } .budget-slider .bud-name a { color:var(--ink); text-decoration:none; } .budget-slider .bud-name a:hover { color:var(--sea); text-decoration:underline; } .budget-slider .bud-meta { margin:0; display:flex; flex-wrap:wrap; gap:.5rem; font-size:.78rem; font-weight:600; color:var(--ink-soft); max-width:none; } .budget-slider .bud-card .btn { margin-top:auto; text-align:center; } .budget-slider .bud-empty { margin:.9rem 0 0; padding:.9rem 1rem; border-radius:var(--radius-sm, 6px); background:var(--paper-2); color:var(--ink-soft); font-weight:600; } @media (max-width:900px){ .budget-slider .bud-list { grid-template-columns:repeat(2,1fr); } } @media (max-width:560px){ .budget-slider .bud-controls { gap:1rem; } .budget-slider .bud-list { grid-template-columns:1fr; } } /* ---- DEPARTURE PICKER (rule 33 block 3) ---- Markup: build/compile.mjs departurePickerHtml(). Two columns: a coordinate-projected schematic of the geocoded departure areas on the left, the full server-rendered list of every tour on the right. Chips and pins narrow the list in place; nothing is fetched. Rule 38: first paint is the "every departure point" state, so no rule here may hide a .dep-item by default. Tap targets: chips are 44px minimum and each pin carries a transparent 44px hit circle behind its 26px dot. */ .departure-picker { display:grid; grid-template-columns:1.2fr 1fr; gap:var(--s4); align-items:start; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:var(--s4); margin:var(--s3) 0; } .departure-picker .dep-map svg { width:100%; height:auto; display:block; border:1px solid var(--line); border-radius:var(--radius-sm); background:var(--paper); } .departure-picker .dep-pin { cursor:pointer; } .departure-picker .dep-hit { fill:transparent; } .departure-picker .dep-dot { fill:var(--brand); stroke:var(--surface); stroke-width:2; transition:fill .15s ease; } .departure-picker .dep-pin:hover .dep-dot, .departure-picker .dep-pin:focus-visible .dep-dot { fill:var(--sea); } .departure-picker .dep-pin.is-on .dep-dot { fill:var(--accent); } .departure-picker .dep-pin text { fill:var(--surface); font-family:var(--display); font-size:12px; font-weight:800; pointer-events:none; } .departure-picker .dep-pin .dep-label { fill:var(--ink); font-size:12px; font-weight:700; } .departure-picker .dep-pin:focus-visible { outline:3px solid var(--accent); outline-offset:2px; } .departure-picker .dep-chips { display:flex; flex-wrap:wrap; gap:.4rem; margin:var(--s3) 0; } .departure-picker .dep-chip { display:inline-flex; align-items:center; gap:.35rem; font:inherit; font-size:var(--step--1); font-weight:700; min-height:44px; padding:.55rem .9rem; cursor:pointer; line-height:1.2; color:var(--ink); background:var(--surface-2); border:1px solid var(--line); border-radius:999px; } .departure-picker .dep-chip:hover { border-color:var(--sea); color:var(--sea); } .departure-picker .dep-chip.is-on { background:var(--brand); border-color:var(--brand); color:var(--accent-ink); } .departure-picker .dep-chip.is-on .dep-n { color:var(--accent-ink); opacity:.8; } .departure-picker .dep-chip:focus-visible { outline:3px solid var(--accent); outline-offset:2px; } .departure-picker .dep-n { color:var(--ink-soft); font-weight:800; font-size:.78em; } .departure-picker .dep-detail { margin:0; padding:.65rem .95rem; border-radius:var(--radius-sm); background:var(--paper-2); color:var(--ink); font-size:var(--step--1); line-height:1.5; max-width:none; } .departure-picker .dep-list { list-style:none; margin:0; padding:0; display:grid; gap:.5rem; max-height:34rem; overflow-y:auto; } .departure-picker .dep-item { min-width:0; overflow-wrap:anywhere; padding:.6rem .8rem; background:var(--surface-2); border:1px solid var(--line); border-left:4px solid var(--sea); border-radius:var(--radius-sm); } .departure-picker .dep-item[hidden] { display:none !important; } .departure-picker .dep-item > a { font-family:var(--display); font-weight:700; color:var(--ink); text-decoration:none; } .departure-picker .dep-item > a:hover { color:var(--sea); text-decoration:underline; } .departure-picker .dep-meta { display:block; margin-top:.2rem; font-size:.78rem; font-weight:600; color:var(--ink-soft); } .departure-picker .dep-where { display:block; margin-top:.15rem; font-size:.76rem; color:var(--ink-soft); } .departure-picker .dep-empty { margin:var(--s2) 0 0; padding:var(--s3); border-radius:var(--radius-sm); background:var(--paper-2); color:var(--ink); font-weight:600; max-width:none; } .spot-map-wrap.spot-map-solo { display:block; } .spot-map-wrap.spot-map-solo .map-embed { aspect-ratio:16/7; } @media (max-width:900px) { .departure-picker { grid-template-columns:1fr; padding:var(--s3); } .departure-picker .dep-list { max-height:none; } /* An SVG pin shrinks with its viewBox, so below this width it can no longer hold a 40px tap target. The pins become picture only and the 44px chips are the sole control. */ .departure-picker .dep-pin { pointer-events:none; cursor:default; } } @media (max-width:560px) { .departure-picker .dep-chip { flex:1 1 100%; justify-content:space-between; } } /* rule37:bands {".band-paper":{"key":"paper","bg":"#F2E4E6","fg":"#241820","link":"#6B2C4E"},".band-tint":{"key":"tint","bg":"#E6D2D6","fg":"#241820","link":"#6B2C4E"},".band-edge":{"key":"edge","bg":"#FAF2F3","fg":"#241820","link":"#6B2C4E"},".band-brand":{"key":"brand","bg":"#DCC7CE","fg":"#241820","link":"#6B2C4E"},".band-sea":{"key":"sea","bg":"#DCC6C5","fg":"#241820","link":"#6B2C4E"},".band-hero":{"key":"hero","bg":"#D7BFC8","fg":"#241820","link":"#6B2C4E"},".band-ink":{"key":"ink","bg":"#23161C","fg":"#F2E4E6","link":"#B99A6A"}} */ /* ============================================================================ SECTION BANDS (rule 37). A band is an OUTER full-width
carrying the background with an INNER .wrap div holding the content. A box-shadow full-bleed trick does not paint behind its own element, so it is never used here. The machine-readable band table above is what build/launch-v2/section-variety-audit.mjs reads to prove adjacent sections never share a ground. Its hex values are the same grounds measured in the contrast table below; keep the two in sync if a band changes. The rhythm is a fixed six-step cycle, not a colour per section: paper -> tint -> edge -> brand -> sea -> ink -> (repeat) with the hero carrying its own seventh treatment. Adjacent bands can therefore never share a background. Every treatment is mixed from the palette tokens in :root; no band introduces a raw colour of its own. Measured contrast on the Modena Dried Plum palette, recomputed at D1 (2026-09-07) with the WCAG 2.1 relative-luminance formula. Body text needs 4.5, large text and UI 3.0. "link" is --brand, the only link colour on a light band; "CTA" is white on --accent. paper #F2E4E6 ink 13.87 ink-soft 7.21 link 8.12 CTA fill 8.11 tint #E6D2D6 ink 11.87 ink-soft 6.16 link 6.95 CTA fill 8.11 edge #FAF2F3 ink 15.54 ink-soft 8.07 link 9.10 CTA fill 8.11 brand #DCC7CE ink 10.68 ink-soft 5.55 link 6.25 CTA fill 8.11 sea #DCC6C5 ink 10.54 ink-soft 5.48 link 6.17 CTA fill 8.11 hero #D7BFC8 to #DFC9C9 across the drift, worst point ink 9.93 ink-soft 5.16 link 5.81 ink #23161C text 14.14 muted 9.00 link 7.87 hairline 3.30 THE INVERSE BAND NEEDS ITS OWN LINK AND CTA COLOURS, and does not inherit the light ones: --brand on --footer is 1.74 and --accent on --footer is 2.15, both far under the 3.0 a control boundary needs. So .band-ink swaps the link to a straw tint (7.87) and rings any CTA that sits straight on the band in a light halo. Both are set below, not inherited. ========================================================================== */ .band { padding-block: var(--s6); } .band + .band { padding-top: var(--s6); } .section + .band, .band + .section { padding-top: var(--s6); } .band-paper { background: var(--paper); } .band-tint { background: var(--paper-2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); } /* the edged band: a pale wash held between a heavy terracotta top rule and a hairline */ .band-edge { background: var(--surface-2); border-top: 3px solid var(--sea); border-bottom: 1px solid var(--line); } .band-brand { background: color-mix(in srgb, var(--brand) 16%, var(--paper)); border-top: 1px solid color-mix(in srgb, var(--brand) 34%, var(--paper)); border-bottom: 1px solid color-mix(in srgb, var(--brand) 34%, var(--paper)); } .band-sea { background: color-mix(in srgb, var(--sea) 18%, var(--paper)); border-top: 1px solid color-mix(in srgb, var(--sea) 34%, var(--paper)); border-bottom: 1px solid color-mix(in srgb, var(--sea) 34%, var(--paper)); } /* hero band: the two washes drifting slowly across each other */ .band-hero { background: linear-gradient(115deg, color-mix(in srgb, var(--brand) 20%, var(--paper)) 0%, color-mix(in srgb, var(--sea) 12%, var(--paper)) 42%, color-mix(in srgb, var(--brand) 14%, var(--paper)) 74%, color-mix(in srgb, var(--sea) 16%, var(--paper)) 100%); background-size: 220% 220%; background-position: 0% 50%; border-bottom: 1px solid color-mix(in srgb, var(--brand) 30%, var(--paper)); animation: band-drift 26s ease-in-out infinite alternate; } @keyframes band-drift { to { background-position: 100% 50%; } } /* ---- INVERSE BAND ---------------------------------------------------------- Only the band's own direct text needs inverting: every block inside it (.tour-row, .rcard, .map-schematic, .cta-banner) carries its own light card ground and keeps the normal dark palette. */ .band-ink { --band-text: var(--paper); --band-muted: color-mix(in srgb, var(--paper) 78%, var(--footer)); --band-link: color-mix(in srgb, var(--gold) 38%, var(--paper)); --band-line: color-mix(in srgb, var(--paper) 40%, var(--footer)); background: var(--footer); color: var(--band-text); } .band-ink > .wrap > h2, .band-ink > .wrap > h3, .band-ink > .wrap > p, .band-ink > .wrap > ul > li, .band-ink > .wrap > ol > li { color: var(--band-text); } .band-ink > .wrap > p.small, .band-ink > .wrap > p.lede, .band-ink > .wrap > p.map-schematic-note, .band-ink > .wrap > .pending-line { color: var(--band-muted); } .band-ink > .wrap > p > a, .band-ink > .wrap > ul > li > a, .band-ink > .wrap > a { color: var(--band-link); text-decoration: underline; } .band-ink > .wrap > p > a:hover, .band-ink > .wrap > a:hover { color: var(--paper); } /* the editorial hairline under a heading is drawn in --ink, which vanishes on cypress */ .band-ink > .wrap > h2:first-child, .band-ink > .wrap > .rule-h2 { border-bottom-color: var(--band-link); /* --brand is 1.74 on --footer and vanishes, so the stripe segment is tinted toward --paper until it clears the 3.0 a non-text boundary needs: measured 5.08. --accent is deliberately NOT used here: it is the CTA fill and nothing else (site.config.md). */ border-image: repeating-linear-gradient(90deg, var(--band-link) 0 14px, color-mix(in srgb, var(--brand) 55%, var(--paper)) 14px 18px, var(--band-link) 18px 32px) 1; } /* Basil green on plum-black is 2.15:1, below the 3.0 a control boundary needs, so a CTA sitting straight on the band (not inside a card) carries a light ring: the ring itself is 7.11 on the band and 3.31 against the button fill, so the boundary reads from both sides. White label on --accent stays 8.11 either way. */ .band-ink > .wrap > .btn-primary, .band-ink > .wrap > p > .btn-primary, .band-ink > .wrap > .dp-controls > .btn-primary { box-shadow: 0 0 0 2px color-mix(in srgb, var(--paper) 68%, transparent); } .band-ink .btn-ghost { color: var(--paper); border-color: color-mix(in srgb, var(--paper) 45%, transparent); } .band-ink .btn-ghost:hover { border-color: var(--paper); } .band-ink > .wrap > .sf { border-color: var(--band-line); } .band-ink > .wrap > .sf-data { background: var(--surface); } /* ---- SECTION FIGURE -------------------------------------------------------- One shared figure component so every section can carry an image of its own. .sf-photo is a wide photographic strip, .sf-data holds an SVG data figure on its own light card. Both declare intrinsic size, so neither shifts layout. */ .sf { margin: 0 0 var(--s4); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; } .sf img { width: 100%; display: block; } .sf-photo img { aspect-ratio: 12 / 5; height: auto; object-fit: cover; } .sf-data { background: var(--surface); padding: var(--s3); margin-top: var(--s5); margin-bottom: 0; } .sf-data img { height: auto; object-fit: contain; } @media (max-width: 560px) { .sf-photo img { aspect-ratio: 3 / 2; } } /* ---- MOTION ---------------------------------------------------------------- CSS-only movements, no library and no script. Each one animates FROM a start state INTO the state the element already has, so with scripting off, or with motion reduced, the end state is what renders and nothing is ever hidden. THE HOMEPAGE'S DELIBERATE ANIMATED ELEMENT (rule 37, added at D1 2026-09-07) is the staggered reveal of the six category cards below. It was chosen over a count-up because a count-up has to put its number in a pseudo-element or in JS, and either one gates a real figure behind the animation. Here the cards are ordinary DOM, laid out and painted by the grid before any animation runs; the keyframe only fades and lifts them INTO the position they already hold. Worst case (CSS animation unsupported, motion reduced, JS off) the full grid renders immediately and correctly. It attaches to .cat-grid .cat-card, which build/compile.mjs catGridHtml() emits on the homepage today, so it cannot ship inert (memory: interactive-blocks-shipped-inert). */ .cat-grid .cat-card { animation: card-reveal .5s cubic-bezier(.22,.61,.36,1) both; } .cat-grid .cat-card:nth-child(1) { animation-delay: 0ms; } .cat-grid .cat-card:nth-child(2) { animation-delay: 70ms; } .cat-grid .cat-card:nth-child(3) { animation-delay: 140ms; } .cat-grid .cat-card:nth-child(4) { animation-delay: 210ms; } .cat-grid .cat-card:nth-child(5) { animation-delay: 280ms; } .cat-grid .cat-card:nth-child(6) { animation-delay: 350ms; } .cat-grid .cat-card:nth-child(n+7) { animation-delay: 420ms; } @keyframes card-reveal { from { opacity: 0; transform: translateY(14px) scale(.985); } } .stat-grid .stat-tile { animation: tile-rise .55s cubic-bezier(.22,.61,.36,1) both; } .stat-grid .stat-tile:nth-child(1) { animation-delay: 0ms; } .stat-grid .stat-tile:nth-child(2) { animation-delay: 80ms; } .stat-grid .stat-tile:nth-child(3) { animation-delay: 160ms; } .stat-grid .stat-tile:nth-child(4) { animation-delay: 240ms; } .stat-grid .stat-tile:nth-child(5) { animation-delay: 320ms; } .stat-grid .stat-tile:nth-child(6) { animation-delay: 400ms; } @keyframes tile-rise { from { opacity: 0; transform: translateY(10px); } } .map-pin.is-city circle { animation: pin-pulse 2.8s ease-in-out infinite; transform-box: fill-box; transform-origin: center; } @keyframes pin-pulse { 50% { r: 11; opacity: .78; } } @media (prefers-reduced-motion: reduce) { .band-hero { animation: none; background-position: 0% 50%; } /* animation off, END STATE VISIBLE: every reveal below is explicitly reset to opaque and untransformed, never left at the keyframe's from-state. */ .cat-grid .cat-card { animation: none; opacity: 1; transform: none; } .stat-grid .stat-tile { animation: none; opacity: 1; transform: none; } .map-pin.is-city circle { animation: none; } .btn, .cat-card, .tour-row, .rcard { transition: none; } html { scroll-behavior: auto; } } /* Expedia guest scores are out of 10, so the scale travels with the number and no five-star glyph is used. Tour ratings (out of 5) keep the star elsewhere. */ .hc-rating .hc-scale { color: var(--ink-soft); font-size: var(--step--1); margin-left: .25rem; } /* Rule 30: the .rcard grid carries the from-price like the lead row and the tour-picks tile. */ .rcard .rc-price { margin: .15rem 0 .35rem; color: var(--ink); font-size: var(--step--1); } .rcard .rc-price strong { color: var(--brand); } /* Author card on /about/. Real named specialist, real photo, credentials supplied by the operator. */ .author-card { display: flex; gap: var(--s4); align-items: flex-start; flex-wrap: wrap; } .author-card .author-portrait { border-radius: 50%; flex: 0 0 auto; width: 160px; height: 160px; object-fit: cover; border: 3px solid var(--line); } .author-card .author-body { flex: 1 1 22rem; min-width: 0; } .author-card .author-name { margin: 0; font-size: var(--step-1); } .author-card .author-role { margin: 0 0 var(--s3); color: var(--ink-soft); } .author-eeat { margin: var(--s3) 0 0; padding-left: 1.1rem; } .author-eeat li { margin-bottom: .3rem; } @media (max-width: 560px) { .author-card { gap: var(--s3); } .author-card .author-portrait { width: 112px; height: 112px; } }