/*═══════════════════════════════════════════════════════════════ RANK MEISTER® design system Shared by hero.html and index.html. Edit once, both update. ═══════════════════════════════════════════════════════════════*/ @property --border-angle{syntax:'';inherits:false;initial-value:0deg} :root{ --base:#F2F0EA; --base2:#EAE7DF; --card:#fff; --line:#DBD7CC; --line2:#C6C1B2; --deep:#0F0F16; --ink:#101014; --ink2:#4A4842; --ink3:#78756C; --ink4:#A7A398; --onD:#F7F5F0; --onD2:rgba(247,245,240,.66); --onD3:rgba(247,245,240,.34); --blue:#0054B4; --coral:#FF4F3D; --amber:#FFB800; --magenta:#E5308F; --cyan:#54C0E4; --violet:#0084A8; --ui:"Inter",-apple-system,BlinkMacSystemFont,sans-serif; --dis:"Urbanist","Inter",sans-serif; --mn:"Space Mono",ui-monospace,monospace; --max:1320px; --e:cubic-bezier(.22,1,.36,1); --spring:cubic-bezier(.34,1.28,.5,1); } *{box-sizing:border-box;margin:0;padding:0} html{-webkit-text-size-adjust:100%;scroll-behavior:smooth} /* never put overflow-x on : 'hidden' makes it a scroll container and kills anchor jumps, 'clip' makes Chrome ignore window.scrollTo. Clip on body only. */ /* overflow-x on body alone still lets the document scroll sideways */ body{background:var(--base);color:var(--ink);font-family:var(--ui);line-height:1.55; -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:clip} a{text-decoration:none;color:inherit} img,svg{display:block;max-width:100%} ::selection{background:var(--blue);color:#fff} .w{max-width:var(--max);margin:0 auto;padding:0 40px} .mn{font-family:var(--mn);font-size:10px;letter-spacing:.19em;text-transform:uppercase} h1{font-family:var(--dis);font-weight:600;font-size:clamp(40px,5.4vw,64px);line-height:1;letter-spacing:-1.5px} h2{font-family:var(--dis);font-weight:600;font-size:clamp(32px,4.4vw,54px);line-height:1.04;letter-spacing:-1.4px} h3{font-family:var(--dis);font-weight:600;font-size:clamp(20px,2.2vw,26px);line-height:1.2;letter-spacing:-.6px} h4{font-family:var(--dis);font-weight:600;letter-spacing:-.4px} /*═══ AMBIENT ═══*/ .mesh{position:fixed;inset:0;pointer-events:none;z-index:0; background: radial-gradient(1100px 760px at 12% 4%, rgba(255,255,255,.95), transparent 60%), radial-gradient(900px 700px at 88% 16%, rgba(0,84,180,.18), transparent 62%), radial-gradient(820px 660px at 74% 86%, rgba(0,132,168,.16), transparent 62%), radial-gradient(700px 560px at 96% 58%, rgba(255,184,0,.13), transparent 64%), radial-gradient(640px 520px at 28% 92%, rgba(229,48,143,.09), transparent 66%); animation:mesh 26s ease-in-out infinite} @keyframes mesh{0%,100%{opacity:.95;transform:scale(1)}50%{opacity:1;transform:scale(1.05)}} .grain{position:fixed;inset:0;pointer-events:none;z-index:1;opacity:.04; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E")} .page{position:relative;z-index:2} /*═══ SCROLL PROGRESS ═══*/ .prog{position:fixed;top:0;left:0;height:2.5px;width:0;z-index:500; background:linear-gradient(90deg,var(--coral),var(--amber),var(--blue),var(--violet)); transition:width .12s linear} /*═══ FRAMER-STYLE MOTION ═══*/ @keyframes fadeDown{from{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:none}} @keyframes fadeUp{from{opacity:0;transform:translateY(40px)}to{opacity:1;transform:none}} @keyframes scaleIn{from{opacity:0;transform:scale(.85)}to{opacity:1;transform:scale(1)}} /* scroll reveals */ [data-rv]{opacity:0;transform:translateY(34px); transition:opacity .9s var(--e),transform .9s var(--e)} [data-rv].sh{opacity:1;transform:none} [data-rv="scale"]{transform:translateY(24px) scale(.96)} [data-rv="scale"].sh{transform:none} [data-rv="left"]{transform:translateX(-40px)} [data-rv="left"].sh{transform:none} [data-rv="right"]{transform:translateX(40px)} [data-rv="right"].sh{transform:none} /* line-mask headings */ .lines .ln{display:block;overflow:hidden;padding-bottom:.22em;margin-bottom:-.16em} .lines .ln>i{display:block;font-style:normal;transform:translateY(115%); transition:transform 1.05s var(--e)} .lines.sh .ln>i{transform:none} .lines.sh .ln:nth-child(2)>i{transition-delay:.08s} .lines.sh .ln:nth-child(3)>i{transition-delay:.16s} /* highlight bar */ .hl{position:relative;display:inline-block;z-index:0} .hl::after{content:"";position:absolute;left:-.06em;right:-.06em;bottom:.08em;height:.3em;z-index:-1; transform:scaleX(0);transform-origin:left;transition:transform .9s var(--e) .45s} .sh .hl::after,.ld .hl::after{transform:scaleX(1)} .hl-b::after{background:rgba(0,84,180,.2)} .hl-c::after{background:rgba(255,79,61,.22)} .hl-a::after{background:rgba(255,184,0,.34)} .hl-m::after{background:rgba(229,48,143,.18)} .hl-y::after{background:rgba(84,192,228,.24)} .hl-v::after{background:rgba(0,132,168,.18)} .par{will-change:transform} /*═══ NAV ═══ Scoped to the id. A bare `nav` selector also matches the inner