/* ST3 (гео) и ST4 (отрасль) — то, чего нет у родителя ST2. Подключается ПОСЛЕ st34.css (перенос планки макета), поэтому выигрывает при равной специфичности. Что здесь: 1. сцены первых экранов и контакта — свои для ST3 и ST4 (набор Сид 3 от 22.09); 2. B17 «География исполнения» (F53) — блок есть только у ST3, у родителя его нет; 3. B06 карточки направлений (F05) — у ST4 вместо тарифной сетки родителя; 4. плоский список вопросов с тире ответа, ярлыки тем (B09); 5. кейсы строкой и панели «локальная цифра» / «локальный кейс» (B18, B19); 6. узлы схемы механизма (B04, F23). Числа в разметку не печатаются: нумерация шагов и карточек — счётчиками CSS (гейт Г1 C6 судит видимый текст, а content: counter() в него не попадает). */ /* ═══ 1. сцены ═══ */ .p-st3 #b01.s-hero{background:radial-gradient(ellipse at 72% 38%,#25322b66,transparent 55%),url('../img/scene-geo-moskva-T3-hero-1280.webp') 78% 45%/cover no-repeat} .p-st4 #b01.s-hero{background:radial-gradient(ellipse at 72% 38%,#25322b66,transparent 55%),url('../img/scene-otrasli-T4-hero-1280.webp') 76% 42%/cover no-repeat} .p-st34 #b10.s-contact{background:linear-gradient(90deg,#0b1512 4%,#0b1512e8 34%,#0b1512c4 58%,#0b1512d6 100%),linear-gradient(0deg,#0b1512,#0b151200 34%),url('../img/scene-contacts-T8-hero-1280.webp') 58% 34%/cover no-repeat} /* ═══ 2. B17 · география исполнения (F53) ═══ */ .p-st34 .c-geo{display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);gap:6%;align-items:start} .p-st34 .c-geo-copy p{font-size:15px;line-height:1.75;color:#c0c9b5;max-width:560px} .p-st34 .c-geo-zones{list-style:none;margin:26px 0 0;padding:0;counter-reset:geo;border-top:1px solid var(--line)} .p-st34 .c-geo-zones li{counter-increment:geo;display:grid;grid-template-columns:44px minmax(0,1fr);gap:0 20px;padding:17px 0;border-bottom:1px solid var(--line);font-size:14px;line-height:1.6;color:#c4ccb8} .p-st34 .c-geo-zones li:before{content:'0' counter(geo);font-size:11px;letter-spacing:.09em;color:var(--gold);padding-top:3px} .p-st34 .c-geo-card{border:1px solid #cbbb9250;border-radius:3px;background:linear-gradient(160deg,#1d2b22,#111d17);padding:26px 28px 24px} .p-st34 .c-geo-map{position:relative;display:block;min-height:250px;border:1px dashed #bfad7d66;border-radius:3px;background:radial-gradient(ellipse at 52% 46%,#2a3a2e,#0e1a14 72%);overflow:hidden} .p-st34 .c-geo-map:before{content:'';position:absolute;inset:0;background:repeating-linear-gradient(90deg,transparent 0 47px,#d9bd7e1f 47px 48px),repeating-linear-gradient(0deg,transparent 0 47px,#d9bd7e1f 47px 48px)} .p-st34 .c-geo-pin{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:grid;place-items:center;gap:8px;text-align:center;z-index:2} .p-st34 .c-geo-pin i{width:13px;height:13px;border-radius:50%;background:var(--gold);box-shadow:0 0 0 7px #e7b96e26,0 0 26px #e7b96e66} .p-st34 .c-geo-pin span{font-size:11px;letter-spacing:.07em;color:#e2cda0} .p-st34 .c-geo-address{margin:18px 0 0;font-size:15px;line-height:1.6;color:var(--paper)} .p-st34 .c-geo-note{margin:10px 0 0;font-size:12px;line-height:1.65;color:#9ca893} .p-st34 .c-geo-card .c-gap{margin-top:14px} /* ═══ 3. B06 · карточки направлений (F05) ═══ */ .p-st34 .c-dirs{display:grid;grid-template-columns:repeat(auto-fit,minmax(252px,1fr));gap:16px} .p-st34 .c-dir{display:flex;flex-direction:column;border:1px solid #cbbb9250;border-radius:3px;background:linear-gradient(160deg,#1d2b22,#111d17);padding:26px 24px 24px} .p-st34 .c-dir h3{font-size:21px;margin-bottom:12px;color:var(--paper)} .p-st34 .c-dir-price{font-size:26px;font-weight:500;letter-spacing:-.035em;line-height:1.15;color:var(--paper)} .p-st34 .c-dir-when{font-size:13px;line-height:1.6;color:#aeb4a4;margin:14px 0 0;padding-top:14px;border-top:1px solid var(--line)} .p-st34 .c-dir ul{list-style:none;margin:16px 0 20px;padding:0;flex:1} .p-st34 .c-dir li{position:relative;padding:9px 0 9px 19px;border-top:1px solid var(--line);font-size:13px;line-height:1.5;color:#c4ccb8} .p-st34 .c-dir li:before{content:'+';position:absolute;left:0;color:var(--gold)} .p-st34 .c-dir .s-link{margin-top:auto;align-self:flex-start;font-size:12px} .p-st34 .c-dirs-foot{margin:26px 0 0;padding-top:20px;border-top:1px solid var(--line);font-size:13.5px;line-height:1.7;color:#c0c9b5;max-width:860px} /* ═══ 4. B09 · плоский список вопросов ═══ */ .p-st34 .c-faq-tags{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin:22px 0 0;padding:0} .p-st34 .c-faq-tags li{border:1px solid #cbbb9250;border-radius:30px;padding:8px 14px;font-size:12px;color:#c4ccb8} .p-st34 .s-faq-list details p .c-faq-dash{color:var(--gold);font-weight:500;margin-right:6px} .p-st34 .c-faq-shield p{font-size:12.5px;line-height:1.7;color:#aeb4a4;margin-top:12px} /* ═══ 5. B18/B19 — локальная цифра и локальный кейс; кейсы строкой ═══ */ .p-st34 .c-local{background:#e3d8bd;color:#152219;border-radius:2px;padding:22px 26px;max-width:880px;margin-bottom:30px;font-size:15px;line-height:1.65} .p-st34 .c-local b{display:block;font-size:11px;letter-spacing:.09em;text-transform:uppercase;font-weight:600;color:#4a5a3d;margin-bottom:8px} .p-st34 .c-case-lines{display:grid;grid-template-columns:repeat(auto-fit,minmax(262px,1fr));gap:16px;counter-reset:cl} .p-st34 .c-case-line{counter-increment:cl;border:1px solid #cbbb9250;border-radius:3px;background:linear-gradient(160deg,#1d2b22,#111d17);padding:24px 22px} .p-st34 .c-case-line:before{content:'0' counter(cl);display:block;font-size:11px;letter-spacing:.09em;color:var(--gold);margin-bottom:12px} .p-st34 .c-case-line p{font-size:13.5px;line-height:1.65;color:#c4ccb8;margin:0} .p-st34 .c-archive-text{font-size:14px;line-height:1.75;color:#c0c9b5;max-width:860px} .p-st34 .c-practice{font-size:12.5px;line-height:1.7;color:#9ca893;margin-top:14px;max-width:860px} .p-st34 .c-block-links{display:flex;flex-wrap:wrap;gap:22px;margin-top:20px} /* ═══ 6. B04 — узлы схемы механизма (F23) ═══ */ .p-st34 .c-scheme-nodes{list-style:none;margin:0;padding:0;display:grid;gap:10px;width:100%;max-width:330px;margin-inline:auto} .p-st34 .c-scheme-nodes li{border:1px solid #cbbb9250;border-radius:2px;background:#16241c;padding:11px 14px;font-size:12.5px;line-height:1.45;color:#c4ccb8;text-align:left} .p-st34 .c-demand{margin:26px 0 0;padding-top:18px;border-top:1px solid var(--line);font-size:13.5px;line-height:1.7;color:#c0c9b5;max-width:860px} .p-st34 .c-demand b{display:block;margin-bottom:6px;font-size:11px;font-weight:500;letter-spacing:.09em;text-transform:uppercase;color:var(--gold)} /* кейс без экрана: публикация скриншотов ждёт согласия (В-6) — колонка одна */ .p-st34 .c-proof-solo{grid-template-columns:1fr;max-width:920px} /* ═══ прочее ═══ */ .p-st34 #b01 .s-hero-sub{margin:16px 0 0;max-width:620px;font-size:16px;line-height:1.6;color:#c7cbb6} .p-st34 .c-price-actions-note{font-size:13px;line-height:1.65;color:#aeb4a4;margin:0;max-width:440px} .p-st34 .c-steps li p:last-child{margin-bottom:0} .p-st34 .c-from-you{margin-top:18px;font-size:13.5px;line-height:1.7;color:#c0c9b5;max-width:760px} .p-st34 .c-from-you b{color:var(--gold);font-weight:500;letter-spacing:.05em;font-size:11px;text-transform:uppercase;display:block;margin-bottom:6px} .p-st34 #b01 .c-hero-facts strong{white-space:normal} /* ═══ 7. правка по разбору критика 23.09 (сломанное, а не «иначе») ═══════════════════════ * * Каждое правило здесь закрывает названный дефект, а не вкус: * 7.1 подшапка-якоря переполнена — 9 подписей в два переноса, последняя упиралась в край; * 7.2 финальный CTA сорван с сетки — контент начинался с x≈130 при колонке страницы x=60; * 7.3 подпись архива вплотную к карточкам — зазор был нулевой, буквы касались рамок; * 7.4 рваные ряды карточек — последний ряд оставлял дыры вместо карточек; * 7.5 схема механизма выглядела пустой рамкой — теперь это панель ступеней со связками. */ /* 7.1 · подшапка: подписи в одну строку, у полосы есть правый отступ. Подписи укорочены в bin/fill-st34.php (предел 18 знаков) — здесь только запрет переноса и запас на случай, если якорей у страницы окажется больше, чем влезает: полоса прокручивается внутри себя, а не ломается на две строки. */ .p-st34 .s-service-nav .s-wrap{gap:24px;padding-block:6px} .p-st34 .s-service-nav strong{flex:0 0 auto;max-width:230px} .p-st34 .s-service-nav nav{flex:1 1 auto;justify-content:flex-end;flex-wrap:nowrap;gap:22px; overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch} .p-st34 .s-service-nav nav::-webkit-scrollbar{display:none} .p-st34 .s-service-nav nav a{white-space:nowrap;flex:0 0 auto;padding-block:10px} /* 7.2 · финальный CTA — на общей колонке страницы (blocks.css сужает .c-contact-layout до 1180 px и центрирует её; у ST3/ST4 колонка одна для всех блоков — 1320 px, x=60). */ .p-st34 #b10 .c-contact-layout{max-width:none;margin-inline:auto} /* 7.3 · воздух под карточками кейсов: панель архива и хвостовые подписи не липнут к рамкам */ .p-st34 .c-case-lines+.c-archive{margin-top:34px} .p-st34 .c-case-lines+.c-archive-text, .p-st34 .c-archive-after{margin-top:26px} .p-st34 .c-case-lines+.c-practice, .p-st34 .c-case-lines+.c-block-links{margin-top:26px} /* 7.4 · ряды карточек: последний ряд растягивается, карточки в ряду одной высоты. Flex вместо grid именно для последнего ряда: у auto-fit пустые колонки остаются дырой. */ .p-st34 .c-case-lines,.p-st34 .c-dirs{display:flex;flex-wrap:wrap;align-items:stretch;gap:16px} .p-st34 .c-case-lines>*,.p-st34 .c-dirs>*{flex:1 1 262px;min-width:0;min-height:100%} .p-st34 .c-dirs>*{flex-basis:238px} .p-st34 .c-case-line{display:flex;flex-direction:column;height:auto} .p-st34 .c-case-line .s-link{margin-top:auto;align-self:flex-start} .p-st34 .c-case-type{font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--gold);margin:0 0 10px} .p-st34 .c-case-line h3{font-size:20px;color:var(--paper);margin:0 0 12px} .p-st34 .c-case-hold{margin:0 0 16px} .p-st34 .c-case-line:before{margin-bottom:10px} /* у шагов сетка из трёх колонок: одинокий последний шаг занимает остаток ряда, а не дыру */ .p-st34 .c-steps>li:last-child:nth-child(3n+1){grid-column:1 / -1} .p-st34 .c-steps>li:last-child:nth-child(3n+2){grid-column:span 2} /* 7.5 · схема механизма ступенями: панель со связками, а не пустая пунктирная рамка */ .p-st34 .c-scheme-steps{border-style:solid;border-color:#cbbb9250;justify-content:flex-start;padding:26px 24px} .p-st34 .c-scheme-steps .c-scheme-nodes{counter-reset:sch;max-width:none;gap:0} .p-st34 .c-scheme-steps .c-scheme-nodes li{counter-increment:sch;position:relative;display:grid; grid-template-columns:30px minmax(0,1fr);gap:0 12px;align-items:center;margin-bottom:26px} .p-st34 .c-scheme-steps .c-scheme-nodes li:last-child{margin-bottom:0} .p-st34 .c-scheme-steps .c-scheme-nodes li:before{content:'0' counter(sch);font-size:10px; letter-spacing:.09em;color:var(--gold)} .p-st34 .c-scheme-steps .c-scheme-nodes li:not(:last-child):after{content:'';position:absolute; left:14px;bottom:-21px;width:1px;height:16px;background:linear-gradient(0deg,#d9bd7e00,#d9bd7e99)} /* 7.6 · панель доказательств и закрывающая строка вопросов — по ритму макета */ .p-st34 .c-price-actions-solo{justify-content:flex-start} .p-st34 .c-archive-count{font-size:14px;color:#c0c9b5;margin:0} .p-st34 .c-archive-count b{font-size:26px;font-weight:500;letter-spacing:-.03em;color:var(--paper);margin-right:8px} .p-st34 .c-archive>div>p+p{margin-top:12px} .p-st34 #b09 .c-faq-ask{border-top:1px solid var(--line)} .p-st34 .c-demand{display:block} .p-st34 .c-demand>div{display:grid;grid-template-columns:120px minmax(0,1fr);gap:0 18px} .p-st34 .c-demand dt{font-size:11px;font-weight:500;letter-spacing:.09em;text-transform:uppercase;color:var(--gold)} .p-st34 .c-demand dd{margin:0} /* метка на месте виджета карты: город читается, рамка перестала быть пустой */ .p-st34 .c-geo-pin{gap:10px} .p-st34 .c-geo-pin span{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:#e2cda0} .p-st34 .c-geo{align-items:stretch} .p-st34 .c-geo-card{display:flex;flex-direction:column} .p-st34 .c-geo-map{flex:1 1 auto} /* ═══ планшет ═══ */ @media(max-width:1150px){ .p-st34 .c-geo{grid-template-columns:1fr;gap:28px} .p-st34 .c-dirs>*{flex-basis:230px} .p-st34 .s-service-nav nav{gap:18px} } /* ═══ телефон ═══ */ @media(max-width:768px){ body.p-st3 #b01.s-hero,body.p-st4 #b01.s-hero{min-height:0;background:radial-gradient(ellipse at 50% 0%,#25322b73,transparent 62%),var(--ink)} body.p-st3 #b01 .s-hero-copy:after{background:url('../img/scene-geo-moskva-T3-hero-768.webp') 62% 45%/cover no-repeat} body.p-st4 #b01 .s-hero-copy:after{background:url('../img/scene-otrasli-T4-hero-768.webp') 62% 45%/cover no-repeat} body.p-st34 .c-geo-zones li{grid-template-columns:34px minmax(0,1fr);gap:0 12px} body.p-st34 .c-geo-card{padding:20px 18px} body.p-st34 .c-geo-map{min-height:190px} body.p-st34 .c-dirs,body.p-st34 .c-case-lines{display:grid;grid-template-columns:1fr} body.p-st34 .s-service-nav nav{justify-content:flex-start;gap:18px} body.p-st34 .c-demand>div{grid-template-columns:1fr;gap:6px} body.p-st34 .c-local{padding:18px 20px;font-size:14px} body.p-st34 .c-scheme-nodes{max-width:none} /* Срез Т-в: в одной колонке «span 2» у одинокого последнего шага рождал неявную вторую колонку — все шаги сжимались вдвое и на 320 вылезали за край (S1076, 342 px). */ body.p-st34 .c-steps>li:last-child:nth-child(3n+1), body.p-st34 .c-steps>li:last-child:nth-child(3n+2){grid-column:auto} } /* Срез К2 (Г14-Т5, S1075): многострочное значение в карточке кейса B08 («Что сделали») — списком, пункт карты на строку (партиал b08: odyssey_lines →