/* =========================================================================
Blissful Consulting — Home page
Stylesheet unico. Nessuna dipendenza esterna.
Palette e type system derivati da:
- Blissful — Manuale d'uso v1, 6 Luglio 2026 (palette, type system web)
- Blissful — specs.pdf (font Adobe Typekit: argent-cf, greycliff-cf)
========================================================================= */
/* -------------------------------------------------------------------------
1. DESIGN TOKENS
------------------------------------------------------------------------- */
:root {
/* --- Colori primari (Manuale d'uso, p.26) --- */
--lino: #f5f0e8;
--ossidiana: #2b1c18;
--oro: #dfb662;
--perla: #e8dcc8;
/* --- Colori secondari (Manuale d'uso, p.27) --- */
--bosco-antico: #2e4a22;
--abisso-nascosto: #1a3f54;
--ambra-scura: #c4975a;
/* --- Grigio per gli stati inattivi (Manuale d'uso, p.28) --- */
--grigio: #e5e5e5;
/* --- Color system: declinazioni in opacità 75/50/25/10%.
L'oro resta l'eccezione: non si abbassa mai di opacità. --- */
--ossidiana-75: rgba(43, 28, 24, 0.75);
--ossidiana-50: rgba(43, 28, 24, 0.5);
--ossidiana-25: rgba(43, 28, 24, 0.25);
--ossidiana-10: rgba(43, 28, 24, 0.1);
--lino-75: rgba(245, 240, 232, 0.75);
--lino-50: rgba(245, 240, 232, 0.5);
--lino-25: rgba(245, 240, 232, 0.25);
/* --- Ruoli semantici --- */
--bg: var(--lino);
--bg-alt: var(--perla);
--testo: var(--ossidiana);
--testo-soft: var(--ossidiana-75);
--testo-muted: var(--ossidiana-50);
--hairline: var(--ossidiana-10);
/* --- Tipografia --- */
--f-serif: "argent-cf", "Iowan Old Style", "Palatino Linotype", Georgia,
"Times New Roman", serif;
--f-sans: "greycliff-cf", -apple-system, BlinkMacSystemFont, "Segoe UI",
"Helvetica Neue", Arial, sans-serif;
/* Scala tipografica fluida: interpola linearmente fra i valori
"Web - Mobile" (@480px) e "Web - Desktop" (@1440px) del Manuale d'uso. */
--t-h1: clamp(40px, 24px + 3.3333vw, 72px);
--t-h2: clamp(34px, 23.5px + 2.1875vw, 55px);
--t-h3: clamp(28px, 20.5px + 1.5625vw, 43px);
--t-h4: clamp(25px, 20.5px + 0.9375vw, 34px);
--t-h5: clamp(22px, 19.5px + 0.5208vw, 27px);
--t-h6: clamp(20px, 18px + 0.4167vw, 24px);
--t-body-lg: clamp(20px, 18px + 0.4167vw, 24px);
--t-body: 18px;
--t-small: clamp(15px, 14.5px + 0.1042vw, 16px);
--t-quote: clamp(30px, 21px + 1.875vw, 48px);
/* Micro-testo: occhielli, tagline, label dei bottoni. Non è nel Manuale:
derivato da Small Text scalando al 87,5% (14px @ desktop). */
--t-micro: clamp(12px, 11.5px + 0.1563vw, 14px);
/* --- Griglia e spaziature ---
Il mockup è stato disegnato su una tela di circa 1200px: a questa
larghezza la scala tipografica del Manuale d'uso combacia con le
proporzioni del layout (H1 72px sul titolo hero, H2 55px sui titoli
di sezione centrati, H3 43px sui titoli delle card). */
--container: 1200px;
--container-wide: 1240px;
--gutter: clamp(20px, 3vw, 40px);
--pad-lg: clamp(72px, 8vw, 120px);
--pad-md: clamp(64px, 7vw, 104px);
--pad-sm: clamp(56px, 6vw, 88px);
--gap-col: clamp(24px, 2.6vw, 38px);
--header-h: 88px;
/* --- Forme --- */
--r-card: 14px;
--r-card-lg: 18px;
--r-pill: 999px;
--r-btn: 6px;
/* --- Ombre --- */
--sh-card: 0 2px 10px rgba(43, 28, 24, 0.05);
--sh-card-hi: 0 10px 28px rgba(43, 28, 24, 0.1);
--sh-header: 0 1px 0 var(--hairline);
--sh-header-scroll: 0 4px 20px rgba(43, 28, 24, 0.08);
/* --- Motion --- */
--ease: cubic-bezier(0.33, 0.1, 0.25, 1);
--dur: 0.35s;
}
/* -------------------------------------------------------------------------
1b. TEMI PER ELEMENTO
Il selettore in alto a destra sceglie fra Terra, Acqua e Metallo e scrive
data-element su (vedi js/main.js). Tutto ciò che cambia fra le tre
versioni passa da qui: nessuna regola di layout è duplicata.
Cosa cambia Variabile
------------------- ------------------------------
pill del selettore --el-accent / --el-accent-strong
banner citazione --el-band
sfondo dell'hero --el-hero-img / --el-hero-veil
sfondo banner quiz --el-quiz-img / --el-quiz-veil
Le immagini sono dichiarate come background-image e non come ![]()
: così
il browser scarica solo quella dell'elemento attivo.
------------------------------------------------------------------------- */
/* --- Terra (default): corteccia e bosco antico --- */
:root {
--el-accent: var(--bosco-antico);
--el-accent-strong: #24391a;
--el-band: var(--bosco-antico);
--el-hero-img: url("../assets/img/hero-corteccia-poster.jpg");
--el-hero-veil: linear-gradient(
to bottom,
rgba(43, 28, 24, 0.5) 0%,
rgba(43, 28, 24, 0.3) 45%,
rgba(43, 28, 24, 0.55) 100%
);
--el-quiz-img: url("../assets/img/muschio-1920.jpg");
--el-quiz-veil: linear-gradient(
to bottom,
rgba(20, 26, 14, 0.52) 0%,
rgba(20, 26, 14, 0.34) 50%,
rgba(20, 26, 14, 0.58) 100%
);
}
/* --- Acqua: increspature e abisso nascosto ---
Le due foto d'acqua sono luminose: il velo è più fitto della versione
terra, altrimenti il testo bianco non tiene il contrasto. */
:root[data-element="acqua"] {
--el-accent: var(--abisso-nascosto);
--el-accent-strong: #12303f;
--el-band: var(--abisso-nascosto);
--el-hero-img: url("../assets/img/hero-acqua-1920.jpg");
--el-hero-veil: linear-gradient(
to bottom,
rgba(16, 38, 54, 0.62) 0%,
rgba(16, 38, 54, 0.46) 45%,
rgba(16, 38, 54, 0.66) 100%
);
--el-quiz-img: url("../assets/img/quiz-acqua-1920.jpg");
--el-quiz-veil: linear-gradient(
to bottom,
rgba(12, 32, 46, 0.58) 0%,
rgba(12, 32, 46, 0.42) 50%,
rgba(12, 32, 46, 0.62) 100%
);
}
/* --- Metallo: goccia d'oro e ossidiana ---
Qui le foto sono già molto scure: il velo si alleggerisce per non
spegnere i riflessi dorati. Il banner citazione resta bosco antico
come nel mockup: l'ossidiana finirebbe a contatto con la fascia
"Crescita in armonia", che è già ossidiana. */
:root[data-element="metallo"] {
--el-accent: var(--ossidiana);
--el-accent-strong: #1c110e;
--el-band: var(--bosco-antico);
--el-hero-img: url("../assets/img/hero-metallo-1920.jpg");
--el-hero-veil: linear-gradient(
to bottom,
rgba(43, 28, 24, 0.42) 0%,
rgba(43, 28, 24, 0.24) 45%,
rgba(43, 28, 24, 0.5) 100%
);
--el-quiz-img: url("../assets/img/quiz-metallo-1920.jpg");
--el-quiz-veil: linear-gradient(
to bottom,
rgba(26, 17, 12, 0.45) 0%,
rgba(26, 17, 12, 0.28) 50%,
rgba(26, 17, 12, 0.52) 100%
);
}
/* --- Varianti leggere per viewport piccoli (metà del peso) ---
Deve restare dopo i blocchi qui sopra: stessa specificità, vince l'ordine.
Terra tiene il poster della corteccia, che il video scarica comunque. */
@media (max-width: 1080px) {
:root {
--el-quiz-img: url("../assets/img/muschio-1024.jpg");
}
:root[data-element="acqua"] {
--el-hero-img: url("../assets/img/hero-acqua-1024.jpg");
--el-quiz-img: url("../assets/img/quiz-acqua-1024.jpg");
}
:root[data-element="metallo"] {
--el-hero-img: url("../assets/img/hero-metallo-1024.jpg");
--el-quiz-img: url("../assets/img/quiz-metallo-1024.jpg");
}
}
/* -------------------------------------------------------------------------
2. RESET E BASI
------------------------------------------------------------------------- */
*,
*::before,
*::after {
box-sizing: border-box;
}
html {
-webkit-text-size-adjust: 100%;
scroll-behavior: smooth;
scroll-padding-top: calc(var(--header-h) + 16px);
}
body {
margin: 0;
background: var(--bg);
color: var(--testo);
font-family: var(--f-sans);
font-size: var(--t-body);
font-weight: 500;
line-height: 1.5;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
overflow-x: hidden;
}
body.is-locked {
overflow: hidden;
}
img,
svg,
video {
display: block;
max-width: 100%;
}
img {
height: auto;
}
a {
color: inherit;
text-decoration: none;
}
button {
font: inherit;
color: inherit;
background: none;
border: 0;
cursor: pointer;
}
ul {
margin: 0;
padding: 0;
list-style: none;
}
h1,
h2,
h3,
h4,
h5,
h6,
p,
figure,
figcaption,
blockquote {
margin: 0;
text-wrap: pretty;
}
/* Focus visibile e coerente su tutto il sito */
:focus-visible {
outline: 2px solid var(--oro);
outline-offset: 3px;
border-radius: 2px;
}
/* -------------------------------------------------------------------------
3. TIPOGRAFIA — gerarchia del Manuale d'uso
------------------------------------------------------------------------- */
.h1,
.h2,
.h3,
.h4,
.h5 {
font-family: var(--f-serif);
letter-spacing: -0.005em;
text-wrap: pretty;
}
/* Il bilanciamento delle righe serve sui titoli centrati; su quelli
allineati a sinistra restringerebbe la colonna senza motivo. */
.section__head .h2,
.hero__title,
.manifesto__title,
.cta-banner__title,
.quote {
text-wrap: balance;
}
.h1 {
font-size: var(--t-h1);
font-weight: 300;
line-height: 1.05;
}
.h2 {
font-size: var(--t-h2);
font-weight: 400;
line-height: 1.1;
}
.h3 {
font-size: var(--t-h3);
font-weight: 400;
line-height: 1.1;
}
.h4 {
font-size: var(--t-h4);
font-weight: 400;
line-height: 1.22;
}
.h5 {
font-size: var(--t-h5);
font-weight: 600;
line-height: 1.22;
}
.h6 {
font-family: var(--f-sans);
font-size: var(--t-h6);
font-weight: 600;
line-height: 1.22;
}
.body-lg {
font-size: var(--t-body-lg);
font-weight: 500;
line-height: 1.35;
}
.body {
font-size: var(--t-body);
font-weight: 500;
line-height: 1.5;
}
.small {
font-size: var(--t-small);
font-weight: 600;
line-height: 1.5;
}
/* Accento oro corsivo: il pattern ricorrente di tutta la home page.
Su dentro i titoli serif. */
.h1 em,
.h2 em,
.h3 em,
.quote em {
font-style: italic;
font-weight: inherit;
color: var(--oro);
}
/* Corsivo neutro (stesso colore del titolo) */
.h1 i,
.h2 i,
.h3 i {
font-style: italic;
}
/* Occhiello / tagline sopra i titoli */
.eyebrow {
font-family: var(--f-sans);
font-size: var(--t-micro);
font-weight: 600;
line-height: 1.4;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--testo-muted);
}
/* -------------------------------------------------------------------------
4. LAYOUT
------------------------------------------------------------------------- */
.container {
width: 100%;
max-width: var(--container);
margin-inline: auto;
padding-inline: var(--gutter);
}
.container--wide {
max-width: var(--container-wide);
}
.section {
position: relative;
padding-block: var(--pad-md);
}
.section--lino {
background: var(--lino);
}
.section--perla {
background: var(--perla);
}
.section--bosco {
background: var(--bosco-antico);
color: var(--lino);
}
.section--ossidiana {
background: var(--ossidiana);
color: var(--lino);
}
.section__head {
max-width: 780px;
margin-inline: auto;
margin-bottom: clamp(40px, 4.4vw, 64px);
text-align: center;
}
.section__head .eyebrow {
display: block;
margin-bottom: 18px;
}
.skip-link {
position: absolute;
top: -100px;
left: var(--gutter);
z-index: 200;
padding: 12px 20px;
background: var(--ossidiana);
color: var(--lino);
font-size: var(--t-micro);
font-weight: 600;
letter-spacing: 0.1em;
text-transform: uppercase;
border-radius: var(--r-btn);
transition: top 0.2s var(--ease);
}
.skip-link:focus {
top: 12px;
}
/* -------------------------------------------------------------------------
5. BOTTONI, PILL, MARKER
------------------------------------------------------------------------- */
.btn {
display: inline-flex;
align-items: center;
gap: 12px;
padding: 14px 26px;
font-family: var(--f-sans);
font-size: var(--t-micro);
font-weight: 600;
line-height: 1;
letter-spacing: 0.1em;
text-transform: uppercase;
white-space: nowrap;
border-radius: var(--r-btn);
transition: background-color var(--dur) var(--ease),
color var(--dur) var(--ease), transform var(--dur) var(--ease),
box-shadow var(--dur) var(--ease);
}
.btn__icon {
flex: none;
width: 18px;
height: 18px;
fill: currentColor;
transition: transform var(--dur) var(--ease);
}
.btn:hover .btn__icon {
transform: translateX(3px);
}
/* Primario: oro su testo ossidiana */
.btn--gold {
background: var(--oro);
color: var(--ossidiana);
}
.btn--gold:hover {
background: var(--ambra-scura);
box-shadow: 0 6px 18px rgba(43, 28, 24, 0.18);
transform: translateY(-1px);
}
/* Secondario: contorno oro su fondo scuro */
.btn--outline {
border: 1.5px solid var(--oro);
color: var(--oro);
}
.btn--outline:hover {
background: var(--oro);
color: var(--ossidiana);
}
/* Stato inattivo (grigio da Manuale d'uso p.28) */
.btn:disabled,
.btn[aria-disabled="true"] {
background: var(--grigio);
color: var(--ossidiana-25);
border-color: transparent;
cursor: not-allowed;
transform: none;
box-shadow: none;
}
/* Pill "occhiello" con contorno, usata sopra gli H1 dei banner */
.pill {
display: inline-block;
padding: 7px 18px;
font-family: var(--f-sans);
font-size: var(--t-micro);
font-weight: 600;
line-height: 1.3;
letter-spacing: 0.14em;
text-transform: uppercase;
border: 1px solid currentColor;
border-radius: var(--r-pill);
}
.pill--light {
color: var(--lino);
}
.pill--gold {
color: var(--oro);
}
/* Marker geometrici delle card "differenziazione" */
.marker {
flex: none;
width: 13px;
height: 13px;
margin-top: 0.42em;
background: var(--oro);
}
.marker--circle {
border-radius: 50%;
}
.marker--diamond {
border-radius: 1px;
transform: rotate(45deg) scale(0.88);
}
.marker--triangle {
width: 0;
height: 0;
background: none;
border-inline: 7px solid transparent;
border-bottom: 12px solid var(--oro);
}
/* Icona elemento in cerchio (le 3 dimensioni, avatar testimonianze) */
.el-icon {
width: 100%;
height: 100%;
}
/* -------------------------------------------------------------------------
6. HEADER
------------------------------------------------------------------------- */
.header {
position: sticky;
top: 0;
z-index: 100;
background: var(--lino);
box-shadow: var(--sh-header);
transition: box-shadow var(--dur) var(--ease);
}
.header.is-scrolled {
box-shadow: var(--sh-header-scroll);
}
.header__inner {
display: flex;
align-items: center;
gap: clamp(16px, 2vw, 32px);
min-height: var(--header-h);
}
.header__logo {
flex: none;
margin-right: auto;
}
.header__logo img {
width: auto;
height: 40px;
}
.nav {
display: flex;
align-items: center;
gap: clamp(18px, 2.2vw, 38px);
}
.nav__link {
position: relative;
padding-block: 4px;
font-size: var(--t-micro);
font-weight: 600;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--testo);
transition: color var(--dur) var(--ease);
}
.nav__link::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 1px;
background: currentColor;
transform: scaleX(0);
transform-origin: left;
transition: transform var(--dur) var(--ease);
}
.nav__link:hover,
.nav__link[aria-current="page"] {
color: var(--ambra-scura);
}
.nav__link:hover::after,
.nav__link[aria-current="page"]::after {
transform: scaleX(1);
}
.header__actions {
display: flex;
align-items: center;
gap: clamp(12px, 1.4vw, 22px);
}
/* --- Selettore elemento (pill in alto a destra) ---------------------------
Apre il menu con i tre elementi (Terra, Acqua, Metallo) e imposta
data-element su : il tema è tutto nella sezione 1b.
Punto d'aggancio JS: window.Blissful.setElement(nome). */
.el-switch {
position: relative;
flex: none;
}
.el-switch__toggle {
display: inline-flex;
align-items: center;
gap: 9px;
padding: 9px 15px;
background: var(--el-accent);
color: var(--lino);
font-size: var(--t-micro);
font-weight: 600;
line-height: 1;
letter-spacing: 0.1em;
text-transform: uppercase;
border-radius: var(--r-btn);
transition: background-color var(--dur) var(--ease);
}
.el-switch__toggle:hover,
.el-switch__toggle[aria-expanded="true"] {
background: var(--el-accent-strong);
}
.el-switch__toggle img {
width: 21px;
height: 21px;
}
.el-switch__menu {
position: absolute;
top: calc(100% + 10px);
right: 0;
min-width: 190px;
padding: 8px;
background: var(--lino);
border: 1px solid var(--hairline);
border-radius: 10px;
box-shadow: var(--sh-card-hi);
opacity: 0;
visibility: hidden;
transform: translateY(-6px);
transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease),
visibility var(--dur) var(--ease);
}
.el-switch.is-open .el-switch__menu {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.el-switch__option {
display: flex;
align-items: center;
gap: 12px;
width: 100%;
padding: 9px 12px;
font-size: var(--t-small);
font-weight: 600;
text-align: left;
border-radius: 6px;
transition: background-color 0.2s var(--ease);
}
.el-switch__option img {
width: 24px;
height: 24px;
}
.el-switch__option:hover {
background: var(--perla);
}
.el-switch__option[aria-checked="true"] {
background: var(--perla);
color: var(--ambra-scura);
}
/* --- Hamburger --- */
.burger {
display: none;
flex: none;
width: 44px;
height: 44px;
padding: 11px 10px;
}
.burger span {
display: block;
height: 1.5px;
background: var(--ossidiana);
border-radius: 2px;
transition: transform var(--dur) var(--ease),
opacity var(--dur) var(--ease);
}
.burger span + span {
margin-top: 6px;
}
.burger[aria-expanded="true"] span:nth-child(1) {
transform: translateY(7.5px) rotate(45deg);
}
.burger[aria-expanded="true"] span:nth-child(2) {
opacity: 0;
}
.burger[aria-expanded="true"] span:nth-child(3) {
transform: translateY(-7.5px) rotate(-45deg);
}
/* -------------------------------------------------------------------------
7. HERO
------------------------------------------------------------------------- */
.hero {
position: relative;
display: grid;
place-items: center;
min-height: clamp(520px, 46vw, 700px);
padding-block: clamp(72px, 8vw, 110px);
overflow: hidden;
background: var(--ossidiana);
color: var(--lino);
text-align: center;
}
.hero__media,
.hero__media video,
.hero__media img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.hero__media {
z-index: 0;
background-image: var(--el-hero-img);
background-position: center;
background-size: cover;
}
/* Il video della corteccia appartiene a Terra. Sulle altre due versioni
resta la sola foto di sfondo. */
:root:not([data-element="terra"]) .hero__media video,
:root:not([data-element="terra"]) .hero__media > img {
display: none;
}
/* Velo per garantire il contrasto del testo sull'immagine */
.hero__media::after {
content: "";
position: absolute;
inset: 0;
background: var(--el-hero-veil);
}
.hero__inner {
position: relative;
z-index: 1;
max-width: 1060px;
margin-inline: auto;
}
.hero .pill {
margin-bottom: clamp(20px, 2.2vw, 30px);
}
.hero__title {
margin-bottom: clamp(20px, 2.2vw, 28px);
text-shadow: 0 2px 24px rgba(43, 28, 24, 0.45);
}
.hero__sub {
max-width: 640px;
margin-inline: auto;
margin-bottom: clamp(28px, 3vw, 40px);
color: var(--lino-75);
text-shadow: 0 1px 14px rgba(43, 28, 24, 0.5);
}
/* -------------------------------------------------------------------------
8. SEZIONE DIFFERENZIAZIONE
------------------------------------------------------------------------- */
.diff {
display: grid;
grid-template-columns: 1fr 1fr;
gap: clamp(32px, 4vw, 60px);
align-items: start;
}
.diff__title {
margin-bottom: clamp(20px, 2.2vw, 30px);
}
.diff__text {
max-width: 30em;
color: var(--testo-soft);
text-align: justify;
}
.diff__cards {
display: grid;
gap: clamp(14px, 1.6vw, 22px);
}
.card-diff {
padding: clamp(20px, 2.2vw, 30px) clamp(22px, 2.4vw, 32px);
background: var(--perla);
border-radius: var(--r-card);
transition: transform var(--dur) var(--ease),
box-shadow var(--dur) var(--ease);
}
.card-diff:hover {
transform: translateY(-2px);
box-shadow: var(--sh-card-hi);
}
.card-diff__head {
display: flex;
align-items: flex-start;
gap: 13px;
margin-bottom: 12px;
}
.card-diff__title {
font-size: clamp(21px, 18px + 0.75vw, 30px);
font-family: var(--f-serif);
font-weight: 400;
line-height: 1.15;
}
.card-diff__text {
font-size: var(--t-small);
font-weight: 500;
line-height: 1.55;
color: var(--testo-soft);
}
/* -------------------------------------------------------------------------
9. BANNER CITAZIONE (fondo bosco)
------------------------------------------------------------------------- */
/* Il fondo segue l'elemento scelto: bosco antico su Terra e Metallo,
abisso nascosto su Acqua (sezione 1b). */
.quote-banner {
padding-block: var(--pad-sm);
background: var(--el-band);
color: var(--lino);
text-align: center;
transition: background-color var(--dur) var(--ease);
}
.quote {
max-width: 19em;
margin-inline: auto;
font-family: var(--f-serif);
font-size: var(--t-quote);
font-weight: 600;
font-style: italic;
line-height: 1.35;
text-wrap: balance;
}
/* -------------------------------------------------------------------------
10. SEZIONE METODO (le 3 fasi)
------------------------------------------------------------------------- */
.phases {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--gap-col);
}
.card-phase {
display: flex;
flex-direction: column;
padding: clamp(22px, 2.4vw, 32px);
background: var(--lino);
border: 1px solid var(--oro);
border-radius: var(--r-card-lg);
box-shadow: var(--sh-card);
transition: transform var(--dur) var(--ease),
box-shadow var(--dur) var(--ease);
}
.card-phase:hover {
transform: translateY(-3px);
box-shadow: var(--sh-card-hi);
}
.card-phase__meta {
display: flex;
align-items: baseline;
gap: 14px;
margin-bottom: clamp(14px, 1.6vw, 22px);
font-size: var(--t-micro);
letter-spacing: 0.04em;
}
.card-phase__num {
font-weight: 500;
color: var(--testo-muted);
}
.card-phase__label {
font-weight: 700;
color: var(--testo);
}
.card-phase__title {
margin-bottom: clamp(12px, 1.4vw, 18px);
font-family: var(--f-serif);
font-size: clamp(26px, 20.5px + 1.5625vw, 43px);
font-weight: 400;
line-height: 1.12;
}
.card-phase__text {
font-size: var(--t-small);
font-weight: 500;
line-height: 1.6;
color: var(--testo-soft);
text-align: justify;
}
/* -------------------------------------------------------------------------
11. SEZIONE LE 3 DIMENSIONI
------------------------------------------------------------------------- */
.dims {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: clamp(28px, 3.4vw, 50px);
}
.dim__icon {
width: clamp(52px, 5vw, 72px);
height: clamp(52px, 5vw, 72px);
margin-bottom: clamp(18px, 2vw, 26px);
}
.dim__title {
margin-bottom: clamp(12px, 1.4vw, 18px);
font-family: var(--f-serif);
font-size: var(--t-h4);
font-weight: 400;
line-height: 1.15;
}
.dim__text {
font-size: var(--t-small);
font-weight: 500;
line-height: 1.6;
color: var(--testo-soft);
text-align: justify;
}
/* -------------------------------------------------------------------------
12. BANNER MANIFESTO (fondo ossidiana)
------------------------------------------------------------------------- */
.manifesto {
padding-block: var(--pad-sm);
text-align: center;
}
.manifesto__mark {
width: clamp(56px, 6.2vw, 88px);
height: auto;
margin: 0 auto clamp(24px, 2.6vw, 36px);
}
.manifesto__title {
max-width: 17em;
margin-inline: auto;
}
/* -------------------------------------------------------------------------
13. SEZIONE FONDATRICI
------------------------------------------------------------------------- */
.founders {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: clamp(18px, 2vw, 28px);
}
.card-founder {
padding: clamp(24px, 2.6vw, 36px) clamp(24px, 2.8vw, 38px);
background: var(--perla);
border-radius: var(--r-card-lg);
box-shadow: var(--sh-card);
transition: transform var(--dur) var(--ease),
box-shadow var(--dur) var(--ease);
}
.card-founder:hover {
transform: translateY(-2px);
box-shadow: var(--sh-card-hi);
}
.card-founder__name {
margin-bottom: 6px;
font-family: var(--f-serif);
font-size: clamp(28px, 20.5px + 1.5625vw, 43px);
font-weight: 400;
line-height: 1.05;
}
.card-founder__role {
margin-bottom: clamp(14px, 1.6vw, 20px);
font-size: clamp(16px, 14.5px + 0.3125vw, 19px);
font-weight: 500;
font-style: italic;
color: var(--ambra-scura);
}
.card-founder__bio {
font-size: var(--t-small);
font-weight: 500;
line-height: 1.6;
color: var(--testo-soft);
}
/* -------------------------------------------------------------------------
14. TESTIMONIANZE (carosello)
------------------------------------------------------------------------- */
.testimonials {
overflow: hidden;
background-color: var(--perla);
background-image: url("../assets/img/bg-icona-terra.png");
background-position: center;
background-size: auto 125%;
background-repeat: no-repeat;
}
.testimonials .section__head {
margin-bottom: clamp(28px, 3vw, 40px);
}
.carousel {
max-width: 690px;
margin-inline: auto;
}
.carousel__viewport {
overflow: hidden;
border-radius: var(--r-card-lg);
}
.carousel__track {
display: flex;
transition: transform 0.55s var(--ease);
}
.carousel__slide {
flex: 0 0 100%;
min-width: 0;
}
.card-quote {
padding: clamp(24px, 2.8vw, 38px) clamp(24px, 3vw, 42px);
background: var(--lino);
border-radius: var(--r-card-lg);
box-shadow: var(--sh-card);
}
.card-quote__head {
display: flex;
align-items: center;
gap: 14px;
margin-bottom: clamp(16px, 1.8vw, 24px);
}
.card-quote__avatar {
flex: none;
width: 42px;
height: 42px;
}
.card-quote__ident {
margin-right: auto;
}
.card-quote__name {
font-family: var(--f-serif);
font-size: clamp(19px, 16.5px + 0.5208vw, 24px);
font-weight: 700;
font-style: italic;
line-height: 1.2;
}
.card-quote__role {
font-size: var(--t-micro);
font-weight: 500;
color: var(--testo-muted);
}
.card-quote__glyph {
flex: none;
font-family: var(--f-serif);
font-size: 46px;
font-weight: 700;
line-height: 0.6;
color: var(--oro);
user-select: none;
}
.card-quote__text {
font-size: var(--t-small);
font-weight: 500;
line-height: 1.65;
color: var(--testo-soft);
}
.carousel__controls {
display: flex;
align-items: center;
justify-content: center;
gap: 20px;
margin-top: clamp(22px, 2.4vw, 32px);
}
.carousel__arrow {
display: grid;
place-items: center;
width: 44px;
height: 44px;
border-radius: 50%;
transition: background-color var(--dur) var(--ease);
}
.carousel__arrow img {
width: 26px;
height: 26px;
}
.carousel__arrow--prev img {
transform: scaleX(-1);
}
.carousel__arrow:hover {
background: rgba(43, 28, 24, 0.06);
}
.carousel__dots {
display: flex;
align-items: center;
gap: 9px;
}
.carousel__dot {
width: 8px;
height: 8px;
padding: 0;
background: var(--ossidiana-25);
border-radius: 50%;
transition: background-color var(--dur) var(--ease),
transform var(--dur) var(--ease);
}
.carousel__dot[aria-selected="true"] {
background: var(--oro);
transform: scale(1.4);
}
/* -------------------------------------------------------------------------
15. BANNER QUIZ
------------------------------------------------------------------------- */
.cta-banner {
position: relative;
display: grid;
place-items: center;
min-height: clamp(440px, 40vw, 620px);
padding-block: var(--pad-lg);
overflow: hidden;
background: var(--el-band);
color: var(--lino);
text-align: center;
}
.cta-banner__media {
position: absolute;
inset: 0;
z-index: 0;
background-image: var(--el-quiz-img);
background-position: center;
background-size: cover;
}
.cta-banner__media::after {
content: "";
position: absolute;
inset: 0;
background: var(--el-quiz-veil);
}
.cta-banner__inner {
position: relative;
z-index: 1;
max-width: 760px;
margin-inline: auto;
}
.cta-banner .pill {
margin-bottom: clamp(18px, 2vw, 26px);
}
.cta-banner__title {
margin-bottom: clamp(18px, 2vw, 26px);
text-shadow: 0 2px 22px rgba(20, 26, 14, 0.45);
}
.cta-banner__sub {
max-width: 620px;
margin-inline: auto;
margin-bottom: clamp(26px, 2.8vw, 38px);
color: var(--lino-75);
text-shadow: 0 1px 14px rgba(20, 26, 14, 0.5);
}
/* -------------------------------------------------------------------------
16. FOOTER
------------------------------------------------------------------------- */
.footer {
padding-top: clamp(48px, 5vw, 72px);
padding-bottom: clamp(28px, 3vw, 40px);
background: var(--lino);
}
.footer__grid {
display: grid;
grid-template-columns: minmax(280px, 3.2fr) repeat(3, minmax(112px, 1fr));
gap: clamp(32px, 4vw, 56px);
}
.footer__logo img {
width: auto;
height: 40px;
}
.footer__tagline {
max-width: 24em;
margin-top: clamp(20px, 2.2vw, 30px);
font-size: var(--t-small);
font-weight: 500;
line-height: 1.55;
color: var(--testo-soft);
}
.socials {
display: flex;
gap: 14px;
margin-top: clamp(22px, 2.4vw, 32px);
}
.socials a {
display: grid;
place-items: center;
width: 34px;
height: 34px;
margin-left: -7px;
color: var(--testo-muted);
border-radius: 6px;
transition: color var(--dur) var(--ease),
background-color var(--dur) var(--ease);
}
.socials a:hover {
color: var(--ossidiana);
background: var(--ossidiana-10);
}
.socials svg {
width: 19px;
height: 19px;
fill: currentColor;
}
/* Instagram e LinkedIn come icone lineari, coerenti col sistema di icone
Blissful (tratto, non massa). X resta il glifo pieno del marchio. */
.socials .socials__stroke {
fill: none;
stroke: currentColor;
stroke-width: 1.7;
stroke-linecap: round;
stroke-linejoin: round;
}
.socials .socials__stroke .socials__dot {
fill: currentColor;
stroke: none;
}
.footer__col h2 {
margin-bottom: clamp(14px, 1.6vw, 22px);
font-family: var(--f-sans);
font-size: var(--t-small);
font-weight: 700;
color: var(--testo);
}
.footer__col li + li {
margin-top: 11px;
}
.footer__col a {
font-size: var(--t-small);
font-weight: 500;
color: var(--testo-muted);
transition: color var(--dur) var(--ease);
}
.footer__col a:hover {
color: var(--ambra-scura);
}
.footer__legal {
margin-top: clamp(36px, 4vw, 56px);
padding-top: 18px;
border-top: 1px solid var(--hairline);
font-size: var(--t-micro);
font-weight: 500;
color: var(--ossidiana-25);
}
/* -------------------------------------------------------------------------
17. REVEAL ON SCROLL
------------------------------------------------------------------------- */
.reveal {
opacity: 0;
transform: translateY(22px);
transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}
.reveal.is-visible {
opacity: 1;
transform: none;
}
/* Ritardi a cascata per gli elementi in griglia */
.reveal[data-delay="1"] {
transition-delay: 0.08s;
}
.reveal[data-delay="2"] {
transition-delay: 0.16s;
}
.reveal[data-delay="3"] {
transition-delay: 0.24s;
}
/* Se il JS non gira, il contenuto resta visibile */
.no-js .reveal {
opacity: 1;
transform: none;
}
/* -------------------------------------------------------------------------
18. RESPONSIVE
------------------------------------------------------------------------- */
/* --- Tablet orizzontale: nav a tendina --------------------------------- */
@media (max-width: 1080px) {
.header__inner {
gap: 14px;
}
.burger {
display: block;
order: 3;
}
.header__actions {
order: 2;
}
.nav {
position: fixed;
inset: var(--header-h) 0 auto;
flex-direction: column;
align-items: stretch;
gap: 0;
max-height: calc(100dvh - var(--header-h));
padding: 8px var(--gutter) 28px;
overflow-y: auto;
background: var(--lino);
border-top: 1px solid var(--hairline);
box-shadow: var(--sh-header-scroll);
opacity: 0;
visibility: hidden;
transform: translateY(-10px);
transition: opacity var(--dur) var(--ease),
transform var(--dur) var(--ease), visibility var(--dur) var(--ease);
}
.nav.is-open {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.nav__link {
padding-block: 17px;
font-size: var(--t-small);
border-bottom: 1px solid var(--hairline);
}
.nav__link::after {
display: none;
}
}
/* --- Tablet verticale -------------------------------------------------- */
@media (max-width: 900px) {
.diff {
grid-template-columns: 1fr;
gap: clamp(28px, 4vw, 40px);
}
.diff__text {
max-width: none;
}
.phases,
.dims {
grid-template-columns: 1fr 1fr;
}
.phases > :last-child,
.dims > :last-child {
grid-column: 1 / -1;
}
.footer__grid {
grid-template-columns: 1fr 1fr;
}
.footer__brand {
grid-column: 1 / -1;
}
}
/* --- Mobile ------------------------------------------------------------ */
@media (max-width: 640px) {
:root {
--header-h: 74px;
}
.header__logo img,
.footer__logo img {
height: 34px;
}
/* Su mobile la pill elemento resta, il CTA del menu si sposta nel nav */
.header__actions .btn {
display: none;
}
.nav__cta {
display: flex;
justify-content: center;
margin-top: 22px;
}
.nav__cta .btn {
width: 100%;
justify-content: center;
}
.phases,
.dims,
.founders {
grid-template-columns: 1fr;
}
.phases > :last-child,
.dims > :last-child {
grid-column: auto;
}
/* Il testo giustificato su colonne strette crea "fiumi" di spazio */
.diff__text,
.card-phase__text,
.dim__text {
text-align: left;
}
.card-quote__glyph {
font-size: 36px;
}
.carousel__controls {
gap: 14px;
}
.footer__grid {
grid-template-columns: 1fr;
gap: 32px;
}
.footer__brand {
grid-column: auto;
}
}
@media (min-width: 641px) {
.nav__cta {
display: none;
}
}
/* -------------------------------------------------------------------------
19. PREFERENZE UTENTE E STAMPA
------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
html {
scroll-behavior: auto;
}
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
.reveal {
opacity: 1;
transform: none;
}
}
@media print {
.header,
.carousel__controls,
.el-switch,
.burger,
.skip-link {
display: none !important;
}
.hero__media,
.cta-banner__media {
display: none;
}
.hero,
.cta-banner,
.quote-banner,
.section--bosco,
.section--ossidiana {
background: #fff !important;
color: #000 !important;
}
.reveal {
opacity: 1 !important;
transform: none !important;
}
}