/* ============================================================================ * МНУ Design System — design tokens * * Based on the actual Tomskneft.ru visual identity (cyan + black on white) * within which МНУ lives. Single source of truth for all colors, type, * spacing, radii, shadows, and motion. * * Import into any HTML artifact via: * import the tokens file into your stylesheet. * * Token naming convention: * --color-{family}-{step} raw palette * --c-{semantic} semantic alias (use these in components) * --font-{role} font stack * --type-{role} shorthand (size+line-height) for a text role * --space-{n} 4..96px scale * --radius-{n} 4 / 0 / pill * --shadow-{role} two shadows: card, popover * --ease / --dur-{role} motion * ========================================================================== */ @import url('https://fonts.googleapis.com/css2?family=PT+Sans:wght@400;700&family=PT+Sans+Narrow:wght@400;700&family=PT+Serif:wght@400;700&family=JetBrains+Mono:wght@400;500&display=swap'); :root { /* ── Color: raw palette ─────────────────────────────────────────────── */ /* Cyan — the Tomskneft signature. Logo ТН + all links + primary CTAs. */ --color-cyan-800: #006090; --color-cyan-700: #0079B5; /* press */ --color-cyan-600: #0090C8; /* hover */ --color-cyan-500: #00A8E0; /* primary brand cyan */ --color-cyan-400: #3DBDE8; --color-cyan-300: #79D1EF; --color-cyan-200: #B4E5F6; --color-cyan-100: #D8F0FA; --color-cyan-50: #ECF8FD; /* Ink — warm near-black from the logo (#231F20) anchors the scale. */ --color-ink-900: #111111; --color-ink-800: #231F20; /* logo black */ --color-ink-700: #3A3637; --color-ink-600: #555153; /* Steel — neutral spine, slightly cool. */ --color-steel-900: #1F242B; --color-steel-800: #2F353D; --color-steel-700: #4A525C; --color-steel-600: #6B7480; --color-steel-500: #8C95A1; --color-steel-400: #ADB5BF; --color-steel-300: #CCD2D8; --color-steel-200: #E0E4E8; --color-steel-100: #EDEFF2; --color-steel-50: #F5F5F5; /* top utility bar & table headers */ /* Hero — deep blue-black sampled from the homepage hero photo overlay. */ --color-hero-900: #0A1424; --color-hero-800: #0E1A2A; --color-hero-700: #182A40; /* Signal — kept restrained, for errors/alerts only. */ --color-signal-700: #B12B1A; --color-signal-600: #D03A28; --color-signal-100: #FBE3DD; /* Surfaces */ --color-paper: #FFFFFF; /* page bg — white, full stop */ --color-mute: #F5F5F5; /* utility strips, light cards, table headers */ /* ── Color: semantic aliases (use these in components) ───────────────── */ --c-bg: var(--color-paper); --c-surface: var(--color-paper); --c-surface-mute: var(--color-mute); --c-surface-hero: var(--color-hero-800); --c-text: var(--color-ink-800); --c-text-strong: var(--color-ink-900); --c-text-muted: var(--color-steel-600); --c-text-subtle: var(--color-steel-500); --c-text-on-dark: #FFFFFF; --c-text-on-dark-muted: rgba(255, 255, 255, 0.78); --c-border: var(--color-steel-200); --c-border-strong: var(--color-steel-300); --c-divider: var(--color-steel-100); --c-accent: var(--color-cyan-500); --c-accent-hover: var(--color-cyan-600); --c-accent-press: var(--color-cyan-700); --c-accent-soft: var(--color-cyan-100); --c-danger: var(--color-signal-600); --c-danger-soft: var(--color-signal-100); --c-link: var(--color-cyan-500); --c-link-hover: var(--color-cyan-600); --c-link-visited: var(--color-cyan-700); /* ── Type: font stacks ──────────────────────────────────────────────── */ --font-sans: 'PT Sans', 'Helvetica Neue', Arial, sans-serif; --font-sans-narrow: 'PT Sans Narrow', 'PT Sans', 'Arial Narrow', sans-serif; --font-serif: 'PT Serif', Georgia, 'Times New Roman', serif; --font-mono: 'JetBrains Mono', 'Menlo', 'Consolas', monospace; /* ── Type: semantic roles ──────────────────────────────────────────── Tomskneft.ru is text-led and airy — sizes lean larger than the industrial-dense direction I initially explored. */ --type-display: 700 64px/1.1 var(--font-sans); --type-h1: 700 48px/1.15 var(--font-sans); --type-h2: 700 32px/1.2 var(--font-sans); --type-h3: 700 22px/1.3 var(--font-sans); --type-h4: 700 18px/1.35 var(--font-sans); --type-body: 400 16px/1.55 var(--font-sans); --type-body-sm: 400 14px/1.5 var(--font-sans); --type-caption: 400 12px/1.4 var(--font-sans); --type-label: 700 12px/1.2 var(--font-sans-narrow); --type-overline: 700 11px/1.2 var(--font-sans-narrow); --type-lead: 400 20px/1.55 var(--font-sans); --type-pull: 400 24px/1.4 var(--font-serif); --type-mono: 400 13px/1.5 var(--font-mono); --type-mono-sm: 400 11px/1.4 var(--font-mono); --tracking-label: 0.06em; --tracking-overline: 0.12em; /* ── Spacing scale ──────────────────────────────────────────────────── */ --space-0: 0; --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; --space-9: 96px; --space-10: 128px; /* ── Corner radii ───────────────────────────────────────────────────── The real site uses very soft, small radii (2–4px). Buttons and cards are subtly rounded, not industrial-square. */ --radius-0: 0; --radius-1: 4px; --radius-2: 8px; --radius-pill: 999px; /* ── Borders ────────────────────────────────────────────────────────── */ --border-hair: 1px solid var(--c-border); --border-strong: 1px solid var(--c-border-strong); /* ── Elevation ──────────────────────────────────────────────────────── */ --shadow-card: 0 1px 2px rgba(17, 17, 17, 0.04), 0 2px 6px rgba(17, 17, 17, 0.05); --shadow-popover: 0 12px 32px rgba(17, 17, 17, 0.12); /* ── Motion ─────────────────────────────────────────────────────────── */ --ease: cubic-bezier(0.4, 0, 0.2, 1); --dur-fast: 120ms; --dur-base: 200ms; --dur-slow: 260ms; /* ── Layout ─────────────────────────────────────────────────────────── */ --content-max: 1280px; --gutter: 24px; --utility-h: 36px; --header-h: 96px; /* ── Hero protection gradient ───────────────────────────────────────── */ --gradient-protection: linear-gradient( 90deg, rgba(10, 20, 36, 0.86) 0%, rgba(10, 20, 36, 0.62) 40%, rgba(10, 20, 36, 0.20) 75%, rgba(10, 20, 36, 0) 100% ); } /* ============================================================================ * Base element styles — opt-in. Apply by adding class="mnu" to * ========================================================================== */ .mnu, .mnu body { margin: 0; background: var(--c-bg); color: var(--c-text); font: var(--type-body); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } .mnu h1, .mnu .h1 { margin: 0; font: var(--type-h1); color: var(--c-text-strong); letter-spacing: -0.01em; } .mnu h2, .mnu .h2 { margin: 0; font: var(--type-h2); color: var(--c-text-strong); letter-spacing: -0.005em; } .mnu h3, .mnu .h3 { margin: 0; font: var(--type-h3); color: var(--c-text-strong); } .mnu h4, .mnu .h4 { margin: 0; font: var(--type-h4); color: var(--c-text-strong); } .mnu p { margin: 0 0 var(--space-4); } .mnu .display { font: var(--type-display); letter-spacing: -0.015em; } .mnu .lead { font: var(--type-lead); color: var(--c-text); } .mnu .pull { font: var(--type-pull); color: var(--c-text); } .mnu .body-sm { font: var(--type-body-sm); } .mnu .caption { font: var(--type-caption); color: var(--c-text-muted); } .mnu .label { font: var(--type-label); letter-spacing: var(--tracking-label); text-transform: uppercase; } .mnu .overline { font: var(--type-overline); letter-spacing: var(--tracking-overline); text-transform: uppercase; color: var(--c-text-muted); } .mnu code, .mnu .mono { font: var(--type-mono); } .mnu a { color: var(--c-link); text-decoration: none; transition: color var(--dur-base) var(--ease); } .mnu a:hover { color: var(--c-link-hover); } ::selection { background: var(--color-cyan-100); color: var(--c-text-strong); }