/* ============================================================ NOID — v10 "THE FORGING, ONE TAKE" — content layer (Builder B) bg #171717 · panels #1C1C1C/#242424 · text #DEDEDE accent #F25623 (dim #C8451C) — scalpel, not floodlight Film strip: 1200vh. Cards are FIXED glass panes in #deck, choreographed per beat by choreo.js off the FORGE contract. ============================================================ */ /* The DISPLAY face is the one type on the page whose metrics are nothing like its fallback — swapping it in mid-title-sequence reflowed the whole hero. It is preloaded in every page's , so `block` costs nothing (the face is there before first paint) and buys a title that lands once, already in Ugocranis. Body + mono keep `swap` (fonts.css): their fallbacks are metric-close and a swap there is invisible. */ @font-face{ font-family:'Ugocranis'; src:url('assets/fonts/ugocranis.woff2') format('woff2'); font-display:block; } :root{ color-scheme:dark; /* the browser's own first paint is already ours — never a white flash */ --bg:#171717; --bg1:#1C1C1C; --bg2:#242424; --bg3:#353535; --tx:#DEDEDE; --tx2:#C4C4C4; --mut:#8B8B8B; --dim:#848484; /* --dim is the dimmest TEXT tier and must clear WCAG AA 4.5:1 on every surface it lands on: #141414 → 4.93:1, #171717 → 4.79:1, #1C1C1C → 4.56:1 (was #4D4D4D = 2.12:1). --decor keeps the original ink for NON-TEXT chrome (dots/rules), where contrast rules do not apply and lightening would only cheapen the drawing. */ --decor:#4D4D4D; --acc:#F25623; --accd:#C8451C; --hair:rgba(255,255,255,.07); --disp:'Ugocranis','Space Grotesk',sans-serif; --body:'Space Grotesk',system-ui,sans-serif; --mono:'JetBrains Mono',ui-monospace,monospace; --ease:cubic-bezier(.16,1,.3,1); } *{margin:0;padding:0;box-sizing:border-box} /* visually hidden, still read aloud — for labels the design carries by position (an unlabelled header column, the 404 glyph) but a screen reader cannot infer. */ .vh{ position:absolute;width:1px;height:1px;padding:0;overflow:hidden; clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0; } html{scroll-behavior:auto;scrollbar-width:none} ::-webkit-scrollbar{width:0;height:0} html,body{background:var(--bg);color:var(--tx)} body{ font-family:var(--body); font-size:15px;line-height:1.6; overflow-x:clip; -webkit-font-smoothing:antialiased; } a{color:inherit;text-decoration:none} ::selection{background:var(--acc);color:#171717} /* ---------- fixed stage ---------- */ #gl{ position:fixed;inset:0;width:100vw;height:100vh; z-index:0;display:block; } html.no-webgl #gl{display:none} html.no-webgl body{ background: radial-gradient(90vh 70vh at 68% 42%, #242424 0%, #171717 55%, #101010 100%); } #overlay{ position:fixed;inset:0;width:100vw;height:100vh; z-index:2;pointer-events:none; } @media(max-width:899px){#overlay{display:none}} #page{position:relative;z-index:3} #nav{z-index:9} #grain{ position:fixed;inset:-40px;z-index:8;pointer-events:none;opacity:.05; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } /* ---------- nav ---------- */ #nav{ position:fixed;top:0;left:0;right:0; display:flex;align-items:center;justify-content:space-between; padding:22px clamp(20px,4vw,56px); mix-blend-mode:normal; } .brand{ font-family:var(--disp);font-size:21px;letter-spacing:.08em;color:var(--tx); } .nav-links{display:flex;align-items:center;gap:28px} .nav-links a{ font-family:var(--mono);font-size:10.5px;letter-spacing:.22em;color:var(--mut); transition:color .35s var(--ease); } .nav-links a:hover{color:var(--tx)} .nav-dot{ width:6px;height:6px;border-radius:50%;background:var(--acc); box-shadow:0 0 8px rgba(242,86,35,.8); animation:pulse 2.6s ease-in-out infinite; } @keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}} /* v9-compat stub — never shown */ #stage{display:none} /* ---------- THE FORGING readout: rail = stage label + beat-o-meter ---------- Thin, mono, PURE lineage. choreo.js fills the active tick with beat[i]. */ #rail{ position:fixed;z-index:6; left:clamp(10px,1.8vw,26px);top:50%; transform:translateY(-50%); display:flex;flex-direction:column;align-items:center;gap:20px; opacity:0;visibility:hidden; pointer-events:none; } .rail-ticks{display:flex;flex-direction:column;gap:10px} .rtick{width:1px;height:24px;background:rgba(255,255,255,.14);overflow:hidden} .rtick i{ display:block;width:100%;height:100%; background:var(--acc); transform:scaleY(0);transform-origin:top; opacity:.25; } .rail-label{ writing-mode:vertical-rl; transform:rotate(180deg); font-family:var(--mono);font-size:9.5px;letter-spacing:.42em; color:var(--mut);white-space:nowrap; } .rail-label .r-idx{color:var(--acc)} .rail-label .r-sep{color:var(--dim);padding:12px 0} /* ---------- shared type ---------- */ .accent{color:var(--acc)} .outline{ color:transparent; -webkit-text-stroke:1.5px var(--tx); text-stroke:1.5px var(--tx); } .sec-overline{ font-family:var(--mono);font-size:10.5px;letter-spacing:.3em;color:var(--mut); display:flex;align-items:center;gap:14px; } .sec-overline .idx{ color:var(--acc); padding:3px 7px;border:1px solid rgba(242,86,35,.4); } .wrap{width:min(1180px,90vw);margin:0 auto} /* ---------- rv motion (clip + rise, never bare opacity) ---------- Styles written per-frame by choreo.js from the same timeline that drives the film. data-rv="a,b" = t-window. No CSS transitions. */ .rv{ opacity:0; transform:translateY(34px); clip-path:inset(0 0 18% 0); will-change:transform,opacity; } /* no GL still has choreo (independent) — but belt-and-braces */ html.no-webgl .rv{opacity:1;transform:none;clip-path:none} /* scrub mode (?t=): hero boot title-sequence fast-forwards to resolved */ html.scrub body .overline,html.scrub body .sub,html.scrub body .ctas, html.scrub body .hero-hud{animation-duration:.01s!important;animation-delay:0s!important} html.scrub body .h1 .w{animation-duration:.01s!important;animation-delay:0s!important} /* ---------- hero — copy over the BIRTH ---------- */ #hero{ position:relative;height:100vh;min-height:640px; display:flex;flex-direction:column;justify-content:center; } .hero-inner{ padding-left:clamp(20px,7vw,110px); max-width:62%; position:relative; will-change:transform,opacity; } /* scrim so the copy never fights the point-field */ .hero-inner::before{ content:'';position:absolute;z-index:-1; inset:-14% -22% -16% -40%; background:radial-gradient(115% 100% at 32% 50%, rgba(13,13,13,.60) 0%, rgba(13,13,13,.28) 52%, rgba(13,13,13,0) 78%); pointer-events:none; } .overline{ font-family:var(--mono);font-size:10.5px;letter-spacing:.34em;color:var(--tx2); display:flex;align-items:center;gap:14px;margin-bottom:40px; opacity:0; } .overline .tick{width:26px;height:1px;background:var(--acc);display:inline-block} body.boot .overline{animation:rise 1s var(--ease) .25s forwards} .h1{ font-family:var(--disp);font-weight:400; font-size:clamp(52px,7.6vw,116px); line-height:.96;letter-spacing:.003em;color:var(--tx); margin-bottom:40px; } .h1 .line{display:block;overflow:hidden;padding:.03em 0} .h1 .w{display:inline-block;transform:translateY(115%)} body.boot .h1 .line:nth-child(1) .w{animation:up 1.15s var(--ease) .40s forwards} body.boot .h1 .line:nth-child(2) .w{animation:up 1.15s var(--ease) .53s forwards} body.boot .h1 .line:nth-child(3) .w{animation:up 1.15s var(--ease) .66s forwards} @keyframes up{to{transform:translateY(0)}} @keyframes rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}} .sub{ max-width:46ch;color:var(--tx2);font-size:14.5px;font-weight:300; line-height:1.75; opacity:0; } body.boot .sub{animation:rise 1.1s var(--ease) .95s forwards} .ctas{display:flex;gap:14px;margin-top:44px;opacity:0} body.boot .ctas{animation:rise 1.1s var(--ease) 1.1s forwards} .btn{ font-family:var(--mono);font-size:11px;letter-spacing:.22em; padding:16px 30px;border:1px solid;position:relative; transition:all .4s var(--ease); } .btn .arr{display:inline-block;transition:transform .4s var(--ease)} .btn:hover .arr{transform:translateX(5px)} .btn-a{color:var(--acc);border-color:rgba(242,86,35,.55);background:rgba(242,86,35,.05)} .btn-a:hover{background:rgba(242,86,35,.14);border-color:var(--acc)} .btn-b{color:var(--tx2);border-color:rgba(255,255,255,.18)} .btn-b:hover{color:var(--tx);border-color:rgba(255,255,255,.45)} .hero-hud{ position:absolute;left:0;right:0;bottom:0; display:flex;justify-content:space-between;align-items:flex-end; padding:0 clamp(20px,4vw,56px) 28px; font-family:var(--mono);font-size:9.5px;letter-spacing:.24em;color:var(--dim); opacity:0; } body.boot .hero-hud{animation:rise 1.2s var(--ease) 1.5s forwards} .hud-l{display:flex;align-items:center;gap:12px} .hud-r{color:var(--mut)} #tval{color:var(--acc)} .scroll-cue{ width:1px;height:44px;background:rgba(255,255,255,.12); position:relative;overflow:hidden;display:inline-block; } .scroll-cue i{ position:absolute;left:0;top:-40%;width:100%;height:40%; background:var(--acc); animation:cue 2.2s var(--ease) infinite; } @keyframes cue{0%{top:-40%}70%,100%{top:110%}} /* ---------- environmental type ---------- */ .env-type{ position:absolute;z-index:-1; font-family:var(--disp);font-size:clamp(200px,34vw,560px); line-height:1;letter-spacing:.02em; color:transparent;-webkit-text-stroke:1px #2C2C2C; user-select:none;white-space:nowrap; left:50%;top:6%;transform:translateX(-50%); opacity:.8; } .env-type-b{top:auto;bottom:4%;left:58%;-webkit-text-stroke:1px #292929;opacity:.65} .env-type-c{top:auto;bottom:2%;left:60%;-webkit-text-stroke:1px #242424;opacity:.5} /* ---------- 00 who — over the raw-stone hold (t 0.10–0.16) ---------- */ #who{ position:relative;height:160vh; display:flex;align-items:center; overflow:clip; } #who .wrap{padding:8vh 0} #who .statement{ margin-top:46px; font-weight:300;font-size:clamp(26px,3.4vw,44px);line-height:1.24; letter-spacing:.002em; max-width:23ch;color:var(--tx); } #who .quote{ margin-top:58px;padding-left:28px; border-left:2px solid var(--acc); font-size:clamp(16px,1.6vw,21px);font-weight:300;font-style:normal; line-height:1.75; color:var(--tx2);max-width:42ch; } /* ---------- 01 products — the empty film strip ---------- */ #products{position:relative} #products .sec-head{ height:20vh;display:flex;align-items:flex-end; padding:0 0 6vh clamp(20px,7vw,110px); } .strip{height:820vh} /* reduced-motion static cards — hidden in the film */ .rm-cards{display:none} /* ---------- THE DECK — four fixed glass panes ---------- Seats place each pane's REST position; choreo.js drives transform/clip/opacity per beat window. */ #deck{position:fixed;inset:0;z-index:4;pointer-events:none} .seat{ position:absolute;inset:0;display:flex; pointer-events:none; perspective:1150px; } .seat-1{justify-content:flex-start;align-items:center;padding-left:clamp(24px,6vw,96px)} .seat-2{justify-content:flex-start;align-items:flex-end;padding-left:clamp(24px,5vw,80px);padding-bottom:6vh} .seat-3{justify-content:flex-end;align-items:center;padding-right:clamp(24px,6vw,96px)} .seat-4{justify-content:flex-end;align-items:flex-start;padding-top:13vh;padding-right:clamp(24px,7vw,110px)} .pane{ position:relative; width:min(470px,88vw); background:linear-gradient(165deg, rgba(36,36,36,.62), rgba(23,23,23,.38)); -webkit-backdrop-filter:blur(16px) saturate(1.25); backdrop-filter:blur(16px) saturate(1.25); border:1px solid rgba(255,255,255,.09); border-top-color:rgba(255,255,255,.17); border-radius:3px; box-shadow:0 34px 90px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.05); padding:30px 32px 26px 42px; } #deck .pane{ visibility:hidden;opacity:0; pointer-events:auto; will-change:transform,opacity,clip-path; backface-visibility:hidden; } /* corner ticks */ .pane::before,.pane::after{ content:'';position:absolute;width:9px;height:9px;pointer-events:none; } .pane::before{ top:-1px;left:-1px; border-top:1px solid var(--acc);border-left:1px solid var(--acc); } .pane::after{ bottom:-1px;right:-1px; border-bottom:1px solid var(--acc);border-right:1px solid var(--acc); } .c-rail{ position:absolute;left:14px;top:26px;bottom:26px;width:3px; background:repeating-linear-gradient(to bottom, rgba(242,86,35,.75) 0 1px, transparent 1px 9px); opacity:.8; } .c-top{ display:flex;align-items:center;gap:14px; font-family:var(--mono);font-size:10px;letter-spacing:.26em; color:var(--mut);margin-bottom:16px; } .c-idx{color:var(--acc)} .c-cat{flex:1} .c-live{ width:5px;height:5px;border-radius:50%;background:var(--acc); box-shadow:0 0 7px rgba(242,86,35,.9); animation:pulse 2.2s ease-in-out infinite; } .c-name{ font-family:var(--disp);font-weight:400; font-size:clamp(34px,3.4vw,46px);line-height:1;letter-spacing:.015em; color:var(--tx);margin-bottom:20px; } .c-specs{list-style:none;border-top:1px solid var(--hair)} .c-specs li{ font-family:var(--mono);font-size:11.5px;letter-spacing:.05em;color:var(--tx2); padding:10px 0 10px 18px;border-bottom:1px solid var(--hair); position:relative; opacity:0;transform:translateX(-14px); /* scrubbed per-frame by choreo */ } .c-specs li::before{ content:'';position:absolute;left:1px;top:50%;margin-top:-3px; width:6px;height:6px; border:1px solid var(--acc); transform:rotate(45deg) scale(.7); } .c-foot{ display:flex;align-items:center;justify-content:space-between; margin-top:18px; } .c-go{ font-family:var(--mono);font-size:10.5px;letter-spacing:.24em;color:var(--acc); border:1px solid rgba(242,86,35,.45);padding:10px 18px; transition:all .4s var(--ease); } .c-go .arr{display:inline-block;transition:transform .4s var(--ease)} .c-go:hover{background:rgba(242,86,35,.13)} .c-go:hover .arr{transform:translateX(4px)} .c-url{font-family:var(--mono);font-size:10px;letter-spacing:.14em;color:var(--dim)} /* ---------- B2 scrim (low-third) ---------- */ #scrim{ position:fixed;left:0;right:0;bottom:0;height:58vh; z-index:3;pointer-events:none;opacity:0; background:linear-gradient(to top, rgba(10,10,10,.92) 0%, rgba(10,10,10,.55) 42%, rgba(10,10,10,0) 100%); } /* overlay tracking graphics (A's side may reuse) */ #overlay polyline{fill:none;stroke:var(--acc);stroke-width:1} #overlay .trk-halo{fill:none;stroke:rgba(242,86,35,.55);stroke-width:1;stroke-dasharray:3 4} #overlay .trk-pt{fill:#171717;stroke:var(--acc);stroke-width:1} #overlay text{ font-family:var(--mono);font-size:9px;letter-spacing:.22em;fill:var(--mut); } #overlay .spin{transform-box:fill-box;transform-origin:center;animation:rot 9s linear infinite} @keyframes rot{to{transform:rotate(360deg)}} /* ---------- 02 pillars — in-flow (mobile / reduced-motion primary) ---------- */ #pillars{ position:relative;height:100vh; display:flex;align-items:center;overflow:clip; } #pillars .wrap{padding:6vh 0} .p-list{list-style:none;margin-top:40px;counter-reset:p} .p-row{ display:flex;align-items:baseline;gap:clamp(18px,3vw,44px); padding:20px 10px; border-top:1px solid rgba(255,255,255,.08); } .p-row:last-child{border-bottom:1px solid rgba(255,255,255,.08)} .p-idx{font-family:var(--mono);font-size:11px;letter-spacing:.2em;color:var(--acc);min-width:3ch} .p-name{ font-family:var(--disp);font-weight:400; font-size:clamp(32px,4.6vw,64px);line-height:1;letter-spacing:.01em; color:var(--tx); flex:1; } .p-row:hover .p-name{color:var(--acc);transition:color .4s var(--ease)} .p-line{ font-family:var(--mono);font-size:10.5px;letter-spacing:.18em; color:var(--mut); transition:color .4s var(--ease); } .p-row:hover .p-line{color:var(--tx2)} /* desktop film: the 3D interior is the star — in-flow pillars step aside */ @media(min-width:900px) and (prefers-reduced-motion:no-preference){ #pillars{display:none;height:0} } /* ---------- pillars corner list (desktop dive companion) ---------- */ #pillars-corner{ position:fixed;z-index:5; left:clamp(20px,4vw,56px);bottom:clamp(24px,7vh,72px); width:min(330px,27vw); opacity:0;visibility:hidden; pointer-events:none; } .pc-head{ font-family:var(--mono);font-size:9.5px;letter-spacing:.3em;color:var(--mut); display:flex;align-items:center;gap:12px;margin-bottom:14px; } .pc-head .idx{ color:var(--acc); padding:2px 6px;border:1px solid rgba(242,86,35,.4); font-size:9px; } .pc-list{list-style:none} .pc-row{ display:grid;grid-template-columns:3ch 1fr; grid-template-areas:'idx name' '. line'; column-gap:10px;row-gap:1px; padding:9px 0; border-top:1px solid rgba(255,255,255,.09); } .pc-row:last-child{border-bottom:1px solid rgba(255,255,255,.09)} .pc-idx{grid-area:idx;font-family:var(--mono);font-size:9px;letter-spacing:.2em;color:var(--acc);padding-top:2px} .pc-name{grid-area:name;font-family:var(--disp);font-size:17px;letter-spacing:.05em;color:var(--tx)} .pc-line{grid-area:line;font-family:var(--mono);font-size:9px;letter-spacing:.16em;color:var(--mut)} /* the corner rides over the lit interior — keep the type anchored */ .pc-head,.pc-name,.pc-line,.pc-idx{text-shadow:0 1px 10px rgba(0,0,0,.75)} @media(max-width:899px){#pillars-corner{display:none}} /* ---------- footer — SURFACE + CLOSE ---------- */ #end{ position:relative;height:100vh; display:flex;align-items:center; border-top:1px solid var(--hair); background:linear-gradient(to bottom, rgba(23,23,23,0), rgba(12,12,12,.72)); overflow:clip; } #end .wrap{padding:8vh 0 5vh} .f-big{ font-family:var(--disp);font-weight:400; font-size:clamp(44px,6.2vw,92px);line-height:.99;letter-spacing:.008em; margin-bottom:48px; } .f-cols{ display:grid;grid-template-columns:repeat(3,minmax(140px,1fr));gap:34px; padding-top:42px;border-top:1px solid var(--hair); } .f-h{font-family:var(--mono);font-size:10px;letter-spacing:.3em;color:var(--dim);margin-bottom:16px} .f-col a{ display:block;font-family:var(--mono);font-size:12px;letter-spacing:.18em; color:var(--tx2);padding:7px 0; transition:color .35s var(--ease),transform .35s var(--ease); } .f-col a:hover{color:var(--acc);transform:translateX(6px)} .f-note{font-size:13px;color:var(--mut);font-weight:300;line-height:1.7} .f-base{ display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap; margin-top:52px; font-family:var(--mono);font-size:9.5px;letter-spacing:.24em;color:var(--dim); } .f-coord{color:var(--mut)} /* ---------- mobile art direction (portrait cut of the same film) ---------- */ @media(max-width:899px){ #hero{justify-content:flex-end} .hero-inner{ max-width:100%; padding:0 24px 0; position:relative; } .hero-inner::before{display:none} /* scrim so type sits on the glass, not fights it */ #hero::after{ content:'';position:absolute;left:0;right:0;bottom:0;height:62vh; background:linear-gradient(to top, rgba(13,13,13,.82) 22%, rgba(13,13,13,0)); z-index:-1;pointer-events:none; } .overline{margin-bottom:22px;font-size:9px;letter-spacing:.16em;white-space:nowrap} .h1{font-size:clamp(44px,13.5vw,64px);margin-bottom:22px} .sub{font-size:13px;max-width:100%} .ctas{margin-top:26px;flex-direction:column;gap:12px;margin-bottom:96px} .btn{text-align:center} .hero-hud{padding-bottom:18px} .hud-l{display:none} .env-type{font-size:56vw;top:2%} #who{height:160vh} #who .statement{font-size:26px} #products .sec-head{padding-left:24px} .strip{height:720vh} /* frosted bottom sheets — object stays the protagonist */ .seat,.seat-1,.seat-2,.seat-3,.seat-4{ justify-content:center;align-items:flex-end; padding:0 0 3.5vh; } .pane{width:min(470px,92vw);padding:24px 24px 20px 38px} .c-name{font-size:32px;margin-bottom:14px} .c-specs li{font-size:10.5px;padding:8px 0 8px 16px} .p-row{padding:16px 2px} .p-line{display:none} /* pillars ride over the dive's lit interior: scrim the copy band, drop the giant TECH (the 3D interior is the typography now) */ #pillars .env-type-b{display:none} #pillars::after{ content:'';position:absolute;inset:0;z-index:-1;pointer-events:none; background:linear-gradient(to bottom, rgba(13,13,13,0) 0%, rgba(13,13,13,.72) 24%, rgba(13,13,13,.72) 82%, rgba(13,13,13,0) 100%); } #rail{left:6px} .rail-label{font-size:8.5px} .f-big{margin-bottom:30px} .f-cols{grid-template-columns:1fr 1fr;gap:24px;padding-top:28px} .f-col-note{grid-column:1/-1} .f-base{margin-top:32px} } /* ============================================================ POPULATE pass — live-site chrome brought into the film (lang switcher · zh-CN type · Connect / NoID SSO modal) ============================================================ */ /* ---------- language switcher (live .lang-btn pattern, film-styled) ---------- */ .lang-selector{display:flex;align-items:center;gap:2px;margin-left:2px} .lang-btn{ font-family:var(--mono);font-size:10px;letter-spacing:.14em; background:transparent;color:var(--mut); border:1px solid transparent; padding:6px 9px;line-height:1;cursor:pointer; transition:color .35s var(--ease),border-color .35s var(--ease); } .lang-btn:hover{color:var(--tx)} .lang-btn.active{color:var(--acc);border-color:rgba(242,86,35,.45)} /* ---------- CONNECT button — mono, 1px border, orange tick ---------- */ .btn-connect{ display:inline-flex;align-items:center;gap:9px; font-family:var(--mono);font-size:10.5px;letter-spacing:.22em; color:var(--tx2);background:rgba(23,23,23,.4); border:1px solid rgba(255,255,255,.18); padding:9px 16px;cursor:pointer;line-height:1; transition:color .4s var(--ease),border-color .4s var(--ease),background .4s var(--ease); } .btn-connect .cb-tick{width:12px;height:1px;background:var(--acc);display:inline-block} .btn-connect:hover{color:var(--tx);border-color:rgba(242,86,35,.6);background:rgba(242,86,35,.07)} .lang-btn:focus-visible,.btn-connect:focus-visible{ outline:1px solid var(--acc);outline-offset:2px; } @media(max-width:599px){ .nav-links{gap:14px} .nav-links>a{display:none} .btn-connect{padding:8px 12px;letter-spacing:.16em} } /* ---------- zh-CN — Ugocranis has no CJK: per-glyph fallback to a clean system CJK stack; long tracking eases off so hanzi don't fall apart ---------- */ html[lang^="zh"]{ --disp:'Ugocranis','Noto Sans CJK SC','PingFang SC','Hiragino Sans GB','Source Han Sans SC','Microsoft YaHei',sans-serif; --body:'Space Grotesk','Noto Sans CJK SC','PingFang SC','Hiragino Sans GB','Microsoft YaHei',system-ui,sans-serif; --mono:'JetBrains Mono','Noto Sans Mono CJK SC','Noto Sans CJK SC','PingFang SC','Microsoft YaHei',ui-monospace,monospace; } html[lang^="zh"] .h1{line-height:1.12;letter-spacing:.02em} html[lang^="zh"] .outline{-webkit-text-stroke-width:1.25px} html[lang^="zh"] .overline{letter-spacing:.22em} html[lang^="zh"] .sec-overline,html[lang^="zh"] .pc-head{letter-spacing:.2em} html[lang^="zh"] .c-top{letter-spacing:.16em} html[lang^="zh"] .btn,html[lang^="zh"] .c-go,html[lang^="zh"] .btn-connect{letter-spacing:.18em} html[lang^="zh"] .sub{line-height:1.95;max-width:36ch} html[lang^="zh"] .c-specs li{letter-spacing:.03em} html[lang^="zh"] .rail-label{letter-spacing:.3em} html[lang^="zh"] .p-line,html[lang^="zh"] .pc-line{letter-spacing:.1em} html[lang^="zh"] .hud-l,html[lang^="zh"] .hud-r{letter-spacing:.18em} html[lang^="zh"] #who .statement{line-height:1.4} html[lang^="zh"] #who .quote{line-height:1.95} html[lang^="zh"] .f-base{letter-spacing:.14em} /* ---------- CONNECT — NoID SSO modal: extracted to the SHARED component connect-sso.js (launch pass). It self-injects .ncx-* styles + markup; nothing modal-related lives in this stylesheet any more. ---------- */ /* ============================================================ LAUNCH pass — THE RECORD (#reading) The film closes at the footer's bottom edge (FORGE t pins there); the page then continues as an editorial document. Solid sheet over the fixed stage; the film's own grammar: sec-overline + idx chips, hairlines, mono microtype, display names, orange scalpel accents. ============================================================ */ #reading{ position:relative; background:var(--bg); border-top:1px solid var(--hair); padding:14vh 0 10vh; } #reading .wrap{padding:0} .rd-open{padding-bottom:2vh} .rd-lede{ margin-top:34px; font-weight:300;font-size:clamp(22px,2.6vw,34px);line-height:1.3; color:var(--tx);max-width:30ch; } .rd-sec{margin-top:13vh} .rd-prose{margin-top:40px;max-width:68ch} .rd-prose p{ font-size:15.5px;font-weight:300;line-height:1.85;color:var(--tx2); } .rd-prose p+p{margin-top:22px} .rd-prose strong{color:var(--tx);font-weight:500} .rd-prose em{color:var(--tx);font-style:normal;border-bottom:1px solid rgba(242,86,35,.45)} .rd-prose a{ color:var(--tx);border-bottom:1px solid rgba(242,86,35,.55); transition:color .35s var(--ease),border-color .35s var(--ease); } .rd-prose a:hover{color:var(--acc);border-color:var(--acc)} .rd-callout{ margin-top:34px;padding:16px 20px; border:1px solid rgba(242,86,35,.35);border-left:2px solid var(--acc); font-family:var(--mono)!important;font-size:11px!important;letter-spacing:.14em; color:var(--acc)!important; } .rd-flag{ display:inline-block;margin-bottom:26px;padding:6px 12px; border:1px solid rgba(242,86,35,.4); font-family:var(--mono)!important;font-size:9.5px!important;letter-spacing:.3em; color:var(--acc)!important; } /* pillars, in full — the corner list grammar at document scale */ .rd-pillars{ margin-top:44px; display:grid;grid-template-columns:repeat(2,1fr);gap:1px; background:var(--hair); border:1px solid var(--hair); } .rd-pillar{background:var(--bg);padding:30px 32px 28px} .rd-p-num{font-family:var(--mono);font-size:10px;letter-spacing:.26em;color:var(--acc);margin-bottom:14px} .rd-p-name{ font-family:var(--disp);font-weight:400; font-size:clamp(26px,2.5vw,34px);line-height:1;letter-spacing:.015em; color:var(--tx);margin-bottom:16px; } .rd-p-desc{font-size:14px;font-weight:300;line-height:1.8;color:var(--tx2)} /* FAQ — details/summary, keyboard-native, film hairline rows */ .rd-faq{margin-top:44px;border-top:1px solid rgba(255,255,255,.08)} .rd-faq details{border-bottom:1px solid rgba(255,255,255,.08)} .rd-faq summary{ display:flex;align-items:baseline;gap:clamp(16px,2.6vw,36px); padding:22px 6px;cursor:pointer;list-style:none; -webkit-user-select:none;user-select:none; } .rd-faq summary::-webkit-details-marker{display:none} .rd-q-num{font-family:var(--mono);font-size:10px;letter-spacing:.2em;color:var(--acc);min-width:5.5ch;flex:none} .rd-q{ flex:1; font-family:var(--disp);font-weight:400; font-size:clamp(17px,1.9vw,23px);letter-spacing:.015em;line-height:1.25; color:var(--tx); transition:color .35s var(--ease); } .rd-faq summary:hover .rd-q{color:var(--acc)} .rd-q-mark{ position:relative;flex:none;width:11px;height:11px;align-self:center; } .rd-q-mark::before,.rd-q-mark::after{ content:'';position:absolute;background:var(--mut); transition:transform .35s var(--ease),background .35s var(--ease); } .rd-q-mark::before{left:0;right:0;top:5px;height:1px} .rd-q-mark::after{top:0;bottom:0;left:5px;width:1px} .rd-faq details[open] .rd-q-mark::after{transform:scaleY(0)} .rd-faq details[open] .rd-q-mark::before{background:var(--acc)} .rd-faq summary:focus-visible{outline:1px solid var(--acc);outline-offset:2px} .rd-a{ padding:0 6px 26px calc(5.5ch + clamp(16px,2.6vw,36px)); max-width:74ch; font-size:14.5px;font-weight:300;line-height:1.85;color:var(--tx2); } .rd-a strong{color:var(--tx);font-weight:500} .rd-a a{ color:var(--tx);border-bottom:1px solid rgba(242,86,35,.55); transition:color .35s var(--ease),border-color .35s var(--ease); } .rd-a a:hover{color:var(--acc);border-color:var(--acc)} /* read further — deep pages, f-col link grammar at full width */ .rd-links{margin-top:44px;border-top:1px solid rgba(255,255,255,.08)} .rd-links a{ display:flex;align-items:baseline;gap:clamp(14px,2.4vw,32px); padding:16px 6px; border-bottom:1px solid rgba(255,255,255,.08); transition:background .35s var(--ease); } .rd-links a:hover{background:rgba(242,86,35,.04)} .rd-l-name{ font-family:var(--mono);font-size:11.5px;letter-spacing:.2em;color:var(--tx); min-width:min(30ch,42%);flex:none; transition:color .35s var(--ease); } .rd-links a:hover .rd-l-name{color:var(--acc)} .rd-l-note{flex:1;font-size:13px;font-weight:300;color:var(--mut)} .rd-l-arr{ font-family:var(--mono);font-size:12px;color:var(--dim); transition:color .35s var(--ease),transform .35s var(--ease);display:inline-block; } .rd-links a:hover .rd-l-arr{color:var(--acc);transform:translateX(5px)} .rd-links a:focus-visible{outline:1px solid var(--acc);outline-offset:-1px} .rd-end{ display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap; margin-top:11vh;padding-top:24px;border-top:1px solid var(--hair); font-family:var(--mono);font-size:9.5px;letter-spacing:.24em;color:var(--dim); } .rd-last{margin-bottom:0} /* zh — reading layer follows the same CJK easing as the film */ html[lang^="zh"] .rd-prose p{line-height:2.05} html[lang^="zh"] .rd-a{line-height:2.0} html[lang^="zh"] .rd-q{letter-spacing:.03em} html[lang^="zh"] .rd-l-name{letter-spacing:.12em} @media(max-width:899px){ #reading{padding:12vh 0 9vh} .rd-sec{margin-top:11vh} .rd-pillars{grid-template-columns:1fr} .rd-pillar{padding:24px 22px 22px} .rd-a{padding-left:6px} .rd-l-name{min-width:100%;margin-bottom:2px} .rd-links a{flex-wrap:wrap;row-gap:2px;padding:14px 4px} .rd-l-note{flex:1 1 auto} } /* ---------- reduced motion: one beautiful still + static content ---------- */ @media(prefers-reduced-motion:reduce){ *,*::before,*::after{animation:none!important;transition:none!important} .rv,.h1 .w,.overline,.sub,.ctas,.hero-hud{opacity:1!important;transform:none!important;clip-path:none!important} #deck,#rail,#scrim,#pillars-corner{display:none!important} #pillars{display:flex!important;height:auto!important;padding:14vh 0} #who{height:auto;padding:16vh 0} .strip{height:16vh} #end{height:auto;padding:14vh 0} .rm-cards{ display:grid!important; grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:22px; width:min(1180px,90vw);margin:0 auto;padding:6vh 0 10vh; } .rm-card{ background:linear-gradient(165deg, rgba(36,36,36,.62), rgba(23,23,23,.38)); border:1px solid rgba(255,255,255,.09);border-radius:3px; padding:26px 28px; } .rm-cat{font-family:var(--mono);font-size:10px;letter-spacing:.26em;color:var(--mut);margin-bottom:10px} .rm-name{font-family:var(--disp);font-weight:400;font-size:34px;color:var(--tx);margin-bottom:14px} .rm-card ul{list-style:none;border-top:1px solid var(--hair);margin-bottom:14px} .rm-card li{font-family:var(--mono);font-size:11px;color:var(--tx2);padding:8px 0;border-bottom:1px solid var(--hair)} .rm-card a{font-family:var(--mono);font-size:10.5px;letter-spacing:.2em;color:var(--acc)} } /* ---------- THE site footer — exactly one, at the true document end ---------- */ #site-foot{ position:relative;z-index:3; background:#141414; border-top:1px solid var(--hair); } #site-foot .wrap{padding:9vh 0 6vh} #site-foot .f-base{margin-top:44px} @media(max-width:760px){ #site-foot .wrap{padding:7vh 0 5vh} } /* ---------- THE RECORD, upgraded: the film's closing shot stays alive behind it; the document carries the film's editorial grammar ---------- */ #reading{ background:linear-gradient(180deg, rgba(18,18,18,.88) 0%, rgba(23,23,23,.965) 18%, rgba(23,23,23,.985) 100%); isolation:isolate; } html.no-webgl #reading{background:var(--bg)} .rd-title{ font-family:var(--disp);font-weight:400; font-size:clamp(46px,6.4vw,96px);line-height:.94; margin-bottom:26px;letter-spacing:.004em; } .rd-sec{position:relative} .rd-ghost{ position:absolute;right:-.04em;top:-.42em;z-index:-1; font-family:var(--disp);font-size:clamp(120px,17vw,260px);line-height:1; color:transparent;-webkit-text-stroke:1px rgba(222,222,222,.075); pointer-events:none;user-select:none; } .rd-pillar{ background:rgba(28,28,28,.55); border:1px solid var(--hair); position:relative; transition:border-color .45s var(--ease), background .45s var(--ease); } .rd-pillar::before{ content:'';position:absolute;top:-1px;left:-1px;width:14px;height:14px; border-top:1px solid rgba(242,86,35,.85);border-left:1px solid rgba(242,86,35,.85); } .rd-pillar:hover{border-color:rgba(242,86,35,.4);background:rgba(30,30,30,.72)} .rd-callout{ font-family:var(--disp);font-size:clamp(20px,2.5vw,34px); color:var(--tx);border-left:2px solid var(--acc); padding:6px 0 6px 26px;margin-top:34px;letter-spacing:.01em; } .rd-lede{max-width:56ch} /* reveals — film grammar (clip + rise), CSS-transitioned, observer-armed */ .rds{ opacity:0;transform:translateY(28px); clip-path:inset(0 0 14% 0); transition:opacity .85s var(--ease), transform .85s var(--ease), clip-path .85s var(--ease); } .rds.in{opacity:1;transform:none;clip-path:inset(0 0 0% 0)} html.scrub .rds, html.no-webgl .rds{opacity:1;transform:none;clip-path:none;transition:none} @media(prefers-reduced-motion: reduce){ .rds{opacity:1;transform:none;clip-path:none;transition:none} } @media(max-width:760px){ .rd-ghost{font-size:clamp(90px,26vw,150px);top:-.3em} .rd-title{font-size:clamp(40px,11vw,64px)} } /* ============================================================ PHASE 2 — POINTER LIFE (life.js drives; this sheet paints) Cursor-aware light on the record's panes, a magnetic pull on the primary CTAs, a tick on the rd-links rows. Subtle by law: the light is 7% orange at its hot centre, the pull tops out at 8px. THE GATE IS BEHAVIOUR, NOT A MEDIA QUERY. Every painted state here waits on something life.js sets — .lit, .mag-on, an inline transform — and life.js only sets them for a pointer that is NOT a touch. So a phone gets the plain document, and so does the still harness (which has no pointer at all: it never even reaches this code). Under prefers-reduced-motion the film sheet's blanket transition:none resolves all of it, instantly, to its correct rest state: light off, CTA at rest. ============================================================ */ /* ---------- the light: a soft radial that follows the cursor ---------- */ .rd-pillar,.rp-stat,.rp-fair,.sh-pane,.npn-fair,.lq-lat-panel,.vsg-row{ position:relative; --lx:50%; --ly:50%; } .rd-pillar::after,.rp-stat::after,.rp-fair::after, .sh-pane::after,.npn-fair::after,.lq-lat-panel::after,.vsg-row::after{ content:'';position:absolute;inset:0; pointer-events:none; background:radial-gradient(260px circle at var(--lx) var(--ly), rgba(242,86,35,.07) 0%, rgba(222,222,222,.035) 38%, rgba(222,222,222,0) 72%); opacity:0; transition:opacity .5s var(--ease); } .rd-pillar.lit::after,.rp-stat.lit::after,.rp-fair.lit::after, .sh-pane.lit::after,.npn-fair.lit::after,.lq-lat-panel.lit::after,.vsg-row.lit::after{ opacity:1; } /* the ledger rows are rules, not panels — the light stays a whisper there */ .vsg-row::after{ background:radial-gradient(320px circle at var(--lx) var(--ly), rgba(242,86,35,.045) 0%, rgba(222,222,222,0) 66%); } /* ---------- the magnet: the primary CTA leans into the cursor ---------- .mag-on = tracking (short, linear — it must feel attached to the hand). released = the springy return (a touch of overshoot, then still). transform is ONLY ever written by life.js, so with no pointer these two rules describe a button that never moves. */ .btn-a,.c-go,.rp-cta .btn{ transition:transform .55s cubic-bezier(.34,1.56,.64,1), color .4s var(--ease), background .4s var(--ease), border-color .4s var(--ease); } .btn-a.mag-on,.c-go.mag-on,.rp-cta .btn.mag-on{ transition:transform .09s linear, color .4s var(--ease), background .4s var(--ease), border-color .4s var(--ease); } /* ---------- the tick: an rd-links row answers hover AND focus ---------- */ .rd-links a{position:relative} .rd-links a::before{ content:'';position:absolute;left:0;top:0;bottom:0;width:1px; background:var(--acc); transform:scaleY(0);transform-origin:50% 100%; transition:transform .4s var(--ease); pointer-events:none; } .rd-links a:hover::before, .rd-links a:focus-visible::before{transform:scaleY(1)} .rd-links a:focus-visible .rd-l-name{color:var(--acc)} .rd-links a:focus-visible .rd-l-arr{color:var(--acc);transform:translateX(5px)} /* the still harness (html.scrub) and reduced motion: everything at rest */ html.scrub .lit::after{opacity:0!important} @media(prefers-reduced-motion:reduce){ .rd-pillar::after,.rp-stat::after,.rp-fair::after,.sh-pane::after, .npn-fair::after,.lq-lat-panel::after,.vsg-row::after{display:none} .btn-a,.c-go,.rp-cta .btn{transform:none!important} .rd-links a::before{display:none} } /* ---------- the sound toggle, seated in the nav ---------- sound.js injects the button's own styles (it is already a visual sibling of .lang-btn — same mono 10px/.14em, same 1px border, same orange-when-on, same focus ring). All this does is give it a seat that lines up. */ #sound-mount{display:inline-flex;align-items:center} @media(max-width:899px){ /* the nav is tight on a phone: the glyph keeps its target, loses its air */ #sound-mount .noid-snd{padding:6px 4px} } @media print{ #sound-mount{display:none!important} }