/** * ponten-menu.css — Vanilla fullscreen-menu open/close (no GSAP). * * Reproduces Bricksforge timeline 68294ece, toggled by `body.menu-is-open` * (set from ponten-menu.js): * - .header__main fades out * - #brx-content,#brx-footer blur(12px) * - .menu__link rise from translateY(100%) -> 0, staggered 0.1s * - .menu__languages-wrapper slide translateY(-100%) -> 0 * - .menu-wrapper,.menu__header fade in * - #eye solid black, mix-blend off (toggle stays legible) * circ.inOut ≈ cubic-bezier(0.785, 0.135, 0.15, 0.86). * * The per-link open stagger is driven by the `--stagger` custom property (set by * ponten-menu.js) applied ONLY to the transform transition, so link hover colour * stays snappy. */ /* --- transitions live on the rest state so OPEN and CLOSE both animate ------ */ .menu-wrapper, .menu__header { transition: opacity 0.2s ease, visibility 0.2s ease; } .header__main { transition: opacity 0.2s ease, visibility 0.2s ease; } #brx-content, #brx-footer { transition: filter 0.2s ease; } .menu__link { transform: translateY(100%); transition: transform 0.2s cubic-bezier(0.785, 0.135, 0.15, 0.86) var(--stagger, 0s), color 0.3s ease; } .menu__languages-wrapper { /* rest transform translateY(-100%) is already set by the theme CSS */ transition: transform 0.6s cubic-bezier(0.785, 0.135, 0.15, 0.86); } /* --- OPEN state ------------------------------------------------------------- */ body.menu-is-open .menu-wrapper, body.menu-is-open .menu__header { opacity: 1; visibility: visible; } body.menu-is-open .header__main { opacity: 0; visibility: hidden; } body.menu-is-open #brx-content, body.menu-is-open #brx-footer { filter: blur(12px); } body.menu-is-open .menu__link { transform: translateY(0); } body.menu-is-open .menu__languages-wrapper { transform: translateY(0); } /* The eye is the menu toggle: while the menu is open it must read clearly over * the blurred page no matter what's behind it. Force solid black and drop the * scroll-driven mix-blend (set inline by ponten-eye.js — hence !important on the * blend). Without this the eye would stay pink over the homepage hero. */ body.menu-is-open .eye, body.menu-is-open #eye { mix-blend-mode: normal !important; color: var(--black, #000); fill: var(--black, #000); } @media (prefers-reduced-motion: reduce) { .menu-wrapper, .menu__header, .header__main, #brx-content, #brx-footer, .menu__link, .menu__languages-wrapper { transition-duration: 0.001s; } } /* ========================================================================= * HEADER scroll-fade — re-implements the disabled Bricks Code element "lgnmbq". * ponten-header.js drives --header-scroll-progress (0 at top -> 1 past * --header-scroll-range px). The header chrome fades out as you scroll down and * back in as you return to the top. The eye (#eye, on ) and .header__right * are excluded; .header__menu-btn-text ("Menu") fades with the rest. * ========================================================================= */ :root { --header-scroll-range: 80; } [data-header-scroll-target] { --header-scroll-progress: 0; } [data-header-scroll-target] > *:not(.eye):not(#eye):not(.header__right), [data-header-scroll-target] .header__menu-btn-text { opacity: calc(1 - var(--header-scroll-progress, 0)); will-change: opacity; } @media (prefers-reduced-motion: reduce) { [data-header-scroll-target] > * { opacity: 1; will-change: auto; } } /* CSS-ONLY path (no JS): scroll-driven animation drives the same fade where the * browser supports it (Chromium/Brave, Firefox). ponten-header.js detects this * and does NOT run — it's the fallback only for Safari (no scroll-timeline yet). * The animation overrides the calc() opacity above; pointer-events flips off on * the faded chrome (discrete -> switches mid-range); the eye is excluded. */ @supports (animation-timeline: scroll()) { @keyframes zs-header-fade { to { opacity: 0; pointer-events: none; } } [data-header-scroll-target] > *:not(.eye):not(#eye):not(.header__right), [data-header-scroll-target] .header__menu-btn-text { animation: zs-header-fade linear both; animation-timeline: scroll(root); animation-range: 0 80px; /* matches --header-scroll-range default */ } } @media (prefers-reduced-motion: reduce) { @supports (animation-timeline: scroll()) { [data-header-scroll-target] > * { animation: none; } } }