/* -------------------------------------------------------------- ГРАФТИО — интегратор электрозарядной инфраструктуры и MicroGrid. Поверх Bootstrap 5.3 (data-bs-theme="dark"). Токены и правила — из BRANDBOOK.md: Тёмная палитра — основная. #272727 фон · #333333 карточки · #2C2C2C панели · #3C3C3C рамка · #4C4C4C усиленная · #F4F4F4 текст · #B0B0B0 muted · #D7DF23 лайм-акцент · #45B649 зелёный градиент. Шрифт: Montserrat 600/400. Никаких теней, скругления ≤ 4px. -------------------------------------------------------------- */ :root { /* Тёмная палитра — основная (§1.1) */ --gr-bg: #272727; --gr-surface: #333333; --gr-surface-dim: #2C2C2C; --gr-border: #3C3C3C; --gr-border-strong: #4C4C4C; --gr-text: #F4F4F4; --gr-text-muted: #B0B0B0; --gr-lime: #D7DF23; /* акцент — заливки и графика */ --gr-lime-text: #D7DF23; /* акцент-текст, на светлой теме затемняется */ --gr-green: #45B649; --gr-btn-fg: #0E0E0E; --gr-radius: 4px; /* Bootstrap-переменные */ --bs-body-bg: var(--gr-bg); --bs-body-color: var(--gr-text); --bs-body-font-family: "Montserrat", "Segoe UI", Arial, Helvetica, sans-serif; --bs-body-font-weight: 400; --bs-primary: var(--gr-lime); --bs-primary-rgb: 215, 223, 35; --bs-link-color: var(--gr-lime-text); --bs-link-hover-color: var(--gr-lime-text); --bs-border-color: var(--gr-border); --bs-border-radius: var(--gr-radius); --bs-border-radius-sm: var(--gr-radius); --bs-border-radius-lg: var(--gr-radius); --bs-border-radius-xl: var(--gr-radius); --bs-emphasis-color: var(--gr-text); --bs-heading-color: var(--gr-text); --bs-secondary-color: var(--gr-text-muted); } /* Светлая палитра. По умолчанию берётся из prefers-color-scheme ОС — инлайновый скрипт в проставляет data-theme='light' до отрисовки. Ручной переключатель в футере переопределяет системную настройку и сохраняется в localStorage. Акцент-текст затемняется до #6B6F10 — иначе на #F2F2F2 контраст ~1.3:1, провал WCAG AA. Плашки/значки-фон могут оставаться в #D7DF23. */ html[data-theme="light"] { --gr-bg: #F2F2F2; --gr-surface: #FAFAFA; --gr-surface-dim: #ECECEC; --gr-border: #DCDCDC; --gr-border-strong: #C4C4C4; --gr-text: #0E0E0E; --gr-text-muted: #5C5C5C; --gr-lime-text: #6B6F10; } body { background-color: var(--gr-bg); color: var(--gr-text); -webkit-font-smoothing: antialiased; } /* Обёртка hero + main + footer. overflow:hidden клипает горизонтальные выступы от glow-свечений, чтобы не появлялся горизонтальный скролл. */ .main-wrapper { overflow: hidden; } /* Фирменный фокус, а не бутстраповский синий. Тонкий 2px-outline вместо толстого shadow — брендбук не одобряет мягкие тени. */ .btn:focus-visible, .form-control:focus, .nav-link:focus-visible, a:focus-visible { outline: 2px solid var(--gr-lime); outline-offset: 2px; box-shadow: none; } /* ---------- Типографика ---------- */ h1, h2, h3, .h1, .h2, .h3 { font-weight: 600; letter-spacing: 0; } .section { padding: 4.5rem 0; } @media (max-width: 767.98px) { .section { padding: 3rem 0; } } /* ---------- Лаймовое свечение секции (§3.5 брендбука) ---------- ::before — квадратный слой 50vw × 50vw, центр по вертикали секции. Внутри — radial-gradient circle closest-side (радиус = 25vw = половина квадрата), поэтому круг полностью вписан и не касается углов box'а. Позиция левый/правый — модификаторы -left/-right, центр круга ровно на боковой границе секции. .section--glow без overflow:hidden — свечение свободно перетекает в соседние секции. .container поднят z-index:1 (глобально) — glow всегда под контентом. По брендбуку — только тёмная палитра. */ .section--glow { position: relative; } .container { position: relative; z-index: 1; } .section--glow::before { content: ""; position: absolute; top: 0; width: 100vw; height: 100vw; z-index: 0; pointer-events: none; background: radial-gradient(circle closest-side at center, rgba(215, 223, 35, 0.95) 0%, rgba(150, 200, 45, 0.60) 20%, rgba(69, 182, 73, 0.24) 42%, rgba(69, 182, 73, 0.05) 62%, transparent 78%); } .section--glow-left::before { left: -60vw; } .section--glow-right::before { right: -60vw; } /* На мобиле viewport узкий (375–420px), поэтому 100vw-круг визуально мельче чем на десктопе. Удваиваем размер и offset пропорционально — центр круга остаётся на той же относительной позиции. hero-glow (::after) не трогаем. */ @media (max-width: 767.98px) { .section--glow::before { width: 200vw; height: 200vw; } .section--glow-left::before { left: -120vw; } .section--glow-right::before { right: -120vw; } } /* «Наследный» hero-glow: угловое ellipse-свечение из брендбука §3.5, но перенесённое в первую секцию после hero, верхний правый угол. Работает поверх любых модификаторов glow (можно комбинировать). */ .section--hero-glow { position: relative; } .section--hero-glow::after { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(ellipse 130% 60% at 108% -8%, rgba(215, 223, 35, 0.95) 0%, rgba(150, 200, 45, 0.6) 20%, rgba(69, 182, 73, 0.24) 42%, rgba(69, 182, 73, 0.05) 62%, transparent 78%); } /* Eyebrow — брендбук §2.2: 13px, 600, uppercase, letter-spacing 0.2em, #D7DF23 */ .section-label { font-size: 13px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gr-lime-text); margin: 0 0 8px; } /* Заголовок слайда — брендбук §1.2: 42px, 600, line-height 1.15 */ .section-title { font-size: clamp(1.75rem, 3.4vw, 42px); font-weight: 600; line-height: 1.15; color: var(--gr-text); margin: 0 0 32px; } .section-note { font-size: 18px; color: var(--gr-text-muted); line-height: 1.65; margin-top: -1rem; margin-bottom: 0; max-width: 40rem; } /* Основной текст — 18px, 400, line-height 1.65 */ .prose p { font-size: 18px; line-height: 1.65; color: var(--gr-text); font-weight: 400; } .prose p + p { margin-top: 1.1rem; } .prose strong { color: var(--gr-text); font-weight: 600; } /* Eyebrow внутри .prose — .prose p съедает шрифт/цвет, восстанавливаем */ .prose .section-label { font-size: 13px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gr-lime-text); line-height: 1.5; margin: 0 0 8px; } /* Акцентная цифра/фраза в градиенте лайма — §3.3 «Цифра раздела». Используется точечно: 1–2 раза на слайд, не как декор. */ .accent-lime { color: var(--gr-lime-text); } /* ---------- Навбар ---------- Брендбук: плоская шапка с тонкой линейкой снизу. Без blur, без backdrop-filter, без мягких переходов фона. */ .gr-navbar { background: var(--gr-bg); border-bottom: 1px solid var(--gr-border); } .gr-navbar .navbar-brand img { height: 28px; width: auto; } /* Отступ сверху только когда меню в collapse-режиме (гамбургер), т.к. navbar-expand-xl раскрывается от 1200px */ @media (max-width: 1199.98px) { .gr-navbar { --bs-navbar-padding-y: 0.75rem; } #nav { padding-top: 1rem; } } /* Логотип в двух вариантах: тёмный для тёмной темы, светлый для светлой. Используем display вместо visibility, чтобы место не резервировалось. Специфичность важна: общие правила навбара не должны перекрывать эти. */ .gr-brand .gr-brand__dark { display: block; } .gr-brand .gr-brand__light { display: none; } html[data-theme="light"] .gr-brand .gr-brand__dark { display: none; } html[data-theme="light"] .gr-brand .gr-brand__light { display: block; } .gr-navbar .nav-link { font-size: 15px; font-weight: 400; color: var(--gr-text-muted); padding-inline: 0.9rem; white-space: nowrap; } .gr-navbar .nav-link:hover, .gr-navbar .nav-link:focus { color: var(--gr-text); } .gr-navbar .nav-link.active { color: var(--gr-lime-text); } /* ---------- Герой ---------- */ .hero { position: relative; z-index: 2; min-height: 100svh; display: flex; align-items: center; padding: 8rem 0 4rem; overflow: hidden; background: var(--gr-bg); } .hero--short { min-height: auto; padding: 8rem 0 3rem; } .hero__bg { position: absolute; inset: 0; background: url("../images/hero-building.png") center / cover no-repeat; overflow: hidden; } /* Слайдшоу на главной. Пять слоёв, кросс-фейд считает site.js на rAF (4s fade + 4s hold, старт слайдов через 8s, полный цикл 40s). При prefers-reduced-motion скрипт показывает только первый кадр. */ .hero__slideshow { position: absolute; inset: 0; overflow: hidden; } .hero__slide { position: absolute; inset: 0; background-size: cover; background-position: center; background-repeat: no-repeat; opacity: 0; will-change: opacity; } /* Фоновое видео у главной. object-fit:cover — крупнее фрейма, без чёрных полей. object-position:center 55% — совпадает с прежним background-position у картинки, чтобы кадр обрезался тем же образом. */ .hero__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 55%; display: block; z-index: 0; } /* Скрим-градиент §3.4 «приглушённое фото»: сплошной --bg со стороны текста → почти прозрачный со стороны фото. Текст лежит на непрозрачной части, фото читается на прозрачной. */ .hero__bg::after, .hero__slideshow::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--gr-bg) 0%, var(--gr-bg) 8%, color-mix(in srgb, var(--gr-bg) 20%, transparent) 100%); } @media (max-width: 991.98px) { .hero__bg::after, .hero__slideshow::after { background: linear-gradient(180deg, color-mix(in srgb, var(--gr-bg) 90%, transparent) 0%, color-mix(in srgb, var(--gr-bg) 60%, transparent) 50%, color-mix(in srgb, var(--gr-bg) 95%, transparent) 100%); } } /* Лаймовое свечение — §3.5. Формула из брендбука, без filter:blur — градиент сам по себе мягкий. Брендбук описывает свечение только для тёмной палитры (ткань бренда), поэтому на светлой скрываем. */ .hero__glow { position: absolute; inset: 0; background: radial-gradient(ellipse 130% 60% at -8% 108%, rgba(215, 223, 35, 0.95) 0%, rgba(150, 200, 45, 0.6) 20%, rgba(69, 182, 73, 0.24) 42%, rgba(69, 182, 73, 0.05) 62%, transparent 78%); pointer-events: none; } .hero__inner { position: relative; z-index: 1; } /* Крупный полупрозрачный лого по центру hero на странице контактов. Меняется в зависимости от темы (logo.svg — для тёмного фона, logo-light.svg — для светлого). ::before под контентом (z-index:0), не перехватывает клики. */ .page-balancing .hero__inner::before, .page-stations .hero__inner::before, .page-design .hero__inner::before, .page-operator .hero__inner::before, .page-contact .hero__inner::before { content: ""; position: absolute; inset: 0; background-image: url("../images/logo.svg"); background-repeat: no-repeat; background-position: top right 1rem; background-size: 50%; opacity: 0.05; z-index: 0; pointer-events: none; } html[data-theme="light"] .page-balancing .hero__inner::before, html[data-theme="light"] .page-stations .hero__inner::before, html[data-theme="light"] .page-design .hero__inner::before, html[data-theme="light"] .page-operator .hero__inner::before, html[data-theme="light"] .page-contact .hero__inner::before { background-image: url("../images/logo-light.svg"); } /* На больших мониторах фиксируем высоту hero на 4 продуктовых страницах (без contact), чтобы watermark не сжимался при коротком тексте. */ @media (min-width: 1200px) { .page-balancing .hero__inner, .page-stations .hero__inner, .page-design .hero__inner, .page-operator .hero__inner { min-height: 373px; } } .hero__title { font-size: clamp(1.75rem, 4vw, 42px); font-weight: 600; line-height: 1.15; color: var(--gr-text); margin: 0 0 1.5rem; letter-spacing: 0; } .hero__lead { font-size: 18px; font-weight: 400; line-height: 1.65; color: var(--gr-text); max-width: 40rem; } .hero__scroll { position: absolute; left: 50%; bottom: 2rem; transform: translateX(-50%); z-index: 1; color: var(--gr-text-muted); font-size: 12px; letter-spacing: 0.15em; text-transform: uppercase; text-decoration: none; } .hero__scroll:hover { color: var(--gr-lime-text); } @media (max-width: 991.98px) { .hero__scroll { display: none; } } /* Chip — тонкая рамка, uppercase, 4px радиус (не pill). Лайм — 1 акцент на слайд; чип нейтрально-серый с лаймовым текстом. */ .gr-chip { display: inline-flex; align-items: center; gap: 0.5rem; padding: 6px 12px; border: 1px solid var(--gr-border-strong); border-radius: var(--gr-radius); background: transparent; color: var(--gr-lime-text); font-size: 12px; font-weight: 600; letter-spacing: 0.15em; text-transform: uppercase; margin-bottom: 1.5rem; } .gr-chip::before { content: "■"; color: var(--gr-lime-text); font-size: 10px; line-height: 1; } /* ---------- Кнопки ---------- */ .btn { --bs-btn-font-weight: 600; --bs-btn-padding-x: 1.5rem; --bs-btn-padding-y: 0.7rem; --bs-btn-border-radius: var(--gr-radius); font-size: 15px; letter-spacing: 0; } .btn-gr { --bs-btn-color: #0E0E0E; --bs-btn-bg: var(--gr-lime); --bs-btn-border-color: var(--gr-lime); --bs-btn-hover-color: #0E0E0E; --bs-btn-hover-bg: #E5EC48; --bs-btn-hover-border-color: #E5EC48; --bs-btn-active-bg: #C5CD1F; --bs-btn-active-color: #0E0E0E; --bs-btn-active-border-color: #C5CD1F; } .btn-gr-outline { --bs-btn-color: var(--gr-text); --bs-btn-border-color: var(--gr-border-strong); --bs-btn-hover-color: var(--gr-text); --bs-btn-hover-bg: transparent; --bs-btn-hover-border-color: var(--gr-lime); --bs-btn-active-bg: transparent; --bs-btn-active-color: var(--gr-text); --bs-btn-active-border-color: var(--gr-lime); } /* ---------- Карточки ---------- Плоский фон #333333, рамка 1px #3C3C3C, radius 4px, padding 32px. */ .gr-card { height: 100%; padding: 32px; border: 1px solid var(--gr-border); border-radius: var(--gr-radius); background: var(--gr-surface); } .gr-card__index { display: inline-block; font-size: 12px; font-weight: 600; letter-spacing: 0.15em; color: var(--gr-lime-text); text-transform: uppercase; margin-bottom: 16px; } .gr-card__index::before { content: "■ "; font-size: 10px; } .gr-card__title { font-size: 24px; font-weight: 600; color: var(--gr-text); margin-bottom: 12px; line-height: 1.25; } .gr-card__text { font-size: 18px; font-weight: 400; line-height: 1.65; color: var(--gr-text); margin: 0; } .gr-card__list { list-style: none; padding: 0; margin: 1rem 0 0; } .gr-card__list li { position: relative; padding-left: 1.4rem; margin-bottom: 0.5rem; font-size: 16px; line-height: 1.5; color: var(--gr-text); } .gr-card__list li::before { content: "■"; position: absolute; left: 0; top: 0; color: var(--gr-lime-text); font-size: 10px; line-height: 1.65; } /* ---------- Крупные числа (KPI) ---------- Брендбук §2.3: метрика 52px 600 в чистом лайме, подпись 11px 500 uppercase 0.15em muted. Плоский фон #333333, рамка 1px #3C3C3C, radius 4px. */ .gr-kpi { height: 100%; padding: 32px; border: 1px solid var(--gr-border); border-radius: var(--gr-radius); background: var(--gr-surface); display: flex; flex-direction: column; gap: 12px; } .gr-kpi__value { font-size: clamp(2.25rem, 4vw, 52px); font-weight: 600; line-height: 1; color: var(--gr-lime-text); white-space: nowrap; letter-spacing: 0; } .gr-kpi__unit { font-size: 0.5em; font-weight: 600; letter-spacing: 0; } .gr-kpi--compact .gr-kpi__value { font-size: clamp(1.75rem, 2.8vw, 2.25rem); } .gr-kpi--compact .gr-kpi__unit { font-size: 0.65em; } .gr-kpi__caption { font-size: 16px; line-height: 1.55; color: var(--gr-text); margin: 0; } .gr-kpi__hint { font-size: 11px; font-weight: 500; letter-spacing: 0.15em; text-transform: uppercase; color: var(--gr-text-muted); } /* ---------- Credentials — плашки регалий ---------- */ .gr-cred { display: flex; gap: 1rem; padding: 24px; border: 1px solid var(--gr-border); border-radius: var(--gr-radius); background: var(--gr-surface); height: 100%; } /* Метка регалии — плоский лайм, квадрат 4px, тёмный текст. Никаких gradient/glow. На светлой теме — приглушённый лайм-фон и тёмно-лаймовый текст, чтобы не спорить с общей палитрой (лайм — единственный акцент, но плашка не должна претендовать на роль главной метрики). */ .gr-cred__mark { flex: 0 0 auto; width: 42px; height: 42px; border-radius: var(--gr-radius); background: var(--gr-lime); color: #0E0E0E; display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 14px; letter-spacing: 0; } html[data-theme="light"] .gr-cred__mark { background: color-mix(in srgb, var(--gr-lime) 20%, transparent); color: var(--gr-lime-text); } .gr-cred__title { font-size: 18px; font-weight: 600; color: var(--gr-text); margin: 0 0 0.35rem; line-height: 1.35; } .gr-cred__note { font-size: 14px; color: var(--gr-text-muted); margin: 0; line-height: 1.5; } /* ---------- Применение / картинка + описание ---------- Скрим сверху вниз — сохраняем, это §3.4 «приглушённое фото». */ .gr-usecase { position: relative; height: 100%; min-height: 24rem; border: 1px solid var(--gr-border); border-radius: var(--gr-radius); overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; padding: 32px; } .gr-usecase__bg { position: absolute; inset: 0; background-size: cover; background-position: center; } .gr-usecase__bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 0%, color-mix(in srgb, var(--gr-bg) 55%, transparent) 55%, color-mix(in srgb, var(--gr-bg) 95%, transparent) 100%); } .gr-usecase > :not(.gr-usecase__bg) { position: relative; z-index: 1; } /* Вариант «диаграмма»: наверху — SVG-схема, внизу — контент. Оформление обеих карточек одинаковое, никаких bg-фото. */ .gr-usecase--diagram { padding: 0; min-height: 22rem; background: var(--gr-surface); justify-content: stretch; } .gr-usecase__diagram { aspect-ratio: 2 / 1; background: var(--gr-surface-dim); border-bottom: 1px solid var(--gr-border); display: flex; align-items: center; justify-content: center; padding: 1.5rem 2rem; color: var(--gr-text-muted); } .gr-usecase__diagram svg { width: 100%; height: 100%; max-width: 32rem; } .gr-usecase__body { padding: 28px 32px 32px; flex: 1; } /* ---------- Этапы ---------- Брендбук §1.4: однородные блоки — через 1px разделители, а не отдельные карточки. Номера — из счётчика, лайм, tabular-nums. */ .gr-steps { list-style: none; margin: 0; padding: 0; counter-reset: step; border: 1px solid var(--gr-border); border-radius: var(--gr-radius); background: var(--gr-surface); } .gr-step { counter-increment: step; position: relative; padding: 24px 24px 24px 72px; border-bottom: 1px solid var(--gr-border); } .gr-step:last-child { border-bottom: 0; } .gr-step::before { content: "0" counter(step); position: absolute; left: 24px; top: 22px; font-size: 18px; font-weight: 600; color: var(--gr-lime-text); font-variant-numeric: tabular-nums; } .gr-step__title { font-size: 18px; font-weight: 400; color: var(--gr-text); margin: 0; line-height: 1.5; } /* ---------- Карточка объекта ---------- Живёт внутри общей карусели-marquee (та же, что и у партнёров). Ширина адаптивная — одна карточка не должна занимать больше 30rem и не должна быть уже 85vw на мобиле. */ .gr-project { border: 1px solid var(--gr-border); border-radius: var(--gr-radius); background: var(--gr-surface); overflow: hidden; display: flex; flex-direction: column; } .gr-project__image { aspect-ratio: 3 / 2; background: var(--gr-surface-dim); overflow: hidden; } .gr-project__image img { width: 100%; height: 100%; object-fit: cover; display: block; } .gr-project__body { padding: 20px 24px 24px; } .gr-project__dev { font-size: 11px; font-weight: 600; letter-spacing: 0.15em; text-transform: uppercase; color: var(--gr-lime-text); margin: 0 0 0.35rem; } .gr-project__name { font-size: 20px; font-weight: 600; color: var(--gr-text); margin: 0 0 0.5rem; } .gr-project__note { font-size: 14px; line-height: 1.55; color: var(--gr-text-muted); margin: 0; } /* ---------- Партнёры-девелоперы (marquee) ---------- */ /* ---------- Обёртка вокруг Swiper ---------- Padding по 3.5rem — там живут стрелки .gr-slider__arrow; mask-image даёт fade по бокам. */ .gr-swiper-wrap { position: relative; padding: 0 3.5rem; } .gr-swiper { /* Swiper сам ставит overflow: hidden, поэтому mask работает по .swiper. */ mask-image: linear-gradient(90deg, transparent 0, #000 3rem, #000 calc(100% - 3rem), transparent 100%); -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 3rem, #000 calc(100% - 3rem), transparent 100%); } /* Ширину слайда фиксируем на уровне .swiper-slide (Swiper ставит её inline'ом для slidesPerView:'auto', иначе классы карточек не помогут). */ .gr-swiper--projects .swiper-slide { width: min(85vw, 30rem); height: auto; } .gr-swiper--partners .swiper-slide { width: 12rem; height: auto; } @media (max-width: 767.98px) { .gr-swiper--partners .swiper-slide { width: 10rem; } } /* Карточки внутри слайда занимают всю его ширину — иначе gr-partner осталась бы 12rem и всё равно съезжала. */ .gr-swiper .swiper-slide > .gr-project, .gr-swiper .swiper-slide > .gr-partner { width: 100%; height: 100%; } .gr-swiper img { pointer-events: none; -webkit-user-drag: none; } /* Партнёр — квадратный лого-тайл без подписи. Имя/описание убраны заказчиком: галерея работает как чистая лого-стена. */ .gr-partner { aspect-ratio: 1 / 1; padding: 14px; border: 1px solid var(--gr-border); border-radius: var(--gr-radius); background: var(--gr-surface); display: flex; align-items: center; justify-content: center; transition: border-color 0.15s ease, background 0.15s ease; } .gr-partner:hover { border-color: var(--gr-border-strong); } /* Логотип занимает весь квадрат тайла (через object-fit: contain). Плашки нет — все логотипы монохромные силуэты и живут прямо на поверхности карточки: в dark — белые на #333, в light — те же файлы инвертируются CSS-фильтром до чёрных на #FAFAFA. */ .gr-partner__logo { width: 100%; height: 100%; min-height: 0; flex-shrink: 0; background: transparent; display: flex; align-items: center; justify-content: center; overflow: hidden; } .gr-partner__logo-img { max-height: 100%; max-width: 100%; width: auto; height: auto; object-fit: contain; display: block; } html[data-theme="light"] .gr-partner__logo-img { filter: invert(1); } /* Фолбэк: если у партнёра нет логотипа — показываем название по центру той же квадратной плитки. */ .gr-partner--text .gr-partner__name { font-size: 20px; font-weight: 600; color: var(--gr-text); letter-spacing: 0.01em; line-height: 1.25; text-align: center; } /* Стрелки в обёртке Swiper центрируем по вертикали — карточки одноряднее marquee, поднимать не нужно. */ .gr-swiper-wrap .gr-slider__arrow { top: 50%; } @media (max-width: 767.98px) { .gr-swiper-wrap { padding: 0 1rem; } .gr-swiper { mask-image: none; -webkit-mask-image: none; } .gr-partner { padding: 10px; } } /* Стрелки прокрутки слайдера */ .gr-slider__arrow { position: absolute; top: calc(50% - 2.5rem); transform: translateY(-50%); width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--gr-border-strong); background: var(--gr-surface); color: var(--gr-text); font-size: 28px; line-height: 1; cursor: pointer; z-index: 2; display: flex; align-items: center; justify-content: center; transition: background 0.15s ease, border-color 0.15s ease, opacity 0.2s ease; opacity: 0.9; } .gr-slider__arrow:hover { background: var(--gr-lime-text); border-color: var(--gr-lime-text); color: var(--gr-bg); opacity: 1; } .gr-slider__arrow[disabled] { opacity: 0.25; cursor: not-allowed; pointer-events: none; } .gr-slider__arrow--prev { left: 12px; } .gr-slider__arrow--next { right: 12px; } .gr-slider__arrow span { display: block; margin-top: -8px; } @media (max-width: 767.98px) { .gr-slider__arrow { display: none; } } /* ---------- Продукт: карточка станции ---------- */ .gr-station { border: 1px solid var(--gr-border); border-radius: var(--gr-radius); background: var(--gr-surface); overflow: hidden; height: 100%; display: flex; flex-direction: column; } .gr-station__image { position: relative; isolation: isolate; /* локальный контекст наложения для свечения ниже */ aspect-ratio: 1 / 1; background: url("../images/bgglow.png") center / 100% 100% no-repeat, var(--gr-surface-dim); display: block; border-bottom: 1px solid var(--gr-border); overflow: hidden; } .gr-station__image img { position: relative; /* над свечением */ width: 100%; height: 100%; object-fit: contain; display: block; } .gr-station__body { padding: 32px; } .gr-station__name { font-size: 24px; font-weight: 600; color: var(--gr-text); margin: 0 0 0.35rem; } .gr-station__sub { font-size: 11px; font-weight: 500; letter-spacing: 0.15em; text-transform: uppercase; color: var(--gr-lime-text); margin-bottom: 1rem; } /* ---------- Спецификации (таблица) ---------- */ .gr-spec-table { width: 100%; border-collapse: separate; border-spacing: 0; color: var(--gr-text); border: 1px solid var(--gr-border); border-radius: var(--gr-radius); overflow: hidden; font-size: 16px; background: var(--gr-surface); } .gr-spec-table th, .gr-spec-table td { padding: 14px 20px; border-bottom: 1px solid var(--gr-border); vertical-align: top; text-align: left; } .gr-spec-table tr:last-child th, .gr-spec-table tr:last-child td { border-bottom: 0; } .gr-spec-table th { color: var(--gr-text); font-weight: 600; background: var(--gr-surface-dim); width: 32%; } .gr-spec-table thead th { background: var(--gr-surface-dim); color: var(--gr-lime-text); font-size: 11px; letter-spacing: 0.15em; text-transform: uppercase; font-weight: 600; } .gr-spec-table td.is-em { color: var(--gr-text); font-weight: 600; } @media (max-width: 575.98px) { .gr-spec-table th, .gr-spec-table td { padding: 12px 14px; } } /* ---------- Big banner ---------- Плоский фон #333333, рамка 1px #3C3C3C, radius 4px. Заголовок 42px 600. Лаймовое свечение вынесено на секцию-контейнер (см. .section--glow). */ .gr-banner { position: relative; padding: 48px; border-radius: var(--gr-radius); background: var(--gr-surface); border: 1px solid var(--gr-border); overflow: hidden; } .gr-banner__title { font-size: clamp(1.5rem, 3vw, 42px); color: var(--gr-text); font-weight: 600; line-height: 1.15; margin: 0 0 16px; } .gr-banner__text { font-size: 18px; font-weight: 400; color: var(--gr-text); line-height: 1.65; margin: 0; max-width: 44rem; } @media (max-width: 575.98px) { .gr-banner { padding: 28px; } } /* ---------- FAQ (details/summary) ---------- */ .gr-faq { border-top: 1px solid var(--gr-border); padding: 20px 0; } .gr-faq:last-of-type { border-bottom: 1px solid var(--gr-border); } .gr-faq > summary { cursor: pointer; list-style: none; font-size: 17px; font-weight: 500; color: var(--gr-text); padding-right: 2rem; position: relative; } .gr-faq > summary::-webkit-details-marker { display: none; } .gr-faq > summary::after { content: "+"; position: absolute; right: 0; top: 0; font-weight: 400; font-size: 22px; color: var(--gr-lime-text); transition: transform 0.2s ease; } .gr-faq[open] > summary::after { content: "−"; } .gr-faq > p { margin: 0.75rem 0 0; color: var(--gr-text-muted); font-size: 15px; line-height: 1.6; max-width: 42rem; } /* ---------- Контакты и форма ---------- */ .gr-contact-card { border: 1px solid var(--gr-border); border-radius: var(--gr-radius); background: var(--gr-surface); padding: 40px; } @media (max-width: 575.98px) { .gr-contact-card { padding: 24px; } } .gr-contact-link { display: block; font-size: 22px; font-weight: 600; color: var(--gr-text); text-decoration: none; margin-bottom: 0.5rem; } .gr-contact-link:hover { color: var(--gr-lime-text); } .form-control { background-color: var(--gr-surface-dim); border: 1px solid var(--gr-border); border-radius: var(--gr-radius); padding: 12px 14px; color: var(--gr-text); font-size: 16px; } .form-control::placeholder { color: var(--gr-text-muted); } .form-control:focus { background-color: var(--gr-surface-dim); border-color: var(--gr-lime); color: var(--gr-text); } .form-consent { display: grid; grid-template-columns: auto 1fr; column-gap: 10px; row-gap: 4px; font-size: 13px; line-height: 1.5; color: var(--gr-text-muted); } .form-consent input[type="checkbox"] { margin-top: 3px; cursor: pointer; } .form-consent label { cursor: pointer; margin: 0; } .form-consent .invalid-feedback { grid-column: 1 / -1; } /* Ссылки в согласии — фирменный лайм, чтобы читались среди muted-текста. На светлой теме гаснут до #6B6F10 (WCAG AA), --gr-lime-text даёт обе палитры автоматически. */ .form-consent a { color: var(--gr-lime-text); text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--gr-lime-text) 45%, transparent); text-underline-offset: 2px; } .form-consent a:hover, .form-consent a:focus { color: var(--gr-lime-text); text-decoration-color: var(--gr-lime-text); } /* ---------- Подвал ---------- */ .gr-footer { border-top: 1px solid var(--gr-border); padding: 40px 0 32px; font-size: 14px; color: var(--gr-text-muted); } .gr-footer a { color: var(--gr-text-muted); text-decoration: none; } .gr-footer a:hover { color: var(--gr-lime-text); } .gr-footer img { height: 22px; width: auto; } .gr-footer__heading { font-size: 11px; font-weight: 600; letter-spacing: 0.15em; text-transform: uppercase; color: var(--gr-lime-text); margin: 0 0 12px; } .gr-footer__links { list-style: none; padding: 0; margin: 0; } .gr-footer__links li + li { margin-top: 6px; } .gr-footer__links a { line-height: 1.5; } .gr-footer__copy { font-size: 13px; } .gr-footer__legal { margin: 28px 0 0; padding-top: 20px; border-top: 1px solid var(--gr-border); font-size: 13px; line-height: 1.5; } /* ---------- Появление при скролле ---------- .reveal видимы по умолчанию. Скрипт добавляет .js на , и уже тогда невидимые блоки плавно появляются. */ .js .reveal:not(.is-visible) { opacity: 0; transform: translateY(12px); } .js .reveal { transition: opacity 0.5s ease, transform 0.5s ease; } @media (prefers-reduced-motion: reduce) { .reveal { transition: none; } .js .reveal:not(.is-visible) { opacity: 1; transform: none; } } /* ---------- Переключатель темы ---------- position:fixed внизу-слева. По брендбуку — плоская квадратная кнопка 4px radius, тонкая рамка, лайм-акцент на иконке. */ .gr-theme-toggle { position: fixed; left: 20px; bottom: 20px; z-index: 1050; width: 44px; height: 44px; padding: 0; border: 1px solid var(--gr-border-strong); border-radius: var(--gr-radius); background: var(--gr-surface-dim); color: var(--gr-text-muted); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: color 0.15s ease, border-color 0.15s ease; } .gr-theme-toggle:hover { color: var(--gr-lime-text); } .gr-theme-toggle svg { width: 20px; height: 20px; display: block; } /* Иконка меняется в зависимости от текущей темы: в тёмной показываем солнце (переключит в светлую), в светлой — луну. */ .gr-theme-toggle .gr-theme-toggle__sun { display: block; } .gr-theme-toggle .gr-theme-toggle__moon { display: none; } html[data-theme="light"] .gr-theme-toggle .gr-theme-toggle__sun { display: none; } html[data-theme="light"] .gr-theme-toggle .gr-theme-toggle__moon { display: block; } @media (max-width: 575.98px) { .gr-theme-toggle { left: 12px; bottom: 12px; width: 40px; height: 40px; } } /* ---------- Квадратная плашка под фото решения (balancing) ---------- Обёртка задаёт 1:1, а object-position:left оставляет в кадре именно левую часть оригинала — правый край физически не режем, файл остаётся исходным 1038×626 (быстрый откат = вернуть класс). */ .gr-solution-image { aspect-ratio: 1 / 1; border: 1px solid var(--gr-border); border-radius: var(--gr-radius); overflow: hidden; background: var(--gr-surface-dim); } .gr-solution-image img { width: 100%; height: 100%; object-fit: cover; object-position: left center; display: block; } /* ---------- Кривая потребления (balancing) ---------- Оригинал (consumption-curve.png) — чёрно-белая растровая картинка. Здесь inline-SVG: линии/подписи на currentColor, кривая на --gr-lime — цвета сами подстраиваются под тёмную и светлую тему. */ .gr-consumption { margin: 0; padding: 24px 24px 20px; border: 1px solid var(--gr-border); border-radius: var(--gr-radius); background: var(--gr-surface); color: var(--gr-text); } .gr-consumption__title { font-family: "Montserrat", sans-serif; font-size: 16px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--gr-text); margin-bottom: 12px; } .gr-consumption__svg { display: block; width: 100%; height: auto; font-family: "Montserrat", sans-serif; } .gr-consumption__grid line { stroke: currentColor; stroke-width: 1; opacity: 0.18; } .gr-consumption__grid text { fill: currentColor; font-size: 11px; opacity: 0.65; } .gr-consumption__drops line { stroke: var(--gr-lime); stroke-width: 1; opacity: 0.22; } .gr-consumption__line { fill: none; stroke: var(--gr-lime); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; } .gr-consumption__xlabels text { fill: currentColor; font-size: 11px; opacity: 0.65; } .gr-consumption__axis { fill: currentColor; font-size: 10px; font-weight: 500; letter-spacing: 0.15em; opacity: 0.55; } .gr-consumption figcaption { margin-top: 14px; padding-top: 14px; font-size: 14px; line-height: 1.55; color: var(--gr-text-muted); border-top: 1px solid var(--gr-border); } /* На светлой теме тонкие лаймовые «капли» тускловаты — подтягиваем */ html[data-theme="light"] .gr-consumption__drops line { stroke: var(--gr-lime-text); opacity: 0.35; } html[data-theme="light"] .gr-consumption__line { stroke: var(--gr-lime-text); } /* ---------- Кнопка «наверх» ---------- Появляется, когда пользователь прокрутил больше 200px. Тот же плоский квадратный стиль, что и у переключателя темы, — просто зеркально в правом нижнем углу. */ .gr-scroll-top { position: fixed; right: 20px; bottom: 20px; z-index: 1050; width: 44px; height: 44px; padding: 0; border: 1px solid var(--gr-border-strong); border-radius: var(--gr-radius); background: var(--gr-surface-dim); color: var(--gr-text-muted); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; opacity: 0; transform: translateY(8px); pointer-events: none; transition: opacity 0.2s ease, transform 0.2s ease, color 0.15s ease, border-color 0.15s ease; } .gr-scroll-top.is-visible { opacity: 1; transform: translateY(0); pointer-events: auto; } .gr-scroll-top:hover { color: var(--gr-lime-text); } .gr-scroll-top svg { width: 20px; height: 20px; display: block; } @media (max-width: 575.98px) { .gr-scroll-top { right: 12px; bottom: 12px; width: 40px; height: 40px; } } /* ---------- Cookie-баннер ---------- */ /* По умолчанию баннер скрыт через [hidden]. site.js проверяет localStorage 'gr-cookie-consent' на DOMContentLoaded и снимает hidden, если посетитель ещё не сделал выбор. Так избегаем мигания у тех, кто уже принял/отклонил. */ .gr-cookie-banner { position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 1080; background: var(--gr-surface); border: 1px solid var(--gr-border-strong); border-radius: var(--gr-radius); box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35); padding: 16px 20px; animation: gr-cookie-slide-up 0.25s ease-out; } @keyframes gr-cookie-slide-up { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } } .gr-cookie-banner__inner { display: flex; align-items: center; gap: 20px; max-width: 1140px; margin: 0 auto; } .gr-cookie-banner__text { margin: 0; font-size: 13px; line-height: 1.5; color: var(--gr-text); flex: 1; } .gr-cookie-banner__text a { color: var(--gr-lime-text); text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--gr-lime-text) 45%, transparent); text-underline-offset: 2px; } .gr-cookie-banner__text a:hover, .gr-cookie-banner__text a:focus { text-decoration-color: var(--gr-lime-text); } .gr-cookie-banner__actions { display: flex; gap: 8px; flex-shrink: 0; } @media (max-width: 767.98px) { .gr-cookie-banner { left: 12px; right: 12px; bottom: 12px; padding: 14px 16px; } .gr-cookie-banner__inner { flex-direction: column; align-items: stretch; gap: 12px; } .gr-cookie-banner__actions { justify-content: stretch; } .gr-cookie-banner__actions .btn { flex: 1; } }