/* ========================================================================= * TESSin_Footer v1.11.0 - IL FOOTER IN VETRINA, FOGLIO UNICO E AUTOREVOLE * (giro xFOOTDEF) * ========================================================================= * * CHE COSA CAMBIA RISPETTO ALLA 1.10.1, E PERCHE'. * * Fino alla 1.10.1 la presentazione del footer era SPARTITA fra due * fogli: la PELLE (impaginato, tipografia, barra bassa) viveva nel tema * - `_studio-footer.less`, 742 righe sotto `body.tessin-studio-theme` - * e questo foglio portava soltanto i token della superficie e il markup * nuovo del modulo (fascia legale, colonna recapiti, riga di consegna). * * Quella spartizione era la RADICE di due difetti misurati sul vivo: * * 1. AUTORITA' DOPPIA. Il tema scriveva a specificita' (0,2,x), questo * foglio a (0,1,x): qualunque regola scritta qui perdeva in silenzio * contro la sua omonima del tema. Chi avesse voluto correggere * l'impaginato dal modulo - che e' il proprietario del markup - non * poteva, e non vedeva perche'. * 2. IMPAGINATO SFILACCIATO. Le colonne di voci erano una griglia * `repeat(auto-fit, minmax(150px, 1fr))`: con tre colonne vere su un * viewport largo si spartivano l'intera riga in tre tracce da ~433px, * lasciando fra una voce e l'altra un vuoto piu' largo del testo. Il * footer si leggeva come tre elenchi lontani, non come una tavola. * * Da questa versione la presentazione del footer sta TUTTA qui, in UN * SOLO blocco autorevole, e il tema conserva soltanto cio' che gli * compete davvero: le regole sulle PRIMITIVE NATIVE di Magento * (`.page-footer`, `.footer.content`), che un CSS di modulo non deve mai * toccare. Nessuna regola di questo foglio ha piu' un'omonima altrove: * l'ordine di caricamento non conta e non c'e' un solo `!important`. * * RIFERIMENTO DI COMPOSIZIONE. Il disegno adotta la GRAMMATICA di una * vetrina di moda di fascia alta rilevata dal vivo (la fonte e' citata * nel referto di giro, mai qui e mai nel codice): fascia di servizi in * testa a celle divise da capello, fascia editoriale con invito, tavola * di colonne a quattro tracce che si impilano scendendo di larghezza, * barra bassa a tre celle. Si adottano STRUTTURA, GERARCHIA e RITMI. * Non si adotta - e non si copia - nulla che sia contenuto, testo, * disegno, colore o marchio altrui: i contenuti sono i nostri, la * palette e' la nostra. * * PALETTE (legge di progetto): bianco, nero, grigi NEUTRI FREDDI e rosso * come unico accento raro e funzionale. Nessun avorio, nessun beige, * nessun grigio caldo. * * TIPOGRAFIA: gerarchia fatta di PESO e SPAZIO, non di dimensione. Il * maiuscoletto spaziato resta sulle sole etichette brevi di servizio (e * i corpi sono tarati di conseguenza, 11px, non 14: la spaziatura fa * leggere il testo piu' grande di quanto sia). * * MISURE IN PIXEL, non in rem: il tema porta html{font-size:62.5%} * (1rem = 10px) ma questo modulo deve reggere in QUALSIASI tema. In * pixel il disegno e' lo stesso ovunque. * * SCAGLIONI (mobile-first, media query DOPO le base): * base -> telefono: colonne a fisarmonica, tutto incolonnato * >= 640 -> tavoletta: colonne aperte a due tracce * >= 1033 -> scrivania: colonne aperte a quattro tracce * Il 1033 non e' un numero d'autore: e' la soglia MISURATA sul * riferimento (referto di giro), e coincide di fatto con la soglia * scrivania gia' in uso nel negozio. * * CSP: nessuno stile in linea, nessun JS. Nessuna richiesta a terzi: * ogni glifo e' un SVG in linea nel template. * * WCAG 2.5.8: ogni comando ha bersaglio >= 24px (44px sui comandi a * tocco pieno) e anello di focus visibile su entrambe le superfici. * * TRAPPOLA GEMELLA (memoria css-hidden-vs-author-display): accanto a * OGNI `display` d'autore su un nodo che il JS spegne con l'attributo * `hidden` c'e' la regola gemella `[hidden] { display: none; }`. Senza, * la regola user-agent perde contro il display d'autore e `hidden` non * spegne piu' nulla. * ========================================================================= */ /* ------------------------------------------------------------------------- * TOKEN propri del footer. Ricadono su quelli del negozio (li scrive * TESSin\Studio\DesignConfig su :root), e in loro assenza su neutri * d'autore: il modulo si vede anche in un tema che non porta la famiglia * delle variabili di footer. * ------------------------------------------------------------------------- */ .tsn-fo { --tsn-fo-bg: var(--tsn-studio-color-footer-bg, #151515); --tsn-fo-text: var(--tsn-studio-color-footer-text, #ffffff); --tsn-fo-muted: var(--tsn-studio-footer-muted, rgba(255, 255, 255, .74)); --tsn-fo-link: var(--tsn-studio-footer-link, rgba(255, 255, 255, .78)); --tsn-fo-line: var(--tsn-studio-footer-border, rgba(255, 255, 255, .18)); --tsn-fo-btn-border: var(--tsn-studio-footer-button-border, rgba(255, 255, 255, .72)); /* L'accento: rosso di marca, e solo quello. Segue lo schema scelto dal cliente se ce n'e' uno, esattamente come il resto del sito. */ --tsn-fo-accent: var(--tsn-scheme-accent, var(--tsn-studio-color-red, #e41316)); /* Ritmo verticale delle fasce: una sola scala, dichiarata una volta. */ --tsn-fo-band: 28px; --tsn-fo-gutter: 20px; /* --------------------------------------------------------------------- xFOOT2 - LA SCALA TIPOGRAFICA, e il modo in cui il backend la governa. FINO ALLA 1.24.2 QUI NON C'ERA NULLA: le dimensioni del testo erano 24 numeri in pixel sparsi per il foglio (misura xFOOT2: 10px x1, 11px x5, 12px x4, 13px x2, 14px x6, 16px x1, 17px x2, 20px x1, 22px x1, 26px x1). Di configurabile, zero - ed e' la ragione per cui Riccardo il 15-09 ha detto <>: la pagina di configurazione del footer aveva 54 campi, tutti sul contenuto e nessuno sull'aspetto. QUEI 24 NUMERI NON ERANO 24 DECISIONI. Il valore piu' frequente, 14px (sei occorrenze), e' il PASSO del footer; ogni altro valore e' uno scostamento FISSO da quel passo: -4, -3, -2, -1, 0, +2, +3, +6, +8, +12. Scritto cosi', il foglio ha un solo numero d'autore - il passo - e tutto il resto discende. Il backend non espone 24 campi: ne espone tre, perche' una scala ha due gradi di liberta' (dove sta, quanto si apre) e una politica (chi ne resta fuori). DUE FAMIGLIE, NON UNA. Gli scostamenti SOTTO il passo (il maiuscoletto di servizio, le note legali, i mezzi di pagamento) restano agganciati al testo: sono la stessa voce detta piu' piano. Gli scostamenti SOPRA il passo (i titoli) passano per il fattore di risalto, perche' <> e <> sono due richieste diverse e nessuna delle due si ottiene con l'altra. MISURE IN PIXEL, NON IN REM: e' la regola gia' dichiarata in testa a questo foglio (il tema porta html{font-size:62.5%} ma il modulo deve reggere in QUALSIASI tema) e questo blocco NON la rompe. Lo scostamento e' una lunghezza in pixel sommata a una lunghezza in pixel: il risultato resta in pixel, e in un tema senza il 62.5% il disegno e' lo stesso. ATTENZIONE, TRAPPOLA: `--tsn-fo-fs-shift` porta l'unita' anche a zero (`0px`, mai `0`). In `calc()` un `0` nudo sommato a una lunghezza rende l'espressione invalida, la proprieta' sparisce e il testo torna alla misura del tema: un guasto silenzioso che nessun check statico vede. COME ARRIVA IL VALORE DAL BACKEND: tre attributi dato sul nodo radice, scritti dal template (`data-tsn-fo-type`, `data-tsn-fo-head`, `data-tsn-fo-pin`), tradotti qui sotto in passo e fattore. Nessuno stile in linea: la CSP resta intatta e la pagina resta cacheabile. WCAG 2.5.8 - MISURATO, non dedotto: i quattro comandi tappabili del footer (`col__link` 37px, `contact__link`, `trust__link`, `legal__link` 24px) portano gia' un `min-height` ESPLICITO. Il bersaglio e' ancorato al box, non al testo: nessuna posizione di questa manopola puo' portarlo sotto i 24px. --------------------------------------------------------------------- */ /* Il passo FIRMATO del disegno. E' il solo numero d'autore della scala. */ --tsn-fo-fs-anchor: 13px; /* Governati dal backend: riscritti piu' sotto per attributo dato. */ --tsn-fo-fs-shift: 0px; --tsn-fo-fs-spread: 1; /* Il passo CORRENTE: quello firmato piu' lo scostamento voluto. */ --tsn-fo-fs-base: calc(var(--tsn-fo-fs-anchor) + var(--tsn-fo-fs-shift)); /* Famiglia del TESTO: segue il passo, non il risalto dei titoli. */ --tsn-fo-fs-nano: calc(var(--tsn-fo-fs-base) - 4px); --tsn-fo-fs-micro: calc(var(--tsn-fo-fs-base) - 3px); --tsn-fo-fs-small: calc(var(--tsn-fo-fs-base) - 2px); --tsn-fo-fs-sub: calc(var(--tsn-fo-fs-base) - 1px); --tsn-fo-fs-body: var(--tsn-fo-fs-base); /* La bandiera del paese di consegna NON e' un titolo: sta accanto al nome del paese e deve restare in proporzione a quello, quindi vive qui. */ --tsn-fo-fs-glyph: calc(var(--tsn-fo-fs-base) + 3px); /* Famiglia dei TITOLI: il fattore di risalto moltiplica il solo tratto SOPRA il passo, cosi' a `spread: 1` i valori sono quelli firmati. */ --tsn-fo-fs-lead: calc(var(--tsn-fo-fs-base) + 2px * var(--tsn-fo-fs-spread)); --tsn-fo-fs-head: calc(var(--tsn-fo-fs-base) + 3px * var(--tsn-fo-fs-spread)); --tsn-fo-fs-xl: calc(var(--tsn-fo-fs-base) + 6px * var(--tsn-fo-fs-spread)); --tsn-fo-fs-2xl: calc(var(--tsn-fo-fs-base) + 8px * var(--tsn-fo-fs-spread)); --tsn-fo-fs-3xl: calc(var(--tsn-fo-fs-base) + 12px * var(--tsn-fo-fs-spread)); /* LE DUE ECCEZIONI - <> e la riga di copyright (Riccardo, 13-09: <>). Nascono dal passo FIRMATO e non da quello corrente: lo scostamento le scavalca PER COSTRUZIONE, non perche' qualcuno tenga aggiornata una lista di selettori da escludere. A `shift: 0px` vale 11px, esattamente la misura di prima. */ --tsn-fo-fs-pinned: calc(var(--tsn-fo-fs-anchor) - 3px); /* xFOOTWHITE (31-08, direttiva Riccardo: <>) - LA CORNICE NON C'E' PIU'. La 1.14.0 aveva staccato il footer dai bordi con una fascia di 10px del grigio freddo #f1f2f4. Decisione ribaltata: il footer torna a filo di finestra e la superficie e' bianca fino al bordo. REGOLE RIMOSSE, NON NEUTRALIZZATE: i due nomi della cornice (spessore e colore) e le tre dichiarazioni border-* se ne vanno DAVVERO. Non restano a 0 <>: una regola morta che qualcuno riattiva per sbaglio e' peggio di nessuna regola, e questa e' la stessa dottrina con cui la 1.14.0 aveva potato la vecchia fascia a due tracce. Chi la rivolesse la riscrive: sono tre righe. Il `box-sizing` RESTA. Non serviva alla cornice: e' l'igiene del nodo, e toglierlo cambierebbe come si compone la larghezza del footer per una ragione che non c'entra nulla con questo giro. CONTRASTI: nessuna quota cambia. Il fondo era gia' bianco dalla 1.14.0 (il grigio era la CORNICE, non il fondo), quindi il caso peggiore resta `muted` a 6,29:1 - misurato, non ricalcolato a occhio. */ background: var(--tsn-fo-bg); color: var(--tsn-fo-text); box-sizing: border-box; } /* ------------------------------------------------------------------------- * xFOOT2 - LE TRE MANOPOLE DEL BACKEND, e nient'altro. * * Undici righe in tutto, ed e' tutto quello che serve per rendere * governabile una tipografia che prima era 24 numeri fissi. Il valore * arriva in un attributo dato sul NODO RADICE, lo stesso elemento che * dichiara i token: (0,2,0) contro (0,1,0), quindi vince senza `!important` * e senza contro-selettori. * * Le tre famiglie di valori sono quelle di Source\TextScale, * Source\HeadingScale e del campo `pin_exceptions`: se un giorno si * aggiunge una voce la' dentro senza aggiungerla qui, quel valore semplicemente * non muove nulla e il footer resta al disegno firmato. E' il ripiego * giusto: <> vale <>, mai una misura inventata. * ------------------------------------------------------------------------- */ .tsn-fo[data-tsn-fo-type='compact'] { --tsn-fo-fs-shift: -2px; } .tsn-fo[data-tsn-fo-type='reduced'] { --tsn-fo-fs-shift: -1px; } .tsn-fo[data-tsn-fo-type='standard'] { --tsn-fo-fs-shift: 0px; } .tsn-fo[data-tsn-fo-type='comfortable'] { --tsn-fo-fs-shift: 1px; } .tsn-fo[data-tsn-fo-type='large'] { --tsn-fo-fs-shift: 2px; } .tsn-fo[data-tsn-fo-head='flat'] { --tsn-fo-fs-spread: .5; } .tsn-fo[data-tsn-fo-head='quiet'] { --tsn-fo-fs-spread: .75; } .tsn-fo[data-tsn-fo-head='standard'] { --tsn-fo-fs-spread: 1; } .tsn-fo[data-tsn-fo-head='strong'] { --tsn-fo-fs-spread: 1.25; } /* Eccezioni SPENTE: <> e la riga di copyright rientrano nella scala e seguono lo scostamento come tutto il resto. Non e' il default - il default e' la richiesta di Riccardo, cioe' pinned - ma e' la posizione che rende la politica VISIBILE dal backend invece che cablata qui dentro. */ .tsn-fo[data-tsn-fo-pin='0'] { --tsn-fo-fs-pinned: var(--tsn-fo-fs-micro); } /* ------------------------------------------------------------------------- * SUPERFICIE CHIARA - la direzione firmata per la vetrina. * * Il fondo e' il grigio freddo chiarissimo #f1f2f4 (lo stesso delle * superfici transazionali del negozio: una sola famiglia di neutri in * tutto il sito), non il bianco puro, perche' il corpo pagina e' bianco * e il footer deve leggersi come un'ultima riga distinta, non come la * fine del nulla. Il capello in cima chiude il discorso. * * CONTRASTI RIMISURATI sul banco (30-08, composizione alfa reale sul * fondo, non stima): * testo #151515 -> 16,30:1 (AAA) * link rgba(21,21,21,.80) -> 9,10:1 (AAA) * muted rgba(21,21,21,.68) -> 5,99:1 (AA anche a 11px) * comando pieno, fondo su ink -> 16,30:1 (AAA) * E sulla superficie SCURA (#151515): testo 18,26:1 - link 11,37:1 - * muted 10,25:1. Tutte le quote stanno sopra la soglia AA per testo * normale (4,5:1), quindi valgono anche ai corpi piu' piccoli del * foglio (11px). Le due quote "bordo" non portano testo: sono capelli, e * il loro compito e' esserci senza farsi notare. * ------------------------------------------------------------------------- */ .tsn-fo--light { /* Sorgente UNICA dei valori: da qui in giu' si referenziano, non si riscrivono. Questi due nomi non ricadono su nulla, quindi la catena non puo' richiudersi su se stessa. xFOOTNL: il fondo passa da #f1f2f4 a BIANCO. xFOOTWHITE (31-08): e il grigio freddo esce di scena del tutto. Per un giro era diventato la cornice; ora la cornice non c'e' piu' e il footer e' bianco fino al bordo della finestra. Non si distingue piu' dal corpo pagina per COLORE - lo fa per contenuto e per il capello di chiusura in cima. E' la direttiva di Riccardo, ed e' una scelta, non un residuo. CONTRASTI: il fondo si SCHIARISCE, quindi ogni testo scuro guadagna contrasto e nessuna quota puo' peggiorare. Il caso peggiore restava `muted` rgba(21,21,21,.68), dato a 5,99:1 su #f1f2f4 dal banco del 30-08; ricalcolato su #ffffff da' 6,29:1 (composizione alfa reale, poi WCAG 2.x). Il metodo e' lo stesso del banco: rifatto sul vecchio fondo restituisce 5,95:1, cioe' la misura originale a meno dell'arrotondamento - il calcolo e' tarato, non un'affermazione. Nessuna soglia AA viene avvicinata. */ --tsn-fo-ground: #ffffff; --tsn-fo-ink: #151515; --tsn-fo-bg: var(--tsn-fo-ground); --tsn-fo-text: var(--tsn-fo-ink); --tsn-fo-muted: rgba(21, 21, 21, .68); --tsn-fo-link: rgba(21, 21, 21, .80); --tsn-fo-line: rgba(21, 21, 21, .14); --tsn-fo-btn-border: rgba(21, 21, 21, .38); /* Le SEI variabili che il resto del negozio legge per il footer. Ridefinite qui, sul nodo del footer: sotto questo nodo valgono queste, sopra restano quelle del negozio. */ --tsn-studio-color-footer-bg: var(--tsn-fo-ground); --tsn-studio-color-footer-text: var(--tsn-fo-ink); --tsn-studio-footer-muted: rgba(21, 21, 21, .68); --tsn-studio-footer-link: rgba(21, 21, 21, .80); --tsn-studio-footer-button-border: rgba(21, 21, 21, .38); --tsn-studio-footer-border: rgba(21, 21, 21, .14); border-top: 1px solid var(--tsn-fo-line); } /* ------------------------------------------------------------------------- * SUPERFICIE SCURA - la stessa cosa, al contrario. Esiste perche' una * scelta reversibile e' una scelta: chi volesse il footer com'era prima * del giro lo riporta indietro da Stores > Config, senza un deploy. * ------------------------------------------------------------------------- */ .tsn-fo--dark { --tsn-fo-ground: #151515; --tsn-fo-ink: #ffffff; --tsn-fo-bg: var(--tsn-fo-ground); --tsn-fo-text: var(--tsn-fo-ink); --tsn-fo-muted: rgba(255, 255, 255, .74); --tsn-fo-link: rgba(255, 255, 255, .78); --tsn-fo-line: rgba(255, 255, 255, .18); --tsn-fo-btn-border: rgba(255, 255, 255, .72); --tsn-studio-color-footer-bg: var(--tsn-fo-ground); --tsn-studio-color-footer-text: var(--tsn-fo-ink); --tsn-studio-footer-muted: rgba(255, 255, 255, .74); --tsn-studio-footer-link: rgba(255, 255, 255, .78); --tsn-studio-footer-button-border: rgba(255, 255, 255, .72); --tsn-studio-footer-border: rgba(255, 255, 255, .18); } /* ========================================================================= * IMPAGINATO GENERALE * * Stessa gabbia del corpo pagina (1440 + respiro): il footer non e' * un'isola, e' l'ultima riga della stessa pagina. * ========================================================================= */ .tsn-fo__wrap { box-sizing: border-box; margin: 0 auto; max-width: 1440px; padding: 40px var(--tsn-fo-gutter) 24px; width: 100%; } .tsn-fo a { color: var(--tsn-fo-link); text-decoration: none; transition: color .18s ease; } .tsn-fo a:hover { color: var(--tsn-fo-text); } /* Anello di focus a due strati: il primo si stacca dal testo, il secondo garantisce il contrasto anche quando il fondo e' scuro. */ .tsn-fo a:focus-visible, .tsn-fo button:focus-visible { border-radius: 2px; outline: 2px solid var(--tsn-fo-text); outline-offset: 3px; } .tsn-fo ul { list-style: none; margin: 0; padding: 0; } .tsn-fo-glyph { display: block; flex: none; } /* ========================================================================= * LA FASCIA A CELLE - componente UNICO (xFOOTROW, 1.15.0) * * Una fascia orizzontale a tutta larghezza con N celle affiancate: ogni * cella e' titolo in evidenza, sottotitolo quieto sotto, chevron a destra * che dichiara "si va da qualche parte". Su telefono le celle si impilano * e il capello passa fra una e l'altra; da tavoletta in su diventano * tracce affiancate, divise da un capello VERTICALE. Sotto l'intera * fascia corre il capello orizzontale che la chiude. * * Il bersaglio e' l'INTERA cella (56px di riga minima), non il solo * titolo e non il solo chevron: e' un comando a tocco pieno. * * DUE CONSUMATORI, UN SOLO COMPONENTE: * - la fascia SERVIZI (tre voci di configurazione, in testa al footer); * - le RIGHE DI SEZIONI, che l'operatore compone in Footer Studio e * colloca sopra o sotto la fascia delle colonne. * Fino alla 1.14.2 questo blocco si chiamava `.tsn-fo-svc` ed era della * sola fascia servizi. Il nome e' cambiato perche' il componente non e' * piu' di uno solo: la pelle vecchia si RINOMINA, non si duplica sotto * un secondo nome che il giorno dopo diverge. Nessun selettore * `.tsn-fo-svc` sopravvive - qui, nel template, nel tema o altrove. * ========================================================================= */ .tsn-fo-strip { border-bottom: 1px solid var(--tsn-fo-line); display: grid; gap: 0; grid-template-columns: 1fr; padding-bottom: 4px; } .tsn-fo-strip__item { align-items: center; box-sizing: border-box; color: var(--tsn-fo-text); display: flex; gap: 16px; justify-content: space-between; min-height: 56px; padding: 12px 0; width: 100%; } .tsn-fo-strip__item + .tsn-fo-strip__item { border-top: 1px solid var(--tsn-fo-line); } .tsn-fo-strip__item:hover { color: var(--tsn-fo-text); } .tsn-fo-strip__body { display: flex; flex-direction: column; gap: 3px; min-width: 0; } .tsn-fo-strip__title { color: var(--tsn-fo-text); font-size: var(--tsn-fo-fs-body); font-weight: 500; letter-spacing: .01em; line-height: 1.25; } .tsn-fo-strip__sub { color: var(--tsn-fo-muted); font-size: var(--tsn-fo-fs-sub); letter-spacing: .01em; line-height: 1.35; } .tsn-fo-strip__chev { color: var(--tsn-fo-muted); display: flex; flex: none; transition: transform .18s ease; } .tsn-fo-strip__item:hover .tsn-fo-strip__chev { transform: translateX(3px); } /* La cella che NON e' un link non finge di esserlo: niente chevron, e il cursore resta quello del testo. */ .tsn-fo-strip__item--plain { cursor: default; } /* ========================================================================= * FASCIA 2 - NEWSLETTER * * L'invito editoriale. Su telefono e' una colonna; da scrivania il testo * sta a sinistra e l'invito a destra, cosi' la fascia OCCUPA la riga * invece di lasciare un vuoto largo mezza pagina (era il difetto misurato * sulla 1.10.1: titolo e pulsantino in alto a sinistra, e nient'altro). * * Il pulsante NON e' un campo e-mail: l'indirizzo si chiede nella * superficie dedicata, dove vivono il gettone e le leve anti-bot (scelta * anti-bot firmata in F3, che questo giro NON regredisce). Percio' qui * c'e' un comando pieno, non un campo finto. * ========================================================================= */ .tsn-fo-news { border-bottom: 1px solid var(--tsn-fo-line); display: flex; flex-direction: column; gap: 14px; padding: var(--tsn-fo-band) 0; } .tsn-fo-news__title { color: var(--tsn-fo-text); font-size: var(--tsn-fo-fs-2xl); font-weight: 400; letter-spacing: .01em; line-height: 1.3; margin: 0; } /* xFOOT-CARATTERI (17-09, indicazioni di Riccardo date in px e mai registrate prima di oggi): il titolo della newsletter vale 2.5rem, non 3.1rem. PERCHE' SERVE UNA REGOLA IN PIU' E NON BASTA IL TOKEN QUI SOPRA: il titolo e' un

, e il TEMA dichiara `body.tessin-studio-theme h2 {font-size: @studio-fs-2xl}` = 3.1rem, specificita' (0,1,1). La regola del modulo qui sopra e' (0,1,0) e PERDE: misurato a schermo su /it/ il titolo risultava 31px, cioe' il valore del tema, non quello del footer. E' la stessa classe di difetto della CTA che perde l'inchiostro: un selettore di ELEMENTO nel tema batte una CLASSE del modulo. `.tsn-fo` + classe = (0,2,0) batte (0,1,1) senza `!important`. */ .tsn-fo .tsn-fo-news__title { font-size: 2.5rem; } .tsn-fo-news__copy { color: var(--tsn-fo-muted); font-size: var(--tsn-fo-fs-body); letter-spacing: .01em; line-height: 1.6; margin: 0; max-width: 56ch; } /* Comando PIENO, ALLINEATO AL PULSANTE STANDARD (x189/x189-bis: terna riposo/hover/testo, mai un colore derivato) - PRIMA c'era una skin propria (fondo/testo invertiti su --tsn-fo-text/--tsn-fo-bg, l'hover che svuotava il fondo capovolgendo anche il testo): non era il nostro pulsante, era un secondo sistema. Ora consuma il PONTE :root del tema (--tsn-btn-fill-bg/-hover/-fg, _studio-btn-contract.less: Studio Deep Grey #33383c -> Studio Black #25292b, testo bianco MAI cambiato), lo stesso disaccoppiato-dallo-schema-cliente della superficie guest del login drawer (--tsn-fo-news e' anch'essa guest/brand, non area cliente). Fallback = copia VERBATIM dei valori ratificati: il modulo deve reggere anche in un tema senza quel ponte. A BLOCCO PIENO (regola studio-actions-full-width, x188): su telefono e tavoletta l'intera larghezza della colonna, a filo col titolo/testo che la precede (nessun padding orizzontale nella fascia); da scrivania in su l'intera larghezza MENO 10px per lato (direttiva di Riccardo 31-08) - la colonna li' e' stretta e affiancata alle altre, l'inset la stacca leggermente dal bordo della traccia. Bersaglio 50px dal 01-09 (cassa del canone: v. xBTN1 piu' sotto; era 48px). */ .tsn-fo-news__cta { align-items: center; align-self: stretch; display: inline-flex; justify-content: center; text-align: center; text-decoration: none; width: 100%; background: var(--tsn-btn-fill-bg, #33383c); border: 1px solid var(--tsn-btn-fill-bg, #33383c); /* xBTN1 (01-09) - IL RAGGIO VIENE DAL CANONE, NON DA QUI. Era `2px`: un secondo raggio di sistema, scritto a mano, che nessun gate vedeva (il gate del raggio guarda solo i .less del TEMA - questo e' un .css di MODULO). Ora legge il ponte del contratto; il ripiego e' il valore ratificato, verbatim, perche' il modulo deve reggere anche in un tema che quel ponte non lo porta. */ border-radius: var(--tsn-btn-radius, 6px); box-sizing: border-box; color: var(--tsn-btn-fill-fg, #ffffff); cursor: pointer; font-family: inherit; /* xFOOTCASE (31-08, direttiva Riccardo) - IL TESTO SCRITTO IN ADMIN ARRIVA IN VETRINA COM'E' STATO SCRITTO. Qui c'era `text-transform: uppercase`, e rendeva impossibile una cosa che l'operatore crede di poter fare: scrivere <> e vederlo <>. Il campo `button_label` e' testo d'autore, non un'etichetta di sistema: il CSS non deve riscriverlo. (Le maiuscole delle ALTRE etichette del footer - recapiti, spedizioni, pagamenti - restano: quelle sono diciture nostre, non testo scritto in admin.) ⚠️ LA RITARATURA che accompagnava questa direttiva (11 -> 13px, .12em -> .02em, cassa 48px) NON VALE PIU' ed e' stata rimossa da qui il 01-09: era una compensazione calcolata in isolamento, e il giro xBTN1 l'ha sostituita col RIFERIMENTO vero (v. blocco successivo). La trappola di progetto <> resta valida: quando non esiste un riferimento gia' tarato si ritara: ma qui il riferimento esiste, ed e' il pulsante del drawer carrello. Si adotta, non si ricalcola. */ /* xBTN1 (01-09, segnalazione di Riccardo: <>). LA <> ORA E' QUELLA DEL RIFERIMENTO. Il pulsante del drawer carrello rende (misurato su Chrome, 01-09): corpo 13,5px, peso 600, tracking 0, sentence-case, interlinea 1.2, cassa 50px, padding 0 24px. Qui c'erano 13px / 500 / .02em / 48px / 14px 28px: vicini quanto basta per sembrare uguali e diversi quanto basta perche' i due pulsanti, visti nella stessa sessione, non si leggessero come lo stesso oggetto. Non erano un adattamento: erano una taratura fatta in isolamento (xFOOTCASE) contro un riferimento che non era stato consultato. COSA RESTA DI xFOOTCASE, e resta INTATTO: nessun `text-transform`. Il testo scritto in admin arriva in vetrina com'e' stato scritto. Il canone dice `none` — le due direttive coincidono, non si contendono nulla. Il ripiego locale e' `none` scritto, non ereditato. BERSAGLIO DI TOCCO: la cassa sale 48 -> 50px. WCAG 2.5.8 chiede >= 24: si guadagna, non si perde. VALORI DAL PONTE `:root` del contratto (_studio-btn-contract.less): il modulo non compila il LESS del tema e non puo' leggere `@studio-btn-*`. ⚠️ I RIPIEGHI SONO IN PIXEL, e non e' una svista. Le variabili del ponte portano i rem del tema (`5rem`, `1.35rem`, `2.4rem`), che valgono 50 / 13,5 / 24px SOLO perche' il tema Studio dichiara `html{font-size:62.5%}`. Il ripiego entra in gioco proprio quando quel tema NON c'e', dove `5rem` varrebbe 80px: copiarlo alla lettera romperebbe il caso che il ripiego esiste per coprire. In pixel il disegno e' lo stesso ovunque — e' la regola dichiarata in testa a questo foglio, e vale anche qui. Stessa misura, unita' della sede. */ font-size: var(--tsn-btn-fs, 13.5px); font-weight: var(--tsn-btn-fw, 600); letter-spacing: var(--tsn-btn-ls, 0); line-height: var(--tsn-btn-lh, 1.2); text-transform: var(--tsn-btn-tt, none); min-height: var(--tsn-btn-h, 50px); padding: 0 var(--tsn-btn-pad, 24px); transition: background-color .18s ease, border-color .18s ease; } /* L'ANELLO DI FOCUS NON PUO' CAMBIARE LA FORMA DEL PULSANTE (xBTN1). La regola generale del footer (`.tsn-fo a:focus-visible, .tsn-fo button:focus-visible`) porta `border-radius: 2px` per far aderire il contorno ai link di testo. Vale (0,2,1) - `:focus-visible` conta come una CLASSE - e batteva la regola della CTA, che e' (0,1,0): il pulsante tornava a 2px NEL MOMENTO ESATTO in cui lo si stava usando da tastiera. Difetto reale e latente da prima di questo giro: col raggio gia' a 2px non si vedeva, e allineando il raggio al canone sarebbe diventato un lampeggio di forma sotto il Tab. ⚠️ MISURATO, NON DEDOTTO. La prima stesura di questa regola era `.tsn-fo-news__cta:focus-visible`, cioe' (0,2,0), scritta contando `:focus-visible` come uno pseudo-elemento: il banco Chrome del 01-09 ha restituito `2px`, e la regola perdeva. Con `.tsn-fo` davanti si arriva a (0,3,0) e il canone vince. La CTA vive sempre dentro `.tsn-fo` (e' il nodo radice del footer), quindi il discendente non restringe nulla. L'ASPETTO dell'anello resta quello del footer - outline nell'inchiostro della superficie, che regge sia sul footer chiaro sia su quello scuro, cosa che l'anello del contratto non garantisce su entrambe le varianti. Il canone vincola la GEOMETRIA del pulsante, non la pelle dell'anello. */ .tsn-fo .tsn-fo-news__cta:focus-visible { border-radius: var(--tsn-btn-radius, 6px); } /* Il testo NON cambia mai all'hover (x189-bis): solo il fondo scurisce verso Studio Black, stessa tinta scurita del 6%, HEX dichiarato. */ .tsn-fo-news__cta:hover, .tsn-fo-news__cta:focus-visible { background: var(--tsn-btn-fill-hover, #25292b); border-color: var(--tsn-btn-fill-hover, #25292b); color: var(--tsn-btn-fill-fg, #ffffff); } /* ========================================================================= * FASCIA 3 - COLONNE * * La tavola della navigazione secondaria. Contenitore neutro fuori (che * ospita anche la colonna dei RECAPITI, che navigazione non e'), un solo *