/* ============================================================ Bangkok Aquarium - Phase 3 Design System IDENTITY: "Sunshine Reef" (locked at the Phase C gate, 2026-09-04, per Oleg: "more into turquoise/yellow schema like florida" - replaces the earlier "Lauderdale Twilight" proposal). Icy pale aqua-white ground (morning sea-glass), deep teal-charcoal ink, a true Florida turquoise for links and structural fills, a sunshine-yellow accent reserved for the one CTA (dark ink text on yellow, not white - yellow can't carry white text at AA contrast), a deep ocean-blue for secondary structure (rules/icons/hovers, kept a distinct hue lane from the turquoise brand), warm amber-bronze gold for real ratings only (deliberately duller than the bright CTA yellow so the two never get confused), and dark teal-black night bands (hero, stat grid) with warm sand-cream text so the page still carries a hit of sunshine after dark. Checked against every live/building dinner-cruise sibling for collision (Miami: champagne cream/sunset-red/coral; San Diego: warm ivory/near-black midnight-teal/amber; Boston: warm parchment/midnight-navy/brass) - none use turquoise or a bright yellow CTA. Serif display over a plain sans body (menu-card register), uppercase letter-spaced sans for eyebrows, category links and buttons. Flat, hairline-bordered cards, 4px radii, no shadows. Split hero with the booking panel above the fold; single-bar centered-brand nav. Mobile-first, zero heavy deps, system fonts (no webfont, LCP protected). ============================================================ */ /* ---- COLOR TOKENS (light, purposeful) ---- */ :root { /* ---- Palette "Deep Reef" (site.config.md, locked 2026-09-05 at the Phase C gate). ---- */ --ink: #14263A; /* primary text: deep navy (14.0:1 on --paper) */ --ink-soft: #4A5C70; /* secondary text: slate blue (6.2:1 on --paper) */ --paper: #FAF4E9; /* page ground: warm shell sand */ --paper-2: #F1E7D6; /* raised panels, section bands, table headers */ --surface: #ffffff; /* cards */ --surface-2: #FDF9F1; /* inputs, zebra rows */ --line: #E0D2BC; /* hairline borders on light */ --brand: #1B5E8C; /* ocean blue: links (underlined), structural fills (6.3:1) */ --brand-deep: #14496D; /* deeper ocean blue: btn-brand hover */ --accent: #C43E22; /* coral red - CTA (WHITE text, 5.2:1) ONLY */ --accent-deep:#A63219; /* coral hover */ --accent-ink: #FFFFFF; /* white text on --accent - dark ink would fail on this red */ --sea: #0E4A63; /* deep teal-blue - secondary structure: rules, icons, hovers */ --sea-deep: #0A3A4E; /* darker teal-blue for hover/active states */ --gold: #A8721F; /* amber-bronze - real ratings only, distinct from the coral CTA */ --gold-soft: #F6E3C2; /* gold wash for badge backgrounds (DARK text on top) */ --gold-ink: #5A3D0F; /* text colour that sits on --gold-soft */ --gold-bright:#E0A94A; /* brighter gold for eyebrows, rules and numbers on night bands */ --slate: #5C7A75; /* muted teal-grey: sparing tertiary tint/borders */ --night: #0A2A27; /* night reef: hero base, footer, dark bands (dark teal, not navy) */ --night-2: #123B37; /* raised surface on night */ --night-ink: #F7EFD9; /* warm sand-cream text on night bands - a hit of sunshine after dark */ --footer: #0A2A27; /* footer fill (same dark teal) */ --ok: #2E7D5B; --warn: #9A5A1E; /* ---- TYPE - high-contrast serif display (dinner-menu register) over a plain sans body. System stacks, no webfont (protects LCP). ---- */ /* Display stack, reset 2026-09-05 (Oleg: "font is weird"). The donor led with Didot and Bodoni 72: ultra-high-contrast Mac-only display faces whose hairline strokes read thin and odd at heading sizes, and which fall back to something completely different off macOS, so the site looked like two different brands depending on the machine. Georgia-first is warm, universally installed and renders identically everywhere; the remaining faces are same-flavour fallbacks, not a different register. */ --display: Georgia, "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", "Times New Roman", serif; --body: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "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.5rem, 1.3rem + 1vw, 2.2rem); --step-3: clamp(1.95rem, 1.55rem + 1.9vw, 3.2rem); --step-4: clamp(2.5rem, 1.9rem + 3.2vw, 4.6rem); /* spacing scale */ --s1:.4rem; --s2:.7rem; --s3:1.1rem; --s4:1.7rem; --s5:2.6rem; --s6:4rem; --s7:6rem; --maxw: 72rem; /* flat, hairline-bordered surfaces: menu-card corners, no shadows */ --radius: 4px; --radius-sm: 3px; --shadow: none; } /* ---- 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: -.01em; font-weight: 700; margin: 0 0 var(--s3); color: var(--ink); } h3 { font-family: var(--display); line-height: 1.2; letter-spacing: 0; 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; } /* ---- FULL-BLEED BANDS on a .section.wrap (keeps the 4.5 section convention): the background is painted edge to edge with a box-shadow and clipped to the section's own height. ---- */ .section.band-night, .section.band-linen { padding-block: var(--s6); margin-top: var(--s5); clip-path: inset(0 -100vmax); } .section.band-night { background: var(--night); box-shadow: 0 0 0 100vmax var(--night); color: var(--night-ink); } .section.band-linen { background: var(--paper-2); box-shadow: 0 0 0 100vmax var(--paper-2); } .section.band-night h2, .section.band-night h3 { color: #fff; } .section.band-night p { color: var(--night-ink); } .section.band-night a { color: var(--gold-bright); } /* ---- CTA ---- */ .btn { display:inline-flex; align-items:center; gap:.5rem; justify-content:center; font-family: var(--body); font-weight:800; font-size: .84rem; letter-spacing:.08em; text-transform:uppercase; padding: .9rem 1.5rem; border-radius: var(--radius); text-decoration:none; border:0; cursor:pointer; min-height: 48px; transition: transform .08s ease, background .15s ease, border-color .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:1.5px solid var(--ink); } .btn-ghost:hover { border-color: var(--brand); color: var(--brand); } /* ---- HEADER / NAV: centered-brand (V3.1 Design Director, 2026-09-03). One bar: the serif wordmark in the middle, the site's cruise groups on its left, the site pages on its right, the CTA as the far-right item (the menu-card composition). Under 1000px both link groups collapse into one dropdown driven by base.html's existing .nav-toggle / #nav-links data-open script; the toggle sits left, the CTA right. ---- */ /* 2026-09-05: was rgba(251,245,234,.94) -- the DONOR's champagne-cream paper, left behind when the palette was reset to "Sunshine Reef". It sat as a warm cream band on top of this site's icy aqua-white ground on every page. Now derived from this site's own --paper. */ .site-header { position: sticky; top:0; z-index:40; background: rgba(243,251,250,.94); backdrop-filter: blur(10px); border-bottom:1px solid var(--line); } .nav { display:grid; grid-template-columns: 1fr auto 1fr auto; grid-template-areas: "left brand right cta"; align-items:center; column-gap: var(--s4); padding-block:.75rem; } /* 2026-09-05 (site-recheck f-040/041/050/051/052, mech+vision agreement): a 4-word brand phrase ("Bangkok Aquarium") with white-space:nowrap and no min-width in a CSS grid track never shrinks below its intrinsic width, so it either overflowed the 390px viewport (grid forced wider than .wrap, scrollWidth > innerWidth) or, at desktop widths where .wrap still caps at var(--maxw)=72rem, overlapped the right nav group (the brand mark running into the page links). min-width:0 lets the grid track actually shrink; a hard max-width plus overflow:hidden/ellipsis is the backstop so the header can never force page-level overflow again, on this site or a future one whose EMD brand phrase is this long. */ /* 2026-09-05 (Oleg: "logo no need for letters"): the header brand is now the MARK ONLY, so all of the wordmark-shrinking machinery above is gone with it -- a 40px square can never force page overflow or collide with the nav groups at any width. */ /* SCOPED to .site-header on purpose: the FOOTER reuses .brand for the sitewide brand-anchor link ("Bangkok Aquarium" -> /), which is a standing requirement and must keep its wordmark and normal text rendering. An unscoped rule here silently collapsed it. */ .site-header .brand { grid-area:brand; justify-self:center; min-width:0; display:inline-flex; align-items:center; text-decoration:none; line-height:0; } .site-header .brand:focus-visible { outline:3px solid var(--accent); outline-offset:3px; border-radius:50%; } .brand-logo { width:40px; height:40px; display:block; } @media (max-width: 360px) { .brand-logo { width:34px; height:34px; } } .brand b { color: var(--accent); font-weight:700; } .nav-cta { grid-area:cta; min-height:40px; padding:.55rem 1rem; font-size:.74rem; } .nav-links { display:contents; } .nav-group { display:flex; gap:1.4rem; align-items:center; list-style:none; margin:0; padding:0; } .nav-group--left { grid-area:left; justify-content:flex-end; } .nav-group--right { grid-area:right; justify-content:flex-start; } .nav-group a { display:inline-block; padding:.3rem 0; font-family:var(--body); font-weight:800; font-size:.74rem; letter-spacing:.12em; text-transform:uppercase; color:var(--ink); text-decoration:none; border-bottom:2px solid transparent; } .nav-group--right a { color:var(--ink-soft); font-weight:700; } .nav-group a:hover { color:var(--brand); border-bottom-color:var(--accent); } .nav-group .nav-cta-mobile { display:none; } .nav-links a.btn-brand, .nav-links a.btn-primary { color:#fff; } .nav-toggle { display:none; grid-area:toggle; background:none; border:0; min-height:48px; min-width:48px; cursor:pointer; color:var(--ink); padding:0; place-items:center; } .nav-toggle svg { width:26px; height:26px; } @media (max-width: 1000px) { .nav { grid-template-columns: auto 1fr auto; grid-template-areas: "toggle brand cta"; padding-block:.5rem; column-gap:var(--s2); } .nav-toggle { display:grid; } .nav-links { display:none; position:absolute; inset:100% 0 auto 0; flex-direction:column; background:var(--paper-2); border-bottom:1px solid var(--line); padding:1rem; gap:1rem; } .nav-links[data-open="true"] { display:flex; } .nav-group { flex-direction:column; align-items:flex-start; justify-content:flex-start; gap:.3rem; } .nav-group a { padding:.45rem 0; border-bottom:0; font-size:.82rem; } .nav-group--right { border-top:1px solid var(--line); padding-top:.9rem; width:100%; } } @media (max-width: 520px) { .nav-cta { display:none; } .nav-group .nav-cta-mobile { display:block; width:100%; margin-top:.4rem; } .nav-group .nav-cta-mobile .btn { width:100%; } } /* ---- BREADCRUMB ---- */ .crumbs { font-size: var(--step--1); color: var(--ink-soft); padding-block: var(--s3); } .crumbs a { color: var(--ink-soft); } .crumbs span[aria-current] { color: var(--ink); font-weight:600; } /* ---- HERO: DUSK SPLIT (split-hero-booking / hero-split-media-panel, approved blueprint 2026-09-03). Night-navy band. Left: eyebrow, H1, lede, proof, secondary actions. Right: a white panel that stacks the hero image over the compile-emitted booking panel, so the real booking CTA is above the fold. On mobile the H1 column comes first and the panel drops below it. ---- */ .hero-dusk { background: radial-gradient(120% 90% at 12% 0%, #2B2A55 0%, var(--night-2) 45%, var(--night) 100%); color: var(--night-ink); border-bottom: 3px solid var(--accent); } .hero-dusk-inner { display:grid; grid-template-columns: 1.05fr .95fr; gap: var(--s5); align-items:center; padding-block: var(--s6); } .eyebrow { font-family:var(--body); text-transform:uppercase; letter-spacing:.16em; font-size:.74rem; color:var(--gold); font-weight:800; margin-bottom:var(--s2); } .hero-dusk .eyebrow { color: var(--gold-bright); } .hero-dusk h1 { color:#fff; max-width: 14ch; margin-bottom: var(--s3); } .hero-dusk .lede { color: rgba(246,238,220,.84); max-width: 50ch; } .hero-dusk .cta-proof { color: rgba(246,238,220,.92); } .hero-dusk .cta-proof .gold { color: var(--gold-bright); } .hero-actions { display:flex; flex-wrap:wrap; gap: var(--s3); align-items:center; margin-top: var(--s4); } .hero-ghost { color:#fff; border-color: rgba(246,238,220,.55); } .hero-ghost:hover { border-color:#fff; color:#fff; } .hero-link { color: var(--gold-bright); font-weight:600; text-underline-offset:4px; } .hero-panel { background: var(--surface); color: var(--ink); border-radius: var(--radius); overflow:hidden; border:1px solid rgba(246,238,220,.2); } .hero-media { aspect-ratio:16/10; overflow:hidden; background:var(--paper-2); border-radius:var(--radius); } .hero-media img { width:100%; height:100%; object-fit:cover; display:block; } .section-media { aspect-ratio:16/10; overflow:hidden; border-radius:var(--radius); margin: var(--s3) 0 var(--s4); } .section-media img { width:100%; height:100%; object-fit:cover; display:block; } .hero-panel .hero-media { border-radius:0; } .hero-panel .booking-panel { border:0; border-radius:0; box-shadow:none; } @media (max-width: 860px) { .hero-dusk-inner { grid-template-columns:1fr; gap:var(--s4); padding-block: var(--s5); } .hero-dusk h1 { max-width:none; } } @media (max-width: 640px) { .hero-actions .btn { width:100%; } } /* ---- SECTION HEADING RULE: a short coral bar above each section H2 (menu-card rule) ---- */ .section > h2:first-child, .rule-h2 { position:relative; padding-top: var(--s3); border-bottom:0; } .section > h2:first-child::before, .rule-h2::before { content:""; position:absolute; top:0; left:0; width:3rem; height:3px; background: var(--accent); } .section.band-night > h2:first-child::before { background: var(--gold-bright); } .section h2:first-child { margin-top: 0; } /* ---- QUICK ANSWER (answer-first) ---- */ .quick-answer { background: var(--surface); border:1px solid var(--line); border-left:4px solid var(--accent); color: var(--ink); border-radius: var(--radius); padding: var(--s4) var(--s5); margin-top: var(--s3); } .quick-answer p { color:var(--ink); font-size: var(--step-1); max-width: 60ch; margin:0; } .quick-answer p + p { margin-top: var(--s3); font-size: var(--step-0); } .quick-answer .qa-label { font-family:var(--body); text-transform:uppercase; letter-spacing:.16em; font-size:.72rem; color:var(--gold); margin-bottom:var(--s2); font-weight:800; } .quick-answer-box { background:var(--surface); border:1px solid var(--line); border-left:4px solid var(--accent); border-radius:var(--radius); padding:var(--s4); } .quick-answer-box p:first-child { margin-top:0; } .quick-answer-box p:last-child { margin-bottom:0; } /* ---- KEY TAKEAWAYS ---- */ .takeaways-list { list-style:none; margin:0; padding:0; display:grid; gap:.7rem; } .takeaways-list li { position:relative; padding-left:1.6rem; line-height:1.5; max-width:70ch; } .takeaways-list li::before { content:""; position:absolute; left:0; top:.6em; width:.55rem; height:.55rem; background:var(--accent); border-radius:50%; } /* ---- 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(--body); 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; } .product-card .pc-media { background:var(--paper-2); overflow:hidden; } .product-card .pc-media img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; } .product-card .pc-body { padding: var(--s4); display:flex; flex-direction:column; gap:var(--s2); } .pc-tag { align-self:flex-start; background:var(--gold-soft); color:var(--gold-ink); font-weight:700; font-size:.72rem; text-transform:uppercase; letter-spacing:.06em; padding:.25rem .6rem; border-radius:var(--radius-sm); } .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:700; color:var(--ink); } .pc-price small { font-size:var(--step--1); color:var(--ink-soft); font-weight:500; font-family:var(--body); } @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(--body); 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:3px solid var(--ok); } .proscons .cons { border-top:3px 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); } .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:700; 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(--body); 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; } .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): flat, hairline-bordered, vertical image-top cards */ .cards-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s4); } .cards-3 .rcard { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; display:flex; flex-direction:column; } .cards-3 .rcard .rc-media { aspect-ratio:4/3; background:var(--paper-2); } .cards-3 .rcard .rc-media img { width:100%; height:100%; object-fit:cover; } .cards-3 .rcard .rc-body { padding:var(--s3) var(--s4) var(--s4); display:flex; flex-direction:column; gap:var(--s2); flex:1; } .cards-3 .rcard .rc-body .btn { margin-top:auto; } @media (max-width:820px){ .cards-3{ grid-template-columns:1fr; } } /* 2026-09-05 (Oleg: "do two cards horizontally same lane, otherwise no proper image visible"). A 3-column grid holding only TWO cards left each card at a third of the lane with a dead gap on the right, which shrank the 4:3 card image to the point it read as decorative. This site has exactly 1 real tour, so every tour-card grid hits the single-card case. :has() applies the 2-column layout only when the grid really holds exactly two cards, so a 3-card grid elsewhere (and the 1- or 6-card groups on the guides hub) is untouched. Kept inside min-width:821px so it can never outrank the single-column mobile rule above (a :has() selector would otherwise win on specificity, since a media query adds none). */ @media (min-width:821px){ .cards-3:has(> .rcard:nth-child(2):last-child){ grid-template-columns:repeat(2,1fr); } } /* Product card upgrades: "best for" frame, benefit bullets, social proof, popular badge */ .pc-reviews { font-weight:500; color:var(--ink-soft); font-size:var(--step--1); } .pc-bestfor { align-self:flex-start; margin:0; background:var(--gold-soft); color:var(--gold-ink); font-weight:700; font-size:.7rem; text-transform:uppercase; letter-spacing:.05em; padding:.28rem .65rem; border-radius:var(--radius-sm); } .pc-points { list-style:none; padding:0; margin:.15rem 0 0; display:flex; flex-direction:column; gap:.4rem; } .pc-points li { position:relative; padding-left:1.45rem; font-size:var(--step--1); color:var(--ink); line-height:1.4; } .pc-points li::before { content:"✓"; position:absolute; left:0; top:-.02em; color:var(--accent); font-weight:800; } .rc-media, .pc-media { position:relative; } .pc-badge { position:absolute; top:.6rem; left:.6rem; z-index:1; background:var(--gold-soft); color:var(--gold-ink); font-weight:800; font-size:.7rem; text-transform:uppercase; letter-spacing:.05em; padding:.32rem .7rem; border-radius:var(--radius-sm); } .cards-3 .rcard.is-popular, .product-card.is-popular { border-color:var(--accent); border-top:3px solid var(--accent); } /* ---- CTA BANNER (night band, gold rule) ---- */ .cta-banner { background:linear-gradient(120deg, var(--night-2), var(--night)); border:1px solid var(--night); border-top:3px solid var(--gold-bright); 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(246,238,220,.84); 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); } .availability .av-label { font-family:var(--body); 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%; } } /* GetYourGuide live availability widget container (gyg_widget token, guide/blog pages) */ .gyg-avail { margin: var(--s5) 0; border:1px solid var(--line); border-radius:var(--radius); background:var(--surface); padding: var(--s3); max-width:none; } /* ---- FOOTER (the one deepest surface, night bay navy) ---- */ .site-footer { background:var(--footer); color:#D9D3C4; margin-top:var(--s7); padding-block:var(--s6) var(--s4); border-top:3px solid var(--gold-bright); } .footer-grid { display:grid; grid-template-columns:2fr 1fr 1fr; gap:var(--s5); } .site-footer a { color:#EDE6D6; text-decoration:none; } .site-footer a:hover { text-decoration:underline; color:var(--gold-bright); } .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 rgba(246,238,220,.28); border-radius:50%; } .socials a:hover { border-color:var(--gold-bright); color:var(--gold-bright); } .disclosure { font-size:var(--step--1); color:#B7B0A2; border-top:1px solid rgba(246,238,220,.18); 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); } .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); } .author-hook { display:flex; align-items:center; gap:.6rem; font-size:var(--step--1); color:var(--ink-soft); } .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; } .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(--body); font-weight:700; 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): champagne gold + outline so it reads as a secondary lodging action, distinct from the coral 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(--body); font-weight:800; font-size:var(--step--1); line-height:1; padding:.6rem 1.1rem; border-radius:var(--radius); border:1px solid var(--gold); color:#fff; background:var(--gold); text-decoration:none; white-space:nowrap; } .hotel-cta:hover, .prose a.hotel-cta:hover { background:var(--gold-ink); border-color:var(--gold-ink); color:#fff; text-decoration:none; } .hotel-row { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:.6rem .9rem; margin:.2rem 0 var(--s3); padding:.7rem .95rem; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-sm); } .hotel-row .hr-name { font-weight:700; color:var(--ink); } .blog-cta { background:var(--paper-2); border:1px solid var(--line); border-left:4px solid var(--accent); border-radius:var(--radius); padding:var(--s4) var(--s5); margin:var(--s6) 0 0; } .blog-cta h2 { margin-top:0; } .blog-cta p { margin-bottom:var(--s3); } .blog-cta-btns { display:flex; gap:.6rem; flex-wrap:wrap; align-items:center; } /* ---- INFOGRAPHIC (data 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:700; 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:var(--radius-sm); 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); 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); } @media (max-width:820px){ .video-grid{ grid-template-columns:1fr; } } /* ---- CONVERSION COMPONENTS (conversion-optimizer skill) ---- */ .btn-xl { font-size: .96rem; padding: 1.05rem 1.9rem; } @media (max-width: 430px) { .btn-xl { font-size: .84rem; 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:700; 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(251,245,234,.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:var(--radius); padding:.5rem .6rem .5rem 1.1rem; } /* 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); padding:.55rem .9rem; } } @media (prefers-reduced-motion: reduce) { .sticky-cta { transition:none; } } /* ---- TESTIMONIALS (real platform 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, "Champagne and Dusk" additions inherited from the structural donor site ============================================================ */ /* ---- CATEGORY GRID (cruise-type hubs on the homepage): flat, hairline, coral left rule ---- */ .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:3px solid var(--accent); 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); transform:translateY(-2px); } .cat-card .cc-name { font-family:var(--display); font-weight:700; font-size:var(--step-1); line-height:1.15; } .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:var(--radius-sm); border:1px solid var(--line); background:var(--paper-2); color:var(--ink); font-size:.72rem; letter-spacing:.03em; text-transform:uppercase; } /* ---- HONESTY CALLOUT (used wherever the site corrects a common claim) ---- */ .honesty { background:var(--surface); border:1px solid var(--line); border-left:5px solid var(--accent); border-radius:var(--radius); padding:var(--s4); margin:var(--s5) 0; } .honesty .h-h { font-family:var(--display); font-weight:700; 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(--accent); border-top:3px solid var(--accent); } .tour-row h3 { margin:0 0 .35rem; font-size:var(--step-1); } .tour-row h3 a { color:var(--ink); text-decoration:none; } .tour-row h3 a:hover { color:var(--brand); } .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:700; font-size:var(--step-1); white-space:nowrap; } .tour-row .tr-price small { display:block; font-family:var(--body); font-size:var(--step--1); font-weight:500; color:var(--ink-soft); white-space:normal; } @media (max-width:760px){ .tour-row { grid-template-columns:1fr; } .tour-row .tr-cta { align-items:stretch; text-align:left; } .tour-row .tr-cta .btn { width:100%; } } /* ============================================================ TOUR-PICKS GRID (depth-cro conversion layer). A 3-card grid dropped into an article body before its FAQ. Whole card converts: image, title and button all carry the sponsored link. ============================================================ */ .tour-picks { background:var(--paper-2); border:1px solid var(--line); border-radius:var(--radius); padding:var(--s4); margin:var(--s5) 0; } .tour-picks .tp-season { font-size:var(--step--1); color:var(--ink-soft); margin:0 0 var(--s3); border-left:3px solid var(--accent); padding-left:.7rem; } .tour-picks .tp-grid { display:grid; gap:var(--s3); grid-template-columns:1fr; } @media (min-width:700px) { .tour-picks .tp-grid { grid-template-columns:repeat(3,1fr); } } .tour-picks .tp-card { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-sm); overflow:hidden; display:flex; flex-direction:column; } .tour-picks .tp-media { display:block; aspect-ratio:4/3; overflow:hidden; } .tour-picks .tp-media img { width:100%; height:100%; object-fit:cover; } .tour-picks .tp-body { padding:var(--s3); display:flex; flex-direction:column; gap:.5rem; flex:1; } .tour-picks .tp-chips { margin:0; display:flex; gap:.35rem; flex-wrap:wrap; } .pc-chip { display:inline-block; font-size:.7rem; font-weight:700; letter-spacing:.02em; padding:.2rem .55rem; border-radius:var(--radius-sm); 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(--brand); text-decoration:underline; } .tour-picks .tp-proof { font-size:var(--step--1); color:var(--ink-soft); margin:0; } .tour-picks .tp-proof .gold { color:var(--gold); font-weight:700; } .tour-picks .tp-proof-none { font-style:italic; } .tour-picks .tp-reassure { margin:0; font-size:.74rem; color:var(--ink-soft); } .tour-picks .tp-body .btn { margin-top:auto; width:100%; white-space:nowrap; font-size:.78rem; 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: section intros span the container, rows + cat cards carry images ---- */ .section.wrap > p { max-width: none; } .tour-row.has-media { grid-template-columns: 220px 1fr auto; } .tour-row .tr-media { display:block; align-self:stretch; } .tour-row .tr-media img { width:100%; height:100%; min-height:150px; object-fit:cover; border-radius:var(--radius-sm); display:block; } @media (max-width: 860px) { .tour-row.has-media { grid-template-columns: 1fr; } .tour-row .tr-media img { min-height:0; max-height:210px; } } .cat-card { padding-top:0; overflow:hidden; } .cat-card .cc-media { display:block; margin:0 calc(-1 * var(--s4)) var(--s2); } .cat-card .cc-media img { width:100%; height:130px; object-fit:cover; display:block; } /* homepage per-category anchor blocks (inside the group sections) */ .cat-block { margin-top: var(--s5); scroll-margin-top: 5.5rem; } .cat-block > h3 { margin-bottom: var(--s1); } .cat-block > p.small { margin-top: 0; color: var(--ink-soft); } section[id] { scroll-margin-top: 5.5rem; } /* 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 { aspect-ratio:auto; } .tour-hero .hero-media img { width: 100%; height: auto; border-radius: var(--radius); } .booking-panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--s4); } .booking-panel h1 { font-size: var(--step-2); margin: 0 0 var(--s2); line-height: 1.15; } .booking-panel .bp-title { font-family: var(--display); font-weight: 700; 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; } /* ============================================================ V3.1 DESIGN DIRECTOR + homepage blueprint components (04-block-library.md 4.5), 2026-09-03. split-hero-booking homepage; destination modules: operator-comparison (#quick-comparison) and the season/storm-window calendar (#season). See research/design-blueprint.json. ============================================================ */ /* ---- RESPONSIVE COMPARISON TABLE ("table-card-hybrid" archetype): zebra rows and no vertical borders on desktop, labeled stacked cards under 768px. CSS-only, no JS. ---- */ .table-hybrid { width:100%; border-collapse:collapse; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; } .table-hybrid th, .table-hybrid td { text-align:left; padding:.8rem .9rem; border-bottom:1px solid var(--line); vertical-align:top; } .table-hybrid thead th { background:var(--paper-2); font-family:var(--body); font-weight:800; color:var(--ink); font-size:.74rem; letter-spacing:.1em; text-transform:uppercase; } .table-hybrid tbody tr:nth-child(even) td { background:var(--surface-2); } .table-hybrid tbody tr:last-child td { border-bottom:0; } .table-hybrid td a { font-weight:700; } @media (max-width:768px) { .table-hybrid thead { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; padding:0; } .table-hybrid, .table-hybrid tbody, .table-hybrid tr, .table-hybrid td { display:block; width:100%; } .table-hybrid { border:0; border-radius:0; background:transparent; } .table-hybrid tr { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); margin-bottom:var(--s3); overflow:hidden; } .table-hybrid tr:last-child { margin-bottom:0; } .table-hybrid td, .table-hybrid tbody tr:nth-child(even) td { background:var(--surface); border-bottom:1px solid var(--line); padding:.6rem .9rem; display:flex; justify-content:space-between; align-items:flex-start; gap:var(--s3); text-align:right; } .table-hybrid td:last-child { border-bottom:0; } .table-hybrid td::before { content:attr(data-label); font-weight:700; color:var(--ink-soft); text-align:left; flex:0 0 auto; } } .checked-date { display:inline-block; font-size:.85rem; font-weight:500; color:var(--ink-soft); font-style:italic; } .compare-intro { max-width: none; color: var(--ink-soft); } .compare-table td:first-child a { color: var(--brand); } /* ---- FEATURED-TOUR SPOTLIGHT: text-led card on the linen band, facts list beside the copy ---- */ .featured-tour-card { display:grid; grid-template-columns:1.35fr .85fr; gap:var(--s5); align-items:start; background:var(--surface); border:1px solid var(--line); border-top:3px solid var(--accent); border-radius:var(--radius); padding:var(--s5); } .featured-tour-card .ft-badge { display:inline-block; background:var(--gold-soft); color:var(--gold-ink); font-weight:800; font-size:.7rem; text-transform:uppercase; letter-spacing:.08em; padding:.32rem .7rem; border-radius:var(--radius-sm); margin-bottom:.7rem; } .featured-tour-card h3 { font-size: var(--step-2); } .featured-tour-card .ft-actions { display:flex; flex-wrap:wrap; gap:.7rem; margin: var(--s3) 0 0; } .ft-facts { list-style:none; margin:0; padding:0; border-left:1px solid var(--line); padding-left:var(--s4); display:grid; gap:.8rem; align-self:stretch; } .ft-facts li { display:grid; gap:.15rem; } .ft-facts .ff-k { font-size:.7rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-soft); } .ft-facts .ff-v { font-weight:600; color:var(--ink); } @media (max-width:760px){ .featured-tour-card { grid-template-columns:1fr; padding:var(--s4); } .ft-facts { border-left:0; padding-left:0; border-top:1px solid var(--line); padding-top:var(--s3); } .featured-tour-card .ft-actions .btn { width:100%; } } /* ---- DESTINATION STAT GRID ("What Makes ... ") on the night band: number tiles, no icons ---- */ .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-radius:var(--radius); padding:var(--s4); text-align:left; } .stat-tile .st-num { display:block; font-family:var(--display); font-weight:700; font-size:var(--step-3); line-height:1; color:var(--brand); margin-bottom:.5rem; } .stat-tile .st-label { display:block; font-size:var(--step--1); color:var(--ink-soft); line-height:1.45; } .band-night .stat-tile { background:rgba(255,255,255,.04); border-color:rgba(246,238,220,.2); } .band-night .stat-tile .st-num { color:var(--gold-bright); } .band-night .stat-tile .st-label { color:rgba(246,238,220,.82); } @media (max-width:760px){ .stat-grid{ grid-template-columns:repeat(2,1fr); } } @media (max-width:480px){ .stat-grid{ grid-template-columns:1fr; } } /* Complete-Guide Zone divider. */ .guide-zone-intro { max-width:70ch; } /* ---- SEASON / STORM-WINDOW CALENDAR: hand-authored CSS timeline against the calendar year ---- */ .season-timeline { display:grid; gap: var(--s3); margin: var(--s4) 0 var(--s2); } .season-timeline .st-row { display:grid; grid-template-columns: 15rem 1fr; gap: var(--s3); align-items:center; } .season-timeline .st-label { font-weight:700; color: var(--ink); font-size: var(--step--1); } .season-timeline .st-track { position:relative; height: 1.6rem; background: var(--paper-2); border-radius: var(--radius-sm); overflow:hidden; border:1px solid var(--line); } .season-timeline .st-bar { position:absolute; top:0; bottom:0; background: var(--sea); border-radius: var(--radius-sm); } .season-timeline .st-bar.is-yearround { background: var(--sea); opacity:.55; } .season-timeline .st-bar.is-storm { background: var(--accent); opacity:.85; } .season-timeline .st-months { display:grid; grid-template-columns: 15rem 1fr; gap: var(--s3); } .season-timeline .st-scale { display:flex; justify-content:space-between; font-size: .74rem; color: var(--ink-soft); text-transform:uppercase; letter-spacing:.06em; } @media (max-width:620px) { .season-timeline .st-row, .season-timeline .st-months { grid-template-columns: 1fr; } .season-timeline .st-label { margin-bottom: .1rem; } } /* ---- MAP SECTION: real Google Maps embed + hand-authored SVG pin schematic side by side ---- */ .spot-map-wrap { display:grid; grid-template-columns:1fr 1fr; gap:var(--s4); align-items:start; margin-top:var(--s3); } .spot-map-wrap .map-embed { border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; aspect-ratio:4/3; } .spot-map-wrap .map-embed iframe { width:100%; height:100%; border:0; display:block; } .spot-map-wrap .map-schematic { border:1px solid var(--line); border-radius:var(--radius); background:var(--surface); padding:var(--s3); } .spot-map-wrap .map-schematic svg { width:100%; height:auto; display:block; } .map-schematic-note { font-size:var(--step--1); color:var(--ink-soft); margin-top:.5rem; } @media (max-width:820px){ .spot-map-wrap{ grid-template-columns:1fr; } } /* ---- FULL TESTIMONIALS: individual real quotes on the linen band ---- */ .testimonials-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:var(--s4); } .testimonial-card { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:var(--s4); } .testimonial-card .tc-stars { color:var(--gold); letter-spacing:.1em; margin-bottom:.5rem; } .testimonial-card blockquote { margin:0 0 .6rem; font-family:var(--display); font-size:var(--step-1); line-height:1.4; max-width:none; } .testimonial-card .tc-attr { font-size:var(--step--1); color:var(--ink-soft); font-weight:600; margin:0; } .testimonials-disclaimer { font-size:var(--step--1); color:var(--ink-soft); margin-top:var(--s3); max-width:none; } @media (max-width:680px){ .testimonials-grid{ grid-template-columns:1fr; } } /* ---- CATEGORIZED "ANSWERED" GUIDES/BLOG GRID ---- */ .answered-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:var(--s4); margin-top:var(--s3); } .answered-group h3 { font-size:var(--step-0); font-family:var(--body); font-weight:800; letter-spacing:.1em; text-transform:uppercase; margin:0 0 .6rem; padding-bottom:.4rem; border-bottom:1px solid var(--line); } .answered-group ul { list-style:none; margin:0; padding:0; display:grid; gap:.45rem; } .answered-group li { display:flex; gap:.45rem; align-items:baseline; font-size:var(--step--1); line-height:1.35; } .answered-group li a { color:var(--ink); text-decoration:underline; text-decoration-color:var(--line); text-underline-offset:.2em; } .answered-group li a:hover { text-decoration-color:currentColor; color:var(--brand); } .answered-group .ag-kind { font-family:var(--body); font-size:.72rem; 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; } } .pending-line { font-size:var(--step--1); color:var(--ink-soft); margin-top:var(--s3); font-style:italic; } /* ---- Hand-drawn icons + yes/no glyphs (inclusions matrix) ---- */ .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; } .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(23,93,114,.14); color:var(--sea); } .glyph.no { background:rgba(11,125,121,.10); color:var(--brand); } /* ---- WHERE TO STAY: hotel picks ---- */ .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; } } /* Editorial section photo break (text-heavy sections). */ .section-img { width: 100%; max-width: 780px; border-radius: var(--radius); overflow: hidden; margin: var(--s3) 0 var(--s4); border:1px solid var(--line); } .section-img img { width: 100%; height: auto; aspect-ratio: 3/2; object-fit: cover; display: block; } /* ---- PLACEHOLDER SKIN (skeleton only): every .tbd element is unmistakable on screen and must be replaced by the homepage copy pass before publishing. Delete this block once no .tbd remains. ---- */ .tbd { outline: 2px dashed var(--accent); outline-offset: 3px; background: rgba(194,75,46,.06); color: var(--ink-soft); font-style: italic; } .tbd::before { content:"Placeholder"; font-style:normal; font-family:var(--body); font-size:.62rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:#fff; background:var(--accent); padding:.12rem .4rem; margin-right:.5rem; border-radius:2px; vertical-align:middle; } .band-night .tbd, .hero-dusk .tbd { color: var(--night-ink); } /* ============================================================================ SINGLE-PRODUCT ATTRACTION LAYER (rules 26/27/30-34 by substitution) Styles for the blocks compile.mjs renders from zones.json / shows.json / visit-facts.json / places.json: the photo mosaic, the zone explorer, the feeding planner, the visit planner, the price comparison and the spot map. Palette tokens only, no raw hexes except the two translucent scrims that need an alpha channel. Every control clears a 44px tap target and nothing here is allowed to push the page wider than its viewport at 390px. ============================================================================ */ /* A revealed/hidden alternative in an interactive block must lose to nothing. */ [hidden] { display: none !important; } /* ---- Homepage blueprint classes the money page asks for ---- */ .hero-copy { min-width: 0; } .hero-sub { color: rgba(247,239,217,.86); font-size: var(--step-1); max-width: 46ch; } /* Rule 31: the answer paragraph is BODY COPY carrying weight, never a heading. It computes to --step-0 while the section H2 above it sits at --step-3. */ .lead-answer { font-weight: 700; font-size: var(--step-0); color: var(--ink); max-width: 62ch; } ul.takeaways { list-style: none; margin: 0; padding: 0; display: grid; gap: .7rem; } ul.takeaways li { position: relative; padding-left: 1.6rem; line-height: 1.5; max-width: 70ch; } ul.takeaways li::before { content: ""; position: absolute; left: 0; top: .6em; width: .55rem; height: .55rem; background: var(--accent); border-radius: 50%; } .op-quote { margin: var(--s4) 0 0; padding: var(--s3) var(--s4); background: var(--surface); border: 1px solid var(--line); border-left: 4px solid var(--brand); border-radius: var(--radius); } .op-quote p { font-family: var(--display); font-size: var(--step-1); line-height: 1.4; color: var(--ink); margin: 0 0 .5rem; max-width: 58ch; } .op-quote cite { font-style: normal; font-size: var(--step--1); color: var(--ink-soft); font-weight: 600; } .closing-inner { background: var(--paper-2); border: 1px solid var(--line); border-top: 3px solid var(--accent); border-radius: var(--radius); padding: var(--s5); } .closing-inner > p { max-width: 62ch; } /* ---- Rule 30: count-aware card grids. This site ships ONE product, and a lone card stretched across a three-column track reads like a bug. ---- */ .cards-3.cards-n1 { grid-template-columns: 1fr; max-width: 34rem; margin-inline: auto; } .cards-3.cards-n2 { grid-template-columns: repeat(2, 1fr); } @media (max-width: 820px) { .cards-3.cards-n2 { grid-template-columns: 1fr; } } /* ---- Rule 26 stat tiles: the optional third line carries a data figure ---- */ .stat-tile .st-note { display: block; margin-top: .45rem; font-size: var(--step--1); color: var(--ink-soft); line-height: 1.4; } .band-night .stat-tile .st-note { color: rgba(247,239,217,.66); } /* ---- Rule 27: price comparison + the feeding schedule ---- */ .table-hybrid caption, .feed-table caption { caption-side: top; text-align: left; font-family: var(--display); font-weight: 700; font-size: var(--step-0); color: var(--ink); padding: 0 0 .6rem; } .table-hybrid thead th { font-family: var(--display); letter-spacing: .06em; } .pct-verdict { max-width: 66ch; font-weight: 600; } .pct-note { font-size: var(--step--1); color: var(--ink-soft); max-width: 78ch; margin-top: var(--s3); } .price-compare td:first-child { white-space: nowrap; } .price-compare .num { text-align: right; } @media (max-width: 768px) { .price-compare td:first-child, .price-compare .num { white-space: normal; text-align: right; } } .feed-table { width: 100%; border-collapse: collapse; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; } .feed-table th, .feed-table td { text-align: left; padding: .8rem .9rem; border-bottom: 1px solid var(--line); vertical-align: top; } .feed-table thead th { background: var(--paper-2); font-family: var(--display); font-weight: 700; color: var(--ink); font-size: .8rem; letter-spacing: .06em; text-transform: uppercase; } .feed-table tbody tr:nth-child(even) td { background: var(--surface-2); } .feed-table tbody tr:last-child td { border-bottom: 0; } .feed-table .num { text-align: right; font-variant-numeric: tabular-nums; font-weight: 700; white-space: nowrap; } .feed-table tr[data-state="missed"] td, .feed-table tr[data-state="off"] td { color: var(--ink-soft); } .feed-table tr[data-state="yes"] .fp-state { color: var(--ok); font-weight: 700; } .feed-table tr[data-state="off"] .fp-state { font-style: italic; } /* ---- Photo mosaic (rule 32 substitution: one tile per ZONE) ---- */ .photo-mosaic { display: grid; gap: .5rem; grid-template-columns: repeat(2, 1fr); margin-top: var(--s4); } .photo-mosaic .pm-tile { position: relative; display: block; overflow: hidden; border-radius: var(--radius); border: 1px solid var(--line); background: var(--paper-2); aspect-ratio: 4 / 3; text-decoration: none; } .photo-mosaic .pm-tile img { width: 100%; height: 100%; object-fit: cover; display: block; } .photo-mosaic .pm-hero { grid-column: span 2; grid-row: span 2; aspect-ratio: auto; } .photo-mosaic .pm-cap { position: absolute; inset: auto 0 0 0; padding: 1.7rem .7rem .55rem; color: #fff; font-family: var(--display); font-weight: 700; font-size: var(--step--1); line-height: 1.15; background: linear-gradient(to top, rgba(10,42,39,.9), rgba(10,42,39,0)); } .photo-mosaic .pm-hero .pm-cap { font-size: var(--step-1); padding-top: 2.6rem; } .photo-mosaic .pm-tile:hover .pm-cap { text-decoration: underline; } /* Phone: two columns and the tail drops away rather than running down the page. */ @media (max-width: 639px) { .photo-mosaic .pm-tile:nth-child(n+8) { display: none; } } @media (min-width: 640px) { .photo-mosaic { grid-template-columns: repeat(3, 1fr); } } @media (min-width: 1000px) { .photo-mosaic { grid-template-columns: repeat(4, 1fr); } .photo-mosaic .pm-wide { grid-column: span 2; } } /* ---- Zone explorer (interactive block c) ---- */ .zone-explorer { margin-top: var(--s4); } .ze-controls { display: flex; flex-wrap: wrap; gap: var(--s3) var(--s4); align-items: flex-start; padding: var(--s3) var(--s4); background: var(--paper-2); border: 1px solid var(--line); border-radius: var(--radius); } .ze-group { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; min-width: 0; } .ze-legend { display: block; width: 100%; font-size: .72rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: .1rem; } .ze-chip-btn { min-height: 44px; padding: .5rem .9rem; border: 1px solid var(--line); background: var(--surface); color: var(--ink); font: inherit; font-size: var(--step--1); font-weight: 600; border-radius: 999px; cursor: pointer; } .ze-chip-btn:hover { border-color: var(--brand); color: var(--brand); } .ze-chip-btn[aria-pressed="true"] { background: var(--brand); border-color: var(--brand); color: #fff; } .ze-select, .fp-select { min-height: 44px; padding: .5rem .7rem; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); color: var(--ink); font: inherit; font-size: var(--step--1); max-width: 100%; } .ze-status, .fp-status, .vp-status { margin: var(--s3) 0; font-size: var(--step--1); font-weight: 700; color: var(--ink-soft); } .ze-grid { display: grid; gap: var(--s3); grid-template-columns: 1fr; } @media (min-width: 620px) { .ze-grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1000px) { .ze-grid { grid-template-columns: repeat(3, 1fr); } } .ze-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--s4); display: flex; flex-direction: column; gap: .45rem; min-width: 0; } .ze-card .ze-order { margin: 0; font-size: .72rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); } .ze-card .ze-order span { color: var(--accent); } .ze-card .ze-name { margin: 0; font-size: var(--step-1); } .ze-card .ze-what { margin: 0; font-size: var(--step--1); max-width: none; } .ze-card .ze-chips { margin: 0; display: flex; flex-wrap: wrap; gap: .3rem; } .ze-chip { display: inline-block; font-size: .75rem; font-weight: 700; padding: .2rem .55rem; border-radius: var(--radius-sm); background: var(--paper-2); color: var(--ink-soft); } .ze-lines { list-style: none; margin: .2rem 0 0; padding: 0; display: grid; gap: .4rem; } .ze-lines li { font-size: var(--step--1); line-height: 1.4; color: var(--ink); } .ze-tag { display: inline-block; font-size: .74rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; padding: .16rem .45rem; border-radius: var(--radius-sm); margin-right: .3rem; } .ze-tag-feed { background: var(--gold-soft); color: var(--gold-ink); } .ze-tag-extra { background: rgba(27,94,140,.12); color: var(--brand-deep); } .ze-kid { margin: auto 0 0; padding-top: .3rem; font-size: .72rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--ok); } .ze-empty { margin-top: var(--s3); padding: var(--s4); background: var(--surface); border: 1px dashed var(--line); border-radius: var(--radius); color: var(--ink-soft); } /* ---- Feeding planner (interactive block b) ---- */ .feed-planner { margin-top: var(--s4); } .fp-included { font-size: var(--step--1); color: var(--ink-soft); max-width: 70ch; } .fp-controls { display: flex; flex-wrap: wrap; gap: var(--s3) var(--s4); padding: var(--s3) var(--s4); background: var(--paper-2); border: 1px solid var(--line); border-radius: var(--radius); } .fp-field { display: flex; flex-direction: column; gap: .25rem; min-width: 0; flex: 1 1 12rem; } .fp-field label { font-size: .72rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); } .fp-clash { margin-top: var(--s4); background: var(--surface); border: 1px solid var(--line); border-left: 5px solid var(--accent); border-radius: var(--radius); padding: var(--s3) var(--s4); } .fp-clash .fp-clash-h { font-family: var(--display); font-weight: 700; font-size: var(--step-1); margin: 0 0 .4rem; color: var(--ink); max-width: none; } .fp-clash p { margin: 0; max-width: 72ch; } /* ---- Visit planner (interactive block a, the rule-34 substitute) ---- */ .visit-planner { margin-top: var(--s4); } .vp-q { border: 0; margin: 0 0 var(--s3); padding: 0; min-width: 0; } .vp-q legend { font-family: var(--display); font-weight: 700; font-size: var(--step-1); color: var(--ink); padding: 0; margin-bottom: .5rem; } .vp-opts { display: flex; flex-wrap: wrap; gap: .4rem; } .vp-opt { display: inline-flex; align-items: center; gap: .45rem; min-height: 44px; padding: .5rem .9rem; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); cursor: pointer; font-size: var(--step--1); font-weight: 600; } .vp-opt input { accent-color: var(--brand); width: 1rem; height: 1rem; flex: none; } .vp-opt:hover { border-color: var(--brand); } .vp-opt:has(input:checked) { background: var(--brand); border-color: var(--brand); color: #fff; } .vp-opt:has(input:focus-visible) { outline: 3px solid var(--accent); outline-offset: 2px; } .vp-result { display: grid; gap: var(--s4); margin-top: var(--s3); } @media (min-width: 900px) { .vp-result { grid-template-columns: 1fr 1fr; } .vp-route-wrap { grid-column: 1 / -1; } } .vp-arrivals, .vp-whos, .vp-route-wrap, .vp-addons { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--s4); min-width: 0; } .vp-arrivals { border-top: 3px solid var(--accent); } .vp-when { margin: 0 0 .5rem; display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem; } .vp-when-label { font-size: .72rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); } .vp-when-num { font-family: var(--display); font-weight: 700; font-size: var(--step-3); line-height: 1; color: var(--brand); } .vp-when-body { font-size: var(--step--1); max-width: 60ch; } .vp-when-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .35rem; } .vp-when-list li { font-size: var(--step--1); color: var(--ink); padding-left: 1rem; position: relative; } .vp-when-list li::before { content: ""; position: absolute; left: 0; top: .6em; width: .4rem; height: .4rem; border-radius: 50%; background: var(--accent); } .vp-who p { max-width: 62ch; } .vp-who p:last-child { margin-bottom: 0; } .vp-who-quote { font-size: var(--step--1); color: var(--ink-soft); border-left: 3px solid var(--line); padding-left: .8rem; } .vp-route-head, .vp-addon-head { font-family: var(--display); font-weight: 700; font-size: var(--step-1); margin: 0 0 .6rem; color: var(--ink); max-width: none; } .vp-route { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; } @media (min-width: 700px) { .vp-route { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1100px) { .vp-route { grid-template-columns: repeat(3, 1fr); } } .vp-stop { display: flex; align-items: center; gap: .6rem; padding: .5rem .7rem; background: var(--paper-2); border: 1px solid var(--line); border-radius: var(--radius-sm); min-width: 0; } .vp-stop-n { flex: none; width: 1.7rem; height: 1.7rem; display: grid; place-items: center; border-radius: 50%; background: var(--surface); border: 1px solid var(--line); font-size: .74rem; font-weight: 800; color: var(--ink-soft); } .vp-stop-name { font-size: var(--step--1); font-weight: 600; min-width: 0; } .vp-stop-badge { display: none; margin-left: auto; flex: none; font-size: .74rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--accent); } .vp-stop[data-priority="1"] { border-color: var(--accent); background: var(--surface); } .vp-stop[data-priority="1"] .vp-stop-badge { display: inline; } .vp-route-note { font-size: var(--step--1); color: var(--ink-soft); margin: var(--s3) 0 0; max-width: 72ch; } .vp-addon-list { list-style: none; margin: 0 0 var(--s3); padding: 0; display: grid; gap: .4rem; } .vp-addon-list li { font-size: var(--step--1); line-height: 1.4; } .vp-addon-price, .vp-addon-note { font-size: var(--step--1); color: var(--ink-soft); max-width: 62ch; } .vp-addon-note { border-left: 3px solid var(--line); padding-left: .8rem; margin-bottom: 0; } /* The planner sits on the linen band, so its panels lift off it rather than blend in. */ .band-linen .vp-arrivals, .band-linen .vp-whos, .band-linen .vp-route-wrap, .band-linen .vp-addons { background: var(--surface); } .band-linen .vp-stop { background: var(--paper-2); } /* ---- Spot map: real embed beside the hand-authored schematic. The SVG carries NO