/* ==========================================================================
Massimo Romagnoli · foglio di stile del sito
Bozza grafica compatibile con il Kit base siti (vedi KIT_REGOLE-HTML.md)
========================================================================== */
/* 0. Font in locale (Barlow, SIL Open Font License) */
@font-face {
font-family: "Barlow";
font-style: normal;
font-weight: 300;
font-display: swap;
src: url("../fonts/barlow-latin-ext-300-normal.woff2") format("woff2");
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: "Barlow";
font-style: normal;
font-weight: 300;
font-display: swap;
src: url("../fonts/barlow-latin-300-normal.woff2") format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: "Barlow";
font-style: normal;
font-weight: 400;
font-display: swap;
src: url("../fonts/barlow-latin-ext-400-normal.woff2") format("woff2");
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: "Barlow";
font-style: normal;
font-weight: 400;
font-display: swap;
src: url("../fonts/barlow-latin-400-normal.woff2") format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: "Barlow";
font-style: normal;
font-weight: 500;
font-display: swap;
src: url("../fonts/barlow-latin-ext-500-normal.woff2") format("woff2");
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: "Barlow";
font-style: normal;
font-weight: 500;
font-display: swap;
src: url("../fonts/barlow-latin-500-normal.woff2") format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: "Barlow";
font-style: normal;
font-weight: 600;
font-display: swap;
src: url("../fonts/barlow-latin-ext-600-normal.woff2") format("woff2");
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: "Barlow";
font-style: normal;
font-weight: 600;
font-display: swap;
src: url("../fonts/barlow-latin-600-normal.woff2") format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Instrument Serif corsivo (SIL Open Font License): solo per poche frasi in evidenza */
@font-face {
font-family: "Instrument Serif";
font-style: italic;
font-weight: 400;
font-display: swap;
src: url("../fonts/instrument-serif-latin-ext-400-italic.woff2") format("woff2");
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: "Instrument Serif";
font-style: italic;
font-weight: 400;
font-display: swap;
src: url("../fonts/instrument-serif-latin-400-italic.woff2") format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* ==========================================================================
1. Variabili
========================================================================== */
:root {
/* Tema chiaro (predefinito) */
--colore-fondo: #FFFFFF;
--colore-fondo-chiaro: #F4F3F3; /* fasce alternate */
--colore-cella: #FFFFFF; /* celle dei clienti */
--colore-testo: #2B2A2B;
--colore-grigio: #5A5758; /* testi secondari (7,1:1 su bianco) */
--colore-filetto: #E3E1E2;
--colore-righello: #C9C6C7;
--colore-righello-forte: #5A5758;
--colore-campo: #8A8687; /* bordo dei campi (3,5:1 su bianco) */
--colore-tratteggio: #B3B0B1; /* linee tratteggiate della fascia dei numeri */
--colore-grafite: #504D4E; /* fascia siti su misura */
--colore-piede: #504D4E;
--colore-su-grafite: #E3E1E2; /* testi secondari su grafite (6,4:1) */
--colore-rosso: #D01D28; /* accento decorativo */
--colore-accento-testo: #D01D28; /* rosso usato come testo (5,4:1 su bianco) */
--colore-testata: rgba(255, 255, 255, 0.96);
--pulsante-fondo: #EFEEEE; /* grigio chiaro su bianco */
--pulsante-testo: #2B2A2B;
--colore-bianco: #FFFFFF;
--font-testo: "Barlow", "Helvetica Neue", Arial, sans-serif;
--font-accento: "Instrument Serif", Georgia, serif; /* frasi in corsivo */
--larghezza-max: 1200px;
--margine: clamp(24px, 5vw, 64px);
--spazio-sezione: clamp(72px, 10vw, 136px);
--durata: 0.7s; /* D08: stessa durata per tutte le transizioni */
--durata-pulsante: 0.45s; /* pulsanti un po' più rapidi */
--raggio-foto: 12px; /* angoli stondati delle immagini */
--curva: cubic-bezier(0.25, 0.1, 0.25, 1);
color-scheme: light;
}
/* Tema scuro: solo se il visitatore lo sceglie con il pulsante (D12: si parte sempre dal giorno) */
:root[data-tema="scuro"] {
--colore-fondo: #222021;
--colore-fondo-chiaro: #2C2A2B;
--colore-cella: #222021;
--colore-testo: #F1F0F0;
--colore-grigio: #B8B5B6; /* 7,7:1 sul fondo scuro */
--colore-filetto: #3E3B3C;
--colore-righello: #5A5758;
--colore-righello-forte: #8E8A8B;
--colore-campo: #8E8A8B; /* 4,8:1 sul fondo scuro */
--colore-tratteggio: #6A6768;
--colore-grafite: #504D4E;
--colore-piede: #171616;
--colore-accento-testo: #F2636B; /* rosso schiarito per i testi: 4,6:1 anche sulle fasce più chiare del tema scuro */
--colore-testata: rgba(34, 32, 33, 0.95);
--pulsante-fondo: #363334;
--pulsante-testo: #F1F0F0;
color-scheme: dark;
}
/* Passaggio morbido tra i due temi (classe aggiunta per un attimo dallo script) */
.tema-in-cambio,
.tema-in-cambio *,
.tema-in-cambio *::before,
.tema-in-cambio *::after {
transition: background-color var(--durata) var(--curva), color var(--durata) var(--curva), border-color var(--durata) var(--curva), fill var(--durata) var(--curva) !important;
}
/* ==========================================================================
2. Base
========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html {
-webkit-text-size-adjust: 100%;
text-size-adjust: 100%;
}
body {
margin: 0;
font-family: var(--font-testo);
font-weight: 400;
font-size: 1.0625rem;
line-height: 1.6;
color: var(--colore-testo);
background: var(--colore-fondo);
-webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; height: auto; }
h1, h2, h3 { margin: 0; font-weight: 400; line-height: 1.15; text-wrap: balance; }
p { margin: 0; }
a {
color: inherit;
text-decoration-thickness: 1px;
text-underline-offset: 0.2em;
transition: color var(--durata) var(--curva), background-color var(--durata) var(--curva), border-color var(--durata) var(--curva), text-decoration-color var(--durata) var(--curva);
}
:focus-visible {
outline: 2px solid var(--colore-accento-testo);
outline-offset: 3px;
}
.contenitore {
width: 100%;
max-width: calc(var(--larghezza-max) + 2 * var(--margine));
margin: 0 auto;
padding: 0 var(--margine);
}
.solo-lettori {
position: absolute !important;
width: 1px; height: 1px;
padding: 0; margin: -1px;
overflow: hidden; clip: rect(0 0 0 0);
white-space: nowrap; border: 0;
}
.vai-al-contenuto {
position: absolute;
left: var(--margine);
top: -100px;
z-index: 100;
padding: 12px 20px;
background: var(--colore-grafite);
color: var(--colore-bianco);
font-weight: 500;
text-decoration: none;
}
.vai-al-contenuto:focus { top: 12px; }
/* Pulsanti: pillola grigio chiaro con il cerchio rosso e la freccia.
Al passaggio il cerchio si allarga fino a riempire tutta la pillola
e la freccia ruota da obliqua a orizzontale. */
.pulsante {
position: relative;
isolation: isolate;
overflow: hidden;
display: inline-flex;
align-items: center;
gap: 22px;
min-height: 56px;
padding: 6px 6px 6px 28px;
border: 0;
border-radius: 999px;
background: var(--pulsante-fondo);
color: var(--pulsante-testo);
font: 500 1rem/1.2 var(--font-testo);
letter-spacing: 0.01em;
text-decoration: none;
transition: color var(--durata-pulsante) var(--curva);
}
/* il cerchio rosso che si allarga */
.pulsante::before {
content: "";
position: absolute;
z-index: -1;
top: 50%;
right: 6px;
width: 44px;
height: 44px;
margin-top: -22px;
border-radius: 50%;
background: var(--colore-rosso);
transform: scale(1);
transition: transform var(--durata-pulsante) var(--curva);
}
.pulsante__cerchio {
display: flex;
align-items: center;
justify-content: center;
flex: none;
width: 44px;
height: 44px;
border-radius: 50%;
color: var(--colore-bianco);
}
.pulsante__freccia {
width: 18px;
height: 18px;
transform: rotate(-45deg);
transition: transform var(--durata-pulsante) var(--curva);
}
.pulsante:hover,
.pulsante:focus-visible { color: var(--colore-bianco); }
.pulsante:hover::before,
.pulsante:focus-visible::before { transform: scale(14); }
.pulsante:hover .pulsante__freccia,
.pulsante:focus-visible .pulsante__freccia { transform: rotate(0deg); }
/* sulla fascia grafite la pillola è bianca */
.pulsante--chiaro { background: var(--colore-bianco); color: #2B2A2B; }
.link-freccia {
display: inline-block;
padding: 10px 0;
font-weight: 500;
text-decoration: underline;
text-decoration-color: var(--colore-filetto);
text-decoration-thickness: 2px;
}
.link-freccia:hover { color: var(--colore-accento-testo); text-decoration-color: var(--colore-accento-testo); }
/* Titoli di sezione */
.titolo-sezione {
font-weight: 300;
font-size: clamp(2rem, 4vw, 3rem);
letter-spacing: -0.015em;
}
/* ==========================================================================
3. Testata
========================================================================== */
.testata {
position: sticky;
top: 0;
z-index: 50;
background: var(--colore-testata);
border-bottom: 1px solid var(--colore-filetto);
}
.testata__barra {
display: flex;
align-items: center;
justify-content: space-between;
gap: 32px;
min-height: 84px;
}
.marchio {
display: flex;
align-items: center;
gap: 14px;
text-decoration: none;
color: var(--colore-testo);
}
.marchio__segno { width: 54px; height: auto; flex: none; color: var(--colore-grigio); }
.marchio__testo { display: inline-grid; line-height: 1.2; font-size: 1.0625rem; }
/* nome e ruolo finiscono allo stesso punto: le due righe si allargano alla più lunga */
.marchio__nome, .marchio__ruolo { text-align: justify; text-align-last: justify; }
.marchio__nome { font-weight: 500; font-size: 1em; letter-spacing: 0.01em; }
.marchio__ruolo { font-size: 0.8235em; color: var(--colore-grigio); } /* 14px su 17px: le due righe hanno la stessa larghezza */
.menu__elenco {
display: flex;
gap: clamp(16px, 2.4vw, 36px);
margin: 0;
padding: 0;
list-style: none;
}
.menu__link {
display: block;
padding: 10px 0;
font-weight: 500;
font-size: 0.9875rem;
text-decoration: none;
border-bottom: 2px solid transparent;
}
.menu__link:hover { color: var(--colore-accento-testo); }
.menu__link[aria-current="page"] { border-bottom-color: var(--colore-rosso); }
.testata__azioni { display: flex; align-items: center; gap: clamp(16px, 2.4vw, 36px); }
/* Pulsante tema chiaro / scuro */
.tema {
display: inline-flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
margin-right: -10px;
padding: 0;
border: 0;
border-radius: 50%;
background: none;
color: var(--colore-testo);
cursor: pointer;
transition: color var(--durata) var(--curva), background-color var(--durata) var(--curva);
}
.tema:hover { color: var(--colore-accento-testo); }
.tema__icona { width: 22px; height: 22px; }
.tema__icona--sole { display: none; }
[aria-pressed="true"] > .tema__icona--sole { display: block; }
[aria-pressed="true"] > .tema__icona--luna { display: none; }
.testata__menu {
display: none;
align-items: center;
gap: 10px;
min-height: 44px;
padding: 8px 4px;
border: 0;
background: none;
color: var(--colore-testo);
font: 500 1rem var(--font-testo);
cursor: pointer;
}
.testata__menu-icona { position: relative; width: 22px; height: 14px; }
.testata__menu-icona::before,
.testata__menu-icona::after {
content: "";
position: absolute;
left: 0;
width: 100%;
height: 2px;
background: currentColor;
transition: transform var(--durata) var(--curva), top var(--durata) var(--curva);
}
.testata__menu-icona::before { top: 2px; }
.testata__menu-icona::after { top: 10px; }
.testata__menu[aria-expanded="true"] .testata__menu-icona::before { top: 6px; transform: rotate(45deg); }
.testata__menu[aria-expanded="true"] .testata__menu-icona::after { top: 6px; transform: rotate(-45deg); }
/* ==========================================================================
4. Apertura
========================================================================== */
.apertura { padding: clamp(56px, 7.7vw, 100px) 0 clamp(48px, 6vw, 80px); } /* al massimo 100 px tra la testata e il testo */
.apertura__luogo {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 28px;
font-weight: 500;
color: var(--colore-grigio);
}
.apertura__luogo::before {
content: "";
width: 10px;
height: 10px;
background: var(--colore-rosso);
flex: none;
}
.apertura__titolo {
max-width: 11.5em;
font-weight: 300;
font-size: clamp(2.75rem, 6.2vw, 5.5rem);
line-height: 1.02;
letter-spacing: -0.025em;
}
.apertura__testo {
max-width: 36em;
margin-top: 36px;
font-size: clamp(1.125rem, 1.6vw, 1.3125rem);
line-height: 1.55;
color: var(--colore-grigio);
}
.apertura__azioni {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 16px 32px;
margin-top: 44px;
}
/* Griglia dell'apertura: testi a sinistra, disegno a destra */
.apertura__griglia {
display: grid;
grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
gap: 40px clamp(32px, 4vw, 64px);
align-items: center;
}
.apertura__disegno { min-width: 0; }
/* Il sito che si costruisce a linee (solo decorativo, una volta al caricamento).
Ogni elemento ha una classe tN che ne decide il ritardo. */
.costruzione { display: block; width: 100%; height: auto; overflow: visible; }
.costr-guida { fill: none; stroke: var(--colore-righello); stroke-width: 1; }
.costr-croce { fill: none; stroke: var(--colore-grigio); stroke-width: 1; }
.costr-tratto { fill: none; stroke: var(--colore-grigio); stroke-width: 1.2; }
.costr-quota { fill: none; stroke: var(--colore-rosso); stroke-width: 1; }
.costr-colonna { fill: var(--colore-rosso); opacity: 0.07; }
.costr-pieno { fill: var(--colore-grigio); opacity: 0.3; }
.costr-chiaro { fill: var(--colore-grigio); opacity: 0.18; }
.costr-pallini { fill: var(--colore-righello); }
.costr-punto { fill: var(--colore-rosso); }
.costr-etichetta { font: 500 9px var(--font-testo); letter-spacing: 0.06em; fill: var(--colore-grigio); }
.costr-etichetta--rossa { fill: var(--colore-rosso); }
.traccia { stroke-dasharray: 1; stroke-dashoffset: 1; animation: costr-disegna 0.8s var(--curva) both; }
.traccia.lenta { animation-duration: 1.1s; }
.appare { animation: costr-appare 0.6s var(--curva) both; }
.cresce-x, .cresce-y, .pop { transform-box: fill-box; }
.cresce-x { transform-origin: left center; animation: costr-cresce-x 0.6s var(--curva) both; }
.cresce-y { transform-origin: center top; animation: costr-cresce-y 0.7s var(--curva) both; }
.pop { transform-origin: center; animation: costr-pop 0.5s cubic-bezier(0.3, 1.5, 0.5, 1) both; }
.t1 { animation-delay: 0.2s; }
.t2 { animation-delay: 0.35s; }
.t3 { animation-delay: 0.5s; }
.t4 { animation-delay: 0.85s; }
.t5 { animation-delay: 0.9s; }
.t6 { animation-delay: 1.5s; }
.t7 { animation-delay: 1.7s; }
.t-col1 { animation-delay: 1.7s; }
.t-col2 { animation-delay: 1.78s; }
.t-col3 { animation-delay: 1.86s; }
.t-col4 { animation-delay: 1.94s; }
.t-col5 { animation-delay: 2.02s; }
.t-col6 { animation-delay: 2.1s; }
.t8 { animation-delay: 2.2s; }
.t9 { animation-delay: 2.35s; }
.t10 { animation-delay: 2.5s; }
.t11 { animation-delay: 2.65s; }
.t12 { animation-delay: 2.8s; }
.t13 { animation-delay: 2.95s; }
.t14 { animation-delay: 3.2s; }
@keyframes costr-disegna { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes costr-appare { from { opacity: 0; } to { opacity: 1; } }
@keyframes costr-cresce-x { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes costr-cresce-y { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes costr-pop { from { transform: scale(0); } to { transform: scale(1); } }
/* Il metro: una scala graduata con la linea tratteggiata «da tagliare».
Al caricamento le forbici tagliano lungo la linea fino alla misura e lasciano la linea rossa (solo decorativo). */
.metro {
position: relative;
height: 36px;
margin-top: clamp(56px, 8vw, 104px);
background-image:
linear-gradient(to right, var(--colore-righello) 1px, transparent 1px),
linear-gradient(to right, var(--colore-righello) 1px, transparent 1px),
linear-gradient(to right, var(--colore-righello-forte) 1px, transparent 1px);
background-size: 8px 8px, 40px 16px, 200px 28px;
background-repeat: repeat-x;
background-position: 0 calc(100% - 6px), 0 calc(100% - 6px), 0 calc(100% - 6px);
}
/* linea tratteggiata */
.metro::before {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 1px;
background: repeating-linear-gradient(to right, var(--colore-righello-forte) 0 7px, transparent 7px 13px);
}
.metro__nota {
position: absolute;
right: 0;
bottom: 44px;
font-size: 0.75rem;
font-weight: 500;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--colore-grigio);
}
/* il taglio rosso, con la stanghetta verticale dove si ferma */
.metro__segno {
position: absolute;
bottom: -1px;
left: 0;
width: 61.8%;
height: 3px;
background: var(--colore-rosso);
transform-origin: left center;
animation: metro-taglio 2.4s var(--curva) 3.4s both;
}
.metro__segno::after {
content: "";
position: absolute;
right: 0;
bottom: 0;
width: 3px;
height: 36px;
background: var(--colore-rosso);
transform-origin: bottom center;
animation: metro-stanghetta 0.5s var(--curva) 5.8s both;
}
@keyframes metro-taglio {
from { transform: scaleX(0); }
to { transform: scaleX(1); }
}
@keyframes metro-stanghetta {
from { transform: scaleY(0); }
to { transform: scaleY(1); }
}
/* le forbici: tagliano fino alla misura, poi spariscono e lasciano la stanghetta */
.metro__forbici {
position: absolute;
bottom: -12px;
left: 61.8%;
width: 44px;
height: 24px;
margin-left: -17.6px; /* il perno delle lame cade sulla fine del taglio */
color: var(--colore-testo);
animation: metro-forbici 2.4s var(--curva) 3.4s both, metro-forbici-via 0.5s ease 5.8s both;
}
.metro__forbici svg { display: block; width: 100%; height: 100%; overflow: visible; }
.forbici__lama { transform-box: view-box; transform-origin: 16px 11px; }
.forbici__anello { fill: var(--colore-fondo); stroke: currentColor; stroke-width: 1.8; }
.forbici__lama--su { transform: rotate(-12deg); animation: forbici-su 0.4s ease-in-out 3.4s 6; }
.forbici__lama--giu { transform: rotate(12deg); animation: forbici-giu 0.4s ease-in-out 3.4s 6; }
@keyframes metro-forbici {
from { left: 0; }
to { left: 61.8%; }
}
@keyframes metro-forbici-via {
from { opacity: 1; }
to { opacity: 0; }
}
@keyframes forbici-su {
0%, 100% { transform: rotate(-12deg); }
50% { transform: rotate(0deg); }
}
@keyframes forbici-giu {
0%, 100% { transform: rotate(12deg); }
50% { transform: rotate(0deg); }
}
/* ==========================================================================
5. Servizi
========================================================================== */
.servizi { padding: clamp(56px, 7vw, 96px) 0 var(--spazio-sezione); }
.servizi__intro {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 32px 64px;
align-items: center;
margin-bottom: clamp(48px, 6vw, 80px);
}
.servizi__intro p { max-width: 32em; color: var(--colore-grigio); }
/* frase in corsivo serif (Instrument Serif Italic) */
.frase-accento {
font-family: var(--font-accento);
font-style: italic;
font-weight: 400;
font-size: clamp(1.375rem, 2vw, 1.75rem);
line-height: 1.22;
letter-spacing: -0.005em;
}
.servizi__intro .frase-accento { max-width: 22em; color: #575556; } /* 80% di nero */
[data-tema="scuro"] .servizi__intro .frase-accento { color: #D4D2D3; }
/* l'ultima parte della frase va sempre su una riga nuova (senza
, il testo resta modificabile) */
.frase-accento__chiusa { display: block; }
.frase-accento > span:first-child { display: block; text-wrap: balance; } /* righe sopra di lunghezza simile */
.servizi__elenco {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 48px clamp(32px, 4vw, 64px);
margin: 0;
padding: 0;
list-style: none;
}
.servizio {
position: relative;
display: flex;
flex-direction: column;
padding-top: 32px;
border-top: 1px solid var(--colore-filetto);
}
.servizio::before {
content: "";
position: absolute;
top: -1px;
left: 0;
width: 32px;
height: 3px;
background: var(--colore-rosso);
}
.servizio__numero {
font-weight: 300;
font-size: 2.75rem;
line-height: 1;
color: var(--colore-accento-testo);
}
/* tema scuro: numeri in rosso pieno (sono decorativi, nascosti ai lettori di schermo) */
[data-tema="scuro"] .servizio__numero { color: #E0303B; } /* rosso pieno appena più chiaro: almeno 3,1:1 sui due fondi scuri (testo grande) */
.servizio__titolo {
margin-top: 24px;
font-weight: 500;
font-size: 1.5rem;
}
.servizio__testo { margin-top: 14px; color: var(--colore-grigio); }
.servizio .link-freccia { margin-top: auto; padding-top: 24px; align-self: flex-start; }
/* ==========================================================================
6. Lavori in evidenza
Tre schede come nella pagina Lavori (D73): angoli stondati, «Vedi», siti nella cornice del browser.
========================================================================== */
.lavori-home {
padding: var(--spazio-sezione) 0;
background: var(--colore-fondo-chiaro);
}
.lavori-home__testa {
display: flex;
flex-wrap: wrap;
align-items: baseline;
justify-content: space-between;
gap: 16px 32px;
margin-bottom: clamp(40px, 5vw, 64px);
}
/* le schede: stesse della pagina Lavori (griglia a tre colonne); sul fondo grigio la copertina dei siti è bianca */
.lavori-home .progetto__copertine { background: var(--colore-fondo); }
/* ==========================================================================
7. Siti su misura (fascia grafite)
========================================================================== */
.su-misura {
padding: var(--spazio-sezione) 0;
background: var(--colore-grafite);
color: var(--colore-bianco);
}
.su-misura :focus-visible { outline-color: var(--colore-bianco); }
.su-misura__griglia {
display: grid;
grid-template-columns: 5fr 6fr;
gap: 48px clamp(48px, 7vw, 112px);
}
.su-misura__etichetta {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 24px;
font-weight: 500;
color: var(--colore-su-grafite);
}
.su-misura__etichetta::before {
content: "";
width: 10px;
height: 10px;
background: var(--colore-rosso);
}
.su-misura__titolo {
font-weight: 300;
font-size: clamp(2.25rem, 4.6vw, 3.75rem);
line-height: 1.05;
letter-spacing: -0.02em;
}
.su-misura__testo {
font-size: 1.1875rem;
color: var(--colore-su-grafite);
}
.su-misura__punti {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 32px;
margin: 48px 0;
padding: 0;
list-style: none;
}
.su-misura__punto {
padding-top: 20px;
border-top: 1px solid rgba(255, 255, 255, 0.28);
}
.su-misura__punto-titolo { font-weight: 500; font-size: 1.125rem; }
.su-misura__punto-testo { margin-top: 8px; font-size: 0.9875rem; color: var(--colore-su-grafite); }
/* ==========================================================================
8. Chi sono in breve
========================================================================== */
.chi-sono-home { padding: var(--spazio-sezione) 0; scroll-margin-top: 84px; }
.chi-sono-home__griglia {
display: grid;
grid-template-columns: 5fr 7fr;
gap: 48px clamp(48px, 8vw, 128px);
align-items: center;
}
.chi-sono-home__foto {
width: 100%;
aspect-ratio: 4 / 5;
object-fit: cover;
background: var(--colore-filetto);
}
.chi-sono-home__testo {
max-width: 34em;
margin-top: 28px;
font-size: 1.1875rem;
}
.chi-sono-home__testo + .chi-sono-home__testo { margin-top: 18px; color: var(--colore-grigio); font-size: 1.0625rem; }
.chi-sono-home .pulsante { margin-top: 32px; }
/* ==========================================================================
9. Clienti
========================================================================== */
.clienti {
padding: var(--spazio-sezione) 0;
background: var(--colore-fondo-chiaro);
}
.clienti .titolo-sezione { margin-bottom: clamp(40px, 5vw, 64px); }
.clienti__elenco {
display: grid;
grid-template-columns: repeat(5, 1fr);
margin: 0;
padding: 0;
list-style: none;
border-top: 1px solid var(--colore-filetto);
border-left: 1px solid var(--colore-filetto);
}
.cliente {
display: flex;
align-items: center;
justify-content: center;
min-height: 168px;
padding: 24px;
border-right: 1px solid var(--colore-filetto);
border-bottom: 1px solid var(--colore-filetto);
background: var(--colore-cella);
text-align: center;
}
.cliente__nome { font-weight: 500; color: var(--colore-grigio); line-height: 1.25; }
/* loghi a colori */
.cliente__logo {
width: auto;
height: auto;
max-width: 78%;
max-height: 84px;
}
/* al passaggio il logo si schiarisce appena: solo un segno che ci si è sopra, nessun link */
.cliente__logo { transition: opacity var(--durata) var(--curva); }
.cliente:hover .cliente__logo { opacity: 0.55; }
/* tema scuro: le celle restano chiare, così i loghi si leggono con i loro colori */
[data-tema="scuro"] .cliente { background: #F4F3F3; border-color: #D9D6D7; }
[data-tema="scuro"] .clienti__elenco { border-color: #D9D6D7; }
/* ==========================================================================
10. Invito al contatto
========================================================================== */
.invito { padding: var(--spazio-sezione) 0; scroll-margin-top: 84px; } /* non finisce sotto la testata fissa */
.invito__griglia {
display: grid;
grid-template-columns: 5fr 6fr;
gap: 48px clamp(48px, 7vw, 112px);
align-items: start;
}
.invito__titolo {
font-weight: 300;
font-size: clamp(2.5rem, 4.4vw, 3.75rem);
line-height: 1.05;
letter-spacing: -0.02em;
}
.invito__testo { margin-top: 24px; max-width: 30em; font-size: 1.1875rem; color: var(--colore-grigio); text-wrap: pretty; }
.invito__testo + .invito__testo { margin-top: 0; } /* la seconda frase va solo a capo, senza riga vuota */
.invito__azione { justify-self: end; }
/* Modulo veloce */
.modulo { display: flex; flex-direction: column; gap: 28px; }
.modulo__riga { display: grid; grid-template-columns: 1fr 1fr; gap: 28px 32px; }
.modulo__campo { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.modulo__etichetta { font-weight: 500; font-size: 0.9375rem; }
.modulo__input {
width: 100%;
min-height: 48px;
padding: 10px 0;
border: 0;
border-bottom: 1px solid var(--colore-campo);
border-radius: 0;
background: transparent;
color: var(--colore-testo);
font: 400 1.0625rem/1.5 var(--font-testo);
transition: border-color var(--durata-pulsante) var(--curva), box-shadow var(--durata-pulsante) var(--curva);
}
.modulo__input--testo { resize: vertical; min-height: 112px; }
.modulo__input:hover { border-bottom-color: var(--colore-testo); }
.modulo__input:focus { outline: none; border-bottom-color: var(--colore-accento-testo); box-shadow: 0 1px 0 0 var(--colore-accento-testo); }
.modulo__consenso { display: flex; align-items: flex-start; gap: 12px; font-size: 0.9375rem; color: var(--colore-grigio); }
.modulo__consenso a { color: var(--colore-testo); }
.modulo__consenso a:hover { color: var(--colore-accento-testo); }
.modulo__casella { flex: none; width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--colore-rosso); }
.modulo__fondo { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 32px; }
.modulo__nota { font-size: 0.875rem; color: var(--colore-grigio); }
.modulo__grazie { font-size: 1.1875rem; }
/* ==========================================================================
11. Piè di pagina
========================================================================== */
.piede {
padding: clamp(64px, 8vw, 96px) 0 32px;
background: var(--colore-piede);
color: var(--colore-bianco);
font-size: 0.9875rem;
}
.piede :focus-visible { outline-color: var(--colore-bianco); }
.piede__griglia {
display: grid;
grid-template-columns: 4fr 2fr 2fr 3fr;
gap: 40px;
}
.piede .marchio { color: var(--colore-bianco); }
.piede .marchio__segno { color: var(--colore-bianco); }
.piede .marchio__ruolo { color: var(--colore-su-grafite); }
.piede__titolo {
margin-bottom: 14px;
font-weight: 500;
font-size: 1rem;
}
.piede__elenco { margin: 0; padding: 0; list-style: none; }
.piede__elenco a, .piede__recapiti a {
display: inline-block;
padding: 4px 0;
color: var(--colore-su-grafite);
text-decoration: none;
}
.piede__elenco a:hover, .piede__recapiti a:hover { color: var(--colore-bianco); }
.piede__recapiti { font-style: normal; color: var(--colore-su-grafite); line-height: 1.7; }
.piede__fondo {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
gap: 12px 32px;
margin-top: clamp(48px, 6vw, 80px);
padding-top: 24px;
border-top: 1px solid rgba(255, 255, 255, 0.24);
color: var(--colore-su-grafite);
font-size: 0.875rem;
}
.piede__legali { display: flex; flex-wrap: wrap; gap: 4px 24px; margin: 0; padding: 0; list-style: none; }
.piede__legali a { display: inline-block; padding: 4px 0; color: var(--colore-su-grafite); text-decoration: none; }
.piede__legali a:hover { color: var(--colore-bianco); }
/* ==========================================================================
12. Responsive
========================================================================== */
/* Tablet orizzontale */
@media (max-width: 1100px) {
.piede__griglia { grid-template-columns: 1fr 1fr 1fr; }
.piede__brand { grid-column: 1 / -1; }
}
/* Menu a scomparsa da tablet verticale in giù */
@media (max-width: 960px) {
.testata__menu { display: inline-flex; }
.menu {
position: absolute;
top: 100%;
left: 0;
right: 0;
background: var(--colore-fondo);
border-bottom: 1px solid var(--colore-filetto);
box-shadow: 0 24px 40px rgba(43, 42, 43, 0.08);
}
.js .menu { display: none; }
.js .menu.menu--aperto { display: block; }
.menu__elenco {
flex-direction: column;
gap: 0;
max-width: calc(var(--larghezza-max) + 2 * var(--margine));
margin: 0 auto;
padding: 8px var(--margine) 24px;
}
.menu__link {
padding: 14px 0;
font-size: 1.125rem;
border-bottom: 1px solid var(--colore-filetto);
}
.menu__link[aria-current="page"] { color: var(--colore-rosso); border-bottom-color: var(--colore-filetto); }
.servizi__intro { grid-template-columns: 1fr; }
.apertura__griglia { grid-template-columns: 1fr; }
.apertura__disegno { max-width: 520px; }
/* tablet: il primo lavoro su tutta la larghezza, gli altri due affiancati */
.su-misura__griglia { grid-template-columns: 1fr; }
.chi-sono-home__griglia { grid-template-columns: 2fr 3fr; }
.invito__griglia { grid-template-columns: 1fr; }
.invito__azione { justify-self: start; }
}
/* Tablet verticale */
@media (max-width: 820px) {
.servizi__elenco { grid-template-columns: 1fr; gap: 0; }
.servizio { display: grid; grid-template-columns: 80px 1fr; column-gap: 24px; padding: 32px 0 36px; }
.servizio__numero { grid-row: span 3; }
.servizio__titolo { margin-top: 0; }
.servizio .link-freccia { padding-top: 12px; }
.clienti__elenco { grid-template-columns: repeat(2, 1fr); }
.cliente { min-height: 140px; }
}
/* Telefono */
@media (max-width: 600px) {
.marchio__segno { width: 44px; }
.marchio__testo { font-size: 0.9375rem; }
.metro__nota { display: none; }
.testata__menu-testo { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.modulo__riga { grid-template-columns: 1fr; }
.su-misura__punti { grid-template-columns: 1fr; gap: 24px; }
.chi-sono-home__griglia { grid-template-columns: 1fr; }
.chi-sono-home__foto { max-width: 420px; }
.cliente { min-height: 112px; }
.piede__griglia { grid-template-columns: 1fr 1fr; }
.piede__contatti { grid-column: 1 / -1; }
.servizio { grid-template-columns: 56px 1fr; column-gap: 16px; }
.servizio__numero { font-size: 2.25rem; }
}
/* ==========================================================================
13. Pallino che segue il mouse (creato dallo script, solo con il mouse)
========================================================================== */
.cursore {
position: fixed;
top: 0;
left: 0;
z-index: 200;
display: flex;
align-items: center;
justify-content: center;
width: 12px;
height: 12px;
margin: -6px 0 0 -6px;
border: 1px solid var(--colore-rosso);
border-radius: 50%;
background: var(--colore-rosso);
pointer-events: none;
opacity: 0;
will-change: transform;
transition: width 0.5s var(--curva), height 0.5s var(--curva), margin 0.5s var(--curva), background-color 0.5s var(--curva), opacity 0.4s var(--curva);
}
.cursore--visibile { opacity: 1; }
.cursore--attivo {
width: 56px;
height: 56px;
margin: -28px 0 0 -28px;
background: rgba(208, 29, 40, 0.14);
}
.cursore--vedi {
width: 92px;
height: 92px;
margin: -46px 0 0 -46px;
background: var(--colore-rosso);
}
.cursore__testo {
color: var(--colore-bianco);
font-weight: 500;
font-size: 0.9375rem;
opacity: 0;
transition: opacity 0.4s var(--curva);
}
.cursore--vedi .cursore__testo { opacity: 1; }
.cursore--piu .cursore__testo { font-size: 2rem; font-weight: 300; line-height: 1; }
/* sopra la freccia «Vai al sito» il cerchio è un po' più grande per contenere la scritta */
.cursore--sito { width: 104px; height: 104px; margin: -52px 0 0 -52px; }
.cursore--sito .cursore__testo { font-size: 0.875rem; }
/* ==========================================================================
15. Pagine interne: Siti su misura
========================================================================== */
.apertura--pagina { padding-bottom: clamp(56px, 7vw, 104px); }
.apertura__titolo--pagina { font-size: clamp(2.5rem, 4.8vw, 4.25rem); line-height: 1.04; }
/* In breve + tre pilastri */
.in-breve { padding: var(--spazio-sezione) 0; background: var(--colore-fondo-chiaro); }
.in-breve__griglia { display: grid; grid-template-columns: 4fr 8fr; gap: 48px clamp(40px, 5vw, 80px); align-items: start; }
.etichetta-sezione {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 20px;
font-weight: 500;
font-size: 1rem;
color: var(--colore-grigio);
}
.etichetta-sezione::before { content: ""; width: 10px; height: 10px; background: var(--colore-rosso); flex: none; }
.in-breve__frase { color: var(--colore-testo); }
[data-tema="scuro"] .in-breve__frase { color: #D4D2D3; }
.pilastri { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; margin: 0; padding: 0; list-style: none; }
.pilastro { position: relative; padding-top: 24px; border-top: 1px solid var(--colore-filetto); }
.pilastro::before { content: ""; position: absolute; top: -1px; left: 0; width: 32px; height: 3px; background: var(--colore-rosso); }
.pilastro__chi { font-size: 0.8125rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--colore-grigio); }
.pilastro__titolo { margin-top: 10px; font-weight: 500; font-size: 1.25rem; white-space: nowrap; }
.pilastro__testo { margin-top: 10px; color: var(--colore-grigio); }
/* Sezioni numerate */
.sezione { padding: var(--spazio-sezione) 0; scroll-margin-top: 84px; }
.sezione--chiara { background: var(--colore-fondo-chiaro); }
.sezione__testa { max-width: 760px; margin-bottom: clamp(48px, 6vw, 80px); }
.sezione__numero {
margin-bottom: 18px;
font-size: 0.875rem;
font-weight: 500;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--colore-grigio);
}
.sezione__numero span { margin-right: 10px; color: var(--colore-accento-testo); }
.sezione__intro { margin-top: 20px; font-size: 1.1875rem; color: var(--colore-grigio); }
.sezione__nota {
max-width: 52em;
margin-top: clamp(48px, 6vw, 72px);
padding-top: 24px;
border-top: 1px solid var(--colore-filetto);
font-size: 0.9375rem;
color: var(--colore-grigio);
}
/* Le funzioni (01–12) */
.funzioni { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(48px, 5vw, 72px) clamp(32px, 4vw, 64px); margin: 0; padding: 0; list-style: none; }
.funzione { position: relative; padding-top: 28px; border-top: 1px solid var(--colore-filetto); }
.funzione::before { content: ""; position: absolute; top: -1px; left: 0; width: 32px; height: 3px; background: var(--colore-rosso); }
.funzione__numero { font-weight: 300; font-size: 2.25rem; line-height: 1; color: var(--colore-accento-testo); }
[data-tema="scuro"] .funzione__numero { color: #E0303B; }
.funzione__titolo { margin-top: 18px; font-weight: 500; font-size: 1.375rem; }
.funzione__testo { margin-top: 10px; color: var(--colore-grigio); }
.funzione__punti { margin: 18px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; font-size: 0.9875rem; }
.funzione__punti li { position: relative; padding-left: 20px; }
.funzione__punti li::before { content: ""; position: absolute; left: 0; top: 0.6em; width: 7px; height: 7px; background: var(--colore-rosso); }
/* Tabella di confronto */
.confronto { overflow-x: auto; }
.confronto__titolo { margin-bottom: 24px; text-align: left; font-weight: 500; font-size: 1.0625rem; caption-side: top; }
.confronto__tabella { width: 100%; border-collapse: collapse; font-size: 1rem; }
.confronto__tabella th, .confronto__tabella td { padding: 18px 20px 18px 0; text-align: left; vertical-align: top; border-bottom: 1px solid var(--colore-filetto); }
.confronto__tabella thead th {
padding-top: 0;
font-size: 0.8125rem;
font-weight: 500;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--colore-grigio);
border-bottom-color: var(--colore-testo);
}
.confronto__tabella tbody th { width: 22%; font-weight: 500; }
.confronto__tabella td:nth-child(2) { width: 34%; color: var(--colore-grigio); }
.confronto__tabella td:nth-child(3) { position: relative; padding-left: 20px; }
.confronto__tabella td:nth-child(3)::before { content: ""; position: absolute; left: 0; top: calc(18px + 0.55em); width: 7px; height: 7px; background: var(--colore-rosso); }
/* Fascia grafite: elenco e funzioni su misura */
.su-misura__punti--elenco { grid-template-columns: 1fr; gap: 20px; margin-top: 0; }
.su-misura__sottotitolo { margin-top: 8px; font-weight: 500; font-size: 1.25rem; }
.su-misura__sottotitolo + .su-misura__testo { margin-top: 10px; font-size: 1.0625rem; }
@media (max-width: 960px) {
.in-breve__griglia { grid-template-columns: 1fr; }
.pilastro__titolo { white-space: normal; }
.funzioni { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 700px) {
.pilastri { grid-template-columns: 1fr; gap: 24px; }
.funzioni { grid-template-columns: 1fr; }
/* tabella a schede su telefono */
.confronto__tabella thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.confronto__tabella, .confronto__tabella tbody, .confronto__tabella tr, .confronto__tabella th, .confronto__tabella td { display: block; width: auto !important; }
.confronto__tabella tr { padding: 20px 0; border-bottom: 1px solid var(--colore-filetto); }
.confronto__tabella th, .confronto__tabella td { padding: 0; border: 0; }
.confronto__tabella tbody th { font-size: 1.125rem; margin-bottom: 10px; }
.confronto__tabella td { margin-top: 8px; }
.confronto__tabella td::after { content: none; }
.confronto__tabella td[data-etichetta]::before {
content: attr(data-etichetta);
position: static;
display: block;
width: auto;
height: auto;
margin-bottom: 2px;
background: none;
font-size: 0.75rem;
font-weight: 500;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--colore-grigio);
}
.confronto__tabella td:nth-child(3) { padding-left: 0; }
}
/* ==========================================================================
16. Pagina Servizi
========================================================================== */
/* indice dei servizi nell'apertura */
.indice { display: flex; flex-direction: column; margin-top: 40px; max-width: 420px; border-top: 1px solid var(--colore-filetto); }
.indice__voce {
display: flex;
align-items: baseline;
gap: 18px;
padding: 14px 0;
border-bottom: 1px solid var(--colore-filetto);
font-weight: 500;
font-size: 1.125rem;
text-decoration: none;
}
.indice__voce:hover { color: var(--colore-accento-testo); }
.indice__numero { font-weight: 300; font-size: 0.9375rem; color: var(--colore-accento-testo); }
/* il marchio che si costruisce */
.costr-modulo { fill: none; stroke: var(--colore-rosso); stroke-width: 0.6; opacity: 0.18; }
/* finale: contorno pieno, interno colorato all'80% */
.costr-contorno { fill: none; stroke: var(--colore-grigio); stroke-width: 0.3; stroke-linejoin: round; } /* unità del marchio: 0,3 × 5,5 ≈ 1,6 px */
.costr-contorno--r { stroke: var(--colore-rosso); }
.costr-lettera-m { fill: var(--colore-grigio); fill-opacity: 0.8; }
.costr-lettera-r { fill: var(--colore-rosso); fill-opacity: 0.8; }
/* sezioni dei servizi */
.servizio-sezione { padding: var(--spazio-sezione) 0; scroll-margin-top: 84px; }
.servizio-sezione--chiara { background: var(--colore-fondo-chiaro); }
.servizio-sezione__griglia { display: grid; grid-template-columns: 5fr 7fr; gap: 48px clamp(48px, 6vw, 96px); align-items: start; }
.servizio-sezione__testo { margin-top: 24px; font-size: 1.125rem; color: var(--colore-grigio); }
.servizio-sezione__sottotitolo { margin-top: 36px; font-size: 0.8125rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--colore-grigio); }
.servizio-sezione__punti { margin: 16px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--colore-filetto); }
.servizio-sezione__punti li { position: relative; padding: 12px 0 12px 22px; border-bottom: 1px solid var(--colore-filetto); }
.servizio-sezione__punti li::before { content: ""; position: absolute; left: 0; top: calc(12px + 0.6em); width: 7px; height: 7px; background: var(--colore-rosso); }
/* esempi dai lavori */
.esempi { display: grid; grid-template-columns: 1fr; gap: 32px; min-width: 0; }
.esempio { margin: 0; }
.esempio__link { position: relative; display: block; text-decoration: none; }
.esempio__cornice { position: relative; display: block; overflow: hidden; isolation: isolate; aspect-ratio: 3 / 2; border-radius: var(--raggio-foto); background: var(--colore-fondo-chiaro); }
.esempio__cornice--bordo { border: 1px solid var(--colore-filetto); }
.esempio__foto { width: 100%; height: 100%; object-fit: cover; object-position: top center; transition: transform var(--durata) var(--curva); }
.esempio__foto--pensilina { object-position: 50% 54%; }
.servizio-sezione--chiara .esempio__cornice--sito { background: var(--colore-fondo); }
/* siti: la finestra del browser al centro del riquadro, sale un poco al passaggio */
.esempio__cornice--sito .browser { position: absolute; inset: 10% 9%; border-radius: 10px; box-shadow: 0 14px 40px rgba(43, 42, 43, 0.12); transition: transform var(--durata) var(--curva); }
.esempio__cornice--sito .browser__barra { height: 30px; }
.esempio__cornice--sito .browser__indirizzo { padding: 2px 12px; font-size: 0.75rem; }
.esempio__cornice--sito .browser__foto { height: calc(100% - 30px); object-fit: cover; object-position: top center; }
.esempio__link:hover .esempio__cornice--sito .browser { transform: translateY(-6px); }
.esempio__didascalia { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 16px; padding-top: 12px; }
.esempio__cliente { font-weight: 500; transition: color var(--durata) var(--curva); }
.esempio__cosa { color: var(--colore-grigio); }
.esempio__link:hover .esempio__foto { transform: scale(1.04); }
.esempio__link:hover .esempio__cliente { color: var(--colore-accento-testo); }
/* due strade per i siti */
.strade { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; margin-top: clamp(56px, 7vw, 96px); }
.strada { display: flex; flex-direction: column; align-items: flex-start; padding: 36px; border: 1px solid var(--colore-filetto); }
.strada--novita { border-color: var(--colore-rosso); border-width: 2px; }
.strada__etichetta { font-size: 0.8125rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--colore-accento-testo); }
.strada__titolo { margin-top: 10px; font-weight: 300; font-size: clamp(1.75rem, 2.6vw, 2.25rem); }
.strada__testo { margin-top: 14px; margin-bottom: 28px; color: var(--colore-grigio); }
.strada .pulsante, .strada .link-freccia { margin-top: auto; }
/* come lavoro */
.passi { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; margin: clamp(40px, 5vw, 64px) 0 0; padding: 0; list-style: none; }
.passo { padding-top: 20px; border-top: 1px solid rgba(255, 255, 255, 0.28); }
.passo__numero { font-weight: 300; font-size: 2rem; line-height: 1; color: var(--colore-su-grafite); }
.passo__titolo { margin-top: 14px; font-weight: 500; font-size: 1.25rem; }
.passo__testo { margin-top: 8px; color: var(--colore-su-grafite); }
/* scelte nel modulo */
.modulo__scelte { display: flex; flex-wrap: wrap; gap: 10px 24px; margin: 0; padding: 0; border: 0; }
.modulo__scelte legend { width: 100%; margin-bottom: 10px; padding: 0; }
.modulo__scelta { display: inline-flex; align-items: center; gap: 10px; min-height: 32px; color: var(--colore-grigio); }
.modulo__scelta input { width: 20px; height: 20px; margin: 0; accent-color: var(--colore-rosso); }
@media (max-width: 960px) {
.servizio-sezione__griglia { grid-template-columns: 1fr; }
.esempi { grid-template-columns: 1fr 1fr; }
.passi { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 700px) {
.esempi, .strade, .passi { grid-template-columns: 1fr; }
.strada { padding: 28px 24px; }
}
/* ==========================================================================
17. Scheda progetto, gallerie, cornice del browser, ingrandimento
========================================================================== */
.scheda-apertura { padding: clamp(56px, 7.7vw, 100px) 0 0; }
.scheda-apertura__indietro { text-decoration: none; }
.scheda-apertura__indietro:hover { color: var(--colore-accento-testo); }
.scheda-apertura__riga { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 24px 48px; }
.scheda-apertura__frase { margin-top: 18px; max-width: 30em; font-size: clamp(1.25rem, 2vw, 1.5rem); font-weight: 300; color: var(--colore-grigio); }
.scheda-apertura .scheda-apertura__immagine { margin: 30px 0 0; } /* 30 px dal sottotitolo */
.scheda-apertura .scheda-apertura__sito { margin-top: 30px; scroll-margin-top: 104px; } /* schede di solo sito: le schermate al posto dell'immagine */
.scheda-racconto { padding: clamp(64px, 8vw, 112px) 0; }
.scheda-racconto__griglia { display: grid; grid-template-columns: 4fr 7fr; gap: 48px clamp(48px, 7vw, 112px); align-items: start; }
.scheda-dati { margin: 0; border-top: 1px solid var(--colore-filetto); }
.scheda-dati > div { padding: 14px 0; border-bottom: 1px solid var(--colore-filetto); }
.scheda-dati dt { font-size: 0.8125rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--colore-grigio); }
.scheda-dati dd { margin: 4px 0 0; }
.scheda-testi { max-width: 40em; }
.scheda-testi__titolo { margin-top: 40px; font-weight: 500; font-size: 1.375rem; }
.scheda-testi__titolo:first-child { margin-top: 0; }
.scheda-testi p { margin-top: 12px; font-size: 1.125rem; color: var(--colore-grigio); }
.scheda-galleria { padding: 0 0 var(--spazio-sezione); }
.scheda-galleria__titolo { margin: clamp(56px, 7vw, 96px) 0 28px; padding-top: 20px; border-top: 1px solid var(--colore-filetto); font-weight: 300; font-size: clamp(1.75rem, 3vw, 2.5rem); }
.scheda-galleria__titolo:first-child { margin-top: 0; }
.scheda-galleria__titolo { scroll-margin-top: 104px; }
.scheda-galleria__titolo span { margin-right: 14px; font-size: 0.5em; vertical-align: middle; color: var(--colore-accento-testo); }
.galleria { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(20px, 3vw, 40px); }
.galleria__voce { margin: 0; min-width: 0; }
.galleria__voce--larga { grid-column: 1 / -1; }
.galleria__foto { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--raggio-foto); background: var(--colore-filetto); transition: transform var(--durata) var(--curva); }
.galleria__voce--larga .galleria__foto { aspect-ratio: 16 / 9; }
.galleria__voce--alto .galleria__foto { object-position: top center; }
.galleria__voce--pensilina .galleria__foto { object-position: 50% 54%; } /* la pensilina: si vede tutto il manifesto */
.galleria--verticale .galleria__foto { aspect-ratio: 4 / 5; } /* foto verticali (es. il cabinet di Clinica Mobile) */
.galleria__voce--intera .galleria__foto { aspect-ratio: 4 / 5; object-fit: contain; padding: 6%; background: var(--colore-fondo-chiaro); } /* un foglio intero (es. un poster), senza ritagli */
.galleria__voce--foglio .galleria__foto { object-fit: contain; padding: 4%; background: var(--colore-fondo-chiaro); } /* un foglio intero accanto a una foto 3:2 (es. il flyer di Farmacia Dante) */
.galleria__voce--naturale .galleria__foto, .galleria__voce--larga.galleria__voce--naturale .galleria__foto { aspect-ratio: auto; } /* senza ritagli: banner, pieghevoli aperti */
.galleria--tre { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: clamp(20px, 3vw, 40px); } /* tre fogli affiancati (es. copertine) */
.ingrandisci--centro .galleria__foto { object-position: 50% 45%; }
.scheda-apertura__immagine .galleria__foto { aspect-ratio: auto; }
.galleria__didascalia { margin-top: 12px; font-size: 0.9375rem; color: var(--colore-grigio); }
.ingrandisci { display: block; overflow: hidden; border-radius: var(--raggio-foto); cursor: zoom-in; }
.ingrandisci:hover .galleria__foto, .ingrandisci:hover .browser__foto { transform: scale(1.03); }
/* sito: computer e telefono */
.galleria--sito { grid-template-columns: minmax(0, 3fr) minmax(0, 1fr); align-items: stretch; }
/* computer e telefono finiscono alla stessa altezza (D74): il telefono prende l'altezza del computer
e la sua schermata si ritaglia dall'alto; sopra, una barra grigia come quella del browser */
.galleria--sito .galleria__voce { display: flex; flex-direction: column; }
.galleria--sito .ingrandisci { flex: 1; }
.scheda-galleria__riga { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 32px; margin: clamp(56px, 7vw, 96px) 0 28px; padding-top: 20px; border-top: 1px solid var(--colore-filetto); }
.scheda-galleria__riga .scheda-galleria__titolo { margin: 0; padding: 0; border: 0; }
/* il bordo sta sul contenitore, che non si ingrandisce: così resta visibile anche al passaggio */
.ingrandisci--telefono { border: 1px solid var(--colore-filetto); border-radius: 26px; }
/* immagini su fondo bianco: un filetto le stacca dalla pagina */
.ingrandisci--bordo { border: 1px solid var(--colore-filetto); }
.ingrandisci--telefono { position: relative; min-height: 0; background: var(--colore-fondo); }
.telefono__barra { position: absolute; top: 0; left: 0; right: 0; display: flex; align-items: center; justify-content: center; height: 38px; border-bottom: 1px solid var(--colore-filetto); background: var(--colore-fondo-chiaro); }
.telefono__barra::before { content: ""; width: 34%; height: 8px; border-radius: 999px; background: var(--colore-righello); } /* la fessura dell'altoparlante */
.ingrandisci--telefono .telefono__foto { position: absolute; top: 38px; left: 0; width: 100%; height: calc(100% - 38px); aspect-ratio: auto; border-radius: 0; object-fit: cover; object-position: top center; }
/* la cornice minima del browser (disegnata dalla pagina, non nell'immagine) */
.browser { display: block; overflow: hidden; border: 1px solid var(--colore-filetto); border-radius: var(--raggio-foto); background: var(--colore-fondo); }
.browser__barra { position: relative; display: flex; align-items: center; height: 38px; padding: 0 14px; border-bottom: 1px solid var(--colore-filetto); background: var(--colore-fondo-chiaro); }
.browser__pallini, .browser__pallini::before, .browser__pallini::after { display: block; width: 8px; height: 8px; border-radius: 50%; background: var(--colore-righello); }
.browser__pallini { position: relative; margin-left: 16px; }
.browser__pallini::before, .browser__pallini::after { content: ""; position: absolute; top: 0; }
.browser__pallini::before { left: -14px; }
.browser__pallini::after { left: 14px; }
.browser__indirizzo { position: absolute; left: 50%; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 8px; padding: 3px 14px; border: 1px solid var(--colore-filetto); border-radius: 999px; background: var(--colore-fondo); font-size: 0.8125rem; letter-spacing: 0.02em; color: var(--colore-grigio); }
.browser__indirizzo::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--colore-rosso); }
.browser__foto { display: block; width: 100%; height: auto; transition: transform var(--durata) var(--curva); }
/* progetto successivo */
.successivo { border-top: 1px solid var(--colore-filetto); border-bottom: 1px solid var(--colore-filetto); }
.successivo__link { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 32px; padding: clamp(40px, 6vw, 72px) 0; text-decoration: none; }
.successivo__etichetta { font-size: 0.8125rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--colore-grigio); }
.successivo__nome { font-weight: 300; font-size: clamp(2.25rem, 5vw, 4rem); transition: color var(--durata) var(--curva); }
.successivo__link:hover .successivo__nome { color: var(--colore-accento-testo); }
.invito--breve .invito__griglia { align-items: end; }
/* ritorno a tutti i lavori: fascia grigia, centrata */
.ritorno { background: var(--colore-fondo-chiaro); }
.ritorno__link { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: clamp(56px, 7vw, 88px) 0; text-align: center; text-decoration: none; }
.ritorno__etichetta { display: inline-flex; align-items: center; gap: 12px; font-size: 0.8125rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--colore-grigio); }
.ritorno__etichetta::before { content: ""; width: 8px; height: 8px; background: var(--colore-rosso); }
.ritorno__titolo { display: inline-flex; align-items: center; gap: 18px; font-weight: 300; font-size: clamp(1.75rem, 3vw, 2.5rem); transition: color var(--durata) var(--curva); }
.ritorno__cerchio { background: var(--colore-rosso); }
.ritorno__link:hover .ritorno__titolo { color: var(--colore-accento-testo); }
.ritorno__link:hover .pulsante__freccia, .ritorno__link:focus-visible .pulsante__freccia { transform: rotate(0deg); }
/* finestra dell'ingrandimento (creata dallo script con