/* ============================================================ SURPLUS — shared stylesheet (DS-SR-003) Cool-dominant neo-brutalism + a touch of cassette-futurism. Tokens + site chrome + base components. Page-specific UI (readouts, drop zones, analyzers) stays inline on each page. Modes: data-mode="paper" (light) / "night" (dark). VERSION STATE (corrected s168d — this header said "v3" for two major versions and sent a session off hunting for a newer file that does not exist). ONE stylesheet, layered by era: - base tokens + chrome below = v3/v4, applies everywhere - "SURPLUS v5 FOUNDATION" = session 104, scoped [data-v5] - "SURPLUS v5 PHASE B" = session 106, scoped [data-v5] v5 rules are inert until a page sets data-v5 on . PALETTE — FOUR BRAND ACCENTS, both modes: teal / lime / purple / red, each with an -ink variant tuned per mode. Plus TWO SEMANTIC accents promoted in s168e: amber (caution / off target) and green (pass / on target), also with -ink variants. Before s168e those two lived only in per-page bridge blocks, which is why a card could be "on brand" and still not match the page it came from. The pages now alias the shared tokens instead of carrying their own copies. Signal Check's canvases read the resolved values at signal-check-core.js:2433-2435. Full map: PROJECTS/bwk-website/02-outputs/palette-map.md ============================================================ */ @import url('https://fonts.googleapis.com/css2?family=Anton&family=IBM+Plex+Mono:wght@400;500;600&family=Archivo:wght@400;500;600;700&display=swap'); /* ---------- tokens ---------- */ :root,[data-mode="paper"]{ --teal:#067E7B; --lime:#C2F526; --purple:#5A38FF; --red:#FF2D17; /* paper: deep teal for solid buttons on newsprint (DS-SR-003) */ --teal-ink:#067E7B; --purple-ink:#3E27C9; --red-ink:#C42410; --lime-ink:#4F6E00; /* deep chartreuse: lime foreground that stays legible on light paper */ --paper:#ECECEA; --paper-2:#F4F4F2; --plate:#FFFFFF; --recess:#DCDCDA; --ink:#0A0A0A; --ink-soft:#2A2A2A; --line:#C4C4C2; --glass:#101216; --on-teal:#FFFFFF; --on-lime:#0E1206; --shadow:#0A0A0A; --mega-sh:#0A0A0A; --bd-col:#0A0A0A; --recess-sh:rgba(10,10,10,.28); /* white on deep teal, ~4.9:1 AA */ /* s168e: SEMANTIC ACCENTS promoted out of the per-page bridge blocks. Amber follows the --lime pattern (bright fill in both modes, deep ink for paper); green follows --teal (deep in light, bright in dark). Every value here was already live on the site in signal-check / eq-trainer / compression-trainer, so promoting them changed nothing visually -- it moved them from four page-level copies into one place. Amber = caution / off target. Green = pass / on target. */ --amber:#F5B400; --amber-ink:#B5790A; /* fill: black 10.8:1 · ink on paper 3.1:1 (UI/large only) */ --green:#1F8F4A; --green-ink:#1F8F4A; /* fill: black 4.8:1 · ink on paper 3.5:1 */ --on-amber:#0A0A0A; --on-green:#0A0A0A; color-scheme:light; } [data-mode="night"]{ --paper:#0B0B0B; --paper-2:#151515; --plate:#191919; --recess:#0E0E0E; --ink:#FAFAFA; --ink-soft:#C8C8C8; --line:#333333; --teal:#00E0DD; --lime:#C2F526; --purple:#6E51FF; --red:#FF4733; --teal-ink:#33EFEC; --purple-ink:#9D8BFF; --red-ink:#FF4733; --lime-ink:#C2F526; --shadow:#2E2E2E; --mega-sh:#3C3C3C; --bd-col:#4A4A4A; --recess-sh:#000000; --on-teal:#04100F; /* night keeps dark text on the bright teal fill */ --amber:#F5B400; --amber-ink:#F5B400; /* night: one bright amber does both jobs */ --green:#5FD38A; --green-ink:#5FD38A; /* fill: black 10.5:1 · reads clean on #0B0B0B */ --on-amber:#0A0A0A; --on-green:#0A0A0A; color-scheme:dark; } :root{ --fd:"Anton",sans-serif; --fm:"IBM Plex Mono",monospace; --fs:"Archivo",system-ui,sans-serif; --bd:4px solid var(--bd-col); --hard:9px 9px 0 0 var(--shadow); --hard-sm:3px 3px 0 0 var(--shadow); --t1:90ms; --t2:170ms; --ease:cubic-bezier(.2,.85,.25,1); --wrap:1440px; } /* ---------- base ---------- */ *{box-sizing:border-box} html{scroll-behavior:smooth; background:var(--paper); overflow-x:clip; -webkit-text-size-adjust:100%} body{ margin:0; background:transparent; color:var(--ink); font-family:var(--fs); line-height:1.5; overflow-x:hidden; max-width:100%; -webkit-font-smoothing:antialiased; } a{color:var(--teal-ink)} :focus:not(:focus-visible){outline:none} :focus-visible{outline:3px solid var(--ink);outline-offset:2px} .sx-skip{position:absolute;left:-999px;top:0;background:var(--lime);color:var(--on-lime);padding:8px 16px;font-family:var(--fm);z-index:9999;text-decoration:none} .sx-skip:focus{left:8px;top:8px} .sx-wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px} /* ---------- section reveal (one-time, reduced-motion safe) ---------- */ .reveal{opacity:0;transform:translateY(18px);transition:opacity .55s var(--ease),transform .55s var(--ease)} .reveal.in{opacity:1;transform:none} /* ---------- nav bar ---------- */ .sx-bar{border-bottom:var(--bd);background:var(--plate);position:sticky;top:0;z-index:200} .sx-bar-in{display:flex;align-items:center;justify-content:space-between;gap:16px;max-width:var(--wrap);margin:0 auto;padding:10px 24px} .sx-brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink)} .sx-brand img{height:34px;width:34px;border-radius:50%;border:2px solid var(--ink);object-fit:cover;display:block} .sx-brand b{font-family:var(--fd);font-size:1.05rem;letter-spacing:.02em;color:var(--ink)} .sx-brand .dot{width:10px;height:10px;background:var(--teal);border:2px solid var(--ink);border-radius:50%} .sx-tools{display:flex;align-items:center;gap:10px;position:relative} .sx-mode{ font-family:var(--fm);font-size:.7rem;font-weight:600;letter-spacing:.06em; background:var(--paper-2);border:var(--bd);box-shadow:var(--hard-sm); padding:7px 11px;cursor:pointer;color:var(--ink);min-height:36px; transition:transform var(--t1) var(--ease);touch-action:manipulation} .sx-mode:active{transform:translate(3px,3px);box-shadow:0 0 0 0 var(--shadow)} .sx-burger{ font-family:var(--fm);font-size:1.3rem;line-height:1;background:var(--paper-2); border:var(--bd);box-shadow:var(--hard-sm);color:var(--ink);cursor:pointer; padding:3px 10px;min-height:36px;min-width:42px;transition:transform var(--t1) var(--ease);touch-action:manipulation} .sx-burger:active{transform:translate(3px,3px);box-shadow:0 0 0 0 var(--shadow)} .sx-drawer{ display:none;position:absolute;top:48px;right:0;width:230px; background:var(--plate);border:var(--bd);box-shadow:var(--hard);padding:8px 0;z-index:210;flex-direction:column} .sx-drawer.open{display:flex} .sx-drawer a{ font-family:var(--fm);font-size:.82rem;font-weight:600;letter-spacing:.05em; color:var(--ink-soft);padding:10px 18px;text-decoration:none;transition:color var(--t1),background var(--t1)} .sx-drawer a:hover{color:var(--ink);background:var(--recess)} .sx-drawer a.active{color:var(--teal-ink)} .sx-drawer-div{height:2px;background:var(--line);margin:6px 18px} /* ---------- ghost numerals (static decals) ---------- */ .ghost{position:absolute;font-family:var(--fd);font-size:42vw;line-height:.8;color:transparent;-webkit-text-stroke:2px var(--line);opacity:.28;pointer-events:none;z-index:0;user-select:none} /* ---------- hero / part bar ---------- */ .sx-partbar{ display:flex;flex-wrap:wrap;gap:8px 18px;align-items:center; font-family:var(--fm);font-size:.72rem;font-weight:600;letter-spacing:.06em; color:var(--ink-soft);border-bottom:var(--bd);padding-bottom:10px;margin-bottom:18px} .sx-partbar .pn{color:var(--ink)} .sx-pill{font-family:var(--fm);font-size:.66rem;font-weight:600;letter-spacing:.06em;padding:3px 8px;border:2px solid var(--ink);display:inline-flex;gap:6px;align-items:center;white-space:nowrap;color:var(--ink)} .sx-pill.active{background:var(--teal);color:var(--on-teal)} .sx-pill.pro{background:var(--purple);color:#fff} .sx-pill.crit{background:var(--red);color:#fff} .sx-h1{font-family:var(--fd);font-size:clamp(2.6rem,8vw,5.4rem);line-height:.92;margin:0 0 8px;letter-spacing:.01em;color:var(--teal-ink);text-shadow:3px 3px 0 var(--shadow)} .sx-h1 .sk{display:inline-block;transform:skewX(-9deg);color:var(--purple-ink)} .sx-h1 .accent{display:inline-block;transform:skewX(-9deg);color:var(--purple-ink)} .sx-echo{position:relative} .sx-echo::after{content:attr(data-echo);position:absolute;left:3px;top:3px;color:var(--teal);z-index:-1;opacity:.55} .sx-sub{font-family:var(--fm);font-size:.9rem;color:var(--ink-soft);max-width:62ch;margin:0} /* ---------- device plate ---------- */ .sx-plate{background:var(--plate);border:var(--bd);box-shadow:var(--hard);margin:24px 0} .sx-plate-pb{ display:flex;justify-content:space-between;align-items:center;gap:12px; font-family:var(--fm);font-size:.7rem;font-weight:600;letter-spacing:.07em; padding:10px 16px;border-bottom:var(--bd);background:var(--paper-2);color:var(--ink-soft)} .sx-plate-body{padding:20px 16px} .sx-wear{display:flex;flex-wrap:wrap;gap:8px 22px;align-items:center;padding:14px 16px;border-top:var(--bd);background:var(--paper-2);font-family:var(--fm);font-size:.68rem;letter-spacing:.05em;color:var(--ink-soft)} .sx-barcode{height:24px;display:flex;gap:2px;align-items:stretch} .sx-barcode i{width:2px;background:var(--ink)} .sx-barcode i.w{width:4px} .sx-disc{width:28px;height:28px;border-radius:50%;background:conic-gradient(from 0deg,var(--teal),var(--purple),var(--lime),var(--teal));border:2px solid var(--ink)} .sx-note{font-family:var(--fm);font-size:.74rem;color:var(--ink-soft);background:var(--recess);border-left:4px solid var(--teal);padding:10px 14px;margin:18px 0;line-height:1.6} .sx-note b{color:var(--ink)} /* ---------- buttons ---------- */ .sx-btn{ font-family:var(--fm);font-size:.82rem;font-weight:600;letter-spacing:.05em; border:var(--bd);box-shadow:var(--hard-sm);padding:12px 18px;cursor:pointer; background:var(--paper-2);color:var(--ink);text-decoration:none;display:inline-flex; align-items:center;justify-content:center;gap:8px;min-height:44px; transition:transform var(--t1) var(--ease);touch-action:manipulation} .sx-btn:active{transform:translate(3px,3px);box-shadow:0 0 0 0 var(--shadow)} .sx-btn.action{background:var(--lime);color:var(--on-lime)} /* reserved hero action, one per screen */ .sx-btn.primary{background:var(--teal);color:var(--on-teal)} .sx-btn.brand{background:var(--purple);color:#fff} .sx-btn.record{background:var(--red);color:#fff} .sx-btn.ghost{position:static;background:transparent;color:var(--ink);opacity:1;pointer-events:auto;-webkit-text-stroke:0;line-height:normal;font-family:var(--fm);font-size:.82rem;z-index:auto;user-select:auto} .sx-btn[disabled]{opacity:.45;cursor:not-allowed;box-shadow:none} /* ---------- card grid ---------- */ .sx-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:18px;margin-top:18px} .sx-card{ display:flex;flex-direction:column;gap:10px;padding:20px;text-decoration:none; background:var(--plate);border:var(--bd);box-shadow:var(--hard);color:var(--ink); transition:transform var(--t1) var(--ease)} .sx-card:hover{transform:translate(-2px,-2px);box-shadow:11px 11px 0 0 var(--shadow)} .sx-card:active{transform:translate(3px,3px);box-shadow:0 0 0 0 var(--shadow)} .sx-card-top{display:flex;justify-content:space-between;align-items:center;gap:10px} .sx-card-name{font-family:var(--fd);font-size:1.5rem;letter-spacing:.03em;color:var(--ink)} .sx-card-arrow{font-family:var(--fm);font-size:1.1rem;color:var(--teal-ink)} .sx-card-hook{font-size:.95rem;color:var(--ink-soft);margin:0} .sx-card-feat{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:5px} .sx-card-feat li{font-family:var(--fm);font-size:.74rem;color:var(--ink-soft);padding-left:14px;position:relative} .sx-card-feat li::before{content:"\203A";position:absolute;left:0;color:var(--teal-ink)} .sx-card-cta{font-family:var(--fm);font-size:.78rem;font-weight:600;letter-spacing:.08em;color:var(--teal-ink);margin-top:auto} .sx-card.soon{opacity:.6} .sx-card.soon:hover{transform:none;box-shadow:var(--hard)} .sx-badge{font-family:var(--fm);font-size:.64rem;font-weight:600;letter-spacing:.1em;border:2px solid var(--purple);color:var(--purple-ink);padding:2px 7px} /* ---------- featured plate ---------- */ .sx-feature{display:grid;grid-template-columns:1.5fr 1fr;gap:18px;align-items:center;padding:24px 20px} .sx-feature .ft-tag{font-family:var(--fm);font-size:.72rem;font-weight:600;letter-spacing:.12em;color:var(--purple-ink)} .sx-feature .ft-name{font-family:var(--fd);font-size:2rem;letter-spacing:.03em;margin:4px 0 6px;color:var(--ink)} .sx-feature .ft-hook{color:var(--ink-soft);font-size:.96rem;margin:0 0 10px} .sx-feature .ft-cta{font-family:var(--fm);font-size:.82rem;font-weight:600;letter-spacing:.08em;color:var(--teal-ink)} .sx-feature .ft-side{font-family:var(--fm);font-size:.78rem;color:var(--ink-soft);line-height:1.8;text-align:right} .sx-feature .ft-side b{color:var(--ink)} @media(max-width:680px){.sx-feature{grid-template-columns:1fr}.sx-feature .ft-side{text-align:left;border-top:2px solid var(--line);padding-top:12px}} /* ---------- section headings ---------- */ .sx-eyebrow{font-family:var(--fm);font-size:.72rem;font-weight:600;letter-spacing:.14em;color:var(--teal-ink);text-align:center;margin:0 0 6px} .sx-h2{font-family:var(--fd);font-size:clamp(1.8rem,5vw,3rem);line-height:1;letter-spacing:.02em;text-align:center;margin:0 0 8px;color:var(--ink);text-transform:uppercase} .sx-lede{font-family:var(--fm);font-size:.86rem;color:var(--ink-soft);text-align:center;max-width:64ch;margin:0 auto} /* ---------- footer ---------- */ .sx-foot{border-top:var(--bd);margin-top:48px;background:var(--plate);padding:28px 24px;text-align:center} .sx-foot-links{display:flex;flex-wrap:wrap;gap:18px;justify-content:center;margin-bottom:12px} .sx-foot-link{display:inline-flex;align-items:center;gap:6px;color:var(--ink-soft);font-family:var(--fm);font-size:.7rem;font-weight:600;letter-spacing:.08em;text-decoration:none} .sx-foot-link:hover{color:var(--teal-ink)} .sx-foot-copy{font-family:var(--fm);font-size:.7rem;color:var(--ink-soft)} .sx-signoff{font-family:var(--fd);font-size:.95rem;letter-spacing:.06em;color:var(--ink-soft);margin-top:8px} /* ---------- back to top ---------- */ /* s134: .sx-top (back-to-top) removed — the strip rail is the jump nav */ /* ---------- responsive ---------- */ @media(max-width:760px){ .sx-wrap{padding:0 16px} .sx-bar-in{padding:10px 16px} .sx-brand b{font-size:.95rem} .sx-feature{grid-template-columns:1fr} } @media(prefers-reduced-motion:reduce){ *{scroll-behavior:auto} .ghost{display:none} .reveal{opacity:1!important;transform:none!important} } /* card body left, CTA centered */ .sx-card-hook,.sx-card-feat{text-align:left} .sx-card-cta{align-self:center} /* Anton (display font) reads uppercase site-wide */ .sx-h1,.sx-card-name,.sx-feature .ft-name,.sx-signoff{text-transform:uppercase} /* ---------- 2.0 rail language (shared additive components, session 95) ---------- */ .kick{font-family:var(--fm);font-size:.72rem;font-weight:600;letter-spacing:.14em;color:var(--ink-soft);display:inline-block} .kick i{color:var(--teal-ink);font-style:normal} @keyframes railgl{0%,100%{text-shadow:3px 3px 0 var(--shadow)}30%{text-shadow:3px 3px 0 var(--shadow),-3px 0 0 var(--teal),3px 0 0 var(--purple)}45%{text-shadow:3px 3px 0 var(--shadow),3px 0 0 var(--teal),-3px 0 0 var(--purple);clip-path:inset(0 0 55% 0)}55%{clip-path:inset(0 0 0 0)}70%{text-shadow:3px 3px 0 var(--shadow),-2px 0 0 var(--teal),2px 0 0 var(--purple);clip-path:inset(45% 0 0 0)}80%{clip-path:inset(0 0 0 0)}} .sx-h1.gl{animation:railgl .7s steps(4) .3s 1} .sx-h1.gl:hover{animation:railgl .5s steps(3) 1} .rail-marq{width:100%;overflow:hidden;border-top:var(--bd);border-bottom:var(--bd);background:var(--purple);color:#fff;white-space:nowrap;margin:34px 0 0} .rail-marq .row{display:inline-block;padding:11px 0;font-family:var(--fm);font-weight:600;font-size:1rem;letter-spacing:.1em;text-transform:uppercase;will-change:transform;animation:railscroll 18s linear infinite} .rail-marq .row span{padding:0 22px} .rail-marq .row span i{color:var(--lime-ink);font-style:normal} @keyframes railscroll{from{transform:translateX(0)}to{transform:translateX(-50%)}} .rail-row{display:grid;grid-template-columns:minmax(240px,340px) 1fr;gap:60px;padding:46px 0;border-top:2px solid var(--line);align-items:start} .rail-head .num{font-family:var(--fd);font-size:2.4rem;line-height:1;color:var(--purple-ink)} .rail-head .kick{display:block;margin:10px 0 6px} .rail-head h2{font-family:var(--fd);font-size:2rem;line-height:.95;letter-spacing:.01em;text-transform:uppercase;color:var(--teal-ink);margin:0} .rail-head h2:hover{animation:railgl .5s steps(3) 1} .rail-prose{font-family:var(--fm);font-size:.94rem;color:var(--ink-soft);line-height:1.75;max-width:70ch} .sx-card.rail{border-top-width:7px} @media(max-width:820px){.rail-row{grid-template-columns:1fr;gap:18px}.rail-head .num{font-size:2rem}} @media(prefers-reduced-motion:reduce){.sx-h1.gl,.sx-h1.gl:hover,.rail-head h2:hover,.rail-marq .row{animation:none!important;clip-path:none!important}} /* ---------- 2.0 Option 2: big banded headers (session 98) ---------- */ .d2-sec{padding:48px 0;border-top:2px solid var(--line)} .d2-sec .kick{display:block;margin-bottom:10px} .d2-sec h2{font-family:var(--fd);font-size:clamp(2.4rem,5.2vw,4.4rem);line-height:.88;letter-spacing:.01em;text-transform:uppercase;color:var(--teal-ink);text-shadow:3px 3px 0 var(--shadow);margin:0 0 20px} .d2-sec h2:hover{animation:railgl .5s steps(3) 1} .d2-body{font-family:var(--fm);font-size:.94rem;color:var(--ink-soft);line-height:1.7;max-width:74ch} .d2-two{display:grid;grid-template-columns:1fr 1fr;gap:48px} @media(max-width:820px){.d2-two{grid-template-columns:1fr;gap:24px}} @media(prefers-reduced-motion:reduce){.d2-sec h2:hover{animation:none!important}} /* ============================================================ 2.0 MOTION LAYER (DS-SR-003 / spec v1 ingredients 4,7 + reactive bg) Driven by data-motion on : off | standard | bold. Pre-paint snippet in base.njk sets the default (off if the OS asks for reduced motion, else standard) before first paint. The reactive canvas (#sx-bg) is rendered by base.njk only on pages without data-motion-bg="off" (the audio-canvas tool pages opt out). Grain + scanlines REMOVED s148 (Kevin's call, alongside the frame-drop fix in surplus.js -- see frame() there). ============================================================ */ #sx-bg{position:fixed;inset:0;z-index:-1;display:none;pointer-events:none} /* STANDARD (spec midpoint) */ [data-motion="standard"] #sx-bg{display:block} /* BOLD (louder variant) */ [data-motion="bold"] #sx-bg{display:block} /* reactive background is always suppressed on audio-canvas tool pages */ [data-motion-bg="off"] #sx-bg{display:none!important} /* s137 DIFFUSION: Kevin asked for the grid lines to stop reading as hard lines. Half of that is the vertical alpha falloff in drawGrid; this is the other half. A CSS filter is composited once on the GPU — ctx.filter would cost a full-canvas blur pass every single frame. 0.9px = the "30" he landed on in the prototype. */ [data-v5] #sx-bg{filter:blur(0.9px)} /* proximity light-up: opt-in per card via .sx-react (JS sets inline vars) */ .sx-react{transition:border-color var(--t1) var(--ease),box-shadow var(--t1) var(--ease),transform var(--t1) var(--ease)} [data-motion="off"] .sx-react{transition:none} /* motion toggle button in the nav mirrors .sx-mode */ #sxMotion{min-width:4.5em} /* ---------- 2.0 HOVER JITTER (ingredient 4b) — mechanical, stepped, one-shot ---------- Layers on top of the existing button press + card lift. Driven by data-motion: off = nothing, standard = 1px quick, bold = 2px with more steps. Card keyframes end on the -2,-2 hover lift so there is no jump-back. Disabled/soon excluded. */ @keyframes sxjit-s{0%{transform:translate(0,0)}33%{transform:translate(-1px,1px)}66%{transform:translate(1px,-1px)}100%{transform:translate(0,0)}} @keyframes sxjit-b{0%{transform:translate(0,0)}20%{transform:translate(-2px,1px)}40%{transform:translate(2px,-1px)}60%{transform:translate(-1px,-2px)}80%{transform:translate(1px,2px)}100%{transform:translate(0,0)}} @keyframes sxjit-card-s{0%{transform:translate(0,0)}40%{transform:translate(-3px,-1px)}70%{transform:translate(-1px,-3px)}100%{transform:translate(-2px,-2px)}} @keyframes sxjit-card-b{0%{transform:translate(0,0)}25%{transform:translate(-4px,0)}50%{transform:translate(0,-4px)}75%{transform:translate(-3px,-3px)}100%{transform:translate(-2px,-2px)}} [data-motion="standard"] .sx-btn:not([disabled]):hover{animation:sxjit-s .16s steps(3) 1} [data-motion="bold"] .sx-btn:not([disabled]):hover{animation:sxjit-b .22s steps(5) 1} [data-motion="standard"] .sx-card:not(.soon):hover{animation:sxjit-card-s .16s steps(3) 1} [data-motion="bold"] .sx-card:not(.soon):hover{animation:sxjit-card-b .22s steps(5) 1} @media(prefers-reduced-motion:reduce){.sx-btn:hover,.sx-card:hover{animation:none!important}} /* ---------- 2.0 STICKER / SCRIBBLE MARKS (ingredient 6) — hand-placed per page ---------- 3 marks: .sx-stk-circle (a key word), .sx-stk-underline (a phrase), .sx-stk-arrow (points at a click target, colored opposite the target). Rough hand-drawn look via the #rough / #rough-a filters (defined once in base.njk). Wrap the target word in .sx-mk-host and drop a mark svg inside; arrows get bespoke position per placement. All marks are pointer-events:none (never block a click) and static (not tied to data-motion). Marks over type sit on top; arrows near buttons sit behind and tuck under. Arrows hide under 640px (need side room). */ .sx-mk-host{position:relative;display:inline-block} .sx-stk{position:absolute;pointer-events:none;overflow:visible;z-index:5} .sx-stk-circle,.sx-stk-underline{filter:url(#rough)} .sx-stk-circle{left:-16px;top:-12px;width:calc(100% + 34px);height:calc(100% + 26px)} .sx-stk-underline{left:-4px;bottom:-14px;width:calc(100% + 12px);height:20px} .sx-stk-arrow{filter:url(#rough-a);z-index:1} @media(max-width:640px){.sx-stk-arrow{display:none}} /* ============================================================ SURPLUS v5 FOUNDATION (Phase A css, session 104) Scoped layer: every rule activates ONLY on pages that set data-v5 on . Live v4 pages are pixel-identical until a page opts in (Phase B index -> C marketing -> D tools -> E signal-check). Ported from the approved prototype 01-working/bwk-3.0-surplus-extreme.html. The JS half (Big Console bg via #sx-bg, HUD/cursor/marquee drivers, D/M/G/S keys) lands next session; these rules are inert until then because #cur/#tele/#strip/#gridov are JS-injected and data-motion is JS-set. ============================================================ */ /* ---- v5 layout: fluid gutter + 118px left channel rail ---- */ [data-v5] .sx-wrap{padding:0 clamp(16px,3vw,40px)} @media(min-width:1100px){ [data-v5] .sx-wrap{padding-left:118px} } /* ---- custom crosshair cursor (desktop only, JS-injected #cur) ---- */ /* s155: was 9000 -- the export-confirm/report/carousel modals (z-index 9998-9999) and the meter-tip tooltip (9999) all sat above the cursor, so the near-opaque modal backdrops visually clipped/ghosted the crosshair instead of it staying on top like everywhere else on the site (it already correctly sits above #miniPlayer at 8000). Bumped past every z-index on the site so #cur is reliably topmost. */ [data-v5] #cur{position:fixed;z-index:10000;top:0;left:0;pointer-events:none;display:none;mix-blend-mode:difference} [data-v5] #cur .x{position:absolute;background:#fff} [data-v5] #cur .x.h{width:22px;height:2px;left:-11px;top:-1px} [data-v5] #cur .x.v{width:2px;height:22px;left:-1px;top:-11px} [data-v5] #cur .ring{position:absolute;left:-17px;top:-17px;width:34px;height:34px;border:2px solid #fff; transform:scale(.45);transition:transform .18s var(--ease),border-radius .18s var(--ease)} [data-v5] #cur.hot .ring{transform:scale(1);border-radius:50%} [data-v5] #cur .tag{position:absolute;left:20px;top:12px;font:600 .55rem/1 var(--fm);letter-spacing:.14em;color:#fff; opacity:0;transition:opacity .15s;white-space:nowrap} [data-v5] #cur.hot .tag{opacity:1} @media(pointer:fine){ [data-v5][data-motion="standard"] body,[data-v5][data-motion="bold"] body, [data-v5][data-motion="standard"] a,[data-v5][data-motion="bold"] a, [data-v5][data-motion="standard"] button,[data-v5][data-motion="bold"] button{cursor:none} [data-v5][data-motion="standard"] #cur,[data-v5][data-motion="bold"] #cur{display:block} } /* ---- telemetry HUD (JS-injected #tele) ---- */ [data-v5] #tele{position:fixed;left:50%;transform:translateX(-50%);bottom:8px;z-index:900; display:flex;gap:20px;align-items:center;white-space:nowrap; font:500 .58rem/1 var(--fm);letter-spacing:.1em;color:var(--ink-soft); pointer-events:none;user-select:none; background:color-mix(in srgb,var(--paper) 62%,transparent);padding:7px 12px;backdrop-filter:blur(2px)} [data-v5] #tele b{color:var(--teal-ink);font-weight:600} [data-v5] #tele .rec{color:var(--red-ink)} [data-v5] #tele .rec::before{content:"\25CF";display:inline-block;margin-right:5px;animation:sxv5-blink 1.1s steps(2) infinite} @keyframes sxv5-blink{50%{opacity:0}} @media(max-width:760px){[data-v5] #tele{display:none}} [data-v5][data-motion="off"] #tele{display:none} /* ---- channel-strip section nav (JS-injected #strip, left rail) ---- s134 CONSOLE RAIL: a bordered plate with a hard shadow (affordance rule: raised = pressable), 2-digit section numbers, and a strong teal active row. Labels stay collapsed by default and expand on hover, because --wrap is 1440px so there is no left gutter to hold always-on labels until ~1700px; above that they stay open. Entry 00 is the hero, so the rail IS the back-to-top. */ [data-v5] #strip{position:fixed;left:clamp(8px,1.4vw,22px);top:50%;transform:translateY(-50%);z-index:900; display:flex;flex-direction:column;gap:1px; background:var(--plate);border:2px solid var(--bd-col);box-shadow:var(--hard-sm);padding:7px 6px} [data-v5] #strip a{display:flex;align-items:center;gap:7px;text-decoration:none;padding:5px 6px; font:600 .58rem/1 var(--fm);letter-spacing:.12em;color:var(--ink-soft);transition:background var(--t2)} [data-v5] #strip a b{display:block;font:600 .5rem/1 var(--fm);letter-spacing:.06em;color:var(--ink-soft);opacity:.65;min-width:13px} [data-v5] #strip a i{display:block;width:12px;height:3px;background:var(--line);flex-shrink:0;transition:background var(--t2)} [data-v5] #strip a span{opacity:0;width:0;overflow:hidden;white-space:nowrap;transition:opacity var(--t2)} [data-v5] #strip:hover a span{opacity:1;width:auto} [data-v5] #strip a:hover{background:var(--paper-2)} [data-v5] #strip a:hover i{background:var(--teal)} [data-v5] #strip a.on{background:var(--teal)} [data-v5] #strip a.on b,[data-v5] #strip a.on span{color:var(--on-teal);opacity:1} [data-v5] #strip a.on i{background:var(--on-teal)} [data-v5] #strip a.on:hover{background:var(--teal)} [data-v5] #strip a:focus-visible{outline:2px solid var(--teal);outline-offset:1px} [data-v5] #strip.hide{opacity:0;pointer-events:none;transition:opacity .3s} @media(min-width:1700px){[data-v5] #strip a span{opacity:1;width:auto}} @media(max-width:1100px){[data-v5] #strip{display:none}} /* s132: #sxdock removed */ /* ---- v5 shared type: kick override + mega scale + section base ---- */ [data-v5] .kick{font:600 .68rem/1 var(--fm);letter-spacing:.22em;color:var(--teal-ink)} [data-v5] .kick i{color:var(--red-ink);font-style:normal} [data-v5] .mega{font-family:var(--fd);font-weight:400;line-height:.86;letter-spacing:.01em;margin:0; text-transform:uppercase;color:var(--ink)} [data-v5] .sec{position:relative;z-index:2;padding:clamp(22px,3vh,42px) 0;border-top:0} [data-v5] .sec:not(.page-head)::before{content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);width:34px;height:3px;background:var(--line);opacity:.55;z-index:1;pointer-events:none} [data-v5] .sec-head{display:flex;align-items:baseline;gap:clamp(12px,2vw,30px);flex-wrap:wrap;margin-bottom:clamp(24px,4vh,52px)} [data-v5] .sec-num{font:600 clamp(.8rem,1.4vw,1rem)/1 var(--fm);letter-spacing:.2em;color:var(--red-ink)} [data-v5] .sec h2.mega{font-size:clamp(3.2rem,10.5vw,11.5rem);text-shadow:.04em .04em 0 var(--mega-sh);color:var(--teal-ink)} [data-v5] .sec h2.mega .acc{color:var(--purple-ink)} [data-v5] .lede{max-width:56ch;font-size:clamp(1rem,1.3vw,1.2rem);color:var(--ink-soft)} @keyframes sxv5-colorgl{0%,100%{text-shadow:.04em .04em 0 var(--shadow)}30%{text-shadow:.04em .04em 0 var(--shadow),-.03em 0 0 var(--teal),.03em 0 0 var(--purple)}45%{text-shadow:.04em .04em 0 var(--shadow),.03em 0 0 var(--teal),-.03em 0 0 var(--purple);clip-path:inset(0 0 55% 0)}55%{clip-path:inset(0 0 0 0)}70%{text-shadow:.04em .04em 0 var(--shadow),-.02em 0 0 var(--teal),.02em 0 0 var(--purple);clip-path:inset(45% 0 0 0)}80%{clip-path:inset(0 0 0 0)}} [data-v5][data-motion="standard"] .mega:hover,[data-v5][data-motion="bold"] .mega:hover{animation:sxv5-colorgl .6s steps(4) 1} /* ---- split-word reveal util ---- */ [data-v5] .sw .w{display:inline-block;vertical-align:bottom} [data-v5] .sw .w>span{display:inline-block;opacity:0;transform:translateY(.35em);transition:opacity .55s var(--ease),transform .55s var(--ease)} [data-v5] .sw.in .w>span{opacity:1;transform:none} [data-v5][data-motion="off"] .sw .w>span{opacity:1;transform:none;transition:none} /* ---- scroll-velocity marquee (transform driven by JS) ---- */ [data-v5] .marq{position:relative;z-index:2;border-top:var(--bd);border-bottom:var(--bd);background:var(--lime); overflow:hidden;padding:12px 0} [data-v5] .marq .row{display:flex;gap:34px;width:max-content;will-change:transform} [data-v5] .marq span{font-family:var(--fd);font-size:clamp(1.4rem,2.6vw,2.4rem);letter-spacing:.02em;color:var(--on-lime); text-transform:uppercase;white-space:nowrap} [data-v5] .marq span i{font-style:normal;color:var(--red-ink)} [data-v5] .marq.teal{background:var(--teal)} [data-v5] .marq.teal span{color:var(--on-teal)} [data-v5] .marq.teal span i{color:var(--lime)} /* ---- reveal util (v5 counterpart of .reveal) ---- */ [data-v5] .rv{opacity:0;transform:translateY(26px);transition:opacity .6s var(--ease),transform .6s var(--ease)} [data-v5] .rv.in{opacity:1;transform:none} [data-v5][data-motion="off"] .rv{opacity:1;transform:none;transition:none} /* ---- keyboard legend + grid overlay (press G) ---- */ [data-v5] .keys{display:flex;gap:14px;flex-wrap:wrap;margin-top:14px} [data-v5] .keys span{font:500 .62rem/1 var(--fm);color:var(--ink-soft)} [data-v5] .keys b{display:inline-block;border:2px solid var(--ink);padding:3px 7px;font-weight:600;color:var(--ink); box-shadow:2px 2px 0 0 var(--shadow);margin-right:9px} [data-v5] #gridov{position:fixed;inset:0;z-index:950;pointer-events:none;display:none; background-image:repeating-linear-gradient(90deg,rgba(255,45,23,.14) 0 1px,transparent 1px calc(100%/12))} [data-v5] #gridov.on{display:block} /* ---- v5 reduced-motion kill (scoped; v4 block above still applies) ---- */ @media(prefers-reduced-motion:reduce){ [data-v5] *{animation:none!important;transition:none!important} [data-v5] #cur{display:none!important} [data-v5] body,[data-v5] a,[data-v5] button{cursor:auto!important} [data-v5] .rv,[data-v5] .sw .w>span{opacity:1!important;transform:none!important} } /* ============================================================ SURPLUS v5 PHASE B (index sections, session 106) Same contract as the Phase A layer above: every rule is scoped under [data-v5] and inert on v4 pages. Ported from the approved prototype. Renames vs prototype: .ghost -> .oline (v4 already owns .ghost for numeral decals), .btn -> .sx-btn (one button system), .bar-vu -> #vu (lives in the shared sx-bar nav). ============================================================ */ /* ---- nav VU meter (v5 pages only; bars driven by surplus.js) ---- */ [data-v5] #vu{display:flex;align-items:flex-end;gap:3px;height:18px;margin-left:6px} [data-v5] #vu i{display:block;width:4px;height:3px;background:var(--teal);transform-origin:bottom;transition:transform 60ms linear} @media(max-width:560px){[data-v5] #vu{display:none}.sx-brand b{display:none}[data-v5] .page-head{padding-top:calc(60px + clamp(6px,1.2vh,16px))}} /* ---- hero ---- */ [data-v5] #hero{position:relative;z-index:2;min-height:78svh;display:flex;flex-direction:column;justify-content:center;padding:96px 0 40px;border:0} [data-v5] #hero .sx-wrap{position:relative;z-index:1;width:100%} [data-v5] .hero-tag{display:flex;gap:14px;flex-wrap:wrap;align-items:center;margin-bottom:2vh} [data-v5] .hero-big{font-family:var(--fd);font-weight:400;text-transform:uppercase;line-height:.8;margin:0; font-size:min(clamp(4.6rem,19.5vw,24rem),21.5svh);letter-spacing:0} [data-v5] .hero-big span{display:block} [data-v5] .hero-big .l1{color:var(--teal-ink);-webkit-text-stroke:0;text-shadow:.042em .042em 0 var(--mega-sh)} [data-v5] .hero-big .l2{color:var(--ink);-webkit-text-stroke:0} [data-v5] .hero-big .l2{margin-left:clamp(20px,8vw,180px)} [data-v5] .hero-big .l3{color:var(--purple-ink);text-shadow:.042em .042em 0 var(--mega-sh);margin-left:clamp(60px,18vw,420px)} [data-v5] .hero-big .oline{color:transparent;-webkit-text-stroke:2px var(--ink);text-shadow:none} [data-v5] .hero-foot{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap;padding:3vh 0 26px;border-top:0} [data-v5] .hero-sub{max-width:44ch;font-size:clamp(.95rem,1.2vw,1.15rem);color:var(--ink-soft);margin:0} [data-v5] .hero-acts{display:flex;gap:12px;flex-wrap:wrap} [data-v5] #runsig .led{width:9px;height:9px;border-radius:50%;background:var(--red);border:2px solid var(--ink);display:inline-block} [data-v5] #runsig.on .led{background:var(--lime);animation:sxv5-blink .5s steps(2) infinite} [data-v5] .hero-badge{position:absolute;top:calc(72px + 4vh);right:clamp(18px,4vw,70px);width:clamp(110px,12vw,170px);aspect-ratio:1;pointer-events:none;opacity:.9} [data-v5] .hero-badge svg{width:100%;height:100%;animation:sxv5-spin 14s linear infinite} [data-v5] .hero-badge text{font:600 9.6px var(--fm);letter-spacing:.18em;fill:var(--teal-ink)} [data-v5] .hero-badge circle.hub{fill:none;stroke:var(--ink);stroke-width:3} [data-v5] .hero-badge circle.core{fill:var(--red)} @keyframes sxv5-spin{to{transform:rotate(360deg)}} [data-v5][data-motion="off"] .hero-badge svg{animation:none} [data-v5] .hero-meta{position:absolute;top:calc(72px + 5vh);left:clamp(16px,3vw,40px);font:500 .6rem/2 var(--fm);letter-spacing:.14em;color:var(--ink-soft)} [data-v5] .hero-meta b{color:var(--red-ink);font-weight:600} [data-v5] .hero-scroll{position:absolute;right:clamp(14px,3vw,44px);bottom:16vh;writing-mode:vertical-rl; font:600 .6rem/1 var(--fm);letter-spacing:.3em;color:var(--ink-soft);display:flex;align-items:center;gap:10px} [data-v5] .hero-scroll::after{content:"";width:2px;height:54px;background:var(--teal);animation:sxv5-drip 1.6s var(--ease) infinite} @keyframes sxv5-drip{0%{transform:scaleY(0);transform-origin:top}55%{transform:scaleY(1);transform-origin:top}56%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}} /* hero video panel (kept hero-loop.mp4, locked decision) */ [data-v5] .hero-vid{position:absolute;right:clamp(18px,4vw,70px);bottom:28vh;width:clamp(240px,26vw,430px);aspect-ratio:16/9; border:var(--bd);box-shadow:var(--hard);overflow:hidden;z-index:0;background:var(--glass)} [data-v5] .hero-vid video{width:100%;height:100%;object-fit:cover;display:block} [data-v5] .hero-vid .vtag{position:absolute;left:8px;bottom:6px;font:600 .55rem/1 var(--fm);letter-spacing:.16em;color:#fff; background:rgba(0,0,0,.55);padding:3px 7px} @media(max-width:900px){ [data-v5] .hero-badge{width:96px;top:14svh;right:16px;opacity:.85} [data-v5] .hero-vid{display:none} } /* centered hero stack: hide the corner meta when the viewport is too short to fit both */ @media(max-width:900px),(max-height:1000px){[data-v5] .hero-meta{display:none}} @media(max-width:760px){ [data-v5] .hero-big{font-size:min(24.5vw,16svh)} [data-v5] #hero{min-height:80svh} [data-v5] .hero-scroll{display:none} } @media(min-width:1100px){[data-v5] .hero-meta{left:118px}} @media(prefers-reduced-motion:reduce){[data-v5] .hero-vid video{display:none}} /* ---- signal check live module ---- */ [data-v5] .scx{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(20px,3vw,44px);align-items:start} [data-v5] .scope{border:var(--bd);box-shadow:var(--hard);background:var(--glass);position:relative;overflow:hidden} [data-v5] .scope canvas{display:block;width:100%;height:clamp(260px,38vh,420px)} [data-v5] .scope .hud{position:absolute;left:12px;top:10px;font:600 .6rem/1.8 var(--fm);letter-spacing:.14em;color:#9fe8e6;text-transform:uppercase} [data-v5] .scope .hud b{color:#C2F526} [data-v5] .verd{display:flex;flex-direction:column;gap:0;border:var(--bd);box-shadow:var(--hard);background:var(--plate)} [data-v5] .verd .vrow{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:14px 18px;border-bottom:2px solid var(--line)} [data-v5] .verd .vrow:last-child{border-bottom:0} [data-v5] .verd .vk{font:600 .66rem/1 var(--fm);letter-spacing:.16em;color:var(--ink-soft)} [data-v5] .verd .vv{font-family:var(--fd);font-size:clamp(1.3rem,2.2vw,2rem);letter-spacing:.02em} [data-v5] .verd .vv.t{color:var(--teal-ink)} [data-v5] .verd .vv.p{color:var(--purple-ink)} [data-v5] .verd .vv.r{color:var(--red-ink)} [data-v5] .verd .vv.l{color:var(--lime-ink)} [data-v5] .verd .meter{flex:1;height:10px;border:2px solid var(--ink);background:var(--recess);position:relative;min-width:70px} [data-v5] .verd .meter i{position:absolute;inset:0;transform-origin:left;background:var(--teal);transform:scaleX(0);transition:transform .9s var(--ease)} [data-v5] .sc-notes{margin-top:18px;display:flex;gap:12px;flex-wrap:wrap} [data-v5] .sc-note{flex:1 1 200px;border:var(--bd);box-shadow:inset 5px 5px 0 0 var(--recess-sh);background:var(--recess);padding:14px 16px} [data-v5] .sc-note h4{margin:0 0 6px;font:400 1.05rem/1 var(--fd);letter-spacing:.03em} [data-v5] .sc-note p{margin:0;font:500 .74rem/1.6 var(--fm);color:var(--ink-soft)} [data-v5] .sc-ctas{margin-top:26px;display:flex;gap:12px;flex-wrap:wrap;align-items:center} @media(max-width:900px){[data-v5] .scx{grid-template-columns:1fr}} /* ---- tools index rows ---- */ [data-v5] .rows{border-top:var(--bd)} [data-v5] .row-t{position:relative;display:grid;grid-template-columns:auto 1fr auto auto;gap:clamp(10px,3vw,40px); align-items:center;padding:clamp(16px,3vh,30px) clamp(4px,1vw,14px);border-bottom:var(--bd); text-decoration:none;color:var(--ink);overflow:hidden;isolation:isolate} [data-v5] .row-t .bg{position:absolute;inset:0;background:var(--teal);transform:scaleY(0);transform-origin:bottom;transition:transform .32s var(--ease);z-index:-1} [data-v5] .row-t:hover .bg,[data-v5] .row-t:focus-visible .bg{transform:scaleY(1)} [data-v5] .row-t .idx{font:600 .8rem/1 var(--fm);letter-spacing:.14em;color:var(--red-ink)} [data-v5] .row-t .nm{font-family:var(--fd);font-size:clamp(2rem,6.4vw,5.6rem);line-height:.9;letter-spacing:.01em;text-transform:uppercase;transition:transform .32s var(--ease)} [data-v5] .row-t:hover .nm{transform:translateX(clamp(8px,2vw,26px))} [data-v5] .row-t .ds{font:500 .72rem/1.5 var(--fm);color:var(--ink-soft);max-width:30ch;transition:opacity .2s var(--ease)} [data-v5] .row-t .go{font-family:var(--fd);font-size:clamp(1.4rem,3vw,2.6rem)} [data-v5] .row-t:hover,[data-v5] .row-t:hover .idx{color:var(--on-teal)} [data-v5] .row-t:hover .ds{opacity:0} [data-v5] .row-t canvas.prev{position:absolute;right:clamp(60px,12vw,220px);top:50%;transform:translateY(-50%) scale(.85); width:200px;height:110px;border:3px solid var(--on-teal);opacity:0;transition:opacity .25s var(--ease),transform .3s var(--ease); pointer-events:none;background:rgba(0,0,0,.25)} [data-v5] .row-t:hover canvas.prev{opacity:1;transform:translateY(-50%) scale(1)} [data-v5] .rows-foot{padding:16px 4px;font:500 .74rem/1.6 var(--fm);color:var(--ink-soft)} @media(max-width:900px){ [data-v5] .row-t{grid-template-columns:auto 1fr auto} [data-v5] .row-t .ds{display:none} [data-v5] .row-t canvas.prev{display:none} } /* ---- stuck list ---- */ [data-v5] .stuck-big{font-family:var(--fd);font-size:clamp(2.6rem,8.5vw,9rem);line-height:.9;text-transform:uppercase;margin:0 0 30px} [data-v5] .stuck-big em{font-style:normal;color:var(--red-ink);text-shadow:.04em .04em 0 var(--mega-sh)} [data-v5] .stuck-grid{display:grid;grid-template-columns:1fr minmax(300px,460px);gap:clamp(20px,4vw,60px);align-items:end} [data-v5] .stuck-copy{font-size:clamp(.98rem,1.2vw,1.15rem);color:var(--ink-soft);max-width:48ch} [data-v5] .mailplate{border:var(--bd);box-shadow:var(--hard);background:var(--plate);padding:22px 20px} [data-v5] .mailplate .etag{display:inline-block;font:600 .62rem/1 var(--fm);letter-spacing:.16em;color:var(--on-lime);background:var(--lime);padding:4px 9px;margin-bottom:12px} [data-v5] .mailplate .beehiiv-wrap{width:100%;overflow:hidden} [data-v5] .mailplate iframe{width:100%!important;max-width:100%!important;border:none} @media(max-width:900px){[data-v5] .stuck-grid{grid-template-columns:1fr}} /* ---- about ---- */ [data-v5] .about-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:clamp(24px,4vw,70px)} [data-v5] .about-copy p{margin:0 0 14px;font-size:clamp(1rem,1.25vw,1.2rem);color:var(--ink-soft)} [data-v5] .about-copy p:first-child{font-size:clamp(1.2rem,1.8vw,1.55rem);color:var(--ink)} [data-v5] .about-grid .tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px} [data-v5] .facts{border:var(--bd);box-shadow:var(--hard);background:var(--plate)} [data-v5] .facts .f{display:flex;justify-content:space-between;gap:12px;padding:13px 16px;border-bottom:2px solid var(--line);font:500 .72rem/1.5 var(--fm)} [data-v5] .facts .f:last-child{border-bottom:0} [data-v5] .facts .f b{color:var(--teal-ink);letter-spacing:.1em} [data-v5] .facts .f span{text-align:right;color:var(--ink-soft)} @media(max-width:900px){[data-v5] .about-grid{grid-template-columns:1fr}} /* ---- content plate (live embed in the left panel) ---- */ [data-v5] .yt-plate{display:grid;grid-template-columns:1fr 1fr;border:var(--bd);box-shadow:var(--hard);background:var(--plate);overflow:hidden} [data-v5] .yt-l{background:var(--glass);min-height:280px;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden} [data-v5] .yt-l #ytEmbedWrap{width:100%;height:100%;min-height:280px;display:flex;align-items:center;justify-content:center} [data-v5] .yt-l iframe{width:100%;height:100%;min-height:280px;border:none;display:block} [data-v5] .yt-r{padding:clamp(20px,3vw,40px);display:flex;flex-direction:column;justify-content:center;gap:12px} [data-v5] .yt-r h3{font:400 clamp(1.6rem,3vw,2.6rem)/1 var(--fd);margin:0;letter-spacing:.02em} [data-v5] .yt-r p{margin:0;font:500 .78rem/1.7 var(--fm);color:var(--ink-soft)} @media(max-width:900px){[data-v5] .yt-plate{grid-template-columns:1fr}} /* ---- socials rows ---- */ [data-v5] .soc-rows{border-top:var(--bd)} [data-v5] .soc{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:16px 6px;border-bottom:var(--bd); text-decoration:none;color:var(--ink);position:relative;isolation:isolate;overflow:hidden} [data-v5] .soc .bg{position:absolute;inset:0;background:var(--socc,var(--purple));transform:scaleY(0);transform-origin:bottom;transition:transform .3s var(--ease);z-index:-1} [data-v5] .soc:hover .bg{transform:scaleY(1)} [data-v5] .soc:hover{color:var(--soct,#fff)} [data-v5] .soc b{font-family:var(--fd);font-size:clamp(1.5rem,3.6vw,3rem);letter-spacing:.02em;text-transform:uppercase;font-weight:400} [data-v5] .soc span{font:500 .7rem/1 var(--fm);letter-spacing:.1em} /* ---- v5 footer ---- */ [data-v5] footer{position:relative;z-index:2;border-top:var(--bd);background:var(--plate);overflow:hidden;margin-top:0;padding:0;text-align:left} [data-v5] .foot-in{padding-top:clamp(40px,7vh,80px)} [data-v5] .foot-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:clamp(20px,4vw,60px);margin-bottom:clamp(30px,6vh,60px)} [data-v5] .foot-grid h2{font:600 .64rem/1 var(--fm);letter-spacing:.2em;color:var(--red-ink);margin:0 0 14px;text-transform:uppercase} [data-v5] .foot-grid a{display:block;font:500 .8rem/2.1 var(--fm);color:var(--ink-soft);text-decoration:none} [data-v5] .foot-grid a:hover{color:var(--teal-ink)} [data-v5] .colo{font:500 .74rem/1.8 var(--fm);color:var(--ink-soft);max-width:52ch;margin:0 0 16px} [data-v5] .colo b{color:var(--ink)} [data-v5] .sign{font-family:var(--fd);font-size:1rem;letter-spacing:.06em;color:var(--ink);text-transform:uppercase;margin:16px 0 0} [data-v5] .foot-mega{font-family:var(--fd);font-size:clamp(5rem,21vw,26rem);line-height:.72;letter-spacing:0;color:var(--ink); text-transform:uppercase;margin:0;transform:translateY(18%);user-select:none;white-space:nowrap;text-align:center;pointer-events:none} [data-v5] .foot-mega .k{color:var(--purple-ink)} [data-v5] .foot-bar{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;border-top:var(--bd); padding:12px clamp(16px,3vw,40px);font:500 .62rem/1.6 var(--fm);color:var(--ink-soft);background:var(--paper-2)} @media(max-width:900px){[data-v5] .foot-grid{grid-template-columns:1fr}} /* ---- gutter alignment for full-bleed rows (completes the Phase A gutter) ---- */ @media(min-width:1100px){ [data-v5] .row-t{padding-left:118px!important} [data-v5] .soc{padding-left:118px!important} } /* ---- staggered child reveal for index + social rows ---- */ [data-v5] .rows.rv,[data-v5] .soc-rows.rv{transform:none} [data-v5] .rows .row-t,[data-v5] .soc-rows .soc{opacity:0;transform:translateY(30px);transition:opacity .55s var(--ease),transform .55s var(--ease)} [data-v5] .rows.in .row-t,[data-v5] .soc-rows.in .soc{opacity:1;transform:none} [data-v5] .rows.in .row-t:nth-child(2),[data-v5] .soc-rows.in .soc:nth-child(2){transition-delay:.09s} [data-v5] .rows.in .row-t:nth-child(3),[data-v5] .soc-rows.in .soc:nth-child(3){transition-delay:.18s} [data-v5] .rows.in .row-t:nth-child(4),[data-v5] .soc-rows.in .soc:nth-child(4){transition-delay:.27s} [data-v5] .soc-rows.in .soc:nth-child(n+5){transition-delay:.36s} [data-v5][data-motion="off"] .rows .row-t,[data-v5][data-motion="off"] .soc-rows .soc{opacity:1;transform:none;transition:none} /* ---- v5 MOBILE: reactive bg ON (s136) ---- s107 turned #sx-bg off under 900px because the old dot-grid read as noise behind copy on a phone. The E2 grid replaces it: flat lines, fewer columns and a much lower alpha ceiling on narrow screens (see drawGrid in surplus.js), so it stays under the copy instead of fighting it. Body copy sits on solid plates either way. If Kevin's phone says it still reads as noise, drop the ceiling in drawGrid or restore a display:none here. */ /* ---- s136: .sx-seam DELETED. The s108 seam was a 36px 24-band fringe on the first section — the minimal stand-in for a reactive background back when the real one was undecided. The E2 grid supersedes it site-wide, so there is now ONE reactive system instead of two drawing the same bands. Deleting it also permanently kills the Signal Check collision (SC's first section IS the player card, so the fringe landed on it). ---- */ /* ---- s109: about photo frame + nav icon buttons ---- */ [data-v5] .about-photo{width:100%;border:var(--bd);box-shadow:var(--hard);display:block;object-fit:cover;aspect-ratio:3/4;background:var(--glass)} [data-v5] .sx-mode{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-width:38px} [data-v5] .sx-bar #runsig .led{width:8px;height:8px;border-radius:50%;background:var(--red);border:2px solid var(--ink);display:inline-block} [data-v5] .sx-bar #runsig.on .led{background:var(--lime);animation:sxv5-blink .5s steps(2) infinite} /* ---------- v5 subpage page-head (Phase C) ---------- */ [data-v5] .page-head{border-top:0;padding-top:calc(72px + clamp(18px,3vh,44px))} [data-v5] .page-head h1.mega{font-size:clamp(3.4rem,11.5vw,12.5rem);text-shadow:.04em .04em 0 var(--mega-sh);color:var(--teal-ink)} [data-v5] .page-head h1.mega .acc{color:var(--purple-ink)} [data-v5] .page-head .lede{margin:18px 0 0} /* ---------- v5 sec-head VU chips + plate corner LEDs (Phase C, s111d) ---------- */ [data-v5] .vu-chip{display:inline-flex;align-items:flex-end;gap:2px;height:18px;margin-left:12px;transform:translateY(2px)} [data-v5] .vu-chip i{width:4px;height:4px;background:var(--teal-ink);display:block;transform-origin:bottom} [data-v5] .vu-chip i:nth-child(4n){background:var(--red-ink)} @keyframes sxv5-led{0%,100%{opacity:.3}50%{opacity:1}} [data-v5] .sc-note,[data-v5] .half-card,[data-v5] .content-card,[data-v5] .cta-card{position:relative} [data-v5] .sc-note::after,[data-v5] .half-card::after,[data-v5] .content-card::after,[data-v5] .cta-card::after{ content:"";position:absolute;top:9px;right:9px;width:7px;height:7px;background:var(--red);box-shadow:0 0 7px var(--red); animation:sxv5-led 2.8s ease-in-out infinite} [data-v5] .sc-note:nth-child(even)::after,[data-v5] .content-card:nth-child(even)::after,[data-v5] .half-card:nth-child(2)::after{background:var(--teal);box-shadow:0 0 7px var(--teal)} [data-v5] .sc-note:nth-child(2)::after,[data-v5] .content-card:nth-child(3)::after{animation-delay:.9s} [data-v5] .sc-note:nth-child(3)::after,[data-v5] .content-card:nth-child(2)::after{animation-delay:1.7s} [data-v5] .sc-note:nth-child(4)::after,[data-v5] .content-card:nth-child(4)::after{animation-delay:.5s} [data-v5][data-motion="off"] .sc-note::after,[data-v5][data-motion="off"] .half-card::after,[data-v5][data-motion="off"] .content-card::after,[data-v5][data-motion="off"] .cta-card::after{animation:none;opacity:.55} @media(prefers-reduced-motion:reduce){ [data-v5] .sc-note::after,[data-v5] .half-card::after,[data-v5] .content-card::after,[data-v5] .cta-card::after{animation:none;opacity:.55} } /* SURPLUS-CSS-END v1 — integrity sentinel, do not remove (see scripts/check-html-integrity.py) */