/* BoltCad — Типографическая спецификация по макету “DESIGN”
Семейства подключены через Adobe Fonts (Typekit):
--font-head: "futura-pt"; --font-ui: "aglet-sans".
Этот файл фиксирует точные размеры из макета и размечает блоки.
Легенда блоков:
[K] — Kicker / верхние малые метки (BOLTCAD GROUP, категории)
[H1] — Главный заголовок (INDUSTRIAL- UND CORPORATE DESIGN)
[L] — Лид‑текст под героем
[S1] — Малый серый подзаголовок (DESIGNKONZEPTION & -ENTWICKLUNG)
[H2] — Раздел “ENTWURF UND KOMMUNIKATION”
[P] — Основной текст раздела (абзацный)
[ST] — Крупные проценты (45% / 64% / 100%)
[SC] — Подписи к процентам
[SEC]— Ярлык секции “Projektbeispiele”
[CT] — Заголовки карточек (проекты)
[CN] — Малые подписи/метки в карточках (AUTOMOTIV, INSTRUMENTE и т.п.)
[CTA]— Кнопка “RENDERING GALERIE”
[F] — Футер (колонки ссылок, копирайт)
*/
:root {
/* Базовые семейства (из подключенного Adobe Fonts) */
--font-ui: "aglet-sans", system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", Arial, sans-serif;
--font-head: "futura-pt", "aglet-sans", system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", Arial, sans-serif;
/*--font-ui: "aglet-sans", "Rubik", system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", Arial, sans-serif;
--font-head: "futura-pt", "Jost", "Rubik", system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", Arial, sans-serif;*/
/* ---- Точные размеры из макета (px) ---- */
--fs-kicker: clamp(0.86rem, 1rem + .30vw, 0.87rem); /* [K] малые метки, CAPS */
--fs-h1: clamp(2.3rem, 2.2rem + 1.2vw, 2.5rem); /* [H1] основной заголовок (Heavy) */
--fs-lead: clamp(2.05rem, 1.95rem + .50vw, 2.1667rem); /* [L] лид под героем (Light) */
--fs-s1: clamp(.72rem, .66rem + .30vw, .75rem); /* [S1] малый серый подзаголовок CAPS */
--fs-h21: clamp(2.4rem, 2.35rem + 3.2vw, 2.45rem); /* [H2] подзаголовок раздела (Heavy) */
--fs-h2: clamp(2rem, 1.9rem + 3.2vw, 2.05rem); /* [H2] подзаголовок раздела (Heavy) */
--fs-h3: clamp(1.75rem, 1.7rem + 3.2vw, 1.8rem); /* [H2] подзаголовок раздела (Heavy) */
--fs-h4: clamp(1.3rem, 1.2rem + 3.2vw, 1.35rem);
--fs-copy: clamp(1.4rem, 1.08rem + .2vw, 1.5rem); /* [P] основной абзац (Light) */
--fs-stat: clamp(2rem, 1.9rem + 2.5vw, 2.5rem); /* [ST] крупные проценты (Heavy) */
--fs-scap: clamp(1.175rem, 1.12rem + .30vw, 1.2167rem); /* [SC] подписи к статистике (Light) */
--fs-sec: clamp(2.9rem, 2.88rem + .2vw, 3rem); /* [SEC] ярлык “Projektbeispiele” (семейство head, Bold) */
--fs-card: clamp(1.2rem, 1.2rem + .50vw, 1.4rem); /* [CT] заголовок карточки (Bold) */
--fs-cnote: clamp(1.22rem, 1.20rem + .30vw, 1.25rem); /* [CN] маленькие подписи/метки */
--fs-cta: clamp(1.3rem, 1.36rem + .30vw, 1.3167rem); /* [CTA] текст на кнопке (Aglet Sans, Bold, CAPS) */
--fs-foot: clamp(1.05rem, 1.02rem + .20vw, 1.075rem); /* [F] футерные ссылки и копирайт */
--fz-xxs: clamp(12px, 0.80vw, 14px);
--fz-xs: clamp(14px, 0.95vw, 16px);
--fz-sm: clamp(16px, 1.05vw, 18px);
--fz-md: clamp(18px, 1.25vw, 20px);
--fz-lg: clamp(22px, 1.60vw, 28px);
--fz-xl: clamp(28px, 2.20vw, 36px);
--fz-2xl: clamp(36px, 3.20vw, 48px);
--fz-3xl: clamp(44px, 4.40vw, 64px);
--fz-4xl: clamp(56px, 5.60vw, 72px);
/* Межстрочные и кернинг */
/* --lh-h1: 1.05;
--lh-h2: 1.20;
--lh-stat: 1.00;
--lh-card: 1.25;
--lh-tight: 1.1;
--lh-snug: 1.2;*/
--lh-text: 1.40;
/* Прочее */
--tracking-caps: 0.12em; /* для Kicker/малых капсов 0.08em*/
--tracking-cta: 0.02em; /* для кнопок */
--brand: #1A315F;
--brandB: #4A90E2;
--brandC: #1f3e74;
--blackC:#000;
--accent: #4A90E2;
--ink: #000;
--muted: #6b778c;
--bg: #ffffff;
--border: #e7ecf7;
--shadow: 0 10px 30px rgba(0,0,0,.10);
--nav-h: 100px;
--nav-bg: rgba(255,255,255,1);
--hover-bg: #EAF0FA;
--brand-alpha: rgba(26,49,95,.85);
--brand-soft: #1A315FB5;
--brandA: rgba(26,49,95,.85);
--card: #ffffff;
--radius: 0px;
--acc-speed: .55s;
/* Шрифты */
/* Веса */
--w-light: 300;
--w-regular: 400;
--w-medium: 500;
--w-semibold: 600;
--w-bold: 700;
--w-heavy: 800;
/* Базовые размеры */
--abstand: 10px 0;
/* text position */
--helfte: 50%;
/* Буквенные интервалы */
--track-0: 0;
--track-cta: 0.04em;
--track-eyebrow: 0.08em;
/* Для Main Content */
--sec-y: 30px;
--sec-y-sm: 30px;
--round-lg: 14px;
}
@media (max-width: 768px) {
:root {
--fs-h1: clamp(2.5rem, 2.1rem + 1.2vw, 2.5rem); /* [H1] основной заголовок (Heavy) */
--fs-h2: clamp(1.8rem, 1.7rem + 3.2vw, 1.85rem); /* [H2] подзаголовок раздела (Heavy) */
--fs-kicker: clamp(1.27rem, 1.2rem + .30vw, 1.28rem);
--fs-sec: clamp(1.8rem, 1.78rem + .2vw, 1.8rem);
}
}
/* ===================== */
/* [K] Kicker / малые метки */
.kicker1 {
font-family: var(--font-ui);
font-weight: 400; /* Regular */
font-size: var(--fs-kicker)!important;
line-height: var(--lh-text);
letter-spacing: var(--tracking-caps);
text-transform: uppercase;
color: var(--blackC);
}
/* ===================== */
/* [H1] Главный заголовок */
.h1,
h1.section-title {
font-family: var(--font-head);
font-weight: 700; /* Heavy */
font-size: var(--fs-h1)!important;
line-height: var(--lh-h1);
text-transform: uppercase;
margin: var(--abstand);
}
/* Акцентное слово внутри H1 (CORPORATE DESIGN) — Medium */
.h1 .accent { font-weight: 500; }
.section-title .accent{color:var(--brandC);}
/* ===================== */
/* [L] Лид под героем */
.lead {
font-family: var(--font-head);
font-weight: 300; /* Light */
font-size: var(--fs-copy)!important;
line-height: var(--lh-text);
}
/* ===================== */
/* [S1] Малый серый подзаголовок */
.small-label {
font-family: var(--font-head);
font-weight: 700; /* Bold */
font-size: var(--fs-s1)!important;
line-height: var(--lh-text);
letter-spacing: var(--tracking-caps);
text-transform: uppercase;
}
/* ===================== */
/* [H2] Подзаголовок раздела */
.h2,
h2.section-title {
font-family: var(--font-head);
font-weight: 800; /* Heavy */
font-size: var(--fs-h2)!important;
line-height: var(--lh-text);
text-transform: uppercase;
margin: var(--abstand);
}
/*.why h2.section-title,
.vision-product h2.section-title {
font-family: var(--font-head);
font-weight: 800;
font-size: var(--fs-h21) !important;
line-height: var(--lh-text);
text-transform: uppercase;
}*/
h3.section-title {
font-family: var(--font-head);
font-weight: 800;
font-size: var(--fs-h3) !important;
line-height: var(--lh-text);
text-transform: uppercase;
}
h4.section-title {
font-family: var(--font-head);
font-weight: 800;
font-size: var(--fs-h4) !important;
line-height: var(--lh-text);
text-transform: uppercase;
}
/* ===================== */
/* [P] Основной текст раздела */
.copy {
font-family: var(--font-head);
font-weight: 300; /* Light */
font-size: var(--fs-copy)!important;
line-height: var(--lh-text);
}
.about p {
font-family: var(--font-head);
font-weight: 300; /* Light */
font-size: var(--fs-copy)!important;
line-height: var(--lh-text);
}
/* .cta-box.invrel .body p {
font-family: var(--font-head);
font-weight: 300;
font-size: var(--fs-copy)!important;
line-height: var(--lh-text);
}*/
/* ===================== */
/* [ST] Крупные проценты */
.stat_num {
font-family: var(--font-head);
font-weight: 800; /* Heavy */
font-size: var(--fs-stat)!important;
line-height: var(--lh-text);
}
/* [SC] Подписи под статой */
.stat_caption {
font-family: var(--font-head);
font-weight: 300; /* Light */
font-size: var(--fs-scap)!important;
line-height: var(--lh-text);
}
/* ===================== */
/* [SEC] Ярлык “Projektbeispiele” */
.section-chip {
font-family: var(--font-ui);
font-weight: 500; /* Bold */
font-size: var(--fs-sec)!important;
line-height: var(--lh-text);
}
/* ===================== */
/* Карточки проектов */
/* [CT] Заголовок карточки */
.card-title, .news-card .title {
font-family: var(--font-head);
font-weight: 700; /* Bold */
font-size: var(--fs-card)!important;
line-height: var(--lh-text);
}
/* [CN] Малые подписи/метки в карточках */
.news-card .card-note,
.news-card .card-tag {
font-family: var(--font-head);
font-weight: 300; /* Light */
font-size: var(--fs-cnote)!important;
line-height: var(--lh-text);
letter-spacing: 0.02em;
text-transform: uppercase;
}
.news-card .extra {
font-family: var(--font-head);
font-weight: 300; /* Light */
font-size: var(--fs-cnote)!important;
line-height: var(--lh-text);
letter-spacing: 0.02em;
}
.sol-card .desc {
font-family: var(--font-head);
font-weight: 300; /* Light */
font-size: var(--fs-cnote)!important;
line-height: var(--lh-text);
letter-spacing: 0.02em;
margin-top: 8px;
opacity: 0;
max-height: 0;
overflow: hidden;
transition: opacity 0.22s ease, max-height 0.22s ease;
}
/* ===================== */
/* [CTA] Кнопка “RENDERING GALERIE” */
.btn-ren {
font-family: var(--font-ui);
font-weight: 700; /* Bold */
font-size: var(--fs-cta)!important;
letter-spacing: var(--tracking-cta);
text-transform: uppercase;
}
/* ===================== */
/* [F] Футер */
.footer-small, .footbar, .fcol,
.footer a,
.footer .legal {
font-family: var(--font-head);
font-weight: 300; /* Light */
font-size: var(--fs-foot)!important;
line-height: var(--lh-text);
}
/* ====== Примеры разметки (для ориентира) ======
BOLTCAD GROUP
// [K]
INDUSTRIAL- UND CORPORATE DESIGN
// [H1]
Platzieren Sie Ihr Produkt ...
// [L]
DESIGNKONZEPTION & -ENTWICKLUNG
// [S1]
ENTWURF UND KOMMUNIKATION
// [H2]
Im Entwurf wird definiert, was es noch nicht gibt...
// [P]
45%
Gestiegener Absatz ...
// [ST] + [SC]
Projektbeispiele
// [SEC]
Designkonzeptionen für diverse PKW Interieur Appliances
// [CT]
AUTOMOTIV
// [CN]
RENDERING GALERIE // [CTA]
// [F]
*/