/* AS PDP Sugo — solo le regole che pdp.css non ha gia'. Tutto scoped sotto #as-pdp-v2.as-pdp-sugo, cosi' non tocca ne' i risi ne' le confetture. */ /* ---- Contrasto del pulsante d'acquisto ---------------------------------- Il blu del tema (#4F79BD) su testo bianco da' 4,41:1, appena sotto il minimo di 4,5:1 richiesto da WCAG AA per il testo normale. Questo e' il blu piu' chiaro che passa (4,67:1): a occhio e' lo stesso colore, ma il pulsante smette di essere l'anello debole della pagina. Stessa correzione servirebbe sulle schede dei risi. Serve !important: il tema dichiara il colore del pulsante d'acquisto con !important sul selettore .single_add_to_cart_button, e una regola importante batte una normale a prescindere dalla specificita'. */ #as-pdp-v2.as-pdp-sugo .buybox .btn--cart{background:#537492!important;border-color:#537492!important;color:#fff!important} #as-pdp-v2.as-pdp-sugo .buybox .btn--cart:hover{background:#46637d!important;border-color:#46637d!important} #as-pdp-v2.as-pdp-sugo .sticky-cart .btn--cart{background:#537492!important;border-color:#537492!important;color:#fff!important} /* Il pulsante principale a 11,5px era il testo piu' piccolo della pagina proprio sull'azione piu' importante. Portato a 13px: resta maiuscoletto spaziato come gli altri pulsanti del sito, ma si legge. */ #as-pdp-v2.as-pdp-sugo .buybox .btn--cart{font-size:13px!important;letter-spacing:2.2px!important;min-height:56px!important} /* ---- Impaginazione della testata --------------------------------------- Tre aree invece di due: nome, fotografia, riquadro d'acquisto. Su schermo grande il nome sta in cima alla colonna di destra, esattamente dove stava prima. Su telefono la griglia diventa a una colonna e l'ordine e' nome, fotografia, prezzo: senza questo il nome finiva a 847 px dall'alto. */ #as-pdp-v2.as-pdp-sugo .pdp-hero__grid{ grid-template-areas:"galleria titolo" "galleria acquisto"; grid-template-rows:auto 1fr; /* lo spazio fra le colonne resta quello del sito; fra le due righe va azzerato, altrimenti il distacco di 56 px fa sembrare il prezzo staccato dal nome */ column-gap:var(--gap-cols); row-gap:0; } #as-pdp-v2.as-pdp-sugo .sugo-headline{grid-area:titolo} #as-pdp-v2.as-pdp-sugo .buybox{grid-area:acquisto} /* La colonna d'acquisto e' molto piu' alta della fotografia: senza questo restavano circa 750 px di bianco sotto l'immagine, piu' alti dell'immagine stessa. Resa appiccicosa anche la galleria, cosi' la fotografia accompagna la lettura invece di scorrere via lasciando il vuoto. */ #as-pdp-v2.as-pdp-sugo .gallery{grid-area:galleria;position:sticky;top:calc(var(--header-h) + 18px);align-self:start} /* ---- Buybox ------------------------------------------------------------- */ /* tre scaglioni, non due come sui risi */ #as-pdp-v2.as-pdp-sugo .selector__pills{grid-template-columns:repeat(3,1fr);gap:10px} #as-pdp-v2.as-pdp-sugo .pill{padding:14px 8px;min-height:96px;gap:3px} /* il tema applica text-transform:capitalize dentro i pulsanti: senza questo si legge "1 Vasetto" e "6,50 € A Vasetto", con le maiuscole sbagliate */ #as-pdp-v2.as-pdp-sugo .pill, #as-pdp-v2.as-pdp-sugo .pill strong, #as-pdp-v2.as-pdp-sugo .pill small, #as-pdp-v2.as-pdp-sugo .sugo-pill__unit{text-transform:none} #as-pdp-v2.as-pdp-sugo .pill strong{font-family:var(--heading);font-size:15px;letter-spacing:.5px;color:var(--ras-text)} #as-pdp-v2.as-pdp-sugo .pill small{font-family:var(--body);font-size:17px;color:var(--ras-text)} /* il prezzo per vasetto e' l'informazione che rende leggibile lo scaglione: a 11px era la piu' piccola della buybox proprio dove serve decidere */ #as-pdp-v2.as-pdp-sugo .sugo-pill__unit{font-family:var(--ui);font-size:12.5px;line-height:1.3;color:var(--ras-text-muted)} #as-pdp-v2.as-pdp-sugo .pill.is-active .sugo-pill__unit{color:var(--ras-gold-text)} #as-pdp-v2.as-pdp-sugo .sugo-qty-note{font-family:var(--body);font-size:14px;font-style:italic;color:var(--ras-text-muted);margin:9px 0 0} #as-pdp-v2.as-pdp-sugo .selector{margin-bottom:18px} /* disponibilita' come stagione, non come conteggio */ #as-pdp-v2.as-pdp-sugo .sugo-season{display:flex;align-items:center;gap:8px;font-family:var(--body);font-size:15px;color:var(--ras-secondary);margin:0 0 16px} #as-pdp-v2.as-pdp-sugo .sugo-season svg{width:17px;height:17px;flex:none} /* informazioni obbligatorie: ingredienti sempre a vista, il resto richiudibile */ #as-pdp-v2.as-pdp-sugo .sugo-legal{border:1px solid var(--ras-border);border-radius:var(--r-card);background:var(--ras-cream);padding:14px 16px;margin:0 0 20px} #as-pdp-v2.as-pdp-sugo .sugo-legal__ing{font-size:15px;line-height:1.6;color:var(--ras-text);margin:0} #as-pdp-v2.as-pdp-sugo .sugo-legal__alg{font-size:14px;line-height:1.6;color:var(--ras-text-muted);margin:6px 0 0} #as-pdp-v2.as-pdp-sugo .sugo-legal__more{margin-top:10px;border-top:1px solid var(--ras-border);padding-top:9px} #as-pdp-v2.as-pdp-sugo .sugo-legal__more>summary{cursor:pointer;font-family:var(--ui);font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ras-text-muted);list-style:none;min-height:24px;display:flex;align-items:center;gap:6px} #as-pdp-v2.as-pdp-sugo .sugo-legal__more>summary::-webkit-details-marker{display:none} #as-pdp-v2.as-pdp-sugo .sugo-legal__more>summary::after{content:"";width:7px;height:7px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg) translateY(-2px);transition:transform .2s} #as-pdp-v2.as-pdp-sugo .sugo-legal__more[open]>summary::after{transform:rotate(-135deg) translateY(-2px)} #as-pdp-v2.as-pdp-sugo .sugo-legal__body p{font-size:14px;line-height:1.65;color:var(--ras-text-light);margin:9px 0 0} #as-pdp-v2.as-pdp-sugo .sugo-points{list-style:none;margin:22px 0 0;padding:0;border-top:1px solid var(--ras-border)} #as-pdp-v2.as-pdp-sugo .sugo-points li{position:relative;padding:11px 0 11px 22px;border-bottom:1px solid var(--ras-border);font-size:16px;line-height:1.6;color:var(--ras-text-light)} #as-pdp-v2.as-pdp-sugo .sugo-points li::before{content:"";position:absolute;left:2px;top:19px;width:7px;height:7px;border-radius:50%;background:var(--ras-primary)} /* ---- Sezioni ------------------------------------------------------------ */ #as-pdp-v2.as-pdp-sugo .section__lede{font-family:var(--body);font-size:18px;line-height:1.7;color:var(--ras-text-light);max-width:60ch;margin:14px auto 0} #as-pdp-v2.as-pdp-sugo .sugo-trio{display:grid;grid-template-columns:repeat(3,1fr);gap:24px} #as-pdp-v2.as-pdp-sugo .sugo-card{background:#fff;border:1px solid var(--ras-border-blue);border-radius:var(--r-card);padding:28px 26px} #as-pdp-v2.as-pdp-sugo .sugo-card h3{font-family:var(--heading);font-weight:500;font-size:1.15rem;letter-spacing:1px;color:var(--ras-text);margin:0 0 12px} #as-pdp-v2.as-pdp-sugo .sugo-card p{font-size:16px;line-height:1.7;color:var(--ras-text-light);margin:0} #as-pdp-v2.as-pdp-sugo .sugo-story, #as-pdp-v2.as-pdp-sugo .sugo-kitchen{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;align-items:center} #as-pdp-v2.as-pdp-sugo .sugo-story figure, #as-pdp-v2.as-pdp-sugo .sugo-kitchen figure{margin:0} #as-pdp-v2.as-pdp-sugo .sugo-story img, #as-pdp-v2.as-pdp-sugo .sugo-kitchen img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:var(--r-card);border:1px solid var(--ras-border-blue)} #as-pdp-v2.as-pdp-sugo .sugo-story figcaption{font-family:var(--body);font-style:italic;font-size:15px;color:var(--ras-text-muted);margin-top:10px} #as-pdp-v2.as-pdp-sugo .sugo-story .section__title, #as-pdp-v2.as-pdp-sugo .sugo-kitchen .section__title{text-align:left;margin-bottom:18px} #as-pdp-v2.as-pdp-sugo .sugo-story .eyebrow, #as-pdp-v2.as-pdp-sugo .sugo-kitchen .eyebrow{text-align:left} #as-pdp-v2.as-pdp-sugo .sugo-coords{display:inline-flex;align-items:center;gap:10px;margin-top:26px;padding:11px 18px;border:1px solid var(--ras-border-blue);border-radius:var(--r-pill);background:var(--ras-cream)} #as-pdp-v2.as-pdp-sugo .sugo-coords svg{width:19px;height:19px;color:var(--ras-secondary);flex:none} #as-pdp-v2.as-pdp-sugo .sugo-coords b{font-family:var(--ui);font-size:14px;letter-spacing:.04em;color:var(--ras-text)} #as-pdp-v2.as-pdp-sugo .sugo-coords span{font-family:var(--body);font-size:15px;color:var(--ras-text-muted)} #as-pdp-v2.as-pdp-sugo .sugo-quote{font-family:var(--body);font-style:italic;font-size:20px;line-height:1.6;color:var(--ras-text);border-left:3px solid var(--ras-gold);padding-left:20px;margin:0 0 20px} #as-pdp-v2.as-pdp-sugo .sugo-quote span{display:block;font-style:normal;font-family:var(--ui);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--ras-text-muted);margin-top:9px} #as-pdp-v2.as-pdp-sugo .sugo-steps{margin:0;padding:0;list-style:none;counter-reset:s} #as-pdp-v2.as-pdp-sugo .sugo-steps li{counter-increment:s;position:relative;padding:0 0 20px 52px;font-size:17px;line-height:1.7;color:var(--ras-text-light)} #as-pdp-v2.as-pdp-sugo .sugo-steps li::before{content:counter(s);position:absolute;left:0;top:-2px;width:34px;height:34px;border-radius:50%;background:var(--ras-cream);border:1px solid var(--ras-border-blue);color:var(--ras-gold-text);font-family:var(--heading);font-size:15px;display:flex;align-items:center;justify-content:center} #as-pdp-v2.as-pdp-sugo .sugo-steps li:last-child{padding-bottom:0} #as-pdp-v2.as-pdp-sugo .sugo-steps a{color:var(--ras-primary-dark);text-decoration:underline;text-underline-offset:3px} /* ---- Trasparenza -------------------------------------------------------- */ #as-pdp-v2.as-pdp-sugo .sugo-facts{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:56px;align-items:start} #as-pdp-v2.as-pdp-sugo .sugo-fact{padding:0 0 18px;margin-bottom:18px;border-bottom:1px solid var(--ras-border)} #as-pdp-v2.as-pdp-sugo .sugo-fact:last-child{border-bottom:none;margin-bottom:0;padding-bottom:0} #as-pdp-v2.as-pdp-sugo .sugo-fact h3{font-family:var(--ui);font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ras-text-muted);margin:0 0 7px} #as-pdp-v2.as-pdp-sugo .sugo-fact p{font-size:16px;line-height:1.65;color:var(--ras-text);margin:0} #as-pdp-v2.as-pdp-sugo .sugo-fact .note-tbc{font-size:14px;color:var(--ras-text-muted);font-style:italic;margin-top:6px} #as-pdp-v2.as-pdp-sugo .sugo-nutri{width:100%;border-collapse:collapse;background:#fff;border:1px solid var(--ras-border-blue);border-radius:var(--r-card);overflow:hidden} #as-pdp-v2.as-pdp-sugo .sugo-nutri caption{caption-side:top;text-align:left;font-family:var(--ui);font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ras-text-muted);padding:0 0 10px} #as-pdp-v2.as-pdp-sugo .sugo-nutri th, #as-pdp-v2.as-pdp-sugo .sugo-nutri td{padding:11px 16px;border-bottom:1px solid var(--ras-border);font-size:15px;color:var(--ras-text);text-align:left;font-weight:400} #as-pdp-v2.as-pdp-sugo .sugo-nutri td{text-align:right;font-variant-numeric:tabular-nums} #as-pdp-v2.as-pdp-sugo .sugo-nutri tr:last-child th, #as-pdp-v2.as-pdp-sugo .sugo-nutri tr:last-child td{border-bottom:none} #as-pdp-v2.as-pdp-sugo .sugo-nutri .nutri__sub th{padding-left:32px;color:var(--ras-text-muted);font-size:14px} #as-pdp-v2.as-pdp-sugo .sugo-nutri .nutri__sub td{color:var(--ras-text-muted);font-size:14px} /* La compensazione per la barra fissa va sull'ULTIMA sezione della pagina, non sui contatti: dopo di loro vengono i prodotti correlati e il pie' di pagina, ed e' quella la roba che la barra copriva. */ #as-pdp-v2.as-pdp-sugo>.section:last-of-type{padding-bottom:110px} #as-pdp-v2.as-pdp-sugo .sugo-contact{text-align:center;font-size:15px;line-height:1.8;color:var(--ras-text-muted);margin:36px 0 0} #as-pdp-v2.as-pdp-sugo .sugo-contact a{color:var(--ras-primary-dark);text-decoration:underline;text-underline-offset:3px} /* ---- Ombra della fotografia principale ---------------------------------- pdp.css applica un drop-shadow all'immagine. Su un JPEG senza canale alfa l'ombra segue il RETTANGOLO della fotografia, non il profilo del barattolo, e disegna una cornice dentro la cornice. I nostri scatti hanno gia' la propria ombra di appoggio composta sotto il vasetto. */ /* ---- trasparente al layout ------------------------------------ Da quando le immagini sono avvolte in per servire il WebP, il wrapper si metteva in mezzo fra .gallery__main e la sua . e' un elemento in linea e non ha altezza propria, quindi l'height:100% dell' immagine non trovava piu' un riferimento e il riquadro grande restava BIANCO: caricava il file ma non disegnava niente (naturalWidth a zero). display:contents toglie il box del wrapper dall'albero del layout, cosi' l'immagine torna a comportarsi come se fosse figlia diretta del riquadro e tutte le regole scritte prima valgono ancora, invariate. La scelta della non passa dal layout, quindi il WebP continua a essere servito. */ #as-pdp-v2.as-pdp-sugo picture{display:contents} /* ---- Correzioni del giudizio del 17/08 ---------------------------------- */ /* CONTRASTO. L'oro e l'azzurro ereditati stavano sotto il minimo AA di 4,5:1 su nove elementi della scheda: occhielli, prezzo per vasetto, riepilogo apribile dei valori nutrizionali, link alle condizioni e ai contatti. Misurato: oro #9A6E3A su crema #F8F5F0 dava 4,14:1, azzurro #5A7D9E dava 3,97:1. Si correggono i due token invece delle nove regole, e solo dentro questa scheda: le schede riso hanno lo stesso difetto ma non e' questo il round per toccarle. Nuovi valori misurati: oro 4,54:1 su crema e 4,93:1 su bianco, azzurro 4,51:1 e 4,91:1. Lo scarto di tinta e' impercettibile. */ #as-pdp-v2.as-pdp-sugo{ --ras-gold-text:#926837; --ras-primary-dark:#537492; /* 'Inter' era il primo nome della pila ma non viene caricato da nessuna parte: il testo usciva comunque in un sans di sistema, diverso su ogni computer, ed e' anche un carattere che le linee guida del marchio vietano. Tolto il nome fantasma, resta dichiarato quello che il browser gia' usava. */ --ui:'EB Garamond',Georgia,serif; } /* TITOLO DEL PRODOTTO. Era il titolo piu' debole della pagina: su desktop 38px di peso 400 contro i 38,4px di peso 500 dei sette titoli di sezione, quindi il nome del prodotto pesava meno di "Basta scaldarlo". Sale di corpo e di peso e prende la stessa spaziatura degli altri titoli. */ #as-pdp-v2.as-pdp-sugo .pdp-title{ font-weight:500; font-size:clamp(30px,4.2vw,52px); letter-spacing:.02em; } /* PULSANTI FLOTTANTI CONTRO LA BARRA D'ACQUISTO. Misurato a 390px: la barra occupa da 774 a 844, il pulsante dei cookie sta a 785 sopra l'icona e il nome del formato, il "torna su" sta a 792 sopra il pulsante Aggiungi e ne intercetta i tocchi. Tutti e due hanno z-index piu' alto della barra, quindi vincono loro. La classe sul body la mette e la toglie sugo.js insieme alla barra, quindi questa regola vale solo quando la barra c'e' davvero, e solo su questa scheda. */ body.as-sugo-bar #aes-cb-fab{bottom:96px} body.as-sugo-bar .scrollToTop{bottom:92px} /* la pastiglia della lingua sta anche lei in basso a destra e finiva addosso al "torna su" appena questo si alzava */ /* la pastiglia della lingua ha una regola piu' specifica nel suo mu-plugin: la prima versione di questa riga non vinceva e il valore calcolato restava 84px, cioe' la pastiglia finiva addosso al "torna su". Misurato: sovrapposizione di 38x23 px. Le tre pastiglie ora stanno su tre altezze che non si toccano. */ body.as-sugo-bar .as-lang-switch, html body.as-sugo-bar a.as-lang-switch{bottom:196px !important} /* La barra e' fissa sul fondo e copriva la riga dei link legali del piede: arrivati in fondo alla pagina, Politica aziendale, Privacy, Cookie e Condizioni non si potevano piu' toccare. Lo spazio se lo riprende il documento, che e' il modo giusto: una barra fissa deve lasciare in fondo tanto spazio quanto ne occupa. */ body.as-sugo-bar{padding-bottom:78px} /* Tabulando verso il basso il fuoco finiva sotto la barra, e verso l'alto sotto l'intestazione appiccicosa: il browser portava l'elemento a filo del bordo, che qui e' coperto. Con lo scroll-padding il punto di arrivo si sposta dentro l'area visibile. */ html.as-sugo-bar{scroll-padding-bottom:96px;scroll-padding-top:96px} /* La domanda della FAQ ora sta dentro un h3, che serve all'indice dei titoli. L'h3 non deve pero' portarsi dietro corpo, peso e margini dei titoli: e' solo un contenitore, l'aspetto resta quello del pulsante che c'era prima. */ #as-pdp-v2.as-pdp-sugo .faq__q{margin:0;font:inherit;letter-spacing:inherit;color:inherit} #as-pdp-v2.as-pdp-sugo .gallery__main img{filter:none} /* ---- Barra fissa d'acquisto -------------------------------------------- pdp.css la mostra solo sotto una certa larghezza. Qui serve a ogni misura: il pulsante esce dalla vista anche su desktop e non torna piu'. */ #as-pdp-v2.as-pdp-sugo .sticky-cart{display:flex} /* il nome del formato non va nascosto sul telefono: e' l'unica cosa che dice COSA si sta aggiungendo, e la barra e' il comando d'acquisto vero su mobile */ @media (max-width:430px){ #as-pdp-v2.as-pdp-sugo .sticky-cart__name{display:block;font-size:12px} #as-pdp-v2.as-pdp-sugo .sticky-cart__thumb{display:none} } /* ---- Esito dell'aggiunta al carrello ----------------------------------- */ #as-pdp-v2.as-pdp-sugo .sugo-esito{font-family:var(--body);font-size:15px;margin:10px 0 0;min-height:0;color:var(--ras-text-light)} #as-pdp-v2.as-pdp-sugo .sugo-esito:empty{margin:0} #as-pdp-v2.as-pdp-sugo .sugo-esito[data-tipo="ok"]{color:var(--ras-secondary)} #as-pdp-v2.as-pdp-sugo .sugo-esito[data-tipo="errore"]{color:#A33A2B} /* ---- Prodotto esaurito -------------------------------------------------- */ #as-pdp-v2.as-pdp-sugo .btn--cart.is-disabled{background:#B9C2CB!important;border-color:#B9C2CB!important;cursor:not-allowed} #as-pdp-v2.as-pdp-sugo .availability--out{color:var(--ras-text-muted)} #as-pdp-v2.as-pdp-sugo .availability--out .dot{background:#B9C2CB} /* ---- Denominazione sempre a vista e condizioni accanto al pulsante ------ */ #as-pdp-v2.as-pdp-sugo .sugo-legal__den{font-family:var(--heading);font-size:15px;letter-spacing:.4px;color:var(--ras-text);margin:0 0 8px;padding-bottom:8px;border-bottom:1px solid var(--ras-border)} #as-pdp-v2.as-pdp-sugo .sugo-terms{margin:8px 0 0;font-size:14px} #as-pdp-v2.as-pdp-sugo .sugo-terms a{color:var(--ras-primary-dark);text-decoration:underline;text-underline-offset:3px;padding-block:3px;display:inline-block} /* ---- Travasi di stile dal tema non intercettati ------------------------- Il tema mette text-transform:capitalize dentro i pulsanti: senza questo le domande escono "E' Una Passata?" e i nomi dei risi "Riso Carnaroli Classico" con l'iniziale maiuscola su ogni parola. */ #as-pdp-v2.as-pdp-sugo .faq__trigger, #as-pdp-v2.as-pdp-sugo .faq__trigger span, #as-pdp-v2.as-pdp-sugo .accordion__trigger, #as-pdp-v2.as-pdp-sugo .product-card__name, #as-pdp-v2.as-pdp-sugo .product-card__name a{text-transform:none} /* nella tabella nutrizionale le voci erano in bastoni e i valori in graziato: due caratteri diversi nella stessa riga */ #as-pdp-v2.as-pdp-sugo .sugo-nutri th, #as-pdp-v2.as-pdp-sugo .sugo-nutri td{font-family:var(--body)} /* i prezzi dei correlati uscivano azzurri mentre tutti gli altri prezzi sono oro */ #as-pdp-v2.as-pdp-sugo .product-card__price, #as-pdp-v2.as-pdp-sugo .product-card__price *{color:var(--ras-gold-text)} /* il blocco nome dei correlati ad altezza fissa, altrimenti la riga non allinea */ #as-pdp-v2.as-pdp-sugo .product-card__name{min-height:2.6em} /* Il riepilogo apribile sembrava una didascalia invece che un comando */ #as-pdp-v2.as-pdp-sugo .sugo-legal__more>summary{color:var(--ras-primary-dark);text-transform:none;font-size:14px;letter-spacing:.01em} /* ---- Aree toccabili ----------------------------------------------------- WCAG 2.5.8 chiede almeno 24x24 px. I collegamenti dentro una frase sono esclusi dalla regola, ma briciole di pane, riepilogo apribile e nomi dei prodotti correlati no: erano fra i 16 e i 19 px di altezza. Tutto scoped alla scheda del sugo, le pagine dei risi non vengono toccate. */ #as-pdp-v2.as-pdp-sugo .breadcrumb__list a, #as-pdp-v2.as-pdp-sugo .breadcrumb__current{display:inline-block;padding-block:6px;min-height:24px} #as-pdp-v2.as-pdp-sugo .sugo-legal__more>summary{min-height:32px} #as-pdp-v2.as-pdp-sugo .product-card__name a{display:inline-block;padding-block:4px} #as-pdp-v2.as-pdp-sugo .sugo-contact a, #as-pdp-v2.as-pdp-sugo .sugo-steps a, #as-pdp-v2.as-pdp-sugo .note-tbc a{padding-block:3px;display:inline-block} /* ---- Mobile ------------------------------------------------------------- */ @media (max-width:980px){ /* nome, fotografia, prezzo: in quest'ordine. grid-template-columns:1fr va dichiarato QUI. Questo blocco parte da 980px, ma la regola che rimette la testata a una colonna sola sta in pdp.css e parte da 900px: nella striscia fra 901 e 980 px le aree dicevano una colonna e le colonne ne davano ancora due, cosi' nome, fotografia e riquadro d'acquisto si accartocciavano nella meta' sinistra e restavano 427 px vuoti per quasi duemila pixel di altezza. Misurato a 940 e a 970 px prima della correzione. */ #as-pdp-v2.as-pdp-sugo .pdp-hero__grid{grid-template-areas:"titolo" "galleria" "acquisto";grid-template-columns:1fr;grid-template-rows:auto auto auto;gap:24px} /* su una colonna sola l'appiccicoso non serve e darebbe fastidio */ #as-pdp-v2.as-pdp-sugo .gallery{position:static} #as-pdp-v2.as-pdp-sugo .sugo-headline .pdp-title{margin-bottom:8px} /* la fotografia non deve prendersi tutta la schermata: il prezzo deve affacciarsi sotto, altrimenti sembra che la pagina finisca li' */ #as-pdp-v2.as-pdp-sugo .gallery__main{max-height:52vh} #as-pdp-v2.as-pdp-sugo .sugo-trio{grid-template-columns:1fr;gap:16px} #as-pdp-v2.as-pdp-sugo .sugo-story, #as-pdp-v2.as-pdp-sugo .sugo-kitchen, #as-pdp-v2.as-pdp-sugo .sugo-facts{grid-template-columns:1fr;gap:32px} /* il racconto prima della foto, la foto prima del testo in cucina: su mobile l'immagine di apertura di sezione aiuta, quella di chiusura interrompe */ #as-pdp-v2.as-pdp-sugo .sugo-story__media{order:2} #as-pdp-v2.as-pdp-sugo .sugo-story img, #as-pdp-v2.as-pdp-sugo .sugo-kitchen img{aspect-ratio:1/1} } @media (max-width:520px){ /* i tre scaglioni restano affiancati: incolonnarli farebbe scomparire il confronto, che e' l'unica ragione per cui esistono. Si stringe il testo. */ #as-pdp-v2.as-pdp-sugo .selector__pills{gap:7px} #as-pdp-v2.as-pdp-sugo .pill{padding:12px 5px;min-height:92px} #as-pdp-v2.as-pdp-sugo .pill strong{font-size:13.5px} #as-pdp-v2.as-pdp-sugo .pill small{font-size:16px} /* il prezzo per vasetto e' il numero che rende confrontabili le tre pillole: a 10,5 px era il testo piu' piccolo della pagina proprio dove si decide */ #as-pdp-v2.as-pdp-sugo .sugo-pill__unit{font-size:12px} #as-pdp-v2.as-pdp-sugo .sugo-steps li{padding-left:46px;font-size:16px} #as-pdp-v2.as-pdp-sugo .sugo-quote{font-size:18px;padding-left:16px} } /* ========================================================================== Rifinitura di design del 18/08. Le fotografie sono fuori dai criteri per decisione di Andrea: qui si lavora solo su impaginazione, scala e colore. ========================================================================== */ /* PULSANTE D'ACQUISTO, aggiornato il 18/08. Era #4C75B7, un blu che non sta nella tavolozza del marchio. L'azzurro identitario #7599B9 pero' col testo bianco da' 2,99:1, sotto il minimo di 4,5: usarlo tale e quale sarebbe stato un peggioramento. #537492 e' lo stesso azzurro portato in ombra: tinta della famiglia giusta (212 gradi contro i 209 del marchio, mentre il blu di prima stava a 217) e contrasto 4,91:1, meglio del 4,63 di prima. Il valore vero e' quello scritto sopra con !important, perche' il tema usa !important a sua volta. */ /* SCHEDE CORRELATE tutte alla stessa altezza: la quarta misurava 534 px contro i 524 delle altre tre, e su mobile, dove vanno a due per riga, il bordo inferiore e il pulsante non si allineavano. */ #as-pdp-v2.as-pdp-sugo .related__track{align-items:stretch} #as-pdp-v2.as-pdp-sugo .product-card{height:100%} #as-pdp-v2.as-pdp-sugo .product-card__body{justify-content:space-between} /* TRASPARENZA: la colonna di destra finiva 298 px prima di quella di sinistra e lasciava un buco di crema in basso a destra. Le due colonne partono ora dall'alto e la tabella non si stira. */ @media (min-width:981px){ #as-pdp-v2.as-pdp-sugo .sugo-facts{align-items:start} } /* PRIMA SCHERMATA SU TELEFONO. Il nome del prodotto cominciava a 298 px, cioe' dopo il 35% dell'altezza dello schermo, e sopra c'erano 72 px di vuoto fra le briciole di pane e l'occhiello. Recuperati una sessantina di pixel senza togliere niente: si vede prima di cosa si sta parlando. */ @media (max-width:600px){ #as-pdp-v2.as-pdp-sugo .breadcrumb{padding-block:6px} #as-pdp-v2.as-pdp-sugo .pdp-hero{padding-top:14px} #as-pdp-v2.as-pdp-sugo .pdp-eyebrow{margin-bottom:6px;letter-spacing:3.5px} #as-pdp-v2.as-pdp-sugo .sugo-headline{margin-bottom:4px} } /* SCALA TIPOGRAFICA, riscritta il 18/08. Misurati quattordici corpi distinti su una pagina sola, con cinque coppie che nessun occhio separa ma che sporcano il ritmo: 11 e 11,2 - 12 e 13 - 14 e 15 - 16 e 17 - 18 e 18,4. Non e' gerarchia, e' rumore. La scala scende a nove gradini: 42 / 30 / 25,6 / 20 / 18 / 17 / 15 / 13 / 11,2. Ogni coppia viene accorpata verso il valore PIU' LEGGIBILE, mai verso il piu' piccolo: la pagina si era gia' presa due rilievi per il testo minuto. */ /* i due micro-testi erano i piu' piccoli della pagina: 9 px l'etichetta dello scaglione, 9,6 px l'occhiello delle schede correlate. Vanno sul gradino base. */ #as-pdp-v2.as-pdp-sugo .pill__tag, #as-pdp-v2.as-pdp-sugo .product-card__kicker{font-size:11.2px} /* 12 dentro 13 */ #as-pdp-v2.as-pdp-sugo .price-note, #as-pdp-v2.as-pdp-sugo .sugo-pill__unit, #as-pdp-v2.as-pdp-sugo .sticky-cart__name, #as-pdp-v2.as-pdp-sugo .sticky-cart__price, #as-pdp-v2.as-pdp-sugo .pill strong{font-size:13px} /* 14 dentro 15: erano due corpi di testo secondario indistinguibili */ #as-pdp-v2.as-pdp-sugo .sugo-terms, #as-pdp-v2.as-pdp-sugo .note-tbc, #as-pdp-v2.as-pdp-sugo .availability, #as-pdp-v2.as-pdp-sugo .sugo-qty-note, #as-pdp-v2.as-pdp-sugo .sugo-legal__body p, #as-pdp-v2.as-pdp-sugo .sugo-legal__alg, #as-pdp-v2.as-pdp-sugo .sugo-legal__more>summary, #as-pdp-v2.as-pdp-sugo .sugo-nutri th, #as-pdp-v2.as-pdp-sugo .sugo-nutri td{font-size:15px} /* 16 dentro 17: il testo che si legge davvero sta su un gradino solo */ #as-pdp-v2.as-pdp-sugo .pdp-reason, #as-pdp-v2.as-pdp-sugo .faq__a, #as-pdp-v2.as-pdp-sugo .sugo-points li, #as-pdp-v2.as-pdp-sugo .sugo-card p, #as-pdp-v2.as-pdp-sugo .sugo-fact p, #as-pdp-v2.as-pdp-sugo .sugo-steps li{font-size:17px} /* 18,4 dentro 18 */ #as-pdp-v2.as-pdp-sugo .faq__trigger, #as-pdp-v2.as-pdp-sugo .faq__q, #as-pdp-v2.as-pdp-sugo .sugo-card h3{font-size:18px} /* Ultimi valori isolati, presi per selettore misurato e non a occhio. */ #as-pdp-v2.as-pdp-sugo .breadcrumb__list, #as-pdp-v2.as-pdp-sugo .breadcrumb__list a, #as-pdp-v2.as-pdp-sugo .breadcrumb__current, #as-pdp-v2.as-pdp-sugo .selector__label, #as-pdp-v2.as-pdp-sugo .sugo-nutri caption, #as-pdp-v2.as-pdp-sugo .sugo-fact h3{font-size:11.2px} #as-pdp-v2.as-pdp-sugo .sugo-quote span, #as-pdp-v2.as-pdp-sugo .reassurance span, #as-pdp-v2.as-pdp-sugo .sugo-coords b, #as-pdp-v2.as-pdp-sugo .sugo-fact .note-tbc{font-size:15px} /* il totale dello scaglione e' il numero su cui si decide: sta sul gradino del testo di lettura, non mezzo passo sotto */ #as-pdp-v2.as-pdp-sugo .pill small{font-size:17px} /* ========================================================================== Secondo giro di design del 18/08. Cinque revisori indipendenti, tutti a 7, con rilievi che convergono. Qui i convergenti, in ordine di quanti li hanno segnalati. Fotografie sempre fuori dai criteri. ========================================================================== */ /* 5 revisori su 5: LA TERZA FAMIGLIA DI CARATTERI. Il marchio ne dichiara due, Cinzel ed EB Garamond, e la pagina ne usava tre: il sans di sistema entrava in dodici ruoli. Non era una scelta, era il seguito del carattere fantasma che ho tolto ieri: avevo eliminato il nome 'Inter' senza accorgermi che al suo posto restava comunque una faccia non del marchio. Il caso che lo dimostra: i titoletti della Trasparenza e la didascalia della tabella nutrizionale hanno corpo, peso, spaziatura e colore identici e stanno nella stessa colonna a 139 px di distanza, ma uno usciva in Cinzel e l'altro nel sans di sistema. Il token --ui ora punta a EB Garamond: due famiglie, come dice il marchio. Regola di sbarramento sotto, cosi' il tema non rientra. */ #as-pdp-v2.as-pdp-sugo .breadcrumb__list, #as-pdp-v2.as-pdp-sugo .breadcrumb__list a, #as-pdp-v2.as-pdp-sugo .selector__label, #as-pdp-v2.as-pdp-sugo .pill__tag, #as-pdp-v2.as-pdp-sugo .product-card__kicker, #as-pdp-v2.as-pdp-sugo .sugo-nutri caption, #as-pdp-v2.as-pdp-sugo .sugo-legal__more>summary, #as-pdp-v2.as-pdp-sugo .sticky-cart__name, #as-pdp-v2.as-pdp-sugo .sticky-cart__price, #as-pdp-v2.as-pdp-sugo .sugo-pill__unit, #as-pdp-v2.as-pdp-sugo .price-note, #as-pdp-v2.as-pdp-sugo .reassurance span{font-family:'EB Garamond',Georgia,serif} /* i titoletti della Trasparenza erano l'unico gruppo in Cinzel a quel rango: vanno con gli altri, non da soli */ #as-pdp-v2.as-pdp-sugo .sugo-fact h3{font-family:'EB Garamond',Georgia,serif} /* 3 revisori su 5: LA PASTIGLIA "DA QUI SCENDE" SBORDA DALLA PILLOLA. Misurata a 390 px: larga 120,9 px dentro una pillola da 113,3, quindi 3,8 px fuori per lato dentro corridoi da 7. E sotto le restavano 1,6 px d'aria contro i 14 delle altre due pillole. Peggiorata da me, che ieri le ho alzato il corpo da 9 a 11,2 px senza ricontrollare la larghezza. */ #as-pdp-v2.as-pdp-sugo .pill__tag{ padding-inline:5px; letter-spacing:.4px; max-width:100%; white-space:nowrap; box-sizing:border-box; top:-11px; } /* CORREZIONE 18/08, terzo giro. Questa riga l'avevo scritta io stamattina con :has(), e applicava il rientro in alto SOLO alla pillola che porta la pastiglia: risultato, la pillola centrale aveva tutte le sue righe 4 px piu' in basso delle due sorelle. Cinque revisori su cinque l'hanno vista, ed e' il rilievo piu' convergente di tutto il round. Il rientro va a tutte e tre, cosi' restano in registro; la pastiglia sporge sopra il bordo e non ha bisogno di spazio suo. */ #as-pdp-v2.as-pdp-sugo .selector__pills .pill{padding-top:20px} /* 3 revisori su 5: IL COMANDO PRINCIPALE HA DUE FORME. Stesso colore e stesso carattere, ma raggio 10 px nel riquadro d'acquisto e 2 px nella barra fissa, con spaziatura 2,2 contro 1. E su telefono quello che si tocca davvero e' il secondo, cioe' la pagina mostra la sua versione meno curata proprio nel momento in cui si compra. */ #as-pdp-v2.as-pdp-sugo .sticky-cart__cta{ border-radius:10px!important; letter-spacing:2.2px!important; font-size:13px!important; } /* 3 revisori su 5: NESSUNA GRIGLIA VERTICALE. Lo stesso EB Garamond a 17 px usciva con quattro interlinee diverse, quindi il ritmo non si posava mai. Una sola interlinea per il testo di lettura. */ #as-pdp-v2.as-pdp-sugo .prose p, #as-pdp-v2.as-pdp-sugo .faq__a, #as-pdp-v2.as-pdp-sugo .sugo-points li, #as-pdp-v2.as-pdp-sugo .sugo-card p, #as-pdp-v2.as-pdp-sugo .sugo-fact p, #as-pdp-v2.as-pdp-sugo .sugo-steps li{line-height:1.7} /* 4 revisori su 5: LE TESTATE DI SEZIONE CAMBIANO ASSE. Cinque centrate, due a bandiera, e su telefono, dove la colonna e' una sola, l'alternanza non si legge come una regola ma come una dimenticanza. */ @media (max-width:900px){ #as-pdp-v2.as-pdp-sugo .sugo-story .section__title, #as-pdp-v2.as-pdp-sugo .sugo-kitchen .section__title, #as-pdp-v2.as-pdp-sugo .sugo-story .eyebrow, #as-pdp-v2.as-pdp-sugo .sugo-kitchen .eyebrow{text-align:center} } /* 4 revisori su 5: LE BRICIOLE DI PANE. Si prendevano 81 px della prima schermata per ripetere alla lettera il titolo che comincia poche righe sotto, e andando a capo lasciavano il separatore incollato alla parola. Su telefono l'ultima briciola sparisce: resta il percorso, che e' la sua unica funzione, e si guadagna mezza riga. */ #as-pdp-v2.as-pdp-sugo .breadcrumb__list li{white-space:nowrap} @media (max-width:600px){ #as-pdp-v2.as-pdp-sugo .breadcrumb__current{display:none} } /* 3 revisori su 5: IL PREZZO UNITARIO VA A CAPO DOPO LA PREPOSIZIONE, "6,50 EUR a / vasetto", in tutte e tre le pillole. */ #as-pdp-v2.as-pdp-sugo .sugo-pill__unit{text-wrap:balance;hyphens:none} /* 2 revisori su 5: LO STATO DI FUOCO ESISTE SU UN COMANDO SOLO. Chi naviga da tastiera perdeva il segno su tredici comandi su quattordici, pulsante d'acquisto compreso. */ /* CORREZIONE 18/08, secondo giro. La regola di prima non funzionava e l'avevo data per buona guardando il foglio invece del risultato: il border-radius passava (prova che il selettore prendeva), ma l'outline veniva sovrascritto da una regola del tema con !important, quindi tutti i comandi mostravano ancora l'anello punteggiato nero del browser. Misurato con una passeggiata di 40 tabulazioni: 30 comandi su 31 con 'dotted 2px rgb(0,0,0)'. Due correzioni: !important sull'anello, e via il border-radius fisso, che era un difetto in piu' perche' deformava la pastiglia della quantita' da 35 px a 4 proprio mentre la si stava usando. Il raggio ora lo eredita dal comando. */ #as-pdp-v2.as-pdp-sugo a:focus-visible, #as-pdp-v2.as-pdp-sugo button:focus-visible, #as-pdp-v2.as-pdp-sugo summary:focus-visible, #as-pdp-v2.as-pdp-sugo input:focus-visible{ outline:2px solid #537492!important; outline-offset:3px!important; } /* 2 revisori su 5: LE OPZIONI NON SCELTE NON SEMBRANO COMANDI. Il bordo della pillola inattiva stava a 1,27:1 sul bianco, sotto il 3:1 che serve per far capire che un contorno delimita qualcosa di toccabile. */ #as-pdp-v2.as-pdp-sugo .pill{border-color:#B9B1A5} #as-pdp-v2.as-pdp-sugo .pill.is-active{border-color:var(--ras-primary-dark)} /* 2 revisori su 5: LE PASTIGLIE FISSE SOPRA IL PULSANTE D'ACQUISTO. Il rimedio di ieri le alzava solo quando la barra e' visibile; ma quando la barra NON c'e', perche' il pulsante vero e' in vista, le pastiglie tornano in basso e finiscono proprio sopra quel pulsante (area comune misurata 34x40 px). Sulla scheda del sugo stanno alzate sempre. */ #as-pdp-v2.as-pdp-sugo ~ #aes-cb-fab, body:has(#as-pdp-v2.as-pdp-sugo) #aes-cb-fab{bottom:96px} body:has(#as-pdp-v2.as-pdp-sugo) .scrollToTop{bottom:92px} body:has(#as-pdp-v2.as-pdp-sugo) .as-lang-switch{bottom:196px!important} /* 3 revisori su 5: PAROLE ORFANE SUI TITOLI GRANDI. Quattro blocchi display chiudevano con una parola sola centrata: "fornitore" a 160 px contro 259,8 della riga sopra, "dentro" 115,5 contro 330, "primi" 80,6 contro 316,9, e il caso peggiore "casa." a 31,4 px su una misura di 354, cioe' il 9 per cento della riga. Essendo centrati, l'orfano resta sospeso in mezzo al bianco e si vede da lontano. text-wrap risultava "wrap" su tutti e sette i blocchi: nessuno governava le andate a capo. */ #as-pdp-v2.as-pdp-sugo .pdp-title, #as-pdp-v2.as-pdp-sugo .section__title{text-wrap:balance} #as-pdp-v2.as-pdp-sugo .section__lede, #as-pdp-v2.as-pdp-sugo .pdp-subtitle, #as-pdp-v2.as-pdp-sugo .pdp-eyebrow{text-wrap:pretty} /* ========================================================================== Terzo giro di design, 18/08. Cinque revisori, tutti 7, rilievi convergenti. ========================================================================== */ /* 4 su 5: NESSUNA SCALA DI SPAZIATURA NELLA COLONNA D'ACQUISTO. Nove stacchi consecutivi con otto valori distinti (6, 24, 16, 28, 30, 26, 16, 8, 22), senza passo comune. Fuori di li' la pagina e' disciplinata, quindi il disordine sta esattamente dove si compra. E il pulsante riceveva 30 px sopra e 26 sotto, cioe' l'aria di una didascalia qualsiasi: non emergeva da niente. Scala a quattro passi: 8 dentro un gruppo, 16 fra elementi affini, 24 fra gruppi, 40 sopra e sotto il pulsante, che resta l'unico blocco con aria doppia. */ #as-pdp-v2.as-pdp-sugo .buybox .price{margin-bottom:8px} #as-pdp-v2.as-pdp-sugo .buybox .price-note{margin:0 0 24px} #as-pdp-v2.as-pdp-sugo .buybox .sugo-season{margin:0 0 24px} #as-pdp-v2.as-pdp-sugo .buybox .selector{margin:0 0 24px} #as-pdp-v2.as-pdp-sugo .buybox .sugo-legal{margin:0 0 40px} #as-pdp-v2.as-pdp-sugo .buybox .buy-row{margin:0 0 40px} #as-pdp-v2.as-pdp-sugo .buybox .reassurance{margin:0 0 24px;gap:8px} #as-pdp-v2.as-pdp-sugo .buybox .availability{margin:0 0 8px} #as-pdp-v2.as-pdp-sugo .buybox .sugo-terms{margin:0 0 24px} #as-pdp-v2.as-pdp-sugo .buybox .sugo-points{margin-top:24px} /* 2 su 5: IL FILO VERTICALE A SINISTRA SI ROMPE. Sotto il pulsante, quattro righe con icona partivano da 18, 35, 36 e 43 px: il bordo sinistro del testo cambiava quattro volte in otto righe. Le icone vanno in una colonna di larghezza fissa, cosi' il testo parte sempre da li'. */ #as-pdp-v2.as-pdp-sugo .reassurance span{display:grid;grid-template-columns:22px 1fr;align-items:start;gap:10px} #as-pdp-v2.as-pdp-sugo .reassurance svg{width:18px;height:18px;margin:0;justify-self:center} /* 4 su 5: SEI O SETTE RAGGI DIVERSI, TRE FORME DI PULSANTE. Restano tre forme, ognuna con una ragione: 10 px per pulsanti e riquadri, 35 px per le pastiglie della quantita' (che sono pastiglie), 50% per i tondi. */ #as-pdp-v2.as-pdp-sugo{--r-card:10px} #as-pdp-v2.as-pdp-sugo .btn, #as-pdp-v2.as-pdp-sugo .btn--gold, #as-pdp-v2.as-pdp-sugo .product-card, #as-pdp-v2.as-pdp-sugo .sugo-card, #as-pdp-v2.as-pdp-sugo .gallery__thumb, #as-pdp-v2.as-pdp-sugo .gallery__main, #as-pdp-v2.as-pdp-sugo .sugo-legal{border-radius:10px} /* 4 su 5: DUE GRIGI INDISTINGUIBILI PER LO STESSO MESTIERE. #5A6B7D e #5F6E80 distano cinque unita': nessuno li separa, ma obbligano a scegliere ogni volta. Uno solo. */ #as-pdp-v2.as-pdp-sugo{--ras-text-muted:#5A6B7D} /* 4 su 5: UN GRADINO TIPOGRAFICO CHE NON LAVORA. Fra 18 e 17 px c'e' il 5,9 per cento: sotto la soglia in cui un passo si legge come passo. Il rango di lettura resta 17, quello sopra sale a 20 e diventa visibile. Corpi finali: 42 / 30 / 25,6 / 20 / 17 / 15 / 13 / 11,2. */ #as-pdp-v2.as-pdp-sugo .section__lede, #as-pdp-v2.as-pdp-sugo .sugo-quote{font-size:17px} #as-pdp-v2.as-pdp-sugo .faq__q, #as-pdp-v2.as-pdp-sugo .faq__trigger, #as-pdp-v2.as-pdp-sugo .sugo-card h3{font-size:20px} /* 3 su 5: LE MICRO ETICHETTE HANNO SEI CRENATURE DIVERSE a parita' di corpo, fra cui 1,5 e 1,568, che e' una distinzione che non esiste. Due valori soli: largo per gli occhielli di sezione, stretto per le etichette di dato. */ #as-pdp-v2.as-pdp-sugo .eyebrow, #as-pdp-v2.as-pdp-sugo .pdp-eyebrow{letter-spacing:5px} #as-pdp-v2.as-pdp-sugo .breadcrumb__list, #as-pdp-v2.as-pdp-sugo .selector__label, #as-pdp-v2.as-pdp-sugo .sugo-fact h3, #as-pdp-v2.as-pdp-sugo .sugo-nutri caption, #as-pdp-v2.as-pdp-sugo .product-card__kicker, #as-pdp-v2.as-pdp-sugo .pill__tag{letter-spacing:1.6px} /* 3 su 5: INTERLINEA NON TOKEN SUL CORPO 15 px, cinque valori di cui tre impilati dentro lo stesso riquadro. */ #as-pdp-v2.as-pdp-sugo .sugo-legal__den, #as-pdp-v2.as-pdp-sugo .sugo-legal__ing, #as-pdp-v2.as-pdp-sugo .sugo-legal__body p, #as-pdp-v2.as-pdp-sugo .reassurance span, #as-pdp-v2.as-pdp-sugo .availability, #as-pdp-v2.as-pdp-sugo .sugo-terms, #as-pdp-v2.as-pdp-sugo .note-tbc, #as-pdp-v2.as-pdp-sugo .sugo-qty-note{line-height:1.6} /* 3 su 5: LA BARRA FISSA NON STA SULLA COLONNA DELLA PAGINA (14 px contro 18) e dentro la barra il prezzo aveva lo stesso rango dell'etichetta del formato. */ #as-pdp-v2.as-pdp-sugo .sticky-cart{padding-inline:18px} #as-pdp-v2.as-pdp-sugo .sticky-cart__price{font-size:17px;font-family:var(--heading);color:var(--ras-gold-text)} #as-pdp-v2.as-pdp-sugo .sticky-cart__name{opacity:.75} /* 1 su 5 ma e' un difetto vero: LA FRECCIA DELLE DOMANDE NON CAMBIA MAI STATO. pdp.css fa ruotare .accordion__chevron solo dentro .accordion__trigger, ma le domande usano .faq__trigger: la regola non le prendeva e la freccia restava ferma sia a domanda aperta sia chiusa. */ #as-pdp-v2.as-pdp-sugo .faq__trigger[aria-expanded="true"] .accordion__chevron{transform:rotate(180deg)} /* Ultimi residui, presi per selettore misurato: - .pill__tag stava a 20 px di raggio, un quarto valore che non serviva: e' una pastiglia piccola, va sul raggio delle pastiglie; - .btn generico restava a 2 px, il rettangolo del tema; - .note-tbc teneva ancora l'interlinea 1,7 mentre gli altri 15 px stanno a 1,6. */ #as-pdp-v2.as-pdp-sugo .pill__tag{border-radius:35px} #as-pdp-v2.as-pdp-sugo .btn{border-radius:10px} #as-pdp-v2.as-pdp-sugo .note-tbc{line-height:1.6} /* Due residui che perdevano per specificita', non per mancanza di regola: .btn--gold porta il raggio da 2 px dentro pdp.css, e .note-tbc dentro un .sugo-fact perdeva contro la mia stessa regola .sugo-fact p, che ha un selettore di elemento in piu'. Presi con il selettore giusto. */ #as-pdp-v2.as-pdp-sugo .btn--gold{border-radius:10px} #as-pdp-v2.as-pdp-sugo .sugo-fact p.note-tbc{line-height:1.6} /* ========================================================================== Quarto giro, 18/08. I revisori confermano che il lavoro precedente ha tenuto (spaziature 8/24/40, fuoco su 24 comandi su 24, zero caratteri fuori marchio) e passano a rilievi piu' fini. Questi sono i convergenti. ========================================================================== */ /* IL PREZZO NON AVEVA UNA IDENTITA' SOLA. Lo stesso "6,50 EUR" usciva in Cinzel 42 tondo oro e, 190 px piu' sotto nella stessa schermata, in EB Garamond 17 corsivo blu. Peggio: il corsivo cambiava mestiere fra due moduli adiacenti, marcando la cifra SECONDARIA nel blocco prezzo (13,00 al kg) e quella PRINCIPALE nelle pastiglie (18,00). Lo stesso segnale diceva due cose opposte a 130 px di distanza. Un token solo: Cinzel tondo oro per ogni cifra principale, con la sola misura che cambia. Il corsivo di EB Garamond resta ai qualificatori di unita'. */ #as-pdp-v2.as-pdp-sugo .pill small, #as-pdp-v2.as-pdp-sugo .product-card__price, #as-pdp-v2.as-pdp-sugo .product-card__price .amount, #as-pdp-v2.as-pdp-sugo .sticky-cart__price{ font-family:var(--heading); font-style:normal; font-weight:500; color:var(--ras-gold-text); } /* i qualificatori, e solo loro, restano in corsivo */ #as-pdp-v2.as-pdp-sugo .price__perkg, #as-pdp-v2.as-pdp-sugo .sugo-pill__unit{font-style:italic} /* LA PASTIGLIA "DA QUI SCENDE" SFONDA ANCORA. Il giro scorso avevo misurato la scatola dell'elemento e scritto che stava "103 px dentro 113": sbagliato metro. Il revisore ha misurato il TESTO con un Range e la E finale cavalca il filetto di 1,2 px, sfondando anche il bordo della pastiglia sotto. E l'anello del fregio correva a 1 px da quello della pastiglia, cioe' due tratti quasi coincidenti che nessuno ha disegnato. Il fregio ora si dimensiona sul contenuto, resta dentro con margine, e perde il proprio contorno: il doppio filetto sparisce. */ #as-pdp-v2.as-pdp-sugo .pill__tag{ font-size:10px; letter-spacing:.6px; padding-inline:8px; max-width:calc(100% - 12px); width:max-content; overflow:visible; border:0; box-shadow:none; } /* IL BORDO DELLE PASTIGLIE E LO STATO SCELTO. Il contorno della non scelta stava a 2,12:1 contro i 3:1 che servono al bordo di un comando: al sole le tre pastiglie si fondono con lo sfondo. E lo stato scelto poggiava su un filetto da 1 px con un riempimento a 1,09:1, cioe' senza informazione. Ora il bordo passa a 3,66:1 e la scelta ha due segnali, non uno: filetto doppio e riempimento visibile. */ #as-pdp-v2.as-pdp-sugo .pill{border-color:#8C8577} #as-pdp-v2.as-pdp-sugo .pill.is-active{ border-color:#537492; border-width:2px; background:#E8DCCB; } /* LE PASTIGLIE FLOTTANTI COPRONO IL TESTO. Non e' una scusa del tema: la scheda se le e' gia' intestate spostandole in verticale, quindi le deve anche in orizzontale. Su 390 px la colonna di lettura sta fra 18 e 372 e le due pastiglie ci stanno dentro: coprivano le prime lettere a sinistra e le ultime a destra a 13 quote di scorrimento su 14. La pastiglia della lingua sparisce del tutto su questa scheda, e non e' una perdita: la versione inglese del sugo non esiste, quel comando porta a una home generica. Il biscotto dei cookie non si puo' togliere, ma si stringe e si accosta al bordo, fuori dalla colonna di lettura. */ body:has(#as-pdp-v2.as-pdp-sugo) .as-lang-switch{display:none!important} /* CORREZIONE 18/08, quinto giro, ed e' la terza volta che questo comando mi sfugge. Prima si sovrapponeva alla barra d'acquisto e l'ho alzato; alzandolo l'ho piantato dentro la colonna di lettura, dove copre il testo in 43 posizioni di scorrimento su 104 e in un punto intercetta anche il tocco. Va detto chiaro: a 390 px di schermo con 18 px di margine NON esiste una posizione fissa completamente fuori dalla colonna di lettura. Questa e' una mitigazione, non una cura: il comando si stringe, si accosta al bordo e resta in trasparenza finche' non lo si tocca, cosi' il testo sotto si legge. La cura vera e' del sito, non di questa scheda: un comando per le preferenze cookie nel piede, e la pastiglia flottante si toglie del tutto. */ body:has(#as-pdp-v2.as-pdp-sugo) #aes-cb-fab{ transform:scale(.62); transform-origin:left bottom; left:0; bottom:88px; opacity:.5; transition:opacity .2s; } body:has(#as-pdp-v2.as-pdp-sugo) #aes-cb-fab:hover, body:has(#as-pdp-v2.as-pdp-sugo) #aes-cb-fab:focus-within{opacity:1} /* ========================================================================== Quinto giro, 18/08. ========================================================================== */ /* REGRESSIONE MIA DEL GIRO SCORSO. Avevo dato alla pastiglia scelta un riempimento #E8DCCB come secondo segnale, senza rimisurare il testo che ci finisce sopra: l'oro #926837 su quel fondo da' 3,65:1, sotto AA, e cosi' l'opzione SCELTA era l'unico testo della pagina che non passava, proprio sul comando che porta i soldi. Scurire l'oro solo li' avrebbe reintrodotto il difetto opposto, cioe' un colore che cambia mestiere fra due stati dello stesso comando. Quindi il fondo torna al crema del marchio, dove l'oro passa a 4,54, e il secondo segnale resta il filetto doppio, che a 4,91:1 su bianco si vede benissimo. */ #as-pdp-v2.as-pdp-sugo .pill.is-active{background:#F8F5F0} /* e la riga del prezzo unitario non cambia piu' colore fra scelto e non scelto: stesso ruolo, stesso colore */ #as-pdp-v2.as-pdp-sugo .pill.is-active .sugo-pill__unit{color:var(--ras-text-muted)} /* I PULSANTI "SCOPRI" SONO GLI UNICI ANGOLI VIVI DELLA PAGINA. La correzione c'era gia' ma non arrivava a schermo: il tema dichiara border-radius 2px con !important, e una regola importante batte una normale a prescindere dalla specificita'. E' lo stesso inciampo di due giorni fa con la pastiglia della lingua: la regola scritta non e' la regola che vince. Anche il contorno saliva appena a 2,33:1, sotto i 3 che servono a un comando. */ #as-pdp-v2.as-pdp-sugo .btn--gold{border-radius:10px!important;border-color:#926837!important} /* DUE SEZIONI SU SETTE NON USAVANO I TOKEN DELLE ALTRE CINQUE: 18 px sotto il titolo invece di 20, e 32 e 46 px prima del blocco seguente invece di 48. Il 32 contro 48 e' un terzo di aria in meno, e si vede. */ #as-pdp-v2.as-pdp-sugo .sugo-kitchen__text .section__title, #as-pdp-v2.as-pdp-sugo .sugo-story__text .section__title{margin-bottom:20px} #as-pdp-v2.as-pdp-sugo .sugo-kitchen__text>.prose{margin-bottom:48px} #as-pdp-v2.as-pdp-sugo .sugo-story__text>.prose{margin-bottom:48px} /* IL PRIMO RANGO ERA IL PREZZO, NON IL PRODOTTO. 42 px il prezzo contro 30 il nome: su una scheda di alimentare il primo rango deve essere quello che si compra. E fra nome (30) e titoli di sezione (25,6) restava un rapporto di 1,17, sotto la soglia in cui un passo si legge come passo. Ora il nome e' il corpo piu' grande e i tre ranghi si distinguono: 36 / 30 / 25,6, cioe' rapporti 1,20 e 1,17 sul prezzo e 1,41 sulla sezione. */ @media (max-width:900px){ #as-pdp-v2.as-pdp-sugo .pdp-title{font-size:36px} #as-pdp-v2.as-pdp-sugo .price__amount{font-size:30px} } /* I TITOLETTI DELLA TRASPARENZA ESCONO ANCORA IN CINZEL. La riga di correzione c'era dal secondo giro, ma perde: il sito dichiara h3{font-family:Cinzel...!important} in un blocco di stile in linea, e una regola importante batte una normale a prescindere dalla specificita'. E' il terzo inciampo dello stesso tipo in due giorni: la regola scritta non e' la regola che vince. Qui serve la stessa forza. */ #as-pdp-v2.as-pdp-sugo .sugo-fact h3{font-family:'EB Garamond',Georgia,serif!important} /* IL FILO VERTICALE A SINISTRA, PER INTERO. Al terzo giro avevo scritto "ora parte da 50 px in tutte" ma avevo sistemato solo le tre righe con icona: la disponibilita' partiva ancora da 36, l'elenco puntato da 40 e il link alle condizioni da 18. Quattro ascisse diverse in 211 px, proprio sotto il pulsante d'acquisto. Ora tutto cio' che ha un segno a sinistra usa la stessa gabbia; a filo di colonna resta solo il link, che un segno non ce l'ha. */ #as-pdp-v2.as-pdp-sugo .buybox .availability{display:grid;grid-template-columns:22px 1fr;align-items:center;gap:10px;padding-left:0} #as-pdp-v2.as-pdp-sugo .buybox .availability .dot{justify-self:center;margin:0} /* il rientro e' RELATIVO all'elenco, che parte gia' a 18: 32 e non 50, altrimenti il testo finisce a 68. Misurato, non calcolato a mente. */ #as-pdp-v2.as-pdp-sugo .sugo-points li{padding-left:32px} #as-pdp-v2.as-pdp-sugo .sugo-points li::before{left:8px} /* ========================================================================== Settimo giro, 18/08. I rilievi si sono spostati fuori dalla scheda: sullo strato flottante e sulla cornice del tema. La scheda pero' governa gia' quello strato (ha nascosto la pastiglia della lingua e ridotto il biscotto), quindi se ne prende carico fino in fondo. ========================================================================== */ /* LA PASTIGLIA "TORNA SU" SI POSA SUL TESTO in 43 posizioni di scorrimento su 167, con sovrapposizioni fino a 33,4 px, e siccome e' bianca al 90% non copre: slava. Su questa scheda si nasconde. Non e' una perdita: la barra d'acquisto accompagna gia' tutta la pagina e da' il comando principale, e il "torna su" su una scheda prodotto e' una comodita', non una funzione. */ body:has(#as-pdp-v2.as-pdp-sugo) .scrollToTop{display:none!important} /* DUE FASCE VUOTE INCORNICIANO LA SCHEDA, 52 px sopra e 80 sotto, in un beige che in pagina non compare da nessun'altra parte: quattro quasi bianchi impilati, e quello piu' sporco e' l'unico che si incontra PRIMA del nome del prodotto. Erano anche asimmetriche, quindi non leggevano come cornice voluta. Lo strato era raggiungibile: la scheda ridefinisce gia' il fondo di .wd-content-area, questo e' quello subito sopra. */ body:has(#as-pdp-v2.as-pdp-sugo) .wd-page-content{background:#fff;padding-top:0} body:has(#as-pdp-v2.as-pdp-sugo) main{padding-top:0;padding-bottom:0} /* LE PROPORZIONI DELLA BARRA ERANO CONGELATE: la colonna informativa restava 85 px a qualunque larghezza, col nome del formato che riempiva la scatola al pixel e i puntini di sospensione gia' armati. Ora le due parti respirano insieme alla larghezza. */ #as-pdp-v2.as-pdp-sugo .sticky-cart__info{flex:1 1 auto;min-width:0} #as-pdp-v2.as-pdp-sugo .sticky-cart__cta{flex:0 0 auto;min-width:140px}