/* ============================================================ Things to Do in Dubrovnik - Phase 3 Design System IDENTITY: "Barragan Rose & Volcanic" (site.config.md). A warm adobe ground with volcanic charcoal ink, hairline warm rules, and a single cochineal-rose accent reserved for the primary CTA. Links and secondary structure carry a Talavera jade; ratings an amber. Soft-square 8px radii. Mobile-first, zero heavy deps, system fonts to protect LCP. ============================================================ */ /* ---- COLOR TOKENS (light, purposeful) ---- */ :root { /* ---- Palette "Adriatic Turquoise" (site.config.md; approved by Oleg 2026-09-08, "let's do turquise beach tpye of pallete"). The eleven tokens marked APPROVED are verbatim from research/layout-approval.md and must not be re-tuned. The rest are supporting tints derived from them, not separate colour decisions. ---- */ --ink: #0F2E2C; /* APPROVED - primary text: deep pine-teal */ --ink-soft: #446865; /* APPROVED - secondary text */ --paper: #F5FAF9; /* APPROVED - page ground: sea haze */ --paper-2: #DFF0EE; /* APPROVED - raised panels (info blocks, table headers) */ --surface: #FFFFFF; /* APPROVED - cards */ --surface-2: #F0F8F7; /* derived: inputs, one step off --paper */ --line: #C4DEDA; /* APPROVED - hairline borders on light */ --brand: #0B7A75; /* APPROVED - links, secondary buttons, structural fills (5.2:1 on white, AA) */ --brand-deep: #096660; /* APPROVED - nav/footer fills, deep bands */ --accent: #C8501F; /* APPROVED - terracotta, CTA ONLY (white text, 4.5:1, AA) */ --accent-deep:#B54A26; /* APPROVED - CTA hover */ --accent-ink: #ffffff; /* text colour that sits on --accent */ --gold: #B0862B; /* APPROVED - real ratings only */ --gold-soft: #F3E7C8; /* derived: amber wash for badge backgrounds (DARK text on top) */ --gold-ink: #6B5015; /* derived: text colour that sits on --gold-soft */ --ok: #0B7A75; /* derived: same hue as --brand */ --warn: #B54A26; /* derived: same hue as --accent-deep */ /* ---- TYPE - assertive sans display + neutral sans body. System stacks, no webfont (protects LCP); contrast comes from weight and scale, an editorial feel. ---- */ --display: "Helvetica Neue", "Segoe UI", system-ui, Arial, sans-serif; --body: ui-sans-serif, system-ui, -apple-system, "Segoe UI", "Helvetica Neue", Arial, sans-serif; --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace; /* modular scale */ --step--1: clamp(.83rem, .8rem + .15vw, .92rem); --step-0: clamp(1rem, .96rem + .2vw, 1.12rem); --step-1: clamp(1.2rem, 1.1rem + .5vw, 1.5rem); --step-2: clamp(1.45rem, 1.25rem + 1vw, 2.1rem); --step-3: clamp(1.85rem, 1.5rem + 1.8vw, 3.1rem); --step-4: clamp(2.4rem, 1.8rem + 3vw, 4.4rem); /* spacing scale */ --s1:.4rem; --s2:.7rem; --s3:1.1rem; --s4:1.7rem; --s5:2.6rem; --s6:4rem; --s7:6rem; --maxw: 72rem; /* soft-square: reads kitchen-clean, not scenic-rustic */ --radius: 8px; --radius-sm: 5px; --shadow: 0 1px 2px rgba(15,46,44,.05), 0 10px 28px rgba(15,46,44,.09); } /* ---- RESET-ISH ---- */ *,*::before,*::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--body); font-size: var(--step-0); line-height: 1.65; -webkit-font-smoothing: antialiased; } img { max-width: 100%; display: block; } a { color: var(--brand); text-underline-offset: 3px; } h1,h2 { font-family: var(--display); line-height: 1.05; letter-spacing: -.025em; font-weight: 800; margin: 0 0 var(--s3); color: var(--ink); } h3 { font-family: var(--display); line-height: 1.2; letter-spacing: -.01em; font-weight: 700; margin: 0 0 var(--s3); color: var(--ink); } h1 { font-size: var(--step-4); } h2 { font-size: var(--step-3); margin-top: var(--s6); } h3 { font-size: var(--step-1); margin-top: var(--s4); } p { margin: 0 0 var(--s3); max-width: 64ch; } :focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: 4px; } /* ---- LAYOUT ---- */ .wrap { width: min(100% - 2rem, var(--maxw)); margin-inline: auto; } .wrap-narrow { width: min(100% - 2rem, 50rem); margin-inline: auto; } .section { padding-block: var(--s6); } .section + .section { padding-top: 0; } .skip-link { position:absolute; left:-999px; top:0; background:var(--brand); color:#fff; padding:.6rem 1rem; z-index:50; font-weight:700; } .skip-link:focus { left:8px; top:8px; } /* ---- CTA ---- */ .btn { display:inline-flex; align-items:center; gap:.5rem; justify-content:center; font-family: var(--display); font-weight:700; font-size: var(--step-0); padding: .85rem 1.4rem; border-radius: 999px; text-decoration:none; border:0; cursor:pointer; min-height: 48px; transition: transform .08s ease, background .15s ease; } .btn:active { transform: translateY(1px); } .btn-primary { background: var(--accent); color:var(--accent-ink); } .btn-primary:hover { background: var(--accent-deep); color:var(--accent-ink); } .btn-brand { background: var(--brand); color:#fff; } .btn-brand:hover { background: var(--brand-deep); } .btn-ghost { background: transparent; color: var(--ink); border:2px solid var(--line); } .btn-ghost:hover { border-color: var(--ink-soft); } /* ---- HEADER / NAV ---- */ .site-header { position: sticky; top:0; z-index:40; background: rgba(246,243,236,.9); backdrop-filter: blur(10px); border-bottom:1px solid var(--line); } /* NAV SIZING (rebuilt 2026-09-09). The previous pass added `white-space:nowrap` and stopped there. Measured over HTTP, that fix was treating the wrong thing: nowrap keeps a LABEL off a second line, but it cannot keep the ROW inside the content column, and the row had no room left. At 1440/1360/1280 the brand (326px) plus the ten items (810px) plus the gap came to exactly 1152px in a 1152px column: SLACK = 0. At 1100 it was -39px and at 1024 it was -105px, which pushed real horizontal page scroll (documentElement.scrollWidth 1114 on a 1024 viewport). With zero slack, anything that widens the row by a few pixels (browser zoom, a wider fallback face before the display font settles, a longer label) tips it over, which is what the screenshot shows. The old 1023px collapse point made it worse: the row already failed at about 1150px, so 1024-1150 was a dead zone, too narrow for the row and too wide for the menu. The row is now sized to FIT with real slack instead of being told not to wrap: the brand and the link type scale down between 1024 and 1440, the inter-item gap is fluid, the nav CTA is a compact pill rather than a full-size button, the brand never shrinks below its own text (so it can no longer be squeezed into the links), and the collapse point moved to 1023px only because the row genuinely fits from 1024 up now. Verified at 1024-1600 in 8px steps: minimum slack 44px. nowrap stays as a second line of defence. */ .nav { display:flex; align-items:center; justify-content:space-between; gap:clamp(.75rem, 1.4vw, 1.5rem); padding-block:.7rem; flex-wrap:nowrap; } .brand { font-family:var(--display); font-weight:800; font-size:clamp(1.02rem, .62rem + .62vw, 1.35rem); color:var(--ink); text-decoration:none; letter-spacing:-.02em; display:inline-flex; align-items:center; gap:.45rem; flex:0 0 auto; white-space:nowrap; } .brand-logo { width:28px; height:28px; border-radius:7px; display:block; flex:0 0 auto; } .brand b { color: var(--accent); } .nav-links { display:flex; gap:clamp(.62rem, .12rem + .78vw, 1.2rem); align-items:center; list-style:none; margin:0; padding:0; flex:0 1 auto; min-width:0; } /* nowrap: "Day Trips" broke onto a second line at 1440 and pushed the whole row out of alignment, on all 398 pages. A nav label is never a wrapping phrase. */ .nav-links li { white-space:nowrap; flex:0 0 auto; } .nav-links a { color:var(--ink); text-decoration:none; font-weight:600; font-size:clamp(.8rem, .68rem + .19vw, .92rem); white-space:nowrap; } .nav-links a:hover { color:var(--accent); } .nav-links a.btn-brand { color:#fff; } .nav-links a.btn-primary { color:#fff; } /* The shortlist pill was 159x51 in a row with no room to give. It stays the only filled target in the header, just sized for a nav bar rather than for a page body. */ .nav-links .btn { padding:.5rem clamp(.62rem, .2rem + .62vw, 1.05rem); min-height:0; border-radius:9px; line-height:1.15; } .nav-toggle { display:none; background:none; border:0; font-size:1.6rem; min-height:48px; min-width:48px; cursor:pointer; color:var(--ink); } /* Below 1024 the row cannot fit at any honest type size, so it becomes the menu. */ @media (max-width: 1023px) { .nav-toggle { display:block; } .nav-links { position:absolute; inset:100% 0 auto 0; flex-direction:column; align-items:flex-start; background:var(--paper-2); border-bottom:1px solid var(--line); padding:1rem; gap:1rem; display:none; } .nav-links[data-open="true"] { display:flex; } /* In the collapsed menu the links were 18px-tall tap targets. */ .nav-links a { font-size:1rem; display:flex; align-items:center; min-height:44px; width:100%; } .nav-links .btn { padding:.7rem 1.1rem; justify-content:center; } } /* Belt and braces: even if a future nav item overruns the budget, the header clips instead of giving all 398 pages a horizontally scrolling body. */ .site-header { overflow-x: clip; } /* ---- HTML SITEMAP: 398 links, so they read as columns rather than one long ribbon ---- */ .sitemap-list { list-style:none; margin:0 0 var(--s5); padding:0; columns: 2; column-gap: var(--s5); } .sitemap-list li { break-inside:avoid; margin:0 0 .35rem; font-size:var(--step--1); line-height:1.45; } .sitemap-list a { color:var(--ink); text-decoration:none; } .sitemap-list a:hover { color:var(--accent); text-decoration:underline; } @media (max-width: 640px) { .sitemap-list { columns: 1; } } /* ---- BREADCRUMB ---- */ .crumbs { font-size: var(--step--1); color: var(--ink-soft); padding-block: var(--s3); } .crumbs a { color: var(--ink-soft); } .crumbs span[aria-current] { color: var(--ink); font-weight:600; } /* ---- HERO: FULL-SCREEN BACKGROUND (this site's first screen, approved 2026-07-25: blue ice glittering on black sand, headline overlaid) ---- */ /* Vertically CENTRED, not bottom-anchored (Oleg, 2026-09-09). `align-items:flex-end` pinned the headline, the lede, the proof line and the shortlist button to the bottom edge of an 88svh band, leaving a large empty stripe under the header and putting the CTA within a few pixels of the fold. Centring moves the whole block up: at 390 the button's bottom goes from 676px to about 565px in an 844px viewport, so it clears the fold by a wider margin than before. */ .hero-full { min-height: 88svh; background-size: cover; background-position: center; display: flex; align-items: center; color: #fff; border-bottom: 3px solid var(--accent); } /* The padding that used to hold the copy off the bottom edge would now bias a centred block downwards, so it is balanced. */ .hero-full .hero-inner { padding-block: var(--s6); } .hero-full-inner { padding-block: var(--s7) var(--s6); } .hero-full h1 { color: #fff; max-width: 21ch; } .hero-full .lede { color: rgba(255,255,255,.9); max-width: 56ch; font-size: var(--step-1); } .hero-full .author-hook { color: rgba(255,255,255,.85); display:flex; align-items:center; gap:.6rem; font-size:var(--step--1); margin: var(--s3) 0 var(--s4); } .hero-full .author-hook a { color: #fff; } .hero-full .author-hook img { width:38px; height:38px; border-radius:50%; object-fit:cover; border:2px solid rgba(255,255,255,.5); } .hero-full-ghost { color:#fff; border-color: rgba(255,255,255,.55); } .hero-full-ghost:hover { border-color:#fff; } .hero-full .cta-proof { color: rgba(255,255,255,.92); } .hero-full .cta-proof .gold { color:#E9CE8A; } .hero-cta { margin: var(--s3) 0 0; } /* 72svh, not 78: on a 390px screen the hero used most of the first screen and the shortlist CTA still fell below it. */ @media (max-width: 640px) { .hero-full { min-height: 72svh; background-position: 64% center !important; } .hero-cta .btn-xl { width:100%; text-align:center; } } /* ---- HERO (money) - asymmetric split ---- */ .hero { display:grid; grid-template-columns: 1.15fr .85fr; gap: var(--s5); align-items:center; padding-top: var(--s5); } /* this site's signature: media on the LEFT, taller than wide never; text column right */ .hero--flip { grid-template-columns: .9fr 1.1fr; } .hero--flip .hero-media { order:-1; } .eyebrow { font-family:var(--display); text-transform:uppercase; letter-spacing:.14em; font-size:var(--step--1); color:var(--gold); font-weight:700; margin-bottom:var(--s2); } .hero h1 { margin-bottom: var(--s3); } .hero .author-hook { display:flex; align-items:center; gap:.6rem; font-size:var(--step--1); color:var(--ink-soft); margin-bottom:var(--s4); } .hero .author-hook img { width:38px; height:38px; border-radius:50%; object-fit:cover; border:2px solid var(--line); } .hero-media { aspect-ratio:16/9; border-radius:var(--radius); overflow:hidden; background:var(--surface); box-shadow:var(--shadow); } .hero-media img { width:100%; height:100%; object-fit:cover; } @media (max-width: 820px){ .hero{ grid-template-columns:1fr; align-items:start; } .hero--flip .hero-media { order:0; } } /* ---- QUICK ANSWER (answer-first) ---- */ .quick-answer { background: var(--surface); border:1px solid var(--line); border-left:5px solid var(--accent); color: var(--ink); border-radius: var(--radius); padding: var(--s4) var(--s5); margin-top: var(--s5); box-shadow: var(--shadow); } .quick-answer p { color:var(--ink); font-size: var(--step-1); max-width: 60ch; margin:0; } .quick-answer .qa-label { font-family:var(--display); text-transform:uppercase; letter-spacing:.14em; font-size:.72rem; color:var(--gold); margin-bottom:var(--s2); font-weight:700; } /* ---- KEY FACTS TABLE ---- */ .keyfacts { width:100%; border-collapse:collapse; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; } .keyfacts th, .keyfacts td { text-align:left; padding:.8rem 1rem; border-bottom:1px solid var(--line); vertical-align:top; } .keyfacts th { width:42%; font-family:var(--display); font-weight:700; color:var(--ink); background:var(--paper-2); } .keyfacts tr:last-child th, .keyfacts tr:last-child td { border-bottom:0; } @media (max-width:640px){ .keyfacts { display:block; overflow-x:auto; -webkit-overflow-scrolling:touch; } .keyfacts th { min-width: 9rem; } } /* ---- PRODUCT CARD (money component) ---- */ .product-card { display:grid; grid-template-columns: 1fr 1.2fr; gap:0; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow); } .product-card .pc-media { background:var(--paper-2); overflow:hidden; } .product-card .pc-media img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; } .product-card .pc-body { padding: var(--s4); display:flex; flex-direction:column; gap:var(--s2); } .pc-tag { align-self:flex-start; background:var(--gold-soft); color:var(--gold-ink); font-weight:700; font-size:.72rem; text-transform:uppercase; letter-spacing:.06em; padding:.25rem .6rem; border-radius:999px; } .pc-rating { font-weight:700; color:var(--ink); display:flex; align-items:center; gap:.45rem; flex-wrap:wrap; } .pc-rating .src { font-weight:500; color:var(--ink-soft); font-size:var(--step--1); } /* ---- STAR RATING (dependency-free) - set fill width inline: ratingValue/5*100% ---- */ .stars { position:relative; display:inline-block; vertical-align:middle; line-height:1; white-space:nowrap; font-size:1.05em; } .stars::before { content:"★★★★★"; color:var(--line); letter-spacing:2px; } .stars .stars-fill { position:absolute; top:0; left:0; overflow:hidden; white-space:nowrap; } .stars .stars-fill::before { content:"★★★★★"; color:var(--gold); letter-spacing:2px; } .stars-num { font-weight:700; color:var(--ink); } .trust .stars { font-size:1.15rem; margin-top:.2rem; } .pc-price { font-family:var(--display); font-size:var(--step-2); font-weight:800; color:var(--ink); } .pc-price small { font-size:var(--step--1); color:var(--ink-soft); font-weight:500; } @media (max-width:680px){ .product-card{ grid-template-columns:1fr; } .product-card .pc-media{ aspect-ratio:4/3; } } /* ---- PRICING & INCLUSIONS ---- */ .incl { display:grid; grid-template-columns:1fr 1fr; gap:var(--s4); } .incl ul { list-style:none; padding:0; margin:0; } .incl li { padding:.35rem 0 .35rem 1.6rem; position:relative; } .incl .yes::before { content:"✓"; position:absolute; left:0; color:var(--ok); font-weight:800; } .incl .no::before { content:"✕"; position:absolute; left:0; color:var(--accent); font-weight:800; } @media (max-width:600px){ .incl{ grid-template-columns:1fr; } } /* ---- ITINERARY ---- */ .timeline { list-style:none; margin:0; padding:0; border-left:3px solid var(--line); } .timeline li { position:relative; padding:0 0 var(--s4) var(--s4); } .timeline li::before { content:""; position:absolute; left:-9px; top:4px; width:15px; height:15px; border-radius:50%; background:var(--accent); border:3px solid var(--paper); } .timeline .t { font-family:var(--display); font-weight:700; } /* ---- PROS / CONS ---- */ .proscons { display:grid; grid-template-columns:1fr 1fr; gap:var(--s4); } .proscons .col { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:var(--s4); } .proscons h3 { margin-top:0; } .proscons ul { padding-left:1.1rem; margin:0; } .proscons li { margin-bottom:.5rem; } .proscons .pros { border-top:4px solid var(--ok); } .proscons .cons { border-top:4px solid var(--accent); } @media (max-width:600px){ .proscons{ grid-template-columns:1fr; } } /* ---- AUTHOR EXPERIENCE ---- */ .author-block { background:var(--paper-2); border:1px solid var(--line); border-radius:var(--radius); padding:var(--s5); display:grid; grid-template-columns:auto 1fr; gap:var(--s4); align-items:start; } .author-block img.avatar { width:84px; height:84px; border-radius:50%; object-fit:cover; border:3px solid var(--surface); box-shadow:var(--shadow); } .author-block .updated { font-size:var(--step--1); color:var(--ink-soft); margin-top:var(--s3); } @media (max-width:600px){ .author-block{ grid-template-columns:1fr; } } /* ---- TRUST STRIP ---- */ .trust { display:grid; grid-template-columns:repeat(4,1fr); gap:var(--s3); text-align:center; background:var(--paper-2); border:1px solid var(--line); border-radius:var(--radius); padding:var(--s4); } .trust .num { font-family:var(--display); font-size:var(--step-2); font-weight:800; color:var(--gold); } .trust .lbl { font-size:var(--step--1); color:var(--ink-soft); } @media (max-width:640px){ .trust{ grid-template-columns:repeat(2,1fr); gap:var(--s4); } } /* ---- FAQ (FAQPage) ---- */ .faq details { border:1px solid var(--line); border-radius:var(--radius-sm); background:var(--surface); padding:.4rem 1rem; margin-bottom:.7rem; } .faq summary { font-family:var(--display); font-weight:700; cursor:pointer; padding:.6rem 0; list-style:none; color:var(--ink); } .faq summary::-webkit-details-marker{ display:none; } .faq summary::after { content:"+"; float:right; color:var(--accent); font-weight:800; } .faq details[open] summary::after { content:"−"; } /* ---- RELATED TOURS ---- */ .related { display:grid; grid-template-columns:repeat(2,1fr); gap:var(--s4); } .related .rcard { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow); } .related .rcard .rc-media { aspect-ratio:4/3; background:var(--paper-2); } .related .rcard .rc-media img { width:100%; height:100%; object-fit:cover; } .related .rcard .rc-body { padding:var(--s3) var(--s4); } @media (max-width:600px){ .related{ grid-template-columns:1fr; } } /* 3-up card grid (homepage / hubs) */ .cards-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s4); } .cards-3 .rcard { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow); display:flex; flex-direction:column; } .cards-3 .rcard .rc-media { aspect-ratio:4/3; background:var(--paper-2); } .cards-3 .rcard .rc-media img { width:100%; height:100%; object-fit:cover; } .cards-3 .rcard .rc-body { padding:var(--s3) var(--s4) var(--s4); display:flex; flex-direction:column; gap:var(--s2); flex:1; } .cards-3 .rcard .rc-body .btn { margin-top:auto; } @media (max-width:820px){ .cards-3{ grid-template-columns:1fr; } } /* Product card upgrades: "best for" frame, benefit bullets, social proof, popular badge */ .pc-reviews { font-weight:500; color:var(--ink-soft); font-size:var(--step--1); } .pc-bestfor { align-self:flex-start; margin:0; background:var(--gold-soft); color:var(--gold-ink); font-weight:700; font-size:.7rem; text-transform:uppercase; letter-spacing:.05em; padding:.28rem .65rem; border-radius:999px; } .pc-points { list-style:none; padding:0; margin:.15rem 0 0; display:flex; flex-direction:column; gap:.4rem; } .pc-points li { position:relative; padding-left:1.45rem; font-size:var(--step--1); color:var(--ink); line-height:1.4; } .pc-points li::before { content:"✓"; position:absolute; left:0; top:-.02em; color:var(--accent); font-weight:800; } .rc-media, .pc-media { position:relative; } .pc-badge { position:absolute; top:.6rem; left:.6rem; z-index:1; background:var(--gold-soft); color:var(--gold-ink); font-weight:800; font-size:.7rem; text-transform:uppercase; letter-spacing:.05em; padding:.32rem .7rem; border-radius:999px; box-shadow:var(--shadow); } .cards-3 .rcard.is-popular, .product-card.is-popular { border-color:var(--gold); box-shadow:0 0 0 2px var(--gold), var(--shadow); } /* ---- CTA BANNER ---- */ .cta-banner { background:linear-gradient(120deg,#0B7A75,#083F3C); border:1px solid #083F3C; color:#fff; border-radius:var(--radius); padding:var(--s5); text-align:center; } .cta-banner h2, .cta-banner h3 { color:#fff; margin-top:0; } .cta-banner p { color:rgba(255,255,255,.82); max-width:52ch; margin-inline:auto; } /* ---- AVAILABILITY WIDGET (date -> affiliate check) ---- */ .availability { display:flex; gap:.7rem; align-items:center; flex-wrap:wrap; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:var(--s3) var(--s4); box-shadow:var(--shadow); } .availability .av-label { font-family:var(--display); font-weight:700; color:var(--ink); } .availability .av-date { padding:.7rem .8rem; border:1px solid var(--line); border-radius:var(--radius-sm); font:inherit; min-height:48px; background:var(--surface-2); color:var(--ink); color-scheme:light; } .availability .av-go, .availability .av-check { margin-left:auto; } .availability .av-msg { width:100%; margin:.3rem 0 0; color:var(--ok); font-weight:600; } @media (max-width:560px){ .availability .av-go, .availability .av-check { margin-left:0; width:100%; } } /* ---- FOOTER (the one deepest surface, near-black glacier navy) ---- */ .site-footer { background:#083F3C; color:#B7D2CF; 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:#DFF0EE; 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 #2C5D59; border-radius:50%; } .socials a:hover { border-color:#E08A5E; color:#E08A5E; } .disclosure { font-size:var(--step--1); color:#8FB3AF; border-top:1px solid #2C5D59; margin-top:var(--s5); padding-top:var(--s3); } .disclosure p { max-width:none; } @media (max-width:740px){ .footer-grid{ grid-template-columns:1fr; gap:var(--s4); } } /* ---- BLOG ---- */ .blog-hero { margin:var(--s5) 0 0; } .blog-hero img { width:100%; height:auto; aspect-ratio:16/9; object-fit:cover; border-radius:var(--radius); box-shadow:var(--shadow); } .blog-post .author-hook { display:flex; align-items:center; gap:.6rem; font-size:var(--step--1); color:var(--ink-soft); margin-top:var(--s3); } .blog-post .author-hook img { width:38px; height:38px; border-radius:50%; object-fit:cover; border:2px solid var(--line); } .prose { margin-top:var(--s5); } .prose > * { max-width:64ch; } .prose h2 { margin-top:var(--s6); } .prose h3 { margin-top:var(--s5); } .prose img { width:100%; max-width:100%; height:auto; border-radius:var(--radius); margin:var(--s4) 0; box-shadow:var(--shadow); } .prose figure { margin:var(--s4) 0; } .prose figcaption { font-size:var(--step--1); color:var(--ink-soft); margin-top:.4rem; } .prose ul, .prose ol { padding-left:1.3rem; } .prose li { margin-bottom:.4rem; } .prose blockquote { margin:var(--s4) 0; padding:.4rem 0 .4rem var(--s4); border-left:4px solid var(--accent); color:var(--ink-soft); font-style:italic; } .prose table { width:100%; max-width:100%; border-collapse:collapse; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; margin:var(--s4) 0; font-size:var(--step--1); } .prose th, .prose td { text-align:left; padding:.7rem .9rem; border-bottom:1px solid var(--line); vertical-align:top; } .prose thead th { background:var(--paper-2); font-family:var(--display); color:var(--ink); } .prose tbody tr:last-child td { border-bottom:0; } @media (max-width:640px){ .prose table { display:block; overflow-x:auto; -webkit-overflow-scrolling:touch; } .table-scroll { overflow-x:auto; -webkit-overflow-scrolling:touch; } .table-scroll > table { min-width: 640px; } } .prose a { color:var(--accent); } /* CRITICAL: .prose a (0,1,1) out-specifies .btn-primary (0,1,0); without these overrides a button inside an article body renders accent-on-accent = INVISIBLE TEXT. */ .prose a.btn-primary, .prose a.btn-primary:hover { color:#fff; } .prose a.btn-brand { color:#fff; } .prose a.btn-ghost { color:var(--ink); } /* Hotel affiliate pill (Expedia via Travelpayouts): deliberately amber + outline so it reads as a secondary lodging action, distinct from the cyan GetYourGuide tour buttons. Explicit colors defeat the .prose a override trap above. */ .hotel-cta, .prose a.hotel-cta { display:inline-flex; align-items:center; gap:.35rem; font-family:var(--display); font-weight:800; font-size:var(--step--1); line-height:1; padding:.6rem 1.1rem; border-radius:10px; border:1px solid var(--gold); color:#fff; background:var(--gold); text-decoration:none; white-space:nowrap; box-shadow:var(--shadow); } .hotel-cta:hover, .prose a.hotel-cta:hover { background:#B54A26; color:#fff; text-decoration:none; } .hotel-row { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:.6rem .9rem; margin:.2rem 0 var(--s3); padding:.7rem .95rem; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-sm); } .hotel-row .hr-name { font-weight:700; color:var(--ink); } .blog-cta { background:var(--paper-2); border:1px solid var(--line); border-left:4px solid var(--accent); border-radius:var(--radius); padding:var(--s4) var(--s5); margin:var(--s6) 0 0; } .blog-cta h2 { margin-top:0; } .blog-cta p { margin-bottom:var(--s3); } .blog-cta-btns { display:flex; gap:.6rem; flex-wrap:wrap; align-items:center; } /* ---- INFOGRAPHIC (generated SVG) ---- */ .infographic { margin:var(--s4) 0; } .infographic img, .infographic svg { width:100%; height:auto; border-radius:var(--radius); border:1px solid var(--line); background:var(--surface); display:block; } .infographic figcaption { margin-top:.6rem; text-align:center; color:var(--ink-soft); } .embed + p, .embed + p.small, .video-grid + p { max-width:none; } /* information-gain block: fresh, sourced data competitors don't carry */ .infogain { background:var(--paper-2); border:1px solid var(--line); border-left:5px solid var(--gold); border-radius:var(--radius); padding:var(--s4) var(--s4) var(--s3); margin:var(--s5) 0; } .infogain .infogain-h { display:flex; align-items:center; flex-wrap:wrap; gap:.55rem; font-family:var(--display); font-weight:800; font-size:var(--step-1); line-height:1.1; margin:0 0 var(--s3); max-width:none; color:var(--ink); } .infogain .tag { font-family:var(--body); font-size:var(--step--1); font-weight:700; color:var(--gold-ink); background:var(--gold-soft); padding:.18rem .55rem; border-radius:999px; letter-spacing:.03em; text-transform:uppercase; } .infogain ul { list-style:none; margin:0; padding:0; display:grid; gap:var(--s3); } .infogain li { position:relative; padding-left:1.5rem; max-width:66ch; } .infogain li::before { content:""; position:absolute; left:0; top:.5em; width:.55rem; height:.55rem; background:var(--gold); border-radius:50%; } .infogain .src { display:block; font-size:var(--step--1); color:var(--ink-soft); margin-top:.2rem; } .infogain .src a { color:var(--ink-soft); } .infogain .infogain-note { font-size:var(--step--1); color:var(--ink-soft); margin:var(--s3) 0 0; max-width:none; } /* ---- EMBEDS (interactive map + videos) ---- */ .embed { position:relative; width:100%; aspect-ratio:16/9; border-radius:var(--radius); overflow:hidden; border:1px solid var(--line); box-shadow:var(--shadow); background:var(--surface); } .embed iframe { position:absolute; inset:0; width:100%; height:100%; border:0; } .video-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s4); } .video-grid .embed { box-shadow:none; } @media (max-width:820px){ .video-grid{ grid-template-columns:1fr; } } /* ---- CONVERSION COMPONENTS (conversion-optimizer skill) ---- */ .btn-xl { font-size: var(--step-1); padding: 1.05rem 1.9rem; } .cta-proof { display:block; font-size:var(--step--1); color:var(--ink-soft); margin:.55rem 0 0; max-width:none; } .cta-proof .gold { color: var(--gold); font-weight:700; } .cta-box { background:var(--paper-2); border:1px solid var(--line); border-top:3px solid var(--accent); border-radius:var(--radius); padding:var(--s5); margin:var(--s5) 0; max-width:none; text-align:center; } .cta-box .cb-h { font-family:var(--display); font-weight:800; font-size:var(--step-2); color:var(--ink); margin:0 0 .5rem; max-width:none; } .cta-box p { max-width:44ch; margin-inline:auto; } .cta-box p:last-child { margin-bottom:0; max-width:none; } .cta-box .btn { margin-top:.5rem; } .cta-box a.btn-primary, .cta-box a.btn-primary:hover { color:var(--accent-ink); } @media (max-width:640px){ .cta-box { padding:var(--s4); } .cta-box .btn { width:100%; } } /* sticky bar: fixed overlay (zero CLS), thin, revealed after first screen */ .sticky-cta { position:fixed; z-index:45; left:0; right:0; bottom:0; display:flex; align-items:center; justify-content:center; gap:.9rem; padding:.55rem .9rem calc(.55rem + env(safe-area-inset-bottom)); background:rgba(255,255,255,.97); backdrop-filter:blur(8px); border-top:1px solid var(--line); transform:translateY(110%); transition:transform .25s ease; } .sticky-cta.visible { transform:translateY(0); } .sticky-cta .sc-proof { font-size:var(--step--1); color:var(--ink); white-space:nowrap; flex:0 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; } .sticky-cta .sc-proof .gold { color:var(--gold); font-weight:700; } .sticky-cta .btn { min-height:44px; padding:.6rem 1.3rem; } @media (min-width: 761px) { .sticky-cta { left:auto; right:1.2rem; bottom:1.2rem; border:1px solid var(--line); border-radius:999px; padding:.5rem .6rem .5rem 1.1rem; box-shadow:var(--shadow); } /* article pages (blog/guides): full-width bottom bar on desktop too, like mobile */ body.article .sticky-cta { left:0; right:0; bottom:0; border-radius:0; border:0; border-top:1px solid var(--line); box-shadow:none; padding:.55rem .9rem; } } @media (prefers-reduced-motion: reduce) { .sticky-cta { transition:none; } } /* ---- TESTIMONIALS (real GetYourGuide/Tripadvisor reviews, verbatim) ---- */ .reviews { display:grid; grid-template-columns:repeat(2,1fr); gap:var(--s4); } .review-card { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:var(--s4); display:flex; flex-direction:column; gap:var(--s2); } .review-card .stars { font-size:.95rem; } .review-card blockquote { margin:0; font-size:var(--step-0); color:var(--ink); max-width:none; } .review-card blockquote p { max-width:none; margin:0; } .review-meta { margin-top:auto; font-size:var(--step--1); color:var(--ink-soft); } .review-meta strong { color:var(--ink); } @media (max-width:760px){ .reviews{ grid-template-columns:1fr; } } /* utility */ .lede { font-size:var(--step-1); color:var(--ink-soft); } .small { font-size:var(--step--1); color:var(--ink-soft); } .mt-0{margin-top:0}.mb-0{margin-bottom:0}.text-center{text-align:center} /* ============================================================ SITE-SPECIFIC LAYER , "Arctic Rust" additions for svalbardtours.org ============================================================ */ /* ---- FLIPPED SPLIT HERO (this site's first screen, approved 2026-08-07). Tall photo LEFT, headline + proof + XL CTA RIGHT. On mobile the H1 comes first and the photo drops below, so the primary-keyword H1 is above the fold. ---- */ .hero--split { display:grid; grid-template-columns: .85fr 1.15fr; gap: var(--s5); align-items:center; padding-block: var(--s5) var(--s6); } .hero--split .hero-media { order:-1; aspect-ratio:3/4; border-radius:var(--radius); overflow:hidden; background:var(--paper-2); box-shadow:var(--shadow); } .hero--split .hero-media img { width:100%; height:100%; object-fit:cover; } .hero--split h1 { margin-bottom: var(--s3); max-width: 16ch; } .hero--split .lede { max-width: 46ch; margin-bottom: var(--s4); } .hero--split .hero-actions { display:flex; flex-wrap:wrap; gap:.7rem; align-items:center; } .hero--split .author-hook { display:flex; align-items:center; gap:.6rem; font-size:var(--step--1); color:var(--ink-soft); margin-top:var(--s4); } .hero--split .author-hook img { width:38px; height:38px; border-radius:50%; object-fit:cover; border:2px solid var(--line); } @media (max-width: 860px) { .hero--split { grid-template-columns:1fr; gap:var(--s4); padding-block:var(--s4) var(--s5); } /* The media div is FIRST in the DOM so it can sit left on desktop. On mobile it has to drop BELOW the text, or the primary-keyword H1 is pushed off the first screen. */ .hero--split .hero-media { order:2; aspect-ratio:4/3; } .hero--split h1 { max-width:none; } } /* ---- Editorial hairline under section headings (the industrial detail) ---- */ .section > h2:first-child, .rule-h2 { padding-bottom: var(--s2); border-bottom: 2px solid var(--ink); border-image: repeating-linear-gradient(90deg, var(--ink) 0 14px, var(--accent) 14px 18px, var(--ink) 18px 32px) 1; } /* ---- CATEGORY GRID (8 activity hubs on the homepage) ---- */ .cat-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s3); } .cat-card { display:flex; flex-direction:column; gap:.3rem; background:var(--surface); border:1px solid var(--line); border-left:4px solid var(--brand); border-radius:var(--radius-sm); padding:var(--s3) var(--s4); text-decoration:none; color:var(--ink); transition:border-color .15s ease, transform .08s ease; } .cat-card:hover { border-left-color:var(--accent); transform:translateY(-2px); } .cat-card .cc-name { font-family:var(--display); font-weight:800; font-size:var(--step-0); line-height:1.2; } .cat-card .cc-meta { font-size:var(--step--1); color:var(--ink-soft); } @media (max-width:900px){ .cat-grid{ grid-template-columns:repeat(2,1fr); } } @media (max-width:520px){ .cat-grid{ grid-template-columns:1fr; } } /* ---- PLATFORM PILL (which marketplace a listing lives on) ---- */ .pc-platform { font-size:var(--step--1); font-weight:700; color:var(--ink-soft); } .pc-platform .pf { display:inline-block; padding:.12rem .5rem; border-radius:999px; border:1px solid var(--line); background:var(--paper-2); color:var(--ink); font-size:.72rem; letter-spacing:.03em; text-transform:uppercase; } /* ---- HONESTY CALLOUT (used wherever the site corrects a common claim) ---- */ .honesty { background:var(--surface); border:1px solid var(--line); border-left:5px solid var(--accent); border-radius:var(--radius); padding:var(--s4); margin:var(--s5) 0; } .honesty .h-h { font-family:var(--display); font-weight:800; font-size:var(--step-1); margin:0 0 var(--s2); max-width:none; color:var(--ink); } .honesty p:last-child { margin-bottom:0; } .prose .honesty p { max-width:none; } /* ---- TOUR LIST (category hubs: a dense, scannable row per product) ---- */ .tour-list { display:grid; gap:var(--s3); } .tour-row { display:grid; grid-template-columns:1fr auto; gap:var(--s3) var(--s4); align-items:start; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:var(--s4); } .tour-row.is-lead { border-color:var(--gold); box-shadow:0 0 0 2px var(--gold-soft), var(--shadow); } .tour-row h3 { margin:0 0 .35rem; font-size:var(--step-1); } .tour-row h3 a { color:var(--ink); text-decoration:none; } .tour-row .tr-meta { font-size:var(--step--1); color:var(--ink-soft); margin:0 0 .5rem; max-width:none; } .tour-row .tr-desc { margin:0; max-width:58ch; } .tour-row .tr-cta { display:flex; flex-direction:column; align-items:flex-end; gap:.4rem; text-align:right; } .tr-price { font-family:var(--display); font-weight:800; font-size:var(--step-1); white-space:nowrap; } .tr-price small { display:block; margin-top:2px; font-family:var(--body); font-size:var(--step--1); font-weight:500; color:var(--ink-soft); white-space:normal; } @media (max-width:760px){ .tour-row { grid-template-columns:1fr; } .tour-row .tr-cta { align-items:stretch; text-align:left; } .tour-row .tr-cta .btn { width:100%; } } /* ============================================================ TOUR-PICKS GRID (depth-cro conversion layer, ported from niagarafallsboattours.org 2026-08-15 and re-tokened for "Arctic Rust"). A 3-card grid dropped into an article body before its FAQ. Whole card converts: image, title and button all carry the sponsored link. ============================================================ */ .tour-picks { background:var(--paper-2); border:1px solid var(--line); border-radius:var(--radius); padding:var(--s4); margin:var(--s5) 0; } .tour-picks .tp-season { font-size:var(--step--1); color:var(--ink-soft); margin:0 0 var(--s3); border-left:3px solid var(--accent); padding-left:.7rem; } .tour-picks .tp-grid { display:grid; gap:var(--s3); grid-template-columns:1fr; } @media (min-width:700px) { .tour-picks .tp-grid { grid-template-columns:repeat(3,1fr); } } .tour-picks .tp-card { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-sm); overflow:hidden; display:flex; flex-direction:column; } .tour-picks .tp-media { display:block; aspect-ratio:4/3; overflow:hidden; } .tour-picks .tp-media img { width:100%; height:100%; object-fit:cover; } .tour-picks .tp-body { padding:var(--s3); display:flex; flex-direction:column; gap:.5rem; flex:1; } .tour-picks .tp-chips { margin:0; display:flex; gap:.35rem; flex-wrap:wrap; } .pc-chip { display:inline-block; font-size:.7rem; font-weight:700; letter-spacing:.02em; padding:.2rem .55rem; border-radius:999px; background:var(--paper-2); color:var(--ink-soft); border:1px solid var(--line); } .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(--accent); text-decoration:underline; } .tour-picks .tp-proof { font-size:var(--step--1); color:var(--ink-soft); margin:0; } .tour-picks .tp-proof .gold { color:var(--gold); font-weight:700; } .tour-picks .tp-proof-none { font-style:italic; } .tour-picks .tp-reassure { margin:0; font-size:.74rem; color:var(--ink-soft); } .tour-picks .tp-body .btn { margin-top:auto; width:100%; white-space:nowrap; font-size:var(--step--1); padding:.7rem .8rem; } .tour-picks a.btn-primary, .tour-picks a.btn-primary:hover { color:#fff; } /* BREAKOUT: .prose > * and .wrap-narrow cap children at ~64ch/50rem, and max-width beats width, so a 3-card grid gets crushed to ~150px columns unless the panel is lifted out of the measure (same pattern as .cta-box / .infogain). This is the CSS gotcha the depth-cro skill flags. */ .wrap-narrow .tour-picks, .prose .tour-picks, .blog-post .tour-picks { max-width:none; width:min(100vw - 2rem, 68rem); margin-left:50%; transform:translateX(-50%); } @media (max-width:700px) { .wrap-narrow .tour-picks, .prose .tour-picks, .blog-post .tour-picks { width:100%; margin-left:0; transform:none; } } /* ---- v2.1: card-style mid-article CTA (image + body) ---- */ .cta-box.cta-card { display:grid; grid-template-columns:230px 1fr; gap:var(--s4); align-items:center; max-width:none; } .cta-box.cta-card .cb-media { display:block; } .cta-box.cta-card .cb-media img { width:100%; height:100%; min-height:170px; object-fit:cover; border-radius:var(--radius-sm); display:block; } .cta-box.cta-card .cb-body p { margin:0 0 var(--s2); max-width:none; margin-inline:0; text-align:left; } .cta-box.cta-card .tp-proof { color:var(--ink-soft); font-size:var(--step--1); } @media (max-width: 700px) { .cta-box.cta-card { grid-template-columns:1fr; } } /* category card: who-it's-for line */ .cat-card .cc-who { display:block; margin-top:.35rem; color:var(--ink-soft); font-size:var(--step--1); font-weight:600; } /* ---- v2.2 (Oleg, 2026-08-18): section intros span the container, rows + cat cards carry images ---- */ .section.wrap > p { max-width: none; } .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; } .bp-rating { margin: 0 0 var(--s2); color: var(--ink-soft); font-size: var(--step--1); } .bp-rating .gold { color: var(--gold); font-weight: 700; } .bp-reason { margin: 0 0 var(--s2); font-size: var(--step-0); } .bp-price { margin: 0 0 var(--s3); font-size: var(--step-1); font-family: var(--display); } .bp-price small { display: block; font-size: var(--step--1); color: var(--ink-soft); font-family: var(--body); font-weight: 400; } .btn-block { display: block; width: 100%; text-align: center; } .bp-next { color: var(--ink-soft); margin: var(--s2) 0 var(--s3); } .bp-facts { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s2) var(--s3); margin: 0; border-top: 1px solid var(--line); padding-top: var(--s3); } .bp-facts div { min-width: 0; } .bp-facts dt { font-size: var(--step--1); color: var(--ink-soft); } .bp-facts dd { margin: 0; font-size: var(--step--1); font-weight: 600; } /* ============================================================ CITY-GUIDE additions: free-entry treatment + wide comparison table ============================================================ */ .pc-free { font-weight:700; color:var(--ok); margin:.1rem 0; } .bp-free { font-family:var(--display); font-weight:800; color:var(--ok); font-size:var(--step-1); margin:0 0 var(--s2); } .table-scroll { overflow-x:auto; -webkit-overflow-scrolling:touch; margin:var(--s3) 0; } .keyfacts.compare { min-width:680px; } .keyfacts.compare th, .keyfacts.compare td { width:auto; white-space:nowrap; vertical-align:middle; } .keyfacts.compare thead th { white-space:nowrap; } .keyfacts.compare td:nth-child(2), .keyfacts.compare th:nth-child(2) { white-space:normal; min-width:12rem; } .keyfacts.compare th[scope="row"] { background:var(--surface); font-weight:700; } .keyfacts.compare th[scope="row"] a { color:var(--ink); text-decoration:none; } .keyfacts.compare th[scope="row"] a:hover { color:var(--accent); text-decoration:underline; } .keyfacts.compare .gold { color:var(--gold); font-weight:700; } /* free-entry card / passes shell */ .passes-shell { background:var(--paper-2); border:1px solid var(--line); border-left:5px solid var(--accent); border-radius:var(--radius); padding:var(--s4) var(--s5); margin:var(--s4) 0; } .passes-shell h2 { margin-top:0; } /* ---- DECISION PICKER (generic, build/launch-v2/gen-decision-picker.mjs) ---- */ .decision-picker { --dp-key: var(--brand, var(--sea, #24506a)); --dp-line: var(--line, #dfe3e6); --dp-surface: var(--surface, #fff); --dp-surface-2: var(--surface-2, var(--paper-2, #f5f6f7)); --dp-ink: var(--ink, #1b1f23); --dp-soft: var(--ink-soft, #5b6570); background:var(--dp-surface); border:1px solid var(--dp-line); border-radius:var(--radius, 10px); padding:var(--s4, 1.5rem); box-shadow:var(--shadow, 0 1px 2px rgba(0,0,0,.06)); } .decision-picker .dp-q { border:0; padding:0; margin:0 0 var(--s3, 1rem); min-width:0; } .decision-picker .dp-q legend { font-family:var(--display, inherit); font-weight:800; font-size:var(--step-0, 1rem); color:var(--dp-ink); padding:0 0 .45rem; } .decision-picker .dp-opts { display:flex; flex-wrap:wrap; gap:.5rem; } .decision-picker .dp-opt { font-family:var(--body, inherit); font-size:var(--step--1, .9rem); font-weight:600; color:var(--dp-ink); background:var(--dp-surface); border:1.5px solid var(--dp-line); border-radius:999px; padding:.5rem .9rem; cursor:pointer; line-height:1.25; min-height:40px; transition:border-color .15s ease, background .15s ease, color .15s ease; } .decision-picker .dp-opt:hover { border-color:var(--dp-key); color:var(--dp-key); } .decision-picker .dp-opt.is-on { background:var(--dp-key); border-color:var(--dp-key); color:#fff; } .decision-picker .dp-opt:focus-visible { outline:3px solid var(--accent, var(--dp-key)); outline-offset:2px; } .decision-picker .dp-controls { margin:0 0 var(--s3, 1rem); } .decision-picker .dp-summary { margin:0 0 var(--s3, 1rem); padding:.6rem .85rem; border-radius:var(--radius-sm, 6px); background:var(--dp-surface-2); color:var(--dp-ink); font-size:var(--step--1, .9rem); font-weight:600; max-width:none; } .decision-picker .dp-results { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s3, 1rem); } .decision-picker .dp-card { display:flex; flex-direction:column; border:1px solid var(--dp-line); border-radius:var(--radius, 10px); overflow:hidden; background:var(--dp-surface-2); } .decision-picker[data-state="picked"] .dp-card { border-color:var(--dp-key); box-shadow:0 0 0 2px rgba(0,0,0,.06); } .decision-picker .dp-card.dp-fold { display:none; } /* [hidden] alone loses to the .dp-card display:flex rule above (author styles beat the UA stylesheet), so a card the script hides stays on screen: pin it, same fix as the exit popup's dismissal trap. */ .decision-picker .dp-card[hidden] { display:none !important; } .decision-picker .dp-media { display:block; aspect-ratio:4/3; background:var(--dp-surface-2); } .decision-picker .dp-media img { width:100%; height:100%; object-fit:cover; display:block; } .decision-picker .dp-body { padding:var(--s3, 1rem); display:flex; flex-direction:column; gap:.4rem; flex:1; } .decision-picker .dp-name { margin:0; font-size:var(--step-0, 1rem); line-height:1.25; } .decision-picker .dp-name a { color:var(--dp-ink); text-decoration:none; } .decision-picker .dp-name a:hover { color:var(--dp-key); text-decoration:underline; } /* Rule 33 floor applies to the card's title LINK too, not only to the chips. Measured at 39.2px on a 390px viewport (kualalumpuraquarium.com, 2026-09-05) while every chip sat at exactly 40px, so the highest-intent target in the block was the one under the floor. */ @media (max-width: 760px) { .decision-picker .dp-name a { display:block; min-height:44px; line-height:1.35; padding-block:9px; } } .decision-picker .dp-facts { margin:0; display:flex; flex-wrap:wrap; gap:.3rem; max-width:none; } .decision-picker .dp-facts span { font-size:.72rem; font-weight:600; background:var(--dp-surface); color:var(--dp-soft); border:1px solid var(--dp-line); border-radius:999px; padding:.2rem .55rem; } .decision-picker .dp-price { margin:0; font-size:var(--step--1, .9rem); max-width:none; } .decision-picker .dp-price strong { font-family:var(--display, inherit); font-size:var(--step-0, 1rem); } .decision-picker .dp-rev { color:var(--dp-soft); } .decision-picker .dp-body .btn { margin-top:auto; text-align:center; } @media (max-width:900px){ .decision-picker .dp-results { grid-template-columns:repeat(2,1fr); } } @media (max-width:560px){ .decision-picker { padding:var(--s3, 1rem); } .decision-picker .dp-results { grid-template-columns:1fr; } .decision-picker .dp-card { flex-direction:row; } .decision-picker .dp-media { width:38%; flex:none; aspect-ratio:1/1; } } /* ============================================================ D1 BLOCK LAYER (compile tokens added in Phase D1) Count-aware card grid (rule 30) + photo collage (rule 32) + testimonials and hotels (homepage blueprint rule 26). Every colour is a palette token, so nothing here re-tunes the approved palette. ============================================================ */ /* ---- COUNT-AWARE CARD GRID (rule 30 / block library 4.5c.A) ---- Two leftover cards sit two-per-row and one sits in a capped single column, so a short group never stretches across a three-column track and reads as "everything looks the same". */ .cards-3.cards-n2 { grid-template-columns:repeat(2,1fr); } .cards-3.cards-n1 { grid-template-columns:minmax(0,1fr); max-width:420px; } @media (max-width:1040px){ .cards-3, .cards-3.cards-n2 { grid-template-columns:repeat(2,1fr); } } @media (max-width:760px){ .cards-3, .cards-3.cards-n1, .cards-3.cards-n2 { grid-template-columns:1fr; max-width:none; } } /* ---- PHOTO COLLAGE (rule 32 / block library 4.5c.C) ---- */ .photo-collage { display:grid; grid-template-columns:repeat(4,1fr); grid-auto-rows:130px; gap:.6rem; margin:var(--s3) 0 var(--s4); } .photo-collage .pcol-tile { position:relative; display:block; overflow:hidden; border-radius:var(--radius-sm); background:var(--paper-2); } .photo-collage .pcol-tile.pcol-hero { grid-column:span 2; grid-row:span 2; } .photo-collage .pcol-tile.pcol-wide { grid-column:span 2; } .photo-collage .pcol-tile img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .3s ease; } .photo-collage .pcol-tile:hover img { transform:scale(1.04); } .photo-collage .pcol-cap { position:absolute; left:0; right:0; bottom:0; padding:1.4rem .6rem .5rem; font-size:.78rem; font-weight:700; color:#fff; background:linear-gradient(to top, rgba(15,46,44,.78), rgba(15,46,44,0)); line-height:1.25; } @media (max-width:900px){ .photo-collage { grid-template-columns:repeat(3,1fr); grid-auto-rows:110px; } .photo-collage .pcol-tile.pcol-wide { grid-column:span 1; } } @media (max-width:560px){ .photo-collage { grid-template-columns:repeat(2,1fr); grid-auto-rows:100px; } .photo-collage .pcol-tile.pcol-wide { grid-column:span 2; } .photo-collage .pcol-tile:nth-child(n+7) { display:none; } } @media (prefers-reduced-motion: reduce){ .photo-collage .pcol-tile img { transition:none; } .photo-collage .pcol-tile:hover img { transform:none; } } /* ---- TESTIMONIALS ({{ testimonials }}, real reviews only) ---- */ .testimonials-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s3); } .testimonial-card { background:var(--surface); border:1px solid var(--line); border-top:3px solid var(--gold); border-radius:var(--radius); padding:var(--s4); display:flex; flex-direction:column; gap:var(--s2); } .testimonial-card .tc-stars { margin:0; color:var(--gold); letter-spacing:.08em; font-size:.95rem; } .testimonial-card blockquote { margin:0; max-width:none; color:var(--ink); } .testimonial-card .tc-attr { margin:auto 0 0; font-size:var(--step--1); color:var(--ink-soft); } .testimonials-disclaimer { margin-top:var(--s3); font-size:var(--step--1); color:var(--ink-soft); } @media (max-width:980px){ .testimonials-grid { grid-template-columns:repeat(2,1fr); } } @media (max-width:640px){ .testimonials-grid { grid-template-columns:1fr; } } /* ---- HOTELS ({{ hotels }}, minted Travelpayouts links) ---- */ .hotel-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s3); } .hotel-card { background:var(--surface); border:1px solid var(--line); border-left:4px solid var(--brand); border-radius:var(--radius); padding:var(--s4); display:flex; flex-direction:column; gap:.45rem; } .hotel-card h3 { margin:0; font-size:var(--step-0); line-height:1.25; } .hotel-card .hc-tier { align-self:flex-start; font-size:.72rem; font-weight:800; letter-spacing:.04em; text-transform:uppercase; color:var(--gold-ink); background:var(--gold-soft); border-radius:999px; padding:.14rem .6rem; } .hotel-card .hc-area, .hotel-card .hc-rating { margin:0; font-size:var(--step--1); color:var(--ink-soft); } .hotel-card .hc-rating .gold { color:var(--gold); font-weight:700; } .hotel-card p { margin:0; font-size:var(--step--1); } .hotel-card .btn { margin-top:auto; align-self:flex-start; } @media (max-width:980px){ .hotel-grid { grid-template-columns:repeat(2,1fr); } } @media (max-width:640px){ .hotel-grid { grid-template-columns:1fr; } } /* === BEGIN rule37 section bands (build/launch-v2/apply-section-bands.mjs) === */ /* rule37:bands {"band-paper":{"key":"paper","bg":"#f5faf9","fg":"#0f2e2c","link":"#0b7a75"},"band-tint":{"key":"tint","bg":"#dff0ee","fg":"#0f2e2c","link":"#0a746f"},"band-wash":{"key":"wash","bg":"#eff1e9","fg":"#0f2e2c","link":"#0b7a75"},"band-edge":{"key":"edge","bg":"#ffffff","fg":"#0f2e2c","link":"#0b7a75"},"band-inverse":{"key":"inverse","bg":"#096660","fg":"#ffffff","link":"#f3e7c8"}} */ /* Rule 37: adjacent sections never share a ground. The colour lives on the OUTER full-width
; .wrap moved to an inner div that only constrains width. Never reintroduce a box-shadow 0 0 0 100vmax full-bleed here: an outer box-shadow paints only outside the border box, so none of it lands behind the content. */ .section[class*="band-"]{background:var(--band-bg);color:var(--band-fg);position:relative;isolation:isolate;overflow-x:clip} .section[class*="band-"]>.wrap{position:relative;z-index:1} /* a banded section needs air on both sides, so the usual collapsed top padding is restored */ .section[class*="band-"]+.section[class*="band-"]{padding-top:var(--s6,4rem)} .section[class*="band-"] a:not(.btn):not(.nav-link){color:var(--band-link)} .section[class*="band-"] a:not(.btn):not(.nav-link):hover{color:var(--band-link-hover)} .section[class*="band-"] :where(h1,h2,h3,h4,h5,h6){color:var(--band-fg)} .band-edge{border-top:1px solid var(--band-line);border-bottom:1px solid var(--band-line)} .band-inverse :where(hr,table,th,td){border-color:var(--band-line)} .band-inverse :where(.card,.rcard,.tcard,.stat-tile,.quick-answer-box,details,.tp-card){background:var(--band-surface);border-color:var(--band-line)} /* the 5 treatments, driven only by this site's own palette tokens */ .band-paper{--band-bg:#f5faf9;--band-fg:#0f2e2c;--band-muted:#446865;--band-line:#c4deda;--band-link:#0b7a75;--band-link-hover:#846520;--band-surface:#ffffff;--band-rule:#b0862b;--band-cta-bg:#c8501f;--band-cta-fg:#ffffff} .band-tint{--band-bg:#dff0ee;--band-fg:#0f2e2c;--band-muted:#446865;--band-line:#c4deda;--band-link:#0a746f;--band-link-hover:#846520;--band-surface:#ffffff;--band-rule:#b0862b;--band-cta-bg:#c8501f;--band-cta-fg:#ffffff} .band-wash{--band-bg:#eff1e9;--band-fg:#0f2e2c;--band-muted:#446865;--band-line:#c4deda;--band-link:#0b7a75;--band-link-hover:#846520;--band-surface:#ffffff;--band-rule:#b0862b;--band-cta-bg:#c8501f;--band-cta-fg:#ffffff;--surface:#ffffff} .band-edge{--band-bg:#ffffff;--band-fg:#0f2e2c;--band-muted:#446865;--band-line:#c4deda;--band-link:#0b7a75;--band-link-hover:#846520;--band-surface:#f5faf9;--band-rule:#b0862b;--band-cta-bg:#c8501f;--band-cta-fg:#ffffff;--paper:#ffffff;--surface:#f5faf9;--surface-2:#fafdfc} .band-inverse{--band-bg:#096660;--band-fg:#ffffff;--band-muted:#c1d8d7;--band-line:#3f8883;--band-link:#f3e7c8;--band-link-hover:#f7efdb;--band-surface:#1f746e;--band-rule:#f3e7c8;--band-cta-bg:#ccb075;--band-cta-fg:#0f2e2c;--ink:#ffffff;--ink-soft:#c1d8d7;--paper:#096660;--paper-2:#1f746e;--surface:#1f746e;--surface-2:#1f746e;--line:#3f8883;--brand:#f3e7c8;--brand-deep:#f3e7c8;--accent:#ccb075;--accent-deep:#ccb075;--accent-ink:#0f2e2c;--gold:#f3e7c8;--gold-soft:#1f746e;--gold-ink:#ffffff;--shadow:none} /* selectors that used to match the combined .section.wrap element, re-pointed at the split form */ .section > .wrap > h2:first-child{padding-bottom: var(--s2); border-bottom: 2px solid var(--ink); border-image: repeating-linear-gradient(90deg, var(--ink) 0 14px, var(--accent) 14px 18px, var(--ink) 18px 32px) 1;} .section > .wrap > p{max-width: none;} /* ---- motion layer. Both effects are decoration only: nothing here can leave real content hidden if the animation never runs (memory: a broad opacity:0 scroll reveal stays invisible forever for any renderer that does not scroll). ---- */ @keyframes r37-drift{from{transform:translate3d(-4%,0,0) scale(1.02);opacity:.5}to{transform:translate3d(4%,0,0) scale(1.09);opacity:.95}} .band-wash::before{content:"";position:absolute;inset:-12% -8%;z-index:0;pointer-events:none;border-radius:inherit;background:radial-gradient(38% 60% at 22% 28%,rgba(176,134,43,0.16) 0%,transparent 70%),radial-gradient(34% 56% at 78% 74%,rgba(11,122,117,0.12) 0%,transparent 72%);animation:r37-drift 22s ease-in-out infinite alternate;will-change:transform,opacity} @keyframes r37-pulse{0%{transform:scale(.55);opacity:.8}70%{transform:scale(2);opacity:0}100%{transform:scale(2);opacity:0}} .map-pin,.spot-pin,.pin,[data-pulse]{position:relative} .map-pin::after,.spot-pin::after,.pin::after,[data-pulse]::after{content:"";position:absolute;left:50%;top:50%;width:18px;height:18px;margin:-9px 0 0 -9px;border-radius:50%;border:2px solid rgba(176,134,43,0.85);pointer-events:none;animation:r37-pulse 2.6s ease-out infinite} [data-countup],.st-num,.stat-num,.kpi-num{font-variant-numeric:tabular-nums} /* reduced motion: animation off, END STATE shown, nothing hidden */ @media (prefers-reduced-motion: reduce){ .band-wash::before{animation:none;transform:none;opacity:.75} .map-pin::after,.spot-pin::after,.pin::after,[data-pulse]::after{animation:none;transform:translate(0,0) scale(1);opacity:.5} [data-countup],.st-num,.stat-num,.kpi-num{transition:none} } /* === END rule37 section bands === */ /* === BEGIN crowd calendar (homepage #when, build/compile.mjs > crowdCalendarHtml) === The block sits on the inverse band, so every colour resolves from the band tokens with a light-band fallback: moving the section to another treatment needs no edit here. */ .crowd{--cw-fg:var(--band-fg,var(--ink));--cw-muted:var(--band-muted,var(--ink-soft)); --cw-line:var(--band-line,var(--line));--cw-surface:var(--band-surface,var(--surface)); --cw-accent:var(--band-rule,var(--gold));--cw-bar:rgba(15,46,44,.30); display:grid;gap:var(--s4);margin-top:var(--s4)} .band-inverse .crowd{--cw-bar:rgba(255,255,255,.42)} .crowd-fig{margin:0;background:var(--cw-surface);border:1px solid var(--cw-line);border-radius:var(--radius);padding:var(--s3)} .crowd-fig figcaption{margin-top:var(--s2);font-size:var(--step--1);color:var(--cw-muted);max-width:76ch} .crowd-chart{display:block;width:100%;height:auto;overflow:visible} .crowd-chart .ch-grid{stroke:var(--cw-line);stroke-width:1;opacity:.55} .crowd-chart .ch-axis{stroke:var(--cw-line);stroke-width:1.5} .crowd-chart .ch-bar{fill:var(--cw-bar)} .crowd-chart .ch-bar.is-peak{fill:var(--cw-accent)} .crowd-chart .ch-ylab,.crowd-chart .ch-xlab{fill:var(--cw-muted);font-size:15px;font-family:var(--body)} .crowd-chart .ch-val{fill:var(--cw-fg);font-size:16px;font-weight:700;font-family:var(--body)} .crowd-chart .ch-cap{stroke:var(--cw-accent);stroke-width:1.5;stroke-dasharray:6 5} .crowd-chart .ch-caplab{fill:var(--cw-accent);font-size:14px;font-weight:700;font-family:var(--body)} .crowd-now{background:var(--cw-surface);border:1px solid var(--cw-line);border-radius:var(--radius);padding:var(--s3)} /* min-height reserves the tallest wording BEFORE the fetch resolves, so replacing the text with the live reading cannot shift a single pixel of the page below it. */ .cn-live{margin:0;font-size:var(--step-0);font-weight:600;min-height:5.4em} .cn-refresh{margin:.5rem 0 0;font-size:var(--step--1);color:var(--cw-muted)} .cn-live[data-state="live"]{font-weight:700} .cn-gauge{margin-top:var(--s2);height:14px;border-radius:999px;background:var(--cw-bar);overflow:hidden} .cn-gauge span{display:block;height:100%;width:var(--pct,2%);border-radius:inherit;background:var(--cw-accent); transition:width .6s ease;animation:cw-fill .9s cubic-bezier(.2,.7,.3,1) both;transform-origin:left center} @keyframes cw-fill{from{transform:scaleX(0)}to{transform:scaleX(1)}} .cn-scale{display:flex;justify-content:space-between;margin:.35rem 0 0;font-size:var(--step--1);color:var(--cw-muted)} .cn-next{margin:var(--s3) 0 0;padding-top:var(--s2);border-top:1px solid var(--cw-line);font-size:var(--step--1)} .crowd-cal{background:var(--cw-surface);border:1px solid var(--cw-line);border-radius:var(--radius);padding:var(--s3)} .cc-lede{margin:0 0 var(--s3);font-size:var(--step--1);max-width:78ch} .cc-controls{display:flex;flex-wrap:wrap;gap:.5rem} .cc-chip{min-height:44px;padding:.5rem .95rem;border-radius:999px;border:1px solid var(--cw-line); background:transparent;color:var(--cw-fg);font:inherit;font-size:var(--step--1);font-weight:600;cursor:pointer} .cc-chip:hover{border-color:var(--cw-accent)} .cc-chip:focus-visible{outline:3px solid var(--cw-accent);outline-offset:2px} .cc-chip.is-on{background:var(--cw-accent);border-color:var(--cw-accent);color:var(--band-cta-fg,#0f2e2c)} .cc-status{margin:var(--s2) 0 var(--s3);font-size:var(--step--1);color:var(--cw-muted);min-height:1.5em} .cc-month + .cc-month{margin-top:var(--s3)} .cc-mname{margin:0 0 .5rem;font-size:var(--step-0);letter-spacing:.02em} .cc-grid{list-style:none;margin:0;padding:0;display:grid;gap:.4rem;grid-template-columns:repeat(auto-fill,minmax(88px,1fr))} .cd-day{border:1px solid var(--cw-line);border-radius:var(--radius-sm);padding:.4rem .45rem; display:flex;flex-direction:column;gap:.1rem;font-size:.78rem;line-height:1.25;min-height:74px} .cd-dnum{font-weight:800;font-size:1rem} .cd-dow{color:var(--cw-muted);font-size:.7rem;text-transform:uppercase;letter-spacing:.05em} .cd-ships{font-weight:600} .cd-quiet{color:var(--cw-muted);font-weight:500} .cd-pax{color:var(--cw-muted);font-variant-numeric:tabular-nums} .cd-bar{display:block;height:4px;margin-top:auto;border-radius:999px;background:var(--cw-bar)} .cd-bar::before{content:"";display:block;height:100%;width:var(--w,0%);border-radius:inherit;background:var(--cw-accent)} .cd-none{opacity:.72} .cd-busy{border-color:var(--cw-accent);border-width:2px} @media (max-width:520px){ .cc-grid{grid-template-columns:repeat(auto-fill,minmax(74px,1fr))} .cd-day{min-height:68px;font-size:.72rem} } @media (prefers-reduced-motion: reduce){ .cn-gauge span{animation:none;transition:none} } /* === END crowd calendar === */ /* === BEGIN pin-map schematic + tour explorer (/map/, build/compile.mjs) === NOTE ON SVG STYLING: these rules live HERE, in the site stylesheet, and never in a