/* ========================================================================== Стекло Мастер — основные стили Токены и размеры — из design/HANDOFF.md ========================================================================== */ /* Шрифты локально (Fontsource, лицензия SIL OFL — assets/fonts/OFL-*.txt). Вариативные: один файл на все начертания. */ @font-face { font-family: 'Onest'; font-style: normal; font-display: swap; font-weight: 100 900; src: url(../fonts/onest-cyrillic-wght-normal.woff2) format('woff2'); unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; } @font-face { font-family: 'Onest'; font-style: normal; font-display: swap; font-weight: 100 900; src: url(../fonts/onest-latin-ext-wght-normal.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: 'Onest'; font-style: normal; font-display: swap; font-weight: 100 900; src: url(../fonts/onest-latin-wght-normal.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; } @font-face { font-family: 'JetBrains Mono'; font-style: normal; font-display: swap; font-weight: 100 800; src: url(../fonts/jetbrains-mono-cyrillic-wght-normal.woff2) format('woff2'); unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; } @font-face { font-family: 'JetBrains Mono'; font-style: normal; font-display: swap; font-weight: 100 800; src: url(../fonts/jetbrains-mono-latin-ext-wght-normal.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: 'JetBrains Mono'; font-style: normal; font-display: swap; font-weight: 100 800; src: url(../fonts/jetbrains-mono-latin-wght-normal.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 { --ink: #14181b; --text-2: #2a3135; --text-3: #3c4448; --muted: #5b6368; --muted-dark: #9aa3a8; --muted-dark-2: #8a9398; --on-dark: #c9d0d4; --bg: #f4f5f3; --surface: #fff; --border: #e2e5e3; --input-border: #d6dbd9; --divider: #eceeed; --ph: #dfe4e6; --primary: #1d6fa5; --primary-hover: #175a87; --tint: #e6eef2; --light: #9fcde8; --accent: #c94a12; --accent-hover: #a93d0d; --on-accent: #fde6db; --max: #5b3fd6; --max-hover: #4a31b8; --success: #2e7d4f; --font: Onest, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --mono: "JetBrains Mono", ui-monospace, monospace; --wrap: 1440px; --gutter: 24px; --section: 96px; --shadow-float: 0 8px 24px rgba(20, 24, 27, .2); --shadow-badge: 0 10px 30px rgba(20, 24, 27, .15); --overlay: rgba(20, 24, 27, .6); --hdr-h: 122px; } /* ---------- base ---------- */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font); font-size: 16px; line-height: 1.5; -webkit-font-smoothing: antialiased; } img { max-width: 100%; height: auto; display: block; } a { color: var(--primary); text-decoration: none; } a:hover { color: var(--ink); } button, input, textarea, select { font: inherit; color: inherit; } button { cursor: pointer; } [hidden] { display: none !important; } :focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; } [id] { scroll-margin-top: calc(var(--hdr-h) + 16px); } .sr-only, .hp { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .skip-link { position: absolute; left: 16px; top: -60px; z-index: 200; padding: 10px 16px; border-radius: 10px; background: var(--ink); color: #fff; } .skip-link:focus { top: 16px; color: #fff; } .container { max-width: var(--wrap); margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); } .section { padding-top: var(--section); } .section--last { padding-bottom: var(--section); } .stack-12, .stack-14, .stack-16, .stack-20, .stack-24, .stack { display: flex; flex-direction: column; } .stack-12 { gap: 12px; } .stack-14 { gap: 14px; } .stack-16 { gap: 16px; } .stack-20 { gap: 20px; } .stack-24 { gap: 24px; } .stack { gap: 14px; } /* ---------- type ---------- */ .kicker { font-family: var(--mono); font-size: 12px; font-weight: 400; letter-spacing: .08em; text-transform: uppercase; color: var(--primary); } .kicker--light { color: var(--light); } .kicker--accent { color: var(--on-accent); } .h1 { margin: 0; font-size: clamp(36px, 4.6vw, 60px); line-height: 1.02; letter-spacing: -.03em; font-weight: 700; text-wrap: balance; } .h1--xl { font-size: clamp(40px, 5.4vw, 72px); line-height: 1; letter-spacing: -.035em; } .h2 { margin: 0; font-size: clamp(30px, 3.4vw, 44px); line-height: 1.05; letter-spacing: -.025em; font-weight: 700; text-wrap: balance; } .h2--sm { font-size: clamp(28px, 3vw, 40px); line-height: 1.08; } .h2--md { font-size: clamp(28px, 3vw, 38px); line-height: 1.08; } .h2--xs { font-size: 28px; line-height: 1.1; letter-spacing: -.02em; } .h3 { margin: 0; font-size: 22px; letter-spacing: -.01em; font-weight: 700; } .h3--sm { font-size: 20px; } .lead { margin: 0; font-size: 18px; line-height: 1.5; color: var(--muted); max-width: 600px; text-wrap: pretty; } .lead--dark { color: var(--on-dark); } .muted { color: var(--muted); } p.muted { margin: 0; font-size: 15px; line-height: 1.55; text-wrap: pretty; } .num { font-family: var(--mono); font-size: 13px; color: var(--primary); } .num--muted { color: var(--muted); } .link-u { color: #fff; text-decoration: underline; text-underline-offset: 3px; } .link-u:hover { color: var(--light); } .link-strong { font-weight: 600; font-size: 15px; } /* ---------- buttons ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 52px; padding: 0 22px; border-radius: 12px; border: 1px solid transparent; font-weight: 600; font-size: 15px; line-height: 1.2; text-align: center; white-space: nowrap; text-decoration: none; transition: background-color .15s, color .15s, border-color .15s, opacity .15s; } .btn--sm { height: 44px; padding: 0 18px; border-radius: 10px; font-size: 14px; } .btn--lg { height: 56px; padding: 0 26px; font-size: 16px; } .btn--block { width: 100%; } .btn:disabled, .btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; } .btn--accent { background: var(--accent); color: #fff; } .btn--accent:hover:not(:disabled) { background: var(--accent-hover); color: #fff; } .btn--ink { background: var(--ink); color: #fff; } .btn--ink:hover:not(:disabled) { background: var(--primary); color: #fff; } .btn--outline { border-color: var(--ink); color: var(--ink); background: transparent; } .btn--outline:hover { background: var(--ink); color: #fff; } .btn--ghost-light { border-color: rgba(255, 255, 255, .3); color: #fff; background: transparent; } .btn--ghost-light:hover { background: rgba(255, 255, 255, .08); color: #fff; } .btn--outline-light { height: 48px; padding: 0 18px; border-radius: 10px; border-color: rgba(255, 255, 255, .2); color: #fff; background: transparent; font-weight: 500; } .btn--outline-light:hover { border-color: var(--light); color: #fff; } .btn--link { color: var(--primary); padding: 0 8px; } .btn-row { display: flex; gap: 12px; flex-wrap: wrap; } /* мессенджеры */ .msg-sq { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 10px; color: #fff; font-weight: 700; font-size: 13px; background: var(--primary); } .msg-sq:hover { color: #fff; background: var(--primary-hover); } .msg-sq.is-max, .msg-block.is-max, .msg-pill.is-max { background: var(--max); } .msg-sq.is-max:hover, .msg-block.is-max:hover, .msg-pill.is-max:hover { background: var(--max-hover); } .msg-block { display: inline-flex; align-items: center; justify-content: center; height: 48px; padding: 0 20px; border-radius: 12px; background: var(--primary); color: #fff; font-weight: 600; font-size: 15px; } .msg-block:hover { color: #fff; background: var(--primary-hover); } .msg-block--sm { height: 44px; border-radius: 10px; font-size: 14px; flex: 1; } .msg-pill { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 48px; padding: 0 18px; border-radius: 24px; background: var(--primary); color: #fff; font-weight: 600; font-size: 14px; box-shadow: var(--shadow-float); } .msg-pill:hover { color: #fff; background: var(--primary-hover); } .msg-text { color: #fff; font-weight: 600; } .msg-text:hover { color: var(--ink); } .msg-inline { display: flex; gap: 16px; flex-wrap: wrap; font-size: 14px; color: var(--on-accent); } /* ---------- forms ---------- */ .input { width: 100%; height: 56px; padding: 0 18px; border-radius: 12px; border: 1px solid var(--input-border); background: #fff; color: var(--ink); font-size: 16px; outline: none; transition: border-color .15s, box-shadow .15s; } .input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(29, 111, 165, .15); } .input--flat { border: none; } .input--flat:focus { box-shadow: 0 0 0 3px rgba(255, 255, 255, .5); } .input--dark { border-color: rgba(255, 255, 255, .2); background: rgba(255, 255, 255, .04); color: #fff; } .input--dark::placeholder { color: var(--muted-dark); } .input--dark:focus { border-color: var(--light); box-shadow: none; } .input--area { height: auto; padding: 16px 18px; resize: vertical; min-height: 96px; } .input.is-invalid { border-color: #d13b3b; box-shadow: 0 0 0 3px rgba(209, 59, 59, .15); } .row-fields { display: flex; gap: 12px; flex-wrap: wrap; } .row-fields > .input { flex: 1 1 180px; width: auto; } .row-fields > .btn { flex: 1 1 200px; } .form-error { margin: 0; padding: 10px 14px; border-radius: 10px; background: #fdecec; color: #a32222; font-size: 14px; } .lead-form.is-sending button[type="submit"] { opacity: .6; pointer-events: none; } .consent { display: flex; align-items: flex-start; gap: 10px; font-size: 13px; line-height: 1.45; color: var(--muted); cursor: pointer; text-align: left; } .consent input { width: 18px; height: 18px; margin: 1px 0 0; flex: none; accent-color: var(--primary); cursor: pointer; } .consent a { color: var(--primary); text-decoration: underline; } .consent--dark { color: var(--muted-dark); } .consent--dark a { color: var(--light); } .consent--dark input { accent-color: var(--light); } .consent--accent { color: var(--on-accent); } .consent--accent a { color: #fff; } .consent--accent input { accent-color: var(--ink); } .consent.is-invalid span { color: #ffd2d2; } .consent--light.is-invalid span { color: #a32222; } .file-pick { position: relative; flex: 1 1 220px; display: inline-flex; align-items: center; height: 56px; padding: 0 20px; border-radius: 12px; border: 1px dashed rgba(255, 255, 255, .35); color: var(--on-dark); font-size: 15px; cursor: pointer; overflow: hidden; } .file-pick input { position: absolute; inset: 0; opacity: 0; cursor: pointer; } .file-pick:hover { border-color: var(--light); color: #fff; } .file-pick span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* chips */ .chips { display: flex; gap: 8px; flex-wrap: wrap; } .chip { position: relative; display: inline-flex; align-items: center; height: 44px; padding: 0 18px; border-radius: 22px; border: 1px solid var(--input-border); background: #fff; color: var(--ink); font-size: 15px; font-weight: 500; cursor: pointer; } .chip:hover { border-color: var(--ink); color: var(--ink); } .chip.is-active { background: var(--ink); border-color: var(--ink); color: #fff; } button.chip { height: 40px; padding: 0 16px; font-size: 14px; border-radius: 20px; } .chip input { position: absolute; opacity: 0; pointer-events: none; } .chip--dark { height: 44px; border-color: rgba(255, 255, 255, .18); background: rgba(255, 255, 255, .04); color: #fff; font-size: 14px; } .chip--dark:hover { border-color: var(--light); color: #fff; } .chip--dark:has(input:checked) { background: var(--primary); border-color: var(--primary); } .chip--dark:has(input:focus-visible) { outline: 2px solid var(--light); outline-offset: 2px; } /* ---------- grids & cards ---------- */ .grid { display: grid; gap: 16px; } .grid--140 { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; } .grid--200 { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; } .grid--260 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); } .grid--270 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 270px), 1fr)); } .grid--280 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); } .grid--320 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); } .grid--340 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); } .grid--360 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr)); } .grid--520 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 520px), 1fr)); } .sec-head { display: flex; flex-direction: column; gap: 12px; margin-bottom: 32px; } .sec-head--split { flex-direction: row; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap; } .sec-head__titles { display: flex; flex-direction: column; gap: 12px; } .sec-head__lead { margin: 0; max-width: 420px; font-size: 16px; line-height: 1.5; color: var(--muted); } .card { margin: 0; background: #fff; border: 1px solid var(--border); border-radius: 18px; padding: 28px; display: flex; flex-direction: column; gap: 12px; color: var(--ink); } .card--blue { background: var(--primary); border-color: var(--primary); color: #fff; justify-content: space-between; } .card--blue:hover { background: var(--primary-hover); color: #fff; } .card--blue p { margin: 0; font-size: 15px; line-height: 1.55; color: #e1eef6; } .card--blue b { font-size: 16px; font-weight: 600; } .card--step { padding: 26px; } .card--first { border-top: 3px solid var(--primary); } .card > b { font-size: 19px; } .step-num { font-size: 44px; font-weight: 700; letter-spacing: -.03em; color: #cfd6d9; line-height: 1; } .ph { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 12px; text-align: center; font-size: 13px; line-height: 1.4; color: var(--muted); background: repeating-linear-gradient(135deg, var(--ph) 0 12px, #e7ebec 12px 24px); } /* product card */ .pcard { background: #fff; border: 1px solid var(--border); border-radius: 18px; padding: 10px; display: flex; flex-direction: column; gap: 14px; color: var(--ink); transition: border-color .2s, transform .2s; } .pcard:hover { border-color: var(--primary); transform: translateY(-2px); color: var(--ink); } .pcard__img { position: relative; height: 180px; border-radius: 12px; overflow: hidden; background: #eef1f2; display: block; } .pcard__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .pcard__body { padding: 0 8px 8px; display: flex; flex-direction: column; gap: 6px; } .pcard__head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; } .pcard__name { font-weight: 600; font-size: 18px; letter-spacing: -.01em; } .pcard__price { font-size: 14px; color: var(--primary); font-weight: 600; white-space: nowrap; } .pcard__desc { font-size: 14px; line-height: 1.45; color: var(--muted); } /* panels */ .panel { background: #fff; border: 1px solid var(--border); border-radius: 24px; padding: 40px; display: flex; flex-direction: column; gap: 24px; } .panel--dark { background: var(--ink); border-color: var(--ink); color: #fff; } /* split */ .split { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 24px; align-items: stretch; } .split--start { grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr)); gap: 40px; align-items: start; } .split__text { padding: 12px 0; } .photo-block { position: relative; min-height: 420px; border-radius: 24px; overflow: hidden; background: var(--ph); } .photo-block img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .numlist { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--input-border); } .numlist li { display: flex; gap: 20px; padding: 18px 0; border-bottom: 1px solid var(--input-border); align-items: baseline; font-size: 18px; font-weight: 500; } .numlist .num { width: 24px; flex: none; } /* ---------- header ---------- */ .hdr { position: sticky; top: 0; z-index: 40; background: rgba(244, 245, 243, .94); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-bottom: 1px solid var(--border); } .admin-bar .hdr { top: 32px; } .hdr__top { padding-top: 14px; padding-bottom: 14px; display: flex; align-items: center; justify-content: space-between; gap: 24px; } .logo { display: flex; align-items: center; gap: 12px; color: var(--ink); flex: none; } .logo:hover { color: var(--ink); } .logo__mark { position: relative; width: 40px; height: 40px; flex: none; } .logo__mark i { position: absolute; width: 28px; height: 28px; border-radius: 6px; } .logo__mark i:first-child { left: 0; top: 0; background: var(--primary); } .logo__mark i:last-child { right: 0; bottom: 0; background: rgba(159, 205, 232, .75); border: 1px solid rgba(255, 255, 255, .8); } .logo__text { display: flex; flex-direction: column; line-height: 1.1; } .logo__name { font-weight: 700; font-size: 18px; letter-spacing: -.01em; } .logo__tag { font-size: 12px; color: var(--muted); } .hdr__info { flex: 1; min-width: 0; display: flex; justify-content: center; gap: 32px; } .hdr__info-item { display: flex; flex-direction: column; justify-content: center; height: 44px; line-height: 1.25; white-space: nowrap; } .hdr__info-item span { font-size: 12px; color: var(--muted); } .hdr__info-item a, .hdr__info-item b { font-size: 14px; font-weight: 500; color: var(--ink); } .hdr__info-item a:hover { color: var(--primary); } .hdr__actions { display: flex; align-items: center; gap: 16px; flex: none; } .hdr__msg { display: flex; gap: 6px; } .hdr__phone { display: flex; flex-direction: column; line-height: 1.2; text-align: right; white-space: nowrap; } .hdr__phone-num { color: var(--ink); font-weight: 700; font-size: 17px; } .hdr__phone-num:hover { color: var(--primary); } .hdr__phone-sub { font-size: 12px; color: var(--muted); } .hdr__phone-icon { display: none; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 12px; background: var(--accent); color: #fff; } .hdr__phone-icon:hover { color: #fff; background: var(--accent-hover); } .hdr__burger { display: none; flex-direction: column; justify-content: center; align-items: center; gap: 5px; width: 48px; height: 48px; border-radius: 12px; border: none; background: var(--ink); } .hdr__burger span { width: 20px; height: 2px; background: #fff; border-radius: 1px; } .hdr__nav { background: var(--ink); } .hdr__nav-in { display: flex; align-items: center; justify-content: space-between; gap: 24px; } .hdr__links { display: flex; gap: 28px; overflow-x: auto; min-width: 0; height: 48px; align-items: stretch; font-size: 14px; font-weight: 500; scrollbar-width: none; } .hdr__links::-webkit-scrollbar { display: none; } .hdr__link { display: flex; align-items: center; white-space: nowrap; } .hdr__link--product { color: #fff; } .hdr__link--page { color: var(--on-dark); } .hdr__link--product:hover { color: var(--light); } .hdr__link--page:hover { color: #fff; } .hdr__link.is-active { color: var(--light); box-shadow: inset 0 -2px 0 var(--light); } .hdr__sep { align-self: center; width: 1px; height: 18px; background: rgba(255, 255, 255, .2); flex: none; } .hdr__calc { flex: none; display: inline-flex; align-items: center; height: 48px; color: var(--light); font-weight: 600; font-size: 14px; white-space: nowrap; } .hdr__calc:hover { color: #fff; } @media (max-width: 1180px) { .hdr__info { display: none; } } @media (max-width: 900px) { :root { --hdr-h: 72px; } .hdr__nav, .hdr__msg, .hdr__cta, .hdr__phone-sub { display: none; } .hdr__burger { display: flex; } } @media (max-width: 782px) { .admin-bar .hdr { top: 46px; } } @media (max-width: 600px) { .admin-bar .hdr { top: 0; } } @media (max-width: 520px) { .hdr__phone, .logo__tag { display: none; } .hdr__phone-icon { display: flex; } .hdr__actions { gap: 8px; } } /* mobile menu */ .mmenu { position: fixed; inset: 0; z-index: 120; background: var(--ink); color: #fff; display: flex; flex-direction: column; overflow-y: auto; overscroll-behavior: contain; } .mmenu__bar { display: flex; justify-content: space-between; align-items: center; padding: 14px 24px; border-bottom: 1px solid rgba(255, 255, 255, .1); } .mmenu__title { font-weight: 700; font-size: 18px; } .mmenu__close { width: 48px; height: 48px; border-radius: 12px; border: none; background: rgba(255, 255, 255, .08); color: #fff; font-size: 26px; line-height: 1; } .mmenu__body { padding: 24px; display: flex; flex-direction: column; gap: 28px; } .mmenu__products { display: flex; flex-direction: column; gap: 2px; } .mmenu__products .kicker { margin-bottom: 8px; } .mmenu__product { display: flex; align-items: center; min-height: 48px; font-size: 22px; font-weight: 600; color: #fff; border-bottom: 1px solid rgba(255, 255, 255, .06); } .mmenu__product.is-active, .mmenu__page.is-active { color: var(--light); } .mmenu__pages { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 16px; } .mmenu__page { display: flex; align-items: center; min-height: 44px; font-size: 16px; color: var(--on-dark); } .mmenu a:hover { color: var(--light); } .mmenu__contacts { display: flex; flex-direction: column; gap: 10px; } .mmenu__phone { font-size: 24px; font-weight: 700; color: #fff; } .mmenu__note { font-size: 14px; color: var(--muted-dark); } .mmenu__msg { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 6px; } .mmenu__msg .msg-block { height: 52px; } body.is-locked { overflow: hidden; } /* modal */ .modal { position: fixed; inset: 0; z-index: 130; background: var(--overlay); display: flex; align-items: center; justify-content: center; padding: 24px; } .modal__box { position: relative; width: 100%; max-width: 460px; max-height: calc(100vh - 48px); overflow-y: auto; background: #fff; border-radius: 24px; padding: 32px; display: flex; flex-direction: column; gap: 14px; } .modal__close { position: absolute; right: 16px; top: 16px; width: 44px; height: 44px; border-radius: 22px; border: none; background: var(--bg); font-size: 22px; line-height: 1; color: var(--ink); } .modal__title { margin: 0; font-size: 26px; letter-spacing: -.02em; padding-right: 44px; } .modal__text { margin: 0; font-size: 15px; line-height: 1.5; color: var(--muted); } /* floating messengers */ .float-msg { position: fixed; right: 20px; bottom: 20px; z-index: 60; display: flex; flex-direction: column; gap: 10px; align-items: flex-end; } .msg-pill--call { display: none; width: 52px; height: 52px; padding: 0; border-radius: 26px; background: var(--accent); } .msg-pill--call:hover { background: var(--accent-hover); } /* мобильная нижняя панель: позвонить + мессенджеры */ .msg-pill__label { display: none; } @media (max-width: 640px) { body { padding-bottom: 64px; } .float-msg { left: 0; right: 0; bottom: 0; flex-direction: row; gap: 1px; align-items: stretch; background: var(--border); box-shadow: 0 -4px 16px rgba(20, 24, 27, .08); padding-bottom: env(safe-area-inset-bottom); } .float-msg .msg-pill { flex: 1; height: 56px; border-radius: 0; box-shadow: none; font-size: 15px; } .msg-pill--call { display: inline-flex; order: -1; width: auto; } .msg-pill__label { display: inline; } } /* breadcrumbs */ .crumbs { padding-top: 20px; display: flex; gap: 8px; flex-wrap: wrap; font-size: 13px; color: var(--muted); } .crumbs [aria-current] { color: var(--ink); } /* ---------- footer ---------- */ .ftr { background: var(--ink); color: var(--on-dark); margin-top: var(--section); } .ftr__in { padding-top: 56px; padding-bottom: 28px; display: flex; flex-direction: column; gap: 40px; } .ftr__cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 32px; } .ftr__col { display: flex; flex-direction: column; gap: 8px; font-size: 14px; } .ftr__col .kicker { margin-bottom: 4px; } .ftr__col a { color: var(--on-dark); } .ftr__col a:hover { color: #fff; } .ftr__brand { font-weight: 700; font-size: 20px; color: #fff; } .ftr__col a.ftr__phone { font-weight: 700; font-size: 20px; color: #fff; margin-top: 8px; } .ftr__col a.ftr__phone2 { font-weight: 600; font-size: 16px; color: #fff; } .ftr__cta { align-self: flex-start; margin-top: 8px; } .ftr__bottom { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: 13px; color: var(--muted-dark-2); border-top: 1px solid rgba(255, 255, 255, .08); padding-top: 20px; } .ftr__bottom a { color: var(--muted-dark-2); } .ftr__bottom a:hover { color: #fff; } /* consult (оранжевый блок) */ .consult { background: var(--accent); color: #fff; border-radius: 24px; overflow: hidden; display: flex; flex-wrap: wrap; } .consult__photo { flex: 1 1 260px; min-height: 260px; position: relative; } .consult__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .consult__body { flex: 999 1 480px; padding: 44px; display: flex; flex-direction: column; gap: 18px; justify-content: center; } .consult__text { margin: 0; font-size: 16px; color: var(--on-accent); } .consult__text a { color: #fff; font-weight: 700; } .consult .lead-form { display: flex; flex-direction: column; gap: 14px; } /* ---------- front page ---------- */ .hero-front { padding-top: 40px; } .hero-front__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 480px), 1fr)); gap: 24px; align-items: stretch; } .hero-front__card { background: var(--ink); color: #fff; border-radius: 24px; padding: 48px 44px; display: flex; flex-direction: column; gap: 28px; justify-content: space-between; } .hero-front__card .lead { max-width: 520px; } .hero-front__alt { display: flex; gap: 10px; flex-wrap: wrap; font-size: 14px; color: var(--on-dark); } .hero-front__photo, .landing-hero__photo { position: relative; min-height: 460px; border-radius: 24px; overflow: hidden; background: var(--ph); } .hero-front__photo > img, .landing-hero__photo > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .price-badge { position: absolute; right: 20px; bottom: 20px; background: #fff; border-radius: 16px; padding: 18px 20px; display: flex; flex-direction: column; gap: 4px; box-shadow: var(--shadow-badge); pointer-events: none; } .price-badge span { font-size: 13px; color: var(--muted); } .price-badge b { font-size: 28px; font-weight: 700; letter-spacing: -.02em; } .usp { margin-top: 24px; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: 16px; overflow: hidden; } .usp > div { background: #fff; padding: 20px 22px; display: flex; flex-direction: column; gap: 4px; } .usp b { font-weight: 600; font-size: 16px; } .usp span { font-size: 14px; color: var(--muted); } .feature { background: var(--tint); border-radius: 24px; padding: 44px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 32px; } .feature__text { margin: 0; font-size: 16px; line-height: 1.55; color: var(--text-3); text-wrap: pretty; } .feature__price { display: flex; align-items: baseline; gap: 10px; margin-top: 4px; flex-wrap: wrap; } .feature__price span { font-size: 15px; color: var(--text-3); } .feature__price b { font-size: 32px; font-weight: 700; letter-spacing: -.02em; } .feature__cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; } .fcard { background: #fff; border-radius: 16px; padding: 22px; display: flex; flex-direction: column; gap: 10px; color: var(--ink); transition: box-shadow .2s; } .fcard:hover { color: var(--ink); box-shadow: 0 8px 24px rgba(20, 24, 27, .08); } .fcard__big { font-size: 40px; font-weight: 700; letter-spacing: -.03em; color: var(--primary); line-height: 1.1; } .fcard b { font-weight: 600; font-size: 16px; } .fcard span:last-child { font-size: 14px; line-height: 1.45; color: var(--muted); } /* quiz */ .quiz { background: var(--ink); color: #fff; border-radius: 24px; overflow: hidden; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr)); } .quiz__intro { padding: 44px; display: flex; flex-direction: column; gap: 18px; border-right: 1px solid rgba(255, 255, 255, .08); } .quiz__intro p { margin: 0; font-size: 16px; line-height: 1.55; color: var(--on-dark); } .quiz__perks { margin: auto 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; font-size: 15px; color: var(--on-dark); } .quiz__perks li::before { content: "— "; } .quiz__body { padding: 44px; display: flex; flex-direction: column; gap: 24px; min-height: 460px; } .quiz__progress { display: flex; flex-direction: column; gap: 10px; } .quiz__progress-row { display: flex; justify-content: space-between; font-size: 13px; color: var(--muted-dark); font-family: var(--mono); } .quiz__bar { height: 4px; background: rgba(255, 255, 255, .1); border-radius: 2px; overflow: hidden; } .quiz__bar i { display: block; height: 100%; width: 0; background: var(--accent); transition: width .3s; } .quiz__form { flex: 1; display: flex; flex-direction: column; } .quiz__step { flex: 1; margin: 0; padding: 0; border: 0; min-width: 0; display: flex; flex-direction: column; gap: 20px; } .quiz__q { padding: 0; margin: 0 0 4px; font-size: 22px; font-weight: 600; letter-spacing: -.01em; } .quiz__opts { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; } .quiz__opt { position: relative; display: flex; align-items: center; min-height: 56px; padding: 14px 16px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, .18); background: rgba(255, 255, 255, .04); font-size: 15px; font-weight: 500; cursor: pointer; transition: border-color .15s, background-color .15s; } .quiz__opt:hover { border-color: var(--light); } .quiz__opt input { position: absolute; opacity: 0; pointer-events: none; } .quiz__opt:has(input:checked) { background: var(--primary); border-color: var(--primary); } .quiz__opt:has(input:focus-visible) { outline: 2px solid var(--light); outline-offset: 2px; } .quiz__nav { margin-top: auto; display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; } .work { margin: 0; display: flex; flex-direction: column; gap: 10px; } .work__img { position: relative; display: block; aspect-ratio: 4 / 3; border-radius: 16px; overflow: hidden; background: var(--ph); } .work__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .work figcaption { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; } .work figcaption span { color: var(--muted); } .price-list { background: #fff; border: 1px solid var(--border); border-radius: 18px; overflow: hidden; } .price-list > div { display: flex; justify-content: space-between; gap: 16px; padding: 18px 24px; border-bottom: 1px solid var(--divider); font-size: 16px; } .price-list > div:last-child { border-bottom: 0; } .price-list b { font-weight: 600; white-space: nowrap; } .guarantees > div { display: flex; flex-direction: column; gap: 6px; } .guarantees b { font-size: 18px; font-weight: 600; } .guarantees span { font-size: 14px; line-height: 1.5; color: var(--on-dark); } .clients > div { display: flex; flex-direction: column; gap: 8px; } .clients__logo { position: relative; display: block; height: 96px; border-radius: 12px; overflow: hidden; background: var(--bg); } .clients__logo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; padding: 12px; } .clients .muted { font-size: 14px; } .review { gap: 16px; } .review p { margin: 0; font-size: 16px; line-height: 1.55; text-wrap: pretty; } .review cite { margin-top: auto; font-style: normal; font-size: 14px; } .stars { color: var(--accent); letter-spacing: 2px; } .faq { border-top: 1px solid var(--input-border); } .faq__item { border-bottom: 1px solid var(--input-border); } .faq__item summary { list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 22px 0; font-weight: 600; font-size: 18px; cursor: pointer; } .faq__item summary::-webkit-details-marker { display: none; } .faq__item summary::after { content: "+"; font-size: 24px; font-weight: 400; color: var(--primary); flex: none; } .faq__item[open] summary::after { content: "−"; } .faq__item p { margin: 0 0 22px; font-size: 16px; line-height: 1.6; color: var(--muted); max-width: 640px; } .cta-band { background: var(--accent); color: #fff; border-radius: 24px; padding: 48px 44px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); gap: 32px; align-items: center; } .cta-band__text { margin: 0; font-size: 17px; line-height: 1.5; color: var(--on-accent); } .seo-text { background: #fff; border: 1px solid var(--border); border-radius: 24px; padding: 44px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 40px; } .seo-text .content { font-size: 15px; color: var(--text-3); gap: 16px; } .seo-text .content h2 { font-size: 28px; margin: 0; } .seo-text .content h3 { font-size: 18px; } .seo-text .content--cols { grid-column: 1 / -1; display: block; columns: 2 420px; column-gap: 40px; } .seo-text .content--cols > * { break-inside: avoid; margin: 0 0 16px; } .contacts__list { margin: 0; display: flex; flex-direction: column; gap: 18px; font-size: 16px; } .contacts__list div { display: flex; flex-direction: column; gap: 4px; } .contacts__list dt { font-size: 13px; color: var(--muted); } .contacts__list dd { margin: 0; font-weight: 600; } .contacts__list a { color: var(--ink); } .contacts__list a:hover { color: var(--primary); } .contacts__btns { margin-top: auto; } .map { position: relative; min-height: 420px; border-radius: 24px; overflow: hidden; background: var(--ph); display: flex; align-items: center; justify-content: center; } .map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; } .map__load { height: 48px; padding: 0 20px; border-radius: 12px; border: 1px solid var(--ink); background: #fff; font-weight: 600; } /* ---------- landing (Продукция / Услуга) ---------- */ .landing-hero { padding-top: 20px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 520px), 1fr)); gap: 24px; align-items: stretch; } .landing-hero__text { display: flex; flex-direction: column; gap: 20px; justify-content: center; padding: 12px 0; } .landing-hero__photo { min-height: 420px; } .facts { display: flex; gap: 28px; flex-wrap: wrap; } .facts div { display: flex; flex-direction: column; gap: 2px; } .facts b { font-size: 24px; font-weight: 700; letter-spacing: -.02em; } .facts span { font-size: 13px; color: var(--muted); } .landing-body { padding-top: 56px; display: flex; flex-wrap: wrap; gap: 40px; align-items: flex-start; } .landing-body__main { flex: 999 1 560px; min-width: 0; display: flex; flex-direction: column; gap: 24px; } .landing-body__side { flex: 1 1 300px; max-width: 100%; position: sticky; top: 140px; display: flex; flex-direction: column; gap: 12px; } .side-menu { background: #fff; border: 1px solid var(--border); border-radius: 20px; padding: 22px; display: flex; flex-direction: column; gap: 4px; } .side-menu .kicker { margin-bottom: 8px; } .side-menu a { display: flex; align-items: center; min-height: 38px; padding: 4px 12px; border-radius: 10px; color: var(--ink); font-size: 15px; } .side-menu a:hover { background: var(--bg); color: var(--ink); } .side-menu a.is-active { background: var(--tint); color: var(--primary); font-weight: 600; } .side-cta { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .side-cta__btn { background: var(--ink); color: #fff; border-radius: 16px; padding: 18px; display: flex; flex-direction: column; gap: 10px; font-weight: 600; font-size: 15px; line-height: 1.25; } .side-cta__btn span { font-family: var(--mono); font-size: 20px; } .side-cta__btn:hover { background: var(--text-2); color: #fff; } .side-cta__btn--accent { background: var(--accent); } .side-cta__btn--accent:hover { background: var(--accent-hover); } .side-consult { background: #fff; border: 1px solid var(--border); border-radius: 20px; overflow: hidden; display: flex; flex-direction: column; } .side-consult__photo { position: relative; height: 150px; background: var(--ph); } .side-consult__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .side-consult__body { padding: 20px; display: flex; flex-direction: column; gap: 8px; } .side-consult__body b { font-size: 17px; } .side-consult__body .muted { font-size: 14px; line-height: 1.5; } .side-consult__phone { font-weight: 700; font-size: 18px; color: var(--ink); } .side-consult__msg { display: flex; gap: 8px; margin-top: 4px; } .request { background: var(--ink); color: #fff; border-radius: 24px; padding: 36px; display: flex; flex-direction: column; gap: 16px; margin-top: 24px; } .request > p { margin: 0; font-size: 16px; line-height: 1.5; color: var(--on-dark); } @media (max-width: 1000px) { .landing-body__side { position: static; } } /* ---------- content (the_content) ---------- */ .content { display: flex; flex-direction: column; gap: 20px; font-size: 17px; line-height: 1.65; color: var(--text-2); } .content > * { margin: 0; max-width: 760px; } .content > .sub_menu, .content > .ngg-galleryoverview, .content > .gallery, .content > .wpcf7, .content > .alignwide, .content > .alignfull, .content > .table-wrap, .content > figure, .content > .wp-block-gallery, .content > .wp-block-columns, .content > .wp-block-image { max-width: none; } .content h2 { margin-top: 16px; font-size: 32px; line-height: 1.15; letter-spacing: -.02em; color: var(--ink); font-weight: 700; } .content h3 { margin-top: 12px; font-size: 22px; line-height: 1.25; color: var(--ink); font-weight: 600; } .content h4 { margin-top: 8px; font-size: 18px; color: var(--ink); } .content > h2:first-child, .content > h3:first-child { margin-top: 0; } .content p { text-wrap: pretty; } .content ul, .content ol { padding-left: 22px; display: flex; flex-direction: column; gap: 6px; } .content a { text-decoration: underline; text-underline-offset: 2px; } .content img { border-radius: 16px; } .content figure { margin: 8px 0; } .content figcaption { margin-top: 8px; font-size: 14px; color: var(--muted); } .content blockquote { padding: 4px 0 4px 20px; border-left: 3px solid var(--primary); color: var(--ink); } .content hr { width: 100%; border: 0; border-top: 1px solid var(--border); } .content .table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: 14px; background: #fff; } .content table { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 1.4; min-width: 480px; } .content th, .content td { padding: 14px 18px; text-align: left; vertical-align: top; } .content thead th, .content tr:first-child th { background: var(--bg); font-weight: 600; } .content tr + tr td, .content tr + tr th, .content tbody tr:first-child td { border-top: 1px solid var(--divider); } .content thead + tbody tr:first-child td { border-top: 1px solid var(--divider); } .content .wp-block-table { margin: 0; } .content .wp-block-table table { border: 0; } .content .alignleft { float: left; margin: 0 24px 16px 0; } .content .alignright { float: right; margin: 0 0 16px 24px; } .content .aligncenter { margin-left: auto; margin-right: auto; } .page-plain { padding-top: 24px; } .page-plain__title { margin-bottom: 32px; } .pager { margin-top: 32px; } .pager .nav-links { display: flex; gap: 8px; flex-wrap: wrap; } .pager .page-numbers { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; height: 44px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--input-border); background: #fff; color: var(--ink); } .pager .page-numbers.current { background: var(--ink); border-color: var(--ink); color: #fff; } /* ---------- thanks / 404 ---------- */ .thanks { padding-top: 56px; display: flex; flex-direction: column; gap: 24px; } .thanks__hero { background: var(--ink); color: #fff; border-radius: 28px; padding: clamp(32px, 5vw, 72px); display: flex; flex-direction: column; gap: 20px; } .thanks__hero .lead { font-size: 19px; max-width: 620px; } .thanks__check { width: 64px; height: 64px; border-radius: 32px; background: var(--primary); display: flex; align-items: center; justify-content: center; font-size: 30px; } .thanks__msg { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; } .thanks__msg > span { font-size: 15px; color: var(--muted-dark); } .thanks .card { padding: 28px; gap: 8px; } .thanks__more { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; padding-top: 8px; font-size: 18px; } .nf { padding-top: 56px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 460px), 1fr)); gap: 32px; align-items: center; } .nf__art { position: relative; aspect-ratio: 4 / 3; border-radius: 28px; overflow: hidden; background: linear-gradient(135deg, var(--tint), #cfdde5); display: flex; align-items: center; justify-content: center; } .nf__art span { font-size: clamp(120px, 18vw, 240px); font-weight: 700; letter-spacing: -.06em; color: rgba(29, 111, 165, .18); line-height: 1; } .nf__art i:nth-of-type(1) { position: absolute; left: 46%; top: 12%; bottom: 12%; width: 2px; background: rgba(255, 255, 255, .9); transform: rotate(18deg); } .nf__art i:nth-of-type(2) { position: absolute; left: 52%; top: 30%; width: 28%; height: 2px; background: rgba(255, 255, 255, .8); transform: rotate(-24deg); } /* ---------- responsive ---------- */ @media (max-width: 900px) { :root { --section: 72px; } } @media (max-width: 640px) { :root { --gutter: 16px; --section: 56px; } .hero-front { padding-top: 16px; } .hero-front__card, .quiz__intro, .quiz__body, .feature, .consult__body, .cta-band, .seo-text { padding: 28px 22px; } .panel { padding: 28px 22px; } .request { padding: 28px 22px; } .hero-front__photo, .landing-hero__photo { min-height: 300px; } .photo-block { min-height: 280px; } .price-badge { right: 12px; bottom: 12px; padding: 14px 16px; } .price-badge b { font-size: 22px; } .btn-row > .btn { flex: 1 1 100%; } .btn--lg { padding: 0 18px; } .quiz__body { min-height: 0; } .quiz__opts { grid-template-columns: 1fr; } .card { padding: 22px; } .price-list > div { padding: 16px 18px; font-size: 15px; } .modal { padding: 12px; align-items: flex-end; } .modal__box { padding: 28px 20px 20px; border-radius: 24px 24px 16px 16px; } .map { min-height: 320px; } .content { font-size: 16px; } .content h2 { font-size: 26px; } .sec-head { margin-bottom: 24px; } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition: none !important; animation: none !important; } } /* ========================================================================== Калькулятор стоимости ========================================================================== */ .calc-head { padding-top: 20px; display: flex; flex-direction: column; gap: 14px; } .calc-head .lead { max-width: 720px; } .calc { padding-top: 32px; display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-start; } .calc__card { flex: 1 1 320px; min-width: 0; background: #fff; border: 1px solid var(--border); border-radius: 20px; padding: 28px; display: flex; flex-direction: column; gap: 24px; } .calc__card--opts { flex: 1 1 360px; gap: 0; } .calc__card--opts > .calc__block { padding-bottom: 22px; } .calc__block { display: flex; flex-direction: column; gap: 12px; } .calc__hint { font-size: 13px; color: var(--muted); } .calc__hint b { font-weight: 600; color: var(--ink); } .seg { display: flex; gap: 4px; padding: 4px; background: var(--bg); border-radius: 12px; } .seg__item { flex: 1; position: relative; } .seg__item input { position: absolute; opacity: 0; pointer-events: none; } .seg__item span { display: flex; align-items: center; justify-content: center; height: 44px; border-radius: 9px; font-weight: 600; font-size: 15px; cursor: pointer; transition: background-color .15s, color .15s; } .seg__item input:checked + span { background: var(--ink); color: #fff; } .seg__item input:focus-visible + span { outline: 2px solid var(--primary); outline-offset: 2px; } .calc__types { display: flex; flex-direction: column; gap: 14px; } .calc__group { display: flex; flex-direction: column; gap: 4px; } .calc__group-title { font-size: 13px; font-weight: 600; color: var(--muted); margin-bottom: 2px; } .type-opt { position: relative; display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 40px; padding: 6px 12px; border-radius: 10px; border: 1px solid transparent; font-weight: 500; font-size: 14px; cursor: pointer; } .type-opt:hover { background: var(--bg); } .type-opt input { position: absolute; opacity: 0; pointer-events: none; } .type-opt:has(input:checked) { background: var(--tint); border-color: var(--primary); } .type-opt:has(input:focus-visible) { outline: 2px solid var(--primary); outline-offset: 2px; } .type-opt__price { font-size: 13px; color: var(--muted); white-space: nowrap; } .chip--pick:has(input:checked) { background: var(--ink); border-color: var(--ink); color: #fff; } .chip--pick:has(input:focus-visible) { outline: 2px solid var(--primary); outline-offset: 2px; } .chip--sm { height: 40px; padding: 0 14px; font-size: 14px; } .calc__size { display: flex; gap: 10px; align-items: center; } .calc__size span { font-size: 18px; color: var(--muted); } .calc__num { flex: 1; min-width: 0; height: 56px; padding: 0 16px; font-size: 20px; font-weight: 600; } .input--sm { height: 44px; padding: 0 12px; border-radius: 10px; font-size: 16px; } .opt { display: flex; flex-direction: column; gap: 12px; padding: 20px 0; border-top: 1px solid var(--divider); } .opt:last-child { padding-bottom: 0; } .opt__head { display: flex; align-items: center; gap: 12px; cursor: pointer; font-weight: 600; font-size: 16px; } .opt__head input { position: absolute; opacity: 0; pointer-events: none; } .opt__box { width: 24px; height: 24px; border-radius: 6px; border: 2px solid #b8c0c4; background: #fff; flex: none; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 14px; transition: background-color .15s, border-color .15s; } .opt__head input:checked + .opt__box { background: var(--primary); border-color: var(--primary); } .opt__head input:checked + .opt__box::after { content: "✓"; } .opt__head input:focus-visible + .opt__box { outline: 2px solid var(--primary); outline-offset: 2px; } .opt__label { flex: 1; } .opt__hint { font-size: 13px; font-weight: 500; color: var(--muted); } .opt.is-disabled .opt__head { cursor: not-allowed; color: var(--muted-dark); } .opt.is-disabled .opt__box { background: var(--bg); border-color: var(--input-border); } .opt__note { margin: 0 0 0 36px; font-size: 13px; line-height: 1.45; color: var(--accent); } .opt.is-disabled .opt__note { color: var(--muted); } .opt__body { padding-left: 36px; display: flex; flex-direction: column; gap: 10px; } .opt__rows { display: flex; flex-direction: column; gap: 10px; } .opt__fields { display: flex; gap: 8px; flex-wrap: wrap; align-items: flex-end; } .opt__fields > .chips { flex: 1 1 100%; } .field { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--muted); flex: 1 1 120px; } .opt__remove { width: 44px; height: 44px; border-radius: 10px; border: 1px solid var(--input-border); background: #fff; font-size: 20px; line-height: 1; color: var(--muted); } .opt__remove:hover { border-color: var(--ink); color: var(--ink); } .btn-add { align-self: flex-start; padding: 0; border: 0; background: none; color: var(--primary); font-weight: 600; font-size: 14px; } .btn-add:hover { color: var(--ink); } .calc__side { flex: 1 1 300px; position: sticky; top: 140px; display: flex; flex-direction: column; gap: 12px; } .calc-sum { background: var(--ink); color: #fff; border-radius: 20px; padding: 28px; display: flex; flex-direction: column; gap: 16px; } .calc-sum__head { display: flex; flex-direction: column; gap: 4px; font-size: 14px; color: var(--on-dark); } .calc-sum__head b { color: #fff; font-size: 16px; font-weight: 600; } .calc-sum__lines { display: flex; flex-direction: column; border-top: 1px solid rgba(255, 255, 255, .1); } .calc-sum__lines div { display: flex; justify-content: space-between; gap: 12px; padding: 12px 0; border-bottom: 1px solid rgba(255, 255, 255, .1); font-size: 14px; } .calc-sum__lines span { color: var(--on-dark); } .calc-sum__lines b { font-weight: 600; white-space: nowrap; } .calc-sum__total { display: flex; flex-direction: column; gap: 2px; } .calc-sum__total span, .calc-sum__total small { font-size: 14px; color: var(--muted-dark); } .calc-sum__total small { font-size: 13px; line-height: 1.45; margin-top: 4px; } .calc-sum__total b { font-size: 44px; font-weight: 700; letter-spacing: -.03em; line-height: 1.05; } .calc-sum__msg { display: flex; gap: 12px; flex-wrap: wrap; font-size: 14px; color: var(--muted-dark); } .msg-text--light:hover { color: var(--light); } .calc-measure { background: #fff; border: 1px solid var(--border); border-radius: 20px; padding: 22px; display: flex; flex-direction: column; gap: 10px; } .calc-measure > b { font-size: 16px; } .calc-measure div { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; } .calc-measure div span { color: var(--muted); } .calc-measure .btn { align-self: flex-start; margin-top: 4px; } .calc-bar { display: none; } @media (max-width: 1000px) { .calc__side { position: static; } } @media (max-width: 900px) { .calc-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 61; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); background: var(--ink); color: #fff; box-shadow: 0 -4px 16px rgba(20, 24, 27, .15); transition: transform .2s; } .calc-bar.is-hidden { transform: translateY(110%); } .calc-bar__sum { display: flex; flex-direction: column; line-height: 1.15; } .calc-bar__sum span { font-size: 12px; color: var(--muted-dark); } .calc-bar__sum b { font-size: 22px; font-weight: 700; } .calc-bar .btn { height: 48px; } .has-buybar .float-msg { display: none; } body.has-buybar { padding-bottom: 72px; } } .calc__types-toggle { display: none; } @media (max-width: 640px) { .calc__types-toggle { display: inline; } .calc__block:not(.is-open) .type-opt:not(:has(input:checked)), .calc__block:not(.is-open) .calc__group:not(:has(input:checked)) { display: none; } .calc__card, .calc-sum { padding: 22px 18px; } .opt__body, .opt__note { padding-left: 0; margin-left: 0; } .calc-sum__total b { font-size: 36px; } } /* ========================================================================== Страницы доверия (0.4) ========================================================================== */ .section--sm { padding-top: 56px; } .stack-4 { display: flex; flex-direction: column; gap: 4px; } .stack-8 { display: flex; flex-direction: column; gap: 8px; } .grid--180 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 180px), 1fr)); } .grid--300 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); } .grid--420 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); } .h1--md { font-size: clamp(32px, 4vw, 52px); line-height: 1.05; max-width: 900px; } .h2--group { font-size: clamp(24px, 2.4vw, 32px); letter-spacing: -.02em; } .h3--lg { font-size: 26px; line-height: 1.15; letter-spacing: -.02em; } /* шапка страницы */ .page-head { padding-top: 20px; display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap; } .page-head__text { display: flex; flex-direction: column; gap: 14px; max-width: 760px; } .page-head--stack { flex-direction: column; align-items: flex-start; gap: 12px; } /* боковая навигация + контент */ .side-layout { padding-top: 40px; display: flex; flex-wrap: wrap; gap: 32px 40px; align-items: flex-start; } .side-layout__main { flex: 999 1 560px; min-width: 0; display: flex; flex-direction: column; gap: 40px; } .toc { flex: 1 1 240px; max-width: 300px; position: sticky; top: 140px; display: flex; flex-direction: column; gap: 4px; } .toc .kicker { margin-bottom: 8px; } .toc a, .toc button { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 44px; padding: 6px 14px; border-radius: 10px; border: 0; background: none; color: var(--ink); font-weight: 500; font-size: 15px; line-height: 1.3; text-align: left; } .toc a:hover, .toc button:hover { background: #fff; color: var(--primary); } .toc small { font-size: 13px; color: var(--muted-dark-2); } .toc button.is-active { background: var(--ink); color: #fff; } .toc button.is-active small { color: rgba(255, 255, 255, .6); } .toc--card { background: #fff; border: 1px solid var(--border); border-radius: 20px; padding: 20px; gap: 2px; } .toc--card a { min-height: 0; padding: 8px 10px; font-size: 14px; font-weight: 400; } .toc--card a:hover { background: var(--bg); color: var(--ink); } @media (max-width: 900px) { .toc { position: static; max-width: none; flex-direction: row; flex-wrap: nowrap; overflow-x: auto; gap: 8px; scrollbar-width: none; } .toc::-webkit-scrollbar { display: none; } .toc .kicker { display: none; } .toc a, .toc button { flex: none; white-space: nowrap; border: 1px solid var(--input-border); background: #fff; border-radius: 22px; } .toc--card { display: none; } } /* фильтр-чипсы со счётчиком */ .chip small { margin-left: 6px; font-size: 12px; opacity: .6; } .chips--scroll { margin-top: 28px; flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; } .chips--scroll::-webkit-scrollbar { display: none; } .chips--scroll .chip { flex: none; white-space: nowrap; } /* галерея + просмотр */ .works-group { padding-top: 48px; } .works-group__head, .landing-works__head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; } .gallery { gap: 12px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); } .landing-works .gallery { grid-template-columns: repeat(auto-fill, minmax(min(100%, 180px), 1fr)); } .gallery__item { position: relative; display: block; aspect-ratio: 4 / 3; border-radius: 14px; overflow: hidden; background: var(--ph); cursor: zoom-in; } .gallery__item--sq { aspect-ratio: 1; } .gallery__item img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .3s; } .gallery__item:hover img { transform: scale(1.03); } .landing-works { display: flex; flex-direction: column; margin-top: 24px; } .lb { position: fixed; inset: 0; z-index: 140; background: rgba(10, 12, 14, .9); display: flex; align-items: center; justify-content: center; gap: 12px; padding: 32px; } .lb figure { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 14px; max-width: 1100px; min-width: 0; } .lb img { max-width: 100%; max-height: 78vh; border-radius: 12px; object-fit: contain; background: #222; } .lb figcaption { display: flex; gap: 16px; color: #fff; font-size: 16px; } .lb__count { color: var(--muted-dark); } .lb__close, .lb__prev, .lb__next { flex: none; width: 48px; height: 48px; border-radius: 24px; border: 0; background: rgba(255, 255, 255, .1); color: #fff; font-size: 28px; line-height: 1; } .lb__close { position: absolute; top: 16px; right: 16px; } .lb__close:hover, .lb__prev:hover, .lb__next:hover { background: rgba(255, 255, 255, .2); } @media (max-width: 640px) { .lb { padding: 16px 8px; } .lb__prev, .lb__next { position: absolute; bottom: 24px; } .lb__prev { left: calc(50% - 60px); } .lb__next { right: calc(50% - 60px); } } /* отзывы */ .reviews-head { padding-top: 20px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 24px; align-items: end; } .reviews-head__links { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; } .link-card { background: #fff; border: 1px solid var(--border); border-radius: 16px; padding: 18px 20px; display: flex; flex-direction: column; gap: 4px; color: var(--ink); } .link-card:hover { border-color: var(--primary); color: var(--ink); } .link-card span { font-size: 13px; color: var(--muted); } .link-card b { font-size: 17px; } .link-card--dark { background: var(--ink); border-color: var(--ink); color: #fff; } .link-card--dark:hover { background: var(--text-2); color: #fff; } .link-card--dark span { color: var(--light); } .link-card--lg { border-radius: 20px; padding: 28px; gap: 10px; } .link-card--lg b { font-size: 22px; } .link-card--lg span { font-size: 15px; line-height: 1.5; color: var(--muted); } .link-card--lg em { margin-top: auto; font-style: normal; font-weight: 600; color: var(--primary); } .reviews-list { padding-top: 40px; display: flex; flex-direction: column; gap: 20px; } .masonry { columns: 3 340px; column-gap: 16px; } .rcard { break-inside: avoid; margin-bottom: 16px; background: #fff; border: 1px solid var(--border); border-radius: 20px; padding: 12px; display: flex; flex-direction: column; gap: 4px; } .rcard[hidden] { display: none; } .rcard__photo { position: relative; display: block; aspect-ratio: 16 / 10; border-radius: 14px; overflow: hidden; background: var(--ph); cursor: zoom-in; } .rcard__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .rcard__body { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 14px; } .rcard__top, .rcard__who { display: flex; justify-content: space-between; gap: 12px; align-items: center; flex-wrap: wrap; font-size: 14px; } .rcard__top .muted { font-size: 13px; } .rcard p { margin: 0; font-size: 16px; line-height: 1.55; text-wrap: pretty; white-space: pre-line; } .review-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); gap: 32px; } .review-form__done b { font-size: 22px; color: var(--primary); } .stars-pick { display: flex; gap: 2px; flex-direction: row-reverse; justify-content: flex-end; } .stars-pick label { position: relative; cursor: pointer; } .stars-pick input { position: absolute; opacity: 0; pointer-events: none; } .stars-pick span[aria-hidden] { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; font-size: 30px; color: var(--input-border); transition: color .1s; } .stars-pick label:has(input:checked) span[aria-hidden], .stars-pick label:has(input:checked) ~ label span[aria-hidden], .stars-pick label:hover span[aria-hidden], .stars-pick label:hover ~ label span[aria-hidden] { color: var(--accent); } .stars-pick label:has(input:focus-visible) { outline: 2px solid var(--primary); border-radius: 8px; } .file-pick--light { border-color: #b8c0c4; color: var(--muted); } .file-pick--light:hover { border-color: var(--ink); color: var(--ink); } .file-pick--accent { border-color: rgba(255, 255, 255, .6); color: #fff; } .file-pick--accent:hover { border-color: #fff; color: #fff; } /* цены */ .price-sec { display: flex; flex-direction: column; gap: 14px; } .price-sec__head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; flex-wrap: wrap; } .price-sec__head .muted { font-size: 14px; } .price-list--hover > div:hover { background: #f8f9f8; } .note-box { background: var(--tint); border-radius: 20px; padding: 28px 32px; font-size: 18px; line-height: 1.55; } .note-box a { font-weight: 600; } .content--prices { gap: 16px; } .content--prices h2 { margin-top: 24px; font-size: clamp(24px, 2.4vw, 32px); } .content--prices > h2:first-child { margin-top: 0; } .content--prices table { font-size: 16px; min-width: 0; } .content--prices td:last-child { font-weight: 600; white-space: nowrap; text-align: right; } .content--prices th:last-child { text-align: right; } .content--prices tbody tr:hover td { background: #f8f9f8; } /* услуги */ .services-grid { padding-top: 40px; } .pcard--service { border-radius: 20px; gap: 16px; } .pcard__img--wide { height: auto; aspect-ratio: 16 / 10; border-radius: 14px; } .pcard--service .pcard__body { padding: 0 12px 14px; gap: 8px; flex: 1; } .pcard__title { font-size: 22px; font-weight: 700; letter-spacing: -.015em; } .pcard--service .pcard__desc { font-size: 15px; line-height: 1.5; } .pcard__more { margin-top: auto; padding-top: 8px; font-size: 15px; font-weight: 600; color: var(--primary); } .dark-card { background: var(--ink); color: #fff; border-radius: 20px; padding: 32px; display: flex; flex-direction: column; gap: 12px; justify-content: space-between; min-height: 320px; } .dark-card:hover { background: var(--text-2); color: #fff; } .dark-card__body { display: flex; flex-direction: column; gap: 10px; } .dark-card__body b { font-size: 28px; letter-spacing: -.02em; line-height: 1.1; } .dark-card__body span { font-size: 15px; line-height: 1.5; color: var(--on-dark); } .dark-card__more { font-size: 15px; font-weight: 600; color: var(--light); } .steps-panel { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 28px; } .steps-panel .btn { align-self: flex-start; margin-top: 6px; } .step-line { display: flex; flex-direction: column; gap: 8px; border-top: 2px solid var(--primary); padding-top: 16px; } .step-line b { font-size: 18px; font-weight: 600; } .step-line .muted { font-size: 14px; line-height: 1.5; } .step-line--accent { border-top-color: var(--accent); } .step-line--accent .num { color: var(--accent); } /* о компании */ .about-hero { padding-top: 20px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 520px), 1fr)); gap: 24px; align-items: stretch; } .about-hero__text { display: flex; flex-direction: column; gap: 22px; padding: 24px 0; } .about-hero__lead { margin: 0; font-size: clamp(20px, 1.9vw, 26px); line-height: 1.4; letter-spacing: -.01em; font-weight: 500; text-wrap: pretty; } .about-hero__p, .content--lead { margin: 0; font-size: 17px; line-height: 1.6; color: var(--text-3); } .photo-block--tall { min-height: 440px; } .numlist--sm li { padding: 16px 0; font-size: 17px; } .photo-mosaic { display: grid; grid-template-columns: 1fr 1fr; grid-auto-rows: 220px; gap: 12px; } .photo-mosaic > div { position: relative; border-radius: 18px; overflow: hidden; background: var(--ph); } .photo-mosaic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .photo-mosaic__big { grid-row: span 2; } .clients--lg .clients__logo { height: 110px; } @media (max-width: 640px) { .photo-mosaic { grid-auto-rows: 150px; } } /* контакты */ .contacts-page { padding-top: 20px; } .contacts-page .h1 { margin-bottom: 28px; } .contacts-page__grid { display: flex; flex-wrap: wrap; gap: 16px; align-items: stretch; } .contacts-page__cards { flex: 1 1 380px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 12px; align-content: start; } .ccard { background: #fff; border: 1px solid var(--border); border-radius: 20px; padding: 24px; display: flex; flex-direction: column; gap: 8px; } .ccard--wide { grid-column: 1 / -1; gap: 14px; } .ccard--dark { background: var(--ink); border-color: var(--ink); color: #fff; padding: 28px; gap: 12px; } .ccard__phone { font-size: clamp(24px, 2.4vw, 30px); font-weight: 700; letter-spacing: -.02em; color: #fff; } .ccard__phone:hover { color: var(--light); } .ccard__big { font-size: 20px; font-weight: 600; color: var(--ink); overflow-wrap: anywhere; } .ccard__mail:hover { color: var(--primary); } .ccard__foot { margin-top: auto; font-size: 14px; } .ccard--wide b { font-size: 18px; } .map--tall { flex: 1.4 1 480px; min-height: 520px; border-radius: 20px; } @media (max-width: 640px) { .map--tall { min-height: 360px; } } /* партнёрам */ .dark-hero { background: var(--ink); color: #fff; border-radius: 28px; overflow: hidden; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 480px), 1fr)); margin-top: 20px; } .dark-hero__text { padding: clamp(28px, 4vw, 56px); display: flex; flex-direction: column; gap: 20px; justify-content: center; } .dark-hero__text .h1 { font-size: clamp(36px, 4.4vw, 58px); } .dark-hero__photo { position: relative; min-height: 380px; background: #232a2e; } .dark-hero__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .seg--wide { background: #fff; border: 1px solid var(--border); border-radius: 14px; flex-wrap: wrap; } .seg__btn { flex: 1 1 180px; height: 52px; border-radius: 10px; border: 0; background: transparent; color: var(--ink); font-weight: 600; font-size: 15px; } .seg__btn:hover { background: var(--bg); } .seg__btn.is-active { background: var(--ink); color: #fff; } .seg-panel .panel { border-radius: 24px; padding: 36px; gap: 20px; } .seg-panel .photo-block { min-height: 340px; } .checklist { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--divider); } .checklist li { display: flex; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--divider); font-size: 16px; line-height: 1.45; } .checklist li::before { content: "✓"; flex: none; color: var(--primary); font-weight: 700; } .checklist--dark { border-top-color: rgba(255, 255, 255, .12); } .checklist--dark li { border-bottom-color: rgba(255, 255, 255, .12); } .checklist--dark li::before { color: var(--light); } .checklist--minus li::before { content: "—"; color: var(--muted); font-weight: 400; } .card > b { font-size: 19px; } .card .kicker + b { font-size: 20px; } /* оплата */ .big-num { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; } .big-num b { font-size: clamp(56px, 7vw, 96px); font-weight: 700; letter-spacing: -.04em; line-height: 1; } .big-num span { font-size: 18px; color: var(--on-dark); } .warranty-cta { margin-top: auto; } .warranty-cta > b { font-size: 18px; } .certs__item { position: relative; display: block; aspect-ratio: 3 / 4; border-radius: 14px; overflow: hidden; background: #fff; border: 1px solid var(--border); cursor: zoom-in; } .certs__item img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; } .certs-row { display: flex; gap: 12px; flex-wrap: wrap; } .certs-row a { position: relative; width: 110px; height: 150px; border-radius: 8px; overflow: hidden; background: #232a2e; cursor: zoom-in; } .certs-row img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } /* вопросы и ответы */ .faq-head { padding-top: 20px; display: flex; flex-direction: column; gap: 20px; } .faq-search { max-width: 640px; height: 60px; padding: 0 22px; border-radius: 14px; font-size: 17px; } .faq--full .faq__item summary > span { display: flex; flex-direction: column; gap: 4px; } .faq__cat { font-family: var(--mono); font-size: 12px; font-weight: 400; letter-spacing: .08em; text-transform: uppercase; color: var(--primary); } .faq__a { margin: 0 0 22px; font-size: 16px; color: var(--muted); gap: 12px; } .faq__a > * { max-width: 720px; } .faq-empty { margin: 0; padding: 28px 0; font-size: 16px; } /* документ (политика) */ .doc-card { max-width: 820px; background: #fff; border: 1px solid var(--border); border-radius: 24px; padding: clamp(24px, 4vw, 48px); } .content--doc { gap: 12px; font-size: 16px; } .content--doc h2 { margin-top: 20px; font-size: 22px; line-height: 1.25; letter-spacing: -.01em; } .content--doc > h2:first-child { margin-top: 0; } .ccard .msg-block { flex: none; white-space: nowrap; } @media (max-width: 640px) { .ccard .btn-row > * { flex: 1 1 100%; } } /* ========================================================================== Зеркала и карточка товара (0.5) ========================================================================== */ .grid--220 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); } .grid--240 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); } .grid--250 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); } .stack-10 { display: flex; flex-direction: column; gap: 10px; } .h3--xs { font-size: 18px; } .muted-dark { color: var(--muted-dark); } /* посадочная: первый экран */ .hero-front--landing { padding-top: 20px; } .hero-front__promo { margin: 0; font-size: 22px; font-weight: 600; color: #f3a37a; } .checks { display: flex; gap: 8px 24px; flex-wrap: wrap; font-size: 14px; color: var(--on-dark); } .hero-mosaic { position: relative; display: grid; grid-template-columns: 1.3fr 1fr; grid-template-rows: 1fr 1fr; gap: 12px; min-height: 480px; } .hero-mosaic > img { width: 100%; height: 100%; object-fit: cover; border-radius: 24px; display: block; background: var(--ph); } .hero-mosaic > img:first-child { grid-row: span 2; } .price-badge--left { right: auto; left: 20px; } .hero-front--landing .usp { margin-top: 16px; } @media (max-width: 640px) { .hero-mosaic { min-height: 340px; gap: 8px; } .hero-mosaic > img { border-radius: 16px; } } /* виды */ .type-card { position: relative; min-height: 400px; border-radius: 20px; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; color: #fff; background: var(--ink); } .type-card:hover { color: #fff; } .type-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .4s; } .type-card:hover img { transform: scale(1.04); } .type-card__price { position: absolute; left: 16px; top: 16px; padding: 6px 12px; border-radius: 14px; background: #fff; color: var(--ink); font-size: 14px; font-weight: 700; } .type-card__body { position: relative; padding: 80px 24px 24px; background: linear-gradient(to top, rgba(20, 24, 27, .92), rgba(20, 24, 27, 0)); display: flex; flex-direction: column; gap: 8px; } .type-card__body b { font-size: 22px; } .type-card__body span { font-size: 15px; line-height: 1.45; color: #e3e7e9; } .type-links { margin-top: 16px; } .type-link { display: flex; align-items: center; gap: 16px; padding: 10px; background: #fff; border: 1px solid var(--border); border-radius: 16px; color: var(--ink); } .type-link:hover { border-color: var(--primary); color: var(--ink); } .type-link__img { position: relative; width: 72px; height: 72px; border-radius: 10px; overflow: hidden; flex: none; background: #eef1f2; } .type-link__img img { width: 100%; height: 100%; object-fit: cover; } .type-link b { font-weight: 600; font-size: 16px; } .type-link .muted { font-size: 13px; } @media (max-width: 640px) { .type-card { min-height: 300px; } } /* каталог */ .mcard { background: #fff; border: 1px solid var(--border); border-radius: 18px; padding: 10px; display: flex; flex-direction: column; gap: 14px; transition: border-color .2s, transform .2s; } .mcard:hover { border-color: var(--primary); transform: translateY(-2px); } .mcard__img { position: relative; display: block; aspect-ratio: 1; border-radius: 12px; overflow: hidden; background: #4a4d52; } .mcard__img img { width: 100%; height: 100%; object-fit: cover; display: block; } .mcard__badge { position: absolute; left: 10px; top: 10px; padding: 4px 10px; border-radius: 12px; background: rgba(255, 255, 255, .92); color: var(--ink); font-size: 12px; font-weight: 600; } .mcard__body { padding: 0 8px; display: flex; flex-direction: column; gap: 4px; flex: 1; } .mcard__body .muted { font-size: 13px; } .mcard__name { font-weight: 600; font-size: 17px; letter-spacing: -.01em; color: var(--ink); } .mcard__name:hover { color: var(--primary); } .mcard__foot { padding: 0 8px 8px; display: flex; justify-content: space-between; align-items: center; gap: 10px; } .mcard__foot b { font-size: 20px; letter-spacing: -.01em; } .mcard__order:hover { background: var(--accent) !important; } .catalog__more { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; margin-top: 28px; } /* квиз с картинками и менеджером */ .quiz--aside { display: flex; flex-wrap: wrap; } .quiz--aside .quiz__body { flex: 999 1 480px; min-width: 0; min-height: 520px; } .quiz__sub { margin: 0; font-size: 16px; color: var(--on-dark); } .quiz__opts--img { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; } .quiz__opt--img { flex-direction: column; align-items: stretch; gap: 10px; padding: 8px; border-radius: 14px; border-width: 2px; border-color: transparent; } .quiz__opt--img > span:last-child { padding: 0 4px 4px; } .quiz__opt--img:has(input:checked) { background: rgba(255, 255, 255, .04); border-color: var(--accent); } .quiz__pic { position: relative; display: block; width: 100%; aspect-ratio: 4 / 3; border-radius: 8px; overflow: hidden; background: #232a2e; } .quiz__pic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .quiz__pic .ph { background: #232a2e; color: var(--muted-dark); } .quiz__progress--bottom { margin-top: auto; } .quiz__manager { flex: 1 1 280px; background: #1c2125; padding: 32px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 14px; justify-content: center; } .quiz__avatar { width: 112px; height: 112px; border-radius: 56px; overflow: hidden; background: #2a3135; } .quiz__avatar img { width: 100%; height: 100%; object-fit: cover; } .quiz__manager p { margin: 0; font-size: 14px; line-height: 1.5; color: var(--on-dark); } .quiz__perks-box { display: flex; flex-direction: column; gap: 8px; width: 100%; margin-top: 8px; } .quiz__perks-box span { padding: 12px; border-radius: 10px; background: rgba(255, 255, 255, .05); font-size: 14px; } @media (max-width: 640px) { .quiz__opts--img { grid-template-columns: 1fr 1fr; } .quiz--aside .quiz__body { min-height: 0; } } /* калькулятор полотна */ .mcalc { background: var(--ink); color: #fff; border-radius: 24px; overflow: hidden; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr)); } .mcalc__form { padding: 44px; display: flex; flex-direction: column; gap: 22px; } .mcalc__size { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .mcalc__size label, .mcalc__label { display: flex; flex-direction: column; gap: 8px; font-size: 13px; color: var(--muted-dark); } .mcalc__size .input { font-size: 18px; } .mcalc__result { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; padding-top: 20px; border-top: 1px solid rgba(255, 255, 255, .1); } .mcalc__price { font-size: 40px; font-weight: 700; letter-spacing: -.02em; } .mcalc__note { font-size: 13px; max-width: 360px; } .mcalc a { color: var(--light); } .mcalc__prices { padding: 44px; background: #1c2125; display: flex; flex-direction: column; gap: 18px; } .mcalc__table { border-top: 1px solid rgba(255, 255, 255, .1); } .mcalc__table > div { display: flex; justify-content: space-between; gap: 12px; padding: 16px 0; font-size: 17px; border-bottom: 1px solid rgba(255, 255, 255, .1); } .mcalc__table .mcalc__th { padding: 12px 0; font-size: 13px; color: var(--muted-dark); } .mcalc__prices p { margin: 0; font-size: 15px; line-height: 1.5; } .mcalc__call { margin-top: auto; color: #fff !important; font-size: 15px; } @media (max-width: 640px) { .mcalc__form, .mcalc__prices { padding: 28px 22px; } .mcalc__price { font-size: 32px; } } /* почему мы + сегменты */ .why-lead { margin: 0; font-size: clamp(22px, 2.2vw, 30px); line-height: 1.3; letter-spacing: -.015em; font-weight: 500; text-wrap: pretty; } .seg-box { background: #fff; border: 1px solid var(--border); border-radius: 20px; overflow: hidden; display: flex; flex-direction: column; } .seg-box__tabs { display: flex; gap: 4px; padding: 8px; background: var(--bg); border-bottom: 1px solid var(--border); overflow-x: auto; scrollbar-width: none; } .seg-box__tabs .seg__btn { flex: 1 0 auto; height: 44px; padding: 0 16px; border-radius: 12px; white-space: nowrap; font-size: 14px; } .seg-box__panel { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); } .seg-box__panel[hidden] { display: none; } .seg-box__text { padding: 28px; display: flex; flex-direction: column; gap: 14px; } .seg-box__text .btn { margin-top: auto; align-self: flex-start; } .seg-box__img { position: relative; min-height: 260px; background: #eef1f2; } .seg-box__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .checklist--plain { border-top: 0; } .checklist--plain li { padding: 4px 0; border-bottom: 0; font-size: 15px; } /* обработка и полотно */ .usp--inner { margin-top: 0; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); border-radius: 14px; } .usp--inner > div { padding: 18px; } .canvas-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; } .canvas-list div { display: flex; align-items: center; gap: 12px; padding: 10px; border: 1px solid var(--border); border-radius: 12px; font-size: 14px; font-weight: 500; } .canvas-list i { width: 36px; height: 36px; border-radius: 8px; flex: none; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .06); } /* проекты */ .projects { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); grid-auto-rows: 220px; gap: 12px; } .projects .gallery__item { aspect-ratio: auto; height: 100%; border-radius: 18px; } .projects .gallery__item:first-child { grid-row: span 2; } /* другая продукция + консультация */ .other-links { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 4px 20px; font-size: 15px; font-weight: 500; } .other-links a { padding: 8px 0; border-bottom: 1px solid var(--divider); color: var(--ink); } .other-links a:hover { color: var(--primary); } .consult-dark { background: var(--ink); color: #fff; border-radius: 24px; overflow: hidden; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); } .consult-dark > img { width: 100%; height: 100%; min-height: 260px; object-fit: cover; display: block; } .consult-dark__body { padding: 32px; display: flex; flex-direction: column; gap: 14px; } .consult-dark__body p { margin: 0; font-size: 15px; line-height: 1.5; color: var(--on-dark); } .consult-dark__phone { font-size: 24px; font-weight: 700; color: #fff; } .consult-dark__phone:hover { color: var(--light); } .consult-dark__body .muted-dark { font-size: 14px; } .consult-dark__body .btn { margin-top: auto; align-self: flex-start; } /* модалка заказа */ .modal__box--wide { max-width: 520px; } .order-sum { display: flex; gap: 14px; align-items: center; padding: 12px; border-radius: 14px; background: var(--bg); } .order-sum__img { width: 56px; height: 70px; border-radius: 8px; background: var(--ph) center / cover; flex: none; } .order-sum__text { display: flex; flex-direction: column; gap: 2px; font-size: 14px; min-width: 0; } .order-sum__text b:first-child { font-size: 15px; } .chips--fill .chip { flex: 1 1 120px; justify-content: center; height: 44px; border-radius: 10px; font-size: 14px; } .modal__note { font-size: 13px; color: var(--muted); text-align: center; } /* карточка товара */ .product { padding-top: 20px; display: flex; flex-wrap: wrap; gap: 32px; align-items: flex-start; } .product__gallery { flex: 1 1 520px; min-width: 0; display: flex; gap: 12px; } .product__thumbs { display: flex; flex-direction: column; gap: 10px; flex: none; } .product__thumb { width: 76px; height: 96px; border-radius: 12px; border: 0; padding: 0; background: var(--ph) center / cover; } .product__thumb.is-active { box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--primary); } .product__main { flex: 1; min-width: 0; position: relative; aspect-ratio: 4 / 5; border-radius: 24px; overflow: hidden; background: var(--ph); } .product__main a { position: absolute; inset: 0; cursor: zoom-in; } .product__main img { width: 100%; height: 100%; object-fit: cover; } .product__badge { position: absolute; left: 16px; top: 16px; padding: 6px 12px; border-radius: 14px; background: #fff; font-size: 13px; font-weight: 600; pointer-events: none; } .product__info { flex: 1 1 420px; min-width: 0; display: flex; flex-direction: column; gap: 24px; position: sticky; top: 140px; } .product__meta { font-size: 13px; color: var(--muted); } .product__lead { color: var(--success); font-weight: 600; } .h1--product { font-size: clamp(30px, 3.4vw, 44px); line-height: 1.05; letter-spacing: -.025em; } .product__short { font-size: 16px; line-height: 1.5; color: var(--muted); } .product__short p { margin: 0 0 8px; } .product__price { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; } .product__price b { font-size: 40px; font-weight: 700; letter-spacing: -.03em; } .product__price .muted { font-size: 14px; } .attr { display: flex; flex-direction: column; gap: 10px; } .attr__title { font-size: 14px; font-weight: 600; } .attr__title .muted { font-weight: 400; } .attr .chip span { display: inline-flex; align-items: center; gap: 8px; } .swatch { width: 14px; height: 14px; border-radius: 7px; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .15); flex: none; } .product__custom { display: flex; gap: 10px; align-items: center; } .product__custom .input { flex: 1; min-width: 0; height: 52px; } .product__custom span { color: var(--muted); } .product__buy { display: flex; gap: 10px; flex-wrap: wrap; } .qty { display: flex; align-items: center; height: 56px; border-radius: 12px; border: 1px solid var(--input-border); background: #fff; } .qty button { width: 48px; height: 100%; border: 0; background: none; font-size: 22px; color: var(--ink); } .qty span { min-width: 28px; text-align: center; font-weight: 600; font-size: 17px; } .product__order { flex: 1 1 200px; } .btn--msg-outline { border-color: var(--primary); color: var(--primary); background: transparent; font-size: 15px; } .btn--msg-outline.is-max { border-color: var(--max); color: var(--max); } .btn--msg-outline:hover { background: var(--primary); color: #fff; } .btn--msg-outline.is-max:hover { background: var(--max); color: #fff; } .usp--sm { margin-top: 0; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); } .usp--sm > div { padding: 14px 16px; gap: 2px; } .usp--sm b { font-size: 14px; } .usp--sm span { font-size: 13px; } .product-tabs { padding-top: 64px; display: flex; flex-direction: column; gap: 24px; } .tabs-line { display: flex; gap: 4px; border-bottom: 1px solid var(--input-border); overflow-x: auto; scrollbar-width: none; } .tabs-line button { height: 52px; padding: 0 18px; border: 0; background: none; font-weight: 600; font-size: 16px; color: var(--muted); white-space: nowrap; } .tabs-line button.is-active { color: var(--ink); box-shadow: inset 0 -2px 0 var(--primary); } .product-tabs .content { max-width: 820px; } .spec-table { max-width: 820px; background: #fff; border: 1px solid var(--border); border-radius: 16px; overflow: hidden; } .spec-table > div { display: flex; justify-content: space-between; gap: 16px; padding: 14px 20px; border-top: 1px solid var(--divider); font-size: 15px; } .spec-table > div:first-child { border-top: 0; } .spec-table b { text-align: right; font-weight: 600; } .del-cards { max-width: 1100px; } .del-cards .card { padding: 22px; gap: 6px; } .pcard__img--tall { height: auto; aspect-ratio: 4 / 5; } @media (max-width: 1000px) { .product__info { position: static; } } @media (max-width: 640px) { .product__gallery { flex-direction: column-reverse; } .product__thumbs { flex-direction: row; overflow-x: auto; } .product__thumb { width: 64px; height: 80px; flex: none; } .product__main { border-radius: 18px; } .product__price b { font-size: 32px; } .product__buy .btn--msg-outline { flex: 1 1 100%; } } .demo-note { margin: 0 0 20px; padding: 12px 16px; border-radius: 12px; border: 1px dashed var(--accent); background: #fff6f1; color: var(--accent-hover); font-size: 14px; } /* ---------- Скинали (0.3) ---------- */ .hero-price { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; } .hero-price span { font-size: 15px; color: var(--on-dark); } .hero-price b { font-size: 36px; font-weight: 700; letter-spacing: -.02em; } .quick-links { margin-top: 16px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 12px; } .quick-link { background: #fff; border: 1px solid var(--border); border-radius: 16px; padding: 22px; display: flex; flex-direction: column; gap: 6px; color: var(--ink); text-align: left; font: inherit; cursor: pointer; } .quick-link:hover { border-color: var(--primary); color: var(--ink); } .quick-link b { font-size: 18px; font-weight: 700; } .quick-link span { font-size: 14px; color: var(--muted); } .stat-card { padding: 26px; gap: 10px; } .stat-card__num { font-size: 40px; font-weight: 700; letter-spacing: -.03em; line-height: 1.05; color: var(--primary); } .stat-card b { font-size: 17px; font-weight: 600; } .stat-card .muted { font-size: 14px; line-height: 1.5; } .variant { background: #fff; border: 1px solid var(--border); border-radius: 20px; padding: 32px; display: flex; flex-direction: column; gap: 14px; } .variant--dark { background: var(--ink); border-color: var(--ink); color: #fff; } .variant .h3 { margin: 0; font-size: 24px; } .variant__tag { align-self: flex-start; padding: 6px 12px; border-radius: 14px; background: var(--tint); color: var(--primary); font-size: 13px; font-weight: 600; } .variant__tag--accent { background: var(--accent); color: #fff; } .variant__list { display: flex; flex-direction: column; gap: 10px; font-size: 15px; line-height: 1.5; color: var(--text-3); flex: 1; } .variant--dark .variant__list { color: var(--on-dark); } .variant .btn { align-self: flex-start; } .sk-popular { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 12px; } .sk-pop { background: #fff; border: 1px solid var(--border); border-radius: 16px; overflow: hidden; display: flex; flex-direction: column; color: var(--ink); } .sk-pop:hover { border-color: var(--primary); color: var(--ink); } .sk-pop img { width: 100%; aspect-ratio: 700 / 260; object-fit: cover; background: var(--ph); display: block; } .sk-pop__body { padding: 14px 16px; display: flex; flex-direction: column; gap: 2px; font-size: 14px; } .sk-pop__body b { font-size: 16px; } /* Каталог */ .price-inline { display: flex; flex-direction: column; gap: 2px; padding: 14px 20px; border-radius: 14px; background: var(--tint); } .price-inline span { font-size: 13px; color: var(--muted); } .price-inline b { font-size: 24px; font-weight: 700; letter-spacing: -.02em; } .sk-side { flex: 1 1 240px; min-width: 0; max-width: 300px; display: flex; flex-direction: column; gap: 28px; position: sticky; top: 140px; max-height: calc(100vh - 160px); overflow-y: auto; scrollbar-width: thin; } .sk-side .toc { position: static; max-width: none; } .toc a.is-active { background: var(--ink); color: #fff; } .toc a.is-active small { color: rgba(255, 255, 255, .6); } .sk-colors { display: flex; flex-wrap: wrap; gap: 8px; } .sk-color { width: 32px; height: 32px; border-radius: 50%; border: 1px solid rgba(20, 24, 27, .15); box-shadow: inset 0 0 0 2px #fff; } .sk-color:hover, .sk-color.is-active { outline: 2px solid var(--ink); outline-offset: 2px; } .sk-main { gap: 24px; } .sk-summary { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; font-size: 15px; } .sk-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: 16px; } .sk-card { background: #fff; border: 1px solid var(--border); border-radius: 16px; overflow: hidden; display: flex; flex-direction: column; } .sk-card__img { display: block; aspect-ratio: 700 / 130; background: var(--ph); cursor: zoom-in; overflow: hidden; } .sk-card__img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s; } .sk-card__img:hover img { transform: scale(1.03); } .sk-card__foot { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 12px; } .sk-card__art { font-size: 14px; color: var(--muted); } .sk-card__art b { color: var(--ink); font-weight: 600; } .sk-card__btns { display: flex; gap: 8px; flex-wrap: wrap; } .sk-card__btns .btn { flex: 1 1 140px; } .sk-more { align-self: center; min-width: 240px; } .sk-more.is-loading { opacity: .6; pointer-events: none; } .note-box { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; padding: 22px 24px; border-radius: 16px; background: var(--tint); } .note-box span { font-size: 14px; color: var(--muted); } .sk-seo { max-width: 900px; font-size: 15px; color: var(--text-3); } /* Примерка */ .sk-try { padding-top: 32px; display: flex; flex-wrap: wrap; gap: 24px; align-items: flex-start; } .sk-try__main { flex: 999 1 560px; min-width: 0; display: flex; flex-direction: column; gap: 16px; } .sk-try__side { flex: 1 1 320px; min-width: 0; display: flex; flex-direction: column; gap: 16px; } .sk-stage { position: relative; border-radius: 20px; overflow: hidden; background: var(--ph); } .sk-stage__kitchen { position: relative; z-index: 1; display: block; width: 100%; height: auto; } .sk-stage__panel { position: absolute; z-index: 0; top: var(--sk-top); left: var(--sk-left); width: var(--sk-width); height: auto; display: block; } .sk-try__bar { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; padding: 18px 20px; background: #fff; border: 1px solid var(--border); border-radius: 16px; } .panel--sm { padding: 22px; gap: 14px; border-radius: 18px; } .chips--sm { gap: 6px; } .chips--sm .chip { height: 34px; padding: 0 12px; font-size: 13px; } .sk-kitchens { display: flex; flex-wrap: wrap; gap: 8px; } .sk-kitchen { position: relative; cursor: pointer; } .sk-kitchen input { position: absolute; opacity: 0; pointer-events: none; } .sk-kitchen span { display: block; width: 34px; height: 34px; border-radius: 50%; border: 1px solid rgba(20, 24, 27, .15); box-shadow: inset 0 0 0 2px #fff; } .sk-kitchen input:checked + span { outline: 2px solid var(--ink); outline-offset: 2px; } .sk-kitchen input:focus-visible + span { outline: 2px solid var(--primary); outline-offset: 2px; } .sk-thumbs { display: grid; grid-template-columns: 1fr; grid-auto-rows: max-content; gap: 8px; max-height: 420px; overflow-y: auto; padding-right: 4px; scrollbar-width: thin; } .sk-thumbs.is-loading { opacity: .5; } .sk-thumb { display: block; padding: 0; border: 2px solid transparent; border-radius: 10px; overflow: hidden; background: var(--ph); cursor: pointer; } .sk-thumb img { width: 100%; height: auto; aspect-ratio: 700 / 130; object-fit: cover; display: block; } .sk-thumb:hover { border-color: var(--input-border); } .sk-thumb.is-active { border-color: var(--primary); } .sk-try__hint { font-size: 13px; } /* Калькулятор */ .sk-picked { display: flex; gap: 14px; align-items: center; padding: 12px; border-radius: 14px; background: var(--bg); font-size: 14px; } .sk-picked img { width: 160px; aspect-ratio: 700 / 130; object-fit: cover; border-radius: 8px; flex: none; background: var(--ph); } .sk-picked--empty { justify-content: center; min-height: 56px; border: 1px dashed var(--input-border); background: none; color: var(--primary); font-weight: 600; } .sk-panel { display: flex; align-items: center; gap: 10px; } .sk-panel[hidden] { display: none; } .sk-panel__n { flex: 0 0 72px; font-size: 14px; font-weight: 600; color: var(--muted); } .sk-panel .calc__num { height: 48px; font-size: 18px; } .sk-panel > span[aria-hidden] { color: var(--muted); } .calc__card--opts .opt { display: flex; flex-direction: column; gap: 10px; padding: 16px 0; border-top: 1px solid var(--divider); } .opt__title { font-weight: 600; font-size: 16px; display: flex; gap: 8px; flex-wrap: wrap; align-items: baseline; } .field--inline { flex: none; max-width: 220px; } @media (max-width: 900px) { .sk-side { position: static; max-width: none; max-height: none; overflow: visible; } .sk-side { gap: 18px; } /* Категории, теги и категории примерки — одной лентой с прокруткой, чтобы картинки были на первом экране */ .sk-cats, .sk-main > .chips, .sk-try .chips--sm { flex-direction: row; flex-wrap: nowrap; gap: 6px; overflow-x: auto; scrollbar-width: none; } .sk-cats, .sk-main > .chips { margin-right: calc(-1 * var(--gutter)); padding-right: var(--gutter); } .sk-cats::-webkit-scrollbar, .sk-main > .chips::-webkit-scrollbar, .sk-try .chips--sm::-webkit-scrollbar { display: none; } .sk-cats .kicker { display: none; } .sk-cats a { flex: none; min-height: 40px; padding: 4px 14px; border: 1px solid var(--input-border); border-radius: 20px; font-size: 14px; white-space: nowrap; } .sk-main > .chips .chip, .sk-try .chips--sm .chip { flex: none; white-space: nowrap; } .sk-cats a small { display: none; } .sk-thumbs { grid-template-columns: 1fr 1fr; max-height: 320px; } } @media (max-width: 640px) { .hero-price b { font-size: 28px; } .stat-card__num { font-size: 32px; } .variant { padding: 24px; } .sk-try__bar .btn-row > * { flex: 1 1 100%; } .sk-picked { flex-direction: column; align-items: flex-start; } .sk-picked img { width: 100%; } .sk-panel__n { flex-basis: 100%; } .sk-panel { flex-wrap: wrap; } .sk-panel .calc__num { flex: 1 1 0; } } /* Узкие телефоны (≤ 380 px): шапка и длинные кнопки не вылезают за экран */ @media (max-width: 380px) { .hdr__top { gap: 10px; } .logo { flex: 0 1 auto; min-width: 0; gap: 8px; } .logo__mark { width: 34px; height: 34px; } .logo__mark i { width: 24px; height: 24px; } .logo__name { font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .logo__text { min-width: 0; } .hdr__phone-icon, .hdr__burger { width: 44px; height: 44px; } .btn { white-space: normal; height: auto; min-height: 48px; padding-top: 10px; padding-bottom: 10px; } .btn-row > .btn { flex: 1 1 100%; } } /* ---------- Старый контент страниц (из прошлой темы) ---------- */ /* Плитки разделов .sub_menu > .sub_menu_left > a > img + подпись — карточками */ .content .sub_menu { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } .content .sub_menu + .sub_menu { margin-top: -4px; } .content .sub_menu_left:empty { display: none; } .content .sub_menu_left { min-width: 0; } .content .sub_menu_left a { height: 100%; display: flex; flex-direction: column; gap: 12px; padding: 0 16px 16px; background: #fff; border: 1px solid var(--border); border-radius: 16px; overflow: hidden; color: var(--ink); font-weight: 600; font-size: 16px; line-height: 1.3; text-decoration: none; transition: border-color .15s, box-shadow .15s; } .content .sub_menu_left a:hover { border-color: var(--primary); box-shadow: 0 6px 18px rgba(20, 24, 27, .08); color: var(--ink); } .content .sub_menu_left a::after { content: "Подробнее →"; margin-top: auto; font-size: 14px; color: var(--primary); } .content .sub_menu_left img { display: block; width: calc(100% + 32px); max-width: none; margin: 0 -16px; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 0; background: var(--ph); } .content .sub_menu_left br { display: none; } /* Галереи NextGEN и стандартные галереи WordPress */ .content .ngg-galleryoverview, .content .gallery { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(min(100%, 160px), 1fr)); gap: 10px; } .content .ngg-gallery-thumbnail-box, .content .gallery-item { width: auto !important; float: none !important; margin: 0 !important; } .content .ngg-gallery-thumbnail img, .content .gallery-item img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 12px; border: 0 !important; padding: 0 !important; } .content .ngg-clear, .content .ngg-navigation br { display: none; } /* Картинки с выравниванием из старого редактора */ .content img { max-width: 100%; height: auto; } .content .alignleft { float: left; margin: 4px 24px 12px 0; } .content .alignright { float: right; margin: 4px 0 12px 24px; } .content .aligncenter { display: block; margin-left: auto; margin-right: auto; } @media (max-width: 640px) { .content .alignleft, .content .alignright { float: none; margin: 0 0 12px; } } /* Формы Contact Form 7 в тексте */ .content .wpcf7 input[type=text], .content .wpcf7 input[type=email], .content .wpcf7 input[type=tel], .content .wpcf7 textarea { width: 100%; height: 52px; padding: 0 16px; border: 1px solid var(--input-border); border-radius: 12px; font: inherit; font-size: 16px; background: #fff; } .content .wpcf7 textarea { height: 120px; padding: 12px 16px; } .content .wpcf7 input[type=submit] { height: 52px; padding: 0 24px; border: 0; border-radius: 12px; background: var(--accent); color: #fff; font: inherit; font-weight: 600; cursor: pointer; } .content .wpcf7 input[type=submit]:hover { background: var(--accent-hover); } /* Телефон: в старых блоках по 3 плитки — делаем компактный список «фото слева, название справа» */ @media (max-width: 720px) { .content .sub_menu { grid-template-columns: 1fr; gap: 8px; } .content .sub_menu + .sub_menu { margin-top: -12px; } .content .sub_menu_left a { flex-direction: row; align-items: center; gap: 14px; padding: 0 14px 0 0; font-size: 15px; min-height: 76px; } .content .sub_menu_left a::after { content: "→"; margin: 0 0 0 auto; padding-left: 8px; } .content .sub_menu_left img { width: 104px; flex: none; align-self: stretch; margin: 0; aspect-ratio: auto; height: 76px; } } /* ---------- Полезные статьи ---------- */ .article-group__title { margin: 0 0 20px; } .acard .pcard__img { height: 200px; } .acard .pcard__name { font-size: 17px; line-height: 1.3; } .acard .pcard__desc { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .acard__more { margin-top: 4px; font-size: 14px; font-weight: 600; color: var(--primary); } .article { padding-top: 20px; display: flex; flex-wrap: wrap; gap: 32px 40px; align-items: flex-start; } .article__main { flex: 999 1 560px; min-width: 0; display: flex; flex-direction: column; gap: 16px; } .article__title { margin: 0; } .article__date { font-size: 14px; } .article__content { margin-top: 8px; } .article__cta { margin-top: 16px; } .article__side { flex: 1 1 300px; min-width: 0; } .article__side .side-cta__btn { border: 0; font: inherit; font-weight: 600; text-align: left; cursor: pointer; } @media (max-width: 1000px) { .article__side { position: static; } } /* Старые блоки текстов: выделенный абзац, обтекание фото, кнопки, таблица-сетка с иконками */ .content .important_div { padding: 18px 22px; border-left: 4px solid var(--primary); border-radius: 0 14px 14px 0; background: var(--tint); color: var(--ink); font-size: 16px; line-height: 1.55; } .content .important_div span { font-weight: 700; color: var(--accent); white-space: nowrap; } .content .separator, .content .clear { clear: both; height: 0; } .content .img_left, .content .img_right, .content .img_container_right { max-width: 45%; } .content .img_left { float: left; margin: 4px 24px 12px 0; } .content .img_right, .content .img_container_right { float: right; margin: 4px 0 12px 24px; } .content .img_left img, .content .img_right img, .content .img_container_right img { display: block; width: 100%; height: auto; border-radius: 14px; } .content .ngg-gallery-singlepic-image { max-width: 100% !important; } .content > h2, .content > h3, .content > .table-wrap, .content > .ul_page, .content > .btn_on_page:first-of-type { clear: both; } .content .btn_on_page { display: inline-block; margin: 0 8px 8px 0; } .content .btn_on_page a { display: inline-flex; align-items: center; gap: 8px; height: 48px; padding: 0 20px; border-radius: 12px; border: 1px solid var(--input-border); background: #fff; color: var(--ink); font-size: 15px; font-weight: 600; text-decoration: none; } .content .btn_on_page a:hover { border-color: var(--ink); color: var(--ink); } .content .legacy-btns { display: flex; flex-wrap: wrap; gap: 8px; } .content .legacy-btns .btn_on_page { margin: 0; } .content .legacy-btns .btn_on_page:first-child a { background: var(--accent); border-color: var(--accent); color: #fff; } .content .legacy-gallery { max-width: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); gap: 12px; } .content .legacy-gallery .img_left, .content .legacy-gallery .img_right { float: none; max-width: none; margin: 0; } .content .legacy-gallery img { aspect-ratio: 4 / 3; object-fit: cover; } .content .btn_on_page br { display: none; } .content .table-wrap:has(.table_block) { overflow: visible; } .content table.table_block { min-width: 0; } .content table.table_block tbody { display: block; } .content table.table_block tr { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); gap: 12px; } .content table.table_block td { display: block; width: auto !important; padding: 0 !important; border: 0 !important; background: none !important; } .content .block_item { height: 100%; padding: 18px; border: 1px solid var(--border); border-radius: 16px; background: #fff; display: flex; flex-direction: column; gap: 8px; font-size: 15px; line-height: 1.5; } .content .block_item img { width: 40px; height: 40px; object-fit: contain; border-radius: 0; } .content .block_item h2, .content .block_item .mainH { margin: 0; font-size: 17px; line-height: 1.3; letter-spacing: 0; } .content .block_item p { margin: 0; } .content .block_item p:empty { display: none; } @media (max-width: 640px) { .content .img_left, .content .img_right, .content .img_container_right { float: none; max-width: 100%; margin: 0 0 12px; } .content .legacy-btns .btn_on_page { flex: 1 1 100%; } .content .btn_on_page a { width: 100%; justify-content: center; } .content .legacy-gallery { grid-template-columns: 1fr 1fr; } } /* Простая страница и старые блоки: прайс .price_opacity_bg, карточки .block_icon_header_three */ .page-plain__lead { margin: -8px 0 8px; max-width: 760px; } .page-plain__cta { margin-top: 32px; max-width: 980px; } .content .price_opacity_bg { padding: 20px 24px; border-radius: 16px; background: var(--ink); color: var(--on-dark); font-size: 16px; line-height: 2; } .content .price_opacity_bg span { display: inline-block; min-width: 130px; font-weight: 700; color: #fff; } .content .price_opacity_bg br { display: block; content: ""; } .content .legacy-cards { max-width: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: 16px; } .content .block_icon_header_three { padding: 22px; border: 1px solid var(--border); border-radius: 18px; background: #fff; display: flex; flex-direction: column; gap: 10px; font-size: 15px; line-height: 1.55; } .content .block_icon_header_three h4 { margin: 0; display: flex; align-items: center; gap: 10px; font-size: 19px; line-height: 1.25; color: var(--ink); } .content .block_icon_header_three h4 i { display: none; } .content .block_icon_header_three p { margin: 0; } @media (max-width: 640px) { .content .price_opacity_bg { line-height: 1.5; } .content .price_opacity_bg span { display: block; margin-top: 10px; } .content .price_opacity_bg span:first-child { margin-top: 0; } } /* Старый «заголовок-див» .h2header — как обычный H2 текста */ .content .h2header { clear: both; margin-top: 16px; font-size: 32px; line-height: 1.15; letter-spacing: -.02em; color: var(--ink); font-weight: 700; } .content .img_container_left { float: left; max-width: 45%; margin: 4px 24px 12px 0; } .content .img_container_left img { display: block; width: 100%; height: auto; border-radius: 14px; } @media (max-width: 600px) { .content .h2header { font-size: 26px; } .content .img_container_left { float: none; max-width: 100%; margin: 0 0 12px; } } /* Слайдеры в тексте (MetaSlider / flexslider): списки слайдов — не наш столбик-список */ .content > .metaslider { max-width: none; } .content .metaslider ul, .content .flexslider ul { display: block; padding: 0; margin: 0; gap: 0; list-style: none; } .content .metaslider .slides > li { margin: 0; padding: 0 6px; box-sizing: border-box; } .content .metaslider .slides img { width: 100%; height: auto; border-radius: 12px; } .content .metaslider a { text-decoration: none; } .content .metaslider .flex-direction-nav a { display: grid; place-items: center; width: 40px; height: 40px; margin-top: -20px; border-radius: 50%; background: #fff; color: var(--ink); box-shadow: 0 4px 14px rgba(20, 24, 27, .18); font-size: 0; opacity: 1; overflow: hidden; } .content .metaslider .flex-direction-nav a::before { font-size: 18px; font-family: inherit; line-height: 1; content: "‹"; color: var(--ink); text-shadow: none; } .content .metaslider .flex-direction-nav .flex-next::before { content: "›"; } .content .metaslider .flex-direction-nav .flex-prev { left: 6px; } .content .metaslider .flex-direction-nav .flex-next { right: 6px; } .content .metaslider .flex-direction-nav .flex-disabled { opacity: .35; pointer-events: none; }