/* ========================================================================== TAOS — стили сайта. Один файл на все страницы. Здесь только базовые правила. Все медиазапросы вынесены в css/media.css, он подключается СЛЕДУЮЩИМ — порядок двух ссылок в менять нельзя, иначе адаптив перестанет перебивать базовые правила. Порядок секций тот же, что был у @import: база → раскладка → переиспользуемые элементы → шапка и подвал → секции страниц. Внутри секции порядок правил исходный, менять его без нужды не стоит: часть правил одного веса и решает именно порядок. Содержание (искать по номеру или по имени блока): 1. base/reset 2. base/variables 3. base/typography 4. base/page 5. blocks/container 6. blocks/section 7. blocks/decor 8. blocks/btn 9. blocks/logo 10. blocks/eyebrow 11. blocks/nav 12. blocks/lang 13. blocks/section-header 14. blocks/qr-card 15. blocks/step 16. blocks/check-list 17. blocks/profile-pill 18. blocks/feature-card 19. blocks/capability-card 20. blocks/tabs 21. blocks/team-card 22. blocks/award-card 23. blocks/plan-card 24. blocks/faq 25. blocks/contact-list 26. blocks/contact-form 27. blocks/scroll-top 28. blocks/header 29. blocks/mobile-menu 30. blocks/footer 31. blocks/hero 32. blocks/steps 33. blocks/capabilities 34. blocks/dashboard-promo 35. blocks/benefits 36. blocks/dashboard-cta 37. blocks/partnership 38. blocks/about-hero 39. blocks/about-team 40. blocks/about-awards 41. blocks/pricing-hero 42. blocks/pricing-faq 43. blocks/contacts ========================================================================== */ /* ====================================================================== 1. base/reset ====================================================================== */ /* ========================================================================== Reset ========================================================================== */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; } body, h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd { margin: 0; } /* Отступы списков сбрасываем по тегу, а «не-список» — по [class]. Важно: если писать `ul[class] { margin: 0 }`, этот селектор по специфичности выше одиночного класса и молча съедает margin, заданный в самом блоке. Так уже терялся отступ между шапкой секции и сеткой карточек на странице «О нас». */ ul, ol { margin-block: 0; } ul[class], ol[class] { padding: 0; list-style: none; } body { min-height: 100vh; margin: 0; text-rendering: optimizeSpeed; } img, picture, svg, video { display: block; max-width: 100%; } img { height: auto; border-style: none; } input, button, textarea, select { font: inherit; color: inherit; } /* Атрибут hidden должен побеждать любой display у блока */ [hidden] { display: none !important; } button { padding: 0; border: none; background: none; cursor: pointer; } a { color: inherit; text-decoration: none; } /* Браузерная подсветка нажатия. На мобильных при тапе по ссылке или кнопке вспыхивает синий прямоугольник, на десктопе быстрый двойной клик выделяет надпись синим. В макете ни того, ни другого нет. Фокус это не затрагивает: рамка :focus-visible ниже остаётся на месте, иначе страницу нельзя будет пройти с клавиатуры. */ a, button, label, summary, input, select, textarea, [role="button"] { -webkit-tap-highlight-color: transparent; } /* Надписи на управляющих элементах не выделяем. Обычный текст, ссылки в нём, адрес, почту и телефон не трогаем — их копируют. */ button, .btn, .nav__link, .mobile-menu__link, .tabs__btn, .lang__option { -webkit-user-select: none; user-select: none; } :focus-visible { outline: 2px solid var(--color-accent); outline-offset: 3px; } /* ====================================================================== 2. base/variables ====================================================================== */ /* ========================================================================== Переменные проекта. Значения сняты с макета Figma (см. CLAUDE.md). ========================================================================== */ :root { /* --- Шрифты --- */ /* Шрифт макета. Латиница у него совпадает с обычным Noto Sans, а сверху есть армянский алфавит — на него встанет армянская версия сайта. Обычный Noto Sans оставлен следующим: метрики те же, и если он стоит в системе, подмена будет незаметна. */ --font-sans: "Noto Sans Armenian", "Noto Sans", "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --font-ui: "Inter", "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --font-numeric: "Montserrat", "Segoe UI", Roboto, Helvetica, Arial, sans-serif; /* --- Цвета текста --- */ --color-text: #401952; --color-ink: #1a202c; --color-muted: #5b575e; --color-muted-2: #6d6971; --color-muted-3: #807b84; --color-muted-4: #b6b3b8; --color-ink-2: #1c1c1e; --color-slate: #545359; --color-ink-3: #262626; --color-graphite: #38373b; /* --- Акценты --- */ --color-accent: #9a40c4; --color-accent-light: #ad63cf; --color-accent-dark: #7c319f; --color-violet-check: #7257db; --color-violet-deep: #470d96; /* --- Фоны --- */ --color-bg: #ffffff; --color-bg-soft: #f8f7fc; --color-lilac-100: #f5e9fc; --color-lilac-200: #f0dcfa; --color-lilac-300: #dfb3f4; /* --- Семантика плашек --- */ --color-orange: #f08b32; --color-orange-bg: #fee7c0; --color-orange-bg-soft: #fff2e8; --color-green: #67a14b; --color-green-bg: #e5f4de; --color-red: #ef3c5b; /* --- Границы --- */ --color-border: rgba(64, 25, 82, 0.08); --color-border-strong: rgba(64, 25, 82, 0.16); --color-border-line: #e2dae9; --color-border-grey: #e6e6e6; --color-border-input: #a3a1a9; /* --- Градиенты --- */ --gradient-accent: linear-gradient(100deg, #cc84ee 0%, #7c319f 100%); --gradient-banner: linear-gradient(100deg, #a052f8 0%, #4800af 100%); /* --- Тени --- */ --shadow-card: 0 11px 18px rgba(69, 28, 94, 0.05); --shadow-soft: 0 4px 12px rgba(0, 0, 0, 0.08); --shadow-accent: 0 10px 44px rgba(124, 49, 159, 0.07); --shadow-header: 0 8px 14px rgba(124, 49, 159, 0.14); --shadow-btn: 0 14px 44px rgba(134, 60, 169, 0.3); /* --- Скругления --- */ --radius-pill: 100px; --radius-xl: 60px; --radius-lg: 44px; --radius-md: 24px; --radius-sm: 16px; --radius-xs: 12px; /* --- Раскладка --- */ --container-max: 1560px; --gutter: 18px; --section-py: 48px; /* --- Прочее --- */ --transition: 0.2s ease; } /* ====================================================================== 3. base/typography ====================================================================== */ /* ========================================================================== Базовая типографика ========================================================================== */ body { font-family: var(--font-sans); font-size: 16px; line-height: 1.5; color: var(--color-text); background-color: var(--color-bg); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } h1, h2, h3, h4, h5, h6 { font-family: var(--font-ui); font-weight: 700; line-height: 1.21; color: var(--color-text); } p { line-height: 1.36; } strong, b { font-weight: 700; } /* Текст только для скринридеров */ .visually-hidden { position: absolute; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); width: 1px; height: 1px; margin: -1px; padding: 0; white-space: nowrap; border: 0; } /* ====================================================================== 4. base/page ====================================================================== */ /* ========================================================================== page — общая оболочка страницы: фон, обрезка выносов, скип-ссылка. Общее для всех страниц, поэтому лежит в base, а не в pages. ========================================================================== */ .page { overflow-x: hidden; } .page__skip-link { position: absolute; top: -100px; left: 16px; z-index: 100; padding: 12px 20px; border-radius: var(--radius-xs); color: #fff; background-color: var(--color-accent-dark); transition: top var(--transition); } .page__skip-link:focus-visible { top: 16px; } /* ====================================================================== 5. blocks/container ====================================================================== */ /* ========================================================================== container — центрирующая обёртка. Ширина контента 1560px, как в макете. ========================================================================== */ .container { width: 100%; max-width: calc(var(--container-max) + var(--gutter) * 2); margin-inline: auto; padding-inline: var(--gutter); } .container--narrow { max-width: calc(1268px + var(--gutter) * 2); } /* ====================================================================== 6. blocks/section ====================================================================== */ /* ========================================================================== section — вертикальные отступы секций и слой для декора ========================================================================== */ .section { position: relative; padding-block: var(--section-py); } /* Секция, поверх которой лежат размытые пятна: контент должен быть выше */ .section > .container { position: relative; z-index: 1; } .section--soft { background-color: var(--color-bg-soft); } .section--flush-top { padding-top: 0; } /* ====================================================================== 7. blocks/decor ====================================================================== */ /* ========================================================================== Фоновые градиенты. В макете фон нарисован размытыми пятнами-вектором. Здесь они собраны кодом: не нужен тяжёлый полупрозрачный растр, и фон плавно уходит в белый, а не обрезается по границе секции. Цвета сняты с макета: пятно наложено на белый и померено пипеткой — справа сверху #f3eaf7, слева снизу #f6ebf6, это ~11% заливки фиолетовым. Про адаптацию. Пятно, заданное процентами от блока, сжимается вместе с экраном и на узкой ширине превращается в маленький плотный круг с заметной дугой — выглядит как обрезанная картинка. Поэтому: • на десктопе (есть макет) радиусы заданы длиной и повторяют макет; • ниже 1280 макета фона нет, и там радиусы считаются от ширины экрана в vw так, чтобы спад заведомо уходил за левый и правый край. Формы не видно вообще — только ровная подсветка. Вертикальный радиус при этом подобран так, чтобы градиент гас ВНУТРИ своей полосы (background-size) и снизу не появлялась горизонтальная грань. ========================================================================== */ .page { background-color: var(--color-bg); background-image: /* лиловое пятно справа сверху, за иллюстрацией первого экрана */ radial-gradient( ellipse clamp(720px, 60vw, 1150px) clamp(460px, 33vw, 630px) at 86% 5%, rgba(154, 64, 196, 0.16) 0%, rgba(154, 64, 196, 0.09) 38%, rgba(154, 64, 196, 0) 74% ), /* розовато-лиловое слева снизу */ radial-gradient( ellipse clamp(660px, 40vw, 780px) clamp(460px, 26vw, 500px) at -4% 62%, rgba(160, 64, 160, 0.15) 0%, rgba(160, 64, 160, 0.08) 40%, rgba(160, 64, 160, 0) 76% ); background-repeat: no-repeat; background-position: top center; background-size: 100% 1500px; } /* ====================================================================== 8. blocks/btn ====================================================================== */ /* ========================================================================== btn — кнопки. Базовая высота 47px, крупная (hero) 64px. ========================================================================== */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 47px; padding: 12px 28px; border: 1px solid transparent; border-radius: var(--radius-pill); /* Фон раскладываем по внешней коробке. Иначе градиент считается от padding-box, а рисуется до border-box, и в зазор под прозрачной рамкой попадает повтор градиента — у левого скругления видна тёмная полоска. */ background-origin: border-box; font-family: var(--font-sans); font-size: 16px; font-weight: 600; line-height: 1.36; text-align: center; transition: background-color var(--transition), box-shadow var(--transition), color var(--transition), transform var(--transition); } /* --- Основная: градиентная пилюля --- */ .btn--primary { color: #fff; background-image: var(--gradient-accent); box-shadow: 0 10px 44px rgba(124, 49, 159, 0.07), 0 8px 14px rgba(124, 49, 159, 0.14); } .btn--primary:hover { box-shadow: 0 14px 44px rgba(124, 49, 159, 0.12), 0 10px 18px rgba(124, 49, 159, 0.22); transform: translateY(-1px); } .btn--primary:active { box-shadow: 0 4px 10px rgba(124, 49, 159, 0.2); transform: translateY(0); } /* --- Обводка на прозрачном (hero) --- */ .btn--ghost { padding: 12px 40px; border-color: #e8caf7; color: var(--color-accent); font-family: var(--font-ui); background-color: transparent; } .btn--ghost:hover { border-color: var(--color-lilac-300); background-color: rgba(255, 255, 255, 0.6); } /* --- Обводка на белом (мобильное меню) --- */ .btn--outline { border-color: #e8caf7; color: var(--color-accent); background-color: #fff; } .btn--outline:hover { border-color: var(--color-lilac-300); background-color: var(--color-lilac-100); } /* --- Текстовая (Sign in в шапке) --- */ .btn--text { min-height: 0; padding: 8px 12px; color: var(--color-accent-dark); } .btn--text:hover { color: var(--color-accent); } /* --- Белая на фиолетовом (баннер) --- */ .btn--white { color: var(--color-accent-dark); font-weight: 700; background-color: #fff; } .btn--white:hover { color: var(--color-violet-deep); box-shadow: 0 8px 18px rgba(26, 12, 86, 0.18); transform: translateY(-1px); } /* --- Стрелка в кнопках первого экрана --- В макете это текстовый символ «→», но его нет ни в одном поднаборе Noto Sans — браузер подставлял системный шрифт. Берём icon-arrow-left из спрайта и разворачиваем на 180°: отдельный символ не нужен. Размер в em, потому что кегль кнопок разный (16 и 18px). Коэффициент 1.125 взят из замера: у глифа «→» чернила занимают 0.75 кегля, у иконки — 0.667 рамки (путь 16 единиц из 24 вместе с обводкой), 0.75 / 0.667 = 1.125. Отрицательный margin гасит gap кнопки: в макете перед стрелкой обычный пробел (4.7px), а у иконки есть собственные поля внутри viewBox. С gap кнопка стала бы на 8px шире макетной. */ .btn__arrow { flex: none; width: 1.125em; height: 1.125em; margin-left: -8px; fill: none; stroke: currentColor; transform: rotate(180deg); } /* --- Размеры --- */ .btn--lg { padding: 14px 40px; } .btn--block { display: flex; width: 100%; } .btn[aria-disabled="true"], .btn:disabled { opacity: 0.5; box-shadow: none; pointer-events: none; } /* ====================================================================== 9. blocks/logo ====================================================================== */ /* ========================================================================== Логотип в шапке и подвале ========================================================================== */ .header__logo img, .footer__logo img { width: 105px; height: auto; } /* ====================================================================== 10. blocks/eyebrow ====================================================================== */ /* ========================================================================== eyebrow — плашка-надзаголовок над h2 и над колонками ========================================================================== */ .eyebrow { display: inline-block; margin: 0; padding: 4px 12px; border-radius: var(--radius-pill); color: var(--color-accent); font-family: var(--font-ui); font-size: clamp(12px, 0.84vw, 16px); font-weight: 700; line-height: 1.21; text-transform: uppercase; background-color: var(--color-lilac-200); } /* Крупный вариант — подписи колонок For Specialists / For Clients */ .eyebrow--lg { padding: 8px 24px; font-size: clamp(12px, 1.15vw, 22px); } .eyebrow--orange { color: var(--color-orange); background-color: var(--color-orange-bg-soft); } .eyebrow--green { color: var(--color-green); background-color: var(--color-green-bg); } /* ====================================================================== 11. blocks/nav ====================================================================== */ /* ========================================================================== nav — список ссылок в шапке и подвале ========================================================================== */ .nav { display: flex; align-items: center; gap: clamp(20px, 2.1vw, 40px); } .nav__link { display: inline-block; font-family: var(--font-sans); font-size: clamp(15px, 0.94vw, 18px); font-weight: 400; line-height: 1.36; color: var(--color-text); transition: color var(--transition); } .nav__link:hover { color: var(--color-accent); } .nav__link--active { font-weight: 600; color: var(--color-accent-light); } /* ====================================================================== 12. blocks/lang ====================================================================== */ /* ========================================================================== lang — переключатель языка. Кнопка с кодом текущего языка, по клику раскрывается список доступных. В макете блока нет — добавлен по просьбе заказчика, оформлен под соседей по шапке (пилюля, сиреневый ховер, тот же шеврон, что у кнопки «наверх»). Раскрытие сделано на CSS: видимостью управляют opacity + visibility, класс --open вешает скрипт. visibility переключается дискретно — при открытии сразу, при закрытии в конце перехода, поэтому список успевает погаснуть и при этом не остаётся в порядке обхода Tab. Таймеров и transitionend здесь не нужно. ========================================================================== */ .lang { position: relative; flex: none; } /* --- Кнопка с текущим языком --- */ .lang__toggle { display: flex; align-items: center; gap: 4px; height: 40px; padding: 0 10px; border-radius: var(--radius-pill); color: var(--color-accent-dark); font-family: var(--font-sans); font-size: 14px; font-weight: 600; line-height: 1.36; transition: background-color var(--transition), color var(--transition); } .lang__toggle:hover, .lang--open .lang__toggle { color: var(--color-accent); background-color: var(--color-lilac-100); } /* В спрайте есть только шеврон вверх — вниз это он же, повёрнутый. */ .lang__icon { width: 16px; height: 16px; fill: currentColor; transform: rotate(180deg); transition: transform var(--transition); } .lang--open .lang__icon { transform: rotate(0deg); } /* --- Выпадающий список --- */ .lang__list { position: absolute; top: calc(100% + 8px); right: 0; z-index: 3; display: flex; flex-direction: column; gap: 2px; min-width: 88px; padding: 6px; border: 1px solid var(--color-border-strong); border-radius: var(--radius-xs); background-color: #fff; box-shadow: var(--shadow-card), var(--shadow-soft); opacity: 0; visibility: hidden; transform: translateY(-4px); transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s; } /* Переход visibility объявлен только в закрытом состоянии — намеренно. Переход берётся из стиля, который получается ПОСЛЕ смены класса: при открытии его здесь нет, и список становится видимым сразу, поэтому по стрелке с кнопки фокус сразу уходит на пункт. Если же переход оставить и здесь, первый кадр visibility ещё hidden, и focus() не срабатывает. */ .lang--open .lang__list { opacity: 1; visibility: visible; transform: translateY(0); transition: opacity 0.18s ease, transform 0.18s ease; } .lang__option { display: block; width: 100%; padding: 8px 12px; border-radius: 8px; color: var(--color-muted); font-family: var(--font-sans); font-size: 14px; font-weight: 600; line-height: 1.36; text-align: left; transition: background-color var(--transition), color var(--transition); } .lang__option:hover { color: var(--color-accent-dark); background-color: var(--color-lilac-100); } /* Выбранный язык заливаем плотнее ховера, иначе под курсором пункты выглядят одинаково и текущий язык не читается. */ .lang__option--active { color: var(--color-accent-dark); background-color: var(--color-lilac-200); } /* ====================================================================== 13. blocks/section-header ====================================================================== */ /* ========================================================================== section-header — плашка + заголовок + подзаголовок, по центру секции ========================================================================== */ .section-header { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; } .section-header__title { max-width: 20ch; margin: 0; font-family: var(--font-ui); font-size: clamp(28px, 3.34vw, 64px); font-weight: 700; line-height: 1.21; color: var(--color-text); } /* Акцентная часть заголовка залита градиентом (как в макете) */ .section-header__accent { background-image: var(--gradient-accent); -webkit-background-clip: text; background-clip: text; color: transparent; } .section-header__subtitle { max-width: 60ch; margin: 0; font-family: var(--font-sans); font-size: clamp(15px, 1.15vw, 22px); font-weight: 400; line-height: 1.36; color: var(--color-muted-2); } /* --- Вариант со страницы «О нас» --------------------------------------- В том макете у шапки секции свои метрики: плашка 14/19.04 с полями 6/14 (на главной 16/19.36 и 4/12), у заголовка межстрочный 70.4 на 64px вместо 77.45, подзаголовок на мобильном 14px, а зазоры между строками шапки там 12px, а не 8px. */ .section-header--about { gap: 12px; } .section-header--about .section-header__subtitle { font-size: clamp(14px, 1.15vw, 22px); } /* ====================================================================== 14. blocks/qr-card ====================================================================== */ /* ========================================================================== qr-card — стеклянная карточка с QR-кодом в hero (только десктоп) ========================================================================== */ .qr-card { display: flex; align-items: center; gap: 16px; width: -moz-fit-content; width: fit-content; padding: 10px; border: 2px solid rgba(255, 255, 255, 0.9); border-radius: 33px; background-color: rgba(255, 255, 255, 0.7); box-shadow: 0 17px 44px rgba(123, 112, 176, 0.1); -webkit-backdrop-filter: blur(72px); backdrop-filter: blur(72px); } .qr-card__code { flex: none; width: 133px; height: 133px; border-radius: var(--radius-md); } .qr-card__body { display: flex; flex-direction: column; gap: 11px; padding-right: 13px; } .qr-card__text { margin: 0; font-family: var(--font-sans); font-size: 16px; line-height: 1.36; color: var(--color-muted); } .qr-card__button { display: flex; align-items: center; justify-content: center; width: 58px; height: 58px; border: 1px solid #e8caf7; border-radius: 50%; color: var(--color-accent); background-color: var(--color-lilac-100); transition: background-color var(--transition), border-color var(--transition); } .qr-card__button:hover { border-color: var(--color-accent-light); background-color: var(--color-lilac-200); } .qr-card__icon { width: 28px; height: 28px; fill: currentColor; } /* QR отдаётся через , класс остаётся на обёртке */ .qr-card__code img { width: 100%; height: 100%; border-radius: inherit; } /* ====================================================================== 15. blocks/step ====================================================================== */ /* ========================================================================== step — один пронумерованный шаг внутри карточки How it works ========================================================================== */ .step { display: flex; align-items: flex-start; gap: 16px; } .step__num { flex: none; min-width: 1.6em; font-family: var(--font-numeric); font-size: clamp(24px, 2.16vw, 41px); font-weight: 700; line-height: 1.22; color: var(--color-accent-light); } .step__title { margin: 0; font-family: var(--font-sans); font-size: clamp(17px, 1.25vw, 24px); font-weight: 700; line-height: 1.36; color: var(--color-muted); } .step__text { margin: 4px 0 0; font-family: var(--font-sans); font-size: clamp(14px, 1.15vw, 22px); font-weight: 400; line-height: 1.36; color: var(--color-muted); } /* ====================================================================== 16. blocks/check-list ====================================================================== */ /* ========================================================================== check-list — список с галочками ========================================================================== */ .check-list { display: flex; flex-direction: column; gap: 12px; } .check-list__item { display: flex; align-items: flex-start; gap: 12px; font-family: var(--font-sans); font-size: clamp(14px, 0.94vw, 18px); font-weight: 400; line-height: 1.36; color: #2e2a36; } .check-list__icon { flex: none; width: 24px; height: 24px; margin-top: 1px; padding: 6px; border-radius: 50%; color: var(--color-accent); fill: none; stroke: currentColor; background-color: var(--color-lilac-200); } .check-list__item strong { font-weight: 700; color: var(--color-text); } /* ====================================================================== 17. blocks/profile-pill ====================================================================== */ /* ========================================================================== profile-pill — плашка клиента, всплывающая над скриншотом дашборда ========================================================================== */ .profile-pill { display: flex; align-items: center; gap: clamp(6px, 0.9vw, 14px); padding: clamp(4px, 0.52vw, 8px); padding-right: clamp(10px, 1.8vw, 28px); border: 1px solid rgba(0, 0, 0, 0.06); border-radius: var(--radius-pill); background-color: #fff; box-shadow: var(--shadow-soft); } .profile-pill__avatar { flex: none; width: clamp(24px, 3.5vw, 54px); height: clamp(24px, 3.5vw, 54px); border-radius: 50%; object-fit: cover; } .profile-pill__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .profile-pill__name { margin: 0; font-family: var(--font-ui); font-size: clamp(9px, 1.1vw, 17px); font-weight: 600; line-height: 1.3; letter-spacing: -0.01em; color: #000; white-space: nowrap; } .profile-pill__badge { margin: 0; font-family: var(--font-ui); font-size: clamp(7px, 0.85vw, 13px); font-weight: 500; line-height: 1.38; color: var(--color-accent); white-space: nowrap; } /* Аватар отдаётся через , класс остаётся на обёртке */ .profile-pill__avatar { display: block; overflow: hidden; } .profile-pill__avatar img { width: 100%; height: 100%; object-fit: cover; } /* ====================================================================== 18. blocks/feature-card ====================================================================== */ /* ========================================================================== feature-card — карточка выгоды в секции Two Sides of Care ========================================================================== */ .feature-card { display: flex; flex-direction: column; gap: 12px; height: 100%; padding: 24px; border: 1px solid var(--color-lilac-200); border-radius: var(--radius-md); background-color: #fff; box-shadow: var(--shadow-card); } .feature-card__icon { display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: var(--radius-sm); color: var(--color-accent); background-color: var(--color-lilac-200); } .feature-card__icon svg { width: 24px; height: 24px; fill: none; stroke: currentColor; } .feature-card__title { margin: 0; font-family: var(--font-ui); font-size: clamp(16px, 0.94vw, 18px); font-weight: 700; line-height: 1.21; color: var(--color-text); } .feature-card__text { margin: 0; font-family: var(--font-ui); font-size: clamp(13px, 0.73vw, 14px); font-weight: 400; line-height: 1.57; color: var(--color-muted); } /* ====================================================================== 19. blocks/capability-card ====================================================================== */ /* ========================================================================== capability-card — карточка возможности со скриншотом приложения. Цвет подложки у каждой карточки свой, как в макете. ========================================================================== */ .capability-card { display: flex; flex-direction: column; gap: 16px; height: 100%; padding: 24px 24px 0; overflow: hidden; border: 1px solid #e8caf7; border-radius: var(--radius-md); background-image: linear-gradient(180deg, var(--color-bg-soft) 0%, #cce9be 100%); box-shadow: var(--shadow-card); } .capabilities__grid > li:nth-child(2) .capability-card { background-image: linear-gradient(180deg, var(--color-bg-soft) 0%, #b2d5ff 100%); } .capabilities__grid > li:nth-child(3) .capability-card { background-image: linear-gradient(180deg, var(--color-bg-soft) 0%, #ffeadb 100%); } .capability-card__title { margin: 0; font-family: var(--font-ui); font-size: clamp(22px, 2.08vw, 40px); font-weight: 600; line-height: 1.21; color: var(--color-text); } .capability-card__text { margin: 0; font-family: var(--font-ui); font-size: clamp(14px, 1.25vw, 24px); font-weight: 400; line-height: 1.21; color: var(--color-muted-2); } /* Скрин телефона и всплывающая плашка поверх него. Ширину ограничиваем натуральным размером картинки: на планшете карточка шире макетной, и без ограничения скрин раздувается и тянет секцию вверх. */ .capability-card__media { position: relative; width: 100%; max-width: 418px; margin-top: auto; margin-inline: auto; } .capability-card__screen img { width: 100%; height: auto; } .capability-card__badge { position: absolute; max-width: none; } .capability-card__badge img { width: 100%; height: auto; } .capability-card__badge--1 { left: 49.05%; top: 29.64%; width: 61.32%; } .capability-card__badge--2 { /* в файле 18px запаса слева и 7px сверху под тень */ left: 59.12%; top: 19.02%; width: 50.08%; } .capability-card__badge--3 { left: 59.91%; top: 48.97%; width: 50.08%; } /* ====================================================================== 20. blocks/tabs ====================================================================== */ /* ========================================================================== tabs — переключатель For Specialists / For Clients. Только мобильный: на десктопе обе группы показаны колонками, переключать нечего. ========================================================================== */ .tabs { display: flex; gap: 4px; padding: 4px; border-radius: var(--radius-pill); background-color: #e8caf7; } .tabs[hidden] { display: none; } .tabs__btn { flex: 1 1 0; padding: 8px 4px; border-radius: var(--radius-pill); font-family: var(--font-ui); font-size: 14px; font-weight: 600; line-height: 1.21; color: var(--color-accent-dark); background-color: transparent; transition: background-color var(--transition), color var(--transition); } .tabs__btn--active { color: var(--color-text); background-color: #fff; } /* ====================================================================== 21. blocks/team-card ====================================================================== */ /* ========================================================================== team-card — карточка сотрудника. Две раскладки из макетов: • до 768 — строка: круглое фото 64px слева, имя и должность справа, описание под ними; всё в белой карточке с рамкой и тенью; • от 768 — колонка: крупное круглое фото, под ним центрированный текст. Карточки как таковой нет, элементы лежат прямо на фоне секции. ========================================================================== */ .team-card { display: flex; flex-direction: column; gap: 16px; padding: 20px; border: 1px solid var(--color-lilac-200); border-radius: var(--radius-md); background-color: var(--color-bg); box-shadow: var(--shadow-card); } .team-card__head { display: flex; align-items: center; gap: 12px; } .team-card__photo { display: block; flex-shrink: 0; overflow: hidden; width: 64px; border-radius: 50%; } .team-card__image { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; } .team-card__info { display: flex; flex-direction: column; gap: 4px; min-width: 0; } .team-card__name { margin: 0; font-family: var(--font-sans); font-size: 18px; font-weight: 600; line-height: 1.36; color: var(--color-text); } .team-card__role { margin: 0; font-family: var(--font-sans); font-size: 14px; font-weight: 600; line-height: 1.36; color: var(--color-accent-dark); } .team-card__text { margin: 0; font-family: var(--font-ui); font-size: 13px; line-height: 1.54; color: var(--color-muted); } /* ====================================================================== 22. blocks/award-card ====================================================================== */ /* ========================================================================== award-card — карточка достижения. Две раскладки из макетов, обе описаны через grid-template-areas: • до 768 — иконка на плашке слева, год справа, под ними название и описание по левому краю; • от 768 — колонка: крупный логотип, под ним центрированные название, описание и год. ========================================================================== */ .award-card { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "logo year" "body body"; align-items: center; column-gap: 12px; row-gap: 16px; padding: 20px; border: 1px solid var(--color-border-line); border-radius: var(--radius-md); background-color: var(--color-bg); } .award-card__logo { grid-area: logo; width: 48px; padding: 8px; border-radius: var(--radius-xs); background-color: var(--color-bg-soft); } .award-card__image { display: block; width: 100%; height: auto; aspect-ratio: 1; } .award-card__year { grid-area: year; justify-self: end; margin: 0; font-family: var(--font-ui); font-size: 14px; font-weight: 700; line-height: 1.21; color: var(--color-accent-dark); } .award-card__body { display: flex; grid-area: body; flex-direction: column; gap: 6px; } .award-card__title { margin: 0; font-family: var(--font-ui); font-size: 16px; font-weight: 700; line-height: 1.21; color: var(--color-text); } .award-card__text { margin: 0; font-family: var(--font-ui); font-size: 13px; line-height: 1.38; color: var(--color-muted); } /* ====================================================================== 23. blocks/plan-card ====================================================================== */ /* ========================================================================== plan-card — карточка тарифа. Тариф в макете один, поэтому карточка центрируется по контейнеру и ограничена шириной из макета. Межстрочные расстояния заданы в px и подобраны так, чтобы на ширине макета (1920) и на мобильной совпадать с целыми значениями — дробных пикселей в стилях не держим (см. CLAUDE.md). ========================================================================== */ .plan-card { display: flex; max-width: 584px; margin-inline: auto; flex-direction: column; gap: 32px; /* Обводка в макете нарисована внутрь, поэтому её 6px входят в отступ 48: 6 рамки + 42 паддинга. Иначе контент карточки уже макетного на 12px. */ padding: 18px; /* 32px — единственное скругление такого размера в проекте, отдельного токена под него нет. */ border: 6px solid var(--color-lilac-100); border-radius: 32px; background-color: var(--color-bg); } .plan-card__head { display: flex; flex-direction: column; gap: 16px; } .plan-card__name { margin: 0; font-family: var(--font-sans); font-size: clamp(24px, 1.67vw, 32px); font-weight: 600; line-height: clamp(33px, 2.3vw, 44px); background-image: var(--gradient-accent); -webkit-background-clip: text; background-clip: text; color: transparent; } .plan-card__price { display: flex; align-items: baseline; gap: 4px; } .plan-card__amount { font-family: var(--font-sans); font-size: clamp(36px, 2.5vw, 48px); font-weight: 600; line-height: clamp(49px, 3.4vw, 65px); color: var(--color-ink-2); } .plan-card__period { font-family: var(--font-sans); font-size: clamp(20px, 1.52vw, 29px); font-weight: 400; line-height: clamp(27px, 2.05vw, 39px); color: var(--color-slate); } .plan-card__text { margin: 0; font-family: var(--font-sans); font-size: clamp(16px, 1.05vw, 20px); font-weight: 400; line-height: clamp(22px, 1.41vw, 27px); color: var(--color-slate); } .plan-card__features { display: flex; flex-direction: column; gap: 24px; } .plan-card__feature { display: flex; align-items: flex-start; gap: 12px; font-family: var(--font-sans); font-size: clamp(16px, 1.05vw, 20px); font-weight: 400; line-height: clamp(22px, 1.41vw, 27px); color: var(--color-slate); } /* Галочка выравнивается по первой строке текста, а не по центру блока: при переносе на две строки центрирование выглядит съехавшим. */ .plan-card__icon { flex: none; width: 20px; height: 20px; margin-top: 1px; color: var(--color-violet-check); fill: none; stroke: currentColor; } /* 32px общего зазора + 8px здесь = 40px между списком и кнопкой */ .plan-card__action { padding-top: 8px; } /* ====================================================================== 24. blocks/faq ====================================================================== */ /* ========================================================================== faq — список вопросов с раскрывающимися ответами. Пункты независимы: открытие одного не закрывает остальные. Высота панели анимируется скриптом (js/faq.js) — от 0 до фактической и обратно. Длительность продублирована там константой DURATION, менять надо в обоих местах. В макете рамка нарисована и у всей группы, и у каждого пункта: обводки INSIDE накладываются, и получается коробка с разделителями. В CSS это рамка на группе плюс верхняя граница у всех пунктов, кроме первого. ========================================================================== */ .faq { border: 1px solid var(--color-border-grey); } .faq__item + .faq__item { border-top: 1px solid var(--color-border-grey); } .faq__heading { margin: 0; font: inherit; } .faq__question { display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%; padding: 20px; font-family: var(--font-sans); font-size: clamp(16px, 1.15vw, 18px); font-weight: 400; line-height: clamp(22px, 1.6vw, 24px); text-align: left; color: var(--color-ink-2); transition: color var(--transition), background-color var(--transition); } .faq__question:hover { color: var(--color-accent-dark); background-color: var(--color-bg-soft); } .faq__icon { flex: none; width: 24px; height: 24px; color: var(--color-muted-3); fill: none; stroke: currentColor; transition: transform var(--transition), color var(--transition); } /* Открытый пункт: плюс доворачивается в крестик */ .faq__question[aria-expanded="true"] .faq__icon { transform: rotate(45deg); color: var(--color-accent-dark); } .faq__panel { overflow: hidden; transition: height 0.26s ease; } /* Отступы живут на внутреннем элементе, а не на панели: у панели анимируется высота, и собственный padding остался бы виден при height: 0. Верхний отступ обязателен. Нижнего паддинга кнопки-вопроса для зазора не хватает: он лежит внутри её коробки, а коробка при наведении и в открытом состоянии подсвечена — ответ визуально начинается впритык к подложке вопроса. */ .faq__answer { margin: 0; padding: 12px 20px 20px; font-family: var(--font-sans); font-size: clamp(14px, 1.05vw, 16px); font-weight: 400; line-height: clamp(20px, 1.57vw, 24px); color: var(--color-slate); } /* ====================================================================== 25. blocks/contact-list ====================================================================== */ /* ========================================================================== contact-list — способы связи: почта, соцсети, адрес. ========================================================================== */ .contact-list { display: grid; /* Две колонки по 295 с зазором 49 — размеры из макета. Колонок ровно две, автоподбор здесь не годится: на широкой колонке он раскладывает три блока в строку, а в макете третий переносится. */ grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 639px; column-gap: clamp(24px, 2.55vw, 49px); row-gap: clamp(32px, 3.65vw, 70px); } .contact-list__label { margin: 0; font-family: var(--font-sans); font-size: clamp(16px, 1.05vw, 20px); font-weight: 600; line-height: clamp(22px, 1.46vw, 28px); color: var(--color-graphite); } .contact-list__value { margin: clamp(12px, 1.25vw, 24px) 0 0; font-family: var(--font-sans); font-size: clamp(14px, 0.84vw, 16px); font-weight: 400; line-height: clamp(20px, 1.25vw, 24px); color: var(--color-slate); } .contact-list__link { color: inherit; transition: color var(--transition); } .contact-list__link:hover { color: var(--color-accent); } .contact-list__socials { display: flex; gap: 16px; margin-top: clamp(12px, 1.25vw, 24px); } .contact-list__social { display: block; width: 24px; height: 24px; color: var(--color-muted-3); fill: currentColor; transition: color var(--transition); } .contact-list__social:hover { color: var(--color-accent); } /* ====================================================================== 26. blocks/contact-form ====================================================================== */ /* ========================================================================== contact-form — карточка с формой обратной связи. Поля в макете подчёркнуты снизу и без рамки по контуру: у фрейма задан individualStrokeWeights только снизу. Подписи полей нарисованы внутри поля, поэтому видимая подпись — placeholder, а настоящий