/* ============================================================ FORTIS — Design Tokens (для живого сайта fortis.tomsk.ru) ------------------------------------------------------------ Значения сняты с ДЕЙСТВУЮЩЕГО сайта (2026-07), чтобы блоки, вставляемые через MCP, сливались с существующими страницами. Приёмы/структура заимствованы из stanki/design-system, но переведены на язык живого сайта (Exo 2, #E1391A, sentence case). Всё заскоуплено под .fds — контент дизайн-системы изолирован и не влияет на тему WordPress (шапку/подвал/остальные страницы). ============================================================ */ @import url('https://fonts.googleapis.com/css?family=Exo+2:300,400,500,600,700&display=swap&subset=cyrillic'); .fds { /* ---------- BRAND REDS (с живого сайта) ---------- */ --fortis-red: #E1391A; /* PRIMARY: CTA, плитки, акценты, цифры */ --fortis-red-hover: #C62F13; /* hover кнопок */ --fortis-red-press: #A82810; /* active/press */ --fortis-red-2: #E14D44; /* coral — вторичный акцент */ --fortis-red-light: #FF7A62; /* светлый коралл — подсветки */ --fortis-red-soft: #E67E78; /* мягкий коралл — акцент-бордер 7px (снято с .b-contact/.map-area) */ --fortis-red-tint: #FDECE9; /* плашка/чип на светлом */ /* ---------- NEUTRALS (с живого сайта) ---------- */ --fg-1: #000000; /* заголовки */ --fg-2: #111111; /* основной текст */ --fg-3: #6D6D6D; /* вторичный / ссылки */ --fg-soft: #494949; /* мягкий текст реквизитов/контактов (снято с .b-contact p) */ --fg-4: #8A8A8A; /* muted */ --fg-5: #B5B5B5; /* disabled */ --bg-1: #FFFFFF; /* дефолтный фон */ --bg-2: #F8F8F8; /* мягкий фон секции */ --bg-3: #EEEEEE; /* фон карточек / разделители */ --bg-4: #15171A; /* инверсный тёмный блок / футер */ --bg-5: #0A0A0A; /* глубокий чёрный */ --line-1: #E1E1E1; /* дефолтный бордер */ --line-2: #C6C6C6; /* усиленный бордер */ --line-3: #474747; /* бордер на тёмном */ --bg-panel: #DBDBDB; /* серая плашка-оффер (снято с .spotlight-form) */ /* ---------- SEMANTIC ---------- */ --success: #2E7D32; --warning: #E67E22; --danger: #E1391A; --info: #474747; /* ---------- GRADIENTS (сдержанно) ---------- */ --grad-red-hero: linear-gradient(135deg, #E1391A 0%, #A82810 60%, #2A0C05 100%); --grad-dark: linear-gradient(180deg, #2A2D31 0%, #15171A 55%, #0A0A0A 100%); --grad-hero-veil: linear-gradient(90deg, rgba(10,10,10,.72) 0%, rgba(10,10,10,.35) 55%, rgba(10,10,10,0) 100%); /* Градиенты фирменных плиток каталога — сняты с боевого .b-catalog */ --grad-red-tile: radial-gradient(138.71% 71.13% at 15.2% 93.49%, #E1391A 0%, #FF5536 100%); --grad-gray-tile: radial-gradient(138.71% 71.13% at 15.2% 93.49%, #E5E5E5 0%, #FAFAFA 100%); --grad-dark-tile: radial-gradient(138.71% 71.13% at 15.2% 93.49%, #3C3C3C 0%, #676767 100%); /* Вуаль серой плашки-оффера — снята с .spotlight-form::before */ --grad-panel-veil: linear-gradient(134deg, #F1F1F1 0%, rgba(241,241,241,0) 100%); /* Вуаль контактной панели (плашка тает влево, к фото) — снята с .b-contact__inner */ --grad-contact-veil: linear-gradient(264.51deg, #F3F3F3 66.23%, rgba(243,243,243,0) 96.91%); /* ---------- RADII ---------- */ --r-0: 0; --r-xs: 2px; --r-sm: 4px; /* базовый */ --r-md: 6px; --r-lg: 8px; /* ---------- SPACING (4px base) ---------- */ --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px; --s-10: 128px; /* ---------- LAYOUT ---------- */ --container: 1138px; --container-pad: 14px; --section-y: 64px; --section-y-lg: 96px; /* ---------- SHADOWS ---------- */ --shadow-sm: 0 1px 2px rgba(0,0,0,.08); --shadow-md: 0 4px 12px rgba(0,0,0,.10); --shadow-lg: 0 12px 32px rgba(0,0,0,.14); --shadow-red: 0 8px 24px rgba(225,57,26,.28); /* Многослойная hover-тень «парящей» карточки — снята с боевого .b-catalog__item:hover */ --shadow-float: 0 2px 2px rgba(0,0,0,.02), 0 6px 5px rgba(0,0,0,.03), 0 12px 10px rgba(0,0,0,.04), 0 22px 17px rgba(0,0,0,.04), 0 41px 33px rgba(0,0,0,.05), 0 100px 80px rgba(0,0,0,.07), 0 2px 6px rgba(0,0,0,.22); /* ---------- TYPE ---------- */ --font-display: 'Exo 2', 'Segoe UI', Roboto, Arial, sans-serif; --font-body: 'Exo 2', 'Segoe UI', Roboto, Arial, sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, Menlo, monospace; --fs-display-xl: clamp(38px, 5vw, 57px); --fs-display-l: clamp(34px, 4.4vw, 50px); --fs-h1: clamp(32px, 4vw, 44px); --fs-h2: clamp(26px, 3vw, 34px); /* Заголовок секции лендинга — снято с боевого .front-title: десктоп 44px, мобильный 36px, line-height 1.5 (задаётся в блоке) */ --fs-section-title: clamp(36px, 3.1vw, 44px); --fs-h3: 24px; --fs-h4: 20px; --fs-body-l: 18px; --fs-body: 16px; --fs-body-s: 14px; --fs-caption: 13px; --fs-overline: 12px; --lh-tight: 1.08; --lh-snug: 1.2; --lh-body: 1.55; --lh-loose: 1.7; --tr-tight: -0.01em; --tr-normal: 0; --tr-wide: 0.02em; --tr-ultrawide: 0.08em; /* ---------- ОПЦИОНАЛЬНЫЙ АКЦЕНТНЫЙ СЛОЙ (не дефолт) ---------- Наследие лендинг-концепта stanki. Подключать точечно для «премиального» акцента на отдельном блоке. НЕ для обычного контента. */ --font-accent: 'Manrope', var(--font-display); --accent-crimson: #D4232A; } /* ============================================================ БАЗОВЫЕ ДЕФОЛТЫ (только внутри .fds) ============================================================ */ .fds { font-family: var(--font-body); font-size: var(--fs-body); line-height: var(--lh-body); color: var(--fg-2); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } .fds *, .fds *::before, .fds *::after { box-sizing: border-box; } .fds h1, .fds .h1 { font: 700 var(--fs-h1)/var(--lh-tight) var(--font-display); letter-spacing: var(--tr-tight); color: var(--fg-1); margin: 0; } .fds h2, .fds .h2 { font: 700 var(--fs-h2)/var(--lh-snug) var(--font-display); letter-spacing: var(--tr-tight); color: var(--fg-1); margin: 0; } .fds h3, .fds .h3 { font: 600 var(--fs-h3)/var(--lh-snug) var(--font-display); color: var(--fg-1); margin: 0; } .fds h4, .fds .h4 { font: 600 var(--fs-h4)/var(--lh-snug) var(--font-display); color: var(--fg-1); margin: 0; } .fds p { margin: 0; } .fds a { color: var(--fortis-red); text-decoration: none; } .fds a:hover { color: var(--fortis-red-hover); } /* ---------- Общие классы дизайн-системы ---------- */ /* Контейнер сайта: фиксированная колонка 1138/14 (контент 1110), центр по странице. width:100% обязателен — иначе во флекс-секциях (hero и т.п.) контейнер сжимается по содержимому и ширина «плавает». С ним контейнер всегда заполняет до 1138. */ .fds .fds-container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--container-pad); } .fds .fds-section { padding-block: var(--section-y); } @media (min-width: 900px) { .fds .fds-section { padding-block: var(--section-y-lg); } } .fds .display-hero { font: 700 var(--fs-display-xl)/1.05 var(--font-display); letter-spacing: var(--tr-tight); color: #fff; } .fds .overline { font: 600 var(--fs-overline)/1 var(--font-display); letter-spacing: var(--tr-ultrawide); text-transform: uppercase; color: var(--fortis-red); } .fds .num-big { font: 700 clamp(48px, 7vw, 96px)/0.95 var(--font-display); letter-spacing: -0.02em; color: var(--fortis-red); } .fds .mono { font-family: var(--font-mono); } /* ---------- Фоны и акценты блоков (хелперы из GUIDELINES §2) ---------- */ .fds .bg-soft { background: var(--bg-2); } .fds .bg-dark { background: var(--bg-4); color: rgba(255,255,255,.85); } .fds .bg-red { background: var(--fortis-red); color: #fff; } .fds .bg-dark h1, .fds .bg-dark h2, .fds .bg-dark h3, .fds .bg-dark h4, .fds .bg-red h1, .fds .bg-red h2, .fds .bg-red h3, .fds .bg-red h4 { color: #fff; } .fds .text-red { color: var(--fortis-red); } .fds .text-muted { color: var(--fg-3); } /* ---------- Кнопки (как на живом сайте) ---------- */ .fds .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font: 600 var(--fs-body-s)/1 var(--font-display); padding: 14px 24px; border-radius: var(--r-sm); border: 0; cursor: pointer; min-width: 0; /* тема сайта даёт .btn min-width:212px — в узких карточках ломает ряд */ transition: background .15s ease, color .15s ease, box-shadow .15s ease; } .fds .btn-primary { background: var(--fortis-red); color: #fff; } .fds .btn-primary:hover { background: var(--fortis-red-hover); box-shadow: var(--shadow-red); color: #fff; } .fds .btn-primary:active { background: var(--fortis-red-press); box-shadow: none; } .fds .btn-ghost { background: transparent; color: var(--fg-1); border: 1px solid var(--line-2); } .fds .btn-ghost:hover { border-color: var(--fortis-red); color: var(--fortis-red); } /* ---------- Формы (контракт data-fds-form) ---------- */ /* Сообщение об исходе отправки — рисует fds-forms.js внутри формы */ .fds .fds-form-msg { margin-top: var(--s-3); font-size: var(--fs-body-s); line-height: 1.5; } .fds .fds-form-msg.is-ok { color: var(--success); } .fds .fds-form-msg.is-err { color: var(--danger); } .fds .bg-dark .fds-form-msg.is-ok, .fds .fds-calc__panel .fds-form-msg.is-ok { color: #7BC67E; } /* success читаем на тёмном */ /* Honeypot: поле-ловушка для ботов, людям не видно и не фокусируется */ .fds .fds-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; opacity: 0; pointer-events: none; }