/* ========================================================================= PC Configurator - embedded nella scheda prodotto (stile CyberPowerPC, palette del negozio Drako). Selettori scopati sotto gli ID root per vincere la specificita' del CSS del negozio (il riepilogo vive dentro .drako-pi-actions). ========================================================================= */ #drakoCfgSummary, #drakoCfgCustomizer { --dcfg-blue:#1c63ab; --dcfg-blue-d:#154e87; --dcfg-green:#16a34a; --dcfg-card:#ffffff; --dcfg-border:#e2e6eb; --dcfg-ink:#1f2937; --dcfg-muted:#6b7280; --dcfg-red:#cf2632; --dcfg-red-bg:#fdecec; --dcfg-amber:#92600a; --dcfg-amber-bg:#fff6e5; font-family:"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif; color:var(--dcfg-ink); } #drakoCfgSummary *, #drakoCfgCustomizer *, #drakoCfgSummary *::before, #drakoCfgCustomizer *::after { box-sizing:border-box; } /* =========================== RIEPILOGO (colonna dx) ====================== */ #drakoCfgSummary { display:block; margin-top:8px; } #drakoCfgSummary .dcfg-sum-total { display:flex; flex-direction:column; gap:2px; margin-bottom:12px; } #drakoCfgSummary .dcfg-sum-total-lbl { font-size:12px; color:var(--dcfg-muted); text-transform:uppercase; letter-spacing:.03em; font-weight:600; } #drakoCfgSummary .dcfg-sum-total-val { font-size:30px; font-weight:800; color:var(--dcfg-green); line-height:1.1; } #drakoCfgSummary .dcfg-sum-alerts:empty { display:none; } #drakoCfgSummary .dcfg-sum-alerts { margin-bottom:12px; } /* ---- fatti commerciali (stile CyberPowerPC): spedizione / consegna / reso / ritiro ---- */ #drakoCfgSummary .dcfg-facts { list-style:none; margin:0 0 14px; padding:12px 0; display:flex; flex-direction:column; gap:9px; border-top:1px solid var(--dcfg-border); border-bottom:1px solid var(--dcfg-border); } #drakoCfgSummary .dcfg-fact { display:flex; align-items:center; gap:10px; font-size:13px; color:var(--dcfg-ink); line-height:1.25; } #drakoCfgSummary .dcfg-fact svg { flex:0 0 auto; width:18px; height:18px; color:var(--dcfg-blue); } #drakoCfgSummary .dcfg-fact b { font-weight:700; } #drakoCfgSummary .dcfg-sum-cta { display:flex; gap:8px; } #drakoCfgSummary .dcfg-btn { flex:1 1 0; border-radius:6px; padding:12px 10px; font-size:14px; font-weight:700; cursor:pointer; font-family:inherit; transition:background .15s,border-color .15s,color .15s; text-align:center; line-height:1.2; } #drakoCfgSummary .dcfg-btn-cust { background:#fff; color:var(--dcfg-blue); border:1.5px solid var(--dcfg-blue); } #drakoCfgSummary .dcfg-btn-cust:hover { background:#eef4fb; } #drakoCfgSummary .dcfg-btn-cart { background:var(--dcfg-blue); color:#fff; border:1.5px solid var(--dcfg-blue); } #drakoCfgSummary .dcfg-btn-cart:hover { background:var(--dcfg-blue-d); border-color:var(--dcfg-blue-d); } #drakoCfgSummary .dcfg-btn-cart:disabled { background:#aab4c0; border-color:#aab4c0; cursor:wait; } #drakoCfgSummary .dcfg-sum-msg { font-size:12.5px; margin-top:8px; text-align:center; min-height:15px; } #drakoCfgSummary .dcfg-sum-msg.is-error { color:var(--dcfg-red); } #drakoCfgSummary .dcfg-sum-msg.is-ok { color:var(--dcfg-green); font-weight:700; } #drakoCfgSummary .dcfg-tabs { display:flex; gap:2px; border-bottom:1px solid var(--dcfg-border); margin:16px 0 0; padding:0; } #drakoCfgSummary .dcfg-tab { background:none; border:none; border-bottom:2px solid transparent; padding:9px 4px; margin-right:16px; font-size:13px; font-weight:600; color:var(--dcfg-muted); cursor:pointer; font-family:inherit; } #drakoCfgSummary .dcfg-tab.is-active { color:var(--dcfg-blue); border-bottom-color:var(--dcfg-blue); } #drakoCfgSummary .dcfg-tabpane { padding-top:10px; } #drakoCfgSummary .dcfg-tabpane[hidden] { display:none; } #drakoCfgSummary .dcfg-complist { list-style:none; margin:0; padding:0; } #drakoCfgSummary .dcfg-cl-row { display:flex; align-items:center; gap:10px; padding:9px 6px; border-bottom:1px solid #eef1f4; cursor:pointer; border-radius:5px; transition:background .12s; } #drakoCfgSummary .dcfg-cl-row:hover { background:#f4f8fd; } #drakoCfgSummary .dcfg-cl-row:last-child { border-bottom:none; } #drakoCfgSummary .dcfg-cl-txt { flex:1 1 auto; min-width:0; display:flex; flex-direction:column; } #drakoCfgSummary .dcfg-cl-slot { font-size:10.5px; text-transform:uppercase; letter-spacing:.03em; color:var(--dcfg-muted); font-weight:700; } #drakoCfgSummary .dcfg-cl-val { font-size:13px; color:var(--dcfg-ink); line-height:1.3; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } #drakoCfgSummary .dcfg-cl-edit { flex:0 0 auto; font-size:12px; font-weight:700; color:var(--dcfg-blue); } #drakoCfgSummary .dcfg-cl-row.has-issue { background:var(--dcfg-red-bg); } #drakoCfgSummary .dcfg-cl-row.has-issue .dcfg-cl-val { color:var(--dcfg-red); } #drakoCfgSummary .dcfg-cl-row.has-issue::after { content:"\26A0"; color:var(--dcfg-red); font-size:14px; margin-left:2px; } #drakoCfgSummary .dcfg-alert { display:flex; align-items:flex-start; gap:10px; border-radius:8px; padding:12px 14px; font-size:13.5px; font-weight:600; line-height:1.45; margin-bottom:10px; } #drakoCfgSummary .dcfg-alert:last-child { margin-bottom:0; } #drakoCfgSummary .dcfg-alert-ico { flex:0 0 auto; font-size:19px; line-height:1.2; } #drakoCfgSummary .dcfg-alert.is-error { background:var(--dcfg-red-bg); color:#8a1a1f; border:1px solid #f3b4b6; border-left:4px solid var(--dcfg-red); } #drakoCfgSummary .dcfg-alert.is-warn { background:var(--dcfg-amber-bg); color:var(--dcfg-amber); border:1px solid #f3d68a; border-left:4px solid var(--dcfg-amber); } /* ======================= PERSONALIZZATORE (full-width) =================== */ #drakoCfgCustomizer.dcfg-cust { background:#f5f6f8; border:1px solid var(--dcfg-border); border-radius:10px; padding:18px; margin:8px 0 28px; } #drakoCfgCustomizer.dcfg-cust[hidden] { display:none; } #drakoCfgCustomizer .drako-pcb2-opt { display:flex; align-items:center; gap:12px; padding:10px 12px; background:#fff; border:1px solid var(--dcfg-border); border-radius:6px; cursor:pointer; position:relative; transition:border-color .15s,box-shadow .15s; } #drakoCfgCustomizer .drako-pcb2-opt:hover { border-color:var(--dcfg-blue); box-shadow:0 1px 4px rgba(28,99,171,.12); } #drakoCfgCustomizer .drako-pcb2-opt input[type=radio], #drakoCfgCustomizer .drako-pcb2-opt input[type=checkbox] { position:absolute; opacity:0; pointer-events:none; } #drakoCfgCustomizer .drako-pcb2-opt-radio { display:none; } #drakoCfgCustomizer .drako-pcb2-opt.is-selected { border-color:var(--dcfg-green); box-shadow:0 0 0 2px var(--dcfg-green) inset; background:#f0fdf4; } #drakoCfgCustomizer .drako-pcb2-opt.is-selected .drako-pcb2-opt-radio { border-color:var(--dcfg-blue); } #drakoCfgCustomizer .drako-pcb2-opt.is-selected .drako-pcb2-opt-radio::after { content:""; position:absolute; inset:3px; border-radius:50%; background:var(--dcfg-blue); } #drakoCfgCustomizer .drako-pcb2-opt-img { flex:0 0 auto; width:48px; height:48px; object-fit:contain; background:#fff; border-radius:4px; } #drakoCfgCustomizer .drako-pcb2-opt-body { flex:1 1 auto; min-width:0; } #drakoCfgCustomizer .drako-pcb2-opt-brand { font-size:10px; text-transform:uppercase; letter-spacing:.05em; color:var(--dcfg-muted); font-weight:700; } #drakoCfgCustomizer .drako-pcb2-opt-name { font-size:13px; font-weight:600; color:var(--dcfg-ink); line-height:1.3; } #drakoCfgCustomizer .drako-pcb2-opt-specs { display:flex; flex-wrap:wrap; gap:4px 8px; margin-top:3px; } #drakoCfgCustomizer .drako-pcb2-opt-specs span { font-size:11px; color:#4b5563; background:#f0f2f5; border-radius:3px; padding:1px 6px; } #drakoCfgCustomizer .drako-pcb2-opt-price { flex:0 0 auto; text-align:right; } #drakoCfgCustomizer .drako-pcb2-opt-delta { font-size:14px; font-weight:700; white-space:nowrap; color:#1a1a1a; } /* IL COLORE TORNA A SIGNIFICARE (15/08) — vedi anche la regola gemella ~riga 556. is-positive = sovrapprezzo (delta > 0), is-negative = risparmio (delta < 0): confermato in pc_configurator_v2.php:961-966. Erano entrambi #1a1a1a, quindi un risparmio di 330 € era colorato identico a un sovrapprezzo di 40 e chi guardava non poteva sapere se l'opzione fosse meglio o peggio. Si resta dentro l'intenzione dell'autore («non verde/rosso»): NIENTE rosso. Il sovrapprezzo è neutro, solo il risparmio si tinge — #15803d su bianco = 5,01:1, #374151 = 10,31:1. */ #drakoCfgCustomizer .drako-pcb2-opt-delta.is-positive, #drakoCfgCustomizer .drako-pcb2-opt-delta.delta-plus { color:#374151; } #drakoCfgCustomizer .drako-pcb2-opt-delta.is-negative, #drakoCfgCustomizer .drako-pcb2-opt-delta.delta-minus { color:#15803d; } #drakoCfgCustomizer .drako-pcb2-opt-delta.is-included, #drakoCfgCustomizer .drako-pcb2-opt-delta.delta-zero { color:var(--dcfg-muted); font-weight:700; font-size:11px; text-transform:uppercase; letter-spacing:.03em; } #drakoCfgCustomizer .drako-pcb2-opt-amount { font-size:11px; color:var(--dcfg-muted); margin-top:2px; } #drakoCfgCustomizer .drako-pcb2-opt-code { display:none; } #drakoCfgCustomizer .drako-pcb2-opt-rating { display:flex; align-items:center; gap:5px; margin-top:2px; } #drakoCfgCustomizer .dcfg-stars { color:#f5a623; font-size:12px; letter-spacing:1px; line-height:1; } #drakoCfgCustomizer .dcfg-rating-num { font-size:10px; color:var(--dcfg-muted); } /* indicatore di disponibilita' (l'ordinamento mette i disponibili prima) */ #drakoCfgCustomizer .drako-pcb2-opt-avail { font-size:10px; font-weight:700; margin-top:3px; display:inline-flex; align-items:center; gap:4px; } #drakoCfgCustomizer .drako-pcb2-opt-avail::before { content:"\25CF"; font-size:8px; } #drakoCfgCustomizer .drako-pcb2-opt-avail.is-avail { color:#15803d; } #drakoCfgCustomizer .drako-pcb2-opt-avail.is-order { color:var(--dcfg-muted); } /* incompatibile: SELEZIONABILE ma segnalato (stile iBUYPOWER) */ #drakoCfgCustomizer .drako-pcb2-opt.is-incompat { border-color:var(--dcfg-border); background:#fff; } #drakoCfgCustomizer .drako-pcb2-opt.is-incompat .drako-pcb2-opt-radio { border-color:#c9ced6; } #drakoCfgCustomizer .drako-pcb2-opt.is-incompat.is-selected { border-color:var(--dcfg-red); box-shadow:0 0 0 1px var(--dcfg-red) inset; background:var(--dcfg-red-bg); } #drakoCfgCustomizer .drako-pcb2-opt.is-incompat.is-selected .drako-pcb2-opt-radio::after { background:var(--dcfg-red); } #drakoCfgCustomizer .drako-pcb2-opt-incompat-msg { display:flex; align-items:flex-start; gap:6px; margin-top:6px; font-size:12px; font-weight:500; color:#4b5563; background:#f3f4f6; border:1px solid var(--dcfg-border); border-radius:6px; padding:6px 9px; line-height:1.35; } #drakoCfgCustomizer .drako-pcb2-opt-oos-msg { margin-top:5px; font-size:12.5px; color:var(--dcfg-amber); font-weight:700; } #drakoCfgCustomizer .drako-pcb2-opt.is-oos { opacity:.55; cursor:not-allowed; } /* "Non disponibile" (no coda/backorder + fuori stock): grigio e non cliccabile, card e lista */ #drakoCfgCustomizer .drako-pcb2-opt.is-unavailable { opacity:.6; filter:grayscale(.5); cursor:not-allowed; pointer-events:none; } /* prodotti incompatibili: non selezionabili (input disabled) + cursore not-allowed; motivo inline sempre visibile */ #drakoCfgCustomizer .drako-pcb2-opt.is-incompat:not(.is-selected) { cursor:not-allowed; } #drakoCfgCustomizer .drako-pcb2-opt.is-incompat:not(.is-selected) * { cursor:not-allowed; } #drakoCfgCustomizer .drako-pcb2-opt.is-incompat:hover { border-color:var(--dcfg-border); box-shadow:none; } /* incompatibili: niente prezzo (non e' selezionabile, il delta sarebbe fuorviante); !important perche' la feature FPS forza display:flex sul prezzo */ #drakoCfgCustomizer .drako-pcb2-opt.is-incompat .drako-pcb2-opt-price { display:none !important; } /* icona info (i) sull'angolo dell'immagine -> apre la modale scheda tecnica */ #drakoCfgCustomizer .drako-pcb2-opt-info { position:absolute; top:6px; right:6px; z-index:6; width:30px; height:30px; padding:0; border-radius:50%; border:1px solid #c7d2e0; background:#fff; color:#1c63ab; display:flex; align-items:center; justify-content:center; cursor:pointer; box-shadow:0 1px 3px rgba(16,24,40,.22); transition:background .15s,color .15s,border-color .15s; } #drakoCfgCustomizer .drako-pcb2-opt.is-incompat:not(.is-selected) .drako-pcb2-opt-info, #drakoCfgCustomizer .drako-pcb2-opt.is-incompat:not(.is-selected) .drako-pcb2-opt-info * { cursor:pointer !important; } #drakoCfgCustomizer .drako-pcb2-opt-info > span { font-family:Georgia,'Times New Roman',serif; font-style:italic; font-weight:700; font-size:15px; line-height:1; } #drakoCfgCustomizer .drako-pcb2-opt-info:hover { background:#1c63ab; color:#fff; border-color:#1c63ab; } /* in lista l'immagine e' piccola: l'icona info in alto-destra si sovrappone al badge Promo -> spostata in basso-destra */ /* Vista a LISTA: la "i" va ancorata all'IMMAGINE, non alla card. Senza un contenitore posizionato si riferiva alla riga intera, che e' larga quanto il pannello, e finiva in fondo a destra staccata dalla miniatura. */ #drakoCfgCustomizer .dcfg-cat-grid.is-list .drako-pcb2-opt-imgwrap { position:relative; flex:0 0 auto; display:inline-flex; } #drakoCfgCustomizer .dcfg-cat-grid.is-list .drako-pcb2-opt-info { width:18px; height:18px; top:auto; left:auto; bottom:1px; right:1px; } #drakoCfgCustomizer .dcfg-cat-grid.is-list .drako-pcb2-opt-info > span { font-size:12px; } html[data-theme="dark"] #drakoCfgCustomizer .drako-pcb2-opt-info { background:#141a24; color:#7fb2ff; border-color:#2b3444; } html[data-theme="dark"] #drakoCfgCustomizer .drako-pcb2-opt-info:hover { background:#1c63ab; color:#fff; border-color:#1c63ab; } /* Modale scheda tecnica (aperta dall'icona "i"): nome + immagini + tutta la scheda tecnica */ #dcfgInfoModal { position:fixed; inset:0; z-index:100000; background:rgba(15,23,42,.6); display:flex; align-items:center; justify-content:center; padding:28px 18px; } #dcfgInfoModal[hidden] { display:none; } #dcfgInfoModal .dcfg-info-box { position:relative; background:#fff; color:#1f2937; border-radius:12px; max-width:900px; width:100%; max-height:min(880px, calc(100vh - 56px)); display:flex; flex-direction:column; overflow:hidden; box-shadow:0 24px 70px rgba(0,0,0,.4); } #dcfgInfoModal .dcfg-info-content { flex:1 1 auto; display:flex; flex-direction:column; min-height:0; padding:22px 24px 20px; } #dcfgInfoModal .dcfg-info-scroll { flex:1 1 auto; min-height:0; overflow-y:auto; padding-right:6px; } #dcfgInfoModal .dcfg-info-close { position:absolute; top:9px; right:11px; width:30px; height:30px; border:none; background:transparent; color:#6b7280; font-size:26px; line-height:1; cursor:pointer; border-radius:6px; } #dcfgInfoModal .dcfg-info-close:hover { background:#f0f2f5; color:#111827; } #dcfgInfoModal .dcfg-info-head { flex:0 0 auto; display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin:0 0 14px; padding-right:36px; } #dcfgInfoModal .dcfg-info-title { margin:0; font-size:19px; font-weight:800; line-height:1.3; color:#1f2937; } #dcfgInfoModal .dcfg-info-link { flex:0 0 auto; display:inline-flex; align-items:center; gap:5px; font-size:13px; font-weight:700; color:#1c63ab; text-decoration:none; border:1px solid #c7d2e0; border-radius:999px; padding:5px 13px; white-space:nowrap; transition:background .15s,color .15s,border-color .15s; } #dcfgInfoModal .dcfg-info-link:hover { background:#1c63ab; color:#fff; border-color:#1c63ab; } html[data-theme="dark"] #dcfgInfoModal .dcfg-info-link { color:#7fb2ff; border-color:#2b3444; } html[data-theme="dark"] #dcfgInfoModal .dcfg-info-link:hover { background:#1c63ab; color:#fff; border-color:#1c63ab; } /* galleria: immagine grande + strip di miniature (come la pagina prodotto) */ #dcfgInfoModal .dcfg-info-gallery { margin:0 0 18px; } #dcfgInfoModal .dcfg-info-main-wrap { display:flex; align-items:center; justify-content:center; background:#fff; border:1px solid #e5e7eb; border-radius:10px; padding:12px; margin-bottom:10px; } #dcfgInfoModal .dcfg-info-main { max-width:100%; width:auto; max-height:400px; object-fit:contain; } #dcfgInfoModal .dcfg-info-thumbs { display:flex; flex-wrap:wrap; gap:8px; justify-content:flex-start; } #dcfgInfoModal .dcfg-info-thumb { width:58px; height:58px; background:#fff; border:1px solid #e5e7eb; border-radius:8px; padding:3px; cursor:pointer; transition:border-color .15s,box-shadow .15s; } #dcfgInfoModal .dcfg-info-thumb img { display:block; width:100%; height:100%; object-fit:contain; } #dcfgInfoModal .dcfg-info-thumb:hover { border-color:#1c63ab; } #dcfgInfoModal .dcfg-info-thumb.is-active { border-color:#1c63ab; box-shadow:0 0 0 1px #1c63ab; } #dcfgInfoModal .dcfg-info-thumb:focus-visible { outline:2px solid var(--drako-focus-ring, #1c63ab); outline-offset:2px; } /* scheda tecnica = descrizione prodotto (classe product_desc_text): resa identica alla pagina prodotto */ #dcfgInfoModal .dcfg-info-desc { font-size:14px; line-height:1.55; } #dcfgInfoModal .dcfg-info-desc img { max-width:100%; height:auto; } #dcfgInfoModal .dcfg-info-desc table { max-width:100%; } #dcfgInfoModal .dcfg-info-desc > *:first-child { margin-top:0; } #dcfgInfoModal .dcfg-info-loading, #dcfgInfoModal .dcfg-info-empty { color:#6b7280; font-size:14px; padding:24px 0; text-align:center; } html[data-theme="dark"] #dcfgInfoModal .dcfg-info-box { background:#21252e; color:#e6eaf0; } html[data-theme="dark"] #dcfgInfoModal .dcfg-info-title { color:#eef1f6; } html[data-theme="dark"] #dcfgInfoModal .dcfg-info-close { color:#aeb6c2; } html[data-theme="dark"] #dcfgInfoModal .dcfg-info-close:hover { background:#2a2f3a; color:#fff; } html[data-theme="dark"] #dcfgInfoModal .dcfg-info-desc { color:#e6eaf0; } html[data-theme="dark"] #dcfgInfoModal .dcfg-info-main-wrap, html[data-theme="dark"] #dcfgInfoModal .dcfg-info-thumb { border-color:#333b49; } /* warning sull'immagine delle componenti incompatibili (velo rosso + triangolo, in card e lista) */ #drakoCfgCustomizer .drako-pcb2-opt-imgwrap { position:relative; flex:0 0 auto; display:inline-block; line-height:0; } #drakoCfgCustomizer .dcfg-cat-grid:not(.is-list) .drako-pcb2-opt-imgwrap { display:block; width:100%; } #drakoCfgCustomizer .drako-pcb2-opt-imgwrap > .drako-pcb2-opt-img { display:block; } #drakoCfgCustomizer .drako-pcb2-opt.is-incompat.is-selected .drako-pcb2-opt-imgwrap::after { content:"\26A0"; position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:22px; color:#fff; background:rgba(207,38,50,.42); border-radius:4px; z-index:2; pointer-events:none; } html[data-theme="dark"] #drakoCfgCustomizer .drako-pcb2-opt.is-incompat.is-selected .drako-pcb2-opt-imgwrap::after { background:rgba(122,32,40,.52); color:#ffe1e3; } /* card view: icona incompatibilita' grande che copre tutta l'immagine (in lista resta 22px) */ /* FASE A 2026-07-13: rimosso il triangolo 150px in vista griglia (restava solo sul conflitto attivo, 22px) */ /* Sticky bar: blocco "Consegna stimata / Pagamenti sicuri" leggermente tagliato -> piu' respiro verticale (line-height stretta + icone emoji piu' alte del box venivano clippate da overflow:hidden). Alta specificita' per vincere sulle regole accumulate. */ html body #drakoCfgBar.dcfg-bar .dcfg-bar-data-line{ overflow:visible !important; line-height:1.45 !important; align-content:center !important; } html body #drakoCfgBar.dcfg-bar .dcfg-bar-data-line i{ line-height:1 !important; vertical-align:middle !important; } /* Alimentatore: stato ambra (regge il carico ma sotto la potenza consigliata) - NON incompatibile */ #drakoCfgCustomizer .dcfg-psu-verdict.warn, #drakoCfgSummary .dcfg-psu-verdict.warn, #drakoCfgBar .dcfg-psu-verdict.warn { background:rgba(240,180,41,.14); color:#92600a; } #drakoCfgCustomizer .dcfg-psu-gauge-cap.warn, #drakoCfgSummary .dcfg-psu-gauge-cap.warn, #drakoCfgBar .dcfg-psu-gauge-cap.warn { background:#e6a417; } #drakoCfgBar .dcfg-bar-psu.is-warn, #drakoCfgCustomizer .dcfg-bar-psu.is-warn { background:#fff6e5; border-color:#e8cf9a; } #drakoCfgBar .dcfg-bar-psu.is-warn .dcfg-bar-badge-txt b, #drakoCfgCustomizer .dcfg-bar-psu.is-warn .dcfg-bar-badge-txt b { color:#92600a; } /* opzione "Nessuno" per periferiche opzionali */ #drakoCfgCustomizer .drako-pcb2-opt.dcfg-opt-none { border-style:dashed; } #drakoCfgCustomizer .drako-pcb2-opt.dcfg-opt-none .drako-pcb2-opt-name { color:var(--dcfg-muted); } /* ===================== BARRA STICKY IN ALTO (CyberPowerPC) ================= */ /* per i prodotti configuratore il riepilogo destro NON e' sticky: scorre via e la barra in alto prende il suo posto */ .drako-pi-info.dcfg-info-nostick { position:static; top:auto; } /* colonna dx configuratore: sottotitolo + codici restano sotto il titolo (come nella scheda standard); il blocco commerciale (spedizione/reso/ritiro) e' ricreato in stile CyberPowerPC dentro il riepilogo (.dcfg-facts), quindi nascondo solo i blocchi ridondanti. rev 07-15k: .drako-pi-trust NON piu' nascosto (ripristino parita' scheda standard, richiesta utente) rev 07-15l: idem .drako-pi-askbot ("Hai domande?") - resta nascosto solo .drako-pi-stock */ .drako-pi-info.dcfg-info-nostick .drako-pi-stock { display:none !important; } #drakoCfgBar { position:fixed; left:0; right:0; top:131px; z-index:890; background:#fff; color:#1f2937; border-bottom:1px solid #e2e6eb; box-shadow:0 3px 14px rgba(0,0,0,.10); opacity:0; visibility:hidden; transform:translateY(-10px); transition:opacity .2s ease, transform .2s ease, visibility .2s; font-family:"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif; } #drakoCfgBar.is-visible { opacity:1; visibility:visible; transform:translateY(0); } #drakoCfgBar *, #drakoCfgBar *::before, #drakoCfgBar *::after { box-sizing:border-box; } #drakoCfgBar .dcfg-bar-inner { max-width:1240px; margin:0 auto; padding:9px 20px; display:flex; align-items:center; gap:18px; } #drakoCfgBar .dcfg-bar-summary { background:none; border:none; font-size:15px; font-weight:700; color:#1f2937; cursor:pointer; display:inline-flex; align-items:center; gap:6px; font-family:inherit; white-space:nowrap; } #drakoCfgBar .dcfg-bar-chev { font-size:12px; color:var(--dcfg-muted); transition:transform .2s; } #drakoCfgBar.is-open .dcfg-bar-chev { transform:rotate(180deg); } #drakoCfgBar .dcfg-bar-badge { display:inline-flex; align-items:center; gap:8px; background:#f0f4f8; border:1px solid var(--dcfg-border); border-radius:8px; padding:5px 12px; } #drakoCfgBar .dcfg-bar-badge-img { width:30px; height:30px; display:block; flex:0 0 auto; filter:drop-shadow(0 1px 2px rgba(20,30,55,.25)); } #drakoCfgBar .dcfg-bar-badge-txt { display:flex; flex-direction:column; line-height:1.15; } #drakoCfgBar .dcfg-bar-badge-txt small, #drakoCfgBar .dcfg-bar-ship small { font-size:9px; text-transform:uppercase; letter-spacing:.04em; color:var(--dcfg-muted); font-weight:700; } #drakoCfgBar .dcfg-bar-badge-txt b { font-size:14px; } #drakoCfgBar .dcfg-bar-psu.is-bad { background:#fdecec; border-color:#f3b4b6; } #drakoCfgBar .dcfg-bar-ship { display:flex; flex-direction:column; line-height:1.15; } #drakoCfgBar .dcfg-bar-ship b { font-size:13px; } #drakoCfgBar .dcfg-bar-spacer { flex:1 1 auto; } #drakoCfgBar .dcfg-bar-total { font-size:22px; color:var(--dcfg-green); white-space:nowrap; } #drakoCfgBar .dcfg-bar-add { background:var(--dcfg-blue); color:#fff; border:none; border-radius:6px; padding:10px 22px; font-size:14px; font-weight:700; cursor:pointer; font-family:inherit; white-space:nowrap; } #drakoCfgBar .dcfg-bar-add:hover { background:var(--dcfg-blue-d); } #drakoCfgBar .dcfg-bar-add:disabled { background:#aab4c0; cursor:wait; } #drakoCfgBar .dcfg-bar-dropdown { max-width:1240px; margin:0 auto; padding:2px 20px 14px; border-top:1px solid #f0f2f5; } #drakoCfgBar .dcfg-bar-dropdown[hidden] { display:none; } #drakoCfgBar .dcfg-bar-complist { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:0 28px; } #drakoCfgBar .dcfg-bar-complist li { display:flex; justify-content:space-between; gap:12px; padding:5px 0; border-bottom:1px solid #f0f2f5; font-size:12.5px; } #drakoCfgBar .dcfg-bar-cl-slot { color:var(--dcfg-muted); font-weight:600; white-space:nowrap; } #drakoCfgBar .dcfg-bar-cl-val { color:#1f2937; text-align:right; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } @media (max-width:820px){#drakoCfgBar .dcfg-bar-ship { display:none; } #drakoCfgBar .dcfg-bar-badge-txt small { display:none; } #drakoCfgBar .dcfg-bar-complist { grid-template-columns:1fr; }} /* ===== prezzi (richiesta): SOLO il Totale build + la variazione per componente ===== - il Totale torna visibile (stile "Subtotal" CyberPowerPC) - sulla card opzione si mostra SOLO il delta rispetto al prodotto di default (non il prezzo assoluto) - niente chip di specifiche */ #drakoCfgCustomizer .drako-pcb2-opt-amount { display:none !important; } /* chip: spec-pill sulle card + badge chip nella barra: non servono. ⚠️ 16/08: la mannaia era su TUTTE le specifiche, con `!important`, e teneva spenta anche la riga di sigle della vista ELENCO — dove invece è il dato su cui si sceglie. Ristretta alla vista a CARD, che è quella per cui era nata: là le tre pastiglie disegnavano riquadri e rubavano peso al nome. */ #drakoCfgCustomizer .dcfg-cat-grid:not(.is-list) .drako-pcb2-opt-specs, #drakoCfgBar .dcfg-bar-psu { display:none !important; } /* ============= PERSONALIZZATORE full-width stile CyberPowerPC ============= */ /* (override del vecchio box accordion) */ #drakoCfgCustomizer.dcfg-cust { background:transparent; border:none; padding:0; margin:26px 0 36px; } #drakoCfgCustomizer .dcfg-cust-shell { display:grid; grid-template-columns:320px 1fr; gap:34px; align-items:start; } @media (max-width:900px){#drakoCfgCustomizer .dcfg-cust-shell { grid-template-columns:1fr; }} /* nav categorie (sinistra, sticky) */ #drakoCfgCustomizer .dcfg-cnav { position:sticky; top:88px; align-self:start; } @media (max-width:900px){#drakoCfgCustomizer .dcfg-cnav { position:static; top:auto; margin-bottom:10px; }} #drakoCfgCustomizer .dcfg-cnav-group { margin-bottom:16px; } #drakoCfgCustomizer .dcfg-cnav-group ul { list-style:none; margin:0; padding:0; } #drakoCfgCustomizer .dcfg-cnav-link { position:relative; display:flex; align-items:center; gap:13px; padding:9px 8px; font-size:13px; color:#374151; text-decoration:none; border-left:2px solid transparent; border-radius:0 4px 4px 0; } #drakoCfgCustomizer .dcfg-cnav-link:hover { background:#f0f4f8; color:#1c63ab; } #drakoCfgCustomizer .dcfg-cnav-link.is-active { background:#eef4fb; color:#1c63ab; border-left-color:#1c63ab; font-weight:700; } /* nav laterale: warning = ambra, incompatibilita' (error) = rosso */ #drakoCfgCustomizer .dcfg-cnav-link.has-issue { font-weight:700; } #drakoCfgCustomizer .dcfg-cnav-link.has-issue::after { content:"\26A0"; position:absolute; top:3px; right:5px; font-size:12px; } #drakoCfgCustomizer .dcfg-cnav-link.has-warn { color:#92600a; } #drakoCfgCustomizer .dcfg-cnav-link.has-error { color:var(--dcfg-red); } /* riepilogo visivo nella nav (stile CyberPowerPC): foto case + miniatura/nome per componente, senza prezzi */ #drakoCfgCustomizer .dcfg-cnav-hero { display:none; } #drakoCfgCustomizer .dcfg-cnav-hero-img { max-width:100%; max-height:210px; object-fit:contain; } #drakoCfgCustomizer .dcfg-cnav-thumb { flex:0 0 64px; width:64px; height:64px; display:flex; align-items:center; justify-content:center; background:#fff; border:1px solid #eef0f3; border-radius:8px; overflow:hidden; } #drakoCfgCustomizer .dcfg-cnav-thumb img { max-width:100%; max-height:100%; object-fit:contain; } #drakoCfgCustomizer .dcfg-cnav-thumb:empty { background:#f6f7f9; } #drakoCfgCustomizer .dcfg-cnav-txt { flex:1 1 auto; min-width:0; display:flex; flex-direction:column; line-height:1.25; } #drakoCfgCustomizer .dcfg-cnav-lbl { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.03em; color:#5f6774; } #drakoCfgCustomizer .dcfg-cnav-name { font-size:14px; font-weight:600; color:#1f2937; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } #drakoCfgCustomizer .dcfg-cnav-link:hover .dcfg-cnav-name { color:#1c63ab; } #drakoCfgCustomizer .dcfg-cnav-link.has-warn .dcfg-cnav-name { color:#92600a; } #drakoCfgCustomizer .dcfg-cnav-link.has-error .dcfg-cnav-name { color:var(--dcfg-red); } #drakoCfgCustomizer .dcfg-cnav-edit { display:none; } /* aree categoria (destra) */ #drakoCfgCustomizer .dcfg-cmain { min-width:0; } /* --- FPS stimati "sotto la configurazione": blocco full-width sotto lo shell. Il tab FPS e' rimosso SOLO dal pannello riepilogo (drako_cfg_render_summary); qui sotto resta il widget completo (con readout multi-gioco). --- */ /* Alimentazione (PSU): pannello nel riepilogo nascosto su richiesta (resta accessibile dal dropdown Alimentazione della barra sticky, che ne clona il contenuto). force-hide: la classe .dcfg-psu porta un display che vince sull'attributo hidden, quindi serve !important. */ #drakoCfgSummary [data-role="psu"] { display:none !important; } /* Nav allineata al titolo della prima categoria SENZA margine sulla nav: la nav e' sticky, quindi un margin-top lascerebbe uno spazio vuoto sopra la hero allo scroll. Invece azzero il padding-top della prima .dcfg-cat (il titolo "Case" sale all'altezza della hero) e allineo con il padding della hero. */ #drakoCfgCustomizer .dcfg-cmain .dcfg-cat:first-child { padding-top:0; } /* Il click su "Personalizza" (e sulle righe della nav) scrolla al configuratore con scrollIntoView; senza offset il titolo categoria finisce sotto la barra sticky (~80px). scroll-margin-top lo ferma sotto la barra, cosi' il titolo "Case" resta intero e non tagliato. */ #drakoCfgCustomizer, #drakoCfgCustomizer .dcfg-cat { scroll-margin-top: 104px; } #drakoCfgCustomizer .dcfg-cat { padding:6px 0 8px; border-bottom:1px solid #e8ebef; scroll-margin-top:104px; } #drakoCfgCustomizer .dcfg-cat:last-child { border-bottom:none; } #drakoCfgCustomizer .dcfg-cat-head { display:flex; align-items:baseline; gap:8px; margin-bottom:14px; flex-wrap:wrap; } #drakoCfgCustomizer .dcfg-cat-title { font-size:17px; font-weight:800; color:#1f2937; } #drakoCfgCustomizer .dcfg-cat-sep { color:#9aa3ad; } #drakoCfgCustomizer .dcfg-cat-sel { font-size:14px; color:#1c63ab; font-weight:600; } #drakoCfgCustomizer .dcfg-cat.has-warn .dcfg-cat-sel { color:#92600a; } #drakoCfgCustomizer .dcfg-cat.has-error .dcfg-cat-sel { color:#cf2632; } #drakoCfgCustomizer .dcfg-cat.has-issue .dcfg-cat-title::after { content:"\26A0"; margin-left:8px; font-size:18px; vertical-align:-1px; } #drakoCfgCustomizer .dcfg-cat.has-warn .dcfg-cat-title::after { color:#92600a; } #drakoCfgCustomizer .dcfg-cat.has-error .dcfg-cat-title::after { color:var(--dcfg-red); } #drakoCfgCustomizer .dcfg-cat.has-warn .dcfg-cat-title { color:#92600a; } #drakoCfgCustomizer .dcfg-cat.has-error .dcfg-cat-title { color:var(--dcfg-red); } /* riepilogo (colonna dx): componente con problema evidenziato - warning ambra, incompatibilita' rossa */ #drakoCfgSummary .dcfg-cl-row.has-warn .dcfg-cl-slot { color:#92600a; font-weight:700; } #drakoCfgSummary .dcfg-cl-row.has-error .dcfg-cl-slot { color:var(--dcfg-red); font-weight:700; } #drakoCfgSummary .dcfg-cl-row.has-issue .dcfg-cl-slot::after { content:" \26A0"; } /* incompatibilita': respiro che TOGLIE e RIMETTE il bordo rosso (tutte le card incompat, sempre). Il bordo statico e' reso trasparente: il bordo rosso lo disegna il box-shadow animato, che a meta' ciclo sparisce (0, trasparente) e poi torna (2px rosso). */ @keyframes dcfgBreatheBox { 0%{box-shadow:0 0 0 0 rgba(146,96,10,0) inset;} 16%{box-shadow:0 0 0 2px rgba(146,96,10,.85) inset;} 33%{box-shadow:0 0 0 0 rgba(146,96,10,0) inset;} 50%{box-shadow:0 0 0 2px rgba(146,96,10,.85) inset;} 66%{box-shadow:0 0 0 0 rgba(146,96,10,0) inset;} 83%{box-shadow:0 0 0 2px rgba(146,96,10,.85) inset;} 100%{box-shadow:0 0 0 0 rgba(146,96,10,0) inset;} } #drakoCfgCustomizer .drako-pcb2-opt.is-incompat, #drakoCfgCustomizer .drako-pcb2-opt.is-incompat.is-selected { border-color:transparent; } #drakoCfgCustomizer .drako-pcb2-opt.is-incompat { animation:dcfgBreatheBox 1.6s ease-in-out infinite; } /* griglia di card 3 colonne */ #drakoCfgCustomizer .dcfg-cat-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; } @media (max-width:1200px){#drakoCfgCustomizer .dcfg-cat-grid { grid-template-columns:repeat(3,1fr); }} @media (max-width:900px){#drakoCfgCustomizer .dcfg-cat-grid { grid-template-columns:repeat(2,1fr); }} @media (max-width:560px){#drakoCfgCustomizer .dcfg-cat-grid { grid-template-columns:1fr; }} /* card opzione (override del layout orizzontale -> verticale) */ #drakoCfgCustomizer .dcfg-cat-grid .drako-pcb2-opt { flex-direction:column; align-items:stretch; text-align:left; gap:7px; padding:12px; } #drakoCfgCustomizer .dcfg-cat-grid .drako-pcb2-opt-img { width:100%; height:92px; } #drakoCfgCustomizer .dcfg-cat-grid .drako-pcb2-opt-name { font-size:12px; } #drakoCfgCustomizer .dcfg-cat-grid .drako-pcb2-opt-radio { position:absolute; top:10px; right:10px; } #drakoCfgCustomizer .dcfg-cat-grid .drako-pcb2-opt-body { flex:1 1 auto; min-width:0; } /* gruppi nav sempre aperti (non collassabili) */ /* sezioni categoria sempre aperte (non collassabili) */ #drakoCfgCustomizer .dcfg-cat-head { padding:8px 0; margin-bottom:20px; } /* riepilogo: lista componenti scrollabile (come CyberPowerPC) */ #drakoCfgSummary .dcfg-complist { max-height:340px; overflow-y:auto; } /* reset configurazione */ /* toggle vista Card/Lista nell'header categoria: default dal back-office, l'utente puo' comunque cambiarlo. Filtro rimosso. */ #drakoCfgCustomizer .dcfg-cat-view { margin-left:auto; align-self:center; display:inline-flex; border:1px solid #d7dce2; border-radius:6px; overflow:hidden; } #drakoCfgCustomizer .dcfg-view-btn { border:none; background:#fff; color:#6b7280; cursor:pointer; font-family:inherit; font-size:12px; font-weight:600; padding:4px 12px; line-height:1.4; } #drakoCfgCustomizer .dcfg-view-btn + .dcfg-view-btn { border-left:1px solid #d7dce2; } #drakoCfgCustomizer .dcfg-view-btn.is-active { background:#1c63ab; color:#fff; } /* vista LISTA (override card verticale -> orizzontale) */ #drakoCfgCustomizer .dcfg-cat-grid.is-list { grid-template-columns:1fr; gap:6px; } #drakoCfgCustomizer .dcfg-cat-grid.is-list .drako-pcb2-opt { flex-direction:row; align-items:center; gap:10px; padding:6px 12px; } #drakoCfgCustomizer .dcfg-cat-grid.is-list .drako-pcb2-opt-img { width:40px; height:40px; flex:0 0 auto; } #drakoCfgCustomizer .dcfg-cat-grid.is-list .drako-pcb2-opt-radio { position:static; } #drakoCfgCustomizer .dcfg-cat-grid.is-list .drako-pcb2-opt-body { flex:1 1 auto; display:flex; flex-direction:column; justify-content:center; gap:1px; } /* Modalita' LISTA compatta: righe basse, meta ravvicinate, niente chip specifiche */ #drakoCfgCustomizer .dcfg-cat-grid.is-list .drako-pcb2-opt-body > * { margin:0; } #drakoCfgCustomizer .dcfg-cat-grid.is-list .drako-pcb2-opt-name { line-height:1.2; font-size:13px; min-height:0; } #drakoCfgCustomizer .dcfg-cat-grid.is-list .drako-pcb2-opt-brand { font-size:11px; line-height:1.1; } #drakoCfgCustomizer .dcfg-cat-grid.is-list .drako-pcb2-opt-code, #drakoCfgCustomizer .dcfg-cat-grid.is-list .drako-pcb2-opt-avail { font-size:11px; line-height:1.2; } #drakoCfgCustomizer .dcfg-cat-grid.is-list .drako-pcb2-opt-specs { display:none; } /* ===================================================================== */ /* Intestazione full-width configuratore (marca + titolo + valutazione) */ /* Mostrata sopra l'immagine quando il flag configuratore e' attivo. */ /* ===================================================================== */ .drako-pi-cfghead { font-family:"Segoe UI",Roboto,Arial,sans-serif; padding:4px 0 18px; margin:0 0 8px; border-bottom:1px solid #e5e7eb; } .drako-pi-cfghead .drako-pi-cfghead-brand { display:inline-block; font-size:12px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--dcfg-blue,#1c63ab); text-decoration:none; margin:0 0 6px; } .drako-pi-cfghead .drako-pi-cfghead-brand:hover { text-decoration:underline; } .drako-pi-cfghead .drako-pi-cfghead-title { font-size:28px; line-height:1.18; font-weight:800; color:#0f172a; margin:0 0 8px; } .drako-pi-cfghead .drako-pi-cfghead-sub { font-size:14px; line-height:1.5; color:#64748b; margin:0 0 10px; max-width:78ch; } .drako-pi-cfghead .drako-pi-cfghead-rating { display:flex; align-items:center; gap:8px; } .drako-pi-cfghead .dcfg-stars { display:inline-flex; gap:2px; line-height:0; } .drako-pi-cfghead .dcfg-star { width:18px; height:18px; display:block; } .drako-pi-cfghead .dcfg-star.is-full { fill:#f59e0b; } .drako-pi-cfghead .dcfg-star.is-empty { fill:#d1d5db; } .drako-pi-cfghead .drako-pi-cfghead-rcount { font-size:13px; color:#475569; font-weight:600; } .drako-pi-cfghead .drako-pi-cfghead-rcount.is-none { color:#94a3b8; font-weight:400; } @media (max-width:640px){.drako-pi-cfghead .drako-pi-cfghead-title { font-size:22px; }} /* ===================================================================== */ /* Tab Alimentazione - stile scheda (selezione attuale + watt richiesti) */ /* ===================================================================== */ #drakoCfgSummary .dcfg-psu, #drakoCfgCustomizer .dcfg-psu { display:block; } #drakoCfgSummary .dcfg-psu-intro, #drakoCfgCustomizer .dcfg-psu-intro { font-size:12.5px; line-height:1.5; color:var(--dcfg-muted); margin:0 0 12px; } #drakoCfgSummary .dcfg-psu-card, #drakoCfgCustomizer .dcfg-psu-card { display:flex; align-items:center; gap:12px; border:1px solid var(--dcfg-border); border-radius:10px; padding:10px 12px; background:var(--dcfg-card,#fff); margin:0 0 14px; } #drakoCfgSummary .dcfg-psu-card.is-empty, #drakoCfgCustomizer .dcfg-psu-card.is-empty { border-style:dashed; } #drakoCfgSummary .dcfg-psu-thumb, #drakoCfgCustomizer .dcfg-psu-thumb { flex:0 0 auto; width:56px; height:56px; border-radius:8px; background:#f4f6f9; display:flex; align-items:center; justify-content:center; overflow:hidden; } #drakoCfgSummary .dcfg-psu-thumb img, #drakoCfgCustomizer .dcfg-psu-thumb img { max-width:100%; max-height:100%; object-fit:contain; } #drakoCfgSummary .dcfg-psu-cardbody, #drakoCfgCustomizer .dcfg-psu-cardbody { display:flex; flex-direction:column; gap:2px; min-width:0; } #drakoCfgSummary .dcfg-psu-cardlabel, #drakoCfgCustomizer .dcfg-psu-cardlabel { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--dcfg-muted); } #drakoCfgSummary .dcfg-psu-cardname, #drakoCfgCustomizer .dcfg-psu-cardname { font-size:13.5px; font-weight:600; color:var(--dcfg-ink); line-height:1.3; } #drakoCfgSummary .dcfg-psu-cardwatt, #drakoCfgCustomizer .dcfg-psu-cardwatt { font-size:12px; color:var(--dcfg-blue); font-weight:700; } #drakoCfgSummary .dcfg-psu-power, #drakoCfgCustomizer .dcfg-psu-power { display:flex; align-items:center; justify-content:space-between; gap:12px; margin:2px 0 6px; } #drakoCfgSummary .dcfg-psu-recnum, #drakoCfgCustomizer .dcfg-psu-recnum { font-size:16px; color:var(--dcfg-ink); } #drakoCfgSummary .dcfg-psu-recnum b, #drakoCfgCustomizer .dcfg-psu-recnum b { font-size:34px; font-weight:800; line-height:1; letter-spacing:-.01em; } #drakoCfgSummary .dcfg-psu-recnum span, #drakoCfgCustomizer .dcfg-psu-recnum span { font-size:16px; color:var(--dcfg-muted); font-weight:600; } #drakoCfgSummary .dcfg-psu-change, #drakoCfgCustomizer .dcfg-psu-change { flex:0 0 auto; border:1px solid var(--dcfg-blue); background:#fff; color:var(--dcfg-blue); font-weight:700; font-size:13px; padding:8px 18px; border-radius:999px; cursor:pointer; transition:background .15s,color .15s; } #drakoCfgSummary .dcfg-psu-change:hover, #drakoCfgCustomizer .dcfg-psu-change:hover { background:var(--dcfg-blue); color:#fff; } #drakoCfgSummary .dcfg-psu-reqline, #drakoCfgCustomizer .dcfg-psu-reqline { font-size:12.5px; color:var(--dcfg-muted); margin:0 0 12px; } #drakoCfgSummary .dcfg-psu-reqline b, #drakoCfgCustomizer .dcfg-psu-reqline b { color:var(--dcfg-ink); } #drakoCfgSummary .dcfg-psu-verdict, #drakoCfgCustomizer .dcfg-psu-verdict { display:flex; align-items:center; gap:9px; font-size:13.5px; font-weight:700; padding:10px 13px; border-radius:8px; } #drakoCfgSummary .dcfg-psu-verdict svg, #drakoCfgCustomizer .dcfg-psu-verdict svg { width:18px; height:18px; flex:0 0 auto; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; } #drakoCfgSummary .dcfg-psu-verdict.ok, #drakoCfgCustomizer .dcfg-psu-verdict.ok { background:rgba(22,163,74,.09); color:var(--dcfg-green); } #drakoCfgSummary .dcfg-psu-verdict.bad, #drakoCfgCustomizer .dcfg-psu-verdict.bad { background:rgba(207,38,50,.08); color:var(--dcfg-red); } /* ===================================================================== */ /* Barra sticky arricchita: 2 righe (codici + prezzo + azioni / */ /* riepilogo + fatti). Su scroll prende il posto di menu + ricerca. */ /* ===================================================================== */ #drakoCfgBar .dcfg-bar-inner { flex-direction:column; align-items:stretch; gap:9px; padding-top:11px; padding-bottom:11px; } #drakoCfgBar .dcfg-bar-main { display:flex; align-items:center; gap:16px; } #drakoCfgBar .dcfg-bar-sub { display:flex; align-items:center; gap:18px; flex-wrap:wrap; } #drakoCfgBar .dcfg-bar-codes { display:flex; flex-wrap:wrap; gap:2px 14px; font-size:12px; color:var(--dcfg-muted); } #drakoCfgBar .dcfg-bar-codes b { color:var(--dcfg-ink); font-weight:700; } #drakoCfgBar .dcfg-bar-priceblk { display:flex; flex-direction:column; line-height:1.05; } #drakoCfgBar .dcfg-bar-priceblk small { font-size:10px; letter-spacing:.04em; color:var(--dcfg-muted); } #drakoCfgBar .dcfg-bar-total { font-size:23px; font-weight:800; color:var(--dcfg-green); } #drakoCfgBar .dcfg-bar-cust { border:1px solid var(--dcfg-blue); background:#fff; color:var(--dcfg-blue); font-weight:700; font-size:13px; padding:9px 18px; border-radius:8px; cursor:pointer; white-space:nowrap; transition:background .15s,color .15s; } #drakoCfgBar .dcfg-bar-cust:hover { background:var(--dcfg-blue); color:#fff; } #drakoCfgBar .dcfg-bar-sub .dcfg-bar-psu { display:inline-flex !important; } /* fatti clonati nel bar: riga orizzontale, stesso stile item della scheda */ #drakoCfgBar .dcfg-facts { list-style:none; margin:0; padding:0; display:flex; flex-flow:row wrap; gap:6px 18px; border:0; } #drakoCfgBar .dcfg-fact { display:flex; align-items:center; gap:8px; font-size:12.5px; color:var(--dcfg-ink); line-height:1.2; } #drakoCfgBar .dcfg-fact svg { flex:0 0 auto; width:16px; height:16px; color:var(--dcfg-blue); } #drakoCfgBar .dcfg-fact b { font-weight:700; } /* Su scroll (barra attiva): nascondi il menu e la barra di ricerca del sito */ /* Immagine prodotto piu' grande col configuratore attivo: colonna info destra piu' stretta -> la galleria a sinistra si allarga */ .drako-pi-wrapper.dcfg-on .drako-pi-info { width:430px; } @media (max-width:900px){.drako-pi-wrapper.dcfg-on .drako-pi-info { width:auto; }} /* Refinement: su scroll nascondi l'intero header (niente riga-logo vuota); la barra va a top:0 */ #drakoCfgBar .dcfg-bar-logo { display:inline-flex; align-items:center; flex:0 0 auto; margin-right:2px; } #drakoCfgBar .dcfg-bar-logo img { height:26px; width:auto; display:block; } /* Bar piu' alta, piu' respiro in altezza (feedback) + badge alimentazione cliccabile/stati */ #drakoCfgBar .dcfg-bar-inner { padding-top:18px; padding-bottom:18px; gap:14px; } #drakoCfgBar .dcfg-bar-main { min-height:46px; } #drakoCfgBar .dcfg-bar-psu.is-ok, #drakoCfgBar .dcfg-bar-psu.is-ok .dcfg-bar-badge-ico { color:var(--dcfg-green); } #drakoCfgBar .dcfg-bar-psu.is-bad, #drakoCfgBar .dcfg-bar-psu.is-bad .dcfg-bar-badge-ico { color:var(--dcfg-red); } /* Gauge margine watt nel tab Alimentazione (UX) */ #drakoCfgSummary .dcfg-psu-gauge, #drakoCfgCustomizer .dcfg-psu-gauge { margin:12px 0 4px; } #drakoCfgSummary .dcfg-psu-gauge-track, #drakoCfgCustomizer .dcfg-psu-gauge-track { position:relative; height:12px; border-radius:6px; background:#eef1f5; overflow:hidden; } #drakoCfgSummary .dcfg-psu-gauge-cap, #drakoCfgCustomizer .dcfg-psu-gauge-cap { position:absolute; left:0; top:0; bottom:0; background:rgba(22,163,74,.16); } #drakoCfgSummary .dcfg-psu-gauge-cap.bad, #drakoCfgCustomizer .dcfg-psu-gauge-cap.bad { background:rgba(207,38,50,.14); } #drakoCfgSummary .dcfg-psu-gauge-fill, #drakoCfgCustomizer .dcfg-psu-gauge-fill { position:absolute; left:0; top:0; bottom:0; background:var(--dcfg-blue); border-radius:6px; } #drakoCfgSummary .dcfg-psu-gauge-mark, #drakoCfgCustomizer .dcfg-psu-gauge-mark { position:absolute; top:-3px; bottom:-3px; width:2px; background:var(--dcfg-ink); } #drakoCfgSummary .dcfg-psu-gauge-legend, #drakoCfgCustomizer .dcfg-psu-gauge-legend { display:flex; flex-wrap:wrap; gap:4px 14px; margin-top:8px; font-size:11.5px; color:var(--dcfg-muted); } #drakoCfgSummary .dcfg-psu-gauge-legend .lg, #drakoCfgCustomizer .dcfg-psu-gauge-legend .lg { display:inline-flex; align-items:center; gap:5px; } #drakoCfgSummary .dcfg-psu-gauge-legend .lg b, #drakoCfgCustomizer .dcfg-psu-gauge-legend .lg b { color:var(--dcfg-ink); } #drakoCfgSummary .dcfg-psu-gauge-legend .lg::before, #drakoCfgCustomizer .dcfg-psu-gauge-legend .lg::before { content:''; width:10px; height:10px; border-radius:2px; } #drakoCfgSummary .dcfg-psu-gauge-legend .lg-fill::before, #drakoCfgCustomizer .dcfg-psu-gauge-legend .lg-fill::before { background:var(--dcfg-blue); } #drakoCfgSummary .dcfg-psu-gauge-legend .lg-mark::before, #drakoCfgCustomizer .dcfg-psu-gauge-legend .lg-mark::before { width:3px; height:12px; border-radius:0; background:var(--dcfg-ink); } #drakoCfgSummary .dcfg-psu-gauge-legend .lg-cap::before, #drakoCfgCustomizer .dcfg-psu-gauge-legend .lg-cap::before { background:rgba(22,163,74,.5); } /* Reassurance conversione sotto il CTA */ #drakoCfgSummary .dcfg-reassure { display:flex; flex-wrap:wrap; gap:6px 16px; margin:10px 0 2px; font-size:12px; color:var(--dcfg-green); font-weight:600; } #drakoCfgSummary .dcfg-reassure span { white-space:nowrap; } /* Riepilogo componenti: miniatura + prezzo per riga (UX/conversione) */ #drakoCfgSummary .dcfg-cl-row { display:flex; align-items:center; gap:10px; } #drakoCfgSummary .dcfg-cl-thumb { flex:0 0 auto; width:38px; height:38px; object-fit:contain; border:1px solid var(--dcfg-border); border-radius:6px; background:#fff; padding:2px; box-sizing:border-box; } #drakoCfgSummary .dcfg-cl-row .dcfg-cl-txt { flex:1 1 auto; min-width:0; } #drakoCfgSummary .dcfg-cl-price { flex:0 0 auto; font-weight:700; font-size:12.5px; color:var(--dcfg-ink); white-space:nowrap; } /* Badge Alimentazione barra -> dropdown pannello PSU dall'alto */ #drakoCfgBar .dcfg-bar-psu { cursor:pointer; } #drakoCfgBar.is-psu-open .dcfg-bar-psu { color:var(--dcfg-blue); } #drakoCfgBar [data-role="bar-psu-panel"] { max-width:580px; } /* Badge FPS barra -> dropdown pannello benchmark: cappato in larghezza (leggibile), non tutta la barra. Come il dropdown PSU. */ /* Pannello espanso alla "dimensione giusta" del mockup approvato (~960px), centrato: a questa larghezza l'hero FPS/Bilanciamento/Alimentazione sta su 3 colonne. */ #drakoCfgBar .dcfg-bar-fps { cursor:pointer; } #drakoCfgBar .dcfg-psu { display:block; } #drakoCfgBar .dcfg-psu-intro { font-size:12.5px; line-height:1.5; color:var(--dcfg-muted); margin:0 0 12px; } #drakoCfgBar .dcfg-psu-card { display:flex; align-items:center; gap:12px; border:1px solid var(--dcfg-border); border-radius:10px; padding:10px 12px; background:var(--dcfg-card,#fff); margin:0 0 14px; } #drakoCfgBar .dcfg-psu-card.is-empty { border-style:dashed; } #drakoCfgBar .dcfg-psu-thumb { flex:0 0 auto; width:56px; height:56px; border-radius:8px; background:#f4f6f9; display:flex; align-items:center; justify-content:center; overflow:hidden; } #drakoCfgBar .dcfg-psu-thumb img { max-width:100%; max-height:100%; object-fit:contain; } #drakoCfgBar .dcfg-psu-cardbody { display:flex; flex-direction:column; gap:2px; min-width:0; } #drakoCfgBar .dcfg-psu-cardlabel { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--dcfg-muted); } #drakoCfgBar .dcfg-psu-cardname { font-size:13.5px; font-weight:600; color:var(--dcfg-ink); line-height:1.3; } #drakoCfgBar .dcfg-psu-cardwatt { font-size:12px; color:var(--dcfg-blue); font-weight:700; } #drakoCfgBar .dcfg-psu-power { display:flex; align-items:center; justify-content:space-between; gap:12px; margin:2px 0 6px; } #drakoCfgBar .dcfg-psu-recnum { font-size:16px; color:var(--dcfg-ink); } #drakoCfgBar .dcfg-psu-recnum b { font-size:34px; font-weight:800; line-height:1; letter-spacing:-.01em; } #drakoCfgBar .dcfg-psu-recnum span { font-size:16px; color:var(--dcfg-muted); font-weight:600; } #drakoCfgBar .dcfg-psu-change { flex:0 0 auto; border:1px solid var(--dcfg-blue); background:#fff; color:var(--dcfg-blue); font-weight:700; font-size:13px; padding:8px 18px; border-radius:999px; cursor:pointer; transition:background .15s,color .15s; } #drakoCfgBar .dcfg-psu-change:hover { background:var(--dcfg-blue); color:#fff; } #drakoCfgBar .dcfg-psu-reqline { font-size:12.5px; color:var(--dcfg-muted); margin:0 0 12px; } #drakoCfgBar .dcfg-psu-reqline b { color:var(--dcfg-ink); } #drakoCfgBar .dcfg-psu-verdict { display:flex; align-items:center; gap:8px; font-size:12.5px; font-weight:600; padding:9px 12px; border-radius:8px; } #drakoCfgBar .dcfg-psu-verdict svg { width:18px; height:18px; flex:0 0 auto; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; } #drakoCfgBar .dcfg-psu-verdict.ok { background:rgba(22,163,74,.09); color:var(--dcfg-green); } #drakoCfgBar .dcfg-psu-verdict.bad { background:rgba(207,38,50,.08); color:var(--dcfg-red); } #drakoCfgBar .dcfg-psu-gauge { margin:12px 0 4px; } #drakoCfgBar .dcfg-psu-gauge-track { position:relative; height:12px; border-radius:6px; background:#eef1f5; overflow:hidden; } #drakoCfgBar .dcfg-psu-gauge-cap { position:absolute; left:0; top:0; bottom:0; background:rgba(22,163,74,.16); } #drakoCfgBar .dcfg-psu-gauge-cap.bad { background:rgba(207,38,50,.14); } #drakoCfgBar .dcfg-psu-gauge-fill { position:absolute; left:0; top:0; bottom:0; background:var(--dcfg-blue); border-radius:6px; } #drakoCfgBar .dcfg-psu-gauge-mark { position:absolute; top:-3px; bottom:-3px; width:2px; background:var(--dcfg-ink); } #drakoCfgBar .dcfg-psu-gauge-legend { display:flex; flex-wrap:wrap; gap:4px 14px; margin-top:8px; font-size:11.5px; color:var(--dcfg-muted); } #drakoCfgBar .dcfg-psu-gauge-legend .lg { display:inline-flex; align-items:center; gap:5px; } #drakoCfgBar .dcfg-psu-gauge-legend .lg b { color:var(--dcfg-ink); } #drakoCfgBar .dcfg-psu-gauge-legend .lg::before { content:''; width:10px; height:10px; border-radius:2px; } #drakoCfgBar .dcfg-psu-gauge-legend .lg-fill::before { background:var(--dcfg-blue); } #drakoCfgBar .dcfg-psu-gauge-legend .lg-mark::before { width:3px; height:12px; border-radius:0; background:var(--dcfg-ink); } #drakoCfgBar .dcfg-psu-gauge-legend .lg-cap::before { background:rgba(22,163,74,.5); } /* Fix pulsante Cambia nel dropdown PSU della barra (specificita' alta) */ /* FIX: variabili --dcfg-* disponibili anche nella barra (erano solo su Summary/Customizer) */ #drakoCfgBar { --dcfg-blue:#1c63ab; --dcfg-blue-d:#154e87; --dcfg-green:#16a34a; --dcfg-card:#ffffff; --dcfg-border:#e2e6eb; --dcfg-ink:#1f2937; --dcfg-muted:#6b7280; --dcfg-red:#cf2632; --dcfg-red-bg:#fdecec; --dcfg-amber:#92600a; --dcfg-amber-bg:#fff6e5; } /* Barra snella: badge Alimentazione+FPS in riga principale, totale piu' grande */ #drakoCfgBar .dcfg-bar-main .dcfg-bar-psu, #drakoCfgBar .dcfg-bar-fps { display:inline-flex !important; } #drakoCfgBar .dcfg-bar-total { font-size:30px; } #drakoCfgBar .dcfg-bar-main { gap:14px; align-items:center; } /* Spacer in-flow per la barra fissa-sotto-header in cima */ /* Logo barra: solo su takeover (in cima l'header del sito ha gia' il suo logo) */ #drakoCfgBar .dcfg-bar-logo { display:none; } /* Barra una riga: padding piu' contenuto */ #drakoCfgBar .dcfg-bar-inner { padding-top:12px; padding-bottom:12px; } /* ===== Etichetta negozio (PROMO/NOVITA') + countdown offerta in scadenza (adattati al configuratore) ===== */ #drakoCfgCustomizer .drako-pcb2-opt-badges { position:absolute; top:8px; left:8px; z-index:4; display:flex; gap:4px; pointer-events:none; } #drakoCfgCustomizer .drako-pcb2-opt-badge { font-size:10px; font-weight:800; letter-spacing:.03em; text-transform:uppercase; color:#fff; padding:3px 8px; border-radius:4px; line-height:1.25; box-shadow:0 1px 3px rgba(15,23,42,.22); white-space:nowrap; } #drakoCfgCustomizer .drako-pcb2-opt-badge.is-promo { background:#e65100; } #drakoCfgCustomizer .drako-pcb2-opt-badge.is-new { background:var(--dcfg-blue, #1c63ab); } #drakoCfgCustomizer .dcfg-cat-grid.is-list .drako-pcb2-opt-badges { top:6px; left:6px; } #drakoCfgCustomizer .dcfg-cat-grid.is-list .drako-pcb2-opt-badge { font-size:9px; padding:2px 6px; } /* SCADENZA: pastiglia, non fascia (15/08) --------------------------------------------------------------------------- Era una fascia rossa piena a tutta larghezza (#cf2632, bianco sopra), ripetuta fino a nove volte in una sola schermata di opzioni. Risultato misurato nell'audit: l'oggetto più forte della pagina era un conto alla rovescia su una RAM da 500 €, mentre la macchina da 4.888 € aveva il prezzo a 3,13:1. L'urgenza era applicata all'oggetto sbagliato. Ora è una pastiglia in linea: dice la stessa cosa, occupa lo spazio che le compete e lascia il rosso pieno al prezzo e al pulsante. #b91c1c su #fdecec = 5,67:1. */ #drakoCfgCustomizer .drako-pcb2-opt-countdown { display:inline-flex; align-items:center; justify-content:center; gap:5px; width:auto; margin-top:8px; box-sizing:border-box; background:var(--dcfg-red-bg, #fdecec); color:#b91c1c; border:1px solid #f3c9c9; font-size:11px; font-weight:700; font-variant-numeric:tabular-nums; padding:3px 9px; border-radius:100px; letter-spacing:.02em; } #drakoCfgCustomizer .drako-pcb2-opt-countdown .dcfg-cd-ico { font-size:13px; line-height:1; } /* list view: la riga resta singola; il countdown va a capo a tutta larghezza sotto */ #drakoCfgCustomizer .dcfg-cat-grid.is-list .drako-pcb2-opt { flex-wrap:wrap; } #drakoCfgCustomizer .dcfg-cat-grid.is-list .drako-pcb2-opt-countdown { flex:0 0 auto; margin-top:10px; } /* ===== Card opzione allineate alle card del negozio (immagine grande, tipografia, variazione, CTA, countdown a filo) ===== */ #drakoCfgCustomizer .dcfg-cat-grid .drako-pcb2-opt { border-radius:8px; padding:12px; gap:0; text-align:left; } #drakoCfgCustomizer .dcfg-cat-grid .drako-pcb2-opt-img { width:100%; height:auto; aspect-ratio:1/1; max-height:180px; object-fit:contain; background:#fff; margin-bottom:4px; } #drakoCfgCustomizer .dcfg-cat { scroll-margin-top:135px; } #drakoCfgCustomizer .dcfg-cnav-link, #drakoCfgCustomizer .dcfg-cnav-hero { transition:background-color .15s ease, color .15s ease; } #drakoCfgCustomizer .dcfg-cat-grid .drako-pcb2-opt-brand { font-size:11px; letter-spacing:.04em; color:#9ca3af; font-weight:700; margin-bottom:2px; } #drakoCfgCustomizer .dcfg-cat-grid .drako-pcb2-opt-name { font-size:13px; line-height:1.4; font-weight:600; color:#3a3a3a; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; min-height:2.8em; margin-bottom:2px; } #drakoCfgCustomizer .dcfg-cat-grid .drako-pcb2-opt-code { font-size:11px; color:#9ca3af; margin-bottom:4px; } #drakoCfgCustomizer .dcfg-cat-grid .drako-pcb2-opt-avail { font-size:12px; font-weight:400; margin-top:3px; } #drakoCfgCustomizer .dcfg-cat-grid .drako-pcb2-opt-avail.is-avail { color:#15803d; } #drakoCfgCustomizer .dcfg-cat-grid .drako-pcb2-opt-price { text-align:left; margin-top:12px; } #drakoCfgCustomizer .dcfg-cat-grid .drako-pcb2-opt-delta { font-size:17px; font-weight:700; } #drakoCfgCustomizer .dcfg-cat-grid .drako-pcb2-opt-delta.is-included { font-size:14px; } /* CTA stile bottone negozio (tutta la card resta cliccabile) */ #drakoCfgCustomizer .drako-pcb2-opt-cta { display:none; margin-top:10px; padding:9px 12px; border-radius:6px; background:#1c63ab; color:#fff; text-align:center; font-size:13px; font-weight:700; line-height:1.2; transition:background .15s; } #drakoCfgCustomizer .drako-pcb2-opt-cta::before { content:"Seleziona"; } #drakoCfgCustomizer .drako-pcb2-opt:hover .drako-pcb2-opt-cta { background:#154e87; } #drakoCfgCustomizer .drako-pcb2-opt.is-selected .drako-pcb2-opt-cta { background:#16a34a; } #drakoCfgCustomizer .drako-pcb2-opt.is-selected .drako-pcb2-opt-cta::before { content:"Selezionato"; } /* 15/08: `:not(.is-included)` — la variazione sparisce sulla scheda scelta, ma «Nel prezzo» deve restare, altrimenti la card scelta è l'unica bianca in una griglia di cifre. Regola gemella a ~riga 1200. */ #drakoCfgCustomizer .dcfg-cat-grid .drako-pcb2-opt.is-selected .drako-pcb2-opt-delta:not(.is-included) { display:none; } /* 15/08: era «countdown a filo del fondo card» — cioè la stessa fascia rossa piena, allargata fino ai bordi della scheda, che la rendeva l'oggetto più forte della griglia. Resta la pastiglia definita sopra: qui si aggiusta solo la spaziatura, non si reintroduce la fascia. */ #drakoCfgCustomizer .dcfg-cat-grid:not(.is-list) .drako-pcb2-opt-countdown { margin:10px 0 0; } /* list view: niente bottone CTA (riga compatta), countdown a piena larghezza sotto */ #drakoCfgCustomizer .dcfg-cat-grid.is-list .drako-pcb2-opt-cta { display:none; } /* brand rimosso dalle card opzione (ridondante: il nome inizia gia' col brand) */ #drakoCfgCustomizer .drako-pcb2-opt-brand { display:none !important; } /* ===== Incompatibilita': bordo statico, respiro SOLO al click (~2.4s), selezionato = verde come i compatibili ===== */ #drakoCfgCustomizer .drako-pcb2-opt.is-incompat { animation:none; border-color:var(--dcfg-border); } #drakoCfgCustomizer .drako-pcb2-opt.is-incompat.dcfg-breathe { animation:dcfgBreatheBox 2.4s ease-in-out; } /* FASE A 2026-07-13: rimossa l'animazione sul contenitore (.dcfg-breathing) - respira solo la card cliccata (.dcfg-breathe) */ #drakoCfgCustomizer .drako-pcb2-opt.is-incompat.is-selected { border-color:#cf2632; box-shadow:none; background:#fff5f5; } #drakoCfgCustomizer .drako-pcb2-opt.is-incompat.is-selected .drako-pcb2-opt-cta { background:#cf2632; } /* Storicamente: «variazione in colore neutro (blu), non verde/rosso» — ma il valore scritto era #1a1a1a (quasi nero, non blu) su ENTRAMBE le classi, e la regola stava qui *e* a riga ~75, duplicata. 15/08: il rosso resta bandito, il sovrapprezzo resta neutro, solo il risparmio si tinge di verde. Le due regole ora dicono la stessa cosa; se ne tocchi una, tocca anche l'altra. */ #drakoCfgCustomizer .drako-pcb2-opt-delta.is-positive { color:#374151; } #drakoCfgCustomizer .drako-pcb2-opt-delta.is-negative { color:#15803d; } /* disponibilita' identica alle card del negozio (classi pdm-stock riusate) */ #drakoCfgCustomizer .drako-pcb2-opt-stock { margin:4px 0 0; } /* Riepilogo + FPS tolti dal pannello riepilogo su richiesta: l'FPS va mostrato come variazione nelle card di CPU e GPU. (Il blocco PSU nascosto resta per il dropdown della barra.) */ #drakoCfgSummary .dcfg-tabs, #drakoCfgSummary .dcfg-tabpane { display:none !important; } /* ===== Nav sinistra: ogni blocco = riquadro bianco arrotondato ===== */ #drakoCfgCustomizer .dcfg-cnav-hero { background:#fff; border:1px solid #e5e7eb; border-radius:10px; padding:14px 12px; margin-bottom:12px; box-shadow:0 1px 3px rgba(15,23,42,.05); } #drakoCfgCustomizer .dcfg-cnav-group ul { display:flex; flex-direction:column; gap:8px; } #drakoCfgCustomizer .dcfg-cnav-link { background:#fff; border:1px solid #e5e7eb; border-radius:10px; padding:10px; box-shadow:0 1px 3px rgba(15,23,42,.05); } #drakoCfgCustomizer .dcfg-cnav-link:hover { background:#f8fafc; border-color:#cfe0f2; } #drakoCfgCustomizer .dcfg-cnav-link.is-active { background:#eef4fb; border-color:#1c63ab; } #drakoCfgCustomizer .dcfg-cnav-link.has-error { border-color:#e9a4a7; } #drakoCfgCustomizer .dcfg-cnav-link.has-warn { border-color:#e8cf9a; } /* ===== Card prodotto: stessa resa a riquadro bianco arrotondato ===== */ #drakoCfgCustomizer .dcfg-cat-grid .drako-pcb2-opt { box-shadow:0 1px 3px rgba(15,23,42,.05); } /* ============ NAV: blocco FPS mini + riepilogo unico compatto ============ */ /* FPS (dov'era la foto del case): mostra SOLO il numero; hover/focus = widget completo */ #drakoCfgCustomizer .dcfg-cnav-fps { position:relative; margin-bottom:14px; padding-bottom:14px; border-bottom:1px solid #e2e6eb; } #drakoCfgCustomizer .dcfg-cnav-fps-badge { display:flex; align-items:center; gap:10px; padding:11px 12px; border:1px solid #dfe6ef; border-radius:12px; background:linear-gradient(180deg,#f7fafd,#eaf2fb); cursor:help; } #drakoCfgCustomizer .dcfg-cnav-fps-ic { flex:0 0 auto; color:#1c63ab; } #drakoCfgCustomizer .dcfg-cnav-fps-num { font-size:26px; font-weight:800; line-height:1; color:#16a34a; letter-spacing:-.01em; } /* flyout col widget completo: adiacente (no gap) cosi' l'hover non si perde */ /* Riepilogo nav: UNICO blocco compatto, senza titoli */ #drakoCfgCustomizer .dcfg-cnav-riepilogo { margin-bottom:0; } #drakoCfgCustomizer .dcfg-cnav-riepilogo .dcfg-cnav-link { gap:9px; padding:5px 6px; } #drakoCfgCustomizer .dcfg-cnav-riepilogo .dcfg-cnav-thumb { flex:0 0 42px; width:42px; height:42px; border-radius:7px; } #drakoCfgCustomizer .dcfg-cnav-riepilogo .dcfg-cnav-name { font-size:12.5px; } #drakoCfgCustomizer .dcfg-cnav-riepilogo .dcfg-cnav-lbl { font-size:9.5px; } /* Fix: la nav (prima nel DOM) finiva SOTTO le card -> il flyout FPS si vedeva trasparente/sovrapposto. Alzo lo stacking della nav e del flyout. */ #drakoCfgCustomizer .dcfg-cust-shell { position:relative; } #drakoCfgCustomizer .dcfg-cnav { z-index:50; } /* variazione FPS su opzioni CPU/GPU (pill neutra sotto la variazione prezzo) */ #drakoCfgCustomizer .dcfg-cat-grid .drako-pcb2-opt-price { display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; justify-content:space-between; } #drakoCfgCustomizer .dcfg-cat-grid.is-list .drako-pcb2-opt-price { justify-content:flex-end; } #drakoCfgCustomizer .drako-pcb2-opt-fps { font-size:17px; font-weight:800; color:#1a1a1a; font-variant-numeric:tabular-nums; display:inline-flex; align-items:center; gap:5px; } /* 14/08/2026 - il badge è di UN colore solo, segno + numero + "FPS" insieme: prima la sigla restava blu e usciva un accostamento blu/verde che sembrava un errore. Verde #15803d e non #16a34a: su bianco fa 5,0:1 invece di 3,3:1, e la sigla "FPS" è testo piccolo (13px), che a 3,3:1 non si legge abbastanza. */ #drakoCfgCustomizer .drako-pcb2-opt-fps.is-up { color:#15803d; } /* #b91c1c e non #b03636: quest'ultimo è il rosso del BACKOFFICE (--dk-bad in admin_palette.css), arrivato qui per contagio. Il frontend usa la triade #15803d / #b45309 / #b91c1c, tutti della stessa famiglia; #b03636 era il solo fuori scala e faceva due rossi indistinguibili nella stessa pagina. */ #drakoCfgCustomizer .drako-pcb2-opt-fps.is-down { color:#b91c1c; } /* 14/08/2026 - niente pittogramma del gioco sulle variazioni FPS, né in elenco né in card: la stessa iconcina ripetuta su ogni opzione è rumore, e il gioco lo dichiara già il badge in cima alla colonna. Resta il numero, che è ciò su cui si sceglie. */ /* lista: FPS prima del prezzo */ #drakoCfgCustomizer .dcfg-cat-grid.is-list .drako-pcb2-opt-fps { order:-1; } /* Foto del case rimessa (in cima alla nav, gli FPS vanno sotto) - compatta */ #drakoCfgCustomizer .dcfg-cnav-hero { display:block !important; text-align:center; padding:2px 4px 12px; margin:0 0 12px; border-bottom:1px solid #e2e6eb; } #drakoCfgCustomizer .dcfg-cnav-hero-img { max-width:100%; max-height:150px; object-fit:contain; } /* Badge FPS: due righe -> [icona + numero + FPS] sopra, [gioco . risoluzione] sotto */ #drakoCfgCustomizer .dcfg-cnav-fps-badge { flex-direction:column; align-items:stretch; gap:3px; } #drakoCfgCustomizer .dcfg-cnav-fps-top { display:flex; align-items:center; gap:8px; } #drakoCfgCustomizer .dcfg-cnav-fps-unit { font-size:12px; font-weight:800; color:#1c63ab; letter-spacing:.03em; } #drakoCfgCustomizer .dcfg-cnav-fps-game { color:#1c63ab; } /* Flyout FPS: non deve uscire dal viewport (prima era tagliato a destra) */ /* lista: prezzo e FPS in colonne allineate a destra, ben separate */ #drakoCfgCustomizer .dcfg-cat-grid.is-list .drako-pcb2-opt-price { justify-content:flex-end; gap:18px; flex-wrap:nowrap; } #drakoCfgCustomizer .dcfg-cat-grid.is-list .drako-pcb2-opt-delta { min-width:94px; text-align:right; } #drakoCfgCustomizer .dcfg-cat-grid.is-list .drako-pcb2-opt-fps { min-width:78px; text-align:right; } /* Flyout FPS: adattamento ROBUSTO al viewport (prima veniva tagliato a destra). Largh. limitata allo spazio disponibile; alto quanto il viewport con scroll per vedere la lista multi-gioco completa. */ /* ===== Badge FPS: TUTTO SU UNA RIGA (numero . gioco . risoluzione) ===== */ #drakoCfgCustomizer .dcfg-cnav-fps-badge { flex-direction:row !important; align-items:center; gap:5px; flex-wrap:nowrap; overflow:hidden; } #drakoCfgCustomizer .dcfg-cnav-fps-num { font-size:20px; line-height:1; } #drakoCfgCustomizer .dcfg-cnav-fps-unit { font-size:12px; font-weight:800; color:#1c63ab; } #drakoCfgCustomizer .dcfg-cnav-fps-game { font-size:12px; font-weight:700; color:#1c2430; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0; } #drakoCfgCustomizer .dcfg-cnav-fps-res { font-size:12px; font-weight:700; color:#5f6774; flex:0 0 auto; } /* Flyout: formattazione ORIGINALE (single-column), aperto piu' in ALTO (dal top della nav) e SENZA scrollbar cosi' ci sta tutto. */ #drakoCfgCustomizer .dcfg-cnav-fps { position:static; } /* Nel flyout nav: niente scrollbar INTERNA sulla lista multi-gioco (mostra tutti i titoli) */ /* Flyout FPS ancora un po' piu' in alto (richiesta utente) */ /* Lista multi-gioco nel flyout: RIMETTO la scrollbar (era "troppo" alta senza) e piu' spazio tra le righe (erano "troppo attaccati"). */ /* Lista giochi flyout: piu' COMPATTA (barra sottile, badge piccolo) ma con le righe piu' SEPARATE (i 144hz erano troppo attaccati). */ /* Righe lista giochi PIU' separate (i 144hz erano ancora troppo attaccati) */ /* FIX: la lista era display:block (gap ignorato!). Torno a grid single-column cosi' il gap tra le righe funziona davvero (144hz separati). */ /* Flyout FPS piu' BASSO (era tagliato sopra e sotto): comprimo il blocco risultato (contatore + card) e accorcio la lista. */ /* Flyout leggermente piu' in BASSO (richiesta utente, era un filo troppo su) */ /* Chip FPS: immagine del gioco accanto al nome + tolta l'iconcina controller */ #drakoCfgCustomizer .dcfg-cnav-fps-ic { display:none !important; } #drakoCfgCustomizer .dcfg-cnav-fps-gimg { width:18px; height:18px; border-radius:4px; object-fit:cover; flex:0 0 auto; } #drakoCfgCustomizer .dcfg-cnav-fps-gimg[hidden] { display:none !important; } /* ADATTA il contenuto del flyout allo spazio disponibile: altezza max = viewport; la lista giochi riempie lo spazio che resta e scrolla (niente taglio sopra/sotto). */ /* REVERT: l'adattamento va sul BADGE, non sul flyout. Ripristino il flyout compatto. */ /* Badge FPS: adatto gli elementi allo spazio disponibile -> il NOME GIOCO e' l'elemento flessibile (cresce/si stringe con ellissi), tutto il resto e' fisso e sempre visibile (numero, FPS, immagine, risoluzione). */ #drakoCfgCustomizer .dcfg-cnav-fps-badge { min-width:0; } #drakoCfgCustomizer .dcfg-cnav-fps-num, #drakoCfgCustomizer .dcfg-cnav-fps-unit, #drakoCfgCustomizer .dcfg-cnav-fps-sep, #drakoCfgCustomizer .dcfg-cnav-fps-gimg, #drakoCfgCustomizer .dcfg-cnav-fps-res { flex:0 0 auto !important; } #drakoCfgCustomizer .dcfg-cnav-fps-game { flex:1 1 auto !important; min-width:0 !important; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } /* Badge FPS: nome + FOTO del gioco CENTRATI (FPS a sinistra, risoluzione a destra), senza il punto separatore. Griglia 1fr|auto|1fr -> il centro e' davvero centrato nel badge. */ #drakoCfgCustomizer .dcfg-cnav-fps-badge { display:grid !important; grid-template-columns:1fr auto 1fr !important; align-items:center !important; gap:8px !important; } #drakoCfgCustomizer .dcfg-cnav-fps-res { justify-self:end; } /* Badge FPS piu' alto */ #drakoCfgCustomizer .dcfg-cnav-fps-badge { padding:14px 13px !important; } /* Sezioni categoria in stile "Gaming RIG": barra bianca + accento blu a sinistra, titolo a sx e scelta Card/Lista DENTRO la barra (a destra). */ #drakoCfgCustomizer .dcfg-cat-head { display:flex !important; align-items:center !important; gap:8px !important; flex-wrap:wrap; background:#fff; border:1px solid #e2e6eb; border-left:4px solid #1c63ab; border-radius:10px; padding:12px 16px !important; margin-bottom:18px !important; box-shadow:0 1px 3px rgba(16,32,64,.05); } #drakoCfgCustomizer .dcfg-cat-view { margin-left:auto; } /* Hero case nella nav: foto PIU' GROSSA + riquadro bianco con padding attorno, come la gallery della scheda prodotto (Image #33). */ #drakoCfgCustomizer .dcfg-cnav-hero { background:#fff !important; border:1px solid #e5e7eb !important; border-radius:12px !important; box-shadow:0 1px 3px rgba(15,23,42,.05) !important; padding:18px 16px !important; margin:0 0 14px !important; } #drakoCfgCustomizer .dcfg-cnav-hero-img { max-width:100% !important; max-height:220px !important; object-fit:contain !important; } /* === Nav: hero cliccabile + riga CASE rimossa + badge piu' grande (Image #33) === */ /* Hero: cliccabile -> scrolla alla sezione Case; foto "come adesso" su blocco bianco. */ #drakoCfgCustomizer a.dcfg-cnav-hero { display:block !important; cursor:pointer; text-decoration:none; padding:12px 8px !important; transition:box-shadow .15s, border-color .15s; } #drakoCfgCustomizer a.dcfg-cnav-hero:hover { border-color:#c9d4e2 !important; box-shadow:0 3px 10px rgba(15,23,42,.12) !important; } /* Togli la riga CASE dalla lista (il case e' gia' l'hero cliccabile in cima). */ #drakoCfgCustomizer .dcfg-cnav-riepilogo li:has(a[data-goto="case"]) { display:none !important; } /* Badge FPS piu' grande. */ #drakoCfgCustomizer .dcfg-cnav-fps-badge { padding:18px 15px !important; } #drakoCfgCustomizer .dcfg-cnav-fps-num { font-size:27px !important; } #drakoCfgCustomizer .dcfg-cnav-fps-unit { font-size:13px !important; } #drakoCfgCustomizer .dcfg-cnav-fps-game { font-size:14.5px !important; } #drakoCfgCustomizer .dcfg-cnav-fps-res { font-size:13px !important; } #drakoCfgCustomizer .dcfg-cnav-fps-gimg { width:22px !important; height:22px !important; } /* Righe lista un filo piu' ariose. */ #drakoCfgCustomizer .dcfg-cnav-riepilogo .dcfg-cnav-link { padding:7px 9px !important; } /* Hero: il BIANCO e' lo sfondo del BLOCCO (non della foto). Blocco ampio con la foto piccola centrata, come la gallery della scheda prodotto (Image #34). */ #drakoCfgCustomizer a.dcfg-cnav-hero { display:flex !important; flex-direction:column; align-items:center; justify-content:center; gap:12px; min-height:230px; background:#fff !important; } #drakoCfgCustomizer .dcfg-cnav-hero-img { max-width:100% !important; width:100% !important; height:auto !important; max-height:none !important; object-fit:contain !important; } #drakoCfgCustomizer .dcfg-cnav-case-caption { display:block; width:100%; padding-top:10px; border-top:1px solid #eef0f3; text-align:left; } #drakoCfgCustomizer a.dcfg-cnav-hero:hover .dcfg-cnav-hero-name { color:#1c63ab; } #drakoCfgCustomizer .dcfg-cnav-case-lbl { display:none !important; font-size:10px; font-weight:800; text-transform:uppercase; letter-spacing:.03em; color:#5f6774; line-height:1.2; margin-bottom:2px; } #drakoCfgCustomizer .dcfg-cnav-hero-name { display:block; width:100%; font-size:13px; line-height:1.25; font-weight:400; color:#1f2937; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } /* ============================================================ NAV = PANNELLO BIANCO (il "background del blocco" che mancava): tutto il contenitore nav ha sfondo bianco, non piu' il grigio tra le card. */ #drakoCfgCustomizer .dcfg-cnav { background:#fff !important; border:1px solid #e5e7eb !important; border-radius:12px !important; padding:12px !important; box-shadow:0 1px 3px rgba(15,23,42,.06) !important; } /* Card interne: via le ombre (niente alone grigio sul pannello bianco), bordo tenue. */ #drakoCfgCustomizer a.dcfg-cnav-hero { box-shadow:none !important; border-color:#eef0f3 !important; } #drakoCfgCustomizer .dcfg-cnav-riepilogo .dcfg-cnav-link { box-shadow:none !important; } /* Badge FPS nettamente piu' grande. */ #drakoCfgCustomizer .dcfg-cnav-fps-badge { padding:20px 15px !important; } #drakoCfgCustomizer .dcfg-cnav-fps-num { font-size:30px !important; } /* ============================================================ PANNELLO PRODOTTO (scheda cfg-on) = BIANCO (Image #38): il wrapper che contiene galleria + riepilogo aveva sfondo trasparente (si vedeva il grigio). */ .drako-pi-wrapper.dcfg-on { background:#fff !important; border:1px solid #e5e7eb; border-radius:14px; padding:22px 22px 26px; box-shadow:0 1px 3px rgba(15,23,42,.05); } /* Badge FPS: rimetto l'ICONA CONTROLLER (come il chip FPS del topbar, dcfg_ic_game.png) e lo faccio ancora piu' grande. */ #drakoCfgCustomizer .dcfg-cnav-fps-ic { display:inline-block !important; width:22px !important; height:22px !important; object-fit:contain; vertical-align:middle; flex:0 0 auto; } #drakoCfgCustomizer .dcfg-cnav-fps-badge { padding:22px 16px !important; } #drakoCfgCustomizer .dcfg-cnav-fps-num { font-size:34px !important; } /* ===== Menu unificato barra: FPS+Alimentazione affiancati + finanziamento + trust + lista ===== */ #drakoCfgBar .dcfg-bar-uni { max-width:1240px; margin:0 auto; padding:16px 20px 18px; border-top:1px solid #f0f2f5; max-height:72vh; overflow-y:auto; } #drakoCfgBar .dcfg-bar-uni-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; align-items:start; } @media (max-width:820px){#drakoCfgBar .dcfg-bar-uni-grid { grid-template-columns:1fr; }} #drakoCfgBar .dcfg-bar-uni-card { background:#f8fafc; border:1px solid #e5e7eb; border-radius:10px; padding:12px; } #drakoCfgBar .dcfg-bar-uni-h { font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.04em; color:var(--dcfg-muted); margin:0 0 8px; display:flex; align-items:center; gap:5px; } #drakoCfgBar .dcfg-uni-h-ic { width:30px; height:30px; flex:0 0 30px; object-fit:contain; } /* ============================================================ HEADER prodotto (brand+titolo+descrizione+recensioni) UNITO al pannello: .drako-pi-cfghead (sopra) + .drako-pi-wrapper.dcfg-on (sotto) = 1 blocco bianco. */ .drako-pi-cfghead { background:#fff !important; border:1px solid #e5e7eb !important; border-bottom:none !important; border-radius:14px 14px 0 0 !important; padding:20px 22px 12px !important; margin:0 !important; } .drako-pi-wrapper.dcfg-on { border-top:none !important; border-radius:0 0 14px 14px !important; margin-top:0 !important; padding-top:12px !important; } /* Badge FPS: fix sovrapposizioni. Griglia auto|1fr|auto -> il gioco riempie il centro e va in ellissi, niente collisioni. Numero piu' contenuto. */ #drakoCfgCustomizer .dcfg-cnav-fps-badge { grid-template-columns:auto 1fr auto !important; padding:16px 13px !important; gap:8px !important; } #drakoCfgCustomizer .dcfg-cnav-fps-num { font-size:26px !important; } #drakoCfgCustomizer .dcfg-cnav-fps-ic { width:20px !important; height:20px !important; } /* Ritocco finale nav: case actions + badge FPS piu' alto. */ #drakoCfgCustomizer .dcfg-cnav-actions { display:flex; align-items:center; justify-content:center; gap:18px; padding:2px 2px 12px; margin:-6px 0 12px; border-bottom:1px solid #e2e6eb; text-align:center; } #drakoCfgCustomizer .dcfg-cnav-action { appearance:none; border:0; background:none; padding:0; display:inline-flex; align-items:center; gap:5px; font-family:inherit; font-size:12.5px; font-weight:600; color:#475569; cursor:pointer; white-space:nowrap; } #drakoCfgCustomizer .dcfg-cnav-action:hover { color:#1c63ab; } #drakoCfgCustomizer .dcfg-cnav-action svg { width:14px; height:14px; flex:0 0 auto; } #drakoCfgCustomizer .dcfg-cnav-fps { margin-top:0 !important; } #drakoCfgCustomizer .dcfg-cnav-fps-badge { min-height:74px !important; padding:22px 16px !important; border-color:#9cc8f4 !important; background:linear-gradient(135deg,#eef7ff 0%,#e8f8ef 100%) !important; box-shadow:0 0 0 3px rgba(28,99,171,.08), 0 8px 18px rgba(28,99,171,.14) !important; } #drakoCfgCustomizer .dcfg-cnav-fps-badge:hover, #drakoCfgCustomizer .dcfg-cnav-fps:focus-within .dcfg-cnav-fps-badge { border-color:#1c63ab !important; box-shadow:0 0 0 3px rgba(28,99,171,.14), 0 10px 24px rgba(28,99,171,.20) !important; } #drakoCfgCustomizer .dcfg-cnav-fps-num { font-size:34px !important; color:#10a64a !important; text-shadow:0 1px 0 rgba(255,255,255,.75); } #drakoCfgCustomizer .dcfg-cnav-fps-game { font-size:15px !important; } /* Ritocco finale sticky bar: niente logo, griglia full-width, badge piu' evidenti. */ #drakoCfgBar .dcfg-bar-logo { display:none !important; } #drakoCfgBar .dcfg-bar-inner { max-width:none !important; padding:14px 28px !important; } #drakoCfgBar .dcfg-bar-main { grid-template-columns:minmax(150px,1fr) minmax(165px,1fr) minmax(220px,1.25fr) minmax(190px,.95fr) minmax(210px,.95fr); gap:18px !important; min-height:68px !important; } #drakoCfgBar .dcfg-bar-spacer { display:none !important; } #drakoCfgBar .dcfg-bar-badge { min-height:56px; box-sizing:border-box; padding:10px 16px !important; border-radius:10px; } #drakoCfgBar .dcfg-bar-badge-img { width:34px !important; height:34px !important; } #drakoCfgBar .dcfg-bar-fps { background:#eef4ff; border-color:#c7d7f5; } #drakoCfgBar .dcfg-bar-finance.is-paypal { background:#f4f8ff; border-color:#c7d7f5; } #drakoCfgBar .dcfg-bar-finance.is-klarna { background:#fff3f8; border-color:#f7c8dc; } #drakoCfgBar .dcfg-bar-finance.is-sella { background:#f3f7ff; border-color:#bfd0ef; } #drakoCfgBar .dcfg-bar-priceblk { justify-self:end; } #drakoCfgBar .dcfg-bar-total { font-size:32px !important; line-height:1; } #drakoCfgBar .dcfg-bar-add { width:100%; min-height:54px; border-radius:8px; font-size:15px; } #drakoCfgBar .dcfg-bar-uni { max-width:none !important; box-sizing:border-box; padding:18px 28px 22px !important; } #drakoCfgBar .dcfg-bar-uni-grid { grid-template-columns:1fr 1fr 1fr !important; } #drakoCfgBar .dcfg-bar-data { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:10px 16px; } #drakoCfgBar .dcfg-bar-data li { display:flex; align-items:center; gap:8px; font-size:13px; color:#1f2937; min-width:0; } @media (max-width:1100px){#drakoCfgBar .dcfg-bar-main { grid-template-columns:repeat(3,minmax(150px,1fr)); } #drakoCfgBar .dcfg-bar-priceblk { justify-self:start; } #drakoCfgBar .dcfg-bar-data { grid-template-columns:repeat(2,minmax(0,1fr)); } } /* Sticky bar: rientra nel binario della scheda prodotto, con spazi compatti. */ #drakoCfgBar .dcfg-bar-inner { padding:9px 20px !important; } #drakoCfgBar .dcfg-bar-main { width:100%; grid-template-columns:minmax(140px,178px) minmax(155px,190px) minmax(190px,238px) minmax(24px,1fr) auto minmax(176px,220px); gap:12px !important; min-height:54px !important; } #drakoCfgBar .dcfg-bar-spacer { display:block !important; min-width:24px; } #drakoCfgBar .dcfg-bar-badge { width:100%; min-height:46px !important; padding:7px 12px !important; border-radius:8px !important; justify-content:flex-start; overflow:hidden; } #drakoCfgBar .dcfg-bar-badge-img { width:30px !important; height:30px !important; } #drakoCfgBar .dcfg-bar-badge-txt { min-width:0; } #drakoCfgBar .dcfg-bar-badge-txt small { font-size:9px !important; } #drakoCfgBar .dcfg-bar-badge-txt b { font-size:14px !important; line-height:1.15; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } #drakoCfgBar .dcfg-bar-priceblk { align-items:flex-end; min-width:150px; } #drakoCfgBar .dcfg-bar-priceblk small { font-size:9px; text-transform:uppercase; color:var(--dcfg-muted); } #drakoCfgBar .dcfg-bar-total { font-size:25px !important; } #drakoCfgBar .dcfg-bar-add { width:100%; min-height:46px !important; padding:10px 18px !important; border-radius:7px !important; font-size:14px !important; } #drakoCfgBar .dcfg-bar-uni { max-width:1240px !important; width:100%; margin:0 auto !important; padding:14px 20px 18px !important; } #drakoCfgBar .dcfg-bar-uni-grid { grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1.15fr) !important; gap:14px !important; } #drakoCfgBar .dcfg-bar-uni-card { border-radius:8px !important; padding:12px !important; } #drakoCfgBar .drako-pi-installments { border:1px solid #e5e7eb; border-radius:8px; background:#fff; padding:10px 12px; font-size:13px; color:#374151; } #drakoCfgBar .drako-pi-inst-row { display:flex; align-items:center; justify-content:space-between; gap:10px; } #drakoCfgBar .drako-pi-inst-text strong { color:#111827; font-size:15px; } #drakoCfgBar .drako-pi-inst-logos { display:inline-flex; align-items:center; gap:6px; flex:0 0 auto; } #drakoCfgBar .drako-pi-inst-logos img { display:block; height:20px; width:auto; } #drakoCfgBar .drako-pi-inst-sub { margin-top:5px; font-size:11.5px; line-height:1.35; color:var(--dcfg-muted); } #drakoCfgBar .drako-pi-inst-sub a { color:var(--dcfg-blue); text-decoration:underline; } #drakoCfgBar .dcfg-paypal-more strong { color:#0070ba; font-size:15px; font-style:italic; } #drakoCfgBar .dcfg-bar-data { grid-template-columns:repeat(5,minmax(0,1fr)) !important; gap:8px 14px !important; } #drakoCfgBar .dcfg-bar-data li { font-size:12.5px !important; } @media (max-width:1100px){#drakoCfgBar .dcfg-bar-main { grid-template-columns:minmax(135px,1fr) minmax(145px,1fr) minmax(175px,1fr); } #drakoCfgBar .dcfg-bar-priceblk { justify-self:start !important; } #drakoCfgBar .dcfg-bar-add { grid-column:auto; } #drakoCfgBar .dcfg-bar-uni-grid { grid-template-columns:1fr !important; } #drakoCfgBar .dcfg-bar-data { grid-template-columns:repeat(2,minmax(0,1fr)) !important; }} @media (max-width:680px){#drakoCfgBar .dcfg-bar-inner { padding:8px 12px !important; } #drakoCfgBar .dcfg-bar-main { grid-template-columns:1fr 1fr; gap:8px !important; } #drakoCfgBar .dcfg-bar-priceblk { grid-column:1; } #drakoCfgBar .dcfg-bar-add { grid-column:2; } #drakoCfgBar .dcfg-bar-total { font-size:21px !important; } #drakoCfgBar .dcfg-bar-data { grid-template-columns:1fr !important; }} /* Dettagli finanziamento della sticky bar: modal compatto, non altera gli spazi della barra. */ .dcfg-fin-modal { position:fixed; inset:0; z-index:3000; display:flex; align-items:center; justify-content:center; padding:18px; background:rgba(15,23,42,.38); } .dcfg-fin-modal[hidden] { display:none !important; } .dcfg-fin-modal-box { position:relative; width:min(680px,100%); max-height:86vh; overflow:auto; background:#fff; border:1px solid #e5e7eb; border-radius:10px; box-shadow:0 18px 54px rgba(15,23,42,.28); padding:20px 22px 22px; font-family:"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif; color:#1f2937; } .dcfg-fin-modal-close { position:absolute; top:10px; right:12px; width:30px; height:30px; border:0; background:#f3f4f6; border-radius:50%; color:#374151; font-size:22px; line-height:28px; cursor:pointer; } .dcfg-fin-modal h2, .dcfg-fin-modal h3 { margin:0 38px 10px 0; font-size:20px; line-height:1.25; color:#0f172a; } .dcfg-fin-modal p { margin:0 0 12px; font-size:13px; line-height:1.45; color:#475569; } .dcfg-fin-providers { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:12px 0; } .dcfg-fin-providers > div { border:1px solid #e5e7eb; border-radius:8px; padding:10px; display:grid; gap:5px; align-content:start; } .dcfg-fin-providers img { display:block; max-width:82px; height:auto; } .dcfg-fin-providers strong { font-size:14px; color:#111827; } .dcfg-fin-providers span { font-size:12px; line-height:1.35; color:#64748b; } .dcfg-sella-rates { width:100%; border-collapse:collapse; margin:12px 0; font-size:13px; } .dcfg-sella-rates th, .dcfg-sella-rates td { padding:8px 9px; border-bottom:1px solid #e5e7eb; text-align:left; white-space:nowrap; } .dcfg-sella-rates th { color:#64748b; font-size:11px; text-transform:uppercase; letter-spacing:.04em; } .dcfg-sella-rates tr.is-best td { background:#f0f7ff; font-weight:700; color:#0f172a; } .dcfg-fin-note { font-size:12px !important; color:#64748b !important; margin-bottom:0 !important; } @media (max-width:620px){.dcfg-fin-providers { grid-template-columns:1fr; } .dcfg-sella-rates { font-size:12px; } .dcfg-sella-rates th, .dcfg-sella-rates td { padding:7px 6px; }} /* Sticky bar finale: piu' alta, elementi distribuiti nel layout prodotto, finanziamento solo in barra. */ #drakoCfgBar .dcfg-bar-inner { max-width:1240px !important; padding:13px 20px !important; } #drakoCfgBar .dcfg-bar-main { grid-template-columns:minmax(170px,1fr) minmax(170px,1fr) minmax(230px,1.25fr) minmax(24px,.35fr) auto minmax(220px,.9fr) !important; min-height:72px !important; } #drakoCfgBar .dcfg-bar-badge { min-height:60px !important; padding:11px 15px !important; border-radius:9px !important; cursor:pointer; } #drakoCfgBar .dcfg-bar-badge-img, #drakoCfgBar .dcfg-bar-badge-ico { width:34px !important; height:34px !important; } #drakoCfgBar .dcfg-bar-badge-txt small { font-size:10px !important; } #drakoCfgBar .dcfg-bar-badge-txt b { font-size:16px !important; } #drakoCfgBar .dcfg-bar-total { font-size:30px !important; } #drakoCfgBar .dcfg-bar-priceblk { min-width:175px !important; } #drakoCfgBar .dcfg-bar-add { min-height:60px !important; padding:12px 20px !important; font-size:15px !important; border-radius:8px !important; } #drakoCfgBar .dcfg-bar-uni-grid { grid-template-columns:minmax(0,1fr) minmax(0,1fr) !important; gap:16px !important; } #drakoCfgBar .dcfg-bar-data { display:grid !important; grid-template-columns:1fr !important; gap:8px !important; } #drakoCfgBar .dcfg-bar-data li { font-size:13px !important; line-height:1.25; } @media (max-width:1100px){#drakoCfgBar .dcfg-bar-main { min-height:auto !important; } #drakoCfgBar .dcfg-bar-spacer { display:none !important; }} @media (max-width:680px){#drakoCfgBar .dcfg-bar-inner { padding:10px 12px !important; } #drakoCfgBar .dcfg-bar-main { gap:9px !important; } #drakoCfgBar .dcfg-bar-badge { min-height:54px !important; } #drakoCfgBar .dcfg-bar-finance { grid-column:1 / -1; } #drakoCfgBar .dcfg-bar-total { font-size:23px !important; } #drakoCfgBar .dcfg-bar-add { min-height:52px !important; }} /* Sticky: i 5 elementi occupano tutto il binario utile, senza colonna vuota centrale. */ #drakoCfgBar .dcfg-bar-inner{padding:14px 22px!important} #drakoCfgBar .dcfg-bar-main{grid-template-columns:minmax(180px,1fr) minmax(180px,1fr) minmax(240px,1.18fr) minmax(190px,.72fr) minmax(230px,.9fr)!important;gap:14px!important;min-height:76px!important} #drakoCfgBar .dcfg-bar-spacer{display:none!important} #drakoCfgBar .dcfg-bar-badge{min-height:62px!important} #drakoCfgBar .dcfg-bar-priceblk{min-width:190px!important} #drakoCfgBar .dcfg-bar-add{min-height:62px!important} #drakoCfgBar .dcfg-bar-uni{max-width:1580px!important;padding-left:22px!important;padding-right:22px!important} @media (max-width:1100px){#drakoCfgBar .dcfg-bar-main{grid-template-columns:repeat(3,minmax(160px,1fr))!important}} @media (max-width:680px){ #drakoCfgBar .dcfg-bar-priceblk{justify-self:start!important}} /* Dropdown sticky pulito: solo FPS e Alimentazione, niente dati/riepilogo nel pannello. */ #drakoCfgBar .dcfg-bar-uni{padding-bottom:14px!important;} #drakoCfgBar .dcfg-bar-uni-grid{grid-template-columns:minmax(0,1.2fr) minmax(300px,.8fr)!important;align-items:start!important;} @media (max-width:900px){#drakoCfgBar .dcfg-bar-uni-grid{grid-template-columns:1fr!important}} /* Sticky con dati dentro la barra e respiro rispetto al prodotto sottostante. */ #drakoCfgBar .dcfg-bar-inner{padding:14px 22px 10px!important;} #drakoCfgBar .dcfg-bar-main{grid-template-columns:minmax(190px,1fr) minmax(190px,1fr) minmax(250px,1.18fr) minmax(210px,.78fr) minmax(245px,.92fr)!important;} #drakoCfgBar .dcfg-bar-data-line{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:5px 18px;margin:9px auto 0;padding-top:8px;border-top:1px solid #eef2f6;font-size:12px;line-height:1.25;max-width:1500px;} #drakoCfgBar .dcfg-bar-data-line span{white-space:nowrap;} #drakoCfgBar .dcfg-bar-data-line i{font-size:13px;width:15px;} #drakoCfgBar .dcfg-bar-uni{margin-top:10px!important;} #drakoCfgBar + .drako-pi-cfghead, #drakoCfgBar ~ .drako-pi-cfghead{margin-top:16px!important;} #drakoCfgBar.is-visible{box-shadow:0 5px 18px rgba(15,23,42,.12)!important;} @media (max-width:1100px){#drakoCfgBar .dcfg-bar-data-line{justify-content:flex-start;font-size:11.5px}} /* Sticky finale: dati a fianco dei badge, non sotto. */ #drakoCfgBar .dcfg-bar-inner{display:block!important;max-width:1580px!important;padding:12px 22px!important;} #drakoCfgBar .dcfg-bar-main{display:grid!important;grid-template-columns:minmax(132px,.72fr) minmax(150px,.78fr) minmax(190px,.92fr) minmax(360px,1.55fr) minmax(160px,.68fr) minmax(220px,.86fr)!important;gap:10px!important;min-height:72px!important;} #drakoCfgBar .dcfg-bar-badge{min-height:56px!important;padding:9px 12px!important;} #drakoCfgBar .dcfg-bar-badge-img, #drakoCfgBar .dcfg-bar-badge-ico{width:30px!important;height:30px!important;} #drakoCfgBar .dcfg-bar-badge-txt small{font-size:9px!important;} #drakoCfgBar .dcfg-bar-badge-txt b{font-size:14px!important;} #drakoCfgBar .dcfg-bar-data-line{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));align-items:center;justify-content:stretch;gap:4px 14px;margin:0!important;padding:0!important;border-top:0!important;max-width:none!important;color:#475569;font-size:11.5px;line-height:1.2;min-width:0;} #drakoCfgBar .dcfg-bar-data-line span{display:inline-flex;align-items:center;gap:5px;white-space:nowrap;min-width:0;overflow:hidden;text-overflow:ellipsis;} #drakoCfgBar .dcfg-bar-data-line i{font-style:normal;color:var(--dcfg-blue);width:14px;text-align:center;flex:0 0 auto;} #drakoCfgBar .dcfg-bar-data-line strong{color:#111827;font-weight:800;} #drakoCfgBar .dcfg-bar-total{font-size:28px!important;} #drakoCfgBar .dcfg-bar-add{min-height:56px!important;padding:10px 18px!important;} #drakoCfgBar .dcfg-bar-uni{margin-top:0!important;} @media (max-width:1250px){#drakoCfgBar .dcfg-bar-main{grid-template-columns:repeat(3,minmax(145px,1fr))!important} .dcfg-bar-data-line{grid-column:1 / -1!important;grid-template-columns:repeat(3,minmax(0,1fr))!important} } @media (max-width:680px){#drakoCfgBar .dcfg-bar-main{grid-template-columns:1fr 1fr!important} #drakoCfgBar .dcfg-bar-data-line{display:none!important}} /* Sticky: finanziamento come blocco osCommerce standard, non badge. */ #drakoCfgBar .dcfg-bar-main{grid-template-columns:minmax(125px,.58fr) minmax(140px,.62fr) minmax(300px,1.22fr) minmax(390px,1.46fr) minmax(160px,.62fr) minmax(220px,.82fr)!important;gap:12px!important;} #drakoCfgBar .dcfg-bar-fintext{width:100%;min-width:0;align-self:center;cursor:pointer;color:#374151;line-height:1.18;} #drakoCfgBar .dcfg-bar-fintext .drako-pi-installments{border:0!important;background:transparent!important;padding:0!important;margin:0!important;border-radius:0!important;font-size:12px!important;color:#374151!important;} #drakoCfgBar .dcfg-bar-fintext .drako-pi-inst-row{display:flex!important;align-items:center!important;justify-content:flex-start!important;gap:8px!important;min-width:0;} #drakoCfgBar .dcfg-bar-fintext .drako-pi-inst-text{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;} #drakoCfgBar .dcfg-bar-fintext .drako-pi-inst-text strong{font-size:14px!important;color:#111827!important;font-weight:800!important;} #drakoCfgBar .dcfg-bar-fintext .drako-pi-inst-sub{margin-top:2px!important;font-size:10.5px!important;line-height:1.2!important;color:#64748b!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} #drakoCfgBar .dcfg-bar-fintext .drako-pi-inst-sub a{color:var(--dcfg-blue)!important;text-decoration:underline!important;} #drakoCfgBar .dcfg-bar-fintext .drako-pi-inst-logos{margin-left:auto;display:inline-flex!important;gap:5px!important;flex:0 0 auto;} #drakoCfgBar .dcfg-bar-fintext .drako-pi-inst-logos img{height:18px!important;width:auto!important;display:block;} #drakoCfgBar .dcfg-bar-fin-placeholder{font-size:12px;color:#64748b;font-weight:700;} #drakoCfgBar .dcfg-bar-finance.is-paypal, #drakoCfgBar .dcfg-bar-finance.is-klarna, #drakoCfgBar .dcfg-bar-finance.is-sella{background:transparent!important;border:0!important;} #drakoCfgBar .dcfg-bar-badge{min-height:52px!important;padding:8px 11px!important;} #drakoCfgBar .dcfg-bar-badge-img{width:28px!important;height:28px!important;} #drakoCfgBar .dcfg-bar-badge-txt b{font-size:13.5px!important;} #drakoCfgBar .dcfg-bar-data-line{font-size:11px!important;gap:3px 12px!important;} #drakoCfgBar .dcfg-bar-total{font-size:27px!important;} #drakoCfgBar .dcfg-bar-add{min-height:54px!important;} @media (max-width:1250px){#drakoCfgBar .dcfg-bar-fintext{grid-column:auto!important} } @media (max-width:680px){#drakoCfgBar .dcfg-bar-fintext{grid-column:1 / -1!important} .dcfg-bar-fintext .drako-pi-inst-sub{display:none!important}} /* Sticky: layout compatto con finanziamento osCommerce visibile subito. */ #drakoCfgBar .dcfg-bar-inner{max-width:1660px!important;padding:10px 20px!important;} #drakoCfgBar .dcfg-bar-main{grid-template-columns:minmax(120px,.55fr) minmax(135px,.6fr) minmax(330px,1.22fr) minmax(410px,1.45fr) minmax(165px,.58fr) minmax(220px,.78fr)!important;min-height:60px!important;} #drakoCfgBar .dcfg-bar-badge{padding:7px 10px!important;border-radius:8px!important;} #drakoCfgBar .dcfg-bar-badge-img,#drakoCfgBar .dcfg-bar-badge-ico{width:27px!important;height:27px!important;} #drakoCfgBar .dcfg-bar-badge-txt small{font-size:8.5px!important;line-height:1!important;} #drakoCfgBar .dcfg-bar-badge-txt b{font-size:13px!important;line-height:1.05!important;} #drakoCfgBar .dcfg-bar-fintext{min-width:0!important;padding-right:4px!important;} #drakoCfgBar .dcfg-bar-fintext .drako-pi-installments{font-size:11.5px!important;line-height:1.15!important;} #drakoCfgBar .dcfg-bar-fintext .drako-pi-inst-text strong{font-size:13.5px!important;} #drakoCfgBar .dcfg-bar-fintext .drako-pi-inst-sub{font-size:10px!important;margin-top:1px!important;} #drakoCfgBar .dcfg-bar-data-line{gap:3px 10px!important;} #drakoCfgBar .dcfg-bar-total{line-height:1!important;} #drakoCfgBar .dcfg-bar-priceblk small{font-size:8.5px!important;line-height:1!important;} #drakoCfgBar .dcfg-bar-add{padding:9px 16px!important;font-size:14px!important;border-radius:7px!important;} /* Sticky: allineata al binario della scheda prodotto. */ #drakoCfgBar .dcfg-bar-inner{max-width:1530px!important;width:100%!important;margin:0 auto!important;padding:10px 0!important;box-sizing:border-box;} #drakoCfgBar .dcfg-bar-main{grid-template-columns:minmax(150px,170px) minmax(165px,180px) minmax(270px,300px) minmax(330px,1fr) minmax(135px,150px) minmax(205px,230px)!important;gap:10px!important;min-height:58px!important;align-items:center!important;} #drakoCfgBar .dcfg-bar-badge{min-height:48px!important;padding:7px 11px!important;} #drakoCfgBar .dcfg-bar-fintext{align-self:center!important;} #drakoCfgBar .dcfg-bar-fintext .drako-pi-inst-row{gap:6px!important;} #drakoCfgBar .dcfg-bar-fintext .drako-pi-inst-text{max-width:100%;} #drakoCfgBar .dcfg-bar-fintext .drako-pi-inst-sub{max-width:100%;} #drakoCfgBar .dcfg-bar-data-line{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:3px 12px!important;font-size:10.5px!important;line-height:1.15!important;align-content:center!important;} #drakoCfgBar .dcfg-bar-data-line span{white-space:nowrap!important;} #drakoCfgBar .dcfg-bar-priceblk{justify-self:end!important;text-align:right!important;min-width:0!important;} #drakoCfgBar .dcfg-bar-total{font-size:25px!important;white-space:nowrap!important;} #drakoCfgBar .dcfg-bar-add{width:100%!important;min-height:50px!important;} #drakoCfgBar .dcfg-bar-uni{max-width:1530px!important;margin-left:auto!important;margin-right:auto!important;padding-left:0!important;padding-right:0!important;} @media (max-width:1580px){#drakoCfgBar .dcfg-bar-inner{padding-left:16px!important;padding-right:16px!important;} #drakoCfgBar .dcfg-bar-uni{padding-left:16px!important;padding-right:16px!important;}} @media (max-width:1250px){#drakoCfgBar .dcfg-bar-main{grid-template-columns:repeat(3,minmax(0,1fr))!important;} #drakoCfgBar .dcfg-bar-data-line{grid-column:1 / -1!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;} #drakoCfgBar .dcfg-bar-priceblk{justify-self:start!important;text-align:left!important;} #drakoCfgBar .dcfg-bar-add{width:auto!important;}} /* Sticky: stesso binario visivo della scheda prodotto, non del sito intero. */ #drakoCfgBar.dcfg-bar .dcfg-bar-inner{max-width:1150px!important;} #drakoCfgBar.dcfg-bar .dcfg-bar-main{grid-template-columns:130px 145px 235px minmax(0,270px) 130px 190px!important;justify-content:center!important;} #drakoCfgBar.dcfg-bar .dcfg-bar-badge{min-height:46px!important;padding:7px 10px!important;border-radius:7px!important;} #drakoCfgBar.dcfg-bar .dcfg-bar-badge-img,#drakoCfgBar.dcfg-bar .dcfg-bar-badge-ico{width:26px!important;height:26px!important;} #drakoCfgBar.dcfg-bar .dcfg-bar-badge-txt small{font-size:8px!important;line-height:1!important;} #drakoCfgBar.dcfg-bar .dcfg-bar-badge-txt b{font-size:12.5px!important;line-height:1.05!important;} #drakoCfgBar.dcfg-bar .dcfg-bar-fintext{padding:0!important;overflow:hidden!important;} #drakoCfgBar.dcfg-bar .dcfg-bar-fintext .drako-pi-installments{font-size:10.5px!important;line-height:1.12!important;} #drakoCfgBar.dcfg-bar .dcfg-bar-fintext .drako-pi-inst-row{gap:4px!important;} #drakoCfgBar.dcfg-bar .dcfg-bar-fintext .drako-pi-inst-text strong{font-size:12.5px!important;} #drakoCfgBar.dcfg-bar .dcfg-bar-fintext .drako-pi-inst-sub{font-size:9.2px!important;} #drakoCfgBar.dcfg-bar .dcfg-bar-data-line{grid-template-columns:1fr 1fr!important;gap:2px 8px!important;font-size:9.6px!important;line-height:1.12!important;} #drakoCfgBar.dcfg-bar .dcfg-bar-data-line span{min-width:0!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;} #drakoCfgBar.dcfg-bar .dcfg-bar-data-line i{width:12px!important;font-size:11px!important;} #drakoCfgBar.dcfg-bar .dcfg-bar-priceblk{justify-self:end!important;} #drakoCfgBar.dcfg-bar .dcfg-bar-priceblk small{font-size:8px!important;} #drakoCfgBar.dcfg-bar .dcfg-bar-total{font-size:23px!important;} #drakoCfgBar.dcfg-bar .dcfg-bar-add{min-height:48px!important;padding:8px 14px!important;font-size:13px!important;border-radius:7px!important;} #drakoCfgBar.dcfg-bar .dcfg-bar-uni{max-width:1150px!important;padding-left:0!important;padding-right:0!important;} @media (max-width:1190px){#drakoCfgBar.dcfg-bar .dcfg-bar-inner{padding-left:14px!important;padding-right:14px!important;} #drakoCfgBar.dcfg-bar .dcfg-bar-main{grid-template-columns:repeat(3,minmax(0,1fr))!important;} #drakoCfgBar.dcfg-bar .dcfg-bar-data-line{grid-column:1 / -1!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;} #drakoCfgBar.dcfg-bar .dcfg-bar-priceblk{justify-self:start!important;text-align:left!important;} #drakoCfgBar.dcfg-bar .dcfg-bar-add{width:auto!important;}} /* Sticky: riempie tutto il layout prodotto indicato dalle guide arancioni. */ #drakoCfgBar.dcfg-bar .dcfg-bar-inner{display:block!important;max-width:1160px!important;} #drakoCfgBar.dcfg-bar .dcfg-bar-main{grid-template-columns:130px 145px 260px minmax(0,290px) 125px 160px!important;gap:10px!important;} #drakoCfgBar.dcfg-bar .dcfg-bar-badge{width:100%!important;box-sizing:border-box!important;} #drakoCfgBar.dcfg-bar .dcfg-bar-fintext{width:100%!important;box-sizing:border-box!important;} #drakoCfgBar.dcfg-bar .dcfg-bar-data-line{box-sizing:border-box!important;} #drakoCfgBar.dcfg-bar .dcfg-bar-add{box-sizing:border-box!important;} #drakoCfgBar.dcfg-bar .dcfg-bar-priceblk{width:100%!important;box-sizing:border-box!important;} #drakoCfgBar.dcfg-bar .dcfg-bar-total{font-size:22px!important;} #drakoCfgBar.dcfg-bar .dcfg-bar-add{font-size:12.5px!important;padding-left:10px!important;padding-right:10px!important;} @media (min-width:1191px){#drakoCfgBar.dcfg-bar .dcfg-bar-inner{padding-left:0!important;padding-right:0!important;}} /* Sticky: occupa tutto il binario del configuratore/prodotto, da nav sinistra a ultima colonna. */ #drakoCfgBar.dcfg-bar .dcfg-bar-inner{max-width:1440px!important;width:100%!important;margin-left:auto!important;margin-right:auto!important;padding:9px 0!important;box-sizing:border-box!important;} #drakoCfgBar.dcfg-bar .dcfg-bar-main{width:100%!important;display:grid!important;grid-template-columns:minmax(145px,.7fr) minmax(160px,.75fr) minmax(330px,1.45fr) minmax(420px,1.75fr) minmax(150px,.65fr) minmax(230px,.95fr)!important;min-height:56px!important;justify-content:stretch!important;} #drakoCfgBar.dcfg-bar .dcfg-bar-badge,#drakoCfgBar.dcfg-bar .dcfg-bar-fintext,#drakoCfgBar.dcfg-bar .dcfg-bar-data-line,#drakoCfgBar.dcfg-bar .dcfg-bar-priceblk,#drakoCfgBar.dcfg-bar .dcfg-bar-add{width:100%!important;box-sizing:border-box!important;} #drakoCfgBar.dcfg-bar .dcfg-bar-badge{min-height:48px!important;padding:7px 11px!important;} #drakoCfgBar.dcfg-bar .dcfg-bar-fintext .drako-pi-installments{line-height:1.14!important;} #drakoCfgBar.dcfg-bar .dcfg-bar-fintext .drako-pi-inst-sub{font-size:9.8px!important;} #drakoCfgBar.dcfg-bar .dcfg-bar-data-line{gap:3px 14px!important;font-size:10.2px!important;line-height:1.15!important;} #drakoCfgBar.dcfg-bar .dcfg-bar-total{font-size:24px!important;} #drakoCfgBar.dcfg-bar .dcfg-bar-add{min-height:50px!important;font-size:13px!important;} #drakoCfgBar.dcfg-bar .dcfg-bar-uni{max-width:1440px!important;width:100%!important;margin-left:auto!important;margin-right:auto!important;} @media (max-width:1480px){#drakoCfgBar.dcfg-bar .dcfg-bar-inner{padding-left:16px!important;padding-right:16px!important;} #drakoCfgBar.dcfg-bar .dcfg-bar-uni{padding-left:16px!important;padding-right:16px!important;}} @media (max-width:1250px){#drakoCfgBar.dcfg-bar .dcfg-bar-main{grid-template-columns:repeat(3,minmax(0,1fr))!important;} #drakoCfgBar.dcfg-bar .dcfg-bar-data-line{grid-column:1 / -1!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;} #drakoCfgBar.dcfg-bar .dcfg-bar-priceblk{text-align:left!important;} #drakoCfgBar.dcfg-bar .dcfg-bar-add{width:auto!important;}} /* Sticky: blocco dati/codici leggibile dentro la barra. */ #drakoCfgBar.dcfg-bar .dcfg-bar-main{grid-template-columns:125px 140px minmax(260px,.95fr) minmax(450px,1.55fr) 140px 190px!important;gap:12px!important;} #drakoCfgBar.dcfg-bar .dcfg-bar-data-line{grid-template-columns:repeat(2,minmax(0,1fr))!important;grid-auto-rows:auto!important;align-content:center!important;gap:4px 18px!important;line-height:1.2!important;color:#374151!important;overflow:visible!important;} #drakoCfgBar.dcfg-bar .dcfg-bar-data-line strong{font-weight:800!important;color:#111827!important;} /* Sticky finance: PayPal/Klarna separati e leggibili, modal sopra ogni header. */ .dcfg-fin-modal{z-index:100000!important;} .dcfg-fin-providers-one{grid-template-columns:1fr!important;} #drakoCfgBar.dcfg-bar .dcfg-bar-fintext{overflow:visible!important;} #drakoCfgBar.dcfg-bar .dcfg-bar-fintext .dcfg-paypal-more{display:flex!important;align-items:center!important;gap:4px!important;min-width:0!important;color:#475569!important;} #drakoCfgBar.dcfg-bar .dcfg-paypal-more span{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;} #drakoCfgBar.dcfg-bar .dcfg-paypal-more img{height:15px!important;width:auto!important;display:block!important;flex:0 0 auto;margin:0 1px!important;} #drakoCfgBar.dcfg-bar .dcfg-paypal-more a{flex:0 0 auto;color:var(--dcfg-blue)!important;text-decoration:underline!important;font-weight:700!important;} #drakoCfgBar.dcfg-bar .dcfg-bar-fintext .drako-pi-inst-logos img{height:17px!important;} #drakoCfgBar.dcfg-bar .dcfg-bar-main{grid-template-columns:125px 140px minmax(300px,1.08fr) minmax(430px,1.45fr) 140px 190px!important;} /* Sticky finance: PayPal ufficiale via SDK messages. */ #drakoCfgBar.dcfg-bar .dcfg-paypal-more{display:block!important;min-height:18px!important;overflow:visible!important;white-space:normal!important;text-overflow:clip!important;} #drakoCfgBar.dcfg-bar .dcfg-paypal-ppmsg{display:block!important;min-height:18px!important;line-height:1.2!important;overflow:visible!important;} #drakoCfgBar.dcfg-bar .dcfg-paypal-ppmsg iframe{max-width:100%!important;} #drakoCfgBar.dcfg-bar .dcfg-bar-fintext .drako-pi-inst-sub.dcfg-paypal-more{font-size:11px!important;margin-top:2px!important;} #drakoCfgBar.dcfg-bar .dcfg-bar-main{grid-template-columns:125px 140px minmax(330px,1.18fr) minmax(410px,1.35fr) 140px 190px!important;} /* Sticky finance: badge Klarna vicino al testo, non spinto a destra. */ #drakoCfgBar.dcfg-bar .dcfg-bar-fintext .drako-pi-inst-row{justify-content:flex-start!important;gap:7px!important;} #drakoCfgBar.dcfg-bar .dcfg-bar-fintext .drako-pi-inst-logos{margin-left:4px!important;flex:0 0 auto!important;gap:4px!important;} #drakoCfgBar.dcfg-bar .dcfg-bar-fintext .drako-pi-inst-logos img{height:16px!important;} #drakoCfgBar.dcfg-bar .dcfg-bar-fintext .drako-pi-inst-text{flex:0 1 auto!important;} /* ===== FPS nav v3 (07-lug): badge FPS PIATTO (no gradient) piu' alto e piu' grande, 1% low accanto agli FPS, nessuna riga di separazione; slot e CASE senza bordo ===== */ /* slot "singoli" senza bordo */ #drakoCfgCustomizer .dcfg-cnav-link{border:0!important;background:transparent!important;box-shadow:none!important;border-radius:8px!important;padding:9px 8px!important;} #drakoCfgCustomizer .dcfg-cnav-link:hover{background:#f2f6fb!important;} #drakoCfgCustomizer .dcfg-cnav-link.is-active{background:#eef4fb!important;} /* CASE hero: niente bordo/ombra/divisori */ #drakoCfgCustomizer a.dcfg-cnav-hero,#drakoCfgCustomizer .dcfg-cnav-hero{border:0!important;box-shadow:none!important;background:transparent!important;border-radius:10px!important;} #drakoCfgCustomizer a.dcfg-cnav-hero:hover{border:0!important;box-shadow:none!important;} #drakoCfgCustomizer .dcfg-cnav-case-caption{border-top:0!important;} /* nessuna riga divisoria attorno al blocco FPS */ #drakoCfgCustomizer .dcfg-cnav-fps{border:0!important;} /* badge FPS: fondo PIATTO, piu' alto e piu' grande */ #drakoCfgCustomizer .dcfg-cnav-fps-badge{display:flex!important;flex-direction:column!important;align-items:stretch!important;grid-template-columns:none!important;gap:12px!important;padding:24px 16px!important;background:#e9f2fd!important;background-image:none!important;} #drakoCfgCustomizer .dcfg-cnav-fps-top{display:flex!important;align-items:center!important;gap:9px!important;min-width:0;} #drakoCfgCustomizer .dcfg-cnav-fps-ic{width:46px!important;height:46px!important;object-fit:contain;flex:0 0 auto;} #drakoCfgCustomizer .dcfg-cnav-fps-num{font-size:48px!important;line-height:.88!important;font-weight:900!important;} #drakoCfgCustomizer .dcfg-cnav-fps-unit{font-size:16px!important;font-weight:800!important;color:#1c63ab!important;align-self:flex-end;margin-bottom:6px;} #drakoCfgCustomizer .dcfg-cnav-fps-low{display:inline-flex!important;flex-direction:column!important;align-items:flex-start!important;justify-content:center;margin-left:12px!important;line-height:1.02!important;} #drakoCfgCustomizer .dcfg-cnav-fps-low b{font-size:22px!important;font-weight:800!important;color:#1c2430!important;} #drakoCfgCustomizer .dcfg-cnav-fps-low small{font-size:10px!important;font-weight:700!important;color:#5f6774!important;text-transform:uppercase;letter-spacing:.03em;} #drakoCfgCustomizer .dcfg-cnav-fps-bot{display:flex!important;align-items:center!important;gap:9px!important;min-width:0;padding-top:0!important;border-top:0!important;} #drakoCfgCustomizer .dcfg-cnav-fps-gimg{width:28px!important;height:28px!important;border-radius:6px;object-fit:cover;flex:0 0 auto;} #drakoCfgCustomizer .dcfg-cnav-fps-game{flex:1 1 auto!important;min-width:0!important;font-size:15px!important;font-weight:700!important;color:#1c2430!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} #drakoCfgCustomizer .dcfg-cnav-fps-res{flex:0 0 auto!important;font-size:13.5px!important;font-weight:800!important;color:#1c63ab!important;background:rgba(28,99,171,.12);padding:3px 10px;border-radius:999px;} /* Card configuratore: variazione prezzo a sinistra, FPS a destra. */ #drakoCfgCustomizer .dcfg-cat-grid .drako-pcb2-opt-price{ width:100%!important; display:flex!important; align-items:baseline!important; justify-content:space-between!important; gap:14px!important; flex-wrap:nowrap!important; text-align:left!important; } #drakoCfgCustomizer .dcfg-cat-grid .drako-pcb2-opt-delta{ order:0!important; margin-right:auto!important; margin-left:0!important; font-size:16px!important; font-weight:700!important; /* 15/08 — RIMOSSA: color:#1a1a1a!important Questa regola serve l'impaginazione della variazione dentro la card (ordine, margini, corpo, allineamento). Il colore c'era finito dentro per inerzia, ma con !important schiacciava le due classi semantiche is-positive/is-negative definite a riga ~75 e ~556: un risparmio di 330 € usciva identico a un sovrapprezzo di 40, e le due regole "giuste" erano lettera morta senza che nulla lo segnalasse. Il colore ora lo decide chi ha l'informazione. Non rimetterlo qui: se serve cambiarlo, si cambiano le regole semantiche. */ font-family:'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif!important; letter-spacing:-.3px!important; line-height:1.05!important; display:inline-flex!important; align-items:baseline!important; justify-content:flex-start!important; gap:5px!important; white-space:nowrap!important; } #drakoCfgCustomizer .dcfg-cat-grid .drako-pcb2-opt-fps{ order:1!important; margin-left:auto!important; margin-right:0!important; font-size:21px!important; line-height:1!important; font-weight:900!important; font-family:'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif!important; letter-spacing:-.3px!important; font-variant-numeric:tabular-nums!important; display:inline-flex!important; align-items:baseline!important; justify-content:flex-end!important; gap:3px!important; white-space:nowrap!important; } #drakoCfgCustomizer .dcfg-cat-grid .drako-pcb2-opt-fps.is-up{color:#15803d!important;} #drakoCfgCustomizer .dcfg-cat-grid .drako-pcb2-opt-fps.is-down{color:#b91c1c!important;} #drakoCfgCustomizer .dcfg-cat-grid .drako-pcb2-fps-sign{margin-right:3px!important;} #drakoCfgCustomizer .dcfg-cat-grid .drako-pcb2-fps-unit{ margin-left:3px!important; font-size:13px!important; font-weight:800!important; /* eredita il colore del badge (verde in salita, grigio in discesa): era fissa a #1c63ab e faceva il mix blu/verde. Il badge nasce sempre con is-up o is-down - a delta zero il JS lo rimuove - quindi non esiste uno stato senza colore. */ color:inherit!important; } #drakoCfgCustomizer .dcfg-cat-grid .drako-pcb2-opt-sign{ margin-right:4px!important; flex:0 0 auto!important; } #drakoCfgCustomizer .dcfg-cat-grid .drako-pcb2-opt-value{flex:0 0 auto!important;} /* 15/08 — la scheda SCELTA torna a dire qualcosa. Prima il badge era nascosto: in una griglia dove ogni sorella mostra una cifra, la card scelta restava bianca proprio nel punto che si guarda, e un vuoto fra numeri si legge come dato mancante, non come «nessun sovrapprezzo». Ora porta «Nel prezzo» (#64748b su bianco = 4,76:1). Resta nascosto delta-zero: è un'opzione NON scelta che costa quanto quella corrente, e lì lo zero è davvero rumore. */ #drakoCfgCustomizer .dcfg-cat-grid .drako-pcb2-opt.is-selected .drako-pcb2-opt-delta.delta-zero{display:none!important;} #drakoCfgCustomizer .dcfg-cat-grid .drako-pcb2-opt-delta.is-included, #drakoCfgCustomizer .dcfg-cat-grid .drako-pcb2-opt-delta.delta-zero{ color:#64748b!important; font-size:12px!important; font-weight:700!important; text-transform:uppercase!important; letter-spacing:0!important; } #drakoCfgCustomizer .dcfg-cat-grid.is-list .drako-pcb2-opt-price{ justify-content:flex-end!important; gap:20px!important; } #drakoCfgCustomizer .dcfg-cat-grid.is-list .drako-pcb2-opt-delta{ min-width:112px!important; justify-content:flex-start!important; } #drakoCfgCustomizer .dcfg-cat-grid.is-list .drako-pcb2-opt-fps{ min-width:98px!important; justify-content:flex-end!important; } /* Card configuratore: piccolo respiro tra segno +/- e simbolo euro. */ #drakoCfgCustomizer .dcfg-cat-grid .drako-pcb2-opt-delta .drako-pcb2-opt-sign{ margin-right:6px!important; } /* Card configuratore: segno piu' vicino all'euro e delta sempre nascosto sul selezionato. */ #drakoCfgCustomizer .dcfg-cat-grid .drako-pcb2-opt-delta{ gap:0!important; } #drakoCfgCustomizer .dcfg-cat-grid .drako-pcb2-opt-delta .drako-pcb2-opt-sign{ margin-right:3px!important; } /* 15/08: idem alla regola di ~riga 563 — si nasconde la variazione, non l'etichetta «Nel prezzo». */ #drakoCfgCustomizer .dcfg-cat-grid .drako-pcb2-opt.is-selected .drako-pcb2-opt-delta:not(.is-included){ display:none!important; } /* Lista configuratore: ripristino layout precedente, senza ereditare la disposizione card. */ #drakoCfgCustomizer .dcfg-cat-grid.is-list .drako-pcb2-opt-price{ width:auto!important; margin-left:auto!important; display:flex!important; justify-content:flex-end!important; align-items:baseline!important; gap:18px!important; flex-wrap:nowrap!important; text-align:right!important; } #drakoCfgCustomizer .dcfg-cat-grid.is-list .drako-pcb2-opt-fps{ order:-1!important; min-width:78px!important; margin-left:0!important; margin-right:0!important; text-align:right!important; justify-content:flex-end!important; } #drakoCfgCustomizer .dcfg-cat-grid.is-list .drako-pcb2-opt-delta{ order:0!important; min-width:94px!important; margin-left:0!important; margin-right:0!important; text-align:right!important; justify-content:flex-end!important; } /* Alimentazione: dettaglio componenti selezionati che contribuiscono al TDP. */ #drakoCfgSummary .dcfg-psu-loadlist, #drakoCfgBar .dcfg-psu-loadlist, #drakoCfgCustomizer .dcfg-psu-loadlist{ margin-top:10px; border:1px solid #e2e6eb; border-radius:8px; background:#fff; overflow:hidden; } #drakoCfgSummary .dcfg-psu-loadlist h5, #drakoCfgBar .dcfg-psu-loadlist h5, #drakoCfgCustomizer .dcfg-psu-loadlist h5{ margin:0; padding:9px 12px; font-size:11px; line-height:1.2; font-weight:800; text-transform:uppercase; letter-spacing:.04em; color:#6b7280; background:#f7f9fc; border-bottom:1px solid #e9edf2; } #drakoCfgSummary .dcfg-psu-loadlist ul, #drakoCfgBar .dcfg-psu-loadlist ul, #drakoCfgCustomizer .dcfg-psu-loadlist ul{ list-style:none; margin:0; padding:0; } #drakoCfgSummary .dcfg-psu-loadlist li, #drakoCfgBar .dcfg-psu-loadlist li, #drakoCfgCustomizer .dcfg-psu-loadlist li{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:9px 12px; border-bottom:1px solid #eef1f4; } #drakoCfgSummary .dcfg-psu-loadlist li:last-child, #drakoCfgBar .dcfg-psu-loadlist li:last-child, #drakoCfgCustomizer .dcfg-psu-loadlist li:last-child{border-bottom:0;} #drakoCfgSummary .dcfg-psu-loadtext, #drakoCfgBar .dcfg-psu-loadtext, #drakoCfgCustomizer .dcfg-psu-loadtext{ min-width:0; display:flex; flex-direction:column; gap:2px; } #drakoCfgSummary .dcfg-psu-loadtext b, #drakoCfgBar .dcfg-psu-loadtext b, #drakoCfgCustomizer .dcfg-psu-loadtext b{ font-size:10.5px; color:#6b7280; text-transform:uppercase; letter-spacing:.03em; } #drakoCfgSummary .dcfg-psu-loadtext em, #drakoCfgBar .dcfg-psu-loadtext em, #drakoCfgCustomizer .dcfg-psu-loadtext em{ font-style:normal; font-size:12.5px; line-height:1.25; color:#1f2937; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } #drakoCfgSummary .dcfg-psu-loadlist strong, #drakoCfgBar .dcfg-psu-loadlist strong, #drakoCfgCustomizer .dcfg-psu-loadlist strong{ flex:0 0 auto; font-size:13px; color:#1a1a1a; font-weight:800; white-space:nowrap; } /* Alimentazione: mini-card TDP con immagine prodotto. */ #drakoCfgSummary .dcfg-psu-loadlist li, #drakoCfgBar .dcfg-psu-loadlist li, #drakoCfgCustomizer .dcfg-psu-loadlist li{ justify-content:flex-start!important; min-height:62px; } #drakoCfgSummary .dcfg-psu-loadthumb, #drakoCfgBar .dcfg-psu-loadthumb, #drakoCfgCustomizer .dcfg-psu-loadthumb{ flex:0 0 46px; width:46px; height:46px; border-radius:7px; background:#f4f6f9; border:1px solid #e5eaf0; display:flex; align-items:center; justify-content:center; overflow:hidden; } #drakoCfgSummary .dcfg-psu-loadthumb img, #drakoCfgBar .dcfg-psu-loadthumb img, #drakoCfgCustomizer .dcfg-psu-loadthumb img{ max-width:100%; max-height:100%; object-fit:contain; display:block; } #drakoCfgSummary .dcfg-psu-loadthumb.is-empty, #drakoCfgBar .dcfg-psu-loadthumb.is-empty, #drakoCfgCustomizer .dcfg-psu-loadthumb.is-empty{ display:none; } #drakoCfgSummary .dcfg-psu-loadtext, #drakoCfgBar .dcfg-psu-loadtext, #drakoCfgCustomizer .dcfg-psu-loadtext{ flex:1 1 auto; } #drakoCfgSummary .dcfg-psu-loadlist strong, #drakoCfgBar .dcfg-psu-loadlist strong, #drakoCfgCustomizer .dcfg-psu-loadlist strong{ margin-left:auto; } /* Alimentazione: prodotti TDP cliccabili e wattaggio sotto al nome. */ #drakoCfgSummary .dcfg-psu-loadtext, #drakoCfgBar .dcfg-psu-loadtext, #drakoCfgCustomizer .dcfg-psu-loadtext{ gap:2px!important; } #drakoCfgSummary .dcfg-psu-loadwatt, #drakoCfgBar .dcfg-psu-loadwatt, #drakoCfgCustomizer .dcfg-psu-loadwatt{ font-size:12px; line-height:1.2; color:var(--dcfg-blue); font-weight:800; } #drakoCfgSummary .dcfg-psu-loadlist strong, #drakoCfgBar .dcfg-psu-loadlist strong, #drakoCfgCustomizer .dcfg-psu-loadlist strong{ display:none!important; } /* Alimentazione: mini-card TDP informative, non cliccabili. */ #drakoCfgSummary .dcfg-psu-loadlist li, #drakoCfgBar .dcfg-psu-loadlist li, #drakoCfgCustomizer .dcfg-psu-loadlist li{ cursor:default!important; } #drakoCfgSummary .dcfg-psu-loadlist li:hover, #drakoCfgBar .dcfg-psu-loadlist li:hover, #drakoCfgSummary .dcfg-psu-loadlist li:focus, #drakoCfgBar .dcfg-psu-loadlist li:focus, #drakoCfgCustomizer .dcfg-psu-loadlist li:hover, #drakoCfgCustomizer .dcfg-psu-loadlist li:focus{ background:#fff!important; box-shadow:none!important; } /* Modale Sella / Rate in Rete: layout richiesta finanziamento. */ .dcfg-fin-modal .dcfg-fin-modal-box{ width:min(505px,100%)!important; border-radius:10px!important; padding:28px 32px 28px!important; } .dcfg-fin-modal .dcfg-fin-modal-close{ top:12px!important; right:12px!important; background:transparent!important; color:#8a8f98!important; font-size:26px!important; font-weight:400!important; } .dcfg-sella-form h2{ margin:0 32px 16px 0!important; font-size:19px!important; color:#2b2f36!important; font-weight:800!important; } .dcfg-sella-ref{ margin:0 0 14px!important; font-size:13px!important; color:#555b66!important; } .dcfg-sella-form .dcfg-sella-rates{ margin:0 0 14px!important; font-size:13px!important; border-collapse:collapse!important; } .dcfg-sella-form .dcfg-sella-rates th{ background:#f0f1f3!important; color:#5f636b!important; font-size:12px!important; text-transform:none!important; letter-spacing:0!important; font-weight:700!important; padding:10px 9px!important; text-align:center!important; } .dcfg-sella-form .dcfg-sella-rates td{ padding:9px!important; border-bottom:1px solid #e8eaee!important; color:#4a4f58!important; text-align:center!important; white-space:nowrap!important; } .dcfg-sella-form .dcfg-sella-rates tr.is-best td{ background:#fff!important; color:#4a4f58!important; font-weight:400!important; } .dcfg-sella-form .dcfg-sella-rates td strong{ color:#2d3138!important; font-weight:800!important; } .dcfg-rate-radio{display:inline-flex;align-items:center;justify-content:center;cursor:pointer;} .dcfg-rate-radio input{position:absolute;opacity:0;pointer-events:none;} .dcfg-rate-radio span, .dcfg-sella-best::before{ content:''; width:13px; height:13px; border:1px solid #8c939d; border-radius:50%; background:#fff; box-sizing:border-box; } .dcfg-rate-radio input:checked + span{ border-color:#1f6bb7; box-shadow:inset 0 0 0 3px #fff; background:#1f6bb7; } .dcfg-sella-best{ display:flex; align-items:center; justify-content:center; gap:7px; margin:4px 0 17px; font-size:13px; color:#4b5563; cursor:pointer; } .dcfg-sella-best input{position:absolute;opacity:0;pointer-events:none;} .dcfg-sella-best:has(input:checked)::before{ border-color:#1f6bb7; box-shadow:inset 0 0 0 3px #fff; background:#1f6bb7; } .dcfg-sella-sep{ height:1px; background:#dfe3e8; margin:0 0 18px; } .dcfg-sella-form h3{ margin:0 0 8px; font-size:16px; color:#2b2f36; font-weight:800; } .dcfg-sella-copy{ margin:0 0 16px!important; color:#5b616b!important; font-size:13px!important; line-height:1.45!important; } .dcfg-sella-fields{ display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-bottom:14px; } .dcfg-sella-field{ display:flex; flex-direction:column; gap:5px; min-width:0; } .dcfg-sella-field > span{ font-size:12px; font-weight:650; color:#374151; } .dcfg-sella-field:has(input[name="phone"]), .dcfg-sella-field:has(textarea){ grid-column:1 / -1; } .dcfg-sella-fields input, .dcfg-sella-fields textarea{ width:100%; border:1px solid #cfd6df; border-radius:6px; padding:10px 11px; font:13px 'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif; color:#20242b; box-sizing:border-box; } .dcfg-sella-fields input:focus, .dcfg-sella-fields textarea:focus{ outline:none; border-color:#1f6bb7; box-shadow:0 0 0 2px rgba(31,107,183,.12); } .dcfg-sella-submit{ width:100%; border:0; border-radius:6px; background:#2468ad; color:#fff; font-size:15px; font-weight:800; padding:12px 16px; cursor:pointer; } .dcfg-sella-submit:hover{background:#1d5792;} .dcfg-sella-privacy{ margin:28px 0 16px!important; font-size:12.5px!important; color:#6b7280!important; } .dcfg-sella-msg{ margin-top:12px; border-radius:6px; padding:10px 12px; font-size:13px; font-weight:700; } .dcfg-sella-msg.is-ok{ background:#e8f7ee; color:#15803d; } @media (max-width:560px){ .dcfg-fin-modal .dcfg-fin-modal-box{ box-sizing:border-box!important; width:100%!important; max-width:100%; min-width:0; padding:24px 18px!important; } .dcfg-sella-rates-scroll{ display:block; width:100%; max-width:100%; min-width:0; overflow-x:auto; overscroll-behavior-inline:contain; -webkit-overflow-scrolling:touch; } .dcfg-sella-fields{grid-template-columns:1fr;} } /* Configuratore dentro scheda prodotto: layout standard piu' compatto, senza stock/askbot duplicati */ .drako-pi-wrapper.dcfg-on { border:1px solid #e5e7eb !important; border-radius:14px !important; margin-top:0 !important; padding:12px 22px 20px !important; } /* rev 07-15l: .drako-pi-askbot ("Hai domande?") non piu' nascosto, come scheda standard */ .drako-pi-wrapper.dcfg-on .drako-pi-stock { display:none !important; } /* Riduzione spazio alto nella scheda prodotto configuratore */ .drako-pi-wrapper.dcfg-on { padding-top:8px !important; } /* Avvicina la scheda prodotto alla sticky bar del configuratore */ .drako-pi-wrapper.dcfg-on { margin-top:-46px !important; } /* Sticky bar: layout anti-sovrapposizione */ #drakoCfgBar.dcfg-bar .dcfg-bar-inner{ max-width:1460px!important; padding:8px 18px!important; } #drakoCfgBar.dcfg-bar .dcfg-bar-main{ grid-template-columns:minmax(135px,150px) minmax(150px,180px) minmax(250px,300px) minmax(260px,330px) minmax(175px,195px) minmax(205px,230px)!important; gap:16px!important; align-items:center!important; min-height:58px!important; } #drakoCfgBar.dcfg-bar .dcfg-bar-badge{ min-width:0!important; min-height:50px!important; padding:7px 10px!important; } #drakoCfgBar.dcfg-bar .dcfg-bar-fintext{ min-width:0!important; overflow:hidden!important; padding-right:0!important; } #drakoCfgBar.dcfg-bar .dcfg-bar-fintext .drako-pi-installments{ font-size:11px!important; line-height:1.18!important; min-width:0!important; } #drakoCfgBar.dcfg-bar .dcfg-bar-fintext .drako-pi-inst-row{ display:flex!important; align-items:baseline!important; gap:5px!important; } #drakoCfgBar.dcfg-bar .dcfg-bar-fintext .drako-pi-inst-text{ min-width:0!important; white-space:nowrap!important; text-overflow:ellipsis!important; } #drakoCfgBar.dcfg-bar .dcfg-bar-fintext .drako-pi-inst-text strong{ font-size:13px!important; } #drakoCfgBar.dcfg-bar .dcfg-bar-fintext .drako-pi-inst-sub{ margin-top:1px!important; font-size:9.6px!important; line-height:1.15!important; } #drakoCfgBar.dcfg-bar .dcfg-bar-data-line{ display:grid!important; gap:4px!important; min-width:0!important; overflow:hidden!important; font-size:11px!important; line-height:1.18!important; } #drakoCfgBar.dcfg-bar .dcfg-bar-priceblk{ min-width:0!important; text-align:right!important; justify-self:stretch!important; } #drakoCfgBar.dcfg-bar .dcfg-bar-total{ font-size:26px!important; line-height:1!important; white-space:nowrap!important; } #drakoCfgBar.dcfg-bar .dcfg-bar-add{ width:100%!important; min-height:54px!important; padding:9px 14px!important; white-space:nowrap!important; } @media (max-width:1350px){#drakoCfgBar.dcfg-bar .dcfg-bar-main{ grid-template-columns:minmax(125px,145px) minmax(135px,160px) minmax(220px,260px) minmax(230px,290px) minmax(160px,180px) minmax(185px,210px)!important; } #drakoCfgBar.dcfg-bar .dcfg-bar-total{font-size:23px!important;} #drakoCfgBar.dcfg-bar .dcfg-bar-add{font-size:13px!important;}} /* Sticky bar: contenimento definitivo colonne centrali */ #drakoCfgBar.dcfg-bar .dcfg-bar-main{ grid-template-columns:150px 180px minmax(250px,290px) minmax(260px,290px) 190px 230px!important; gap:14px!important; justify-content:center!important; overflow:hidden!important; } #drakoCfgBar.dcfg-bar .dcfg-bar-main > *{ min-width:0!important; max-width:100%!important; box-sizing:border-box!important; } #drakoCfgBar.dcfg-bar .dcfg-bar-fintext, #drakoCfgBar.dcfg-bar .dcfg-bar-data-line{ overflow:hidden!important; max-width:100%!important; } #drakoCfgBar.dcfg-bar .dcfg-bar-fintext *{ max-width:100%!important; box-sizing:border-box!important; } #drakoCfgBar.dcfg-bar .dcfg-bar-fintext .drako-pi-installments{ overflow:hidden!important; } #drakoCfgBar.dcfg-bar .dcfg-bar-fintext .drako-pi-inst-row{ display:block!important; min-width:0!important; overflow:hidden!important; } #drakoCfgBar.dcfg-bar .dcfg-bar-fintext .drako-pi-inst-text{ display:block!important; white-space:normal!important; overflow:hidden!important; text-overflow:clip!important; line-height:1.12!important; } #drakoCfgBar.dcfg-bar .dcfg-bar-fintext .drako-pi-inst-sub{ display:block!important; white-space:nowrap!important; overflow:hidden!important; text-overflow:ellipsis!important; max-width:100%!important; } #drakoCfgBar.dcfg-bar .dcfg-bar-fintext .dcfg-paypal-ppmsg, #drakoCfgBar.dcfg-bar .dcfg-bar-fintext .dcfg-paypal-ppmsg iframe{ max-width:100%!important; width:100%!important; overflow:hidden!important; } #drakoCfgBar.dcfg-bar .dcfg-bar-data-line{ padding-left:8px!important; border-left:1px solid #e5e7eb!important; grid-template-columns:1fr!important; gap:3px!important; } #drakoCfgBar.dcfg-bar .dcfg-bar-data-line > span{ min-width:0!important; max-width:100%!important; overflow:hidden!important; text-overflow:ellipsis!important; white-space:nowrap!important; } @media (max-width:1350px){#drakoCfgBar.dcfg-bar .dcfg-bar-main{ grid-template-columns:130px 150px minmax(210px,240px) minmax(220px,250px) 170px 200px!important; gap:10px!important; } #drakoCfgBar.dcfg-bar .dcfg-bar-fintext .drako-pi-inst-text strong{font-size:12px!important;} #drakoCfgBar.dcfg-bar .dcfg-bar-fintext .drako-pi-inst-sub{font-size:9px!important;} #drakoCfgBar.dcfg-bar .dcfg-bar-data-line{font-size:10px!important;}} /* Sticky bar: indica che FPS e Alimentazione aprono un dropdown */ #drakoCfgBar.dcfg-bar .dcfg-bar-fps, #drakoCfgBar.dcfg-bar .dcfg-bar-psu{ position:relative!important; cursor:pointer!important; padding-right:30px!important; } #drakoCfgBar.dcfg-bar .dcfg-bar-fps::after, #drakoCfgBar.dcfg-bar .dcfg-bar-psu::after{ content:""; position:absolute; right:12px; top:50%; width:7px; height:7px; border-right:2px solid #64748b; border-bottom:2px solid #64748b; transform:translateY(-65%) rotate(45deg); transition:transform .16s ease,border-color .16s ease; pointer-events:none; } #drakoCfgBar.dcfg-bar .dcfg-bar-fps:hover::after, #drakoCfgBar.dcfg-bar .dcfg-bar-psu:hover::after, #drakoCfgBar.dcfg-bar .dcfg-bar-fps:focus-visible::after, #drakoCfgBar.dcfg-bar .dcfg-bar-psu:focus-visible::after{ border-color:#1c63ab; } #drakoCfgBar.dcfg-bar.is-open .dcfg-bar-fps::after, #drakoCfgBar.dcfg-bar.is-open .dcfg-bar-psu::after{ transform:translateY(-35%) rotate(225deg); } #drakoCfgBar.dcfg-bar .dcfg-bar-fps:hover, #drakoCfgBar.dcfg-bar .dcfg-bar-psu:hover, #drakoCfgBar.dcfg-bar .dcfg-bar-fps:focus-visible, #drakoCfgBar.dcfg-bar .dcfg-bar-psu:focus-visible{ border-color:#9ec5f8!important; box-shadow:0 0 0 2px rgba(28,99,171,.10)!important; } /* Sticky bar: indicatore dropdown soft sotto ai badge */ #drakoCfgBar.dcfg-bar .dcfg-bar-fps, #drakoCfgBar.dcfg-bar .dcfg-bar-psu{ padding-right:12px!important; padding-bottom:15px!important; overflow:hidden!important; } #drakoCfgBar.dcfg-bar .dcfg-bar-fps::after, #drakoCfgBar.dcfg-bar .dcfg-bar-psu::after{ content:""!important; position:absolute!important; left:50%!important; right:auto!important; top:auto!important; bottom:6px!important; width:18px!important; height:8px!important; border:0!important; border-radius:999px!important; background:linear-gradient(90deg,rgba(28,99,171,0),rgba(28,99,171,.55),rgba(28,99,171,0))!important; transform:translateX(-50%)!important; opacity:.55!important; pointer-events:none!important; animation:dcfgBadgeDropdownPulse 2.4s ease-in-out infinite!important; } #drakoCfgBar.dcfg-bar .dcfg-bar-fps::before, #drakoCfgBar.dcfg-bar .dcfg-bar-psu::before{ content:""; position:absolute; left:50%; bottom:8px; width:7px; height:7px; border-right:2px solid rgba(28,99,171,.75); border-bottom:2px solid rgba(28,99,171,.75); transform:translateX(-50%) rotate(45deg); pointer-events:none; animation:dcfgBadgeChevronFloat 2.4s ease-in-out infinite; } #drakoCfgBar.dcfg-bar .dcfg-bar-fps:hover::after, #drakoCfgBar.dcfg-bar .dcfg-bar-psu:hover::after, #drakoCfgBar.dcfg-bar .dcfg-bar-fps:focus-visible::after, #drakoCfgBar.dcfg-bar .dcfg-bar-psu:focus-visible::after{ opacity:.85!important; } @keyframes dcfgBadgeDropdownPulse{ 0%,100%{opacity:.30;transform:translateX(-50%) scaleX(.82);} 50%{opacity:.70;transform:translateX(-50%) scaleX(1.08);} } @keyframes dcfgBadgeChevronFloat{ 0%,100%{opacity:.45;transform:translate(-50%,-1px) rotate(45deg);} 50%{opacity:.9;transform:translate(-50%,2px) rotate(45deg);} } @media (prefers-reduced-motion:reduce){#drakoCfgBar.dcfg-bar .dcfg-bar-fps::after, #drakoCfgBar.dcfg-bar .dcfg-bar-psu::after, #drakoCfgBar.dcfg-bar .dcfg-bar-fps::before, #drakoCfgBar.dcfg-bar .dcfg-bar-psu::before{animation:none!important;}} /* Sticky bar: dropdown indicator pulito, senza background */ #drakoCfgBar.dcfg-bar .dcfg-bar-fps::after, #drakoCfgBar.dcfg-bar .dcfg-bar-psu::after{ display:none!important; } #drakoCfgBar.dcfg-bar .dcfg-bar-fps::before, #drakoCfgBar.dcfg-bar .dcfg-bar-psu::before{ bottom:7px!important; width:8px!important; height:8px!important; border-right:2px solid rgba(28,99,171,.62)!important; border-bottom:2px solid rgba(28,99,171,.62)!important; filter:none!important; } #drakoCfgBar.dcfg-bar .dcfg-bar-fps:hover::before, #drakoCfgBar.dcfg-bar .dcfg-bar-psu:hover::before, #drakoCfgBar.dcfg-bar .dcfg-bar-fps:focus-visible::before, #drakoCfgBar.dcfg-bar .dcfg-bar-psu:focus-visible::before{ border-color:#1c63ab!important; } /* Sticky bar: frecce dropdown leggermente piu' scure */ #drakoCfgBar.dcfg-bar .dcfg-bar-fps::before, #drakoCfgBar.dcfg-bar .dcfg-bar-psu::before{ border-right-color:rgba(15,23,42,.72)!important; border-bottom-color:rgba(15,23,42,.72)!important; } #drakoCfgBar.dcfg-bar .dcfg-bar-fps:hover::before, #drakoCfgBar.dcfg-bar .dcfg-bar-psu:hover::before, #drakoCfgBar.dcfg-bar .dcfg-bar-fps:focus-visible::before, #drakoCfgBar.dcfg-bar .dcfg-bar-psu:focus-visible::before{ border-right-color:#0f172a!important; border-bottom-color:#0f172a!important; } /* Sticky bar: frecce dropdown ancora piu' visibili */ #drakoCfgBar.dcfg-bar .dcfg-bar-fps::before, #drakoCfgBar.dcfg-bar .dcfg-bar-psu::before{ border-right-color:rgba(15,23,42,.88)!important; border-bottom-color:rgba(15,23,42,.88)!important; } #drakoCfgBar.dcfg-bar .dcfg-bar-fps:hover::before, #drakoCfgBar.dcfg-bar .dcfg-bar-psu:hover::before, #drakoCfgBar.dcfg-bar .dcfg-bar-fps:focus-visible::before, #drakoCfgBar.dcfg-bar .dcfg-bar-psu:focus-visible::before{ border-right-color:#020617!important; border-bottom-color:#020617!important; } /* Nav FPS flyout: rimosso blocco "La tua build sui giochi piu' giocati" (richiesta utente 7-lug). Scoping su .dcfg-cnav-fps-pop -> NON impatta il dropdown GIOCO (.dfps-controls) ne' altri widget FPS. La lista aveva scroll interno (max-height) = appariva tagliata; rimossa del tutto. */ /* --- Nav FPS flyout (7-lug): rimuovi dropdown GIOCO + Risoluzione/Dettaglio/Upscaling su 1 riga + fix "si taglia quando scrollo": il popover era ancorato a .dcfg-cust-shell (che scrolla), quindi il suo top usciva sotto la barra sticky. Ancoralo al badge dentro la nav sticky. --- */ #drakoCfgCustomizer .dcfg-cnav { overflow:visible !important; } #drakoCfgCustomizer .dcfg-cnav-fps { position:relative !important; overflow:visible !important; } /* ============================================================================ DARK MODE configuratore. - CHROME (barra, nav, card opzione, riepilogo, scheda prodotto, modali) = stile DARK della SCHEDA PRODOTTO del sito (charcoal: #22262e / #2a2f38 / #363c48, testo #c8cdd5 / #dbe0e8). - Pannelli FPS + Alimentazione (dropdown/flyout) = stile NAVY del widget FPS (#0d1626 / #111d33 / #263a5e, testo #eaf0fb). ============================================================================ */ /* ===== CHROME: barra sticky (charcoal) ===== */ html[data-theme="dark"] #drakoCfgBar{ background:#1c2029 !important; border-bottom:1px solid #363c48; } html[data-theme="dark"] #drakoCfgBar .dcfg-bar-dropdown{ background:#1c2029; border-color:#363c48; } html[data-theme="dark"] #drakoCfgBar .dcfg-bar-badge{ background:#2a2f38; border-color:#363c48; color:#dbe0e8; } html[data-theme="dark"] #drakoCfgBar .dcfg-bar-fps{ background:#262c36; border-color:#3a4557; } html[data-theme="dark"] #drakoCfgBar .dcfg-bar-psu.is-ok{ background:rgba(34,197,94,.12); border-color:rgba(34,197,94,.30); } html[data-theme="dark"] #drakoCfgBar .dcfg-bar-badge-val, html[data-theme="dark"] #drakoCfgBar .dcfg-bar-badge b{ color:#e8ecf2; } html[data-theme="dark"] #drakoCfgBar .dcfg-bar-finance, html[data-theme="dark"] #drakoCfgBar .dcfg-bar-data-line{ color:#aab2c0; } html[data-theme="dark"] body #drakoCfgBar.dcfg-bar .dcfg-bar-data-line strong, html[data-theme="dark"] body #drakoCfgBar.dcfg-bar .dcfg-bar-finance strong{ color:#e8ecf2 !important; } html[data-theme="dark"] body #drakoCfgBar.dcfg-bar .dcfg-bar-data-line, html[data-theme="dark"] body #drakoCfgBar.dcfg-bar .dcfg-bar-data-line span{ color:#aab2c0 !important; } html[data-theme="dark"] body #drakoCfgBar.dcfg-bar .dcfg-bar-data-line i, html[data-theme="dark"] body #drakoCfgBar.dcfg-bar .dcfg-bar-finance i, html[data-theme="dark"] body #drakoCfgBar.dcfg-bar .dcfg-bar-finance a{ color:#7fb2ff !important; } html[data-theme="dark"] #drakoCfgBar .dcfg-bar-total{ color:#4ade80; } html[data-theme="dark"] #drakoCfgBar a{ color:#7fb2ff; } html[data-theme="dark"] #drakoCfgBar.dcfg-bar .dcfg-bar-fps::after, html[data-theme="dark"] #drakoCfgBar.dcfg-bar .dcfg-bar-psu::after{ background:linear-gradient(90deg,rgba(127,178,255,0),rgba(127,178,255,.9),rgba(127,178,255,0))!important; opacity:.9!important; } html[data-theme="dark"] #drakoCfgBar.dcfg-bar .dcfg-bar-fps::before, html[data-theme="dark"] #drakoCfgBar.dcfg-bar .dcfg-bar-psu::before{ border-right-color:#7fb2ff!important; border-bottom-color:#7fb2ff!important; } #drakoCfgBar .dcfg-bar-data-line{ flex-direction:column !important; align-items:flex-start !important; justify-content:center !important; gap:3px !important; overflow:visible !important; } #drakoCfgBar .dcfg-bar-data-line > *{ white-space:nowrap !important; overflow:visible !important; text-overflow:clip !important; max-width:none !important; } html body #drakoCfgBar.dcfg-bar .dcfg-bar-fintext.dcfg-bar-finance .drako-pi-inst-sub{ font-size:11px !important; overflow:visible !important; text-overflow:clip !important; } /* ===== CHROME: nav sinistra (charcoal) ===== */ html[data-theme="dark"] #drakoCfgCustomizer .dcfg-cnav{ background:#22262e !important; border-color:#363c48 !important; } html[data-theme="dark"] #drakoCfgCustomizer .dcfg-cnav-thumb{ background:#2a2f38; border-color:#363c48; } html[data-theme="dark"] #drakoCfgCustomizer .dcfg-cnav-name, html[data-theme="dark"] #drakoCfgCustomizer .dcfg-cnav-hero-name{ color:#dbe0e8; } html[data-theme="dark"] #drakoCfgCustomizer .dcfg-cnav-cat, html[data-theme="dark"] #drakoCfgCustomizer .dcfg-cnav-lbl, html[data-theme="dark"] #drakoCfgCustomizer .dcfg-cnav-case-lbl{ color:#8891a0; } html[data-theme="dark"] #drakoCfgCustomizer .dcfg-cnav-action{ color:#8891a0; } html[data-theme="dark"] #drakoCfgCustomizer .dcfg-cnav-action:hover{ color:#dbe0e8; } html[data-theme="dark"] #drakoCfgCustomizer .dcfg-cnav-edit{ color:#7fb2ff; } html[data-theme="dark"] #drakoCfgCustomizer .dcfg-cnav-link:hover{ background:#323840 !important; color:#dbe0e8 !important; border-color:#3a4557 !important; } html[data-theme="dark"] #drakoCfgCustomizer .dcfg-cnav-fps-badge{ background:#2a2f38 !important; background-image:none !important; border-color:#363c48 !important; } html[data-theme="dark"] #drakoCfgCustomizer .dcfg-cnav-fps-badge .dcfg-cnav-fps-game, html[data-theme="dark"] #drakoCfgCustomizer .dcfg-cnav-fps-badge b, html[data-theme="dark"] #drakoCfgCustomizer .dcfg-cnav-fps-low{ color:#c8cdd5 !important; } html[data-theme="dark"] #drakoCfgCustomizer .dcfg-cnav-fps-unit{ color:#c8cdd5 !important; } html[data-theme="dark"] #drakoCfgCustomizer .dcfg-cnav-fps-res{ color:#7fb2ff !important; } /* ===== CHROME: header categoria + toggle vista (charcoal) ===== */ html[data-theme="dark"] #drakoCfgCustomizer .dcfg-cat-head{ background:#22262e; border-color:#363c48; color:#dbe0e8; } html[data-theme="dark"] #drakoCfgCustomizer .dcfg-cat-title, html[data-theme="dark"] #drakoCfgCustomizer .dcfg-cat-head h3{ color:#dbe0e8; } html[data-theme="dark"] #drakoCfgCustomizer .dcfg-cat-sel{ color:#7fb2ff !important; } html[data-theme="dark"] #drakoCfgCustomizer .dcfg-view-btn{ background:#2a2f38; border-color:#363c48; color:#aab2c0; } html[data-theme="dark"] #drakoCfgCustomizer .dcfg-view-btn.is-active{ background:#1c63ab; border-color:#1c63ab; color:#fff; } /* ===== CHROME: card opzione (charcoal) ===== */ html[data-theme="dark"] #drakoCfgCustomizer .drako-pcb2-opt{ background:#22262e; border-color:#363c48; color:#dbe0e8; } html[data-theme="dark"] #drakoCfgCustomizer .drako-pcb2-opt .drako-pcb2-opt-name, html[data-theme="dark"] #drakoCfgCustomizer .drako-pcb2-opt h4{ color:#dbe0e8; } html[data-theme="dark"] #drakoCfgCustomizer .drako-pcb2-opt-code, html[data-theme="dark"] #drakoCfgCustomizer .drako-pcb2-opt .pdm-code{ color:#8891a0; } html[data-theme="dark"] #drakoCfgCustomizer .drako-pcb2-fps-unit, html[data-theme="dark"] #drakoCfgCustomizer .drako-pcb2-fps-res{ color:#7fb2ff !important; } html[data-theme="dark"] #drakoCfgCustomizer .drako-pcb2-opt.is-selected:not(.is-incompat){ background:rgba(34,197,94,.10); border-color:rgba(34,197,94,.65); } html[data-theme="dark"] #drakoCfgCustomizer .drako-pcb2-opt.is-incompat.is-selected{ background:rgba(239,107,107,.10); border-color:#ef5350; box-shadow:0 0 0 1px #ef5350 inset; } html[data-theme="dark"] #drakoCfgCustomizer .drako-pcb2-opt-incompat-msg{ background:#7f2831 !important; color:#ffe1e3 !important; } html[data-theme="dark"] #drakoCfgCustomizer .span{ background:#2a2f38; color:#c8cdd5; } /* ===== CHROME: riepilogo dx + scheda prodotto (charcoal) ===== */ html[data-theme="dark"] .drako-pi-wrapper.dcfg-on{ background:#22262e !important; border-color:#363c48 !important; } html[data-theme="dark"] #drakoCfgSummary .dcfg-cl-thumb{ background:#2a2f38; border-color:#363c48; } html[data-theme="dark"] #drakoCfgSummary .h5, html[data-theme="dark"] #drakoCfgSummary h5{ background:transparent; color:#dbe0e8; } html[data-theme="dark"] #drakoCfgSummary .dcfg-btn-cust{ background:#2a2f38; border-color:#363c48; color:#dbe0e8; } html[data-theme="dark"] #drakoCfgSummary .dcfg-cl-row:hover{ background:#323840 !important; } html[data-theme="dark"] #drakoCfgSummary .dcfg-btn-cust:hover{ background:#323840 !important; } /* ===== PANNELLI FPS + ALIMENTAZIONE (navy, stile widget FPS) ===== */ html[data-theme="dark"] .dcfg-bar-uni-card{ background:#0d1626 !important; border-color:#263a5e !important; } html[data-theme="dark"] .dcfg-bar-uni-h{ color:#93a3c2; } html[data-theme="dark"] .dcfg-psu{ color:#eaf0fb; } html[data-theme="dark"] .dcfg-psu-card{ background:#0d1626 !important; border-color:#263a5e !important; } html[data-theme="dark"] .dcfg-psu-thumb, html[data-theme="dark"] .dcfg-psu-loadthumb{ background:#0a1220 !important; border-color:#263a5e !important; } html[data-theme="dark"] .dcfg-psu-change{ background:#111d33 !important; border-color:#263a5e !important; color:#eaf0fb !important; } html[data-theme="dark"] .dcfg-psu-gauge-track{ background:rgba(255,255,255,.10) !important; } html[data-theme="dark"] .dcfg-psu-loadlist{ border-color:#263a5e !important; background:rgba(255,255,255,.03) !important; } html[data-theme="dark"] .dcfg-psu h5{ background:transparent !important; color:#b9c6de !important; border-color:#263a5e !important; } html[data-theme="dark"] .dcfg-psu b, html[data-theme="dark"] .dcfg-psu em, html[data-theme="dark"] .dcfg-psu .dcfg-psu-cardname, html[data-theme="dark"] .dcfg-psu-loadname{ color:#eaf0fb !important; } html[data-theme="dark"] .dcfg-psu-intro, html[data-theme="dark"] .dcfg-psu-reqline, html[data-theme="dark"] .dcfg-psu-cardlabel, html[data-theme="dark"] .dcfg-psu-loadhead, html[data-theme="dark"] .dcfg-psu-loadsub, html[data-theme="dark"] .dcfg-psu .span{ color:#93a3c2 !important; } html[data-theme="dark"] .dcfg-psu-loadwatt, html[data-theme="dark"] .dcfg-psu-cardwatt{ color:#7fb2ff !important; } html[data-theme="dark"] #drakoCfgBar .dcfg-psu-loaditem:hover, html[data-theme="dark"] #drakoCfgSummary .dcfg-psu-loaditem:hover, html[data-theme="dark"] #drakoCfgBar .dcfg-psu-loadlist li:hover, html[data-theme="dark"] #drakoCfgSummary .dcfg-psu-loadlist li:hover, html[data-theme="dark"] .dcfg-psu-card:hover, html[data-theme="dark"] .dcfg-psu-cardsel:hover, html[data-theme="dark"] #drakoCfgCustomizer .dcfg-psu-loaditem:hover, html[data-theme="dark"] #drakoCfgCustomizer .dcfg-psu-loadlist li:hover{ background:rgba(43,123,208,.14) !important; } html[data-theme="dark"] .dfps-mrow:hover{ background:rgba(43,123,208,.10) !important; } /* ===== MODALI FINANZIAMENTO (stile scheda prodotto charcoal + scrim) ===== */ html[data-theme="dark"] .dcfg-fin-modal, html[data-theme="dark"] .drako-inst-modal{ background:rgba(0,0,0,.72) !important; } html[data-theme="dark"] .drako-inst-modal-box{ border:1px solid var(--drako-border-strong,#363c48) !important; box-shadow:0 24px 64px rgba(0,0,0,.7) !important; } html[data-theme="dark"] .dcfg-fin-modal-box{ background:#22262e !important; border:1px solid #363c48 !important; color:#dbe0e8 !important; } html[data-theme="dark"] .dcfg-fin-modal-box h2, html[data-theme="dark"] .dcfg-fin-modal-box h3, html[data-theme="dark"] .dcfg-fin-modal-box strong, html[data-theme="dark"] .dcfg-fin-modal-box p, html[data-theme="dark"] .dcfg-fin-modal-box li, html[data-theme="dark"] .dcfg-fin-modal-box label{ color:#dbe0e8 !important; } html[data-theme="dark"] .dcfg-fin-modal-box .dcfg-fin-note, html[data-theme="dark"] .dcfg-fin-modal-box small{ color:#8891a0 !important; } html[data-theme="dark"] .dcfg-fin-modal-box input, html[data-theme="dark"] .dcfg-fin-modal-box textarea, html[data-theme="dark"] .dcfg-fin-modal-box select{ background:#2a2f38 !important; border-color:#363c48 !important; color:#dbe0e8 !important; } html[data-theme="dark"] .dcfg-sella-rates thead, html[data-theme="dark"] .dcfg-sella-rates thead tr, html[data-theme="dark"] .dcfg-sella-rates th{ background:#2a2f38 !important; color:#c8cdd5 !important; border-color:#363c48 !important; } html[data-theme="dark"] .dcfg-sella-rates td{ color:#dbe0e8 !important; border-color:#363c48 !important; } html[data-theme="dark"] .dcfg-sella-rates td b, html[data-theme="dark"] .dcfg-sella-rates td strong{ color:#ffffff !important; } html[data-theme="dark"] .dcfg-sella-rates tr:hover td{ background:#323840 !important; } html[data-theme="dark"] .dcfg-sella-form .dcfg-sella-rates tr.is-best td{ background:rgba(74,141,184,.22) !important; color:#eaf0fb !important; } html[data-theme="dark"] .dcfg-sella-form .dcfg-sella-rates tr.is-best td b, html[data-theme="dark"] .dcfg-sella-form .dcfg-sella-rates tr.is-best td strong{ color:#ffffff !important; } html[data-theme="dark"] .dcfg-sella-rates input[type="radio"], html[data-theme="dark"] .drako-inst-modal input[type="radio"]{ accent-color:#4a8db8; } html[data-theme="dark"] .drako-inst-modal-box{ background:#22262e !important; } html[data-theme="dark"] .drako-inst-modal th{ background:#2a2f38 !important; color:#c8cdd5 !important; } html[data-theme="dark"] .drako-inst-modal td{ color:#dbe0e8 !important; } /* ============================================================================ FIX gap-scroll: il dropdown della barra era in-flow (position:static) dentro la barra FISSA, gonfiandone l'altezza (123 -> 771px). Lo script di takeover usa l'altezza barra per lo spacer -> grande spazio vuoto scrollando con un dropdown aperto. Reso overlay (absolute): la barra resta 123px, niente gap. ============================================================================ */ #drakoCfgBar .dcfg-bar-dropdown{ position:absolute !important; top:100% !important; left:0; right:0; } /* ============================================================================ Modali configuratore "Salva" e "Condividi" (DUE modali distinti) - stile admin dui: card pulita, Segoe UI, blu #1c63ab. Riusano il guscio .dcfg-fin-modal per overlay/scrim/centratura. Base light + dark charcoal. ============================================================================ */ .dcfg-cfgm-box{ max-width:460px; position:relative; font-family:"Segoe UI",Roboto,Helvetica,Arial,sans-serif; padding:22px 22px 20px; border-radius:12px; } .dcfg-cfgm-close{ position:absolute; top:12px; right:14px; width:30px; height:30px; border:0; background:transparent; font-size:24px; line-height:1; color:#6b7280; cursor:pointer; border-radius:8px; } .dcfg-cfgm-close:hover{ background:rgba(0,0,0,.06); color:#111827; } .dcfg-cfgm-head{ display:flex; align-items:center; gap:11px; margin-bottom:6px; } .dcfg-cfgm-ico{ flex:0 0 auto; width:38px; height:38px; display:flex; align-items:center; justify-content:center; border-radius:10px; background:rgba(28,99,171,.10); color:#1c63ab; } .dcfg-cfgm-head h3{ margin:0; font-size:18px; font-weight:700; color:#111827; } .dcfg-cfgm-sub{ margin:0 0 16px; font-size:13.5px; line-height:1.5; color:#6b7280; } .dcfg-cfgm-lbl{ display:block; font-size:12px; font-weight:600; color:#6b7280; margin-bottom:6px; } .dcfg-cfgm-linkrow{ display:flex; gap:8px; margin-bottom:16px; } .dcfg-cfgm-link{ flex:1 1 auto; min-width:0; padding:9px 11px; border:1px solid #d7dee7; border-radius:9px; background:#f6f8fb; font-size:13px; color:#374151; } .dcfg-cfgm-copy{ flex:0 0 auto; padding:9px 16px; border:0; border-radius:9px; background:#1c63ab; color:#fff; font-weight:600; font-size:13px; cursor:pointer; white-space:nowrap; } .dcfg-cfgm-copy:hover{ background:#17518c; } .dcfg-cfgm-copy.is-done{ background:#16a34a; } .dcfg-cfgm-foot{ display:flex; justify-content:flex-end; } .dcfg-cfgm-ok{ padding:9px 20px; border:0; border-radius:9px; background:#1c63ab; color:#fff; font-weight:600; font-size:13px; cursor:pointer; } .dcfg-cfgm-ok:hover{ background:#17518c; } /* dark (charcoal, coerente con la scheda prodotto) */ html[data-theme="dark"] .dcfg-cfgm-close{ color:#8891a0; } html[data-theme="dark"] .dcfg-cfgm-close:hover{ background:rgba(255,255,255,.08); color:#e8ecf2; } html[data-theme="dark"] .dcfg-cfgm-ico{ background:rgba(74,141,184,.18); color:#7fb2ff; } html[data-theme="dark"] .dcfg-cfgm-head h3{ color:#e8ecf2; } html[data-theme="dark"] .dcfg-cfgm-sub, html[data-theme="dark"] .dcfg-cfgm-lbl{ color:#8891a0; } html[data-theme="dark"] .dcfg-cfgm-link{ background:#2a2f38 !important; border-color:#363c48 !important; color:#dbe0e8 !important; } /* ============================================================================ "Salva la build nell'account" - modale riepilogo (case/CPU/GPU) + nome. Riusa il guscio .dcfg-fin-modal-box / .dcfg-cfgm-box. Base light + dark. ============================================================================ */ .dcfg-savebuild-box{ max-width:464px; } .dcfg-mdl-ic{ flex:0 0 auto; width:40px; height:40px; object-fit:contain; filter:drop-shadow(0 1px 2px rgba(0,0,0,.18)); } .dcfg-sb-summary{ margin:6px 0 18px; background:none; border:0; border-radius:0; padding:0; } .dcfg-sb-summary .dcfg-sb-complist{ margin:13px 2px 0; gap:11px; } .dcfg-sb-hero{ text-align:center; overflow:visible; } .dcfg-sb-hero-img{ display:inline-block; padding:14px; background:#fff; border-radius:12px; max-width:100%; box-sizing:border-box; line-height:0; } .dcfg-sb-hero-img img{ height:220px; width:auto; max-width:100%; object-fit:contain; display:block; } .dcfg-sb-hero-empty{ min-width:200px; min-height:200px; background:repeating-linear-gradient(45deg,#f4f6f9,#f4f6f9 8px,#eef1f5 8px,#eef1f5 16px); } html[data-theme="dark"] .dcfg-sb-summary{ background:none; border:0; } html[data-theme="dark"] .dcfg-sb-hero-img{ background:#fff; } .dcfg-sb-row{ display:flex; align-items:center; gap:12px; padding:9px 12px; } .dcfg-sb-row + .dcfg-sb-row{ border-top:1px solid #eef1f5; } .dcfg-sb-thumb{ flex:0 0 auto; width:46px; height:46px; border-radius:8px; background:#f4f6f9; border:1px solid #e6eaef; display:flex; align-items:center; justify-content:center; overflow:hidden; } .dcfg-sb-thumb img{ max-width:100%; max-height:100%; object-fit:contain; display:block; } .dcfg-sb-thumb-empty{ background:repeating-linear-gradient(45deg,#f4f6f9,#f4f6f9 6px,#eef1f5 6px,#eef1f5 12px); } .dcfg-sb-txt{ min-width:0; display:flex; flex-direction:column; gap:2px; } .dcfg-sb-cat{ font-size:10.5px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:#5f6774; } .dcfg-sb-name{ font-size:13.5px; font-weight:600; color:#1f2937; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .dcfg-sb-lbl{ display:block; font-size:12px; font-weight:600; color:#6b7280; margin-bottom:6px; } .dcfg-sb-input + .dcfg-sb-lbl{ margin-top:16px; } .dcfg-sb-input{ width:100%; box-sizing:border-box; padding:10px 12px; border:1px solid #d7dee7; border-radius:9px; background:#fff; font-size:14px; color:#1f2937; font-family:inherit; } .dcfg-sb-input::placeholder{ color:#9aa3af; opacity:1; font-weight:400; } .dcfg-sb-input:focus{ outline:none; border-color:#1c63ab; box-shadow:0 0 0 3px rgba(28,99,171,.12); } .dcfg-sb-msg{ margin-top:10px; padding:9px 12px; border-radius:9px; font-size:13px; line-height:1.4; } .dcfg-sb-msg.is-err{ background:#fdecec; color:#b42431; } .dcfg-sb-msg.is-info{ background:#eaf1fb; color:#1c63ab; } .dcfg-sb-foot{ display:flex; justify-content:space-between; gap:10px; margin-top:18px; } .dcfg-sb-btn{ padding:10px 18px; border-radius:9px; font-weight:600; font-size:13.5px; cursor:pointer; border:1px solid transparent; text-decoration:none; display:inline-flex; align-items:center; justify-content:center; font-family:inherit; } .dcfg-sb-ghost{ background:#fff; border-color:#d7dee7; color:#374151; } .dcfg-sb-ghost:hover{ background:#f2f6fb; border-color:#1c63ab; color:#1c63ab; } .dcfg-sb-save{ background:#1c63ab; color:#fff; border-color:#1c63ab; box-shadow:0 2px 10px rgba(28,99,171,.30); } .dcfg-sb-save:hover{ background:#17518c; border-color:#17518c; } .dcfg-sb-save:disabled{ opacity:.6; cursor:default; } .dcfg-sb-done{ margin:2px 0 4px; font-size:14px; line-height:1.5; color:#374151; } .dcfg-sb-okico{ background:rgba(22,163,74,.12) !important; color:#16a34a !important; } html[data-theme="dark"] .dcfg-sb-row + .dcfg-sb-row{ border-top-color:#2f353f; } html[data-theme="dark"] .dcfg-sb-thumb{ background:#2a2f38; border-color:#363c48; } html[data-theme="dark"] .dcfg-sb-thumb-empty{ background:repeating-linear-gradient(45deg,#2a2f38,#2a2f38 6px,#323840 6px,#323840 12px); } html[data-theme="dark"] .dcfg-sb-cat{ color:#8891a0; } html[data-theme="dark"] .dcfg-sb-name{ color:#e8ecf2; } html[data-theme="dark"] .dcfg-sb-lbl{ color:#8891a0; } html[data-theme="dark"] .dcfg-sb-input{ background:#2a2f38 !important; border-color:#363c48 !important; color:#dbe0e8 !important; } html[data-theme="dark"] .dcfg-sb-input::placeholder{ color:#727a86 !important; opacity:1; } html[data-theme="dark"] .dcfg-sb-input:focus{ border-color:#4a8db8 !important; box-shadow:0 0 0 3px rgba(74,141,184,.2); } html[data-theme="dark"] .dcfg-sb-msg.is-err{ background:rgba(207,38,50,.16); color:#ff9b9b; } html[data-theme="dark"] .dcfg-sb-msg.is-info{ background:rgba(74,141,184,.16); color:#8fc0ea; } html[data-theme="dark"] .dcfg-sb-ghost{ background:#2a2f38; border-color:#363c48; color:#dbe0e8; } html[data-theme="dark"] .dcfg-sb-ghost:hover{ background:#323840; border-color:#4a8db8; color:#e8ecf2; } html[data-theme="dark"] .dcfg-sb-done{ color:#c8cdd5; } html[data-theme="dark"] .dcfg-sb-okico{ background:rgba(22,163,74,.2) !important; color:#4ade80 !important; } /* Condividi con la Community - CTA nel modale share + form regole. Base light + dark. */ .dcfg-comm-cta{ width:100%; } .dcfg-sb-btn:disabled{ opacity:.5; cursor:not-allowed; box-shadow:none; } .dcfg-sb-complist{ list-style:none; margin:10px 0 0; padding:0; display:flex; flex-direction:column; gap:9px; } .dcfg-sb-complist li{ display:flex; align-items:center; gap:10px; min-width:0; } .dcfg-sb-ci{ flex:0 0 auto; width:20px; height:20px; color:#8a94a3; display:inline-flex; align-items:center; justify-content:center; } .dcfg-sb-ci svg{ display:block; } .dcfg-sb-cn{ min-width:0; font-size:13px; font-weight:600; color:#37424f; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } html[data-theme="dark"] .dcfg-sb-ci{ color:#8891a0; } html[data-theme="dark"] .dcfg-sb-cn{ color:#c8cdd5; } .dcfg-comm-rules-row{ display:flex; align-items:flex-start; gap:8px; margin-top:12px; font-size:12.5px; line-height:1.4; color:#374151; cursor:pointer; } .dcfg-comm-rules-row input[type="checkbox"]{ margin-top:1px; flex:0 0 auto; accent-color:#1c63ab; } .dcfg-comm-rules-row a{ color:#1c63ab; font-weight:600; text-decoration:underline; } .dcfg-comm-rules-list{ margin:0; padding-left:18px; font-size:12px; line-height:1.6; color:#6b7280; } html[data-theme="dark"] .dcfg-comm-rules-row{ color:#c8cdd5; } html[data-theme="dark"] .dcfg-comm-rules-row a{ color:#8fc0ea; } html[data-theme="dark"] .dcfg-comm-rules-list{ color:#9aa3b0; } /* ============================================================================ Dark: delta FPS su card/lista opzione in palette AUTUNNALE (verde caldo / rosso rust) + evidenziazione item attivo nel nav adattata al dark. ============================================================================ */ html[data-theme="dark"] #drakoCfgCustomizer .drako-pcb2-opt-fps.is-up, html[data-theme="dark"] #drakoCfgCustomizer .drako-pcb2-opt-fps.is-up *, html[data-theme="dark"] #drakoCfgCustomizer .drako-pcb2-opt-fps.is-plus, html[data-theme="dark"] #drakoCfgCustomizer .drako-pcb2-opt-fps.is-plus *{ color:#8fb84e !important; } html[data-theme="dark"] #drakoCfgCustomizer .drako-pcb2-opt-fps.is-down, html[data-theme="dark"] #drakoCfgCustomizer .drako-pcb2-opt-fps.is-down *, html[data-theme="dark"] #drakoCfgCustomizer .drako-pcb2-opt-fps.is-minus, html[data-theme="dark"] #drakoCfgCustomizer .drako-pcb2-opt-fps.is-minus *{ color:#e1815b !important; } html[data-theme="dark"] #drakoCfgCustomizer .drako-pcb2-opt-fps.is-same, html[data-theme="dark"] #drakoCfgCustomizer .drako-pcb2-opt-fps.is-same *, html[data-theme="dark"] #drakoCfgCustomizer .drako-pcb2-opt-fps.is-flat, html[data-theme="dark"] #drakoCfgCustomizer .drako-pcb2-opt-fps.is-flat *{ color:#8891a0 !important; } /* Evidenziazione item attivo nel nav (dark: stesso stile blu ma scuro) */ html[data-theme="dark"] #drakoCfgCustomizer .dcfg-cnav-link.is-active{ background:rgba(74,141,184,.16) !important; border-color:#4a8db8 !important; } html[data-theme="dark"] #drakoCfgCustomizer .dcfg-cnav-link.is-active .dcfg-cnav-name{ color:#8fc0ea !important; } html[data-theme="dark"] #drakoCfgCustomizer .dcfg-cnav-link.is-active .dcfg-cnav-lbl{ color:#7fb2ff !important; } /* highlight nav attivo: batte html body ...riepilogo...is-active !important */ html[data-theme="dark"] body #drakoCfgCustomizer .dcfg-cnav-riepilogo .dcfg-cnav-link.is-active{ background:rgba(74,141,184,.16) !important; border-color:#4a8db8 !important; } html[data-theme="dark"] body #drakoCfgCustomizer .dcfg-cnav-riepilogo .dcfg-cnav-link.is-active .dcfg-cnav-name{ color:#8fc0ea !important; } html[data-theme="dark"] body #drakoCfgCustomizer .dcfg-cnav-riepilogo .dcfg-cnav-link.is-active .dcfg-cnav-lbl{ color:#7fb2ff !important; } /* ============================================================ Fix dark mode configuratore (2026-07-08) - riga divisoria tra sezioni (visibile solo in dark) - colori warning/incompatibilita' sulle sezioni - stato ambra alimentatore (verdetto/gauge) - badge alimentatore sticky bar (verde/ambra/rosso) ============================================================ */ /* Task 3: riga chiara #e8ebef tra le sezioni -> invisibile su fondo scuro */ html[data-theme="dark"] #drakoCfgCustomizer .dcfg-cat { border-bottom-color:transparent !important; } /* Task 2: warning (ambra) e incompatibilita' (rosso) sezioni, leggibili su fondo scuro */ html[data-theme="dark"] #drakoCfgCustomizer .dcfg-cat.has-warn .dcfg-cat-sel, html[data-theme="dark"] #drakoCfgCustomizer .dcfg-cat.has-warn .dcfg-cat-title::after, html[data-theme="dark"] #drakoCfgCustomizer .dcfg-cl-row.has-warn .dcfg-cl-slot, html[data-theme="dark"] #drakoCfgCustomizer .dcfg-cnav-link.has-warn, html[data-theme="dark"] #drakoCfgCustomizer .dcfg-cnav-link.has-warn .dcfg-cnav-name, html[data-theme="dark"] #drakoCfgCustomizer .dcfg-cnav-link.has-warn .dcfg-cnav-lbl { color:#f4c04e !important; } html[data-theme="dark"] #drakoCfgCustomizer .dcfg-cnav-link.has-warn { border-color:#8a6d1f !important; } html[data-theme="dark"] #drakoCfgCustomizer .dcfg-cat.has-error .dcfg-cat-sel, html[data-theme="dark"] #drakoCfgCustomizer .dcfg-cat.has-error .dcfg-cat-title::after, html[data-theme="dark"] #drakoCfgCustomizer .dcfg-cl-row.has-error .dcfg-cl-slot, html[data-theme="dark"] #drakoCfgCustomizer .dcfg-cnav-link.has-error, html[data-theme="dark"] #drakoCfgCustomizer .dcfg-cnav-link.has-error .dcfg-cnav-name, html[data-theme="dark"] #drakoCfgCustomizer .dcfg-cnav-link.has-error .dcfg-cnav-lbl { color:#ff8f8f !important; } html[data-theme="dark"] #drakoCfgCustomizer .dcfg-cnav-link.has-error { border-color:#a15c5f !important; } /* Task 1 (dark): stato ambra alimentatore */ html[data-theme="dark"] #drakoCfgCustomizer .dcfg-psu-verdict.warn, html[data-theme="dark"] #drakoCfgSummary .dcfg-psu-verdict.warn, html[data-theme="dark"] #drakoCfgBar .dcfg-psu-verdict.warn { background:rgba(240,180,41,.16) !important; color:#f4c04e !important; } html[data-theme="dark"] #drakoCfgCustomizer .dcfg-psu-gauge-cap.warn, html[data-theme="dark"] #drakoCfgBar .dcfg-psu-gauge-cap.warn { background:#e6a417 !important; } /* Task 4: badge alimentatore sticky bar - colori stato visibili in dark */ html[data-theme="dark"] #drakoCfgBar .dcfg-bar-psu.is-ok { background:rgba(34,197,94,.16) !important; border-color:rgba(34,197,94,.5) !important; } html[data-theme="dark"] #drakoCfgBar .dcfg-bar-psu.is-ok .dcfg-bar-badge-txt b { color:#4ade80 !important; } html[data-theme="dark"] #drakoCfgBar .dcfg-bar-psu.is-warn { background:rgba(240,180,41,.18) !important; border-color:rgba(240,180,41,.55) !important; } html[data-theme="dark"] #drakoCfgBar .dcfg-bar-psu.is-warn .dcfg-bar-badge-txt b { color:#f4c04e !important; } html[data-theme="dark"] #drakoCfgBar .dcfg-bar-psu.is-bad { background:rgba(239,68,68,.18) !important; border-color:rgba(239,68,68,.55) !important; } html[data-theme="dark"] #drakoCfgBar .dcfg-bar-psu.is-bad .dcfg-bar-badge-txt b { color:#ff8f8f !important; } /* ============================================================================ Dropdown FPS/Alimentazione: dopo il fix gap (position:absolute overlay) il contenitore era TRASPARENTE in light -> si vedeva la pagina dietro ("non c'e' il background"). Sfondo opaco + ombra = pannello flottante distinto. ============================================================================ */ #drakoCfgBar .dcfg-bar-dropdown{ background:#ffffff !important; border:1px solid #e5e7eb !important; box-shadow:0 18px 44px rgba(15,23,42,.20) !important; border-radius:0 0 14px 14px; } html[data-theme="dark"] #drakoCfgBar .dcfg-bar-dropdown{ background:#1c2029 !important; border-color:#363c48 !important; box-shadow:0 18px 44px rgba(0,0,0,.55) !important; } /* Scheda prodotto configuratore: aumenta solo lo spazio sopra la foto */ .drako-pi-wrapper.dcfg-on .drako-pi-main-img{ padding-top:34px!important; box-sizing:border-box; } @media (max-width:900px){.drako-pi-wrapper.dcfg-on .drako-pi-main-img{ padding-top:22px!important; }} /* Scheda prodotto configuratore: padding uniforme */ .drako-pi-wrapper.dcfg-on{ padding:20px!important; } /* Sticky bar: dati consegna/pagamenti allineati e non tagliati */ #drakoCfgBar.dcfg-bar .dcfg-bar-main{ grid-template-columns:minmax(135px,155px) minmax(165px,180px) minmax(300px,1fr) minmax(300px,320px) minmax(170px,190px) minmax(210px,230px)!important; column-gap:18px!important; overflow:visible!important; } #drakoCfgBar.dcfg-bar .dcfg-bar-data-line{ gap:6px!important; width:100%!important; max-width:none!important; padding-left:0!important; border-left:0!important; font-size:12px!important; line-height:1.25!important; } #drakoCfgBar.dcfg-bar .dcfg-bar-data-line > span, #drakoCfgBar.dcfg-bar .dcfg-bar-data-line > span:not(.dcfg-bar-data-codes){ display:inline-flex!important; align-items:center!important; gap:6px!important; min-width:max-content!important; max-width:none!important; white-space:nowrap!important; overflow:visible!important; text-overflow:clip!important; } #drakoCfgBar.dcfg-bar .dcfg-bar-data-line i{ flex:0 0 16px!important; width:16px!important; min-width:16px!important; text-align:center!important; line-height:1!important; } @media (max-width:1280px){#drakoCfgBar.dcfg-bar .dcfg-bar-main{ grid-template-columns:repeat(3,minmax(0,1fr))!important; row-gap:10px!important; } #drakoCfgBar.dcfg-bar .dcfg-bar-data-line{ grid-column:1 / -1!important; flex-direction:row!important; gap:10px 22px!important; }} /* Sticky bar: consegna e pagamenti sempre impilati e allineati */ #drakoCfgBar.dcfg-bar .dcfg-bar-data-line{ display:flex!important; flex-direction:column!important; align-items:flex-start!important; justify-content:center!important; gap:5px!important; min-width:300px!important; overflow:visible!important; text-align:left!important; } @media (max-width:1280px){#drakoCfgBar.dcfg-bar .dcfg-bar-data-line{ flex-direction:column!important; align-items:flex-start!important; justify-content:center!important; gap:5px!important; min-width:0!important; }} /* ============================================================ Slot MULTI (piu' modelli + quantita'): selettore quantita' DI FIANCO al bottone Seleziona/Selezionato della card. ============================================================ */ #drakoCfgCustomizer .drako-pcb2-opt-actions { display:flex; align-items:stretch; gap:8px; margin-top:0; } #drakoCfgCustomizer .drako-pcb2-opt-actions .drako-pcb2-opt-cta { margin-top:0; flex:1 1 auto; } #drakoCfgCustomizer .drako-pcb2-opt-qty { display:none; flex:0 0 auto; align-items:stretch; border:1px solid var(--dcfg-border); border-radius:6px; overflow:hidden; background:#fff; } #drakoCfgCustomizer .drako-pcb2-opt.is-selected .drako-pcb2-opt-qty { display:inline-flex; } /* col CTA rimosso, il selettore quantita' (solo su card selezionata) tiene lo spazio dall'alto */ #drakoCfgCustomizer .drako-pcb2-opt.is-selected .drako-pcb2-opt-actions { margin-top:10px; } #drakoCfgCustomizer .dcfg-qbtn { width:30px; border:0; background:#f1f5f9; color:#1c63ab; font-size:16px; font-weight:700; line-height:1; cursor:pointer; padding:0; display:inline-flex; align-items:center; justify-content:center; transition:background .15s; } #drakoCfgCustomizer .dcfg-qbtn:hover:not(:disabled) { background:#e2e8f0; } #drakoCfgCustomizer .dcfg-qbtn:disabled { opacity:.38; cursor:default; } #drakoCfgCustomizer .dcfg-qval { min-width:28px; text-align:center; font-size:13px; font-weight:700; color:#0f172a; padding:0 4px; display:inline-flex; align-items:center; justify-content:center; background:#fff; } /* feedback quando si tocca il cap (max_quantity dello slot) */ #drakoCfgCustomizer .dcfg-cat.dcfg-cap-hit .dcfg-cat-title { animation:dcfgCapPulse .8s ease; } @keyframes dcfgCapPulse { 0%,100%{ color:inherit; } 30%{ color:#b45309; } } /* vista LISTA: il CTA e' nascosto, ma lo stepper resta accanto sui selezionati */ #drakoCfgCustomizer .dcfg-cat-grid.is-list .drako-pcb2-opt-actions { margin-top:0; } #drakoCfgCustomizer .dcfg-cat-grid.is-list .drako-pcb2-opt.is-selected .drako-pcb2-opt-qty { display:inline-flex; } /* dark: palette navy dei pannelli configuratore (coerente con lo schema esistente) */ html[data-theme="dark"] #drakoCfgCustomizer .drako-pcb2-opt-qty { background:#0d1626; border-color:#263a5e; } html[data-theme="dark"] #drakoCfgCustomizer .dcfg-qbtn { background:#111d33; color:#8fb7ff; } html[data-theme="dark"] #drakoCfgCustomizer .dcfg-qbtn:hover:not(:disabled) { background:#1b2b4d; } html[data-theme="dark"] #drakoCfgCustomizer .dcfg-qval { background:#0d1626; color:#eaf0fb; } /* Avviso di CAPIENZA (slot multi al massimo): WARNING ambra, NON incompatibilita' (rosso). COLORI DAI TOKEN DEL SITO, non scritti a mano: erano due palette separate - una chiara e una per html[data-theme="dark"] - e bastava che una delle due non agganciasse per ritrovarsi il riquadro color crema dentro una pagina scura. Coi token il tema lo segue da solo, in tutte e due le direzioni. */ /* FONDO AMBRA, ma ricavato dal token e TRASPARENTE: una velatura del colore di avviso sopra la superficie del tema. Cosi' l'ambra c'e' in tutti e due i temi - pallida sul chiaro, calda sullo scuro - senza due palette da tenere allineate, che e' quello che aveva fatto uscire il riquadro crema dentro la pagina scura. La riga rgba resta come ripiego per i browser senza color-mix. */ /* RIVISTO 17/08: la velatura ambra piu' il bordo ambra pieno facevano, al buio, una fascia oliva che pesava piu' della riga di prodotto sotto - ed e' una nota di servizio ("resta spazio per due moduli"), non un errore. L'ambra resta dove serve a dire di che avviso si tratta: il segno di attenzione e una barretta a sinistra. Il resto e' la superficie del tema, come le altre note del configuratore. */ #drakoCfgCustomizer .dcfg-multi-note { margin:6px 0 2px; padding:8px 11px; border-radius:6px; background:var(--drako-bg-elevated,#f9fafb); border:1px solid var(--drako-border,#e5e7eb); border-left:3px solid var(--drako-warning,#f59e0b); color:var(--drako-text-secondary,#444); font-size:12px; line-height:1.35; display:flex; align-items:center; gap:7px; } #drakoCfgCustomizer .dcfg-multi-note > span:first-child { color:var(--drako-warning,#f59e0b); flex:0 0 auto; } /* La riga si puo' chiudere: ha fatto il suo lavoro appena letta, e il "+" resta spento comunque - l'informazione non va perduta, si toglie solo di mezzo. Stessa idea della X sull'avviso FPS del generatore. */ #drakoCfgCustomizer .dcfg-multi-note-x { margin-left:auto; flex:0 0 auto; border:0; background:none; cursor:pointer; padding:0 2px; font-size:16px; line-height:1; color:var(--drako-text-muted,#666); } #drakoCfgCustomizer .dcfg-multi-note-x:hover { color:var(--drako-text,#1a1a1a); } #drakoCfgCustomizer .dcfg-multi-note[hidden] { display:none; } #drakoCfgCustomizer .dcfg-multi-note.dcfg-note-pulse { animation:dcfgNotePulse .7s ease; } /* Il lampeggio NON tocca piu' il fondo: le sue vecchie keyframe erano crema fissa (#fff7ed) e su tema scuro il riquadro sbiancava per tutta la durata dell'animazione. Ora pulsa un alone ambra, che sta bene su qualunque fondo. */ @keyframes dcfgNotePulse { 0%,100%{ box-shadow:0 0 0 0 rgba(245,158,11,0); } 35%{ box-shadow:0 0 0 3px rgba(245,158,11,.38); } } /* WARNING di capienza DENTRO la card/riga selezionata (ambra, come l'incompat ma non bloccante). */ #drakoCfgCustomizer .drako-pcb2-opt-warn-msg { margin-top:6px; padding:7px 11px; border-radius:5px; background:#fbe7b6; border:1px solid #e3bf5f; color:#7a4e08; font-size:14px; font-weight:700; line-height:1.3; display:flex; align-items:flex-start; gap:6px; } #drakoCfgCustomizer .drako-pcb2-opt-warn-msg .dcfg-optwarn-ico { color:#d97706; flex:0 0 auto; } html[data-theme="dark"] #drakoCfgCustomizer .drako-pcb2-opt-warn-msg { background:rgba(205,160,60,.24); border-color:rgba(222,175,72,.62); color:#f0cd80; } /* --- "Aggiungi al carrello" bloccato: configurazione incompatibile o incompleta --- */ [data-role="add"].is-cfg-blocked, .drako-pi-add-btn.is-cfg-blocked, .dcfg-btn-cart.is-cfg-blocked { background:#d1d5db !important; border-color:#d1d5db !important; color:#6b7280 !important; cursor:not-allowed !important; box-shadow:none !important; filter:grayscale(1); } [data-role="add"].is-cfg-blocked svg, .drako-pi-add-btn.is-cfg-blocked svg, .dcfg-btn-cart.is-cfg-blocked svg { opacity:.6; } html[data-theme="dark"] [data-role="add"].is-cfg-blocked, html[data-theme="dark"] .drako-pi-add-btn.is-cfg-blocked, html[data-theme="dark"] .dcfg-btn-cart.is-cfg-blocked { background:#3a3f47 !important; border-color:#3a3f47 !important; color:#9aa1ac !important; } /* ===== FPS / Alimentazione: badge -> finestre MODALI separate, centrate, stesse misure ===== */ .dcfg-bar-uni.dcfg-uni-modal{position:fixed!important;top:0!important;left:0!important;right:0!important;bottom:0!important;width:auto!important;height:auto!important;max-width:none!important;min-width:0!important;margin:0!important;padding:20px!important;display:flex!important;align-items:center!important;justify-content:center!important;background:rgba(4,7,11,.62)!important;border:0!important;border-top:0!important;border-radius:0!important;box-shadow:none!important;max-height:none!important;overflow:auto!important;z-index:2147483000!important;} .dcfg-bar-uni.dcfg-uni-modal[hidden]{display:none!important;} .dcfg-uni-modal .dcfg-bar-uni-grid{display:block!important;grid-template-columns:none!important;gap:0!important;box-sizing:border-box!important;background:#fff!important;border:0!important;border-radius:16px!important;box-shadow:0 24px 70px rgba(0,0,0,.45)!important;width:900px!important;max-width:calc(100vw - 40px)!important;min-height:360px!important;max-height:84vh!important;overflow:auto!important;padding:28px 24px 22px!important;position:relative!important;animation:dcfgUniIn .16s ease;} @keyframes dcfgUniIn{from{opacity:0;transform:translateY(8px) scale(.98)}to{opacity:1;transform:none}} .dcfg-uni-modal[data-show="fps"] .dcfg-bar-uni-card[data-card="psu"], .dcfg-uni-modal[data-show="psu"] .dcfg-bar-uni-card[data-card="fps"]{display:none!important;} .dcfg-uni-modal[data-show="fps"] .dcfg-bar-uni-card[data-card="fps"] .dcfg-bar-uni-h{display:none!important;} .dcfg-uni-modal .dcfg-bar-uni-card{background:transparent!important;border:0!important;padding:0!important;margin:0!important;} .dcfg-uni-modal .dcfg-bar-uni-h{font-size:15px!important;color:#0f172a!important;margin:0 0 16px!important;} .dcfg-uni-close{position:absolute!important;top:10px;right:12px;width:34px;height:34px;border:0;background:#eef2f7;color:#334155;border-radius:50%;font-size:22px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0;z-index:2;} .dcfg-uni-close:hover{background:#e2e8f0;} html[data-theme="dark"] .dcfg-uni-modal .dcfg-bar-uni-grid{background:#1c2029!important;box-shadow:0 24px 70px rgba(0,0,0,.7)!important;} html[data-theme="dark"] .dcfg-uni-modal .dcfg-bar-uni-h{color:#e5e7eb!important;} html[data-theme="dark"] .dcfg-uni-close{background:#263a5e;color:#cbd5e1;} html[data-theme="dark"] .dcfg-uni-close:hover{background:#31507f;} #drakoCfgBar.dcfg-bar.is-open{transform:none!important;transition:none!important;} /* FIX 07-14: senza transition il transform va a none nello stesso frame - niente piu' "nastro" di ~200ms: il transform attivo faceva da containing block e teneva la modale fixed prigioniera della barra */ #drakoCfgBar .dcfg-bar-uni.dcfg-uni-modal{max-width:none!important;width:auto!important;margin:0!important;} #drakoCfgBar .dcfg-uni-modal .dcfg-psu{max-width:none!important;width:100%!important;} /* content tweaks: equal height, FPS hz, RAM/verdict highlight */ #drakoCfgBar .dcfg-uni-modal .dcfg-bar-uni-grid{height:700px!important;min-height:0!important;} #drakoCfgBar .dcfg-uni-modal .dfps-mtier{display:none!important;} #drakoCfgBar .dcfg-uni-modal .dcfg-psu-verdict{font-size:15px!important;font-weight:700!important;padding:14px 16px!important;} /* content tweaks 2: game-dd dark, hz-gap, ram bigger, psu fill-height */ html[data-theme="dark"] .dfps-suggest{background:#1a1d24!important;border-color:#2a3344!important;box-shadow:0 14px 44px rgba(0,0,0,.6)!important;} html[data-theme="dark"] .dfps-sug{background:#1a1d24!important;color:#e5e7eb!important;} html[data-theme="dark"] .dfps-sug *{color:#e5e7eb!important;} html[data-theme="dark"] .dfps-sug:hover,html[data-theme="dark"] .dfps-sug.is-active{background:#263a5e!important;} html[data-theme="dark"] .dfps-sug:hover *{color:#ffffff!important;} #drakoCfgBar .dcfg-uni-modal .dfps-mrow{grid-template-columns:150px 1fr 62px!important;} #drakoCfgBar .dcfg-uni-modal[data-show="psu"] .dcfg-bar-uni-card[data-card="psu"]{display:flex!important;flex-direction:column!important;height:100%!important;} #drakoCfgBar .dcfg-uni-modal .dcfg-psu{flex:1 1 auto!important;display:flex!important;flex-direction:column!important;justify-content:flex-start!important;} /* content tweaks 4: gameart fill, unmerge psu cell, gauge consumo, nav pointer, no-X */ #drakoCfgBar .dcfg-uni-modal[data-show="fps"] .dfps-cell-psu{display:none!important;} #drakoCfgBar .dcfg-uni-modal .dcfg-psu-gauge-legend .lg-fill{display:none!important;} .dcfg-cnav-fps,.dcfg-cnav-fps-badge,.dcfg-cnav-fps-badge *{cursor:pointer!important;} #drakoCfgBar .dcfg-uni-modal .dcfg-uni-close{display:none!important;} /* --- 10-lug: layout FPS widget dentro la modale unificata (dropdown FPS) --- */ #drakoCfgBar .dcfg-uni-modal .dfps-result .dfps-hero{display:grid!important;grid-template-columns:1fr 1fr!important;gap:10px 16px!important;align-items:start!important;margin-bottom:12px!important;} #drakoCfgBar .dcfg-uni-modal .dfps-result .dfps-cell{padding:10px 12px!important;} #drakoCfgBar .dcfg-uni-modal .dfps-cell-gameart{padding:0!important;overflow:hidden!important;border-radius:10px!important;} #drakoCfgBar .dcfg-uni-modal .dfps-cell-gameart .dfps-gameart-fg{width:100%!important;height:150px!important;object-fit:cover!important;object-position:center 30%!important;display:block!important;border-radius:10px!important;} #drakoCfgBar .dcfg-uni-modal .dfps-thumb{width:46px!important;height:46px!important;min-width:46px!important;object-fit:cover!important;border-radius:7px!important;} #drakoCfgBar .dcfg-uni-modal .dfps-multi .dfps-mlist{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:6px 18px!important;max-height:none!important;} /* 10-lug: ripristino visuale dropdown FPS - solo CSS, struttura invariata */ #drakoCfgBar .dcfg-uni-modal[data-show="fps"] .dcfg-bar-uni-grid{ width:900px!important; max-width:calc(100vw - 64px)!important; height:auto!important; max-height:86vh!important; padding:12px!important; background:#fff!important; border:1px solid #dbe3ee!important; border-radius:8px!important; overflow:auto!important; box-sizing:border-box!important; } #drakoCfgBar .dcfg-uni-modal[data-show="fps"] .dcfg-bar-uni-card[data-card="fps"]{ background:#0f1b2e!important; border:1px solid #2b3f61!important; border-radius:12px!important; padding:18px!important; color:#e8eef8!important; box-shadow:none!important; } #drakoCfgBar .dcfg-uni-modal[data-show="fps"] .dfps, #drakoCfgBar .dcfg-uni-modal[data-show="fps"] .dfps *{ box-sizing:border-box!important; } #drakoCfgBar .dcfg-uni-modal[data-show="fps"] .dfps-head{ display:flex!important; justify-content:space-between!important; gap:12px!important; margin:0 0 18px!important; } #drakoCfgBar .dcfg-uni-modal[data-show="fps"] .dfps-title{ display:flex!important; align-items:center!important; gap:10px!important; font-size:18px!important; line-height:1.2!important; font-weight:900!important; color:#fff!important; margin:0!important; } #drakoCfgBar .dcfg-uni-modal[data-show="fps"] .dfps-title img, #drakoCfgBar .dcfg-uni-modal[data-show="fps"] .dfps-head img{ width:32px!important; height:32px!important; object-fit:contain!important; flex:0 0 auto!important; } #drakoCfgBar .dcfg-uni-modal[data-show="fps"] .dfps-controls{ display:grid!important; grid-template-columns:minmax(270px,1.35fr) minmax(170px,.8fr) minmax(130px,.62fr) minmax(170px,.8fr)!important; gap:12px!important; align-items:end!important; margin:0 0 16px!important; } #drakoCfgBar .dcfg-uni-modal[data-show="fps"] .dfps-field{ position:relative!important; min-width:0!important; } #drakoCfgBar .dcfg-uni-modal[data-show="fps"] .dfps-label, #drakoCfgBar .dcfg-uni-modal[data-show="fps"] .dfps-field label{ display:block!important; margin:0 0 6px!important; color:#9fafc4!important; font-size:10px!important; line-height:1!important; font-weight:900!important; letter-spacing:.04em!important; text-transform:uppercase!important; } #drakoCfgBar .dcfg-uni-modal[data-show="fps"] .dfps select, #drakoCfgBar .dcfg-uni-modal[data-show="fps"] .dfps input{ width:100%!important; height:36px!important; min-height:36px!important; border:1px solid #40516d!important; border-radius:8px!important; background:#121c2c!important; color:#fff!important; padding:0 12px!important; font-size:13px!important; font-weight:600!important; box-shadow:none!important; } #drakoCfgBar .dcfg-uni-modal[data-show="fps"] .dfps-hero{ display:grid!important; grid-template-columns:minmax(210px,.72fr) minmax(300px,1.05fr) minmax(260px,.9fr)!important; gap:12px!important; align-items:stretch!important; margin:0 0 14px!important; } #drakoCfgBar .dcfg-uni-modal[data-show="fps"] .dfps-cell{ background:#16243a!important; border:1px solid #314766!important; border-radius:10px!important; padding:14px!important; color:#dbe6f4!important; min-width:0!important; } #drakoCfgBar .dcfg-uni-modal[data-show="fps"] .dfps-cell-gameart{ position:relative!important; min-height:118px!important; padding:0!important; overflow:hidden!important; } #drakoCfgBar .dcfg-uni-modal[data-show="fps"] .dfps-cell-gameart img, #drakoCfgBar .dcfg-uni-modal[data-show="fps"] .dfps-game-art img, #drakoCfgBar .dcfg-uni-modal[data-show="fps"] .dfps-gameart img{ width:100%!important; height:118px!important; max-height:118px!important; display:block!important; object-fit:cover!important; } #drakoCfgBar .dcfg-uni-modal[data-show="fps"] .dfps-game-caption, #drakoCfgBar .dcfg-uni-modal[data-show="fps"] .dfps-cell-gameart figcaption{ position:absolute!important; left:0!important; right:0!important; bottom:0!important; min-height:28px!important; padding:7px 10px!important; background:linear-gradient(180deg,rgba(15,27,46,0),rgba(15,27,46,.95))!important; color:#fff!important; font-size:12px!important; font-weight:900!important; white-space:nowrap!important; overflow:hidden!important; text-overflow:ellipsis!important; } #drakoCfgBar .dcfg-uni-modal[data-show="fps"] .dfps-low{ font-size:24px!important; font-weight:900!important; } #drakoCfgBar .dcfg-uni-modal[data-show="fps"] .dfps-sub, #drakoCfgBar .dcfg-uni-modal[data-show="fps"] .dfps-meta{ color:#aebed3!important; font-size:12px!important; } #drakoCfgBar .dcfg-uni-modal[data-show="fps"] .dfps-multi{ margin-top:14px!important; padding-top:16px!important; border-top:1px solid #314766!important; } #drakoCfgBar .dcfg-uni-modal[data-show="fps"] .dfps-mlist{ display:grid!important; grid-template-columns:1fr!important; gap:8px!important; max-height:242px!important; overflow-y:auto!important; padding-right:6px!important; } #drakoCfgBar .dcfg-uni-modal[data-show="fps"] .dfps-mrow{ display:grid!important; gap:10px!important; align-items:center!important; min-height:22px!important; color:#d8e2f1!important; font-size:12px!important; } #drakoCfgBar .dcfg-uni-modal[data-show="fps"] .dfps-mtrack{ height:7px!important; border-radius:999px!important; overflow:hidden!important; background:#223047!important; } #drakoCfgBar .dcfg-uni-modal[data-show="fps"] .dfps-mfps{ text-align:right!important; color:#eaf2ff!important; font-size:14px!important; font-weight:900!important; } #drakoCfgBar .dcfg-uni-modal[data-show="fps"] .dfps-mfps small{font-size:9px!important;color:#a8bad1!important;} #drakoCfgBar .dcfg-uni-modal[data-show="fps"] .dfps-mtier, #drakoCfgCustomizer .dcfg-cnav-fps-pop .dfps-mtier{ display:none!important; } #drakoCfgBar .dcfg-uni-modal[data-show="fps"] .dfps-note{ display:flex!important; align-items:flex-start!important; gap:9px!important; margin-top:16px!important; padding:11px 13px!important; border:1px solid #2b4a75!important; border-radius:9px!important; background:#10203a!important; color:#cfe2ff!important; font-size:12.5px!important; font-weight:600!important; line-height:1.45!important; } #drakoCfgBar .dcfg-uni-modal[data-show="fps"] .dfps-note .dfps-warn{ flex:0 0 auto!important; width:17px!important; height:16px!important; margin-top:2px!important; color:#7fb2ff!important; } #drakoCfgBar .dcfg-uni-modal[data-show="fps"] .dfps-suggest{ position:absolute!important; left:0!important; right:0!important; top:calc(100% + 6px)!important; z-index:50!important; max-height:260px!important; overflow-y:auto!important; background:#111b2d!important; border:1px solid #41516a!important; border-radius:8px!important; box-shadow:0 14px 36px rgba(0,0,0,.42)!important; padding:5px!important; } #drakoCfgBar .dcfg-uni-modal[data-show="fps"] .dfps-sug{ display:grid!important; grid-template-columns:34px minmax(0,1fr)!important; gap:9px!important; align-items:center!important; min-height:46px!important; padding:6px 8px!important; border-radius:7px!important; background:transparent!important; color:#eef5ff!important; font-size:12px!important; font-weight:800!important; cursor:pointer!important; } #drakoCfgBar .dcfg-uni-modal[data-show="fps"] .dfps-sug:hover{background:#1b2d49!important;} #drakoCfgBar .dcfg-uni-modal[data-show="fps"] .dfps-sug img{ width:34px!important; height:34px!important; border-radius:6px!important; object-fit:cover!important; display:block!important; } #drakoCfgBar .dcfg-uni-modal[data-show="fps"] .dfps-sug *{ min-width:0!important; white-space:nowrap!important; overflow:hidden!important; text-overflow:ellipsis!important; } @media (max-width:900px){#drakoCfgBar .dcfg-uni-modal[data-show="fps"] .dcfg-bar-uni-grid{max-width:calc(100vw - 24px)!important;} #drakoCfgBar .dcfg-uni-modal[data-show="fps"] .dfps-controls, #drakoCfgBar .dcfg-uni-modal[data-show="fps"] .dfps-hero{grid-template-columns:1fr!important;} #drakoCfgBar .dcfg-uni-modal[data-show="fps"] .dfps-mrow{grid-template-columns:minmax(110px,150px) minmax(90px,1fr) 52px!important;}} /* 10-lug: agganci esatti classi widget FPS condiviso - solo CSS */ #drakoCfgBar .dcfg-uni-modal[data-show="fps"] .dcfg-bar-uni-card:first-child{ background:#0f1b2e!important; border:1px solid #2b3f61!important; border-radius:12px!important; padding:18px!important; color:#e8eef8!important; box-shadow:none!important; } #drakoCfgBar .dcfg-uni-modal[data-show="fps"] .dcfg-bar-uni-card:first-child > .dcfg-bar-uni-h{ margin:0 0 12px!important; color:#9fafc4!important; font-size:11px!important; font-weight:900!important; letter-spacing:.04em!important; text-transform:uppercase!important; } #drakoCfgBar .dcfg-uni-modal[data-show="fps"] .dfps-head{ display:grid!important; grid-template-columns:34px 1fr auto!important; gap:10px!important; } #drakoCfgBar .dcfg-uni-modal[data-show="fps"] .dfps-title{ justify-self:start!important; text-align:left!important; } #drakoCfgBar .dcfg-uni-modal[data-show="fps"] .dfps-lbl{ display:block!important; margin:0 0 6px!important; color:#9fafc4!important; font-size:10px!important; line-height:1!important; font-weight:900!important; letter-spacing:.04em!important; text-transform:uppercase!important; } #drakoCfgBar .dcfg-uni-modal[data-show="fps"] .dfps-gamebox{ position:relative!important; display:flex!important; align-items:center!important; gap:8px!important; width:100%!important; min-height:36px!important; } #drakoCfgBar .dcfg-uni-modal[data-show="fps"] .dfps-thumb{ flex:0 0 34px!important; border-radius:6px!important; object-fit:cover!important; } #drakoCfgBar .dcfg-uni-modal[data-show="fps"] .dfps-search{ flex:1 1 auto!important; min-width:0!important; } #drakoCfgBar .dcfg-uni-modal[data-show="fps"] .dfps-resgroup{ display:flex!important; height:36px!important; overflow:hidden!important; border:1px solid #40516d!important; border-radius:8px!important; background:#121c2c!important; } #drakoCfgBar .dcfg-uni-modal[data-show="fps"] .dfps-resbtn{ flex:1 1 0!important; height:34px!important; min-width:0!important; border:0!important; border-right:1px solid #40516d!important; border-radius:0!important; background:transparent!important; color:#fff!important; font-size:13px!important; font-weight:800!important; padding:0 10px!important; } #drakoCfgBar .dcfg-uni-modal[data-show="fps"] .dfps-resbtn:last-child{border-right:0!important;} #drakoCfgBar .dcfg-uni-modal[data-show="fps"] .dfps-resbtn.is-active{ background:#1264b3!important; color:#fff!important; } #drakoCfgBar .dcfg-uni-modal[data-show="fps"] .dfps-gameart-cap{ position:absolute!important; left:0!important; right:0!important; bottom:0!important; display:flex!important; justify-content:space-between!important; gap:10px!important; min-height:30px!important; padding:8px 10px!important; background:linear-gradient(180deg,rgba(15,27,46,0),rgba(15,27,46,.96))!important; color:#fff!important; font-size:12px!important; font-weight:800!important; } #drakoCfgBar .dcfg-uni-modal[data-show="fps"] .dfps-gameart-cap b, #drakoCfgBar .dcfg-uni-modal[data-show="fps"] .dfps-gameart-cap span{ min-width:0!important; white-space:nowrap!important; overflow:hidden!important; text-overflow:ellipsis!important; } #drakoCfgBar .dcfg-uni-modal[data-show="fps"] .dfps-cell-lab{ margin:0 0 10px!important; color:#9fafc4!important; font-size:10px!important; font-weight:900!important; letter-spacing:.04em!important; text-transform:uppercase!important; } #drakoCfgBar .dcfg-uni-modal[data-show="fps"] .dfps-mtrack i{ display:block!important; height:100%!important; border-radius:999px!important; background:linear-gradient(90deg,#2f82da,#5fdb90)!important; } #drakoCfgBar .dcfg-uni-modal[data-show="fps"] .dfps-mrow.is-sel .dfps-mtrack i{ background:linear-gradient(90deg,#f0a80a,#ffd35f)!important; } #drakoCfgBar .dcfg-uni-modal[data-show="fps"] .dfps-mfps u{ text-decoration:none!important; margin-left:2px!important; } #drakoCfgBar .dcfg-uni-modal[data-show="fps"] .dfps-suggest[hidden]{display:none!important;} #drakoCfgBar .dcfg-uni-modal[data-show="fps"] .dfps-suggest{ display:block!important; width:100%!important; } #drakoCfgBar .dcfg-uni-modal[data-show="fps"] .dfps-sug{ width:100%!important; border:0!important; text-align:left!important; } #drakoCfgBar .dcfg-uni-modal[data-show="fps"] .dfps-sug-empty{ display:block!important; padding:10px!important; color:#cbd5e1!important; font-size:12px!important; } /* 10-lug: correzione finale specificita' FPS dropdown - solo CSS */ #drakoCfgBar .dcfg-uni-modal[data-show="fps"] .dfps-result .dfps-hero{ display:grid!important; grid-template-columns:minmax(210px,.72fr) minmax(300px,1.05fr) minmax(260px,.9fr)!important; gap:12px!important; align-items:stretch!important; margin:0 0 14px!important; } #drakoCfgBar .dcfg-uni-modal[data-show="fps"] .dfps-result .dfps-cell{ padding:14px!important; } #drakoCfgBar .dcfg-uni-modal[data-show="fps"] .dfps-result .dfps-cell-gameart{ padding:0!important; min-height:118px!important; max-height:118px!important; border-radius:10px!important; } #drakoCfgBar .dcfg-uni-modal[data-show="fps"] .dfps-result .dfps-cell-gameart .dfps-gameart-fg{ width:100%!important; height:118px!important; max-height:118px!important; object-fit:cover!important; object-position:center!important; display:block!important; border-radius:0!important; } #drakoCfgBar .dcfg-uni-modal[data-show="fps"] .dfps-multi .dfps-mlist{ display:grid!important; grid-template-columns:1fr!important; gap:8px!important; max-height:242px!important; overflow-y:auto!important; padding-right:6px!important; } #drakoCfgBar .dcfg-uni-modal[data-show="fps"] .dfps-mrow{ grid-template-columns:minmax(150px,180px) minmax(120px,1fr) 58px!important; } #drakoCfgBar .dcfg-uni-modal[data-show="fps"] .dfps-mtier, #drakoCfgBar .dcfg-uni-modal[data-show="fps"] .dfps-mrow .dfps-mtier, #drakoCfgCustomizer .dcfg-cnav-fps-pop .dfps-mtier{ display:none!important; visibility:hidden!important; } #drakoCfgBar .dcfg-uni-modal[data-show="fps"] .dfps-thumb{ width:34px!important; height:34px!important; min-width:34px!important; } @media (max-width:900px){#drakoCfgBar .dcfg-uni-modal[data-show="fps"] .dfps-result .dfps-hero{grid-template-columns:1fr!important;}} /* 10-lug: nav badge FPS cliccabile - hover e puntatore */ #drakoCfgCustomizer .dcfg-cnav-fps, #drakoCfgCustomizer .dcfg-cnav-fps-badge, #drakoCfgCustomizer .dcfg-cnav-fps-badge *{ cursor:pointer!important; } #drakoCfgCustomizer .dcfg-cnav-fps-badge{ transition:border-color .16s ease, box-shadow .16s ease, background .16s ease, transform .16s ease!important; } #drakoCfgCustomizer .dcfg-cnav-fps-badge:hover, #drakoCfgCustomizer .dcfg-cnav-fps:focus-within .dcfg-cnav-fps-badge{ border-color:#9ec5f8!important; background:linear-gradient(180deg,#f3f8ff,#e5f0ff)!important; box-shadow:0 4px 14px rgba(28,99,171,.14)!important; transform:translateY(-1px)!important; } html[data-theme="dark"] #drakoCfgCustomizer .dcfg-cnav-fps-badge:hover, html[data-theme="dark"] #drakoCfgCustomizer .dcfg-cnav-fps:focus-within .dcfg-cnav-fps-badge{ border-color:#4f83c4!important; background:#303844!important; box-shadow:0 4px 14px rgba(0,0,0,.32)!important; } /* 10-lug: FPS e Bilanciamento come widget originale - solo CSS */ #drakoCfgBar .dcfg-uni-modal[data-show="fps"] .dfps-cell-fps, #drakoCfgBar .dcfg-uni-modal[data-show="fps"] .dfps-cell-bl{ min-height:118px!important; display:flex!important; flex-direction:column!important; justify-content:center!important; } #drakoCfgBar .dcfg-uni-modal[data-show="fps"] .dfps-cell-fps .dfps-cell-lab, #drakoCfgBar .dcfg-uni-modal[data-show="fps"] .dfps-cell-bl .dfps-cell-lab{ display:flex!important; align-items:center!important; gap:7px!important; margin:0 0 12px!important; color:#93a3bb!important; font-size:10px!important; line-height:1!important; font-weight:900!important; letter-spacing:.05em!important; text-transform:uppercase!important; } #drakoCfgBar .dcfg-uni-modal[data-show="fps"] .dfps-cell-bl .dfps-cell-ico{ width:22px!important; height:22px!important; flex:0 0 22px!important; object-fit:contain!important; } #drakoCfgBar .dcfg-uni-modal[data-show="fps"] .dfps-fpsbig{ display:flex!important; align-items:flex-end!important; gap:14px!important; margin:0 0 12px!important; white-space:nowrap!important; } #drakoCfgBar .dcfg-uni-modal[data-show="fps"] .dfps-n{ display:inline-flex!important; align-items:baseline!important; color:#b9d2f2!important; font-size:46px!important; line-height:.9!important; font-weight:900!important; letter-spacing:0!important; } #drakoCfgBar .dcfg-uni-modal[data-show="fps"] .dfps-n u{ color:#dbeafe!important; font-size:16px!important; line-height:1!important; font-weight:900!important; text-decoration:none!important; margin-left:3px!important; } #drakoCfgBar .dcfg-uni-modal[data-show="fps"] .dfps-low{ display:flex!important; flex-direction:column!important; align-items:flex-start!important; justify-content:flex-end!important; gap:1px!important; color:#b8c6da!important; line-height:1!important; margin-bottom:2px!important; } #drakoCfgBar .dcfg-uni-modal[data-show="fps"] .dfps-low b{ display:block!important; color:#b8c6da!important; font-size:24px!important; line-height:.9!important; font-weight:900!important; } #drakoCfgBar .dcfg-uni-modal[data-show="fps"] .dfps-low small{ display:block!important; color:#9fafc4!important; font-size:10px!important; line-height:1!important; font-weight:900!important; text-transform:uppercase!important; } #drakoCfgBar .dcfg-uni-modal[data-show="fps"] .dfps-cell-fps .dfps-gm, #drakoCfgBar .dcfg-uni-modal[data-show="fps"] .dfps-cell-bl .dfps-gm{ color:#b8c6da!important; font-size:12px!important; line-height:1.35!important; white-space:normal!important; } #drakoCfgBar .dcfg-uni-modal[data-show="fps"] .dfps-cell-fps .dfps-gm b, #drakoCfgBar .dcfg-uni-modal[data-show="fps"] .dfps-cell-bl .dfps-gm b{ color:#f4f8ff!important; font-weight:900!important; } #drakoCfgBar .dcfg-uni-modal[data-show="fps"] .dfps-bl-head{ display:grid!important; grid-template-columns:auto 1fr auto!important; align-items:center!important; gap:10px!important; width:100%!important; margin:0 0 9px!important; color:#dbe6f4!important; font-size:12px!important; line-height:1!important; } #drakoCfgBar .dcfg-uni-modal[data-show="fps"] .dfps-bl-side{ display:inline-flex!important; align-items:baseline!important; gap:3px!important; white-space:nowrap!important; color:#dbe6f4!important; font-size:12px!important; font-weight:700!important; } #drakoCfgBar .dcfg-uni-modal[data-show="fps"] .dfps-bl-side b{ color:#f4f8ff!important; font-size:12px!important; font-weight:900!important; } #drakoCfgBar .dcfg-uni-modal[data-show="fps"] .dfps-bl-label{ justify-self:center!important; color:#b9d2f2!important; font-size:11px!important; font-weight:900!important; text-transform:uppercase!important; white-space:nowrap!important; } #drakoCfgBar .dcfg-uni-modal[data-show="fps"] .dfps-bl-bar{ position:relative!important; width:100%!important; height:7px!important; margin:0 0 10px!important; border-radius:999px!important; background:linear-gradient(90deg,#31b653 0 58%,#f0a80a 58% 100%)!important; } /* 10-lug: FPS dropdown gradient corretto in light/dark mode */ html:not([data-theme="dark"]) #drakoCfgBar .dcfg-uni-modal[data-show="fps"] .dcfg-bar-uni-card:first-child, html:not([data-theme="dark"]) #drakoCfgBar .dcfg-uni-modal[data-show="fps"] .dcfg-bar-uni-card[data-card="fps"]{ background: radial-gradient(circle at 18% 0%, rgba(48,105,174,.28), transparent 34%), linear-gradient(180deg,#162947 0%,#0f1d33 48%,#0b1728 100%)!important; border-color:#2e4669!important; box-shadow:inset 0 1px 0 rgba(255,255,255,.06)!important; } html:not([data-theme="dark"]) #drakoCfgBar .dcfg-uni-modal[data-show="fps"] .dfps-cell{ background:linear-gradient(180deg,#1b3150 0%,#162842 100%)!important; border-color:#334d72!important; } html:not([data-theme="dark"]) #drakoCfgBar .dcfg-uni-modal[data-show="fps"] .dfps-cell-fps{ background:linear-gradient(135deg,#203b61 0%,#172a46 58%,#13233b 100%)!important; } html:not([data-theme="dark"]) #drakoCfgBar .dcfg-uni-modal[data-show="fps"] .dfps-cell-bl{ background:linear-gradient(135deg,#1d344f 0%,#162842 62%,#13233b 100%)!important; } html:not([data-theme="dark"]) #drakoCfgBar .dcfg-uni-modal[data-show="fps"] .dfps-n{ color:#bcd7f8!important; text-shadow:0 1px 0 rgba(255,255,255,.08)!important; } html:not([data-theme="dark"]) #drakoCfgBar .dcfg-uni-modal[data-show="fps"] .dfps-bl-bar{ background:linear-gradient(90deg,#36c05e 0%,#45c777 55%,#f0a80a 55%,#f3a20d 100%)!important; } html:not([data-theme="dark"]) #drakoCfgBar .dcfg-uni-modal[data-show="fps"] .dfps-mbar, html:not([data-theme="dark"]) #drakoCfgBar .dcfg-uni-modal[data-show="fps"] .dfps-mtrack i{ background:linear-gradient(90deg,#2f82da 0%,#33a5c8 48%,#5fdb90 100%)!important; } html:not([data-theme="dark"]) #drakoCfgBar .dcfg-uni-modal[data-show="fps"] .dfps-mrow.is-sel .dfps-mtrack i{ background:linear-gradient(90deg,#f0a80a 0%,#ffd35f 100%)!important; } html[data-theme="dark"] #drakoCfgBar .dcfg-uni-modal[data-show="fps"] .dcfg-bar-uni-card:first-child, html[data-theme="dark"] #drakoCfgBar .dcfg-uni-modal[data-show="fps"] .dcfg-bar-uni-card[data-card="fps"]{ background: radial-gradient(circle at 18% 0%, rgba(48,105,174,.18), transparent 34%), linear-gradient(180deg,#101b2f 0%,#0c1627 52%,#08111f 100%)!important; } /* 10-lug: scrollbar FPS corretta in modalita' chiara */ html:not([data-theme="dark"]) #drakoCfgBar .dcfg-uni-modal[data-show="fps"] .dcfg-bar-uni-grid, html:not([data-theme="dark"]) #drakoCfgBar .dcfg-uni-modal[data-show="fps"] .dfps-mlist, html:not([data-theme="dark"]) #drakoCfgBar .dcfg-uni-modal[data-show="fps"] .dfps-suggest{ scrollbar-color:#c7d3e2 #eef3f8!important; scrollbar-width:thin!important; } html:not([data-theme="dark"]) #drakoCfgBar .dcfg-uni-modal[data-show="fps"] .dcfg-bar-uni-grid::-webkit-scrollbar, html:not([data-theme="dark"]) #drakoCfgBar .dcfg-uni-modal[data-show="fps"] .dfps-mlist::-webkit-scrollbar, html:not([data-theme="dark"]) #drakoCfgBar .dcfg-uni-modal[data-show="fps"] .dfps-suggest::-webkit-scrollbar{ width:9px!important; height:9px!important; } html:not([data-theme="dark"]) #drakoCfgBar .dcfg-uni-modal[data-show="fps"] .dcfg-bar-uni-grid::-webkit-scrollbar-track, html:not([data-theme="dark"]) #drakoCfgBar .dcfg-uni-modal[data-show="fps"] .dfps-mlist::-webkit-scrollbar-track, html:not([data-theme="dark"]) #drakoCfgBar .dcfg-uni-modal[data-show="fps"] .dfps-suggest::-webkit-scrollbar-track{ background:#eef3f8!important; border-radius:999px!important; } html:not([data-theme="dark"]) #drakoCfgBar .dcfg-uni-modal[data-show="fps"] .dcfg-bar-uni-grid::-webkit-scrollbar-thumb, html:not([data-theme="dark"]) #drakoCfgBar .dcfg-uni-modal[data-show="fps"] .dfps-mlist::-webkit-scrollbar-thumb, html:not([data-theme="dark"]) #drakoCfgBar .dcfg-uni-modal[data-show="fps"] .dfps-suggest::-webkit-scrollbar-thumb{ background:#c7d3e2!important; border:2px solid #eef3f8!important; border-radius:999px!important; } html:not([data-theme="dark"]) #drakoCfgBar .dcfg-uni-modal[data-show="fps"] .dcfg-bar-uni-grid::-webkit-scrollbar-thumb:hover, html:not([data-theme="dark"]) #drakoCfgBar .dcfg-uni-modal[data-show="fps"] .dfps-mlist::-webkit-scrollbar-thumb:hover, html:not([data-theme="dark"]) #drakoCfgBar .dcfg-uni-modal[data-show="fps"] .dfps-suggest::-webkit-scrollbar-thumb:hover{ background:#9fb0c6!important; } html:not([data-theme="dark"]) #drakoCfgBar .dcfg-uni-modal[data-show="fps"]{ color-scheme:light!important; } /* 10-lug: FPS modal light mode reale, non skin dark */ html:not([data-theme="dark"]) #drakoCfgBar .dcfg-uni-modal[data-show="fps"] .dcfg-bar-uni-card:first-child, html:not([data-theme="dark"]) #drakoCfgBar .dcfg-uni-modal[data-show="fps"] .dcfg-bar-uni-card[data-card="fps"]{ background:linear-gradient(180deg,#f8fbff 0%,#eef5ff 100%)!important; border-color:#d7e2f0!important; color:#172033!important; box-shadow:inset 0 1px 0 rgba(255,255,255,.9)!important; } html:not([data-theme="dark"]) #drakoCfgBar .dcfg-uni-modal[data-show="fps"] .dcfg-bar-uni-card:first-child > .dcfg-bar-uni-h, html:not([data-theme="dark"]) #drakoCfgBar .dcfg-uni-modal[data-show="fps"] .dfps-cell-lab, html:not([data-theme="dark"]) #drakoCfgBar .dcfg-uni-modal[data-show="fps"] .dfps-lbl{ color:#6b778a!important; } html:not([data-theme="dark"]) #drakoCfgBar .dcfg-uni-modal[data-show="fps"] .dfps-title, html:not([data-theme="dark"]) #drakoCfgBar .dcfg-uni-modal[data-show="fps"] .dfps-multi-head, html:not([data-theme="dark"]) #drakoCfgBar .dcfg-uni-modal[data-show="fps"] .dfps-cell-fps .dfps-gm b, html:not([data-theme="dark"]) #drakoCfgBar .dcfg-uni-modal[data-show="fps"] .dfps-cell-bl .dfps-gm b{ color:#0f172a!important; } html:not([data-theme="dark"]) #drakoCfgBar .dcfg-uni-modal[data-show="fps"] .dfps select, html:not([data-theme="dark"]) #drakoCfgBar .dcfg-uni-modal[data-show="fps"] .dfps input, html:not([data-theme="dark"]) #drakoCfgBar .dcfg-uni-modal[data-show="fps"] .dfps-search{ background:#fff!important; border-color:#cbd7e6!important; color:#0f172a!important; } html:not([data-theme="dark"]) #drakoCfgBar .dcfg-uni-modal[data-show="fps"] .dfps-resgroup{ background:#fff!important; border-color:#cbd7e6!important; } html:not([data-theme="dark"]) #drakoCfgBar .dcfg-uni-modal[data-show="fps"] .dfps-resbtn{ color:#0f172a!important; border-right-color:#cbd7e6!important; } html:not([data-theme="dark"]) #drakoCfgBar .dcfg-uni-modal[data-show="fps"] .dfps-resbtn.is-active{ background:#1c63ab!important; color:#fff!important; } html:not([data-theme="dark"]) #drakoCfgBar .dcfg-uni-modal[data-show="fps"] .dfps-cell, html:not([data-theme="dark"]) #drakoCfgBar .dcfg-uni-modal[data-show="fps"] .dfps-cell-fps, html:not([data-theme="dark"]) #drakoCfgBar .dcfg-uni-modal[data-show="fps"] .dfps-cell-bl{ background:linear-gradient(180deg,#ffffff 0%,#f0f6ff 100%)!important; border-color:#d4dfec!important; color:#172033!important; } html:not([data-theme="dark"]) #drakoCfgBar .dcfg-uni-modal[data-show="fps"] .dfps-n{ color:#16a34a!important; text-shadow:none!important; } html:not([data-theme="dark"]) #drakoCfgBar .dcfg-uni-modal[data-show="fps"] .dfps-n u{ color:#1c63ab!important; } html:not([data-theme="dark"]) #drakoCfgBar .dcfg-uni-modal[data-show="fps"] .dfps-low b, html:not([data-theme="dark"]) #drakoCfgBar .dcfg-uni-modal[data-show="fps"] .dfps-low, html:not([data-theme="dark"]) #drakoCfgBar .dcfg-uni-modal[data-show="fps"] .dfps-low small, html:not([data-theme="dark"]) #drakoCfgBar .dcfg-uni-modal[data-show="fps"] .dfps-cell-fps .dfps-gm, html:not([data-theme="dark"]) #drakoCfgBar .dcfg-uni-modal[data-show="fps"] .dfps-cell-bl .dfps-gm, html:not([data-theme="dark"]) #drakoCfgBar .dcfg-uni-modal[data-show="fps"] .dfps-sub, html:not([data-theme="dark"]) #drakoCfgBar .dcfg-uni-modal[data-show="fps"] .dfps-meta{ color:#5f6f84!important; } html:not([data-theme="dark"]) #drakoCfgBar .dcfg-uni-modal[data-show="fps"] .dfps-bl-side, html:not([data-theme="dark"]) #drakoCfgBar .dcfg-uni-modal[data-show="fps"] .dfps-bl-side b, html:not([data-theme="dark"]) #drakoCfgBar .dcfg-uni-modal[data-show="fps"] .dfps-bl-label, html:not([data-theme="dark"]) #drakoCfgBar .dcfg-uni-modal[data-show="fps"] .dfps-mfps, html:not([data-theme="dark"]) #drakoCfgBar .dcfg-uni-modal[data-show="fps"] .dfps-mname{ color:#172033!important; } html:not([data-theme="dark"]) #drakoCfgBar .dcfg-uni-modal[data-show="fps"] .dfps-mrow{ color:#172033!important; } html:not([data-theme="dark"]) #drakoCfgBar .dcfg-uni-modal[data-show="fps"] .dfps-mtrack{ background:#dfe7f1!important; } html:not([data-theme="dark"]) #drakoCfgBar .dcfg-uni-modal[data-show="fps"] .dfps-multi{ border-top-color:#d6e0ed!important; color:#5f6f84!important; } html:not([data-theme="dark"]) #drakoCfgBar .dcfg-uni-modal[data-show="fps"] .dfps-note{ background:#eef4fb!important; border-color:#b9d4f0!important; color:#154e87!important; } html:not([data-theme="dark"]) #drakoCfgBar .dcfg-uni-modal[data-show="fps"] .dfps-note .dfps-warn{ color:var(--dcfg-blue)!important; } html:not([data-theme="dark"]) #drakoCfgBar .dcfg-uni-modal[data-show="fps"] .dfps-suggest{ background:#fff!important; border-color:#cbd7e6!important; box-shadow:0 14px 36px rgba(15,23,42,.18)!important; } html:not([data-theme="dark"]) #drakoCfgBar .dcfg-uni-modal[data-show="fps"] .dfps-sug{ color:#172033!important; } html:not([data-theme="dark"]) #drakoCfgBar .dcfg-uni-modal[data-show="fps"] .dfps-sug:hover{ background:#edf4ff!important; } /* 10-lug: ripristino stile flyout FPS nella nav laterale */ /* 10-lug: flyout FPS nav laterale compatto, senza tagli dei controlli */ /* 10-lug: ripristino flyout FPS nav come versione precedente */ /* 10-lug: wrapper modal FPS realmente dark in modalita' scura */ html[data-theme="dark"] #drakoCfgBar .dcfg-uni-modal[data-show="fps"] .dcfg-bar-uni-grid{ background:#1c2029!important; border-color:#363c48!important; box-shadow:0 24px 70px rgba(0,0,0,.72)!important; color-scheme:dark!important; } html[data-theme="dark"] #drakoCfgBar .dcfg-uni-modal[data-show="fps"]{ color-scheme:dark!important; } html[data-theme="dark"] #drakoCfgBar .dcfg-uni-modal[data-show="fps"] .dcfg-bar-uni-card:first-child, html[data-theme="dark"] #drakoCfgBar .dcfg-uni-modal[data-show="fps"] .dcfg-bar-uni-card[data-card="fps"]{ background:linear-gradient(180deg,#101b2f 0%,#0c1627 52%,#08111f 100%)!important; border-color:#263a5e!important; color:#e8eef8!important; } html[data-theme="dark"] #drakoCfgBar .dcfg-uni-modal[data-show="fps"] .dfps-cell{ background:linear-gradient(180deg,#14243b 0%,#101d31 100%)!important; border-color:#263a5e!important; color:#e8eef8!important; } html[data-theme="dark"] #drakoCfgBar .dcfg-uni-modal[data-show="fps"] .dfps select, html[data-theme="dark"] #drakoCfgBar .dcfg-uni-modal[data-show="fps"] .dfps input, html[data-theme="dark"] #drakoCfgBar .dcfg-uni-modal[data-show="fps"] .dfps-search, html[data-theme="dark"] #drakoCfgBar .dcfg-uni-modal[data-show="fps"] .dfps-resgroup{ background:#121c2c!important; border-color:#40516d!important; color:#fff!important; } html[data-theme="dark"] #drakoCfgBar .dcfg-uni-modal[data-show="fps"] .dfps-suggest{ background:#111b2d!important; border-color:#41516a!important; box-shadow:0 14px 36px rgba(0,0,0,.42)!important; } /* 10-lug: stato finale flyout FPS nav = layout riferimento 09-07 */ /* 10-lug: controlli flyout FPS nav scuri come riferimento */ /* 10-lug: flyout FPS nav in light mode, dopo override dark riferimento */ /* 10-lug: allineamento RAM nel modal FPS */ /* 10-lug: spazio tra badge RAM e variabilita' FPS */ /* 10-lug: PSU cardbody senza background ereditato dal dark globale */ html[data-theme="dark"] .dcfg-psu-cardbody, html[data-theme="dark"] #drakoCfgSummary .dcfg-psu-cardbody, html[data-theme="dark"] #drakoCfgBar .dcfg-psu-cardbody, html[data-theme="dark"] #drakoCfgCustomizer .dcfg-psu-cardbody{ background-color:transparent!important; background-image:none!important; } /* 10-lug: rimuovi background dark globale anche dai figli PSU cardbody */ html[data-theme="dark"] .dcfg-psu-cardbody, html[data-theme="dark"] .dcfg-psu-cardbody *, html[data-theme="dark"] .dcfg-psu-cardbody .dcfg-psu-cardlabel, html[data-theme="dark"] .dcfg-psu-cardbody .dcfg-psu-cardname, html[data-theme="dark"] .dcfg-psu-cardbody .dcfg-psu-cardwatt, html[data-theme="dark"] #drakoCfgSummary .dcfg-psu-cardbody, html[data-theme="dark"] #drakoCfgSummary .dcfg-psu-cardbody *, html[data-theme="dark"] #drakoCfgCustomizer .dcfg-psu-cardbody, html[data-theme="dark"] #drakoCfgCustomizer .dcfg-psu-cardbody *, html[data-theme="dark"] #drakoCfgBar .dcfg-psu-cardbody, html[data-theme="dark"] #drakoCfgBar .dcfg-psu-cardbody *{ background:transparent!important; background-color:transparent!important; background-image:none!important; box-shadow:none!important; } /* ========================================================================== FASE A 2026-07-13 - Stati incompatibili "spenti + badge" (audit UX 07-13) Le opzioni non selezionabili si SPENGONO (desaturate) invece di urlare in rosso; il rosso pieno resta SOLO sul conflitto attivo (.is-incompat.is-selected). ========================================================================== */ /* immagine desaturata e nome attenuato sulle card bloccate (non selezionate) */ #drakoCfgCustomizer .drako-pcb2-opt.is-incompat:not(.is-selected) .drako-pcb2-opt-imgwrap img { filter:grayscale(1); opacity:.55; } #drakoCfgCustomizer .drako-pcb2-opt.is-incompat:not(.is-selected) .drako-pcb2-opt-name { color:var(--dcfg-muted); } /* niente badge PROMO/NOVITA e niente riga stock sulle card bloccate */ #drakoCfgCustomizer .drako-pcb2-opt.is-incompat:not(.is-selected) .drako-pcb2-opt-badges { display:none; } #drakoCfgCustomizer .drako-pcb2-opt.is-incompat:not(.is-selected) .drako-pcb2-opt-stock, #drakoCfgCustomizer .drako-pcb2-opt.is-incompat:not(.is-selected) .drako-pcb2-opt-avail { display:none; } /* icona e testo del messaggio quieto + link guidato */ #drakoCfgCustomizer .dcfg-incompat-ico { flex:0 0 auto; color:var(--dcfg-amber); font-size:12px; line-height:1.35; } #drakoCfgCustomizer .dcfg-incompat-txt { flex:1 1 auto; } #drakoCfgCustomizer .dcfg-fix-link { color:var(--dcfg-blue); font-weight:700; white-space:nowrap; text-decoration:none; margin-left:4px; cursor:pointer !important; } #drakoCfgCustomizer .dcfg-fix-link:hover { text-decoration:underline; } /* conflitto ATTIVO (selezionata ma incompatibile): il messaggio resta rosso */ #drakoCfgCustomizer .drako-pcb2-opt.is-incompat.is-selected .drako-pcb2-opt-incompat-msg { color:#a82019; background:#fbd5d7; border-color:#ef9ea2; font-weight:600; } /* focus visibile da tastiera sulle card */ #drakoCfgCustomizer .drako-pcb2-opt:has(input:focus-visible) { outline:2px solid var(--drako-focus-ring, #1c63ab); outline-offset:2px; } /* ancoraggio sezioni sotto la barra sticky per il link guidato */ #drakoCfgCustomizer .dcfg-cat { scroll-margin-top:120px; } /* stock badge (classi pdm-*) dentro il configuratore: contrasto AA */ #drakoCfgCustomizer .drako-pcb2-opt-stock.pdm-stock-ok, #drakoCfgCustomizer .drako-pcb2-opt-stock .pdm-stock-ok { color:#15803d; } #drakoCfgCustomizer .drako-pcb2-opt-stock.pdm-stock-order, #drakoCfgCustomizer .drako-pcb2-opt-stock .pdm-stock-order { color:var(--dcfg-amber); } /* conflitto ATTIVO: bordo rosso garantito (vince per ordine sul layer griglia) */ #drakoCfgCustomizer .drako-pcb2-opt.is-incompat.is-selected { border-color:var(--dcfg-red); box-shadow:0 0 0 1px var(--dcfg-red) inset; } /* ========================================================================== P0 MOBILE 2026-07-14 - configuratore usabile a <=640px (audit UX 07-13) Cause overflow misurate: .dcfg-cnav (535px) + card; barra sticky 228px. ========================================================================== */ /* CTA "rogue": la sticky-bar mobile di prodotto invia il form BASE (bypassa la config di sessione, drako_pc_cfg_store vive solo nell'AJAX) - mai su pagine cfg */ body:has(.drako-pi-wrapper.dcfg-on) .drako-pi-sticky-bar { display:none !important; } @media (max-width:640px){/* niente rail sinistro: primo contributore dell'overflow (535px) e 2500px di muro verticale */ #drakoCfgCustomizer .dcfg-cnav { display:none !important; } #drakoCfgCustomizer .dcfg-cust-shell { display:block !important; } /* griglie e card entro il viewport */ #drakoCfgCustomizer { overflow-x:clip; } #drakoCfgCustomizer .dcfg-cat { min-width:0 !important; } #drakoCfgCustomizer .dcfg-cat-grid { grid-template-columns:1fr !important; } #drakoCfgCustomizer .drako-pcb2-opt { width:auto !important; max-width:100% !important; min-width:0 !important; } #drakoCfgCustomizer .dcfg-cat-head { flex-wrap:wrap; } /* tap target */ #drakoCfgCustomizer .dcfg-view-btn { min-height:40px !important; } #drakoCfgCustomizer .dcfg-qbtn { min-width:34px !important; min-height:30px !important; }} /* Barra sticky configuratore mobile: UNA riga - chips FPS/W + totale + CTA */ @media (max-width:768px){html body #drakoCfgBar.dcfg-bar.is-visible .dcfg-bar-inner { padding:8px 10px !important; } html body #drakoCfgBar.dcfg-bar.is-visible .dcfg-bar-main { display:flex !important; flex-wrap:nowrap !important; align-items:center !important; gap:8px !important; min-height:0 !important; } html body #drakoCfgBar.dcfg-bar.is-visible .dcfg-bar-data-line, html body #drakoCfgBar.dcfg-bar.is-visible .dcfg-bar-fintext, html body #drakoCfgBar.dcfg-bar.is-visible .dcfg-bar-finance { display:none !important; } html body #drakoCfgBar.dcfg-bar.is-visible .dcfg-bar-badge { padding:4px 6px !important; border-radius:8px !important; min-height:40px !important; } html body #drakoCfgBar.dcfg-bar.is-visible .dcfg-bar-badge::after, html body #drakoCfgBar.dcfg-bar.is-visible .dcfg-bar-badge-txt::after { display:none !important; } html body #drakoCfgBar.dcfg-bar.is-visible .dcfg-bar-badge-img { width:18px !important; height:18px !important; } html body #drakoCfgBar.dcfg-bar.is-visible .dcfg-bar-badge-txt small { display:none !important; } html body #drakoCfgBar.dcfg-bar.is-visible .dcfg-bar-badge-txt { max-width:none !important; overflow:visible !important; } html body #drakoCfgBar.dcfg-bar.is-visible .dcfg-bar-badge-txt b { font-size:12px !important; white-space:nowrap !important; max-width:none !important; overflow:visible !important; text-overflow:clip !important; } html body #drakoCfgBar.dcfg-bar.is-visible .dcfg-bar-priceblk { flex:1 1 auto !important; min-width:0 !important; text-align:right !important; justify-self:auto !important; } html body #drakoCfgBar.dcfg-bar.is-visible .dcfg-bar-priceblk small { display:none !important; } html body #drakoCfgBar.dcfg-bar.is-visible .dcfg-bar-total { font-size:17px !important; white-space:nowrap !important; } html body #drakoCfgBar.dcfg-bar.is-visible .dcfg-bar-add { padding:10px 12px !important; font-size:13px !important; min-height:44px !important; box-shadow:none !important; } /* dropdown FPS/PSU della barra: compatti e dentro lo schermo */ html body #drakoCfgBar.dcfg-bar.is-visible .dcfg-bar-dropdown, html body #drakoCfgBar.dcfg-bar.is-visible .dcfg-bar-psu-dropdown, html body #drakoCfgBar.dcfg-bar.is-visible .dcfg-bar-fps-dropdown { padding:10px !important; }} /* A 320px la priorita' e' acquisto: FPS, totale e CTA restano leggibili; il wattaggio (gia' disponibile nel configuratore) non comprime il prezzo. */ @media (max-width:340px){html body #drakoCfgBar.dcfg-bar.is-visible .dcfg-bar-psu { display:none !important; }} /* FASE B 2026-07-14: barra sopra il banner promo fixed (z 9999) sulle pagine configuratore */ html body #drakoCfgBar.dcfg-bar.is-visible { z-index:10001 !important; } /* FASE B fix 2026-07-14: l'header del sito (.drako-header-wrap: fixed, z-index:900) crea uno stacking context che INTRAPPOLA i suoi dropdown (menu account, megamenu, suggerimenti ricerca). Con la barra a z-index:10001 quei menu a tendina finivano SOTTO la barra (vedi menu "Ciao,..." tagliato). Non basta alzare lo z-index del singolo dropdown: resta confinato ai 900 dell'header. Alzo l'intero header sopra la barra, ma SOLO sulle pagine configuratore (:has) e solo quando la barra e' visibile, cosi' i dropdown tornano sopra e la barra resta comunque sopra il banner Twitch fixed (z 9999). Ordine finale: header 10002 > barra 10001 > banner 9999. */ html body:has(#drakoCfgBar.dcfg-bar.is-visible) .drako-header-wrap { z-index:10002 !important; } /* FASE B: sezioni accessorio collassate di default (accordion) */ #drakoCfgCustomizer .dcfg-cat[data-optional="1"] .dcfg-cat-head { cursor:pointer; } /* rev 07-14: caret ::after rimosso - sostituito dal bottone .dcfg-cat-collapse (SVG allineato) */ #drakoCfgCustomizer .dcfg-cat.is-collapsed [data-role="panel"] { display:none !important; } /* rail: core slot senza selezione = "Da scegliere" in ambra */ #drakoCfgCustomizer .dcfg-cnav-name.is-empty { color:var(--dcfg-amber); font-style:italic; font-weight:600; } /* rev 07-14: controlli header sezione - SVG puliti nei bottoni vista + bottone chevron collasso */ #drakoCfgCustomizer .dcfg-view-btn { display:inline-flex; align-items:center; justify-content:center; padding:6px 11px; } #drakoCfgCustomizer .dcfg-view-btn svg { width:15px; height:15px; display:block; } #drakoCfgCustomizer .dcfg-cat-collapse { flex:0 0 auto; margin-left:8px; align-self:center; display:inline-flex; align-items:center; justify-content:center; width:30px; height:30px; border:1px solid #d7dce2; border-radius:6px; background:#fff; color:#6b7280; cursor:pointer; padding:0; } #drakoCfgCustomizer .dcfg-cat-collapse:hover { color:#1c63ab; border-color:#1c63ab; } #drakoCfgCustomizer .dcfg-cat-collapse svg { width:15px; height:15px; display:block; transition:transform .18s ease; } #drakoCfgCustomizer .dcfg-cat.is-collapsed .dcfg-cat-collapse svg { transform:rotate(-90deg); } @media (prefers-reduced-motion:reduce){#drakoCfgCustomizer .dcfg-cat-collapse svg { transition:none; }} html[data-theme="dark"] #drakoCfgCustomizer .dcfg-cat-collapse { background:#2a2f38; border-color:#363c48; color:#aab2c0; } @media (max-width:640px){#drakoCfgCustomizer .dcfg-cat-collapse { width:40px; height:40px; }} /* rev 07-14: popover hover FPS del rail ELIMINATO (feedback utente: ripetitivo e ingombrante). Il click sul badge apre la modale (proxy verso il badge della barra); il widget nel popover resta montato ma invisibile: continua ad alimentare i numeri del badge. */ /* rev 07-14: hero rail a TAGLIA FISSA - il caricamento immagine non puo' piu' spostare il layout (chiude il conflitto tra le 4 generazioni di regole: 210px / 150px / 220px / auto) */ #drakoCfgCustomizer .dcfg-cnav-hero-img { width:100% !important; height:230px !important; max-height:none !important; object-fit:contain !important; display:block !important; } /* rev 07-14: risoluzioni FPS - singolo bottone senza dati = spento (guardia futura); gruppo flat gia' gestito da .is-disabled */ #drakoCfgBar .dfps-resbtn:disabled, #drakoCfgCustomizer .dfps-resbtn:disabled { opacity:.45; cursor:not-allowed; } #drakoCfgBar .dfps-resbtn.is-missing, #drakoCfgCustomizer .dfps-resbtn.is-missing { opacity:.35; text-decoration:line-through; } /* rev 07-14: BILANCIAMENTO = barra PROPORZIONALE (fill = quota GPU da sinistra, traccia restante = CPU). Sostituisce il cursore su scala sfumata, poco chiaro. */ #drakoCfgBar .dfps-bl-bar, #drakoCfgCustomizer .dfps-bl-bar, #drakoCfgSummary .dfps-bl-bar, #drakoCfgBar .dcfg-uni-modal[data-show="fps"] .dfps-bl-bar, html:not([data-theme="dark"]) #drakoCfgBar .dcfg-uni-modal[data-show="fps"] .dfps-bl-bar { position:relative !important; height:10px !important; border-radius:999px !important; background:#dfe4ea !important; overflow:hidden !important; } html[data-theme="dark"] #drakoCfgBar .dfps-bl-bar, html[data-theme="dark"] #drakoCfgCustomizer .dfps-bl-bar, html[data-theme="dark"] #drakoCfgBar .dcfg-uni-modal[data-show="fps"] .dfps-bl-bar { background:#2b3444 !important; } #drakoCfgBar .dfps-bl-fill, #drakoCfgCustomizer .dfps-bl-fill, #drakoCfgSummary .dfps-bl-fill { display:block !important; height:100% !important; background:#1c63ab !important; min-width:2% !important; max-width:100% !important; transition:width .25s ease !important; } @media (prefers-reduced-motion:reduce){#drakoCfgBar .dfps-bl-fill, #drakoCfgCustomizer .dfps-bl-fill { transition:none !important; }} /* rev 07-14 (2): bilanciamento A BILANCIA - fill ancorato al CENTRO, sporge verso il lato che domina (GPU=sinistra blu, CPU=destra ambra); tacca centrale = punto di equilibrio */ #drakoCfgBar .dfps-bl-fill, #drakoCfgCustomizer .dfps-bl-fill, #drakoCfgSummary .dfps-bl-fill { position:absolute !important; top:0 !important; bottom:0 !important; height:auto !important; min-width:0 !important; border-radius:999px !important; transition:left .25s ease, width .25s ease !important; } #drakoCfgBar .dfps-bl-fill.is-cpu, #drakoCfgCustomizer .dfps-bl-fill.is-cpu, #drakoCfgSummary .dfps-bl-fill.is-cpu { background:#b45309 !important; } #drakoCfgBar .dfps-bl-bar, #drakoCfgCustomizer .dfps-bl-bar, #drakoCfgSummary .dfps-bl-bar { overflow:visible !important; } /* ===== BETA feedback: pill + modale (2026-07-14) ===== */ #dcfgFbBtn { position:fixed; right:16px; bottom:170px; z-index:900; display:inline-flex; align-items:center; gap:7px; background:#fff; color:#1f2937; border:1px solid #d7dce2; border-radius:999px; padding:9px 14px; font:600 12.5px 'Segoe UI',Roboto,Arial,sans-serif; cursor:pointer; box-shadow:0 4px 14px rgba(16,24,40,.18); } #dcfgFbBtn b { background:#1c63ab; color:#fff; font-size:10px; letter-spacing:.04em; border-radius:4px; padding:2px 6px; font-weight:800; } #dcfgFbBtn:hover { border-color:#1c63ab; color:#1c63ab; } @media (max-width:640px){#dcfgFbBtn { bottom:150px; right:12px; padding:8px 12px; font-size:12px; }} #dcfgFbWrap { position:fixed; inset:0; z-index:10005; background:rgba(4,7,11,.55); display:flex; align-items:center; justify-content:center; padding:16px; } .dcfg-fb-box { width:440px; max-width:100%; background:#fff; border-radius:14px; padding:18px 18px 16px; box-shadow:0 24px 70px rgba(0,0,0,.4); font-family:'Segoe UI',Roboto,Arial,sans-serif; color:#1f2937; } .dcfg-fb-head { display:flex; align-items:center; gap:8px; font-size:16px; } .dcfg-fb-head b { flex:1; } .dcfg-fb-beta { background:#1c63ab; color:#fff; font-size:10px; font-weight:800; letter-spacing:.04em; border-radius:4px; padding:2px 7px; } .dcfg-fb-x { background:none; border:none; font-size:22px; line-height:1; color:#6b7280; cursor:pointer; padding:2px 6px; } .dcfg-fb-x:hover { color:#1f2937; } .dcfg-fb-sub { margin:8px 0 12px; font-size:12.5px; color:#4b5563; line-height:1.45; } .dcfg-fb-cats { display:flex; flex-direction:column; gap:6px; margin:0 0 12px; font-size:13px; } .dcfg-fb-cats input { margin-right:6px; } .dcfg-fb-lbl { display:block; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.03em; color:#4b5563; margin:10px 0 4px; } .dcfg-fb-box textarea, .dcfg-fb-box input[type="email"] { width:100%; box-sizing:border-box; border:1px solid #d7dce2; border-radius:8px; padding:8px 10px; font:13px 'Segoe UI',Roboto,Arial,sans-serif; color:#1f2937; } .dcfg-fb-box textarea:focus, .dcfg-fb-box input[type="email"]:focus { outline:2px solid var(--drako-focus-ring, #1c63ab); outline-offset:1px; } .dcfg-fb-hp { position:absolute; left:-9999px; width:1px; height:1px; opacity:0; } .dcfg-fb-foot { display:flex; align-items:center; gap:10px; margin-top:14px; } .dcfg-fb-send { background:#1c63ab; color:#fff; border:none; border-radius:8px; padding:10px 16px; font:600 13.5px 'Segoe UI',Roboto,Arial,sans-serif; cursor:pointer; } .dcfg-fb-send:hover { background:#154e87; } .dcfg-fb-send:disabled { opacity:.6; cursor:wait; } .dcfg-fb-note { font-size:12px; color:#15803d; font-weight:600; } html[data-theme="dark"] .dcfg-fb-box { background:#22262e; color:#e5e7eb; } html[data-theme="dark"] .dcfg-fb-box textarea, html[data-theme="dark"] .dcfg-fb-box input[type="email"] { background:#1b1f26; border-color:#363c48; color:#e5e7eb; } html[data-theme="dark"] .dcfg-fb-sub, html[data-theme="dark"] .dcfg-fb-lbl { color:#aab2bf; } html[data-theme="dark"] #dcfgFbBtn { background:#22262e; color:#e5e7eb; border-color:#363c48; } /* feedback BETA: area screenshot (cattura/incolla/file) + anteprima */ .dcfg-fb-shot { display:flex; align-items:center; gap:10px; flex-wrap:wrap; } .dcfg-fb-cap, .dcfg-fb-file-lbl { display:inline-flex; align-items:center; gap:6px; background:#f3f6fa; color:#1c63ab; border:1px solid #cfe0f2; border-radius:8px; padding:7px 11px; font:600 12px 'Segoe UI',Roboto,Arial,sans-serif; cursor:pointer; } .dcfg-fb-cap:hover, .dcfg-fb-file-lbl:hover { background:#e0edff; } .dcfg-fb-file-lbl input[type="file"] { display:none; } .dcfg-fb-shot-hint { font-size:11px; color:#6b7280; } .dcfg-fb-prev { position:relative; margin-top:10px; display:inline-block; } .dcfg-fb-prev img { max-width:180px; max-height:110px; border:1px solid #d7dce2; border-radius:8px; display:block; } .dcfg-fb-prev-x { position:absolute; top:-8px; right:-8px; width:22px; height:22px; border-radius:50%; border:1px solid #d7dce2; background:#fff; color:#6b7280; font-size:14px; line-height:1; cursor:pointer; box-shadow:0 1px 4px rgba(16,24,40,.2); } .dcfg-fb-prev-x:hover { color:#c62828; border-color:#c62828; } html[data-theme="dark"] .dcfg-fb-cap, html[data-theme="dark"] .dcfg-fb-file-lbl { background:#1b1f26; border-color:#363c48; color:#7fb2ff; } /* fix 07-14: [hidden] deve vincere sul display della classe (trap UA-stylesheet) */ .dcfg-fb-prev[hidden] { display:none !important; } /* rev 07-14 (3, DEFINITIVO): bilanciamento = GAUGE a zone fisse + indicatore. Zone simmetriche sul semiasse: verde 37.5-62.5 (equilibrio), ambra, ROSSO <25 e >75 (= un componente oltre il 75% del carico). Indicatore = quota CPU (verso chi domina). */ /* rev 07-14 (3b): il gauge deve vincere anche sui layer modale/dark della traccia piatta rev1 */ /* SPEC FINALE UTENTE 07-14 (non ridisegnare): bilanciamento = barra riempimento da sinistra, larghezza = quota GPU, colore unico per stato: verde <=49, gialla 50-80, rossa >80. La traccia neutra arriva dalle regole rev1 (.dfps-bl-bar flat); il fill2 e' un layer nuovo. */ .dfps-bl-fill2 { display:block; height:100%; border-radius:999px; transition:width .25s ease; } .dfps-bl-fill2.is-green { background:#16a34a; } .dfps-bl-fill2.is-yellow { background:#eab308; } .dfps-bl-fill2.is-red { background:#dc2626; } @media (prefers-reduced-motion:reduce){.dfps-bl-fill2 { transition:none; }} /* rev 07-14: lista multi-gioco - scrollbar IMPUGNABILE e contenuto mai sotto la barra (prima: thumb 9px chiarissimo con bordo 2px = ~5px visibili + padding 6px) */ #drakoCfgBar .dcfg-uni-modal[data-show="fps"] .dfps-mlist, html:not([data-theme="dark"]) #drakoCfgBar .dcfg-uni-modal[data-show="fps"] .dfps-mlist, html[data-theme="dark"] #drakoCfgBar .dcfg-uni-modal[data-show="fps"] .dfps-mlist { padding-right:16px !important; scrollbar-width:auto !important; scrollbar-gutter:stable; } html:not([data-theme="dark"]) #drakoCfgBar .dcfg-uni-modal[data-show="fps"] .dfps-mlist { scrollbar-color:#8fa3ba #eef3f8 !important; } html[data-theme="dark"] #drakoCfgBar .dcfg-uni-modal[data-show="fps"] .dfps-mlist { scrollbar-color:#4b5a70 #1b2230 !important; } html:not([data-theme="dark"]) #drakoCfgBar .dcfg-uni-modal[data-show="fps"] .dfps-mlist::-webkit-scrollbar, html[data-theme="dark"] #drakoCfgBar .dcfg-uni-modal[data-show="fps"] .dfps-mlist::-webkit-scrollbar, #drakoCfgBar .dcfg-uni-modal[data-show="fps"] .dfps-mlist::-webkit-scrollbar { width:12px !important; height:12px !important; } html:not([data-theme="dark"]) #drakoCfgBar .dcfg-uni-modal[data-show="fps"] .dfps-mlist::-webkit-scrollbar-thumb, #drakoCfgBar .dcfg-uni-modal[data-show="fps"] .dfps-mlist::-webkit-scrollbar-thumb { background:#8fa3ba !important; border:1px solid #eef3f8 !important; border-radius:999px !important; min-height:32px; } html:not([data-theme="dark"]) #drakoCfgBar .dcfg-uni-modal[data-show="fps"] .dfps-mlist::-webkit-scrollbar-thumb:hover, #drakoCfgBar .dcfg-uni-modal[data-show="fps"] .dfps-mlist::-webkit-scrollbar-thumb:hover { background:#64748b !important; } html[data-theme="dark"] #drakoCfgBar .dcfg-uni-modal[data-show="fps"] .dfps-mlist::-webkit-scrollbar-thumb { background:#4b5a70 !important; border:1px solid #1b2230 !important; border-radius:999px !important; min-height:32px; } /* rev 07-14 (b): stessi prefissi del layer .dfps-multi .dfps-mlist (riga ~3196) per vincere */ #drakoCfgBar .dcfg-uni-modal[data-show="fps"] .dfps-multi .dfps-mlist { padding-right:16px !important; scrollbar-width:auto !important; } #drakoCfgBar .dcfg-uni-modal[data-show="fps"] .dfps-multi .dfps-mlist::-webkit-scrollbar, html:not([data-theme="dark"]) #drakoCfgBar .dcfg-uni-modal[data-show="fps"] .dfps-multi .dfps-mlist::-webkit-scrollbar, html[data-theme="dark"] #drakoCfgBar .dcfg-uni-modal[data-show="fps"] .dfps-multi .dfps-mlist::-webkit-scrollbar { width:12px !important; height:12px !important; } #drakoCfgBar .dcfg-uni-modal[data-show="fps"] .dfps-multi .dfps-mlist::-webkit-scrollbar-thumb, html:not([data-theme="dark"]) #drakoCfgBar .dcfg-uni-modal[data-show="fps"] .dfps-multi .dfps-mlist::-webkit-scrollbar-thumb { background:#8fa3ba !important; border:1px solid #eef3f8 !important; border-radius:999px !important; min-height:32px !important; } #drakoCfgBar .dcfg-uni-modal[data-show="fps"] .dfps-multi .dfps-mlist::-webkit-scrollbar-thumb:hover, html:not([data-theme="dark"]) #drakoCfgBar .dcfg-uni-modal[data-show="fps"] .dfps-multi .dfps-mlist::-webkit-scrollbar-thumb:hover { background:#64748b !important; } html[data-theme="dark"] #drakoCfgBar .dcfg-uni-modal[data-show="fps"] .dfps-multi .dfps-mlist::-webkit-scrollbar-thumb { background:#4b5a70 !important; border:1px solid #1b2230 !important; border-radius:999px !important; min-height:32px !important; } /* rev 07-14: LAYOUT modale FPS riorganizzato (richiesta utente): game-art ALTA a sinistra (2 righe) | riga1: FPS + Bilanciamento | riga2: RAM + variabilita' */ #drakoCfgBar .dcfg-uni-modal[data-show="fps"] .dfps-result, html:not([data-theme="dark"]) #drakoCfgBar .dcfg-uni-modal[data-show="fps"] .dfps-result { display:grid !important; grid-template-columns:250px minmax(0,1fr) minmax(0,1fr) !important; grid-template-rows:auto auto !important; gap:12px 16px !important; align-items:stretch !important; } #drakoCfgBar .dcfg-uni-modal[data-show="fps"] .dfps-result .dfps-hero, html:not([data-theme="dark"]) #drakoCfgBar .dcfg-uni-modal[data-show="fps"] .dfps-result .dfps-hero { display:contents !important; } #drakoCfgBar .dcfg-uni-modal[data-show="fps"] .dfps-cell-gameart, html:not([data-theme="dark"]) #drakoCfgBar .dcfg-uni-modal[data-show="fps"] .dfps-cell-gameart { grid-column:1 !important; grid-row:1 / span 2 !important; position:relative !important; overflow:hidden !important; border-radius:10px !important; min-height:0 !important; margin:0 !important; } #drakoCfgBar .dcfg-uni-modal[data-show="fps"] .dfps-cell-gameart .dfps-gameart-fg, html:not([data-theme="dark"]) #drakoCfgBar .dcfg-uni-modal[data-show="fps"] .dfps-cell-gameart .dfps-gameart-fg { position:absolute !important; inset:0 !important; width:100% !important; height:100% !important; object-fit:cover !important; object-position:center 25% !important; border-radius:10px !important; display:block !important; } #drakoCfgBar .dcfg-uni-modal[data-show="fps"] .dfps-cell-fps { grid-column:2 !important; grid-row:1 !important; margin:0 !important; } #drakoCfgBar .dcfg-uni-modal[data-show="fps"] .dfps-cell-bl { grid-column:3 !important; grid-row:1 !important; margin:0 !important; } #drakoCfgBar .dcfg-uni-modal[data-show="fps"] .dfps-meta, html:not([data-theme="dark"]) #drakoCfgBar .dcfg-uni-modal[data-show="fps"] .dfps-meta { grid-column:2 / 4 !important; grid-row:2 !important; display:flex !important; align-items:center !important; gap:14px !important; margin:0 !important; align-self:start !important; } /* rev 07-14 (c): art = STESSA altezza della colonna destra + immagine a riempimento totale. Catena con .dfps-result replicata dal layer vincitore (height:118px, riga ~3200s). */ #drakoCfgBar .dcfg-uni-modal[data-show="fps"] .dfps-result .dfps-cell-gameart { min-height:0 !important; max-height:none !important; height:auto !important; align-self:stretch !important; margin:0 !important; position:relative !important; overflow:hidden !important; } #drakoCfgBar .dcfg-uni-modal[data-show="fps"] .dfps-result .dfps-cell-gameart .dfps-gameart-fg, html:not([data-theme="dark"]) #drakoCfgBar .dcfg-uni-modal[data-show="fps"] .dfps-result .dfps-cell-gameart .dfps-gameart-fg, #drakoCfgBar .dcfg-uni-modal[data-show="fps"] .dfps-result .dfps-cell-gameart img { position:absolute !important; inset:0 !important; width:100% !important; height:100% !important; max-height:none !important; min-height:0 !important; object-fit:cover !important; object-position:center 20% !important; border-radius:10px !important; display:block !important; } /* ==== rev 07-14 (d): nota "Stima indicativa" nell'header del widget FPS (sostituisce il vecchio tag pill "Stima"; la copia in fondo e' stata rimossa dal markup JS). Head grid: icona | titolo (auto) | nota (riempe il resto). */ #drakoCfgBar .dcfg-uni-modal[data-show="fps"] .dfps-head{ grid-template-columns:34px auto minmax(0,1fr)!important; align-items:center!important; } #drakoCfgBar .dcfg-uni-modal[data-show="fps"] .dfps-head .dfps-note, html:not([data-theme="dark"]) #drakoCfgBar .dcfg-uni-modal[data-show="fps"] .dfps-head .dfps-note{ margin:0 0 0 6px!important; padding:7px 11px!important; font-size:11.5px!important; line-height:1.4!important; font-weight:600!important; justify-self:stretch!important; align-items:center!important; } #drakoCfgBar .dcfg-uni-modal[data-show="fps"] .dfps-head .dfps-note .dfps-warn{ width:15px!important; height:14px!important; margin-top:0!important; } @media (max-width:640px){#drakoCfgBar .dcfg-uni-modal[data-show="fps"] .dfps-head{ grid-template-columns:34px 1fr!important; } #drakoCfgBar .dcfg-uni-modal[data-show="fps"] .dfps-head .dfps-note, html:not([data-theme="dark"]) #drakoCfgBar .dcfg-uni-modal[data-show="fps"] .dfps-head .dfps-note{ grid-column:1 / -1!important; grid-row:2!important; margin:10px 0 0!important; }} /* ==== rev 07-14 (f): il regrid hero (3 colonne) vale solo desktop. Su mobile <=640px si torna allo stack a colonna singola: art (altezza fissa), FPS, Bilanciamento, chip-box/meta. Senza questo la colonna art da 250px schiaccia meta a ~16px e i chip sbordano dal modale. */ @media (max-width:640px){#drakoCfgBar .dcfg-uni-modal[data-show="fps"] .dfps-result{ grid-template-columns:1fr!important; grid-template-rows:none!important; } #drakoCfgBar .dcfg-uni-modal[data-show="fps"] .dfps-result .dfps-cell-gameart{ grid-column:1!important; grid-row:auto!important; height:170px!important; min-height:170px!important; } #drakoCfgBar .dcfg-uni-modal[data-show="fps"] .dfps-result .dfps-cell-fps, #drakoCfgBar .dcfg-uni-modal[data-show="fps"] .dfps-result .dfps-cell-bl{ grid-column:1!important; grid-row:auto!important; } #drakoCfgBar .dcfg-uni-modal[data-show="fps"] .dfps-result .dfps-meta, #drakoCfgBar .dcfg-uni-modal[data-show="fps"] .dfps-meta{ grid-column:1!important; grid-row:auto!important; }} /* ==== rev 07-14 (f2): twin light-theme per lo stack mobile (i layer del regrid hanno gemelli html:not([data-theme="dark"]) che battono la media query semplice: qui li pareggiamo). */ @media (max-width:640px){#drakoCfgBar .dcfg-uni-modal[data-show="fps"] .dfps-result, html:not([data-theme="dark"]) #drakoCfgBar .dcfg-uni-modal[data-show="fps"] .dfps-result{ grid-template-columns:1fr!important; grid-template-rows:none!important; } #drakoCfgBar .dcfg-uni-modal[data-show="fps"] .dfps-result .dfps-cell-gameart, html:not([data-theme="dark"]) #drakoCfgBar .dcfg-uni-modal[data-show="fps"] .dfps-result .dfps-cell-gameart{ grid-column:1!important; grid-row:auto!important; height:170px!important; min-height:170px!important; } #drakoCfgBar .dcfg-uni-modal[data-show="fps"] .dfps-result .dfps-cell-fps, html:not([data-theme="dark"]) #drakoCfgBar .dcfg-uni-modal[data-show="fps"] .dfps-result .dfps-cell-fps, #drakoCfgBar .dcfg-uni-modal[data-show="fps"] .dfps-result .dfps-cell-bl, html:not([data-theme="dark"]) #drakoCfgBar .dcfg-uni-modal[data-show="fps"] .dfps-result .dfps-cell-bl{ grid-column:1!important; grid-row:auto!important; } #drakoCfgBar .dcfg-uni-modal[data-show="fps"] .dfps-result .dfps-meta, html:not([data-theme="dark"]) #drakoCfgBar .dcfg-uni-modal[data-show="fps"] .dfps-result .dfps-meta, html:not([data-theme="dark"]) #drakoCfgBar .dcfg-uni-modal[data-show="fps"] .dfps-meta{ grid-column:1!important; grid-row:auto!important; }} /* ==== rev 07-14 (h) DEFINITIVA chip-box CPU/GPU: due card al 50% che riempiono la riga, stile IDENTICO alle altre celle del modale (sfondo trasparente + bordo tema), logo alla dimensione originale (40px, area max 100px). Supera le rev (e)/(g). */ #drakoCfgBar .dcfg-uni-modal[data-show="fps"] .dfps-meta{ display:flex!important; gap:12px!important; align-items:stretch!important; flex-wrap:nowrap!important; } #drakoCfgBar .dcfg-uni-modal[data-show="fps"] .dfps-meta .dfps-chip, html:not([data-theme="dark"]) #drakoCfgBar .dcfg-uni-modal[data-show="fps"] .dfps-meta .dfps-chip{ flex:1 1 0!important; min-width:0!important; display:flex!important; align-items:center!important; gap:14px!important; padding:10px 14px!important; border-radius:10px!important; background:transparent!important; border:1px solid #263a5e!important; } html:not([data-theme="dark"]) #drakoCfgBar .dcfg-uni-modal[data-show="fps"] .dfps-meta .dfps-chip{ border-color:#d4dfec!important; } #drakoCfgBar .dcfg-uni-modal[data-show="fps"] .dfps-meta .dfps-chip .dfps-chip-logo, html:not([data-theme="dark"]) #drakoCfgBar .dcfg-uni-modal[data-show="fps"] .dfps-meta .dfps-chip .dfps-chip-logo{ height:40px!important; width:auto!important; max-width:100px!important; display:block!important; object-fit:contain!important; flex:0 0 auto!important; } #drakoCfgBar .dcfg-uni-modal[data-show="fps"] .dfps-meta .dfps-chip .dfps-chip-name, html:not([data-theme="dark"]) #drakoCfgBar .dcfg-uni-modal[data-show="fps"] .dfps-meta .dfps-chip .dfps-chip-name{ font-size:15px!important; font-weight:800!important; line-height:1.2!important; white-space:nowrap!important; overflow:hidden!important; text-overflow:ellipsis!important; min-width:0!important; color:#fff!important; } html:not([data-theme="dark"]) #drakoCfgBar .dcfg-uni-modal[data-show="fps"] .dfps-meta .dfps-chip .dfps-chip-name{ color:#0f172a!important; } @media (max-width:640px){#drakoCfgBar .dcfg-uni-modal[data-show="fps"] .dfps-meta{ flex-wrap:wrap!important; } #drakoCfgBar .dcfg-uni-modal[data-show="fps"] .dfps-meta .dfps-chip, html:not([data-theme="dark"]) #drakoCfgBar .dcfg-uni-modal[data-show="fps"] .dfps-meta .dfps-chip{ flex:1 1 100%!important; }} /* ==== rev 07-14 (i): header senza icona gamepad (titolo | nota) e nota SEMPRE su una riga (nowrap + ellipsis; testo integrale nel title). */ #drakoCfgBar .dcfg-uni-modal[data-show="fps"] .dfps-head, html:not([data-theme="dark"]) #drakoCfgBar .dcfg-uni-modal[data-show="fps"] .dfps-head{ grid-template-columns:auto minmax(0,1fr)!important; } #drakoCfgBar .dcfg-uni-modal[data-show="fps"] .dfps-head .dfps-note, html:not([data-theme="dark"]) #drakoCfgBar .dcfg-uni-modal[data-show="fps"] .dfps-head .dfps-note{ min-width:0!important; flex-wrap:nowrap!important; } #drakoCfgBar .dcfg-uni-modal[data-show="fps"] .dfps-head .dfps-note span, html:not([data-theme="dark"]) #drakoCfgBar .dcfg-uni-modal[data-show="fps"] .dfps-head .dfps-note span{ display:block!important; min-width:0!important; white-space:nowrap!important; overflow:hidden!important; text-overflow:ellipsis!important; } @media (max-width:640px){#drakoCfgBar .dcfg-uni-modal[data-show="fps"] .dfps-head, html:not([data-theme="dark"]) #drakoCfgBar .dcfg-uni-modal[data-show="fps"] .dfps-head{ grid-template-columns:1fr!important; }} /* ==== rev 07-14 (l): nome chip in Montserrat 600 14px e MAI troncato: niente ellipsis, se non ci sta va a capo (il box cresce e la game-art segue via grid stretch). Font self-hosted. */ @font-face{ font-family:'Montserrat'; font-style:normal; font-weight:600; font-display:swap; src:url('../fonts/montserrat-600-latin.woff2') format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } #drakoCfgBar .dcfg-uni-modal[data-show="fps"] .dfps-meta .dfps-chip .dfps-chip-name, html:not([data-theme="dark"]) #drakoCfgBar .dcfg-uni-modal[data-show="fps"] .dfps-meta .dfps-chip .dfps-chip-name{ font-family:'Montserrat','Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif!important; font-size:14px!important; font-weight:600!important; line-height:1.25!important; white-space:normal!important; overflow:visible!important; text-overflow:clip!important; } /* ==== rev 07-14 (m): metriche chip per far stare su UNA riga anche il nome piu' lungo ("GeForce RTX 5070 Ti" @ Montserrat 600 14px ~160px): logo 36px (RTX ~79px), padding 10/12, gap 10 -> ~165px per il testo. */ #drakoCfgBar .dcfg-uni-modal[data-show="fps"] .dfps-meta .dfps-chip, html:not([data-theme="dark"]) #drakoCfgBar .dcfg-uni-modal[data-show="fps"] .dfps-meta .dfps-chip{ padding:10px 12px!important; gap:10px!important; } #drakoCfgBar .dcfg-uni-modal[data-show="fps"] .dfps-meta .dfps-chip .dfps-chip-logo, html:not([data-theme="dark"]) #drakoCfgBar .dcfg-uni-modal[data-show="fps"] .dfps-meta .dfps-chip .dfps-chip-logo{ height:36px!important; } /* ==== rev 07-14 (n): il contain letterboxava il logo (drawn ~90px) in un box da 100px lasciando un vuoto fantasma; 92px ancorati a sinistra liberano gli ultimi px che servivano a "GeForce RTX 5070 Ti" per stare su una riga. */ #drakoCfgBar .dcfg-uni-modal[data-show="fps"] .dfps-meta .dfps-chip .dfps-chip-logo, html:not([data-theme="dark"]) #drakoCfgBar .dcfg-uni-modal[data-show="fps"] .dfps-meta .dfps-chip .dfps-chip-logo{ max-width:92px!important; object-position:left center!important; } /* ==== rev 07-14 (o): totale barra = STESSO stile/font del prezzo scheda (.drako-pi-price: Oswald 700 28px). Family/peso a tutti i breakpoint; la size 28px solo desktop largo (i breakpoint stretti tengono le loro). */ html body #drakoCfgBar.dcfg-bar.is-visible .dcfg-bar-total, html body #drakoCfgBar.dcfg-bar .dcfg-bar-total, #drakoCfgBar .dcfg-bar-total{ font-family:'Oswald','Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif!important; font-weight:700!important; } @media (min-width:1351px){html body #drakoCfgBar.dcfg-bar.is-visible .dcfg-bar-total, html body #drakoCfgBar.dcfg-bar .dcfg-bar-total, #drakoCfgBar .dcfg-bar-total{ font-size:28px!important; line-height:1.15!important; }} /* ==== cleanup 2026-07-14: guardie per elementi legacy ancora nel markup. .dcfg-cnav-fps-pop = vecchio popup hover del badge FPS (il click ora apre il modale della barra): TUTTI i suoi layer decorativi sono stati rimossi, deve solo restare invisibile finche' il markup non verra' tolto. */ #drakoCfgCustomizer .dcfg-cnav-fps-pop{ display:none!important; } /* ==== rev 07-15b: la nav/rail sticky del configuratore si aggancia sotto la barra takeover quando questa e' visibile (offset dinamico misurato dal posizionatore inline via --dcfg-cnav-top; fallback 88px = sotto l'header). */ #drakoCfgCustomizer .dcfg-cnav{ top:var(--dcfg-cnav-top, 88px)!important; } /* ==== rev 07-15c FPS-HERO (RESTORE: rimuovere QUESTO blocco fino a fine file + DCFG_FPS_HERO=false in drako_pc_configurator_embed.js; backup completi in *.bak_pre_fpshero20260715). Desktop: FPS solo nella card rail (chip barra nascosto, grid barra a 5 colonne); card amplificata con fasce colore e flash al cambio. Mobile <=768: chip barra INVARIATO. */ @media (min-width:769px){ html body #drakoCfgBar.dcfg-bar.is-visible .dcfg-bar-fps{ display:none !important; } html body #drakoCfgBar.dcfg-bar.is-visible .dcfg-bar-main{ grid-template-columns:auto minmax(225px,.95fr) minmax(285px,1.2fr) auto auto !important; } } #drakoCfgCustomizer .dcfg-cnav-fps-num{ font-size:44px !important; letter-spacing:-0.5px !important; } #drakoCfgCustomizer .dcfg-cnav-fps-unit{ font-size:14px !important; } /* fasce colore per tier (light) */ /* 14/08/2026 - il badge grande è di UN colore solo: la sigla "FPS" segue la fascia insieme al numero, non resta blu. Le tinte sono più profonde di prima perché ora le porta anche un testo da 14px: #16a34a su bianco faceva 3,3:1, sotto la soglia di leggibilità; questi stanno tutti sopra 5:1 e restano distinguibili fra loro. I due verdi storici (#16a34a e #43a047) erano già quasi identici a occhio: diventano un verde solo, la differenza fra 111 e 150 fps la dice il numero. */ #drakoCfgCustomizer .dcfg-cnav-fps-badge.is-t144 .dcfg-cnav-fps-num, #drakoCfgCustomizer .dcfg-cnav-fps-badge.is-t144 .dcfg-cnav-fps-unit{ color:#15803d !important; } #drakoCfgCustomizer .dcfg-cnav-fps-badge.is-t100 .dcfg-cnav-fps-num, #drakoCfgCustomizer .dcfg-cnav-fps-badge.is-t100 .dcfg-cnav-fps-unit{ color:#15803d !important; } #drakoCfgCustomizer .dcfg-cnav-fps-badge.is-t60 .dcfg-cnav-fps-num, #drakoCfgCustomizer .dcfg-cnav-fps-badge.is-t60 .dcfg-cnav-fps-unit{ color:#b45309 !important; } #drakoCfgCustomizer .dcfg-cnav-fps-badge.is-t30 .dcfg-cnav-fps-num, #drakoCfgCustomizer .dcfg-cnav-fps-badge.is-t30 .dcfg-cnav-fps-unit{ color:#b91c1c !important; } /* Nessuna fascia = dato mancante (N/A): la sigla non torna blu, resta neutra. Specificità più bassa delle quattro regole qui sopra, quindi non le scavalca. */ #drakoCfgCustomizer .dcfg-cnav-fps-unit{ color:#5f6774 !important; } /* ...e nemmeno il numero resta verde: senza dato scrive "N/A", che in verde sembrava un risultato buono. Grigio tutt'e due, come la sigla. */ #drakoCfgCustomizer .dcfg-cnav-fps-badge:not(.is-t144):not(.is-t100):not(.is-t60):not(.is-t30) .dcfg-cnav-fps-num{ color:#5f6774 !important; } /* twins dark */ html[data-theme="dark"] #drakoCfgCustomizer .dcfg-cnav-fps-badge.is-t144 .dcfg-cnav-fps-num, html[data-theme="dark"] #drakoCfgCustomizer .dcfg-cnav-fps-badge.is-t144 .dcfg-cnav-fps-unit{ color:#4ade80 !important; } html[data-theme="dark"] #drakoCfgCustomizer .dcfg-cnav-fps-badge.is-t100 .dcfg-cnav-fps-num, html[data-theme="dark"] #drakoCfgCustomizer .dcfg-cnav-fps-badge.is-t100 .dcfg-cnav-fps-unit{ color:#66bb6a !important; } html[data-theme="dark"] #drakoCfgCustomizer .dcfg-cnav-fps-badge.is-t60 .dcfg-cnav-fps-num, html[data-theme="dark"] #drakoCfgCustomizer .dcfg-cnav-fps-badge.is-t60 .dcfg-cnav-fps-unit{ color:#ffb74d !important; } html[data-theme="dark"] #drakoCfgCustomizer .dcfg-cnav-fps-badge.is-t30 .dcfg-cnav-fps-num, html[data-theme="dark"] #drakoCfgCustomizer .dcfg-cnav-fps-badge.is-t30 .dcfg-cnav-fps-unit{ color:#ef5350 !important; } /* flash al cambio valore */ @keyframes dcfgFpsBump{ 0%{transform:scale(1)} 30%{transform:scale(1.05)} 100%{transform:scale(1)} } #drakoCfgCustomizer .dcfg-cnav-fps-badge.is-bump{ animation:dcfgFpsBump .45s cubic-bezier(.22,1,.36,1); box-shadow:0 0 0 3px rgba(28,99,171,.18); transition:box-shadow .6s ease .2s; } @media (prefers-reduced-motion: reduce){ #drakoCfgCustomizer .dcfg-cnav-fps-badge.is-bump{ animation:none !important; box-shadow:none !important; } } /* ==== rev 07-15d BOX-STD (RESTORE: rimuovere questo blocco fino a fine file). La scheda iniziale del prodotto configuratore torna alle DIMENSIONI della scheda prodotto standard: colonna info 500px (era 430), niente cornice/ padding propri (la scheda standard poggia nuda sul .content bianco), margin-top 0 (il -46px serviva ad avvicinarla alla barra sempre-visibile, che ora in cima e' nascosta) e niente spazio extra sopra la foto (il 34px serviva sotto la barra). Restano le differenze di CONTENUTO del cfg (nostick, stock/askbot nascosti, pannello riepilogo). */ .drako-pi-wrapper.dcfg-on{ margin-top:0 !important; padding:0 !important; border:0 !important; border-radius:0 !important; box-shadow:none !important; background:transparent !important; } html[data-theme="dark"] .drako-pi-wrapper.dcfg-on{ background:transparent !important; border:0 !important; } .drako-pi-wrapper.dcfg-on .drako-pi-info{ width:500px !important; } @media (max-width:900px){ .drako-pi-wrapper.dcfg-on .drako-pi-info{ width:auto !important; } } .drako-pi-wrapper.dcfg-on .drako-pi-main-img{ padding:16px !important; } /* pixel-true: lo standard ha 16px uniformi */ /* ==== rev 07-15f CARD-WRAPPER (RESTORE: rimuovere questo blocco). La card bianca avvolge SOLO il blocco prodotto iniziale (feedback utente): il .content resta trasparente sulle pagine cfg (regola 10-lug in stylesheet.css) cosi' le sezioni del configuratore sotto restano separate sul grigio. I margini negativi estendono la card ai bordi del .content (padding 20) -> larghezza visiva 1480 = identica alla card della scheda standard; il padding interno 20 mantiene le colonne a 908/500. */ .drako-pi-wrapper.dcfg-on{ background:#fff !important; border-radius:8px !important; padding:20px !important; margin:-20px -20px 24px !important; } html[data-theme="dark"] .drako-pi-wrapper.dcfg-on{ background:var(--drako-bg-surface, #22262e) !important; } @media (max-width:900px){ .drako-pi-wrapper.dcfg-on{ margin:-20px -20px 16px !important; padding:14px !important; } } /* ==== rev 07-15g ALLINEAMENTO BLOCCHI (RESTORE: rimuovere questo blocco). La card prodotto (07-15f) si estende ai bordi del .content con margini -20px; il configuratore sotto restava largo 1440 dentro il padding -> 20px di rientro per lato (feedback utente con screenshot). Stessi margini negativi anche al customizer: tutti i blocchi a 1480, bordi allineati. */ #drakoCfgCustomizer{ margin-left:-20px !important; margin-right:-20px !important; } /* =========================================================================== CONFIGURATORE SENZA BUILD GENERATA La scheda del prodotto base mostrava prezzo, rate e carrello di una configurazione che il cliente non aveva chiesto (i default del prodotto). Finche' non genera, quei dati sono N/A e l'acquisto e' spento. =========================================================================== */ /* Prezzo N/A: stesso posto e stesso peso del prezzo vero, ma spento - il verde da prezzo attivo su un "N/A" sembrava un errore di rendering. */ .drako-pi-price-na { color: #94a3b8 !important; font-weight: 600; } /* Fascia sulla foto di esempio. Sta DENTRO .drako-pi-main-img (position relative gia' impostata dal badge "Novita'"), in basso per non coprire il nastro d'angolo. */ /* Il blocco copre TUTTA la foto e centra il pulsante: e' li' che guarda chi apre la pagina, non sulla barra in cima. Velo leggero perche' la foto di esempio si deve continuare a vedere - deve leggersi come "ecco cosa otterrai". */ .drako-pi-cfg-empty { position: absolute; inset: 0; z-index: 4; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 16px; background: rgba(12, 34, 58, .45); color: #fff; text-align: center; border-radius: 8px; } .drako-pi-cfg-empty-tag { position: absolute; left: 0; right: 0; bottom: 12px; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: #f5b301; font-weight: 700; } .drako-pi-cfg-empty-txt { font-size: 14px; font-weight: 600; line-height: 1.35; text-shadow: 0 1px 4px rgba(0, 0, 0, .5); } /* Pulsante centrale: stessa tinta e stesso peso del "Genera la build" della barra, perche' fa esattamente la stessa cosa. */ .drako-pi-cfg-empty-go { appearance: none; border: 0; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-width: 210px; padding: 14px 28px; background: #ffd23f; color: #23303e; font-size: 16px; font-weight: 800; border-radius: 12px; box-shadow: 0 8px 22px rgba(0, 0, 0, .3); transition: transform .15s, background .15s; } .drako-pi-cfg-empty-go:hover { transform: translateY(-1px); background: #ffdb63; } .drako-pi-cfg-empty-go:disabled { cursor: default; transform: none; } /* Caricamento: il testo resta (dice cosa sta succedendo) e accanto gira una rotella. Sostituire l'etichetta con la sola rotella lasciava il dubbio se il clic fosse stato preso. */ .drako-pi-cfg-empty-go-load { display: none; } .drako-pi-cfg-empty-go.is-loading .drako-pi-cfg-empty-go-lbl::after { content: " in corso..."; } .drako-pi-cfg-empty-go.is-loading .drako-pi-cfg-empty-go-load { display: block; width: 17px; height: 17px; border: 2px solid rgba(35, 48, 62, .3); border-top-color: #23303e; border-radius: 50%; animation: drakoPiCfgSpin .7s linear infinite; } @keyframes drakoPiCfgSpin { to { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce) { .drako-pi-cfg-empty-go.is-loading .drako-pi-cfg-empty-go-load { animation: none; } } @media (max-width: 600px) { .drako-pi-cfg-empty-go { min-width: 0; padding: 12px 20px; font-size: 15px; } .drako-pi-cfg-empty-txt { font-size: 13px; } } /* Carrello spento: resta al suo posto, dichiaratamente non premibile. */ .drako-pi-add-btn.is-disabled, .drako-pi-add-btn[disabled] { background: #cbd5e1 !important; color: #64748b !important; cursor: not-allowed; box-shadow: none !important; } .drako-pi-add-btn.is-disabled svg { opacity: .6; } /* Personalizzatore BLOCCATO: nessuna build generata, quindi non c'e' ancora niente da personalizzare. Si vede (fa capire cosa si potra' fare) ma non si tocca. La guardia funzionale sta in selectOption(): pointer-events non ferma la tastiera, perche' le opzioni sono