/* ========================================================= ONLYBOOST — DESIGN SYSTEM Palette, tipografia, effetti glow, componenti condivisi. Modifica i valori in :root per cambiare il tema ovunque. ========================================================= */ /* Angolo del LED che gira sui bordi. Serve @property: senza, un'angolo dentro un conic-gradient non e animabile. Stessa tecnica dell'app OnlyBoost WinTools. */ @property --led-angle { syntax: ""; initial-value: 0deg; inherits: false; } @keyframes led-spin { to { --led-angle: 360deg; } } /* ---------- 1. TOKEN ---------- */ :root { /* Fondali: dal nero assoluto al blu-notte */ --bg-void: #05070d; --bg-base: #0a0a0a; --bg-raise: #0e1220; --bg-card: #11162a; --bg-card-hi: #161d36; /* Blu del brand + estensione della scala */ --blue-300: #93b8ff; --blue-400: #60a5fa; --blue-500: #3b82f6; /* colore ufficiale OnlyBoost */ --blue-600: #2563eb; --blue-700: #1d4ed8; /* Accento dell'app WinTools: il sito e l'app devono sembrare la stessa cosa */ --accent-app: #3d8bff; /* Accento freddo: serve solo a dare profondità ai gradienti */ --cyan-400: #22d3ee; --violet-400: #818cf8; /* Semaforo */ --ok-400: #34d399; --warn-400: #fbbf24; --bad-400: #f87171; /* Testo */ --text-hi: #eef2ff; --text: #c7d2e8; --text-mid: #8ea0c0; --text-low: #7a8ba6; /* Bordi e vetro */ --line: rgba(147, 184, 255, 0.12); --line-hi: rgba(147, 184, 255, 0.28); --glass: rgba(18, 24, 44, 0.55); /* Trama geometrica di sfondo: deve essere quasi impercettibile, una texture che si sente piu che vedersi. */ --mesh-line: rgba(147, 184, 255, 0.045); --mesh-dot: rgba(96, 165, 250, 0.09); /* Superfici scritte a mano nelle regole: qui diventano token, cosi il tema chiaro puo ribaltarle tutte in un colpo solo. */ --veil: rgba(5, 7, 13, 0.82); /* nav quando scrolli */ --veil-solid: rgba(5, 7, 13, 0.97); /* menu mobile aperto */ --surface-1: rgba(10, 14, 26, 0.5); /* slot, campi, opzioni */ --surface-2: rgba(10, 14, 26, 0.75); /* celle HUD */ --sunken: rgba(5, 7, 13, 0.6); /* input incassati */ --footer-fade: rgba(5, 7, 13, 0.9); /* sfumatura verso il footer */ --btn-ink: #04070f; /* testo sui bottoni pieni */ --hairline: rgba(147, 184, 255, 0.04); /* fondo tenue: giorni calendario, barre */ /* Glow: la firma visiva del sito */ --glow-blue: 0 0 40px rgba(59, 130, 246, 0.35); --glow-blue-lg: 0 0 90px rgba(59, 130, 246, 0.28); --glow-cyan: 0 0 40px rgba(34, 211, 238, 0.3); --glow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.06); /* Gradienti */ --grad-brand: linear-gradient(120deg, var(--blue-500), var(--cyan-400)); --grad-text: linear-gradient(120deg, #ffffff 0%, var(--blue-300) 45%, var(--cyan-400) 100%); --grad-line: linear-gradient(90deg, transparent, var(--blue-500), var(--cyan-400), transparent); /* Tipografia */ --font-display: "Space Grotesk", ui-sans-serif, system-ui, sans-serif; --font-body: "Rubik", ui-sans-serif, system-ui, sans-serif; --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace; /* Ritmo */ --shell: 1200px; --pad: clamp(1.25rem, 4vw, 2.5rem); --radius: 18px; --radius-sm: 12px; /* Curve di animazione */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); } /* ========================================================= TEMA CHIARO Si attiva con , lo scrive fx.js. Il sito nasce scuro: qui non si "schiarisce" e basta, si ribalta il ragionamento. Sul nero la profondita la danno i BAGLIORI (luce che esce dagli oggetti); sul bianco la danno le OMBRE. Un glow blu su fondo bianco sembra solo una macchia. ========================================================= */ :root[data-theme="light"] { --bg-void: #e8edf7; --bg-base: #f6f8fc; --bg-raise: #ffffff; --bg-card: #ffffff; --bg-card-hi: #f2f6fd; /* Il blu resta quello del brand, ma i toni chiari servono meno */ --blue-300: #1d4ed8; --blue-400: #2563eb; --text-hi: #0a1020; --text: #37455e; --text-mid: #5a6a86; --text-low: #5e6e88; --line: rgba(10, 16, 32, 0.1); --line-hi: rgba(37, 99, 235, 0.34); --glass: rgba(255, 255, 255, 0.78); /* Trama sul chiaro: serve il blu ACCESO del brand (#3b82f6) e un'opacita piu alta che sullo scuro. Col blu scuro a bassa opacita spariva del tutto: su fondo bianco un velo blu tenue si confonde col bianco, mentre su fondo nero la stessa intensita risalta. */ --mesh-line: rgba(59, 130, 246, 0.26); --mesh-dot: rgba(59, 130, 246, 0.34); --hairline: rgba(10, 16, 32, 0.035); --veil: rgba(246, 248, 252, 0.85); --veil-solid: rgba(246, 248, 252, 0.98); --surface-1: rgba(255, 255, 255, 0.7); --surface-2: rgba(255, 255, 255, 0.85); --sunken: #ffffff; --footer-fade: rgba(232, 237, 247, 0.9); /* Bagliori -> ombre morbide */ --glow-blue: 0 6px 22px rgba(37, 99, 235, 0.16); --glow-blue-lg: 0 14px 44px rgba(37, 99, 235, 0.2); --glow-cyan: 0 6px 22px rgba(8, 145, 178, 0.16); --glow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.9); --grad-text: linear-gradient(120deg, #0a1020 0%, #2563eb 55%, #0891b2 100%); /* --btn-ink resta scuro anche sul chiaro: i bottoni restano blu-ciano e il testo bianco sopra il ciano si leggerebbe male. */ } /* --- Elementi che sul chiaro vanno ripensati, non solo ricolorati --- */ :root[data-theme="light"] body { color: var(--text); } /* La grana in "overlay" sul bianco sporca: si passa a multiply, molto tenue */ :root[data-theme="light"] .grain { mix-blend-mode: multiply; opacity: 0.02; } /* L'aurora sul chiaro diventa una velatura appena percettibile */ :root[data-theme="light"] .backdrop::before { background: radial-gradient(40% 40% at 20% 25%, rgba(37, 99, 235, 0.1), transparent 60%), radial-gradient(35% 35% at 80% 70%, rgba(8, 145, 178, 0.07), transparent 60%), radial-gradient(30% 30% at 60% 10%, rgba(129, 140, 248, 0.07), transparent 60%); } /* La cornice LED sul bianco va scurita, o sparisce */ :root[data-theme="light"] .led-frame i { background: conic-gradient( transparent 38%, rgba(37, 99, 235, 0) 44%, rgba(37, 99, 235, 0.45) 48%, rgba(29, 78, 216, 0.75) 50%, rgba(37, 99, 235, 0.45) 52%, rgba(37, 99, 235, 0) 56%, transparent 62% ); } :root[data-theme="light"] .led-frame::after { box-shadow: inset 0 0 0 1px rgba(37, 99, 235, 0.14); } :root[data-theme="light"] .led-ring { background: conic-gradient( from var(--led-angle), transparent 40%, rgba(37, 99, 235, 0.4) 48%, rgba(29, 78, 216, 0.8) 50%, rgba(37, 99, 235, 0.4) 52%, transparent 60% ); opacity: 0.45; } :root[data-theme="light"] .led-on > .led-ring { background: conic-gradient( from var(--led-angle), transparent 34%, rgba(8, 145, 178, 0.4) 44%, rgba(29, 78, 216, 0.9) 50%, rgba(8, 145, 178, 0.4) 56%, transparent 66% ); opacity: 1; } /* Le card sul chiaro hanno bisogno di un'ombra vera per staccarsi */ :root[data-theme="light"] .card { box-shadow: 0 2px 10px rgba(10, 16, 32, 0.05), 0 12px 32px rgba(10, 16, 32, 0.05); } :root[data-theme="light"] .card-glow::before { background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(37, 99, 235, 0.09), transparent 42%); } /* Il cursore luminoso sul bianco: piu contenuto, o sporca il fondo chiaro */ :root[data-theme="light"] .cursor-glow { background: radial-gradient(circle, rgba(37, 99, 235, 0.16) 0%, rgba(37, 99, 235, 0.06) 40%, transparent 72%); } :root[data-theme="light"] .cursor-dot { background: var(--blue-400); box-shadow: 0 0 10px rgba(37, 99, 235, 0.55); } /* La firma gigante nel footer */ :root[data-theme="light"] .footer-word { background: linear-gradient(180deg, rgba(37, 99, 235, 0.13), transparent 75%); -webkit-background-clip: text; background-clip: text; } /* Scrollbar */ :root[data-theme="light"] ::-webkit-scrollbar-track { background: var(--bg-void); } /* Il riflesso che attraversa i bottoni */ :root[data-theme="light"] .btn::after { background: linear-gradient(100deg, transparent 20%, rgba(255, 255, 255, 0.75) 50%, transparent 80%); } /* Il logo nella nav e su cerchio nero: sul chiaro serve un contorno morbido */ :root[data-theme="light"] .nav-logo img.mark { filter: drop-shadow(0 2px 6px rgba(10, 16, 32, 0.25)); } /* La filigrana in "screen" sul bianco sparisce: si passa a multiply */ :root[data-theme="light"] .wm-img { mix-blend-mode: multiply; opacity: 0.045; } :root[data-theme="light"] .card:hover > .wm-img { opacity: 0.1; } /* ---------- 2. RESET ---------- */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { background: var(--bg-base); color: var(--text); font-family: var(--font-body); font-size: 16px; line-height: 1.65; overflow-x: hidden; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } img, svg, video { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; } button, input, select, textarea { font: inherit; color: inherit; } /* Focus visibile: obbligatorio per chi naviga da tastiera */ :focus-visible { outline: 2px solid var(--blue-400); outline-offset: 3px; border-radius: 4px; } ::selection { background: var(--blue-500); color: #fff; } /* Scrollbar coerente col tema */ ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: var(--bg-void); } ::-webkit-scrollbar-thumb { background: linear-gradient(var(--blue-600), var(--blue-700)); border-radius: 10px; border: 2px solid var(--bg-void); } ::-webkit-scrollbar-thumb:hover { background: linear-gradient(var(--blue-400), var(--blue-600)); } /* ---------- 3. TIPOGRAFIA ---------- */ h1, h2, h3, h4 { font-family: var(--font-display); color: var(--text-hi); line-height: 1.08; letter-spacing: -0.03em; font-weight: 700; } h1 { font-size: clamp(2.6rem, 7vw, 5.5rem); } h2 { font-size: clamp(2rem, 4.4vw, 3.4rem); } h3 { font-size: clamp(1.15rem, 2vw, 1.5rem); } .grad-text { background: var(--grad-text); -webkit-background-clip: text; background-clip: text; color: transparent; } /* Etichetta monospace tipo "terminale" */ .eyebrow { font-family: var(--font-mono); font-size: 0.7rem; font-weight: 500; letter-spacing: 0.28em; text-transform: uppercase; color: var(--blue-400); display: inline-flex; align-items: center; gap: 0.6rem; } .eyebrow::before { content: ""; width: 26px; height: 1px; background: var(--blue-500); box-shadow: var(--glow-blue); } .lead { font-size: clamp(1rem, 1.5vw, 1.15rem); color: var(--text-mid); max-width: 62ch; } /* ---------- 4. LAYOUT ---------- */ .shell { width: min(100% - 2 * var(--pad), var(--shell)); margin-inline: auto; } .section { padding-block: clamp(4.5rem, 11vw, 9rem); position: relative; } .section-head { display: flex; flex-direction: column; gap: 1.1rem; margin-bottom: clamp(2.5rem, 5vw, 4rem); } /* ---------- 5. SFONDO: aurora + griglia ---------- */ /* Strato fisso dietro tutto: due macchie di luce che respirano più una griglia tecnica sfumata verso il basso. */ .backdrop { position: fixed; inset: 0; z-index: -2; background: var(--bg-base); overflow: hidden; pointer-events: none; } .backdrop::before { content: ""; position: absolute; inset: -30%; background: radial-gradient(40% 40% at 20% 25%, rgba(59, 130, 246, 0.22), transparent 60%), radial-gradient(35% 35% at 80% 70%, rgba(34, 211, 238, 0.14), transparent 60%), radial-gradient(30% 30% at 60% 10%, rgba(129, 140, 248, 0.12), transparent 60%); filter: blur(40px); animation: aurora 24s var(--ease-in-out) infinite alternate; } /* La vecchia griglia quadrata da 64px e stata tolta: con la trama fine di .bd-mesh sopra faceva solo confusione, due reticoli a scale diverse. */ /* ---------- MESH GEOMETRICA IN MOVIMENTO ---------- */ /* Reticolo isometrico di triangoli che scorre di continuo in diagonale. Va dentro .backdrop come . Due accorgimenti che lo rendono gratis in termini di prestazioni: 1) il disegno e fatto con due gradienti CSS ripetuti, non con immagini; 2) si muove con translate3d di ESATTAMENTE una piastrella (80px x 139px), quindi il ciclo e invisibile e il browser puo comporlo sulla GPU senza ridisegnare mai nulla. Niente background-position animata: quella ridipingerebbe tutto lo schermo a ogni frame. */ .bd-mesh { position: absolute; /* Sborda da tutti i lati: mentre scorre non deve mai scoprire un bordo */ inset: -20%; background-image: linear-gradient(60deg, transparent 49.3%, var(--mesh-line) 49.3% 50.7%, transparent 50.7%), linear-gradient(-60deg, transparent 49.3%, var(--mesh-line) 49.3% 50.7%, transparent 50.7%); /* Piastrella minuscola = trama finissima. Il rapporto 16:28 e quello che rende i triangoli equilateri (28 ≈ 16 x √3). */ background-size: 16px 28px; /* Sfuma verso i bordi: al centro si vede, ai lati sparisce */ mask-image: radial-gradient(125% 95% at 50% 25%, #000 15%, transparent 80%); -webkit-mask-image: radial-gradient(125% 95% at 50% 25%, #000 15%, transparent 80%); animation: mesh-drift 26s linear infinite; will-change: transform; } @keyframes mesh-drift { to { transform: translate3d(16px, 28px, 0); } } /* Secondo strato: puntini ancora piu fitti, in direzione opposta. Da profondita senza appesantire il disegno. */ .bd-mesh::after { content: ""; position: absolute; inset: -20%; background-image: radial-gradient(circle, var(--mesh-dot) 0.5px, transparent 0.5px); background-size: 11px 11px; animation: mesh-drift-alt 24s linear infinite; will-change: transform; } @keyframes mesh-drift-alt { to { transform: translate3d(-11px, 11px, 0); } } @keyframes aurora { 0% { transform: translate3d(0, 0, 0) scale(1); } 100% { transform: translate3d(4%, -3%, 0) scale(1.12); } } /* ---------- 5b. LED BORDER (come l'app WinTools) ---------- */ /* Una luce blu che gira lungo il bordo della finestra. La maschera "xor" ritaglia il centro e lascia visibile solo la cornice di 1px; dentro, un quadrato con un conic-gradient ruota e si intravede solo lungo quell'anello. PERCHE UN FIGLIO CHE RUOTA E NON --led-angle: animare un angolo dentro un conic-gradient obbliga il browser a RIDIPINGERE tutta la finestra a ogni frame (nell'app Electron si regge, su un sito no: bloccava perfino gli screenshot). Una rotazione via transform invece la gestisce la GPU e non ridisegna nulla. Stesso effetto, costo quasi zero. */ .led-frame { position: fixed; inset: 0; z-index: 9997; pointer-events: none; padding: 1px; overflow: hidden; -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask-composite: exclude; } /* Il quadrato che gira. Grande abbastanza da coprire gli angoli della finestra anche mentre ruota. */ .led-frame i { position: absolute; top: 50%; left: 50%; width: 220vmax; height: 220vmax; margin: -110vmax 0 0 -110vmax; background: conic-gradient( transparent 38%, rgba(61, 139, 255, 0) 44%, rgba(96, 165, 250, 0.55) 48%, rgba(147, 197, 253, 0.85) 50%, rgba(96, 165, 250, 0.55) 52%, rgba(61, 139, 255, 0) 56%, transparent 62% ); animation: led-rotate 9s linear infinite; will-change: transform; } @keyframes led-rotate { to { transform: rotate(360deg); } } /* Cornice fissa sempre accesa, sotto al LED che gira */ .led-frame::after { content: ""; position: fixed; inset: 0; pointer-events: none; box-shadow: inset 0 0 0 1px rgba(61, 139, 255, 0.1); } /* ---------- LED SULLE CARD ---------- */ /* Anello di luce che gira sul bordo di ogni card. Lo inserisce fx.js dentro ogni .card: e un elemento vero e non uno pseudo perche ::before e gia preso da .card-glow (il glow del mouse), e due regole sullo stesso pseudo si annullerebbero. QUI usiamo --led-angle (che RIDIPINGE) mentre la cornice della finestra usa una rotazione transform. Non e un'incoerenza: il repaint costa quanto l'area da ridisegnare. Su tutto lo schermo e insostenibile; su una card (~380x540) e trascurabile. La strada opposta — un quadrato ruotato grande quanto la diagonale — qui e stata provata e va PEGGIO: obbliga a comporre 9 layer mascherati da oltre un milione di pixel l'uno, e il sito si impianta anche da fermo. */ .led-ring { position: absolute; inset: 0; z-index: 1; border-radius: inherit; padding: 1px; pointer-events: none; background: conic-gradient( from var(--led-angle), transparent 40%, rgba(96, 165, 250, 0.5) 48%, rgba(147, 197, 253, 0.9) 50%, rgba(96, 165, 250, 0.5) 52%, transparent 60% ); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask-composite: exclude; opacity: 0.5; transition: opacity 0.5s var(--ease-out); animation: led-spin 7s linear infinite; } /* Sotto il mouse il LED si fa piu deciso */ .card:hover > .led-ring { opacity: 1; } /* Card in evidenza: LED sempre pieno, piu veloce e verso il ciano */ .led-on > .led-ring { opacity: 1; animation-duration: 4.5s; background: conic-gradient( from var(--led-angle), transparent 34%, rgba(34, 211, 238, 0.45) 44%, rgba(147, 197, 253, 1) 50%, rgba(34, 211, 238, 0.45) 56%, transparent 66% ); } /* ---------- 5c. GLOW CHE SEGUE IL MOUSE ---------- */ /* Un alone morbido ancorato al cursore, ovunque nella pagina. Le coordinate le scrive fx.js in --cx/--cy. */ .cursor-glow { position: fixed; top: 0; left: 0; /* Raggio stretto e luce piu forte: un alone largo e slavato sembra una macchia, uno stretto e intenso sembra una sorgente di luce. */ width: 300px; height: 300px; margin: -150px 0 0 -150px; /* centrato sul cursore */ z-index: 1; pointer-events: none; border-radius: 50%; background: radial-gradient( circle, rgba(61, 139, 255, 0.42) 0%, rgba(61, 139, 255, 0.16) 40%, transparent 72% ); opacity: 0; transition: opacity 0.6s var(--ease-out); will-change: transform; } .cursor-glow.is-on { opacity: 1; } /* Punto luminoso piccolo e nitido, segue il cursore piu da vicino */ .cursor-dot { position: fixed; top: 0; left: 0; width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px; z-index: 9996; pointer-events: none; border-radius: 50%; background: var(--blue-300); box-shadow: 0 0 12px var(--blue-400), 0 0 26px rgba(61, 139, 255, 0.7); opacity: 0; transition: opacity 0.4s, width 0.25s var(--ease-out), height 0.25s var(--ease-out); will-change: transform; } .cursor-dot.is-on { opacity: 1; } /* Sopra un elemento cliccabile il punto si ingrandisce */ .cursor-dot.is-hot { width: 14px; height: 14px; margin: -7px 0 0 -7px; background: var(--cyan-400); box-shadow: 0 0 18px var(--cyan-400), 0 0 40px rgba(34, 211, 238, 0.6); } /* Niente cursore finto su touch: li non esiste un mouse */ @media (hover: none) { .cursor-glow, .cursor-dot { display: none; } } /* Rumore finissimo: toglie l'effetto "plastica" ai gradienti */ .grain { position: fixed; inset: 0; z-index: 9998; pointer-events: none; opacity: 0.035; mix-blend-mode: overlay; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E"); } /* Barra di avanzamento scroll */ .scroll-bar { position: fixed; top: 0; left: 0; height: 2px; width: 0; z-index: 9999; background: var(--grad-brand); box-shadow: var(--glow-blue); transition: width 0.1s linear; } /* ---------- 6. BOTTONI ---------- */ .btn { --btn-bg: var(--grad-brand); position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem; padding: 0.95rem 1.9rem; border: 0; border-radius: 999px; font-family: var(--font-display); font-size: 0.95rem; font-weight: 600; letter-spacing: 0.01em; color: #04070f; background: var(--btn-bg); cursor: pointer; overflow: hidden; isolation: isolate; transition: transform 0.35s var(--ease-out), box-shadow 0.35s var(--ease-out); box-shadow: var(--glow-blue), var(--glow-inset); } /* Riflesso che attraversa il bottone al passaggio del mouse */ .btn::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(100deg, transparent 20%, rgba(255, 255, 255, 0.55) 50%, transparent 80%); transform: translateX(-120%); transition: transform 0.7s var(--ease-out); } .btn:hover { transform: translateY(-3px); box-shadow: var(--glow-blue-lg), var(--glow-inset); } .btn:hover::after { transform: translateX(120%); } .btn:active { transform: translateY(-1px); } .btn-ghost { background: transparent; color: var(--text-hi); border: 1px solid var(--line-hi); box-shadow: none; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); } .btn-ghost:hover { border-color: var(--blue-400); background: rgba(59, 130, 246, 0.08); box-shadow: var(--glow-blue); } .btn:disabled { opacity: 0.45; cursor: not-allowed; transform: none; box-shadow: none; } /* ---------- 7. CARD DI VETRO ---------- */ .card { position: relative; background: var(--glass); border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(1.5rem, 2.5vw, 2rem); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); overflow: hidden; transition: border-color 0.4s var(--ease-out), transform 0.4s var(--ease-out); } /* Alone che segue il mouse: le coordinate --mx/--my le scrive fx.js */ .card-glow::before { content: ""; position: absolute; inset: -1px; border-radius: inherit; background: radial-gradient( 420px circle at var(--mx, 50%) var(--my, 50%), rgba(59, 130, 246, 0.16), transparent 42% ); opacity: 0; transition: opacity 0.4s var(--ease-out); pointer-events: none; } .card-glow:hover::before { opacity: 1; } .card-glow:hover { border-color: var(--line-hi); transform: translateY(-4px); } /* ---------- FILIGRANA COL LOGO ---------- */ /* Il razzo OnlyBoost stampato in trasparenza nell'angolo della card. E un vero e non uno pseudo-elemento perche ::before e gia occupato dal glow del mouse (.card-glow): due regole sullo stesso pseudo-elemento si sovrascrivono a vicenda. Va marcato aria-hidden="true" nell'HTML: e decorativo. */ .wm-img { position: absolute; right: -16px; bottom: -16px; width: 118px; height: 118px; opacity: 0.06; pointer-events: none; user-select: none; transition: opacity 0.5s var(--ease-out), transform 0.6s var(--ease-out); /* screen: il cerchio nero del logo sparisce, resta il razzo luminoso */ mix-blend-mode: screen; } .card:hover > .wm-img { opacity: 0.15; transform: scale(1.06) rotate(-4deg); } /* Variante grande, per le sezioni */ .wm-img.is-big { width: 280px; height: 280px; right: -70px; bottom: -70px; opacity: 0.04; } /* Il vecchio "filo di luce" sul bordo superiore (.card-top-line) e stato rimosso: ora ogni .card riceve l'anello LED completo da fx.js, e i due trattamenti insieme facevano solo confusione. */ /* Pillola/badge */ .chip { display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.35rem 0.85rem; border-radius: 999px; border: 1px solid var(--line-hi); background: rgba(59, 130, 246, 0.1); font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--blue-300); } .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--ok-400); box-shadow: 0 0 10px var(--ok-400); animation: pulse 2s var(--ease-in-out) infinite; } @keyframes pulse { 50% { opacity: 0.35; transform: scale(0.8); } } /* ---------- CAROSELLO ORIZZONTALE ---------- */ /* Scorre di continuo da destra verso sinistra. Serve per le recensioni e per i content creator: invece di una griglia disordinata, una fila sola che gira. Come funziona il ciclo senza salti: fx.js duplica la pista, e l'animazione la sposta di -100% della propria larghezza. Quando la prima e uscita del tutto, la copia si trova esattamente dov'era la prima, e l'animazione riparte: l'occhio non vede lo stacco. Il padding-right pari al gap serve proprio a questo: senza, il -100% non tornerebbe al punto giusto e si vedrebbe uno scatto a ogni giro. */ .mx { position: relative; display: flex; overflow: hidden; /* Sfuma ai lati, cosi le card non appaiono e spariscono di netto */ mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); } .mx-track { display: flex; align-items: stretch; /* tutte le card alte uguali */ gap: var(--mx-gap, 1.25rem); padding-right: var(--mx-gap, 1.25rem); flex-shrink: 0; animation: mx-slide var(--mx-speed, 60s) linear infinite; will-change: transform; } /* Passando il mouse si ferma: se stai leggendo una recensione, non deve scapparti via. */ .mx:hover .mx-track, .mx:focus-within .mx-track { animation-play-state: paused; } @keyframes mx-slide { to { transform: translateX(-100%); } } @media (prefers-reduced-motion: reduce) { /* Niente moto: diventa una fila che si scorre a mano */ .mx { overflow-x: auto; mask-image: none; -webkit-mask-image: none; } .mx-track { animation: none; } .mx-track[aria-hidden="true"] { display: none; /* la copia serve solo al ciclo infinito */ } } /* ---------- 8. NAV ---------- */ .nav { position: fixed; top: 0; left: 0; right: 0; z-index: 900; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; padding: 1.1rem var(--pad); transition: background 0.4s var(--ease-out), border-color 0.4s var(--ease-out), padding 0.4s var(--ease-out); border-bottom: 1px solid transparent; } /* .is-stuck la aggiunge fx.js dopo qualche pixel di scroll */ .nav.is-stuck { background: var(--veil); -webkit-backdrop-filter: blur(18px) saturate(150%); backdrop-filter: blur(18px) saturate(150%); border-bottom-color: var(--line); padding-block: 0.75rem; } .nav-logo { display: flex; align-items: center; gap: 0.6rem; font-family: var(--font-display); font-weight: 700; font-size: 1.15rem; letter-spacing: -0.02em; color: var(--text-hi); } .nav-logo .mark { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; background: var(--grad-brand); box-shadow: var(--glow-blue); font-size: 0.85rem; color: #04070f; font-weight: 800; } /* Quando il marchio e il logo vero, niente gradiente sotto: basta il razzo con un alone blu. */ .nav-logo img.mark { width: 34px; height: 34px; background: none; box-shadow: none; object-fit: contain; filter: drop-shadow(0 0 9px rgba(61, 139, 255, 0.65)); transition: filter 0.4s var(--ease-out), transform 0.4s var(--ease-out); } .nav-logo:hover img.mark { filter: drop-shadow(0 0 16px rgba(61, 139, 255, 0.95)); transform: scale(1.07); } .nav-menu { display: flex; align-items: center; gap: 0.35rem; } .nav-menu a { position: relative; padding: 0.5rem 0.9rem; border-radius: 999px; font-size: 0.9rem; color: var(--text-mid); transition: color 0.3s var(--ease-out), background 0.3s var(--ease-out); } .nav-menu a:hover { color: var(--text-hi); background: var(--hairline); } .nav-menu a.is-active { color: var(--blue-300); } .nav-menu a.is-active::after { content: ""; position: absolute; bottom: 2px; left: 50%; transform: translateX(-50%); width: 16px; height: 2px; border-radius: 2px; background: var(--blue-400); box-shadow: var(--glow-blue); } .nav-actions { display: flex; align-items: center; gap: 0.75rem; } .nav .btn { padding: 0.65rem 1.35rem; font-size: 0.85rem; } /* ---------- INTERRUTTORE DEL TEMA ---------- */ .theme-btn { position: relative; width: 40px; height: 40px; flex-shrink: 0; display: grid; place-items: center; border-radius: 11px; border: 1px solid var(--line); background: var(--surface-1); color: var(--text-mid); cursor: pointer; overflow: hidden; transition: color 0.3s var(--ease-out), border-color 0.3s var(--ease-out); } .theme-btn:hover { color: var(--blue-300); border-color: var(--blue-400); } .theme-btn svg { width: 17px; height: 17px; grid-area: 1 / 1; transition: transform 0.5s var(--ease-out), opacity 0.3s var(--ease-out); } /* Le due icone stanno sovrapposte: ruota quella che serve */ .theme-btn .i-sole { opacity: 0; transform: rotate(-90deg) scale(0.4); } .theme-btn .i-luna { opacity: 1; transform: rotate(0) scale(1); } :root[data-theme="light"] .theme-btn .i-sole { opacity: 1; transform: rotate(0) scale(1); } :root[data-theme="light"] .theme-btn .i-luna { opacity: 0; transform: rotate(90deg) scale(0.4); } /* ---------- PULSANTE SCORRI (in basso a destra, con LED) ---------- */ .scroll-btn { position: fixed; right: clamp(1rem, 2.5vw, 1.75rem); bottom: clamp(1rem, 2.5vw, 1.75rem); z-index: 800; width: 54px; height: 54px; display: grid; place-items: center; border-radius: 50%; border: 0; background: var(--veil); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); color: var(--blue-300); cursor: pointer; transition: opacity 0.4s var(--ease-out), transform 0.4s var(--ease-out), color 0.3s var(--ease-out); } .scroll-btn:hover { transform: translateY(-3px); color: var(--text-hi); } /* Sparisce quando sei in fondo: la classe la mette fx.js */ .scroll-btn.is-hidden { opacity: 0; pointer-events: none; transform: translateY(12px); } /* Anello LED che gira sul bordo, come nell'app WinTools */ .scroll-btn::before { content: ""; position: absolute; inset: 0; border-radius: 50%; padding: 1.5px; background: conic-gradient( from var(--led-angle), transparent 30%, rgba(96, 165, 250, 0.6) 44%, rgba(147, 197, 253, 1) 50%, rgba(96, 165, 250, 0.6) 56%, transparent 70% ); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask-composite: exclude; animation: led-spin 3.5s linear infinite; pointer-events: none; } :root[data-theme="light"] .scroll-btn::before { background: conic-gradient( from var(--led-angle), transparent 30%, rgba(37, 99, 235, 0.5) 44%, rgba(29, 78, 216, 1) 50%, rgba(37, 99, 235, 0.5) 56%, transparent 70% ); } /* Cerchio tenue sotto l'anello, per staccarlo dal contenuto */ .scroll-btn::after { content: ""; position: absolute; inset: 0; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--line), var(--glow-blue); pointer-events: none; } .scroll-btn svg { width: 18px; height: 18px; position: relative; z-index: 1; animation: scroll-nudge 2.2s var(--ease-in-out) infinite; } @keyframes scroll-nudge { 0%, 100% { transform: translateY(-2px); } 50% { transform: translateY(2px); } } .burger { display: none; flex-direction: column; gap: 5px; width: 42px; height: 42px; align-items: center; justify-content: center; background: transparent; border: 1px solid var(--line); border-radius: 11px; cursor: pointer; } .burger span { display: block; width: 17px; height: 1.5px; background: var(--text-hi); border-radius: 2px; transition: transform 0.35s var(--ease-out), opacity 0.25s; } .burger.is-open span:first-child { transform: translateY(3.25px) rotate(45deg); } .burger.is-open span:last-child { transform: translateY(-3.25px) rotate(-45deg); } @media (max-width: 900px) { .burger { display: flex; } .nav-menu { position: fixed; inset: 0 0 auto; top: 0; padding: 6rem var(--pad) 2.5rem; flex-direction: column; align-items: stretch; gap: 0.25rem; background: var(--veil-solid); -webkit-backdrop-filter: blur(22px); backdrop-filter: blur(22px); border-bottom: 1px solid var(--line); transform: translateY(-100%); opacity: 0; pointer-events: none; transition: transform 0.45s var(--ease-out), opacity 0.3s; } .nav-menu.is-open { transform: translateY(0); opacity: 1; pointer-events: auto; } .nav-menu a { padding: 1rem 0.75rem; font-size: 1.1rem; border-bottom: 1px solid var(--line); border-radius: 0; } .nav-menu a.is-active::after { display: none; } .nav-actions .btn span.long { display: none; } } /* Telefoni stretti (~360px): la nav ha logo + Prenota + tema + burger, troppa roba. Nascondo la scritta ONLYBOOST accanto al logo (resta l'icona). font-size:0 azzera il testo; l'immagine ha dimensioni proprie e non ne risente. Vale solo per la nav, non per il footer. */ @media (max-width: 430px) { .nav .nav-logo { font-size: 0; gap: 0; } .nav .btn { padding: 0.6rem 1.1rem; } } /* ---------- 9. FOOTER ---------- */ .footer { position: relative; border-top: 1px solid var(--line); background: linear-gradient(180deg, transparent, var(--footer-fade)); padding-block: clamp(3rem, 6vw, 5rem) 2rem; margin-top: clamp(3rem, 8vw, 6rem); } .footer::before { content: ""; position: absolute; top: -1px; left: 0; right: 0; height: 1px; background: var(--grad-line); } .footer-grid { display: grid; grid-template-columns: 1.6fr repeat(3, 1fr); gap: clamp(1.75rem, 4vw, 3rem); } @media (max-width: 860px) { .footer-grid { grid-template-columns: 1fr 1fr; } .footer-brand { grid-column: 1 / -1; } } .footer h4 { font-size: 0.75rem; font-family: var(--font-mono); letter-spacing: 0.2em; text-transform: uppercase; color: var(--blue-400); margin-bottom: 1.1rem; } .footer ul { list-style: none; display: flex; flex-direction: column; gap: 0.6rem; } .footer li a { font-size: 0.9rem; color: var(--text-mid); transition: color 0.25s, transform 0.25s var(--ease-out); display: inline-block; } .footer li a:hover { color: var(--blue-300); transform: translateX(4px); } .footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 1rem; margin-top: 3rem; padding-top: 1.75rem; border-top: 1px solid var(--line); font-size: 0.82rem; color: var(--text-low); } .footer-bottom nav { display: flex; gap: 1.5rem; } .footer-bottom a:hover { color: var(--blue-300); } /* Firma gigante in fondo, puramente decorativa */ .footer-word { font-family: var(--font-display); font-weight: 700; font-size: clamp(3.5rem, 15vw, 12rem); line-height: 0.85; letter-spacing: -0.05em; text-align: center; margin-top: 2.5rem; background: linear-gradient(180deg, rgba(147, 184, 255, 0.14), transparent 75%); -webkit-background-clip: text; background-clip: text; color: transparent; user-select: none; pointer-events: none; } /* ---------- 10. RIVELAZIONE ALLO SCROLL ---------- */ /* Stato di partenza applicato solo se il JS e attivo (html.js), così senza JavaScript il contenuto resta comunque visibile. */ .js [data-reveal] { opacity: 0; transform: translateY(26px); transition: opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out); transition-delay: var(--delay, 0s); } .js [data-reveal].is-in { opacity: 1; transform: none; } /* ---------- 11. ACCESSIBILITA ---------- */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .skip-link { position: absolute; top: -100px; left: 1rem; z-index: 10000; padding: 0.75rem 1.25rem; border-radius: 0 0 10px 10px; background: var(--blue-500); color: #fff; font-weight: 600; transition: top 0.25s var(--ease-out); } .skip-link:focus { top: 0; } /* Chi ha chiesto meno animazioni riceve il sito statico ma completo */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } .js [data-reveal] { opacity: 1; transform: none; } /* Il LED che gira e il cursore luminoso sono puro movimento: con "riduci animazioni" restano una cornice statica e nient'altro. */ .led-frame i { display: none; } .led-frame::after { box-shadow: inset 0 0 0 1px rgba(61, 139, 255, 0.2); } /* Lo sfondo geometrico resta, ma fermo */ .bd-mesh, .bd-mesh::after { animation: none; } /* Il LED delle card resta acceso ma fermo: bordo luminoso, zero moto */ .led-ring, .led-on > .led-ring { animation: none; background: conic-gradient( from 220deg, transparent 40%, rgba(96, 165, 250, 0.5) 50%, transparent 60% ); } .led::after { display: none; } .cursor-glow, .cursor-dot { display: none; } }