/* fonts.css non si importa piu' da qui: un @import obbliga il browser a
scaricare e leggere questo file prima di scoprire che gliene serve un altro,
cioe' un giro di rete in fila invece che in parallelo. Adesso le due
dichiarazioni stanno nel di ogni pagina, una accanto all'altra. */
/* ============================================================================
OFFICINA VOLT — sito ufficiale
Palette e tipografia del brand: rame su carta tecnica fredda.
Archivo (insegne) · Public Sans (corpo) · Spline Sans Mono (etichette).
========================================================================== */
/* ============================================================================
I TOKEN — 9 settembre 2026.
Prima i colori stavano scritti a mano dentro le regole, in ventisei sfumature
diverse decise una alla volta. Qui c'e' una scala sola, misurata: ogni valore
che porta testo e' stato calcolato contro il fondo su cui finisce davvero, e
passa il rapporto 4,5:1 che serve per essere leggibile da tutti.
Tre difetti che questa scala corregge:
- il rame #b5622a faceva 4,03:1 sul bianco: sotto la soglia. Come fondo dei
bottoni con la scritta bianca faceva 4,43:1, sempre sotto. I tre bottoni
che portano su Amazon erano proprio quelli.
- il grigio #8a929d dei numeri e delle etichette faceva 2,86:1: illeggibile.
- non esisteva un rame vivo. Tutto il rame del sito era gia' scurito per
poter fare da testo, quindi il marchio, i bordi e gli accenti erano spenti.
Adesso il rame vivo (500) fa la grafica, il rame 600/700 fa i testi e i
bottoni, il rame 800/900 fa i titoli sui fondi tinti.
========================================================================== */
:root {
/* --- rame: la scala del marchio ------------------------------------- */
--ov-rame-50: #fbf4ee; /* velo appena percettibile */
--ov-rame-100: #f7e8de; /* fondo delle fasce tinte */
--ov-rame-200: #f2d7c5; /* bordi tenui su fondo tinto */
--ov-rame-300: #eac0a4; /* accento sui fondi scuri: 10,9:1 sulla notte */
--ov-rame-400: #e0a47b;
--ov-rame-500: #dc6e23; /* il rame vivo: grafica, bordi, marchio, titoli grandi */
--ov-rame-600: #b3571c; /* 4,89:1 sul bianco: testo e bottoni */
--ov-rame-700: #a7531b; /* 5,39:1: bottoni pieni, etichette */
--ov-rame-800: #8d4617; /* 6,95:1: testo su fondo tinto */
--ov-rame-900: #6c3a19; /* 9,30:1 */
--ov-rame-bordo: #ecd3bd; /* bordo che si vede sopra il rame-100 */
/* --- inchiostri ------------------------------------------------------ */
--ov-ink: #14161a; /* 17,9:1 sul bianco */
--ov-ink-2: #3d4551; /* 9,68:1 — testo secondario forte */
--ov-muted: #5f6875; /* 5,64:1 — testo di servizio */
--ov-faint: #636c78; /* 4,89:1 sulla carta e 4,60 sulla carta scura:
passa ovunque, non solo sul bianco */
/* --- superfici chiare ------------------------------------------------ */
--ov-carta: #f7f5f2; /* carta calda: sta meglio col rame della carta fredda */
--ov-carta-2: #f1eee9; /* seconda carta, per alternare le fasce */
--ov-bianco: #ffffff;
/* --- superfici scure ------------------------------------------------- */
--ov-notte: #12151b;
--ov-notte-2: #1b2029; /* le schede appoggiate sulla notte */
--ov-notte-3: #262c37; /* bordo e rilievo dentro la notte */
--ov-notte-testo: #b6bec9;/* 9,75:1 sulla notte */
--ov-notte-linea: rgba(255,255,255,.13);
/* --- linee ----------------------------------------------------------- */
--ov-linea-soft: #eceef2;
--ov-linea: #e0e4ea;
--ov-linea-forte: #cfd5de;
/* --- semaforo -------------------------------------------------------- */
--ov-ok: #1f6b45; --ov-ok-velo: #e6f0ea;
--ov-male: #9d3339; --ov-male-velo: #fbeced;
/* --- rilievo: due strati, tinta calda (l'ombra grigia su carta calda
sporca, questa no) ------------------------------------------------ */
--ov-ombra-1: 0 1px 2px rgba(38,26,16,.05), 0 2px 8px rgba(38,26,16,.045);
--ov-ombra-2: 0 2px 5px rgba(38,26,16,.06), 0 12px 28px rgba(38,26,16,.09);
--ov-ombra-3: 0 4px 10px rgba(38,26,16,.07), 0 26px 60px rgba(38,26,16,.13);
--ov-ombra-rame: 0 1px 2px rgba(141,70,23,.24), 0 10px 24px rgba(141,70,23,.22);
/* --- raggi ----------------------------------------------------------- */
--ov-r-xs: 6px; --ov-r-s: 10px; --ov-r-m: 14px; --ov-r-l: 20px; --ov-r-xl: 28px;
--ov-r-tondo: 999px;
/* --- scala tipografica: fluida dove serve, fissa dove deve restare
leggibile anche sul telefono ------------------------------------- */
--ov-t-3xs: 0.72rem; /* 11,5 px: il pavimento, sotto non si scende */
--ov-t-2xs: 0.76rem;
--ov-t-xs: 0.84rem;
--ov-t-s: 0.93rem;
--ov-t-m: 1rem;
--ov-t-l: 1.09rem;
--ov-t-xl: clamp(1.18rem, 1.09rem + 0.36vw, 1.36rem);
--ov-t-2xl: clamp(1.38rem, 1.20rem + 0.86vw, 1.78rem);
--ov-t-3xl: clamp(1.72rem, 1.38rem + 1.60vw, 2.40rem);
--ov-t-4xl: clamp(2.05rem, 1.50rem + 2.70vw, 3.20rem);
--ov-t-5xl: clamp(2.35rem, 1.45rem + 4.40vw, 4.20rem);
/* --- spazi ----------------------------------------------------------- */
--ov-s1: 4px; --ov-s2: 8px; --ov-s3: 12px; --ov-s4: 16px; --ov-s5: 22px;
--ov-s6: 28px; --ov-s7: 36px; --ov-s8: 46px; --ov-s9: 60px; --ov-s10: 76px;
--ov-sez: clamp(48px, 6.4vw, 92px); /* respiro fra due fasce */
/* --- movimento -------------------------------------------------------- */
--ov-veloce: 140ms;
--ov-medio: 220ms;
--ov-lento: 420ms;
--ov-curva: cubic-bezier(.2,.7,.3,1);
/* ======================================================================
I nomi storici, rimappati sulla scala. Il resto del foglio e tutte le
pagine gia' scritte continuano a funzionare senza toccare una riga.
==================================================================== */
--ge-bg: var(--ov-carta);
--ge-surface: var(--ov-bianco);
--ge-ink: var(--ov-ink);
--ge-muted: var(--ov-muted);
--ge-faint: var(--ov-faint);
--ge-line: var(--ov-linea);
--ge-copper: var(--ov-rame-500); /* solo grafica e testi grandi */
--ge-copper-dark: var(--ov-rame-700);
--ge-copper-deep: var(--ov-rame-800);
--ge-copper-soft: var(--ov-rame-100);
--ge-azione: var(--ov-rame-700); /* fondo dei bottoni pieni: 5,39:1 */
--ge-azione-su: var(--ov-rame-800);
--ge-paper: #fbfaf9;
--ge-ombra-1: var(--ov-ombra-1);
--ge-ombra-2: var(--ov-ombra-2);
--ge-raggio: var(--ov-r-m);
--ge-verde-velo: var(--ov-ok-velo);
--ge-ok: var(--ov-ok);
--ge-danger: var(--ov-male);
--ge-display: "Archivo", "Avenir Next", "Segoe UI", sans-serif;
--ge-text: "Public Sans", "Helvetica Neue", Arial, sans-serif;
--ge-mono: "Spline Sans Mono", "SF Mono", Menlo, monospace;
color-scheme: light;
}
*, *::before, *::after { box-sizing: border-box; }
/* Senza questa riga [hidden] perde contro .ge-article-card{display:flex}
e la ricerca dello schedario annuncia di aver filtrato senza filtrare. */
[hidden] { display: none !important; }
/* Ogni bersaglio di ancora deve fermarsi sotto la testata appiccicosa, non dietro. */
[id] { scroll-margin-top: 84px; }
body, h1, h2, h3, p, ul, ol, figure { margin: 0; }
img, svg { display: block; max-width: 100%; height: auto; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
background: var(--ge-bg);
color: var(--ge-ink);
font-family: var(--ge-text);
font-size: 1rem;
line-height: 1.65;
-webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
:focus-visible { outline: 2px solid var(--ge-copper); outline-offset: 2px; }
.ge-container { max-width: 1080px; margin: 0 auto; padding-inline: 20px; }
.ge-mono-label {
font-family: var(--ge-mono);
font-size: 0.72rem; font-weight: 600;
letter-spacing: 0.12em; text-transform: uppercase;
color: var(--ge-copper-dark);
}
.ge-inline-link { color: var(--ge-copper-dark); text-decoration: underline; text-underline-offset: 2px; }
.ge-inline-link:hover { color: var(--ov-rame-600); }
.ge-skip {
position: absolute; left: -9999px; top: 0; z-index: 100;
background: var(--ge-copper-dark); color: #fff; padding: 10px 16px; border-radius: 0 0 8px 0;
font-weight: 600;
}
.ge-skip:focus { left: 0; }
/* ------------------------------------------------------------- testata --- */
.ge-header { background: var(--ge-surface); border-bottom: 1px solid var(--ge-line); position: sticky; top: 0; z-index: 30; }
.ge-header-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-block: 14px; }
.ge-brand { display: flex; align-items: center; gap: 10px; }
.ge-brand-mark { width: 30px; height: 30px; flex: none; color: var(--ge-copper); }
.ge-brand-testo { display: flex; flex-direction: column; line-height: 1.05; }
.ge-brand-sotto {
font-family: var(--ge-mono); font-size: 0.6rem; font-weight: 600;
letter-spacing: 0.16em; text-transform: uppercase; color: var(--ge-muted); margin-top: 3px;
}
.ge-brand-name { font-family: var(--ge-display); font-weight: 500; font-size: 1.08rem; letter-spacing: -0.015em; }
.ge-brand-name em { font-style: normal; font-weight: 800; }
.ge-nav { display: flex; gap: 2px; flex-wrap: wrap; }
.ge-nav-link { padding: 8px 12px; border-radius: 8px; font-weight: 600; font-size: 0.95rem; color: var(--ge-muted); }
.ge-nav-link:hover { color: var(--ge-ink); background: var(--ge-bg); }
.ge-nav-link[aria-current="page"],
.ge-nav-link[data-sezione="attiva"] { color: var(--ge-copper-dark); background: var(--ge-copper-soft); }
@media (max-width: 720px) {
.ge-header { position: static; }
.ge-header-row { flex-direction: column; align-items: flex-start; gap: 8px; }
.ge-nav { margin-inline: -6px; }
.ge-nav-link { padding: 6px 10px; font-size: 0.9rem; }
}
/* ---------------------------------------------------------------- hero --- */
.ge-hero-actions { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
@media (max-width: 900px) {
}
/* --------------------------------------------------------------- garment - */
.cta-guide {
display: inline-flex; align-items: center; gap: 10px;
background: var(--ge-copper-dark); color: #fff;
font-family: var(--ge-display); font-weight: 700; font-size: 1rem;
padding: 14px 24px; border-radius: 999px;
box-shadow: 0 1px 2px rgba(116,61,23,.24), 0 8px 20px rgba(116,61,23,.18);
transition: background 160ms ease, box-shadow 200ms ease, transform 160ms ease;
}
.cta-guide span { transition: transform 160ms ease; }
.cta-guide:hover { background: var(--ge-copper-deep); box-shadow: 0 2px 4px rgba(116,61,23,.28), 0 14px 30px rgba(116,61,23,.24); transform: translateY(-1px); }
.cta-guide:hover span { transform: translateX(4px); }
.cta-news { display: inline-block; position: relative; font-weight: 600; font-size: 1rem; color: var(--ge-ink); padding: 12px 4px; }
.cta-news::after { content: ""; position: absolute; left: 4px; right: 100%; bottom: 8px; height: 2px; background: var(--ge-copper); transition: right 180ms ease; }
.cta-news:hover::after { right: 4px; }
.cta-news-inverse { color: #fff; }
.cta-news-inverse::after { background: #fff; }
.cta-form {
display: block; width: 100%;
background: var(--ge-copper-dark); color: #fff; border: none; cursor: pointer;
font-family: var(--ge-mono); font-weight: 600; font-size: 0.9rem;
letter-spacing: 0.08em; text-transform: uppercase;
padding: 14px 18px; border-radius: 10px;
transition: transform 100ms ease, background 160ms ease;
}
.cta-form:hover { background: var(--ge-copper-deep); }
.cta-form:active { transform: translateY(1px); }
/* --------------------------------------------------------------- numeri -- */
/* -------------------------------------------------------------- sezioni -- */
.ge-section { padding: 64px 0 16px; }
.ge-section-title { font-family: var(--ge-display); font-weight: 700; font-size: clamp(1.45rem, 3vw, 2rem); letter-spacing: -0.022em; line-height: 1.15; margin: 0 0 10px; text-wrap: balance; }
.ge-section-blurb { color: var(--ge-muted); max-width: 68ch; margin: 0 0 20px; }
.ge-article-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; margin-top: 22px; padding-bottom: 44px; }
.ge-article-card {
display: flex; flex-direction: column; gap: 7px; position: relative; isolation: isolate;
background: var(--ge-surface); border: 1px solid var(--ge-line);
border-radius: var(--ge-raggio); padding: 22px 22px 18px;
box-shadow: var(--ge-ombra-1);
transition: box-shadow 200ms ease, transform 200ms ease, border-color 200ms ease;
}
/* La riga di rame compare solo al passaggio: un accento fisso su ogni card e'
rumore, uno che appare e' un'indicazione. */
.ge-article-card::before {
content: ""; position: absolute; inset: auto 0 0 0; height: 3px;
background: var(--ge-copper); border-radius: 0 0 var(--ge-raggio) var(--ge-raggio);
transform: scaleX(0); transform-origin: left; transition: transform 220ms ease;
}
.ge-article-card:hover { border-color: var(--ov-linea-forte); box-shadow: var(--ge-ombra-2); transform: translateY(-3px); }
.ge-article-card:hover::before { transform: scaleX(1); }
.ge-article-card .ge-mono-label { color: var(--ge-copper-dark); font-size: var(--ov-t-3xs); }
.ge-article-card-title { font-family: var(--ge-display); font-weight: 700; font-size: 1.14rem; line-height: 1.28; letter-spacing: -0.012em; text-wrap: balance; }
.ge-article-card-desc { font-size: 0.93rem; color: var(--ge-muted); flex: 1; }
.ge-article-card-models {
font-family: var(--ge-mono); font-size: var(--ov-t-3xs); color: var(--ov-faint); letter-spacing: 0.08em;
text-transform: uppercase; margin-top: 6px; padding-top: 10px; border-top: 1px solid var(--ge-line);
}
/* ------------------------------------------------------------- ricerca --- */
.ge-cerca { position: relative; max-width: 460px; margin-top: 22px; }
.ge-cerca input {
width: 100%; border: 1px solid var(--ge-line); border-radius: 10px;
padding: 12px 14px 12px 42px; font-family: var(--ge-text); font-size: 1rem;
background: var(--ge-surface); color: var(--ge-ink);
}
.ge-cerca input:focus { border-color: var(--ge-copper); outline: none; box-shadow: 0 0 0 3px var(--ge-copper-soft); }
.ge-cerca svg { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); width: 17px; height: 17px; stroke: var(--ge-muted); fill: none; stroke-width: 1.8; }
.ge-cerca-esito { font-family: var(--ge-mono); font-size: 0.78rem; color: var(--ge-muted); margin-top: 10px; letter-spacing: 0.04em; }
/* ----------------------------------------------------------- banda oro -- */
.ge-honest { background: var(--ge-copper-soft); border-block: 1px solid var(--ge-line); padding: 44px 0; margin-top: 40px; }
.ge-honest-title { font-family: var(--ge-display); font-weight: 700; font-size: 1.5rem; margin: 0 0 10px; }
.ge-honest-text { max-width: 72ch; margin: 0; }
.ge-newsband { background: var(--ge-ink); color: #fff; padding: 44px 0; }
.ge-newsband-row { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.ge-newsband-title { font-family: var(--ge-display); font-weight: 700; font-size: 1.5rem; margin: 0 0 6px; }
.ge-newsband-sub { color: var(--ov-notte-testo); max-width: 56ch; margin: 0; }
/* --------------------------------------------------------- testa pagina -- */
.ge-pagehead { background: var(--ge-surface); border-bottom: 1px solid var(--ge-line); padding: 56px 0 40px; }
.ge-page-title { font-family: var(--ge-display); font-weight: 800; font-size: clamp(1.9rem, 4.6vw, 2.8rem); letter-spacing: -0.02em; line-height: 1.1; margin: 12px 0 14px; text-wrap: balance; }
.ge-page-sub { max-width: 64ch; font-size: 1.08rem; color: var(--ge-muted); margin: 0; }
.ge-prose { max-width: 760px; padding-bottom: 48px; }
.ge-prose h2 { font-family: var(--ge-display); font-weight: 700; font-size: 1.35rem; margin: 36px 0 10px; }
.ge-prose p { margin: 0 0 14px; }
.ge-prose ul { margin: 0 0 14px; padding-left: 22px; }
.ge-prose li { margin-bottom: 6px; }
.ge-prose code { font-family: var(--ge-mono); font-size: 0.85em; background: var(--ge-surface); border: 1px solid var(--ge-line); border-radius: 4px; padding: 1px 5px; }
/* -------------------------------------------------------------- scheda --- */
.ge-article { background: var(--ge-surface); }
.ge-article-container { max-width: 800px; padding-block: 34px 56px; }
.ge-breadcrumb { font-size: 0.85rem; color: var(--ge-muted); margin-bottom: 18px; }
.ge-breadcrumb a:hover { color: var(--ge-copper-dark); text-decoration: underline; }
.ge-article-title { font-family: var(--ge-display); font-weight: 800; font-size: clamp(1.7rem, 4.4vw, 2.5rem); line-height: 1.12; letter-spacing: -0.015em; margin: 10px 0 8px; text-wrap: balance; }
.ge-article-meta { font-family: var(--ge-mono); font-size: 0.75rem; color: var(--ge-muted); margin: 0 0 22px; letter-spacing: 0.04em; }
.ge-article-meta span + span::before { content: " · "; }
.ge-disclosure {
font-size: 0.88rem; color: var(--ge-muted);
background: var(--ge-bg); border: 1px solid var(--ge-line); border-left: 4px solid var(--ge-copper);
border-radius: 8px; padding: 12px 16px; margin-bottom: 28px;
}
/* In breve: la risposta prima del testo lungo */
.ge-breve {
background: var(--ge-copper-soft);
border: 1px solid var(--ov-rame-bordo); border-radius: 12px;
padding: 22px 24px; margin-bottom: 30px;
}
.ge-breve-q { font-family: var(--ge-display); font-weight: 700; font-size: 1.14rem; line-height: 1.3; margin: 8px 0 10px; text-wrap: balance; }
.ge-breve-a { margin: 0 0 14px; font-size: 1.03rem; }
.ge-breve-punti { margin: 0; padding-left: 20px; font-size: 0.95rem; }
.ge-breve-punti li { margin-bottom: 6px; }
.ge-breve-punti li::marker { color: var(--ge-copper); }
/* Indice della scheda */
.ge-toc { border: 1px solid var(--ge-line); border-radius: 10px; padding: 16px 20px; margin-bottom: 30px; background: var(--ge-bg); }
.ge-toc-title { font-family: var(--ge-mono); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ge-muted); margin-bottom: 8px; }
.ge-toc ol { margin: 0; padding-left: 20px; font-size: 0.94rem; }
.ge-toc li { margin-bottom: 4px; }
.ge-toc li::marker { font-family: var(--ge-mono); color: var(--ge-copper); font-size: 0.8em; }
.ge-toc a:hover { color: var(--ge-copper-dark); text-decoration: underline; }
.article-body { font-size: 1.09rem; line-height: 1.72; }
.article-body p { margin: 0 0 18px; max-width: 68ch; text-wrap: pretty; }
.article-body h2 { font-family: var(--ge-display); font-weight: 700; font-size: 1.58rem; letter-spacing: -0.022em; line-height: 1.2; margin: 46px 0 14px; text-wrap: balance; scroll-margin-top: 96px; }
.article-body h3 { font-family: var(--ge-display); font-weight: 700; font-size: 1.12rem; margin: 26px 0 8px; }
.article-body ul, .article-body ol { margin: 0 0 16px; padding-left: 22px; }
.article-body li { margin-bottom: 6px; }
.article-body a { color: var(--ge-copper-dark); text-decoration: underline; text-underline-offset: 2px; }
.article-body a:hover { color: var(--ov-rame-600); }
.article-body strong { font-weight: 600; }
.article-body em { font-style: italic; }
.article-body table { border-collapse: collapse; width: 100%; font-size: 0.95rem; margin: 0 0 16px; }
.article-body th, .article-body td { border: 1px solid var(--ge-line); padding: 8px 10px; text-align: left; }
.article-body code { font-family: var(--ge-mono); font-size: 0.86em; background: var(--ge-bg); border: 1px solid var(--ge-line); border-radius: 4px; padding: 1px 5px; }
.article-body .product-card {
background: var(--ge-bg); border: 1px solid var(--ge-line); border-left: 4px solid var(--ge-copper);
border-radius: 10px; padding: 16px 18px; margin: 20px 0;
}
.article-body .pc-name { font-family: var(--ge-display); font-weight: 700; font-size: 1.05rem; margin-bottom: 4px; }
.article-body .pc-note { font-size: 0.92rem; color: var(--ge-muted); margin: 0 0 10px; max-width: none; }
.article-body .pc-meta { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.article-body .pc-price { font-family: var(--ge-mono); font-weight: 600; font-size: 0.9rem; }
.article-body .pc-meta a {
display: inline-block; background: var(--ge-copper-dark); color: #fff; text-decoration: none;
font-weight: 600; font-size: 0.9rem; padding: 8px 16px; border-radius: 999px;
transition: background 160ms ease;
}
.article-body .pc-meta a:hover { background: var(--ge-copper-deep); }
/* Domande frequenti, visibili in pagina */
.ge-faq { margin-top: 44px; border-top: 1px solid var(--ge-line); padding-top: 8px; }
.ge-faq-title { font-family: var(--ge-display); font-weight: 700; font-size: 1.45rem; margin: 24px 0 6px; }
.ge-faq details { border-bottom: 1px solid var(--ge-line); }
.ge-faq summary {
display: flex; align-items: flex-start; gap: 10px;
padding: 16px 0; font-weight: 600; font-size: 1.02rem;
cursor: pointer; list-style: none;
}
.ge-faq summary::-webkit-details-marker { display: none; }
.ge-faq summary::before { content: "+"; font-family: var(--ge-mono); color: var(--ge-copper-dark); font-size: 1.1rem; line-height: 1.35; flex: none; }
.ge-faq details[open] summary::before { content: "\2212"; }
.ge-faq-a { color: var(--ge-muted); padding: 0 0 16px 26px; margin: 0; max-width: 70ch; }
/* --------------------------------------------------------- app promo ---- */
.ge-app { background: var(--ge-surface); border: 1px solid var(--ge-line); border-top: 4px solid var(--ge-copper); border-radius: 12px; padding: 26px; margin-top: 34px; }
.ge-app-title { font-family: var(--ge-display); font-weight: 700; font-size: 1.3rem; margin: 0 0 8px; }
.ge-app-text { color: var(--ge-muted); margin: 0 0 16px; max-width: 62ch; }
/* ------------------------------------------------------------ iscrizione - */
.ge-news-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 40px; align-items: start; }
.ge-news-list { margin: 18px 0 0; padding-left: 20px; }
.ge-news-list li { margin-bottom: 8px; }
.ge-form-card { background: var(--ge-surface); border: 1px solid var(--ge-line); border-top: 4px solid var(--ge-copper); border-radius: 12px; padding: 26px; }
.ge-form-title { font-family: var(--ge-display); font-weight: 700; font-size: 1.25rem; margin: 0 0 12px; }
.ge-form-sub { color: var(--ge-muted); margin: 0; }
.ge-form { display: flex; flex-direction: column; gap: 14px; }
.ge-field { display: flex; flex-direction: column; gap: 6px; }
.ge-field-label { font-family: var(--ge-mono); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ge-muted); }
.ge-field input {
border: 1px solid var(--ge-line); border-radius: 8px; padding: 11px 12px;
font-family: var(--ge-text); font-size: 1rem; background: var(--ge-bg); color: var(--ge-ink);
}
.ge-field input:focus { border-color: var(--ge-copper); outline: none; box-shadow: 0 0 0 3px var(--ge-copper-soft); }
.ge-consent { display: flex; gap: 10px; align-items: flex-start; font-size: 0.85rem; color: var(--ge-muted); }
.ge-consent input { margin-top: 3px; accent-color: var(--ge-copper); }
.ge-form-error { background: var(--ov-male-velo); border: 1px solid #e8c6c8; color: var(--ge-danger); border-radius: 8px; padding: 10px 14px; font-size: 0.9rem; margin: 0 0 14px; }
.ge-esca { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
/* --------------------------------------------------------------- fondo --- */
.ge-footer { background: var(--ge-surface); border-top: 1px solid var(--ge-line); padding: 40px 0 32px; }
/* Quattro colonne, non tre. Con tre, "Il sito" aveva quindici voci contro le
otto di "Argomenti" e la colonna del marchio restava vuota per due terzi:
il fondo pagina sembrava sbilanciato perche' lo era. Adesso gli elenchi sono
8, 7 e 8 voci, e i social stanno sotto la descrizione invece che da soli su
una riga a parte. align-items:start tiene le intestazioni sulla stessa riga. */
.ge-footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 32px 28px;
align-items: start; }
.ge-footer-text { color: var(--ge-muted); font-size: 0.92rem; max-width: 50ch; margin: 8px 0 0; }
.ge-footer-nav { display: flex; flex-direction: column; gap: 8px; }
.ge-footer-head { font-family: var(--ge-mono); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ge-muted); }
.ge-footer-link { font-size: 0.95rem; }
.ge-footer-link:hover { color: var(--ge-copper-dark); text-decoration: underline; }
.ge-footer-legal { border-top: 1px solid var(--ge-line); margin-top: 28px; padding-top: 18px; display: flex; flex-direction: column; gap: 8px; }
.ge-footer-legal p { font-size: 0.8rem; color: var(--ge-muted); margin: 0; max-width: 90ch; }
.ge-center-page { min-height: 60vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; text-align: center; padding: 60px 20px; }
.ge-center-title { font-family: var(--ge-display); font-weight: 800; font-size: 1.8rem; margin: 0; }
.ge-center-sub { color: var(--ge-muted); margin: 0 0 10px; max-width: 52ch; }
@media (max-width: 860px) {
.ge-footer-grid { grid-template-columns: 1fr 1fr; }
.ge-footer-grid > :first-child { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
.ge-news-grid { grid-template-columns: 1fr; }
.ge-footer-grid { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
.cta-guide, .cta-guide span, .cta-news::after, .cta-form, .ge-article-card { transition: none; } .ge-article-card:hover { transform: none; }
}
@media print {
.ge-header, .ge-newsband, .ge-app, .ge-footer nav, .no-stampa { display: none !important; }
body { background: #fff; }
.ge-article-container { max-width: none; }
}
/* --------------------------------------------------------------- vendita -- */
.ge-prezzo {
font-family: var(--ge-display); font-weight: 800; font-size: 2.6rem;
line-height: 1; letter-spacing: -0.02em; margin: 6px 0 12px;
display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
}
.ge-prezzo-pieno {
font-family: var(--ge-text); font-weight: 400; font-size: 0.95rem;
color: var(--ge-muted); text-decoration: line-through;
text-decoration-color: var(--ge-copper-dark); letter-spacing: 0;
}
.ge-form-nota { font-size: 0.82rem; color: var(--ge-muted); margin: 12px 0 0; }
.ge-app--manuale { background: var(--ge-copper-soft); border-color: var(--ov-rame-bordo); }
.ge-app--manuale .ge-app-text { color: var(--ge-ink); }
/* ============================================================================
Impaginazione fotografica — 5 settembre 2026.
Il sito nasceva senza immagini e sembrava incompiuto: qui la fotografia
diventa la struttura, non un ornamento.
========================================================================== */
/* ---------------------------------------------------- testata sull'immagine */
.ge-header--sopra {
position: fixed; inset: 0 0 auto 0; z-index: 50;
background: transparent; border-bottom-color: transparent;
transition: background 220ms ease, border-color 220ms ease;
}
.ge-header--sopra .ge-brand-name { color: #fff; }
.ge-header--sopra .ge-nav-link { color: rgba(255,255,255,.82); }
.ge-header--sopra .ge-nav-link:hover { color: #fff; background: rgba(255,255,255,.14); }
.ge-header--sopra .ge-nav-link[data-sezione="attiva"],
.ge-header--sopra .ge-nav-link[aria-current="page"] { color: #fff; background: rgba(255,255,255,.18); }
.ge-header--sopra.is-solido {
background: color-mix(in srgb, var(--ge-surface) 96%, transparent);
backdrop-filter: saturate(180%) blur(10px);
border-bottom-color: var(--ge-line);
}
.ge-header--sopra.is-solido .ge-brand-name { color: var(--ge-ink); }
.ge-header--sopra.is-solido .ge-nav-link { color: var(--ge-muted); }
.ge-header--sopra.is-solido .ge-nav-link:hover { color: var(--ge-ink); background: var(--ge-bg); }
.ge-header--sopra.is-solido .ge-nav-link[data-sezione="attiva"],
.ge-header--sopra.is-solido .ge-nav-link[aria-current="page"] { color: var(--ge-copper-dark); background: var(--ge-copper-soft); }
/* ------------------------------------------------------ apertura fotografica */
.ov-scena {
position: relative; overflow: hidden;
display: flex; align-items: flex-end;
background: var(--ge-ink);
}
.ov-scena--alta { min-height: min(88vh, 780px); }
.ov-scena--bassa { min-height: min(46vh, 380px); }
.ov-scena img {
position: absolute; inset: 0; width: 100%; height: 100%;
object-fit: cover; z-index: 0;
}
.ov-scena::after {
content: ""; position: absolute; inset: 0; z-index: 1;
background: linear-gradient(180deg, rgba(10,12,15,.62) 0%, rgba(10,12,15,.18) 34%, rgba(10,12,15,.88) 100%);
}
.ov-scena__testo { position: relative; z-index: 2; color: #fff; padding-block: 60px 56px; }
.ov-scena__testo .ge-mono-label { color: var(--ov-rame-300); }
.ov-scena h1 {
font-family: var(--ge-display); font-weight: 800;
font-size: clamp(2.2rem, 6vw, 4rem); line-height: 1.02; letter-spacing: -0.03em;
margin: 14px 0 0; max-width: 17ch; text-wrap: balance;
}
.ov-scena h1 em { font-style: normal; color: var(--ov-rame-300); }
.ov-scena__sub { color: rgba(255,255,255,.86); font-size: 1.1rem; max-width: 54ch; margin: 18px 0 0; text-wrap: pretty; }
.ov-scena__azioni { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; margin-top: 30px; }
.ov-scena .cta-news { color: #fff; }
.ov-scena .cta-news::after { background: #fff; }
/* --------------------------------------------------- righe alternate reparti */
@media (max-width: 820px) {
}
/* ------------------------------------------------------- elenco tipografico */
.ov-elenco { border-top: 1px solid var(--ge-line); margin-top: 20px; }
.ov-elenco a {
display: grid; grid-template-columns: 84px 1fr auto; gap: 22px; align-items: baseline;
padding: 20px 0; border-bottom: 1px solid var(--ge-line);
}
.ov-elenco__t { font-family: var(--ge-display); font-weight: 700; font-size: 1.14rem; line-height: 1.3; letter-spacing: -0.01em; }
.ov-elenco__c { font-family: var(--ge-mono); font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ge-muted); white-space: nowrap; }
.ov-elenco a:hover .ov-elenco__t { color: var(--ge-copper-dark); }
@media (max-width: 620px) {
.ov-elenco a { grid-template-columns: 64px 1fr; gap: 14px; }
.ov-elenco__c { display: none; }
}
/* --------------------------------------------- numero di scheda sulle schede */
.ge-article-card { position: relative; }
.ge-article-card .ge-scheda-num { position: absolute; top: 18px; right: 18px; }
.ge-article-card-title { padding-right: 58px; }
/* ------------------------------------------------- fotografie dei modelli --
Vengono da Wikimedia Commons: la licenza chiede autore e licenza visibili,
quindi la didascalia sta sotto l'immagine e non a fondo pagina. */
.ov-scatti { display: grid; gap: 18px; margin: 0 0 30px; }
.ov-scatti--due { grid-template-columns: 1fr 1fr; }
@media (max-width: 700px) { .ov-scatti--due { grid-template-columns: 1fr; } }
.ov-scatto { margin: 0; }
.ov-scatto img { width: 100%; border-radius: 10px; border: 1px solid var(--ge-line); background: var(--ge-bg); }
.ov-scatto figcaption { display: flex; flex-direction: column; gap: 2px; margin-top: 8px; }
.ov-scatto__cosa { font-family: var(--ge-mono); font-size: 0.74rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ge-copper-dark); }
/* ============================================================================
Strato di conversione — 6 settembre 2026.
Il sito sapeva spiegare ma non sapeva chiedere: qui ci sono i moduli, i kit,
gli strumenti e i due soli richiami (barra e finestra) che si permettono di
interrompere la lettura, una volta sola e solo a chi sta leggendo davvero.
========================================================================== */
/* ------------------------------------------------- moduli, ovunque stiano - */
.ov-esca-blocco__form, .ov-risorsa__form, .ov-finestra__form, .ov-banda-form {
display: flex; flex-direction: column; gap: 12px;
}
.ov-esca-blocco {
display: grid; grid-template-columns: 1.15fr 1fr; gap: 30px;
background: var(--ge-copper-soft); border: 1px solid var(--ov-rame-bordo);
border-top: 4px solid var(--ge-copper);
border-radius: 12px; padding: 28px; margin-top: 34px;
}
.ov-esca-blocco__titolo { font-family: var(--ge-display); font-weight: 800; font-size: 1.45rem; line-height: 1.15; letter-spacing: -0.015em; margin: 8px 0 8px; text-wrap: balance; }
.ov-esca-blocco__sub { margin: 0; max-width: 44ch; }
.ov-esca-blocco__punti { margin: 14px 0 0; padding-left: 20px; font-size: 0.94rem; color: var(--ge-muted); }
.ov-esca-blocco__punti li { margin-bottom: 5px; }
.ov-esca-blocco__punti li::marker { color: var(--ge-copper); }
.ov-esca-blocco .ge-field input { background: #fff; border-color: var(--ov-rame-bordo); }
.ov-esca-blocco .ge-form-nota { margin-top: 0; }
@media (max-width: 760px) { .ov-esca-blocco { grid-template-columns: 1fr; gap: 20px; padding: 22px; } }
/* Il modulo dentro alla banda scura di fine pagina. */
.ov-banda-form { min-width: 300px; flex: 1; max-width: 380px; }
.ov-banda-form .ge-field-label { color: var(--ov-notte-testo); }
.ov-banda-form .ge-field input { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.22); color: #fff; }
.ov-banda-form .ge-field input::placeholder { color: rgba(255,255,255,.45); }
.ov-banda-form .ge-consent { color: var(--ov-notte-testo); }
.ov-banda-form .ge-consent a { color: var(--ov-rame-300); }
.ge-newsband-row { align-items: flex-start; }
/* Il "fatto" che prende il posto del modulo dopo l'invio. */
.ov-fatto {
background: #fff; border: 1px solid var(--ge-line); border-left: 4px solid var(--ge-ok);
border-radius: 10px; padding: 20px;
}
.ov-fatto__t { font-family: var(--ge-display); font-weight: 700; font-size: 1.1rem; margin: 0 0 6px; }
.ov-fatto__s { color: var(--ge-muted); font-size: 0.92rem; margin: 0 0 14px; }
/* "Intendevi ...@gmail.com?" sotto il campo email (29/9/2026). È un
suggerimento, non un errore: rame, non rosso, e l'invio resta libero. Il
bottone ha l'aspetto di un link ma è un bottone vero, con l'area allargata
dal padding e riassorbita dal margine per non spingere giù il modulo. */
/* Il doppio selettore serve: dentro una guida vince .article-body p, che viene
dopo nel file e impone colore scuro e 18 px di margine sotto. */
.ov-forse, .article-body .ov-forse { margin: 0; max-width: none; font-size: var(--ov-t-xs); line-height: 1.45; color: var(--ov-rame-800); }
.ov-forse__b {
font: inherit; font-weight: 700; color: var(--ov-rame-700); background: none; border: 0;
padding: 12px 2px; margin: -12px 0; cursor: pointer; overflow-wrap: anywhere;
text-decoration: underline; text-underline-offset: 3px;
}
.ov-forse__b:focus-visible { outline: 2px solid var(--ov-rame-500); outline-offset: 2px; border-radius: 3px; }
.ov-banda-form .ov-forse { color: var(--ov-notte-testo); }
.ov-banda-form .ov-forse__b { color: var(--ov-rame-300); }
/* Il riquadro che chiede di correggere l'indirizzo dopo l'invio, dentro al
"fatto" e sulla pagina /grazie/. */
.ov-fatto__attenzione {
background: var(--ov-rame-50); border: 1px solid var(--ov-rame-200); border-radius: 8px;
padding: 12px 14px; margin: 0 0 14px; text-align: left;
}
.ov-fatto__attenzione p, .article-body .ov-fatto__attenzione p { margin: 0; max-width: none; font-size: var(--ov-t-s); line-height: 1.5; color: var(--ov-rame-900); overflow-wrap: anywhere; }
.ov-fatto__correggi {
margin-top: 10px; min-height: 44px; padding: 10px 16px; border: 0; border-radius: 8px;
font: inherit; font-weight: 700; font-size: var(--ov-t-s); color: #fff; background: var(--ov-rame-700);
cursor: pointer; overflow-wrap: anywhere; text-align: left;
}
.ov-fatto__correggi:hover { background: var(--ov-rame-800); }
.ov-fatto__correggi:focus-visible { outline: 2px solid var(--ov-rame-500); outline-offset: 2px; }
.ov-fatto__correggi:disabled { opacity: .6; cursor: default; }
.ov-grazie__forse { max-width: 560px; margin: 18px auto 0; }
/* ------------------------------------------- barra bassa: solo da telefono */
.ov-barra { display: none; }
@media (max-width: 760px) {
.ov-barra {
position: fixed; inset: auto 0 0 0; z-index: 40;
display: flex; align-items: center; gap: 12px;
padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
background: color-mix(in srgb, var(--ge-ink) 96%, transparent);
backdrop-filter: saturate(180%) blur(8px);
color: #fff; border-top: 2px solid var(--ge-copper);
}
.ov-barra__testo { font-size: 0.86rem; line-height: 1.25; flex: 1; min-width: 0; }
.ov-barra__testo strong { color: var(--ov-rame-300); }
.ov-barra__cta {
background: var(--ge-azione); color: #fff; font-weight: 700; font-size: 0.86rem;
padding: 9px 14px; border-radius: 8px; white-space: nowrap;
}
/* 12 settembre 2026. Era 25x30: il bersaglio piu' piccolo di tutta la pagina,
e a differenza della casella di consenso non ha nessuna etichetta intorno
che lo ingrandisca. Portato a 44x44, il minimo raccomandato per il dito.
Il segno resta della stessa dimensione: cresce l'area, non la grafica.
Il margine negativo a destra tiene la barra larga com'era. */
.ov-barra__x {
background: none; border: 0; color: rgba(255,255,255,.55);
font-size: 1.4rem; line-height: 1; cursor: pointer;
display: inline-flex; align-items: center; justify-content: center;
min-width: 44px; min-height: 44px; padding: 0; margin-right: -10px; flex: none;
}
}
/* ------------------------------------------------------------- la finestra */
.ov-finestra { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 20px; }
.ov-finestra__sfondo { position: absolute; inset: 0; background: rgba(12,14,18,.62); backdrop-filter: blur(2px); }
.ov-finestra__scatola {
position: relative; z-index: 1; width: min(520px, 100%);
max-height: 92vh; overflow-y: auto;
background: var(--ge-surface); border-radius: 14px;
border-top: 5px solid var(--ge-copper);
padding: 30px 28px 26px; box-shadow: 0 24px 60px rgba(12,14,18,.32);
animation: ov-su 220ms ease both;
}
@keyframes ov-su { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .ov-finestra__scatola { animation: none; } }
.ov-finestra__x {
position: absolute; top: 10px; right: 12px; background: none; border: 0;
font-size: 1.7rem; line-height: 1; color: var(--ge-muted); cursor: pointer; padding: 4px 8px;
}
.ov-finestra__x:hover { color: var(--ge-ink); }
.ov-finestra__titolo { font-family: var(--ge-display); font-weight: 800; font-size: 1.5rem; line-height: 1.14; letter-spacing: -0.02em; margin: 8px 0 8px; text-wrap: balance; }
.ov-finestra__sub { color: var(--ge-muted); margin: 0; }
.ov-finestra__form { margin-top: 18px; }
/* --------------------------------------------------------------- i kit --- */
.ov-kit { max-width: 860px; }
.ov-kit-intro { font-size: 1.06rem; margin: 0 0 20px; max-width: 68ch; }
.ov-kit-lista { list-style: none; margin: 26px 0 0; padding: 0; border-top: 1px solid var(--ge-line); }
.ov-kit-riga {
display: grid; grid-template-columns: 46px 1fr auto; gap: 18px; align-items: start;
padding: 22px 0; border-bottom: 1px solid var(--ge-line);
}
.ov-kit-riga__n { font-family: var(--ge-mono); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.1em; color: var(--ge-copper-dark); padding-top: 3px; }
.ov-kit-riga__nome { font-family: var(--ge-display); font-weight: 700; font-size: 1.16rem; line-height: 1.28; letter-spacing: -0.01em; margin: 0 0 6px; }
.ov-kit-riga__perche { color: var(--ge-muted); margin: 0 0 8px; max-width: 58ch; }
.ov-kit-riga__quale {
font-family: var(--ge-mono); font-size: 0.72rem; color: var(--ov-faint); margin: 0 0 8px;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 52ch;
}
.ov-kit-riga__guida { font-family: var(--ge-mono); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ge-copper-dark); }
.ov-kit-riga__guida:hover { text-decoration: underline; }
.ov-kit-riga__azione { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; text-align: right; }
.ov-kit-riga__prezzo { font-family: var(--ge-mono); font-weight: 600; font-size: 0.95rem; white-space: nowrap; }
.ov-kit-riga__prezzo--vuoto { color: var(--ge-muted); font-weight: 400; font-size: 0.8rem; }
.ov-kit-riga__azione a {
background: var(--ge-azione); color: #fff; font-weight: 600; font-size: 0.88rem;
padding: 9px 14px; border-radius: 8px; white-space: nowrap;
}
.ov-kit-riga__azione a:hover { background: var(--ge-copper-deep); }
.ov-kit-totale { margin: 20px 0 0; color: var(--ge-muted); font-size: 0.95rem; }
.ov-kit-totale strong { color: var(--ge-ink); font-family: var(--ge-mono); }
.ov-kit-evita {
margin-top: 34px; background: var(--ge-surface); border: 1px solid var(--ge-line);
border-left: 4px solid var(--ge-danger); border-radius: 10px; padding: 22px 24px;
}
.ov-kit-evita h2 { font-family: var(--ge-display); font-weight: 700; font-size: 1.2rem; margin: 0 0 10px; }
.ov-kit-evita ul { margin: 0; padding-left: 20px; color: var(--ge-muted); }
.ov-kit-evita li { margin-bottom: 7px; }
@media (max-width: 700px) {
.ov-kit-riga { grid-template-columns: 34px 1fr; gap: 12px; }
.ov-kit-riga__azione { grid-column: 2; flex-direction: row; align-items: center; justify-content: flex-start; gap: 14px; text-align: left; margin-top: 4px; }
}
.ov-kit-richiamo { background: var(--ge-copper-soft); border-block: 1px solid var(--ov-rame-bordo); padding: 40px 0; }
.ov-kit-richiamo h2 { font-family: var(--ge-display); font-weight: 800; font-size: 1.6rem; letter-spacing: -0.02em; margin: 8px 0 8px; }
.ov-kit-richiamo p { max-width: 62ch; margin: 0 0 18px; }
/* -------------------------------------------------------- gli strumenti -- */
.ov-strumento { max-width: 860px; }
.ov-calc__griglia { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 16px; }
.ov-campo { display: flex; flex-direction: column; gap: 6px; }
.ov-campo__label { font-family: var(--ge-mono); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ge-muted); }
.ov-campo input, .ov-campo select {
border: 1px solid var(--ge-line); border-radius: 8px; padding: 11px 12px;
font-family: var(--ge-text); font-size: 1rem; background: var(--ge-surface); color: var(--ge-ink);
width: 100%;
}
.ov-campo input:focus, .ov-campo select:focus { border-color: var(--ge-copper); outline: none; box-shadow: 0 0 0 3px var(--ge-copper-soft); }
.ov-campo__nota { font-size: 0.78rem; color: var(--ge-muted); }
.ov-esito { margin-top: 28px; background: var(--ge-ink); color: #fff; border-radius: 12px; padding: 26px; }
.ov-esito__griglia { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; }
.ov-esito__cella { display: flex; flex-direction: column; gap: 2px; padding: 10px 14px; background: rgba(255,255,255,.05); border-radius: 8px; }
.ov-esito__n { font-family: var(--ge-display); font-weight: 800; font-size: 1.6rem; color: var(--ov-rame-300); font-variant-numeric: tabular-nums; }
.ov-esito__l { font-size: 0.82rem; color: var(--ov-notte-testo); }
.ov-esito__riga { margin-top: 20px; border-top: 1px solid rgba(255,255,255,.14); padding-top: 18px; }
.ov-esito__riga p { margin: 0 0 10px; color: rgba(255,255,255,.9); max-width: 66ch; }
.ov-esito__riga strong { color: var(--ov-rame-300); font-family: var(--ge-mono); font-weight: 600; }
.ov-esito__forte { font-size: 1.05rem; }
.ov-sintomi { max-width: 860px; }
.ov-sintomi-gruppo { margin-bottom: 34px; }
.ov-sintomi-gruppo h2 { font-family: var(--ge-display); font-weight: 700; font-size: 1.25rem; margin: 0 0 12px; }
.ov-sintomi-gruppo ul { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--ge-line); }
.ov-sintomo a {
display: grid; grid-template-columns: 1fr auto; gap: 20px; align-items: baseline;
padding: 14px 0; border-bottom: 1px solid var(--ge-line);
}
.ov-sintomo__q { font-weight: 600; }
.ov-sintomo__a { font-family: var(--ge-mono); font-size: 0.72rem; color: var(--ge-muted); text-align: right; max-width: 30ch; line-height: 1.4; }
.ov-sintomo a:hover .ov-sintomo__q { color: var(--ge-copper-dark); }
.ov-sintomo a:hover .ov-sintomo__a { color: var(--ge-copper-dark); }
@media (max-width: 620px) {
.ov-sintomo a { grid-template-columns: 1fr; gap: 4px; }
.ov-sintomo__a { text-align: left; max-width: none; }
}
/* ---------------------------------------------------------- le risorse --- */
.ov-risorse { max-width: 900px; }
.ov-risorsa {
display: grid; grid-template-columns: 1.2fr 1fr; gap: 30px;
background: var(--ge-surface); border: 1px solid var(--ge-line);
border-top: 4px solid var(--ge-copper); border-radius: 12px;
padding: 28px; margin-bottom: 22px;
}
.ov-risorsa h2 { font-family: var(--ge-display); font-weight: 800; font-size: 1.4rem; letter-spacing: -0.015em; margin: 8px 0 8px; }
.ov-risorsa p { color: var(--ge-muted); margin: 0; max-width: 46ch; }
@media (max-width: 760px) { .ov-risorsa { grid-template-columns: 1fr; gap: 20px; padding: 22px; } }
@media print {
.ov-barra, .ov-finestra, .ov-esca-blocco, .ov-kit-richiamo { display: none !important; }
}
/* Attribuzione sulle fotografie da Wikimedia Commons: le licenze la richiedono
visibile accanto all'immagine, quindi sta sopra la foto, discreta ma leggibile. */ .ov-scena { position: relative; }
@media (max-width: 620px) { }
/* ---------------------------------------------------- pagina di una sezione */
.ov-sezione { max-width: 960px; }
.ov-sezione__intro { max-width: 68ch; margin-bottom: 8px; }
.ov-sezione__intro p { font-size: 1.08rem; margin: 0 0 16px; text-wrap: pretty; }
.ov-sezione__intro p:first-child { font-size: 1.18rem; line-height: 1.55; }
.ov-sezione > section { padding-top: 34px; }
.ov-inizia__griglia { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 14px; margin-top: 20px; }
.ov-inizia__card {
display: flex; flex-direction: column; gap: 8px; position: relative;
background: var(--ge-ink); color: #fff; border-radius: 12px; padding: 24px 22px 20px;
transition: transform 160ms ease;
}
.ov-inizia__card:hover { transform: translateY(-3px); }
.ov-inizia__n { font-family: var(--ge-mono); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.14em; color: var(--ov-rame-300); }
.ov-inizia__t { font-family: var(--ge-display); font-weight: 700; font-size: 1.12rem; line-height: 1.3; letter-spacing: -0.01em; }
.ov-inizia__m { font-size: 0.92rem; color: var(--ov-notte-testo); flex: 1; }
.ov-inizia__vai { font-family: var(--ge-mono); font-size: 0.7rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ov-rame-300); margin-top: 4px; }
.ov-inizia__card:hover .ov-inizia__vai { color: #fff; }
.ov-gruppo .ge-article-grid { padding-bottom: 8px; }
.ov-gruppo .ge-section-title { font-size: clamp(1.2rem, 2.4vw, 1.5rem); padding-bottom: 8px; border-bottom: 1px solid var(--ge-line); }
.ov-altre__griglia { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 8px; margin-top: 16px; padding-bottom: 40px; }
.ov-altre__voce {
display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
background: var(--ge-surface); border: 1px solid var(--ge-line); border-radius: 10px;
padding: 14px 16px; font-weight: 600;
}
.ov-altre__voce em { font-style: normal; font-family: var(--ge-mono); font-size: 0.72rem; color: var(--ge-muted); white-space: nowrap; }
.ov-altre__voce:hover { border-color: var(--ge-copper); color: var(--ge-copper-dark); }
/* ----------------------------------------------------------- il marchio --- */
.ge-header--sopra .ge-brand-mark { color: #fff; --ge-marchio-lampo: var(--ov-ink); }
.ge-header--sopra.is-solido .ge-brand-mark { color: var(--ge-copper); --ge-marchio-lampo: #fff; }
.ge-header--sopra .ge-brand-sotto { color: rgba(255,255,255,.7); }
.ge-header--sopra.is-solido .ge-brand-sotto { color: var(--ge-muted); }
.ge-footer-marchio { display: flex; align-items: center; gap: 10px; }
.ge-footer-grid .ov-social { margin-top: 16px; }
.ge-footer-marchio .ge-brand-mark { width: 26px; height: 26px; }
/* ============================================================================
Rifinitura grafica — 6 settembre 2026.
Il sito era corretto ma piatto: qui si lavora su gerarchia, respiro e
materiale. Nessuna decorazione: ogni riga serve a far capire prima.
========================================================================== */
/* --- la navigazione: da telefono scorre, non va a capo ------------------- */
.ge-header-row { padding-block: 12px; gap: 20px; }
.ge-nav { gap: 4px; }
.ge-nav-link { font-size: 0.92rem; padding: 8px 13px; border-radius: 999px; transition: background 160ms ease, color 160ms ease; }
@media (max-width: 900px) {
.ge-header-row { gap: 12px; }
.ge-nav {
flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
-webkit-overflow-scrolling: touch; margin-inline: -4px; padding-inline: 4px;
mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 22px), transparent 100%);
}
.ge-nav::-webkit-scrollbar { display: none; }
.ge-nav-link { white-space: nowrap; }
}
/* --- l'apertura fotografica: gradiente piu' profondo, testo piu' saldo --- */
.ov-scena::after {
background:
linear-gradient(180deg, rgba(10,12,15,.70) 0%, rgba(10,12,15,.16) 32%, rgba(10,12,15,.55) 72%, rgba(10,12,15,.92) 100%),
linear-gradient(90deg, rgba(10,12,15,.42) 0%, rgba(10,12,15,0) 62%);
}
.ov-scena img { filter: saturate(.92) contrast(1.04); }
.ov-scena h1 { letter-spacing: -0.035em; text-shadow: 0 2px 30px rgba(0,0,0,.35); }
.ov-scena__sub { font-size: 1.14rem; max-width: 56ch; text-shadow: 0 1px 18px rgba(0,0,0,.35); }
.ov-scena--bassa { min-height: min(52vh, 440px); }
/* --- la testa delle pagine senza foto ----------------------------------- */
.ge-pagehead {
background:
radial-gradient(120% 140% at 12% 0%, var(--ge-copper-soft) 0%, transparent 58%),
var(--ge-surface);
padding: 72px 0 48px;
}
.ge-page-title { letter-spacing: -0.032em; }
.ge-page-sub { font-size: 1.12rem; }
/* --- "In breve": e' la risposta, deve sembrare la risposta --------------- */
.ge-breve {
background: var(--ge-surface); border: 1px solid var(--ov-rame-bordo); border-left: 4px solid var(--ge-copper);
border-radius: var(--ge-raggio); box-shadow: var(--ge-ombra-1); padding: 24px 26px;
}
.ge-breve-q { font-size: 1.2rem; }
.ge-breve-a { font-size: 1.06rem; }
/* --- indice della guida -------------------------------------------------- */
.ge-toc { border-radius: var(--ge-raggio); background: var(--ge-surface); box-shadow: var(--ge-ombra-1); padding: 20px 24px; }
.ge-toc ol { columns: 2; column-gap: 30px; }
@media (max-width: 640px) { .ge-toc ol { columns: 1; } }
/* --- domande frequenti --------------------------------------------------- */
.ge-faq details { border-bottom: 1px solid var(--ge-line); transition: background 160ms ease; }
.ge-faq details[open] { background: var(--ge-surface); border-radius: 10px; box-shadow: var(--ge-ombra-1); border-bottom-color: transparent; margin-block: 6px; }
.ge-faq summary { cursor: pointer; }
.ge-faq details[open] summary { color: var(--ge-copper-dark); }
/* --- la scheda prodotto dentro le guide --------------------------------- */
.article-body .product-card {
border-radius: var(--ge-raggio); box-shadow: var(--ge-ombra-1);
border: 1px solid var(--ge-line); border-left: 4px solid var(--ge-copper);
padding: 22px 24px;
}
.article-body .pc-meta a { border-radius: 999px; padding: 9px 18px; box-shadow: 0 1px 2px rgba(116,61,23,.2), 0 6px 16px rgba(116,61,23,.16); }
/* --- il piede ------------------------------------------------------------ */
.ge-footer { padding: 56px 0 36px; background: var(--ge-surface); }
.ge-footer-grid { gap: 44px; }
.ge-footer-head { color: var(--ge-copper-dark); }
.ge-footer-link { color: var(--ge-muted); transition: color 140ms ease; }
.ge-footer-link:hover { color: var(--ge-copper-dark); }
/* --- la banda di iscrizione: piu' materiale ----------------------------- */
.ge-newsband {
background:
radial-gradient(90% 160% at 8% 0%, var(--ov-notte-3) 0%, transparent 60%),
var(--ge-ink);
padding: 52px 0;
}
.ge-newsband-title { font-size: clamp(1.5rem, 3vw, 1.9rem); letter-spacing: -0.024em; }
/* --- righe alternate: la fotografia respira ----------------------------- */
/* --- elenco tipografico -------------------------------------------------- */
.ov-elenco a { grid-template-columns: 1fr auto; gap: 24px; padding: 22px 0; transition: padding-left 200ms ease; }
.ov-elenco a:hover { padding-left: 10px; }
.ov-elenco__t { font-size: 1.2rem; }
@media (prefers-reduced-motion: reduce) {
.ge-article-card, .ge-article-card::before, .ov-elenco a,
.cta-guide, .ov-inizia__card { transition: none !important; }
.ge-article-card:hover, .ov-inizia__card:hover { transform: none; }
}
/* --- salto alle sezioni, in cima allo schedario ------------------------- */
.ov-salto { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 26px; }
.ov-salto__voce {
display: inline-flex; align-items: baseline; gap: 8px;
background: var(--ge-bg); border: 1px solid var(--ge-line); border-radius: 999px;
padding: 8px 15px; font-weight: 600; font-size: 0.92rem;
transition: border-color 160ms ease, background 160ms ease, color 160ms ease;
}
.ov-salto__voce em { font-style: normal; font-family: var(--ge-mono); font-size: 0.7rem; color: var(--ge-muted); }
.ov-salto__voce:hover { border-color: var(--ge-copper); background: var(--ge-copper-soft); color: var(--ge-copper-deep); }
.ov-salto__voce:hover em { color: var(--ge-copper-dark); }
.ov-testa-sezione { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; }
.ov-testa-sezione .ge-section-title a:hover { color: var(--ge-copper-dark); }
.ov-testa-sezione__vai {
font-family: var(--ge-mono); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.1em;
text-transform: uppercase; color: var(--ge-copper-dark); white-space: nowrap; padding-bottom: 22px;
}
.ov-testa-sezione__vai:hover { text-decoration: underline; }
@media (max-width: 700px) { .ov-testa-sezione__vai { display: none; } }
/* Da telefono la testata sta su due righe: la seconda si stringe, altrimenti
una barra appiccicosa si mangia un sesto dello schermo. */
@media (max-width: 640px) {
.ge-header-row { flex-wrap: wrap; padding-block: 10px 4px; }
.ge-nav { width: 100%; padding-bottom: 6px; }
.ge-nav-link { padding: 6px 11px; font-size: 0.88rem; }
.ge-brand-mark { width: 26px; height: 26px; }
.ge-brand-name { font-size: 1rem; }
.ov-scena--alta { min-height: min(78vh, 640px); }
.ov-scena__testo { padding-block: 40px 40px; }
}
/* ------------------------------------------------------- video ufficiali --
Il riquadro non e un iframe: diventa iframe solo quando il lettore preme.
Cosi la pagina privacy resta vera per chi non ci clicca. */
.ov-video { margin: 34px 0; }
.ov-video__cornice {
position: relative; display: flex; flex-direction: column; justify-content: flex-end;
gap: 6px; aspect-ratio: 16/9; margin-top: 10px; padding: 22px;
background: linear-gradient(160deg, var(--ov-notte-2), var(--ov-notte));
border: 1px solid var(--ge-line); border-radius: 12px;
cursor: pointer; overflow: hidden; transition: border-color 160ms ease;
}
.ov-video__cornice:hover { border-color: var(--ge-copper); }
.ov-video__cornice:focus-visible { outline: 2px solid var(--ge-copper); outline-offset: 3px; }
.ov-video__play {
position: absolute; inset: 0; margin: auto; width: 62px; height: 62px; border-radius: 50%;
background: var(--ge-copper-dark); display: block;
}
.ov-video__play::after {
content: ""; position: absolute; inset: 0; margin: auto; width: 0; height: 0;
border-left: 20px solid #fff; border-top: 12px solid transparent; border-bottom: 12px solid transparent;
transform: translateX(3px);
}
.ov-video__titolo { position: relative; color: #fff; font-family: var(--ge-display); font-weight: 700; font-size: 1.05rem; }
.ov-video__nota { position: relative; color: rgba(255,255,255,.7); font-size: 0.78rem; }
.ov-video__cornice.is-attivo { padding: 0; background: #000; }
.ov-video__cornice iframe { width: 100%; height: 100%; border: 0; display: block; }
/* ------------------------------------------- accessori originali o no ---- */
.ov-conf-lista { list-style: none; margin: 24px 0 0; padding: 0; display: flex; flex-direction: column; gap: 16px; }
.ov-conf {
background: var(--ge-surface); border: 1px solid var(--ge-line);
border-left: 4px solid var(--ge-line); border-radius: var(--ge-raggio);
box-shadow: var(--ge-ombra-1); padding: 22px 24px;
}
.ov-conf--originale { border-left-color: var(--ge-ok); }
.ov-conf--alternativa { border-left-color: var(--ge-copper); }
.ov-conf--pari { border-left-color: var(--ov-faint); }
.ov-conf__testa { display: grid; grid-template-columns: 32px 1fr auto; gap: 14px; align-items: start; }
.ov-conf__n { font-family: var(--ge-mono); font-size: 0.76rem; font-weight: 600; color: var(--ge-muted); padding-top: 4px; }
.ov-conf__nome { font-family: var(--ge-display); font-weight: 700; font-size: 1.14rem; line-height: 1.28; letter-spacing: -0.012em; margin: 0 0 4px; }
.ov-conf__cosa { color: var(--ge-muted); margin: 0; font-size: 0.94rem; max-width: 60ch; }
.ov-conf__bollo {
font-family: var(--ge-mono); font-size: 0.6rem; font-weight: 600; letter-spacing: 0.1em;
text-transform: uppercase; padding: 5px 10px; border-radius: 5px; white-space: nowrap;
}
.ov-conf--originale .ov-conf__bollo { background: var(--ge-verde-velo, var(--ov-ok-velo)); color: var(--ge-ok); }
.ov-conf--alternativa .ov-conf__bollo { background: var(--ge-copper-soft); color: var(--ge-copper-dark); }
.ov-conf--pari .ov-conf__bollo { background: var(--ge-bg); color: var(--ge-muted); }
.ov-conf__prezzi {
display: grid; grid-template-columns: 1fr 1.4fr auto; gap: 20px; align-items: end;
margin: 18px 0 0; padding: 16px 0 0; border-top: 1px solid var(--ge-line);
}
.ov-conf__lato { display: flex; flex-direction: column; gap: 2px; }
.ov-conf__et { font-family: var(--ge-mono); font-size: var(--ov-t-3xs); font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ge-muted); }
.ov-conf__eu { font-family: var(--ge-display); font-weight: 800; font-size: 1.3rem; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.ov-conf__desc { font-size: 0.86rem; color: var(--ge-muted); margin-top: 2px; }
.ov-conf__azioni { display: flex; flex-direction: column; gap: 6px; align-items: flex-end; }
.ov-conf__vai {
background: var(--ge-azione); color: #fff; font-weight: 600; font-size: 0.86rem;
padding: 9px 15px; border-radius: 999px; white-space: nowrap;
}
.ov-conf__vai:hover { background: var(--ge-copper-deep); }
.ov-conf__guida { font-family: var(--ge-mono); font-size: var(--ov-t-3xs); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ge-copper-dark); white-space: nowrap; }
.ov-conf__guida:hover { text-decoration: underline; }
.ov-conf__perche { margin: 14px 0 0; font-size: 0.95rem; max-width: 72ch; }
@media (max-width: 720px) {
.ov-conf__testa { grid-template-columns: 26px 1fr; gap: 10px; }
.ov-conf__bollo { grid-column: 2; justify-self: start; margin-top: 8px; }
.ov-conf__prezzi { grid-template-columns: 1fr 1fr; gap: 14px; }
.ov-conf__azioni { grid-column: 1 / -1; flex-direction: row; align-items: center; gap: 14px; }
}
/* --- il listino ufficiale, richiudibile ---------------------------------- */
.ov-listino { border: 1px solid var(--ge-line); border-radius: 10px; background: var(--ge-surface); margin-bottom: 10px; }
.ov-listino summary {
cursor: pointer; padding: 15px 20px; font-family: var(--ge-display); font-weight: 700;
font-size: 1.05rem; display: flex; justify-content: space-between; align-items: center; gap: 12px;
}
.ov-listino summary em { font-style: normal; font-family: var(--ge-mono); font-size: 0.7rem; color: var(--ge-muted); letter-spacing: 0.06em; }
.ov-listino[open] summary { border-bottom: 1px solid var(--ge-line); }
.ov-listino__scorre { overflow-x: auto; }
.ov-listino table { border-collapse: collapse; width: 100%; font-size: 0.92rem; }
.ov-listino td { padding: 9px 20px; border-bottom: 1px solid var(--ge-line); }
.ov-listino tr:last-child td { border-bottom: none; }
.ov-listino__eu { font-family: var(--ge-mono); font-size: 0.85rem; text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.ov-listino__sez td {
font-family: var(--ge-mono); font-size: var(--ov-t-3xs); font-weight: 600; letter-spacing: 0.12em;
text-transform: uppercase; color: var(--ge-copper-dark); background: var(--ge-bg); padding-block: 7px;
}
/* ============================================================================
Strato di conversione, secondo giro — 6 settembre 2026, sera.
La home era una copertina: bella e muta. Qui sotto arriva la prova (numeri
veri, compreso uno che ci costa) e la richiesta di contatto in alto, dove
la gente e' ancora sveglia, invece che sola in fondo alla pagina.
========================================================================== */
.ov-prova { background: var(--ge-ink); color: #fff; }
.ov-prova__riga { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 4px; padding-block: 26px; }
.ov-prova__c { display: flex; flex-direction: column; gap: 2px; padding: 6px 16px; border-left: 1px solid rgba(255,255,255,.12); }
.ov-prova__c:first-child { border-left: none; }
.ov-prova__c b { font-family: var(--ge-display); font-weight: 800; font-size: 2rem; line-height: 1; color: var(--ov-rame-300); font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.ov-prova__c span { font-size: .84rem; color: var(--ov-notte-testo); }
@media (max-width: 720px) {
.ov-prova__riga { grid-template-columns: 1fr 1fr; gap: 14px 4px; }
.ov-prova__c:nth-child(odd) { border-left: none; }
}
.ov-offerta {
background:
radial-gradient(90% 120% at 100% 0%, var(--ov-rame-50) 0%, transparent 60%),
var(--ge-copper-soft);
border-bottom: 1px solid var(--ov-rame-bordo);
padding: 56px 0;
}
.ov-offerta__griglia { display: grid; grid-template-columns: 1.15fr .85fr; gap: 46px; align-items: center; }
.ov-offerta h2 {
font-family: var(--ge-display); font-weight: 800; font-size: clamp(1.6rem, 3.4vw, 2.3rem);
letter-spacing: -.03em; line-height: 1.08; margin: 10px 0 12px; text-wrap: balance;
}
.ov-offerta__sub { margin: 0; max-width: 52ch; }
.ov-offerta__punti { margin: 16px 0 0; padding-left: 20px; color: var(--ge-muted); font-size: .95rem; }
.ov-offerta__punti li { margin-bottom: 5px; }
.ov-offerta__punti li::marker { color: var(--ge-copper); }
.ov-offerta__altro { margin: 16px 0 0; font-size: .92rem; color: var(--ge-muted); }
.ov-offerta__form {
display: flex; flex-direction: column; gap: 13px;
background: var(--ge-surface); border: 1px solid var(--ov-rame-bordo);
border-top: 5px solid var(--ge-copper);
border-radius: var(--ge-raggio); padding: 26px; box-shadow: var(--ge-ombra-2);
}
.ov-offerta__form .ge-field input { background: var(--ge-bg); }
@media (max-width: 860px) { .ov-offerta__griglia { grid-template-columns: 1fr; gap: 28px; } }
/* La finestra si fa vedere: prima era un riquadro educato in mezzo allo schermo. */
.ov-finestra__sfondo { background: rgba(12,14,18,.74); }
.ov-finestra__scatola { width: min(560px, 100%); border-top-width: 6px; }
.ov-finestra__titolo { font-size: 1.7rem; }
/* ============================================================================
Leggibilità dell'apertura — 6 settembre 2026, sera.
Il titolo stava sopra una carrozzeria chiara e si perdeva, soprattutto da
telefono dove il ritaglio può portare in alto qualunque pezzo di foto.
Qui il testo non dipende più da cosa c'è sotto: sotto c'è sempre buio.
========================================================================== */
.ov-scena::after {
background:
linear-gradient(180deg, rgba(8,10,13,.78) 0%, rgba(8,10,13,.30) 26%,
rgba(8,10,13,.52) 58%, rgba(8,10,13,.93) 100%),
linear-gradient(90deg, rgba(8,10,13,.72) 0%, rgba(8,10,13,.34) 46%, rgba(8,10,13,0) 78%);
}
.ov-scena img { filter: saturate(.94) contrast(1.05) brightness(.92); }
.ov-scena h1 { text-shadow: 0 1px 2px rgba(0,0,0,.5), 0 3px 26px rgba(0,0,0,.55); }
.ov-scena__sub { color: rgba(255,255,255,.94); text-shadow: 0 1px 2px rgba(0,0,0,.55), 0 2px 16px rgba(0,0,0,.5); }
.ov-scena__testo .ge-mono-label { color: var(--ov-rame-300); text-shadow: 0 1px 3px rgba(0,0,0,.7); }
.ov-scena h1 em { color: var(--ov-rame-300); }
/* Da telefono il velo diventa quasi una fascia: e' l'unico modo per garantire
il contrasto qualunque parte della fotografia finisca sotto il testo. */
@media (max-width: 760px) {
.ov-scena::after {
background:
linear-gradient(180deg, rgba(8,10,13,.76) 0%, rgba(8,10,13,.58) 18%,
rgba(8,10,13,.74) 38%, rgba(8,10,13,.88) 62%,
rgba(8,10,13,.97) 100%);
}
.ov-scena--alta { min-height: min(82vh, 620px); }
.ov-scena--bassa { min-height: min(46vh, 340px); }
.ov-scena h1 { font-size: clamp(2rem, 8.6vw, 2.7rem); max-width: 14ch; }
.ov-scena__sub { font-size: 1.02rem; }
.ov-scena__azioni { margin-top: 22px; gap: 12px; width: 100%; }
.ov-scena__azioni .cta-guide { width: 100%; justify-content: center; }
.ov-scena__azioni .cta-news { padding-inline: 0; }
}
/* --- la tabella dei crediti ---------------------------------------------- */
.ov-crediti { border-collapse: collapse; width: 100%; min-width: 520px; font-size: .92rem; background: var(--ge-surface); }
.ov-crediti th {
text-align: left; padding: 10px 14px; border-bottom: 1px solid var(--ge-line);
font-family: var(--ge-mono); font-size: .62rem; font-weight: 600;
letter-spacing: .12em; text-transform: uppercase; color: var(--ge-muted); background: var(--ge-bg);
}
.ov-crediti td { padding: 10px 14px; border-bottom: 1px solid var(--ge-line); vertical-align: top; }
.ov-crediti tr:last-child td { border-bottom: none; }
.ge-prose .ov-listino__scorre { border: 1px solid var(--ge-line); border-radius: 10px; margin: 12px 0 26px; }
/* --- dove siamo, nel piede ----------------------------------------------- */
.ov-social { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 26px; }
.ov-social__voce {
font-family: var(--ge-mono); font-size: .72rem; font-weight: 600;
letter-spacing: .08em; text-transform: uppercase;
border: 1px solid var(--ge-line); border-radius: 999px; padding: 7px 15px;
color: var(--ge-muted); transition: border-color 160ms ease, color 160ms ease;
}
.ov-social__voce:hover { border-color: var(--ge-copper); color: var(--ge-copper-dark); }
/* ============================================================================
RIFINITURA GRAFICA — 9 settembre 2026.
Il sito era corretto ma parlava a voce bassa: un solo peso tipografico vero,
un rame spento, superfici tutte uguali e bottoni che non sembravano bottoni.
Qui sotto ogni componente riceve il suo mestiere: cosa e' cliccabile lo si
vede, cosa e' un prezzo lo si legge di colpo, e le fasce non si somigliano
piu' tutte.
Regola che mi sono dato: niente decorazione che non aiuti a capire prima.
========================================================================== */
/* ------------------------------------------------------------------ base -- */
::selection { background: var(--ov-rame-200); color: var(--ov-rame-900); }
html { accent-color: var(--ov-rame-600); }
body { text-rendering: optimizeLegibility; }
/* Un anello solo per tutto il sito, spesso abbastanza da vedersi anche sul rame. */
:focus-visible {
outline: 2px solid var(--ov-rame-600);
outline-offset: 3px;
border-radius: var(--ov-r-xs);
}
/* Le fasce non devono avere tutte lo stesso respiro: quella che porta un
contenuto ne ha piu' di quella che porta un elenco. */
.ge-section { padding: var(--ov-sez) 0 var(--ov-s4); }
/* ---------------------------------------------------------------- testata -- */
.ge-header { border-bottom: 1px solid var(--ov-linea-soft); }
.ge-header-row { padding-block: 14px; }
.ge-brand-mark { width: 32px; height: 32px; transition: transform var(--ov-medio) var(--ov-curva); }
.ge-brand:hover .ge-brand-mark { transform: rotate(-8deg) scale(1.06); }
.ge-brand-name { font-size: 1.12rem; font-weight: 600; letter-spacing: -0.02em; }
.ge-brand-name em { font-weight: 800; }
.ge-brand-sotto { letter-spacing: 0.18em; font-weight: 500; }
.ge-nav-link { font-weight: 600; color: var(--ov-ink-2); }
.ge-nav-link:hover { background: var(--ov-rame-50); color: var(--ov-rame-800); }
.ge-nav-link[aria-current="page"],
.ge-nav-link[data-sezione="attiva"] {
background: var(--ov-rame-100); color: var(--ov-rame-800); box-shadow: inset 0 0 0 1px var(--ov-rame-200);
}
/* ---------------------------------------------------------------- bottoni -- */
/* Il rame pieno con la scritta bianca: la sfumatura da' materiale al bottone
senza toglierne la leggibilita' (il capo piu' chiaro fa comunque 4,9:1). */
.cta-guide {
background: linear-gradient(178deg, var(--ov-rame-600) 0%, var(--ov-rame-800) 100%);
box-shadow: var(--ov-ombra-rame);
padding: 15px 26px;
font-weight: 700;
letter-spacing: -0.005em;
transition: box-shadow var(--ov-medio) var(--ov-curva),
transform var(--ov-veloce) var(--ov-curva),
filter var(--ov-veloce) ease;
}
.cta-guide:hover {
background: linear-gradient(178deg, var(--ov-rame-600) 0%, var(--ov-rame-800) 100%);
filter: brightness(1.07) saturate(1.05);
box-shadow: 0 2px 4px rgba(141,70,23,.28), 0 16px 34px rgba(141,70,23,.28);
transform: translateY(-2px);
}
.cta-guide:active { transform: translateY(0); box-shadow: var(--ov-ombra-rame); filter: brightness(.97); }
/* Il secondo bottone: stessa forma, nessun peso. Serve dove la pagina offre
due strade e non vogliamo che sembrino la stessa cosa. */
.cta-fantasma {
display: inline-flex; align-items: center; gap: 10px;
font-family: var(--ge-display); font-weight: 700; font-size: 1rem;
padding: 14px 24px; border-radius: var(--ov-r-tondo);
color: var(--ov-rame-800); background: var(--ov-bianco);
box-shadow: inset 0 0 0 1.5px var(--ov-rame-200), var(--ov-ombra-1);
transition: box-shadow var(--ov-medio) var(--ov-curva), background var(--ov-veloce) ease, transform var(--ov-veloce) var(--ov-curva);
}
.cta-fantasma:hover {
background: var(--ov-rame-50);
box-shadow: inset 0 0 0 1.5px var(--ov-rame-500), var(--ov-ombra-2);
transform: translateY(-2px);
}
.cta-fantasma span { transition: transform var(--ov-veloce) var(--ov-curva); }
.cta-fantasma:hover span { transform: translateX(4px); }
/* Sopra una fotografia il fantasma diventa chiaro, altrimenti sparisce. */
.ov-scena .cta-fantasma {
background: rgba(255,255,255,.10); color: #fff;
box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.42);
backdrop-filter: blur(6px);
}
.ov-scena .cta-fantasma:hover { background: rgba(255,255,255,.18); box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.7); }
.cta-form {
background: linear-gradient(178deg, var(--ov-rame-600) 0%, var(--ov-rame-800) 100%);
font-size: 0.86rem; font-weight: 700; letter-spacing: 0.1em;
padding: 15px 18px; border-radius: var(--ov-r-s);
box-shadow: var(--ov-ombra-rame);
transition: filter var(--ov-veloce) ease, transform var(--ov-veloce) var(--ov-curva), box-shadow var(--ov-medio) var(--ov-curva);
}
.cta-form:hover { background: linear-gradient(178deg, var(--ov-rame-600) 0%, var(--ov-rame-800) 100%); filter: brightness(1.07); box-shadow: 0 2px 4px rgba(141,70,23,.28), 0 14px 30px rgba(141,70,23,.26); }
.cta-form:active { transform: translateY(1px); filter: brightness(.97); }
.cta-news { font-weight: 700; }
.cta-news::after { height: 2px; background: var(--ov-rame-500); }
/* ------------------------------------------------------------------ etichette */
/* L'etichetta di sezione era un filo di testo. Con lo sfondo diventa un
segnaposto: dice a colpo d'occhio in che parte del sito sei. */
.ge-mono-label { font-weight: 600; letter-spacing: 0.14em; color: var(--ov-rame-800); }
.ov-chip {
display: inline-flex; align-items: center; gap: 6px;
font-family: var(--ge-mono); font-size: var(--ov-t-3xs); font-weight: 600;
letter-spacing: 0.1em; text-transform: uppercase;
padding: 5px 10px; border-radius: var(--ov-r-xs);
background: var(--ov-rame-100); color: var(--ov-rame-800);
box-shadow: inset 0 0 0 1px var(--ov-rame-200);
}
.ov-chip--verde { background: var(--ov-ok-velo); color: var(--ov-ok); box-shadow: inset 0 0 0 1px #cfe2d7; }
.ov-chip--neutro { background: var(--ov-carta-2); color: var(--ov-muted); box-shadow: inset 0 0 0 1px var(--ov-linea); }
.ov-chip--scuro { background: rgba(255,255,255,.10); color: var(--ov-rame-300); box-shadow: inset 0 0 0 1px rgba(255,255,255,.16); }
/* ------------------------------------------------------------------- schede -- */
.ge-article-card { padding: 24px; border-color: var(--ov-linea-soft); gap: 9px; }
.ge-article-card::before { height: 3px; background: var(--ov-rame-500); }
.ge-article-card:hover {
border-color: var(--ov-rame-200);
box-shadow: var(--ov-ombra-2);
transform: translateY(-4px);
}
.ge-article-card .ge-mono-label { font-size: var(--ov-t-3xs); color: var(--ov-rame-700); }
.ge-article-card-title { font-size: var(--ov-t-xl); line-height: 1.26; font-weight: 700; }
.ge-article-card-desc { font-size: var(--ov-t-s); color: var(--ov-ink-2); }
.ge-article-card-models { color: var(--ov-faint); font-weight: 500; border-top-color: var(--ov-linea-soft); }
/* ------------------------------------------------------------- fasce e titoli */
.ge-section-title { font-weight: 800; font-size: var(--ov-t-3xl); letter-spacing: -0.03em; }
.ge-section-blurb { font-size: var(--ov-t-l); color: var(--ov-ink-2); max-width: 64ch; }
/* --------------------------------------------------------------- fotografie -- */
/* Le immagini arrivano da posti diversi e hanno temperature diverse: una
correzione uguale per tutte le fa sembrare dello stesso servizio. */ .ov-scatto img{
filter: saturate(.96) contrast(1.03);
}
.ov-scatto img { border-color: var(--ov-linea); box-shadow: var(--ov-ombra-1); border-radius: var(--ov-r-m); }
/* ---------------------------------------------------------------- il corpo --- */
.ge-article-container { padding-block: 30px 60px; }
.ge-breadcrumb { font-family: var(--ge-mono); font-size: var(--ov-t-2xs); letter-spacing: .04em; text-transform: uppercase; color: var(--ov-faint); }
.ge-article-title { font-weight: 800; letter-spacing: -0.03em; }
.ge-article-meta { color: var(--ov-faint); }
.article-body p { color: #1f242c; }
/* Il primo capoverso e' quello che decide se si continua a leggere: piu' grande. */
.article-body > p:first-of-type { font-size: 1.16rem; line-height: 1.65; color: var(--ov-ink-2); }
.article-body h2 {
font-weight: 800; letter-spacing: -0.03em;
margin: 52px 0 16px; padding-top: 6px;
border-top: 2px solid var(--ov-rame-200);
}
.article-body h2:first-child { margin-top: 8px; border-top: none; padding-top: 0; }
.article-body h3 { font-weight: 700; font-size: 1.16rem; color: var(--ov-ink); margin: 30px 0 8px; }
.article-body li { margin-bottom: 8px; }
.article-body ul li::marker { color: var(--ov-rame-500); }
.article-body ol li::marker { font-family: var(--ge-mono); font-weight: 600; color: var(--ov-rame-700); font-size: .9em; }
.article-body strong { font-weight: 700; color: var(--ov-ink); }
.article-body a { text-decoration-thickness: 1px; text-underline-offset: 3px; color: var(--ov-rame-800); }
/* Le tabelle erano griglie nude: qui diventano un oggetto, e su schermo stretto
scorrono dentro il loro riquadro invece di allargare la pagina. */
.article-body table {
font-size: var(--ov-t-s);
border: 1px solid var(--ov-linea);
border-radius: var(--ov-r-s);
border-collapse: separate; border-spacing: 0;
overflow: hidden;
box-shadow: var(--ov-ombra-1);
background: var(--ov-bianco);
}
.article-body th {
background: var(--ov-carta-2); font-family: var(--ge-mono);
font-size: var(--ov-t-3xs); font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
color: var(--ov-muted); border: none; border-bottom: 1px solid var(--ov-linea); padding: 11px 14px;
}
.article-body td { border: none; border-bottom: 1px solid var(--ov-linea-soft); padding: 11px 14px; vertical-align: top; }
.article-body tr:last-child td { border-bottom: none; }
.article-body tbody tr:nth-child(even) td { background: #fcfbfa; }
/* Il riquadro che circonda una tabella larga: lo aggiunge il generatore. */
.ov-scorre { overflow-x: auto; margin: 0 0 20px; -webkit-overflow-scrolling: touch; }
.ov-scorre > table { margin-bottom: 0; min-width: 460px; }
/* Tre modi per fermare il lettore dentro un muro di testo. */
.ov-nota, .ov-attenzione, .ov-verifica {
margin: 26px 0; padding: 18px 22px 18px 20px;
border-radius: var(--ov-r-s); font-size: var(--ov-t-s); line-height: 1.6;
border-left: 4px solid var(--ov-rame-500); background: var(--ov-rame-50);
}
.ov-attenzione { border-left-color: var(--ov-male); background: var(--ov-male-velo); }
.ov-verifica { border-left-color: var(--ov-ok); background: var(--ov-ok-velo); }
.ov-nota b, .ov-attenzione b, .ov-verifica b { display: block; font-family: var(--ge-display); font-weight: 700; margin-bottom: 4px; }
.ov-nota p, .ov-attenzione p, .ov-verifica p { margin: 0; max-width: none; }
/* "In breve" e' la risposta: deve sembrare la risposta, non un riquadro fra tanti. */
.ge-breve {
background: linear-gradient(180deg, var(--ov-rame-50), var(--ov-bianco) 62%);
border: 1px solid var(--ov-rame-bordo); border-left: 5px solid var(--ov-rame-500);
box-shadow: var(--ov-ombra-2);
}
.ge-breve-q { font-weight: 800; letter-spacing: -0.02em; }
.ge-breve-punti li::marker { color: var(--ov-rame-500); }
/* L'indice: due colonne, numeri in rame, e da schermo largo resta a vista. */
.ge-toc { border-color: var(--ov-linea-soft); }
.ge-toc-title { color: var(--ov-rame-800); }
.ge-disclosure { border-left-color: var(--ov-rame-500); background: var(--ov-carta); font-size: var(--ov-t-xs); }
.ge-faq-title { font-weight: 800; letter-spacing: -0.025em; }
.ge-faq summary { font-weight: 700; }
.ge-faq summary::before { font-weight: 700; color: var(--ov-rame-600); }
.ge-faq details[open] { background: var(--ov-carta); box-shadow: none; border: 1px solid var(--ov-linea-soft); padding-inline: 18px; }
/* -------------------------------------------------------- la scheda prodotto */
.article-body .product-card {
background: linear-gradient(180deg, var(--ov-bianco), var(--ov-carta));
border: 1px solid var(--ov-linea); border-left: 4px solid var(--ov-rame-500);
box-shadow: var(--ov-ombra-2);
}
.article-body .pc-name { font-size: var(--ov-t-xl); font-weight: 700; letter-spacing: -0.012em; }
.article-body .pc-note { color: var(--ov-ink-2); }
.article-body .pc-price { font-weight: 700; font-size: var(--ov-t-m); color: var(--ov-ink); }
.article-body .pc-meta a {
background: linear-gradient(178deg, var(--ov-rame-600), var(--ov-rame-800));
font-weight: 700; box-shadow: var(--ov-ombra-rame);
transition: filter var(--ov-veloce) ease, transform var(--ov-veloce) var(--ov-curva);
}
.article-body .pc-meta a:hover { background: linear-gradient(178deg, var(--ov-rame-600), var(--ov-rame-800)); filter: brightness(1.07); transform: translateY(-1px); }
/* ------------------------------------------------------------------ moduli -- */
/* 16px sui campi: sotto questa misura il telefono ingrandisce la pagina da solo
appena si tocca il campo, e il modulo salta fuori schermo. */
.ge-field input, .ov-campo input, .ov-campo select, .ge-cerca input {
font-size: 16px; padding: 13px 14px; border-radius: var(--ov-r-s);
border-color: var(--ov-linea-forte);
transition: border-color var(--ov-veloce) ease, box-shadow var(--ov-veloce) ease;
}
.ge-field input:focus, .ov-campo input:focus, .ov-campo select:focus, .ge-cerca input:focus {
border-color: var(--ov-rame-500); box-shadow: 0 0 0 3px var(--ov-rame-100);
}
.ge-field-label, .ov-campo__label { color: var(--ov-muted); font-weight: 600; letter-spacing: .12em; }
.ge-consent { font-size: var(--ov-t-xs); line-height: 1.5; color: var(--ov-muted); }
/* 12 settembre 2026. Il quadratino era 18px. L'area toccabile vera non e' mai
stata quella — la