/* Theme Name: Центр Медиа Технологий 2026 Theme URI: https://cmediatech.ru/ Author: Центр Медиа Технологий Description: Собственная тема cmediatech.ru: «видоискатель» из логотипа, медиа и технологии на одном сайте. Работает без Seosight, KingComposer и Unyson. Version: 1.0.0 Requires PHP: 8.1 License: GPL-2.0-or-later Text Domain: cmtch */ /* ========================================================================== Шрифты (свои копии, без запроса к Google) ========================================================================== */ @font-face{ font-family:"Geologica"; font-style:normal; font-weight:400 800; font-display:swap; src:url(fonts/geologica-cyr.woff2) format("woff2"); unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; } @font-face{ font-family:"Geologica"; font-style:normal; font-weight:400 800; font-display:swap; src:url(fonts/geologica-lat.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:"Golos Text"; font-style:normal; font-weight:400 600; font-display:swap; src:url(fonts/golos-cyr.woff2) format("woff2"); unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; } @font-face{ font-family:"Golos Text"; font-style:normal; font-weight:400 600; font-display:swap; src:url(fonts/golos-lat.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:"IBM Plex Mono"; font-style:normal; font-weight:400; font-display:swap; src:url(fonts/plexmono-400-cyr.woff2) format("woff2"); unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; } @font-face{ font-family:"IBM Plex Mono"; font-style:normal; font-weight:400; font-display:swap; src:url(fonts/plexmono-400-lat.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:"IBM Plex Mono"; font-style:normal; font-weight:500; font-display:swap; src:url(fonts/plexmono-500-cyr.woff2) format("woff2"); unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; } @font-face{ font-family:"IBM Plex Mono"; font-style:normal; font-weight:500; font-display:swap; src:url(fonts/plexmono-500-lat.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{ --paper:#FFFFFF; --ink:#0F1214; --text:#2B3337; --mute:#5B656B; --line:#E2E7E9; --rec:#E0271F; --teal:#178E8C; --teal-l:#4CC2C0; --soft:#F3F6F6; --tint:#E7F4F3; --d-bg:#0A0E13; --d-s1:#111820; --d-line:#223040; --d-tx:#E7EDF2; --d-mute:#8C9AA8; --warm:#F0B454; --f-body:"Golos Text",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif; --f-head:"Geologica","Golos Text",system-ui,-apple-system,"Segoe UI",Arial,sans-serif; --f-mono:"IBM Plex Mono",ui-monospace,"SFMono-Regular",Consolas,monospace; --gut:clamp(16px,4vw,48px); --head-h:74px; color-scheme:light; } *,*::before,*::after{ box-sizing:border-box; } html{ -webkit-text-size-adjust:100%; scroll-padding-top:calc(var(--head-h) + 12px); } body{ margin:0; background:var(--paper); color:var(--ink); font:400 16px/1.6 var(--f-body); -webkit-font-smoothing:antialiased; } img,svg,video{ max-width:100%; height:auto; } a{ color:inherit; text-decoration:none; } a:hover{ color:var(--teal); } :focus-visible{ outline:2px solid var(--teal); outline-offset:2px; } h1,h2,h3,h4,h5,h6{ font-family:var(--f-head); color:var(--ink); text-wrap:balance; } p{ text-wrap:pretty; } .screen-reader-text{ position:absolute!important; width:1px; height:1px; overflow:hidden; clip:rect(1px,1px,1px,1px); white-space:nowrap; } .skip-link:focus{ position:fixed; left:12px; top:12px; z-index:1000; width:auto; height:auto; clip:auto; padding:10px 14px; background:var(--ink); color:#fff; } .w{ max-width:1200px; margin-inline:auto; padding-inline:var(--gut); } .mono{ font-family:var(--f-mono); font-size:12px; letter-spacing:.08em; text-transform:uppercase; } .eyebrow{ color:var(--mute); } .new{ display:inline-block; padding:3px 7px; border-radius:3px; background:var(--rec); color:#fff; font:500 10.5px/1 var(--f-mono); letter-spacing:.08em; vertical-align:middle; margin-left:6px; } /* Видоискатель: уголки рамки из логотипа */ .vf{ --lc:var(--ink); --lw:2px; --ll:26px; position:relative; background: linear-gradient(var(--lc),var(--lc)) left top/var(--ll) var(--lw) no-repeat, linear-gradient(var(--lc),var(--lc)) left top/var(--lw) var(--ll) no-repeat, linear-gradient(var(--lc),var(--lc)) right top/var(--ll) var(--lw) no-repeat, linear-gradient(var(--lc),var(--lc)) right top/var(--lw) var(--ll) no-repeat, linear-gradient(var(--lc),var(--lc)) left bottom/var(--ll) var(--lw) no-repeat, linear-gradient(var(--lc),var(--lc)) left bottom/var(--lw) var(--ll) no-repeat, linear-gradient(var(--lc),var(--lc)) right bottom/var(--ll) var(--lw) no-repeat, linear-gradient(var(--lc),var(--lc)) right bottom/var(--lw) var(--ll) no-repeat; } .btn{ display:inline-flex; align-items:center; justify-content:center; gap:10px; padding:14px 22px; border-radius:2px; font:500 15px/1.1 var(--f-body); border:1.5px solid var(--ink); color:var(--ink); background:transparent; cursor:pointer; transition:background-color .2s,color .2s,border-color .2s; } .btn:hover{ background:var(--ink); color:#fff; } .btn--ink{ background:var(--ink); color:#fff; } .btn--ink::before{ content:""; width:8px; height:8px; border-radius:50%; background:var(--rec); flex:none; } .btn--ink:hover{ background:#262D31; border-color:#262D31; color:#fff; } .btn--tg::before{ content:""; width:18px; height:18px; flex:none; background:currentColor; -webkit-mask:var(--tg-icon) center/contain no-repeat; mask:var(--tg-icon) center/contain no-repeat; } .btn--sm{ padding:10px 16px; font-size:14px; } :root{ --tg-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M21.9 4.3 18.7 19.4c-.2 1-.9 1.3-1.7.8l-4.8-3.6-2.3 2.2c-.3.3-.5.5-1 .5l.3-4.9 8.9-8c.4-.3-.1-.5-.6-.2L6.5 13.1 1.8 11.6c-1-.3-1-1 .2-1.5L20.6 3c.9-.3 1.6.2 1.3 1.3z'/%3E%3C/svg%3E"); } .logo{ --lc:currentColor; --lw:2px; --ll:11px; position:relative; display:inline-flex; flex-direction:column; justify-content:center; padding:5px 13px 6px; line-height:1; color:var(--ink); flex:none; background: linear-gradient(var(--lc),var(--lc)) left top/var(--ll) var(--lw) no-repeat, linear-gradient(var(--lc),var(--lc)) left top/var(--lw) var(--ll) no-repeat, linear-gradient(var(--lc),var(--lc)) right top/var(--ll) var(--lw) no-repeat, linear-gradient(var(--lc),var(--lc)) right top/var(--lw) var(--ll) no-repeat, linear-gradient(var(--lc),var(--lc)) left bottom/var(--ll) var(--lw) no-repeat, linear-gradient(var(--lc),var(--lc)) left bottom/var(--lw) var(--ll) no-repeat, linear-gradient(var(--lc),var(--lc)) right bottom/var(--ll) var(--lw) no-repeat, linear-gradient(var(--lc),var(--lc)) right bottom/var(--lw) var(--ll) no-repeat; } .logo:hover{ color:var(--ink); } .logo__t{ font:400 9.5px/1 var(--f-head); letter-spacing:.22em; } .logo__b{ font:800 16px/1.05 var(--f-head); letter-spacing:.08em; margin-top:3px; } .logo__dot{ position:absolute; right:17px; top:6px; width:7px; height:7px; border-radius:50%; background:var(--rec); } /* ========================================================================== Шапка ========================================================================== */ .site-head{ position:sticky; top:0; z-index:50; background:rgba(255,255,255,.96); border-bottom:1px solid var(--line); backdrop-filter:saturate(1.2) blur(8px); } .admin-bar .site-head{ top:32px; } @media (max-width:782px){ .admin-bar .site-head{ top:0; } } .site-head__in{ display:flex; align-items:center; gap:24px; min-height:var(--head-h); } .site-nav{ margin-left:auto; } .site-nav ul{ list-style:none; margin:0; padding:0; } .site-nav > ul{ display:flex; gap:4px; } .site-nav li{ position:relative; } .site-nav > ul > li > a{ display:flex; align-items:center; gap:6px; padding:10px 10px; font-size:15px; border-radius:2px; } .site-nav > ul > li.menu-item-has-children > a::after{ content:""; width:6px; height:6px; border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor; transform:translateY(-2px) rotate(45deg); opacity:.6; } .site-nav .current-menu-item > a, .site-nav .current-menu-ancestor > a, .site-nav .current_page_item > a{ color:var(--teal); } .site-nav .sub-menu{ position:absolute; left:0; top:100%; min-width:290px; padding:10px; background:#fff; border:1px solid var(--line); box-shadow:0 18px 40px rgba(15,18,20,.10); opacity:0; visibility:hidden; pointer-events:none; transform:translateY(6px); transition:opacity .15s,transform .15s,visibility 0s .15s; } /* Открытие по наведению ведёт theme.js (с задержкой, чтобы меню не выпрыгивало от случайного пролёта мыши); фокус раскрывает меню только с клавиатуры. */ .site-nav li.is-open > .sub-menu, .site-nav li:has(> a:focus-visible) > .sub-menu, .site-nav li:has(.sub-menu :focus-visible) > .sub-menu, html:not(.js) .site-nav li:hover > .sub-menu{ opacity:1; visibility:visible; pointer-events:auto; transform:none; transition:opacity .15s,transform .15s,visibility 0s; } .site-nav .sub-menu a{ display:block; padding:8px 10px; font-size:14.5px; line-height:1.35; } .site-nav .sub-menu a:hover{ background:var(--soft); color:var(--ink); } .site-nav .sub-menu .sub-menu{ position:static; min-width:0; padding:0 0 4px 12px; border:0; box-shadow:none; opacity:1; visibility:inherit; pointer-events:inherit; transform:none; background:none; transition:none; } .site-nav .sub-menu .sub-menu a{ font-size:13.5px; color:var(--mute); padding-block:5px; } .site-nav .sub-menu .sub-menu .sub-menu{ display:none; } /* Большое меню услуг: группы колонками */ .site-nav li.is-mega > .sub-menu{ width:min(760px,calc(100vw - 48px)); column-count:3; column-gap:12px; padding:14px; } .site-nav li.is-mega > .sub-menu > li{ break-inside:avoid; padding-bottom:6px; } .site-nav li.is-mega > .sub-menu > li > a{ font-weight:600; font-size:14.5px; } .site-nav li.is-mega > .sub-menu > li > .sub-menu{ padding-left:0; } .site-nav li.is-mega > .sub-menu > li > .sub-menu a{ padding-left:10px; } .site-head__tel{ font:500 15px/1.2 var(--f-body); white-space:nowrap; } .site-head__tg{ white-space:nowrap; } .burger{ display:none; margin-left:auto; width:44px; height:44px; border:1.5px solid var(--ink); background:none; border-radius:2px; cursor:pointer; position:relative; } .burger span, .burger::before, .burger::after{ content:""; position:absolute; left:11px; right:11px; height:2px; background:var(--ink); transition:transform .2s,opacity .2s; } .burger::before{ top:14px; } .burger span{ top:20px; } .burger::after{ top:26px; } .nav-open .burger::before{ transform:translateY(6px) rotate(45deg); } .nav-open .burger span{ opacity:0; } .nav-open .burger::after{ transform:translateY(-6px) rotate(-45deg); } @media (max-width:1180px){ .site-head__tel{ display:none; } } @media (max-width:1060px){ .burger{ display:block; } .site-head__tg{ margin-left:0; } .site-nav{ display:none; position:fixed; inset:var(--head-h) 0 0 0; overflow:auto; background:#fff; border-top:1px solid var(--line); padding:12px var(--gut) 40px; margin:0; } .admin-bar .site-nav{ top:calc(var(--head-h) + 46px); } .nav-open .site-nav{ display:block; } .nav-open{ overflow:hidden; } .site-nav > ul{ display:block; } .site-nav > ul > li{ border-bottom:1px solid var(--line); } .site-nav > ul > li > a{ padding:14px 0; font:600 19px/1.2 var(--f-head); } .site-nav > ul > li.menu-item-has-children > a::after{ display:none; } .site-nav .sub-menu, .site-nav li.is-mega > .sub-menu, .site-nav .sub-menu .sub-menu{ position:static; display:block; opacity:1; visibility:visible; pointer-events:auto; transform:none; box-shadow:none; border:0; padding:0 0 12px; min-width:0; transition:none; } .site-nav .sub-menu a{ padding:7px 0; } } @media (max-width:560px){ .site-head__tg .btn__l{ display:none; } .site-head__tg{ padding:12px; } .site-head__tg::before{ margin:0; } .site-head__in{ gap:12px; } } /* ========================================================================== Общие секции ========================================================================== */ .sec{ padding-block:clamp(52px,7vw,84px); } .sec--soft{ background:var(--soft); } .sh{ display:flex; align-items:end; justify-content:space-between; gap:20px; margin-bottom:32px; flex-wrap:wrap; } .sh p{ margin:0; color:var(--mute); max-width:50ch; } .h2, .sec h2{ font:800 clamp(28px,3.4vw,44px)/1.07 var(--f-head); letter-spacing:-.018em; margin:8px 0 0; } /* ========================================================================== Главная ========================================================================== */ /* Общие элементы тёмных блоков: кнопки и строка про ИИ-ассистента */ .lead{ font-size:18px; color:var(--mute); max-width:46ch; margin:0 0 26px; } .acts{ display:flex; gap:12px; flex-wrap:wrap; } @keyframes hx-blink{ 50%{ opacity:.25; } } .btn--glow{ background:var(--teal-l); border-color:var(--teal-l); color:var(--ink); font-weight:600; box-shadow:0 10px 40px -10px rgba(76,194,192,.7); } .btn--glow:hover{ background:#fff; border-color:#fff; color:var(--ink); } .btn--line{ border-color:rgba(231,237,242,.35); color:#fff; } .btn--line:hover{ background:#fff; border-color:#fff; color:var(--ink); } .hx__note{ margin:18px 0 0; font-size:14px; color:var(--d-mute); } .hx__note i{ display:inline-block; vertical-align:1px; width:8px; height:8px; margin-right:10px; border-radius:50%; background:var(--teal-l); box-shadow:0 0 0 4px rgba(76,194,192,.18); } .hx__note a{ color:#fff; border-bottom:1px solid rgba(255,255,255,.3); } .hx__note a:hover{ color:var(--teal-l); border-color:var(--teal-l); } .facts{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); border-top:1px solid var(--ink); } .facts div{ padding:18px 18px 6px 0; } .facts b{ display:block; font:600 34px/1 var(--f-head); font-variant-numeric:tabular-nums; } .facts span{ color:var(--mute); font-size:14px; } .feat{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.05fr); gap:56px; align-items:center; padding-block:44px; border-top:1px solid var(--line); } .feat:first-of-type{ border-top:0; padding-top:0; } .feat--flip .feat__art{ order:-1; } .feat h3{ font:800 clamp(24px,2.6vw,34px)/1.1 var(--f-head); letter-spacing:-.015em; margin:10px 0 12px; } .feat > div > p{ margin:0 0 16px; color:#3E474C; max-width:52ch; } .feat ul{ margin:0 0 18px; padding:0; list-style:none; display:grid; gap:8px; } .feat li{ position:relative; padding-left:26px; font-size:15.5px; } .feat li::before{ content:""; position:absolute; left:0; top:.55em; width:8px; height:8px; background:var(--teal); } .feat li a{ color:var(--teal); text-decoration:underline; text-underline-offset:3px; } .feat__meta{ display:flex; flex-wrap:wrap; gap:8px 18px; color:var(--teal); } .feat__art{ padding:18px; } .feat__more{ margin:18px 0 0; } .reel{ background:var(--ink); } .reel video{ display:block; width:100%; aspect-ratio:16/9; background:var(--ink); } .panel{ background:var(--soft); padding:22px; } .flow{ display:grid; grid-template-columns:minmax(0,1fr) 26px minmax(0,1fr) 26px minmax(0,1fr); grid-template-rows:repeat(3,auto); gap:10px 0; align-items:center; } .node{ background:#fff; border:1px solid var(--line); padding:10px 12px; min-width:0; } .node b{ display:block; font:600 14px/1.25 var(--f-head); } .node span{ color:var(--mute); font-size:12.5px; } .node .mono{ color:var(--teal); display:block; margin-bottom:4px; font-size:10px; } .node--hub{ align-self:stretch; display:flex; flex-direction:column; justify-content:center; background:var(--ink); border-color:var(--ink); } .node--hub b{ color:#fff; font-size:15px; margin-bottom:6px; } .node--hub span{ color:#AAB4B9; } .node--hub .mono{ color:var(--teal-l); } .node--hot{ border-color:var(--rec); box-shadow:inset 3px 0 0 var(--rec); } .link{ height:2px; background:repeating-linear-gradient(90deg,var(--teal) 0 5px,transparent 5px 10px); background-size:20px 2px; animation:cmflow .9s linear infinite; } @keyframes cmflow{ to{ background-position:20px 0; } } .flow__foot{ display:flex; justify-content:space-between; gap:10px; margin-top:14px; color:var(--mute); } .chat{ display:grid; gap:12px; } .msg{ max-width:86%; padding:12px 14px; font-size:14.5px; line-height:1.45; } .msg--q{ justify-self:end; background:var(--ink); color:#fff; border-radius:12px 12px 2px 12px; } .msg--a{ background:#fff; border:1px solid var(--line); border-radius:12px 12px 12px 2px; } .msg--a .mono{ display:block; color:var(--teal); margin-bottom:6px; font-size:10.5px; } .src{ display:flex; flex-wrap:wrap; gap:6px; margin-top:10px; } .src span{ padding:4px 8px; border:1px solid var(--line); border-radius:4px; font:400 12px/1.2 var(--f-mono); color:var(--mute); background:var(--soft); } .chat__foot{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin-top:6px; } .chat__foot div{ background:#fff; border:1px solid var(--line); padding:10px 12px; } .chat__foot b{ display:block; font:600 20px/1 var(--f-head); } .chat__foot span{ color:var(--mute); font-size:12.5px; } .anim svg{ width:100%; height:auto; display:block; } .anim__bar{ display:flex; justify-content:space-between; margin-top:12px; color:var(--mute); } .ball{ animation:cmbounce 1.1s cubic-bezier(.3,0,.7,1) infinite alternate; transform-origin:center bottom; transform-box:fill-box; } @keyframes cmbounce{ from{ transform:translateY(-92px) scale(.94,1.06); } 88%{ transform:translateY(0) scale(1,1); } to{ transform:translateY(0) scale(1.14,.84); } } .works{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:34px 28px; } .work{ display:block; } .work .vf{ --ll:0px; padding:10px; transition:--ll .2s; } .work:hover .vf{ --ll:20px; } .work:hover{ color:var(--ink); } .work img{ display:block; width:100%; aspect-ratio:16/10; object-fit:cover; object-position:top; } .work h3{ font:600 19px/1.25 var(--f-head); margin:12px 0 4px; } .work p{ margin:0 0 8px; color:var(--mute); font-size:14.5px; } .work .mono{ color:var(--teal); } .chips{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:26px; } .chips a, .chips button{ padding:8px 12px; border:1px solid var(--line); font:400 14px/1.3 var(--f-body); border-radius:2px; background:#fff; color:var(--ink); cursor:pointer; } .chips a:hover, .chips button:hover{ border-color:var(--ink); color:var(--ink); } .chips .on, .chips [aria-pressed="true"]{ background:var(--ink); color:#fff; border-color:var(--ink); } .chips .on:hover, .chips [aria-pressed="true"]:hover{ color:#fff; } .chips small{ opacity:.6; margin-left:4px; font-variant-numeric:tabular-nums; } .dark{ background:var(--d-bg); color:var(--d-tx); } .dark .eyebrow{ color:var(--teal-l); } .dark h2{ color:#fff; } .dark .sh p{ color:var(--d-mute); } .prods{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; } .prod{ background:var(--d-s1); border:1px solid var(--d-line); border-radius:14px; overflow:hidden; display:flex; flex-direction:column; } .prod__bar{ display:flex; align-items:center; gap:6px; padding:9px 12px; border-bottom:1px solid var(--d-line); color:var(--d-mute); } .prod__bar i{ width:9px; height:9px; border-radius:50%; background:#2A3747; } .prod__bar .mono{ margin-left:8px; font-size:11px; text-transform:none; letter-spacing:.02em; } .prod__bar .live{ margin-left:auto; color:var(--warm); display:inline-flex; align-items:center; gap:6px; } .prod__bar .live::before{ content:""; width:6px; height:6px; border-radius:50%; background:var(--warm); box-shadow:0 0 0 3px rgba(240,180,84,.18); } .prod img{ display:block; width:100%; aspect-ratio:16/8; object-fit:cover; object-position:top; } .prod__b{ padding:18px 20px 20px; display:flex; flex-direction:column; gap:8px; flex:1; } .prod__k{ display:flex; justify-content:space-between; gap:10px; color:var(--d-mute); } .prod h3{ font:700 21px/1.2 var(--f-head); margin:0; color:#fff; } .prod h3 a:hover{ color:var(--teal-l); } .prod p{ margin:0; color:var(--d-mute); font-size:15px; } .prod .for{ margin-top:auto; padding-top:12px; border-top:1px solid var(--d-line); color:var(--d-tx); font-size:14.5px; } .prod .for b{ color:var(--teal-l); font-weight:500; } .prod__links{ display:flex; gap:16px; flex-wrap:wrap; padding-top:4px; font-size:14px; } .prod__links a{ color:var(--teal-l); } .prod__links a:hover{ color:#fff; } .plugs{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; margin-top:18px; } .plug{ display:grid; grid-template-columns:150px minmax(0,1fr); gap:18px; align-items:center; border:1px solid var(--d-line); border-radius:14px; padding:14px; } .plug:hover{ border-color:#35485E; color:inherit; } .plug img{ display:block; width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:8px; } .plug h3{ font:700 18px/1.2 var(--f-head); margin:6px 0 4px; color:#fff; } .plug p{ margin:0; color:var(--d-mute); font-size:14.5px; } .plug .mono{ color:var(--warm); } /* Проверьте на себе: Telegram */ .tgdemo{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.9fr); gap:56px; align-items:center; } .tgdemo h2{ margin-bottom:14px; } .tgdemo > div > p{ color:#3E474C; max-width:52ch; margin:0 0 14px; } .tgdemo__handle{ font:700 clamp(26px,3vw,36px)/1 var(--f-head); color:var(--teal); letter-spacing:-.01em; } .tgdemo__row{ display:flex; align-items:center; gap:18px; flex-wrap:wrap; margin:22px 0 0; } .tgdemo__list{ list-style:none; margin:18px 0 0; padding:0; display:grid; gap:8px; } .tgdemo__list li{ position:relative; padding-left:26px; font-size:15px; } .tgdemo__list li::before{ content:""; position:absolute; left:0; top:.55em; width:8px; height:8px; background:var(--rec); border-radius:50%; } .phone{ max-width:400px; margin-inline:auto; width:100%; padding:16px; } .phone__in{ border:1.5px solid var(--ink); border-radius:26px; overflow:hidden; background:#E9EEF0; } .phone__bar{ display:flex; align-items:center; gap:10px; padding:12px 14px; background:#fff; border-bottom:1px solid var(--line); } .phone__ava{ width:36px; height:36px; border-radius:50%; background:var(--ink); color:#fff; display:grid; place-items:center; font:700 15px/1 var(--f-head); flex:none; position:relative; } .phone__ava::after{ content:""; position:absolute; right:0; bottom:0; width:10px; height:10px; border-radius:50%; background:var(--teal-l); border:2px solid #fff; } .phone__bar b{ display:block; font:600 15px/1.2 var(--f-head); } .phone__bar span{ font-size:12.5px; color:var(--teal); } .phone__chat{ display:grid; gap:10px; padding:16px 12px 18px; } .phone .msg{ max-width:88%; font-size:14px; } .phone .msg--q{ background:#fff; color:var(--ink); border:1px solid var(--line); justify-self:end; border-radius:14px 14px 3px 14px; } .phone .msg--a{ border-color:transparent; background:#fff; box-shadow:0 1px 0 rgba(0,0,0,.04); } .phone__typing{ display:inline-flex; gap:4px; padding:10px 12px; background:#fff; border-radius:14px 14px 14px 3px; width:max-content; } .phone__typing i{ width:6px; height:6px; border-radius:50%; background:var(--mute); opacity:.5; animation:cmtype 1.2s infinite; } .phone__typing i:nth-child(2){ animation-delay:.2s; } .phone__typing i:nth-child(3){ animation-delay:.4s; } @keyframes cmtype{ 0%,60%,100%{ opacity:.3; transform:none; } 30%{ opacity:1; transform:translateY(-2px); } } .phone__cap{ text-align:center; margin-top:10px; color:var(--mute); } .steps{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); counter-reset:st; border-top:1px solid var(--ink); } .step{ padding:20px 22px 6px 0; } .step + .step{ padding-left:22px; border-left:1px solid var(--line); } .step::before{ counter-increment:st; content:"0" counter(st); font:500 12px/1 var(--f-mono); color:var(--rec); } .step h3{ font:700 19px/1.25 var(--f-head); margin:12px 0 6px; } .step p{ margin:0; color:var(--mute); font-size:14.5px; } .posts{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:34px 28px; } .pcard{ display:flex; flex-direction:column; } .pcard__img{ display:block; aspect-ratio:16/9; overflow:hidden; background:var(--soft); margin-bottom:14px; } .pcard__img img{ display:block; width:100%; height:100%; object-fit:cover; transition:transform .4s; } .pcard:hover .pcard__img img{ transform:scale(1.03); } .pcard .mono{ color:var(--mute); } .pcard h3{ font:600 19px/1.3 var(--f-head); margin:6px 0 6px; } .pcard p{ margin:0; color:var(--mute); font-size:14.5px; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; } .cta{ background:var(--ink); color:#F2F4F5; padding-block:clamp(52px,7vw,84px); } .cta .vf{ --lc:#F2F4F5; padding:clamp(24px,5vw,64px); display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,1fr); gap:40px; align-items:end; } .cta h2{ color:#fff; font:800 clamp(28px,3.4vw,44px)/1.07 var(--f-head); letter-spacing:-.018em; margin:8px 0 0; } .cta p{ color:#AAB4B9; margin:12px 0 0; } .cta .btn{ border-color:#fff; background:#fff; color:var(--ink); } .cta .btn:hover{ background:transparent; color:#fff; } .contacts{ display:grid; gap:12px; font-size:17px; } .contacts span{ color:#AAB4B9; font-size:13px; display:block; } .contacts a:hover{ color:var(--teal-l); } .contacts .is-tg{ color:var(--teal-l); font-weight:600; } /* ========================================================================== Подвал ========================================================================== */ .site-foot{ border-top:1px solid var(--line); } .site-foot__grid{ display:grid; grid-template-columns:1.3fr repeat(3,minmax(0,1fr)); gap:28px; padding-block:44px 30px; font-size:14px; color:var(--mute); } .site-foot h4{ margin:0 0 10px; font:600 13px/1.2 var(--f-body); color:var(--ink); } .site-foot ul{ list-style:none; margin:0; padding:0; display:grid; gap:7px; } .site-foot a:hover{ color:var(--teal); } .site-foot__about p{ margin:14px 0 0; max-width:32ch; } .site-foot__tg{ display:inline-flex; align-items:center; gap:8px; margin-top:14px; color:var(--ink); font-weight:600; } .site-foot__tg::before{ content:""; width:18px; height:18px; background:var(--teal); -webkit-mask:var(--tg-icon) center/contain no-repeat; mask:var(--tg-icon) center/contain no-repeat; } .site-foot__tg small{ font-weight:400; color:var(--mute); } .copy{ border-top:1px solid var(--line); } .copy .w{ display:flex; justify-content:space-between; gap:8px 20px; padding-block:18px; color:var(--mute); font-size:13px; flex-wrap:wrap; } .copy a:hover{ color:var(--teal); } /* ========================================================================== Внутренние страницы ========================================================================== */ .phead{ padding-block:clamp(30px,5vw,56px) 0; } .phead::after{ content:""; display:block; height:1px; background:var(--line); margin-top:clamp(22px,3vw,34px); } .phead h1{ font:800 clamp(30px,4.2vw,54px)/1.06 var(--f-head); letter-spacing:-.02em; margin:12px 0 0; max-width:22ch; } .phead__lead{ margin:16px 0 0; font-size:18px; color:var(--mute); max-width:60ch; } .phead__lead p{ margin:0 0 8px; } .crumbs{ display:flex; flex-wrap:wrap; gap:6px 10px; color:var(--mute); } .crumbs a:hover{ color:var(--teal); } .crumbs span[aria-hidden]{ color:var(--line); } .phead__meta{ display:flex; flex-wrap:wrap; gap:8px 18px; margin-top:16px; color:var(--mute); } /* Текст записи и страницы */ .entry{ font-size:17px; line-height:1.7; color:var(--text); } .entry > *:first-child{ margin-top:0; } .entry h2{ font:800 clamp(24px,2.6vw,34px)/1.15 var(--f-head); letter-spacing:-.015em; margin:1.8em 0 .6em; color:var(--ink); } .entry h3{ font:700 clamp(20px,2vw,24px)/1.25 var(--f-head); margin:1.6em 0 .5em; color:var(--ink); } .entry h4, .entry h5, .entry h6{ font:700 18px/1.3 var(--f-head); margin:1.4em 0 .4em; color:var(--ink); } .entry p{ margin:0 0 1em; } .entry a{ color:var(--teal); text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:3px; } .entry a:hover{ color:var(--ink); } .entry ul, .entry ol{ margin:0 0 1.2em; padding-left:1.3em; } .entry li{ margin:.35em 0; } .entry ul li::marker{ color:var(--teal); } .entry img{ height:auto; } .entry blockquote{ margin:1.5em 0; padding:4px 0 4px 22px; border-left:3px solid var(--rec); font-size:1.08em; color:var(--ink); } .entry table{ width:100%; border-collapse:collapse; margin:1.5em 0; font-size:15px; display:block; overflow-x:auto; } .entry th, .entry td{ border:1px solid var(--line); padding:10px 12px; text-align:left; vertical-align:top; } .entry th{ background:var(--soft); } .entry figure{ margin:1.6em 0; } .entry figcaption, .entry .wp-caption-text{ font-size:14px; color:var(--mute); margin-top:8px; } .entry iframe{ max-width:100%; } .entry .aligncenter{ display:block; margin-inline:auto; } .entry .alignleft{ float:left; margin:.3em 1.4em 1em 0; } .entry .alignright{ float:right; margin:.3em 0 1em 1.4em; } .entry hr{ border:0; border-top:1px solid var(--line); margin:2em 0; } .entry code{ font-family:var(--f-mono); font-size:.9em; background:var(--soft); padding:.1em .35em; } .entry pre{ font-family:var(--f-mono); font-size:14px; background:var(--soft); padding:16px; overflow:auto; } .page-body{ padding-block:clamp(34px,5vw,60px); } .page-body--narrow .entry{ max-width:760px; } /* ========================================================================== Страницы из секций (.blocks): так выглядят страницы, переведённые из KingComposer, и так же их можно собирать вручную.
…
…
…
========================================================================== */ .blocks{ padding-bottom:10px; } .blk{ padding-block:clamp(28px,4vw,48px); } .blk:nth-of-type(even){ background:var(--soft); } .blk > .w > *:last-child, .col > *:last-child{ margin-bottom:0; } .cols{ display:flex; flex-wrap:wrap; margin-inline:-14px; margin-bottom:12px; } .cols--middle{ align-items:center; } .col{ width:100%; padding-inline:14px; min-width:0; } @media (min-width:1000px){ .col{ width:var(--w,100%); } } .entry .btn, .entry .cm-promo, .entry .cm-video, .entry .cm-more{ text-decoration:none; } .entry .btn{ color:var(--ink); } .entry .btn--ink, .entry .btn:hover{ color:#fff; } .cm-gallery{ display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:12px; margin:0 0 24px; } .cm-gallery img{ display:block; width:100%; aspect-ratio:4/3; object-fit:cover; } /* Заголовок секции (бывший crum_title) */ .crumina-heading{ margin:0 0 22px; } .crumina-heading.align-center{ text-align:center; } .crumina-heading.align-center .heading-title, .crumina-heading.align-center .heading-text{ margin-inline:auto; } .crumina-heading.align-right{ text-align:right; } .crumina-heading .heading-title{ font:800 clamp(26px,3vw,40px)/1.1 var(--f-head); letter-spacing:-.018em; margin:0; color:var(--ink); max-width:26ch; } .crumina-heading h3.heading-title, .crumina-heading h4.heading-title{ font-size:clamp(21px,2.2vw,28px); } .crumina-heading .heading-text{ margin:10px 0 0; font:400 17px/1.55 var(--f-body)!important; color:var(--mute)!important; max-width:62ch; } .crumina-heading .heading-decoration{ display:none; } .crumina-heading.align-center::after{ content:""; display:block; width:8px; height:8px; border-radius:50%; background:var(--rec); margin:16px auto 0; } /* Элементы, перенесённые из KingComposer: карточки, списки, промо, видео */ .cm-legacy{ margin:0 0 24px; } .cm-img{ margin:0 0 20px; } .cm-img img{ display:block; max-width:100%; height:auto; } .cm-img.aligncenter img{ margin-inline:auto; } .cm-list ul{ list-style:none; padding:0; margin:0 0 1em; display:grid; gap:8px; } .cm-list li{ position:relative; padding-left:26px; margin:0; } .cm-list li::before{ content:""; position:absolute; left:0; top:.62em; width:8px; height:8px; background:var(--teal); } .cm-list p{ margin:0 0 .8em; } .cm-box{ height:100%; padding:22px; border:1px solid var(--line); background:#fff; display:flex; flex-direction:column; gap:10px; } .cm-box__icon{ width:40px; height:40px; display:grid; place-items:center; } .cm-box__icon::before{ content:""; width:12px; height:12px; border-radius:50%; background:var(--rec); box-shadow:0 0 0 8px var(--tint); } .cm-box__img{ margin:-22px -22px 6px; aspect-ratio:16/9; overflow:hidden; background:var(--soft); } .cm-box__img img{ width:100%; height:100%; object-fit:cover; display:block; } .cm-box__img--icon{ margin:0; aspect-ratio:auto; background:none; width:64px; } .cm-box__img--icon img{ object-fit:contain; } .cm-box h3{ font:700 19px/1.25 var(--f-head)!important; margin:0; } .cm-box__text{ color:var(--mute); font-size:15px; } .cm-box__text p{ margin:0 0 .6em; } .cm-box__text ul{ padding-left:1.2em; margin:0; } .cm-box .cm-more{ margin-top:auto; font-weight:500; color:var(--teal); text-decoration:none!important; } .col > .cm-box{ margin-bottom:28px; } .cm-split{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(24px,4vw,56px); align-items:center; margin:10px 0 34px; } .cm-split--leftimage .cm-split__media{ order:-1; } .cm-split__media{ padding:14px; } .cm-split__media img{ display:block; width:100%; height:auto; } .cm-split h3{ font:800 clamp(22px,2.4vw,30px)/1.15 var(--f-head)!important; margin:0 0 12px; letter-spacing:-.012em; } .cm-split__text p{ margin:0 0 .9em; } .cm-split__text ul, .cm-split__text ol{ padding-left:1.3em; margin:0 0 1em; } .cm-split__text li::marker{ color:var(--teal); } .cm-promo{ position:relative; display:flex; flex-direction:column; justify-content:flex-end; min-height:260px; padding:22px; color:#fff!important; background:var(--ink); overflow:hidden; margin-bottom:28px; text-decoration:none!important; } .cm-promo img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.38; transition:opacity .3s,transform .5s; } .cm-promo:hover img{ opacity:.28; transform:scale(1.03); } .cm-promo > *:not(img){ position:relative; } .cm-promo h3{ color:#fff!important; font:700 22px/1.2 var(--f-head)!important; margin:0 0 8px; } .cm-promo p{ margin:0 0 12px; color:#D9E0E3; font-size:15px; } .cm-promo .mono{ color:var(--teal-l); } .cm-btnwrap{ margin:8px 0 24px; } .cm-btnwrap.align-center{ text-align:center; } .cm-video{ position:relative; display:block; margin:0 0 24px; background:var(--ink); overflow:hidden; text-decoration:none!important; } .cm-video img{ display:block; width:100%; aspect-ratio:16/9; object-fit:cover; opacity:.85; } .cm-video__play{ position:absolute; inset:0; display:grid; place-items:center; } .cm-video__play::before{ content:""; width:78px; height:78px; border-radius:50%; background:#fff; box-shadow:0 0 0 10px rgba(255,255,255,.2); } .cm-video__play::after{ content:""; position:absolute; border-left:22px solid var(--rec); border-top:13px solid transparent; border-bottom:13px solid transparent; margin-left:6px; } .cm-video__cap{ position:absolute; left:14px; bottom:12px; color:#fff; } .cm-contact{ padding:22px; border:1px solid var(--line); background:#fff; margin-bottom:24px; } .cm-contact h3{ font:700 19px/1.25 var(--f-head)!important; margin:10px 0 4px; } .cm-contact p{ margin:0; color:var(--mute); } .cm-contact img{ width:42px; height:42px; object-fit:contain; } .cm-map{ padding:28px; background:var(--soft); display:flex; justify-content:space-between; align-items:center; gap:20px; flex-wrap:wrap; } .cm-map b{ font:700 20px/1.3 var(--f-head); display:block; } .cmtch-contact-note{ padding:22px 24px; margin:20px 0; border:1px solid var(--line); border-left:3px solid var(--rec); background:#fff; font-size:18px; line-height:1.5; color:var(--ink); } .cmtch-contact-note a{ color:var(--teal); font-weight:600; } .cmtch-contact-note small{ display:block; font-size:14px; color:var(--mute); margin-top:4px; } /* Страницы услуг: карточки, шаги, вопросы */ .cards{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; margin:0 0 8px; } .cards .cm-box{ height:100%; } @media (min-width:981px){ .cards:has(> :nth-child(4):last-child){ grid-template-columns:repeat(4,minmax(0,1fr)); } } .cards .cm-box h3{ margin:0; } .cards .cm-box p{ margin:0; color:var(--mute); font-size:15px; line-height:1.55; } .entry .feat{ padding-block:8px 0; border-top:0; } .entry .feat ul, .entry .steps, .entry .cards, .entry .faq{ padding-left:0; list-style:none; } .entry .feat h3{ font:800 clamp(24px,2.6vw,34px)/1.1 var(--f-head); letter-spacing:-.015em; margin:10px 0 12px; } .entry .sh h2{ margin:8px 0 0; } .entry .sh{ margin-bottom:28px; } .entry .cm-box h3{ margin:0; font:700 19px/1.25 var(--f-head); } .entry .feat li{ margin:0; } .entry .steps{ margin:0; } .entry .step h3{ margin:12px 0 6px; } .entry .step p{ margin:0; } .lede{ font-size:19px; color:var(--text); max-width:62ch; } .intro{ max-width:760px; } .intro h3{ font:800 clamp(24px,2.6vw,34px)/1.1 var(--f-head)!important; letter-spacing:-.015em; margin:10px 0 12px!important; } .prose{ max-width:760px; } .faq{ margin:0; border-bottom:1px solid var(--line); } .faq details{ border-top:1px solid var(--line); padding:16px 0; } .faq summary{ cursor:pointer; list-style:none; display:flex; justify-content:space-between; gap:20px; font:600 18px/1.35 var(--f-head); color:var(--ink); } .faq summary::-webkit-details-marker{ display:none; } .faq summary::after{ content:"+"; font:400 24px/1 var(--f-mono); color:var(--teal); } .faq details[open] summary::after{ content:"−"; } .faq details p{ margin:10px 0 0; color:var(--text); max-width:70ch; } .see{ display:flex; flex-wrap:wrap; gap:10px; margin:14px 0 0; } @media (max-width:980px){ .cards{ grid-template-columns:1fr 1fr; } } @media (max-width:600px){ .cards{ grid-template-columns:1fr; } } .more-links{ columns:3 220px; column-gap:28px; margin:0; padding:0!important; list-style:none; } .more-links li{ break-inside:avoid; margin:0; padding:7px 0; border-top:1px solid var(--line); font-size:15px; } .entry .more-links a{ color:var(--ink); text-decoration:none; } .entry .more-links a:hover{ color:var(--teal); } .entry .facts{ margin:26px 0 0; } .entry .facts b{ color:var(--ink); } .entry .folio h3{ margin:6px 0; font:600 20px/1.25 var(--f-head); } .entry .folio a{ text-decoration:none; color:inherit; } .entry .folio p{ margin:0 0 10px; } .entry .stack{ padding:0; } .entry .stack li{ margin:0; } .entry .phone .msg{ margin:0; } .entry .tgdemo__list{ padding:0; } /* ========================================================================== Портфолио ========================================================================== */ .folio-intro{ margin:16px 0 0; font-size:18px; color:var(--mute); max-width:64ch; } .folio-intro p{ margin:0 0 8px; } .folio{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:36px 28px; } .case{ display:flex; flex-direction:column; } .case[hidden]{ display:none; } .case__media{ --ll:0px; display:block; padding:10px; } .case:hover .case__media{ --ll:20px; } .case__media img, .case__media .case__empty{ display:block; width:100%; aspect-ratio:4/3; object-fit:cover; object-position:top; background:var(--soft); } .case__cat{ margin-top:12px; color:var(--mute); } .case h2, .case h3{ font:600 20px/1.25 var(--f-head); margin:6px 0 6px; } .case p{ margin:0 0 10px; color:var(--mute); font-size:15px; } .stack{ display:flex; flex-wrap:wrap; gap:6px; list-style:none; margin:auto 0 0; padding:0; } .stack li{ padding:4px 8px; border:1px solid var(--line); border-radius:3px; font:400 12px/1.3 var(--f-mono); color:var(--teal); } .case-hero{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.15fr); gap:clamp(28px,5vw,64px); align-items:center; padding-block:clamp(30px,5vw,56px); } .case-hero h1{ font:800 clamp(30px,4vw,50px)/1.07 var(--f-head); letter-spacing:-.02em; margin:12px 0 16px; } .case-hero__desc{ color:var(--mute); font-size:17.5px; } .case-hero__desc p{ margin:0 0 10px; } .case-hero .acts{ margin-top:22px; } .case-hero .stack{ margin-top:20px; } .gallery__main{ padding:14px; } .gallery__main img{ display:block; width:100%; height:auto; } .gallery__thumbs{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; margin-top:6px; padding-inline:14px; } .gallery__thumbs button{ padding:0; border:1.5px solid transparent; background:var(--soft); cursor:pointer; aspect-ratio:4/3; overflow:hidden; } .gallery__thumbs button[aria-current="true"]{ border-color:var(--rec); } .gallery__thumbs img{ width:100%; height:100%; object-fit:cover; object-position:top; display:block; } .case-body{ border-top:1px solid var(--line); } .case-body > .w > .entry{ max-width:820px; padding-block:clamp(30px,5vw,56px); } /* ========================================================================== Блог ========================================================================== */ .blog-list{ padding-block:clamp(34px,5vw,56px); } .blog-list .posts{ gap:44px 28px; } .pager{ display:flex; flex-wrap:wrap; gap:6px; margin-top:44px; } .pager .page-numbers{ min-width:42px; padding:10px 12px; border:1px solid var(--line); text-align:center; font-variant-numeric:tabular-nums; } .pager .page-numbers.current{ background:var(--ink); color:#fff; border-color:var(--ink); } .pager .page-numbers.dots{ border-color:transparent; } .post-cover{ margin:0 0 30px; } .post-cover img{ display:block; width:100%; height:auto; max-height:560px; object-fit:cover; } .post-wrap{ display:grid; grid-template-columns:minmax(0,760px) minmax(0,1fr); gap:clamp(28px,5vw,72px); padding-block:clamp(30px,5vw,56px); } .post-aside{ position:sticky; top:calc(var(--head-h) + 24px); align-self:start; display:grid; gap:18px; } .aside-card{ padding:22px; background:var(--soft); } .aside-card h3{ font:700 19px/1.25 var(--f-head); margin:8px 0 8px; } .aside-card p{ margin:0 0 14px; font-size:15px; color:var(--mute); } .related{ border-top:1px solid var(--line); } .search-form{ display:flex; gap:8px; max-width:520px; } .search-form input[type=search]{ flex:1; min-width:0; padding:12px 14px; border:1.5px solid var(--ink); border-radius:2px; font:400 16px var(--f-body); } .nf{ padding-block:clamp(60px,10vw,120px); } .nf h1{ font:800 clamp(34px,5vw,64px)/1.03 var(--f-head); margin:12px 0 16px; } /* ========================================================================== Адаптив ========================================================================== */ @media (max-width:980px){ .feat, .cta .vf, .tgdemo, .case-hero, .post-wrap{ grid-template-columns:1fr; } .feat--flip .feat__art{ order:0; } .works, .posts, .folio{ grid-template-columns:1fr 1fr; } .facts, .steps{ grid-template-columns:1fr 1fr; } .step:nth-child(3){ padding-left:0; border-left:0; } .prods, .plugs{ grid-template-columns:1fr; } .site-foot__grid{ grid-template-columns:1fr 1fr; } .cm-split{ grid-template-columns:1fr; } .cm-split--leftimage .cm-split__media{ order:0; } .post-aside{ position:static; } } @media (max-width:600px){ .works, .posts, .folio{ grid-template-columns:1fr; } .flow{ grid-template-columns:1fr; gap:8px; } .flow > *{ grid-area:auto!important; } .link{ display:none; } .chat__foot{ grid-template-columns:1fr; } .plug{ grid-template-columns:96px minmax(0,1fr); } .site-foot__grid{ grid-template-columns:1fr; } .facts b{ font-size:28px; } .gallery__thumbs{ grid-template-columns:repeat(3,minmax(0,1fr)); } .entry .alignleft, .entry .alignright{ float:none; margin:1em 0; } } @media (prefers-reduced-motion:reduce){ .link, .ball, .phone__typing i{ animation:none; } .pcard__img img, .cm-promo img{ transition:none; } html{ scroll-behavior:auto; } } /* ========================================================================== Главная, блоки после первого экрана (26.09.2026) ========================================================================== */ /* Заголовки секций: номер кадра и бирюзовый акцент */ .eyebrow > b{ display:inline-flex; align-items:center; gap:10px; margin-right:12px; color:var(--rec); font-weight:500; } .eyebrow > b::after{ content:""; width:28px; height:1px; background:currentColor; opacity:.6; } .sec h2 em, .cta h2 em{ font-style:normal; background:linear-gradient(92deg,var(--teal) 0%,#1FB3AF 55%,var(--teal) 100%); -webkit-background-clip:text; background-clip:text; color:transparent; } .dark h2 em, .cta h2 em{ background-image:linear-gradient(92deg,#8FE9E5 0%,var(--teal-l) 50%,#2FA8A5 100%); } /* Сетка и свечение для тёмных секций, как на первом экране */ .hx-grid{ position:relative; isolation:isolate; overflow:hidden; } .hx-grid::before{ content:""; position:absolute; inset:0; z-index:-1; pointer-events:none; background: radial-gradient(50% 60% at 85% 10%, rgba(76,194,192,.16), transparent 70%), radial-gradient(40% 50% at 0% 100%, rgba(224,39,31,.08), transparent 70%); } /* Зерно плёнки вместо сетки (26.09.2026: сетка «в клетку» не понравилась владельцу) */ .hx-grid::after{ content:""; position:absolute; inset:0; z-index:-1; pointer-events:none; opacity:.12; mix-blend-mode:overlay; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } /* Работы: карточки-кадры */ .chips a{ border-radius:999px; padding:8px 14px; transition:border-color .2s, background-color .2s, color .2s; } .case__media{ position:relative; overflow:hidden; } .case__media img{ transition:transform .6s cubic-bezier(.2,.7,.2,1), filter .4s; } .case:hover .case__media img{ transform:scale(1.04); } .case__media::after{ content:"Смотреть кейс →"; position:absolute; left:20px; bottom:20px; padding:9px 14px; background:var(--ink); color:#fff; font:500 13px/1 var(--f-body); opacity:0; transform:translateY(8px); transition:opacity .25s, transform .25s; } .case:hover .case__media::after{ opacity:1; transform:none; } .case h3 a{ background:linear-gradient(currentColor,currentColor) 0 100%/0 1.5px no-repeat; transition:background-size .3s; } .case:hover h3 a{ background-size:100% 1.5px; } /* Сервисы: подсветка карточек */ .prod, .plug{ transition:border-color .25s, box-shadow .3s, transform .3s; } .prod:hover, .plug:hover{ border-color:rgba(76,194,192,.55); box-shadow:0 0 0 1px rgba(76,194,192,.25), 0 30px 70px -30px rgba(76,194,192,.35); transform:translateY(-3px); } .prod img{ transition:transform .6s cubic-bezier(.2,.7,.2,1); } .prod:hover img{ transform:scale(1.02); } /* Telegram-демо: свечение за телефоном */ #telegram .tgdemo > :last-child{ position:relative; } #telegram .tgdemo > :last-child::before{ content:""; position:absolute; inset:10% 5%; z-index:-1; background:radial-gradient(closest-side, rgba(76,194,192,.35), transparent); filter:blur(30px); } #telegram{ position:relative; isolation:isolate; overflow:hidden; } /* Процесс: тёмный таймлайн */ #process .steps{ border-top:0; position:relative; padding-top:34px; } #process .steps::before{ content:""; position:absolute; left:0; right:0; top:8px; height:2px; background:var(--d-line); } #process .steps::after{ content:""; position:absolute; left:0; top:8px; height:2px; width:var(--run,100%); background:linear-gradient(90deg,var(--teal-l),#8FE9E5); box-shadow:0 0 12px rgba(76,194,192,.7); transition:width 1.8s cubic-bezier(.3,.6,.2,1); } #process .step, #process .step + .step{ position:relative; border-left:0; padding:0 22px 6px 0; } #process .step::after{ content:""; position:absolute; left:0; top:-32px; width:14px; height:14px; border-radius:50%; background:var(--d-bg); border:2px solid var(--teal-l); box-shadow:0 0 0 5px rgba(76,194,192,.12); } #process .step::before{ display:block; font:800 clamp(44px,5vw,64px)/1 var(--f-head); letter-spacing:-.03em; color:transparent; -webkit-text-stroke:1.5px rgba(143,233,229,.55); } #process .step h3{ color:#fff; margin-top:14px; } #process .step p{ color:var(--d-mute); } html.js #process:not(.is-in) .steps{ --run:0%; } /* Блог */ .home-sec ~ .sec .pcard, .posts .pcard{ transition:transform .3s; } .posts .pcard:hover{ transform:translateY(-3px); } .posts .pcard .mono{ display:inline-flex; align-items:center; gap:8px; } .posts .pcard .mono::before{ content:""; width:6px; height:6px; border-radius:50%; background:var(--rec); } .posts .pcard h3 a{ background:linear-gradient(currentColor,currentColor) 0 100%/0 1.5px no-repeat; transition:background-size .3s; } .posts .pcard:hover h3 a{ background-size:100% 1.5px; } /* Финальный блок */ .cta{ background:var(--d-bg); } .cta h2{ font-size:clamp(28px,3.4vw,46px); } .cta .btn{ background:var(--teal-l); border-color:var(--teal-l); color:var(--ink); font-weight:600; box-shadow:0 10px 40px -10px rgba(76,194,192,.7); } .cta .btn:hover{ background:#fff; border-color:#fff; color:var(--ink); } /* Появление при прокрутке: только с JS и без «уменьшения движения» */ html.js .rv{ opacity:0; transform:translateY(22px); transition:opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1); transition-delay:var(--d,0s); } html.js .rv.is-in{ opacity:1; transform:none; } @media (max-width:980px){ #process .steps{ grid-template-columns:1fr 1fr; row-gap:40px; } #process .steps::before, #process .steps::after{ display:none; } #process .step::after{ display:none; } } @media (max-width:600px){ #process .steps{ grid-template-columns:1fr; padding-top:0; } .case__media::after{ display:none; } } @media (prefers-reduced-motion:reduce){ html.js .rv{ opacity:1; transform:none; transition:none; } #process .steps::after{ transition:none; } } /* ========================================================================== Страницы услуг (main.svc): тёмная шапка, нумерованные разделы, таймлайн ========================================================================== */ .dhead{ background:var(--d-bg); color:var(--d-tx); } .dhead__in{ display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); gap:clamp(24px,4vw,56px); align-items:center; padding-block:clamp(30px,4.5vw,60px) clamp(26px,4vw,48px); } .dhead .crumbs{ color:var(--d-mute); } .dhead .crumbs a:hover{ color:var(--teal-l); } .dhead .crumbs span[aria-hidden]{ color:var(--d-line); } .dhead h1{ color:#fff; font:800 clamp(32px,4.4vw,58px)/1.02 var(--f-head); letter-spacing:-.025em; margin:16px 0 0; max-width:18ch; } .dhead__lead{ margin:18px 0 0; max-width:56ch; font-size:18px; line-height:1.55; color:var(--d-mute); } .dhead__lead p{ margin:0; } .dhead .hx__note{ margin-top:22px; } .dhead__art{ position:relative; } .dhead__art img{ display:block; width:100%; height:auto; aspect-ratio:4/3; object-fit:cover; -webkit-mask:radial-gradient(ellipse closest-side, #000 50%, transparent 100%); mask:radial-gradient(ellipse closest-side, #000 50%, transparent 100%); } .dhead__art::before, .dhead__art::after{ content:""; position:absolute; width:34px; height:34px; border:2px solid rgba(255,255,255,.8); pointer-events:none; } .dhead__art::before{ top:6%; left:6%; border-right:0; border-bottom:0; } .dhead__art::after{ bottom:6%; right:6%; border-left:0; border-top:0; border-color:var(--rec); } /* Нумерация разделов */ .svc .blocks{ counter-reset:blk; } .svc .blk .sh .eyebrow::before{ counter-increment:blk; content:counter(blk,decimal-leading-zero); display:inline-block; margin-right:12px; padding-right:40px; color:var(--rec); background:linear-gradient(currentColor,currentColor) right center/28px 1px no-repeat; } /* Первый блок: текст слева, цифры и кнопка справа в тёмной карточке */ .svc .blk:first-child > .w:has(> .intro){ display:grid; grid-template-columns:minmax(0,1.35fr) minmax(0,.8fr); grid-template-rows:auto 1fr; gap:0 clamp(28px,5vw,64px); align-items:start; } .svc .blk:first-child > .w > .intro{ grid-row:1 / span 2; max-width:none; } .svc .blk:first-child > .w:has(> .intro) > .facts{ grid-column:2; grid-row:1; grid-template-columns:1fr; border-top:0; margin:0; padding:10px 24px; background:var(--d-bg); color:var(--d-tx); position:relative; } .svc .blk:first-child > .w:has(> .intro) > .facts div{ padding:16px 0; border-bottom:1px solid var(--d-line); } .svc .blk:first-child > .w:has(> .intro) > .facts div:last-child{ border-bottom:0; } .svc .blk:first-child > .w:has(> .intro) > .facts b{ color:#fff; font-size:32px; } .svc .blk:first-child > .w:has(> .intro) > .facts span{ color:var(--d-mute); } .svc .blk:first-child > .w:has(> .intro) > .see{ grid-column:2; grid-row:2; margin:0; padding:0 24px 24px; background:var(--d-bg); } .svc .blk:first-child > .w:has(> .intro):not(:has(> .facts)) > .see{ grid-row:1; padding-top:24px; } .svc .blk:first-child > .w:has(> .intro) > .see .btn{ width:100%; background:var(--teal-l); border-color:var(--teal-l); color:var(--ink); font-weight:600; box-shadow:0 10px 40px -12px rgba(76,194,192,.7); } .svc .blk:first-child > .w:has(> .intro) > .see .btn:hover{ background:#fff; border-color:#fff; } .svc .intro .lede{ font-size:18px; } .svc .intro .feat__meta span, .svc .feat__meta span{ padding:4px 9px; border:1px solid rgba(23,142,140,.3); border-radius:999px; font-size:11px; } .svc .feat__meta{ gap:8px; margin-top:14px; } /* Карточки: номер вместо точки, рамка видоискателя при наведении */ .svc .cards{ counter-reset:card; } .svc .cm-box{ --lc:transparent; position:relative; transition:border-color .25s, box-shadow .3s, transform .3s; background-image: linear-gradient(var(--lc),var(--lc)), linear-gradient(var(--lc),var(--lc)), linear-gradient(var(--lc),var(--lc)), linear-gradient(var(--lc),var(--lc)), linear-gradient(var(--lc),var(--lc)), linear-gradient(var(--lc),var(--lc)), linear-gradient(var(--lc),var(--lc)), linear-gradient(var(--lc),var(--lc)); background-position:left top, left top, right top, right top, left bottom, left bottom, right bottom, right bottom; background-size:20px 2px, 2px 20px, 20px 2px, 2px 20px, 20px 2px, 2px 20px, 20px 2px, 2px 20px; background-repeat:no-repeat; } .svc .cm-box:hover{ --lc:var(--rec); border-color:transparent; transform:translateY(-4px); box-shadow:0 24px 50px -28px rgba(15,18,20,.35), 0 0 0 1px var(--line); } .svc .cm-box__icon{ width:auto; height:auto; display:block; place-items:initial; } .svc .cm-box__icon::before{ counter-increment:card; content:counter(card,decimal-leading-zero); display:block; width:auto; height:auto; border-radius:0; background:none; box-shadow:none; font:800 40px/1 var(--f-head); letter-spacing:-.03em; color:transparent; -webkit-text-stroke:1.3px rgba(23,142,140,.55); } .svc .cm-more{ margin-top:auto; } /* Этапы — тёмный таймлайн, как на главной */ .svc .blk:has(> .w > .steps){ position:relative; isolation:isolate; overflow:hidden; background:var(--d-bg); color:var(--d-tx); } .svc .blk:has(> .w > .steps)::before{ content:""; position:absolute; inset:0; z-index:-1; pointer-events:none; background: radial-gradient(50% 60% at 85% 10%, rgba(76,194,192,.16), transparent 70%); } .svc .blk:has(> .w > .steps) h2{ color:#fff; } .svc .blk:has(> .w > .steps) .eyebrow{ color:var(--teal-l); } .svc .steps{ border-top:0; position:relative; padding-top:34px; } .svc .steps::before{ content:""; position:absolute; left:0; right:0; top:8px; height:2px; background:linear-gradient(90deg,var(--teal-l),#8FE9E5); box-shadow:0 0 12px rgba(76,194,192,.6); } .svc .step, .svc .step + .step{ position:relative; border-left:0; padding:0 22px 6px 0; } .svc .step::after{ content:""; position:absolute; left:0; top:-32px; width:14px; height:14px; border-radius:50%; background:var(--d-bg); border:2px solid var(--teal-l); box-shadow:0 0 0 5px rgba(76,194,192,.12); } .svc .step::before{ display:block; font:800 clamp(40px,4.5vw,58px)/1 var(--f-head); letter-spacing:-.03em; color:transparent; -webkit-text-stroke:1.5px rgba(143,233,229,.55); } .svc .step h3{ color:#fff; margin-top:14px; } .svc .step p{ color:var(--d-mute); } /* Кейсы, FAQ, «Ещё по теме» */ .case__media{ position:relative; overflow:hidden; } .case__media img{ transition:transform .6s cubic-bezier(.2,.7,.2,1); } .case:hover .case__media img{ transform:scale(1.04); } .svc .faq details{ transition:background-color .2s; } .svc .faq details[open] summary{ color:var(--teal); } .svc .faq summary:hover{ color:var(--teal); } .svc .more-links{ columns:auto; display:flex; flex-wrap:wrap; gap:10px; } .svc .more-links li{ border:0; padding:0; } .svc .more-links a{ display:inline-flex; align-items:center; gap:8px; padding:10px 16px; border:1px solid var(--line); border-radius:999px; background:#fff; transition:border-color .2s, background-color .2s, color .2s; } .svc .more-links a::after{ content:"→"; color:var(--teal); transition:transform .2s; } .svc .more-links a:hover{ border-color:var(--ink); background:var(--ink); color:#fff; } .svc .more-links a:hover::after{ transform:translateX(3px); color:var(--teal-l); } @media (max-width:980px){ .dhead__in{ grid-template-columns:1fr; } .dhead__art{ max-width:520px; } .svc .blk:first-child > .w:has(> .intro){ display:block; } .svc .blk:first-child > .w:has(> .intro) > .facts{ margin-top:24px; grid-template-columns:1fr 1fr; } .svc .steps{ grid-template-columns:1fr 1fr; row-gap:40px; padding-top:0; } .svc .steps::before, .svc .step::after{ display:none; } } @media (max-width:600px){ .svc .blk:first-child > .w:has(> .intro) > .facts{ grid-template-columns:1fr; } .svc .steps{ grid-template-columns:1fr; } .dhead__art{ display:none; } } @media (prefers-reduced-motion:reduce){ .svc .cm-box, .case__media img{ transition:none; transform:none!important; } } /* Тёмная шапка: варианты */ .dhead__in--solo{ grid-template-columns:minmax(0,1fr); } .dhead__in--solo h1{ max-width:24ch; } .dhead__meta{ display:flex; flex-wrap:wrap; gap:6px 18px; margin-top:16px; color:var(--teal-l); } .dhead__meta a:hover{ color:#fff; } .dhead__lead p + p{ margin-top:8px; } .dhead__photo{ position:relative; padding:12px; } .dhead__photo img{ display:block; width:100%; height:auto; aspect-ratio:16/10; object-fit:cover; box-shadow:0 40px 80px -30px rgba(0,0,0,.8), 0 0 0 1px var(--d-line); } .dhead__photo::before{ content:""; position:absolute; inset:0; pointer-events:none; --c:rgba(255,255,255,.85); background: linear-gradient(var(--c),var(--c)) left top/30px 2px no-repeat, linear-gradient(var(--c),var(--c)) left top/2px 30px no-repeat, linear-gradient(var(--c),var(--c)) right top/30px 2px no-repeat, linear-gradient(var(--c),var(--c)) right top/2px 30px no-repeat, linear-gradient(var(--c),var(--c)) left bottom/30px 2px no-repeat, linear-gradient(var(--c),var(--c)) left bottom/2px 30px no-repeat, linear-gradient(var(--rec),var(--rec)) right bottom/30px 2px no-repeat, linear-gradient(var(--rec),var(--rec)) right bottom/2px 30px no-repeat; } .dhead__search{ margin-top:22px; max-width:520px; } .dhead__search input[type="search"], .dhead__search input[type="text"]{ background:rgba(17,24,32,.8); border-color:var(--d-line); color:#fff; } .dhead__search .btn, .dhead__search button{ background:var(--teal-l); border-color:var(--teal-l); color:var(--ink); } /* Кейс: первый экран на тёмном */ .dhead .case-hero h1{ color:#fff; } .dhead .case-hero .eyebrow a{ color:var(--teal-l); } .dhead .case-hero__desc{ color:var(--d-mute); } .dhead .stack li{ border-color:var(--d-line); color:var(--teal-l); background:rgba(17,24,32,.6); } .dhead .gallery__main{ --lc:rgba(255,255,255,.85); } .dhead .gallery__thumbs button{ border-color:var(--d-line); } .dhead .gallery__thumbs button[aria-current="true"]{ border-color:var(--rec); } /* Запись блога: колонка текста и карточка сбоку */ .aside-card{ background:var(--d-bg); color:var(--d-tx); border:0; } .aside-card h3{ color:#fff; } .aside-card p{ color:var(--d-mute); } .aside-card .eyebrow{ color:var(--teal-l); } .aside-card .btn{ background:var(--teal-l); border-color:var(--teal-l); color:var(--ink); } @media (max-width:980px){ .dhead__photo{ max-width:560px; } } /* Анализ сайта: форма проверки в тёмной «консоли сканера» */ .scan{ display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:clamp(28px,5vw,64px); align-items:start; } .scan__text h3{ font:800 clamp(24px,2.6vw,34px)/1.1 var(--f-head); letter-spacing:-.015em; margin:10px 0 12px; } .scan__text ul{ margin:16px 0 0; padding:0; list-style:none; display:grid; gap:8px; } .scan__text li{ position:relative; padding-left:26px; } .scan__text li::before{ content:""; position:absolute; left:0; top:.55em; width:8px; height:8px; background:var(--teal); } .scan__box{ position:relative; background:var(--d-bg); color:var(--d-tx); padding:0 24px 22px; box-shadow:0 40px 80px -40px rgba(15,18,20,.6); } .scan__box::after{ content:""; position:absolute; inset:-10px; pointer-events:none; --c:var(--ink); background: linear-gradient(var(--c),var(--c)) left top/26px 2px no-repeat, linear-gradient(var(--c),var(--c)) left top/2px 26px no-repeat, linear-gradient(var(--c),var(--c)) right top/26px 2px no-repeat, linear-gradient(var(--c),var(--c)) right top/2px 26px no-repeat, linear-gradient(var(--c),var(--c)) left bottom/26px 2px no-repeat, linear-gradient(var(--c),var(--c)) left bottom/2px 26px no-repeat, linear-gradient(var(--rec),var(--rec)) right bottom/26px 2px no-repeat, linear-gradient(var(--rec),var(--rec)) right bottom/2px 26px no-repeat; } .scan__bar{ display:flex; justify-content:space-between; gap:12px; margin:0 -24px 20px; padding:12px 24px; border-bottom:1px solid var(--d-line); color:var(--d-mute); font-size:11px; } .scan__bar span:first-child{ display:inline-flex; align-items:center; gap:8px; color:#fff; } .scan__bar i{ width:8px; height:8px; border-radius:50%; background:var(--teal-l); box-shadow:0 0 0 4px rgba(76,194,192,.18); animation:hx-blink 1.6s steps(1) infinite; } .scan .cm-audit-widget{ max-width:none; margin:0; } .scan .cm-audit-form{ gap:12px; } .scan .cm-audit-form input[type=url]{ padding:14px 16px; border:1px solid var(--d-line); border-radius:2px; background:#111820; color:#fff; font:400 16px/1.3 var(--f-mono); } .scan .cm-audit-form input[type=url]::placeholder{ color:var(--d-mute); } .scan .cm-audit-form input[type=url]:focus{ border-color:var(--teal-l); box-shadow:0 0 0 3px rgba(76,194,192,.2); } .scan .cm-audit-captcha-slot{ margin:0; } .scan .cm-audit-form button{ padding:14px 24px; border:0; border-radius:2px; background:var(--teal-l); color:var(--ink); font:600 15px/1.1 var(--f-body); cursor:pointer; box-shadow:0 10px 40px -12px rgba(76,194,192,.7); transition:background-color .2s; } .scan .cm-audit-form button:hover{ background:#fff; } .scan .cm-audit-form button:disabled{ opacity:.6; cursor:wait; } .scan .cm-audit-hint{ margin:14px 0 0; color:var(--d-mute); font-size:13px; } .scan .cm-audit-results:empty{ display:none; } .scan .cm-audit-results{ margin-top:18px; } .scan .cm-audit-loading, .scan .cm-audit-error, .scan .cm-audit-results-summary{ padding:12px 14px; border:1px solid var(--d-line); background:#111820; color:var(--d-tx); border-radius:2px; font-size:14.5px; } .scan .cm-audit-error{ border-color:rgba(224,39,31,.6); color:#FFB4AF; } .scan .cm-audit-results-summary code{ color:var(--teal-l); background:none; } .scan .cm-audit-results-list{ list-style:none; margin:10px 0 0; padding:0; display:grid; gap:6px; } .scan .cm-audit-results-list li{ display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:4px 14px; padding:10px 12px; background:#111820; border-left:3px solid var(--d-line); font-size:14px; } .scan .cm-audit-results-list li.cm-audit-ok{ border-left-color:var(--teal-l); } .scan .cm-audit-results-list li.cm-audit-warn{ border-left-color:var(--warm); } .scan .cm-audit-results-list li.cm-audit-fail{ border-left-color:var(--rec); } .scan .cm-audit-label{ color:#fff; font-weight:500; } .scan .cm-audit-detail{ color:var(--d-mute); } @media (max-width:980px){ .scan{ grid-template-columns:1fr; } } @media (max-width:600px){ .scan .cm-audit-results-list li{ grid-template-columns:1fr; } .scan__box{ padding:0 16px 18px; } .scan__bar{ margin:0 -16px 16px; padding:12px 16px; } } .map-frame{ position:relative; overflow:hidden; min-height:520px; background:var(--soft); } /* ========================================================================== Первый экран главной: морфинг (выбран 26.09.2026 из прототипов) ========================================================================== */ /* ---------- Общее: прозрачная шапка поверх видео ---------- */ .hero-over .site-head{ position:fixed; left:0; right:0; background:transparent; border-bottom-color:transparent; backdrop-filter:none; color:#fff; transition:background-color .3s, border-color .3s, backdrop-filter .3s; } /* После первого же сдвига — тёмное матовое стекло: меню читается и над видео, и над светлыми блоками */ .hero-over .site-head.is-solid{ background:rgba(10,14,19,.82); border-bottom-color:rgba(255,255,255,.08); backdrop-filter:saturate(1.2) blur(14px); } .hero-over .site-head .logo, .hero-over .site-head .site-nav > ul > li > a, .hero-over .site-head .site-head__tel{ color:#fff; } .hero-over .site-head .site-nav > ul > li > a:hover, .hero-over .site-head .site-nav > ul > li.is-open > a{ color:var(--teal-l); } .hero-over .site-head .site-head__tg{ background:rgba(255,255,255,.1); border-color:rgba(255,255,255,.35); } .hero-over .site-head .site-head__tg:hover{ background:var(--teal-l); border-color:var(--teal-l); color:var(--ink); } .hero-over .site-head .burger{ border-color:#fff; } .hero-over .site-head .burger span, .hero-over .site-head .burger::before, .hero-over .site-head .burger::after{ background:#fff; } .hero-over.nav-open .site-head{ background:#0A0E13; } @media (max-width:1060px){ .hero-over.nav-open .site-nav{ background:#0A0E13; } .hero-over.nav-open .site-nav a{ color:#fff; } .hero-over.nav-open .site-nav .sub-menu{ background:transparent; } .hero-over.nav-open .site-nav .sub-menu .sub-menu a{ color:var(--d-mute); } .hero-over.nav-open .site-nav > ul > li{ border-bottom-color:var(--d-line); } } /* Зерно плёнки вместо сетки */ .grain{ position:absolute; inset:-50%; z-index:2; pointer-events:none; opacity:.14; mix-blend-mode:overlay; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); animation:grain 1s steps(6) infinite; } .grain--light{ opacity:.35; mix-blend-mode:multiply; } @keyframes grain{ 0%{ transform:translate(0,0); } 20%{ transform:translate(-3%,2%); } 40%{ transform:translate(2%,-4%); } 60%{ transform:translate(-4%,-1%); } 80%{ transform:translate(3%,3%); } 100%{ transform:translate(0,0); } } .hm{ position:relative; min-height:100svh; overflow:hidden; isolation:isolate; background:#0A0E13; color:#fff; display:flex; flex-direction:column; justify-content:flex-end; } .hm__stage{ position:absolute; z-index:0; top:50%; translate:0 -55%; right:-2%; width:min(66%, calc((100svh - 160px) * 16 / 9)); aspect-ratio:16/9; transition:transform .3s ease-out; } .hm__v{ width:100%; height:100%; object-fit:contain; -webkit-mask:radial-gradient(closest-side, #000 55%, transparent 100%); mask:radial-gradient(closest-side, #000 55%, transparent 100%); } .hm__shade{ position:absolute; inset:0; z-index:1; background:linear-gradient(90deg, #0A0E13 0%, rgba(10,14,19,.7) 30%, rgba(10,14,19,0) 50%), linear-gradient(180deg, rgba(10,14,19,.6), transparent 20%, transparent 70%, #0A0E13); } .hm__in{ position:relative; z-index:4; width:100%; padding-top:calc(var(--head-h) + 40px); } .hm__eyebrow{ display:flex; align-items:center; gap:10px; margin:0 0 18px; color:var(--teal-l); } .hm__eyebrow i{ width:9px; height:9px; border-radius:50%; background:var(--rec); animation:hx-blink 1.2s steps(1) infinite; } .hm__h1{ margin:0; font:800 clamp(44px,6.2vw,104px)/.92 var(--f-head); letter-spacing:-.04em; color:#fff; white-space:nowrap; } .hm__h1 em{ font-style:normal; background:linear-gradient(92deg,#8FE9E5,var(--teal-l) 50%,#2FA8A5); -webkit-background-clip:text; background-clip:text; color:transparent; } .hm__say{ margin:22px 0 28px; min-height:1.5em; font:500 clamp(17px,1.5vw,21px)/1.4 var(--f-body); color:rgba(231,237,242,.85); } .hm__say span{ color:#fff; border-bottom:1px solid var(--teal-l); transition:opacity .3s; } .hm__say span.is-out{ opacity:0; } .hm__ch{ position:relative; z-index:4; width:100%; list-style:none; margin:clamp(34px,5vw,64px) auto 0; padding-bottom:22px; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; } .hm__ch a{ display:flex; flex-direction:column; gap:6px; font:500 14px/1.25 var(--f-body); color:var(--d-mute); transition:color .2s; } .hm__ch a:hover, .hm__ch li.is-on a{ color:#fff; } .hm__ch i{ display:block; height:2px; background:rgba(255,255,255,.15); overflow:hidden; margin-bottom:6px; } .hm__ch b{ display:block; height:100%; width:0; background:var(--teal-l); box-shadow:0 0 10px var(--teal-l); } .hm__ch .mono{ font-size:10.5px; } .hm__ch li.is-on .mono{ color:var(--rec); } .hfacts{ background:#0A0E13; color:#fff; } .hfacts .facts{ border-top:1px solid var(--d-line); padding-bottom:18px; } .hfacts .facts b{ color:#fff; } .hfacts .facts span{ color:var(--d-mute); } @media (max-width:980px){ .hm__stage{ right:-25%; width:125%; top:calc(var(--head-h) + 10px); translate:none; opacity:.75; } .hm__h1{ white-space:normal; } .hm__ch{ grid-template-columns:1fr 1fr; } } @media (prefers-reduced-motion:reduce){ .grain, .hm__eyebrow i{ animation:none; } } /* Главная: направления — панели, раскрываются при наведении (26.09.2026) */ #services{ background:#0A0E13; padding-top:clamp(56px,7vw,96px); } .dpanels{ display:flex; gap:12px; height:clamp(520px,44vw,600px); } .dp{ position:relative; flex:1 1 0; min-width:0; overflow:hidden; background:#111820; border:1px solid var(--d-line); color:var(--d-tx); transition:flex-grow .7s cubic-bezier(.2,.7,.1,1), border-color .3s; cursor:default; } .dp.is-open{ flex-grow:2.7; border-color:rgba(76,194,192,.45); } .dp__img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:60% 35%; opacity:.5; transform:scale(1.08); transition:opacity .6s, transform 1s cubic-bezier(.2,.7,.1,1); -webkit-mask:linear-gradient(180deg,#000 30%,transparent 78%); mask:linear-gradient(180deg,#000 30%,transparent 78%); } .dp.is-open .dp__img{ opacity:.85; transform:scale(1); } .dp::after{ content:""; position:absolute; inset:10px; pointer-events:none; opacity:0; transition:opacity .4s; --c:rgba(255,255,255,.85); background: linear-gradient(var(--c),var(--c)) left top/22px 2px no-repeat, linear-gradient(var(--c),var(--c)) left top/2px 22px no-repeat, linear-gradient(var(--c),var(--c)) right top/22px 2px no-repeat, linear-gradient(var(--c),var(--c)) right top/2px 22px no-repeat, linear-gradient(var(--c),var(--c)) left bottom/22px 2px no-repeat, linear-gradient(var(--c),var(--c)) left bottom/2px 22px no-repeat, linear-gradient(var(--rec),var(--rec)) right bottom/22px 2px no-repeat, linear-gradient(var(--rec),var(--rec)) right bottom/2px 22px no-repeat; } .dp.is-open::after{ opacity:1; } .dp__n{ position:absolute; left:22px; top:18px; z-index:2; font:800 clamp(48px,5vw,72px)/1 var(--f-head); letter-spacing:-.04em; color:transparent; -webkit-text-stroke:1.5px rgba(143,233,229,.6); } .dp.is-open .dp__n{ -webkit-text-stroke-color:var(--teal-l); } .dp__body{ position:absolute; left:0; right:0; bottom:0; z-index:2; padding:22px; } .dp h3{ margin:0; color:#fff; font:700 clamp(19px,1.7vw,24px)/1.15 var(--f-head); letter-spacing:-.01em; } .dp__body > p, .dp__body ul{ max-height:0; opacity:0; overflow:hidden; transition:max-height .6s, opacity .35s, margin .6s; min-width:300px; } .dp.is-open .dp__body > p{ max-height:120px; opacity:1; margin:8px 0 12px; transition-delay:.15s; } .dp.is-open .dp__body ul{ max-height:340px; opacity:1; transition-delay:.2s; } .dp__body > p{ color:var(--d-mute); font-size:15px; margin:0; } .dp ul{ list-style:none; margin:0; padding:0; } .dp li{ border-top:1px solid var(--d-line); font-size:15px; } .dp li > a, .dp li > span{ display:flex; justify-content:space-between; align-items:baseline; gap:12px; padding:9px 0; color:var(--d-tx); transition:color .2s, padding-left .2s; } .dp li > a:hover{ color:var(--teal-l); padding-left:8px; } .dp li small{ color:var(--d-mute); font-size:13px; white-space:nowrap; font-variant-numeric:tabular-nums; } .dp li.is-new{ font-weight:600; } @media (max-width:980px){ .dpanels{ display:grid; grid-template-columns:1fr 1fr; height:auto; } .dp, .dp.is-open{ min-height:520px; } .dp__body > p, .dp__body ul{ max-height:none; opacity:1; min-width:0; } .dp__body > p{ margin:8px 0 12px; } .dp__img{ opacity:.7; transform:none; } .dp::after{ opacity:1; } } @media (max-width:600px){ .dpanels{ grid-template-columns:1fr; } .dp, .dp.is-open{ min-height:480px; } } @media (prefers-reduced-motion:reduce){ .dp, .dp__img, .dp__body > p, .dp__body ul{ transition:none; } } /* ========================================================================== Главная целиком в тёмном стиле (26.09.2026) ========================================================================== */ .home main > .sec.dark{ background:#0A0E13; } .home main > .sec.dark + .sec.dark, .home main > .sec.dark + .cta{ border-top:1px solid rgba(231,237,242,.07); } .dark .btn:not(.btn--glow):not(.btn--ink){ border-color:rgba(231,237,242,.35); color:#fff; } .dark .btn:not(.btn--glow):not(.btn--ink):hover{ background:#fff; border-color:#fff; color:var(--ink); } .dark .btn--ink{ background:var(--teal-l); border-color:var(--teal-l); color:var(--ink); font-weight:600; box-shadow:0 10px 40px -12px rgba(76,194,192,.7); } .dark .btn--ink:hover{ background:#fff; border-color:#fff; color:var(--ink); } .dark .btn--ink::before{ background:var(--ink); } .dark .btn--ink.btn--tg::before{ background:currentColor; } .dark .eyebrow > b{ color:var(--rec); } .dark .new{ box-shadow:0 0 0 4px rgba(224,39,31,.18); } /* Новые услуги: вкладки + сцена */ .ntabs{ display:grid; grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr); gap:clamp(20px,3vw,40px); align-items:stretch; } .ntabs__list{ display:flex; flex-direction:column; gap:10px; } /* Вкладки делят высоту сцены поровну: низ колонок совпадает */ .ntab{ flex:1 1 0; min-height:96px; } .ntabs__stage{ align-content:stretch; } .npanel{ display:flex; flex-direction:column; justify-content:flex-end; } .ntab{ position:relative; display:grid; grid-template-columns:auto minmax(0,1fr); grid-template-rows:auto auto; gap:4px 18px; align-items:center; width:100%; padding:20px 22px; text-align:left; background:rgba(17,24,32,.6); border:1px solid var(--d-line); border-left:2px solid var(--d-line); color:var(--d-mute); font:inherit; cursor:pointer; transition:background-color .3s, border-color .3s, color .3s; } .ntab__n{ grid-row:1 / span 2; font:800 clamp(40px,4vw,56px)/1 var(--f-head); letter-spacing:-.04em; color:transparent; -webkit-text-stroke:1.3px rgba(143,233,229,.45); transition:-webkit-text-stroke-color .3s; } .ntab__t{ font:500 11.5px/1.3 var(--f-mono); letter-spacing:.08em; text-transform:uppercase; } .ntab__s{ font:700 clamp(17px,1.5vw,21px)/1.2 var(--f-head); color:var(--d-tx); } .ntab:hover, .ntab.is-on{ background:rgba(76,194,192,.08); border-color:rgba(76,194,192,.35); color:var(--teal-l); } .ntab.is-on{ border-left-color:var(--teal-l); } .ntab.is-on .ntab__n{ -webkit-text-stroke-color:var(--teal-l); } .ntab.is-on .ntab__s{ color:#fff; } .ntabs__stage{ display:grid; } .npanel{ grid-area:1 / 1; position:relative; overflow:hidden; background:#111820; border:1px solid var(--d-line); opacity:0; visibility:hidden; transform:translateY(12px); transition:opacity .45s, transform .6s cubic-bezier(.2,.7,.1,1), visibility 0s .45s; } .npanel.is-on{ opacity:1; visibility:visible; transform:none; transition:opacity .45s, transform .6s cubic-bezier(.2,.7,.1,1), visibility 0s; } .npanel::after{ content:""; position:absolute; inset:10px; pointer-events:none; --c:rgba(255,255,255,.8); background: linear-gradient(var(--c),var(--c)) left top/22px 2px no-repeat, linear-gradient(var(--c),var(--c)) left top/2px 22px no-repeat, linear-gradient(var(--c),var(--c)) right top/22px 2px no-repeat, linear-gradient(var(--c),var(--c)) right top/2px 22px no-repeat, linear-gradient(var(--c),var(--c)) left bottom/22px 2px no-repeat, linear-gradient(var(--c),var(--c)) left bottom/2px 22px no-repeat, linear-gradient(var(--rec),var(--rec)) right bottom/22px 2px no-repeat, linear-gradient(var(--rec),var(--rec)) right bottom/2px 22px no-repeat; } .npanel__img{ position:absolute; right:-6%; top:-4%; width:66%; height:auto; opacity:.9; -webkit-mask:radial-gradient(closest-side, #000 50%, transparent 100%); mask:radial-gradient(closest-side, #000 50%, transparent 100%); transform:scale(1.04); transition:transform 1.2s cubic-bezier(.2,.7,.1,1); } .npanel.is-on .npanel__img{ transform:none; } .npanel__body{ position:relative; z-index:1; padding:clamp(24px,3vw,40px); padding-top:clamp(120px,14vw,190px); } .npanel__body .eyebrow{ color:var(--teal-l); } .npanel h3{ margin:10px 0 12px; color:#fff; font:800 clamp(24px,2.4vw,34px)/1.1 var(--f-head); letter-spacing:-.015em; max-width:22ch; } .npanel__body > p{ margin:0 0 16px; color:var(--d-mute); max-width:56ch; } .npanel ul{ margin:0 0 18px; padding:0; list-style:none; display:grid; gap:8px; } .npanel li{ position:relative; padding-left:24px; color:var(--d-tx); font-size:15.5px; } .npanel li::before{ content:""; position:absolute; left:0; top:.55em; width:8px; height:8px; background:var(--teal-l); } .npanel li a{ color:var(--teal-l); text-decoration:underline; text-underline-offset:3px; } .npanel .feat__meta{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:20px; } .npanel .feat__meta span{ padding:4px 10px; border:1px solid rgba(76,194,192,.35); border-radius:999px; font-size:11px; color:var(--teal-l); } .npanel .feat__more{ margin:0; } /* Работы на тёмном */ .dark .chips a, .dark .chips button{ background:transparent; border-color:var(--d-line); color:var(--d-tx); } .dark .chips a:hover{ border-color:var(--teal-l); color:var(--teal-l); } .dark .chips .on{ background:var(--teal-l); border-color:var(--teal-l); color:var(--ink); } .dark .case__media{ --lc:transparent; background-color:#111820; } .dark .case:hover .case__media{ --lc:var(--rec); } .dark .case__media img{ background:#111820; } .dark .case__cat{ color:var(--teal-l); } .dark .case h3, .dark .case h2{ color:#fff; } .dark .case h3 a:hover{ color:var(--teal-l); } .dark .case p{ color:var(--d-mute); } .dark .stack li{ border-color:var(--d-line); color:var(--teal-l); } .dark .case__media::after{ background:var(--teal-l); color:var(--ink); font-weight:600; } /* Telegram-демо на тёмном */ #telegram.dark .tgdemo h2{ color:#fff; } #telegram.dark .tgdemo > div > p{ color:var(--d-mute); } #telegram.dark .tgdemo__list li{ color:var(--d-tx); } #telegram.dark .tgdemo > :last-child::before{ background:radial-gradient(closest-side, rgba(76,194,192,.28), transparent); } /* Блог на тёмном */ .dark .pcard h3, .dark .pcard h2{ color:#fff; } .dark .pcard h3 a:hover{ color:var(--teal-l); } .dark .pcard p{ color:var(--d-mute); } .dark .pcard .mono{ color:var(--d-mute); } .dark .pcard__img{ background:#111820; } @media (max-width:980px){ .ntabs{ grid-template-columns:1fr; } .ntabs__list{ display:none; } .ntabs__stage{ display:grid; gap:16px; } .npanel{ grid-area:auto; opacity:1; visibility:visible; transform:none; } .npanel__img{ width:80%; } } @media (prefers-reduced-motion:reduce){ .npanel, .npanel__img, .ntab{ transition:none; } } /* ========================================================================== Весь сайт в тёмном стиле (26.09.2026). Токены переопределены на body, поэтому все правила выше, написанные через var(--ink/--mute/--line/--soft), сами становятся тёмными. Ниже — только места с зашитыми светлыми цветами. ========================================================================== */ body{ --paper:#0A0E13; --ink:#EEF2F5; --text:#C3CDD5; --mute:#8C9AA8; --line:#223040; --soft:#0F151C; --tint:rgba(76,194,192,.10); --teal:#4CC2C0; background:#0A0E13; color:var(--text); color-scheme:dark; } /* Иллюстрации-«экраны» остаются светлыми, как экраны устройств */ .panel, .chat__foot{ --ink:#0F1214; --text:#2B3337; --mute:#5B656B; --line:#E2E7E9; --soft:#F3F6F6; --tint:#E7F4F3; --teal:#178E8C; color:var(--ink); } .panel{ background:#F3F6F6; } .feat__art.vf{ --lc:rgba(255,255,255,.85); } /* Шапка: тёмное стекло на всех страницах */ .site-head{ background:rgba(10,14,19,.86); border-bottom-color:rgba(255,255,255,.08); backdrop-filter:saturate(1.2) blur(14px); } .site-nav .sub-menu{ background:#111820; border-color:var(--line); box-shadow:0 24px 50px rgba(0,0,0,.5); } .site-nav .sub-menu a:hover{ background:rgba(76,194,192,.08); color:var(--teal-l); } .site-nav .current-menu-item > a, .site-nav .current-menu-ancestor > a, .site-nav .current_page_item > a{ color:var(--teal-l); } .site-head__tg.btn--ink{ background:rgba(255,255,255,.1); border-color:rgba(255,255,255,.35); color:#fff; box-shadow:none; font-weight:500; } .site-head__tg.btn--ink:hover{ background:var(--teal-l); border-color:var(--teal-l); color:var(--ink-d, #0F1214); } @media (max-width:1060px){ .site-nav{ background:#0A0E13; } } /* Кнопки */ .btn:hover{ background:#fff; border-color:#fff; color:#0F1214; } .btn:not(.btn--ink):not(.btn--glow){ border-color:rgba(231,237,242,.35); color:#fff; } .btn--ink, .dark .btn--ink{ background:var(--teal-l); border-color:var(--teal-l); color:#0F1214; font-weight:600; box-shadow:0 10px 40px -14px rgba(76,194,192,.7); } .btn--ink:hover{ background:#fff; border-color:#fff; color:#0F1214; } .btn--ink:not(.btn--tg)::before{ background:#0F1214; } .chips .on, .chips [aria-pressed="true"]{ background:var(--teal-l); border-color:var(--teal-l); color:#0F1214; } .chips .on:hover, .chips [aria-pressed="true"]:hover{ color:#0F1214; } .chips a, .chips button{ background:transparent; } /* Секции и карточки */ .sec--soft, .blk:nth-of-type(even){ background:#0D1218; } .cm-box, .cm-contact, .cmtch-contact-note, .svc .more-links a{ background:#111820; } .svc .cm-box:hover{ box-shadow:0 24px 50px -28px rgba(0,0,0,.8), 0 0 0 1px var(--line); } .svc .more-links a:hover{ background:var(--teal-l); border-color:var(--teal-l); color:#0F1214; } .svc .blk:first-child > .w:has(> .intro) > .facts, .svc .blk:first-child > .w:has(> .intro) > .see{ background:#111820; border:1px solid var(--line); } .svc .blk:first-child > .w:has(> .intro) > .facts{ border-bottom:0; } .svc .blk:first-child > .w:has(> .intro) > .see{ border-top:0; } .svc .cm-box__icon::before{ -webkit-text-stroke-color:rgba(143,233,229,.5); } .svc .intro .feat__meta span, .svc .feat__meta span{ border-color:rgba(76,194,192,.35); color:var(--teal-l); } .stack li{ border-color:var(--line); color:var(--teal-l); } .entry a{ color:var(--teal-l); } .aside-card{ border:1px solid var(--line); } .search-form input[type=search]{ background:#111820; border-color:var(--line); color:#fff; } .eyebrow > b{ color:var(--rec); } h1 em, h2 em, .sec h2 em{ background-image:linear-gradient(92deg,#8FE9E5 0%,var(--teal-l) 50%,#2FA8A5 100%); } .facts{ border-top-color:var(--line); } .cta{ border-top:1px solid rgba(231,237,242,.07); } .cta .btn{ background:var(--teal-l); border-color:var(--teal-l); color:#0F1214; } /* Подвал */ .site-foot{ background:#070A0E; border-top:1px solid rgba(231,237,242,.07); color:var(--mute); } .site-foot h4{ color:#fff; } .site-foot a:hover{ color:var(--teal-l); } .site-foot__tg{ color:#fff; } .site-foot__tg::before{ background:var(--teal-l); } .site-foot .logo{ color:#fff; } /* Ссылки на юридические страницы от плагина Cookie Consent Mascot */ .ccm-footer-links{ background:#070A0E!important; border-top:1px solid rgba(231,237,242,.07)!important; color:var(--mute)!important; } .ccm-footer-links a{ color:var(--mute)!important; } .ccm-footer-links a:hover{ color:var(--teal-l)!important; } /* Превью работ, сервисов и статей — «под матовым стеклом»: приглушены, при наведении проявляются в полную яркость (26.09.2026) */ .case__media, .prod__shot, .plug, .pcard__img, .gallery__main{ position:relative; } .case__media img, .prod img, .plug img, .pcard__img img{ filter:brightness(.62) saturate(.75) contrast(1.05); transition:filter .5s ease, transform .6s cubic-bezier(.2,.7,.1,1); } .case__media::before, .pcard__img::before{ content:""; position:absolute; inset:10px; z-index:1; pointer-events:none; background:linear-gradient(160deg, rgba(76,194,192,.10), rgba(10,14,19,.35) 60%, rgba(10,14,19,.55)); box-shadow:inset 0 0 0 1px rgba(255,255,255,.06), inset 0 1px 0 rgba(255,255,255,.12); transition:opacity .5s ease; } .pcard__img::before{ inset:0; } .case:hover .case__media img, .prod:hover img, .plug:hover img, .pcard:hover .pcard__img img{ filter:none; } .case:hover .case__media::before, .pcard:hover .pcard__img::before{ opacity:0; } .case__media::after{ z-index:2; } @media (hover:none){ .case__media img, .prod img, .plug img, .pcard__img img{ filter:brightness(.8) saturate(.9); } } /* Телефон с перепиской — тёмная тема Telegram в цветах сайта (26.09.2026) */ .phone{ --lc:rgba(255,255,255,.7); } .phone__in{ position:relative; border:1px solid rgba(76,194,192,.35); border-radius:28px; background:linear-gradient(180deg,#0F161E,#0B1117); box-shadow:0 40px 90px -30px rgba(0,0,0,.9), 0 0 0 6px #111820, 0 0 60px -10px rgba(76,194,192,.25); } .phone__bar{ background:rgba(17,24,32,.95); border-bottom:1px solid var(--d-line); } .phone__bar b{ color:#fff; } .phone__bar span{ color:var(--teal-l); } .phone__ava{ background:linear-gradient(135deg,var(--teal-l),#1F7F7D); color:#0A0E13; } .phone__ava::after{ background:#4ADE80; border-color:#111820; } .phone__chat{ background:radial-gradient(80% 60% at 70% 0%, rgba(76,194,192,.08), transparent 70%); } .phone .msg{ color:var(--d-tx); } .phone .msg--q{ background:linear-gradient(135deg,#1E6D6B,#185655); color:#fff; border:0; box-shadow:0 6px 20px -10px rgba(76,194,192,.6); } .phone .msg--a{ background:#18212B; border:1px solid rgba(76,194,192,.22); color:var(--d-tx); box-shadow:none; } .phone .msg--a .mono{ color:var(--teal-l); } .phone__typing{ background:#18212B; border:1px solid var(--d-line); } .phone__typing i{ background:var(--teal-l); opacity:.8; } .phone__cap{ color:var(--d-mute); } /* ИИ-фото и ИИ-видео: галерея примеров и плеер */ .aigal{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; margin:0; } .aigal figure{ margin:0; position:relative; overflow:hidden; border:1px solid var(--line); background:#111820; } .aigal img{ display:block; width:100%; aspect-ratio:4/3; object-fit:cover; transition:transform .5s ease; } .aigal figure:hover img{ transform:scale(1.04); } .aigal figcaption{ position:absolute; left:0; right:0; bottom:0; padding:28px 14px 12px; font-size:14px; color:#EEF2F5; background:linear-gradient(transparent,rgba(10,14,19,.88)); } .aigal figcaption .mono{ display:block; font-size:11px; letter-spacing:.08em; color:var(--teal); text-transform:uppercase; } .aigal__note{ margin:14px 0 0; font-size:13px; color:var(--mute); } .aivid{ margin:0; border:1px solid var(--line); background:#000; box-shadow:0 30px 80px -30px rgba(76,194,192,.35); } .aivid video{ display:block; width:100%; aspect-ratio:16/9; background:#000; } .aivid figcaption{ padding:14px 18px; font-size:15px; color:var(--text); background:#111820; border-top:1px solid var(--line); } .aivid figcaption b{ color:var(--ink); } .gen-cta{ display:grid; grid-template-columns:1fr auto; gap:24px; align-items:center; padding:clamp(22px,3vw,34px); border:1px solid rgba(76,194,192,.35); background:radial-gradient(120% 140% at 0% 0%,rgba(76,194,192,.16),transparent 60%),#0F151C; } .gen-cta h3{ margin:0 0 8px; font:700 clamp(20px,2.2vw,26px)/1.2 var(--f-head); color:var(--ink); } .gen-cta p{ margin:0; color:var(--text); max-width:620px; } @media (max-width:980px){ .aigal{ grid-template-columns:1fr 1fr; } } @media (max-width:640px){ .aigal{ grid-template-columns:1fr; } .gen-cta{ grid-template-columns:1fr; } } .aigal--styles{ grid-template-columns:repeat(6,minmax(0,1fr)); gap:10px; margin-top:14px; } .aigal--styles img{ aspect-ratio:16/9; } .aigal--styles figcaption{ padding:18px 10px 8px; font-size:13px; } @media (max-width:980px){ .aigal--styles{ grid-template-columns:repeat(3,minmax(0,1fr)); } } @media (max-width:640px){ .aigal--styles{ grid-template-columns:repeat(2,minmax(0,1fr)); } } /* Свёрнутые панели направлений: длинные слова («продвижение», «автоматизации») помещаются */ .dp:not(.is-open) h3{ font-size:clamp(17px,1.35vw,21px); hyphens:auto; -webkit-hyphens:auto; overflow-wrap:break-word; } .dp.is-open .dp__body ul{ max-height:560px; } @media (max-width:980px){ .dp:not(.is-open) h3{ font-size:clamp(19px,1.7vw,24px); } } /* Наведение на кнопки: подложка всегда светлая (белая или бирюзовая), а --ink на тёмной теме — светлый цвет текста; старые правила (.cta, .dark, --glow, --line) давали белую надпись на белом. */ .btn:hover, .btn:focus-visible{ color:#0F1214!important; } .btn:hover::before{ background:#0F1214; } /* /site-analysis/: блок «На чём сделан сайт» (cm_techdetect) */ .scan-report .cm-tech{ margin-top:14px; padding:14px; border:1px solid rgba(76,194,192,.35); background:radial-gradient(120% 120% at 0 0,rgba(76,194,192,.12),transparent 60%),#0F151C; } .scan-report .cm-tech__head{ display:flex; justify-content:space-between; gap:12px; margin:0 0 12px; font:500 11px/1.2 var(--f-mono); letter-spacing:.08em; text-transform:uppercase; color:var(--d-mute); } .scan-report .cm-tech__head span:first-child{ color:var(--teal-l); } .scan-report .cm-tech__main{ display:flex; flex-direction:column; gap:2px; padding:0 0 12px; margin:0 0 10px; border-bottom:1px solid var(--d-line); } .scan-report .cm-tech__main small{ color:var(--d-mute); font-size:12px; } .scan-report .cm-tech__main b{ color:#fff; font:800 clamp(22px,2.4vw,28px)/1.1 var(--f-head); letter-spacing:-.01em; } .scan-report .cm-tech__main b i{ font:500 14px/1 var(--f-mono); font-style:normal; color:var(--teal-l); margin-left:6px; } .scan-report .cm-tech__main--none b{ font-size:18px; } .scan-report .cm-tech__grp{ display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:4px 14px; padding:6px 0; } .scan-report .cm-tech__cat{ color:var(--d-mute); font-size:13px; padding-top:4px; } .scan-report .cm-tech__chips{ display:flex; flex-wrap:wrap; gap:6px; } .scan-report .cm-tech__chip{ display:inline-flex; align-items:baseline; gap:5px; padding:4px 9px; border:1px solid var(--d-line); background:#111820; color:var(--d-tx); font-size:13.5px; line-height:1.3; text-decoration:none; transition:border-color .2s, color .2s; } .scan-report a.cm-tech__chip:hover{ border-color:var(--teal-l); color:#fff; } .scan-report .cm-tech__chip i{ font:500 11.5px/1 var(--f-mono); font-style:normal; color:var(--teal-l); } .scan-report .cm-tech__chip.is-implied{ border-style:dashed; color:var(--d-mute); } .scan-report .cm-tech__tips{ display:grid; gap:8px; margin-top:12px; } .scan-report .cm-tech__tip{ display:flex; justify-content:space-between; align-items:center; gap:14px; padding:12px 14px; border-left:3px solid var(--rec); background:#111820; color:var(--d-tx); font-size:14px; text-decoration:none; transition:background-color .2s; } .scan-report .cm-tech__tip b{ flex:none; color:var(--teal-l); font-weight:600; } .scan-report .cm-tech__tip:hover{ background:#16202A; } @media (max-width:600px){ .scan-report .cm-tech__grp{ grid-template-columns:1fr; } .scan-report .cm-tech__tip{ flex-direction:column; align-items:flex-start; } } /* /site-analysis/: отчёт на всю ширину под сканером */ .scan-report .cm-audit-results{ margin-top:clamp(24px,3vw,36px); } .scan-report .cm-audit-results:empty{ display:none; } .scan-report .cm-audit-loading, .scan-report .cm-audit-error{ padding:14px 16px; border:1px solid var(--d-line); background:#111820; color:var(--d-tx); font-size:15px; } .scan-report .cm-audit-error{ border-color:rgba(224,39,31,.6); color:#FFB4AF; } .cm-rep{ display:grid; gap:clamp(18px,2.4vw,28px); } .cm-rep__top{ display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:12px 24px; padding:16px 20px; border:1px solid rgba(76,194,192,.35); background:radial-gradient(120% 160% at 0 0,rgba(76,194,192,.14),transparent 60%),#0F151C; color:var(--d-tx); font-size:16px; } .cm-rep__top code{ color:var(--teal-l); background:none; font:500 15px/1.3 var(--f-mono); word-break:break-all; } .cm-rep__score{ display:inline-flex; gap:14px; font:600 15px/1 var(--f-mono); white-space:nowrap; } .cm-rep__score b{ font-weight:600; } .cm-rep__sec{ padding:clamp(16px,2vw,24px); border:1px solid var(--d-line); background:#0D131A; } .cm-rep__head{ display:flex; flex-wrap:wrap; align-items:baseline; gap:6px 14px; margin:0 0 14px; } .cm-rep__head h3{ margin:0; color:#fff; font:800 clamp(20px,2vw,26px)/1.15 var(--f-head); letter-spacing:-.01em; } .cm-rep__head .cm-rep__score, .cm-rep__meta{ margin-left:auto; color:var(--d-mute); font:500 13px/1 var(--f-mono); } .cm-rep__n{ color:var(--rec); font:500 12px/1 var(--f-mono); letter-spacing:.08em; } .cm-rep__note{ margin:0 0 14px; padding:10px 14px; border-left:3px solid var(--warm); background:rgba(240,180,84,.07); color:var(--d-tx); font-size:14px; line-height:1.5; } .scan-report .cm-audit-results-list{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; } .scan-report .cm-audit-results-list li{ display:flex; flex-direction:column; gap:4px; padding:12px 14px; background:#111820; border-left:3px solid var(--d-line); font-size:14px; line-height:1.45; } .scan-report .cm-audit-results-list li.cm-audit-ok{ border-left-color:var(--teal-l); } .scan-report .cm-audit-results-list li.cm-audit-warn{ border-left-color:var(--warm); } .scan-report .cm-audit-results-list li.cm-audit-fail{ border-left-color:var(--rec); } .scan-report .cm-audit-results-list li.cm-audit-info{ border-left-color:#5B8DEF; } .scan-report .cm-audit-label{ color:#fff; font-weight:600; } .scan-report .cm-audit-detail{ color:var(--d-mute); word-break:break-word; } .scan-report .cm-tech{ margin:0; padding:0; border:0; background:none; } .scan-report .cm-tech__groups{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px 24px; } .scan-report .cm-tech__grp{ display:flex; flex-direction:column; gap:6px; padding:0; } .scan-report .cm-tech__cat{ padding:0; } .scan-report .cm-tech__tips{ grid-template-columns:repeat(2,minmax(0,1fr)); } @media (max-width:980px){ .scan-report .cm-audit-results-list, .scan-report .cm-tech__tips{ grid-template-columns:1fr; } .scan-report .cm-tech__groups{ grid-template-columns:repeat(2,minmax(0,1fr)); } } @media (max-width:600px){ .scan-report .cm-tech__groups{ grid-template-columns:1fr; } .cm-rep__head .cm-rep__score, .cm-rep__meta{ margin-left:0; width:100%; } } /* Штрафы у пунктов 152-ФЗ */ .scan-report .cm-audit-results-list li.has-fine{ display:grid; grid-template-columns:minmax(0,1fr) auto; column-gap:14px; align-items:start; } .scan-report li.has-fine .cm-audit-detail{ grid-column:1 / -1; } .cm-fine{ display:flex; flex-direction:column; align-items:flex-end; text-align:right; } .cm-fine b{ color:#FF6A5E; font:800 clamp(17px,1.6vw,21px)/1.05 var(--f-head); letter-spacing:-.01em; white-space:nowrap; } .cm-fine small{ margin-top:3px; color:var(--d-mute); font:500 11px/1.2 var(--f-mono); white-space:nowrap; } li.cm-audit-warn .cm-fine b{ color:var(--warm); } .cm-rep__fine{ margin-left:auto; padding:6px 10px; border:1px solid rgba(224,39,31,.55); background:rgba(224,39,31,.12); color:#FF8A80; font:800 15px/1 var(--f-head); white-space:nowrap; } .cm-rep__fine + .cm-rep__score{ margin-left:0; } @media (max-width:600px){ .cm-rep__fine{ margin-left:0; } } /* ============================================================ Сервисы: «Дизайн сайта с ИИ» (.tool--design) и «Генератор ТЗ» (.tool--tz) ============================================================ */ .tool{ display:grid; gap:clamp(24px,3vw,40px); } .tool--design{ grid-template-columns:minmax(0,1fr) minmax(0,.95fr); align-items:start; } .tool-form{ display:grid; gap:14px; } .tool-f{ margin:0; padding:clamp(16px,2vw,22px); border:1px solid var(--line); background:var(--d-s1); display:grid; gap:14px; min-width:0; } .tool-f legend{ float:left; width:100%; display:flex; align-items:baseline; gap:12px; padding:0; margin:0 0 2px; font:700 clamp(18px,1.6vw,21px)/1.2 var(--f-head); color:var(--ink); } .tool-f legend small{ color:var(--mute); font:400 13px/1 var(--f-body); } .tool-f legend + *{ clear:both; } .tool-n{ color:var(--rec); font:500 12px/1 var(--f-mono); letter-spacing:.08em; } .tool-l{ display:flex; flex-wrap:wrap; align-items:baseline; gap:7px 6px; font-size:14.5px; color:var(--text); min-width:0; } .tool-l > input, .tool-l > textarea, .tool-l > .tool-chips, .tool-l > .tool-pals{ flex:1 1 100%; } .tool-l small{ color:var(--mute); font-size:12.5px; } .tool-l b{ color:var(--rec); font-weight:500; } .tool-l input[type=text], .tool-l input[type=url], .tool-l input[type=email], .tool-l input[type=tel], .tool-l textarea{ width:100%; box-sizing:border-box; padding:12px 14px; border:1px solid var(--line); border-radius:2px; background:#0D131A; color:#fff; font:400 15.5px/1.4 var(--f-body); resize:vertical; } .tool-l input::placeholder, .tool-l textarea::placeholder{ color:#5E6C79; } .tool-l input:focus, .tool-l textarea:focus{ outline:none; border-color:var(--teal-l); box-shadow:0 0 0 3px rgba(76,194,192,.18); } .tool-row{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; } .tool-row--4{ grid-template-columns:repeat(4,minmax(0,1fr)); } .tool-hint{ margin:0; color:var(--mute); font-size:13.5px; line-height:1.5; } .tool-chips{ display:flex; flex-wrap:wrap; gap:8px; } .tool-chip{ position:relative; cursor:pointer; } .tool-chip input, .tool-pal > input{ position:absolute; opacity:0; width:1px; height:1px; } .tool-chip span{ display:inline-block; padding:9px 14px; border:1px solid var(--line); background:#0D131A; color:var(--text); font-size:14px; line-height:1.2; transition:border-color .15s,background-color .15s,color .15s; } .tool-chip:hover span{ border-color:#3A4B5C; color:#fff; } .tool-chip input:checked + span{ border-color:var(--teal-l); background:rgba(76,194,192,.14); color:#fff; box-shadow:inset 0 0 0 1px var(--teal-l); } .tool-chip input:focus-visible + span, .tool-pal > input:focus-visible ~ span{ outline:2px solid var(--teal-l); outline-offset:2px; } .tool-pals{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; } .tool-pal{ position:relative; display:grid; gap:7px; padding:9px; border:1px solid var(--line); background:#0D131A; cursor:pointer; font-size:13px; color:var(--text); transition:border-color .15s; } .tool-pal:hover{ border-color:#3A4B5C; } .tool-pal:has(> input:checked){ border-color:var(--teal-l); box-shadow:inset 0 0 0 1px var(--teal-l); color:#fff; } .tool-pal__sw{ display:flex; height:30px; overflow:hidden; } .tool-pal__sw i{ flex:1; } .tool-pal__sw--custom input{ flex:1; min-width:0; height:30px; padding:0; border:0; background:none; cursor:pointer; } .tool-pal__sw--auto{ align-items:center; justify-content:center; background:conic-gradient(from 90deg,#4CC2C0,#F0B454,#E0271F,#7C3AED,#4CC2C0); color:#0A0E13; font:700 16px/1 var(--f-head); } .tool-check{ display:flex; gap:10px; align-items:flex-start; font-size:14px; color:var(--text); cursor:pointer; } .tool-check input{ margin-top:3px; width:17px; height:17px; accent-color:var(--teal-l); flex:none; } .tool-hp{ position:absolute !important; left:-9999px !important; width:1px; height:1px; opacity:0; } .tool-submit{ display:grid; gap:12px; justify-items:start; padding-top:4px; } .tool-submit .btn{ font-size:16px; padding:16px 28px; } .tool-captcha{ min-height:100px; } .tool-out{ position:sticky; top:calc(var(--head-h) + 16px); background:var(--d-bg); border:1px solid var(--line); box-shadow:0 40px 80px -40px rgba(0,0,0,.7); } .tool-out__bar{ display:flex; justify-content:space-between; gap:12px; padding:12px 16px; border-bottom:1px solid var(--line); color:var(--mute); font-size:11px; } .tool-out__bar span:first-child{ display:inline-flex; align-items:center; gap:8px; color:#fff; } .tool-out__bar b{ font-weight:500; } .tool-out__bar i{ width:8px; height:8px; border-radius:50%; background:var(--teal-l); box-shadow:0 0 0 4px rgba(76,194,192,.18); animation:hx-blink 1.6s steps(1) infinite; } .tool-out__body{ padding:16px; display:grid; gap:14px; } .tool-out__fig{ margin:0; } .tool-out__fig a{ display:block; max-height:min(72vh,760px); overflow:auto; border:1px solid var(--line); background:#fff; scrollbar-width:thin; } .tool-out__fig img{ display:block; width:100%; height:auto; } .tool-out__fig figcaption{ margin-top:10px; color:var(--mute); font-size:13.5px; } .tool-out__fig.is-new a{ border-color:var(--teal-l); box-shadow:0 0 0 1px var(--teal-l), 0 20px 60px -20px rgba(76,194,192,.5); } .tool-out__acts{ display:flex; flex-wrap:wrap; gap:8px; } .tool-out__acts .btn{ padding:11px 16px; font-size:14px; } .tool-msg{ padding:16px; border:1px solid var(--line); background:#111820; color:var(--d-tx); font-size:15px; display:grid; gap:14px; justify-items:start; } .tool-msg p{ margin:0; } .tool-msg.is-err{ border-color:rgba(224,39,31,.6); color:#FFB4AF; } .tool-msg.is-limit{ border-color:rgba(240,180,84,.6); } .tool-msg.is-load{ padding:40px 20px; justify-items:center; text-align:center; } .tool-load{ display:grid; gap:12px; justify-items:center; width:100%; } .tool-load__bar{ position:relative; display:block; width:min(320px,90%); height:3px; background:var(--line); overflow:hidden; } .tool-load__bar i{ position:absolute; top:0; bottom:0; width:40%; background:var(--teal-l); box-shadow:0 0 12px var(--teal-l); animation:tool-load 1.4s ease-in-out infinite; } @keyframes tool-load{ 0%{ left:-40%; } 100%{ left:100%; } } .tool-load__step{ color:#fff; font:600 17px/1.3 var(--f-head); } .tool-load__time{ color:var(--mute); font:500 12px/1 var(--f-mono); } @media (max-width:980px){ .tool--design{ grid-template-columns:1fr; } .tool-out{ position:static; order:-1; } .tool-out__fig a{ max-height:60vh; } .tool-row--4{ grid-template-columns:repeat(2,minmax(0,1fr)); } } @media (max-width:600px){ .tool-row, .tool-row--4{ grid-template-columns:1fr; } .tool-pals{ grid-template-columns:repeat(2,minmax(0,1fr)); } } /* Генератор ТЗ */ .tz-steps{ display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:6px; margin:0; padding:0; list-style:none; font-size:11px; } .tz-steps[hidden]{ display:none; } .tz-steps li{ display:grid; gap:6px; padding:10px 0 0; border-top:2px solid var(--line); color:var(--mute); line-height:1.25; letter-spacing:.04em; } .tz-steps li span{ color:var(--mute); } .tz-steps li.is-done{ border-color:rgba(76,194,192,.5); color:var(--text); cursor:pointer; } .tz-steps li.is-on{ border-color:var(--teal-l); color:#fff; } .tz-steps li.is-on span{ color:var(--rec); } .tz-form[hidden]{ display:none; } .tz-step{ display:none; } .tz-step.is-on{ display:grid; } .tz-nav{ display:flex; flex-wrap:wrap; align-items:center; gap:12px; } .tz-nav .tz-next, .tz-nav .tz-go{ margin-left:auto; } .tz-nav [hidden]{ display:none; } .tz-err{ color:#FFB4AF; font-size:14px; } .tz-err:empty{ display:none; } .tz-out{ display:grid; gap:16px; } .tz-out[hidden]{ display:none; } .tz-out__acts{ display:flex; flex-wrap:wrap; gap:8px; } .tz-out__ok{ margin:0; padding:12px 16px; border-left:3px solid var(--teal-l); background:rgba(76,194,192,.08); color:var(--d-tx); font-size:15px; } .tz-paper{ padding:clamp(20px,4vw,56px); background:#FBFBF8; color:#1B2226; box-shadow:0 40px 80px -40px rgba(0,0,0,.8); font-size:15.5px; line-height:1.6; } .tz-paper h1, .tz-paper h2{ color:#0F1214; } .tz-paper h1{ margin:4px 0 10px; font:800 clamp(24px,3vw,34px)/1.15 var(--f-head); letter-spacing:-.015em; } .tz-paper h2{ margin:30px 0 10px; padding-top:18px; border-top:1px solid #E1E4E2; font:700 clamp(18px,1.8vw,22px)/1.25 var(--f-head); } .tz-paper a{ color:#127371; } .tz-paper ul, .tz-paper ol{ margin:8px 0; padding-left:22px; } .tz-paper li{ margin:0 0 6px; } .tz-kicker{ margin:0; color:#E0271F; font:500 12px/1 var(--f-mono); letter-spacing:.08em; text-transform:uppercase; } .tz-meta{ margin:0; color:#5B656B; font-size:14px; } .tz-t{ width:100%; border-collapse:collapse; margin:8px 0 10px; font-size:15px; } .tz-t th, .tz-t td{ padding:9px 12px; border:1px solid #DDE2E0; text-align:left; vertical-align:top; } .tz-t th{ width:30%; background:#F0F2F0; color:#2B3337; font-weight:600; } @media (max-width:760px){ .tz-steps{ font-size:0; } .tz-steps li span{ font-size:11px; } .tz-t th, .tz-t td{ display:block; width:auto; } .tz-t th{ border-bottom:0; } } @media print{ body.tz-printing *{ visibility:hidden; } body.tz-printing .tz-paper, body.tz-printing .tz-paper *{ visibility:visible; } body.tz-printing .tz-paper{ position:absolute; left:0; top:0; width:100%; padding:0; box-shadow:none; background:#fff; } } /* Витрина /servisy/ и примеры дизайнов */ .tools-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(14px,2vw,22px); } .entry .tools-card, .entry .tools-card *{ text-decoration:none; } .tools-card, .entry .tools-card{ display:flex; flex-direction:column; border:1px solid var(--line); background:var(--d-s1); color:var(--text); text-decoration:none; transition:border-color .2s, transform .2s; } .entry .tools-card:hover, .tools-card:hover{ border-color:var(--teal-l); color:var(--text); transform:translateY(-3px); } .tools-card__img{ display:block; overflow:hidden; border-bottom:1px solid var(--line); } .tools-card__img img{ display:block; width:100%; height:auto; aspect-ratio:4/3; object-fit:cover; transition:transform .5s ease; } .tools-card:hover .tools-card__img img{ transform:scale(1.04); } .tools-card__body{ display:flex; flex-direction:column; gap:10px; flex:1; padding:clamp(16px,2vw,24px); } .tools-card__body b{ color:var(--ink); font:800 clamp(21px,2vw,26px)/1.15 var(--f-head); letter-spacing:-.01em; } .tools-card__body > span:not(.eyebrow){ font-size:15px; line-height:1.55; } .tools-card__body em{ margin-top:auto; padding-top:6px; color:var(--teal-l); font-style:normal; font-weight:600; } @media (max-width:980px){ .tools-grid{ grid-template-columns:1fr; } .entry .tools-card{ display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1fr); } .tools-card__img{ border-bottom:0; border-right:1px solid var(--line); } .tools-card__img img{ height:100%; } } @media (max-width:600px){ .entry .tools-card, .entry .tools-card *{ text-decoration:none; } .tools-card{ display:flex; } .tools-card__img{ border-right:0; border-bottom:1px solid var(--line); } } .aigal--designs{ align-items:start; } .aigal--designs figure{ background:#fff; } .aigal--designs a{ display:block; height:clamp(320px,34vw,460px); overflow:hidden; } .aigal--designs img{ aspect-ratio:auto; height:auto; object-fit:initial; } .aigal--designs figure:hover img{ transform:none; } .aigal--designs figcaption{ position:static; padding:12px 14px; background:#111820; border-top:1px solid var(--line); } .entry .tool a.btn, .entry .tool-msg a.btn{ text-decoration:none; } .entry .tool a.btn--glow{ color:var(--ink); } .entry .tool a.btn--line{ color:#fff; } .entry .tz-paper .tz-t{ display:table; width:100%; max-width:none; } /* Мобильное меню: backdrop-filter у шапки делает её контейнером для position:fixed — открытое меню сжималось до высоты шапки. Пока меню открыто, фильтр снимаем. */ @media (max-width:1060px){ .nav-open .site-head, .hero-over.nav-open .site-head, .hero-over.nav-open .site-head.is-solid{ backdrop-filter:none; -webkit-backdrop-filter:none; background:#0A0E13; } .site-nav li.is-mega > .sub-menu{ width:auto; column-count:2; column-gap:24px; } .site-nav a{ overflow-wrap:anywhere; hyphens:auto; } } @media (max-width:600px){ .site-nav li.is-mega > .sub-menu{ column-count:1; } } @media (max-width:1060px){ .site-nav .sub-menu{ background:transparent; } } /* 2026-10-04: плагины в блоке #tools. С 13.10.2026 их четыре — сетка 2×2 (три в ряд оставляли одну карточку внизу). */ @media (min-width:1101px){ .plugs{ grid-template-columns:repeat(2,minmax(0,1fr)); } .plug{ grid-template-columns:104px minmax(0,1fr); gap:14px; } .plug h3{ font-size:17px; } } @media (min-width:981px) and (max-width:1100px){ .plugs .plug:last-child:nth-child(odd){ grid-column:1 / -1; } } /* 09.10.2026 SEO: заголовок вступления — h2 (раньше h3 сразу после h1), вид прежний. */ .feat h2.feat__t, .entry .feat h2.feat__t, .intro h2.feat__t{ font:800 clamp(24px,2.6vw,34px)/1.1 var(--f-head)!important; letter-spacing:-.015em; margin:10px 0 12px!important; text-transform:none; } /* 09.10.2026 SEO-страницы услуг (svc-build2): иллюстрации, таблица цен, «почему мы». */ .svc-lead{ max-width:70ch; color:var(--mute); margin:-12px 0 24px; font-size:16.5px; } .svc-fig{ margin:0; } .svc-fig img{ display:block; width:100%; height:auto; border:1px solid var(--line); border-radius:4px; } .svc-fig figcaption{ margin-top:10px; color:var(--mute); font-size:14px; max-width:80ch; } .ptable-wrap{ overflow-x:auto; } .ptable{ width:100%; border-collapse:collapse; font-size:15.5px; min-width:560px; } .ptable th, .ptable td{ text-align:left; vertical-align:top; padding:14px 16px 14px 0; border-top:1px solid var(--line); } .ptable thead th{ font:600 12px/1.2 var(--f-mono, monospace); text-transform:uppercase; letter-spacing:.06em; color:var(--mute); border-top:0; padding-bottom:10px; } .ptable tbody th{ font-weight:700; width:30%; } .ptable tbody th a{ color:inherit; text-decoration:underline; text-decoration-color:var(--teal); text-underline-offset:3px; } .ptable__p{ white-space:nowrap; font-weight:700; color:var(--teal); width:18%; } .why{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1px; background:var(--line); border:1px solid var(--line); } .why__i{ background:var(--paper); padding:22px; } .why__i h3{ margin:0 0 8px; font:700 18px/1.25 var(--f-head); } .why__i p{ margin:0; color:var(--mute); font-size:15px; } .entry .why__i h3{ margin:0 0 8px; } .entry .svc-fig{ margin:0; } @media (max-width:900px){ .why{ grid-template-columns:1fr; } } /* ========================================================================== 09.10.2026 Интерактивные блоки услуг (js/svc.js): квиз, конструктор, цены, этапы, чек-лист, инструменты, статьи. Палитра — тёмные токены body. ========================================================================== */ .svc .btn--glow, .entry .btn--glow{ color:#0F1214!important; } .svcb-h{ font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--mute); margin:0 0 12px; } /* Квиз */ .svq{ border:1px solid var(--line); background:linear-gradient(180deg,var(--soft),var(--paper)); padding:28px; position:relative; overflow:hidden; } .svq::before{ content:""; position:absolute; right:-120px; top:-120px; width:320px; height:320px; border-radius:50%; background:radial-gradient(circle,rgba(76,194,192,.18),transparent 70%); pointer-events:none; } .svq__head{ display:flex; align-items:center; gap:16px; margin-bottom:22px; } .svq__cnt{ font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--teal-l); white-space:nowrap; } .svq__bar{ flex:1; height:4px; background:var(--line); border-radius:4px; overflow:hidden; } .svq__bar i{ display:block; height:100%; width:0; background:var(--teal-l); box-shadow:0 0 12px var(--teal-l); transition:width .4s ease; } .svq__body{ min-height:260px; position:relative; } .svq__body.is-in{ animation:svqIn .35s ease both; } @keyframes svqIn{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:none; } } .svq__q{ font:800 clamp(22px,2.4vw,30px)/1.15 var(--f-head); color:var(--ink); margin:0 0 8px; max-width:32ch; } .svq__h{ color:var(--mute); margin:0 0 18px; } .svq__opts{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:12px; margin-top:20px; } .svq__o{ text-align:left; padding:18px 18px 16px; border:1px solid var(--line); background:var(--paper); color:var(--text); cursor:pointer; border-radius:4px; transition:border-color .2s, transform .2s, box-shadow .2s; display:flex; flex-direction:column; gap:6px; font:inherit; } .svq__o b{ color:var(--ink); font:700 17px/1.25 var(--f-head); } .svq__o span{ font-size:14px; color:var(--mute); } .svq__o:hover, .svq__o:focus-visible{ border-color:var(--teal-l); transform:translateY(-2px); box-shadow:0 14px 30px -18px rgba(76,194,192,.6); outline:none; } .svq__back, .svq__again{ margin-top:18px; background:none; border:0; color:var(--mute); cursor:pointer; font:inherit; padding:0; } .svq__back:hover, .svq__again:hover{ color:var(--teal-l); } .svq__res{ display:grid; grid-template-columns:minmax(0,320px) minmax(0,1fr); gap:28px; align-items:start; } .svq__res img{ width:100%; height:auto; border:1px solid var(--line); border-radius:4px; } .svq__res:not(:has(> img)){ grid-template-columns:minmax(0,1fr); max-width:760px; } .svq__res .mono{ font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--teal-l); } .svq__rt{ font:800 clamp(26px,3vw,36px)/1.1 var(--f-head); color:var(--ink); margin:6px 0 4px!important; } .svq__rp{ margin-top:0!important; } .svq__rp{ color:var(--teal-l); margin:0 0 14px; font-weight:600; } .svq__rm, .svcb-res__m{ display:flex; flex-wrap:wrap; gap:10px 28px; margin:0 0 12px; } .svq__rm span, .svcb-res__m span{ display:block; font-size:11px!important; color:var(--mute)!important; text-transform:uppercase; letter-spacing:.06em; } .svq__rm b, .svcb-res__m b{ font:700 20px/1.2 var(--f-head); color:var(--ink); } .svq__alt{ color:var(--mute); font-size:15px; } @media (max-width:760px){ .svq{ padding:20px 16px; } .svq__res{ grid-template-columns:1fr; } } /* Конструктор */ .svcb{ display:grid; grid-template-columns:minmax(0,380px) minmax(0,1fr); gap:28px; align-items:start; } .svcb-goals{ display:grid; gap:8px; margin-bottom:24px; } .svcb-opt{ display:block; cursor:pointer; position:relative; } .svcb-chip{ cursor:pointer; position:relative; } .svcb-opt input, .svcb-chip input{ position:absolute; opacity:0; pointer-events:none; } .svcb-opt span{ display:block; padding:12px 14px 12px 40px; border:1px solid var(--line); border-radius:4px; position:relative; color:var(--text); transition:border-color .2s, background-color .2s; } .svcb-opt span::before{ content:""; position:absolute; left:14px; top:50%; width:14px; height:14px; margin-top:-7px; border-radius:50%; border:2px solid var(--mute); box-sizing:border-box; } .svcb-opt input:checked + span{ border-color:var(--teal-l); background:rgba(76,194,192,.08); color:var(--ink); } .svcb-opt input:checked + span::before{ border-color:var(--teal-l); background:radial-gradient(circle,var(--teal-l) 40%,transparent 46%); } .svcb-opt input:focus-visible + span, .svcb-chip input:focus-visible + span{ outline:2px solid var(--teal-l); outline-offset:2px; } .svcb-feats{ display:flex; flex-wrap:wrap; gap:8px; } .svcb-chip span{ display:inline-block; padding:8px 14px; border:1px solid var(--line); border-radius:999px; font-size:14px; color:var(--text); transition:all .2s; } .svcb-chip span::before{ content:"+ "; color:var(--teal-l); } .svcb-chip input:checked + span{ background:var(--teal-l); border-color:var(--teal-l); color:#0F1214; font-weight:600; } .svcb-chip input:checked + span::before{ content:"\2713 "; color:#0F1214; } .svcb-view{ position:sticky; top:90px; } .svcb-browser{ border:1px solid var(--line); border-radius:8px; background:#070A0E; overflow:hidden; box-shadow:0 30px 60px -30px rgba(0,0,0,.8), 0 0 0 1px rgba(76,194,192,.08); transition:max-width .4s ease, border-radius .4s; margin:0 auto; max-width:100%; } .svcb-browser.is-phone{ max-width:300px; border-radius:22px; } .svcb-bar{ display:flex; align-items:center; gap:6px; padding:10px 12px; border-bottom:1px solid var(--line); background:#0D1218; } .svcb-bar > i{ flex:none; width:9px; height:9px; border-radius:50%; background:#2A3846; } .svcb-url{ flex:1; min-width:0; margin:0 10px; padding:4px 10px; border-radius:999px; background:#121A22; color:var(--mute); font:12px/1.2 var(--f-mono); overflow:hidden; white-space:nowrap; text-overflow:ellipsis; } .svcb-sw{ display:flex; flex:none; border:1px solid var(--line); border-radius:999px; overflow:hidden; } .svcb-sw button{ border:0; background:none; color:var(--mute); padding:4px 10px; font:12px/1.2 var(--f-body); cursor:pointer; } .svcb-sw button.is-on{ background:var(--teal-l); color:#0F1214; } .svcb-site{ padding:12px; display:grid; gap:8px; align-content:start; min-height:420px; max-height:560px; overflow:auto; scrollbar-width:thin; } .wb{ position:relative; border:1px solid rgba(76,194,192,.28); border-radius:5px; background:rgba(76,194,192,.035); padding:22px 10px 10px; display:flex; flex-wrap:wrap; gap:6px; align-items:center; } .wb.is-new{ animation:wbIn .55s cubic-bezier(.2,.8,.2,1) both; } @keyframes wbIn{ 0%{ opacity:0; transform:translateY(-10px) scale(.97); } 60%{ box-shadow:0 0 24px rgba(76,194,192,.5); border-color:var(--teal-l); } 100%{ opacity:1; transform:none; } } .wb__l{ position:absolute; left:8px; top:5px; font:10px/1 var(--f-mono); letter-spacing:.06em; text-transform:uppercase; color:var(--teal-l); opacity:.8; } .wb i, .wb b{ display:block; } .w-logo{ width:42px; height:12px; border-radius:3px; background:var(--teal-l); opacity:.8; } .w-links{ display:flex!important; gap:6px; margin-left:auto; } .w-links b{ width:26px; height:6px; border-radius:3px; background:#2E3D4C; } .w-btn{ width:64px; height:16px; border-radius:3px; border:1px solid var(--teal-l); } .w-btn--fill{ background:var(--teal-l); border-color:var(--teal-l); } .w-btn--c{ margin:0 auto; } .w-h1{ width:62%; height:14px; border-radius:3px; background:#C9D6DF; opacity:.85; } .w-h1--c{ margin:0 auto; width:50%; } .w-p{ width:80%; height:6px; border-radius:3px; background:#2E3D4C; } .w-p--s{ width:45%; } .wb--hero{ display:grid; grid-template-columns:1fr 34%; grid-auto-rows:min-content; } .wb--hero .w-pic{ grid-column:2; grid-row:1 / span 4; height:84px; border-radius:4px; background:linear-gradient(135deg,rgba(76,194,192,.35),rgba(76,194,192,.05)); } .wb--offer{ justify-content:center; flex-direction:column; padding-block:26px 14px; } .w-cards, .w-grid{ display:grid!important; grid-template-columns:repeat(3,1fr); gap:6px; width:100%; } .w-grid{ grid-template-columns:repeat(4,1fr); } .w-cards b, .w-grid b{ border:1px solid #243241; border-radius:4px; padding:6px; display:grid; gap:4px; } .w-cards s, .w-grid s{ display:block; height:26px; border-radius:3px; background:#1A2632; text-decoration:none; } .w-cards u, .w-grid u{ display:block; height:5px; width:70%; border-radius:3px; background:#2E3D4C; text-decoration:none; } .w-grid em{ display:block; height:7px; width:40%; border-radius:3px; background:var(--teal-l); opacity:.7; } .w-chips{ display:flex!important; gap:6px; } .w-chips b{ width:46px; height:14px; border-radius:999px; border:1px solid #2E3D4C; } .w-chips b:first-child{ background:rgba(76,194,192,.3); border-color:var(--teal-l); } .w-cart{ width:26px; height:22px; border:2px solid var(--teal-l); border-radius:3px 3px 8px 8px; } .w-range{ width:100%; height:6px; border-radius:3px; background:linear-gradient(90deg,var(--teal-l) 55%,#2E3D4C 55%); } .w-sum{ width:90px; height:16px; border-radius:3px; background:#C9D6DF; opacity:.8; } .w-cal{ display:grid!important; grid-template-columns:repeat(7,1fr); gap:4px; width:100%; } .w-cal b{ height:14px; border-radius:3px; background:#1A2632; } .w-cal b:nth-child(5), .w-cal b:nth-child(11){ background:var(--teal-l); } .w-ava{ width:30px; height:30px; border-radius:50%; background:#2E3D4C; } .w-bars{ display:grid!important; gap:5px; flex:1; } .w-bars b{ height:6px; border-radius:3px; background:linear-gradient(90deg,var(--teal-l) 60%,#2E3D4C 60%); } .w-bars b:nth-child(2){ background:linear-gradient(90deg,var(--teal-l) 30%,#2E3D4C 30%); } .w-docs{ display:flex!important; gap:8px; } .w-docs b{ width:20px; height:26px; border:1px solid #3A4B5C; border-radius:2px 8px 2px 2px; } .w-acc{ display:grid!important; gap:5px; width:100%; } .w-acc b{ height:12px; border-radius:3px; border:1px solid #243241; } .w-bubble{ width:46%; height:16px; border-radius:10px 10px 10px 2px; background:#1A2632; } .w-bubble--r{ margin-left:auto; background:rgba(76,194,192,.35); border-radius:10px 10px 2px 10px; } .w-in{ width:100%; height:16px; border-radius:3px; border:1px solid #2E3D4C; } .wb--footer{ background:#0D1218; } .svcb-browser.is-phone .w-cards, .svcb-browser.is-phone .w-grid{ grid-template-columns:repeat(2,1fr); } .svcb-browser.is-phone .w-links{ display:none!important; } .svcb-browser.is-phone .wb--hero{ grid-template-columns:1fr; } .svcb-browser.is-phone .wb--hero .w-pic{ grid-column:1; grid-row:auto; height:60px; width:100%; } .svcb-res{ margin-top:18px; padding:20px; border:1px solid var(--line); border-left:3px solid var(--teal-l); background:var(--soft); } .svcb-res__t span{ display:block; font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--teal-l); } .svcb-res__t b{ display:block; font:800 26px/1.15 var(--f-head); color:var(--ink); margin:4px 0 10px; } .svcb-res p{ margin:0 0 14px; color:var(--text); } .svcb-res__a{ display:flex; flex-wrap:wrap; gap:10px; } @media (max-width:980px){ .svcb{ grid-template-columns:1fr; } .svcb-view{ position:static; } } /* Цены карточками */ .svpc{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px 14px; padding-top:12px; } @media (max-width:980px){ .svpc{ grid-template-columns:repeat(2,minmax(0,1fr)); } } @media (max-width:620px){ .svpc{ grid-template-columns:1fr; } } .svpc__i{ position:relative; border:1px solid var(--line); background:var(--soft); padding:24px 20px 20px; display:flex; flex-direction:column; border-radius:4px; transition:border-color .25s, transform .25s; } .svpc__i:hover{ border-color:rgba(76,194,192,.6); transform:translateY(-3px); } .svpc__i.is-hot{ border-color:var(--teal-l); box-shadow:0 20px 50px -30px rgba(76,194,192,.7); } .svpc__tag{ position:absolute; top:-11px; left:18px; background:var(--teal-l); color:#0F1214; font-size:11px; padding:4px 10px; border-radius:999px; letter-spacing:.04em; } .svpc__i h3{ margin:0 0 10px; font:700 19px/1.25 var(--f-head); color:var(--ink); } .svpc__p{ margin:0; font:800 28px/1.1 var(--f-head); color:var(--teal-l); } .svpc__t{ margin:6px 0 16px; font-size:12px; color:var(--mute); text-transform:uppercase; letter-spacing:.05em; } .svpc__i ul{ margin:0 0 18px; padding:0; list-style:none; display:grid; gap:7px; flex:1; align-content:start; } .svpc__i li{ position:relative; padding-left:20px; font-size:14.5px; color:var(--text); margin:0; } .svpc__i li::before{ content:""; position:absolute; left:0; top:.6em; width:8px; height:8px; background:var(--teal-l); } .svpc__a{ display:grid; gap:8px; } .svpc__more, .svpc__tz{ font-size:14px; text-decoration:none!important; } .svpc__more{ color:var(--ink)!important; font-weight:600; } .svpc__tz{ color:var(--teal-l)!important; } .svpf{ margin-top:28px; } .svpf__list{ display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:8px; } .svpf__i{ border:1px solid var(--line); border-radius:4px; padding:12px 14px; background:var(--paper); } .svpf__i summary{ cursor:pointer; font-weight:600; color:var(--ink); list-style:none; } .svpf__i summary::-webkit-details-marker{ display:none; } .svpf__i summary::after{ content:"+"; float:right; color:var(--teal-l); } .svpf__i[open] summary::after{ content:"\2013"; } .svpf__i p{ margin:8px 0 0; font-size:14.5px; color:var(--text); } /* Этапы вкладками */ .svst__tabs{ position:relative; display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:10px; } .svst__line{ display:none; } .svst.is-js .svst__line{ display:block; position:absolute; left:0; right:0; bottom:-14px; height:3px; background:var(--line); border-radius:3px; } .svst__line i{ display:block; height:100%; width:var(--prog,20%); background:var(--teal-l); box-shadow:0 0 12px var(--teal-l); border-radius:3px; transition:width .4s ease; } .svst__tab{ display:flex; flex-direction:column; align-items:flex-start; gap:6px; padding:12px; border:1px solid var(--line); border-radius:6px; background:var(--soft); color:var(--text); cursor:pointer; text-align:left; font:inherit; transition:border-color .2s, background-color .2s; } .svst__tab img{ width:64px; height:64px; border-radius:6px; } .svst__tab .mono{ font-size:11px; color:var(--mute); } .svst__tab b{ color:var(--ink); font:700 16px/1.2 var(--f-head); } .svst__tab.is-on{ border-color:var(--teal-l); background:rgba(76,194,192,.08); } .svst__tab:focus-visible{ outline:2px solid var(--teal-l); outline-offset:2px; } .svst:not(.is-js) .svst__tabs{ display:none; } .svst__panels{ margin-top:32px; } .svst:not(.is-js) .svst__p{ margin-bottom:24px; } .svst__p{ border:1px solid var(--line); border-radius:6px; padding:24px; background:var(--soft); animation:svqIn .3s ease both; } .svst__p h3{ margin:0 0 16px; font:800 24px/1.2 var(--f-head); color:var(--ink); } .svst__rows{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; } .svst__rows .mono{ font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--teal-l); } .svst__rows p{ margin:6px 0 0; color:var(--text); font-size:15px; } .svst__links{ display:flex; flex-wrap:wrap; gap:10px; margin-top:20px; } @media (max-width:760px){ .svst__rows{ grid-template-columns:1fr; } .svst__tab img{ width:44px; height:44px; } .svst__tabs{ grid-template-columns:repeat(2,minmax(0,1fr)); } } /* Чек-лист */ .svck{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,320px); gap:28px; align-items:start; } .svck__list{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; } .svck__i{ display:flex; gap:12px; padding:14px; border:1px solid var(--line); border-radius:4px; cursor:pointer; transition:border-color .2s, background-color .2s; } .svck__i input{ -webkit-appearance:none; appearance:none; flex:none; width:20px; height:20px; border:2px solid var(--mute); border-radius:4px; margin:2px 0 0; display:grid; place-content:center; cursor:pointer; } .svck__i input:checked{ background:var(--teal-l); border-color:var(--teal-l); } .svck__i input:checked::after{ content:"\2713"; color:#0F1214; font-weight:700; font-size:13px; line-height:1; } .svck__i:has(input:checked){ border-color:rgba(76,194,192,.5); background:rgba(76,194,192,.06); } .svck__i b{ display:block; color:var(--ink); font-weight:600; font-size:15px; } .svck__i small{ display:block; color:var(--mute); font-size:13.5px; margin-top:3px; } .svck__side{ position:sticky; top:90px; border:1px solid var(--line); border-radius:6px; padding:22px; background:var(--soft); } .svck__n{ display:block; font:800 34px/1 var(--f-head)!important; color:var(--ink); } .svck__bar{ display:block; height:6px; border-radius:6px; background:var(--line); margin:14px 0 16px; overflow:hidden; } .svck__bar i{ display:block; height:100%; width:0; background:var(--teal-l); transition:width .3s ease, background-color .3s; } .svck[data-level="low"] .svck__bar i{ background:#E0271F; } .svck[data-level="mid"] .svck__bar i{ background:#F0B454; } .svck__msg{ margin:0; color:var(--text); font-size:15px; } .svck__msg b{ display:block; color:var(--ink); font-size:17px; margin-bottom:4px; } @media (max-width:900px){ .svck{ grid-template-columns:1fr; } .svck__list{ grid-template-columns:1fr; } .svck__side{ position:static; } } /* Инструменты и статьи */ .svtl{ display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:14px; } .svtl__i{ position:relative; display:flex; flex-direction:column; gap:8px; padding:22px; border:1px solid var(--line); border-radius:6px; background:linear-gradient(160deg,rgba(76,194,192,.08),transparent 60%); text-decoration:none!important; transition:border-color .25s, transform .25s; } .svtl__i:hover{ border-color:var(--teal-l); transform:translateY(-3px); } .svtl__tag{ align-self:flex-start; font-size:11px; padding:3px 8px; border-radius:999px; border:1px solid var(--teal-l); color:var(--teal-l); } .svtl__i b{ color:var(--ink); font:700 18px/1.25 var(--f-head); } .svtl__i span:not(.svtl__tag){ color:var(--text); font-size:14.5px; flex:1; } .svtl__i em{ font-style:normal; color:var(--teal-l); font-weight:600; font-size:14px; } .svps{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:14px; } .svps__i{ display:flex; flex-direction:column; gap:6px; border:1px solid var(--line); border-radius:6px; overflow:hidden; text-decoration:none!important; background:var(--soft); transition:border-color .25s; padding-bottom:16px; } .svps__i:hover{ border-color:var(--teal-l); } .svps__i img{ width:100%; height:auto; aspect-ratio:16/9; object-fit:cover; display:block; margin-bottom:6px; } .svps__i .mono, .svps__i b, .svps__i p{ padding:0 16px; } .svps__i .mono{ font-size:11px; color:var(--mute); } .svps__i b{ color:var(--ink); font:700 16px/1.3 var(--f-head); } .svps__i p{ margin:0; font-size:14px; color:var(--mute); } /* Сравнение двух вариантов (svc-build2: compare) */ .svcmp-wrap{ overflow-x:auto; } .svcmp{ width:100%; border-collapse:separate; border-spacing:0; min-width:560px; font-size:15.5px; } .svcmp th, .svcmp td{ padding:14px 18px; border-bottom:1px solid var(--line); text-align:left; vertical-align:top; } .svcmp thead th{ font:700 18px/1.2 var(--f-head); color:var(--ink); border-bottom:2px solid var(--line); } .svcmp thead th.is-hl{ color:#0F1214; background:var(--teal-l); border-radius:6px 6px 0 0; border-bottom-color:var(--teal-l); } .svcmp tbody th{ font-weight:600; color:var(--ink); width:30%; } .svcmp td:last-child{ background:rgba(76,194,192,.06); border-left:1px solid rgba(76,194,192,.35); border-right:1px solid rgba(76,194,192,.35); } .svcmp tbody tr:last-child td:last-child{ border-bottom:1px solid rgba(76,194,192,.35); border-radius:0 0 6px 6px; } .svcmp__v{ color:var(--text); position:relative; padding-left:42px!important; } .svcmp__v::before{ position:absolute; left:16px; top:14px; width:18px; height:18px; border-radius:50%; font-size:12px; line-height:18px; text-align:center; font-weight:700; } .svcmp__v.is-yes::before{ content:"\2713"; background:rgba(76,194,192,.18); color:var(--teal-l); } .svcmp__v.is-no::before{ content:"\2715"; background:rgba(224,39,31,.15); color:#FF6B63; } .svq__free{ display:flex; gap:8px; align-items:flex-start; margin:-6px 0 20px!important; padding:10px 14px; border:1px dashed rgba(76,194,192,.45); border-radius:4px; background:rgba(76,194,192,.06); font-size:14px; color:var(--text); max-width:none!important; } .svq__free::before{ content:"\2713"; flex:none; width:20px; height:20px; border-radius:50%; background:var(--teal-l); color:#0F1214; font-weight:700; font-size:12px; line-height:20px; text-align:center; } .svq__free b{ color:var(--ink); } .svc-note{ position:relative; margin:-8px 0 24px!important; padding:14px 16px 14px 46px; border:1px solid var(--line); border-left:3px solid var(--warm,#F0B454); border-radius:4px; background:rgba(240,180,84,.06); color:var(--text); font-size:15px; max-width:860px; } .svc-note::before{ content:"i"; position:absolute; left:16px; top:15px; width:20px; height:20px; border-radius:50%; background:var(--warm,#F0B454); color:#0F1214; font:700 13px/20px var(--f-head); text-align:center; } .svc-note b{ color:var(--ink); } /* ---------- Было / стало (страницы услуг, 09.10.2026) ---------- */ .svba{ --pos:50%; margin:0; } .svba__frame{ position:relative; overflow:hidden; border:1px solid var(--line); border-radius:6px; background:var(--paper); aspect-ratio:16/10; max-width:100%; user-select:none; } .svba__frame img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:top; display:block; } .svba__frame .svba__old{ clip-path:inset(0 calc(100% - var(--pos)) 0 0); } .svba__line{ position:absolute; top:0; bottom:0; left:var(--pos); width:2px; margin-left:-1px; background:var(--teal-l); box-shadow:0 0 18px rgba(76,194,192,.7); pointer-events:none; } .svba__line::after{ content:"⟷"; position:absolute; top:50%; left:50%; width:44px; height:44px; margin:-22px 0 0 -22px; border-radius:50%; background:var(--teal-l); color:#0A0E13; font:700 20px/44px var(--f-head); text-align:center; box-shadow:0 4px 18px rgba(0,0,0,.4); } .svba__lbl{ position:absolute; top:14px; padding:6px 10px; border-radius:3px; background:rgba(10,14,19,.82); color:#EEF2F5; font:600 12px/1.2 var(--f-mono,monospace); letter-spacing:.06em; text-transform:uppercase; pointer-events:none; } .svba__lbl--old{ left:14px; } .svba__lbl--new{ right:14px; color:var(--teal-l); } .svba__range{ position:absolute; inset:0; width:100%; height:100%; margin:0; opacity:0; cursor:ew-resize; -webkit-appearance:none; appearance:none; } .svba__range:focus-visible + .svba__line::after{ outline:3px solid #EEF2F5; outline-offset:2px; } .svba figcaption{ display:flex; flex-wrap:wrap; gap:8px 20px; align-items:baseline; margin-top:12px; color:var(--text); font-size:15px; } .svba figcaption b{ color:var(--ink); } .svba figcaption a{ color:var(--teal-l); } /* ---------- Галерея вариантов (логотипы/баннеры с ИИ) ---------- */ .svgal{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; } .svgal__i{ position:relative; display:block; margin:0; cursor:pointer; border:1px solid var(--line); border-radius:6px; overflow:hidden; background:var(--paper); transition:border-color .2s, transform .2s, box-shadow .2s; } .svgal__i input{ position:absolute; opacity:0; pointer-events:none; } .svgal__i img{ display:block; width:100%; height:auto; aspect-ratio:1; object-fit:cover; } .svgal--wide .svgal__i img{ aspect-ratio:16/9; } .svgal__i span{ display:block; padding:9px 12px; color:var(--text); font-size:14px; } .svgal__i:hover{ border-color:var(--teal-l); transform:translateY(-2px); } .svgal__i:has(input:focus-visible){ outline:3px solid var(--teal-l); outline-offset:2px; } .svgal__i:has(input:checked){ border-color:var(--teal-l); box-shadow:0 0 0 2px var(--teal-l), 0 10px 30px rgba(76,194,192,.25); } .svgal__i:has(input:checked) span{ color:var(--teal-l); } .svgal__i:has(input:checked) span::before{ content:"✓ "; font-weight:700; } .svgal:has(input:checked) .svgal__i:not(:has(input:checked)){ opacity:.55; } .svgal__note{ margin-top:14px; color:var(--text); font-size:15px; max-width:80ch; } .svgal:not(:has(input:checked)) + .svgal__note .svgal__after{ display:none; } .svgal:has(input:checked) + .svgal__note .svgal__before{ display:none; } @media (max-width:620px){ .svgal{ gap:8px; } .svgal--wide{ grid-template-columns:minmax(0,1fr); } .svgal__i span{ font-size:11px; padding:5px 6px; line-height:1.25; } } @media (max-width:620px){ .svba__frame{ aspect-ratio:4/3; } .svba__lbl{ top:8px; font-size:10px; } .svba__line::after{ width:36px; height:36px; margin:-18px 0 0 -18px; line-height:36px; } }