forked from LPK/librodrome
YvvandClaude Opus 5.5
201cfbbb50
- accueil : la console devient l'accueil unique (variantes B/C, sélecteur et ancien accueil retirés) ; curseurs qui montent de l'asservissement et dérivent seuls, un axe mis en avant à tour de rôle, arrêt au clic, immobiles en prefers-reduced-motion ; « AUTONOMIE » devant chaque axe, leviers mis en valeur, ligne des trois autonomies en couleurs - logo : § de Playfair Display (SIL OFL) vectorisé, composant partagé UiSectionSign (en-tête, page événement) + favicon.svg - UiStatusBadge (production / développement / gestation) sur l'accueil, les pages d'axe et les pages projet - liens libreDecision / SejeteralO fixés sur la prod (plus de repli localhost) - logiciel libre : bouton v1 dans la carte projet en tête de page - couverture du livre : recadrage corrigé (BookSection) - texte courant en Public Sans (zéros non barrés) - lecteur : la pastille persistante ne masque plus la navigation du BookPlayer ; lecture directe du MP3 (les .ogg n'existent pas : 404) Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
233 lines
6.6 KiB
CSS
233 lines
6.6 KiB
CSS
@import './fonts.css';
|
|
@import './animations.css';
|
|
@import './typography.css';
|
|
|
|
:root {
|
|
--color-primary: 18 80% 45%;
|
|
--color-accent: 32 85% 50%;
|
|
--color-bg: 215 8% 22%;
|
|
--color-surface: 213 7% 27%;
|
|
--color-surface-light: 210 6% 32%;
|
|
--color-text: 0 0% 100%;
|
|
--color-text-muted: 0 0% 65%;
|
|
|
|
--header-height: 4rem;
|
|
--player-height: 0rem;
|
|
--sidebar-width: 280px;
|
|
|
|
--font-display: 'Bricolage Grotesque', system-ui, sans-serif;
|
|
--font-sans: 'Public Sans', system-ui, sans-serif;
|
|
--font-logo: 'Syne', sans-serif;
|
|
|
|
/* One hue per axis — overridden by each palette (stores/palette.ts) */
|
|
--axis-num: 198 70% 30%;
|
|
--axis-eco: 24 88% 42%;
|
|
--axis-cit: 150 45% 28%;
|
|
--font-mono: 'JetBrains Mono', monospace;
|
|
|
|
--ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
|
|
--ease-in-out-expo: cubic-bezier(0.87, 0, 0.13, 1);
|
|
}
|
|
|
|
/* Fader level of the home console — registered so it can transition smoothly */
|
|
@property --level {
|
|
syntax: '<number>';
|
|
inherits: true;
|
|
initial-value: 0;
|
|
}
|
|
|
|
*,
|
|
*::before,
|
|
*::after {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
html {
|
|
font-family: var(--font-sans);
|
|
background-color: hsl(var(--color-bg));
|
|
color: hsl(var(--color-text));
|
|
color-scheme: dark;
|
|
-webkit-font-smoothing: antialiased;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
}
|
|
|
|
body {
|
|
margin: 0;
|
|
min-height: 100dvh;
|
|
}
|
|
|
|
button {
|
|
border: none;
|
|
background: none;
|
|
cursor: pointer;
|
|
font: inherit;
|
|
color: inherit;
|
|
}
|
|
|
|
a {
|
|
text-decoration: none;
|
|
color: inherit;
|
|
}
|
|
|
|
::selection {
|
|
background-color: hsl(var(--color-primary) / 0.3);
|
|
color: hsl(var(--color-text));
|
|
}
|
|
|
|
:focus-visible {
|
|
outline: 2px solid hsl(var(--color-primary));
|
|
outline-offset: 2px;
|
|
}
|
|
|
|
/* Scrollbar styling */
|
|
::-webkit-scrollbar {
|
|
width: 8px;
|
|
height: 8px;
|
|
}
|
|
|
|
::-webkit-scrollbar-track {
|
|
background: transparent;
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb {
|
|
background: hsl(var(--color-text) / 0.15);
|
|
border-radius: 4px;
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb:hover {
|
|
background: hsl(var(--color-text) / 0.25);
|
|
}
|
|
|
|
/* ═══ Axis scopes — each axis page takes its own hue as primary ═══ */
|
|
.axis-scope--num { --color-primary: var(--axis-num); }
|
|
.axis-scope--eco { --color-primary: var(--axis-eco); }
|
|
.axis-scope--cit { --color-primary: var(--axis-cit); }
|
|
|
|
/* ═══ Light mode overrides ═══ */
|
|
.palette-light {
|
|
color-scheme: light;
|
|
}
|
|
|
|
/* Force all white text → adaptive text color in light mode.
|
|
Using !important to override scoped component styles and UnoCSS utilities. */
|
|
.palette-light,
|
|
.palette-light .text-white {
|
|
color: hsl(var(--color-text)) !important;
|
|
}
|
|
|
|
/* white with opacity → dark text with boosted opacity for punch */
|
|
.palette-light .text-white\/20 { color: hsl(var(--color-text) / 0.28) !important; }
|
|
.palette-light .text-white\/30 { color: hsl(var(--color-text) / 0.38) !important; }
|
|
.palette-light .text-white\/40 { color: hsl(var(--color-text) / 0.48) !important; }
|
|
.palette-light .text-white\/45 { color: hsl(var(--color-text) / 0.52) !important; }
|
|
.palette-light .text-white\/50 { color: hsl(var(--color-text) / 0.58) !important; }
|
|
.palette-light .text-white\/60 { color: hsl(var(--color-text) / 0.68) !important; }
|
|
.palette-light .text-white\/65 { color: hsl(var(--color-text) / 0.73) !important; }
|
|
.palette-light .text-white\/70 { color: hsl(var(--color-text) / 0.78) !important; }
|
|
.palette-light .text-white\/55 { color: hsl(var(--color-text) / 0.63) !important; }
|
|
.palette-light .text-white\/75 { color: hsl(var(--color-text) / 0.83) !important; }
|
|
.palette-light .text-white\/80 { color: hsl(var(--color-text) / 0.88) !important; }
|
|
.palette-light .text-white\/85 { color: hsl(var(--color-text) / 0.92) !important; }
|
|
.palette-light .text-white\/90 { color: hsl(var(--color-text) / 0.95) !important; }
|
|
|
|
/* white backgrounds → surface tones with more contrast */
|
|
.palette-light .bg-white\/5 { background-color: hsl(var(--color-primary) / 0.05) !important; }
|
|
.palette-light .bg-white\/8 { background-color: hsl(var(--color-primary) / 0.07) !important; }
|
|
.palette-light .bg-white\/10 { background-color: hsl(var(--color-primary) / 0.09) !important; }
|
|
|
|
/* borders with primary tint */
|
|
.palette-light .border-white\/8 { border-color: hsl(var(--color-primary) / 0.15) !important; }
|
|
|
|
/* hover overrides */
|
|
.palette-light .hover\:text-white:hover,
|
|
.palette-light .hover\:text-white\/70:hover,
|
|
.palette-light .hover\:text-white\/80:hover {
|
|
color: hsl(var(--color-text)) !important;
|
|
}
|
|
.palette-light .hover\:text-white\/60:hover {
|
|
color: hsl(var(--color-text) / 0.7) !important;
|
|
}
|
|
.palette-light .hover\:bg-white\/5:hover {
|
|
background-color: hsl(var(--color-primary) / 0.08) !important;
|
|
}
|
|
.palette-light .hover\:bg-white\/10:hover {
|
|
background-color: hsl(var(--color-primary) / 0.12) !important;
|
|
}
|
|
|
|
/* group-hover overrides */
|
|
.palette-light .group:hover .group-hover\:text-primary\/60 {
|
|
color: hsl(var(--color-primary) / 0.7) !important;
|
|
}
|
|
|
|
/* placeholder overrides */
|
|
.palette-light .placeholder\:text-white\/30::placeholder {
|
|
color: hsl(var(--color-text) / 0.35) !important;
|
|
}
|
|
|
|
/* Prose/content in light mode */
|
|
.palette-light .prose { color: hsl(var(--color-text)); }
|
|
.palette-light .prose :where(h1,h2,h3,h4,h5,h6) { color: hsl(var(--color-text)); }
|
|
|
|
/* text-gradient — solid primary color everywhere */
|
|
|
|
/* card surfaces — subtle shadow for depth */
|
|
.palette-light .card-surface {
|
|
background: hsl(var(--color-surface)) !important;
|
|
border-color: hsl(var(--color-primary) / 0.12) !important;
|
|
box-shadow: 0 1px 3px hsl(var(--color-text) / 0.06);
|
|
}
|
|
|
|
/* btn-primary text stays white on colored bg */
|
|
.palette-light .btn-primary {
|
|
color: white !important;
|
|
}
|
|
|
|
/* input fields — cleaner contrast */
|
|
.palette-light input,
|
|
.palette-light textarea {
|
|
color: hsl(var(--color-text));
|
|
background-color: white;
|
|
border-color: hsl(var(--color-text) / 0.18);
|
|
}
|
|
|
|
.palette-light input:focus,
|
|
.palette-light textarea:focus {
|
|
border-color: hsl(var(--color-primary) / 0.5);
|
|
box-shadow: 0 0 0 3px hsl(var(--color-primary) / 0.1);
|
|
}
|
|
|
|
/* Ecouter view toggle buttons */
|
|
.palette-light .bg-white\/10 {
|
|
background-color: hsl(var(--color-primary) / 0.1) !important;
|
|
}
|
|
|
|
/* Light mode scrollbar — tinted with primary */
|
|
.palette-light ::-webkit-scrollbar-thumb {
|
|
background: hsl(var(--color-primary) / 0.2);
|
|
}
|
|
.palette-light ::-webkit-scrollbar-thumb:hover {
|
|
background: hsl(var(--color-primary) / 0.35);
|
|
}
|
|
|
|
/* Light mode selection — vivid */
|
|
.palette-light ::selection {
|
|
background-color: hsl(var(--color-accent) / 0.25);
|
|
}
|
|
|
|
/* Page transitions */
|
|
.page-enter-active,
|
|
.page-leave-active {
|
|
transition: opacity 300ms var(--ease-out-expo),
|
|
transform 300ms var(--ease-out-expo);
|
|
}
|
|
|
|
.page-enter-from {
|
|
opacity: 0;
|
|
transform: translateY(8px);
|
|
}
|
|
|
|
.page-leave-to {
|
|
opacity: 0;
|
|
transform: translateY(-8px);
|
|
}
|