/* ========================================================= ⛧ CYBERDECK — layer grafico "hacker" Caricato DOPO style.css / product-page.css: sovrascrive l'aspetto senza toccare la struttura, quindi si disattiva togliendo il da un file solo. NB: non ridefinisce posizione/padding della navbar né le safe-area: quelle stanno in style.css e devono restare. ========================================================= */ :root { --cy-bg: #04050a; --cy-bg-2: #070912; --cy-line: rgba(0, 255, 156, 0.14); --cy-line-2: rgba(155, 92, 255, 0.16); --cy-cyan: #22d3ee; --cy-hot: #ff2e63; --cy-amber: #ffb000; --cy-dim: #7b8195; --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace; } /* ========================================================= 1. FONDO — griglia, scanline, vignetta, rumore I layer sono iniettati da cyber.js in #fxRoot così nessuna pagina va modificata a mano. ========================================================= */ /* Il fondo di pagina passa su , non su : #fxRoot sta a z-index -1 e il background di body — dipinto DOPO i layer a z-index negativo — lo coprirebbe del tutto. */ html { background-color: var(--cy-bg); background-image: radial-gradient(circle at 50% -10%, rgba(155, 92, 255, 0.22), transparent 55%), radial-gradient(circle at 85% 60%, rgba(0, 255, 156, 0.14), transparent 50%), radial-gradient(circle at 10% 90%, rgba(34, 211, 238, 0.12), transparent 45%); background-attachment: fixed; background-repeat: no-repeat; } /* Aurora background mesh glowing pulses */ .fx-aurora { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: radial-gradient(circle at 20% 30%, rgba(155, 92, 255, 0.12) 0%, transparent 40%), radial-gradient(circle at 80% 70%, rgba(0, 255, 156, 0.09) 0%, transparent 45%); filter: blur(40px); animation: fxAuroraPulse 10s ease-in-out infinite alternate; pointer-events: none; } @keyframes fxAuroraPulse { 0% { transform: scale(1) rotate(0deg); opacity: 0.7; } 50% { transform: scale(1.1) rotate(2deg); opacity: 1; } 100% { transform: scale(1.05) rotate(-2deg); opacity: 0.85; } } body, body:not(.home) { background: transparent; } #fxRoot { position: fixed; top: 0; left: 0; width: 100%; height: 100%; /* z-index negativo: così i layer stanno sotto TUTTO il contenuto senza dover toccare il position degli altri elementi. Alzare i figli di body con position: relative sovrascriveva il position: fixed di navbar, menu mobile e carrello — cioè rompeva mezzo sito. */ z-index: -1; pointer-events: none; overflow: hidden; contain: layout paint size; } /* vignetta: chiude i bordi e fa "tubo catodico" — più drammatica */ .fx-vignette { position: absolute; inset: 0; background: radial-gradient(ellipse 110% 95% at 50% 50%, transparent 36%, rgba(0, 0, 0, 0.82) 100%); } /* ========================================================= 2. TIPOGRAFIA — tutto ciò che è "dato" diventa monospazio ========================================================= */ .eyebrow, .stat-label, .card-badge, .card-platform, .pcard-stock, .pcard-price, .product-category, .product-stock, .trust-pill, .product-trust span, .site-footer-copy, .site-footer-links a, .cat-link, .legal-eyebrow, .legal-date, .vouch-meta, .mini-vouch-user, .sticky-price, .product-price, .stat-num, .cta, .buy-btn, .qty-val, .product-desc-block h4 { font-family: var(--font-mono); letter-spacing: 0.06em; } /* etichette da readout di sistema */ .eyebrow::before, .product-desc-block h4::before, .legal-eyebrow::before { content: "// "; opacity: 0.6; } .cat-link::before { content: "["; opacity: 0.45; margin-right: 4px; }.cat-link::after { content: "]"; opacity: 0.45; margin-left: 4px; } .tools-title, .legal-header h1, .product-name, .cat-title, .features-title, .section h2 { letter-spacing: -0.01em; text-transform: uppercase; } /* ========================================================= 3. GLITCH — titoli che sfarfallano cyber.js copia il testo in data-text sugli h1/h2 principali. ========================================================= */ /* Niente display: inline-block qui. I titoli a cui si applica sono block: forzarli inline-block li faceva affiancare all'eyebrow (che è inline-block), mandando "OUR SHOP" sulla stessa riga. Gli pseudo con inset: 0 coprono comunque tutta la riga ed ereditano il text-align. */ /* ========================================================= 4. NAVBAR — solo estetica, la geometria resta a style.css ========================================================= */ .home-nav { border-bottom: 1px solid var(--cy-line); box-shadow: 0 1px 0 rgba(0, 255, 156, 0.06), 0 10px 40px rgba(0, 0, 0, 0.7); /* contiene il filo di luce animato qui sotto, che altrimenti sborda a destra */ overflow: hidden; } .home-nav::after { content: ""; position: absolute; left: 0; bottom: 0; height: 1px; width: 34%; background: linear-gradient(to right, transparent, var(--cy-cyan), transparent); opacity: 0.9; } .home-nav .nav-logo span { font-family: var(--font-mono); letter-spacing: 0.34em; text-shadow: 0 0 14px rgba(0, 255, 156, 0.45); } .nav-links a:not(.nav-cta) { font-family: var(--font-mono); font-size: 12.5px; text-transform: uppercase; letter-spacing: 0.12em; } .nav-links a:not(.nav-cta)::before { content: "> "; opacity: 0; transition: opacity .18s; } .nav-links a:not(.nav-cta):hover::before { opacity: .8; } .nav-links a.nav-cta, .mob-menu .mob-cta { font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.1em; border-radius: 0; clip-path: polygon(9px 0, 100% 0, 100% calc(100% - 9px), calc(100% - 9px) 100%, 0 100%, 0 9px); } /* burger a tratti irregolari */ .burger span:nth-child(2) { width: 17px; margin-left: auto; } .mob-menu { background: var(--cy-bg-2); border-left: 1px solid var(--cy-line); box-shadow: -30px 0 60px rgba(0, 0, 0, 0.8); } .mob-menu a { font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.08em; font-size: 15px; border-bottom: 1px solid rgba(0, 255, 156, 0.09); } /* ========================================================= 5. BOTTONI — spigoli tagliati, sweep, prefisso da terminale ========================================================= */ .cta, .buy-btn, .atc-btn, .cart-checkout-btn, .btn-feedback, .cart-empty-cta { border-radius: 0 !important; clip-path: polygon(11px 0, 100% 0, 100% calc(100% - 11px), calc(100% - 11px) 100%, 0 100%, 0 11px); text-transform: uppercase; letter-spacing: 0.1em; font-family: var(--font-mono); font-weight: 700; display: flex !important; align-items: center !important; justify-content: center !important; text-align: center !important; } .cta:not(.ghost), .buy-btn:not(:disabled), .cart-checkout-btn:not(:disabled) { /* Gradiente SIMMETRICO: con background-size 200% lo scorrimento si raccorda, mentre una scala non simmetrica lasciava una cucitura netta (verde e poi un blocco viola) a metà animazione. */ background: linear-gradient(100deg, var(--violet), var(--cy-cyan), var(--green), var(--cy-cyan), var(--violet)); background-size: 200% auto; color: #02030a; text-shadow: none; } .cta.ghost, .atc-btn { background: rgba(34, 211, 238, 0.07); border: 1px solid rgba(34, 211, 238, 0.4); color: #9fe9f7; } .cta.ghost:hover, .atc-btn:hover { background: rgba(34, 211, 238, 0.16); border-color: var(--cy-cyan); color: #eafcff; } /* riga di stato che appare sotto i CTA principali dell'hero */ .hero-actions .cta { position: relative; } /* ========================================================= 6. CARD — cornice HUD con squadrette agli angoli ========================================================= */ .pcard, .product-card, .feature-box, .product-desc-block, .legal-box, .mini-vouch, .faq-item, .hero-stats, .feedback-card, .vouch-card { border-radius: 0 !important; background: linear-gradient(150deg, rgba(10, 14, 26, 0.92), rgba(4, 6, 12, 0.96)); border: 1px solid var(--cy-line); position: relative; overflow: visible; } /* squadrette: due pseudo-elementi disegnano i 4 angoli */ .pcard::after, .product-card::after, .feature-box::after, .product-desc-block::after, .feedback-card::after, .hero-stats::after { content: ""; position: absolute; inset: -1px; pointer-events: none; background: /* alto-sx */ linear-gradient(var(--cy-cyan), var(--cy-cyan)) left 0 top 0 / 1px 14px no-repeat, linear-gradient(var(--cy-cyan), var(--cy-cyan)) left 0 top 0 / 14px 1px no-repeat, /* alto-dx */ linear-gradient(var(--cy-cyan), var(--cy-cyan)) right 0 top 0 / 1px 14px no-repeat, linear-gradient(var(--cy-cyan), var(--cy-cyan)) right 0 top 0 / 14px 1px no-repeat, /* basso-sx */ linear-gradient(var(--green), var(--green)) left 0 bottom 0 / 1px 14px no-repeat, linear-gradient(var(--green), var(--green)) left 0 bottom 0 / 14px 1px no-repeat, /* basso-dx */ linear-gradient(var(--green), var(--green)) right 0 bottom 0 / 1px 14px no-repeat, linear-gradient(var(--green), var(--green)) right 0 bottom 0 / 14px 1px no-repeat; opacity: 0.55; transition: opacity .25s; } .pcard:hover::after, .product-card:hover::after, .feature-box:hover::after { opacity: 1; } .pcard:hover, .product-card:hover, .feature-box:hover { border-color: rgba(34, 211, 238, 0.45); box-shadow: 0 0 0 1px rgba(34, 211, 238, 0.12), 0 18px 50px rgba(0, 0, 0, 0.7), 0 0 44px rgba(34, 211, 238, 0.10); } .pcard-media, .card-media { position: relative; } .pcard-media::after, .card-media::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient( to bottom, transparent 0 3px, rgba(0, 255, 156, 0.05) 3px 4px ); } .pcard-title, .card-title { font-family: var(--font-mono); letter-spacing: 0.01em; } .pcard-price, .card-price, .product-price, .sticky-price, .stat-num, .cart-total-val { font-variant-numeric: tabular-nums; text-shadow: 0 0 18px rgba(0, 255, 156, 0.28); } /* badge: nastro tagliato, non pillola */ .card-badge, .badge { border-radius: 0 !important; clip-path: polygon(7px 0, 100% 0, calc(100% - 7px) 100%, 0 100%); text-transform: uppercase; letter-spacing: 0.12em; font-family: var(--font-mono); } /* pill / chip → tag squadrati */ .trust-pill, .product-trust span, .cart-trust span, .cat-link, .legal-nav a, .product-category { border-radius: 0 !important; clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px); text-transform: uppercase; font-size: 12px; letter-spacing: 0.1em; } .cat-link.active { color: #02030a; box-shadow: 0 0 26px rgba(0, 255, 156, 0.35); } /* stato "online" pulsante */ .product-stock::before, .pcard-stock::before { animation: livePulse 1.6s ease-in-out infinite; } @keyframes livePulse { 0%, 100% { opacity: 1; box-shadow: 0 0 6px var(--green); } 50% { opacity: .35; box-shadow: 0 0 14px var(--green); } } /* ========================================================= 7. CARRELLO — pannello da terminale ========================================================= */ #cartDrawer { background: var(--cy-bg-2); border-left: 1px solid var(--cy-line); } .cart-header { background: linear-gradient(160deg, rgba(34, 211, 238, 0.10), rgba(0, 255, 156, 0.03) 70%, transparent); border-bottom: 1px solid var(--cy-line); } .cart-header h2, .cart-count-pill, .cart-header-sub, .cart-item-name, .cart-item-price, .cart-total-label, .cart-sum-row, .cart-qty-num, .cart-item-remove, .cart-clear-btn, .cart-aside h3, .cart-empty-title { font-family: var(--font-mono); } .cart-header h2::before { content: "// "; color: var(--cy-cyan); } .cart-item, .cart-aside, .cart-stepper { border-radius: 0 !important; background: rgba(255, 255, 255, 0.035); border: 1px solid rgba(0, 255, 156, 0.12); } .cart-item-img, .cart-item-remove, .cart-close, .cart-empty-icon, .cart-count-pill { border-radius: 0 !important; } .cart-qty-btn { font-family: var(--font-mono); } #cartFab { border-radius: 0 !important; clip-path: polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px); box-shadow: 0 0 0 1px rgba(34, 211, 238, 0.4), 0 8px 30px rgba(0, 255, 156, 0.28); } #cartBadge { border-radius: 0 !important; font-family: var(--font-mono); } /* ========================================================= 8. FOOTER + varie ========================================================= */ .site-footer { background: linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.9)); border-top: 1px solid var(--cy-line); } .site-footer-brand { font-family: var(--font-mono); letter-spacing: 0.28em; } .site-footer-copy::before { content: "» "; opacity: .5; } .marquee, .cookie-banner { border-radius: 0 !important; } .cookie-banner { border: 1px solid var(--cy-line); background: rgba(4, 6, 14, 0.96); } .cookie-actions button { border-radius: 0 !important; font-family: var(--font-mono); text-transform: uppercase; letter-spacing: .08em; } /* form: campi da console */ .feedback-form input, .feedback-form textarea { border-radius: 0 !important; background: #05070e !important; border: 1px solid rgba(0, 255, 156, 0.18) !important; font-family: var(--font-mono) !important; } .feedback-form input:focus, .feedback-form textarea:focus { border-color: var(--cy-cyan) !important; box-shadow: 0 0 0 3px rgba(34, 211, 238, 0.12) !important; } .feedback-form label { font-family: var(--font-mono); color: var(--cy-cyan); } .faq-item summary { font-family: var(--font-mono); letter-spacing: .02em; } .faq-item summary::after { color: var(--cy-cyan); } /* barra sticky d'acquisto */ .product-sticky-bar { border-top: 1px solid var(--cy-line); background: rgba(4, 5, 10, 0.97); } /* ========================================================= 9. MOBILE — l'effetto resta, il costo di rendering no ========================================================= */ @media (max-width: 768px) { .fx-vignette { background: radial-gradient(ellipse 130% 100% at 50% 50%, transparent 48%, rgba(0,0,0,0.7) 100%); } .home-nav .nav-logo span { letter-spacing: 0.22em; } /* le squadrette restano, ma più corte per non affollare */ .pcard::after, .product-card::after, .feature-box::after, .product-desc-block::after, .feedback-card::after, .hero-stats::after { background-size: 1px 10px, 10px 1px, 1px 10px, 10px 1px, 1px 10px, 10px 1px, 1px 10px, 10px 1px; } } /* su touch niente hover appiccicoso */ @media (hover: none) { .pcard:hover, .product-card:hover, .feature-box:hover { border-color: var(--cy-line); box-shadow: none; }.cta.ghost:hover, .atc-btn:hover { background: rgba(34, 211, 238, 0.07); border-color: rgba(34, 211, 238, 0.4); color: #9fe9f7; } } /* ========================================================= 10. RIDUZIONE MOVIMENTO — tutto fermo, estetica intatta ========================================================= */ @media (prefers-reduced-motion: reduce) { .home-nav::after, .cta:not(.ghost), .buy-btn:not(:disabled), .cart-checkout-btn:not(:disabled), .product-stock::before, .pcard-stock::before { animation: none !important; } } /* ========================================================= ⛧ CYBERDECK v2 — "tutto terminale" Regola di leggibilità: glitch su titoli, etichette e cornici. MAI sul testo di lettura (paragrafi, descrizioni, FAQ, legal). ========================================================= */ /* ── 13. NAV — barra di stato da console ── */ .nav-status { display: flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .14em; color: var(--cy-dim); white-space: nowrap; }.nav-status .dot { width: 6px; height: 6px; background: var(--green); box-shadow: 0 0 8px var(--green); animation: livePulse 1.6s ease-in-out infinite; }.nav-status .lbl { color: var(--green); }.nav-status .clock { color: var(--cy-cyan); font-variant-numeric: tabular-nums; } @media (max-width: 900px) { .nav-status { display: none; } } /* ── 14. TITOLI — glitch più insistente + cursore ── */ /* ── 15. PANNELLI — cornice da finestra di terminale ── */ .product-desc-block, .feature-box, .mini-vouch, .legal-section, .faq-item { position: relative; } /* barra del titolo: tre tacche come i bottoni di una finestra */ .product-desc-block::before, .feature-box::before { content: ""; position: absolute; top: 9px; right: 11px; width: 26px; height: 4px; background: linear-gradient(var(--cy-hot), var(--cy-hot)) 0 0 / 4px 4px no-repeat, linear-gradient(var(--cy-amber), var(--cy-amber)) 11px 0 / 4px 4px no-repeat, linear-gradient(var(--green), var(--green)) 22px 0 / 4px 4px no-repeat; opacity: .6; pointer-events: none; } /* ── 16. LINK E BOTTONI ── */ .cta::before, .buy-btn::before, .atc-btn::before, .cart-checkout-btn:not(:disabled)::before { content: ""; } .site-footer-links a::before { content: "/"; color: var(--cy-cyan); opacity: .5; margin-right: 5px; } .legal-nav a::before { content: "$ "; opacity: .5; } .cat-link:hover, .nav-links a:hover, .site-footer-links a:hover, .legal-nav a:hover /* ── 17. MENU MOBILE — apertura a scatti, HUD, link sfasati ── */ .mob-menu { background: linear-gradient(165deg, rgba(7, 9, 18, .985), rgba(4, 5, 10, .995)); border-left: 1px solid var(--cy-cyan); box-shadow: -1px 0 0 rgba(255, 46, 99, .45), -34px 0 70px rgba(0, 0, 0, .85), inset 0 0 70px rgba(34, 211, 238, .05); overflow: hidden; } .mob-menu::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(to bottom, transparent 0 2px, rgba(0, 255, 156, .05) 2px 3px); } .mob-menu::after { content: ""; position: absolute; left: 0; right: 0; height: 16%; pointer-events: none; background: linear-gradient(to bottom, transparent, rgba(34, 211, 238, .12), transparent); }.mob-menu.open::after { animation: mobScan 3s linear infinite; } .mob-menu.open { animation: mobGlitchIn .44s steps(1, end) 1; } .mob-menu a { position: relative; z-index: 1; } .mob-menu a::before { content: "> "; color: var(--cy-cyan); opacity: .6; } .mob-menu.open a { animation: mobLinkIn .34s both; }.mob-menu.open a:nth-of-type(1) { animation-delay: .10s; }.mob-menu.open a:nth-of-type(2) { animation-delay: .16s; }.mob-menu.open a:nth-of-type(3) { animation-delay: .22s; }.mob-menu.open a:nth-of-type(4) { animation-delay: .28s; }.mob-menu.open a:nth-of-type(5) { animation-delay: .34s; } /* col menu aperto il tasto carrello galleggiava sopra il pannello: il drawer precede il FAB nel DOM, quindi basta il selettore fratello */ .mob-menu.open ~ #cartFab { opacity: 0; pointer-events: none; } /* ── 17. HERO RICH & 3D BENTO SHOWCASE ── */ .home-scroll { overflow-x: hidden; overflow-y: auto; min-height: 100vh; display: flex; flex-direction: column; } .hero-rich { position: relative; padding: calc(90px + env(safe-area-inset-top, 0px)) 20px 60px 20px; display: flex; justify-content: center; align-items: center; text-align: center; flex: 1 0 auto; } .hero-wrap { position: relative; max-width: 960px; width: 100%; z-index: 2; display: flex; flex-direction: column; align-items: center; } .hero-badge { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: 99px; background: rgba(0, 255, 156, 0.08); border: 1px solid rgba(0, 255, 156, 0.3); color: var(--green); font-family: var(--font-mono); font-size: 11px; font-weight: 700; letter-spacing: 0.08em; margin-bottom: 20px; box-shadow: 0 0 20px rgba(0, 255, 156, 0.15); } .pulse-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 10px var(--green); animation: pulseDot 2s infinite ease-in-out; } @keyframes pulseDot { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.4); opacity: 0.5; } } .hero-headline { font-size: clamp(2.2rem, 6vw, 3.8rem); font-weight: 800; line-height: 1.1; letter-spacing: -0.02em; margin-bottom: 16px; color: #ffffff; } .hero-video-box { width: 100%; max-width: 860px; margin-top: 40px; border-radius: 18px; overflow: hidden; background: rgba(10, 14, 20, 0.85); border: 1px solid rgba(155, 92, 255, 0.35); box-shadow: 0 24px 70px rgba(0, 0, 0, 0.8), 0 0 50px rgba(155, 92, 255, 0.2), 0 0 80px rgba(0, 255, 156, 0.08); position: relative; transition: transform 0.3s ease, border-color 0.3s ease; } .hero-video-box:hover { border-color: rgba(0, 255, 156, 0.6); box-shadow: 0 30px 90px rgba(0, 0, 0, 0.9), 0 0 60px rgba(0, 255, 156, 0.3); } .video-window-bar { display: flex; align-items: center; justify-content: space-between; padding: 10px 16px; background: rgba(7, 10, 15, 0.95); border-bottom: 1px solid rgba(255, 255, 255, 0.08); } .win-dots { display: flex; gap: 6px; }.win-dots span { width: 10px; height: 10px; border-radius: 50%; background: rgba(255, 255, 255, 0.15); }.win-dots span:nth-child(1) { background: #ff5f56; }.win-dots span:nth-child(2) { background: #ffbd2e; }.win-dots span:nth-child(3) { background: #27c93f; } .win-title { font-family: var(--font-mono); font-size: 11px; font-weight: 700; color: #8c9fa8; } .live-pill { font-family: var(--font-mono); font-size: 9px; font-weight: 800; padding: 2px 8px; border-radius: 6px; background: rgba(255, 46, 99, 0.15); border: 1px solid rgba(255, 46, 99, 0.4); color: #ff2e63; animation: pulseDot 2s infinite ease-in-out; } .hero-video-box video { width: 100%; display: block; aspect-ratio: 16/9; object-fit: cover; } .video-overlay-telemetry { position: absolute; bottom: 12px; left: 12px; right: 12px; display: flex; gap: 10px; flex-wrap: wrap; pointer-events: none; } .tel-chip { padding: 6px 12px; border-radius: 8px; background: rgba(5, 7, 12, 0.85); border: 1px solid rgba(255, 255, 255, 0.1); backdrop-filter: blur(10px); font-family: var(--font-mono); font-size: 10.5px; display: flex; gap: 6px; }.tel-chip span { color: #72848f; font-weight: 600; }.tel-chip b { color: var(--green); } /* BENTO GRID */ .bento-section { max-width: 1020px; margin: 0 auto; padding: 40px 20px 80px 20px; } .bento-header { text-align: center; margin-bottom: 40px; }.bento-title { font-size: clamp(1.8rem, 4.5vw, 2.6rem); font-weight: 800; margin-top: 8px; } .bento-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; } .bento-card { background: rgba(11, 15, 22, 0.75); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 16px; padding: 24px; display: flex; flex-direction: column; gap: 10px; backdrop-filter: blur(16px); transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease; } .bento-card:hover { border-color: rgba(0, 255, 156, 0.4); transform: translateY(-3px); box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5), 0 0 25px rgba(0, 255, 156, 0.12); } .bento-hero-card { grid-column: span 3; background: linear-gradient(135deg, rgba(155, 92, 255, 0.12), rgba(0, 255, 156, 0.08)); border-color: rgba(155, 92, 255, 0.35); } .bento-icon { font-size: 24px; } .bento-card h3 { font-size: 16px; font-weight: 700; color: #ffffff; } .bento-card p { font-size: 13px; color: #8c9fa8; line-height: 1.6; } .bento-tag { font-family: var(--font-mono); font-size: 11px; color: var(--green); margin-top: 6px; font-weight: 700; } @media(max-width: 768px) { .bento-grid { grid-template-columns: 1fr; }.bento-hero-card { grid-column: span 1; }.video-overlay-telemetry { display: none; } } /* ── 18. LEGGIBILITÀ — il testo di lettura resta pulito ── */ .product-desc, .legal-section p, .legal-section li, .faq-item p, .mini-vouch-text, .feature-box p, .hero-sub, .cat-sub, .card-desc, .site-footer-copy { text-shadow: none !important; animation: none !important; } /* ── 19. MOBILE — stessa estetica, meno lavoro per la GPU ── */ @media (max-width: 768px) { .product-desc-block::before, .feature-box::before { top: 7px; right: 9px; } } /* ── 20. RIDUZIONE MOVIMENTO ── */ @media (prefers-reduced-motion: reduce) { .mob-menu.open, .mob-menu.open a, .mob-menu.open::after, .nav-status .dot { animation: none !important; } }