/** * Page transition layers: curtain → #pageMorphRoot (clip-path iris) → #pageMorphInner. * Scroll is the normal document/window scroll (Lenis smooths html); #pageMorphRoot is in-flow, not a scrollport. * * MORPH / IRIS RING COLOR (what you see outside the circle while it opens): * Change only --page-morph-backdrop below (one place). It fills the curtain + page canvas * so there is no white flash. JS does not set this color. */ :root { /* ← Edit this hex/rgb to change the transition “ring” / backdrop color */ --page-morph-backdrop: #27421d; } /* * One vertical scrollbar only: the viewport scrolls on . * If or #pageMorphRoot also get overflow-y:auto/scroll, Chromium draws a second bar * just left of ’s bar (~1 scrollbar width) — looks like “two window scrollbars”. */ html { margin: 0; padding: 0; width: 100%; min-height: 100%; min-height: 100dvh; height: auto; background-color: var(--page-morph-backdrop); scrollbar-gutter: auto; overflow-x: hidden; overflow-y: auto; overscroll-behavior: none; box-sizing: border-box; } body { margin: 0; padding: 0; width: 100%; min-height: 100%; min-height: 100dvh; background-color: var(--page-morph-backdrop); overflow-x: hidden; overflow-y: auto !important; overscroll-behavior: none; } /* iOS momentum scroll */ body { -webkit-overflow-scrolling: touch; } /* Desktop: keep single viewport scrollbar (no right-side gap strip). */ @media (hover: hover) and (pointer: fine) { body { overflow-y: hidden !important; } } /* First paint after in-site nav: match JS enter “from” state (no flash before GSAP) */ html.page-morph-enter-pending #pageMorphRoot { clip-path: circle(30vw at 50vw 50vh); -webkit-clip-path: circle(30vw at 50vw 50vh); } html.page-morph-enter-pending #pageMorphInner { opacity: 0.82; transform: translate3d(0, 14px, 0); will-change: opacity; } @media (prefers-reduced-motion: reduce) { html.page-morph-enter-pending #pageMorphRoot { clip-path: none; -webkit-clip-path: none; } html.page-morph-enter-pending #pageMorphInner { opacity: 1; transform: none; will-change: auto; } } /* Full-screen layer *under* the clipped content — this is the visible morph color */ #pageTransitionCurtain { position: fixed; inset: 0; z-index: 0; box-sizing: border-box; background: var(--page-morph-backdrop); pointer-events: none; } /* * In-flow morph shell — must NOT be a scrollport. * Do not mix overflow-x: hidden with overflow-y: visible: per CSS, “visible” becomes “auto” on * the other axis, so #pageMorphRoot would get a vertical scrollbar nested inside ’s bar. * Horizontal clipping is handled on html/body instead. */ #pageMorphRoot { position: relative; z-index: 1; width: 100%; min-height: 100%; min-height: 100dvh; box-sizing: border-box; overflow: visible !important; } #pageMorphInner { position: relative; min-height: 100%; overflow: visible !important; } #main-wrapper { overflow: visible !important; } /* * Header is position:fixed. Do not use width:100vw here: vw includes the vertical scrollbar * gutter, so the bar is wider than the layout viewport and overlaps the html scrollbar. * Pin with left/right so the header matches the layout viewport (scrollbar stays usable). */ #pageMorphRoot #siteHeader { left: 0 !important; right: 0 !important; width: auto !important; max-width: none; box-sizing: border-box; } /* * `page-morph-tx--busy` is toggled on only while the enter animation runs. * Use: wait cursor, block clicks (via body), block touch overscroll; wheel/touch scroll in JS. */ html.page-morph-tx--busy { cursor: wait; } @media (prefers-reduced-motion: reduce) { #pageMorphRoot { will-change: auto; } } /* Mobile hard-fallback: always allow native page scrolling */ @media (max-width: 1024px), (hover: none), (pointer: coarse) { html, body { height: auto !important; max-height: none !important; min-height: 100% !important; overflow-y: auto !important; overflow-x: hidden !important; position: static !important; touch-action: auto !important; overscroll-behavior: auto !important; } #pageMorphRoot, #pageMorphInner, #main-wrapper { height: auto !important; max-height: none !important; min-height: 0 !important; overflow: visible !important; } }