/* ============================================================================= Il Momento del Caffè — foglio di stile del tema ----------------------------------------------------------------------------- I token (colori, tipografia, spaziature) vivono in theme.json e arrivano qui come variabili --wp--preset--* e --wp--custom--*. Questo file contiene solo ciò che theme.json non sa esprimere: accessibilità, varianti di stile dei blocchi, navigazione mobile e l'impaginazione di WooCommerce. Indice 1. Ponte variabili per il plugin ilmomentodelcaffe-wc 2. Base e reset mirati 3. Accessibilità (skip link, focus, screen reader, target) 4. Varianti di stile dei blocchi 5. Header e navigazione 6. Footer 7. Contenuti e archivi 8. Moduli e campi 9. WooCommerce — listati e card prodotto 10. WooCommerce — scheda prodotto 11. WooCommerce — carrello, checkout, account 12. WooCommerce — avvisi 13. Preferenze utente (motion, contrasto forzato, stampa) ========================================================================== */ /* ============================================================================= 1. Ponte variabili per il plugin ilmomentodelcaffe-wc ----------------------------------------------------------------------------- Il plugin companion disegna badge di compatibilità, barra intensità e tabella specifiche usando variabili --color-* che definiva il vecchio tema classico. Dopo il passaggio a FSE nessuno le dichiarava più e il plugin ricadeva sui suoi fallback marroni, fuori palette. Le rimappiamo qui. ========================================================================== */ :root { --color-brand: var(--wp--preset--color--dark); --color-accent: var(--wp--preset--color--verde-scuro); --color-text: var(--wp--preset--color--dark); --color-text-muted: var(--wp--preset--color--dark-tenue); --color-border: var(--wp--preset--color--bordo); --color-bg-alt: var(--wp--preset--color--verde-tenue); } /* ============================================================================= 2. Base e reset mirati ========================================================================== */ html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } /* Lo scorrimento morbido è un vezzo: chi ha chiesto meno animazioni non lo vuole. */ @media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } /* Header sticky: lo scroll a un'ancora non deve finire sotto l'header. */ :target { scroll-margin-top: 6rem; } } body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } /* Il testo lungo non deve mai spezzare il layout su schermi stretti. */ p, li, dd, figcaption, .wp-block-post-excerpt__excerpt { overflow-wrap: break-word; } /* Titoli: evita le parole orfane spezzate a metà. */ h1, h2, h3, h4, h5, h6 { text-wrap: balance; overflow-wrap: break-word; } img, video { max-width: 100%; height: auto; } /* Le tabelle larghe scorrono da sole invece di sfondare il layout. */ .wp-block-table { overflow-x: auto; } .wp-block-table table { border-collapse: collapse; width: 100%; } .wp-block-table :where(th, td) { border: 1px solid var(--wp--preset--color--bordo); padding: 0.625rem 0.875rem; text-align: start; } .wp-block-table thead th { background-color: var(--wp--preset--color--verde-tenue); font-weight: 600; } /* Selezione testo: verde tenue, il testo resta leggibile. */ ::selection { background-color: var(--wp--preset--color--verde); color: var(--wp--preset--color--dark); } /* ============================================================================= 3. Accessibilità ========================================================================== */ /* --- Skip link (WCAG 2.4.1) ------------------------------------------------ Stampato da inc/accessibility.php come primo elemento del . Fuori schermo finché non riceve il focus, poi compare in alto a sinistra. */ .imdc-skip-link { position: absolute; top: 0; left: 0; z-index: 999999; display: block; padding: 0.875rem 1.5rem; background-color: var(--wp--preset--color--dark); color: var(--wp--preset--color--bianco); font-family: var(--wp--preset--font-family--poppins); font-size: var(--wp--preset--font-size--medium); font-weight: 600; text-decoration: none; border-radius: 0 0 var(--wp--custom--raggio--md) 0; transform: translateY(-101%); } .imdc-skip-link:focus { transform: translateY(0); outline: var(--wp--custom--focus--spessore) solid var(--wp--custom--focus--colore-su-scuro); outline-offset: -6px; color: var(--wp--preset--color--bianco); } @media (prefers-reduced-motion: no-preference) { .imdc-skip-link { transition: transform var(--wp--custom--transizione); } } /* --- Testo riservato agli screen reader ---------------------------------- */ .screen-reader-text { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } .screen-reader-text:focus { position: static !important; width: auto; height: auto; margin: 0; overflow: visible; clip-path: none; white-space: normal; } /* --- Indicatore di focus (WCAG 2.4.7 / 2.4.11) --------------------------- Un solo sistema per tutto il sito: contorno spesso, staccato dall'elemento, sempre visibile sopra qualunque fondo. Usiamo :focus-visible così il ring non compare al clic del mouse, ma :focus resta come rete per i browser che non lo supportano. */ :where(a, button, input, select, textarea, summary, [tabindex]:not([tabindex="-1"]), .wp-block-navigation-item__content):focus-visible { outline: var(--wp--custom--focus--spessore) solid var(--wp--custom--focus--colore); outline-offset: var(--wp--custom--focus--offset); } /* Su fondi scuri o verde pieno il ring verde scuro sparirebbe: si inverte. */ :where( .has-dark-background-color, .has-verde-scuro-background-color, .imdc-fondo-scuro ) :where(a, button, input, select, textarea, summary, [tabindex]:not([tabindex="-1"])):focus-visible { outline-color: var(--wp--custom--focus--colore-su-scuro); } /* Sul verde brand il lime non stacca: torna lo scuro. */ :where(.has-verde-background-color) :where(a, button, input, select, textarea, summary, [tabindex]:not([tabindex="-1"])):focus-visible { outline-color: var(--wp--preset--color--dark); } /* --- Dimensione minima dei bersagli (WCAG 2.5.8) -------------------------- 24×24 CSS px è il minimo di legge; 44 è la soglia comoda su touch. Si usa min-height + allineamento, non height fissa, così il testo può crescere senza tagliarsi (WCAG 1.4.12). */ :where( .wp-block-button__link, .wp-block-navigation-item__content, .wp-block-navigation__responsive-container-open, .wp-block-navigation__responsive-container-close, .wp-block-search__button, .wp-block-query-pagination-numbers a, .wp-block-query-pagination > a ) { display: inline-flex; align-items: center; justify-content: center; min-height: var(--wp--custom--target--min); min-width: var(--wp--custom--target--min); } /* I link inline nel testo restano link inline: la regola sopra non li tocca. */ /* --- Elenchi senza pallino: mantieni la semantica di lista in VoiceOver --- Safari toglie il ruolo "list" quando list-style è none. Il pseudo-elemento vuoto lo ripristina. */ :where(ul, ol)[style*="list-style: none"] > li::before, .wp-block-navigation__container > li::before, .wp-block-social-links > li::before { content: ""; } /* ============================================================================= 4. Varianti di stile dei blocchi ----------------------------------------------------------------------------- Registrate in inc/block-styles.php. Linguaggio flat: bordi netti al posto delle ombre, colore pieno al posto dei gradienti. ========================================================================== */ /* --- Fascia: ritmo verticale di una sezione ------------------------------ Da abbinare all'allineamento "Larghezza piena" perché il fondo arrivi ai bordi del viewport. */ .wp-block-group.is-style-fascia { padding-block: var(--wp--preset--spacing--70); } /* --- Card flat ------------------------------------------------------------ */ .wp-block-group.is-style-card, .wp-block-group.is-style-card-interattiva { padding: var(--wp--preset--spacing--40); background-color: var(--wp--preset--color--bianco); border: var(--wp--custom--bordo--sottile) solid var(--wp--preset--color--bordo); border-radius: var(--wp--custom--raggio--lg); } .wp-block-group.is-style-card-interattiva { position: relative; } .wp-block-group.is-style-card-interattiva:hover { border-color: var(--wp--preset--color--verde); } /* Il focus su un link interno illumina tutta la card: chi naviga da tastiera vede il bersaglio, non solo il testo del link. */ .wp-block-group.is-style-card-interattiva:focus-within { border-color: var(--wp--preset--color--verde-scuro); outline: var(--wp--custom--focus--spessore) solid var(--wp--custom--focus--colore); outline-offset: var(--wp--custom--focus--offset); } @media (prefers-reduced-motion: no-preference) { .wp-block-group.is-style-card-interattiva { transition: border-color var(--wp--custom--transizione); } } /* --- Filetto verde in alto ----------------------------------------------- */ .wp-block-group.is-style-filetto-alto { border-top: 4px solid var(--wp--preset--color--verde); padding-top: var(--wp--preset--spacing--40); } /* --- Colonne con divisori ------------------------------------------------- */ .wp-block-columns.is-style-griglia-divisa > .wp-block-column + .wp-block-column { border-left: var(--wp--custom--bordo--sottile) solid var(--wp--preset--color--bordo); padding-left: var(--wp--preset--spacing--40); } /* Impilate, il divisore passa da verticale a orizzontale. */ @media (max-width: 781px) { .wp-block-columns.is-style-griglia-divisa > .wp-block-column + .wp-block-column { border-left: 0; border-top: var(--wp--custom--bordo--sottile) solid var(--wp--preset--color--bordo); padding-left: 0; padding-top: var(--wp--preset--spacing--40); } } /* --- Immagine con angoli -------------------------------------------------- */ .wp-block-image.is-style-angoli img { border-radius: var(--wp--custom--raggio--lg); } /* --- Bottone a contorno --------------------------------------------------- */ .wp-block-button.is-style-contorno > .wp-block-button__link { background-color: transparent; color: var(--wp--preset--color--verde-scuro); border-color: currentColor; } .wp-block-button.is-style-contorno > .wp-block-button__link:hover, .wp-block-button.is-style-contorno > .wp-block-button__link:focus { background-color: var(--wp--preset--color--dark); color: var(--wp--preset--color--bianco); border-color: var(--wp--preset--color--dark); } /* Su fondo scuro il contorno diventa chiaro. */ :where(.has-dark-background-color, .imdc-fondo-scuro) .wp-block-button.is-style-contorno > .wp-block-button__link { color: var(--wp--preset--color--bianco); } :where(.has-dark-background-color, .imdc-fondo-scuro) .wp-block-button.is-style-contorno > .wp-block-button__link:hover, :where(.has-dark-background-color, .imdc-fondo-scuro) .wp-block-button.is-style-contorno > .wp-block-button__link:focus { background-color: var(--wp--preset--color--bianco); color: var(--wp--preset--color--dark); border-color: var(--wp--preset--color--bianco); } /* --- Bottone sobrio ------------------------------------------------------- Sembra un link, ma conserva l'area cliccabile da 44px. */ .wp-block-button.is-style-sobrio > .wp-block-button__link { background-color: transparent; color: var(--wp--preset--color--verde-scuro); border-color: transparent; text-decoration: underline; text-underline-offset: 0.25em; padding-inline: 0.5rem; } .wp-block-button.is-style-sobrio > .wp-block-button__link:hover, .wp-block-button.is-style-sobrio > .wp-block-button__link:focus { background-color: transparent; color: var(--wp--preset--color--dark); border-color: transparent; } /* --- Elenco con spunte ---------------------------------------------------- */ /* Senza il prefisso .wp-block-list: quella classe la aggiunge WordPress solo dalla 6.6, e il tema dichiara compatibilità dalla 6.5. */ .is-style-spunte { list-style: none; padding-left: 0; } .is-style-spunte > li { position: relative; padding-left: 2rem; margin-bottom: 0.75rem; } /* La spunta è decorativa: sta in un pseudo-elemento, non nel testo, così lo screen reader non legge un simbolo a ogni riga. */ .is-style-spunte > li::before { content: ""; position: absolute; left: 0; top: 0.45em; width: 1rem; height: 0.5rem; border-left: 2.5px solid var(--wp--preset--color--verde-scuro); border-bottom: 2.5px solid var(--wp--preset--color--verde-scuro); transform: rotate(-45deg); } :where(.has-dark-background-color, .imdc-fondo-scuro) .is-style-spunte > li::before { border-color: var(--wp--preset--color--verde-lime); } /* --- Occhiello ------------------------------------------------------------ */ .is-style-occhiello { font-size: var(--wp--preset--font-size--small); font-weight: 600; text-transform: uppercase; letter-spacing: 0.12em; color: var(--wp--preset--color--verde-scuro); margin-bottom: 0.5rem; } :where(.has-dark-background-color, .imdc-fondo-scuro) .is-style-occhiello { color: var(--wp--preset--color--verde-lime); } /* --- Paragrafo introduttivo ---------------------------------------------- Niente prefisso .wp-block-paragraph: il blocco Paragrafo dichiara "className": false, quindi quella classe non viene mai stampata. */ .is-style-introduzione { font-size: var(--wp--preset--font-size--large); line-height: 1.55; color: var(--wp--preset--color--dark-tenue); max-width: 52ch; } :where(.has-dark-background-color, .imdc-fondo-scuro) .is-style-introduzione { color: var(--wp--preset--color--bianco); } /* --- Separatore spesso ---------------------------------------------------- */ .wp-block-separator.is-style-spesso { border: 0; height: 3px; background-color: var(--wp--preset--color--verde); max-width: 4rem; margin-inline: 0; opacity: 1; } /* ============================================================================= 5. Header e navigazione ========================================================================== */ /* Il wrapper del template part è figlio diretto di .wp-site-blocks: occupa già tutta la larghezza del viewport. Il gutter lo mettono i gruppi "constrained" al suo interno, tramite has-global-padding. */ /* Si attacca in alto solo la riga con logo e menu: la barra di servizio scorre via, così sul telefono lo sticky costa 64px e non 100. */ .imdc-header-riga { position: sticky; top: 0; z-index: 100; background-color: var(--wp--preset--color--bianco); border-bottom: var(--wp--custom--bordo--sottile) solid var(--wp--preset--color--bordo); } /* Con il menu mobile aperto l'header non deve galleggiare sopra l'overlay. */ .imdc-header-riga:has(.is-menu-open) { position: static; } .imdc-header .wp-block-site-logo img { max-height: 56px; width: auto; } /* --- Voci di menu --------------------------------------------------------- */ .wp-block-navigation .wp-block-navigation-item__content { padding-inline: 0.75rem; border-radius: var(--wp--custom--raggio--sm); text-decoration: none; } /* La pagina corrente si distingue anche senza affidarsi al solo colore: c'è un filetto sotto la voce (WCAG 1.4.1, Use of Color). */ .wp-block-navigation .wp-block-navigation-item.current-menu-item > .wp-block-navigation-item__content, .wp-block-navigation .wp-block-navigation-item[aria-current="page"] > .wp-block-navigation-item__content, .wp-block-navigation .wp-block-navigation-item__content[aria-current="page"] { color: var(--wp--preset--color--verde-scuro); font-weight: 600; box-shadow: inset 0 -3px 0 0 var(--wp--preset--color--verde); } .wp-block-navigation .wp-block-navigation-item__content:hover { color: var(--wp--preset--color--verde-scuro); } /* --- Sottomenu flat ------------------------------------------------------- */ .wp-block-navigation .wp-block-navigation__submenu-container { background-color: var(--wp--preset--color--bianco); border: var(--wp--custom--bordo--sottile) solid var(--wp--preset--color--bordo); border-radius: var(--wp--custom--raggio--md); padding-block: 0.375rem; box-shadow: var(--wp--preset--shadow--sollevata); } .wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content { padding-block: 0.625rem; min-height: var(--wp--custom--target--min); } /* --- Overlay mobile ------------------------------------------------------- */ .wp-block-navigation__responsive-container.is-menu-open { background-color: var(--wp--preset--color--bianco); padding: var(--wp--preset--spacing--40) var(--wp--custom--contenitore--padding-inline); } .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content { padding-top: var(--wp--preset--spacing--50); } .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content { font-size: var(--wp--preset--font-size--large); padding-block: 0.625rem; padding-inline: 0; width: 100%; } .wp-block-navigation__responsive-container-open, .wp-block-navigation__responsive-container-close { color: var(--wp--preset--color--dark); border-radius: var(--wp--custom--raggio--sm); } /* --- Riga di servizio sopra l'header ------------------------------------- */ .imdc-barra-servizio { background-color: var(--wp--preset--color--dark); color: var(--wp--preset--color--bianco); font-size: var(--wp--preset--font-size--small); } .imdc-barra-servizio a { color: var(--wp--preset--color--bianco); } /* --- Icona carrello nell'header ------------------------------------------ */ .imdc-header .wc-block-mini-cart__button { min-height: var(--wp--custom--target--min); min-width: var(--wp--custom--target--min); border-radius: var(--wp--custom--raggio--sm); padding: 0.5rem; color: var(--wp--preset--color--dark); } .imdc-header .wc-block-mini-cart__badge { background-color: var(--wp--preset--color--verde-scuro); color: var(--wp--preset--color--bianco); font-weight: 600; } /* ============================================================================= 6. Footer ========================================================================== */ .imdc-footer { background-color: var(--wp--preset--color--dark); color: var(--wp--preset--color--bianco); } .imdc-footer :where(h1, h2, h3, h4, h5, h6) { color: var(--wp--preset--color--bianco); } .imdc-footer a { color: var(--wp--preset--color--bianco); text-decoration: none; } .imdc-footer a:hover, .imdc-footer a:focus { color: var(--wp--preset--color--verde-lime); text-decoration: underline; } .imdc-footer .wp-block-heading { font-size: var(--wp--preset--font-size--small); text-transform: uppercase; letter-spacing: 0.1em; color: var(--wp--preset--color--verde-lime); } .imdc-footer .wp-block-social-links .wp-social-link { background-color: transparent; color: var(--wp--preset--color--bianco); } .imdc-footer-legale { border-top: 1px solid rgba(255, 255, 255, 0.16); font-size: var(--wp--preset--font-size--small); color: rgba(255, 255, 255, 0.78); } /* Il blocco Shortcode del copyright: wpautop lo avvolge in un

che eredita i margini di default. */ .imdc-footer-legale .wp-block-shortcode p, .imdc-footer-legale .wp-block-shortcode { margin: 0; font-size: var(--wp--preset--font-size--small); } /* Colonne di link del footer: elenco senza pallini, bersagli comodi. */ .imdc-lista-link { list-style: none; margin: 0; padding: 0; } .imdc-lista-link li { margin: 0; } .imdc-lista-link li::before { content: ""; } .imdc-lista-link a { display: inline-flex; align-items: center; min-height: 2.25rem; } /* ============================================================================= 7. Contenuti e archivi ========================================================================== */ /* Le immagini in evidenza degli archivi hanno tutte lo stesso rapporto: la griglia resta allineata anche con foto caricate storte. */ .wp-block-post-featured-image img { border-radius: var(--wp--custom--raggio--md); } .wp-block-post-template { gap: var(--wp--preset--spacing--50); } /* --- Paginazione ---------------------------------------------------------- */ .wp-block-query-pagination { margin-top: var(--wp--preset--spacing--60); gap: 0.375rem; } .wp-block-query-pagination :where(a, .current) { padding: 0.5rem 0.875rem; border: var(--wp--custom--bordo--sottile) solid var(--wp--preset--color--bordo); border-radius: var(--wp--custom--raggio--sm); text-decoration: none; color: var(--wp--preset--color--dark); } .wp-block-query-pagination a:hover { border-color: var(--wp--preset--color--verde-scuro); color: var(--wp--preset--color--verde-scuro); } .wp-block-query-pagination-numbers .current { background-color: var(--wp--preset--color--dark); border-color: var(--wp--preset--color--dark); color: var(--wp--preset--color--bianco); font-weight: 600; } /* --- Blocco ricerca ------------------------------------------------------- */ .wp-block-search__input { border: var(--wp--custom--bordo--sottile) solid var(--wp--preset--color--bordo-forte); border-radius: var(--wp--custom--raggio--md); padding: 0.6875rem 0.875rem; min-height: var(--wp--custom--target--min); background-color: var(--wp--preset--color--bianco); color: var(--wp--preset--color--dark); } .wp-block-search__label { font-weight: 600; margin-bottom: 0.375rem; display: block; } .wp-block-search__button { border-radius: var(--wp--custom--raggio--md); background-color: var(--wp--preset--color--verde-scuro); color: var(--wp--preset--color--bianco); border: 0; padding-inline: 1.25rem; font-weight: 600; } .wp-block-search__button:hover, .wp-block-search__button:focus { background-color: var(--wp--preset--color--dark); } /* --- Commenti ------------------------------------------------------------- */ .wp-block-comment-template li { padding: var(--wp--preset--spacing--40); border: var(--wp--custom--bordo--sottile) solid var(--wp--preset--color--bordo); border-radius: var(--wp--custom--raggio--lg); background-color: var(--wp--preset--color--bianco); margin-bottom: var(--wp--preset--spacing--30); } /* ============================================================================= 8. Moduli e campi ----------------------------------------------------------------------------- Un solo aspetto per tutti i campi del sito: quelli dei blocchi core, quelli di WooCommerce classico e quelli dei blocchi Carrello/Checkout. Il bordo usa "bordo-forte" (#82827C, 3.87:1 su bianco) perché il contorno di un controllo è informazione, non decorazione — WCAG 1.4.11. ========================================================================== */ :where( input[type="text"], input[type="email"], input[type="url"], input[type="password"], input[type="search"], input[type="number"], input[type="tel"], input[type="date"], select, textarea ) { width: 100%; min-height: var(--wp--custom--target--min); padding: 0.6875rem 0.875rem; font-family: inherit; font-size: var(--wp--preset--font-size--medium); line-height: 1.4; color: var(--wp--preset--color--dark); background-color: var(--wp--preset--color--bianco); border: var(--wp--custom--bordo--sottile) solid var(--wp--preset--color--bordo-forte); border-radius: var(--wp--custom--raggio--md); } :where(input, select, textarea)::placeholder { color: var(--wp--preset--color--dark-tenue); opacity: 1; } :where(input, select, textarea):focus { border-color: var(--wp--preset--color--verde-scuro); } textarea { min-height: 8rem; resize: vertical; } label { display: inline-block; font-weight: 500; margin-bottom: 0.375rem; } /* L'asterisco dei campi obbligatori è decorativo: il valore semantico sta nell'attributo required, non nel simbolo. */ .required, .wc-block-components-label__required { color: var(--wp--custom--stato--errore); } /* Checkbox e radio: bersaglio comodo senza deformare il controllo. */ :where(input[type="checkbox"], input[type="radio"]) { width: 1.25rem; height: 1.25rem; min-height: 0; accent-color: var(--wp--preset--color--verde-scuro); flex-shrink: 0; } :where(input[type="checkbox"], input[type="radio"]) + label { display: inline-flex; align-items: center; min-height: var(--wp--custom--target--min); margin-bottom: 0; padding-left: 0.5rem; font-weight: 400; } /* Campo in errore: bordo rosso E messaggio testuale, mai solo il colore. */ :where(input, select, textarea)[aria-invalid="true"], .woocommerce-invalid :where(input, select, textarea) { border-color: var(--wp--custom--stato--errore); border-width: var(--wp--custom--bordo--spesso); } /* --- Segno grafico dell'hero --------------------------------------------- Anello aperto che riprende il marchio. È decorazione: nel markup porta aria-hidden, qui gli diamo solo una misura sensata. */ .imdc-marchio-decorativo { display: flex; justify-content: center; } .imdc-marchio-decorativo svg { width: 100%; max-width: 340px; height: auto; } /* Su schermi stretti il segno ruba spazio al titolo senza aggiungere nulla. */ @media (max-width: 781px) { .imdc-marchio-decorativo { display: none; } } /* ============================================================================= 9. WooCommerce — listati e card prodotto ----------------------------------------------------------------------------- Coperti sia i blocchi (Product Collection / Product Template) sia il listato classico, perché convivono: la home usa i blocchi, alcune pagine legacy e i correlati usano ancora ul.products. ========================================================================== */ /* --- Contenitore card ----------------------------------------------------- */ .wc-block-product-template__responsive .wc-block-product, .wp-block-woocommerce-product-template .wc-block-product, .woocommerce ul.products li.product { display: flex; flex-direction: column; gap: 0.625rem; padding: var(--wp--preset--spacing--30); background-color: var(--wp--preset--color--bianco); border: var(--wp--custom--bordo--sottile) solid var(--wp--preset--color--bordo); border-radius: var(--wp--custom--raggio--lg); text-align: start; list-style: none; } .wc-block-product:hover, .woocommerce ul.products li.product:hover { border-color: var(--wp--preset--color--verde); } .wc-block-product:focus-within, .woocommerce ul.products li.product:focus-within { border-color: var(--wp--preset--color--verde-scuro); } @media (prefers-reduced-motion: no-preference) { .wc-block-product, .woocommerce ul.products li.product { transition: border-color var(--wp--custom--transizione); } } /* --- Immagine ------------------------------------------------------------- */ .wc-block-product .wc-block-components-product-image img, .woocommerce ul.products li.product img { border-radius: var(--wp--custom--raggio--md); aspect-ratio: 1 / 1; object-fit: cover; width: 100%; } /* --- Titolo --------------------------------------------------------------- */ .wc-block-components-product-title, .woocommerce ul.products li.product .woocommerce-loop-product__title { font-size: var(--wp--preset--font-size--medium); font-weight: 600; line-height: 1.3; margin: 0; padding: 0; } .wc-block-components-product-title a, .woocommerce ul.products li.product a.woocommerce-LoopProduct-link { color: var(--wp--preset--color--dark); text-decoration: none; } .wc-block-components-product-title a:hover, .woocommerce ul.products li.product a.woocommerce-LoopProduct-link:hover { color: var(--wp--preset--color--verde-scuro); text-decoration: underline; } /* --- Prezzo --------------------------------------------------------------- */ .wc-block-components-product-price, .woocommerce .price, .woocommerce ul.products li.product .price { font-size: var(--wp--preset--font-size--large); font-weight: 700; color: var(--wp--preset--color--dark); margin: 0; } /* Prezzo barrato: il barrato da solo non basta a schermo letto, ma WooCommerce lo accompagna già con testo "Il prezzo originale era". */ .wc-block-components-product-price del, .woocommerce .price del { font-size: var(--wp--preset--font-size--small); font-weight: 400; color: var(--wp--preset--color--dark-tenue); margin-right: 0.375rem; opacity: 1; } .wc-block-components-product-price ins, .woocommerce .price ins { text-decoration: none; color: var(--wp--custom--stato--errore); } /* --- Badge saldo ---------------------------------------------------------- */ .wc-block-components-product-sale-badge, .woocommerce span.onsale { display: inline-block; background-color: var(--wp--custom--stato--errore); color: var(--wp--preset--color--bianco); font-size: var(--wp--preset--font-size--x-small); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; padding: 0.25rem 0.625rem; border-radius: var(--wp--custom--raggio--pill); min-height: 0; line-height: 1.5; } /* --- Valutazione a stelle ------------------------------------------------- */ .wc-block-components-product-rating, .woocommerce .star-rating { color: var(--wp--preset--color--verde-scuro); font-size: var(--wp--preset--font-size--small); } /* --- Bottone della card --------------------------------------------------- */ .wc-block-components-product-button .wp-block-button__link, .woocommerce ul.products li.product .button { width: 100%; margin-top: auto; justify-content: center; border-radius: var(--wp--custom--raggio--md); background-color: var(--wp--preset--color--verde-scuro); border: var(--wp--custom--bordo--spesso) solid var(--wp--preset--color--verde-scuro); color: var(--wp--preset--color--bianco); font-weight: 600; min-height: var(--wp--custom--target--min); display: inline-flex; align-items: center; } .wc-block-components-product-button .wp-block-button__link:hover, .woocommerce ul.products li.product .button:hover { background-color: var(--wp--preset--color--dark); border-color: var(--wp--preset--color--dark); color: var(--wp--preset--color--bianco); } /* --- Griglia del listato classico ---------------------------------------- */ .woocommerce ul.products { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); gap: var(--wp--preset--spacing--40); margin: 0; padding: 0; list-style: none; } .woocommerce ul.products::before, .woocommerce ul.products::after { content: none; } .woocommerce ul.products li.product { width: auto !important; margin: 0 !important; float: none !important; } /* --- Card categoria (shortcode [product_categories]) --------------------- */ .woocommerce ul.products li.product-category { text-align: center; background-color: var(--wp--preset--color--verde-tenue); border-color: transparent; } .woocommerce ul.products li.product-category:hover { border-color: var(--wp--preset--color--verde); } .woocommerce ul.products li.product-category > a { display: flex; flex-direction: column; gap: 0.625rem; text-decoration: none; color: inherit; } .woocommerce ul.products li.product-category h2 { font-size: var(--wp--preset--font-size--large); font-weight: 600; margin: 0; color: var(--wp--preset--color--dark); } /* Il conteggio prodotti è un dettaglio, non un titolo. */ .woocommerce ul.products li.product-category mark.count { background: transparent; color: var(--wp--preset--color--dark-tenue); font-size: var(--wp--preset--font-size--small); font-weight: 400; } /* --- Testata dell'archivio negozio --------------------------------------- Il blocco Classic Template stampa qui il titolo della pagina Negozio: niente fascia a tutta larghezza (il titolo vive dentro

), ma un filetto verde che lo lega al resto del linguaggio visivo. */ .woocommerce-products-header { border-top: 4px solid var(--wp--preset--color--verde); padding-top: var(--wp--preset--spacing--40); margin-bottom: var(--wp--preset--spacing--50); } .woocommerce-products-header__title { font-size: var(--wp--preset--font-size--xx-large); font-weight: 700; letter-spacing: -0.02em; margin: 0 0 0.5rem; } .woocommerce-products-header .term-description { color: var(--wp--preset--color--dark-tenue); max-width: 60ch; } /* --- Barra di ordinamento e conteggio risultati -------------------------- */ .woocommerce .woocommerce-ordering, .woocommerce .woocommerce-result-count { margin-bottom: var(--wp--preset--spacing--40); } .woocommerce .woocommerce-result-count { color: var(--wp--preset--color--dark-tenue); font-size: var(--wp--preset--font-size--small); } .woocommerce .woocommerce-ordering select { width: auto; min-width: 14rem; } /* ============================================================================= 10. WooCommerce — scheda prodotto ========================================================================== */ .woocommerce div.product .product_title { font-size: var(--wp--preset--font-size--xx-large); font-weight: 700; line-height: 1.15; letter-spacing: -0.02em; } .woocommerce div.product p.price, .woocommerce div.product span.price { font-size: var(--wp--preset--font-size--x-large); font-weight: 700; color: var(--wp--preset--color--dark); } .woocommerce div.product .woocommerce-product-details__short-description { color: var(--wp--preset--color--dark-tenue); font-size: var(--wp--preset--font-size--large); line-height: 1.55; } /* --- Galleria ------------------------------------------------------------- */ .woocommerce div.product div.images img { border-radius: var(--wp--custom--raggio--lg); } .woocommerce div.product div.images .flex-control-thumbs li img { border-radius: var(--wp--custom--raggio--sm); border: var(--wp--custom--bordo--spesso) solid transparent; opacity: 1; } .woocommerce div.product div.images .flex-control-thumbs li img.flex-active { border-color: var(--wp--preset--color--verde-scuro); } /* --- Quantità ------------------------------------------------------------- */ .woocommerce .quantity input.qty { width: 5rem; text-align: center; min-height: var(--wp--custom--target--min); } .woocommerce div.product form.cart { display: flex; flex-wrap: wrap; align-items: center; gap: var(--wp--preset--spacing--30); margin-block: var(--wp--preset--spacing--40); } .woocommerce div.product form.cart .button { min-height: var(--wp--custom--target--min); padding-inline: var(--wp--preset--spacing--50); background-color: var(--wp--preset--color--verde-scuro); border: var(--wp--custom--bordo--spesso) solid var(--wp--preset--color--verde-scuro); border-radius: var(--wp--custom--raggio--md); color: var(--wp--preset--color--bianco); font-weight: 600; font-size: var(--wp--preset--font-size--medium); } .woocommerce div.product form.cart .button:hover, .woocommerce div.product form.cart .button:focus { background-color: var(--wp--preset--color--dark); border-color: var(--wp--preset--color--dark); } /* --- Varianti ------------------------------------------------------------- */ .woocommerce div.product form.cart .variations { width: 100%; border: 0; } .woocommerce div.product form.cart .variations th, .woocommerce div.product form.cart .variations td { border: 0; padding: 0.375rem 0; text-align: start; } .woocommerce div.product form.cart .variations label { font-weight: 600; margin: 0; } /* --- Meta prodotto -------------------------------------------------------- */ .woocommerce div.product .product_meta { font-size: var(--wp--preset--font-size--small); color: var(--wp--preset--color--dark-tenue); padding-top: var(--wp--preset--spacing--30); border-top: var(--wp--custom--bordo--sottile) solid var(--wp--preset--color--bordo); } /* --- Schede descrizione / recensioni ------------------------------------- */ .woocommerce div.product .woocommerce-tabs ul.tabs { display: flex; flex-wrap: wrap; gap: 0.25rem; margin: 0 0 var(--wp--preset--spacing--40); padding: 0; border-bottom: var(--wp--custom--bordo--sottile) solid var(--wp--preset--color--bordo); } .woocommerce div.product .woocommerce-tabs ul.tabs::before, .woocommerce div.product .woocommerce-tabs ul.tabs li::before, .woocommerce div.product .woocommerce-tabs ul.tabs li::after { content: none; border: 0; box-shadow: none; } .woocommerce div.product .woocommerce-tabs ul.tabs li { background: transparent; border: 0; border-radius: 0; margin: 0; padding: 0; } .woocommerce div.product .woocommerce-tabs ul.tabs li a { display: inline-flex; align-items: center; min-height: var(--wp--custom--target--min); padding: 0 1rem; font-weight: 600; color: var(--wp--preset--color--dark-tenue); text-decoration: none; border-bottom: 3px solid transparent; } .woocommerce div.product .woocommerce-tabs ul.tabs li.active a { color: var(--wp--preset--color--dark); border-bottom-color: var(--wp--preset--color--verde); } /* --- Correlati / upsell --------------------------------------------------- */ .woocommerce .related > h2, .woocommerce .upsells > h2, .woocommerce .cross-sells > h2 { font-size: var(--wp--preset--font-size--x-large); margin-bottom: var(--wp--preset--spacing--40); } /* ============================================================================= 11. WooCommerce — carrello, checkout, account ----------------------------------------------------------------------------- Il markup lo genera WooCommerce (blocchi Carrello/Checkout e template classici dell'area account): qui si allinea solo l'aspetto. ========================================================================== */ /* --- Riquadro riepilogo --------------------------------------------------- */ .wc-block-components-sidebar .wc-block-components-totals-wrapper, .woocommerce-cart .cart_totals, .woocommerce-checkout .woocommerce-checkout-review-order { background-color: var(--wp--preset--color--bianco); border: var(--wp--custom--bordo--sottile) solid var(--wp--preset--color--bordo); border-radius: var(--wp--custom--raggio--lg); padding: var(--wp--preset--spacing--40); } .wc-block-components-totals-item__value, .order-total .amount { font-weight: 700; } /* --- Bottoni principali del flusso d'acquisto ---------------------------- */ .wc-block-cart__submit-button, .wc-block-components-checkout-place-order-button, .woocommerce .checkout-button, .woocommerce #place_order { width: 100%; min-height: 3.25rem; background-color: var(--wp--preset--color--verde-scuro); border: var(--wp--custom--bordo--spesso) solid var(--wp--preset--color--verde-scuro); border-radius: var(--wp--custom--raggio--md); color: var(--wp--preset--color--bianco); font-size: var(--wp--preset--font-size--medium); font-weight: 600; } .wc-block-cart__submit-button:hover, .wc-block-components-checkout-place-order-button:hover, .woocommerce .checkout-button:hover, .woocommerce #place_order:hover { background-color: var(--wp--preset--color--dark); border-color: var(--wp--preset--color--dark); } /* --- Tabella carrello classica ------------------------------------------- */ .woocommerce table.shop_table { border: var(--wp--custom--bordo--sottile) solid var(--wp--preset--color--bordo); border-radius: var(--wp--custom--raggio--lg); border-collapse: separate; border-spacing: 0; overflow: hidden; } .woocommerce table.shop_table th, .woocommerce table.shop_table td { border-color: var(--wp--preset--color--bordo); padding: 0.875rem 1rem; } .woocommerce table.shop_table thead th { background-color: var(--wp--preset--color--verde-tenue); font-weight: 600; } /* --- Passi del checkout a blocchi ---------------------------------------- */ .wc-block-components-checkout-step__title { font-size: var(--wp--preset--font-size--large); font-weight: 600; } .wc-block-components-checkout-step { border-bottom: var(--wp--custom--bordo--sottile) solid var(--wp--preset--color--bordo); padding-bottom: var(--wp--preset--spacing--40); margin-bottom: var(--wp--preset--spacing--40); } /* --- Area account --------------------------------------------------------- */ .woocommerce-account .woocommerce-MyAccount-navigation ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.25rem; } .woocommerce-account .woocommerce-MyAccount-navigation li a { display: flex; align-items: center; min-height: var(--wp--custom--target--min); padding: 0.5rem 0.875rem; border-radius: var(--wp--custom--raggio--md); border-left: 3px solid transparent; color: var(--wp--preset--color--dark); text-decoration: none; } .woocommerce-account .woocommerce-MyAccount-navigation li a:hover { background-color: var(--wp--preset--color--fondo); } .woocommerce-account .woocommerce-MyAccount-navigation li.is-active a { background-color: var(--wp--preset--color--verde-tenue); border-left-color: var(--wp--preset--color--verde); font-weight: 600; } /* ============================================================================= 12. WooCommerce — avvisi ----------------------------------------------------------------------------- Ogni stato si distingue per colore, bordo E icona/testo: mai per il solo colore (WCAG 1.4.1). ========================================================================== */ .woocommerce-message, .woocommerce-error, .woocommerce-info, .wc-block-components-notice-banner { border-radius: var(--wp--custom--raggio--md); border-width: 1px; border-style: solid; border-left-width: 4px; padding: 1rem 1.125rem; margin-bottom: var(--wp--preset--spacing--40); font-size: var(--wp--preset--font-size--medium); list-style: none; } .woocommerce-message, .wc-block-components-notice-banner.is-success { background-color: var(--wp--custom--stato--successo-fondo); border-color: var(--wp--custom--stato--successo); color: var(--wp--custom--stato--successo); } .woocommerce-error, .wc-block-components-notice-banner.is-error { background-color: var(--wp--custom--stato--errore-fondo); border-color: var(--wp--custom--stato--errore); color: var(--wp--custom--stato--errore); } .woocommerce-info, .wc-block-components-notice-banner.is-info { background-color: var(--wp--custom--stato--info-fondo); border-color: var(--wp--custom--stato--info); color: var(--wp--custom--stato--info); } .wc-block-components-notice-banner.is-warning { background-color: var(--wp--custom--stato--avviso-fondo); border-color: var(--wp--custom--stato--avviso); color: var(--wp--custom--stato--avviso); } /* Il link dentro l'avviso resta leggibile sul fondo tenue. */ :where(.woocommerce-message, .woocommerce-error, .woocommerce-info) a { color: inherit; text-decoration: underline; font-weight: 600; } /* Il bottone dentro l'avviso non deve mimetizzarsi. */ :where(.woocommerce-message, .woocommerce-info) .button { background-color: var(--wp--preset--color--dark); color: var(--wp--preset--color--bianco); border-radius: var(--wp--custom--raggio--sm); padding: 0.5rem 1rem; min-height: var(--wp--custom--target--min); display: inline-flex; align-items: center; text-decoration: none; } /* ============================================================================= 13. Preferenze utente ========================================================================== */ /* --- Meno animazioni ------------------------------------------------------ */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* --- Contrasto forzato (modalità alto contrasto di Windows) -------------- In questa modalità il sistema riscrive i colori: bordi e focus vanno riancorati alle parole chiave di sistema, altrimenti spariscono. */ @media (forced-colors: active) { :where(a, button, input, select, textarea, summary):focus-visible { outline: 3px solid CanvasText; outline-offset: 2px; } .wp-block-group.is-style-card, .wp-block-group.is-style-card-interattiva, .wc-block-product, .woocommerce ul.products li.product, .woocommerce table.shop_table { border: 1px solid CanvasText; } .wp-block-button__link, .woocommerce .button { border: 1px solid ButtonText; } /* La spunta decorativa è disegnata con i bordi: in forced-colors sparirebbe senza questo. */ .wp-block-list.is-style-spunte > li::before { border-color: CanvasText; } .imdc-skip-link { border: 2px solid CanvasText; } } /* --- Stampa --------------------------------------------------------------- */ @media print { .imdc-header, .imdc-footer, .imdc-barra-servizio, .wp-block-navigation, .wp-block-search, .imdc-skip-link, .wc-block-components-product-button, .woocommerce ul.products li.product .button { display: none !important; } body { background: #fff !important; color: #000 !important; font-size: 11pt; } a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; word-break: break-all; } }