/* ========================================================= DGS V19 – FINAL PRO VERSION (Rounded, Animated, Trust) ========================================================= */ @import url(‘https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap’); :root { –xbox-brand: #107c10; –ps-brand: #0070d1; –pc-brand: #7c3aed; –accent: #f97316; –telegram: #229ED9; –bg-body: #f1f5f9; –bg-card: #ffffff; –text-dark: #0f172a; –text-grey: #64748b; –radius-xl: 26px; –radius-md: 16px; –shadow-soft: 0 10px 30px -5px rgba(0, 0, 0, 0.06); –shadow-hover: 0 20px 40px -5px rgba(0, 0, 0, 0.12); } #dgs-home-v16 { font-family: ‘Inter’, sans-serif !important; background-color: var(–bg-body); color: var(–text-dark); padding-bottom: 60px; overflow-x: hidden; } /* ========================================================= 1) HERO SECTION ========================================================= */ #dgs-home-v16 .dgs-hero-new { position: relative; background-color: #1e293b; /* Sfondo con pattern sottile */ background-image: radial-gradient(circle at 10% 20%, rgba(0, 112, 209, 0.25) 0%, transparent 40%), radial-gradient(circle at 90% 80%, rgba(16, 124, 16, 0.2) 0%, transparent 40%); color: #fff; padding: 80px 20px 150px; text-align: center; border-bottom-left-radius: 50px; border-bottom-right-radius: 50px; margin-bottom: 40px; box-shadow: 0 25px 50px rgba(0,0,0,0.15); } #dgs-home-v16 .dgs-hero-new h2 { font-size: clamp(2.2rem, 5vw, 3.8rem); font-weight: 900; color: #fff; margin-bottom: 15px; letter-spacing: -1px; } #dgs-home-v16 .dgs-hero-new p { color: #cbd5e1; font-size: 1.15rem; max-width: 650px; margin: 0 auto; } /* BADGES HERO */ #dgs-home-v16 .dgs-hero-badges { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; margin: 30px 0 40px; } #dgs-home-v16 .dgs-h-badge { display: inline-flex; align-items: center; gap: 8px; background: rgba(255,255,255,0.1); padding: 10px 22px; border-radius: 50px; border: 1px solid rgba(255,255,255,0.15); font-size: 13px; font-weight: 700; color: #fff; backdrop-filter: blur(5px); text-decoration: none; transition: .3s; } /* Hover specifico per il link telegram */ #dgs-home-v16 a.dgs-h-badge:hover { background: var(–telegram); border-color: var(–telegram); transform: translateY(-3px); } #dgs-home-v16 .dgs-h-badge svg { width: 18px; height: 18px; fill: currentColor; } /* SEARCH BAR */ #dgs-home-v16 .dgs-h-search { max-width: 650px; margin: 0 auto; } #dgs-home-v16 .dgs-h-search input[type=”search”]{ width: 100% !important; padding: 22px 30px !important; border-radius: 100px !important; /* Sfondo scuro semitrasparente per far risaltare il bianco */ background: rgba(0,0,0,0.4) !important; border: 2px solid rgba(255,255,255,0.2) !important; color: #fff !important; /* TESTO BIANCO BRILLANTE */ font-size: 18px !important; font-weight: 700 !important; box-shadow: 0 10px 30px rgba(0,0,0,0.2) !important; transition: .3s; text-align: center; } #dgs-home-v16 .dgs-h-search input[type=”search”]::placeholder { color: rgba(255, 255, 255, 0.9) !important; /* Placeholder bianco visibile */ font-weight: 500; } #dgs-home-v16 .dgs-h-search input[type=”search”]:focus { background: rgba(0,0,0,0.6) !important; border-color: #fff !important; box-shadow: 0 0 25px rgba(255,255,255,0.3) !important; } /* ========================================================= 2) HUB PIATTAFORME ========================================================= */ #dgs-home-v16 .dgs-hub-container { max-width: 1240px; margin: -90px auto 40px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 25px; padding: 0 20px; position: relative; z-index: 5; } #dgs-home-v16 .dgs-hub-box { border-radius: var(–radius-xl); padding: 35px 30px; color: #fff; box-shadow: 0 20px 40px rgba(0,0,0,0.2); position: relative; overflow: hidden; transition: transform 0.3s ease; } #dgs-home-v16 .dgs-hub-box:hover { transform: translateY(-7px); } /* Gradienti */ #dgs-home-v16 .dgs-hub-box.xbox { background: linear-gradient(145deg, #107c10 0%, #15803d 100%); } #dgs-home-v16 .dgs-hub-box.ps { background: linear-gradient(145deg, #005bc4 0%, #1d4ed8 100%); } #dgs-home-v16 .dgs-hub-box.pc { background: linear-gradient(145deg, #6b21a8 0%, #7e22ce 100%); } #dgs-home-v16 .dgs-hub-box h3 { font-weight: 900; font-size: 24px; margin-bottom: 20px; display: flex; align-items: center; gap: 12px; color: #fff !important; } #dgs-home-v16 .dgs-hub-box h3 svg { width: 32px; height: 32px; fill: #fff; } #dgs-home-v16 .dgs-link-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 25px; } #dgs-home-v16 .dgs-item-link { display: flex; justify-content: space-between; align-items: center; background: rgba(255,255,255,0.2); padding: 12px 18px; border-radius: var(–radius-md); text-decoration: none; color: #fff !important; font-weight: 700; font-size: 14px; transition: .2s ease; backdrop-filter: blur(4px); } #dgs-home-v16 .dgs-item-link:hover { background: #fff; color: #111 !important; transform: translateX(5px); } #dgs-home-v16 .dgs-how-chips { display: flex; gap: 8px; flex-wrap: wrap; } #dgs-home-v16 .dgs-chip { background: rgba(0,0,0,0.25); padding: 8px 14px; border-radius: 50px; font-size: 11px; font-weight: 700; color: #fff !important; border: 1px solid rgba(255,255,255,0.2); line-height: 1.2; } #dgs-home-v16 .dgs-chip:hover { background: #fff; color: #111 !important; } /* ========================================================= 3) TRUST CARDS (4 CARD FEATURE) – RIDISEGNATE ========================================================= */ #dgs-home-v16 .dgs-info-sec { max-width: 1240px; margin: 50px auto; padding: 0 20px; } #dgs-home-v16 .dgs-feats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; } #dgs-home-v16 .dgs-feat-box { background: #fff; padding: 30px 20px; border-radius: var(–radius-xl); box-shadow: var(–shadow-soft); text-align: center; border: 1px solid #e2e8f0; transition: all 0.3s ease; position: relative; display: flex; flex-direction: column; justify-content: center; align-items: center; height: 100%; } /* Hover forte per distinguersi */ #dgs-home-v16 .dgs-feat-box:hover { transform: translateY(-8px); box-shadow: var(–shadow-hover); border-color: #cbd5e1; } #dgs-home-v16 .dgs-feat-box i { font-size: 32px; color: var(–accent); margin-bottom: 15px; background: #fff7ed; width: 60px; height: 60px; line-height: 60px; border-radius: 50%; display: inline-block; } #dgs-home-v16 .dgs-feat-box strong { display: block; font-size: 16px; font-weight: 900; color: var(–text-dark); margin-bottom: 8px; line-height: 1.2; } #dgs-home-v16 .dgs-feat-box p { font-size: 13px; color: var(–text-grey); line-height: 1.4; margin: 0; } /* Stile speciale per il bottone Telegram nella card */ #dgs-home-v16 .dgs-feat-btn { margin-top: 10px; background: var(–telegram); color: #fff !important; font-size: 11px; font-weight: 800; padding: 6px 14px; border-radius: 50px; text-decoration: none; display: inline-block; } /* ========================================================= 4) RECENSIONI MOBILE ========================================================= */ #dgs-home-v16 .dgs-reviews-mobile { display: none; /* Default hidden */ margin: 0 20px 40px; background: #fff; padding: 25px; border-radius: var(–radius-xl); box-shadow: var(–shadow-soft); text-align: center; } /* ========================================================= 5) PRODOTTI ========================================================= */ #dgs-home-v16 ul.products.row { display: grid !important; grid-template-columns: repeat(6, minmax(0, 1fr)) !important; gap: 20px !important; max-width: 1240px !important; margin: 0 auto !important; padding: 0 20px !important; } #dgs-home-v16 ul.products.row > li.col { width: 100% !important; padding: 0 !important; margin: 0 !important; max-width: none !important; } #dgs-home-v16 li.product .col-inner { background: #fff; border-radius: var(–radius-xl) !important; box-shadow: var(–shadow-soft); border: 1px solid #f1f5f9; transition: all .3s cubic-bezier(0.25, 0.8, 0.25, 1); overflow: hidden !important; position: relative; height: 100%; } #dgs-home-v16 li.product:hover .col-inner { transform: translateY(-8px); box-shadow: var(–shadow-hover); border-color: #e2e8f0; } #dgs-home-v16 li.product .box-image, #dgs-home-v16 li.product .box-image img { border-radius: var(–radius-xl) var(–radius-xl) 0 0 !important; width: 100%; } #dgs-home-v16 .product-title { font-size: 14px !important; font-weight: 700; color: var(–text-dark) !important; padding: 10px 10px 0; text-align: center; margin-top: 5px !important; line-height: 1.3; } #dgs-home-v16 .price { text-align: center; color: var(–ps-brand) !important; font-weight: 900; font-size: 17px !important; padding-bottom: 15px; } #dgs-home-v16 .products .add_to_cart_button, #dgs-home-v16 .products .button { width: 90% !important; margin: 0 auto 15px !important; border-radius: 50px !important; display: block !important; text-align: center !important; background-color: var(–text-dark) !important; color: #fff !important; font-weight: 700 !important; padding: 10px !important; } #dgs-home-v16 li.product:hover .add_to_cart_button { background-color: var(–accent) !important; } /* ========================================================= 6) HEADER SEZIONI ========================================================= */ #dgs-home-v16 .dgs-header-sec { display: flex; justify-content: space-between; align-items: center; max-width: 1240px; margin: 60px auto 25px; padding: 0 20px 15px; border-bottom: 2px solid #e2e8f0; } #dgs-home-v16 .dgs-header-sec h2 { display: flex; align-items: center; gap: 10px; font-weight: 900; font-size: clamp(20px, 3vw, 26px); margin: 0; color: var(–text-dark); } #dgs-home-v16 .dgs-btn-top { padding: 8px 20px; border: 2px solid var(–text-dark); border-radius: 50px; font-size: 12px; font-weight: 800; text-decoration: none; color: var(–text-dark) !important; transition: .2s ease; } #dgs-home-v16 .dgs-btn-top:hover { background: var(–text-dark); color: #fff !important; } #dgs-home-v16 .dgs-footer-btn-wrap { text-align: center; margin: 30px 0 60px; } #dgs-home-v16 .dgs-btn-footer { display: inline-block; padding: 14px 45px; background: var(–text-dark); color: #fff !important; border-radius: 50px; font-weight: 800; text-decoration: none; box-shadow: 0 10px 20px rgba(0,0,0,0.1); transition: .3s; } #dgs-home-v16 .dgs-btn-footer:hover { transform: translateY(-3px); box-shadow: 0 15px 30px rgba(0,0,0,0.15); } /* ========================================================= RESPONSIVE ========================================================= */ @media (max-width: 1100px){ #dgs-home-v16 ul.products.row{ grid-template-columns: repeat(3, minmax(0,1fr)) !important; } } @media (max-width: 768px){ #dgs-home-v16 .dgs-hub-container{ grid-template-columns: 1fr; margin-top: -60px; } #dgs-home-v16 .dgs-reviews-mobile{ display: block; } /* VISIBILE SOLO SU MOBILE */ #dgs-home-v16 .dgs-feats-grid{ grid-template-columns: repeat(2, 1fr) !important; } #dgs-home-v16 ul.products.row{ grid-template-columns: repeat(2, minmax(0,1fr)) !important; padding: 0 10px !important; gap: 10px !important; } #dgs-home-v16 .dgs-hero-new { border-radius: 0 0 40px 40px; } #dgs-home-v16 .dgs-feat-box { padding: 20px 10px; } } document.addEventListener(“DOMContentLoaded”, () => { const counters = document.querySelectorAll(“.dgs-counter”); const observer = new IntersectionObserver((entries, observer) => { entries.forEach(entry => { if (entry.isIntersecting) { const counter = entry.target; const target = +counter.getAttribute(“data-target”); const duration = 2000; // ms const increment = target / (duration / 20); let current = 0; const updateCounter = () => { current += increment; if (current = 10000 ? “” : “”); // Format simple } }; updateCounter(); observer.unobserve(counter); } }); }, { threshold: 0.5 }); counters.forEach(c => observer.observe(c)); });