/* Theme Name: Bricks Child Theme Theme URI: https://bricksbuilder.io/ Description: Use this child theme to extend Bricks. Author: Bricks Author URI: https://bricksbuilder.io/ Template: bricks Version: 1.1 Text Domain: bricks */ /* ------------------------------------------------------------------------- Frecce ↘ in overhang — classi globali Bricks `.arrow` / `.arrow-pink`. Le due classi disegnano la freccia in `::before` con `position:absolute; left:-5rem`, quindi servono 5rem di margine a sinistra del titolo. Il container Bricks è `width:95%; max-width:1240px`, così il margine laterale vale 5rem solo da ~1340px in su: sotto (es. 1280×440) le frecce della colonna di sinistra finiscono fuori dal viewport e vengono tagliate. Il design XD è a 1440px, dove il margine è 100px. Si agisce solo sul container: le `.brxe-section` restano a tutta larghezza, quindi gli sfondi (rosa, crema, azzurro, hero) continuano a occupare tutto il viewport a ogni risoluzione — nessuna banda bianca laterale. Nota sulla specificità: le classi globali Bricks sono stampate inline in fondo al , dopo questo foglio di stile, quindi le regole qui sotto sono prefissate con `body` per vincere a parità di ordine. ------------------------------------------------------------------------- */ :root { /* Margine laterale minimo: overhang della freccia (5rem = 50px, il tema usa root font-size 62.5%) più un po' d'aria. */ --spuma-gutter-min: 6rem; } @media (min-width: 768px) { body .brxe-container { /* Sotto i 1360px vince il secondo termine (margine fisso 6rem); da lì in su continua a valere il max-width:1240px del tema, che lascia già margini ≥ 6rem — a 1440px il layout resta identico. */ width: min(95%, 100% - var(--spuma-gutter-min) * 2); } } /* Sotto i 768px riservare 6rem per lato lascerebbe troppo poco al testo: la freccia esce dal posizionamento assoluto e si mette sopra al titolo. */ @media (max-width: 767px) { body .arrow::before, body .arrow-pink::before { position: static; /* senza position:absolute il ::before torna inline e ignora width/height: va riportato esplicitamente a block. */ display: block; margin-bottom: 0.5rem; } } /* ------------------------------------------------------------------------- Anello azzurro attorno a logo e hamburger dopo il tap (mobile). Il tema non definisce alcuno stile :focus, quindi vale la regola di default del browser (:focus-visible { outline: auto }). Con outline:auto WebKit disegna il suo anello di focus nativo azzurrino ignorando il colore dichiarato, e dopo un tap il focus resta sull'elemento (a differenza dell'hover): da qui il bordo persistente attorno a logo e hamburger. - Il primo blocco spegne l'outline quando il focus non arriva da tastiera (tap/mouse), che è l'uso legittimo di :focus:not(:focus-visible). - Il secondo dà a chi naviga da tastiera un anello ben visibile nel rosa del brand, sostituendo quello nativo (azzurro su Safari) ovunque. - Il terzo, solo su dispositivi touch, toglie ogni outline dai controlli dell'header: su iOS vecchi il tap può comunque far scattare :focus-visible e l'anello tornerebbe. - Il tap-highlight (il flash grigio-azzurro al tap su Android) resta un feedback ridondante ora che i menu sono ben visibili: lo si spegne sui controlli dell'header. ------------------------------------------------------------------------- */ a:focus:not(:focus-visible), button:focus:not(:focus-visible), [tabindex]:focus:not(:focus-visible) { outline: none; } body :is(a, button, [tabindex]):focus-visible { outline: 2px solid var(--bricks-color-yjvagp, #d94696); outline-offset: 2px; } @media (hover: none) and (pointer: coarse) { body #brx-header :is(a, button):focus, body #brx-header :is(a, button):focus-visible { outline: none; -webkit-tap-highlight-color: transparent; } } /* ------------------------------------------------------------------------- Pagine senza layout Bricks (Privacy Policy, Cookie Policy). Bricks le rende come
figlio diretto del body: senza spaziatura il titolo finirebbe sotto l'header, che è in position:fixed. ------------------------------------------------------------------------- */ /* La larghezza resta quella del container del sito (#brx-content, 1240px). */ body.page-template-default > article { padding: 20rem 3rem 12rem; } body.page-template-default > article h1 { color: var(--bricks-color-yjvagp, #d94696); font-weight: 300; text-transform: uppercase; font-size: 8rem; line-height: 0.9; margin-bottom: 4rem; } body.page-template-default > article h2 { color: var(--bricks-color-yjvagp, #d94696); font-weight: 400; font-size: 3.2rem; line-height: 1.1; margin-top: 6rem; margin-bottom: 1.5rem; } body.page-template-default > article h3 { color: var(--bricks-color-lfiyog, #d95e97); font-weight: 500; font-size: 2.2rem; line-height: 1.2; margin-top: 3rem; margin-bottom: 1rem; } body.page-template-default > article :is(p, ul, ol) { margin-bottom: 1.6rem; } body.page-template-default > article :is(ul, ol) { padding-left: 2.5rem; } body.page-template-default > article li { margin-bottom: 0.6rem; } body.page-template-default > article a { color: var(--bricks-color-yjvagp, #d94696); text-decoration: underline; } @media (max-width: 767px) { body.page-template-default > article { padding: 16rem 2rem 8rem; } body.page-template-default > article h1 { font-size: 5.5rem; } } /* ------------------------------------------------------------------------- Immagini delle gallerie a tutta larghezza senza link (es. Servizi). In Bricks un elemento image con un link viene reso come `` (flex item che si riduce per stare in riga). Senza link invece viene renderizzato un `` figlio diretto della sezione: essendo un elemento replaced, `min-width:auto` lo impedisce di scendere sotto la larghezza intrinseca (qui 1024px), quindi le tre foto della galleria non rientrano nella riga e risultano enormi. Gli elementi con link, invece, hanno la classe `brxe-image` sul wrapper ``, non sull'immagine: il selettore `section > img.brxe-image` colpisce solo le immagini senza wrapper, lasciando intatte le altre. ------------------------------------------------------------------------- */ body .brxe-section > img.brxe-image { min-width: 0; max-width: 100%; width: 100%; height: auto; } /* Le gallerie possono ora contenere righe miste: nella pagina Servizi le tre foto di Social Media Strategy (che linkano il singolo post Instagram) sono state ridistribuite tra righe di immagini senza link. Un elemento con link è reso come ``: la sua base flessibile è la larghezza intrinseca dell'immagine (1024px), mentre un `` senza link ha base 100% della sezione per la regola qui sopra. In una riga mista la riduzione proporzionale dell'eccedenza dividerebbe quindi lo spazio in parti disuguali (≈377px l'ancora, ≈524px le immagini). Dando a tutte le immagini figlie dirette di sezione la stessa base (100%), ognuna prende un terzo uguale della riga sia che abbia link sia che non l'abbia. Le righe omogenee già esistenti (le gallerie linkate delle case history, le immagini a piena larghezza di Magazine e Contatti) restano identiche: tre basi uguali si dividono lo spazio come prima, e un'immagine sola occupa da sola tutta la riga come farebbe con width 100%. */ body .brxe-section > a.brxe-image { flex: 0 1 100%; min-width: 0; } /* ------------------------------------------------------------------------- Copertine Instagram della Home (blocco "Le ultime novità da Instagram"). Le tre foto sono verticali (sorgenti 3:4) ma l'elemento Bricks impone aspect-ratio: 1 sull'ancora: con l'object-fit di default del browser (fill) l'immagine viene stirata in orizzontale invece che ritagliata. Bricks dà già all' width/height 100%, ma con :where() (specificità zero): basta dichiarare object-fit: cover qui per vincere sul default. Le ancore .brxe-image sono inline-block con width:auto, quindi in una riga da ~1240px restano alla larghezza risolta dal contenuto (300px) e lasciano la riga mezza vuota. Con flex-basis a zero e crescita libera si dividono invece lo spazio disponibile in tre parti uguali (gap di colonna escluso); height:auto fa sì che l'aspect-ratio 4 / 5 imposto sugli elementi derivi l'altezza dalla larghezza flessibile, al posto del fit-content dell'elemento. Il selettore è ancorato all'id del blocco della Home così nessun'altra immagine del sito viene toccata. ------------------------------------------------------------------------- */ #brxe-jkejmf > .brxe-image { flex: 1 1 0; min-width: 0; height: auto; } #brxe-jkejmf .brxe-image img { object-fit: cover; } /* ------------------------------------------------------------------------- Voci del menu di navigazione dell'header su una riga sola. Attorno ai 1024px di viewport la voce "Chi siamo" va a capo su due righe (li alto 68px contro i 34px delle altre voci), perché il layout lascia al menu lo spazio che resta accanto a logo e hamburger. Il white-space si applica alla voce e si eredita sul link: il menu si allarga verso destra invece di spezzarsi, e l'altezza delle voci resta uniforme. L'offcanvas del menu mobile è renderizzato dentro #brx-header come gli altri elementi del template: la :not() lo esclude esplicitamente, e il selettore non tocca nemmeno i menu del footer, che stanno fuori dall'header. Copre così i nav-menu di entrambi i template header. ------------------------------------------------------------------------- */ #brx-header .brxe-nav-menu:not(.brxe-offcanvas .brxe-nav-menu) .bricks-nav-menu li { white-space: nowrap; } /* ------------------------------------------------------------------------- Slider dei loghi clienti — sezione "Abbiamo lavorato con" della Home. L'elemento Bricks resta un image-gallery (così i loghi si aggiungono dal builder, non dal codice): `marquee-loghi.js` ne riorganizza i
  • in due righe che scorrono in direzioni opposte, e aggiunge `.is-enhanced`. Tutte le regole del marquee sono quindi dietro `.is-enhanced`: senza JS la gallery resta la griglia Bricks di sempre, con il solo `--columns` riportato a 5 (il default del tema è 3, e con 69 loghi sarebbe una colonna infinita). Nessuna regressione se lo script non carica. Le sorgenti sono PNG 180 × 180 a fondo bianco: nessuno scaling, ed è il `mix-blend-mode: multiply` — ereditato dal _cssCustom della vecchia gallery — a far sparire il bianco sul Crema della sezione. Le due dichiarazioni di specificità da tenere d'occhio, entrambe in frontend.css del tema: .bricks-layout-wrapper[data-layout=grid]:not(.isotope) (0,3,0) .bricks-layout-wrapper .image (0,2,0) Questo foglio è accodato dopo (dipendenza `bricks-frontend`), quindi a parità di specificità vince: da qui le catene a tre classi. La spaziatura fra i loghi è un `margin-inline-end` sugli item e non un `gap` sulla track: l'animazione trasla di -50%, e con il gap la metà esatta cadrebbe dentro uno spazio invece che su un confine fra due loghi, producendo uno scatto a ogni giro. Con il margine la larghezza totale è esattamente 2 × (logo + margine) × N e il loop è continuo. ------------------------------------------------------------------------- */ .bricks-layout-wrapper.spuma-marquee { --spuma-marquee-logo: 180px; --spuma-marquee-gap: 30px; --columns: 5; --gutter: 0px var(--spuma-marquee-gap); } .bricks-layout-wrapper.spuma-marquee.is-enhanced { display: flex; flex-direction: column; row-gap: var(--spuma-marquee-gap); } .spuma-marquee.is-enhanced .spuma-marquee__row { /* Il `width: 100%` non è ridondante. Le righe sono
  • (quindi `display: list-item`) dentro un flex container in colonna: lo stretch sull'asse trasversale non le riporta alla larghezza del container, e la riga assume la larghezza della track — ~14700px con 69 loghi, che fa scrollare in orizzontale l'intera pagina. Con la larghezza esplicita e `min-width: 0` la riga torna nei 1240px del container e l'overflow hidden qui sotto ritaglia la track come deve. */ width: 100%; min-width: 0; overflow: hidden; /* I loghi entrano ed escono dissolvendo, invece di tagliarsi netti sul bordo del container. */ mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent); -webkit-mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent); } .spuma-marquee.is-enhanced .spuma-marquee__track { display: flex; width: max-content; margin: 0; padding: 0; list-style: none; /* La durata la calcola il JS dalla larghezza reale della track, così le due righe scorrono alla stessa velocità pur avendo larghezze diverse. */ animation: spuma-marquee-scroll var(--spuma-marquee-duration, 60s) linear infinite; } .spuma-marquee.is-enhanced .spuma-marquee__row--reverse .spuma-marquee__track { animation-direction: reverse; } /* Pausa su hover e su focus da tastiera: chi naviga con il tab deve poter fermare lo scorrimento. */ .spuma-marquee.is-enhanced:hover .spuma-marquee__track, .spuma-marquee.is-enhanced:focus-within .spuma-marquee__track { animation-play-state: paused; } .spuma-marquee.is-enhanced .spuma-marquee__track > .bricks-layout-item { flex: 0 0 auto; margin-inline-end: var(--spuma-marquee-gap); } .spuma-marquee.is-enhanced .spuma-marquee__track > .bricks-layout-item > figure { margin: 0; } /* Niente `mix-blend-mode: multiply` qui, a differenza della vecchia gallery: la track è animata con `transform`, che crea uno stacking context e isola il blending. Il multiply si fonderebbe con il nulla invece che con il Crema della sezione, e ogni logo a fondo bianco resterebbe un quadrato bianco. Il fondo lo toglie `.docker/apply-loghi-clienti.php`, che scrive PNG con canale alpha — come sono già i 20 loghi del 2025. */ .bricks-layout-wrapper.spuma-marquee .image { display: block; width: var(--spuma-marquee-logo); height: var(--spuma-marquee-logo); object-fit: contain; } /* La vecchia griglia non teneva i loghi a 180px ovunque: erano le colonne a rimpicciolirli, perché l'immagine stava al 100% della colonna. Con il container Bricks al 95% del viewport faceva ~159px a 767px (4 colonne) e ~104px a 390px (3 colonne). Questi due breakpoint — gli stessi `mobile_landscape` e `mobile_portrait` che erano impostati sull'elemento — riproducono quelle dimensioni, così l'altezza a video resta quella di prima a ogni risoluzione e non solo su desktop. */ @media (max-width: 767px) { .bricks-layout-wrapper.spuma-marquee { --spuma-marquee-logo: 150px; --spuma-marquee-gap: 24px; } } @media (max-width: 478px) { .bricks-layout-wrapper.spuma-marquee { --spuma-marquee-logo: 104px; --spuma-marquee-gap: 20px; } } @keyframes spuma-marquee-scroll { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } } /* Un marquee infinito è esattamente il caso che questa media query esiste per coprire: l'animazione si ferma e le righe tornano scorrevoli a mano. I cloni servono solo al loop, quindi spariscono. */ @media (prefers-reduced-motion: reduce) { .spuma-marquee.is-enhanced .spuma-marquee__row { overflow-x: auto; scroll-snap-type: x proximity; } .spuma-marquee.is-enhanced .spuma-marquee__track { animation: none; } .spuma-marquee.is-enhanced .spuma-marquee__track > [aria-hidden='true'] { display: none; } .spuma-marquee.is-enhanced .spuma-marquee__track > .bricks-layout-item { scroll-snap-align: start; } }