/* xochimilco-boat-tour.com — "Terracotta" design system. Sun-baked clay, ink, weathered paper. One terracotta accent. DM Serif Display for display, DM Sans for everything else. Flat on purpose - the no-gradient rule is load-bearing. THE ACCENT IS A MID-TONE, the hard case: the briefed #C56A3C fails BOTH ways (cream on it 3.49, ink on it 4.27, it on cream 3.49). Darkened at constant hue to #A95B33 it clears 4.5 both ways with ONE token. #C56A3C survives as a decorative rule colour only. Every pairing measured; see apply_design.py. */ :root{ /* ---- palette (design.md "Terracotta"; every ratio measured) ---- */ --ink:#2B1D14; /* primary: headlines & core text 13.46 on neutral */ --sage:#7E6452; /* secondary as TEXT: meta, captions 4.53 on neutral the brief's #8B6F5B is 3.84 - fine for a rule, fails the 4.5 text floor; corrected at constant hue (25.0 deg) */ --sage-line:#8B6F5B; /* the brief's secondary, BORDERS ONLY */ --clay:#9F5631; /* THE CORRECTED ACCENT. The brief's #C56A3C is a mid-tone and misses 4.5 in EVERY direction; this is the same hue darkened just far enough, and it clears 4.5 BOTH ways with a single token: cream on clay 4.99 (button label) clay on NEUTRAL 4.51 (body links) clay on SURFACE 4.99 (links on cards) white on clay 5.46 SOLVED AGAINST THE NEUTRAL, NOT THE SURFACE. The first pass used #A95B33, which is 4.54 on the card surface and only 4.10 on the page foundation where body links actually sit - a real failure found by the audit, not by the maths, because I had checked the accent against the wrong one of two very similar creams. Always solve an accent against the DARKER background it will ever sit on. That two-way property is why this site needs no second accent colour anywhere. */ --clay-dk:#8A4926; /* hover fill; cream on it 6.27. Hover DARKENS here - the opposite of a light accent, because the label is cream and darkening is what helps it. */ --clay-lite:#E09A6E; /* the accent re-cut for DARK surfaces: 7.00 on ink. The clay itself is 4.27 on ink - fine for large text, not for small - so footers and dark bands use this. */ --clay-deco:#C56A3C; /* the brief's EXACT tertiary, DECORATION ONLY: hairlines, the hero rule. 3.49 on cream, so nothing that has to be read may use it. */ /* scaffold aliases, so no existing rule needs renaming */ --coral:#9F5631; --coral-ink:#9F5631; --coral-dk:#8A4926; --accent:#9F5631; /* .pa-now .btn reads this with NO fallback and the scaffold never defines it: a transparent CTA */ --neutral:#F3E8D8; /* the page foundation - negative space is a feature */ --surface:#FBF4E7; /* weathered-paper card / panel surface */ --white:#FFFFFF; --line:#E3D3BC; /* ---- text on the dark ink surface, warm to sit in a clay palette. Lowest ratio here is 5.44 on ink. ---- */ --on-ink:#E0D4C2; /* 11.02 body text on ink */ --on-ink-hi:#F3E8D8; /* 13.46 lede / emphasis on ink */ --on-ink-mut:#A79383; /* 5.44 labels + meta on ink */ --on-ink-pill:#B6A492;/* 6.55 footer pill text */ --rule-ink:#43301F; /* hairline rules on ink - decorative, not text */ /* ---- two type tiers; the brief uses DM Sans for body AND label ---- */ --disp:"DM Serif Display",Georgia,"Times New Roman",serif; --ui:"DM Sans",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif; /* ---- radii straight from the brief (4 / 8 / 16) ---- */ --r-sm:4px; --r-md:8px; --r-lg:16px; --maxw:1120px; } *{box-sizing:border-box} html{-webkit-text-size-adjust:100%;scroll-behavior:smooth} @media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}} body{ margin:0; font-family:var(--ui); font-size:18px;line-height:1.65;color:var(--ink);background-color:var(--neutral); -webkit-font-smoothing:antialiased; } .wrap{max-width:var(--maxw);margin:0 auto;padding:0 22px} img{max-width:100%;height:auto;display:block} a{color:var(--coral-ink);text-decoration:none} a:hover{text-decoration:underline} /* Display tier: DM Serif Display, per the brief. IT SHIPS ONLY WEIGHT 400. The scaffold asked for 700 and 800, and a browser given a weight a family does not have SYNTHESISES one by smearing the stems - the single worst thing you can do to a high-contrast display serif, whose entire character is the contrast between thick strokes and hairlines. weight:400 and font-synthesis:none are load-bearing here, not tidiness. (Same named failure as Libre Caslon Display on an earlier build.) The scaffold's -.025em tracking was tuned for a geometric sans and pinches a didone's hairlines; the brief says -0.015em. */ h1,.logo,.display{font-family:var(--disp);font-weight:400;letter-spacing:-.015em; line-height:1.18;font-synthesis-weight:none;font-synthesis:none} /* Sub-heads stay in DM Sans at 600: DM Serif Display below ~1.6rem loses its hairlines on cream, and it has no bold to fall back on. */ h2,h3{font-family:var(--ui);font-weight:600;letter-spacing:-.01em;line-height:1.32} h1{font-size:2.75rem;margin:.1em 0 .5em} h2{font-size:1.65rem;margin:2.2em 0 .6em} h3{font-size:1.15rem;margin:1.6em 0 .4em} h4{font-family:var(--ui);font-weight:600;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--sage);margin:0 0 .6em} p{margin:0 0 1.05em} @media(max-width:640px){h1{font-size:1.85rem}h2{font-size:1.4rem}} .label{font-family:var(--ui);font-weight:600;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--coral-ink);margin:0 0 .5em} /* ---------- buttons ---------- */ /* THE FIX THIS WHOLE FILE EXISTS FOR. The brief specifies cream on terracotta #C56A3C: 3.49:1. Unlike a LIGHT accent there is no free flip - ink on it is 4.27, white on it 3.82, it on cream 3.49. Every direction misses, so the FILL moves, at constant hue and only as far as it must: #A95B33, cream on it 4.54. Hover DARKENS here, the opposite of the light-accent case, because the label is cream and darkening is the direction that helps it: 6.27:1. Scoped :not(.btn-ghost) because .btn and .btn-ghost have EQUAL specificity and the ghost only wins on source order - one reordered rule and the ghost label goes ink-on-ink. The ghost cascade is restated explicitly below. */ .btn{ display:inline-block;font-family:var(--ui);font-weight:600; font-size:.8rem;letter-spacing:.1em;text-transform:uppercase; padding:13px 22px;border-radius:var(--r-md);border:1px solid transparent; transition:background-color .15s,border-color .15s,color .15s;text-align:center; } .btn:not(.btn-ghost){background-color:var(--clay);color:var(--surface);border-color:var(--clay)} .btn:not(.btn-ghost):hover{background-color:var(--clay-dk);border-color:var(--clay-dk); color:var(--surface);text-decoration:none} .btn-ghost{background-color:transparent;color:var(--ink);border-color:var(--ink)} .btn-ghost:hover{background-color:var(--ink);color:var(--surface);text-decoration:none} /* ---------- header ---------- */ .site-head{position:sticky;top:0;z-index:40;background-color:var(--neutral);border-bottom:1px solid var(--line)} .site-head .wrap{display:flex;align-items:center;gap:18px;height:66px} .logo{display:flex;align-items:center;gap:10px;color:var(--ink);font-size:1.1rem;font-weight:700;letter-spacing:-.02em} .logo:hover{text-decoration:none} .logo .mark{width:30px;height:30px;flex:0 0 auto} .nav{margin-left:auto;display:flex;align-items:center;gap:24px} /* nowrap + no shrink: without these a tight nav WRAPS ITS LABELS instead of tripping the hamburger, and the bar breaks. With them the nav either fits or the breakpoint fires - it can never half-fit. */ .nav a{color:var(--ink);font-family:var(--ui);font-weight:500;font-size:.9rem; letter-spacing:.02em;white-space:nowrap;flex:0 0 auto} .nav a:hover{color:var(--coral-ink);text-decoration:none} /* `.nav a.btn` is (0,2,1) and outranks `.btn:not(.btn-ghost)` at (0,2,0), so the header CTA keeps whatever is written HERE regardless of the button rules above. White on this clay is 5.46 so it was never a failure - it was just the only button on the site whose label differed from every other button, which is exactly the kind of inconsistency that survives because it passes. */ .nav a.btn:not(.btn-ghost){color:var(--surface)} .nav a.btn:not(.btn-ghost):hover{color:var(--surface)} .nav-toggle{display:none;margin-left:auto;background:none;border:0;font-size:1.5rem;color:var(--ink);cursor:pointer} @media(max-width:1000px){ .nav-toggle{display:block} .nav{display:none;position:absolute;top:66px;left:0;right:0;flex-direction:column;gap:0; background-color:var(--neutral);border-bottom:1px solid var(--line);padding:8px 22px 16px} .nav.open{display:flex} .nav a{padding:13px 0;border-bottom:1px solid var(--line);width:100%;white-space:normal} .nav a.btn{margin-top:10px;text-align:center} } /* Headroom band just above the collapse, so the nav never arrives at the breakpoint already tight. */ @media(min-width:1001px) and (max-width:1180px){ .nav{gap:18px} .nav a{font-size:.86rem} .nav a.btn{padding:12px 16px;letter-spacing:.06em} } /* ---------- breadcrumb ---------- */ .crumb{font-family:var(--ui);font-weight:600;font-size:.74rem;color:var(--sage);padding:14px 22px 0;text-transform:uppercase;letter-spacing:.05em} .crumb a{color:var(--sage)} /* ---------- hero (flat solid overlay, not a gradient) ---------- */ .hero{position:relative;background:var(--ink) center/cover no-repeat;background-image:url('/images/hero.jpg');color:#fff;border-bottom:4px solid var(--coral)} .hero{background-image:-webkit-image-set(url('/images/hero.webp') type('image/webp'),url('/images/hero.jpg') type('image/jpeg'));background-image:image-set(url('/images/hero.webp') type('image/webp'),url('/images/hero.jpg') type('image/jpeg'))} /* Flat scrims only ("Don't introduce gradients. This system is flat on purpose."), and recoloured from the previous theme's ink (21,24,24) to this site's ink #2B1D14 = 43,29,20. */ .hero::before{content:"";position:absolute;inset:0;background-color:rgba(43,29,20,.38)} .hero .wrap{position:relative;z-index:1;padding:74px 22px 66px;min-height:440px;display:flex;flex-direction:column;justify-content:center} /* .hero h1 is (0,1,1) and outranks a bare h1 - it kept the WRONG FACE on two earlier builds because the design layer only restyled `h1`. The display face and weight are restated here at matching specificity rather than hoped for by inheritance. */ .hero .label{color:var(--clay-lite);opacity:1} .hero h1{font-family:var(--disp);font-size:clamp(1.8rem,3.1vw,2.75rem); margin:0 0 .38em;color:#fff;font-weight:400;letter-spacing:-.015em;line-height:1.16; font-synthesis:none} .hero .lede{font-size:1.05rem;color:var(--on-ink-hi);margin-bottom:1.2em;line-height:1.6} .hero-cta{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:1.6em} .hero .btn-ghost{color:#fff;border-color:#fff} .hero .btn-ghost:hover{background:#fff;color:var(--ink)} .hero-trust{font-size:.92rem;color:var(--on-ink-hi);margin:0} .hero-trust b{color:#fff} /* THE COPY PANEL. A scrim alone is the one thing a contrast audit structurally cannot check: it reads .hero's opaque fallback colour and scores white-on-navy at 13.5:1, while the reader sees white on a PHOTOGRAPH through the scrim. This hero's brief puts overhanging greenery and open water on the LEFT, exactly where the copy sits, so the worst case is guaranteed rather than unlucky. Composited against a blown-out sky under the .34 scrim, a bare hero would give the eyebrow label about 1.9:1. The panel composites LAST, so it holds over any photograph. Measured worst case with the panel: h1 9.6, lede 8.1, label 5.2. */ .hero-copy{max-width:58%;background-color:rgba(43,29,20,.74); border-left:3px solid var(--clay-deco);padding:24px 28px 26px; border-radius:0 var(--r-lg) var(--r-lg) 0} @media(max-width:900px){.hero-copy{max-width:100%}} @media(max-width:640px){.hero-copy{padding:20px 18px 22px}} @media(max-width:640px){.hero .wrap{padding:56px 22px 52px;min-height:0}} /* ---------- tour-data facts strip (under hero) ---------- */ .facts-strip{background:var(--surface);border-bottom:1px solid var(--line)} .facts-strip .wrap{display:flex;flex-wrap:wrap;padding:0} .facts-item{flex:1 1 0;min-width:150px;padding:16px 22px;border-right:1px solid var(--line)} .facts-item:last-child{border-right:0} .facts-val{font-family:var(--ui);font-weight:800;font-size:1.18rem;line-height:1.05;color:var(--ink);letter-spacing:-.02em} .facts-val .star{color:var(--coral)} .facts-label{font-family:var(--ui);font-size:.7rem;font-weight:600;color:var(--sage);text-transform:uppercase;letter-spacing:.06em;margin-top:.45em} @media(max-width:780px){.facts-item{flex:1 1 50%;min-width:0;border-bottom:1px solid var(--line)}.facts-item:nth-child(2n){border-right:0}} @media(max-width:420px){.facts-item{flex:1 1 100%;border-right:0}} /* ---------- on-page jump bar (sticky anchor menu, homepage) ---------- */ .section-nav{position:sticky;top:66px;z-index:30;background:var(--ink);border-bottom:1px solid var(--ink)} .section-nav .wrap{display:flex;gap:0;padding:0;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none} .section-nav .wrap::-webkit-scrollbar{display:none} .section-nav a{flex:0 0 auto;display:inline-block;padding:13px 18px;color:#fff; font-family:var(--ui);font-weight:600;font-size:.82rem;letter-spacing:.02em;white-space:nowrap;border-right:1px solid rgba(255,255,255,.12)} .section-nav a:hover{background-color:var(--clay);color:var(--surface);text-decoration:none} @media(max-width:780px){.section-nav{top:0}.section-nav a{padding:12px 15px;font-size:.8rem}} /* ---------- explore link cluster (keyword interlinks, above footer) ---------- */ .explore{margin:2.4em 0 0;padding:26px 0 0;border-top:2px solid var(--ink)} .explore h2{margin:0 0 .7em} .explore-links{display:grid;grid-template-columns:repeat(3,1fr);gap:10px 26px} .explore-links a{display:block;font-family:var(--ui);font-size:.92rem;font-weight:500; color:var(--ink);padding:6px 0 6px 16px;border-left:3px solid var(--coral);line-height:1.35} .explore-links a:hover{color:var(--coral-ink);border-left-color:var(--coral-ink)} @media(max-width:780px){.explore-links{grid-template-columns:repeat(2,1fr)}} @media(max-width:480px){.explore-links{grid-template-columns:1fr}} /* ---------- main / prose ---------- */ .section-pad{padding-top:40px;padding-bottom:64px} .prose{max-width:760px;margin:0 auto} .prose.wide{max-width:960px} .prose ul,.prose ol{margin:0 0 1.15em;padding-left:1.2em} .prose li{margin:.32em 0} ul.check{list-style:none;padding-left:0} ul.check li{position:relative;padding-left:1.7em;margin:.5em 0} ul.check li::before{content:"\2192";position:absolute;left:0;top:0;color:var(--coral-ink);font-weight:700} /* page-hero banner inside articles */ .page-hero{margin:0 0 1.6em;border-radius:var(--r-lg);overflow:hidden} .page-hero img{width:100%;max-height:380px;object-fit:cover} /* ---------- answer box ---------- */ .answer-box{background-color:var(--surface);border-left:5px solid var(--coral);padding:20px 24px;margin:0 0 1.8em;border-radius:0 var(--r-md) var(--r-md) 0} .answer-box p{margin:0} .answer-box strong{color:var(--ink)} .answer-box a{text-decoration:underline;text-underline-offset:2px} /* ---------- key takeaways (homecontent.TAKEAWAYS) ---------- */ .ia-takeaways{background-color:var(--ink);border-radius:var(--r-lg);padding:26px 30px;margin:34px 0;color:rgba(255,255,255,.92)} .ia-takeaways h2{color:#fff;margin:0 0 14px;font-size:1.25rem} .ia-takeaways ul{list-style:none;margin:0;padding:0} .ia-takeaways li{position:relative;padding:7px 0 7px 30px;line-height:1.55;border-bottom:1px solid rgba(255,255,255,.14)} .ia-takeaways li:last-child{border-bottom:0} .ia-takeaways li::before{content:"\2713";position:absolute;left:2px;top:7px;color:var(--clay-lite);font-weight:700} .ia-takeaways b,.ia-takeaways strong{color:#fff} /* NEVER buy contrast with filter:brightness() - the computed colour is unchanged, so an audit reads the pre-filter value while the render stays where it was. Here the clay is only 4.27 on ink, so the lighter same-hue tint is used instead (7.00:1). */ .ia-takeaways a{color:var(--clay-lite);filter:none; text-decoration-color:rgba(255,255,255,.35)} .ia-takeaways a:hover{color:#fff} /* ---------- tables ---------- */ table{width:100%;border-collapse:collapse;margin:1.2em 0;font-size:.96rem} th,td{text-align:left;padding:11px 13px;border-bottom:1px solid var(--line);vertical-align:top} thead th{background:var(--ink);color:#fff;font-family:var(--ui);font-weight:600;font-size:.72rem;letter-spacing:.06em;text-transform:uppercase} /* ---------- tip / keyfacts / proscons ---------- */ .tip{background-color:var(--surface);border:2px solid var(--coral);border-radius:var(--r-md);padding:16px 20px;margin:1.5em 0} .tip-label{display:inline-block;font-family:var(--ui);font-weight:600;font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--coral-ink);margin-bottom:.3em} .tip p{margin:0} .keyfacts{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;margin:1.6em 0} .keyfacts div{background:var(--surface);padding:14px 16px} .kf-label{display:block;font-family:var(--ui);font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;color:var(--sage);font-weight:600;margin-bottom:3px} .keyfacts b{font-size:1.02rem} @media(max-width:640px){.keyfacts{grid-template-columns:repeat(2,1fr)}} .proscons{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin:1.6em 0} .pc{border:2px solid var(--line);border-radius:var(--r-md);padding:18px 20px;background:var(--surface)} .pc ul{list-style:none;margin:0;padding:0} .pc li{position:relative;padding-left:1.6em;margin:.5em 0} .pros{border-color:var(--coral)} .pros li::before{content:"\2713";position:absolute;left:0;color:var(--coral-ink);font-weight:700} .cons li::before{content:"!";position:absolute;left:.25em;color:var(--sage);font-weight:700} @media(max-width:640px){.proscons{grid-template-columns:1fr}} .inclist{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin:1.6em 0} .inclist>div{border:2px solid var(--line);border-radius:var(--r-md);padding:18px 20px;background:var(--surface)} .inclist h4{margin:0 0 .5em;font-family:var(--ui);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase} .inclist ul{list-style:none;margin:0;padding:0} .inclist li{position:relative;padding-left:1.6em;margin:.5em 0} .inclist .inc{border-color:var(--coral)} .inclist .inc h4{color:var(--coral-ink)} .inclist .inc li::before{content:"\2713";position:absolute;left:0;color:var(--coral-ink);font-weight:700} .inclist .exc h4{color:var(--sage)} .inclist .exc li::before{content:"\00d7";position:absolute;left:.15em;color:var(--sage);font-weight:700} @media(max-width:640px){.inclist{grid-template-columns:1fr}} /* ---------- scorecard (review pages) ---------- */ .scorecard{display:grid;grid-template-columns:200px 1fr;gap:0;border:2px solid var(--ink);border-radius:var(--r-md);overflow:hidden;margin:0 0 1.8em} .sc-score{background:var(--ink);color:#fff;padding:22px;display:flex;flex-direction:column;justify-content:center;text-align:center} .sc-big{font-family:var(--ui);font-weight:800;font-size:3rem;line-height:1;letter-spacing:-.03em} .sc-stars{color:var(--coral);letter-spacing:2px;margin:.2em 0} .sc-rev{font-size:.8rem;color:var(--on-ink-hi)} .sc-price{margin-top:.5em;font-weight:700;color:#fff} .sc-specs{padding:8px 22px;background:var(--surface)} .sc-row{display:flex;justify-content:space-between;gap:14px;padding:9px 0;border-bottom:1px solid var(--line);font-size:.95rem} .sc-row:last-child{border-bottom:0} .sc-row span{color:var(--sage)} .sc-row b{text-align:right} @media(max-width:560px){.scorecard{grid-template-columns:1fr}} /* ---------- review hub cards ---------- */ .rev-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;margin:1.5em 0 .4em} @media(max-width:600px){.rev-grid{grid-template-columns:1fr}} .rev-card{display:flex;flex-direction:column;border:2px solid var(--line);border-radius:var(--r-lg);padding:0;overflow:hidden;background:var(--surface);color:var(--ink);transition:border-color .15s} .rev-card:hover{border-color:var(--coral);text-decoration:none} .rev-thumb{margin:0;aspect-ratio:16/9;overflow:hidden;background:var(--ink)} .rev-thumb img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .25s} .rev-card:hover .rev-thumb img{transform:scale(1.04)} .rev-body{display:flex;flex-direction:column;flex:1;padding:16px 20px 18px} .rev-meta{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:.6em} .rev-score{font-family:var(--ui);font-weight:800;font-size:1.3rem;line-height:1;color:var(--ink)} .rev-stars{color:var(--coral);letter-spacing:1px;font-size:.9rem} .rev-count{font-family:var(--ui);font-weight:500;font-size:.72rem;color:var(--sage)} .rev-card h3{font-weight:700;font-size:1.05rem;line-height:1.3;margin:0 0 .4em} .rev-card p{font-size:.92rem;color:var(--sage);margin:0 0 1em} .rev-price{font-weight:700;font-size:.9rem;margin-top:auto} .rev-more{display:block;color:var(--coral-ink);font-family:var(--ui);font-weight:600;font-size:.74rem;text-transform:uppercase;letter-spacing:.04em;margin-top:.5em} /* ---------- tour cards ---------- */ /* A CENTRED FLEX ROW, not a grid. Grid cannot centre an incomplete row, which is the only reason the scaffold shipped a decorative "filler" tile to top short rows up to a multiple of three. That tile looks like a product card that failed to load - users try to click it - and it is fake inventory on a site whose whole pitch is not padding the truth. The helper is deleted, not just its output. */ .tours-grid{display:flex;flex-wrap:wrap;justify-content:center;align-items:stretch; gap:20px;margin:1.5em 0 .4em} .tours-grid>*{flex:0 1 calc((100% - 40px)/3)} .tours-grid.cols-4{gap:16px} .tours-grid.cols-4>*{flex:0 1 calc((100% - 48px)/4)} /* Shape awkward counts with :has() child-counting instead of new markup. SCOPED inside the desktop breakpoint on purpose - :has()/:not() inherit their argument's specificity, so an unscoped rule outranks the mobile widths below and pins phones at half-width cards. */ @media(min-width:861px){ .tours-grid:not(.cols-4):has(>*:nth-child(4)):not(:has(>*:nth-child(5)))>*{ flex:0 1 calc((100% - 20px)/2)} .tours-grid:not(:has(>*:nth-child(2)))>*{flex:0 1 calc((100% - 20px)/2)} } @media(max-width:1024px){.tours-grid.cols-4>*{flex:0 1 calc((100% - 16px)/2)}} @media(max-width:860px){.tours-grid>*{flex:0 1 calc((100% - 20px)/2)}} @media(max-width:560px){.tours-grid>*,.tours-grid.cols-4>*{flex:0 1 100%}} .tour{border:2px solid var(--line);border-radius:var(--r-lg);overflow:hidden;background:var(--surface);display:flex;flex-direction:column;transition:border-color .15s} .tour:hover{border-color:var(--coral)} /* whole card is an (see helpers._card) — kill link styling, keep hover feedback */ a.tour{color:inherit;text-decoration:none} /* explicit hover colour, never filter:brightness() */ a.tour:hover .btn:not(.btn-ghost){background-color:var(--clay-dk);border-color:var(--clay-dk)} .thumb{position:relative;aspect-ratio:3/2;overflow:hidden;background:var(--neutral)} .thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} .badge{position:absolute;top:10px;left:10px;background-color:var(--clay);color:var(--surface);font-family:var(--ui);font-weight:600;font-size:.64rem;letter-spacing:.06em;text-transform:uppercase;padding:5px 9px;border-radius:var(--r-sm)} .tour-body{padding:16px 16px 18px;display:flex;flex-direction:column;flex:1} .tour-body h3{font-size:1.02rem;margin:0 0 .45em;line-height:1.25;font-weight:700} .rate{font-size:.85rem;color:var(--sage);margin-bottom:.5em} .star{color:var(--coral)} .price{font-weight:700;margin-bottom:.8em} .price span{font-weight:400;color:var(--sage);font-size:.85rem} .tour-body .btn{margin-top:auto} /* (filler-tile styling deleted along with helpers._filler) */ /* ---------- book-card (docked chip availability) ---------- */ .book-card{position:relative;border:2px solid var(--ink);border-radius:var(--r-md);padding:26px 18px 14px;margin:1.6em 0;background:var(--surface)} .book-chip{position:absolute;top:-13px;left:18px;background-color:var(--clay);color:var(--surface);font-family:var(--ui);font-weight:600;font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;padding:5px 12px;border-radius:var(--r-sm)} .gyg-frame{min-height:220px} /* ---------- comparison table ---------- */ .cmp-wrap{overflow-x:auto;margin:1.8em 0} /* Break the comparison table out of the 760px prose column so it has more room to breathe. Prose has ~158px of slack each side inside .wrap, so -110px is safe. */ @media(min-width:1080px){.cmp-wrap{margin-left:-110px;margin-right:-110px}} table.cmp{border-collapse:separate;border-spacing:0;min-width:640px;width:100%;font-size:1.02rem} table.cmp th,table.cmp td{border:0;border-bottom:1px solid var(--line);padding:16px 20px;background:var(--surface)} table.cmp thead th{background:var(--neutral);color:var(--ink);vertical-align:bottom;text-transform:none;letter-spacing:-.01em;font-family:var(--ui);font-weight:700} table.cmp .rowlabel{font-family:var(--ui);font-weight:600;color:var(--sage);font-size:.82rem;text-transform:uppercase;letter-spacing:.04em} table.cmp .feat{background:var(--neutral);border-left:2px solid var(--coral);border-right:2px solid var(--coral)} table.cmp thead .feat{border-top:2px solid var(--coral)} table.cmp tr.cmp-book .feat{border-bottom:2px solid var(--coral)} .cmp-badge{display:inline-block;background-color:var(--clay);color:var(--surface);font-family:var(--ui);font-weight:600;font-size:.62rem;letter-spacing:.06em;text-transform:uppercase;padding:4px 8px;border-radius:var(--r-sm);margin-bottom:6px} .feat-title{display:block;font-family:var(--ui);font-weight:800;font-size:1.12rem;letter-spacing:-.02em} .col-alt{color:var(--ink)} table.cmp .btn{width:100%;padding:11px 10px;font-size:.76rem} /* ---------- gallery ---------- */ /* 3 columns, because this site ships 6 gallery shots and the column count MUST divide the shot count - a 3-column strip with 7 shots left one hanging on an earlier build. 6 / 3 = 2 clean rows. */ .gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:1.8em 0} .gallery figure{margin:0;position:relative;border-radius:var(--r-md);overflow:hidden} .gallery img{width:100%;aspect-ratio:3/4;object-fit:cover} .gallery figcaption{position:absolute;left:0;right:0;bottom:0;background-color:rgba(43,29,20,.88);color:#fff;font-family:var(--ui);font-weight:600;font-size:.72rem;padding:14px 12px 9px;text-transform:uppercase;letter-spacing:.04em} @media(max-width:760px){.gallery{grid-template-columns:repeat(2,1fr)}} /* ---------- steps ---------- */ .steps{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin:1.5em 0;counter-reset:s} .step{border-top:3px solid var(--coral);padding:14px 4px 0;counter-increment:s} .step::before{content:counter(s);font-family:var(--ui);font-weight:800;font-size:1.5rem;color:var(--coral-ink);display:block;margin-bottom:.1em} .step h3{margin:0 0 .25em;font-size:1.05rem} .step p{font-size:.9rem;color:var(--sage);margin:0} @media(max-width:760px){.steps{grid-template-columns:repeat(2,1fr)}} /* ---------- reviews band ---------- */ .reviews-band{background-color:var(--surface);border-radius:var(--r-lg);padding:24px;margin:1.8em 0} .reviews-head{display:flex;align-items:center;gap:18px} .reviews-head .big{font-family:var(--ui);font-weight:800;font-size:3rem;color:var(--ink);line-height:1;letter-spacing:-.03em} .reviews-head .stars{color:var(--coral);font-size:1.1rem;letter-spacing:2px} /* ---------- honest guide ---------- */ .honest-guide{background-color:var(--surface);border-radius:var(--r-lg);padding:32px 30px;margin:2.4em 0} .honest-guide h2{margin-top:0} .honest-guide .lead{font-size:1.1rem;color:var(--ink)} .honest-guide h3{margin-top:1.5em} .guide-fig{margin:1.5em 0} .guide-fig img{width:100%;max-height:340px;object-fit:cover;border-radius:var(--r-md)} .guide-fig figcaption{font-size:.84rem;color:var(--sage);margin-top:.5em;font-style:italic} /* ---------- FAQ ---------- */ .faq{margin:1em 0} .faq details{border-bottom:1px solid var(--line);padding:4px 0} .faq summary{cursor:pointer;font-weight:600;padding:14px 30px 14px 0;position:relative;list-style:none} .faq summary::-webkit-details-marker{display:none} .faq summary::after{content:"+";position:absolute;right:4px;top:12px;color:var(--coral-ink);font-weight:700;font-size:1.3rem} .faq details[open] summary::after{content:"\2212"} .faq-body{padding:0 0 12px} .faq-body p{margin:0} .faq-contact{margin:1.1em 0 .2em;font-weight:600;color:var(--ink)} .faq-contact a{color:var(--coral-ink)} /* ---------- disclosure ---------- */ .disclosure{font-size:.84rem;color:var(--sage);background-color:var(--surface);border-radius:var(--r-md);padding:13px 16px;margin:1em 0 1.6em} .disclosure a{color:var(--coral-ink)} /* related strip */ .related{border-top:2px solid var(--ink);margin-top:2.4em;padding-top:1.2em} /* sitemap */ .sitemap-list{list-style:none;padding-left:0} .sitemap-list li{margin:.4em 0;padding-left:1.2em;position:relative} .sitemap-list li::before{content:"\2192";position:absolute;left:0;color:var(--coral-ink)} /* ---------- footer ---------- */ .site-foot{background-color:var(--ink);color:var(--on-ink);margin-top:40px;border-top:4px solid var(--coral)} .site-foot .wrap{padding:48px 22px 30px} .foot-grid{display:grid;grid-template-columns:1.7fr 1fr 1fr 1.4fr;gap:32px} .site-foot .brand .logo{color:#fff;margin-bottom:.6em} .site-foot .brand p{font-size:.9rem;max-width:34em} .site-foot h4{color:#fff;margin-bottom:.8em} .site-foot ul{list-style:none;margin:0;padding:0} .site-foot li{margin:.4em 0} .site-foot a{color:var(--on-ink);font-size:.92rem} .site-foot a:hover{color:#fff} .foot-guides{margin-top:30px;border-top:1px solid var(--rule-ink);padding-top:20px} .foot-guides ul{display:flex;flex-wrap:wrap;gap:8px 26px} .foot-answers{margin-top:26px;border-top:1px solid var(--rule-ink);padding-top:20px;display:flex;flex-wrap:wrap;align-items:baseline;gap:10px 18px} .foot-answers .label{font-family:var(--ui);font-weight:600;font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;color:var(--on-ink-mut)} .foot-answers nav{display:flex;flex-wrap:wrap;gap:8px 18px} .foot-answers a{color:var(--on-ink);font-size:.86rem} .foot-answers a:hover{color:#fff} .foot-facts{display:grid;grid-template-columns:repeat(6,1fr);gap:14px;margin-top:22px;border-top:1px solid var(--rule-ink);padding-top:22px} .foot-facts .kf-label,.foot-facts .label{display:block;font-family:var(--ui);font-weight:600;font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;color:var(--on-ink-mut);margin-bottom:3px} .foot-facts b{color:#fff;font-size:.92rem} .foot-searches{margin-top:22px;border-top:1px solid var(--rule-ink);padding-top:20px} .foot-searches h4{font-family:var(--ui);font-weight:600;font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;color:var(--on-ink-mut);margin:0 0 12px} .foot-searches ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px} .foot-searches li{margin:0} .foot-searches a{display:inline-block;padding:5px 11px;border:1px solid var(--rule-ink);border-radius:var(--r-sm);font-size:.78rem;color:var(--on-ink-pill);line-height:1.3;transition:color .15s,border-color .15s,background .15s} .foot-searches a:hover{color:#fff;border-color:var(--clay-lite);background-color:rgba(255,255,255,.06)} .foot-bottom{margin-top:28px;border-top:1px solid var(--rule-ink);padding-top:18px;font-family:var(--ui);font-size:.74rem;color:var(--on-ink-mut)} .foot-bottom a{color:var(--on-ink)} @media(max-width:860px){.foot-grid{grid-template-columns:1fr 1fr}} @media(max-width:760px){.foot-grid{grid-template-columns:1fr}.foot-facts{grid-template-columns:repeat(2,1fr)}} /* ---------- homepage: "what's included" two-column ---------- */ .includes{margin:2.2em 0;background:var(--surface);border:2px solid var(--line);border-radius:var(--r-lg);padding:26px 26px 22px} .includes h2{margin:0 0 .25em} .includes-lead{color:var(--sage);margin:0 0 1.2em;font-size:1rem} .includes-grid{display:grid;grid-template-columns:1fr 1fr;gap:30px} .includes-col h3{font-family:var(--ui);font-weight:700;font-size:1.12rem;color:var(--ink);margin:0 0 .55em;padding-bottom:.4em;border-bottom:2px solid var(--coral);display:inline-block} .includes-col ul.check{margin:0} .includes-col .muted{color:var(--sage);font-style:italic} @media(max-width:680px){.includes{padding:20px}.includes-grid{grid-template-columns:1fr;gap:18px}} /* ---------- homepage: route / "what you see, in order" (AEO) ---------- */ .route{margin:2.4em 0} .route h2{margin:0 0 .25em} .route-lead{color:var(--sage);margin:0 0 1.1em;font-size:1rem} .route-stops{list-style:none;margin:1.4em 0;padding:0;counter-reset:stop} .route-stops li{counter-increment:stop;position:relative;padding:0 0 1.1em 3.2em;margin:0} .route-stops li:before{content:counter(stop);position:absolute;left:0;top:0;width:2rem;height:2rem;display:flex;align-items:center;justify-content:center;background-color:var(--clay);color:var(--surface);font-family:var(--ui);font-size:.85rem;font-weight:600;border-radius:var(--r-sm)} .route-stops li:not(:last-child):after{content:"";position:absolute;left:.95rem;top:2rem;bottom:.2em;width:2px;background:var(--line)} .route-stops li strong{color:var(--ink)} /* ---------- homepage: wide photo gallery (breaks out of prose) ---------- */ .photo-wide{position:relative;left:50%;transform:translateX(-50%);width:min(1180px,94vw);margin:2.6em 0} .photo-wide-head{text-align:center;max-width:44em;margin:0 auto 1.2em} .photo-wide-head h2{margin:.15em 0 .3em} .photo-wide-sub{color:var(--sage);margin:0} .photo-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:14px} .photo-strip .shot{margin:0;border-radius:var(--r-md);overflow:hidden;background:var(--neutral)} .photo-strip .shot img{width:100%;aspect-ratio:4/3;object-fit:cover;transition:transform .4s ease} .photo-strip .shot:hover img{transform:scale(1.06)} @media(max-width:760px){.photo-strip{grid-template-columns:repeat(2,1fr)}} @media(max-width:480px){.photo-strip{grid-template-columns:1fr}} /* ---------- homepage: guest testimonials (breaks out of prose) ---------- */ .testimonials{position:relative;left:50%;transform:translateX(-50%);width:min(1180px,94vw);margin:2.8em 0 2.2em} .testimonials h2{text-align:center;margin:0 0 .25em} .t-lead{text-align:center;color:var(--sage);margin:0 0 1.4em} .t-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px} .t-card{margin:0;background-color:var(--surface);border:2px solid var(--line);border-radius:var(--r-lg);padding:20px 20px 16px;display:flex;flex-direction:column} .t-stars{color:var(--coral);letter-spacing:2px;font-size:.92rem;margin-bottom:.5em} .t-card blockquote{margin:0 0 1em;font-size:.96rem;line-height:1.55;color:var(--ink)} .t-card figcaption{margin-top:auto;border-top:1px solid var(--line);padding-top:.7em} .t-name{display:block;font-family:var(--ui);font-weight:700;font-size:.86rem;color:var(--ink)} .t-tour{display:block;font-family:var(--ui);font-size:.74rem;color:var(--sage);margin-top:2px} .t-foot{text-align:center;color:var(--sage);font-size:.9rem;margin:1.4em 0 0} @media(max-width:860px){.t-grid{grid-template-columns:1fr 1fr}} @media(max-width:560px){.t-grid{grid-template-columns:1fr}} /* ===== CTR features (opt-in; render only when the site defines them) ===== _ladder / _town_chips / _book_bar in build_home.py + fee/perday in helpers. First shipped on yellowstonetourpackages.com. Recolor per site theme. */ /* entry-fee badge on card thumbs (tour dict: "fee_inc" / "fee_badge") */ .fee-badge{position:absolute;left:10px;bottom:10px;background-color:#2F5D3A;color:var(--surface); font-size:.72rem;font-weight:700;letter-spacing:.02em;padding:4px 9px;border-radius:var(--r-sm)} /* price-per-day subtext (tour dict: "perday") */ .perday{font-size:.8rem;color:var(--sage);margin:-4px 0 10px} /* duration/decision ladder band (homecontent: LADDER) */ .ladder-band{background:var(--ink);color:var(--neutral);padding:34px 0 40px} .ladder-band h2{color:var(--neutral);font-size:1.45rem;margin:0 0 18px} .ladder{display:grid;grid-template-columns:repeat(3,1fr);gap:14px} .ladder-col{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.22); border-radius:var(--r-md);padding:20px 18px;display:flex;flex-direction:column} .ladder-col.feat{background:var(--surface);color:var(--ink);border-color:var(--surface)} .ladder-col.feat p{color:var(--ink)} .ladder-days{font-weight:700;font-size:1.05rem;letter-spacing:.03em;text-transform:uppercase} .ladder-price{color:var(--coral);font-weight:700;font-size:1.3rem;margin:4px 0 8px} .ladder-col.feat .ladder-price{color:var(--coral-ink)} .ladder-col p{font-size:.9rem;line-height:1.5;margin:0 0 16px;color:rgba(255,255,255,.85);flex:1} .ladder-col .btn{align-self:flex-start} .ladder-col .btn.ghost{background:transparent;border:1.5px solid rgba(255,255,255,.5);color:var(--neutral)} .ladder-col .btn.ghost:hover{border-color:var(--clay-lite);color:var(--clay-lite)} @media(max-width:760px){.ladder{grid-template-columns:1fr}} /* departure-town chips (auto when 2+ tours carry "town") */ .town-chips{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin:6px 0 18px} .chips-label{font-size:.85rem;color:var(--sage);font-weight:600} .town-chips .chip{background:var(--neutral);border:1px solid var(--line);border-radius:var(--r-sm); padding:7px 15px;font:inherit;font-size:.85rem;cursor:pointer;color:var(--ink)} .town-chips .chip.on{background:var(--ink);color:var(--neutral);border-color:var(--ink)} .town-chips .chip:hover{border-color:var(--coral)} /* sticky mobile book-bar (homecontent: BOOK_BAR) */ .book-bar{display:none} @media(max-width:760px){ .book-bar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:60; background:var(--ink);color:var(--neutral);align-items:center;justify-content:space-between; gap:10px;padding:10px 14px;box-shadow:0 -3px 12px rgba(0,0,0,.25)} .book-bar span{font-size:.85rem;font-weight:600} .book-bar .btn{padding:9px 16px;font-size:.85rem} body{padding-bottom:58px} } /* ==================================================================== */ /* Conversion + EEAT layer (piloted on okavangodeltasafaritours.com) */ /* cancel-note under availability widgets (conversion layer) */ .cancel-note{margin-top:10px;padding-top:10px;border-top:1px solid var(--line);font-size:.82rem;color:var(--sage)} /* anchored-price band (opt-in via homecontent PRICE_ANCHOR) */ .price-anchor{margin:34px 0;padding:26px 26px 28px;background:var(--surface); border:1px solid var(--line);border-radius:var(--r-lg)} .price-anchor h2{margin:0 0 18px;font-size:1.25rem} .pa-row{display:grid;grid-template-columns:1fr auto 1fr;gap:18px;align-items:stretch} .pa-col{display:flex;flex-direction:column;gap:6px;padding:18px;border-radius:var(--r-md)} .pa-was{background:var(--neutral);border:1px dashed var(--line)} .pa-now{background:var(--ink);color:#fff;border:1px solid var(--ink)} .pa-label{font-size:.78rem;text-transform:uppercase;letter-spacing:.06em;opacity:.75;font-weight:700} .pa-price{font-size:2rem;font-weight:800;line-height:1.1} .pa-was .pa-price{color:var(--sage)} .pa-now .pa-price{color:#fff} .pa-note{font-size:.85rem;line-height:1.45;opacity:.85} .pa-vs{align-self:center;font-weight:800;color:var(--sage);font-size:.9rem; text-transform:uppercase;letter-spacing:.08em} .pa-now .btn{margin-top:12px;align-self:flex-start;background:var(--accent);border-color:var(--accent)} @media(max-width:720px){.pa-row{grid-template-columns:1fr}.pa-vs{justify-self:center;padding:2px 0}} /* real-photo trust strip (opt-in via homecontent REAL_STRIP; Wikimedia Commons, credited) */ .real-strip{margin:38px 0} .real-strip>h2{text-align:center} .real-strip>p{color:var(--sage);margin-top:4px;text-align:center;max-width:820px;margin-left:auto;margin-right:auto} .real-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:18px} .real-grid figure{margin:0} .real-grid img{width:100%;aspect-ratio:3/2;height:auto;object-fit:cover;border-radius:var(--r-lg);display:block} .real-grid figcaption{font-size:.76rem;color:var(--sage);margin-top:6px;line-height:1.4} .real-grid figcaption a{color:inherit;text-decoration:underline;text-underline-offset:2px} @media(max-width:720px){.real-grid{grid-template-columns:1fr}} /* breakout: same width as the testimonials band */ .real-strip.breakout{position:relative;left:50%;transform:translateX(-50%);width:min(1180px,94vw)} .real-zoom{display:block;cursor:zoom-in} .real-zoom img{transition:transform .18s ease} .real-zoom:hover img{transform:scale(1.015)} /* lightbox overlay for full-size photos */ .lightbox{position:fixed;inset:0;z-index:80;background:rgba(20,26,18,.92); display:flex;align-items:center;justify-content:center;cursor:zoom-out;padding:24px} .lightbox[hidden]{display:none} .lightbox figure{margin:0;max-width:min(1500px,96vw);text-align:center} .lightbox img{max-width:100%;max-height:84vh;border-radius:var(--r-lg);display:block;margin:0 auto} .lightbox figcaption{color:#e8e5da;font-size:.82rem;margin-top:10px;line-height:1.4} .lightbox figcaption a{color:inherit;text-decoration:underline;text-underline-offset:2px} /* author card (EEAT, about page — driven by cfg.AUTHOR) */ .author-card{display:flex;gap:18px;align-items:center;margin:18px 0 24px;padding:16px; background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg)} .author-card img{width:96px;height:96px;border-radius:var(--r-lg);object-fit:cover;flex-shrink:0} .author-card div{display:flex;flex-direction:column;gap:3px} .author-card b{font-size:1.05rem} .author-card span{font-size:.85rem;color:var(--sage)} /* ==================================================================== */ /* UX + CTR polish. Applied at build time, not bolted on afterwards. */ /* --- 1. Focus. The scaffold ships NO :focus-visible rule at all. --- */ :focus-visible{outline:3px solid var(--clay);outline-offset:2px;border-radius:var(--r-sm)} .hero :focus-visible,.site-foot :focus-visible,.ia-takeaways :focus-visible, .ladder-band :focus-visible,.section-nav :focus-visible{outline-color:var(--clay-lite)} a.tour:focus-visible{outline-offset:3px} /* --- 2. Touch targets: 44px on coarse pointers. --- */ @media(pointer:coarse){ .btn{min-height:44px;display:inline-flex;align-items:center;justify-content:center} .faq summary{padding-top:16px;padding-bottom:16px} .foot-searches a,.town-chips .chip{min-height:40px;display:inline-flex;align-items:center} .site-foot li a,.foot-answers a{display:inline-block;padding:5px 0} } /* --- 3. Sticky-header offset for the anchor targets. --- */ :target,section[id],h2[id],h3[id],#availability,#popular,#faq,#gallery,#compare, #reviews,#how-it-works,#how-booking-works{scroll-margin-top:82px} /* --- 4. Card affordance, flat system so no shadow. --- */ .tour,.rev-card{transition:border-color .15s,transform .15s} @media(hover:hover) and (prefers-reduced-motion:no-preference){ a.tour:hover,.rev-card:hover{transform:translateY(-2px)} a.tour:hover .thumb img{transform:scale(1.03)} } .thumb img{transition:transform .25s} /* --- 5. Peso amounts read as data. DM Sans has tabular numerals. --- */ .price,.facts-val,.sc-big,.rev-score,.ladder-price,.pa-price,.reviews-head .big, table.cmp td{font-variant-numeric:tabular-nums} /* --- 6. DM Serif Display is a high-contrast didone with ONE weight. Belt and braces against any rule elsewhere asking for a bold it does not have. --- */ h1,.logo,.display{font-optical-sizing:auto;font-synthesis:none} .hero h1{text-wrap:balance} /* --- 7. Long product titles clamp so a 12-word title cannot push the price and CTA out of line with its row-mates. --- */ .tour-body h3,.rev-card h3{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical; overflow:hidden} /* --- 8. FOUR LANGUAGE TREES SHARE THIS FILE. Per-language typography lives here, inside the desktop breakpoint where relevant, so it cannot leak into the stacked mobile panel. German is the one that breaks headers: compounds do not wrap, and a translator will happily return "Haeufig gestellte Fragen" for "FAQ" (165px where English spends 32px). The translator prompt forbids that, but a prompt is not a guarantee - so the nav also gets room to breathe in DE, and the fold is re-measured per language. --- */ @media(min-width:1001px) and (max-width:1240px){ :lang(de) .nav{gap:16px} :lang(de) .nav a{font-size:.84rem;letter-spacing:0} :lang(de) .nav a.btn{padding:11px 14px;letter-spacing:.04em} :lang(de) .lang-bar .lang-chip{font-size:.66rem;padding:5px 5px} :lang(de) .lang-bar{gap:1px} } :lang(de) .hero h1{font-size:clamp(1.7rem,2.7vw,2.35rem);hyphens:auto} :lang(de) .facts-label,:lang(de) .kf-label{letter-spacing:.04em} /* Spanish and French run longer than English too, just less violently. */ :lang(es) .hero h1,:lang(fr) .hero h1{font-size:clamp(1.75rem,2.85vw,2.5rem)} :lang(es) .btn,:lang(fr) .btn,:lang(de) .btn{letter-spacing:.06em} /* --- 9. Print: people print the price page before they go and haggle. --- */ @media print{ .site-head,.section-nav,.book-bar,.hero-cta,.foot-searches,.explore{display:none} .hero{background-image:none;background-color:#fff;color:#000} .hero::before{display:none} .hero-copy{background-color:transparent;border-left:0;padding:0} .hero h1,.hero .lede,.hero-trust,.hero .label{color:#000} a[href^="http"]::after{content:" (" attr(href) ")";font-size:.75em;word-break:break-all} } /* ------------------------------------------------------------------ * * ACCENT-AS-TEXT-ON-DARK. Third site in this family to hit this, and * the audit found it again rather than the CSS review: --clay (#9F5631) * is solved against the CREAM foundation, where it is 4.51. Put the same * token on the ink panel and it is 2.99 for the review stars and 2.44 for * the ladder prices - both real failures a reader would feel. * --clay-lite (#E09A6E) exists for exactly this and measures 7.00 on ink. * The rule is not "pick a lighter orange", it is: an accent has TWO values, * one per surface, and every use has to declare which surface it is on. * ------------------------------------------------------------------ */ .sc-stars{color:var(--clay-lite)} /* The ladder band is DARK, but its featured column is a CREAM CARD sitting on * top of that band - so the two prices need OPPOSITE tokens, and the scaffold * had them exactly inverted: the dark accent on the dark columns, and the * lighter token reserved for the one place that did not need it. This is why * the surface has to be read off the RENDERED ELEMENT and never off the * section it nominally belongs to. */ .ladder-price{color:var(--clay-lite)} .ladder-col.feat .ladder-price{color:var(--clay)} .sc-stars{letter-spacing:2px;margin:.2em 0;font-size:1.05rem} /* ------------------------------------------------------------------ * * PER-LANGUAGE NAV HEADROOM, part two. The :lang(de) band above was * written from SIMULATED German labels before the translation existed, * and it held. What it could not predict was FRENCH: the model returned * "Visites guidees" for "Tours" and "Reserver maintenant" for "Book * Now", and the real header came back 989px wide inside a 1120px wrap - * six pixels PAST its container at the 1001px collapse point. The * labels were shortened at source; this band is the belt to that * braces, and it covers Spanish too, which measured 62px of slack and * has no business being that close. * Simulating a translation is worth doing and is not the same as * measuring one. * ------------------------------------------------------------------ */ @media(min-width:1001px) and (max-width:1300px){ :lang(fr) .nav,:lang(es) .nav{gap:16px} :lang(fr) .nav a,:lang(es) .nav a{font-size:.84rem;letter-spacing:0} :lang(fr) .nav a.btn,:lang(es) .nav a.btn{padding:11px 14px;letter-spacing:.04em} :lang(fr) .lang-bar .lang-chip,:lang(es) .lang-bar .lang-chip{font-size:.66rem;padding:5px 5px} :lang(fr) .lang-bar,:lang(es) .lang-bar{gap:1px} } /* ------------------------------------------------------------------ * * LANGUAGE SWITCHER - a header component, not a nav item. * * THE BUG THIS REPLACES. The switcher was injected by translate_site.py * into the