/* Фонд Трійки — лендінг-шар ПОВЕРХ styles.css. Лендінг підключає ОБИДВА файли: спершу styles.css (токени бренду), потім цей. Тут НЕМАЄ нових кольорів чи шрифтів — тільки наявні токени, перекладені у скрол-документ: mobile-first, fluid-типографіка через clamp(), брейкпойнти 640px (планшет) і 1024px (десктоп). Сторінка лендінга маркується . deck-stage.js НЕ підключати. */ /* ── Fluid-токени лендінга ───────────────────────────────────────────── */ :root { --lp-fs-mega: clamp(40px, 8.5vw, 96px); /* мегазаголовок хіро (Wide Black) */ --lp-fs-h1: clamp(28px, 5vw, 54px); /* заголовок секції (SemiBold) */ --lp-fs-h2: clamp(20px, 3vw, 30px); /* підзаголовок блоку */ --lp-fs-lead: clamp(17px, 2.2vw, 21px); /* лід-абзац під хіро */ --lp-fs-body: clamp(15px, 1.7vw, 17px); /* боді (Inter) */ --lp-fs-stat: clamp(30px, 4.5vw, 52px); /* велика mono-цифра */ --lp-fs-price: clamp(34px, 5vw, 58px); /* ціна (Comp Ultra) */ --lp-fs-mono: clamp(12px, 1.5vw, 14px); /* mono-лейбли, eyebrow */ --lp-sect: clamp(56px, 10vw, 120px); /* вертикальний ритм секцій */ --lp-gap: clamp(16px, 2.5vw, 28px); /* між картками в сітках */ --lp-maxw: 1120px; /* контентна ширина */ } /* ── База сторінки ───────────────────────────────────────────────────── */ html:has(body.lp) { scroll-behavior: smooth; } body.lp { background: var(--bg); color: var(--ink); font-family: var(--font-sans); font-size: var(--lp-fs-body); line-height: var(--lh-body); letter-spacing: -0.02em; -webkit-text-size-adjust: 100%; } body.lp img { max-width: 100%; } body.lp [id] { scroll-margin-top: 24px; } body.lp a:focus-visible, body.lp button:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; } .lp-section--orange a:focus-visible, .lp-section--orange button:focus-visible { outline-color: #000; } /* ── Контейнер і секції ──────────────────────────────────────────────── */ .lp-container { width: 100%; max-width: var(--lp-maxw); margin-inline: auto; padding-inline: clamp(20px, 5vw, 48px); box-sizing: border-box; } .lp-section { position: relative; padding-block: var(--lp-sect); background: var(--bg); color: var(--ink); overflow: hidden; } .lp-section--panel { background: var(--panel); } .lp-section--light { background: var(--light); color: var(--on-light); } .lp-section--orange { background: var(--orange); color: var(--on-orange); } .lp-section--tight { padding-block: calc(var(--lp-sect) * .55); } /* ── Типографіка лендінга (fluid-аналоги .t-*) ───────────────────────── */ .lp-mega { margin: 0; font-family: var(--font-display-wide); font-weight: 900; font-size: var(--lp-fs-mega); line-height: 1; letter-spacing: var(--track-tight); text-transform: uppercase; } .lp-h1 { margin: 0; font-family: var(--font-display); font-weight: 600; font-size: var(--lp-fs-h1); line-height: var(--lh-display); letter-spacing: var(--track-tight); text-transform: uppercase; } .lp-h2 { margin: 0; font-family: var(--font-display); font-weight: 600; font-size: var(--lp-fs-h2); line-height: 1.05; letter-spacing: var(--track-tight); text-transform: uppercase; } .lp-lead { margin: 0; font-size: var(--lp-fs-lead); line-height: 1.45; letter-spacing: -0.02em; color: var(--body-c); } .lp-section--light .lp-lead { color: var(--on-light-soft); } .lp-section--orange .lp-lead { color: var(--on-orange-soft); } .lp-eyebrow { margin: 0 0 14px; font-family: var(--font-mono); font-weight: 500; font-size: var(--lp-fs-mono); line-height: 1.3; letter-spacing: var(--track-mono); text-transform: uppercase; color: var(--pager); } .lp-eyebrow .a, .lp-h1 .a, .lp-h2 .a, .lp-mega .a { color: var(--orange); } .lp-section--orange .lp-eyebrow { color: var(--on-orange-soft); } .lp-section--light .lp-eyebrow { color: var(--on-light-soft); } /* Шапка секції: eyebrow + заголовок + необовʼязковий лід */ .lp-head { max-width: 780px; margin-bottom: clamp(28px, 5vw, 56px); } .lp-head .lp-lead { margin-top: 14px; } .lp-head--center { margin-inline: auto; text-align: center; } /* ── Сітки: 1 колонка → 2 → 3/4 ──────────────────────────────────────── */ .lp-grid { display: grid; grid-template-columns: 1fr; gap: var(--lp-gap); } @media (min-width: 640px) { .lp-grid--2, .lp-grid--3, .lp-grid--4 { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1024px) { .lp-grid--3 { grid-template-columns: repeat(3, 1fr); } .lp-grid--4 { grid-template-columns: repeat(4, 1fr); } } /* ── Кнопки: гострі кути, mono-капс; радіус НЕ ставити (бренд) ───────── */ .lp-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 15px 26px; box-sizing: border-box; font-family: var(--font-mono); font-weight: 500; font-size: 14px; letter-spacing: var(--track-mono); text-transform: uppercase; line-height: 1.1; text-decoration: none; cursor: pointer; text-align: center; border: 1px solid transparent; border-radius: 0; background: var(--orange); color: #000; transition: background .15s ease, color .15s ease, border-color .15s ease; } .lp-btn:hover { background: var(--orange-deep); color: #000; } .lp-btn--ghost { background: transparent; color: var(--ink); border-color: var(--line-strong); } .lp-btn--ghost:hover { background: transparent; color: var(--orange); border-color: var(--orange); } .lp-section--light .lp-btn--ghost { color: var(--on-light); border-color: var(--line-on-light); } .lp-section--light .lp-btn--ghost:hover { color: var(--orange-deep); border-color: var(--orange-deep); } .lp-btn--dark { background: #000; color: var(--ink); } /* для помаранчевих секцій */ .lp-btn--dark:hover { background: var(--panel); color: var(--ink); } .lp-btn--lime { background: var(--lime); color: #000; } /* ТІЛЬКИ «Сектор Трійки» */ .lp-btn--lime:hover { background: var(--lime); color: #000; opacity: .85; } .lp-actions { display: flex; flex-wrap: wrap; gap: 12px; } @media (max-width: 639px) { .lp-actions .lp-btn { flex: 1 1 100%; } } /* ── Клікабельні контакти (tel: / mailto: / t.me) ────────────────────── */ .lp-contacts { display: flex; flex-direction: column; gap: 12px; font-family: var(--font-mono); font-weight: 500; font-size: var(--lp-fs-mono); letter-spacing: var(--track-mono); text-transform: uppercase; } @media (min-width: 640px) { .lp-contacts { flex-direction: row; flex-wrap: wrap; gap: 14px 34px; } } .lp-contacts .k { color: inherit; } a.lp-contact-link { color: inherit; opacity: .72; text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; word-break: break-all; } a.lp-contact-link:hover { opacity: 1; color: var(--orange); } .lp-section--orange a.lp-contact-link { color: var(--on-orange); opacity: .62; } .lp-section--orange a.lp-contact-link:hover { color: var(--on-orange); opacity: 1; } /* ── Медіа-рамка під фото (працює з .ph-photo/.bg-img з effects.css) ─── */ .lp-media { position: relative; overflow: hidden; aspect-ratio: 16 / 10; } .lp-media--tall { aspect-ratio: 4 / 5; } .lp-media > .ph-photo, .lp-media > .bg-img, .lp-media > .scrim-bottom, .lp-media > .scrim-left { position: absolute; inset: 0; } /* ── Дрібниці ────────────────────────────────────────────────────────── */ .lp-hairline { height: 1px; background: var(--line); border: 0; margin: 0; } .lp-section--light .lp-hairline { background: var(--line-on-light); } .lp-section--orange .lp-hairline { background: var(--line-on-orange); }