/* LATVERA lux detail: the product template of all 80 routes (BUILD-BRIEFS B10–B12; GRAMMAR §8.7, §8.8, §8.10, §8.17). * Every rule sits under #detailDialog .lux-detail, the in-app bar (html:not([data-publication]) #detailDialog:has(.lux-detail)) * or the publication bar (html[data-publication="true"] #detailDialog:has(.lux-detail)); the protected zone cannot read it. * Dialog units: --lux-unit = the sheet unit su = min(u, 100dvh/1200) inside #detailDialog (lux/tokens.css). * Flow is the default of every card: the stacked layout exists only under .lux-stack[data-lux-live] (V3-02), the sheet is * open unless its toggle collapsed it, and nothing is hidden by CSS until a script arms it. */ /* ── Dialog chrome: product-only additions to the shared route chrome of lux/primitives.css (B0) ────────────────────── */ html:not([data-publication]) #detailDialog:has(.lux-detail) { scrollbar-gutter:stable both-edges; } #detailDialog:has(> #detailContent > .lux-detail) #detailContent { padding:0; } /* Publication documents: the site bar stays in flow above the card frame, on the ground, legible (V2 M10, V3-04). */ html[data-publication="true"] #detailDialog:has(.lux-detail) .detail-top { position:static; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:8px 24px; min-height:0; padding:12px var(--lux-edge); background:var(--lux-ground); -webkit-backdrop-filter:none; backdrop-filter:none; color:var(--lux-cream); font-size:var(--lux-fs-small); line-height:1.3; letter-spacing:-.015em; } html[data-publication="true"] #detailDialog:has(.lux-detail) .detail-top::after { content:none; } html[data-publication="true"] #detailDialog:has(.lux-detail) .detail-top :is(a, button) { display:inline-flex; align-items:center; min-height:44px; padding:0; border:0; background:none; color:var(--lux-cream); font:inherit; text-decoration:none; letter-spacing:inherit; } html[data-publication="true"] #detailDialog:has(.lux-detail) .detail-top nav { display:flex; flex-wrap:wrap; align-items:center; gap:0 24px; } /* ── Root ──────────────────────────────────────────────────────────────────────────────────────────────────────────── */ #detailDialog .lux-detail { position:relative; display:block; margin:0; padding:0; background:var(--lux-ground); color:var(--lux-cream); font-size:var(--lux-fs-small); font-weight:400; line-height:var(--lux-lh-small); letter-spacing:-.015em; } /* catalog-experience.css `.lv-product button{font:inherit}` (0,1,1) outweighs the (0,1,0) role primitives on buttons. */ #detailDialog .lux-detail :is(button, a).lux-small { font-size:var(--lux-fs-small); line-height:var(--lux-lh-small); letter-spacing:-.015em; } #detailDialog .lux-detail :is(h2, h3, h4, p, figure, dl, dd) { margin:0; } #detailDialog .lux-detail #detailTitle { margin:0; font-size:var(--lux-fs-lead); line-height:1.04; letter-spacing:-.004em; font-weight:400; color:var(--lux-cream); white-space:nowrap; } /* The app focuses the heading (tabindex −1) when a route opens; it is not a control, so it carries no ring. */ #detailDialog .lux-detail #detailTitle:focus { outline:none; box-shadow:none; } /* Sentence case of an all-caps data category: on an inner inline-block, because ::first-letter does not reach past the * paren's generated "(" in Chromium or WebKit (the primitive alone rendered "(louvered roof system)"). */ #detailDialog .lux-detail .lux-sentence { display:inline-block; text-transform:lowercase; } #detailDialog .lux-detail .lux-sentence::first-letter { text-transform:uppercase; } /* ── Cards (GRAMMAR §8.17 card 0, §8.10 view cards): flow is the default ───────────────────────────────────────────── */ #detailDialog .lux-detail .lux-card { --lux-lane:40px; /* the bottom cluster's centreline above the card bottom: the Close pill's centre (100dvh − 48) */ position:relative; box-sizing:border-box; height:calc(100svh - 16px); margin:8px; overflow:hidden; isolation:isolate; border-radius:var(--radius); background:var(--lux-panel); color:var(--lux-cream); } #detailDialog .lux-detail .lux-card-media { position:absolute; inset:0; overflow:hidden; border-radius:inherit; } #detailDialog .lux-detail .lux-card-img { position:absolute; inset:0; display:block; width:100%; height:100%; max-width:none; max-height:none; object-fit:cover; object-position:var(--lux-pos, 50% 50%); transform-origin:50% 50%; } /* Functional scrims (GRAMMAR §2): under the text that sits on the photograph, and only there. */ #detailDialog .lux-detail .lux-card-media::after { content:""; position:absolute; inset:0; z-index:1; pointer-events:none; background:var(--lux-scrim-bottom); } /* View titles sit on skies: the top scrim is laid twice (the measured VENTO "Light & air" title reached 2.71:1 over one). */ #detailDialog .lux-detail .lux-card--view .lux-card-media::after { background:var(--lux-scrim-top), var(--lux-scrim-top), var(--lux-scrim-bottom); } #detailDialog .lux-detail .lux-card--product .lux-card-media::before { content:""; position:absolute; inset:0; z-index:1; pointer-events:none; background:var(--lux-scrim-left); opacity:0; transition:opacity .5s var(--lux-ease-ui); } #detailDialog .lux-detail .lux-card--product[data-sheet="collapsed"] .lux-card-media::before { opacity:1; } /* The stack's dim (the outgoing card, written by stack()) paints over the whole card, the sheet's dim only over the photo. */ #detailDialog .lux-detail .lux-dim { position:absolute; inset:0; z-index:9; pointer-events:none; background:var(--lux-ground); opacity:0; border-radius:inherit; } #detailDialog .lux-detail .lux-sheet-dim { position:absolute; inset:0; z-index:3; pointer-events:none; background:var(--lux-dim); opacity:1; transition:opacity .3s var(--lux-ease-fill); } #detailDialog .lux-detail .lux-card--product[data-sheet="collapsed"] .lux-sheet-dim { opacity:0; } /* Bottom cluster: the Details disc, the caption beside it and the provenance line, on one line with the Close pill. */ #detailDialog .lux-detail .lux-sheet-toggle { position:absolute; z-index:7; left:calc(30 * var(--lux-unit)); bottom:calc(var(--lux-lane) - 22px); } /* + when the sheet is collapsed, × when it is open; the grow tweens the same variable (GRAMMAR §8.2). */ #detailDialog .lux-detail .lux-sheet-toggle[aria-expanded="true"] { --lux-disc-turn:135deg; } /* Above the .58 sheet dim (z 3), like the provenance line: under it the 13.5 px caption rendered at 3.1–3.9:1 (C-WP4-R2-03). */ #detailDialog .lux-detail .lux-card-caption { position:absolute; z-index:4; left:calc(30 * var(--lux-unit) + 56px); bottom:var(--lux-lane); transform:translateY(50%); max-width:calc(640 * var(--lux-unit)); color:var(--lux-cream); text-wrap:balance; } #detailDialog .lux-detail .lux-card-media > .lux-provenance { position:absolute; z-index:4; right:calc(var(--lux-edge) - 8px); bottom:var(--lux-lane); transform:translateY(50%); max-width:calc(50% - 90px); color:var(--lux-cream); text-align:right; text-wrap:balance; } /* The presentational name of a collapsed card: VELOX's name box (x = --lux-edge, `name` role, vertically centred). */ #detailDialog .lux-detail .lux-card-name { position:absolute; z-index:5; left:calc(var(--lux-edge) - 8px); top:50%; transform:translateY(-50%); margin:0; font-size:var(--lux-fs-name); line-height:.93; letter-spacing:-.055em; color:var(--lux-cream); white-space:nowrap; opacity:0; pointer-events:none; transition:opacity .5s var(--lux-ease-ui); } #detailDialog .lux-detail .lux-card--product[data-sheet="collapsed"] .lux-card-name { opacity:1; } /* ── The Details sheet (GRAMMAR §8.7): R3 R-D1 at 1440×900, grown from the disc ────────────────────────────────────── */ #detailDialog .lux-detail .lux-sheet { position:absolute; z-index:6; left:calc(30 * var(--lux-unit)); bottom:calc(var(--lux-lane) + 34px); box-sizing:border-box; width:max(360px, calc(537 * var(--lux-unit))); height:min(82dvh, calc(100% - var(--lux-lane) - 42px)); display:flex; flex-direction:column; justify-content:space-between; gap:calc(20 * var(--lux-unit)); padding:calc(40 * var(--lux-unit)) calc(40 * var(--lux-unit)) calc(20 * var(--lux-unit)); border-radius:var(--radius); background:var(--lux-panel); color:var(--lux-cream); overflow-y:auto; overscroll-behavior:contain; scrollbar-width:none; } #detailDialog .lux-detail .lux-sheet::-webkit-scrollbar { display:none; } /* ASAŞ sheets carry 0–6 short rows, so a fixed 82dvh panel left most of them a tall empty slab (61 % empty on REFD77). * They size to their content instead, keeping the reference's empty band (≈ 28 % of the panel), capped at the 82dvh * panel: --lux-body-h is the body's own height, written by luxBind (a ResizeObserver, no layout read); without it * (publication, no JS) the panel keeps 82dvh (C-WP4-R1-08). */ @media (min-width:701px) { #detailDialog .lux-detail--supplier .lux-sheet { height:min(82dvh, calc(100% - var(--lux-lane) - 42px), calc((var(--lux-body-h, 100dvh) + 60 * var(--lux-unit) + max(48px, 90 * var(--lux-unit))) / .72)); } } #detailDialog .lux-detail .lux-sheet[data-state="collapsed"] { visibility:hidden; } /* the gap is guaranteed: a long nowrap title (MICROTENSE at 1440) keeps 24 px from the thumbnail */ #detailDialog .lux-detail .lux-sheet-head { display:flex; justify-content:space-between; align-items:flex-start; gap:max(24px, calc(30 * var(--lux-unit))); } /* The heading takes the room the thumbnail leaves (basis 0, grow 1) and never gets narrower than its nowrap title (the flex * item's automatic minimum), so a long paren wraps inside it; the thumbnail or tile keeps its size and gives way only to a * title that does not fit beside it (MICROTENSE at 1440). A heading that could not shrink pushed the ASAŞ tile and its * label out of the panel on long modelNames ("Outward Opening Joinery System with Insect Screen") (C-WP4-R2-01). */ #detailDialog .lux-detail .lux-sheet-heading { flex:1 1 0%; } #detailDialog .lux-detail .lux-sheet-heading .lux-paren { display:block; width:fit-content; margin-top:2px; color:var(--lux-cream); } #detailDialog .lux-detail .lux-sheet-heading .lux-paren--sentence { display:inline-block; } #detailDialog .lux-detail .lux-sheet-thumb { flex:0 1 calc(161 * var(--lux-unit)); display:block; width:calc(161 * var(--lux-unit)); min-width:64px; height:calc(82 * var(--lux-unit)); max-width:none; border-radius:var(--lux-r-nested); object-fit:cover; background:var(--lux-ground); } /* ASAŞ: the supplier product visual on its cream tile, labelled (OD-10; V2 M3). The column is as wide as the wider of the * 161su tile and its one-line label, so the label lies inside the column and the panel; it wraps only if a title ever * squeezes the column (C-WP4-R2-01). */ #detailDialog .lux-detail .lux-sheet-tile { flex:0 1 auto; min-width:64px; display:flex; flex-direction:column; align-items:flex-end; } #detailDialog .lux-detail .lux-tile { display:block; overflow:hidden; box-sizing:border-box; width:calc(161 * var(--lux-unit)); max-width:100%; border-radius:var(--lux-r-nested); background:#f4efe7; } #detailDialog .lux-detail .lux-sheet-tile .lux-sheet-thumb { width:100%; min-width:0; box-sizing:border-box; padding:6%; border-radius:0; background:none; object-fit:contain; mix-blend-mode:multiply; } #detailDialog .lux-detail .lux-tile-label { margin-top:6px; color:var(--lux-taupe); text-align:right; } #detailDialog .lux-detail .lux-sheet-caption { display:none; } #detailDialog .lux-detail .lux-sheet-sentence { margin:calc(30 * var(--lux-unit)) 0 calc(16 * var(--lux-unit)); color:var(--lux-taupe); } #detailDialog .lux-detail .lux-sheet-head + .lux-rows, #detailDialog .lux-detail .lux-sheet-head + .lux-sheet-note { margin-top:calc(30 * var(--lux-unit)); } #detailDialog .lux-detail .lux-sheet-note { margin-top:calc(14 * var(--lux-unit)); color:var(--lux-taupe); } #detailDialog .lux-detail .lux-rows { margin:0; } #detailDialog .lux-detail .lux-rows dd { margin:0; } #detailDialog .lux-detail .lux-sheet-cta { margin-top:calc(20 * var(--lux-unit)); color:var(--lux-cream); cursor:pointer; } /* The sheet's CTA keeps its 44 px target through an invisible hit extension instead of the L1 padding, so the panel's * empty band is measured from the text (O3 G8 calibration had no padding on the CTA). */ #detailDialog .lux-detail .lux-sheet .lux-sheet-cta { --lux-link-pad:0px; padding:0; } #detailDialog .lux-detail .lux-sheet .lux-sheet-cta::before { content:""; position:absolute; left:0; right:0; top:50%; height:44px; transform:translateY(-50%); background:transparent; } /* The request link reads as the second line of "Technical PDF on request"; after the ASAŞ qualifier the CTA keeps a * 10u step (the full 20u would take ASW34's empty band under B12 #2's 20 % at 1440 — measured 19.3 %). */ #detailDialog .lux-detail .lux-sheet-note + .lux-sheet-cta { margin-top:calc(10 * var(--lux-unit)); } #detailDialog .lux-detail .lux-sheet-note--pdf + .lux-sheet-cta { margin-top:0; } /* The black bottom bar (GRAMMAR §8.7; R3 §2.1 Cost pill): "Catalog" ∣ "Pages 5–7 ↗". */ #detailDialog .lux-detail .lux-bar { --lux-focus-r:999px; flex:none; display:flex; align-items:center; justify-content:space-between; gap:16px; box-sizing:border-box; width:calc(100% + 40 * var(--lux-unit)); height:max(48px, calc(90 * var(--lux-unit))); margin:0 calc(-20 * var(--lux-unit)); padding:0 calc(25 * var(--lux-unit)); border:0; border-radius:999px; background:var(--lux-ground); color:var(--lux-cream); font:inherit; font-size:var(--lux-fs-small); line-height:var(--lux-lh-small); letter-spacing:-.015em; text-align:left; text-decoration:none; cursor:pointer; } #detailDialog .lux-detail .lux-bar-label { color:var(--lux-taupe); } #detailDialog .lux-detail .lux-bar-value { color:var(--lux-cream); text-align:right; transition:color .3s var(--lux-ease-ui); } /* ── The stack (GRAMMAR §8.10): stacked only under [data-lux-live], written by stack() once its trigger exists ─────── */ #detailDialog .lux-detail .lux-stack[data-lux-live] { height:calc(100svh * (1 + 1.3 * (var(--lux-n) - 1))); } #detailDialog .lux-detail .lux-stack[data-lux-live] > .lux-stack-stage { position:sticky; top:0; height:100svh; overflow:clip; perspective:1400px; } #detailDialog .lux-detail .lux-stack[data-lux-live] > .lux-stack-stage > .lux-card { position:absolute; inset:8px; height:auto; margin:0; transform-origin:50% 100%; will-change:transform; } /* View cards: title top-left, couplet bottom-left, chips bottom-right (the set shown). */ #detailDialog .lux-detail .lux-view-top { position:absolute; z-index:2; left:calc(var(--lux-edge) - 8px); right:calc(var(--lux-edge) - 8px); top:calc(50 * var(--lux-unit)); max-width:calc(900 * var(--lux-unit)); } #detailDialog .lux-detail .lux-view-top { display:flex; flex-wrap:wrap; align-items:baseline; column-gap:12px; } #detailDialog .lux-detail .lux-view-top .lux-title { text-wrap:balance; } #detailDialog .lux-detail .lux-view-text { position:absolute; z-index:2; left:calc(var(--lux-edge) - 8px); bottom:var(--lux-lane); transform:translateY(50%); max-width:calc(640 * var(--lux-unit)); color:var(--lux-cream); text-wrap:balance; } #detailDialog .lux-detail .lux-card-media > .lux-chips { position:absolute; z-index:2; right:calc(var(--lux-edge) - 8px); bottom:var(--lux-lane); transform:translateY(50%); } #detailDialog .lux-detail .lux-chips > * { font-size:var(--lux-fs-small); } /* VENTO "Light & air": the covered louvers wipe up over the open ones while the stack scrubs ([data-wipe], written by * luxBind). Static (phone, reduced motion, publication, the flow fallback): the two states as two plain images side by * side, each its own rounded panel on the ground, never one photo cut by a line (C-WP4-R1-07). */ #detailDialog .lux-detail .lux-wipe { position:absolute; inset:0; overflow:hidden; } #detailDialog .lux-detail .lux-wipe-line { position:absolute; z-index:2; left:0; right:0; top:50%; height:1px; background:rgba(244,239,231,.72); pointer-events:none; } #detailDialog .lux-detail .lux-card--view:not([data-wipe]) .lux-wipe-line { display:none; } #detailDialog .lux-detail .lux-card--view:has(.lux-wipe):not([data-wipe]) { background:transparent; } #detailDialog .lux-detail .lux-card--view:not([data-wipe]) .lux-card-media > .lux-card-img:has(+ .lux-wipe) { right:auto; width:calc(50% - 4px); border-radius:var(--radius); } #detailDialog .lux-detail .lux-card--view:not([data-wipe]) .lux-wipe { left:calc(50% + 4px); border-radius:var(--radius); } /* The state label sits 12 px after the view title on its baseline (GRAMMAR §8.6), where the doubled top scrim is densest. */ #detailDialog .lux-detail .lux-wipe-state { display:grid; justify-items:start; margin:0; } #detailDialog .lux-detail .lux-wipe-state > .lux-paren { grid-area:1 / 1; color:var(--lux-cream); transition:opacity .5s var(--lux-ease-quad-out); } /* Static (no scroll scrub): the image shows both states, half and half, and both labels are named. */ #detailDialog .lux-detail .lux-card:not([data-wipe]) .lux-wipe-state { display:flex; gap:12px; } #detailDialog .lux-detail .lux-card[data-wipe="open"] [data-wipe-label="covered"], #detailDialog .lux-detail .lux-card[data-wipe="covered"] [data-wipe-label="open"] { opacity:0; } /* ── End block: the close and the route footer, at least one viewport tall, so the last viewport holds only the couplet, * the band and the footer (the reference's closing viewport, ref journey/desktop/frames/078_y16895.jpg); any extra room * opens above the couplet. It was shorter than a viewport, and the resting frame showed a 26–60 px sliver of card 0 with * the Details disc cut in half (C-WP4-R2-05). ──────────────────────────────────────────────────────────────────────── */ #detailDialog .lux-detail .lux-end { display:flex; flex-direction:column; justify-content:flex-end; min-height:100dvh; } /* ── Close: the couplet and the marquee into the enquiry (GRAMMAR §8.9, as a