/* ============================================================ ZL TOURS — Homepage design layer (css/zl-home.css) Reference-matched (zl-homepage_89) on IBM Plex + zl-design-system tokens. Scoped under .zl-home (added to ) so it NEVER leaks to other pages. Loaded LAST so it wins over style.css for homepage sections only. Wiring/perf untouched: video hero, #packagesGrid/.package-card, loaders, modals, events all preserved — this file only restyles + lays out. ============================================================ */ /* ── section-head primitives ── */ .zl-home .zh-section{ padding:clamp(48px,6vw,84px) 0; position:relative; } .zl-home .zh-container{ max-width:var(--zl-container); margin-inline:auto; padding-inline:24px; box-sizing:border-box; } .zl-home .zh-head{ margin-bottom:clamp(26px,3.4vw,40px); } .zl-home .zh-eyebrow{ display:inline-flex; align-items:center; gap:9px; color:var(--zl-brown); font-weight:700; font-size:.9rem; margin-bottom:13px; } .zl-home .zh-eyebrow::before{ content:""; width:34px; height:3px; border-radius:3px; background:linear-gradient(90deg,#996230,#E6B563,#00ABC7,#004F6C); } .zl-home .zh-title{ font-size:clamp(1.6rem,3.4vw,2.55rem); font-weight:800; line-height:1.22; letter-spacing:-.01em; color:#141b1f; margin:0; } .zl-home .zh-title .hl{ color:var(--zl-cyan-ink); } .zl-home .zh-sub{ color:var(--zl-muted); font-size:1.04rem; max-width:640px; margin:12px 0 0; line-height:1.7; } .zl-home .zh-mtn{ position:relative; background:var(--zl-sand); } /* [2026-08-06] .zh-imgcard (the shared full-bleed card DNA) removed with its last user, the «اختر نوع تجربتك» mosaic. «الجنوب كما يستحق أن يُعاش» ships its own panel styles in css/zl-south-worlds.css. */ /* ══════════ HERO — reference-model (light/warm + triangle base) ══════════ Keeps #heroVideo untouched. Only the OVERLAY + type + decorative base change: teal at the top (navbar + headline legibility) warming to gold at the foot, and lighter than before so the video reads through — the model's bright, warm mood. */ /* Top padding is the MEASURED header stack (--zl-header-h, published live by unified-header.js: promo marquee + Asiri band + navbar) + breathing room — not a guess. The fixed 126px predated the ZL10 marquee (2026-08-10): the taller stack slid over the headline's first line on laptops. Same fix the phone rule below already had. */ .zl-home #hero.hero{ position:relative; overflow:hidden; display:flex; /* `safe center`: centred while there is room, but NEVER overflowing upward — plain `center` let the content rise INTO the top padding on short laptops (1280×720 measured −8px), putting the headline back under the navbar. */ align-items:safe center; height:auto; /* قياس 2026-08-22: الفيديو 1280×720 (نسبة 1.778) والحاوية كانت 690px ثابتة، فنسبة الهيرو على 1920 = 2.78 ⇒ `cover` يكبّر 1.575× ويبتلع **36.1%** من ارتفاع المشهد (410px)، وعلى 1440 = 14.8%، وعلى 1280 = 4.4%. القص دالة في العرض لا الارتفاع: crop% = 1 − 1.778·h/w؛ لذلك العلاج أن ينمو الارتفاع مع العرض (52vw ⇒ قص ثابت ≈ 7.5%) بسقف 92vh حتى لا يبتلع الهيرو الشاشة، **وأرضية هي قيمة اليوم نفسها** min(86vh,690px) فلا يقصُر الهيرو عن وضعه الحالي في أي مقاس (1280 وما دونه لا يتغيّر إطلاقاً). */ min-height:clamp(min(86vh,690px), 52vw, 92vh); padding:calc(var(--zl-header-h,126px) + 30px) 0 78px; } .zl-home #hero .hero-video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; /* `cover` باقٍ (لا أشرطة سوداء)، لكن مركز القص يتبع المشهد لا منتصف الإطار: قيس على مشهدي المقطع أن الموضوع (القارب في المنغروف، والمتسلّق في الوادي) يقع عند ~65–68% من ارتفاع الإطار، فالإزاحة إلى 58% تبقيه داخل النافذة وتقتطع من السماء قليلاً بدل قطع الموضوع من أسفل. */ object-position:50% 58%; } /* NO veil — the video shows at its own colour (owner 2026-08-06: «شيل الشفافية»). This used to stack THREE washes over the footage: a two-gradient teal/brown tint, a 26% flat fill, and a sand fade that fogged the whole lower half. Deleted, not overridden. The headline keeps its per-element text-shadow, and the phone view has its own thin text-reading gradient in zl-hero-v2.css. */ /* The overlay — NOT #hero — is the box that actually lays the content out (style.css centres .hero-content inside this absolute inset:0 flex). So the header clearance must live HERE: #hero's own padding pads an empty flex row (its only in-flow child is a