/* ========================================================================== FitTask design tokens — shared visual language across the app. Layered on top of Bootstrap 5 (grid + JS components stay as-is). ========================================================================== */ :root { /* Color */ --color-primary: #6366f1; --color-primary-hover: #4f46e5; --color-primary-active: #4338ca; --color-primary-subtle: #eef2ff; --color-primary-subtle-border: #e0e7ff; --color-ink: #0f172a; --color-body: #1e293b; --color-muted: #64748b; --color-faint: #94a3b8; --color-border: #e6e9f2; --color-border-strong: #d8dce8; --color-surface: #ffffff; --color-surface-alt: #f8fafc; --color-bg: #f6f8fc; --color-success: #16a34a; --color-success-subtle: #ecfdf3; --color-warning: #d97706; --color-warning-subtle: #fffbeb; --color-danger: #dc2626; --color-danger-subtle: #fef2f2; /* Typography */ --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif; --fs-xs: 0.75rem; --fs-sm: 0.8125rem; --fs-base: 0.9375rem; --fs-md: 1.0625rem; --fs-lg: 1.25rem; --fs-xl: 1.5rem; --fs-2xl: 1.875rem; --fs-3xl: 2.25rem; /* Radius */ --radius-sm: 10px; --radius-md: 14px; --radius-lg: 20px; --radius-pill: 999px; /* Shadow — soft, low-contrast (Stripe/Linear style) */ --shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.04); --shadow-sm: 0 2px 8px rgba(15, 23, 42, 0.06); --shadow-md: 0 8px 24px rgba(15, 23, 42, 0.08); --shadow-lg: 0 16px 40px rgba(15, 23, 42, 0.12); --shadow-focus: 0 0 0 4px var(--color-primary-subtle-border); /* Motion */ --ease-out: cubic-bezier(0.4, 0, 0.2, 1); --dur-fast: 120ms; --dur-base: 200ms; } /* ========================================================================== Dark theme — activated by setting data-theme="dark" on . Toggled client-side only (localStorage 'ft_theme'), see _SidebarLayout.cshtml. ========================================================================== */ :root[data-theme="dark"] { --color-primary: #818cf8; --color-primary-hover: #6366f1; --color-primary-active: #4f46e5; --color-primary-subtle: rgba(99, 102, 241, 0.16); --color-primary-subtle-border: rgba(99, 102, 241, 0.35); --color-ink: #f1f5f9; --color-body: #cbd5e1; --color-muted: #94a3b8; --color-faint: #64748b; --color-border: rgba(255, 255, 255, 0.10); --color-border-strong: rgba(255, 255, 255, 0.18); --color-surface: #131c31; --color-surface-alt: #0f1626; --color-bg: #0b1220; --color-success: #4ade80; --color-success-subtle: rgba(74, 222, 128, 0.15); --color-warning: #fbbf24; --color-warning-subtle: rgba(251, 191, 36, 0.15); --color-danger: #f87171; --color-danger-subtle: rgba(248, 113, 113, 0.15); --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.35); --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.35); --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.45); --shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.55); --shadow-focus: 0 0 0 4px var(--color-primary-subtle-border); } :root[data-theme="dark"] .glass { background: rgba(19, 28, 49, 0.72); } :root[data-theme="dark"] .topbar { background: rgba(11, 18, 32, 0.85); } /* ========================================================================== Base ========================================================================== */ body { font-family: var(--font-sans); color: var(--color-body); -webkit-font-smoothing: antialiased; } h1, h2, h3, h4, h5, h6 { color: var(--color-ink); font-weight: 700; letter-spacing: -0.02em; line-height: 1.25; } .text-muted { color: var(--color-muted) !important; } /* Visible keyboard focus ring on every interactive element */ a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, .btn:focus-visible, .side-link:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; } /* Skip-to-content link — hidden until focused */ .skip-link { position: absolute; top: -48px; left: 1rem; z-index: 2000; background: var(--color-ink); color: #fff; padding: 0.6rem 1rem; border-radius: var(--radius-sm); font-weight: 600; font-size: var(--fs-sm); transition: top var(--dur-base) var(--ease-out); } .skip-link:focus { top: 1rem; } /* ========================================================================== Cards ========================================================================== */ .card-premium, .cardx { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); transition: box-shadow var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out); } .card-premium.hoverable:hover, .cardx.hoverable:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); border-color: var(--color-border-strong); } .cardx .card-header { background: var(--color-surface-alt); border-bottom: 1px solid var(--color-border); border-radius: var(--radius-lg) var(--radius-lg) 0 0; font-weight: 600; padding: .9rem 1.1rem; } .cardx .card-body { padding: 1.1rem; } /* ========================================================================== Buttons ========================================================================== */ .btn { border-radius: var(--radius-sm); font-weight: 600; font-size: var(--fs-sm); transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), background-color var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out); } .btn:hover { transform: translateY(-1px); } .btn:active { transform: translateY(0); } .btn-primary { background: var(--color-primary); border-color: var(--color-primary); box-shadow: var(--shadow-xs); } .btn-primary:hover { background: var(--color-primary-hover); border-color: var(--color-primary-hover); box-shadow: var(--shadow-sm); } .btn-primary:active, .btn-primary:focus { background: var(--color-primary-active) !important; border-color: var(--color-primary-active) !important; } .btn-outline-secondary { color: var(--color-body); border-color: var(--color-border-strong); } .btn-outline-secondary:hover { background: var(--color-surface-alt); border-color: var(--color-border-strong); color: var(--color-ink); } /* ========================================================================== Forms ========================================================================== */ .form-control, .form-select { border-radius: var(--radius-sm); border-color: var(--color-border-strong); font-size: var(--fs-base); padding: 0.55rem 0.85rem; transition: border-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out); } .form-control:focus, .form-select:focus { border-color: var(--color-primary); box-shadow: var(--shadow-focus); } .form-range::-webkit-slider-thumb { background-color: var(--color-primary); } .form-range::-moz-range-thumb { background-color: var(--color-primary); } .form-range::-webkit-slider-runnable-track { background-color: var(--color-primary-subtle-border); } .form-check-input:checked { background-color: var(--color-primary); border-color: var(--color-primary); } .form-label { font-weight: 600; font-size: var(--fs-sm); color: var(--color-body); } /* ========================================================================== Badges ========================================================================== */ .badge-soft { border-radius: var(--radius-pill); font-weight: 600; font-size: var(--fs-xs); padding: 0.35em 0.75em; } /* ========================================================================== Page header helpers — consistent title/subtitle across all pages ========================================================================== */ .page-title { font-size: var(--fs-2xl); margin-bottom: .25rem; } .page-subtitle { color: var(--color-muted); margin-bottom: 1.5rem; } .avatar-circle-lg { width: 56px; height: 56px; border-radius: 50%; background: linear-gradient(135deg, var(--color-primary), #8b5cf6); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 1.25rem; font-weight: 700; flex: none; } /* ========================================================================== Glass utility — used sparingly (topbar, auth background) ========================================================================== */ .glass { background: rgba(255, 255, 255, 0.72); backdrop-filter: blur(16px) saturate(160%); -webkit-backdrop-filter: blur(16px) saturate(160%); } /* ========================================================================== Icon circle — monochrome circular icon chip (sport picker, minimal builders) ========================================================================== */ .icon-circle { width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; border: 1px solid var(--color-border); color: var(--color-muted); font-size: 1.05rem; background: var(--color-surface); transition: border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out); } .icon-circle-sm { width: 32px; height: 32px; font-size: .85rem; } .sport-picker { display: flex; flex-wrap: wrap; gap: .9rem; } .sport-chip { cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: .35rem; width: 72px; text-align: center; } .sport-chip-label { font-size: var(--fs-xs); color: var(--color-muted); font-weight: 600; line-height: 1.15; } .sport-chip:hover .icon-circle { border-color: var(--color-primary); color: var(--color-primary); } .sport-chip.active .icon-circle { border-color: var(--color-primary); color: var(--color-primary); background: var(--color-primary-subtle); } .sport-chip.active .sport-chip-label { color: var(--color-primary); } /* ========================================================================== Compact builder — minimal step labels + rows (training insert, exercise builder) ========================================================================== */ .builder-step-label { font-size: var(--fs-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--color-muted); margin-bottom: .5rem; display: block; } .builder-row { border: 1px solid var(--color-border); border-radius: var(--radius-sm); padding: .6rem .75rem; background: var(--color-surface); }