/* ========================================================= KS Dynamics — Header + Mobile Menu (GLASS) — menu-v2 (v6 fix) Goals: - Desktop & Mobile: glass (no solid/dark switch) - iOS: overlay hosted in to improve backdrop sampling - Menu open: header icons/logo fully disappear (NO X in header) - Close: restore scroll first, then reveal header (no jump) ========================================================= */ :root{ --ks-header-h: 54px; --ks-header-pad-x: 18px; /* Header glass */ --ks-header-bg: rgba(10,14,22,.18); --ks-header-bg-scrolled: rgba(10,14,22,.20); --ks-header-blur: 18px; --ks-shadow: 0 10px 40px rgba(0,0,0,.22); /* Icon */ --ks-icon: rgba(255,255,255,.92); --ks-icon-hover: rgba(255,255,255,.98); /* Overlay glass: almost clear */ --ks-backdrop-bg: rgba(10,14,22,.18); --ks-backdrop-blur: 28px; --ks-drawer-bg: rgba(10,14,22,.10); --ks-drawer-bg-desktop: rgba(10,14,22,.12); --ks-drawer-blur: 24px; } /* ========================= HEADER ========================= */ #ks-header.ks-header{ position: fixed; top: 0; left: 0; right: 0; height: var(--ks-header-h); padding: 0 var(--ks-header-pad-x); z-index: 8000; display: grid; grid-template-columns: 72px 1fr 72px; align-items: center; background: var(--ks-header-bg); backdrop-filter: blur(var(--ks-header-blur)) saturate(130%); -webkit-backdrop-filter: blur(var(--ks-header-blur)) saturate(130%); box-shadow: var(--ks-shadow); transition: background .18s ease; } #ks-header.ks-header.is-scrolled{ background: var(--ks-header-bg-scrolled); } @media (min-width: 861px){ #ks-header.ks-header{ transition: background .18s ease, transform .46s cubic-bezier(.22,.82,.22,1), opacity .32s ease; will-change: transform, opacity; } #ks-header.ks-header.ks-desktop-menu-sequence{ transform: translateY(calc(-1 * var(--ks-header-h) - 14px)); opacity: 0; pointer-events: none; } #ks-header.ks-header.ks-desktop-menu-sequence .ks-header-left, #ks-header.ks-header.ks-desktop-menu-sequence .ks-header-center, #ks-header.ks-header.ks-desktop-menu-sequence .ks-header-right{ opacity: 1 !important; transform: none !important; transition-duration: .22s !important; } } #ks-header .ks-header-left, #ks-header .ks-header-center, #ks-header .ks-header-right{ display: flex; align-items: center; justify-content: center; transition: opacity .22s ease, transform .22s ease; will-change: opacity, transform; } /* Logo (safe sizing) */ #ks-header .ks-logo-link{ display: inline-flex; align-items: center; justify-content: center; height: 40px; padding: 0 8px; line-height: 0; } #ks-header .ks-logo{ width: auto !important; height: 32px !important; max-width: 160px !important; object-fit: contain !important; display: block !important; opacity: .96; filter: drop-shadow(0 10px 26px rgba(0,0,0,.35)); } /* Header buttons: bare */ #ks-header .ks-icon-btn{ width: 48px; height: 48px; border: 0; background: transparent; border-radius: 0; color: var(--ks-icon); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: transform .12s ease, color .12s ease; filter: drop-shadow(0 12px 28px rgba(0,0,0,.45)); } #ks-header .ks-icon-btn:hover{ color: var(--ks-icon-hover); } #ks-header .ks-icon-btn:active{ transform: scale(.96); } #ks-header .ks-icon-btn svg{ width: 26px; height: 28px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; opacity: .98; } /* ========================= HEADER "MENU MODE" - Menu open: header fully disappears (no header visible under menu) - Close: staged reveal helper ========================= */ #ks-header.ks-menu-mode{ pointer-events: none; } #ks-header.ks-menu-mode .ks-header-left{ opacity: 0; transform: translateX(-10px); transition-delay: 0s; } #ks-header.ks-menu-mode .ks-header-center{ opacity: 0; transform: translateY(-6px); transition-delay: .24s; } #ks-header.ks-menu-mode .ks-header-right{ opacity: 0; transform: translateX(10px); transition-delay: .24s; } /* instant hide on open (prevents logo flash while menu is opening) */ #ks-header.ks-menu-mode .ks-header-left, #ks-header.ks-menu-mode .ks-header-center, #ks-header.ks-menu-mode .ks-header-right{ transition-duration: 0s !important; transition-delay: 0s !important; } /* staged reveal on close (after scroll restore) */ #ks-header.ks-menu-reveal .ks-header-left{ transition-delay: .36s; } #ks-header.ks-menu-reveal .ks-header-center{ transition-delay: .10s; } #ks-header.ks-menu-reveal .ks-header-right{ transition-delay: 0s; } /* instant reveal on close - search + logo: instant - burger: tiny delay so it doesn't "pop" too sharply */ #ks-header.ks-reveal-instant .ks-header-left, #ks-header.ks-reveal-instant .ks-header-center{ transition-duration: 0s !important; transition-delay: 0s !important; opacity: 1 !important; transform: none !important; } #ks-header.ks-reveal-instant .ks-header-right{ transition-duration: 0s !important; transition-delay: .06s !important; /* minimal delay for burger */ opacity: 1 !important; transform: none !important; } /* ========================= OVERLAY HOST (in ) ========================= */ #ks-overlay-host{ position: fixed; inset: 0; z-index: 9000; pointer-events: none; } /* ========================= BACKDROP + DRAWER ========================= */ #ks-backdrop.ks-backdrop{ position: absolute; inset: 0; --ks-backdrop-bg: rgba(10,14,22,.18); --ks-backdrop-blur: 28px; --ks-backdrop-blur: 28px; opacity: 0; transition: opacity .55s ease; pointer-events: none; } #ks-backdrop.ks-backdrop.open{ opacity: 1; pointer-events: auto; } /* Desktop drawer — GLASS (no solid) */ #ks-drawer.ks-drawer{ position: absolute; top: 0; right: 0; height: 100%; width: min(380px, 92vw); display: flex; flex-direction: column; background: var(--ks-drawer-bg-desktop); backdrop-filter: blur(var(--ks-drawer-blur)) saturate(140%); -webkit-backdrop-filter: blur(var(--ks-drawer-blur)) saturate(140%); border-left: 1px solid rgba(255,255,255,.10); transform: translateX(110%); transition: transform .55s ease; pointer-events: none; } #ks-drawer.ks-drawer.open{ transform: translateX(0); pointer-events: auto; } /* optional: hide any "Menu" label/title inside drawer top (safe if element doesn't exist) */ #ks-drawer .ks-drawer-title, #ks-drawer .ks-drawer-label, #ks-drawer .ks-drawer-brand{ display: none !important; } .ks-drawer-top{ padding: 16px 16px 12px; display: flex; align-items: center; justify-content: flex-end; } /* Drawer top: keep only close button (remove any 'Menu' label) */ #ks-drawer .ks-drawer-top{ color: transparent; } #ks-drawer .ks-drawer-top > :not(#btn-drawer-close){ display: none !important; } #btn-drawer-close.ks-icon-btn{ color: rgba(255,255,255,.92); } /* X — only inside menu */ #btn-drawer-close.ks-icon-btn{ width: 52px; height: 52px; border: 0; background: transparent; border-radius: 0; color: rgba(255,255,255,.92); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; -webkit-tap-highlight-color: transparent; filter: drop-shadow(0 12px 28px rgba(0,0,0,.35)); } #btn-drawer-close.ks-icon-btn svg{ width: 30px; height: 30px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; } #ks-drawer .ks-drawer-nav{ display: flex; flex-direction: column; padding: 14px 16px 18px; gap: 10px; } #ks-drawer .ks-drawer-nav a{ border-radius: 14px; border: 1px solid rgba(255,255,255,.10); background: rgba(255,255,255,.04); padding: 14px 14px; font-weight: 800; letter-spacing: .02em; color: rgba(255,255,255,.92); text-decoration: none; transition: background .24s ease, border-color .24s ease, opacity .28s ease, transform .28s ease; } /* ========================= MOBILE: fullscreen diagonal reveal ========================= */ @media (max-width: 860px){ :root{ --ks-header-pad-x: 14px; } #ks-header.ks-header{ grid-template-columns: 64px 1fr 64px; } #ks-header .ks-logo{ height: 28px !important; max-width: 140px !important; } #ks-drawer.ks-drawer{ left: 0; right: 0; width: 100%; max-width: 100%; border-left: 0; background: var(--ks-drawer-bg); backdrop-filter: blur(var(--ks-drawer-blur)) saturate(150%); -webkit-backdrop-filter: blur(var(--ks-drawer-blur)) saturate(150%); transform: none; /* use clip-path */ will-change: clip-path; pointer-events: none; clip-path: polygon(0 0, 0.5% 0, 0 0.5%, 0 0); transition: clip-path 1.00s cubic-bezier(.2,.8,.2,1); } #ks-drawer.ks-drawer.open{ clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); pointer-events: auto; } #ks-drawer .ks-drawer-top{ padding-top: calc(env(safe-area-inset-top) + 14px); padding-left: 18px; padding-right: 18px; } #ks-drawer .ks-drawer-nav{ padding: 22px 28px 26px; gap: 32px; } #ks-drawer .ks-drawer-nav a{ border: 0; background: transparent; border-radius: 0; padding: 6px 0; font-weight: 900; font-size: 34px; line-height: 1.08; /* Royce-style text reveal (no letter-spacing animation to avoid iOS stretching) */ opacity: 0; transform: translateY(-22px); filter: blur(8px); will-change: opacity, transform, filter; transition: opacity 0.55s cubic-bezier(.22,1,.36,1), transform 0.70s cubic-bezier(.22,1,.36,1), filter 0.70s cubic-bezier(.22,1,.36,1); } #ks-drawer.ks-drawer.open .ks-drawer-nav a{ opacity: 1; transform: translateY(0); filter: blur(0); } #ks-drawer.ks-drawer.open .ks-drawer-nav a:nth-child(1){ transition-delay: .18s; } #ks-drawer.ks-drawer.open .ks-drawer-nav a:nth-child(2){ transition-delay: .26s; } #ks-drawer.ks-drawer.open .ks-drawer-nav a:nth-child(3){ transition-delay: .34s; } #ks-drawer.ks-drawer.open .ks-drawer-nav a:nth-child(4){ transition-delay: .42s; } #ks-drawer.ks-drawer.open .ks-drawer-nav a:nth-child(5){ transition-delay: .50s; } #ks-drawer.ks-drawer.open .ks-drawer-nav a:nth-child(6){ transition-delay: .58s; } /* Close: reverse order, hide text first (then JS closes diagonal overlay) */ #ks-drawer.ks-drawer.open.closing .ks-drawer-nav a{ opacity: 0; transform: translateY(-22px); filter: blur(8px); } #ks-drawer.ks-drawer.open.closing .ks-drawer-nav a:nth-child(1){ transition-delay: .58s; } #ks-drawer.ks-drawer.open.closing .ks-drawer-nav a:nth-child(2){ transition-delay: .50s; } #ks-drawer.ks-drawer.open.closing .ks-drawer-nav a:nth-child(3){ transition-delay: .42s; } #ks-drawer.ks-drawer.open.closing .ks-drawer-nav a:nth-child(4){ transition-delay: .34s; } #ks-drawer.ks-drawer.open.closing .ks-drawer-nav a:nth-child(5){ transition-delay: .26s; } #ks-drawer.ks-drawer.open.closing .ks-drawer-nav a:nth-child(6){ transition-delay: .18s; } } /* ========================= MOBILE MENU — typography (requested) - clean text list, no pills - system-like font (SF on iOS) ========================= */ @media (max-width: 860px){ #ks-drawer .ks-drawer-top{ padding: 22px 20px 0 !important; justify-content: flex-end !important; } #ks-drawer .ks-drawer-nav{ padding: 56px 0 0 44px !important; gap: 0 !important; } #ks-drawer .ks-drawer-nav a{ background: transparent !important; border: 0 !important; border-radius: 0 !important; padding: 0 !important; font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important; font-weight: 700 !important; font-size: 34px !important; line-height: 1.15 !important; color: rgba(255,255,255,.92) !important; text-decoration: none !important; } #ks-drawer .ks-drawer-nav a + a{ margin-top: 34px !important; } #ks-drawer .ks-drawer-nav a:hover, #ks-drawer .ks-drawer-nav a:focus{ background: transparent !important; border-color: transparent !important; } } /* Scroll lock helper */ html.ks-scroll-locked, html.ks-scroll-locked body{ overflow: hidden !important; } /* ========================================================= MOBILE MENU — "Royce-style" text reveal - Open: each item drops in from the top with soft blur - Close: each item exits downward, starting from the bottom Requires JS adding .closing on #ks-drawer during close (ks-header.v12.js) ========================================================= */ @media (max-width: 860px){ /* Base (closed) state — force visible animation (override older X-animations) */ #ks-drawer .ks-drawer-nav a{ opacity: 0 !important; transform: translateY(-24px) !important; filter: blur(12px) !important; transition-property: opacity, transform, filter !important; transition-duration: 780ms, 1200ms, 1200ms !important; transition-timing-function: cubic-bezier(.22,.82,.22,1), cubic-bezier(.16,.84,.26,1), cubic-bezier(.16,.84,.26,1) !important; transition-delay: 0s !important; will-change: opacity, transform, filter; } /* OPEN state */ #ks-drawer.ks-drawer.open .ks-drawer-nav a{ opacity: 1 !important; transform: translateY(0) !important; filter: blur(0px) !important; } /* OPEN stagger: top -> bottom (starts after diagonal reveal begins) */ #ks-drawer.ks-drawer.open .ks-drawer-nav a:nth-child(1){ transition-delay: .18s; } #ks-drawer.ks-drawer.open .ks-drawer-nav a:nth-child(2){ transition-delay: .26s; } #ks-drawer.ks-drawer.open .ks-drawer-nav a:nth-child(3){ transition-delay: .34s; } #ks-drawer.ks-drawer.open .ks-drawer-nav a:nth-child(4){ transition-delay: .42s; } #ks-drawer.ks-drawer.open .ks-drawer-nav a:nth-child(5){ transition-delay: .50s; } #ks-drawer.ks-drawer.open .ks-drawer-nav a:nth-child(6){ transition-delay: .58s; } /* CLOSE state: reverse of OPEN (moves back UP into blur + tracking), start from bottom */ #ks-drawer.ks-drawer.closing .ks-drawer-nav a{ opacity: 0 !important; transform: translateY(-26px) !important; filter: blur(12px) !important; } /* CLOSE stagger: bottom -> top */ #ks-drawer.ks-drawer.closing .ks-drawer-nav a:nth-child(6){ transition-delay: .06s !important; } #ks-drawer.ks-drawer.closing .ks-drawer-nav a:nth-child(5){ transition-delay: .18s !important; } #ks-drawer.ks-drawer.closing .ks-drawer-nav a:nth-child(4){ transition-delay: .30s !important; } #ks-drawer.ks-drawer.closing .ks-drawer-nav a:nth-child(3){ transition-delay: .42s !important; } #ks-drawer.ks-drawer.closing .ks-drawer-nav a:nth-child(2){ transition-delay: .54s !important; } #ks-drawer.ks-drawer.closing .ks-drawer-nav a:nth-child(1){ transition-delay: .66s !important; } } @media (prefers-reduced-motion: reduce){ #ks-drawer .ks-drawer-nav a{ transition: none !important; filter: none !important; transform: none !important; opacity: 1 !important; } } /* ========================================================= OPEN SEQUENCE — mirror CLOSE - Open: diagonal reveal first, then text reveals top -> bottom - Delays match CLOSE delays (reversed) Requires JS adding .opening on #ks-drawer during open ========================================================= */ @media (max-width: 860px){ /* Keep text hidden while diagonal is opening */ #ks-drawer.ks-drawer.open.opening .ks-drawer-nav a{ opacity: 0 !important; transform: translateY(-24px) !important; filter: blur(12px) !important; transition-delay: 0s !important; } /* OPEN stagger: top -> bottom (exact mirror of CLOSE delays) */ #ks-drawer.ks-drawer.open:not(.opening) .ks-drawer-nav a:nth-child(1){ transition-delay: .06s !important; } #ks-drawer.ks-drawer.open:not(.opening) .ks-drawer-nav a:nth-child(2){ transition-delay: .18s !important; } #ks-drawer.ks-drawer.open:not(.opening) .ks-drawer-nav a:nth-child(3){ transition-delay: .30s !important; } #ks-drawer.ks-drawer.open:not(.opening) .ks-drawer-nav a:nth-child(4){ transition-delay: .42s !important; } #ks-drawer.ks-drawer.open:not(.opening) .ks-drawer-nav a:nth-child(5){ transition-delay: .54s !important; } #ks-drawer.ks-drawer.open:not(.opening) .ks-drawer-nav a:nth-child(6){ transition-delay: .66s !important; } } /* ========================================================= CLOSE TUNING (v25) - Slightly slower close diagonal + text exit ========================================================= */ @media (max-width: 860px){ /* Slower diagonal close (clip-path) while .closing is present */ #ks-drawer.ks-drawer.closing{ transition: clip-path 1.18s cubic-bezier(.2,.8,.2,1) !important; } /* Slightly slower text exit on close (open stays unchanged) */ #ks-drawer.ks-drawer.closing .ks-drawer-nav a{ transition-duration: 860ms, 1350ms, 1350ms !important; } } /* ========================================================= DESKTOP MENU — local blur only (menu area only) - Desktop keeps page visible as-is - No full-page backdrop blur/dim - Glass stays only inside drawer area - Cleaner text list, less "button card" look ========================================================= */ @media (min-width: 861px){ /* Do not blur/dim the whole page on desktop */ #ks-backdrop.ks-backdrop{ background: transparent !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; opacity: 1 !important; transition: none !important; } #ks-backdrop.ks-backdrop.open{ opacity: 1 !important; pointer-events: auto; } /* Menu panel itself carries the glass */ #ks-drawer.ks-drawer{ width: min(420px, 92vw); background: rgba(10,14,22,.14) !important; backdrop-filter: blur(30px) saturate(145%) !important; -webkit-backdrop-filter: blur(30px) saturate(145%) !important; border-left: 1px solid rgba(255,255,255,.10) !important; box-shadow: -30px 0 60px rgba(0,0,0,.22) !important; transform: translateX(110%); transition: transform .96s cubic-bezier(.22,.82,.22,1) !important; } #ks-drawer .ks-drawer-top{ padding: 20px 22px 8px !important; justify-content: flex-end !important; } /* Cleaner Rolls-like desktop list */ #ks-drawer .ks-drawer-nav{ padding: 24px 34px 30px !important; gap: 0 !important; } #ks-drawer .ks-drawer-nav a{ background: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; padding: 0 !important; font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important; font-weight: 650 !important; font-size: 33px !important; line-height: 1.12 !important; letter-spacing: -.015em !important; color: rgba(255,255,255,.92) !important; text-decoration: none !important; opacity: 0 !important; transform: translateX(20px) !important; filter: blur(10px) !important; will-change: opacity, transform, filter; transition: color .18s ease, opacity .58s cubic-bezier(.22,1,.36,1), transform .92s cubic-bezier(.22,1,.36,1), filter .92s cubic-bezier(.22,1,.36,1) !important; } #ks-drawer .ks-drawer-nav a + a{ margin-top: 28px !important; } #ks-drawer .ks-drawer-nav a:hover, #ks-drawer .ks-drawer-nav a:focus{ background: transparent !important; border-color: transparent !important; color: rgba(255,255,255,.98) !important; } /* Keep text hidden while panel is sliding in */ #ks-drawer.ks-drawer.open.opening .ks-drawer-nav a{ opacity: 0 !important; transform: translateX(20px) !important; filter: blur(10px) !important; transition-delay: 0s !important; } /* Open reveal */ #ks-drawer.ks-drawer.open .ks-drawer-nav a{ opacity: 1 !important; transform: translateX(0) !important; filter: blur(0) !important; } #ks-drawer.ks-drawer.open:not(.opening) .ks-drawer-nav a:nth-child(1){ transition-delay: .18s !important; } #ks-drawer.ks-drawer.open:not(.opening) .ks-drawer-nav a:nth-child(2){ transition-delay: .30s !important; } #ks-drawer.ks-drawer.open:not(.opening) .ks-drawer-nav a:nth-child(3){ transition-delay: .42s !important; } #ks-drawer.ks-drawer.open:not(.opening) .ks-drawer-nav a:nth-child(4){ transition-delay: .54s !important; } #ks-drawer.ks-drawer.open:not(.opening) .ks-drawer-nav a:nth-child(5){ transition-delay: .66s !important; } #ks-drawer.ks-drawer.open:not(.opening) .ks-drawer-nav a:nth-child(6){ transition-delay: .78s !important; } #ks-drawer.ks-drawer.open:not(.opening) .ks-drawer-nav a:nth-child(7){ transition-delay: .90s !important; } /* Close reveal */ #ks-drawer.ks-drawer.closing .ks-drawer-nav a{ opacity: 0 !important; transform: translateX(20px) !important; filter: blur(10px) !important; } #ks-drawer.ks-drawer.closing .ks-drawer-nav a:nth-child(7){ transition-delay: .06s !important; } #ks-drawer.ks-drawer.closing .ks-drawer-nav a:nth-child(6){ transition-delay: .18s !important; } #ks-drawer.ks-drawer.closing .ks-drawer-nav a:nth-child(5){ transition-delay: .30s !important; } #ks-drawer.ks-drawer.closing .ks-drawer-nav a:nth-child(4){ transition-delay: .42s !important; } #ks-drawer.ks-drawer.closing .ks-drawer-nav a:nth-child(3){ transition-delay: .54s !important; } #ks-drawer.ks-drawer.closing .ks-drawer-nav a:nth-child(2){ transition-delay: .66s !important; } #ks-drawer.ks-drawer.closing .ks-drawer-nav a:nth-child(1){ transition-delay: .78s !important; } } /* ========================================================= DESKTOP MENU — consistent glass tone Why: - On pages where the area behind the drawer is mostly dark/empty, pure live blur naturally collapses into a flat dark panel. - This layer keeps the desktop drawer visually stable while still using local blur only inside the menu area. ========================================================= */ @media (min-width: 861px){ #ks-drawer.ks-drawer{ background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.018)), rgba(10,14,22,.18) !important; backdrop-filter: blur(34px) saturate(150%) !important; -webkit-backdrop-filter: blur(34px) saturate(150%) !important; border-left: 1px solid rgba(255,255,255,.12) !important; box-shadow: -30px 0 60px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.05) !important; overflow: hidden; } #ks-drawer.ks-drawer::before{ content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(135deg, rgba(255,255,255,.07), transparent 34%), radial-gradient(circle at 20% 15%, rgba(255,255,255,.06), transparent 30%), radial-gradient(circle at 72% 28%, rgba(255,255,255,.045), transparent 24%); opacity: .9; } #ks-drawer.ks-drawer::after{ content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 1px; pointer-events: none; background: linear-gradient(180deg, rgba(255,255,255,.24), rgba(255,255,255,.06)); opacity: .55; } #ks-drawer .ks-drawer-top, #ks-drawer .ks-drawer-nav{ position: relative; z-index: 1; } } /* ========================================================= DESKTOP FINAL VISUAL FIX Goal: - keep the current working open/close logic untouched - outside the drawer: no dimming, no blur, no visual replacement - only the drawer itself stays glass / blurred ========================================================= */ @media (min-width: 861px){ /* backdrop stays only as invisible click-catcher */ #ks-backdrop.ks-backdrop{ background: transparent !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; opacity: 0 !important; transition: none !important; pointer-events: none !important; } #ks-backdrop.ks-backdrop.open{ background: transparent !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; opacity: 0 !important; pointer-events: auto !important; } /* keep the panel glass, but do not let it visually replace the page */ #ks-drawer.ks-drawer{ background: rgba(10,14,22,.10) !important; backdrop-filter: blur(28px) saturate(145%) !important; -webkit-backdrop-filter: blur(28px) saturate(145%) !important; border-left: 1px solid rgba(255,255,255,.10) !important; box-shadow: -24px 0 56px rgba(0,0,0,.16) !important; } /* remove synthetic tone layers that make the menu look like a separate dark wall */ #ks-drawer.ks-drawer::before, #ks-drawer.ks-drawer::after{ content: none !important; display: none !important; } } /* ========================================================= SAFE DESKTOP OVERRIDE — rollback-safe fix - restores header behavior - keeps desktop visual changes only inside right drawer ========================================================= */ @media (min-width: 861px){ #ks-overlay-host{ background: transparent !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; isolation: isolate !important; } #ks-backdrop.ks-backdrop, #ks-backdrop.ks-backdrop.open{ background: transparent !important; opacity: 0 !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; filter: none !important; mix-blend-mode: normal !important; } #ks-drawer.ks-drawer{ position: fixed !important; top: 0 !important; right: 0 !important; bottom: 0 !important; height: 100dvh !important; width: min(420px, 92vw) !important; overflow: hidden !important; contain: layout paint !important; isolation: isolate !important; background: rgba(10,14,22,.18) !important; backdrop-filter: blur(26px) saturate(140%) !important; -webkit-backdrop-filter: blur(26px) saturate(140%) !important; border-left: 1px solid rgba(255,255,255,.10) !important; box-shadow: -24px 0 56px rgba(0,0,0,.16) !important; } #ks-drawer.ks-drawer::before, #ks-drawer.ks-drawer::after{ content: none !important; display: none !important; } #ks-drawer .ks-drawer-top, #ks-drawer .ks-drawer-nav{ position: relative; z-index: 1; } } /* ========================================================= DESKTOP MENU — same glass density as header ========================================================= */ @media (min-width: 861px){ #ks-drawer.ks-drawer{ position: fixed !important; top: 0 !important; right: 0 !important; bottom: 0 !important; height: 100dvh !important; width: min(420px, 92vw) !important; background: transparent !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; border-left: 0 !important; box-shadow: none !important; overflow: hidden !important; isolation: isolate !important; contain: layout paint !important; } /* top zone above header line stays visually clean */ #ks-drawer.ks-drawer::before{ content: "" !important; display: block !important; position: absolute; top: var(--ks-header-h) !important; right: 0 !important; bottom: 0 !important; left: 0 !important; pointer-events: none !important; /* same glass recipe feel as header, but a touch denser for visual match */ background: linear-gradient(180deg, rgba(255,255,255,.028), rgba(255,255,255,.010)), rgba(10,14,22,.20) !important; backdrop-filter: blur(18px) saturate(130%) !important; -webkit-backdrop-filter: blur(18px) saturate(130%) !important; box-shadow: -24px 0 56px rgba(0,0,0,.16), inset 0 1px 0 rgba(255,255,255,.03) !important; } #ks-drawer.ks-drawer::after{ content: "" !important; display: block !important; position: absolute; top: var(--ks-header-h) !important; bottom: 0 !important; left: 0 !important; width: 1px !important; pointer-events: none !important; background: rgba(255,255,255,.10) !important; } #ks-drawer .ks-drawer-top, #ks-drawer .ks-drawer-nav{ position: relative !important; z-index: 1 !important; } } /* ========================================================= MOBILE MENU - dynamic stagger JS writes delays from the actual menu item count, so the animation stays correct when Support or future links are added. ========================================================= */ @media (max-width: 860px){ #ks-drawer.ks-drawer.open:not(.opening) .ks-drawer-nav a:nth-child(n){ transition-delay: var(--ks-menu-open-delay, .06s) !important; } #ks-drawer.ks-drawer.closing .ks-drawer-nav a:nth-child(n), #ks-drawer.ks-drawer.open.closing .ks-drawer-nav a:nth-child(n){ transition-delay: var(--ks-menu-close-delay, .06s) !important; } } /* KSD: desktop drawer fills top after header slides away */ @media (min-width: 861px){ #ks-drawer.ks-drawer::before{ top: 0 !important; } #ks-drawer.ks-drawer::after{ top: 0 !important; } } /* KSD: desktop drawer fills top after header slides away END */