/* ============================================================ Онлайн-школа турагентов, общая стилевая система Палитра: глубокий океанский тил + холодный офф-вайт + один акцент цвета заката. Скругления: панели 20px, кнопки pill, поля ввода 12px (правило одно на весь сайт). ============================================================ */ :root { /* Только light: иначе браузер сам красит полосы прокрутки и поля ввода по системной настройке, и на тёмной системе светлый сайт получал бы тёмный скроллбар. */ color-scheme: light; --paper: #f6f8f7; --paper-2: #eaf0ee; --panel: #ffffff; --ink: #10241f; --ink-soft: #4d635d; --deep: #0e4d44; --deep-2: #0a3a33; --accent: #d9573a; --accent-hi: #e86b4d; --on-accent: #ffffff; --line: rgba(16, 36, 31, 0.13); --line-soft: rgba(16, 36, 31, 0.07); /* сцена в шапке */ --sky-top: #bfe0e4; --sky-bot: #f0dfcd; --sun: #f2b46b; --sea-far: #2f8f92; --sea-mid: #1d7275; --sea-near: #12595e; --sand: #e6d6bd; --sand-2: #d8c4a6; --trunk: #6b5137; --frond: #1f7a5c; --frond-2: #2c9670; --screen: #cfeef0; /* Значения, отличающиеся между темами. Вынесены в токены, иначе принудительное переключение темы их бы не затронуло. */ --figure: var(--deep); /* крупные цифры и маркеры */ --glass-border: rgba(16, 36, 31, 0.09); --glass-inset: rgba(255, 255, 255, 0.5); --bg-photo: 0.72; /* видимость размытого фона */ /* Тени подкрашены в тон фона: чистый чёрный на светлом выглядит дёшево. */ --shadow-sm: 0 1px 2px rgba(10, 58, 51, 0.05), 0 6px 18px rgba(10, 58, 51, 0.05); --shadow-md: 0 2px 6px rgba(10, 58, 51, 0.06), 0 24px 60px rgba(10, 58, 51, 0.10); --shadow-lg: 0 4px 10px rgba(10, 58, 51, 0.07), 0 40px 110px rgba(10, 58, 51, 0.16); --r-panel: 26px; --r-inner: 20px; /* вложенный радиус для двойной оправы */ --r-field: 14px; /* Тяжёлая кривая с длинным выбегом: движение читается как масса, а не как линейный сдвиг. */ --ease: cubic-bezier(0.32, 0.72, 0, 1); --ease-soft: cubic-bezier(0.22, 1, 0.36, 1); /* Было 1240px, отчего по краям оставались широкие пустые поля. Теперь контейнер тянется почти во всю ширину экрана. */ --wrap: min(1640px, 93vw); --gutter: max(20px, calc((100vw - var(--wrap)) / 2)); } /* Тёмная тема включается только явным выбором человека: атрибут data-theme ставит переключатель в шапке или параметр ?theme=dark. Системную настройку намеренно не слушаем: сайт по умолчанию светлый, независимо от того, что стоит на компьютере у посетителя. Раньше здесь лежала копия этой же палитры под @media (prefers-color-scheme: dark), то есть один и тот же набор переменных в двух местах. Теперь он один. */ :root[data-theme="dark"] { color-scheme: dark; --paper: #0b1a18; --paper-2: #102523; --panel: #122b28; --ink: #e8f1ee; --ink-soft: #9db3ad; --deep: #0d423b; --deep-2: #081f1c; --accent: #e86b4d; --accent-hi: #f0836a; --on-accent: #16110f; --line: rgba(232, 241, 238, 0.16); --line-soft: rgba(232, 241, 238, 0.08); --sky-top: #123043; --sky-bot: #4a2f3f; --sun: #e08a52; --sea-far: #14535c; --sea-mid: #0f424b; --sea-near: #0a323a; --sand: #3a3040; --sand-2: #2c2634; --trunk: #3d3026; --frond: #14564a; --frond-2: #1c6b58; --screen: #a9e4e8; --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3), 0 4px 14px rgba(0, 0, 0, 0.25); --shadow-md: 0 2px 6px rgba(0, 0, 0, 0.35), 0 18px 44px rgba(0, 0, 0, 0.4); --figure: var(--screen); --glass-border: rgba(255, 255, 255, 0.10); --glass-inset: rgba(255, 255, 255, 0.12); --bg-photo: 0.5; } /* ---------- база ---------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { margin: 0; background: var(--paper); color: var(--ink); font-family: "Manrope", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; font-size: 17px; line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: hidden; } h1, h2, h3, .display { font-family: "Unbounded", "Manrope", ui-sans-serif, system-ui, sans-serif; font-weight: 600; letter-spacing: -0.02em; line-height: 1.12; margin: 0; text-wrap: balance; } p { margin: 0; max-width: 62ch; } a { color: inherit; } img { max-width: 100%; display: block; } .wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; } @media (max-width: 640px) { body { font-size: 16px; } .wrap { padding-inline: 4px; } } /* Плёночное зерно: фиксированный слой поверх страницы, не участвует в прокрутке и не ловит курсор. На скролл-контейнерах такой фильтр перерисовывался бы каждый кадр и сажал бы производительность. */ body::after { content: ""; position: fixed; inset: 0; z-index: 60; pointer-events: none; opacity: 0.035; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E"); } /* Отступы срезаны примерно на треть: прежние clamp(72,11vw,148) давали слишком много пустоты между блоками. */ .section { padding-block: clamp(56px, 7vw, 104px); } .section--tight { padding-block: clamp(42px, 5vw, 76px); } /* ---------- заставка загрузки ---------- */ .boot { position: fixed; inset: 0; z-index: 70; display: grid; place-items: center; background: var(--paper); transition: opacity 0.7s var(--ease); } .boot.is-done { opacity: 0; pointer-events: none; } .boot__inner { display: grid; justify-items: center; gap: 22px; padding: 0 24px; text-align: center; } .boot__brand { font-family: "Unbounded", sans-serif; font-weight: 600; font-size: clamp(20px, 2.6vw, 28px); letter-spacing: -0.02em; } .boot__brand span { color: var(--accent); } /* Маршрут вместо полосы загрузки: подпись обещает «собираем ваш маршрут», и картинка говорит ровно об этом, а не про проценты. */ .boot__route { width: min(600px, 86vw); height: auto; overflow: visible; /* Почти ровная скорость. Фирменный --ease здесь не годится: он сильно разгоняет начало, и точка «выстреливала» к концу маршрута за первую четверть, вместо того чтобы ехать по нему. */ --boot-ease: cubic-bezier(0.45, 0.05, 0.55, 0.95); } .boot__line { stroke: var(--line); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 100; } /* Бегущая точка: тот же контур, но штрих почти нулевой длины с круглым концом. Двигая смещение штриха, катим точку по кривой. */ .boot__runner { stroke: var(--accent); stroke-width: 9; stroke-linecap: round; stroke-dasharray: 0.001 100; stroke-dashoffset: 100; opacity: 0; } .boot__pin { fill: var(--paper); stroke: var(--line); stroke-width: 2; /* Иначе точка масштабировалась бы от начала координат SVG, а не от собственного центра, и разъезжалась по холсту. */ transform-box: fill-box; transform-origin: center; } .boot__pin--last { fill: var(--accent); stroke: var(--accent); } @media (prefers-reduced-motion: no-preference) { /* Линия и точка живут по одному расписанию и одной кривой скорости, поэтому точка едет ровно по кончику прокладываемого маршрута. */ /* Цикл 2с и держится он же: заставка снимается ровно после одного полного прохода, поэтому маршрут никогда не обрывается на середине. Само рисование занимает 78% цикла, остальное -- пауза на готовом маршруте перед тем, как экран уйдёт. */ .boot__line { animation: bootDraw 2s var(--boot-ease) infinite; } .boot__runner { animation: bootRun 2s var(--boot-ease) infinite; } .boot__pin { transform: scale(0); opacity: 0; /* Остановка загорается в тот момент, когда точка до неё доезжает, и больше не гаснет: проход один, fill-mode both держит и состояние до старта, и после. Зациклить их нельзя -- у первой остановки отрицательная задержка, её цикл кончался раньше остальных, и она успевала мигнуть прямо перед уходом заставки. Если загрузка затянулась, линия с точкой продолжают ездить по уже найденному маршруту, а остановки просто горят. */ animation: bootPin 2s var(--boot-ease) both; animation-delay: calc(var(--i) * 0.52s - 0.16s); } } /* Без анимации показываем готовый маршрут, а не пустой холст. */ @media (prefers-reduced-motion: reduce) { .boot__line { stroke-dashoffset: 0; } } @keyframes bootDraw { 0% { stroke-dashoffset: 100; } 78%, 100% { stroke-dashoffset: 0; } } /* Промежуточных ключей для прозрачности намеренно нет до 78%: лишний ключ разбил бы плавную интерполяцию смещения штриха, и точка дёргалась бы на этом кадре. */ @keyframes bootRun { 0% { stroke-dashoffset: 100; opacity: 1; } 78% { stroke-dashoffset: 0; opacity: 1; } 90%, 100% { stroke-dashoffset: 0; opacity: 0; } } @keyframes bootPin { 0%, 6% { transform: scale(0); opacity: 0; } 16% { transform: scale(1.35); opacity: 1; } 26%, 100% { transform: scale(1); opacity: 1; } } .boot__note { font-size: 14px; color: var(--ink-soft); max-width: 34ch; } /* ---------- согласие на cookie ---------- */ /* Плашка не перекрывает страницу и не требует выбора, чтобы читать дальше: закон требует информировать и дать отказаться, а не держать человека в заложниках у модального окна. */ .cookie { position: fixed; left: 50%; bottom: clamp(14px, 2.5vh, 26px); transform: translate(-50%, 150%); z-index: 60; width: min(900px, calc(100vw - 28px)); display: flex; align-items: center; flex-wrap: wrap; gap: clamp(14px, 2vw, 30px); padding: 16px 20px; border-radius: var(--r-panel); background: color-mix(in srgb, var(--paper) 90%, transparent); border: 1px solid var(--glass-border); backdrop-filter: blur(20px) saturate(160%); -webkit-backdrop-filter: blur(20px) saturate(160%); box-shadow: 0 18px 50px rgba(10, 28, 24, 0.22); transition: transform 0.7s var(--ease), opacity 0.5s var(--ease); } .cookie.is-in { transform: translate(-50%, 0); } .cookie.is-out { transform: translate(-50%, 150%); opacity: 0; } .cookie__text { flex: 1 1 320px; margin: 0; font-size: 14px; line-height: 1.55; color: var(--ink-soft); } .cookie__text a { color: var(--ink); text-underline-offset: 3px; } .cookie__actions { display: flex; gap: 10px; flex: none; } /* Своя кнопка, а не .btn--primary: у той в правом краю кружок со стрелкой, а «Принять» никуда не ведёт. */ .cookie__btn { font: inherit; font-weight: 700; font-size: 14px; padding: 11px 22px; border-radius: 999px; border: 1px solid transparent; cursor: pointer; white-space: nowrap; transition: background-color 0.25s var(--ease), border-color 0.25s var(--ease), transform 0.25s var(--ease); } .cookie__btn:active { transform: scale(0.98); } .cookie__btn:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; } .cookie__btn--yes { background: var(--accent); color: var(--on-accent); } .cookie__btn--yes:hover { background: var(--accent-hi); } .cookie__btn--no { background: transparent; color: var(--ink); border-color: var(--glass-border); } .cookie__btn--no:hover { border-color: var(--ink-soft); } @media (max-width: 560px) { .cookie { padding: 16px; gap: 14px; } .cookie__actions { width: 100%; } .cookie__btn { flex: 1 1 0; padding: 12px 10px; } } @media (prefers-reduced-motion: reduce) { .cookie { transition: opacity 0.3s linear; } } .eyebrow { font-size: 12.5px; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 700; color: var(--accent); margin: 0 0 18px; } .lead { font-size: clamp(17px, 1.6vw, 20px); color: var(--ink-soft); line-height: 1.62; } .h-xl { font-size: clamp(38px, 6.4vw, 76px); } .h-lg { font-size: clamp(30px, 4.4vw, 52px); } .h-md { font-size: clamp(22px, 2.6vw, 31px); } .h-sm { font-size: clamp(18px, 2vw, 22px); } /* ---------- кнопки ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; white-space: nowrap; padding: 15px 30px; border-radius: 999px; border: 1px solid transparent; font: inherit; font-weight: 700; font-size: 16px; text-decoration: none; cursor: pointer; transition: transform 0.25s var(--ease), background-color 0.25s var(--ease), border-color 0.25s var(--ease), color 0.25s var(--ease), box-shadow 0.25s var(--ease); } .btn:hover { transform: translateY(-2px); } .btn:active { transform: translateY(0) scale(0.97); } /* Вложенный кружок со стрелкой у главной кнопки. Стрелка собрана из двух границ повёрнутого квадрата. Первый вариант рисовал её диагональными градиентами в коробке 9x2px, где диагональ вырождалась в грязную полосу. Размеры вынесены в переменные не для красоты: позиция стрелки была прибита числом 25px под поле 8px, а модификатор .btn--sm задаёт padding шорткатом и перебивает это поле на 22px, из-за чего стрелка уезжала из кружка ровно на разницу. Теперь она считается от полей. */ .btn--primary { --btn-pad-r: 8px; --btn-circle: 34px; --btn-gap: 14px; /* Кружок выведен из потока и прибит к правому краю, к тому же якорю, что и стрелка. Пока он был flex-элементом, всё сходилось только на кнопке по размеру содержимого: на телефоне кнопки растягиваются на всю ширину, текст с кружком оставались по центру, а стрелка уезжала к краю, и кружок оказывался сам по себе. Ширину кружка теперь резервирует поле, иначе текст залезал бы под него. */ --btn-tail: calc(var(--btn-pad-r) + var(--btn-circle) + var(--btn-gap)); position: relative; padding-right: var(--btn-tail); } .btn--primary.btn--sm { --btn-pad-r: 6px; --btn-circle: 26px; padding: 11px var(--btn-tail) 11px 20px; } .btn--primary::after { content: ""; position: absolute; right: var(--btn-pad-r); top: 50%; width: var(--btn-circle); height: var(--btn-circle); border-radius: 999px; background: rgba(255, 255, 255, 0.18); transform: translateY(-50%); transition: transform 0.55s var(--ease), background-color 0.55s var(--ease); pointer-events: none; } .btn--primary::before { content: ""; position: absolute; right: calc(var(--btn-pad-r) + var(--btn-circle) / 2); top: 50%; width: calc(var(--btn-circle) * 0.21); height: calc(var(--btn-circle) * 0.21); border-right: 2px solid currentColor; border-top: 2px solid currentColor; transform: translate(50%, -50%) rotate(45deg); transition: transform 0.55s var(--ease); pointer-events: none; } /* Внутреннее напряжение: кружок и стрелка уезжают по диагонали. */ .btn--primary:hover::after { /* -50% по вертикали обязан остаться: он центрирует кружок */ transform: translate(3px, calc(-50% - 1px)) scale(1.06); background-color: rgba(255, 255, 255, 0.28); } .btn--primary:hover::before { transform: translate(calc(50% + 3px), calc(-50% - 1px)) rotate(45deg); } @media (prefers-reduced-motion: reduce) { .btn--primary::after, .btn--primary::before { transition: none; } .btn--primary:hover::after { transform: translateY(-50%); } .btn--primary:hover::before { transform: translate(50%, -50%) rotate(45deg); } } .btn:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; } .btn--primary { background: var(--accent); color: var(--on-accent); } .btn--primary:hover { background: var(--accent-hi); } .btn--ghost { background: transparent; color: var(--ink); border-color: var(--line); } .btn--ghost:hover { border-color: var(--ink); } /* Всегда лежит на тёмной или коралловой подложке, поэтому цвета заданы явно, а не через переменные темы: в тёмной теме --paper сам тёмный и кнопка получалась тёмной на тёмном. */ .btn--onDark { background: #ffffff; color: #0a3a33; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.10); } .btn--onDark:hover { background: #ffffff; color: #0a3a33; box-shadow: 0 10px 26px rgba(0, 0, 0, 0.22); } .btn--sm { padding: 11px 22px; font-size: 15px; } @media (prefers-reduced-motion: reduce) { .btn:hover, .btn:active { transform: none; } } /* ---------- шапка ---------- */ /* Плавающая пилюля, оторванная от верхнего края. Приклеенная во всю ширину полоса читается как шаблон; отдельный остров выглядит дороже и не режет композицию первого экрана. */ .nav { position: sticky; top: 18px; z-index: 40; display: flex; justify-content: center; pointer-events: none; margin-bottom: -68px; /* пилюля висит над контентом, не занимая поток */ } .nav__inner { pointer-events: auto; display: flex; align-items: center; justify-content: space-between; gap: 34px; height: 64px; padding: 0 12px 0 26px; border-radius: 999px; background: color-mix(in srgb, var(--paper) 72%, transparent); border: 1px solid var(--glass-border); /* размытие только на фиксированном элементе, на прокручиваемых контейнерах оно убивает кадры */ backdrop-filter: blur(20px) saturate(160%); -webkit-backdrop-filter: blur(20px) saturate(160%); box-shadow: inset 0 1px 0 var(--glass-inset), var(--shadow-md); transition: box-shadow 0.5s var(--ease), background-color 0.5s var(--ease); } .nav__brand { font-family: "Unbounded", sans-serif; font-weight: 600; font-size: 17px; letter-spacing: -0.02em; text-decoration: none; white-space: nowrap; } .nav__brand span { color: var(--accent); } .nav__links { display: flex; align-items: center; gap: 30px; list-style: none; margin: 0; padding: 0; } .nav__links a { text-decoration: none; font-size: 15.5px; font-weight: 600; color: var(--ink-soft); transition: color 0.2s var(--ease); white-space: nowrap; } .nav__links a:hover, .nav__links a[aria-current="page"] { color: var(--ink); } /* Переключатель темы: кружок, который сам показывает противоположную тему, солнце или луну рисовать не нужно. */ .nav__theme { flex: none; width: 34px; height: 34px; padding: 0; border: 1px solid var(--glass-border); border-radius: 999px; background: linear-gradient(135deg, var(--ink) 0 50%, var(--paper) 50% 100%); cursor: pointer; transition: transform 0.45s var(--ease), border-color 0.45s var(--ease); } .nav__theme:hover { transform: rotate(180deg); } .nav__theme:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; } @media (prefers-reduced-motion: reduce) { .nav__theme { transition: none; } .nav__theme:hover { transform: none; } } .nav__toggle { display: none; background: none; border: 1px solid var(--line); border-radius: var(--r-field); padding: 9px 14px; font: inherit; font-weight: 700; font-size: 14px; color: var(--ink); cursor: pointer; } @media (max-width: 940px) { .nav { margin-bottom: -60px; } .nav__inner { height: 58px; gap: 12px; padding-left: 18px; } .nav__links, .nav .btn { display: none; } .nav__toggle { display: block; } /* Обёртка