Presot
c
position: relative;
width: 100%;
min-height: 60vh;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
background-size: cover;
background-position: center;
color: #fff;
}
.ip-hero::after {
content: "";
position: absolute;
inset: 0;
background: rgba(0,0,0,0.35);
}
.ip-hero-content {
position: relative;
z-index: 1;
padding: 2rem;
max-width: 700px;
}
.ip-hero h1 {
font-size: clamp(2rem, 5vw, 3.5rem);
font-weight: 600;
margin: 0 0 1rem;
letter-spacing: 0.5px;
}
.ip-hero p {
font-size: clamp(1rem, 2vw, 1.25rem);
margin: 0;
opacity: 0.95;
}
/* SECTIONS */
.ip-section {
max-width: var(--max);
margin: 0 auto;
padding: 4rem 1.5rem;
}
.ip-row {
display: flex;
align-items: center;
gap: 3rem;
margin-bottom: 4rem;
}
.ip-row:last-child { margin-bottom: 0; }
.ip-row.reverse { flex-direction: row-reverse; }
.ip-row > div { flex: 1; }
.ip-row img {
width: 100%;
height: auto;
border-radius: 4px;
display: block;
}
.ip-row h2 {
font-size: clamp(1.5rem, 3vw, 2rem);
font-weight: 600;
margin: 0 0 1rem;
}
.ip-row p {
color: var(--muted);
margin: 0 0 1rem;
}
/* FULL-WIDTH TEXT BLOCK */
.ip-band {
background: #f5f3ef;
text-align: center;
padding: 4rem 1.5rem;
}
.ip-band-inner {
max-width: 720px;
margin: 0 auto;
}
.ip-band h2 {
font-size: clamp(1.5rem, 3vw, 2rem);
margin: 0 0 1rem;
}
.ip-band p {
color: var(--muted);
font-size: 1.1rem;
margin: 0;
}
/* RESPONSIVE */
@media (max-width: 768px) {
.ip-row, .ip-row.reverse {
flex-direction: column;
gap: 1.5rem;
margin-bottom: 3rem;
}
.ip-section { padding: 3rem 1.25rem; }
}
Titolo principale
Sottotitolo o frase introduttiva che riassume il contenuto della pagina.
Primo paragrafo
Inserisci qui il testo descrittivo. Puoi parlare della storia, dei valori o del concetto che vuoi comunicare.
Aggiungi un secondo capoverso se serve più dettaglio.
Secondo paragrafo
Testo della seconda sezione. L'immagine appare sul lato opposto per creare ritmo visivo.
Frase di chiusura o claim
Un messaggio finale che chiude la pagina, su sfondo colorato per dare risalto.