/* ═══════════════════════════════════════════════════════════════════ * _base.css — tokens de thème partagés * * Déclare les CSS-vars introduites par la refonte graphique Phase 0+ * qui ne sont PAS encore couvertes par css/style.css (ex : couleurs * de plateau exposées au canvas, couleurs d'auras, etc.). * * Chaque thème (`classic.css`, `stone.css`) peut surcharger ces * valeurs sous `body.theme-`. _base.css sert de fallback pour * les variables absentes du thème, évitant un "flash de default JS" * si un thème oublie une var. * * Phase 0 : valeurs choisies pour matcher visuellement l'existant. * Aucun fichier ne DOIT consommer ces vars pour l'instant (elles * seront utilisées par js/theme/themeManager.js#getTokens et par les * phases 2/3 pour les auras et effets). * ═══════════════════════════════════════════════════════════════════ */ :root { /* Plateau (miroir JS → getTokens) */ --board-light: #F0D9B5; --board-dark: #B58863; --board-label: #cccccc; /* Auras (Phase 3) — placeholders */ --aura-ice: rgba(120, 200, 255, 0.55); --aura-fire: rgba(255, 140, 60, 0.55); --aura-divine: rgba(255, 225, 130, 0.55); /* Decoration — liserés et ombres portées */ --decor-glow: rgba(224, 120, 32, 0.35); --decor-shadow: rgba(0, 0, 0, 0.55); /* ── Pièces : profondeur (Phase B) ────────────────────────────── * * Consommées par js/board.js → ctx.shadowBlur / ctx.shadowColor. * Les deux valeurs ont des rôles distincts : * --piece-shadow-* → ombre portée UNIFORME sur toutes * les pièces (profondeur générale). * --piece-shadow-selected-* → ombre plus intense SOUS la pièce * sélectionnée, pour renforcer la * sensation qu'elle "flotte" au-dessus * (combinée à l'idle-float sinusoïdal). * * Un thème (`stone.css`, futurs) peut surcharger sans toucher au JS — * themeManager.getTokens() n'expose pas ces vars directement, le JS * les lit via getComputedStyle dans gameScreen._drawBoard. * ─────────────────────────────────────────────────────────────── */ --piece-shadow-color: rgba(0, 0, 0, 0.32); --piece-shadow-blur: 4px; --piece-shadow-offset-y: 2px; --piece-shadow-selected-color: rgba(0, 0, 0, 0.45); --piece-shadow-selected-blur: 10px; --piece-shadow-selected-offset-y: 4px; /* ── Motion tokens (Phase A) ──────────────────────────────────── * * Durées standardisées pour unifier les `transition:` éparpillés * dans style.css (52 occurrences mélangent 0.15/0.18/0.2/0.25/0.3s). * Règle d'usage : * --t-fast → hover/active des contrôles (boutons, toggles) * --t-med → changements d'état UI (panneau actif, chip sélectionné) * --t-slow → transitions d'écran, fades, animations "scéniques" * * Easings : `--ease-out` = décélération standard (défaut), * `--ease-pop` = léger overshoot pour effets de "clic". */ --t-fast: 120ms; --t-med: 200ms; --t-slow: 360ms; --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1.00); --ease-pop: cubic-bezier(0.34, 1.56, 0.64, 1.00); /* Glows sémantiques — consommés par les auras Phase D et les * effets de check/curse/ghost. Déclarés ici pour qu'un thème * puisse les surcharger sans toucher au JS. */ --glow-check: rgba(231, 76, 60, 0.55); --glow-curse: rgba(155, 100, 200, 0.50); --glow-ghost: rgba(160, 140, 220, 0.50); --glow-shield: rgba(255, 210, 80, 0.55); } /* ═══════════════════════════════════════════════════════════════════ * prefers-reduced-motion (Phase A) * * Respecte la préférence système. Un utilisateur qui a activé * "Réduire les animations" (OS, ou Chrome > DevTools > Rendering) * voit tous les keyframes/transitions collapser à ~0ms, et les * couches de particules (js/fx/fx.js Phase C+) disparaissent. * * Cette règle est volontairement globale et dernière à être * chargée — elle gagne sur les déclarations spécifiques grâce au * `!important`. C'est le seul endroit du projet où on autorise * `!important` (scoped à l'accessibilité). * ═══════════════════════════════════════════════════════════════════ */ @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; } /* Cache les overlays de particules — elles seraient dessinées en * boucle via RAF même sans animation CSS. js/fx/fx.js lira aussi * cette préférence via matchMedia pour zapper le spawn côté JS. */ .fx-particles { display: none !important; } } /* ═══════════════════════════════════════════════════════════════════ * Phase E — Cross-fade entre écrans * * Classe appliquée à un écran qui passe de display:none à visible. * Auto-collée par un MutationObserver dans main.js → on ne touche * AUCUN site d'appel existant (16+ hideManaged + showXxx). Le micro- * translateY donne du mouvement à la transition (sans ça, c'est * visuellement plat). * * reduced-motion : la règle globale ci-dessus collapse à 0.01ms, * l'utilisateur voit un changement instantané comme avant. * ═══════════════════════════════════════════════════════════════════ */ .screen-fade-in { animation: fx-screen-fade-in 350ms var(--ease-out) both; } @keyframes fx-screen-fade-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } } /* ═══════════════════════════════════════════════════════════════════ * Phase E — Désaturation de l'aire de jeu (game-over cinematic) * * Appliquée sur #board-container par gameScreen._showGameOver pour * les fins "définitives" (checkmate, king_captured, timeout, resign, * stalemate). Le fade dure ~600 ms et reste figé jusqu'à la sortie * de l'écran (la classe est nettoyée dans hide() / replay). * * La désaturation s'applique au DOM (canvas + UI), pas au canvas * context — ça inclut donc l'overlay victoire dessiné par-dessus, * ce qui est intentionnel (toute la scène vire au gris). * * Niveau de gris : * --board-fade-saturation : 0.25 (75% gris) — endgames "perdus" * --board-fade-saturation : 1.00 (couleurs intactes) — victoires * Le JS pose la valeur en inline-style sur le container. * ═══════════════════════════════════════════════════════════════════ */ .board-endgame-fade { transition: filter var(--t-slow) var(--ease-out); filter: saturate(var(--board-fade-saturation, 0.25)) brightness(0.92); }