60×60×18 to 330×340×115 mm
I due sono i due estremi: il foglio li marca, il testo in mezzo resta testo (il sito si traduce da solo e lavora sui nodi di testo). --------------------------------------------------------------------------- 3. L'AVVISO SOPRA IL PREZZO (colonna del preventivo) --------------------------------------------------------------------------- .sst-estimate va accanto a `.bl__stima`. UNA SOLA FRASE, la stessa su tutti e tre gli Studi, in ogni stato: Estimate — pricing not final E' la frase del riferimento. Le altre due che giravano — «choices still missing» e «shipping not included» — dicevano una cosa vera in UN caso e muta negli altri due; questa e' vera sempre, e cosa manca lo dicono gia' l'anello, il pulsante spento e la riga «Still to choose: …». .sst-estimate.is-incompleto il totale mostrato e' ancora parziale. Non cambia le parole: cambia solo il colore. --------------------------------------------------------------------------- 4. LA CONSEGNA --------------------------------------------------------------------------- .sst-delivery va accanto a `.bl__consegna`. Una frase sola, uguale ovunque: «N working days», con la spedizione — se il negozio ne conosce una — appesa dentro ``. Il numero lo dice il tipo (`limiti['giorni_consegna']`), mai il markup. --------------------------------------------------------------------------- 5. LA SCHEDA ARTWORK (colonna del preventivo) --------------------------------------------------------------------------- .sst-artwork la scheda, modello Base & Lid. Dice tre cose e in quest'ordine, perche' sono le tre che il cliente chiede: si puo' caricare adesso, e' facoltativo, si puo' mandare dopo il checkout e il controllo tecnico e' gratuito. .sst-artwork__occhiello «Step 2 — Artwork» .sst-artwork__t il titolo .sst-artwork__stato la riga di stato .sst-artwork__azioni i pulsanti (facoltativo) .sst-artwork__nota la nota, ed e' SEMPRE questa: «Optional. You can also send files after checkout — we check them for free either way.» ============================================================================= COSA PUO' PERSONALIZZARE UNO STUDIO ============================================================================= Solo i DATI e i gettoni. I gettoni sono quelli del riferimento, dichiarati su `#bl-studio` da `scatole-bl-studio.css` (--i, --i2, --i3, --i4, --li, --inc, --mar, --mart, --marv, --r, --om1, --mono). Qui sotto ognuno ha il suo ripiego `var(--sc-…)` delle fondamenta, cosi' il componente regge anche fuori da `#bl-studio` — per esempio se un domani la radice cambia nome. Nessun colore letterale in questo foglio. Uno Studio che vuole spostare un margine lo fa ridefinendo un gettone sulla propria radice, non riscrivendo il selettore: due posti che disegnano la stessa piastrella sono il difetto che questo lavoro sta togliendo. ============================================================================= LA VIA DI FUGA ============================================================================= `?uia=0` non accoda questo foglio. La pagina torna all'aspetto precedente perche' ogni elemento porta anche la sua classe di prima. Il COPIONE condiviso invece si carica sempre: e' una libreria senza effetti collaterali e toglierla vorrebbe dire spegnere i campi dei millimetri, che e' un comportamento, non un aspetto. ========================================================================== */ .sst { --sst-i: var(--i, var(--sc-ink, #0F1115)); --sst-i3: var(--i3, var(--sc-ink-3, #616A75)); --sst-i4: var(--i4, var(--sc-ink-4, #6B747F)); --sst-li: var(--li, var(--sc-linea, #ECEEF1)); /* la carta del pannello: serve al fondo dei campioni della lamina (§ 9) */ --sst-car: var(--car, var(--sc-carta, #FFFFFF)); --sst-inc: var(--inc, var(--sc-incasso, #F4F6F7)); --sst-mar: var(--mar, var(--sc-mar, #2F8C98)); --sst-mart: var(--mart, var(--sc-mar-testo, #226E78)); --sst-marv: var(--marv, var(--sc-mar-velo, #E9F3F4)); --sst-r: var(--r, var(--sc-r, 12px)); --sst-om: var(--om1, var(--sc-ombra-1, 0 1px 2px rgb(15 17 21/.04), 0 2px 6px rgb(15 17 21/.04))); --sst-mono: var(--mono, var(--sc-testo, Poppins, system-ui, sans-serif)); } /* --- 1. le misure libere ------------------------------------------------- */ .sst .sst-size { margin: 0 0 20px; padding: 14px 14px 12px; border: 1px solid var(--sst-li); border-radius: var(--sst-r); background: #fff; box-shadow: var(--sst-om); } /* `flex-wrap` non e' prudenza: e' misurato. Il cassetto e' largo 340 px, meno i due bordi e i due margini restano 272; l'etichetta e la pastiglia insieme ne chiedono 290 in inglese e di piu' tradotte. Senza il ritorno a capo la pastiglia usciva tagliata a meta' parola — fotografato il 02/09. */ .sst .sst-size__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 10px; margin-bottom: 10px; } .sst .sst-size__et { margin-bottom: 0; } .sst .sst-size__status { flex: 0 0 auto; padding: 4px 9px; border-radius: 999px; background: var(--sst-mart); color: #fff; font: 700 10.5px/1.2 var(--sst-mono); white-space: nowrap; } /* I DUE STATI SONO INVERTITI RISPETTO A PRIMA, ed e' il punto di tutto il lavoro «togli catalogue size» del 2/9. COM'ERA, E PERCHE' ALLORA ERA GIUSTO. Finche' in pagina c'era la griglia delle taglie, questa pastiglia era una DIDASCALIA: il cliente sapeva di stare su una taglia di listino perche' ne vedeva una premuta, col suo prezzo scritto sopra. Il colore forte stava percio' sullo stato CUSTOM, come dire «attenzione, sei uscito dal listino». COM'E', E PERCHE' LASCIARLO COM'ERA SAREBBE STATO IL DIFETTO. Tolta la griglia, la pastiglia non e' piu' una didascalia: e' l'UNICO posto in cui la pagina dice se questi tre numeri si comprano subito o diventano un preventivo a mano. Il colore forte deve stare sulla cosa che si compra, non sulla cosa che non si compra — verniciare di marca il preventivo e lasciare grigio il prezzo immediato vuol dire dipingere di verde l'uscita. IL RIQUADRO NON CAMBIA PIU' COLORE, in nessuno dei due stati. Prima il salto di colore serviva a farsi notare in mezzo a una colonna piena di piastrelle; adesso il riquadro delle misure e' la cosa piu' grossa che c'e' nella colonna e non ha piu' niente da cui distinguersi. A cambiare resta la pastiglia, che e' la sola che porta l'informazione, e la riga dei limiti qui sotto, che porta il vincolo. */ .sst .sst-size.is-custom .sst-size__status { background: var(--sst-inc); color: var(--sst-i3); } /* QUANTE COLONNE — ADESSO LO DICE LO STUDIO, NON QUESTO FOGLIO. Il ripiego resta TRE, che e' quello che il Cassetto usa e che qui c'era scritto fisso: tre misure in tre colonne, perche' `.bl__griglia` ne fa due e l'ultima resterebbe sola su una riga sua, larga il doppio delle altre. ⚠️ LA CALAMITATA NE CHIEDE DUE, ED E' UNA RICHIESTA DEL TITOLARE (02/09/2026: «la sidebar della calamitata e' ancora diversa da quella della fondo e coperchio»). Il riferimento mette le sue quattro misure in 2x2, e tre caselle in 2x2 — due sopra e una sotto — si leggono come le sue; tre in fila no. Non e' un'opinione sulle colonne: e' che i due pannelli devono somigliarsi. Perche' un gettone e non un secondo selettore: il Cassetto usa questo stesso riquadro e nessuno ha chiesto di cambiarlo. Scrivere qui dentro il nome di UNO Studio farebbe smettere questo foglio di essere condiviso — sta scritto nel contratto in testa al file. Chi vuole due colonne le dichiara sulla propria radice, e il ripiego copre tutti gli altri. */ .sst .sst-size__grid { grid-template-columns: repeat(var(--sst-size-cols, 3), minmax(0, 1fr)); gap: 8px; } /* ⚠️ LE CASELLE DEL RIFERIMENTO SONO TARATE PER DUE COLONNE, NON PER TRE. `.bl-campo__box input` chiede 14 px di margine a sinistra e 46 a destra perche' li' la casella e' larga 130 px e l'unita' ci sta comoda. In tre colonne dentro 272 px la casella scende a 85, i sessanta di margine ne lasciano venticinque al numero, e «100» a 16 px ne vuole trenta: il numero finiva SOTTO il «mm». Fotografato, non temuto. Si stringono i margini e si scende di due punti di corpo — restiamo sopra i 12 px, che e' la riga che non si passa — invece di togliere l'unita': tre caselle nude in cui uno scrive «10» pensando ai centimetri sono peggio di tre caselle strette. */ /* ⚠️ GLI `!important` QUI SONO NECESSARI, e vale la pena dire perche'. Il foglio del riferimento scrive queste stesse proprieta' da un selettore che comincia con un ID (`#bl-studio .bl-campo__box input`, riga 681): un id batte QUALUNQUE numero di classi, quindi nessuna riscrittura di questo selettore — dieci classi, un attributo, `:is()` — puo' vincere. Le due strade sono mettere un id anche qui, e allora il componente condiviso smetterebbe di essere condiviso perche' porterebbe scritto dentro il nome della radice di UNO Studio, oppure `!important` mirati su due proprieta'. E' la seconda, ed e' la stessa scelta gia' documentata in 000928 per i pulsanti che il tema ridipinge. NON si tocca il foglio del riferimento: quelle misure sono giuste dove sono usate — due colonne, casella larga 130 px, il numero e' la cosa piu' importante della colonna e sta a 20 px. Qui le colonne sono tre. */ /* ⚠️ I TRE NUMERI SONO GETTONI DAL 02/09/2026, E IL MOTIVO E' iOS. Sotto i 16 px Safari INGRANDISCE la pagina al primo tocco su un campo di testo: non e' una preferenza di stile, e' un comportamento del sistema che sposta la pagina sotto le dita di chi sta scrivendo una misura. I 15 px qui sopra erano un difetto gia' rilevato sulla calamitata. A tre colonne 16 px non ci stanno (il numero finisce sotto il «mm»: e' il conto scritto nel commento qui sopra), quindi il numero non si poteva alzare per tutti. A DUE colonne la casella e' larga quanto quella del riferimento e i 16 px ci stanno comodi: chi chiede due colonne alza anche il corpo, sulla propria radice, e chi ne ha tre resta com'era. */ .sst .sst-size__grid .bl-campo__box input { height: 48px !important; padding: 0 var(--sst-size-pr, 26px) 0 var(--sst-size-pl, 10px) !important; font-size: var(--sst-size-fs, 15px) !important; } .sst .sst-size__grid .bl-campo__box em { right: var(--sst-size-em-r, 8px); font-size: var(--sst-size-em, 10px) !important; } .sst .sst-size__grid .bl-campo__et { font-size: 10.5px !important; letter-spacing: .04em; } /* --- 2. i limiti ---------------------------------------------------------- */ /* Dentro il riquadro la riga dei limiti e' la didascalia dei campi che ha sopra, non un paragrafo a se': si accosta a loro. ⚠️ DAL 2/9 QUESTA RIGA E' L'UNICA COSA IN PAGINA CHE DICE COSA SI PUO' PRODURRE. Prima no: sotto c'era la griglia, e un cliente che non capiva i sei numeri aveva comunque quindici (o ventisette) scatole vere da guardare. Tolta la griglia, se questa riga non si legge il cliente non ha piu' NIENTE: scrive 400 e si prende un errore senza sapere perche'. Percio' qui smette di essere una pastiglia grigia buttata in fondo al riquadro e diventa una riga larga quanto i campi, col fondo e il bordo della famiglia «marca». Non e' decorazione: e' il vincolo di produzione, ed e' lo stesso numero che il server usa per accettare o rifiutare una misura. ⚠️ L'ID NEL SELETTORE NON E' UNA SVISTA. Il riferimento veste questa riga da `#bl-studio .bl__limiti` (scatole-bl-studio.css 749) e questo stesso foglio la ritocca piu' sotto da `body.ui-a #bl-studio .bl__limiti`: sono (1,1,0) e (1,2,1), e nessuna catena di sole classi le batte. Le due strade erano `!important` sparsi su sei proprieta' oppure un id e tre classi, che fa (1,3,0) e vince pulito. E' la seconda, ed e' la stessa scelta gia' presa in fondo a questo foglio per le altre venti voci del riferimento. */ #bl-studio .sst-size .bl__limiti.sst-limits { display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px 6px; width: 100%; margin: 12px 0 0; padding: 8px 11px; border-radius: var(--sst-r); background: var(--sst-marv); border-color: var(--sst-mar); color: var(--sst-mart); } #bl-studio .sst-size .bl__limiti.sst-limits span { color: var(--sst-mart); } /* La parola davanti ai sei numeri. «60×60×20 to 130×300×340 mm» da solo e' un dato senza soggetto: si legge come una misura consigliata invece che come il confine oltre il quale la macchina non va. */ #bl-studio .sst-size .sst-limits__t { font-weight: 800; letter-spacing: .06em; text-transform: uppercase; opacity: .75; } /* --- 2-bis. il catalogo a schermo: non c'e' piu' -------------------------- */ /* «TOGLI CATALOGUE SIZE» — titolare, 2/9. Sono due righe di CSS, e il perche' e' lungo quanto serve perche' queste due righe valgono l'incasso della Drawer. COSA SPARISCE: la griglia delle taglie a catalogo (27 sulla calamitata, 15 sul cassetto), la sua etichetta e la sua nota. Cioe' la VISTA. COSA NON SPARISCE, E NON DEVE: il listino. Le taglie a catalogo non sono una scorciatoia grafica, sono la tabella dei prezzi — una taglia a catalogo da' il prezzo immediato e il pulsante d'acquisto acceso, una misura fuori catalogo apre il «Custom quote». Se togliendo la griglia ogni misura diventasse un preventivo a mano, la Drawer smetterebbe di vendere, ed e' l'unico dei tre Studi che incassa. PERCHE' NON SUCCEDE, e non e' una speranza: il riconoscimento della taglia sta NEL SERVER e parte dai TRE NUMERI, non dalla piastrella premuta. `scatole_cas_geometry()` e `scatole_mag_geometry()` cercano a/b/c nell'elenco delle taglie e da li' decidono `catalogo`, che e' poi quello che accende o spegne `custom_quote`. Misurato PRIMA di scrivere questa riga, su 3 configurazioni x 4 quantita' per Studio: la stessa misura scritta a mano nei tre campi e scelta dalla piastrella torna con lo STESSO prezzo, lo stesso `catalogo=1` e lo stesso `custom_quote=0`. La griglia era davvero solo una scorciatoia. PERCHE' SI NASCONDE INVECE DI NON STAMPARLA. Sulla calamitata i tre avvii rapidi («Start from») non scrivono nella casella nascosta: PREMONO la piastrella della taglia — `premi('taglia', v)` in scatole-mag-studio.js, e il commento accanto dice perche' (un secondo modo di scegliere lascerebbe la griglia con la piastrella sbagliata premuta). Se le piastrelle non fossero nel documento, quei tre pulsanti smetterebbero di funzionare in silenzio. `display:none` le toglie dalla vista, dal percorso di tabulazione e dall'albero di accessibilita' — cioe' le toglie davvero — ma `.click()` da codice continua a funzionare, che e' esattamente la combinazione che serve qui. Stesso discorso per il ripristino da un link salvato, che passa di la'. LA VIA DI FUGA e' `?taglie=1`: rimette la griglia in pagina senza toccare un file, come `?cas=0` e `?uia=0`. `display:contents` e non `block` perche' sulla calamitata l'involucro sta dentro `.bl__griglia`, che e' una griglia CSS: un involucro visibile diventerebbe lui l'elemento di griglia e il blocco delle taglie perderebbe il suo `--largo`. Con `contents` l'involucro sparisce dal calcolo e i figli tornano al loro posto esatto. */ /* ⚠️ L'ID SERVE ANCHE QUI, e per la stessa ragione della riga dei limiti. Sulla calamitata questa classe sta ADDOSSO al blocco del guscio, che porta gia' `#bl-studio .bl-campo--scelta { display: block }` — (1,2,0). Una catena di due classi e' (0,2,0) e perde: misurato al collaudo, la griglia tornava visibile sulla pagina normale mentre il foglio diceva `display:none`. Con l'id le tre regole sono (1,2,0), (1,3,0) e (1,4,0), e vincono in ordine. */ #bl-studio .sst-catalogo { display: none; } /* ⚠️ E LA CLASSE IN PIU' NON E' SUPERSTIZIONE: e' un PAREGGIO da vincere. Sulla calamitata la classe sta addosso al blocco del guscio, che porta anche `.bl-campo--scelta`, e `#bl-studio .bl-campo--scelta { display: block }` (scatole-studio-ui-b.css 1299) e' (1,2,0) esattamente come la riga qui sopra. A parita' di peso vince l'ultimo foglio caricato, e ui-b si carica DOPO ui-a: la griglia restava a schermo mentre il foglio diceva `none`. Visto in pagina, non dedotto — il cassetto non lo mostrava, perche' li' l'involucro non e' un `.bl-campo` e quella regola non lo tocca proprio. Con la seconda classe si sale a (1,3,0) e il pareggio non c'e' piu'. */ #bl-studio .sst-catalogo.bl-campo { display: none; } /* Il cassetto: `.sst-catalogo` e' un involucro PURO attorno a due nodi (l'etichetta e la griglia). `contents` lo toglie dal calcolo e i due figli tornano dove stavano, dentro il flusso della colonna. Li' non c'e' nessun selettore di figlio diretto da rispettare: verificato, `.cas-strada` e `.cas-taglie` sono vestite da selettori di discendenza. */ #bl-studio.sst--taglie .sst-catalogo { display: contents; } /* La calamitata: qui `.sst-catalogo` NON e' un involucro, e' il blocco stesso generato dal guscio (`.bl-campo.bl-campo--largo.bl-campo--scelta`), perche' `#bl-studio .bl__griglia > .bl-campo--largo` e' un selettore di figlio DIRETTO e un involucro gli faceva perdere `grid-column: 1 / -1` — 177 px invece di 243, misurati al collaudo con `?taglie=1`. Essendo l'elemento vero, deve tornare un blocco e non `contents`, se no sparirebbe lui e resterebbero i figli nudi nella griglia. */ #bl-studio.sst--taglie .sst-catalogo.bl-campo { display: block; } /* --- 2-ter. la riga che spiega il listino senza mostrarlo ----------------- */ /* Senza griglia il cliente non ha modo di sapere che scrivendo due millimetri in meno passa da «compra ora» a «ti mandiamo un preventivo». La pastiglia glielo dice MENTRE digita; questa riga glielo dice PRIMA di digitare, che e' il momento in cui serve per non scrivere a caso. Il numero non e' scritto qui: lo conta il server sull'elenco vero delle taglie, cosi' il giorno in cui il listino cambia cambia anche questa frase. */ .sst .sst-hint { margin: 9px 0 0; font: 500 12px/1.45 var(--sst-mono); color: var(--sst-i4); } .sst .sst-hint b { color: var(--sst-i3); font-weight: 700; } /* --- 3. l'avviso sopra il prezzo ------------------------------------------ */ /* Il colore e' l'unica cosa che cambia fra completo e incompleto. Le parole no: una frase che cambia sotto gli occhi mentre si sceglie e' una frase che il cliente rilegge ogni volta. */ .sst .sst-estimate.is-incompleto { color: var(--sst-i4); } /* --- 5. la scheda artwork ------------------------------------------------- */ .sst .sst-artwork { margin: 14px 0 0; padding: 14px; border: 1px solid var(--sst-li); border-radius: var(--sst-r); background: var(--sst-inc); } .sst .sst-artwork__occhiello { margin: 0 0 8px; font: 500 10.5px/1.2 var(--sst-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--sst-mart); } .sst .sst-artwork__t { margin: 0 0 6px; font-size: 15px; font-weight: 800; line-height: 1.25; color: var(--sst-i); } .sst .sst-artwork__stato { margin: 0 0 8px; font-size: 13px; line-height: 1.45; } .sst .sst-artwork__azioni { display: flex; gap: 8px; margin: 0 0 8px; } .sst .sst-artwork__azioni > * { flex: 1 1 auto; } .sst .sst-artwork__nota { margin: 0; font-size: 12.5px; line-height: 1.45; color: var(--sst-i4); } /* --- 6. IL LUCCHETTO DELLE PROPORZIONI ------------------------------------ ------------------------------------------------------------------------- «Keep proportions» esiste sul riferimento da sempre e sugli altri due Studi non c'era. Chiesto dal titolare il 02/09/2026. ⚠️ QUI NON SI DIPINGE NIENTE, ED E' VOLUTO. L'interruttore porta le classi del riferimento — `.bl__lucchetto`, `.bl-switch`, `.bl-switch__pista`, `.bl-switch__et`, `.bl-switch__nota` — che `scatole-bl-studio.css` veste gia' da `#bl-studio`, e la radice di tutti e tre gli Studi E' `#bl-studio`. Ridisegnarlo qui vorrebbe dire due fogli che dipingono la stessa piastrella, che e' esattamente il difetto che questo componente sta togliendo. `.sst-lock` e' solo l'alias che lo dichiara parte del componente — la stessa convenzione del contratto in testa al file — e serve a due cose: dire a chi legge il markup da dove viene il comportamento, e dare un gancio se un domani servisse una correzione. Oggi non serve, e non se ne inventa una. Il comportamento sta in `scatole-studio-ui-a.js`, `proporzioni()`. ------------------------------------------------------------------------- */ /* Sopra il riquadro delle misure, esattamente come sul riferimento: fra gli avvii rapidi e le caselle. Il margine sotto e quello che lo stacca dal riquadro senza staccarlo dal gruppo. */ #bl-studio .bl__lucchetto.sst-lock { margin: 0 0 14px; } /* --- 7. UN SOLO STILE DI TITOLO DI SEZIONE ------------------------------- ------------------------------------------------------------------------- ⚠️ QUI NON SI DIPINGE PIU' NIENTE, ED E' LA CORREZIONE DEL 02/09/2026. Fino a stamattina questo paragrafo declassava l'etichetta dei blocchi marcati `.sst-segue`: 10.5px, minuscolo, colore `--sst-i4`, e −6px di stacco sopra. L'intenzione era buona — far leggere «Printing area», «Printing» e «Screen printing colour» come una domanda sola. Il risultato, misurato in fotografia sulla calamitata, era un altro: OUTER PAPER / LINING / PRINTING AREA / PULL RIBBON / PROJECT NAME 12px · 700 · maiuscolo · .06em · rgb(63,71,80) Printing / Screen printing colour 10.5px · 700 · minuscolo · .06em · rgb(97,106,118) Due vestiti nello stesso pannello, e nessuna gerarchia vera sotto: la testata di gruppo non c'e' — il «padre» del sottolivello era «Printing area», che e' una scelta come le altre, non un titolo di gruppo. Un sottolivello senza livello sopra non e' una gerarchia: e' un'eccezione, e al cliente dice che «Screen printing colour» conta meno di «Lining». Non conta meno: e' una scelta, esattamente come «Lining». LA STRADA PRESA E' LA PRIMA DELLE DUE POSSIBILI: tutte le sezioni allo stesso livello, col vestito del riferimento. Non e' un gusto, sono tre prove: 1. il RIFERIMENTO — la Base & Lid, che il titolare chiama «perfetta» — non ha nessun sottolivello di titolo. Introdurne uno qui vorrebbe dire inventare un grado che il riferimento non conosce; 2. il CASSETTO gia' oggi mostra le stesse quattro scelte di stampa (PRINTING AREA · PRINTING · HOT FOIL COLOUR) tutte allo stesso grado, ed e' l'unico dei tre su cui il titolare non ha mai avuto da ridire; 3. la seconda strada — due livelli veri — chiederebbe piu' di un gruppo. Di gruppo ce n'e' uno solo. Un gruppo solo non e' una gerarchia. Resta il −6px? NO, e per la stessa ragione: uno stacco piu' stretto fra due sezioni e' l'ultimo residuo del sottolivello. Il ritmo del pannello e' uno solo, ed e' quello del riferimento: 10px fra una sezione e la successiva (`#bl-studio .bl__griglia { gap: 10px }`, scatole-bl-studio.css). `.sst-segue` RESTA nel markup di 000937 e non dipinge niente. E' la stessa convenzione gia' usata qui per `.sst-lock` (§ 6): l'alias dichiara di che pezzo fa parte l'elemento e lascia un gancio se un domani servisse davvero una gerarchia — quel giorno pero' serviranno anche una testata di gruppo e piu' di un gruppo. Fino ad allora non si inventa un grado. ⚠️ NON RIMETTERE QUI UN `text-transform` O UN `font-size`. Il titolo di sezione lo veste il riferimento, da `#bl-studio .bl-campo__et` (12px / 700 / maiuscolo / .06em / var(--i2)), e vale su tutti e quattro gli Studi. Se un titolo si vede diverso, il difetto e' in chi lo riscrive, non qui. ------------------------------------------------------------------------- */ /* --- 7-bis. IL RIQUADRO-NOTA DENTRO LA GRIGLIA --------------------------- ------------------------------------------------------------------------- `.sst-nota` era dichiarata nel markup di 000937 e non la vestiva nessuno. Il risultato, misurato il 02/09 sulla calamitata: Screen printing colour -> «Printing is optional — it starts on...» 22px Project name -> «Six choices are needed before you...» 12px Due riquadri-nota nello stesso pannello, a due distanze diverse da cio' che sta loro sopra. Il secondo e' un fratello nel flusso e prende i suoi 12px dal riferimento (`#bl-studio .bl__aletta-spiega { margin: 12px 0 0 }`, scatole-bl-studio.css); il primo e' un FIGLIO DELLA GRIGLIA, e la griglia gli somma i suoi 10px di `gap`. 10 + 12 = 22. ⚠️ IL `2px` QUI SOTTO NON E' UN NUMERO A CASO E NON VA «SISTEMATO» A 12. Dentro una griglia lo stacco vero e' `gap + margin`. Lo stacco che si vuole e' quello del riferimento — 12 — e la griglia ne mette gia' 10: 12 (voluto) − 10 (gap della griglia) = 2 Se un giorno cambia il `gap`, questo numero cambia con lui. Non e' un margine negativo che tira su un blocco: e' l'aritmetica dello stacco, ed e' scritta qui perche' un riquadro-nota dentro la griglia lo vorranno anche gli altri Studi. Oggi ce l'ha solo la calamitata: il cassetto e la Base & Lid tengono la loro nota fuori dalla griglia, il Discovery non ne ha nessuna. ------------------------------------------------------------------------- */ #bl-studio .bl__griglia > .sst-nota { margin-top: 2px; } /* --- 8. QUELLO CHE RESTA NEL DOCUMENTO E NON SI VEDE --------------------- ------------------------------------------------------------------------- Stessa tecnica gia' usata per il catalogo (§ 2-bis) e per la stessa ragione: il titolare ha chiesto di TOGLIERE una sezione, non di cancellare il dato. `display:none` la toglie dalla vista, dalla tabulazione e dall'albero di accessibilita'; la casella nascosta `data-bl` resta nel documento col suo valore, quindi il prezzo e il carrello continuano a leggerlo e il giorno in cui la sezione torna non c'e' niente da riscrivere. Oggi ci sta dentro «Internal protection», tolta il 02/09/2026 su richiesta del titolare («la sezione internal protection toglila per ora»). La via di fuga e' `?protezione=1`, che rimette la classe sulla radice. ------------------------------------------------------------------------- */ /* LA SPECIFICITA E UN CONTO, NON UN GUSTO. `#bl-studio .sst-fuori-vista` fa (1,1,0) e PERDE contro `#bl-studio .bl__griglia > .bl-campo--largo` di scatole-studio-ui-b.css, che fa (1,2,0) e dichiara `display`. Provato: il blocco restava a schermo. Un id piu tre classi fa (1,3,0) e vince pulito, senza `!important` — la stessa strada gia presa per il catalogo (2-bis). */ #bl-studio .bl__griglia > .sst-fuori-vista.bl-campo { display: none; } #bl-studio .sst-fuori-vista { display: none; } #bl-studio.sst--fuori-vista .bl__griglia > .sst-fuori-vista.bl-campo { display: block; } #bl-studio.sst--fuori-vista .sst-fuori-vista { display: block; } /* --- il telefono ---------------------------------------------------------- */ @media (max-width: 460px) { .sst .sst-size__head { display: block; } .sst .sst-size__status { display: inline-block; margin-top: 7px; } /* Tre caselle da 52 px affiancate su 390 px danno tre caselle da 96: la cifra ci sta, «mm» no. Una per riga, e si scrive senza sbagliare. Vale anche a due colonne: su 390 px la casella scenderebbe a 150 e il «mm» tornerebbe a stringere il numero. E una per riga e' anche l'unico modo di stare sopra i 16 px senza far ingrandire la pagina a iOS. */ .sst .sst-size__grid { grid-template-columns: 1fr; } } /* --- 9. LE SCELTE IN COLONNE -------------------------------------------- ------------------------------------------------------------------------- PERCHE' ESISTE, IN UNA RIGA: il gettone `--bl-col` esiste gia' — lo scrive il guscio quando uno Studio dichiara `colonne` — ma OGGI LO LEGGE UNA SOLA REGOLA, `.bl-scelta--griglia`. Le pastiglie sono una FILA (`display:flex`, `flex: 1 1 auto`, scatole-studio-ui-b.css) e una fila non sa cosa sia una colonna; i campioni sono una griglia, ma inchiodata a `repeat(4, …)`. Il risultato, misurato il 03/09 sulla calamitata a 1440 px in un cassetto largo 300, contro il Cassetto che mostra LE STESSE scelte: calamitata cassetto Printing area 2 righe 148 px 1 riga 120 px Printing 2 righe 130 px 1 riga 120 px Screen printing col. 9 righe 528 px 3 righe (cinque quadretti) Pull ribbon 4 righe 238 px — La fila non e' sbagliata: e' giusta quando le etichette sono di lunghezze molto diverse, ed e' la ragione per cui `.bl-scelta` e' `flex` e non `grid` (sta scritto in ui-b, § «la fila di piastrelle»). Quando pero' le voci sono omogenee — due aree, tre metodi, dieci nastri — la fila fa il contrario di quello che promette: due voci lunghe non ci stanno affiancate, vanno a capo, e ognuna si allarga a tutto il cassetto. Due pastiglie a tutta larghezza al posto di due affiancate sono una riga in piu' PER OGNI CAMPO. COSA FA QUESTA CLASSE: dice «questa fila e' una griglia», e le colonne le conta `--bl-col`, che arriva dal PHP. Non decide un numero: rende leggibile il numero che lo Studio ha gia' dichiarato. ⚠️ NON SI TOCCA CHI NON LA CHIEDE. Senza `.sst-cols` non cambia una virgola: la Base & Lid, il Cassetto e il Discovery non la scrivono e restano dov'e- rano, fila per le pastiglie e quattro colonne per i campioni. La classe la mette oggi solo 000937. IL CONTO DELLA SPECIFICITA', e non e' un vezzo: ui-b si carica DOPO ui-a (ordine dei in pagina: bl-studio, mag-studio, ui-a, ui-b), quindi a pari peso vincerebbe lui e questa regola non morderebbe. ui-b `#bl-studio .bl-scelta` (1,1,0) ui-b `#bl-studio .bl-scelta--campioni` (1,1,0) qui `#bl-studio .bl-scelta--piastrelle.sst-cols` (1,2,0) vince La seconda classe e' quello che fa vincere la regola senza un `!important`. Stessa strada gia' presa al § 2-bis per il catalogo. ------------------------------------------------------------------------- */ #bl-studio .bl-scelta--piastrelle.sst-cols { display: grid; grid-template-columns: repeat(var(--bl-col, 2), minmax(0, 1fr)); align-items: stretch; } /* In una colonna stretta il testo centrato regge meglio: l'etichetta che va a capo («SCREEN PRINTING», «No ribbon») resta simmetrica invece di lasciare un buco a destra. E' la stessa scelta gia' fatta per `.bl-scelta--griglia`, con lo stesso respiro ridotto, e per la stessa ragione: la colonna e' 55-150 px, non 300. */ #bl-studio .bl-scelta--piastrelle.sst-cols .bl-scelta__p { padding: 6px 6px; text-align: center; } /* I CAMPIONI LEGGONO ANCHE LORO `--bl-col`. La regola dei quindici Pantone in `scatole-bl-studio.css` fa gia' esatta- mente questo, con la stessa variabile e lo stesso ripiego, e li' e' scritto «DA PORTARE IN studio-ui-a». Portata: cosi' vale per qualunque campo a campioni di qualunque Studio, e non per un `data-bl-scelta` per volta. ⚠️ IL RIPIEGO E' 4 e non 5: senza `--bl-col` questa regola deve dire quello che diceva ui-b, altrimenti un campione senza `colonne` cambierebbe faccia. */ #bl-studio .bl-scelta--campioni.sst-cols { grid-template-columns: repeat(var(--bl-col, 4), minmax(0, 1fr)); } /* LE FOTOGRAFIE DELLA LAMINA NON SONO CAMPIONI DI CARTA — la seconda copia. La prima e' in `scatole-bl-studio.css`, scritta per `[data-bl-scelta="foil"]` perche' li' il campo si chiama cosi'; sulla calamitata lo stesso campo si chiama `lamina`. Il ritaglio al 500% di `.bl-scelta__c` guarda la fascia bassa dell'immagine ed e' giusto per le dodici carte (un angolo di foglio su fondo grigio); le sei della lamina sono la fotografia di un logo impresso su una scatola verde, e con quel ritaglio uscivano sei quadrati verdi. `contain` e non `cover` perche' la sesta voce, «NO HOT FOIL», e' un SVG di 125x109 che `cover` stirerebbe. Il fondo serve solo a quella. Nessun colore letterale: il gettone e' quello della carta del riferimento. */ #bl-studio [data-bl-scelta="lamina"] .bl-scelta__c { background-color: var(--sst-car); background-size: contain; background-position: 50% 50%; } /* ============================================================================= FINE DEL COMPONENTE CONDIVISO. Sotto c'e' l'interfaccia A «banco di lavoro» del 25/08, che vive solo dietro ?ui=1 e non c'entra niente con quanto sopra: ogni suo selettore parte da `body.ui-a`, che senza quel parametro non esiste. Resta al suo posto perche' il modo sicuro di non rompere una cosa e' non riscriverla. ========================================================================== */ /* ============================================================================= BASE & LID STUDIO — INTERFACCIA A: IL BANCO DI LAVORO Vive solo dietro ?ui=1. Senza il parametro non esiste una sola regola attiva. ----------------------------------------------------------------------------- LA TESI, IN UNA RIGA Il configuratore e' uno strumento, e uno strumento prende tutta la scrivania. LE QUATTRO CONSEGUENZE, IN ORDINE DI IMPORTANZA 1. Da bordo a bordo. Il tetto di 1520 px lasciava due fasce bianche di 520 px su uno schermo da 2560: il 41% della finestra non serviva a niente. Via. 2. Alto quanto la finestra. Niente scorrimento di pagina: sono i tre pannelli a scorrere dentro di se'. Cosi' misure, disegno, prezzo e pulsante restano visibili INSIEME — che e' il vero difetto di oggi, dove il pulsante d'acquisto sta a 1529 px dall'alto e nessuno lo vede senza scorrere. 3. Densita' alta. Meno aria, piu' informazione per centimetro: e' la direzione strumento. Con una eccezione che non si negozia, sotto. 4. Il disegno cresce con la finestra e riempie il suo riquadro. PERCHE' IL TETTO C'ERA — e cosa costa toglierlo Il foglio dello Studio lo spiega: a 2560 px senza tetto la colonna centrale si spalmava su 1829 px e i due pannelli laterali si sfilacciavano. Quel ragionamento era giusto per un DOCUMENTO che scorre. Qui il documento non scorre piu': i pannelli laterali sono larghi quanto serve a loro (clamp con un massimo) e tutto il resto va al palco. Il tetto non serve piu' perche' e' cambiata la cosa che doveva proteggere. LA REGOLA CHE NON SI TOCCA Niente testo sotto 12 px, niente peso funzionale sotto 600. La densita' si guadagna togliendo ARIA, non rimpicciolendo le lettere. Anzi: sotto, un blocco alza a 12 px i venti punti dove lo Studio era sceso a 10,5 e 11,5. Costa qualche pixel di altezza e li spendo volentieri. CONTRASTI, misurati e non stimati · petrolio pieno su bianco 3,94:1 — riempimenti e tratti, mai testo piccolo · testo petrolio con --sc-mar-testo 5,88:1 · fondo pieno sotto testo bianco con --sc-mar-scuro 8,38:1 Nessun colore letterale in questo foglio: solo gettoni delle fondamenta. SPECIFICITA' Ogni selettore parte da body.ui-a seguito da un id: un id piu' due classi. Batte per costruzione lo Studio, che scrive un id piu' una classe, e batte l'officina, che scrive su #main. L'ordine di stampa dei fogli diventa irrilevante. Contro il tema, che ridipinge i bottoni con !important, la specificita' non basta: li' servono !important mirati e stanno in fondo. ========================================================================== */ body.ui-a { /* Le due colonne di comando. Il minimo e' la larghezza sotto la quale i quattro campi misura non stanno piu' in due per riga; il massimo esiste perche' un pannello di comando largo 600 px non e' migliore, e' sfilacciato — la lezione del tetto, conservata dove valeva davvero. */ --uia-sx: clamp(300px, 17.5vw, 450px); --uia-dx: clamp(344px, 19vw, 490px); /* Riempiti dallo script: altezza della testata del sito e altezza vera del pulsante d'acquisto. I valori qui sono solo la rete di sicurezza per il primo fotogramma, prima che lo script misuri. */ --uia-testa: 161px; --uia-cta: 54px; /* La fuga fra i pannelli: un pixel di linea, non ventidue di aria. */ --uia-fuga: 1px; } /* ============================================================================= 1. DA BORDO A BORDO — vale a ogni larghezza, anche sul telefono ----------------------------------------------------------------------------- Il tetto era l'unico limite: gli antenati sono gia' larghi quanto la finestra (misurato: il contenitore della pagina sta a x=0 ed e' largo 2560). Restano otto pixel di imbottitura e otto di margine negativo che si annullano fra loro ma fanno sporgere la riga di sedici pixel oltre la finestra: li azzero tutti e due, cosi' sparisce anche quel filo di sbordo orizzontale. ========================================================================== */ body.ui-a .main-content { padding-left: 0; padding-right: 0; } body.ui-a .row.main-content-wrap { margin-left: 0; margin-right: 0; } /* Da 1024 px in giu' il tema aggiunge sedici pixel di imbottitura al contenitore fluido: e' l'ultimo cordolo fra l'applicazione e il bordo dello schermo, ed e' proprio dove serve di piu' toglierlo — su un telefono da 390 sono trentadue pixel, l'8% della larghezza, tolti ai campi. Il selettore passa da #main perche' lo stesso contenitore compare anche nella testata e nel piede, che non sono roba di questa pagina. */ body.ui-a #main .container-fluid { padding-left: 0; padding-right: 0; } body.ui-a #bl-studio { max-width: none; margin-left: 0; margin-right: 0; width: 100%; } /* ============================================================================= 2. IL BANCO DI LAVORO — da 1281 px in su ----------------------------------------------------------------------------- Sotto questa soglia il banco NON si monta: con meno di milleduecento pixel tre colonne diventano tre fessure e un'altezza bloccata diventa una gabbia. La degradazione e' dichiarata in fondo al foglio. ========================================================================== */ @media (min-width: 1281px) { /* Il piede del sito sparisce. E' il prezzo dichiarato della tesi: "niente scorrimento di pagina" e' vero solo se sotto l'applicazione non c'e' altro. Sono 459 px misurati di piede che, sommati all'applicazione, riporterebbero lo scorrimento. La testata resta: e' la navigazione del sito e non e' roba mia da togliere. */ body.ui-a .footer-wrapper { display: none; } /* Settantasei pixel di imbottitura in fondo al contenitore della pagina: invisibili quando sotto c'e' un piede alto 459, ma con il piede spento sono esattamente lo scorrimento residuo che smentiva la tesi. Misurati, non indovinati: senza questa riga il documento e' alto 1516 su una finestra di 1440. */ body.ui-a #main.column1, body.ui-a #main.column1.wide { padding-bottom: 0 !important; } body.ui-a #bl-studio { display: grid; /* riga 1: la barra delle tappe. riga 2: i tre pannelli, che si prendono tutta l'altezza che avanza. minmax(0,1fr) e non 1fr: senza il minimo a zero una griglia in altezza fissa non lascia mai scorrere i figli. */ grid-template-columns: var(--uia-sx) minmax(0, 1fr) var(--uia-dx); grid-template-rows: auto minmax(0, 1fr); align-items: stretch; gap: var(--uia-fuga); height: calc(100dvh - var(--uia-testa)); overflow: hidden; /* Il fondo della griglia si vede solo dentro le fughe: e' cosi' che si disegnano tre righe di separazione senza aggiungere un solo elemento. */ background: var(--sc-linea-2, #DDE1E6); border-top: 1px solid var(--sc-linea-2, #DDE1E6); } /* --- la barra delle tappe: da tre schede a una riga di comando ------------ Erano tre riquadri alti 62 px con bordo e angoli, uno per terzo di larghezza. Su un banco di lavoro le tappe sono un indice, non tre carte: diventano tre pastiglie in fila alte 44, appoggiate a sinistra, e il sottotitolo passa da riga a inciso sulla stessa riga. */ body.ui-a #bl-studio .bl__percorso { grid-column: 1 / -1; grid-row: 1; display: flex; align-items: stretch; gap: 0; padding: 0; background: var(--sc-pannello, #FBFBFC); } body.ui-a #bl-studio .bl__tappa { display: flex; align-items: center; gap: 9px; min-height: 44px; padding: 0 16px; background: transparent; border: 0; border-right: 1px solid var(--sc-linea, #ECEEF1); border-radius: 0; } body.ui-a #bl-studio .bl__tappa-n { width: 22px; height: 22px; font-size: 12px; } body.ui-a #bl-studio .bl__tappa-t { font-size: 13px; line-height: 1.2; white-space: nowrap; } /* il sottotitolo smette di essere una seconda riga: e' un inciso */ body.ui-a #bl-studio .bl__tappa-t em { display: inline; margin: 0 0 0 8px; font-size: 12px; color: var(--sc-ink-3, #616A75); } body.ui-a #bl-studio .bl__tappa.is-corrente { background: var(--sc-mar-velo, #E9F3F4); box-shadow: inset 0 -3px 0 0 var(--sc-mar-scuro, #1A555E); } /* --- i tre pannelli ------------------------------------------------------- Perdono bordo, angoli e ombra: quella era la grammatica della SCHEDA, che serve quando un blocco galleggia su una pagina. Qui i pannelli non galleggiano, sono incassati nel telaio, e a separarli basta la fuga da un pixel. Ognuno scorre dentro di se': overscroll-behavior contain impedisce che arrivati in fondo lo scorrimento si propaghi al documento. */ body.ui-a #bl-studio .bl__misure, body.ui-a #bl-studio .bl__acquisto { grid-row: 2; min-height: 0; height: 100%; margin: 0; border: 0; border-radius: 0; box-shadow: none; background: var(--sc-fondo, #FFFFFF); overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; scrollbar-width: thin; } body.ui-a #bl-studio .bl__misure { grid-column: 1; padding: 14px 16px 18px; } body.ui-a #bl-studio .bl__acquisto { grid-column: 3; padding: 14px 16px 0; } /* Il pannello delle misure, compresso, finisce prima del fondo: su uno schermo alto restavano seicento pixel di bianco sotto l'ultimo comando. Su un banco quel vuoto non e' aria, e' una mensola libera — e il posto giusto per il salvataggio, che e' l'azione di chiusura del pannello. Con la pila flessibile e il margine automatico si appoggia da solo in fondo quando c'e' spazio, e resta attaccato al resto quando non ce n'e'. */ body.ui-a #bl-studio .bl__misure { display: flex; flex-direction: column; align-items: stretch; } body.ui-a #bl-studio .bl__misure > * { flex: 0 0 auto; } /* Il selettore passa dal figlio e non dalla sola classe apposta: il blocco della densita', piu' in basso in questo stesso foglio, rimette un margine in cima al salvataggio e a parita' di specificita' vincerebbe per ordine. Un livello in piu' qui costa meno che spezzare in due il blocco densita'. */ body.ui-a #bl-studio .bl__misure > .bl__salva { margin-top: auto; padding-top: 14px; } /* --- il palco ------------------------------------------------------------ Era in posizione appiccicata, perche' doveva restare in vista mentre la colonna di destra scorreva sotto. Quel trucco non serve piu': niente scorre piu' fuori dal suo pannello, quindi torna statico. La colonna diventa una pila: barra degli attrezzi in alto, disegno che si prende tutto lo spazio rimasto, suggerimento in fondo. */ body.ui-a #bl-studio .bl__vista { grid-column: 2; grid-row: 2; position: static; display: flex; flex-direction: column; min-height: 0; height: 100%; margin: 0; padding: 0; border: 0; border-radius: 0; background: var(--sc-incasso, #F4F6F7); overflow: hidden; } /* La barra sale in cima. Sul banco gli attrezzi stanno sopra il pezzo, non sotto: si va a prenderli, non si scopre che c'erano. */ body.ui-a #bl-studio .bl__comandi { order: -1; flex: 0 0 auto; margin: 0; padding: 8px 12px; border-top: 0; border-bottom: 1px solid var(--sc-linea-2, #DDE1E6); background: var(--sc-pannello, #FBFBFC); } /* IL DISEGNO CRESCE CON LA FINESTRA. Il riquadro logico resta 1000 per 800 e non lo tocco: e' il motore condiviso con l'anteprima della scheda prodotto e due disegnatori per la stessa scatola divergono in silenzio. Quello che cambio e' la finestra attraverso cui lo si guarda: larghezza e altezza al cento per cento, min-height a zero perche' dentro una colonna flessibile un elemento non scende mai sotto il proprio contenuto se non glielo si dice. preserveAspectRatio, che il motore mette da solo, fa il resto: il disegno si centra e riempie la dimensione che lo stringe. */ body.ui-a #bl-studio #bl-svg { flex: 1 1 auto; min-height: 0; width: 100%; height: 100%; max-height: none; /* niente imbottitura: il motore riserva gia' 104 unita' di viewBox in larghezza e 92 in altezza alle etichette delle quote — circa un decimo per lato. Una seconda cornice qui sarebbe aria dentro l'aria, e su uno schermo da 768 pixel di altezza si paga in disegno. */ padding: 0; box-sizing: border-box; } body.ui-a #bl-studio .bl__suggerimento { flex: 0 0 auto; margin: 0; padding: 4px 0 8px; } /* --- IL PIEDE INCHIODATO DELLA COLONNA D'ACQUISTO ------------------------ E' il pezzo che tiene in piedi la promessa "prezzo e pulsante sempre visibili". Tre mosse, e nessuna tocca il DOM. a) La colonna diventa una pila flessibile. L'ordine dei figli si riscrive con order, non spostando nodi: spostarli romperebbe tre altri moduli, perche' la scheda grafica, il pacchetto di stampa e i modelli si infilano tutti PRIMA del pulsante e uno dei tre pretende che il pulsante sia figlio diretto di questa colonna. Con order il DOM resta identico e cambia solo l'ordine visivo. b) Prezzo e pulsante vanno per ultimi. Serve: position sticky ancorata in basso tiene fermo un elemento finche' la sua posizione naturale e' piu' in basso del punto di aggancio. Se il prezzo restasse a meta' colonna, scorrendo oltre si staccherebbe e sparirebbe. Ultimo della pila, non si stacca mai. c) L'altezza del pulsante la misura lo script e la scrive in un gettone: il prezzo si ancora esattamente sopra di lui. Se il pulsante si nasconde (sopra i mille pezzi si passa al preventivo a mano) il gettone va a zero da solo e il riquadro del preventivo prende il suo posto. */ body.ui-a #bl-studio .bl__acquisto { display: flex; flex-direction: column; align-items: stretch; } body.ui-a #bl-studio .bl__acquisto > * { flex: 0 0 auto; } body.ui-a #bl-studio .bl__rassicura { order: 6; } body.ui-a #bl-studio .bl__dopo { order: 7; margin-bottom: 12px; } body.ui-a #bl-studio .bl__prezzo { order: 8; } body.ui-a #bl-studio .bl__preventivo { order: 8; } body.ui-a #bl-studio .bl__cta { order: 9; } body.ui-a #bl-studio .bl__prezzo, body.ui-a #bl-studio .bl__preventivo { position: sticky; bottom: var(--uia-cta); z-index: 4; /* esce dall'imbottitura della colonna: una barra inchiodata che lascia due fasce bianche ai lati non sembra inchiodata, sembra dimenticata */ margin: 0 -16px; padding: 12px 16px; border-radius: 0; border-left: 0; border-right: 0; border-bottom: 0; border-top: 1px solid var(--sc-linea-2, #DDE1E6); background: var(--sc-fondo, #FFFFFF); box-shadow: 0 -10px 18px -12px rgb(15 17 21 / .22); } body.ui-a #bl-studio .bl__preventivo { background: var(--sc-mar-velo, #E9F3F4); border-top-color: var(--sc-mar, #2F8C98); } body.ui-a #bl-studio .bl__cta { position: sticky; bottom: 0; z-index: 5; margin: 0 -16px; border-radius: 0; min-height: 54px; } /* La riga del prezzo si riorganizza: unitario a sinistra, totale a destra, consegna sotto. In verticale erano 194 px, in orizzontale sono 108: e' lo spazio che restituisco al pannello che scorre sopra. */ body.ui-a #bl-studio .bl__prezzo { display: grid; grid-template-columns: 1fr auto; align-items: baseline; column-gap: 12px; row-gap: 4px; } body.ui-a #bl-studio .bl__stima { grid-column: 1 / -1; margin: 0; } body.ui-a #bl-studio .bl__unit { grid-column: 1; margin: 0; } body.ui-a #bl-studio .bl__tot { grid-column: 2; margin: 0; text-align: right; } body.ui-a #bl-studio .bl__consegna { grid-column: 1 / -1; margin: 4px 0 0; padding-top: 6px; } } /* ----------------------------------------------------------------------------- IL BANCO STRETTO — fra 1281 e 1720 px ----------------------------------------------------------------------------- Misurato a 1366x768: la barra degli attrezzi va a capo e diventa alta 96 invece di 57. Quaranta pixel in meno di palco su uno schermo che ne ha 563 in tutto sono il 7% del disegno, buttati per scrivere ISOMETRIC FRONT SIDE TOP CLOSED OPEN — sei parole accanto a sei pittogrammi che dicono la stessa cosa. Sul banco stretto restano i pittogrammi. La parola non si CANCELLA, si toglie dalla vista: resta nel documento, fuori schermo di un pixel, perche' e' il nome accessibile del pulsante. E' la stessa tecnica che lo Studio usa gia' a 560 px — la riuso invece di inventarne un'altra. Sopravvivono le due etichette che non hanno un disegno equivalente, "Dimensions" e "PNG", e il varco verso il 3D. -------------------------------------------------------------------------- */ @media (min-width: 1281px) and (max-width: 1720px) { body.ui-a #bl-studio .bl__viste button span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); } body.ui-a #bl-studio .bl__viste button { padding: 0 9px; } body.ui-a #bl-studio .bl__comandi { padding: 6px 10px; } } /* Schermi bassi: un portatile da 768 px di altezza, meno la testata del sito che li' va a capo e ne prende 205, lascia 563 pixel per tutto. Il suggerimento del trascinamento si stringe invece di sparire — e' l'unica riga che dice come si gira la scatola. */ @media (min-width: 1281px) and (max-height: 820px) { body.ui-a #bl-studio .bl__suggerimento { padding: 2px 0 5px; } body.ui-a #bl-studio .bl__percorso .bl__tappa { min-height: 40px; } } /* ============================================================================= 3. DENSITA' — vale a ogni larghezza sotto il cancello ----------------------------------------------------------------------------- Si guadagna togliendo aria: imbottiture, margini, altezze dei comandi. Non si guadagna MAI rimpicciolendo il testo, e infatti il blocco 4 fa il contrario. ========================================================================== */ /* La tappa 2 e' un