/* BNT Electronics - infrastructure & systems */ /* THEME — light stays white-dominant; dark becomes true near-black space */ /* NAV - condense on scroll */ .anim{--section-y:clamp(48px,5.4vw,88px);--section-y-tight:clamp(30px,3.2vw,50px);--section-y-loose:clamp(60px,6.6vw,104px);--sub-h:55px;--stick-h:133px} .nav-logo{height:46px;} .nav-links{display:flex;-ms-overflow-style:none} .nav-actions{gap:var(--space-3);} .nav-burger{display:none} .nav-link{color:var(--text-body);transition:var(--transition-colors);} .nav-link::after{transform:scaleX(0);} .nav-link--active{color:var(--text-link)} .nav-link--active::after{transform:scaleX(1)} @media(max-width:1080px){.nav-links{display:none}.nav-burger{display:inline-flex}} /* LINKS / ARROWS */ .page-fx{display:flex;} @media(prefers-reduced-motion:reduce){.page-fx{display:none}} .link-arrow:hover .bnt-icon{transform:translateX(3px)} .feat-card:hover .bnt-icon{transform:translateY(-2px)} .bnt-grid--2{grid-template-columns:repeat(2,minmax(0,1fr))} .bnt-grid--3{grid-template-columns:repeat(3,minmax(0,1fr))} .bnt-grid--4{grid-template-columns:repeat(4,minmax(0,1fr))} @media(max-width:1080px){ .bnt-grid--4{grid-template-columns:repeat(2,minmax(0,1fr))} .bnt-grid--3{grid-template-columns:repeat(2,minmax(0,1fr))} } @media(max-width:680px){ .bnt-grid--2,.bnt-grid--3,.bnt-grid--4{grid-template-columns:1fr} } /* VENDOR WALL — centered wrap keeps an odd count balanced */ /* CENTERED SECTION HEAD + HERO */ .hero-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--space-8);max-width:920px} /* Content sits a touch inside the page edges */ /* LOGO CAROUSEL — vendor marquee, opposite directions, pause on hover */ .marquee{-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)} .marquee-track--l{animation:bnt-marq-l 48s linear infinite} .marquee-track--r{animation:bnt-marq-r 48s linear infinite} .mq-logo{flex:0 0 224px;flex-direction:column;gap:6px;padding:var(--space-5)} .cloud-split{display:grid;grid-template-columns:1.02fr .98fr;gap:var(--space-12);align-items:center} .zt-split{display:grid;grid-template-columns:.85fr 1.15fr;gap:var(--space-12);align-items:start} .spec-head{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--space-12);align-items:start;margin-bottom:var(--space-12)} @media(max-width:960px){.cloud-split,.zt-split,.spec-head{grid-template-columns:1fr;gap:var(--space-10);justify-items:start}.spec-head{grid-template-columns:minmax(0,1fr)}} @keyframes bnt-marq-l{from{transform:translateX(0)}to{transform:translateX(var(--mq-end, -50%))}} @keyframes bnt-marq-r{from{transform:translateX(var(--mq-end, -50%))}to{transform:translateX(0)}} @media(prefers-reduced-motion:reduce){.marquee-track{animation:none}.marquee{overflow-x:auto}} .proc-step{position:relative;padding-top:var(--space-5);border-top:2px solid var(--room-infra)} /* SUB-NAV — sticky section tabs under the main nav */ .sub-nav{position:sticky;top:var(--nav-h);z-index:40;} [data-theme="dark"] .sub-nav{background:var(--surface-page)} .sub-nav__tabs{gap:4px;padding:3px 6px;margin:-3px -6px;-ms-overflow-style:none} .subtab{padding:7px 15px;font-size:var(--text-md);font-weight:500;color:var(--text-muted);cursor:pointer;transition:var(--transition-colors);text-decoration:none} .subtab:hover{color:var(--text-strong);background:var(--surface-hover)} .subtab--active,.subtab--active:hover{background:#17539c;color:#fff} .stats-row{display:grid;grid-template-columns:repeat(var(--cols,4),minmax(0,1fr));gap:0} @media(max-width:760px){.stats-row{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-10) 0}} /* IMAGE PLACEHOLDERS - swap for real imagery in the final pass */ .img-ph{position:relative;align-items:flex-end;justify-content:flex-start;background:var(--surface-sunken);color:var(--text-subtle);font-family:var(--font-mono);font-size:var(--text-xs);letter-spacing:var(--tracking-wider);text-transform:uppercase;min-height:200px} .img-ph::before{content:"";background-image:linear-gradient(var(--grid-line,rgba(33,68,114,.06)) 1px,transparent 1px),linear-gradient(90deg,var(--grid-line,rgba(33,68,114,.06)) 1px,transparent 1px);background-size:32px 32px} .img-ph::after{content:"";background:linear-gradient(135deg,transparent 46%,var(--text-subtle) 46%,var(--text-subtle) 54%,transparent 54%);} .img-ph--navy{background:rgba(255,255,255,.03);color:var(--text-on-navy-muted)} .img-ph--navy::after{border-color:rgba(255,255,255,.25)} .hero-split{grid-template-columns:1.1fr .9fr;gap:var(--space-12);} @media(max-width:900px){.hero-split{grid-template-columns:1fr;gap:var(--space-10)}} .card-thumb{min-height:0;aspect-ratio:16/9;border-radius:var(--radius-well);margin-bottom:var(--space-1)} /* MODERN MEDIA - real imagery + vendor logos */ .img-ph{display:block;background:var(--surface-sunken);border:1px solid var(--border-subtle)} .img-ph img{object-fit:cover;} .img-ph:hover img{transform:scale(1.05)} .img-ph--navy{background:rgba(255,255,255,.03)} .img-ph.logo-ph,.logo-ph{display:flex;align-items:center;justify-content:center;background:#fff;border:1px solid rgba(20,40,80,.10);border-radius:var(--radius-plate);padding:14px 20px;overflow:hidden} .logo-ph > img{object-fit:contain;transition:none} .logo-ph:hover > img{transform:none} /* (reveal + failsafe handled in SCROLL REVEALS block above) */ /* INTERACTIVE CARDS - cursor spotlight + lift (site-wide, matches Home) */ /* STICKY SHOWCASE - pinned media while steps scroll */ /* Sticky step activation - scroll-driven highlight, like Home's domains */ /* PINNED HOW-IT-WORKS STORY (matches Home's five-domains) */ .story{position:relative} .story-vp{position:sticky;top:var(--stick-h);min-height:calc(100vh - var(--stick-h));box-sizing:border-box;padding-top:var(--space-6);padding-bottom:var(--space-6);display:flex;align-items:center} .story-inner{grid-template-columns:.92fr 1.08fr;gap:var(--space-12);} .story-item{padding:var(--space-3) 0 var(--space-3) var(--space-7);} .story-item::before{content:"";position:absolute;left:-2px;top:0;bottom:0;width:2px;background:var(--accent,var(--blue-500,#1868e6));transform:scaleY(0);transform-origin:top;transition:transform .5s var(--ease-out)} .story-item h3{font-size:var(--text-2xl);color:var(--text-muted);letter-spacing:var(--tracking-tight)} .story-item p{margin-top:0;color:var(--text-muted);line-height:var(--leading-normal);max-width:460px;max-height:0;opacity:0;overflow:hidden;transition:max-height .55s var(--ease-out),opacity .5s var(--ease-out),margin .55s var(--ease-out)} .story-item.is-active p{margin-top:var(--space-3);max-height:170px;opacity:1} .story-dot.is-on{width:30px;background:var(--accent,var(--blue-500,#1868e6))} .story-visuals{position:relative;height:min(64vh,540px);border-radius:var(--radius-story);overflow:hidden;border:1px solid var(--border-subtle);background:var(--surface-card)} .story-badge{-webkit-backdrop-filter:blur(6px);} @media(max-height:820px) and (min-width:901px){.story-vp{padding-top:var(--space-5);padding-bottom:var(--space-5)}.story-item{padding-top:var(--space-2);padding-bottom:var(--space-2)}.story-item h3{font-size:var(--text-lg)}.story-item.is-active p{max-height:0;opacity:0;margin-top:0}.story-visuals{height:min(52vh,380px)}} @media(max-width:900px){.story-vp{position:relative;top:auto;height:auto;padding:var(--section-y) 0}.story-inner{grid-template-columns:1fr;gap:var(--space-8)}.story-item h3{color:var(--text-strong)}.story-item p{max-height:240px;opacity:1;margin-top:var(--space-3)}.story-item::before{transform:scaleY(1)}} /* CINEMATIC MEDIA - scroll parallax, entrance settle, hover scan */ .anim main [data-mx]{transform:translate3d(0,var(--mxy,0px),0);} .anim main [data-mx]::after{display:block !important;} .anim main [data-mx="0"]::after{display:none !important} .anim main [data-mx="0"]::before{display:none !important} .anim main [data-mx="0"]::after{display:none !important} .anim main [data-mx="0"]::before{display:none !important} .anim main [data-cap]::before{display:inline-flex !important;} @media(prefers-reduced-motion:reduce){.anim main [data-mx]::after{display:none !important}} /* .img-ph zeroes its own pseudo backgrounds, so the scan line needs its gradient back */ .anim main .img-ph[data-mx]::after{background:linear-gradient(180deg,transparent,var(--text-link),transparent) !important} .anim main .mx-plain::after{display:none !important} .anim main .mx-plain:not([data-cap])::before{display:none !important} html.bnt-js .anim main .proc-rail .proc-step:nth-child(2)::before,html.bnt-js .anim main .proc-rail .proc-step:nth-child(2)::after,html.bnt-js .anim main .proc-rail .proc-step:nth-child(2) > .bnt-mono{transition-delay:.13s} html.bnt-js .anim main .proc-rail .proc-step:nth-child(3)::before,html.bnt-js .anim main .proc-rail .proc-step:nth-child(3)::after,html.bnt-js .anim main .proc-rail .proc-step:nth-child(3) > .bnt-mono{transition-delay:.26s} html.bnt-js .anim main .proc-rail .proc-step:nth-child(4)::before,html.bnt-js .anim main .proc-rail .proc-step:nth-child(4)::after,html.bnt-js .anim main .proc-rail .proc-step:nth-child(4) > .bnt-mono{transition-delay:.39s} html.bnt-js .anim main .proc-rail .proc-step:nth-child(5)::before,html.bnt-js .anim main .proc-rail .proc-step:nth-child(5)::after,html.bnt-js .anim main .proc-rail .proc-step:nth-child(5) > .bnt-mono{transition-delay:.52s} .soc-lnk:hover{transform:translateY(-2px)} .soc-lnk:active{transform:translateY(0)} /* The design system transitions colour on every anchor, and this engine pins any transitioned colour at its first resolution - so without this, no link re-resolves its colour on a theme change and half of them go illegible. Only transform, box-shadow and opacity are safe to transition on this engine. */ .subtab,.nav-link{transition-property:transform,box-shadow,opacity} /* ========================================================================== ORDER-INDEPENDENCE (2A) Every declaration below already applies on this page. It applied because this file loads after style.css and won a tie on POSITION - and position is not something a stylesheet should depend on, because a CSS optimiser is entitled to move blocks. Each is restated here with an html prefix: one extra type selector, so it wins on SPECIFICITY instead. The values are unchanged - they are what the browser was already computing. Verified by rendering this page against the previous version and comparing every instance of every selector whose declarations were touched. Do not delete as redundant: without it these depend on file order again. ========================================================================== */ html .sub-nav__tabs{gap:4px;padding:3px 6px;margin:-3px -6px} html .subtab{flex:none;padding:7px 15px} /* ========================================================================== 2A - `.img-ph` border pinned on specificity (1.4.10) style.css and this file both declare `border` on a bare `.img-ph`, both at specificity 10, so which one won was decided by load order alone. The pin below settles it on specificity instead. Why `:not(:has(img))` rather than a plain `html .img-ph`: style.css carries `.img-ph:has(img){border-color:transparent}`, and it is NOT html-prefixed. `:has()` takes the specificity of its argument, so that selector is (0,1,1) = 11 - a TIE with `html .img-ph`, which this later- loading sheet would then win, putting a dashed border around every photograph on the site. Measured in the browser, not calculated: the winner between those two flips when their order is swapped, which is what a tie looks like. (The 1.4.9 audit recorded that rule as specificity 20. It is not. A specificity taken on trust is how 1.4.7 happened.) Excluding frames that hold an image leaves `:has(img)` to own them by itself, and confines this pin to the empty placeholder frames whose value it actually is. At 12 it stays below `.img-ph.logo-ph` (20), so the logo plates keep their own border - also verified by swapping the order. The specificity-10 declaration above is deliberately LEFT IN PLACE, not moved here. A frame holding a photograph is excluded from this pin, so deleting the original made those frames fall through to style.css's `1px solid` and their border-style changed from dashed to solid - behind a transparent border-color, so invisible, but measured on 10 frames across 9 pages, and 2A's contract is that nothing changes at all. It is not an intra-file duplicate to be cleaned up: the two declarations cover different element sets. Residual, recorded rather than fixed: on frames that DO hold a photograph the 10-versus-10 contest with style.css remains order-dependent, for border-width and border-style only, both of them behind a transparent colour. Nothing observable turns on it. ======================== */ html .img-ph:not(:has(img)){border:1px solid var(--border-subtle)} /* --- 2A - `.mq-plate{justify-content:flex-start}` deleted (1.4.10). Dead on every page. style.css has `html .mq-plate{justify-content: center}` at 11 and this was 10, so it never applied; datacenter is the only page carrying plates and all 26 resolve to style.css. Verified by swapping the two rules' order in the browser - the winner does not change, so it is specificity, not order. Not to be confused with the neighbouring `html .bnt-card.mq-logo:has(.mq-plate){justify-content:flex-start}`, which targets the CARD, is live, and looks identical at a glance. */