/* ========================================================================== The Metropolis Lekki - shared stylesheet Used by overlay.html, contact.html and dining.html ========================================================================== */ :root { --ml-navy:#12234E; --ml-teal:#32C0A0; --ml-bg:#F6F5F5; } * { box-sizing:border-box; } html, body { margin:0; padding:0; } body { background:var(--ml-bg); font-family:system-ui,-apple-system,"Segoe UI",Helvetica,Arial,sans-serif; color:var(--ml-navy); -webkit-font-smoothing:antialiased; } a { color:inherit; } /* -------------------------------------------------------------------------- HOST-PAGE STACKING CONTRACT The popup container the component appends to computes to z-index 999. Anything on this page above 999 will cover the booking overlay, so every fixed/sticky element here is deliberately kept below it: .ml-nav 900 .ml-mobile-cta 998 We ALSO raise the popup to 1200 in each page's scoped style block, which keeps this robust if a future component build changes its own value. -------------------------------------------------------------------------- */ .ml-nav { position:sticky; top:0; z-index:900; background:var(--ml-navy); color:#fff; display:flex; align-items:center; justify-content:space-between; gap:16px; padding:14px 24px; box-shadow:0 1px 12px rgba(0,0,0,.18); } .ml-nav .ml-logo { font-size:18px; font-weight:700; letter-spacing:.6px; text-decoration:none; white-space:nowrap; } .ml-nav-links { display:flex; align-items:center; gap:22px; font-size:15px; } .ml-nav-links a { text-decoration:none; opacity:.88; } .ml-nav-links a:hover { opacity:1; color:var(--ml-teal); } .ml-nav-links a.ml-current { opacity:1; color:var(--ml-teal); } /* HERO */ .ml-hero { position:relative; min-height:78vh; display:flex; align-items:center; justify-content:center; text-align:center; padding:80px 24px; color:#fff; background:radial-gradient(120% 120% at 20% 15%, rgba(50,192,160,.42) 0%, rgba(18,35,78,0) 55%), linear-gradient(150deg, #12234E 0%, #16305f 45%, #0c1935 100%); } .ml-hero.ml-hero-sm { min-height:38vh; padding:64px 24px 56px; } .ml-hero-inner { max-width:820px; } .ml-eyebrow { text-transform:uppercase; letter-spacing:3px; font-size:12px; color:var(--ml-teal); font-weight:700; margin:0 0 18px; } .ml-hero h1 { font-size:clamp(32px,5.2vw,58px); line-height:1.08; margin:0 0 20px; font-weight:700; } .ml-hero.ml-hero-sm h1 { font-size:clamp(28px,4vw,44px); margin-bottom:14px; } .ml-hero p.ml-sub { font-size:clamp(16px,2vw,20px); line-height:1.55; color:#dfe6f2; margin:0 0 34px; } .ml-hero.ml-hero-sm p.ml-sub { margin-bottom:0; } .ml-hero-actions { display:flex; gap:14px; justify-content:center; flex-wrap:wrap; align-items:center; } .ml-ghost { display:inline-block; padding:15px 28px; border:1.5px solid rgba(255,255,255,.55); border-radius:999px; text-decoration:none; font-size:16px; font-weight:600; } .ml-ghost:hover { border-color:var(--ml-teal); color:var(--ml-teal); } /* BOOK NOW BUTTON SKIN - hooked up via the class-name attribute. The component renders a real