, quindi il logo della barra in alto non e' toccato. invece e' stato tolto: dentro

non ce n'e' nessuna, ne' nel servito ne' a runtime. */ html[data-sago-a] body .sago-page > main svg, html[data-sago-a] body .sago-page > main canvas{ max-width:100%; } /* ---------------------------------------------------------------------------- 4. TIPOGRAFIA DI BASE DEL CORPO PAGINA ---------------------------------------------------------------------------- Volutamente agganciata a

e al piede, NON a .sago-page: cosi' la barra in alto resta fuori da qualunque cosa scriva questo foglio. Il corpo e' 15px e non 16: la pagina astucci gira a 14px/1.45 (#astApp, riga 4508 del suo CSS). 15px e' la stessa densita' con un vantaggio misurabile: un senza font-size esplicito vale 0,8em, e 0,8 x 15 = 12px esatti, cioe' il pavimento richiesto. A 14px scenderebbe a 11,2px e ogni non dichiarato finirebbe sotto la soglia. Da battere: standalone.css:6 body{font-family:...; color:var(--text)} (0,0,1). La mia (0,3,3) vince senza !important. -------------------------------------------------------------------------- */ html[data-sago-a] body .sago-page > main, html[data-sago-a] body .sago-page > .sago-footer-note{ color:var(--ast-text); font-family:var(--ast-sans); font-size:15px; line-height:1.45; font-weight:400; } /* ---------------------------------------------------------------------------- 5. COMPONENTE PANNELLO -- definito qui una volta, riusato dagli altri ============================================================================ COME SI USA (per gli altri quattro fogli 'lab'): Il pannello e' .sago-panel, gia' presente nel markup servito su otto elementi. La sua faccia si comanda con VARIABILI, non con selettori: cosi' nessuno deve vincere una guerra di specificita' per cambiare un fondo, e una riga basta. --ast-panel-bg fondo (default: --ast-paper) --ast-panel-line filetto 1px (default: --ast-line) --ast-panel-r raggio (default: --ast-r, 4px) --ast-panel-pad imbottitura (default: clamp(13px,1.05vw,17px)) --ast-panel-edge spessore del bordo SINISTRO (default: 1px) --ast-panel-edge-color colore del bordo SINISTRO (default: il filetto) Esempi, tutti da scrivere nel PROPRIO foglio: // pannello tenue, come i fondi interni della pagina astucci html[data-sago-a] .sago-summary-details{ --ast-panel-bg:var(--ast-soft); } // pannello qualificato dal bordo sinistro da 4px: e' la firma della // scheda prezzo astucci (border-left:4px solid var(--ast-blue)) html[data-sago-a] .sago-summary-card{ --ast-panel-bg:var(--ast-price-bg); --ast-panel-line:var(--ast-price-line); --ast-panel-edge:4px; --ast-panel-edge-color:var(--ast-blue); } // scheda piu' grande: il sistema astucci sale a 9px solo su queste html[data-sago-a] .sago-product-preview{ --ast-panel-r:var(--ast-r-lg); } Perche' a variabili e non a selettori: questo foglio e' il primo della cascata e la regola base sta a specificita' (0,2,1). Un foglio a valle che scrivesse html[data-sago-a] .sago-summary-card{background:...} pareggerebbe e vincerebbe solo per posizione, cioe' solo nella copia in coda: al primo paint si vedrebbe il fondo sbagliato e poi il cambio. Con le variabili il valore si risolve sull'elemento e il problema non esiste. PERCHE' NON C'E' L'OMBRA: sulla pagina astucci box-shadow:none compare 57 volte. La profondita' la fanno i filetti azzurrati e i fondi tenui, non le ombre. Se ti accorgi di stare mettendo un'ombra su ogni scheda, hai sbagliato lettura. Restano disponibili --ast-shadow-soft per un contenitore e --ast-shadow per un pannello che galleggia davvero (un modale), da usare con parsimonia. Da battere: standalone.css:9 .sago-panel{background:rgba(255,255,255,.94); border:1px solid rgba(215,224,236,.95); border-radius:var(--radius); box-shadow:var(--shadow)} standalone.css:1862 .sago-panel,...{box-shadow:0 1px 2px rgba(15,23,42,.06)} standalone.css:9 le imbottiture per singolo pannello (18/17/24/22/19/17px) Tutte a (0,1,0): la mia (0,2,1) vince senza !important e lascia spazio a chi viene dopo. -------------------------------------------------------------------------- */ html[data-sago-a] .sago-panel{ position:relative; min-width:0; padding:var(--ast-panel-pad); border:1px solid var(--ast-panel-line); border-left:var(--ast-panel-edge,1px) solid var(--ast-panel-edge-color,var(--ast-panel-line)); border-radius:var(--ast-panel-r); background:var(--ast-panel-bg); box-shadow:none; color:var(--ast-text); } /* Il vecchio look ("SAGO LOOK 2026-08-13", standalone.css:1867-1889) sopra i 1181px azzerava le distanze e fondeva i pannelli di ogni colonna in un blocco unico, sovrapponendo i bordi con margin-top:-1px e togliendo i raggi a tutti tranne il primo e l'ultimo. La direzione astucci e' l'opposta: pannelli distinti con filetto e raggio piccolo. Va disinnescato, e serve (0,3,1) perche' quelle regole usano :first-child/:last-child/:only-child e arrivano a (0,3,0). Il raggio resta letto dalla variabile, quindi chi vuole cambiarlo su un pannello non deve battere questa specificita': gli basta --ast-panel-r. .sago-main-column non e' nell'elenco anche se c'e' nell'originale: i suoi pannelli non sono figli diretti della colonna ma di #sago-configurator-form, quindi ne' la fusione ne' la sua correzione li raggiungerebbero. Tenerlo sarebbe un selettore che non colpisce nulla, cioe' rumore. */ html[data-sago-a] .sago-visual-column > .sago-panel, html[data-sago-a] .sago-summary-column > .sago-panel{ margin-top:0; border-radius:var(--ast-panel-r); } /* ---------------------------------------------------------------------------- 6. GRIGLIA A TRE COLONNE ---------------------------------------------------------------------------- Il DOM servito e', in quest'ordine: .sago-visual-column (anteprima), .sago-main-column (i passi), .sago-summary-column (il preventivo). Il markup NON si tocca: l'ordine si ottiene con grid-template-areas, che e' l'unico modo di riordinare senza spostare un tag e senza rompere l'ordine di lettura per chi naviga da tastiera piu' di quanto gia' non sia. Larghezza colonne: la pagina astucci usa .ast-workspace{grid-template-columns:330px minmax(560px,1fr) 350px} e, in una variante, minmax(300px,22%) minmax(500px,1fr) minmax(330px,24%). Qui si usa clamp() al posto di due punti di rottura in piu': la colonna laterale cresce con la finestra fra 288 e 368px e non serve una @media per ogni taglia. minmax(0,...) ovunque: senza il minimo a zero un disegno tecnico o una tela 3D piu' larga della colonna gonfia la traccia e fa comparire lo scroll orizzontale del corpo. E' la causa numero uno di taglio a 390px. Da battere: standalone.css:9 .sago-configurator{grid-template-columns:...;gap:18px} standalone.css:1871 .sago-configurator{gap:10px} standalone.css:13 @media <=1180 grid-template-columns:300px 1fr standalone.css:14 @media <=820 grid-template-columns:1fr standalone.css:311+ body .sago-page section{background-color:rgba(255,255,255,.965)} -- questa colpisce anche .sago-configurator e .sago-main-column, che sono

: senza neutralizzarla la griglia diventa una lastra bianca e le distanze fra pannelli spariscono nel fondo. -------------------------------------------------------------------------- */ html[data-sago-a] body .sago-page .sago-configurator{ display:grid; grid-template-columns: minmax(0,clamp(288px,23vw,368px)) minmax(0,1fr) minmax(0,clamp(288px,23vw,368px)); grid-template-areas:"visual main sum"; gap:var(--ast-gap); align-items:start; background:transparent; } /* La colonna centrale e' una

e prende anch'essa il fondo bianco di standalone.css:311. Il fondo lo devono fare i pannelli, non la colonna. */ html[data-sago-a] body .sago-page .sago-main-column{ background:transparent; } /* Assegnazione alle aree. Sta in una regola sola, senza punti di rottura: i nomi restano gli stessi in tutte le bande, cambia solo la mappa sul contenitore. Cosi' chi legge trova l'ordine in un posto solo. grid-area (0,2,1) batte anche il grid-column:1/-1 che standalone.css:13 mette su .sago-summary-column sotto i 1180px. */ html[data-sago-a] .sago-visual-column{ grid-area:visual; } html[data-sago-a] .sago-main-column{ grid-area:main; } html[data-sago-a] .sago-summary-column{ grid-area:sum; } /* Le tre colonne sono a loro volta pile verticali di pannelli. min-width:0 per lo stesso motivo del minmax(0,...) qui sopra. gap batte sia il 18px di standalone.css:9 sia il gap:0 della fusione verticale del vecchio look (standalone.css:1873). */ html[data-sago-a] .sago-visual-column, html[data-sago-a] .sago-main-column, html[data-sago-a] .sago-summary-column{ display:grid; gap:var(--ast-gap); min-width:0; align-content:start; } /* La colonna centrale non impila i pannelli da se': lo fa #sago-configurator-form, che standalone.css:11 tiene a gap:18px. Se resta 18 mentre le altre due colonne stanno a 12, il ritmo verticale della pagina e' diverso da colonna a colonna e si vede. Il ritmo fra pannelli e' di questo foglio, quindi la distanza la decide lo stesso token. Serve un ID nel selettore perche' l'avversario e' #sago-configurator-form (1,0,0). Chi lavora sui passi puo' cambiarla: (1,1,1) e piu' in basso nella cascata basta, oppure ridefinire --ast-gap solo su questa colonna. */ html[data-sago-a] #sago-configurator-form{ gap:var(--ast-gap); } /* standalone.css:764 sposta due blocchi della colonna anteprima con transform:translateY(-18px) e (+16px) "per allineamento premium". In una griglia con pannelli distinti quello non e' un allineamento, e' un disallineamento: i pannelli escono dalla loro riga e il filetto non torna. Si toglie sui figli diretti della colonna, non nominando i loro selettori: chi lavora sul palco puo' rimettere uno scostamento con un selettore nominato, che a (0,3,1) batte questa. */ html[data-sago-a] .sago-visual-column > *{ transform:none; } /* Il preventivo resta in vista mentre si scorre: e' la colonna che il cliente deve poter leggere in qualunque momento. Solo dove ci sono tre colonne; quando il preventivo diventa una fascia a tutta larghezza appiccicarlo non ha senso e coprirebbe mezza pagina. Il 1181px non e' scelto qui: e' il punto di rottura che gia' esiste in standalone.css:13 e :1872, e disallinearsene creerebbe una banda di larghezze in cui due fogli descrivono due layout diversi. */ @media (min-width:1181px){ html[data-sago-a] .sago-summary-column{ position:sticky; top:calc(var(--ast-topbar-h) + var(--ast-gap)); align-self:start; } } /* Banda intermedia: due colonne, il preventivo passa sotto a tutta larghezza e si apre su due sotto-colonne (standalone.css:13 lo fa gia' a <=1180: qui si conferma con la distanza giusta invece di lasciarla a 18px). */ @media (max-width:1180px){ html[data-sago-a] body .sago-page .sago-configurator{ grid-template-columns:minmax(0,clamp(268px,29vw,330px)) minmax(0,1fr); grid-template-areas: "visual main" "sum sum"; } html[data-sago-a] .sago-summary-column{ position:static; grid-template-columns:repeat(2,minmax(0,1fr)); } } /* Sotto i 1024px una colonna sola, e l'ordine diventa COMMERCIALE: prima quello che il cliente deve fare (file, materiale, quantita'), poi la verifica tecnica di quello che ha fatto, poi il prezzo. La preview prima dei passi, com'e' nel DOM, mostrerebbe una scatola vuota a chi non ha ancora caricato nulla. */ @media (max-width:1023px){ html[data-sago-a] body .sago-page .sago-configurator{ grid-template-columns:minmax(0,1fr); grid-template-areas: "main" "visual" "sum"; } html[data-sago-a] .sago-summary-column{ grid-template-columns:minmax(0,1fr); } } /* ---------------------------------------------------------------------------- 7. BARRA IN ALTO -- UNA SOLA RIGA, E NON E' UNO STILE ---------------------------------------------------------------------------- Il committente ha chiesto esplicitamente che la barra resti quella della pagina lab-astucci, e un tentativo precedente di riscriverla e' stato bocciato. Verificato con un risolutore di cascata sul servito: la barra la fanno tre blocchi di standalone.css (SAGO_HEADER_CONTACT_V3, SAGO_NATIVE_QUICK_ICONS_V1, SAGO_CONTACT_BUTTONS_MODERN_V1) che sono GLI STESSI della pagina astucci. Non toccandola, e' gia' identica. Vestirla la allontanerebbe. Questa regola cambia SOLO il rientro orizzontale, ed e' un allineamento, non uno stile: la barra rientra di 30px fissi mentre tutto il resto della pagina rientra di --ast-pad-x (16 -> 40px). Sopra i mille pixel il logo resterebbe visibilmente disallineato rispetto al titolo sotto. padding-inline sovrascrive solo i lati: lo 0 verticale di standalone.css:64 (padding:0 30px) resta, quindi altezza, fondo, filetto, raggi, colori, tipografia e icone della barra sono intatti. (0,2,2) batte .sago-topbar (0,1,0) sia a riga 64 sia dentro la @media <=820px di riga 196, quindi non serve ripeterla per il mobile. -------------------------------------------------------------------------- */ html[data-sago-a] body .sago-topbar{ padding-inline:var(--ast-pad-x); } /* ---------------------------------------------------------------------------- 8. PIEDE ---------------------------------------------------------------------------- Due righe di servizio, non un footer di sito. Filetto sopra, fondo bianco, testo secondario: la stessa grammatica dei pannelli. Il fondo e' --ast-paper e non --ast-page per una ragione misurata: --ast-copy su --ast-page vale 4,37:1, sotto la soglia AA per il testo corrente; su bianco vale 4,57:1 e passa. Cambiare il fondo era piu' onesto che scurire un token del contratto. 12px e' il pavimento del progetto; standalone.css:1895 lo teneva a 11px. Da battere: standalone.css:12 (0,1,0), :14 (@media <=820, display:block e padding 20/18) e :1895. La mia (0,3,3) le chiude tutte con una regola sola. -------------------------------------------------------------------------- */ html[data-sago-a] body .sago-page > .sago-footer-note{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:6px 24px; margin:0; padding:clamp(16px,1.5vw,22px) var(--ast-pad-x); border-top:1px solid var(--ast-line); background:var(--ast-paper); color:var(--ast-copy); font-size:12px; line-height:1.5; } /* Sotto gli 820px standalone.css:14 mette display:block sul piede e margin-top:5px sui due span. Con flex-wrap il ritorno a capo lo fa gia' il contenitore: il margine avanzato lascerebbe le due righe scollate. */ html[data-sago-a] body .sago-page > .sago-footer-note > span{ margin:0; } /* ---------------------------------------------------------------------------- 9. FUOCO DA TASTIERA ---------------------------------------------------------------------------- L'anello e' quello della pagina astucci: --ast-focus, cioe' 0 0 0 3px rgba(8,120,232,.11). Da solo pero' e' troppo tenue per essere un indicatore di fuoco affidabile, e diversi controlli in pagina hanno gia' un box-shadow con !important (per esempio .sgo-v1g-field input:focus dentro i blocchi inline dei mu-plugin, che questo foglio non puo' battere e non deve provarci). Percio' la visibilita' la garantisce l'outline, che nessuno di quei blocchi dichiara: l'alone resta come firma della pagina, il contorno come garanzia. Agganciato SOLO dentro

: la barra in alto ha gia' i suoi :focus-visible in standalone.css:139 e :425 e non si tocca. Da battere: gli outline:none sparsi (.sago-quantity-control input a standalone.css:11, .sgo-v1k-field input negli inline). Tutti sotto (0,3,3). Niente :not(): il banco non sa decidere i selettori funzionali e scarterebbe la regola invece di verificarla. NOTA SUL BANCO, per chi rifara' i controlli: selmatch.py riporta zero riscontri per qualunque selettore con :focus-visible. Non e' una regola morta, e' un difetto del suo STATE_PSEUDO, dove l'alternanza mette 'focus' prima di 'focus-visible': 'focus' combacia per primo e lascia indietro '-visible', che manda in fumo il parsing del compound. Verifica per procura, sostituendo :focus a :focus-visible sullo stesso selettore: 30 riscontri (27