/* Theme Name: Kadence Child Theme URI: https://servizi.vitacomoda.it/ Description: Tema Child Servizi Vitacomoda — sfera 3D da functions.php + CSS aggiuntivo (Customizer). Author: Vitacomoda Author URI: https://vitacomoda.it Template: kadence Version: 1.0.4 Text Domain: kadence-child */ /* Stili extra opzionali; la sfera 3D è in functions.php (footer) + Personalizza → CSS aggiuntivo. */ /* ============================================================ * Vitacomoda menu premium — desktop, tablet, mobile. * Stile oro professionale con accenti light blue. * ============================================================ */ :root { --vc-menu-blue: #0445af; --vc-menu-blue-dark: #061b3a; --vc-menu-cyan: #04b8d8; --vc-menu-gold: #ffc532; --vc-menu-gold-soft: #fff7d6; --vc-menu-border: rgba(255, 197, 50, 0.58); --vc-menu-shadow: 0 14px 34px rgba(4, 69, 175, 0.14); } .main-navigation .primary-menu-container > ul > li > a, .header-navigation .menu > li > a, .mobile-navigation ul li a, .popup-drawer .drawer-content a { font-weight: 750; letter-spacing: -0.01em; text-decoration: none !important; -webkit-tap-highlight-color: transparent; } /* Desktop/tablet header menu: elegante, visibile, senza effetto neon. */ @media (min-width: 1025px) { .main-navigation .primary-menu-container > ul > li > a, .header-navigation .menu > li > a { position: relative; margin-inline: 0.12rem; padding: 0.64rem 0.86rem; border-radius: 999px; color: var(--vc-menu-blue-dark); transition: color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease; } .main-navigation .primary-menu-container > ul > li > a::after, .header-navigation .menu > li > a::after { content: ""; position: absolute; left: 18%; right: 18%; bottom: 0.34rem; height: 3px; border-radius: 999px; background: linear-gradient(90deg, var(--vc-menu-gold), var(--vc-menu-cyan)); opacity: 0; transform: scaleX(0.55); transition: opacity 0.18s ease, transform 0.18s ease; } .main-navigation .primary-menu-container > ul > li:hover > a, .main-navigation .primary-menu-container > ul > li.current-menu-item > a, .header-navigation .menu > li:hover > a, .header-navigation .menu > li.current-menu-item > a { color: var(--vc-menu-blue); background: linear-gradient(180deg, #ffffff, #fffaf0); box-shadow: 0 10px 24px rgba(255, 197, 50, 0.18); transform: translateY(-1px); } .main-navigation .primary-menu-container > ul > li:hover > a::after, .main-navigation .primary-menu-container > ul > li.current-menu-item > a::after, .header-navigation .menu > li:hover > a::after, .header-navigation .menu > li.current-menu-item > a::after { opacity: 1; transform: scaleX(1); } } /* Drawer mobile/tablet Kadence: card grandi — tema chiaro solo fuori pagine gaming. */ body:not(.vc-gaming-active):not(:has(.vc-gaming)):not(:has(.vc-marketplace)):not(:has(.vc-health)):not(:has(.vc-mkt)):not(:has(.vc-obf-catalog.vc-gaming)) .popup-drawer .drawer-inner { background: radial-gradient(circle at 92% 8%, rgba(255, 197, 50, 0.18), transparent 30%), radial-gradient(circle at 10% 92%, rgba(4, 184, 216, 0.12), transparent 34%), linear-gradient(180deg, #ffffff 0%, #f8fbff 100%) !important; } body:not(.vc-gaming-active):not(:has(.vc-gaming)):not(:has(.vc-marketplace)):not(:has(.vc-health)):not(:has(.vc-mkt)):not(:has(.vc-obf-catalog.vc-gaming)) .popup-drawer .drawer-content, body:not(.vc-gaming-active):not(:has(.vc-gaming)):not(:has(.vc-marketplace)):not(:has(.vc-health)):not(:has(.vc-mkt)):not(:has(.vc-obf-catalog.vc-gaming)) .popup-drawer .drawer-navigation { padding-inline: clamp(1rem, 5vw, 2rem); } .mobile-navigation ul, .popup-drawer .drawer-content ul { display: grid; gap: 0.78rem; margin: 0; padding: 0; list-style: none; } .mobile-navigation ul li, .popup-drawer .drawer-content li { margin: 0; } body:not(.vc-gaming-active):not(:has(.vc-gaming)):not(:has(.vc-marketplace)):not(:has(.vc-health)):not(:has(.vc-mkt)):not(:has(.vc-obf-catalog.vc-gaming)) .mobile-navigation ul li a, body:not(.vc-gaming-active):not(:has(.vc-gaming)):not(:has(.vc-marketplace)):not(:has(.vc-health)):not(:has(.vc-mkt)):not(:has(.vc-obf-catalog.vc-gaming)) .popup-drawer .drawer-content li a { display: flex; align-items: center; min-height: 58px; padding: 0.95rem 1.2rem !important; border: 1px solid var(--vc-menu-border); border-radius: 16px; background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(255, 251, 235, 0.9)); color: var(--vc-menu-blue-dark) !important; box-shadow: 0 12px 28px rgba(4, 69, 175, 0.10), 0 0 0 1px rgba(255, 255, 255, 0.8) inset; font-size: clamp(1rem, 2.5vw, 1.08rem); line-height: 1.2; transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease, background 0.16s ease; } body:not(.vc-gaming-active):not(:has(.vc-gaming)):not(:has(.vc-marketplace)):not(:has(.vc-health)):not(:has(.vc-mkt)):not(:has(.vc-obf-catalog.vc-gaming)) .mobile-navigation ul li a::before, body:not(.vc-gaming-active):not(:has(.vc-gaming)):not(:has(.vc-marketplace)):not(:has(.vc-health)):not(:has(.vc-mkt)):not(:has(.vc-obf-catalog.vc-gaming)) .popup-drawer .drawer-content li a::before { content: ""; width: 8px; height: 8px; margin-right: 0.72rem; border-radius: 999px; background: linear-gradient(135deg, var(--vc-menu-gold), var(--vc-menu-cyan)); box-shadow: 0 0 0 4px rgba(255, 197, 50, 0.16); flex: 0 0 auto; pointer-events: none; } body:not(.vc-gaming-active):not(:has(.vc-gaming)):not(:has(.vc-marketplace)):not(:has(.vc-health)):not(:has(.vc-mkt)):not(:has(.vc-obf-catalog.vc-gaming)) .mobile-navigation ul li a:hover, body:not(.vc-gaming-active):not(:has(.vc-gaming)):not(:has(.vc-marketplace)):not(:has(.vc-health)):not(:has(.vc-mkt)):not(:has(.vc-obf-catalog.vc-gaming)) .mobile-navigation ul li.current-menu-item > a, body:not(.vc-gaming-active):not(:has(.vc-gaming)):not(:has(.vc-marketplace)):not(:has(.vc-health)):not(:has(.vc-mkt)):not(:has(.vc-obf-catalog.vc-gaming)) .popup-drawer .drawer-content li a:hover, body:not(.vc-gaming-active):not(:has(.vc-gaming)):not(:has(.vc-marketplace)):not(:has(.vc-health)):not(:has(.vc-mkt)):not(:has(.vc-obf-catalog.vc-gaming)) .popup-drawer .drawer-content li.current-menu-item > a { transform: translateY(-1px); border-color: rgba(4, 184, 216, 0.58); background: linear-gradient(180deg, #ffffff, #ecfeff); box-shadow: 0 18px 36px rgba(4, 69, 175, 0.15), 0 0 0 1px rgba(4, 184, 216, 0.12) inset; } .popup-drawer .drawer-toggle, .popup-drawer .drawer-header .drawer-toggle, .popup-drawer button.drawer-toggle { min-width: 44px; min-height: 44px; border-radius: 999px !important; } body:not(.vc-gaming-active):not(:has(.vc-gaming)):not(:has(.vc-marketplace)):not(:has(.vc-health)):not(:has(.vc-mkt)):not(:has(.vc-obf-catalog.vc-gaming)) .popup-drawer .drawer-toggle, body:not(.vc-gaming-active):not(:has(.vc-gaming)):not(:has(.vc-marketplace)):not(:has(.vc-health)):not(:has(.vc-mkt)):not(:has(.vc-obf-catalog.vc-gaming)) .popup-drawer .drawer-header .drawer-toggle, body:not(.vc-gaming-active):not(:has(.vc-gaming)):not(:has(.vc-marketplace)):not(:has(.vc-health)):not(:has(.vc-mkt)):not(:has(.vc-obf-catalog.vc-gaming)) .popup-drawer button.drawer-toggle { color: var(--vc-menu-blue-dark) !important; } @media (min-width: 768px) and (max-width: 1024px) { .popup-drawer .drawer-inner { max-width: min(520px, 86vw); margin-left: auto; box-shadow: -24px 0 70px rgba(6, 27, 58, 0.18); } } @media (max-width: 767px) { body:not(.vc-gaming-active):not(:has(.vc-gaming)):not(:has(.vc-marketplace)):not(:has(.vc-health)):not(:has(.vc-mkt)):not(:has(.vc-obf-catalog.vc-gaming)) .popup-drawer .drawer-content, body:not(.vc-gaming-active):not(:has(.vc-gaming)):not(:has(.vc-marketplace)):not(:has(.vc-health)):not(:has(.vc-mkt)):not(:has(.vc-obf-catalog.vc-gaming)) .popup-drawer .drawer-navigation { padding-inline: 1rem; } body:not(.vc-gaming-active):not(:has(.vc-gaming)):not(:has(.vc-marketplace)):not(:has(.vc-health)):not(:has(.vc-mkt)):not(:has(.vc-obf-catalog.vc-gaming)) .mobile-navigation ul li a, body:not(.vc-gaming-active):not(:has(.vc-gaming)):not(:has(.vc-marketplace)):not(:has(.vc-health)):not(:has(.vc-mkt)):not(:has(.vc-obf-catalog.vc-gaming)) .popup-drawer .drawer-content li a { min-height: 62px; border-radius: 15px; } } @media (prefers-reduced-motion: reduce) { .main-navigation .primary-menu-container > ul > li > a, .header-navigation .menu > li > a, .mobile-navigation ul li a, .popup-drawer .drawer-content li a { transition: none !important; } } /* Contenuto pagine: niente scroll orizzontale su mobile */ @media (max-width: 767px) { .site-container, .content-container, .content-area, .entry-content { max-width: 100%; overflow-x: clip; } }