/* ========================================================================== 3DOptix redesign — Home page layer. Depends on: dxr-tokens.css -> dxr-components.css -> dxr-shell.css Enqueued CONDITIONALLY from page-templates/dxr-home.php (handle 'dxr-page-home', dependency 'dxr-shell'), so it ships on this page only and can never reorder the shared layer. RULES FOR THIS FILE: - EVERY selector is scoped by .dxr-page--home (the body class set through the dxr_page_accent filter), so nothing here can reach another page. - No new colour or size literals beyond geometry transcribed verbatim from the approved prototype (the 340px media crop, the 66px play disc). Contents §1 Hero spacers §2 Hero media block §3 Stat band §4 Products §5 Dark technology band §6 Testimonials ========================================================================== */ /* ========================================================================== §1 Hero — explicit spacers the shared layer has no token class for ========================================================================== */ .dxr-page--home .dxr-home-hero__title{margin:0 0 24px} .dxr-page--home .dxr-home-hero__actions{margin-top:34px} .dxr-page--home .dxr-home-hero__note{margin:18px 0 0} /* ========================================================================== §2 Hero media block — a cross-fading slideshow of real captures THE CONTAINER OWNS THE HEIGHT, not the image. Every frame is stacked and absolutely positioned so a cross-fade cannot reflow the panel, and an absolute box has no intrinsic contribution to make — something has to state the height, and the container is the only element that is always present whichever branch renders (slideshow, or a supplied video loop). The crop height is FLUID, not the flat 340px the prototype states, because 340px is only the right crop at the width the prototype was drawn at. The widest frame is 2.19:1. object-fit:cover scales to fill the box HEIGHT, so a fixed 340px always renders 340 x 2.19 = 745px of image regardless of how narrow the box gets. At a 320px viewport the box is 278px wide, so 278/745 = 37% of the screenshot was visible: a tall sliver of the left third of a wide UI shot. 50vw holds the desktop framing all the way down; the 340px ceiling reproduces the prototype exactly from a 680px viewport up, where 50vw reaches it. The 190px floor is the height the caption strip needs to sit clear of the frame's own content. ========================================================================== */ .dxr-page--home .dxr-home-media{ --dxr-slide-fade:420ms; /* == FADE_MS in dxr-home-hero.js — change both */ position:relative; height:clamp(190px,50vw,340px); background:var(--dxr-ink-deep); } /* Frames stack. Only .is-on is opaque; the rest stay painted but transparent so the browser has already decoded them by the time they are needed. */ .dxr-page--home .dxr-home-media__frame{ position:absolute;inset:0;width:100%;height:100%; object-fit:cover;object-position:left top; opacity:0; } .dxr-page--home .dxr-home-media__frame.is-on{opacity:1} /* Transition only once the script is driving, so the first paint is not a fade-in from nothing. */ .dxr-page--home .dxr-home-media.is-live .dxr-home-media__frame{ transition:opacity var(--dxr-slide-fade) ease; } @media (prefers-reduced-motion:reduce){ .dxr-page--home .dxr-home-media.is-live .dxr-home-media__frame{transition:none} } .dxr-page--home .dxr-home-media__video{ position:absolute;inset:0;width:100%;height:100%; object-fit:cover;object-position:left top; } .dxr-page--home .dxr-home-media__scrim{position:absolute;inset:0;background:var(--dxr-scrim-image)} /* `right` closes the box. With only `left` set, the strip is shrink-to-fit against the containing block, and its min-content is the caption's longest unbreakable run plus the three 18px dashes (flex-shrink:0) — 291px inside a 278px media block at a 320px viewport, so the dashes ran 17px past the right edge. .dxr-panel and .dxr-hero both clip it, so it was never a page overflow, just a cut-off strip. Bounding it keeps the dashes inside the media block. */ .dxr-page--home .dxr-home-media__foot{ position:absolute;left:18px;right:18px;bottom:16px; display:flex;align-items:center;gap:14px; } /* ONE LINE AT EVERY WIDTH. Bounding the strip above stopped the dashes overflowing but let the caption wrap instead, and this caption is a long unbroken asset path: at a 365px viewport it took three lines and grew a 14px strip into a 42px block that climbed toward the play disc, leaving 4px between them. A single-line ribbon over an image is the design's own treatment, so the caption truncates rather than wraps. min-width:0 is the load-bearing one — as a flex item its automatic minimum size is its min-content width, so without it the item refuses to shrink and text-overflow never engages. The dashes keep flex-shrink:0 below and stay pinned right. */ .dxr-page--home .dxr-home-media__caption{ font:400 10px/1.4 var(--dxr-font-mono);letter-spacing:.08em;text-transform:uppercase; color:var(--dxr-on-dark-image); min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .dxr-page--home .dxr-home-media__dots{display:flex;gap:6px;flex-shrink:0} /* These were decorative spans; they are