/* ═══════════════════════════════════════════════════════════════ NUVION NETWORK — structured cabling, Austin TX ═══════════════════════════════════════════════════════════════ */ :root{ --ink:#080b11; --ink-1:#0c1017; --ink-2:#121824; --ink-3:#1a2027; --line:rgba(255,255,255,.10); --line-2:rgba(255,255,255,.18); --bone:#efe9dd; --bone-2:#e3dbcb; --fg:#e8ecf1; --fg-dim:#98a3b0; --fg-dimmer:#7c8694; /* AA at 12px: 5.17:1 on a panel, 5.34:1 on ink */ /* electric blue, pulled off the Cat6A jacket */ --blue:#2f7dff; --blue-hi:#7fb2ff; --blue-lo:#134099; /* the safety orange of the smurf tube in the photographs, used only on the title blocks so the graphics and the material are the same colour */ --conduit:#e2622a; --disp:"Barlow Condensed","Oswald","Arial Narrow",sans-serif; --sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; --mono:"JetBrains Mono","SFMono-Regular",Menlo,Consolas,monospace; --wrap:1280px; --pad:clamp(20px,5vw,64px); /* the hero and the header are full-bleed: on a wide display a centred 1280 wrap reads as centred, not as left and right. */ --pad-hero:clamp(20px,3.4vw,72px); --hdr-h:68px; --ease:cubic-bezier(.22,.61,.36,1); /* hero split position, 0..1 — written by hero.js */ --p:0.5; --net-i:0.75; } *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%;scroll-behavior:smooth} @media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}} body{ margin:0;background:var(--ink);color:var(--fg); font:400 17px/1.6 var(--sans); -webkit-font-smoothing:antialiased;overflow-x:hidden; } img,svg,video{display:block;max-width:100%} button{font:inherit;color:inherit;background:none;border:0;cursor:pointer} a{color:inherit} h1,h2,h3,h4{margin:0} p{margin:0} ol,ul{margin:0;padding:0;list-style:none} .mono{font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase} .wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--pad)} .h-display{ font-family:var(--disp);font-weight:700;line-height:.94; letter-spacing:-.005em;text-transform:none;text-wrap:balance; } h1.h-display{font-size:clamp(2.4rem,5.2vw,4.9rem)} .h2{font-size:clamp(2.1rem,4.9vw,4.3rem)} .h3{font-size:clamp(1.7rem,3.4vw,2.9rem)} .skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--blue);color:#fff;padding:12px 18px} .skip:focus{left:8px;top:8px} :where(a,button,input,[tabindex]):focus-visible{ outline:2px solid var(--blue-hi);outline-offset:3px;border-radius:2px; } /* ───────────────── buttons ───────────────── */ .btn{ --bg:var(--blue); display:inline-flex;align-items:center;justify-content:center;gap:.6em; background:var(--bg);color:#fff;text-decoration:none; font-family:var(--disp);font-weight:600;font-size:1.06rem;letter-spacing:.03em; padding:.85em 1.5em;border-radius:2px;position:relative;overflow:hidden; transition:transform .25s var(--ease),box-shadow .25s var(--ease),background .2s; box-shadow:0 0 0 0 rgba(47,125,255,0); white-space:nowrap; } .btn::after{ content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.28),transparent 70%); transform:translateX(-120%);transition:transform .6s var(--ease); } .btn:hover{transform:translateY(-2px);box-shadow:0 10px 32px -10px rgba(47,125,255,.85)} .btn:hover::after{transform:translateX(120%)} .btn:active{transform:translateY(0)} .btn--sm{font-size:.94rem;padding:.65em 1.15em} .btn--wide{width:100%;padding:1em} .btn--big{flex-direction:column;gap:.15em;padding:1.15em 2em;align-items:flex-start;text-align:left} .btn--big em{font-style:normal;opacity:.75;font-size:.66rem} .btn--ghost{--bg:transparent;box-shadow:inset 0 0 0 1px var(--line-2)} .btn--ghost:hover{--bg:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px var(--blue),0 10px 32px -14px rgba(47,125,255,.6)} /* ───────────────── header ───────────────── */ .hdr{ position:fixed;inset:0 0 auto 0;z-index:90;height:var(--hdr-h); background:linear-gradient(180deg,rgba(7,9,11,.92),rgba(7,9,11,.5) 70%,transparent); backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px); transition:background .3s,border-color .3s; border-bottom:1px solid transparent; } .hdr.is-stuck{background:rgba(7,9,11,.94);border-bottom-color:var(--line)} .hdr-in{height:100%;max-width:none;padding-inline:var(--pad-hero); display:flex;align-items:center;justify-content:space-between;gap:18px} .brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--fg)} .brand-mark{width:26px;height:26px;color:var(--blue);flex:none} .brand-txt{font-family:var(--disp);font-weight:700;font-size:1.22rem;letter-spacing:.03em;text-transform:uppercase;line-height:1} .brand-txt em{font-style:normal;font-weight:500;color:var(--fg-dim);margin-left:.4em} .hdr-right{display:flex;align-items:center;gap:16px} .hdr-tel{color:var(--fg-dim);text-decoration:none;transition:color .2s} .hdr-tel:hover{color:var(--fg)} .tabs{position:relative;display:flex;padding:3px;border:1px solid var(--line);border-radius:2px;background:rgba(255,255,255,.03)} .tabs-pill{position:absolute;top:3px;bottom:3px;left:3px;width:calc(50% - 3px);background:var(--blue);border-radius:1px; opacity:0;transform:scaleX(.8);transition:transform .35s var(--ease),opacity .25s,left .35s var(--ease)} [data-chosen="true"] .tabs-pill{opacity:1;transform:none} [data-track="builder"] .tabs-pill{left:50%} .tab{position:relative;z-index:1;font-family:var(--disp);font-weight:600;font-size:.92rem;letter-spacing:.06em; text-transform:uppercase;padding:.42em 1em;color:var(--fg-dim);transition:color .25s} .tab:hover{color:var(--fg)} .tab[aria-pressed="true"]{color:#fff} /* ═══════════════ HERO ═══════════════ */ .hero{position:relative;min-height:100svh;display:flex;flex-direction:column;isolation:isolate} .hero-stage{position:absolute;inset:0;overflow:hidden;background:var(--ink);cursor:crosshair} .stage-inner{position:absolute;inset:0} /* hero.js gives both plates and the SVG one identical rect, so nothing here sets object-fit — the geometry lives in one place. */ .lyr{position:absolute;top:0;left:0;max-width:none} /* base layer = FRAMED. The framed plate came back 0.8% smaller than the finished one; this nulls it. Re-measure if either plate is regenerated. */ .lyr--framed{ transform:translate(var(--frame-fix-x,0px),var(--frame-fix-y,0px)) scale(var(--frame-fix-s,1)); } /* top layer = FINISHED, revealed from the left edge out to the split. --pm / --pf are the split and its feather restated in plate space. */ .lyr--finished{ -webkit-mask-image:linear-gradient(90deg,#000 0,#000 calc(var(--pm,50%) - var(--pf,2.6%)),transparent calc(var(--pm,50%) + var(--pf,2.6%)),transparent 100%); mask-image:linear-gradient(90deg,#000 0,#000 calc(var(--pm,50%) - var(--pf,2.6%)),transparent calc(var(--pm,50%) + var(--pf,2.6%)),transparent 100%); } .lyr--net{position:absolute;pointer-events:none;overflow:visible} .seam{ position:absolute;top:0;bottom:0;left:calc(var(--p)*100%);width:2px;transform:translateX(-1px); background:linear-gradient(180deg,transparent,rgba(127,178,255,.85) 18%,rgba(255,255,255,.95) 50%,rgba(127,178,255,.85) 82%,transparent); box-shadow:0 0 22px 3px rgba(47,125,255,.5),0 0 60px 12px rgba(47,125,255,.2); opacity:.85;pointer-events:none;mix-blend-mode:screen; } /* The plates are a daylight frame and a dusk finish, and a full-frame darkening (94% at the top, 96% at the foot, heavy edges) sank both. Shade now sits only where copy does - behind the headline top-left and the fork bottom-left - plus the fade into the page along the bottom edge. */ .stage-vig{position:absolute;inset:0;pointer-events:none; background: radial-gradient(38% 34% at 15% 23%,rgba(7,9,11,.62) 0%,rgba(7,9,11,.36) 50%,transparent 100%), radial-gradient(36% 20% at 15% 89%,rgba(7,9,11,.58) 0%,rgba(7,9,11,.26) 55%,transparent 100%), linear-gradient(180deg,rgba(7,9,11,.34) 0%,rgba(7,9,11,.08) 12%,transparent 22%,transparent 80%,rgba(7,9,11,.42) 94%,var(--ink) 100%), radial-gradient(130% 100% at 50% 50%,transparent 62%,rgba(0,0,0,.12) 85%,rgba(0,0,0,.26) 100%); } .hero h1.h-display,.fork-line{text-shadow:0 2px 24px rgba(7,9,11,.6)} /* small blue type over the daylight plate needs a tighter halo than the headline */ .hero .eyebrow{text-shadow:0 0 3px rgba(7,9,11,.75),0 0 16px rgba(7,9,11,.8)} /* the eyebrow sits inside the H1 so the heading carries "structured cabling, Austin" for search; it keeps its own small mono look and its own line */ h1 .eyebrow{display:block;line-height:1.4;margin-bottom:1.1em} /* spam trap: off screen for people, still in the form for bots */ .f-hp{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden} /* film grain, shared by hero + every clip */ .grain{ position:absolute;inset:-60px;pointer-events:none;opacity:.16;mix-blend-mode:overlay; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E"); animation:grain 1.05s steps(4) infinite; } @keyframes grain{ 0%{transform:translate(0,0)}25%{transform:translate(-14px,9px)} 50%{transform:translate(11px,-12px)}75%{transform:translate(-8px,-7px)}100%{transform:translate(0,0)} } .hero-ui{position:relative;z-index:3;flex:1;display:flex;flex-direction:column; padding:calc(var(--hdr-h) + 2.4vh) 0 clamp(24px,4vh,48px);pointer-events:none} .hero-ui button,.hero-ui a,.hero-ui .handle{pointer-events:auto} .hero-copy{width:100%;max-width:none;padding-inline:var(--pad-hero);align-self:stretch} .eyebrow{color:var(--blue-hi);margin-bottom:1.1em} .hero-sub{margin-top:1.1rem;max-width:44ch;color:#c2ccd7;text-shadow:0 1px 14px rgba(7,9,11,.9);font-size:clamp(1rem,1.5vw,1.16rem)} .fork{width:100%;max-width:none;margin:auto 0 0;padding-inline:var(--pad-hero);position:relative;min-height:118px;align-self:stretch} .fork-card{position:absolute;left:var(--pad-hero);right:var(--pad-hero);opacity:0;transform:translateY(8px); transition:opacity .34s var(--ease),transform .34s var(--ease);pointer-events:none} .fork-card.is-on{opacity:1;transform:none;pointer-events:auto} .fork-line{font-family:var(--disp);font-weight:600;font-size:clamp(1.3rem,2.3vw,2rem);margin-bottom:.6rem;line-height:1.05} .hero-hint{width:100%;color:var(--fg-dimmer);max-width:none;margin:16px 0 0;padding-inline:var(--pad-hero);align-self:stretch; transition:opacity .4s} [data-chosen="true"] .hero-hint{opacity:0} /* mobile-only hero controls */ .handle,.doors{display:none} /* ═══════════════ tracks / order swap ═══════════════ */ .tracks{display:flex;flex-direction:column} .track--home{order:1} .track--builder{order:2} [data-track="builder"] .track--home{order:2} [data-track="builder"] .track--builder{order:1} /* once committed, the other track collapses out of the flow but stays reachable */ [data-chosen="true"][data-track="home"] .track--builder{display:none} [data-chosen="true"][data-track="builder"] .track--home{display:none} /* ═══════════════ pinned clip sections ═══════════════ */ .pin{position:relative} .pin-media{position:sticky;top:0;height:100svh;overflow:hidden;z-index:0} .pin-seq{filter:saturate(.9) contrast(1.04)} .pin-vig{position:absolute;inset:0; background: radial-gradient(120% 90% at 50% 50%,transparent 32%,rgba(0,0,0,.55) 76%,rgba(0,0,0,.88) 100%), linear-gradient(180deg,var(--ink) 0,rgba(7,9,11,.35) 18%,rgba(7,9,11,.45) 60%,var(--ink) 100%); } /* the pin needs real runway: the sticky clip is scrubbed across this distance, and the copy is spaced through it so text and footage advance together */ .pin-flow{position:relative;z-index:1;margin-top:-100svh;min-height:215svh; padding:20svh 0 18svh;display:flex;flex-direction:column;justify-content:space-evenly;gap:6svh} /* ═══════════════ bands ═══════════════ */ .band{position:relative;padding:clamp(72px,11vh,150px) 0; background:linear-gradient(180deg,#0a0e16,#0c1119 42%,#090d14)} .band--tight{padding-block:clamp(48px,7vh,96px)} .band--form{background:linear-gradient(180deg,var(--ink),var(--ink-1))} .band--proof{background:var(--ink-1);border-block:1px solid var(--line)} .band--bone{background:var(--bone);color:#12161b} .band--bone .h3{color:#0c1014} .band--bone .ba-cap{color:#41525f} .lede{font-size:clamp(1.05rem,1.7vw,1.3rem);color:var(--fg-dim);max-width:56ch;line-height:1.62} .split{display:grid;gap:clamp(24px,4vw,64px);grid-template-columns:1fr 1fr;align-items:start} .split--form{grid-template-columns:1fr 1.05fr} /* problem lines */ .probs{display:flex;flex-direction:column;gap:clamp(30px,7vh,84px);margin-top:clamp(48px,10vh,120px)} .probs li{display:flex;gap:clamp(14px,2vw,28px);align-items:baseline;max-width:min(640px,64vw)} .probs li:nth-child(2){margin-left:auto;margin-right:0} .probs li:nth-child(3){margin-left:auto;margin-right:auto} .probs .num{color:var(--blue);flex:none;padding-top:.5em} .probs p{font-family:var(--disp);font-weight:600;font-size:clamp(1.5rem,3vw,2.5rem);line-height:1.04} /* four / three up */ .grid4,.grid3{display:grid;gap:clamp(22px,2.6vw,40px);margin-top:clamp(36px,5vh,64px)} .grid4{grid-template-columns:repeat(4,1fr)} .grid3{grid-template-columns:repeat(3,1fr)} .grid4 article,.grid3 article{border-top:1px solid var(--line-2);padding-top:20px;position:relative} .grid4 article::before,.grid3 article::before{ content:"";position:absolute;top:-1px;left:0;width:0;height:1px;background:var(--blue); transition:width .7s var(--ease) .1s} .grid4 article.is-in::before,.grid3 article.is-in::before{width:100%} .grid4 h4,.grid3 h4,.steps h4{font-family:var(--disp);font-weight:600;font-size:clamp(1.18rem,1.7vw,1.5rem); line-height:1.1;margin-bottom:.55em} .grid4 p,.grid3 p,.steps p{color:var(--fg-dim);font-size:.97rem;line-height:1.66} /* steps / timeline */ .steps{display:grid;gap:clamp(22px,2.6vw,40px);grid-template-columns:repeat(3,1fr);margin-top:clamp(36px,5vh,64px)} .steps--time{grid-template-columns:repeat(4,1fr)} .steps li{border-top:1px solid var(--line-2);padding-top:20px;position:relative} .steps li::before{content:"";position:absolute;top:-1px;left:0;width:0;height:1px;background:var(--blue);transition:width .7s var(--ease) .1s} .steps li.is-in::before{width:100%} .steps .num{display:block;color:var(--blue);margin-bottom:1em} /* proof counters */ .proof{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,3vw,48px);text-align:center} .proof div{display:flex;flex-direction:column;gap:.5em} .proof strong{font-family:var(--disp);font-weight:700;font-size:clamp(3rem,8vw,6.6rem);line-height:.86; color:#fff;font-variant-numeric:tabular-nums;letter-spacing:-.02em} .proof span{color:var(--fg-dim)} .specs{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:clamp(44px,6vh,76px)} .specs li{border:1px solid var(--line-2);padding:.62em 1em;color:var(--blue-hi);border-radius:2px; font-family:var(--mono);font-size:.68rem;letter-spacing:.14em} /* ═══════════════ forms ═══════════════ */ .form-side{position:sticky;top:calc(var(--hdr-h) + 28px)} .form-side .lede{margin-top:1rem} .spec-mini{color:var(--fg-dimmer);margin-top:1.8rem} .form{display:flex;flex-direction:column;gap:18px;border:1px solid var(--line);background:rgba(255,255,255,.02); padding:clamp(22px,3vw,36px);border-radius:3px} .f{display:flex;flex-direction:column;gap:7px} .f label{font-family:var(--mono);font-size:.68rem;letter-spacing:.13em;text-transform:uppercase;color:var(--fg-dim)} .f input{ background:rgba(255,255,255,.04);border:1px solid var(--line-2);color:var(--fg); padding:.82em .9em;border-radius:2px;font:inherit;font-size:1rem;width:100%; transition:border-color .2s,background .2s,box-shadow .2s; } .f input:hover{border-color:rgba(255,255,255,.3)} .f input:focus{outline:none;border-color:var(--blue);background:rgba(47,125,255,.07);box-shadow:0 0 0 3px rgba(47,125,255,.18)} .f .hint{font-size:.83rem;color:var(--fg-dimmer)} .f .err{font-size:.83rem;color:#ff8080;display:none} .f.is-bad input{border-color:#ff6b6b;background:rgba(255,107,107,.06)} .f.is-bad .err{display:block} .undertext{font-size:.86rem;color:var(--fg-dimmer);text-align:center} .sent{display:none;font-family:var(--mono);font-size:.74rem;letter-spacing:.1em;text-transform:uppercase; color:#7fe0a6;border:1px solid rgba(127,224,166,.35);background:rgba(127,224,166,.08);padding:.9em;text-align:center;border-radius:2px} .sent.is-on{display:block} .sent.is-bad{color:#ffb8a8;border-color:rgba(255,150,130,.4);background:rgba(255,120,100,.08)} /* ═══════════════ before / after ═══════════════ */ .ba{margin-top:clamp(28px,4vh,48px)} .ba-stage{position:relative;aspect-ratio:16/9;overflow:hidden;border-radius:3px;background:#0b0e12; box-shadow:0 30px 80px -40px rgba(0,0,0,.6);touch-action:pan-y;user-select:none;-webkit-user-select:none} .ba-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;max-width:none} .ba-clip{position:absolute;inset:0;width:var(--bp,50%);overflow:hidden} .ba-clip .ba-img{width:var(--baw,100%)} .ba-bar{position:absolute;top:0;bottom:0;left:var(--bp,50%);width:2px;background:var(--bone);transform:translateX(-1px); box-shadow:0 0 18px rgba(0,0,0,.45)} .ba-knob{position:absolute;top:50%;left:50%;translate:-50% -50%;width:54px;height:54px;border-radius:50%; background:var(--bone);box-shadow:0 6px 22px rgba(0,0,0,.45);cursor:ew-resize;display:grid;place-items:center} .ba-knob::before{content:"‹ ›";font:600 19px/1 var(--mono);color:#12161b;letter-spacing:-1px} .ba-tag{position:absolute;bottom:16px;padding:.55em .85em;background:rgba(7,9,11,.78);color:#fff;border-radius:2px; backdrop-filter:blur(6px);font-size:.64rem} .ba-tag--l{left:16px} .ba-tag--r{right:16px} .ba-cap{margin-top:1.1rem;font-size:.97rem} /* ═══════════════ credibility ═══════════════ */ .cred{background:var(--ink-1);border-block:1px solid var(--line);padding:26px 0} .cred-in{display:flex;flex-wrap:wrap;gap:14px;align-items:center;justify-content:center; color:var(--fg-dim);text-align:center} .cred-in i{color:var(--blue);font-style:normal} /* ═══════════════ FAQ ═══════════════ */ .faq{margin-top:clamp(32px,4vh,56px);border-top:1px solid var(--line)} .faq-i{border-bottom:1px solid var(--line)} .faq-q{width:100%;display:flex;gap:20px;align-items:flex-start;justify-content:space-between; padding:26px 0;text-align:left;font-family:var(--disp);font-weight:600; font-size:clamp(1.15rem,2vw,1.6rem);line-height:1.18;transition:color .2s} .faq-q:hover{color:var(--blue-hi)} .faq-ic{flex:none;width:22px;height:22px;position:relative;margin-top:.3em} .faq-ic::before,.faq-ic::after{content:"";position:absolute;background:var(--blue);inset:50% 0 auto 0;height:2px;translate:0 -50%; transition:transform .3s var(--ease)} .faq-ic::after{transform:rotate(90deg)} .faq-i[open] .faq-ic::after{transform:rotate(0)} .faq-a{overflow:hidden;height:0;transition:height .38s var(--ease)} .faq-a > div{padding:0 0 28px;max-width:70ch;color:var(--fg-dim);line-height:1.68} /* ═══════════════ final CTA ═══════════════ */ .final{position:relative;padding:clamp(80px,14vh,180px) 0;background: radial-gradient(90% 120% at 50% 100%,rgba(47,125,255,.24),transparent 62%), linear-gradient(180deg,#0b1018,#0d1320); border-top:1px solid var(--line);text-align:center} .final-btns{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;margin-top:clamp(32px,5vh,56px)} /* ═══════════════ footer ═══════════════ */ .ftr{position:relative;background:linear-gradient(180deg,#0a0e16,#070a10); border-top:1px solid var(--line);padding:clamp(48px,7vh,84px) 0 calc(38px + env(safe-area-inset-bottom))} .ftr-in{display:grid;gap:36px} .ftr-brand{display:flex;align-items:center;gap:12px;color:var(--fg)} .ftr-brand .brand-mark{color:var(--blue)} .ftr-brand p{font-family:var(--disp);font-size:1.2rem;font-weight:600} .ftr-cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px;color:var(--fg-dim)} .ftr-cols dt{color:var(--fg-dimmer);margin-bottom:.9em} .ftr-cols dd{margin:0 0 .5em;text-transform:none;letter-spacing:.04em;font-size:.82rem} .ftr-cols a{text-decoration:none;transition:color .2s} .ftr-cols a:hover{color:var(--blue-hi)} .ftr-legal{color:var(--fg-dimmer);border-top:1px solid var(--line);padding-top:24px} /* ═══════════════ scroll reveals ═══════════════ */ [data-r]{opacity:0;transform:translateY(26px); transition:opacity .72s var(--ease),transform .72s var(--ease)} [data-r].is-in{opacity:1;transform:none} /* ═══════════════ mobile sticky bar ═══════════════ */ .sticky{display:none} /* ═══════════════════════════════════════════════════════════════ RESPONSIVE ═══════════════════════════════════════════════════════════════ */ @media (max-width:1080px){ .grid4{grid-template-columns:repeat(2,1fr)} .steps--time{grid-template-columns:repeat(2,1fr)} } @media (max-width:900px){ .hdr-tel{display:none} .grid3{grid-template-columns:1fr} .steps{grid-template-columns:1fr} .split,.split--form{grid-template-columns:1fr} .form-side{position:static} .probs li{max-width:none;margin:0 !important} } @media (max-width:820px){ :root{--hdr-h:60px} body{font-size:16px} /* header collapses to brand + toggle; CTA lives in the sticky bar */ .hdr .btn--sm{display:none} .tab{font-size:.8rem;padding:.42em .7em} /* hero becomes: copy → image band w/ handle → two doors */ .hero{min-height:0;display:flex;flex-direction:column;padding:calc(var(--hdr-h) + 18px) 0 30px} /* flatten the UI wrapper so the stage can sit between the copy and the handle */ .hero-ui{display:contents} .hero-copy,.doors,.handle,.hero-ui *{pointer-events:auto} .hero-copy{order:1} .hero-stage{order:2;position:relative;inset:auto;height:min(72vw,360px);margin-top:22px;cursor:default} .handle{order:3} .doors{order:4} h1.h-display{font-size:clamp(2.3rem,9.2vw,3.2rem)} .hero-sub{font-size:1rem} .fork{display:none} .hero-hint{display:none} .handle{ display:block;position:relative;height:56px;margin:-28px 0 0;width:100%; z-index:4;touch-action:none; } .handle-grip{ position:absolute;top:0;left:calc(var(--p)*100%); translate:-50% 0;width:50px;height:50px;border-radius:50%; background:var(--blue);box-shadow:0 8px 26px -6px rgba(47,125,255,.9),0 0 0 4px rgba(7,9,11,.85); display:grid;place-items:center; } .handle-grip::before{content:"‹ ›";font:600 17px/1 var(--mono);color:#fff;letter-spacing:-1px} .handle-tag{position:absolute;top:14px;color:var(--fg-dimmer);font-size:.6rem} .handle-tag--l{left:var(--pad)} .handle-tag--r{right:var(--pad)} .doors{display:grid;gap:10px;margin:26px auto 0;max-width:var(--wrap);padding-inline:var(--pad);width:100%} .door{ display:grid;grid-template-columns:1fr auto;align-items:center;gap:4px 12px;text-align:left; border:1px solid var(--line-2);background:rgba(255,255,255,.03);padding:16px 18px;border-radius:2px; transition:border-color .2s,background .2s; } .door:hover,.door:active{border-color:var(--blue);background:rgba(47,125,255,.09)} .door-k{grid-column:1;color:var(--blue-hi);font-size:.62rem} .door-t{grid-column:1;font-family:var(--disp);font-weight:600;font-size:1.32rem;line-height:1.08} .door-a{grid-column:2;grid-row:1/3;color:var(--blue);font-size:1.3rem} /* pinned clips: keep the media, shorten the scroll */ .pin-media{height:82svh} .pin-flow{margin-top:-82svh;min-height:185svh;padding:14svh 0 12svh;gap:4svh} .probs{gap:34px;margin-top:40px} .grid4{grid-template-columns:1fr} .steps--time{grid-template-columns:1fr} .proof{grid-template-columns:1fr;gap:34px} .final-btns{flex-direction:column;align-items:stretch} .btn--big{align-items:center;text-align:center} .ftr-cols{grid-template-columns:1fr} .ba-knob{width:46px;height:46px} .ba-tag{font-size:.56rem;bottom:10px} .ba-tag--l{left:10px}.ba-tag--r{right:10px} /* sticky bottom bar */ .sticky{ display:flex;gap:10px;position:fixed;left:0;right:0;bottom:0;z-index:95; padding:10px var(--pad) calc(10px + env(safe-area-inset-bottom)); background:rgba(7,9,11,.94);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px); border-top:1px solid var(--line); transform:translateY(120%);transition:transform .35s var(--ease); } .sticky.is-on{transform:none} .sticky-call{ display:flex;align-items:center;gap:7px;text-decoration:none;flex:none;padding:.85em 1.1em; border:1px solid var(--line-2);border-radius:2px;font-family:var(--disp);font-weight:600;font-size:1.02rem; } .sticky-call svg{width:17px;height:17px} .sticky-cta{flex:1;font-size:1rem;padding:.85em 1em} .ftr{padding-bottom:calc(96px + env(safe-area-inset-bottom))} } @media (max-width:420px){ .brand-txt em{display:none} .door-t{font-size:1.18rem} } /* ═══════════════ reduced motion ═══════════════ */ @media (prefers-reduced-motion:reduce){ *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important; transition-duration:.001ms !important} [data-r]{opacity:1;transform:none} .grain{animation:none} .grid4 article::before,.grid3 article::before,.steps li::before{width:100%} } /* ═══════════════════════════════════════════════════════════════ THE NETWORK — cables, outlets, access points, cameras One 9s cycle. Every element is delay-offset inside that cycle so the light reaches endpoints in sequence, never all at once. ═══════════════════════════════════════════════════════════════ */ :root{--cycle:9s} #netCables{opacity:calc(.6 + var(--net-i) * .4)} #netDev{opacity:var(--net-i)} /* ── cable runs ── One trunk in the joist bay and a vertical drop per endpoint. The trunk pulse takes 2.6s of the 9s cycle (28.9%); each drop takes 0.75s (8.3%) and starts as the trunk pulse passes its branch, so the light visibly turns the corner and runs up or down the stud bay. */ .cab-case{stroke:rgba(2,6,14,.74);stroke-width:9.5} .cab-base{stroke:rgba(162,204,255,.66);stroke-width:4.2} .cab-live{ stroke:#dcebff;opacity:0; filter:drop-shadow(0 0 9px rgba(47,125,255,.95)); } .cab-live--trunk{ stroke-width:5;stroke-dasharray:18 100;stroke-dashoffset:18; animation:travelTrunk var(--cycle) linear infinite; } .cab-live--trunkr{ stroke-width:5;stroke-dasharray:18 100;stroke-dashoffset:18; animation:travelTrunkR var(--cycle) linear infinite; } .cab-live--drop{ stroke-width:6;stroke-dasharray:34 100;stroke-dashoffset:34; animation:travelDrop var(--cycle) linear infinite; } @keyframes travelTrunk{ 0% {stroke-dashoffset:18; opacity:0} 1.5% {opacity:1} 28.9% {stroke-dashoffset:-100; opacity:1} 31% {stroke-dashoffset:-100; opacity:0} 100% {stroke-dashoffset:-100; opacity:0} } @keyframes travelTrunkR{ 0% {stroke-dashoffset:18; opacity:0} 2% {opacity:1} 22.3% {stroke-dashoffset:-100; opacity:1} 24.5% {stroke-dashoffset:-100; opacity:0} 100% {stroke-dashoffset:-100; opacity:0} } @keyframes travelDrop{ 0% {stroke-dashoffset:34; opacity:0} 1% {opacity:1} 8.3% {stroke-dashoffset:-100; opacity:1} 10.5% {stroke-dashoffset:-100; opacity:0} 100% {stroke-dashoffset:-100; opacity:0} } /* ── rough-in: what is actually on the wall at framing ── */ #netRough{opacity:calc(.5 + var(--net-i) * .5)} .rf-box{fill:rgba(10,20,34,.55);stroke:var(--blue-hi);stroke-width:2.4;opacity:.75} .rf-tail{stroke:var(--blue-hi);stroke-width:2.6;opacity:.6;stroke-linecap:round;fill:none} /* -- finished devices: real hardware, lit by the run reaching them -- */ .dv-shadow{fill:rgba(0,0,0,.55)} .dv-plate{fill:url(#gPlastic);stroke:rgba(12,20,32,.55);stroke-width:.9; animation:dvOn var(--cycle) ease-out infinite} .dv-bevel{stroke:rgba(255,255,255,.75);stroke-width:1;opacity:.5;fill:none;stroke-linecap:round} .dv-screw{fill:#aab4c0;stroke:rgba(12,20,32,.45);stroke-width:.5} .dv-slot{stroke:rgba(12,20,32,.6);stroke-width:.7;stroke-linecap:round} .dv-recess{fill:#0c1420;stroke:rgba(0,0,0,.6);stroke-width:.8} .dv-port{fill:var(--blue);stroke:rgba(4,10,22,.7);stroke-width:.5; animation:dvPort var(--cycle) ease-out infinite} .dv-pins{stroke:#e0b055;stroke-width:.85;stroke-linecap:round;fill:none;opacity:.95} .dv-mount{fill:#cfd7e1;stroke:rgba(12,20,32,.45);stroke-width:.7} .dv-arm{fill:#bcc6d2;stroke:rgba(12,20,32,.45);stroke-width:.6} .dv-knuckle{fill:#aeb9c6;stroke:rgba(12,20,32,.5);stroke-width:.7} .dv-puck{fill:url(#gShell);stroke:rgba(12,20,32,.45);stroke-width:.9; animation:dvOn var(--cycle) ease-out infinite} .dv-gloss{stroke:rgba(255,255,255,.8);stroke-width:1.2;fill:none;opacity:.45;stroke-linecap:round} .dv-ring{fill:none;stroke:rgba(12,20,32,.25);stroke-width:1} .dv-body{fill:url(#gShell);stroke:rgba(12,20,32,.5);stroke-width:.9; animation:dvOn var(--cycle) ease-out infinite} .dv-hood{fill:url(#gShell);stroke:rgba(12,20,32,.5);stroke-width:.9;opacity:.96} .dv-lensring{fill:#39434f;stroke:rgba(12,20,32,.7);stroke-width:.7} .dv-lens{fill:url(#gLens);stroke:rgba(150,180,220,.35);stroke-width:.6} .dv-led{fill:#35e08b;filter:drop-shadow(0 0 4px rgba(53,224,139,.95));opacity:0; animation:cLed 1.9s ease-in-out infinite} .dv-led--cam{animation-duration:2.4s} @keyframes dvOn{0%{opacity:.3} 3%{opacity:1} 12%{opacity:.97} 88%{opacity:.94} 97%,100%{opacity:.3}} @keyframes dvPort{0%{opacity:.32} 3%{opacity:1} 14%{opacity:.88} 88%{opacity:.84} 97%,100%{opacity:.32}} @keyframes cLed{0%,62%{opacity:.25} 72%,84%{opacity:1} 100%{opacity:.25}} .o-halo{fill:rgba(47,125,255,.26);opacity:0;transform-box:fill-box;transform-origin:center; animation:oHalo var(--cycle) ease-out infinite} @keyframes oHalo{ 0%{opacity:0;transform:scale(.6)} 3%{opacity:.85;transform:scale(1.35)} 12%{opacity:.26;transform:scale(1)} 85%{opacity:.2} 97%,100%{opacity:0} } /* ── access point signal, rippling down into the room ── */ .a-wave{ fill:none;stroke:var(--blue-hi);stroke-width:4.2;stroke-linecap:round;opacity:0; transform-box:fill-box;transform-origin:center top; animation:aWave 1.8s linear infinite; } @keyframes aWave{ 0% {opacity:0; transform:scale(.28)} 12% {opacity:1; transform:scale(.52)} 55% {opacity:.5; transform:scale(.94)} 92% {opacity:0; transform:scale(1.28)} 100%{opacity:0; transform:scale(1.28)} } /* ── camera lens glint ── */ .c-glint{fill:#eaf3ff;opacity:0;transform-box:fill-box;transform-origin:center; animation:cGlint var(--cycle) ease-out infinite} .c-flare{stroke:#eaf3ff;stroke-width:1.3;opacity:0;transform-box:fill-box;transform-origin:center; animation:cFlare var(--cycle) ease-out infinite} @keyframes cGlint{ 0%{opacity:0;transform:scale(.4)} 3%{opacity:1;transform:scale(1.3)} 10%{opacity:.6;transform:scale(1)} 85%{opacity:.5} 97%,100%{opacity:0} } @keyframes cFlare{ 0%{opacity:0;transform:scale(.2)} 3.5%{opacity:.85;transform:scale(1)} 12%{opacity:0;transform:scale(1.7)} 100%{opacity:0} } /* ── the enclosure ── */ .s-halo{fill:rgba(47,125,255,.2);transform-box:fill-box;transform-origin:center; animation:sHalo 3.4s ease-in-out infinite} .s-rows{stroke:var(--blue);stroke-width:2.4;opacity:.7;stroke-linecap:round; animation:sRows 3.4s ease-in-out infinite} @keyframes sHalo{0%,100%{opacity:.45;transform:scale(1)} 50%{opacity:.95;transform:scale(1.1)}} @keyframes sRows{0%,100%{opacity:.45} 50%{opacity:.95}} @media (prefers-reduced-motion:reduce){ .cab-live{animation:none;opacity:.55;stroke-dasharray:none;stroke-dashoffset:0} .o-halo,.a-wave,.c-flare{animation:none;opacity:.35;transform:scale(.9)} .dv-plate,.dv-puck,.dv-body,.dv-port,.c-glint,.s-halo,.s-rows{animation:none;opacity:.9} .c-led{animation:none;opacity:1} } [hidden]{display:none !important} /* ═══════════════════════════════════════════════════════════════ THE SCROLL SPINE A Cat6A run down the left margin: the cable pays out as you scroll, an RJ45 rides its end, and at the bottom of the page it seats into a wall jack and the wordmark comes up. Mobile gets a hairline instead. ═══════════════════════════════════════════════════════════════ */ /* travel is set so that at full scroll, plus the 6px seating nudge, the plug's nose lands inside the jack's port rather than stopping short above it */ /* Every part of the rail is derived from --rail-w, so the whole assembly scales together. The jack is absolutely positioned at the foot of the rail; --plug-travel stops the plug with its nose inside the port, and the 6px seating nudge on .is-plugged pushes it home. */ :root{ /* The scroll path owns a reserved rail on the left edge of the viewport and the spine sits centred in it. Any text column that runs alongside the path starts at --after-rail, never inside the rail: the builder copy used to start at --pad-hero, which put the plug and cable over the first letter of every headline ("lome runs", "AT6A") at every desktop width. */ --rail:clamp(56px,4.4vw,72px); --rail-gutter:clamp(24px,2.6vw,48px); --after-rail:calc(var(--rail) + var(--rail-gutter)); --rail-w:54px; --cable-w:12px; --plug-w:42px; --plug-h:56px; --jack-w:46px; --jack-h:60px; --jack-foot:30px; --plug-travel:calc(100% - var(--jack-h) - var(--plug-h) - var(--jack-foot) + 18px); } @media (min-width:1500px){ :root{--rail-w:64px;--cable-w:14px;--plug-w:50px;--plug-h:66px;--jack-w:54px;--jack-h:70px} } /* below 1380 the centred 1280 wrap leaves no gutter, so the rail shrinks to fit beside the content instead of running across it */ @media (min-width:821px) and (max-width:1380px){ :root{--rail-w:40px;--cable-w:9px;--plug-w:32px;--plug-h:42px;--jack-w:34px;--jack-h:46px;--jack-foot:22px} } .spine{ position:fixed;left:calc((var(--rail) - var(--rail-w)) / 2);top:0;bottom:0;width:var(--rail-w);z-index:60; pointer-events:none;opacity:0;transition:opacity .6s var(--ease); } .spine.is-on{opacity:1} /* the dim route the cable will take */ .spine-track{ position:absolute;left:calc(50% - 1px);top:0;width:2px; bottom:calc(var(--jack-h) + var(--jack-foot) + 6px); background:linear-gradient(180deg,transparent,rgba(255,255,255,.1) 6%,rgba(255,255,255,.1) 94%,transparent); } /* the cable itself, paying out with scroll. The cross-gradient is what makes it read as a round jacket rather than a flat blue bar. */ .spine-cable{ position:absolute;left:calc(50% - var(--cable-w)/2);top:0;width:var(--cable-w); border-radius:0 0 calc(var(--cable-w)/2) calc(var(--cable-w)/2); height:calc(var(--sp,0) * var(--plug-travel) + 16px); background: linear-gradient(90deg, rgba(0,0,0,.45) 0%, rgba(0,0,0,.12) 14%, rgba(255,255,255,.52) 30%, rgba(255,255,255,.14) 44%, rgba(0,0,0,.10) 62%, rgba(0,0,0,.42) 88%, rgba(0,0,0,.55) 100%), linear-gradient(180deg,#1748ad,var(--blue) 10%,#3d86ff 60%,#2f7dff); box-shadow:0 0 16px rgba(47,125,255,.45),inset 0 0 0 1px rgba(8,18,38,.55); } /* the RJ45 on the end of it */ .spine-plug{ position:absolute;left:calc(50% - var(--plug-w)/2);width:var(--plug-w);height:var(--plug-h); top:calc(var(--sp,0) * var(--plug-travel)); filter:drop-shadow(0 5px 12px rgba(0,0,0,.6)); transition:transform .18s var(--ease); } /* the jack sits at the foot of the rail, where the plug lands */ .spine-jack{ position:absolute;left:calc(50% - var(--jack-w)/2);bottom:var(--jack-foot); width:var(--jack-w);height:var(--jack-h); filter:drop-shadow(0 4px 12px rgba(0,0,0,.5)); transition:filter .45s var(--ease); } /* plug parts */ .pg-boot{fill:url(#pgBoot)} .pg-bootline{stroke:rgba(4,12,28,.4);stroke-width:1;fill:none;stroke-linecap:round} .pg-latch{fill:#2a6ddb;stroke:rgba(4,12,28,.55);stroke-width:.8} .pg-shadow{fill:rgba(0,0,0,.45)} .pg-body{fill:url(#pgBody);stroke:rgba(16,34,66,.85);stroke-width:1.1} .pg-gloss{fill:rgba(255,255,255,.55)} .pg-window{fill:rgba(28,52,96,.28)} .pg-pins path{stroke:url(#pgGold);stroke-width:1.7;stroke-linecap:round} .pg-nose{fill:rgba(210,228,252,.95);stroke:rgba(16,34,66,.7);stroke-width:.9} /* jack parts */ .jk-shadow{fill:rgba(0,0,0,.45)} .jk-plate{fill:url(#jkPlate);stroke:rgba(20,35,60,.5);stroke-width:1} .jk-bevel{stroke:rgba(255,255,255,.95);stroke-width:1.1;opacity:.75;fill:none;stroke-linecap:round} .jk-screw{fill:#aab5c2;stroke:rgba(20,35,60,.45);stroke-width:.6} .jk-slot{stroke:rgba(20,35,60,.75);stroke-width:.9;stroke-linecap:round} .jk-keystone{fill:#f6f8fb;stroke:rgba(20,35,60,.45);stroke-width:.8} .jk-recess{fill:#080d16} .jk-mouth{fill:#1b5ccd;opacity:.45;transition:opacity .5s var(--ease)} .jk-lip{stroke:rgba(255,255,255,.55);stroke-width:.8;fill:none} .jk-pins path{stroke:url(#jkGold);stroke-width:1.3;stroke-linecap:round;opacity:.95} .jk-label{fill:rgba(20,35,60,.5)} /* the moment it seats */ .spine.is-plugged .spine-plug{transform:translateY(7px)} .spine.is-plugged .spine-jack{filter:drop-shadow(0 4px 12px rgba(0,0,0,.5)) drop-shadow(0 0 14px rgba(47,125,255,.85))} .spine.is-plugged .jk-mouth{opacity:1} .spine-flash{ position:absolute;left:50%;translate:-50% 0;bottom:calc(var(--jack-foot) - 8px); width:calc(var(--rail-w) + 32px);height:calc(var(--jack-h) + 24px);border-radius:50%; background:radial-gradient(circle,rgba(127,178,255,.85),transparent 70%); opacity:0;pointer-events:none; } .spine.is-plugged .spine-flash{animation:plugFlash .7s ease-out 1} @keyframes plugFlash{0%{opacity:0;transform:scale(.4)}22%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(1.5)}} /* when the run lands, the footer brand is what lights up — no duplicate wordmark in the rail, and nothing to collide with the footer copy */ .ftr-brand p,.ftr-brand .brand-mark{transition:color .8s var(--ease) .15s,filter .8s var(--ease) .15s,text-shadow .8s var(--ease) .15s} .ftr-brand .nv{transition:inherit} html.is-linked .ftr-brand p{color:#fff} html.is-linked .ftr-brand .nv{color:var(--blue-hi);text-shadow:0 0 20px rgba(47,125,255,.85)} html.is-linked .ftr-brand .brand-mark{filter:drop-shadow(0 0 16px rgba(47,125,255,.95))} .spine-dots{position:absolute;left:calc(50% - 1px);top:0;bottom:calc(var(--jack-h) + var(--jack-foot) + 6px);width:2px} .spine-dots li{ position:absolute;left:50%;translate:-50% -50%;width:7px;height:7px;border-radius:50%; border:1px solid rgba(255,255,255,.26);background:var(--ink); transition:background .4s var(--ease),border-color .4s var(--ease),box-shadow .4s var(--ease); } .spine-dots li.is-past{background:var(--blue);border-color:var(--blue-hi);box-shadow:0 0 9px rgba(47,125,255,.85)} /* ── softened section seams: the page should flow, not step ── */ .band--bone{position:relative} .band--bone::before,.band--bone::after{ content:"";position:absolute;left:0;right:0;height:clamp(40px,7vh,96px);pointer-events:none; } .band--bone::before{top:0;background:linear-gradient(180deg,var(--ink),transparent)} .band--bone::after{bottom:0;background:linear-gradient(0deg,var(--ink),transparent)} /* hairlines that fade at the ends instead of butting into the gutters */ .band--proof,.cred{border-block:0;position:relative} .band--proof::before,.band--proof::after,.cred::before,.cred::after{ content:"";position:absolute;left:0;right:0;height:1px;pointer-events:none; background:linear-gradient(90deg,transparent,var(--line-2) 18%,var(--line-2) 82%,transparent); } .band--proof::before,.cred::before{top:0} .band--proof::after,.cred::after{bottom:0} @media (max-width:820px){ /* A phone cannot spare a 56px rail beside the copy, so the path narrows to a thin, low-opacity line that the content reads over. It is the same mechanic, not a substitute: it still pays out with scroll, still carries the plug, and still seats in the jack at the foot of the page. */ :root{--rail-w:14px;--cable-w:3px;--plug-w:12px;--plug-h:16px; --jack-w:14px;--jack-h:19px;--jack-foot:14px} .spine{left:3px} .spine.is-on{opacity:.5} .spine-dots,.spine-flash{display:none} } @media (prefers-reduced-motion:reduce){ .spine-head{box-shadow:0 0 6px rgba(47,125,255,.6)} } /* ── header: brand hard left, controls hard right ── */ .hdr-div{width:1px;height:20px;background:var(--line-2);flex:none} .hdr-right{gap:14px} /* ── hero copy sits in a left column so the centre gable stays clear ── */ .hero-copy > *{max-width:min(46%,620px)} .hero-sub{max-width:min(40%,440px)!important} /* ── scrubbed clips: the frame breathes with the same scroll progress ── */ .pin-media{--shot:0} .pin-seq{ /* the frames carry the camera move, so the canvas itself holds still */ will-change:contents; } .pin-vig{opacity:calc(0.82 + var(--shot) * 0.18)} @media (max-width:820px){ .hero-copy > *{max-width:none} .hero-sub{max-width:none!important} .hdr-div{display:none} } /* ═══════════════════════════════════════════════════════════════ THE ROOM JOURNEY Three rooms, each a pinned orbiting shot with the felt problem and the fix arriving on alternate sides as the camera travels. ═══════════════════════════════════════════════════════════════ */ .pin--room .pin-media{height:100svh} .pin--room .pin-flow{min-height:190svh;padding:14svh 0 12svh} /* the first room carries the section opener too, so it needs more runway */ .pin--room-first .pin-flow{min-height:250svh} .pin--room-last .pin-flow{min-height:225svh} /* the push-ins carry their own motion, so the frame stays calmer */ .pin--room .pin-seq{transform:none} .pin--room .pin-vig{ background: radial-gradient(130% 100% at 50% 50%,transparent 26%,rgba(0,0,0,.6) 78%,rgba(0,0,0,.9) 100%), linear-gradient(180deg,var(--ink) 0,rgba(7,9,11,.4) 16%,rgba(7,9,11,.5) 62%,var(--ink) 100%); } .room-no{color:var(--blue-hi);margin-bottom:1em} .room-h{max-width:18ch;text-wrap:balance} .room-beat{ max-width:min(46ch,72vw);font-size:clamp(1.08rem,1.9vw,1.42rem);line-height:1.5; /* a tight edge as well as the soft halo: since the shots stay behind people, a lit sweater or a game screen can sit under this copy */ text-shadow:0 0 3px rgba(7,9,11,.85),0 2px 20px rgba(7,9,11,.95); } .room-beat--problem{color:#d6dee7;font-family:var(--disp);font-weight:500; font-size:clamp(1.5rem,3vw,2.5rem);line-height:1.12;max-width:min(20ch,74vw)} /* the Wired answer is set as large as the problem it answers, in the display face, near-white, with its tag on a line of its own above it */ .room-beat--fix{color:#eef4ff;margin-left:auto;font-family:var(--disp);font-weight:500; font-size:clamp(1.45rem,2.5vw,2.15rem);line-height:1.2;letter-spacing:.005em;max-width:min(30ch,74vw)} .room-beat--fix .tag{ display:table;margin:0 0 .8em;font-size:.76rem;color:#fff; border:1px solid rgba(127,178,255,.6);border-radius:2px;padding:.45em .8em; background:rgba(47,125,255,.24);box-shadow:0 0 22px rgba(47,125,255,.35);text-shadow:none; } /* the problem lands on the left, the fix answers from the right */ .rb--r{display:flex;justify-content:flex-end} .craft-fix{margin-top:1.6rem} /* the builder hallway: the footage is bright lumber, so the steps sit on their own dark glass panel and the heading steps up a size */ .pin--hall .pin-flow h3{font-size:clamp(2.3rem,4.6vw,4rem);text-shadow:0 2px 30px rgba(3,6,12,.95)} .pin--hall .steps--time{margin-top:clamp(24px,3.4vh,40px);padding:clamp(22px,2.4vw,36px); background:rgba(6,9,14,.74);border:1px solid rgba(255,255,255,.09);border-radius:8px; -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)} .pin--hall .steps h4{color:#fff} .pin--hall .steps p{color:#cfd8e2} .rooms-close{font-weight:600;font-size:clamp(1.9rem,4.2vw,3.4rem);line-height:1.04; color:var(--fg);text-wrap:balance} /* ── customer quotes (placeholders until real ones land) ── */ .band--quotes{background:var(--ink-1);position:relative} .band--quotes::before,.band--quotes::after{ content:"";position:absolute;left:0;right:0;height:1px;pointer-events:none; background:linear-gradient(90deg,transparent,var(--line-2) 18%,var(--line-2) 82%,transparent); } .band--quotes::before{top:0} .band--quotes::after{bottom:0} .quotes{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(22px,2.6vw,40px);margin-top:clamp(28px,4vh,48px)} .quotes blockquote{margin:0;border-top:1px solid var(--line-2);padding-top:22px} .quotes p{font-family:var(--disp);font-weight:500;font-size:clamp(1.15rem,1.9vw,1.55rem); line-height:1.2;margin-bottom:1em} .quotes cite{color:var(--fg-dimmer);font-style:normal} @media (max-width:900px){ .quotes{grid-template-columns:1fr} } @media (max-width:820px){ .pin--room .pin-media{height:82svh} .pin--room .pin-flow{min-height:170svh;padding:11svh 0 9svh;margin-top:-82svh} .pin--room-first .pin-flow{min-height:225svh} .pin--room-last .pin-flow{min-height:200svh} .rb--r{justify-content:flex-start} .room-beat,.room-beat--problem{max-width:none} .room-beat--fix{margin-left:0} } /* copy sitting over footage needs to hold against a bright frame */ .pin-flow .lede{color:#c6d0da;text-shadow:0 2px 18px rgba(7,9,11,.95)} .pin-flow .eyebrow{text-shadow:0 2px 14px rgba(7,9,11,.9)} .pin-flow .h-display{text-shadow:0 2px 26px rgba(7,9,11,.7)} /* the section kicker was too faint over footage */ .eyebrow{font-weight:600;font-size:.78rem;letter-spacing:.2em;color:var(--blue-hi)} .pin-flow .eyebrow{color:#a9cbff;text-shadow:0 2px 16px rgba(7,9,11,.95),0 0 26px rgba(7,9,11,.7)} .room-no{font-weight:600;font-size:.78rem;letter-spacing:.2em} /* the turn in the problem line */ .beat-turn{color:var(--blue-hi);white-space:nowrap} /* ── frame sequences (the three room shots) ── */ .pin-seq{position:absolute;inset:0;width:100%;height:100%;display:block} .pin-seq-fallback{position:absolute;inset:0;width:100%;height:100%;object-fit:cover; transition:opacity .4s var(--ease)} /* the frames carry the orbit, so the frame itself stays still */ /* ═══════════════════════════════════════════════════════════════ The copy sections used to be flat black for two or three screens at a stretch. A faint drawing-sheet grid and a low ambient wash give them depth without lifting the near-black palette. ═══════════════════════════════════════════════════════════════ */ .band:not(.band--bone),.final,.cred{position:relative;isolation:isolate} .band:not(.band--bone)::before,.final::before,.ftr::before{ content:"";position:absolute;inset:0;z-index:0;pointer-events:none; background: linear-gradient(90deg,rgba(127,178,255,.075) 1px,transparent 1px) 0 0/72px 72px, linear-gradient(0deg, rgba(127,178,255,.075) 1px,transparent 1px) 0 0/72px 72px, radial-gradient(70% 62% at 10% -4%,rgba(47,125,255,.20),transparent 68%), radial-gradient(62% 58% at 94% 104%,rgba(24,74,160,.18),transparent 70%); -webkit-mask-image:linear-gradient(180deg,transparent,#000 12%,#000 88%,transparent); mask-image:linear-gradient(180deg,transparent,#000 12%,#000 88%,transparent); } /* the grid is a positioned layer, so the copy has to be lifted over it */ .band > .wrap,.final > .wrap,.final > .btn,.ftr > .wrap{position:relative;z-index:1} .band:not(.band--bone)::before,.final::before,.ftr::before{z-index:0} .band > .wrap,.final > .wrap{position:relative;z-index:1} .band--quotes::before{opacity:.75} /* the form panels sit on the grid, so give them their own ground */ .form{background:rgba(9,13,18,.86);backdrop-filter:blur(2px)} /* ─────────────────────────────────────────────────────────────── FLOW: scroll-linked depth JS writes --fp (0 entering the viewport, 1 leaving it) and --in (0→1 over the first third) onto anything with [data-flow]. The defaults below are the *finished* state, so the page still reads correctly if the script never runs. ─────────────────────────────────────────────────────────────── */ [data-flow]{--fp:1;--in:1} /* ── the four-up deck ── */ .sechead{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap} .sechead .ix{font-family:var(--mono);font-size:.68rem;letter-spacing:.2em;color:var(--blue-hi);opacity:.8} .secrule{position:relative;height:1px;margin-top:22px;background:var(--line);overflow:hidden} .secrule::after{content:"";position:absolute;inset:0 auto 0 0;width:calc(var(--in) * 100%); background:linear-gradient(90deg,var(--blue),rgba(127,178,255,.25)); box-shadow:0 0 12px rgba(47,125,255,.6)} .flowdeck{display:grid;gap:clamp(14px,1.4vw,22px);grid-template-columns:repeat(4,1fr); margin-top:clamp(36px,5vh,64px);perspective:1500px} .fcard{ --in:1;position:relative;display:flex;flex-direction:column;gap:clamp(14px,1.4vw,20px); padding:clamp(20px,1.9vw,30px);border-radius:5px;isolation:isolate; border:1px solid rgba(255,255,255,.085); background: linear-gradient(180deg,rgba(127,178,255,.055),rgba(255,255,255,.014) 40%,rgba(0,0,0,.22)); transform-origin:50% 120%; transform:perspective(1500px) rotateX(calc((1 - var(--in)) * 10deg)) translateY(calc((1 - var(--in)) * 30px)) scale(calc(.96 + var(--in) * .04)); opacity:calc(.18 + var(--in) * .82); box-shadow:0 calc(var(--in) * 22px) calc(var(--in) * 48px) rgba(0,0,0,.5); transition:border-color .4s var(--ease),background .4s var(--ease); } .fcard::before{content:"";position:absolute;inset:0 0 auto 0;height:1px; background:linear-gradient(90deg,transparent,rgba(127,178,255,.9),transparent); opacity:calc(var(--in) * .95)} .fcard:hover{border-color:rgba(127,178,255,.4); background:linear-gradient(180deg,rgba(127,178,255,.10),rgba(255,255,255,.02) 40%,rgba(0,0,0,.22))} .fhead{display:flex;align-items:center;justify-content:space-between;gap:12px} .fnum{font-family:var(--mono);font-size:.66rem;letter-spacing:.2em;color:var(--blue-hi);opacity:.85} .fcard h4{font-family:var(--disp);font-weight:600;font-size:clamp(1.14rem,1.55vw,1.42rem); line-height:1.1;margin:0} .fcard p{color:var(--fg-dim);font-size:.94rem;line-height:1.64;margin:0} /* line art: drawn in as the card arrives */ .fart{display:block;width:100%;height:clamp(64px,6vw,88px);overflow:visible} .fart [data-draw]{fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round; stroke-dasharray:1;stroke-dashoffset:calc(1 - var(--in));opacity:calc(.35 + var(--in) * .65)} .fart .dim{stroke:rgba(255,255,255,.22)} .fart .hot{stroke:var(--blue-hi)} .fart .fillhot{fill:var(--blue);stroke:none;opacity:var(--in)} /* ── the retrofit route ── */ .routewrap{margin-top:clamp(34px,5vh,58px);position:relative} .route{display:block;width:100%;height:auto;color:rgba(127,178,255,.9)} .route [data-draw]{fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round; stroke-dasharray:1;stroke-dashoffset:calc(1 - var(--in))} .route .wallline{stroke:rgba(255,255,255,.2)} .route .cut{stroke:var(--blue-hi)} .route text{font-family:var(--mono);font-size:7.5px;letter-spacing:.14em; fill:var(--fg-dim);text-transform:uppercase;opacity:calc(var(--in) * 1)} .route .node{fill:var(--blue);opacity:var(--in)} .route .nodering{fill:none;stroke:var(--blue-hi);opacity:calc(var(--in) * .55)} /* ── the hand-off into the builder side ── */ .handoff{position:relative;overflow:hidden;padding:clamp(90px,15vh,190px) 0 clamp(70px,11vh,150px); background:linear-gradient(180deg,#070a10,#0a1018 40%,#0b1220)} .handoff::before{content:"";position:absolute;inset:0;pointer-events:none; background: radial-gradient(75% 60% at 18% 0%,rgba(47,125,255,.20),transparent 70%), radial-gradient(60% 70% at 88% 100%,rgba(20,64,150,.22),transparent 72%)} /* the stage changes: a rule that travels as you scroll in */ .stageline{position:absolute;left:0;right:0;top:clamp(34px,6vh,72px);height:1px; background:linear-gradient(90deg,transparent,rgba(255,255,255,.16) 12%,rgba(255,255,255,.16) 88%,transparent)} .stageline b{position:absolute;top:-4px;left:calc(8% + var(--in) * 76%);width:9px;height:9px; border-radius:50%;background:var(--blue);box-shadow:0 0 16px rgba(47,125,255,.9); transform:translateX(-50%)} .stagetag{position:absolute;top:-26px;font-family:var(--mono);font-size:.62rem;letter-spacing:.18em; text-transform:uppercase;color:var(--fg-dimmer);white-space:nowrap} .stagetag--a{left:8%;transform:translateX(-50%);opacity:calc(1 - var(--in) * .55)} .stagetag--b{left:84%;transform:translateX(-50%);color:var(--blue-hi);opacity:calc(.3 + var(--in) * .7)} /* an isometric framed wall drawing itself behind the copy */ .hoart{position:absolute;right:-4%;bottom:-6%;width:min(52%,760px);height:auto; color:rgba(127,178,255,.55);pointer-events:none; opacity:calc(.25 + var(--in) * .75); transform:translateY(calc((1 - var(--in)) * 40px))} .hoart [data-draw]{fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round; stroke-dasharray:1;stroke-dashoffset:calc(1 - var(--in))} .hoart .stud{stroke:rgba(255,255,255,.18)} .hoart .run{stroke:var(--blue);stroke-width:2.2} .ho-in{position:relative;z-index:1;max-width:min(760px,62%)} .ho-in .lede{margin-top:1.1rem} .ho-in .btn{margin-top:clamp(26px,4vh,42px)} /* ── the three builder pillars ── */ .pillars{display:grid;gap:clamp(16px,1.8vw,28px);grid-template-columns:repeat(3,1fr); margin-top:clamp(40px,6vh,72px);perspective:1700px} .pillar{ --in:1;--yaw:0deg;position:relative;overflow:hidden; padding:clamp(24px,2.2vw,38px);border-radius:6px; border:1px solid rgba(255,255,255,.09); background:linear-gradient(162deg,rgba(47,125,255,.13),rgba(10,15,24,.62) 44%,rgba(6,9,14,.8)); transform-origin:50% 100%; transform:perspective(1700px) rotateY(calc((1 - var(--in)) * var(--yaw))) rotateX(calc((1 - var(--in)) * 8deg)) translateY(calc((1 - var(--in)) * 38px)); opacity:calc(.14 + var(--in) * .86); box-shadow:0 calc(var(--in) * 28px) calc(var(--in) * 60px) rgba(0,0,0,.55); transition:border-color .4s var(--ease)} .pillar:nth-child(1){--yaw:-9deg} .pillar:nth-child(3){--yaw:9deg} .pillar:hover{border-color:rgba(127,178,255,.42)} .pillar::before{content:"";position:absolute;inset:0 0 auto 0;height:1px; background:linear-gradient(90deg,transparent,rgba(127,178,255,.9),transparent); opacity:calc(var(--in) * .95)} .pnum{position:absolute;right:10px;top:-6px;font-family:var(--disp);font-weight:700; font-size:clamp(3.2rem,5.6vw,5.4rem);line-height:1;color:rgba(127,178,255,.10); pointer-events:none;user-select:none} .pillar h3,.pillar h4{font-family:var(--disp);font-weight:600;font-size:clamp(1.3rem,1.9vw,1.68rem); line-height:1.08;margin:0 0 .6em} .pillar p{color:var(--fg-dim);font-size:.96rem;line-height:1.66;margin:0} .pkicker{font-family:var(--mono);font-size:.64rem;letter-spacing:.2em;color:var(--blue-hi); opacity:.85;display:block;margin-bottom:1.2em} .part{display:block;width:100%;height:clamp(92px,9vw,128px);margin-bottom:clamp(18px,2vw,28px); color:rgba(127,178,255,.85);overflow:visible} .part [data-draw]{fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round; stroke-dasharray:1;stroke-dashoffset:calc(1 - var(--in))} .part .dim{stroke:rgba(255,255,255,.2)} .part .hot{stroke:var(--blue-hi);stroke-width:2} .part .fillhot{fill:var(--blue);stroke:none;opacity:var(--in)} @media (max-width:1080px){ .flowdeck{grid-template-columns:repeat(2,1fr)} .pillars{grid-template-columns:1fr;gap:18px} .pillar{--yaw:0deg} .ho-in{max-width:none} .hoart{position:relative;right:auto;bottom:auto;width:100%;margin-top:32px;opacity:.5} } @media (max-width:640px){ .flowdeck{grid-template-columns:1fr} .stagetag{font-size:.56rem} } @media (prefers-reduced-motion:reduce){ [data-flow],.fcard,.pillar{--in:1 !important} .fcard,.pillar,.hoart{transform:none !important} } /* The defaults above are the finished state so a scriptless page reads right. Once the flow driver is live it opts in to the unarrived state instead. */ html.js-flow [data-flow]{--fp:0;--in:0} /* ── quotes, in the same panel language as the deck ── */ .quotes{margin-top:clamp(34px,5vh,58px)} .quotes blockquote{ position:relative;border-top:0;padding:clamp(24px,2.2vw,34px);border-radius:5px; border:1px solid rgba(255,255,255,.085); background:linear-gradient(180deg,rgba(127,178,255,.05),rgba(255,255,255,.012) 42%,rgba(0,0,0,.2)); transition:border-color .4s var(--ease),transform .4s var(--ease)} .quotes blockquote::before{ content:"";position:absolute;inset:0 0 auto 0;height:1px; background:linear-gradient(90deg,transparent,rgba(127,178,255,.8),transparent)} .quotes blockquote::after{ content:"\201C";position:absolute;right:16px;top:2px;font-family:var(--disp);font-weight:700; font-size:4.2rem;line-height:1;color:rgba(127,178,255,.13);pointer-events:none} .quotes blockquote:hover{border-color:rgba(127,178,255,.36);transform:translateY(-3px)} .quotes p{padding-right:34px} /* ── in their words ── */ .sechead--lg{align-items:flex-end} .sechead--lg .eyebrow{margin-bottom:.5em} .sechead--lg h3{margin:0} .quotes blockquote{display:flex;flex-direction:column;gap:clamp(18px,2vw,26px)} .quotes p{flex:1;margin:0;padding-right:34px} .qby{display:flex;align-items:center;gap:13px;margin:0} .qav{width:44px;height:44px;border-radius:50%;flex:none;object-fit:cover; border:1px solid rgba(127,178,255,.3);box-shadow:0 2px 10px rgba(0,0,0,.45)} .quotes cite{display:flex;flex-direction:column;gap:2px;color:var(--fg);font-style:normal;line-height:1.25} .quotes cite span{color:var(--fg-dimmer);font-size:.9em} /* ═══════════════════════════════════════════════════════════════ BUILDER SECTION — read as a plan sheet, not a brochure. Square corners, hairline frames with corner ticks, drafting labels. Each card's drawing advances with scroll (--in from the existing flow driver) instead of every card doing a fade-up. ═══════════════════════════════════════════════════════════════ */ .bsec{position:relative;overflow:hidden; padding:clamp(80px,13vh,170px) 0 clamp(70px,11vh,150px); background:linear-gradient(180deg,#0a1018,#0b1523 46%,#0a121d)} .bsec::before{content:"";position:absolute;inset:0;pointer-events:none; background: linear-gradient(90deg,rgba(127,178,255,.06) 1px,transparent 1px) 0 0/96px 96px, linear-gradient(0deg, rgba(127,178,255,.06) 1px,transparent 1px) 0 0/96px 96px, radial-gradient(70% 55% at 14% 0%,rgba(47,125,255,.18),transparent 70%); -webkit-mask-image:linear-gradient(180deg,transparent,#000 10%,#000 90%,transparent); mask-image:linear-gradient(180deg,transparent,#000 10%,#000 90%,transparent)} .bsec > .wrap{position:relative;z-index:1} /* the title block, borrowed from a drawing's sheet block */ .bhead{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:clamp(24px,4vw,64px);align-items:start} .bhead h2{margin:.35em 0 0} .blede{margin-top:1.15rem;max-width:46ch;color:var(--fg-dim); font-size:clamp(1.02rem,1.5vw,1.2rem);line-height:1.62} .bblock{border:1px solid rgba(127,178,255,.22);padding:14px 18px;min-width:186px; font-family:var(--mono);font-size:.62rem;letter-spacing:.16em;text-transform:uppercase; color:var(--fg-dimmer);background:rgba(8,14,24,.5)} .bblock dl{display:grid;grid-template-columns:auto 1fr;gap:5px 14px;margin:0} .bblock dt{color:var(--fg-dimmer)} .bblock dd{margin:0;color:var(--blue-hi);text-align:right} /* ── the three priorities ── */ .bcards{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.5vw,24px); margin-top:clamp(44px,6vh,84px)} .bcard{--in:1;position:relative;display:flex;flex-direction:column; border:1px solid rgba(127,178,255,.16);background:rgba(8,14,24,.42); padding:clamp(22px,2vw,30px); transition:border-color .45s var(--ease),background .45s var(--ease),transform .45s var(--ease)} .bcard:hover{border-color:rgba(127,178,255,.44);background:rgba(11,19,32,.62);transform:translateY(-4px)} /* corner ticks, the way a detail is framed on a drawing */ .bcard::before,.bcard::after{content:"";position:absolute;width:11px;height:11px;pointer-events:none; border-color:var(--blue-hi);opacity:calc(.25 + var(--in) * .75);transition:opacity .4s var(--ease)} .bcard::before{top:-1px;left:-1px;border-top:2px solid;border-left:2px solid} .bcard::after{bottom:-1px;right:-1px;border-bottom:2px solid;border-right:2px solid} .bcard-n{font-family:var(--disp);font-weight:700;font-size:clamp(2.6rem,4vw,3.6rem); line-height:1;color:rgba(127,178,255,.9);letter-spacing:-.02em} .bcard-t{font-family:var(--mono);font-size:.72rem;letter-spacing:.2em;text-transform:uppercase; color:var(--fg);margin:.9em 0 .5em} .bcard-s{font-family:var(--disp);font-weight:600;font-size:clamp(1.14rem,1.5vw,1.38rem); line-height:1.16;color:var(--blue-hi);margin:0 0 .75em} .bcard p{color:var(--fg-dim);font-size:.94rem;line-height:1.64;margin:0} .bcard-art{display:block;width:100%;height:clamp(118px,11vw,152px);margin-bottom:clamp(18px,2vw,26px); color:rgba(127,178,255,.9);overflow:visible} .bcard-art [data-draw]{fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round; stroke-dasharray:1;stroke-dashoffset:calc(1 - var(--in))} .bcard-art .dim{stroke:rgba(255,255,255,.2)} .bcard-art .ghost{stroke:rgba(127,178,255,.3)} .bcard-art .hot{stroke:var(--blue);stroke-width:2.2} .bcard-art .fillhot{fill:var(--blue);stroke:none} .bcard-art .lbl{font-family:var(--mono);font-size:6.5px;letter-spacing:.14em; fill:var(--fg-dimmer);text-transform:uppercase;stroke:none} /* 01 — the progress marker travels as you scroll */ .bcard-art .marker{transform:translateX(calc(var(--in) * 118px));transition:none} .bcard-art .stn1{opacity:clamp(0,calc(var(--in) * 6),1)} .bcard-art .stn2{opacity:clamp(0,calc((var(--in) - .42) * 6),1)} .bcard-art .stn3{opacity:clamp(0,calc((var(--in) - .82) * 6),1)} /* 02 — blueprint hands over to the built thing */ .bcard-art .bp{opacity:clamp(0,calc(1 - var(--in) * .75),1)} .bcard-art .built{opacity:clamp(0,calc((var(--in) - .3) * 2.2),1)} /* 03 — one home becomes several */ .bcard-art .h2{opacity:clamp(0,calc((var(--in) - .25) * 3),1)} .bcard-art .h3{opacity:clamp(0,calc((var(--in) - .45) * 3),1)} .bcard-art .h4{opacity:clamp(0,calc((var(--in) - .62) * 3),1)} .bcard-art .node{fill:var(--blue);stroke:none;opacity:clamp(0,calc((var(--in) - .7) * 4),1)} /* ── the closing builder CTA ── */ .bcta{position:relative;overflow:hidden;text-align:center; padding:clamp(84px,14vh,180px) 0; background:linear-gradient(180deg,#0a121d,#0c1a2c 52%,#0a1018)} .bcta::before{content:"";position:absolute;inset:0;pointer-events:none; background:radial-gradient(75% 105% at 50% 100%,rgba(47,125,255,.26),transparent 64%)} .bcta > .wrap{position:relative;z-index:1} .bcta .eyebrow{color:var(--blue-hi)} .bcta h2{margin:.4em auto 0;max-width:20ch} .bcta .lede{margin:1.3rem auto 0;max-width:60ch;color:var(--fg-dim)} .bcta-btns{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;margin-top:clamp(34px,5vh,56px)} /* the rule that carries the eye down into the form */ .bcta-drop{position:relative;width:1px;height:clamp(40px,7vh,84px);margin:clamp(30px,4vh,48px) auto 0; background:linear-gradient(180deg,rgba(127,178,255,.55),transparent)} .bcta-drop::after{content:"";position:absolute;left:50%;top:0;translate:-50% 0;width:7px;height:7px; border-radius:50%;background:var(--blue);box-shadow:0 0 14px rgba(47,125,255,.9)} @media (max-width:1080px){ .bcards{grid-template-columns:1fr 1fr} .bcards > :last-child{grid-column:1 / -1} .bhead{grid-template-columns:1fr} .bblock{justify-self:start} } @media (max-width:720px){ .bcards{grid-template-columns:1fr} .bcards > :last-child{grid-column:auto} .bcard-art{height:128px} } @media (prefers-reduced-motion:reduce){ .bcard,.bcard-art *{--in:1 !important} .bcard-art .marker{transform:translateX(118px) !important} .bcard:hover{transform:none} } /* ── the builder form grew a select and a textarea ── */ .f select,.f textarea{ background:rgba(255,255,255,.04);border:1px solid var(--line-2);color:var(--fg); padding:.82em .9em;border-radius:2px;font:inherit;font-size:1rem;width:100%; transition:border-color .2s,background .2s,box-shadow .2s; } .f textarea{resize:vertical;min-height:5.2em;line-height:1.55} .f select{ appearance:none;-webkit-appearance:none;cursor:pointer;padding-right:2.4em; background-image:linear-gradient(45deg,transparent 50%,var(--fg-dim) 50%), linear-gradient(135deg,var(--fg-dim) 50%,transparent 50%); background-position:calc(100% - 1.15em) 55%,calc(100% - .85em) 55%; background-size:6px 6px,6px 6px;background-repeat:no-repeat; } .f select option{background:#0d1117;color:var(--fg)} .f select:hover,.f textarea:hover{border-color:rgba(255,255,255,.3)} .f select:focus,.f textarea:focus{outline:none;border-color:var(--blue); background-color:rgba(47,125,255,.07);box-shadow:0 0 0 3px rgba(47,125,255,.18)} .f.is-bad select,.f.is-bad textarea{border-color:#ff6b6b} /* the optional "about the job" fields sit under their own small heading */ .f-group{margin-top:6px;padding-top:18px;border-top:1px solid var(--line); font-family:var(--disp);font-weight:600;font-size:1.2rem;color:#fff} .f-group span{display:block;margin-top:4px;font-family:var(--sans);font-weight:400;font-size:.88rem;color:var(--fg-dimmer)} /* the long field spans the pair when the form is two-up */ @media (min-width:821px){ .split--form .form{display:grid;grid-template-columns:1fr 1fr;gap:18px;align-items:start} .split--form .form .f--wide, .split--form .form > button, .split--form .form > .undertext, .split--form .form > .sent{grid-column:1 / -1} } /* ═══════════════════════════════════════════════════════════════ THE BUILD — five beats scrubbed as one move. ═══════════════════════════════════════════════════════════════ */ /* Height is scroll budget: 262 frame slots at about 1.73vh each, plus the one screen that .cine-stage (what sticks) occupies. Adding slots without adding height would speed every beat up, not just the new one. */ .cine{position:relative;height:554vh;background:var(--ink)} .cine-stage{position:sticky;top:0;height:100vh;overflow:hidden;background:var(--ink)} .cine-canvas,.cine-fallback{position:absolute;inset:0;width:100%;height:100%} .cine-canvas{filter:saturate(.96) contrast(1.03);transition:filter .7s var(--ease)} /* The framing-at-dusk opener is the darkest clip in the chain and the structure sank into the sky. Lift it so the lumber and the blue runs inside the frame read; the other beats are already lit and stay as they are. */ .cine[data-beat="0"] .cine-canvas{filter:brightness(1.22) saturate(1.06) contrast(1.02)} .cine-fallback{object-fit:cover;opacity:0;transition:opacity .5s var(--ease)} .cine.is-lowpower .cine-canvas{display:none} .cine.is-lowpower .cine-fallback{opacity:1} /* Only the extreme edges are shaded now. This used to be a vignette that reached 90% black at the corners PLUS a gradient darkening the left two thirds of the frame - together they are what buried the hero. Contrast for the copy comes from a scrim behind the text column alone (.cine-block .wrap ::before), and the stage list gets a narrow one of its own on the right. */ .cine-vig{position:absolute;inset:0;pointer-events:none; background: linear-gradient(270deg,rgba(3,6,12,.5) 0,rgba(3,6,12,.26) 8%,transparent 17%), radial-gradient(130% 115% at 50% 50%,transparent 58%,rgba(0,0,0,.22) 84%,rgba(0,0,0,.42) 100%)} .cine-copy{position:absolute;inset:0;z-index:3;display:flex;align-items:center;pointer-events:none} .cine-copy .wrap{max-width:none;padding-left:var(--after-rail);padding-right:var(--pad-hero)} /* The copy column is sized so it ends before the subject of EVERY beat: the panel in the walk-in starts about a third of the way across, the bracket and the wall plate a little further right. At the old min(46%,620px) the lede ran across the panel's conduits, the run's lede ended on the bracket, and the finished headline touched the wall plate. Headlines get a little more room than body copy because they are short and set large. */ .cine{--copy-w:clamp(300px,25vw,440px)} .cine-copy .wrap > *{max-width:var(--copy-w)} .cine-copy .wrap > h2{max-width:calc(var(--copy-w) + 140px)} .cine-copy h2{margin:0} /* The scrim sits behind the text column only: dark at the rail, fading out a little past the end of the copy, and feathered top and bottom so it reads as shade rather than a box. Nothing across the rest of the frame. */ .cine-block .wrap{position:relative} .cine-block .wrap::before{ content:"";position:absolute;z-index:-1;pointer-events:none; left:0;top:-15vh;bottom:-15vh;width:calc(var(--after-rail) + var(--copy-w) + 16vw); /* holds dark to the END of the text column (about 75% of this box) and only then falls away - the first version faded out under the last words of the lede, which sat on bright sunlit lumber */ background:linear-gradient(90deg,rgba(4,8,14,.74) 0%,rgba(4,8,14,.66) 52%,rgba(4,8,14,.5) 72%,rgba(4,8,14,.16) 88%,transparent 100%); -webkit-mask-image:linear-gradient(180deg,transparent,#000 24%,#000 76%,transparent); mask-image:linear-gradient(180deg,transparent,#000 24%,#000 76%,transparent); } .cine-copy .lede{margin-top:1.1rem} /* ── stage rail, opposite the cable spine ── */ .cine-nav{--cnp:18px;position:absolute;right:clamp(18px,2.4vw,44px);top:50%;translate:0 -50%; z-index:4;margin:0;padding:var(--cnp);list-style:none;display:grid;gap:clamp(22px,3vh,32px); background:rgba(5,8,12,.5);border:1px solid rgba(255,255,255,.08);border-radius:6px; -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)} .cine-nav::before,.cine-nav::after{content:"";position:absolute;right:calc(var(--cnp) + 4px);width:1px;pointer-events:none} .cine-nav::before{top:calc(var(--cnp) + 5px);bottom:calc(var(--cnp) + 5px);background:rgba(255,255,255,.18)} .cine-nav::after{top:calc(var(--cnp) + 5px);height:calc(var(--cn-p,0) * (100% - 2 * var(--cnp) - 10px)); background:linear-gradient(180deg,var(--blue-hi),var(--blue)); box-shadow:0 0 10px rgba(47,125,255,.7)} /* Inactive stages used to sit at 34% opacity in a grey that was already dim, which is near-invisible over bright lumber. Now: readable at rest (.66), brighter once passed, full on the current one; a dark halo on the glyphs so they hold over any frame; and the dot column sits exactly on the rail line instead of 14px beside it. */ .cine-nav li{display:grid;grid-template-columns:auto auto auto;align-items:center;column-gap:14px; justify-content:end;line-height:1;opacity:.72;transition:opacity .45s var(--ease); text-shadow:0 0 2px rgba(3,6,12,.9),0 0 12px rgba(3,6,12,.85)} .cine-nav li .cn-l{order:1;font-family:var(--disp);font-weight:600;font-size:clamp(1rem,1.15vw,1.2rem); letter-spacing:.08em;color:var(--fg);min-width:6.4em;text-align:right;white-space:nowrap; transition:color .4s var(--ease)} .cine-nav li .cn-n{order:2;font-size:.7rem;letter-spacing:.12em;color:var(--fg-dim)} .cine-nav li i{order:3;width:9px;height:9px;border-radius:50%;background:var(--ink); border:1px solid rgba(255,255,255,.4);position:relative;z-index:1; transition:background .4s var(--ease),border-color .4s var(--ease),box-shadow .4s var(--ease)} .cine-nav li.is-past{opacity:.82} .cine-nav li.is-past i{background:rgba(127,178,255,.5);border-color:rgba(127,178,255,.6)} .cine-nav li.is-on{opacity:1} .cine-nav li.is-on i{background:var(--blue);border-color:var(--blue-hi);box-shadow:0 0 10px rgba(47,125,255,.9)} .cine-nav li.is-on .cn-l{color:#fff;text-shadow:0 0 16px rgba(47,125,255,.8)} .cine-nav li.is-on .cn-n{color:var(--blue-hi)} /* ── per-beat copy ── */ .cine-block{position:absolute;inset:0;display:flex;align-items:center; opacity:0;transition:opacity .5s var(--ease)} .cine-block.is-on{opacity:1} /* a beat whose subject sits at mid-height on the left takes its copy low. In the orbit the bracket swings down to about half height on the left, so the block has to stay short: the chips get the headline's width (two rows, not three) and it sits nearer the bottom edge. */ .cine-block.is-low{align-items:flex-end;padding-bottom:clamp(28px,4vh,72px)} .cine-block.is-low .cine-spec{max-width:calc(var(--copy-w) + 140px)} .cine-spec{list-style:none;margin:clamp(18px,3vh,30px) 0 0;padding:0; display:flex;flex-wrap:wrap;gap:8px;max-width:var(--copy-w)} .cine-spec li{border:1px solid rgba(127,178,255,.26);padding:.5em .8em; font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--blue-hi); background:rgba(8,14,24,.5)} /* a real sequence, so it is numbered */ .cine-time{list-style:none;margin:clamp(20px,3vh,32px) 0 0;padding:0;display:grid;gap:.7em; max-width:var(--copy-w)} .cine-time li{display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:baseline; font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--fg-dim)} .cine-time li span{color:var(--blue-hi)} @media (max-width:860px){ .cine{height:480vh} .cine-copy .wrap{padding-left:max(var(--pad-hero),22px)} .cine-block .wrap::before{display:none} .cine-copy .wrap > *,.cine-spec,.cine-time{max-width:none} .cine-vig{background: radial-gradient(135% 100% at 50% 50%,transparent 24%,rgba(0,0,0,.66) 74%,rgba(0,0,0,.92) 100%), /* the drop beat is bright bare lumber behind bottom-aligned copy, so the phone scrim has to hold further up the frame than the desktop one */ linear-gradient(0deg,rgba(0,0,0,.92) 0%,rgba(0,0,0,.78) 34%,rgba(0,0,0,.34) 58%,transparent 76%)} /* On a phone the 16:9 frame is cropped to its middle, so the bracket and the plate fill the upper half: every beat's copy sits low, just above the row of stage dots. It has to be set on .cine-block - each block is absolutely positioned and centres itself, so alignment on .cine-copy never reached them. 58px = the dot row's height plus a 24px gap. */ .cine-block,.cine-block.is-low{align-items:flex-end; padding-bottom:calc(clamp(76px,12vh,112px) + 58px)} /* Low copy still has to stop below the subject, and with these lists it climbs over the bracket (the run) and the plate (finished). Both are repeated in full a scroll later - the process steps and the spec strip - so on a phone the stage keeps the headline and lede only. */ .cine-spec,.cine-time{display:none} /* the rail becomes a row of dots under the copy; the labels do not fit */ .cine-nav{right:auto;left:max(var(--pad-hero),22px);top:auto;bottom:clamp(76px,12vh,112px); translate:0 0;grid-auto-flow:column;gap:16px;padding:0 0 12px; background:none;border:0;border-radius:0;-webkit-backdrop-filter:none;backdrop-filter:none} .cine-nav .cn-l{display:none} .cine-nav li{grid-template-columns:auto;justify-items:center;gap:6px} .cine-nav li i{order:1} .cine-nav li .cn-n{order:2;font-size:.56rem} .cine-nav::before{left:3px;right:3px;top:auto;bottom:3px;height:1px;width:auto} .cine-nav::after{left:3px;right:auto;top:auto;bottom:3px;height:1px; width:calc(var(--cn-p,0) * (100% - 6px))} } /* Low power: there is no loop video on the site (the scrub replaced all of them), so degrade to the still rather than an empty