/* ===== Design tokens ===== */ :root { --color-bg: #faf6f1; --color-bg-alt: #f2ece3; --color-surface: #ffffff; --color-text: #33291f; --color-text-muted: #6f6255; --color-accent: #b5714a; --color-accent-dark: #92573a; --color-accent-soft: #e8d5c4; --color-border: #e6dccd; --radius: 16px; --radius-sm: 10px; --shadow: 0 8px 30px rgba(90, 65, 40, 0.08); --shadow-sm: 0 2px 10px rgba(90, 65, 40, 0.06); --font-serif: 'Merriweather', Georgia, 'Iowan Old Style', 'PT Serif', serif; --font-sans: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; --max-width: 1080px; } /* Тёмная тема: переключается атрибутом data-theme="dark" на (ставит theme-toggle.js), значения только этих же 8 переменных переопределяются — весь остальной CSS их просто переиспользует. */ [data-theme="dark"] { --color-bg: #1c1815; --color-bg-alt: #241f1a; --color-surface: #2a241f; --color-text: #f0e9e0; --color-text-muted: #b3a596; --color-accent: #d68f64; --color-accent-dark: #e8a97e; --color-accent-soft: #4a3a2d; --color-border: #3d352c; --shadow: 0 8px 30px rgba(0, 0, 0, 0.35); --shadow-sm: 0 2px 10px rgba(0, 0, 0, 0.25); } * { box-sizing: border-box; } html { scroll-behavior: smooth; max-width: 100%; /* overflow-x и overflow-y заданы оба и вместе на html (а не раздельно на html/body) специально: если задать overflow-x:hidden на body отдельно от overflow-y на html, браузер трактует это как два независимых скролл- контейнера — тогда виден скроллбар html, но реально скроллится body, и создаётся впечатление, что "скроллбар есть, а сам ползунок не двигается". overflow-y:scroll резервирует место под вертикальный скроллбар всегда, даже на коротких страницах (например "Контакты"), где контента мало и скроллбара обычно нет — без этого такие страницы были на ширину скроллбара шире остальных, и весь контент "прыгал" вправо при переходе. */ overflow-x: hidden; overflow-y: scroll; } body { max-width: 100%; margin: 0; background: var(--color-bg); color: var(--color-text); font-family: var(--font-sans); line-height: 1.65; -webkit-font-smoothing: antialiased; /* "Медленно меняется" при переключении темы — плавный переход цвета фона/текста вместо мгновенного скачка. */ transition: background-color 0.6s ease, color 0.6s ease; /* Прижимаем футер к низу экрана даже на коротких страницах — body растягивается на весь viewport, main забирает всё свободное место. */ min-height: 100vh; display: flex; flex-direction: column; } .site-header, .site-footer { flex-shrink: 0; } main { flex: 1; } /* Многие старые фото (особенно из раздела Damian) сняты на телефон/камеру "боком" — реальный поворот записан только в EXIF-метке Orientation, сам файл физически не повёрнут. image-orientation:from-image явно требует от браузера учитывать эту метку — подстраховка на случай окружений, где поведение по умолчанию отличается. */ img { max-width: 100%; height: auto; display: block; border-radius: var(--radius-sm); image-orientation: from-image; } a { color: var(--color-accent-dark); text-decoration: none; } a:hover { text-decoration: underline; } .container { max-width: var(--max-width); margin: 0 auto; padding: 0 24px; } /* ===== Header ===== */ .site-header { background: var(--color-surface); border-bottom: 1px solid var(--color-border); position: sticky; top: 0; z-index: 50; transition: background-color 0.6s ease, border-color 0.6s ease; } .site-header .container { display: flex; align-items: center; justify-content: space-between; padding-top: 18px; padding-bottom: 18px; gap: 24px; } .site-logo { font-family: var(--font-serif); font-size: 1.5rem; font-weight: 700; color: var(--color-text); letter-spacing: -0.01em; } .site-logo span { color: var(--color-accent); } .main-nav { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; } .main-nav a { color: var(--color-text-muted); font-size: 0.95rem; font-weight: 500; } .main-nav a:hover, .main-nav a.active { color: var(--color-accent-dark); text-decoration: none; } .nav-toggle { display: none; } /* ===== Переключатель тёмной темы ===== */ .theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border: 1px solid var(--color-border); border-radius: 50%; background: var(--color-bg); color: var(--color-text-muted); cursor: pointer; flex-shrink: 0; transition: background-color 0.6s ease, border-color 0.6s ease, color 0.2s ease; } .theme-toggle:hover { color: var(--color-accent-dark); border-color: var(--color-accent-soft); } .theme-toggle:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--color-accent-soft); } .theme-toggle__icon { width: 18px; height: 18px; } .theme-toggle__icon--moon { display: none; } [data-theme="dark"] .theme-toggle__icon--sun { display: none; } [data-theme="dark"] .theme-toggle__icon--moon { display: block; } /* ===== Hero ===== */ .hero { padding: 72px 0 56px; text-align: center; } .hero h1 { font-family: var(--font-serif); font-size: clamp(2rem, 4vw, 3rem); margin: 0 0 16px; color: var(--color-text); } .hero p { max-width: 620px; margin: 0 auto; color: var(--color-text-muted); font-size: 1.1rem; } .hero p.hero__note { margin-top: 12px; font-size: 0.92rem; } .hero__note a { color: var(--color-accent-dark); text-decoration: underline; text-underline-offset: 2px; } /* ===== Category pills ===== */ .category-pills { position: relative; display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin: 32px 0 8px; } .category-pill { background: var(--color-surface); border: 1px solid var(--color-border); padding: 7px 16px; border-radius: 999px; font-size: 0.88rem; color: var(--color-text-muted); font-family: inherit; cursor: pointer; } .category-pill:hover, .category-pill.active { background: var(--color-accent-soft); color: var(--color-accent-dark); text-decoration: none; border-color: var(--color-accent-soft); } .category-pill__count { font-size: 0.8em; color: var(--color-text-muted); opacity: 0.75; } .category-pill.active .category-pill__count, .category-pill:hover .category-pill__count { color: inherit; opacity: 0.7; } /* Кнопка-раскрывашка списка категорий — видна только на мобильном (см. медиа-запрос ниже). Та же пилюля, что .category-pill (border-radius:999px, тот же фон/бордер/паддинг по вертикали) — просто на всю ширину экрана, чтобы визуально читалась как часть той же группы элементов, а не как отдельный посторонний блок. */ .category-filter-toggle { display: none; width: 100%; box-sizing: border-box; align-items: center; justify-content: space-between; gap: 10px; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 999px; padding: 7px 18px; font-size: 0.9rem; font-family: inherit; color: var(--color-text); cursor: pointer; margin: 32px 0 8px; } .category-filter-toggle svg { flex-shrink: 0; width: 16px; height: 16px; transition: transform 0.15s ease; } .category-filter-toggle[aria-expanded="true"] svg { transform: rotate(180deg); } /* ===== Article grid ===== */ .article-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 28px; padding: 40px 0 64px; } .article-card { background: var(--color-surface); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm); transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.6s ease, border-color 0.6s ease; display: flex; flex-direction: column; position: relative; /* нужно для растягивания ссылки-заголовка на всю карточку */ border-top: 3px solid var(--color-accent-soft); /* декоративный акцент вместо обложки — карточки текстовые, без фото */ } .article-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); } .article-card__image { aspect-ratio: 16/10; overflow: hidden; background: #1a1714; /* тёмная подложка под letterbox-поля у нестандартных пропорций фото */ } .article-card__image img { width: 100%; height: 100%; object-fit: contain; border-radius: 0; } .article-card__body { padding: 26px 24px 26px; display: flex; flex-direction: column; gap: 12px; flex: 1; } .article-card:not(:has(.article-card__image)) .article-card__title { font-size: 1.35rem; line-height: 1.35; } .article-card:not(:has(.article-card__image)) .article-card__excerpt { font-size: 0.96rem; } .article-card__category { position: relative; z-index: 2; /* поверх растянутой ссылки заголовка — кликается отдельно на фильтр категории */ align-self: flex-start; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-accent-dark); font-weight: 600; } .article-card__category:hover { text-decoration: underline; } .article-card__title { font-family: var(--font-serif); font-size: 1.25rem; margin: 0; color: var(--color-text); } .article-card__title a { color: inherit; } .article-card__title a:hover { text-decoration: none; color: var(--color-accent-dark); } /* Растягиваем кликабельную зону ссылки-заголовка на всю карточку — вся карточка становится кликабельной, не только текст заголовка */ .article-card__link::after { content: ""; position: absolute; inset: 0; z-index: 1; } .article-card__excerpt { color: var(--color-text-muted); font-size: 0.93rem; line-height: 1.55; /* Обрезаем превью до 4 строк — карточки в ряду выравниваются по высоте, текст не выглядит слишком плотной "стеной" на фоне короткого заголовка. Без flex:1 — блок не растягивается сверх своих 4 строк, иначе line-clamp обрезает пятую строку ровно посередине высоты букв (выглядело как "распил"). */ display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; } .article-card__meta { color: var(--color-text-muted); font-size: 0.82rem; margin-top: auto; padding-top: 4px; } /* ===== Breadcrumbs ===== */ .breadcrumbs { max-width: 720px; margin: 0 auto 24px; font-size: 0.88rem; color: var(--color-text-muted); display: flex; flex-wrap: wrap; gap: 6px; } .breadcrumbs a { color: var(--color-text-muted); } .breadcrumbs a:hover { color: var(--color-accent-dark); } .breadcrumbs__sep { opacity: 0.6; } .breadcrumbs__current { color: var(--color-text); } /* ===== Table of contents ===== */ .article-toc { max-width: 720px; margin: 0 auto 40px; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-sm); padding: 20px 24px; } .article-toc__title { font-family: var(--font-serif); font-weight: 700; margin-bottom: 10px; color: var(--color-text); } .article-toc ol { margin: 0; padding-left: 1.2em; } .article-toc li { margin-bottom: 6px; } .article-toc a { color: var(--color-accent-dark); } /* ===== Related articles ===== */ .related-section { background: var(--color-bg-alt); padding: 8px 0 24px; border-top: 1px solid var(--color-border); } .related-section__title { font-family: var(--font-serif); font-size: 1.4rem; max-width: var(--max-width); margin: 32px auto 0; padding: 0 24px; } .related-section .article-grid { padding-top: 24px; } /* ===== Карточки услуг (страница "Контакты") ===== */ .services-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin: 28px 0 32px; } .service-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-sm); padding: 20px 22px; } .service-card h3 { font-family: var(--font-serif); font-size: 1.05rem; margin: 0 0 8px; color: var(--color-text); } .service-card__meta { color: var(--color-text-muted); font-size: 0.86rem; margin: 0 0 10px; } .service-card__price { font-family: var(--font-sans); font-weight: 700; font-size: 1.15rem; color: var(--color-accent-dark); margin: 0; } @media (max-width: 560px) { .services-grid { grid-template-columns: 1fr; } } /* ===== CTA-блок записи на консультацию (конец статьи) ===== */ .cta-block { max-width: 720px; margin: 48px auto 0; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); padding: 32px; text-align: center; box-shadow: var(--shadow-sm); } .cta-block__title { font-family: var(--font-serif); font-size: 1.4rem; margin: 0 0 10px; color: var(--color-text); } .cta-block__text { color: var(--color-text-muted); margin: 0 0 24px; max-width: 480px; margin-left: auto; margin-right: auto; } .cta-block__actions { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; } .cta-block__button { display: inline-flex; align-items: center; gap: 8px; padding: 12px 22px; border-radius: 999px; font-family: inherit; font-weight: 600; font-size: 0.95rem; } .cta-block__button--primary { background: var(--color-accent); color: #fff; } .cta-block__button--primary:hover { background: var(--color-accent-dark); text-decoration: none; } .cta-block__button--secondary { background: transparent; color: var(--color-text); border: 1px solid var(--color-border); } .cta-block__button--secondary:hover { border-color: var(--color-accent-soft); color: var(--color-accent-dark); text-decoration: none; } /* ===== Header search ===== */ .header-search { position: relative; display: flex; align-items: center; height: 38px; margin-left: 4px; } .header-search__icon { position: absolute; left: 12px; width: 15px; height: 15px; color: var(--color-text-muted); pointer-events: none; } .header-search input { height: 100%; box-sizing: border-box; border: 1px solid var(--color-border); border-radius: 999px; padding: 0 14px 0 34px; font-family: inherit; font-size: 0.88rem; width: 190px; background: var(--color-bg); color: var(--color-text); transition: border-color 0.15s ease; } .header-search input::placeholder { color: var(--color-text-muted); } .header-search input:focus { /* Убираем родную браузерную обводку, но заменяем её собственной — без замены focus было бы не видно при навигации с клавиатуры (Tab) */ outline: none; border-color: var(--color-accent); box-shadow: 0 0 0 3px var(--color-accent-soft); } .header-search button { /* Кнопка "Найти" визуально скрыта, но остаётся доступной с клавиатуры/скринридера — обычно поиск отправляют по Enter, иконка лупы не кликабельна намеренно. */ position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } /* ===== Search page ===== */ .search-title { font-family: var(--font-serif); font-size: 2rem; margin-bottom: 20px; } .search-form { display: flex; gap: 10px; margin-bottom: 32px; max-width: 480px; } .search-form input { flex: 1; border: 1px solid var(--color-border); border-radius: var(--radius-sm); padding: 12px 16px; font-family: inherit; font-size: 1rem; background: var(--color-surface); color: var(--color-text); } .search-form button { border: none; background: var(--color-accent); color: #fff; border-radius: var(--radius-sm); padding: 12px 22px; font-family: inherit; font-weight: 600; cursor: pointer; } .search-form button:hover { background: var(--color-accent-dark); } .search-results-count { color: var(--color-text-muted); margin-bottom: 8px; } /* ===== Article page ===== */ .article-page { padding: 48px 0 80px; } .article-header { max-width: 720px; margin: 0 auto 32px; text-align: center; } .article-header h1 { font-family: var(--font-serif); font-size: clamp(1.8rem, 3.5vw, 2.6rem); margin: 0 0 16px; } .article-header .meta { color: var(--color-text-muted); font-size: 0.92rem; } .article-cover { max-width: 720px; height: min(320px, 42vw); overflow: hidden; margin: 0 auto 40px; border-radius: var(--radius-sm); background: #1a1714; /* тёмная подложка под letterbox-поля у нестандартных пропорций */ } .article-cover img { width: 100%; height: 100%; object-fit: contain; display: block; } /* Портретное (вертикальное) фото в широкой рамке давало огромные чёрные поля по бокам — сужаем и увеличиваем рамку под его форму, чтобы letterbox был минимальным. Класс проставляется на сервере по реальным пропорциям файла. */ .article-cover--portrait { max-width: min(320px, 70vw); height: min(420px, 60vh); } .article-body { max-width: 720px; margin: 0 auto; font-size: 1.08rem; color: var(--color-text); } .article-body p { margin: 0 0 22px; } .article-body h2, .article-body h3 { font-family: var(--font-serif); margin: 40px 0 16px; scroll-margin-top: 84px; } .article-body img { max-width: 100%; height: auto; display: block; margin: 24px auto; } /* Встроенные YouTube-видео (