/* Noova Unified CSS - Preservazione Completa */ /* Mantiene JavaScript, classi multiple, strutture annidate */ /* Reset minimo */ *, *::before, *::after { box-sizing: border-box; } /* Quack element - per andare a capo nel sorting */ quack { display: block; margin-top: 2px; } :root { --primary: #0d6efd; --secondary: #6c757d; --color3: #0dcaf0; --color4: #198754; --white: white; --light: #f8f9fa; --dark: #212529; } /* Material Icons globale */ .material-icons { font-family: 'Material Icons'; font-weight: normal; font-style: normal; font-size: 24px; line-height: 1; letter-spacing: normal; text-transform: none; display: inline-block; white-space: nowrap; word-wrap: normal; direction: ltr; -webkit-font-smoothing: antialiased; } .material-icons.md-18 { font-size: 16px; } .lefty { text-align: left !important; } .boldy { font-weight: 700 !important; } .sectionb { font-family: 'Lato', sans-serif; } .sectionb span { font-weight: 700; } .quick { background-color: white; padding: 6px 8px 6px 8px; border-radius: 8px; position: absolute; bottom: 25px; height: 22px; left: 50%; transform: translateX(-50%); } .quickn { bottom: 14px; height: auto; } .material-icons.md-20 { font-size: 20px; } .material-icons.md-40 { font-size: 90px; color: #ffc9c9; } .material-icons.md-menu { font-size: 20px; } /* [1] div { text-transform: none !important; text-align: center !important; width: 100%; } /* Style ANY empty state div regardless of parent - target by content structure */ div:has(> .material-icons.md-40 + .mm_space_5 + .boldy) { text-transform: none !important; text-align: center !important; display: flex; flex-direction: column; align-items: center; width: 100%; } /* Alternative for browsers without :has() - target the parent of md-40 icons */ .material-icons.md-40 { display: block; text-align: center; } .material-icons.md-40 ~ .boldy { display: block; text-align: center !important; font-weight: 700 !important; font-family: 'Lato', sans-serif !important; } /* RIMOSSO - questa regola centrava erroneamente gli elementi nel carrello .material-icons.md-40 ~ .bb_section { text-align: center !important; display: block; } */ /* RIMOSSO - questa regola centrava TUTTO il primo div, non solo lo stato vuoto! .panel-shopping > div:first-child { text-transform: none !important; text-align: center !important; width: 100%; display: flex; flex-direction: column; } */ /* Applica stile SOLO allo stato vuoto del carrello */ .panel-shopping .empty-state-vertical { text-align: center !important; display: flex; flex-direction: column; align-items: center; } /* Force shopping panel content to match orders panel styling */ .panel-shopping { text-transform: none !important; } .panel-shopping > div { text-transform: none !important; } /* Wrapper for empty shopping bag to match orders styling */ .shopping-empty-wrapper { display: flex; flex-direction: column; align-items: center; text-align: center; width: 100%; padding: 20px; } .shopping-empty-wrapper > div { text-transform: none !important; text-align: center !important; width: 100%; } /* Ensure consistent styling for empty states in both orders and shopping */ .panel-shopping .material-icons.md-40, .panel-orders .material-icons.md-40 { font-size: 90px; color: #ffc9c9; } .panel-shopping .boldy, .panel-orders .boldy { font-weight: 700 !important; } /* RIMOSSO - questa regola centrava tutto in panel-shopping */ /* Fix styles for content inside orders panel */ .noova-el-155 .boldy { font-weight: 700 !important; font-family: 'Lato', sans-serif !important; font-size: 16px !important; display: block; text-align: center; } .noova-el-155 .noova-el-198 { display: block !important; text-align: center !important; margin: 0 auto !important; } .noova-el-155 .noova-el-668 { text-align: center !important; font-weight: 400 !important; } /* Wishlist cancel button style */ .wishlist-cancel-btn { position: absolute; top: 4px; right: 10px; margin: 0; padding: 0; background: none; border: none; font-family: 'Lato', sans-serif; font-size: 20px; font-weight: 300; line-height: 1.15; color: #444343; text-transform: none; cursor: pointer; overflow: visible; -webkit-appearance: button; border-style: none; box-sizing: border-box; opacity: 0; transition: opacity 0.3s ease; } /* Show on hover of parent item */ .item_View:hover .wishlist-cancel-btn { opacity: 1; } /* Mobile responsive styles for modal system */ @media (max-width: 768px) { /* In mobile mantieni sempre un margine dal bordo dello schermo */ #mm_menu { width: calc(100vw - 40px) !important; max-width: calc(100vw - 40px) !important; left: auto !important; right: 20px !important; height: calc(100vh - 40px) !important; top: 20px !important; bottom: 20px !important; margin: 0 !important; } /* Max-width per contenuti di Sign Up e Personal Details */ .panel-signup .noova-el-486, .panel-personal .noova-el-486 { max-width: 310px !important; margin: 0 auto !important; } /* Regole per schermi 320px */ @media (max-width: 320px) { /* PADDER A ZERO */ .padder { padding-left: 0 !important; padding-right: 0 !important; } /* TUTTI GLI ELEMENTI FLEX DIVENTANO VERTICALI */ [style*="display: flex"], [style*="display:flex"], .noova-el-175, .noova-el-50, .noova-el-57, .noova-el-68, .noova-el-75, .noova-el-88, .noova-el-94, .noova-el-101, .noova-el-106, .noova-el-121 { flex-direction: column !important; align-items: center !important; } /* CARRELLO - padding top per qty/size per evitare sovrapposizione con immagine */ .noova-el-175 { padding-top: 120px !important; } /* WISHLIST - forza griglia a una colonna */ .noova-el-231, .noova-el-236, #whishlist, .panel-wishlist .noova-el-231, .panel-wishlist .noova-el-236, .panel-wishlist #whishlist { display: grid !important; grid-template-columns: 1fr !important; justify-items: center !important; gap: 20px !important; } } } /* Subtle animation for all input fields */ input[type="text"], input[type="email"], input[type="password"], input[type="tel"], input[type="number"], input[type="search"], input[type="url"], input[type="date"], input[type="time"], input[type="datetime-local"], textarea, select { position: relative; transition: all 0.3s cubic-bezier(0.4, 0.0, 0.2, 1); background-image: linear-gradient(to right, transparent, transparent); background-size: 0% 100%; background-position: left center; background-repeat: no-repeat; } /* Remove default blue outline and add custom animation on focus */ input[type="text"]:focus, input[type="email"]:focus, input[type="password"]:focus, input[type="tel"]:focus, input[type="number"]:focus, input[type="search"]:focus, input[type="url"]:focus, input[type="date"]:focus, input[type="time"]:focus, input[type="datetime-local"]:focus, textarea:focus, select:focus { outline: none; box-shadow: none; background-image: linear-gradient(to right, rgba(255, 178, 178, 0.15), rgba(255, 178, 178, 0.05)); background-size: 100% 100%; animation: subtleSwipe 0.5s ease-out; } /* Subtle swipe animation */ @keyframes subtleSwipe { 0% { background-position: -100% center; background-size: 0% 100%; } 50% { background-position: 0% center; background-size: 100% 100%; } 100% { background-position: 0% center; background-size: 100% 100%; } } /* Specific styles for our modal inputs */ .noova-el-115:focus, .noova-el-488:focus, .noova-el-491:focus, .noova-el-508:focus, .noova-el-670:focus { background-color: #f8f8f8; background-image: linear-gradient(to right, rgba(255, 178, 178, 0.15), rgba(255, 178, 178, 0.05)); } /* Fix for inputs with transparent background */ input[style*="background: rgba(0,0,0,0.02)"]:focus { background: #f0f0f0 !important; background-image: linear-gradient(to right, rgba(255, 178, 178, 0.15), rgba(255, 178, 178, 0.05)) !important; } /* Center empty states vertically when they are dynamically positioned */ .content-panel .noova-el-155.mm-about:first-child:last-child { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 90%; max-width: 400px; } /* Force all content panels to have base font properties */ .content-panel { font-family: 'Lato', sans-serif !important; font-size: 14px !important; line-height: 1.2 !important; color: #000 !important; } /* Ensure specific elements maintain their sizes regardless of container */ .content-panel .noova-el-36 { font-size: 20px !important; } .content-panel .noova-el-40, .content-panel .tag6.ohhv { font-size: 16px !important; padding: 12px 24px !important; } .content-panel .noova-el-37 { color: #ffaeae !important; font-weight: 700 !important; } /* Ensure proper alignment for cart items */ .content-panel .bb_row.four-columns { display: flex !important; justify-content: space-between !important; align-items: center !important; } /* Force list items to not have bullets */ .content-panel li { list-style: none !important; } /* Empty state vertical centering */ .empty-state-vertical { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 40px 20px; width: 100%; box-sizing: border-box; } /* When empty state is the only child, expand to fill container */ .empty-state-vertical:only-child { position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: 0; } /* Ensure parent container allows vertical centering */ .noova-el-155.mm-about:has(.empty-state-vertical:only-child), .noova-el-666.mm-about:has(.empty-state-vertical:only-child), .noova-el-243.mm-about:has(.empty-state-vertical:only-child) { position: relative; height: 100%; min-height: 300px; } /* Fix for panel visibility during animation */ .panel-profile, .panel-signup, .panel-personal, .panel-payment, .panel-orders, .panel-wishlist, .panel-shopping, .panel-sizeguide { will-change: transform, opacity; backface-visibility: hidden; } /* Pannelli contenitori - minimo necessario */ .content-panel { overflow-y: auto; overflow-x: hidden; background-color: white; } /* Fix posizione per le modal spostate nei pannelli */ .content-panel .noova-el-31, .content-panel .noova-el-148, .content-panel .noova-el-225, .content-panel .noova-el-298, .content-panel .noova-el-479, .content-panel .noova-el-479b, .content-panel .noova-el-695 { /* sizeguide */ position: static !important; transform: none !important; } /* =================================================================== */ /* CLASSI INDIPENDENTI PER ELEMENTI CHE PERDONO STILE */ /* =================================================================== */ /* Classe per "Your Bag is currently empty" - stesso stile di Orders */ .bag-empty-title { /* Rimuovo font-size per mantenere quello della classe boldy originale */ font-weight: 700 !important; font-family: 'Lato', sans-serif !important; color: #000 !important; line-height: 1.2 !important; } /* Classe per testo sotto "Browse the collection..." */ .bag-empty-subtitle { font-size: 14px !important; line-height: 18px !important; font-family: 'Lato', sans-serif !important; color: #333 !important; text-align: center !important; font-weight: 400 !important; } /* Classe per nome prodotto nel carrello */ .cart-product-name { font-size: 18px !important; font-weight: 700 !important; font-family: 'Lato', sans-serif !important; color: #333 !important; text-align: left !important; line-height: 1 !important; } /* Classe per link Remove | Move to Wishlist */ .cart-product-actions { font-size: 16px !important; font-weight: 400 !important; font-family: 'Lato', sans-serif !important; color: #ffaeae !important; text-align: left !important; line-height: 1 !important; } /* Classe per label tipo "Estimated tax:" e "Grand Total" */ .cart-label-text { font-size: 16px !important; font-weight: 700 !important; font-family: 'Lato', sans-serif !important; color: #333 !important; text-align: left !important; line-height: 1 !important; } /* Classe per contenitore pulsante Buy Again in Orders */ .order-button-container { text-align: right !important; display: flex !important; justify-content: flex-end !important; } /* Classe per pulsante Buy Again */ .order-buy-again-btn { display: inline-block !important; margin-left: auto !important; margin-right: 0 !important; } /* Classe per "Your bag total is" - stile bottone */ .bag-total-button { background-color: white !important; border-radius: 20px !important; padding: 15px 25px !important; margin: 5px auto !important; display: inline-block !important; text-align: center !important; font-size: 16px !important; font-weight: 400 !important; font-family: 'Lato', sans-serif !important; color: #333 !important; line-height: 1.2 !important; width: auto !important; position: relative !important; } .bag-total-button .noova-el-37 { font-weight: 700 !important; color: #ffaeae !important; } /* Classe per "Free delivery and free returns" - font-size 14px */ /* RIMOSSO - extBtn non esiste più */ /* NON modificare bb_menu globalmente - rompe il sistema */ /* Classe per contenitore Checkout - allineato a destra */ /* RIMOSSO - non serve più dopo aver tolto il text-align: center */ /* =================================================================== */ /* CONTAINER QUERIES - Stili basati sulla larghezza del contenitore */ /* =================================================================== */ /* Definisci il contenitore principale come container */ /* Usa classi invece di container queries per evitare problemi */ /* La modalità pubblica può aggiungere classi come .narrow-mode, .medium-mode */ /* Stili responsive basati sulla larghezza del CONTENITORE, non dello schermo */ @container modal-container (max-width: 768px) { /* Padding ridotto per contenitori medi */ .padder { padding-left: 40px !important; padding-right: 40px !important; } /* Fix per input larghi */ .panel-profile .noova-el-486, .panel-signup .noova-el-486, .panel-personal .noova-el-486 { max-width: 90% !important; margin: 0 auto !important; } } @container modal-container (max-width: 500px) { /* Padding ulteriormente ridotto */ .padder { padding-left: 20px !important; padding-right: 20px !important; } } @container modal-container (max-width: 400px) { /* PADDER minimo per contenitori stretti */ .padder { padding-left: 10px !important; padding-right: 10px !important; } /* TUTTI GLI ELEMENTI FLEX DIVENTANO VERTICALI */ [style*="display: flex"], [style*="display:flex"], .noova-el-175, .noova-el-50, .noova-el-57, .noova-el-68, .noova-el-75, .noova-el-88, .noova-el-94, .noova-el-101, .noova-el-106, .noova-el-121 { flex-direction: column !important; align-items: center !important; } /* CARRELLO - padding top per qty/size */ .noova-el-175 { padding-top: 120px !important; } /* WISHLIST - griglia singola colonna */ .noova-el-231, .noova-el-236, #whishlist { display: grid !important; grid-template-columns: 1fr !important; justify-items: center !important; gap: 20px !important; } /* Font sizes ridotte per contenitori stretti */ .cart-product-name { font-size: 16px !important; } .cart-product-actions, .cart-label-text { font-size: 14px !important; } } /* Fallback per browser che non supportano container queries */ @supports not (container-type: size) { /* Mantieni le media queries esistenti come fallback */ } /* Progress Bars per Caratteristiche Scarpe */ .shoe-characteristics-container { padding: 20px 0; } .characteristic-item { margin-bottom: 15px; } .characteristic-item .bb_section { display: block; font-family: 'Lato', sans-serif; font-size: 14px; font-weight: 400; color: #333; margin-bottom: 8px; padding: 0; list-style: none; text-align: left; } .progress-bar-container { width: 100%; height: 6px; background-color: #f0f0f0; border-radius: 3px; overflow: hidden; position: relative; } .progress-bar-fill { height: 100%; background-color: #303d71; border-radius: 3px; width: 0%; transition: width 1.5s ease-out; position: relative; } /* Animazione al caricamento */ .progress-bar-fill.animate { animation: fillBar 0.8s ease-out forwards; } @keyframes fillBar { from { width: 0%; } } /* Modern Features List */ .modern-features-list { display: flex; flex-direction: column; gap: 15px; padding: 20px 0; } .modern-features-list a { display: none; /* Nasconde i vecchi link */ } .feature-item { display: flex; align-items: flex-start; gap: 15px; padding: 0; background-color: transparent !important; border-radius: 12px; margin-left: 0; } .feature-icon, .feature-iconb { flex-shrink: 0; width: 36px; height: 36px; background-color: #303d71; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-family: "Lato", sans-serif; font-size: 16px; font-weight: 700; color: #fff; margin: 0; padding: 0; } .feature-iconb { background-color: #c0c0c0; color: #ffffff; } .feature-icon .material-icons { color: #fff; font-size: 18px; } .feature-text { display: flex; flex-direction: column; gap: 2px; } .feature-title { font-family: "Lato", sans-serif; font-size: 14px; font-weight: 700; color: #333; line-height: 1.2; } .feature-desc { font-family: "Lato", sans-serif; font-size: 13px; font-weight: 400; color: #666; line-height: 1.4; } .noP { display: none; }