@font-face{font-family:"Epic Pro";src:url("../assets/fonts/GCEpicPro-Bold.woff") format("woff");font-weight:700;font-style:normal;font-display:swap} /* GCEpicPro maps U+2014 but its emdash is a composite whose component lands outside the glyph box, so every em dash in a display heading rendered as a blank gap ("BMW M3 __ FULL PPF"). The endash and middot in the same face are fine. A second @font-face for the same family, declared after the first and scoped to that one codepoint, hands the em dash to a system face and leaves the rest of the heading in Epic Pro. */ @font-face{font-family:"Epic Pro";src:local("Arial Bold"),local("Helvetica Bold"),local("Arial"); unicode-range:U+2014;font-weight:700;font-style:normal} @property --py{syntax:'';inherits:false;initial-value:-7%} *,*::before,*::after{box-sizing:border-box} /* The page can be dragged past its own top and bottom on a trackpad or a phone; the elastic area is painted by the canvas, not by , so it showed as a band that did not belong to the design. Paint the root, and stop the bounce so the document has hard ends. */ html{-webkit-text-size-adjust:100%;background:var(--bg);overscroll-behavior-y:none} body{overscroll-behavior-y:none} body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font-body); font-weight:300;line-height:1.6;-webkit-font-smoothing:antialiased} /* body 上不能再有 overflow-x:hidden。tokens.css 给了 html{overflow-x:clip} 之后, 视口的 overflow 改从 html 取,body 自己那条 overflow-x:hidden 于是真的作用在 body 上, 把 overflow-y 连带算成 auto —— body 成了一个滚不动的滚动容器,滚轮事件被它吃掉, 整站鼠标/触摸都滚不动(scrollTo() 还能动,所以脚本验收看不出来)。横向溢出已经由 html 的 clip 兜住了,这条纯属多余。 */ img,video{display:block;max-width:100%} a{color:inherit;text-decoration:none} h1,h2,h3,p,ul{margin:0} ul{list-style:none;padding:0} .mono{font-family:var(--font-mono);font-size:15.5px;letter-spacing:var(--tracking-label); text-transform:uppercase;color:var(--ink-subtle)} :focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:var(--radius)} /* ── loader ─────────────────────────────────────────── */ .loader{position:fixed;inset:0;z-index:90;background:var(--bg); display:grid;place-content:center;gap:var(--sp-5);justify-items:center; transition:clip-path 1s var(--ease);clip-path:inset(0 0 0 0)} .loader.is-out{clip-path:inset(0 0 100% 0)} .loader__logo{width:66px;height:auto;filter:drop-shadow(0 0 34px rgba(255,0,128,.45))} .loader__label{font-family:var(--font-mono);font-size:14px;letter-spacing:var(--tracking-label); text-transform:uppercase;color:var(--ink-subtle)} .loader__count{margin-top:var(--sp-3);font-family:var(--font-mono);font-size:16.5px; color:var(--ink-subtle);letter-spacing:.16em;font-variant-numeric:tabular-nums} .loader__count i{font-style:normal;opacity:.5} .loader__track{width:min(240px,52vw);height:1px;background:var(--line)} .loader__fill{height:100%;width:0;background:var(--brand-sweep)} /* ── hero — laocoon skeleton ────────────────────────── */ /* the region is tall; the stage inside it is what you see. The distance between them IS the scrub — 280svh gives the 40-frame reel room to read as motion rather than a slideshow. */ .hero{position:relative;height:calc(200svh / var(--z))} .hero__stage{position:sticky;top:0;min-height:calc(100svh / var(--z));height:calc(100svh / var(--z)); display:grid;grid-template-rows:auto 1fr auto;overflow:hidden; padding:var(--sp-6) clamp(var(--sp-5),4vw,var(--sp-8)) clamp(var(--sp-5),2.4vw,var(--sp-6))} .hero__media{position:absolute;inset:0;z-index:0} /* the logo ramp laid over the footage in colour mode — hue only, luminance is the clip's own. The scrims sit above it, the type above those. */ .hero__media::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none; background:linear-gradient(118deg,#ff0000 0%,#a20086 54%,#8a00b0 100%); mix-blend-mode:color;opacity:.30} .hero__video{position:absolute;inset:0;width:100%;height:100%;display:block; object-fit:cover;filter:saturate(.62) contrast(1.12) brightness(.98)} /* the scrims exist to keep type legible, not to dim the shop's own footage. Each one is heavy only where type actually sits — behind the masthead and behind the base band — and clears out of the middle of the frame entirely. */ .hero__topfade{position:absolute;inset:0 0 auto;height:46%;z-index:2; background:linear-gradient(180deg,rgba(0,0,0,.80) 0%,rgba(0,0,0,.52) 30%, rgba(0,0,0,.20) 62%,transparent 100%)} .hero__basefade{position:absolute;inset:auto 0 0;height:44%;z-index:2; background:linear-gradient(180deg,transparent 0%,rgba(0,0,0,.30) 26%,rgba(0,0,0,.72) 58%,rgba(0,0,0,.92) 82%,var(--bg) 99%)} /* hairline thirds — a quiet instrument grid over the frame */ .hero__rules{position:absolute;inset:0;max-width:1560px;margin:0 auto;padding:0 clamp(var(--sp-5),4vw,var(--sp-8));display:grid;grid-template-columns:repeat(6,1fr);pointer-events:none;z-index:1} .hero__rules i{border-left:1px solid rgba(255,255,255,.055)} .hero__rules i:first-child{border-left:0} .hero__bloom{position:absolute;left:-8%;bottom:-30%;width:78vw;height:78vw;max-width:1180px;max-height:1180px;background:radial-gradient(circle at 50% 50%,var(--glow) 0%,var(--glow-violet) 38%,transparent 70%);filter:blur(120px);opacity:.36;mix-blend-mode:screen;pointer-events:none;z-index:1} .hero__nav,.hero__title,.hero__nav{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-5); padding-bottom:var(--sp-5);border-bottom:1px solid var(--line)} .brand{display:flex;align-items:center;gap:var(--sp-3)} .brand img{width:30px;height:auto;filter:drop-shadow(0 0 16px rgba(255,0,128,.42))} .brand__txt b{display:block;font-family:var(--font-display);font-weight:700;font-size:16.5px; letter-spacing:.10em;line-height:1;text-shadow:0 1px 12px rgba(0,0,0,.75)} .brand__txt i{display:block;margin-top:5px;font-family:var(--font-mono);font-style:normal; font-size:13.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-muted)} /* 手机端才出现的第二行小字(见 css/mobile.css)。桌面上字标只放 HUMBLE CREW + Plano, Texas,加第三行会把导航条撑高,所以默认藏起来。 */ .brand__txt i.brand__sub{display:none} .hero__links{display:flex;gap:var(--sp-5);align-items:center} /* The Services item is a