/* ============================================================ Averon Insurance — стили страниц статей (база знаний). Источник: Figma «Article №0001» (Device=Desktop/Tablet/Mobile). Брейкпоинты соответствуют вариантам компонента: Mobile < 768px (макет 360) Tablet 768–1023 (макет 768) Desktop ≥ 1024px (макет 1440) ВАЖНО: файл подключается поверх глобальных base.css / landing.css, поэтому все правила скоупятся классом .article (и .article-page на ). Собственных глобальных сбросов файл не содержит — блок «Нейтрализация» ниже гасит только то, что base.css навязывает элементам внутри статьи (section, h1/h2, p, a, img, .btn--primary). Шрифт Hanken Grotesk объявлен в static/css/fonts.css. ============================================================ */ /* --- Токены ------------------------------------------------- Объявлены на , чтобы фон страницы и разметка статьи брали значения из одного места. Геометрия и типографика — Desktop 1440. ----------------------------------------------------------- */ .article-page { /* палитра */ --c-primary: #e25c42; --c-hover: #c9462e; --c-deep: #a8341f; --c-tint: #fbeae3; --c-white: #ffffff; --c-page: #fdf8f4; --c-surface: #f5efe9; --c-border: #e4dcd5; --c-muted: #8a817b; --c-body: #4a433d; --c-ink: #2a2420; --c-hairline: #d9d9d9; /* разделители внутри карточек */ /* геометрия */ --pad-y: 96px; --pad-x: 120px; --col: 720px; --gap-section: 64px; --card-pad-y: 48px; --card-pad-x: 64px; --avatar: 60px; /* типографика */ --fs-h1: 36px; --lh-h1: 44px; --fs-h2: 28px; --lh-h2: 36px; --fs-lead: 22px; --lh-lead: 30px; /* eyebrow / вопрос FAQ */ --fs-body: 16px; --lh-body: 24px; --fs-cap: 13px; --lh-cap: 18px; --fs-btn: 16px; --lh-btn: 22px; background-color: var(--c-page); } @media (max-width: 1023px) { /* Tablet 768 */ .article-page { --pad-y: 72px; --pad-x: 40px; --col: none; /* контент занимает всю ширину минус отступы 40 */ --gap-section: 48px; --card-pad-y: 32px; --card-pad-x: 48px; --avatar: 55px; --fs-h1: 28px; --lh-h1: 36px; --fs-h2: 22px; --lh-h2: 30px; --fs-lead: 20px; --lh-lead: 30px; --fs-body: 15px; --lh-body: 22px; --fs-cap: 12px; --lh-cap: 16px; --fs-btn: 15px; --lh-btn: 22px; } } @media (max-width: 767px) { /* Mobile 360 */ .article-page { --pad-y: 56px; --pad-x: 20px; --col: none; /* контент занимает всю ширину минус отступы 20 */ --gap-section: 40px; --card-pad-y: 24px; --card-pad-x: 32px; --avatar: 50px; --fs-h1: 22px; --lh-h1: 28px; --fs-h2: 18px; --lh-h2: 24px; --fs-lead: 18px; --lh-lead: 30px; --fs-body: 14px; --lh-body: 20px; --fs-cap: 11px; --lh-cap: 14px; --fs-btn: 14px; --lh-btn: 18px; } } /* --- Нейтрализация глобальных стилей ------------------------ base.css задаёт элементам собственные размеры и отступы (section { margin-top: 12rem }, h1/h2 в rem, p 2rem и т.д.). Внутри статьи они гасятся, дальше типографику задают классы. ----------------------------------------------------------- */ .article *, .article *::before, .article *::after { box-sizing: border-box; } .article section, .article header, .article aside, .article article { margin: 0; padding: 0; overflow: visible; } .article h1, .article h2, .article h3, .article h4, .article p, .article ul, .article ol, .article li { margin: 0; padding: 0; font-family: inherit; font-size: inherit; line-height: inherit; font-weight: inherit; color: inherit; } .article ul, .article ol { list-style: none; } .article a { color: inherit; font-size: inherit; text-decoration: none; } .article img { display: block; max-width: 100%; object-fit: initial; object-position: initial; } /* --- Каркас страницы --------------------------------------- */ .article { padding: var(--pad-y) var(--pad-x); background-color: var(--c-page); color: var(--c-body); font-family: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif; font-size: var(--fs-body); line-height: var(--lh-body); font-weight: 400; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } .article__col { width: 100%; max-width: var(--col); margin-inline: auto; display: flex; flex-direction: column; gap: var(--gap-section); } /* --- Секция ------------------------------------------------ */ .article .section { display: flex; flex-direction: column; gap: 16px; } .article .section--head { gap: 32px; } .article .section__group { display: flex; flex-direction: column; gap: 16px; } .article .section__group--wide { gap: 32px; } /* --- Типографика ------------------------------------------- */ .article .h1 { margin: 0; font-size: var(--fs-h1); line-height: var(--lh-h1); font-weight: 600; letter-spacing: -0.005em; color: var(--c-body); } .article .h2 { margin: 0; font-size: var(--fs-h2); line-height: var(--lh-h2); font-weight: 600; color: var(--c-body); } .article .p { margin: 0; font-size: var(--fs-body); line-height: var(--lh-body); color: var(--c-body); } .article .p--muted { color: var(--c-muted); } /* Текстовые ссылки внутри абзацев и списков (перелинковка на продукты) */ .article .p a, .article .list__text a { color: var(--c-primary); text-decoration: underline; text-underline-offset: 2px; transition: color 0.25s ease-out; } .article .p a:hover, .article .list__text a:hover { color: var(--c-hover); } /* --- Разделители ------------------------------------------- */ .article .rule { height: 2px; border: 0; margin: 0; border-radius: 2px; background: var(--c-border); flex: none; } .article .hairline { height: 1px; border: 0; margin: 0; border-radius: 1px; background: var(--c-hairline); flex: none; } /* --- Шапка статьи: мета-строка ----------------------------- */ .article .meta { display: flex; align-items: center; justify-content: space-between; gap: 32px; } .article .meta__author { display: flex; align-items: center; gap: 16px; } .article .meta__avatar { width: var(--avatar); height: var(--avatar); flex: none; border-radius: 50%; overflow: hidden; background: var(--c-border); border: 1px solid var(--c-border); } .article .meta__avatar img { width: 100%; height: 100%; object-fit: cover; } .article .meta__facts { display: flex; align-items: center; gap: 32px; } .article .meta__item { display: flex; flex-direction: column; gap: 4px; } .article .meta__item--right { align-items: flex-end; text-align: right; } .article .meta__label { font-size: var(--fs-cap); line-height: var(--lh-cap); letter-spacing: 0.01em; color: var(--c-muted); } .article .meta__value { font-size: var(--fs-body); line-height: var(--lh-body); color: var(--c-body); } /* «Время чтения» в мобильном варианте макета отсутствует */ @media (max-width: 767px) { .article .meta__item--reading { display: none; } } /* --- Иллюстрации ------------------------------------------- */ .article .media { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; background: var(--c-surface); } /* --- Списки ------------------------------------------------ */ .article .list { list-style: none; margin: 0; padding: 0 0 0 32px; display: flex; flex-direction: column; gap: 16px; } /* список с симметричным отступом (p 0/32/0/32) */ .article .list--inset { padding-right: 32px; } /* нумерованный список (p 16/0/0/32, gap 32) */ .article .list--steps { padding-top: 16px; gap: 32px; } .article .list__item { display: flex; align-items: center; gap: 16px; } .article .list__dot { width: 8px; height: 8px; flex: none; } .article .list__text { font-size: var(--fs-body); line-height: var(--lh-body); color: var(--c-body); } /* --- Иконки ------------------------------------------------ */ /* Файлы из landing/icons/articles — 24x24, заливка задана внутри SVG */ .article .icon { width: 24px; height: 24px; flex: none; display: block; } /* --- Заметка (акцентная строка с иконкой) ------------------ */ .article .note { display: flex; align-items: center; gap: 16px; padding: 16px 0; border-radius: 2px; } .article .note__text { font-size: var(--fs-body); line-height: var(--lh-body); font-weight: 700; color: var(--c-body); } /* --- Чек-лист ---------------------------------------------- */ .article .checklist { list-style: none; margin: 0; padding: 16px 32px; display: flex; flex-direction: column; gap: 32px; } /* --- Карточки ---------------------------------------------- */ .article .card { background: var(--c-white); border-radius: 16px; padding: var(--card-pad-y) var(--card-pad-x); display: flex; flex-direction: column; gap: 32px; } .article .card--promo { border: 1px solid var(--c-hairline); } .article .card__stack { display: flex; flex-direction: column; gap: 32px; } .article .card__head { display: flex; flex-direction: column; gap: 16px; } .article .card__title-group { display: flex; flex-direction: column; gap: 8px; } .article .eyebrow { margin: 0; font-size: var(--fs-lead); line-height: var(--lh-lead); font-weight: 500; color: var(--c-primary); } .article .card__title { margin: 0; font-size: var(--fs-h1); line-height: var(--lh-h1); font-weight: 600; color: var(--c-body); } .article .card__title--sm { font-size: var(--fs-h2); line-height: var(--lh-h2); } .article .card__benefits { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 16px; } .article .card__benefit { display: flex; align-items: center; gap: 16px; font-size: var(--fs-body); line-height: var(--lh-body); color: var(--c-body); } /* --- Кнопки ------------------------------------------------ .btn--primary также существует в base.css (сине-серая кнопка сайта). Правила ниже специфичнее (.article .btn…), поэтому внутри статьи побеждают; height/box-shadow сбрасываются явно, так как их задаёт только глобальный вариант. ----------------------------------------------------------- */ .article .btn-row { display: flex; gap: 16px; } .article .btn-row .btn { flex: 1 1 0; min-width: 0; } @media (max-width: 767px) { .article .btn-row { flex-direction: column; } } .article .btn { appearance: none; display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%; height: auto; padding: 15px 32px; border: 1px solid transparent; border-radius: 8px; box-shadow: none; font-family: inherit; font-size: var(--fs-btn); line-height: var(--lh-btn); font-weight: 500; text-align: center; text-decoration: none; cursor: pointer; transition: background-color 0.25s ease-out, border-color 0.25s ease-out, color 0.25s ease-out, transform 0.25s ease-out; } .article .btn:active { transform: translateY(1px); } .article .btn--primary { background-color: var(--c-primary); color: var(--c-white); } .article .btn--primary:hover { background-color: var(--c-hover); color: var(--c-white); } .article .btn--primary:active { background-color: var(--c-deep); color: var(--c-white); } .article .btn--ghost { background-color: transparent; border-color: var(--c-primary); color: var(--c-primary); } .article .btn--ghost:hover { background-color: var(--c-tint); border-color: var(--c-hover); color: var(--c-hover); } .article .btn--ghost:active { color: var(--c-deep); border-color: var(--c-deep); } .article .btn:focus-visible { outline: 2px solid var(--c-deep); outline-offset: 2px; } /* --- FAQ --------------------------------------------------- */ .article .faq { display: flex; flex-direction: column; gap: 32px; } .article .faq__item { display: flex; align-items: flex-start; gap: 16px; } .article .faq__caret { padding: 4px 0; flex: none; } .article .faq__body { display: flex; flex-direction: column; gap: 16px; } .article .faq__q { margin: 0; font-size: var(--fs-lead); line-height: var(--lh-lead); font-weight: 500; color: var(--c-body); } @media (max-width: 1023px) { .article .faq__q { font-size: 18px; line-height: 26px; } } @media (max-width: 767px) { .article .faq__q { font-size: 16px; line-height: 22px; } } /* --- Доступность ------------------------------------------- */ @media (prefers-reduced-motion: reduce) { .article * { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; } }