/* Bike Rhapsody — Design System bundle (tokens + components) */ /* ============================================================= Bike Rhapsody — Design Tokens v1 ---------------------------------------------------------------- 4 themes selectable via [data-theme="..."] on the or . Every token can be overridden per-theme. Default (no data-theme attribute) = "peloton" (light, friendly). Usage: ============================================================= */ /* ---------- DEFAULTS — Peloton (Komoot × Garmin × Strava) ---------- */ :root, [data-theme="peloton"] { /* Surfaces */ --br-bg: #f4f5f7; --br-surface: #ffffff; --br-panel: #ffffff; --br-panel-soft: #f8f9fb; --br-border: #e6e8ec; --br-overlay: rgba(255,255,255,.92); /* Text */ --br-text: #1c2024; --br-text-strong: #0a0d12; --br-muted: #6b7280; --br-muted-strong: #4a525c; /* Accent + signal */ --br-accent: #ff5a3c; --br-accent-2: #ffb15b; --br-accent-soft: #fff0ec; --br-accent-ink: #c2391f; --br-secondary: #008c8c; --br-pos: #15a36e; --br-pos-soft: #e7f7ee; --br-warn: #d8870e; --br-warn-soft: #fef4e3; --br-neg: #e0455d; --br-neg-soft: #fdebee; /* Type */ --br-font-display: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif; --br-font-body: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif; --br-font-num: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace; --br-tracking-tight: -0.025em; --br-tracking-display: -0.028em; --br-tracking-kicker: 0.12em; --br-tracking-loose: 0.04em; --br-weight-display: 800; --br-weight-bold: 700; --br-weight-medium: 500; /* Radii */ --br-radius-card: 20px; --br-radius-panel: 16px; --br-radius-control: 12px; --br-radius-pill: 999px; --br-radius-sm: 8px; /* Spacing */ --br-space-1: 4px; --br-space-2: 8px; --br-space-3: 12px; --br-space-4: 16px; --br-space-5: 20px; --br-space-6: 24px; --br-space-8: 32px; /* Shadows */ --br-shadow-sm: 0 1px 2px rgba(28,32,36,.04); --br-shadow-md: 0 6px 16px -6px rgba(28,32,36,.12); --br-shadow-lg: 0 18px 40px -10px rgba(28,32,36,.18); /* Motion */ --br-ease: cubic-bezier(.2,.7,.2,1); --br-dur: 200ms; /* Theme meta */ --br-theme-name: "Peloton"; --br-theme-mood: "Aventure"; color-scheme: light; } /* ---------- Pulse — sombre racing tech, cyan électrique ---------- */ [data-theme="pulse"] { --br-bg: #0d1014; --br-surface: #14181f; --br-panel: #14181f; --br-panel-soft: #1a1f28; --br-border: rgba(255,255,255,.06); --br-overlay: rgba(20,24,31,.92); --br-text: #e6ecf3; --br-text-strong: #ffffff; --br-muted: #7a8597; --br-muted-strong: #aab4c4; --br-accent: #22d3ee; --br-accent-2: #67e8f9; --br-accent-soft: rgba(34,211,238,.10); --br-accent-ink: #06222a; --br-secondary: #8b5cf6; --br-pos: #34d399; --br-pos-soft: rgba(52,211,153,.08); --br-warn: #fbbf24; --br-warn-soft: rgba(251,191,36,.08); --br-neg: #f87171; --br-neg-soft: rgba(248,113,113,.08); --br-font-display: 'Inter Tight', system-ui, sans-serif; --br-font-body: 'Inter Tight', system-ui, sans-serif; --br-font-num: 'IBM Plex Mono', ui-monospace, monospace; --br-tracking-kicker: 0.14em; --br-radius-card: 14px; --br-radius-panel: 12px; --br-radius-control: 10px; --br-shadow-sm: 0 1px 2px rgba(0,0,0,.3); --br-shadow-md: 0 6px 18px -6px rgba(0,0,0,.5); --br-shadow-lg: 0 18px 40px -10px rgba(0,0,0,.6); --br-theme-name: "Pulse"; --br-theme-mood: "Focus"; color-scheme: dark; } /* ---------- Domestique — éditorial crème + oxblood + serif ---------- */ [data-theme="domestique"] { --br-bg: #f3ede2; --br-surface: #faf6ec; --br-panel: #faf6ec; --br-panel-soft: #ebe2cf; --br-border: #e2d8c0; --br-overlay: rgba(250,246,236,.92); --br-text: #1a1814; --br-text-strong: #000000; --br-muted: #6a5e48; --br-muted-strong: #4a4232; --br-accent: #7a1f1f; --br-accent-2: #a13838; --br-accent-soft: rgba(122,31,31,.08); --br-accent-ink: #f3ede2; --br-secondary: #c8a04a; --br-pos: #5a6e3a; --br-pos-soft: rgba(90,110,58,.10); --br-warn: #c8a04a; --br-warn-soft: rgba(200,160,74,.12); --br-neg: #a13838; --br-neg-soft: rgba(161,56,56,.10); --br-font-display: 'Newsreader', Georgia, serif; --br-font-body: 'Inter', system-ui, sans-serif; --br-font-num: 'JetBrains Mono', ui-monospace, monospace; --br-tracking-display: -0.028em; --br-tracking-kicker: 0.22em; --br-radius-card: 4px; --br-radius-panel: 4px; --br-radius-control: 2px; --br-radius-pill: 2px; --br-shadow-sm: 0 1px 2px rgba(26,24,20,.04); --br-shadow-md: 0 8px 22px -8px rgba(26,24,20,.16); --br-theme-name: "Domestique"; --br-theme-mood: "Calme"; color-scheme: light; } /* ---------- Maillot Jaune — noir + jaune peloton ---------- */ [data-theme="maillot"] { --br-bg: #0f0f0d; --br-surface: #1a1a18; --br-panel: #1a1a18; --br-panel-soft: #232320; --br-border: #2b2b27; --br-overlay: rgba(15,15,13,.92); --br-text: #f4f4f0; --br-text-strong: #ffffff; --br-muted: #8b8b85; --br-muted-strong: #c4c4be; --br-accent: #ffe800; --br-accent-2: #ffd000; --br-accent-soft: rgba(255,232,0,.10); --br-accent-ink: #0f0f0d; --br-secondary: #d62828; --br-pos: #3aa66a; --br-pos-soft: rgba(58,166,106,.10); --br-warn: #ffd000; --br-warn-soft: rgba(255,208,0,.10); --br-neg: #ff3838; --br-neg-soft: rgba(255,56,56,.10); --br-font-display: 'Archivo Black', system-ui, sans-serif; --br-font-body: 'Archivo Narrow', 'Archivo', system-ui, sans-serif; --br-font-num: 'IBM Plex Mono', ui-monospace, monospace; --br-tracking-display: -0.02em; --br-tracking-kicker: 0.22em; --br-radius-card: 0; --br-radius-panel: 0; --br-radius-control: 0; --br-radius-pill: 0; --br-radius-sm: 0; --br-shadow-sm: 0 0 0 1px rgba(0,0,0,.5); --br-shadow-md: 0 8px 24px -8px rgba(0,0,0,.7); --br-theme-name: "Maillot Jaune"; --br-theme-mood: "Champion"; color-scheme: dark; } /* ============================================================= Bike Rhapsody — Components v1 ---------------------------------------------------------------- Reusable utility classes built on the tokens in tokens.css. Every class is theme-agnostic — change [data-theme] and the look re-skins automatically. Prefix: .br- Modifier: .br-block--variant State: .is-active, .is-disabled ============================================================= */ /* ---------- Base reset ---------- */ *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { background: var(--br-bg); color: var(--br-text); font-family: var(--br-font-body); font-size: 14px; line-height: 1.5; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* ---------- Typography ---------- */ .br-display { font-family: var(--br-font-display); font-weight: var(--br-weight-display); letter-spacing: var(--br-tracking-display); line-height: 0.95; } .br-h1 { font-family: var(--br-font-display); font-weight: var(--br-weight-display); font-size: 32px; letter-spacing: var(--br-tracking-tight); line-height: 1.1; margin: 0; } .br-h2 { font-family: var(--br-font-display); font-weight: var(--br-weight-bold); font-size: 24px; letter-spacing: var(--br-tracking-tight); line-height: 1.2; margin: 0; } .br-h3 { font-family: var(--br-font-display); font-weight: var(--br-weight-bold); font-size: 18px; letter-spacing: -0.01em; margin: 0; } .br-kicker { font-size: 11px; letter-spacing: var(--br-tracking-kicker); text-transform: uppercase; color: var(--br-muted); font-weight: var(--br-weight-bold); font-family: var(--br-font-body); } [data-theme="maillot"] .br-kicker { font-family: var(--br-font-body); color: var(--br-accent); } [data-theme="domestique"] .br-kicker { font-family: var(--br-font-num); } .br-num { font-family: var(--br-font-num); font-variant-numeric: tabular-nums; font-feature-settings: 'tnum'; } .br-muted { color: var(--br-muted); } .br-accent { color: var(--br-accent); } .br-pos { color: var(--br-pos); } .br-warn { color: var(--br-warn); } .br-neg { color: var(--br-neg); } /* ---------- Panels & cards ---------- */ .br-panel { background: var(--br-panel); border: 1px solid var(--br-border); border-radius: var(--br-radius-panel); box-shadow: var(--br-shadow-sm); } .br-card { background: var(--br-surface); border: 1px solid var(--br-border); border-radius: var(--br-radius-card); box-shadow: var(--br-shadow-sm); padding: var(--br-space-5); } .br-panel-soft { background: var(--br-panel-soft); border-radius: var(--br-radius-panel); } /* ---------- KPI tile ---------- */ .br-kpi { background: var(--br-panel); border: 1px solid var(--br-border); border-radius: var(--br-radius-panel); padding: var(--br-space-4) var(--br-space-5); } .br-kpi__label { font-size: 11px; letter-spacing: var(--br-tracking-kicker); text-transform: uppercase; color: var(--br-muted); font-weight: var(--br-weight-bold); } .br-kpi__value { font-family: var(--br-font-num); font-size: 28px; font-weight: var(--br-weight-bold); letter-spacing: var(--br-tracking-tight); margin-top: 6px; color: var(--br-text-strong); font-variant-numeric: tabular-nums; } .br-kpi__unit { font-size: 14px; color: var(--br-muted); margin-left: 4px; font-weight: var(--br-weight-medium); } .br-kpi__sub { font-size: 12px; color: var(--br-muted); margin-top: 4px; } [data-theme="maillot"] .br-kpi__value { font-family: var(--br-font-display); color: var(--br-accent); } /* ---------- Buttons ---------- */ .br-btn { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: var(--br-radius-control); font-family: var(--br-font-body); font-size: 13px; font-weight: var(--br-weight-bold); border: 1px solid var(--br-border); background: var(--br-surface); color: var(--br-text); cursor: pointer; transition: transform var(--br-dur) var(--br-ease), background var(--br-dur) var(--br-ease); text-decoration: none; line-height: 1; } .br-btn:hover { transform: translateY(-1px); } .br-btn:disabled { opacity: .5; cursor: not-allowed; transform: none; } .br-btn--primary { background: var(--br-accent); color: var(--br-accent-ink); border-color: var(--br-accent); box-shadow: 0 6px 16px -6px rgba(0,0,0,.18); } .br-btn--ghost { background: transparent; } .br-btn--icon { width: 38px; height: 38px; padding: 0; justify-content: center; border-radius: var(--br-radius-pill); } [data-theme="maillot"] .br-btn { letter-spacing: 0.08em; text-transform: uppercase; font-weight: 800; } [data-theme="domestique"] .br-btn { letter-spacing: 0.04em; text-transform: uppercase; font-weight: 700; font-size: 12px; } /* ---------- Chip / Pill ---------- */ .br-chip { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: var(--br-radius-pill); font-size: 11px; font-weight: var(--br-weight-bold); border: 1px solid var(--br-border); background: var(--br-panel-soft); color: var(--br-muted-strong); line-height: 1.4; } .br-chip--accent { background: var(--br-accent-soft); color: var(--br-accent-ink); border-color: transparent; } .br-chip--pos { background: var(--br-pos-soft); color: var(--br-pos); } .br-chip--warn { background: var(--br-warn-soft); color: var(--br-warn); } .br-chip--neg { background: var(--br-neg-soft); color: var(--br-neg); } [data-theme="peloton"] .br-chip--accent { color: var(--br-accent-ink); background: var(--br-accent-soft); } [data-theme="maillot"] .br-chip { letter-spacing: 0.08em; text-transform: uppercase; font-weight: 800; } [data-theme="domestique"] .br-chip { letter-spacing: 0.08em; text-transform: uppercase; font-weight: 700; } /* ---------- Progress bar ---------- */ .br-progress { height: 8px; background: var(--br-panel-soft); border-radius: var(--br-radius-pill); overflow: hidden; } .br-progress__fill { display: block; height: 100%; background: linear-gradient(90deg, var(--br-accent), var(--br-accent-2)); border-radius: var(--br-radius-pill); transition: width var(--br-dur) var(--br-ease); } .br-progress--pos .br-progress__fill { background: linear-gradient(90deg, var(--br-pos), var(--br-accent-2)); } /* ---------- Tabs ---------- */ .br-tabs { display: inline-flex; gap: 2px; padding: 4px; background: var(--br-panel-soft); border: 1px solid var(--br-border); border-radius: var(--br-radius-control); } .br-tabs > button { padding: 7px 14px; font-family: var(--br-font-body); font-size: 12px; font-weight: var(--br-weight-bold); border-radius: calc(var(--br-radius-control) - 2px); border: none; background: transparent; color: var(--br-muted); cursor: pointer; } .br-tabs > button.is-active { background: var(--br-surface); color: var(--br-text-strong); box-shadow: var(--br-shadow-sm); } [data-theme="pulse"] .br-tabs > button.is-active { background: var(--br-accent-soft); color: var(--br-accent); } [data-theme="maillot"] .br-tabs > button.is-active { background: var(--br-accent); color: var(--br-accent-ink); } [data-theme="domestique"] .br-tabs { background: transparent; padding: 0; border-radius: 0; border: 1px solid var(--br-text); } [data-theme="domestique"] .br-tabs > button { border-right: 1px solid var(--br-text); border-radius: 0; text-transform: uppercase; letter-spacing: 0.04em; font-weight: 700; } [data-theme="domestique"] .br-tabs > button:last-child { border-right: none; } [data-theme="domestique"] .br-tabs > button.is-active { background: var(--br-text); color: var(--br-bg); } /* ---------- Folder tabs (sous-menus de page, underline moderne) ---------- */ .br-folder-tabs { display: flex; gap: 2px; flex-wrap: wrap; border-bottom: 1px solid var(--br-border); padding: 0; position: relative; } .br-folder-tabs > button, .br-folder-tabs > a { appearance: none; background: transparent; border: none; border-bottom: 2px solid transparent; border-radius: 0; padding: 12px 18px 14px; margin: 0; font-family: var(--br-font-body); font-size: 13px; font-weight: 600; letter-spacing: -.005em; color: var(--br-muted); cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; position: relative; transition: color .18s ease, border-color .18s ease; } .br-folder-tabs > button:hover, .br-folder-tabs > a:hover { color: var(--br-text-strong); } .br-folder-tabs > button.is-active, .br-folder-tabs > a.is-active { color: var(--br-text-strong); border-bottom-color: var(--br-accent); font-weight: 700; } .br-folder-tabs > * .count { font-family: var(--br-font-num); font-size: 10px; font-weight: 700; padding: 2px 7px; border-radius: 999px; background: var(--br-panel-soft); color: var(--br-muted); border: 1px solid var(--br-border); transition: background .18s, color .18s, border-color .18s; } .br-folder-tabs > .is-active .count { background: var(--br-accent); color: var(--br-accent-ink); border-color: var(--br-accent); } [data-theme="pulse"] .br-folder-tabs > .is-active { color: var(--br-accent); } [data-theme="maillot"] .br-folder-tabs > button, [data-theme="maillot"] .br-folder-tabs > a { text-transform: uppercase; letter-spacing: 0.06em; font-weight: 700; } [data-theme="domestique"] .br-folder-tabs > button, [data-theme="domestique"] .br-folder-tabs > a { text-transform: uppercase; letter-spacing: 0.05em; } [data-theme="domestique"] .br-folder-tabs > .is-active { border-bottom-color: var(--br-text); color: var(--br-text); } /* ---------- Table ---------- */ .br-table { width: 100%; border-collapse: collapse; } .br-table th { text-align: left; font-size: 11px; letter-spacing: var(--br-tracking-kicker); text-transform: uppercase; color: var(--br-muted); font-weight: var(--br-weight-bold); padding: 12px 14px; border-bottom: 1px solid var(--br-border); } .br-table td { padding: 12px 14px; font-size: 13px; border-bottom: 1px solid var(--br-border); } [data-theme="domestique"] .br-table th { border-bottom-width: 2px; border-bottom-color: var(--br-text); } [data-theme="maillot"] .br-table th { background: var(--br-bg); font-family: var(--br-font-body); } /* ---------- Search input ---------- */ .br-search { display: inline-flex; align-items: center; gap: 10px; background: var(--br-panel-soft); border: 1px solid var(--br-border); border-radius: var(--br-radius-control); padding: 10px 14px; color: var(--br-muted); font-family: var(--br-font-body); font-size: 13px; font-weight: var(--br-weight-medium); min-width: 280px; } .br-search input { flex: 1; border: none; outline: none; background: transparent; color: var(--br-text); font: inherit; } /* ---------- Avatar ---------- */ .br-avatar { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(135deg, var(--br-accent), var(--br-accent-2)); color: var(--br-accent-ink); font-weight: var(--br-weight-display); font-size: 14px; font-family: var(--br-font-body); } /* ---------- App shell ---------- */ .br-shell { display: flex; min-height: 100vh; background: var(--br-bg); } .br-shell__sidebar { width: 232px; background: var(--br-surface); border-right: 1px solid var(--br-border); padding: 22px 14px; display: flex; flex-direction: column; gap: 4px; flex-shrink: 0; } .br-shell__main { flex: 1; min-width: 0; display: flex; flex-direction: column; } .br-shell__topbar { display: flex; align-items: center; justify-content: space-between; padding: 22px 32px; border-bottom: 1px solid var(--br-border); background: var(--br-surface); gap: 16px; } .br-shell__topbar--stacked { flex-direction: column; align-items: stretch; padding-bottom: 0; gap: 18px; } .br-shell__topbar--stacked .br-shell__topbar-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; } .br-shell__topbar-tabs { margin: 0 -32px; padding: 0 32px; } .br-shell__topbar-tabs .br-folder-tabs { border-bottom: none; margin-bottom: -1px; } .br-shell__content { flex: 1; padding: 24px 32px 40px; overflow: auto; } .br-nav-item { display: flex; align-items: center; gap: 12px; padding: 10px 12px; color: var(--br-muted-strong); text-decoration: none; border-radius: var(--br-radius-control); font-size: 14px; font-weight: 600; cursor: pointer; transition: background var(--br-dur); } .br-nav-item:hover { background: var(--br-panel-soft); color: var(--br-text); } .br-nav-item.is-active { background: var(--br-accent-soft); color: var(--br-accent-ink); } [data-theme="pulse"] .br-nav-item.is-active { color: var(--br-accent); } [data-theme="maillot"] .br-nav-item.is-active { background: var(--br-accent); color: var(--br-accent-ink); border-radius: 0; } [data-theme="domestique"] .br-nav-item.is-active { background: var(--br-text); color: var(--br-bg); border-radius: var(--br-radius-control); } /* ═════════════════════════════════════════════════════════════════════════════ BRIDGE LEGACY VARIABLES Mappe les variables --br-* du design system vers les variables historiques utilisées par les templates Jinja (--bg, --accent, --card, etc.). Permet aux templates existants de réagir au changement de [data-theme] sans refactoriser tout leur CSS inline. ═════════════════════════════════════════════════════════════════════════════ */ [data-theme="peloton"], [data-theme="pulse"], [data-theme="domestique"], [data-theme="maillot"] { --bg: var(--br-bg); --card: var(--br-panel); --accent: var(--br-accent); --text: var(--br-text); --muted: var(--br-muted); --border: var(--br-border); --input-bg: var(--br-panel-soft); --success: var(--br-pos); --danger: var(--br-neg); --warn: var(--br-warn); --info: var(--br-secondary); --accent2: var(--br-accent-soft); } /* Si le body porte le thème (cas standard via render Jinja), on map les vars ET on force le background/color pour battre les valeurs hardcodees des templates legacy */ body[data-theme="peloton"], body[data-theme="pulse"], body[data-theme="domestique"], body[data-theme="maillot"] { --bg: var(--br-bg); --card: var(--br-panel); --accent: var(--br-accent); --text: var(--br-text); --muted: var(--br-muted); --border: var(--br-border); --input-bg: var(--br-panel-soft); --success: var(--br-pos); --danger: var(--br-neg); --warn: var(--br-warn); --info: var(--br-secondary); --accent2: var(--br-accent-soft); /* Reset hard pour battre les `background: gradient...` hardcodes des templates legacy */ background: var(--br-bg) !important; background-image: none !important; color: var(--br-text) !important; } /* Cartes / sections : background panel + border */ body[data-theme] .card, body[data-theme] .section-card, body[data-theme] .br-shell-content .card { background: var(--br-panel) !important; border-color: var(--br-border) !important; color: var(--br-text); } /* Sidebar app-shell — récupère couleurs du thème */ body[data-theme] .br-shell-main, body[data-theme] .br-shell-sidebar { background-color: var(--br-panel) !important; border-color: var(--br-border) !important; } /* ═════════════════════════════════════════════════════════════════════════════ ALIAS LEGACY SHELL (light touch) On ne touche QUE aux couleurs/typo des classes legacy. On NE TOUCHE PAS aux dimensions/padding pour ne pas casser les layouts existants. ═════════════════════════════════════════════════════════════════════════════ */ body[data-theme] .br-shell-sidebar { background-color: var(--br-panel) !important; border-right-color: var(--br-border) !important; } body[data-theme] .br-shell-main { background-color: var(--br-bg) !important; } body[data-theme] .br-shell-header { background-color: var(--br-panel) !important; border-bottom-color: var(--br-border) !important; } body[data-theme] .br-shell-nav-item { color: var(--br-muted-strong) !important; } body[data-theme] .br-shell-nav-item:hover { background-color: var(--br-panel-soft) !important; color: var(--br-text-strong) !important; } body[data-theme] .br-shell-nav-item.active, body[data-theme] .br-shell-nav-item.is-active { background-color: var(--br-accent-soft) !important; color: var(--br-accent-ink) !important; } body[data-theme] .br-shell-bottom-nav { border-top-color: var(--br-border) !important; } body[data-theme] .br-shell-header-subnav { border-bottom-color: var(--br-border) !important; } body[data-theme] .br-shell-header-subnav-item.tab-btn { color: var(--br-muted) !important; } body[data-theme] .br-shell-header-subnav-item.tab-btn:hover { color: var(--br-text) !important; } body[data-theme] .br-shell-header-subnav-item.active { color: var(--br-accent) !important; border-bottom-color: var(--br-accent) !important; } /* Inputs : couleurs seulement (pas de width/padding) */ body[data-theme] input[type="text"], body[data-theme] input[type="email"], body[data-theme] input[type="password"], body[data-theme] input[type="number"], body[data-theme] input[type="date"], body[data-theme] input[type="time"], body[data-theme] input[type="search"], body[data-theme] textarea, body[data-theme] select { background-color: var(--br-panel-soft); color: var(--br-text); border-color: var(--br-border); } body[data-theme] input:focus, body[data-theme] textarea:focus, body[data-theme] select:focus { border-color: var(--br-accent); } /* Boutons legacy .btn — couleurs seulement */ body[data-theme] .btn { color: white !important; } body[data-theme] .btn-secondary { color: var(--br-text) !important; } /* Titres et liens — couleurs */ body[data-theme] h1, body[data-theme] h2, body[data-theme] h3, body[data-theme] h4 { color: var(--br-text-strong); }