/* ========================================================================== ASGroup 2026 — Skin del Configuratore 3D (v5 — solo colori/stile) -------------------------------------------------------------------------- DUE ZONE, contrasto netto: • CHROME (pannello controlli, topbar, dock, pagina) = CHIARO, come il sito. • VIEWER 3D (il "palco") = SCURO, così il modello bianco è ben leggibile. Senza modificare i CSS del plugin. Caricata SOLO su /configuratore-3d/ (inc/enqueue.php), quindi può usare selettori scoped al wrapper E a livello body (per i nodi portati su ). La scena 3D è WebGL (three-scene.js): resta lo sfondo scuro originale del plugin (file ripristinato all'originale). Specificità: il plugin usa fino a 2 ID + !important. Prefisso "ID-boosted" body.asgroup-theme #asg-configuratore-wrapper:not(#asg-x).asg-shell-immersive ( :not(#asg-x) aggiunge +1 ID ⇒ 2 ID, batte tutte le regole a ≤2 ID ). ESCLUSIONI: icone Font Awesome, campioni colore RAL (.asg-swatch*), canvas 3D. ========================================================================== */ /* ========================================================================== 1) BLEED GLOBALE — il plugin forza l'INTERA pagina scura (overrides.css Fase 20/21). Neutralizzato: hero/feature/CTA del tema tornano chiari. ========================================================================== */ :root { background: var(--ag-surface) !important; } body.asgroup-theme.ag-has-configurator:not(#asg-x), body.asgroup-theme:has(#asg-configuratore-wrapper), body.asgroup-theme.ag-has-configurator:not(#asg-x) #page, body.asgroup-theme.ag-has-configurator:not(#asg-x) .site, body.asgroup-theme.ag-has-configurator:not(#asg-x) .site-content, body.asgroup-theme.ag-has-configurator:not(#asg-x) .entry-content, body.asgroup-theme.ag-has-configurator:not(#asg-x) .wp-site-blocks { background: var(--ag-surface) !important; } body.asgroup-theme.ag-has-configurator:not(#asg-x)::before, body.asgroup-theme:has(#asg-configuratore-wrapper)::before { background: var(--ag-surface) !important; } body.asgroup-theme #asg-configuratore-wrapper:not(#asg-x), body.asgroup-theme .asg-plugin-container:not(#asg-x) { background: var(--ag-surface) !important; } /* ========================================================================== 2) PALETTE — variabili del plugin rimappate ai token del sito. NB: --f5-stage-* restano SCURI (sono lo sfondo del viewer 3D). ========================================================================== */ body.asgroup-theme #asg-configuratore-wrapper, body.asgroup-theme .asg-plugin-container { --asg-primary: var(--ag-accent); --asg-primary-500-hex: var(--ag-accent); --asg-primary-300-hex: var(--ag-accent); --asg-primary-700-hex: var(--ag-accent-strong); --asg-on-primary: var(--ag-accent-ink); --asg-secondary: var(--ag-accent-strong); --asg-accent: var(--ag-accent-strong); --asg-accent-500-hex: var(--ag-accent-strong); --asg-focus-ring-hex: var(--ag-accent); --asg-bg: var(--ag-surface); --asg-surface: var(--ag-surface-2); --asg-card: var(--ag-white); --asg-text: var(--ag-ink); --asg-muted: var(--ag-muted); --asg-border: var(--ag-line); } body.asgroup-theme #asg-configuratore-wrapper:not(#asg-x).asg-shell-immersive { --f5-accent: var(--ag-accent); --f5-accent-soft: var(--ag-accent); --f5-accent-strong: var(--ag-accent-strong); --f5-accent-contrast: var(--ag-accent-ink); --f5-accent-2: var(--ag-accent-strong); --f5-focus: var(--ag-accent); /* chrome chiaro */ --f5-glass: var(--ag-white); --f5-glass-2: var(--ag-white); --f5-line: var(--ag-line); --f5-line-2: var(--ag-line-2); --f5-text: var(--ag-ink); --f5-muted: var(--ag-muted); /* --f5-stage-* = SCURI (palco viewer 3D): valori originali del plugin */ --f5-stage-1: #0b1426; --f5-stage-2: #060d1a; --f5-stage-3: #03070f; } /* ========================================================================== 3) TESTO scuro DENTRO il wrapper (scoped → non tocca il footer scuro del sito). Il viewer (isola scura) viene ri-schiarito nella sezione 9. NIENTE font-family (romperebbe le icone Font Awesome). ========================================================================== */ body.asgroup-theme #asg-configuratore-wrapper:not(#asg-x).asg-shell-immersive, body.asgroup-theme #asg-configuratore-wrapper:not(#asg-x).asg-shell-immersive * { color: var(--ag-ink) !important; } body.asgroup-theme #asg-configuratore-wrapper:not(#asg-x).asg-shell-immersive *:not(.asg-swatch):not([class*="swatch"]) { border-color: var(--ag-line) !important; } /* gerarchia: microcopy/etichette attenuate */ body.asgroup-theme #asg-configuratore-wrapper:not(#asg-x).asg-shell-immersive .asg-section-microcopy, body.asgroup-theme #asg-configuratore-wrapper:not(#asg-x).asg-shell-immersive .form-col label, body.asgroup-theme #asg-configuratore-wrapper:not(#asg-x).asg-shell-immersive .control-group > p { color: var(--ag-muted) !important; } /* ========================================================================== 4) SUPERFICI CHIARE del chrome (pannelli, card, topbar, dock, step). (NON include il viewer: vedi sezione 9.) ========================================================================== */ body.asgroup-theme #asg-configuratore-wrapper:not(#asg-x).asg-shell-immersive .asg-controls-col, body.asgroup-theme #asg-configuratore-wrapper:not(#asg-x).asg-shell-immersive .asg-controls-body, body.asgroup-theme #asg-configuratore-wrapper:not(#asg-x).asg-shell-immersive .asg-controls-head, body.asgroup-theme #asg-configuratore-wrapper:not(#asg-x).asg-shell-immersive [class*="asg-controls-header"], body.asgroup-theme #asg-configuratore-wrapper:not(#asg-x).asg-shell-immersive .asg-topbar, body.asgroup-theme #asg-configuratore-wrapper:not(#asg-x).asg-shell-immersive .asg-dock, body.asgroup-theme #asg-configuratore-wrapper:not(#asg-x).asg-shell-immersive .asg-step-view { background: var(--ag-surface) !important; border-color: var(--ag-line) !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } /* Card del chrome → bianche con bordo + ombra leggera */ body.asgroup-theme #asg-configuratore-wrapper:not(#asg-x).asg-shell-immersive .control-group, body.asgroup-theme #asg-configuratore-wrapper:not(#asg-x).asg-shell-immersive .asg-config-section, body.asgroup-theme #asg-configuratore-wrapper:not(#asg-x).asg-shell-immersive .asg-final-summary-card, body.asgroup-theme #asg-configuratore-wrapper:not(#asg-x).asg-shell-immersive #asg-section-dimensions, body.asgroup-theme #asg-configuratore-wrapper:not(#asg-x).asg-shell-immersive [class*="-panel"], body.asgroup-theme #asg-configuratore-wrapper:not(#asg-x).asg-shell-immersive [class*="-card"], body.asgroup-theme #asg-configuratore-wrapper:not(#asg-x).asg-shell-immersive [class*="-modal"], body.asgroup-theme #asg-configuratore-wrapper:not(#asg-x).asg-shell-immersive .asg-modal-content, body.asgroup-theme #asg-configuratore-wrapper:not(#asg-x).asg-shell-immersive [class*="-section"]:not(.asg-section-microcopy), body.asgroup-theme #asg-configuratore-wrapper:not(#asg-x).asg-shell-immersive [class*="-field"], body.asgroup-theme #asg-configuratore-wrapper:not(#asg-x).asg-shell-immersive [class*="-group"]:not(.asg-swatch-group), body.asgroup-theme #asg-configuratore-wrapper:not(#asg-x).asg-shell-immersive [class*="-shell"], body.asgroup-theme #asg-configuratore-wrapper:not(#asg-x).asg-shell-immersive [class*="-summary"], body.asgroup-theme #asg-configuratore-wrapper:not(#asg-x).asg-shell-immersive [class*="-meta"], body.asgroup-theme #asg-configuratore-wrapper:not(#asg-x).asg-shell-immersive [class*="-footer"] { background: var(--ag-white) !important; border-color: var(--ag-line) !important; box-shadow: var(--ag-shadow-sm) !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } /* riga decorativa sopra le card (gradiente del plugin) → bordo tenue */ body.asgroup-theme #asg-configuratore-wrapper:not(#asg-x).asg-shell-immersive .control-group::before, body.asgroup-theme #asg-configuratore-wrapper:not(#asg-x).asg-shell-immersive .asg-config-section::before { background: var(--ag-line) !important; } /* Pill / tab / step / chip generici → chiari */ body.asgroup-theme #asg-configuratore-wrapper:not(#asg-x).asg-shell-immersive [class*="-pill"], body.asgroup-theme #asg-configuratore-wrapper:not(#asg-x).asg-shell-immersive [class*="-tab"], body.asgroup-theme #asg-configuratore-wrapper:not(#asg-x).asg-shell-immersive .asg-topstep, body.asgroup-theme #asg-configuratore-wrapper:not(#asg-x).asg-shell-immersive [class*="choice"] { background: var(--ag-surface-2) !important; border-color: var(--ag-line-2) !important; box-shadow: none !important; } /* ========================================================================== 5) CARD INTERNE che erano navy-translucido (= grigio su bianco). Sliders e swatch: wrapper esterno trasparente, card interna chiara. ========================================================================== */ /* contenitori esterni → trasparenti (erano rgba(2,8,18,.42) ecc.): così il BOX visibile è la card interna, su sfondo pannello pulito. */ body.asgroup-theme #asg-configuratore-wrapper:not(#asg-x).asg-shell-immersive .form-col, body.asgroup-theme #asg-configuratore-wrapper:not(#asg-x).asg-shell-immersive .asg-form-col-full, body.asgroup-theme #asg-configuratore-wrapper:not(#asg-x).asg-shell-immersive .form-row-full { background: transparent !important; border-color: transparent !important; box-shadow: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } /* BOX BIANCHI con contrasto perfetto: slider misure + swatch colore. Bianchi pieni, bordo netto (--ag-line-2) + ombra → staccano sul pannello. */ body.asgroup-theme #asg-configuratore-wrapper:not(#asg-x).asg-shell-immersive .asg-measure-slider, body.asgroup-theme #asg-configuratore-wrapper:not(#asg-x).asg-shell-immersive .asg-swatch-wrapper { background: var(--ag-white) !important; border: 1px solid var(--ag-line-2) !important; box-shadow: var(--ag-shadow-sm) !important; } /* il pannello che li contiene leggermente tinto (surface-2) → i box BIANCHI risaltano nettamente: contrasto perfetto senza bordi pesanti. */ body.asgroup-theme #asg-configuratore-wrapper:not(#asg-x).asg-shell-immersive .control-group, body.asgroup-theme #asg-configuratore-wrapper:not(#asg-x).asg-shell-immersive .asg-config-section, body.asgroup-theme #asg-configuratore-wrapper:not(#asg-x).asg-shell-immersive #asg-section-dimensions, body.asgroup-theme #asg-configuratore-wrapper:not(#asg-x).asg-shell-immersive #asg-section-finishes { background: var(--ag-surface-2) !important; } /* stepper (se usato al posto degli slider) → chiaro */ body.asgroup-theme #asg-configuratore-wrapper:not(#asg-x).asg-shell-immersive .asg-stepper-container { background: var(--ag-surface-2) !important; border-color: var(--ag-line) !important; box-shadow: none !important; } body.asgroup-theme #asg-configuratore-wrapper:not(#asg-x).asg-shell-immersive .btn-stepper { background: var(--ag-white) !important; border-color: var(--ag-line-2) !important; color: var(--ag-ink) !important; } /* Selezione modello (prima schermata) → card chiare */ body.asgroup-theme #asg-configuratore-wrapper:not(#asg-x).asg-shell-immersive .asg-model-choice-guide, body.asgroup-theme #asg-configuratore-wrapper:not(#asg-x).asg-shell-immersive .asg-choice-guide-item, body.asgroup-theme #asg-configuratore-wrapper:not(#asg-x).asg-shell-immersive .asg-models-grid > *, body.asgroup-theme #asg-configuratore-wrapper:not(#asg-x).asg-shell-immersive .asg-models-grid [class*="card"], body.asgroup-theme #asg-configuratore-wrapper:not(#asg-x).asg-shell-immersive .asg-models-grid button { background: var(--ag-white) !important; border-color: var(--ag-line) !important; box-shadow: var(--ag-shadow-sm) !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } /* ========================================================================== 6) CAMPI input/select/textarea/range + slider misure ========================================================================== */ body.asgroup-theme #asg-configuratore-wrapper:not(#asg-x).asg-shell-immersive input, body.asgroup-theme #asg-configuratore-wrapper:not(#asg-x).asg-shell-immersive select, body.asgroup-theme #asg-configuratore-wrapper:not(#asg-x).asg-shell-immersive textarea, body.asgroup-theme #asg-configuratore-wrapper:not(#asg-x).asg-shell-immersive .asg-modal-input { background: var(--ag-white) !important; border-color: var(--ag-line-2) !important; color: var(--ag-ink) !important; } body.asgroup-theme #asg-configuratore-wrapper:not(#asg-x).asg-shell-immersive input::placeholder, body.asgroup-theme #asg-configuratore-wrapper:not(#asg-x).asg-shell-immersive textarea::placeholder { color: var(--ag-muted) !important; } body.asgroup-theme #asg-configuratore-wrapper:not(#asg-x).asg-shell-immersive input[type="range"] { accent-color: var(--ag-accent) !important; } /* readout + label/axis/ticks dello slider misure */ body.asgroup-theme #asg-configuratore-wrapper:not(#asg-x).asg-shell-immersive .asg-measure-readout, body.asgroup-theme #asg-configuratore-wrapper:not(#asg-x).asg-shell-immersive .asg-measure-readout .stepper-value-number { color: var(--ag-ink) !important; } body.asgroup-theme #asg-configuratore-wrapper:not(#asg-x).asg-shell-immersive .asg-measure-readout b { color: var(--ag-accent-strong) !important; } body.asgroup-theme #asg-configuratore-wrapper:not(#asg-x).asg-shell-immersive .asg-measure-axis, body.asgroup-theme #asg-configuratore-wrapper:not(#asg-x).asg-shell-immersive .asg-measure-readout small, body.asgroup-theme #asg-configuratore-wrapper:not(#asg-x).asg-shell-immersive .asg-measure-readout .stepper-value-unit, body.asgroup-theme #asg-configuratore-wrapper:not(#asg-x).asg-shell-immersive .asg-measure-ticks { color: var(--ag-muted) !important; } /* traccia range (webkit/moz SEPARATI: raggrupparli invalida la regola) */ body.asgroup-theme #asg-configuratore-wrapper:not(#asg-x).asg-shell-immersive .asg-measure-range::-webkit-slider-runnable-track { background: linear-gradient(90deg, var(--ag-accent) 0 var(--f5-range-pct, 50%), var(--ag-line-2) var(--f5-range-pct, 50%) 100%) !important; } body.asgroup-theme #asg-configuratore-wrapper:not(#asg-x).asg-shell-immersive .asg-measure-range::-moz-range-track { background: var(--ag-line-2) !important; } body.asgroup-theme #asg-configuratore-wrapper:not(#asg-x).asg-shell-immersive .asg-measure-range::-moz-range-progress { background: var(--ag-accent) !important; } body.asgroup-theme #asg-configuratore-wrapper:not(#asg-x).asg-shell-immersive .asg-measure-range::-webkit-slider-thumb { background: var(--ag-white) !important; border-color: var(--ag-accent) !important; box-shadow: var(--ag-shadow-sm) !important; } body.asgroup-theme #asg-configuratore-wrapper:not(#asg-x).asg-shell-immersive .asg-measure-range::-moz-range-thumb { background: var(--ag-white) !important; border-color: var(--ag-accent) !important; box-shadow: var(--ag-shadow-sm) !important; } /* ========================================================================== 7) DOCK prezzo + barra riepilogo ========================================================================== */ body.asgroup-theme #asg-configuratore-wrapper:not(#asg-x).asg-shell-immersive .asg-inline-price-panel.asg-inline-price-panel-docked { background: var(--ag-white) !important; border: 1px solid var(--ag-line-2) !important; box-shadow: var(--ag-shadow-md) !important; } /* contorno netto anche sulla topbar (coerenza con la barra riepilogo) */ body.asgroup-theme #asg-configuratore-wrapper:not(#asg-x).asg-shell-immersive .asg-topbar { border: 1px solid var(--ag-line-2) !important; } body.asgroup-theme #asg-configuratore-wrapper:not(#asg-x).asg-shell-immersive .asg-dock-eyebrow { background: var(--ag-accent-tint) !important; border-color: var(--ag-line-2) !important; color: var(--ag-accent-strong) !important; } body.asgroup-theme #asg-configuratore-wrapper:not(#asg-x).asg-shell-immersive .price-value, body.asgroup-theme #asg-configuratore-wrapper:not(#asg-x).asg-shell-immersive .asg-topbar-price { color: var(--ag-accent-strong) !important; } body.asgroup-theme #asg-configuratore-wrapper:not(#asg-x).asg-shell-immersive .price-label, body.asgroup-theme #asg-configuratore-wrapper:not(#asg-x).asg-shell-immersive .asg-summary-col-label { color: var(--ag-muted) !important; } body.asgroup-theme #asg-configuratore-wrapper:not(#asg-x).asg-shell-immersive .asg-summary-col-value { color: var(--ag-ink) !important; } body.asgroup-theme #asg-configuratore-wrapper:not(#asg-x).asg-shell-immersive .asg-summary-col-icon, body.asgroup-theme #asg-configuratore-wrapper:not(#asg-x).asg-shell-immersive .asg-summary-col-icon i { background: var(--ag-accent-tint) !important; border-color: var(--ag-line-2) !important; color: var(--ag-accent-strong) !important; } /* disclaimer: il plugin duplica il testo (testo reale + ::before identico). Mostro il testo reale UNA volta e nascondo il ::before duplicato. */ body.asgroup-theme #asg-configuratore-wrapper:not(#asg-x).asg-shell-immersive .asg-inline-disclaimer { font-size: var(--ag-fs-xs) !important; line-height: 1.45 !important; color: var(--ag-muted) !important; } body.asgroup-theme #asg-configuratore-wrapper:not(#asg-x).asg-shell-immersive .asg-inline-disclaimer::before { content: none !important; display: none !important; } body.asgroup-theme #asg-configuratore-wrapper:not(#asg-x).asg-shell-immersive .asg-inline-disclaimer i { display: inline-block !important; color: var(--ag-muted) !important; font-size: 14px !important; } body.asgroup-theme #asg-configuratore-wrapper:not(#asg-x).asg-shell-immersive .asg-dock-vat-note { color: var(--ag-ink) !important; } /* ========================================================================== 8) STATI ATTIVI/SELEZIONATI e CTA → accento blu del sito, testo chiaro. ========================================================================== */ body.asgroup-theme #asg-configuratore-wrapper:not(#asg-x).asg-shell-immersive [class*="-pill"].is-active, body.asgroup-theme #asg-configuratore-wrapper:not(#asg-x).asg-shell-immersive [class*="-pill"].is-active *, body.asgroup-theme #asg-configuratore-wrapper:not(#asg-x).asg-shell-immersive [class*="-pill"][aria-pressed="true"], body.asgroup-theme #asg-configuratore-wrapper:not(#asg-x).asg-shell-immersive [class*="-pill"][aria-pressed="true"] *, body.asgroup-theme #asg-configuratore-wrapper:not(#asg-x).asg-shell-immersive [class*="-tab"].is-active, body.asgroup-theme #asg-configuratore-wrapper:not(#asg-x).asg-shell-immersive [class*="-tab"].is-active *, body.asgroup-theme #asg-configuratore-wrapper:not(#asg-x).asg-shell-immersive .asg-topstep.is-active, body.asgroup-theme #asg-configuratore-wrapper:not(#asg-x).asg-shell-immersive .asg-topstep.is-active *, body.asgroup-theme #asg-configuratore-wrapper:not(#asg-x).asg-shell-immersive [class*="choice"].is-selected, body.asgroup-theme #asg-configuratore-wrapper:not(#asg-x).asg-shell-immersive [class*="choice"].is-selected * { background: var(--ag-accent) !important; border-color: var(--ag-accent) !important; color: var(--ag-accent-ink) !important; box-shadow: none !important; } /* CTA primari (PREVENTIVO topbar/dock, PDF, richiedi-preventivo) */ body.asgroup-theme #asg-configuratore-wrapper:not(#asg-x).asg-shell-immersive [class*="cta"], body.asgroup-theme #asg-configuratore-wrapper:not(#asg-x).asg-shell-immersive [class*="cta"] *, body.asgroup-theme #asg-configuratore-wrapper:not(#asg-x).asg-shell-immersive .btn-primary, body.asgroup-theme #asg-configuratore-wrapper:not(#asg-x).asg-shell-immersive .btn-primary *, body.asgroup-theme #asg-configuratore-wrapper:not(#asg-x).asg-shell-immersive [class*="topbar-cta"], body.asgroup-theme #asg-configuratore-wrapper:not(#asg-x).asg-shell-immersive [class*="topbar-cta"] *, body.asgroup-theme #asg-configuratore-wrapper:not(#asg-x).asg-shell-immersive #btn-request-quote, body.asgroup-theme #asg-configuratore-wrapper:not(#asg-x).asg-shell-immersive #btn-request-quote *, body.asgroup-theme #asg-configuratore-wrapper:not(#asg-x).asg-shell-immersive #btn-generate-pdf, body.asgroup-theme #asg-configuratore-wrapper:not(#asg-x).asg-shell-immersive #btn-generate-pdf * { background: var(--ag-accent) !important; border-color: var(--ag-accent) !important; color: var(--ag-accent-ink) !important; } body.asgroup-theme #asg-configuratore-wrapper:not(#asg-x).asg-shell-immersive [class*="cta"]:hover, body.asgroup-theme #asg-configuratore-wrapper:not(#asg-x).asg-shell-immersive .btn-primary:hover, body.asgroup-theme #asg-configuratore-wrapper:not(#asg-x).asg-shell-immersive [class*="topbar-cta"]:hover { background: var(--ag-accent-strong) !important; border-color: var(--ag-accent-strong) !important; } /* icone nei titoli sezione → accento */ body.asgroup-theme #asg-configuratore-wrapper:not(#asg-x).asg-shell-immersive .control-group h3 i, body.asgroup-theme #asg-configuratore-wrapper:not(#asg-x).asg-shell-immersive .asg-config-section h3 i { color: var(--ag-accent) !important; } /* ========================================================================== 9) VIEWER 3D = ISOLA SCURA (palco scuro → modello bianco leggibile). Lo sfondo scuro arriva da three-scene.js (WebGL) + --f5-stage scuri. Qui: ri-schiarisco SOLO il testo degli overlay (sovrascrive l'ink universale della sez. 3) e NASCONDO i tag scena richiesti. ========================================================================== */ /* testo overlay del viewer → chiaro (default su scuro) */ body.asgroup-theme #asg-configuratore-wrapper:not(#asg-x).asg-shell-immersive .asg-viewer-overlay, body.asgroup-theme #asg-configuratore-wrapper:not(#asg-x).asg-shell-immersive .asg-viewer-overlay * { color: var(--ag-on-ink) !important; } /* --- BOX dietro i badge in alto a sx: era catturato da [class*="-meta"] → lo rendo trasparente (i badge "galleggiano" sul viewer scuro) --- */ body.asgroup-theme #asg-configuratore-wrapper:not(#asg-x).asg-shell-immersive .asg-viewer-top-info, body.asgroup-theme #asg-configuratore-wrapper:not(#asg-x).asg-shell-immersive .asg-viewer-top-meta, body.asgroup-theme #asg-configuratore-wrapper:not(#asg-x).asg-shell-immersive .asg-viewer-summary { background: transparent !important; border: 0 !important; box-shadow: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } /* --- BARRA TASTI del viewer → un'unica toolbar BIANCA, segmentata ed elegante --- */ body.asgroup-theme #asg-configuratore-wrapper:not(#asg-x).asg-shell-immersive .asg-viewer-controls { background: var(--ag-white) !important; border: 1px solid var(--ag-line) !important; border-radius: var(--ag-radius-pill) !important; box-shadow: var(--ag-shadow-md) !important; padding: 5px !important; gap: 2px !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } /* bottoni: trasparenti DENTRO la barra, testo/icona blu */ body.asgroup-theme #asg-configuratore-wrapper:not(#asg-x).asg-shell-immersive .asg-viewer-controls .btn-sm { background: transparent !important; border: 0 !important; box-shadow: none !important; border-radius: var(--ag-radius-pill) !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; transition: background .18s ease, color .18s ease !important; } body.asgroup-theme #asg-configuratore-wrapper:not(#asg-x).asg-shell-immersive .asg-viewer-controls .btn-sm, body.asgroup-theme #asg-configuratore-wrapper:not(#asg-x).asg-shell-immersive .asg-viewer-controls .btn-sm * { color: var(--ag-accent-strong) !important; } /* hover → tinta azzurra tenue */ body.asgroup-theme #asg-configuratore-wrapper:not(#asg-x).asg-shell-immersive .asg-viewer-controls .btn-sm:hover { background: var(--ag-accent-tint) !important; } body.asgroup-theme #asg-configuratore-wrapper:not(#asg-x).asg-shell-immersive .asg-viewer-controls .btn-sm:hover, body.asgroup-theme #asg-configuratore-wrapper:not(#asg-x).asg-shell-immersive .asg-viewer-controls .btn-sm:hover * { color: var(--ag-accent-strong) !important; } /* tasto ATTIVO → accento pieno, testo bianco (specificità +) */ body.asgroup-theme #asg-configuratore-wrapper:not(#asg-x).asg-shell-immersive .asg-viewer-controls .btn-sm.asg-btn-active, body.asgroup-theme #asg-configuratore-wrapper:not(#asg-x).asg-shell-immersive .asg-viewer-controls .btn-sm.asg-btn-active *, body.asgroup-theme #asg-configuratore-wrapper:not(#asg-x).asg-shell-immersive .asg-btn-active, body.asgroup-theme #asg-configuratore-wrapper:not(#asg-x).asg-shell-immersive .asg-btn-active * { background: var(--ag-accent) !important; border-color: var(--ag-accent) !important; color: var(--ag-accent-ink) !important; } /* --- BOX in alto a sinistra del viewer (badge + chip + hint) puliti --- */ /* "VIEWER 3D LIVE" → pill bianca, testo/icona blu */ body.asgroup-theme #asg-configuratore-wrapper:not(#asg-x).asg-shell-immersive .asg-viewer-overlay .badge { background: var(--ag-white) !important; border: 1px solid var(--ag-line) !important; color: var(--ag-accent-strong) !important; box-shadow: var(--ag-shadow-sm) !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } body.asgroup-theme #asg-configuratore-wrapper:not(#asg-x).asg-shell-immersive .asg-viewer-overlay .badge i { color: var(--ag-accent) !important; } /* chip dimensioni "L · P" → pill bianca, testo ink */ body.asgroup-theme #asg-configuratore-wrapper:not(#asg-x).asg-shell-immersive .asg-viewer-dimension-chip { background: var(--ag-white) !important; border: 1px solid var(--ag-line) !important; color: var(--ag-ink) !important; box-shadow: var(--ag-shadow-sm) !important; } /* hint "Trascina per ruotare" → solo testo chiaro, NESSUN box */ body.asgroup-theme #asg-configuratore-wrapper:not(#asg-x).asg-shell-immersive .asg-drag-hint { background: transparent !important; border: 0 !important; box-shadow: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; color: var(--ag-on-ink) !important; } /* RIMOZIONE richiesta: tag scena (Terrazza/Giardino/Piscina · Mezzogiorno/…) */ body.asgroup-theme #asg-configuratore-wrapper:not(#asg-x).asg-shell-immersive .asg-viewer-scene-presets { display: none !important; } /* --- BARRA RIEPILOGO a TUTTA LARGHEZZA (layout NATIVO del plugin) --- Il plugin definisce già .asg-grid { grid-template-areas:"viewer controls" "dock dock" } e .asg-viewer-bottom-dock { grid-area:dock; width:min(100%, 1180px) }, MA il dock è annidato in .asg-viewer-stack (display:flex) e quindi non diventa grid-item → resta largo come il viewer. Con display:contents sullo stack, viewer-col e dock diventano grid-item diretti e il dock si stende su tutta la riga "dock dock" come previsto. Niente overflow, niente hack. Escluso l'inspect/fullscreen (lì lo stack serve come box). */ body.asgroup-theme #asg-configuratore-wrapper:not(#asg-x).asg-shell-immersive.asg-state-configurator .asg-viewer-stack:not(.asg-viewer-inspect) { display: contents !important; } body.asgroup-theme #asg-configuratore-wrapper:not(#asg-x).asg-shell-immersive.asg-state-configurator .asg-viewer-col { grid-area: viewer !important; } /* ========================================================================== 10) ELEMENTI "PORTATI" su (FUORI dal wrapper): modale lead + nav-step. Liste ESPLICITE: mai `body *` (romperebbe il footer scuro del sito). ========================================================================== */ /* --- nav-step fissa #asg-config-section-footer-nav (sopra la pagina chiara) --- */ body.asgroup-theme #asg-config-section-footer-nav.asg-config-section-footer-nav, body.asgroup-theme #asg-config-section-footer-nav .asg-config-nav-pill { background: var(--ag-white) !important; border-color: var(--ag-line) !important; box-shadow: var(--ag-shadow-md) !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } body.asgroup-theme #asg-config-section-footer-nav, body.asgroup-theme #asg-config-section-footer-nav * { color: var(--ag-ink) !important; } body.asgroup-theme #asg-config-section-footer-nav [class*="next"], body.asgroup-theme #asg-config-section-footer-nav [class*="next"] *, body.asgroup-theme #asg-config-section-footer-nav .is-primary, body.asgroup-theme #asg-config-section-footer-nav .is-primary * { background: var(--ag-accent) !important; border-color: var(--ag-accent) !important; color: var(--ag-accent-ink) !important; } /* --- modale lead/contatto (#asg-lead-modal, portalizzato su body) --- Prefisso "ID-boosted" :not(#asg-x) per battere le regole `.is-contact-mode` del plugin (stessa specificità → vincerei solo per ordine; col boost vinco sempre). Tutto CHIARO + accento azzurro del sito (via i teal/gradient). */ body.asgroup-theme #asg-lead-modal.asg-modal-overlay, body.asgroup-theme .asg-modal-overlay.asg-modal-portalized { background: rgb(var(--ag-scrim) / 0.55) !important; } /* contenitore + pannelli */ body.asgroup-theme #asg-lead-modal:not(#asg-x) .asg-modal-content, body.asgroup-theme #asg-lead-modal:not(#asg-x) .asg-modal-content.asg-modal-wide { background: var(--ag-white) !important; border-color: var(--ag-line) !important; } body.asgroup-theme #asg-lead-modal:not(#asg-x) .asg-modal-left { background: var(--ag-accent-tint) !important; border-color: var(--ag-line) !important; } body.asgroup-theme #asg-lead-modal:not(#asg-x) .asg-modal-card { background: var(--ag-white) !important; border-color: var(--ag-line) !important; box-shadow: none !important; } /* testo: scuro di default in tutto il modale */ body.asgroup-theme #asg-lead-modal:not(#asg-x) .asg-modal-left, body.asgroup-theme #asg-lead-modal:not(#asg-x) .asg-modal-left h3, body.asgroup-theme #asg-lead-modal:not(#asg-x) .asg-modal-right, body.asgroup-theme #asg-lead-modal:not(#asg-x) .asg-modal-right * { color: var(--ag-ink) !important; } /* attenuati: sottotitoli, etichette, microcopy */ body.asgroup-theme #asg-lead-modal:not(#asg-x) .asg-modal-subtitle, body.asgroup-theme #asg-lead-modal:not(#asg-x) #asg-modal-subtitle, body.asgroup-theme #asg-lead-modal:not(#asg-x) .asg-modal-section-title, body.asgroup-theme #asg-lead-modal:not(#asg-x) .asg-field-group label, body.asgroup-theme #asg-lead-modal:not(#asg-x) .asg-modal-stat-label, body.asgroup-theme #asg-lead-modal:not(#asg-x) .asg-upload-copy small { color: var(--ag-muted) !important; } /* accenti azzurri del sito (al posto del teal): eyebrow, "Preventivo", icone */ body.asgroup-theme #asg-lead-modal:not(#asg-x) .asg-modal-eyebrow, body.asgroup-theme #asg-lead-modal:not(#asg-x) .asg-modal-section-title i, body.asgroup-theme #asg-lead-modal:not(#asg-x) .asg-modal-left-footer, body.asgroup-theme #asg-lead-modal:not(#asg-x) .asg-modal-left-footer a { color: var(--ag-accent-strong) !important; } body.asgroup-theme #asg-lead-modal:not(#asg-x) .gradient-text { background: none !important; color: var(--ag-accent-strong) !important; -webkit-text-fill-color: var(--ag-accent-strong) !important; } /* eyebrow come chip tenue */ body.asgroup-theme #asg-lead-modal:not(#asg-x) .asg-modal-eyebrow { background: var(--ag-accent-tint) !important; border-color: var(--ag-line-2) !important; } /* icona decorativa (era gradiente teal) → accento pieno */ body.asgroup-theme #asg-lead-modal:not(#asg-x) .asg-modal-icon { background: var(--ag-accent) !important; color: var(--ag-accent-ink) !important; } /* stat-card (OUTPUT / EXTRA / PRIVACY) → card bianche su pannello tinta */ body.asgroup-theme #asg-lead-modal:not(#asg-x) .asg-modal-stat-card { background: var(--ag-white) !important; border: 1px solid var(--ag-line) !important; box-shadow: none !important; } body.asgroup-theme #asg-lead-modal:not(#asg-x) .asg-modal-stat-card strong { color: var(--ag-ink) !important; } /* campi input/textarea/upload → bianchi */ body.asgroup-theme #asg-lead-modal:not(#asg-x) .asg-modal-input, body.asgroup-theme #asg-lead-modal:not(#asg-x) .asg-upload-box { background: var(--ag-white) !important; border: 1px solid var(--ag-line-2) !important; color: var(--ag-ink) !important; } body.asgroup-theme #asg-lead-modal:not(#asg-x) .asg-modal-input::placeholder { color: var(--ag-muted) !important; } body.asgroup-theme #asg-lead-modal:not(#asg-x) .asg-modal-close-btn { background: var(--ag-surface-2) !important; color: var(--ag-ink) !important; } /* riga TOGGLE "Includi arredamento" (era barra scura) → chiara */ body.asgroup-theme #asg-lead-modal:not(#asg-x) .asg-toggle-option { background: var(--ag-surface-2) !important; border: 1px solid var(--ag-line-2) !important; } body.asgroup-theme #asg-lead-modal:not(#asg-x) .asg-toggle-slider { background: var(--ag-line-2) !important; } body.asgroup-theme #asg-lead-modal:not(#asg-x) .asg-toggle-option input:checked + .asg-toggle-slider { background: var(--ag-accent) !important; } /* pill categoria + barra consenso privacy (lo stile è sullo ) → chiari */ body.asgroup-theme #asg-lead-modal:not(#asg-x) .asg-choice-pill span { background: var(--ag-surface-2) !important; border-color: var(--ag-line-2) !important; color: var(--ag-ink) !important; } body.asgroup-theme #asg-lead-modal:not(#asg-x) .asg-choice-pill input:checked + span { background: var(--ag-accent) !important; border-color: var(--ag-accent) !important; color: var(--ag-accent-ink) !important; } body.asgroup-theme #asg-lead-modal:not(#asg-x) .asg-choice-pill input:checked + span * { color: var(--ag-accent-ink) !important; } /* link "Leggi privacy" dentro le pill → accento leggibile */ body.asgroup-theme #asg-lead-modal:not(#asg-x) .asg-choice-pill-consent a { color: var(--ag-accent-strong) !important; } /* CTA "GENERA PREVENTIVO PDF" (era gradiente teal) → accento del sito */ body.asgroup-theme #asg-lead-modal:not(#asg-x) .asg-modal-submit-btn, body.asgroup-theme #asg-lead-modal:not(#asg-x) .asg-modal-submit-btn * { background: linear-gradient(135deg, var(--ag-accent), var(--ag-accent-strong)) !important; border-color: var(--ag-accent) !important; color: var(--ag-accent-ink) !important; } body.asgroup-theme #asg-lead-modal:not(#asg-x) .asg-modal-submit-btn * { background: none !important; } body.asgroup-theme #asg-lead-modal:not(#asg-x) .asg-modal-submit-btn:hover { background: var(--ag-accent-strong) !important; } /* ========================================================================== 11) ESCLUSIONI — campioni colore RAL e canvas 3D intatti. ========================================================================== */ body.asgroup-theme #asg-configuratore-wrapper .asg-swatch, body.asgroup-theme #asg-configuratore-wrapper [class*="swatch"]:not(.asg-swatch-wrapper):not(.asg-swatch-group), body.asgroup-theme #asg-configuratore-wrapper #asg-3d-canvas, body.asgroup-theme #asg-configuratore-wrapper canvas { background: revert !important; box-shadow: revert !important; } body.asgroup-theme #asg-configuratore-wrapper .asg-swatch, body.asgroup-theme #asg-configuratore-wrapper .swatch-color { border-color: revert !important; }