/* ========================================================================== Crikky — vanilla CSS, strict BEM ========================================================================== Design tokens → base/reset → shell → shared components. App components live in app-.css (one per app) loaded via {% block extra_css %}. Mobile variants come from media queries inside the component. ========================================================================== */ /* -------------------------------------------------------------------------- 1. Design tokens -------------------------------------------------------------------------- */ :root { /* Brand */ --color-primary: #1a5f3f; --color-primary-hover: #144a32; --color-primary-soft: #e7f0ec; --color-primary-soft-strong: rgba(26, 95, 63, 0.15); --color-accent: #f97316; --color-accent-soft: #fff7ed; /* Status */ --color-success: #10b981; --color-success-soft: #d1fae5; --color-danger: #ef4444; --color-danger-soft: #fee2e2; --color-warning: #f59e0b; --color-warning-soft: #fef3c7; --color-info: #2563eb; --color-info-soft: #dbeafe; /* Surfaces */ --color-bg: #f8fafc; --color-surface: #ffffff; --color-surface-alt: #f1f5f9; --color-surface-muted: #f8fafc; /* Text */ --color-text: #1e293b; --color-text-strong: #0f172a; --color-text-muted: #64748b; --color-text-faint: #94a3b8; --color-text-inverse: #ffffff; /* Lines */ --color-border: #e2e8f0; --color-border-strong: #cbd5e1; /* Dark shell (header / sidebar / footer) */ --color-shell-bg: #020617; --color-shell-text: #ffffff; --color-shell-text-muted: rgba(255, 255, 255, 0.7); --color-shell-text-faint: rgba(255, 255, 255, 0.3); --color-shell-border: rgba(255, 255, 255, 0.1); --color-shell-hover: rgba(255, 255, 255, 0.05); --color-shell-active: rgba(255, 255, 255, 0.1); /* Radii */ --radius-sm: 0; --radius-md: 0; --radius-lg: 0; --radius-full: 0; /* Shadows */ --shadow-sm: 0 1px 2px rgba(2, 6, 23, 0.05); --shadow-md: 0 4px 6px -1px rgba(2, 6, 23, 0.08), 0 2px 4px -2px rgba(2, 6, 23, 0.05); --shadow-lg: 0 10px 15px -3px rgba(2, 6, 23, 0.1), 0 4px 6px -4px rgba(2, 6, 23, 0.05); /* Typography */ --font-size-xs: 0.75rem; --font-size-sm: 0.875rem; --font-size-base: 1rem; --font-size-lg: 1.125rem; --font-size-xl: 1.25rem; --font-size-2xl: 1.5rem; --font-size-3xl: 1.875rem; --font-size-4xl: 2.25rem; /* Layout */ --header-height: 3rem; --sidebar-width: 280px; } /* Dark theme (currently shipped light-only; flip to enable) */ [data-theme="dark"] { --color-bg: #0f172a; --color-surface: #1e293b; --color-surface-alt: #16213a; --color-surface-muted: #131c30; --color-text: #e2e8f0; --color-text-strong: #f8fafc; --color-text-muted: #94a3b8; --color-text-faint: #64748b; --color-text-inverse: #0f172a; --color-border: #334155; --color-border-strong: #475569; --color-primary: #34d399; --color-primary-hover: #6ee7b7; --color-primary-soft: rgba(16, 185, 129, 0.12); --color-primary-soft-strong: rgba(16, 185, 129, 0.2); --color-accent: #fb923c; --color-accent-soft: rgba(249, 115, 22, 0.12); --color-success: #34d399; --color-success-soft: rgba(16, 185, 129, 0.15); --color-danger: #f87171; --color-danger-soft: rgba(239, 68, 68, 0.15); --color-warning: #fbbf24; --color-warning-soft: rgba(245, 158, 11, 0.15); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3); --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -2px rgba(0, 0, 0, 0.3); --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.5), 0 4px 6px -4px rgba(0, 0, 0, 0.3); } /* -------------------------------------------------------------------------- 2. Reset & base -------------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; padding: 0; touch-action: manipulation; } html { -webkit-text-size-adjust: 100%; } body { font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; font-size: var(--font-size-base); line-height: 1.5; color: var(--color-text); background: var(--color-bg); overflow-x: hidden; -webkit-font-smoothing: antialiased; } img, svg, canvas { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; } button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; } ul, ol { list-style: none; } table { border-collapse: collapse; border-spacing: 0; width: 100%; } input, select, textarea { font: inherit; } /* Alpine pre-hydration guard */ [x-cloak] { display: none !important; } /* Plain display toggle used by legacy markup */ .hidden { display: none !important; } /* Numbers that should not jitter when ticking */ .tabular-nums { font-variant-numeric: tabular-nums; } /* Disabled state */ [disabled] { opacity: 0.5; cursor: not-allowed; } /* Mobile-first: minimum 44px touch targets */ button, a, [role="button"], input[type="checkbox"], input[type="radio"], select { min-height: 44px; min-width: 44px; } button, label:has(input[type="radio"]), label:has(input[type="checkbox"]) { cursor: pointer; } /* Accessible focus ring */ button:focus-visible, a:focus-visible, [role="button"]:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--color-surface), 0 0 0 4px var(--color-primary); } input:focus, select:focus, textarea:focus { outline: none; box-shadow: 0 0 0 2px var(--color-primary-soft-strong); } /* Touch feedback */ button:active, a:active, [role="button"]:active { transform: scale(0.97); } /* No hover effects on touch devices */ @media (hover: none) { .card--hover:hover { box-shadow: var(--shadow-sm); transform: none; } } /* Mobile scrollbar */ @media (max-width: 767px) { ::-webkit-scrollbar { width: 4px; height: 4px; } ::-webkit-scrollbar-track { background: var(--color-surface-alt); } ::-webkit-scrollbar-thumb { background: var(--color-border-strong); border-radius: var(--radius-full); } } /* Prevent iOS zoom on input focus (font-size must be >= 16px) */ @media (max-width: 767px) { input, select, textarea { font-size: 16px; } } /* -------------------------------------------------------------------------- 3. Shell: header / sidebar / page / footer -------------------------------------------------------------------------- */ /* Alpine x-transition classes for the sidebar & overlay (BEM-free helpers, scoped to this shell animation) */ .fade-enter { transition: opacity 0.3s ease; } .fade-enter-start { opacity: 0; } .fade-enter-end { opacity: 1; } .fade-leave { transition: opacity 0.3s ease; } .fade-leave-start { opacity: 1; } .fade-leave-end { opacity: 0; } .slide-enter { transition: transform 0.3s ease-in-out; } .slide-enter-start { transform: translateX(-100%); } .slide-enter-end { transform: translateX(0); } .slide-leave { transition: transform 0.3s ease-in-out; } .slide-leave-start { transform: translateX(0); } .slide-leave-end { transform: translateX(-100%); } .site-header { position: fixed; top: 0; left: 0; right: 0; z-index: 1001; height: var(--header-height); background: var(--color-shell-bg); border-bottom: 1px solid var(--color-shell-border); box-shadow: 0 4px 12px rgba(2, 6, 23, 0.1); } .site-header__inner { height: 100%; display: flex; align-items: center; justify-content: space-between; padding: 0 0.75rem; } .site-header__brand { display: flex; align-items: center; gap: 0.5rem; color: var(--color-shell-text); font-weight: 600; letter-spacing: -0.01em; transition: opacity 0.15s; } .site-header__brand:active { opacity: 0.8; } .site-header__logo { width: 1.75rem; height: 1.75rem; border-radius: var(--radius-sm); box-shadow: var(--shadow-sm); outline: 1px solid var(--color-shell-border); } .site-header__title { font-size: var(--font-size-sm); } .site-header__toggle { display: flex; align-items: center; justify-content: center; color: var(--color-shell-text-muted); border-radius: var(--radius-sm); padding: 0.5rem; min-width: 44px; min-height: 44px; margin-right: -0.25rem; transition: color 0.15s, background 0.15s; } .site-header__toggle:hover { color: var(--color-shell-text); background: var(--color-shell-hover); } .sidebar { position: fixed; top: 0; left: 0; z-index: 1002; width: 85vw; max-width: var(--sidebar-width); height: 100dvh; display: flex; flex-direction: column; background: var(--color-shell-bg); border-right: 1px solid var(--color-shell-border); box-shadow: var(--shadow-lg); } .sidebar__nav { display: flex; flex-direction: column; gap: 0.125rem; flex: 1; overflow-y: auto; padding: 1rem 0.5rem; } .sidebar__overlay { position: fixed; inset: 0; z-index: 999; background: rgba(0, 0, 0, 0.7); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); } .nav__item { display: flex; align-items: center; gap: 0.75rem; border-radius: var(--radius-md); padding: 0.625rem 0.75rem; font-size: var(--font-size-sm); font-weight: 500; color: var(--color-shell-text-muted); transition: background 0.2s, color 0.2s; } .nav__item:hover { color: var(--color-shell-text); background: var(--color-shell-hover); } .nav__item:active { background: var(--color-shell-active); } .nav__item--active { color: #34d399; background: var(--color-primary-soft-strong); outline: 1px solid rgba(52, 211, 153, 0.2); } .nav__icon { width: 2.25rem; height: 2.25rem; flex-shrink: 0; display: flex; align-items: center; justify-content: center; border-radius: var(--radius-sm); font-size: var(--font-size-sm); background: var(--color-shell-hover); color: var(--color-shell-text-faint); transition: background 0.2s, color 0.2s; } .nav__item--active .nav__icon { background: var(--color-primary-soft-strong); color: #34d399; } .nav__section { display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0.75rem; margin: 0.25rem 0; } .nav__section-line { flex: 1; height: 1px; background: linear-gradient( to right, transparent, var(--color-shell-border), var(--color-shell-border) ); } .nav__section-line--end { background: linear-gradient( to right, var(--color-shell-border), var(--color-shell-border), transparent ); } .nav__section-label { flex-shrink: 0; font-size: 0.625rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-shell-text-faint); } .site-main { display: flex; overflow-x: clip; padding-top: var(--header-height); min-height: 100dvh; } .page { flex: 1; min-width: 0; min-height: 100vh; padding: 0.5rem 0.5rem 1.5rem; background: linear-gradient( 135deg, var(--color-bg) 0%, var(--color-surface) 50%, var(--color-bg) 100% ); overflow-x: clip; } .sidebar__footer { flex-shrink: 0; padding: 0.75rem 1rem; background: var(--color-shell-bg); border-top: 1px solid var(--color-shell-border); } .sidebar__footer-link { display: inline-flex; align-items: center; gap: 0.375rem; color: var(--color-shell-text-faint); font-size: 0.6875rem; font-weight: 500; transition: color 0.15s; } .sidebar__footer-link:hover { color: var(--color-shell-text); } @media (min-width: 768px) { :root { --header-height: 3.5rem; } .site-header__inner { margin-left: var(--sidebar-width); padding: 0 1.5rem; } .site-header__toggle { display: none; } .sidebar { width: var(--sidebar-width); } .sidebar__overlay { display: none; } .site-main { padding-top: var(--header-height); } .page { margin-left: var(--sidebar-width); padding: 1rem 1rem 1.5rem; } } @media (min-width: 1024px) { .page { padding-left: 1.5rem; padding-right: 1.5rem; } } /* -------------------------------------------------------------------------- 4. Cards & surfaces -------------------------------------------------------------------------- */ .card { background: color-mix(in srgb, var(--color-surface) 90%, transparent); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); outline: 1px solid var(--color-border); box-shadow: var(--shadow-sm); border-radius: var(--radius-md); } .card--pad { padding: 0.75rem; } .card--pad-sm { padding: 0.5rem; } .card--flush { overflow: hidden; } .card--hover { transition: box-shadow 0.2s, transform 0.2s; will-change: transform; } .card--hover:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); } .card--hover:active { box-shadow: var(--shadow-md); transform: translateY(-1px); } @media (min-width: 768px) { .card--pad { padding: 1.5rem; } .card--pad-sm { padding: 1rem; } } /* Card divider */ .card__divider { height: 1px; background: linear-gradient(to right, transparent, var(--color-border), transparent); margin: 0.25rem 0; } @media (min-width: 768px) { .card__divider { margin: 0.5rem 0; } } /* -------------------------------------------------------------------------- 5. Buttons -------------------------------------------------------------------------- */ .button { display: inline-flex; align-items: center; justify-content: center; gap: 0.375rem; border-radius: var(--radius-md); font-size: var(--font-size-sm); font-weight: 500; padding: 0.5rem 1rem; white-space: nowrap; transition: background 0.2s, color 0.2s, box-shadow 0.2s, transform 0.2s, border-color 0.2s; } .button:active { transform: scale(0.95); } .button--primary { background: var(--color-text-strong); color: var(--color-text-inverse); box-shadow: var(--shadow-sm); } .button--primary:hover { background: var(--color-text); } .button--success { background: var(--color-success); color: #fff; } .button--success:hover { filter: brightness(1.05); } .button--danger { background: var(--color-danger); color: #fff; } .button--danger:hover { filter: brightness(1.05); } .button--amber { background: #f59e0b; color: #fff; } .button--amber:hover { background: #d97706; } .button--purple { background: #8b5cf6; color: #fff; } .button--purple:hover { background: #7c3aed; } .button--secondary { background: var(--color-surface-alt); color: var(--color-text-muted); outline: 1px solid var(--color-border-strong); } .button--secondary:hover { background: var(--color-border); color: var(--color-text); } .button--outline { background: var(--color-surface); color: var(--color-text); outline: 1px solid var(--color-border-strong); box-shadow: var(--shadow-sm); } .button--outline:hover { background: var(--color-text-strong); color: var(--color-text-inverse); } .button--outline-amber { background: transparent; color: #b45309; outline: 1px solid #fcd34d; } .button--outline-amber:hover { background: var(--color-warning); color: #fff; } .button--outline-red { background: transparent; color: #dc2626; outline: 1px solid #fca5a5; } .button--outline-red:hover { background: var(--color-danger); color: #fff; } .button--ghost { background: transparent; color: var(--color-text-muted); } .button--ghost:hover { color: var(--color-text); } .button--gradient-primary { background: linear-gradient(to right, var(--color-success), #14b8a6); color: #fff; box-shadow: 0 10px 15px -3px rgba(16, 185, 129, 0.3); } .button--gradient-primary:hover { background: linear-gradient(to right, #059669, #0d9488); } .button--gradient-dark { background: linear-gradient(to right, #1e293b, #0f172a); color: #fff; box-shadow: 0 10px 15px -3px rgba(15, 23, 42, 0.2); } .button--gradient-dark:hover { background: linear-gradient(to right, #334155, #1e293b); } /* Sizes */ .button--xs { min-height: 0; min-width: 0; font-size: 0.625rem; font-weight: 700; padding: 0.25rem 0.5rem; border-radius: var(--radius-sm); letter-spacing: 0.05em; } .button--sm { min-height: 0; min-width: 0; font-size: var(--font-size-xs); padding: 0.375rem 0.75rem; border-radius: var(--radius-sm); font-weight: 700; } .button--lg { font-size: var(--font-size-base); padding: 0.75rem 1.25rem; min-height: 3.5rem; } .button--block { width: 100%; display: flex; } .button--pill { border-radius: var(--radius-full); } /* -------------------------------------------------------------------------- 6. Badges -------------------------------------------------------------------------- */ .badge { display: inline-flex; align-items: center; gap: 0.25rem; border-radius: var(--radius-full); padding: 0.125rem 0.625rem; font-size: var(--font-size-xs); font-weight: 500; outline: 1px solid var(--color-border); outline-offset: -1px; } .badge--muted { background: var(--color-surface-muted); color: var(--color-text-muted); outline-color: var(--color-border); } .badge--accent { background: var(--color-warning-soft); color: #b45309; outline-color: #fde68a; } .badge--stats { background: var(--color-success-soft); color: #047857; outline-color: #a7f3d0; } .badge--game { background: #ede9fe; color: #6d28d9; outline-color: #ddd6fe; } .badge--tool { background: var(--color-info-soft); color: #1d4ed8; outline-color: #bfdbfe; } .badge--neutral { background: var(--color-text-strong); color: var(--color-text-inverse); border-radius: var(--radius-sm); font-weight: 700; box-shadow: var(--shadow-sm); } .badge--sm { font-size: var(--font-size-xs); padding: 0.25rem 0.5rem; } .badge__label { opacity: 0.5; font-size: var(--font-size-xs); margin-right: 0.25rem; text-transform: uppercase; } /* -------------------------------------------------------------------------- 7. Form fields (Django-rendered markup uses descendant selectors) -------------------------------------------------------------------------- */ .form-field { display: flex; flex-direction: column; gap: 0.5rem; } .form-field label { font-size: var(--font-size-sm); font-weight: 700; color: var(--color-text-strong); } .form-field input, .form-field select, .form-field textarea { border: 1px solid var(--color-border-strong); background: var(--color-surface); color: var(--color-text); border-radius: var(--radius-md); padding: 0.5rem; outline: 1px solid var(--color-border); transition: box-shadow 0.15s; } .form-field input:focus, .form-field select:focus, .form-field textarea:focus { box-shadow: 0 0 0 2px var(--color-primary-soft-strong); } .form-field .errorlist { color: var(--color-danger); font-size: var(--font-size-xs); } label:has(input:checked) { background: var(--color-primary); color: #fff; } /* -------------------------------------------------------------------------- 8. Data tables -------------------------------------------------------------------------- */ .data-table { width: 100%; font-size: var(--font-size-sm); } .data-table__th { background: var(--color-text-strong); color: var(--color-text-inverse); font-weight: 600; font-size: var(--font-size-xs); text-transform: uppercase; letter-spacing: 0.05em; padding: 0.75rem 0.5rem; white-space: nowrap; text-align: right; } .data-table__td { padding: 0.625rem 0.5rem; color: var(--color-text); text-align: right; font-variant-numeric: tabular-nums; } .data-table__th:first-child, .data-table__td:first-child { text-align: left; } .data-table__th:first-child { font-weight: 600; } .data-table__td:first-child { font-weight: 500; color: var(--color-text-strong); } .data-table__td--empty { padding: 0; } .data-table--zebra .data-table__row:nth-child(even) .data-table__td { background: var(--color-surface-muted); } .data-table .data-table__td--highlight, .data-table--zebra .data-table__row:nth-child(even) .data-table__td--highlight { background: var(--color-success-soft); font-weight: 600; color: var(--color-text-strong); } .data-table--hover .data-table__row { transition: background 0.15s; } .data-table--hover .data-table__row:hover .data-table__td { background: var(--color-success-soft); } @media (max-width: 640px) { .data-table { font-size: var(--font-size-xs); } .data-table__th, .data-table__td { padding: 0.5rem 0.375rem; } } /* Inline SVG sprite icons (see templates/partials/icon.html) */ .icon-sprite { display: none; } .icon { width: 1em; height: 1em; flex-shrink: 0; fill: currentColor; vertical-align: middle; pointer-events: none; } /* -------------------------------------------------------------------------- 9. Dropdown & autocomplete -------------------------------------------------------------------------- */ .dropdown { position: relative; width: 100%; } .dropdown__toggle { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 0.5rem; height: 2rem; padding: 0 0.75rem; background: var(--color-surface); border-radius: var(--radius-md); outline: 1px solid var(--color-border-strong); box-shadow: var(--shadow-sm); cursor: pointer; transition: outline-color 0.15s; } .dropdown__toggle:hover { outline-color: var(--color-border); } .dropdown__label { font-size: var(--font-size-xs); font-weight: 500; color: var(--color-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .dropdown__chevron { font-size: 0.625rem; color: var(--color-text-faint); transition: transform 0.2s; } .dropdown__chevron--open { transform: rotate(180deg); } .dropdown__menu { position: absolute; left: 0; width: 100%; padding: 0.25rem; background: var(--color-surface); box-shadow: var(--shadow-lg); border-radius: var(--radius-md); outline: 1px solid var(--color-border-strong); overflow: hidden; z-index: 100; } .dropdown__menu--down { top: 100%; margin-top: 0.5rem; } .dropdown__menu--up { bottom: 100%; margin-bottom: 0.5rem; } .dropdown__menu--scroll { overflow-y: auto; } .dropdown__option { display: block; width: 100%; min-height: 0; padding: 0.5rem 0.75rem; border-radius: var(--radius-sm); font-size: var(--font-size-xs); color: var(--color-text); transition: background 0.15s, color 0.15s; } .dropdown__option:hover { background: var(--color-surface-alt); } .dropdown__option--active { background: var(--color-success-soft); color: #065f46; font-weight: 500; } .autocomplete { position: relative; width: 100%; } .autocomplete__chips { display: flex; flex-wrap: wrap; gap: 0.5rem; } .autocomplete__chip { display: inline-flex; align-items: center; gap: 0.375rem; background: var(--color-success-soft); color: #065f46; padding: 0.25rem 0.375rem 0.25rem 0.625rem; margin-bottom: 0.25rem; font-size: var(--font-size-xs); white-space: nowrap; outline: 1px solid #a7f3d0; border-radius: var(--radius-sm); height: 1.5rem; } .autocomplete__chip-text { font-weight: 500; line-height: 1; font-size: 0.6875rem; } .autocomplete__chip-remove { display: flex; align-items: center; justify-content: center; min-width: 0; min-height: 0; width: 1rem; height: 1rem; color: #059669; font-size: 0.5625rem; transition: color 0.15s; } .autocomplete__chip-remove:hover { color: var(--color-danger); } .autocomplete__input-wrap { display: flex; align-items: center; gap: 0.5rem; height: 2rem; padding: 0 0.75rem; background: var(--color-surface); border-radius: var(--radius-md); outline: 1px solid var(--color-border-strong); box-shadow: var(--shadow-sm); transition: box-shadow 0.15s, outline-color 0.15s; } .autocomplete__input-wrap:focus-within { outline: 2px solid var(--color-primary-soft-strong); } .autocomplete__input { flex: 1; min-width: 0; border: 0; background: transparent; color: var(--color-text); font-size: var(--font-size-xs); min-height: 0; } .autocomplete__input:focus { box-shadow: none; } .autocomplete__clear { min-width: 0; min-height: 0; font-size: var(--font-size-sm); color: var(--color-text-muted); } .autocomplete__menu { position: absolute; left: 0; width: 100%; padding: 0.25rem; background: var(--color-surface); box-shadow: var(--shadow-lg); border-radius: var(--radius-md); outline: 1px solid var(--color-border-strong); overflow: hidden; z-index: 100; display: flex; flex-direction: column; } .autocomplete__menu--down { top: 100%; margin-top: 0.5rem; } .autocomplete__menu--up { bottom: 100%; margin-bottom: 0.5rem; } .autocomplete__menu--scroll { overflow-y: auto; } .autocomplete__message { padding: 0.375rem 0.75rem; font-size: var(--font-size-xs); color: var(--color-text-faint); } .autocomplete__option { width: 100%; min-height: 0; padding: 0.5rem 0.75rem; border-radius: var(--radius-sm); font-size: var(--font-size-xs); color: var(--color-text-muted); text-align: left; transition: background 0.15s; } .autocomplete__option:hover { background: var(--color-surface-alt); } /* -------------------------------------------------------------------------- 10. Slider (noUiSlider) -------------------------------------------------------------------------- */ .noUi-target { background: var(--color-surface-alt); border-radius: var(--radius-full); box-shadow: none; border: 0; height: 0.375rem; } .noUi-connect { background: var(--color-primary); min-width: 1px; } .noUi-horizontal .noUi-handle { width: 1.25rem; height: 1.25rem; border-radius: var(--radius-full); background: var(--color-surface); box-shadow: var(--shadow-md); outline: 1px solid var(--color-border); border: 0; top: -0.4375rem; right: -0.625rem; cursor: pointer; } .noUi-horizontal .noUi-handle::before, .noUi-horizontal .noUi-handle::after { display: none; } .range { width: 100%; padding: 0 1.25rem; } .range > label { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.5rem; font-size: var(--font-size-xs); font-weight: 500; color: var(--color-text-muted); } .range__value { font-weight: 600; color: var(--color-primary); font-variant-numeric: tabular-nums; } .range .noUi-target { margin: 0; padding: 0; } .range .noUi-base { margin: 0; padding: 0; width: 100%; background: var(--color-surface-alt); } .range > div { height: 0.375rem; margin-top: 0.25rem; width: 100%; padding: 0 8px; box-sizing: border-box; } @media (min-width: 768px) { .range > label { font-size: var(--font-size-sm); } .range .noUi-horizontal .noUi-handle { top: -0.4375rem; right: -0.625rem; } } /* -------------------------------------------------------------------------- 11. Modal & overlays -------------------------------------------------------------------------- */ .modal__backdrop { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); z-index: 1000; display: flex; align-items: center; justify-content: center; } .modal__box { background: var(--color-surface); padding: 1rem; margin: 0 0.5rem; border-radius: var(--radius-sm); display: flex; flex-direction: column; gap: 0.5rem; width: 100%; max-width: 28rem; } .modal__title { font-size: var(--font-size-lg); font-weight: 700; color: var(--color-accent); } .modal__body { color: var(--color-text-muted); font-size: var(--font-size-sm); } .modal__actions { display: flex; gap: 1rem; justify-content: flex-end; } /* -------------------------------------------------------------------------- 12. Shared helpers & dividers -------------------------------------------------------------------------- */ .section-heading { display: flex; align-items: center; gap: 0.5rem; font-weight: 600; letter-spacing: -0.01em; color: var(--color-text-strong); } .section-heading::before { content: ""; width: 0.375rem; height: 0.375rem; border-radius: var(--radius-full); background: var(--color-primary); flex-shrink: 0; } .gradient-text { background: linear-gradient(to right, #059669, #0d9488); -webkit-background-clip: text; background-clip: text; color: transparent; } .divider { display: flex; align-items: center; gap: 0.75rem; margin: 1.25rem 0; } .divider__line { flex: 1; height: 1px; background: linear-gradient( to right, transparent, var(--color-border), var(--color-border) ); } .divider__line--end { background: linear-gradient( to right, var(--color-border), var(--color-border), transparent ); } .divider__label { flex-shrink: 0; font-size: 0.625rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-text-faint); } .pulse-dot { width: 0.5rem; height: 0.5rem; border-radius: var(--radius-full); background: var(--color-danger); animation: pulse 2s infinite; } .pulse-dot--amber { background: var(--color-warning); } @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } } .empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.75rem; padding: 4rem 1rem; text-align: center; } .empty-state__icon { font-size: 3rem; color: var(--color-border); margin-bottom: 0.5rem; } .empty-state__title { font-weight: 500; font-size: var(--font-size-base); color: var(--color-text-muted); } .empty-state__text { font-size: var(--font-size-sm); color: var(--color-text-faint); max-width: 28rem; } .icon-badge { display: flex; align-items: center; justify-content: center; border-radius: var(--radius-md); flex-shrink: 0; } .icon-badge--sm { width: 1.75rem; height: 1.75rem; font-size: var(--font-size-sm); } .icon-badge--md { width: 2.5rem; height: 2.5rem; font-size: var(--font-size-lg); } .icon-badge--lg { width: 3rem; height: 3rem; font-size: var(--font-size-xl); } .icon-badge--xl { width: 3.5rem; height: 3.5rem; font-size: var(--font-size-2xl); } .icon-badge--2xl { width: 4.5rem; height: 4.5rem; font-size: var(--font-size-3xl); } .icon-badge--primary { background: var(--color-success-soft); color: #059669; } .icon-badge--success { background: var(--color-success-soft); color: #047857; } .icon-badge--warning { background: var(--color-warning-soft); color: #b45309; } .icon-badge--dark { background: linear-gradient(to bottom right, var(--color-text-strong), #334155); color: var(--color-text-inverse); box-shadow: var(--shadow-sm); } .icon-badge--gradient { background: linear-gradient(to bottom right, var(--color-success), #14b8a6); color: #fff; box-shadow: 0 10px 15px -3px rgba(16, 185, 129, 0.3); } .icon-badge--amber { background: rgba(245, 158, 11, 0.1); color: #d97706; } .icon-badge--rose { background: rgba(244, 63, 94, 0.08); color: #f43f5e; } .icon-badge--white { background: rgba(255, 255, 255, 0.1); color: var(--color-text-inverse); outline: 1px solid rgba(255, 255, 255, 0.2); } /* -------------------------------------------------------------------------- 13. Page headers -------------------------------------------------------------------------- */ .page-header { display: flex; flex-direction: column; gap: 0.75rem; margin-bottom: 1.25rem; } .page-header__title { font-size: var(--font-size-2xl); font-weight: 700; letter-spacing: -0.01em; color: var(--color-text-strong); } .page-header__subtitle { color: var(--color-text-faint); font-size: var(--font-size-sm); } .page-header__meta { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; } .page-header--with-icon { flex-direction: row; align-items: center; gap: 1rem; } @media (min-width: 768px) { .page-header { flex-direction: row; align-items: flex-start; justify-content: space-between; margin-bottom: 1.5rem; } .page-header--with-icon { align-items: center; } .page-header__title { font-size: var(--font-size-3xl); } } /* Compact variant (scorer home) */ .page-header--compact .page-header__title { font-size: var(--font-size-lg); font-weight: 600; } @media (min-width: 768px) { .page-header--compact .page-header__title { font-size: var(--font-size-2xl); } }