/* ===================================================================== СтройМетиз Пермь — Design Tokens Источник: sm-pm.ru/laser (страница «Лазерная резка / Чертежи») ===================================================================== */ /* ---------- FONTS ---------- Основной набор: PT Sans + PT Sans Narrow с Google Fonts. PT Sans Narrow используется ТОЛЬКО для заголовков, цифр и крупных акцентных надписей (KPI, цены, label-таблички). Подгружайте этот @import в , или используйте с googleapis.com (см. README → Type). ---------------------------------------------------------------------- */ /*@import url('https://fonts.googleapis.com/css2?family=PT+Sans:ital,wght@0,400;0,700;1,400&family=PT+Sans+Narrow:wght@400;700&display=swap'); */ /* ─── ШРИФТЫ ЛОКАЛЬНО ─── */ @font-face { font-family: 'PT Sans'; src: url('/fonts/pt-sans/PTSans-Regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'PT Sans'; src: url('/fonts/pt-sans/PTSans-Bold.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: 'PT Sans'; src: url('/fonts/pt-sans/PTSans-Italic.woff2') format('woff2'); font-weight: 400; font-style: italic; font-display: swap; } @font-face { font-family: 'PT Sans Narrow'; src: url('/fonts/pt-sans-narrow/PTSansNarrow-Regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'PT Sans Narrow'; src: url('/fonts/pt-sans-narrow/PTSansNarrow-Bold.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; } :root { /* ---------- COLOR · BRAND ---------- */ --sm-navy: #3b5473; /* Основной фирменный синий. Header, заголовки, ссылки. */ --sm-navy-dark: #2a3d54; /* Тёмная грань для футера, hover-состояний. */ --sm-navy-light: #516e91; /* Светлая грань — границы header, decorative. */ --sm-accent: #d4a000; /* Янтарный/жёлтый акцент. CTA, иконки, цифры KPI. */ --sm-accent-light:#febf00; /* Hover-состояние акцента, светлые акценты на тёмном. */ /* ---------- COLOR · NEUTRALS ---------- */ --sm-white: #ffffff; --sm-off-white: #f5f7fa; /* Альт-фон секций, плашки breadcrumb. */ --sm-grey-light: #e8edf3; /* Границы, divider-ы, фон неактивных таблиц. */ --sm-grey-mid: #b0bec9; /* Иконки-стрелки, муты, low-emphasis текст. */ --sm-grey-text: #333e48; /* Основной body-текст. */ --sm-text: #333e48; /* Алиас на основной текст. */ /* ---------- COLOR · SEMANTIC ---------- */ --sm-link: var(--sm-navy); --sm-error: #c0392b; /* «Срочный заказ» в прайсе. */ --sm-success: #2a7a3b; /* Опциональный зелёный для подтверждений. */ /* ---------- COLOR · CAD/DRAWING (специфика отрасли) ---------- Используется в hero-визуале «CAD viewport» и иллюстрациях DXF. */ --sm-cad-bg: #0d1f33; /* Фон чёрно-синего «экрана» CAD. */ --sm-cad-part: #5bafe8; /* Линии вырезаемой детали. */ --sm-cad-dim: rgba(255,200,80,0.7); /* Размерные линии. */ --sm-cad-grid: rgba(59,130,196,0.15); /* Сетка viewport. */ --sm-cad-bend: rgba(255,200,80,0.7); /* Линия гиба (dashed). */ /* ---------- TYPE FAMILIES ---------- */ --sm-font-body: 'PT Sans', Arial, sans-serif; --sm-font-display: 'PT Sans Narrow', 'PT Sans', Arial, sans-serif; --sm-font-mono: 'Courier New', ui-monospace, monospace; /* Подписи в CAD, теги типа DXF/STEP. */ /* ---------- TYPE SIZES ---------- */ --sm-text-xs: 11px; /* Подписи UCS, мелкие пояснения. */ --sm-text-sm: 12px; /* badge, breadcrumb, кнопки header. */ --sm-text-base: 13px; /* Низкоприоритетный body. */ --sm-text-md: 14px; /* Таблицы, FAQ-ответы, описания карточек. */ --sm-text-lg: 16px; /* Основной body sm-pm. */ --sm-text-xl: 17px; /* Hero-sub, CTA-sub. */ --sm-text-h4: 20px; /* Заголовок карточки в deliverables. */ --sm-text-h3: 22px; /* Tech-card title. */ --sm-text-h2: clamp(24px, 2.5vw, 36px); /* Section-title. */ --sm-text-h1: clamp(26px, 3vw, 42px); /* Hero h1, cta-title. */ --sm-text-stat: 28px; /* KPI-цифры hero-stat-val. */ --sm-text-price: 30px; /* calc-total-price. */ /* ---------- TYPE WEIGHTS ---------- */ --sm-fw-regular: 400; --sm-fw-bold: 700; /* ---------- LINE HEIGHTS ---------- */ --sm-lh-tight: 1.2; /* Заголовки display. */ --sm-lh-snug: 1.3; /* Кнопки, subtitles. */ --sm-lh-base: 1.5; --sm-lh-loose: 1.6; /* Основной body. */ --sm-lh-faq: 1.7; /* Длинные параграфы FAQ. */ /* ---------- LETTER-SPACING ---------- */ --sm-tracking-h1: -0.3px; --sm-tracking-tag: 0.5px; --sm-tracking-label: 1.5px; /* SECTION LABELS — UPPERCASE. */ /* ---------- SPACING ---------- Базовый ритм 8px. Sections 72/24, между блоками 48, gap 24, card-pad 32. */ --sm-space-1: 4px; --sm-space-2: 8px; --sm-space-3: 12px; --sm-space-4: 16px; --sm-space-5: 20px; --sm-space-6: 24px; --sm-space-8: 32px; --sm-space-10: 40px; --sm-space-12: 48px; --sm-space-16: 64px; --sm-space-18: 72px; /* Section vertical padding. */ --sm-container: 1200px; /* Максимальная ширина .section-inner. */ /* ---------- RADII ---------- */ --sm-radius-xs: 2px; /* Logo-mark, tag-плашки. */ --sm-radius-sm: 3px; /* Кнопки tweak-панели, бирки. */ --sm-radius: 4px; /* Кнопки .btn-primary/secondary. */ --sm-radius-md: 6px; /* Карточки (deliverable, tech, pricing). */ --sm-radius-pill: 20px; /* Hero-badge «капсула». */ /* ---------- BORDERS ---------- */ --sm-border-card: 1px solid rgba(0, 0, 0, 0.125); --sm-border-soft: 1px solid var(--sm-grey-light); --sm-border-accent-l: 4px solid var(--sm-navy); /* Левая полоса tech-card. */ --sm-border-accent-t: 3px solid var(--sm-navy); /* Верхняя полоса deliv-card. */ /* ---------- SHADOWS ---------- Тонированы в синий — НИКОГДА чистый чёрный. */ --sm-shadow-sm: 0 2px 8px rgba(20,60,130,0.30); /* Hover-кнопок. */ --sm-shadow: 0 2px 12px rgba(59,84,115,0.10); /* Карточки, default. */ --sm-shadow-md: 0 4px 24px rgba(59,84,115,0.14); /* Hover-карточек, calc-box. */ --sm-shadow-header: 0 2px 8px rgba(0,0,0,0.25); /* Sticky-header. */ /* ---------- TRANSITIONS ---------- */ --sm-ease-fast: 0.15s; --sm-ease: 0.2s; --sm-ease-slow: 0.3s; } /* ===================================================================== SEMANTIC ELEMENT STYLES Подключайте этот файл и пишите чистый HTML — типографика заработает. ===================================================================== */ body { font-family: var(--sm-font-body); color: var(--sm-text); background: var(--sm-white); font-size: var(--sm-text-lg); line-height: var(--sm-lh-loose); } h1, .sm-h1 { font-family: var(--sm-font-display); font-weight: var(--sm-fw-bold); font-size: var(--sm-text-h1); line-height: var(--sm-lh-tight); letter-spacing: var(--sm-tracking-h1); color: var(--sm-navy); } h2, .sm-h2 { font-family: var(--sm-font-display); font-weight: var(--sm-fw-bold); font-size: var(--sm-text-h2); line-height: var(--sm-lh-tight); color: var(--sm-navy); } h3, .sm-h3 { font-family: var(--sm-font-display); font-weight: var(--sm-fw-bold); font-size: var(--sm-text-h3); color: var(--sm-navy); } h4, .sm-h4 { font-family: var(--sm-font-display); font-weight: var(--sm-fw-bold); font-size: var(--sm-text-h4); color: var(--sm-navy); } .sm-label { /* SECTION LABEL — uppercase кикер */ font-size: var(--sm-text-xs); font-weight: var(--sm-fw-bold); letter-spacing: var(--sm-tracking-label); text-transform: uppercase; color: var(--sm-navy); } .sm-divider { /* короткая жёлтая полоска под label */ width: 40px; height: 3px; background: var(--sm-accent); border-radius: 2px; } .sm-mono { font-family: var(--sm-font-mono); font-size: var(--sm-text-sm); letter-spacing: 1px; } a { color: var(--sm-link); text-decoration: none; transition: color var(--sm-ease); } a:hover { text-decoration: underline; } code, .sm-code { background: var(--sm-grey-light); padding: 2px 6px; border-radius: var(--sm-radius-sm); font-family: var(--sm-font-mono); font-size: 0.92em; color: var(--sm-navy); }