/* ========================================================================== gr-base — lo strato GR sopra Hummingbird -------------------------------------------------------------------------- Nessuna catena di compilazione: questo foglio si modifica e si consegna. theme.css resta quello di Hummingbird e arriva DOPO questo (priorita' 50 contro 40 in theme.yml). L'ORDINE DEI LIVELLI, ed e' la riga piu' importante del file. Hummingbird mette tutto il suo CSS dentro livelli, e le utilita' di Bootstrap (`.d-none`, `.order-2`, `.ms-auto`) sono `!important` nel livello `utilities`. Per le dichiarazioni `!important` l'ordine dei livelli si rovescia: vince il livello dichiarato PRIMA. Un foglio fuori dai livelli perde contro qualunque `!important` di Bootstrap. La prima dichiarazione `@layer` incontrata nella pagina e' quella che fissa l'ordine. Questo foglio arriva per primo e ripete l'elenco di Hummingbird aggiungendo `gr` subito prima di `utilities`: le regole GR battono i componenti di Hummingbird, e quando serve un `!important` battono anche le utilita'. Se Hummingbird cambiasse i nomi dei suoi livelli, questa riga va riallineata a quella in testa al suo theme.css. Classic Minimal: raggi <= 2px, spaziature a scala 4pt, motion 180ms con cubic-bezier(0.2, 0.7, 0.2, 1), colori dai token --gr-* di grthemekit e SEMPRE con un ripiego sui valori di Hummingbird: senza il modulo il tema resta Hummingbird, non una pagina senza colori. ========================================================================== */ @layer vendors, bs-base, bs-components, bs-custom-components, ps-base, ps-components, ps-pages, ps-modules, gr, utilities; /* -------------------------------------------------------------------------- Caratteri serviti dal dominio del negozio. Inter lo dichiara gia' Hummingbird. Qui ci sono le altre due famiglie della tipografia di base, solo latino e latino esteso: il browser scarica un file solo se la pagina usa davvero quella famiglia e quei caratteri. theme.yml le elenca in `gr_caratteri_in_locale`, e grthemekit non chiama Google Fonts per famiglie che il tema ha gia'. -------------------------------------------------------------------------- */ @font-face { font-family: 'Fraunces'; font-style: normal; font-display: swap; font-weight: 100 900; src: url('../fonts/fraunces-latin-opsz-normal-252d721d4b7469f6889f.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: 'Fraunces'; font-style: normal; font-display: swap; font-weight: 100 900; src: url('../fonts/fraunces-latin-ext-opsz-normal-b16a2528c27e5058538f.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; } @font-face { font-family: 'JetBrains Mono'; font-style: normal; font-display: swap; font-weight: 400; src: url('../fonts/jetbrains-mono-latin-400-normal-d04352f240062b100fba.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: 'JetBrains Mono'; font-style: normal; font-display: swap; font-weight: 400; src: url('../fonts/jetbrains-mono-latin-ext-400-normal-e83b764e84e73968db26.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; } @font-face { font-family: 'JetBrains Mono'; font-style: normal; font-display: swap; font-weight: 500; src: url('../fonts/jetbrains-mono-latin-500-normal-bb50084be2b43ba7b98c.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: 'JetBrains Mono'; font-style: normal; font-display: swap; font-weight: 500; src: url('../fonts/jetbrains-mono-latin-ext-500-normal-4a98f2079d9f35ae42c1.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; } /* -------------------------------------------------------------------------- Il colore dei collegamenti nel testo segue l'accento. Bootstrap colora `a` con `rgba(var(--bs-link-color-rgb), ...)`, non con `--bs-link-color`: il ponte in `gr` cambiava pulsanti-link e paginazione e lasciava i link del testo del blu di Hummingbird. Un token in esadecimale o in oklch non diventa una terna rgb dentro il CSS, quindi la regola si riscrive. Sta nel livello del reboot, `bs-base`, e NON in `gr`: in `gr` batterebbe il colore di ogni collegamento dei componenti (menu, titoli dei prodotti, piede), perche' fra livelli vince l'ordine, non la specificita'. `:root a` batte l'`a` del reboot, che arriva dopo nello stesso livello; il suo `a:not([href]):not([class])` resta piu' specifico e continua a ereditare il colore. -------------------------------------------------------------------------- */ @layer bs-base { :root a { color: var(--bs-link-color); } :root a:hover { color: var(--bs-link-hover-color); } } /* -------------------------------------------------------------------------- 1. Ponte fra i token GR e le variabili di Bootstrap. grthemekit scrive --gr-*; Hummingbird legge --bs-*. Il ripiego di ogni riga e' il valore di serie di Hummingbird. FUORI DAI LIVELLI, e con `:root:root`. Hummingbird dichiara le variabili di Bootstrap in tre regole di theme.css che NON stanno in nessun livello (`:root, [data-bs-theme="light"]`, `[data-bs-theme="dark"]`, `:root`), e una dichiarazione fuori dai livelli batte qualunque dichiarazione dentro un livello. Fino al 2026-09-15 questo ponte stava in `@layer gr` e non valeva niente: corpo, sfondo, collegamenti e bordi restavano di Hummingbird qualunque tavolozza o carattere scegliesse il pannello (misurato col browser, su eshopdemo e sul banco). Fuori dai livelli non basta: theme.css arriva dopo questo foglio, e a parita' di specificita' vince lui. `:root:root` (0,2,0) batte i suoi `:root` e `[data-bs-theme]` (0,1,0). La regola scura ripete il ponte con i ripieghi scuri di Hummingbird: senza grthemekit, con `data-bs-theme="dark"` sulla radice, il tema resta il tema scuro di Hummingbird. Con grthemekit i valori scuri li danno i token, che il modulo cambia sullo stesso attributo o con `prefers-color-scheme`. I raggi valgono 2px: e' una regola del disegno, non una preferenza. Il pannello li cambia scrivendo --gr-radius*, ed e' da li' che il ponte li legge; `-xl` e `-xxl` seguono il raggio base, come fa il pannello con `-xl`. ------------------------------------------------------------------------ */ :root:root { --bs-body-font-family: var(--gr-font-body, "Inter", sans-serif); --bs-body-color: var(--gr-ink, #212529); --bs-body-bg: var(--gr-paper, #fff); --bs-link-color: var(--gr-accent, #0b69f6); --bs-link-hover-color: var(--gr-accent-strong, #0954c5); --bs-border-color: var(--gr-line, #dee2e6); --bs-secondary-color: var(--gr-mute, rgba(33, 37, 41, 0.75)); --bs-border-radius: var(--gr-radius, 2px); --bs-border-radius-sm: var(--gr-radius-sm, 2px); --bs-border-radius-lg: var(--gr-radius-lg, 2px); --bs-border-radius-xl: var(--gr-radius, 2px); --bs-border-radius-xxl: var(--gr-radius, 2px); } :root:root[data-bs-theme="dark"] { --bs-body-color: var(--gr-ink, #dee2e6); --bs-body-bg: var(--gr-paper, #212529); --bs-link-color: var(--gr-accent, #6da5fa); --bs-link-hover-color: var(--gr-accent-strong, #8ab7fb); --bs-border-color: var(--gr-line, #495057); --bs-secondary-color: var(--gr-mute, rgba(222, 226, 230, 0.75)); } @layer gr { @media (min-width: 1200px) { .container, .container-md, .container-lg, .container-xl, .container-xxl { max-width: var(--gr-container-max, 1320px); } } /* ------------------------------------------------------------------------ 2. Tipografia (Classic Minimal). ------------------------------------------------------------------------ */ body { line-height: var(--gr-leading-body, 1.55); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizelegibility; } h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { font-family: var(--gr-font-display, inherit); line-height: 1.15; } h1, .h1 { line-height: 1.05; } h2, .h2 { line-height: 1.1; } code, kbd, samp, pre { font-family: var(--gr-font-mono, 'JetBrains Mono', ui-monospace, monospace); } :focus-visible { outline: 2px solid var(--gr-accent, #0b69f6); outline-offset: 2px; } /* I componenti che Hummingbird arrotonda con valori propri e non con la variabile di Bootstrap. */ .btn, .card, .form-control, .form-select, .dropdown-menu, .modal-content, .alert, .toast, .accordion-item, .accordion-button, .pagination .page-link, .offcanvas, .badge:not(.rounded-pill) { border-radius: var(--bs-border-radius, 2px); } .btn { background-image: none; } /* ------------------------------------------------------------------------ 3. Bottoni con contrasto AA misurato (WCAG 1.4.3). Testo scuro su giallo e azzurro: il bianco sui colori di serie di Bootstrap scende a 1,65:1 e 1,98:1. Il rosso e' scurito per reggere il bianco a 5,6:1. ------------------------------------------------------------------------ */ .btn-primary { --bs-btn-bg: var(--gr-accent, #0b69f6); --bs-btn-border-color: var(--gr-accent, #0b69f6); --bs-btn-hover-bg: var(--gr-accent-strong, #0954c5); --bs-btn-hover-border-color: var(--gr-accent-strong, #0954c5); --bs-btn-active-bg: var(--gr-accent-strong, #0954c5); --bs-btn-active-border-color: var(--gr-accent-strong, #0954c5); --bs-btn-disabled-bg: var(--gr-accent, #0b69f6); --bs-btn-disabled-border-color: var(--gr-accent, #0b69f6); --bs-btn-color: var(--gr-accent-contrast, #fff); --bs-btn-hover-color: var(--gr-accent-contrast, #fff); --bs-btn-active-color: var(--gr-accent-contrast, #fff); --bs-btn-disabled-color: var(--gr-accent-contrast, #fff); } /* Il bottone a contorno, con lo stesso accento del pieno. Senza questa regola restava il blu di serie di Hummingbird (#0b69f6) qualunque fosse la tavolozza: Hummingbird lo usa in 18 punti, fra cui «Vedi prodotto» nelle schede e «Carrello» nel mini-carrello. Il testo sul chiaro e il fondo al passaggio usano `--gr-accent-strong`, la variante che porta testo, col suo `--gr-accent-contrast` (vedi ColorPresetRegistry di grthemekit). */ .btn-outline-primary { --bs-btn-color: var(--gr-accent-strong, #0b69f6); --bs-btn-border-color: var(--gr-accent, #0b69f6); --bs-btn-hover-color: var(--gr-accent-contrast, #fff); --bs-btn-hover-bg: var(--gr-accent-strong, #0b69f6); --bs-btn-hover-border-color: var(--gr-accent-strong, #0b69f6); --bs-btn-active-color: var(--gr-accent-contrast, #fff); --bs-btn-active-bg: var(--gr-accent-strong, #0b69f6); --bs-btn-active-border-color: var(--gr-accent-strong, #0b69f6); --bs-btn-disabled-color: var(--gr-accent-strong, #0b69f6); --bs-btn-disabled-border-color: var(--gr-accent, #0b69f6); } .btn-warning, .btn-info, .btn-light { --bs-btn-color: #000; --bs-btn-hover-color: #000; --bs-btn-active-color: #000; --bs-btn-disabled-color: #000; } .btn-danger { --bs-btn-bg: #c0392b; --bs-btn-border-color: #c0392b; --bs-btn-hover-bg: #a42c1f; --bs-btn-hover-border-color: #a42c1f; --bs-btn-active-bg: #a42c1f; --bs-btn-active-border-color: #a42c1f; --bs-btn-disabled-bg: #c0392b; --bs-btn-color: #fff; --bs-btn-hover-color: #fff; --bs-btn-active-color: #fff; --bs-btn-disabled-color: #fff; } .btn-outline-warning { --bs-btn-color: #856404; --bs-btn-hover-color: #000; --bs-btn-hover-bg: #ffc107; } .btn-outline-info { --bs-btn-color: #055160; --bs-btn-hover-color: #000; --bs-btn-hover-bg: #0dcaf0; } .btn-outline-danger { --bs-btn-color: #c0392b; --bs-btn-hover-color: #fff; --bs-btn-hover-bg: #c0392b; } .btn-outline-success { --bs-btn-color: #146c43; --bs-btn-hover-color: #fff; --bs-btn-hover-bg: #198754; } /* Il pulsante del carrello mentre aspetta la risposta (gr-base.js). */ .btn.is-loading, [data-ps-ref="add-to-cart"].is-loading { position: relative; pointer-events: none; cursor: wait; opacity: 0.7; } .btn.is-loading > *, [data-ps-ref="add-to-cart"].is-loading > * { visibility: hidden; } .btn.is-loading::after, [data-ps-ref="add-to-cart"].is-loading::after { content: ""; position: absolute; top: 50%; left: 50%; width: 16px; height: 16px; margin: -8px 0 0 -8px; border: 2px solid currentcolor; border-top-color: transparent; border-radius: 9999px; animation: gr-giro 600ms linear infinite; } @keyframes gr-giro { to { transform: rotate(360deg); } } /* ------------------------------------------------------------------------ 4. La testata a zone (templates/_partials/header*). Ogni zona e' un contenitore del tema: la collocazione la decidono loro, e le classi di utilita' dei moduli valgono solo dentro la propria zona. ------------------------------------------------------------------------ */ .gr-testata__riga { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; min-height: 64px; padding-block: 8px; } .gr-testata__hamburger, .gr-testata__marchio, .gr-testata__azioni, .gr-testata__utilita { display: flex; flex: 0 0 auto; align-items: center; } .gr-testata__azioni { gap: 4px; } .gr-testata__utilita { gap: 8px; } .gr-testata__menu { display: flex; flex: 0 1 auto; align-items: center; min-width: 0; } .gr-testata__ricerca { display: flex; flex: 1 1 240px; align-items: center; justify-content: flex-end; min-width: 0; } /* `col-auto` del modulo lo terrebbe largo quanto il contenuto: dentro la sua zona il campo deve poter crescere. */ .gr-testata__ricerca > #_desktop_ps_searchbar { flex: 1 1 auto; justify-content: flex-end; min-width: 0; } .gr-testata__hamburger .menu-toggle { padding: 4px 8px; line-height: 1; } /* Sotto i 992 la riga non ha piu' spazio per lingua e valuta accanto alle azioni: vanno su una riga loro, in coda. Stesso posto nel documento e sullo schermo. */ @media (max-width: 991.98px) { .gr-testata__utilita { flex: 1 0 100%; justify-content: center; } } /* Marchio al centro: la ricerca a sinistra, il marchio al centro della riga, le azioni a destra. Il marchio esce dal flusso cosi' da stare al centro vero anche quando i due lati hanno larghezze diverse. */ @media (min-width: 992px) { .gr-testata__riga--centrata { position: relative; flex-wrap: nowrap; min-height: 80px; } .gr-testata__riga--centrata .gr-testata__marchio { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .gr-testata__riga--centrata .gr-testata__ricerca { flex: 0 1 38%; max-width: 38%; margin-inline-end: auto; justify-content: flex-start; } } /* Il menu nella riga: sotto i 1200 lo sostituisce l'hamburger. */ .gr-testata__menu .ps-mainmenu__mobile-toggle { display: none; } /* La fascia del menu. */ .header__nav-strip { border-bottom: 1px solid var(--bs-border-color); } .header__nav-strip .ps-mainmenu { display: flex; justify-content: flex-start; } [data-menu-align="center"] .header__nav-strip .ps-mainmenu { justify-content: center; } [data-menu-align="right"] .header__nav-strip .ps-mainmenu { justify-content: flex-end; } /* Sotto i 1200 il menu desktop di ps_mainmenu e' spento da Hummingbird e il suo interruttore lo sostituisce l'hamburger della riga. La fascia NON va spenta con `display: none`: l'offcanvas che l'hamburger apre sta dentro il suo markup, e un antenato spento spegne anche lui. */ @media (max-width: 1199.98px) { .header__nav-strip .ps-mainmenu__mobile-toggle { display: none; } .header__nav-strip:has(.ps-mainmenu) { border-bottom: 0; } } /* La topbar con HTML o link. */ .header-top__html { display: block; padding-block: 8px; padding-inline: max(16px, (100% - var(--gr-container-max, 1320px)) / 2); color: var(--gr-mute, #6b7280); font-size: 0.8125rem; line-height: 1.4; } /* Fasce scritte come `
`: il fondo arriva ai bordi, il contenuto sta sulla misura del sito. */ .header-top__html:has(> div) { padding: 0; } .header-top__html > div { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 20px; min-height: 36px; padding-block: 4px; padding-inline: max(16px, (100% - var(--gr-container-max, 1320px)) / 2); } .header-top__html a { color: var(--gr-ink, #212529); } .header-top__links { gap: 20px; min-height: 36px; } .header-top__link { display: inline-flex; align-items: center; gap: 4px; color: var(--gr-mute, #6b7280); font-size: 0.8125rem; text-decoration: none; transition: color 180ms cubic-bezier(0.2, 0.7, 0.2, 1); } .header-top__link:hover, .header-top__link:focus-visible { color: var(--gr-accent, #0b69f6); } .header-top__link-icon { font-size: 1rem; line-height: 1; } /* ------------------------------------------------------------------------ 5. Il marchio (templates/_partials/marchio.tpl). Nella testata ci sono tutte e due le immagini: si vede quella del fondo. Lo scambio segue la tavolozza di grthemekit, che si scurisce in due modi: - «manuale»: solo con `data-bs-theme="dark"` sulla radice; - «automatica»: con la preferenza di sistema, se la radice non dice `light` (data-dark-mode="auto" sulla testata). Una media query senza la condizione sulla modalita' sbaglierebbe in «manuale»: sistema scuro, pagina chiara, marchio bianco che sparisce. ------------------------------------------------------------------------ */ .gr-logo { display: block; line-height: 0; } .gr-logo img { display: block; width: auto; height: 44px; } .gr-logo .gr-logo__su-scuro, :root[data-bs-theme="dark"] .gr-logo .gr-logo__su-chiaro { display: none; } :root[data-bs-theme="dark"] .gr-logo .gr-logo__su-scuro { display: block; } .gr-logo--piede img { height: 40px; margin-bottom: 16px; } /* ------------------------------------------------------------------------ 6. Il piede: disposizione, allineamento e stile scuro scelti in grthemekit, letti dagli attributi su