/* ---------- Шрифт (self-hosted, fonts/manrope) ---------- */ @font-face{font-family:'Manrope';font-style:normal;font-weight:200 800;font-display:swap;src:url('/fonts/manrope/Manrope-cyrillic-ext.woff2') format('woff2');unicode-range:U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F} @font-face{font-family:'Manrope';font-style:normal;font-weight:200 800;font-display:swap;src:url('/fonts/manrope/Manrope-cyrillic.woff2') format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116} @font-face{font-family:'Manrope';font-style:normal;font-weight:200 800;font-display:swap;src:url('/fonts/manrope/Manrope-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF} @font-face{font-family:'Manrope';font-style:normal;font-weight:200 800;font-display:swap;src:url('/fonts/manrope/Manrope-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} /* 'Noto Sans' — псевдоним Manrope: старые правила и инлайн-стили контента с font-family:'Noto Sans' получают тот же шрифт */ @font-face{font-family:'Noto Sans';font-style:normal;font-weight:200 800;font-display:swap;src:url('/fonts/manrope/Manrope-cyrillic-ext.woff2') format('woff2');unicode-range:U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F} @font-face{font-family:'Noto Sans';font-style:normal;font-weight:200 800;font-display:swap;src:url('/fonts/manrope/Manrope-cyrillic.woff2') format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116} @font-face{font-family:'Noto Sans';font-style:normal;font-weight:200 800;font-display:swap;src:url('/fonts/manrope/Manrope-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF} @font-face{font-family:'Noto Sans';font-style:normal;font-weight:200 800;font-display:swap;src:url('/fonts/manrope/Manrope-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} /* ---------- Токены ---------- */ :root { /* Типографика Peak Design */ --sp-font-body: 'Manrope', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif; /* старые имена — тот же шрифт (одно семейство на весь сайт) */ --sp-font-display: var(--sp-font-body); --sp-font-cond: var(--sp-font-body); --sp-font-mono: var(--sp-font-body); /* Совместимость со старым кодом */ --sp-font: var(--sp-font-body); /* Палитра Peak Design */ --sp-ink: #1d1e20; /* цвет заголовков (не фон) */ --sp-ink-2: #36383c; /* тёмно-серый при наведении */ --sp-dark: #45474c; /* тёмные поверхности: шапка, подвал, основные кнопки, тёмный баннер (4.21: серый вместо чёрного) */ --sp-dark-2: #3a3c40; /* их наведение / подвал */ --sp-text: #222326; --sp-text-inverse: #fff; --sp-muted: #6b6b6b; --sp-muted-inverse: #b5b5b5; --sp-line: #e6e6e6; --sp-line-inverse: rgba(255, 255, 255, .14); --sp-surface: #fff; --sp-surface-2: #f4f4f4; --sp-accent: #95c132; /* зелёный логотипа */ --sp-accent-ink: #5e7d17; /* тот же зелёный для текста на белом (контраст 4.5:1) */ --sp-danger: #e5484d; --sp-focus: #95c132; /* Шкала размеров */ --sp-fs-xs: 12px; --sp-fs-s: 14px; --sp-fs-m: 16px; --sp-fs-l: 18px; --sp-fs-h4: 18px; --sp-fs-h3: clamp(17px, .3vw + 15px, 19px); /* h3, заголовок карточки — 600 */ --sp-fs-h2: clamp(24px, 1vw + 19px, 34px); /* заголовок секции — 700 */ --sp-fs-h1: clamp(28px, 1.6vw + 21px, 42px); /* h1 страницы — 700 */ --sp-fs-display: clamp(28px, 3vw + 18px, 54px); /* h1 первого экрана — 700 */ --sp-fs-card: clamp(20px, .5vw + 17px, 24px); /* крупный заголовок карточки — 700 */ --sp-lh: 1.6; --sp-lh-tight: 1.12; /* Трекинг Peak Design */ --sp-track-cond: 0; /* подписи — без разрядки */ --sp-track-tight: -0.02em; /* заголовки */ --sp-track-body: 0; /* body sans */ /* Spacing & shape */ --sp-space-1: 4px; --sp-space-2: 8px; --sp-space-3: 12px; --sp-space-4: 16px; --sp-space-5: 24px; --sp-space-6: 32px; --sp-space-7: 48px; --sp-space-8: 64px; --sp-space-9: 96px; /* Peak Design section gap 80–96px */ --sp-radius-s: 6px; /* поля ввода, миниатюры, плашки внутри карточек */ --sp-radius-m: 8px; /* Peak: cards 8 — все карточки сайта */ --sp-radius-l: 12px; /* крупные панели (CTA) */ --sp-radius-pill: 999px; /* Peak: badges 9999 */ /* Без теней — Peak Design намеренно избегает elevation */ --sp-shadow-1: none; --sp-shadow-2: none; --sp-container: 1200px; --sp-gutter: 16px; --sp-section-y: clamp(56px, 3.5vw + 36px, 88px); /* вертикальный ритм секций — один на весь сайт */ --sp-header-h: 64px; --sp-ease: .2s ease; } @media (min-width: 768px) { :root { --sp-gutter: 24px; } } /* ---------- Основа компонентов ---------- */ .sp-container { box-sizing: border-box; width: 100%; max-width: calc(var(--sp-container) + 2 * var(--sp-gutter)); margin: 0 auto; padding: 0 var(--sp-gutter); } .sp-section { padding: var(--sp-section-y) 0; } .sp-grid { display: grid; gap: var(--sp-space-5); grid-template-columns: 1fr; } @media (min-width: 768px) { .sp-grid--2 { grid-template-columns: repeat(2, 1fr); } .sp-grid--3, .sp-grid--4 { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1024px) { .sp-grid--3 { grid-template-columns: repeat(3, 1fr); } .sp-grid--4 { grid-template-columns: repeat(4, 1fr); } } .sp-h1, .sp-h2, .sp-h3 { font-family: var(--sp-font-body); font-weight: 700; font-style: normal; line-height: var(--sp-lh-tight); margin: 0 0 var(--sp-space-4); letter-spacing: var(--sp-track-tight); color: var(--sp-text); } .sp-h1 { font-size: var(--sp-fs-h1); } .sp-h2 { font-size: var(--sp-fs-h2); } .sp-h3 { font-family: var(--sp-font-body); font-style: normal; font-weight: 600; font-size: var(--sp-fs-h3); letter-spacing: -.005em; } .sp-lead { font-size: var(--sp-fs-l); line-height: var(--sp-lh); color: var(--sp-muted); } /* Eyebrow — надпись над заголовком секции: 600, без капса */ .sp-eyebrow { font-family: var(--sp-font-body); font-weight: 600; font-size: 14px; line-height: 1.4; letter-spacing: 0; text-transform: none; color: var(--sp-muted); margin: 0 0 var(--sp-space-2); } /* Кнопка — одна на весь сайт: .sp-btn и старые имена (.hero-btn, .btn, .sp-pill-btn, .contact-ext__btn, .callback-form__submit) выглядят одинаково — см. «Кнопки» в слое компонентов ниже */ .sp-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-space-2); box-sizing: border-box; min-height: 48px; padding: 10px 28px; border: 1px solid transparent; border-radius: var(--sp-radius-pill); font-family: var(--sp-font-body); font-weight: 600; font-size: 15px; line-height: 1.2; letter-spacing: 0; text-transform: none; text-decoration: none; text-align: center; white-space: nowrap; cursor: pointer; transition: background-color var(--sp-ease), color var(--sp-ease), border-color var(--sp-ease); } .sp-btn--light { background: #fff; color: var(--sp-ink); } .sp-btn--light:hover { background: #e9e9e9; } .sp-btn--outline { background: transparent; color: inherit; border-color: currentColor; } .sp-btn--outline:hover { background: rgba(127, 127, 127, .12); } .sp-btn--dark { background: var(--sp-dark); color: #fff; } .sp-btn--dark:hover { background: var(--sp-dark-2); } .sp-btn--block { display: flex; width: 100%; } .sp-card { background: var(--sp-surface); border: 1px solid var(--sp-line); border-radius: var(--sp-radius-m); } .sp-visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } :where(.sp-header, .sp-footer, .sp-btn, .sp-totop) :focus-visible, .sp-btn:focus-visible, .sp-totop:focus-visible { outline: 2px solid var(--sp-focus); outline-offset: 2px; } /* ---------- Иконки (SVG inline, currentColor) ---------- */ .sp-icon { width: 20px; height: 20px; flex: none; fill: currentColor; } /* ---------- Шапка ---------- */ .sp-header { position: sticky; top: 0; z-index: 1002; /* выше подложки меню (1000): иначе бургер и панель под ней */ background: var(--sp-dark); /* 4.21: серая шапка, как изначально (чёрная «траурная» — убрана) */ /* без backdrop-filter: он делает шапку контейнером для position:fixed — панель меню на телефоне сжималась до высоты шапки, а страница расползалась вширь; фон и так непрозрачный */ color: var(--sp-text-inverse); border-bottom: 1px solid rgba(255, 255, 255, .08); font-family: var(--sp-font); font-size: var(--sp-fs-s); line-height: 1.3; text-align: left; transition: background-color var(--sp-ease); } .sp-header.is-scrolled { background: var(--sp-dark); box-shadow: 0 2px 12px rgba(0, 0, 0, .12); } .sp-header a { color: inherit; text-decoration: none; } .sp-header ul { list-style: none; margin: 0; padding: 0; } .sp-header__inner { display: flex; align-items: center; gap: var(--sp-space-5); min-height: var(--sp-header-h); } .sp-header__logo { display: flex; align-items: center; flex: none; } .sp-header__logo img { display: block; width: 57px; height: 25px; } .sp-header__actions { display: flex; align-items: center; gap: var(--sp-space-3); margin-left: auto; flex: none; } .sp-iconbtn { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .08); color: inherit; cursor: pointer; transition: background-color var(--sp-ease), color var(--sp-ease); } .sp-iconbtn:hover { background: rgba(255, 255, 255, .18); } .sp-social { display: flex; gap: var(--sp-space-2); } /* меню (десктоп) */ .sp-nav__list { display: flex; align-items: center; gap: 2px; } .sp-nav__item { position: relative; display: flex; align-items: center; } .sp-nav__link { display: block; padding: 10px 10px; border-radius: var(--sp-radius-s); font-weight: 500; white-space: nowrap; transition: background-color var(--sp-ease); } .sp-nav__link:hover, .sp-nav__item:focus-within > .sp-nav__link { background: rgba(255, 255, 255, .1); } .sp-nav__toggle { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 32px; margin-left: -6px; padding: 0; border: 0; background: none; color: inherit; cursor: pointer; } .sp-nav__toggle::before { content: ""; width: 7px; height: 7px; margin-top: -4px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); transition: transform var(--sp-ease); } .sp-nav__sub { position: absolute; top: 100%; left: 0; z-index: 2; min-width: 260px; padding: var(--sp-space-2) 0; background: #fff; color: var(--sp-text); border-radius: var(--sp-radius-m); box-shadow: var(--sp-shadow-2); opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity var(--sp-ease), transform var(--sp-ease), visibility var(--sp-ease); } .sp-nav__sub::before { content: ""; position: absolute; left: 0; right: 0; top: -10px; height: 10px; } /* мостик для наведения */ .sp-nav__sub a { display: block; padding: 9px 18px; font-size: var(--sp-fs-s); line-height: 1.35; } .sp-nav__sub a:hover { background: var(--sp-surface-2); } .sp-nav__sub li:first-child a { font-weight: 600; } /* открытие: мышью — наведение, с клавиатуры и пальцем — кнопка-стрелка (.is-open; закрывают Esc и уход фокуса) */ .sp-nav__item--parent:hover > .sp-nav__sub, .sp-nav__item--parent.is-open > .sp-nav__sub { opacity: 1; visibility: visible; transform: none; } .sp-nav__item--parent.is-open > .sp-nav__toggle::before { transform: rotate(225deg); margin-top: 4px; } /* десктоп (≥1240): nav — горизонтальный бар внутри шапки */ @media (min-width: 1240px) { .sp-nav { position: static; transform: none; visibility: visible; display: flex; align-items: center; gap: var(--sp-space-5); flex: 1 1 auto; min-width: 0; background: transparent; color: var(--sp-text-inverse); width: auto; padding: 0; overflow: visible; } .sp-nav__list { flex-direction: row; align-items: center; gap: 2px; flex-wrap: nowrap; } .sp-nav__contacts { display: flex; flex-direction: row; align-items: center; gap: var(--sp-space-4); margin-left: auto; padding: 0; font-size: var(--sp-fs-s); flex: none; } /* в строке меню — только телефон и кнопку калькулятора: e-mail, Telegram и соцсети не помещались (блок contacts разрастался до 830+ px и выталкивал страницу), они остаются в выезжающей панели и подвале */ .sp-nav__contacts > a[href^="mailto:"], .sp-nav__contacts > a[href*="t.me"], .sp-nav__contacts .sp-social { display: none; } .sp-nav__contacts > a[href^="tel:"] ~ a[href^="tel:"] { display: none; } /* второй телефон — в панели и подвале */ .sp-header__inner { max-width: none; } /* бар меню на всю ширину окна */ .sp-nav__link { padding-inline: 7px; } .sp-nav__contacts a { display: inline-flex; align-items: center; gap: 4px; } .sp-nav__contacts a[href^="tel:"] { font-weight: 600; } .sp-nav__contacts small { color: var(--sp-muted-inverse); font-size: var(--sp-fs-xs); } .sp-nav__toggle { display: none; } .sp-burger, .sp-header__calc, .sp-header__tel { display: none; } /* на десктопе дубли из .sp-header__actions не нужны — контакты есть в .sp-nav__contacts */ .sp-header__actions .sp-social, .sp-header__actions .sp-header__tel, .sp-header__actions .sp-header__calc { display: none; } .sp-nav__item--parent:hover > .sp-nav__sub, .sp-nav__item--parent.is-open > .sp-nav__sub { opacity: 1; visibility: visible; transform: none; } .sp-nav__sub { color: var(--sp-text); background: #fff; } .sp-nav__sub a:hover { background: var(--sp-surface-2); } /* кнопка «Рассчитать стоимость» не помещается в бар 1240–1399 — включается с 1400 */ .sp-nav__contacts .sp-btn { display: none; margin-top: 0; padding: 9px 18px; font-size: var(--sp-fs-s); } } @media (min-width: 1400px) { .sp-nav__contacts .sp-btn { display: inline-flex; } } /* Контакты скрыты только до 1240 — выше их показывает десктопный @media */ @media (max-width: 1239.98px) { .sp-nav__contacts { display: none; } } .sp-burger, .sp-header__calc, .sp-header__tel { display: none; } .sp-backdrop { position: fixed; inset: 0; z-index: 1000; background: rgba(0, 0, 0, .5); } .sp-backdrop[hidden] { display: none; } /* мобильное меню — одно на все ширины до 1240 (семь пунктов меню на одной строке помещаются только с 1240): та же разметка, выезжающая панель */ @media (max-width: 1239.98px) { .sp-header__inner { gap: var(--sp-space-3); min-height: 56px; } .sp-burger, .sp-header__calc, .sp-header__tel { display: inline-flex; } .sp-burger span, .sp-burger span::before, .sp-burger span::after { display: block; width: 18px; height: 2px; background: currentColor; border-radius: 2px; transition: transform var(--sp-ease), opacity var(--sp-ease); } .sp-burger span { position: relative; } .sp-burger span::before, .sp-burger span::after { content: ""; position: absolute; left: 0; } .sp-burger span::before { top: -6px; } .sp-burger span::after { top: 6px; } .sp-menu-open .sp-burger span { background: transparent; } .sp-menu-open .sp-burger span::before { transform: translateY(6px) rotate(45deg); } .sp-menu-open .sp-burger span::after { transform: translateY(-6px) rotate(-45deg); } .sp-menu-open .sp-burger { position: relative; z-index: 1002; } .sp-nav { position: fixed; top: 0; right: 0; bottom: 0; z-index: 1001; display: none; /* закрытое меню не участвует в раскладке: заэкранная позиция (fixed + transform наружу) расширяла scrollWidth — на телефонах появлялась горизонтальная прокрутка; анимация открытия — keyframes */ flex-direction: column; width: min(360px, 88vw); padding: 64px 0 var(--sp-space-5); overflow-y: auto; overscroll-behavior: contain; background: var(--sp-dark); color: var(--sp-text-inverse); } .sp-menu-open .sp-nav { display: flex; animation: sp-drawer-in .3s ease both; } @keyframes sp-drawer-in { from { transform: translateX(100%); } to { transform: none; } } .sp-nav__list { flex-direction: column; align-items: stretch; gap: 0; } .sp-nav__item { flex-wrap: wrap; border-bottom: 1px solid var(--sp-line-inverse); } .sp-nav__link { flex: 1; padding: 14px var(--sp-space-5); font-size: var(--sp-fs-l); border-radius: 0; white-space: normal; } .sp-nav__link:hover, .sp-nav__item:focus-within > .sp-nav__link { background: none; } .sp-nav__toggle { width: 56px; height: 52px; margin: 0; } .sp-nav__sub { position: static; display: none; flex-basis: 100%; min-width: 0; padding: 0 0 var(--sp-space-3); background: none; color: inherit; border-radius: 0; box-shadow: none; opacity: 1; visibility: visible; transform: none; } .sp-nav__sub::before { display: none; } .sp-nav__sub a { padding: 9px var(--sp-space-5) 9px 40px; color: var(--sp-muted-inverse); font-size: var(--sp-fs-m); } .sp-nav__sub a:hover { background: none; color: #fff; } .sp-nav__item--parent:hover > .sp-nav__sub { display: none; } .sp-nav__item--parent.is-open > .sp-nav__sub { display: block; } .sp-nav__contacts { display: flex; flex-direction: column; gap: var(--sp-space-3); margin-top: auto; padding: var(--sp-space-5) var(--sp-space-5) 0; font-size: var(--sp-fs-m); } .sp-nav__contacts .sp-btn { margin-top: var(--sp-space-2); } .sp-nav__contacts small { color: var(--sp-muted-inverse); font-size: var(--sp-fs-s); } html.sp-menu-open { overflow: hidden; } } @media (max-width: 575.98px) { .sp-header .sp-social { display: none; } } /* ---------- Подвал ---------- */ .sp-footer { margin-top: 0; padding: var(--sp-space-8) 0 var(--sp-space-6); /* отступ до подвала даёт последняя секция страницы */ background: var(--sp-dark-2); color: #c9cbcf; font-family: var(--sp-font); font-size: var(--sp-fs-s); line-height: 1.55; text-align: left; } .sp-footer a { color: #fff; text-decoration: none; } .sp-footer a:hover { color: var(--sp-accent); } .sp-footer ul { list-style: none; margin: 0; padding: 0; } .sp-footer__inner { display: grid; gap: var(--sp-space-6); grid-template-columns: 1fr; } .sp-footer__logo img { display: block; width: 80px; height: 35px; } .sp-footer__credits { margin: var(--sp-space-4) 0 0; max-width: 340px; } .sp-footer__title { margin: 0 0 var(--sp-space-3); color: #fff; font-family: var(--sp-font-body); font-size: var(--sp-fs-s); font-weight: 700; letter-spacing: 0; text-transform: none; } .sp-footer__nav li + li { margin-top: var(--sp-space-2); } .sp-footer__contacts { display: flex; flex-direction: column; gap: var(--sp-space-2); } .sp-footer__tel { font-size: var(--sp-fs-l); font-weight: 600; } .sp-footer__contacts .sp-social { margin-top: var(--sp-space-2); } .sp-footer__bottom { margin-top: var(--sp-space-6); padding-top: var(--sp-space-4); border-top: 1px solid var(--sp-line-inverse); font-size: var(--sp-fs-xs); } @media (min-width: 768px) { .sp-footer__inner { grid-template-columns: 1.3fr 1fr 1fr; } } /* кнопка «наверх» */ .sp-totop { position: fixed; right: 20px; bottom: 20px; z-index: 990; display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; padding: 0; border: 0; border-radius: 50%; background: var(--sp-dark); color: #fff; box-shadow: 0 4px 14px rgba(0, 0, 0, .18); cursor: pointer; } .sp-totop[hidden] { display: none; } .sp-totop::before { content: ""; width: 10px; height: 10px; margin-top: 4px; border-left: 2px solid currentColor; border-top: 2px solid currentColor; transform: rotate(45deg); } @media (prefers-reduced-motion: reduce) { .sp-header, .sp-nav, .sp-nav__sub, .sp-btn, .sp-burger span, .sp-burger span::before, .sp-burger span::after { transition: none !important; } } /* ---------- Страницы (4.11): оболочка шаблонов 1, 12, 15, 22 ---------- */ /* старые имена шкал страниц — те же значения, что у шкалы дизайн-системы (4.17: одна шкала) */ :root { --sp-fs-page-h1: var(--sp-fs-h1); --sp-fs-page-h2: var(--sp-fs-h2); } /* ссылка «к содержимому» для клавиатуры и скринридеров — видна только в фокусе */ .sp-skip { position: absolute; left: 8px; top: -64px; z-index: 1100; padding: 10px 16px; background: #fff; color: var(--sp-ink); font: 600 var(--sp-fs-m)/1.2 var(--sp-font); text-decoration: none; border-radius: var(--sp-radius-s); box-shadow: var(--sp-shadow-2); transition: top .15s; } .sp-skip:focus { top: 8px; } /* подвал прижат к низу на коротких страницах (вместо старого min-height у .container) */ body { display: flex; flex-direction: column; min-height: 100vh; } .sp-main { flex: 1 0 auto; outline: none; } .sp-main > .container { min-height: 0; } /* отступ до подвала: у секций он свой (--sp-section-y), старому контенту в .container — тот же */ .sp-main > :last-child:not(section) { margin-bottom: var(--sp-section-y); } /* отступ до подвала: у секций он свой (--sp-section-y), старому контенту — тот же */ /* хлебные крошки */ .sp-breadcrumbs { margin: var(--sp-space-5) 0 var(--sp-space-4); font: 400 var(--sp-fs-s)/1.4 var(--sp-font); color: var(--sp-muted); } .sp-breadcrumbs #breadcrumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 0; } .sp-breadcrumbs a { color: var(--sp-text); text-decoration: none; } .sp-breadcrumbs a:hover { color: var(--sp-accent-ink); text-decoration: underline; } .sp-breadcrumbs__sep { display: inline-block; width: 6px; height: 6px; margin: 0 10px 1px 8px; border-right: 1.5px solid currentColor; border-top: 1.5px solid currentColor; transform: rotate(45deg); opacity: .6; } /* ---------- Медиа не шире контейнера ---------- */ /* только max-width: height:auto перебивал высоту иконок, заданную в style2.css */ .container img, .seo-text img { max-width: 100%; } .container iframe, .container video { max-width: 100%; } /* ---------- 576–1239: резиновая ширина (до 576 работает старая мобильная вёрстка responsive-styles.css) ---------- */ @media (min-width: 576px) and (max-width: 1239.98px) { body { min-width: 0 !important; width: auto !important; } .container { box-sizing: border-box; width: auto; max-width: 1200px; padding-left: var(--sp-gutter, 16px); padding-right: var(--sp-gutter, 16px); } #con, .top, .j_types, .j_types2, .uhm, .lamp_table, #linelist, .linelist ul, #linelist ul, .overlay_menu, .overlay_line, #menu { box-sizing: border-box; width: auto !important; max-width: 100%; } .cont-w1300 { width: auto; left: 0; } .main-carousel { min-width: 0; } .kalph2 { width: auto; max-width: 895px; } .modal-box__container { width: auto; max-width: 1000px; margin-left: var(--sp-gutter, 16px); margin-right: var(--sp-gutter, 16px); } .contacts-map { min-width: 0; } .container table { max-width: 100%; } } /* шаблон 24 (доски, зеркала в раме): галерея 620 px + таблица 420 px в одну строку — ниже 1240 галерея сжимается, ниже 1024 — колонкой, как на мобильном */ @media (min-width: 576px) and (max-width: 1239.98px) { .marker-board-info { gap: var(--sp-space-5, 24px); } .marker-board-info__gallery { flex: 1 1 auto; min-width: 0; } .marker-board-info__info-table { width: 380px; flex: 0 0 380px; } .product-promo-teasers { min-width: 0; } .product-promo-teasers__big-image { width: auto; flex: 1 1 auto; min-width: 0; } .product-promo-teasers__big-image img { max-width: 100%; } } @media (min-width: 576px) and (max-width: 1023.98px) { .marker-board-info { flex-direction: column; } .marker-board-info__gallery, .marker-board-info__info-table { width: auto; flex: 0 0 auto; } } /* «Оплата и доставка»: карточки .dosopl2 — на телефоне width:100% + поля и рамка шире экрана (content-box); на планшете три колонки по 29% слишком узкие — две */ @media (max-width: 575.98px) { .dosopl2 > div { box-sizing: border-box; } } @media (min-width: 576px) and (max-width: 1023.98px) { .dosopl2 > div { box-sizing: border-box; width: calc(50% - 8px); } } /* калькулятор на странице (.cl2): три колонки по 350 px — на планшете по две в ряд вместо одной узкой */ @media (min-width: 576px) and (max-width: 1023.98px) { .cl2 .calculator__column { width: calc(50% - 12px); } } /* «Световые вывески»: карточки .glass-types__item фиксированной высоты 175 px — уже 1240 текст в них не влезал и наезжал на следующую карточку; высота по содержимому, flow-root держит плавающую картинку */ @media (min-width: 576px) and (max-width: 1239.98px) { .glass-types__item { height: auto; min-height: 175px; display: flow-root; } } /* ==== Former tiny-slider.css (Tiny Slider library styles) - _rebuild 4.12 ==== */ .tns-outer {padding:0 !important}.tns-outer [hidden] {display:none !important}.tns-outer [aria-controls],.tns-outer [data-action] {cursor:pointer}.tns-slider {-webkit-transition:all 0s;-moz-transition:all 0s;transition:all 0s}.tns-slider>.tns-item {-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.tns-horizontal.tns-subpixel {white-space:nowrap}.tns-horizontal.tns-subpixel>.tns-item {display:inline-block;vertical-align:top;white-space:normal}.tns-horizontal.tns-no-subpixel:after {content:'';display:table;clear:both}.tns-horizontal.tns-no-subpixel>.tns-item {float:left}.tns-horizontal.tns-carousel.tns-no-subpixel>.tns-item {margin-right:-100%}.tns-no-calc {position:relative;left:0}.tns-gallery {position:relative;left:0;min-height:1px}.tns-gallery>.tns-item {position:absolute;left:-100%;-webkit-transition:transform 0s, opacity 0s;-moz-transition:transform 0s, opacity 0s;transition:transform 0s, opacity 0s}.tns-gallery>.tns-slide-active {position:relative;left:auto !important}.tns-gallery>.tns-moving {-webkit-transition:all 0.25s;-moz-transition:all 0.25s;transition:all 0.25s}.tns-autowidth {display:inline-block}.tns-lazy-img {-webkit-transition:opacity 0.6s;-moz-transition:opacity 0.6s;transition:opacity 0.6s;opacity:0.6}.tns-lazy-img.tns-complete {opacity:1}.tns-ah {-webkit-transition:height 0s;-moz-transition:height 0s;transition:height 0s}.tns-ovh {overflow:hidden}.tns-visually-hidden {position:absolute;left:-10000em}.tns-transparent {opacity:0;visibility:hidden}.tns-fadeIn {opacity:1;filter:alpha(opacity=100);z-index:0}.tns-normal,.tns-fadeOut {opacity:0;filter:alpha(opacity=0);z-index:-1}.tns-vpfix {white-space:nowrap}.tns-vpfix>div,.tns-vpfix>li {display:inline-block}.tns-t-subp2 {margin:0 auto;width:310px;position:relative;height:10px;overflow:hidden}.tns-t-ct {width:2333.3333333%;width:-webkit-calc(100% * 70 / 3);width:-moz-calc(100% * 70 / 3);width:calc(100% * 70 / 3);position:absolute;right:0}.tns-t-ct:after {content:'';display:table;clear:both}.tns-t-ct>div {width:1.4285714%;width:-webkit-calc(100% / 70);width:-moz-calc(100% / 70);width:calc(100% / 70);height:10px;float:left} /* ---------- Заголовки ---------- */ h1, h2, h3, .sp-h1, .sp-h2, .sp-h3, .h1, .kal3 { text-wrap: balance; } /* без «висячих» коротких слов во второй строке */ /* h1 страницы */ .sp-page h1:not(.dosopl2 h1), .sp-page .kal4 { font-family: var(--sp-font-body); font-style: normal; font-weight: 700; font-size: var(--sp-fs-h1); line-height: var(--sp-lh-tight); letter-spacing: var(--sp-track-tight); color: var(--sp-ink); text-transform: none; margin: 0 0 var(--sp-space-4); } .sp-page .page-header__subtitle { font-family: var(--sp-font); font-size: var(--sp-fs-l); font-weight: 400; color: var(--sp-muted); } /* h2 — заголовок секции */ .sp-h2, .sp-section-title, .kal3, .sp-page h2.h1, .sp-page div.h1:not(.dosopl2 .h1), .sp-page .sp-content > h2, .seo-text__inner h2, .seo-faq__title { font-family: var(--sp-font-body); font-style: normal; font-weight: 700; font-size: var(--sp-fs-h2); line-height: 1.2; letter-spacing: var(--sp-track-tight); color: var(--sp-ink); text-transform: none; margin: 0 0 var(--sp-space-5); } /* по центру + короткая черта под заголовком — у заголовков секций */ .sp-section-title, .kal3, .seo-faq__title { text-align: center; } .sp-section-header .sp-h2::after, .sp-section-title::after, .kal3::after, .seo-faq__title::after { content: none; } .kal3 { margin-top: var(--sp-space-7) !important; margin-bottom: var(--sp-space-6) !important; } /* !important — так задано в style2.css */ .kal3 span { padding: 0; background: none; color: inherit; } /* наследие: белая «плашка» поверх линии */ /* заголовок в колонке/прозе — без черты, по левому краю */ .seo-text__inner h2, .sp-page .sp-content > h2:not(.kal3) { text-align: left; } /* h3 / h4 — 600, выравнивание — от блока */ .sp-h3, .sp-content :is(h3, h4), .seo-text__inner h3 { font-family: var(--sp-font-body); font-style: normal; font-weight: 600; font-size: var(--sp-fs-h3); line-height: 1.3; letter-spacing: -.01em; color: var(--sp-ink); text-align: inherit; margin: 0 0 var(--sp-space-2); } /* подписи — 600, обычный регистр */ .contact-block strong { font-family: var(--sp-font-body); font-weight: 600; font-size: var(--sp-fs-s); line-height: 1.4; letter-spacing: 0; text-transform: none; } .contact-block strong { font-size: 13px; font-weight: 500; } /* ---------- Текст ---------- */ /* старое правило style2.css «.container div p, .container div ul» (14px/20px, по левому краю, маркеры внутри) попадало в новые секции — у них .container; здесь — сброс */ .sp-lead { font-size: var(--sp-fs-l); line-height: var(--sp-lh); color: var(--sp-muted); } /* списки с маркером — один вид (точка) у карточек услуг, преимуществ, доставки */ .sp-tick-list { list-style: none; margin: var(--sp-space-3) 0 0; padding: 0; } .sp-tick-list li { position: relative; margin: 0; padding: 3px 0 3px 18px; font-size: var(--sp-fs-s); line-height: 1.55; color: var(--sp-text); text-align: left; } .sp-tick-list li::before { content: ""; position: absolute; left: 2px; top: calc(3px + .775em - 3px); width: 6px; height: 6px; border-radius: 50%; background: var(--sp-ink); } .sp-tick-list li::after { content: none; } /* ---------- Кнопки: одна кнопка ---------- */ .contact-ext__btn, .callback-form__submit { display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-space-2); box-sizing: border-box; min-height: 48px; padding: 10px 28px; border: 1px solid var(--sp-dark); border-radius: var(--sp-radius-pill); background: var(--sp-dark); color: #fff; font-family: var(--sp-font-body); font-weight: 600; font-size: 15px; line-height: 1.2; letter-spacing: 0; text-transform: none; text-decoration: none; text-align: center; white-space: nowrap; cursor: pointer; opacity: 1; transform: none; transition: background-color var(--sp-ease), color var(--sp-ease), border-color var(--sp-ease); } .contact-ext__btn:hover, .callback-form__submit:hover { background: var(--sp-dark-2); border-color: var(--sp-dark-2); color: #fff; opacity: 1; transform: none; } .contact-ext__btn { color: #fff !important; } /* было !important в 4.15 — ссылки в контенте красит style2.css */ .sp-hero__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-space-3); margin-top: var(--sp-space-6); } @media (max-width: 575.98px) { .sp-hero__actions > * { flex: 1 1 100%; } } /* ---------- Секции ---------- */ .sp-process, .sp-advantages, .sp-pricing, .sp-faq, .sp-clients, .sp-cta, .sp-hero { padding: var(--sp-section-y) 0; } /* шапка секции: eyebrow + h2 + lead */ .sp-section-header { max-width: 760px; margin: 0 auto var(--sp-space-7); text-align: center; } .sp-section-header .sp-eyebrow { color: var(--sp-accent-ink); } .sp-section-header .sp-h2 { margin-bottom: 0; } .sp-section-header--plain .sp-h2::after { display: none; } .sp-section-header .sp-lead { max-width: 620px; margin: var(--sp-space-5) auto 0; font-size: var(--sp-fs-l); text-align: center; } .sp-section-title { margin-bottom: var(--sp-space-7); } /* ---------- Первый экран ---------- */ .sp-hero .sp-container { max-width: calc(820px + 2 * var(--sp-gutter)); } .sp-hero { background: var(--sp-dark); color: var(--sp-text-inverse); text-align: center; } .sp-hero .sp-eyebrow { color: rgba(255, 255, 255, .7); } .sp-hero .sp-h1 { color: var(--sp-text-inverse); font-size: var(--sp-fs-display); margin: var(--sp-space-3) 0 var(--sp-space-4); } .sp-hero .sp-hero__lead { color: rgba(255, 255, 255, .85); max-width: 640px; margin: 0 auto; } .sp-hero--light { background: var(--sp-surface); color: var(--sp-text); } .sp-hero--light .sp-h1 { color: var(--sp-text); } .sp-hero--light :is(.sp-hero__lead, .sp-eyebrow) { color: var(--sp-muted); } /* ---------- Карточки: одна карточка ---------- */ .sp-advantages__card, .sp-process__step, .sp-pricing__tile, .contact-ext, .dosopl-col, .sp-page .dosopl2 > div, .priem-tovara-block, .sp-faq__item, .seo-faq__item { background: var(--sp-surface); border: 1px solid var(--sp-line); border-radius: var(--sp-radius-m); transition: border-color var(--sp-ease); } /* услуги и преимущества — текст по левому краю */ .sp-advantages__card { padding: var(--sp-space-6); text-align: left; } .sp-advantages__card .sp-h3 { margin-bottom: var(--sp-space-2); text-align: left; } .sp-advantages__card p { font-size: var(--sp-fs-s); line-height: 1.6; margin: 0; } .sp-advantages__grid { display: grid; gap: var(--sp-space-5); grid-template-columns: 1fr; } @media (min-width: 768px) { .sp-advantages__grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1024px) { .sp-advantages__grid { grid-template-columns: repeat(3, 1fr); } } /* процесс «Замеряем → Производим → …»: sp_process_steps (.sp-process + .sp-process__grid) и старый .j_types6 */ .sp-process__grid { display: grid; gap: var(--sp-space-4); grid-template-columns: repeat(2, 1fr); margin: 0; } @media (min-width: 768px) { .sp-process__grid { grid-template-columns: repeat(5, 1fr); } } /* 3+2 давало «сироту» */ .sp-process__step { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: var(--sp-space-3); padding: var(--sp-space-5) var(--sp-space-3); text-align: center; } .sp-process__step img { display: block; width: 56px; height: 56px; margin: 0 auto; object-fit: contain; } .sp-process__step .material-symbols-outlined { font-size: 36px; font-weight: 300; color: var(--sp-ink); } .sp-process__step p { margin: 0; font-size: var(--sp-fs-s); font-weight: 600; line-height: 1.4; color: var(--sp-text); text-align: center; } /* ---------- Цены — 700, цифры одной ширины (tabular-nums), цвет текста ---------- */ .sp-pricing__price, .sp-page .dosopl2 .markers span:last-child { font-family: var(--sp-font-body); font-weight: 700; color: var(--sp-ink); white-space: nowrap; letter-spacing: -.01em; font-variant-numeric: tabular-nums; } .sp-pricing__name { display: block; margin-bottom: var(--sp-space-2); font-size: var(--sp-fs-s); font-weight: 600; color: var(--sp-text); } .sp-pricing__grid { display: grid; gap: var(--sp-space-4); grid-template-columns: 1fr; } @media (min-width: 768px) { .sp-pricing__grid { grid-template-columns: repeat(2, 1fr); } } .sp-pricing__tile { display: flex; flex-direction: column; align-items: flex-start; gap: 0; padding: var(--sp-space-5); text-align: left; } .sp-pricing__price { font-size: 22px; } /* ---------- CTA с формой заявки (чанк sp_order_cta) ---------- */ .sp-cta { padding-left: var(--sp-gutter); padding-right: var(--sp-gutter); } .sp-cta__inner { max-width: 760px; margin: 0 auto; padding: var(--sp-space-8) var(--sp-space-6); text-align: center; background: var(--sp-surface-2); border-radius: var(--sp-radius-l); } .sp-cta__title { margin: 0 0 var(--sp-space-4); } .sp-cta__title::after { display: none; } .sp-cta__lead { max-width: 560px; margin: 0 auto var(--sp-space-6); color: var(--sp-muted); } @media (max-width: 575.98px) { .sp-cta__inner { padding: var(--sp-space-7) var(--sp-space-5); } } /* ---------- Форма заявки (tpl.callback): светлая по умолчанию, на тёмном фоне — тёмная ---------- */ .callback-form { max-width: 640px; margin: 0 auto; text-align: left; } .callback-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--sp-space-3); } .callback-form__field { display: block; margin: 0 0 var(--sp-space-4); } .callback-form__field span { display: block; margin-bottom: 6px; color: var(--sp-muted); font: 600 13px/1.4 var(--sp-font-body); letter-spacing: 0; text-transform: none; } .callback-form input { box-sizing: border-box; width: 100%; min-height: 48px; margin: 0; padding: 12px 14px; border: 1px solid #d4d4d4; border-radius: var(--sp-radius-s); background: var(--sp-surface); color: var(--sp-text); font: 400 var(--sp-fs-m)/1.3 var(--sp-font-body); transition: border-color var(--sp-ease); } .callback-form input::placeholder { color: #9a9a9a; } .callback-form input:focus { border-color: var(--sp-ink); outline: none; box-shadow: 0 0 0 3px rgba(149, 193, 50, .35); } .callback-form input:is(.is-invalid, .error) { border-color: var(--sp-danger); } .callback-form__submit { width: 100%; margin-top: var(--sp-space-2); } .callback-form__note { margin: var(--sp-space-3) 0 0; font-size: var(--sp-fs-xs); line-height: 1.5; color: var(--sp-muted); text-align: center; } .callback-form__note a { color: inherit; text-decoration: underline; text-underline-offset: 2px; } @media (max-width: 575.98px) { .callback-form__row { grid-template-columns: 1fr; } } /* ---------- Клиенты ---------- */ .sp-clients { overflow: hidden; } /* ---------- Вопросы и ответы: .sp-faq (чанки) и .seo-faq (TV seoFaq) — один вид ---------- */ .sp-faq__list, .seo-faq__inner { max-width: calc(820px + 2 * var(--sp-gutter)); margin: 0 auto; } .sp-faq__list { display: flex; flex-direction: column; gap: var(--sp-space-2); } .seo-faq__item + .seo-faq__item { margin-top: var(--sp-space-2); } .sp-faq__item, .seo-faq__item { padding: 0; } .sp-faq__item[open], .seo-faq__item[open] { border-color: var(--sp-ink); } .sp-faq__item summary, .seo-faq__item summary { position: relative; display: flex; align-items: center; justify-content: space-between; gap: var(--sp-space-4); padding: 18px var(--sp-space-5); cursor: pointer; list-style: none; font: 600 var(--sp-fs-m)/1.4 var(--sp-font-body); letter-spacing: 0; color: var(--sp-ink); } .sp-faq__item summary::-webkit-details-marker, .seo-faq__item summary::-webkit-details-marker { display: none; } .sp-faq__item summary::after, .seo-faq__item summary::after, .seo-faq__item summary:after { content: "+"; position: static; flex: none; font: 300 24px/1 var(--sp-font-body); color: var(--sp-muted); } .sp-faq__item[open] summary::after, .seo-faq__item[open] summary::after { content: "\2212"; } .sp-faq__item summary:focus-visible, .seo-faq__item summary:focus-visible { outline: 2px solid var(--sp-focus); outline-offset: -2px; border-radius: var(--sp-radius-m); } .sp-faq__body, .seo-faq__item > p, .seo-faq__item > div { margin: 0; padding: 0 var(--sp-space-5) 18px; color: var(--sp-muted); font-size: 15px; line-height: 1.65; } .sp-faq__body p { margin: 0; } /* ---------- SEO-текст и FAQ под контентом страницы (полноширинные секции) ---------- */ .seo-text, .seo-faq { clear: both; background: var(--sp-surface); color: var(--sp-text); font-family: var(--sp-font); padding: var(--sp-section-y) var(--sp-gutter); } .seo-text__inner { max-width: 820px; margin: 0 auto; font-size: var(--sp-fs-m); line-height: 1.7; text-align: left; } .seo-text__inner h3 { margin-top: var(--sp-space-6); } .seo-text__inner p { margin: 0 0 var(--sp-space-4); } .seo-text__inner :is(ul, ol) { margin: 0 0 var(--sp-space-4); padding-left: 22px; } .seo-text__inner a { color: var(--sp-ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--sp-accent); } .seo-faq__inner { padding: 0; } .seo-faq__title { margin-bottom: var(--sp-space-7); } /* ---------- Старые страницы: «Контакты» ---------- */ .sp-page .contacts-wrap { display: block; margin-top: var(--sp-space-6); } .sp-page .contacts-wrap > :is(h1, .page-header__title) { margin: 0 0 var(--sp-space-6); } .contacts-grid { display: grid; gap: var(--sp-space-6); grid-template-columns: 1fr; align-items: start; margin-top: var(--sp-space-5); } @media (min-width: 900px) { .contacts-grid { grid-template-columns: 1fr 1fr; gap: var(--sp-space-7); } } .sp-page .innercontact, .sp-page .contacts-map { width: auto; min-width: 0; } .contact-block { padding: var(--sp-space-4) 0; border-bottom: 1px solid var(--sp-line); } .contact-block:first-child { padding-top: 0; } .contact-block:last-of-type { border-bottom: 0; } .contact-block strong { display: block; margin-bottom: 4px; color: var(--sp-muted); } .contact-block div { font-size: var(--sp-fs-m); line-height: 1.5; } .contact-block a { color: var(--sp-text); text-decoration: none; } .contact-block a:hover { color: var(--sp-accent-ink); } .sp-page .upc { margin: var(--sp-space-5) 0 0; padding: var(--sp-space-4) var(--sp-space-5); background: var(--sp-surface-2); border-radius: var(--sp-radius-m); font-size: var(--sp-fs-s); line-height: 1.55; color: var(--sp-text); } .contact-ext { margin: 0; padding: var(--sp-space-6); text-align: left; } /* style2.css давал margin:24px 0 — лишняя дыра над карточкой */ .contact-ext p { margin: 0 0 var(--sp-space-4); font-size: var(--sp-fs-m); line-height: 1.55; color: var(--sp-text); } .contacts-map .contact-ext + .contact-ext { margin-top: var(--sp-space-4); } .contacts-map iframe { display: block; margin-top: var(--sp-space-3); } .lc2 { display: flex; gap: var(--sp-space-2); padding-top: var(--sp-space-3); } .lc2 a, .sp-socials__link { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; background: var(--sp-surface-2); color: var(--sp-text); text-decoration: none; transition: background-color var(--sp-ease), color var(--sp-ease); } .lc2 a:hover, .sp-socials__link:hover { background: var(--sp-dark); color: #fff; } .lc2 a svg, .sp-socials__link svg { width: 20px; height: 20px; fill: currentColor; } .sp-socials { display: flex; flex-wrap: wrap; gap: var(--sp-space-2); margin-top: var(--sp-space-4); } /* ---------- Старые страницы: «Оплата и доставка» ---------- */ /* три колонки-карточки; наследие .dosopl2 > div {width:29%; border:solid black} вытеснено */ .dosopl2, .sp-page .dosopl2 { display: grid; grid-template-columns: 1fr; gap: var(--sp-space-5); margin-top: var(--sp-space-6); font-family: var(--sp-font); color: var(--sp-text); } @media (min-width: 1024px) { .dosopl2, .sp-page .dosopl2 { grid-template-columns: repeat(3, 1fr); } } .dosopl-col, .sp-page .dosopl2 > div { display: flex; flex-direction: column; box-sizing: border-box; width: auto; min-width: 0; margin: 0; padding: var(--sp-space-6); } /* заголовок карточки — 700, подзаголовок — Noto Sans 600: раньше оба были одного размера и иерархии не было */ .sp-page .dosopl2 h1, .dosopl2 h1 { margin: 0 0 var(--sp-space-2); padding: 0; font-family: var(--sp-font-body); font-style: normal; font-weight: 700; font-size: var(--sp-fs-card); line-height: 1.2; letter-spacing: var(--sp-track-tight); text-transform: none; color: var(--sp-ink); } .sp-page .dosopl2 .h1, .dosopl2 .h1 { margin: var(--sp-space-5) 0 var(--sp-space-2); padding: 0; font: 600 var(--sp-fs-m)/1.35 var(--sp-font-body); letter-spacing: 0; text-transform: none; color: var(--sp-ink); } .sp-page .dosopl2 h1 + .h1 { margin-top: var(--sp-space-3); } .dosopl2 .other { font-size: var(--sp-fs-s); line-height: 1.55; color: var(--sp-text); } .dosopl2 strong { padding-left: 0; font-weight: 600; } .sp-page .markers, .dosopl2 .markers { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-space-3); margin: var(--sp-space-2) 0 0; padding: 12px 16px; line-height: 1.4; background: var(--sp-surface-2); border: 0; border-radius: var(--sp-radius-s); } .dosopl2 .markers span:first-child { min-width: 0; font-size: var(--sp-fs-s); font-weight: 600; } .sp-page .dosopl2 .markers span:last-child { font-size: var(--sp-fs-s); } .dosopl2 .delivery_list3 { margin: var(--sp-space-3) 0 0; padding-left: 20px; list-style-position: outside; } .dosopl2 .delivery_list3 li { margin-bottom: 2px; font-size: var(--sp-fs-s); line-height: 1.55; } .priem-tovara-block { margin-top: var(--sp-space-6); padding: var(--sp-space-6); } .priem-tovara-block p { margin: 0; } /* ---------- Адаптив слоя ---------- */ /* две колонки и нечётное число карточек — последняя на всю ширину, без пустой ячейки */ @media (max-width: 767.98px) { .sp-advantages__card, .contact-ext, .dosopl-col, .sp-page .dosopl2 > div, .priem-tovara-block { padding: var(--sp-space-5); } } @media (max-width: 575.98px) { .sp-section-header, .sp-section-title { margin-bottom: var(--sp-space-6); } } @media (prefers-reduced-motion: reduce) { .sp-skip { transition: none !important; } } /* ==================================================================== 4.20 Блоки страниц на чанках (sp_page_hero, sp_section_header, sp_card_*, sp_specs, sp_clients, sp_designer_cta, sp_cta_banner, sp_order_cta, sp_process_steps, сниппет spGallery). Разметка блоков — только классы .sp-* (без #stand-prime-root и старых .container/.section), поэтому правила здесь простые и не воюют со style2.css. ==================================================================== */ /* секции: один ритм; две секции одного фона подряд — без двойного отступа */ .sp-section { padding: var(--sp-section-y) 0; } .sp-section--alt { background: var(--sp-surface-2); } .sp-section--tight { padding: var(--sp-space-7) 0; } .sp-section > .sp-container > :last-child { margin-bottom: 0; } /* заголовок секции */ .sp-section-header { max-width: 760px; margin: 0 auto var(--sp-space-7); text-align: center; } .sp-section-header--left { margin-left: 0; text-align: left; } .sp-section-header__title { margin: 0; font: 700 var(--sp-fs-h2)/1.2 var(--sp-font-body); letter-spacing: var(--sp-track-tight); color: var(--sp-ink); text-wrap: balance; } .sp-section-header__lead { max-width: 620px; margin: var(--sp-space-4) auto 0; font-size: var(--sp-fs-l); line-height: 1.6; color: var(--sp-muted); } .sp-section-header--left .sp-section-header__lead { margin-left: 0; } .sp-section-header .sp-eyebrow { margin-bottom: var(--sp-space-2); color: var(--sp-accent-ink); } /* первый экран страницы */ .sp-page-hero { padding: clamp(56px, 5vw + 24px, 104px) 0 clamp(48px, 4vw + 24px, 88px); background: var(--sp-surface-2); text-align: center; } .sp-page-hero__title { max-width: 960px; margin: 0 auto; font: 700 var(--sp-fs-display)/1.08 var(--sp-font-body); letter-spacing: -.03em; color: var(--sp-ink); text-wrap: balance; } .sp-page-hero__lead { max-width: 680px; margin: var(--sp-space-5) auto 0; font-size: clamp(16px, .4vw + 15px, 19px); line-height: 1.6; color: var(--sp-muted); text-wrap: pretty; } .sp-page-hero__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-space-3); margin-top: var(--sp-space-6); } @media (max-width: 575.98px) { .sp-page-hero__actions > .sp-btn { flex: 1 1 100%; } } /* сетки карточек */ .sp-cards { display: grid; gap: var(--sp-space-5); grid-template-columns: 1fr; } @media (min-width: 576px) { .sp-cards--2, .sp-cards--3, .sp-cards--4 { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1024px) { .sp-cards--3 { grid-template-columns: repeat(3, 1fr); } .sp-cards--4 { grid-template-columns: repeat(4, 1fr); } } /* 2 колонки и нечётное число карточек — последняя на всю ширину */ @media (min-width: 576px) and (max-width: 1023.98px) { .sp-cards--3 > :last-child:nth-child(odd) { grid-column: 1 / -1; } } /* карточка — одна на весь сайт */ .sp-card { display: flex; flex-direction: column; min-width: 0; overflow: hidden; background: var(--sp-surface); border: 1px solid var(--sp-line); border-radius: var(--sp-radius-m); color: var(--sp-text); text-decoration: none; transition: border-color var(--sp-ease); } a.sp-card:hover { border-color: #b8b8b8; } a.sp-card:focus-visible { outline: 2px solid var(--sp-focus); outline-offset: 2px; } .sp-section--alt .sp-card { border-color: #e4e4e4; } .sp-card__media { display: block; aspect-ratio: 4 / 3; overflow: hidden; background: #e9e9e9; } .sp-card__media img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; } a.sp-card:hover .sp-card__media img { transform: scale(1.03); } .sp-card__body { display: flex; flex: 1; flex-direction: column; gap: var(--sp-space-2); padding: var(--sp-space-5); } .sp-card__title { margin: 0; font: 600 var(--sp-fs-h3)/1.35 var(--sp-font-body); letter-spacing: -.01em; color: var(--sp-ink); } .sp-card__text { margin: 0; font-size: 15px; line-height: 1.6; color: var(--sp-muted); } /* карточка-ссылка: название и стрелка в строку */ .sp-card--media:not(.sp-card--product) .sp-card__body { flex-direction: row; align-items: center; justify-content: space-between; gap: var(--sp-space-3); } .sp-card__arrow { flex: none; position: relative; width: 36px; height: 36px; border: 1px solid var(--sp-line); border-radius: 50%; transition: background-color var(--sp-ease), border-color var(--sp-ease); } .sp-card__arrow::before { content: ""; position: absolute; top: 50%; left: 50%; width: 7px; height: 7px; margin: -4px 0 0 -5px; border-top: 1.5px solid currentColor; border-right: 1.5px solid currentColor; transform: rotate(45deg); } a.sp-card:hover .sp-card__arrow { background: var(--sp-dark); border-color: var(--sp-dark); color: #fff; } /* услуга */ .sp-card--service { padding: var(--sp-space-6); gap: var(--sp-space-3); } .sp-card__list { margin: var(--sp-space-2) 0 0; padding: 0; list-style: none; } .sp-card__list li { position: relative; margin: 0; padding: 4px 0 4px 18px; font-size: 15px; line-height: 1.55; color: var(--sp-text); } .sp-card__list li::before { content: ""; position: absolute; left: 2px; top: calc(4px + .775em - 3px); width: 6px; height: 6px; border-radius: 50%; background: var(--sp-accent); } /* цена */ .sp-card--price { gap: var(--sp-space-2); padding: var(--sp-space-5) var(--sp-space-6); } .sp-card__label { font-size: 15px; font-weight: 600; color: var(--sp-text); } .sp-card__price { font-size: clamp(20px, .6vw + 17px, 24px); font-weight: 700; letter-spacing: -.01em; color: var(--sp-ink); font-variant-numeric: tabular-nums; } /* галерея (spGallery) */ .sp-gallery { display: grid; gap: var(--sp-space-3); grid-template-columns: repeat(2, 1fr); } @media (min-width: 768px) { .sp-gallery { grid-template-columns: repeat(3, 1fr); gap: var(--sp-space-4); } } @media (min-width: 1024px) { .sp-gallery { grid-template-columns: repeat(4, 1fr); } } .sp-gallery__item { display: block; aspect-ratio: 1 / 1; overflow: hidden; border-radius: var(--sp-radius-s); background: #e9e9e9; } .sp-gallery__item img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease, opacity var(--sp-ease); } .sp-gallery__item:hover img { transform: scale(1.04); } .sp-gallery__item:focus-visible { outline: 2px solid var(--sp-focus); outline-offset: 2px; } /* товар: фото с миниатюрами + цены */ .sp-product { display: grid; gap: var(--sp-space-6); grid-template-columns: minmax(0, 1fr); align-items: start; } @media (min-width: 900px) { .sp-product { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: var(--sp-space-8); } } .sp-product__main { display: block; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--sp-radius-m); background: #e9e9e9; } .sp-product__main img { display: block; width: 100%; height: 100%; object-fit: cover; } .sp-product__thumbs { display: flex; gap: var(--sp-space-2); margin-top: var(--sp-space-3); padding-bottom: 4px; overflow-x: auto; scrollbar-width: thin; } .sp-product__thumb { flex: none; width: 76px; height: 76px; padding: 0; overflow: hidden; cursor: pointer; opacity: .6; border: 2px solid transparent; border-radius: var(--sp-radius-s); background: #e9e9e9; transition: opacity var(--sp-ease), border-color var(--sp-ease); } .sp-product__thumb img { display: block; width: 100%; height: 100%; object-fit: cover; } .sp-product__thumb:hover { opacity: 1; } .sp-product__thumb.is-active { opacity: 1; border-color: var(--sp-ink); } .sp-product__thumb:focus-visible { outline: 2px solid var(--sp-focus); outline-offset: 2px; } .sp-product__info { display: flex; flex-direction: column; gap: var(--sp-space-5); min-width: 0; } .sp-product__title { margin: 0; font: 700 var(--sp-fs-h2)/1.2 var(--sp-font-body); letter-spacing: var(--sp-track-tight); color: var(--sp-ink); text-wrap: balance; } .sp-product__actions { margin: 0; } /* таблица цен */ .sp-price-table { width: 100%; border-collapse: collapse; font-size: 15px; font-variant-numeric: tabular-nums; } .sp-price-table th { padding: 0 12px 10px 0; border-bottom: 1px solid var(--sp-ink); text-align: left; font-size: 13px; font-weight: 600; line-height: 1.35; color: var(--sp-muted); vertical-align: bottom; } .sp-price-table td { padding: 12px 12px 12px 0; border-bottom: 1px solid var(--sp-line); color: var(--sp-text); vertical-align: top; } .sp-price-table :is(th, td):last-child { padding-right: 0; text-align: right; } .sp-price-table td:last-child { font-weight: 700; color: var(--sp-ink); white-space: nowrap; } .sp-note { margin: 0; padding: var(--sp-space-4) var(--sp-space-5); border-radius: var(--sp-radius-m); background: var(--sp-surface-2); font-size: var(--sp-fs-s); line-height: 1.65; color: var(--sp-text); } .sp-section--alt .sp-note { background: var(--sp-surface); } /* характеристики */ .sp-specs { display: grid; grid-template-columns: 1fr; gap: 0; margin: 0; } .sp-specs__item { padding: var(--sp-space-5) 0; border-top: 1px solid var(--sp-line); } .sp-specs__item:last-child { border-bottom: 1px solid var(--sp-line); } .sp-specs dt { margin: 0 0 var(--sp-space-2); font-size: var(--sp-fs-m); font-weight: 700; color: var(--sp-ink); } .sp-specs dd { margin: 0; font-size: 15px; line-height: 1.75; color: var(--sp-muted); } @media (min-width: 768px) { .sp-specs { grid-template-columns: repeat(3, 1fr); gap: var(--sp-space-6); } .sp-specs__item, .sp-specs__item:last-child { padding: var(--sp-space-5) 0 0; border-top: 2px solid var(--sp-ink); border-bottom: 0; } } /* текст (SEO-блоки в контенте, seoText) */ .sp-prose { max-width: 820px; margin: 0 auto; font-size: var(--sp-fs-m); line-height: 1.75; color: var(--sp-text); } .sp-prose > :first-child { margin-top: 0; } .sp-prose h2 { margin: 0 0 var(--sp-space-5); font: 700 var(--sp-fs-h2)/1.2 var(--sp-font-body); letter-spacing: var(--sp-track-tight); color: var(--sp-ink); text-wrap: balance; } .sp-prose h3 { margin: var(--sp-space-7) 0 var(--sp-space-3); font: 700 clamp(18px, .5vw + 16px, 21px)/1.35 var(--sp-font-body); color: var(--sp-ink); } .sp-prose p { margin: 0 0 var(--sp-space-4); } .sp-prose :is(ul, ol) { margin: 0 0 var(--sp-space-4); padding-left: 22px; } .sp-prose li { margin: 0 0 var(--sp-space-2); padding-left: 4px; } .sp-prose li::marker { color: var(--sp-muted); } .sp-prose strong { font-weight: 600; color: var(--sp-ink); } .sp-prose a { color: var(--sp-ink); text-decoration: underline; text-decoration-color: var(--sp-accent); text-underline-offset: 3px; } .sp-prose .sp-accent { margin-top: var(--sp-space-6); padding: var(--sp-space-5); border-radius: var(--sp-radius-m); background: var(--sp-surface); text-align: center; } .sp-section:not(.sp-section--alt) .sp-prose .sp-accent { background: var(--sp-surface-2); } /* логотипы клиентов: одинаковые плитки, монохром — цвет при наведении */ .sp-logos { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-space-3); margin: 0; padding: 0; list-style: none; } @media (min-width: 576px) { .sp-logos { grid-template-columns: repeat(3, 1fr); gap: var(--sp-space-4); } } @media (min-width: 1024px) { .sp-logos { grid-template-columns: repeat(6, 1fr); } } .sp-logos__item { display: flex; align-items: center; justify-content: center; height: clamp(72px, 4vw + 56px, 104px); margin: 0; padding: var(--sp-space-3) clamp(10px, 1.5vw, 20px); background: var(--sp-surface); border: 1px solid #e4e4e4; border-radius: var(--sp-radius-m); } .sp-logos__item img { display: block; width: auto; height: auto; max-width: 100%; max-height: clamp(32px, 1.5vw + 26px, 48px); object-fit: contain; filter: grayscale(1); opacity: .72; transition: filter var(--sp-ease), opacity var(--sp-ease); } .sp-logos__item:hover img { filter: none; opacity: 1; } /* баннеры: «Вы дизайнер?» и тёмный призыв */ .sp-banner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-space-5) var(--sp-space-7); padding: clamp(28px, 3vw + 12px, 56px) clamp(24px, 4vw + 8px, 64px); border-radius: var(--sp-radius-l); background: var(--sp-surface-2); } .sp-section--alt .sp-banner { background: var(--sp-surface); } .sp-banner__text { flex: 1 1 420px; min-width: 0; } .sp-banner__title { margin: 0; font: 700 clamp(22px, 1vw + 17px, 30px)/1.2 var(--sp-font-body); letter-spacing: var(--sp-track-tight); color: var(--sp-ink); text-wrap: balance; } .sp-banner__lead { max-width: 620px; margin: var(--sp-space-3) 0 0; font-size: var(--sp-fs-m); line-height: 1.6; color: var(--sp-muted); } .sp-banner__actions { display: flex; flex-wrap: wrap; gap: var(--sp-space-3); } .sp-banner--dark { background: var(--sp-dark); color: #fff; } .sp-section--alt .sp-banner--dark { background: var(--sp-dark); } .sp-banner--dark .sp-banner__title { color: #fff; } .sp-banner--dark .sp-banner__lead { color: var(--sp-muted-inverse); } @media (max-width: 575.98px) { .sp-banner > .sp-btn, .sp-banner__actions, .sp-banner__actions > .sp-btn { flex: 1 1 100%; } } /* секция с формой заявки */ .sp-section.sp-cta { padding: var(--sp-section-y) 0; } .sp-cta .sp-cta__inner { max-width: 760px; margin: 0 auto; padding: clamp(32px, 3vw + 16px, 64px) clamp(20px, 4vw + 8px, 64px); border-radius: var(--sp-radius-l); background: var(--sp-surface-2); text-align: center; } .sp-section--alt.sp-cta .sp-cta__inner { background: var(--sp-surface); } .sp-cta .sp-cta__title { margin: 0 0 var(--sp-space-3); font: 700 var(--sp-fs-h2)/1.2 var(--sp-font-body); letter-spacing: var(--sp-track-tight); color: var(--sp-ink); text-wrap: balance; } .sp-cta .sp-cta__lead { max-width: 560px; margin: 0 auto var(--sp-space-6); font-size: var(--sp-fs-m); line-height: 1.6; color: var(--sp-muted); } /* процесс */ .sp-process__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-space-3); margin: 0; padding: 0; list-style: none; counter-reset: sp-step; } /* планшет: 3 + 2 во всю ширину (в 5 колонок слова не помещаются) */ @media (min-width: 768px) and (max-width: 1023.98px) { .sp-process__grid { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--sp-space-4); } .sp-process__step:nth-child(-n+3) { grid-column: span 2; } .sp-process__step:nth-child(n+4) { grid-column: span 3; } } @media (min-width: 1024px) { .sp-process__grid { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--sp-space-4); } } @media (max-width: 767.98px) { .sp-process__grid > :last-child:nth-child(odd) { grid-column: 1 / -1; } } .sp-process__step { position: relative; display: flex; flex-direction: column; align-items: center; gap: var(--sp-space-3); margin: 0; min-width: 0; padding: var(--sp-space-6) var(--sp-space-4) var(--sp-space-5); text-align: center; background: var(--sp-surface); border: 1px solid var(--sp-line); border-radius: var(--sp-radius-m); counter-increment: sp-step; } .sp-section--alt .sp-process__step { border-color: #e4e4e4; } .sp-process__step::before { content: "0" counter(sp-step); position: absolute; top: 12px; left: 14px; font-size: 12px; font-weight: 600; color: #b0b0b0; font-variant-numeric: tabular-nums; } .sp-process__icon { display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 50%; background: var(--sp-surface-2); color: var(--sp-ink); font-size: 28px; font-weight: 300; } .sp-process__text { font-size: var(--sp-fs-s); font-weight: 600; line-height: 1.4; color: var(--sp-text); text-wrap: balance; } /* карусель (sp-blocks.js добавляет кнопки) */ .sp-carousel { position: relative; } .sp-carousel__track { display: grid; grid-auto-flow: column; grid-auto-columns: 86%; gap: var(--sp-space-4); overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; } .sp-carousel__track::-webkit-scrollbar { display: none; } .sp-carousel__track > * { scroll-snap-align: start; } @media (min-width: 576px) { .sp-carousel__track { grid-auto-columns: calc((100% - var(--sp-space-4)) / 2); } } @media (min-width: 1024px) { .sp-carousel__track { grid-auto-columns: calc((100% - 2 * var(--sp-space-5)) / 3); gap: var(--sp-space-5); } } .sp-carousel__nav { display: flex; justify-content: flex-end; gap: var(--sp-space-2); margin-top: var(--sp-space-4); } .sp-carousel__nav[hidden] { display: none; } .sp-carousel__btn { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; cursor: pointer; border: 1px solid var(--sp-line); border-radius: 50%; background: var(--sp-surface); color: var(--sp-ink); transition: border-color var(--sp-ease), opacity var(--sp-ease); } .sp-carousel__btn:hover:not(:disabled) { border-color: var(--sp-ink); } .sp-carousel__btn:disabled { opacity: .35; cursor: default; } .sp-carousel__btn:focus-visible { outline: 2px solid var(--sp-focus); outline-offset: 2px; } .sp-carousel__btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } /* кнопки: светлая и контурная поверх .sp-btn (тёмная — .sp-btn--dark) */ .sp-btn--outline { background: transparent; color: inherit; border-color: currentColor; } .sp-btn--outline:hover { background: rgba(127, 127, 127, .12); } .sp-banner--dark .sp-btn--outline { color: #fff; border-color: rgba(255, 255, 255, .5); } @media (prefers-reduced-motion: reduce) { .sp-card__media img, .sp-gallery__item img, .sp-carousel__track { transition: none !important; scroll-behavior: auto; } } /* ==================================================================== 4.20 Старые страницы (шаблоны 1/15/22) — блоки контента в общем стиле. Разметку не трогаем, только оформление (специфичность .sp-page …; !important — там, где он у правил style2.css). ==================================================================== */ /* секции-чанки внутри контейнера страницы: без второго контейнера; серая секция — панелью */ .sp-page .sp-section { padding: var(--sp-space-8) 0; } .sp-page .sp-section > .sp-container { max-width: none; padding: 0; } .sp-page .sp-section--alt { margin: var(--sp-space-7) 0; padding: var(--sp-space-7) clamp(20px, 3vw, 48px); border-radius: var(--sp-radius-l); } .sp-page .sp-section + .sp-section--alt { margin-top: 0; } /* шапка страницы: h1 + подзаголовок */ .sp-page .page-header { margin-bottom: var(--sp-space-6); text-align: center; } .sp-page .page-header__subtitle { margin-top: var(--sp-space-2); font-size: var(--sp-fs-l) !important; font-weight: 400; line-height: 1.5; color: var(--sp-muted); } .sp-page .sp-content > .page-header__subtitle { margin: calc(-1 * var(--sp-space-3)) 0 var(--sp-space-5) !important; text-align: center; } /* фото-лента вверху страницы — одна строка (на телефоне — прокрутка) */ .sp-gallery--strip { grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: minmax(150px, 1fr); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: thin; } .sp-gallery--strip > * { scroll-snap-align: start; } @media (max-width: 767.98px) { .sp-gallery--strip { grid-auto-columns: 44%; } } .sp-page .sp-gallery { margin: var(--sp-space-5) 0; } /* подпись под фото (.grhelp) */ .sp-page .grhelp { margin: var(--sp-space-4) 0 0 !important; padding: var(--sp-space-4) var(--sp-space-5); border-radius: var(--sp-radius-m); background: var(--sp-surface-2); font-size: 15px; line-height: 1.6; letter-spacing: 0; color: var(--sp-text); text-align: center; white-space: normal; } /* заголовки разделов старого контента */ .sp-page .kal3 { margin: var(--sp-space-8) 0 var(--sp-space-5) !important; } .sp-page .kal3.m-15, .sp-page .kal3[style] { margin-top: var(--sp-space-8) !important; } /* текст (SEO-блоки старых страниц): читаемый кегль и ширина строки, как у .sp-prose */ .sp-page .sp-content > div:not([class]):has(> p, > ul, > h2) { max-width: 860px; margin-inline: auto; } .sp-page .sp-content > div:not([class]) :is(p, li) { font-size: var(--sp-fs-m); line-height: 1.75; color: var(--sp-text); text-align: left; } .sp-page .sp-content > div:not([class]) p { margin: 0 0 var(--sp-space-4); } .sp-page .sp-content > div:not([class]) :is(ul, ol) { margin: 0 0 var(--sp-space-4); padding-left: 22px; list-style-position: outside; } .sp-page .sp-content > div:not([class]) li { margin: 0 0 var(--sp-space-2); } .sp-page .sp-content > div:not([class]) li::marker { color: var(--sp-muted); } .sp-page .sp-content > div:not([class]) h2 { margin: var(--sp-space-7) 0 var(--sp-space-3); font: 700 clamp(19px, .6vw + 16px, 23px)/1.3 var(--sp-font-body); letter-spacing: -.01em; color: var(--sp-ink); text-align: left; } .sp-page .sp-content > div:not([class]) h3 { margin: var(--sp-space-6) 0 var(--sp-space-2); font: 700 18px/1.35 var(--sp-font-body); color: var(--sp-ink); } /* таблицы цен .myprice (4 колонки) и .myprice3 (зеркала) */ .sp-page :is(.myprice, .myprice3) { width: 100%; margin: 0; border-collapse: collapse; font-size: 15px; font-variant-numeric: tabular-nums; } .sp-page :is(.myprice, .myprice3) :is(td, th) { padding: 12px 14px; border: 0; border-bottom: 1px solid var(--sp-line); background: none; text-align: left; vertical-align: top; } .sp-page .myprice3 thead th { padding-top: 0; border-bottom: 1px solid var(--sp-ink); font-size: 13px; font-weight: 600; color: var(--sp-muted); } .sp-page .myprice3 :is(td, th):not(:first-child) { text-align: right; white-space: nowrap; } .sp-page .myprice3 td:not(:first-child) { font-weight: 700; color: var(--sp-ink); } .sp-page .myprice3 tr:nth-child(even), .sp-page .myprice3 thead { background: none; } .sp-page .myprice tr:first-child td { border-top: 1px solid var(--sp-ink); } .sp-page .myprice td:nth-child(odd) { font-weight: 500; color: var(--sp-text); } .sp-page .myprice td:nth-child(even) { font-weight: 700; color: var(--sp-ink); text-align: right; white-space: nowrap; } .sp-page .myprice td:nth-child(3) { padding-left: var(--sp-space-6); } .sp-page .j_types2 { width: auto !important; max-width: 100%; text-align: left; } .sp-page .j_types2:has(> table) { overflow-x: auto; } @media (max-width: 767.98px) { /* 4 колонки -> две строки на услугу */ .sp-page .myprice, .sp-page .myprice tbody { display: block; } .sp-page .myprice tr { display: grid; grid-template-columns: 1fr auto; } .sp-page .myprice td { width: auto !important; } .sp-page .myprice td:nth-child(3) { padding-left: 14px; } .sp-page .myprice tr:first-child td:nth-child(n+3) { border-top: 0; } } /* плитки «Стоимость изготовления» (.jtp2 > .basej): карточки сайта */ .sp-page .jtp2 { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: var(--sp-space-5); margin: 0; font-weight: 400; } .sp-page .jtp2::after { content: none; } .sp-page .jtp2 > .basej { display: flex; flex-direction: column; width: auto !important; margin: 0 !important; overflow: hidden; border: 1px solid var(--sp-line) !important; border-radius: var(--sp-radius-m); background: var(--sp-surface); line-height: 1.4; text-align: left; } .sp-page .jtp2 .basej > div:first-child { width: auto !important; margin: 0 !important; padding: 12px var(--sp-space-5); border-bottom: 1px solid var(--sp-line); background: var(--sp-surface-2); font-size: 13px; font-weight: 600; line-height: 1.4; text-transform: none; color: var(--sp-muted); } .sp-page .jtp2 .basej2 { display: flex; flex: 1; flex-direction: column; gap: var(--sp-space-3); margin: 0; padding: var(--sp-space-5); border: 0 !important; } .sp-page .jtp2 .upj { height: auto; padding: 0; text-transform: none; } .sp-page .jtp2 .upj p { margin: 0; font-size: var(--sp-fs-m); font-weight: 600; line-height: 1.35; color: var(--sp-ink); text-align: left; } .sp-page .jtp2 .imageu { display: block; margin: 0; height: auto; } .sp-page .jtp2 .imageu img { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; border-radius: var(--sp-radius-s); } .sp-page .jtp2 .price { display: block; margin: auto 0 0; font-size: 20px; font-weight: 700; line-height: 1.3; color: var(--sp-ink); text-align: left; } /* полоса преимуществ под плитками */ .sp-page .bul { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: var(--sp-space-2); height: auto; margin: 0; padding: 0; background: none; list-style: none; font-size: 15px !important; line-height: 1.4 !important; font-weight: 600 !important; color: var(--sp-text) !important; } .sp-page .bul li { float: none; margin: 0 !important; padding: 8px 14px 8px 30px; position: relative; border-radius: var(--sp-radius-pill); background: var(--sp-surface-2); list-style: none; } .sp-page .bul li::before { content: ""; position: absolute; left: 14px; top: 50%; width: 7px; height: 7px; margin-top: -3.5px; border-radius: 50%; background: var(--sp-accent); } .sp-page .bul span { padding: 0; color: inherit; } /* виды вывесок (.glass-types): строки «фото + текст» */ .sp-page .glass-types { display: grid; gap: var(--sp-space-4); } .sp-page .glass-types__item { display: grid; grid-template-columns: 200px 1fr; gap: var(--sp-space-5); align-items: start; height: auto; min-height: 0; padding: var(--sp-space-5); border: 1px solid var(--sp-line); border-radius: var(--sp-radius-m); background: var(--sp-surface); } .sp-page .glass-types__item:nth-child(odd) { background: var(--sp-surface); } .sp-page .glass-types__item > :first-child { grid-column: 1; grid-row: 1 / span 2; display: block; } .sp-page .glass-types__item > :not(:first-child) { grid-column: 2; margin: 0; } .sp-page .glass-types__item img { float: none; display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; padding: 0; object-fit: cover; border-radius: var(--sp-radius-s); } .sp-page .glass-types__item-title a { color: inherit; text-decoration: none; } .sp-page .glass-types__item-title a:hover { text-decoration: underline; text-underline-offset: 3px; } .sp-page .glass-types__item-title { font-size: var(--sp-fs-h3); font-weight: 700; line-height: 1.35; color: var(--sp-ink); } .sp-page .glass-types__item :is(p, div:not(.glass-types__item-title)) { font-size: 15px; line-height: 1.65; color: var(--sp-text); } @media (max-width: 575.98px) { .sp-page .glass-types__item { grid-template-columns: 1fr; } .sp-page .glass-types__item > :first-child, .sp-page .glass-types__item > :not(:first-child) { grid-column: 1; grid-row: auto; } } /* «Контакты»: соцсети, реквизиты, карточки карт */ .sp-page .contact-ext iframe { display: block; width: 100%; margin: var(--sp-space-3) 0 var(--sp-space-4); border: 0; border-radius: var(--sp-radius-m); background: var(--sp-surface-2); } .sp-page .sp-requisites { margin: var(--sp-space-6) 0 0; padding-top: var(--sp-space-5); border-top: 1px solid var(--sp-line); font-size: 13px; line-height: 1.6; color: var(--sp-muted); } .sp-page .sp-socials { margin-top: var(--sp-space-5); } /* «Оплата и доставка»: заголовок страницы, заголовки карточек и подзаголовки — по шкале (4.20) */ .sp-page .sp-content > h1.sp-page-title { margin: var(--sp-space-7) 0 var(--sp-space-6); } .sp-page .dosopl2 :is(h2.h1, div.h1:not(.other)), .sp-page .priem-tovara-block div.h1:not(.other) { margin: 0 0 var(--sp-space-3); padding: 0; font: 700 var(--sp-fs-card)/1.25 var(--sp-font-body); letter-spacing: -.015em; text-transform: none; color: var(--sp-ink); text-align: left; } .sp-page .dosopl2 :is(h2.h1, div.h1) .other { font: inherit; color: inherit; } .sp-page .dosopl2 div.h1.other, .sp-page .priem-tovara-block div.h1.other { margin: var(--sp-space-6) 0 var(--sp-space-2); padding: 0; font: 700 var(--sp-fs-m)/1.35 var(--sp-font-body); letter-spacing: 0; text-transform: none; color: var(--sp-ink); text-align: left; } .sp-page .priem-tovara-block p.other { font-size: 15px; line-height: 1.7; color: var(--sp-text); } /* галереи из 5 и 6 фото — без неполного последнего ряда */ @media (min-width: 1024px) { .sp-gallery:not(.sp-gallery--strip):has(> :nth-child(5):last-child) { grid-template-columns: repeat(5, 1fr); } .sp-gallery:not(.sp-gallery--strip):has(> :nth-child(6):last-child) { grid-template-columns: repeat(3, 1fr); } } /* «Политика конфиденциальности» (ресурс 117): раньше — свой