/** * Jeux RKUL — Tokens de la charte « arcade neon CRT » (ticket #134) * * Ce fichier ne contient QUE des declarations de variables et le @font-face. * Aucun selecteur d'element, aucune classe : le charger sur n'importe quelle * page ne peut donc rien casser. C'est le contrat de la charte. * * Regle : tous les tokens sont prefixes --rk-, pour ne jamais entrer en * collision avec les --bg / --primary / --card locaux des 15 pages. * * Les feuilles de chaque jeu aliasent leurs propres variables sur celles-ci * (voir lobby/css/lobby.css, games/tetris/style.css, ...). */ @font-face { font-family: 'Press Start 2P'; /* url() relative : elle se resout par rapport a CETTE feuille, pas au document. Fonctionne donc identiquement depuis /index.html, /solo/flip7.html ou /games/trix/index.php. */ src: url('fonts/press-start-2p.woff2') format('woff2'); font-weight: 400; font-style: normal; /* swap : le texte s'affiche tout de suite en pile systeme, puis bascule. La police n'habille que des titres courts, le reflow reste local. */ font-display: swap; } :root { /* ─── Surfaces : le meuble de la borne ────────────────────────────── */ --rk-void: #05040c; --rk-void-2: #0e0a1e; --rk-surface: rgba(255, 255, 255, 0.045); --rk-surface-2: rgba(255, 255, 255, 0.085); --rk-line: rgba(255, 255, 255, 0.11); /* ─── L'ecran : VOLONTAIREMENT identique en clair et en sombre ───── Un tube cathodique est noir quelle que soit la lumiere de la piece. Cette decision unique elimine tout le probleme du re-rendu des canvas au changement de theme : les 9 jeux qui dessinent en JS n'ont jamais a se soucier de data-theme. */ --rk-screen: #06060f; --rk-screen-line: rgba(120, 220, 255, 0.07); /* ─── Neons ──────────────────────────────────────────────────────── Chaque neon a son triplet -rgb, pour composer des rgba() a opacite variable. On n'utilise PAS color-mix() : il demande Chrome 111 / Safari 16.2 (2023), et sur une vieille tablette familiale un box-shadow qui disparait en silence est inacceptable. */ --rk-cyan: #22f0ff; --rk-cyan-rgb: 34, 240, 255; --rk-magenta: #ff3ac2; --rk-magenta-rgb: 255, 58, 194; --rk-yellow: #ffd23f; --rk-yellow-rgb: 255, 210, 63; --rk-lime: #7cff5a; --rk-lime-rgb: 124, 255, 90; --rk-red: #ff4d6d; --rk-red-rgb: 255, 77, 109; --rk-violet: #b06bff; --rk-violet-rgb: 176, 107, 255; --rk-orange: #ff9f1c; --rk-orange-rgb: 255, 159, 28; --rk-blue: #3a7bff; --rk-blue-rgb: 58, 123, 255; /* ─── Roles ──────────────────────────────────────────────────────── Le reste de la charte ne consomme que ces noms-la, jamais un neon directement : rebasculer toute la plateforme sur une autre dominante tient en deux lignes. */ --rk-accent: var(--rk-cyan); --rk-accent-rgb: var(--rk-cyan-rgb); --rk-accent-2: var(--rk-magenta); --rk-accent-2-rgb: var(--rk-magenta-rgb); --rk-ink: #eef6ff; --rk-ink-dim: #93a1c2; --rk-ok: var(--rk-lime); --rk-ok-rgb: var(--rk-lime-rgb); --rk-warn: var(--rk-yellow); --rk-warn-rgb: var(--rk-yellow-rgb); --rk-danger: var(--rk-red); --rk-danger-rgb: var(--rk-red-rgb); /* Encre a poser SUR un aplat neon (bouton plein vert, rouge, cyan...). Un neon sombre est clair : du blanc dessus donne 1,5:1, illisible. En theme jour les neons sont assombris, c'est l'inverse. */ --rk-on-neon: var(--rk-screen); /* ─── Identite par jeu — les 14 jeux de la plateforme ────────────── Utilisees comme --rk-tile-accent sur les tuiles de catalogue, et comme couleur de titre dans chaque jeu. Rappel : tetris existe DEUX fois (solo et multi), ce sont deux jeux distincts avec deux tables de score distinctes. */ --rk-g-trix: #22f0ff; --rk-g-tetris: #b06bff; --rk-g-bubbles: #3ad7ff; --rk-g-cassebrik: #ff4d6d; --rk-g-imposteur: #ffd23f; --rk-g-camarade: #7cff5a; --rk-g-serpent: #7cff5a; --rk-g-piquetteparty: #00e5a0; --rk-g-arena: #ff3ac2; --rk-g-flip7: #3a7bff; --rk-g-50: #ffd23f; --rk-g-diablotins: #ff4d6d; --rk-g-hockey: #ff9f1c; /* ─── Effets ──────────────────────────────────────────────────────── */ --rk-glow: 0 0 8px rgba(var(--rk-accent-rgb), .55), 0 0 24px rgba(var(--rk-accent-rgb), .22); --rk-glow-2: 0 0 8px rgba(var(--rk-accent-2-rgb), .55), 0 0 24px rgba(var(--rk-accent-2-rgb), .22); --rk-glow-soft: 0 0 18px rgba(var(--rk-accent-rgb), .30); --rk-shadow: 0 8px 28px rgba(0, 0, 0, .45); /* Une carte se detache du fond par contraste en sombre, il ne lui faut donc aucune ombre ; en clair, blanc sur blanc-casse, il en faut une. Ces deux tokens remplacent a eux seuls les ~25 selecteurs `:root[data-theme="light"] .classe` en dur qu'avait css/style.css. */ --rk-card-shadow: none; --rk-inset: rgba(0, 0, 0, 0.22); /* fond enfonce : champs, encarts */ /* Passees a 0 en theme clair : c'est ainsi que les scanlines et la vignette s'eteignent, sans une seule regle supplementaire. */ --rk-scanline-alpha: 0.055; --rk-vignette-alpha: 0.55; /* ─── Geometrie ───────────────────────────────────────────────────── */ --rk-radius: 10px; --rk-radius-lg: 16px; --rk-bezel-w: 10px; /* ─── Typographie ─────────────────────────────────────────────────── */ --rk-font-display: 'Press Start 2P', 'Segoe UI', Tahoma, sans-serif; --rk-font-body: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; } /* ═══════════════════════════════════════════════════════════════════════ ARCADE JOUR () La salle s'allume, le meuble devient clair — mais l'ecran reste un CRT : --rk-screen* n'est deliberement PAS redefini ici. Les neons sont assombris et desatures pour rester lisibles sur blanc (contraste AA) : un cyan #22f0ff sur fond blanc est illisible. ═══════════════════════════════════════════════════════════════════════ */ :root[data-theme="light"] { --rk-void: #e9ecf6; --rk-void-2: #dbe0f0; --rk-surface: #ffffff; --rk-surface-2: #f4f6fd; --rk-line: rgba(12, 16, 38, 0.13); --rk-cyan: #0089a3; --rk-cyan-rgb: 0, 137, 163; --rk-magenta: #c11a8d; --rk-magenta-rgb: 193, 26, 141; --rk-yellow: #9a6c00; --rk-yellow-rgb: 154, 108, 0; --rk-lime: #2e9e3f; --rk-lime-rgb: 46, 158, 63; --rk-red: #d63754; --rk-red-rgb: 214, 55, 84; --rk-violet: #7c3aed; --rk-violet-rgb: 124, 58, 237; --rk-orange: #b85c00; --rk-orange-rgb: 184, 92, 0; --rk-blue: #1d4ed8; --rk-blue-rgb: 29, 78, 216; --rk-ink: #14182a; --rk-ink-dim: #525b76; --rk-on-neon: #ffffff; /* Les identites de jeu suivent, sinon un #ffd23f reste illisible sur blanc */ --rk-g-trix: #0089a3; --rk-g-tetris: #7c3aed; --rk-g-bubbles: #0e7490; --rk-g-cassebrik: #d63754; --rk-g-imposteur: #9a6c00; --rk-g-camarade: #2e9e3f; --rk-g-serpent: #2e9e3f; --rk-g-piquetteparty: #00876a; --rk-g-arena: #c11a8d; --rk-g-flip7: #1d4ed8; --rk-g-50: #9a6c00; --rk-g-diablotins: #d63754; --rk-g-hockey: #b85c00; /* En plein jour, un halo neon devient une tache sale : on le remplace par une ombre portee sobre. */ --rk-glow: 0 2px 10px rgba(var(--rk-accent-rgb), .28); --rk-glow-2: 0 2px 10px rgba(var(--rk-accent-2-rgb), .28); --rk-glow-soft: 0 2px 12px rgba(20, 30, 60, .10); --rk-shadow: 0 4px 18px rgba(20, 30, 60, .12); --rk-card-shadow: 0 1px 3px rgba(20, 30, 60, .07); --rk-inset: rgba(12, 16, 38, 0.045); --rk-scanline-alpha: 0; /* pas de scanlines en plein jour */ --rk-vignette-alpha: 0.10; }