/* ============================================================ ÉVORA DEVELOPMENTS — SHARED DESIGN SYSTEM ============================================================ Brand: Inspired by Heritage. Built for the Future. Colors: #173F35 / #4E5B31 / #90906F / #B15533 / #F5F1EB Fonts: Beautique Display (headlines) / Attack (body) Almarai (AR body) / Athelas ARA (AR headlines) Signature shape: ARCH (rounded top, flat bottom) ============================================================ */ /* ---------------- Fonts ---------------- */ /* Beautique Display — English HEADLINES (and, via the 'Beautique Latin' alias further down, the Latin runs inside Arabic headlines). ?v=20260813a: the vendor OTF ships THREE disagreeing vertical metrics with the flag that picks the wrong one turned on — hhea.ascent 1000 <- what Blink on macOS/iOS reads OS/2 sTypoAsc 800 <- what Blink on Windows/Android reads, because fsSelection bit 7 (USE_TYPO_METRICS) is set OS/2 usWinAsc 1000 Real ink of 'É' reaches 976. So on Windows/Android every cap and accent sat 0.176em OUTSIDE its own content box — sliced flat by any overflow:hidden ancestor ("Évora Éd" rendered as "Evora Ed") — and the baseline sat 0.10em high in every fixed-line-height heading, while line-height:normal came out 1.20em instead of 1.40em. iOS was unaffected, which is why this only ever got reported on Windows/Android. The woff2s are re-saved from the brand-kit OTFs with sTypoAscender raised 800 -> 1000 so hhea == typo == usWin and NO platform can diverge. Deliberately unchanged so macOS/iOS rendering is byte-identical to before: descender -200, lineGap 200, usWin 1000/200, all outlines and advance widths. If these are ever regenerated from the OTF, re-apply the fix or the bug returns: from fontTools.ttLib import TTFont f = TTFont('BeautiqueDisplay-Regular.otf') f['OS/2'].sTypoAscender = 1000 # was 800; match hhea.ascent f.flavor = 'woff2'; f.save('BeautiqueDisplay-Regular.woff2') (-Medium additionally had the BOLD bit set in fsSelection; corrected to 192.) */ @font-face { font-family: 'Beautique Display'; src: url('fonts/BeautiqueDisplay-Light.woff2?v=20260817b') format('woff2'); font-weight: 300; font-style: normal; font-display: swap; } @font-face { font-family: 'Beautique Display'; src: url('fonts/BeautiqueDisplay-Regular.woff2?v=20260817b') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'Beautique Display'; src: url('fonts/BeautiqueDisplay-Medium.woff2?v=20260817b') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: 'Beautique Display'; src: url('fonts/BeautiqueDisplay-Bold.woff2?v=20260817b') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; } /* Attack — English BODY (and, via the 'Attack Latin' alias further down, the Latin runs inside Arabic body copy). ?v=20260817f: lowercase 's' sat one pixel BELOW the baseline on Windows only, sitewide, at every size, while every other glyph was correct. Not a subset gap and not a bad outline — 's' is present in all three cmap subtables and its outline is byte-identical to the vendor OTF. The cause was the CFF alignment zones in the Private dict, which the vendor shipped broken and differently broken per weight: weight BlueValues (shipped) second zone corresponds to Light [-8,0, 543,549, 541,548] nothing; OVERLAPS the next zone (invalid per the CFF spec) Regular [-8,0, 464,470, 541,548] nothing (real x-height ~547) Medium [-8,0, 385,391, 541,548] nothing Bold [-8,0, 228,234, 541,548] nothing These faces ship entirely UNHINTED (zero stem hints in any charstring), so the rasterizer autohints from the blue zones alone. Windows/DirectWrite uses the Adobe CFF engine, which honours them; macOS/CoreText renders the unhinted outline and ignores them — hence Windows-only. The baseline zone was -8..0 (+BlueFuzz 1 = -9..1), and 's' has the deepest x-height overshoot in the family: yMin -9 in Light/Medium/Bold, i.e. exactly ON the zone edge, while every sibling round letter (a -6, c -7, e -7, o -7) sits comfortably inside. So Windows aligned every other lowercase to the baseline and left 's' to round independently, one pixel low. Size-independent because zone membership is. Repaired to [-11, 0, 540, 551] in all four weights: baseline zone widened to cover 's' (and 'u' at -10 in Bold), and the bogus/overlapping second and third zones replaced by ONE accurate x-height zone spanning the real range (flat n/m/r 546-551, round o/c/e/a/s 546-550, short u/v/w/x/z 540-541). Deliberately NOT added: a cap-height zone. The shipped 541..548 zone was never one (caps are at 700-710), so caps get no zone alignment today; adding one would be a new Windows behaviour change beyond this fix. Metadata-only edit. Outlines, advance widths, Subrs, OtherBlues, StdHW/StdVW, StemSnap*, hhea/sTypo/usWin metrics and the name table are all unchanged and verified byte-identical, so macOS rendering and all layout are untouched. Still just outside the zone and liable to the same bug if it ever shows: 'five' (-14 Medium, -18 Bold), 'nine' (-13 Light), 'J' (-13 Light/Regular). comma/semicolon/quotedblbase (-43..-52) and at/copyright/registered (-26..-37) are intentional descenders, correctly excluded. If these are ever regenerated from the OTF, re-apply the fix or the bug returns: from fontTools.ttLib import TTFont f = TTFont('ATTACK-Regular.otf') f['CFF '].cff[f['CFF '].cff.fontNames[0]].Private.BlueValues = [-11, 0, 540, 551] f.flavor = 'woff2'; f.save('ATTACK-Regular.woff2') */ @font-face { font-family: 'Attack'; src: url('fonts/ATTACK-Light.woff2?v=20260817f') format('woff2'); font-weight: 300; font-style: normal; font-display: swap; } @font-face { font-family: 'Attack'; src: url('fonts/ATTACK-Regular.woff2?v=20260817f') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'Attack'; src: url('fonts/ATTACK-Medium.woff2?v=20260817f') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: 'Attack'; src: url('fonts/ATTACK-Bold.woff2?v=20260817f') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; } /* Inter — English TEXT (body copy, links, form fields, legal pages) and, via the 'Inter Latin' alias further down, the Latin runs inside Arabic body copy. WHY THIS FACE EXISTS. Attack renders lowercase 's' below the baseline on Windows, sitewide, at every size. ?v=20260817f attempted a CFF blue-zone repair (commit 2f7d33a); it deployed clean, was verified byte-for-byte in production, and did NOT fix the symptom on Windows. The blue-zone hypothesis is disproven and Attack is not being patched further. The real problem is that Attack ships fully UNHINTED: it carries no fpgm/prep/cvt/gasp at all, so at text sizes it is at the mercy of DirectWrite's grid-fitting. No amount of metadata fixes that. Attack stays on DISPLAY (all-caps labels, eyebrows, nav, buttons), where the sizes are large enough that hinting does not decide the outcome; everything small and sentence-case moved here. Inter 4.1, subset from the vendor TTFs, retaining fpgm + prep + cvt + gasp — the hinting is the entire point of the swap, so if these are ever re-subset, do NOT pass --no-hinting. Subset range: Basic Latin, Latin-1 Supplement, Latin Extended-A, General Punctuation, + EUR/TM. U+00C9 (É) is inside Latin-1 Supplement and is required by "Évora" — verify it survives any re-subset. No italic face is shipped: the one italic TEXT element (about.html's heritage note) synthesised its oblique under Attack too, so that is unchanged, not a regression. Weights: 400 for body copy, 700 for the runs in the legal pages. 500 and 600 are deliberately NOT shipped — no TEXT selector resolves to either, so they would have been dead files. Add the matching weight before styling any text at 500/600, or the browser will synthesise it. */ @font-face { font-family: 'Inter'; src: url('fonts/Inter-Regular.woff2?v=20260817g') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'Inter'; src: url('fonts/Inter-Bold.woff2?v=20260817g') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; } /* Athelas Arabic — NO LONGER APPLIED. Was the Arabic headline face per brand guidelines; replaced by 'Almarai Display' below because Athelas's final reh is too thin to survive Windows/DirectWrite hinting (see the note on that alias for the measured ink figures). These four faces are left declared but unreferenced, so nothing fetches them — restoring the brand face is a one-line change: put 'Athelas Arabic' back ahead of 'Almarai Display' in the RTL display stack. The metric history below still applies to the files themselves. ?v=m430: the shipped files' hhea/typo descent (-259/1000em) was shallower than the real glyph ink (ع/ج/م tails reach -370, deepest form -679), so renderers that clip text to the font's metric box cut descenders off. The woff2s are re-saved with descent raised to -430 (covers all letters used in the AR copy); ascent 741 + descent 430 = 1171 stays inside the 1.4 line-height floor forced on AR headings, so line boxes—and therefore layout—are unchanged. ?v=utm4: final-reh fix. Windows/Chrome (DirectWrite) takes its line-layout ascent/descent from OS/2 usWinAscent/usWinDescent unless fsSelection bit 7 (USE_TYPO_METRICS) is set — and that bit is only honoured on OS/2 version 4+, while these files shipped as version 3. So macOS/iOS read hhea (741/-430) while Windows read usWin (1388/430): the baseline sat 0.65em lower in the line box, leaving only 0.02em under it at the 1.4 line-height forced on AR headings. Every letter with a below-baseline tail lost it, and final reh (ر, ink to -203) — whose whole body sits at the baseline — vanished outright, so "أكثر" read as "أكث". Fixed by bumping OS/2 to v4 and setting USE_TYPO_METRICS, so Windows uses the same 741/-430 as hhea; usWin* is widened to the true ink bounds since it now only clips the raster. hhea/sTypo* are untouched, so macOS/iOS rendering and all layout are bit-identical to before. */ @font-face { font-family: 'Athelas Arabic'; src: url('fonts/AthelasArabic-Book.woff2?v=20260817b') format('woff2'); font-weight: 300; font-style: normal; font-display: swap; } @font-face { font-family: 'Athelas Arabic'; src: url('fonts/AthelasArabic-Regular.woff2?v=20260817b') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'Athelas Arabic'; src: url('fonts/AthelasArabic-SemiBold.woff2?v=20260817b') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: 'Athelas Arabic'; src: url('fonts/AthelasArabic-Bold.woff2?v=20260817b') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; } /* Almarai — Arabic BODY (self-hosted woff2, converted from brand-kit TTF). Maps to the Attack body role when dir=rtl. ?v=utm4: same OS/2 v3 → v4 + USE_TYPO_METRICS fix as Athelas above. These already carried the bit but shipped as version 3, so Windows ignored it and used usWin (1108/453) against hhea's 905/-211 — the same baseline drop, and Almarai-Bold was additionally missing the bit entirely. */ @font-face { font-family: 'Almarai'; src: url('fonts/Almarai-Light.woff2?v=20260817b') format('woff2'); font-weight: 300; font-style: normal; font-display: swap; } @font-face { font-family: 'Almarai'; src: url('fonts/Almarai-Regular.woff2?v=20260817b') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'Almarai'; src: url('fonts/Almarai-Bold.woff2?v=20260817b') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: 'Almarai'; src: url('fonts/Almarai-ExtraBold.woff2?v=20260817b') format('woff2'); font-weight: 800; font-style: normal; font-display: swap; } /* Almarai Display — the Arabic DISPLAY face, replacing Athelas Arabic in headings. Athelas's final reh renders thin enough that Windows/DirectWrite hinting can reduce it to near-nothing, so "أكثر" reads as "أكث". Measured reh ink mass inside the word, rasterised at the sizes AR display copy actually uses: px Athelas 400 Almarai 400 Almarai 700 Almarai 800 12 11 12 18 20 14 14 18 24 28 16 20 24 33 39 20 31 37 49 60 Almarai at REGULAR is only 9–29% heavier — not enough on its own. The real margin is weight: Almarai 700 carries 64–71% more reh ink than Athelas 400, and 800 carries 82–95% more. A stroke with that much mass cannot hint away. Hence this alias rather than simply swapping the family: it remaps the display role's weights UP (400 -> Bold file, 700 -> ExtraBold file) so Arabic renders heavy while the element's own font-weight stays 400 — which matters because 'Beautique Latin' sits ahead of it in the same stack and must keep rendering Latin runs ("Pulse Medical Hub", "Évora") at their original Regular weight. Setting font-weight:700 on the rule instead would have bolded the Latin too. */ @font-face { font-family: 'Almarai Display'; src: url('fonts/Almarai-Bold.woff2?v=20260817b') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'Almarai Display'; src: url('fonts/Almarai-ExtraBold.woff2?v=20260817b') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; } /* ---------------- Base ---------------- */ :root { --evora-dark: #173F35; --evora-forest: #4E5B31; --evora-olive: #90906F; --evora-terra: #B15533; --evora-cream: #F5F1EB; --ink: #0a0a0a; } html, body { background: var(--ink); color: var(--evora-cream); font-family: 'Inter', system-ui, sans-serif; -webkit-font-smoothing: antialiased; overflow-x: hidden; } .font-display { font-family: 'Beautique Display', Georgia, serif; } /* Hide the scrollbar on mobile only (≤767px) — scrolling still works, the bar is just not painted. Desktop (≥768px) keeps its normal scrollbar untouched. Diagnosis: the page scroller is the root element (document.scrollingElement) — there is NO inner full-page scroll wrapper — so the rule targets html explicitly. scrollbar-width:none hides it on Firefox + modern Blink; the ::-webkit-scrollbar pseudo (targeted on html/body, not just a bare *) hides classic WebKit/Blink bars. !important guards against the Tailwind Play CDN base layer injected after this file. Note: on macOS *overlay* scrollbars this is a no-op (they're already invisible and unstyleable); it matters on platforms that render CLASSIC bars (Win/Linux/Android). */ @media (max-width: 767px) { html, body { scrollbar-width: none !important; -ms-overflow-style: none !important; } /* Firefox / legacy Edge */ html::-webkit-scrollbar, body::-webkit-scrollbar, *::-webkit-scrollbar { display: none !important; width: 0 !important; height: 0 !important; } /* WebKit / Blink classic bars */ } /* ---------------- Custom cursor ---------------- */ @media (hover: hover) and (pointer: fine) { * { cursor: none !important; } .cursor-dot, .cursor-ring { position: fixed; top: 0; left: 0; pointer-events: none; z-index: 9999; mix-blend-mode: difference; border-radius: 9999px; transform: translate(-50%, -50%); } .cursor-dot { width: 6px; height: 6px; background: var(--evora-terra); transition: transform 0.15s ease; } .cursor-ring { width: 38px; height: 38px; border: 1px solid rgba(245,241,235,0.6); transition: transform 0.25s ease, width 0.25s ease, height 0.25s ease, border-color 0.25s ease; } .cursor-hover .cursor-ring { width: 60px; height: 60px; border-color: var(--evora-terra); } } /* ---------------- Film grain ---------------- */ .grain { position: fixed; inset: 0; pointer-events: none; z-index: 60; opacity: 0.05; mix-blend-mode: overlay; background-image: url("data:image/svg+xml;utf8,"); } /* ---------------- Navbar ---------------- */ /* Navbar scroll state (Emaar-style): transparent over hero → solid #173F35 on scroll. Solid color animates via background-color; the subtle top veil animates via ::before opacity (a gradient-image → solid swap can't transition, so the two are split). */ .navbar { position: fixed; top: 0; left: 0; right: 0; z-index: 50; background-color: transparent; transition: background-color .35s ease, border-color .35s ease, box-shadow .35s ease; } .navbar::before { content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: linear-gradient(to bottom, rgba(0,0,0,0.35) 0%, transparent 100%); opacity: 1; transition: opacity .35s ease; } .navbar.scrolled, .navbar.navbar--solid { background-color: #173F35; border-bottom: 1px solid rgba(245,241,235,0.08); box-shadow: 0 2px 24px rgba(10,10,10,0.18); } .navbar.scrolled::before, .navbar.navbar--solid::before { opacity: 0; } .nav-inner { position: relative; z-index: 1; max-width: 1600px; margin: 0 auto; padding: 18px 24px; display: flex; align-items: center; justify-content: space-between; } @media (min-width: 1024px) { .nav-inner { padding: 18px 48px; } } /* Navbar/footer logo — fit whole logo, preserve aspect ratio, no clip */ .nav-logo { display: block; height: 44px; width: auto; flex-shrink: 0; } .nav-logo img { display: block; height: 100%; width: auto; max-height: 44px; object-fit: contain; } @media (max-width: 1023px) { .nav-logo { height: 38px; } } /* Navbar top-bar logo — larger & more prominent (Emaar-like); footer/mobile-menu unchanged */ .nav-inner .nav-logo { height: 56px; } .nav-inner .nav-logo img { max-height: 56px; } @media (max-width: 1023px) { .nav-inner .nav-logo { height: 46px; } .nav-inner .nav-logo img { max-height: 46px; } } /* Footer logo — a touch larger than navbar for balance; navbar/mobile-menu unchanged */ footer .nav-logo { height: 60px; } footer .nav-logo img { max-height: 60px; } @media (max-width: 1023px) { footer .nav-logo { height: 50px; } footer .nav-logo img { max-height: 50px; } } .nav-center { display: none; align-items: center; gap: 56px; font-size: 11px; letter-spacing: 0.28em; text-transform: uppercase; } .nav-right { display: none; align-items: center; gap: 28px; font-size: 11px; letter-spacing: 0.28em; text-transform: uppercase; } @media (min-width: 1024px) { .nav-center, .nav-right { display: flex; } } .nav-link { position: relative; transition: color .3s ease; } .nav-link::after { content: ''; position: absolute; left: 0; bottom: -6px; width: 0; height: 1px; background: var(--evora-terra); transition: width 0.35s ease; } .nav-link:hover::after, .nav-link.active::after { width: 100%; } .nav-link.active { color: var(--evora-cream); } .nav-icon-link { display: inline-flex; align-items: center; gap: 8px; transition: color .3s ease; } .nav-icon-link:hover { color: var(--evora-terra); } /* Language toggle — desktop (sits in .nav-right). Matches the 11px tracked, uppercase nav rhythm; the label shows the language you'd switch TO. */ /* Language switch — dual-label "EN | ع". Each label is an independent target: clicking it sets that language via applyLang(); the active label is cream, the inactive one is dimmed. direction:ltr is forced so the EN | ع order stays the same in LTR and RTL (the switch as a whole still repositions with the mirrored nav). */ .lang-switch { display: inline-flex; align-items: center; gap: 9px; direction: ltr; font-family: 'Attack', sans-serif; line-height: 1; color: var(--evora-cream); } .lang-switch .lang-opt { background: transparent; border: 0; padding: 0; margin: 0; cursor: pointer; font: inherit; text-transform: uppercase; letter-spacing: 0.18em; line-height: 1; color: inherit; opacity: 0.42; transition: opacity .3s ease, color .3s ease; } /* The Arabic glyph reads small in the Latin face — give it the brand Arabic font, no tracking, a touch larger. Almarai's "ع" ink sits low in its line box (Arabic baseline ≠ Latin cap baseline), so box-centering alone leaves it dropping below "EN". Lift it with an em-based transform (scales across all three switch sizes) so EN, the divider, and ع share one optical centreline. */ .lang-switch .lang-opt[data-lang="ar"] { font-family: 'Almarai', system-ui, sans-serif; letter-spacing: 0; font-size: 1.2em; transform: translateY(-0.28em); } .lang-switch .lang-opt.is-active { opacity: 1; } .lang-switch .lang-opt:hover { opacity: 1; color: var(--evora-terra); } .lang-switch .lang-sep { width: 1px; height: 11px; flex: 0 0 auto; background: rgba(245,241,235,0.32); } /* Size + placement variants (match each nav context; mobile bar hidden ≥768px). */ .lang-switch--nav { font-size: 11px; } .lang-switch--bar { font-size: 13px; display: none; } .lang-switch--menu { font-size: 12px; width: 100%; justify-content: center; padding: 12px 0; } @media (max-width: 767px) { .lang-switch--bar { display: inline-flex; } } .hamburger { display: flex; flex-direction: column; gap: 6px; padding: 8px; background: transparent; border: 0; } .hamburger span { display: block; width: 24px; height: 1px; background: var(--evora-cream); } @media (min-width: 1024px) { .hamburger { display: none; } } /* ---------------- Mobile top-bar actions (≤767px only) ---------------- Restructures the mobile navbar into: [Call] · centered logo · [ع][hamburger]. (WHATSAPP: removed 2026-08-25 — the bar was [WhatsApp][Call]; the left group self-heals to one icon because both side groups are flex:1 1 0, keeping the logo perfectly centered.) Every new element is hidden ≥768px, so the tablet (768–1023px) and desktop (≥1024px) navbars render exactly as before. */ .nav-mobile-left { display: none; } .nav-mobile-right { display: none; } .nav-mobile-icon { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; color: var(--evora-cream); transition: color .3s ease; } .nav-mobile-icon:hover { color: var(--evora-terra); } /* Show the hamburger cluster on tablet + mobile (hamburger itself hides ≥1024). */ @media (max-width: 1023px) { .nav-mobile-right { display: flex; align-items: center; gap: 4px; } } /* Mobile: three-part bar with a perfectly centered logo. */ @media (max-width: 767px) { /* Single Call icon since the WhatsApp removal: the -8px still cancels the 40px hit-area's inner padding so the glyph sits on the page gutter. */ .nav-mobile-left { display: flex; align-items: center; gap: 2px; flex: 1 1 0; justify-content: flex-start; margin-left: -8px; } .nav-mobile-right { flex: 1 1 0; justify-content: flex-end; } .nav-inner .nav-logo { flex: 0 0 auto; } } /* ---------------- Home hero — mobile type hierarchy (≤767px only) ---------- Bigger headline + smaller subcopy for stronger hierarchy on small screens. Only font-size/line-height change; fonts, colors and text are untouched, and the ≥768px (tablet + desktop) hero sizing is left exactly as authored. The two headline steps mirror the existing <640 / sm: breakpoints so the vw scaling stays proportional. Selectors use the stable data-i18n hooks. */ @media (max-width: 639px) { #hero h1[data-i18n="home.hero.headline"] { font-size: 14.5vw !important; line-height: 1.0 !important; } } @media (min-width: 640px) and (max-width: 767px) { #hero h1[data-i18n="home.hero.headline"] { font-size: 11vw !important; line-height: 1.0 !important; } } @media (max-width: 767px) { #hero p[data-i18n="home.hero.subline"] { font-size: 0.8125rem !important; line-height: 1.5 !important; } } /* ---------------- Mobile menu — right slide-in drawer (mobile only) ---------------- Emaar-style drawer in the Évora skin. The panel covers 88vw (max 420px), leaving a ~44px sliver of the page on the leading edge; the backdrop dims that sliver and is the tap-to-close target. GSAP owns transform/opacity while animating and clears its inline props on close, so the CSS closed-state below is always the resting state. RTL mirrors the whole thing via logical properties + the [dir="rtl"] block further down. Desktop (≥1024px) never renders this — the drawer is display:none there. */ .menu-backdrop { position: fixed; inset: 0; z-index: 155; background: rgba(0, 0, 0, 0.5); opacity: 0; pointer-events: none; -webkit-tap-highlight-color: transparent; } .menu-backdrop.is-open { pointer-events: auto; } .mobile-menu { position: fixed; top: 0; bottom: 0; inset-inline-end: 0; z-index: 160; width: 88vw; max-width: 420px; background: var(--ink); /* #0a0a0a — original menu bg */ display: flex; flex-direction: column; transform: translateX(100%); /* closed (LTR) */ visibility: hidden; overflow-y: auto; overscroll-behavior: contain; box-shadow: -18px 0 48px -24px rgba(0, 0, 0, 0.55); } .mobile-menu.is-open { visibility: visible; } /* Head — no wordmark; the big X sits alone on the trailing edge */ .menu-head { display: flex; align-items: center; justify-content: flex-end; padding: 18px 22px 0; } .menu-close { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; margin-inline-end: -10px; /* 48px tap target, optically flush */ color: var(--evora-cream); background: none; border: 0; -webkit-tap-highlight-color: transparent; } .menu-close svg { width: 26px; height: 26px; display: block; } .menu-close:active { color: var(--evora-terra); } /* Items — original scale (text-2xl / 1.5rem) and original vertical placement: the list takes the free space and centres itself, leaving generous negative space above. The 20px gap + 44px tap targets reproduce the original ~64px row pitch (text-2xl line-box 32px + gap-8 32px) while keeping rows tappable. */ /* The