/* Fitness Dashboard — Design Tokens (fd-*) Layer ON TOP of theme.css — must be loaded AFTER it. Provides: semantic state colors, numeric display type scale, card anatomy, section identity system (v2), page hero, section heads, tile groups. Everything derives from theme.css custom properties, so all tokens adapt automatically to the 5 themes (light/dark/power/midnight/nature). */ @import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&display=swap'); :root { /* Semantic state colors (trend/status semantics — theme-aware) */ --fd-positive: var(--accent-green); --fd-watch: var(--accent-gold); --fd-negative: var(--accent-red); /* Soft background variants for chips, badges, tinted surfaces */ --fd-positive-soft: color-mix(in srgb, var(--accent-green) 14%, transparent); --fd-watch-soft: color-mix(in srgb, var(--accent-gold) 16%, transparent); --fd-negative-soft: color-mix(in srgb, var(--accent-red) 13%, transparent); --fd-neutral-soft: color-mix(in srgb, var(--text-muted) 12%, transparent); } /* --- State color helpers --- */ .fd-positive { color: var(--fd-positive); } .fd-watch { color: var(--fd-watch); } .fd-negative { color: var(--fd-negative); } .fd-bg-positive { background: var(--fd-positive-soft); } .fd-bg-watch { background: var(--fd-watch-soft); } .fd-bg-negative { background: var(--fd-negative-soft); } /* --- Numeric display type scale (tabular figures = stable layout) --- */ .fd-num-hero { font-size: 3rem; font-weight: 800; line-height: 1; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; color: var(--text-primary); } .fd-num-kpi { font-size: 1.75rem; font-weight: 700; line-height: 1.05; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; color: var(--text-primary); } /* Unit suffix — small-caps, sized relative to the numeral it follows: 58,4TSS */ .fd-unit { font-size: 0.55em; font-variant-caps: all-small-caps; letter-spacing: 0.06em; font-weight: 600; color: var(--text-muted); margin-left: 0.15em; } /* --- Card anatomy (visually identical to .card, adds inner structure) --- */ .fd-card { background: var(--bg-card); border: 1px solid var(--bg-card-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); padding: 16px 18px; transition: box-shadow var(--duration-normal) var(--ease-out), transform var(--duration-normal) var(--ease-out); } a.fd-card { display: block; text-decoration: none; color: inherit; } .fd-card-interactive { cursor: pointer; } .fd-card-interactive:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); } .fd-card-interactive:active { transform: scale(0.99); box-shadow: var(--shadow-sm); } .fd-card-header { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 8px; } /* Mirrors .stat-label from theme.css */ .fd-card-label { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-muted); font-weight: 500; } .fd-card-value-row { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; } .fd-card-footer { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--bg-card-border); font-size: 0.75rem; color: var(--text-muted); } @media (max-width: 640px) { .fd-num-hero { font-size: 2.25rem; } .fd-num-kpi { font-size: 1.4rem; } .fd-card { border-radius: var(--radius-md); } } /* ==================================================================== * v2 — SECTION IDENTITY SYSTEM * Every page declares its home section on . * The section sets --page-accent, which colors the page hero, section * heads, nav highlight and chart primaries — one system, many moods. * home Heute/Dashboard/Kalender/Woche/Trends (brand orange) * training Leistung/Periodisierung/Engine/Hitze/… (brand orange) * race Race-Status/Playbook/Ziele (crimson) * body Gewicht/Ernährung/Bloodwork (teal) * mind Mental/Journey/Notizen/Chat (violet) * system Operations/Profil (slate) * ==================================================================== */ :root { --sec-home: var(--accent-orange); --sec-training: var(--accent-orange); --sec-race: #c23a54; --sec-body: #2e8f7f; --sec-mind: #7a5fae; --sec-system: #64748b; --page-accent: var(--accent-orange); } [data-theme="dark"], [data-theme="power"] { --sec-race: #e05575; --sec-body: #3fbfa8; --sec-mind: #a488d9; --sec-system: #94a3b8; } [data-theme="midnight"] { --sec-race: #ff5c7a; --sec-body: #4cd0b8; --sec-mind: #c084fc; --sec-system: #9aa8c7; } [data-theme="nature"] { --sec-race: #a84a58; --sec-body: #3d7d6d; --sec-mind: #6d5f8a; --sec-system: #6e7468; } body[data-section="home"] { --page-accent: var(--sec-home); } body[data-section="training"] { --page-accent: var(--sec-training); } body[data-section="race"] { --page-accent: var(--sec-race); } body[data-section="body"] { --page-accent: var(--sec-body); } body[data-section="mind"] { --page-accent: var(--sec-mind); } body[data-section="system"] { --page-accent: var(--sec-system); } /* Whole-page atmosphere: a faint tinted glow from the top, full-coverage. Sits behind everything (z-index:-1) so cards/charts are unaffected. */ body[data-section] { position: relative; } body[data-section]::before { content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(110% 42% at 50% 0%, color-mix(in srgb, var(--page-accent) 7%, transparent), transparent 72%); } /* --- Display typography (page titles, hero numerals) --- */ .fd-display { font-family: 'Space Grotesk', 'DM Sans', system-ui, sans-serif; letter-spacing: -0.03em; } .fd-page-title { font-family: 'Space Grotesk', 'DM Sans', system-ui, sans-serif; font-size: 1.65rem; font-weight: 700; letter-spacing: -0.025em; line-height: 1.15; color: var(--text-primary); } .fd-page-sub { font-size: 0.85rem; color: var(--text-secondary); margin-top: 4px; } .fd-num-hero, .fd-ring-num { font-family: 'Space Grotesk', 'DM Sans', system-ui, sans-serif; } /* --- Page hero — the stage at the top of every page. Layered radial washes of the section accent; organic, full-coverage. Optional decorative bezier contours via FDViz.heroWaves(). --- */ .fd-hero { position: relative; overflow: hidden; border-radius: var(--radius-xl); border: 1px solid color-mix(in srgb, var(--page-accent) 16%, var(--bg-card-border)); background: radial-gradient(120% 100% at 88% -25%, color-mix(in srgb, var(--page-accent) 15%, transparent), transparent 58%), radial-gradient(110% 120% at -12% 118%, color-mix(in srgb, var(--page-accent) 8%, transparent), transparent 52%), var(--bg-card); box-shadow: var(--shadow-sm); } .fd-hero > * { position: relative; z-index: 1; } /* Decorative contour SVG inside a hero (injected by FDViz.heroWaves) */ .fd-hero-waves { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; color: var(--page-accent); pointer-events: none; } /* --- Section head — replaces bare uppercase labels between blocks --- */ .fd-section-head { display: flex; align-items: baseline; gap: 10px; margin: 30px 2px 12px; } .fd-section-head::before { content: ''; width: 5px; height: 15px; border-radius: 3px; background: linear-gradient(180deg, var(--page-accent), color-mix(in srgb, var(--page-accent) 45%, transparent)); align-self: center; flex-shrink: 0; } .fd-section-title { font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-secondary); } .fd-section-meta { margin-left: auto; font-size: 0.74rem; color: var(--text-muted); } /* --- Tile groups — several small insights INSIDE one container card (instead of a stack of full-width cards). --- */ .fd-tile-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; } .fd-tile { padding: 12px 14px; border-radius: 12px; background: color-mix(in srgb, var(--page-accent) 5%, var(--bg-card)); border: 1px solid color-mix(in srgb, var(--page-accent) 13%, var(--bg-card-border)); transition: transform var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out); } .fd-tile:hover { transform: translateY(-1px); box-shadow: var(--shadow-md); } .fd-tile-title { font-size: 0.7rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.07em; color: var(--text-muted); margin-bottom: 4px; } .fd-tile-body { font-size: 0.82rem; line-height: 1.5; color: var(--text-secondary); } .fd-tile-body b, .fd-tile-body strong { color: var(--text-primary); } /* --- Data table — compact, calm, hover rows; replaces raw tables --- */ .fd-table { width: 100%; border-collapse: collapse; font-size: 0.8rem; } .fd-table thead th { position: sticky; top: var(--nav-height, 0px); background: var(--bg-card); z-index: 2; text-align: left; font-size: 0.66rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-muted); padding: 8px 10px; border-bottom: 1px solid var(--bg-card-border); } /* Im overflow-Wrapper (mobiler Quer-Scroll) ist der WRAPPER der Sticky- Scrollport, nicht die Seite: top:var(--nav-height) schiebt den Header dort nur konstant um Nav-Hoehe in die Tabelle hinein (unter der Nav kleben kann er da ohnehin nie). top:0 laesst ihn an seinem Platz. WICHTIG: Tabellen-Wrapper brauchen die KLASSE overflow-x-auto, kein inline style="overflow-x:auto" — sonst matcht dieser Reset nicht und der Header frisst die zweite Zeile (Ops-Seite, 13.07.). */ .overflow-x-auto { overflow-x: auto; } .overflow-x-auto .fd-table thead th { top: 0; } .fd-table tbody td { padding: 8px 10px; border-bottom: 1px solid color-mix(in srgb, var(--bg-card-border) 55%, transparent); color: var(--text-secondary); font-variant-numeric: tabular-nums; } .fd-table tbody tr { transition: background var(--duration-fast); } .fd-table tbody tr:hover { background: color-mix(in srgb, var(--page-accent) 4%, transparent); } .fd-table tbody tr:last-child td { border-bottom: none; } .fd-table .num { text-align: right; } /* --- Icon chip — small round stage for an FDIcons glyph --- */ .fd-icon-chip { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 10px; background: color-mix(in srgb, var(--page-accent) 10%, transparent); color: var(--page-accent); flex-shrink: 0; } .fd-icon-chip svg { width: 18px; height: 18px; } .fd-icon-chip--sm { width: 26px; height: 26px; border-radius: 8px; } .fd-icon-chip--sm svg { width: 14px; height: 14px; } /* Accent helpers driven by the page accent */ .fd-accent { color: var(--page-accent); } .fd-bg-accent-soft { background: color-mix(in srgb, var(--page-accent) 9%, transparent); } .fd-border-accent { border-color: color-mix(in srgb, var(--page-accent) 30%, var(--bg-card-border)); } @media (max-width: 640px) { .fd-page-title { font-size: 1.35rem; } .fd-hero { border-radius: var(--radius-lg); } }