/* ============================================================================ Helmer Design System — точный перенос из прототипа «Helmer (offline).html» (Claude Design, shadcn «молочная» тема). ЭТОТ файл = прототипа: токены (dark по умолчанию, .light — оверрайды) + база + keyframes + мобилка. Вся вёрстка экранов живёт в шаблонах ИНЛАЙН-стилями (как в прототипе); здесь дополнительно только hover/focus-утилиты (инлайном их не выразить) и состояния сайдбара. Источник истины — прототип, не «улучшать». БЕЗ эмодзи — только SVG line-иконки (жёсткое правило проекта). ========================================================================== */ @import url("/static/fonts/fonts.css"); /* --- Токены: тёмная по умолчанию ------------------------------------------ */ :root { --background: oklch(0.205 0 0); --foreground: oklch(0.905 0.008 83); --card: oklch(0.171 0 0); --card-foreground: oklch(0.905 0.008 83); --popover: oklch(0.205 0 0); --popover-foreground: oklch(0.905 0.008 83); --primary: oklch(0.885 0.015 88); --primary-foreground: oklch(0.205 0 0); --secondary: oklch(0.269 0 0); --secondary-foreground: oklch(0.905 0.008 83); --muted: oklch(0.259 0 0); --muted-foreground: oklch(0.705 0.006 83); --hover: oklch(0.243 0 0); --border: oklch(0.279 0 0); --border-strong: oklch(0.35 0 0); --input: oklch(0.255 0 0); --ring: oklch(0.62 0.008 85); --code-bg: oklch(0.188 0 0); --brand: oklch(0.72 0.12 250); --ok: oklch(0.74 0.15 158); --ok-fg: oklch(0.20 0 0); --warn: oklch(0.80 0.13 80); --danger: oklch(0.68 0.19 22); --radius: 16px; --radius-sm: 9px; --radius-lg: 20px; --font-sans: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --font-mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace; --shadow-sm: 0 1px 2px rgba(0,0,0,.5); --shadow: 0 1px 3px rgba(0,0,0,.45), 0 10px 30px -12px rgba(0,0,0,.6); --shadow-lg: 0 12px 50px -12px rgba(0,0,0,.7); --ease: cubic-bezier(.22,.61,.36,1); --ease-out: cubic-bezier(.16,1,.3,1); --dur: .22s; } /* --- Светлая тема: класс .light (или data-theme=light) на ---------- */ :root.light, :root[data-theme="light"] { --background: oklch(0.976 0.005 90); --foreground: oklch(0.215 0 0); --card: oklch(0.995 0.003 95); --card-foreground: oklch(0.215 0 0); --popover: oklch(1 0 0); --popover-foreground: oklch(0.215 0 0); --primary: oklch(0.24 0 0); --primary-foreground: oklch(0.972 0.006 90); --secondary: oklch(0.952 0.004 90); --secondary-foreground: oklch(0.24 0 0); --muted: oklch(0.952 0.004 90); --muted-foreground: oklch(0.53 0 0); --hover: oklch(0.948 0.004 90); --border: oklch(0.912 0.004 90); --border-strong: oklch(0.855 0.004 90); --input: oklch(0.93 0.004 90); --ring: oklch(0.72 0 0); --code-bg: oklch(0.963 0.004 90); --brand: oklch(0.55 0.17 255); --ok: oklch(0.56 0.13 158); --ok-fg: oklch(0.99 0 0); --warn: oklch(0.62 0.12 72); --danger: oklch(0.58 0.22 27); --shadow-sm: 0 1px 2px rgba(0,0,0,.05); --shadow: 0 1px 3px rgba(0,0,0,.06), 0 10px 30px -14px rgba(0,0,0,.12); --shadow-lg: 0 14px 50px -14px rgba(0,0,0,.18); } /* --- База ------------------------------------------------------------------ */ * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { background: var(--background); color: var(--foreground); font-family: var(--font-sans); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } ::selection { background: color-mix(in oklab, var(--primary) 30%, transparent); } a { color: var(--foreground); text-decoration: none; } a:hover { color: var(--foreground); } ::-webkit-scrollbar { width: 11px; height: 11px; } ::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 99px; border: 3px solid var(--background); } ::-webkit-scrollbar-track { background: transparent; } /* --- Keyframes (все hm-* из прототипа) ------------------------------------ */ @keyframes hm-fade { from { opacity: 0 } to { opacity: 1 } } @keyframes hm-up { from { opacity: 0; transform: translateY(14px) } to { opacity: 1; transform: translateY(0) } } @keyframes hm-up-sm { from { opacity: 0; transform: translateY(8px) } to { opacity: 1; transform: translateY(0) } } @keyframes hm-scale { from { opacity: 0; transform: scale(.94) } to { opacity: 1; transform: scale(1) } } @keyframes hm-pop { 0% { opacity: 0; transform: scale(.8) } 60% { transform: scale(1.06) } 100% { opacity: 1; transform: scale(1) } } @keyframes hm-pulse { 0% { box-shadow: 0 0 0 0 var(--pulse-c, rgba(200,160,60,.5)) } 70% { box-shadow: 0 0 0 9px transparent } 100% { box-shadow: 0 0 0 0 transparent } } @keyframes hm-spin { to { transform: rotate(360deg) } } @keyframes hm-shimmer { to { background-position: 220% 0 } } @keyframes hm-draw { to { stroke-dashoffset: 0 } } @keyframes hm-glow { 0%,100% { opacity: .5; transform: translate(-50%,0) scale(1) } 50% { opacity: .85; transform: translate(-50%,0) scale(1.12) } } @keyframes hm-bob { 0%,100% { transform: translateY(0) } 50% { transform: translateY(-4px) } } /* --- Кнопки: press=scale(.955), hover через утилиты ниже ------------------- */ button { transition: filter .2s var(--ease), background .2s var(--ease), color .2s var(--ease), box-shadow .2s var(--ease), border-color .2s var(--ease), transform .16s cubic-bezier(.34,1.45,.5,1); } button:active { transform: scale(.955); } button:focus-visible, a:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; } /* --- Hover/focus-утилиты (эквивалент style-hover/style-focus прототипа) ---- */ .hv-bg:hover { background: var(--hover) !important; } .hv-fg:hover { color: var(--foreground) !important; } .hv-fgbg:hover { color: var(--foreground) !important; background: var(--hover) !important; } .hv-br:hover { filter: brightness(1.08); } .hv-br6:hover { filter: brightness(1.06); } .hv-lift:hover { border-color: var(--border-strong) !important; box-shadow: var(--shadow-lg) !important; } .hv-danger:hover { background: color-mix(in oklab, var(--danger) 12%, transparent) !important; } .fc-ring:focus { border-color: var(--ring) !important; } tr.hv-bg:hover { background: var(--hover) !important; } /* --- Сайдбар: активный пункт / hover --------------------------------------- */ .side-item { background: transparent; color: var(--muted-foreground); } .side-item.is-active { background: var(--secondary); color: var(--foreground); } .side-item:not(.is-active):hover { background: var(--hover); color: var(--foreground); } /* --- Переключатель темы: иконка = текущая тема ----------------------------- */ .ico-sun { display: none; } .ico-moon { display: block; } :root.light .ico-sun, :root[data-theme="light"] .ico-sun { display: block; } :root.light .ico-moon, :root[data-theme="light"] .ico-moon { display: none; } /* --- Сообщения форм (в языке дизайна: монохром / ok / danger) -------------- */ .msg { display: flex; gap: 11px; align-items: flex-start; font-size: 12.5px; line-height: 1.5; background: color-mix(in oklab, var(--foreground) 6%, transparent); border: 1px solid var(--border-strong); color: var(--foreground); border-radius: 12px; padding: 13px 14px; margin-bottom: 16px; } .msg-ok { background: color-mix(in oklab, var(--ok) 10%, transparent); border-color: color-mix(in oklab, var(--ok) 30%, transparent); } .msg-danger { background: color-mix(in oklab, var(--danger) 6%, transparent); border-color: color-mix(in oklab, var(--danger) 32%, transparent); } /* --- Мобилка: сайдбар сворачивается в иконочную полосу 66px ---------------- */ @media (max-width: 780px) { #hm-side { width: 66px !important; } #hm-side [data-side-text] { display: none !important; } #hm-side nav a, #hm-side nav button { justify-content: center !important; } #hm-side [data-side-brand] { justify-content: center !important; padding-left: 0 !important; padding-right: 0 !important; } #hm-side [data-side-foot] { flex-direction: column !important; gap: 8px !important; padding: 12px 8px !important; } #hm-content { padding: 20px 15px 88px !important; } } @media (prefers-reduced-motion: reduce) { * { animation-duration: .001ms !important; transition-duration: .001ms !important; } }