/* ========================================================================= scores.css — highscores.php et lastscores.php. À charger APRÈS style.css et site-chrome.css. style.css reste nécessaire pour la pastille de niveau (.xp-level-badge) rendue par lib/xp_rank.php ; les quelques neutralisations en tête annulent ce qu'elle fait fuir dans ces pages (images arrondies, couleurs de liens et de titres). ========================================================================= */ .sc { position: relative; padding-bottom: 70px; isolation: isolate; color: var(--text); font-family: 'Figtree', system-ui, -apple-system, sans-serif; line-height: 1.55; /* Même correction que sur le profil : sans fond, la page s'arrête au dégradé du hero puis retombe sur le radial que style.css pose sur , plus clair à cette hauteur. La cassure se voit à l'endroit où le hero se termine. --void étant la couleur sur laquelle il finit, la jonction devient invisible. */ background: var(--void); } .sc *, .sc *::before, .sc *::after { box-sizing: border-box; } .sc img { border-radius: 0; } /* `:where()` ne compte pas dans la specificite : la regle vaut (0,0,1), juste assez pour battre le `a { color:#DDDDDD }` de style.css par l'ordre de chargement, et assez peu pour ceder devant tout composant qui pose sa propre couleur — `.btn-prime`, `.sc-period.is-active`… Ecrite `.sc a`, elle valait (0,1,1) et rendait ces composants illisibles. */ :where(.sc) a { color: inherit; text-decoration: none; } /* `:where()` neutralise la spécificité : sans lui la règle vaut (0,1,1) et l'emporte sur `.display` (0,1,0), si bien que tous les titres retombaient sur Figtree au lieu d'Archivo. Même correction que pour les liens. */ :where(.sc) h1, :where(.sc) h2, :where(.sc) h3, :where(.sc) h4 { color: var(--text); font-family: inherit; } .sc p { color: inherit; } /* ------------------------------------------------------------------ hero -- */ .sc-hero { position: relative; padding: 46px 0 34px; } .sc-hero-bg { position: absolute; inset: -120px 0 0; z-index: -1; overflow: hidden; pointer-events: none; } .sc-hero-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(4, 5, 12, .3) 0%, rgba(4, 5, 12, .7) 60%, var(--void) 100%), repeating-linear-gradient(0deg, rgba(0, 0, 0, .3) 0 1px, transparent 1px 3px); } .sc .kicker { color: var(--muted); } .sc-hero h1 { font-size: clamp(2.2rem, 4.6vw, 3.6rem); margin: 12px 0 14px; } .sc-hero p.sc-lede { color: var(--muted); font-size: 1.02rem; max-width: 52ch; margin: 0; line-height: 1.6; } .sc-rail { display: flex; align-items: stretch; margin-top: 28px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); } .sc-rail div { flex: 1; padding: 15px 0 14px; border-left: 1px solid var(--line-soft); } .sc-rail div:first-child { border-left: 0; padding-left: 0; } .sc-rail div:not(:first-child) { padding-left: 20px; } .sc-rail b { display: block; font-family: 'Archivo', sans-serif; font-stretch: 112%; font-weight: 800; font-size: 1.7rem; line-height: 1; font-variant-numeric: tabular-nums; } .sc-rail div.is-live b { color: var(--score); } .sc-rail span { display: block; margin-top: 7px; font-size: 9.5px; letter-spacing: .15em; text-transform: uppercase; color: var(--dim); font-weight: 700; } /* --------------------------------------------------------------- filtres -- */ /* Les deux