/* ============================================================ Osaka Aquarium - Phase D1 Design System IDENTITY: "Kuroshio" (research/layout-approval.md section 4, approved by Oleg at the Phase C gate 2026-09-07). A LIGHT-GROUND site: the subject is a daylight aquarium on Osaka Bay, so the page ground is a pale glacial blue (#E6EDF1), text is deep-sea navy (#0B2A3A), section bands step down through a tint (#DCE6EC) and a deeper wash, and the one booking colour is a coral red echoing Kaiyukan's own red-and-blue facade. Checked against the portfolio before proposing: no other site uses a blue ground, and none of these values is in use (103 sites sat on pure white, 47 on one cream). CONTRAST, recomputed for this palette (WCAG 2.1 relative luminance, AA floor 4.5 for body): ink #0B2A3A on paper #E6EDF1 ............ 12.6:1 ink on tint #DCE6EC ..................... 11.8:1 ink on wash #CFDDE6 ..................... 10.8:1 ink on edge #F2F7FA ..................... 13.8:1 ink-soft #3B5B6B on paper ............... 6.1:1 (5.2:1 on the wash, the darkest light band) link/accent #B32E23 on paper ............ 5.3:1 (4.5:1 on the wash) white on the accent fill #B32E23 ........ 6.3:1 brand fill #17546B, white text .......... 8.3:1 gold #8A4F05 (stars, stat numbers) ...... 5.5:1 INK-DARK INVERSE BAND, which carries its own link and CTA colours: ink-on-dark #EAF2F6 on #0B2A3A .......... 13.2:1 soft-on-dark #A9C4CE on #0B2A3A ......... 8.2:1 link-on-dark #F2A08F on #0B2A3A ......... 7.3:1 CTA-on-dark: #F2A08F fill, #0B2A3A text . 7.3:1 against both the band and its own fill Soft 12px radii. Mobile-first, zero heavy deps, system fonts. ============================================================ */ :root { /* ---- Palette "Kuroshio" ---- */ /* text */ --ink: #0B2A3A; /* deep-sea navy: primary text (12.6:1 on --paper) */ --ink-soft: #3B5B6B; /* secondary text (6.1:1 on --paper) */ /* grounds and surfaces (light) */ --paper: #E6EDF1; /* page ground: pale glacial blue */ --paper-2: #D2E0E9; /* table header tint */ --surface: #F4F8FB; /* cards, panels */ --surface-2: #DCE6EC; /* inputs, zebra rows, chips at rest */ --tint: #DCE6EC; /* SECTION BAND: one step down from the ground */ --wash: #CFDDE6; /* SECTION BAND: the deeper glacial wash */ --edge: #F2F7FA; /* SECTION BAND: lifted, with a hairline top and bottom */ --deep: #0B2A3A; /* the ink-dark inverse band */ --line: #93AAB9; /* hairline borders */ --line-soft: #BACCD8; /* quieter divider inside a card */ /* INK-DARK inverse band (light text on navy, its own link + CTA below). The donor's inv-* token names are kept so any article markup carried over still resolves; on a light site the inverse band is the dark one. */ --inv: #0B2A3A; /* inverse band ground */ --inv-2: #143B4E; /* inverse table header tint */ --inv-zebra: #10333F; /* inverse zebra row */ --inv-card: #143B4E; /* card on the inverse band */ --inv-line: #2E5D73; --inv-ink: #EAF2F6; /* text on the inverse band (13.2:1) */ --inv-soft: #A9C4CE; /* secondary text on inverse (8.2:1) */ --inv-link: #F2A08F; /* INVERSE-BAND LINK (7.3:1) */ --inv-cta: #F2A08F; /* INVERSE-BAND CTA fill, navy text (7.3:1) */ --inv-cta-deep:#E58A75; /* its hover */ --inv-cta-ink:#0B2A3A; /* text colour that sits on --inv-cta */ --inv-eyebrow:#F2A08F; /* eyebrow / small caps on inverse */ /* brand + accents */ --brand: #17546B; /* mid harbour blue: structure, icons, rules, secondary links */ --brand-fill: #17546B; /* the same blue as a FILL (btn-brand, skip link), white text 8.3:1 */ --brand-deep: #0F3F51; /* its hover */ --accent: #B32E23; /* CORAL RED. The one booking colour. White text on top (6.3:1). */ --accent-deep:#8F2419; /* CTA hover */ --accent-ink: #FFFFFF; /* text colour that sits on --accent */ --sea: #17546B; /* structural accent: section rules, list ticks, icon strokes */ --sea-deep: #0F3F51; --gold: #8A4F05; /* real star ratings, stat numbers, proof figures (5.5:1) */ --gold-soft: #F6E7CF; /* badge ground on light (DARK gold ink on top) */ --gold-ink: #6B3D04; /* text colour that sits on --gold-soft */ --link: #B32E23; /* body link on every light band (5.3:1 on --paper) */ --slate: #6E8896; /* muted structure: disabled marks, closed-zone marks */ --footer: #0B2A3A; /* footer band: the ink-dark surface */ --ok: #17694A; /* included / yes glyph */ --warn: #8A4F05; --alert: #B32E23; /* not-included / no glyph */ --vine: #17546B; /* second accent kept as an alias so donor rules stay in-palette */ --vine-soft: #DCE6EC; --vine-deep: #0F3F51; --band-vine: #CFDDE6; /* alias -> the wash band */ --band-gold: #DCE6EC; /* alias -> the tint band */ --focus: #B32E23; /* focus ring on light */ --focus-inv: #F2A08F; /* focus ring on the ink-dark band */ --ctl-line: #6E8896; /* non-text control boundary, 3.1:1 on --paper */ --star-track: #A9BECB; /* the unfilled half of a star rating */ /* ---- 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. RULE 31: --step-0 is body AND lead copy; --step-1 (h3) starts at 1.3rem and --step-3 (h2) at 1.85rem, so an H2 is never less than 1.7x a paragraph at any viewport (worst case 320px: h2 1.86rem vs p 1.00rem = 1.86x). A bolded lead paragraph is body copy: it is never allowed to climb into the heading range. */ --step--1: clamp(.83rem, .8rem + .15vw, .92rem); --step-0: clamp(1rem, .96rem + .2vw, 1.12rem); --step-1: clamp(1.3rem, 1.16rem + .55vw, 1.6rem); --step-2: clamp(1.5rem, 1.28rem + 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; --radius: 12px; --radius-sm: 8px; --shadow: 0 1px 2px rgba(11,42,58,.10), 0 14px 34px rgba(11,42,58,.12); color-scheme: light; } /* ---- 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; } /* Rule 23: a section's own intro paragraph spans the container instead of being clipped to the 64ch measure. */ .section.wrap > p, .section > .wrap > p { max-width: none; } :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; } /* ---- SECTION BANDS (rule 37). A banded section is an OUTER full-width
with a real `background`, wrapping an INNER
that holds the constrained-width content. NOT the box-shadow-on-.wrap trick: by spec that paints only outside an element's own border-box, so it colours the page gutters and never the area behind the text (confirmed by pixel-sampling on a sibling site). A plain `background` has no such exclusion. FIVE TREATMENTS, and no two adjacent sections may share one: paper the page ground (no band class) tint one step down .band-tint wash the deeper glacial blue .band-wash dark the INK-DARK inverse band .band-dark <- its own link and CTA colours edge lifted, hairline top+bottom .band-edge The donor's class names are kept as aliases so any article markup carried over resolves. ---- */ .section[class*="band-"] { background: var(--band-bg, var(--paper)); } .band-paper, .band-a, .band-base, .band-stage { --band-bg: var(--paper); } .band-tint, .band-b, .band-lift, .band-surface-2, .band-tint-gold { --band-bg: var(--tint); } .band-wash, .band-d, .band-tint-vine { --band-bg: var(--wash); } .band-edge, .band-e, .band-edged { --band-bg: var(--edge); --band-edge: 1px solid var(--line); } /* THE INK-DARK INVERSE BAND. Every token flips inside it, so cards, tables, chips, badges and glyphs re-colour themselves, and it carries its OWN link colour and its OWN CTA fill: the coral-red booking fill would sit at 2.4:1 against navy and could not be read as a button. */ .band-dark, .band-c, .band-inverse, .band-accent, .band-cta { --band-bg: var(--inv); --ink: var(--inv-ink); --ink-soft: var(--inv-soft); --paper: #0B2A3A; --paper-2: var(--inv-2); --surface: var(--inv-card); --surface-2: var(--inv-zebra); --deep: #071E2A; --line: var(--inv-line); --line-soft: #23505F; --link: var(--inv-link); --focus: var(--focus-inv); --brand: var(--inv-link); --brand-fill: #2E5D73; --brand-deep: #23505F; --accent: var(--inv-cta); --accent-deep: var(--inv-cta-deep); --accent-ink: var(--inv-cta-ink); --gold: #F0C48A; --gold-soft: #143B4E; --gold-ink: #F6DCBE; --ok: #7BD3AE; --alert: #F2A08F; --warn: #F0C48A; --slate: #7E9DAB; --shadow: 0 1px 2px rgba(0,0,0,.30), 0 14px 34px rgba(0,0,0,.28); color: var(--inv-ink); color-scheme: dark; } .band-dark h1, .band-dark h2, .band-dark h3, .band-c h1, .band-c h2, .band-c h3, .band-inverse h1, .band-inverse h2, .band-inverse h3 { color: var(--inv-ink); } .band-dark p, .band-c p, .band-inverse p { color: var(--inv-ink); } .band-dark .small, .band-dark small, .band-c .small, .band-inverse .small { color: var(--inv-soft); } .band-dark a:not(.btn), .band-c a:not(.btn), .band-inverse a:not(.btn) { color: var(--inv-link); } .band-dark .rule-h2, .band-c .rule-h2, .band-inverse .rule-h2 { border-bottom-color: var(--inv-link); } .band-dark .btn-primary, .band-c .btn-primary, .band-inverse .btn-primary { background: var(--inv-cta); color: var(--inv-cta-ink); } .band-dark .btn-primary:hover, .band-c .btn-primary:hover, .band-inverse .btn-primary:hover { background: var(--inv-cta-deep); color: var(--inv-cta-ink); } .band-dark .btn-ghost, .band-c .btn-ghost { color: var(--inv-ink); border-color: var(--inv-line); } .band-dark img, .band-c img, .band-inverse img { background: var(--inv-2); } /* RULE 31: a bolded lead paragraph is BODY COPY. It stays at --step-0 while an H2 sits at --step-3, which is never less than 1.7x it at any viewport (worst case 320px: 1.85 vs 1.00). It is a

; it is never allowed to be an h3 or an h4. */ .lead-p { font-size: var(--step-0); font-weight: 700; line-height: 1.55; max-width: 62ch; } .section.wrap > .lead-p, .section > .wrap > .lead-p { max-width: 62ch; } /* ---- SECTION FIGURE (2026-09-06, Oleg: every non-interactive homepage section gets an image). A wide, shallow band under the section heading: enough to break up the text without pushing the section's real content (cards, tables, stat tiles) below the fold. Interactive and embedded blocks deliberately have none. ---- */ .section-figure { margin: 0 0 var(--s4); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); background: var(--paper-2); } .section-figure img { width: 100%; height: clamp(160px, 22vw, 300px); object-fit: cover; display: block; } /* ---- MOTION (sparing, both purely decorative -- neither ever hides real content, so neither carries any risk to a non-scrolling renderer or crawler: a count-up on clean stat numbers that already show their real final value as static text, and a "you are here" pulse ring on the route-map station pins. Both respect reduced-motion.) ---- */ @media (prefers-reduced-motion: no-preference) { .map-pin.is-city circle.pulse-ring { fill: none; stroke: var(--accent); stroke-width: 2; transform-origin: center; transform-box: fill-box; animation: pin-pulse 2.4s ease-out infinite; } @keyframes pin-pulse { 0% { transform: scale(1); opacity: .65; } 100% { transform: scale(2.6); opacity: 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(230,237,241,.92); /* --paper at 92% */ backdrop-filter: blur(10px); border-bottom:1px solid var(--line); } @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; } .site-header .brand { gap:0; } .site-footer .brand { color:#fff; font-size:var(--step-1); line-height:1.15; } .site-footer .brand:hover { text-decoration:underline; } .brand-logo { width:28px; height:28px; border-radius:7px; display:block; } .brand b { color: var(--accent); } .nav-links { display:flex; gap:1.2rem; align-items:center; list-style:none; margin:0; padding:0; } .nav-links a { color:var(--ink); text-decoration:none; font-weight:600; font-size:var(--step--1); } .nav-links a:hover { color:var(--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:#E3C56C; } @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:.72rem; color:var(--gold); margin-bottom:var(--s2); font-weight:700; } /* ---- KEY FACTS TABLE ---- */ .keyfacts { width:100%; border-collapse:collapse; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; } .keyfacts th, .keyfacts td { text-align:left; padding:.8rem 1rem; border-bottom:1px solid var(--line); vertical-align:top; } .keyfacts th { width:42%; font-family:var(--display); font-weight:700; color:var(--ink); background:var(--paper-2); } .keyfacts tr:last-child th, .keyfacts tr:last-child td { border-bottom:0; } @media (max-width:640px){ .keyfacts { display:block; overflow-x:auto; -webkit-overflow-scrolling:touch; } .keyfacts th { min-width: 9rem; } } /* ---- PRODUCT CARD (money component) ---- */ .product-card { display:grid; grid-template-columns: 1fr 1.2fr; gap:0; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow); } .product-card .pc-media { background:var(--paper-2); overflow:hidden; } .product-card .pc-media img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; } .product-card .pc-body { padding: var(--s4); display:flex; flex-direction:column; gap:var(--s2); } .pc-tag { align-self:flex-start; background:var(--gold-soft); color:var(--gold-ink); font-weight:700; font-size:.72rem; text-transform:uppercase; letter-spacing:.06em; padding:.25rem .6rem; border-radius:999px; } .pc-rating { font-weight:700; color:var(--ink); display:flex; align-items:center; gap:.45rem; flex-wrap:wrap; } .pc-rating .src { font-weight:500; color:var(--ink-soft); font-size:var(--step--1); } /* ---- STAR RATING (dependency-free) - set fill width inline: ratingValue/5*100% ---- */ .stars { position:relative; display:inline-block; vertical-align:middle; line-height:1; white-space:nowrap; font-size:1.05em; } .stars::before { content:"★★★★★"; color:var(--line); letter-spacing:2px; } .stars .stars-fill { position:absolute; top:0; left:0; overflow:hidden; white-space:nowrap; } .stars .stars-fill::before { content:"★★★★★"; color:var(--gold); letter-spacing:2px; } .stars-num { font-weight:700; color:var(--ink); } .trust .stars { font-size:1.15rem; margin-top:.2rem; } .pc-price { font-family:var(--display); font-size:var(--step-2); font-weight:800; color:var(--ink); } .pc-price small { font-size:var(--step--1); color:var(--ink-soft); font-weight:500; } @media (max-width:680px){ .product-card{ grid-template-columns:1fr; } .product-card .pc-media{ aspect-ratio:4/3; } } /* ---- PRICING & INCLUSIONS ---- */ .incl { display:grid; grid-template-columns:1fr 1fr; gap:var(--s4); } .incl ul { list-style:none; padding:0; margin:0; } .incl li { padding:.35rem 0 .35rem 1.6rem; position:relative; } .incl .yes::before { content:"✓"; position:absolute; left:0; color:var(--ok); font-weight:800; } .incl .no::before { content:"✕"; position:absolute; left:0; color:var(--accent); font-weight:800; } @media (max-width:600px){ .incl{ grid-template-columns:1fr; } } /* ---- ITINERARY ---- */ .timeline { list-style:none; margin:0; padding:0; border-left:3px solid var(--line); } .timeline li { position:relative; padding:0 0 var(--s4) var(--s4); } .timeline li::before { content:""; position:absolute; left:-9px; top:4px; width:15px; height:15px; border-radius:50%; background:var(--accent); border:3px solid var(--paper); } .timeline .t { font-family:var(--display); font-weight:700; } /* ---- PROS / CONS ---- */ .proscons { display:grid; grid-template-columns:1fr 1fr; gap:var(--s4); } .proscons .col { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:var(--s4); } .proscons h3 { margin-top:0; } .proscons ul { padding-left:1.1rem; margin:0; } .proscons li { margin-bottom:.5rem; } .proscons .pros { border-top:4px solid var(--ok); } .proscons .cons { border-top:4px solid var(--accent); } @media (max-width:600px){ .proscons{ grid-template-columns:1fr; } } /* ---- AUTHOR EXPERIENCE ---- */ .author-block { background:var(--paper-2); border:1px solid var(--line); border-radius:var(--radius); padding:var(--s5); display:grid; grid-template-columns:auto 1fr; gap:var(--s4); align-items:start; } .author-block img.avatar { width:84px; height:84px; border-radius:50%; object-fit:cover; border:3px solid var(--surface); box-shadow:var(--shadow); } .author-block .updated { font-size:var(--step--1); color:var(--ink-soft); margin-top:var(--s3); } @media (max-width:600px){ .author-block{ grid-template-columns:1fr; } } /* ---- TRUST STRIP ---- */ .trust { display:grid; grid-template-columns:repeat(4,1fr); gap:var(--s3); text-align:center; background:var(--paper-2); border:1px solid var(--line); border-radius:var(--radius); padding:var(--s4); } .trust .num { font-family:var(--display); font-size:var(--step-2); font-weight:800; color:var(--gold); } .trust .lbl { font-size:var(--step--1); color:var(--ink-soft); } @media (max-width:640px){ .trust{ grid-template-columns:repeat(2,1fr); gap:var(--s4); } } /* ---- FAQ (FAQPage) ---- */ .faq details { border:1px solid var(--line); border-radius:var(--radius-sm); background:var(--surface); padding:.4rem 1rem; margin-bottom:.7rem; } .faq summary { font-family:var(--display); font-weight:700; cursor:pointer; padding:.6rem 0; list-style:none; color:var(--ink); } .faq summary::-webkit-details-marker{ display:none; } .faq summary::after { content:"+"; float:right; color:var(--accent); font-weight:800; } .faq details[open] summary::after { content:"−"; } /* ---- RELATED TOURS ---- */ .related { display:grid; grid-template-columns:repeat(2,1fr); gap:var(--s4); } .related .rcard { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow); } .related .rcard .rc-media { aspect-ratio:4/3; background:var(--paper-2); } .related .rcard .rc-media img { width:100%; height:100%; object-fit:cover; } .related .rcard .rc-body { padding:var(--s3) var(--s4); } @media (max-width:600px){ .related{ grid-template-columns:1fr; } } /* 3-up card grid (homepage / hubs) */ .cards-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s4); } .cards-3 .rcard { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow); display:flex; flex-direction:column; } .cards-3 .rcard .rc-media { aspect-ratio:4/3; background:var(--paper-2); } .cards-3 .rcard .rc-media img { width:100%; height:100%; object-fit:cover; } .cards-3 .rcard .rc-body { padding:var(--s3) var(--s4) var(--s4); display:flex; flex-direction:column; gap:var(--s2); flex:1; } .cards-3 .rcard .rc-body .btn { margin-top:auto; } @media (max-width:820px){ .cards-3{ grid-template-columns:1fr; } } /* Product card upgrades: "best for" frame, benefit bullets, social proof, popular badge */ .pc-reviews { font-weight:500; color:var(--ink-soft); font-size:var(--step--1); } .pc-bestfor { align-self:flex-start; margin:0; background:var(--gold-soft); color:var(--gold-ink); font-weight:700; font-size:.7rem; text-transform:uppercase; letter-spacing:.05em; padding:.28rem .65rem; border-radius:999px; } .pc-points { list-style:none; padding:0; margin:.15rem 0 0; display:flex; flex-direction:column; gap:.4rem; } .pc-points li { position:relative; padding-left:1.45rem; font-size:var(--step--1); color:var(--ink); line-height:1.4; } .pc-points li::before { content:"✓"; position:absolute; left:0; top:-.02em; color:var(--accent); font-weight:800; } .rc-media, .pc-media { position:relative; } .pc-badge { position:absolute; top:.6rem; left:.6rem; z-index:1; background:var(--gold-soft); color:var(--gold-ink); font-weight:800; font-size:.7rem; text-transform:uppercase; letter-spacing:.05em; padding:.32rem .7rem; border-radius:999px; box-shadow:var(--shadow); } .cards-3 .rcard.is-popular, .product-card.is-popular { border-color:var(--gold); box-shadow:0 0 0 2px var(--gold), var(--shadow); } /* ---- CTA BANNER ---- */ .cta-banner { background:linear-gradient(135deg,var(--brand-deep),var(--accent-deep)); border:1px solid var(--brand-deep); 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 on the page, below the flooded-stage ground) ---- */ .site-footer { background:var(--footer); color:#B9D2D8; 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:#DDE6DD; 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 #3A4D40; border-radius:50%; } .socials a:hover { border-color:var(--gold); color:var(--gold); } .disclosure { font-size:var(--step--1); color:#B9C4BA; border-top:1px solid #3A4D40; margin-top:var(--s5); padding-top:var(--s3); } .disclosure p { max-width:none; } @media (max-width:740px){ .footer-grid{ grid-template-columns:1fr; gap:var(--s4); } } /* ---- BLOG ---- */ .blog-hero { margin:var(--s5) 0 0; } .blog-hero img { width:100%; height:auto; aspect-ratio:16/9; object-fit:cover; border-radius:var(--radius); box-shadow:var(--shadow); } .blog-post .author-hook { display:flex; align-items:center; gap:.6rem; font-size:var(--step--1); color:var(--ink-soft); margin-top:var(--s3); } .blog-post .author-hook img { width:38px; height:38px; border-radius:50%; object-fit:cover; border:2px solid var(--line); } .prose { margin-top:var(--s5); } .prose > * { max-width:64ch; } .prose h2 { margin-top:var(--s6); } .prose h3 { margin-top:var(--s5); } .prose img { width:100%; max-width:100%; height:auto; border-radius:var(--radius); margin:var(--s4) 0; box-shadow:var(--shadow); } .prose figure { margin:var(--s4) 0; } .prose figcaption { font-size:var(--step--1); color:var(--ink-soft); margin-top:.4rem; } .prose ul, .prose ol { padding-left:1.3rem; } .prose li { margin-bottom:.4rem; } .prose blockquote { margin:var(--s4) 0; padding:.4rem 0 .4rem var(--s4); border-left:4px solid var(--accent); color:var(--ink-soft); font-style:italic; } /* ---- SITEWIDE TABLE STANDARD (Oleg 2026-09-04): header row in paper-2 with the display font, zebra rows, comfortable padding, rounded bordered container (compile.mjs wraps every bare in .table-scroll, which scrolls sideways on phones), and bare numbers / prices right-aligned via class="num" (added at compile time). ---- */ .table-scroll { overflow-x:auto; -webkit-overflow-scrolling:touch; margin:var(--s4) 0; border:1px solid var(--line); border-radius:var(--radius); background:var(--surface); } .table-scroll > table, .prose table { width:100%; min-width:0; border-collapse:collapse; background:var(--surface); margin:0; font-size:var(--step--1); border:0; } table th, table td, .prose th, .prose td { text-align:left; padding:.75rem .95rem; border-bottom:1px solid var(--line); vertical-align:top; line-height:1.45; } table thead th, .prose thead th { background:var(--paper-2); font-family:var(--display); font-weight:700; color:var(--ink); letter-spacing:.01em; } table tbody tr:nth-child(even) > td { background:var(--surface-2); } table tbody tr:last-child > td { border-bottom:0; } td.num, th.num { text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap; } .prose a { color:var(--accent); } /* CRITICAL: .prose a (0,1,1) out-specifies .btn-primary (0,1,0); without these overrides a button inside an article body renders accent-on-accent = INVISIBLE TEXT. */ .prose a.btn-primary, .prose a.btn-primary:hover { color:#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 copper ticket 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:#8A6A1E; color:#fff; text-decoration:none; } .hotel-row { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:.6rem .9rem; margin:.2rem 0 var(--s3); padding:.7rem .95rem; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-sm); } .hotel-row .hr-name { font-weight:700; color:var(--ink); } .blog-cta { background:var(--paper-2); border:1px solid var(--line); border-left:4px solid var(--accent); border-radius:var(--radius); padding:var(--s4) var(--s5); margin:var(--s6) 0 0; } .blog-cta h2 { margin-top:0; } .blog-cta p { margin-bottom:var(--s3); } .blog-cta-btns { display:flex; gap:.6rem; flex-wrap:wrap; align-items:center; } /* ---- INFOGRAPHIC (generated SVG) ---- */ .infographic { margin:var(--s4) 0; } .infographic img, .infographic svg { width:100%; height:auto; border-radius:var(--radius); border:1px solid var(--line); background:var(--surface); display:block; } .infographic figcaption { margin-top:.6rem; text-align:center; color:var(--ink-soft); } .embed + p, .embed + p.small, .video-grid + p { max-width:none; } /* information-gain block: fresh, sourced data competitors don't carry */ .infogain { background:var(--paper-2); border:1px solid var(--line); border-left:5px solid var(--gold); border-radius:var(--radius); padding:var(--s4) var(--s4) var(--s3); margin:var(--s5) 0; } .infogain .infogain-h { display:flex; align-items:center; flex-wrap:wrap; gap:.55rem; font-family:var(--display); font-weight:800; font-size:var(--step-1); line-height:1.1; margin:0 0 var(--s3); max-width:none; color:var(--ink); } .infogain .tag { font-family:var(--body); font-size:var(--step--1); font-weight:700; color:var(--gold-ink); background:var(--gold-soft); padding:.18rem .55rem; border-radius:999px; letter-spacing:.03em; text-transform:uppercase; } .infogain ul { list-style:none; margin:0; padding:0; display:grid; gap:var(--s3); } .infogain li { position:relative; padding-left:1.5rem; max-width:66ch; } .infogain li::before { content:""; position:absolute; left:0; top:.5em; width:.55rem; height:.55rem; background:var(--gold); border-radius:50%; } .infogain .src { display:block; font-size:var(--step--1); color:var(--ink-soft); margin-top:.2rem; } .infogain .src a { color:var(--ink-soft); } .infogain .infogain-note { font-size:var(--step--1); color:var(--ink-soft); margin:var(--s3) 0 0; max-width:none; } /* ---- EMBEDS (interactive map + videos) ---- */ .embed { position:relative; width:100%; aspect-ratio:16/9; border-radius:var(--radius); overflow:hidden; border:1px solid var(--line); box-shadow:var(--shadow); background:var(--surface); } .embed iframe { position:absolute; inset:0; width:100%; height:100%; border:0; } .video-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s4); } .video-grid .embed { box-shadow:none; } @media (max-width:820px){ .video-grid{ grid-template-columns:1fr; } } /* ---- CONVERSION COMPONENTS (conversion-optimizer skill) ---- */ .btn-xl { font-size: var(--step-1); padding: 1.05rem 1.9rem; } @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 operator-listing reviews, quoted 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 , components carried in from the scaffold, re-tokened for "Flooded Stage" ============================================================ */ /* ---- FLIPPED SPLIT HERO (this site's first screen, approved 2026-08-07). Tall photo LEFT, headline + proof + XL CTA RIGHT. On mobile the H1 comes first and the photo drops below, so the primary-keyword H1 is above the fold. ---- */ .hero--split { display:grid; grid-template-columns: .85fr 1.15fr; gap: var(--s5); align-items:center; padding-block: var(--s5) var(--s6); } .hero--split .hero-media { order:-1; aspect-ratio:3/4; border-radius:var(--radius); overflow:hidden; background:var(--paper-2); box-shadow:var(--shadow); } .hero--split .hero-media img { width:100%; height:100%; object-fit:cover; } .hero--split h1 { margin-bottom: var(--s3); max-width: 16ch; } .hero--split .lede { max-width: 46ch; margin-bottom: var(--s4); } .hero--split .hero-actions { display:flex; flex-wrap:wrap; gap:.7rem; align-items:center; } .hero--split .author-hook { display:flex; align-items:center; gap:.6rem; font-size:var(--step--1); color:var(--ink-soft); margin-top:var(--s4); } .hero--split .author-hook img { width:38px; height:38px; border-radius:50%; object-fit:cover; border:2px solid var(--line); } @media (max-width: 860px) { .hero--split { grid-template-columns:1fr; gap:var(--s4); padding-block:var(--s4) var(--s5); } /* The media div is FIRST in the DOM so it can sit left on desktop. On mobile it has to drop BELOW the text, or the primary-keyword H1 is pushed off the first screen. */ .hero--split .hero-media { order:2; aspect-ratio:4/3; } .hero--split h1 { max-width:none; } } /* ---- Editorial hairline under section headings (the industrial detail) ---- */ .section > h2:first-child, .rule-h2 { padding-bottom: var(--s2); border-bottom: 2px solid var(--sea); border-image: repeating-linear-gradient(90deg, var(--ink) 0 14px, var(--accent) 14px 18px, var(--ink) 18px 32px) 1; } /* ---- CATEGORY GRID (8 activity hubs on the homepage) ---- */ .cat-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s3); } .cat-card { display:flex; flex-direction:column; gap:.3rem; background:var(--surface); border:1px solid var(--line); border-left:4px solid var(--sea); border-radius:var(--radius-sm); padding:var(--s3) var(--s4); text-decoration:none; color:var(--ink); transition:border-color .15s ease, transform .08s ease; } .cat-card:hover { border-left-color:var(--sea-deep); transform:translateY(-2px); } .cat-card .cc-name { font-family:var(--display); font-weight:800; font-size:var(--step-0); line-height:1.2; } .cat-card .cc-meta { font-size:var(--step--1); color:var(--ink-soft); } @media (max-width:900px){ .cat-grid{ grid-template-columns:repeat(2,1fr); } } @media (max-width:520px){ .cat-grid{ grid-template-columns:1fr; } } /* ---- PLATFORM PILL (which marketplace a listing lives on) ---- */ .pc-platform { font-size:var(--step--1); font-weight:700; color:var(--ink-soft); } .pc-platform .pf { display:inline-block; padding:.12rem .5rem; border-radius:999px; border:1px solid var(--line); background:var(--paper-2); color:var(--ink); font-size:.72rem; letter-spacing:.03em; text-transform:uppercase; } /* ---- HONESTY CALLOUT (used wherever the site corrects a common claim) ---- */ .honesty { background:var(--surface); border:1px solid var(--line); border-left:5px solid var(--accent); border-radius:var(--radius); padding:var(--s4); margin:var(--s5) 0; } .honesty .h-h { font-family:var(--display); font-weight:800; font-size:var(--step-1); margin:0 0 var(--s2); max-width:none; color:var(--ink); } .honesty p:last-child { margin-bottom:0; } .prose .honesty p { max-width:none; } /* ---- TOUR LIST (category hubs: a dense, scannable row per product) ---- */ .tour-list { display:grid; gap:var(--s3); } .tour-row { display:grid; grid-template-columns:1fr auto; gap:var(--s3) var(--s4); align-items:start; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:var(--s4); } .tour-row.is-lead { border-color:var(--gold); box-shadow:0 0 0 2px var(--gold-soft), var(--shadow); } .tour-row h3 { margin:0 0 .35rem; font-size:var(--step-1); } .tour-row h3 a { color:var(--ink); text-decoration:none; } .tour-row .tr-meta { font-size:var(--step--1); color:var(--ink-soft); margin:0 0 .5rem; max-width:none; } .tour-row .tr-desc { margin:0; max-width:58ch; } .tour-row .tr-cta { display:flex; flex-direction:column; align-items:flex-end; gap:.4rem; text-align:right; } .tour-row .tr-price { font-family:var(--display); font-weight:800; font-size:var(--step-1); white-space:nowrap; } .tour-row .tr-price small { display:block; font-family:var(--body); font-size:var(--step--1); font-weight:500; color:var(--ink-soft); white-space:normal; } @media (max-width:760px){ .tour-row { grid-template-columns:1fr; } .tour-row .tr-cta { align-items:stretch; text-align:left; } .tour-row .tr-cta .btn { width:100%; } } /* ============================================================ TOUR-PICKS GRID (depth-cro conversion layer, ported from niagarafallsboattours.org 2026-08-15 and re-tokened for "Flooded Stage"). A 3-card grid dropped into an article body before its FAQ. Whole card converts: image, title and button all carry the sponsored link. ============================================================ */ .tour-picks { background:var(--paper-2); border:1px solid var(--line); border-radius:var(--radius); padding:var(--s4); margin:var(--s5) 0; } .tour-picks .tp-season { font-size:var(--step--1); color:var(--ink-soft); margin:0 0 var(--s3); border-left:3px solid var(--accent); padding-left:.7rem; } .tour-picks .tp-grid { display:grid; gap:var(--s3); grid-template-columns:1fr; } @media (min-width:700px) { .tour-picks .tp-grid { grid-template-columns:repeat(3,1fr); } } .tour-picks .tp-card { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-sm); overflow:hidden; display:flex; flex-direction:column; } .tour-picks .tp-media { display:block; aspect-ratio:4/3; overflow:hidden; } .tour-picks .tp-media img { width:100%; height:100%; object-fit:cover; } .tour-picks .tp-body { padding:var(--s3); display:flex; flex-direction:column; gap:.5rem; flex:1; } .tour-picks .tp-chips { margin:0; display:flex; gap:.35rem; flex-wrap:wrap; } .pc-chip { display:inline-block; font-size:.7rem; font-weight:700; letter-spacing:.02em; padding:.2rem .55rem; border-radius:999px; background:var(--paper-2); color:var(--ink-soft); border:1px solid var(--line); } .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-reassure { margin:0; font-size:.74rem; color:var(--ink-soft); } .tour-picks .tp-body .btn { margin-top:auto; width:100%; white-space:nowrap; font-size:var(--step--1); padding:.7rem .8rem; } .tour-picks a.btn-primary, .tour-picks a.btn-primary:hover { color:#fff; } /* BREAKOUT: .prose > * and .wrap-narrow cap children at ~64ch/50rem, and max-width beats width, so a 3-card grid gets crushed to ~150px columns unless the panel is lifted out of the measure (same pattern as .cta-box / .infogain). This is the CSS gotcha the depth-cro skill flags. */ .wrap-narrow .tour-picks, .prose .tour-picks, .blog-post .tour-picks { max-width:none; width:min(100vw - 2rem, 68rem); margin-left:50%; transform:translateX(-50%); } @media (max-width:700px) { .wrap-narrow .tour-picks, .prose .tour-picks, .blog-post .tour-picks { width:100%; margin-left:0; transform:none; } } /* ---- v2.1: card-style mid-article CTA (image + body) ---- */ .cta-box.cta-card { display:grid; grid-template-columns:230px 1fr; gap:var(--s4); align-items:center; max-width:none; } .cta-box.cta-card .cb-media { display:block; } .cta-box.cta-card .cb-media img { width:100%; height:100%; min-height:170px; object-fit:cover; border-radius:var(--radius-sm); display:block; } .cta-box.cta-card .cb-body p { margin:0 0 var(--s2); max-width:none; margin-inline:0; text-align:left; } .cta-box.cta-card .tp-proof { color:var(--ink-soft); font-size:var(--step--1); } @media (max-width: 700px) { .cta-box.cta-card { grid-template-columns:1fr; } } /* category card: who-it's-for line */ .cat-card .cc-who { display:block; margin-top:.35rem; color:var(--ink-soft); font-size:var(--step--1); font-weight:600; } /* ---- GuruWalk free-tour cards (the gw_all / gw_picks / gw_pick tokens). Deliberately a different colour from the honey-gold paid CTA so a free third-party walk never reads as one of our own booked tours. ---- */ .gw-picks .tp-card.gw { border-top:4px solid #1a8f6b; } .gw-picks .tp-card.gw a.btn-primary { background:#147a5b; border-color:#147a5b; } .gw-picks .tp-card.gw a.btn-primary:hover { background:#14795a; border-color:#14795a; } .gw-picks .tp-season { border-left:4px solid #1a8f6b; padding-left:.8rem; } /* The featured GuruWalk card inherits the shared .tp-solo 34rem cap, which left a wide empty margin either side of it inside the full-width panel. Widen this one case only. */ .gw-picks.tp-solo .tp-grid { max-width: 46rem; } /* ---- v2.2 (Oleg, 2026-08-18): section intros span the container, rows + cat cards carry images ---- */ .section.wrap > p, .section > .wrap > p { max-width: none; } .tour-row.has-media { grid-template-columns: 220px 1fr auto; } .tour-row .tr-media { display:block; align-self:stretch; } .tour-row .tr-media img { width:100%; height:100%; min-height:150px; object-fit:cover; border-radius:var(--radius-sm); display:block; } @media (max-width: 860px) { .tour-row.has-media { grid-template-columns: 1fr; } .tour-row .tr-media img { min-height:0; max-height:210px; } } .cat-card { padding-top:0; overflow:hidden; } .cat-card .cc-media { display:block; margin:0 calc(-1 * var(--s4)) var(--s2); } .cat-card .cc-media img { width:100%; height:130px; object-fit:cover; display:block; } /* homepage per-category anchor blocks */ .cat-block { margin-top: var(--s5); scroll-margin-top: 5rem; } .cat-block > h3 { margin-bottom: var(--s1); } .cat-block > p.small { margin-top: 0; color: var(--ink-soft); } /* single mid-article conversion card (gradual blog placements) */ .tp-solo { margin: var(--s5) 0; } .tp-solo .tp-grid { grid-template-columns: 1fr; max-width: 34rem; margin-inline: auto; } /* ---- TOUR (MONEY) PAGES: booking panel above the fold (tour-page-cro spec) ---- */ .tour-hero { padding-top: var(--s4); } .tour-hero-grid { display: grid; gap: var(--s4); align-items: start; } @media (min-width: 860px) { .tour-hero-grid { grid-template-columns: 1.15fr 1fr; } } .tour-hero .hero-media img { width: 100%; height: auto; border-radius: var(--radius); box-shadow: var(--shadow); } .booking-panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--s4); box-shadow: var(--shadow); } .booking-panel h1 { font-size: var(--step-2); margin: 0 0 var(--s2); line-height: 1.15; } .booking-panel .bp-title { font-family: var(--display); font-weight: 800; font-size: var(--step-2); margin: 0 0 var(--s2); line-height: 1.15; color: var(--ink); max-width: none; } .bp-rating { margin: 0 0 var(--s2); color: var(--ink-soft); font-size: var(--step--1); } .bp-rating .gold { color: var(--gold); font-weight: 700; } .bp-reason { margin: 0 0 var(--s2); font-size: var(--step-0); } .bp-urgency { margin: 0 0 var(--s2); font-size: var(--step--1); font-weight: 700; color: var(--brand); } .bp-urgency::before { content: ""; display: inline-block; width: .55em; height: .55em; border-radius: 50%; background: var(--brand); margin-right: .45em; vertical-align: middle; } .tr-urgency { margin: 0 0 var(--s1); font-size: var(--step--1); font-weight: 700; color: var(--brand); } /* Phones: price + button come before the reason and the urgency line (tour-page-cro spec 1). */ @media (max-width: 859px) { .booking-panel { display: flex; flex-direction: column; } .booking-panel h1, .booking-panel .bp-title { order: 0; } .booking-panel .bp-rating { order: 1; } .booking-panel .bp-reason { order: 2; } .booking-panel .bp-price { order: 3; } .booking-panel .btn-block { order: 4; } .booking-panel .bp-next { order: 5; } .booking-panel .bp-urgency { order: 6; } .booking-panel .bp-facts { order: 7; } } .bp-price { margin: 0 0 var(--s3); font-size: var(--step-1); font-family: var(--display); } .bp-price small { display: block; font-size: var(--step--1); color: var(--ink-soft); font-family: var(--body); font-weight: 400; } .btn-block { display: block; width: 100%; text-align: center; } .bp-next { color: var(--ink-soft); margin: var(--s2) 0 var(--s3); } .bp-facts { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s2) var(--s3); margin: 0; border-top: 1px solid var(--line); padding-top: var(--s3); } .bp-facts div { min-width: 0; } .bp-facts dt { font-size: var(--step--1); color: var(--ink-soft); } .bp-facts dd { margin: 0; font-size: var(--step--1); font-weight: 600; } /* Keep-reading: deterministic sibling-article links at the end of every article */ .keep-reading{margin:var(--s5) auto 0;padding-top:var(--s4);border-top:1px solid var(--line)} .keep-reading h2{font-size:1.1rem;margin:0 0 .6rem} .keep-reading ul{list-style:none;margin:0;padding:0;display:grid;gap:.45rem} .keep-reading li{display:flex;justify-content:space-between;gap:1rem;align-items:baseline} .keep-reading a{font-weight:600} .keep-reading .kr-kind{font-size:.8rem;color:var(--ink-soft);white-space:nowrap} /* ============================================================ HOMEPAGE BLUEPRINT (Oleg 2026-09-04): quick answer, takeaways, category compare table, inclusions matrix, stat grid, season strip + cards, spot map, testimonials, hotels, answered grid. Same tokens as the rest of the sheet: paper / ink / stage teal / CTA gold. ============================================================ */ .ico { width:1.2em; height:1.2em; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; vertical-align:-.22em; flex:none; } /* Quick answer + key takeaways */ .quick-answer-box { background:var(--surface); border:1px solid var(--line); border-left:5px solid var(--sea); border-radius:var(--radius); padding:var(--s4) var(--s5); display:grid; gap:.7rem; } .quick-answer-box p { margin:0; max-width:72ch; font-size:var(--step-0); } .quick-answer-box p:first-child { font-size:var(--step-0); line-height:1.55; } .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:.74rem; line-height:1.25; margin-top:.25rem; } .glyph { display:inline-flex; align-items:center; justify-content:center; width:1.65rem; height:1.65rem; border-radius:50%; } .glyph .ico { width:1rem; height:1rem; stroke-width:2.6; vertical-align:0; } .glyph.yes { background:rgba(58,90,64,.14); color:var(--sea); } .glyph.no { background:rgba(107,31,44,.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(58,90,64,.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(107,31,44,.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; } } /* Wine cards */ .wine-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:var(--s3); margin-top:var(--s4); } .wine-card { background:var(--surface); border:1px solid var(--line); border-top:5px solid var(--brand); border-radius:var(--radius); padding:var(--s3) var(--s4) var(--s4); display:flex; flex-direction:column; gap:.5rem; } .wine-card.is-white { border-top-color:var(--gold); } .wine-card.is-rose { border-top-color:#C97B84; } .wine-card.is-sweet { border-top-color:var(--slate); } .wine-card h3 { margin:0; font-size:var(--step-0); line-height:1.25; } .wine-card .wc-style { font-family:var(--display); text-transform:uppercase; letter-spacing:.08em; font-size:.8rem; color:var(--ink-soft); } .wine-card dl { margin:0; display:grid; grid-template-columns:auto 1fr; gap:.25rem .6rem; font-size:.84rem; } .wine-card dt { font-weight:700; color:var(--ink-soft); } .wine-card dd { margin:0; } .wine-card p { margin:0; font-size:var(--step--1); } .wine-card .wc-tour { margin-top:auto; border-top:1px solid var(--line); padding-top:.5rem; font-size:.84rem; } @media (max-width:1000px){ .wine-grid { grid-template-columns:repeat(2,1fr); } } @media (max-width:520px){ .wine-grid { grid-template-columns:1fr; } } /* Spot map: live embed + hand-drawn pin schematic */ .spot-map-wrap { display:grid; grid-template-columns:1fr 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:9; } .map-pin.is-city:hover circle, .map-pin.is-city:focus circle { r:12; } /* Transparent hit area so a pin is a >=40px tap target; it must never paint or steal focus. */ .map-pin .pin-hit { fill:transparent; stroke:none; } .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; } } /* Photo collage (rule 32): 4-col mosaic with a 2x2 hero tile on desktop */ .photo-collage { display:grid; grid-template-columns:repeat(4,1fr); grid-auto-rows:140px; gap:.6rem; margin-top:var(--s3); } .pcol-tile { position:relative; display:block; border-radius:var(--radius-sm); overflow:hidden; } .pcol-tile.pcol-hero { grid-column:span 2; grid-row:span 2; } .pcol-tile img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .3s ease; } .pcol-tile:hover img { transform:scale(1.05); } .pcol-cap { position:absolute; left:0; right:0; bottom:0; padding:.5rem .6rem .4rem; font-family:var(--display); font-weight:700; font-size:.82rem; color:#fff; background:linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.72) 100%); } .pcol-hero .pcol-cap { font-size:1rem; padding:.8rem .9rem .6rem; } @media (max-width:900px){ .photo-collage { grid-template-columns:repeat(3,1fr); grid-auto-rows:120px; } } @media (max-width:600px){ .photo-collage { grid-template-columns:repeat(2,1fr); grid-auto-rows:130px; } .pcol-tile.pcol-hero { grid-column:span 2; grid-row:span 1; } .pcol-tile:nth-child(n+7) { display:none; } } /* ============================================================ INTERACTIVE BLOCKS (rule 33): tour explorer + departure-point picker. Shared chip control, reused by both blocks and by the decision-picker generator. ============================================================ */ .chip { font-family:var(--display); font-weight:700; font-size:var(--step--1); min-height:44px; padding:.4rem 1rem; border-radius:999px; border:1.5px solid var(--line); background:var(--surface); color:var(--ink); cursor:pointer; transition:background .15s ease, color .15s ease, border-color .15s ease; } .chip:hover { border-color:var(--sea); } .chip.is-active { background:var(--sea); border-color:var(--sea); color:#fff; } .chip:focus-visible { outline:3px solid var(--gold); outline-offset:2px; } /* Tour explorer */ .tour-explorer { margin-top:var(--s3); } .explorer-controls { display:flex; flex-wrap:wrap; gap:var(--s3); align-items:center; justify-content:space-between; background:var(--paper-2); border:1px solid var(--line); border-radius:var(--radius); padding:var(--s3) var(--s4); } .explorer-chips { display:flex; flex-wrap:wrap; gap:.5rem; } .explorer-toggles { display:flex; flex-wrap:wrap; gap:.9rem; } .explorer-check { display:flex; align-items:center; gap:.4rem; font-size:var(--step--1); min-height:40px; cursor:pointer; } .explorer-check input { width:18px; height:18px; accent-color:var(--sea); } .explorer-sort { display:flex; align-items:center; gap:.5rem; font-size:var(--step--1); } .explorer-sort select { min-height:40px; border-radius:8px; border:1.5px solid var(--line); background:var(--surface); color:var(--ink); padding:.3rem .6rem; font:inherit; } .explorer-status { font-size:var(--step--1); color:var(--ink-soft); margin:.7rem 0; } .explorer-table td:first-child a { font-weight:700; } .explorer-table td.num, .explorer-table th.num { text-align:right; } .explorer-empty { background:var(--surface); border:1px dashed var(--line); border-radius:var(--radius); padding:var(--s4); text-align:center; display:grid; gap:.6rem; justify-items:center; } @media (max-width:640px){ .explorer-table thead { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; padding:0; } .explorer-table, .explorer-table tbody, .explorer-table tr, .explorer-table td { display:block; width:100%; } .explorer-table tr { border:1px solid var(--line); border-radius:var(--radius); margin-bottom:.6rem; background:var(--surface); } .explorer-table td { display:grid; grid-template-columns:6.5rem 1fr; gap:.6rem; padding:.4rem .8rem; border:0; } .explorer-table td::before { content:attr(data-label); font-family:var(--display); font-weight:700; color:var(--ink-soft); font-size:.76rem; } .explorer-table td:first-child { grid-template-columns:1fr; padding-top:.7rem; } .explorer-table td:first-child::before { display:none; } } /* Departure-point picker */ .departure-picker { margin-top:var(--s3); } .dep-grid { display:grid; grid-template-columns:1.1fr 1fr; gap:var(--s4); align-items:start; } .dep-map svg { width:100%; height:auto; display:block; border:1px solid var(--line); border-radius:var(--radius); background:var(--surface); } .dep-pin { cursor:pointer; } .dep-pin circle { fill:var(--brand); stroke:#fff; stroke-width:2; transition:r .15s ease, fill .15s ease; } .dep-pin.is-emilion circle { fill:var(--accent-deep); } .dep-pin text { fill:var(--ink); font-family:var(--display); font-size:12px; font-weight:800; paint-order:stroke; stroke:#fff; stroke-width:3px; text-anchor:middle; } .dep-pin:hover circle, .dep-pin.is-active circle { fill:var(--sea); r:11; } .dep-pin:focus-visible circle { outline:none; stroke:var(--gold); stroke-width:3; } .dep-chips { display:flex; flex-wrap:wrap; gap:.5rem; margin-bottom:var(--s3); } .dep-status { font-size:var(--step--1); color:var(--ink-soft); margin:0 0 var(--s3); } .dep-panel { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:var(--s4); } .dep-panel[hidden] { display:none; } .dep-panel h3 { margin:0 0 .4rem; font-size:var(--step-0); } .dep-address { display:flex; align-items:center; gap:.4rem; color:var(--ink-soft); font-size:.86rem; margin:0 0 .4rem; } .dep-note { font-size:var(--step--1); color:var(--ink-soft); margin:0 0 .6rem; } .dep-tour-list { list-style:none; margin:0; padding:0; display:grid; gap:.5rem; border-top:1px solid var(--line); padding-top:.6rem; } .dep-tour-list li { display:flex; justify-content:space-between; gap:1rem; align-items:baseline; font-size:var(--step--1); } .dep-tour-list .num { font-family:var(--display); font-weight:700; color:var(--brand); white-space:nowrap; } @media (max-width:860px){ .dep-grid { grid-template-columns:1fr; } } /* ---- 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:44px; transition:border-color .15s ease, background .15s ease, color .15s ease; } .decision-picker .dp-opt:hover { border-color:var(--dp-key); color:var(--dp-key); } .decision-picker .dp-opt.is-on { background:var(--dp-key); border-color:var(--dp-key); color:#fff; } .decision-picker .dp-opt:focus-visible { outline:3px solid var(--accent, var(--dp-key)); outline-offset:2px; } .decision-picker .dp-controls { margin:0 0 var(--s3, 1rem); } .decision-picker .dp-summary { margin:0 0 var(--s3, 1rem); padding:.6rem .85rem; border-radius:var(--radius-sm, 6px); background:var(--dp-surface-2); color:var(--dp-ink); font-size:var(--step--1, .9rem); font-weight:600; max-width:none; } .decision-picker .dp-results { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s3, 1rem); } .decision-picker .dp-card { display:flex; flex-direction:column; border:1px solid var(--dp-line); border-radius:var(--radius, 10px); overflow:hidden; background:var(--dp-surface-2); } .decision-picker[data-state="picked"] .dp-card { border-color:var(--dp-key); box-shadow:0 0 0 2px rgba(0,0,0,.06); } .decision-picker .dp-card.dp-fold { display:none; } /* [hidden] alone loses to the .dp-card display:flex rule above (author styles beat the UA stylesheet), so a card the script hides stays on screen: pin it, same fix as the exit popup's dismissal trap. */ .decision-picker .dp-card[hidden] { display:none !important; } .decision-picker .dp-media { display:block; aspect-ratio:4/3; background:var(--dp-surface-2); } .decision-picker .dp-media img { width:100%; height:100%; object-fit:cover; display:block; } .decision-picker .dp-body { padding:var(--s3, 1rem); display:flex; flex-direction:column; gap:.4rem; flex:1; } .decision-picker .dp-name { margin:0; font-size:var(--step-0, 1rem); line-height:1.25; } .decision-picker .dp-name a { color:var(--dp-ink); text-decoration:none; } .decision-picker .dp-name a:hover { color:var(--dp-key); text-decoration:underline; } .decision-picker .dp-facts { margin:0; display:flex; flex-wrap:wrap; gap:.3rem; max-width:none; } .decision-picker .dp-facts span { font-size:.72rem; font-weight:600; background:var(--dp-surface); color:var(--dp-soft); border:1px solid var(--dp-line); border-radius:999px; padding:.2rem .55rem; } .decision-picker .dp-price { margin:0; font-size:var(--step--1, .9rem); max-width:none; } .decision-picker .dp-price strong { font-family:var(--display, inherit); font-size:var(--step-0, 1rem); } .decision-picker .dp-rev { color:var(--dp-soft); } .decision-picker .dp-body .btn { margin-top:auto; text-align:center; } @media (max-width:900px){ .decision-picker .dp-results { grid-template-columns:repeat(2,1fr); } } @media (max-width:560px){ .decision-picker { padding:var(--s3, 1rem); } .decision-picker .dp-results { grid-template-columns:1fr; } .decision-picker .dp-card { flex-direction:row; } .decision-picker .dp-media { width:38%; flex:none; aspect-ratio:1/1; } } /* ============================================================ SINGLE-PRODUCT BLOCKS (osakaaquarium.org) The five ticket options, the station cards, the official fare table, the fare snapshot and the true-scale route schematic. Same tokens as the rest of the sheet: paper / ink / stage teal / CTA gold / warm gold. Nothing here is a new colour, only new layout. ============================================================ */ /* Rule 30: the option band is deliberately NOT a uniform stack. The base ticket is one full-width lead row (.tour-row.is-lead.has-media, already styled above) and the rest are vertical cards. Two or one card must not stretch across three columns, so the grid is count-aware. */ .cards-3.cards-n2 { grid-template-columns:repeat(2,1fr); } .cards-3.cards-n1 { grid-template-columns:minmax(0,26rem); justify-content:start; } @media (max-width:820px){ .cards-3.cards-n2, .cards-3.cards-n1 { grid-template-columns:1fr; } } /* The verified full price range, stated once above the options (rules 13 and 35). */ .opt-range { display:flex; align-items:baseline; gap:.6rem; flex-wrap:wrap; margin:0 0 var(--s4); font-family:var(--display); max-width:none; } .opt-range b { font-size:var(--step-2); font-weight:800; color:var(--brand); letter-spacing:-.02em; } .opt-range span { font-family:var(--body); font-size:var(--step--1); color:var(--ink-soft); } /* What the base ticket includes, inside the lead row. */ .opt-includes { list-style:none; margin:0 0 var(--s2); padding:0; display:grid; gap:.35rem; } .opt-includes li { position:relative; padding-left:1.5rem; font-size:var(--step--1); line-height:1.45; } .opt-includes li::before { content:"\2713"; position:absolute; left:0; top:0; color:var(--sea); font-weight:800; font-family:var(--display); } .tour-row .tr-meta .pc-chip { margin-right:.3rem; } .cards-3 .rcard .pc-chips { display:flex; flex-wrap:wrap; gap:.35rem; margin:0; max-width:none; } .opt-price { font-family:var(--display); font-weight:800; font-size:var(--step-1); color:var(--brand); margin:0; letter-spacing:-.02em; } .tour-row .tr-cta .tr-price { display:block; } /* Official gate fares. Inherits .cmp-table (sticky first column, cards under 640px). */ .fare-table td:first-child { font-weight:600; } .fare-table td.num { font-family:var(--display); font-weight:800; white-space:nowrap; } /* {{ price_snapshot }}: a compact in-article conversion block, the gate fare against the pass. */ .fare-snapshot { background:var(--surface); border:1px solid var(--line); border-left:5px solid var(--accent); border-radius:var(--radius); padding:var(--s4) var(--s5); margin:var(--s5) 0; box-shadow:var(--shadow); } .fare-snapshot .fs-h { font-family:var(--display); font-weight:800; font-size:var(--step-1); margin:0 0 var(--s3); line-height:1.2; max-width:none; } .fare-snapshot .fs-rows { list-style:none; margin:0 0 var(--s3); padding:0; display:grid; gap:.15rem; } .fare-snapshot .fs-rows li { display:flex; justify-content:space-between; align-items:baseline; gap:1rem; padding:.5rem .1rem; border-bottom:1px solid var(--line); font-size:var(--step--1); } .fare-snapshot .fs-rows li:last-child { border-bottom:0; } .fare-snapshot .fs-rows li b { font-family:var(--display); font-size:var(--step-0); white-space:nowrap; } .fare-snapshot .fs-rows li.is-key { background:var(--paper-2); border-radius:var(--radius-sm); padding-inline:.6rem; border-bottom-color:transparent; } .fare-snapshot .fs-rows li.is-key b { color:var(--brand); font-size:var(--step-1); } .fare-snapshot .fs-note { font-size:var(--step--1); color:var(--ink-soft); margin:0 0 var(--s3); max-width:none; } /* The four passenger stations as data cards. */ .station-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:var(--s4); margin-top:var(--s4); } .station-card { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow); display:flex; flex-direction:column; } .station-card .stn-media { aspect-ratio:4/3; background:var(--paper-2); } .station-card .stn-media img { width:100%; height:100%; object-fit:cover; display:block; } .station-card .stn-body { padding:var(--s3) var(--s4) var(--s4); display:flex; flex-direction:column; gap:.55rem; } .station-card .stn-order { font-family:var(--display); text-transform:uppercase; letter-spacing:.09em; font-size:.74rem; color:var(--gold-ink); background:var(--gold-soft); align-self:flex-start; padding:.2rem .6rem; border-radius:999px; } .station-card h3 { margin:0; font-size:var(--step-1); } .station-card .stn-zh { font-family:var(--body); font-weight:600; font-size:var(--step--1); color:var(--ink-soft); } .station-card p { margin:0; max-width:none; } .station-card .stn-transit { display:flex; align-items:flex-start; gap:.4rem; color:var(--ink-soft); } .station-card .stn-transit .ico { color:var(--sea); margin-top:.15rem; flex:none; } .station-card .stn-list { list-style:none; margin:0; padding:var(--s2) 0 0; display:grid; gap:.5rem; border-top:1px solid var(--line); } .station-card .stn-list li { font-size:var(--step--1); line-height:1.45; } .station-card .stn-list li b { font-family:var(--display); display:block; color:var(--ink); } @media (max-width:820px){ .station-grid { grid-template-columns:1fr; } } /* Plain station list, kept as the shape a build/interactive.mjs override may still emit. */ .station-list { display:grid; gap:var(--s3); margin-top:var(--s3); } .station-list .sl-item { background:var(--surface); border:1px solid var(--line); border-left:5px solid var(--sea); border-radius:var(--radius); padding:var(--s3) var(--s4); } .station-list .sl-item h3 { margin:0 0 .5rem; font-size:var(--step-0); } .station-list .sl-zh { font-family:var(--body); font-weight:600; color:var(--ink-soft); font-size:var(--step--1); } .station-list .sl-item ul { list-style:none; margin:0; padding:0; display:grid; gap:.45rem; } .station-list .sl-item li { font-size:var(--step--1); line-height:1.45; } .station-list .sl-item li b { font-family:var(--display); } /* Route schematic: an angle station is closed to the public, so it is drawn as a small square rather than a clickable pin, and never looks like a stop you can get off at. */ .map-schematic .angle-pin rect { fill:var(--slate); stroke:var(--paper); stroke-width:2; } .map-schematic .map-pin text { font-size:14px; } /* ============================================================ RULE 33 INTERACTIVE BLOCKS, built on this site's own verified data. All three server-render their full content and are only NARROWED by script, so every one still reads as real content with scripting off. Controls are hidden until the block's own script sets data-js on it: an inert control is worse than no control. ============================================================ */ /* ---- 1. Seat-zone picker ({{ seat_picker }}), on the decision-picker shell ---- */ .ride-planner .rp-controls { display:none; } .ride-planner[data-js] .rp-controls { display:block; } .ride-planner .rp-qs { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--s3); } .ride-planner .rp-q { min-width:0; } .ride-planner .rp-reset { min-height:44px; padding:.55rem 1.3rem; font-size:var(--step--1); } .ride-planner .dp-card.is-top { box-shadow:inset 0 0 0 2px var(--accent); } .ride-planner .dp-media { pointer-events:none; } @media (max-width:860px){ .ride-planner .rp-qs { grid-template-columns:1fr; } } /* ---- 2. Performance-date planner ({{ date_planner }}) ---- */ .fare-checker { margin-top:var(--s4); background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:var(--s4); box-shadow:var(--shadow); } .fare-checker .fc-controls { display:none; } .fare-checker[data-js] .fc-controls { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--s3) var(--s4); } .fare-checker .fc-q { border:0; padding:0; margin:0; min-width:0; } .fare-checker .fc-q legend { font-family:var(--display); font-weight:800; font-size:var(--step--1); color:var(--ink); padding:0 0 .45rem; } .fare-checker .fc-opts { display:flex; flex-wrap:wrap; gap:.45rem; } .fare-checker .fc-opt { min-width:44px; } .fare-checker .fc-reset-wrap { grid-column:1 / -1; } .fare-checker .fc-reset { min-height:44px; padding:.55rem 1.3rem; font-size:var(--step--1); } .fare-checker .fc-out { margin-top:var(--s3); border-top:1px solid var(--line); padding-top:var(--s3); } .fare-checker[data-js] .fc-out { margin-top:var(--s4); } .fare-checker .fc-verdict { font-family:var(--display); font-weight:800; font-size:var(--step-1); line-height:1.25; margin:0 0 var(--s2); max-width:none; } .fare-checker .fc-nums { list-style:none; margin:0 0 var(--s2); padding:0; display:grid; gap:.45rem; } .fare-checker .fc-nums li { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:baseline; gap:.2rem .8rem; padding:.55rem .8rem; background:var(--surface-2); border-radius:var(--radius-sm); } .fare-checker .fc-nums .fc-k { font-family:var(--display); font-weight:700; } .fare-checker .fc-nums .fc-v { font-family:var(--display); font-weight:800; font-size:var(--step-0); white-space:nowrap; text-align:right; } .fare-checker .fc-nums small { grid-column:1 / -1; color:var(--ink-soft); font-size:var(--step--1); line-height:1.4; } .fare-checker .fc-hours, .fare-checker .fc-note { font-size:var(--step--1); color:var(--ink-soft); margin:0 0 .55rem; max-width:none; } .fare-checker .fc-closed-note { display:flex; gap:.5rem; align-items:flex-start; color:var(--ink); font-weight:600; } .fare-checker .fc-closed-note .ico { color:var(--sea); flex:none; margin-top:.15rem; } .fare-checker[data-closed="1"] .fc-verdict, .fare-checker[data-closed="1"] .fc-nums, .fare-checker[data-closed="1"] .fc-hours { display:none; } .fare-checker[data-closed="0"] .fc-closed-note { display:none; } .fare-checker .fc-cta { display:flex; flex-wrap:wrap; gap:.7rem var(--s3); align-items:center; margin-top:var(--s3); padding-top:var(--s3); border-top:1px solid var(--line); } .fare-checker .fc-cta-line { font-size:var(--step--1); color:var(--ink-soft); } .fare-checker .fc-cta .btn { min-height:44px; } @media (max-width:640px){ .fare-checker { padding:var(--s3); } .fare-checker[data-js] .fc-controls { grid-template-columns:1fr; } .fare-checker .fc-cta .btn { width:100%; } } /* ---- 3. Getting-there route picker ({{ route_picker }}) ---- */ .station-explorer { margin-top:var(--s4); } .station-explorer .se-controls { display:none; } .station-explorer[data-js] .se-controls { display:block; } .station-explorer .se-chips { display:flex; flex-wrap:wrap; gap:.5rem; } .station-explorer .se-status { font-size:var(--step--1); color:var(--ink-soft); margin:var(--s3) 0; max-width:none; } .station-explorer .se-list { display:grid; gap:var(--s3); } .station-explorer .se-group { background:var(--surface); border:1px solid var(--line); border-left:5px solid var(--sea); border-radius:var(--radius); padding:var(--s3) var(--s4); } .station-explorer .se-group[hidden] { display:none !important; } .station-explorer .se-group h3 { margin:0 0 .55rem; font-size:var(--step-0); } .station-explorer .se-zh { font-family:var(--body); font-weight:600; color:var(--ink-soft); font-size:var(--step--1); } .station-explorer .se-group ul { list-style:none; margin:0; padding:0; display:grid; gap:.5rem; } .station-explorer .se-group li { font-size:var(--step--1); line-height:1.45; } .station-explorer .se-group li b { font-family:var(--display); display:block; color:var(--ink); } /* A pin the explorer is currently filtered to, so map and list never disagree. */ .map-pin.is-picked circle { fill:var(--accent); } .map-pin.is-picked text { fill:var(--accent-deep); font-weight:800; } @media (max-width:640px){ .station-explorer .se-group { padding:var(--s3); } } /* ============================================================ FLOODED STAGE LAYER , Phase D1 (2026-09-06) Part 1 of 2. Everything below re-points the donor rules that assumed a LIGHT ground, pins the rule-31 type scale, and installs the rule-37 band rhythm. This layer is last in the sheet on purpose: at equal specificity the later rule wins, so this is the authority. ============================================================ */ /* ---- 1. DARK-GROUND CORRECTIONS ------------------------------------------------ */ body { background: var(--paper); color: var(--ink); } img { background: var(--paper-2); } /* no white flash while a photo loads */ a { color: var(--link); } a:hover { color: var(--sea-deep); } :focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; } h1, h2, h3 { color: var(--ink); } .eyebrow { color: var(--gold); } hr { border: 0; border-top: 1px solid var(--line); } /* The header is a LIGHT surface on this site. It carried the donor's dark ground rgba(4,34,43,.93) = #04222B while .nav-links kept color:var(--ink) (deep navy), so the whole navbar was dark-on-dark and unreadable (Oleg, 2026-09-09). --paper at 92%, matching the base rule, so the sticky header reads as the page ground it actually sits on. */ .site-header { background: rgba(230,237,241,.93); border-bottom: 1px solid var(--line); } .nav-links a { color: var(--ink); } .nav-links a:hover { color: var(--brand); } .nav-links a.btn-primary, .nav-links a.btn-primary:hover { color: var(--accent-ink); } .nav-links a.btn-brand, .nav-links a.btn-brand:hover { color: #fff; } .nav-toggle { color: var(--ink); } @media (max-width: 760px) { .nav-links { background: var(--paper-2); border-bottom-color: var(--line); } } .skip-link { background: var(--brand-fill); color: #fff; } .btn-primary, .btn-primary:hover, .prose a.btn-primary, .prose a.btn-primary:hover, .tour-picks a.btn-primary, .tour-picks a.btn-primary:hover, .cta-box a.btn-primary, .cta-box a.btn-primary:hover { color: var(--accent-ink); } .btn-brand, .btn-brand:hover, .prose a.btn-brand { background: var(--brand-fill); color: #fff; } .btn-brand:hover { background: var(--brand-deep); } .btn-ghost, .prose a.btn-ghost { color: var(--ink); border-color: var(--ctl-line); background: transparent; } .btn-ghost:hover { border-color: var(--brand); color: var(--brand); } /* star rating: the unfilled track has to read as a track on a dark card */ .stars::before { color: var(--star-track); } .stars .stars-fill::before { color: var(--gold); } .stars-num, .pc-rating { color: var(--ink); } /* semantic marks */ .incl .no::before, .proscons .cons { color: var(--alert); } .proscons .cons { border-top-color: var(--alert); } .incl .yes::before, .proscons .pros { color: var(--ok); } .proscons .pros { border-top-color: var(--ok); } .glyph.yes { background: rgba(99,214,162,.16); color: var(--ok); } .glyph.no { background: rgba(245,140,123,.14); color: var(--alert); } .glyph.opt { background: var(--gold-soft); color: var(--gold-ink); } .month-strip li.is-event { background: rgba(134,224,228,.14); border-color: var(--brand); } .month-strip li.is-harvest { background: var(--gold-soft); border-color: var(--gold); } .month-strip li.is-drying { background: rgba(245,140,123,.12); border-color: var(--alert); } /* every "big number" reads gold on this site, never the structural teal (which is a fill) */ .stat-tile .st-num, .opt-range b, .opt-price, .tour-row .tr-price, .dep-tour-list .num, .fare-snapshot .fs-rows li.is-key b, .pc-price { color: var(--gold); } .stat-tile { border-top-color: var(--brand); } .pc-price small, .tour-row .tr-price small { color: var(--ink-soft); } /* map + schematic pins: the halo stroke has to be the band colour, not white */ .map-pin circle { fill: var(--brand); stroke: var(--paper); } .map-pin.is-city circle { fill: var(--gold); } .map-pin text { fill: var(--ink); stroke: var(--paper); } .map-pin:hover circle, .map-pin:focus circle { fill: var(--sea-deep); } .map-pin:hover text, .map-pin:focus text { fill: var(--brand); } .map-pin.is-picked circle { fill: var(--accent); } .map-pin.is-picked text { fill: var(--gold); } .map-pin:focus-visible circle { stroke: var(--focus); } .dep-pin circle { stroke: var(--paper); } .dep-pin text { fill: var(--ink); stroke: var(--paper); } .dep-pin.is-emilion circle { fill: var(--accent); } .map-schematic .angle-pin rect { fill: var(--slate); stroke: var(--paper); } /* form-ish surfaces */ .availability .av-date, .explorer-sort select { background: var(--surface-2); color: var(--ink); border-color: var(--ctl-line); color-scheme: light; } .explorer-check input { accent-color: var(--accent); } .explorer-empty { border-color: var(--ctl-line); background: var(--surface); } .availability .av-msg { color: var(--ok); } /* the hotel pill must NOT be gold: gold is the ticket CTA on this site */ .hotel-cta, .prose a.hotel-cta { background: transparent; border: 1.5px solid var(--brand); color: var(--brand); box-shadow: none; } .hotel-cta:hover, .prose a.hotel-cta:hover { background: var(--brand-fill); border-color: var(--brand-fill); color: #fff; } .hotel-row { background: var(--surface); border-color: var(--line); } .hotel-row .hr-name { color: var(--ink); } .hotel-card .hc-rating .gold { color: var(--gold); } /* footer, the deepest surface on the page */ .site-footer { background: var(--footer); color: #B9D2D8; border-top: 1px solid var(--line); } .site-footer a { color: #E9F2F3; } .site-footer a:hover { color: #F2A08F; } .site-footer .brand b { color: #F2A08F; } .socials a { border-color: #2E5D73; color: #B9D2D8; } .socials a:hover { border-color: #F2A08F; color: #F2A08F; } .disclosure { color: #A9C4CE; border-top-color: #2E5D73; } /* The footer is the one ink-dark surface outside the band system, so it needs the band's own link and accent colours: the coral-red booking fill sits at 2.4:1 on navy and is unreadable. */ .site-footer, .site-footer .small { /* COMPLETE the flip. Remapping --gold/--accent/--link but leaving --ink pointing at the light-ground navy made every footer #0B2A3A on #0B2A3A, a contrast of 1.00 and invisible, including the sitewide FTC disclosure line (Oleg, 2026-09-09). --ink-soft was the same trap at 2.06:1 and was being masked by a per-element inline colour in markup. */ --gold: #F0C48A; --accent: #F2A08F; --link: #F2A08F; --ink: var(--inv-ink); --ink-soft: var(--inv-soft); --focus: var(--focus-inv); } /* article body */ .prose a { color: var(--link); } .prose blockquote { border-left-color: var(--accent); color: var(--ink-soft); } .blog-cta { background: var(--paper-2); border-color: var(--line); border-left-color: var(--accent); } .keep-reading { border-top-color: var(--line); } .infographic img, .infographic svg { background: var(--surface); border-color: var(--line); } /* the closing / mid-article banner is a dark plate with a gold edge, never white-on-gold */ /* A dark plate must FLIP its tokens, exactly as .band-dark does. It previously inherited color:var(--ink), which is deep navy on this light-ground site: dark text on a dark gradient, unreadable (Oleg, 2026-09-09). The donor's palette had a light --ink, which is why it survived. Colours here are the inverse-band tokens, so this plate can never drift from the band system. */ .cta-banner { background: linear-gradient(150deg, #123F52 0%, #0B2A3A 62%, #0F3446 100%); border: 1px solid var(--inv-line); border-top: 3px solid var(--inv-cta); --ink: var(--inv-ink); --ink-soft: var(--inv-soft); --link: var(--inv-link); --line: var(--inv-line); --focus: var(--focus-inv); --accent: var(--inv-cta); --accent-deep: var(--inv-cta-deep); --accent-ink: var(--inv-cta-ink); color: var(--inv-ink); color-scheme: dark; } .cta-banner h2, .cta-banner h3 { color: var(--inv-ink); } .cta-banner p { color: var(--inv-soft); } .cta-banner a:not(.btn) { color: var(--inv-link); } /* ---- 2. RULE 31: a lead paragraph is body copy ---------------------------------- */ /* Body and section leads sit at --step-0. Only the hero lead is allowed above it, and only as far as --step-lead, which keeps the smallest H2 at >=1.77x the largest lead at every viewport from 320px to 1440px+ (worked in the CONTRAST/TYPE LEDGER at the foot of the file). */ :root { --step-lead: clamp(1.05rem, 1rem + .25vw, 1.22rem); } .lede, .quick-answer p, .quick-answer-box p, .quick-answer-box p:first-child, .section > p:first-of-type, .section > .wrap > p:first-of-type { font-size: var(--step-0); line-height: 1.62; } .lede { color: var(--ink-soft); font-weight: 500; } .hero .lede, .hero-full .lede, .hero--split .lede { font-size: var(--step-lead); line-height: 1.5; } .quick-answer p, .quick-answer-box p:first-child { font-weight: 600; color: var(--ink); } /* a bolded lead is bold, not big: never let inline emphasis change the computed size */ p b, p strong, li b, li strong, .lede b, .lede strong { font-size: inherit; font-weight: 700; color: var(--ink); } .prose p, .prose li { font-size: var(--step-0); } /* ---- 3. RULE 37: SECTION BANDS -------------------------------------------------- */ /* MECHANICS. A band is an OUTER full-width
painting a real background, wrapping an INNER .wrap that constrains the content. Some sections in this scaffold carry .wrap on the section element itself; a background there would paint only the 72rem column and the page would look broken, so those sections are converted to full-bleed and their direct children are re-constrained instead. Same geometry, correct paint. */ .section.band, .section[class*="band-"], #featured-tour, #book, #quick-answer, #key-takeaways, #decision-picker, #decision-picker-section, #categories, #quick-comparison, #why-here, #when-to-go, #what-you-see, #spot-map, #testimonials, #stay, #faq, #answered, #closing-cta, #cta { position: relative; background: var(--band-bg, var(--paper)); padding-block: var(--s6); border-top: var(--band-edge, 0 none); border-bottom: var(--band-edge, 0 none); } @supports selector(:has(*)) { #featured-tour.wrap:not(:has(> .wrap)), #book.wrap:not(:has(> .wrap)), #quick-answer.wrap:not(:has(> .wrap)), #key-takeaways.wrap:not(:has(> .wrap)), #decision-picker.wrap:not(:has(> .wrap)), #decision-picker-section.wrap:not(:has(> .wrap)), #categories.wrap:not(:has(> .wrap)), #quick-comparison.wrap:not(:has(> .wrap)), #why-here.wrap:not(:has(> .wrap)), #when-to-go.wrap:not(:has(> .wrap)), #what-you-see.wrap:not(:has(> .wrap)), #spot-map.wrap:not(:has(> .wrap)), #testimonials.wrap:not(:has(> .wrap)), #stay.wrap:not(:has(> .wrap)), #faq.wrap:not(:has(> .wrap)), #answered.wrap:not(:has(> .wrap)), #closing-cta.wrap:not(:has(> .wrap)), #cta.wrap:not(:has(> .wrap)), .section.wrap.band:not(:has(> .wrap)) { width: 100%; max-width: none; padding-inline: 1rem; } #featured-tour.wrap:not(:has(> .wrap)) > *, #book.wrap:not(:has(> .wrap)) > *, #quick-answer.wrap:not(:has(> .wrap)) > *, #key-takeaways.wrap:not(:has(> .wrap)) > *, #decision-picker.wrap:not(:has(> .wrap)) > *, #decision-picker-section.wrap:not(:has(> .wrap)) > *, #categories.wrap:not(:has(> .wrap)) > *, #quick-comparison.wrap:not(:has(> .wrap)) > *, #why-here.wrap:not(:has(> .wrap)) > *, #when-to-go.wrap:not(:has(> .wrap)) > *, #what-you-see.wrap:not(:has(> .wrap)) > *, #spot-map.wrap:not(:has(> .wrap)) > *, #testimonials.wrap:not(:has(> .wrap)) > *, #stay.wrap:not(:has(> .wrap)) > *, #faq.wrap:not(:has(> .wrap)) > *, #answered.wrap:not(:has(> .wrap)) > *, #closing-cta.wrap:not(:has(> .wrap)) > *, #cta.wrap:not(:has(> .wrap)) > *, .section.wrap.band:not(:has(> .wrap)) > * { width: min(100%, var(--maxw)); margin-inline: auto; } } /* THE HOMEPAGE RHYTHM (rule 37), in document order. No two adjacent sections share a treatment, and the figure repeats deliberately rather than randomly: 1 featured-tour ..... paper 2 quick-answer ...... tint 3 key-takeaways ..... paper 4 ticket-options .... wash 5 quick-comparison .. paper 6 price-levels ...... INK-DARK 7 why-here .......... tint 8 when-to-go ........ paper 9 what-you-see ...... wash 10 feeding ........... paper 11 spot-map .......... edge 12 testimonials ...... INK-DARK 13 stay .............. tint 14 faq ............... paper 15 answered .......... wash 16 closing-cta ....... INK-DARK Ids beat the band-* classes on specificity, so the rhythm holds even if page markup labels a section differently. The three ink-dark sections also need the band's token flip, which the .band-dark class in Part 1 provides and which the markup applies alongside these ids. */ #featured-tour, #book { --band-bg: var(--paper); overflow: clip; } #quick-answer, #why-here, #stay { --band-bg: var(--tint); } #key-takeaways, #quick-comparison, #when-to-go, #feeding, #faq { --band-bg: var(--paper); } #ticket-options, #what-you-see, #answered { --band-bg: var(--wash); } #spot-map { --band-bg: var(--edge); --band-edge: 1px solid var(--line); } #price-levels, #testimonials, #closing-cta { --band-bg: var(--inv); } /* An unbanded homepage section paints the ground EXPLICITLY rather than inheriting the body colour: a rule-37 check reads each section's own computed background, and a transparent one reads as "no treatment" even when it looks right on screen. */ main > .section[id] { background: var(--band-bg, var(--paper)); } /* A banded section's own intro copy spans the band, and its figure gets a band-matched frame. */ .section[class*="band-"] > p, .section.band > p { max-width: none; } .section-figure { background: var(--paper-2); border: 1px solid var(--line); } /* ============================================================ FLOODED STAGE LAYER , Part 2 of 2 Heading rule, rule-27 tables, rule-30 mixed card grid, collage, sticky bar, the interactive blocks' controls, and the page's motion (with its reduced-motion guard). ============================================================ */ /* ---- 4. HEADING RULE (replaces the donor's dashed border-image, which was built for a light ground). A gold-to-teal hairline that fades out to the right, so the H2 reads as a stage edge rather than a boxed heading. This is also animated element #2 (see MOTION). ---- */ .section > h2:first-child, .section > .wrap > h2:first-child, .rule-h2 { position: relative; border-bottom: 0; border-image: none; padding-bottom: var(--s2); } .section > h2:first-child::after, .section > .wrap > h2:first-child::after, .rule-h2::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; border-radius: 2px; background: linear-gradient(90deg, var(--accent) 0%, var(--brand) 26%, rgba(23,84,107,0) 64%); background-size: 220% 100%; background-position: 0% 0; } /* On the ink-dark band the same rule flips to the band's own coral link colour, because the coral-red booking fill would disappear into the navy. */ .band-dark .rule-h2::after, .band-c .rule-h2::after, .band-inverse .rule-h2::after, .band-dark > .wrap > h2:first-child::after { background: linear-gradient(90deg, var(--inv-link) 0%, #7FB0C4 26%, rgba(127,176,196,0) 64%); background-size: 220% 100%; } /* ---- 5. RULE 27: TABLES ARE DESIGNED ------------------------------------------- */ /* Container: rounded, bordered, its own horizontal scroll on phones (compile.mjs wraps every bare
in .table-scroll). Header row: the paper-2 tint in the display font. Rows: zebra + a hover lift. Numbers: right-aligned tabular figures. */ .table-scroll { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-color: var(--ctl-line) var(--surface); } .table-scroll > table, .prose table, .keyfacts, .cmp-table, .matrix-table, .fare-table, .explorer-table, .ix-table { background: var(--surface); color: var(--ink); } table th, table td, .prose th, .prose td { border-bottom: 1px solid var(--line-soft); padding: .8rem 1rem; } table thead th, .prose thead th { background: var(--paper-2); font-family: var(--display); font-weight: 700; color: var(--ink); letter-spacing: .01em; border-bottom: 1px solid var(--line); white-space: nowrap; } table tbody tr:nth-child(even) > td { background: var(--surface-2); } table tbody tr:hover > td { background: rgba(23,84,107,.07); } .band-dark table tbody tr:hover > td, .band-inverse table tbody tr:hover > td, .band-c table tbody tr:hover > td { background: rgba(242,160,143,.10); } td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; } .keyfacts { border-color: var(--line); border-radius: var(--radius); } .keyfacts th { background: var(--paper-2); } .cmp-table th:first-child, .cmp-table td:first-child { box-shadow: 1px 0 0 var(--line); } .matrix-table { border-color: var(--line); } .matrix-table thead th { box-shadow: 0 1px 0 var(--line); } .fare-table td.num, .explorer-table td.num { color: var(--gold); } /* A table caption is a real label, not decoration: it names the window a share belongs to, which is a binding rule on this site (kaiyukan.json > _rules.price_window). */ .tbl-cap { caption-side: top; text-align: left; font-size: var(--step--1); color: var(--ink-soft); padding: 0 0 var(--s2); max-width: 70ch; } /* The published-history table folds away behind its own summary so the bookable window stays the headline. It is inside a band that flips its tokens, so every colour here is a token. */ .price-history { margin: var(--s4) 0 0; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); overflow: hidden; } .price-history > summary { cursor: pointer; padding: .8rem 1rem; min-height: 44px; font-family: var(--display); font-weight: 700; color: var(--ink); list-style: none; display: flex; align-items: center; gap: .5rem; } .price-history > summary::-webkit-details-marker { display: none; } .price-history > summary::before { content: "+"; font-weight: 800; color: var(--link); } .price-history[open] > summary::before { content: "\2212"; } .price-history > summary:focus-visible { outline: 3px solid var(--focus); outline-offset: -3px; } .price-history > table { width: 100%; } .price-history > p { padding: 0 1rem var(--s3); margin: var(--s2) 0 0; } .price-history-table { display: block; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; } /* ---- The five-aquarium price comparison (a sub-block inside #price-levels) ------------- */ /* It sits on the ink-dark band, so every colour is a token and flips with the band. The site's own row is marked, but NOT dressed up: this is a table of what admission costs, not a league table, and the row that stands out is simply the one the reader is here for. */ .cmp-h { font-size: var(--step-1); margin-top: var(--s5); } .price-compare-table td small { display: block; font-weight: 400; opacity: .8; font-size: .78em; } .price-compare-table tbody tr.is-self > td { background: var(--surface-2); } .price-compare-table tbody tr.is-self > td:first-child { box-shadow: inset 3px 0 0 var(--link), 1px 0 0 var(--line); } .cmp-none { opacity: .72; font-style: italic; white-space: normal; } .cmp-honest { margin-top: var(--s3); max-width: 78ch; } /* ---- The venue's own set tickets (a sub-block inside #ticket-options) ------------------ */ /* Deliberately CTA-free: none of these three is sold through the booking link on this page, so a "Check availability" button on one would send the reader somewhere that does not sell it. */ .set-tickets { margin-top: var(--s5); } .set-mechanic { max-width: 78ch; } .set-card .pc-tag { background: var(--gold-soft); color: var(--gold-ink); } .set-addons { list-style: none; margin: var(--s2) 0 0; padding: 0; border-top: 1px solid var(--line-soft); } .set-addons li { display: flex; justify-content: space-between; gap: .75rem; align-items: baseline; padding: .45rem 0; border-bottom: 1px solid var(--line-soft); font-size: var(--step--1); } .set-addons li b { font-variant-numeric: tabular-nums; white-space: nowrap; } .set-addons li.is-peak { opacity: .85; } .set-addons li.is-peak span::after { content: ""; } /* Hand-authored SVG data figures render at 1 viewBox unit = 1 CSS px and scroll inside their own container rather than shrinking to fit: scaled down, their 11-13px labels would fall below a legible size, which is the whole point of drawing them rather than generating an image. */ .price-share-chart { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; margin: var(--s4) 0 0; } .price-share-chart svg { width: 640px; max-width: none; height: auto; display: block; } /* Homepage: the seat-zone comparison and the what-your-seat-includes matrix both STACK into cards under 640px instead of scrolling. Any other table with per-cell data-labels inside those two sections gets the same treatment. */ @media (max-width: 640px) { .cmp-table, .matrix-table, .ix-table, .stack-cards { font-size: var(--step--1); } .stack-cards thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; padding: 0; } .stack-cards, .stack-cards tbody, .stack-cards tr, .stack-cards td { display: block; width: 100%; } .stack-cards tr { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); margin-bottom: var(--s3); overflow: hidden; } .stack-cards tbody tr:nth-child(even) > td { background: transparent; } .stack-cards td { display: grid; grid-template-columns: 7.5rem 1fr; gap: .6rem; align-items: baseline; padding: .5rem .9rem; border-bottom: 1px solid var(--line-soft); text-align: left; } .stack-cards td:last-child { border-bottom: 0; } .stack-cards td::before { content: attr(data-label); font-family: var(--display); font-weight: 700; color: var(--ink-soft); font-size: .78rem; } .stack-cards td:first-child { grid-template-columns: 1fr; background: var(--paper-2); font-size: var(--step-0); padding-top: .7rem; } .stack-cards td:first-child::before { display: none; } .stack-cards td.num { text-align: left; white-space: normal; } /* the .matrix-table stack already exists above at 768px; make sure it never re-scrolls */ .matrix-table { border: 0; background: transparent; } /* a stacked table must not also try to scroll sideways inside its container */ .table-scroll:has(> .cmp-table), .table-scroll:has(> .matrix-table), .table-scroll:has(> .ix-table), .table-scroll:has(> .stack-cards) { overflow-x: visible; border: 0; background: transparent; box-shadow: none; } /* .ix-table carries a min-width for the desktop grid; stacked, it must not force it. */ .ix-table { min-width: 0 !important; } } @supports selector(:has(*)) { @media (max-width: 640px) { #quick-comparison table:has(td[data-label]), #price-levels table:has(td[data-label]), #when-to-go table:has(td[data-label]), #spot-map table:has(td[data-label]) { display: block; } #quick-comparison table:has(td[data-label]) thead, #price-levels table:has(td[data-label]) thead, #when-to-go table:has(td[data-label]) thead, #spot-map table:has(td[data-label]) thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; padding: 0; } #quick-comparison table:has(td[data-label]) tbody, #price-levels table:has(td[data-label]) tbody, #when-to-go table:has(td[data-label]) tbody, #spot-map table:has(td[data-label]) tbody, #quick-comparison table:has(td[data-label]) tr, #price-levels table:has(td[data-label]) tr, #when-to-go table:has(td[data-label]) tr, #spot-map table:has(td[data-label]) tr, #quick-comparison table:has(td[data-label]) td, #price-levels table:has(td[data-label]) td, #when-to-go table:has(td[data-label]) td, #spot-map table:has(td[data-label]) td { display: block; width: 100%; } #quick-comparison table:has(td[data-label]) tr, #price-levels table:has(td[data-label]) tr, #when-to-go table:has(td[data-label]) tr, #spot-map table:has(td[data-label]) tr { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); margin-bottom: var(--s3); overflow: hidden; } #quick-comparison table:has(td[data-label]) td, #price-levels table:has(td[data-label]) td, #when-to-go table:has(td[data-label]) td, #spot-map table:has(td[data-label]) td { display: grid; grid-template-columns: 7.5rem 1fr; gap: .6rem; text-align: left; padding: .5rem .9rem; } #quick-comparison table:has(td[data-label]) td::before, #price-levels table:has(td[data-label]) td::before, #when-to-go table:has(td[data-label]) td::before, #spot-map table:has(td[data-label]) td::before { content: attr(data-label); font-family: var(--display); font-weight: 700; color: var(--ink-soft); font-size: .78rem; } } } /* ---- 6. RULE 30: MIXED LAYOUT, NEVER A UNIFORM STACK ---------------------------- */ /* A listing of 2+ items is one full-width LEAD row plus a count-aware card grid. 3-up above 1040px, 2-up 761-1040px, 1-up below 761px as an image-LEFT horizontal card. */ .cards-3 { grid-template-columns: repeat(3, minmax(0,1fr)); align-items: stretch; } .cards-3 .rcard { background: var(--surface); border-color: var(--line); } .cards-3 .rcard:hover { border-color: var(--brand); } .cards-3 .rcard .rc-media, .related .rcard .rc-media { background: var(--paper-2); } .cards-3 .rcard.is-popular, .product-card.is-popular, .tour-row.is-lead { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), var(--shadow); } @media (min-width: 761px) and (max-width: 1040px) { .cards-3, .cards-3.cards-n2 { grid-template-columns: repeat(2, minmax(0,1fr)); } .cards-3.cards-n1 { grid-template-columns: minmax(0, 30rem); justify-content: start; } } @media (max-width: 760px) { .cards-3, .cards-3.cards-n1, .cards-3.cards-n2 { grid-template-columns: 1fr; } .cards-3 .rcard { flex-direction: row; align-items: stretch; } .cards-3 .rcard .rc-media { width: 38%; flex: none; aspect-ratio: 1/1; } .cards-3 .rcard .rc-media img { height: 100%; } .cards-3 .rcard .rc-body { padding: var(--s3); gap: .4rem; } .cards-3 .rcard .rc-body .btn { width: 100%; } } /* the lead row: wider media, gold edge, its price and includes list carrying the weight */ .tour-row { background: var(--surface); border-color: var(--line); } .tour-row h3 a { color: var(--ink); } .tour-row h3 a:hover { color: var(--brand); } .tour-row.is-lead { background: linear-gradient(180deg, var(--surface) 0%, var(--paper-2) 100%); } .tour-row.is-lead.has-media { grid-template-columns: minmax(240px, 34%) 1fr auto; gap: var(--s4); } .tour-row.is-lead .tr-media img { min-height: 200px; border-radius: var(--radius-sm); } .tour-row.is-lead h3 { font-size: var(--step-1); } .tour-row.is-lead .tr-price { font-size: var(--step-2); } @media (max-width: 860px) { .tour-row.is-lead.has-media { grid-template-columns: 1fr; } } .pc-chip { background: var(--surface-2); border-color: var(--line); color: var(--ink-soft); } .tour-picks { background: var(--paper-2); border-color: var(--line); } .tour-picks .tp-card { background: var(--surface); border-color: var(--line); } .tour-picks .tp-title a { color: var(--ink); } .tour-picks .tp-title a:hover { color: var(--brand); } .tour-picks .tp-proof .gold, .cta-proof .gold, .sticky-cta .sc-proof .gold, .bp-rating .gold { color: var(--gold); } .cta-box { background: var(--paper-2); border-color: var(--line); border-top-color: var(--accent); } .cta-box .cb-h { color: var(--ink); } .booking-panel, .quick-answer, .quick-answer-box, .honesty, .fare-snapshot, .infogain, .review-card, .testimonial-card, .station-card, .season-card, .hotel-card, .wine-card, .faq details, .dep-panel, .fare-checker, .decision-picker, .author-block, .trust { background: var(--surface); border-color: var(--line); } .author-block, .trust, .explorer-controls { background: var(--paper-2); } .author-block img.avatar { border-color: var(--surface); } .infogain { background: var(--paper-2); border-left-color: var(--gold); } .infogain .tag { background: var(--gold-soft); color: var(--gold-ink); } .cat-card { background: var(--surface); border-color: var(--line); border-left-color: var(--brand); color: var(--ink); } .cat-card:hover { border-left-color: var(--accent); } .answered-group { border-top-color: var(--brand); } .answered-group li a { color: var(--ink); text-decoration-color: var(--line); } .answered-group li a:hover { color: var(--brand); } .takeaways-list li::before, .opt-includes li::before { color: var(--brand); } .timeline { border-left-color: var(--line); } .timeline li::before { background: var(--accent); border-color: var(--paper); } /* photo collage (rule 32): 4-col mosaic with a 2x2 hero tile, 3-col tablet, 2-col phone */ .photo-collage { gap: .55rem; } .pcol-tile { background: var(--paper-2); box-shadow: 0 0 0 1px var(--line) inset; } .pcol-tile:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; } .pcol-cap { background: linear-gradient(180deg, rgba(3,24,31,0) 0%, rgba(3,24,31,.82) 100%); color: #fff; } /* ---- 7. STICKY MOBILE BAR ------------------------------------------------------- */ .sticky-cta { background: rgba(7,42,52,.97); border-top: 1px solid var(--line); box-shadow: 0 -8px 24px rgba(0,0,0,.35); /* The dark ground was added here without flipping the tokens, so .sc-proof inherited the light-ground --ink and the whole proof line rendered at 1.07:1, effectively invisible, on all 39 pages. --gold was a light-ground token too (2.14:1 for the star). Flip both, plus the focus ring, which was 2.22:1 against this bar (Oleg, 2026-09-09). */ --ink: var(--inv-ink); --ink-soft: var(--inv-soft); --gold: #F0C48A; --focus: var(--focus-inv); color-scheme: dark; } .sticky-cta .sc-proof { color: var(--ink); white-space: normal; line-height: 1.25; max-height: 2.6em; overflow: hidden; } .sticky-cta .btn-primary { color: var(--accent-ink); } @media (min-width: 761px) { .sticky-cta { border: 1px solid var(--line); } } @media (max-width: 360px) { .sticky-cta { gap: .55rem; padding-inline: .6rem; } .sticky-cta .btn { padding-inline: .9rem; } } /* ---- 8. THE THREE INTERACTIVE BLOCKS' CONTROLS ---------------------------------- */ /* Chips are >=44px tall, carry a visible focus ring, and the active state is the CTA gold with dark ink (never white-on-teal, which failed AA). Every block's status line is an aria-live region and is styled as one so a filter change is visible, not just audible. */ .chip, .decision-picker .dp-opt, .fare-checker .fc-opt, .station-explorer .se-chip { min-height: 44px; background: var(--surface-2); border: 1.5px solid var(--ctl-line); color: var(--ink); font-family: var(--display); font-weight: 700; } .chip:hover, .decision-picker .dp-opt:hover, .fare-checker .fc-opt:hover, .station-explorer .se-chip:hover { border-color: var(--brand); color: var(--brand); background: var(--surface); } .chip.is-active, .chip[aria-pressed="true"], .decision-picker .dp-opt.is-on, .fare-checker .fc-opt.is-on, .station-explorer .se-chip.is-active { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); } .chip:focus-visible, .decision-picker .dp-opt:focus-visible, .fare-checker .fc-opt:focus-visible, .station-explorer .se-chip:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; } .decision-picker .dp-q legend, .fare-checker .fc-q legend, .ride-planner .rp-q legend { color: var(--ink); } .decision-picker .dp-summary, .decision-picker .dp-facts span { background: var(--surface-2); color: var(--ink); } .decision-picker .dp-card { background: var(--paper-2); border-color: var(--line); } .decision-picker[data-state="picked"] .dp-card { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); } .decision-picker .dp-media { background: var(--paper-2); } .ride-planner .dp-card.is-top { box-shadow: inset 0 0 0 2px var(--accent); } .fare-checker .fc-nums li { background: var(--surface-2); } .fare-checker .fc-nums .fc-v, .fare-checker .fc-verdict { color: var(--gold); } .fare-checker .fc-closed-note { color: var(--ink); } .station-explorer .se-group, .station-list .sl-item { background: var(--surface); border-color: var(--line); border-left-color: var(--brand); } p[aria-live], .js-status, .explorer-status, .se-status, .dep-status, .picker-status { display: block; max-width: none; margin: var(--s3) 0; padding: .55rem .85rem; background: var(--surface-2); border-left: 3px solid var(--brand); border-radius: var(--radius-sm); color: var(--ink); font-size: var(--step--1); font-weight: 600; } @supports (background: color-mix(in srgb, red 10%, transparent)) { p[aria-live], .js-status, .explorer-status, .se-status, .dep-status, .picker-status { background: color-mix(in srgb, var(--brand) 12%, transparent); } } /* ---- 9. MOTION ------------------------------------------------------------------ Three animated elements, all CSS-only, all decorative, none of them ever gating content: (1) STAGE DRIFT , a slow warm/teal light wash behind the hero band (#featured-tour / .band-stage). Absolutely positioned, transform+opacity only, so zero layout shift. (2) HEADING SHEEN , the gold hairline under every section H2 slowly sweeps its gradient. The rule is fully painted at every frame; the animation only moves the highlight. (3) CARD RISE , a staggered settle on card grids, driven by the scroll timeline where the browser supports it. TRANSFORM ONLY, never opacity: a card is 100% visible at progress 0, so with JS off, an unsupported browser, or a crawler, every card still reads. (4) PIN PULSE on the route map's "you are here" ring (kept from the scaffold). All four are declared inside prefers-reduced-motion: no-preference AND explicitly switched off in the reduce block below, which also pins each one to its end state. ------------------- */ #featured-tour::before, .band-stage::before { content: ""; position: absolute; inset: -12% -8% auto -8%; height: 145%; z-index: 0; pointer-events: none; background: radial-gradient(46% 62% at 22% 10%, rgba(179,46,35,.10), rgba(179,46,35,0) 62%), radial-gradient(42% 56% at 78% 2%, rgba(23,84,107,.14), rgba(23,84,107,0) 66%); } #featured-tour > *, .band-stage > * { position: relative; z-index: 1; } @keyframes stage-drift { from { transform: translate3d(-2.4%, 0, 0) scale(1); opacity: .82; } to { transform: translate3d(2.4%, 1.6%, 0) scale(1.07); opacity: 1; } } @keyframes h-sheen { from { background-position: 0% 0; } to { background-position: 100% 0; } } @keyframes card-rise { from { transform: translateY(14px); } to { transform: translateY(0); } } @media (prefers-reduced-motion: no-preference) { #featured-tour::before, .band-stage::before { animation: stage-drift 26s ease-in-out infinite alternate; } .section > h2:first-child::after, .section > .wrap > h2:first-child::after, .rule-h2::after { animation: h-sheen 11s ease-in-out infinite alternate; } @supports (animation-timeline: view()) { .cards-3 > .rcard, .stat-grid > .stat-tile, .testimonials-grid > .testimonial-card, .hotel-grid > .hotel-card, .photo-collage > .pcol-tile, .answered-grid > .answered-group, .season-grid > .season-card, .station-grid > .station-card, .cat-grid > .cat-card, .tour-list > .tour-row, .decision-picker .dp-results > .dp-card { animation: card-rise linear both; animation-timeline: view(); animation-range: entry 6% cover 24%; } } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } #featured-tour::before, .band-stage::before { animation: none; transform: none; opacity: 1; } .section > h2:first-child::after, .section > .wrap > h2:first-child::after, .rule-h2::after { animation: none; background-position: 0% 0; } .cards-3 > .rcard, .stat-grid > .stat-tile, .testimonials-grid > .testimonial-card, .hotel-grid > .hotel-card, .photo-collage > .pcol-tile, .answered-grid > .answered-group, .season-grid > .season-card, .station-grid > .station-card, .cat-grid > .cat-card, .tour-list > .tour-row, .decision-picker .dp-results > .dp-card { animation: none; transform: none; } .pcol-tile img, .cat-card, .btn, .chip, .sticky-cta { transition: none; } } /* ============================================================ CONTRAST + TYPE LEDGER, "Kuroshio" (computed, not estimated: WCAG 2.x relative luminance) LIGHT BANDS paper #E6EDF1 | tint #DCE6EC | wash #CFDDE6 | edge #F2F7FA | surface #F4F8FB ink #0B2A3A on paper 12.62 | tint 11.78 | wash 10.76 | edge 13.84 | surface 13.06 ink-soft #3B5B6B on paper 6.13 | tint 5.73 | wash 5.23 | edge 6.73 | surface 6.35 link/accent #B32E23 on paper 5.33 | tint 4.97 | wash 4.54 | edge 5.84 | surface 5.51 brand #17546B on paper 7.05 | tint 6.58 | wash 6.01 | edge 7.73 gold #8A4F05 on paper 5.54 | tint 5.18 | wash 4.73 | surface 5.74 CTA: #fff on accent #B32E23 6.30 | on hover #8F2419 8.06 btn-brand: #fff on brand-fill #17546B 8.34 | on hover #0F3F51 10.24 glyphs: ok #17694A on surface 5.72 | alert #B32E23 on surface 5.51 badges: gold-ink #6B3D04 on gold-soft #F6E7CF 7.94 non-text: ctl-line #6E8896 3.06 on paper; star-track #A9BECB 1.72 (decorative track only) INK-DARK INVERSE BAND (#price-levels, #testimonials, #closing-cta, .band-dark), which carries its OWN link and CTA colours because the coral-red booking fill sits at 2.37:1 on navy: ink #EAF2F6 on #0B2A3A 13.17 | card #143B4E 10.55 soft #A9C4CE on #0B2A3A 8.16 LINK #F2A08F on #0B2A3A 7.25 CTA: #0B2A3A on inv-cta #F2A08F 7.25, and that fill reads 7.25 against the band itself footer: body #B9D2D8 on #0B2A3A 9.34 | link #E9F2F3 12.53 | hover #F2A08F 7.25 Lowest text pair shipped anywhere: 4.54 (link on the wash band). AA floor is 4.5. TYPE (rule 31): a bolded lead is BODY COPY. .lead-p = --step-0 clamp(1.00,.96+.2vw,1.12)rem and .lede = --step-lead clamp(1.05,1+.25vw,1.22)rem; H2 = --step-3 clamp(1.85,1.5+1.8vw,3.1)rem. Worst-case ratio H2/lead: 1.76x at 320px, rising to 2.13x at 976px. Floor is 1.7x. MOTION (rule 37), four CSS-only decorative animations, every one guarded by prefers-reduced-motion and none of them gating content: 1 hero light drift behind #featured-tour (transform + opacity on a ::before) 2 heading-rule sheen under every section H2 (the rule is fully painted at every frame) 3 staggered card rise on card grids, scroll-driven, TRANSFORM ONLY so a card is fully visible at progress 0 for a crawler, a no-JS reader or an unsupported browser 4 the feeding-clock sweep line, declared in build/compile.mjs > IX_CSS, which moves a thin decorative marker across a chart whose dots and labels are all static markup ============================================================ */