/* ========================================================================== Отдел Линейного Счастья Страница-визитка + юридические документы (оферта, оплата, ПДн). Шрифты подключаются -ом в : @import здесь заставил бы браузер ждать разбора CSS перед запросом шрифтов. ========================================================================== */ /* --- Токены ------------------------------------------------------------- */ :root { /* Цвет */ --bg: oklch(1 0 0); --surface: oklch(0.968 0.006 152); --surface-2: oklch(0.938 0.010 152); --ink: oklch(0.20 0.022 152); --muted: oklch(0.50 0.014 152); --primary: oklch(0.42 0.105 152); --primary-deep: oklch(0.30 0.078 152); --accent: oklch(0.60 0.195 305); --accent-deep: oklch(0.44 0.175 305); --accent-deeper: oklch(0.35 0.145 305); /* Акцент для текста поверх зелёной полосы: насыщенный вариант там нечитаем */ --accent-on-primary: oklch(0.86 0.085 305); --on-primary: oklch(0.985 0.004 152); --on-primary-muted: oklch(0.86 0.026 152); --rule: color-mix(in oklch, var(--primary) 18%, transparent); --rule-strong: color-mix(in oklch, var(--primary) 38%, transparent); /* Шрифт */ --font-display: 'Unbounded', system-ui, sans-serif; --font-text: 'Golos Text', system-ui, -apple-system, sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, 'Cascadia Mono', monospace; /* Ритм */ --container: 1200px; --container-narrow: 760px; --gutter: clamp(1.25rem, 4vw, 3rem); /* Движение */ --ease: cubic-bezier(0.16, 1, 0.3, 1); --dur-fast: 180ms; --dur: 320ms; /* Слои */ --z-sticky: 100; --z-modal: 300; } /* --- Сброс и основа ----------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 6rem; } body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font-text); font-size: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem); line-height: 1.65; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; } img, svg { max-width: 100%; display: block; } h1, h2, h3 { font-family: var(--font-display); font-weight: 700; line-height: 1.08; letter-spacing: -0.03em; text-wrap: balance; margin: 0; } p { margin: 0; text-wrap: pretty; } a { color: var(--accent-deep); text-underline-offset: 0.22em; } a:hover { color: var(--accent); } :focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 2px; } ::selection { background: var(--accent); color: var(--on-primary); } /* --- Каркас ------------------------------------------------------------- */ .container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); } .container--narrow { max-width: var(--container-narrow); } .skip-link { position: absolute; top: 0; left: 50%; transform: translate(-50%, -120%); z-index: var(--z-modal); background: var(--accent-deep); color: var(--on-primary); padding: 0.75rem 1.5rem; font-weight: 600; text-decoration: none; transition: transform var(--dur) var(--ease); } .skip-link:focus-visible { transform: translate(-50%, 0); color: var(--on-primary); } /* Зелёная полоса, несущая бренд */ .band { background: var(--primary); color: var(--on-primary); position: relative; isolation: isolate; } .band a { color: var(--on-primary); } .band h1, .band h2, .band h3 { color: var(--on-primary); } /* --- Шапка -------------------------------------------------------------- */ .site-header { position: sticky; top: 0; z-index: var(--z-sticky); background: color-mix(in oklch, var(--primary-deep) 92%, transparent); backdrop-filter: saturate(140%) blur(10px); border-bottom: 1px solid color-mix(in oklch, var(--on-primary) 15%, transparent); color: var(--on-primary); } .site-header__inner { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; min-height: 4.5rem; } .wordmark { display: flex; align-items: center; gap: 0.75rem; text-decoration: none; color: var(--on-primary); font-family: var(--font-display); font-weight: 700; font-size: 0.9375rem; letter-spacing: -0.02em; line-height: 1.15; } .wordmark__seal { width: 2.25rem; height: 2.25rem; flex: 0 0 auto; border: 1.5px solid var(--on-primary); border-radius: 50%; display: grid; place-items: center; font-family: var(--font-mono); font-size: 0.6875rem; font-weight: 500; } .wordmark__text small { display: block; font-family: var(--font-mono); font-size: 0.5625rem; font-weight: 400; letter-spacing: 0.16em; text-transform: uppercase; color: var(--on-primary-muted); margin-top: 0.1rem; } .nav { display: flex; align-items: center; gap: clamp(1rem, 2.2vw, 2rem); } .nav a { color: var(--on-primary-muted); text-decoration: none; font-size: 0.9375rem; font-weight: 500; padding: 0.4rem 0; border-bottom: 2px solid transparent; transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease); } .nav a:hover { color: var(--on-primary); border-bottom-color: var(--accent); } .nav a.btn { border-bottom: 1.5px solid var(--accent-deep); } .nav-toggle { display: none; background: none; border: 1px solid color-mix(in oklch, var(--on-primary) 35%, transparent); color: var(--on-primary); font-family: var(--font-mono); font-size: 0.75rem; padding: 0.5rem 0.85rem; cursor: pointer; border-radius: 2px; } /* --- Кнопки ------------------------------------------------------------- */ .btn { display: inline-flex; align-items: center; gap: 0.6rem; font-family: var(--font-text); font-weight: 600; font-size: 1rem; line-height: 1; padding: 1rem 1.6rem; border: 1.5px solid transparent; border-radius: 2px; text-decoration: none; cursor: pointer; transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease); } .btn:active { transform: translateY(1px); } /* Заливка — --accent-deep, а не --accent: на светлом акценте белый текст даёт лишь 2.8:1, на углублённом — около 8:1. */ .btn--primary { background: var(--accent-deep); color: var(--on-primary); border-color: var(--accent-deep); } .btn--primary:hover { background: var(--accent-deeper); border-color: var(--accent-deeper); color: var(--on-primary); } .btn--ghost { background: transparent; color: var(--on-primary); border-color: color-mix(in oklch, var(--on-primary) 45%, transparent); } .btn--ghost:hover { background: color-mix(in oklch, var(--on-primary) 12%, transparent); color: var(--on-primary); border-color: var(--on-primary); } /* --- Первый экран ------------------------------------------------------- */ .hero { position: relative; padding-block: clamp(4rem, 9vw, 7.5rem); overflow: hidden; } .hero__guilloche { position: absolute; top: 50%; right: -14vw; translate: 0 -50%; width: min(74vw, 780px); aspect-ratio: 1; opacity: 0.22; pointer-events: none; z-index: -1; /* Свой слой: векторные штрихи растрируются один раз, кадры — только поворот */ will-change: transform; animation: spin 140s linear infinite; } @keyframes spin { to { rotate: 360deg; } } .hero__inner { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: clamp(2rem, 5vw, 4rem); align-items: start; } .hero__doc-no { font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--on-primary-muted); border-bottom: 1px solid color-mix(in oklch, var(--on-primary) 25%, transparent); padding-bottom: 0.85rem; margin-bottom: clamp(1.75rem, 4vw, 2.75rem); display: flex; flex-wrap: wrap; gap: 0.5rem 1.75rem; } .hero h1 { /* Нижняя граница подобрана так, чтобы самое длинное слово умещалось в контейнер на 360px. Страховка ниже — на случай правок текста. */ font-size: clamp(2.25rem, 1.1rem + 5.6vw, 6rem); font-weight: 900; letter-spacing: -0.038em; margin-bottom: clamp(1.5rem, 3vw, 2rem); overflow-wrap: break-word; } .hero h1 .line { display: block; } /* Подчёркивание рисуем фоном, а не псевдоэлементом: фраза свободно переносится на узких экранах, и полоса повторяется на каждой строке. */ .hero h1 em { font-style: normal; color: var(--on-primary); background-image: linear-gradient(to top, var(--accent) 0.13em, transparent 0.13em); background-position: 0 -0.04em; -webkit-box-decoration-break: clone; box-decoration-break: clone; } .hero__lead { font-size: clamp(1.125rem, 1rem + 0.6vw, 1.5rem); line-height: 1.5; color: var(--on-primary); max-width: 46ch; margin-bottom: clamp(2rem, 4vw, 2.75rem); } /* Вторая фраза — приписка мелким шрифтом, как сноска на бланке: шутка звучит суше, когда её подают как служебное примечание. */ .hero__lead span { display: block; margin-top: 0.9rem; /* Свой размер, а не доля от лида: при em приписка падала до 12px на телефоне */ font-size: clamp(0.9375rem, 0.86rem + 0.28vw, 1.0625rem); line-height: 1.55; color: var(--on-primary-muted); max-width: 42ch; } .hero__actions { display: flex; flex-wrap: wrap; gap: 0.875rem; } /* --- Печать ------------------------------------------------------------- */ /* Насыщенная штемпельная краска на зелёном даёт около 1.9:1 — оттиск мылится. Берём осветлённый акцент: те же 305°, но читаемый контраст. */ .stamp { width: clamp(9.5rem, 15vw, 13rem); aspect-ratio: 1; flex: 0 0 auto; rotate: -6deg; color: var(--accent-on-primary); } .stamp text { font-family: var(--font-mono); font-weight: 500; } /* --- Секция приложений и тарифов ---------------------------------------- */ .section { padding-block: clamp(4rem, 9vw, 7rem); } .section__head { max-width: 60ch; margin-bottom: clamp(2.25rem, 5vw, 3.5rem); } .section__head h2 { font-size: clamp(1.75rem, 1.3rem + 2vw, 2.75rem); margin-bottom: 0.85rem; } .section__head p { color: var(--muted); font-size: clamp(1rem, 0.95rem + 0.25vw, 1.1875rem); } /* Панель-«бланк»: реестровая карточка приложения */ .app { border: 1.5px solid var(--rule-strong); border-radius: 3px; overflow: hidden; background: var(--bg); } .app__head { padding: clamp(1.5rem, 3.5vw, 2.5rem); border-bottom: 1.5px solid var(--rule-strong); } .app__id { display: flex; flex-wrap: wrap; gap: 0.4rem 1.5rem; font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); margin-bottom: 1.1rem; } .app__name { font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2.125rem); margin-bottom: 0.85rem; } .app__desc { color: var(--muted); max-width: 62ch; font-size: 1rem; } /* Два тарифа рядом, разделены линовкой бланка */ .tariffs { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); } .tariff { padding: clamp(1.5rem, 3.5vw, 2.5rem); display: flex; flex-direction: column; gap: 0.85rem; border-right: 1px solid var(--rule); } .tariff:last-child { border-right: 0; } /* Платный тариф выделяем заливкой и штемпельной линией сверху */ .tariff--featured { background: var(--surface); box-shadow: inset 0 3px 0 var(--accent-deep); } .tariff__code { font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.13em; text-transform: uppercase; color: var(--muted); } .tariff__name { font-family: var(--font-display); font-size: 1.375rem; font-weight: 700; letter-spacing: -0.025em; } .tariff__price { font-family: var(--font-display); font-size: clamp(1.875rem, 1.5rem + 1.4vw, 2.5rem); font-weight: 900; letter-spacing: -0.04em; line-height: 1; color: var(--primary); } .tariff__price small { display: block; margin-top: 0.5rem; font-family: var(--font-mono); font-size: 0.6875rem; font-weight: 400; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); } .tariff__list { list-style: none; margin: 0.35rem 0 0; padding: 0; display: grid; gap: 0.6rem; font-size: 0.9375rem; color: var(--ink); } .tariff__list li { display: grid; grid-template-columns: 1.15rem 1fr; gap: 0.55rem; align-items: start; } .tariff__list li::before { content: "✓"; color: var(--accent-deep); font-size: 0.8125rem; line-height: 1.7; } /* Периоды подписки — как строки прейскуранта */ .tariff__periods { margin-top: 0.35rem; border-top: 1px solid var(--rule); } .tariff__periods div { display: grid; grid-template-columns: 1fr auto auto; align-items: baseline; gap: 0.4rem 1rem; padding-block: 0.7rem; border-bottom: 1px solid var(--rule); } .tariff__periods div:last-child { border-bottom: 0; } .tariff__periods span { font-size: 0.9375rem; color: var(--ink); } .tariff__periods b { font-family: var(--font-mono); font-weight: 500; font-size: 0.9375rem; color: var(--ink); } .tariff__periods small { font-family: var(--font-mono); font-size: 0.6875rem; color: var(--accent-deep); min-width: 5.5rem; text-align: right; } .app__note { padding: clamp(1.1rem, 2.5vw, 1.5rem) clamp(1.5rem, 3.5vw, 2.5rem); border-top: 1.5px solid var(--rule-strong); background: var(--surface); font-size: 0.875rem; color: var(--muted); max-width: none; } /* --- Юридические документы ---------------------------------------------- */ .doc-header { background: var(--primary); color: var(--on-primary); padding-block: clamp(2.75rem, 6vw, 4.5rem); } .doc-header h1 { font-size: clamp(1.75rem, 1.3rem + 2vw, 2.75rem); margin-bottom: 0.85rem; } .doc-header p { color: var(--on-primary-muted); max-width: 60ch; } .doc-header a { color: var(--on-primary); } .doc-meta { font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--on-primary-muted); margin-bottom: 1.25rem; display: flex; flex-wrap: wrap; gap: 0.4rem 1.5rem; } .doc { padding-block: clamp(2.5rem, 5vw, 4rem) clamp(4rem, 8vw, 6rem); font-size: 0.9375rem; line-height: 1.75; } .doc h2 { font-size: clamp(1.1875rem, 1.05rem + 0.7vw, 1.5rem); margin-top: clamp(2.5rem, 5vw, 3.25rem); margin-bottom: 1.15rem; padding-bottom: 0.6rem; border-bottom: 1.5px solid var(--rule-strong); display: grid; grid-template-columns: 2.25rem minmax(0, 1fr); gap: 0.5rem; align-items: baseline; } .doc h2 span { font-family: var(--font-mono); font-size: 0.8125rem; font-weight: 500; color: var(--accent-deep); } .doc__subhead { font-family: var(--font-mono); font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); margin: 1.75rem 0 0.85rem; } .doc ol { padding-left: 0; margin: 0; list-style: none; counter-reset: clause; } .doc ol > li { counter-increment: clause; display: grid; grid-template-columns: 2.75rem minmax(0, 1fr); gap: 0.5rem; margin-bottom: 0.9rem; } .doc ol > li::before { content: counter(clause) '.'; font-family: var(--font-mono); font-size: 0.8125rem; color: var(--muted); padding-top: 0.12rem; } /* Пункт списка — grid из колонки номера и колонки текста. Вложенные блоки надо явно ставить во вторую колонку, иначе автораскладка роняет их в колонку номера шириной 2.75rem и текст вылезает наружу. */ .doc ol > li > ul, .doc ol > li > ol, .doc ol > li > p { grid-column: 2; } .doc ul { padding-left: 1.15rem; margin: 0.6rem 0; color: var(--muted); } .doc ul li { margin-bottom: 0.45rem; } .doc p + p { margin-top: 0.9rem; } .doc dl { margin: 0; border: 1.5px solid var(--rule-strong); border-radius: 3px; overflow: hidden; } .doc dl > div { display: grid; grid-template-columns: 13rem minmax(0, 1fr); gap: 1rem; padding: 0.85rem clamp(0.9rem, 2vw, 1.35rem); border-bottom: 1px solid var(--rule); } .doc dl > div:last-child { border-bottom: 0; } .doc dl > div:nth-child(even) { background: var(--surface-2); } .doc dt { font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.09em; text-transform: uppercase; color: var(--muted); padding-top: 0.25rem; } .doc dd { margin: 0; font-weight: 500; overflow-wrap: break-word; } .doc__toc { background: var(--surface); border: 1.5px solid var(--rule-strong); border-radius: 3px; padding: clamp(1.25rem, 2.5vw, 1.75rem); margin-bottom: clamp(2rem, 4vw, 3rem); } .doc__toc h2 { all: unset; display: block; font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.13em; text-transform: uppercase; color: var(--muted); margin-bottom: 0.85rem; } .doc__toc ol { counter-reset: toc; } .doc__toc ol > li { counter-increment: toc; margin-bottom: 0.4rem; } .doc__toc ol > li::before { content: counter(toc) '.'; } .doc__toc a { font-size: 0.9375rem; } .callout { background: var(--surface); border: 1.5px solid var(--rule-strong); border-radius: 3px; padding: clamp(1.15rem, 2.5vw, 1.6rem); margin-block: 1.5rem; color: var(--ink); } .callout strong { display: block; margin-bottom: 0.4rem; } /* --- Подвал ------------------------------------------------------------- */ .site-footer { background: var(--primary-deep); color: var(--on-primary-muted); padding-block: clamp(3rem, 6vw, 4.5rem) 2rem; position: relative; overflow: hidden; } .site-footer__guilloche { position: absolute; bottom: -40%; left: -8%; width: min(52vw, 520px); aspect-ratio: 1; opacity: 0.12; pointer-events: none; will-change: transform; animation: spin 180s linear infinite reverse; } .site-footer__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: clamp(2rem, 4vw, 3.5rem); position: relative; } .site-footer h2, .site-footer h3 { font-family: var(--font-mono); font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.13em; text-transform: uppercase; color: var(--on-primary); margin-bottom: 1.15rem; } .site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; } .site-footer a { color: var(--on-primary-muted); font-size: 0.9375rem; } .site-footer a:hover { color: var(--on-primary); text-decoration-color: var(--accent); } .requisites { font-family: var(--font-mono); font-size: 0.75rem; line-height: 1.9; color: var(--on-primary-muted); overflow-wrap: break-word; } .requisites b { color: var(--on-primary); font-weight: 500; } .site-footer__bottom { margin-top: clamp(2.5rem, 5vw, 3.5rem); padding-top: 1.5rem; border-top: 1px solid color-mix(in oklch, var(--on-primary) 16%, transparent); display: flex; flex-wrap: wrap; gap: 1rem 2rem; justify-content: space-between; align-items: center; font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.04em; position: relative; } .pay-methods { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; } .pay-methods span { border: 1px solid color-mix(in oklch, var(--on-primary) 28%, transparent); border-radius: 2px; padding: 0.28rem 0.55rem; font-size: 0.625rem; letter-spacing: 0.08em; text-transform: uppercase; } /* --- Адаптив ------------------------------------------------------------ */ @media (max-width: 960px) { .hero__inner { grid-template-columns: minmax(0, 1fr); } .stamp { justify-self: start; rotate: -6deg; } .doc dl > div { grid-template-columns: minmax(0, 1fr); gap: 0.25rem; } } /* Тарифы столбцом: убираем вертикальный разделитель, ставим горизонтальный */ @media (max-width: 620px) { .tariff { border-right: 0; border-bottom: 1px solid var(--rule); } .tariff:last-child { border-bottom: 0; } } @media (max-width: 720px) { .nav { display: none; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 0; background: var(--primary-deep); border-bottom: 1px solid color-mix(in oklch, var(--on-primary) 15%, transparent); padding: 0.5rem var(--gutter) 1.25rem; } .nav.is-open { display: flex; } .nav a { padding: 0.85rem 0; border-bottom: 1px solid color-mix(in oklch, var(--on-primary) 12%, transparent); } .nav a.btn { margin-top: 0.85rem; justify-content: center; } .nav-toggle { display: block; } .site-header__inner { position: relative; } .hero__guilloche { right: -35vw; opacity: 0.14; } } @media (max-width: 480px) { .doc ol > li { grid-template-columns: 2.25rem minmax(0, 1fr); } } /* --- Уважение к настройкам движения ------------------------------------- */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } .hero__guilloche, .site-footer__guilloche { animation: none !important; } .btn:active { transform: none; } } /* --- Печать документа --------------------------------------------------- */ @media print { .site-header, .site-footer, .skip-link, .doc__toc { display: none; } body { color: #000; background: #fff; font-size: 11pt; } .doc-header { background: none; color: #000; padding-block: 0 1rem; } .doc-header p, .doc-meta { color: #333; } .doc h2 { break-after: avoid; } .doc ol > li { break-inside: avoid; } }