/* ================================================================ SVES Portal — Design Tokens File: assets/css/design-tokens.css Все значения дизайн-системы вынесены в CSS custom properties. Этот файл подключается первым и не содержит ни одного селектора кроме :root. Все компоненты ссылаются только на токены отсюда. ================================================================ */ :root { /* ──────────────────────────────────────────────────────────── BACKGROUNDS Основной фон сайта — #3C1A47. Все производные — темнее (для поднятых поверхностей) или чуть светлее (hover). ──────────────────────────────────────────────────────────── */ --color-bg-base: #3C1A47; /* Фон всего сайта */ --color-bg-deep: #28102F; /* Самый тёмный: оверлеи, дропдауны */ --color-bg-card: #301440; /* Карточки, sidebar, panels */ --color-bg-card-hover: #3D1C4D; /* Hover-состояние карточки */ --color-bg-surface: #47234F; /* Слегка поднятые элементы */ --color-bg-overlay: rgba(28, 10, 38, 0.92); /* Модальный оверлей */ --color-bg-code: #1E0B28; /* Фон code block (тёмнее всего) */ --color-bg-input: #2B1138; /* Фон input полей */ --color-bg-input-focus:#311640; /* Focus state инпутов */ /* ──────────────────────────────────────────────────────────── ACCENT — BRAND COLOR #B6FF00 — основной акцентный цвет. Используется дозированно: заголовки, ссылки, активные состояния, иконки, кнопки CTA. ЗАПРЕЩЕНО заливать им большие площади фона. ──────────────────────────────────────────────────────────── */ --color-accent: #B6FF00; --color-accent-hover: #C9FF3D; /* Hover: чуть ярче */ --color-accent-active: #9EE000; /* Active/pressed: чуть темнее */ --color-accent-dim: #8ABF00; /* Dimmed: secondary акценты */ --color-accent-muted: rgba(182, 255, 0, 0.10); /* Фоновый тинт */ --color-accent-muted-md: rgba(182, 255, 0, 0.18); /* Hover тинт */ --color-accent-glow: rgba(182, 255, 0, 0.14); /* Свечение */ /* ──────────────────────────────────────────────────────────── TEXT Основной текст — светлый лавандовый (не белый: белый бьёт в глаза на тёмно-фиолетовом фоне). Акцентный текст #B6FF00 только для заголовков и ключевых элементов. ──────────────────────────────────────────────────────────── */ --color-text-primary: #EDE8F5; /* Основной текст статей */ --color-text-secondary: #A89ABB; /* Мета, подписи, даты */ --color-text-muted: #6B5A7A; /* Disabled, placeholder */ --color-text-accent: #B6FF00; /* Заголовки, ссылки */ --color-text-accent-dim:#8FCC00; /* Ссылки visited / dimmed */ --color-text-inverse: #1A0929; /* Тёмный текст на светлом фоне */ --color-text-code: #D5C8EA; /* Инлайн-код */ --color-text-heading: #F0EAFF; /* H2-H4 в теле статьи */ /* ──────────────────────────────────────────────────────────── BORDERS Очень тонкие, полупрозрачные. Не должны доминировать визуально. ──────────────────────────────────────────────────────────── */ --color-border: rgba(164, 110, 200, 0.18); --color-border-strong: rgba(164, 110, 200, 0.35); --color-border-accent: rgba(182, 255, 0, 0.30); --color-border-focus: rgba(182, 255, 0, 0.65); --color-border-code: rgba(164, 110, 200, 0.25); /* ──────────────────────────────────────────────────────────── SEMANTIC — для content blocks Не используем стандартный синий/зелёный/красный. Все цвета адаптированы под фиолетовую палитру. ──────────────────────────────────────────────────────────── */ /* TIP — бирюзовый (технический, профессиональный) */ --color-tip: #00CBA8; --color-tip-border: rgba(0, 203, 168, 0.35); --color-tip-bg: rgba(0, 203, 168, 0.08); /* WARNING — янтарный */ --color-warn: #F0A830; --color-warn-border: rgba(240, 168, 48, 0.35); --color-warn-bg: rgba(240, 168, 48, 0.08); /* IMPORTANT / DANGER — розово-красный */ --color-danger: #FF4E6A; --color-danger-border: rgba(255, 78, 106, 0.35); --color-danger-bg: rgba(255, 78, 106, 0.08); /* NOTE — нейтральный фиолетовый */ --color-note-border: rgba(164, 110, 200, 0.30); --color-note-bg: rgba(164, 110, 200, 0.08); /* PRO — акцентный, такой же как brand */ --color-pro: #B6FF00; --color-pro-border: rgba(182, 255, 0, 0.30); --color-pro-bg: rgba(182, 255, 0, 0.07); /* ──────────────────────────────────────────────────────────── DIFFICULTY BADGES ──────────────────────────────────────────────────────────── */ --color-beginner: #00CBA8; --color-intermediate: #F0A830; --color-advanced: #B6FF00; /* ──────────────────────────────────────────────────────────── TYPOGRAPHY: FONTS Оба шрифта — self-hosted WOFF2. Никаких запросов к Google. Inter Variable — один файл для всех начертаний. ──────────────────────────────────────────────────────────── */ --font-sans: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-mono: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', 'Consolas', monospace; /* ──────────────────────────────────────────────────────────── TYPOGRAPHY: SCALE Базовая единица: 1rem = 16px (браузерный default). fluid-hero использует clamp() для плавного масштабирования. ──────────────────────────────────────────────────────────── */ --text-2xs: 0.6875rem; /* 11px — badge micro text */ --text-xs: 0.75rem; /* 12px — meta, caption */ --text-sm: 0.875rem; /* 14px — secondary text, code */ --text-base: 1rem; /* 16px — body */ --text-md: 1.0625rem; /* 17px — slightly larger body */ --text-lg: 1.1875rem; /* 19px — lead text */ --text-xl: 1.375rem; /* 22px — small heading */ --text-2xl: 1.625rem; /* 26px — h3 */ --text-3xl: 2rem; /* 32px — h2 */ --text-4xl: 2.5rem; /* 40px — h1 */ --text-hero: clamp(2rem, 4vw + 0.5rem, 3.25rem); /* Hero fluid */ /* ──────────────────────────────────────────────────────────── TYPOGRAPHY: WEIGHT ──────────────────────────────────────────────────────────── */ --weight-light: 300; --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; --weight-extrabold: 800; /* ──────────────────────────────────────────────────────────── TYPOGRAPHY: LINE HEIGHT ──────────────────────────────────────────────────────────── */ --leading-none: 1; --leading-tight: 1.2; --leading-snug: 1.35; --leading-normal: 1.62; --leading-relaxed: 1.8; /* ──────────────────────────────────────────────────────────── TYPOGRAPHY: LETTER SPACING ──────────────────────────────────────────────────────────── */ --tracking-tight: -0.02em; --tracking-normal: 0; --tracking-wide: 0.04em; --tracking-wider: 0.08em; --tracking-caps: 0.1em; /* Для uppercase badge labels */ /* ──────────────────────────────────────────────────────────── SPACING SCALE Кратная четвёрке система. Используем --space-N везде, не хардкодим пиксели в компонентах. ──────────────────────────────────────────────────────────── */ --space-px: 1px; --space-0: 0; --space-1: 0.25rem; /* 4px */ --space-2: 0.5rem; /* 8px */ --space-3: 0.75rem; /* 12px */ --space-4: 1rem; /* 16px */ --space-5: 1.25rem; /* 20px */ --space-6: 1.5rem; /* 24px */ --space-7: 1.75rem; /* 28px */ --space-8: 2rem; /* 32px */ --space-10: 2.5rem; /* 40px */ --space-12: 3rem; /* 48px */ --space-14: 3.5rem; /* 56px */ --space-16: 4rem; /* 64px */ --space-20: 5rem; /* 80px */ --space-24: 6rem; /* 96px */ --space-32: 8rem; /* 128px */ /* ──────────────────────────────────────────────────────────── LAYOUT ──────────────────────────────────────────────────────────── */ --container-max: 1280px; /* Максимальная ширина сайта */ --container-wide: 1100px; /* Широкий layout (homepage, archive) */ --container-content: 800px; /* Ширина колонки статьи */ --container-narrow: 620px; /* Login, profile, узкие формы */ --container-padding: var(--space-6); /* Горизонтальный padding контейнера */ --header-height: 64px; /* Desktop */ --header-height-mob: 56px; /* Mobile */ /* ──────────────────────────────────────────────────────────── BORDER RADIUS ──────────────────────────────────────────────────────────── */ --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 16px; --radius-2xl: 24px; --radius-pill: 9999px; /* ──────────────────────────────────────────────────────────── SHADOWS & GLOWS Box-shadow для карточек. Glow применяем дозированно — только на hover и активных состояниях. ──────────────────────────────────────────────────────────── */ --shadow-xs: 0 1px 3px rgba(0, 0, 0, 0.30); --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.35); --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.40); --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.45); --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.50); --glow-accent: 0 0 18px rgba(182, 255, 0, 0.13); --glow-accent-md: 0 0 28px rgba(182, 255, 0, 0.20); --glow-accent-lg: 0 0 44px rgba(182, 255, 0, 0.28); --glow-tip: 0 0 20px rgba(0, 203, 168, 0.18); /* ──────────────────────────────────────────────────────────── TRANSITIONS fast: hover ui-elements | base: panels, modals | slow: page ──────────────────────────────────────────────────────────── */ --transition-fast: 140ms cubic-bezier(0.4, 0, 0.2, 1); --transition-base: 240ms cubic-bezier(0.4, 0, 0.2, 1); --transition-slow: 380ms cubic-bezier(0.4, 0, 0.2, 1); --transition-bounce: 400ms cubic-bezier(0.34, 1.56, 0.64, 1); /* ──────────────────────────────────────────────────────────── Z-INDEX Строгая иерархия. Ни один компонент не использует произвольные z-index значения — только эти переменные. ──────────────────────────────────────────────────────────── */ --z-base: 0; --z-raised: 10; --z-card: 20; --z-dropdown: 100; --z-sticky: 200; --z-header: 300; --z-overlay: 400; --z-modal: 500; --z-toast: 600; /* ──────────────────────────────────────────────────────────── GRID ──────────────────────────────────────────────────────────── */ --grid-cols: 12; --grid-gap: var(--space-6); --grid-gap-sm: var(--space-4); /* ──────────────────────────────────────────────────────────── CONTENT BLOCKS (visual indicators) Ширина левого border у content-blocks (tip, warning, etc.) ──────────────────────────────────────────────────────────── */ --block-border-width: 3px; --block-padding-x: var(--space-5); --block-padding-y: var(--space-4); --block-radius: 0 var(--radius-md) var(--radius-md) 0; /* ──────────────────────────────────────────────────────────── CODE BLOCKS ──────────────────────────────────────────────────────────── */ --code-font-size: 0.84rem; /* ~13.5px */ --code-line-height: 1.7; --code-padding-x: var(--space-5); --code-padding-y: var(--space-4); --code-header-height: 36px; --code-border-radius: var(--radius-lg); } /* ──────────────────────────────────────────────────────────────── REDUCED MOTION Отключаем все анимации для пользователей с prefers-reduced-motion. ──────────────────────────────────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { :root { --transition-fast: 0ms; --transition-base: 0ms; --transition-slow: 0ms; --transition-bounce: 0ms; } }