/* Topps Zone - Elite Glassmorphic Style Sheet (Allineamento REDNIT v4) Colors: Pure Dark/Black (#000000), Translucent Glass, White, Flat Neon Yellow (#e5fe00) Absolutely no AI-style fuzzy glows, heavy shadows, or blurry gradients. */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Space+Grotesk:wght@400;500;600;700&display=swap'); :root { --bg-dark: #000000; --bg-surface: rgba(255, 255, 255, 0.07); /* light frost base — see NOTUS LIQUID GLASS block */ --bg-surface-strong: rgba(255, 255, 255, 0.10); --bg-glass-nav: rgba(255, 255, 255, 0.06); --border-clean: rgba(255, 255, 255, 0.08); --border-hover: rgba(255, 255, 255, 0.16); --primary: #ffffff; /* Monochrome: white accent (no yellow) */ --primary-hover: #e6e6e6; --text-main: #ffffff; --text-muted: #aaaaaa; /* slightly brighter muted text for contrast */ --text-dark: #000000; /* Universal corner radius — same "round" on nav, buttons, social, cards */ --radius: 14px; --font-heading: 'Space Grotesk', sans-serif; --font-body: 'Inter', sans-serif; --transition-smooth: all 0.4s cubic-bezier(0.16, 1, 0.3, 1); --transition-fast: all 0.15s ease; --card-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), inset 0 0 0 1px rgba(255, 255, 255, 0.08), 0 15px 35px rgba(0, 0, 0, 0.65); /* exact notustv.live luxury glass feel */ --card-shadow-hover: inset 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 0 0 1px rgba(255, 255, 255, 0.14), 0 25px 45px rgba(0, 0, 0, 0.8); /* Liquid-glass depth: glossy top sheen + soft inner glow + deep drop shadow */ --shadow-clean: inset 0 1px 0 rgba(255, 255, 255, 0.22), inset 0 -1px 0 rgba(255, 255, 255, 0.04), 0 18px 40px -12px rgba(0, 0, 0, 0.7); --shadow-clean-hover: inset 0 1px 0 rgba(255, 255, 255, 0.30), inset 0 -1px 0 rgba(255, 255, 255, 0.05), 0 28px 55px -14px rgba(0, 0, 0, 0.85); /* Buttons: subtle modern rounding (not pill) */ --btn-radius: 14px; } body.light-mode { --bg-dark: #ffffff; --text-main: #0a0a0a; --text-muted: #666666; --text-dark: #ffffff; } /* Base resets */ * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: auto; background: var(--bg-dark); } body { background-color: transparent; /* black comes from ; lets the global starfield show */ background-image: none; color: var(--text-main); font-family: var(--font-body); overflow-x: hidden; line-height: 1.5; -webkit-font-smoothing: antialiased; position: relative; transition: color 0.4s cubic-bezier(0.16, 1, 0.3, 1); } /* ===== Global animated starfield (whole-site background) ===== */ body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background-color: #000; background-image: radial-gradient(1.6px 1.6px at 8% 12%, rgba(255,255,255,0.85), transparent), radial-gradient(1.4px 1.4px at 22% 34%, rgba(255,255,255,0.55), transparent), radial-gradient(1.7px 1.7px at 37% 8%, rgba(255,255,255,0.80), transparent), radial-gradient(1.2px 1.2px at 52% 26%, rgba(255,255,255,0.50), transparent), radial-gradient(1.8px 1.8px at 66% 14%, rgba(255,255,255,0.85), transparent), radial-gradient(1.3px 1.3px at 78% 38%, rgba(255,255,255,0.55), transparent), radial-gradient(1.6px 1.6px at 90% 20%, rgba(255,255,255,0.75), transparent), radial-gradient(1.2px 1.2px at 15% 60%, rgba(255,255,255,0.50), transparent), radial-gradient(1.5px 1.5px at 30% 78%, rgba(255,255,255,0.70), transparent), radial-gradient(1.3px 1.3px at 48% 64%, rgba(255,255,255,0.50), transparent), radial-gradient(1.7px 1.7px at 62% 86%, rgba(255,255,255,0.75), transparent), radial-gradient(1.2px 1.2px at 82% 70%, rgba(255,255,255,0.50), transparent), radial-gradient(1.5px 1.5px at 94% 92%, rgba(255,255,255,0.65), transparent); background-size: 100% 50%; background-repeat: repeat; animation: sky-drift 90s linear infinite, sky-twinkle 6s ease-in-out infinite alternate; } @keyframes sky-drift { from { background-position: 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0; } to { background-position: 0 -50%, 0 -50%, 0 -50%, 0 -50%, 0 -50%, 0 -50%, 0 -50%, 0 -50%, 0 -50%, 0 -50%, 0 -50%, 0 -50%, 0 -50%; } } @keyframes sky-twinkle { from { opacity: 0.55; } to { opacity: 0.9; } } @media (prefers-reduced-motion: reduce) { body::before { animation: none; } } /* Scanline overlay from notustv.live for CRT texture */ body::after { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 50; background-image: repeating-linear-gradient( to bottom, rgba(255, 255, 255, 0.022) 0, rgba(255, 255, 255, 0.022) 1px, transparent 1px, transparent 3px ); mix-blend-mode: overlay; opacity: 0.55; } /* Light mode handled via --bg-dark variable in :root */ /* Premium Glass Banner — exact notustv.live formula */ .banner { position: relative; width: 100%; padding: 40px clamp(24px, 5vw, 60px); background: var(--bg-surface); backdrop-filter: blur(22px) saturate(1.6); -webkit-backdrop-filter: blur(22px) saturate(1.6); border: 1px solid var(--border-clean); border-radius: 16px; box-shadow: var(--card-shadow); /* Scroll-reveal: same as notustv.live */ opacity: 0; transform: translateY(60px); transition: opacity 900ms cubic-bezier(.22,.61,.36,1), transform 900ms cubic-bezier(.22,.61,.36,1); } .banner.is-in { opacity: 1; transform: translateY(0); } .banner > * { position: relative; z-index: 1; } /* Ambient glow spots - providing depth for glassmorphism */ .ambient-glow { display: none !important; } .glow-1 { top: -100px; left: -100px; background: radial-gradient(circle, var(--primary) 0%, transparent 70%); } .glow-2 { bottom: -200px; right: -100px; background: radial-gradient(circle, rgba(255, 255, 255, 0.4) 0%, transparent 70%); } .glow-3 { top: 40%; left: 60%; background: radial-gradient(circle, rgba(255, 255, 255, 0.25) 0%, transparent 70%); } .glow-4 { top: 70%; left: -200px; background: radial-gradient(circle, var(--primary) 0%, transparent 70%); } /* Custom Sport Telemetry Decorators (Re-styled, minimal) */ .telemetry-marker { position: absolute; color: rgba(255, 255, 255, 0.15); font-family: var(--font-heading); font-size: 0.65rem; letter-spacing: 0.15em; pointer-events: none; z-index: 2; } .telemetry-marker.top-left { top: 30px; left: 40px; } .telemetry-marker.top-right { top: 30px; right: 40px; } /* Liquid/Minimal Section Header Block (from notustv.live match) */ .block__head { display: flex; align-items: center; width: 100%; margin-bottom: 40px; } .block__num { font-family: var(--font-heading); color: var(--primary); font-size: 1.15rem; font-weight: 700; margin-right: 12px; letter-spacing: -0.02em; } .block__title { font-family: var(--font-heading); font-size: 2.2rem; font-weight: 700; text-transform: uppercase; margin: 0; color: #fff; letter-spacing: -0.03em; } .block__title em { font-style: italic; color: var(--primary); } .block__rule { flex-grow: 1; height: 1px; background: var(--primary); /* Glowing yellow separator rule line */ margin-left: 24px; opacity: 0.25; } /* Scrollbar */ ::-webkit-scrollbar { width: 6px; } ::-webkit-scrollbar-track { background: var(--bg-dark); } ::-webkit-scrollbar-thumb { background: #222; border-radius: 3px; } ::-webkit-scrollbar-thumb:hover { background: var(--primary); } h1, h2, h3, h4, h5, h6 { font-family: var(--font-heading); font-weight: 700; letter-spacing: -0.03em; } a { color: inherit; text-decoration: none; } button, input, select { font-family: inherit; } /* Core Layout & Grid */ .container { max-width: 1400px; margin: 0 auto; padding: 0 40px; } /* Custom bespoke sections - Completely transparent and free-flowing */ .bespoke-section { padding: 80px 0; margin: 0 auto; position: relative; z-index: 10; background: transparent; border: none; transition: var(--transition-smooth); } /* Elite Glassmorphic Panel */ .glass-panel { background: var(--bg-surface); backdrop-filter: blur(22px) saturate(1.6); -webkit-backdrop-filter: blur(22px) saturate(1.6); border: 1px solid var(--border-clean); box-shadow: var(--card-shadow); border-radius: 16px; transition: var(--transition-smooth); } .primary-btn { background: var(--primary); border: 1px solid transparent; color: var(--text-dark); padding: 13px 28px; font-family: var(--font-heading); font-weight: 700; font-size: 0.95rem; border-radius: 50px; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; transition: var(--transition-smooth); } .primary-btn:hover { background: var(--primary-hover); transform: translateY(-2px); } .glass-btn { background: var(--bg-surface); border: 1px solid var(--border-clean); color: var(--text-main); padding: 13px 28px; font-family: var(--font-heading); font-weight: 600; font-size: 0.95rem; border-radius: 50px; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; backdrop-filter: blur(22px) saturate(1.6); -webkit-backdrop-filter: blur(22px) saturate(1.6); box-shadow: var(--card-shadow); transition: var(--transition-smooth); } .glass-btn:hover { background: var(--bg-surface); border-color: var(--primary); color: var(--primary); transform: translateY(-2px); box-shadow: var(--card-shadow-hover); } header { position: fixed; top: 18px; left: 50%; transform: translateX(-50%); width: min(1340px, calc(100% - 32px)); z-index: 1000; padding: 15px 30px; background: var(--bg-glass-nav); backdrop-filter: blur(26px) saturate(1.8); -webkit-backdrop-filter: blur(26px) saturate(1.8); border: none; border-radius: 14px; box-shadow: var(--shadow-clean); transition: all 0.45s cubic-bezier(0.16, 1, 0.3, 1); } /* notustv.live style: glass bar that shrinks & tightens when scrolling down */ header.scrolled { top: 10px; padding: 9px 26px; width: min(1180px, calc(100% - 32px)); border-radius: 12px; background: rgba(16, 18, 23, 0.78); box-shadow: var(--shadow-clean-hover); } .nav-wrapper { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 20px; } .nav-wrapper > .logo { justify-self: start; } .nav-wrapper > nav { justify-self: center; } .nav-wrapper > .nav-actions { justify-self: end; } .logo { display: flex; align-items: center; gap: 8px; font-family: var(--font-heading); font-weight: 700; font-size: 1.3rem; color: var(--text-main); } .logo span { color: var(--primary); } .logo-badge { background: var(--primary); color: var(--text-dark); font-size: 0.6rem; font-weight: 800; padding: 1px 5px; border-radius: 4px; letter-spacing: 0.05em; } nav ul { display: flex; align-items: center; gap: 10px; list-style: none; } nav ul > li { display: flex; align-items: center; } /* Nav links — Framer-style sliding yellow underline */ nav a { position: relative; display: inline-flex; align-items: center; font-family: var(--font-body); font-weight: 600; font-size: 0.9rem; line-height: 1; color: var(--text-muted); padding: 8px 14px; transition: color 220ms ease; letter-spacing: 0.01em; } nav a::before, nav a::after { display: none; } nav a::after { display: block; content: ''; position: absolute; bottom: 0; left: 14px; right: 14px; height: 2px; background: var(--primary); border-radius: 2px; transform: scaleX(0); transform-origin: center; transition: transform 350ms cubic-bezier(.22,.61,.36,1); } nav a:hover, nav a.active { color: var(--text-main); } nav a:hover::after, nav a.active::after { transform: scaleX(1); } .nav-actions { display: flex; align-items: center; gap: 16px; } .search-bar { position: relative; display: flex; align-items: center; } .search-bar input { background: rgba(255, 255, 255, 0.03); border: 1px solid var(--border-clean); border-radius: 2px; /* square corner */ padding: 7px 14px 7px 34px; color: var(--text-main); font-size: 0.85rem; width: 150px; transition: var(--transition-smooth); } .search-bar input:focus { width: 220px; border-color: rgba(255, 255, 255, 0.3); outline: none; } .search-bar i { position: absolute; left: 12px; color: var(--text-muted); font-size: 0.8rem; } .cart-trigger { background: transparent; border: 1px solid var(--border-clean); border-radius: 50%; width: 38px; height: 38px; display: flex; align-items: center; justify-content: center; cursor: pointer; position: relative; transition: var(--transition-fast); } .cart-trigger:hover { border-color: rgba(255,255,255,0.3); } .cart-trigger i { font-size: 1rem; } .cart-badge { position: absolute; top: -4px; right: -4px; background: var(--primary); color: var(--text-dark); font-size: 0.7rem; font-weight: 700; width: 18px; height: 18px; border-radius: 50%; display: flex; align-items: center; justify-content: center; } /* Hero Section (REDNIT Layout Match) */ .hero { position: relative; padding-top: 140px; min-height: 95vh; display: flex; align-items: center; overflow: hidden; background-color: transparent; /* Seamless transparent glass integration */ } .hero-wrapper { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 40px; align-items: center; position: relative; z-index: 5; } .hero-content { max-width: 680px; } .hero h1 { font-size: 4.2rem; line-height: 1.05; margin-bottom: 24px; font-weight: 700; } /* Handwritten Underline Styling (REDNIT style SVG) */ .neon-yellow-highlight { color: var(--primary); position: relative; display: inline-block; } .hand-underline { position: absolute; left: 0; bottom: -6px; width: 100%; height: 8px; pointer-events: none; } .hero p { font-size: 1.05rem; color: var(--text-muted); margin-bottom: 36px; max-width: 540px; } .hero-actions { display: flex; gap: 16px; margin-bottom: 70px; } /* Hero social links (replaces the old 3-step columns) */ .hero-socials { border-top: 1px solid var(--border-clean); padding-top: 26px; } .hero-socials-label { display: block; font-family: var(--font-heading); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.18em; color: var(--text-muted); margin-bottom: 16px; } .hero-social-row { display: flex; gap: 12px; } .hero-social-row .social-btn { width: 46px; height: 46px; font-size: 1.1rem; border-radius: 50%; border: 1px solid var(--border-clean); background: var(--bg-surface); backdrop-filter: blur(22px) saturate(1.6); -webkit-backdrop-filter: blur(22px) saturate(1.6); box-shadow: var(--shadow-clean); transition: var(--transition-smooth); } .hero-social-row .social-btn:hover { color: var(--text-main); background: rgba(255, 255, 255, 0.10); border-color: rgba(255, 255, 255, 0.35); transform: translateY(-4px); box-shadow: var(--shadow-clean-hover); } @media (min-width: 769px) { .footer-col-item:not(:last-child)::after { content: ">"; position: absolute; right: -16px; top: 30%; transform: translate(50%, -50%); font-family: var(--font-heading); font-size: 1.4rem; font-weight: 700; color: var(--text-main); opacity: 0.6; pointer-events: none; } } /* 3-Column Capsule Scrolling (REDNIT visual match) */ .hero-visuals { position: relative; height: 600px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; overflow: hidden; } .hero-visuals::before, .hero-visuals::after { content: ''; position: absolute; left: 0; right: 0; height: 120px; z-index: 10; pointer-events: none; transition: background 0.4s cubic-bezier(0.16, 1, 0.3, 1); } .hero-visuals::before { top: 0; background: linear-gradient(to bottom, var(--bg-dark) 0%, transparent 100%); } .hero-visuals::after { bottom: 0; background: linear-gradient(to top, var(--bg-dark) 0%, transparent 100%); } .scroll-track { display: flex; flex-direction: column; gap: 14px; height: max-content; } .scroll-track.track-up { animation: scroll-up 28s linear infinite; } .scroll-track.track-down { animation: scroll-down 28s linear infinite; } @keyframes scroll-up { 0% { transform: translateY(0); } 100% { transform: translateY(-50%); } } @keyframes scroll-down { 0% { transform: translateY(-50%); } 100% { transform: translateY(0); } } .visual-card-wrap { perspective: 1000px; width: 100%; } .visual-card { width: 100%; aspect-ratio: 2.5 / 3.5; /* Real trading card proportion */ border-radius: 10px; /* softer, rounder corners */ overflow: hidden; border: none !important; outline: none; box-shadow: none; position: relative; background: transparent; cursor: pointer; transition: var(--transition-smooth); transform-style: preserve-3d; } .visual-card img { width: 100%; height: 100%; object-fit: cover; /* Display the entire card beautifully covering the aspect ratio perfectly */ display: block; transition: var(--transition-smooth); } /* Gradient overlay on capsule hidden to see player details cleanly */ .visual-card .capsule-overlay { display: none; position: absolute; bottom: 0; left: 0; width: 100%; height: 55%; background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, transparent 100%); z-index: 5; pointer-events: none; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; padding-bottom: 24px; text-align: center; } .visual-card .player-name { font-family: var(--font-heading); font-size: 0.9rem; font-weight: 600; color: var(--text-main); } .visual-card .player-badge { font-family: var(--font-heading); font-size: 0.65rem; font-weight: 700; color: var(--primary); text-transform: uppercase; letter-spacing: 0.05em; margin-top: 2px; } .visual-card:hover { border: none; } .visual-card:hover img { transform: scale(1.04); filter: grayscale(0%); } .visual-card .card-shine { position: absolute; top: 0; left: 0; width: 200%; height: 200%; background: linear-gradient(45deg, rgba(255,255,255,0) 30%, rgba(255,255,255,0.08) 40%, rgba(255,255,255,0) 50%); z-index: 6; pointer-events: none; transform: translate(-50%, -50%); } /* Features Grid Banner */ .features-section { padding: 50px 0; background-color: transparent; /* Seamless transparent glass integration */ border-top: none; border-bottom: none; } /* Features banner is a clean, frameless strip (no box / no contour) */ .features-section .banner { background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; border: none; box-shadow: none; border-radius: 0; padding: 20px 0; } .features-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; } .feature-card { position: relative; padding: 18px 34px; border: none; background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: none; border-radius: 0; transition: var(--transition-smooth); } /* Vertical separator bar between one feature and the next (clearly visible) */ .feature-card:not(:last-child)::after { content: ""; position: absolute; top: 50%; right: 0; transform: translateY(-50%); width: 1px; height: 80px; background: linear-gradient( to bottom, transparent 0%, rgba(255, 255, 255, 0.30) 18%, rgba(255, 255, 255, 0.30) 82%, transparent 100% ); } .feature-card { border-radius: 14px; } .feature-card:hover { transform: translateY(-6px); background: rgba(255, 255, 255, 0.05); box-shadow: none; } .feature-card:hover .feature-icon { transform: none; filter: none; } .feature-icon { font-size: 1.35rem; color: var(--primary); margin-bottom: 12px; transition: var(--transition-smooth); } .feature-card h3 { font-size: 1.05rem; margin-bottom: 6px; font-weight: 600; } .feature-card p { font-size: 0.8rem; color: var(--text-muted); margin-bottom: 0; line-height: 1.4; } /* Shop / Products Section */ .shop-section { padding: 80px 0; } .section-header { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 40px; } .section-title h2 { font-size: 2.2rem; margin-bottom: 8px; } .section-title p { color: var(--text-muted); font-size: 0.9rem; } /* Ultra Minimalist Shop Tabs */ .shop-tabs { display: flex; gap: 20px; border: none; background: transparent; padding: 0; } .tab-btn { position: relative; background: transparent; border: none; color: var(--text-muted); font-family: var(--font-body); font-weight: 600; font-size: 0.92rem; padding: 8px 4px; cursor: pointer; transition: color 220ms ease; letter-spacing: 0.01em; } /* Sliding yellow underline on tab buttons */ .tab-btn::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 2px; background: var(--primary); border-radius: 2px; transform: scaleX(0); transform-origin: center; transition: transform 350ms cubic-bezier(.22,.61,.36,1); } .tab-btn:hover::after, .tab-btn.active::after { transform: scaleX(1); } .tab-btn:hover, .tab-btn.active { color: var(--primary); } /* Shop Subpages Navigation Buttons & Chevron Anims */ .shop-subpages-nav { display: flex; justify-content: center; gap: 24px; flex-wrap: wrap; margin-top: 45px; } .subpage-nav-link { border-radius: 2px !important; padding: 12px 24px !important; font-family: var(--font-heading) !important; font-size: 0.9rem !important; font-weight: 600 !important; display: inline-flex !important; align-items: center !important; gap: 8px !important; } .subpage-nav-link i { transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important; } .subpage-nav-link:hover i { transform: translateX(6px) !important; } .products-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; } /* Product Card — smoked glass, premium rounded, NO outline/contour */ .product-card { border-radius: 16px; padding: 0; border: none; background: var(--bg-surface); backdrop-filter: blur(22px) saturate(1.6); -webkit-backdrop-filter: blur(22px) saturate(1.6); display: flex; flex-direction: column; box-shadow: var(--shadow-clean); transition: var(--transition-smooth); overflow: hidden; } .product-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-clean-hover); } .product-image-container { width: 100%; aspect-ratio: 1 / 1.25; overflow: hidden; background: transparent; /* Seamless transparent glass integration */ position: relative; display: flex; align-items: center; justify-content: center; border-bottom: none; } body.light-mode .product-image-container { background: transparent; } .product-image-container img { width: 100%; height: 100%; object-fit: contain; /* Preserva la forma del pacchetto/box isolandolo su sfondo nero */ padding: 16px; /* Spazio interno per dare eleganza e staccare l'oggetto dai bordi */ transition: transform var(--transition-smooth); } .product-card:hover .product-image-container img { transform: scale(1.05); } .product-tag { position: absolute; top: 12px; left: 12px; padding: 4px 10px; border-radius: 6px; font-size: 0.65rem; font-weight: 700; text-transform: uppercase; font-family: var(--font-heading); z-index: 10; } .tag-hobby, .tag-single, .tag-now, .tag-mystery, .tag-preorder { background: rgba(255, 255, 255, 0.12); color: #ffffff; } .product-info { display: flex; flex-direction: column; flex-grow: 1; padding: 20px; /* Dettagli posizionati sotto l'immagine con padding */ background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; border: none; box-shadow: none; transition: var(--transition-smooth); } .product-card:hover .product-info { background: transparent; } .product-meta { font-size: 0.7rem; color: var(--text-muted); font-family: var(--font-heading); text-transform: uppercase; margin-bottom: 6px; } .product-title { font-size: 1rem; font-weight: 600; margin-bottom: 8px; color: var(--text-main); line-height: 1.35; } .product-desc { font-size: 0.78rem; color: var(--text-muted); line-height: 1.45; margin-bottom: 16px; } .product-footer { display: flex; justify-content: space-between; align-items: center; margin-top: auto; border-top: 1px solid var(--border-clean); padding-top: 14px; } .product-price-container { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .product-price { font-family: var(--font-heading); font-weight: 700; font-size: 1.15rem; color: var(--text-main); } .product-price.discounted { color: var(--primary); /* Prezzo in giallo/neon-yellow se scontato */ } .product-price-old { font-family: var(--font-heading); font-size: 0.9rem; color: var(--text-muted); text-decoration: line-through; /* Sbarra sul prezzo vecchio */ } .add-to-cart-btn { width: 34px; height: 34px; border-radius: 50%; background: transparent; border: 1px solid var(--border-clean); color: var(--text-main); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: var(--transition-fast); } .add-to-cart-btn:hover { background: var(--primary); border-color: var(--primary); color: var(--text-dark); } /* Booster Pack Opener - Tiers Grids (Translucent glass cards) */ /* Booster Pack Opener - 3 Premium Columns Layout */ .pack-selection-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; width: 100%; margin-top: 30px; margin-bottom: 50px; } .pack-interactive-card { display: flex; flex-direction: column; align-items: center; perspective: 1000px; transition: var(--transition-smooth); } .pack-visual-container { width: 250px; height: 360px; position: relative; cursor: pointer; transition: var(--transition-smooth); transform-style: preserve-3d; } .pack-interactive-card:hover .pack-visual-container { transform: translateY(-8px); } .booster-pack { width: 100%; height: 100%; border-radius: 8px; position: relative; background: linear-gradient(160deg, #262b33 0%, #3a424d 45%, #14171c 100%); overflow: hidden; transition: var(--transition-smooth); box-shadow: 0 25px 50px -15px rgba(0,0,0,0.75), inset 0 1px 0 rgba(255,255,255,0.18), inset 0 0 60px rgba(0,0,0,0.45); } /* Silver foil film (monochrome iridescence) */ .booster-pack::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(125deg, rgba(255,255,255,0.16), rgba(255,255,255,0) 30%, rgba(255,255,255,0.10) 55%, rgba(255,255,255,0) 80%); mix-blend-mode: screen; opacity: 0.6; } /* Sweeping gloss highlight (sweeps across on hover) */ .booster-pack::after { content: ""; position: absolute; inset: 0; z-index: 6; pointer-events: none; background: linear-gradient(110deg, transparent 35%, rgba(255,255,255,0.30) 48%, rgba(255,255,255,0.05) 56%, transparent 70%); background-size: 250% 100%; background-position: 165% 0; transition: background-position 0.9s cubic-bezier(0.16,1,0.3,1); } .pack-interactive-card:hover .booster-pack::after, .booster-pack:hover::after { background-position: -65% 0; } /* Tier Specific Foil Styles */ .booster-pack.standard-foil { background: linear-gradient(160deg, #2b313a 0%, #4a535f 45%, #161a1f 100%); } .booster-pack.premium-foil { background: linear-gradient(160deg, #3a4049 0%, #79828d 45%, #1a1d22 100%); } .booster-pack.legendary-foil { background: linear-gradient(160deg, #0a0b0e 0%, #3c424c 45%, #050608 100%); } .pack-art { width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: 24px 20px; position: relative; z-index: 5; } .pack-player-img { position: absolute; width: 94%; height: 64%; bottom: 42px; left: 3%; object-fit: contain; pointer-events: none; opacity: 0.96; z-index: 4; transition: transform 0.5s cubic-bezier(0.16,1,0.3,1); filter: drop-shadow(0 14px 22px rgba(0,0,0,0.75)) contrast(1.08) saturate(1.12); } .pack-interactive-card:hover .pack-player-img { transform: scale(1.05) translateY(-5px); } .pack-logo { font-family: var(--font-heading); font-weight: 800; font-size: 1.55rem; letter-spacing: 0.04em; text-shadow: 0 4px 14px rgba(0,0,0,0.9); z-index: 10; } .pack-logo span { color: var(--primary); } .pack-badge-glow { padding: 5px 14px; border-radius: 50px; font-size: 0.62rem; font-weight: 800; font-family: var(--font-heading); letter-spacing: 0.14em; text-transform: uppercase; background: rgba(0, 0, 0, 0.55); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); border: 1px solid rgba(255,255,255,0.18); z-index: 10; margin-top: 6px; } .standard-foil .pack-badge-glow { border-color: var(--primary); color: var(--primary); } .premium-foil .pack-badge-glow { border-color: rgba(255,255,255,0.5); color: #ffffff; } .legendary-foil .pack-badge-glow { border-color: rgba(255,255,255,0.5); color: #ffffff; } .pack-details-text { font-family: var(--font-heading); font-size: 0.8rem; font-weight: 700; color: #ffffff; text-shadow: 0 2px 4px rgba(0,0,0,0.8); z-index: 10; text-transform: uppercase; letter-spacing: 0.03em; } .pack-crimp-top, .pack-crimp-bottom { position: absolute; left: 0; width: 100%; height: 18px; background: linear-gradient(180deg, rgba(255,255,255,0.20), rgba(0,0,0,0.40)), repeating-linear-gradient(90deg, rgba(255,255,255,0.22) 0 1.5px, rgba(0,0,0,0.55) 1.5px 4px); z-index: 12; } .pack-crimp-top { top: 0; box-shadow: 0 3px 6px rgba(0,0,0,0.5); } .pack-crimp-bottom { bottom: 0; box-shadow: 0 -3px 6px rgba(0,0,0,0.5); } /* Draggable Zip / Tear Strip */ .zip-track { position: absolute; top: 24px; left: 0; width: 100%; height: 8px; background: repeating-linear-gradient(90deg, #ffffff 0, #ffffff 5px, transparent 5px, transparent 10px); z-index: 15; opacity: 0.9; box-shadow: inset 0 1px 3px rgba(0,0,0,0.5); display: none; /* Only visible in ripping state */ } .zip-track.active { display: block; } .zip-handle { position: absolute; left: 0; top: -12px; width: 32px; height: 32px; border-radius: 6px; background: #ffffff; color: #000000; cursor: ew-resize; display: flex; align-items: center; justify-content: center; z-index: 20; box-shadow: 0 4px 10px rgba(0,0,0,0.6); border: 1px solid rgba(255,255,255,0.3); transition: transform 0.2s; } .zip-handle:hover { transform: scale(1.1); background: #e6e6e6; } .zip-handle i { font-size: 0.95rem; } /* Glass Banner under pack — exact notustv.live formula */ .pack-glass-banner { width: 100%; background: var(--bg-surface); backdrop-filter: blur(22px) saturate(1.6); -webkit-backdrop-filter: blur(22px) saturate(1.6); border: none; border-radius: 2px; padding: 18px; text-align: center; margin-top: 15px; transition: var(--transition-smooth); box-shadow: var(--card-shadow); } .pack-interactive-card:hover .pack-glass-banner { background: var(--bg-surface); } .pack-glass-banner h4 { font-size: 1.15rem; margin-bottom: 4px; font-family: var(--font-heading); color: var(--text-main); } .pack-glass-banner .pack-price { font-size: 1.35rem; font-weight: 700; color: var(--primary); margin-bottom: 8px; font-family: var(--font-heading); } .pack-glass-banner .pack-desc { font-size: 0.76rem; color: var(--text-muted); line-height: 1.4; margin-bottom: 14px; min-height: 40px; } .pack-glass-banner .buy-btn { width: 100%; justify-content: center; border-radius: 2px; padding: 10px 20px; font-size: 0.85rem; } /* Shaking / Ripping animations */ .booster-pack.shake { animation: pack-shake-subtle 0.5s ease-in-out infinite; } @keyframes pack-shake-subtle { 0%, 100% { transform: rotate(0deg); } 25% { transform: rotate(1.5deg); } 75% { transform: rotate(-1.5deg); } } /* Zip ripped state divisions */ .booster-pack-split { position: absolute; width: 100%; left: 0; overflow: hidden; transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.8s; z-index: 10; } .booster-pack-top-split { top: 0; height: 28px; border-bottom: 1px dashed rgba(255, 255, 255, 0.2); } .booster-pack-body-split { top: 28px; height: calc(100% - 28px); } .booster-pack.ripped .booster-pack-top-split { transform: translateY(-80px) rotate(-8deg); opacity: 0; } .booster-pack.ripped .booster-pack-body-split { transform: translateY(180px) rotate(8deg); opacity: 0; } /* Theater overlay for sbustatura */ .pack-theater-overlay { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: rgba(0,0,0,0.9); backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px); z-index: 1500; display: none; align-items: center; justify-content: center; flex-direction: column; } .pack-theater-overlay.active { display: flex; } .theater-pack-area { width: 280px; height: 400px; perspective: 1000px; position: relative; margin-bottom: 40px; } /* Revealed Card Area */ .revealed-card-container { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 20; display: flex; justify-content: center; align-items: center; opacity: 0; pointer-events: none; transform: scale(0.8) rotateY(180deg); transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1); } .revealed-card-container.active { opacity: 1; pointer-events: auto; transform: scale(1) rotateY(0deg); } .revealed-card { width: 90%; height: 90%; border-radius: 2px; /* square corner */ border: 1px solid var(--primary); overflow: hidden; background: #000; display: flex; align-items: center; justify-content: center; } .revealed-card img { width: 95%; height: 95%; object-fit: contain; } .revealed-glow-effect { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: 2px; box-shadow: inset 0 0 20px rgba(255, 255, 255, 0.2); z-index: 10; pointer-events: none; } /* Post-Reveal Choice Panels */ .decision-panel { display: none; flex-direction: column; align-items: center; gap: 16px; width: 480px; max-width: 90%; margin-top: 10px; padding: 24px; border-radius: 2px; background: var(--bg-surface); backdrop-filter: blur(22px) saturate(1.6); -webkit-backdrop-filter: blur(22px) saturate(1.6); border: none; box-shadow: var(--card-shadow); animation: fade-in 0.5s ease-out forwards; } @keyframes fade-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } .decision-panel h5 { font-size: 1.1rem; font-family: var(--font-heading); margin-bottom: 8px; } .decision-buttons { display: flex; gap: 16px; } /* Shipping Information Form inside pack opener modal */ .shipping-modal-body { display: flex; flex-direction: column; gap: 12px; } /* Topps Now Countdown Banner (Clean Inline text countdown) */ .now-highlight { padding: 80px 0; } .now-wrapper { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; } .now-visual { display: flex; justify-content: center; } .now-card-3d { width: 280px; aspect-ratio: 1 / 1.35; border-radius: 2px; /* exact notustv.live */ overflow: hidden; border: none; /* Borderless glass panels matching notustv.live */ display: flex; align-items: center; justify-content: center; background: var(--bg-surface); /* Lighter opacity to allow glows to show through */ backdrop-filter: blur(22px) saturate(1.6); -webkit-backdrop-filter: blur(22px) saturate(1.6); box-shadow: var(--card-shadow); } .now-card-3d img { width: 90%; height: 90%; object-fit: contain; } .now-info h2 { font-size: 2.2rem; margin-bottom: 16px; } .now-info p { color: var(--text-muted); font-size: 0.95rem; margin-bottom: 24px; } /* Clean Inline Countdown - NO AI BOXES */ .countdown-text-line { font-family: var(--font-heading); font-size: 1.15rem; font-weight: 700; color: var(--text-main); display: inline-flex; align-items: center; gap: 10px; margin-bottom: 24px; } .countdown-time-val { color: var(--primary); font-weight: 800; letter-spacing: 0.05em; font-family: 'Space Grotesk', monospace; font-size: 1.25rem; } .stock-meter { margin-bottom: 30px; max-width: 400px; } .stock-labels { display: flex; justify-content: space-between; font-size: 0.85rem; margin-bottom: 6px; } .stock-lbl-right { color: var(--primary); font-weight: 600; } .meter-track { height: 8px; background: rgba(255, 255, 255, 0.03); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border: 1.5px solid var(--border-clean); border-radius: 6px; overflow: hidden; position: relative; } .meter-fill { height: 100%; width: 78%; background: var(--primary); border-radius: 4px; transition: width 0.6s ease; } /* Sliding Cart Drawer */ .cart-drawer { position: fixed; top: 0; right: 0; width: 400px; max-width: 100%; height: 100vh; background: var(--bg-surface); /* Glassmorphism matching reference theme */ backdrop-filter: blur(32px); -webkit-backdrop-filter: blur(32px); border-left: none; /* Borderless glass panels matching notustv.live */ z-index: 1000; transform: translateX(100%); transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1); display: flex; flex-direction: column; box-shadow: var(--card-shadow); } .cart-drawer.open { transform: translateX(0); } .cart-header { padding: 24px; border-bottom: 1px solid var(--border-clean); display: flex; justify-content: space-between; align-items: center; } .cart-header h3 { font-size: 1.15rem; display: flex; align-items: center; gap: 8px; } .cart-header h3 i { color: var(--primary); } .close-cart-btn { background: transparent; border: none; color: var(--text-muted); font-size: 1.3rem; cursor: pointer; } .cart-items-container { flex-grow: 1; overflow-y: auto; padding: 24px; display: flex; flex-direction: column; gap: 16px; } .cart-empty-message { text-align: center; color: var(--text-muted); margin-top: 80px; } .cart-empty-message i { font-size: 2.2rem; margin-bottom: 12px; display: block; } .cart-item { display: flex; gap: 12px; border-bottom: 1px solid rgba(255, 255, 255, 0.04); padding-bottom: 16px; } .cart-item-image { width: 55px; height: 55px; border-radius: 2px; /* square corner */ overflow: hidden; background: transparent; border: 1px solid rgba(255,255,255,0.03); } .cart-item-image img { width: 100%; height: 100%; object-fit: contain; } .cart-item-details { flex-grow: 1; display: flex; flex-direction: column; justify-content: space-between; } .cart-item-title { font-size: 0.85rem; font-weight: 600; color: var(--text-main); } .cart-item-price { font-family: var(--font-heading); font-weight: 700; font-size: 0.95rem; color: var(--primary); } .cart-item-actions { display: flex; justify-content: space-between; align-items: center; } .quantity-control { display: flex; align-items: center; background: rgba(255, 255, 255, 0.02); border: 1px solid var(--border-clean); border-radius: 2px; /* square corner */ padding: 1px; } .qty-btn { background: transparent; border: none; color: var(--text-muted); width: 20px; height: 20px; cursor: pointer; display: flex; align-items: center; justify-content: center; } .qty-btn:hover { color: var(--text-main); } .qty-val { width: 24px; text-align: center; font-size: 0.8rem; font-weight: 600; } .remove-item-btn { background: transparent; border: none; color: #ff5252; cursor: pointer; font-size: 0.78rem; } .cart-footer { padding: 24px; border-top: 1px solid var(--border-clean); } .cart-summary-row { display: flex; justify-content: space-between; font-size: 0.85rem; margin-bottom: 8px; color: var(--text-muted); } .cart-summary-row.total { border-top: 1px solid rgba(255, 255, 255, 0.05); padding-top: 12px; font-size: 1.1rem; font-weight: 700; color: var(--text-main); margin-bottom: 16px; } .cart-summary-row.total span { color: var(--primary); } .checkout-btn { width: 100%; justify-content: center; } .cart-overlay { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: rgba(0,0,0,0.6); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); z-index: 999; opacity: 0; pointer-events: none; transition: opacity 0.3s ease; } .cart-overlay.open { opacity: 1; pointer-events: auto; } /* Payment & Checkout Modal Minimal lines (Highly translucent glass) */ .modal-overlay { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: rgba(0,0,0,0.75); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); z-index: 2000; display: flex; align-items: center; justify-content: center; opacity: 0; pointer-events: none; transition: opacity 0.3s ease; } .modal-overlay.open { opacity: 1; pointer-events: auto; } .modal-container { width: 440px; max-width: 90%; padding: 30px; border-radius: 20px; border: 1px solid var(--border-clean); background: rgba(10, 12, 16, 0.88); backdrop-filter: blur(40px) saturate(1.6); -webkit-backdrop-filter: blur(40px) saturate(1.6); box-shadow: var(--card-shadow-hover); position: relative; } .modal-close { position: absolute; top: 16px; right: 16px; background: transparent; border: none; color: var(--text-muted); font-size: 1.15rem; cursor: pointer; } .modal-title { font-size: 1.4rem; margin-bottom: 20px; } .modal-form { display: flex; flex-direction: column; gap: 12px; } .row-group { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .checkout-summary-box { background: rgba(255, 255, 255, 0.02); border: 1px solid var(--border-clean); border-radius: 2px; /* square corner */ padding: 12px; font-size: 0.85rem; } .checkout-summary-box span.val { float: right; font-weight: 700; color: var(--primary); } .success-screen { text-align: center; display: none; flex-direction: column; align-items: center; } .success-screen.active { display: flex; } .success-icon { width: 60px; height: 60px; border-radius: 50%; border: 1.5px solid var(--primary); color: var(--primary); display: flex; align-items: center; justify-content: center; font-size: 1.8rem; margin-bottom: 16px; } .success-title { font-size: 1.4rem; margin-bottom: 8px; } .success-desc { color: var(--text-muted); font-size: 0.85rem; margin-bottom: 24px; } /* Footer — pure black, frameless, with a slow moving starfield */ footer { position: relative; background: #000000; backdrop-filter: none; -webkit-backdrop-filter: none; border: none; border-top: none; padding: 70px 0 30px 0; box-shadow: none; overflow: hidden; } /* Two parallax star layers drifting upward */ footer::before, footer::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 300%; pointer-events: none; z-index: 0; } footer::before { background-image: radial-gradient(1.6px 1.6px at 12% 8%, rgba(255,255,255,0.9), transparent), radial-gradient(1.4px 1.4px at 28% 22%, rgba(255,255,255,0.55), transparent), radial-gradient(1.8px 1.8px at 48% 14%, rgba(255,255,255,0.8), transparent), radial-gradient(1.2px 1.2px at 66% 30%, rgba(255,255,255,0.5), transparent), radial-gradient(1.7px 1.7px at 82% 10%, rgba(255,255,255,0.85), transparent), radial-gradient(1.3px 1.3px at 92% 26%, rgba(255,255,255,0.5), transparent); background-size: 100% 33.33%; background-repeat: repeat; animation: footer-stars 70s linear infinite; opacity: 0.7; } footer::after { background-image: radial-gradient(1px 1px at 18% 16%, rgba(255,255,255,0.6), transparent), radial-gradient(1px 1px at 38% 28%, rgba(255,255,255,0.4), transparent), radial-gradient(1.1px 1.1px at 58% 8%, rgba(255,255,255,0.55), transparent), radial-gradient(1px 1px at 74% 22%, rgba(255,255,255,0.4), transparent), radial-gradient(1.1px 1.1px at 88% 18%, rgba(255,255,255,0.5), transparent); background-size: 100% 33.33%; background-repeat: repeat; animation: footer-stars 110s linear infinite; opacity: 0.45; } @keyframes footer-stars { from { transform: translateY(0); } to { transform: translateY(-33.33%); } } footer .container { position: relative; z-index: 2; } @media (prefers-reduced-motion: reduce) { footer::before, footer::after { animation: none; } } .footer-grid { display: grid; grid-template-columns: 1.3fr 0.8fr 0.8fr 1.1fr; gap: 30px; margin-bottom: 40px; } .footer-brand p { color: var(--text-muted); font-size: 0.8rem; margin-top: 12px; margin-bottom: 16px; } .social-links { display: flex; gap: 8px; } .social-btn { width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--border-clean); color: var(--text-muted); display: flex; align-items: center; justify-content: center; transition: var(--transition-fast); } .social-btn:hover { color: var(--text-main); border-color: rgba(255,255,255,0.3); } .footer-col h4 { font-size: 0.95rem; margin-bottom: 16px; } .footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 8px; } .footer-col a { font-size: 0.8rem; color: var(--text-muted); transition: var(--transition-fast); } .footer-col a:hover { color: var(--text-main); } .footer-newsletter p { color: var(--text-muted); font-size: 0.78rem; margin-bottom: 14px; } .newsletter-form { display: flex; position: relative; } .newsletter-form input { background: var(--bg-surface); border: 1px solid var(--border-clean); border-radius: 2px; /* square corner */ padding: 10px 45px 10px 14px; color: var(--text-main); font-size: 0.8rem; width: 100%; } .newsletter-form input:focus { border-color: rgba(255, 255, 255, 0.2); outline: none; } .newsletter-form button { position: absolute; right: 3px; top: 3px; background: var(--primary); border: none; width: 34px; height: 34px; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; color: var(--text-dark); } .footer-bottom { border-top: 1px solid rgba(255, 255, 255, 0.03); padding-top: 24px; display: flex; justify-content: space-between; align-items: center; font-size: 0.75rem; color: var(--text-muted); } .payment-badges { display: flex; gap: 12px; font-size: 1.2rem; color: rgba(255,255,255,0.1); } /* WooCommerce-style Quick View Modal — exact notustv.live formula */ .quickview-container { width: 900px; max-width: 95%; padding: 36px; background: rgba(10, 12, 16, 0.88) !important; backdrop-filter: blur(40px) saturate(1.6) !important; -webkit-backdrop-filter: blur(40px) saturate(1.6) !important; border: 1px solid var(--border-clean) !important; border-radius: 20px !important; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.08) inset, 0 20px 60px rgba(0, 0, 0, 0.7) !important; } .quickview-wrapper { display: grid; grid-template-columns: 1fr 1.2fr; gap: 40px; align-items: start; } .quickview-media { width: 100%; display: flex; justify-content: center; align-items: center; perspective: 1000px; } .quickview-card-wrap { width: 100%; max-width: 320px; aspect-ratio: 2.5 / 3.5; border-radius: 2px; border: none; overflow: hidden; position: relative; background: transparent; transform-style: preserve-3d; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.08) inset, 0 20px 40px -20px rgba(0, 0, 0, 0.6); transition: var(--transition-smooth); } .quickview-card-wrap img { width: 100%; height: 100%; object-fit: contain; background: transparent; /* Transparent background to let the glass shine through */ padding: 20px; /* Spazio interno elegante per far risaltare il pacchetto/box su sfondo nero */ } .quickview-details { display: flex; flex-direction: column; color: var(--text-main); } .qv-category-badge { font-family: var(--font-heading); font-size: 0.72rem; font-weight: 700; color: var(--primary); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 8px; } .qv-title { font-size: 1.8rem; line-height: 1.25; margin-bottom: 16px; font-family: var(--font-heading); } .qv-price-box { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; border-bottom: 1px solid rgba(255, 255, 255, 0.05); padding-bottom: 16px; } .qv-price { font-size: 2rem; font-family: var(--font-heading); font-weight: 700; color: #ffffff; } .qv-stock-status { font-size: 0.75rem; font-weight: 700; color: var(--primary); background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.15); padding: 3px 10px; border-radius: 2px; display: inline-flex; align-items: center; gap: 6px; } .qv-description { font-size: 0.9rem; color: var(--text-muted); line-height: 1.5; margin-bottom: 24px; } .qv-specs-table { display: flex; flex-direction: column; gap: 8px; margin-bottom: 28px; } .qv-spec-row { display: flex; justify-content: space-between; font-size: 0.85rem; border-bottom: 1px solid rgba(255, 255, 255, 0.03); padding-bottom: 6px; } .qv-spec-label { color: var(--text-muted); font-weight: 500; } .qv-spec-value { color: var(--text-main); font-weight: 600; } .qv-actions-row { display: flex; gap: 16px; margin-bottom: 24px; } .qv-qty { background: rgba(255, 255, 255, 0.02); border: 1px solid var(--border-clean); border-radius: 2px; /* square corner */ padding: 2px; } .qv-buy-btn { flex-grow: 1; justify-content: center; border-radius: 2px !important; /* square corner */ } .qv-footer-links { margin-top: 16px; border-top: 1px solid rgba(255, 255, 255, 0.05); padding-top: 16px; } .sportycards-link-btn { font-family: var(--font-heading); font-size: 0.85rem; font-weight: 600; color: var(--text-muted); display: inline-flex; align-items: center; gap: 8px; transition: var(--transition-fast); } .sportycards-link-btn:hover { color: var(--primary); } @media (max-width: 900px) { .quickview-container { padding: 24px; } .quickview-wrapper { grid-template-columns: 1fr; gap: 24px; } .quickview-media { max-width: 240px; margin: 0 auto; } .qv-title { font-size: 1.4rem; } .qv-price { font-size: 1.6rem; } } /* Responsiveness adjustments */ @media (max-width: 1200px) { .hero h1 { font-size: 3.2rem; } .products-grid { grid-template-columns: repeat(3, 1fr); } .features-grid { grid-template-columns: repeat(2, 1fr); } .pack-tiers-selector { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 992px) { .hero-wrapper { grid-template-columns: 1fr; gap: 50px; } .hero-visuals { height: 480px; order: -1; } .psa-grid, .now-wrapper { grid-template-columns: 1fr; gap: 40px; } .products-grid { grid-template-columns: repeat(2, 1fr); } nav ul { display: none; } .footer-grid { grid-template-columns: repeat(2, 1fr); } .pack-tiers-selector { grid-template-columns: 1fr; } } @media (max-width: 768px) { .hero h1 { font-size: 2.6rem; } .hero-actions { flex-direction: column; gap: 10px; } .features-grid { grid-template-columns: 1fr; } .products-grid { grid-template-columns: 1fr; } .section-header { flex-direction: column; align-items: flex-start; gap: 16px; } .shop-tabs { width: 100%; overflow-x: auto; white-space: nowrap; } .footer-grid { grid-template-columns: 1fr; } .footer-bottom { flex-direction: column; gap: 16px; text-align: center; } } .theme-switch-btn { background: transparent; border: 1px solid var(--border-clean); border-radius: 50%; width: 38px; height: 38px; display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--text-main); transition: var(--transition-fast); } .theme-switch-btn:hover { border-color: rgba(255, 255, 255, 0.3); transform: scale(1.05); } body.light-mode .theme-switch-btn:hover { border-color: rgba(0, 0, 0, 0.2); } body.light-mode .ambient-glow { opacity: 0.05; } /* Card shadow is constant */ /* About Me Section - exact notustv.live retro pixel style */ .about-me-section { padding: 80px 0; } .about-me-section * { font-family: 'Press Start 2P', monospace !important; } .about-me-head { display: flex; align-items: baseline; gap: 18px; margin-bottom: 24px; } .about-me-num { font-size: 0.75rem; color: #ffffff; /* Neon cyan from notustv.live */ text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.6); } .about-me-title { font-size: 1.6rem; color: #ffffff; text-shadow: 3px 3px 0 rgba(0, 0, 0, 0.6); text-transform: uppercase; } .about-me-highlight { color: #ffffff; text-shadow: 0 0 10px rgba(255, 255, 255, 0.55); } .about-me-rule { flex-grow: 1; height: 1px; background: repeating-linear-gradient(to right, rgba(255, 255, 255, 0.15) 0 6px, transparent 6px 12px); margin-top: 8px; } .about-me-desc { font-size: 0.6rem; line-height: 1.8; color: rgba(243, 246, 255, 0.8); margin-bottom: 48px; letter-spacing: 0.5px; } .about-me-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; position: relative; } .about-me-card { position: relative; background: var(--bg-surface); backdrop-filter: blur(22px) saturate(1.6); -webkit-backdrop-filter: blur(22px) saturate(1.6); border-radius: 2px; border: none; padding: 28px 24px; box-shadow: var(--card-shadow); transition: transform 320ms cubic-bezier(.2,.8,.2,1); display: flex; flex-direction: column; } .about-me-card:hover { transform: translateY(-4px); } .about-me-card-num { font-size: 1.4rem; color: #ffffff; margin-bottom: 16px; display: inline-block; text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.5), 0 0 10px rgba(255, 255, 255, 0.4); } .about-me-card h3 { font-size: 0.7rem; line-height: 1.4; color: #ffffff; margin-bottom: 14px; letter-spacing: 1px; } .about-me-card p { font-size: 0.5rem; line-height: 1.8; color: rgba(243, 246, 255, 0.7); margin: 0; letter-spacing: 0.3px; } /* Connective arrows between steps */ .about-me-card:not(:last-child)::after { content: ">"; position: absolute; right: -16px; top: 50%; transform: translate(50%, -50%); font-size: 0.8rem; color: #ffffff; text-shadow: 0 0 8px rgba(255, 255, 255, 0.6); z-index: 2; pointer-events: none; } @media (max-width: 768px) { .about-me-grid { grid-template-columns: 1fr; gap: 32px; } .about-me-card:not(:last-child)::after { content: "V"; bottom: -16px; right: 50%; top: auto; transform: translate(50%, 50%); } } /* Premium Glassmorphic Dropdown Menu */ .nav-dropdown-wrapper { position: relative; } /* Dropdown trigger button inherits nav a but needs extra style */ .dropdown-trigger { cursor: pointer; display: flex; align-items: center; gap: 4px; user-select: none; } .dropdown-arrow { font-size: 0.7rem; margin-left: 4px; transition: transform 0.3s ease; } .dropdown-arrow.rotate-up { transform: rotate(180deg); } .nav-dropdown { position: absolute; top: calc(100% + 18px); left: 50%; transform: translateX(-50%) translateY(10px); width: 480px; background: rgba(12, 14, 18, 0.9); backdrop-filter: blur(40px) saturate(1.8); -webkit-backdrop-filter: blur(40px) saturate(1.8); border: 1px solid var(--border-clean); border-radius: 16px; box-shadow: var(--card-shadow-hover); padding: 20px; display: grid; grid-template-columns: 1fr 1fr; gap: 20px; z-index: 1000; opacity: 0; visibility: hidden; pointer-events: none; transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease, visibility 0.3s ease; } /* Single column variant */ .nav-dropdown.single-col { width: 240px; display: block; padding: 12px; grid-template-columns: none; } .nav-dropdown.open { opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%) translateY(0); } .dropdown-column h4 { font-family: var(--font-heading); font-size: 0.8rem; font-weight: 700; color: var(--primary); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 12px; border-bottom: 1px solid var(--border-clean); padding-bottom: 6px; } .dropdown-column ul { display: flex; flex-direction: column; gap: 8px !important; list-style: none; padding: 0; margin: 0; } .dropdown-column li { padding: 0; } .dropdown-column a { font-family: var(--font-heading); font-size: 0.85rem; font-weight: 500; color: var(--text-muted) !important; padding: 4px 0 !important; display: inline-block; transition: color 0.2s ease, transform 0.2s ease; text-transform: none !important; } /* Remove default link brackets for sub-items to keep it ultra clean */ .dropdown-column a::before, .dropdown-column a::after { display: none !important; } .dropdown-column a:hover { color: var(--text-main) !important; transform: translateX(4px); } /* Premium Glassmorphic Carousel */ .carousel-container { position: relative; display: flex; align-items: center; justify-content: center; width: 100%; margin-top: 40px; padding: 20px 0; gap: 20px; } .carousel-track-wrapper { overflow: hidden; width: 100%; max-width: 980px; padding: 40px 0; } .carousel-track { display: flex; justify-content: flex-start; align-items: center; gap: 30px; transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1); will-change: transform; } .carousel-card { flex: 0 0 300px; width: 300px; transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.5s ease, box-shadow 0.5s ease; cursor: pointer; will-change: transform, opacity; } /* Side products in carousel: scaled down and slightly faded */ .carousel-card.side { transform: scale(0.86); opacity: 0.5; pointer-events: auto; filter: blur(1px); } .carousel-card.side:hover { opacity: 0.75; filter: none; } /* Center active product: in full relief and scaled up */ .carousel-card.active { transform: scale(1); opacity: 1; z-index: 10; filter: none; box-shadow: var(--shadow-clean-hover); } /* Glass Carousel Arrows */ .carousel-arrow { background: var(--bg-surface); border: none; color: var(--text-main); width: 50px; height: 50px; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); box-shadow: var(--shadow-clean); transition: var(--transition-smooth); z-index: 20; flex-shrink: 0; } .carousel-arrow:hover { color: var(--text-main); transform: scale(1.1); } .carousel-arrow:active { transform: scale(0.95); } @media (max-width: 768px) { .carousel-track { gap: 15px; } .carousel-card { flex: 0 0 250px; width: 250px; } .carousel-card.side { display: none; /* Hide side cards on mobile to prevent overflow */ } .carousel-card.active { transform: scale(1) translateY(0); } } /* =================================================== NOTUS CARTE — Final Polish Rules - Logo image sizing - Consistent glass smoke effect (both themes) - Elegant card/button roundness =================================================== */ /* Logo image in navbar and footer */ .logo-img { height: 34px; width: auto; object-fit: contain; display: block; transition: opacity 0.2s ease; } .logo:hover .logo-img { opacity: 0.85; } /* Rounded glass cards - clean values, no !important chaos */ .feature-card { border: none; } .about-me-card { border-radius: 14px; border: 1px solid var(--border-clean); } .pack-glass-banner { border-radius: 12px; border: 1px solid var(--border-clean); } .carousel-card { border-radius: 14px; overflow: hidden; } /* Primary and glass buttons — modern soft rounding (not pill) */ .primary-btn { border-radius: var(--btn-radius); } .glass-btn { border-radius: var(--btn-radius); } /* Small circular/square buttons stay as they are */ .add-to-cart-btn { border-radius: 50%; } /* Search bar */ .search-bar input { border-radius: var(--btn-radius) !important; padding-left: 36px; } /* Nav dropdown — single clean list (not 2-col on index.html) */ .dropdown-single-list { display: flex !important; flex-direction: column !important; gap: 4px !important; list-style: none; padding: 0; margin: 0; grid-template-columns: none !important; } /* Constant smoked glass effect in BOTH light and dark themes */ /* The dark smoke panels must NEVER turn white */ .product-card, .about-me-card, .pack-glass-banner { background: var(--bg-surface); backdrop-filter: blur(22px) saturate(1.6); -webkit-backdrop-filter: blur(22px) saturate(1.6); box-shadow: var(--shadow-clean); } /* In light mode: text inside dark glass must stay white for readability */ body.light-mode .product-card .product-title, body.light-mode .product-card .product-meta, body.light-mode .product-card .product-desc, body.light-mode .product-card .product-price, body.light-mode .product-card .product-price-old, body.light-mode .feature-card h3, body.light-mode .feature-card p, body.light-mode .about-me-card h3, body.light-mode .about-me-card p, body.light-mode .pack-glass-banner h4, body.light-mode .pack-glass-banner .pack-price, body.light-mode .pack-glass-banner .pack-desc { color: #ffffff; } body.light-mode .product-card .product-meta, body.light-mode .product-card .product-desc, body.light-mode .product-card .product-price-old, body.light-mode .feature-card p, body.light-mode .about-me-card p, body.light-mode .pack-glass-banner .pack-desc { color: rgba(255, 255, 255, 0.65); } body.light-mode .add-to-cart-btn { color: #ffffff; border-color: rgba(255, 255, 255, 0.2); } body.light-mode .add-to-cart-btn:hover { background: var(--primary); color: #000000; border-color: var(--primary); } /* Nav dropdown clean single-list links */ .nav-dropdown a { font-family: var(--font-body); font-weight: 500; font-size: 0.88rem; color: rgba(255, 255, 255, 0.75); padding: 7px 10px; display: flex; align-items: center; gap: 8px; border-radius: 8px; transition: background 0.2s ease, color 0.2s ease; } .nav-dropdown a:hover { color: #ffffff; background: rgba(255, 255, 255, 0.06); } .nav-dropdown a::before, .nav-dropdown a::after { display: none !important; } /* nav-dropdown needs a wider single-column layout, not 2 columns */ .nav-dropdown.single-col { width: 260px; display: block; padding: 12px; } /* ===== Feature / About cards hover fix in light mode ===== */ body.light-mode .about-me-card:hover { box-shadow: var(--card-shadow-hover); } /* ============================================================ USER-REQUESTED POLISH — frameless clean look, rounder buttons, tactile presses & gentle scroll reveals ============================================================ */ /* Frameless feature cards: text + divider adapt to light theme */ body.light-mode .feature-card h3 { color: var(--text-main); } body.light-mode .feature-card p { color: var(--text-muted); } body.light-mode .feature-card:not(:last-child)::after { background: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,0.12) 22%, rgba(0,0,0,0.12) 78%, transparent 100%); } /* Rounder buttons */ .buy-btn, .pack-glass-banner .buy-btn { border-radius: var(--btn-radius) !important; } .qv-buy-btn { border-radius: var(--btn-radius) !important; } .subpage-nav-link { border-radius: var(--btn-radius) !important; } .checkout-summary-box { border-radius: 12px; } /* Tactile button press */ .primary-btn:active, .glass-btn:active, .buy-btn:active, .qv-buy-btn:active, .add-to-cart-btn:active, .social-btn:active, .carousel-arrow:active { transform: scale(0.96); } /* Gentle scroll-reveal */ .reveal-up { opacity: 0; transform: translateY(26px); transition: opacity 0.85s cubic-bezier(.22,.61,.36,1), transform 0.85s cubic-bezier(.22,.61,.36,1); } .reveal-up.in-view { opacity: 1; transform: none; } .features-grid .feature-card.reveal-up:nth-child(2) { transition-delay: 0.08s; } .features-grid .feature-card.reveal-up:nth-child(3) { transition-delay: 0.16s; } .features-grid .feature-card.reveal-up:nth-child(4) { transition-delay: 0.24s; } .pack-selection-grid .pack-interactive-card.reveal-up:nth-child(2) { transition-delay: 0.10s; } .pack-selection-grid .pack-interactive-card.reveal-up:nth-child(3) { transition-delay: 0.20s; } @media (prefers-reduced-motion: reduce) { .reveal-up { opacity: 1 !important; transform: none !important; transition: none !important; } } /* ===== Liquid-glass sheen on glass surfaces ===== */ .banner::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; border-radius: inherit; background: linear-gradient(135deg, rgba(255,255,255,0.10) 0%, rgba(255,255,255,0) 42%); } .features-section .banner::before { display: none; } .now-card-3d { border-radius: 12px; } .now-card-3d::after { content: ""; position: absolute; inset: 0; z-index: 7; pointer-events: none; border-radius: inherit; background: linear-gradient(130deg, rgba(255,255,255,0.16) 0%, rgba(255,255,255,0) 38%, rgba(255,255,255,0) 64%, rgba(255,255,255,0.05) 100%); } /* ============================================================ MONOCHROME + GLASS SYSTEM — authoritative overrides (white / black / glass only — no yellow, no accent colors) Placed last so it wins over any earlier/duplicate rules. ============================================================ */ /* ---- Universal radius: nav, buttons, social, search, cards ---- */ .primary-btn, .glass-btn, .buy-btn, .qv-buy-btn, .subpage-nav-link, .search-bar input { border-radius: var(--radius) !important; } /* ---- Hero CTA buttons: both glass, identical size ---- */ .hero-actions .glass-btn, .hero-actions .primary-btn { padding: 14px 30px; font-size: 0.95rem; min-width: 190px; justify-content: center; } /* ---- Glass button: clean white-glass, no yellow on hover ---- */ .glass-btn { background: var(--bg-surface); border: 1px solid var(--border-clean); color: var(--text-main); } .glass-btn:hover { background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.35); color: var(--text-main); transform: translateY(-2px); box-shadow: var(--shadow-clean-hover); } /* ---- FEATURES: a single GLASS panel on black; keep the dividers; remove the hover animation entirely ---- */ .features-section .banner { background: var(--bg-surface); backdrop-filter: blur(22px) saturate(1.6); -webkit-backdrop-filter: blur(22px) saturate(1.6); border: none; box-shadow: var(--shadow-clean); border-radius: var(--radius); padding: 30px clamp(20px, 4vw, 48px); } .feature-card { border-radius: 0; background: transparent !important; box-shadow: none !important; } .feature-card:hover { transform: none !important; background: transparent !important; box-shadow: none !important; } .feature-card:hover .feature-icon { transform: none !important; filter: none !important; } .feature-icon { color: var(--text-main); } .feature-card:not(:last-child)::after { background: linear-gradient( to bottom, transparent 0%, rgba(255, 255, 255, 0.28) 18%, rgba(255, 255, 255, 0.28) 82%, transparent 100% ); } /* ---- Social buttons (hero + footer): GLASS, rounded square ---- */ .social-btn, .hero-social-row .social-btn { border-radius: var(--radius) !important; background: var(--bg-surface); border: 1px solid var(--border-clean); color: var(--text-main); backdrop-filter: blur(22px) saturate(1.6); -webkit-backdrop-filter: blur(22px) saturate(1.6); box-shadow: var(--shadow-clean); transition: var(--transition-smooth); } .social-btn { width: 40px; height: 40px; } .hero-social-row .social-btn { width: 48px; height: 48px; } .social-btn:hover, .hero-social-row .social-btn:hover { background: rgba(255, 255, 255, 0.10); border-color: rgba(255, 255, 255, 0.35); color: var(--text-main); transform: translateY(-3px); box-shadow: var(--shadow-clean-hover); } /* ---- Carousel arrows: NO container, just the chevron ---- */ .carousel-arrow { background: transparent !important; border: none !important; box-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; color: var(--text-muted); width: 46px; height: 46px; font-size: 1.6rem; border-radius: 0; } .carousel-arrow:hover { background: transparent !important; border: none !important; box-shadow: none !important; color: var(--text-main); transform: scale(1.18); } .carousel-arrow:active { transform: scale(1.02); } /* ---- Pack tier banner + button: pure glass, no accent color ---- */ .pack-glass-banner { background: var(--bg-surface); backdrop-filter: blur(22px) saturate(1.6); -webkit-backdrop-filter: blur(22px) saturate(1.6); border: none; border-radius: var(--radius); box-shadow: var(--shadow-clean); } .pack-glass-banner .pack-price { color: var(--text-main); } .pack-glass-banner .buy-btn { background: rgba(255, 255, 255, 0.07) !important; border: 1px solid var(--border-clean) !important; color: var(--text-main) !important; backdrop-filter: blur(18px) saturate(1.6); -webkit-backdrop-filter: blur(18px) saturate(1.6); box-shadow: var(--shadow-clean); } .pack-glass-banner .buy-btn:hover { background: rgba(255, 255, 255, 0.14) !important; border-color: rgba(255, 255, 255, 0.35) !important; transform: translateY(-2px); } /* ---- Pack badges: monochrome glass (kill gold/purple/yellow) ---- */ .pack-badge-glow, .standard-foil .pack-badge-glow, .premium-foil .pack-badge-glow, .legendary-foil .pack-badge-glow { border-color: rgba(255, 255, 255, 0.4) !important; color: #ffffff !important; } /* ---- Product tags: monochrome glass pills (kill all colors) ---- */ .product-tag, .tag-hobby, .tag-single, .tag-now, .tag-mystery, .tag-preorder { background: rgba(255, 255, 255, 0.12) !important; color: #ffffff !important; border: 1px solid rgba(255, 255, 255, 0.18); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } /* ---- Misc accent cleanup ---- */ .qv-stock-status { color: var(--text-main); background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.15); } .revealed-glow-effect { box-shadow: inset 0 0 20px rgba(255, 255, 255, 0.18) !important; } .revealed-card { border-color: rgba(255, 255, 255, 0.5) !important; } .zip-track { background: repeating-linear-gradient(90deg, #fff 0, #fff 5px, transparent 5px, transparent 10px) !important; } .zip-handle { background: rgba(255,255,255,0.9) !important; color: #000 !important; } .zip-handle:hover { background: #fff !important; } .remove-item-btn { color: var(--text-muted); } .remove-item-btn:hover { color: var(--text-main); } .newsletter-form button { color: var(--text-dark); } /* ---- Footer social specifically square-rounded glass ---- */ footer .social-btn { color: var(--text-main); } /* ============================================================ BATCH 3 — badge removal, navbar size, glossy gel glass, dropdown (hover + left align), product-card split, shop filters + breadcrumb, richer reveal animations ============================================================ */ /* Remove the "CALCIO" logo badge everywhere */ .logo-badge { display: none !important; } /* Bigger, clearer nav links to match the enlarged bar */ nav a { font-size: 0.95rem; padding: 9px 16px; } /* ---- Glossy "gel" glass: stronger blur + visible sheen overlay ---- */ .banner, .product-card, .product-info, .pack-glass-banner, .now-card-3d, .glass-btn, .carousel-card, .feature-glass, header { backdrop-filter: blur(28px) saturate(1.7) !important; -webkit-backdrop-filter: blur(28px) saturate(1.7) !important; } /* A subtle top-down gloss highlight that reads as wet "gel" */ .glass-gloss { position: relative; } .product-info::after, .pack-glass-banner::before, .features-section .banner::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 45%; pointer-events: none; border-radius: inherit; background: linear-gradient(to bottom, rgba(255,255,255,0.10), rgba(255,255,255,0)); z-index: 0; } /* ---- HERO buttons: primary = solid white, glass = gel ---- */ .hero-actions .primary-btn { background: #ffffff; color: #000000; border: 1px solid #ffffff; } .hero-actions .primary-btn:hover { background: #e9e9e9; transform: translateY(-2px); } /* ---- Shop dropdown: opens on HOVER, minimal, left-aligned ---- */ .nav-dropdown-wrapper:hover .nav-dropdown, .nav-dropdown-wrapper:focus-within .nav-dropdown { opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%) translateY(0); } .nav-dropdown-wrapper:hover .dropdown-arrow { transform: rotate(180deg); } .nav-dropdown.single-col { width: 250px; padding: 8px; background: rgba(16, 18, 23, 0.78); backdrop-filter: blur(30px) saturate(1.7); -webkit-backdrop-filter: blur(30px) saturate(1.7); border: 1px solid var(--border-clean); border-radius: 14px; box-shadow: 0 20px 50px -16px rgba(0,0,0,0.85); } .dropdown-single-list { gap: 2px !important; } .nav-dropdown a { justify-content: flex-start; text-align: left; gap: 12px; padding: 10px 12px; border-radius: 10px; color: rgba(255,255,255,0.78); } /* Fixed-width icons so every label starts at the same x (clean left align) */ .nav-dropdown a i { width: 18px; text-align: center; color: var(--text-main) !important; opacity: 0.85; flex-shrink: 0; } .nav-dropdown a:hover { background: rgba(255,255,255,0.08); color: #fff; transform: none; } .nav-dropdown a[style*="primary"] { color: #fff !important; } /* active item stays white */ /* ---- PRODUCT CARD: image area plain (on black), info area glass ---- */ .product-card { background: transparent !important; box-shadow: none !important; overflow: visible; } .product-card .product-image-container { background: transparent !important; border-radius: var(--radius) var(--radius) 0 0; } .product-card .product-info { position: relative; background: var(--bg-surface-strong) !important; border-radius: 0 0 var(--radius) var(--radius); box-shadow: var(--shadow-clean); overflow: hidden; } .product-card:hover { transform: translateY(-6px); } .product-card:hover .product-info { box-shadow: var(--shadow-clean-hover); } .product-info > * { position: relative; z-index: 1; } /* ---- SHOP: frameless (no banner box) ---- */ .shop-section .banner { background: transparent !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; border: none !important; box-shadow: none !important; border-radius: 0 !important; padding: 0 !important; opacity: 1 !important; /* never hidden by reveal on the shop page */ transform: none !important; } .shop-section .banner::before, .shop-section .banner::after { display: none !important; } /* ---- SHOP FILTERS: clean glass segmented control that actually reads ---- */ .shop-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px; margin: 26px 0 36px; } .shop-filters { display: flex; flex-wrap: wrap; gap: 8px; padding: 6px; background: var(--bg-surface); backdrop-filter: blur(22px) saturate(1.6); -webkit-backdrop-filter: blur(22px) saturate(1.6); border: 1px solid var(--border-clean); border-radius: 14px; box-shadow: var(--shadow-clean); } .shop-filters .tab-btn { position: static; border: none; background: transparent; color: var(--text-muted); font-family: var(--font-heading); font-weight: 600; font-size: 0.85rem; padding: 9px 16px; border-radius: 10px; cursor: pointer; transition: var(--transition-fast); white-space: nowrap; } .shop-filters .tab-btn::after { display: none !important; } /* kill old underline */ .shop-filters .tab-btn i { margin-right: 7px; opacity: 0.8; font-size: 0.8rem; } .shop-filters .tab-btn:hover { color: var(--text-main); background: rgba(255,255,255,0.06); } .shop-filters .tab-btn.active { color: #000; background: #fff; box-shadow: 0 6px 16px -6px rgba(255,255,255,0.5); } .shop-result-count { font-family: var(--font-heading); font-size: 0.82rem; color: var(--text-muted); white-space: nowrap; } .shop-result-count strong { color: var(--text-main); } /* ---- BREADCRUMB path (category sub-pages) ---- */ .breadcrumb { display: flex; align-items: center; gap: 10px; margin: 0 0 22px; font-family: var(--font-heading); font-size: 0.85rem; color: var(--text-muted); } .breadcrumb a { display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px; border-radius: 10px; background: var(--bg-surface); backdrop-filter: blur(22px) saturate(1.6); -webkit-backdrop-filter: blur(22px) saturate(1.6); border: 1px solid var(--border-clean); box-shadow: var(--shadow-clean); color: var(--text-main); transition: var(--transition-fast); } .breadcrumb a:hover { background: rgba(255,255,255,0.10); border-color: rgba(255,255,255,0.30); transform: translateX(-2px); } .breadcrumb .sep { opacity: 0.5; } .breadcrumb .current { color: var(--text-main); font-weight: 700; } /* ---- Richer appearance/reveal animations (more movement) ---- */ .reveal-up { opacity: 0; transform: translateY(34px) scale(0.985); transition: opacity 0.8s cubic-bezier(.22,.61,.36,1), transform 0.8s cubic-bezier(.22,.61,.36,1); } .reveal-up.in-view { opacity: 1; transform: none; } /* staggered product grid items */ .products-grid .product-card.reveal-up { transition-delay: calc(var(--i, 0) * 60ms); } /* once revealed, restore a snappy hover (don't keep the slow reveal easing) */ .product-card.in-view { transition: transform 0.4s cubic-bezier(0.16,1,0.3,1), box-shadow 0.4s ease, opacity 0.4s ease; transition-delay: 0s; } /* Failsafe: a product card must never stay invisible even if JS is slow/absent */ .products-grid .product-card { animation: card-failsafe 0s linear 2.5s forwards; } @keyframes card-failsafe { to { opacity: 1; transform: none; } } /* keep the shop page header always visible (reveal opacity must not hide filters) */ .shop-section .section-header.reveal-up, .shop-section .block__head.reveal-up { opacity: 1 !important; transform: none !important; } /* ============================================================ (A) PREMIUM LIQUID GLASS SYSTEM (Apple-style Translucent Gel) ============================================================ */ /* Reusable Glass Class & Direct Styling for Key Components */ .glass, .product-card, .features-section .banner, .pack-glass-banner, .quickview-container, .modal-container, .cart-drawer, .nav-dropdown, .glass-btn, .now-card-3d, .about-me-card { background: rgba(10, 12, 16, 0.40) !important; backdrop-filter: blur(24px) saturate(1.6) !important; -webkit-backdrop-filter: blur(24px) saturate(1.6) !important; border: 1px solid rgba(255, 255, 255, 0.05) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 20px 40px -20px rgba(0, 0, 0, 0.6) !important; overflow: hidden !important; transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.4s cubic-bezier(0.16, 1, 0.3, 1), background 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important; } /* Specific Navigation Bar Glass Overrides (Restoring Fixed layout) */ header { background: rgba(10, 12, 16, 0.40) !important; backdrop-filter: blur(24px) saturate(1.6) !important; -webkit-backdrop-filter: blur(24px) saturate(1.6) !important; border: 1px solid rgba(255, 255, 255, 0.05) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 20px 40px -20px rgba(0, 0, 0, 0.6) !important; overflow: hidden !important; transition: all 0.45s cubic-bezier(0.16, 1, 0.3, 1) !important; } header.scrolled { background: rgba(10, 12, 16, 0.70) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), 0 24px 48px -20px rgba(0, 0, 0, 0.9) !important; border-color: rgba(255, 255, 255, 0.10) !important; } /* Specific Cart Drawer Overrides (Restoring Fixed Right alignment) */ .cart-drawer { position: fixed !important; top: 0 !important; right: 0 !important; height: 100vh !important; width: 400px !important; max-width: 100% !important; z-index: 9999 !important; background: rgba(10, 12, 16, 0.82) !important; backdrop-filter: blur(35px) saturate(1.6) !important; -webkit-backdrop-filter: blur(35px) saturate(1.6) !important; border-left: 1px solid rgba(255, 255, 255, 0.08) !important; border-top: none !important; border-right: none !important; border-bottom: none !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), -10px 0 40px rgba(0, 0, 0, 0.8) !important; display: flex !important; flex-direction: column !important; } /* 1px Inner highlights and diagonal gloss sheens */ .glass::before, header::before, .product-card::before, .features-section .banner::before, .pack-glass-banner::before, .quickview-container::before, .modal-container::before, .cart-drawer::before, .nav-dropdown::before, .glass-btn::before, .now-card-3d::before, .about-me-card::before { content: "" !important; position: absolute !important; top: 0 !important; left: 0 !important; width: 100% !important; height: 100% !important; background: linear-gradient(135deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0) 45%) !important; pointer-events: none !important; z-index: 0 !important; } /* Ensure contents stay on top of the gloss sheen */ header > *, .product-card > *, .features-section .banner > *, .pack-glass-banner > *, .quickview-container > *, .modal-container > *, .cart-drawer > *, .nav-dropdown > *, .glass-btn > *, .now-card-3d > *, .about-me-card > * { position: relative !important; z-index: 1 !important; } /* Interactive elements: lift and stronger sheen/border/glow on hover */ .glass-btn:hover, .now-card-3d:hover, .about-me-card:hover, .pack-interactive-card:hover .pack-glass-banner { transform: translateY(-4px) !important; border-color: rgba(255, 255, 255, 0.16) !important; background: rgba(10, 12, 16, 0.50) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.20), 0 28px 55px -14px rgba(0, 0, 0, 0.85) !important; } .product-card:hover { border-color: rgba(255, 255, 255, 0.12) !important; background: rgba(10, 12, 16, 0.48) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 25px 45px rgba(0, 0, 0, 0.8) !important; transform: translateY(-4px) !important; } header:hover, .quickview-container:hover, .modal-container:hover, .cart-drawer:hover, .nav-dropdown:hover { border-color: rgba(255, 255, 255, 0.10) !important; background: rgba(10, 12, 16, 0.48) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 22px 48px -12px rgba(0, 0, 0, 0.75) !important; } /* Restore unified Product Card (No weird transparent split) */ .product-card { background: rgba(10, 12, 16, 0.35) !important; backdrop-filter: blur(22px) saturate(1.6) !important; -webkit-backdrop-filter: blur(22px) saturate(1.6) !important; border: 1px solid rgba(255, 255, 255, 0.05) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 15px 35px rgba(0, 0, 0, 0.65) !important; border-radius: 16px !important; overflow: hidden !important; display: flex !important; flex-direction: column !important; } .product-card .product-info { background: transparent !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; border: none !important; box-shadow: none !important; overflow: visible !important; } /* Correct rounding of cards and buttons */ header { border-radius: 50px !important; } header.scrolled { border-radius: 50px !important; } .product-card { border-radius: 16px !important; } .features-section .banner { border-radius: 16px !important; } .pack-glass-banner { border-radius: 16px !important; } .glass-btn, .primary-btn { border-radius: 50px !important; } .quickview-container, .modal-container { border-radius: 20px !important; } .cart-drawer { border-radius: 20px 0 0 20px !important; } .nav-dropdown { border-radius: 16px !important; } /* Dynamic scroll entrance animations (fade + translate + tiny scale) */ .reveal-up { opacity: 0 !important; transform: translateY(30px) scale(0.98) !important; transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1) !important; } .reveal-up.in-view { opacity: 1 !important; transform: translateY(0) scale(1) !important; } @media (prefers-reduced-motion: reduce) { .reveal-up { opacity: 1 !important; transform: none !important; transition: none !important; } } /* Revamped High-Performance Animated Starfield Background Animation */ body::before { content: "" !important; position: fixed !important; inset: 0 !important; z-index: -2 !important; pointer-events: none !important; background-color: #000000 !important; background-image: radial-gradient(1.5px 1.5px at 10px 10px, #ffffff, rgba(0,0,0,0)), radial-gradient(2px 2px at 150px 150px, rgba(255,255,255,0.9), rgba(0,0,0,0)), radial-gradient(1.5px 1.5px at 300px 80px, rgba(255,255,255,0.8), rgba(0,0,0,0)), radial-gradient(2px 2px at 400px 350px, #ffffff, rgba(0,0,0,0)), radial-gradient(1.5px 1.5px at 550px 200px, rgba(255,255,255,0.7), rgba(0,0,0,0)), radial-gradient(2.5px 2.5px at 700px 50px, #ffffff, rgba(0,0,0,0)), radial-gradient(1.5px 1.5px at 850px 450px, rgba(255,255,255,0.8), rgba(0,0,0,0)), radial-gradient(2px 2px at 1000px 150px, #ffffff, rgba(0,0,0,0)) !important; background-size: 1100px 600px !important; background-repeat: repeat !important; opacity: 0.65 !important; animation: sky-drift-simple 120s linear infinite !important; } @keyframes sky-drift-simple { from { background-position: 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0; } to { background-position: 1100px 600px, 1100px 600px, 1100px 600px, 1100px 600px, 1100px 600px, 1100px 600px, 1100px 600px, 1100px 600px; } } /* ============================================================ STRICT MONOCHROME THEMING & OVERRIDES (Clean, premium vibe) ============================================================ */ :root { --primary: #ffffff !important; --primary-hover: #f0f0f0 !important; --bg-surface: rgba(10, 12, 16, 0.40) !important; --bg-surface-strong: rgba(10, 12, 16, 0.50) !important; --bg-glass-nav: rgba(10, 12, 16, 0.40) !important; --card-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 20px 40px -20px rgba(0, 0, 0, 0.6) !important; --card-shadow-hover: inset 0 1px 0 rgba(255, 255, 255, 0.20), 0 28px 55px -14px rgba(0, 0, 0, 0.85) !important; --shadow-clean: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 20px 40px -20px rgba(0, 0, 0, 0.6) !important; --shadow-clean-hover: inset 0 1px 0 rgba(255, 255, 255, 0.20), 0 28px 55px -14px rgba(0, 0, 0, 0.85) !important; } .neon-yellow-highlight { color: #ffffff !important; } .hand-underline path { stroke: #ffffff !important; } .text-gradient { background: none !important; -webkit-text-fill-color: initial !important; color: #ffffff !important; } /* Separator rules and borders */ .block__rule { background: #ffffff !important; } /* Badges and tags */ .logo-badge { background: #ffffff !important; color: #000000 !important; } .product-tag, .tag-hobby, .tag-single, .tag-now, .tag-mystery, .tag-preorder { background: rgba(255, 255, 255, 0.12) !important; color: #ffffff !important; border: 1px solid rgba(255, 255, 255, 0.18) !important; } /* Pack foil details: ensure monochrome look */ .booster-pack.standard-foil, .booster-pack.premium-foil, .booster-pack.legendary-foil { background: linear-gradient(160deg, #181b20 0%, #2e353f 45%, #0c0e11 100%) !important; } .pack-badge-glow, .standard-foil .pack-badge-glow, .premium-foil .pack-badge-glow, .legendary-foil .pack-badge-glow { border-color: rgba(255, 255, 255, 0.4) !important; color: #ffffff !important; } .meter-fill { background: #ffffff !important; } .countdown-time-val { color: #ffffff !important; } .product-price.discounted { color: #ffffff !important; } /* Slider active tab button */ .shop-filters .tab-btn.active { color: #000000 !important; background: #ffffff !important; box-shadow: 0 6px 16px -6px rgba(255, 255, 255, 0.5) !important; } /* Nav links sliding underline */ nav a::after { background: #ffffff !important; } /* Buttons */ .primary-btn { background: #ffffff !important; color: #000000 !important; border: 1px solid #ffffff !important; } .primary-btn:hover { background: #e6e6e6 !important; color: #000000 !important; } .add-to-cart-btn:hover { background: #ffffff !important; color: #000000 !important; border-color: #ffffff !important; } .qty-btn:hover { color: #ffffff !important; } /* Light mode overrides for text color when backgrounds are pure white */ body.light-mode { background-color: #ffffff !important; color: #000000 !important; } body.light-mode header a { color: #444444 !important; } body.light-mode header a:hover, body.light-mode header a.active { color: #000000 !important; } /* Ensure glass text is always readable inside cards on white bg */ body.light-mode .product-card .product-title, body.light-mode .product-card .product-price, body.light-mode .feature-card h3, body.light-mode .about-me-card h3, body.light-mode .pack-glass-banner h4, body.light-mode .pack-glass-banner .pack-price { color: #ffffff !important; } body.light-mode .product-card .product-meta, body.light-mode .product-card .product-desc, body.light-mode .feature-card p, body.light-mode .about-me-card p, body.light-mode .pack-glass-banner .pack-desc { color: rgba(255, 255, 255, 0.7) !important; } /* ============================================================ NOTUS LIQUID GLASS — single authoritative glass system (notustv.live look: glossy translucent grey "gel" on black) This block is LAST so it wins. The glass is visible WITHOUT relying on backdrop-blur (which is invisible over pure black): a light diagonal gradient fill + a bright 1px inner top edge + hairline border + soft depth shadow. Blur is added on top so it also frosts the starfield / images behind it. ============================================================ */ :root { /* Frosted glass that works ON PURE BLACK (no bright bg to refract). The look is built INTO the panel: subtle diagonal gradient for form, a strong lit top edge, inner depth, hairline border + a frost grain texture overlay. backdrop-blur still frosts the moving orbs behind. */ --glass-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E"); --glass-gradient: linear-gradient(135deg, rgba(255,255,255,0.13) 0%, rgba(255,255,255,0.04) 46%, rgba(255,255,255,0.07) 100%); --glass-gradient-strong: linear-gradient(135deg, rgba(255,255,255,0.18) 0%, rgba(255,255,255,0.06) 46%, rgba(255,255,255,0.10) 100%); --glass-border: rgba(255, 255, 255, 0.12); --glass-shadow: inset 0 1px 0 rgba(255,255,255,0.55), /* lit top lip — the key glass tell */ inset 0 0 0 1px rgba(255,255,255,0.04), inset 0 -24px 40px -28px rgba(0,0,0,0.6), /* inner bottom depth */ 0 16px 40px -12px rgba(0,0,0,0.6); --glass-blur: blur(24px) saturate(1.8) brightness(1.12); } /* ----- THE KEY: glass needs bright, busy content BEHIND it to frost ----- notustv's glass looks great because a rich colourful artwork sits behind it. We're monochrome, so we build a luminous grey "nebula": big bright blurred orbs over a soft radial mesh. This gives backdrop-filter real tonal variation to refract, so the panels finally read as true frosted glass. */ html { background: #000 !important; } .ambient-glow { display: block !important; position: fixed; z-index: -1; /* behind content, above the black bg */ width: 620px; height: 620px; border-radius: 50%; filter: blur(80px); opacity: 0.55; pointer-events: none; will-change: transform; mix-blend-mode: screen; } .glow-1 { top: -180px; left: -140px; background: radial-gradient(circle, rgba(255,255,255,0.85), transparent 68%); animation: orb-float-1 24s ease-in-out infinite; } .glow-2 { bottom: -220px; right: -140px; width: 680px; height: 680px; background: radial-gradient(circle, rgba(200,214,255,0.75), transparent 68%); animation: orb-float-2 30s ease-in-out infinite; } .glow-3 { top: 30%; left: 48%; width: 540px; height: 540px; background: radial-gradient(circle, rgba(255,255,255,0.65), transparent 68%); animation: orb-float-3 34s ease-in-out infinite; } .glow-4 { top: 60%; left: -180px; width: 560px; height: 560px; background: radial-gradient(circle, rgba(190,205,240,0.70), transparent 68%); animation: orb-float-1 28s ease-in-out infinite reverse; } @keyframes orb-float-1 { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(110px,80px) scale(1.15); } } @keyframes orb-float-2 { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(-120px,-70px) scale(1.12); } } @keyframes orb-float-3 { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(-80px,90px) scale(1.18); } } @media (prefers-reduced-motion: reduce) { .ambient-glow { animation: none !important; } } /* ----- The reusable glass look (EXACT notustv formula) ----- */ header, .banner, .features-section .banner, .product-card .product-info, .pack-glass-banner, .now-card-3d, .glass-btn, .hero-actions .glass-btn, .carousel-card.active, .cart-drawer, .modal-container, .quickview-container, .nav-dropdown, .nav-dropdown.single-col, .social-btn, .hero-social-row .social-btn, .breadcrumb a, .shop-filters, .search-bar input, footer { background-color: rgba(255,255,255,0.04) !important; background-image: var(--glass-grain), var(--glass-gradient) !important; background-size: 160px 160px, auto !important; background-blend-mode: overlay, normal !important; border: 1px solid var(--glass-border) !important; box-shadow: var(--glass-shadow) !important; -webkit-backdrop-filter: var(--glass-blur) !important; backdrop-filter: var(--glass-blur) !important; } /* Stronger fill where text/forms sit over busy content */ header.scrolled, .nav-dropdown, .nav-dropdown.single-col, .cart-drawer, .modal-container, .quickview-container { background-color: rgba(255,255,255,0.07) !important; background-image: var(--glass-grain), var(--glass-gradient-strong) !important; } /* Hover = brighter frost + a stronger lit edge */ .glass-btn:hover, .product-card:hover .product-info, .pack-glass-banner:hover, .social-btn:hover, .hero-social-row .social-btn:hover, .breadcrumb a:hover { background-color: rgba(255,255,255,0.08) !important; background-image: var(--glass-grain), var(--glass-gradient-strong) !important; border-color: rgba(255, 255, 255, 0.22) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,0.7), inset 0 0 0 1px rgba(255,255,255,0.05), 0 18px 44px -12px rgba(0,0,0,0.7) !important; } /* The product IMAGE area stays plain (sits on black), only the info strip below is glass — keep that split intact. */ .product-card { background: transparent !important; border: none !important; box-shadow: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } .product-card .product-image-container { background: transparent !important; border: none !important; box-shadow: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } /* Footer: frameless glass strip over the starfield (keep drifting stars) */ footer { border-left: none !important; border-right: none !important; border-bottom: none !important; border-radius: 0 !important; } /* Navbar floating glass pill */ header { border-radius: 16px !important; } header.scrolled { border-radius: 12px !important; } .now-card-3d, .cart-drawer, .modal-container { position: relative; } /* ============================================================ FLAT BLACK & WHITE — no glass, no blur, no orbs (placed LAST so it overrides every glass rule above) Surfaces = solid near-black delineated by thin white borders. ============================================================ */ /* Pure black background, no mesh, no orbs */ html { background: #000 !important; } .ambient-glow { display: none !important; } /* Kill ALL glass on every panel: solid dark fill + hairline border */ header, .banner, .features-section .banner, .product-card .product-info, .pack-glass-banner, .now-card-3d, .glass-btn, .hero-actions .glass-btn, .carousel-card.active, .cart-drawer, .modal-container, .quickview-container, .nav-dropdown, .nav-dropdown.single-col, .social-btn, .hero-social-row .social-btn, .breadcrumb a, .shop-filters, .search-bar input, footer, .about-me-card, .step, .qv-qty, .quantity-control, .checkout-summary-box, .meter-track { background: #0d0d0f !important; background-image: none !important; border: 1px solid rgba(255, 255, 255, 0.14) !important; box-shadow: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } /* Hover states: just a brighter border, no glow/lift glass */ .about-me-card:hover { background: #161618 !important; background-image: none !important; border-color: rgba(255, 255, 255, 0.45) !important; box-shadow: none !important; } /* Navbar: solid black bar, thin border */ header { background: rgba(8, 8, 9, 0.96) !important; border: 1px solid rgba(255, 255, 255, 0.14) !important; } header.scrolled { background: rgba(5, 5, 6, 0.98) !important; border-color: rgba(255, 255, 255, 0.18) !important; } /* Dropdown / cart / modals: solid black so content stays readable */ .nav-dropdown, .nav-dropdown.single-col, .cart-drawer, .modal-container, .quickview-container { background: #0a0a0b !important; } /* Footer: pure black, only a thin top divider (keep starfield stars) */ footer { background: #000 !important; border: none !important; border-top: 1px solid rgba(255, 255, 255, 0.12) !important; border-radius: 0 !important; } /* Product card: image area transparent on black, info area solid card */ .product-card { background: transparent !important; border: none !important; box-shadow: none !important; } .product-card .product-image-container { background: transparent !important; border: none !important; box-shadow: none !important; } .product-card .product-info { border-radius: 0 0 var(--radius) var(--radius) !important; } /* PRIMARY button = solid white on black */ .primary-btn, .hero-actions .primary-btn { background: #ffffff !important; background-image: none !important; color: #000000 !important; border: 1px solid #ffffff !important; box-shadow: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } .primary-btn:hover, .hero-actions .primary-btn:hover { background: #d9d9d9 !important; color: #000000 !important; border-color: #d9d9d9 !important; } /* GLASS/outline button = transparent w/ white border, inverts on hover */ .glass-btn, .hero-actions .glass-btn { background: transparent !important; color: #ffffff !important; border: 1px solid rgba(255, 255, 255, 0.55) !important; } .glass-btn:hover, .hero-actions .glass-btn:hover { background: #ffffff !important; color: #000000 !important; border-color: #ffffff !important; } /* Social tiles: outline, invert on hover */ .social-btn, .hero-social-row .social-btn { background: transparent !important; border: 1px solid rgba(255, 255, 255, 0.30) !important; color: #ffffff !important; } .social-btn:hover, .hero-social-row .social-btn:hover { background: #ffffff !important; border-color: #ffffff !important; color: #000000 !important; } /* Shop filter pills: flat; active = white, inactive = transparent */ .shop-filters { background: transparent !important; border: 1px solid rgba(255, 255, 255, 0.14) !important; } .shop-filters .tab-btn { background: transparent !important; color: var(--text-muted) !important; } .shop-filters .tab-btn:hover { background: rgba(255,255,255,0.06) !important; color: #fff !important; } .shop-filters .tab-btn.active { background: #ffffff !important; color: #000000 !important; box-shadow: none !important; } /* Carousel arrows stay frameless (just chevrons) */ .carousel-arrow { background: transparent !important; border: none !important; box-shadow: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } /* Search input: flat dark field */ .search-bar input { background: rgba(255,255,255,0.05) !important; border: 1px solid rgba(255, 255, 255, 0.14) !important; } .search-bar input:focus { border-color: rgba(255,255,255,0.4) !important; } /* Newsletter send button stays solid white */ .newsletter-form button { background: #fff !important; color: #000 !important; } /* ============================================================ PRODUCT CARD — reference "sneaker card" layout Dark rounded card · light image area · heart top-right · title + brand · big price + circular white bag button. Applies to shop grid AND carousel cards (.product-card). Placed LAST so it overrides the flat B&W card rules. ============================================================ */ .product-card, .carousel-card.active, .carousel-card.side { background: #1a1b1e !important; background-image: none !important; border: none !important; border-radius: 26px !important; padding: 12px !important; box-shadow: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; display: flex; flex-direction: column; overflow: hidden; } .product-card:hover { transform: translateY(-6px); } /* Light image area (rounded panel inside the dark card) */ .product-card .product-image-container { background: #ececec !important; border: none !important; border-radius: 18px !important; aspect-ratio: 1 / 0.95; padding: 20px; display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; } .product-card .product-image-container img { width: 100%; height: 100%; object-fit: contain; padding: 0; } /* Heart favourite — top-right dark circle over the light image */ .product-card .fav-btn { position: absolute; top: 12px; right: 12px; width: 38px; height: 38px; border-radius: 50%; border: none; background: #1a1b1e; color: #ffffff; display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 6; font-size: 0.95rem; transition: transform 0.2s ease, background 0.2s ease; } .product-card .fav-btn:hover { transform: scale(1.12); background: #000; } .product-card .fav-btn.is-fav i { color: #ffffff; } /* Category tag — subtle dark pill, top-left */ .product-card .product-tag { top: 12px !important; left: 12px !important; background: rgba(0, 0, 0, 0.55) !important; color: #ffffff !important; border: none !important; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); box-shadow: none !important; } /* Info area = transparent (it's part of the dark card) */ .product-card .product-info { background: transparent !important; background-image: none !important; border: none !important; border-radius: 0 !important; box-shadow: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; padding: 16px 8px 6px !important; flex-grow: 1; } /* Title (big) then brand (small grey) — match reference order */ .product-card .product-title { order: 1; font-size: 1.15rem; font-weight: 700; color: #ffffff; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin: 0 0 3px; } .product-card .product-meta { order: 2; color: #8a8a90; font-size: 0.85rem; text-transform: none; margin: 0; } .product-card .product-desc { display: none !important; } /* Bottom row: big price + circular white bag button */ .product-card .product-footer { order: 3; border-top: none !important; padding-top: 0 !important; margin-top: 20px !important; display: flex; align-items: center; justify-content: space-between; gap: 12px; } .product-card .product-price, .product-card .product-price.discounted { font-size: 1.85rem; font-weight: 800; color: #ffffff !important; line-height: 1; } .product-card .product-price-old { font-size: 0.9rem; color: #8a8a90; } .product-card .add-to-cart-btn { width: 54px; height: 54px; border-radius: 50% !important; background: #ffffff !important; color: #000000 !important; border: none !important; font-size: 1.15rem; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: transform 0.2s ease, background 0.2s ease; } .product-card .add-to-cart-btn:hover { background: #dcdcdc !important; color: #000000 !important; transform: scale(1.06); } /* Carousel: side cards keep their scale/opacity but same card skin */ .carousel-card.side { transform: scale(0.86); } .carousel-card.active { transform: scale(1); } /* ----- Pack tier banners: same dark-rounded card language ----- */ .pack-glass-banner { background: #1a1b1e !important; background-image: none !important; border: none !important; border-radius: 22px !important; padding: 22px 20px !important; box-shadow: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } .pack-glass-banner .pack-price { font-size: 1.7rem; font-weight: 800; color: #ffffff !important; } .pack-glass-banner .buy-btn { background: #ffffff !important; color: #000000 !important; border: none !important; border-radius: 14px !important; font-weight: 700; } .pack-glass-banner .buy-btn:hover { background: #dcdcdc !important; color: #000000 !important; } /* ============================================================ BATCH FINAL — containerless navbar, dropdown fix, free hero, reference pack + now cards, footer, newsletter, square buttons (LAST block — wins over everything above) ============================================================ */ /* ---- Square-ish buttons everywhere (slightly rounded corners) ---- */ .primary-btn, .hero-actions .primary-btn, .glass-btn, .hero-actions .glass-btn, .shop-filters, .shop-filters .tab-btn, .breadcrumb a, .search-bar input, .newsletter-form input, .newsletter-form button, .social-btn, .hero-social-row .social-btn, .qv-buy-btn, .checkout-btn, .tab-btn { border-radius: 8px !important; } /* Circular product/pack/now bag buttons stay round (reference) */ .product-card .add-to-cart-btn, .pack-glass-banner .add-to-cart-btn, .now-product-card .add-to-cart-btn { border-radius: 50% !important; } .bag-ico { display: block; } /* ---- NAVBAR: no container/pill. Transparent; only a blur veil on scroll ---- */ header#main-header, header { background: transparent !important; background-image: none !important; border: none !important; box-shadow: none !important; border-radius: 0 !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; width: 100% !important; left: 0 !important; transform: none !important; top: 0 !important; padding: 14px 0 !important; overflow: visible !important; } header.scrolled { background: rgba(0, 0, 0, 0.45) !important; -webkit-backdrop-filter: blur(16px) saturate(1.4) !important; backdrop-filter: blur(16px) saturate(1.4) !important; padding: 10px 0 !important; } /* keep nav content aligned with the page container width */ header .nav-wrapper { overflow: visible !important; } nav, .nav-dropdown-wrapper { overflow: visible !important; } /* ---- SHOP DROPDOWN: reliably visible on hover AND click ---- */ .nav-dropdown-wrapper { position: relative; } .nav-dropdown { position: absolute; top: calc(100% + 14px); left: 0; transform: translateY(8px); min-width: 230px; background: #0c0c0d !important; border: 1px solid rgba(255,255,255,0.14) !important; border-radius: 12px !important; box-shadow: 0 24px 50px -16px rgba(0,0,0,0.9) !important; padding: 8px !important; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .22s ease, transform .22s ease, visibility .22s; z-index: 2000; } .nav-dropdown-wrapper:hover .nav-dropdown, .nav-dropdown-wrapper:focus-within .nav-dropdown, .nav-dropdown.open { opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; transform: translateY(0) !important; } .nav-dropdown-wrapper:hover .dropdown-arrow { transform: rotate(180deg); } /* a small hover bridge so moving cursor to the menu doesn't close it */ .nav-dropdown::before { content: ""; position: absolute; top: -16px; left: 0; right: 0; height: 16px; } .nav-dropdown a { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 8px; color: rgba(255,255,255,0.82); font-size: 0.9rem; white-space: nowrap; } .nav-dropdown a i { width: 18px; text-align: center; color: #fff !important; opacity: 0.85; } .nav-dropdown a:hover { background: rgba(255,255,255,0.08); color: #fff; } /* ---- HERO: free / full-bleed, no container box, bigger cards, no glass ---- */ .hero-wrapper { max-width: 1500px !important; width: 100% !important; margin: 0 auto !important; padding: 0 max(28px, 5vw) !important; display: grid; grid-template-columns: 1.05fr 1fr; gap: 40px; align-items: center; } .hero-visuals { height: 660px !important; gap: 18px !important; } .visual-card-wrap { padding: 9px 0 !important; } .visual-card { background: transparent !important; border: none !important; box-shadow: none !important; border-radius: 14px !important; } .visual-card .card-shine { display: none !important; } /* remove glass sheen behind cards */ /* ---- PRODUCT-INFO clean (no leftover frost/gradient/effect) ---- */ .product-card .product-info, .product-card .product-info::after, .product-card .product-info::before { background: transparent !important; background-image: none !important; box-shadow: none !important; border: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } .product-card .product-info::after, .product-card .product-info::before { content: none !important; } /* ---- PACK TIER CARDS → reference product-card look ---- */ .pack-tiers-selector { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; } .pack-interactive-card { background: #1a1b1e !important; border: none !important; border-radius: 26px !important; padding: 12px !important; box-shadow: none !important; display: flex; flex-direction: column; transition: transform .35s cubic-bezier(.16,1,.3,1); } .pack-interactive-card:hover { transform: translateY(-6px); } /* light image area holding the booster pack */ .pack-visual-container { background: #ececec !important; border-radius: 18px !important; aspect-ratio: 1 / 0.98; padding: 22px; display: flex; align-items: center; justify-content: center; overflow: hidden; } .pack-visual-container .booster-pack { height: 100%; width: auto; aspect-ratio: 0.7 / 1; } /* banner = transparent info area inside the dark card */ .pack-glass-banner { background: transparent !important; border: none !important; border-radius: 0 !important; box-shadow: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; padding: 16px 8px 6px !important; } .pack-glass-banner .pack-title { font-size: 1.15rem; font-weight: 700; color: #fff; margin: 0 0 3px; } .pack-glass-banner .pack-meta { color: #8a8a90; font-size: 0.85rem; margin: 0; } .pack-glass-banner .pack-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 18px; } .pack-glass-banner .pack-price { font-size: 1.7rem; font-weight: 800; color: #fff !important; } .pack-glass-banner .add-to-cart-btn.buy-btn { width: 54px; height: 54px; border-radius: 50% !important; background: #fff !important; color: #000 !important; border: none !important; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: transform .2s ease, background .2s ease; } .pack-glass-banner .add-to-cart-btn.buy-btn:hover { background: #dcdcdc !important; transform: scale(1.06); } /* ---- TOPPS NOW: reference card on the right, sized neatly ---- */ .now-visual { display: flex; justify-content: center; } .now-product-card { max-width: 360px; width: 100%; } .now-product-card .product-image-container { aspect-ratio: 1 / 1.15; } .now-product-card .product-image-container img { object-fit: contain; } /* ---- FOOTER: remove the divider line entirely ---- */ footer { border-top: none !important; } .footer-bottom { border-top: none !important; } /* ---- NEWSLETTER input: clean dark field ---- */ .newsletter-form input { background: rgba(255,255,255,0.05) !important; border: 1px solid rgba(255,255,255,0.16) !important; color: #fff !important; padding: 12px 48px 12px 14px !important; font-size: 0.85rem !important; } .newsletter-form input::placeholder { color: #8a8a90 !important; } .newsletter-form input:focus { border-color: rgba(255,255,255,0.45) !important; outline: none !important; } .newsletter-form button { background: #fff !important; color: #000 !important; border: none !important; } /* ---- Responsive: stack hero + grids on small screens ---- */ @media (max-width: 900px) { .hero-wrapper { grid-template-columns: 1fr; } .pack-tiers-selector { grid-template-columns: 1fr; } } /* ============================================================ FINALE — unified "card" UI system Surfaces = solid #1a1b1e, clean 1px lines, card radius. No glass/frost. White primary buttons. This block is LAST. ============================================================ */ :root { --card-surface: #1a1b1e; --card-line: rgba(255,255,255,0.10); --card-radius: 20px; } /* 1) CONTAINERLESS sections: features strip + Topps Now (no boxes) */ .features-section .banner, .features-section .banner.is-in { background: transparent !important; background-image: none !important; border: none !important; box-shadow: none !important; border-radius: 0 !important; padding: 8px 0 !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } .now-highlight, .now-highlight .container, .now-wrapper, .now-info, .now-visual { background: transparent !important; background-image: none !important; border: none !important; box-shadow: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } /* 2) PRODUCT CARD HOVER — info area stays perfectly clean (no square) */ .product-card:hover .product-info, .now-product-card:hover .product-info, .product-card .product-info:hover { background: transparent !important; background-image: none !important; border: none !important; box-shadow: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } /* 3) NAVBAR readable on scroll (solid veil, content no longer bleeds through) */ header#main-header.scrolled, header.scrolled { background: rgba(8,9,11,0.9) !important; -webkit-backdrop-filter: blur(26px) saturate(1.5) !important; backdrop-filter: blur(26px) saturate(1.5) !important; box-shadow: 0 14px 36px -12px rgba(0,0,0,0.9) !important; border-radius: 0 !important; border: none !important; } /* 4) PACK OPENER — compress horizontally, elongate image area (no empty space) */ .pack-tiers-selector, .pack-selection-grid { gap: 16px !important; max-width: 1040px; margin: 0 auto; } .pack-visual-container { aspect-ratio: 1 / 1.32 !important; padding: 14px !important; } .pack-visual-container .booster-pack { height: 100% !important; width: auto !important; aspect-ratio: 0.64 / 1 !important; } /* 5) CONTROLS in card language (dark surface + card radius) */ .social-btn, .hero-social-row .social-btn, .newsletter-form input, .search-bar input, .glass-btn, .hero-actions .glass-btn, .breadcrumb a, .cart-trigger { background: var(--card-surface) !important; background-image: none !important; border: 1px solid var(--card-line) !important; border-radius: 14px !important; box-shadow: none !important; color: #fff !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } .social-btn:hover, .hero-social-row .social-btn:hover, .glass-btn:hover, .hero-actions .glass-btn:hover, .breadcrumb a:hover, .cart-trigger:hover { background: #26272b !important; color: #fff !important; border-color: rgba(255,255,255,0.22) !important; transform: translateY(-2px); } .newsletter-form input::placeholder { color: #8a8a90 !important; } .newsletter-form input:focus, .search-bar input:focus { background: #202125 !important; border-color: rgba(255,255,255,0.3) !important; outline: none !important; } .social-btn { width: 44px !important; height: 44px !important; } .hero-social-row .social-btn { width: 48px !important; height: 48px !important; } /* circular heart + bag buttons (as in the reference photo) */ .product-card .add-to-cart-btn, .pack-glass-banner .add-to-cart-btn, .now-product-card .add-to-cart-btn, .product-card .fav-btn { border-radius: 50% !important; } /* white primary CTAs + newsletter send, card radius */ .primary-btn, .hero-actions .primary-btn, .newsletter-form button { border-radius: 14px !important; } /* 6) SHOP DROPDOWN — clean card panel, correctly positioned under "Shop" */ .nav-dropdown-wrapper { position: relative; } .nav-dropdown, .nav-dropdown.single-col { position: absolute !important; top: calc(100% + 12px) !important; left: 50% !important; transform: translateX(-50%) translateY(8px) !important; width: 250px !important; min-width: 250px !important; padding: 8px !important; background: var(--card-surface) !important; background-image: none !important; border: 1px solid var(--card-line) !important; border-radius: 16px !important; box-shadow: 0 26px 50px -16px rgba(0,0,0,0.9) !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .2s ease, transform .2s ease, visibility .2s !important; z-index: 3000 !important; } .nav-dropdown-wrapper:hover .nav-dropdown, .nav-dropdown-wrapper:focus-within .nav-dropdown, .nav-dropdown.open { opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; transform: translateX(-50%) translateY(0) !important; } .nav-dropdown::before { content: ""; position: absolute; top: -14px; left: 0; right: 0; height: 14px; } .nav-dropdown a { display: flex !important; align-items: center; gap: 12px; padding: 11px 12px !important; border-radius: 10px !important; color: rgba(255,255,255,0.82) !important; font-size: 0.9rem; white-space: nowrap; } .nav-dropdown a i { width: 18px; text-align: center; color: #fff !important; opacity: .85; } .nav-dropdown a:hover { background: rgba(255,255,255,0.08) !important; color: #fff !important; } /* 7) QUICK-VIEW MODAL → card style (light image area + dark detail panel) */ .modal-overlay { background: rgba(0,0,0,0.7) !important; } .modal-container, .quickview-container { background: var(--card-surface) !important; background-image: none !important; border: 1px solid var(--card-line) !important; border-radius: var(--card-radius) !important; box-shadow: 0 30px 70px -20px rgba(0,0,0,0.9) !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } .quickview-media { background: #ececec !important; border: none !important; display: flex; align-items: center; justify-content: center; padding: 28px; } .quickview-card-wrap { background: transparent !important; box-shadow: none !important; } .quickview-card-wrap img { object-fit: contain; } .quickview-card-wrap .card-shine { display: none !important; } .quickview-details { padding: 30px !important; } .qv-category-badge { background: rgba(255,255,255,0.08) !important; color: #fff !important; border: 1px solid var(--card-line) !important; border-radius: 8px !important; } .qv-price, .qv-price .discounted { color: #fff !important; } .qv-specs-table { border-top: 1px solid var(--card-line) !important; } .qv-spec-row { border-bottom: 1px solid var(--card-line) !important; } .qv-qty, .quantity-control { background: #0f0f11 !important; border: 1px solid var(--card-line) !important; border-radius: 12px !important; } .qv-buy-btn, .primary-btn.qv-buy-btn { background: #fff !important; color: #000 !important; border: none !important; border-radius: 14px !important; } .qv-buy-btn:hover { background: #dcdcdc !important; } /* 8) CART DRAWER → card style */ .cart-drawer { background: #0d0d0f !important; background-image: none !important; border-left: 1px solid var(--card-line) !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } .cart-header, .cart-footer { border-color: var(--card-line) !important; } .cart-item { background: var(--card-surface) !important; border: 1px solid var(--card-line) !important; border-radius: 14px !important; box-shadow: none !important; } .cart-item-image { background: #ececec !important; border-radius: 10px !important; } .checkout-btn, .primary-btn.checkout-btn { background: #fff !important; color: #000 !important; border: none !important; border-radius: 14px !important; } .checkout-btn:disabled { opacity: 0.4 !important; } .quantity-control .qty-btn { color: #fff !important; } .remove-item-btn { color: #8a8a90 !important; } .remove-item-btn:hover { color: #fff !important; } /* 9) HERO is ALWAYS free — never a card/banner box, even if it picks up a stray .is-in/.glass/.banner class from the reveal system */ .hero, .hero-wrapper, .hero-content, .hero-content.is-in, .hero-content.glass { background: transparent !important; background-image: none !important; border: none !important; box-shadow: none !important; border-radius: 0 !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; overflow: visible !important; } .hero-content::before, .hero-wrapper::before { content: none !important; display: none !important; } /* ============================================================ FINALE 2 — pure black everywhere, card-only surfaces. Removes starfield/scanline/orbs/telemetry, all leftover containers, restyles quick-view + cart to the product card. LAST block: wins over everything. ============================================================ */ /* 1) PURE BLACK background — kill starfield, scanline, orbs, glows */ html, body { background: #000 !important; } body::before, body::after { content: none !important; display: none !important; background: none !important; } .ambient-glow, .telemetry-marker, .hero-glow, .glow-1, .glow-2, .glow-3, .glow-4 { display: none !important; } /* 2) NO leftover containers on the features info strip + Topps Now */ .features-section, .features-section .container, .features-section .banner, .features-section .banner.is-in, .now-highlight, .now-highlight .container, .now-wrapper, .now-info, .now-visual, .bespoke-section { background: transparent !important; background-image: none !important; border: none !important; box-shadow: none !important; border-radius: 0 !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } .features-section .banner, .features-section .banner.is-in { padding: 8px 0 !important; } .features-section .banner::before, .features-section .banner::after, .now-highlight::before, .now-highlight::after { content: none !important; display: none !important; } /* 3) PRODUCT CARDS — image fills more (compress price/button row) */ .product-card .product-image-container { aspect-ratio: 1 / 1.08 !important; padding: 14px !important; } .product-card .product-info { padding: 14px 8px 6px !important; } .product-card .product-footer { margin-top: 14px !important; } .product-card .product-price, .product-card .product-price.discounted { font-size: 1.5rem !important; } .product-card .add-to-cart-btn { width: 48px !important; height: 48px !important; } .now-product-card .product-image-container { aspect-ratio: 1 / 1.18 !important; } /* 4) QUICK-VIEW MODAL → exact product-card language, NO hover colour change */ .modal-overlay { background: rgba(0,0,0,0.72) !important; } .modal-container, .quickview-container { background: #1a1b1e !important; background-image: none !important; border: none !important; border-radius: 22px !important; box-shadow: 0 30px 70px -20px rgba(0,0,0,0.9) !important; overflow: visible !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; padding: 12px !important; } .modal-container::before, .quickview-container::before { content: none !important; display: none !important; } .quickview-wrapper { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; } /* light image panel like the card */ .quickview-media { position: relative !important; background: #ececec !important; border: none !important; border-radius: 18px !important; padding: 22px !important; overflow: hidden !important; display: flex; align-items: center; justify-content: center; } .quickview-card-wrap { background: transparent !important; box-shadow: none !important; transform: none !important; } .quickview-card-wrap img { width: 100%; height: 100%; object-fit: contain; } .quickview-card-wrap .card-shine { display: none !important; } /* category tag = card pill, top-left over the image */ .quickview-media .product-tag { position: absolute !important; top: 14px !important; left: 14px !important; background: rgba(0,0,0,0.55) !important; color: #fff !important; border: none !important; padding: 6px 12px !important; border-radius: 8px !important; font-size: 0.7rem !important; font-weight: 700; letter-spacing: 0.05em; z-index: 5; width: auto !important; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); } /* heart = card fav button, top-right over the image */ .quickview-media .fav-btn { position: absolute !important; top: 14px !important; right: 14px !important; width: 40px; height: 40px; border-radius: 50% !important; border: none !important; background: #1a1b1e !important; color: #fff !important; cursor: pointer; z-index: 6; display: flex; align-items: center; justify-content: center; font-size: 0.95rem; transition: transform 0.2s ease; } .quickview-media .fav-btn:hover { transform: scale(1.12); } .quickview-details { padding: 18px 16px 12px !important; } .qv-title { color: #fff !important; } .qv-price, .qv-price .discounted, .qv-price .product-price { color: #fff !important; } /* stock: green available / red sold out, no long container */ .qv-stock-status { background: transparent !important; border: none !important; padding: 0 !important; font-weight: 700; font-size: 0.8rem; } .qv-stock-status.in-stock { color: #34c759 !important; } .qv-stock-status.out-stock { color: #ff3b30 !important; } .qv-specs-table { border-top: 1px solid rgba(255,255,255,0.10) !important; } .qv-spec-row { border-bottom: 1px solid rgba(255,255,255,0.10) !important; } /* quantity: just − number + (no container box) */ .qv-qty { display: inline-flex !important; align-items: center; gap: 14px; background: transparent !important; border: none !important; box-shadow: none !important; padding: 0 !important; } .qv-qty .qty-btn { background: transparent !important; border: 1px solid rgba(255,255,255,0.25) !important; color: #fff !important; width: 34px; height: 34px; border-radius: 8px !important; cursor: pointer; } .qv-qty .qty-btn:hover { background: rgba(255,255,255,0.08) !important; } .qv-qty .qty-val { color: #fff !important; min-width: 18px; text-align: center; font-weight: 700; } .qv-buy-btn, .primary-btn.qv-buy-btn { background: #fff !important; color: #000 !important; border: none !important; border-radius: 14px !important; } .qv-buy-btn:hover { background: #dcdcdc !important; } /* the X close — clean, top-left, well placed */ .quickview-container .modal-close, .modal-container .modal-close { top: 16px !important; left: 16px !important; right: auto !important; background: transparent !important; border: none !important; color: #fff !important; font-size: 1.2rem !important; opacity: 0.8; z-index: 10; } .quickview-container .modal-close:hover { opacity: 1; } /* 5) CART DRAWER → product-card language, no hover animation */ .cart-drawer { background: #0d0d0f !important; background-image: none !important; border-left: 1px solid rgba(255,255,255,0.10) !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } .cart-drawer::before { content: none !important; display: none !important; } .cart-header, .cart-footer { border-color: rgba(255,255,255,0.10) !important; } .cart-item { background: #1a1b1e !important; border: none !important; border-radius: 16px !important; box-shadow: none !important; padding: 12px !important; transition: none !important; } .cart-item:hover { transform: none !important; box-shadow: none !important; background: #1a1b1e !important; } .cart-item-image { background: #ececec !important; border: none !important; border-radius: 10px !important; } .checkout-btn, .primary-btn.checkout-btn { background: #fff !important; color: #000 !important; border: none !important; border-radius: 14px !important; } .checkout-btn:disabled { opacity: 0.4 !important; } /* ============================================================ FINALE 3 — NUKE every section/hero container background. Only true "cards" may have a surface. Structure = transparent. ============================================================ */ section, .bespoke-section, .hero, .hero-wrapper, .hero-content, .hero-visuals, .features-section, .features-section .container, .features-section .banner, .shop-section, .shop-section .container, .shop-section .banner, .pack-opener-section, .pack-wrapper, .now-highlight, .now-wrapper, .now-info, .now-visual, .about-me-section, .container { background: transparent !important; background-image: none !important; border: none !important; box-shadow: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } .hero::before, .hero::after, .hero *::before, .hero *::after, .hero-content::before, .hero-content::after, .hero-wrapper::before, .hero-wrapper::after, .bespoke-section::before, .bespoke-section::after, .features-section .banner::before, .features-section .banner::after, .shop-section .banner::before, .shop-section .banner::after, .now-highlight::before, .now-highlight::after, .now-wrapper::before, .now-wrapper::after { content: none !important; display: none !important; background: none !important; } /* ============================================================ FINALE 4 — THE REAL FIX: keep modal overlays fully hidden until opened. They were rendering as a dark rectangle over the hero. Force hidden state; only .open shows them. ============================================================ */ .modal-overlay:not(.open), .cart-overlay:not(.open) { opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; } .modal-overlay.open, .cart-overlay.open { opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; } /* the drawer itself stays off-canvas until open */ .cart-drawer:not(.open) { transform: translateX(100%) !important; visibility: hidden !important; pointer-events: none !important; } .cart-drawer.open { transform: translateX(0) !important; visibility: visible !important; pointer-events: auto !important; } /* ============================================================ FINALE 5 — kill EVERY rectangle / hover colour-shift, pure black navbar, restored starfield, Topps Now clean, pack card fixed, Vinted social. LAST = wins over all. ============================================================ */ /* --- A) NO gloss pseudo-element anywhere (the diagonal "rectangle") --- */ .glass::before, header::before, .product-card::before, .features-section .banner::before, .pack-glass-banner::before, .quickview-container::before, .modal-container::before, .cart-drawer::before, .nav-dropdown::before, .glass-btn::before, .now-card-3d::before, .about-me-card::before, .banner::before, .now-card-3d::after, .product-info::before, .product-info::after, .pack-glass-banner::before, .pack-glass-banner::after, .features-section .banner::after { content: none !important; display: none !important; background: none !important; } /* --- B) NO hover colour/background change on any card-like surface --- */ .product-card:hover, .now-product-card:hover, .product-card:hover .product-info, .glass-btn:hover, .now-card-3d:hover, .about-me-card:hover, .pack-interactive-card:hover, .pack-interactive-card:hover .pack-glass-banner, header:hover, .quickview-container:hover, .modal-container:hover, .cart-drawer:hover, .nav-dropdown:hover, .cart-item:hover { background: inherit !important; /* keep whatever the base is */ box-shadow: none !important; } /* product / pack / now cards: fixed dark surface, only a gentle lift on hover */ .product-card, .pack-interactive-card, .now-product-card { background: #1a1b1e !important; background-image: none !important; border: none !important; box-shadow: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } .product-card:hover, .pack-interactive-card:hover, .now-product-card:hover { background: #1a1b1e !important; /* SAME colour — no shift */ transform: translateY(-6px) !important; box-shadow: none !important; } .product-card .product-info, .now-product-card .product-info { background: transparent !important; } /* --- C) NAVBAR: solid black, always visible, no rectangle, no hover shift --- */ header#main-header, header { background: #000 !important; background-image: none !important; border: none !important; border-radius: 0 !important; box-shadow: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; width: 100% !important; left: 0 !important; transform: none !important; top: 0 !important; } header#main-header.scrolled, header.scrolled { background: #000 !important; box-shadow: 0 1px 0 rgba(255,255,255,0.06) !important; border-radius: 0 !important; } header:hover { background: #000 !important; box-shadow: none !important; } /* --- D) TOPPS NOW: no rectangle/box behind the section --- */ .now-highlight, .now-highlight .container, .now-wrapper, .now-info, .now-visual { background: transparent !important; background-image: none !important; border: none !important; box-shadow: none !important; border-radius: 0 !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } .now-highlight *::before, .now-highlight *::after { content: none !important; display: none !important; } /* the Topps Now card keeps the product-card look (dark, no shift) */ .now-product-card { border-radius: 26px !important; padding: 12px !important; } /* --- E) QUICK-VIEW: no hover shift, X top-left, image fills the panel --- */ .quickview-container, .modal-container { background: #1a1b1e !important; border: none !important; } .quickview-container:hover, .modal-container:hover { background: #1a1b1e !important; box-shadow: 0 30px 70px -20px rgba(0,0,0,0.9) !important; } .quickview-media { padding: 16px !important; } .quickview-media .quickview-card-wrap { width: 100% !important; height: 100% !important; display: flex; align-items: center; justify-content: center; } .quickview-media .quickview-card-wrap img { width: 100% !important; height: 100% !important; object-fit: contain !important; } .quickview-container .modal-close, .modal-container .modal-close { top: 14px !important; left: 14px !important; right: auto !important; width: 36px; height: 36px; border-radius: 50% !important; background: rgba(0,0,0,0.45) !important; color: #fff !important; border: none !important; display: flex; align-items: center; justify-content: center; z-index: 20; opacity: 1; } /* --- F) HOBBY PACK card: equal borders, image bigger, compact footer --- */ .pack-interactive-card { display: flex !important; flex-direction: column !important; } .pack-visual-container { background: #ececec !important; border-radius: 18px !important; aspect-ratio: 1 / 1 !important; padding: 16px !important; display: flex !important; align-items: center !important; justify-content: center !important; overflow: hidden !important; margin: 0 !important; } .pack-visual-container .booster-pack { height: 100% !important; width: auto !important; aspect-ratio: 0.66 / 1 !important; } .pack-glass-banner { background: transparent !important; border: none !important; box-shadow: none !important; border-radius: 0 !important; padding: 14px 8px 6px !important; } .pack-glass-banner .pack-footer { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 12px; margin-top: 14px !important; } .pack-glass-banner .pack-footer .pack-price { font-size: 1.5rem !important; font-weight: 800 !important; color: #fff !important; } .pack-glass-banner .add-to-cart-btn.buy-btn { width: 48px !important; height: 48px !important; border-radius: 50% !important; background: #fff !important; color: #000 !important; border: none !important; flex-shrink: 0; } .pack-glass-banner:hover, .pack-interactive-card:hover .pack-glass-banner { background: transparent !important; box-shadow: none !important; } /* --- G) STARFIELD restored (subtle, behind everything, monochrome) --- */ body::before { content: "" !important; display: block !important; position: fixed !important; inset: 0 !important; z-index: -1 !important; pointer-events: none !important; background-color: #000 !important; background-image: radial-gradient(1.5px 1.5px at 10% 12%, rgba(255,255,255,0.7), transparent), radial-gradient(1.5px 1.5px at 25% 30%, rgba(255,255,255,0.5), transparent), radial-gradient(1.5px 1.5px at 40% 18%, rgba(255,255,255,0.65), transparent), radial-gradient(1.5px 1.5px at 55% 38%, rgba(255,255,255,0.45), transparent), radial-gradient(1.5px 1.5px at 68% 14%, rgba(255,255,255,0.7), transparent), radial-gradient(1.5px 1.5px at 80% 32%, rgba(255,255,255,0.5), transparent), radial-gradient(1.5px 1.5px at 92% 20%, rgba(255,255,255,0.6), transparent), radial-gradient(1.5px 1.5px at 16% 62%, rgba(255,255,255,0.5), transparent), radial-gradient(1.5px 1.5px at 33% 80%, rgba(255,255,255,0.6), transparent), radial-gradient(1.5px 1.5px at 50% 66%, rgba(255,255,255,0.45), transparent), radial-gradient(1.5px 1.5px at 65% 86%, rgba(255,255,255,0.6), transparent), radial-gradient(1.5px 1.5px at 84% 72%, rgba(255,255,255,0.5), transparent), radial-gradient(1.5px 1.5px at 95% 92%, rgba(255,255,255,0.55), transparent) !important; background-size: 100% 55% !important; background-repeat: repeat !important; animation: starfield-drift 120s linear infinite !important; opacity: 0.5 !important; } @keyframes starfield-drift { from { background-position: 0 0; } to { background-position: 0 -55%; } } @media (prefers-reduced-motion: reduce) { body::before { animation: none !important; } } /* the starfield must show: html/body transparent so it shows through */ html { background: #000 !important; } body { background: transparent !important; } /* --- H) Vinted social tile (no FA icon) --- */ .social-vinted span { font-family: var(--font-heading); font-weight: 800; font-size: 1.05rem; line-height: 1; } /* ============================================================ FINALE 6 — dropdown hover-bridge, black overlays (no borders), borderless navbar, animated hero arrow, inline SVG icons, advanced shop filters. LAST = wins. ============================================================ */ /* --- Inline SVG (hugeicons-style) sizing everywhere --- */ .hi { width: 1.05em; height: 1.05em; display: inline-block; vertical-align: -0.18em; flex-shrink: 0; } .nav-dropdown a .hi { width: 20px; height: 20px; vertical-align: middle; color: #fff; opacity: 0.9; } .feature-icon .hi { width: 30px; height: 30px; color: #fff; } .add-to-cart-btn .hi, .fav-btn .hi { width: 22px; height: 22px; } .fav-btn .hi { width: 20px; height: 20px; } /* --- A) DROPDOWN: invisible hover-bridge so the cursor never hits a gap --- */ .nav-dropdown-wrapper { position: relative; } .nav-dropdown-wrapper::after { content: ""; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); width: 280px; height: 28px; /* covers the gap between trigger and menu */ background: transparent; z-index: 2999; } .nav-dropdown, .nav-dropdown.single-col { top: calc(100% + 14px) !important; background: #000 !important; /* pure black */ border: none !important; /* no contour */ box-shadow: 0 20px 50px -16px rgba(0,0,0,0.95) !important; } .nav-dropdown::before { /* widen the bridge to the menu */ content: "" !important; display: block !important; position: absolute !important; top: -16px !important; left: 0 !important; right: 0 !important; height: 16px !important; background: transparent !important; } .nav-dropdown a:hover { background: #1a1b1e !important; } /* --- B) OVERLAYS: black, no colour shift, no border --- */ .modal-overlay { background: rgba(0,0,0,0.82) !important; } .modal-overlay:hover { background: rgba(0,0,0,0.82) !important; } .cart-overlay { background: rgba(0,0,0,0.6) !important; } .modal-container, .quickview-container, .cart-drawer, .nav-dropdown { border: none !important; } /* --- C) NAVBAR: no border, pure black, no shift on hover/scroll --- */ header, header#main-header, header.scrolled, header:hover { border: none !important; box-shadow: none !important; background: #000 !important; } /* --- D) HERO buttons: animated arrow that slides in on hover --- */ .hero-actions .glass-btn, .hero-actions .primary-btn { position: relative; overflow: hidden; } /* Get Started: arrow appears + label shifts left, smooth both ways */ .hero-actions .primary-btn .hero-arrow { max-width: 0; opacity: 0; transform: translateX(-6px); overflow: hidden; transition: max-width .35s cubic-bezier(.16,1,.3,1), opacity .3s ease, transform .35s cubic-bezier(.16,1,.3,1), margin-left .35s ease; margin-left: 0; display: inline-flex; align-items: center; } .hero-actions .primary-btn:hover .hero-arrow { max-width: 24px; opacity: 1; transform: translateX(0); margin-left: 8px; } .hero-actions .primary-btn .hi-ext { transition: max-width .35s ease, opacity .3s ease, margin-left .35s ease; } .hero-actions .primary-btn:hover .hi-ext { max-width: 0; opacity: 0; margin-left: 0; overflow: hidden; } /* --- E) ADVANCED SHOP FILTERS panel --- */ .shop-controls { display: flex; flex-direction: column; gap: 18px; margin: 24px 0 30px; } .shop-searchbar { position: relative; display: flex; align-items: center; max-width: 460px; width: 100%; } .shop-searchbar .hi { position: absolute; left: 14px; color: #8a8a90; width: 20px; height: 20px; } .shop-searchbar input { width: 100%; background: #1a1b1e !important; border: none !important; border-radius: 12px !important; padding: 13px 16px 13px 44px !important; color: #fff !important; font-size: 0.9rem !important; } .shop-searchbar input::placeholder { color: #8a8a90; } .shop-searchbar input:focus { outline: none; background: #202125 !important; } .shop-filter-bar { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; } .filter-group { display: inline-flex; flex-direction: column; gap: 6px; } .filter-label { font-family: var(--font-heading); font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase; color: #6e6e76; } .filter-select { background: #1a1b1e !important; border: none !important; border-radius: 10px !important; color: #fff !important; font-family: var(--font-body); font-size: 0.85rem; padding: 10px 14px !important; cursor: pointer; min-width: 150px; appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%23999' stroke-width='2'%3E%3Cpath d='M2 4l4 4 4-4'/%3E%3C/svg%3E") !important; background-repeat: no-repeat !important; background-position: right 12px center !important; padding-right: 32px !important; } .filter-select:focus { outline: none; background-color: #202125 !important; } .filter-reset { align-self: flex-end; background: transparent !important; border: 1px solid rgba(255,255,255,0.18) !important; border-radius: 10px !important; color: #fff !important; font-size: 0.82rem; padding: 10px 16px !important; cursor: pointer; display: inline-flex; align-items: center; gap: 7px; transition: background .2s ease; } .filter-reset:hover { background: rgba(255,255,255,0.08) !important; } /* --- F) NEWS section (added under shop info on shop pages) --- */ .news-section { padding: 40px 0 80px; } .news-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 8px; } .news-card { background: #1a1b1e; border-radius: 20px; overflow: hidden; display: flex; flex-direction: column; transition: transform .35s cubic-bezier(.16,1,.3,1); } .news-card:hover { transform: translateY(-6px); } .news-card-media { background: #ececec; aspect-ratio: 16/10; overflow: hidden; } .news-card-media img { width: 100%; height: 100%; object-fit: cover; } .news-card-body { padding: 18px; } .news-tag { font-family: var(--font-heading); font-size: 0.66rem; letter-spacing: 0.12em; text-transform: uppercase; color: #8a8a90; } .news-card h3 { font-size: 1.05rem; color: #fff; margin: 8px 0 6px; line-height: 1.3; } .news-card p { font-size: 0.85rem; color: #9a9aa2; line-height: 1.5; } .news-card .news-link { margin-top: 12px; display: inline-flex; align-items: center; gap: 7px; color: #fff; font-size: 0.82rem; font-weight: 600; } @media (max-width: 900px) { .news-grid { grid-template-columns: 1fr; } .shop-filter-bar { flex-direction: column; align-items: stretch; } } /* ============================================================ FINALE 7 — pack card equal gaps, cart no-hover, select style, favourites badge, icon sizing. LAST = wins. ============================================================ */ /* Pack card: image area fills the card width (equal border all sides) */ .pack-interactive-card { align-items: stretch !important; padding: 12px !important; } .pack-visual-container { width: 100% !important; height: auto !important; aspect-ratio: 1 / 1.18 !important; background: #ececec !important; border-radius: 16px !important; padding: 18px !important; display: flex !important; align-items: center !important; justify-content: center !important; overflow: hidden !important; transform: none !important; } .pack-interactive-card:hover .pack-visual-container { transform: none !important; } .pack-interactive-card:hover { transform: translateY(-6px) !important; } .pack-visual-container .booster-pack { width: auto !important; height: 100% !important; max-width: 100% !important; aspect-ratio: 0.68 / 1 !important; margin: 0 auto !important; } /* Cart drawer + items: NO hover colour change at all */ .cart-item, .cart-item:hover { background: #1a1b1e !important; transform: none !important; box-shadow: none !important; border: none !important; } .cart-drawer:hover { background: #0d0d0f !important; } /* Native select option list — at least colour the options dark */ .filter-select option { background: #1a1b1e; color: #fff; } .filter-select { color: #fff !important; } /* Favourites counter badge on the cart-style heart (optional future use) */ .fav-badge { position: absolute; top: -4px; right: -4px; background: #fff; color: #000; font-size: 0.62rem; font-weight: 800; min-width: 16px; height: 16px; border-radius: 50%; display: flex; align-items: center; justify-content: center; padding: 0 4px; } /* Filled heart = white (favourited state) */ .fav-btn.is-fav { color: #fff !important; } /* SVG icons inherit text colour cleanly everywhere */ svg.hi path, svg.hi circle, svg.hi rect { vector-effect: non-scaling-stroke; } /* ============================================================ FINALE 8 — Cart drawer split into Carrello + Preferiti tabs ============================================================ */ .drawer-tabs { display: flex; gap: 6px; } .drawer-tab { background: transparent; border: none; color: #8a8a90; font-family: var(--font-heading); font-weight: 700; font-size: 0.95rem; padding: 6px 4px; margin-right: 14px; cursor: pointer; position: relative; display: inline-flex; align-items: center; gap: 7px; transition: color .2s ease; } .drawer-tab.active { color: #fff; } .drawer-tab.active::after { content: ""; position: absolute; left: 0; right: 14px; bottom: -8px; height: 2px; background: #fff; border-radius: 2px; } .drawer-tab-count { background: #1a1b1e; color: #fff; font-size: 0.7rem; min-width: 18px; height: 18px; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; padding: 0 5px; } .drawer-tab.active .drawer-tab-count { background: #fff; color: #000; } .drawer-panel { display: flex; flex-direction: column; flex: 1; min-height: 0; } #panel-fav { overflow: hidden; } /* Favourites action buttons */ .fav-add-cart { flex: 1; background: #fff !important; color: #000 !important; border: none; border-radius: 10px; font-family: var(--font-heading); font-weight: 700; font-size: 0.8rem; padding: 8px 12px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 7px; } .fav-add-cart .hi { width: 18px; height: 18px; } .fav-add-cart:hover { background: #dcdcdc !important; } .fav-remove { background: transparent; border: 1px solid rgba(255,255,255,0.18); color: #8a8a90; border-radius: 10px; width: 38px; cursor: pointer; transition: color .2s ease, border-color .2s ease; } .fav-remove:hover { color: #fff; border-color: rgba(255,255,255,0.4); } /* ============================================================ FINALE 9 — Black & white with RELIEF (3D card look). Cards/buttons/inputs become near-black, lifted off the bg with a soft outer shadow + a hairline top highlight + 1px border so they read as embossed 3D cards on pure black. ============================================================ */ :root { --surface: #0a0a0b; /* near-black panel */ --surface-2: #0e0e10; /* slightly lifted */ --line: rgba(255,255,255,0.10); --relief: 0 0 0 1px rgba(255,255,255,0.06), 0 10px 24px -8px rgba(0,0,0,0.9), inset 0 1px 0 rgba(255,255,255,0.08); --relief-hover: 0 0 0 1px rgba(255,255,255,0.14), 0 18px 36px -10px rgba(0,0,0,0.95), inset 0 1px 0 rgba(255,255,255,0.14); } /* Product / pack / now cards → embossed near-black */ .product-card, .pack-interactive-card, .now-product-card { background: var(--surface) !important; border: 1px solid var(--line) !important; box-shadow: var(--relief) !important; border-radius: 22px !important; } .product-card:hover, .pack-interactive-card:hover, .now-product-card:hover { background: var(--surface) !important; box-shadow: var(--relief-hover) !important; transform: translateY(-6px) !important; } .product-card .product-info, .now-product-card .product-info { background: transparent !important; } /* News cards */ .news-card { background: var(--surface) !important; border: 1px solid var(--line); box-shadow: var(--relief); } .news-card:hover { box-shadow: var(--relief-hover); } /* Cart items + drawer + modals */ .cart-item, .cart-item:hover { background: var(--surface-2) !important; border: 1px solid var(--line) !important; box-shadow: var(--relief) !important; } .cart-drawer { background: #060607 !important; border-left: 1px solid var(--line) !important; } .modal-container, .quickview-container { background: var(--surface) !important; border: 1px solid var(--line) !important; box-shadow: var(--relief-hover) !important; } .nav-dropdown, .nav-dropdown.single-col { background: var(--surface) !important; border: 1px solid var(--line) !important; box-shadow: var(--relief-hover) !important; } /* Glass buttons → embossed black buttons */ .glass-btn, .hero-actions .glass-btn, .filter-reset, .breadcrumb a, .fav-remove { background: var(--surface) !important; border: 1px solid var(--line) !important; box-shadow: var(--relief) !important; color: #fff !important; } .glass-btn:hover, .hero-actions .glass-btn:hover, .filter-reset:hover, .breadcrumb a:hover, .fav-remove:hover { background: var(--surface-2) !important; box-shadow: var(--relief-hover) !important; border-color: rgba(255,255,255,0.2) !important; } /* Search field + inputs → embossed */ .search-bar input, .shop-searchbar input, .newsletter-form input, .filter-select { background: var(--surface) !important; border: 1px solid var(--line) !important; box-shadow: var(--relief) !important; color: #fff !important; } .search-bar input:focus, .shop-searchbar input:focus, .newsletter-form input:focus, .filter-select:focus { border-color: rgba(255,255,255,0.28) !important; box-shadow: var(--relief-hover) !important; outline: none !important; } /* Cart trigger + filter pills bar → embossed */ .cart-trigger { background: var(--surface) !important; border: 1px solid var(--line) !important; box-shadow: var(--relief) !important; } .cart-trigger:hover { box-shadow: var(--relief-hover) !important; } .shop-filters { background: var(--surface) !important; border: 1px solid var(--line) !important; box-shadow: var(--relief) !important; } /* Social tiles → embossed */ .social-btn, .hero-social-row .social-btn { background: var(--surface) !important; border: 1px solid var(--line) !important; box-shadow: var(--relief) !important; } .social-btn:hover, .hero-social-row .social-btn:hover { box-shadow: var(--relief-hover) !important; border-color: rgba(255,255,255,0.25) !important; background: var(--surface-2) !important; } /* image areas (light) stay as-is; white CTA buttons stay white */ /* ---- CUSTOM SELECT (replaces native option list, site style) ---- */ .cselect { position: relative; min-width: 170px; } .cselect-btn { width: 100%; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--relief); border-radius: 10px; color: #fff; font-family: var(--font-body); font-size: 0.85rem; padding: 10px 36px 10px 14px; text-align: left; cursor: pointer; position: relative; } .cselect-btn::after { content: ""; position: absolute; right: 12px; top: 50%; width: 9px; height: 9px; border-right: 2px solid #999; border-bottom: 2px solid #999; transform: translateY(-65%) rotate(45deg); transition: transform .2s ease; } .cselect.open .cselect-btn::after { transform: translateY(-35%) rotate(-135deg); } .cselect-menu { position: absolute; top: calc(100% + 8px); left: 0; right: 0; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--relief-hover); border-radius: 12px; padding: 6px; z-index: 1500; max-height: 280px; overflow-y: auto; opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity .18s ease, transform .18s ease, visibility .18s; } .cselect.open .cselect-menu { opacity: 1; visibility: visible; transform: translateY(0); } .cselect-opt { padding: 9px 12px; border-radius: 8px; color: rgba(255,255,255,0.8); font-size: 0.85rem; cursor: pointer; } .cselect-opt:hover { background: var(--surface-2); color: #fff; } .cselect-opt.selected { background: #fff; color: #000; } /* ============================================================ FINALE 10 — dropdown left-aligned (centered block), trash icon sizing, FAQ + Contact sections ============================================================ */ /* Shop dropdown: icons+labels left-aligned, the column centered in the menu */ .nav-dropdown.single-col { padding: 10px !important; } .dropdown-single-list { align-items: stretch; } .nav-dropdown a { justify-content: flex-start !important; text-align: left !important; gap: 12px; padding: 11px 14px !important; } .nav-dropdown a .hi { flex-shrink: 0; width: 20px; height: 20px; } /* trash / remove icon sizes */ .remove-item-btn .hi { width: 16px; height: 16px; vertical-align: -0.18em; } .fav-remove .hi { width: 18px; height: 18px; } .remove-item-btn { display: inline-flex; align-items: center; gap: 6px; } /* ---- FAQ section ---- */ .faq-section { padding: 40px 0 20px; } .faq-list { display: flex; flex-direction: column; gap: 12px; max-width: 820px; } .faq-item { background: var(--surface); border: 1px solid var(--line); box-shadow: var(--relief); border-radius: 14px; overflow: hidden; } .faq-q { width: 100%; background: transparent; border: none; color: #fff; font-family: var(--font-heading); font-weight: 600; font-size: 1rem; padding: 18px 20px; text-align: left; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 16px; } .faq-q .faq-ico { flex-shrink: 0; width: 22px; height: 22px; position: relative; transition: transform .3s ease; } .faq-q .faq-ico::before, .faq-q .faq-ico::after { content: ""; position: absolute; background: #fff; border-radius: 2px; left: 50%; top: 50%; } .faq-q .faq-ico::before { width: 14px; height: 2px; transform: translate(-50%,-50%); } .faq-q .faq-ico::after { width: 2px; height: 14px; transform: translate(-50%,-50%); transition: transform .3s ease; } .faq-item.open .faq-q .faq-ico::after { transform: translate(-50%,-50%) scaleY(0); } .faq-a { max-height: 0; overflow: hidden; transition: max-height .35s cubic-bezier(.16,1,.3,1); color: #9a9aa2; font-size: 0.9rem; line-height: 1.6; } .faq-item.open .faq-a { max-height: 220px; } .faq-a p { padding: 0 20px 18px; margin: 0; } /* ---- Contact section ---- */ .contact-section { padding: 30px 0 70px; } .contact-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 26px; align-items: start; } .contact-card { background: var(--surface); border: 1px solid var(--line); box-shadow: var(--relief); border-radius: 18px; padding: 24px; } .contact-card h3 { color: #fff; font-size: 1.1rem; margin-bottom: 14px; } .contact-row { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); } .contact-row:last-child { border-bottom: none; } .contact-row .hi { width: 22px; height: 22px; color: #fff; flex-shrink: 0; } .contact-row a, .contact-row span { color: #c9c9d0; font-size: 0.9rem; } .contact-row a:hover { color: #fff; } .contact-form { display: flex; flex-direction: column; gap: 12px; } .contact-form input, .contact-form textarea { background: var(--surface); border: 1px solid var(--line); box-shadow: var(--relief); border-radius: 10px; color: #fff; font-family: var(--font-body); font-size: 0.9rem; padding: 12px 14px; } .contact-form input::placeholder, .contact-form textarea::placeholder { color: #8a8a90; } .contact-form input:focus, .contact-form textarea:focus { outline: none; border-color: rgba(255,255,255,0.3); } .contact-form textarea { resize: vertical; min-height: 110px; } .contact-form button { background: #fff; color: #000; border: none; border-radius: 10px; font-family: var(--font-heading); font-weight: 700; font-size: 0.9rem; padding: 13px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 8px; } .contact-form button:hover { background: #dcdcdc; } @media (max-width: 800px) { .contact-grid { grid-template-columns: 1fr; } } /* ============================================================ FINALE 11 — black cards (NO border, shadow only), animated starfield, filter z-index, quickview full-height card style, smaller dropdown, kill stray caret, new contact layout ============================================================ */ /* 1) Cards: pure near-black, NO border, separated by shadow only */ .product-card, .pack-interactive-card, .now-product-card, .news-card, .cart-item, .faq-item, .contact-card, .shop-filters, .modal-container, .quickview-container, .nav-dropdown, .nav-dropdown.single-col, .cselect-btn, .cselect-menu, .glass-btn, .hero-actions .glass-btn, .filter-reset, .breadcrumb a, .search-bar input, .shop-searchbar input, .newsletter-form input, .contact-form input, .contact-form textarea, .filter-select, .cart-trigger, .social-btn, .hero-social-row .social-btn, .fav-remove { border: none !important; box-shadow: 0 1px 0 rgba(255,255,255,0.05) inset, 0 14px 30px -12px rgba(0,0,0,0.95) !important; } .product-card, .pack-interactive-card, .now-product-card, .news-card, .cart-item, .faq-item, .contact-card, .modal-container, .quickview-container, .nav-dropdown, .glass-btn, .filter-reset, .search-bar input, .shop-searchbar input, .contact-form input, .contact-form textarea, .filter-select, .cart-trigger, .social-btn, .cselect-btn { background: #0a0a0b !important; background-image: none !important; } .product-card:hover, .pack-interactive-card:hover, .now-product-card:hover, .news-card:hover { box-shadow: 0 1px 0 rgba(255,255,255,0.08) inset, 0 22px 40px -14px rgba(0,0,0,0.98) !important; transform: translateY(-6px) !important; } .glass-btn:hover, .filter-reset:hover, .cart-trigger:hover, .social-btn:hover, .breadcrumb a:hover { background: #121214 !important; box-shadow: 0 1px 0 rgba(255,255,255,0.1) inset, 0 18px 34px -12px rgba(0,0,0,0.98) !important; } /* 2) Animated starfield (move the layer itself so it actually drifts) */ @keyframes star-move { from { transform: translateY(0); } to { transform: translateY(-700px); } } body::before { height: 200% !important; animation: star-move 60s linear infinite !important; will-change: transform; } @media (prefers-reduced-motion: reduce){ body::before { animation: none !important; } } /* 3) Shop filters must sit ABOVE the product grid (dropdowns were hidden under cards) */ .shop-controls { position: relative; z-index: 50; } .cselect { position: relative; z-index: 60; } .cselect.open { z-index: 1200; } .cselect-menu { z-index: 1300 !important; } .products-grid { position: relative; z-index: 1; } /* 4) QUICK-VIEW: same near-black card; image side FULL HEIGHT; X top-left; no hover colour change; clean proportions */ .quickview-container, .modal-container { background: #0a0a0b !important; } .quickview-container:hover, .modal-container:hover { background: #0a0a0b !important; } .quickview-wrapper { display: grid !important; grid-template-columns: 0.95fr 1.05fr !important; gap: 0 !important; align-items: stretch !important; } .quickview-media { background: #ececec !important; border-radius: 16px !important; margin: 0 !important; padding: 26px !important; display: flex !important; align-items: center; justify-content: center; height: 100% !important; } .quickview-media .quickview-card-wrap { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; } .quickview-media .quickview-card-wrap img { width: 100%; height: 100%; object-fit: contain; } .quickview-details { padding: 28px 30px !important; display: flex; flex-direction: column; } .quickview-container { padding: 16px !important; max-width: 880px !important; } .quickview-container .modal-close, .modal-container .modal-close { top: 26px !important; left: 26px !important; right: auto !important; width: 34px; height: 34px; border-radius: 50% !important; background: rgba(0,0,0,0.5) !important; color: #fff !important; z-index: 30; display: flex; align-items: center; justify-content: center; } /* 5) Shop dropdown SMALLER */ .nav-dropdown, .nav-dropdown.single-col { width: 210px !important; min-width: 210px !important; padding: 7px !important; } .nav-dropdown a { padding: 9px 11px !important; font-size: 0.86rem !important; gap: 10px; } .nav-dropdown a .hi { width: 18px !important; height: 18px !important; } /* 6) Kill the stray "text cursor / writable bar" — caret + selection artefacts */ body, .hero, section, header, .container, .block__head, .block__title, .product-card, .nav-dropdown, .modal-overlay, footer { caret-color: transparent; } .block__rule, .block__num, .block__title { user-select: none; } /* inputs keep a normal caret */ input, textarea { caret-color: #fff; } /* 7) NEW contact layout (form-focused, site style) */ .contact-wrap { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: 26px; align-items: start; } .contact-aside .contact-lead { color: #9a9aa2; font-size: 0.95rem; line-height: 1.7; margin-bottom: 18px; max-width: 320px; } .contact-chips { display: flex; flex-direction: column; gap: 10px; max-width: 300px; } .contact-chip { background: #0a0a0b; border-radius: 12px; box-shadow: 0 1px 0 rgba(255,255,255,0.05) inset, 0 14px 30px -12px rgba(0,0,0,0.95); color: #fff; font-family: var(--font-heading); font-weight: 600; font-size: 0.9rem; padding: 14px 18px; transition: transform .2s ease, box-shadow .2s ease; } .contact-chip:hover { transform: translateY(-2px); box-shadow: 0 1px 0 rgba(255,255,255,0.1) inset, 0 20px 36px -12px rgba(0,0,0,0.98); } .contact-form { display: flex; flex-direction: column; gap: 12px; } .contact-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .contact-form input, .contact-form textarea { border-radius: 12px !important; color: #fff; font-family: var(--font-body); font-size: 0.92rem; padding: 14px 16px; } .contact-form textarea { min-height: 150px; resize: vertical; } .contact-form button { background: #fff; color: #000; border: none; border-radius: 12px; font-family: var(--font-heading); font-weight: 700; font-size: 0.92rem; padding: 15px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 8px; } .contact-form button:hover { background: #dcdcdc; } @media (max-width: 800px){ .contact-wrap { grid-template-columns: 1fr; } .contact-form-row { grid-template-columns: 1fr; } .quickview-wrapper { grid-template-columns: 1fr !important; } } /* ============================================================ FINALE 12 — dropdown items: centered block, left-aligned text (all rows same width, all starting from the same left edge) ============================================================ */ .nav-dropdown.single-col .dropdown-single-list { display: flex !important; flex-direction: column !important; align-items: center !important; /* center the column of items in the menu */ gap: 2px !important; } .nav-dropdown.single-col .dropdown-single-list li { width: 100%; display: flex; justify-content: center; /* center each row's box */ } .nav-dropdown.single-col .dropdown-single-list li a { width: 100%; max-width: 180px; /* uniform width so all rows align */ justify-content: flex-start !important; /* text/icon start from same left edge */ text-align: left !important; gap: 11px; }