Passe de polish visuel sur tout le site
Corrige deux incohérences trouvées en chemin : le compteur de passages dans le char en gold-bright sur marbre (même défaut de contraste déjà vu ailleurs), et le point du Crieur toujours rouge même pour un honneur positif. Réutilise les ornements existants mais jamais appelés (meander-divider entre le podium et le classement, DiamondDivider sur /profile avec une nouvelle convention de carte secondaire). Ajoute une ambiance discrète (fond qui respire très lentement, halo doré sur les cartes marbre, désactivés sous prefers-reduced-motion), étend les confettis et un nouveau son à Icare pour la parité avec la Corne d'Abondance, des loading.tsx sur les pages les plus consultées, et un petit ornement sur les états vides plutôt qu'un texte brut. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
+49
-1
@@ -41,10 +41,22 @@
|
||||
--font-sans: var(--font-manrope);
|
||||
}
|
||||
|
||||
/* Intensité du dégradé "mer" du fond, en pourcentage — enregistrée via
|
||||
@property pour qu'un navigateur qui la supporte anime une transition
|
||||
fluide entre les deux valeurs de ambient-glow (sinon dégradation sans
|
||||
casse : la valeur du keyframe s'applique quand même, juste sans lissage
|
||||
intermédiaire). */
|
||||
@property --sea-glow {
|
||||
syntax: "<percentage>";
|
||||
inherits: true;
|
||||
initial-value: 30%;
|
||||
}
|
||||
|
||||
body {
|
||||
--sea-glow: 30%;
|
||||
background:
|
||||
radial-gradient(ellipse 80% 50% at 20% -10%, color-mix(in srgb, var(--ink-2) 75%, transparent) 0%, transparent 60%),
|
||||
radial-gradient(ellipse 70% 60% at 100% 110%, color-mix(in srgb, var(--sea) 30%, transparent) 0%, transparent 65%),
|
||||
radial-gradient(ellipse 70% 60% at 100% 110%, color-mix(in srgb, var(--sea) var(--sea-glow), transparent) 0%, transparent 65%),
|
||||
var(--ink);
|
||||
background-attachment: fixed;
|
||||
color: var(--foreground);
|
||||
@@ -112,6 +124,42 @@ body {
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: no-preference) {
|
||||
/* Mer de nuit qui respire très lentement, plutôt qu'un fond figé — reste
|
||||
imperceptible comme un vrai mouvement, juste une ambiance qui vit. */
|
||||
@keyframes ambient-glow {
|
||||
from {
|
||||
--sea-glow: 22%;
|
||||
}
|
||||
to {
|
||||
--sea-glow: 42%;
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
animation: ambient-glow 40s ease-in-out infinite alternate;
|
||||
}
|
||||
|
||||
/* Léger halo doré respirant sur les cartes marbre, façon lueur de
|
||||
torche — un outline (jamais box-shadow/border, déjà utilisés par les
|
||||
classes Tailwind de chaque carte) pour ne jamais entrer en conflit
|
||||
avec l'ombre/la bordure propres à chaque usage. N'affecte pas la mise
|
||||
en page (outline ne prend pas de place). */
|
||||
@keyframes card-flicker {
|
||||
0%,
|
||||
100% {
|
||||
outline-color: transparent;
|
||||
}
|
||||
50% {
|
||||
outline-color: color-mix(in srgb, var(--gold) 35%, transparent);
|
||||
}
|
||||
}
|
||||
|
||||
.marble-surface {
|
||||
outline: 1px solid transparent;
|
||||
outline-offset: 2px;
|
||||
animation: card-flicker 7s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes podium-rise {
|
||||
0% {
|
||||
opacity: 0;
|
||||
|
||||
Reference in New Issue
Block a user