/* Cursore mouse corretto */ .sp-megamenu-parent > li > span, .sp-megamenu-parent > li > a { cursor: pointer; } /* Pulsanti non capitalized */ body .sppb-btn, body .btn { text-transform: none; !important } /* ---------- */ /* NON STICKY */ /* ---------- */ /* Stato “attivo” (voce attuale es. HOME) Voce attuale con padding corretto Serve a dare lo stile corretto alla voce attiva (quella della pagina corrente) */ #sp-header:not(.menu-fixed) .sp-megamenu-parent > li.active > a { color: #000000 !important; background-color: #a5cf4b !important; padding: 0 20px !important; line-height: 40px !important; display: inline-block; } /* ELIMINATO PERCHE' NON ABBIAMO SEPARATORI Voci di menu tipo "Le Piante" (senza link) definisce lo stile per le voci senza link, come "Le Piante", "Novità", ecc. */ /* #sp-header:not(.menu-fixed) .sp-menu-separator { color: #000000 !important; background-color: #ffffff !important; padding: 0 20px !important; line-height: 40px !important; display: inline-block; cursor: pointer; }*/ /* Tutte le voci, stile dimensione e padding coerente Applica uno stile dimensione e padding uniforme a tutte le voci del menu orizzontale */ #sp-header:not(.menu-fixed) .sp-megamenu-parent li > a, #sp-header:not(.menu-fixed) .sp-megamenu-parent li > span { padding: 0 20px !important; line-height: 40px !important; display: inline-block; } /* Hover – solo colore, niente più gonfiamenti Definisce lo stile quando l’utente passa con il mouse su una voce del menu */ #sp-header:not(.menu-fixed) .sp-megamenu-parent li > a:hover, #sp-header:not(.menu-fixed) .sp-megamenu-parent li > span:hover { /*color: #0F210B !important;*/ background-color: #a5cf4b !important; } /* Dropdown – struttura base delle voci (non in hover) Imposta le voci come blocchi interi (display: block) così lo sfondo può estendersi su tutta la riga. Aggiunge padding e line-height per leggibilità e spacing uniforme. Il background è trasparente finché non c'è hover. */ #sp-header .sp-dropdown li.sp-menu-item > a, #sp-header .sp-dropdown li.sp-menu-item > span { display: block; width: 100%; padding: 10px 20px; line-height: 1.5; background-color: transparent; } /* Dropdown – stile al passaggio del mouse (hover) Quando l'utente passa sopra una voce del dropdown, il colore di sfondo diventa verde brillante e il testo diventa nero, come nel menu principale. */ #sp-header .sp-dropdown li.sp-menu-item > a:hover, #sp-header .sp-dropdown li.sp-menu-item > span:hover { color: #000000; background-color: #a5cf4b; } /* Colora il genitore del dropdown anche quando il mouse è sul menu figlio Evita che la voce genitore (tipo "Le Piante") perda il colore quando il mouse scende nel dropdown. */ #sp-header .sp-megamenu-parent > li:hover > a, #sp-header .sp-megamenu-parent > li:hover > span.sp-menu-separator { color: #000000 !important; background-color: #a5cf4b !important; } /* Diminuire padding del contenitore dropdown Elimina quel fastidioso spazio bianco attorno alle voci del dropdown, rendendolo elegante e compatto */ #sp-header .sp-dropdown .sp-dropdown-inner { padding: 5px 10px !important; } /* ------------------- */ /* NON STICKY & STICKY */ /* ------------------- */ /* Dropdown – voce attiva (pagina corrente) */ #sp-header .sp-dropdown li.sp-menu-item.active > a, #sp-header .sp-dropdown li.sp-menu-item.active > span { color: #000000; background-color: #a5cf4b; } /* ---------- */ /* STICKY */ /* ---------- */ /* =============================== STICKY – Colore testo bianco in hover sulla barra orizzontale =============================== */ #sp-header.header-sticky .sp-megamenu-parent > li:hover > a { color: #ffffff !important; } /* =============================== COLORE DI SFONDO DELLA BARRA STICKY (HEADER FISSO) =============================== */ #sp-header.header-sticky { background-color: #313B55 !important; /* Blu-grigio scuro, coerente col tema */ } /* =============================== COLORE DEL TESTO PER LA VOCE ATTIVA (quella evidenziata in verde brillante) =============================== */ #sp-header.header-sticky .sp-megamenu-parent > li.active > a, #sp-header.header-sticky .sp-megamenu-parent > li.active > span { color: #ffffff !important; } /* =============================== STILE PER I MENU SEPARATOR (non cliccabili) in modalità sticky =============================== */ #sp-header.header-sticky .sp-megamenu-parent > li.sp-menu-item > span.sp-menu-separator { background-color: #313B55 !important; color: #ffffff !important; } /* =============================== COLORE TESTO → tutte le voci di menu in modalità sticky (sia che , inclusi dropdown e voce corrente) =============================== */ #sp-header.header-sticky .sp-megamenu-parent li a, #sp-header.header-sticky .sp-megamenu-parent li span, #sp-header.header-sticky .sp-megamenu-parent > li > a, #sp-header.header-sticky .sp-megamenu-parent > li > span { color: #ffffff !important; } /* =============================== STICKY – Sfondo del box dropdown =============================== */ #sp-header.header-sticky .sp-megamenu-parent .sp-dropdown .sp-dropdown-inner { background-color: #313B55 !important; } /* =============================== STICKY – Colore del testo nel box dropdown =============================== */ #sp-header.header-sticky .sp-dropdown li.sp-menu-item > a { color: #ffffff !important; } /* HEADER: barra menu, centratura del CONTENUTO a 1670px */ /* =========================================================== */ /* ——— BOX SITO ——— Cap desktop, centrato */ html body .body-wrapper { max-width: 1670px !important; margin: 0 auto !important; } /* ——— HEADER STABILE (normale + sticky) ——— Barra full-width, contenuto disposto in riga, niente salti */ #sp-header, #sp-header.header-sticky { width: 100% !important; max-width: none !important; left: 0 !important; right: 0 !important; box-sizing: border-box !important; padding: 0 !important; } #sp-header .container, #sp-header .container-inner, #sp-header .sp-megamenu-wrapper { width: 100% !important; /* il contenuto dello header occupa tutta la barra */ max-width: none !important; /* niente cap: lo header resta full-width (non boxed) */ margin: 0 auto !important; /* neutro qui (con width:100% non cambia), ma innocuo */ padding: 0 15px !important; /* piccoli gutter interni a sinistra/destra */ display: flex !important; /* logo + menu messi su una sola riga */ align-items: center !important; /* verticalmente centrati nella barra */ justify-content: space-between !important; /* logo a sinistra, menu a destra */ flex-wrap: nowrap !important; /* niente a capo: restano sulla stessa riga */ gap: 24px; /* respiro orizzontale tra logo e menu */ } /* elimina i “dentini” della grid Bootstrap */ #sp-header .row { margin: 0 !important; } #sp-header .row > [class^="col-"], #sp-header .row > [class*=" col-"] { padding-left: 0 !important; padding-right: 0 !important; } /* un filo di respiro su schermi stretti */ @media (max-width: 992px) { #sp-header .container, #sp-header .container-inner, #sp-header .sp-megamenu-wrapper { gap: 12px; padding: 0 12px !important; } } /* =================================================================== */ /* ========================= SNIPPETS VARI =========================== */ /* =================================================================== */ /* ----------------------------------------- Soft Card – Flat Corners ----------------------------------------- Light background + soft border with sharp corners Base style for soft cards with subtle green border and light background. Use this class to apply border and background only. */ .card-soft-flat { background-color: #effaf1 !important; /* Light green background */ border: 1px solid #a6bda980; /* Soft border, semi-transparent green */ border-radius: 0; /* Square corners */ } /* ----------------------------------------- Soft Card – Rounded Corners ----------------------------------------- Same as above, but with 30px rounded corners Applies smooth rounded corners to card elements. */ .card-soft-rounded { background-color: #effaf1 !important; /* Light green background */ border: 1px solid #a6bda980; /* Soft border, semi-transparent green */ border-radius: 30px; /* Smooth, rounded corners */ } /* ----------------------------------------- Shadow Effect (Normal State) ----------------------------------------- Adds a soft shadow for depth. Includes transition for hover effect. */ .object-shadow { transition: /* Smooth transition between shadows */ box-shadow /* property: the CSS property to animate */ 0.3s /* duration: the animation lasts 0.3 seconds */ ease !important; /* timing-function: starts fast, slows down smoothly */ box-shadow: /* Soft green drop shadow */ 5px /* offset-x: shadow moves 5px to the right */ 5px /* offset-y: shadow moves 5px down */ 10px /* blur-radius: shadow is blurred by 10px */ 0 /* spread-radius: no expansion, default size */ #a6bda980 !important; /* color: Green Soft with 50% opacity */ } /* ----------------------------------------- Shadow Effect (Hover State) ----------------------------------------- Applies on hover only. Creates "lifted" effect with larger and softer shadow. */ .object-shadow:hover { box-shadow: /* Expanded shadow for lifted effect */ 18px /* offset-x: shadow moves 18px to the right */ 18px /* offset-y: shadow moves 18px down */ 20px /* blur-radius: shadow is blurred by 20px */ 0 /* spread-radius: no expansion, default size */ #a6bda980 !important; /* color: Green Soft with 50% opacity */ } /* ----------------------------------------- Image – Bottom Left Accent Radius ----------------------------------------- Applies soft rounding to all corners, and a more pronounced curve to bottom-left. Use on inside Feature Box or similar components. */ .img-rounded-bottom-left img { border-radius: 20px !important; border-bottom-left-radius: 60px !important; width: 100% !important; object-fit: cover !important; }