/* =========================================================== CASRV.KZ — дизайн-слой поверх Astra (ТОО «Central Asia Services») Тот же стиль, что у karcement.kz и cac.kz (industrial-editorial): Oswald для заголовков, IBM Plex Sans для текста. У логотипа CAS нет фирменного цвета (чёрный текст), поэтому акцент — спокойный синий #517098 из прежнего дизайна casrv.kz; меняется одной переменной. =========================================================== */ :root { --cas-ink: #1a1a1a; --cas-paper: #ffffff; --cas-accent: #517098; /* синий прежнего дизайна casrv.kz */ --cas-steel: #535c69; /* фирменный серо-стальной, brand.json */ --cas-line: #666666; --cas-muted: #666666; --cas-display: "Oswald", "Arial Narrow", sans-serif; --cas-body: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, Arial, sans-serif; --cas-measure: 72ch; /* предельная длина строки текста */ } /* ----- База ----- */ body { background: var(--cas-paper); color: var(--cas-ink); font-family: var(--cas-body); font-size: 16.5px; line-height: 1.65; } h1, h2, h3, h4, .entry-title, .ast-archive-title, .site-title { font-family: var(--cas-display); line-height: 1.15; letter-spacing: -0.01em; color: var(--cas-ink); font-weight: 600; } h1, .entry-title.ast-archive-title { font-size: clamp(1.9rem, 1.3rem + 2.4vw, 3rem); font-weight: 700; } h2 { font-size: clamp(1.4rem, 1.1rem + 1.2vw, 2rem); margin-top: 1.4em; } h3 { font-size: clamp(1.15rem, 1rem + .5vw, 1.4rem); } .entry-content p, .entry-content li { max-width: none; } a { color: var(--cas-ink); text-decoration: none; } .entry-content a, .entry-content p a, .entry-content li a { color: var(--cas-ink); border-bottom: 1px solid var(--cas-accent); padding-bottom: 1px; } a:hover, a:focus, .entry-content a:hover { color: var(--cas-accent); } /* ----- Колонка страниц и новостей: пошире и по центру ----- Раньше абзацы были ограничены 72ch и прижаты влево. Теперь колонка до 1000 px по центру контейнера; длину строки задаёт сама колонка. Главная (слайдер + сетка новостей) и лента новостей остаются на всю ширину. */ body:not(.home):not(.blog):not(.archive) .entry-header, body:not(.home):not(.blog):not(.archive) .entry-content, body:not(.home):not(.blog):not(.archive) .post-navigation { max-width: 1000px; margin-left: auto; margin-right: auto; } /* Одиночная новость: Astra включает «узкий» контейнер (750 px) — расширяем до ширины страниц; карточка остаётся по центру. */ body.single-post.ast-narrow-container #content > .ast-container { max-width: 1100px; } /* ----- Контейнер ----- */ .ast-container { max-width: 1180px; } /* ----- Шапка и меню ----- */ .site-header, #masthead { background: var(--cas-paper); border-bottom: 1px solid #e4e4e4; } .custom-logo, .site-logo-img img { max-height: 56px; width: auto; } .main-header-menu > .menu-item > a { font-family: var(--cas-display); text-transform: uppercase; letter-spacing: 0.05em; font-weight: 500; font-size: 0.92rem; color: var(--cas-steel); } .main-header-menu > .menu-item > a:hover, .main-header-menu > .current-menu-item > a { color: var(--cas-accent); } /* Активный раздел — акцентным цветом. Перебиваем штатную подсветку Astra (.ast-builder-menu-1 .menu-item.current-menu-item > .menu-link ставит синий --ast-global-color-1); её специфичность выше, поэтому нужен !important и явные классы Astra. current-menu-ancestor — для /news/ (page_for_posts): на архиве активен предок-пункт «Новости». */ .ast-builder-menu-1 .main-header-menu .menu-item.current-menu-item > .menu-link, .ast-builder-menu-1 .main-header-menu .menu-item.current-menu-ancestor > .menu-link, .ast-builder-menu-1 .main-header-menu .menu-item.current-menu-item > .menu-link:hover, .ast-builder-menu-1 .main-header-menu .menu-item.current-menu-ancestor > .menu-link:hover { color: var(--cas-accent) !important; } /* ----- Переключатель языков (последний пункт меню primary, см. wp-content/mu-plugins/casrv-lang-switch.php) ----- */ .cas-lang-switch { /* Astra задаёт пунктам меню display:flex; flex-direction:column (для внутренней вёрстки одиночной ссылки с возможной стрелкой подменю) — у нас в этом
  • три соседних , без явного row они встают в столбец друг под другом. */ display: flex !important; flex-direction: row !important; align-items: center; gap: .5rem; margin-left: .5rem; padding-left: 1rem; border-left: 1px solid #e4e4e4; } .cas-lang-switch__item { font-family: var(--cas-display); font-size: .8rem; font-weight: 600; letter-spacing: .04em; color: var(--cas-muted) !important; } .cas-lang-switch__item:hover { color: var(--cas-accent) !important; } .cas-lang-switch__item--current { color: var(--cas-accent) !important; } .cas-lang-switch__item:not(:last-child)::after { content: "/"; margin-left: .5rem; color: #ccc; font-weight: 400; } /* ----- Кнопки/ссылка «подробнее» ----- */ .cas-more, .cas-home-news-more, .cas-home-news-all { font-family: var(--cas-display); text-transform: uppercase; letter-spacing: .06em; font-weight: 500; font-size: .85rem; color: var(--cas-accent); border: 0 !important; } .cas-more:hover, .cas-home-news-more:hover, .cas-home-news-all:hover { color: var(--cas-ink); } /* ----- Главная: слайдер (чистый CSS crossfade, без JS) ----- Остаётся внутри .ast-container той же ширины, что текстовый врез и новости ниже. Четыре кадра по 6 с (цикл 24 с): кадр i виден в окне [6i, 6i+5] с, плавно гаснет к 6i+6 и плавно появляется за секунду до своего окна. Отрицательные задержки заводят анимацию «в середине цикла», чтобы первый кадр сразу был виден, а второй не «выскакивал» с жёстким срезом. Исходники 800 px — aspect-ratio 16/7 с object-fit: cover. */ .cas-home-slider { position: relative; width: 100%; aspect-ratio: 16 / 7; overflow: hidden; background: var(--cas-steel); } .cas-home-slider__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; animation: cas-home-slider-fade 24s infinite; } .cas-home-slider__img:nth-of-type(1) { animation-delay: -24s; } .cas-home-slider__img:nth-of-type(2) { animation-delay: -18s; } .cas-home-slider__img:nth-of-type(3) { animation-delay: -12s; } .cas-home-slider__img:nth-of-type(4) { animation-delay: -6s; } @keyframes cas-home-slider-fade { 0% { opacity: 1; } 21% { opacity: 1; } 25% { opacity: 0; } 96% { opacity: 0; } 100% { opacity: 1; } } @media (prefers-reduced-motion: reduce) { .cas-home-slider__img { animation: none; } .cas-home-slider__img:nth-of-type(1) { opacity: 1; } } /* ----- Главная: текстовый врез «о компании» ----- Один блок текста на всю ширину под слайдером. */ .cas-home-intro { padding: 1rem 0 .5rem; } .cas-home-intro .cas-text { max-width: 46rem; } .cas-home-intro .cas-text h1 { margin: 0 0 1.1rem; } .cas-home-intro .cas-text p { margin: 0 0 .9rem; } .cas-home-intro .cas-text p:last-child { margin-bottom: 0; } /* Заголовок страницы «Главная» на главной не показываем. */ .home .entry-header, .home .ast-title-bar-wrap { display: none; } /* ----- Новости на главной (шорткод) ----- */ .casrv-home-news { margin: 2.5rem 0 .5rem; } .casrv-home-news-head { display: flex; align-items: baseline; justify-content: space-between; border-bottom: 3px solid var(--cas-accent); padding-bottom: .5rem; margin-bottom: 1.4rem; } .casrv-home-news-head h2 { margin: 0; } .casrv-home-news-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.75rem; } .casrv-home-news-card { display: flex; flex-direction: column; border: 1px solid #e3e6ea; border-radius: 4px; padding: 1.1rem 1.25rem; background: var(--cas-paper); } .casrv-home-news-date { font-size: .82rem; color: var(--cas-muted); margin-bottom: .4rem; } .casrv-home-news-title { font-size: 1.05rem; line-height: 1.3; margin: 0 0 .6rem; } .casrv-home-news-title a { color: var(--cas-ink); border: 0 !important; } .casrv-home-news-title a:hover { color: var(--cas-accent); } .casrv-home-news-excerpt { font-size: .92rem; color: #4a4f56; line-height: 1.5; margin: 0 0 .9rem; flex: 1 1 auto; } /* ----- Лента новостей (архив) ----- */ body.blog { background: var(--cas-paper); } body.blog article .ast-taxonomy-container.cat-links, body.blog article .entry-header.ast-blog-meta-container { display: none; } .cas-news-date { display: block; font-size: .82rem; color: var(--cas-muted); margin-bottom: .3rem; } .cas-news-more { display: inline-block; margin-top: .6rem; color: var(--cas-accent); font-weight: 500; } .cas-news-more:hover { color: var(--cas-ink); } /* Скромный заголовок одиночной записи/страницы — как на cac.kz: заголовок идёт мелким серым над датой, чтобы не спорить с текстом. */ .entry-header .entry-title { font-size: .7rem !important; font-weight: 500 !important; margin-top: 0 !important; margin-bottom: .6em !important; color: #6c757d !important; letter-spacing: .02em; } /* ----- Отчётность: таблица «период — вид — скачать» ----- */ .cas-docs { width: 100%; max-width: 760px; border-collapse: collapse; } .cas-docs th, .cas-docs td { padding: .7rem .75rem; text-align: left; border-bottom: 1px solid #e4e4e4; } .cas-docs th { font-family: var(--cas-display); text-transform: uppercase; letter-spacing: .05em; font-size: .85rem; color: var(--cas-steel); border-bottom: 2px solid var(--cas-accent); } .cas-docs td:last-child { white-space: nowrap; } /* ----- Контакты ----- */ .cas-contacts table { width: 100%; border-collapse: collapse; } /* У таблиц старого сайта в атрибутах жёстко заданы width/height (507×278): общее правило «таблица = прокручиваемый блок» превращало их в рамку с внутренним скроллом. Для контактов и реквизитов — обычная таблица. */ .entry-content .cas-contacts table { display: table; height: auto !important; max-width: 100%; } .cas-contacts td, .cas-contacts th { height: auto !important; } .cas-contacts td, .cas-contacts th { padding: .5rem .75rem; border-bottom: 1px solid #e4e4e4; text-align: left; } /* ----- Подвал: логотипы группы, как на karcement.kz ----- Нижняя плашка копирайта Astra скрыта целиком (Astra задаёт ей раскладку инлайновым стилем с !important, поэтому обычного display:none мало). */ .site-below-footer-wrap { display: none !important; } .cas-footer { background: #f0f0f0; padding: 1.4rem 1rem; border-top: 1px solid #e4e4e4; } /* Три логотипа с разделительными линиями — тот же приём, что у cac.kz. */ .cas-footer__partners { max-width: 1100px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1px 1fr 1px 1fr; align-items: center; gap: 1.5rem; } .cas-footer__partner { display: flex; align-items: center; justify-content: center; text-decoration: none !important; border: 0 !important; } /* opacity — на самой картинке, не на обёртке: opacity у родителя создаёт контекст наложения, и mix-blend-mode перестаёт «топить» белую подложку. */ .cas-footer__logo { opacity: .85; } .cas-footer__partner:hover .cas-footer__logo { opacity: 1; } .cas-footer__logo { max-height: 56px; max-width: 200px; width: auto; height: auto; object-fit: contain; /* Логотипы приходят с белой подложкой (JPG/PNG без альфа- канала): multiply топит белый в цвет подвала. */ mix-blend-mode: multiply; } .cas-footer__sep { width: 1px; height: 48px; background: rgba(0,0,0,.15); justify-self: center; } /* ----- Адаптив ----- */ @media (max-width: 900px) { .casrv-home-news-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 768px) { body { font-size: 16px; } /* Узкий экран: логотипы столбиком, между ними горизонтальные линии */ .cas-footer__partners { grid-template-columns: 1fr; gap: 1rem; } .cas-footer__sep { width: 80%; height: 1px; justify-self: center; } } @media (max-width: 480px) { .casrv-home-news-grid { grid-template-columns: 1fr; } } /* Любая таблица старого сайта должна прокручиваться, а не ломать вёрстку */ .entry-content table { display: block; overflow-x: auto; max-width: 100%; } /* Изображения и встроенные объекты не должны раздвигать вьюпорт на узких экранах — на старом сайте попадаются img/iframe с жёстко заданной шириной в атрибутах. */ img, iframe, video, embed, object { max-width: 100%; height: auto; } /* Само тело страницы не должно скроллиться по горизонтали ни при каких обстоятельствах — последний рубеж защиты от переполнения. */ html, body { max-width: 100%; overflow-x: hidden; }