/* ========================================================================= Nuvola B Studio - main.css Mobile-first. Le variabili colore/font di base sono definite qui come fallback; inc/customizer.php le sovrascrive in con i valori scelti dall'utente nel Customizer, quindi qualsiasi cambiamento è immediato e non richiede il ricaricamento di questo file. ========================================================================= */ :root { --nuvolab-primary: #B39DDB; --nuvolab-secondary: #D8B4FE; --nuvolab-accent: #7C3AED; --nuvolab-text: #1F1B24; --nuvolab-background: #FDFBFF; --nuvolab-font-size-base: 16px; --nuvolab-font-heading: "Poppins", sans-serif; --nuvolab-font-body: "Inter", sans-serif; --nuvolab-products-per-row: 3; /* Derivati */ --nuvolab-primary-light: color-mix(in srgb, var(--nuvolab-primary) 40%, white); --nuvolab-primary-dark: color-mix(in srgb, var(--nuvolab-primary) 70%, black); --nuvolab-border: color-mix(in srgb, var(--nuvolab-primary) 25%, white); --nuvolab-shadow: 0 10px 30px color-mix(in srgb, var(--nuvolab-primary) 30%, transparent); --nuvolab-radius: 18px; --nuvolab-radius-sm: 10px; --nuvolab-transition: 0.35s cubic-bezier(0.22, 1, 0.36, 1); --nuvolab-max-width: 1280px; --nuvolab-header-bg: #FDFBFFE6; --nuvolab-footer-bg: #F3ECFC; --nuvolab-link-hover: #7C3AED; --nuvolab-sale-badge: #7C3AED; --nuvolab-darkmode-bg: #15121A; --nuvolab-heading-scale: 1.25; --nuvolab-line-height: 1.6; --nuvolab-heading-transform: none; --nuvolab-image-ratio: 1/1; --nuvolab-logo-width: 150px; --nuvolab-hero-overlay: 0.35; --nuvolab-density: 1; --nuvolab-anim-speed: 0.6s; --nuvolab-card-min-width: 290px; } /* ------------------------------------------------------------------------- Dark Mode Attivata aggiungendo data-theme="dark" su (vedi header.php e assets/js/darkmode.js). Le variabili colore vengono ridefinite mantenendo la stessa palette lilla come accento. ---------------------------------------------------------------------- */ html[data-theme="dark"] { --nuvolab-background: var(--nuvolab-darkmode-bg); --nuvolab-text: #F1EAFB; --nuvolab-header-bg: color-mix(in srgb, var(--nuvolab-darkmode-bg) 92%, white); --nuvolab-footer-bg: color-mix(in srgb, var(--nuvolab-darkmode-bg) 85%, black); --nuvolab-border: color-mix(in srgb, var(--nuvolab-primary) 35%, black); } html[data-theme="dark"] body { background-color: var(--nuvolab-background); } html[data-theme="dark"] ul.products li.product, html[data-theme="dark"] .nuvolab-card, html[data-theme="dark"] .nuvolab-testimonial-card, html[data-theme="dark"] .nuvolab-blog-card, html[data-theme="dark"] .nuvolab-personalization, html[data-theme="dark"] .woocommerce-checkout #order_review, html[data-theme="dark"] .cart-collaterals .cart_totals, html[data-theme="dark"] .shop-widget, html[data-theme="dark"] .blog-widget, html[data-theme="dark"] .nuvolab-mobile-menu, html[data-theme="dark"] .nuvolab-mobile-menu__header, html[data-theme="dark"] .nuvolab-shop-sidebar, html[data-theme="dark"] .nuvolab-shop-sidebar__header, html[data-theme="dark"] .nuvolab-category-menu__panel, html[data-theme="dark"] .nuvolab-menu--header .sub-menu, html[data-theme="dark"] .nuvolab-sticky-atc, html[data-theme="dark"] .nuvolab-deal__card { background: color-mix(in srgb, var(--nuvolab-darkmode-bg) 80%, white); border-color: var(--nuvolab-border); } html[data-theme="dark"] .nuvolab-header { background: var(--nuvolab-header-bg); border-color: var(--nuvolab-border); } /* Le righe sopra sistemano gli SFONDI dei contenitori a tema, ma alcuni campi di modulo dentro quei contenitori (input di ricerca a fuoco, select della personalizzazione prodotto) forzavano ANCH'ESSI uno sfondo bianco fisso, indipendente dal contenitore: risultato, testo quasi bianco (colore di dark mode) su sfondo ancora bianco, illeggibile, proprio nei punti dove si scrive/seleziona qualcosa. */ html[data-theme="dark"] .widget_product_search .search-field, html[data-theme="dark"] .widget_product_search .search-field:focus, html[data-theme="dark"] .nuvolab-personalization__field input, html[data-theme="dark"] .nuvolab-personalization__field select, html[data-theme="dark"] .search-form .search-field { background: color-mix(in srgb, var(--nuvolab-darkmode-bg) 88%, white); color: var(--nuvolab-text); border-color: var(--nuvolab-border); } /* Alcuni stati ":hover" schiarivano lo sfondo verso il bianco assumendo un tema chiaro (es. "mix 10% primario, 90% bianco"): in dark mode questo crea una toppa chiara dentro un pannello scuro, e nei casi dove il testo non aveva un colore esplicito (ereditava --nuvolab-text, quasi bianco in dark mode) diventava a sua volta poco leggibile sopra quella toppa chiara. Qui invertiamo la stessa logica verso il nero invece del bianco, cosi' l'hover resta visibile ma coerente con l'interfaccia scura, e fissiamo il colore testo dove prima veniva solo ereditato. */ html[data-theme="dark"] .nuvolab-mobile-menu nav a:hover { background: color-mix(in srgb, var(--nuvolab-primary) 20%, black); color: var(--nuvolab-text); } html[data-theme="dark"] .woocommerce-widget-layered-nav-list a:hover { background: color-mix(in srgb, var(--nuvolab-primary) 18%, black); color: var(--nuvolab-text); } html[data-theme="dark"] .nuvolab-category-menu__list > li > a:hover, html[data-theme="dark"] .product-categories li:hover { background: color-mix(in srgb, var(--nuvolab-primary) 22%, black); } html[data-theme="dark"] .shop-widget ul.product_list_widget li:hover, html[data-theme="dark"] .blog-widget ul.product_list_widget li:hover { background: color-mix(in srgb, var(--nuvolab-primary) 14%, black); } .nuvolab-icon-moon { display: none; } html[data-theme="dark"] .nuvolab-icon-sun { display: none; } html[data-theme="dark"] .nuvolab-icon-moon { display: inline-block; } /* ------------------------------------------------------------------------- Reset essenziale ---------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { margin: 0; font-family: var(--nuvolab-font-body); font-size: var(--nuvolab-font-size-base); color: var(--nuvolab-text); background-color: var(--nuvolab-background); line-height: var(--nuvolab-line-height, 1.6); overflow-x: hidden; transition: background-color var(--nuvolab-transition), color var(--nuvolab-transition); } img { max-width: 100%; height: auto; display: block; } a { color: inherit; text-decoration: none; } h1, h2, h3, h4, h5, h6 { font-family: var(--nuvolab-font-heading); font-weight: 700; line-height: 1.2; margin: 0 0 0.6em; color: var(--nuvolab-text); text-transform: var(--nuvolab-heading-transform, none); } /* La "scala titoli" del Customizer (--nuvolab-heading-scale, default 1.25) agisce come moltiplicatore lineare sulle dimensioni base: valori più alti rendono i titoli proporzionalmente più grandi rispetto al testo. */ h1 { font-size: clamp(2.1rem, calc(5vw * var(--nuvolab-heading-scale, 1.25) / 1.25), calc(3.8rem * var(--nuvolab-heading-scale, 1.25) / 1.25)); } h2 { font-size: clamp(1.7rem, calc(3.2vw * var(--nuvolab-heading-scale, 1.25) / 1.25), calc(2.5rem * var(--nuvolab-heading-scale, 1.25) / 1.25)); } h3 { font-size: clamp(1.35rem, calc(2.4vw * var(--nuvolab-heading-scale, 1.25) / 1.25), calc(1.85rem * var(--nuvolab-heading-scale, 1.25) / 1.25)); } h4 { font-size: calc(1.15rem * var(--nuvolab-heading-scale, 1.25) / 1.25); } h5 { font-size: calc(1.02rem * var(--nuvolab-heading-scale, 1.25) / 1.25); } h6 { font-size: calc(0.92rem * var(--nuvolab-heading-scale, 1.25) / 1.25); } p { margin: 0 0 1em; } button { font-family: inherit; cursor: pointer; } .screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); } .skip-link { position: absolute; top: -100px; left: 0; background: var(--nuvolab-primary); color: #fff; padding: 10px 20px; z-index: 10000; transition: top 0.3s; } .skip-link:focus { top: 0; } /* ------------------------------------------------------------------------- Layout / container ---------------------------------------------------------------------- */ .nuvolab-container { width: 100%; max-width: var(--nuvolab-max-width); margin-inline: auto; padding-inline: 20px; } .nuvolab-content-grid { display: grid; grid-template-columns: 1fr; gap: 32px; padding-block: 40px; } /* ------------------------------------------------------------------------- Bottoni ---------------------------------------------------------------------- */ .nuvolab-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 14px 30px; border-radius: 999px; font-weight: 600; font-size: 0.95rem; border: 2px solid transparent; transition: transform var(--nuvolab-transition), box-shadow var(--nuvolab-transition), background var(--nuvolab-transition), color var(--nuvolab-transition); white-space: nowrap; overflow: visible; } /* Piccolo "timbro" a forma di zampetta sui bottoni principali: appare con una leggera rotazione al passaggio del mouse, un dettaglio giocoso ma discreto legato al tema felino del brand ("ispirazione gatti per i tasti" del sito). */ .nuvolab-btn--primary::after { content: ""; position: absolute; top: -8px; right: -8px; width: 20px; height: 20px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cellipse cx='12' cy='16' rx='5.2' ry='4.4'/%3E%3Cellipse cx='5.2' cy='9.3' rx='2' ry='2.6' transform='rotate(-20 5.2 9.3)'/%3E%3Cellipse cx='9.6' cy='5.6' rx='2' ry='2.7' transform='rotate(-8 9.6 5.6)'/%3E%3Cellipse cx='14.4' cy='5.6' rx='2' ry='2.7' transform='rotate(8 14.4 5.6)'/%3E%3Cellipse cx='18.8' cy='9.3' rx='2' ry='2.6' transform='rotate(20 18.8 9.3)'/%3E%3C/svg%3E"); background-size: contain; background-repeat: no-repeat; opacity: 0; transform: scale(0.5) rotate(-25deg); transition: opacity var(--nuvolab-transition), transform var(--nuvolab-transition); pointer-events: none; } .nuvolab-btn--primary:hover::after { opacity: 0.9; transform: scale(1) rotate(0deg); } .nuvolab-btn--primary { background: linear-gradient(135deg, var(--nuvolab-primary), var(--nuvolab-secondary)); color: #fff; box-shadow: var(--nuvolab-shadow); } .nuvolab-btn--primary:hover { transform: translateY(-3px) scale(1.02); box-shadow: 0 16px 36px color-mix(in srgb, var(--nuvolab-primary) 45%, transparent); } .nuvolab-btn--outline { background: transparent; color: var(--nuvolab-primary-dark); border-color: var(--nuvolab-primary); } .nuvolab-btn--outline:hover { background: var(--nuvolab-primary); color: #fff; } .nuvolab-btn--outline-light { background: transparent; color: #fff; border-color: rgba(255, 255, 255, 0.75); } .nuvolab-btn--outline-light:hover { background: #fff; color: var(--nuvolab-primary-dark); transform: translateY(-3px); } /* ------------------------------------------------------------------------- Barra utility (sopra l'header): social + link rapidi ---------------------------------------------------------------------- */ .nuvolab-utility-bar { background: var(--nuvolab-text); color: rgba(255, 255, 255, 0.85); font-size: 0.78rem; } .nuvolab-utility-bar__inner { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding-block: 8px; } .nuvolab-utility-bar__socials { display: flex; align-items: center; gap: 12px; } .nuvolab-utility-bar__socials a { color: inherit; display: inline-flex; opacity: 0.8; transition: opacity 0.2s ease, transform 0.2s ease; } .nuvolab-utility-bar__socials a:hover { opacity: 1; transform: translateY(-1px); color: var(--nuvolab-secondary); } .nuvolab-utility-bar__socials svg { width: 14px; height: 14px; } .nuvolab-utility-bar__links { display: flex; gap: 18px; } .nuvolab-utility-bar__links a { color: inherit; opacity: 0.85; transition: opacity 0.2s ease; } .nuvolab-utility-bar__links a:hover { opacity: 1; text-decoration: underline; } @media (max-width: 599px) { .nuvolab-utility-bar__links a:not(:first-child) { display: none; } } /* ------------------------------------------------------------------------- Pulsante "Sfoglia le categorie" + pannello a tendina nell'header ---------------------------------------------------------------------- */ .nuvolab-category-menu { position: relative; display: inline-block; margin-right: 18px; vertical-align: middle; } .nuvolab-category-menu__toggle { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border: none; border-radius: 999px; background: var(--nuvolab-primary); color: #fff; font-weight: 600; font-size: 0.85rem; cursor: pointer; transition: background var(--nuvolab-transition); } .nuvolab-category-menu__toggle:hover { background: var(--nuvolab-primary-dark); } .nuvolab-category-menu__chevron { transition: transform var(--nuvolab-transition); } .nuvolab-category-menu.is-open .nuvolab-category-menu__chevron { transform: rotate(180deg); } .nuvolab-category-menu__panel { position: absolute; top: calc(100% + 10px); left: 0; width: 280px; max-height: 70vh; overflow-y: auto; background: #fff; border-radius: var(--nuvolab-radius); box-shadow: 0 20px 45px rgba(0, 0, 0, 0.16); border: 1px solid var(--nuvolab-border); padding: 12px; opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease; z-index: 500; } .nuvolab-category-menu.is-open .nuvolab-category-menu__panel { opacity: 1; visibility: visible; transform: translateY(0); } .nuvolab-category-menu__list { list-style: none; margin: 0; padding: 0; } .nuvolab-category-menu__list > li { border-bottom: 1px solid var(--nuvolab-border); } .nuvolab-category-menu__list > li:last-child { border-bottom: none; } .nuvolab-category-menu__list > li > a { display: flex; align-items: center; justify-content: space-between; padding: 10px 8px; font-weight: 600; border-radius: var(--nuvolab-radius-sm, 8px); } .nuvolab-category-menu__list > li > a:hover { background: color-mix(in srgb, var(--nuvolab-primary) 8%, white); color: var(--nuvolab-primary-dark); } .nuvolab-category-menu__list ul { list-style: none; margin: 2px 0 8px; padding-left: 16px; border-left: 2px solid var(--nuvolab-border); } .nuvolab-category-menu__list ul li a { display: block; padding: 6px 8px; font-size: 0.88rem; color: color-mix(in srgb, var(--nuvolab-text) 78%, transparent); } .nuvolab-category-menu__list ul li a:hover { color: var(--nuvolab-primary-dark); } /* Versione mobile: accordion nativo
/ dentro il drawer del menu, nessun JS necessario per aprire/chiudere. */ .nuvolab-mobile-menu__categories { margin-bottom: 14px; border: 1px solid var(--nuvolab-border); border-radius: var(--nuvolab-radius); padding: 4px 14px; } .nuvolab-mobile-menu__categories summary { padding: 12px 2px; font-weight: 700; cursor: pointer; list-style: none; } .nuvolab-mobile-menu__categories summary::-webkit-details-marker { display: none; } .nuvolab-mobile-menu__categories summary::after { content: "\25BE"; float: right; transition: transform 0.2s ease; } .nuvolab-mobile-menu__categories[open] summary::after { transform: rotate(180deg); } .nuvolab-mobile-menu__categories .nuvolab-category-menu__list { padding-bottom: 10px; } /* ------------------------------------------------------------------------- Header ---------------------------------------------------------------------- */ .nuvolab-header { position: relative; z-index: 999; background: rgba(253, 251, 255, 0.9); backdrop-filter: blur(10px); border-bottom: 1px solid var(--nuvolab-border); } .nuvolab-header.is-sticky { position: sticky; top: 0; } .nuvolab-header__inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-block: 16px; } .nuvolab-header__inner--split { justify-content: space-between; } .nuvolab-header__logo img { max-height: 48px; width: auto; } .nuvolab-site-title { font-family: var(--nuvolab-font-heading); font-size: 1.4rem; font-weight: 800; background: linear-gradient(135deg, var(--nuvolab-primary-dark), var(--nuvolab-accent)); -webkit-background-clip: text; background-clip: text; color: transparent; } .nuvolab-header__nav { display: none; } .nuvolab-menu { display: flex; gap: 28px; list-style: none; margin: 0; padding: 0; } .nuvolab-menu a { position: relative; font-weight: 500; padding: 6px 0; } .nuvolab-menu a::after { content: ""; position: absolute; left: 0; bottom: 0; width: 0; height: 2px; background: var(--nuvolab-primary); transition: width var(--nuvolab-transition); } .nuvolab-menu a:hover::after, .nuvolab-menu .current-menu-item > a::after { width: 100%; } /* ------------------------------------------------------------------------- Mega-menu / dropdown desktop WordPress aggiunge automaticamente la classe "menu-item-has-children" e un