/* =================================================================== PAPI — Premium Business Template Studio Loader + Hero =================================================================== */ :root{ --ink: #0b0b0c; --ink-soft: #17171a; --cream: #f3ede2; --cream-dim: #cfc7b8; --gold: #cba869; --gold-soft: #e4cd9a; --gold-deep: #8a6a1f; /* darker gold for legibility over light backgrounds */ /* luxury white — used for the loader and the showcase section */ --paper: #f8f6f2; --paper-ink: #17181a; --paper-dim: rgba(23,24,26,.5); /* --accent/--style-contrast used to be driven live, every frame, by the old hero particle field's color sweep — nothing updates them anymore (the hero background is a static white+bokeh now, see #hero below), so these are just fixed defaults. --style-contrast in particular used to default to a light cream (right for the old near-black hero); switched to a dark tone here since it's what the brand mark/CTA border/"purpose" fall back to against the new white hero background. */ --accent: 201, 168, 105; /* r,g,b */ --style-contrast: 26, 20, 13; /* soft cream-blended tint of --accent, used for supporting text */ --accent-tint: 222, 208, 180; --ease-out: cubic-bezier(.16,1,.3,1); --ease-in-out: cubic-bezier(.65,0,.35,1); } *{ margin:0; padding:0; box-sizing:border-box; } html,body{ min-height:100%; background:var(--ink); color:var(--cream); font-family:'Inter', system-ui, sans-serif; } /* overflow-x:hidden on body only (not on html, and not on both) — both was already ruled out (see below): it makes each one's overflow-y compute to auto, turning body into a competing scroll container that breaks position:sticky for the showcase section. But html alone has its own, separate, well-documented WebKit/iOS bug: *any* explicit overflow on the root element makes fixed- position descendants lay out in normal document flow instead of pinning to the viewport — confirmed directly as the cause of the showcase section's expanded fan card (reparented onto with position:fixed) rendering at the very bottom of the page, among the last elements in body's own document flow, instead of centering on-screen. Putting it on body alone avoids both: only one element ends up with explicit overflow (no competing scroll container), and it isn't the root element (no fixed-position bug). */ body{ overflow-x:hidden; } /* briefly locks scrolling — while the hero's background field grows to fill the screen, while the cube section has a face focused, and while a showcase fan card is expanded. Plain overflow:hidden on html/body (what used to live here) isn't reliably enough to block iOS Safari's own touch-driven momentum scrolling: a stray touch could still drag the page slightly during a "locked" animation, and the snap-back once the lock released was what showed up as a pause/ freeze right as you scrolled from the hero into the next section. window.Papi.lockScroll()/unlockScroll() (see accent.js) actually fixes that by intercepting the touchmove/wheel input itself — NOT via position:fixed on body, which would hijack the containing block of every OTHER position:fixed element on the page (.site-header, .title-dock, an expanded fan card...) for the duration of the lock. This class just hides the root's own scrollbar/rubber-band to match. */ html.scroll-lock{ overflow:hidden; } html.no-scroll{ overflow:hidden; } body.no-scroll{ overflow:hidden; } ::selection{ background:rgba(var(--accent),.4); color:var(--cream); } a{ color:inherit; text-decoration:none; } /* custom cursor replaces the system pointer across the whole page */ body, a, .cta{ cursor:none; } /* =================================================================== LOADER — black and gold, on brand: a single stylized "Papi" wordmark fills in from white to gold, then dissolves into the hero. =================================================================== */ #loader{ position:fixed; inset:0; z-index:1000; background:var(--ink); overflow:hidden; } /* the same italic Fraunces treatment as "purpose" in the hero title (see .hero-title em) — ties the very first thing a visitor sees to the same on-brand serif/gold-italic moment they see again seconds later, rather than a generic sans wordmark that has nothing to do with the rest of the page. The rise settles the whole word into place, then loader.js fades each letter in on its own before pouring the gold fill through them in turn. */ .loader-word{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%) translateY(20px) scale(.94); font-family:'Fraunces', serif; font-style:italic; font-weight:400; letter-spacing:.02em; font-size:clamp(2.6rem, 11vw, 6.2rem); line-height:1; display:flex; will-change:transform, opacity; opacity:0; } .loader-letter{ display:inline-block; opacity:0; color:#fff; transform:translateY(16px); will-change:opacity, transform, color; } /* loader exit */ #loader.is-done{ pointer-events:none; } /* =================================================================== HERO / CANVAS FIELD =================================================================== */ #hero{ position:relative; min-height:100vh; min-height:100svh; width:100%; background:#ffffff; visibility:hidden; opacity:0; transition:opacity 1.6s var(--ease-in-out); overflow:hidden; } #hero.is-visible{ visibility:visible; opacity:1; } /* ---- pilot: native scroll-driven fade/lift for the hero copy ---- title-dock.js drives this same fade/lift by reading window.scrollY in a requestAnimationFrame loop — which works, but iOS Safari (the actual app, not other browsers using the same underlying engine) deliberately pauses JS execution, including rAF callbacks, while a finger is actively dragging the screen, to keep the native scroll itself smooth, then runs everything it deferred in one burst once the gesture settles. On a page with this much scroll-tied JS, that surfaces as the hero visibly freezing mid-scroll and then jumping — confirmed on video, and reproducible only in Safari specifically, not in another iOS browser hitting the same page. This does the same fade/lift as a native, compositor-driven scroll-linked animation instead — not gated behind JS at all, so Safari's JS-during-scroll pause can't touch it. Gated behind @supports so it only applies where the browser actually understands it; everywhere else, title-dock.js's own JS version (unchanged) keeps working exactly as it already does. Scoped to just the clearest win for now (eyebrow/title opacity, the hero-copy lift) — the CTA and subtitle keep their existing JS-driven fade since both also run their own separate entrance-reveal animation that would otherwise race this. */ @supports (animation-timeline: view()) { #hero{ view-timeline-name: --hero-exit; view-timeline-axis: block; } @keyframes heroExitFade{ 0%, 42%{ opacity:1; } 52%{ opacity:.84; } 62%{ opacity:.5; } 72%{ opacity:.16; } 82%, 100%{ opacity:0; } } @keyframes heroExitLift{ 0%, 42%{ transform:translateY(0); } 52%{ transform:translateY(-5px); } 62%{ transform:translateY(-17px); } 72%{ transform:translateY(-29px); } 82%, 100%{ transform:translateY(-34px); } } #heroEyebrow, #heroTitle{ animation: heroExitFade linear both; animation-timeline: --hero-exit; animation-range: exit 0% exit 100%; } #heroCopy{ animation: heroExitLift linear both; animation-timeline: --hero-exit; animation-range: exit 0% exit 100%; } } /* container for the WebGL gold slime — js/hero-slime.js renders into the