/* ============================================================================ NEXUS Technology Network — enterprise site PALETTE IS DERIVED FROM THE CURRENT MARK, NOT CHOSEN. Source: the current transparent 4200x2400 RGBA master (real alpha, 13% opaque), read-only. Sampled regions: CENTRE GEM #c0f0f0 #a0f0f0 #307090 #206080 -> ICE CYAN. The focal point. STEEL arms #002030 #104060 #103050 #406070 #507080 -> COOL blue-steel GOLD arm #706050 #505040 -> warm, sparing, on the mark itself SUPERSEDES an earlier read of the 2026-07-26 emblem, whose gem sampled EMERALD (#30b090). Kevin: "our logo changed a little bit." The current mark's gem is CYAN - there is no emerald in it. Do not resurrect the emerald palette. KEVIN, 2026-08-02: "I just don't want the emerald pasted all over the website. Clean, professional, top-notch." Therefore the UI is MONOCHROME COOL STEEL and THE MARK IS THE ONLY PLACE COLOUR APPEARS. The gem colour is deliberately NOT a UI token - recorded here as brand fact, never painted onto the page. Every text tone contrast-checked against #080c12 (WCAG relative luminance). ========================================================================= */ @import url("fonts/fonts.css"); :root{ --bg:#080c12; --bg-raise:#0e141c; --bg-panel:#121a23; --line:#1e2a36; --line-strong:#2b3a4a; --ink:#eef4f8; /* headings 17.67:1 */ --ink-2:#dce5ed; /* body — raised toward white (F500 brief 2026-08-03) */ --ink-3:#abbac7; /* secondary body / lede — raised for readability */ --ink-4:#7a95a6; /* accent / eyebrow 6.23:1 */ --ink-dim:#697a88; /* LARGE TEXT ONLY 4.29:1 */ /* KEVIN 2026-08-02: "I just don't want the emerald pasted all over the website. Clean, professional, top-notch." So the UI is MONOCHROME STEEL and the EMBLEM is the only place colour appears on the page. Recorded here as brand fact so the palette is never re-derived — deliberately UNUSED in the interface. Emerald #30b090 / gold #705030 live on the mark, nowhere else. */ --r-sm:4px; --r:8px; --r-lg:16px; --r-xl:24px; --r-pill:999px; --measure:min(68ch,100%); --pad-x:clamp(20px,5vw,40px); --sec-y:clamp(40px,6vw,84px); /* halved per F500 brief 2026-08-03 — tighter vertical rhythm */ --sans:'Archivo',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; --mono:ui-monospace,SFMono-Regular,Menlo,Monaco,"Cascadia Mono",monospace; } *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%} body{ margin:0;background:var(--bg);color:var(--ink-2); font-family:var(--sans);font-size:clamp(16px,1.05vw,17.5px);line-height:1.65; -webkit-font-smoothing:antialiased;overflow-x:hidden; } h1,h2,h3{color:var(--ink);line-height:1.06;letter-spacing:-0.022em;margin:0;font-weight:600} h1,h2{font-weight:700} h1{font-size:clamp(2.6rem,6.2vw,4.6rem);letter-spacing:-0.037em} h2{font-size:clamp(1.9rem,3.6vw,2.9rem);letter-spacing:-0.028em} h3{font-size:1.075rem;letter-spacing:-0.01em} p{margin:0} a{color:inherit} .wrap{width:100%;max-width:1200px;margin-inline:auto;padding-inline:var(--pad-x)} .section{padding-block:var(--sec-y)} .eyebrow{ font:600 0.7rem/1 var(--mono);letter-spacing:0.16em;text-transform:uppercase; color:var(--ink-4);margin-bottom:20px;display:block; } .lede{font-size:clamp(1.05rem,1.7vw,1.3rem);color:var(--ink-3);max-width:var(--measure)} .rule{height:1px;background:var(--line);border:0;margin:0} /* ---------- nav ---------- */ header{ position:sticky;top:0;z-index:50;background:rgba(8,12,18,.84); backdrop-filter:blur(12px);border-bottom:1px solid var(--line); } .nav{display:flex;align-items:center;gap:32px;height:68px} .logo{ font:700 1.02rem/1 var(--sans);letter-spacing:.14em;color:var(--ink); text-decoration:none;white-space:nowrap; display:inline-flex;align-items:center;gap:12px; } .logo img{display:block;flex:none} .logo span{color:var(--ink-4);font-weight:500} @media(max-width:520px){.logo span{display:none}} .nav-links{display:flex;gap:30px;margin-left:auto;align-items:center} .nav-links a{ color:var(--ink-3);text-decoration:none;font-size:.925rem; transition:color .15s ease; } .nav-links a:hover{color:var(--ink)} @media(max-width:760px){.nav-links a:not(.btn){display:none}} /* ---------- buttons: ONE primary per section ---------- */ .btn{ display:inline-flex;align-items:center;gap:9px; padding:13px 24px;border-radius:var(--r-pill); font-size:.94rem;font-weight:600;text-decoration:none; border:1px solid transparent;transition:.16s ease;white-space:nowrap; } .btn-primary{background:var(--ink);color:#080c12} .btn-primary:hover{background:#fff;transform:translateY(-1px)} .btn-ghost{border-color:var(--line-strong);color:var(--ink-2)} .btn-ghost:hover{border-color:var(--ink-4);color:var(--ink)} .btn-sm{padding:9px 18px;font-size:.875rem} /* ---------- hero: one message, one CTA ---------- */ .hero{padding-block:clamp(84px,13vw,176px) clamp(64px,9vw,116px);position:relative;overflow:hidden} .hero::after{ content:"";position:absolute;inset:auto 0 -55% 0;height:80%;pointer-events:none; background:radial-gradient(60% 52% at 50% 0,rgba(122,149,166,.10),transparent 72%); } .hero-grid{ position:relative;z-index:1;display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); gap:clamp(40px,6vw,88px);align-items:center; } .hero-inner{min-width:0} .hero h1{max-width:16ch} /* the emblem carries the page. Steel+gold knot, emerald at centre — the glow behind it is sampled from the gem so the light source reads as the mark's own. */ .hero-mark{position:relative;display:grid;place-items:center;min-width:0} .hero-mark::before{ content:"";position:absolute;width:118%;aspect-ratio:1;border-radius:50%; background:radial-gradient(circle at 50% 46%,rgba(140,157,171,.10),transparent 62%); filter:blur(14px); } .hero-mark img{ position:relative;width:100%;max-width:520px;height:auto; filter:drop-shadow(0 26px 60px rgba(0,0,0,.65)); transition:opacity .6s ease; } /* LIVE 3D: 20k instanced tetrahedra reforming the X-mark, cyan gem at centre, gold-gradient bands, bloom. Sits UNDER the fallback until it has actually rendered — the image only fades out once WebGL is proven up, so a machine without it never sees an empty box. */ .logo-3d{ position:absolute;inset:-26% -20%;opacity:0; transition:opacity 1.1s ease;pointer-events:none; /* The bloom composer renders an OPAQUE black backing even though the renderer is alpha:true — postprocessing passes don't preserve alpha. `screen` blend makes those black pixels vanish against the dark page and lets the glow add, which is what we want anyway. The mask feathers the canvas edge so there is no visible rectangle. Fixed in CSS, NOT in nexus_logo_render.js — the node's Box B UI imports that same module and must not be disturbed. */ } .logo-3d canvas{width:100%!important;height:100%!important;display:block} .hero-mark.live .logo-3d{opacity:1} .hero-mark.live img{opacity:0} @media(max-width:900px){ .hero-grid{grid-template-columns:1fr;gap:52px} .hero-mark{order:-1;justify-items:start} .hero-mark img{max-width:300px} } .hero .lede{margin-top:28px;max-width:56ch} .hero-cta{display:flex;gap:14px;flex-wrap:wrap;margin-top:44px} .hero-note{ margin-top:26px;font:500 .82rem/1.5 var(--mono);color:var(--ink-dim); letter-spacing:.02em; } /* ---------- proof strip ---------- */ .strip{border-block:1px solid var(--line);background:var(--bg-raise)} .strip-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--line)} .stat{background:var(--bg-raise);padding:34px var(--pad-x)} .stat .n{ font:600 clamp(1.7rem,2.6vw,2.15rem)/1 var(--sans); color:var(--ink);letter-spacing:-.03em;display:block; } .stat .k{ margin-top:9px;font:500 .74rem/1.4 var(--mono);letter-spacing:.11em; text-transform:uppercase;color:var(--ink-dim); } @media(max-width:860px){.strip-grid{grid-template-columns:repeat(2,minmax(0,1fr))}} /* ---------- generic section head ---------- */ .head{max-width:var(--measure);margin-bottom:clamp(44px,6vw,72px)} .head p{margin-top:20px;color:var(--ink-3);font-size:clamp(1rem,1.4vw,1.12rem)} /* ---------- cards ---------- */ .grid-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px} .grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px} @media(max-width:940px){.grid-3{grid-template-columns:1fr}.grid-2{grid-template-columns:1fr}} .card{ background:var(--bg-panel);border:1px solid var(--line);border-radius:var(--r-lg); padding:clamp(26px,3vw,34px);transition:border-color .18s ease,transform .18s ease; } .card:hover{border-color:var(--line-strong);transform:translateY(-2px)} .card h3{margin-bottom:12px} .card p{color:var(--ink-3);font-size:.965rem} .idx{ font:600 .72rem/1 var(--mono);letter-spacing:.14em;color:var(--ink-4); display:block;margin-bottom:18px; } /* ---------- pipeline ---------- */ .steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden} .step{padding:clamp(26px,3vw,34px);border-right:1px solid var(--line);background:var(--bg-panel)} .step:last-child{border-right:0} .step .idx{color:var(--ink-4)} .step h3{font-size:1rem;margin-bottom:10px} .step p{font-size:.925rem;color:var(--ink-3)} @media(max-width:1000px){ .steps{grid-template-columns:repeat(2,minmax(0,1fr))} .step{border-bottom:1px solid var(--line)} .step:nth-child(2n){border-right:0} .step:nth-last-child(-n+2){border-bottom:0} } @media(max-width:620px){ .steps{grid-template-columns:1fr} .step{border-right:0;border-bottom:1px solid var(--line)} .step:last-child{border-bottom:0} } /* ---------- the boundary section (trust through limits) ---------- */ .boundary{background:var(--bg-raise);border-block:1px solid var(--line)} .bound-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(36px,6vw,80px);align-items:start} @media(max-width:940px){.bound-grid{grid-template-columns:1fr}} .list{list-style:none;margin:0;padding:0;display:grid;gap:2px} .list li{ display:flex;gap:14px;align-items:flex-start;padding:15px 0; border-bottom:1px solid var(--line);color:var(--ink-3);font-size:.965rem; } .list li:last-child{border-bottom:0} .mark{ flex:none;width:20px;height:20px;border-radius:var(--r-pill);margin-top:2px; display:grid;place-items:center;font:700 .7rem/1 var(--sans); } .mark-no{background:rgba(140,157,171,.06);color:var(--ink-dim);border:1px solid rgba(140,157,171,.18)} .mark-yes{background:rgba(140,157,171,.10);color:var(--ink-3);border:1px solid rgba(140,157,171,.26)} /* ---------- spec table ---------- */ .spec-scroll{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r-lg)} table{border-collapse:collapse;width:100%;min-width:560px;font-size:.94rem} th,td{text-align:left;padding:16px 22px;border-bottom:1px solid var(--line)} th{ font:600 .72rem/1 var(--mono);letter-spacing:.11em;text-transform:uppercase; color:var(--ink-dim);background:var(--bg-raise); } td{color:var(--ink-3)} td:first-child{color:var(--ink-2);font-weight:500} tbody tr:last-child td{border-bottom:0} /* ---------- close ---------- */ .close{text-align:center} .close h2{max-width:20ch;margin-inline:auto} .close .lede{margin:22px auto 0} .close .btn{margin-top:40px} footer{border-top:1px solid var(--line);padding-block:44px;color:var(--ink-dim);font-size:.885rem} .foot{display:flex;gap:24px;align-items:center;flex-wrap:wrap} .foot a{color:var(--ink-dim);text-decoration:none} .foot a:hover{color:var(--ink-3)} .foot .sep{margin-left:auto} @media(prefers-reduced-motion:reduce){ *{animation:none!important;transition:none!important} .card:hover,.btn-primary:hover{transform:none} } /* ---------- multi-page additions (Kevin 2026-08-02: "way too much information per page. This needs to be broken up more.") ---------- */ .nav-links a.here{color:var(--ink)} /* Full-bleed contextual hero (Kevin 2026-08-03: real scanner-in-venue shots as background; monochrome preserved — NO accent colour per 08-02 rule). The image slot takes MENDEL's product-placement shots; rig-shop-close.jpg is a placeholder. */ .pagehead{ position:relative;isolation:isolate;overflow:hidden; min-height:clamp(440px,64vh,660px);display:flex;align-items:flex-end; padding-block:0;background:var(--bg-raise); } .pagehead-bg{ position:absolute;inset:0;z-index:-2;background-size:cover;background-position:center 42%; transform:scale(1.03);filter:saturate(.85) contrast(1.02); } .pagehead::after{ content:"";position:absolute;inset:0;z-index:-1;background: linear-gradient(90deg,rgba(8,12,18,.95),rgba(8,12,18,.74) 44%,rgba(8,12,18,.30) 100%), linear-gradient(0deg,rgba(8,12,18,.97),rgba(8,12,18,.10) 62%); } .pagehead .wrap{padding-block:clamp(46px,6vw,74px);width:100%} .pagehead .eyebrow{color:var(--ink-3)} .pagetitle{font-size:clamp(2.6rem,5.6vw,4.4rem);letter-spacing:-.037em;max-width:20ch;font-weight:700} .pagehead-pills{display:flex;flex-wrap:wrap;gap:10px;margin-top:28px} .pagehead-pills span{ font:600 .7rem/1 var(--mono);letter-spacing:.08em;text-transform:uppercase; color:var(--ink-2);padding:9px 14px;border:1px solid var(--line-strong); border-radius:var(--r-pill);background:rgba(8,12,18,.5);backdrop-filter:blur(4px); } /* Comparison table — NEXUS vs holograms / QR / graded slabs. Monochrome; the NEXUS column is emphasised by weight + a steel frame, never colour. */ .compare-wrap{margin-top:30px;overflow-x:auto} .compare{width:100%;border-collapse:collapse;font-size:.95rem;min-width:660px} .compare th,.compare td{padding:15px 18px;border-bottom:1px solid var(--line)} .compare thead th{ font:600 .7rem/1.3 var(--mono);letter-spacing:.1em;text-transform:uppercase; color:var(--ink-3);text-align:center;vertical-align:bottom; } .compare thead th:first-child{text-align:left} .compare tbody th{font-weight:500;color:var(--ink-2);text-align:left;max-width:34ch} .compare tbody td{text-align:center} .compare .c-nexus{background:var(--bg-raise)} .compare thead th.c-nexus{color:var(--ink);border-bottom:2px solid var(--line-strong);font-weight:700} .compare tbody td.c-nexus{border-inline:1px solid var(--line-strong)} .compare tbody tr:last-child td.c-nexus{border-bottom:1px solid var(--line-strong)} .c-y{color:var(--ink);font-weight:700;font-size:1.05rem} .c-n{color:var(--ink-dim)} .c-p{font:500 .66rem/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)} /* Homepage (F500 brief 2026-08-03): the record shown huge + product-named cards. */ .dapr-hero{margin-top:32px} .dapr-hero img{ width:100%;max-width:460px;height:auto;display:block;margin-inline:auto; border-radius:14px;box-shadow:0 24px 70px rgba(0,0,0,.45); } .dapr-hero figcaption{ margin-top:16px;font:500 .7rem/1.5 var(--mono);letter-spacing:.08em; text-transform:uppercase;color:var(--ink-3); } .caps{margin-top:30px;display:grid;grid-template-columns:repeat(4,1fr);gap:16px} @media(max-width:960px){.caps{grid-template-columns:repeat(2,1fr)}} @media(max-width:540px){.caps{grid-template-columns:1fr}} .cap{ display:flex;flex-direction:column;text-decoration:none;color:inherit; border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden; background:var(--bg-raise);transition:border-color .16s ease,transform .16s ease; } .cap:hover{border-color:var(--line-strong);transform:translateY(-3px)} .cap-img{display:block;aspect-ratio:4/3;background-size:cover;background-position:center 40%} .cap-b{padding:18px 18px 22px} .cap-n{display:block;font:700 1.05rem/1 var(--sans);color:var(--ink);letter-spacing:-.01em} .cap-p{display:block;margin-top:8px;color:var(--ink-3);font-size:.9rem;line-height:1.5} /* Contact form (F500 brief 2026-08-03) — real form on the light .invert section. */ .contact-grid{display:grid;grid-template-columns:1.25fr 1fr;gap:44px;align-items:start;margin-top:8px} @media(max-width:820px){.contact-grid{grid-template-columns:1fr;gap:30px}} .contact-form .field{margin-bottom:18px} .field-row{display:grid;grid-template-columns:1fr 1fr;gap:16px} @media(max-width:520px){.field-row{grid-template-columns:1fr}} .contact-form label{display:block;font:600 .7rem/1 var(--mono);letter-spacing:.1em; text-transform:uppercase;color:#5c6b78;margin-bottom:8px} .contact-form input,.contact-form select,.contact-form textarea{ width:100%;font:inherit;font-size:1rem;color:#141a24;background:#fff; border:1px solid #ccd5de;border-radius:var(--r);padding:12px 14px; transition:border-color .16s ease,box-shadow .16s ease} .contact-form input:focus,.contact-form select:focus,.contact-form textarea:focus{ outline:none;border-color:#7c8b99;box-shadow:0 0 0 3px rgba(124,139,153,.18)} .contact-form textarea{resize:vertical;min-height:110px} .contact-form button{margin-top:10px} .contact-aside h3{font-size:1.15rem} .contact-aside p{margin-top:14px;color:#4a5763;line-height:1.6} .contact-note{font-weight:700;color:#141a24} /* Optical-AI recognition section (F500 AI/ML-tech content, 2026-08-03). */ .sci-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin-top:36px} @media(max-width:760px){.sci-steps{grid-template-columns:1fr;gap:22px}} .sci-step{border-top:1px solid var(--line-strong);padding-top:18px} .sci-n{font:600 .72rem/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-4)} .sci-step h3{margin-top:12px;font-size:1.12rem} .sci-step p{margin-top:10px;color:var(--ink-3);line-height:1.55} /* Honest proof band (F500 last-mile 2026-08-03): IP + in-house + tech, no fake traction. */ .proof-row{display:grid;grid-template-columns:repeat(3,1fr);gap:30px; border-top:1px solid var(--line);padding-top:28px} @media(max-width:760px){.proof-row{grid-template-columns:1fr;gap:22px}} .proof-item{display:flex;flex-direction:column;gap:9px} .proof-k{font:600 .72rem/1 var(--mono);letter-spacing:.13em;text-transform:uppercase;color:var(--ink)} .proof-v{color:var(--ink-3);font-size:.92rem;line-height:1.52} .shots{display:grid;grid-template-columns:repeat(2,1fr);gap:26px;margin-top:30px} @media(max-width:820px){.shots{grid-template-columns:1fr;gap:22px}} .shot img{width:100%;height:auto;display:block;border:1px solid var(--line-strong); border-radius:12px;box-shadow:0 18px 50px rgba(0,0,0,.42)} .shot figcaption{margin-top:14px;font:500 .78rem/1.5 var(--mono);letter-spacing:.03em;color:var(--ink-3)} .proof-row-4{grid-template-columns:repeat(4,1fr)} @media(max-width:900px){.proof-row-4{grid-template-columns:repeat(2,1fr)}} @media(max-width:520px){.proof-row-4{grid-template-columns:1fr}} .pt0{padding-top:0} .card-link{display:block;text-decoration:none;color:inherit} .card-link .more{ display:inline-block;margin-top:18px;font-size:.9rem;font-weight:600;color:var(--ink-4); transition:color .16s ease,transform .16s ease; } .card-link:hover .more{color:var(--ink);transform:translateX(3px)} .inline-link{color:var(--ink-2);text-decoration:underline;text-underline-offset:3px} .inline-link:hover{color:var(--ink)} .list li strong{color:var(--ink-2)} /* ---------- HOMEPAGE = SPLASH ONLY (Kevin 2026-08-02) ---------- "our homepage should literally just be the 3D rendering with the Nexus tagline and the VIN of collectibles. That's it." ALIGNMENT (Kevin: "they're not lined up"): the still and the live render used to be positioned by two unrelated rules, so the hand-off jumped. They now share ONE square container, .splash-mark — same centre, same box, both filling it. The still is scaled to the knot's apparent size inside the render so the swap is a cross-fade in place rather than a jump. */ body.splash{height:100vh;overflow:hidden;position:relative} .splash-mark{ position:fixed;left:50%;top:calc(50% - 7vh);translate:-50% -50%; width:min(62vh,58vw);aspect-ratio:1;z-index:0;pointer-events:none; } .splash-mark{ } .splash-3d{ /* FIXED + FULL VIEWPORT — NOT `absolute;inset:0` inside .splash-mark. THE SECOND CROP BUG, same family as the circle. The canvas used to be sized to .splash-mark (a min(62vh,58vw) SQUARE), so every particle that blasted outward was clipped dead at that box: measured on a 1440x900 capture, x=430-440 was pure background (max +0 over the page black) and x=440-450 jumped straight to max +669. Zero to full brightness in one 10px step — a hard rectangular cut, not a fade. Kevin caught the circular version of this ("why is it capped to that circle?"); this was the same mistake wearing a square. THE CANVAS IS THE STAGE, NOT THE SUBJECT. It now spans the whole viewport and the LOGO's size is set in the render (the `fit` option = the fraction of the smaller viewport axis the plane spans), so the blast has somewhere to go and particles leave at the screen edge instead of hitting an invisible wall. ⚠ `position:fixed` ALONE DID NOT ACHIEVE THAT, and I shipped it believing it had. While this div was nested inside .splash-mark — which carries `translate:-50% -50%` — the transform made that ancestor the CONTAINING BLOCK for fixed descendants, so the canvas stayed boxed at the mark's size. DOM probe on a 1416x808 viewport with `position:fixed` already in place: canvas measured 501x501, not 1416x808. The mark had merely been rendered smaller, so a mid-cycle screenshot looked clear of the wall while the full blast was still being cut in half. THE REAL FIX IS STRUCTURAL: #logo-3d is now a DIRECT CHILD OF . Keep it there — no transformed ancestor, ever, or the box silently comes back. */ position:fixed;inset:0;opacity:0;transition:opacity .9s ease; } .splash-3d canvas{width:100%!important;height:100%!important;display:block} /* 0.46 = the knot's share of the render's frame, so the still sits at the same apparent size as the reformed mark and the cross-fade holds still. */ /* The cloud IS the logo now, so there is nothing to register and no cross-fade to time. The flat art is purely the pre-WebGL / reduced-motion fallback: it shows until the particle cloud reports itself mounted, then steps aside. */ .splash-still{ position:absolute;left:50%;top:50%;translate:-50% -50%; width:62%;height:auto;opacity:.95;transition:opacity .7s ease; filter:drop-shadow(0 18px 50px rgba(0,0,0,.75)); } body.splash.live .splash-3d{opacity:1} body.splash.live .splash-still{opacity:0;visibility:hidden} .splash-center{ position:fixed;inset:0;z-index:2;display:flex;flex-direction:column; align-items:center;justify-content:flex-end; padding-bottom:clamp(48px,9vh,110px);pointer-events:none;text-align:center; } .wordmark{margin:0;line-height:0;display:block} .wordmark img{ display:block;width:min(46vw,560px);height:auto; filter:drop-shadow(0 10px 34px rgba(0,0,0,.85)); } .tagline{ margin:clamp(12px,1.8vh,22px) 0 0;color:var(--ink-3); font:500 clamp(.7rem,1.25vw,.9rem)/1.4 var(--mono); letter-spacing:.34em;text-transform:uppercase;text-indent:.34em; } .splash-nav{ position:fixed;top:0;left:0;right:0;z-index:3;isolation:isolate; display:flex;gap:clamp(18px,3vw,34px);align-items:center;justify-content:center; height:72px;padding-inline:var(--pad-x); } /* at peak blast the particle field washes over the nav; a soft scrim between the render and the links keeps it readable at every point in the cycle */ .splash-nav::before{ content:"";position:absolute;inset:0 0 auto 0;height:150px;z-index:-1;pointer-events:none; background:linear-gradient(to bottom,rgba(8,12,18,.88) 0%,rgba(8,12,18,.5) 48%,transparent 100%); } .splash-nav a{ color:var(--ink-3);text-decoration:none;font-size:.85rem;letter-spacing:.04em; transition:color .16s ease; } .splash-nav a:hover{color:var(--ink)} @media(max-width:640px){ /* .splash-mark no longer sizes the render — the canvas is full-viewport and the mark's size is the `fit` option in nexus_logo_particles.js, which raises itself on portrait to the same 74vw this rule used to set. Kept as the layout anchor for the no-WebGL fallback only. */ .splash-mark{width:74vw;top:calc(50% - 9vh)} .wordmark img{width:min(74vw,380px)} .splash-nav{gap:14px;height:auto;padding-top:14px;flex-wrap:wrap} .splash-nav a{font-size:.78rem} } /* --------------------------------------------------------------------------- DIAGRAMS. Every interior page had exactly ONE image — the 30px logo in the header — so the pages read as text in boxes. These carry the visual weight, as inline SVG: no asset to request, no font to load, no external dependency, and it stays sharp at any size. MONOCHROME ONLY — the palette rule is that the mark is the sole place colour appears on the page. Wide diagrams scroll INSIDE their own container so the page body never scrolls sideways on a phone. --------------------------------------------- */ .diagram-title{margin:14px 0 0} .diagram{ margin:clamp(28px,4vw,44px) 0 0;padding:clamp(20px,3vw,34px) 0 0; border-top:1px solid var(--line);overflow-x:auto; } .diagram svg{display:block;width:100%;min-width:620px;height:auto} .diagram rect{fill:var(--bg-panel);stroke:var(--line-strong);stroke-width:1} .diagram .d-lab{ fill:var(--ink-2);font-size:12px;letter-spacing:.04em;text-anchor:middle; font-family:inherit; } .diagram .d-own{ fill:var(--ink);font-size:13px;letter-spacing:.09em;text-anchor:middle; text-transform:uppercase;font-family:inherit; } .diagram .d-cap{ fill:var(--ink-dim);font-size:11px;letter-spacing:.12em; text-transform:uppercase;font-family:inherit; } .diagram figcaption{ margin:22px 0 0;color:var(--ink-3);font-size:.94rem;max-width:var(--measure); } /* =========================================================================== FORTUNE-500 DEEP-TECH LAYOUT SYSTEM Kevin 2026-08-02: "model this site as a Fortune 500 deep tech AI infrastructure powerhouse." Built from a screenshot survey of 11 comparable sites actually captured and viewed (Anduril, Palantir, Skydio, Applied Intuition, Anthropic, Figure, Groq, Mistral, Physical Intelligence, Shield AI, Waymo). Three layout facts came out of that survey and this block implements all three: 1. EVERY dark site in the set ALTERNATES light and dark. Skydio: dark hero -> white -> dark. Anthropic: cream -> black -> cream. Groq: light with a dark panel. Ours was #080c12 top to bottom on every page, which is why it read FLAT instead of DEEP. Depth on a dark site comes from the CUTS, not from the dark. 2. Media runs EDGE TO EDGE. 7 of 11 open full-bleed with no container. A max-width wrapper around everything is the tell of a smaller company. 3. The GIANT NUMBER is the most repeated credibility device in the set (Skydio 5,077,413 live-tickered; Waymo "over 10X safer"). Own section, oversized, small caption under it. ======================================================================== */ :root{ /* The light half of the alternation. Cool paper, NOT pure white — pure white against #080c12 is a harsh cut, and every site in the survey that goes light goes slightly off (Anthropic cream, Mistral bone). Stays inside the monochrome-steel rule: this is a NEUTRAL, not a colour. */ --paper:#e9edf0; --paper-2:#dde3e8; --ink-inv:#0a0f14; /* headings on paper 16.4:1 */ --ink-inv-2:#2c3a46; /* body on paper 9.2:1 */ --ink-inv-3:#5a6b7a; /* secondary on paper 4.9:1 */ } /* ---- the cut: a light section inverts the whole token set --------------- Implemented by REDEFINING the ink variables inside the section rather than restyling each child. Every existing component (.card, .list, .eyebrow, .lede, .btn) then inverts for free and can never drift out of sync with its dark counterpart. One rule, not thirty. */ .section.invert{ background:var(--paper); --ink:var(--ink-inv); --ink-2:var(--ink-inv-2); --ink-3:var(--ink-inv-3); --ink-4:#41535f; --ink-dim:#54626e; /* was #63737f = 4.16:1 on paper: FAILED AA. Now 5.31:1 */ --line:#c6d0d8; --line-strong:#a9b7c2; --bg-panel:#dfe5ea; --bg-raise:var(--paper-2); color:var(--ink-inv-2); } .section.invert .btn-primary{background:var(--ink-inv);color:var(--paper)} .section.invert .btn-primary:hover{background:#000} /* the seam. A hairline at the boundary reads as intent; without it the two blocks look like a rendering accident. */ .section.invert{border-block:1px solid #cfd8de} /* ---- full-bleed band: breaks OUT of .wrap, touches all four edges ------- The survey's most consistent structural move. `.band` spans the viewport; `.band-inner` re-applies the reading width for any text sitting on top. */ .band{ position:relative;width:100%;margin:0;padding:0; min-height:clamp(180px,26vh,320px); display:flex;align-items:flex-end; overflow:hidden;background:var(--bg-raise); border-block:1px solid var(--line); } .band-inner{ position:relative;z-index:2;width:100%;max-width:1200px; margin-inline:auto;padding:clamp(28px,5vw,56px) var(--pad-x); } /* Headline anchored BOTTOM-LEFT over the media — Applied Intuition, Figure and Mistral all do exactly this, with the scroll cue on the opposite side. */ .band h2{max-width:16ch} .band .eyebrow{margin-bottom:14px} /* the field the band sits on: a wide, very low-contrast wash so the band has depth without importing a photograph we do not own. */ .band::before{ content:"";position:absolute;inset:0;pointer-events:none; background: radial-gradient(120% 140% at 12% 108%,rgba(140,157,171,.16),transparent 62%), radial-gradient(90% 120% at 88% -20%,rgba(140,157,171,.10),transparent 60%); } /* ---- the giant number --------------------------------------------------- Skydio's device, measured off the capture: number at ~7x body size, a small mono line ABOVE it, a plain caption BELOW. The number is the hero of its own section and nothing competes with it. */ .figure-huge{display:block} .figure-huge .stamp{ font:500 .72rem/1 var(--mono);letter-spacing:.16em;text-transform:uppercase; color:var(--ink-dim);display:block;margin-bottom:18px; } .figure-huge .n{ display:block;font-weight:600;letter-spacing:-.045em;line-height:.92; font-size:clamp(3.4rem,11vw,8.5rem);color:var(--ink); font-variant-numeric:tabular-nums; } .figure-huge .k{ display:block;margin-top:18px;font-size:clamp(1rem,1.6vw,1.22rem); color:var(--ink-3);max-width:38ch; } .figure-split{ display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr); gap:clamp(32px,6vw,80px);align-items:end; } @media(max-width:860px){.figure-split{grid-template-columns:1fr;gap:36px}} /* the three catalogs, as a spec rail beside the headline number */ .spec-rail{display:grid;gap:0;border-top:1px solid var(--line)} .spec-rail div{ display:flex;justify-content:space-between;gap:20px;align-items:baseline; padding:14px 0;border-bottom:1px solid var(--line); } .spec-rail dt,.spec-rail .t{color:var(--ink-3);font-size:.95rem} .spec-rail .v{ color:var(--ink);font:600 1.05rem/1 var(--mono); font-variant-numeric:tabular-nums;letter-spacing:-.01em; } /* ---- band carrying the machine itself ------------------------------------- Kevin supplied a render of OUR unit (2026-08-02) to replace the gradient placeholder. IT IS A RENDER, NOT A PHOTOGRAPH, and it is used the way every hardware company in the survey uses renders — as the product, on our own brand, never dressed up as a deployment photo. The earlier candidate was rejected because it carried ANOTHER COMPANY'S NAME (AURORA LABS etched on the rail) and generated text that did not resolve into words; this one is ours, the cards and lightbox and arm are the real layout, and nothing on it claims to be a photo of a shipped unit. The white studio background was knocked out by flooding from the BORDER, so the white lightbox inside the chamber survived — a global white-to-alpha threshold would have punched holes straight through the product. */ .band-rig{ min-height:clamp(300px,44vh,520px); align-items:stretch; background: radial-gradient(70% 80% at 68% 62%,rgba(140,157,171,.16),transparent 62%), var(--bg-raise); } .band-rig .band-inner{ display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:clamp(20px,4vw,56px);align-items:end; padding-block:clamp(32px,5vw,56px); } /* HEADLINE ANCHORED TO THE BOTTOM EDGE AND BIG. The first pass stranded a small headline in the vertical middle of a 750px band with dead space all round it — the opposite of the survey composition, where the type is large and sits ON the bottom edge (Applied Intuition, Figure, Mistral). */ .band-rig .rig-copy{align-self:end;padding-bottom:6px} .band-rig h2{max-width:12ch;font-size:clamp(2rem,4.2vw,3.4rem)} .band-rig figure{margin:0;justify-self:end;align-self:end;width:100%;position:relative} .band-rig img{ display:block;width:100%;max-width:520px;height:auto;margin-inline:auto; filter:drop-shadow(0 26px 34px rgba(0,0,0,.85)); } /* GROUND IT. Without a contact shadow the unit reads as pasted onto a gradient, because it is a knocked-out PNG on a flat field. This is the ellipse the eye needs to accept it is sitting on something. */ .band-rig figure::after{ content:"";position:absolute;left:50%;bottom:-6px;translate:-50% 0; width:min(78%,430px);height:34px;border-radius:50%; background:radial-gradient(50% 50% at 50% 50%,rgba(0,0,0,.75),transparent 72%); filter:blur(9px);pointer-events:none; } .rig-note{ margin-top:16px;font:500 .7rem/1.5 var(--mono);letter-spacing:.1em; text-transform:uppercase;color:var(--ink-dim); } @media(max-width:820px){ .band-rig .band-inner{grid-template-columns:1fr;gap:24px;align-items:start} .band-rig .rig-copy{align-self:start} .band-rig figure{justify-self:center} .band-rig img{max-width:340px} } } /* ---- photographic band: the unit ON A FLOOR, not on a seamless ------------- This is the deployment proof and it is the strongest image on the site. The show-floor clutter around the cabinet is the POINT — cards, people, the flyer — so the crop keeps it. Cropping tight to the cabinet would turn a deployment photograph back into a product shot, and the render already does that job better. The overlay is a LEFT-WEIGHTED scrim, not a flat darkening: the headline sits bottom-left (the composition every full-bleed site in the survey uses), so the image only gets darkened where type actually lands and the right-hand two-thirds of the photo stays clean. */ .band-photo{ min-height:clamp(340px,52vh,560px); background:#05080c; border-block:1px solid var(--line); } .band-photo picture,.band-photo img{ position:absolute;inset:0;width:100%;height:100%; object-fit:cover;object-position:58% 46%;z-index:0; } .band-photo::before{ content:"";position:absolute;inset:0;z-index:1;pointer-events:none; background: linear-gradient(to right,rgba(4,7,11,.92) 0%,rgba(4,7,11,.72) 34%,rgba(4,7,11,.20) 62%,rgba(4,7,11,.06) 100%), linear-gradient(to top,rgba(4,7,11,.75) 0%,transparent 46%); } .band-photo .band-inner{max-width:1200px} .band-photo h2{max-width:15ch;text-shadow:0 2px 24px rgba(0,0,0,.6)} .band-photo .rig-note{color:#9fb0bd} @media(max-width:820px){ .band-photo img{object-position:52% 44%} .band-photo::before{ background:linear-gradient(to top,rgba(4,7,11,.92) 0%,rgba(4,7,11,.55) 42%,rgba(4,7,11,.15) 100%); } } /* ---- detail plate: the mechanism, at NATIVE resolution -------------------- Kevin's cropped interior shot is 424x478. That is the hard ceiling: at 560px it is already soft, at 900 it mushes, and full-bleed would be a 4.25x upscale. So it is used as a DETAIL beside the text at its native size and never stretched — a sharp small image outranks a big blurry one every time. The crop is also how the foreign branding was removed: the rail is simply not in frame any more, which beats any patch I could clone in. */ .detail{ display:grid;grid-template-columns:minmax(0,1fr) auto; gap:clamp(28px,5vw,72px);align-items:center; } .detail figure{margin:0;position:relative} .detail img{ display:block;width:424px;max-width:100%;height:auto;border-radius:var(--r); border:1px solid var(--line-strong); } .detail figcaption{ margin-top:14px;font:500 .7rem/1.5 var(--mono);letter-spacing:.1em; text-transform:uppercase;color:var(--ink-dim); } .detail h2{max-width:14ch} .detail .lede{margin-top:20px} @media(max-width:820px){ .detail{grid-template-columns:1fr;gap:30px} .detail figure{order:-1} } /* ---- SCENE: the unit in a room, full-bleed ------------------------------- Kevin 2026-08-02: "make a scene with the scanner as if it was in a card shop or on this table, and just make the scene BIGGER." The earlier treatment knocked the unit out and floated it on a gradient — a product shot. This is the opposite and it is what every site in the survey actually does: the machine IN a place, edge to edge, with the room around it carrying the weight. The render's own bench and background are kept for exactly that reason; cutting them out was throwing away the scene. Type sits bottom-left over a left-weighted scrim so the image stays readable on the right two-thirds instead of being flatly darkened. */ .scene{ position:relative;width:100%;overflow:hidden; min-height:clamp(420px,74vh,760px); display:flex;align-items:flex-end; background:#0a0e13;border-block:1px solid var(--line); } .scene img{ position:absolute;inset:0;width:100%;height:100%; object-fit:cover;object-position:50% 42%;z-index:0; } .scene::before{ content:"";position:absolute;inset:0;z-index:1;pointer-events:none; /* FIRST PASS BURIED THE IMAGE. Two stacked gradients at .94 and .82 multiplied into near-black and the render was invisible. A scrim exists to make type legible, not to hide the photograph -- keep it shallow and let it clear early. Measured target: the unit stays clearly visible, type stays readable. */ background: linear-gradient(100deg,rgba(6,9,13,.82) 0%,rgba(6,9,13,.46) 26%,rgba(6,9,13,.08) 52%,transparent 78%), linear-gradient(to top,rgba(6,9,13,.62) 0%,transparent 34%); } .scene-inner{ position:relative;z-index:2;width:100%;max-width:1200px; margin-inline:auto;padding:clamp(34px,6vw,72px) var(--pad-x); } .scene h1,.scene h2{max-width:15ch;text-shadow:0 2px 30px rgba(0,0,0,.7)} .scene .lede{margin-top:20px;max-width:46ch;color:#c4d1dc} .scene .eyebrow{color:#93a6b4} .scene-note{ margin-top:22px;font:500 .7rem/1.5 var(--mono);letter-spacing:.11em; text-transform:uppercase;color:#7f909d; } @media(max-width:820px){ .scene{min-height:clamp(360px,60vh,520px)} .scene img{object-position:56% 44%} .scene::before{ background:linear-gradient(to top,rgba(6,9,13,.86) 0%,rgba(6,9,13,.40) 46%,transparent 92%); } } /* ---- a CONTENT section sitting on the shop photograph -------------------- Kevin 2026-08-03: the shop shot becomes the BACKGROUND of the second section of `system`, not another standalone band. Different job from `.scene`: there the picture IS the content, here the picture is the room the argument happens in, so the scrim is heavier and even — body copy has to stay readable across the full width, not just bottom-left. */ .section.on-photo{ position:relative;isolation:isolate; background:#070a0e;border-block:1px solid var(--line); } .section.on-photo > img{ position:absolute;inset:0;width:100%;height:100%; object-fit:cover;object-position:50% 38%;z-index:-2; } .section.on-photo::before{ content:"";position:absolute;inset:0;z-index:-1;pointer-events:none; /* SECOND OVERPAINT IN ONE SESSION. .93/.86/.72/.60 PLUS a vertical pair multiplied to near-opaque and the shop vanished again. The fix is not a flat film: keep it heaviest ONLY under the headline (left), let it clear hard across the middle where the photo has to breathe, and lean on text-shadow for the body copy instead of more paint. */ background: linear-gradient(92deg,rgba(7,10,14,.90) 0%,rgba(7,10,14,.62) 30%,rgba(7,10,14,.30) 58%,rgba(7,10,14,.34) 100%); } .section.on-photo h2{text-shadow:0 2px 26px rgba(0,0,0,.85)} /* the right-hand list sits over the brightest part of the photo, so it gets its own local backing rather than darkening the whole frame for its benefit */ .section.on-photo .list li{ background:rgba(7,10,14,.72);backdrop-filter:blur(2px); padding:14px 16px;border-radius:var(--r-sm);border-bottom:0;margin-bottom:2px; } .section.on-photo .list li,.section.on-photo .list li strong{text-shadow:0 1px 10px rgba(0,0,0,.6)} @media(max-width:820px){ .section.on-photo > img{object-position:56% 40%} .section.on-photo::before{background:linear-gradient(to bottom,rgba(7,10,14,.90),rgba(7,10,14,.94))} } /* ---- RAIL: the client's own left sidebar, as a page component ------------- Kevin 2026-08-03: "look at how Nexus Client UI is set up with the tabs all lined on the left... three or four tabs that when you overlay them with the mouse, they give you the information. Nobody wants to scroll down a page, but if you give them something interactive, they'll stay there longer." Deliberately mirrors the real client (web/index.html: