.elementor-kit-1389{--e-global-color-primary:#B9966A;--e-global-color-secondary:#7E7E7E;--e-global-color-text:#313130;--e-global-color-accent:#FFFFFF;--e-global-color-0b4809a:#EFE3D0;--e-global-color-aba2a6f:#9A7B52;--e-global-typography-primary-font-family:"Georama";--e-global-typography-primary-font-size:20px;--e-global-typography-primary-font-weight:700;--e-global-typography-secondary-font-family:"Roboto Slab";--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"Roboto";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Roboto";--e-global-typography-accent-font-weight:500;--e-global-typography-6870847-font-family:"Georama";--e-global-typography-6870847-font-size:16px;--e-global-typography-6870847-font-weight:500;--e-global-typography-91b9432-font-family:"Georama";--e-global-typography-91b9432-font-size:33px;--e-global-typography-91b9432-font-weight:700;--e-global-typography-0716db5-font-family:"Georama";--e-global-typography-0716db5-font-size:20px;--e-global-typography-0716db5-font-weight:700;--e-global-typography-dbc2f32-font-family:"Georama";--e-global-typography-dbc2f32-font-size:25px;--e-global-typography-dbc2f32-font-weight:700;--e-global-typography-816ed1d-font-family:"Georama";--e-global-typography-816ed1d-font-size:18px;--e-global-typography-816ed1d-font-weight:500;--e-global-typography-5e579d9-font-family:"Georama";--e-global-typography-5e579d9-font-size:18px;--e-global-typography-5e579d9-font-weight:700;--e-global-typography-6556d6b-font-family:"Georama";--e-global-typography-6556d6b-font-size:14px;--e-global-typography-6556d6b-font-weight:500;--e-global-typography-ca2fa70-font-family:"Georama";--e-global-typography-ca2fa70-font-size:15px;--e-global-typography-ca2fa70-font-weight:500;--e-global-typography-b553ba1-font-family:"Georama";--e-global-typography-b553ba1-font-size:16px;--e-global-typography-b553ba1-font-weight:500;--e-global-typography-2469f19-font-family:"Georama";--e-global-typography-2469f19-font-size:16px;--e-global-typography-2469f19-font-weight:600;--e-global-typography-8c76e06-font-family:"Georama";--e-global-typography-8c76e06-font-size:18px;--e-global-typography-8c76e06-font-weight:500;--e-global-typography-b0c4739-font-family:"Playfair Display";--e-global-typography-b0c4739-font-size:64px;--e-global-typography-b0c4739-font-weight:600;--e-global-typography-ef7803f-font-family:"Playfair Display";--e-global-typography-ef7803f-font-size:40px;--e-global-typography-ef7803f-font-weight:500;--e-global-typography-a30d8fa-font-family:"Manrope";--e-global-typography-a30d8fa-font-size:18px;--e-global-typography-a30d8fa-font-weight:400;--e-global-typography-e10cbb0-font-family:"Manrope";--e-global-typography-e10cbb0-font-size:14px;--e-global-typography-e10cbb0-font-weight:600;--e-global-typography-e10cbb0-line-height:1.2px;color:var( --e-global-color-text );}.elementor-kit-1389 e-page-transition{background-color:#FFBC7D;}.elementor-kit-1389 a{color:var( --e-global-color-primary );}.elementor-kit-1389 h1{color:var( --e-global-color-primary );}.elementor-kit-1389 h2{color:var( --e-global-color-primary );}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1140px;}.e-con{--container-max-width:1140px;--container-default-padding-top:0px;--container-default-padding-right:0px;--container-default-padding-bottom:0px;--container-default-padding-left:0px;}.elementor-widget:not(:last-child){margin-block-end:0px;}.elementor-element{--widgets-spacing:0px 0px;--widgets-spacing-row:0px;--widgets-spacing-column:0px;}{}h1.entry-title{display:var(--page-title-display);}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}/* Start custom CSS *//* Smooth scroll per ancora #info */ html { scroll-behavior: smooth; } /* Animazione hover bottoni primari */ .elementor-button { transition: all 0.25s ease; } .elementor-button:hover { transform: translateY(-2px); } /* Stile blockquote in evidenza */ .cita-evidenza { font-family: 'Playfair Display', serif; font-style: italic; font-size: 28px; color: #B9966A; border-left: 2px solid #B9966A; padding-left: 24px; margin: 40px 0; } /* Fade in lento delle sezioni al caricamento */ @keyframes fadeInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } .elementor-section, .e-con { animation: fadeInUp 0.8s ease both; } /* ============================================================= EPIC ROUTES — CSS GLOBALE Gestione header sticky + hero + tipografia responsive ------------------------------------------------------------- DOVE INCOLLARLO (una volta sola, vale per tutto il sito): Elementor → Hamburger in alto a sinistra → Impostazioni sito → CSS personalizzato → Incolla qui sotto → Aggiorna. In alternativa: Bacheca WP → Aspetto → Personalizza → CSS aggiuntivo. ============================================================= */ /* ---------- 1. PALETTE BRAND (riusabile ovunque) ---------- */ :root { --er-dark: #313130; --er-beige: #B9966A; --er-white: #FFFFFF; } /* ---------- 2. HERO: spazio sotto l'header sticky ---------- Vale per la PRIMA sezione di OGNI pagina Elementor. Su desktop l'header non copre nulla, quindi non tocchiamo. */ /* Mobile */ @media (max-width: 1024px){ main > .elementor > :first-child { padding-top: 120px !important; } } @media (max-width: 767px){ main > .elementor > :first-child { padding-top: 140px !important; } } /* ---------- 3. TIPOGRAFIA RESPONSIVE ---------- Riduce automaticamente i titoli grandi su schermi piccoli. Senza !important: le dimensioni impostate sui singoli widget hanno la precedenza. */ /* Tablet */ @media (max-width: 1024px) { .elementor-widget-heading h1.elementor-heading-title { font-size: 54px; line-height: 1.1; } .elementor-widget-heading h2.elementor-heading-title { font-size: 38px; line-height: 1.15; } } /* Mobile */ @media (max-width: 767px) { .elementor-widget-heading h1.elementor-heading-title { font-size: 38px; line-height: 1.1; } .elementor-widget-heading h2.elementor-heading-title { font-size: 28px; line-height: 1.2; } .elementor-widget-heading h3.elementor-heading-title { font-size: 22px; line-height: 1.25; } } /* Mobile piccolo (iPhone SE e simili) */ @media (max-width: 380px) { .elementor-widget-heading h1.elementor-heading-title { font-size: 32px; } } /* ---------- 4. EYEBROW / OVERLINE Le piccole scritte tipo "APERITIVO CON IL VIAGGIATORE" sopra ai titoloni. Mantengono leggibilità su mobile. */ @media (max-width: 767px) { .er-eyebrow, .elementor-widget-heading .elementor-heading-title.eyebrow { font-size: 12px !important; letter-spacing: 1.5px !important; line-height: 1.3 !important; } } /* ---------- 5. PICCOLI FIX UTILI ---------- Evita che i bottoni Elementor escano dal contenitore su mobile. */ @media (max-width: 767px) { .elementor-button { max-width: 100%; white-space: normal; } } /* ---------- 6. BOTTONI EPIC ROUTES (opzionale) ---------- Stili pronti per i CTA, coerenti con la palette. COME USARLI: in Elementor, clicca sul bottone → Avanzate → CSS Classes → scrivi UNA di queste classi: er-btn-primary → beige pieno, hover dark er-btn-secondary → dark pieno, hover beige er-btn-outline → bordo beige trasparente, hover beige pieno er-btn-ghost → bianco con testo dark, hover beige Funziona anche su link normali (non solo widget Bottone). */ /* Base comune (transizione fluida + bordi arrotondati leggeri) */ .elementor-button.er-btn-primary, .elementor-button.er-btn-secondary, .elementor-button.er-btn-outline, .elementor-button.er-btn-ghost, a.er-btn-primary, a.er-btn-secondary, a.er-btn-outline, a.er-btn-ghost { display: inline-block; padding: 14px 28px; border-radius: 2px; font-weight: 600; letter-spacing: 0.5px; text-decoration: none; transition: all 0.3s ease; border-width: 2px; border-style: solid; } /* Primario: BEIGE → DARK al hover */ .elementor-button.er-btn-primary, a.er-btn-primary { background-color: var(--er-beige) !important; color: var(--er-dark) !important; border-color: var(--er-beige) !important; } .elementor-button.er-btn-primary:hover, a.er-btn-primary:hover { background-color: var(--er-dark) !important; color: var(--er-beige) !important; border-color: var(--er-dark) !important; } /* Secondario: DARK → BEIGE al hover */ .elementor-button.er-btn-secondary, a.er-btn-secondary { background-color: var(--er-dark) !important; color: var(--er-beige) !important; border-color: var(--er-dark) !important; } .elementor-button.er-btn-secondary:hover, a.er-btn-secondary:hover { background-color: var(--er-beige) !important; color: var(--er-dark) !important; border-color: var(--er-beige) !important; } /* Outline: bordo beige, fondo trasparente, hover pieno beige */ .elementor-button.er-btn-outline, a.er-btn-outline { background-color: transparent !important; color: var(--er-beige) !important; border-color: var(--er-beige) !important; } .elementor-button.er-btn-outline:hover, a.er-btn-outline:hover { background-color: var(--er-beige) !important; color: var(--er-dark) !important; } /* Ghost: bianco discreto su sfondi scuri, hover beige */ .elementor-button.er-btn-ghost, a.er-btn-ghost { background-color: var(--er-white) !important; color: var(--er-dark) !important; border-color: var(--er-white) !important; } .elementor-button.er-btn-ghost:hover, a.er-btn-ghost:hover { background-color: var(--er-beige) !important; color: var(--er-dark) !important; border-color: var(--er-beige) !important; }/* End custom CSS */