/* Mykish resort single template — REVIEW-1 / COMPOSITION rebuild (2026-07-28). * * Implements the anatomy measured in docs/design/RESORTLIFE_ANATOMY.md: hero with an in-hero * enquiry panel and an overlapping spec strip, three-value section rhythm, media-left stay cards, * image-top dining cards, boxed plan panels, a dark specialist-CTA panel and portrait related * cards. COMPOSITION ONLY — every token below is ours: * - Montserrat 400/600/700, no second face, no italic display register. * - A1 pure-white canvas (--mk-white) alternating with --mk-alt-surface. Cream is banned. * - Teal is a whisper (one accent moment per screen); gold is reserved for accreditation. * - Tokens live in mykish-design-tokens/tokens.css. Do not redeclare :root here. * * Section rhythm reconciliation: the target uses three vertical paddings (80/96/112 @1440); we * mirror that ladder. The shared --mk-section-y token (clamp(96px,12vw,140px)) remains the * CEILING — nothing here exceeds it — so the G-D3.1 280px total-padding limit still holds, with * 56px of headroom. See the token note on --mk-sec-lg below. */ #mk-resort { font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; color: var(--mk-ink); background: var(--mk-white); width: 100%; margin: 0; padding: 0; overflow-x: clip; font-size: var(--mk-fs-body); line-height: var(--mk-lh-body); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; /* three-value section rhythm (see header note). Measured against the target: 112 / 96 / 80 * at 1440. The shared --mk-section-y token (clamp(96px,12vw,140px) → 140 at 1440) remains the * CEILING — nothing here exceeds it, so the G-D3.1 280px total-padding limit still holds with * 56px of headroom. Rendered at the token value the gap between two adjacent bands measured * 280px of empty canvas, which reads as a void rather than as rhythm; flagged for token * ratification in the REVIEW-1 composition evidence. */ --mk-sec-lg: clamp(72px, 9vw, 112px); --mk-sec-md: clamp(64px, 8vw, 96px); --mk-sec-sm: clamp(56px, 7vw, 80px); /* composition-parity local: a panel radius one step above --mk-r-card, used ONLY by the two * hero-scale dark panels (spec strip, specialist CTA). Derived from the card token, not a new * brand value; flagged for token ratification in the REVIEW-1 composition evidence. */ --mk-r-panel: calc(var(--mk-r-card) + 8px); /* hero panel reserve — how much of the hero's right edge the enquiry panel occupies */ --mk-panel-w: 340px; } @media (min-width: 768px) { #mk-resort { --mk-pad-x: 40px; } } @media (min-width: 1024px) { #mk-resort { --mk-pad-x: 80px; } } /* Natural document flow. No CSS-grid side column, no sticky panel, no z-index stack, ever again * (see docs/review/facts-kill-evidence.md — a sticky fact panel floated over live copy at every * scroll position and three "fix" passes missed it because every check screenshotted at scrollY 0). */ .mk-resort-page { display: block; } /* ============================================================================================ * BANDS * ========================================================================================== */ .mk-band { padding: var(--mk-sec-md) 0; background: var(--mk-white); } /* --mk-alt-surface is DESIGN v1.1's designated section-alternation token ("cool alt surface * (section alternation)"). --mk-surface (#f8f7f2) sits ~1.5% off pure white and the band change * was effectively invisible at 1440, collapsing the whole page into one undifferentiated sheet. */ .mk-band--tint { background: var(--mk-alt-surface); } .mk-band--ruled { border-top: 1px solid var(--mk-border); } .mk-band-inner { max-width: var(--mk-container); margin: 0 auto; padding: 0 var(--mk-pad-x); } .mk-why, .mk-stays, .mk-packages { padding: var(--mk-sec-lg) 0; } .mk-about { padding: var(--mk-sec-sm) 0; } .mk-ctaband { padding: var(--mk-sec-lg) 0; background: var(--mk-white); } /* ---- section head: eyebrow -> h2 -> lead, on every section without exception ---- */ .mk-eyebrow { font-size: var(--mk-fs-eyebrow); font-weight: 700; letter-spacing: var(--mk-track-wide); text-transform: uppercase; color: var(--mk-grey); margin: 0 0 12px; } .mk-eyebrow--inline { margin: 28px 0 12px; color: var(--mk-teal-text); } .mk-eyebrow--gold { color: var(--mk-gold); } #mk-resort .mk-h2 { font-weight: 700; font-size: var(--mk-fs-h2); line-height: var(--mk-lh-heading); letter-spacing: var(--mk-track-tight); color: var(--mk-ink); margin: 0; max-width: 20ch; text-wrap: balance; } #mk-resort .mk-h2--on-dark { color: var(--mk-white); } #mk-resort .mk-h3 { font-weight: 700; font-size: var(--mk-fs-h3); line-height: var(--mk-lh-heading); letter-spacing: var(--mk-track-tight); color: var(--mk-ink); margin: 0; text-wrap: balance; } #mk-resort .mk-h3--small { font-size: 1.25rem; } #mk-resort .mk-h4 { font-weight: 600; font-size: 1.0625rem; line-height: 1.35; margin: 0; color: var(--mk-ink); } .mk-lead { margin: 20px 0 0; max-width: 62ch; font-size: var(--mk-fs-lead); line-height: 1.65; color: #3a3d42; } .mk-prose { max-width: var(--mk-measure); font-size: var(--mk-fs-body); line-height: var(--mk-lh-body); color: #2a2c30; margin-top: 20px; } .mk-prose--wide { max-width: 68ch; } .mk-prose--small { font-size: 0.9375rem; line-height: 1.65; max-width: none; } .mk-prose--on-dark { color: rgba(255,255,255,0.78); max-width: 60ch; } .mk-prose p { margin: 0 0 1.1em; } .mk-prose p:last-child { margin-bottom: 0; } /* REVIEW-1 / VERIFY2 (2026-07-29): `.mk-prose a` (descendant class+tag, ties the Kit's * `.elementor-kit-6 a` on specificity — fragile) and `.mk-textlink` (lone class, LOSES * outright) both risk rendering raw brand teal #00c2cb (fails AA) instead of the AA-safe * --mk-teal-text. Hardened per the header-fix precedent. */ .mk-prose a { color: var(--mk-teal-text) !important; } .mk-textlink { color: var(--mk-teal-text) !important; font-weight: 600; font-size: 0.9375rem; text-decoration: none; } .mk-textlink:hover { text-decoration: underline; } /* ---- pills ---- */ .mk-pill { display: inline-flex; align-items: center; padding: 5px 12px; border-radius: var(--mk-r-pill); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.04em; background: var(--mk-surface); border: 1px solid var(--mk-border); color: var(--mk-ink); white-space: nowrap; } /* on a tinted band the neutral pill flips to white so it never dissolves into its own canvas. The :not() chain is load-bearing: without it this rule outranks .mk-pill--dark/--glass/--outline (one class each) and turned every dark chip white-on-white inside a tinted band. */ .mk-band--tint .mk-pill:not(.mk-pill--dark):not(.mk-pill--glass):not(.mk-pill--outline) { background: var(--mk-white); } .mk-pill--dark, .mk-pill--glass, .mk-pill--outline, .mk-band--tint .mk-pill--dark { border-color: transparent; } .mk-pill--dark { background: var(--mk-ink); color: var(--mk-white); text-transform: uppercase; letter-spacing: var(--mk-track-wide); font-size: 0.6875rem; } .mk-pill--glass { background: rgba(255,255,255,0.16); color: var(--mk-white); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); text-transform: uppercase; letter-spacing: var(--mk-track-wide); font-size: 0.6875rem; font-weight: 700; } .mk-pill--outline { background: rgba(255,255,255,0.10); color: var(--mk-white); border: 1px solid rgba(255,255,255,0.34); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); } /* SCAND batch 2026-07-30 — the village a package actually belongs to. Quieter than --dark: it is an orienting label, not a claim, and must not outshout the activity tag beside it. */ .mk-pill--village { background: var(--mk-white); border-color: var(--mk-ink); color: var(--mk-ink); text-transform: uppercase; letter-spacing: var(--mk-track-wide); font-size: 0.6875rem; font-weight: 700; } .mk-chips, .mk-stay-chips, .mk-hero-badges, .mk-hero-chips { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; } /* ---- tick lists ---- */ .mk-tick-list { list-style: none; margin: 20px 0 0; padding: 0; display: grid; gap: 10px; } .mk-tick-list li { position: relative; padding-left: 26px; font-size: 0.9375rem; line-height: 1.55; color: var(--mk-ink); } .mk-tick-list li::before { content: ''; position: absolute; left: 0; top: 0.45em; width: 8px; height: 8px; border-radius: 50%; background: var(--mk-teal); box-shadow: 0 0 0 4px rgba(0,194,203,0.14); } @media (min-width: 768px) { .mk-tick-list--wide { grid-template-columns: 1fr 1fr; column-gap: 32px; } } /* ============================================================================================ * 1. HERO — one true photograph owns the fold * ========================================================================================== */ .mk-hero { position: relative; display: flex; align-items: flex-end; min-height: var(--mk-hero-h); background: var(--mk-ink); overflow: hidden; isolation: isolate; } @media (max-width: 767px) { .mk-hero { min-height: var(--mk-hero-h-mobile); } } .mk-hero-media { position: absolute; inset: 0; z-index: 0; background: var(--mk-ink) center / cover no-repeat; transform: scale(1); /* Ken Burns base — animated by tokens.css, desktop + no-preference only */ } /* HERO OVERLAY KILL — PO ruling 2026-07-30, launch-blocking, global. Requirement verbatim: * "make the background image visible". * * WHAT WAS HERE: three stacked full-bleed scrims covering `inset: 0` — a 90deg wash, a bottom * radial, and a 180deg vertical ending at 0.88. Together they dimmed the ENTIRE photograph, * including the right-hand panel zone, where they were doing no legibility work at all. The M1 * measurement priced it: Hakuraa's panel-zone backdrop read 0.0705 with these on and 0.1649 with * them off — the overlay was throwing away 57% of the photograph to protect text that isn't there. * * WHAT IS HERE NOW: ONE gradient, anchored to the bottom-left corner and falling to fully * transparent well before it reaches either the panel zone or the top of the frame. It exists to * hold the title's AA contrast and nothing else. Everywhere outside the title block — the whole * upper frame, the right side, the panel zone — the photograph renders at FULL brightness and * saturation, untouched. * * The strength below is not a taste setting: it is the minimum that keeps every one of the 28 * heroes at >= 4.5:1 for the title, measured on the rendered page at 1440 and 390 * (scripts/hero_contrast_sweep.py, evidence in docs/review/HERO_OVERLAY_KILL.md). Raising it * re-dims the photograph; lowering it fails a page. Do not adjust either way without re-running * that sweep — the E1-29 finding (a near-transparent band measured 1.1:1 on Dhigufaru) is what * happens when this is guessed. */ .mk-hero-scrim { position: absolute; inset: 0; z-index: 1; background: radial-gradient(68% 120% at 0% 78%, rgba(16,18,20,0.82) 0%, rgba(16,18,20,0.68) 38%, rgba(16,18,20,0.52) 60%, rgba(16,18,20,0.28) 80%, rgba(16,18,20,0) 96%); } /* Mobile: the panel stacks below the fold, so the title block spans the full width and the * gradient has to reach across it — still bottom-anchored, still transparent at the top. */ @media (max-width: 767px) { .mk-hero-scrim { background: linear-gradient(to top, rgba(16,18,20,0.92) 0%, rgba(16,18,20,0.82) 30%, rgba(16,18,20,0.66) 55%, rgba(16,18,20,0.34) 75%, rgba(16,18,20,0) 92%); } } .mk-hero-inner { position: relative; z-index: 2; width: 100%; max-width: var(--mk-container); margin: 0 auto; padding: 0 var(--mk-pad-x) clamp(36px, 5vw, 72px); color: var(--mk-white); } .mk-hero-col { max-width: 42rem; } @media (min-width: 1024px) { .mk-hero-col { max-width: min(42rem, calc(100% - var(--mk-panel-w) - 48px)); } } .mk-hero-back { display: inline-block; font-size: var(--mk-fs-eyebrow); font-weight: 600; text-transform: uppercase; letter-spacing: var(--mk-track-wide); color: rgba(255,255,255,0.78); text-decoration: none; margin: 0 0 18px; } /* explicit, high-specificity colour: a global/kit `a{color:…}` rule otherwise tints this link * teal against its own photograph, where teal fails contrast and breaks the whisper rule. */ #mk-resort a.mk-hero-back { color: rgba(255,255,255,0.82); } #mk-resort a.mk-hero-back:hover { color: var(--mk-white); } @media (max-width: 767px) { .mk-hero-back { display: none; } } .mk-hero-overline { font-size: var(--mk-fs-eyebrow); font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(255,255,255,0.86); margin: 0 0 12px; } .mk-hero-badges { margin: 0 0 16px; } .mk-hero-logo { display: block; height: 42px; width: auto; max-width: 200px; object-fit: contain; object-position: left; margin: 0 0 16px; filter: brightness(0) invert(1); opacity: 0.9; } @media (max-width: 767px) { .mk-hero-logo { display: none; } } /* `#mk-resort h1.mk-hero-title` (not a bare class) is deliberate — the Elementor Global Kit * prints `.elementor-kit-6 h1{color:#1a1a1a}` at the same specificity and, depending on print * order, silently rendered the title rich-black over its own hero photograph. ID + element beats * it outright regardless of order; the explicit colour stops any inheritance fight. */ #mk-resort h1.mk-hero-title { font-weight: 700; font-size: var(--mk-fs-display); line-height: var(--mk-lh-display); letter-spacing: var(--mk-track-display); color: var(--mk-white); margin: 0; max-width: 15ch; text-wrap: balance; text-shadow: 0 1px 30px rgba(0,0,0,0.32); } /* Their hero tagline is `hidden md:block` and one line deep; ours matches — a six-line excerpt * over a photograph is a wall, not a hero line. Clamped to two lines above 768, hidden below. */ .mk-hero-tagline { display: none; margin: 14px 0 0; font-size: var(--mk-fs-lead); font-weight: 400; line-height: 1.45; color: rgba(255,255,255,0.86); max-width: 42ch; } @media (min-width: 768px) { .mk-hero-tagline { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } } .mk-hero-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin: 16px 0 0; padding: 0; font-size: var(--mk-fs-small); color: rgba(255,255,255,0.82); } .mk-hero-meta span + span::before { content: '·'; margin-right: 14px; color: rgba(255,255,255,0.42); } .mk-hero-actions { margin: 22px 0 0; } .mk-hero-chips { margin: 18px 0 0; } @media (max-width: 767px) { /* edge-bled horizontal snap rail, as the target does — keeps the fold to one chip row and * never adds horizontal scroll to the page itself. */ .mk-hero-chips { flex-wrap: nowrap; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; margin-left: calc(var(--mk-pad-x) * -1); margin-right: calc(var(--mk-pad-x) * -1); padding: 0 var(--mk-pad-x); } .mk-hero-chips::-webkit-scrollbar { display: none; } .mk-hero-chips li { flex: 0 0 auto; scroll-snap-align: start; } } @media (min-width: 1024px) { /* ≥1024 the enquiry panel carries the CTA, exactly as the target's panel does at the same * breakpoint. Below it, the hero's own ENQUIRE is the first-fold CTA (G-CTA.1 at 390). */ .mk-hero-actions { display: none; } } #mk-resort .mk-cta--hero { min-height: 48px; padding: 14px 30px; } @media (prefers-reduced-motion: no-preference) { .mk-hero-inner { animation: mk-rise 0.7s var(--mk-ease-out) both; } @keyframes mk-rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } } } /* ---- in-hero enquiry panel (their booking widget slot; no dates, no guests, no rates) ---- */ .mk-hero-panel { display: none; } @media (min-width: 1024px) { .mk-hero-panel { display: block; position: absolute; z-index: 3; top: clamp(88px, 18%, 190px); right: max(var(--mk-pad-x), calc((100% - var(--mk-container)) / 2 + var(--mk-pad-x))); width: var(--mk-panel-w); } } /* PANEL GLASS — PO-PASSED RECIPE, propagated 2026-07-31 to every resort. * * Requirement, in the PO's words: "a transparent enquiry block that reflects the image back like * glass" — and then, over five rounds on the Dhonveli pilot: clarity, not frost. * * WHAT THE OLD 0.72 / blur(40px) VERSION GOT WRONG. It was built to match the reference's * CONSTRUCTION — same alpha, same blur radius — and the harness passed it on those numbers for * four rounds while the PO kept saying it looked like a solid slab. He was right. 0.72 of * near-black leaves 28% of the photograph showing: arithmetically translucent, visually a wall. * Diagnosed on the served page: the filter was never broken — no missing prefix, no fallback * firing, no opaque child, no Kit override. The alpha was the defect, and the blur was the * second one. * * MEASURED, on shape retention (edge energy behind the panel vs the raw photograph in the same * rect): 0.72/40px = 28.9% · 0.35/20px = 39.7% · 0.28/8px = 44.8% · 0.20/4px = 47.4% · * THIS = 76.0%. The jump came from the GRADIENT, not from another blur halving — a flat fill * has to be dark enough for the headings AND clear enough for the photograph, and it cannot be * both. A gradient puts the ink only where the type is. * * AA is held per band, not on average: top 5.41:1 · middle 4.90:1 · foot 7.45:1 against a 4.5 * floor. LEGIBILITY IS CARRIED BY THE TEXT HALOS BELOW, NEVER BY RAISING THE FILL. If a future * pass needs more contrast, the lever is the halo or a slower gradient ramp through the middle — * re-darkening this fill undoes the whole thing. * * This class is the hero panel's surface ONLY — the consultant block (.mk-ctapanel) and mini-bar * (.mk-minibar) have their own surface classes and keep their solid-ink treatment. The landing * pages carry no equivalent panel at all (verified in rendered HTML), so there is nothing there * for this to apply to. */ .mk-panel-inner { background: linear-gradient(180deg, rgba(26,26,26,0.28) 0%, rgba(26,26,26,0.08) 100%); backdrop-filter: blur(2px) saturate(1.15); -webkit-backdrop-filter: blur(2px) saturate(1.15); border: 1px solid rgba(255,255,255,0.14); border-radius: var(--mk-r-panel); padding: 26px; color: var(--mk-white); /* 1px top-edge highlight, the way a real pane catches light; inset so the other three edges keep the quieter hairline. */ box-shadow: inset 0 1px 0 0 rgba(255,255,255,0.18), var(--mk-shadow-lg); } /* No-backdrop-filter browsers only. Without the blur this gradient over a busy photograph is unreadable, so that case alone goes near-opaque. Modern Chrome/Safari never see it. */ @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .mk-panel-inner { background: linear-gradient(180deg, rgba(26,26,26,0.94) 0%, rgba(26,26,26,0.86) 100%); } } /* The type carries its own contrast — this is the ONLY legibility lever on this panel. */ .mk-panel-inner .mk-panel-region, .mk-panel-inner .mk-panel-diff, .mk-panel-inner .mk-panel-trust li, .mk-panel-inner .mk-panel-note { text-shadow: 0 1px 2px rgba(0,0,0,0.88), 0 0 5px rgba(0,0,0,0.85), 0 0 14px rgba(0,0,0,0.70), 0 0 28px rgba(0,0,0,0.45); } .mk-panel-inner .mk-panel-diff, .mk-panel-inner .mk-panel-trust li { color: #fff; } /* The trust bullets sit in the MIDDLE band, the thinnest margin on the panel (4.90:1) — it is where the brightest backdrop passes behind and the gradient has already given up most of its ink. Extra halo here and nowhere else. */ .mk-panel-inner .mk-panel-trust li { text-shadow: 0 1px 2px rgba(0,0,0,0.92), 0 0 5px rgba(0,0,0,0.88), 0 0 12px rgba(0,0,0,0.76), 0 0 26px rgba(0,0,0,0.48); } .mk-panel-inner .mk-panel-note { /* lowest element, on the clearest part of the gradient — heaviest halo of anything here. */ text-shadow: 0 1px 2px rgba(0,0,0,0.92), 0 0 6px rgba(0,0,0,0.88), 0 0 18px rgba(0,0,0,0.72); } .mk-panel-region { margin: 0 0 10px; font-size: var(--mk-fs-eyebrow); font-weight: 700; text-transform: uppercase; letter-spacing: var(--mk-track-wide); color: rgba(255,255,255,0.62); } .mk-panel-diff { margin: 0 0 18px; padding-bottom: 18px; font-size: 0.9375rem; line-height: 1.5; color: var(--mk-white); border-bottom: 1px solid rgba(255,255,255,0.14); } .mk-panel-trust { list-style: none; margin: 0 0 22px; padding: 0; display: grid; gap: 9px; } .mk-panel-trust li { position: relative; padding-left: 24px; font-size: 0.8125rem; line-height: 1.45; color: rgba(255,255,255,0.88); } .mk-panel-trust li::before { content: ''; position: absolute; left: 0; top: 0.4em; width: 7px; height: 7px; border-radius: 50%; background: var(--mk-gold); } #mk-resort .mk-cta--panel { display: flex; width: 100%; min-height: 48px; padding: 14px 20px; border-radius: var(--mk-r-btn); box-shadow: none; } .mk-panel-note { margin: 14px 0 0; text-align: center; font-size: 0.75rem; letter-spacing: 0.04em; color: rgba(255,255,255,0.62); } /* ============================================================================================ * 2. SPEC STRIP — dark card overlapping the hero (the anatomy's load-bearing element) * ========================================================================================== */ .mk-strip { position: relative; z-index: 4; max-width: var(--mk-container); margin: 0 auto; padding: 0 var(--mk-pad-x); } .mk-strip-card { margin-top: -40px; background: var(--mk-ink); border-radius: var(--mk-r-panel); padding: 26px clamp(20px, 3vw, 36px); display: grid; gap: 20px; align-items: center; box-shadow: var(--mk-shadow-lg); } @media (min-width: 768px) { .mk-strip-card { grid-template-columns: minmax(0, 1fr) auto; gap: 32px; } } .mk-strip-list { list-style: none; margin: 0; padding: 0; flex: 1 1 auto; min-width: 0; display: grid; gap: 18px 28px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); } @media (max-width: 767px) { /* horizontal snap rail, exactly as the target does at 390 — contained by the card, so the * page itself never gains horizontal scroll. */ .mk-strip-list { display: flex; flex-wrap: nowrap; gap: 26px; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .mk-strip-list::-webkit-scrollbar { display: none; } .mk-strip-item { flex: 0 0 auto; min-width: 132px; scroll-snap-align: start; } } .mk-strip-item { display: flex; flex-direction: column; gap: 4px; min-width: 0; } .mk-strip-label { font-size: 0.65rem; font-weight: 700; text-transform: uppercase; letter-spacing: var(--mk-track-wide); color: rgba(255,255,255,0.55); } .mk-strip-value { font-size: 0.9375rem; font-weight: 600; line-height: 1.35; color: var(--mk-white); } /* ID-scoped like the hero back-link and for the same reason: a global/kit `a{color:…}` rule otherwise tints this teal on the dark strip, which breaks the one-accent-per-screen rule. */ #mk-resort a.mk-strip-link { flex: 0 0 auto; display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border-radius: var(--mk-r-pill); border: 1px solid rgba(255,255,255,0.26); background: rgba(255,255,255,0.06); font-size: 0.8125rem; font-weight: 600; color: var(--mk-white); text-decoration: none; transition: background var(--mk-dur) var(--mk-ease); } #mk-resort a.mk-strip-link:hover { background: rgba(255,255,255,0.14); color: var(--mk-white); } /* ---- mobile anchor rail. Deliberately NOT sticky: the shared site header already owns top:0, * and a second sticky element there is precisely the overlap defect this template killed. ---- */ .mk-secnav { display: none; } @media (max-width: 767px) { .mk-secnav { display: block; border-bottom: 1px solid var(--mk-border); margin-top: 24px; } .mk-secnav ul { list-style: none; display: flex; gap: 8px; margin: 0; padding: 12px var(--mk-pad-x); overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .mk-secnav ul::-webkit-scrollbar { display: none; } #mk-resort .mk-secnav a { display: inline-block; white-space: nowrap; padding: 8px 14px; border-radius: var(--mk-r-pill); background: var(--mk-alt-surface); color: var(--mk-ink); font-size: 0.75rem; font-weight: 600; text-decoration: none; } } /* ============================================================================================ * 3. WHY WE RECOMMEND — 2-col prose + image mosaic * ========================================================================================== */ .mk-why-grid { display: grid; gap: 40px; } @media (min-width: 1024px) { .mk-why-grid { grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; } .mk-why-grid--single { grid-template-columns: 1fr; } } .mk-why-col { min-width: 0; } .mk-mosaic { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; min-width: 0; } .mk-mosaic-tile { margin: 0; border-radius: var(--mk-r-card); overflow: hidden; background: var(--mk-alt-surface); } .mk-mosaic-tile img { display: block; width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 3; transition: transform 900ms var(--mk-ease-out); } .mk-mosaic-tile--wide { grid-column: 1 / -1; } .mk-mosaic-tile--wide img { aspect-ratio: 16 / 10; } .mk-mosaic-tile:hover img { transform: scale(1.04); } @media (prefers-reduced-motion: reduce) { .mk-mosaic-tile img, .mk-mosaic-tile:hover img { transition: none; transform: none; } } .mk-note { margin-top: 44px; padding: 24px 26px; background: var(--mk-white); border: 1px solid var(--mk-border); border-left: 3px solid var(--mk-teal); border-radius: var(--mk-r-card); } .mk-band--tint .mk-note { background: var(--mk-white); } .mk-note .mk-eyebrow--inline { margin-top: 0; } .mk-note .mk-prose { margin-top: 0; } /* ============================================================================================ * 4. STAY CARDS — full-width, media-left * ========================================================================================== */ .mk-lead-figure { margin: 32px 0 0; } .mk-lead-figure img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--mk-r-card); } .mk-lead-figure figcaption { margin-top: 10px; font-size: var(--mk-fs-small); color: var(--mk-grey); } .mk-stay-list { display: grid; gap: 28px; margin-top: 36px; } .mk-stay-card { display: grid; grid-template-columns: 1fr; background: var(--mk-white); border: 1px solid var(--mk-border); border-radius: var(--mk-r-card); overflow: hidden; isolation: isolate; transition: box-shadow var(--mk-dur) var(--mk-ease); } .mk-stay-card:hover { box-shadow: var(--mk-shadow); } @media (min-width: 900px) { .mk-stay-card { grid-template-columns: minmax(0, 420px) minmax(0, 1fr); } .mk-stay-card--nomedia { grid-template-columns: 1fr; } } .mk-stay-media { position: relative; min-height: 220px; background: var(--mk-alt-surface); } .mk-stay-media img { display: block; width: 100%; height: 100%; object-fit: cover; aspect-ratio: 3 / 2; } @media (min-width: 900px) { .mk-stay-media img { position: absolute; inset: 0; aspect-ratio: auto; } } .mk-stay-body { padding: clamp(22px, 3vw, 34px); display: flex; flex-direction: column; gap: 14px; min-width: 0; } .mk-stay-body .mk-h3 { margin: 0; } .mk-stay-desc { margin: 0; font-size: var(--mk-fs-body); line-height: 1.6; color: #3a3d42; max-width: 60ch; } .mk-facts-row { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 0; padding: 0; } .mk-facts-row li { position: relative; padding-left: 16px; font-size: 0.84rem; font-weight: 600; color: #4a4d52; } .mk-facts-row li::before { content: ''; position: absolute; left: 0; top: 0.55em; width: 5px; height: 5px; border-radius: 50%; background: var(--mk-border); } .mk-stay-foot { margin-top: auto; padding-top: 8px; display: flex; flex-wrap: wrap; align-items: center; gap: 16px; } /* GR1: there is no rate row here by construction — no label, no value, no currency, no band. */ /* REVIEW-1 / VERIFY2: the shared `.mk-cta` base rule (mykish-core-pages/style.css) was just * hardened font-size !important against the Kit leak — that would otherwise now WIN over this * ID-scoped 0.78rem override (an !important always beats a non-important declaration * regardless of specificity). This override needs !important too so it still wins the * (now important-vs-important) tiebreak on its higher ID specificity. */ #mk-resort .mk-cta--card { min-height: 44px; padding: 12px 24px; font-size: 0.78rem !important; box-shadow: none; } .mk-village-split { display: grid; gap: 28px; margin-top: 36px; } @media (min-width: 768px) { .mk-village-split { grid-template-columns: 1fr 1fr; } } .mk-village-group .mk-tick-list { margin-top: 14px; } /* ============================================================================================ * 5. DINING CARDS — two-column, image-top * ========================================================================================== */ .mk-dining-grid { display: grid; gap: 24px; margin-top: 36px; } @media (min-width: 768px) { .mk-dining-grid { grid-template-columns: 1fr 1fr; } } .mk-dining-card { display: flex; flex-direction: column; background: var(--mk-white); border: 1px solid var(--mk-border); border-radius: var(--mk-r-card); overflow: hidden; isolation: isolate; transition: box-shadow var(--mk-dur) var(--mk-ease); } .mk-dining-card:hover { box-shadow: var(--mk-shadow); } .mk-dining-media img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; } .mk-dining-body { padding: clamp(20px, 2.4vw, 28px); display: flex; flex-direction: column; gap: 12px; } .mk-dining-desc { margin: 0; font-size: 0.9375rem; line-height: 1.6; color: #3a3d42; } /* ============================================================================================ * 6. TILE CARDS (activities, villages) + PORTRAIT CARDS (related portfolio) * ========================================================================================== */ .mk-cardgrid { display: grid; gap: 20px; margin-top: 36px; } .mk-cardgrid--3 { grid-template-columns: 1fr; } .mk-cardgrid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .mk-cardgrid--2 { grid-template-columns: 1fr; } @media (min-width: 640px) { .mk-cardgrid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 768px) { .mk-cardgrid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 1024px) { .mk-cardgrid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .mk-cardgrid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } } /* SCAND batch 2026-07-30 — village tabs over the packages list. Ships `hidden` from PHP and is revealed by JS, so no dead control exists without scripting. Scrolls on its own axis at 390 so four village names can never push the page sideways (0 h-scroll law). */ .mk-vtabs { display: flex; flex-wrap: nowrap; gap: 8px; margin-top: 28px; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .mk-vtabs::-webkit-scrollbar { display: none; } .mk-vtabs[hidden] { display: none; } .mk-vtab { flex: 0 0 auto; cursor: pointer; white-space: nowrap; padding: 9px 16px; border-radius: var(--mk-r-pill); font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.02em; background: var(--mk-white); border: 1px solid var(--mk-border); color: var(--mk-ink); } .mk-vtab:hover { border-color: var(--mk-ink); } .mk-vtab.is-active { background: var(--mk-ink); border-color: var(--mk-ink); color: var(--mk-white); } .mk-vtab:focus-visible { outline: 2px solid var(--mk-ink); outline-offset: 2px; } /* SCAND batch 2026-07-30 — disclosed inclusion overflow (replaces a silent 4-item cap). */ .mk-inc-more { margin-top: 12px; } .mk-inc-more > summary { cursor: pointer; font-size: 0.8125rem; font-weight: 600; color: var(--mk-teal-text); list-style: none; } .mk-inc-more > summary::-webkit-details-marker { display: none; } .mk-inc-more > summary:focus-visible { outline: 2px solid var(--mk-ink); outline-offset: 2px; } .mk-inc-more .mk-tick-list { margin-top: 12px; } /* SCAND batch 2026-07-30 — sourced per-village difference list inside a village card. Reads as prose, not as a facts chip row: these are full sentences, one per source line. */ .mk-village-notes { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 8px; } .mk-village-notes li { position: relative; padding-left: 18px; font-size: 0.9rem; line-height: 1.55; color: #2a2c30; } .mk-village-notes li::before { content: ''; position: absolute; left: 0; top: 0.62em; width: 6px; height: 1px; background: var(--mk-border); } .mk-tile-card { display: flex; flex-direction: column; background: var(--mk-white); border: 1px solid var(--mk-border); border-radius: var(--mk-r-card); overflow: hidden; isolation: isolate; } .mk-tile-media img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; } .mk-tile-body { padding: 20px; display: flex; flex-direction: column; gap: 10px; } .mk-tile-desc { margin: 0; font-size: 0.875rem; line-height: 1.6; color: var(--mk-grey); } #mk-resort a.mk-portrait-card, .mk-portrait-card { display: block; text-decoration: none; color: var(--mk-ink); min-width: 0; } .mk-portrait-media { border-radius: var(--mk-r-card); overflow: hidden; background: var(--mk-alt-surface); } .mk-portrait-media img { display: block; width: 100%; aspect-ratio: 3 / 4; object-fit: cover; transition: transform var(--mk-dur) var(--mk-ease); } .mk-portrait-card--link:hover .mk-portrait-media img { transform: scale(1.03); } @media (prefers-reduced-motion: reduce) { .mk-portrait-media img, .mk-portrait-card--link:hover .mk-portrait-media img { transition: none; transform: none; } } .mk-portrait-body { padding: 14px 2px 0; display: flex; flex-direction: column; gap: 8px; } /* a card with no photograph (§3 degradation — we never substitute one) still needs an edge, or it floats as loose text in a grid of image cards */ .mk-portrait-card--nomedia .mk-portrait-body { padding: 22px; background: var(--mk-white); border: 1px solid var(--mk-border); border-radius: var(--mk-r-card); } .mk-portrait-meta { margin: 0; font-size: 0.65rem; font-weight: 600; text-transform: uppercase; letter-spacing: var(--mk-track-wide); color: var(--mk-grey); } #mk-resort .mk-portrait-title { margin: 0; font-size: 1.0625rem; font-weight: 700; line-height: 1.3; letter-spacing: var(--mk-track-tight); color: var(--mk-ink); } .mk-portrait-card--link:hover .mk-portrait-title { color: var(--mk-teal-text); } .mk-band--tint .mk-portrait-chips li { background: var(--mk-white); } .mk-portrait-chips { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 2px 0 0; padding: 0; } .mk-portrait-chips li { padding: 3px 9px; border-radius: var(--mk-r-pill); background: var(--mk-surface); border: 1px solid var(--mk-border); font-size: 0.625rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--mk-grey); } /* Related cards carry NO price, NO rating, NO CTA — the whole card is the link (anatomy §3.10). */ /* ============================================================================================ * 7. GETTING THERE & GOOD TO KNOW — two boxed panels * ========================================================================================== */ .mk-panelgrid { display: grid; gap: 24px; margin-top: 36px; } @media (min-width: 1024px) { .mk-panelgrid { grid-template-columns: 1fr 1fr; align-items: start; } } .mk-panelbox { background: var(--mk-white); border: 1px solid var(--mk-border); border-radius: var(--mk-r-card); padding: clamp(24px, 3vw, 36px); } .mk-transfer-list { list-style: none; margin: 20px 0 0; padding: 0; display: grid; gap: 10px; } .mk-transfer-list li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; padding: 12px 16px; background: var(--mk-alt-surface); border-radius: var(--mk-r-btn); } .mk-transfer-name { font-size: 0.9375rem; font-weight: 700; color: var(--mk-ink); } .mk-transfer-value { font-size: 0.875rem; color: var(--mk-grey); } .mk-dl { margin: 20px 0 0; display: grid; gap: 16px; } .mk-dl > div { display: grid; gap: 3px; } .mk-dl dt { font-size: 0.65rem; font-weight: 700; text-transform: uppercase; letter-spacing: var(--mk-track-wide); color: var(--mk-gold); } .mk-dl dd { margin: 0; font-size: 0.9375rem; line-height: 1.55; color: #3a3d42; } .mk-tip { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--mk-border); } .mk-tip .mk-eyebrow--inline { margin-top: 0; } /* ============================================================================================ * 8. SPECIALIST CTA — dark panel * ========================================================================================== */ .mk-ctapanel { position: relative; overflow: hidden; isolation: isolate; background: var(--mk-ink); border-radius: var(--mk-r-panel); padding: clamp(32px, 5vw, 64px); color: var(--mk-white); } .mk-ctapanel-blob { position: absolute; border-radius: 50%; filter: blur(60px); opacity: 0.28; pointer-events: none; z-index: 0; } .mk-ctapanel-blob--gold { width: 280px; height: 280px; top: -110px; right: -90px; background: var(--mk-gold); } .mk-ctapanel-blob--teal { width: 240px; height: 240px; bottom: -120px; left: -80px; background: var(--mk-teal); opacity: 0.20; } .mk-ctapanel-inner { position: relative; z-index: 1; max-width: 44rem; } .mk-ctapanel-trust { list-style: none; display: flex; flex-wrap: wrap; gap: 10px 24px; margin: 24px 0 0; padding: 0; } .mk-ctapanel-trust li { position: relative; padding-left: 22px; font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.03em; color: rgba(255,255,255,0.86); } .mk-ctapanel-trust li::before { content: ''; position: absolute; left: 0; top: 0.42em; width: 7px; height: 7px; border-radius: 50%; background: var(--mk-gold); } .mk-ctapanel-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; } #mk-resort .mk-cta--onpanel { background: var(--mk-white); color: var(--mk-ink) !important; min-height: 48px; padding: 14px 30px; border-radius: var(--mk-r-pill); box-shadow: none; } #mk-resort .mk-cta--onpanel:hover { background: var(--mk-teal); color: var(--mk-ink) !important; } #mk-resort .mk-cta--ghost { background: rgba(255,255,255,0.06); color: var(--mk-white) !important; border: 1px solid rgba(255,255,255,0.28); min-height: 48px; padding: 14px 30px; border-radius: var(--mk-r-pill); box-shadow: none; } #mk-resort .mk-cta--ghost:hover { background: rgba(255,255,255,0.16); color: var(--mk-white) !important; } .mk-panel-note--on-dark { margin-top: 18px; text-align: left; } /* ============================================================================================ * 9. FACILITIES / FAQ / ITINERARY / PROSE BREAK * ========================================================================================== */ .mk-amenity-grid { list-style: none; display: grid; gap: 12px 32px; margin: 32px 0 0; padding: 0; grid-template-columns: 1fr; } @media (min-width: 640px) { .mk-amenity-grid { grid-template-columns: 1fr 1fr; } } @media (min-width: 1024px) { .mk-amenity-grid { grid-template-columns: repeat(3, 1fr); } } .mk-amenity-grid li { position: relative; padding-left: 26px; font-size: 0.9375rem; color: var(--mk-ink); } .mk-amenity-grid li::before { content: ''; position: absolute; left: 0; top: 0.45em; width: 8px; height: 8px; border-radius: 50%; background: var(--mk-teal); box-shadow: 0 0 0 4px rgba(0,194,203,0.14); } /* Their struck-through "unavailable" rows are dropped by law — we render only facts we hold. */ /* The shared core-pages sheet styles .mk-faq-item as a bordered, rounded, padded card. This * template's FAQ is the anatomy's flat hairline accordion, so every one of those properties is * reset explicitly — inheriting only `border-bottom` left the card shell in place. */ .mk-faq-list { display: block; max-width: none; margin-top: 32px; border-top: 1px solid var(--mk-border); } .mk-faq-item { background: transparent; border: 0; border-bottom: 1px solid var(--mk-border); border-radius: 0; padding: 0; box-shadow: none; } .mk-faq-item[open] { box-shadow: none; } .mk-faq-item summary { list-style: none; cursor: pointer; padding: 20px 36px 20px 0; position: relative; font-size: 1.0625rem; font-weight: 600; line-height: 1.4; color: var(--mk-ink); letter-spacing: var(--mk-track-tight); } .mk-faq-item summary::-webkit-details-marker { display: none; } .mk-faq-item summary::after { content: ''; position: absolute; right: 6px; top: 50%; width: 9px; height: 9px; margin-top: -6px; border-right: 2px solid var(--mk-grey); border-bottom: 2px solid var(--mk-grey); transform: rotate(45deg); transition: transform var(--mk-dur) var(--mk-ease); } /* `content` is restated here so the shared sheet's `[open]` en-dash glyph (same specificity, * printed earlier) cannot reappear beside our rotated chevron. */ .mk-faq-item[open] summary::after { content: ''; transform: rotate(-135deg); margin-top: -2px; } .mk-faq-item summary:focus-visible { outline: 3px solid var(--mk-ink); outline-offset: 2px; } .mk-faq-answer { padding: 0 0 22px; max-width: var(--mk-measure); font-size: 0.9375rem; line-height: 1.7; color: #3a3d42; } .mk-faq-answer p { margin: 0 0 1em; } .mk-faq-answer p:last-child { margin-bottom: 0; } .mk-itinerary { display: grid; gap: 6px; margin-top: 4px; } .mk-itinerary-day { border: 1px solid var(--mk-border); border-radius: var(--mk-r-btn); } .mk-itinerary-day summary { cursor: pointer; padding: 12px 16px; font-size: 0.875rem; font-weight: 600; } .mk-itinerary-day > p { margin: 0; padding: 0 16px 12px; font-size: 0.875rem; line-height: 1.6; color: #3a3d42; } .mk-itinerary-day .mk-facts-row { padding: 0 16px 14px; } .mk-prose-image-break { margin: 28px 0; } .mk-prose-image-break img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--mk-r-card); } .mk-prose-image-break figcaption { margin-top: 10px; font-size: var(--mk-fs-small); color: var(--mk-grey); } /* SC-P2/D2 — the Bokun socket is wired but dormant; it must never occupy layout at launch. */ .mk-bokun-socket { display: none !important; } /* ============================================================================================ * 9b. HAKURAA-PILOT additive sections (REVIEW-1, 2026-07-29) — film lightbox, island map. * All data-gated: with no field data none of these selectors ever match on other resorts. * ========================================================================================== */ /* Watch the film — poster-first lightbox trigger. NOT a hero (A2): a quiet in-band figure. */ .mk-film-poster { position: relative; display: block; width: 100%; margin: 32px 0 0; padding: 0; border: 0; background: none; cursor: pointer; border-radius: var(--mk-r-card); overflow: hidden; isolation: isolate; text-align: left; } .mk-film-poster img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; transition: transform var(--mk-dur) var(--mk-ease); } .mk-film-poster:hover img { transform: scale(1.02); } .mk-film-scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(16,18,20,0) 55%, rgba(16,18,20,0.55) 100%); } .mk-film-play { position: absolute; left: 50%; top: 50%; width: 72px; height: 72px; margin: -36px 0 0 -36px; border-radius: 50%; background: rgba(255,255,255,0.92); box-shadow: var(--mk-shadow-lg); } .mk-film-play::after { content: ''; position: absolute; left: 50%; top: 50%; margin: -10px 0 0 -6px; border-style: solid; border-width: 10px 0 10px 16px; border-color: transparent transparent transparent var(--mk-ink); } .mk-film-label { position: absolute; left: 24px; bottom: 20px; color: var(--mk-white); font-weight: 600; font-size: 0.9375rem; letter-spacing: 0.02em; } .mk-film-poster:focus-visible { outline: 3px solid var(--mk-ink); outline-offset: 2px; } .mk-film-lightbox { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; background: rgba(10,12,14,0.88); padding: 24px; } .mk-film-lightbox iframe { width: min(1080px, 100%); aspect-ratio: 16 / 9; height: auto; border: 0; border-radius: var(--mk-r-card); background: #000; } /* Selector + !important harden: the overlay is appended to , outside #mk-resort, so the * Elementor Kit's `.elementor-kit-6 button` (0,1,1) would otherwise out-rank a lone class and * paint this factory-teal (caught on the rendered capture — same class of leak as the CTA * font-size fight documented at .mk-cta--card). */ .mk-film-lightbox .mk-film-close { position: absolute; top: 18px; right: 18px; width: 44px; height: 44px; padding: 0; border-radius: 50% !important; border: 1px solid rgba(255,255,255,0.4) !important; background: rgba(20,22,24,0.55) !important; color: #ffffff !important; font-size: 22px; line-height: 1; cursor: pointer; } .mk-film-lightbox .mk-film-close:hover { background: rgba(255,255,255,0.22) !important; } .mk-film-lightbox .mk-film-close:focus-visible { outline: 3px solid var(--mk-white); outline-offset: 2px; } /* Island map figure inside the Getting-there panel (anatomy §3.6). */ /* TRANSFER-EVERGREEN LAW (2026-07-30): the standing transfer-inclusion line. Quiet, not a * promotional band — same weight as the small prose it sits with. */ .mk-transfer-evergreen { margin: 14px 0 0; font-size: 0.8125rem; line-height: 1.5; color: var(--mk-ink-2, #4a4a4a); } .mk-map-figure { margin: 20px 0 0; } .mk-map-figure img { display: block; width: 100%; border-radius: var(--mk-r-card); border: 1px solid var(--mk-border); } .mk-map-figure figcaption { margin-top: 10px; font-size: var(--mk-fs-small); color: var(--mk-grey); } /* ============================================================================================ * 9c. FINAL-POLISH (PO F-items, 2026-07-29; C0-UNLOCK: pilot gate removed — portfolio * default). F1/F2 selectors are `#mk-resort`-scoped and now apply on EVERY resort page; * F3/F4/F6 selectors match markup that exists only when its data-gated field/branch * renders (.mk-sustain, .mk-cred-*, .mk-trustlink) — the §3 data-gates are unchanged. * ========================================================================================== */ /* F1 — ENQUIRE on DARK surfaces matches the consultant-block CTA treatment (PO ruling): * white fill, ink text, pill radius, teal hover — .mk-cta--onpanel's exact spec, on * DESIGN v1.1 tokens. Rendered diagnosis 2026-07-29: the hero-panel CTA painted --mk-ink * on the dark glass panel, and the sub-1024 hero CTA painted ink + drop-shadow over the * dark scrim — the "black/embossed" instance. NOT a Kit leak this time (computed font-size * 14.4px = our 0.9rem, colors ours — the VERIFY2 !important hardening holds); it was our * own A8 primary spec placed on a dark ground. Light-surface instances (stay-card CTAs, * sticky mobile bar) already carry A8 correctly and are untouched, so every instance on * the page now reads as one system: consultant treatment on dark, A8 primary on light. * color needs !important only to win the important-vs-important tiebreak against the * shared `.mk-cta` base (same mechanism as .mk-cta--onpanel). */ #mk-resort .mk-cta--panel, #mk-resort .mk-cta--hero { background: var(--mk-white); color: var(--mk-ink) !important; border-radius: var(--mk-r-pill); box-shadow: none; } #mk-resort .mk-cta--panel:hover, #mk-resort .mk-cta--hero:hover { background: var(--mk-teal); color: var(--mk-ink) !important; } /* F2 — spec strip: every fact on ONE line at 1440 AND 390, no content loss. The 768+ * auto-fit grid wrapped the Board value mid-text at every desktop width and pushed the * fifth fact (House reef) onto a second grid row; replaced (pilot-gated) with a single * nowrap flex row. Values step to 0.875rem ≥768 so all five facts + the Explore link hold * one row inside the 1200px container; overflow-x:auto is a safety rail INSIDE the card * (the page itself can never gain horizontal scroll from this element), mirroring the * mobile rail that already worked. */ #mk-resort .mk-strip-label, #mk-resort .mk-strip-value { white-space: nowrap; } @media (min-width: 768px) { #mk-resort .mk-strip-list { display: flex; flex-wrap: nowrap; justify-content: space-between; gap: 16px; overflow-x: auto; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.35) transparent; } #mk-resort .mk-strip-list::-webkit-scrollbar { height: 6px; } #mk-resort .mk-strip-list::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.35); border-radius: 3px; } /* C0-UNLOCK regression fix (measured on Kakslauttanen 518 @1440): the base * .mk-strip-item carries min-width:0, so `flex: 0 1 auto` alone let items shrink BELOW * their nowrap content and a long value (e.g. a sentence-length Scandinavia transfer * note) overprinted its neighbours — invisible on the pilot because Hakuraa's five * values are short. min-content floors every item at its one-line width; a genuinely * overlong row now overflows INSIDE the card (page never h-scrolls) on a visible thin * scrollbar instead of hiding content — no overlap, no content loss, and rows that fit * (the normal case) render identically to the pilot. */ #mk-resort .mk-strip-item { flex: 0 1 auto; min-width: min-content; } #mk-resort .mk-strip-value { font-size: 0.875rem; } /* measured 2026-07-29: at exactly 1440 the five nowrap facts + link overflowed the list * by single-digit pixels (774/768, then 779/776 across two font-metric passes) — a * sliver of internal scroll. 16px min-gaps, a 24px card gap and 24px card side padding * give ~20px real slack; space-between redistributes it evenly across the row. */ #mk-resort .mk-strip-card { gap: 24px; padding-left: 24px; padding-right: 24px; } } /* F3 — Ocean impact (data-gated on sustainability_copy; §3 empty renders nothing). The * copy's