/* ============================================================ Best Restaurants in Rome - Phase 3 Design System. IDENTITY: "Gable Terracotta & Delft Blue" (approved at gate 2026-09-04). Warm brick ground with porphyry-red and cypress-green accents (structural fills, links, section rules, iconography, hovers), a deep gable-brick near-black footer band, genuine Delft cobalt blue reserved for the CTA ONLY, Dutch mustard-ochre for real ratings only. Soft 10px radii, hairline rules under headings. Mobile-first, zero heavy deps, system fonts. ============================================================ */ /* ---- COLOR TOKENS (light, purposeful) ---- */ :root { /* ---- Palette "Roman brick" (site.config.md, approved by Oleg at the Phase C gate, 2026-09-06). Chosen against a survey of all 103 distinct --paper values in the portfolio: zero sat in the red/brick band (hue 345-15), so this ground is in an empty lane and is unmistakable against the sage-stone #E3EBE1 of the sibling restaurant site. Contrast against --paper (#F3E3DF): --ink 13.7:1, --ink-soft 7.2:1, --brand 8.0:1, --sea 4.7:1, --gold 4.7:1, --slate 5.2:1; white on --accent 11.5:1 and the button separates from the ground at 9.2:1. The sibling site puts a red CTA on a green ground; Rome inverts it, a deep cypress CTA on warm brick, so the two never read as one template. ROLES ARE FIXED: --accent is the CTA fill and nothing else, --brand carries links and structural fills. ---- */ --ink: #231A18; /* primary text: near-black warmed toward brick */ --ink-soft: #57463F; /* secondary text: muted brick-brown */ --paper: #F3E3DF; /* page ground: Trastevere brick-and-ochre facade wash */ --paper-2: #E7D2CC; /* raised panels (info blocks, table headers): deeper brick */ --surface: #ffffff; /* cards */ --surface-2: #FAF0ED; /* inputs: pale brick wash */ --line: #DCC3BC; /* hairline borders on light */ --brand: #7A2233; /* porfido rosso, imperial porphyry: links, structural fills, DOMINANT */ --brand-deep: #5C1926; /* deeper porphyry: btn-brand hover */ --accent: #1D3F3A; /* imperial cypress green - CTA (white text) ONLY, never elsewhere */ --accent-deep: #142D29; /* deeper cypress: CTA hover */ --accent-ink: #ffffff; /* text colour that sits on --accent */ --sea: #8A5A2B; /* Roman bronze - section rules, icons, hovers */ --sea-deep: #6A4420; /* darker bronze for hover/active states */ --gold: #7E6015; /* antique gold - real ratings, small warm accents only */ --gold-soft: #F2E3C6; /* gold wash for badge backgrounds (DARK text on top) */ --gold-ink: #4A3708; /* text colour that sits on --gold-soft */ --slate: #6B5A55; /* muted brick-taupe: sparing tertiary section tint/borders */ --footer: #241B19; /* sampietrino basalt: nav/footer fills, deep bands */ --ok: #2F5C4B; --warn: #8A4A18; /* ---- 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(26,36,32,.05), 0 10px 28px rgba(26,36,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(--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(244,236,221,.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" | "Rome". Inside it the only break opportunity is the space before "in Rome", and that pair is glued, so the wordmark reads either as one line or as "Best Restaurants" over "in Rome". 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(--accent); } .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(--accent); } .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:#DFB758; } @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(--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:.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(--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). 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(--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:.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,#8A3A22,#2B1710); border:1px solid #2B1710; 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:#D9C7B4; 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:#E8D2B8; 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 #4A2418; border-radius:50%; } .socials a:hover { border-color:var(--gold); color:var(--gold); } .disclosure { font-size:var(--step--1); color:#C9AF98; border-top:1px solid #4A2418; 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; } .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:#835a17; 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 (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(--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; 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 , "Roman Brick" 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(--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(--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(--accent); border-radius:var(--radius); padding:var(--s4); margin:var(--s5) 0; } .honesty .h-h { font-family:var(--display); font-weight:800; font-size:var(--step-1); margin:0 0 var(--s2); max-width:none; color:var(--ink); } .honesty p:last-child { margin-bottom:0; } .prose .honesty p { max-width:none; } /* ---- TOUR LIST (category hubs: a dense, scannable row per product) ---- */ .tour-list { display:grid; gap:var(--s3); } .tour-row { display:grid; grid-template-columns:1fr auto; gap:var(--s3) var(--s4); align-items:start; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:var(--s4); } .tour-row.is-lead { border-color:var(--gold); box-shadow:0 0 0 2px var(--gold-soft), var(--shadow); } .tour-row h3 { margin:0 0 .35rem; font-size:var(--step-1); } .tour-row h3 a { color:var(--ink); text-decoration:none; } .tour-row .tr-meta { font-size:var(--step--1); color:var(--ink-soft); margin:0 0 .5rem; max-width:none; } .tour-row .tr-desc { margin:0; max-width:58ch; } .tour-row .tr-cta { display:flex; flex-direction:column; align-items:flex-end; gap:.4rem; text-align:right; } .tour-row .tr-price { font-family:var(--display); font-weight:800; font-size:var(--step-1); white-space:nowrap; } .tour-row .tr-price small { display:block; font-family:var(--body); font-size:var(--step--1); font-weight:500; color:var(--ink-soft); white-space:normal; } @media (max-width:760px){ .tour-row { grid-template-columns:1fr; } .tour-row .tr-cta { align-items:stretch; text-align:left; } .tour-row .tr-cta .btn { width:100%; } } /* ============================================================ TOUR-PICKS GRID (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(--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:.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, #24506a)); --dp-line: var(--line, #dfe3e6); --dp-surface: var(--surface, #fff); --dp-surface-2: var(--surface-2, var(--paper-2, #f5f6f7)); --dp-ink: var(--ink, #1b1f23); --dp-soft: var(--ink-soft, #5b6570); 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); } /* Rule 38: the default view shows every tour, no filter preselected. The generic lib folds to the top few even on idle, which contradicts the idle status line ("All tours are shown below") and hides content on first paint. Scope the fold to the picked state only. */ .decision-picker[data-js="on"]:not([data-state="idle"]) .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(--accent); 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; } } /* ---- "CAN I ACTUALLY GET IN?" REALITY CHECKER (rule 33 block 1) ---- Server-rendered list of every verified restaurant, narrowed in place by the chips. Palette tokens only: brick ground, porphyry-red active chips, cypress red kept for the CTA. The friction ladder reads cypress (hardest) down to green (walk in) so the contrast between the queue and the tour is visible before a word is read. Markup: build/compile.mjs realityCheckerHtml(). */ .reality-checker { margin: var(--s3) 0; } .reality-checker .rc-controls { display:flex; flex-wrap:wrap; align-items:flex-start; gap:var(--s3) var(--s4); margin:0 0 var(--s3); padding:var(--s3); background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); } .reality-checker .rc-group { border:0; margin:0; padding:0; min-width:0; flex:1 1 250px; } .reality-checker .rc-group legend { padding:0; margin:0 0 .45rem; font-size:.75rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-soft); } .reality-checker .rc-chips { display:flex; flex-wrap:wrap; gap:.4rem; } .reality-checker .rc-chip { display:inline-flex; align-items:center; gap:.35rem; font:inherit; font-size:var(--step--1); font-weight:600; line-height:1.2; color:var(--ink); background:var(--surface-2); border:1.5px solid var(--line); border-radius:999px; padding:.55rem .9rem; min-height:44px; cursor:pointer; } .reality-checker .rc-chip:hover { border-color:var(--sea); color:var(--sea); } .reality-checker .rc-chip[aria-pressed="true"] { background:var(--brand); border-color:var(--brand); color:var(--accent-ink); } .reality-checker .rc-chip[aria-pressed="true"] .rc-n { color:var(--accent-ink); opacity:.75; } .reality-checker .rc-chip:focus-visible { outline:3px solid var(--accent); outline-offset:2px; } .reality-checker .rc-n { color:var(--ink-soft); font-weight:700; font-size:.78em; } .reality-checker .rc-reset { min-height:44px; font-size:var(--step--1); padding:.6rem 1.2rem; } .reality-checker .rc-status { margin:0 0 var(--s3); padding:.65rem .95rem; border-radius:var(--radius-sm); background:var(--paper-2); font-size:var(--step--1); font-weight:700; max-width:none; } .reality-checker .rc-list { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:var(--s3); align-items:start; } .reality-checker .rc-row { min-width:0; overflow-wrap:anywhere; background:var(--surface); border:1px solid var(--line); border-left:5px solid var(--line); border-radius:var(--radius-sm); padding:var(--s3); } .reality-checker .rc-row[hidden] { display:none !important; } .reality-checker .rc-row[data-friction="5"] { border-left-color:var(--footer); } .reality-checker .rc-row[data-friction="4"] { border-left-color:var(--sea); } .reality-checker .rc-row[data-friction="3"] { border-left-color:var(--gold); } .reality-checker .rc-row[data-friction="2"] { border-left-color:var(--slate); } .reality-checker .rc-row[data-friction="1"] { border-left-color:var(--ok); } .reality-checker .rc-head { display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:.4rem .7rem; margin:0 0 .5rem; } .reality-checker .rc-name { font-family:var(--display); font-size:var(--step-0); font-weight:800; line-height:1.25; letter-spacing:-.01em; margin:0; } .reality-checker .rc-badge { flex:none; font-size:.75rem; font-weight:800; letter-spacing:.03em; text-transform:uppercase; padding:.28rem .6rem; border-radius:999px; background:var(--paper-2); color:var(--ink); } .reality-checker .rc-badge-f5 { background:var(--footer); color:var(--accent-ink); } .reality-checker .rc-badge-f4 { background:var(--sea); color:var(--accent-ink); } .reality-checker .rc-badge-f3 { background:var(--gold-soft); color:var(--gold-ink); } .reality-checker .rc-badge-f2 { background:var(--paper-2); color:var(--ink); } .reality-checker .rc-badge-f1 { background:var(--ok); color:var(--accent-ink); } .reality-checker .rc-tags { display:flex; flex-wrap:wrap; gap:.3rem; margin:0 0 .55rem; max-width:none; } .reality-checker .rc-tag { font-size:.75rem; font-weight:700; letter-spacing:.03em; text-transform:uppercase; color:var(--ink-soft); background:var(--surface-2); border:1px solid var(--line); border-radius:999px; padding:.2rem .55rem; } .reality-checker .rc-tag-mode { color:var(--brand); border-color:var(--brand); background:transparent; } .reality-checker .rc-tag-soft { color:var(--gold-ink); background:var(--gold-soft); border-color:var(--gold-soft); } .reality-checker .rc-reality { margin:0 0 .55rem; font-size:var(--step-0); line-height:1.5; max-width:none; } .reality-checker .rc-line { margin:0 0 .35rem; font-size:var(--step--1); line-height:1.5; color:var(--ink-soft); max-width:none; } .reality-checker .rc-k { font-weight:800; color:var(--ink); } .reality-checker .rc-cta { display:flex; flex-wrap:wrap; align-items:center; gap:.5rem .8rem; margin:.8rem 0 0; padding-top:.7rem; border-top:1px solid var(--line); max-width:none; } .reality-checker .rc-cta-label { flex:1 1 12rem; min-width:0; font-size:var(--step--1); color:var(--ink-soft); } .reality-checker .rc-tour { color:var(--brand); font-weight:700; } .reality-checker .rc-go { flex:none; font-size:var(--step--1); padding:.6rem 1.2rem; min-height:44px; } .reality-checker .rc-empty { margin:0; padding:var(--s3); border-radius:var(--radius-sm); background:var(--paper-2); color:var(--ink); font-weight:600; max-width:none; } .reality-checker .rc-scale { list-style:none; margin:var(--s3) 0 0; padding:var(--s3); background:var(--paper-2); border-radius:var(--radius-sm); font-size:var(--step--1); color:var(--ink-soft); } .reality-checker .rc-scale li { margin:0 0 .3rem; } .reality-checker .rc-scale li:last-child { margin-bottom:0; } .reality-checker .rc-scale-k { font-weight:800; color:var(--ink); } @media (max-width:900px) { .reality-checker .rc-list { grid-template-columns:1fr; } } @media (max-width:560px) { .reality-checker .rc-controls { padding:var(--s2); gap:var(--s3); } .reality-checker .rc-group { flex:1 1 100%; } .reality-checker .rc-reset { width:100%; } .reality-checker .rc-cta { align-items:stretch; } .reality-checker .rc-go { width:100%; } } /* ============================================================================ 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 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, text on band ground (AA needs 4.5 body / 3.0 large + UI): paper #E3EBE1 ink 13.15 ink-soft 6.47 link 6.22 CTA fill 6.75 tint #D3DDD0 ink 11.46 ink-soft 5.64 link 5.42 CTA fill 5.88 edge #F1F5EF ink 14.53 ink-soft 7.15 link 6.87 CTA fill 7.45 brand #C6D4C8 ink 10.42 ink-soft 5.13 link 4.92 CTA fill 5.34 sea #D4CFBF ink 10.28 ink-soft 5.06 link 4.86 CTA fill 5.27 hero #BFCFC2 ink 9.86 ink-soft 4.85 link 4.66 CTA fill 5.06 ink #1B2A20 text 12.32 muted 8.10 link 7.49 card 15.01 hairline 9.59 ========================================================================== */ .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); border-image: repeating-linear-gradient(90deg, var(--band-link) 0 14px, var(--accent) 14px 18px, var(--band-link) 18px 32px) 1; } /* Porphyry red on basalt is below the 3:1 a control boundary needs, so a button sitting straight on the band (not inside a card) carries a light ring. */ .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 ---------------------------------------------------------------- Three 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. */ .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%; } .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; } }