Nota: .estia-page-start resta neutra solo per compatibilità. Non aggiunge spazio. Non usarla sulle nuove pagine. */ .estia-page-body { padding: 0 var(--estia-page-body-pad-x) var(--estia-page-body-pad-bottom); } .estia-page-wrap { padding: var(--estia-space-page-top-title) var(--estia-page-wrap-pad-x) var(--estia-page-wrap-pad-bottom); } /* Compatibilità con HTML già modificati: non aggiunge spazio extra */ .estia-page-start { padding-top: 0; } /* ========================================================= TITOLO PRINCIPALE PAGINA ========================================================= */ .hero-label { font-family: var(--estia-font-title); font-size: var(--estia-fs-hero); font-weight: var(--estia-fw-bold); line-height: var(--estia-lh-title); margin-top: 0; margin-bottom: var(--estia-space-title-divider); } /* ========================================================= DIVIDER SOTTO TITOLO ========================================================= */ .hero-divider { display: block; margin-top: 0; margin-bottom: var(--estia-space-divider-description); } /* ========================================================= DESCRIZIONE / TESTO INTRODUTTIVO ========================================================= */ .descrizione, .lead-desc { font-family: var(--estia-font-ui); font-size: var(--estia-fs-description); font-weight: var(--estia-fw-regular); line-height: var(--estia-lh-text); margin-top: 0; margin-bottom: var(--estia-space-description-content); } /* ========================================================= CONTENUTO VISIVO PRINCIPALE STANDARD Da usare SOLO per elementi visivi singoli: immagine, video, canvas, palla, libro/stage. ========================================================= */ .estia-main-content { display: flex; align-items: center; justify-content: center; margin-top: 0; margin-bottom: var(--estia-space-content-button); line-height: 0; } .estia-main-content img, .estia-main-content canvas, .estia-main-content video { display: block; } /* ========================================================= BLOCCO COMPLESSO STANDARD Da usare per box/card/griglie con titolo + contenuto interno. Non cambia display, flex, grid o layout interno. ========================================================= */ .estia-content-block { margin-top: 0; margin-bottom: var(--estia-space-content-button); } /* ========================================================= TITOLI SEZIONE ========================================================= */ .section-title { font-family: var(--estia-font-ui); font-size: var(--estia-fs-section-title); font-weight: var(--estia-fw-bold); line-height: var(--estia-lh-section-title); margin-top: var(--estia-space-section); margin-bottom: 12px; } /* ========================================================= SOTTOTITOLO SEZIONE ========================================================= */ .section-subtitle { font-family: var(--estia-font-ui); font-size: var(--estia-fs-subtitle); font-weight: var(--estia-fw-regular); line-height: var(--estia-lh-text); margin-top: 0; margin-bottom: var(--estia-space-card); } /* ========================================================= CARD ========================================================= */ .card-title { font-family: var(--estia-font-ui); font-size: var(--estia-fs-card-title); font-weight: var(--estia-fw-bold); line-height: var(--estia-lh-card-title); margin-top: 0; margin-bottom: 10px; } .card-text { font-family: var(--estia-font-ui); font-size: var(--estia-fs-card-text); font-weight: var(--estia-fw-regular); line-height: var(--estia-lh-text); margin-top: 0; margin-bottom: var(--estia-space-card); } /* ========================================================= BOTTONI STANDARD ESTIA ========================================================= */ .btn-estia__text { font-family: var(--estia-font-button); font-size: var(--estia-fs-button); font-weight: var(--estia-fw-bold); line-height: var(--estia-lh-button); } .btn-estia__text .sub { display: block; font-size: var(--estia-fs-button-sub); font-weight: var(--estia-fw-bold); line-height: var(--estia-lh-button); } /* ========================================================= VARIANTE MOBILE ========================================================= */ @media (max-width: 899px) { :root { /* Font-size mobile */ --estia-fs-page-title: 40px; --estia-fs-section-title: 30px; --estia-fs-card-title: 22px; --estia-fs-description: 17px; --estia-fs-small: 14px; --estia-fs-kicker: 11px; --estia-fs-badge: 12px; --estia-fs-field: 16px; --estia-fs-action: 16px; --estia-fs-subtitle: 20px; --estia-fs-hero: var(--estia-fs-page-title); --estia-fs-body: var(--estia-fs-description); --estia-fs-card-text: var(--estia-fs-description); --estia-fs-button: 30px; --estia-fs-button-sub: 26px; /* Scala font globale Estiastri — estensioni 2026 */ --estia-fs-body-compact: 16px; --estia-fs-micro: 11px; --estia-fs-meta: 11px; --estia-fs-card-kicker: 11px; --estia-fs-hero-compact: 36px; --estia-fs-number-large: 38px; --estia-fs-hero-fluid: clamp(32px, 9vw, 56px); --estia-fs-subtitle-fluid: clamp(16px, 4.5vw, 22px); /* Alias retrocompatibili */ --body-size: var(--estia-fs-body); --card-title-size: var(--estia-fs-card-title); --text-small: var(--estia-fs-small); /* Line-height mobile */ --estia-lh-text: 1.45; /* Spaziature verticali mobile */ --estia-space-page-top-title: 16px; --estia-space-title-divider: 14px; --estia-space-divider-description: 14px; --estia-space-description-content: 24px; --estia-space-content-button: 24px; --estia-space-section: 32px; --estia-space-card: 14px; /* Struttura pagina mobile. Anche qui il body non dà altezza iniziale al titolo. */ --estia-page-body-pad-x: 14px; --estia-page-body-pad-bottom: 64px; --estia-page-wrap-pad-x: 0px; --estia-page-wrap-pad-bottom: 28px; } }