/* === AI Videos v5.8 consolidated (parent) === - Much faster rails (adjustable) - Solid, fixed mobile menu overlay (agnostic to theme nav) - Body scroll lock while menu open - No parallax & no side-scroll ================================================ */ :root{ /* Keep header/brand comfort */ --logo-h: clamp(74px, 11svh, 128px); --logo-pad-y: 4px; --header-h: calc(var(--logo-h) + (2 * var(--logo-pad-y))); --header-pad-x: clamp(12px, 2.6vw, 20px); --header-gap: clamp(8px, 2.2vw, 18px); /* Rails: faster defaults */ --film-rail: 18px; --film-speed: 2s; /* desktop speed (lower=faster) */ --rail-top-y: calc(12svh - var(--film-rail)); --rail-bottom-y: calc(95svh - var(--film-rail)); /* Intro spacing */ --intro-offset: 0svh; --intro-pad-top: clamp(8svh, 10svh, 14svh); } @media (max-width: 768px){ :root{ --logo-h: clamp(62px, 13svh, 118px); --logo-pad-y: 3px; --film-rail: 16px; --film-speed: 1.6s; /* mobile even faster */ --rail-top-y: calc(14svh - var(--film-rail)); --rail-bottom-y: calc(96svh - var(--film-rail)); --intro-pad-top: clamp(7svh, 9svh, 12svh); } } /* Global safety */ html, body{ max-width:100%; overflow-x:hidden; } /* Header */ .site-header{ position: sticky; top: 0; z-index: 20000; height: var(--header-h); background: rgba(0,0,0,0.66); backdrop-filter: blur(6px); border-bottom: 1px solid rgba(255,255,255,0.06); } .site-header .header-inner, .site-header .wrap, .site-header .container{ height: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--header-gap); padding: var(--logo-pad-y) var(--header-pad-x); } .site-header .brand img, .site-header .brand svg{ max-height: var(--logo-h); height: var(--logo-h); width: auto; display: block; } .main-navigation a, .site-nav a{ padding: 6px 8px; line-height: 1; } /* HERO */ .hero{ position:relative; min-height:100svh; overflow:visible; isolation:isolate; } #aivideos-hero, #aivideos-hero canvas, #aivideos-hero > *{ position:relative; z-index:2; } /* Rails: CSS-only horizontal loop */ .hero::before, .hero::after{ content:""; position:absolute; left:0; width:100vw; height:var(--film-rail); z-index:1; pointer-events:none; background: radial-gradient(circle at 50% 50%, #fff 54%, transparent 55%) 0 0 / clamp(120px, 16vw, 240px) 100% repeat-x, linear-gradient(#1f1f1f,#1f1f1f) 0 0 / 100% 100% no-repeat; animation: v58RailScroll var(--film-speed) linear infinite; filter: drop-shadow(0 0 0.5px #222); } .hero::before{ top: var(--rail-top-y); } .hero::after { top: var(--rail-bottom-y); bottom:auto; } @keyframes v58RailScroll{ from { background-position: 0 0, 0 0; } to { background-position: calc(-1 * clamp(120px, 16vw, 240px)) 0, 0 0; } } /* Intro below hero with soft blend */ .section#intro{ position:relative; z-index:3; background: transparent !important; margin-top: var(--intro-offset); padding-top: var(--intro-pad-top); } .section#intro::before{ content:""; position:absolute; inset:0 0 auto 0; height: clamp(10svh, 12svh, 16svh); background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0.22) 45%, rgba(0,0,0,0.5) 80%, rgba(0,0,0,0.8) 100%); pointer-events:none; z-index:-1; } /* ===== Mobile menu overlay (agnostic) ===== */ @media (max-width: 900px){ /* When nav-open is set on , force the menu panel fixed */ html.nav-open body{ overflow: hidden; } html.nav-open .site-header{ z-index: 22000; } /* Target common menu wrappers */ html.nav-open .wp-block-navigation__responsive-container, html.nav-open .main-navigation .menu, html.nav-open .site-nav .menu, html.nav-open nav .menu{ position: fixed !important; top: var(--header-h); left: 0; right: 0; max-height: calc(100svh - var(--header-h)); overflow: auto; background: rgba(0,0,0,0.96); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); padding: 16px 18px; box-shadow: 0 8px 30px rgba(0,0,0,.45); z-index: 22001; display: block !important; visibility: visible !important; opacity: 1 !important; transform: none !important; } /* Menu items readable and tappable */ .main-navigation a, .site-nav a, nav .menu a, .wp-block-navigation__responsive-container a{ display:block; padding: 14px 10px; color:#fff !important; text-decoration:none; border-radius:8px; } .main-navigation a:hover, .site-nav a:hover, nav .menu a:hover, .wp-block-navigation__responsive-container a:hover{ background: rgba(255,255,255,0.08); } /* Keep toggles above panel */ .menu-toggle, .nav-toggle, .mobile-menu-toggle, .wp-block-navigation__responsive-container-open, .wp-block-navigation__responsive-container-close{ position: relative; z-index: 22002; } }