/* ═══════════════════════════════════════════════════════════════════════════ MCschool — design-system.css Foundation for the full redesign. Light, friendly edtech, violet accent. SCOPING CONTRACT (important): - TOKENS live on :root and are GLOBAL. Their names (--brand, --text, …) do not collide with the legacy main.css tokens (--c-*), so they are safe to ship now. - COMPONENTS are all scoped under `.ds`. The legacy main.css already defines .btn / .card / .empty-state etc.; scoping under `.ds` guarantees this file changes NOTHING on existing screens. To adopt the new system on a screen, add class="ds" to a wrapper (or ) — done per role in later sessions. - @font-face is global (harmless: it only registers the font, applying it only inside `.ds`, where body still falls back to system fonts elsewhere). Font: Manrope, bundled locally in /static/fonts (variable woff2, weights 400–700). Icons: /static/icons/tabler-sprite.svg (Tabler, MIT), used via . ═══════════════════════════════════════════════════════════════════════════ */ /* ── Font: Manrope (local, variable, weight axis 400–700) ─────────────────── */ @font-face { font-family: 'Manrope'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('../fonts/Manrope-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Manrope'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('../fonts/Manrope-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Manrope'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('../fonts/Manrope-cyrillic.woff2') format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } @font-face { font-family: 'Manrope'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('../fonts/Manrope-cyrillic-ext.woff2') format('woff2'); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; } /* ── Design tokens ────────────────────────────────────────────────────────── */ :root { /* Accent */ --brand: #6C5CE7; --brand-hover: #5a4bd1; --brand-tint: rgba(108, 92, 231, 0.12); --brand-tint-soft: rgba(108, 92, 231, 0.06); /* Text */ --text: #1f2430; --text-secondary: #5b6170; --text-tertiary: #9aa0ad; /* Surfaces */ --bg: #ffffff; --bg-secondary: #f6f7f9; --bg-tertiary: #eef0f3; /* Borders */ --border: #e4e7ec; --border-strong: #d0d4dc; /* Semantic */ --success-text: #1a7f4b; --success-bg: #e6f4ec; --danger-text: #c0392b; --danger-bg: #fdeceb; --warning-text: #b06f00; --warning-bg: #fef3e0; /* Radii */ --r-sm: 8px; --r-md: 10px; --r-lg: 14px; --r-xl: 20px; --r-pill: 999px; /* Shadows — delicate, not harsh */ --shadow-sm: 0 1px 2px rgba(31, 36, 48, 0.04), 0 2px 8px rgba(31, 36, 48, 0.06); --shadow-pop: 0 4px 12px rgba(31, 36, 48, 0.08), 0 12px 32px rgba(31, 36, 48, 0.12); /* Typography */ --font-sans: 'Manrope', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; --fs-base: 14px; /* Layout */ --ds-sidebar-w: 248px; } /* ═══════════════════════════════════════════════════════════════════════════ Components — all scoped under `.ds` ═══════════════════════════════════════════════════════════════════════════ */ .ds { font-family: var(--font-sans); font-size: var(--fs-base); line-height: 1.55; color: var(--text); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } .ds *, .ds *::before, .ds *::after { box-sizing: border-box; } /* ── Typography ───────────────────────────────────────────────────────────── */ .ds h1, .ds h2, .ds h3, .ds h4 { color: var(--text); font-weight: 600; line-height: 1.25; margin: 0 0 0.5em; letter-spacing: -0.01em; } .ds h1 { font-size: 1.75rem; font-weight: 600; } .ds h2 { font-size: 1.375rem; } .ds h3 { font-size: 1.125rem; } .ds h4 { font-size: 1rem; font-weight: 500; } .ds p { margin: 0 0 0.75em; } .ds a { color: var(--brand); text-decoration: none; } .ds a:hover { text-decoration: underline; } .ds .text-secondary { color: var(--text-secondary); } .ds .text-muted { color: var(--text-tertiary); } .ds .text-sm { font-size: 0.8125rem; } /* ── Icons ────────────────────────────────────────────────────────────────── */ .ds .icon { width: 1.25em; height: 1.25em; display: inline-block; vertical-align: -0.22em; flex-shrink: 0; } .ds .icon-lg { width: 1.5em; height: 1.5em; } /* ── Buttons ──────────────────────────────────────────────────────────────── */ .ds .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.45rem; padding: 0.6rem 1.1rem; border-radius: var(--r-md); font-family: inherit; font-size: 0.875rem; font-weight: 600; line-height: 1; border: 1px solid transparent; cursor: pointer; white-space: nowrap; text-decoration: none; transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, color 0.15s ease; } .ds .btn:hover { text-decoration: none; } .ds .btn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--brand-tint); } .ds .btn:disabled, .ds .btn[disabled] { opacity: 0.5; cursor: not-allowed; pointer-events: none; } .ds .btn-primary { background: var(--brand); color: #fff; } .ds .btn-primary:hover { background: var(--brand-hover); } .ds .btn-secondary { background: var(--bg); color: var(--text); border-color: var(--border-strong); } .ds .btn-secondary:hover { background: var(--bg-secondary); border-color: var(--text-tertiary); } .ds .btn-ghost { background: transparent; color: var(--text-secondary); } .ds .btn-ghost:hover { background: var(--bg-secondary); color: var(--text); } .ds .btn-sm { padding: 0.4rem 0.75rem; font-size: 0.8125rem; gap: 0.3rem; } /* ── Cards ────────────────────────────────────────────────────────────────── */ .ds .card { background: var(--bg); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 1.25rem 1.5rem; } .ds .card-shadow { box-shadow: var(--shadow-sm); border-color: transparent; } .ds .card-title { font-size: 1rem; font-weight: 600; margin: 0 0 0.85rem; } /* ── Pills (status chips) ─────────────────────────────────────────────────── */ .ds .pill { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.2rem 0.65rem; border-radius: var(--r-pill); font-size: 0.75rem; font-weight: 600; line-height: 1.4; white-space: nowrap; } .ds .pill .icon { width: 0.95em; height: 0.95em; } .ds .pill-success { background: var(--success-bg); color: var(--success-text); } .ds .pill-danger { background: var(--danger-bg); color: var(--danger-text); } .ds .pill-warning { background: var(--warning-bg); color: var(--warning-text); } .ds .pill-brand { background: var(--brand-tint); color: var(--brand); } /* ── Tables ───────────────────────────────────────────────────────────────── */ .ds .table-wrap { border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; /* clip corners of the table to the rounded wrap */ } .ds .table { width: 100%; border-collapse: collapse; font-size: 0.875rem; background: var(--bg); } .ds .table thead th { background: var(--bg-secondary); color: var(--text-secondary); text-align: left; font-weight: 600; font-size: 0.75rem; letter-spacing: 0.03em; text-transform: uppercase; padding: 0.7rem 1rem; white-space: nowrap; } .ds .table tbody td { padding: 0.75rem 1rem; border-top: 1px solid var(--border); vertical-align: middle; } .ds .table tbody tr:hover td { background: var(--brand-tint-soft); } .ds .table .col-r { text-align: right; font-variant-numeric: tabular-nums; } /* ── Sidebar + navigation ─────────────────────────────────────────────────── */ .ds .sidebar { width: var(--ds-sidebar-w); background: var(--bg); border-right: 1px solid var(--border); display: flex; flex-direction: column; padding: 1rem 0.75rem; gap: 0.25rem; } .ds .sidebar-brand { display: flex; align-items: center; gap: 0.6rem; padding: 0.5rem 0.75rem 1rem; font-weight: 700; font-size: 1.05rem; letter-spacing: -0.01em; } .ds .sidebar-logo { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: var(--r-md); background: var(--brand); color: #fff; font-size: 0.8rem; font-weight: 700; } .ds .nav-group-label { font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-tertiary); padding: 0.85rem 0.75rem 0.35rem; } .ds .nav-item { display: flex; align-items: center; gap: 0.65rem; padding: 0.55rem 0.75rem; border-radius: var(--r-md); font-size: 0.875rem; font-weight: 500; color: var(--text-secondary); text-decoration: none; transition: background 0.12s ease, color 0.12s ease; } .ds .nav-item .icon { color: var(--text-tertiary); transition: color 0.12s ease; } .ds .nav-item:hover { background: var(--bg-secondary); color: var(--text); text-decoration: none; } .ds .nav-item:hover .icon { color: var(--text-secondary); } .ds .nav-item.active { background: var(--brand-tint); color: var(--brand); font-weight: 600; } .ds .nav-item.active .icon { color: var(--brand); } /* ── Forms ────────────────────────────────────────────────────────────────── */ .ds .form-field { display: flex; flex-direction: column; gap: 0.35rem; margin-bottom: 1rem; } .ds .form-field > label { font-size: 0.8125rem; font-weight: 600; color: var(--text-secondary); } .ds .input, .ds .select { width: 100%; padding: 0.6rem 0.75rem; font-family: inherit; font-size: 0.875rem; color: var(--text); background: var(--bg); border: 1px solid var(--border-strong); border-radius: var(--r-md); transition: border-color 0.15s ease, box-shadow 0.15s ease; appearance: none; } .ds .input::placeholder { color: var(--text-tertiary); } .ds .select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%239aa0ad' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6l6 -6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 0.65rem center; padding-right: 2.25rem; } .ds .input:focus, .ds .select:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-tint); } .ds .field-hint { font-size: 0.75rem; color: var(--text-tertiary); } /* Native Django-rendered widgets inside a .form-field inherit the .input look, so forms styled with {{ form.field }} match without per-widget classes. */ .ds .form-field input:not([type="checkbox"]):not([type="radio"]), .ds .form-field select, .ds .form-field textarea { width: 100%; padding: 0.6rem 0.75rem; font-family: inherit; font-size: 0.875rem; color: var(--text); background: var(--bg); border: 1px solid var(--border-strong); border-radius: var(--r-md); transition: border-color 0.15s ease, box-shadow 0.15s ease; } .ds .form-field select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%239aa0ad' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6l6 -6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 0.65rem center; padding-right: 2.25rem; } .ds .form-field input:focus, .ds .form-field select:focus, .ds .form-field textarea:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-tint); } .ds .form-field .helptext { font-size: 0.75rem; color: var(--text-tertiary); } .ds .errorlist { list-style: none; margin: 0.15rem 0 0; padding: 0; color: var(--danger-text); font-size: 0.75rem; } /* ── Empty state ──────────────────────────────────────────────────────────── */ .ds .empty-state { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0.5rem; padding: 2.75rem 1.5rem; background: var(--bg-secondary); border: 1px dashed var(--border-strong); border-radius: var(--r-lg); } .ds .empty-state__icon { display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: var(--r-pill); background: var(--brand-tint); color: var(--brand); margin-bottom: 0.25rem; } .ds .empty-state__icon .icon { width: 28px; height: 28px; } .ds .empty-state__title { font-size: 1rem; font-weight: 600; } .ds .empty-state__text { color: var(--text-secondary); max-width: 32ch; margin: 0; } .ds .empty-state .btn { margin-top: 0.5rem; } /* ── Attention block ("потребує уваги") ──────────────────────────────────── */ .ds .attention-block { background: var(--brand-tint-soft); border: 1px solid var(--brand); border-radius: var(--r-lg); padding: 1.1rem 1.25rem; } .ds .attention-block__head { display: flex; align-items: center; gap: 0.5rem; font-weight: 600; color: var(--brand); margin-bottom: 0.85rem; } .ds .attention-block__list { display: flex; flex-direction: column; gap: 0.5rem; } .ds .attention-row { display: flex; align-items: center; gap: 0.85rem; background: var(--bg); border: 1px solid var(--border); border-radius: var(--r-md); padding: 0.7rem 0.9rem; } .ds .attention-row__main { flex: 1; min-width: 0; } .ds .attention-row__title { font-weight: 600; font-size: 0.875rem; } .ds .attention-row__sub { font-size: 0.8125rem; color: var(--text-secondary); } /* ── App shell (manager) ────────────────────────────────────────────────────── Layout plumbing only — positions the sidebar component + scrollable main. No new component visuals or colours; mirrors templates/design/showcase.html. */ .ds-app { display: flex; min-height: 100vh; background: var(--bg-secondary); } .ds-app > .sidebar { position: sticky; top: 0; height: 100vh; overflow-y: auto; flex-shrink: 0; } .ds-main { flex: 1; min-width: 0; padding: 2rem 2.5rem; } @media (max-width: 720px) { .ds-app { flex-direction: column; } .ds-app > .sidebar { width: 100%; height: auto; position: static; } .ds-main { padding: 1.25rem 1rem; } } /* Small layout helpers reused across manager screens (no new visuals). */ .ds .ds-pagehead { display: flex; align-items: center; gap: 0.85rem; flex-wrap: wrap; margin-bottom: 1.5rem; } .ds .ds-pagehead h1 { margin: 0; } .ds .ds-pagehead .ds-spacer { flex: 1; } .ds .ds-monthnav { display: inline-flex; align-items: center; gap: 0.5rem; margin-bottom: 1.5rem; } .ds .ds-monthnav__label { font-weight: 600; min-width: 9rem; text-align: center; } .ds .ds-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 1rem; margin-bottom: 1.75rem; } .ds .ds-stat__label { font-size: 0.8125rem; color: var(--text-secondary); margin-bottom: 0.35rem; } .ds .ds-stat__value { font-size: 1.5rem; font-weight: 700; letter-spacing: -0.01em; } .ds .ds-stat__value.is-danger { color: var(--danger-text); } .ds .ds-stat__value.is-success { color: var(--success-text); } .ds .ds-section-title { font-size: 1.125rem; font-weight: 600; margin: 1.75rem 0 0.85rem; } .ds .ds-actions { display: flex; gap: 0.6rem; flex-wrap: wrap; } .ds .ds-form-row { display: flex; gap: 1rem; flex-wrap: wrap; align-items: flex-start; } .ds .ds-form-row > .form-field { flex: 1 1 12rem; } /* ── Finance dashboard (manager) — layout only, reuses existing tokens ──────── */ .ds .fin-page { max-width: 900px; } .ds .fin-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.85rem; margin-bottom: 1.75rem; } .ds .fin-kpi { background: var(--bg-secondary); border: 1px solid var(--border); border-radius: var(--r-md); padding: 0.85rem 1rem; } .ds .fin-kpi .ds-stat__value { font-size: 1.35rem; } .ds .fin-kpi--profit { background: var(--brand-tint); border: 1.5px solid var(--brand); } .ds .fin-kpi--profit .ds-stat__label { color: var(--brand); font-weight: 600; } .ds .fin-kpi--profit .ds-stat__value { font-size: 1.6rem; font-weight: 800; } .ds .fin-split { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.3fr); gap: 1rem; align-items: start; margin-bottom: 1.25rem; } .ds .fin-chart-box { position: relative; height: 190px; } @media (max-width: 760px) { .ds .fin-kpis { grid-template-columns: repeat(2, 1fr); } .ds .fin-split { grid-template-columns: 1fr; } } /* ── Alert (block-level message) ────────────────────────────────────────────── Reusable banner on the semantic tokens. Used for the login error and any page-level notice. Visual only — no behaviour. */ .ds .alert { display: flex; align-items: flex-start; gap: 0.55rem; padding: 0.7rem 0.9rem; border-radius: var(--r-md); font-size: 0.8125rem; font-weight: 500; line-height: 1.45; margin-bottom: 1rem; } .ds .alert .icon { flex-shrink: 0; margin-top: 0.05rem; } .ds .alert ul { margin: 0; padding: 0; list-style: none; } .ds .alert-danger { background: var(--danger-bg); color: var(--danger-text); } .ds .alert-success { background: var(--success-bg); color: var(--success-text); } .ds .alert-warning { background: var(--warning-bg); color: var(--warning-text); } /* ── Guest shell (login / error pages for unauthenticated visitors) ─────────── Layout plumbing only — centers a single card on the light background. Mirrors the .ds-app convention (top-level, not scoped under .ds). */ .ds-guest { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 100vh; background: var(--bg-secondary); padding: 2rem 1rem; } .ds-guest__main { width: 100%; max-width: 380px; } .ds .ds-guest__brand { display: flex; align-items: center; gap: 0.6rem; justify-content: center; font-weight: 700; font-size: 1.15rem; letter-spacing: -0.01em; margin-bottom: 1.5rem; } /* Guest pages: center the switcher above the card. */ .ds-guest__lang { display: flex; justify-content: center; margin-bottom: 1.25rem; } /* ── Language switcher ──────────────────────────────────────────────────────── Compact segmented control (РУ / УК / PL). Lives in every role shell + guest; always inside a `.ds` container. */ .ds .lang-switch { display: inline-flex; gap: 2px; padding: 2px; margin: 0; background: var(--bg-secondary); border: 1px solid var(--border); border-radius: var(--r-pill); } .ds .lang-switch__btn { appearance: none; border: 0; background: transparent; cursor: pointer; padding: 0.25rem 0.55rem; border-radius: var(--r-pill); font: inherit; font-size: 0.75rem; font-weight: 600; line-height: 1; color: var(--text-secondary); transition: background 0.15s ease, color 0.15s ease; } .ds .lang-switch__btn:hover { color: var(--text); background: var(--bg); } .ds .lang-switch__btn.is-active { color: #fff; background: var(--brand); } .ds .lang-switch__btn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--brand-tint); } /* Manager sidebar: give the switcher a little breathing room above logout. */ .ds .sidebar .lang-switch { margin: 0.25rem 0.75rem 0.5rem; }