/* ========================================================================== Knepper Contracting — build 05 · "THE RUN" (homepage only) One cable run: it starts at the hero patch panel, travels the left gutter of the whole page, and terminates at the submit button of the work order. Every section is one object from John's world, drawn here, not photographed from a template. Loads after css/site.css (tokens, buttons, header, footer, the patch panel, the form primitives); replaces css/rooms.css on this page. ========================================================================== */ /* ── page-level ─────────────────────────────────────────────────────────── */ .runpage main{position:relative;z-index:1} /* site.css declares the burger AFTER the media query that should hide it, so the base display:grid wins at every width; re-hide it where the nav shows. */ @media (min-width:1040px){.runpage .burger{display:none}} .sec{position:relative;padding:var(--sec) 0} .sec+.sec{border-top:1px solid rgba(238,242,255,.06)} .dh{font-family:var(--display);font-weight:900;text-transform:uppercase; font-size:clamp(2.2rem,5.6vw,4.4rem);line-height:.92;letter-spacing:-.02em;margin:0 0 18px} .dh em{font-style:italic;color:var(--lime)} .dp{margin:0 0 clamp(26px,4vw,46px);color:var(--on-soft);font-size:1.05rem;max-width:68ch} .dcta{margin:clamp(26px,4vw,44px) 0 0;display:flex;flex-wrap:wrap;gap:16px;align-items:center} .tl{font-family:var(--mono);font-size:12.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase; color:var(--lime);text-decoration:none;border-bottom:1px solid rgba(168,255,62,.45);padding-bottom:4px; transition:color .3s,border-color .3s} .tl:hover{color:var(--on);border-color:var(--on)} .tl .arrow{display:inline-block} /* the dock lives in the shared footer partial; rooms.css is not loaded here */ .dock{position:fixed;right:22px;bottom:22px;z-index:70;display:none;flex-direction:column;gap:10px} @media (min-width:800px){.dock{display:flex}} .dock__b{display:flex;align-items:center;gap:10px;padding:11px 16px 11px 11px;border-radius:999px; background:rgba(16,22,58,.94);backdrop-filter:blur(10px);border:1px solid var(--hair);color:var(--on); text-decoration:none;font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.1em; text-transform:uppercase;box-shadow:0 14px 30px rgba(0,0,0,.5); transition:transform .3s var(--ease),border-color .3s,color .3s} .dock__b i{font-style:normal;width:26px;height:26px;display:grid;place-items:center;border-radius:50%;flex-shrink:0} .dock__b:hover{transform:translateX(-4px);border-color:var(--lime);color:var(--lime)} .dock__b--book i{background:var(--lime);color:#08210A} .dock__b--call i{background:var(--cyan);color:#04222A} .dock__b--mail i{background:var(--gold);color:#3A2A08} /* ══ THE RUN — the cable down the left gutter ═══════════════════════════ */ .run{position:fixed;left:0;top:0;bottom:0;width:6px;z-index:2;pointer-events:none;display:none} @media (min-width:640px){.run{display:block}} @media (min-width:1100px){.run{width:44px}} .run__svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible} .run__base{fill:none;stroke:rgba(238,242,255,.20);stroke-width:2;vector-effect:non-scaling-stroke} .run__live{fill:none;stroke:var(--lime);stroke-width:2.5;vector-effect:non-scaling-stroke; stroke-dasharray:1000;stroke-dashoffset:1000;filter:drop-shadow(0 0 6px rgba(168,255,62,.85))} .run__pk{position:absolute;left:0;top:0;width:11px;height:11px;margin:-5.5px 0 0 -5.5px;border-radius:50%; background:#fff;box-shadow:0 0 0 3px rgba(168,255,62,.35),0 0 18px 5px rgba(168,255,62,.8);opacity:0} .js .run__pk{opacity:1} .run__dot{position:absolute;width:9px;height:9px;margin:-4.5px 0 0 -4.5px;border-radius:50%; background:var(--ink);border:2px solid rgba(238,242,255,.35);transition:border-color .5s,background .5s,box-shadow .5s} .run__dot.on{border-color:var(--lime);background:var(--lime);box-shadow:0 0 12px rgba(168,255,62,.9)} /* ══ 01 · #panel — the patch panel, head of the run ═════════════════════ */ .pnl{padding:clamp(104px,13vh,146px) 0 clamp(46px,7vh,96px)} .pnl__grid{display:grid;gap:clamp(32px,5vw,54px);align-items:center;width:min(var(--wrap),100% - var(--gut)*2)} @media (min-width:1000px){ .pnl__grid{grid-template-columns:.86fr 1.14fr} .pnl__stage{order:1}.pnl__copy{order:2} } /* One column (≤999px): the copy block dissolves into the grid so the rack — and the mark that strikes in at the top of it — lands between the CTAs and the readout, not below the whole hero. On a phone that is the difference between the intro playing on screen and playing off it; the h1 and the CTAs keep their place above it either way. Spacing is the children's own margins here, so the grid gap goes to zero. */ @media (max-width:999px){ .pnl__grid{gap:0} .pnl__copy{display:contents} .pnl__stage{order:5;margin-bottom:clamp(22px,4vw,30px)} .pnl .readout{order:6} } .pnl .hero__h1{font-size:clamp(2.9rem,7.4vw,6.2rem);margin-bottom:20px} .pnl .hero__sub{margin-bottom:28px;max-width:52ch} .pnl .eyebrow{margin-bottom:22px} .pnl .hero__cta{margin-bottom:32px} @media (max-width:479px){ .pnl .readout{grid-template-columns:repeat(2,1fr)} .pnl .readout div:nth-child(2n){border-right:0} .pnl .readout div:nth-child(-n+2){border-bottom:1px solid var(--hair)} } .pnl__stage{position:relative} .rk{position:relative;display:grid;grid-template-columns:26px 1fr 26px;gap:0; background:linear-gradient(180deg,#161d4a,#0a0f2c);border:1px solid rgba(238,242,255,.16); border-radius:8px;padding:16px 0;box-shadow:0 50px 90px -40px rgba(0,0,0,.95),inset 0 1px 0 rgba(255,255,255,.07)} .rk__rail{display:flex;flex-direction:column;justify-content:space-between;align-items:center; padding:4px 0;background:repeating-linear-gradient(to bottom,#1d2559 0 10px,#0d1234 10px 24px); border-inline:1px solid rgba(238,242,255,.14);font-family:var(--mono);font-size:8px; letter-spacing:.04em;color:rgba(238,242,255,.42)} .rk__rail i{font-style:normal;display:block;width:100%;text-align:center} .rk__rail--r i{width:6px;height:6px;border-radius:50%;background:rgba(238,242,255,.10);margin-inline:auto} .rk__bay{position:relative;padding:10px clamp(10px,2vw,18px) 8px;min-height:330px} .rk__bay .panel{width:100%;margin:0;transform:none} .rk__bay .panel:hover{transform:translateY(-3px)} .rk__exit{position:relative;margin:14px 0 0;padding-left:16px;font-family:var(--mono);font-size:9.5px; letter-spacing:.16em;text-transform:uppercase;color:var(--lime);display:flex;gap:8px;align-items:baseline} .rk__exit b{font-weight:700} .rk__exit span{color:var(--on-faint)} .rk__exit::before{content:"";position:absolute;left:0;top:6px;width:8px;height:8px;border-radius:50%; background:var(--lime);box-shadow:0 0 10px var(--lime)} .rk__bay .mojo--hero{position:absolute;left:auto;right:-7%;bottom:-16%;width:min(30%,136px);z-index:3; animation:bob 6s ease-in-out infinite;filter:drop-shadow(0 24px 30px rgba(0,0,0,.65))} .rk__bay .sticker--plate{right:-14px;top:-18px;font-size:1rem;padding:8px 12px;z-index:4} .rk__bay .sticker--tag{left:-16px;top:-14px;bottom:auto;right:auto;font-size:.95rem;padding:9px 13px;z-index:4} .pnl__tail{position:absolute;left:-140px;right:auto;width:calc(100% + 140px);bottom:-240px;height:260px;pointer-events:none} .pnl__tail path{fill:none;stroke:var(--lime);stroke-width:2.5;vector-effect:non-scaling-stroke; stroke-dasharray:100;stroke-dashoffset:100;filter:drop-shadow(0 0 6px rgba(168,255,62,.7)); transition:stroke-dashoffset 1.4s var(--ease) .5s} .sec.lit .pnl__tail path{stroke-dashoffset:0} @media (max-width:999px){.pnl__tail{display:none}.rk__bay{min-height:300px}} /* the KC mark: the vector intro (js/kc-intro.js) mounts into #kcIntro and plays the strike once; the static /assets/brand/kc-mark.svg in the HTML is what stands with JS off and under reduced motion. Both are the same drawing at the same framing, so the slot never reflows when the module takes over. The box is cropped (overflow:hidden) — the module's wordmark and slogan sit outside the viewBox run.js sets. -------------------------------------- */ .kc{position:relative;width:min(64%,232px);aspect-ratio:888/508;margin:0 auto 14px;overflow:hidden; filter:drop-shadow(0 16px 26px rgba(0,0,0,.55))} .kc__static,.kc svg{display:block;width:100%;height:100%} .kc__static{object-fit:contain} /* one column: the bay's corner stickers close in on the mark, so it gives up a little width and drops clear of them */ @media (max-width:999px){.kc{width:min(54%,196px);margin-top:14px}} /* ══ 02 · #thesis — his tagline, three colour panels ════════════════════ */ .thesis{padding:0;border-top:0} .thesis__panel{min-height:clamp(260px,32vw,400px)} .thesis__do{font-size:clamp(2.2rem,5vw,4.3rem)} @media (max-width:859px){.thesis__panel{min-height:0;padding:34px clamp(20px,6vw,40px)}} .thesis__who,.thesis__do{position:relative} .js .thesis:not(.lit) .thesis__who,.js .thesis:not(.lit) .thesis__do{opacity:0} .thesis.lit .thesis__who{animation:tFade .5s var(--ease) both;animation-delay:calc(var(--n)*.18s)} .thesis.lit .thesis__do{animation:tSlam .55s cubic-bezier(.2,1.5,.4,1) both;animation-delay:calc(var(--n)*.18s + .1s)} .thesis__panel:nth-child(1){--n:0} .thesis__panel:nth-child(2){--n:1} .thesis__panel:nth-child(3){--n:2} @keyframes tFade{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}} @keyframes tSlam{0%{opacity:0;transform:scale(1.42) translateY(-10px);filter:blur(5px)} 70%{opacity:1;filter:blur(0)}100%{opacity:1;transform:none;filter:none}} /* ══ 03 · #drops — ONE wall in elevation, nine devices at mount height ══ Not nine identical plates in a grid: a painted wall with a ceiling grid, a ladder tray in the plenum, a conduit riser and a branch per mounting height. Each device is the housing it actually ships in — a disc, a dome, a red cabinet, a reader, a keypad, faceplates, a floor box — and hovering one traces its drop back up the riser to the tray. */ .wall{background: linear-gradient(180deg,rgba(255,255,255,.045),transparent 32%), linear-gradient(180deg,#151b3f,#0e1330 78%,#0b1028)} .wl{position:relative;overflow:hidden;border-radius:10px; background:linear-gradient(180deg,#1c2350 0,#161c44 48%,#111739 100%); box-shadow:inset 0 0 0 1px rgba(238,242,255,.10),0 40px 80px -50px rgba(0,0,0,.95)} /* painted drywall: a wash from the window end and a faint roller texture */ .wl::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:0; background: radial-gradient(ellipse 62% 78% at 10% 0%,rgba(238,242,255,.085),transparent 64%), repeating-linear-gradient(90deg,rgba(255,255,255,.013) 0 3px,transparent 3px 7px)} /* the ceiling grid, with the ladder tray running above the tiles */ .wl__ceiling{position:relative;z-index:1;height:64px; background-color:#232a56; background-image: repeating-linear-gradient(90deg,transparent 0 118px,rgba(238,242,255,.16) 118px 120px), linear-gradient(180deg,#2b3263,#1d2450); border-bottom:2px solid rgba(238,242,255,.26); box-shadow:inset 0 -8px 14px -10px rgba(0,0,0,.7)} .wl__tray{position:absolute;left:0;right:0;top:13px;height:22px; background-image: linear-gradient(180deg,rgba(255,197,62,.46) 0 2px,transparent 2px), linear-gradient(0deg,rgba(255,197,62,.46) 0 2px,transparent 2px), repeating-linear-gradient(90deg,transparent 0 26px,rgba(255,197,62,.16) 26px 27.5px)} .wl__tray i{position:absolute;left:0;right:0;top:6px;height:3px;border-radius:2px; background:rgba(168,255,62,.26);transition:background .35s,box-shadow .35s} /* the run arrives from the page's left gutter and lies in the tray */ .wl__tray::after{content:"";position:absolute;left:0;top:6px;width:92px;height:3px;border-radius:2px; background:var(--lime);box-shadow:0 0 12px rgba(168,255,62,.85)} /* the conduit riser: it leaves the tray and drops the full height of the wall */ .wl__riser{position:absolute;left:60px;top:24px;bottom:26px;width:4px;border-radius:2px;z-index:2; background:rgba(255,197,62,.34);transition:background .35s,box-shadow .35s} /* one band per mounting height; its branch line feeds the devices on it */ .wl__band{position:relative;z-index:2;list-style:none;margin:0;padding:54px 26px 0 96px; display:grid;grid-template-columns:repeat(12,1fr);gap:0 10px;align-items:start} .wl__band::before{content:"";position:absolute;left:60px;right:26px;top:15px;height:2px; background:repeating-linear-gradient(90deg,rgba(255,197,62,.34) 0 9px,transparent 9px 15px); transition:background .3s} .wl__band::after{content:attr(data-dim);position:absolute;left:0;top:48px;width:54px;text-align:right; font-family:var(--mono);font-size:8.5px;letter-spacing:.1em;color:var(--on-faint);line-height:1.2} .wl__band--low{padding-bottom:10px} /* a device */ .dv{--w:84px;grid-column:var(--gc) / span 3;position:relative} .dv--ap{--w:74px;margin-top:-56px} .dv--dome{--w:78px} .dv--cab{--w:104px} .dv--plate{--w:86px} .dv--reader{--w:52px} .dv--keypad{--w:94px} .dv--box{--w:92px} .dv--floor{--w:112px;margin-top:72px} .dv a{display:block;text-decoration:none;color:inherit} .dv__stub{position:absolute;top:-39px;left:calc(var(--w)/2 - 1px);width:2px;height:39px; background:rgba(255,197,62,.34);transition:background .3s,box-shadow .3s} .dv--ap .dv__stub{display:none} .dv--floor .dv__stub{top:-111px;height:111px} .dv__obj{position:relative;display:block;width:var(--w);margin:0 0 13px; transition:transform .42s var(--ease)} .dv a:hover .dv__obj,.dv a:focus-visible .dv__obj{transform:translateY(-5px)} .dv__jack{position:relative;z-index:3;display:block;width:50px;height:50px;margin:0 auto} .dv__jack svg{width:100%;height:100%;display:block} .dv__jack .s{fill:#1e222e} .dv__jack .s2{fill:none;stroke:#1e222e;stroke-width:3;stroke-linecap:round} .dv__jack .s2f{fill:#1e222e} .dv__jack .p{fill:var(--c)} .dv__jack .p2{fill:#6b7180} .dv__tag{display:inline-block;background:#16181f;color:#f2f2ee;font-family:var(--mono);font-size:8.5px; font-weight:700;letter-spacing:.11em;text-transform:uppercase;padding:5px 7px;border-radius:2px; box-shadow:inset 0 0 0 1px rgba(255,255,255,.18);line-height:1.2} .dv__line{display:block;margin-top:9px;color:var(--on-soft);font-size:.87rem;line-height:1.45; max-width:31ch;transition:color .3s} .dv a:hover .dv__line{color:var(--on)} /* housings ------------------------------------------------------------- */ .dv__obj--plate{padding:15px 10px;border-radius:4px; background:linear-gradient(180deg,#f3f2eb,#dad9cf); box-shadow:0 12px 24px -12px rgba(0,0,0,.85),inset 0 1px 0 rgba(255,255,255,.9),0 0 0 1px rgba(0,0,0,.32)} .dv__obj--plate::before,.dv__obj--plate::after{content:"";position:absolute;left:50%;width:8px;height:8px; margin-left:-4px;border-radius:50%;background:radial-gradient(circle at 34% 30%,#fff,#8f8f86); box-shadow:inset 0 0 0 1px rgba(0,0,0,.35)} .dv__obj--plate::before{top:4px} .dv__obj--plate::after{bottom:4px} .dv__obj--box{padding:14px 10px 17px;border-radius:3px; background:linear-gradient(180deg,#e9e8de,#c6c5b9); box-shadow:0 14px 26px -12px rgba(0,0,0,.9),inset 0 -3px 0 rgba(0,0,0,.15),0 0 0 1px rgba(0,0,0,.36)} .dv__obj--box::before{content:"";position:absolute;left:7px;right:7px;top:7px;height:2px;background:rgba(0,0,0,.2)} .dv__obj--disc{height:var(--w);border-radius:50%;display:grid;place-items:center; background:radial-gradient(circle at 36% 28%,#fbfbf6,#cfcec4 68%,#a4a399); box-shadow:0 16px 28px -14px rgba(0,0,0,.9),inset 0 0 0 1px rgba(0,0,0,.28)} /* an AP is fed straight down out of the plenum */ .dv__obj--disc::after{content:"";position:absolute;left:50%;bottom:100%;width:3px;height:22px;margin-left:-1.5px; background:rgba(255,197,62,.36)} .dv__obj--dome{height:calc(var(--w)*.74);border-radius:999px 999px 7px 7px;display:grid;place-items:center; background:radial-gradient(circle at 34% 24%,#5d6691,#232a47 62%,#141a30); box-shadow:0 16px 28px -14px rgba(0,0,0,.95),inset 0 -2px 0 rgba(255,255,255,.09),0 0 0 1px rgba(0,0,0,.45)} .dv__obj--dome::after{content:"";position:absolute;left:14%;right:14%;top:-7px;height:8px;border-radius:3px 3px 0 0; background:linear-gradient(180deg,#cfd4e2,#8d93a8)} .dv__obj--disc .dv__jack .s{fill:rgba(30,34,46,.13)} .dv__obj--disc .dv__jack .s2{stroke:rgba(30,34,46,.5)} .dv__obj--dome .dv__jack .s{fill:rgba(238,242,255,.14)} .dv__obj--dome .dv__jack .s2{stroke:rgba(238,242,255,.42)} .dv__obj--cab{padding:15px 10px 6px;border-radius:3px; background:linear-gradient(180deg,#c93a50,#8e2333); box-shadow:0 16px 28px -14px rgba(0,0,0,.95),inset 0 1px 0 rgba(255,255,255,.28),0 0 0 1px rgba(0,0,0,.5)} .dv__hinge{position:absolute;left:4px;top:9px;bottom:9px;width:3px;border-radius:2px;background:rgba(0,0,0,.4)} .dv__stencil{position:relative;z-index:3;display:block;margin-top:5px;text-align:center;font-family:var(--mono); font-size:8px;letter-spacing:.24em;color:rgba(255,255,255,.85)} .dv__obj--cab .dv__jack .s{fill:#3a1119} .dv__obj--cab .dv__jack .s2{stroke:rgba(255,255,255,.55)} .dv__obj--cab .dv__jack .p{fill:#FFE6B4} .dv__obj--reader{padding:9px 5px 16px;border-radius:9px; background:linear-gradient(180deg,#2d3453,#161c31); box-shadow:0 14px 24px -14px rgba(0,0,0,.95),inset 0 1px 0 rgba(255,255,255,.18),0 0 0 1px rgba(0,0,0,.5)} .dv__obj--reader .dv__jack{width:34px;height:44px} .dv__obj--reader .dv__jack .s{fill:rgba(238,242,255,.12)} .dv__obj--reader .dv__jack .s2{stroke:rgba(238,242,255,.45)} .dv__led{position:absolute;left:50%;bottom:6px;width:6px;height:6px;margin-left:-3px;border-radius:50%; background:var(--c);box-shadow:0 0 9px var(--c)} .dv__obj--keypad{padding:8px 8px 9px;border-radius:5px; background:linear-gradient(180deg,#262d4a,#131930); box-shadow:0 14px 24px -14px rgba(0,0,0,.95),inset 0 1px 0 rgba(255,255,255,.18),0 0 0 1px rgba(0,0,0,.5)} .dv__screen{display:block;margin-bottom:6px;border-radius:2px;background:#0B1A16;color:var(--lime); font-family:var(--mono);font-size:7px;letter-spacing:.12em;padding:4px 4px;text-align:center;line-height:1; box-shadow:inset 0 0 10px rgba(168,255,62,.22)} .dv__obj--keypad .dv__jack{width:100%;height:44px} .dv__obj--keypad .dv__jack .p2{fill:rgba(238,242,255,.3)} .dv__obj--floor{padding:9px 10px 7px;border-radius:3px; background:linear-gradient(180deg,#9aa0ae,#5a6171); box-shadow:0 10px 18px -10px rgba(0,0,0,.9),inset 0 1px 0 rgba(255,255,255,.5),0 0 0 1px rgba(0,0,0,.48)} .dv__lid{position:absolute;left:-4px;top:-15px;width:calc(100% + 8px);height:15px;border-radius:2px 2px 0 0; background:linear-gradient(180deg,#bcc2ce,#7a8193);transform:rotate(-7deg);transform-origin:bottom left; box-shadow:0 -5px 12px rgba(0,0,0,.5)} .dv__obj--floor .dv__jack{width:42px;height:42px} /* the patch cord: only the devices that actually take one in the room ---- */ .dv__cord{position:absolute;left:50%;top:calc(50% + 22px);width:44px;margin-left:-22px;height:150px;z-index:1; opacity:0;transform:translateY(24px);pointer-events:none; transition:opacity .28s,transform .5s var(--ease)} .wl__band--mid .dv__cord{height:78px} .dv a:hover .dv__cord,.dv a:focus-visible .dv__cord{opacity:1;transform:translateY(0)} .dv__cord svg{position:absolute;inset:0;width:100%;height:100%} .dv__cord svg path{fill:none;stroke:var(--c);stroke-width:4;stroke-linecap:round; filter:drop-shadow(0 0 7px color-mix(in srgb,var(--c) 55%,transparent))} /* the plug boot: an RJ45 body with a latch tab on top and a cable gland under */ .dv__cord b{position:absolute;left:50%;top:-4px;width:18px;height:22px;margin-left:-9px;z-index:2; border-radius:2px 2px 3px 3px;background:linear-gradient(180deg,#3c4256,#22273a); box-shadow:inset 0 0 0 1px rgba(255,255,255,.24),0 3px 7px rgba(0,0,0,.65)} .dv__cord b::before{content:"";position:absolute;left:50%;top:-5px;width:9px;height:6px;margin-left:-4.5px; border-radius:2px 2px 0 0;background:linear-gradient(180deg,#727a93,#464d65)} .dv__cord b::after{content:"";position:absolute;left:50%;bottom:-6px;width:6px;height:8px;margin-left:-3px; border-radius:0 0 3px 3px;background:#191d2c} /* hovering any device traces its drop back up the riser to the tray ------ */ .wl:has(.dv a:hover) .wl__tray i,.wl:has(.dv a:focus-visible) .wl__tray i{ background:rgba(168,255,62,.85);box-shadow:0 0 10px rgba(168,255,62,.55)} .wl:has(.dv a:hover) .wl__riser,.wl:has(.dv a:focus-visible) .wl__riser{ background:var(--lime);box-shadow:0 0 12px rgba(168,255,62,.7)} .wl__band:has(.dv a:hover)::before,.wl__band:has(.dv a:focus-visible)::before{ background:repeating-linear-gradient(90deg,var(--lime) 0 10px,transparent 10px 15px)} .dv a:hover .dv__stub,.dv a:focus-visible .dv__stub{background:var(--lime);box-shadow:0 0 10px rgba(168,255,62,.85)} /* the skirting board and the floor the wall stands on */ .wl__skirt{position:relative;z-index:3;display:block;height:32px;margin-top:26px; background:linear-gradient(180deg,#2a3159,#171d3c);border-top:2px solid rgba(238,242,255,.24); box-shadow:inset 0 -12px 18px -12px rgba(0,0,0,.8)} .wall .dcta{justify-content:flex-start} @media (max-width:879px){ .wl__ceiling,.wl__riser,.dv__stub,.dv__cord{display:none} .wl__band{padding:20px 18px 0;grid-template-columns:1fr;gap:24px} .wl__band::before{display:none} .wl__band::after{position:static;order:-1;width:auto;text-align:left;padding-bottom:9px; border-bottom:1px dashed rgba(238,242,255,.14)} .dv{grid-column:auto} .dv--ap,.dv--floor{margin-top:0} .dv a{display:grid;grid-template-columns:var(--w) 1fr;grid-template-areas:"o t" "o l";gap:5px 15px;align-items:center} .dv__obj{grid-area:o;margin:0} .dv__tag{grid-area:t;align-self:end} .dv__line{grid-area:l;align-self:start;max-width:none} .dv__obj--disc::after{display:none} .wl__skirt{margin-top:22px} } /* ══ 04 · #building — the cutaway ═══════════════════════════════════════ */ .bldg__wrap{display:grid;gap:16px;align-items:start} @media (min-width:1080px){.bldg__wrap{grid-template-columns:1fr 300px;gap:22px}} .bldg__stage{overflow-x:auto;overflow-y:hidden;border:1px solid var(--hair);border-radius:10px;background:#0A0E24; -webkit-overflow-scrolling:touch} .bldg__svg{display:block;width:100%;min-width:760px;height:auto} /* every label is knocked out of the lines behind it */ .bldg__svg text{paint-order:stroke;stroke:#0A0E24;stroke-width:6px;stroke-linejoin:round} .bldg__svg .bs{fill:none;stroke:rgba(238,242,255,.34);stroke-width:2} .bldg__svg .rm{fill:rgba(238,242,255,.04);stroke:rgba(238,242,255,.16);stroke-width:1.5} .bldg__svg .lbl text{fill:rgba(238,242,255,.52);font-family:var(--mono);font-size:13px;letter-spacing:.14em} .bldg__svg .lbl--dim{fill:rgba(238,242,255,.3)} .bldg__svg .tray{fill:none;stroke:rgba(255,197,62,.42);stroke-width:3;stroke-dasharray:9 8} .bldg__svg .feed{fill:none;stroke:var(--lime);stroke-width:3.5;stroke-dasharray:100;stroke-dashoffset:100; filter:drop-shadow(0 0 5px rgba(168,255,62,.7));transition:stroke-dashoffset 1s var(--ease)} .bldg__svg .fan path{fill:none;stroke:var(--cyan);stroke-width:2;opacity:.8;stroke-dasharray:100; stroke-dashoffset:100;transition:stroke-dashoffset .9s var(--ease)} .js .bldg:not(.lit) .feed,.js .bldg:not(.lit) .fan path{stroke-dashoffset:100} .bldg.lit .feed{stroke-dashoffset:0} .bldg.lit .fan path{stroke-dashoffset:0} .bldg.lit .fan path:nth-child(1){transition-delay:.55s} .bldg.lit .fan path:nth-child(2){transition-delay:.65s} .bldg.lit .fan path:nth-child(3){transition-delay:.75s} .bldg.lit .fan path:nth-child(4){transition-delay:.9s} .bldg.lit .fan path:nth-child(5){transition-delay:1s} .bldg.lit .fan path:nth-child(6){transition-delay:1.15s} .bldg.lit .fan path:nth-child(7){transition-delay:1.25s} .bldg.lit .fan path:nth-child(8){transition-delay:1.3s} .bldg.lit .fan path:nth-child(9){transition-delay:1.35s} .bldg.lit .fan path:nth-child(10){transition-delay:1.4s} .bldg.lit .fan path:nth-child(11){transition-delay:1.45s} .bldg.lit .fan path:nth-child(12){transition-delay:1.5s} .bldg.lit .fan path:nth-child(13){transition-delay:1.55s} .bldg.lit .fan path:nth-child(14){transition-delay:1.6s} .bldg__svg .dev{cursor:pointer} .bldg__svg .dev .hit{fill:rgba(0,229,255,.001)} .bldg__svg .dev .bx{fill:#141b40;stroke:var(--cyan);stroke-width:2;transition:stroke .3s,fill .3s} .bldg__svg .dev .dt{fill:none;stroke:rgba(238,242,255,.5);stroke-width:2} .bldg__svg .dev .led{fill:var(--lime)} .bldg__svg .dev .dn{fill:rgba(238,242,255,.5);font-family:var(--mono);font-size:12px;letter-spacing:.12em} .bldg__svg .dev:hover .bx,.bldg__svg .dev:focus .bx,.bldg__svg .dev.on .bx{stroke:var(--lime);fill:#16251c} .bldg__svg .dev:hover .dn,.bldg__svg .dev:focus .dn,.bldg__svg .dev.on .dn{fill:var(--lime)} .bldg__svg .dev:focus{outline:none} .bldg__svg .dev:focus-visible .hit{stroke:var(--lime);stroke-width:2} .bldg__callout{margin:0;border:6px solid #F4F1E6;border-radius:3px;background:#070A1E; box-shadow:0 26px 50px -24px rgba(0,0,0,.9);align-self:start} .bldg__callout img{width:100%;height:190px;object-fit:cover;display:block} .bldg__callout figcaption{background:#F4F1E6;color:#1A1A1A;font-family:var(--mono);font-size:9.5px; letter-spacing:.08em;text-transform:uppercase;padding:8px 9px;line-height:1.4} .bldg__hint{margin:12px 0 0;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--on-faint)} @media (min-width:1080px){.bldg__hint{grid-column:1/2}} /* ══ 05 · #rack — the work, running on his own monitors ════════════════ The last thing that goes in on a security job is the monitor wall in the back office. This is that wall, with the jobs on it instead of the building: uneven screen sizes in one bezel, a tally that walks the feeds, and ONE status line under the whole thing — no per-screen index codes. */ .feeds{background:linear-gradient(180deg,#0b1028,#0d1330)} .jump{display:block;height:0;scroll-margin-top:90px} .nvr{position:relative;border-radius:10px;padding:14px 14px 0; background:linear-gradient(180deg,#151b3e,#0a0e24);border:1px solid rgba(238,242,255,.12); box-shadow:0 50px 90px -50px rgba(0,0,0,.95)} .nvr__wall{position:relative;display:grid;gap:6px;padding:8px;border-radius:6px;background:#04060f; grid-template-columns:repeat(12,1fr); grid-template-rows:repeat(2,clamp(94px,10.5vw,148px)) clamp(90px,9.6vw,136px) clamp(112px,12vw,168px); box-shadow:inset 0 0 0 1px rgba(255,255,255,.07)} /* one sheet of glass over the whole wall, not a frame per photo */ .nvr__wall::after{content:"";position:absolute;inset:8px;border-radius:4px;pointer-events:none;z-index:4; background:linear-gradient(116deg,rgba(255,255,255,.085) 0 15%,transparent 32%)} .fd{position:relative;margin:0;overflow:hidden;border-radius:2px;background:#000; box-shadow:inset 0 0 0 1px rgba(255,255,255,.09);filter:brightness(.62) saturate(.8); transition:filter .7s var(--ease),box-shadow .45s} .fd img{width:100%;height:100%;object-fit:cover;display:block} .fd::after{content:"";position:absolute;inset:0;pointer-events:none; background:repeating-linear-gradient(180deg,rgba(0,0,0,.24) 0 1px,transparent 1px 3px)} /* the caption stays in the document for screen readers; the wall shows one status line instead, the way an NVR does */ .fd figcaption{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden; clip-path:inset(50%);white-space:nowrap;border:0} html:not(.js) .fd{filter:none} .fd.live{filter:none;box-shadow:inset 0 0 0 2px var(--lime),0 0 26px -6px rgba(168,255,62,.4)} .fd.live::before{content:"";position:absolute;right:8px;top:8px;z-index:3;width:8px;height:8px;border-radius:50%; background:#FF4A6B;box-shadow:0 0 10px #FF4A6B;animation:blip 1.6s ease-in-out infinite} .fd--1{grid-column:1/7;grid-row:1/3} .fd--2{grid-column:7/10;grid-row:1/2} .fd--3{grid-column:10/13;grid-row:1/2} .fd--4{grid-column:7/11;grid-row:2/3} .fd--5{grid-column:11/13;grid-row:2/3} .fd--6{grid-column:1/4;grid-row:3/4} .fd--7{grid-column:4/7;grid-row:3/4} .fd--8{grid-column:7/10;grid-row:3/4} .fd--9{grid-column:10/13;grid-row:3/4} .fd--10{grid-column:1/13;grid-row:4/5} .fd--split{display:grid;grid-template-columns:1fr 1fr;gap:4px} .fd__half{position:relative;display:block;overflow:hidden;background:#000} .fd__half img{width:100%;height:100%;object-fit:cover;display:block} .fd__half i{position:absolute;left:8px;bottom:8px;font-style:normal;font-family:var(--mono);font-size:9px; letter-spacing:.16em;text-transform:uppercase;color:var(--on);background:rgba(4,6,15,.78); padding:3px 7px;border-radius:2px} .nvr__bar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:13px 4px 12px} .nvr__rec{flex:0 0 auto;width:9px;height:9px;border-radius:50%;background:#FF4A6B; box-shadow:0 0 10px #FF4A6B;animation:blip 1.6s ease-in-out infinite} .nvr__now{margin:0;flex:1 1 220px;font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--lime)} .nvr__sys{margin:0;font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--on-faint)} .nvr__desk{display:flex;align-items:center;gap:20px;padding:13px 6px 15px; border-top:1px solid rgba(238,242,255,.1);background:linear-gradient(180deg,rgba(238,242,255,.05),transparent)} .nvr__stick{position:relative;flex:0 0 auto;width:36px;height:16px;border-radius:0 0 16px 16px; background:linear-gradient(180deg,#39405f,#1f2540)} .nvr__stick i{position:absolute;left:50%;bottom:10px;width:5px;height:20px;margin-left:-2.5px;border-radius:3px; background:linear-gradient(180deg,#8d95ad,#454c68)} .nvr__stick i::after{content:"";position:absolute;left:50%;top:-8px;width:14px;height:11px;margin-left:-7px; border-radius:7px 7px 3px 3px;background:#c3c9da} .nvr__keys{display:flex;gap:5px} .nvr__keys i{width:17px;height:11px;border-radius:2px;background:linear-gradient(180deg,#39405f,#1e2439); box-shadow:inset 0 1px 0 rgba(255,255,255,.18)} .nvr__dial{flex:0 0 auto;width:26px;height:26px;border-radius:50%; background:conic-gradient(from 0deg,#3b4263,#20263e 40%,#3b4263 60%,#20263e); box-shadow:inset 0 0 0 2px rgba(255,255,255,.1),0 3px 8px rgba(0,0,0,.6)} @media (max-width:719px){ .nvr__wall{grid-template-columns:repeat(2,1fr);grid-template-rows:none;grid-auto-rows:clamp(92px,26vw,150px)} .fd{grid-column:auto;grid-row:auto} .fd--1,.fd--10{grid-column:1/3} .nvr__desk{display:none} } /* ══ 06 · #report — the certifier, not its paperwork ═══════════════════ The instrument itself: rubber-bumpered body, two test ports with the run plugged into one, the licence numbers printing on its LCD, soft keys and the AUTOTEST dial. No paper, no strip, no document beside a copy column. */ .cert__h2{position:relative;font-family:var(--mono);font-weight:700;text-transform:uppercase; font-size:clamp(1.05rem,2.3vw,1.7rem);letter-spacing:.14em;line-height:1.3;color:var(--on); margin:0 0 16px;padding:0 0 14px 22px;max-width:56ch; border-bottom:2px dashed rgba(238,242,255,.2)} .cert__h2 em{display:block;margin-top:10px;font-style:normal;font-size:clamp(.7rem,1.15vw,.84rem); letter-spacing:.2em;color:var(--lime)} .cert__caret{position:absolute;left:0;top:.3em;width:9px;height:.95em;background:var(--lime); box-shadow:0 0 10px rgba(168,255,62,.6);animation:blip 1.4s steps(1,end) infinite} .tstr{position:relative;z-index:0;max-width:730px;margin:clamp(26px,4vw,44px) auto 0} .tstr__body{position:relative;border-radius:18px;padding:16px clamp(12px,2vw,22px) 18px; background:linear-gradient(180deg,#212741,#12172b);border:1px solid rgba(0,0,0,.55); box-shadow:0 44px 84px -44px rgba(0,0,0,1),inset 0 1px 0 rgba(255,255,255,.12)} /* the lime over-mould every field tester is wrapped in */ .tstr__body::before{content:"";position:absolute;inset:-10px;border-radius:26px;z-index:-1; background:linear-gradient(180deg,#8ed02f,#4b8511); box-shadow:0 30px 60px -36px rgba(0,0,0,1)} .tstr__strap{position:absolute;left:50%;top:-30px;width:78px;height:22px;margin-left:-39px;z-index:-2; border-radius:10px 10px 0 0;background:linear-gradient(180deg,#3c6a10,#2a4d0b)} .tstr__top{display:flex;align-items:center;gap:12px;padding:2px 4px 14px} .tstr__port{position:relative;flex:0 0 auto;width:34px;height:25px;border-radius:3px;background:#0a0d18; box-shadow:inset 0 0 0 1px rgba(255,255,255,.18)} .tstr__port i{position:absolute;left:6px;right:6px;top:6px;height:8px; background-image:linear-gradient(90deg,#99a1b7 0 2px,transparent 2px 5px);background-size:5px 100%} .tstr__port::after{content:"";position:absolute;left:11px;right:11px;bottom:-5px;height:6px; border-radius:0 0 3px 3px;background:#0a0d18} .tstr__port--in::before{content:"";position:absolute;right:100%;top:12px;width:clamp(14px,3.4vw,42px);height:5px; border-radius:3px;background:var(--lime);box-shadow:0 0 12px rgba(168,255,62,.85)} .tstr__brand{margin-left:auto;font-family:var(--mono);font-size:9.5px;letter-spacing:.24em; color:rgba(238,242,255,.5)} .tstr__lcd{position:relative;border-radius:6px;padding:14px clamp(10px,1.8vw,18px); background:#08150E;border:1px solid rgba(168,255,62,.3); box-shadow:inset 0 0 44px rgba(168,255,62,.1),inset 0 0 0 1px rgba(0,0,0,.6)} .tstr__lcd::after{content:"";position:absolute;inset:0;border-radius:6px;pointer-events:none; background:repeating-linear-gradient(180deg,rgba(0,0,0,.16) 0 1px,transparent 1px 3px)} .tstr__hd{border-bottom:1px solid rgba(168,255,62,.32);padding-bottom:9px;margin-bottom:3px} .tstr__hd p{margin:0;font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.1em;color:var(--lime)} .tstr__hd p+p{margin-top:3px;font-weight:400;font-size:9.5px;letter-spacing:.16em;color:rgba(168,255,62,.58)} .tstr__rows{list-style:none;margin:0;padding:0} .tstr__rows li{display:grid;grid-template-columns:1fr auto auto;gap:10px;align-items:baseline;padding:8px 0; border-bottom:1px dotted rgba(168,255,62,.22);font-family:var(--mono);font-size:12px;color:var(--lime); transition:opacity .2s linear;transition-delay:calc(var(--i)*.08s)} .js .cert:not(.lit) .tstr__rows li{opacity:0} .tstr__rows span{color:rgba(168,255,62,.56);letter-spacing:.06em;text-transform:uppercase;font-size:10px} .tstr__rows b{font-weight:700;letter-spacing:.02em;white-space:nowrap;color:#E9FFD0} .tstr__rows i{font-style:normal;background:var(--lime);color:#08210A;font-size:9px;font-weight:700; letter-spacing:.14em;padding:3px 7px;border-radius:2px} .tstr__foot{margin:12px 0 0;font-family:var(--mono);font-size:9.5px;letter-spacing:.18em; text-transform:uppercase;color:rgba(168,255,62,.6)} .tstr__panel{display:flex;align-items:center;gap:clamp(12px,2vw,20px);margin-top:16px;padding:0 2px} .tstr__keys{display:flex;gap:8px;flex:1 1 auto} .tstr__keys i{flex:1 1 auto;max-width:80px;text-align:center;font-style:normal;font-family:var(--mono); font-size:9px;letter-spacing:.14em;color:rgba(238,242,255,.55);padding:8px 0;border-radius:4px; background:linear-gradient(180deg,#3a4160,#1d2337); box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 2px 5px rgba(0,0,0,.55)} .tstr__dial{position:relative;flex:0 0 auto;width:62px;height:62px;border-radius:50%; display:grid;place-items:center;align-content:center; background:conic-gradient(from 210deg,#454c6c,#222840 25%,#454c6c 50%,#222840 75%,#454c6c); box-shadow:inset 0 0 0 3px rgba(0,0,0,.42),0 6px 14px rgba(0,0,0,.6)} .tstr__dial b{position:absolute;left:50%;top:7px;width:3px;height:15px;margin-left:-1.5px;border-radius:2px; background:var(--lime);box-shadow:0 0 8px var(--lime)} .tstr__dial em{font-style:normal;font-family:var(--mono);font-size:7px;letter-spacing:.13em; color:rgba(238,242,255,.62);margin-top:13px} .cert .rep__look{margin:clamp(22px,3vw,32px) auto 0;text-align:center;font-family:var(--mono);font-size:12px; letter-spacing:.04em;color:var(--on-faint)} .cert .dcta{justify-content:center;margin-top:20px} /* ══ 07 · #van — the wrapped van ════════════════════════════════════════ */ .vanb{padding:0;overflow:hidden} .vanb__road{position:relative;overflow:hidden;background:linear-gradient(180deg,#0A0E24,#151c48 55%,#0A0E24)} /* the drive-in offset is set by js/run.js, never here: a transform declared in CSS becomes the base GSAP composes its xPercent on top of, and the van would never arrive. With no JS the van simply sits parked in frame. */ .vanb__body{position:relative;will-change:transform} .vanb__img{width:100%;height:auto;max-height:520px;object-fit:cover;object-position:center;display:block; -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent); mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)} .vanb__mojo{position:absolute;left:2%;bottom:-2%;width:min(26%,270px);height:auto;z-index:2; filter:drop-shadow(0 24px 34px rgba(0,0,0,.7)); -webkit-mask-image:radial-gradient(ellipse at 50% 55%,#000 44%,transparent 74%); mask-image:radial-gradient(ellipse at 50% 55%,#000 44%,transparent 74%)} .vanb__plate{position:absolute;right:5%;bottom:14%;z-index:3;background:#F4F1E6;color:#1A1A1A; border:3px solid #1A1A1A;border-radius:5px;padding:8px 14px;font-family:var(--display);font-weight:900; font-size:clamp(.95rem,1.8vw,1.4rem);text-transform:uppercase;line-height:1;text-align:center; box-shadow:0 16px 30px rgba(0,0,0,.5)} .vanb__plate small{display:block;font-family:var(--mono);font-size:8px;letter-spacing:.26em;font-weight:500;margin-top:3px} .vanb__slogan{position:absolute;left:0;right:0;bottom:0;z-index:2;margin:0;padding:26px clamp(16px,4vw,60px) 16px; background:linear-gradient(0deg,rgba(8,11,30,.92),transparent);font-family:var(--display);font-weight:800; text-transform:uppercase;font-size:clamp(1.1rem,3vw,2.3rem);line-height:1.05;color:var(--on);text-align:center} .vanb__slogan em{font-style:italic;color:var(--lime)} .vanb__cap{margin:0;padding:16px var(--gut);text-align:center;font-size:10.5px;letter-spacing:.2em; text-transform:uppercase;color:var(--on-faint);border-top:1px solid rgba(238,242,255,.08)} @media (max-width:760px){ .vanb__img{min-height:230px;object-fit:cover;object-position:58% 50%} .vanb__mojo{width:40%;left:-4%;bottom:12%} .vanb__plate{right:3%;top:8%;bottom:auto} } /* ══ 08 · #signs — a corridor, not a row of cards ══════════════════════ Five door openings in one wall, signed the way a building actually is: brushed dark substrate, raised type, a real braille cell under the word, mounted at slightly different heights. The scope for each room is read through the doorway, not off the sign. */ .cor{background:linear-gradient(180deg,#0d1230,#141a40)} .corr{position:relative;overflow:hidden;border-radius:10px; padding:clamp(52px,5.4vw,76px) clamp(16px,2.4vw,30px) 0; background:linear-gradient(180deg,#262c56 0,#1b2147 54%,#141a38 100%); box-shadow:inset 0 0 0 1px rgba(238,242,255,.1),0 40px 80px -50px rgba(0,0,0,.95)} .corr::before{content:"";position:absolute;left:0;right:0;top:0;height:27px;z-index:2; background:linear-gradient(180deg,#363d6e,#232a52);border-bottom:1px solid rgba(0,0,0,.55); box-shadow:0 9px 18px -7px rgba(0,0,0,.8)} .corr::after{content:"";position:absolute;left:0;right:0;top:27px;height:12px;z-index:2;pointer-events:none; background:linear-gradient(180deg,rgba(0,0,0,.45),transparent)} .corr__wash{position:absolute;left:0;right:0;top:0;height:52%;pointer-events:none; background:linear-gradient(180deg,rgba(238,242,255,.14),transparent); -webkit-mask-image:radial-gradient(ellipse 72% 100% at 50% 0%,#000 28%,transparent 100%); mask-image:radial-gradient(ellipse 72% 100% at 50% 0%,#000 28%,transparent 100%)} .corr__row{position:relative;z-index:1;list-style:none;margin:0;padding:0;display:grid; gap:clamp(16px,2vw,24px);grid-template-columns:1fr;align-items:end} @media (min-width:620px){.corr__row{grid-template-columns:repeat(2,1fr)}} @media (min-width:1080px){.corr__row{grid-template-columns:repeat(5,1fr);gap:14px}} .door{display:flex;flex-direction:column;justify-content:flex-end} .door__sign{position:relative;align-self:flex-start;max-width:200px;margin:var(--h) 0 18px; border-radius:4px;padding:12px 13px 11px;border:1px solid rgba(0,0,0,.5); background-color:#242a44; background-image:repeating-linear-gradient(90deg,rgba(255,255,255,.055) 0 1px,transparent 1px 3px), linear-gradient(165deg,#3a416c,#1d2338 58%,#2c3354); box-shadow:0 18px 28px -14px rgba(0,0,0,.95),inset 0 1px 0 rgba(255,255,255,.32), inset 0 -1px 0 rgba(0,0,0,.55); transition:transform .4s var(--ease),box-shadow .4s} .door:hover .door__sign{transform:translateY(-4px);box-shadow:0 26px 36px -16px rgba(0,0,0,1), inset 0 1px 0 rgba(255,255,255,.4),inset 0 -1px 0 rgba(0,0,0,.55)} .door__pict{display:block;width:34px;height:34px;margin:0 0 10px;background:var(--c);border-radius:3px; padding:5px;box-shadow:inset 0 0 0 1px rgba(0,0,0,.42)} .door__pict svg{width:100%;height:100%;fill:none;stroke:#15161c;stroke-width:2.8; stroke-linejoin:round;stroke-linecap:round} .door__t{display:block;font-family:var(--display);font-weight:900;text-transform:uppercase;letter-spacing:.04em; font-size:clamp(1.05rem,1.7vw,1.4rem);line-height:1;color:#fff; text-shadow:0 -1px 0 rgba(0,0,0,.7),0 1px 0 rgba(255,255,255,.45),0 2px 4px rgba(0,0,0,.55)} .door__braille{display:block;margin-top:10px;font-size:14.5px;line-height:1;letter-spacing:.06em; color:rgba(255,255,255,.88);text-shadow:0 1px 1px rgba(0,0,0,.85),0 -1px 0 rgba(255,255,255,.3)} .door__frame{position:relative;display:block;min-height:var(--d);border-radius:3px 3px 0 0; padding:18px 15px; background:linear-gradient(180deg,#04060f 0,#080c1a 58%,#161d36 100%); box-shadow:0 0 0 5px #3a4272,0 0 0 6px rgba(0,0,0,.7),0 18px 30px -16px rgba(0,0,0,.95), inset 0 26px 34px -24px rgba(0,0,0,1),inset 0 -20px 26px -22px rgba(150,170,230,.5)} /* the leaf of the door, standing open against the left jamb */ .door__frame::before{content:"";position:absolute;left:0;top:0;bottom:0;width:9px; background:linear-gradient(90deg,#444c7c,#252c50);box-shadow:2px 0 8px rgba(0,0,0,.7)} .door__num{position:absolute;right:9px;top:54%;width:22px;height:5px;border-radius:3px; background:linear-gradient(180deg,#ccd2e2,#6d7591);box-shadow:0 2px 5px rgba(0,0,0,.8)} .door__num::before{content:"";position:absolute;right:-5px;top:-6px;width:10px;height:17px;border-radius:3px; background:linear-gradient(180deg,#aeb5c8,#5c6276)} .door__l{display:block;color:rgba(208,216,244,.76);font-size:.84rem;line-height:1.5;max-width:34ch} .corr__skirt{position:relative;z-index:2;display:block;height:30px; margin:0 calc(-1 * clamp(16px,2.4vw,30px)); background:linear-gradient(180deg,#2e3560,#1a2040);border-top:2px solid rgba(238,242,255,.26); box-shadow:inset 0 -12px 18px -12px rgba(0,0,0,.8)} @media (max-width:619px){ .door__frame{min-height:0} .door__sign{margin-top:0} } /* ══ 09 · #route — the route board ══════════════════════════════════════ */ .board__h2{display:inline-block;margin:0 0 20px;padding:12px 24px;border-radius:999px; background:var(--lime);color:#08210A;font-family:var(--display);font-weight:900;text-transform:uppercase; font-size:clamp(1.02rem,2.4vw,1.9rem);line-height:1.06;letter-spacing:.01em; box-shadow:0 0 0 6px rgba(168,255,62,.14)} .board__map{border:1px solid var(--hair);border-radius:12px;background:#0b1130; padding:clamp(20px,3vw,36px)} .board__hub{position:relative;margin:0 0 26px;display:inline-flex;flex-direction:column;gap:4px;background:var(--lime); color:#08210A;border-radius:6px;padding:12px 18px;box-shadow:0 0 0 6px rgba(168,255,62,.15)} .board__hub::after{content:"";position:absolute;left:8px;top:100%;width:6px;height:26px;background:var(--lime)} .board__hub b{font-family:var(--display);font-weight:900;font-size:1.5rem;line-height:1;letter-spacing:.02em} .board__hub span{font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;opacity:.8} .board__lines{position:relative;display:grid;gap:30px;grid-template-columns:1fr;padding-top:26px;align-items:start} @media (min-width:700px){.board__lines{grid-template-columns:repeat(2,1fr);gap:30px 28px}} @media (min-width:1080px){.board__lines{grid-template-columns:repeat(4,1fr);gap:0 22px} /* the hub feeder: from the first branch bar to the last one */ .board__lines::before{content:"";position:absolute;top:0;left:8px;height:6px;border-radius:3px; right:calc((100% - 66px)/4 - 8px); background:linear-gradient(90deg,#00E5FF,#A8FF3E 34%,#FFC53E 67%,#B36BFF)} .board__lines .bline::before{top:-26px} } .bline{position:relative;padding-left:30px} .bline::before{content:"";position:absolute;left:8px;top:0;bottom:30px;width:6px;border-radius:3px;background:var(--c)} .bline__n{margin:0 0 10px;font-family:var(--mono);font-size:9.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--c)} .stn{position:relative;display:block;padding:11px 0;text-decoration:none;border-bottom:1px solid rgba(238,242,255,.07)} .stn i{position:absolute;left:-28px;top:16px;width:16px;height:16px;border-radius:50%;background:var(--ink); border:3px solid var(--c);transition:background .3s,box-shadow .3s} .stn:hover i,.stn:focus-visible i{background:var(--c);box-shadow:0 0 14px var(--c)} .stn b{display:block;font-family:var(--display);font-weight:800;text-transform:uppercase;font-size:1.18rem; line-height:1.1;color:var(--on);transition:color .3s} .stn:hover b{color:var(--c)} .stn em{font-style:normal;font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;color:var(--on-faint)} .stn small{display:block;margin-top:4px;font-family:var(--mono);font-size:9px;letter-spacing:.1em; text-transform:uppercase;color:var(--violet)} .stn--wa b{color:var(--violet)} /* ══ 10 · #john — the owner ═════════════════════════════════════════════ */ .owner__in{display:grid;gap:clamp(30px,4vw,58px);align-items:start} @media (min-width:960px){.owner__in{grid-template-columns:.8fr 1.2fr}} .owner__shot{position:relative;margin:0;border-radius:10px;overflow:hidden;border:1px solid var(--hair); box-shadow:0 40px 80px -40px rgba(0,0,0,.95);max-width:460px} .owner__shot img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;display:block} .owner__shot figcaption{position:absolute;left:0;right:0;bottom:0;padding:10px 12px; background:linear-gradient(0deg,rgba(7,10,26,.92),transparent);font-family:var(--mono);font-size:10px; letter-spacing:.1em;text-transform:uppercase;color:var(--on-soft)} .owner__facts{list-style:none;margin:0 0 8px;padding:0} .owner__facts li{display:grid;grid-template-columns:auto 1fr;gap:18px;align-items:baseline;padding:16px 0; border-bottom:1px solid var(--hair)} .owner__facts b{font-family:var(--display);font-weight:900;font-size:clamp(2.2rem,4vw,3rem);line-height:1; background:linear-gradient(120deg,var(--gold),var(--lime));-webkit-background-clip:text;background-clip:text; color:transparent;min-width:2.4ch} .owner__facts span{color:var(--on-soft);font-size:.98rem} .pocket{position:relative;margin-top:28px;max-width:660px;background:linear-gradient(180deg,#151c48,#0e1436); border:1px solid rgba(238,242,255,.16);border-radius:8px;padding:20px 18px 18px; box-shadow:inset 0 2px 10px rgba(0,0,0,.5)} .pocket::before{content:"";position:absolute;inset:7px;border:2px dashed rgba(238,242,255,.18);border-radius:5px;pointer-events:none} .pocket__n{position:relative;margin:0 0 14px;font-size:9.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--on-faint)} .patches{position:relative;list-style:none;margin:0;padding:0;display:grid;gap:12px;grid-template-columns:1fr} @media (min-width:520px){.patches{grid-template-columns:repeat(2,1fr)}} .patch{position:relative;background-color:var(--c);color:#0A0E24;border-radius:9px;padding:14px 12px; text-align:center;border:2px solid rgba(0,0,0,.42); /* twill weave, then a merrow overlock edge in a darker run of the same thread */ background-image:repeating-linear-gradient(45deg,rgba(255,255,255,.07) 0 1px,transparent 1px 6px); box-shadow:inset 0 0 0 4px color-mix(in srgb,var(--c) 58%,#0A0E24), inset 0 0 0 5px rgba(0,0,0,.3),inset 0 2px 3px rgba(255,255,255,.35), 0 12px 20px -8px rgba(0,0,0,.9); transform:rotate(-1.5deg);transition:transform .4s var(--ease)} .patch:nth-child(2n){transform:rotate(1deg)} .patch:hover{transform:rotate(0) translateY(-3px)} .patch::after{content:"";position:absolute;inset:9px;border:1px dashed rgba(10,14,36,.42);border-radius:4px} .patch small{position:relative;display:block;font-family:var(--mono);font-size:8.5px;letter-spacing:.18em; text-transform:uppercase;opacity:.8} .patch b{position:relative;display:block;margin-top:4px;font-family:var(--display);font-weight:900; text-transform:uppercase;font-size:1.12rem;line-height:1;letter-spacing:.02em; text-shadow:0 1px 0 rgba(255,255,255,.5),0 -1px 0 rgba(0,0,0,.2)} /* ══ 11 · #punchlist + 12 · #book — the clipboard stock ═════════════════ */ .clip{position:relative;max-width:940px;margin-inline:auto;background:#F4F1E6;color:#171712; border:1px solid rgba(0,0,0,.4);border-radius:8px;padding:58px clamp(16px,3vw,40px) 34px; box-shadow:0 40px 80px -40px rgba(0,0,0,1)} .clip__top{position:absolute;left:0;right:0;top:0;height:34px;background:linear-gradient(180deg,#2b3145,#181d2b); border-radius:7px 7px 0 0;border-bottom:1px solid rgba(0,0,0,.5)} .clip__clamp{position:absolute;left:50%;top:10px;transform:translateX(-50%);width:118px;height:36px;border-radius:5px; background:linear-gradient(180deg,#d2d5dd,#868c9b);box-shadow:0 6px 14px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.8)} .clip__hd{margin:0 0 16px;font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:#6a6a5e; border-bottom:2px solid #171712;padding-bottom:10px} .punch__list{counter-reset:pl;list-style:none;margin:0;padding:0} .punch__list li{display:grid;grid-template-columns:34px 30px 1fr;gap:4px 12px;align-items:start; padding:16px 0;border-bottom:1px dashed rgba(0,0,0,.28)} .punch__list li::before{counter-increment:pl;content:counter(pl,decimal-leading-zero);grid-column:1;grid-row:1/3; font-family:var(--mono);font-size:13px;font-weight:700;color:#9a9a8c} .punch__list .tick{grid-column:2;grid-row:1;position:relative;width:22px;height:22px;border:2px solid #171712; border-radius:3px;margin-top:1px} .punch__list .tick::after{content:"";position:absolute;left:6px;top:0;width:7px;height:13px; border:solid #1f7a10;border-width:0 3px 3px 0;transform:rotate(42deg) scale(1);transform-origin:50% 50%; transition:transform .3s var(--ease);transition-delay:calc(var(--i)*.11s)} .js .punch:not(.lit) .tick::after{transform:rotate(42deg) scale(0)} .punch__list b{grid-column:3;grid-row:1;font-family:var(--display);font-weight:800;text-transform:uppercase; font-size:clamp(1.05rem,1.9vw,1.35rem);line-height:1.1;letter-spacing:0} .punch__list .a{grid-column:3;grid-row:2;color:#3d3d34;font-size:.95rem;line-height:1.55;max-width:70ch} .punch .dcta{margin-top:26px} /* the clipboard link is declared once, in the colour block below (#1C7A0E) */ .order__in{display:grid;gap:clamp(30px,4vw,58px);align-items:start} @media (min-width:1000px){.order__in{grid-template-columns:.85fr 1.15fr}} .order__lines{display:flex;flex-direction:column} .order__lines .bigline b{text-transform:none} #book .lead{background:#F4F1E6;color:#171712;border:1px solid rgba(0,0,0,.4);border-radius:8px; padding:clamp(18px,2.6vw,30px);backdrop-filter:none;box-shadow:0 40px 80px -40px rgba(0,0,0,1)} .lead__hd{margin:0 0 20px;font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:#6a6a5e; border-bottom:2px solid #171712;padding-bottom:10px} #book .f>span,#book .f legend{color:#6a6a5e} #book .f input,#book .f select,#book .f textarea{background-color:#fff;border:1px solid rgba(0,0,0,.32); color:#171712;border-radius:3px} #book .f input,#book .f textarea{background-image:none} #book .f input::placeholder,#book .f textarea::placeholder{color:#9a9a8c} #book .f input:focus,#book .f select:focus,#book .f textarea:focus{border-color:#1f7a10; box-shadow:0 0 0 3px rgba(31,122,16,.2)} /* the caret: same two-triangle trick as site.css, restated because the background-color above resets position/size/repeat if left to shorthand */ #book .f select{background-image:linear-gradient(45deg,transparent 50%,#1f7a10 50%),linear-gradient(135deg,#1f7a10 50%,transparent 50%); background-position:calc(100% - 18px) 50%,calc(100% - 13px) 50%;background-size:5px 5px;background-repeat:no-repeat} #book .lead__svc{border-color:rgba(0,0,0,.32)} #book .lead__svc input{accent-color:#1f7a10} #book .lead__msg{color:#1f7a10} #book .lead__msg.err{color:#B3261E} #book .lead__fine{color:#6a6a5e} .lead__end{position:relative;display:flex;align-items:center;gap:14px;margin-top:22px} .lead__jack{position:relative;flex:0 0 auto;width:44px;height:32px;border-radius:4px;background:#1e222e; box-shadow:inset 0 0 0 1px rgba(255,255,255,.2)} .lead__jack i{position:absolute;left:8px;right:8px;top:7px;height:10px; background-image:linear-gradient(90deg,var(--lime) 0 2px,transparent 2px 5px);background-size:5px 100%} .lead__jack::before{content:"";position:absolute;left:14px;right:14px;bottom:-5px;height:7px;border-radius:0 0 3px 3px;background:#1e222e} .lead__jack::after{content:"";position:absolute;right:100%;top:50%;transform:translateY(-50%); width:clamp(14px,3vw,28px);height:6px;border-radius:3px;background:var(--lime); box-shadow:0 0 10px rgba(168,255,62,.8)} #book .lead__btn{width:auto;flex:1 1 auto;margin-top:0} /* ══ hero detail — the 24 ports are drawn as keystones ═════════════════ Each port gets a latch notch, two contact pins and its own number on the rail, so the most-looked-at object on the page carries the most drawing. */ .runpage .panel__ports{counter-reset:pt;gap:5px;padding:11px 10px} .runpage .panel__ports i{aspect-ratio:1/1.3;border-radius:2px 2px 3px 3px;background-color:#141a44; background-image: linear-gradient(90deg,transparent 0 33%,rgba(238,242,255,.32) 33% 67%,transparent 67%), linear-gradient(90deg,transparent 0 30%,rgba(255,197,62,.6) 30% 36%,transparent 36% 64%,rgba(255,197,62,.6) 64% 70%,transparent 70%), linear-gradient(180deg,#1c2358,#0e1440); background-size:100% 4px,100% 34%,100% 100%; background-position:0 3px,0 40%,0 0; background-repeat:no-repeat; box-shadow:inset 0 0 0 1px rgba(238,242,255,.13),inset 0 -2px 0 rgba(0,0,0,.45)} .runpage .panel__ports i::before{counter-increment:pt;content:counter(pt,decimal-leading-zero); position:absolute;left:0;right:0;bottom:1px;text-align:center;font-family:var(--mono);font-size:6.5px; line-height:1;color:rgba(238,242,255,.45)} /* Mojo rides the bay instead of being cropped by its edge */ .rk__bay .mojo--hero{left:auto;right:2px;bottom:-2%;width:min(26%,116px);z-index:5} /* ══ the dock never sits on the footer's legal line ════════════════════ */ @media (min-width:800px){.runpage .ftr__bottom{padding-right:170px}} /* ══ 390: the readout clears the sticky call bar at rest ═══════════════ */ @media (max-width:640px){ .pnl{padding-top:clamp(82px,10vh,102px);padding-bottom:112px} .pnl .eyebrow{margin-bottom:16px} .pnl .hero__h1{margin-bottom:14px} .pnl .hero__sub{margin-bottom:18px} .pnl .hero__cta{margin-bottom:20px} .pnl .readout div{padding:10px 13px} } /* ══════════════════════════════════════════════════════════════════════════ THE COLOUR PASS — build 05, "spruce it up" (11 Sep 2026) ────────────────────────────────────────────────────────────────────────── John's wrap is not navy with one lime line on it: it is electric purple, signal green, orange, cyan and gold swirling on black (Branding.png). This block brings that energy onto the page. Nothing below moves a word, an id, a link or a form field — it is light and colour only. THE MECHANISM Every
carries data-accent="--", one value per section and no two alike. Each trio resolves to three inherited variables the whole subtree reads: --accent the section's lead colour — headline tail, links, LEDs --accent2 its partner — second gradient stop, the lighter streaks --accent-deep a saturated ground tone, for the swirl wash only No rule after this point hard-codes a hue, so a section's colour is one line; js/run.js reads --accent off the section the packet is crossing and writes it to --runc on the rail, so the cable itself changes colour as it passes each section (§ RUN below). THE GROUND RULES the whole block obeys · every wash and streak is a BACKGROUND on an element that already exists — backgrounds cannot overflow, so scrollWidth stays === clientWidth; · every wash sits behind content by construction (it is the background) or at z-index 0 under a lifted z-index:1 wrapper — never over type; · washes run 10–18 % so body copy keeps its AA contrast on every ground; where the brief's colour would fail on a light ground (lime on the cream clipboard) the readable member of the same family is used instead. ══════════════════════════════════════════════════════════════════════════ */ /* ── the wrap's own palette, sampled off Branding.png / Emblem1.png ─────── */ :root{ --kc-purple:#8B3DFF; --kc-purple-deep:#4A1D9E; --kc-green:#3DFF7A; --kc-green-deep:#1B7F3B; --kc-amber:#FF8A1E; --kc-gold:#FFC53E; --kc-cyan:#00E5FF; --kc-lime:#C6FF3D; --kc-ice:#C8FBFF; --kc-flare:#FF5A3D; /* AP white-cyan · fire red-orange */ --kc-pink:#FF3D8A; /* sparingly — the mascot's nose */ /* the deep end of the same five families — these are ground tones, only ever used for --accent-deep, so every section can own one and no two neighbours light the page with the same beam */ --kc-ember:#8A4404; --kc-bronze:#7A3A02; /* burnt amber · burnt gold */ --kc-teal-deep:#0B5E6B; --kc-olive:#4E7A0B; /* deep cyan · deep lime */ } /* ── the twelve accent trios · one per section, no two alike ───────────── data-accent reads "--" and resolves to the three variables the whole subtree inherits. --accent-deep is the loudest of the three: it draws --sc3, the 40 % core with the 44 px halo, plus the second swirl — the biggest single piece of light in a section. Ten sections sharing one deep purple therefore read as one repeated wallpaper however different their leads are, which is why the deep is now part of the name and every section owns one. The four tones that repeat (purple, ember, forest, teal) are six to eight sections apart, never adjacent, and the two purple sections are the two the wrap itself is about. */ .sec[data-accent="cyan-lime-purple"] {--accent:var(--kc-cyan); --accent2:var(--kc-lime); --accent-deep:var(--kc-purple)} /* 01 #panel — the wrap's own swirl */ .sec[data-accent="gold-cyan-amber"] {--accent:var(--kc-gold); --accent2:var(--kc-cyan); --accent-deep:var(--kc-amber)} /* 02 #thesis */ .sec[data-accent="amber-gold-ember"] {--accent:var(--kc-amber); --accent2:var(--kc-gold); --accent-deep:var(--kc-ember)} /* 03 #drops — the amber conduit */ .sec[data-accent="cyan-green-teal"] {--accent:var(--kc-cyan); --accent2:var(--kc-green);--accent-deep:var(--kc-teal-deep)} /* 04 #building — the cyan cutaway */ .sec[data-accent="green-cyan-forest"] {--accent:var(--kc-green); --accent2:var(--kc-cyan); --accent-deep:var(--kc-green-deep)} /* 05 #rack */ .sec[data-accent="lime-amber-bronze"] {--accent:var(--kc-lime); --accent2:var(--kc-amber);--accent-deep:var(--kc-bronze)} /* 06 #report — the amber tester body */ .sec[data-accent="violet-green-purple"]{--accent:var(--violet); --accent2:var(--kc-green);--accent-deep:var(--kc-purple)} /* 07 #van — the wrap itself */ .sec[data-accent="cyan-violet-indigo"] {--accent:var(--kc-cyan); --accent2:var(--violet); --accent-deep:var(--kc-purple-deep)} /* 08 #signs — the education door */ .sec[data-accent="lime-cyan-olive"] {--accent:var(--kc-lime); --accent2:var(--kc-cyan); --accent-deep:var(--kc-olive)} /* 09 #route — the lime hub */ .sec[data-accent="gold-amber-ember"] {--accent:var(--kc-gold); --accent2:var(--kc-amber);--accent-deep:var(--kc-ember)} /* 10 #john */ .sec[data-accent="lime-amber-forest"] {--accent:var(--kc-lime); --accent2:var(--kc-amber);--accent-deep:var(--kc-green-deep)} /* 11 #punchlist */ .sec[data-accent="lime-cyan-teal"] {--accent:var(--kc-lime); --accent2:var(--kc-cyan); --accent-deep:var(--kc-teal-deep)} /* 12 #book — the terminating jack */ .sec[data-accent="violet-cyan-bronze"] {--accent:var(--violet); --accent2:var(--kc-cyan); --accent-deep:var(--kc-bronze)} /* 13 #compare — build 06, the TV-mount slider */ /* ── the energy wash: one swirl + three wrap streaks, per section ──────── A streak is LIGHT, not paint: a 2–3 px bright core inside a soft halo. The core width is in PIXELS, never a percentage — a percentage stop is a fraction of the gradient line, so the same rule drew a hairline across a short section and a 60 px smear down a tall one (and worse at 390, where every section is tall). Pixels keep every streak the same weight on every section at every width, which is what makes them read as the wrap's light slashes instead of mud. The whole five-layer stack lives in --wash so the sections that already own a background can simply restate theirs under it. */ .runpage .sec[data-accent]{ --swa:104deg; /* the angle the streaks run at */ --k1:16%; --k2:38%; --k3:71%; /* where each streak crosses */ --w1:16%; --w2:12%; /* swirl strength — the brief's 10–18 */ --swx:14%; --swy:2%; --sw2x:88%; --sw2y:96%; /* 30 % is the ceiling for a BRIGHT core, measured not guessed: a body line in --on-soft crossed by a 30 % cyan core still reads 5.3:1, and by a 30 % gold core 5.5:1 — both clear of AA. Push either to 38 % and gold drops to 4.2 and fails. The deep tones are dark, so they raise contrast for light text rather than lowering it and can run at 40 %. Where a beam crosses no body copy at all — inside the van's road — it is allowed to burn hotter. */ --sc1:color-mix(in srgb,var(--accent2) 30%,transparent); --sh1:color-mix(in srgb,var(--accent2) 11%,transparent); --sc2:color-mix(in srgb,var(--accent) 30%,transparent); --sh2:color-mix(in srgb,var(--accent) 12%,transparent); --sc3:color-mix(in srgb,var(--accent-deep) 40%,transparent); --sh3:color-mix(in srgb,var(--accent-deep) 11%,transparent); --wash: linear-gradient(var(--swa),transparent calc(var(--k1) - 34px),var(--sh1) calc(var(--k1) - 11px),var(--sc1) calc(var(--k1) - 1.4px),var(--sc1) calc(var(--k1) + 1.4px),var(--sh1) calc(var(--k1) + 11px),transparent calc(var(--k1) + 34px)), linear-gradient(var(--swa),transparent calc(var(--k2) - 22px),var(--sh2) calc(var(--k2) - 7px),var(--sc2) calc(var(--k2) - 1px),var(--sc2) calc(var(--k2) + 1px),var(--sh2) calc(var(--k2) + 7px),transparent calc(var(--k2) + 22px)), linear-gradient(var(--swa),transparent calc(var(--k3) - 44px),var(--sh3) calc(var(--k3) - 15px),var(--sc3) calc(var(--k3) - 1.8px),var(--sc3) calc(var(--k3) + 1.8px),var(--sh3) calc(var(--k3) + 15px),transparent calc(var(--k3) + 44px)), radial-gradient(ellipse 88% 74% at var(--swx) var(--swy),color-mix(in srgb,var(--accent) var(--w1),transparent),transparent 66%), radial-gradient(ellipse 72% 64% at var(--sw2x) var(--sw2y),color-mix(in srgb,var(--accent-deep) var(--w2),transparent),transparent 64%); background-image:var(--wash); } /* The three sections that already own a background restate it under the wash. These carry .sec[data-accent] too, so they must out-specify the rule above (0,4,0 vs 0,3,0) or the base rule wins and their own ground disappears. */ .runpage .sec[data-accent].wall{background-image:var(--wash), linear-gradient(180deg,rgba(255,255,255,.045),transparent 32%), linear-gradient(180deg,#151b3f,#0e1330 78%,#0b1028)} .runpage .sec[data-accent].feeds{background-image:var(--wash), linear-gradient(180deg,#0b1028,#0d1330)} .runpage .sec[data-accent].cor{background-image:var(--wash), linear-gradient(180deg,#0d1230,#141a40)} /* Every section swings its own slashes — the wrap never repeats an angle, and --k3, the widest beam, never lands in the same band as the section above or below it. Ten of twelve used to sit between 66 % and 90 %, so whatever the colour, the biggest light was always in the right-hand third and the page scrolled like one repeating pattern; the spread below moves each beam at least 18 points off its neighbours' and keeps it clear of its own --k1/--k2 so two halos never merge into a single fat band. k3 by section: 30 · 86 · 36 · 63 · 22 · 88 · 66 · 84 · 24 · 90 · 58 · 80 Each of these rules carries [data-accent] as well as the section class: the block above it is .runpage .sec[data-accent] (0,3,0), so a plain .runpage .pnl (0,2,0) loses to it however far down the file it sits, and every section silently fell back to the base 104deg / 71 % — one angle and one band for the whole page. That is most of what made the wash read as repeated wallpaper. Matching the specificity turns the variety back on. */ .runpage .sec[data-accent].pnl {--swa:118deg;--k1:8%; --k2:21%;--k3:30%;--w1:18%;--w2:14%;--swx:34%;--swy:-6%} .runpage .sec[data-accent].thesis{--swa:96deg; --k1:12%;--k2:52%;--k3:86%} .runpage .sec[data-accent].wall {--swa:100deg;--k1:22%;--k2:47%;--k3:36%;--w1:15%;--swx:8%; --swy:8%} .runpage .sec[data-accent].bldg {--swa:-72deg;--k1:18%;--k2:44%;--k3:63%;--swx:86%;--swy:6%;--sw2x:10%;--sw2y:92%} .runpage .sec[data-accent].feeds {--swa:110deg;--k1:11%;--k2:33%;--k3:22%;--w1:14%} .runpage .sec[data-accent].cert {--swa:-96deg;--k1:26%;--k2:55%;--k3:88%;--swx:78%;--swy:4%;--sw2x:14%;--sw2y:88%} .runpage .sec[data-accent].vanb {--swa:108deg;--k1:14%;--k2:36%;--k3:66%;--w1:18%;--w2:16%} .runpage .sec[data-accent].cor {--swa:-84deg;--k1:20%;--k2:50%;--k3:84%;--swx:12%;--swy:4%;--sw2x:90%;--sw2y:90%} .runpage .sec[data-accent].board {--swa:114deg;--k1:9%; --k2:41%;--k3:24%;--w1:15%;--swx:70%;--swy:0%} .runpage .sec[data-accent].owner {--swa:-104deg;--k1:24%;--k2:58%;--k3:90%;--w1:17%;--swx:20%;--swy:10%} .runpage .sec[data-accent].punch {--swa:98deg; --k1:15%;--k2:43%;--k3:58%;--w1:16%;--swx:82%;--swy:6%;--sw2x:16%;--sw2y:94%} .runpage .sec[data-accent].order {--swa:-110deg;--k1:19%;--k2:46%;--k3:80%;--w1:17%;--swx:6%;--swy:8%;--sw2x:92%;--sw2y:86%} /* ── § RUN · the cable takes the colour of the section it is crossing ──── */ .run__live{stroke:var(--runc,var(--lime)); filter:drop-shadow(0 0 7px color-mix(in srgb,var(--runc,var(--lime)) 82%,transparent)); transition:stroke .55s linear,filter .55s linear} .run__pk{box-shadow:0 0 0 3px color-mix(in srgb,var(--runc,var(--lime)) 38%,transparent), 0 0 20px 6px color-mix(in srgb,var(--runc,var(--lime)) 78%,transparent); transition:box-shadow .55s linear} .run__dot.on{border-color:var(--runc,var(--lime));background:var(--runc,var(--lime)); box-shadow:0 0 13px color-mix(in srgb,var(--runc,var(--lime)) 88%,transparent)} /* the tail that leaves the hero panel, and the run where it lands in a section */ .pnl__tail path{stroke:var(--accent);filter:drop-shadow(0 0 7px color-mix(in srgb,var(--accent) 70%,transparent))} /* ── § HEADLINES · the second line takes the section's gradient ─────────── */ .dh em{background-image:linear-gradient(96deg,var(--accent,var(--lime)),var(--accent2,var(--cyan)) 92%); -webkit-background-clip:text;background-clip:text;color:transparent; padding-bottom:.06em} /* the clip crops descenders without it */ .vanb__slogan em{background-image:linear-gradient(96deg,var(--accent),var(--accent2) 92%); -webkit-background-clip:text;background-clip:text;color:transparent} .cert__h2 em{color:var(--accent)} /* 11 px — a flat accent reads better */ /* ── § BUTTONS · primary stays lime, secondary takes the accent ─────────── */ .sec[data-accent] .tl{color:var(--accent);border-bottom-color:color-mix(in srgb,var(--accent) 52%,transparent)} .sec[data-accent] .tl:hover{color:var(--on);border-bottom-color:var(--on)} .sec[data-accent] .btn--wire{border-color:color-mix(in srgb,var(--accent) 58%,transparent);color:var(--accent)} .sec[data-accent] .btn--wire:hover,.sec[data-accent] .btn--wire:focus-visible{ background:var(--accent);border-color:var(--accent);color:#06111F; box-shadow:0 14px 34px -12px color-mix(in srgb,var(--accent) 65%,transparent)} .sec[data-accent] .btn--lime:hover{ box-shadow:0 12px 34px -10px rgba(168,255,62,.6),0 0 34px -8px color-mix(in srgb,var(--accent) 55%,transparent)} /* ── § BODY COPY · full cream wherever a streak can cross it ───────────── The 30 % ceiling on a bright core was measured against the base navy alone. It ignored the two swirls sitting under the streak and the three sections that restate a lighter ground of their own (.wall #151b3f, .cor #262c56): composited, the brightest true ground under a paragraph reaches rgb(110,89,62), where --on-soft (74 % cream) is 4.09:1 and fails AA. The paragraphs are the only type that sits directly on that ground — every other line in the page rides an opaque object — so they take the full cream: 5.94:1 on that worst ground, 5.49:1 on the route's, AA everywhere with the streaks untouched. */ .runpage .sec[data-accent] .dp, .runpage .sec[data-accent] .hero__sub, .runpage .sec[data-accent] .sub{color:var(--on)} /* the two mono captions that also sit on the bare wash come up one step, from the 62 % faint to the 74 % soft: 4.41:1 → 5.5:1 under the report's bronze beam, 4.55:1 → 5.6:1 under the building's teal one */ .runpage .sec[data-accent] .rep__look, .runpage .sec[data-accent] .bldg__hint{color:var(--on-soft)} /* #drops is the one section whose lead is amber — the darkest accent in the wrap — and an amber link crossed by its own ember beam measures 3.85:1. The link takes the section's gold sibling there instead: 5.8:1, same family */ .runpage .sec[data-accent].wall .tl{color:var(--accent2); border-bottom-color:color-mix(in srgb,var(--accent2) 52%,transparent)} .runpage .sec[data-accent].wall .tl:hover{color:var(--on);border-bottom-color:var(--on)} /* ══ 01 · #panel — the wrap's own swirl burning behind the rack ═════════ */ .pnl__grid{position:relative;z-index:1} /* the copy and the rack ride above */ .pnl::after{content:"";position:absolute;z-index:0;pointer-events:none; left:6%;top:4%;width:min(1240px,104%);aspect-ratio:1/.66; background:conic-gradient(from 208deg at 54% 46%, color-mix(in srgb,var(--kc-purple) 62%,transparent) 0deg, transparent 58deg, color-mix(in srgb,var(--kc-cyan) 55%,transparent) 122deg, transparent 188deg, color-mix(in srgb,var(--kc-green) 40%,transparent) 246deg, transparent 312deg, color-mix(in srgb,var(--kc-purple) 62%,transparent) 360deg); filter:blur(64px);opacity:.5; -webkit-mask-image:radial-gradient(ellipse at 50% 50%,#000 18%,transparent 70%); mask-image:radial-gradient(ellipse at 50% 50%,#000 18%,transparent 70%)} /* the mark is lit off the wrap: purple from under, cyan from over */ .rk{border-color:color-mix(in srgb,var(--kc-cyan) 30%,rgba(238,242,255,.16)); box-shadow:0 50px 90px -40px rgba(0,0,0,.95),inset 0 1px 0 rgba(255,255,255,.07), 0 0 0 1px color-mix(in srgb,var(--kc-purple) 34%,transparent), 0 30px 76px -28px color-mix(in srgb,var(--kc-purple) 62%,transparent), 0 -16px 66px -26px color-mix(in srgb,var(--kc-cyan) 55%,transparent)} .rk__rail{color:color-mix(in srgb,var(--kc-cyan) 42%,rgba(238,242,255,.42))} .rk__rail--r i{background:color-mix(in srgb,var(--kc-cyan) 30%,rgba(238,242,255,.10))} .runpage .panel__ports i{background-image: linear-gradient(90deg,transparent 0 33%,rgba(238,242,255,.32) 33% 67%,transparent 67%), linear-gradient(90deg,transparent 0 30%,var(--kc-gold) 30% 36%,transparent 36% 64%,var(--kc-gold) 64% 70%,transparent 70%), linear-gradient(180deg,#1e2a6e,#101748)} /* With JS off the 24 are never built (js/site.js fills #ports), so the hero object — the head of the whole run — was a black slot with nothing in it, and the gold contacts above had nothing to paint. Draw the panel face in CSS for that case: two rows of twelve ports with the same navy body and the same gold contacts, in one background stack. Top layer punches the 6 px column gaps in the tray colour, second punches the row gap, third is the port face repeated every 1/12 of the tray. The LEDs and the running certification test stay JS-only — the physical panel no longer does. */ html:not(.js) .runpage .panel__ports{aspect-ratio:4.1; background-origin:content-box;background-clip:content-box; background-image: /* 1 · the 5 px column gaps, punched in the tray colour */ repeating-linear-gradient(90deg,transparent 0 calc(8.3333% - 5px),#070A1E calc(8.3333% - 5px) 8.3333%), /* 2 · the gap between the two rows of twelve */ linear-gradient(180deg,transparent 0 calc(50% - 2.5px),#070A1E calc(50% - 2.5px) calc(50% + 2.5px),transparent calc(50% + 2.5px)), /* 3·4 · the latch notch across the head of each port, row 1 and 2 */ repeating-linear-gradient(90deg,transparent 0 calc(2.75% - 1.65px),rgba(238,242,255,.32) calc(2.75% - 1.65px) calc(5.5833% - 3.35px),transparent calc(5.5833% - 3.35px) 8.3333%), repeating-linear-gradient(90deg,transparent 0 calc(2.75% - 1.65px),rgba(238,242,255,.32) calc(2.75% - 1.65px) calc(5.5833% - 3.35px),transparent calc(5.5833% - 3.35px) 8.3333%), /* 5·6 · the two gold contacts inside each port, row 1 and 2 */ repeating-linear-gradient(90deg,transparent 0 calc(2.5% - 1.5px),var(--kc-gold) calc(2.5% - 1.5px) calc(3% - 1.8px),transparent calc(3% - 1.8px) calc(5.3333% - 3.2px),var(--kc-gold) calc(5.3333% - 3.2px) calc(5.8333% - 3.5px),transparent calc(5.8333% - 3.5px) 8.3333%), repeating-linear-gradient(90deg,transparent 0 calc(2.5% - 1.5px),var(--kc-gold) calc(2.5% - 1.5px) calc(3% - 1.8px),transparent calc(3% - 1.8px) calc(5.3333% - 3.2px),var(--kc-gold) calc(5.3333% - 3.2px) calc(5.8333% - 3.5px),transparent calc(5.8333% - 3.5px) 8.3333%), /* 7 · the body the ports are moulded from */ linear-gradient(180deg,#1c2358,#0e1440); background-size:100% 100%,100% 100%,100% 4px,100% 4px,100% 17%,100% 17%,100% 100%; background-position:0 0,0 0,0 3px,0 calc(50% + 7.5px),0 16%,0 calc(76% + 2px),0 0; background-repeat:no-repeat} /* the hero wordmark runs the wrap: green → cyan → purple, the way the K→C does */ .runpage .w--sig{background-image:linear-gradient(100deg,var(--kc-green),var(--kc-cyan) 38%,var(--kc-purple) 74%,var(--violet))} /* the pill carries its own dark ground, not a 9 % tint: at 390 the hero swirl climbs behind it and cyan-on-swirl measured 3.50:1 — this holds 7.5:1 there and looks the same on the navy at 1440 */ .runpage .eyebrow{border-color:color-mix(in srgb,var(--kc-cyan) 40%,transparent); background:color-mix(in srgb,var(--kc-cyan) 12%,rgba(6,10,26,.72));color:var(--kc-cyan)} .runpage .eyebrow__led{background:var(--kc-cyan);box-shadow:0 0 10px var(--kc-cyan)} .rk__exit{color:var(--accent2)} .rk__exit::before{background:var(--accent2);box-shadow:0 0 10px var(--accent2)} /* ══ 02 · #thesis — the panels driven hot, slashed like the wrap ════════ */ .thesis__panel{ background-image: /* three slashes at the wrap's angle — fixed widths, so the panel keeps the same weight of light whether it is 400 px tall or 260 */ linear-gradient(100deg,transparent calc(21% - 13px),rgba(255,255,255,.42) calc(21% - 6px),rgba(255,255,255,.42) calc(21% + 6px),transparent calc(21% + 13px),transparent calc(29% - 4px),rgba(255,255,255,.24) calc(29% - 2px),rgba(255,255,255,.24) calc(29% + 2px),transparent calc(29% + 4px)), linear-gradient(100deg,transparent calc(63% - 9px),rgba(255,255,255,.32) calc(63% - 4px),rgba(255,255,255,.32) calc(63% + 4px),transparent calc(63% + 9px)), linear-gradient(100deg,transparent calc(72% - 7px),color-mix(in srgb,var(--c2,var(--c)) 78%,transparent) calc(72% - 3px),color-mix(in srgb,var(--c2,var(--c)) 78%,transparent) calc(72% + 3px),transparent calc(72% + 7px)), /* the panel driven to its hot sibling in the top corner, lifted at the foot */ radial-gradient(ellipse 92% 96% at 92% -4%,color-mix(in srgb,var(--c2,var(--c)) 92%,transparent),transparent 70%), radial-gradient(ellipse 78% 86% at 2% 104%,rgba(255,255,255,.34),transparent 64%)} .thesis__panel:nth-child(1){--c2:var(--kc-amber)} /* gold → orange */ .thesis__panel:nth-child(2){--c2:var(--violet)} /* cyan → violet */ .thesis__panel:nth-child(3){--c2:var(--kc-green)} /* lime → signal green */ .thesis__who{opacity:.78} .thesis__do em{text-shadow:0 1px 0 rgba(255,255,255,.28)} /* ══ 03 · #drops — the wall in amber, every device its own colour ═══════ The tray, the riser and every branch are amber conduit; the run that arrives in the tray is the section's own accent. Each device then lights its jack, its LED and its label in the colour of ITS trade — the same code John's own emblem sheet uses (fiber green, camera blue, wi-fi purple, access orange). --a is the device accent; the inline --c stays untouched in the markup and is the fallback. ──────────────────────── */ .wl::before{background: radial-gradient(ellipse 62% 78% at 10% 0%,rgba(238,242,255,.085),transparent 64%), repeating-linear-gradient(90deg,rgba(255,255,255,.013) 0 3px,transparent 3px 7px), linear-gradient(98deg,transparent calc(34% - 30px),color-mix(in srgb,var(--kc-gold) 9%,transparent) calc(34% - 10px),color-mix(in srgb,var(--kc-gold) 30%,transparent) calc(34% - 1.2px),color-mix(in srgb,var(--kc-gold) 30%,transparent) calc(34% + 1.2px),color-mix(in srgb,var(--kc-gold) 9%,transparent) calc(34% + 10px),transparent calc(34% + 30px)), linear-gradient(98deg,transparent calc(59% - 38px),color-mix(in srgb,var(--kc-amber) 8%,transparent) calc(59% - 13px),color-mix(in srgb,var(--kc-amber) 30%,transparent) calc(59% - 1.5px),color-mix(in srgb,var(--kc-amber) 30%,transparent) calc(59% + 1.5px),color-mix(in srgb,var(--kc-amber) 8%,transparent) calc(59% + 13px),transparent calc(59% + 38px)), radial-gradient(ellipse 74% 86% at 88% 4%,color-mix(in srgb,var(--kc-amber) 17%,transparent),transparent 68%), radial-gradient(ellipse 66% 74% at 6% 96%,color-mix(in srgb,var(--kc-purple) 14%,transparent),transparent 64%)} .wl__tray{background-image: linear-gradient(180deg,color-mix(in srgb,var(--kc-amber) 72%,transparent) 0 2px,transparent 2px), linear-gradient(0deg,color-mix(in srgb,var(--kc-amber) 72%,transparent) 0 2px,transparent 2px), repeating-linear-gradient(90deg,transparent 0 26px,color-mix(in srgb,var(--kc-gold) 30%,transparent) 26px 27.5px)} .wl__tray::after{background:var(--accent);box-shadow:0 0 14px color-mix(in srgb,var(--accent) 85%,transparent)} .wl__riser{background:color-mix(in srgb,var(--kc-amber) 52%,transparent)} .wl__band::before{background:repeating-linear-gradient(90deg,color-mix(in srgb,var(--kc-amber) 50%,transparent) 0 9px,transparent 9px 15px)} .wl__band::after{color:color-mix(in srgb,var(--kc-gold) 62%,var(--on-faint))} .dv__stub{background:color-mix(in srgb,var(--kc-amber) 50%,transparent)} .dv__obj--disc::after{background:color-mix(in srgb,var(--kc-amber) 52%,transparent)} .wl__ceiling{background-image: repeating-linear-gradient(90deg,transparent 0 118px,color-mix(in srgb,var(--kc-gold) 22%,rgba(238,242,255,.16)) 118px 120px), linear-gradient(180deg,#2f3068,#1f2350)} /* the trade colours, one per housing (both plates split by their band) */ .dv{--a:var(--c)} .dv--ap{--a:var(--kc-ice)} /* access point · white-cyan */ .dv--dome{--a:var(--kc-cyan)} /* camera · cyan */ .dv--cab{--a:var(--kc-flare)} /* fire alarm · red-orange*/ .wl__band--mid .dv--plate{--a:var(--kc-gold)} /* audio / video · gold */ .dv--reader{--a:var(--violet)} /* access reader · purple */ .dv--keypad{--a:var(--kc-green)} /* keypad · green */ .wl__band--low .dv--plate{--a:var(--kc-lime)} /* networking · lime */ .dv--box{--a:var(--kc-cyan)} /* fiber · cyan */ .dv--floor{--a:var(--kc-amber)} /* floor box · amber */ .dv__jack .p{fill:var(--a)} .dv__led{background:var(--a);box-shadow:0 0 10px var(--a),0 0 20px color-mix(in srgb,var(--a) 55%,transparent)} .dv__cord svg path{stroke:var(--a);filter:drop-shadow(0 0 8px color-mix(in srgb,var(--a) 62%,transparent))} /* the label is the device's own colour, on the same dark chip */ .dv__tag{color:var(--a); box-shadow:inset 0 0 0 1px rgba(255,255,255,.18),inset 3px 0 0 var(--a), 0 0 16px -6px color-mix(in srgb,var(--a) 70%,transparent); padding-left:10px} .dv__obj--dome{background:radial-gradient(circle at 34% 24%,#5d6691,#232a47 62%,#141a30)} .dv__obj--dome::before{content:"";position:absolute;left:50%;top:46%;width:26%;height:26%; margin:-13% 0 0 -13%;border-radius:50%;z-index:2; background:radial-gradient(circle,var(--a) 0 34%,color-mix(in srgb,var(--a) 30%,transparent) 62%,transparent 74%); box-shadow:0 0 14px color-mix(in srgb,var(--a) 70%,transparent)} .dv__screen{color:var(--a);background:#061a12; box-shadow:inset 0 0 12px color-mix(in srgb,var(--a) 26%,transparent)} .dv__obj--cab{background:linear-gradient(180deg,#e0472f,#8e2333)} .dv__stencil{color:rgba(255,255,255,.92)} .dv__obj--reader .dv__jack .s2{stroke:color-mix(in srgb,var(--a) 50%,rgba(238,242,255,.45))} /* hovering a device traces the drop back up in the SECTION's colour */ .wl:has(.dv a:hover) .wl__tray i,.wl:has(.dv a:focus-visible) .wl__tray i{ background:color-mix(in srgb,var(--accent) 88%,transparent); box-shadow:0 0 12px color-mix(in srgb,var(--accent) 60%,transparent)} .wl:has(.dv a:hover) .wl__riser,.wl:has(.dv a:focus-visible) .wl__riser{ background:var(--accent);box-shadow:0 0 14px color-mix(in srgb,var(--accent) 75%,transparent)} .wl__band:has(.dv a:hover)::before,.wl__band:has(.dv a:focus-visible)::before{ background:repeating-linear-gradient(90deg,var(--accent) 0 10px,transparent 10px 15px)} .dv a:hover .dv__stub,.dv a:focus-visible .dv__stub{ background:var(--a);box-shadow:0 0 10px color-mix(in srgb,var(--a) 85%,transparent)} .wl__skirt{border-top-color:color-mix(in srgb,var(--kc-amber) 34%,rgba(238,242,255,.24))} /* ══ 04 · #building — cyan cutaway, green drops, purple readers ═════════ */ .bldg__stage{background:#0A0E24; background-image: radial-gradient(ellipse 70% 84% at 84% 4%,color-mix(in srgb,var(--kc-cyan) 13%,transparent),transparent 66%), radial-gradient(ellipse 62% 70% at 8% 96%,color-mix(in srgb,var(--kc-purple) 15%,transparent),transparent 62%); border-color:color-mix(in srgb,var(--kc-cyan) 26%,var(--hair))} .bldg__svg .rm{fill:color-mix(in srgb,var(--kc-cyan) 5%,transparent); stroke:color-mix(in srgb,var(--kc-cyan) 24%,rgba(238,242,255,.16))} .bldg__svg .bs{stroke:color-mix(in srgb,var(--kc-cyan) 30%,rgba(238,242,255,.34))} .bldg__svg .tray{stroke:color-mix(in srgb,var(--kc-amber) 62%,transparent)} .bldg__svg .feed{stroke:var(--kc-green);filter:drop-shadow(0 0 6px color-mix(in srgb,var(--kc-green) 72%,transparent))} .bldg__svg .fan path{stroke:var(--kc-cyan);opacity:.9} .bldg__svg .dev .bx{stroke:var(--kc-cyan);fill:#0e1c40} .bldg__svg .dev .led{fill:var(--kc-green)} .bldg__svg .dev .dn{fill:color-mix(in srgb,var(--kc-cyan) 46%,rgba(238,242,255,.62))} .bldg__svg .lbl text{fill:color-mix(in srgb,var(--kc-cyan) 34%,rgba(238,242,255,.62))} /* the readers are access control — purple, on the wrap and here */ .bldg__svg .dev[aria-label^="Access reader"] .bx{stroke:var(--violet)} .bldg__svg .dev[aria-label^="Access reader"] .led{fill:var(--violet)} .bldg__svg .dev[aria-label^="Access reader"] .dn{fill:color-mix(in srgb,var(--violet) 62%,var(--on))} .bldg__svg .dev:hover .bx,.bldg__svg .dev:focus .bx,.bldg__svg .dev.on .bx{ stroke:var(--kc-green);fill:#10301f} .bldg__svg .dev:hover .dn,.bldg__svg .dev:focus .dn,.bldg__svg .dev.on .dn{fill:var(--kc-green)} .bldg__svg .dev:focus-visible .hit{stroke:var(--kc-green)} .bldg__callout{border-color:#F4F1E6; box-shadow:0 26px 50px -24px rgba(0,0,0,.9),0 0 0 1px color-mix(in srgb,var(--kc-cyan) 40%,transparent), 0 18px 50px -24px color-mix(in srgb,var(--kc-cyan) 55%,transparent)} .bldg__hint{color:color-mix(in srgb,var(--kc-cyan) 40%,var(--on-faint))} /* ══ 05 · #rack — the monitor wall in green, the REC dot red ════════════ */ .nvr{border-color:color-mix(in srgb,var(--kc-green) 26%,rgba(238,242,255,.12)); box-shadow:0 50px 90px -50px rgba(0,0,0,.95), 0 0 0 1px color-mix(in srgb,var(--kc-green) 20%,transparent), 0 20px 70px -34px color-mix(in srgb,var(--kc-green) 45%,transparent)} .fd.live{box-shadow:inset 0 0 0 2px var(--kc-green),0 0 30px -6px color-mix(in srgb,var(--kc-green) 55%,transparent)} .fd__half i{color:var(--kc-green)} .nvr__now{color:var(--kc-green)} .nvr__sys{color:color-mix(in srgb,var(--kc-green) 34%,var(--on-faint))} .nvr__wall::after{background:linear-gradient(116deg,rgba(255,255,255,.085) 0 15%,transparent 32%), linear-gradient(200deg,color-mix(in srgb,var(--kc-cyan) 9%,transparent),transparent 46%)} .nvr__dial{box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--kc-green) 34%,rgba(255,255,255,.1)),0 3px 8px rgba(0,0,0,.6)} /* ══ 06 · #report — lime on the LCD, the tester body in amber ═══════════ */ .tstr__body::before{background:linear-gradient(180deg,#FFA22E,#B75C06)} .tstr__strap{background:linear-gradient(180deg,#8A4404,#5C2D02)} .tstr__body{border-color:rgba(0,0,0,.6); box-shadow:0 44px 84px -44px rgba(0,0,0,1),inset 0 1px 0 rgba(255,255,255,.12), 0 30px 76px -34px color-mix(in srgb,var(--kc-amber) 45%,transparent)} .tstr__lcd{border-color:color-mix(in srgb,var(--kc-lime) 40%,transparent); box-shadow:inset 0 0 44px color-mix(in srgb,var(--kc-lime) 14%,transparent),inset 0 0 0 1px rgba(0,0,0,.6)} .tstr__brand{color:color-mix(in srgb,var(--kc-gold) 60%,rgba(238,242,255,.5))} .tstr__keys i{color:color-mix(in srgb,var(--kc-gold) 38%,rgba(238,242,255,.62))} .cert__caret{background:var(--accent);box-shadow:0 0 12px color-mix(in srgb,var(--accent) 70%,transparent)} .cert__h2{border-bottom-color:color-mix(in srgb,var(--accent) 30%,transparent)} /* ══ 07 · #van — a purple-to-green glow wash behind the van ═════════════ */ .vanb__road{background-image: linear-gradient(106deg,transparent calc(17% - 30px),color-mix(in srgb,var(--kc-green) 10%,transparent) calc(17% - 10px),color-mix(in srgb,var(--kc-green) 46%,transparent) calc(17% - 1.3px),color-mix(in srgb,var(--kc-green) 46%,transparent) calc(17% + 1.3px),color-mix(in srgb,var(--kc-green) 10%,transparent) calc(17% + 10px),transparent calc(17% + 30px)), linear-gradient(106deg,transparent calc(80% - 26px),color-mix(in srgb,var(--kc-cyan) 10%,transparent) calc(80% - 9px),color-mix(in srgb,var(--kc-cyan) 42%,transparent) calc(80% - 1.1px),color-mix(in srgb,var(--kc-cyan) 42%,transparent) calc(80% + 1.1px),color-mix(in srgb,var(--kc-cyan) 10%,transparent) calc(80% + 9px),transparent calc(80% + 26px)), radial-gradient(ellipse 58% 88% at 14% 44%,color-mix(in srgb,var(--kc-purple) 42%,transparent),transparent 70%), radial-gradient(ellipse 62% 92% at 84% 56%,color-mix(in srgb,var(--kc-green) 34%,transparent),transparent 72%), radial-gradient(ellipse 84% 62% at 50% 50%,color-mix(in srgb,var(--kc-cyan) 18%,transparent),transparent 66%), linear-gradient(180deg,#0A0E24,#151c48 55%,#0A0E24)} .vanb__plate{box-shadow:0 16px 30px rgba(0,0,0,.5),0 0 30px -6px color-mix(in srgb,var(--kc-gold) 60%,transparent)} /* the slogan sits on the wrap itself, which is the brightest art on the page: the scrim under it is deepened so the gradient line clears AA over any part of the van, and the clipped text takes a drop-shadow (text-shadow would paint a solid silhouette through the transparent glyphs). */ .vanb__slogan{background:linear-gradient(0deg,rgba(8,11,30,.97) 0 38%,rgba(8,11,30,.86) 66%,transparent); text-shadow:0 2px 10px rgba(4,6,16,.9)} .vanb__slogan em{text-shadow:none;filter:drop-shadow(0 2px 6px rgba(4,6,16,.95))} /* violet into the SOFT cream, not the faint one: on the purple beam the faint mix measured 4.35:1 at 390 — this is 5.3:1 and keeps the same violet cast */ .vanb__cap{color:color-mix(in srgb,var(--accent) 30%,var(--on-soft)); border-top-color:color-mix(in srgb,var(--accent) 22%,transparent)} /* ══ 08 · #signs — five doors, five accents ═════════════════════════════ */ .door__sign{border-color:color-mix(in srgb,var(--c) 30%,rgba(0,0,0,.5)); background-image: repeating-linear-gradient(90deg,rgba(255,255,255,.055) 0 1px,transparent 1px 3px), linear-gradient(165deg,color-mix(in srgb,var(--c) 26%,#3a416c),color-mix(in srgb,var(--c) 10%,#1d2338) 58%,color-mix(in srgb,var(--c) 22%,#2c3354)); box-shadow:0 18px 28px -14px rgba(0,0,0,.95),inset 0 1px 0 rgba(255,255,255,.32), inset 0 -1px 0 rgba(0,0,0,.55),0 0 26px -10px color-mix(in srgb,var(--c) 70%,transparent)} .door:hover .door__sign{box-shadow:0 26px 36px -16px rgba(0,0,0,1), inset 0 1px 0 rgba(255,255,255,.4),inset 0 -1px 0 rgba(0,0,0,.55), 0 0 34px -8px color-mix(in srgb,var(--c) 85%,transparent)} .door__pict{box-shadow:inset 0 0 0 1px rgba(0,0,0,.42),0 0 16px -4px color-mix(in srgb,var(--c) 80%,transparent)} .door__braille{color:color-mix(in srgb,var(--c) 62%,#ffffff)} /* the light spilling out of each doorway is that room's colour — at the foot of the opening, well clear of the copy at the top */ .door__frame{background-image: radial-gradient(ellipse 82% 42% at 50% 108%,color-mix(in srgb,var(--c) 30%,transparent),transparent 70%), linear-gradient(180deg,#04060f 0,#080c1a 58%,#161d36 100%); box-shadow:0 0 0 5px color-mix(in srgb,var(--c) 22%,#3a4272),0 0 0 6px rgba(0,0,0,.7), 0 18px 30px -16px rgba(0,0,0,.95),inset 0 26px 34px -24px rgba(0,0,0,1), inset 0 -20px 26px -22px color-mix(in srgb,var(--c) 40%,rgba(150,170,230,.5))} /* the corridor wall carries no copy of its own — every word in this section sits on an opaque sign or inside a door frame — so its beams are allowed to burn at full strength behind the doors */ .corr{background-image: linear-gradient(-80deg,transparent calc(31% - 40px),color-mix(in srgb,var(--kc-cyan) 9%,transparent) calc(31% - 13px),color-mix(in srgb,var(--kc-cyan) 46%,transparent) calc(31% - 1.5px),color-mix(in srgb,var(--kc-cyan) 46%,transparent) calc(31% + 1.5px),color-mix(in srgb,var(--kc-cyan) 9%,transparent) calc(31% + 13px),transparent calc(31% + 40px)), linear-gradient(-80deg,transparent calc(68% - 34px),color-mix(in srgb,var(--violet) 10%,transparent) calc(68% - 11px),color-mix(in srgb,var(--violet) 52%,transparent) calc(68% - 1.3px),color-mix(in srgb,var(--violet) 52%,transparent) calc(68% + 1.3px),color-mix(in srgb,var(--violet) 10%,transparent) calc(68% + 11px),transparent calc(68% + 34px)), radial-gradient(ellipse 70% 60% at 18% 100%,color-mix(in srgb,var(--kc-purple) 20%,transparent),transparent 66%), radial-gradient(ellipse 64% 56% at 86% 96%,color-mix(in srgb,var(--kc-cyan) 15%,transparent),transparent 62%), linear-gradient(180deg,#262c56 0,#1b2147 54%,#141a38 100%)} .corr__wash{background:linear-gradient(180deg,color-mix(in srgb,var(--accent) 22%,rgba(238,242,255,.14)),transparent)} .corr__skirt{border-top-color:color-mix(in srgb,var(--accent) 26%,rgba(238,242,255,.26))} /* ══ 09 · #route — the hub in lime, every station dot lit ═══════════════ */ .board__h2{box-shadow:0 0 0 6px rgba(168,255,62,.14),0 0 40px -8px color-mix(in srgb,var(--kc-lime) 70%,transparent)} .board__hub{box-shadow:0 0 0 6px rgba(168,255,62,.15),0 0 36px -6px color-mix(in srgb,var(--kc-lime) 75%,transparent)} .board__map{border-color:color-mix(in srgb,var(--kc-lime) 20%,var(--hair)); background-color:#0b1130; background-image: linear-gradient(104deg,transparent calc(28% - 28px),color-mix(in srgb,var(--kc-cyan) 9%,transparent) calc(28% - 9px),color-mix(in srgb,var(--kc-cyan) 30%,transparent) calc(28% - 1.2px),color-mix(in srgb,var(--kc-cyan) 30%,transparent) calc(28% + 1.2px),color-mix(in srgb,var(--kc-cyan) 9%,transparent) calc(28% + 9px),transparent calc(28% + 28px)), radial-gradient(ellipse 64% 72% at 12% 6%,color-mix(in srgb,var(--kc-lime) 12%,transparent),transparent 64%), radial-gradient(ellipse 60% 68% at 92% 94%,color-mix(in srgb,var(--kc-purple) 16%,transparent),transparent 62%)} .bline::before{box-shadow:0 0 16px -2px color-mix(in srgb,var(--c) 70%,transparent)} .stn i{box-shadow:0 0 12px -1px color-mix(in srgb,var(--c) 62%,transparent)} .stn:hover i,.stn:focus-visible i{box-shadow:0 0 18px color-mix(in srgb,var(--c) 95%,transparent)} .stn small{color:var(--violet)} @media (min-width:1080px){ .board__lines::before{background:linear-gradient(90deg,var(--kc-cyan),var(--kc-lime) 34%,var(--kc-gold) 67%,var(--kc-purple)); box-shadow:0 0 18px -3px color-mix(in srgb,var(--kc-cyan) 60%,transparent)} } /* ══ 10 · #john — gold, the four patches as they come off the van ═══════ */ .owner__facts b{background-image:linear-gradient(120deg,var(--accent),var(--accent2))} .owner__shot{border-color:color-mix(in srgb,var(--accent) 26%,var(--hair)); box-shadow:0 40px 80px -40px rgba(0,0,0,.95),0 0 0 1px color-mix(in srgb,var(--accent) 22%,transparent), 0 24px 66px -32px color-mix(in srgb,var(--accent) 48%,transparent)} .pocket{border-color:color-mix(in srgb,var(--accent) 24%,rgba(238,242,255,.16)); background-image: radial-gradient(ellipse 78% 80% at 88% 4%,color-mix(in srgb,var(--accent) 15%,transparent),transparent 66%), linear-gradient(180deg,#151c48,#0e1436)} .pocket::before{border-color:color-mix(in srgb,var(--accent) 28%,rgba(238,242,255,.18))} .pocket__n{color:color-mix(in srgb,var(--accent) 46%,var(--on-faint))} .patch{box-shadow:inset 0 0 0 4px color-mix(in srgb,var(--c) 58%,#0A0E24), inset 0 0 0 5px rgba(0,0,0,.3),inset 0 2px 3px rgba(255,255,255,.35), 0 12px 20px -8px rgba(0,0,0,.9),0 0 24px -10px color-mix(in srgb,var(--c) 75%,transparent)} /* ══ 11 · #punchlist — cream clipboard, lime ticks, amber clip ══════════ A lime tick DRAWN on cream would be invisible (1.1:1), so the tick itself is the lime object and the check is cut out of it in near-black: the colour the brief asks for, at 10:1. ──────────────────────────────── */ .clip__clamp{background:linear-gradient(180deg,#FFD36B,#D8821A); box-shadow:0 6px 14px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.75)} .clip__top{background:linear-gradient(180deg,#2b3145,#181d2b); border-bottom:2px solid color-mix(in srgb,var(--kc-amber) 62%,transparent)} .clip{box-shadow:0 40px 80px -40px rgba(0,0,0,1), 0 0 0 1px color-mix(in srgb,var(--accent) 26%,transparent), 0 26px 72px -34px color-mix(in srgb,var(--accent) 42%,transparent)} .punch__list .tick{background:var(--kc-lime);border-color:#12300A; box-shadow:0 2px 0 rgba(0,0,0,.18),0 0 12px -3px color-mix(in srgb,var(--kc-lime) 85%,transparent)} .punch__list .tick::after{border-color:#0B2E06} /* 13 px mono bold is not large text, so the item numbers need the full 4.5:1 on the cream: #8a8a7c was 3.09:1, this is 4.84:1 — and it is the value .clip__hd already uses on the same stock. */ .punch__list li::before{color:#6a6a5e} /* on cream, the readable member of the lime family carries the link */ /* This has to out-specify .sec[data-accent] .tl (0,3,0) or the section's lime accent wins and the link is lime on cream at 1.1:1 — which is what both of the earlier .punch .tl declarations (0,2,0) actually rendered. */ .runpage .sec[data-accent].punch .tl{color:#1C7A0E;border-bottom-color:rgba(28,122,14,.5)} .runpage .sec[data-accent].punch .tl:hover{color:#171712;border-bottom-color:#171712} /* ══ 12 · #book — lime primary, the run's terminating jack in cyan ══════ */ .lead__jack i{background-image:linear-gradient(90deg,var(--kc-cyan) 0 2px,transparent 2px 5px)} .lead__jack::after{background:var(--kc-cyan);box-shadow:0 0 14px color-mix(in srgb,var(--kc-cyan) 85%,transparent)} .lead__jack{box-shadow:inset 0 0 0 1px rgba(255,255,255,.2),0 0 18px -6px color-mix(in srgb,var(--kc-cyan) 80%,transparent)} #book .lead{box-shadow:0 40px 80px -40px rgba(0,0,0,1), 0 0 0 1px color-mix(in srgb,var(--accent) 24%,transparent), 0 26px 72px -34px color-mix(in srgb,var(--accent) 40%,transparent)} .order__lines .bigline b{color:var(--on)} /* the 10 px label above each line sits on the raw wash, and --on-faint (62 %) measures 3.82:1 where the cyan core crosses it; 84 % holds 5.4:1 there and still reads as the quiet label above the number */ .order__lines .bigline span{color:rgba(238,242,255,.84)} .order__lines a.bigline:hover b{color:var(--accent)} .order__lines .bigline{border-bottom-color:color-mix(in srgb,var(--accent) 18%,var(--hair))} /* ── focus stays the page's own high-contrast lime, on every ground ────── */ .runpage :focus-visible{outline:2px solid var(--lime);outline-offset:3px} .runpage .clip :focus-visible,.runpage #book .lead :focus-visible{outline-color:#1C7A0E} /* ══ motion / accessibility ═════════════════════════════════════════════ */ @media (prefers-reduced-motion:reduce){ /* the intro module is never mounted under reduced motion (js/run.js §3): the static mark in the HTML is the whole of it, so nothing to quiet here beyond its drop shadow staying still. */ .kc{filter:none} .js .thesis:not(.lit) .thesis__who,.js .thesis:not(.lit) .thesis__do, .js .cert:not(.lit) .tstr__rows li{opacity:1!important} .thesis.lit .thesis__who,.thesis.lit .thesis__do{animation:none!important} .js .punch:not(.lit) .tick::after{transform:rotate(42deg) scale(1)!important} .js .bldg:not(.lit) .feed,.js .bldg:not(.lit) .fan path{stroke-dashoffset:0!important} .vanb__body{transform:none!important} .run__live{stroke-dashoffset:0} .pnl__tail path{stroke-dashoffset:0} .rk__bay .mojo--hero{animation:none} .fd{filter:none} .fd.live::before,.nvr__rec,.cert__caret{animation:none} /* the run still changes colour section by section — that is information, not motion — it just stops easing between them */ .run__live,.run__pk{transition:none} }