/* ============================================================ _compact-narrow.css — sess.24 NUOVA fascia desktop ridotta ============================================================ Scopo: regole per fascia 1100-1399px (laptop 13", iPad landscape, desktop browser ridotto, foldables unfolded). Body class `body.ds-vp-compact-narrow`. Media query attiva: `@media (min-width: 1100px) and (max-width: 1399.98px)`. Razionale: prima di sess.24, viewport <1400 era TUTTO regime mobile `ds-vp-app` (CSS in `_mobile-touch.css`). Il regime mobile era tarato per ~390px CSS viewport iPhone → su desktop browser ridotto / iPad landscape (1180+) appariva sproporzionato. Decisione (audit 2 agent UX+Tech sess.24, vedi memory file `audit_ipad_responsive_threshold_s24.md`): - Soglia mobile abbassata a 1100px - NUOVA fascia 1100-1399 = compact-narrow (desktop ridotto) - Eredita il pattern desktop standard (compact 1400-1849), con override stretti dove serve per non rompere layout a viewport limite Strategia: il sito a 1100-1399 cade nei DEFAULT CSS desktop (regole senza media query). Le regole mobile `body.ds-vp-app` non si applicano. Le regole `(min-width: 1400px)` non si applicano. Restano i layout di flow base + qualunque cosa scoped a `body.ds-vp-compact-narrow` qui sotto. Approccio sess.24: questo file è uno STARTER. Override aggiunti man mano che si trovano problemi visivi a 1100-1399. Per la maggior parte dei widget il layout default desktop funziona correttamente (è il regime mobile che era over-aggressive). File da auditare nelle prossime sessioni a 1100-1399 viewport: - hero-gallery (hero-card width, thumbs row) - product-bar (sticky compact, range pill, chip F7) - key-features (KF carousel as-carousel2 / as-grid2 layout) - specs (table layout, metric/imperial pill) - dmx (chart proportions) - photometrics (cono SVG + tabella native setpoints) - accessories (grid 2-col) - downloads (filter pill row) - portfolio-hero (cards row) - rfq-cta (form layout) Test devices target fascia compact-narrow: - iPad landscape regular (1180), Pro 11" (1210), Pro 13" (1376) - Laptop 13" (1280, 1366) - Desktop browser ridotto (1100-1399) ============================================================ */ @media (min-width: 1100px) and (max-width: 1399.98px) { /* ───────────────────────────────────────────────────────── LAYOUT — i widget cadono in default desktop. Aggiungiamo override solo per cose che oggi si rompono a 1100-1399. ─────────────────────────────────────────────────────── */ /* Safety net: nessuno scroll orizzontale a livello body. Eventuale widget che eccede 100vw va clippato/scrollato internamente, non far overflow il viewport. */ body.ds-vp-compact-narrow{ overflow-x: hidden; } /* Container content max-width: i layout desktop wide (≥1850) usano spesso width fisse per il main-grid. A 1100-1399 evitiamo che main-grid superi il viewport con eventuali margin: auto. Lascia il flow naturale, ma cap a 100% con padding laterale. */ body.ds-vp-compact-narrow #product-top-grid, body.ds-vp-compact-narrow .product-main-grid{ width: min(100%, calc(100vw - 24px)); margin-inline: auto; } /* RFQ rail destro >=1850: non deve apparire a 1100-1399. Già nascosto via media query >=1850 nel rail CSS, ma safety. */ body.ds-vp-compact-narrow .right-rail, body.ds-vp-compact-narrow #right-rail{ display: none; } /* sess.39: titlebar mobile + drawer + fab RFQ ORA visibili anche su compact-narrow (eredita chrome mobile via ds-vp-app dual class). Rimossa safety rule sess.24 che li nascondeva. Tab bar mobile resta assente perché refactor sess.24.6 ha rimosso il pattern (single-scroll + sticky chip-nav). */ /* ───────────────────────────────────────────────────────── STRATEGIA sess.39: compact-narrow = EXTEND MOBILE + breathing ─────────────────────────────────────────────────────── Feedback utente sess.39: "1100-1400 ha copertura TOUCH ... copierei da mobile lasciando solo più respiro nel layout". Memo audit_tabs_vs_scroll_mobile_s24: mobile NO tab bar dopo refactor sess.24.6 → single-scroll + sticky chip-nav. Approccio: in main.js applyViewportRegimeClasses, per regime 'compact-narrow' il body riceve SIA 'ds-vp-compact-narrow' SIA 'ds-vp-app'. Tutte le regole CSS mobile (body.ds-vp-app …) scattano automaticamente per compact-narrow. Le regole gated da @media (max-width: 1099.98px) NON scattano (viewport > 1099) → quelle restano mobile-only specifiche. In questo file teniamo SOLO i breathing room overrides (font/padding/gap +N, KF ticker 3-pill, ecc.). sess.38 KF 2-col + Portfolio 2-col REVERTITI (non in linea con replica mobile). ───────────────────────────────────────────────────────── */ /* ───────────────────────────────────────────────────────── BREATHING ROOM overrides — incrementali, aggiunti dopo test visuale a 1150/1280/1366. ───────────────────────────────────────────────────────── */ /* ───────────────────────────────────────────────────────── HERO THUMBS — sess.41 step 2 fix. ─────────────────────────────────────────────────────── Mobile: thumbs 5-tile grid full-width aspect-ratio 1 con --thumb-h 64px. Su iPhone 390 → ~67px per thumb (OK). Su compact-narrow 1150 → ~218px per thumb (gigante). Override: thumb height max 80px + aspect ratio 4:3 (no square). ───────────────────────────────────────────────────────── */ body.ds-vp-compact-narrow .hero[data-tray="open"] .hero-dock .hero-dots button{ --thumb-h: 80px !important; aspect-ratio: 4 / 3 !important; } /* ───────────────────────────────────────────────────────── HERO STAGE — sess.40 fix a) hero+thumbs gigante. ─────────────────────────────────────────────────────── Regola mobile (_mobile-touch.css:321) `aspect-ratio: 1/1` scatta anche su compact-narrow touch → 1122x1122 = enorme verticale (1.4× viewport height 800). Replico pattern landscape-phone (block-size: calc(100svh - chrome)) ma con chrome compact-narrow: header 44 + titlebar 72 + thumbs 80 + safe 24 + section gap = ~240. Risultato: stage cap altezza a ~viewport-240, aspect libero (più landscape, più cinema). ───────────────────────────────────────────────────────── */ body.ds-vp-compact-narrow .hero .hero-stage{ aspect-ratio: auto !important; block-size: calc(100svh - 240px) !important; height: 70vh; height: calc(100svh - 240px) !important; max-height: calc(100svh - 240px) !important; min-height: 360px !important; width: 100% !important; } /* ───────────────────────────────────────────────────────── CONTAINER WIDTH — sess.39: .top-right-col (parent di KF + Learn More) è limitato a 860px max da product.css:1314-1320 `@media (max-width: 1399.98px)`. Su mobile 390 vp = 390 ok. Su compact-narrow 1100-1399 = 860 = container "island" su viewport più grande → KF visibilmente più stretto di Hero. Override: full-width 100% per replica mobile + utilizzare spazio orizzontale disponibile. Specificità: (0,1,3,1) batte (0,1,1,0) della regola base. */ body.ds-vp-compact-narrow #product-top-grid .top-right-col{ width: 100% !important; max-width: none !important; } /* ───────────────────────────────────────────────────────── SECTION HEIGHT — sess.41 fix a): REVERT min-height rigido. ─────────────────────────────────────────────────────── Feedback utente sess.41: min-height 100svh forzato crea vuoti "per niente" quando widget non ha materiale sufficiente. Approccio nuovo: equilibrio estetico — height naturale del contenuto. Se widget non riempie schermo, il successivo appare sotto (purché entri intero). NO forced fit-screen. ───────────────────────────────────────────────────────── */ /* ───────────────────────────────────────────────────────── PHOTOMETRICS MAXIMIZE COMPARE — sess.41 fix c). ─────────────────────────────────────────────────────── Mobile pattern split-view 50/50 (screenshot iPhone reale). Default _mobile-touch.css linea 3337 setta panel width 100% ma NESSUN height cap → flex 0 0 auto → panel domina con content height (form custom device 1647px). Main collassa a height 0 → grafico INVISIBILE. Fix split 50/50: main e panel flex 1 1 50% con own scroll. Quando panel è hidden, main torna automaticamente 100% (flex item con flex-basis 50% ma sibling display: none). ───────────────────────────────────────────────────────── */ body.ds-vp-compact-narrow .dspmx-body{ flex-direction: column !important; overflow: hidden !important; } body.ds-vp-compact-narrow .dspmx-main{ flex: 1 1 0 !important; min-height: 0 !important; overflow-y: auto !important; } body.ds-vp-compact-narrow .dspmx-compare-panel:not([hidden]){ flex: 1 1 50% !important; min-height: 0 !important; max-height: 50% !important; overflow-y: auto !important; border-left: none !important; border-top: 1px solid rgba(255,255,255,.08); } /* Quando compare panel attivo, anche main 50% (split view) */ body.ds-vp-compact-narrow .dspmx-body:has(.dspmx-compare-panel:not([hidden])) .dspmx-main{ flex: 1 1 50% !important; max-height: 50% !important; } /* ───────────────────────────────────────────────────────── GAP WIDGET UNIFORMI — sess.41 fix e) + sess.43 boost. ─────────────────────────────────────────────────────── Mobile ha 2 eccezioni "tight" (26px) intenzionali: 1) Photometrics margin-top tight (scene KF → device PM) 2) dmx-dl-col interno tight (DMX↔Downloads coppia semantica) A compact-narrow viewport più largo/alto, le eccezioni "tight" sembrano disomogenee. Uniformizzo a gap-section (38) per ritmo visivo coerente container-su-container. sess.43 boost: feedback utente "distanze ancora non equivalenti". Force margin-top 38 con MAX specificity su TUTTI i widget + reset margin-bottom intra-widget per evitare cumulazione asimmetrica (alcuni widget hanno trailing margin nel proprio content che si somma al gap visivo). ───────────────────────────────────────────────────────── */ body.ds-vp-compact-narrow .product-main-grid > #photometrics, body.ds-vp-compact-narrow .product-main-grid > section#specs-card.specs-card, body.ds-vp-compact-narrow .product-main-grid > #specs-card, body.ds-vp-compact-narrow .product-main-grid > .dmx-dl-col, body.ds-vp-compact-narrow .product-main-grid > #dmx-widget, body.ds-vp-compact-narrow .product-main-grid > #downloads-widget, body.ds-vp-compact-narrow .product-main-grid > #accessories-widget, body.ds-vp-compact-narrow .product-main-grid > #portfolio-hero, body.ds-vp-compact-narrow .product-main-grid > #rfq-cta, body.ds-vp-compact-narrow .product-main-grid > section#rfq-cta{ margin-top: var(--ds-mobile-gap-section) !important; } /* dmx-dl-col interno (DMX strip ↔ Downloads) anche uniformizzato */ body.ds-vp-compact-narrow .dmx-dl-col{ gap: var(--ds-mobile-gap-section) !important; } /* sess.45 ROOT CAUSE TROVATA gap visivo diverso: `.downloads-card`, `.specs-card`, `.photometrics` (inner cards) hanno `margin: 28px auto` (downloads.css:11, specs.css:22, photometrics.css:1104) → margin-top/bottom 28 si SOMMA al margin-top 38 del container outer (.product-main-grid > #downloads-widget etc) → distance Downloads→Accessori = 28+38=66 vs Accessori→Portfolio = 0+38=38 (visibile +28px). Mobile reset linee 2259 _mobile-touch.css azzera solo margin-left/right (per width 100%), NON verticale. Reset esplicito qui per compact-narrow. */ body.ds-vp-compact-narrow .downloads-card.widget.widget--glass-pro, body.ds-vp-compact-narrow section#specs-card.specs-card, body.ds-vp-compact-narrow #photometrics .photometrics{ margin-top: 0 !important; margin-bottom: 0 !important; } /* ───────────────────────────────────────────────────────── DOWNLOADS HEAD — sess.40 fix d): pulsanti filtro ─────────────────────────────────────────────────────── Default `.dl-head` flex space-between → label a sinistra, 6 filtri (TUTTI/MANUALE/DATASHEET/DMX/GLB/CAD) raggruppati a destra → vuoto al centro "goffo". Su mobile `<640px` la regola esistente (downloads.css:152) usa `flex-direction: column`. Replico pattern su compact-narrow: label sopra, filtri sotto. Filtri possono wrappare in 2 righe naturalmente, ma allineati sx come content row. ───────────────────────────────────────────────────────── */ body.ds-vp-compact-narrow .downloads-card .dl-head{ flex-direction: column; align-items: stretch; gap: 10px; } body.ds-vp-compact-narrow .downloads-card .dl-filter{ justify-content: flex-start; } /* ───────────────────────────────────────────────────────── KF ticker pill width — sess.39 Decisione A (rivista): mobile 150px su 1150 viewport → 7.67 pill visibili (troppo denso). Utente sess.39: "ticker 3-pill visibili". Override pill width clamp così da ~3 pill visibili insieme mantenendo ticker animation pattern. ───────────────────────────────────────────────────────── */ body.ds-vp-compact-narrow .kf-list.kf-mobile .feature-pill{ width: clamp(280px, 32vw, 380px) !important; min-width: clamp(280px, 32vw, 380px) !important; max-width: clamp(280px, 32vw, 380px) !important; min-height: 60px !important; height: 60px !important; } /* ───────────────────────────────────────────────────────── VERIFICATO sess.39 a 1150x800 (preview): ✅ body class duale `ds-vp-compact-narrow ds-vp-app` ✅ Mobile titlebar visible (h 72) ✅ pm-extend-cta + pm-export-cta visibili (mobile pattern) ✅ KF ticker mobile attivo (kf-mobile kf-ticker) ✅ Hero aspect 1:1 portrait + maximize button "↗" ✅ Photometrics widget full-width + cono SVG fullscreen ───────────────────────────────────────────────────────── PENDING incrementale: □ Font scale +1-2px titoli widget (se necessario dopo test) □ Padding inline widget +4-8px per respiro (se necessario) □ Hero card max-width review desktop-y (per >1200) □ Verifica DSDropdown trigger CCT/ZOOM/UNITS/RFQ/DMX ───────────────────────────────────────────────────────── */ }