/* ============================================================ study.local — спільна тема (бренд UminaLab) Підключати ПІСЛЯ bootstrap.min.css: (у , до ) Світла / темна теми на CSS-токенах: - за замовчуванням світла; - якщо система у dark і користувач не вибирав — темна; - явний вибір (data-theme) має пріоритет, зберігається у localStorage. ============================================================ */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap'); /* ---------- ТОКЕНИ: світла тема (за замовчуванням) ---------- */ :root { --vf-accent: #c9f73d; /* лайм — головний акцент / CTA */ --vf-accent-ink:#0a140c; --vf-accent-h: #d6ff52; --vf-green-900: #08100b; --vf-green-800: #0d1710; --vf-green-700: #111f15; --vf-bg: #eef2ec; --vf-bg-glow: rgba(201,247,61,.10); --vf-surface: #ffffff; --vf-surface-2: #f4f6f3; --vf-text: #16201a; --vf-muted: #6b7a6f; --vf-line: #dde5dc; --vf-input-bg: #ffffff; --vf-shadow: 0 1px 2px rgba(8,16,11,.05), 0 8px 24px rgba(8,16,11,.06); --vf-link: #0f7a44; --vf-link-h: #0b5e34; --vf-radius: 16px; } /* ---------- ТОКЕНИ: темна тема ---------- */ :root[data-theme="dark"], .vf-dark { --vf-bg: #08100b; --vf-bg-glow: rgba(201,247,61,.08); --vf-surface: #0d1710; --vf-surface-2: #111f15; --vf-text: #f1f7ed; --vf-muted: #94a292; --vf-line: rgba(226,245,218,.14); --vf-input-bg: #0c150f; --vf-shadow: 0 1px 2px rgba(0,0,0,.45), 0 14px 34px rgba(0,0,0,.40); --vf-link: #8be0aa; --vf-link-h: #aef0c4; } /* системна темна, якщо користувач не зробив явний вибір */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --vf-bg: #08100b; --vf-bg-glow: rgba(201,247,61,.08); --vf-surface: #0d1710; --vf-surface-2: #111f15; --vf-text: #f1f7ed; --vf-muted: #94a292; --vf-line: rgba(226,245,218,.14); --vf-input-bg: #0c150f; --vf-shadow: 0 1px 2px rgba(0,0,0,.45), 0 14px 34px rgba(0,0,0,.40); --vf-link: #8be0aa; --vf-link-h: #aef0c4; } } /* прокидаємо у Bootstrap-токени */ :root { --bs-body-bg: var(--vf-bg); --bs-body-color: var(--vf-text); --bs-border-color: var(--vf-line); --bs-border-radius: var(--vf-radius); --bs-link-color: var(--vf-link); --bs-link-hover-color: var(--vf-link-h); --bs-emphasis-color: var(--vf-text); --bs-secondary-color: var(--vf-muted); } html { background: var(--vf-bg); } body, body.bg-light { background: radial-gradient(60rem 30rem at 95% -10%, var(--vf-bg-glow), transparent 60%), var(--vf-bg) !important; color: var(--vf-text); font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif; letter-spacing: -0.01em; transition: background-color .2s ease, color .2s ease; } .text-muted { color: var(--vf-muted) !important; } .form-text { color: var(--vf-muted); } /* ---------- Навігація ---------- */ .navbar.navbar-dark.bg-dark { background: linear-gradient(110deg, var(--vf-green-900), var(--vf-green-700)) !important; border-bottom: 1px solid rgba(201,247,61,.18); box-shadow: 0 6px 24px rgba(8,16,11,.18); } .navbar .navbar-brand { font-weight: 800; letter-spacing: -0.02em; color: #f1f7ed !important; display: inline-flex; align-items: center; gap: .5rem; } .navbar .navbar-brand::before { content: ""; width: 10px; height: 10px; border-radius: 3px; background: var(--vf-accent); box-shadow: 0 0 0 4px rgba(201,247,61,.18); } /* ---------- Картки ---------- */ .card { background: var(--vf-surface); border: 1px solid var(--vf-line); border-radius: var(--vf-radius); box-shadow: var(--vf-shadow); color: var(--vf-text); } .card .card-title { font-weight: 700; letter-spacing: -0.02em; } .stat-card { border: 1px solid var(--vf-line) !important; box-shadow: var(--vf-shadow) !important; } .stat-card .num { color: var(--vf-text); } /* службові поверхні */ .bg-white { background: var(--vf-surface) !important; } .border { border-color: var(--vf-line) !important; } .vf-soft { background: var(--vf-surface-2); border: 1px solid var(--vf-line); border-radius: 12px; } /* ---------- Кнопки ---------- */ .btn { border-radius: 12px; font-weight: 600; padding: .5rem 1rem; } .btn-sm { border-radius: 10px; padding: .35rem .7rem; } .btn-primary { background: var(--vf-accent); border-color: var(--vf-accent); color: var(--vf-accent-ink); } .btn-primary:hover, .btn-primary:focus { background: var(--vf-accent-h); border-color: var(--vf-accent-h); color: var(--vf-accent-ink); box-shadow: 0 6px 18px rgba(201,247,61,.35); } .btn-outline-primary { color: var(--vf-link); border-color: color-mix(in srgb, var(--vf-link) 45%, transparent); } .btn-outline-primary:hover { background: var(--vf-green-800); border-color: var(--vf-green-800); color: #f1f7ed; } .btn-outline-light:hover { color: var(--vf-green-900); } .btn-outline-secondary { border-radius: 12px; color: var(--vf-muted); border-color: var(--vf-line); } .btn-outline-secondary:hover { background: var(--vf-surface-2); color: var(--vf-text); } .btn-outline-danger { border-radius: 12px; } /* ---------- Вкладки ---------- */ .nav-tabs { border-bottom: 1px solid var(--vf-line); gap: .25rem; } .nav-tabs .nav-link { border: 0; color: var(--vf-muted); font-weight: 600; border-radius: 10px 10px 0 0; padding: .6rem 1rem; } .nav-tabs .nav-link:hover { color: var(--vf-text); background: color-mix(in srgb, var(--vf-text) 5%, transparent); } .nav-tabs .nav-link.active { color: var(--vf-text); background: transparent; box-shadow: inset 0 -3px 0 var(--vf-accent); } /* ---------- Таблиці ---------- */ .table { --bs-table-color: var(--vf-text); --bs-table-bg: transparent; color: var(--vf-text); } .table > thead th { text-transform: uppercase; font-size: .72rem; letter-spacing: .04em; color: var(--vf-muted); border-bottom: 1px solid var(--vf-line); font-weight: 700; } .table > :not(caption) > * > * { border-bottom-color: var(--vf-line); } .table-hover > tbody > tr:hover > * { background: rgba(201,247,61,.07); color: var(--vf-text); } /* ---------- Форми ---------- */ .form-control, .form-select { border-radius: 12px; border-color: var(--vf-line); background: var(--vf-input-bg); color: var(--vf-text); padding: .55rem .8rem; } .form-control::placeholder { color: color-mix(in srgb, var(--vf-muted) 80%, transparent); } .form-control:focus, .form-select:focus { border-color: var(--vf-accent); background: var(--vf-input-bg); color: var(--vf-text); box-shadow: 0 0 0 .2rem rgba(201,247,61,.30); } .form-control-sm, .form-select-sm { border-radius: 10px; } .form-label { font-weight: 600; color: var(--vf-text); } .form-check-input { background-color: var(--vf-input-bg); border-color: var(--vf-line); } .form-check-input:checked { background-color: var(--vf-accent); border-color: var(--vf-accent); } /* ---------- Прогрес ---------- */ .progress { background: color-mix(in srgb, var(--vf-text) 10%, transparent); border-radius: 999px; } .progress-bar { background: linear-gradient(90deg, #1f9d57, var(--vf-accent)); } /* ---------- Бейджі / алерти ---------- */ .badge.bg-primary { background: var(--vf-green-800) !important; color: var(--vf-accent); } .badge.bg-secondary { background: var(--vf-surface-2) !important; color: var(--vf-muted); border: 1px solid var(--vf-line); } .vf-badge { display: inline-flex; align-items: center; gap: .35rem; font-size: .78rem; font-weight: 600; padding: .2rem .6rem; border-radius: 999px; background: var(--vf-surface-2); border: 1px solid var(--vf-line); color: var(--vf-muted); } .alert { border-radius: 14px; border: 1px solid transparent; } .alert-success { background: color-mix(in srgb, #1f9d57 16%, var(--vf-surface)); border-color: color-mix(in srgb, #1f9d57 35%, transparent); color: var(--vf-text); } .alert-danger { background: color-mix(in srgb, #e2563d 16%, var(--vf-surface)); border-color: color-mix(in srgb, #e2563d 35%, transparent); color: var(--vf-text); } .alert-warning { background: color-mix(in srgb, #d98a1f 18%, var(--vf-surface)); border-color: color-mix(in srgb, #d98a1f 38%, transparent); color: var(--vf-text); } .alert-link { color: var(--vf-link); } code { color: var(--vf-link); background: color-mix(in srgb, var(--vf-link) 14%, transparent); padding: .1em .35em; border-radius: 6px; } /* ---------- Перемикач теми (плаваюча кнопка, додає theme.js) ---------- */ .vf-theme-toggle { position: fixed; right: 18px; bottom: 18px; z-index: 1080; width: 46px; height: 46px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 1.15rem; cursor: pointer; background: var(--vf-surface); color: var(--vf-text); border: 1px solid var(--vf-line); box-shadow: var(--vf-shadow); transition: transform .15s ease, box-shadow .15s ease, background .2s ease; } .vf-theme-toggle:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(8,16,11,.22); } .vf-theme-toggle:active { transform: translateY(0); } .vf-theme-toggle:focus-visible { outline: 2px solid var(--vf-accent); outline-offset: 3px; } /* ---------- дрібні утиліти флоу ---------- */ .vf-step { display: inline-flex; align-items: center; gap: .5rem; font-size: .82rem; font-weight: 600; color: var(--vf-muted); } .vf-step .dot { width: 22px; height: 22px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: .75rem; background: var(--vf-surface-2); border: 1px solid var(--vf-line); } .vf-step.is-active { color: var(--vf-text); } .vf-step.is-active .dot { background: var(--vf-accent); color: var(--vf-accent-ink); border-color: var(--vf-accent); } .vf-step-sep { flex: 0 0 28px; height: 1px; background: var(--vf-line); }