/* ============================================================================= scatole-risoluzioni.css — RISOLUZIONI-2026-09-30 ============================================================================= Un solo foglio, stampato per ultimo (000706-scatole-risoluzioni.php), che adatta gli Studio, la scheda dell'interno e il carrello alle finestre SOTTO i 1700 px: portatili 1366x768 e 1536x864, 1440x900, tablet, e i monitor grandi con lo zoom del browser al 110-150%. LA REGOLA CHE NON SI TOCCA: da 1700 px in su NON CAMBIA NIENTE. Ogni blocco sta dentro una media query con un tetto di larghezza; il carrello ha un tetto di altezza. Il proprietario lavora su un monitor da ~2000 px e quello e' il riferimento: le prove prima/dopo a 1920 e 2560 devono restare identiche al pixel. LE FASCE (coerenti con scatole-studio-ui-b.css, che decide la struttura): >= 1700 come oggi. 1181 - 1699 tre colonne («banco stretto»): la corsia d'acquisto prende la larghezza che il disegno NON usa (vedi § 1). 768 - 1180 tablet e finestre piccole: palco a tutta larghezza, e SOTTO misure e acquisto affiancati (§ 3) invece di una colonna sola larga 1100 px e alta 5000. <= 767 il telefono di 000970/ui-b: non si tocca. SPECIFICITA': i selettori partono da `body #bl-studio` (0,1,1) — un livello sopra le regole di ui-b (`#bl-studio …`) e del guscio — cosi' vincono anche se un domani l'ordine dei fogli cambiasse. Un solo `!important`, spiegato dove sta (§ 4, il tema ridipinge i pulsanti). SPEGNIMENTO: ?risoluzioni=0 nell'indirizzo, oppure il filtro `scatole_risoluzioni_attive`. Togliendo questo file e il suo PHP il sito torna esattamente com'era. ========================================================================== */ /* ============================================================================= 1. BANCO STRETTO 1181-1699: la corsia prende la larghezza che il disegno non usa ----------------------------------------------------------------------------- MISURATO PRIMA. Il palco e' limitato dall'ALTEZZA: il riquadro del motore e' 1000x800, quindi il disegno e' largo 1,25 volte l'altezza del palco (--blb-alt). A 1366x768 il palco e' alto 423 → il disegno e' largo 529, ma il palco era largo 712: 183 px di grigio vuoto ai lati. Intanto la corsia d'acquisto era ferma a 280 px (238 di contenuto): la scheda dell'interno con il titolo su tre righe e «198 × 148 × 60 mm» su sette, gli scaglioni di quantita' schiacciati, «Technical check included» una parola per riga. LA REGOLA. La corsia vale: larghezza della finestra, meno il cassetto delle misure (300), meno imbottiture e fughe, meno il disegno (altezza × 1,25), meno 24 px d'aria. Fra 280 (com'era) e 360. Risultato: a 1366x768 la corsia passa da 280 a 360, a 1536x864 da 292 a 360, a 1440x900 da 280 a ~312, a 1680x1050 da 319 a ~351 — e il disegno resta ESATTAMENTE grande com'era, perche' gli si toglie solo il grigio che non usava. Lo Studio del cartone (interno sagomato) e' escluso: li' il disegno prende l'altezza dalla larghezza (height:auto, copione cartone) e la sua vista e' gia' divisa in due con l'editor delle sedi; togliergli larghezza lo rimpicciolirebbe. Lo si riconosce dall'editor (`.cartone-sedi`) con :has(). ========================================================================== */ @media (min-width: 1181px) and (max-width: 1699px) { body #bl-studio:not(:has(.cartone-sedi)) { --blb-rail: clamp(280px, calc(100vw - 300px - 2 * var(--blb-pad) - 2 * var(--blb-gap) - var(--blb-alt) * 1.25 - 24px), 360px); } /* --- la scheda «Add an internal insert» nella corsia --------------------- Le regole tipografiche dello Studio (`#bl-studio h2`, `#bl-studio p`) battono per specificita' quelle del motore degli interni (`.si-card h2`): il titolo usciva a 36,8 px e la riga «Dimensions matched … 198 × 148 × 60 mm» a 16,5 px, in una colonna da 208. Qui si ridanno alla scheda misure da scheda: titolo 20 px, testo 12-12,5 px, e la misura non si spezza mai. */ body #bl-studio .si-card h2 { font-size: 20px; line-height: 1.15; margin: 0 0 6px; } body #bl-studio .si-card:not(.is-locked) h2 { padding-right: 72px; } body #bl-studio .si-card .si-fit { font-size: 12px; line-height: 1.35; flex-wrap: wrap; row-gap: 2px; } body #bl-studio .si-card .si-fit b { white-space: nowrap; } body #bl-studio .si-card .si-card__body > p:not(.si-kicker):not(.si-fit) { font-size: 12.5px; line-height: 1.4; } body #bl-studio .si-card .si-gate__copy strong { font-size: 12px; } /* --- le tre rassicurazioni sotto il pulsante d'acquisto ------------------ Tre celle da 73-86 px con «Technical check included», «Vérification technique comprise», «Realizzato interamente in Italia»: una parola per riga. In colonna, con il pittogramma a sinistra, stanno su una riga. */ body #bl-studio .bl__rassicura { grid-template-columns: minmax(0, 1fr); gap: 6px; } body #bl-studio .bl__rassicura li { flex-direction: row; align-items: center; justify-content: flex-start; gap: 9px; text-align: left; } /* --- gli scaglioni di quantita' ------------------------------------------- Auto-adattivi da 68 px: tre per riga fino a ~300 px di contenuto, quattro da 306 in su. Prima erano quattro anche a 238 px (55 px l'uno, con «€5.30 ea» appoggiato ai bordi). */ body #bl-studio .bl__qty { grid-template-columns: repeat(auto-fit, minmax(68px, 1fr)); } /* --- Studio del cartone: l'editor delle sedi accanto al disegno ---------- Il copione cartone divide la vista in due da 1280 px in su: editor minmax(228,278) + disegno. A 1366 l'editor prendeva il massimo (278) e il disegno restava 416 px. Fisso l'editor al minimo: il disegno guadagna 50 px (+12%). Non tocco la variante 3D (una colonna sola). */ body #bl-studio .bl__vista:not(.is-3d):has(.cartone-sedi) { grid-template-columns: 228px minmax(0, 1fr); } } /* ============================================================================= 2. SCHERMI BASSI (fino a 900 px di altezza) con tre colonne ----------------------------------------------------------------------------- Il riquadro del prezzo cominciava a 715 px su una finestra alta 768. Il prezzo e' comunque sempre in vista nella barra in alto (specchio), ma il riquadro e' quello che il cliente legge: due ritocchi di aria, senza toccare il testo. Vale solo fra 1181 e 1699 px di larghezza: sopra non si tocca. ========================================================================== */ @media (min-width: 1181px) and (max-width: 1699px) and (max-height: 900px) { body #bl-studio .bl__acquisto { padding-top: 14px; } body #bl-studio .bl__prezzo { margin-top: 10px; padding: 14px 16px; } body #bl-studio .bl__qty { margin-bottom: 8px; } } /* ============================================================================= 3. TABLET E FINESTRE PICCOLE 768-1180: due colonne sotto il palco ----------------------------------------------------------------------------- MISURATO PRIMA (Base & Lid a 1024x768): una colonna sola, larga 995 px e alta 4886; le dodici carte diventavano piastrelle da 230 px, il prezzo stava a 3126 px dall'alto e il pulsante d'acquisto a 3981. Era il vestito del telefono allargato a un tablet. ADESSO: barra, palco a tutta larghezza (com'era), e sotto il cassetto delle misure e la corsia d'acquisto AFFIANCATI, ciascuno ~half schermo (490 px a 1024, 365 a 768 — i quattro campi misura stanno in due per riga fino a 300). Le regole di ui-b per «sotto i 1180» (palco statico, maniglia nascosta, altezza del palco) restano tutte: qui cambia solo la griglia. ========================================================================== */ @media (min-width: 768px) and (max-width: 1180px) { body #bl-studio, body #bl-studio.blb-chiuso { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "barra barra" "vista vista" "misure acquisto"; column-gap: var(--blb-gap); } body #bl-studio .bl__misure, body #bl-studio .bl__acquisto { align-self: start; min-width: 0; } /* Le rassicurazioni e gli scaglioni: stesse ragioni del § 1, colonne da 365-490 px. */ body #bl-studio .bl__qty { grid-template-columns: repeat(auto-fit, minmax(68px, 1fr)); } } /* Tablet in verticale (768-800): la barra sottile andava su due righe perche' «1 Measurements 2 Artwork 3 Quote» + misure + prezzo + Order fanno 755 px su 744 disponibili. Il totale esce dalla pastiglia del prezzo, come gia' fa il telefono: resta l'unitario, che e' quello che si confronta. */ @media (min-width: 768px) and (max-width: 800px) { body #bl-studio .blb-prezzo-t { display: none; } } /* ============================================================================= 3-bis. SAMPLE PACK: la sezione in fondo era inchiodata a 1600 px ----------------------------------------------------------------------------- MISURATO PRIMA: il contenitore Elementor 0cb2977 (la fascia «workshop / scatole.custom» con il carosello) ha `--width: 1600px` fisso. A 1536 px sborda di 32, a 1366 di 117 per lato (il testo comincia con «ORKSHOP»), a 768 di 416 per lato. L'overflow nascosto del tema lo taglia in silenzio. Larghezza al massimo quella della pagina; a 1920 e oltre (1952 disponibili) non cambia niente. ========================================================================== */ @media (max-width: 1699px) { body .elementor-3132 .elementor-element.elementor-element-0cb2977 { --width: min(1600px, 100%); } } /* ============================================================================= 4. CARRELLO: «Proceed to checkout» resta in vista ----------------------------------------------------------------------------- MISURATO PRIMA (1366x768): il pulsante stava a 1153 px dall'alto — una schermata e mezza — perche' il calcolatore di spedizione (paese, provincia, citta', CAP, «Update totals») e' aperto dentro la tabella dei totali. Non si puo' spostare il pulsante sopra la tabella (e' dopo di lei nel DOM e dentro la tabella non si riordina): lo si INCHIODA in basso finche' la sua posizione naturale non entra nello schermo. Sopra i 1100 px di altezza la posizione naturale e' gia' in vista: niente cambia. IL BANNER DEI COOKIE. Sta in basso al centro, ed e' un altro elemento fisso: se il pulsante fosse inchiodato mentre il banner e' aperto, il banner lo coprirebbe (regola della casa: mai). Il pulsante si inchioda SOLO quando il banner non c'e' piu' nel documento — iubenda lo toglie dal DOM dopo Accept/Reject e non lo rimette al ricaricamento (verificato). `:has()` e' letto da Chrome 105+, Safari 15.4+, Firefox 121+: chi ha un browser piu' vecchio ignora la regola e ha il carrello di prima. Niente `!important`. ========================================================================== */ @media (max-height: 1100px) { body.woocommerce-cart:not(:has(#iubenda-cs-banner.iubenda-cs-visible)) .cart_totals .wc-proceed-to-checkout { position: sticky; bottom: 10px; z-index: 5; } }