/* ── запасные переменные темы ────────────────────────────────────────────── Страницы прайса собраны без инлайнового блока с переменными, поэтому .btn-gold с градиентом из var(--gold) рисовался прозрачным. Задаём те же значения здесь. На обычных страницах инлайновый блок идёт позже и просто перекрывает эти — там ничего не меняется. ───────────────────────────────────────────────────────────────────────── */ :root{--gold:#c89b3c;--gold-hi:#e6c876;--ink:#f4efe3;--muted:#a89f8a; --muted-2:#79725f;--line:#332f25;--line-2:#443f31;--card:#1f1c16;--bg:#141310} /* ═══ Оформление поверх существующей разметки ═══════════════════════════════ Ни одного слова текста не трогаем: 19 заголовков, 46 абзацев, 63 пункта, 32 якоря цен, 28 внутренних ссылок и 11 вопросов остаются как есть. Меняются только стили. Для SEO это нулевой риск — Google видит тот же документ, а человек видит нормальную страницу. ════════════════════════════════════════════════════════════════════════ */ @import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,600;12..96,700&family=Manrope:wght@400;500;600;700&display=swap'); :root{ --sk-gold:#c89b3c; --sk-gold-lt:#e6c876; --sk-gold-dk:#8a6a22; --sk-card:#221e16; --sk-card2:#2a251b; --sk-line:#352f24; --sk-line2:#473f30; --sk-txt:#f4efe3; --sk-mut:#a89f8a; --sk-dim:#7d7463; --sk-green:#3fbf74; --sk-r:14px; --sk-sh:0 1px 2px rgba(0,0,0,.35),0 10px 30px rgba(0,0,0,.25); } body{font-family:Manrope,system-ui,-apple-system,"Segoe UI",sans-serif; -webkit-font-smoothing:antialiased} h1,h2,h3{font-family:"Bricolage Grotesque",Manrope,sans-serif; letter-spacing:-.02em;text-wrap:balance} /* ── шапка страницы ───────────────────────────────────────── */ .page-hero{position:relative;padding-block:54px 42px;overflow:hidden} .page-hero::before{content:"";position:absolute;inset:-45% 46% auto -18%; height:600px;pointer-events:none; background:radial-gradient(ellipse at 32% 42%,rgba(200,155,60,.16),transparent 62%)} .page-hero>*{position:relative} .page-hero h1{font-size:clamp(1.95rem,5vw,3.15rem);line-height:1.06; margin:0 0 16px;max-width:min(22ch,100%)} .page-hero .eyebrow{display:inline-flex;align-items:center;gap:8px; font-size:.76rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase; color:var(--sk-gold);background:rgba(200,155,60,.1); border:1px solid rgba(200,155,60,.26);padding:6px 13px;border-radius:999px; margin-bottom:18px} .page-hero .eyebrow::before{content:"";width:6px;height:6px;border-radius:50%; background:var(--sk-green);box-shadow:0 0 0 3px rgba(63,191,116,.2)} .page-hero .lead{font-size:clamp(1rem,1.9vw,1.14rem);line-height:1.62; color:var(--sk-mut);max-width:62ch} .page-hero .lead [data-p]{color:var(--sk-gold-lt);font-weight:700; white-space:nowrap} .chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px} .chips .chip{background:var(--sk-card);border:1px solid var(--sk-line2); border-radius:999px;padding:8px 15px;font-size:.86rem;color:var(--sk-mut); font-weight:500} /* ── смысловые блоки ──────────────────────────────────────── */ .blk{background:var(--sk-card);border:1px solid var(--sk-line); border-radius:var(--sk-r);padding:28px 30px;margin-bottom:16px; box-shadow:var(--sk-sh)} .blk h2{font-size:clamp(1.25rem,2.7vw,1.72rem);line-height:1.2;margin:0 0 14px} .blk h3{font-size:1.08rem;margin:22px 0 10px} .blk p{color:var(--sk-mut);line-height:1.68;margin:0 0 14px;max-width:70ch} .blk p:last-child{margin-bottom:0} .blk b,.blk strong{color:var(--sk-txt);font-weight:600} .blk [data-p]{color:var(--sk-gold-lt);font-weight:700;white-space:nowrap; font-variant-numeric:tabular-nums} /* ── списки с галочками ───────────────────────────────────── */ .ticks{list-style:none;margin:0 0 16px;padding:0;display:grid;gap:11px} .ticks li{display:flex;gap:12px;align-items:flex-start;color:var(--sk-mut); line-height:1.56;font-size:.96rem} .ticks svg{flex:0 0 19px;width:19px;height:19px;margin-top:3px; color:var(--sk-gold);opacity:.95} .ticks b{color:var(--sk-txt);font-weight:600} /* ── ключевые цифры ───────────────────────────────────────── */ .kfacts{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:1px;background:var(--sk-line);border:1px solid var(--sk-line); border-radius:var(--sk-r);overflow:hidden;margin:20px 0} .kfx{background:var(--sk-card2);padding:22px 18px;text-align:center} .kfx>*:first-child{display:block;font-family:"Bricolage Grotesque",sans-serif; font-weight:700;font-size:1.6rem;line-height:1.12;color:var(--sk-gold); font-variant-numeric:tabular-nums;margin-bottom:5px} .kfx>*:first-child [data-p]{color:inherit} .kfx>*+*{font-size:.84rem;color:var(--sk-mut);line-height:1.4} /* ── подсказка ────────────────────────────────────────────── */ .tipbox{display:flex;gap:15px;background:rgba(200,155,60,.07); border:1px solid rgba(200,155,60,.24);border-left:3px solid var(--sk-gold); border-radius:10px;padding:18px 20px;margin:20px 0} .tipbox .ic{flex:0 0 26px;width:26px;height:26px;border-radius:50%; background:var(--sk-gold);color:#17140f;display:grid;place-items:center; font-weight:800;font-size:.9rem;line-height:1} .tipbox b{display:block;color:var(--sk-txt);margin-bottom:5px;font-weight:700} .tipbox p{margin:0;font-size:.93rem;color:var(--sk-mut);line-height:1.6} /* ── кейсы и таблица-сетка ────────────────────────────────── */ .cases{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:12px;margin:18px 0} .case{background:var(--sk-card2);border:1px solid var(--sk-line2); border-radius:12px;padding:18px;transition:.15s} .case:hover{border-color:var(--sk-gold-dk);transform:translateY(-2px)} .case [data-p],.case b{color:var(--sk-gold-lt);font-weight:700} /* ── включено / не включено ───────────────────────────────── */ .incl{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr)); gap:14px;margin:20px 0} .incl .yes,.incl .extra-box{background:var(--sk-card2); border:1px solid var(--sk-line2);border-radius:12px;padding:20px} .incl .yes{border-top:3px solid var(--sk-green)} .incl .extra-box{border-top:3px solid var(--sk-gold)} .incl b{display:block;margin-bottom:11px;color:var(--sk-txt);font-weight:700; font-size:.97rem} /* ── таблица цен ──────────────────────────────────────────── */ #preise{padding-block:46px} #preise h2{font-size:clamp(1.3rem,2.8vw,1.9rem);margin:0 0 8px} #preise>.wrap>p{color:var(--sk-mut);margin-bottom:20px} #preise table{width:100%;border-collapse:separate;border-spacing:0 8px} #preise tr{background:var(--sk-card)} #preise td{padding:15px 18px!important;border:1px solid var(--sk-line); border-left:0;border-right:0;font-size:.97rem;vertical-align:middle; transition:.15s} #preise td:first-child{border-left:1px solid var(--sk-line); border-radius:11px 0 0 11px;color:var(--sk-mut)} #preise td:last-child{border-right:1px solid var(--sk-line); border-radius:0 11px 11px 0;text-align:right;font-family:"Bricolage Grotesque",sans-serif; font-weight:700;font-size:1.08rem;color:var(--sk-gold-lt); font-variant-numeric:tabular-nums;white-space:nowrap} #preise tr:hover td{border-color:var(--sk-gold-dk);background:var(--sk-card2)} /* ── вопросы ──────────────────────────────────────────────── */ #faq{padding-block:46px} .faq-list{display:grid;gap:9px;max-width:860px} .faq-item{background:var(--sk-card);border:1px solid var(--sk-line); border-radius:11px;overflow:hidden;transition:.15s} .faq-item[open]{border-color:var(--sk-gold-dk);background:var(--sk-card2)} .faq-item summary{cursor:pointer;list-style:none;padding:17px 52px 17px 20px; font-weight:600;font-size:1rem;position:relative;color:var(--sk-txt)} .faq-item summary::-webkit-details-marker{display:none} .faq-item summary::after{content:"";position:absolute;right:21px;top:50%; width:9px;height:9px;border-right:2px solid var(--sk-gold); border-bottom:2px solid var(--sk-gold);transform:translateY(-70%) rotate(45deg); transition:transform .2s} .faq-item[open] summary::after{transform:translateY(-30%) rotate(-135deg)} .faq-item summary:focus-visible{outline:2px solid var(--sk-gold-lt); outline-offset:-2px} .faq-a{padding:0 20px 19px;color:var(--sk-mut);line-height:1.68;font-size:.95rem} .faq-a [data-p]{color:var(--sk-gold-lt);font-weight:700} /* ── схемы ────────────────────────────────────────────────── */ .bild{margin:24px 0 6px} .bild svg{display:block;width:100%;height:auto} /* ── кнопки ───────────────────────────────────────────────── */ .btn{transition:transform .14s,box-shadow .14s} .btn:hover{transform:translateY(-2px)} /* ── ритм секций ──────────────────────────────────────────── */ .section{padding-block:46px} .sec-head{margin-bottom:22px} .sec-head h2{font-size:clamp(1.35rem,3vw,2rem);margin:6px 0 0} .sec-head .eyebrow{font-size:.76rem;letter-spacing:.1em;color:var(--sk-gold); font-weight:600;text-transform:uppercase} @media (max-width:720px){ .blk{padding:22px 20px} .page-hero{padding-block:38px 32px} #preise td{padding:12px 14px!important;font-size:.92rem} } @media (prefers-reduced-motion:reduce){*{transition:none!important}} /* ── форма заявки ───────────────────────────────────────────────────────── Разметку рисует shanbau.js, свои базовые стили у неё там же. Здесь только подтягиваем её под остальной вид: карточка заметнее, поля крупнее, шаги читаются. Имена классов и полей не трогаем — форма продолжает слать на /app/api/anfrage как раньше. ──────────────────────────────────────────────────────────────────────── */ #anfrage-mount,#anfrage{scroll-margin-top:90px} .anf-card{background:linear-gradient(168deg,var(--sk-card2),var(--sk-card))!important; border:1px solid var(--sk-line2)!important;border-radius:20px!important; box-shadow:var(--sk-sh)!important;padding:30px 28px!important} .anf-top .anf-title,.anf-h{font-family:"Bricolage Grotesque",Manrope,sans-serif; letter-spacing:-.01em} .anf-h{font-size:1.16rem!important;margin-bottom:20px!important} .anf-steps>*{height:4px!important;border-radius:99px!important; background:var(--sk-line2)!important;transition:background .25s} .anf-steps>*.on,.anf-steps>*[class*=on]{background:var(--sk-gold)!important} .anf-f label,.anf-f>span{font-size:.85rem;color:var(--sk-mut);font-weight:500} .anf-f input,.anf-f textarea,.anf-f select{ background:#17150f!important;border:1px solid var(--sk-line2)!important; border-radius:11px!important;padding:13px 15px!important; font:inherit!important;font-size:.97rem!important;color:var(--sk-txt)!important; width:100%;transition:border-color .15s,box-shadow .15s} .anf-f input:focus,.anf-f textarea:focus{outline:0!important; border-color:var(--sk-gold)!important; box-shadow:0 0 0 3px rgba(200,155,60,.16)!important} .anf-f input::placeholder,.anf-f textarea::placeholder{color:var(--sk-dim)} .anf-s{border-radius:12px!important;padding:14px 12px!important; border:1px solid var(--sk-line2)!important;transition:.15s} .anf-s:hover{border-color:var(--sk-gold-dk)!important; background:var(--sk-card2)!important} .anf-s.on,.anf-s[aria-pressed=true]{border-color:var(--sk-gold)!important; background:rgba(200,155,60,.1)!important;color:var(--sk-gold-lt)!important} .anf-seg button{border-radius:999px!important;padding:9px 15px!important; border:1px solid var(--sk-line2)!important;font-size:.87rem!important; transition:.15s} .anf-seg button.on{background:var(--sk-gold)!important;color:#17140f!important; border-color:var(--sk-gold)!important;font-weight:600} .anf-consent{font-size:.84rem!important;color:var(--sk-mut)!important; line-height:1.55} .anf-consent input{accent-color:var(--sk-gold);width:17px;height:17px; margin-top:2px} .anf-nav .btn{border-radius:999px!important;padding:13px 26px!important; font-weight:700!important} .anf-alt{font-size:.86rem;color:var(--sk-mut);text-align:center;margin-top:16px} .anf-alt a{color:var(--sk-gold-lt);font-weight:600} .anf-done{text-align:center;padding:14px 0} .anf-done .anf-ico{color:var(--sk-green)} @media (max-width:620px){ .anf-card{padding:22px 18px!important;border-radius:16px!important} .anf-row{grid-template-columns:1fr!important} } /* ═══ Фото на страницах ═════════════════════════════════════════════════════ Никакого обтекания: оно ломало блоки, где уже есть колонки. Три формы, каждая занимает всю ширину блока и потому всегда симметрична: .hero-img — широкий кадр под шапкой .blk-photo — полоса внутри блока, между абзацами .svc-grid — ряд из трёх перед ценами .photo-band — фон во всю ширину с текстом и кнопкой ═══════════════════════════════════════════════════════════════════════ */ .hero-img{position:relative;margin:0 0 26px;border-radius:18px;overflow:hidden; background:var(--sk-card);box-shadow:var(--sk-sh);aspect-ratio:21/9} .hero-img img{display:block;width:100%;height:100%;object-fit:cover} .hero-img::after{content:"";position:absolute;inset:0; background:linear-gradient(180deg,rgba(19,17,13,.04) 0%,rgba(19,17,13,.3) 58%, rgba(19,17,13,.86) 100%)} .hero-img .cap{position:absolute;left:0;right:0;bottom:0;z-index:2; padding:22px 26px;display:flex;flex-wrap:wrap;gap:10px;align-items:center} .hero-img .cap b{font-family:"Bricolage Grotesque",Manrope,sans-serif; font-size:clamp(1rem,2.1vw,1.32rem);color:#fff;letter-spacing:-.01em; text-shadow:0 2px 14px rgba(0,0,0,.7)} .hero-img .cap .tag{background:rgba(200,155,60,.95);color:#17140f; font-size:.78rem;font-weight:700;padding:5px 13px;border-radius:999px} /* полоса внутри блока — всегда во всю ширину, высота постоянная */ .blk-photo{margin:20px 0;border-radius:14px;overflow:hidden; border:1px solid var(--sk-line);background:var(--sk-card);position:relative; aspect-ratio:16/6} .blk-photo img{display:block;width:100%;height:100%;object-fit:cover; transition:transform .6s cubic-bezier(.2,.6,.2,1)} .blk-photo:hover img{transform:scale(1.03)} .blk-photo figcaption{position:absolute;left:0;right:0;bottom:0; padding:30px 18px 13px;font-size:.87rem;font-weight:600;color:#fff; background:linear-gradient(180deg,transparent,rgba(19,17,13,.88)); text-shadow:0 1px 8px rgba(0,0,0,.75)} .svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:22px 0 6px} .svc-grid figure{margin:0;position:relative;border-radius:13px;overflow:hidden; border:1px solid var(--sk-line);background:var(--sk-card);aspect-ratio:3/2; transition:transform .18s,border-color .18s,box-shadow .18s} .svc-grid figure:hover{transform:translateY(-3px);border-color:var(--sk-gold-dk); box-shadow:var(--sk-sh)} .svc-grid img{display:block;width:100%;height:100%;object-fit:cover} .svc-grid figcaption{position:absolute;left:0;right:0;bottom:0; padding:26px 13px 11px;font-size:.84rem;font-weight:600;color:#fff; background:linear-gradient(180deg,transparent,rgba(19,17,13,.9)); text-shadow:0 1px 6px rgba(0,0,0,.7)} .photo-band{position:relative;margin:34px 0;border-radius:18px;overflow:hidden; display:flex;align-items:flex-end;isolation:isolate;aspect-ratio:21/8} .photo-band img{position:absolute;inset:0;width:100%;height:100%; object-fit:cover;z-index:-2} .photo-band::before{content:"";position:absolute;inset:0;z-index:-1; background:linear-gradient(100deg,rgba(19,17,13,.94) 0%,rgba(19,17,13,.74) 48%, rgba(19,17,13,.26) 100%)} .photo-band .inner{padding:28px 30px;max-width:560px} .photo-band h3{margin:0 0 9px;font-size:clamp(1.15rem,2.5vw,1.5rem);color:#fff} .photo-band p{margin:0 0 15px;color:#ded6c6;font-size:.95rem;line-height:1.58} .photo-band .btn{background:var(--sk-gold);color:#17140f;border-radius:999px; padding:11px 23px;font-weight:700;text-decoration:none;display:inline-flex; align-items:center;gap:8px;box-shadow:0 8px 26px rgba(200,155,60,.28)} @media (max-width:860px){ .svc-grid{grid-template-columns:1fr 1fr} .photo-band{aspect-ratio:auto;min-height:240px} } @media (max-width:560px){ .svc-grid{grid-template-columns:1fr} .hero-img{aspect-ratio:16/10;border-radius:14px} .hero-img .cap{padding:15px 17px} .blk-photo{aspect-ratio:16/9} .photo-band .inner{padding:22px 19px} } @media (prefers-reduced-motion:reduce){ .blk-photo img,.svc-grid figure{transition:none!important} .blk-photo:hover img{transform:none} } /* ── WhatsApp в шапке ─────────────────────────────────────────────────────── Компактная: подпись живёт только на широких экранах. На средних остаётся кружок с иконкой, иначе кнопка выдавливает пункты меню — «FAQ» наезжал. ───────────────────────────────────────────────────────────────────────── */ .nav-right .btn-wa-top{display:inline-flex;align-items:center;justify-content:center; gap:7px;background:#1fa855;color:#fff;border:0;border-radius:999px; padding:8px 14px;font-weight:700;font-size:.88rem;text-decoration:none; line-height:1;white-space:nowrap;flex:0 0 auto; box-shadow:0 5px 16px rgba(31,168,85,.24);transition:transform .14s,background .14s} .nav-right .btn-wa-top:hover{background:#25c161;transform:translateY(-1px)} .nav-right .btn-wa-top:focus-visible{outline:2px solid #7ff0a8;outline-offset:3px} .nav-right .btn-wa-top svg{width:17px;height:17px;flex:0 0 17px} @media (max-width:1420px){ .nav-right .btn-wa-top span{position:absolute;width:1px;height:1px;overflow:hidden; clip-path:inset(50%);white-space:nowrap} .nav-right .btn-wa-top{padding:0;width:38px;height:38px;border-radius:50%} } @media (max-width:860px){.nav-right .btn-wa-top{display:none}} /* ── блок вопросов: ровные ряды ───────────────────────────────────────────── В shanbau.css у .faq-list стоит align-items:start, поэтому каждая карточка высотой по своему тексту — в ряду из двух получалась ступенька. Тянем обе до высоты ряда. ───────────────────────────────────────────────────────────────────────── */ .faq-list{align-items:stretch!important;row-gap:10px} .faq-list .faq-item{display:flex;flex-direction:column;height:100%} .faq-list .faq-item summary{flex:0 0 auto} .faq-list .faq-item[open]{height:auto} /* ── иконки в шапке ──────────────────────────────────────────────────────── На /preise шапка размечена иначе: