/* ========================================================================== Micros Pak — упаковка для банковских карт Тёмная премиальная тема. Общие стили для ru / uz / en. ========================================================================== */ /* --- Фирменный шрифт ----------------------------------------------------- Cooper Black используется ТОЛЬКО в логотипе. Положите файл assets/fonts/CooperBlack.woff2 — подхватится автоматически. Заголовки набраны гротеском: на тёмном фоне он читается строже. -------------------------------------------------------------------------- */ @font-face { font-family: "Cooper Black Local"; src: url("../fonts/CooperBlack.woff2") format("woff2"), url("../fonts/CooperBlack.woff") format("woff"); font-weight: 400 900; font-display: swap; } /* -------------------------------------------------------------------------- ТЕМЫ Ночная — база (значения в :root), дневная — переопределение в [data-theme="light"]. Атрибут ставится на ещё до отрисовки страницы (скрипт в ), поэтому при загрузке нет вспышки. Все цвета живут только здесь: чтобы поправить тему, менять надо переменные, а не правила ниже. -------------------------------------------------------------------------- */ :root { color-scheme: dark; /* Фон: почти чёрный с синим подтоном */ --bg: #070B14; --bg-2: #0B1220; --surface: #111A2B; --surface-2: #16223A; /* Линии — только тонкие, никаких заливок-плашек */ --line: rgba(255, 255, 255, .09); --line-2: rgba(255, 255, 255, .16); /* Фирменный синий и его светлая версия для тёмного фона */ --brand: #14519E; --accent: #4A8FE0; --accent-dim: rgba(74, 143, 224, .14); /* Текст */ --fg: #EEF3FA; --fg-2: #A9B7CC; --fg-3: #6C7C94; --ok: #3FB27F; --warn: #D9694F; /* Служебные оттенки, зависящие от темы */ --grid: rgba(255, 255, 255, .028); /* сетка на фоне hero */ --stripe: rgba(255, 255, 255, .022); /* штриховка пустых слотов */ --hover-tint: rgba(255, 255, 255, .05); --header-bg: rgba(7, 11, 20, .72); --header-bg-2: rgba(7, 11, 20, .92); --caption-shade: rgba(7, 11, 20, .92); /* подпись поверх фото */ --overlay: rgba(4, 7, 13, .94); /* просмотр фото */ /* Бумага конверта в анимации */ --paper-back: #C9C6BE; --paper-front: #D6D3CB; --paper-flap: #CFCCC3; --paper-edge: #B0ACA2; /* Строгая геометрия: почти без скруглений */ --r: 4px; --r-2: 6px; --font-head: "Inter", "SF Pro Display", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-body: var(--font-head); --font-logo: "Cooper Black Local", "Cooper Black", "Cooper Std Black", Georgia, serif; --font-mono: ui-monospace, "SF Mono", "Cascadia Mono", "Segoe UI Mono", Menlo, Consolas, monospace; --wrap: 1240px; --header-h: 72px; } /* --- Дневная тема --------------------------------------------------------- */ :root[data-theme="light"] { color-scheme: light; --bg: #FFFFFF; --bg-2: #F5F7FB; --surface: #ECF1F8; --surface-2: #E2E9F4; --line: rgba(11, 26, 46, .11); --line-2: rgba(11, 26, 46, .22); --brand: #14519E; --accent: #14519E; --accent-dim: rgba(20, 81, 158, .09); --fg: #0A1A2E; --fg-2: #45566F; --fg-3: #7A8AA1; --ok: #1E8B5E; --warn: #C0492F; --grid: rgba(11, 26, 46, .05); --stripe: rgba(11, 26, 46, .045); --hover-tint: rgba(11, 26, 46, .05); --header-bg: rgba(255, 255, 255, .76); --header-bg-2: rgba(255, 255, 255, .95); --caption-shade: rgba(255, 255, 255, .94); --overlay: rgba(10, 16, 28, .96); --paper-back: #E5E2DA; --paper-front: #F0EEE8; --paper-flap: #EAE7E0; --paper-edge: #C6C2B7; } /* Плавный переход между темами. Карточки сюда не входят: у них своя анимация появления, и общий transition её бы перебил. */ body, .header, .footer, .step, .form, .envelope__back, .envelope__front, .envelope__flap, .field input, .field textarea, .field select { transition-property: background-color, border-color, color; transition-duration: .28s; transition-timing-function: ease; } * { box-sizing: border-box; } html { scroll-behavior: smooth; background: var(--bg); } body { margin: 0; font-family: var(--font-body); font-size: 16px; line-height: 1.6; color: var(--fg-2); background: var(--bg); -webkit-font-smoothing: antialiased; overflow-x: hidden; } img, svg, video { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } h1, h2, h3, h4 { font-family: var(--font-head); color: var(--fg); line-height: 1.14; letter-spacing: -.02em; margin: 0 0 .5em; font-weight: 600; } h1 { font-size: clamp(32px, 4.4vw, 56px); letter-spacing: -.03em; } h2 { font-size: clamp(26px, 3.2vw, 40px); } h3 { font-size: clamp(17px, 1.5vw, 20px); font-weight: 600; } p { margin: 0 0 1em; } .wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 28px; } .section { padding: clamp(64px, 7.5vw, 116px) 0; position: relative; } .section--alt { background: var(--bg-2); } .section + .section { border-top: 1px solid var(--line); } /* Технический надзаголовок — цифра раздела + название */ .eyebrow { display: flex; align-items: center; gap: 12px; font-family: var(--font-mono); font-size: 12px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: var(--accent); margin-bottom: 20px; } .eyebrow::before { content: attr(data-no); color: var(--fg-3); padding-right: 12px; border-right: 1px solid var(--line-2); } .lead { font-size: clamp(16px, 1.35vw, 18px); color: var(--fg-2); max-width: 64ch; } .section-head { max-width: 760px; margin-bottom: clamp(40px, 4.5vw, 64px); } /* Products now live as a detailed subsection of “About the company”. */ .about__products { margin-top: clamp(64px, 8vw, 120px); padding-top: clamp(48px, 6vw, 88px); border-top: 1px solid var(--line); } .about__products .eyebrow::before { display: none; } .about__products .eyebrow { gap: 0; } /* --- Кнопки: прямоугольные, без теней и «таблеток» ------------------------ */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 14px 26px; border: 1px solid transparent; border-radius: var(--r); /* Обязательно: у