/* * Theme Name: Sunya Child — grigolettihome * Theme URI: https://dadesign.it/themes/sunya-child * Description: Child theme di Sunya per grigolettihome.com (e-commerce WooCommerce, tableware, WPML it/en). I colori del brand si dichiarano nel filtro sunya_brand_colors in functions.php, non qui. * Author: Davide Arduini * Author URI: https://dadesign.it * Template: sunya * Version: 1.8.2 * License: GPL-2.0-or-later * License URI: https://www.gnu.org/licenses/gpl-2.0.html * Text Domain: sunya-child * Tags: custom, e-commerce, woocommerce * Requires at least: 6.0 * Tested up to: 7.1 * Requires PHP: 7.4 * * Creato il 2026-10-23 dalla base sunya-child 1.3.2, ripulita: niente Dubai, * niente inc/, css/custom.css, js/custom.js. Cartella sul server * sunya-child-grigolettihome dal primo deploy. * * Parent richiesto: Sunya >= 1.15.0 (dalla 1.3.0: colori dei pulsanti * WooCommerce e doppioni breadcrumb/sale flash passati al parent). * Con un parent 1.14.x i pulsanti classici tornano viola. * Prefisso di sito: grh- (deciso da Davide il 2026-10-23; gh- e' del plugin * gh-multilingual, pfs- del mu-plugin product-family-swatches). * * Funzioni Pro di Blocksy (wishlist, quick view, barra carrello flottante, * share box): NON si portano (decisione del 2026-10-23). Se servira' * qualcosa, si personalizza Sunya. * * COSA STA QUI E COSA NO * qui -> tipografia, forme, sezioni di pagina e skin dei componenti * NON -> colori del brand: filtro in functions.php, il parent li deriva. * Un esadecimale in questo file e' quasi sempre nel posto sbagliato. * * MAPPA DELLE SEZIONI (numerazione condivisa con gli altri child: * stesso numero = stesso significato; le sezioni non usate restano * dichiarate vuote, mai eliminate) * 1 Tipografia Century Gothic attiva (1.1.0; menu e breadcrumb 1.7.0) * 2 Testo di lettura attiva (dalla base) * 3 Footer, barra copyright attiva (dalla base; * 3.6 modulo newsletter 1.8.0, come laviadelghiaccio) * 4 Token di sito vuota * 5 Stili di blocco, fasce vuota * 6-10 vuote * 11-19 Sezioni di pagina vuote * 20 WooCommerce: pulsanti, griglia, attiva (1.2.0, ridotta 1.3.0, * card, scheda; bottoni blocco estesa 1.7.0) * 21 Topbar promo attiva (1.2.0) * 22 WhatsApp flottante attiva (1.4.0) * 23 Icone di pagamento aggiunte attiva (1.5.0) * 24 Barra di ricerca vuota (Customizer del parent, 1.6.0) * 25-29 Skin di componenti globali vuote (hero slider, consenso: si * aprono quando servono) */ /* ========================================================================== 1. TIPOGRAFIA — Century Gothic (v1.1.0) Font del sito, licenza acquistata da Davide (Monotype). woff2 convertiti il 2026-10-23 dai TTF di blocksy-child (fontTools), in fonts/. Scala e pesi ripresi dal blocksy-child servito il 2026-10-23 (wp-clients/grigolettihome.com/css/servito-2026-10-23/): titoli a peso 400, interlinea larga, letter-spacing 0.02rem. La regola `span` di Blocksy NON e' riportata: colpiva ogni span della pagina (prezzi, badge, etichette di WooCommerce compresi). Century Gothic non ha un corsivo nei file del sito: per em/i si lascia al browser il corsivo sintetico (font-synthesis: style), il parent lo spegne per tutto il resto. ========================================================================== */ @font-face { font-family: 'Century Gothic'; src: url('fonts/CenturyGothic-Regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'Century Gothic'; src: url('fonts/CenturyGothic-Bold.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; } :root { --grh-font: 'Century Gothic', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif; --sunya-font-body: var(--grh-font); --sunya-font-heading: var(--grh-font); } body { font-family: var(--sunya-font-body); } h1, h2, h3, h4, h5, h6, .wp-block-heading { font-family: var(--sunya-font-heading); font-weight: 400; letter-spacing: 0.02rem; } /* Dimensioni h1-h4: Customizer → Tipografia → «Scala dimensioni titoli» = Piccola (CSS inline del parent, dopo questo file). Qui solo interlinea e h5, che la scala non tocca. */ h1 { line-height: 1.2; } h2 { line-height: 1.3; } h3 { line-height: 1.43; } h4 { line-height: 1.54; } h5 { font-size: 1.2rem; line-height: 1.67; } .sunya-entry-content p, .sunya-entry-content li { font-size: 1.2rem; line-height: 1.5; letter-spacing: 0.02rem; } /* v1.8.2: la regola qui sopra e' per i testi di lettura. Carrello, checkout e account stanno anch'essi in .sunya-entry-content, dentro il contenitore .woocommerce dello shortcode, e le righe dei moduli sono

: etichette, campi e metodi di pagamento uscivano a 19.2px (misurato sul checkout servito il 30/10). Dentro WooCommerce si torna al corpo base. (0,2,1) contro (0,1,1). */ .sunya-entry-content .woocommerce :is(p, li) { font-size: 1rem; letter-spacing: normal; } em, i { font-synthesis: style; } /* v1.7.0 — menu e breadcrumb sulla misura del live (baseline Blocksy del 2026-10-30, docs/MISURE-2026-10-30-grigolettihome-baseline-blocksy.md): sul live il menu e' 12px, 700, maiuscolo; qui 13px per Century Gothic, che a parita' di corpo e' piu' piccola del font di sistema. Il colore NON si riprende: il #949494 del live su bianco misura 3.0, sotto AA; resta il token del parent. Solo desktop (stesso breakpoint di header.css): nel pannello mobile il menu resta a corpo pieno. (0,2,2) contro .sunya-nav__menu > li > a (0,1,2) di header.css. */ @media screen and (min-width: 1025px) { .sunya-header .sunya-nav__menu > li > a { font-size: 0.8125rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; /* v1.7.1: padding orizzontale che segue la finestra. Col padding del parent (--sunya-spacing-lg, 24px per lato) le 9 voci occupavano 995px e sotto i ~1400 le azioni dell'header (lingua, valuta, account, carrello) uscivano dallo schermo, tagliate dal clip del body: a 1280 finivano a 1381 su 1265 (servito, 30/10). */ padding-left: clamp(0.5rem, 1vw, 1.25rem); padding-right: clamp(0.5rem, 1vw, 1.25rem); } } /* Fra 1025 e 1199 non basta il padding: corpo 12 e spaziatura minima, fino al passaggio al menu mobile del parent. Misurato col CSS iniettato sul servito: azioni dentro lo schermo a 1030, 1100, 1199, 1200-1440. */ @media screen and (min-width: 1025px) and (max-width: 1199px) { .sunya-header .sunya-nav__menu > li > a { font-size: 0.75rem; letter-spacing: 0.01em; padding-left: 0.4rem; padding-right: 0.4rem; } } /* Breadcrumb: live 12px, 600, maiuscolo. (0,2,0) batte .sunya-breadcrumb di breadcrumbs.css e di woocommerce.css del parent, caricati dopo. */ .sunya-breadcrumb-wrap .sunya-breadcrumb { font-size: 0.8125rem; text-transform: uppercase; letter-spacing: 0.04em; } /* ========================================================================== 2. TESTO DI LETTURA (dalla base 1.3.2) Segue la modalita' base: --sunya-color-text lo emette il parent a partire da "testo su chiaro" / "testo su scuro". ========================================================================== */ body, .entry-content, .sunya-entry-content, .page-content { color: var(--sunya-color-text); } .sunya-meta, .sunya-caption, figcaption, .wp-caption-text, .comment-metadata { color: color-mix(in oklab, var(--sunya-color-text) 78%, var(--sunya-color-bg, #ffffff)); } /* ========================================================================== 3. FOOTER — barra copyright smorzata (dalla base 1.3.2) Testo su scuro miscelato verso la superficie scura. Il valore del Customizer, se impostato, ha la precedenza (primo anello della var()). ========================================================================== */ .sunya-footer__bottom, .sunya-footer__bottom a { color: var( --sunya-footer-bottom-color, color-mix( in oklab, var(--sunya-color-text-on-dark, #e5e7eb) 78%, var(--sunya-color-surface-dark, var(--sunya-color-primary)) ) ); } /* v1.2.0 — testo dei widget del footer. sidebar.css del parent dichiara `.sunya-widget p { color: var(--sunya-color-text-light) }` anche per i widget del footer: #6f7174 sulla carta #eaeaec misura 4.07, sotto AA (misurato in pagina). Nel footer il paragrafo segue l'inchiostro della superficie, come i link. Nota per il parent nel report del 2026-10-23 sera. */ .sunya-footer .sunya-widget p { color: inherit; } /* v1.8.1 — link del footer al passaggio del mouse. Il parent li porta all'accent (#a8977b), pensato per un footer scuro: sul #eaeaec misura 2.37, sul #f4f4f5 meno ancora. Qui inchiostro scuro (accent-ink, 15.27) piu' sottolineatura, cosi' il cambio si vede anche senza il colore. (0,3,1) contro .sunya-footer a:hover (0,2,1) di footer.css, qualunque sia l'ordine dei fogli. Titoli dei widget: parent 1.15.2. */ .sunya-footer.sunya-footer a:hover, .sunya-footer.sunya-footer a:focus-visible { color: var(--sunya-color-accent-ink); text-decoration: underline; text-underline-offset: 0.18em; } /* 3.6 Modulo newsletter (plugin da-newsletter >= 1.1.0, v1.8.0). Stesso numero e stesso schema di laviadelghiaccio (3.6), qui sul footer chiaro (#eaeaec, testo #3f4245). Il plugin da' solo la struttura (colonna, gap, consenso affiancato): qui caratteri, campo, pulsante e stati, SOLO nel footer. Markup e stati: wp-plugins\_dev-tools\ NOTA-2026-10-14-da-newsletter-skin-sunya.md. Prima di questa sezione (servito 30/10): campo col bordo inset del browser alto 19px, pulsante grigio di theme.json, consenso a 16px. Confine del campo: bordo in testo secondario, che sul footer chiaro supera 3:1 (il bianco del campo da solo non stacca dal #eaeaec). Pulsante come gli altri del sito: accent con inchiostro on-accent, raggio 3px. Selettori a 0,3,0 sul pulsante: battono .wp-element-button di theme.json qualunque sia l'ordine dei fogli. */ .sunya-footer .da-newsletter { margin: 0; } .sunya-footer .da-newsletter__label { font-size: 0.9375rem; color: var(--sunya-color-text); } .sunya-footer .da-newsletter .da-newsletter__input { min-height: 44px; padding: 0.55em 0.8em; border: 1px solid var(--sunya-color-text-light); border-radius: var(--grh-btn-radius); background: var(--sunya-color-bg); color: var(--sunya-color-text); font: inherit; font-size: 1rem; line-height: 1.3; } .sunya-footer .da-newsletter .da-newsletter__checkbox { width: 1.125rem; height: 1.125rem; accent-color: var(--sunya-color-accent-ink); } .sunya-footer .da-newsletter__consent { font-size: 0.875rem; line-height: 1.45; color: var(--sunya-color-text); } .sunya-footer .da-newsletter__consent a { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.18em; } .sunya-footer .da-newsletter__consent a:hover, .sunya-footer .da-newsletter__consent a:focus-visible { color: var(--sunya-color-accent-ink); text-decoration-thickness: 2px; } .sunya-footer .da-newsletter .da-newsletter__button { align-self: flex-start; display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0.6em 1.5em; border: 2px solid var(--sunya-color-accent); border-radius: var(--grh-btn-radius); background: var(--sunya-color-accent); color: var(--sunya-color-on-accent); font-family: inherit; font-size: 1rem; font-weight: 400; line-height: 1.2; transition: background-color var(--sunya-transition-fast), border-color var(--sunya-transition-fast), color var(--sunya-transition-fast); } .sunya-footer .da-newsletter .da-newsletter__button:hover, .sunya-footer .da-newsletter .da-newsletter__button:focus-visible { background: var(--sunya-color-accent-hover); border-color: var(--sunya-color-accent-hover); color: var(--sunya-color-on-accent-hover, var(--sunya-color-on-accent)); } /* Fuoco da tastiera: un anello per tutti i controlli, link compreso. */ .sunya-footer .da-newsletter input:focus-visible, .sunya-footer .da-newsletter a:focus-visible, .sunya-footer .da-newsletter .da-newsletter__button:focus-visible { outline: 2px solid var(--sunya-color-accent-ink); outline-offset: 2px; } /* Campo o casella da correggere: cornice fuori dal controllo, piu' il messaggio del plugin (mai il solo colore). */ .sunya-footer .da-newsletter [aria-invalid="true"] { box-shadow: 0 0 0 3px var(--sunya-woo-error, var(--sunya-color-accent-ink)); } .sunya-footer .da-newsletter__message { font-size: 0.875rem; color: var(--sunya-color-text); } /* ========================================================================== 4-19 — vuote (vedi mappa in testa) ========================================================================== */ /* ========================================================================== 20. WOOCOMMERCE - FORMA DEI PULSANTI CLASSICI (v1.3.0) Dalla 1.3.0 solo la forma. I colori (accent / on-accent, hover accent-hover / on-accent-hover) li porta il parent 1.15.0 in css/woocommerce.css, dove sono passati dalla sezione 20 della 1.2.0. Coperti: scheda prodotto, avvisi (Visualizza carrello), account, moduli di login. Le card degli archivi usano .sunya-btn e non passano di qui. Ordine di caricamento: woocommerce.css del plugin, poi QUESTO file, poi css/woocommerce.css del parent. A pari specificita' (0,2,1) questo file batte il plugin ma perde col parent: per questo il parent porta solo i colori, che qui non si ripetono. ========================================================================== */ /* v1.3.0: colori e hover ora li porta il parent 1.15.0 (css/woocommerce.css, "Pulsanti classici di WooCommerce sul brand"). Qui resta la forma di questo sito: bordo 2px, raggio md, Century Gothic a peso 400 (il parent mette 600 sulla scheda prodotto: con i soli file 400 e 700 del font uscirebbe un grassetto sintetico). */ .woocommerce :is(a, button, input).button, .woocommerce :is(a, button, input).button.alt, .woocommerce #respond input#submit { border: 2px solid var(--sunya-color-accent); border-radius: var(--grh-btn-radius); font-family: var(--sunya-font-body); font-weight: 400; } /* --- v1.7.0: misure del live (baseline Blocksy del 2026-10-30) ---------- Raggio dei pulsanti: 3px come sul live, solo sui pulsanti. Non si ridefinisce --sunya-radius-md, che il parent usa anche per card, immagini e campi. */ :root { --grh-btn-radius: 3px; } .sunya-product-card .sunya-btn, .wp-block-button .wp-block-button__link { border-radius: var(--grh-btn-radius); } /* Bottoni dei blocchi: sul live alti 40, qui 50 (padding 0.75em del parent). */ .wp-block-button .wp-block-button__link { padding: 0.5em 1.5em; } /* Griglia degli archivi. Era la griglia a float di WooCommerce (margine del 3.8%: 44px a 1152, gap verticale 2.992em); sul live 30 x 30. CSS grid con gap fisso; colonne dalla classe columns-N che WooCommerce mette sulla lista. Mobile a 2 colonne (decisione di Davide 2026-10-30), stesso breakpoint di woocommerce-smallscreen.css. Copre anche correlati e upsell, che usano la stessa lista. (0,2,3) come la regola smallscreen del plugin, che carica prima. */ .woocommerce ul.products[class*="columns-"] { display: grid; grid-template-columns: repeat(var(--grh-cols, 4), minmax(0, 1fr)); gap: 30px; } .woocommerce ul.products.columns-1 { --grh-cols: 1; } .woocommerce ul.products.columns-2 { --grh-cols: 2; } .woocommerce ul.products.columns-3 { --grh-cols: 3; } .woocommerce ul.products.columns-5 { --grh-cols: 5; } .woocommerce ul.products.columns-6 { --grh-cols: 6; } .woocommerce ul.products[class*="columns-"]::before, .woocommerce ul.products[class*="columns-"]::after { content: none; } .woocommerce ul.products[class*="columns-"] li.product { width: auto; float: none; clear: none; margin: 0; } @media screen and (max-width: 768px) { .woocommerce ul.products[class*="columns-"] { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 16px; } } /* Card: live titolo 25.6/400, prezzo 15/600. Il titolo scende a 20 (a 16 sotto i 769px): con la griglia mobile a 2 colonne la card e' larga ~170px e 25.6 non ci sta. Peso 400 perche' il font ha solo 400 e 700: il 600 del parent esce come 700. Il titolo e' un h3 dentro la lista: il plugin lo fissa a 1em con `.woocommerce ul.products li.product h3` (0,2,3), da qui (0,4,2). Il prezzo resta a (0,2,0) contro woocommerce.css del parent (misurato in locale il 2026-10-30). */ .woocommerce ul.products li.product .sunya-product-card__title { font-size: 1.25rem; font-weight: 400; line-height: 1.35; } .sunya-product-card .sunya-product-card__price { font-size: 1rem; font-weight: 700; } @media screen and (max-width: 768px) { .woocommerce ul.products li.product .sunya-product-card__title { font-size: 1rem; } } /* Scheda prodotto: titolo 36 a 1440 (clamp del parent fino a 2.25rem); live 24. 28 sul desktop, 24 sotto. */ .sunya-single__title-wrap .sunya-single__title { font-size: clamp(1.5rem, 2vw, 1.75rem); } /* v1.8.0: «Aggiungi al carrello» largo come sul live (era 187px su 787). Il pulsante prende lo spazio che resta accanto alla quantita'; quando la quantita' e' nascosta (venduto singolarmente) occupa tutta la riga. Prodotti semplici e variabili; il form dei raggruppati (tabella) no. */ .sunya-single__add-to-cart form.cart:not(.variations_form):not(.grouped_form), .sunya-single__add-to-cart .woocommerce-variation-add-to-cart { display: flex; align-items: stretch; gap: var(--sunya-spacing-sm); } .sunya-single__add-to-cart form.cart .quantity { margin: 0; } .sunya-single__add-to-cart form.cart .single_add_to_cart_button { flex: 1 1 auto; min-height: 48px; } /* Ordinamento: il select non eredita il font (usciva Arial). */ .sunya-shop-toolbar__sort .woocommerce-ordering select { font-family: inherit; color: inherit; } /* ========================================================================== 21. TOPBAR PROMO (v1.2.0) Testo del codice SCONTO10 come sul live (riga alta di Blocksy): minuscole, peso normale, solo il codice in grassetto. Lo stile promo del parent lo mette tutto in maiuscolo e grassetto: a 400px la barra arrivava a 75px su quattro righe. La nota fra parentesi () sparisce sotto i 600px. Colori: filtro brand (topbar_bg / topbar_ink), non qui. ========================================================================== */ .sunya-topbar--promo .sunya-topbar__text--highlight { text-transform: none; font-weight: 400; letter-spacing: 0; } .sunya-topbar--promo strong { font-weight: 700; } .sunya-topbar--promo small { font-size: .85em; } @media (max-width: 600px) { .sunya-topbar--promo small { display: none; } } /* ========================================================================== 22. WHATSAPP FLOTTANTE (v1.4.0) Dal blocksy-child del live (pulsante verde 45px, bottom 80px, right 20px). Qui allineato al torna-su del parent come su petstyle (.sunya-btt: right 32px, bottom 32px, 48x48): stesso asse verticale e 12px di stacco sopra. Icona = immagine di sfondo (img/whatsapp.svg, cerchio e glifo del live): nessun esadecimale qui. Nome accessibile nell'aria-label. ========================================================================== */ .grh-whatsapp { position: fixed; right: 32px; bottom: 92px; z-index: 999; width: 48px; height: 48px; background: url('img/whatsapp.svg') center / contain no-repeat; border-radius: 50%; box-shadow: var(--sunya-shadow-md); transition: transform var(--sunya-transition-fast, .15s ease); } .grh-whatsapp:hover, .grh-whatsapp:focus-visible { transform: scale(1.1); } .grh-whatsapp:focus-visible { outline: 2px solid var(--sunya-color-accent-ink); outline-offset: 3px; } /* Sotto i 769px il torna-su del parent passa a --sunya-spacing-md dal bordo (footer.css): stesso asse, 12px sopra i suoi 48px. */ @media screen and (max-width: 768px) { .grh-whatsapp { right: var(--sunya-spacing-md); bottom: calc(var(--sunya-spacing-md) + 48px + 12px); } } @media (prefers-reduced-motion: reduce) { .grh-whatsapp { transition: none; } .grh-whatsapp:hover, .grh-whatsapp:focus-visible { transform: none; } } @media print { .grh-whatsapp { display: none; } } /* ========================================================================== 23. ICONE DI PAGAMENTO AGGIUNTE (v1.5.0) Le icone del parent sono SVG inline 38x24 con una piastrina bianca e un bordo chiaro dentro il disegno. Le aggiunte del child (Maestro, Nexi, UnionPay, Scalapay: file ufficiali in img/payments/, vedi functions.php) sono : stessa misura e stessa piastrina, qui. Il bianco e il bordo sono quelli disegnati dentro le icone del parent (#fff, #e6e6e6), non colori del brand. ========================================================================== */ .sunya-payments__icon .grh-pay { display: block; width: 38px; height: 24px; padding: 2px 3px; box-sizing: border-box; object-fit: contain; background: #fff; border: 1px solid #e6e6e6; border-radius: 3px; } /* Klarna: logotipo nero su piastrina rosa, come il badge di pagamento del marchio (#FFB3C7 e' il rosa Klarna, non un colore del brand del sito). */ .sunya-payments__icon .grh-pay--klarna { padding: 2px 4px; background: #FFB3C7; border-color: #FFB3C7; } /* Etichetta gia' completa (Scalapay): niente piastrina, stessa altezza. */ .sunya-payments__icon .grh-pay--card { width: auto; padding: 0; background: none; border: 0; } /* ========================================================================== 24 — vuota: la barra di ricerca e' nel Customizer del parent (Riga inferiore header, 1.15.0), misura e posizione dal parent. Vedi functions.php. ========================================================================== */ /* ========================================================================== 25-29 — vuote (vedi mappa in testa) ========================================================================== */