/* Theme Name: Woodmart Child — DUBBLEUP Theme URI: https://thedubbleup.com Description: Child theme di Woodmart per DUBBLEUP. Tipografia, sistema colore per fragranza, animazioni. Author: KAI Studio Template: woodmart Version: 1.3.0 Text Domain: woodmart-child */ /* ========================================================================== 0. VARIABILI ========================================================================== */ :root{ --du-ink:#1B1E20; --du-paper:#F4F3F0; --du-accent:#1B1E20; --du-accent-contrast:#fff; --du-display:"Outfit",-apple-system,"Segoe UI",sans-serif; --du-text:"Inter",-apple-system,"Segoe UI",sans-serif; } /* ========================================================================== 1. TIPOGRAFIA Woodmart impone Satoshi via opzioni tema con specificità alta: servono selettori altrettanto forti, non !important sparsi. ========================================================================== */ html body, html body p, html body li, html body td, html body span, html body input, html body textarea, html body select{ font-family:var(--du-text); -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; } html body h1, html body h2, html body h3, html body h4, html body .wd-entities-title, html body .product_title, html body .wd-el-title, html body .page-title{ font-family:var(--du-display); font-weight:800; letter-spacing:-.02em; } /* Interlinea: i maiuscoli accentati italiani (È, Ù, À) hanno bisogno di spazio sopra, altrimenti il segno viene tagliato. Mai sotto 1. */ html body h1, html body h2, html body .page-title{ line-height:1.02; } html body .wd-nav>li>a{ font-family:var(--du-display); font-weight:600; letter-spacing:.1em; text-transform:uppercase; font-size:12px; } html body .price, html body .amount{ font-family:var(--du-display); font-weight:600; } html body .button, html body .btn, html body .single_add_to_cart_button, html body .wd-buy-now-btn{ font-family:var(--du-display); font-weight:700; letter-spacing:.14em; text-transform:uppercase; font-size:12px; border-radius:0; padding:18px 40px; } /* Spigoli vivi: registro da maison, non da e-commerce generico */ .wd-product, .wd-product img, .woocommerce-product-gallery img, input, select, textarea, .wd-search-form input{ border-radius:0; } /* ========================================================================== 2. ANIMAZIONI Nota: gli elementi partono visibili. La classe .du-anim viene aggiunta da du.js appena parte, così se il JS non carica la pagina resta leggibile invece di restare invisibile. ========================================================================== */ .du-anim .du-reveal{ opacity:0; transform:translateY(24px); transition:opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1); } .du-anim .du-reveal.du-in{ opacity:1; transform:none; } .du-anim .du-reveal[data-delay="1"]{ transition-delay:.09s } .du-anim .du-reveal[data-delay="2"]{ transition-delay:.18s } .du-anim [data-du-split] .du-w{ display:inline-block; overflow:hidden; vertical-align:top; /* Con line-height sotto 1 il glifo sborda dalla riga e overflow:hidden lo taglia a metà. Padding + margine negativo allargano il riquadro di ritaglio senza toccare l'impaginazione. */ padding:.18em 0; margin:-.18em 0; } .du-anim [data-du-split] .du-w>span{ display:inline-block; transform:translateY(105%); transition:transform .9s cubic-bezier(.16,1,.3,1); } .du-anim [data-du-split].du-in .du-w>span{ transform:none; } @media (prefers-reduced-motion:reduce){ .du-anim .du-reveal{opacity:1!important;transform:none!important;transition:none!important} .du-anim [data-du-split] .du-w>span{transform:none!important} } /* Rail trascinabile */ .du-rail{ cursor:grab } .du-rail.du-drag{ cursor:grabbing; scroll-snap-type:none; user-select:none } .du-rail.du-drag img{ pointer-events:none } /* Header con ombra dopo lo scorrimento */ body.du-scrolled .whb-main-header{ box-shadow:0 1px 18px rgba(0,0,0,.07) } /* ========================================================================== 3. SCHEDA PRODOTTO — il colore della fragranza guida la pagina ========================================================================== */ .du-fragrance .single_add_to_cart_button, .du-fragrance .wd-buy-now-btn{ background-color:var(--du-accent); border-color:var(--du-accent); color:var(--du-accent-contrast); } .du-fragrance .single_add_to_cart_button:hover, .du-fragrance .wd-buy-now-btn:hover{ filter:brightness(.9) } .du-fragrance .wd-accordion-item.wd-active .wd-accordion-title, .du-fragrance .woocommerce-tabs .active a{ color:var(--du-accent) } .du-fragrance .woocommerce-product-gallery{ border-bottom:3px solid var(--du-accent); padding-bottom:12px; } html body .du-fragrance .product_title{ font-size:clamp(32px,4.6vw,54px); line-height:1.04 } .du-fragrance .shop_attributes th{ font-family:var(--du-display); font-weight:700; text-transform:uppercase; letter-spacing:.1em; font-size:11px; color:#6E7378; width:34%; } .du-fragrance .shop_attributes td{ font-size:15px; color:var(--du-ink) } .du-fragrance .shop_attributes tr{ border-bottom:1px solid rgba(0,0,0,.07) } /* ========================================================================== 4. CATALOGO ========================================================================== */ .du-mood-badge{ display:inline-block; font-family:var(--du-display); font-size:9px; font-weight:700; letter-spacing:.18em; text-transform:uppercase; padding:5px 10px; border-radius:0; margin-bottom:8px; } html body .wd-product .wd-entities-title{ letter-spacing:.05em; text-transform:uppercase } .wd-product .product-image-link img{ aspect-ratio:3/4; object-fit:cover } .wd-product img{ transition:transform .6s cubic-bezier(.2,.7,.3,1) } .wd-product:hover img{ transform:scale(1.035) } /* ========================================================================== 5. CORREZIONI A WOODMART ========================================================================== */ /* Woodmart impone min-height 42px a ogni