/* =========================================================================
catalogo.css — Shop ATOSA 2026 (Global Contract)
Tre pagine: shop.html (macro categorie), categoria.html (modelli di una
categoria), product.html (scheda modello).
Perche' un file nuovo invece di riscrivere shop.css: shop.css contiene
ancora la tendina d'ingresso, la navbar, il FAB del carrello e tutta la
pagina carrello. Quelle classi restano dove sono; qui vive solo il
catalogo, con prefisso `gc-` per non collidere con niente.
Regola sui prezzi: il listino ATOSA e' barrato, il prezzo Global Contract
e' -35%. La scontistica NON deve gridare: nessun rosso, nessun bollino
pieno. Il listino e' grigio e barrato, il prezzo e' bianco, lo sconto e'
un chip a filo. Il magenta del brand resta ai soli CTA.
========================================================================= */
:root {
--gc-line: rgba(255, 255, 255, 0.09);
--gc-line-soft: rgba(255, 255, 255, 0.055);
--gc-tile: #0d0d11;
--gc-tile-2: #141419;
--gc-muted: #8A8A93;
--gc-muted-2: #6C6C75;
--gc-radius: 16px;
/* Il fondo della pagina, ripetuto qui perche' la fascia superiore delle
barre agganciate deve essere ESATTAMENTE questo colore: e' l'unico modo
perche' la barra sembri il bordo della finestra e non un rettangolo
appoggiato sopra. */
--gc-bg: #060608;
/* Superficie delle card. Non nero piatto: una lastra illuminata dall'alto.
Due valori soli (nero e bianco) erano il motivo per cui lo shop sembrava
una lista, non una vetrina. */
--gc-surf-1: #14151A;
--gc-surf-2: #0B0B0F;
--gc-surf-line: rgba(255, 255, 255, 0.075);
--gc-surf-line-hi: rgba(255, 255, 255, 0.15);
/* Grigio freddo, non neutro: il repertorio e' acciaio inox, e un grigio
leggermente blu lo racconta meglio di un grigio morto. */
--gc-steel: #97A0AE;
--gc-elev: 0 1px 0 rgba(255, 255, 255, 0.045) inset,
0 24px 48px -32px rgba(0, 0, 0, 0.95);
--gc-elev-hi: 0 1px 0 rgba(255, 255, 255, 0.08) inset,
0 34px 64px -30px rgba(0, 0, 0, 1);
--gc-band-h: 96px; /* dal bordo della finestra al bordo alto della barra */
}
/* ---------------------------------------------------------------- shell */
.gc-shell {
max-width: 1560px;
margin: 0 auto;
padding: 0 clamp(1.15rem, 3.4vw, 3.25rem);
}
.gc-page {
padding-top: clamp(6.5rem, 11vw, 9rem);
padding-bottom: clamp(4rem, 8vw, 7rem);
color: var(--color-offwhite);
}
/* --------------------------------------------------------------- header */
.gc-hero { max-width: 63ch; }
.gc-overline {
display: block;
font-family: var(--font-sans);
font-size: 0.7rem;
font-weight: 500;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--color-magenta-glow);
margin-bottom: 1.15rem;
}
/* 2026-09-08: era clamp(2.4rem, 5.4vw, 4.15rem), cioe' 66px su 1440 - la
dimensione di un titolo di apertura. Ma qui non apre niente: dice in che
reparto sei (o, dopo il primo passo, che cosa hai gia' scelto), e nella
stessa schermata la stessa parola sta gia' sul tasto indietro e nella
briciola. A 66px prendeva due righe e spingeva la domanda - l'unica cosa che
il visitatore deve ancora fare - sotto la piega su un portatile.
Adesso e' un'etichetta grande, non un manifesto, e la domanda le passa
davanti (vedi .gc-step-q). Vale anche per le pagine di errore, dove 66px per
dire "questa pagina non c'e' piu'" erano un urlo. */
.gc-h1 {
font-family: var(--font-serif);
font-weight: 400;
font-size: clamp(1.85rem, 2.6vw, 2.5rem);
line-height: 1.08;
letter-spacing: -0.02em;
margin: 0 0 1.15rem;
color: var(--color-white);
}
/* --------------------------------------------------- testata della vetrina
Solo shop.html. Non usa .gc-h1 perche' li' il titolo APRE davvero la pagina
ed e' l'unico della gerarchia: puo' essere grande, mentre .gc-h1 nelle altre
due pagine e' diventato un'etichetta. */
.gc-shop-head {
position: relative;
z-index: 1;
/* Larga quanto basta al titolo su DUE righe. Con una misura da paragrafo
(34ch) il titolo andava a quattro righe e diventava una colonna stretta
alta 240px in mezzo a uno schermo vuoto. */
max-width: min(100%, 700px);
margin-bottom: clamp(0.5rem, 1.5vw, 1.2rem);
}
.gc-shop-h1 {
font-family: var(--font-serif);
font-weight: 400;
font-size: clamp(2.1rem, 3.6vw, 3.25rem);
line-height: 1.06;
letter-spacing: -0.022em;
margin: 0 0 1.05rem;
color: var(--color-white);
}
/* L'a capo e' scritto nel markup, non lasciato al caso: "Il catalogo," e' la
premessa e "senza dover sapere le sigle." e' la promessa, e vanno su due
righe in quest'ordine. Sul telefono la colonna e' troppo stretta perche'
quella divisione significhi qualcosa e il testo va a capo da solo. */
.gc-shop-br { display: inline; }
.gc-shop-lead {
font-family: var(--font-sans);
font-size: clamp(0.94rem, 1.1vw, 1.04rem);
line-height: 1.6;
color: var(--gc-muted);
margin: 0;
max-width: 56ch;
}
.gc-shop-lead b { color: var(--color-offwhite); font-weight: 600; }
@media (max-width: 700px) {
.gc-shop-head { max-width: none; }
.gc-shop-h1 { font-size: clamp(1.7rem, 7.4vw, 2.2rem); margin-bottom: 0.8rem; }
.gc-shop-br { display: none; }
.gc-shop-lead { font-size: 0.9rem; line-height: 1.55; }
}
.gc-lead {
font-family: var(--font-sans);
font-size: clamp(0.95rem, 1.15vw, 1.06rem);
line-height: 1.65;
color: var(--gc-muted);
margin: 0;
max-width: 58ch;
}
.gc-hero-note {
margin-top: 1.7rem;
display: inline-flex;
align-items: center;
gap: 0.7rem;
padding: 0.55rem 0.95rem 0.55rem 0.75rem;
border: 1px solid var(--gc-line);
border-radius: 999px;
font-family: var(--font-sans);
font-size: 0.8rem;
letter-spacing: 0.01em;
color: #D6D6DC;
background: rgba(255, 255, 255, 0.025);
}
.gc-hero-note b { color: var(--color-white); font-weight: 600; }
.gc-hero-note .gc-dot {
width: 6px; height: 6px; border-radius: 50%;
background: var(--color-magenta-glow);
box-shadow: 0 0 0 4px rgba(230, 35, 106, 0.14);
flex: none;
}
/* -------------------------------------------------------------- toolbar */
.gc-toolbar {
position: sticky;
/* La navbar del sito e' `position: fixed` a 24px dal bordo e alta ~60px:
il bordo inferiore cade a 84px. La barra si ferma appena sotto, non a 0,
altrimenti le pillole scorrono DIETRO al logo. Sopra di lei ci pensa la
fascia qui sotto. */
top: var(--gc-band-h);
z-index: 40;
margin: clamp(2.4rem, 4.5vw, 3.4rem) 0 clamp(1.6rem, 3vw, 2.4rem);
padding: 0.85rem 0;
display: flex;
align-items: center;
gap: 1.1rem;
flex-wrap: wrap;
}
/* LA FASCIA NON COPRE SOLO LA BARRA, ARRIVA FINO AL BORDO DELLA FINESTRA.
Lo sfondo e' un pseudo-elemento largo quanto la finestra, non quanto il
contenitore: la barra vive dentro `.gc-shell`, che ha margini laterali, e
uno sfondo sull'elemento stesso lascerebbe due bordi verticali netti in
mezzo alla pagina. Ma il punto vero e' il `top` negativo: la barra si
aggancia a 96px, sotto la navbar, e nei 96px sopra passavano le foto dei
prodotti — fra la pillola della navbar e la barra si vedeva scorrere il
catalogo, e la barra sembrava galleggiare invece che essere agganciata in
alto. Coprendo fino a 0 la barra E la navbar poggiano sulla stessa fascia
piena, e quello che scorre sparisce sotto di essa.
Fondo pieno e non vetro: sopra al nero della pagina un blur da 140px di
fascia costa un ricampionamento a ogni frame di scroll e non si vede. */
/* IL FONDO DELLA BARRA ESISTE SOLO QUANDO LA BARRA E' AGGANCIATA (2026-09-09).
Serve a coprire la fessura fra la pillola della navbar e la barra quando
questa e' ferma in alto: senza, in quello spiraglio si vedono scorrere le
foto dei prodotti. Ma il rettangolo parte una fascia SOPRA la barra, e
finche' la barra sta al suo posto naturale quel rettangolo copre quello che
ha sopra — per questo la testata della vetrina doveva pagargli 96px di
margine, che sul telefono erano un buco fra la frase introduttiva e i
filtri. Ora il fondo e' spento a riposo e si accende quando serve
(`.is-stuck`, messa da GC.stick() con un IntersectionObserver), e il
margine torna a essere una misura tipografica invece che una tara. */
.gc-toolbar::before,
.gc-subnav::before {
content: "";
position: absolute;
left: 50%;
top: calc(-1 * var(--gc-band-h)); bottom: 0;
width: 100vw;
transform: translateX(-50%);
background: var(--gc-bg);
z-index: -1;
pointer-events: none;
opacity: 0;
transition: opacity 120ms linear;
}
.gc-toolbar.is-stuck::before,
.gc-subnav.is-stuck::before { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
.gc-toolbar::before, .gc-subnav::before { transition: none; }
}
/* Bordo inferiore sfumato invece che una riga netta: e' il punto in cui il
contenuto passa sotto la barra, e una sfumatura lo dice meglio di un 1px. */
.gc-toolbar::after,
.gc-subnav::after {
content: "";
position: absolute;
left: 50%; bottom: -18px;
width: 100vw; height: 18px;
transform: translateX(-50%);
background: linear-gradient(to bottom, var(--gc-bg), rgba(6, 6, 8, 0));
z-index: -1;
pointer-events: none;
}
.gc-pills {
display: flex;
gap: 0.45rem;
overflow-x: auto;
scrollbar-width: none;
-webkit-overflow-scrolling: touch;
padding: 2px;
margin: -2px;
}
.gc-pills::-webkit-scrollbar { display: none; }
.gc-pill {
flex: none;
appearance: none;
border: 1px solid var(--gc-line);
background: transparent;
color: var(--gc-muted);
font-family: var(--font-sans);
/* 0.795 -> 0.85: queste quattro parole sono la navigazione primaria di tutto
il negozio - i tre reparti piu' "tutte" - ed erano scritte piu' piccole
della descrizione dentro una card. */
font-size: 0.85rem;
font-weight: 500;
letter-spacing: 0.005em;
padding: 0.52rem 1rem;
border-radius: 999px;
cursor: pointer;
white-space: nowrap;
transition: color 0.25s ease, border-color 0.25s ease, background-color 0.25s ease;
}
.gc-pill:hover { color: var(--color-offwhite); border-color: rgba(255, 255, 255, 0.2); }
.gc-pill.is-on {
color: #08080A;
background: var(--color-offwhite);
border-color: var(--color-offwhite);
}
.gc-search {
position: relative;
margin-left: auto;
flex: 0 1 320px;
min-width: 200px;
}
.gc-search input {
width: 100%;
appearance: none;
background: rgba(255, 255, 255, 0.035);
border: 1px solid var(--gc-line);
border-radius: 999px;
color: var(--color-offwhite);
font-family: var(--font-sans);
font-size: 0.82rem;
padding: 0.62rem 2.1rem 0.62rem 2.35rem;
transition: border-color 0.25s ease, background-color 0.25s ease;
}
.gc-search input::placeholder { color: var(--gc-muted-2); }
.gc-search input:focus {
outline: none;
border-color: rgba(255, 255, 255, 0.28);
background: rgba(255, 255, 255, 0.06);
}
.gc-search svg {
position: absolute;
left: 0.85rem; top: 50%;
transform: translateY(-50%);
color: var(--gc-muted-2);
pointer-events: none;
}
.gc-search-clear {
position: absolute;
right: 0.5rem; top: 50%;
transform: translateY(-50%);
background: none; border: 0;
color: var(--gc-muted-2);
cursor: pointer;
padding: 0.35rem;
line-height: 0;
}
.gc-search-clear:hover { color: var(--color-offwhite); }
/* 2026-09-08: era in maiuscolo spaziato ("17 CATEGORIE"). Il maiuscolo
spaziato e' il livello di enfasi piu' alto che questa pagina usa, e qui
vestiva l'informazione meno importante di tutte: quante schede sta
mostrando il filtro. E' un riscontro, non un titolo - torna in tondo. */
.gc-count {
font-family: var(--font-sans);
font-size: 0.775rem;
letter-spacing: 0.01em;
color: var(--gc-muted-2);
}
/* ------------------------------------------------------------ tile foto
LA PIASTRELLA E' CHIARA, ED E' UNA SCELTA TECNICA PRIMA CHE ESTETICA.
Le foto del listino sono su fondo bianco e NON vengono piu' scontornate
(vedi gcatosa_images.py): il fondo viene sostituito con questo stesso
colore. Cosi' sulla pagina si vede esattamente quello che c'e' nel
catalogo, ombra a terra compresa, e i prodotti neri — forni, vetrine sushi,
vetrine da terra — restano leggibili invece di sparire nel fondo scuro.
`--gc-tile-bg` deve restare identico a TILE in gcatosa_images.py: e' il
colore che il PNG porta dentro, e una differenza anche di un punto si
vedrebbe come una cornice attorno alla foto. */
.gc-tile {
--gc-tile-bg: #FBFBFD;
position: relative;
aspect-ratio: var(--gc-tile-ar, 4 / 5);
display: grid;
place-items: center;
isolation: isolate;
}
/* LA CORNICE E' UNA SOLA PER CATEGORIA. `.gc-tile` e' l'ingombro nella
griglia; questa e' la cornice bianca che si vede, con il rapporto scelto da
scripts/gcatosa_crops.py — quello che rende meno peggiore il caso peggiore
fra tutti i soggetti di quella categoria. Dentro, ogni prodotto viene
portato a riempirla (regola `.is-fit` piu' sotto). E' anche il pezzo che
viaggia nella transizione fra le pagine: cornici uguali di qua e di la'
vogliono dire una foto che si sposta e cresce, non due foto che sfumano. */
.gc-tile-plate {
/* Fuori flusso di proposito: dentro la griglia di `.gc-tile` un
`height: 100%` non si risolve sempre (la riga e' dimensionata dal
contenuto) e la lastra veniva fuori altissima, con la foto ingrandita e
tagliata a meta'. Con top/bottom ancorati l'altezza e' certa, la
larghezza la da' `aspect-ratio` e translateX la centra. */
position: absolute;
top: 0;
bottom: 0;
left: 50%;
transform: translateX(-50%);
max-width: 100%;
aspect-ratio: var(--gc-tile-ar, 0.8);
border-radius: var(--gc-radius);
overflow: hidden;
background: var(--gc-tile-bg);
border: 1px solid rgba(0, 0, 0, 0.06);
box-shadow: 0 12px 30px rgba(0, 0, 0, 0.34);
}
.gc-tile img {
position: relative;
z-index: 1;
width: 100%; height: 100%;
object-fit: contain;
display: block;
transition: transform 0.75s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.5s ease;
}
/* IL PRODOTTO VIENE PORTATO A RIEMPIRE LA CORNICE, non la tela.
--fw/--fl/--ft li scrive GC.tile() da js/shop-crops.js: larghezza
dell'immagine e sua posizione, tutte in quote di cornice, calcolate perche'
il soggetto occupi l'88% e sia centrato sul suo centro reale. L'immagine
mantiene le sue proporzioni (height: auto) e quello che esce dalla cornice
e' solo bianco. */
.gc-tile-plate.is-fit img {
position: absolute;
width: var(--fw, 100%);
height: auto;
max-width: none;
left: var(--fl, 0);
top: var(--ft, 0);
object-fit: fill;
}
.gc-tile.is-loading img { opacity: 0; }
/* =========================================================== temperatura
IL CATALOGO HA UN ASSE SOLO, ED E' LA TEMPERATURA. Meta' di questi
macchinari tiene il freddo, l'altra meta' fa il caldo, e le vetrine stanno
in mezzo: sono fredde dentro ma servono a farsi guardare. Sono i tre
gruppi che il listino ha gia' — Refrigerazione, Vetrine, Cottura — e sono
anche l'unica cosa che un ristoratore riconosce prima di leggere.
Da qui l'unico colore dello shop oltre al magenta del marchio: un blu
d'acciaio per il freddo, un ottone per le vetrine, una brace per la
cottura. Non e' decorazione, e' l'indice del catalogo: dice a colpo
d'occhio in che meta' del negozio ti trovi. Resta un accento sottile —
l'occhiello, il filo sul bordo della lastra, il chip dello sconto — e non
diventa mai un fondo pieno: il magenta deve restare l'unica cosa che
grida, perche' e' l'unica che chiede di cliccare. */
:root {
--gc-acc: #8C93A1;
--gc-acc-soft: rgba(140, 147, 161, 0.28);
}
[data-group="Refrigerazione"] { --gc-acc: #6E9AC4; --gc-acc-soft: rgba(110, 154, 196, 0.30); }
[data-group="Vetrine"] { --gc-acc: #BFA167; --gc-acc-soft: rgba(191, 161, 103, 0.30); }
[data-group="Cottura"] { --gc-acc: #CE7345; --gc-acc-soft: rgba(206, 115, 69, 0.30); }
.gc-pill[aria-pressed="true"][data-group="Refrigerazione"],
.gc-pill.is-on[data-group="Refrigerazione"] { --gc-acc: #6E9AC4; }
/* ================================================== la lastra
TRE VALORI, NON DUE. Prima lo shop aveva solo il nero della pagina e il
bianco della foto: le card non erano oggetti, erano immagini con del testo
sotto, e la griglia leggeva come un elenco. Qui nasce il terzo valore — una
lastra grigio-blu illuminata dall'alto, con un filo di luce sul bordo
superiore e un'ombra portata sotto. Il grigio e' freddo di proposito: il
repertorio e' acciaio inox, e un grigio neutro non lo racconta.
Le tre card dello shop (categoria, scelta guidata, modello) condividono
questa superficie: sono la stessa cosa a tre livelli di zoom, e devono
sembrarlo. */
.gc-card,
.gc-vcard,
.gc-optcard {
background:
linear-gradient(180deg, var(--gc-surf-1) 0%, var(--gc-surf-2) 100%);
border: 1px solid var(--gc-surf-line);
border-radius: calc(var(--gc-radius) + 6px);
padding: 10px 10px 0;
box-shadow: var(--gc-elev);
transition: border-color 0.4s ease, box-shadow 0.5s ease,
transform 0.55s cubic-bezier(0.16, 1, 0.3, 1);
}
.gc-card:hover,
.gc-vcard:hover,
.gc-optcard:hover {
border-color: var(--gc-surf-line-hi);
box-shadow: var(--gc-elev-hi);
transform: translateY(-4px);
}
/* Dentro alla lastra la piastrella non ha piu' bisogno della sua ombra: e' la
lastra a stare sopra la pagina, non la foto. */
.gc-card .gc-tile-plate,
.gc-vcard .gc-tile-plate,
.gc-optcard .gc-tile-plate {
box-shadow: none;
border-color: rgba(0, 0, 0, 0.10);
border-radius: var(--gc-radius);
}
/* --------------------------------------------------- griglia categorie */
.gc-grid {
display: grid;
gap: clamp(1.1rem, 2vw, 1.7rem);
grid-template-columns: repeat(auto-fill, minmax(258px, 1fr));
}
.gc-card {
display: flex;
flex-direction: column;
text-decoration: none;
color: inherit;
opacity: 0;
transform: translateY(20px);
}
.gc-card.is-in {
opacity: 1;
transform: none;
transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
will-change: opacity, transform;
}
.gc-card.is-settled { will-change: auto; }
.gc-card:hover .gc-tile img { transform: scale(1.035); }
/* 2026-09-08 — LA CARD NON AVEVA UN CAPO.
Sotto la foto c'erano tre cose quasi della stessa dimensione: il titolo a
20,5px, il testo a 13px e il conteggio a 12,4px. Fra il titolo e il testo
c'era un rapporto di 1,57 - troppo poco perche' l'occhio capisca in un colpo
quale delle due e' il NOME. Il risultato era una griglia di paragrafi grigi
con una foto sopra, dove niente chiedeva di essere letto per primo.
La scala adesso e' 1,5rem contro 0,775rem: il rapporto passa a 1,94 e il
nome della categoria - che e' la cosa su cui si clicca - vince da solo.
Il corpo diventa una colonna che si allunga e il piede si appoggia in
fondo: cosi' un titolo che va a capo o un testo piu' corto non spostano
piu' il conteggio, e i piedi delle card sulla stessa riga restano
allineati qualunque cosa contengano. */
.gc-card-body {
padding: 1rem 0.55rem 1.05rem;
flex: 1;
display: flex;
flex-direction: column;
}
.gc-card-kicker {
font-family: var(--font-sans);
font-size: 0.66rem;
font-weight: 500;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--gc-muted-2);
}
.gc-card-title {
font-family: var(--font-serif);
font-weight: 400;
font-size: 1.5rem;
line-height: 1.16;
letter-spacing: -0.014em;
margin: 0.5rem 0 0.5rem;
color: var(--color-white);
}
/* IL TESTO SOTTO IL NOME E' UN SOTTOTITOLO, NON UN PARAGRAFO.
Prima stava su due righe e TUTTI e diciassette finivano in "…", tagliati a
meta' frase: sbagliato. Ma la prima correzione - tre righe - ha spostato
l'errore dall'altra parte: il testo diventava il blocco piu' grande della
card e si mangiava il titolo. La risposta giusta era accorciare i testi, non
allargare la scatola. Sono stati riscritti sotto i 91 caratteri (vedi CATS
in scripts/gcatosa_catalog.py) e stanno in DUE righe a corpo ridotto.
Il colore resta --gc-muted e non scende a --gc-muted-2: la separazione dal
titolo la fa la dimensione, e #6C6C75 a 12px sul nero della pagina scende
sotto il rapporto di contrasto di 4,5:1. La gerarchia non si compra
togliendo leggibilita'.
`min-height` di due righe cosi' i blocchi di testo restano della stessa
forma anche quando un testo sta su una riga sola. */
.gc-card-blurb {
font-family: var(--font-sans);
font-size: 0.775rem;
line-height: 1.45;
color: var(--gc-muted);
margin: 0;
min-height: 2.9em;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.gc-card-foot {
margin-top: auto;
padding-top: 0.85rem;
border-top: 1px solid var(--gc-line-soft);
display: flex;
align-items: center;
justify-content: space-between;
font-family: var(--font-sans);
font-size: 0.775rem;
color: var(--gc-muted);
}
/* Il numero in bianco e la parola in grigio: e' l'unico dato della card, e
letto in fila su diciassette card e' anche l'unica cosa che le distingue
per taglia. Stessa forma della riga fatti dentro la categoria
("34 modelli"), cosi' il conteggio ha una faccia sola in tutto il
negozio. */
.gc-card-foot b { color: var(--color-offwhite); font-weight: 600; }
.gc-card-foot .gc-arrow {
transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
color: var(--gc-muted-2);
}
.gc-card:hover .gc-card-foot .gc-arrow { transform: translateX(4px); color: var(--color-offwhite); }
/* ============================================================ categoria */
.gc-crumb {
font-family: var(--font-sans);
font-size: 0.78rem;
color: var(--gc-muted-2);
margin-bottom: 1.5rem;
display: flex;
gap: 0.45rem;
align-items: center;
flex-wrap: wrap;
}
.gc-crumb a { color: var(--gc-muted); text-decoration: none; transition: color 0.25s ease; }
.gc-crumb a:hover { color: var(--color-offwhite); }
.gc-crumb span[aria-current] { color: var(--color-offwhite); }
.gc-cat-head {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 300px);
gap: clamp(1.5rem, 4vw, 3.5rem);
align-items: end;
padding-bottom: clamp(1.6rem, 3vw, 2.4rem);
border-bottom: 1px solid var(--gc-line-soft);
}
.gc-cat-figure {
border-radius: var(--gc-radius);
overflow: hidden;
}
/* Nella pagina di categoria la miniatura si stringe sull'altezza reale del
soggetto (--gc-tile-ar arriva da `heroAr`) e ritaglia il margine: la foto e'
sempre la stessa tela 4:5 della vetrina, ma qui non lascerebbe che mezza
cornice vuota sotto una vetrina sushi. */
/* La figura della categoria: la foto e' la tela 4:5 della vetrina e la
cornice si stringe sull'altezza reale del soggetto (--gc-tile-ar arriva da
`heroAr`), quindi qui il ritaglio lo fa `cover` sulla cornice intera. */
.gc-cat-figure .gc-tile-plate:not(.is-fit) img { object-fit: cover; object-position: center; }
.gc-filters {
display: flex;
align-items: center;
gap: 0.6rem;
flex-wrap: wrap;
}
.gc-filter {
position: relative;
display: inline-flex;
align-items: center;
}
.gc-filter select {
appearance: none;
background: rgba(255, 255, 255, 0.035);
border: 1px solid var(--gc-line);
border-radius: 999px;
color: var(--color-offwhite);
font-family: var(--font-sans);
font-size: 0.785rem;
padding: 0.5rem 2rem 0.5rem 0.95rem;
cursor: pointer;
transition: border-color 0.25s ease;
}
.gc-filter select:hover { border-color: rgba(255, 255, 255, 0.2); }
.gc-filter select:focus { outline: none; border-color: rgba(255, 255, 255, 0.3); }
.gc-filter select option { background: #101014; color: #F5F5F7; }
.gc-filter::after {
content: "";
position: absolute;
right: 0.85rem; top: 50%;
width: 6px; height: 6px;
border-right: 1.4px solid var(--gc-muted);
border-bottom: 1.4px solid var(--gc-muted);
transform: translateY(-70%) rotate(45deg);
pointer-events: none;
}
.gc-filter.is-set select { border-color: rgba(255, 255, 255, 0.34); background: rgba(255, 255, 255, 0.08); }
.gc-reset {
appearance: none;
border: 0; background: none;
color: var(--gc-muted-2);
font-family: var(--font-sans);
font-size: 0.775rem;
text-decoration: underline;
text-underline-offset: 3px;
cursor: pointer;
padding: 0.3rem;
}
.gc-reset:hover { color: var(--color-offwhite); }
.gc-family { margin-top: clamp(2.6rem, 5vw, 4rem); }
.gc-family-head {
display: flex;
align-items: baseline;
gap: 0.9rem;
flex-wrap: wrap;
margin-bottom: 1.5rem;
}
.gc-family-title {
font-family: var(--font-serif);
font-weight: 400;
font-size: clamp(1.4rem, 2.2vw, 1.85rem);
letter-spacing: -0.015em;
color: var(--color-white);
margin: 0;
}
.gc-family-count {
font-family: var(--font-sans);
font-size: 0.72rem;
letter-spacing: 0.09em;
text-transform: uppercase;
color: var(--gc-muted-2);
}
.gc-family-note {
width: 100%;
font-family: var(--font-sans);
font-size: 0.85rem;
line-height: 1.6;
color: var(--gc-muted);
margin: -0.5rem 0 0;
max-width: 76ch;
}
/* ------------------------------------------------------- card variante */
.gc-vgrid {
display: grid;
gap: clamp(1.1rem, 1.9vw, 1.6rem);
grid-template-columns: repeat(auto-fill, minmax(272px, 1fr));
}
.gc-vcard {
display: flex;
flex-direction: column;
/* La card e' diventata un (tutta cliccabile, senza piu' i pulsanti del
carrello): senza questo si porta dietro sottolineatura e colore link su
nome, codice e prezzo. */
text-decoration: none;
color: inherit;
padding-bottom: 0.95rem;
}
.gc-vcard:hover .gc-tile img { transform: scale(1.03); }
.gc-vlink { text-decoration: none; color: inherit; display: block; }
.gc-vcode {
display: inline-block;
margin-top: 0.85rem;
font-family: var(--font-sans);
font-size: 0.665rem;
font-weight: 600;
letter-spacing: 0.11em;
color: var(--gc-muted-2);
}
/* Il nome del modello a 17px stava sotto al proprio prezzo (18,5px, 600):
sulla card si sceglie per nome e si conferma col prezzo, non il contrario -
e il listino barrato accanto al prezzo lo rende gia' la cosa piu' vistosa
del blocco. 1.2rem rimette il nome davanti senza toccare il prezzo, che il
negozio tiene apposta senza rosso e senza riempimenti. */
.gc-vname {
font-family: var(--font-serif);
font-weight: 400;
font-size: 1.2rem;
line-height: 1.3;
color: var(--color-white);
margin: 0.3rem 0 0.7rem;
min-height: 2.6em;
}
.gc-chips { display: flex; flex-wrap: wrap; gap: 0.32rem; margin-bottom: 0.9rem; }
.gc-chip {
font-family: var(--font-sans);
font-size: 0.685rem;
letter-spacing: 0.01em;
color: #B9B9C1;
border: 1px solid var(--gc-line);
border-radius: 6px;
padding: 0.2rem 0.44rem;
white-space: nowrap;
/* General Sans stringe la coppia cifra+spazio: senza questo "2 porte" e
"2 fuochi" si leggono "2porte" e "2fuochi" mentre "4 fuochi" resta
corretto — un difetto che compare solo su certe cifre. */
word-spacing: 0.12em;
}
.gc-chip.is-cold { color: #A9C9E8; border-color: rgba(140, 185, 230, 0.24); }
.gc-chip.is-freeze { color: #A8BEE8; border-color: rgba(140, 165, 235, 0.24); }
.gc-chip.is-hot { color: #E8BFA0; border-color: rgba(232, 170, 120, 0.24); }
/* ------------------------------------------------------------- prezzi */
.gc-priceblock { margin-top: auto; padding-top: 0.55rem; border-top: 1px solid var(--gc-line-soft); }
.gc-price-row { display: flex; align-items: baseline; gap: 0.55rem; flex-wrap: wrap; }
.gc-price-old {
font-family: var(--font-sans);
font-size: 0.79rem;
color: var(--gc-muted-2);
text-decoration: line-through;
text-decoration-thickness: 1px;
}
.gc-price {
font-family: var(--font-sans);
font-size: 1.16rem;
font-weight: 600;
letter-spacing: -0.012em;
color: var(--color-white);
}
.gc-price .cur { font-size: 0.78em; font-weight: 500; margin-right: 0.14em; color: #CFCFD6; }
.gc-disc {
font-family: var(--font-sans);
font-size: 0.645rem;
font-weight: 600;
letter-spacing: 0.08em;
color: #E2E2E8;
border: 1px solid rgba(255, 255, 255, 0.18);
border-radius: 999px;
padding: 0.16rem 0.42rem;
white-space: nowrap;
}
.gc-vat {
display: block;
margin-top: 0.28rem;
font-family: var(--font-sans);
font-size: 0.68rem;
color: var(--gc-muted-2);
}
.gc-btn {
appearance: none;
cursor: pointer;
font-family: var(--font-sans);
font-size: 0.78rem;
font-weight: 500;
letter-spacing: 0.01em;
border-radius: 999px;
padding: 0.6rem 1rem;
text-align: center;
text-decoration: none;
transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease, transform 0.3s ease;
border: 1px solid var(--gc-line);
background: transparent;
color: var(--color-offwhite);
flex: 1;
}
.gc-btn:hover { border-color: rgba(255, 255, 255, 0.28); background: rgba(255, 255, 255, 0.05); }
.gc-btn-solid {
background: var(--color-offwhite);
border-color: var(--color-offwhite);
color: #08080A;
font-weight: 600;
}
.gc-btn-solid:hover { background: #fff; border-color: #fff; transform: translateY(-1px); }
.gc-btn-brand {
background: var(--color-magenta-brand);
border-color: var(--color-magenta-brand);
color: #fff;
font-weight: 600;
}
.gc-btn-brand:hover { background: var(--color-magenta-glow); border-color: var(--color-magenta-glow); }
.gc-empty {
font-family: var(--font-sans);
font-size: 0.92rem;
color: var(--gc-muted);
padding: 3.5rem 0;
text-align: center;
}
/* ======================================================= scheda modello */
.gc-pd {
display: grid;
grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr);
gap: clamp(1.8rem, 4.5vw, 4.5rem);
align-items: start;
}
.gc-pd-media { position: sticky; top: 6.5rem; max-width: 560px; }
.gc-pd-fam {
font-family: var(--font-sans);
font-size: 0.7rem;
font-weight: 500;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--color-magenta-glow);
}
.gc-pd-h1 {
font-family: var(--font-serif);
font-weight: 400;
font-size: clamp(1.9rem, 3.4vw, 2.9rem);
line-height: 1.1;
letter-spacing: -0.02em;
color: var(--color-white);
margin: 0.7rem 0 0.6rem;
}
.gc-pd-code {
font-family: var(--font-sans);
font-size: 0.8rem;
letter-spacing: 0.06em;
color: var(--gc-muted);
}
.gc-pd-code b { color: var(--color-offwhite); font-weight: 600; letter-spacing: 0.08em; }
.gc-pd-prices {
margin: 1.8rem 0 0.4rem;
padding: 1.15rem 1.25rem;
border: 1px solid var(--gc-line);
border-radius: var(--gc-radius);
background: linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0));
}
.gc-pd-prices .gc-price { font-size: 2rem; }
.gc-pd-prices .gc-price-old { font-size: 0.92rem; }
.gc-pd-listino {
font-family: var(--font-sans);
font-size: 0.72rem;
letter-spacing: 0.05em;
text-transform: uppercase;
color: var(--gc-muted-2);
margin-bottom: 0.35rem;
}
.gc-pd-save {
margin-top: 0.6rem;
font-family: var(--font-sans);
font-size: 0.79rem;
color: #B9B9C1;
}
.gc-pd-save b { color: var(--color-white); font-weight: 600; }
.gc-pd-buy { display: flex; gap: 0.65rem; align-items: center; margin-top: 1.15rem; flex-wrap: wrap; }
.gc-qty {
display: inline-flex;
align-items: center;
border: 1px solid var(--gc-line);
border-radius: 999px;
overflow: hidden;
}
.gc-qty button {
appearance: none; background: none; border: 0;
color: var(--color-offwhite);
font-size: 1rem; line-height: 1;
padding: 0.62rem 0.85rem;
cursor: pointer;
}
.gc-qty button:hover { background: rgba(255, 255, 255, 0.07); }
.gc-qty span {
font-family: var(--font-sans);
font-size: 0.85rem;
min-width: 2ch;
text-align: center;
color: var(--color-white);
}
.gc-pd-buy .gc-btn { flex: 1 1 160px; }
.gc-pd-desc {
font-family: var(--font-sans);
font-size: 0.92rem;
line-height: 1.7;
color: var(--gc-muted);
margin: 1.3rem 0 0;
}
.gc-specs { margin-top: clamp(2.6rem, 5vw, 4rem); }
.gc-specs-title {
font-family: var(--font-sans);
font-size: 0.72rem;
font-weight: 600;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--gc-muted-2);
margin: 0 0 1.1rem;
}
.gc-spec-table {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
gap: 0 clamp(1.5rem, 4vw, 3.5rem);
}
.gc-spec-row {
display: flex;
justify-content: space-between;
gap: 1.5rem;
padding: 0.68rem 0;
border-bottom: 1px solid var(--gc-line-soft);
font-family: var(--font-sans);
font-size: 0.845rem;
}
.gc-spec-k { color: var(--gc-muted); }
.gc-spec-v { color: var(--color-offwhite); text-align: right; font-weight: 500; }
.gc-related { margin-top: clamp(3rem, 6vw, 5rem); }
.gc-related .gc-vgrid { grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); }
.gc-related .gc-vname { font-size: 1.04rem; min-height: 0; }
.gc-note {
margin-top: clamp(3rem, 6vw, 5rem);
padding-top: 1.5rem;
border-top: 1px solid var(--gc-line-soft);
font-family: var(--font-sans);
font-size: 0.755rem;
line-height: 1.7;
color: var(--gc-muted-2);
max-width: 92ch;
}
/* ------------------------------------------------------------- mobile */
@media (max-width: 1040px) {
.gc-pd { grid-template-columns: 1fr; }
.gc-pd-media { position: static; max-width: 520px; }
.gc-cat-head { grid-template-columns: 1fr; align-items: start; }
.gc-cat-figure { max-width: 300px; order: -1; }
}
@media (max-width: 768px) {
.gc-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 1rem 0.85rem; }
.gc-card-title { font-size: 1.16rem; }
.gc-card-blurb { display: none; }
.gc-vgrid { grid-template-columns: repeat(auto-fill, minmax(158px, 1fr)); gap: 0.85rem; }
.gc-vcard { padding: 0.5rem 0.5rem 0.75rem; }
.gc-vname { font-size: 1.02rem; min-height: 2.4em; }
.gc-vactions { flex-direction: column; }
/* Sul telefono la barra e' due righe (campo di ricerca sopra, pillole
sotto): il respiro sotto puo' essere meno di quello di un desktop dove e'
una riga sola. */
.gc-toolbar { gap: 0.55rem; padding: 0.55rem 0; margin-bottom: 1.1rem; --gc-band-h: 92px; }
.gc-search { flex-basis: 100%; margin-left: 0; order: -1; }
.gc-count { display: none; }
.gc-spec-table { grid-template-columns: 1fr; }
.gc-pd-prices .gc-price { font-size: 1.6rem; }
}
@media (prefers-reduced-motion: reduce) {
.gc-card, .gc-card.is-in { transition: none !important; transform: none !important; }
.gc-tile img { transition: none !important; }
}
/* ------------------------------------------------- risultati di ricerca
La ricerca in vetrina filtra le categorie MA mostra anche i modelli che
corrispondono: chi arriva dal listino cerca "EBF-03", non "Abbattitori". */
.gc-hits {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.45rem;
margin: -0.6rem 0 1.9rem;
}
/* Vuoto (cioe' quasi sempre: c'e' solo quando si cerca) restava comunque a
pagare i suoi 30px di margine, in mezzo fra i filtri e la prima fascia. */
.gc-hits:empty { display: none; }
.gc-hits-label {
font-family: var(--font-sans);
font-size: 0.66rem;
font-weight: 600;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--gc-muted-2);
margin-right: 0.35rem;
}
.gc-hit {
display: inline-flex;
align-items: baseline;
gap: 0.5rem;
text-decoration: none;
border: 1px solid var(--gc-line);
border-radius: 999px;
padding: 0.38rem 0.8rem;
font-family: var(--font-sans);
font-size: 0.755rem;
transition: border-color 0.25s ease, background-color 0.25s ease;
max-width: 100%;
}
.gc-hit:hover { border-color: rgba(255, 255, 255, 0.28); background: rgba(255, 255, 255, 0.05); }
.gc-hit-code { color: var(--color-white); font-weight: 600; letter-spacing: 0.04em; }
.gc-hit-name { color: #B6B6BE; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 24ch; }
.gc-hit-cat { color: var(--gc-muted-2); }
@media (max-width: 768px) { .gc-hit-cat { display: none; } }
.gc-tile-empty .gc-tile-plate {
background: linear-gradient(180deg, #F4F4F7, #E4E4EA);
}
/* --- convivenza con shop.css -------------------------------------------
`.product-detail` e `.product-notfound` in shop.css portano ancora
larghezza, max-width e padding della vecchia scheda prodotto. Qui dentro
la misura la da' `.gc-shell`, quindi il guscio va azzerato: altrimenti si
sommano due contenitori e la pagina risulta stretta e sfalsata. */
.product-detail { width: 100%; max-width: none; margin: 0; padding: 0; }
.product-notfound { width: 100%; max-width: none; margin: 0; padding: 0; text-align: left; }
.product-notfound h1 { font-size: inherit; font-weight: 400; margin-bottom: 0; }
/* --- carrello: il listino resta visibile fino all'ultimo passaggio ------ */
.cart-item-listino {
margin-left: 0.5rem;
color: var(--gc-muted-2);
text-decoration: line-through;
text-decoration-thickness: 1px;
}
.cart-saving {
font-family: var(--font-sans);
font-size: 0.82rem;
color: var(--gc-muted);
margin-top: 0.35rem;
}
.cart-saving b { color: var(--color-white); font-weight: 600; }
/* ===================================================== scelta guidata
Dentro una categoria non si scorre un elenco: si risponde a una domanda
alla volta. Le card di scelta sono piu' grandi delle card modello di
proposito — sono la cosa da toccare, e a colpo d'occhio si deve capire che
quello e' un bivio, non un prodotto. */
.gc-step { margin-top: clamp(2.2rem, 4.5vw, 3.4rem); }
.gc-step-head { display: flex; align-items: baseline; gap: 0.9rem; flex-wrap: wrap; }
/* 2026-09-08 — LA COSA PIU' GRANDE DELLA PAGINA ERA LA RISPOSTA GIA' DATA.
Al secondo passo il titolo grande era "Slim 600 mm" a 66px - una misura, e
per giunta gia' scritta altre due volte nella stessa schermata, sul tasto
indietro e nella briciola - mentre la domanda ancora da rispondere, "Porta
cieca o a vetro?", stava a 33px, meta' esatta. La pagina gridava quello che
il visitatore aveva gia' deciso e sussurrava quello che gli restava da
decidere.
Adesso il rapporto e' rovesciato: la domanda e' l'elemento piu' grande
(45px su 1440), la testata scende a 39px e torna a fare quello che deve,
cioe' dire dove sei. Vedi anche .gc-h1 piu' sotto. */
.gc-step-q {
font-family: var(--font-serif);
font-weight: 400;
font-size: clamp(1.65rem, 3.1vw, 2.8rem);
line-height: 1.12;
letter-spacing: -0.018em;
color: var(--color-white);
margin: 0 0 1.4rem;
}
.gc-step-head .gc-step-q { margin-bottom: 1.4rem; }
.gc-step-hint {
font-family: var(--font-sans);
font-size: 0.8rem;
color: var(--gc-muted-2);
}
.gc-step-skip {
margin: 1.6rem 0 0;
font-family: var(--font-sans);
font-size: 0.82rem;
}
.gc-step-skip a {
color: var(--gc-muted);
text-decoration: underline;
text-underline-offset: 3px;
transition: color 0.25s ease;
}
.gc-step-skip a:hover { color: var(--color-offwhite); }
.gc-optgrid {
display: grid;
gap: clamp(1rem, 1.8vw, 1.5rem);
grid-template-columns: repeat(auto-fill, minmax(238px, 1fr));
}
.gc-optcard {
display: flex;
flex-direction: column;
text-decoration: none;
color: inherit;
opacity: 0;
transform: translateY(18px);
}
.gc-optcard.is-in {
opacity: 1; transform: none;
transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1),
transform 0.6s cubic-bezier(0.16, 1, 0.3, 1),
border-color 0.4s ease, box-shadow 0.5s ease;
will-change: opacity, transform;
}
.gc-optcard.is-settled { will-change: auto; }
.gc-optcard:hover .gc-tile img { transform: scale(1.04); }
.gc-optcard-body {
padding: 0.95rem 0.55rem 1.05rem;
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 0.7rem;
}
/* La card-risposta e' fatta di UNA parola: la foto li' e' un contorno, perche'
fra "Porta cieca" e "Porta in vetro" a decidere e' l'etichetta. A 18,6px
pesava meno del prezzo su una card modello. */
.gc-optcard-title {
font-family: var(--font-serif);
font-weight: 400;
font-size: 1.35rem;
line-height: 1.25;
letter-spacing: -0.01em;
color: var(--color-white);
margin: 0;
}
.gc-optcard-count {
font-family: var(--font-sans);
font-size: 0.72rem;
letter-spacing: 0.04em;
color: var(--gc-muted-2);
white-space: nowrap;
}
/* ------------------------------------------------------ tasto indietro */
/* IL TASTO INDIETRO VIVE IN UNA BARRA AGGANCIATA, NON IN CIMA ALLA PAGINA.
Prima stava in alto a sinistra e usciva dallo schermo al primo scroll: chi
arrivava in fondo a una scheda tecnica per tornare indietro doveva risalire
tutta la pagina. Ora sta in una barra che resta sotto la navbar per tutta la
pagina, insieme alle briciole — cosi' e' sempre a portata, e siccome la
barra e' larga quanto la finestra il tasto puo' essere un oggetto pieno e
non un contorno da 12px. */
.gc-subnav {
position: sticky;
top: var(--gc-band-h);
z-index: 40;
display: flex;
align-items: center;
gap: 1rem;
flex-wrap: wrap;
padding: 0.7rem 0 0.8rem;
margin-bottom: clamp(1.4rem, 3vw, 2.2rem);
}
.gc-subnav .gc-crumb { margin: 0; }
.gc-back {
display: inline-flex;
align-items: center;
gap: 0.5rem;
text-decoration: none;
font-family: var(--font-sans);
font-size: 0.875rem;
font-weight: 500;
letter-spacing: 0.005em;
color: var(--color-offwhite);
background: linear-gradient(180deg, rgba(255, 255, 255, 0.085), rgba(255, 255, 255, 0.035));
border: 1px solid rgba(255, 255, 255, 0.14);
border-radius: 999px;
padding: 0.6rem 1.15rem 0.6rem 0.85rem;
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.07) inset;
white-space: nowrap;
transition: color 0.25s ease, border-color 0.25s ease,
background-color 0.25s ease, transform 0.18s ease;
}
.gc-back:hover {
color: #fff;
border-color: rgba(255, 255, 255, 0.3);
background: rgba(255, 255, 255, 0.11);
}
.gc-back:active { transform: scale(0.975); }
.gc-back svg { transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1); }
.gc-back:hover svg { transform: translateX(-3px); }
@media (max-width: 640px) {
.gc-subnav { gap: 0.6rem; }
.gc-subnav .gc-crumb { display: none; } /* sul telefono conta il tasto, non il percorso */
}
/* ========================================================== contatti
Dallo shop non si compra: si parla con qualcuno. Tre canali sullo stesso
piano visivo, perche' la scelta e' del cliente e non c'e' un canale che
conviene all'azienda piu' degli altri; l'unico accento e' il verde
sull'icona di WhatsApp, che e' un colore che la gente riconosce prima di
leggere. */
.gc-contact {
margin-top: 1.5rem;
padding: 1.15rem 1.25rem 1.25rem;
border: 1px solid var(--gc-line);
border-radius: var(--gc-radius);
background: linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0));
}
.gc-contact-lead {
font-family: var(--font-sans);
font-size: 0.85rem;
line-height: 1.6;
color: var(--gc-muted);
margin: 0 0 1rem;
}
.gc-contact-row { display: grid; gap: 0.55rem; }
.gc-cbtn {
display: flex;
align-items: center;
gap: 0.8rem;
text-decoration: none;
border: 1px solid var(--gc-line);
border-radius: 12px;
padding: 0.72rem 0.9rem;
background: rgba(255, 255, 255, 0.02);
transition: border-color 0.3s ease, background-color 0.3s ease, transform 0.3s ease;
}
.gc-cbtn:hover {
border-color: rgba(255, 255, 255, 0.26);
background: rgba(255, 255, 255, 0.06);
transform: translateY(-1px);
}
.gc-cbtn-ico {
flex: none;
width: 34px; height: 34px;
display: grid; place-items: center;
border-radius: 10px;
background: rgba(255, 255, 255, 0.06);
color: var(--color-offwhite);
}
.gc-cbtn-ico svg { width: 17px; height: 17px; }
.gc-cbtn b {
display: block;
font-family: var(--font-sans);
font-size: 0.87rem;
font-weight: 600;
color: var(--color-white);
letter-spacing: -0.005em;
}
.gc-cbtn small {
display: block;
font-family: var(--font-sans);
font-size: 0.735rem;
color: var(--gc-muted-2);
margin-top: 0.1rem;
}
.gc-cbtn-wa .gc-cbtn-ico { color: #4ED08A; background: rgba(78, 208, 138, 0.12); }
.gc-cbtn-wa:hover { border-color: rgba(78, 208, 138, 0.4); }
@media (min-width: 620px) {
/* Colonne CONTATE, non fissate a tre: fuori orario il tasto "Chiama" non
c'e' proprio, e con `repeat(3, 1fr)` restava al suo posto un buco. Con
grid-auto-flow le colonne sono quante sono i pulsanti rimasti. */
.gc-contact-row { grid-auto-flow: column; grid-auto-columns: 1fr; }
.gc-cbtn { flex-direction: column; align-items: flex-start; gap: 0.6rem; padding: 0.9rem; }
}
@media (max-width: 768px) {
.gc-optgrid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 0.85rem; }
.gc-optcard { padding: 0.5rem 0.5rem 0; }
.gc-optcard-body { flex-direction: column; align-items: flex-start; gap: 0.25rem; padding: 0.7rem 0.2rem 0.8rem; }
.gc-optcard-title { font-size: 1.12rem; }
}
/* --- spaziature dopo la rimozione del blocco introduttivo ---------------
Nello shop la barra dei filtri e' diventata il primo elemento della pagina:
il margine che la staccava dal titolo ora aprirebbe solo un vuoto. Nella
categoria il testo e' corto (occhiello + titolo) e la foto e' alta: senza
allineamento al centro il titolo galleggia a meta' di una colonna vuota. */
.gc-page > .gc-toolbar:first-child { margin-top: 0; }
/* Il margine fra la testata e i filtri e' quello che si vede, non una tara.
Fino al 9 set valeva `--gc-band-h + 0.6rem` = 102px sul telefono, per non
farsi coprire dal fondo della barra (vedi il commento su
`.gc-toolbar::before`): un buco che sullo schermo di un iPhone stava fra la
frase introduttiva e i filtri e spingeva la prima card sotto la piega.
Adesso quel fondo si accende solo da agganciata e qui resta il respiro. */
.gc-shop-head + .gc-toolbar { margin-top: clamp(1.3rem, 3.4vw, 2.4rem); }
.gc-cat-head { align-items: center; }
/* 230 -> 195: la foto e' quella che detta l'altezza della testata (il blocco
e' allineato al centro), e con il titolo sceso a 37px la colonna di testo si
e' accorciata - soprattutto dai passi successivi al primo, dove la frase di
presentazione non c'e' piu' e restano due righe. A 230px la testata teneva
250px di altezza per 110px di testo, e fra i numeri e la domanda si apriva
un buco. La foto qui conferma dove sei, non e' il soggetto della pagina. */
.gc-cat-figure { width: 195px; justify-self: end; }
@media (max-width: 1040px) {
.gc-cat-figure { width: 250px; justify-self: start; }
}
/* --------------------------------------------- l'accento di temperatura
In fondo al foglio di proposito: queste regole devono vincere su quelle
generiche dei blocchi qui sopra, che sono state scritte quando lo shop
aveva un grigio solo. */
.gc-card-kicker,
.gc-overline { color: var(--gc-acc); }
/* Il filo di luce sul bordo alto della lastra prende la temperatura del
gruppo: e' un dettaglio da due pixel, ma e' quello che fa sembrare le card
accese invece che stampate. */
.gc-card, .gc-vcard, .gc-optcard { position: relative; overflow: hidden; }
.gc-card::before,
.gc-vcard::before,
.gc-optcard::before {
content: "";
position: absolute; inset: 0 0 auto 0; height: 1px;
background: linear-gradient(90deg, transparent, var(--gc-acc-soft) 22%,
var(--gc-acc-soft) 78%, transparent);
opacity: 0.85;
pointer-events: none;
}
.gc-card:hover, .gc-vcard:hover, .gc-optcard:hover { border-color: var(--gc-acc-soft); }
.gc-card:hover .gc-card-foot .gc-arrow { color: var(--gc-acc); }
/* La testata di categoria non e' piu' solo un titolo: il vuoto fra il titolo
e la miniatura era mezzo schermo di niente, e chi arrivava da una ricerca
non aveva modo di sapere cosa ci fosse dentro senza scorrere. */
.gc-cat-blurb {
font-family: var(--font-sans);
font-size: clamp(0.95rem, 1.5vw, 1.06rem);
line-height: 1.6;
color: var(--gc-steel);
margin: 1.1rem 0 0;
max-width: 54ch;
}
.gc-cat-facts {
font-family: var(--font-sans);
font-size: 0.83rem;
letter-spacing: 0.01em;
color: var(--gc-muted-2);
margin: 1.15rem 0 0;
display: flex;
align-items: baseline;
gap: 0.5rem;
flex-wrap: wrap;
}
.gc-cat-facts b { color: var(--color-offwhite); font-weight: 600; }
.gc-cat-facts .gc-dot { color: var(--gc-acc); opacity: 0.75; }
/* Il sottotitolo del modello. Sta subito sotto i chip, prima del prezzo:
e' la frase che spiega che cosa si sta guardando, e va letta prima di
decidere se il prezzo e' giusto. */
.gc-pd-lead {
font-family: var(--font-sans);
font-size: 0.95rem;
line-height: 1.62;
color: var(--gc-steel);
margin: 1.1rem 0 0;
max-width: 58ch;
}
.gc-pd-fam { color: var(--gc-acc); }
/* ===================================================== le tre fasce
La vetrina non e' un elenco di diciassette card: e' il negozio diviso in
tre reparti — il freddo, la vetrina, il caldo — che sono i tre gruppi del
listino e anche l'unica divisione che un ristoratore riconosce prima di
leggere. L'intestazione di fascia porta il colore del reparto (--gc-acc):
scorrendo, il colore dice sempre in che meta' del negozio ti trovi. */
.gc-sections { display: block; }
.gc-band + .gc-band { margin-top: clamp(2.8rem, 5vw, 4.5rem); }
.gc-band-head {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 1rem;
flex-wrap: wrap;
margin-bottom: clamp(1.1rem, 2vw, 1.6rem);
padding-bottom: 0.7rem;
/* Il filo sotto al titolo e' del colore del reparto e sfuma: e' una riga di
struttura, non un bordo di tabella. */
border-bottom: 1px solid transparent;
border-image: linear-gradient(90deg, var(--gc-acc-soft), rgba(255, 255, 255, 0.05) 55%,
transparent) 1;
}
/* 2026-09-08: il titolo della fascia era 32px contro i 20,5 delle card sotto,
cioe' 1,56 - lo stesso salto che c'e' fra una card e il suo testo. Un
reparto che apre sette categorie non e' un gradino della stessa altezza: e'
un capitolo. Con le card salite a 24px serviva comunque rialzarlo, o le due
cose sarebbero finite quasi pari. La scala della vetrina adesso e'
52 (titolo di pagina) / 38 (reparto) / 24 (categoria) / 12,4 (descrizione). */
.gc-band-title {
font-family: var(--font-serif);
font-weight: 400;
font-size: clamp(1.7rem, 2.9vw, 2.4rem);
line-height: 1.1;
letter-spacing: -0.015em;
color: var(--color-white);
margin: 0;
}
/* Il conteggio della fascia dice una cosa che vale la pena leggere - quanto e'
grande quel reparto - ma in maiuscolo spaziato competeva con il titolo della
fascia che ha accanto, e due cose in gara sulla stessa riga vuol dire che
nessuna delle due comanda. Resta il colore del reparto, che e' il segnale
utile; sparisce l'urlo. */
.gc-band-meta {
font-family: var(--font-sans);
font-size: 0.8rem;
letter-spacing: 0.005em;
color: var(--gc-acc);
}
/* Dentro una fascia l'occhiello della card ripeterebbe il titolo del reparto
sette volte di fila. Il colore del gruppo resta comunque sul filo in cima
alla lastra. Nella vista filtrata l'occhiello torna, perche' li' il gruppo
non e' scritto da nessuna parte. */
.gc-band .gc-card-kicker { display: none; }
.gc-band .gc-card-title { margin-top: 0.15rem; }
/* ===================================================== telefono: righe
SU TELEFONO LE CARD DIVENTANO RIGHE. Le card con la foto grande sono giuste
sul desktop, dove ce ne stanno quattro affiancate e la foto e' quello che
fa scegliere; su uno schermo da 390 px ne entrano due per schermata, e per
confrontare sei tavoli servono tre scorrimenti. In riga — miniatura, nome,
prezzo — sei modelli stanno in una schermata e il pollice ha una striscia
larga tutto lo schermo da toccare invece di un quadrato.
La proporzione della miniatura resta quella della categoria (--gc-tile-ar):
forzarla quadrata avrebbe rimpicciolito un tavolo da due metri fino a non
vederlo piu'. */
@media (max-width: 700px) {
.gc-optgrid,
.gc-vgrid { grid-template-columns: 1fr; gap: 0.6rem; }
/* --- la scelta guidata --- */
.gc-optcard {
display: grid;
grid-template-columns: 92px minmax(0, 1fr) 14px;
align-items: center;
column-gap: 0.95rem;
padding: 0.5rem 0.85rem 0.5rem 0.5rem;
}
.gc-optcard-body {
display: block;
padding: 0;
}
.gc-optcard-title { font-size: 1.14rem; margin-bottom: 0.12rem; }
.gc-optcard-count { display: block; }
/* La freccia: dice che la riga porta da qualche parte. Disegnata, non un
carattere, perche' un ">" cambia forma da un font all'altro. */
.gc-optcard::after {
content: "";
width: 8px; height: 8px;
border-right: 1.6px solid var(--gc-muted-2);
border-bottom: 1.6px solid var(--gc-muted-2);
transform: rotate(-45deg);
justify-self: end;
}
/* --- l'elenco dei modelli --- */
.gc-vcard {
display: grid;
grid-template-columns: 92px minmax(0, 1fr);
grid-template-rows: repeat(4, auto);
align-content: center;
column-gap: 0.95rem;
padding: 0.5rem 0.85rem 0.6rem 0.5rem;
}
.gc-vcard > .gc-tile { grid-row: 1 / -1; align-self: center; }
.gc-vcode { font-size: 0.63rem; }
.gc-vname { font-size: 1.06rem; min-height: 0; margin: 0.12rem 0 0.4rem; }
.gc-chips { margin-bottom: 0.4rem; gap: 0.28rem; }
/* Su una riga la misura non serve: e' nella scheda, e qui rubava spazio al
dato per cui si sta scegliendo (porte, temperatura, vasche). */
.gc-chips .gc-chip:last-child:not(:first-child) { display: none; }
.gc-priceblock { padding-top: 0.35rem; border-top: none; }
.gc-price { font-size: 1.12rem; }
/* Circoscritta alla CARD. Questo blocco e' scritto per le card in riga, ma
il selettore era nudo: nascondeva l'"IVA esclusa" anche sulla scheda del
modello, dove su telefono restava un prezzo grande e nient'altro a dire
che l'IVA non c'e' dentro. */
.gc-vcard .gc-vat { display: none; }
}
/* La testata di categoria, su telefono, era mezza schermata: foto larga
trecento pixel, titolo enorme, tre righe di frase e due di numeri prima del
primo prodotto. Qui la foto diventa una miniatura di fianco al titolo e la
frase passa sotto, a tutta larghezza. `display: contents` sul blocco del
titolo serve a portare occhiello, titolo, frase e numeri dentro la stessa
griglia della testata: senza, la miniatura non potrebbe stargli di fianco
senza stringere anche la frase. */
@media (max-width: 700px) {
.gc-cat-head {
display: grid;
grid-template-columns: 76px minmax(0, 1fr);
column-gap: 0.9rem;
row-gap: 0.35rem;
align-items: center;
padding-bottom: 1.1rem;
}
.gc-hero { display: contents; }
.gc-cat-figure {
width: 76px;
grid-column: 1;
grid-row: 1 / 3;
align-self: center;
justify-self: start;
order: 0;
}
.gc-overline { grid-column: 2; margin: 0; }
.gc-h1 { grid-column: 2; font-size: clamp(1.6rem, 8vw, 2.1rem); }
.gc-cat-blurb { grid-column: 1 / -1; font-size: 0.9rem; margin-top: 0.55rem; }
.gc-cat-facts { grid-column: 1 / -1; font-size: 0.76rem; margin-top: 0.5rem; }
/* "Tocca un modello per la scheda tecnica" non serve dove ogni riga ha il
prezzo e la freccia: sul telefono e' una riga di testo che sposta in giu'
il primo prodotto. */
.gc-step-hint { display: none; }
/* Stessa gerarchia del desktop: la domanda davanti alla testata (che qui
scende a ~25px, vedi .gc-h1 nel blocco 700px). A 1.5rem le due erano
identiche e il passo non aveva piu' un capo. */
.gc-step-q { font-size: 1.78rem; line-height: 1.14; }
.gc-family { margin-top: 2.2rem; }
}
/* Su telefono il titolo "3 modelli" ripete il primo dato della riga dei
numeri, due centimetri sopra. Le domande della scelta guidata restano:
quelle non hanno un doppione. */
@media (max-width: 700px) {
.gc-step-head .gc-step-q { display: none; }
.gc-step-head { margin-bottom: 0.2rem; }
.gc-vname { font-size: 1.02rem; }
}
/* Con tre modelli in una riga da cinque colonne restavano due quinti di
schermo vuoti a destra. `auto-fit` fa collassare le colonne che non
servono e le card rimaste si allargano fino a un massimo: la riga si
chiude invece di restare a meta'. Il massimo serve perche' senza, tre
card su un 27 pollici diventerebbero tre manifesti. */
@media (min-width: 701px) {
.gc-vgrid { grid-template-columns: repeat(auto-fit, minmax(268px, 360px)); }
.gc-optgrid { grid-template-columns: repeat(auto-fit, minmax(238px, 340px)); }
}
/* ============================================ la barra contatti mobile */
.gc-cbar { display: none; }
@media (max-width: 700px) {
.gc-cbar {
display: grid;
/* Vedi .gc-contact-row: le colonne sono quante sono i pulsanti che ci
sono davvero. Fuori orario "Chiama" sparisce e restano due. */
grid-auto-flow: column;
grid-auto-columns: 1fr;
gap: 0.5rem;
position: fixed;
left: 0; right: 0; bottom: 0;
z-index: 60;
padding: 0.6rem 0.9rem calc(0.6rem + env(safe-area-inset-bottom));
background: #08080B;
border-top: 1px solid rgba(255, 255, 255, 0.08);
/* Il velo sopra al bordo: il contenuto ci scorre sotto invece di
finire tagliato da una riga netta. */
box-shadow: 0 -18px 24px -18px rgba(0, 0, 0, 0.95);
}
.gc-cbar-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.4rem;
min-height: 46px; /* bersaglio da pollice, non da mouse */
border-radius: 12px;
border: 1px solid rgba(255, 255, 255, 0.13);
background: rgba(255, 255, 255, 0.055);
font-family: var(--font-sans);
font-size: 0.82rem;
font-weight: 600;
letter-spacing: 0.01em;
color: var(--color-offwhite);
text-decoration: none;
}
.gc-cbar-btn:active { transform: scale(0.975); }
.gc-cbar-ico { display: inline-flex; width: 17px; height: 17px; }
.gc-cbar-ico svg { width: 100%; height: 100%; }
.gc-cbar-wa { color: #7BE3AC; border-color: rgba(78, 208, 138, 0.34); }
.gc-cbar-wa .gc-cbar-ico { color: #4ED08A; }
/* I tre pulsanti dentro la pagina spariscono: quella barra li' sopra fa la
stessa cosa e sta sempre a portata. Resta la frase, che spiega perche'
non c'e' un carrello. */
.gc-contact-row { display: none; }
.gc-contact { padding-bottom: 1rem; }
/* Spazio in fondo, o la barra coprirebbe le ultime righe. Solo sulla scheda
modello: e' l'unica pagina che ha la barra, e altrove sarebbe un buco. */
#productDetail .gc-page { padding-bottom: 6.5rem; }
}
@media (max-width: 700px) {
/* Titolo e conteggio uno sotto l'altro: affiancati, "7 CATEGORIE · 104
MODELLI" andava a capo da solo e la riga diventava tre. */
.gc-band-head { display: block; margin-bottom: 1rem; }
.gc-band-meta { display: block; margin-top: 0.3rem; font-size: 0.72rem; }
.gc-band + .gc-band { margin-top: 2.6rem; }
}
/* Ancora piu' stretta. Con un titolo lungo ("Abbattitori di temperatura") la
testata restava a 235 px e il primo prodotto partiva a 463 px su uno schermo
da 844: si vedeva solo il bordo superiore della prima riga, e chi arriva
dalla vetrina non ha modo di capire che sotto c'e' un elenco. Qui si stringe
tutto — miniatura, corpo del titolo, interlinea della frase — e il primo
prodotto sale sopra la meta' dello schermo, dove si vede che e' una lista e
che si scorre. */
@media (max-width: 700px) {
.gc-cat-head {
grid-template-columns: 66px minmax(0, 1fr);
column-gap: 0.8rem;
row-gap: 0.2rem;
padding-bottom: 0.8rem;
}
.gc-cat-figure { width: 66px; }
.gc-overline { font-size: 0.6rem; letter-spacing: 0.16em; }
.gc-h1 { font-size: clamp(1.4rem, 6.4vw, 1.75rem); line-height: 1.08; }
.gc-cat-blurb {
font-size: 0.855rem;
line-height: 1.45;
margin-top: 0.45rem;
/* Due righe e mezzo: la frase serve a dire cosa c'e' dentro, non a essere
letta tutta prima di vedere un prodotto. Il resto e' nella scheda. */
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
.gc-cat-facts { font-size: 0.72rem; margin-top: 0.4rem; }
.gc-step { margin-top: 1.1rem; }
}
@media (max-width: 700px) {
/* Gli ultimi pixel, presi dove non costano niente: il vuoto sopra la barra
del tasto indietro, la barra stessa, e la frase del listino a due righe
invece di tre. Da qui in giu' non si taglia piu' niente senza togliere
qualcosa che serve. */
.gc-page { padding-top: 6rem; }
.gc-subnav { padding: 0.45rem 0 0.55rem; margin-bottom: 1rem; }
.gc-back { padding: 0.5rem 1rem 0.5rem 0.75rem; font-size: 0.84rem; }
.gc-cat-blurb { -webkit-line-clamp: 2; }
.gc-step { margin-top: 0.8rem; }
}
/* ==================================================== come si compra
Il blocco che sta fra il prezzo e la fine della scheda. Non e' una fila di
pulsanti con una didascalia: e' la spiegazione di come si arriva a portarsi
a casa la macchina, e i pulsanti sono l'ultima riga. La lastra e' la stessa
delle card, cosi' si legge come un oggetto e non come una nota a pie' di
pagina. */
.gc-buy {
margin-top: 1.5rem;
padding: 1.25rem 1.35rem 1.35rem;
border-radius: calc(var(--gc-radius) + 6px);
border: 1px solid var(--gc-surf-line);
background: linear-gradient(180deg, var(--gc-surf-1) 0%, var(--gc-surf-2) 100%);
box-shadow: var(--gc-elev);
position: relative;
overflow: hidden;
}
.gc-buy::before {
content: "";
position: absolute; inset: 0 0 auto 0; height: 1px;
background: linear-gradient(90deg, transparent, var(--gc-acc-soft) 22%,
var(--gc-acc-soft) 78%, transparent);
pointer-events: none;
}
.gc-buy-title {
font-family: var(--font-serif);
font-weight: 400;
font-size: clamp(1.18rem, 2vw, 1.42rem);
line-height: 1.24;
letter-spacing: -0.012em;
color: var(--color-white);
margin: 0.5rem 0 0;
}
.gc-buy-lead {
font-family: var(--font-sans);
font-size: 0.885rem;
line-height: 1.6;
color: var(--gc-steel);
margin: 0.55rem 0 0;
max-width: 62ch;
}
.gc-buy-lead b { color: var(--color-offwhite); font-weight: 600; }
/* I tre passi. Numerati perche' sono in fila per davvero: prima si verifica,
poi si ordina, poi arriva. */
.gc-buy-steps {
list-style: none;
margin: 1.15rem 0 0;
padding: 0;
display: grid;
gap: 0.75rem;
}
.gc-buy-steps li {
display: grid;
grid-template-columns: 1.55rem minmax(0, 1fr);
align-items: baseline;
column-gap: 0.75rem;
row-gap: 0.1rem;
font-family: var(--font-sans);
}
.gc-buy-n {
grid-row: 1 / 3;
display: inline-flex;
align-items: center;
justify-content: center;
width: 1.55rem; height: 1.55rem;
border-radius: 50%;
border: 1px solid var(--gc-acc-soft);
color: var(--gc-acc);
font-size: 0.72rem;
font-weight: 600;
align-self: start;
transform: translateY(-0.12rem);
}
.gc-buy-steps b {
font-size: 0.9rem;
font-weight: 600;
color: var(--color-offwhite);
letter-spacing: 0.002em;
}
.gc-buy-steps li > span:last-child {
grid-column: 2;
font-size: 0.855rem;
line-height: 1.55;
color: var(--gc-muted);
}
/* 2026-09-08: su desktop questa riga diceva "Scegli il canale che
preferisci." sopra tre pulsanti che dicono gia' da soli cosa sono, e
"canale" e' vocabolario da piano marketing, non la parola di un
ristoratore. Tolta: sul desktop il paragrafo non esiste piu' (sarebbe
rimasto vuoto e avrebbe lasciato il proprio margine). Sul telefono resta,
perche' li' serve davvero: i tre pulsanti non sono in pagina, sono nella
barra fissa in fondo, e senza una riga che lo dica non si trovano. */
.gc-buy-pick {
display: none;
font-family: var(--font-sans);
font-size: 0.82rem;
letter-spacing: 0.02em;
color: var(--gc-muted-2);
margin: 1.35rem 0 0.7rem;
}
.gc-buy .gc-contact-row { margin: 0; }
.gc-only-mobile { display: none; }
@media (max-width: 700px) {
.gc-only-desktop { display: none; }
.gc-only-mobile { display: inline; }
.gc-buy { padding: 1.05rem 1.05rem 1.15rem; }
.gc-buy-steps { gap: 0.85rem; }
/* La riga "scegli il canale" resta: e' quella che manda alla barra in
basso. Sparisce solo la fila di pulsanti, che la barra ha gia'. */
.gc-buy-pick { display: block; margin-bottom: 0; }
}
/* ==================================================== IL MAGENTA DEL MARCHIO
(2026-09-09) Lo shop era tutto bianco e blu acciaio: il magenta compariva
soltanto sul tasto della navbar, e dal telefono la richiesta e' stata
esattamente questa — "i copy dello shop non hanno quel tocco di magenta,
voglio che le parole piu' importanti e i pulsanti siano evidenziati".
La regola scritta prima (il magenta e' l'unica cosa che chiede di essere
toccata) non viene buttata: diventa una DOSE. Il fondo pieno resta di una
sola azione per schermata — WhatsApp, che e' come si compra qui — e il
colore va sulle parole che sono il MOTIVO della frase: quanti modelli,
quanto si risparmia, quale codice citare. Il blu dei tre reparti resta
dov'e': dice in che meta' del negozio sei, non e' un invito a cliccare. */
/* --- le parole che sono il motivo della frase ------------------------- */
.gc-shop-lead b, /* "204 modelli … meno 35%" nella vetrina */
.gc-cat-facts b, /* "34 modelli · da € 887,90" in cima a una cat. */
.gc-pd-save b { /* "Risparmio di € 822,50" */
color: var(--color-magenta-glow);
}
/* Il codice modello NO: e' un dato da copiare, non un invito. E le frecce
nemmeno: sono la punteggiatura della riga, non l'azione. (rev. 9 set) */
/* --- lo sconto: filo, non bollino ------------------------------------- */
.gc-disc {
color: var(--color-magenta-glow);
border-color: rgba(230, 35, 106, 0.42);
background: rgba(230, 35, 106, 0.07);
}
/* --- i tre passi di "come si compra" ---------------------------------- */
.gc-buy-n {
color: var(--color-magenta-glow);
border-color: rgba(230, 35, 106, 0.38);
}
/* --- il filtro attivo: e' un comando, non uno stato di lettura -------- */
.gc-pill.is-on {
color: #FFFFFF;
background: var(--color-magenta-brand);
border-color: var(--color-magenta-brand);
}
/* --- "Oppure vedi tutti i N modelli": e' l'uscita dal percorso guidato,
e finche' era grigio sottolineato non sembrava una scelta. --------- */
.gc-step-skip a { color: var(--color-magenta-glow); }
.gc-step-skip a:hover { color: #FFFFFF; }
/* --- WhatsApp: l'azione principale della scheda modello ---------------
L'icona resta quella di WhatsApp — la forma la riconosci comunque — ma il
pastello verde diceva "un canale fra tre". Qui e' il canale. */
.gc-cbtn-wa {
border-color: rgba(230, 35, 106, 0.45);
background: rgba(230, 35, 106, 0.08);
}
.gc-cbtn-wa .gc-cbtn-ico { color: #FFFFFF; background: var(--color-magenta-brand); }
.gc-cbtn-wa:hover {
border-color: var(--color-magenta-brand);
background: rgba(230, 35, 106, 0.14);
}
@media (max-width: 700px) {
/* la barra in fondo alla scheda modello: un solo pieno, gli altri due a filo */
.gc-cbar-wa {
color: #FFFFFF;
background: var(--color-magenta-brand);
border-color: var(--color-magenta-brand);
}
.gc-cbar-wa .gc-cbar-ico { color: #FFFFFF; }
}
/* La cornice comune puo' essere alta (gli armadi stanno su 0.56): in una
griglia larga diventerebbe una card di mezzo schermo. Il tetto e' sul
riquadro esterno; la lastra dentro resta della sua forma e si stringe. */
@media (max-width: 700px) {
.gc-optcard > .gc-tile, .gc-vcard > .gc-tile { max-height: 128px; }
}
@media (min-width: 701px) {
.gc-optcard .gc-tile, .gc-vcard .gc-tile { max-height: 320px; }
}
/* ================================================== LE TRANSIZIONI DI PAGINA
(2026-09-09) Lo shop e' fatto di pagine vere e resta cosi': indietro
funziona, un percorso si manda per messaggio. Quello che cambia e' che il
passaggio non e' piu' uno sfarfallio bianco. Il browser fotografa la pagina
che esce e quella che entra e anima il salto sul compositor — niente
libreria, niente finto caricamento.
Dove non c'e' (sotto Safari 18.2 / Chrome 126) la riga qui sotto viene
ignorata e si naviga come sempre. `js/gc-motion.js` decide QUALE foto
viaggia; qui c'e' solo COME si muove. */
@view-transition { navigation: auto; }
/* Il fondo: la pagina che esce si abbassa di un soffio e sfuma, quella che
entra sale. Corto — 240 ms — perche' deve sembrare reattivo, non "una
animazione": sopra i 300 ms su un elenco che si scorre col pollice diventa
attesa. */
@keyframes gc-esce { to { opacity: 0; transform: translateY(-8px) scale(0.995); } }
@keyframes gc-entra { from { opacity: 0; transform: translateY(12px); } }
::view-transition-old(root) {
animation: 200ms cubic-bezier(0.4, 0, 1, 1) both gc-esce;
}
::view-transition-new(root) {
animation: 320ms cubic-bezier(0.16, 1, 0.3, 1) both gc-entra;
}
/* Tornando indietro il verso si inverte: la pagina nuova arriva da sopra. */
html[data-gc-nav="indietro"]::view-transition-old(root) {
animation-name: gc-esce-giu;
}
html[data-gc-nav="indietro"]::view-transition-new(root) {
animation-name: gc-entra-su;
}
@keyframes gc-esce-giu { to { opacity: 0; transform: translateY(10px) scale(0.995); } }
@keyframes gc-entra-su { from { opacity: 0; transform: translateY(-12px); } }
/* LA FOTO CHE VIAGGIA. E' il pezzo che fa la differenza fra "e' cambiata
pagina" e "sono entrato dentro questa cosa qui": la lastra toccata si
sposta e cresce fino a diventare la foto in cima alla pagina nuova.
Cornici uguali di qua e di la' (una sola forma per categoria) vogliono dire
che il morph e' pulito e non stira niente; `object-fit: cover` sui due
fotogrammi e' la cintura di sicurezza per i casi in cui i rapporti non
coincidono — senza, il browser allunga gli scatti come chewing gum. */
::view-transition-group(gc-hero) {
animation-duration: 460ms;
animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
z-index: 20;
}
::view-transition-old(gc-hero),
::view-transition-new(gc-hero) {
object-fit: cover;
animation-duration: 460ms;
animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
}
/* La foto vecchia sparisce presto: sotto c'e' gia' quella nuova, alla stessa
posizione, e tenerle incrociate a lungo fa vedere il doppio bordo. */
::view-transition-old(gc-hero) { animation-duration: 180ms; }
/* Chi ha chiesto meno movimento non ne riceve nessuno: non e' una versione
piu' lenta, e' via del tutto. */
@media (prefers-reduced-motion: reduce) {
::view-transition-group(*),
::view-transition-old(*),
::view-transition-new(*) { animation: none !important; }
}
/* ---------------------------------------------- il tocco si sente
Su un telefono non c'e' l'hover a dire "questo si preme". La risposta e'
il rimpicciolimento sotto il dito, 60 ms, e torna. Vale per le righe e per
le card, non per i link di testo. */
.gc-card, .gc-optcard, .gc-vcard, .gc-hit {
transition: transform 0.32s cubic-bezier(0.16, 1, 0.3, 1),
border-color 0.3s ease, background-color 0.3s ease;
}
.gc-card:active, .gc-optcard:active, .gc-vcard:active, .gc-hit:active {
transform: scale(0.978);
transition-duration: 60ms;
}
@media (prefers-reduced-motion: reduce) {
.gc-card:active, .gc-optcard:active, .gc-vcard:active, .gc-hit:active { transform: none; }
}
/* IL NOME DELLA FOTO DI ARRIVO LO DA' IL CSS, NON JAVASCRIPT.
`pagereveal` scatta prima che il parser abbia letto gli script in fondo al
body: un nome messo li' arriva tardi e la foto sfuma invece di viaggiare.
Qui invece c'e' dal primo disegno. E' unico per pagina per costruzione —
una sola figura in cima alla categoria, una sola foto grande sulla scheda
modello — e js/gc-motion.js lo toglie con uno stile in linea quando e' una
card di questa pagina a dover viaggiare al posto suo. */
.gc-cat-figure .gc-tile-plate,
.gc-pd-media .gc-tile-plate { view-transition-name: gc-hero; }
/* IL TELEFONO FUORI ORARIO (scheda modello). Non si spegne: SPARISCE. Un
pulsante spento con il numero sotto e' comunque un numero da copiare, e la
telefonata arriva fuori orario lo stesso. `[hidden]` da solo non basta:
.gc-cbtn e .gc-cbar-btn hanno un `display` esplicito che lo batterebbe. */
.gc-cbtn[hidden], .gc-cbar-btn[hidden] { display: none !important; }
/* Al posto del pulsante, una riga che dice solo QUANDO si risponde. Nessuna
cifra del numero: e' il punto di tutto il meccanismo. */
.gc-buy-orari {
margin: 0.7rem 0 0;
font-family: var(--font-sans);
font-size: 0.82rem;
line-height: 1.5;
color: var(--gc-ink-3, rgba(255, 255, 255, 0.55));
}