/* ══════════════════════════════════════════ QLF MARKET - CUSTOM CSS Style premium - gris foncé/noir, grain fin, glows discrets, coins légèrement arrondis. Le bleu reste uniquement sur la zone Gaming (voir categories.njk). ══════════════════════════════════════════ */ /* Neutral greys ONLY. The old values here (#0c0c0e bg, #17171a cards, #9c9ca3 muted) were navy / slate blue-greys, which is what kept tinting the whole site blue even after the accent colors were swapped out. Every channel is now equal (or within 2 points). */ :root { --qlf-bg: #0c0c0e; --qlf-card: #17171a; --qlf-card-2: #1e1e21; --qlf-surface: #17171a; --qlf-surface2:#1e1e21; /* DA noir / blanc / violet: le noir et le blanc portent la page, le violet est le seul accent. Le nom --qlf-blue est conserve parce qu'il est reference partout dans le theme. */ --qlf-blue: #a855f7; --qlf-blue-h: #8b3fe0; --qlf-text: #f5f5f7; --qlf-muted: #9c9ca3; --qlf-border: rgba(168,85,247,0.16); --qlf-border-hover: rgba(168,85,247,0.40); --qlf-r: 8px; /* Violet de l'ambiance de fond. */ --qlf-violet: 168, 85, 247; --qlf-violet-deep: 109, 40, 217; } /* ── FOND ── */ html, body, #app, .flex-wrapper { background-color: var(--qlf-bg) !important; color: var(--qlf-text) !important; } /* ── AURAS GRISES (NOIR → GRIS CLAIR → NOIR) - halos radiaux doux qui dérivent lentement, défilent avec la page ── + FONDU À L'ARRIVÉE SUR CHAQUE PAGE - les deux animations sont combinées dans UNE seule déclaration `animation` (deux déclarations séparées sur le même élément s'écrasent l'une l'autre au lieu de s'additionner). ── */ /* ── GLOW NOIR + GRAIN, en couches de background pures sur body ── Tout tient dans UNE seule pile de background sur un seul élément: pas de filter, pas de mix-blend-mode, pas d'élément promu en couche séparée, pas de DOM en plus. C'est peint une fois et ça ne coûte plus rien au scroll, y compris sans accélération graphique. Le glow est NOIR: la base est un gris sombre légèrement relevé (le dégradé linéaire du bas de la pile), et les radiales noires viennent creuser dedans depuis le haut et les côtés. C'est cette obscurité qui "brille", pas une lueur claire. */ body { background-image: /* grain (couche du dessus) - une tuile de bruit de 180px, rasterisée une fois puis répétée */ url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='0.22'/%3E%3C/svg%3E"), /* glows violets - discrets, juste une ambiance colorée sur la base sombre */ radial-gradient(1300px 660px at 50% -6%, rgba(var(--qlf-violet), 0.20) 0%, rgba(var(--qlf-violet-deep), 0.10) 34%, rgba(var(--qlf-violet-deep), 0.035) 58%, rgba(0,0,0,0) 80%), radial-gradient(1000px 780px at 102% 26%, rgba(var(--qlf-violet), 0.14) 0%, rgba(var(--qlf-violet-deep), 0.06) 38%, rgba(0,0,0,0) 74%), radial-gradient(1000px 780px at -2% 58%, rgba(var(--qlf-violet), 0.14) 0%, rgba(var(--qlf-violet-deep), 0.06) 38%, rgba(0,0,0,0) 74%), radial-gradient(1100px 700px at 50% 104%, rgba(var(--qlf-violet), 0.13) 0%, rgba(var(--qlf-violet-deep), 0.055) 40%, rgba(0,0,0,0) 78%), /* base gris sombre relevée, pour que le noir ait de quoi creuser */ linear-gradient(180deg, #1b1b1e 0%, #151518 38%, #101012 72%, #0d0d0f 100%) !important; background-repeat: repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat !important; background-size: 180px 180px, auto, auto, auto, auto, auto !important; background-attachment: scroll !important; animation: qlfPageFade .4s ease !important; } @keyframes qlfPageFade { from { opacity: 0; } to { opacity: 1; } } @media (prefers-reduced-motion: reduce) { body { animation: none !important; } } /* Grain and glow both live in the single background stack on `body` above - deliberately NOT in separate pseudo-elements or overlay divs. body::before used to add another absolutely positioned gradient layer for the top-of-page bloom; that bloom is now just the first radial in that stack, so the extra layer is gone. */ /* ── UTILITIES ── */ /* Le bout accentue des titres: violet + halo violet. text-shadow uniquement, donc peint une fois avec le texte, sans couche compositee ni filter - ca reste fluide sans acceleration graphique, contrairement aux blur/mix-blend-mode qu'on avait retires. */ .qlf-glow, .qlf-blue-glow, .qlf-section-title .qlf-accent, .qlf-accent { color: var(--qlf-blue); text-shadow: 0 0 16px rgba(var(--qlf-violet), 0.55), 0 0 38px rgba(var(--qlf-violet), 0.26); } .qlf-container { max-width: 1400px; margin: 0 auto; padding: 0 2rem; } .qlf-section-head { text-align: center; margin-bottom: 3rem; } .qlf-section-title { font-size: clamp(1.8rem,3.5vw,2.8rem); font-weight: 900; letter-spacing: -0.02em; color: var(--qlf-text); margin: 0 0 0.75rem; text-transform: uppercase; } .qlf-section-sub { color: var(--qlf-muted); font-size: 1rem; margin: 0; } /* ── SCROLLBAR ── */ ::-webkit-scrollbar { width: 6px; } ::-webkit-scrollbar-track { background: var(--qlf-bg); } ::-webkit-scrollbar-thumb { background: rgba(var(--qlf-violet), 0.35); border-radius: 3px; } ::-webkit-scrollbar-thumb:hover { background: rgba(var(--qlf-violet), 0.55); } /* ── SELECTION ── */ ::selection { background: rgba(var(--qlf-violet), 0.35); color: #fff; } /* ── LIENS ── */ a { color: var(--qlf-blue); } a:hover { color: var(--qlf-blue-h); } /* ── COINS ARRONDIS COHÉRENTS (à la solar) - appliqué à tous les composants natifs Bootstrap ── */ .btn, .card, .modal-content, .form-control, .form-select, .dropdown-menu, .alert, .page-link, .badge:not(.rounded-pill), .accordion-item, .toast, .input-group, input, select, textarea { border-radius: var(--qlf-r) !important; } /* ── BOUTONS ── */ .btn-primary { background: var(--qlf-blue) !important; border-color: var(--qlf-blue) !important; } .btn-primary:hover { background: var(--qlf-blue-h) !important; border-color: var(--qlf-blue-h) !important; } .btn-outline-primary { color: var(--qlf-blue) !important; border-color: var(--qlf-blue) !important; } .btn-outline-primary:hover { background: var(--qlf-blue) !important; color: #fff !important; } /* ── SURVOL: contour violet sur tout ce qui se clique ── Le box-shadow "0 0 0 1px" fait le contour (il suit le border-radius, contrairement a outline) et la seconde ombre pose un halo discret. !important parce que les composants declarent leurs propres :hover dans leur