/* css/nav-rtl.css — Arabic nav, fully isolated from .nav cascade. Loaded only on /ar/* pages by the catchall function injection. Why a separate element + class: every existing page has CSS like `body .nav { background: transparent !important }`. With Safari 26.3 + RTL + a transparent nav over light heroes, the nav is visually invisible. Even with !important specificity bumps, the element itself ends up in a Safari paint dead-zone on certain pages. Creating a fresh DOM element with a fresh class name bypasses all conflicts: no existing rule targets `.jr-arabic-nav`, so we have a clean canvas. */ /* Hide the original nav on RTL pages so it doesn't take layout space or compete for paint. */ html.is-rtl .nav { display: none !important; } /* Exclude the new nav from the root cross-document view transition. Without this, SPA navigation (which triggers startViewTransition()) captures .jr-arabic-nav as part of the root snapshot, animates a cross-fade, and leaves the persisted element in a hidden state after the transition. With its own named transition group AND animation: none, the element is held stable across the swap. */ .jr-arabic-nav { view-transition-name: jr-arabic-nav; } ::view-transition-old(jr-arabic-nav), ::view-transition-new(jr-arabic-nav) { animation: none; } /* Brand-new nav, styled from scratch. No inheritance from .nav rules. POSITION: relative — sits at top of in normal flow. Why not fixed: Safari 26.3 has a paint-suppression bug for fixed elements in the top-300px region of certain pages. */ .jr-arabic-nav { /* position: relative — the ONLY variant Safari 26.3 paints reliably across all Arabic pages. position: fixed and position: sticky both trigger paint suppression on /ar/blog, /ar/about, etc. */ position: relative; z-index: 99998; width: 100%; height: 100px; display: flex; align-items: center; justify-content: space-between; padding: 0 5vw; box-sizing: border-box; background: rgb(10, 9, 8); color: #f6f3ee; /* RTL flow */ direction: rtl; font-family: -apple-system, system-ui, BlinkMacSystemFont, 'Geeza Pro', 'Noto Naskh Arabic', sans-serif; } /* Logo — visually right side in RTL (start in flex flow with direction:rtl) */ .jr-arabic-nav-logo { display: flex; align-items: center; justify-content: center; height: 100%; flex: 0 0 auto; } .jr-arabic-nav-logo img { height: 100px; width: 100px; object-fit: contain; display: block; } /* Link strip — centered. No gap: each link's horizontal padding (18px) is the spacing, so the accent ::after bar covers the link's full padded box cleanly without visual gaps mid-bar. */ .jr-arabic-nav-links { display: flex; flex-direction: row; align-items: center; gap: 0; list-style: none; margin: 0; padding: 0; flex: 1 1 auto; justify-content: center; height: 100%; } .jr-arabic-nav-links li { list-style: none; } .jr-arabic-nav-links a { position: relative; color: rgba(246, 243, 238, 0.75); text-decoration: none; font-size: 15px; font-weight: 500; padding: 0 18px; line-height: 100px; /* fills nav height so accent bar can sit behind text */ height: 100px; /* explicit — flex children sometimes shrink in Safari */ min-height: 100px; display: block; transition: color 160ms ease; white-space: nowrap; box-sizing: border-box; } .jr-arabic-nav-links li { display: flex; /* match LI height to A so ::after positions correctly */ align-items: stretch; height: 100%; } /* Accent bar — matches LTR style.css .nav-links a::after exactly. 10px-tall orange bar sits BEHIND the text at vertical middle of the 100px-tall link. Scales in from center on hover/active. Hybrid show/hide: opacity gates visibility (Safari 26.3 sometimes ignores transform:scaleX(0) on ::after in RTL), transform animates the scale-in feel. With opacity:0 the bar is invisible regardless of transform state, so the bar is reliably hidden by default. */ .jr-arabic-nav-links a::after { content: ''; position: absolute; bottom: 33px; left: 12px; right: 12px; height: 10px; background: #ffa33a; opacity: 0; transform: scaleX(0); transform-origin: center; transition: opacity 200ms ease, transform 400ms cubic-bezier(0.645, 0.045, 0.355, 1); pointer-events: none; } .jr-arabic-nav-links a:hover, .jr-arabic-nav-links a:focus-visible, .jr-arabic-nav-links a.is-active { color: #ffffff; outline: none; } .jr-arabic-nav-links a:hover::after, .jr-arabic-nav-links a:focus-visible::after, .jr-arabic-nav-links a.is-active::after { opacity: 1; transform: scaleX(1); } /* Social icons */ .jr-arabic-nav-social { display: flex; align-items: center; gap: 14px; flex: 0 0 auto; } .jr-arabic-nav-social a { color: #f6f3ee; opacity: 0.85; transition: opacity 160ms ease, color 160ms ease; display: inline-flex; align-items: center; justify-content: center; } .jr-arabic-nav-social a:hover, .jr-arabic-nav-social a:focus-visible { opacity: 1; outline: none; } .jr-arabic-nav-social svg { width: 20px; height: 20px; display: block; } /* Lang switcher (uses original .nav-lang/.lang-toggle/.lang-menu classes so i18n.js auto-wires it — see catchall function injection) */ .jr-arabic-nav-lang { flex: 0 0 auto; display: flex; align-items: center; } /* Hero containers in main need to share viewport height minus nav. Most heros use min-height: 100vh which would push content below the fold. */ html.is-rtl main { min-height: calc(100vh - 100px); } /* Mobile */ @media (max-width: 800px) { .jr-arabic-nav { height: 72px; padding: 0 16px; } .jr-arabic-nav-logo img { height: 60px; width: 60px; } .jr-arabic-nav-links { display: none; } .jr-arabic-nav-social { display: none; } html.is-rtl main { min-height: calc(100vh - 72px); } } /* Scroll state — kept for parity with original .nav.scrolled class. No visual change needed since nav is already solid. */ .jr-arabic-nav.is-scrolled { background: rgb(10, 9, 8); } /* ===== HOMEPAGE — center logo between left/right halves of links ===== Mirrors the LTR home layout. Relocate logo into the middle of .jr-arabic-nav-links via nav-rtl.js, then style here. Overlap-impossible because logo IS the centered flex item. */ html.is-rtl body.home .jr-arabic-nav { justify-content: center; } html.is-rtl body.home .jr-arabic-nav-links { align-items: center; } html.is-rtl body.home .jr-arabic-nav-links > .jr-arabic-nav-logo { display: flex; align-items: center; justify-content: center; margin: 0 30px; flex: 0 0 auto; position: static; height: auto; } html.is-rtl body.home .jr-arabic-nav-links > .jr-arabic-nav-logo img { height: 100px; width: 100px; object-fit: contain; display: block; } /* Suppress the orange underline accent on the logo link — .jr-arabic-nav-logo is an element, so it would otherwise inherit .jr-arabic-nav-links a::after. */ html.is-rtl body.home .jr-arabic-nav-links > .jr-arabic-nav-logo::after { display: none !important; content: none !important; }