/* * PCSUIT — REDESIGN 2026-04-30 * Bundle CSS deployabile per tema bionic_shoes1 (PrestaShop 1.7.6.9) * * Append questo blocco a: * themes/bionic_shoes1/assets/css/custom.css * * Marker BEGIN/END per identificazione e rimozione futura. * * Fonts richiesti (caricare nel del tema, vedi snippet header-fonts.html): * - Saira Condensed (500-900) * - JetBrains Mono (400, 500, 700) * - Poppins (gia caricato dal tema) * * Sezioni: * - IMPACT PASS (topbar, header, body grid) * - HERO SLIDER (.pcs-hero) — richiede markup overlay (vedi managerblock-hero-overlay.html) * - DEPLOYMENT BAY (#shoes-category-lists) — richiede edit managerblock id=4 * - SOLUTIONS GRID (.featured-products) — solo CSS * - FOOTER PATTERN (#footer .dor-footer-wrapper) — solo CSS * * Reversibile: rimuovere blocco tra i marker BEGIN/END. */ /* === PCSUIT_REDESIGN_2026 :: BEGIN === */ /* ================================================================ PCSUIT — IMPACT PASS 2026-04-29 Rifinitura homepage: hero piu leggibile, categorie piu cliccabili, griglia prodotti piu densa e header meno pesante. ================================================================ */ :root { --pc-ink: #071A2C; --pc-paper: #F7FAFC; --pc-line: #D9E2EA; --pc-shadow-clean: 0 18px 48px rgba(0, 37, 68, 0.12); } html body { background-color: var(--pc-paper) !important; background-image: linear-gradient(rgba(0, 92, 169, 0.035) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 92, 169, 0.035) 1px, transparent 1px) !important; background-size: 32px 32px !important; } html body #topbar, html body #dor-topbar01, html body #dor-topbar01 .dor-topbar-inner { background: var(--pc-yellow) !important; min-height: 28px !important; border: 0 !important; } html body #topbar .top-links { display: flex !important; align-items: center !important; justify-content: flex-end !important; gap: 0 !important; margin: 0 !important; } html body #topbar .top-menu-item a { color: var(--pc-ink) !important; font-family: 'JetBrains Mono', ui-monospace, monospace !important; font-size: 10px !important; font-weight: 700 !important; letter-spacing: 0.02em !important; line-height: 28px !important; padding: 0 13px !important; text-transform: uppercase !important; } html body #topbar .top-menu-item + .top-menu-item a { border-left: 1px solid rgba(0, 37, 68, 0.28) !important; } html body #header, html body #dor-header02, html body .header-top { background: rgba(0, 37, 68, 0.96) !important; border-bottom: 1px solid rgba(201, 202, 0, 0.46) !important; box-shadow: 0 12px 34px rgba(0, 37, 68, 0.22) !important; } html body .dor-main-logo .logo { max-height: 58px !important; width: auto !important; } html body .nav.navbar-nav.megamenu > li > a { color: #F6FAFE !important; font-family: 'Saira Condensed', 'Poppins', sans-serif !important; font-size: 14px !important; font-weight: 700 !important; letter-spacing: 0.055em !important; padding-top: 27px !important; padding-bottom: 27px !important; } html body .nav.navbar-nav.megamenu > li > a:hover, html body .nav.navbar-nav.megamenu > li.open > a { color: var(--pc-yellow) !important; } /* ================================================================ PCSUIT — HERO SLIDER (custom PC build) Stile cinematografico: media full-bleed, overlay diagonale, testo bottom-left con tag mono + titolo display + CTA tactical. ================================================================ */ @keyframes pcsHeroFadeUp { from { opacity: 0; transform: translateY(28px); filter: blur(8px); } 60% { opacity: 1; filter: blur(0); } to { opacity: 1; transform: translateY(0); filter: blur(0); } } @keyframes pcsHeroFlicker { 0%, 100% { opacity: 0.95; } 4% { opacity: 0.6; } 6% { opacity: 0.95; } 20% { opacity: 0.95; } 24% { opacity: 0.55; } 26% { opacity: 0.95; } } @keyframes pcsHeroDot { 0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(28, 184, 92, 0.55); } 50% { opacity: 0.6; box-shadow: 0 0 0 5px rgba(28, 184, 92, 0); } } @keyframes pcsHeroScan { 0% { transform: translateY(-15%); opacity: 0; } 10% { opacity: 0.55; } 90% { opacity: 0.55; } 100% { transform: translateY(115%); opacity: 0; } } @keyframes pcsHeroImgZoom { from { transform: scale(1.05); } to { transform: scale(1); } } html body #dor-homeslider.pcs-hero, html body #dor-homeslider { position: relative !important; display: block !important; height: clamp(440px, 56vw, 680px) !important; min-height: clamp(440px, 56vw, 680px) !important; background: #02101D !important; border-bottom: 0 !important; isolation: isolate !important; overflow: hidden !important; } /* === Media layer === */ html body .pcs-hero .pcs-hero__media { position: absolute !important; inset: 0 !important; z-index: 0 !important; overflow: hidden !important; } html body .pcs-hero .pcs-hero__image { width: 100% !important; height: 100% !important; min-height: 100% !important; max-height: none !important; object-fit: cover !important; object-position: center 38% !important; filter: saturate(1.08) contrast(1.10) brightness(0.78) !important; animation: pcsHeroImgZoom 14s ease-out forwards !important; display: block !important; } /* Grid HUD pattern overlay */ html body .pcs-hero .pcs-hero__grid { position: absolute !important; inset: 0 !important; background-image: linear-gradient(rgba(82, 224, 255, 0.06) 1px, transparent 1px), linear-gradient(90deg, rgba(82, 224, 255, 0.06) 1px, transparent 1px) !important; background-size: 48px 48px, 48px 48px !important; -webkit-mask-image: radial-gradient(ellipse 90% 100% at 50% 50%, black 50%, transparent 100%) !important; mask-image: radial-gradient(ellipse 90% 100% at 50% 50%, black 50%, transparent 100%) !important; pointer-events: none !important; } /* Slow vertical scan-line */ html body .pcs-hero .pcs-hero__scan { position: absolute !important; inset: 0 !important; background: linear-gradient(180deg, transparent 40%, rgba(82, 224, 255, 0.18) 50%, transparent 60%) !important; background-size: 100% 220px !important; background-repeat: no-repeat !important; animation: pcsHeroScan 9s ease-in-out infinite !important; pointer-events: none !important; mix-blend-mode: screen !important; } /* Diagonal overlay for legibility (dark from bottom-left, lighter toward top-right) */ html body .pcs-hero .pcs-hero__overlay { position: absolute !important; inset: 0 !important; background: linear-gradient(110deg, rgba(2, 16, 29, 0.95) 0%, rgba(2, 16, 29, 0.70) 28%, rgba(2, 16, 29, 0.20) 55%, rgba(2, 16, 29, 0.05) 100%), linear-gradient(180deg, rgba(2, 16, 29, 0.40) 0%, transparent 30%, transparent 60%, rgba(2, 16, 29, 0.55) 100%), radial-gradient(ellipse 60% 50% at 18% 80%, rgba(0, 92, 169, 0.25), transparent 70%) !important; pointer-events: none !important; } /* Corner brackets (tactical UI) */ html body .pcs-hero .pcs-hero__corner { position: absolute !important; width: 44px !important; height: 44px !important; z-index: 2 !important; pointer-events: none !important; border-color: var(--pc-yellow) !important; } html body .pcs-hero .pcs-hero__corner--tl { top: 18px; left: 18px; border-top: 2px solid var(--pc-yellow); border-left: 2px solid var(--pc-yellow); } html body .pcs-hero .pcs-hero__corner--tr { top: 18px; right: 18px; border-top: 2px solid var(--pc-yellow); border-right: 2px solid var(--pc-yellow); } html body .pcs-hero .pcs-hero__corner--bl { bottom: 18px; left: 18px; border-bottom: 2px solid var(--pc-yellow); border-left: 2px solid var(--pc-yellow); } html body .pcs-hero .pcs-hero__corner--br { bottom: 18px; right: 18px; border-bottom: 2px solid var(--pc-yellow); border-right: 2px solid var(--pc-yellow); } /* === HUD top-right system status === */ html body .pcs-hero .pcs-hero__hud { position: absolute !important; top: 26px !important; right: 36px !important; z-index: 3 !important; display: inline-flex !important; align-items: center !important; gap: 10px !important; padding: 6px 12px !important; background: rgba(2, 16, 29, 0.55) !important; backdrop-filter: blur(6px) !important; border: 1px solid rgba(82, 224, 255, 0.32) !important; font-family: 'JetBrains Mono', ui-monospace, monospace !important; font-size: 10px !important; font-weight: 700 !important; letter-spacing: 0.24em !important; color: rgba(255, 255, 255, 0.8) !important; text-transform: uppercase !important; animation: pcsHeroFlicker 7s linear infinite !important; } html body .pcs-hero .pcs-hero__hud-dot { display: inline-block !important; width: 7px !important; height: 7px !important; border-radius: 50% !important; background: #1CB85C !important; animation: pcsHeroDot 1.6s ease-in-out infinite !important; } /* === Content (text area, bottom-left) === */ html body .pcs-hero .pcs-hero__content { position: absolute !important; left: clamp(24px, 6vw, 90px) !important; bottom: clamp(40px, 6vw, 88px) !important; z-index: 4 !important; max-width: min(720px, 88vw) !important; display: flex !important; flex-direction: column !important; align-items: flex-start !important; gap: 18px !important; } html body .pcs-hero .pcs-hero__tag { display: inline-flex !important; align-items: center !important; padding: 6px 14px 6px 14px !important; background: rgba(2, 16, 29, 0.78) !important; backdrop-filter: blur(8px) !important; border: 1px solid rgba(255, 224, 68, 0.55) !important; border-left: 3px solid var(--pc-yellow) !important; font-family: 'JetBrains Mono', ui-monospace, monospace !important; font-size: 11px !important; font-weight: 800 !important; letter-spacing: 0.24em !important; color: var(--pc-yellow) !important; text-transform: uppercase !important; animation: pcsHeroFadeUp 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.15s both !important; } html body .pcs-hero .pcs-hero__title { margin: 0 !important; font-family: 'Saira Condensed', 'Poppins', sans-serif !important; font-weight: 900 !important; font-size: clamp(40px, 6.4vw, 88px) !important; line-height: 0.95 !important; letter-spacing: -0.012em !important; text-transform: uppercase !important; color: #FFFFFF !important; text-shadow: 0 8px 36px rgba(0, 0, 0, 0.55) !important; animation: pcsHeroFadeUp 1s cubic-bezier(0.16, 1, 0.3, 1) 0.30s both !important; } html body .pcs-hero .pcs-hero__title em { font-style: italic !important; font-weight: 300 !important; color: rgba(255, 255, 255, 0.86) !important; font-family: 'Poppins', serif !important; letter-spacing: -0.01em !important; } html body .pcs-hero .pcs-hero__title strong { font-weight: 900 !important; display: inline-block !important; background: linear-gradient(105deg, #FFFFFF 0%, #FFFFFF 30%, var(--pc-yellow) 75%, var(--pc-yellow) 100%) !important; -webkit-background-clip: text !important; background-clip: text !important; -webkit-text-fill-color: transparent !important; filter: drop-shadow(0 0 18px rgba(255, 224, 68, 0.30)) !important; } html body .pcs-hero .pcs-hero__sub { margin: 0 !important; font-family: 'Poppins', sans-serif !important; font-weight: 400 !important; font-size: clamp(15px, 1.4vw, 19px) !important; line-height: 1.5 !important; color: rgba(255, 255, 255, 0.78) !important; max-width: 540px !important; animation: pcsHeroFadeUp 1s cubic-bezier(0.16, 1, 0.3, 1) 0.45s both !important; } html body .pcs-hero .pcs-hero__sub span { color: #FFFFFF !important; font-weight: 600 !important; } /* CTA row */ html body .pcs-hero .pcs-hero__cta-row { display: flex !important; align-items: center !important; flex-wrap: wrap !important; gap: clamp(14px, 2vw, 24px) !important; margin-top: 6px !important; animation: pcsHeroFadeUp 1s cubic-bezier(0.16, 1, 0.3, 1) 0.60s both !important; } html body .pcs-hero .pcs-hero__cta { display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 10px !important; padding: 14px 26px !important; font-family: 'Saira Condensed', sans-serif !important; font-size: 14px !important; font-weight: 800 !important; letter-spacing: 0.16em !important; text-transform: uppercase !important; color: var(--pc-navy) !important; background: var(--pc-yellow) !important; border: 1px solid var(--pc-yellow) !important; text-decoration: none !important; clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px) !important; position: relative !important; overflow: hidden !important; transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease, color 0.3s ease, background 0.3s ease !important; box-shadow: 0 12px 28px rgba(255, 224, 68, 0.25) !important; } html body .pcs-hero .pcs-hero__cta::before { content: '' !important; position: absolute !important; inset: 0 !important; left: -100% !important; background: linear-gradient(90deg, transparent, rgba(2, 16, 29, 0.18) 50%, transparent) !important; transition: left 0.6s ease !important; pointer-events: none !important; } html body .pcs-hero .pcs-hero__cta:hover { background: var(--pc-navy) !important; border-color: var(--pc-yellow) !important; color: var(--pc-yellow) !important; transform: translateY(-3px) !important; box-shadow: 0 16px 36px rgba(0, 37, 68, 0.45), 0 0 0 1px var(--pc-yellow) !important; } html body .pcs-hero .pcs-hero__cta:hover::before { left: 100% !important; } html body .pcs-hero .pcs-hero__cta-arrow { font-style: normal !important; font-weight: 800 !important; font-size: 18px !important; line-height: 1 !important; transition: transform 0.3s ease !important; } html body .pcs-hero .pcs-hero__cta:hover .pcs-hero__cta-arrow { transform: translateX(5px) !important; } html body .pcs-hero .pcs-hero__meta { font-family: 'JetBrains Mono', ui-monospace, monospace !important; font-size: 10px !important; font-weight: 700 !important; letter-spacing: 0.22em !important; color: rgba(255, 255, 255, 0.55) !important; text-transform: uppercase !important; } /* Mobile */ @media (max-width: 768px) { html body .pcs-hero .pcs-hero__hud { display: none !important; } html body .pcs-hero .pcs-hero__corner { width: 24px !important; height: 24px !important; } html body .pcs-hero .pcs-hero__title em { display: inline !important; } html body .pcs-hero .pcs-hero__sub br { display: none !important; } }