/* ============================================================================ EL8 splash (welcome intro) ---------------------------------------------------------------------------- Loaded from index.html as a plain stylesheet so the intro is styled on the very first paint, before any JavaScript or the app CSS arrives. This is the ONLY place splash rules live (moved out of redesign.css). The exit is triggered by index.html adding `.is-leaving` once the app has mounted and the minimum show time has passed. ============================================================================ */ :root{ --font-brand:'Outfit','Alexandria',system-ui,sans-serif; --brand-300:#BA68CB; --cyan:#5B3564; } .splash.is-leaving{ opacity:0; visibility:hidden; pointer-events:none; } .splash.is-leaving .splash__stage{ filter:blur(14px); transform:translate(-50%,-50%) scale(1.05); } /* ---------- Welcome splash: hands frame the name like a signature ---------- */ /* Lock scroll during splash screen */ html.is-splashing, body.is-splashing{ overflow: hidden !important; height: 100dvh !important; width: 100% !important; touch-action: none !important; } .splash{ position:fixed; inset:0; width:100%; height:100dvh; z-index:999999; display:flex; align-items:center; justify-content:center; overflow:hidden; touch-action:none; background: radial-gradient(circle at 22% 18%, rgba(139,92,246,.32), transparent 55%), radial-gradient(circle at 80% 84%, rgba(6,182,212,.26), transparent 55%), #07070c; transition:opacity .5s ease, visibility 0s linear .5s; } .splash__stage{ display:flex; flex-direction:column; align-items:center; position:relative; transition:transform .5s ease, filter .5s ease; } .splash__hand{ width:clamp(140px,24vw,220px); height:auto; display:block; opacity:0; filter:drop-shadow(0 18px 30px rgba(0,0,0,.55)); } .splash__hand--top{ margin-bottom:-8px; transform:translateY(-30px); animation:splashHandTop 700ms cubic-bezier(.2,.8,.24,1) 60ms forwards; } .splash__hand--bottom{ margin-top:-8px; transform:translateY(30px); animation:splashHandBottom 700ms cubic-bezier(.2,.8,.24,1) 60ms forwards; } @keyframes splashHandTop{ to{ opacity:1; transform:translateY(0); } } @keyframes splashHandBottom{ to{ opacity:1; transform:translateY(0); } } .splash__wordmark{ position:relative; display:flex; flex-direction:column; align-items:center; padding:4px 18px; } .splash__glow{ position:absolute; inset:-70% -40%; z-index:0; pointer-events:none; border-radius:50%; background:radial-gradient(ellipse 60% 60% at 50% 50%, rgba(139,92,246,.5), rgba(34,211,238,.2) 55%, transparent 75%); filter:blur(28px); opacity:0; animation:splashGlow 500ms ease-out 1100ms forwards; } @keyframes splashGlow{ to{ opacity:1; } } .splash__letters{ position:relative; z-index:1; display:flex; direction:ltr; font-family:var(--font-brand); font-weight:800; font-size:clamp(2.1rem,6.6vw,3.2rem); letter-spacing:.13em; color:#fff; } .splash__letter{ display:inline-block; opacity:0; filter:blur(6px); transform:translateY(14px); animation:splashLetterIn 460ms cubic-bezier(.16,.8,.24,1) forwards; } .splash__letter:nth-child(1){ animation-delay:480ms; } .splash__letter:nth-child(2){ animation-delay:600ms; } .splash__letter:nth-child(3){ animation-delay:720ms; } @keyframes splashLetterIn{ to{ opacity:1; filter:blur(0); transform:translateY(0); } } .splash__dot{ display:inline-block; color:var(--cyan); opacity:0; transform:translateY(14px) scale(.5); animation:splashDotIn 400ms cubic-bezier(.34,1.56,.64,1) 940ms forwards; } @keyframes splashDotIn{ to{ opacity:1; transform:translateY(0) scale(1); } } .splash__flourish{ position:relative; z-index:1; display:block; width:min(70%,210px); height:20px; margin-top:8px; overflow:visible; } .splash__flourish path{ fill:none; stroke:url(#splashFlourishGrad); stroke-width:3.4; stroke-linecap:round; stroke-dasharray:260; stroke-dashoffset:260; animation:splashFlourishDraw 520ms cubic-bezier(.3,.75,.35,1) 1100ms forwards; } @keyframes splashFlourishDraw{ to{ stroke-dashoffset:0; } } @media (prefers-reduced-motion: reduce){ .splash{ animation:none !important; opacity:0 !important; visibility:hidden !important; pointer-events:none !important; } .splash *{ animation:none !important; } } @media(max-width:520px){ .splash__hand{ width:clamp(112px,32vw,180px); } } /* Hide Back-to-Top button completely during the splash welcome screen */ html.is-splashing .scroll-top-btn, body.is-splashing .scroll-top-btn{ display:none !important; opacity:0 !important; visibility:hidden !important; pointer-events:none !important; } /* leftovers from the pre-brand stylesheet */ .splash-mark, .splash__glow{ background:#0E0910; } /* ---------- splash picks up the same canvas ---------- */ .splash{ background: radial-gradient(circle at 22% 18%, rgba(138,78,151,.30), transparent 55%), radial-gradient(circle at 80% 84%, rgba(186,104,203,.22), transparent 55%), #0E0910; } /* ================================================================ Splash: a fixed, symmetrical stage ================================================================ */ /* The two plates have different native ratios (455x191 and 520x199). Sizing by height instead of width renders them at the same optical weight, and the reserved aspect-ratio means the stage never reflows while they decode. */ /* Both plates render at exactly the same width, so their wrists line up on the same vertical edge and neither hand looks bigger than the other. Sizing by height instead left them 12px apart in width, because the two crops have different native ratios (455x191 and 520x199). */ .splash__hand{ width:clamp(132px,38vw,210px); height:auto; max-width:78vw; object-fit:contain; object-position:center; will-change:transform, opacity; } .splash__hand--top{ aspect-ratio:455 / 191; margin-bottom:-6px; } .splash__hand--bottom{ aspect-ratio:520 / 199; margin-top:-6px; } /* The wordmark's glow box is 70% taller than the wordmark itself, so it spilled over the upper hand. Because the wordmark comes after that hand in the DOM and is positioned, the glow painted on top of it - and it fades in at 2500ms, which is why the hand appeared to dim right at the end of the intro. Lifting both hands above the wordmark puts the glow back behind the whole scene. */ .splash__hand{ position:relative; z-index:3; } .splash__wordmark{ z-index:2; } .splash__glow{ background:radial-gradient(ellipse 60% 60% at 50% 50%, rgba(138,78,151,.5), rgba(186,104,203,.2) 55%, transparent 75%); } .splash__dot{ color:var(--brand-300); } /* The stage used to be centred by flexbox, so its centre moved whenever its own width changed - and its width is set by the widest child, which changes as the letters and the flourish appear. Pinning it to the viewport centre with a transform makes the centre fixed: the group can grow or shrink and it still stays exactly in the middle. */ .splash{ width:100%; height:100%; } .splash__stage{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); min-height:clamp(190px,42vw,280px); justify-content:center; width:max-content; max-width:92vw; } /* every element in the stack is centred on the same axis */ .splash__hand{ margin-inline:auto; } .splash__wordmark{ margin-inline:auto; } .splash__flourish{ margin-inline:auto; } /* the wordmark keeps a fixed footprint so the letters cannot drag the layout sideways as they appear one by one */ .splash__letters{ justify-content:center; min-width:0; } .splash__wordmark{ width:100%; text-align:center; } @media(max-width:520px){ .splash__hand{ width:clamp(124px,42vw,180px); } }