/* ============================================================ ПРОСТОР — Design System: Colors & Type Лаборатория ПРОСТОР / Институт энергетических систем (ИЭС) ------------------------------------------------------------ Brand palette is intentionally minimal: orange + charcoal + white + grey. Functional/semantic colors (status greens, ambers, reds, blues) are ADDED here for monitoring UIs — they are not in the printed brandbook but are required for SCADA / analytics surfaces. Flagged as additions, kept harmonious. ============================================================ */ /* ---- Fonts ---- Brandbook corporate font: Bahnschrift (Windows/commercial). Logobook body font: ArtegraSans (commercial). Neither ships free on the web → SUBSTITUTED on Google Fonts: • Display / headings → Oswald (technical, DIN-like, condensed, full Cyrillic) • Body / UI → Manrope (clean geometric sans, full Cyrillic) Swap these @font-face / vars for the licensed originals when available. */ @import url('https://fonts.googleapis.com/css2?family=Oswald:wght@300;400;500;600;700&family=Manrope:wght@400;500;600;700;800&display=swap'); :root { /* ---------- BRAND CORE ---------- */ --prostor-orange: #F75F36; /* primary. logobook RGB 247 95 54 / Pantone 1655C */ --prostor-orange-print: #EB5E33; /* brandbook print value (CMYK 0 76 89 0) */ --prostor-orange-600: #E04E27; /* hover / pressed */ --prostor-orange-300: #FB9476; /* tints */ --prostor-orange-100: #FFE3D9; --prostor-charcoal: #2B2A29; /* logobook black RGB 43 42 41 — primary dark */ --prostor-black: #000000; /* brandbook absolute black */ --prostor-white: #FEFEFE; /* logobook white */ --prostor-grey: #B4B4B4; /* brandbook additional grey */ /* ---------- NEUTRAL RAMP (charcoal-derived) ---------- */ --n-0: #FFFFFF; --n-50: #F6F6F5; --n-100: #ECEBEA; --n-200: #D8D7D5; --n-300: #B4B4B4; --n-400: #8C8B89; --n-500: #6A6967; --n-600: #4B4A48; --n-700: #363533; --n-800: #2B2A29; --n-900: #1C1B1A; --n-950: #121211; /* ---------- SEMANTIC / STATUS (functional addition) ---------- */ --ok: #3DBE78; --ok-bg: #163026; --warn: #E8A33D; --warn-bg: #332710; --danger: #E5484D; --danger-bg: #331417; --info: #4A90D9; --info-bg: #122436; /* ================================================================= LIGHT THEME (presentation slides, marketing site) ================================================================= */ --bg-1: var(--n-0); /* page */ --bg-2: var(--n-50); /* sunken / subtle fill */ --surface:var(--n-0); /* cards */ --border: var(--n-200); --border-strong: var(--n-300); --fg-1: var(--n-800); /* primary text */ --fg-2: var(--n-500); /* secondary text */ --fg-3: var(--n-400); /* muted / captions */ --accent: var(--prostor-orange); --accent-fg: #FFFFFF; /* ---------- TYPE FAMILIES ---------- */ --font-display: 'Oswald', 'Bahnschrift', 'DIN Alternate', sans-serif; --font-body: 'Manrope', 'ArtegraSans', 'Segoe UI', sans-serif; --font-mono: 'JetBrains Mono', 'SF Mono', ui-monospace, monospace; /* ---------- SPACING (8pt-ish) ---------- */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px; --sp-9: 96px; /* ---------- RADII (brand reads sharp/squared) ---------- */ --r-0: 0px; /* logo mark, hard edges */ --r-1: 3px; /* inputs, small chips */ --r-2: 6px; /* buttons, cards */ --r-3: 10px; /* large cards / panels */ --r-pill: 999px; /* ---------- ELEVATION ---------- */ --sh-1: 0 1px 2px rgba(28,27,26,.08); --sh-2: 0 4px 14px rgba(28,27,26,.10); --sh-3: 0 14px 40px rgba(28,27,26,.16); --focus: 0 0 0 3px rgba(247,95,54,.35); --container: 1200px; } /* ================================================================= DARK THEME (interface prototypes / control-room dashboards) Apply with or class .theme-dark ================================================================= */ [data-theme="dark"], .theme-dark { --bg-1: var(--n-950); --bg-2: var(--n-900); --surface:var(--n-800); --border: #3A3937; --border-strong: #4B4A48; --fg-1: #F2F1EF; --fg-2: #A6A5A2; --fg-3: #75736F; --accent: var(--prostor-orange); --accent-fg: #1C1B1A; --ok-bg: #14271F; --warn-bg: #2A2110; --danger-bg: #2A1214; --info-bg: #0F1E2E; --sh-1: 0 1px 2px rgba(0,0,0,.45); --sh-2: 0 6px 18px rgba(0,0,0,.5); --sh-3: 0 18px 48px rgba(0,0,0,.6); --focus: 0 0 0 3px rgba(247,95,54,.45); } /* ================================================================= TYPE SCALE — semantic element styles Display/headings: Oswald, uppercase-friendly, tight tracking. The brand uses UPPERCASE Cyrillic generously (ПРОСТОР, section titles). Body: Manrope, comfortable measure. ================================================================= */ .t-display, h1.display { font-family: var(--font-display); font-weight: 600; font-size: clamp(40px, 6vw, 76px); line-height: .98; letter-spacing: .01em; text-transform: uppercase; } h1, .t-h1 { font-family: var(--font-display); font-weight: 600; font-size: 44px; line-height: 1.04; letter-spacing: .01em; text-transform: uppercase; } h2, .t-h2 { font-family: var(--font-display); font-weight: 500; font-size: 32px; line-height: 1.08; letter-spacing: .015em; text-transform: uppercase; } h3, .t-h3 { font-family: var(--font-display); font-weight: 500; font-size: 23px; line-height: 1.15; letter-spacing: .02em; } .t-eyebrow { font-family: var(--font-display); font-weight: 600; font-size: 13px; line-height: 1; letter-spacing: .22em; text-transform: uppercase; color: var(--accent); } .t-lead { font-family: var(--font-body); font-weight: 400; font-size: 19px; line-height: 1.55; color: var(--fg-2); } body, p, .t-body { font-family: var(--font-body); font-weight: 400; font-size: 16px; line-height: 1.6; color: var(--fg-1); } .t-small { font-size: 13.5px; line-height: 1.5; color: var(--fg-2); } .t-caption { font-family: var(--font-body); font-size: 11.5px; font-weight: 600; line-height: 1.3; letter-spacing: .08em; text-transform: uppercase; color: var(--fg-3); } .t-num { /* tabular metrics for dashboards */ font-family: var(--font-display); font-weight: 500; font-variant-numeric: tabular-nums; letter-spacing: .01em; } code, .t-mono { font-family: var(--font-mono); font-size: 13px; letter-spacing: -.01em; } a { color: var(--accent); text-decoration: none; } * { box-sizing: border-box; }