/* ============================================================ ResinPlan 3.0 — DARK THEME (file unico) ------------------------------------------------------------ Attivazione: Lo imposta il piccolo script in layouts/header.blade.php leggendo localStorage('rp-theme'); il toggle è in "Il mio account → Impostazioni". Strategia (NIENTE modifiche alle classi nel markup): - Ridefinisce i token del design system Liquid Resin sotto :root[data-theme="dark"] → quasi tutto ciò che usa var(--rp-ink*), var(--fg-*), var(--bg-*), var(--border-*) diventa scuro "gratis". - Sovrascrive i vetri "frosted" e i pochi componenti con bianchi hardcoded (rgba(255,255,255,..) / rgba(24,25,63,..)). - Mantiene gli override del tema Ekka (.ec-*, .sospesa, #suggestions...). Nota: --rp-white NON viene ribaltato (resta #fff): è il "testo su scuro" e va bene in entrambi i temi. Le superfici chiare si gestiscono via --bg-*. ============================================================ */ /* ============================================================ 1) TOKENS ============================================================ */ :root[data-theme="dark"] { color-scheme: dark; /* — Ink scale: nel tema chiaro va dallo scuro (testo) al chiaro (superfici). In dark invertiamo il ruolo: i valori "alti" diventano testo chiaro, i "bassi" diventano superfici/bordi su fondo scuro. — */ --rp-ink: #e9ecf6; /* testo primario */ --rp-ink-90: #dfe3f1; --rp-ink-70: #aeb6d0; /* testo secondario */ --rp-ink-60: #9aa2bd; /* usato da blog/legali — NON definito nel tema chiaro */ --rp-ink-50: #828aa9; /* testo terziario / placeholder */ --rp-ink-40: #6f7691; /* timestamp/etichette tenui */ --rp-ink-30: #5b6178; --rp-ink-15: rgba(255, 255, 255, 0.14); /* bordi */ --rp-ink-08: rgba(255, 255, 255, 0.08); /* fill leggeri / bordi soft */ --rp-ink-04: rgba(255, 255, 255, 0.05); /* fill molto leggeri */ /* — Superfici di base — */ --rp-bg: #0d1120; --rp-bg-alt: #141a2c; --rp-bg-deep: #090c17; /* — Token semantici — */ --fg-1: #e9ecf6; --fg-2: #aeb6d0; --fg-3: #828aa9; --bg-1: #161d30; /* superficie default (card) */ --bg-2: #1b2236; /* raised / pannelli */ --bg-3: #222a40; /* sunken / muted */ --bg-deep: #090c17; --border-1: rgba(255, 255, 255, 0.14); --border-2: rgba(255, 255, 255, 0.08); --border-strong: rgba(255, 255, 255, 0.26); /* accent blu invariato — funziona già su fondo scuro */ --accent-soft: rgba(41, 121, 255, 0.22); /* ombre più profonde su fondo scuro */ --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.45); --shadow-2: 0 4px 14px rgba(0, 0, 0, 0.45); --shadow-3: 0 14px 38px rgba(0, 0, 0, 0.55); --shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.06); /* — Token "vetro scuro" custom, usati negli override sotto — */ --rpd-glass: rgba(255, 255, 255, 0.06); --rpd-glass-2: rgba(255, 255, 255, 0.09); --rpd-glass-strong: rgba(255, 255, 255, 0.11); --rpd-glass-border: rgba(255, 255, 255, 0.12); --rpd-line: rgba(255, 255, 255, 0.10); /* tile per le foto prodotto: BIANCO PURO (le foto non hanno contrasto col tile) */ --rpd-product-tile: #ffffff; } /* ============================================================ 2) BASE: body, stage, orbs, scrollbar ============================================================ */ [data-theme="dark"] body { background: var(--rp-bg); color: var(--fg-1); } /* Sfondo "liquid" della pagina: da chiaro a scuro */ [data-theme="dark"] .rp-stage { background: radial-gradient(60% 50% at 12% 8%, #18223e 0%, transparent 60%), radial-gradient(55% 45% at 92% 18%, #122237 0%, transparent 65%), radial-gradient(40% 35% at 75% 90%, #131c33 0%, transparent 70%), radial-gradient(50% 40% at 20% 95%, #101a30 0%, transparent 70%), linear-gradient(180deg, #0d1120 0%, #0a0e1a 100%); } [data-theme="dark"] .rp-stage::before { opacity: 0.55; } /* Orbs: abbassiamo l'intensità per non "bruciare" il fondo scuro */ [data-theme="dark"] .rp-orb { opacity: 0.28 !important; } [data-theme="dark"] .rp-orb.o2, [data-theme="dark"] .rp-orb.o3, [data-theme="dark"] .rp-orb.o4 { opacity: 0.18 !important; } /* Scrollbar */ [data-theme="dark"] ::-webkit-scrollbar-thumb { background: rgba(143, 186, 255, 0.28); } /* Selezione testo */ [data-theme="dark"] ::selection { background: rgba(41, 121, 255, 0.35); color: #fff; } /* Link generici (dove non gestiti da componenti) */ [data-theme="dark"] a { color: inherit; } /* ============================================================ 3) GLASS PRIMITIVES (bianchi hardcoded → vetro scuro) ============================================================ */ [data-theme="dark"] .glass { background: linear-gradient(135deg, rgba(255, 255, 255, 0.075) 0%, rgba(255, 255, 255, 0.035) 50%, rgba(255, 255, 255, 0.055) 100%); border: 1px solid var(--rpd-glass-border); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06) inset, 0 -1px 0 rgba(0, 0, 0, 0.25) inset, 0 12px 32px rgba(0, 0, 0, 0.45), 0 4px 12px rgba(0, 0, 0, 0.30); } [data-theme="dark"] .glass-strong { background: linear-gradient(180deg, rgba(255, 255, 255, 0.10) 0%, rgba(255, 255, 255, 0.05) 100%); border: 1px solid rgba(255, 255, 255, 0.14); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.07) inset, 0 0 0 1px rgba(41, 121, 255, 0.06), 0 16px 40px rgba(0, 0, 0, 0.5), 0 4px 12px rgba(0, 0, 0, 0.3); } [data-theme="dark"] .glass-soft { background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.10); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.05) inset, 0 4px 14px rgba(0, 0, 0, 0.35); } /* sheen speculare: sul fondo scuro va attenuato */ [data-theme="dark"] .glass::before { opacity: 0.18; } /* glass-ink (barra promo) è già scura: la lasciamo, solo bordo coerente */ [data-theme="dark"] .glass-ink { border-color: rgba(255, 255, 255, 0.08); } /* Bottoni vetro / icon button */ [data-theme="dark"] .btn-glass, [data-theme="dark"] .icon-btn { background: rgba(255, 255, 255, 0.06); color: var(--fg-1); border: 1px solid rgba(255, 255, 255, 0.12); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.05) inset, 0 4px 12px rgba(0, 0, 0, 0.35); } [data-theme="dark"] .btn-glass:hover, [data-theme="dark"] .icon-btn:hover { background: rgba(255, 255, 255, 0.11); } /* btn-primary blu: resta, ma alleggeriamo l'alone */ [data-theme="dark"] .btn-primary { box-shadow: 0 1px 0 rgba(255, 255, 255, 0.25) inset, 0 8px 22px rgba(41, 121, 255, 0.30), 0 2px 6px rgba(0, 0, 0, 0.3); } /* ============================================================ 4) NAV / MENU ============================================================ */ [data-theme="dark"] .nav-item { color: var(--fg-1); } [data-theme="dark"] .nav-item:hover { background: rgba(255, 255, 255, 0.08); } /* .nav-item.is-active resta blu (usa gradient hardcoded, va bene) */ /* ============================================================ 5) FOOTER ============================================================ */ [data-theme="dark"] .rp-footer-top-btn { background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.14); color: var(--rp-blue-50); box-shadow: var(--shadow-2); } [data-theme="dark"] .rp-product-column-header, [data-theme="dark"] .rp-card-info-rel, [data-theme="dark"] .rp-trust-bar { border-color: var(--rpd-line); } /* ============================================================ 6) PRODUCT CARDS / LISTE / GALLERY ============================================================ */ [data-theme="dark"] .rp-product-card { background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.10); box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4); } [data-theme="dark"] .rp-product-card:hover { box-shadow: 0 20px 48px rgba(0, 0, 0, 0.55); } [data-theme="dark"] .rp-product-list-item:hover { background: rgba(255, 255, 255, 0.05); } /* Le foto prodotto restano su tile chiaro per leggibilità */ [data-theme="dark"] .rp-card-img-wrap, [data-theme="dark"] .rp-gallery-panel, [data-theme="dark"] .rp-product-thumb-white, [data-theme="dark"] .rp-product-thumb-white img, [data-theme="dark"] .rp-gallery-panel .single-nav-thumb .single-slide { background: var(--rpd-product-tile) !important; } [data-theme="dark"] .rp-gallery-panel { border: 1px solid rgba(255, 255, 255, 0.10); box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4); } /* Chip/badge che galleggiano sopra la foto (tile chiaro): restano chiari */ /* ============================================================ 7) PRODUCT PAGE: tabs, size, qty, spec, badge ============================================================ */ [data-theme="dark"] .rp-tab-nav, [data-theme="dark"] .rp-pay-nav, [data-theme="dark"] .rp-tab-content, [data-theme="dark"] .rp-spec-table tr, [data-theme="dark"] .rp-spec-table p, [data-theme="dark"] .rp-bank-row, [data-theme="dark"] .rp-order-row { border-color: var(--rpd-line); } [data-theme="dark"] .rp-tab-link, [data-theme="dark"] .rp-pay-tab { color: var(--fg-1); } [data-theme="dark"] .rp-tab-link:hover, [data-theme="dark"] .rp-pay-tab:hover { background: rgba(41, 121, 255, 0.14); color: var(--rp-blue-50); } [data-theme="dark"] .rp-size-chip { background: rgba(255, 255, 255, 0.09) !important; border: 1.5px solid rgba(255, 255, 255, 0.22) !important; color: var(--fg-1) !important; } [data-theme="dark"] .rp-size-chip:hover { background: rgba(41, 121, 255, 0.20) !important; border-color: rgba(41, 121, 255, 0.55) !important; color: var(--rp-blue-50) !important; } /* Taglia selezionata: ripristina il blu (il mio override !important sopra coprirebbe altrimenti anche lo stato .active). Specificità + !important. */ [data-theme="dark"] .rp-size-chip.active, [data-theme="dark"] button.rp-size-chip.active { background: linear-gradient(180deg, rgba(80, 146, 255, 0.95), rgba(41, 121, 255, 1)) !important; border-color: transparent !important; color: #fff !important; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.55) inset, 0 6px 18px rgba(41, 121, 255, 0.45) !important; } /* .rp-size-chip.active resta blu */ [data-theme="dark"] .rp-qty-wrap { background: rgba(255, 255, 255, 0.05); border: 1.5px solid rgba(255, 255, 255, 0.12); } [data-theme="dark"] .rp-qty-btn:hover { background: rgba(255, 255, 255, 0.08); } /* #quantity è un : il fix input gli mette bordo/sfondo (la "scatola" attorno al numero). Va resettato trasparente come nel tema chiaro. */ [data-theme="dark"] #quantity { background: transparent !important; border: none !important; color: var(--fg-1) !important; } [data-theme="dark"] .rp-safety-item { background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.08); } [data-theme="dark"] .rp-pdf-btn { background: rgba(255, 255, 255, 0.05); border: 1.5px solid rgba(255, 255, 255, 0.12); color: var(--fg-1); } [data-theme="dark"] .rp-pdf-btn:hover { background: rgba(41, 121, 255, 0.14); border-color: rgba(41, 121, 255, 0.45); color: var(--rp-blue-50); } [data-theme="dark"] .rp-trust-pill { background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.08); color: var(--fg-2); } /* Badge disponibilità: alziamo la leggibilità su scuro */ [data-theme="dark"] .rp-availability-badge.is-available { background: rgba(41, 220, 151, 0.14); color: #5be0a8; border-color: rgba(41, 220, 151, 0.30); } [data-theme="dark"] .rp-availability-badge.is-warning { background: rgba(255, 204, 102, 0.14); color: #ffd27a; border-color: rgba(255, 204, 102, 0.30); } [data-theme="dark"] .rp-availability-badge.is-danger { background: rgba(255, 92, 92, 0.14); color: #ff8585; border-color: rgba(255, 92, 92, 0.30); } /* ============================================================ 8) FORM (Liquid Resin + Bootstrap + nativi) ============================================================ */ [data-theme="dark"] input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]), [data-theme="dark"] textarea, [data-theme="dark"] select, [data-theme="dark"] .form-control, [data-theme="dark"] .form-select, [data-theme="dark"] .rp-input, [data-theme="dark"] #card-element { background-color: rgba(255, 255, 255, 0.06) !important; color: var(--fg-1) !important; border: 1.5px solid rgba(255, 255, 255, 0.14) !important; box-shadow: none; } [data-theme="dark"] input::placeholder, [data-theme="dark"] textarea::placeholder { color: rgba(233, 236, 246, 0.45); } [data-theme="dark"] input:focus, [data-theme="dark"] textarea:focus, [data-theme="dark"] select:focus, [data-theme="dark"] .form-control:focus, [data-theme="dark"] .form-select:focus, [data-theme="dark"] .rp-input:focus, [data-theme="dark"] #card-element.StripeElement--focus { background-color: rgba(255, 255, 255, 0.08); border-color: rgba(41, 121, 255, 0.85); outline: 0; box-shadow: 0 0 0 3px rgba(41, 121, 255, 0.18); } [data-theme="dark"] .form-check-input { background-color: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.18); } [data-theme="dark"] .form-check-input:checked { background-color: var(--rp-blue); border-color: var(--rp-blue); } /* ============================================================ 9) "IL MIO ACCOUNT": settings rows, toggle, modal ============================================================ */ [data-theme="dark"] .rp-setting-row { border-bottom-color: var(--rpd-line); } [data-theme="dark"] .rp-toggle-track { background: rgba(255, 255, 255, 0.16); } [data-theme="dark"] .rp-toggle input:checked ~ .rp-toggle-track { background: var(--rp-blue); } [data-theme="dark"] .rp-modal-content { background: var(--bg-1); border: 1px solid rgba(255, 255, 255, 0.10); } [data-theme="dark"] .rp-btn-ghost { background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.12); color: var(--fg-1); } /* ============================================================ 10) BOOTSTRAP generico (modali, dropdown, tabelle, card) ============================================================ */ [data-theme="dark"] { --bs-body-bg: var(--rp-bg); --bs-body-color: var(--fg-1); } [data-theme="dark"] .modal-content, [data-theme="dark"] .dropdown-menu, [data-theme="dark"] .card, [data-theme="dark"] .list-group-item, [data-theme="dark"] .offcanvas { background-color: var(--bg-1); color: var(--fg-1); border-color: rgba(255, 255, 255, 0.10); } [data-theme="dark"] .dropdown-item { color: var(--fg-1); } [data-theme="dark"] .dropdown-item:hover { background: rgba(255, 255, 255, 0.07); color: var(--rp-blue-50); } [data-theme="dark"] .table { color: var(--fg-2); border-color: rgba(255, 255, 255, 0.10); } [data-theme="dark"] .table th, [data-theme="dark"] .table td { border-color: rgba(255, 255, 255, 0.10); } [data-theme="dark"] hr { background-color: rgba(255, 255, 255, 0.12); opacity: 1; } [data-theme="dark"] .btn-close { filter: invert(1) grayscale(1) brightness(1.6); } /* ============================================================ 11) TOAST / SWEETALERT (vetro scuro) ============================================================ */ [data-theme="dark"] #toast-container > .toast { background: linear-gradient(135deg, rgba(30, 38, 60, 0.92) 0%, rgba(22, 29, 48, 0.88) 100%) !important; border: 1px solid rgba(255, 255, 255, 0.10); color: var(--fg-1) !important; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.05) inset, 0 16px 40px rgba(0, 0, 0, 0.5) !important; } [data-theme="dark"] #toast-container > .toast::before { opacity: 0.12; } [data-theme="dark"] .toast-title { color: var(--fg-1) !important; } [data-theme="dark"] .toast-message { color: var(--fg-2) !important; } [data-theme="dark"] .toast-close-button { color: var(--fg-3) !important; } [data-theme="dark"] .rp-swal-popup { background: linear-gradient(135deg, rgba(30, 38, 60, 0.94) 0%, rgba(20, 26, 44, 0.90) 100%) !important; border: 1px solid rgba(255, 255, 255, 0.12) !important; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06) inset, 0 28px 80px rgba(0, 0, 0, 0.6) !important; } [data-theme="dark"] .rp-swal-popup::before { opacity: 0.15; } [data-theme="dark"] .rp-swal-title { color: var(--fg-1) !important; text-shadow: none; } [data-theme="dark"] .rp-swal-text { color: var(--fg-2) !important; text-shadow: none; } [data-theme="dark"] .rp-swal-text b, [data-theme="dark"] .rp-swal-text strong { color: var(--fg-1) !important; } [data-theme="dark"] .rp-swal-cancel { background: rgba(255, 255, 255, 0.06) !important; border: 1px solid rgba(255, 255, 255, 0.12) !important; color: var(--fg-1) !important; } [data-theme="dark"] .rp-swal-cancel:hover { background: rgba(255, 255, 255, 0.11) !important; } /* ============================================================ 12) EKKA THEME (.ec-*) — superfici e testo ============================================================ */ [data-theme="dark"] .ec-product-inner, [data-theme="dark"] .ec-product-lsc, [data-theme="dark"] .ec-pro-content, [data-theme="dark"] .ec-category-desc, [data-theme="dark"] .ec-page-detail, [data-theme="dark"] .ec-login-wrapper, [data-theme="dark"] .ec-register-wrapper, [data-theme="dark"] .ec-cart-content, [data-theme="dark"] .ec-single-pro-tab-content, [data-theme="dark"] .modal-box { background: var(--bg-1) !important; color: var(--fg-1) !important; border-color: rgba(255, 255, 255, 0.10) !important; } [data-theme="dark"] .bg-white { background: var(--bg-1) !important; } /* Header Ekka (se usato) */ [data-theme="dark"] .ec-header { background: rgba(13, 17, 32, 0.85) !important; border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important; backdrop-filter: blur(16px); } [data-theme="dark"] .ec-main-menu, [data-theme="dark"] .sub-menu, [data-theme="dark"] .ec-side-cart, [data-theme="dark"] .ec-menu-inner, [data-theme="dark"] .ec-menu-content, [data-theme="dark"] .ec-footer { background: var(--bg-1) !important; color: var(--fg-1) !important; border-color: rgba(255, 255, 255, 0.10) !important; } [data-theme="dark"] .ec-main-menu ul li a, [data-theme="dark"] .ec-footer .ec-footer-link a { color: var(--fg-2) !important; } [data-theme="dark"] .ec-main-menu ul li a:hover, [data-theme="dark"] .ec-footer .ec-footer-link a:hover { color: var(--rp-blue-50) !important; } [data-theme="dark"] .ec-all-product-inner .ec-pro-content .ec-pro-stitle a { color: var(--fg-1) !important; } [data-theme="dark"] .ec-all-product-inner .ec-pro-content .ec-price { color: var(--fg-2) !important; } [data-theme="dark"] .ec-all-product-inner .ec-pro-content .ec-price span.new-price { color: var(--rp-blue-50) !important; } /* Ricerca dinamica (#search / #suggestions) */ [data-theme="dark"] #search { background: rgba(255, 255, 255, 0.06) !important; color: var(--fg-1) !important; border: 1px solid rgba(255, 255, 255, 0.14) !important; } [data-theme="dark"] #suggestions { background: var(--bg-2) !important; border: 1px solid rgba(255, 255, 255, 0.12) !important; border-top: none !important; } [data-theme="dark"] .suggestion-item { color: var(--fg-2) !important; } [data-theme="dark"] .suggestion-item:hover { background: rgba(255, 255, 255, 0.07) !important; } [data-theme="dark"] .suggestion-item a { color: inherit !important; } /* Tab prodotto Ekka */ [data-theme="dark"] .ec-single-pro-tab-nav .nav-tabs .nav-link { background: transparent !important; border: 2px solid var(--rp-blue) !important; color: var(--rp-blue-50) !important; } [data-theme="dark"] .ec-single-pro-tab-nav .nav-tabs .nav-link:hover, [data-theme="dark"] .ec-single-pro-tab-nav .nav-tabs .nav-link.active { background: var(--rp-blue) !important; color: #fff !important; } /* Descrizioni prodotto: custom.css forza color:black → annulliamo */ [data-theme="dark"] .single-pro-content .ec-single-desc, [data-theme="dark"] .single-pro-content .ec-single-desc li, [data-theme="dark"] .tab-content.ec-single-pro-tab-content, [data-theme="dark"] .ec-single-pro-tab-content .ec-single-pro-tab-desc p, [data-theme="dark"] .ec-single-pro-tab-content .ec-single-pro-tab-desc ul li { color: var(--fg-2) !important; } [data-theme="dark"] .ec-single-desc a { color: var(--rp-blue-50) !important; } /* Variazioni taglia (.lisosp / ec-pro-variation) — custom.css usa bianco */ [data-theme="dark"] .ec-pro-variation .ec-pro-variation-inner.ec-pro-variation-size .ec-pro-variation-content li, [data-theme="dark"] .lisosp { background: rgba(255, 255, 255, 0.05) !important; border: 1px solid rgba(255, 255, 255, 0.12) !important; color: var(--fg-2) !important; } [data-theme="dark"] .ec-pro-variation .ec-pro-variation-inner.ec-pro-variation-size .ec-pro-variation-content .active { background-color: var(--rp-blue) !important; border-color: var(--rp-blue) !important; color: #fff !important; } /* Carrello Ekka: bottoni outline */ [data-theme="dark"] .ec-cart-update-bottom > a { background: transparent !important; color: var(--rp-blue-50) !important; border: 2px solid var(--rp-blue) !important; } [data-theme="dark"] .ec-cart-update-bottom > a:hover { background: var(--rp-blue) !important; color: #fff !important; } /* "sospesa" (gradiente animato) leggibile su scuro */ [data-theme="dark"] .sospesa div { background: var(--bg-2) !important; color: var(--fg-1) !important; } /* ============================================================ 13) Sezioni GIÀ scure nel tema chiaro → invariate (.rp-problem-section, .glass-ink, .rp-store-btn usano colori propri; le pinniamo per evitare regressioni dai token.) ============================================================ */ [data-theme="dark"] .rp-store-btn { background: rgba(255, 255, 255, 0.08); color: var(--fg-1); border: 1px solid rgba(255, 255, 255, 0.12); } [data-theme="dark"] .rp-store-btn:hover { background: rgba(255, 255, 255, 0.13); } /* ============================================================ 14) Immagini: leggera attenuazione opzionale (opt-in) ============================================================ */ [data-theme="dark"] .rp-grayscale { filter: grayscale(0.8) brightness(0.9); } [data-theme="dark"] .rp-grayscale:hover { filter: none; } /* ============================================================ 15) MENU A TENDINA (header) Definiti con background bianco nel