/** * Visual Fantasy — site header (desktop + mobile) * Neutrals: #F5F5F5, #141414, #707070 * * Note: Do not use backdrop-filter on .site-nav — it creates a containing block for * position:fixed descendants, so the mobile drawer would size to the header instead of the viewport. */ :root { --nav-h: 76px; --nav-bar-gap: clamp(16px, 2.2vw, 28px); --nav-drawer-gap: clamp(20px, 3vw, 44px); --nav-bg: rgba(20, 20, 20, 0.95); } @media (min-width: 960px) { :root { --nav-h: 92px; } } /* ── Bar (always visible) ── */ /* direction: ltr keeps logo + lang position stable when (AR / کوردی) */ .site-nav { position: fixed; top: 0; left: 0; right: 0; /* Above page sections (e.g. storyboard cards z-index 200) so mobile drawer isn’t covered */ z-index: 500; min-height: var(--nav-h); padding-top: env(safe-area-inset-top, 0px); direction: ltr; background: rgba(20, 20, 20, 0.97); border-bottom: 1px solid rgba(245, 245, 245, 0.07); max-width: 100%; } /* Prevent background scroll when mobile menu is open */ body.site-nav-open { overflow: hidden; } @media (min-width: 960px) { body.site-nav-open { overflow: auto; } } /* Wraps logo row + drawer on desktop; on mobile the drawer is position:fixed (out of flow). */ .site-nav__shell { position: relative; z-index: 2; display: flex; flex-direction: row; align-items: center; justify-content: space-between; width: 100%; min-height: var(--nav-h); padding: 10px var(--h-pad, clamp(16px, 4vw, 64px)); padding-left: max(var(--h-pad, clamp(16px, 4vw, 64px)), env(safe-area-inset-left, 0px)); padding-right: max(var(--h-pad, clamp(16px, 4vw, 64px)), env(safe-area-inset-right, 0px)); box-sizing: border-box; gap: var(--nav-bar-gap); } @media (min-width: 960px) { .site-nav__shell { max-width: min(1500px, 100%); margin-inline: auto; padding-inline: clamp(28px, 5vw, 80px); padding-left: max(clamp(28px, 5vw, 80px), env(safe-area-inset-left, 0px)); padding-right: max(clamp(28px, 5vw, 80px), env(safe-area-inset-right, 0px)); } } .site-nav__bar { position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; flex: 1 1 auto; min-width: 0; gap: var(--nav-bar-gap); } @media (min-width: 960px) { .site-nav__bar { flex: 0 0 auto; } } .site-nav .nav-brand { display: flex; align-items: center; gap: 10px; text-decoration: none; flex-shrink: 0; z-index: 2; } .site-nav .nav-brand img { height: 44px; width: auto; display: block; } @media (min-width: 960px) { .site-nav .nav-brand img { height: 52px; } } /* ── Hamburger ── */ .site-nav__toggle { display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; margin: 0; padding: 0; border: none; border-radius: 10px; background: rgba(245, 245, 245, 0.08); color: #f5f5f5; cursor: pointer; flex-shrink: 0; z-index: 2; -webkit-tap-highlight-color: transparent; transition: background 0.2s, color 0.2s; } .site-nav__toggle:hover { background: rgba(245, 245, 245, 0.12); } .site-nav__toggle:focus-visible { outline: 2px solid rgba(245, 245, 245, 0.45); outline-offset: 2px; } .site-nav__toggle-burger, .site-nav__toggle-burger::before, .site-nav__toggle-burger::after { display: block; width: 22px; height: 2px; background: currentColor; border-radius: 1px; transition: transform 0.25s ease, opacity 0.2s ease; } .site-nav__toggle-burger { position: relative; } .site-nav__toggle-burger::before, .site-nav__toggle-burger::after { content: ''; position: absolute; left: 0; } .site-nav__toggle-burger::before { top: -7px; } .site-nav__toggle-burger::after { top: 7px; } .site-nav.site-nav--open .site-nav__toggle-burger { background: transparent; } .site-nav.site-nav--open .site-nav__toggle-burger::before { top: 0; transform: rotate(45deg); } .site-nav.site-nav--open .site-nav__toggle-burger::after { top: 0; transform: rotate(-45deg); } @media (min-width: 960px) { .site-nav__toggle { display: none; } } /* ── Drawer: desktop = in-flow; mobile = full-viewport overlay (fixed to viewport, not header) ── */ .site-nav__drawer { display: flex; flex: 1; align-items: center; justify-content: center; gap: var(--nav-drawer-gap); min-width: 0; } .site-nav .nav-links { display: flex; flex-wrap: wrap; list-style: none; margin: 0; padding: 0; gap: clamp(14px, 2vw, 28px); align-items: center; justify-content: center; flex: 1; } .site-nav .nav-links a { font-size: 15px; font-weight: 500; letter-spacing: 0.05em; color: rgba(245, 245, 245, 0.65); text-decoration: none; transition: color 0.2s; padding: 8px 4px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; } .site-nav .nav-links a:hover, .site-nav .nav-links a.is-active { color: #f5f5f5; } .site-nav__drawer .nav-lang { flex-shrink: 0; } @media (min-width: 960px) { .site-nav__drawer { justify-content: space-between; align-items: center; gap: var(--nav-drawer-gap); flex-wrap: nowrap; } .site-nav__drawer .nav-links { flex: 1 1 auto; justify-content: center; min-width: 0; } .site-nav__drawer .nav-lang { flex-shrink: 0; } } @media (max-width: 959px) { .site-nav__drawer { flex: none; position: fixed; /* Viewport-anchored panel (must not live under a filtered ancestor) */ top: calc(env(safe-area-inset-top, 0px) + var(--nav-h)); left: 0; right: 0; bottom: 0; width: 100%; max-width: 100%; height: auto; max-height: none; min-height: 0; flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 0; padding: 16px max(16px, env(safe-area-inset-right)) max(32px, calc(20px + env(safe-area-inset-bottom, 0px))) max(16px, env(safe-area-inset-left)); background: rgba(20, 20, 20, 0.98); overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; touch-action: pan-y; opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(-8px); transition: opacity 0.25s ease, visibility 0.25s ease, transform 0.25s ease; z-index: 501; } .site-nav.site-nav--open .site-nav__drawer { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0); } .site-nav .nav-links { flex-direction: column; flex-wrap: nowrap; align-items: stretch; justify-content: flex-start; gap: 0; flex: 0 0 auto; min-height: min-content; } .site-nav .nav-links li { border-bottom: 1px solid rgba(245, 245, 245, 0.08); } .site-nav .nav-links a { justify-content: flex-start; width: 100%; padding: 16px 8px; font-size: 16px; } .site-nav__drawer .nav-lang { margin-top: 20px; padding-top: 12px; justify-content: center; flex-wrap: wrap; gap: 6px; } } /* ── Backdrop (mobile): first child of .site-nav in DOM ── */ .site-nav__backdrop { display: none; position: fixed; inset: 0; top: calc(env(safe-area-inset-top, 0px) + var(--nav-h)); background: rgba(0, 0, 0, 0.45); z-index: 0; opacity: 0; transition: opacity 0.25s ease; pointer-events: none; } @media (max-width: 959px) { .site-nav__backdrop.is-visible { display: block; opacity: 1; pointer-events: auto; } } @media (min-width: 960px) { .site-nav__backdrop { display: none !important; } } /* ── RTL (nav bar stays LTR; only the link row follows reading direction on desktop) ── */ @media (min-width: 960px) { body.is-rtl .site-nav .nav-links { direction: rtl; flex-direction: row; } } @media (max-width: 959px) { body.is-rtl .site-nav .nav-links { flex-direction: column; direction: ltr; } body.is-rtl .site-nav .nav-links a { justify-content: flex-end; text-align: right; } }