/* ============================================================ OrtoFiorito — base Token, reset, tipografia, layout, componenti condivisi. Unico foglio caricato su ogni pagina. I valori dei token arrivano da theme.json: qui si usano le variabili generate da WordPress, senza duplicarle. ============================================================ */ /* Raggi e misure sono quelli del sito attuale, non scelte nuove: presi dal foglio di stile del tema precedente e dalle impostazioni del Customizer salvate nel database di produzione (raggio delle immagini di catalogo, altezza della barra mobile, altezza del logo). */ :root{ --of-radius-xs: 2.5px; --of-radius-sm: 5px; --of-radius-md: 10px; /* immagini */ --of-radius-card: 5px; /* immagini di catalogo */ --of-radius-pill: 9999px; --of-radius-bottone: 30px; /* * Questi quattro li ridefinisce solo il pannello opzioni (inc/opzioni/css.php), * quando qualcuno cambia gli angoli: di serie valgono come il sito. */ --of-radius-campo: 5px; /* campi dei moduli: «round» di glozin */ --of-radius-articolo: 5px; /* foto delle schede articolo */ --of-radius-articolo-foto: var(--of-radius-md); /* foto in cima all'articolo */ --of-radius-icona-card: 5px; /* pulsanti sulla foto della scheda: «round» di glozin */ --of-transizione: 160ms ease; --of-header-h: 64px; /* altezza della barra mobile */ --of-logo-h: 25px; --of-gutter: 15px; --of-zoom: scale(1.05); /* ingrandimento al passaggio sulla card */ /* La freccina verso il basso delle voci con tendina, presa dal sito. Sta qui e non in un file perche' serve come sagoma (mask) e non come immagine: il colore lo da' il testo, cosi' segue il passaggio del mouse senza una seconda regola. */ --of-freccia-giu: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1.08984 1.82227C0.971354 1.71289 0.912109 1.58073 0.912109 1.42578C0.912109 1.26172 0.971354 1.12044 1.08984 1.00195C1.19922 0.892578 1.33594 0.837891 1.5 0.837891C1.66406 0.837891 1.80078 0.892578 1.91016 1.00195L5 4.0918L8.08984 1.00195C8.19922 0.892578 8.33594 0.837891 8.5 0.837891C8.66406 0.837891 8.80078 0.892578 8.91016 1.00195C9.02865 1.12044 9.08789 1.26172 9.08789 1.42578C9.08789 1.58073 9.02865 1.71289 8.91016 1.82227L5.41016 5.32227C5.30078 5.44076 5.16406 5.5 5 5.5C4.83594 5.5 4.69922 5.44076 4.58984 5.32227L1.08984 1.82227Z'/%3E%3C/svg%3E"); } /* ------------------------------------------------------------ Il carattere dei titoli. Bricolage Grotesque per i titoli e Instrument Sans per il testo: è la coppia del sito online. Il file è un carattere variabile, quindi un solo download copre tutti i pesi da 200 a 800. Sta qui e non nel foglio della homepage perché i titoli sono in Bricolage su tutto il sito, non solo là: anche quelli del pannello di ricerca, che c'è su ogni pagina, e i nomi dei prodotti nelle card. Chi lo assegna è theme.json, alla voce elements.heading. I due file sono sottoinsiemi: il primo copre il latino di base, il secondo gli accenti meno comuni. Il browser scarica il secondo solo se la pagina ne ha bisogno. ------------------------------------------------------------ */ @font-face{ font-family:'Bricolage Grotesque'; font-style:normal; font-weight:200 800; font-stretch:100%; font-display:swap; src:url('../fonts/BricolageGrotesque-latin.woff2') format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } @font-face{ font-family:'Bricolage Grotesque'; font-style:normal; font-weight:200 800; font-stretch:100%; font-display:swap; src:url('../fonts/BricolageGrotesque-latin-ext.woff2') format('woff2'); unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; } /* --- reset essenziale --- */ *,*::before,*::after{box-sizing:border-box} body{margin:0;-webkit-font-smoothing:antialiased} img,picture,svg,video{display:block;max-width:100%;height:auto} button,input,select,textarea{font:inherit;color:inherit} /* Rispetta chi ha chiesto meno animazioni. */ @media (prefers-reduced-motion: reduce){ *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important} } /* --- accessibilità --- */ :focus-visible{ outline:2px solid var(--wp--preset--color--primary); outline-offset:2px; border-radius:var(--of-radius-sm); } .of-solo-screen-reader{ position:absolute;width:1px;height:1px;padding:0;margin:-1px; overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0; } .of-salta-al-contenuto{ position:absolute;left:-9999px;top:0;z-index:100; padding:var(--wp--preset--spacing--30) var(--wp--preset--spacing--50); background:var(--wp--preset--color--primary); color:var(--of-testo-su-primario,var(--wp--preset--color--background)); } .of-salta-al-contenuto:focus{left:0} /* --- layout --- */ /* 1200px con gutter di 15px, come il sito attuale. La variante a 1410px è usata dalle sezioni a tutta larghezza: è la wideSize di theme.json. */ /* ========================================================================== Il contenitore Una misura sola per tutte le pagine, ed e' quella dell'intestazione: 1470 con 30px di respiro fanno 1410 di contenuto, che a 1512px comincia a x=51 — la verticale del logo. Homepage e catalogo erano già così; blog, ricerca, 404, articolo e scheda prodotto usavano invece 1200, e cominciavano a x=156. Si vedeva: il contenuto rientrava rispetto al marchio. Sotto i 1025 il respiro diventa la gronda comune, e il logo si centra fra hamburger e icone: li' non c'e' una verticale a cui allinearsi. ========================================================================== */ :root{ --of-contenitore-max:1470px;--of-contenitore-stretto:1260px; --of-contenitore-lato:30px; } @media(max-width:1024px){ :root{ --of-contenitore-lato:var(--of-gutter) } } .of-contenitore{ width:100%; max-width:var(--of-contenitore-max); margin-inline:auto; padding-inline:var(--of-contenitore-lato); } /* Il contenitore stretto: 1260 con 30 di lato fanno 1200 di contenuto, che e' il `contentSize` dichiarato in theme.json. E' la misura delle pagine di testo, dell'articolo del blog e della riga contatti. */ .of-contenitore--stretto{ width:100%; max-width:var(--of-contenitore-stretto,1260px); margin-inline:auto; padding-inline:var(--of-contenitore-lato); box-sizing:border-box; } /* * Per il testo da leggere. Il contenitore resta allineato al logo, ma una * riga di prosa larga 1410px non si legge: la colonna si stringe DENTRO, * senza spostare il bordo del blocco. */ .of-contenitore--lettura, .of-articolo__contenuto{ max-width:var(--wp--style--global--content-size,760px); margin-inline:auto; } .of-contenitore--largo{ max-width:var(--of-contenitore-max) } .of-griglia{display:grid;gap:var(--wp--preset--spacing--50)} /* --- pulsanti --- */ /* Il bottone del sito attuale: fondo nero, non primario. Il rosso #d0473e è riservato a prezzi scontati, link al passaggio e accenti — usarlo anche sui bottoni cambierebbe il peso visivo di ogni pagina. Valori presi dal foglio di stile del tema precedente. */ .of-bottone{ display:inline-flex;align-items:center;justify-content:center;gap:10px; min-height:44px; /* area di tocco adeguata */ padding:16.5px 20px; border:1px solid var(--of-bottone-bordo,var(--of-bottone-sfondo,var(--wp--custom--bottone--sfondo,#111))); border-radius:var(--of-radius-bottone); background:var(--of-bottone-sfondo,var(--wp--custom--bottone--sfondo,#111)); color:var(--of-bottone-testo,var(--wp--custom--bottone--testo,#fff)); font-size:15px;font-weight:600;line-height:1;text-decoration:none;cursor:pointer; transition:background var(--of-transizione),border-color var(--of-transizione),color var(--of-transizione); } .of-bottone:hover{ background:var(--of-bottone-sfondo-hover,var(--wp--custom--bottone--sfondo-hover,#000)); border-color:var(--of-bottone-bordo-hover,var(--of-bottone-sfondo-hover,var(--wp--custom--bottone--sfondo-hover,#000))); color:var(--of-bottone-testo-hover,var(--of-bottone-testo,var(--wp--custom--bottone--testo,#fff))); } /* * Le famiglie di pulsanti di glozin (Stile → Pulsanti). Ognuna ridefinisce * gli stessi token del pulsante pieno, e il pannello li puo' cambiare una * famiglia per volta. */ .of-bottone--secondario{ --of-bottone-sfondo:transparent; --of-bottone-testo:var(--wp--preset--color--dark); --of-bottone-bordo:var(--wp--preset--color--border); --of-bottone-sfondo-hover:var(--wp--preset--color--surface); --of-bottone-bordo-hover:var(--wp--preset--color--dark); --of-bottone-testo-hover:var(--wp--preset--color--dark); } .of-bottone--chiaro{ --of-bottone-sfondo:#fff; --of-bottone-testo:var(--wp--preset--color--dark); --of-bottone-sfondo-hover:#fff; --of-bottone-testo-hover:var(--wp--preset--color--dark); } .of-bottone--contorno-scuro{ --of-bottone-sfondo:transparent; --of-bottone-testo:var(--wp--preset--color--dark); --of-bottone-bordo:var(--wp--preset--color--dark); --of-bottone-sfondo-hover:var(--wp--preset--color--dark); --of-bottone-bordo-hover:var(--wp--preset--color--dark); --of-bottone-testo-hover:#fff; } .of-bottone--sottolineato, .of-bottone--testo{ --of-bottone-sfondo:transparent; --of-bottone-bordo:transparent; --of-bottone-sfondo-hover:transparent; --of-bottone-bordo-hover:transparent; --of-bottone-testo:var(--wp--preset--color--dark); --of-bottone-testo-hover:var(--wp--preset--color--primary); min-height:0; padding:0; } .of-bottone--sottolineato{text-decoration:underline;text-underline-offset:3px} .of-bottone[disabled],.of-bottone[aria-disabled="true"]{opacity:.5;pointer-events:none} /* * L'effetto al passaggio di glozin: un fondo che sale dal basso. Sul sito e' * spento (Stile → Pulsanti → «Disattiva l'effetto al passaggio»), quindi * `--of-bottone-effetto-attivo` vale 0 e la tendina resta a scala zero. Lo * accende solo il pannello. Solo con un puntatore vero: su telefono il * passaggio non esiste e l'effetto resterebbe appeso dopo il tocco. */ @media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){ .of-bottone{position:relative;isolation:isolate;overflow:hidden} .of-bottone::before{ content:""; position:absolute; inset:0; z-index:-1; background:var(--of-bottone-effetto,#212121); transform:scaleY(0); transform-origin:bottom; transition:transform .4s cubic-bezier(.3,1,.3,1); } .of-bottone:hover::before{transform:scaleY(var(--of-bottone-effetto-attivo,0))} } /* --- campi --- */ .of-campo{ width:100%;min-height:44px; padding:var(--wp--preset--spacing--30) var(--wp--preset--spacing--40); border:1px solid var(--wp--preset--color--border); border-radius:var(--of-radius-md); background:var(--wp--preset--color--background); } .of-campo:focus{border-color:var(--wp--preset--color--primary);outline:none;box-shadow:0 0 0 3px rgb(208 71 62 / .15)} .of-campo[aria-invalid="true"]{border-color:var(--wp--preset--color--error)} .of-errore-campo{color:var(--wp--preset--color--error);font-size:var(--wp--preset--font-size--sm)} /* --- badge --- */ /* Geometria presa dal sito: alto 29, 15px di fianco, 13px/500 bianco su pillola. Lo sconto e' rosso, l'esaurito grigio scuro — non grigio chiaro su grigio chiaro, che era illeggibile. */ .of-badge{ display:inline-flex; align-items:center; align-self:start; height:29px; padding:0 15px; border-radius:var(--of-radius-pill); font-size:13px; font-weight:500; line-height:1; color:#fff; text-transform:capitalize; white-space:nowrap; } .of-badge--sconto{background:#e14a5c} .of-badge--esaurito{background:#666} /* I colori di serie di glozin, misurati sul sito. */ .of-badge--novita{background:#3357d8} .of-badge--evidenza{background:#ff7402} /* Glozin: il preordine e la disponibilita' (sulla scheda, se accesa) hanno il loro colore; l'etichetta scritta a mano prende i colori del prodotto, o quelli del pannello, o il nero. */ .of-badge--preordine{background:#3357d8} .of-badge--disponibile{background:#1e8e3e} .of-badge--su-misura{ background:var(--of-badge-su-misura-sfondo,var(--of-badge-su-misura-sfondo-pannello,#111)); color:var(--of-badge-su-misura-testo,var(--of-badge-su-misura-testo-pannello,#fff)); } /* Negozio → Scheda nel catalogo → Offerte a tempo: sotto la foto. */ .of-card__conto{ position:absolute;inset-inline:0;inset-block-end:15px;z-index:2; width:max-content;margin-inline:auto;padding:6px 15px; border-radius:30px;background:#fff; color:var(--wp--preset--color--primary);font-size:13px;font-weight:600; pointer-events:none; } .of-card__nastro{ position:absolute;inset-inline:0;inset-block-end:0;z-index:2; overflow:hidden; background:var(--wp--preset--color--primary);color:var(--of-testo-su-primario,#fff); font-size:12px;font-weight:600;line-height:28px;white-space:nowrap; pointer-events:none; } .of-card__nastro-fila{display:inline-flex;gap:20px;animation:of-nastro var(--of-nastro-velocita,10s) linear infinite} @keyframes of-nastro{to{transform:translateX(-50%)}} @media(prefers-reduced-motion:reduce){.of-card__nastro-fila{animation:none}} /* --- superfici --- */ .of-scheda{ background:var(--wp--preset--color--background); border:1px solid var(--wp--preset--color--border); border-radius:var(--of-radius-md); } /* --- footer --- L'intestazione sta tutta in header.css: qui c'erano regole che la rendevano fissa sempre, in conflitto con lo sticky condizionale. */ .of-footer{ position:relative; /* riferimento per la filigrana */ overflow:hidden; border-top:1px solid var(--wp--preset--color--border); background:var(--wp--preset--color--home-fondo,#f1f3f7); /* Il sito impone corpo e colore a tutta la fascia e il resto eredita: 16px e nero, non i 15px grigi del corpo del sito. */ font-size:16px; color:var(--wp--preset--color--dark); } /* Nessuno stacco fra contenuto e pie' di pagina: sul sito il fondo del contenuto e il filo in cima al pie' di pagina coincidono, su TUTTE le pagine. Il respiro sta dentro, non fuori. */ /* Il contenitore del pie' di pagina e' quello largo, non quello dei contenuti: 1410px. Il respiro ai lati e' 30px nella griglia e 26px nella riga finale — due valori diversi, presi dal sito. */ .of-footer__interno{ width:100%; max-width:var(--wp--style--global--wide-size,1410px); margin-inline:auto; } /* Il contenuto sta sopra la filigrana. Senza questo z-index la scritta grande, che e' posizionata, coprirebbe il testo. */ .of-footer__griglia, .of-footer__coda{position:relative;z-index:1} /* Quattro colonne come nel sito attuale: sede e orario larghe, i due menu stretti. Le proporzioni vengono dalle misure del footer live, che a 1440px dava 428 / 438 / 182 / 182. */ .of-footer__griglia{ display:grid; grid-template-columns:2.35fr 2.4fr 1fr 1fr; gap:50px; align-items:start; padding:56px 30px 10px; } /* Il logo: alto 30px come nel pie' di pagina del sito, larghezza libera. */ .of-footer__marchio{margin:0 0 var(--wp--preset--spacing--40)} .of-footer__marchio img, .of-footer__marchio .custom-logo{display:block;width:auto;height:30px} /* Il ripiego quando nessun logo e' impostato. */ .of-footer__nome{ font-size:var(--wp--preset--font-size--lg); font-weight:600; line-height:1.2; color:var(--wp--preset--color--dark); text-decoration:none; } .of-footer__tagline{ margin:6px 0 0; color:#5b5b64; font-size:14px; } .of-footer__titolo{ margin:0 0 16px; font-size:16px; font-weight:600; color:var(--wp--preset--color--dark); } /* Corpo e colore li da' la fascia: qui solo gli spazi, che sul sito sono 16px sotto l'indirizzo, 4px fra i due recapiti e zero sotto gli orari. */ .of-footer__indirizzo{margin:0 0 16px} .of-footer__recapito{margin:0 0 4px} .of-footer__orari{margin:0} /* L'indirizzo e il suo segnaposto stanno su una riga, con il disegno che non si stringe mai: 30px, come nel pie' di pagina del sito. */ .of-footer__indirizzo{display:flex;align-items:center;gap:12px} .of-footer__segnaposto{ flex:0 0 auto; width:var(--of-marker,30px); height:var(--of-marker,30px); color:#5b5b64; } .of-footer__indirizzo-link{color:inherit;text-decoration:none} .of-footer__indirizzo-link:hover, .of-footer__indirizzo-link:focus-visible{text-decoration:underline} /* --- la filigrana --- Il logo chiarissimo appoggiato nell'angolo in basso a SINISTRA, largo 72 parti su cento della finestra, intero e non tagliato. Prima era centrato, larga tutto il contenuto e spinta sotto il bordo: sembrava un'altra cosa. La scatola ha le proporzioni 1200/180 del sito e il disegno ci sta dentro allineato in basso a sinistra, cosi' la sua altezza resta quella misurata (163,29px su una scatola da 1088,63). */ .of-footer__filigrana{ position:absolute; inset-inline-start:0; bottom:0; z-index:0; width:72vw; height:calc(72vw * 180 / 1200); line-height:0; pointer-events:none; } .of-footer__filigrana img{ width:100%; height:100%; object-fit:contain; object-position:left bottom; opacity:.04; } .of-footer__recapito a{ color:inherit; text-decoration:none; } .of-footer__recapito a:hover, .of-footer__recapito a:focus-visible{text-decoration:underline} /* Il passo fra le voci sul sito e' 37,42px: interlinea del testo (27,42) piu' 10px di margine fra un
  • e l'altro. Con una interlinea allargata il testo lungo di una voce si spanderebbe, che non e' la stessa cosa. */ .of-footer__lista{ margin:0; padding:0; list-style:none; } .of-footer__lista li + li{margin-block-start:10px} .of-footer__lista a{ color:inherit; text-decoration:none; } .of-footer__lista a:hover, .of-footer__lista a:focus-visible{ color:var(--wp--preset--color--dark); text-decoration:underline; } /* La riga in fondo: firma a sinistra, lingua accanto, metodi di pagamento all'estremita' destra. A schermo stretto va a capo e i pagamenti tornano a sinistra invece di restare appesi al bordo. */ .of-footer__coda{ display:flex; flex-wrap:nowrap; align-items:center; gap:24px; padding:6px 26px; border-top:1px solid rgb(17 17 17 / .08); color:#5b5b64; font-size:14px; } .of-footer__coda p{margin:0} .of-footer__pagamenti{ display:flex; align-items:center; gap:10px; margin-inline-start:auto; } /* 30px e #535353 sono i valori del footer attuale, dove questi tre simboli erano glifi di un font di icone da 81KB. Qui sono SVG dentro la pagina: stessa misura, stesso colore, nessun download. */ .of-footer__pagamento{display:inline-flex} .of-footer__pagamento svg{ height:30px; width:auto; color:#535353; } /* Il selettore di lingua nasce per la barra scura in alto: qui sotto il fondo e' chiaro, quindi il colore torna quello del testo. */ .of-footer__lingua .of-lingue__attuale{ color:var(--wp--preset--color--text); opacity:1; } /* In alto la tendina scende, qui in fondo alla pagina deve salire: sotto non c'e' pagina in cui aprirsi. */ .of-footer__lingua .of-lingue__lista{ top:auto; bottom:calc(100% + 8px); } /* Sotto i 1024px due colonne e meno respiro sopra; sotto i 720px una colonna, respiro laterale a 20px e la riga finale che va a capo con il copyright su una riga tutta sua. Sono i valori del sito. */ @media (max-width:1024px){ .of-footer__griglia{ grid-template-columns:1fr 1fr; gap:40px; padding:44px 30px 10px; } } @media (max-width:720px){ .of-footer__griglia{ grid-template-columns:1fr; gap:32px; padding-inline:20px; } .of-footer__coda{ flex-wrap:wrap; gap:14px; padding-inline:20px; } .of-footer__copyright{flex:1 0 100%} .of-footer__pagamenti{margin-inline-start:0} } /* * Qui c'era un componente «avviso» con la fascia colorata a sinistra. Tolto: * nessun template lo stampava — cercando `of-avviso` si trovano soltanto * `of-foglio__avviso`, `of-minicarrello__avviso` e l'attributo * `data-of-avviso` della fascia in alto, che sono altre tre cose con i loro * stili. Era una regola per un elemento che non esiste. * * Gli avvisi veri del negozio sono quelli di WooCommerce * (`woocommerce-info`, `woocommerce-message`, `woocommerce-error`): quando * andranno vestiti, si parte dalle loro classi e dalle misure del sito. */ /* ------------------------------------------------------------------------- * WooCommerce: annulla l'impaginazione a colonne flottanti * * woocommerce-layout.css assegna alle card width:22.05%, float:left e * margin-right:3.8%, dimensioni pensate per il suo layout a float. * Questo tema impagina il catalogo con CSS grid, quindi quelle regole * fanno rimpicciolire ogni card al 22% della propria cella: in una * colonna da 262px la card finisce a 58px, con l'immagine illeggibile. * * Sulle pagine di catalogo il foglio non viene proprio caricato (vedi il * filtro woocommerce_enqueue_styles in inc/assets.php). Queste regole restano * come rete di sicurezza, nel caso un altro plugin lo rimetta in coda. * * Il foglio non si disattiva ovunque perche' cassa e area account ne * dipendono ancora (.col2-set, .woocommerce-MyAccount, .cart-collaterals), * che questo tema non ridefinisce. * ------------------------------------------------------------------------- */ body .woocommerce ul.products li.product:not(.of-card), body .woocommerce-page ul.products li.product:not(.of-card), body ul.products li.product:not(.of-card) { width: auto; float: none; margin-right: 0; } /* * Le card del tema sono escluse dalla rete qui sopra: la loro LARGHEZZA la * decide la griglia del catalogo, e questa regola gliela sovrascriveva * (`width:auto` a specificita' 0-3-4 batte `.of-prodotti > li`). Del vecchio * blocco restano le due cose che alla griglia non servono mai: il * galleggiamento e il margine destro di woocommerce-layout. */ body ul.products li.product.of-card { float: none; margin-right: 0; } /* ========================================================================== La card del prodotto La stampa woocommerce/content-product.php, quindi non compare solo nel catalogo: anche nei risultati di ricerca, nei prodotti correlati sotto una scheda e nei suggerimenti del carrello. Sta qui e non in catalogo.css perche' quel foglio in quelle pagine non e' caricato. I selettori nominano anche le classi di WooCommerce — `ul.products`, `li.product` — per una ragione sola: woocommerce.css disegna il ciclo prodotti con selettori a quattro classi (`.woocommerce ul.products li.product .price` e simili), e a specificita' piu' bassa non si vince. Non e' decorazione: e' il minimo che serve. Le misure sono quelle del sito. ========================================================================== */ /* Le due pseudo-classi con cui WooCommerce chiude i float diventerebbero due elementi flex in piu' dentro la griglia. */ ul.products.of-prodotti::before, ul.products.of-prodotti::after{content:none} ul.products li.of-card.product .of-card__media{ position:relative; aspect-ratio:1; border-radius:var(--of-radius-card); overflow:hidden; background:var(--wp--preset--color--surface); } ul.products li.of-card.product .of-card__foto{display:block;height:100%} /* La foto riempie il riquadro quadrato. Senza questa, `height:auto` di WooCommerce la fa alta quanto le sue proporzioni e la card si sfalsa. */ ul.products li.of-card.product .of-card__media img{ position:absolute; inset:0; width:100%; height:100%; margin:0; object-fit:cover; border-radius:var(--of-radius-card); transition:opacity .5s,transform .5s; } ul.products li.of-card.product .of-card__seconda{opacity:0} ul.products li.of-card.product .of-card__media--doppia:hover .of-card__seconda, ul.products li.of-card.product .of-card__media--doppia:focus-within .of-card__seconda{opacity:1} /* L'ingrandimento e le icone al passaggio esistono solo dove c'e' un puntatore: su uno schermo tattile il passaggio non avviene mai, e una transizione che non parte e' peso inutile. La soglia e' quella del sito. */ @media(min-width:1025px) and (hover:hover){ ul.products li.of-card.product:hover .of-card__media img{transform:var(--of-zoom)} } ul.products li.of-card.product .of-card__corpo{margin-top:15px} /* Come sul sito: 15px/600, interlinea 18,15 (1,21), spaziatura normale — il nome e' un H2 ma NON ha la spaziatura stretta dei titoli di sezione — e una riga sola, tagliata («Oxalis carnosa, sin. Oxalis…»). Le righe le decide il pannello (Negozio → Scheda nel catalogo → «Nome su»). */ ul.products li.of-card.product .of-card__titolo{ margin:0; padding:0; font-size:15px; font-weight:600; line-height:1.21; letter-spacing:normal; color:var(--wp--preset--color--dark); } ul.products li.of-card.product .of-card__titolo a{ display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:var(--of-card-righe,1); min-height:calc(var(--of-card-righe,1) * 1.21em); overflow:hidden; color:inherit; text-decoration:none; } ul.products li.of-card.product .of-card__titolo a:hover, ul.products li.of-card.product .of-card__titolo a:focus-visible{color:var(--wp--preset--color--primary)} /* Sotto i 1200 il sito perde la «fs-15» di glozin e il nome prende la misura dell'h2: 32 fino a 768, 18 sul telefono (interlinea 1,21, sempre una riga). Misurato su /shop/ a 1024, 800 e 375. */ @media(max-width:1199px){ ul.products li.of-card.product .of-card__titolo{font-size:32px} } @media(max-width:767px){ ul.products li.of-card.product .of-card__titolo{font-size:18px} } /* Il prezzo pieno e' nero, non rosso: il rosso e' solo dello scontato. E lo scontato viene PRIMA del prezzo barrato, che e' l'ordine del sito. */ ul.products li.of-card.product .of-card__prezzo{ display:flex; flex-wrap:wrap; gap:5px; margin:11px 0 0; font-size:16px; font-weight:600; /* 1,05 come sul sito (alto 16,8, il pulsante sotto parte a +65,9 dal nome). La scatola e' bassa ma non ritaglia: gli accenti restano. */ line-height:1.05; color:var(--wp--preset--color--dark); } ul.products li.of-card.product .of-card__prezzo ins{ order:1; background:none; font-weight:600; text-decoration:none; color:var(--wp--preset--color--primary); } ul.products li.of-card.product .of-card__prezzo del{ order:2; color:#666; font-weight:400; opacity:1; text-decoration:line-through; } /* Il pulsante c'e' sempre, largo quanto la card. Bordo di 2px, non di 1. */ /* * `.of-card__corpo` e non solo `.button`: il pulsante dei desideri porta * anch'esso la classe `button` — e' dentro la foto, non nel corpo — e queste * regole lo avrebbero vestito da pulsante del carrello. La regola che nasconde * l'icona gli spegneva addirittura l'SVG, lasciando un quadratino vuoto. */ ul.products li.of-card.product .of-card__bottone, ul.products li.of-card.product .of-card__corpo .button{ display:inline-flex; align-items:center; justify-content:center; width:100%; /* Alto 50 su una riga; se il testo non ci sta va a capo e il pulsante cresce: sul telefono «Aggiungi al carrello» va su due righe, 165x65. */ height:auto; min-height:50px; margin:20px 0 0; padding:15.5px 20px; white-space:normal; border:2px solid var(--wp--preset--color--border); border-radius:var(--of-radius-bottone); background:none; color:var(--wp--preset--color--dark); font-size:15px; font-weight:600; line-height:1; letter-spacing:-0.024em; text-align:center; text-decoration:none; cursor:pointer; transition:border-color .25s,background .25s,color .25s; } ul.products li.of-card.product .of-card__bottone:hover, ul.products li.of-card.product .of-card__corpo .button:hover{ border-color:var(--wp--preset--color--dark); background:none; color:var(--wp--preset--color--dark); } /* L'icona dentro il pulsante e il «Visualizza carrello» che WooCommerce aggiunge dopo l'aggiunta: sul sito non si vedono. */ ul.products li.of-card.product .of-card__bottone svg, ul.products li.of-card.product .of-card__corpo .button svg{display:none} ul.products li.of-card.product .added_to_cart{display:none} /* --- i badge --- Il contenitore non intercetta il puntatore: copre l'angolo della foto e il clic deve passare al link sotto. Piu' di uno si impilano. */ .of-foto .of-card__badge, ul.products li.of-card.product .of-card__badge{ position:absolute; top:15px; left:15px; z-index:2; display:flex; flex-direction:column; gap:3px; margin:0; pointer-events:none; } @media(max-width:1024px){ .of-foto .of-card__badge, ul.products li.of-card.product .of-card__badge{top:10px;left:10px} } @media(prefers-reduced-motion:reduce){ ul.products li.of-card.product .of-card__media img{transition:none} ul.products li.of-card.product:hover .of-card__media img{transform:none} } /* ========================================================================== Le briciole di pane Il markup lo stampa woocommerce_breadcrumb() — vedi ortofiorito_breadcrumb() in inc/template.php. Sta qui e non in catalogo.css perche' le briciole compaiono anche sulla scheda prodotto e nel carrello. ========================================================================== */ /* Il selettore nomina anche la classe di WooCommerce perche' woocommerce.css scrive `.woocommerce .woocommerce-breadcrumb{font-size:.92em;margin:0 0 1em}`: a specificita' piu' bassa il corpo restava 13,8px invece di 14 e un margine di 15px spingeva il titolo piu' in basso del dovuto. */ .woocommerce-breadcrumb.of-briciole, .of-briciole{ display:flex; margin:0; flex-wrap:wrap; align-items:center; font-size:14px; line-height:1.714; color:var(--wp--preset--color--dark); } /* Le voci che portano altrove sono grigie (#888) e la pagina corrente e' scura, come sul sito; al passaggio diventano del colore primario, senza sottolineatura. */ .woocommerce .woocommerce-breadcrumb.of-briciole a, .of-briciole a{color:#888;text-decoration:none;transition:all .4s} .woocommerce .woocommerce-breadcrumb.of-briciole a:hover, .of-briciole a:hover, .of-briciole a:focus-visible{color:var(--wp--preset--color--primary)} /* Il pallino fra una voce e l'altra: e' il separatore del sito. */ .of-briciole__punto{ display:inline-flex; align-items:center; justify-content:center; /* 19 come `.dot-between` del sito: 8 di aria per parte attorno al punto. */ width:19px; align-self:center; } .of-briciole__punto::before{ content:''; width:3px; height:3px; border-radius:50%; background:currentColor; } /* Se un plugin SEO prende il posto di WooCommerce, il suo separatore viene vestito allo stesso modo invece di restare il carattere grezzo. */ .of-briciole .separator, .of-briciole .dot-between{ display:inline-flex; align-items:center; justify-content:center; width:14px; font-size:0; } .of-briciole .separator::before, .of-briciole .dot-between::before{ content:''; width:3px; height:3px; border-radius:50%; background:currentColor; } .of-briciole p, .of-briciole nav, .of-briciole ol, .of-briciole ul{display:inline;margin:0;padding:0;list-style:none} /* ========================================================================== Le frecce della giostra Un componente solo, perche' sono lo stesso oggetto in tre posti: la fila delle categorie in cima al catalogo, la galleria della finestra rapida e — appena arriva — la galleria della scheda prodotto. Stile ed effetto sono quelli del sito, letti dalle sue variabili (--gz-arrow-*): 50x50 tonde, bianche col filo #ebebeb e disegno #111 da 10px, dentro la fila a 10px dai bordi, tutto in 0,4s. L'effetto e' triplo: compaiono al passaggio sulla fila, SLITTANO di 10px verso il centro, e passandoci sopra si INVERTONO. ========================================================================== */ [data-of-giostra]{position:relative} /* I pallini della giostra (chi li chiede con data-of-giostra-punti): come Swiper sul sito, 25x25 attaccati — 19 sul telefono — con un puntino da 5 al 40% e un anello che si allarga su quello attivo. Si vedono sotto i 1200px, dove sul sito le frecce lasciano il posto ai pallini. */ .of-punti{display:none;justify-content:center;align-items:center;margin-block-start:20px} .of-punto{position:relative;width:25px;height:25px;padding:0;border:0;border-radius:50%;background:none;cursor:pointer} .of-punto::before, .of-punto::after{content:"";position:absolute;border-radius:50%;transition:all .4s cubic-bezier(.3,1,.3,1)} .of-punto::before{inset:0;border:1px solid var(--wp--preset--color--dark);opacity:0;transform:scale(.3)} .of-punto::after{inset:0;width:5px;height:5px;margin:auto;background:var(--wp--preset--color--dark);opacity:.4} .of-punto[aria-current="true"]::before{opacity:1;transform:scale(1)} .of-punto[aria-current="true"]::after{opacity:1} @media(max-width:1199px){ .of-punti{display:flex} [data-of-giostra-punti] .of-freccia{display:none} } @media(max-width:767px){ .of-punto{width:19px;height:19px} } .of-freccia{ position:absolute; inset-block-start:50%; transform:translateY(-50%); z-index:2; display:inline-flex; align-items:center; justify-content:center; width:50px; height:50px; padding:0; border:1px solid var(--wp--preset--color--border); border-radius:50%; background:var(--wp--preset--color--background); color:var(--wp--preset--color--dark); cursor:pointer; overflow:hidden; /* Invisibili e non cliccabili: una freccia trasparente ma sensibile si mangerebbe il clic su quello che ha sotto. */ opacity:0; pointer-events:none; /* Come il sito: una transizione sola, su tutto. */ transition:.4s; } .of-freccia--indietro{inset-inline-start:10px} .of-freccia--avanti{inset-inline-end:10px} .of-freccia svg{width:10px;height:10px} .of-freccia--indietro svg{transform:rotate(180deg)} .of-freccia:hover{ background:var(--wp--preset--color--dark); border-color:var(--wp--preset--color--dark); color:#fff; } /* Quando in quella direzione non c'e' piu' niente: al 75% e inerte. */ .of-freccia[aria-disabled="true"]{pointer-events:none;cursor:default} .of-freccia[aria-disabled="true"]:hover{ background:var(--wp--preset--color--background); border-color:var(--wp--preset--color--border); color:var(--wp--preset--color--dark); } /* `:focus-within` oltre a `:hover`: chi arriva col tabulatore mette il fuoco sulla freccia, e una freccia invisibile che riceve il fuoco e' un comando perso. */ @media(hover:hover){ [data-of-giostra]:hover .of-freccia, [data-of-giostra]:focus-within .of-freccia{opacity:1;pointer-events:auto} [data-of-giostra]:hover .of-freccia--indietro, [data-of-giostra]:focus-within .of-freccia--indietro{margin-inline-start:10px} [data-of-giostra]:hover .of-freccia--avanti, [data-of-giostra]:focus-within .of-freccia--avanti{margin-inline-end:10px} [data-of-giostra]:hover .of-freccia[aria-disabled="true"], [data-of-giostra]:focus-within .of-freccia[aria-disabled="true"]{opacity:.75;pointer-events:none} } /* Dove non c'e' un puntatore restano visibili: il passaggio non avviene mai, e sarebbero due comandi che non compaiono. */ @media(hover:none){ .of-freccia{opacity:1;pointer-events:auto} .of-freccia--indietro{margin-inline-start:10px} .of-freccia--avanti{margin-inline-end:10px} .of-freccia[aria-disabled="true"]{opacity:.75;pointer-events:none} } @media(prefers-reduced-motion:reduce){ .of-freccia{transition:none} } /* ========================================================================== I due comandi sulla foto: preferiti e sguardo rapido Un componente solo, stampato da template-parts/prodotto/icone.php, così compare su OGNI card prodotto: catalogo, ricerca, correlati, carrello e homepage. Prima erano legati alla card del catalogo e in homepage non c'erano. Misure del sito: contenitore in basso a 15px dai tre lati, comandi 45x45 bianchi con raggio 5, distacco 5, disegno 15x15, comparsa in 0,5s con uno scivolamento dal basso. ========================================================================== */ .of-foto{position:relative} .of-icone-prodotto{ position:absolute; /* E' anche il riferimento dei fumetti — vedi sotto. */ inset-inline:15px; inset-block-end:15px; z-index:2; display:flex; align-items:center; justify-content:center; gap:5px; margin:0; opacity:0; transform:translateY(20px); transition:opacity .5s,transform .5s; /* * Il contenitore non intercetta il puntatore: e' una striscia larga quanto * la foto, e senza questo i clic accanto e fra i due comandi non * arriverebbero al link della foto — cadrebbero nel vuoto. Solo i due * comandi rispondono; tutto il resto della foto porta alla scheda. */ pointer-events:none; } /* * I due comandi. I selettori nominano `.of-foto` — il contenitore che li * ospita per contratto — perche' servono TRE classi: il pulsante dei desideri * porta anche `button`, e `.woocommerce a.button` di woocommerce.css gli mette * `margin-top:1em`. A due classi quel margine vinceva: il contenitore veniva * alto 60 invece di 45 e i due comandi finivano sfalsati di 7,5px. */ .of-foto .of-icone-prodotto .wcboost-wishlist-button, .of-foto .of-icone-prodotto .of-icone-prodotto__rapida, .of-foto .of-icone-prodotto > button{ display:inline-flex; align-items:center; justify-content:center; flex:none; width:45px; height:45px; min-height:0; margin:0; padding:0; border:0; border-radius:var(--of-radius-icona-card,var(--of-radius-sm)); background:var(--wp--preset--color--background); color:var(--wp--preset--color--dark); font-size:15px; line-height:1; cursor:pointer; text-decoration:none; pointer-events:auto; /* * `static` di proposito: il fumetto si appende al CONTENITORE dei due * comandi, non al singolo pulsante. Ancorato al pulsante finiva 25px fuori * asse — e su una card stretta una scritta da 188px centrata su un pulsante * da 45 sborda dalla foto, che ha `overflow:hidden` e la taglia. */ position:static; } /* * Lo stato del prodotto lo dice il DISEGNO, non il colore: contorno se non e' * nei preferiti, pieno se c'e'. Il colore e' sempre `currentColor`, quindi * segue il pulsante. * * Al passaggio il pulsante si inverte — fondo #111, icona bianca — come fa * glozin con questi comandi (--gz-button-bg-color-hover: #111, * --gz-button-color-hover: #fff) e con la sua transizione di 0,25s. Funziona * per entrambi gli stati perche' la vernice sta sul tracciato e usa * `currentColor`: il contorno diventa bianco, il pieno diventa bianco. */ .of-foto .of-icone-prodotto .wcboost-wishlist-button, .of-foto .of-icone-prodotto .of-icone-prodotto__rapida, .of-foto .of-icone-prodotto > button{transition:background .25s,color .25s} .of-foto .of-icone-prodotto .wcboost-wishlist-button:hover, .of-foto .of-icone-prodotto .of-icone-prodotto__rapida:hover, .of-foto .of-icone-prodotto > button:hover{ background:var(--wp--preset--color--dark); color:#fff; } /* * Lo stato «nei preferiti» NON tocca il colore: se lo tocca sbaglia. * * Ci avevo messo `color:inherit`, che non vuol dire «lascia quello del * pulsante»: vuol dire «prendi quello del contenitore» — cioe' il grigio del * testo della card. Il cuore pieno veniva grigio invece che nero. Senza * nessuna regola, il pulsante mantiene il suo `--dark` a riposo e il `#fff` * al passaggio, e il tracciato segue con `currentColor`. * * I quattro casi, tutti dal solo colore del pulsante: * fuori lista, a riposo -> fondo bianco, contorno nero * fuori lista, al passaggio -> fondo nero, contorno bianco * in lista, a riposo -> fondo bianco, cuore pieno nero * in lista, al passaggio -> fondo nero, cuore pieno bianco */ /* `img` oltre a `svg`: il plugin permette di caricare un'icona come immagine, e in quel caso senza questa misura arriverebbe grande com'e' stata caricata. Tutti i cuori la stessa dimensione, in ogni stato. */ .of-foto .of-icone-prodotto svg, .of-foto .of-icone-prodotto img{width:15px;height:15px;flex:none} /* Restano nel DOM anche mentre non si vedono: comparendo solo al passaggio, chi naviga da tastiera non li troverebbe mai. */ @media(min-width:1200px) and (hover:hover){ .of-foto:hover .of-icone-prodotto, .of-foto:focus-within .of-icone-prodotto{opacity:1;transform:none} } /* * Sotto i 1200 (il «telefono» delle card di glozin, misurato sul sito a * 1024, 800 e 375) i comandi si vedono sempre, 35x35, in fondo a destra; * lo sguardo rapido lo toglie l'opzione Mobile (sul sito spenta). Senza * puntatore, anche sopra i 1200, restano visibili. */ @media(hover:none),(max-width:1199px){ .of-icone-prodotto{opacity:1;transform:none} .of-foto .of-icone-prodotto .wcboost-wishlist-button, .of-foto .of-icone-prodotto .of-icone-prodotto__rapida, .of-foto .of-icone-prodotto > button{width:35px;height:35px} } @media(max-width:1199px){ .of-icone-prodotto{justify-content:flex-end} } /* * Il pulsante del plugin dei desideri porta dentro anche la sua etichetta: * «Aggiungi alla lista dei desideri» e' larga 62px in una scatola da 45, e * schiacciava l'icona a larghezza ZERO. L'etichetta resta per chi legge con * la sintesi vocale, ma fuori dal flusso. Niente `font-size:0` per * nasconderla: il plugin dimensiona l'icona in `em`. */ .of-foto .of-icone-prodotto .wcboost-wishlist-button{gap:0;white-space:nowrap} /* * Dentro il pulsante si vede SOLO l'icona. Non si nasconde la sola etichetta: * si nasconde tutto quello che non e' l'icona ne' il fumetto. Il plugin, * cambiando stato, riscrive il contenuto del pulsante e puo' metterci dentro * altro — era così che accanto al cuore compariva una spunta. Con questa * regola qualunque cosa aggiunga resta fuori dalla vista, e il pulsante resta * 45x45. * * `position:absolute` e `clip` invece di `display:none`: l'etichetta serve a * chi legge con la sintesi vocale, e nascosta così continua a essere letta. */ .of-icone-prodotto .wcboost-wishlist-button > *:not(.wcboost-wishlist-button__icon):not(.wcboost-wishlist-button__text), .of-icone-prodotto__rapida > *:not(.of-icone-prodotto__fumetto):not(svg){ position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); border:0; white-space:nowrap; } /* --- la spunta accanto al cuore: «\e017» --- La regola sopra nasconde i FIGLI del pulsante, e per questo non bastava: il segno accanto al cuore non e' un figlio, e' uno pseudo-elemento del pulsante stesso, e non lo mette il plugin dei desideri — lo mette WooCommerce. .woocommerce a.button.added::after{font-family:WooCommerce;content:"\e017"} .woocommerce a.button.loading::after{font-family:WooCommerce;content:"\e01c"} `\e017` e' la spunta e `\e01c` il filatoio del caricamento, due glifi del font di WooCommerce. Arrivano sul cuore perche' il pulsante del plugin porta la classe `button` — la stessa classe che mi ha già ingannato tre volte — e il plugin gli aggiunge `added` a lista aggiornata (wishlist.js: `$button.removeClass('loading').addClass('added')`). Si spegne il pseudo-elemento, non il font: quella spunta serve al pulsante «Aggiungi al carrello», dove e' al suo posto. Specificita': quella di WooCommerce e' 0-3-1 (`:where()` non conta niente), questa 0-4-1. Vince per peso, non per ordine dei fogli — così regge anche se un domani woocommerce.css venisse accodato dopo. Vale su OGNI pagina con prodotti: questo foglio e' il base del tema, quindi catalogo, homepage, scheda, sguardo rapido e pagina dei desideri. */ .woocommerce a.button.wcboost-wishlist-button::after, .woocommerce button.button.wcboost-wishlist-button::after, .woocommerce a.button.wcboost-wishlist-button::before, .woocommerce button.button.wcboost-wishlist-button::before, a.button.wcboost-wishlist-button::after, .wcboost-wishlist-button::after, .wcboost-wishlist-button::before{content:none} /* --- il fumetto --- Misure di glozin (`.gz-tooltip--data::after`): 12px con interlinea 1, 7px 15px di respiro, fondo scuro, comparsa in 0,3s con un piccolo sollevamento. Sul pulsante dei preferiti il fumetto E' la sua etichetta: il plugin la riscrive da «Aggiungi alla lista dei desideri» a «Rimuovi dalla lista dei desideri» cambiando stato, e il fumetto segue da se'. Sull'occhio e' uno span decorativo. Sta centrato sul CONTENITORE dei due comandi, non sul singolo pulsante: «Aggiungi alla lista dei desideri» e' larga ~175px, e centrata su un pulsante da 45 che sta 25px fuori asse sborderebbe dalla foto, che ha `overflow:hidden` e la taglierebbe. */ .of-icone-prodotto .wcboost-wishlist-button__text, .of-icone-prodotto__fumetto{ position:absolute; inset-block-end:calc(100% + 10px); inset-inline-start:50%; z-index:3; padding:7px 15px; border-radius:var(--of-radius-sm); background:var(--wp--preset--color--dark); color:#fff; font-size:12px; font-weight:400; line-height:1; /* * `max-content` e' necessario, non un vezzo: ancorato a `left:50%`, lo * spazio disponibile per un elemento assoluto e' solo META' del * contenitore, quindi la larghezza automatica veniva 106px e la scritta * andava a capo. Con `max-content` prende la sua misura naturale, e il * `max-width` la limita al contenitore — così su una card stretta va a capo * invece di sbordare dalla foto, che la taglierebbe. */ width:max-content; max-width:100%; white-space:normal; text-align:center; opacity:0; pointer-events:none; transform:translate(-50%,6px); transition:opacity .3s,transform .3s; } .of-icone-prodotto .wcboost-wishlist-button:hover .wcboost-wishlist-button__text, .of-icone-prodotto .wcboost-wishlist-button:focus-visible .wcboost-wishlist-button__text, .of-icone-prodotto__rapida:hover .of-icone-prodotto__fumetto, .of-icone-prodotto__rapida:focus-visible .of-icone-prodotto__fumetto{ opacity:1; transform:translate(-50%,0); } @media(prefers-reduced-motion:reduce){ .of-icone-prodotto .wcboost-wishlist-button__text, .of-icone-prodotto__fumetto{transition:none;transform:translate(-50%,0)} } .of-foto .of-icone-prodotto .wcboost-wishlist-button__icon{ display:inline-flex; align-items:center; justify-content:center; flex:none; /* Il plugin gli mette `margin-right:.4em` per staccarla dall'etichetta: con l'etichetta nascosta quei 6px spostano il cuore fuori centro. */ margin:0; } /* * Dentro il ciclo prodotti c'e' una regola che il componente condiviso non * puo' battere: `.woocommerce ul.products li.product .button` di * woocommerce.css vale 0-4-2, e il pulsante dei desideri porta `button`. Gli * metteva `display:inline-block` e `margin-top:1em` — il contenitore veniva * alto 60 invece di 45, i due comandi si sfalsavano di 7,5px e l'icona finiva * nell'angolo invece che al centro. * * Il componente deve funzionare anche FUORI dal ciclo (in homepage quella * regola non c'e'), quindi non puo' portarsi dietro questa catena: si pareggia * qui, e solo sulle due proprieta' contese. Cinque classi e due elementi: * 0-5-2. */ ul.products li.of-card.product .of-foto .of-icone-prodotto > *{ display:inline-flex; margin:0; } @media(prefers-reduced-motion:reduce){ .of-icone-prodotto{transition:none} } /* ========================================================================== La finestra dello sguardo rapido `` nativo: il fuoco ci resta dentro da solo, Esc chiude da solo e il resto della pagina diventa inerte da solo. Qui si veste, non si reimplementa. Tutte le misure vengono dalla finestra del sito, misurata aperta: la scheda bianca e' 1050x525, la foto un quadrato da 525 che tocca i bordi, la colonna del testo 495 con 30px di respiro su tre lati (a sinistra no: li' c'e' il distacco di 30 dalla foto). ========================================================================== */ .of-rapida-finestra{ width:min(1050px, calc(100vw - 30px)); max-width:none; max-height:calc(100vh - 60px); padding:0; border:0; border-radius:15px; background:var(--wp--preset--color--background); color:var(--wp--preset--color--text); /* La foto arriva al bordo: senza questo gli angoli tondi non la tagliano. */ overflow:hidden; } .of-rapida-finestra::backdrop{background:rgb(0 0 0 / .5)} .of-rapida-finestra__chiudi{ position:absolute; inset-block-start:10px; inset-inline-end:10px; z-index:2; display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px; padding:0; border:0; border-radius:30px; background:var(--wp--preset--color--background); color:var(--wp--preset--color--dark); cursor:pointer; } .of-rapida-finestra__chiudi svg{width:13px;height:13px} .of-rapida-finestra__corpo{max-height:calc(100vh - 60px)} /* Un'altezza c'e' da subito, così la finestra non salta quando il contenuto arriva. */ .of-rapida-finestra--attesa .of-rapida-finestra__corpo{ min-height:525px; background:var(--wp--preset--color--surface); } /* * La finestra provvisoria: la foto che la card ha già in pagina, messa dentro * all'istante mentre la risposta arriva. E' piu' piccola del riquadro, quindi * ingrandita perde nitidezza: una velatura leggera la fa leggere come * «sto arrivando» invece che come una foto sgranata. Quando la risposta * entra, questa classe non c'e' piu'. */ .of-rapida--provvisoria .of-rapida__foto{ filter:blur(6px); transform:scale(1.04); } .of-rapida--provvisoria .of-rapida__corpo{background:var(--wp--preset--color--background)} @media(prefers-reduced-motion:reduce){ .of-rapida--provvisoria .of-rapida__foto{transform:none} } .of-rapida{ display:flex; gap:30px; min-height:525px; } /* La galleria: una fila che scorre con lo scatto, una foto per volta e 30px di distacco fra una e l'altra — le misure del sito (slide 525, passo 555). */ .of-rapida__media{ flex:0 0 525px; max-width:525px; overflow:hidden; } .of-rapida__fila{ display:flex; gap:30px; margin:0; padding:0; list-style:none; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; } .of-rapida__fila::-webkit-scrollbar{display:none} .of-rapida__foto-voce{ flex:0 0 100%; scroll-snap-align:start; } .of-rapida__foto, .of-rapida__media img{ display:block; width:100%; height:525px; object-fit:cover; } /* Il contatore «1 / 3»: come sul sito si vede solo dove le frecce sono sempre accese, cioe' da telefono. */ .of-rapida__conta{ position:absolute; inset-block-end:15px; inset-inline-end:15px; z-index:2; display:none; margin:0; padding:4px 10px; border-radius:30px; background:rgb(0 0 0 / .55); color:#fff; font-size:13px; line-height:1.2; } @media(max-width:1079px){ .of-rapida__conta{display:block} } .of-rapida__corpo{ flex:1 1 auto; min-width:0; /* Niente a sinistra: quel lato ha il distacco di 30 dalla foto. */ padding:30px 30px 30px 0; overflow-y:auto; } .of-rapida__nome{ margin:0 0 11px; font-size:26px; font-weight:600; line-height:1.21; color:var(--wp--preset--color--dark); } .of-rapida__prezzo{ margin:0; font-size:26px; font-weight:600; line-height:1; color:var(--wp--preset--color--dark); } .of-rapida__prezzo del{color:#666;font-weight:400;margin-inline-end:8px} .of-rapida__prezzo ins{text-decoration:none;color:var(--wp--preset--color--primary)} .of-rapida__stato--esaurito{ margin:10px 0 0; font-size:15px; color:var(--wp--preset--color--text-muted); } /* --- la riga dei comandi --- Quantita' + carrello + cuore, come sul sito: il pulsante si allarga a riempire, gli altri due tengono la loro misura. */ .of-rapida__azioni{ display:flex; flex-wrap:wrap; align-items:flex-end; gap:10px; margin-block-start:20px; } .of-rapida__quantita{ display:flex; align-items:center; flex:0 0 auto; width:130px; height:50px; border:1px solid var(--wp--preset--color--border); border-radius:var(--of-radius-sm); background:var(--wp--preset--color--surface); overflow:hidden; } .of-rapida__passo{ display:inline-flex; align-items:center; justify-content:center; flex:0 0 45px; width:45px; height:100%; padding:0; border:0; background:none; color:var(--wp--preset--color--dark); cursor:pointer; } .of-rapida__qta{ flex:1 1 auto; width:38px; min-width:0; height:100%; padding:0; border:0; background:none; color:var(--wp--preset--color--dark); font-size:14px; text-align:center; appearance:textfield; -moz-appearance:textfield; } /* Le frecce del campo numerico non servono: ci sono i due pulsanti. */ .of-rapida__qta::-webkit-outer-spin-button, .of-rapida__qta::-webkit-inner-spin-button{appearance:none;margin:0} /* * `.of-rapida__aggiungi` e non `.button`: il pulsante dei desideri porta anche * lui la classe `button`, e con `.button` queste regole lo vestivano da * pulsante del carrello — cerchio nero, e la regola sull'SVG gli spegneva * l'icona. E' la terza volta che quella classe inganna: qui e sulle due * icone della card. * * Tre classi perche' `.woocommerce a.button` di woocommerce.css, con la sua * `a`, vince su due sole. */ .of-rapida .of-rapida__azioni .of-rapida__aggiungi{ display:inline-flex; align-items:center; justify-content:center; flex:1 1 auto; height:50px; margin:0; padding:16.5px 20px; border:1px solid var(--wp--preset--color--dark); border-radius:var(--of-radius-bottone); background:var(--wp--preset--color--dark); color:#fff; font-size:15px; font-weight:600; line-height:1; letter-spacing:-0.024em; text-align:center; text-decoration:none; cursor:pointer; transition:background .25s,border-color .25s; } .of-rapida .of-rapida__azioni .of-rapida__aggiungi:hover{ background:var(--wp--preset--color--primary); border-color:var(--wp--preset--color--primary); color:var(--of-testo-su-primario,#fff); } .of-rapida .of-rapida__azioni .of-rapida__aggiungi svg{display:none} .of-rapida .of-rapida__azioni .added_to_cart{display:none} /* Il cuore: tondo, vuoto, col filo di bordo. */ .of-rapida__cuore{flex:0 0 auto} .of-rapida .of-rapida__cuore .wcboost-wishlist-button{ display:inline-flex; align-items:center; justify-content:center; gap:0; width:50px; height:50px; margin:0; padding:0; border:1px solid var(--wp--preset--color--border); border-radius:30px; background:none; color:var(--wp--preset--color--dark); } .of-rapida .of-rapida__cuore .wcboost-wishlist-button:hover{border-color:var(--wp--preset--color--dark)} /* Lo stato lo dice il disegno; al passaggio si inverte come nelle card. */ .of-rapida .of-rapida__cuore .wcboost-wishlist-button{transition:background .25s,color .25s,border-color .25s} .of-rapida .of-rapida__cuore .wcboost-wishlist-button:hover{ background:var(--wp--preset--color--dark); border-color:var(--wp--preset--color--dark); color:#fff; } .of-rapida .of-rapida__cuore .wcboost-wishlist-button__icon{ display:inline-flex; align-items:center; justify-content:center; flex:none; margin:0; } .of-rapida .of-rapida__cuore .wcboost-wishlist-button__icon svg{width:16px;height:16px} /* Come nella card: dentro il pulsante si vede solo l'icona, qualunque cosa il plugin ci scriva cambiando stato. */ .of-rapida .of-rapida__cuore .wcboost-wishlist-button > *:not(.wcboost-wishlist-button__icon){ position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); border:0; } .of-rapida__testo{ margin-block-start:20px; font-size:16px; line-height:1.7; color:var(--wp--preset--color--text); } .of-rapida__testo p{margin:0} .of-rapida__testo p + p{margin-block-start:.8em} /* * Misure del sito: 15px/600 con interlinea 15 e crenatura -0,36px, 5px di * distacco dall'icona, e `padding-bottom:3px` — quei tre pixel sono lo spazio * per la sottolineatura, che al passaggio cresce da zero a tutta la larghezza * in 0,25s. Senza crenatura il testo veniva 10px piu' largo. */ .of-rapida__vedi{ position:relative; display:inline-flex; align-items:center; gap:5px; margin-block-start:21px; padding:0 0 3px; font-size:15px; font-weight:600; line-height:1; letter-spacing:-0.024em; color:var(--wp--preset--color--dark); text-decoration:none; } /* * La riga che cresce sotto «Visualizza tutti i dettagli». * * Si anima `transform`, non `width`: su una riga da 1px il risultato a schermo * e' lo stesso, ma `width` fa ricalcolare l'impaginazione a ogni fotogramma * mentre `scaleX` lavora sul solo compositore. La riga e' già larga quanto il * link e parte schiacciata a zero da sinistra. */ .of-rapida__vedi::after{ content:''; position:absolute; inset-block-end:0; inset-inline-start:0; width:100%; height:1px; background:var(--wp--preset--color--primary); transform:scaleX(0); transform-origin:left center; transition:transform .25s; } .of-rapida__vedi:hover, .of-rapida__vedi:focus-visible{color:var(--wp--preset--color--primary)} .of-rapida__vedi:hover::after, .of-rapida__vedi:focus-visible::after{transform:scaleX(1)} @media(prefers-reduced-motion:reduce){ .of-rapida__vedi::after{transition:none} } /* La doppia freccia punta a destra: il disegno e' un doppio chevron verso l'alto (viewBox 8x10), e un quarto di giro lo manda dove deve andare. */ .of-rapida__vedi svg{ width:11px; height:11px; flex:none; transform:rotate(90deg); } .of-rapida__errore{ padding:40px 30px; text-align:center; font-size:16px; color:var(--wp--preset--color--text); } /* Sotto i 1080 la finestra non regge due colonne: la foto va sopra. */ @media(max-width:1079px){ .of-rapida{flex-direction:column;gap:0;min-height:0} .of-rapida__media{flex:0 0 auto;max-width:none} .of-rapida__foto, .of-rapida__media img{height:auto;aspect-ratio:1} .of-rapida__fila{gap:0} .of-rapida__corpo{padding:20px} .of-rapida__nome{font-size:20px} .of-rapida__prezzo{font-size:22px} .of-rapida-finestra--attesa .of-rapida-finestra__corpo{min-height:320px} } @media(max-width:479px){ .of-rapida__azioni{gap:10px} .of-rapida .of-rapida__azioni .of-rapida__aggiungi{flex:1 1 100%;order:3} } /* ============================================================ Il pulsante «torna su» Misure del sito (glozin, `#gotop`): 50x50, tondo, fondo bianco con l'ombra laterale dei comandi, a 30 dal bordo destro e 56 dal fondo — cioe' 10 sopra la barra mobile da 46, anche dove la barra non c'e'. La doppia freccia e' 8x10, bianca in `mix-blend-mode:difference`: nera sul bianco, bianca sul nero del riempimento che sale con lo scorrimento. ============================================================ */ .of-torna-su{ --of-scorso:0%; position:fixed; inset-inline-end:30px; inset-block-end:56px; z-index:9; display:flex; align-items:center; justify-content:center; width:50px; height:50px; overflow:hidden; border-radius:50%; background:#fff; box-shadow:5px 0 30px rgb(0 0 0 / .08); color:#fff; transition:transform .25s,opacity .25s,visibility .25s; } /* Nascosto solo se lo script c'e' e dice che siamo in cima. */ .of-torna-su[data-of-nascosto]{transform:scale(0);opacity:0;visibility:hidden} .of-torna-su__riempimento{ position:absolute; inset-inline:0; inset-block-end:0; height:var(--of-scorso); background:var(--wp--preset--color--dark,#111); } .of-torna-su svg{ position:relative; inset-inline-start:1px; width:8px; height:10px; mix-blend-mode:difference; } .of-torna-su:focus-visible{outline:2px solid var(--wp--preset--color--dark,#111);outline-offset:3px} @media(prefers-reduced-motion:reduce){.of-torna-su{transition:none}} /* ============================================================ Lo spazio prima del footer Sul sito e' di `.site-content` (padding-bottom 90) e vale per OGNI pagina: contenuto finito, 90px, footer. Prima ogni modello se lo metteva da se' — il catalogo si', la homepage, la scheda prodotto, Privacy e il blog no — e il footer arrivava a ridosso del contenuto. ============================================================ */ .of-main{padding-block-end:90px} /* Sul telefono il sito lascia 50 fra il contenuto e il pie' (90 da 768 in su): misurato sulla homepage, sul carrello e sul profilo a 375. */ @media (max-width:767px){.of-main{padding-block-end:50px}} /* ============================================================ La Lista dei desideri vuota, come sul sito (glozin): una riga di testo al centro, senza riquadro d'avviso, e il pulsante nero «Torna allo Shop» largo almeno 200, 20 sotto; 40 fra la lista e quel che segue. ============================================================ */ .wcboost-wishlist .wishlist-empty .woocommerce-info{ margin:0; padding:0; border:0; background:none; box-shadow:none; color:#907341; font-weight:500; } .wcboost-wishlist .wishlist-empty .woocommerce-info::before, .wcboost-wishlist .wishlist-empty .woocommerce-info::after{content:none;display:none} .of-preferiti__vuota{margin:16px 0 0;font-size:16px;font-weight:400;line-height:27.424px;text-align:center;color:var(--wp--preset--color--text)} .wcboost-wishlist .return-to-shop{margin:10px 0 16px;text-align:center} .woocommerce a.button.of-preferiti__torna, .of-preferiti__torna{ display:inline-flex; align-items:center; justify-content:center; min-width:200px; margin:20px 0 0; padding:17px 30px; border:1px solid #111; border-radius:30px; background:#111; color:#fff; font-size:15px; font-weight:600; line-height:15px; letter-spacing:-0.024em; text-decoration:none; transition:all .25s; } .woocommerce a.button.of-preferiti__torna:hover, .of-preferiti__torna:hover{background:var(--wp--preset--color--primary);border-color:var(--wp--preset--color--primary);color:#fff} .wcboost-wishlist .wcboost-wishlist-footer{margin:40px 0 0} /* La lista piena mette in fondo «Modifica la lista»: sul sito glozin la nasconde. */ .wcboost-wishlist-edit-link-wrapper{display:none} /* ========================================================================== La lista dei desideri piena (woocommerce/wishlist/wishlist-table.php) Una griglia di card come quella del catalogo, con le differenze di glozin: la croce per togliere in alto a destra, lo sguardo rapido sotto la croce, il corpo centrato con stelle e disponibilita', il pulsante col filo da 1px e 10 sopra. Misurata sul sito a 1512, 1024 e 375 con una lista riempita in memoria. Il nome, il prezzo, la foto e le etichette sono quelli della card (regole `ul.products li.of-card.product` qui sopra). ========================================================================== */ ul.products.of-preferiti-griglia{ display:flex; flex-wrap:wrap; margin:0 -15px; padding:0; list-style:none; } ul.products.of-preferiti-griglia > li.of-card{width:25%;margin:0 0 30px;padding:0 15px} @media(max-width:1199px){ ul.products.of-preferiti-griglia > li.of-card{width:33.3333%} } @media(max-width:767px){ ul.products.of-preferiti-griglia{margin:0 -7.5px} ul.products.of-preferiti-griglia > li.of-card{width:50%;padding:0 7.5px} } /* La croce: 45x45 a 15 dai bordi, bianca, disegno 11. */ .of-preferiti__togli{position:absolute;inset-block-start:15px;inset-inline-end:15px;z-index:3;display:flex} ul.products.of-preferiti-griglia li.of-card.product .of-preferiti__togli a.remove, ul.products.of-preferiti-griglia li.of-card.product .of-preferiti__comandi a.of-preferiti__rapida{ display:inline-flex; align-items:center; justify-content:center; width:45px; height:45px; margin:0; padding:0; border:0; border-radius:var(--of-radius-icona-card,var(--of-radius-sm)); background:var(--wp--preset--color--background); color:var(--wp--preset--color--dark); font-size:15px; line-height:1; text-decoration:none; transition:background .25s,color .25s; } ul.products.of-preferiti-griglia li.of-card.product .of-preferiti__togli a.remove:hover, ul.products.of-preferiti-griglia li.of-card.product .of-preferiti__comandi a.of-preferiti__rapida:hover{ background:var(--wp--preset--color--dark); color:#fff; } /* woocommerce.css vuole `a.remove` rosso, con !important: e' la croce della tabella del carrello. Qui e' nera come sul sito, e bianca al passaggio. */ .woocommerce ul.products.of-preferiti-griglia .of-preferiti__togli a.remove, ul.products.of-preferiti-griglia .of-preferiti__togli a.remove{color:var(--wp--preset--color--dark)!important;font-weight:600} .woocommerce ul.products.of-preferiti-griglia .of-preferiti__togli a.remove:hover, ul.products.of-preferiti-griglia .of-preferiti__togli a.remove:hover{color:#fff!important} .of-preferiti__togli svg{width:11px;height:11px} .of-preferiti__rapida svg{width:15px;height:15px} /* Lo sguardo rapido: 65 dall'alto e 15 da destra, entra da destra al passaggio del mouse. Il carrello in piccolo qui non si vede. */ .of-preferiti__comandi{ position:absolute; inset-block-start:65px; inset-inline-end:15px; z-index:2; display:flex; flex-direction:column; gap:5px; opacity:0; transform:translateX(20px); transition:opacity .5s,transform .5s; pointer-events:none; } .of-preferiti__comandi > *{pointer-events:auto} .of-foto:hover .of-preferiti__comandi, .of-foto:focus-within .of-preferiti__comandi{opacity:1;transform:none} ul.products.of-preferiti-griglia li.of-card.product .of-preferiti__comandi .of-preferiti__carrello{display:none} /* * Sotto i 1200 (il «telefono» delle card di glozin): croce 35x35 a 10 dai * bordi; i comandi si vedono sempre, in basso a destra a 10, e al posto dello * sguardo rapido (spento dall'opzione Mobile) c'e' il carrello in piccolo: * 35x35, filo #ebebeb, vuoto come sul sito. */ @media(max-width:1199px){ .of-preferiti__togli{inset-block-start:10px;inset-inline-end:10px} ul.products.of-preferiti-griglia li.of-card.product .of-preferiti__togli a.remove{width:35px;height:35px} .of-preferiti__togli svg{position:relative;inset-block-start:1px} .of-preferiti__comandi{inset-block:auto 10px;inset-inline-end:10px;opacity:1;transform:none} ul.products.of-preferiti-griglia.of-preferiti--senza-rapida li.of-card.product .of-preferiti__comandi a.of-preferiti__rapida{display:none} ul.products.of-preferiti-griglia li.of-card.product .of-preferiti__comandi .of-preferiti__carrello{ display:inline-flex; width:35px; height:35px; min-height:0; margin:0; padding:0; border:1px solid var(--wp--preset--color--border); border-radius:var(--of-radius-icona-card,var(--of-radius-sm)); background:none; align-items:center; justify-content:center; color:var(--wp--preset--color--dark); } /* L'icona del carrello (sul sito il quadrato e' vuoto: qui, per scelta, no). */ ul.products.of-preferiti-griglia li.of-card.product .of-preferiti__carrello .of-icona, ul.products.of-preferiti-griglia li.of-card.product .of-preferiti__carrello svg{display:block;width:15px;height:15px;margin:0} } @media(prefers-reduced-motion:reduce){ .of-preferiti__comandi{transition:none} } /* Il corpo, centrato. */ ul.products.of-preferiti-griglia li.of-card.product .of-preferiti__corpo{ display:flex; flex-direction:column; align-items:center; text-align:center; } ul.products.of-preferiti-griglia li.of-card.product .of-preferiti__corpo .of-card__titolo{max-width:100%} ul.products.of-preferiti-griglia li.of-card.product .of-preferiti__corpo .of-card__prezzo{justify-content:center;align-items:center} /* Il prezzo barrato su interlinea normale (18,5 invece di 16,8): con uno sconto la riga del prezzo e' alta 18,5, come sul sito. */ ul.products.of-preferiti-griglia li.of-card.product .of-preferiti__corpo .of-card__prezzo del, ul.products.of-preferiti-griglia li.of-card.product .of-preferiti__corpo .of-card__prezzo del .amount{line-height:normal} /* Cinque stelle grigie da 10, 1 fra l'una e l'altra, 5 sotto il nome. */ .of-preferiti__stelle{display:flex;align-items:flex-start;height:11.5px;margin:5px 0 0} .of-preferiti__stelle-vuote{display:flex;gap:1px;color:#c4c4c4} .of-preferiti__stelle-vuote svg{display:block;width:10px;height:10px} .of-preferiti__stelle .star-rating{margin:0;font-size:10px} /* La disponibilita': icona di glozin, verde o grigia, 8 prima del testo. */ .of-preferiti__disponibile{margin:10px 0 0;font-size:16px;line-height:1.714} .of-preferiti__disponibile .in-stock, .of-preferiti__disponibile .available-on-backorder, .of-preferiti__disponibile .out-of-stock{display:inline-flex;align-items:flex-end;gap:8px;line-height:1;color:#4bae4f} .of-preferiti__disponibile .available-on-backorder{color:#55a653} .of-preferiti__disponibile .out-of-stock{color:#a5a5a5} .of-preferiti__disponibile .in-stock::before, .of-preferiti__disponibile .available-on-backorder::before, .of-preferiti__disponibile .out-of-stock::before{ content:""; display:inline-block; width:16px; height:16px; background:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik04IDBDMy41ODc1IDAgMCAzLjU4NzUgMCA4QzAgMTIuNDEyNSAzLjU4NzUgMTYgOCAxNkMxMi40MTI1IDE2IDE2IDEyLjQxMjUgMTYgOEMxNiAzLjU4NzUgMTIuNDEyNSAwIDggMFoiIGZpbGw9IiM0QkFFNEYiLz4KPHBhdGggZD0iTTYuNDU5MzcgMTEuNjU5NEM1LjQzNzUgMTAuNjM3NSA0LjQyMTg4IDkuNjA2MjUgMy4zOTY4NyA4LjU4NDM4QzMuMjg0MzcgOC40NzE4OCAzLjI4NDM3IDguMjg0MzggMy4zOTY4NyA4LjE3MTg4TDQuNTc1IDYuOTkzNzVDNC42ODc1IDYuODgxMjUgNC44NzUgNi44ODEyNSA0Ljk4NzUgNi45OTM3NUw2LjY3MTg4IDguNjc4MTNMMTEuMDAzMSA0LjM0Mzc1QzExLjExODggNC4yMzEyNSAxMS4zMDMxIDQuMjMxMjUgMTEuNDE4NyA0LjM0Mzc1TDEyLjYgNS41MjVDMTIuNzE1NiA1LjY0MDYyIDEyLjcxNTYgNS44MjUgMTIuNiA1LjkzNzVMNi44NzE4NyAxMS42NTk0QzYuNzU5MzcgMTEuNzc1IDYuNTc1IDExLjc3NSA2LjQ1OTM3IDExLjY1OTRaIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K") no-repeat center; } .of-preferiti__disponibile .out-of-stock::before{background-image:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTggMEMzLjYwMzEzIDAgMCAzLjYwMzEzIDAgOEMwIDEyLjM5NjkgMy42MDMxMyAxNiA4IDE2QzEyLjM5NjkgMTYgMTYgMTIuMzk2OSAxNiA4QzE2IDMuNjAzMTMgMTIuMzk2OSAwIDggMFpNMi43NTAwMyAxMS4wNzVDMi4yMTU2NiAxMC4xNzUgMS45MDYyNSA5LjEyNSAxLjkwNjI1IDhDMS45MDYyNSA0LjY1MzEyIDQuNjA2MjUgMS45MTU2MiA3Ljk4MTIyIDEuOTA2MjVDOS4xMTU2MyAxLjkwNjI1IDEwLjE2NTYgMi4yMTU1OSAxMS4wNzUgMi43NDk5N0MxMS4zNDY4IDIuOTA5MzcgMTEuNDAzMSAzLjI2NTYyIDExLjE4NzUgMy40OTA2MkwzLjQ5MDYyIDExLjE4NzVDMy4yNjU2MiAxMS40MDMxIDIuOTA5MzcgMTEuMzQ2OSAyLjc1MDAzIDExLjA3NVpNOC4wMTg3OCAxNC4wOTM4QzYuODg0MzggMTQuMDkzOCA1LjgzNDM4IDEzLjc4NDMgNC45MjUgMTMuMjVDNC42NTMxNiAxMy4wOTA2IDQuNTk2OTEgMTIuNzI1IDQuODIxODggMTIuNTA5NEwxMi41MDk0IDQuODIxODhDMTIuNzI1IDQuNTk2ODggMTMuMDkwNiA0LjY1MzEzIDEzLjI1IDQuOTI1QzEzLjc4NDMgNS44MjUgMTQuMDkzOCA2Ljg3NSAxNC4wOTM4IDhDMTQuMDkzOCAxMS4zNjU2IDExLjM3NSAxNC4wODQ0IDguMDE4NzggMTQuMDkzOFoiIGZpbGw9IiNBNUE1QTUiLz4KPC9zdmc+Cg==")} /* Il pulsante: largo quanto la card, filo da 1px (nella card del catalogo sono 2), 10 sopra, 16,5 di respiro in alto e in basso. */ ul.products.of-preferiti-griglia li.of-card.product .of-card__carrello-sotto{width:100%} ul.products.of-preferiti-griglia li.of-card.product .of-card__corpo .button{ margin:10px 0 0; padding:16.5px 20px; border-width:1px; } /* I 10 sopra glozin li da' solo al pulsante del carrello: «Non disponibile» (esaurito) resta ai 20 della card, e la riga si allunga di 10. */ ul.products.of-preferiti-griglia li.of-card.product .of-card__corpo .button:not(.add_to_cart_button){margin-top:20px} /* ============================================================ La testata di glozin: briciole, titolo e descrizione centrati. Pagine, profilo, blog, negozio: inc/testate.php. Misurata sul sito (/profilo/ e /privacy-policy/ a 1512px): 80 sopra, 10 sotto, briciole 14px, titolo 32px/600 Bricolage 8 sotto le briciole; poi il contenuto comincia 54 piu' giu' e finisce con 90. Su telefono 60 sopra, e 30/50. ============================================================ */ .of-testata-pagina--centrata{position:relative} /* Due classi: pagina.css (caricato dopo) scrive 35/30 per `.of-testata-pagina > .of-contenitore`, allo stesso peso di una. */ .of-testata-pagina.of-testata-pagina--centrata > .of-contenitore{ position:relative; display:flex; flex-direction:column; align-items:center; padding-block:80px 10px; text-align:center; } .of-testata-pagina--centrata .of-briciole{ justify-content:center; color:var(--wp--preset--color--dark); line-height:1.714; /* 24 / 14 */ } .of-testata-pagina--centrata .of-briciole a{color:var(--wp--preset--color--text-muted)} .of-testata-pagina--centrata .of-briciole__punto{width:19px;color:var(--wp--preset--color--text-muted)} .of-testata-pagina--centrata .of-testata-pagina__titolo{ margin:8px 0 0; font-family:var(--wp--preset--font-family--titoli); font-size:32px; font-weight:600; line-height:1.21; /* 38,72 / 32 */ letter-spacing:-.034em; /* -1,088 */ color:var(--wp--preset--color--dark); } /* La descrizione, tagliata alle righe scelte (5 di serie, come glozin). */ .of-testata-pagina--centrata .of-testata-pagina__descrizione{ max-width:760px; margin-top:10px; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:var(--of-testata-righe,5); overflow:hidden; } .of-testata-pagina--centrata .of-testata-pagina__descrizione p{margin:0 0 10px} .of-testata-pagina--centrata .of-testata-pagina__descrizione p:last-child{margin-bottom:0} .of-testata-pagina--centrata + .of-pagina__contenuto{padding-block:54px 0} @media(max-width:767px){ .of-testata-pagina.of-testata-pagina--centrata > .of-contenitore{padding-top:60px} .of-testata-pagina--centrata + .of-pagina__contenuto{padding-block:30px 0} } /* ============================================================ Negozio → Scheda nel catalogo: le varianti del pannello (inc/negozio-opzioni.php). Di serie nessuna di queste si attiva: la card resta quella misurata sul sito (modello 2). ============================================================ */ /* Allineamento del testo sotto la foto. */ ul.products.of-card--centro li.of-card .of-card__corpo{display:flex;flex-direction:column;align-items:center;text-align:center} ul.products.of-card--centro li.of-card .of-card__prezzo{justify-content:center} ul.products.of-card--destra li.of-card .of-card__corpo{display:flex;flex-direction:column;align-items:flex-end;text-align:end} ul.products.of-card--destra li.of-card .of-card__prezzo{justify-content:flex-end} ul.products.of-card--centro li.of-card .of-card__carrello-sotto, ul.products.of-card--destra li.of-card .of-card__carrello-sotto{width:100%} /* Categoria sopra il nome, stelle, attributo principale. */ .of-card__tassonomia{ display:inline-block;margin-block-end:5px; font-size:13px;color:var(--wp--preset--color--text-muted);text-decoration:none; } .of-card__tassonomia:hover{color:var(--wp--preset--color--primary)} .of-card__stelle{margin-block-start:6px;font-size:12px;line-height:1} .of-card__stelle .star-rating{float:none;margin:0} .of-card__stelle-vuote{color:#c4c4c4;letter-spacing:2px} .of-card__attributo{display:flex;flex-wrap:wrap;gap:5px;margin:10px 0 0;padding:0;list-style:none} .of-card__attributo li{ padding:2px 8px;border:1px solid var(--wp--preset--color--border);border-radius:30px; font-size:12px;line-height:1.5;color:var(--wp--preset--color--text); } /* La descrizione breve: solo nella vista a elenco, alle righe scelte. */ .of-card__breve{display:none} .of-catalogo--elenco .of-card__breve{ display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden; -webkit-line-clamp:var(--of-breve-computer,3); margin:10px 0 0;font-size:14px;line-height:1.714;color:var(--wp--preset--color--text); } @media(max-width:1199px){.of-catalogo--elenco .of-card__breve{-webkit-line-clamp:var(--of-breve-tablet,2)}} @media(max-width:767px){.of-catalogo--elenco .of-card__breve{-webkit-line-clamp:var(--of-breve-telefono,3)}} /* Modello 1: il carrello sulla foto, al passaggio; le icone in colonna in alto a destra. */ .of-card__carrello-foto{display:none} ul.products.of-card-modello-1 li.of-card .of-card__carrello-foto{ position:absolute;inset-inline:15px;inset-block-end:15px;z-index:3; display:block;opacity:0;transform:translateY(20px); transition:opacity .5s,transform .5s; } ul.products.of-card-modello-1 li.of-card .of-card__carrello-foto .button{ display:flex;align-items:center;justify-content:center; width:100%;min-height:45px;margin:0;padding:0 15px; border:0;border-radius:var(--of-radius-bottone); background:var(--wp--preset--color--background);color:var(--wp--preset--color--dark); font-size:14px;font-weight:600;text-decoration:none; } ul.products.of-card-modello-1 li.of-card .of-card__carrello-foto .button:hover{background:var(--wp--preset--color--dark);color:#fff} ul.products.of-card-modello-1 li.of-card .of-card__carrello-foto .button svg, ul.products.of-card-modello-1 li.of-card .of-card__carrello-foto .added_to_cart{display:none} ul.products.of-card-modello-1 li.of-card .of-icone-prodotto{ inset-block:15px auto;inset-inline:auto 15px;flex-direction:column; } ul.products.of-card-modello-1 li.of-card .of-card__carrello-sotto--telefono{display:none} @media(min-width:1025px) and (hover:hover){ ul.products.of-card-modello-1 li.of-card .of-foto:hover .of-card__carrello-foto, ul.products.of-card-modello-1 li.of-card .of-foto:focus-within .of-card__carrello-foto{opacity:1;transform:none} } @media(hover:none),(max-width:1024px){ ul.products.of-card-modello-1 li.of-card .of-card__carrello-foto{display:none} ul.products.of-card-modello-1.of-prodotti--telefono-carrello li.of-card .of-card__carrello-sotto--telefono{display:block} } /* «Mostra sempre» il cuore (solo modello 1). */ ul.products.of-card--cuore-fisso li.of-card .of-icone-prodotto{opacity:1;transform:none} ul.products.of-card--cuore-fisso li.of-card .of-icone-prodotto__rapida{opacity:0;transition:opacity .5s} ul.products.of-card--cuore-fisso li.of-card .of-foto:hover .of-icone-prodotto__rapida{opacity:1} /* Mobile → Catalogo e Scheda nel catalogo. Le colonne sotto i 768; i comandi sulla foto sotto i 1200, come fa glozin. Le regole dei comandi devono battere `ul.products li.of-card.product .of-foto .of-icone-prodotto > *` (0-5-2), che li rimette in `inline-flex`. */ @media(max-width:767px){ .of-catalogo ul.of-prodotti.products.of-prodotti--telefono-1 > li.of-card, ul.products.of-prodotti--telefono-1 > li.of-card{width:100%} } @media(max-width:1199px){ ul.products.of-prodotti--telefono-senza-icone li.of-card .of-icone-prodotto{display:none} ul.products.of-prodotti--telefono-senza-cuore li.of-card.product .of-foto .of-icone-prodotto > .wcboost-wishlist-button{display:none} ul.products.of-prodotti--telefono-senza-rapida li.of-card.product .of-foto .of-icone-prodotto > .of-icone-prodotto__rapida{display:none} } /* L'avviso dopo un'aggiunta ai preferiti (Negozio → Notifiche). */ .of-avviso-volante{ position:fixed;inset-block-end:20px;inset-inline-end:20px;z-index:120; display:flex;align-items:center;gap:15px; max-width:min(360px,calc(100vw - 40px));padding:15px 20px; border-radius:var(--of-radius-sm); background:var(--wp--preset--color--dark);color:#fff; font-size:14px;box-shadow:0 10px 30px rgb(0 0 0 / .15); opacity:0;transform:translateY(10px);transition:opacity .3s,transform .3s; } .of-avviso-volante[data-of-visibile]{opacity:1;transform:none} .of-avviso-volante a{color:#fff;text-decoration:underline} @media(prefers-reduced-motion:reduce){.of-avviso-volante{transition:none}}