:root { --3dm-acc: #008080; } @import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400;1,600&display=swap'); /* 3DM Dark Fix v2 - Filter sidebar Apr 2026 */ #filterPage, .filter-bar { background-color: var(--3dm-bg-card) !important; color: var(--3dm-txt2) !important; border-right: 1px solid var(--3dm-border) !important; } #filterPage .form-check-input, .filter-bar .form-check-input { background-color: var(--3dm-bg2) !important; border-color: var(--3dm-border2) !important; } #filterPage .form-check-label, .filter-bar .form-check-label { color: var(--3dm-txt2) !important; } #filterPage h4,#filterPage h5,.filter-bar h4,.filter-bar h5 { color: var(--3dm-txt) !important; } #filterPage a,.filter-bar a { color: var(--3dm-txt2) !important; text-decoration: none !important; } #filterPage a:hover,.filter-bar a:hover { color: var(--3dm-acc) !important; } .risultatotestuale,#nresultato { color: var(--3dm-txt2) !important; } /* ── Font override — Cormorant Garamond per titoli ── */ h1,h2,h3,h4,h5,h6 { font-family: 'Cormorant Garamond', Georgia, serif !important; letter-spacing: .02em; } .category-title,.page-title,.product-name,.brand-name,.designer-name, #nresultato,.section-heading { font-family: 'Cormorant Garamond', Georgia, serif !important; } /* ── Fix link colors — override a!important troppo generico ── */ /* Nav links: bianco muted (NON accent cyan) */ .hdr-navlinks li a { color: rgb(238, 240, 242) !important; letter-spacing: .06em !important; } .hdr-navlinks li a:hover { color: #e8eaed !important; } /* Topbar: Support = muted, Log In = muted, Sign Up = accent */ .hdr-support { color: #8a9099 !important; } .hdr-login { color: #8a9099 !important; } .hdr-signup { color: #008080 !important; font-weight: 500 !important; } /* ── Header max-width: centra contenuto a 1360px su schermi larghi ── */ .hdr-topbar, .hdr-mainnav { padding-left: max(48px, calc((100vw - 1360px) / 2)) !important; padding-right: max(48px, calc((100vw - 1360px) / 2)) !important; } @media (max-width: 900px) { .hdr-topbar, .hdr-mainnav { padding-left: 20px !important; padding-right: 20px !important; } } /* ── Footer col headings: uppercase + tracking ── */ .ftr-col h5, .ftr-col h4 { font-family: Roboto, sans-serif !important; font-size: 11px !important; font-weight: 600 !important; text-transform: uppercase !important; letter-spacing: .12em !important; color: #e8eaed !important; margin-bottom: 16px !important; } /* Footer links */ .ftr-col a { font-size: 13px !important; color: #8a9099 !important; } .ftr-col a:hover { color: #008080 !important; } /* ============================================================ 3DM-FIX4: SHOP HEADER — alignment con homepage (17/04/2026) ============================================================ */ /* 1. Logo: 34px come homepage */ .hdr-logo-link img { height: 34px !important; width: auto !important; } /* 2. Nav link: padding, border-radius, font-weight come homepage */ .hdr-navlinks li a { display: block !important; padding: 7px 18px !important; border-radius: 100px !important; font-weight: 500 !important; font-size: 14px !important; color: rgb(238, 240, 242) !important; letter-spacing: normal !important; transition: color .15s, background .15s !important; white-space: nowrap !important; } .hdr-navlinks li a:hover { color: #e8eaed !important; background: rgba(255,255,255,.06) !important; } /* 3. Nav UL: gap stretto (2px) come homepage */ .hdr-navlinks { gap: 2px !important; } /* 4. Icon buttons: come homepage .mh-icon */ .hdr-icon { width: 40px !important; height: 40px !important; min-width: 40px !important; background: rgba(255,255,255,.04) !important; color: rgba(232,234,237,.75) !important; } .hdr-icon:hover { background: rgba(255,255,255,.08) !important; color: #e8eaed !important; } /* 5. View Plans: pill cyan piena (classe = hdr-btn-plans) */ a.hdr-btn-plans, a.hdr-plans { background: #008080 !important; color: #0a0b0d !important; font-weight: 600 !important; font-size: 13px !important; letter-spacing: .04em !important; padding: 9px 22px !important; height: auto !important; line-height: 1.4 !important; border-radius: 100px !important; } a.hdr-btn-plans:hover, a.hdr-plans:hover { background: #00b5b5 !important; color: #0a0b0d !important; } /* 6. Topbar links: font-weight */ a.hdr-support { font-weight: 500 !important; font-size: 12px !important; } a.hdr-login { font-weight: 500 !important; font-size: 12px !important; } a.hdr-signup { font-weight: 600 !important; font-size: 12px !important; } /* === 3DM-FIX4b: correzioni logo + line-height nav === */ /* Logo: classe corretta hdr-logo (non hdr-logo-link) */ .hdr-logo img { height: 34px !important; width: auto !important; } /* Nav link: line-height 1.5 per altezza 35px come homepage */ .hdr-navlinks li a { line-height: 1.5 !important; } /* ============================================================ 3DM-FIX4: SHOP HEADER — alignment con homepage (17/04/2026) ============================================================ */ /* 1. Logo: 34px come homepage */ .hdr-logo img { height: 34px !important; width: auto !important; } /* 2. Nav link: padding, border-radius, font-weight come homepage */ .hdr-navlinks li a { display: block !important; padding: 7px 18px !important; border-radius: 100px !important; font-weight: 500 !important; font-size: 14px !important; color: rgb(238, 240, 242) !important; letter-spacing: normal !important; transition: color .15s, background .15s !important; white-space: nowrap !important; } .hdr-navlinks li a:hover { color: #e8eaed !important; background: rgba(255,255,255,.06) !important; } /* 3. Nav UL: gap stretto (2px) come homepage */ .hdr-navlinks { gap: 2px !important; } /* 4. Icon buttons: come homepage .mh-icon */ .hdr-icon { width: 40px !important; height: 40px !important; min-width: 40px !important; background: rgba(255,255,255,.04) !important; color: rgba(232,234,237,.75) !important; } .hdr-icon:hover { background: rgba(255,255,255,.08) !important; color: #e8eaed !important; } /* 5. View Plans: pill cyan piena (classe = hdr-btn-plans) */ a.hdr-btn-plans, a.hdr-plans { background: #008080 !important; color: #0a0b0d !important; font-weight: 600 !important; font-size: 13px !important; letter-spacing: .04em !important; padding: 9px 22px !important; height: auto !important; line-height: 1.4 !important; border-radius: 100px !important; } a.hdr-btn-plans:hover, a.hdr-plans:hover { background: #00b5b5 !important; color: #0a0b0d !important; } /* 6. Topbar links: font-weight */ a.hdr-support { font-weight: 500 !important; font-size: 12px !important; } a.hdr-login { font-weight: 500 !important; font-size: 12px !important; } a.hdr-signup { font-weight: 600 !important; font-size: 12px !important; } /* === 3DM-FIX4b: correzioni logo + line-height nav === */ /* Logo: classe corretta hdr-logo (non hdr-logo-link) */ .hdr-logo img { height: 34px !important; width: auto !important; } /* Nav link: line-height 1.5 per altezza 35px come homepage */ .hdr-navlinks li a { line-height: 1.5 !important; } /* 3DM-FIX5: padding header allineato homepage (site-w: max-width 1360 + pl/pr 48) */ /* Viewport 1536px: (1536-1360)/2 + 48 = 136px uguale a homepage */ #header .hdr-topbar, #header .hdr-mainnav { padding-left: max(48px, calc((100vw - 1360px) / 2 + 48px)) !important; padding-right: max(48px, calc((100vw - 1360px) / 2 + 48px)) !important; } @media (max-width: 900px) { #header .hdr-topbar, #header .hdr-mainnav { padding-left: 20px !important; padding-right: 20px !important; } } /* ============================================================ B4c — Hover card zoom+ (variante A, desktop only) Potenzia il :hover esistente su .p3dm-card. Deploy 20 apr 2026. ============================================================ */ @media (hover: hover) and (pointer: fine) { .p3dm-card:hover > a:first-of-type img { transform: scale(1.12); transition: transform .5s cubic-bezier(.2,.8,.2,1) .05s; } } /* ===== SIDEBAR MODIFICATIONS — 22 apr 2026 ===== */ /* 1. Colors: quadratini colorati stile flat-row — testo + box colorato come altri filtri */ .cdd-trigger { display: none !important; } .cdd-menu { display: block !important; position: static !important; background: transparent !important; box-shadow: none !important; border: none !important; width: 100% !important; padding: 2px 0 !important; } .cdd-opt[data-val=""] { display: none !important; } .cdd-opt { display: grid !important; grid-template-columns: 1fr auto 16px !important; align-items: center !important; padding: 5px 0 !important; height: auto !important; border-radius: 0 !important; cursor: pointer !important; width: 100% !important; transition: none !important; } .cdd-opt:hover { transform: none !important; } .cdd-opt .sw { grid-column: 2 !important; grid-row: 1 !important; width: 16px !important; height: 16px !important; border-radius: 3px !important; background-color: var(--c) !important; display: block !important; } .cdd-opt .lbl { grid-column: 1 !important; grid-row: 1 !important; display: block !important; font-size: 13px !important; color: #96a3ad !important; font-family: 'Roboto', sans-serif !important; font-weight: 400 !important; line-height: 19.5px !important; } .cdd-opt:hover .lbl, .cdd-opt.selected .lbl { color: #eef0f2 !important; } .cdd-opt.selected .sw { box-shadow: 0 0 0 2px #008080 !important; } /* 2. Dimensions Apply button — match .hdr-btn-plans (25 apr 2026) */ #filterPage a.dim-apply, .filter-bar a.dim-apply { display: block !important; width: 100% !important; margin-top: 14px !important; padding: 10px 26px !important; background: linear-gradient(135deg, #008080 0%, #0099b0 100%) !important; border: none !important; border-radius: 100px !important; color: #ffffff !important; font-family: 'Roboto', sans-serif !important; font-size: 13.5px !important; font-weight: 600 !important; letter-spacing: normal !important; line-height: 13.5px !important; text-align: center !important; text-decoration: none !important; cursor: pointer !important; transition: filter 0.15s, transform 0.1s, box-shadow 0.15s !important; box-sizing: border-box !important; box-shadow: 0px 5px 10px -3px rgba(0,128,128,0.25) !important; } #filterPage a.dim-apply:hover, .filter-bar a.dim-apply:hover { color: #ffffff !important; opacity: 1 !important; transform: none !important; box-shadow: 0px 6px 14px -3px rgba(0,128,128,0.35) !important; } #filterPage a.dim-apply:active, .filter-bar a.dim-apply:active { transform: translateY(1px) !important; } /* 3+4. Categories: interlinea ridotta + checkbox allineato */ .cat-row { height: auto !important; min-height: 0 !important; padding: 7px 0 !important; line-height: 19.5px !important; align-items: center !important; grid-template-columns: 14px 1fr 0px 16px 18px !important; } /* 5. Colors: nascondo simplecolorpicker (cerchi) — solo flat-row visibile */ .cdd .simplecolorpicker { display: none !important; } /* SEARCHBAR-MIX A+B — 23apr2026 */ .pg-subrow > .pg-search .pg-search-btn, .pg-subrow > .pg-search button.pg-search-btn { width:36px !important; min-width:36px !important; max-width:36px !important; flex:0 0 36px !important; padding:0 !important; justify-content:center !important; } /* === SIDEBAR COMPACT + 2COL — 23 apr 2026 === */ /* Compatta intestazioni sezioni */ #filterPage .sec-head { padding-top: 8px !important; padding-bottom: 8px !important; } /* Compatta voci categoria */ #filterPage .cat-row { padding-top: 4px !important; padding-bottom: 4px !important; min-height: 28px !important; } /* Compatta voci flat */ #filterPage .flat-row { padding-top: 3px !important; padding-bottom: 3px !important; min-height: 26px !important; } /* 2 colonne: Materials, Format, Style, Ambients, Brands */ #MaterialeFiltri > ul, #FormatFiltro > ul, #StileFiltro > ul, #ProdottoAmbiente > ul, #BrandFiltro > ul { display: grid !important; grid-template-columns: 1fr 1fr !important; column-gap: 4px !important; } /* ===== HEADER OPZ-A — 23 apr 2026 ===== */ /* Riga 1: H1 sx | Breadcrumb dx — flex row con margini 48px */ .pg-header-block{padding:0 !important} .pg-header-block .pg-inner{ display:flex !important;flex-direction:row !important; justify-content:space-between !important;align-items:center !important; padding:12px 48px !important;max-width:none !important;margin:0 !important; } .pg-head-row{order:1 !important;margin:0 !important} .pg-crumb{order:2 !important;margin:0 !important} .pg-lead{display:none !important} /* Riga 2: searchbar full-width allineata ai margini */ .pg-subrow{max-width:none !important;margin:0 !important;padding:10px 48px !important} .pg-subrow>.pg-search{max-width:none !important;flex:1 1 0% !important} @media(max-width:900px){ .pg-header-block .pg-inner{ flex-direction:column !important;align-items:flex-start !important; gap:4px !important;padding:10px 20px !important; } .pg-crumb{order:1 !important} .pg-head-row{order:2 !important} .pg-subrow{padding:8px 20px !important} } /* ===== COLORS GRID v2 — 24 apr 2026 ===== */ .cg-grid { gap: 8px !important; padding: 10px 14px 8px !important; } .csw { border-radius: 3px !important; } .csw:hover { transform: scale(1.08) !important; } /* ===== COLORS GRID saturation — 24 apr 2026 ===== */ .csw { filter: saturate(0.75) brightness(0.98) !important; } /* TOGGLE-FONT-FIX (25 apr 2026 v3) — toggle label = stile sec-head (fw600, bianco, 15px) */ .sec-toggles .toggle-row .lbl { font-weight: 600 !important; color: #eef0f2 !important; font-size: 15px !important; letter-spacing: 0.3px !important; } /* ===== NURBS-ICON-BADGE - 25 apr 2026 ===== */ /* Override badge: da pill testo cyan a box frosted bianco */ span.p3dm-badge { padding: 2px 6px 2px 3px !important; border-radius: 5px !important; background: rgba(255,255,255,0.65) !important; border: 1px solid rgba(255,255,255,0.45) !important; box-shadow: 0 1px 5px rgba(0,0,0,0.22) !important; font-size: 8px !important; font-weight: 700 !important; letter-spacing: .1em !important; text-transform: uppercase !important; line-height: 1 !important; gap: 5px !important; display: flex !important; align-items: center !important; justify-content: center !important; color: #111111 !important; } span.p3dm-badge img { width: 18px !important; height: 18px !important; border-radius: 4px !important; display: block !important; flex-shrink: 0 !important; } /* Anti-flash: blocca transition:all su layout container (causa jump animato al caricamento CSS) */ #resultPage, #filterPage, .row, .pg-header-block, #header { transition: opacity 0.3s !important; } /* Layout Opzione B — padding zero #resultPage per allineamento margine destro griglia card (25 apr 2026) */ #resultPage { padding-left: 0 !important; padding-right: 0 !important; } /* ============================================================ BRAND DETAIL PAGE - brd-* (25 apr 2026) ============================================================ */ /* Force square images in p3dm-card */ .brd-products .p3dm-card > a { display: block !important; aspect-ratio: 1 / 1 !important; overflow: hidden !important; } .brd-products .p3dm-card > a img { width: 100% !important; height: 100% !important; object-fit: contain !important; padding: 2% !important; } /* Hero section */ .brd-hero { padding: 48px 48px 0; border-bottom: 1px solid rgba(255,255,255,0.08); } /* Breadcrumb */ .brd-breadcrumb { display: flex; align-items: center; gap: 8px; font-size: 11.5px; color: rgba(197,200,206,0.65); margin-bottom: 32px; letter-spacing: .08em; text-transform: uppercase; font-weight: 500; } .brd-breadcrumb a { color: rgba(197,200,206,0.65) !important; text-decoration: none !important; transition: color .15s; } .brd-breadcrumb a:hover { color: #008080 !important; } .brd-sep { opacity: .35; } /* Nome + count row */ .brd-hero-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; padding-bottom: 36px; } h1.brd-name { font-family: 'Cormorant Garamond', Georgia, serif !important; font-size: 76px !important; font-weight: 300 !important; letter-spacing: .05em !important; line-height: 1 !important; color: #eef0f2 !important; margin: 0 !important; } /* Count pill */ .brd-count-pill { display: inline-flex; align-items: center; gap: 7px; background: rgba(0,128,128,0.07); border: 1px solid rgba(0,128,128,0.18); border-radius: 100px; padding: 7px 16px; font-size: 12px; font-weight: 600; color: #008080; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; margin-bottom: 8px; } .brd-dot { width: 6px; height: 6px; background: #008080; border-radius: 50%; flex-shrink: 0; } /* Descrizione */ .brd-desc-row { padding: 28px 0 40px; border-top: 1px solid rgba(255,255,255,0.08); } .brd-desc-text { font-size: 14.5px; line-height: 1.78; color: rgba(197,200,206,0.78); font-weight: 300; max-width: 800px; margin: 0; } /* Products section */ .brd-products { padding: 40px 48px 80px; } /* === BRANDS LISTING PAGE === */ .brl-hero { padding:48px 48px 0; border-bottom:1px solid rgba(255,255,255,0.08); } h1.brl-title { font-family:'Cormorant Garamond',Georgia,serif!important; font-size:76px!important; font-weight:300!important; letter-spacing:.05em!important; line-height:1!important; color:#eef0f2!important; margin:0!important; } .brl-grid-wrap { padding:40px 48px 80px; } .brl-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:20px; } .brl-card { display:flex; flex-direction:column; background:rgba(255,255,255,0.03); border:1px solid rgba(255,255,255,0.07); border-radius:12px; overflow:hidden; text-decoration:none!important; transition:border-color .2s,transform .25s; } .brl-card:hover { border-color:rgba(0,128,128,0.4); transform:translateY(-3px); } .brl-card-logo { background:rgba(255,255,255,0.97); display:flex; align-items:center; justify-content:center; aspect-ratio:1/1; padding:18%; } .brl-card-logo img { width:100%; height:100%; object-fit:contain; } .brl-card-name { padding:13px 16px; font-size:12px; font-weight:600; color:#eef0f2!important; letter-spacing:.08em; text-align:center; text-transform:uppercase; border-top:1px solid rgba(255,255,255,0.07); } /* === BRANDS LISTING — fixes 25 apr === */ .brl-card-logo { padding:5% !important; } .brl-card-footer { display:flex; flex-direction:column; padding:11px 14px; border-top:1px solid rgba(255,255,255,0.07); gap:3px; } .brl-card-name { font-size:10.5px !important; font-weight:600; color:#eef0f2 !important; letter-spacing:.08em; text-transform:uppercase; text-align:center; padding:0 !important; border-top:none !important; } .brl-card-desc { font-size:10px; color:rgba(197,200,206,0.55); letter-spacing:.04em; text-align:center; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; } /* Pill link — brand detail page */ a.brd-count-pill { text-decoration:none !important; cursor:pointer; } a.brd-count-pill:hover { background:rgba(0,128,128,0.14) !important; border-color:rgba(0,128,128,0.4) !important; } /* === BRAND DETAIL — compact desc + no image padding === */ .brd-desc-row { padding:14px 0 22px !important; } .brd-desc-text { font-size:13px !important; line-height:1.6 !important; } .brd-products .p3dm-card > a img { padding:0 !important; } /* === CARD spacing + desc clamp === */ .p3dm-name { margin-bottom:3px !important; line-height:1.3 !important; } .p3dm-designer { margin-top:0 !important; font-size:11px; line-height:1.3; } .brd-desc-text { font-size:12.5px !important; line-height:1.5 !important; display:-webkit-box !important; -webkit-line-clamp:3 !important; -webkit-box-orient:vertical !important; overflow:hidden !important; } /* === DESC max-height clamp (nested p tags break line-clamp) === */ .brd-desc-row { max-height:72px !important; overflow:hidden !important; } /* === DESC — full text, font ridotto === */ .brd-desc-row { max-height:none !important; overflow:visible !important; } .brd-desc-text, .brd-desc-row p, .brd-desc-row * { font-size:11.5px !important; line-height:1.55 !important; color:rgba(197,200,206,0.72) !important; } /* === ICON HOVER UNIFICATION — stesso effetto .hdr-icon ovunque (25 apr 2026) === */ /* Rimuove hover cyan sulle action icon — neutro bianco/grigio come header */ .p3dm-heart:hover { background: rgba(255,255,255,.10) !important; border-color: rgba(255,255,255,.28) !important; color: #e8eaed !important; transform: none !important; } .p3dm-download:hover { background: rgba(255,255,255,.10) !important; border-color: rgba(255,255,255,.28) !important; color: #e8eaed !important; transform: none !important; } /* Product page wishlist — allineato a hdr-icon */ .pp-wish-btn:hover { border-color: rgba(255,255,255,.28) !important; background: rgba(255,255,255,.08) !important; color: #e8eaed !important; transform: none !important; box-shadow: none !important; } .pp-wish-btn.saved:hover { border-color: rgba(255,255,255,.28) !important; color: #e8eaed !important; box-shadow: none !important; } /* === DESIGNER NAME — piu' visibile sulle card === */ .p3dm-designer { color: rgba(197,200,206,0.82) !important; font-size: 12px !important; } /* === DESC BRAND — font via di mezzo 13px === */ .brd-desc-text, .brd-desc-row p, .brd-desc-row * { font-size:13px !important; line-height:1.6 !important; } /* === FONT-WEIGHT FIX — desc 300->400, designer 200->400 (25 apr 2026) === */ .brd-desc-text, .brd-desc-row p, .brd-desc-row * { font-weight: 400 !important; } .p3dm-designer { font-weight: 400 !important; } /* === FONT-SIZE +1pt — desc 13->14px, designer 12->13px (25 apr 2026) === */ .brd-desc-text, .brd-desc-row p, .brd-desc-row * { font-size: 14px !important; } .p3dm-designer { font-size: 13px !important; } /* === P3DM-HEART/DOWNLOAD — allineamento COMPLETO a .hdr-icon (25 apr 2026) === */ /* Stato normale: bg/color/border/transition identici a .hdr-icon */ .p3dm-heart, .p3dm-download { background: rgba(255,255,255,.04) !important; color: rgba(232,234,237,.75) !important; border: 0.8px solid rgba(255,255,255,.08) !important; transition: border-color 0.2s, color 0.2s !important; } /* Hover: identico a .hdr-icon — solo bg e color, border invariato */ .p3dm-heart:hover, .p3dm-download:hover { background: rgba(255,255,255,.08) !important; border-color: rgba(255,255,255,.08) !important; color: rgb(232,234,237) !important; transform: none !important; } /* Active (salvato in wishlist) */ .p3dm-heart.active { background: rgba(255,255,255,.06) !important; border-color: rgba(255,255,255,.12) !important; color: rgb(232,234,237) !important; } /* === CARD ICONS — allineamento DEFINITIVO a .hdr-icon (25 apr 2026) === */ /* Il vero hover di .hdr-icon e' color:var(--3dm-acc) + border->currentColor (cyan) */ /* Stato normale: colore muted, border sottile identico a hdr-icon */ .p3dm-heart, .p3dm-download { background: rgba(255,255,255,.04) !important; color: var(--3dm-muted) !important; border: 0.8px solid var(--3dm-border) !important; transition: border-color 0.2s, color 0.2s !important; } /* Hover: cyan esatto — color + border-color come .hdr-icon */ .p3dm-heart:hover, .p3dm-download:hover { color: var(--3dm-acc) !important; border-color: var(--3dm-acc) !important; background: rgba(255,255,255,.08) !important; transform: none !important; } /* Active (wishlist salvata) */ .p3dm-heart.active { color: var(--3dm-acc) !important; border-color: var(--3dm-acc) !important; background: rgba(255,255,255,.04) !important; } /* === CARD ICONS — icone bianche + dimensione 16px come hdr-icon (25 apr 2026) === */ /* Colore icona: bianco rgba(232,234,237,.75) — identico a hdr-icon normal state */ /* Su hover diventa cyan via border-color+color regole precedenti */ .p3dm-heart, .p3dm-download { color: rgba(232,234,237,.75) !important; } /* SVG interno: 16px (hdr-icon usa 18px inline) — leggermente piu' spesso */ .p3dm-heart svg, .p3dm-download svg { width: 16px !important; height: 16px !important; flex-shrink: 0 !important; } /* === BRANDS LISTING — fix-apr25-v2: no-desc, compact footer === */ .brl-card-footer { padding:6px 10px !important; gap:0 !important; } .brl-card-desc { display:none !important; } /* === BRANDS LISTING — fix-apr25-v3: no logo padding === */ .brl-card-logo { padding:0 !important; } /* === BRANDS LISTING — fix-apr25-v4: img cover to edges === */ .brl-card-logo img { object-fit:cover !important; } .brl-card-logo { background:#0d0d0d !important; } /* === BRANDS LISTING — fix-apr25-v5: scale img to hide embedded border === */ .brl-card-logo img { transform:scale(1.05) !important; } /* === BRANDS LISTING — fix-apr25-v6: more scale + overflow hidden === */ .brl-card-logo { overflow:hidden !important; } .brl-card-logo img { transform:scale(1.12) !important; } /* === BRANDS LISTING — fix-apr25-v7: scale solo img 3DM === */ .brl-card-logo { overflow:hidden !important; } .brl-card-logo img { transform:none !important; } .brl-card-logo img[src*="2744"] { transform:scale(1.12) !important; } /* === BRANDS LISTING — fix-apr25-v8: less scale + card bg black === */ .brl-card { background:#0d0d0d !important; } .brl-card-logo { overflow:hidden !important; } .brl-card-logo img { transform:none !important; } .brl-card-logo img[src*="2744"] { transform:scale(1.05) !important; } /* === BRANDS LISTING — test font Flare sul titolo === */ .brl-title { font-family: "Flare", "Cormorant Garamond", serif !important; } /* === BRANDS — test font Flare titolo === */ .brl-title { font-family: "Flare", "Cormorant Garamond", serif !important; } /* === DESIGNERS LISTING === */ .dsg-listing { background: #0e1014; } .dsg-hero { padding: 48px 48px 0; border-bottom: 1px solid rgba(255,255,255,0.08); } .dsg-hero-title { font-family: 'Cormorant Garamond', Georgia, serif !important; font-size: 76px !important; font-weight: 300 !important; letter-spacing: .05em !important; line-height: 1 !important; color: #eef0f2 !important; margin: 0 !important; } .dsg-grid { padding: 40px 48px 80px; display: grid; grid-template-columns: repeat(6, 1fr); gap: 20px; } .dsg-card { display: flex; flex-direction: column; background: #0e1014; border: 1px solid rgba(255,255,255,0.07); border-radius: 12px; overflow: hidden; text-decoration: none !important; transition: border-color .2s, transform .25s; } .dsg-card:hover { border-color: rgba(0,128,128,0.4); transform: translateY(-3px); } .dsg-card-img { background: rgba(255,255,255,0.97); overflow: hidden; display: flex; align-items: center; justify-content: center; aspect-ratio: 1/1; } .dsg-card-img img { width: 100%; height: 100%; object-fit: contain; padding: 5%; } .dsg-card-name { padding: 10px 14px; font-size: 10.5px; font-weight: 600; color: #eef0f2 !important; letter-spacing: .08em; text-transform: uppercase; text-align: center; border-top: 1px solid rgba(255,255,255,0.07); } /* === DESIGNER DETAIL — portrait quadrata sx del nome (25 apr 2026) === */ .dsg-hero-left { display:flex; align-items:flex-end; gap:20px; } .dsg-portrait { width:80px; height:80px; object-fit:cover; border-radius:8px; flex-shrink:0; margin-bottom:10px; } /* === CARD HOVER UNIFICATION — 26 apr 2026 === Rimuove translateY da TUTTE le card (allineato a hdr-icon: no lift) Uniforma effetto hover: border cyan + subtle glow + img zoom (desktop only) ================================================ */ /* p3dm-card: override translateY(-6px) da style.css */ .p3dm-card:hover { transform: none !important; } @media (hover: hover) and (pointer: fine) { .p3dm-card:hover > a:first-of-type img, .p3dm-card:hover a.p3dm-img-wrap img { transform: scale(1.08) !important; transition: transform .5s cubic-bezier(.2,.8,.2,1) .05s !important; } } /* brl-card: no lift + subtle glow + img zoom */ .brl-card:hover { border-color: rgba(0,128,128,0.4) !important; transform: none !important; box-shadow: 0 0 0 1px rgba(0,128,128,0.12), 0 8px 24px rgba(0,0,0,0.32) !important; } @media (hover: hover) and (pointer: fine) { .brl-card:hover .brl-card-logo img { transform: scale(1.07) !important; transition: transform .5s cubic-bezier(.2,.8,.2,1) .05s !important; } } /* dsg-card: no lift + subtle glow + img zoom */ .dsg-card:hover { border-color: rgba(0,128,128,0.4) !important; transform: none !important; box-shadow: 0 0 0 1px rgba(0,128,128,0.12), 0 8px 24px rgba(0,0,0,0.32) !important; } @media (hover: hover) and (pointer: fine) { .dsg-card:hover .dsg-card-img img { transform: scale(1.07) !important; transition: transform .5s cubic-bezier(.2,.8,.2,1) .05s !important; } } /* === ICON HOVER FINAL FIX — 26 apr 2026 === FONTE VERITÀ: .hdr-icon:hover { bg rgba(255,255,255,.08), color: #e8eaed, NO border change } PROBLEMA PRECEDENTE: 4 round di iterazioni avevano lasciato hover CYAN (sbagliato). Il commento "cyan come hdr-icon" era errato — hdr-icon va BIANCO, non cyan. Questa regola sovrascrive definitivamente TUTTE le precedenti versioni. ================================================ */ /* Stato normale — identico a hdr-icon */ .p3dm-heart, .p3dm-download { background: rgba(255,255,255,.04) !important; color: rgba(232,234,237,.75) !important; border: 0.8px solid rgba(255,255,255,.08) !important; transition: background .15s, color .15s, border-color .15s !important; transform: none !important; } /* Hover — BIANCO come hdr-icon, NO cyan */ .p3dm-heart:hover, .p3dm-download:hover { background: rgba(255,255,255,.08) !important; color: #e8eaed !important; border-color: rgba(255,255,255,.15) !important; transform: none !important; } /* Active (wishlist salvata) — accent cyan solo sullo stato attivo permanente */ .p3dm-heart.active, .p3dm-heart.active:hover { color: var(--3dm-acc) !important; border-color: rgba(0,128,128,.3) !important; background: rgba(0,128,128,.06) !important; } /* SVG size uniforme */ .p3dm-heart svg, .p3dm-download svg { width: 16px !important; height: 16px !important; flex-shrink: 0 !important; } /* Product page wishlist — stessa logica */ .pp-wish-btn { transition: background .15s, color .15s, border-color .15s !important; } .pp-wish-btn:hover { background: rgba(255,255,255,.08) !important; color: #e8eaed !important; border-color: rgba(255,255,255,.15) !important; transform: none !important; box-shadow: none !important; } .pp-wish-btn.saved { color: var(--3dm-acc) !important; border-color: rgba(0,128,128,.3) !important; background: rgba(0,128,128,.06) !important; } .pp-wish-btn.saved:hover { background: rgba(0,128,128,.1) !important; color: var(--3dm-acc) !important; border-color: rgba(0,128,128,.4) !important; } /* === ICON HOVER FINAL FIX v2 — 26 apr 2026 === FONTE VERITA CONFERMATA DA MARIO: - SVG (icona interna) -> BIANCO (#e8eaed) su hover - Cerchio esterno (border) -> CYAN rgba(0,128,128,.4) su hover - Background -> leggerissimo cyan rgba(0,128,128,.05) su hover ================================================ */ /* Stato normale */ .p3dm-heart, .p3dm-download { background: rgba(255,255,255,.04) !important; color: rgba(232,234,237,.75) !important; border: 0.8px solid rgba(255,255,255,.08) !important; transition: background .15s, color .15s, border-color .15s !important; transform: none !important; } /* Hover — icona bianca + ring cyan */ .p3dm-heart:hover, .p3dm-download:hover { background: rgba(0,128,128,.05) !important; color: #e8eaed !important; border-color: rgba(0,128,128,.4) !important; transform: none !important; } /* Active (wishlist salvata) — cyan pieno */ .p3dm-heart.active, .p3dm-heart.active:hover { color: var(--3dm-acc) !important; border-color: rgba(0,128,128,.3) !important; background: rgba(0,128,128,.06) !important; } /* SVG size uniforme */ .p3dm-heart svg, .p3dm-download svg { width: 16px !important; height: 16px !important; flex-shrink: 0 !important; } /* Product page wishlist — stessa logica */ .pp-wish-btn { transition: background .15s, color .15s, border-color .15s !important; } .pp-wish-btn:hover { background: rgba(0,128,128,.05) !important; color: #e8eaed !important; border-color: rgba(0,128,128,.4) !important; transform: none !important; box-shadow: none !important; } .pp-wish-btn.saved { color: var(--3dm-acc) !important; border-color: rgba(0,128,128,.3) !important; background: rgba(0,128,128,.06) !important; } .pp-wish-btn.saved:hover { background: rgba(0,128,128,.1) !important; color: var(--3dm-acc) !important; border-color: rgba(0,128,128,.4) !important; } /* === CARD ICONS UNIFORM — match prodotti.page.php inline style — 27 apr 2026 === */ .p3dm-actions .p3dm-heart:not(.active), .p3dm-actions .p3dm-download { opacity: 1 !important; color: rgba(200, 215, 225, 0.85) !important; } .p3dm-actions .p3dm-heart:not(.active) svg, .p3dm-actions .p3dm-download svg { opacity: 1 !important; stroke-width: 0 !important; } .p3dm-actions .p3dm-heart:not(.active) svg path, .p3dm-actions .p3dm-download svg path { fill: currentColor !important; } .p3dm-actions .p3dm-heart:hover:not(.active), .p3dm-actions .p3dm-download:hover { background: rgba(0, 128, 128, 0.08) !important; border-color: rgba(0, 128, 128, 0.45) !important; color: #ffffff !important; transform: none !important; } .p3dm-actions .p3dm-heart:hover:not(.active) svg, .p3dm-actions .p3dm-download:hover svg, .p3dm-actions .p3dm-heart:hover:not(.active) svg path, .p3dm-actions .p3dm-download:hover svg path { fill: #ffffff !important; color: #ffffff !important; } /* ======================================== ACCESSIBILITY FIX — WCAG AA (27 apr 2026, sess. 16) Audit completo: tutte le pagine live. ======================================== */ /* 1. CTA buttons su sfondo cyan: testo SCURO obbligatorio. style.css forza color:white !important su a.full/.no-underline — questa regola carica DOPO e lo sovrascrive con specificità uguale. */ a.btn-addToCart, a.btn-addToDownload { color: #0a0b0d !important; } /* 2. openmodaldownload CTA (pagina prodotto): testo scuro su sfondo teal */ a.openmodaldownload, button.openmodaldownload { color: #0a0b0d !important; } /* 3. NURBS badge: 8px → 11px (minimo leggibilità) */ span.p3dm-badge { /* eccezione: badge-icona sulle card, non testo body — esenzione WCAG confermata sess. 20 */ font-size: 8px !important; } /* 4. Related product format chips: 8px → 10px */ .pp-rel-fmt { font-size: 11px !important; } /* 5. Product page format chips + section labels: 10px → 11px */ .pp-fmt-chip { font-size: 11px !important; } .pp-sec-label { font-size: 11px !important; } /* 6. Footer column headings: 11px → 12px */ .ftr-col h5, .ftr-col h4 { font-size: 12px !important; } /* A11y fix: .openmodaldownload is a DIV — selector needs div tag too (27 apr 2026) */ .pp-cta-btn.openmodaldownload { color: #ffffff !important; /* testo bianco su teal — regola definitiva sess. 20 */ background: var(--3dm-acc) !important; /* forza #008080, sovrascrive #46c8ca di style.css */ } /* A11y fix: footer column headings below 11px min — #footer h4 = 10.5px (27 apr 2026) */ #footer h4, #footer h5 { font-size: 12px !important; } /* A11y fix: footer column headings — .ft3-col structure override (27 apr 2026) */ .ft3-col h4, .ft3-col h5, #footer .ft3-col h4, #footer .ft3-col h5 { font-size: 12px !important; } /* A11y fix: carrello table th — cyan bg needs dark text (27 apr 2026) */ #carrelloContainer table th, #carrelloContainer .table th { color: #0a0b0d !important; } /* === SIGNIN MODAL BTN FIX — ver 27042026l === */ /* Bottone "Sign in" nel modal login: testo scuro su sfondo cyan (WCAG AA 14.2:1) */ a[style*="background:#008080"] { color: #0a0b0d !important; } /* ── Global font-weight fix (28 apr 2026) ── style.css imposta body{font-weight:200} + vari elementi a 200/100. Override globale: testo leggibile a 400 su tutto il sito. Esclusi: h1/h2/h3/h4/h5/h6 e classi con peso intenzionalmente light (Cormorant headings usano inline style quindi non sono impattati). */ body, p, span, li, a, td, th, nav, label, small, .hdr-topbar, .hdr-topbar a, .hdr-navlinks li a, .pg-lead, .pg-header-block, .breadcrumb, .breadcrumb-item, .filter-bar, #filterPage, .ft3-col, .ft3-col ul li, .ft3-col ul a, .ft3-copy, .ft3-links a { font-weight: 400 !important; } /* ── Ghost Button — hover teal border (come icone header) ── */ /* Classe utility per bottoni trasparenti con bordo bianco semi-trasparente */ .btn-ghost-3dm { display: inline-block; background: transparent; color: #ffffff; border: 1px solid rgba(255,255,255,0.28); border-radius: 50px; padding: 13px 40px; font-size: 14px; font-weight: 500; text-decoration: none; font-family: 'Inter', sans-serif; letter-spacing: 0.2px; transition: background .2s, border-color .2s, color .2s; cursor: pointer; } .btn-ghost-3dm:hover { background: rgba(0,128,128,0.06); border-color: rgba(0,128,128,0.6); color: #ffffff; } /* Versione small (stessa altezza degli hdr-icon) */ .btn-ghost-3dm.sm { padding: 8px 22px; font-size: 13px; } /* ── Piani/Prezzi — CTA solido su teal: testo scuro (WCAG AA 6.2:1) ── */ a.pp-cta-solid { color: #ffffff !important; } /* === Cart logged-out · Sign-in bullets (28 apr 2026 sess. 24) === */ .signin-bullets { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 28px 0 0; text-align: left; } .signin-bullets .b { padding: 12px 14px; background: rgba(255,255,255,.025); border: 1px solid rgba(255,255,255,.08); border-radius: 12px; display: flex; gap: 10px; align-items: flex-start; } .signin-bullets .b svg { width: 18px; height: 18px; color: var(--3dm-acc, #008080); flex-shrink: 0; margin-top: 1px; } .signin-bullets .b > div .t { font-size: 13px; color: #e8eaed; font-weight: 600; margin-bottom: 2px; } .signin-bullets .b > div .d { font-size: 12px; color: #8a9099; line-height: 1.4; } @media (max-width: 768px) { .signin-bullets { grid-template-columns: 1fr; } } /* === Cart 2-col grid + cross-sell (28 apr 2026 sess. 24) === */ .cart-grid { display: grid; grid-template-columns: 1fr 360px; gap: 28px; align-items: flex-start; } .cart-summary-sticky { /* inline styles already set position:sticky and look */ } @media (max-width: 1024px) { .cart-grid { grid-template-columns: 1fr; } .cart-summary-sticky { position: static !important; } } /* Cross-sell sections (logged-out + logged-in empty) */ .cart-crosssell { margin-top: 56px; padding-top: 32px; border-top: 1px solid rgba(255,255,255,0.05); } .cart-crosssell h3 { font-family: 'Cormorant Garamond', serif; font-size: 26px; font-weight: 300; color: #e8eaed; margin: 0 0 6px; text-align: center; } .cart-crosssell p.sub { font-size: 13px; color: #8a9099; text-align: center; margin: 0 0 24px; font-family: 'Inter', sans-serif; } .cart-crosssell-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; max-width: 1100px; margin: 0 auto; } .cart-crosssell .cs-card { display: flex; align-items: center; gap: 14px; padding: 16px 18px; background: rgba(255,255,255,0.025); border: 1px solid rgba(255,255,255,0.07); border-radius: 14px; text-decoration: none !important; color: #e8eaed !important; transition: all 0.2s; font-family: 'Inter', sans-serif; } .cart-crosssell .cs-card:hover { background: rgba(0,128,128,0.06); border-color: rgba(0,128,128,0.4); transform: translateY(-2px); } .cart-crosssell .cs-icon { width: 38px; height: 38px; border-radius: 10px; background: rgba(0,128,128,0.08); border: 1px solid rgba(0,128,128,0.2); display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: #008080; } .cart-crosssell .cs-icon svg { width: 20px; height: 20px; } .cart-crosssell .cs-meta { min-width: 0; } .cart-crosssell .cs-title { font-size: 14px; font-weight: 600; color: #e8eaed; margin-bottom: 2px; letter-spacing: 0.2px; } .cart-crosssell .cs-sub { font-size: 11px; color: #8a9099; letter-spacing: 0.2px; } @media (max-width: 480px) { .cart-crosssell h3 { font-size: 22px; } .cart-crosssell-grid { grid-template-columns: 1fr; } } /* === Cart thead fix (28 apr 2026 sess.25g) === */ /* Override regola obsoleta sess.16b che forzava colore nero pensando al bg cyan. Il thead ora ha bg scuro rgba(255,255,255,0.07), quindi serve testo bianco caldo. */ #carrelloContainer table thead th { color: #e8eaed !important; font-weight: 700 !important; letter-spacing: 1.2px !important; } #carrelloContainer table tfoot td span, #carrelloContainer table tfoot td { color: #e8eaed !important; } /* ============================================================ */ /* MODAL DOWNLOAD/PACK SELECTION (M1) — 28 apr 2026 */ /* Backend: ajax/prodotto.php · Trigger: .openmodaldownload */ /* ============================================================ */ /* Override Slampdesk modal-dialog width (era 80% inline) */ .modal.popup .modal-dialog:has(.pack-modal-wrap) { max-width: 560px !important; margin: 4vh auto !important; } .modal.popup .modal-dialog:has(.pack-modal-wrap.w-multi) { max-width: 880px !important; } /* Override Slampdesk modal-content bg (era #1a1c21) */ .modal .modal-content:has(.pack-modal-wrap) { background: #0a0b0d !important; border: 1px solid rgba(255,255,255,.08) !important; border-radius: 18px !important; overflow: hidden; box-shadow: 0 24px 80px rgba(0,0,0,.6); } .modal.popup .modal-content:has(.pack-modal-wrap) .modal-header, .modal.popup .modal-content:has(.pack-modal-wrap) .modal-body, .modal.popup .modal-content:has(.pack-modal-wrap) .modal-footer { padding: 0 !important; border: 0 !important; } /* Hide elementi modale legacy che non usiamo più */ .modal.popup .modal-content:has(.pack-modal-wrap) .modal-header .close, .modal.popup .modal-content:has(.pack-modal-wrap) .modal-header > .modal-title, .modal.popup .modal-content:has(.pack-modal-wrap) .modal-footer button[data-dismiss], .modal.popup .modal-content:has(.pack-modal-wrap) .bg-blue.check-formato { display: none !important; } /* Header modale */ .pack-modal-wrap { color: #e8eaed; font-family: Inter, system-ui, sans-serif; } .pack-modal-head { padding: 28px 32px 20px; border-bottom: 1px solid rgba(255,255,255,.08); position: relative; } .pack-modal-eyebrow { font-size: 11px; text-transform: uppercase; letter-spacing: 1.5px; color: #008080; font-weight: 600; margin-bottom: 6px; } .pack-modal-title { font-family: "Cormorant Garamond", Georgia, serif; font-size: 26px; line-height: 1.2; font-weight: 400; color: #e8eaed; margin: 0; } /* Body + grid */ .pack-modal-body { padding: 24px 32px; } .pack-grid { display: grid; gap: 16px; } .pack-grid.cols-1 { grid-template-columns: 1fr; } .pack-grid.cols-2 { grid-template-columns: 1fr 1fr; } /* Pack card (override .box-formato) */ .modal.popup .pack-card.box-formato { background: rgba(255,255,255,.025) !important; border: 1px solid rgba(255,255,255,.08) !important; border-radius: 12px !important; padding: 20px !important; margin: 0 !important; cursor: pointer; position: relative; transition: all .2s; } .modal.popup .pack-card.box-formato:hover { background: rgba(255,255,255,.04) !important; border-color: rgba(255,255,255,.16) !important; } .modal.popup .pack-card.box-formato.selected, .modal.popup .pack-card.box-formato.attivo { border: 2px solid #008080 !important; background: rgba(0,128,128,.05) !important; padding: 19px !important; } .modal.popup .pack-card.box-formato.selected::after, .modal.popup .pack-card.box-formato.attivo::after { content: ""; position: absolute; top: 14px; right: 14px; width: 22px; height: 22px; background: #008080 url("data:image/svg+xml;utf8,") center/14px no-repeat; border-radius: 50%; } .pack-card-title { font-size: 16px; font-weight: 600; color: #e8eaed; margin-bottom: 12px; padding-right: 28px; line-height: 1.3; } .pack-formats { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; } .pack-fmt-chip { padding: 4px 10px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.08); border-radius: 4px; font-size: 11px; font-weight: 500; color: #c5c8ce; letter-spacing: .5px; } .pack-pricing { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; padding-top: 14px; border-top: 1px solid rgba(255,255,255,.08); } .pack-price { color: #e8eaed; font-weight: 600; font-size: 18px; } .pack-price-or { color: #8a9099; font-size: 12px; margin: 0 4px; } .pack-credits { color: #c5c8ce; font-weight: 500; font-size: 14px; } .pack-price-free { color: #008080; font-weight: 600; font-size: 18px; text-transform: uppercase; letter-spacing: 1px; } /* Footer */ .pack-modal-foot { padding: 20px 32px 28px; border-top: 1px solid rgba(255,255,255,.08); display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; } .pack-foot-link { font-size: 12px; color: #8a9099 !important; text-decoration: underline; } .pack-foot-link:hover { color: #c5c8ce !important; } /* CTA Primary (gradient teal — coerente con .hdr-btn-plans) */ .modal.popup a.pack-cta { background: linear-gradient(135deg,#008080 0%,#0099b0 100%) !important; color: #ffffff !important; border: 0 !important; border-radius: 50px !important; padding: 13px 28px !important; font-size: 14px !important; font-weight: 600 !important; text-decoration: none !important; display: inline-flex !important; align-items: center; gap: 8px; transition: filter .2s; cursor: pointer; text-transform: none !important; letter-spacing: 0 !important; width: auto !important; margin: 0 !important; opacity: 1 !important; } .modal.popup a.pack-cta:hover { filter: brightness(1.08); } .modal.popup a.pack-cta:active { transform: translateY(1px); } .modal.popup a.pack-cta .pack-cta-price { font-weight: 600; } /* Disabled / loading */ .modal.popup a.pack-cta[aria-disabled="true"], .modal.popup a.pack-cta:disabled { opacity: .5 !important; cursor: not-allowed; filter: grayscale(.3); pointer-events: none; } .modal.popup a.pack-cta.is-loading { pointer-events: none; opacity: .85 !important; } .modal.popup a.pack-cta.is-loading::after { content: ""; display: inline-block; width: 14px; height: 14px; margin-left: 8px; vertical-align: -2px; border: 2px solid rgba(255,255,255,.35); border-top-color: #fff; border-radius: 50%; animation: pack-cta-spin .7s linear infinite; } @keyframes pack-cta-spin { to { transform: rotate(360deg); } } /* Focus-visible (a11y) */ .modal.popup a.pack-cta:focus-visible, .modal.popup .pack-card:focus-visible, .modal.popup .pack-foot-link:focus-visible, .modal.popup .modal-close-x:focus-visible { outline: 2px solid #008080; outline-offset: 3px; border-radius: 4px; } /* Close X (in alto a destra del modale) */ .pack-modal-wrap .modal-close-x { position: absolute; top: 18px; right: 18px; width: 36px; height: 36px; background: rgba(255,255,255,.04); border: 0; border-radius: 50%; color: rgba(232,234,237,.75); font-size: 22px; line-height: 1; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: all .2s; z-index: 10; } .pack-modal-wrap .modal-close-x:hover { background: rgba(255,255,255,.08); color: #e8eaed; } /* Reduced motion */ @media (prefers-reduced-motion: reduce) { .modal.popup a.pack-cta.is-loading::after { animation: none; } .modal.popup a.pack-cta:active { transform: none; } .modal.popup .pack-card.box-formato { transition: none !important; } } /* Mobile (≤768px) */ @media (max-width: 768px) { .modal.popup .modal-dialog:has(.pack-modal-wrap), .modal.popup .modal-dialog:has(.pack-modal-wrap.w-multi) { max-width: 100% !important; margin: 0 !important; } .pack-grid.cols-2 { grid-template-columns: 1fr; } .pack-modal-head, .pack-modal-body, .pack-modal-foot { padding-left: 20px !important; padding-right: 20px !important; } .pack-modal-foot { flex-direction: column-reverse; align-items: stretch; } .modal.popup a.pack-cta { justify-content: center; text-align: center; width: 100%; } } /* ============================================================ */ /* ============================================================ */ /* MODAL PACK SELECTION (M1) — FIX iter 1 (28 apr 2026) */ /* No em dash · prezzo bianco · bordo 1px · chip pillola */ /* ============================================================ */ /* Bordo card selected: 2px → 1px (più sottile) */ .modal.popup .pack-card.box-formato.selected, .modal.popup .pack-card.box-formato.attivo { border: 1px solid #008080 !important; padding: 20px !important; } /* Format chip a pillola */ .pack-fmt-chip { border-radius: 999px !important; padding: 5px 12px !important; } /* Pricing layout flex justify-between (no em dash) */ .pack-pricing { display: flex !important; justify-content: space-between !important; align-items: baseline !important; gap: 12px; padding-top: 14px; border-top: 1px solid rgba(255,255,255,.08); } .pack-price { color: #ffffff !important; font-weight: 700 !important; font-size: 20px !important; letter-spacing: -.2px; } .pack-credits { color: #8a9099 !important; font-weight: 500 !important; font-size: 12px !important; text-transform: uppercase; letter-spacing: 1px; } /* CTA: testo a sinistra, prezzo a destra (no em dash) */ .modal.popup a.pack-cta { display: inline-flex !important; align-items: center; gap: 16px !important; } .pack-cta-text { font-weight: 600; } .pack-cta-price { font-weight: 700; background: rgba(255,255,255,.18); padding: 4px 10px; border-radius: 999px; font-size: 13px; } /* ============================================================ */ /* ============================================================ */ /* MODAL PACK SELECTION (M1) — FIX iter 2 (28 apr 2026) */ /* Prezzo CTA senza badge · chip più sottili · title piccolo */ /* ============================================================ */ /* Prezzo nel CTA: rimuovi badge bianco semi-trasparente */ .pack-cta-price { background: transparent !important; padding: 0 !important; border-radius: 0 !important; font-size: 14px !important; font-weight: 600 !important; opacity: .85; } /* Chip nel modale: più sottili, coerenti col resto del sito */ .pack-modal-wrap .pack-fmt-chip { padding: 3px 10px !important; font-size: 11px !important; letter-spacing: .8px !important; font-weight: 500 !important; } /* Pack card title: meno grande */ .pack-card-title { font-size: 14px !important; margin-bottom: 10px !important; } /* ============================================================ */ /* ============================================================ */ /* MODAL PACK SELECTION (M1) — FIX iter 3 (28 apr 2026) */ /* No doppie linee · prezzo CTA bianco · chip uniformi al sito */ /* ============================================================ */ /* (1) Rimuovi border-bottom head e border-top foot (doppie linee) */ .pack-modal-head { border-bottom: 0 !important; padding-bottom: 8px !important; } .pack-modal-foot { border-top: 0 !important; padding-top: 8px !important; } /* (2) Rimuovi border-top del pricing (creava doppio segno con bordo card) */ .pack-modal-wrap .pack-pricing { border-top: 0 !important; padding-top: 10px !important; margin-top: 4px !important; } /* (3) Prezzo CTA bianco vero, no opacity */ .pack-cta-price { color: #ffffff !important; opacity: 1 !important; font-weight: 700 !important; font-size: 14px !important; background: transparent !important; padding: 0 !important; border-radius: 0 !important; } /* (4) Chip modale: uniformi al pattern .pp-rel-fmt del sito (squadrato) */ .pack-modal-wrap .pack-fmt-chip { padding: 2px 6px !important; font-size: 11px !important; font-weight: 400 !important; border-radius: 3px !important; color: rgba(197,200,206,1) !important; background: rgba(255,255,255,.05) !important; border: 1px solid rgba(255,255,255,.08) !important; text-transform: uppercase !important; letter-spacing: .5px !important; } /* ============================================================ */ /* ============================================================ */ /* MODAL PACK SELECTION (M1) — FIX iter 4 (28 apr 2026) */ /* "Add to Cart" bold · hover su selected · chip badge-style */ /* ============================================================ */ /* (1) "Add to Cart" weight 700 (era 600 = sembrava slavato vs 4€ 700) */ .pack-cta-text { font-weight: 700 !important; color: #ffffff !important; } .modal.popup a.pack-cta { font-weight: 700 !important; } /* (2) Hover anche su selected: bordo teal piu acceso + bg leggermente piu carico */ .modal.popup .pack-card.box-formato.selected:hover, .modal.popup .pack-card.box-formato.attivo:hover { border-color: #00a0a0 !important; background: rgba(0,128,128,.08) !important; } /* (3) Tutti i format chip allineati al pattern badge del listing (.p3dm-fmt-badge) */ /* Pagina prodotto (chip in alto) */ .pp-fmt-chip { padding: 2px 6px !important; font-size: 9px !important; font-weight: 600 !important; border-radius: 3px !important; letter-spacing: .5px !important; text-transform: uppercase !important; background: rgba(255,255,255,.05) !important; border: 1px solid rgba(255,255,255,.08) !important; color: rgba(197,200,206,1) !important; line-height: 1.4 !important; } /* Related cards (sotto pagina prodotto) */ .pp-rel-fmt { padding: 1px 5px !important; font-size: 9px !important; font-weight: 600 !important; border-radius: 3px !important; letter-spacing: .5px !important; text-transform: uppercase !important; line-height: 1.4 !important; } /* Modale Pack Selection */ .pack-modal-wrap .pack-fmt-chip { padding: 2px 6px !important; font-size: 9px !important; font-weight: 600 !important; border-radius: 3px !important; letter-spacing: .5px !important; text-transform: uppercase !important; line-height: 1.4 !important; color: rgba(197,200,206,1) !important; background: rgba(255,255,255,.05) !important; border: 1px solid rgba(255,255,255,.08) !important; } /* ============================================================ */ /* ============================================================ */ /* MODAL DARK THEME — 29 apr 2026 (sess. 35) */ /* Override Bootstrap light theme per tutti i modali del sito */ /* ============================================================ */ /* Container */ .modal-content { background: #0d0e11 !important; border: 1px solid rgba(255,255,255,.10) !important; border-radius: 14px !important; box-shadow: 0 24px 64px rgba(0,0,0,.6) !important; color: #e8eaed; } /* Header (usato solo da modali legacy con titolo) */ .modal-header { background: #0d0e11 !important; border-bottom: 1px solid rgba(255,255,255,.07) !important; border-radius: 14px 14px 0 0 !important; } .modal-header .modal-title, .modal-header h4.modal-title { color: #e8eaed !important; font-weight: 600 !important; } .modal-header .close { color: rgba(232,234,237,.6) !important; text-shadow: none !important; opacity: 1 !important; } .modal-header .close:hover { color: #e8eaed !important; } /* Body */ .modal-body { background: #0d0e11 !important; color: #c5c8ce; padding: 28px 32px !important; } .modal-body h2, .modal-body h3, .modal-body h4 { color: #e8eaed !important; font-weight: 600 !important; } .modal-body p { color: #8a9099 !important; } /* Footer */ .modal-footer { background: #0d0e11 !important; border-top: 1px solid rgba(255,255,255,.07) !important; border-radius: 0 0 14px 14px !important; padding: 16px 24px !important; display: flex !important; gap: 10px !important; justify-content: center !important; } /* Bottoni footer — override classe legacy "blue" */ .modal-footer .btn, .modal-footer .btn-default, .modal-footer .btn.blue, .modal-footer .btn-default.blue, .modal-footer .btn-lg.blue, .modal-footer button.animateButton { background: transparent !important; color: #e8eaed !important; border: 1px solid rgba(255,255,255,.10) !important; border-radius: 50px !important; padding: 10px 28px !important; font-size: 13px !important; font-weight: 600 !important; text-shadow: none !important; box-shadow: none !important; transition: all .2s !important; width: auto !important; letter-spacing: .2px !important; } .modal-footer .btn:hover, .modal-footer .btn-default:hover, .modal-footer .btn.blue:hover, .modal-footer button.animateButton:hover { background: rgba(0,200,200,.05) !important; border-color: rgba(0,200,200,.6) !important; color: #ffffff !important; } /* Bottone primario (primo bottone nel footer quando ci sono due CTA) */ .modal-footer .btn:first-child:not(:only-child) { background: linear-gradient(135deg,#008080 0%,#0099b0 100%) !important; color: #ffffff !important; border: 0 !important; } .modal-footer .btn:first-child:not(:only-child):hover { filter: brightness(1.08) !important; background: linear-gradient(135deg,#008080 0%,#0099b0 100%) !important; } /* Backdrop più scuro */ .modal-backdrop { background-color: #000 !important; } .modal-backdrop.in { opacity: .7 !important; } /* ---- Downloadable Formats modal (account-download) ---- */ .dl-fmt-modal-wrap { padding: 8px 0 4px; } .dl-fmt-modal-title { font-family: 'Cormorant Garamond', serif; font-size: 22px; font-weight: 600; color: #e8eaed; margin: 0 0 20px; letter-spacing: .3px; } .dl-fmt-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; } .dl-fmt-list li a { display: flex; align-items: center; gap: 10px; padding: 11px 16px; background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.08); border-radius: 8px; color: #c5c8ce !important; text-decoration: none; font-size: 13px; font-weight: 500; transition: all .18s; } .dl-fmt-list li a:hover { background: rgba(0,128,128,.08); border-color: rgba(0,128,128,.4); color: #e8eaed !important; } .dl-fmt-list li a::before { display: none; } /* Modal feedback template utility classes */ .p3dm-modal-feedback { padding: 20px 8px 12px; text-align: center; } .p3dm-modal-icon { font-size: 44px !important; display: block !important; margin-bottom: 14px !important; } .p3dm-modal-feedback .p3dm-modal-title { color: #e8eaed !important; font-size: 16px !important; font-weight: 600 !important; margin: 0 0 6px !important; } .p3dm-modal-msg { color: #8a9099 !important; font-size: 13px !important; margin: 0 !important; line-height: 1.5 !important; } /* p3dm icon color variants — !important beats modal-content cascade */ .p3dm-icon-warn { color: #f0b429 !important; } .p3dm-icon-ok { color: #008080 !important; } .p3dm-icon-error { color: #e05252 !important; } .p3dm-icon-spin { color: #008080 !important; } .dl-fmt-name { flex: 1; color: #c5c8ce; } .dl-fmt-chip { font-size: 9px; font-weight: 600; text-transform: uppercase; letter-spacing: .5px; color: #8a9099; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); border-radius: 3px; padding: 2px 6px; flex-shrink: 0; } .dl-fmt-chip-b { color: rgba(0,200,200,.9) !important; border-color: rgba(0,200,200,.3) !important; background: rgba(0,200,200,.05) !important; } /* dl-fmt dual chips (sess. 37 — format + engine side by side) */ .dl-fmt-chips { display: inline-flex; gap: 5px; align-items: center; flex-shrink: 0; } .dl-fmt-chip-engine { border-color: rgba(0,128,128,.25) !important; color: rgba(0,185,185,.85) !important; } /* dl-fmt chip layout – flex, supports 1-3 chips (sess. 38) */ .dl-fmt-cols { display: inline-flex; gap: 5px; align-items: center; flex-shrink: 0; } /* sess. 38b — dl-fmt alignment fix */ .dl-fmt-name { text-align: left; } .dl-fmt-list li a { text-align: left; } /* CARD-FMT-ALIGN — sess. 38c, 29 apr 2026 Allinea i format chips a sinistra come brand/title/prezzo nelle card listing. Override del padding 14px legacy in style.css (.p3dm-formats). */ .p3dm-card .p3dm-formats { padding-left: 0 !important; padding-right: 0 !important; } /* TOPBAR-UNIFY — sess. 38d v2, 29 apr 2026 Background topbar uniformato a #040506 come la home. Lo spostamento HTML del markup avviene in header.page.php. */ .hdr-topbar { background: #040506 !important; border-bottom: 1px solid rgba(255,255,255,.05); justify-content: flex-end !important; } /* === MODAL-DL-BORDER sess. 42 (1 mag 2026): bordo teal per modali popup === */ .modal.popup .modal-content { border: 1px solid rgba(0, 128, 128, .4) !important; box-shadow: 0 24px 64px rgba(0,0,0,.6), 0 0 0 1px rgba(0, 128, 128, .15) !important; } /* === CART-BADGE sess. 42 (2 mag 2026): badge count su icona cart header === */ .hdr-icon-cart { position: relative; } .hdr-cart-badge { position: absolute; top: -4px; right: -4px; min-width: 18px; height: 18px; background: #008080; color: #ffffff !important; border-radius: 50%; font-size: 10px; font-weight: 700; line-height: 14px; text-align: center; padding: 1px 4px 0; box-sizing: border-box; border: 2px solid #0a0b0d; pointer-events: none; } /* === MODAL-POPUP-WIDTH sess. 42 (2 mag): limita max-width modali popup per evitare barre orizzontali === */ .modal.popup .modal-dialog { max-width: 500px !important; margin: 1.75rem auto !important; } /* === MODAL-CORNERS sess. 42 (2 mag): forza border + radius + overflow visible per evitare angoli mangiati === */ .modal.popup { background: rgba(0,0,0,0.5); } .modal.popup .modal-dialog { background: transparent !important; } .modal.popup .modal-content { border: 2px solid #008080 !important; border-radius: 14px !important; box-shadow: 0 8px 30px rgba(0,128,128,0.25), 0 24px 64px rgba(0,0,0,0.6) !important; overflow: hidden !important; } /* === ACCOUNT AREA RESTYLE — sess. 44 (3 mag 2026) — START === */ /* Account tab navigation */ .acc-tabnav { border-bottom: 1px solid rgba(255,255,255,.08); margin-top: 28px; display: flex; gap: 0; overflow-x: auto; padding: 0; } .acc-tabnav .nav-item, .acc-tabnav a { color: #8a9099 !important; text-decoration: none !important; padding: 16px 24px !important; font-size: 13px !important; font-weight: 600 !important; letter-spacing: 1px !important; text-transform: uppercase !important; border-bottom: 2px solid transparent !important; margin-bottom: -1px !important; transition: all 0.2s !important; white-space: nowrap !important; background: transparent !important; border-top: 0 !important; border-left: 0 !important; border-right: 0 !important; border-radius: 0 !important; } .acc-tabnav a:hover { color: #e8eaed !important; } .acc-tabnav a.active { color: #e8eaed !important; border-bottom-color: #008080 !important; background: transparent !important; } /* Account hero card */ .acc-hero { background: linear-gradient(135deg, rgba(0,128,128,.08) 0%, rgba(0,153,176,.04) 100%); border: 1px solid rgba(0,128,128,.2); border-radius: 14px; padding: 32px 36px; margin-top: 32px; display: flex; gap: 28px; align-items: center; flex-wrap: wrap; } .acc-avatar-lg { width: 96px; height: 96px; background: linear-gradient(135deg,#008080,#0099b0); color: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: 'Cormorant Garamond', serif; font-size: 42px; font-weight: 400; flex-shrink: 0; box-shadow: 0 8px 24px rgba(0,128,128,.25); } .acc-hero-info { flex: 1; min-width: 200px; } .acc-hero-name { font-family: 'Cormorant Garamond', serif; font-size: 32px; font-weight: 400; color: #fff; margin-bottom: 4px; line-height: 1.1; } .acc-hero-meta { color: #c5c8ce; font-size: 13px; line-height: 1.6; } .acc-hero-meta .label { color: #8a9099; margin-right: 4px; } .acc-hero-stats { display: flex; gap: 16px; flex-shrink: 0; flex-wrap: wrap; } .acc-stat-card { background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.08); border-radius: 10px; padding: 14px 20px; min-width: 130px; text-align: center; } .acc-stat-card .num { font-family: 'Cormorant Garamond', serif; font-size: 28px; font-weight: 400; color: #008080; line-height: 1; margin-bottom: 4px; } .acc-stat-card .lbl { font-size: 10px; color: #8a9099; text-transform: uppercase; letter-spacing: 0.6px; font-weight: 600; } .acc-hero-cta { display: flex; flex-direction: column; gap: 10px; flex-shrink: 0; } a.acc-cta-primary { background: linear-gradient(135deg,#008080,#0099b0); color: #fff !important; border: 0; border-radius: 50px; padding: 12px 28px; font-weight: 600; font-size: 13px; text-decoration: none; cursor: pointer; text-align: center; white-space: nowrap; display: inline-block; } a.acc-cta-primary:hover { filter: brightness(1.08); } a.acc-cta-ghost { background: transparent; color: #e8eaed !important; border: 1px solid rgba(0,128,128,.4); border-radius: 50px; padding: 11px 28px; font-weight: 600; font-size: 13px; text-decoration: none; cursor: pointer; text-align: center; white-space: nowrap; display: inline-block; } a.acc-cta-ghost:hover { background: rgba(0,128,128,.1); border-color: rgba(0,128,128,.7); color: #fff !important; } /* Setup-bar (drives the form) */ .setup-bar { background: linear-gradient(135deg, rgba(0,128,128,.07) 0%, rgba(0,153,176,.03) 100%); border: 1px solid rgba(0,128,128,.25); border-radius: 14px; padding: 24px 28px; margin-top: 32px; } .setup-bar.empty { border-color: rgba(240,180,41,.4); background: linear-gradient(135deg, rgba(240,180,41,.04) 0%, rgba(240,180,41,.02) 100%); } .setup-bar-head { display: flex; align-items: center; gap: 8px; margin-bottom: 16px; color: #008080; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; } .setup-bar.empty .setup-bar-head { color: #f0b429; } .setup-bar-head .step { background: #008080; color: #fff; width: 22px; height: 22px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; } .setup-bar.empty .setup-bar-head .step { background: #f0b429; } .setup-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: start; } .setup-field label { display: block; font-size: 11px; color: #8a9099; text-transform: uppercase; letter-spacing: 0.8px; margin-bottom: 8px; font-weight: 600; } .setup-field .seg-control { width: 100%; } .setup-field .seg-control .seg { flex: 1; padding: 10px 18px; font-size: 13px; } .setup-field select { width: 100%; background: rgba(255,255,255,.04); border: 1px solid rgba(0,128,128,.4); border-radius: 50px; color: #e8eaed; font-size: 13px; font-weight: 500; padding: 10px 36px 10px 18px; font-family: 'Inter', sans-serif; outline: none; appearance: none; background-image: url("data:image/svg+xml;utf8,"); background-repeat: no-repeat; background-position: right 14px center; cursor: pointer; transition: border-color 0.2s; } .setup-field select:focus { border-color: #008080; } .setup-field select option { background: #131518; color: #e8eaed; } .setup-bar.readonly select { pointer-events: none; opacity: 0.85; } .setup-bar.readonly .seg-control .seg:not(.active) { opacity: 0.4; pointer-events: none; } /* Segmented control */ .seg-control { display: inline-flex; background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.08); border-radius: 50px; padding: 3px; } .seg-control .seg { padding: 7px 18px; font-size: 12px; font-weight: 600; color: #c5c8ce; background: transparent; border: 0; border-radius: 50px; cursor: pointer; transition: all 0.2s; font-family: 'Inter', sans-serif; } .seg-control .seg.active { background: #008080; color: #fff; } .seg-control .seg:not(.active):hover { color: #fff; } /* Account section card */ .acc-section { margin-top: 24px; background: #131518; border: 1px solid rgba(255,255,255,.08); border-radius: 14px; padding: 28px 32px; position: relative; } .acc-section.disabled { opacity: 0.45; pointer-events: none; } .acc-section.disabled::before { content: ''; position: absolute; inset: 0; background: rgba(10,11,13,.4); border-radius: 14px; z-index: 1; } .acc-section .sec-head { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 24px; gap: 20px; flex-wrap: wrap; } .acc-section .sec-title { font-family: 'Cormorant Garamond', serif; font-size: 26px; font-weight: 400; color: #fff; margin: 0; } .acc-section .sec-subtitle { color: #8a9099; font-size: 13px; margin-top: 4px; } .acc-section .sec-actions { display: flex; gap: 10px; flex-shrink: 0; flex-wrap: wrap; } a.btn-edit, button.btn-edit { background: transparent; color: #e8eaed !important; border: 1px solid rgba(0,128,128,.4); border-radius: 50px; padding: 9px 20px; font-weight: 600; font-size: 12px; text-decoration: none; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; font-family: 'Inter', sans-serif; } a.btn-edit:hover, button.btn-edit:hover { background: rgba(0,128,128,.1); border-color: rgba(0,128,128,.7); color: #fff !important; } button.btn-save, a.btn-save { background: linear-gradient(135deg,#008080,#0099b0); color: #fff !important; border: 0; border-radius: 50px; padding: 10px 22px; font-weight: 600; font-size: 12px; cursor: pointer; font-family: 'Inter', sans-serif; text-decoration: none; display: inline-block; } button.btn-cancel, a.btn-cancel { background: transparent; color: #c5c8ce !important; border: 1px solid rgba(0,128,128,.4); border-radius: 50px; padding: 9px 20px; font-weight: 600; font-size: 12px; cursor: pointer; font-family: 'Inter', sans-serif; text-decoration: none; display: inline-block; } /* Form grid 2-col */ .acc-section .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 36px 48px; } .acc-section .form-col-title { font-size: 11px; color: #8a9099; text-transform: uppercase; letter-spacing: 1.2px; font-weight: 700; padding-bottom: 12px; border-bottom: 1px solid rgba(255,255,255,.08); margin-bottom: 20px; } .acc-section .form-row { margin-bottom: 18px; } .acc-section .form-row label { display: block; font-size: 11px; color: #8a9099; text-transform: uppercase; letter-spacing: 0.8px; margin-bottom: 6px; font-weight: 600; } .acc-section .form-row .val { color: #e8eaed; font-size: 14px; padding: 10px 0; border-bottom: 1px solid rgba(255,255,255,.08); min-height: 38px; line-height: 1.5; } .acc-section .form-row .val.locked { color: #8a9099; } .acc-section .form-row .val.empty { color: rgba(197,200,206,.5); font-style: italic; } .acc-section .form-row .val.empty:empty::before { content: 'Not set'; } .acc-section .form-row input[type="text"], .acc-section .form-row input[type="email"], .acc-section .form-row input[type="tel"], .acc-section .form-row input[type="password"], .acc-section .form-row select { width: 100%; background: transparent; border: 0; border-bottom: 1px solid rgba(255,255,255,.12); color: #e8eaed; font-size: 14px; padding: 10px 0; font-family: 'Inter', sans-serif; outline: none; transition: border-color 0.2s; border-radius: 0; } .acc-section .form-row input:focus, .acc-section .form-row select:focus { border-bottom-color: #008080; } .acc-section .form-row .form-hint { font-size: 11px; color: #8a9099; margin-top: 4px; } .acc-section .form-row .form-hint code { background: rgba(255,255,255,.06); padding: 1px 5px; border-radius: 3px; font-family: 'Inter',sans-serif; font-size: 11px; color: #e8eaed; } /* Required asterisk */ .acc-section .req, .setup-bar .req { color: #f0b429; margin-left: 3px; font-weight: 700; } label .req { font-size: 13px; } /* Required field legend (footnote) */ .acc-section .req-legend { display: inline-flex; align-items: baseline; gap: 5px; margin-top: 28px; padding-top: 16px; border-top: 1px solid rgba(255,255,255,.08); width: 100%; font-size: 11px; color: #8a9099; text-transform: uppercase; letter-spacing: 0.6px; font-weight: 600; } .acc-section .req-legend .req { margin-left: 0; margin-right: 2px; font-size: 14px; line-height: 1; } /* Hidden fields note (when account type changes) */ .hidden-fields-note { margin-top: 18px; padding: 10px 12px; background: rgba(255,255,255,.03); border-radius: 6px; font-size: 11px; color: #8a9099; } .hidden-fields-note strong { color: #c5c8ce; } /* Form disabled note (setup not yet completed) */ .form-disabled-note { background: rgba(240,180,41,.08); border: 1px solid rgba(240,180,41,.35); border-radius: 8px; padding: 12px 16px; margin-bottom: 24px; font-size: 13px; color: #c5c8ce; position: relative; z-index: 2; } .form-disabled-note strong { color: #f0b429; } /* Validation modal */ .acc-validation-overlay { position: fixed; inset: 0; background: rgba(10,11,13,.85); backdrop-filter: blur(4px); z-index: 9999; display: none; align-items: flex-start; justify-content: center; padding: 60px 24px; } .acc-validation-overlay.show { display: flex; } .acc-validation-modal { background: #131518; border: 1px solid rgba(240,180,41,.4); border-radius: 14px; padding: 28px 32px; max-width: 460px; width: 100%; box-shadow: 0 24px 64px rgba(0,0,0,.6); } .acc-validation-modal .icon { width: 44px; height: 44px; background: rgba(240,180,41,.15); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #f0b429; font-size: 22px; margin-bottom: 16px; } .acc-validation-modal h3 { font-family: 'Cormorant Garamond', serif; font-size: 24px; font-weight: 400; color: #fff; margin: 0 0 6px; } .acc-validation-modal p { color: #c5c8ce; font-size: 13px; line-height: 1.6; margin: 0 0 18px; } .acc-validation-modal ul { margin: 0 0 22px; padding: 14px 18px 14px 36px; background: rgba(240,180,41,.05); border-left: 3px solid #f0b429; border-radius: 4px; font-size: 13px; color: #e8eaed; } .acc-validation-modal ul li { margin-bottom: 4px; } .acc-validation-modal .actions { display: flex; gap: 12px; justify-content: flex-end; } /* Toast (success post-save) */ .acc-toast { margin: 12px 0 24px; background: rgba(0,128,128,.1); border: 1px solid rgba(0,128,128,.4); border-radius: 8px; padding: 14px 18px; color: #e8eaed; font-size: 13px; display: none; gap: 12px; align-items: center; } .acc-toast.show { display: flex; } .acc-toast .icon { width: 24px; height: 24px; background: #008080; color: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 14px; font-weight: 700; } /* Responsive */ @media (max-width: 1024px) { .acc-hero { flex-wrap: wrap; } .acc-hero-stats { width: 100%; justify-content: space-between; } .acc-hero-cta { width: 100%; flex-direction: row; } .acc-hero-cta a { flex: 1; } } @media (max-width: 768px) { .acc-hero { padding: 22px 20px; gap: 18px; } .acc-avatar-lg { width: 72px; height: 72px; font-size: 32px; } .acc-hero-name { font-size: 24px; } .acc-stat-card { min-width: 0; padding: 10px 14px; flex: 1; } .acc-stat-card .num { font-size: 22px; } .acc-section { padding: 22px 20px; } .acc-section .sec-head { flex-direction: column; } .acc-section .sec-title { font-size: 22px; } .acc-section .form-grid { grid-template-columns: 1fr; gap: 8px; } .setup-grid { grid-template-columns: 1fr; gap: 16px; } .setup-bar { padding: 18px 20px; } } /* === ACCOUNT AREA RESTYLE — sess. 44 (3 mag 2026) — END === */ /* === HOTFIX sess. 45 (3 mag 2026) — email layout + setup interactive === */ .acc-section .form-row .val { display: block !important; } .acc-section .form-row .val.locked { display: block !important; } /* === END HOTFIX === */ /* === HOTFIX 2 sess. 45 — form-row override flex Bootstrap === */ #account-profileContainer .form-row { display: block; } #account-profileContainer .form-row[style*="grid-template-columns"] { display: grid; } /* === END HOTFIX 2 === */ /* === Modal popup — fix font titolo h4 (uniforma a Inter, no Cormorant) — sess. 46 / 04 mag 2026 === */ .modal.popup .modal-body h4 { font-family: 'Inter', sans-serif !important; font-size: 18px; font-weight: 600; letter-spacing: 0; color: #e8eaed; } /* === acc-table — dark theme tabelle account (Credits Log, Invoices) — sess. 46 / 04 mag 2026 === */ .acc-table{width:100%;border-collapse:collapse;font-family:'Inter',sans-serif;font-size:13px;color:#c5c8ce;} .acc-table thead th{padding:10px 14px;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.8px;color:#8a9099;border-bottom:1px solid rgba(255,255,255,.08);text-align:left;} .acc-table thead th.acc-col-right{text-align:right;} .acc-table tbody td{padding:12px 14px;border-bottom:1px solid rgba(255,255,255,.04);vertical-align:middle;} .acc-table tbody td.acc-col-right{text-align:right;} .acc-table tbody tr:last-child td{border-bottom:none;} .acc-table tbody tr:hover td{background:rgba(255,255,255,.02);} .acc-credit-plus{color:#3cb371;font-weight:600;} .acc-credit-minus{color:#e05c5c;font-weight:600;} .acc-month-label td{padding:18px 14px 6px!important;font-size:10px!important;font-weight:600;text-transform:uppercase;letter-spacing:1.2px;color:#8a9099;border-bottom:1px solid rgba(255,255,255,.08)!important;background:transparent!important;} .acc-month-label:first-child td{padding-top:8px!important;} .acc-dl-link{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:500;color:#008080!important;text-decoration:none;} .acc-dl-link:hover{color:#00a0a0!important;} .acc-empty{text-align:center;padding:48px 20px;color:#8a9099;font-size:13px;} .acc-invoice-price{font-weight:600;color:#e8eaed;} .acc-invoice-date{color:#8a9099;font-size:12px;} /* acc-credit colors — specificity fix (sess.46) */ .acc-table tbody td.acc-credit-plus{color:#3cb371!important;font-weight:600;} .acc-table tbody td.acc-credit-minus{color:#e05c5c!important;font-weight:600;} /* === btn-save / btn-cancel hover — fix sess. 46 / 04 mag 2026 === */ button.btn-save:hover, a.btn-save:hover { filter: brightness(1.08); } button.btn-cancel:hover, a.btn-cancel:hover { background: rgba(0,128,128,.1); border-color: rgba(0,128,128,.7); color: #fff !important; } button.btn-save, a.btn-save { transition: filter .2s; } button.btn-cancel, a.btn-cancel { transition: background .2s, border-color .2s, color .2s; } /* === BILLING CARD (carrello + payment) sess.50 === */ .billing-card{background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.07);border-radius:12px;padding:20px 24px;margin-top:20px;} .bc-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px;} .bc-title{font-size:13px;font-weight:600;color:#e8eaed;text-transform:uppercase;letter-spacing:.6px;} .bc-summary-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px 20px;} .bc-field{display:flex;flex-direction:column;gap:2px;} .bc-label{font-size:11px;color:#8a9099;text-transform:uppercase;letter-spacing:.5px;font-weight:500;} .bc-val{font-size:13px;color:#c5c8ce;} .bc-empty{font-size:13px;color:#8a9099;font-style:italic;margin:8px 0;} .bc-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px 20px;margin-bottom:14px;} .bc-form-grid .form-group{margin-bottom:0;} .bc-form-grid label{font-size:11px;color:#8a9099;text-transform:uppercase;letter-spacing:.5px;font-weight:500;margin-bottom:4px;display:block;} .bc-form-grid input,.bc-form-grid select{width:100%;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);border-radius:8px;color:#e8eaed;font-size:13px;padding:8px 12px;outline:none;transition:border-color .2s;box-sizing:border-box;} .bc-form-grid input:focus,.bc-form-grid select:focus{border-color:rgba(0,128,128,.5);} .bc-form-grid select option{background:#1a1c1f;color:#e8eaed;} .bc-actions{display:flex;gap:8px;justify-content:flex-end;} .billing-card .setup-bar{background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.07);border-radius:8px;padding:10px 14px;margin-bottom:14px;display:flex;align-items:center;gap:12px;} .billing-card .setup-bar .sb-label{font-size:11px;color:#8a9099;text-transform:uppercase;letter-spacing:.5px;font-weight:500;white-space:nowrap;} .billing-card .setup-bar .seg-control{display:flex;background:rgba(255,255,255,.05);border-radius:6px;padding:3px;gap:2px;} .billing-card .setup-bar .seg{font-size:12px;font-weight:500;color:#8a9099;padding:4px 12px;border-radius:4px;cursor:pointer;transition:all .15s;} .billing-card .setup-bar .seg.active{background:rgba(0,128,128,.25);color:#e8eaed;} a.bc-save-btn,button.bc-save-btn{color:#e8eaed !important;} /* ============================================================ AUDIT-04 MOBILE — fix responsivita (4 mag 2026 sess. 52) ============================================================ */ /* --- BUG-M1: Cart grid collasso a 1 colonna su mobile --- */ @media (max-width: 768px) { .cart-grid { grid-template-columns: 1fr !important; gap: 24px !important; } .cart-summary-sticky { position: static !important; top: auto !important; max-width: 100% !important; } } /* --- BUG-M4: Sidebar filtri hidden su mobile + toggle btn --- */ @media (max-width: 767px) { #filterPage { display: none !important; width: 100% !important; max-width: 100% !important; flex: 0 0 100% !important; } #filterPage.mobile-open { display: block !important; } #resultPage { width: 100% !important; max-width: 100% !important; flex: 0 0 100% !important; padding-left: 0 !important; } .mobile-filter-btn { display: flex !important; } } @media (min-width: 768px) { .mobile-filter-btn { display: none !important; } #filterPage { display: block !important; } } .mobile-filter-btn { display: none; align-items: center; gap: 8px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12); border-radius: 8px; color: #e8eaed; font-size: 13px; font-weight: 600; padding: 10px 16px; cursor: pointer; width: 100%; justify-content: center; margin-bottom: 16px; transition: background .2s; } .mobile-filter-btn:hover { background: rgba(255,255,255,.09); } .mobile-filter-btn svg { flex-shrink: 0; } .mobile-filter-btn .mfb-count { background: rgba(0,128,128,.3); color: #e8eaed; border-radius: 20px; font-size: 11px; padding: 1px 7px; font-weight: 700; } /* --- BUG-M5: H1 hero brand/designer 76px → 40px su mobile --- */ @media (max-width: 768px) { .brd-hero h1, .brd-name { font-size: 40px !important; line-height: 1.15 !important; } .brd-hero-left { flex-direction: column !important; align-items: flex-start !important; gap: 12px !important; } .brd-hero-row { flex-direction: column !important; align-items: flex-start !important; gap: 12px !important; } .brd-hero { padding: 24px 20px !important; } } /* --- BUG-M6: Related products 2-col → 1-col su mobile stretto --- */ @media (max-width: 480px) { .pp-rel-grid { grid-template-columns: 1fr !important; } .pp-feat-grid { grid-template-columns: 1fr !important; } } /* --- BUG-M2: Cart wrapper padding mobile (classi aggiuntive) --- */ @media (max-width: 767px) { .cart-page-wrap { padding-left: 16px !important; padding-right: 16px !important; } .cart-state-wrap { padding: 60px 16px !important; } } /* --- BUG-M9: Footer colonne mobile --- */ @media (max-width: 767px) { .ftr-col { padding-left: 16px !important; padding-right: 16px !important; } } /* --- Billing card form-grid collapse su mobile --- */ @media (max-width: 560px) { .bc-form-grid, .bc-summary-grid { grid-template-columns: 1fr !important; } .bc-actions { flex-direction: column !important; } } /* --- Setup-bar billing collapse su mobile --- */ @media (max-width: 480px) { .billing-card .setup-bar { flex-wrap: wrap !important; gap: 8px !important; } .billing-card .setup-bar .seg-control { width: 100% !important; justify-content: center !important; } } /* ============================================================ END AUDIT-04 MOBILE ============================================================ */ /* === PMT-2: Bootstrap Select dark theme === */ .bootstrap-select { width: 100% !important; } .bootstrap-select > .dropdown-toggle, .bootstrap-select > .dropdown-toggle.btn-light, .bootstrap-select > .dropdown-toggle.btn-default, .bootstrap-select > .dropdown-toggle.disabled, .bootstrap-select > .dropdown-toggle:disabled { background-color: rgb(13,15,19) !important; background: rgb(13,15,19) !important; color: rgb(138,144,153) !important; border: 1px solid rgba(255,255,255,0.08) !important; border-radius: 6px !important; box-shadow: none !important; padding: 10px 14px !important; font-size: 13px !important; font-weight: 400 !important; } .bootstrap-select > .dropdown-toggle:hover:not(:disabled):not(.disabled), .bootstrap-select > .dropdown-toggle:focus:not(:disabled):not(.disabled) { background-color: rgb(19,21,26) !important; background: rgb(19,21,26) !important; border-color: rgba(255,255,255,0.16) !important; color: rgb(197,200,206) !important; box-shadow: none !important; outline: none !important; } .bootstrap-select .dropdown-menu { background-color: rgb(19,21,26) !important; border: 1px solid rgba(255,255,255,0.1) !important; box-shadow: 0 4px 20px rgba(0,0,0,0.5) !important; } .bootstrap-select .dropdown-menu .dropdown-item { color: rgb(197,200,206) !important; background-color: transparent !important; font-size: 13px !important; } .bootstrap-select .dropdown-menu .dropdown-item:hover, .bootstrap-select .dropdown-menu .dropdown-item:focus { background-color: rgba(255,255,255,0.06) !important; color: rgb(232,234,237) !important; } .bootstrap-select .dropdown-menu .dropdown-item.active, .bootstrap-select .dropdown-menu .dropdown-item.selected { background-color: rgba(0,128,128,0.15) !important; color: rgb(0,200,200) !important; } /* === end PMT-2 === */ /* I-038 sess.65 - hide non-clickable EN lang chip (monolingua) */ .hdr-topbar-right .hdr-lang{display:none;} /* I-021: no fix needed - .brd-dot already correct via existing .brd-dot{background:#008080} + pill inline-flex */ /* ============================================================ */ /* I-052 mobile fix — listing header stack verticale + pg-lead visible */ /* sess. 76 part 7 — 6 mag 2026 */ /* ============================================================ */ .pg-header-block .pg-lead { display: block !important; } .pg-header-block .pg-chips { display: flex !important; flex-wrap: wrap !important; } @media (max-width: 900px) { .pg-header-block .pg-inner { flex-direction: column !important; align-items: flex-start !important; gap: 12px !important; } .pg-header-block .pg-head-row, .pg-header-block .pg-crumb, .pg-header-block .pg-lead, .pg-header-block .pg-chips { width: 100% !important; max-width: 100% !important; } } @media (max-width: 480px) { .pg-header-block .pg-chips a { font-size: 11px !important; padding: 5px 10px !important; } .pg-header-block .pg-lead { font-size: 13px !important; } } /* LISTING HEADER v2 — stack verticale breadcrumb > H1 (sess. 77 · 6 mag 2026) */ .pg-header-block .pg-inner { flex-direction: column !important; align-items: flex-start !important; padding: 28px 48px 20px !important; gap: 6px !important; } .pg-crumb { order: 1 !important; } .pg-head-row { order: 2 !important; } @media (max-width: 900px) { .pg-header-block .pg-inner { padding: 20px 20px 16px !important; } } .pg-lead { order: 3 !important; display: block !important; max-width: 660px !important; font-size: 14px !important; color: #c5c8ce !important; } .pg-chips { order: 4 !important; } /* NAV DROPDOWN Models (sess. 77 - 6 mag 2026) */ .hdr-has-dd { position: relative; list-style: none; } .hdr-dd-trigger { display: block; padding: 7px 18px; border-radius: 100px; font-size: 14px; font-weight: 400; color: #eef0f2 !important; cursor: pointer; user-select: none; white-space: nowrap; transition: background .2s, color .2s; } .hdr-has-dd:hover .hdr-dd-trigger { background: rgba(255,255,255,.06); color: #fff !important; } .hdr-dd-caret { font-size: 9px; margin-left: 4px; opacity: .6; vertical-align: middle; } .hdr-dd-panel { position: absolute; top: calc(100% + 8px); left: 50%; background: #1a1c20; border: 1px solid rgba(255,255,255,.08); border-radius: 10px; padding: 8px; min-width: 230px; box-shadow: 0 12px 40px rgba(0,0,0,.5); opacity: 0; pointer-events: none; transform: translateX(-50%) translateY(-6px); transition: opacity .18s, transform .18s; z-index: 999; } .hdr-has-dd:hover .hdr-dd-panel { opacity: 1; pointer-events: all; transform: translateX(-50%) translateY(0); } .hdr-dd-item { display: flex; align-items: flex-start; gap: 12px; padding: 10px 12px; border-radius: 7px; color: #e8eaed !important; text-decoration: none; transition: background .15s; } .hdr-dd-item:hover { background: rgba(255,255,255,.05); } .hdr-dd-icon-box { width: 32px; height: 32px; border-radius: 8px; flex-shrink: 0; font-size: 14px; background: rgba(0,128,128,.12); border: 1px solid rgba(0,128,128,.25); display: flex; align-items: center; justify-content: center; } .hdr-dd-item-text strong { display: block; font-size: 13px; font-weight: 600; color: #e8eaed !important; } .hdr-dd-item-text span { display: block; font-size: 11px; color: #8a9099 !important; margin-top: 2px; } /* NAV DROPDOWN — fix gap hover bridge (sess. 77 hotfix) */ .hdr-dd-panel::before { content: ''; position: absolute; top: -8px; left: 0; right: 0; height: 8px; } @media (min-width: 992px) { .pg-inner { display: grid !important; grid-template-columns: 1.05fr 0.95fr; grid-template-rows: auto auto auto; column-gap: 50px; row-gap: 0; align-items: start; } .pg-inner .pg-crumb { grid-column: 1; grid-row: 1; margin-bottom: 6px; } .pg-inner .pg-head-row { grid-column: 1; grid-row: 2; } .pg-inner .pg-lead { grid-column: 1; grid-row: 3; max-width: none; padding-right: 12px; } .pg-inner .pg-chips { grid-column: 2; grid-row: 2 / 4; align-self: center; justify-content: flex-start; align-content: center; margin-top: 0 !important; } } /* --- END: 3DM listing pg-inner 2-col layout --- */ /* --- BEGIN: 3DM listing pg-inner 2-col layout v2 (sess.82) --- */ @media (min-width: 992px) { body .pg-header-block .pg-inner, body div.pg-inner { display: grid !important; grid-template-columns: 1.05fr 0.95fr !important; grid-template-rows: auto auto auto !important; column-gap: 50px !important; row-gap: 0 !important; align-items: start !important; flex-direction: unset !important; } body .pg-header-block .pg-inner > .pg-crumb { grid-column: 1 !important; grid-row: 1 !important; margin-bottom: 6px !important; } body .pg-header-block .pg-inner > .pg-head-row { grid-column: 1 !important; grid-row: 2 !important; } body .pg-header-block .pg-inner > .pg-lead { grid-column: 1 !important; grid-row: 3 !important; max-width: none !important; padding-right: 12px !important; } body .pg-header-block .pg-inner > .pg-chips { grid-column: 2 !important; grid-row: 2 / 4 !important; align-self: center !important; justify-self: start !important; justify-content: flex-start !important; align-content: center !important; margin-top: 0 !important; } } /* --- END: 3DM listing pg-inner 2-col layout v2 --- */ /* ============================================================ AUDIT-05 mobile — product page fixes (sess. 83, 8 mag 2026) 3 fix: pp-top topbar wrap, pp-prod-title font-size, pp-fmt-chips gap ============================================================ */ @media (max-width: 480px) { /* FIX 1 — pp-top topbar: stack verticale invece di row overflow */ .pp-top { flex-direction: column !important; gap: 6px !important; align-items: flex-start !important; } .pp-top > div { flex-wrap: wrap !important; gap: 6px !important; } .pp-breadcrumb { flex-wrap: wrap !important; } /* FIX 2 — pp-prod-title: 27px Cormorant troppo grande su 480px */ .pp-prod-title { font-size: 20px !important; line-height: 1.25 !important; } /* FIX 3 — pp-fmt-chips: flex-wrap gia' impostato, gap sicuro */ .pp-fmt-chips { flex-wrap: wrap !important; gap: 6px !important; } } /* === HOME-NEW HEADER FIX (sess. 83 - 9 mag 2026) === */ /* Allinea icone header e pillola View Plans alle altre pagine shop */ #hm-root .mh-icon svg { width: 18px; height: 18px; } #hm-root .btn-ghost-sm { height: 40px; box-sizing: border-box; padding: 0 26px; font-size: 13.5px; font-weight: 600; border-radius: 100px; display: inline-flex; align-items: center; justify-content: center; line-height: 1; } /* === HOME-NEW HEADER FIX v2 (sess. 83 - 9 mag 2026) === */ /* Allinea icone header (azzera padding orizzontale che schiaccia SVG) */ #hm-root .mh-icon { padding: 0 !important; width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; } #hm-root .mh-icon svg { width: 18px !important; height: 18px !important; flex: none; min-width: 18px; } /* Allinea pillola View Plans a Browse Shop e a hdr-btn-plans (40px) */ #hm-root .btn-ghost-sm { height: 40px; box-sizing: border-box; padding: 0 26px; font-size: 13.5px; font-weight: 600; border-radius: 100px; display: inline-flex; align-items: center; justify-content: center; line-height: 1; } /* === HOME HEADER ICONS + FOOTER SOC FIX — 10 mag 2026 === */ /* .mh-icon stato normale: allineato a .hdr-icon — specificità alta per battere inline !important */ body #hm-root .mh-icon { color: rgba(232, 234, 237, 0.75) !important; background: rgba(255, 255, 255, 0.04) !important; border-color: rgba(255, 255, 255, 0.08) !important; transition: background 0.2s, color 0.2s; } /* .mh-icon hover: identico a .hdr-icon:hover (bianco, NO cyan) */ body #hm-root .mh-icon:hover { background: rgba(255, 255, 255, 0.08) !important; color: #e8eaed !important; } /* Footer .soc hover fix */ body #hm-root .soc:hover { background: rgba(255, 255, 255, 0.12) !important; color: #e8eaed !important; text-decoration: none !important; } /* Fix specifico per (Wishlist, Cart) — specificità max */ html body #hm-root a.mh-icon { color: rgba(232, 234, 237, 0.75) !important; } html body #hm-root a.mh-icon:hover { color: #e8eaed !important; background: rgba(255, 255, 255, 0.08) !important; } /* === LISTING CHIPS — right align + white text — 10 mag 2026 === */ body .pg-header-block .pg-inner .pg-chips { width: 100% !important; justify-content: flex-end !important; } body .pg-header-block .pg-inner .pg-chips a { color: #e8eaed !important; } /* === pp-sec-head uniformato a Inter sans-serif uppercase (sess. 92 closing) === */ .pp-sec-head { font-family: 'Inter', system-ui, sans-serif !important; font-size: 13px !important; font-weight: 700 !important; letter-spacing: 1.6px !important; text-transform: uppercase !important; color: rgba(232,234,237,0.9) !important; }