/* =================================================================== АвтоПомощник — дизайн-система v2.0 Bitter (заголовки) + Golos Text (текст) Широкая сетка: 1260px desktop =================================================================== */ :root { --blue:#1f5fa8; --blue-deep:#163e6e; --blue-bg:#edf2fb; --amber:#e8a317; --amber-dark:#c47f06; --amber-bg:#fdf6e3; --green:#1f8a5b; --green-bg:#eaf6ef; --red:#c0392b; --red-bg:#fbecea; --ink:#13202e; --ink-soft:#4a5a6a; --ink-muted:#8090a4; --rule:#e4e8ec; --rule-dark:#c8d0da; --bg:#fff; --bg-soft:#f5f7f9; --r:12px; --r-sm:8px; --r-lg:20px; --sh:0 2px 14px rgba(0,0,0,.08); --sh-lg:0 8px 36px rgba(0,0,0,.14); --maxw:900px; --maxw-wide:1260px; --hh:64px; } *,::before,::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%;scroll-behavior:smooth} body{margin:0;font-family:'Golos Text',system-ui,sans-serif;color:var(--ink);background:var(--bg);line-height:1.65;font-size:17px;-webkit-font-smoothing:antialiased;overflow-wrap:break-word;word-break:break-word} h1,h2,h3,h4{margin:0} p{margin:0 0 16px} a{color:var(--blue)} ul,ol{margin:0;padding:0} img{max-width:100%;height:auto} /* ── Layout ─────────────────────────────────── */ .wrap{max-width:var(--maxw-wide);margin:0 auto;padding:0 28px} .wrap-n{max-width:var(--maxw);margin:0 auto;padding:0 28px} /* ── Header ─────────────────────────────────── */ .site-header{background:var(--bg);border-bottom:1px solid var(--rule);position:sticky;top:0;z-index:50;height:var(--hh);transition:box-shadow .2s} .site-header.scrolled{box-shadow:0 2px 20px rgba(0,0,0,.1)} .hdr{max-width:var(--maxw-wide);margin:0 auto;padding:0 28px;display:flex;align-items:center;justify-content:space-between;height:100%;gap:16px} .logo{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);font-family:'Bitter',serif;font-weight:700;font-size:20px;letter-spacing:-.01em;flex-shrink:0} .logo-icon{width:36px;height:36px;background:var(--blue);border-radius:9px;display:flex;align-items:center;justify-content:center;flex-shrink:0} .logo em{color:var(--blue);font-style:normal} .site-nav{display:flex;align-items:center;gap:2px} .site-nav a{color:var(--ink-soft);text-decoration:none;font-size:15px;font-weight:500;padding:6px 13px;border-radius:var(--r-sm);transition:color .12s,background .12s;white-space:nowrap} .site-nav a:hover{color:var(--blue);background:var(--blue-bg)} .site-nav a.active{color:var(--blue);font-weight:600;background:var(--blue-bg)} .burger{display:none;border:0;background:none;padding:8px;color:var(--ink);cursor:pointer;border-radius:var(--r-sm);line-height:1} .burger:hover{background:var(--bg-soft)} .mobile-nav{display:none;position:fixed;top:var(--hh);left:0;right:0;background:var(--bg);border-bottom:1px solid var(--rule);box-shadow:var(--sh);padding:10px 16px 16px;z-index:49;flex-direction:column;gap:4px} .mobile-nav.open{display:flex} .mobile-nav a{color:var(--ink);text-decoration:none;font-size:16px;font-weight:500;padding:10px 14px;border-radius:var(--r-sm)} .mobile-nav a:hover,.mobile-nav a.active{background:var(--blue-bg);color:var(--blue)} @media(max-width:760px){.site-nav{display:none}.burger{display:block}} /* ── Photo hero (photo background header) ───── */ .ph-hero{position:relative;min-height:300px;display:flex;align-items:flex-end;overflow:hidden;background:var(--blue-deep)} .ph-hero::before{content:'';position:absolute;inset:0;background:linear-gradient(170deg,rgba(10,26,50,.72) 0%,rgba(22,62,110,.88) 100%);z-index:1} .ph-hero img.ph-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;z-index:0;opacity:.55} .ph-hero-in{position:relative;z-index:2;width:100%;max-width:var(--maxw-wide);margin:0 auto;padding:36px 28px 36px} .ph-hero-tag{display:inline-block;background:rgba(255,255,255,.15);border:1px solid rgba(255,255,255,.25);backdrop-filter:blur(4px);color:#fff;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;padding:5px 13px;border-radius:20px;margin-bottom:14px} .ph-hero h1{font-family:'Bitter',serif;font-weight:700;font-size:clamp(28px,5vw,46px);line-height:1.08;letter-spacing:-.02em;color:#fff;margin:0 0 14px;max-width:700px;text-shadow:0 2px 12px rgba(0,0,0,.25)} .ph-hero .ph-sub{font-size:18px;color:rgba(255,255,255,.87);max-width:620px;line-height:1.6;margin:0 0 26px} .ph-hero .upd{color:rgba(255,255,255,.6);font-size:13px;margin:0;display:flex;align-items:center;gap:7px} .ph-hero .upd::before{content:'';display:inline-block;width:6px;height:6px;border-radius:50%;background:#4ecb8c;flex-shrink:0} /* ── Main page hero (clean — no forms) ────────── */ .main-hero{position:relative;overflow:hidden;background:var(--blue-deep);min-height:520px;display:flex;align-items:center} .main-hero::before{content:'';position:absolute;inset:0;background:linear-gradient(120deg,rgba(8,20,44,.94) 0%,rgba(18,50,96,.85) 45%,rgba(31,95,168,.5) 100%);z-index:1} .main-hero img.hero-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 45%;z-index:0;opacity:.48} .main-hero-in{position:relative;z-index:2;width:100%;max-width:var(--maxw-wide);margin:0 auto;padding:68px 28px 60px;display:grid;grid-template-columns:1fr 420px;gap:52px;align-items:center} @media(max-width:960px){.main-hero-in{grid-template-columns:1fr;gap:36px;padding:52px 20px 44px}} .hero-eyebrow{font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.14em;color:rgba(255,255,255,.5);margin-bottom:20px} .hero-text h1{font-family:'Bitter',serif;font-weight:700;font-size:clamp(34px,5.5vw,58px);line-height:1.04;letter-spacing:-.025em;color:#fff;margin:0 0 18px;text-shadow:0 2px 24px rgba(0,0,0,.4)} .hero-text p{font-size:18px;color:rgba(255,255,255,.76);line-height:1.65;margin:0 0 32px;max-width:500px} .hero-chips{display:flex;gap:9px;flex-wrap:wrap} .hero-chip{background:rgba(255,255,255,.11);border:1px solid rgba(255,255,255,.2);backdrop-filter:blur(6px);color:rgba(255,255,255,.88);font-size:14px;font-weight:500;padding:9px 18px;border-radius:24px;text-decoration:none;transition:background .15s,color .15s} .hero-chip:hover{background:rgba(255,255,255,.24);color:#fff} /* ── Hero right panel ─────────────────────────── */ .hero-panel{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.13);backdrop-filter:blur(14px);border-radius:var(--r-lg);padding:22px 22px 18px;display:flex;flex-direction:column;gap:14px} @media(max-width:960px){.hero-panel{display:none}} .hero-panel-title{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:rgba(255,255,255,.45);margin-bottom:2px} .hero-links{display:flex;flex-direction:column;gap:0} .hero-links a{display:flex;justify-content:space-between;align-items:baseline;gap:10px;text-decoration:none;color:rgba(255,255,255,.82);font-size:14.5px;font-weight:500;padding:9px 0;border-bottom:1px solid rgba(255,255,255,.09);transition:color .12s} .hero-links a:last-child{border-bottom:none} .hero-links a:hover{color:#fff} .hero-links a span{font-size:12px;color:rgba(255,255,255,.4);white-space:nowrap;flex-shrink:0} .hero-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:1px solid rgba(255,255,255,.12);padding-top:14px;margin-top:2px} .hstat{text-align:center;padding:0 6px} .hstat-n{display:block;font-family:'Bitter',serif;font-size:22px;font-weight:700;color:#fff;line-height:1;margin-bottom:4px} .hstat-l{font-size:11px;color:rgba(255,255,255,.45);line-height:1.3} /* ── Tools strip (below hero) ─────────────────── */ .tools-strip{background:var(--bg-soft);border-bottom:1px solid var(--rule);padding:36px 0} .tools-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px} @media(max-width:700px){.tools-grid{grid-template-columns:1fr}} .tool-card{background:var(--bg);border:1px solid var(--rule);border-radius:var(--r-lg);padding:24px;box-shadow:var(--sh)} .tool-head{display:flex;align-items:flex-start;gap:14px;margin-bottom:18px} .tool-icon{width:46px;height:46px;border-radius:12px;display:flex;align-items:center;justify-content:center;flex-shrink:0} .tool-card--blue .tool-icon{background:var(--blue)} .tool-card--amber .tool-icon{background:var(--amber-dark)} .tool-title{font-family:'Bitter',serif;font-size:20px;font-weight:600;color:var(--ink);margin-bottom:3px} .tool-desc{font-size:13.5px;color:var(--ink-muted)} /* ── Breadcrumbs ─────────────────────────────── */ .crumbs{font-size:13px;color:var(--ink-soft);padding:16px 0 0;display:flex;flex-wrap:wrap;align-items:center} .crumbs a{color:var(--ink-soft);text-decoration:none} .crumbs a:hover{color:var(--blue)} .crumbs .sep{color:var(--ink-muted);margin:0 7px} /* ── Section titles ──────────────────────────── */ .sec-title{font-family:'Bitter',serif;font-weight:700;font-size:clamp(22px,3.5vw,30px);letter-spacing:-.015em;margin:0 0 6px} .sec-sub{color:var(--ink-soft);font-size:16px;margin:0 0 24px} /* Один слой вместо трёх. Раньше это правило дублировалось ниже дважды, второй раз с !important и `margin-left:0` — в канве редактора это убивало `margin-left:auto`, которым Gutenberg центрирует блоки, и заголовок уезжал на 226px левее абзацев. margin-left тут не нужен вовсе: в колонке .page-main он и так нулевой. */ h2.sec{font-family:'Bitter',serif;font-weight:600;font-size:clamp(21px,4vw,27px);letter-spacing:-.01em;margin:40px 0 14px;padding-left:14px;border-left:3px solid var(--blue);scroll-margin-top:calc(var(--hh) + 12px)} h3.h3{font-weight:600;font-size:19px;margin:26px 0 10px} .upd{font-size:13px;color:var(--ink-muted);margin-bottom:20px;display:flex;align-items:center;gap:6px} .upd::before{content:'';display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--green);flex-shrink:0} /* ── Page sub-head (narrow, below photo hero) ── */ .page-sub{padding:20px 0 4px} .page-sub .intro{font-size:18px;color:var(--ink-soft);margin:0 0 22px} /* ── Quick answer ────────────────────────────── */ .qa{background:linear-gradient(135deg,#eef4fc,#f5f8fd);border:1px solid #bccfe8;border-left:4px solid var(--blue);border-radius:var(--r);padding:18px 24px;margin:0 0 28px;position:relative} .qa-lbl{font-size:10px;text-transform:uppercase;letter-spacing:.12em;color:var(--blue);font-weight:800;margin:0 0 12px;display:flex;align-items:center;gap:7px} .qa-lbl::after{content:'';flex:1;height:1px;background:rgba(31,95,168,.15)} .qa ul{list-style:none} .qa li{position:relative;padding:5px 0 5px 28px;font-size:16px;line-height:1.5;color:var(--ink)} .qa li::before{content:'✓';position:absolute;left:0;top:5px;color:#fff;font-weight:700;font-size:12px;width:20px;height:20px;background:var(--blue);border-radius:50%;display:flex;align-items:center;justify-content:center;line-height:20px;text-align:center} /* ── Cards (sections grid) ───────────────────── */ .cards{display:grid;grid-template-columns:repeat(4,1fr);gap:16px} @media(max-width:900px){.cards{grid-template-columns:repeat(2,1fr)}} @media(max-width:480px){.cards{grid-template-columns:1fr}} .card{background:var(--bg);border:1px solid var(--rule);border-radius:var(--r-lg);overflow:hidden;text-decoration:none;color:var(--ink);transition:border-color .15s,box-shadow .15s,transform .2s;display:flex;flex-direction:column} .card:hover{border-color:var(--blue);box-shadow:var(--sh);transform:translateY(-3px)} .card-img{height:110px;overflow:hidden;position:relative;display:flex;align-items:center;justify-content:center} .card-img-ico{display:flex;align-items:center;justify-content:center;opacity:.9} .card-img img{width:100%;height:100%;object-fit:cover;object-position:center;transition:transform .4s ease} .card:hover .card-img img{transform:scale(1.05)} .card-body{padding:14px 16px 16px;flex:1;display:flex;flex-direction:column} .card-body h3{font-size:15px;font-weight:600;margin:0 0 4px} .card-body p{font-size:13.5px;color:var(--ink-soft);margin:0;flex:1;line-height:1.5} .card-arrow{color:var(--blue);font-size:13px;font-weight:600;margin-top:10px;display:flex;align-items:center;gap:4px} /* ── Feature strip ───────────────────────────── */ .feat-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:0;background:var(--blue-deep);border-radius:var(--r-lg);overflow:hidden;margin:40px 0} @media(max-width:680px){.feat-strip{grid-template-columns:1fr}} .feat-item{padding:30px 28px;border-right:1px solid rgba(255,255,255,.1);display:flex;flex-direction:column;gap:8px} .feat-item:last-child{border-right:none} @media(max-width:680px){.feat-item{border-right:none;border-bottom:1px solid rgba(255,255,255,.1)}} .feat-ic{width:48px;height:48px;border-radius:13px;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-bottom:4px;background:rgba(255,255,255,.15)} .feat-stat{font-family:'Bitter',serif;font-size:38px;font-weight:700;color:#fff;line-height:1;letter-spacing:-.02em} .feat-item h3{font-family:'Bitter',serif;font-size:17px;font-weight:600;color:#fff;margin:0} .feat-item p{font-size:13.5px;color:rgba(255,255,255,.65);margin:0;line-height:1.55} /* ── Popular ─────────────────────────────────── */ .popular{background:var(--bg-soft);border-radius:var(--r-lg);padding:28px 32px} .popular h2{font-family:'Bitter',serif;font-size:23px;margin:0 0 18px} .pop-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 36px} @media(max-width:640px){.pop-grid{grid-template-columns:1fr}} .pop-grid a{display:flex;justify-content:flex-start;align-items:baseline;gap:10px;padding:11px 0;border-bottom:1px solid var(--rule);text-decoration:none;color:var(--ink);font-size:15.5px;transition:color .12s} .pop-grid a:hover{color:var(--blue)} .pop-meta{font-size:13px;color:var(--ink-muted);white-space:nowrap;margin-left:auto;padding-left:12px} /* ── Tool widget blocks ──────────────────────── */ .wblock{border-radius:var(--r-lg);padding:26px 24px;margin:0 0 10px;position:relative;overflow:hidden} .wblock--blue{background:linear-gradient(135deg,#2568b8,var(--blue-deep));box-shadow:0 8px 32px rgba(22,62,110,.22)} .wblock--amber{background:linear-gradient(135deg,#f0a918,var(--amber-dark));box-shadow:0 8px 32px rgba(196,127,6,.25)} .wblock--green{background:linear-gradient(135deg,#22986a,#157050);box-shadow:0 8px 32px rgba(21,112,80,.22)} .wblock h2{font-family:'Bitter',serif;font-size:20px;margin:0 0 5px;color:#fff} .wblock .wdesc{font-size:14px;color:rgba(255,255,255,.88);margin:0 0 16px} .wform{background:rgba(255,255,255,.97);border-radius:var(--r);padding:18px 18px 16px;color:var(--ink-soft)} .wtabs{display:flex;gap:6px;margin-bottom:12px;flex-wrap:wrap} .wtab{font-size:13px;padding:5px 12px;border-radius:20px;background:var(--bg-soft);color:var(--ink-soft);border:1px solid var(--rule);cursor:pointer;white-space:nowrap} .wtab.on{background:var(--blue);color:#fff;border-color:var(--blue)} .wfield{height:44px;border:1.5px solid var(--rule);border-radius:var(--r-sm);background:#fff;margin-bottom:10px;display:flex;align-items:center;padding:0 12px;color:#adb5c0;font-size:14px;gap:9px} .wfield svg{opacity:.4;flex-shrink:0} .wrow{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:10px} @media(max-width:460px){.wrow{grid-template-columns:1fr}} .wbtn{height:46px;border-radius:var(--r-sm);font-weight:700;font-size:15px;display:flex;align-items:center;justify-content:center;gap:7px;cursor:pointer;transition:opacity .12s;border:0;width:100%;font-family:inherit} .wbtn:hover{opacity:.9} .wbtn--amber{background:var(--amber);color:#3a2a00} .wbtn--blue{background:var(--blue);color:#fff} .wcap{text-align:center;font-size:12px;color:var(--ink-muted);margin-top:11px;font-style:italic} .wpair{display:grid;grid-template-columns:1fr 1fr;gap:18px} @media(max-width:640px){.wpair{grid-template-columns:1fr}} /* ── Trust badges ─────────────────────────────── */ .trust{display:flex;gap:12px;flex-wrap:wrap;margin:0 0 30px} .trust-b{flex:1;min-width:140px;background:var(--bg-soft);border:1px solid var(--rule);border-radius:var(--r);padding:14px 16px;font-size:14px;color:var(--ink-soft)} .trust-b strong{display:block;color:var(--ink);font-size:15px;font-weight:600;margin-bottom:2px} /* ── Stats row ────────────────────────────────── */ .stats-row{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:0 0 24px} @media(max-width:460px){.stats-row{grid-template-columns:1fr 1fr}} .stat-c{background:var(--bg-soft);border:1px solid var(--rule);border-radius:var(--r);padding:16px 18px} .stat-c .n{font-family:'Bitter',serif;font-size:30px;font-weight:700;color:var(--blue-deep);line-height:1;margin-bottom:4px} .stat-c .l{font-size:13px;color:var(--ink-soft)} /* ── Map placeholder ─────────────────────────── */ .map-ph{position:relative;height:380px;border-radius:var(--r-lg);overflow:hidden;margin:0 0 8px;background:#e8eef4;border:1px solid var(--rule)} .map-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(31,95,168,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(31,95,168,.05) 1px,transparent 1px);background-size:44px 44px} .map-overlay{position:absolute;inset:0} .map-msg{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);background:#fff;border-radius:var(--r);padding:18px 24px;text-align:center;box-shadow:var(--sh);max-width:290px;width:90%} .map-msg strong{display:block;font-weight:600;color:var(--ink);margin-bottom:4px;font-size:15px} .map-msg span{font-size:13px;color:var(--ink-soft);line-height:1.5} .mpin{position:absolute;width:14px;height:14px;border-radius:50% 50% 50% 0;transform:rotate(-45deg);border:2.5px solid #fff;box-shadow:0 2px 6px rgba(0,0,0,.25)} .mpin.r{background:var(--red)}.mpin.b{background:var(--blue)}.mpin.a{background:var(--amber)} .map-leg{display:flex;gap:20px;flex-wrap:wrap;margin:8px 0 22px;font-size:13.5px;color:var(--ink-soft)} .map-leg span{display:flex;align-items:center;gap:7px} .ldot{width:10px;height:10px;border-radius:50%;display:inline-block} .map-note{font-size:13px;color:var(--ink-muted);margin:0 0 28px} /* ── OSAGO city block ────────────────────────── */ .osago-city{background:linear-gradient(135deg,#fdf6e3,#f8e9bd);border:1px solid #f0d9a0;border-radius:var(--r-lg);padding:26px 28px;margin:30px 0} .kt-row{display:flex;align-items:baseline;gap:12px;margin-bottom:10px} .kt-val{font-family:'Bitter',serif;font-size:42px;font-weight:700;color:#8a6200;line-height:1} .kt-lbl{font-size:14px;color:#7a5800;line-height:1.5} .osago-city h2{font-family:'Bitter',serif;font-size:22px;margin:0 0 7px} .osago-city p{font-size:15px;color:#6b5320;margin:0 0 14px} /* ── Tables ──────────────────────────────────── */ .tbl-wrap{overflow-x:auto;margin:16px 0 22px;border:1px solid var(--rule);border-radius:var(--r)} table{width:100%;border-collapse:collapse;font-size:15.5px;min-width:460px} thead th{background:var(--blue-deep);color:#fff;font-weight:600;text-align:left;padding:13px 16px;font-size:14px} tbody td{padding:13px 16px;border-top:1px solid var(--rule);vertical-align:top} tbody tr:nth-child(even){background:var(--bg-soft)} .money{font-weight:600;white-space:nowrap} .koap{font-size:12px;color:var(--ink-muted);display:block;margin-top:2px} .lish{color:var(--red);font-weight:600} .free{color:var(--green);font-weight:600} .coef{font-weight:600;white-space:nowrap} .tbl-note{font-size:13px;color:var(--ink-muted);margin:0 0 22px} .badge{font-size:12px;padding:3px 10px;border-radius:20px;white-space:nowrap;display:inline-block} .badge-up{background:var(--red-bg);color:var(--red)} .badge-dn{background:var(--green-bg);color:var(--green)} .badge-z{background:var(--blue-bg);color:var(--blue-deep)} .row-bad{background:var(--red-bg)} .row-base{background:var(--bg-soft)} .row-best{background:var(--green-bg)} /* ── Note callouts ───────────────────────────── */ .note{border-radius:var(--r);padding:16px 20px;margin:22px 0;font-size:16px} .note .ntag{display:inline-block;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;margin-bottom:7px;padding:2px 9px;border-radius:20px} .note b{font-weight:600} .note p{margin:0} .note a{font-weight:500} .note--blue{background:var(--blue-bg);border:1px solid #bccfe8;border-left:4px solid var(--blue)} .note--blue .ntag{background:var(--blue);color:#fff} .note--green{background:var(--green-bg);border:1px solid #bce3cd;border-left:4px solid var(--green)} .note--green .ntag{background:var(--green);color:#fff} .note--amber{background:var(--amber-bg);border:1px solid #f0d9a0;border-left:4px solid var(--amber)} .note--amber .ntag{background:var(--amber);color:#3a2a00} .note--red{background:var(--red-bg);border:1px solid #f0c5be;border-left:4px solid var(--red)} .note--red .ntag{background:var(--red);color:#fff} /* ── Deadline card ───────────────────────────── */ .deadline{display:flex;align-items:center;gap:22px;background:var(--red-bg);border:1px solid #f0c5be;border-radius:var(--r);padding:22px 26px;margin:0 0 26px} .dl-num{font-family:'Bitter',serif;font-size:58px;font-weight:700;color:var(--red);line-height:1;flex-shrink:0} .dl-txt{font-size:15.5px;color:#7a2018;line-height:1.55} .dl-txt strong{font-weight:600} /* ── Steps ───────────────────────────────────── */ .steps{counter-reset:sc;list-style:none;margin:18px 0 24px} .steps li{counter-increment:sc;position:relative;padding:0 0 18px 52px;font-size:16px;line-height:1.6} .steps li::before{content:counter(sc);position:absolute;left:0;top:1px;width:34px;height:34px;border-radius:50%;background:var(--blue);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:15px} .steps--green li::before{background:var(--green)} .steps li strong{font-weight:600} /* ── Checklist ───────────────────────────────── */ .checklist{list-style:none;margin:16px 0 22px} .checklist li{position:relative;padding:8px 0 8px 30px;border-bottom:1px solid var(--rule);font-size:16px} .checklist li::before{content:'✓';position:absolute;left:0;top:8px;color:var(--green);font-weight:700;font-size:17px} /* ── Grounds grid ────────────────────────────── */ .grounds{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:18px 0 22px} @media(max-width:520px){.grounds{grid-template-columns:1fr}} .ground{background:var(--bg-soft);border:1px solid var(--rule);border-radius:var(--r);padding:14px 16px;font-size:15px} .ground strong{display:block;color:var(--blue-deep);font-weight:600;margin-bottom:3px} /* ── Download CTA ────────────────────────────── */ .dl-cta{display:flex;align-items:center;gap:16px;background:linear-gradient(135deg,var(--blue),var(--blue-deep));border-radius:var(--r-lg);padding:22px 26px;margin:24px 0;text-decoration:none} .dl-cta:hover{opacity:.93} .dl-ic{font-size:38px;flex-shrink:0;line-height:1} .dl-txt2{flex:1} .dl-txt2 strong{display:block;font-family:'Bitter',serif;font-size:18px;margin-bottom:3px;color:#fff} .dl-txt2 small{font-size:13px;color:rgba(255,255,255,.8)} .dl-btn{background:var(--amber);color:#3a2a00;font-weight:700;padding:12px 22px;border-radius:var(--r-sm);white-space:nowrap;font-size:15px;flex-shrink:0} @media(max-width:540px){.dl-cta{flex-wrap:wrap}.dl-btn{width:100%;text-align:center}} /* ── Formula ─────────────────────────────────── */ .formula{background:var(--blue-deep);color:#fff;border-radius:var(--r);padding:22px 26px;margin:18px 0;font-family:'Bitter',serif;font-size:clamp(15px,3vw,20px);text-align:center;line-height:1.7} .formula em{color:#ffd98a;font-style:normal} /* ── Calc example ────────────────────────────── */ .calc-ex{background:var(--bg-soft);border:1px solid var(--rule);border-radius:var(--r);padding:22px 24px;margin:22px 0} .calc-ex h4{font-size:16px;font-weight:600;color:var(--blue-deep);margin:0 0 12px} .calc-line{font-family:'Bitter',serif;font-size:16px;margin:6px 0} .calc-line em{color:var(--blue);font-style:normal;font-weight:700} .calc-line .dim{color:var(--ink-soft);font-size:14px;font-family:'Golos Text',sans-serif} .calc-res{font-size:22px;font-weight:700;color:var(--green);margin-top:12px;font-family:'Bitter',serif} /* ── Example card ────────────────────────────── */ .example-c{border:1px solid var(--rule);border-radius:var(--r);padding:20px 22px;margin:22px 0;background:var(--bg)} .example-c h4{font-size:16px;font-weight:600;color:var(--blue-deep);margin:0 0 9px} .example-c p{font-size:15.5px;color:var(--ink-soft);margin:0} /* ── Hub tiles ───────────────────────────────── */ .hub-g{padding:32px 0 0} .hub-gt{font-family:'Bitter',serif;font-weight:600;font-size:24px;margin:0 0 5px} .hub-gs{color:var(--ink-soft);font-size:15px;margin:0 0 18px} .tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:14px} @media(max-width:760px){.tiles{grid-template-columns:repeat(2,1fr)}} @media(max-width:440px){.tiles{grid-template-columns:1fr}} .tile{background:var(--bg);border:1px solid var(--rule);border-radius:var(--r);padding:16px 18px;text-decoration:none;color:var(--ink);transition:border-color .15s,box-shadow .15s,transform .18s;display:block} .tile:hover{border-color:var(--blue);box-shadow:var(--sh);transform:translateY(-2px)} .tile h3{font-size:16px;font-weight:600;margin:0 0 4px} .tile p{font-size:13.5px;color:var(--ink-soft);margin:0} .tile .amt{color:var(--amber-dark);font-weight:600} .more-a{margin-top:14px;font-size:15px;display:block;font-weight:600} /* ── Cities ──────────────────────────────────── */ .cities-b{background:var(--bg-soft);border-radius:var(--r-lg);padding:24px 26px;margin:30px 0} .cities-b h2{font-family:'Bitter',serif;font-size:21px;margin:0 0 16px} .chips{display:flex;flex-wrap:wrap;gap:9px} .chip{background:var(--bg);border:1px solid var(--rule);border-radius:20px;padding:7px 16px;text-decoration:none;color:var(--ink);font-size:14.5px;transition:border-color .12s,color .12s} .chip:hover{border-color:var(--blue);color:var(--blue)} /* ── FAQ ─────────────────────────────────────── */ .faq{margin:14px 0} .faq-item{border:1px solid var(--rule);border-radius:var(--r);margin-bottom:10px;background:var(--bg);overflow:hidden} .faq-q{padding:16px 20px;font-weight:600;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:12px;font-size:16px;user-select:none;transition:background .12s} .faq-q:hover{background:var(--bg-soft)} .faq-icon{width:26px;height:26px;border-radius:50%;background:var(--blue-bg);color:var(--blue);display:flex;align-items:center;justify-content:center;font-size:22px;font-weight:300;flex-shrink:0;transition:background .15s,transform .25s;line-height:1} .faq-item.open .faq-icon{background:var(--blue);color:#fff;transform:rotate(45deg)} .faq-item.open .faq-q{border-bottom:1px solid var(--rule)} .faq-a{padding:0 20px;max-height:0;overflow:hidden;transition:max-height .3s ease,padding .3s ease;color:var(--ink-soft);font-size:16px;line-height:1.65} .faq-item.open .faq-a{padding:16px 20px 20px;max-height:600px} /* ── Related ─────────────────────────────────── */ .related{background:var(--bg-soft);border-radius:var(--r-lg);padding:24px 26px;margin:36px 0;border:1px solid var(--rule)} .related h2{font-family:'Bitter',serif;font-size:20px;margin:0 0 16px;display:flex;align-items:center;gap:10px} .related h2::before{content:'';width:4px;height:22px;background:var(--blue);border-radius:2px;flex-shrink:0;display:block} .rel-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px} @media(max-width:520px){.rel-grid{grid-template-columns:1fr}} .rel-a{display:flex;align-items:center;justify-content:space-between;gap:12px;background:var(--bg);border:1px solid var(--rule);border-radius:var(--r);padding:13px 16px;text-decoration:none;color:var(--ink);transition:border-color .15s,background .15s,transform .15s} .rel-a::after{content:'→';color:var(--blue);font-weight:700;font-size:16px;flex-shrink:0;transition:transform .15s} .rel-a:hover{border-color:var(--blue);background:#f5f9ff;transform:translateX(2px)} .rel-a:hover::after{transform:translateX(3px)} .rel-a strong{display:block;font-weight:600;font-size:15px;color:var(--ink);margin-bottom:2px} .rel-a span{display:block;font-size:13px;color:var(--ink-soft);font-weight:400} /* ── Sub-page 2-column layout ─────────────────── */ .page-layout{display:grid;grid-template-columns:1fr 340px;gap:44px;padding-top:28px;align-items:start} @media(max-width:960px){.page-layout{grid-template-columns:1fr;gap:0}} .page-main{min-width:0} .page-sidebar{position:sticky;top:calc(var(--hh) + 20px);display:flex;flex-direction:column;gap:16px} /* Колонка грида по умолчанию не сжимается уже своего min-content: на 320px сайдбар держал 337px при колонке в 264 и уводил документ вправо на 45px. Ширина колонки на десктопе (340px) этим не затрагивается — правило живёт в том же медиазапросе, где раскладка уже схлопнута в одну колонку. */ @media(max-width:960px){.page-sidebar{position:static;padding:28px 0 0;min-width:0}} /* Sidebar widgets */ .sb-block{background:var(--bg-soft);border:1px solid var(--rule);border-radius:var(--r-lg);overflow:hidden} .sb-block--blue{background:linear-gradient(135deg,#2568b8,var(--blue-deep));border:none} .sb-block--amber{background:linear-gradient(135deg,#f0a918,var(--amber-dark));border:none} .sb-block--green{background:linear-gradient(135deg,#22986a,#157050);border:none} .sb-head{padding:16px 18px 12px;border-bottom:1px solid var(--rule)} .sb-block--blue .sb-head,.sb-block--amber .sb-head,.sb-block--green .sb-head{border-bottom:none;padding-bottom:0} .sb-title{font-family:'Bitter',serif;font-size:16px;font-weight:600;color:var(--ink);margin:0 0 2px} .sb-block--blue .sb-title,.sb-block--amber .sb-title,.sb-block--green .sb-title{color:#fff} .sb-sub{font-size:12.5px;color:var(--ink-muted)} .sb-block--blue .sb-sub,.sb-block--amber .sb-sub,.sb-block--green .sb-sub{color:rgba(255,255,255,.75)} .sb-body{padding:14px 18px 16px} .sb-links{display:flex;flex-direction:column;gap:0} .sb-links a{display:flex;align-items:baseline;justify-content:space-between;gap:8px;text-decoration:none;color:var(--ink);font-size:14.5px;padding:9px 0;border-bottom:1px solid var(--rule);transition:color .12s} .sb-links a:last-child{border-bottom:none;padding-bottom:0} .sb-links a:hover{color:var(--blue)} .sb-links a span{font-size:12px;color:var(--ink-muted);white-space:nowrap;flex-shrink:0} .sb-ad{background:var(--bg-soft);border:1px dashed var(--rule-dark);border-radius:var(--r);padding:18px;text-align:center;min-height:90px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;position:relative;overflow:hidden} .sb-ad::before{content:'';position:absolute;inset:0;background:repeating-linear-gradient(45deg,transparent,transparent 6px,rgba(200,208,218,.15) 6px,rgba(200,208,218,.15) 7px)} .sb-ad-lbl{font-size:10px;text-transform:uppercase;letter-spacing:.09em;color:var(--ink-muted);font-weight:700;position:relative} .sb-ad-txt{font-size:12px;color:#c0c8d4;position:relative} /* plain sidebar block with accent top bar */ .sb-block--accent{border-top:3px solid var(--blue)} /* Default plain sb-block gets accent too */ .sb-block:not(.sb-block--blue):not(.sb-block--amber):not(.sb-block--green){border-top:3px solid var(--blue)} /* Crumbs with padding in layout */ .crumbs-wrap{padding:18px 0 0} /* On mobile, sidebar goes after content */ @media(max-width:960px){.page-sidebar{border-top:1px solid var(--rule);margin-top:20px;padding-top:28px}} /* ── Sources ─────────────────────────────────── */ .sources{font-size:13.5px;color:var(--ink-soft);margin:28px 0;padding:14px 18px 14px 46px;background:var(--bg-soft);border-radius:var(--r);border:1px solid var(--rule);line-height:1.65;position:relative} .sources::before{content:'\00A0';font-size:14px;position:absolute;left:16px;top:14px;width:22px;height:22px;background:var(--ink-muted);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2'%3E%3Cpath d='M4 19.5A2.5 2.5 0 0 1 6.5 17H20'/%3E%3Cpath d='M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z'/%3E%3C/svg%3E") center/contain no-repeat;display:block} .sources strong{color:var(--ink);font-weight:600} .sources a{color:var(--blue)} /* ── RSY / Ad placeholder ────────────────────── */ .ad-block{background:var(--bg-soft);border:1px dashed var(--rule-dark);border-radius:var(--r);padding:20px;margin:28px 0;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:3px;min-height:80px} /* Контейнер реального рекламного кода (РСЯ): отступы + защита от переполнения */ .ap-ad{margin:28px 0;text-align:center;overflow:hidden} .ap-ad--sidebar{margin:0 0 18px} .ap-ad--home{margin:0 0 8px} .ap-ad>*{max-width:100%} .ap-ad iframe,.ap-ad ins,.ap-ad img{max-width:100%;height:auto} .ap-ad:empty{display:none} .ad-lbl{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-muted);font-weight:700} .ad-title{font-size:13px;color:#b8c0ca} /* ── SEO section ─────────────────────────────── */ .seo-s{padding:32px 0} .seo-s h2{font-family:'Bitter',serif;font-size:24px;margin:0 0 12px} .seo-s h3{font-size:18px;font-weight:600;margin:22px 0 8px} .seo-s p{font-size:16px;color:var(--ink-soft)} /* ── Footer ──────────────────────────────────── */ .site-footer{background:var(--blue-deep);margin-top:20px;padding:32px 0 28px} .footer-in{display:flex;flex-direction:column;gap:12px} .footer-logo{display:flex;align-items:center;gap:9px;text-decoration:none;color:#fff;font-family:'Bitter',serif;font-weight:700;font-size:18px;margin-bottom:4px} .footer-logo .fl-ic{width:30px;height:30px;background:rgba(255,255,255,.18);border-radius:7px;display:flex;align-items:center;justify-content:center;flex-shrink:0} .footer-links{display:flex;gap:20px;flex-wrap:wrap} .footer-links a{color:rgba(255,255,255,.65);text-decoration:none;font-size:14px;transition:color .12s} .footer-links a:hover{color:#fff} .disclaimer{font-size:13px;color:rgba(255,255,255,.42);line-height:1.65;max-width:760px} .footer-div{border-top:1px solid rgba(255,255,255,.12);padding-top:16px;margin-top:4px} /* ── Utility ─────────────────────────────────── */ a.inline-a{color:var(--blue);text-decoration:underline;text-underline-offset:2px} a.inline-a:hover{color:var(--blue-deep)} /* ── Print ───────────────────────────────────── */ @media print{.site-header,.site-footer,.ad-block,.burger,.mobile-nav{display:none!important}} /* ================================================================ VISUAL UPGRADE v3.0 ================================================================ */ /* ── ph-hero: высокий и мощный ──────────────── */ .ph-hero{min-height:420px} .ph-hero::before{background:linear-gradient(160deg,rgba(6,16,34,.88) 0%,rgba(15,40,80,.82) 55%,rgba(31,95,168,.4) 100%)} /* ── ph-hero stats bar ───────────────────────── */ .ph-hero-stats{display:flex;gap:0;border-top:1px solid rgba(255,255,255,.14);padding-top:18px;margin-top:16px;flex-wrap:wrap} .ph-stat{flex:1;min-width:80px;text-align:center;padding:0 10px;border-right:1px solid rgba(255,255,255,.11)} .ph-stat:last-child{border-right:none} .ph-stat-n{display:block;font-family:'Bitter',serif;font-size:24px;font-weight:700;color:#fff;line-height:1;margin-bottom:4px;letter-spacing:-.02em} .ph-stat-l{font-size:11px;color:rgba(255,255,255,.48);line-height:1.35;display:block} @media(max-width:480px){.ph-hero-stats{display:grid;grid-template-columns:1fr 1fr;gap:12px}.ph-stat{border-right:none;text-align:left;padding:0}} /* ── Trust bar (under main hero) ─────────────── */ .trust-bar{background:linear-gradient(90deg,#0c1b32,#14355e);padding:11px 0;border-bottom:1px solid rgba(255,255,255,.07)} .trust-bar-in{max-width:var(--maxw-wide);margin:0 auto;padding:0 28px;display:flex;gap:28px;align-items:center;flex-wrap:wrap} .trust-item{display:flex;align-items:center;gap:8px;color:rgba(255,255,255,.65);font-size:13px;white-space:nowrap} .trust-item svg{flex-shrink:0;opacity:.55} .trust-item strong{color:#fff;font-weight:600} @media(max-width:640px){.trust-bar-in{gap:14px;justify-content:flex-start}.trust-item{font-size:12px}} /* ── Inline article image ────────────────────── */ .content-img{margin:30px 0;border-radius:var(--r-lg);overflow:hidden;position:relative;border:1px solid var(--rule);box-shadow:var(--sh)} .content-img img{width:100%;height:250px;object-fit:cover;display:block;transition:transform .5s ease} .content-img:hover img{transform:scale(1.03)} .content-img-cap{font-size:13px;color:var(--ink-muted);padding:10px 16px;background:var(--bg-soft);border-top:1px solid var(--rule);line-height:1.5;display:flex;align-items:center;gap:6px} .content-img-cap::before{content:'📷';font-size:13px;opacity:.6;flex-shrink:0} .content-img--float{float:right;width:42%;margin:6px 0 18px 26px} .content-img--float img{height:200px} @media(max-width:660px){.content-img--float{float:none;width:100%;margin:20px 0}} /* ── Pull quote ──────────────────────────────── */ .pull-quote{border-left:4px solid var(--blue);padding:16px 22px;margin:26px 0;background:var(--blue-bg);border-radius:0 var(--r) var(--r) 0} .pull-quote p{font-family:'Bitter',serif;font-size:18px;font-weight:600;color:var(--blue-deep);margin:0;line-height:1.5;font-style:italic} /* ── Stronger deadline ───────────────────────── */ .deadline{background:linear-gradient(135deg,#fbecea,#fdf2f0);box-shadow:0 4px 28px rgba(192,57,43,.12);border-radius:var(--r-lg);border-left:6px solid var(--red);border-top:none;border-right:none;border-bottom:none} .dl-num{font-size:80px;line-height:.85;letter-spacing:-.04em} .dl-txt{font-size:17px} /* ── Ground cards — цветные ──────────────────── */ .ground{border-left:3px solid var(--blue)} .ground:nth-child(2n){border-left-color:var(--amber-dark)} .ground:nth-child(3n){border-left-color:var(--green)} .ground:nth-child(5n){border-left-color:var(--red)} /* ── Steps: соединительная линия ─────────────── */ .steps li{padding-bottom:22px} .steps li::before{box-shadow:0 2px 10px rgba(31,95,168,.25);width:38px;height:38px;font-size:16px} .steps li::after{content:'';position:absolute;left:18px;top:42px;bottom:4px;width:2px;background:linear-gradient(to bottom,rgba(31,95,168,.25),rgba(31,95,168,.04));pointer-events:none} .steps li:last-child::after{display:none} /* ── Tiles: левая полоска при hover ──────────── */ .tile{border-left:3px solid transparent} .tile:hover{border-left-color:var(--blue)} /* ── Ad blocks: publisher style ──────────────── */ .ad-block{background:#f7f9fb;border:1px solid #dde2e9;border-style:solid;padding:36px 20px 16px;position:relative;min-height:100px} .ad-block::before{content:'Реклама · Яндекс РСЯ';position:absolute;top:0;left:0;right:0;padding:5px 14px;background:#eef1f5;border-bottom:1px solid #dde2e9;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.09em;color:#9aa5b4;text-align:center} .ad-lbl{display:none} .ad-block .ad-title{color:#b8c2ce;font-size:13px;position:relative} .sb-ad{position:relative;padding-top:32px;background:#f7f9fb;border:1px solid #dde2e9;border-style:solid} .sb-ad::before{content:'Реклама';position:absolute;top:0;left:0;right:0;padding:5px 10px;background:#eef1f5;border-bottom:1px solid #dde2e9;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.09em;color:#9aa5b4;text-align:center} /* ── Mobile sticky CTA ───────────────────────── */ .mobile-sticky{display:none;position:fixed;bottom:0;left:0;right:0;z-index:45;background:linear-gradient(90deg,#0e2040,#163e6e);padding:10px 16px;align-items:center;gap:12px;box-shadow:0 -3px 18px rgba(0,0,0,.22)} @media(max-width:960px){.mobile-sticky{display:flex}} /* cookie-bar нужно поднять над мобильным CTA */ @media(max-width:960px){.cookie-bar{bottom:48px!important}} .mobile-sticky p{color:rgba(255,255,255,.82);font-size:13.5px;margin:0;flex:1;line-height:1.3;font-weight:500} .mobile-sticky strong{color:#fff} .mobile-sticky a{background:var(--amber);color:#2a1800;font-weight:700;padding:9px 18px;border-radius:var(--r-sm);white-space:nowrap;text-decoration:none;font-size:14px;flex-shrink:0;letter-spacing:.01em} .mobile-sticky a:hover{background:#f5b832} /* ── Hub tiles: категорийные цвета ───────────── */ .hub-g:nth-child(1) .tile:hover{border-left-color:var(--red)} .hub-g:nth-child(2) .tile:hover{border-left-color:var(--blue)} /* ── Sidebar links: акцент при hover ─────────── */ .sb-links a{position:relative;padding-left:0;transition:color .12s,padding-left .15s} .sb-links a:hover{color:var(--blue);padding-left:6px} .sb-links a::before{content:'';position:absolute;left:0;top:50%;transform:translateY(-50%) scaleY(0);width:2px;height:60%;background:var(--blue);border-radius:1px;transition:transform .15s} .sb-links a:hover::before{transform:translateY(-50%) scaleY(1)} /* ── Inline link arrow ───────────────────────── */ .link-arrow{font-weight:600;color:var(--blue);text-decoration:none;display:inline-flex;align-items:center;gap:5px;transition:gap .15s} .link-arrow:hover{gap:9px} .link-arrow::after{content:'→'} /* ================================================================ UPGRADE v4.0 — Round 2 ================================================================ */ /* Прогресс-бар чтения */ .rp{position:fixed;top:var(--hh);left:0;width:0%;height:3px;z-index:48;background:linear-gradient(90deg,var(--blue) 0%,var(--amber) 100%);transition:width .1s linear;pointer-events:none} /* Популярное — hover+число */ .pop-num{font-family:'Bitter',serif;font-size:14px;font-weight:700;color:var(--rule-dark);flex-shrink:0;min-width:22px} .pop-grid a{border-radius:var(--r-sm);padding-left:8px;margin-left:-8px;transition:color .12s,background .15s,padding-left .15s} .pop-grid a:hover{background:var(--blue-bg);padding-left:14px;margin-left:-14px;color:var(--blue)} /* Hub группы: иконка + цветной бар */ .hub-g-bar{display:flex;align-items:center;gap:12px;margin-bottom:6px;padding:20px 0 4px} .hub-g-ic{width:42px;height:42px;border-radius:11px;display:flex;align-items:center;justify-content:center;flex-shrink:0} .hub-g-ic--red{background:linear-gradient(135deg,#fbecea,#f5cdc8)} .hub-g-ic--blue{background:linear-gradient(135deg,#e8f0fb,#d0e1f5)} /* Urgency strip */ .urgency{display:flex;align-items:flex-start;gap:14px;background:linear-gradient(135deg,#fff8e8,#ffefc7);border:1px solid #f5d980;border-left:4px solid var(--amber);border-radius:var(--r);padding:14px 18px;margin:24px 0} .urgency-ic{font-size:20px;flex-shrink:0;line-height:1.4} .urgency p{margin:0;font-size:15px;color:#6b4a00;line-height:1.55} .urgency strong{color:#4a3000;font-weight:700} /* Виджет — trust-caption */ .wcap-trust{display:flex;align-items:center;justify-content:center;gap:5px;font-size:11.5px;color:var(--green);margin-top:9px;line-height:1.4;font-weight:500} /* SEO block — подложка */ .seo-s{background:var(--bg-soft);border-radius:var(--r-lg);padding:28px 32px;margin:8px 0 32px} .seo-s h2{font-size:22px;margin-bottom:10px} .seo-s h3{color:var(--blue-deep)} /* Wfield hover */ .wfield:hover{border-color:var(--blue-deep)} /* Tile с dot-категорией */ .tile-dot{width:8px;height:8px;border-radius:50%;display:inline-block;margin-right:6px;vertical-align:middle;flex-shrink:0} .tile-dot--red{background:var(--red)}.tile-dot--blue{background:var(--blue)} .tile-dot--amber{background:var(--amber)}.tile-dot--green{background:var(--green)} /* Pop-grid: нумерация через data-n */ .pop-grid a::before{content:attr(data-n);font-family:'Bitter',serif;font-size:13px;font-weight:700;color:var(--rule-dark);min-width:22px;flex-shrink:0;display:block} .pop-grid a{display:flex;gap:10px;align-items:baseline} /* ================================================================ UPGRADE v5.0 — Round 3 ================================================================ */ /* ── Footer: двухколонный ────────────────────── */ .site-footer{background:var(--blue-deep);padding:44px 0 28px} .footer-in{display:grid;grid-template-columns:240px 1fr;gap:20px 48px;align-items:start} @media(max-width:700px){.footer-in{grid-template-columns:1fr}} .footer-logo{font-size:20px;margin-bottom:6px} .footer-tagline{font-size:13px;color:rgba(255,255,255,.45);line-height:1.55;max-width:200px;margin:4px 0 0} .footer-right{display:flex;flex-direction:column;gap:14px} .footer-nav-row{display:flex;gap:28px;flex-wrap:wrap} .footer-nav-row a{color:rgba(255,255,255,.62);text-decoration:none;font-size:14px;transition:color .12s;white-space:nowrap} .footer-nav-row a:hover{color:#fff} .footer-links{display:flex;gap:20px;flex-wrap:wrap} .footer-links a{color:rgba(255,255,255,.45);text-decoration:none;font-size:13px;transition:color .12s} .footer-links a:hover{color:rgba(255,255,255,.75)} .footer-div{border-top:1px solid rgba(255,255,255,.1);padding-top:14px;grid-column:1 / -1;margin-top:8px} @media(min-width:701px){.footer-right{grid-column:2}} /* ── wfield: реальный инпут-стайл ────────────── */ .wfield{cursor:text;border:1.5px solid #d8dde6;background:#fafcff;border-radius:9px;font-size:14.5px;color:#8a96a8;transition:border-color .15s,box-shadow .15s} .wfield:hover{border-color:#a8b8d0} .wfield svg{color:#a8b8d0} /* ── Breadcrumbs: чётче ──────────────────────── */ .crumbs{font-size:13.5px;color:var(--ink-soft)} .crumbs a{color:var(--ink-soft);font-weight:500} .crumbs a:hover{color:var(--blue)} .crumbs .sep{color:var(--rule-dark);margin:0 8px;font-size:12px} .crumbs-wrap{padding:0} .crumbs-wrap .crumbs{padding:12px 0} /* ── Back to top ─────────────────────────────── */ .btt{position:fixed;bottom:68px;right:18px;width:40px;height:40px;border-radius:50%;background:var(--blue-deep);color:#fff;border:none;cursor:pointer;display:none;align-items:center;justify-content:center;box-shadow:0 3px 14px rgba(0,0,0,.22);z-index:44;transition:opacity .2s,transform .2s;opacity:0} .btt.vis{display:flex;opacity:1} .btt:hover{transform:translateY(-2px)} /* ── Card: stronger arrow ────────────────────── */ .card-arrow{background:var(--blue-bg);border-radius:var(--r-sm);padding:4px 10px;font-size:13px;align-self:flex-start;margin-top:auto} .card:hover .card-arrow{background:var(--blue);color:#fff} /* ── Reading time in .upd ─────────────────────── */ .read-min{background:rgba(255,255,255,.12);border-radius:12px;padding:2px 9px;font-size:12px;color:rgba(255,255,255,.65);margin-left:4px} /* ── Feat-strip: анимация цифр ───────────────── */ .feat-stat{transition:opacity .4s} .feat-stat.counted{opacity:1} /* ── Chip hover: active state ─────────────────── */ .chip:hover,.chip:focus{background:var(--blue);color:#fff;border-color:var(--blue)} /* ================================================================ v1.1 — вынос инлайн-стилей в классы + недостающие классы. Селекторы новые (существующие не дублируются). Значения 1:1 с прежними инлайнами. ================================================================ */ /* Логотип из настроек темы (custom-logo). Если не загружен — встроенный знак. */ .custom-logo-link{display:flex;align-items:center;flex-shrink:0;line-height:0} .custom-logo{height:36px;width:auto;display:block} .footer-logo .fl-img{height:26px;width:auto;display:block} /* Секции главной: вертикальный ритм (в эталоне жил в inline-