@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght,SOFT,WONK@0,9..144,300..900,0..100,0..1;1,9..144,300..900,0..100,0..1&family=Hanken+Grotesk:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap'); /* ===================================================================== KLLD-TOURS-HUB-2026 — "The Season Ledger" /khao-lak-tours/ hub: 1525 EN · 17123 DE · 17413 FR (+ 79933 preview). template-cinematic-tours-preview.php, enqueued from inc/klld-tours-hub-2026.php at wp_enqueue_scripts priority 200 — i.e. AFTER Bootstrap and the Traveler sheets, which is why nothing here needs !important. 2026-08-27 — ported from _proto/tours-hub-v2 (_src/style.css). The port is mechanical (see _work/port/_mkcss.py): every prototype class gained a .kdl- prefix and every custom property a --kdl- prefix, because the prototype's bare names (.card .grid .top .chip .price .status .legend .brand .rule .in .big) all collide with Bootstrap and the Traveler theme in BOTH directions. Every bare element rule is scoped to .kd-hub; only the page background sits on body.klld-tours-hub. TYPE: Fraunces (display, on its optical-size + SOFT/WONK axes), Hanken Grotesk (UI), JetBrains Mono (every number a traveller reads — ฿ price, day counts, month tallies). All three are already pulled into the of every page by inc/klld-mega-menu.php, so this sheet's @import costs nothing new. Distinct KLLD families on this page: 3. The @import route is deliberate — a separately-enqueued to fonts.googleapis is silently pruned by LiteSpeed's Google-Fonts optimizer on this install (same reason as the transfer page and home). COLOUR: five hexes and nothing else — paper, ink, brand green #099024, accent gold #ffcc00, and one semantic grey for "closed this month". Every other value is a color-mix of those five, so the sheet cannot quietly grow a sixth colour. Text tiers are set by MEASURED contrast: --kdl-ink-70 = 7.04:1, --kdl-ink-62 = 5.48:1 (both AA at any size), --kdl-ink-46 = 3.30:1 for non-text marks only, --kdl-ink-38 is decorative (aria-hidden) and never carries meaning. ===================================================================== */ .kd-hub{ /* the only five */ --kdl-paper:#F4F2EC; --kdl-ink:#141A13; --kdl-green:#099024; --kdl-gold:#ffcc00; --kdl-rest:#8B9787; /* one semantic grey: "closed this month" */ /* mixes */ /* Text tiers are set by MEASURED contrast, not by eye: 70% = 7.04:1 and 62% = 5.48:1 on paper (5.00:1 on --kdl-sink), both clear AA for any size. 46% = 3.30:1 — non-text marks only, never a glyph. 38% is decorative (aria-hidden) only: it measures 2.61:1 and must never carry meaning. */ --kdl-ink-70:color-mix(in oklab,var(--kdl-ink) 70%,var(--kdl-paper)); --kdl-ink-62:color-mix(in oklab,var(--kdl-ink) 62%,var(--kdl-paper)); --kdl-ink-46:color-mix(in oklab,var(--kdl-ink) 46%,var(--kdl-paper)); --kdl-ink-38:color-mix(in oklab,var(--kdl-ink) 38%,var(--kdl-paper)); /* the semantic grey, pushed toward ink just far enough to be a perceivable non-text mark (#8B9787 alone is 2.73:1 — under the 3:1 floor) */ --kdl-rest-line:color-mix(in oklab,var(--kdl-rest) 52%,var(--kdl-ink)); --kdl-rule:color-mix(in oklab,var(--kdl-ink) 16%,var(--kdl-paper)); --kdl-rule-soft:color-mix(in oklab,var(--kdl-ink) 8%,var(--kdl-paper)); --kdl-sink:color-mix(in oklab,var(--kdl-ink) 4%,var(--kdl-paper)); --kdl-sink-2:color-mix(in oklab,var(--kdl-ink) 7%,var(--kdl-paper)); --kdl-disp:"Fraunces",Georgia,"Times New Roman",serif; --kdl-ui:"Hanken Grotesk",ui-sans-serif,system-ui,sans-serif; --kdl-mono:"JetBrains Mono",ui-monospace,SFMono-Regular,monospace; --kdl-shell:1280px; --kdl-pad:clamp(20px,5vw,56px); --kdl-ease:cubic-bezier(.2,.7,.3,1); } .kd-hub,.kd-hub *,.kd-hub *::before,.kd-hub *::after{box-sizing:border-box} /* ── element reset, BEFORE everything the prototype declares ───────────── Traveler and Bootstrap style bare section/article/ul/details, and the ported rules must beat that without carrying !important. Two properties of this block do the work: · :where() contributes ZERO specificity, so the whole selector weighs exactly as much as `.kd-hub` — the same as a `.kdl-*` rule; · it sits FIRST, so on that deliberate tie the ported rule wins. Getting this wrong is not subtle. The first cut of this port wrote the same reset as `.kd-hub section {background:none;padding:0}` at the END of the file: specificity (0,1,1) against `.kdl-hero`'s (0,1,0), so the guard beat the design. The hero and the FAQ band both lost their dark ground and their vertical padding, light text ended up on a pale scrim, and measured contrast on the hero fell to 1.6:1. It looked like a photograph problem. It was this rule. */ .kd-hub :where(section,article,header,footer,aside,main,div){ margin:0;padding:0;border:0;background:none;float:none;width:auto;min-width:0} .kd-hub :where(ul,ol,li){margin:0;padding:0;list-style:none} .kd-hub :where(details,summary){display:block;background:none;border:0;margin:0;padding:0} .kd-hub :where(svg){display:inline-block;vertical-align:middle;max-width:none} .kd-hub :where(h1,h2,h3,h4,p,span,b,i,em,strong){margin:0;padding:0;background:none} html{scroll-behavior:smooth} body.klld-tours-hub{ background:var(--kdl-paper); overflow-x:hidden; } .kd-hub{ background:var(--kdl-paper);color:var(--kdl-ink); font-family:var(--kdl-ui);font-size:16px;line-height:1.55; font-variant-ligatures:common-ligatures; -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale; overflow-x:clip; } .kd-hub img{max-width:100%;display:block;height:auto} .kd-hub h1,.kd-hub h2,.kd-hub h3{margin:0;font-weight:400;text-transform:none} .kd-hub p{margin:0} .kd-hub a{color:inherit;text-decoration:none;box-shadow:none} .kd-hub a:hover,.kd-hub a:focus{color:inherit;text-decoration:none} .kd-hub button{font:inherit;color:inherit;background:none;border:0;margin:0;padding:0;cursor:pointer;text-transform:none;letter-spacing:inherit;border-radius:0;box-shadow:none} .kd-hub button:hover,.kd-hub button:focus{background:none;color:inherit} .kdl-mono{font-family:var(--kdl-mono);font-feature-settings:"tnum" 1;letter-spacing:-.01em} .kdl-shell{max-width:var(--kdl-shell);margin-inline:auto;padding-inline:var(--kdl-pad)} /* focus — a rule, never a wash. Ink for contrast, gold hairline for brand. */ .kd-hub :where(a,button,summary,details,[tabindex]):focus-visible{ outline:2px solid var(--kdl-ink);outline-offset:3px;border-radius:2px; box-shadow:0 0 0 5px color-mix(in oklab,var(--kdl-gold) 60%,transparent); } .kdl-skip{position:absolute;top:0;left:0;z-index:99;transform:translateY(-120%); background:var(--kdl-ink);color:var(--kdl-paper);padding:14px 22px;font-size:14px;font-weight:600; min-height:44px;display:inline-flex;align-items:center} .kdl-skip:focus{transform:none} /* ── masthead ────────────────────────────────────────────────────────── */ .kdl-top{border-bottom:1px solid var(--kdl-rule);background:var(--kdl-paper);position:relative;z-index:5} .kdl-top-in{display:flex;align-items:center;justify-content:space-between;gap:16px; min-height:56px;padding-block:6px;flex-wrap:wrap} .kdl-brand{font-family:var(--kdl-disp);font-optical-sizing:none; font-variation-settings:"opsz" 9,"wght" 600,"SOFT" 0,"WONK" 0; font-size:clamp(15px,2.2vw,17px);letter-spacing:.005em; display:inline-flex;align-items:center;min-height:44px} .kdl-top-meta{font-size:12px;color:var(--kdl-ink-62);letter-spacing:.02em} /* ── HERO ────────────────────────────────────────────────────────────── */ .kdl-hero{position:relative;isolation:isolate;overflow:hidden; min-height:clamp(560px,86svh,860px);display:flex;align-items:flex-end; padding-block:clamp(64px,12vw,120px) clamp(40px,7vw,84px);background:var(--kdl-ink)} .kdl-hero-shot{position:absolute;inset:0;z-index:-2} .kdl-hero-shot img{width:100%;height:100%;object-fit:cover;object-position:52% 46%} .kdl-hero::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none; background: linear-gradient(to top,color-mix(in oklab,var(--kdl-ink) 92%,transparent) 0%, color-mix(in oklab,var(--kdl-ink) 68%,transparent) 34%, color-mix(in oklab,var(--kdl-ink) 20%,transparent) 66%, color-mix(in oklab,var(--kdl-ink) 34%,transparent) 100%), linear-gradient(to right,color-mix(in oklab,var(--kdl-ink) 55%,transparent),transparent 62%)} .kdl-hero-in{width:100%;color:var(--kdl-paper);position:relative} .kdl-hero-eyebrow{display:flex;align-items:center;gap:12px; font-size:12px;letter-spacing:.16em;text-transform:uppercase;font-weight:600; color:color-mix(in oklab,var(--kdl-paper) 86%,var(--kdl-ink))} .kdl-hero-eyebrow .kdl-rule{display:block;width:clamp(28px,6vw,64px);height:2px;background:var(--kdl-gold);flex:none} .kdl-hero-h{margin-top:clamp(14px,2vw,22px);font-family:var(--kdl-disp); font-optical-sizing:none;letter-spacing:-.022em;max-width:min(100%,17ch)} .kdl-hero-h1,.kdl-hero-h2{display:block} .kdl-hero-h1{font-variation-settings:"opsz" 144,"wght" 300,"SOFT" 20,"WONK" 0; font-size:clamp(25px,5.2vw,62px);line-height:1.04;text-wrap:balance; color:color-mix(in oklab,var(--kdl-paper) 80%,var(--kdl-ink))} .kdl-hero-h2{font-size:clamp(30px,8vw,104px);line-height:.98;margin-top:.06em;max-width:100%} /* swap */ .kdl-sw{position:relative;display:inline-grid;vertical-align:baseline;max-width:100%} /* The outgoing word fades IN PLACE. It used to exit upward, which pushed it into the headline above (line-height is .98) and read as a double image. */ .kdl-sw-w{grid-area:1/1;opacity:0;transform:none; transition:opacity .22s ease-in; color:var(--kdl-gold);font-variation-settings:"opsz" 144,"wght" 450,"SOFT" 60,"WONK" 1; font-style:italic;white-space:nowrap;text-align:left; text-shadow:0 2px 30px color-mix(in oklab,var(--kdl-ink) 55%,transparent)} .kdl-sw-w.kdl-is-on{opacity:1;transform:none; transition:opacity .46s var(--kdl-ease) .18s,transform .52s var(--kdl-ease) .18s} .kdl-sw-w.kdl-is-in{transform:translateY(.26em);opacity:0} .kdl-sw-caret{grid-area:1/1;align-self:end;justify-self:start;pointer-events:none; width:100%;height:2px;background:var(--kdl-gold);opacity:.5;transform:translateY(.14em)} .kdl-hero-lede{margin-top:clamp(18px,2.4vw,28px);max-width:44ch; font-size:clamp(15px,1.65vw,19px);line-height:1.5; color:color-mix(in oklab,var(--kdl-paper) 84%,var(--kdl-ink))} .kdl-hero-jump{margin-top:clamp(20px,3vw,34px)} .kdl-hero-jump a{display:inline-flex;align-items:center;gap:10px;min-height:44px; font-size:13px;font-weight:600;letter-spacing:.1em;text-transform:uppercase; color:var(--kdl-paper);border-bottom:1px solid color-mix(in oklab,var(--kdl-gold) 70%,transparent); padding-bottom:2px} .kdl-hero-jump a svg{transition:transform .3s var(--kdl-ease)} .kdl-hero-jump a:hover svg{transform:translateY(4px)} /* the one hand-set margin note — Fraunces italic with WONK on */ .kdl-margin-note{position:absolute;z-index:2;right:0;bottom:calc(100% + clamp(18px,3vw,40px)); width:min(272px,40%);color:var(--kdl-gold);display:flex;gap:8px;align-items:flex-start; transform:rotate(-2.2deg);transform-origin:bottom right} .kdl-mn-arrow{flex:none;width:clamp(38px,6vw,64px);height:auto;opacity:.8; transform:scaleX(-1) translateY(4px)} .kdl-mn-t{font-family:var(--kdl-disp);font-style:italic;font-optical-sizing:none; font-variation-settings:"opsz" 20,"wght" 400,"SOFT" 100,"WONK" 1; font-size:clamp(14px,1.9vw,19px);line-height:1.32;letter-spacing:.004em; text-shadow:0 1px 12px color-mix(in oklab,var(--kdl-ink) 75%,transparent)} /* ── the tick: the page's whole visual argument ──────────────────────── */ .kdl-strip{display:flex;align-items:flex-end;justify-content:space-between;gap:4px; height:20px;padding-bottom:4px;border-bottom:1px solid var(--kdl-gold)} /* every tick keeps the same footprint — a faint track — so the green height reads as a PROPORTION rather than as "big thing / small thing". */ .kdl-tk{display:block;flex:1 1 0;min-width:0;max-width:11px;position:relative;height:100%; background:var(--kdl-rule-soft)} .kdl-tk--full,.kdl-tk--part{background:linear-gradient(to top, var(--kdl-green) 0,var(--kdl-green) calc(var(--kdl-h,1) * 100%), var(--kdl-rule-soft) calc(var(--kdl-h,1) * 100%))} /* closed: a hollow slot — an outline reads as "shut", not as "a small amount" */ .kdl-tk--closed{background:none;border:1px solid var(--kdl-rest-line); background-image:repeating-linear-gradient(-45deg,transparent 0 2.5px, color-mix(in oklab,var(--kdl-rest) 62%,transparent) 2.5px 3.5px)} /* calendar not extended yet: a grey baseline hairline in an empty track */ .kdl-tk--unloaded{background:var(--kdl-rule-soft); background-image:linear-gradient(to top,var(--kdl-rest-line) 0 2px,transparent 2px)} .kdl-tk.kdl-is-now::after{content:"";position:absolute;left:50%;bottom:-5px;translate:-50% 0; width:3px;height:3px;border-radius:50%;background:var(--kdl-ink)} .kdl-strip.kdl-m-lit .kdl-tk{opacity:.34;transition:opacity .25s var(--kdl-ease)} .kdl-strip.kdl-m-lit .kdl-tk.kdl-tk-lit{opacity:1} /* ── LEDGER BAND ─────────────────────────────────────────────────────── */ .kdl-ledger{padding-block:clamp(44px,7vw,88px) clamp(28px,4vw,44px); background:var(--kdl-paper);border-bottom:1px solid var(--kdl-rule)} .kdl-ledger-head{display:grid;gap:clamp(20px,3vw,56px); grid-template-columns:1fr;align-items:end;margin-bottom:clamp(28px,4vw,46px)} .kdl-kicker{font-size:11px;letter-spacing:.19em;text-transform:uppercase;font-weight:700; color:var(--kdl-ink-62)} .kdl-ledger-h{font-family:var(--kdl-disp);font-optical-sizing:none; font-variation-settings:"opsz" 144,"wght" 300,"SOFT" 10,"WONK" 0; font-size:clamp(34px,6.4vw,76px);line-height:1;letter-spacing:-.025em;margin-top:.14em} .kdl-ledger-h em{font-style:italic;font-variation-settings:"opsz" 144,"wght" 400,"SOFT" 60,"WONK" 1} .kdl-ledger-say{margin-top:clamp(12px,1.6vw,18px);font-size:clamp(15px,1.5vw,17px); color:var(--kdl-ink-70);max-width:52ch} .kdl-ledger-say .kdl-big{font-size:1.35em;font-weight:500;color:var(--kdl-ink)} .kdl-ledger-note{font-size:13px;line-height:1.5;color:var(--kdl-ink-62);max-width:40ch; border-left:2px solid var(--kdl-gold);padding-left:14px} @media(min-width:900px){.kdl-ledger-head{grid-template-columns:1.5fr .9fr}} /* month scale */ .kdl-scale-wrap{position:relative;margin-inline:calc(var(--kdl-pad) * -1);padding-inline:var(--kdl-pad)} .kdl-scale-wrap::after{content:"";position:absolute;right:0;top:0;bottom:0;width:var(--kdl-pad); background:linear-gradient(to left,var(--kdl-paper),transparent);pointer-events:none} .kdl-scale{display:flex;gap:6px;overflow-x:auto;overscroll-behavior-x:contain; scroll-snap-type:x proximity;padding-bottom:8px;scrollbar-width:thin; scrollbar-color:var(--kdl-rule) transparent} .kdl-scale::-webkit-scrollbar{height:5px} .kdl-scale::-webkit-scrollbar-thumb{background:var(--kdl-rule);border-radius:3px} .kdl-mo{flex:1 0 76px;min-width:76px;min-height:80px;scroll-snap-align:start; display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;gap:7px; padding:11px 10px 10px;border:1px solid var(--kdl-rule-soft);border-radius:3px; background:var(--kdl-sink);text-align:left; transition:background .2s var(--kdl-ease),border-color .2s var(--kdl-ease)} .kdl-mo:hover{background:var(--kdl-sink-2);border-color:var(--kdl-rule)} .kdl-mo-top{display:flex;align-items:baseline;gap:6px} .kdl-mo-n{font-family:var(--kdl-mono);font-size:19px;font-weight:500;line-height:1; font-feature-settings:"tnum" 1;letter-spacing:-.03em} .kdl-mo-d{font-family:var(--kdl-mono);font-size:11px;line-height:1;font-weight:500;letter-spacing:-.02em} .kdl-mo-d--up,.kdl-mo-d--dn{color:var(--kdl-ink)} /* +2 / -2: the sign carries it */ .kdl-mo-d--up::after{content:"";display:inline-block;width:5px;height:5px;margin-left:4px; vertical-align:1px;background:var(--kdl-green)} /* green stays a MARK, not a glyph */ .kdl-mo-d--flat{color:var(--kdl-ink-38)} /* decorative, aria-hidden */ .kdl-mo-l{font-size:11px;font-weight:700;letter-spacing:.055em;text-transform:uppercase; color:var(--kdl-ink-62);white-space:nowrap} .kdl-mo-y{font-family:var(--kdl-mono);font-size:11px;font-weight:400;margin-left:3px; color:var(--kdl-ink-62);letter-spacing:-.02em;text-transform:none} .kdl-mo-rule{display:block;height:2px;background:var(--kdl-rule-soft);margin-top:auto;position:relative} .kdl-mo-rule i{position:absolute;inset:0 auto 0 0;width:calc(var(--kdl-h) * 100%); background:var(--kdl-green);display:block} .kdl-mo.kdl-is-now{border-color:var(--kdl-ink-38);background:var(--kdl-sink-2)} .kdl-mo.kdl-is-now .kdl-mo-l{color:var(--kdl-ink)} .kdl-mo[aria-pressed="true"]{background:var(--kdl-paper);border-color:var(--kdl-ink); box-shadow:inset 0 -3px 0 var(--kdl-gold)} .kdl-mo[aria-pressed="true"] .kdl-mo-l{color:var(--kdl-ink)} /* chips + legend */ .kdl-controls{display:flex;flex-wrap:wrap;gap:clamp(14px,3vw,32px); align-items:center;justify-content:space-between;margin-top:clamp(20px,3vw,30px)} .kdl-chips{display:flex;flex-wrap:wrap;gap:8px} .kdl-chip{min-height:44px;padding:0 18px;border:1px solid var(--kdl-rule);border-radius:999px; font-size:14px;font-weight:600;letter-spacing:.005em;display:inline-flex;align-items:center;gap:8px; transition:border-color .2s var(--kdl-ease),background .2s var(--kdl-ease)} .kdl-chip .kdl-mono{font-size:11.5px;color:var(--kdl-ink-62);font-weight:400} .kdl-chip:hover{border-color:var(--kdl-ink-38);background:var(--kdl-sink)} .kdl-chip[aria-pressed="true"]{background:var(--kdl-ink);color:var(--kdl-paper);border-color:var(--kdl-ink)} .kdl-chip[aria-pressed="true"] .kdl-mono{color:color-mix(in oklab,var(--kdl-paper) 72%,var(--kdl-ink))} .kdl-legend{display:flex;flex-wrap:wrap;gap:14px;font-size:11px;letter-spacing:.06em; text-transform:uppercase;font-weight:600;color:var(--kdl-ink-70)} .kdl-lg{display:inline-flex;align-items:center;gap:6px} .kdl-lg .kdl-tk{width:9px;height:15px;flex:none} .kdl-status{margin-top:16px;font-size:11.5px;color:var(--kdl-ink-62);letter-spacing:.02em} /* ── LIBRARY ─────────────────────────────────────────────────────────── */ .kdl-library{padding-block:clamp(34px,5vw,62px) clamp(56px,8vw,104px)} .kdl-grid{display:grid;gap:clamp(22px,2.6vw,34px) clamp(18px,2.2vw,28px); grid-template-columns:1fr} @media(min-width:640px){.kdl-grid{grid-template-columns:repeat(2,1fr)}} @media(min-width:1040px){.kdl-grid{grid-template-columns:repeat(3,1fr)}} .kdl-card{position:relative} .kdl-card-a{display:grid;grid-template-rows:auto 1fr auto auto;height:100%; padding-bottom:16px;border-bottom:1px solid var(--kdl-rule); transition:opacity .3s var(--kdl-ease)} .kdl-card-shot{display:block;position:relative;overflow:hidden;background:var(--kdl-sink-2); aspect-ratio:4/5;border-radius:2px} .kdl-card-shot img{width:100%;height:100%;object-fit:cover; transition:transform .7s var(--kdl-ease),filter .45s var(--kdl-ease)} .kdl-card-a:hover .kdl-card-shot img{transform:scale(1.035)} .kdl-card-body{display:block;padding-top:16px} .kdl-card-kind{display:block;font-size:11px;font-weight:700;letter-spacing:.19em; text-transform:uppercase;color:var(--kdl-ink-62)} /* opsz 9 on the small size — the optical axis used the way it was drawn to be */ .kdl-card-t{margin-top:7px;font-family:var(--kdl-disp);font-optical-sizing:none; font-variation-settings:"opsz" 9,"wght" 600,"SOFT" 0,"WONK" 0; font-size:clamp(19px,1.65vw,22px);line-height:1.19;letter-spacing:-.003em; text-wrap:pretty} .kdl-card-num{display:flex;align-items:baseline;gap:10px;margin-top:11px;flex-wrap:wrap} .kdl-price{font-family:var(--kdl-mono);font-size:clamp(17px,1.6vw,19px);font-weight:500; letter-spacing:-.02em;font-feature-settings:"tnum" 1} .kdl-sep{width:4px;height:4px;border-radius:50%;background:var(--kdl-gold);flex:none; align-self:center} .kdl-dur{font-family:var(--kdl-mono);font-size:12px;color:var(--kdl-ink-70);letter-spacing:-.01em} .kdl-card-season{display:block;margin-top:15px} .kdl-season-say{display:block;margin-top:7px;font-size:11.5px;letter-spacing:.015em; color:var(--kdl-ink-70);font-weight:500} .kdl-season-say--closed{color:var(--kdl-ink)} .kdl-season-say--closed::before{content:"";display:inline-block;width:7px;height:7px; margin-right:7px;border:1px solid var(--kdl-rest-line);vertical-align:1px} .kdl-card-go{display:inline-flex;align-items:center;gap:9px;margin-top:15px; font-size:11.5px;font-weight:700;letter-spacing:.15em;text-transform:uppercase; color:var(--kdl-ink);padding-bottom:3px; box-shadow:inset 0 -1px 0 var(--kdl-green);width:fit-content} .kdl-card-go svg{transition:transform .3s var(--kdl-ease)} .kdl-card-a:hover .kdl-card-go svg{transform:translateX(5px)} /* out of season: dims, never disappears */ .kdl-card--rest .kdl-card-shot img{filter:grayscale(.88) contrast(.93) brightness(1.04)} .kdl-card--rest .kdl-card-shot::after{content:"";position:absolute;inset:0; background:color-mix(in oklab,var(--kdl-rest) 16%,transparent)} .kdl-card--rest .kdl-card-go{box-shadow:inset 0 -1px 0 var(--kdl-rest)} /* A dimmed card is still a link someone may read, so the TEXT keeps AA contrast; the photo does the receding. (opacity on the whole card took the title to ~2.2:1 — that was the bug.) */ .kdl-card.kdl-is-off .kdl-card-shot img{filter:grayscale(1) contrast(.88) brightness(1.08);opacity:.6} .kdl-card.kdl-is-off .kdl-card-shot{background:var(--kdl-sink-2)} .kdl-card.kdl-is-off .kdl-card-t,.kdl-card.kdl-is-off .kdl-price,.kdl-card.kdl-is-off .kdl-dur{color:var(--kdl-ink-70)} .kdl-card.kdl-is-off .kdl-card-kind{color:var(--kdl-ink-62)} .kdl-card.kdl-is-off .kdl-card-go{box-shadow:inset 0 -1px 0 var(--kdl-rest);color:var(--kdl-ink-70)} .kdl-card.kdl-is-off .kdl-season-say{color:var(--kdl-ink);font-weight:600} .kdl-card[hidden]{display:none} .kdl-empty{margin-top:40px;text-align:center;font-size:15px;color:var(--kdl-ink-70)} .kdl-linkish{box-shadow:inset 0 -1px 0 var(--kdl-green);font-weight:600;min-height:44px} /* ── FAQ ─────────────────────────────────────────────────────────────── */ .kdl-faq{background:var(--kdl-ink);color:var(--kdl-paper);padding-block:clamp(56px,8vw,110px)} .kdl-faq-in{display:grid;gap:clamp(30px,4vw,68px);grid-template-columns:1fr} @media(min-width:900px){ .kdl-faq-in{grid-template-columns:.85fr 1.15fr;align-items:start} /* the side column travels with the reader instead of leaving a dead well */ .kdl-faq-side{position:sticky;top:clamp(40px,6vw,72px)} } .kdl-faq .kdl-kicker{color:color-mix(in oklab,var(--kdl-paper) 62%,var(--kdl-ink))} .kdl-faq-h{font-family:var(--kdl-disp);font-optical-sizing:none; font-variation-settings:"opsz" 144,"wght" 300,"SOFT" 20,"WONK" 0; font-size:clamp(30px,4.4vw,54px);line-height:1.03;letter-spacing:-.024em;margin-top:.2em} .kdl-faq-sub{margin-top:18px;font-size:14.5px;line-height:1.6;max-width:34ch; color:color-mix(in oklab,var(--kdl-paper) 72%,var(--kdl-ink))} .kdl-faq-list{border-top:1px solid color-mix(in oklab,var(--kdl-paper) 22%,var(--kdl-ink))} .kdl-qa{border-bottom:1px solid color-mix(in oklab,var(--kdl-paper) 22%,var(--kdl-ink))} .kdl-qa summary{list-style:none;cursor:pointer;display:flex;gap:18px;align-items:flex-start; justify-content:space-between;padding-block:20px;min-height:44px} .kdl-qa summary::-webkit-details-marker{display:none} .kdl-qa-q{font-family:var(--kdl-disp);font-optical-sizing:none; font-variation-settings:"opsz" 9,"wght" 500,"SOFT" 0,"WONK" 0; font-size:clamp(16.5px,1.5vw,19px);line-height:1.32;letter-spacing:-.002em} .kdl-qa-i{flex:none;width:18px;height:18px;margin-top:3px;position:relative} .kdl-qa-i::before,.kdl-qa-i::after{content:"";position:absolute;background:var(--kdl-gold); transition:transform .3s var(--kdl-ease),opacity .3s var(--kdl-ease)} .kdl-qa-i::before{left:0;right:0;top:8px;height:1.5px} .kdl-qa-i::after{top:0;bottom:0;left:8px;width:1.5px} .kdl-qa[open] .kdl-qa-i::after{transform:scaleY(0);opacity:0} .kdl-qa-a{padding-bottom:22px;max-width:62ch} .kdl-qa-a p{font-size:14.5px;line-height:1.68; color:color-mix(in oklab,var(--kdl-paper) 76%,var(--kdl-ink))} .kdl-faq :where(a,summary):focus-visible{outline-color:var(--kdl-gold)} /* ── FOOT ────────────────────────────────────────────────────────────── */ .kdl-foot{padding-block:clamp(34px,5vw,56px);border-top:1px solid var(--kdl-rule)} .kdl-foot-in{display:flex;flex-wrap:wrap;gap:8px 28px;align-items:baseline} .kdl-foot-brand{font-family:var(--kdl-disp);font-optical-sizing:none; font-variation-settings:"opsz" 9,"wght" 600,"SOFT" 0,"WONK" 0;font-size:16px} .kdl-foot-meta{font-size:12.5px;color:var(--kdl-ink-70)} .kdl-foot-gen{font-size:11px;color:var(--kdl-ink-62);margin-left:auto} /* ── motion ──────────────────────────────────────────────────────────── */ /* Scoped to .kdl-js: without scripting nothing is ever hidden, because nothing would be there to reveal it. */ .kdl-js .kdl-rise{opacity:0;transform:translateY(18px)} .kdl-js .kdl-rise.kdl-in{opacity:1;transform:none; transition:opacity .6s var(--kdl-ease) calc(var(--kdl-i,0) * 42ms), transform .6s var(--kdl-ease) calc(var(--kdl-i,0) * 42ms)} @media(prefers-reduced-motion:reduce){ html{scroll-behavior:auto} .kd-hub,.kd-hub *,.kd-hub *::before,.kd-hub *::after{animation-duration:.001ms!important;animation-iteration-count:1!important; transition-duration:.001ms!important} .kdl-rise{opacity:1;transform:none} .kdl-sw-w{opacity:0}.kdl-sw-w.kdl-is-on{opacity:1;transform:none; transition:opacity .46s var(--kdl-ease) .18s,transform .52s var(--kdl-ease) .18s} .kdl-sw-w.kdl-is-in{transform:translateY(.26em);opacity:0} } @media(max-width:899px){ .kdl-margin-note{position:static;width:auto;transform:none;margin-top:38px; padding-top:20px;border-top:1px solid color-mix(in oklab,var(--kdl-gold) 45%,transparent); max-width:40ch} .kdl-mn-arrow{display:none} .kdl-hero{padding-bottom:clamp(28px,6vw,40px)} .kdl-hero-in{padding-bottom:0} } /* ── theme-collision guards ────────────────────────────────────────────── Everything above is .kdl-*, so the theme cannot reach it by class. What is left is what Traveler/Bootstrap reach by ELEMENT — and that is handled by the :where() reset at the TOP of this file, not here, for reasons the comment there explains. */ .kd-hub .kdl-shell::before,.kd-hub .kdl-shell::after{content:none} /* ── stacking guard — do not remove ────────────────────────────────────── The legacy tours-listing skin (assets/css/klld-tours-listing-2026.css) declares, scoped to these exact page ids: body.page-id-1525::before, body.page-id-1525::after { position:fixed; inset:0; z-index:0; … } — a gold radial wash and a grain texture stretched across the whole viewport. functions.php dequeues that stylesheet for this template, and the page's HTML indeed links it nowhere; LiteSpeed still delivers the rule inlined in its critical CSS, keyed to the page id, so it arrives whatever the enqueue logic decided. Measured on stage for 1525, 17123 and 17413. A position:fixed z-index:0 layer paints above every STATIC descendant of the body. The parts of this page that happen to be positioned — the hero, the cards, the month rules — sailed over it; everything static did not. The kind chips, the legend, the status line and the entire FAQ column were present in the DOM with correct computed styles and simply invisible, and the contrast harness dutifully reported the wash's colour as their background. Give the hub its own stacking context above the wash. */ .kd-hub{position:relative;z-index:1} /* The Traveler footer/header sit OUTSIDE .kd-hub and keep their own type. Only the page ground colour is ours. */ body.klld-tours-hub #st-content-wrapper, body.klld-tours-hub .st-content-wrapper, body.klld-tours-hub #content{background:var(--kdl-paper);padding:0;margin:0} /* ── port-only corrections ─────────────────────────────────────────────── Measured on the real page, not present in the prototype. The kind chips are pill buttons sized by their label. In the prototype the labels were long enough that min-height alone carried them past 44px; in the shipped page the shortest are "All 25" (39.8px), "Sea 7" (41.9px) and — the one that made this worth fixing — the French "Mer 7" at 43.9px, a tenth of a pixel under the target. Width needs its own floor. */ .kd-hub .kdl-chip{min-width:44px;justify-content:center} /* The hero eyebrow was color-mix(paper 86%, ink) — rgb(208,208,201) — which measures 4.3:1 against the scrim over this photograph. Full paper measures 5.9:1 and is visually indistinguishable at 12px uppercase. */ .kd-hub .kdl-hero-eyebrow{color:var(--kdl-paper)} /* The margin note is the one piece of hero copy that sits ABOVE the headline, i.e. over the part of the frame where the scrim is weakest by design (20% ink at 66% height, so the photograph still reads). Gold on that measured 1.9:1 — the note is the page's one hand-set flourish and it was the least legible thing on the page. It keeps its position and its angle; it gets its own local pool of shade, feathered so it reads as shading in the photograph rather than as a panel. */ /* The prototype's swap "caret" — a gold hairline under the rotating word — does not survive contact with this page, and it fails in a way that reads as a bug rather than as a flourish. The words are stacked in one grid cell so they can cross-fade, which makes the cell as wide as the LONGEST of them: 710px for "James Bond Island". The caret is width:100% of that cell, so while "Phi Phi" (245px) is showing, a gold rule still runs the full 710px. It is also offset .14em below the cell, which at a 104px display size is ~15px — measured, that put it at y=779 while the lede's first line occupies 766–823. A horizontal gold line through a paragraph is a strikethrough, not an underline. The italic gold word already carries the emphasis on its own. */ .kd-hub .kdl-sw-caret{display:none} /* and keep the headline off the lede regardless of the display size */ .kd-hub .kdl-hero-lede{margin-top:clamp(24px,3vw,36px)} .kd-hub .kdl-margin-note{isolation:isolate} .kd-hub .kdl-margin-note::before{ content:"";position:absolute;inset:-26px -34px -22px -38px;z-index:-1;pointer-events:none; background:color-mix(in oklab,var(--kdl-ink) 82%,transparent); border-radius:50%; /* A blurred ellipse, not a gradient inside a box. A radial-gradient still has the pseudo-element's straight edges to fade across, and over a bright photograph a 66%-ink edge is plainly a rectangle — it read as a panel dropped on the picture. blur() feathers the shape itself. */ filter:blur(19px)} @media(max-width:899px){ /* below 900px the note drops into normal flow low in the hero, where the scrim is already 92% ink — the pool would only muddy it */ .kd-hub .kdl-margin-note::before{content:none} }