/* ===================== Локальные шрифты ===================== */ @font-face { font-family: 'Oswald'; src: url('/fonts/oswald-variable.woff2') format('woff2'); font-style: normal; font-weight: 200 700; font-display: swap; } @font-face { font-family: 'Raleway'; src: url('/fonts/raleway-variable.woff2') format('woff2'); font-style: normal; font-weight: 100 900; font-display: swap; } /* ==================== ОБЩАЯ ОБОЛОЧКА СТРАНИЦ БЛОГА ==================== */ /* ===================== Базовый сброс ===================== */ html, body, div, span, iframe, h1, h2, h3, p, blockquote, a, address, cite, img, s, strong, var, b, i, dl, ol, ul, li, table, caption, tbody, thead, tr, th, td, article, details, figure, figcaption, header, menu, nav, section, summary, time { box-sizing:border-box; margin:0; padding:0; border:0; font:inherit; font-size:100%; vertical-align:baseline; } html, body { width:100%; min-height:100%; } html { line-height:1.5; -ms-overflow-style:scrollbar; } body { margin:0; padding:0; overflow-x:hidden; overflow-y:auto; color:#fff; background:#000; font-family:"Oswald",sans-serif; font-size:15px; font-style:normal; font-weight:500; line-height:1.5; letter-spacing:.05em; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; -webkit-text-size-adjust:100%; text-size-adjust:100%; } article, details, figcaption, figure, header, menu, nav, section { display:block; } ol, ul { list-style:none; } blockquote { quotes:none; } blockquote::before, blockquote::after { content:none; } table { border-spacing:0; border-collapse:collapse; } img { max-width:100%; } a { color:#fff; text-decoration:none; outline:none; transition:color .3s ease, background-color .3s ease, border-color .3s ease, opacity .3s ease, transform .3s ease; } p { line-height:2; } strong, b { font-weight:700; } ::selection { color:#fff; background:#5f5f5f; } ::-moz-selection { color:#fff; background:#5f5f5f; } *:focus { outline:none; } *:focus-visible { outline:2px solid #BFD730; outline-offset:3px; } /* ===================== Логотип ===================== */ .logo { position:fixed; z-index:200; top:50px; left:50px; display:inline-block; line-height:0; cursor:pointer; opacity:1; transition:opacity 300ms cubic-bezier(.77,0,.175,1), transform 300ms cubic-bezier(.77,0,.175,1); } .logo-img::before, .logo-img-dark::before { content:""; display:block; width:150px; height:59px; background-repeat:no-repeat; background-position:left center; background-size:contain; } .logo-img::before { background-image:url("/img/logo-dark.png"); } .logo-img-dark::before { background-image:url("/img/logo-light.png"); } .logo-light .logo-img::before { background-image:url("/img/logo-light.png"); } .logo-dark .logo-img-dark::before { background-image:url("/img/logo-dark.png"); } @media (max-width:991.98px) { .logo { top:25px; left:25px; } .logo-img::before, .logo-img-dark::before { width:76px; height:30px; } } /* ===================== Кнопка меню ===================== */ .navigation-icon-wrapper { position:fixed; z-index:99998; top:42px; right:50px; width:35px; height:25px; cursor:pointer; } .navigation-icon { width:35px; height:35px; } .navigation-icon .line { display:block; width:35px; height:3px; margin:8px auto; background-color:#fff; transition:opacity .3s ease, transform .3s ease; } #navigation-icon.active .line:nth-child(1) { transform:translateY(11px); background-color:#fff; } #navigation-icon.active .line:nth-child(3) { transform:translateY(-11px); background-color:#fff; } #navigation-icon.navigation-icon-dark.active .line:nth-child(1), #navigation-icon.navigation-icon-dark.active .line:nth-child(3) { background-color:#111; } .navigation-icon .line.line-dark { background-color:#fff; } .navigation-icon .line.line-light { background-color:#111; } @media (max-width:992px) { .navigation-icon-wrapper { top:17px; right:25px; } .navigation-icon .line.line-dark, .navigation-icon .line.line-light { background-color:#111; } } /* ===================== Полноэкранное меню ===================== */ nav.navigation-menu { position:fixed; z-index:1001; top:0; left:0; width:100%; height:100%; box-sizing:border-box; visibility:hidden; overflow:hidden; background:#000; text-align:center; opacity:0; transform:scale(.75); transition:visibility 0s linear 1s, opacity 1s ease, transform 1s ease; } nav.navigation-menu.navigation-menu-light { background:#fff; } nav.navigation-menu.show { z-index:9999!important; visibility:visible; opacity:1; transform:scale(1); transition:visibility 0s linear 0s, opacity 1s ease, transform 1s ease; } nav.navigation-menu.navigation-menu-light.show { background:#fff; } nav.navigation-menu a { color:#fff; font-family:"Oswald",sans-serif; font-size:30px; font-style:normal; font-weight:400; line-height:1; letter-spacing:.05em; text-decoration:none; text-transform:uppercase; transition:color .3s ease; } nav.navigation-menu a:link, nav.navigation-menu a:visited, nav.navigation-menu a:active { color:#fff; } nav.navigation-menu.navigation-menu-light a:link, nav.navigation-menu.navigation-menu-light a:visited, nav.navigation-menu.navigation-menu-light a:active { color:#111; } nav.navigation-menu li { margin:0 0 7px; } nav.navigation-menu li:last-child { margin-bottom:0; } nav.navigation-menu li a.active { color:#777; } nav.navigation-menu.navigation-menu-light li a.active { color:#999; } .navigation-menu-img-wrapper { position:fixed; z-index:1; width:100%; height:100%; } .navigation-menu-txt { position:relative; left:10%; width:75%; height:auto; text-align:left; } .center-container-menu { position:relative; display:table; width:100%; height:100%; } .center-block-menu { display:table-cell; vertical-align:middle; } @media (max-width:880px) { nav.navigation-menu a { font-size:17px; } } @media (max-width:640px) { nav.navigation-menu a { font-size:25px; } } /* ===================== Эффект меню ===================== */ .brackets a::before, .brackets a::after { display:inline-block; opacity:0; transition:opacity .2s ease, transform .3s ease; } .brackets a::before { content:"\2014"; margin-right:10px; transform:translateX(20px); } .brackets a::after { content:""; margin-left:10px; transform:translateX(-20px); } .brackets a:hover::before, .brackets a:hover::after, .brackets a:focus-visible::before, .brackets a:focus-visible::after { opacity:1; transform:translateX(0); } .brackets ul, .brackets li { list-style:none; } .brackets a, .brackets a:hover, .brackets a:visited { text-decoration:none; } /* ===================== Прелоадер ===================== */ .preloader-bg { position:fixed; z-index:999999; width:100%; height:100%; overflow:hidden; background:#fff; } #preloader { position:fixed; z-index:999999; display:table; width:100%; height:100%; table-layout:fixed; overflow:hidden; background:#fff; } #preloader-status { display:table-cell; vertical-align:middle; } .preloader-position { position:relative; box-sizing:border-box; margin:0 auto; text-align:center; } .loader { position:relative; left:50%; width:45px; height:45px; margin-top:2px; margin-left:-22px; border:3px solid rgba(17,17,17,.15); border-radius:50%; animation:blog-loader-rotate 1s infinite linear; } .loader span { position:absolute; top:-3px; left:-3px; width:45px; height:45px; border:3px solid transparent; border-top-color:rgba(17,17,17,.75); border-radius:50%; } @keyframes blog-loader-rotate { from { transform:rotate(0deg); } to { transform:rotate(360deg); } } /* ===================== Кнопки статьи ===================== */ .c-btn { position:relative; display:inline-block; margin:20px 0 0; padding:15px 25px; overflow:hidden; border:0; border-radius:5px; color:#111; background:#BFD730; font-family:"Oswald",sans-serif; font-size:10px; font-weight:800; line-height:1.5; letter-spacing:.25em; text-align:center; text-decoration:none; text-transform:uppercase; cursor:pointer; transition:color .4s cubic-bezier(.4,0,.2,1); } .c-btn.inverse { color:#111; background:#BFD730; } .c-btn::before { content:""; position:absolute; inset:0; background:#000; transform:scaleX(0); transform-origin:right center; transition:transform .4s cubic-bezier(.4,0,.2,1); } .c-btn:hover::before, a:hover .c-btn::before { transform:scaleX(1); transform-origin:left center; } .c-btn span { position:relative; z-index:2; display:inline-block; } .c-btn:hover, .c-btn.inverse:hover, a:hover .c-btn { color:#BFD730; text-decoration:none; } /* ===================== Фиксированная кнопка записи ===================== */ .c-btz { position:relative; display:inline-block; padding:15px 25px; border-radius:5px; color:#111; background:#BFD730; font-family:"Oswald",sans-serif; font-size:.7rem; font-weight:700; line-height:1.5; letter-spacing:.25em; text-align:center; text-decoration:none; text-transform:uppercase; cursor:pointer; transition:color .3s ease, background-color .3s ease, transform .3s ease; } .c-btz:hover { color:#111; background:#d2eb42; text-decoration:none; transform:translateY(-2px); } .c-btz-works { position:fixed; z-index:1002; right:85px; bottom:48px; display:inline-block; text-align:right; } @media (max-width:991.98px) { .c-btz-works { right:clamp(28px,7.4vw,38px); bottom:4px; } } /* ===================== Кнопка сертификата ===================== */ .cad-fixed-call { position:fixed; z-index:99993; right:300px; bottom:54px; display:flex; align-items:center; justify-content:center; width:34px; height:34px; color:#fff; text-decoration:none; } .cad-fixed-call:hover { color:#fff; text-decoration:none; } .cad-fixed-call .fa-gift-card { --fa-primary-color:#ec008c; --fa-secondary-color:#ec008c; } .cad-fixed-call .fa-2xl { font-size:3em; } @media (max-width:991.98px) { .cad-fixed-call { top:20px; right:85px; bottom:auto; width:35px; height:25px; } .cad-fixed-call .fa-2xl { font-size:2.5em; } } /* ===================== Подчёркнутая ссылка ===================== */ .link-underline { position:relative; display:inline-block; color:inherit; text-decoration:none; } .link-underline::after { content:""; position:absolute; bottom:0; left:0; display:block; width:100%; height:1px; padding:0; background-color:currentColor; transform:scaleX(1); transform-origin:left center; transition:transform .4s cubic-bezier(.4,0,.2,1); } .link-underline:hover::after { transform:scaleX(0); transform-origin:left center; } /* ===================== Доступность ===================== */ .sr-only, .visually-hidden { position:absolute!important; width:1px!important; height:1px!important; margin:-1px!important; padding:0!important; overflow:hidden!important; border:0!important; white-space:nowrap!important; clip:rect(0,0,0,0)!important; clip-path:inset(50%)!important; } @media (prefers-reduced-motion:reduce) { .logo, .navigation-icon .line, nav.navigation-menu, .brackets a::before, .brackets a::after, .c-btn, .c-btn::before, .c-btz, .link-underline::after { animation-duration:.001ms!important; animation-iteration-count:1!important; transition-duration:.001ms!important; } } /* ==================== АНОНСЫ: блоки и продажи ==================== */ /* ===================== Skip-link (a11y) ===================== */ .skip-link{ position:absolute; left:-9999px; top:0; z-index:200; background:#BFD730; color:#0c0c0c; padding:10px 16px; font-family:'Oswald',sans-serif; text-transform:uppercase; letter-spacing:.08em; font-size:13px; border-radius:0 0 8px 0; } .skip-link:focus{ left:0; } /* ===================== Контейнер страницы ===================== */ .blog-page{ position:relative; z-index:1; max-width:1240px; margin:0 auto; padding:130px 24px 120px; color:#fff; font-family:'Raleway', sans-serif; } @media (max-width:991.98px){ .blog-page{ padding:80px 18px 90px; } } /* ===================== Хлебные крошки ===================== */ .breadcrumbs-row{ display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; margin-bottom:34px; } .breadcrumbs{ font-family:'Oswald',sans-serif; font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:#888; } .breadcrumbs a{ color:#888; text-decoration:none; transition:color .3s ease; } .breadcrumbs a:hover{ color:#BFD730; } .breadcrumbs a:focus-visible{ outline:2px solid #BFD730; outline-offset:3px; border-radius:3px; } .breadcrumbs span.sep{ margin:0 8px; color:#444; } .breadcrumbs span.current{ color:#fff; } /* ===================== Хедер блога ===================== */ .blog-head{ max-width:none; margin:0 0 60px; position:relative; z-index:0; } .blog-head::before{ content:""; position:absolute; z-index:-1; pointer-events:none; top:0; left:50%; transform:translateX(-50%); width:100vw; height:calc(100% + 150px); background:linear-gradient(180deg, rgba(0,0,0,.45) 0%, rgba(0,0,0,.5) 40%, rgba(0,0,0,.82) 78%, #000 100%), url('/blog/img/photospot_003.webp') center 16% / cover no-repeat; } .blog-head .eyebrow{ font-family:'Oswald',sans-serif; font-size:12px; letter-spacing:.22em; text-transform:uppercase; color:#BFD730; margin-bottom:14px; } .blog-head h1{ font-family:'Oswald',sans-serif; font-weight:700; font-size:clamp(34px, 6.4vw, 88px); line-height:1.02; letter-spacing:.015em; text-transform:uppercase; margin:0 0 24px; max-width:none; } .blog-status{ display:inline-flex; max-width:100%; } .blog-status .work-marker{ position:relative; display:inline-block; top:auto; right:auto; padding:7px 16px; font-size:13px; isolation:isolate; } .blog-intro{ display:flex; flex-wrap:wrap; align-items:center; gap:16px clamp(20px,3vw,56px); width:100%; margin:6px 0 30px; padding-top:24px; border-top:1px solid #1c1c1c; } .blog-intro .tez-list{ display:flex; flex-wrap:wrap; align-items:center; gap:16px clamp(20px,3vw,56px); flex:1 1 auto; } .blog-intro .tez{ font-family:'Oswald',sans-serif; font-size:clamp(13px,1.15vw,16px); letter-spacing:.05em; text-transform:uppercase; color:#eaeaea; display:inline-flex; align-items:center; gap:11px; white-space:nowrap; } .blog-intro .tez i{ color:#BFD730; font-size:1.1em; } .head-lead{ display:flex; align-items:center; justify-content:space-between; gap:32px 48px; flex-wrap:wrap; } .head-lead-text{ flex:1 1 560px; margin:0; max-width:none; font-family:'Raleway',sans-serif; font-size:clamp(18px,1.7vw,23px); line-height:1.55; color:#c9c9c9; } .good-place{ flex:0 0 auto; display:block; line-height:0; transition:transform .2s ease; } @media (hover:hover){ .good-place:hover{ transform:translateY(-2px); } } .good-place img{ display:block; height:132px; width:auto; } .good-place--mobile{ display:none; } @media (min-width:767.98px){ .blog-intro .tez-list{ justify-content:space-between; } } @media (max-width:767.98px){ .blog-head{ margin-bottom:44px; } .blog-head::before{ height:calc(100% + 110px); background:linear-gradient(180deg, rgba(0,0,0,.4) 0%, rgba(0,0,0,.55) 45%, rgba(0,0,0,.85) 80%, #000 100%), url('/blog/img/photospot_003.webp') center 14% / cover no-repeat; } .blog-intro{ flex-direction:row; flex-wrap:nowrap; align-items:center; justify-content:space-between; gap:14px; } .blog-intro .tez-list{ flex-direction:column; align-items:flex-start; gap:14px; flex:1 1 auto; min-width:0; } .blog-intro .tez{ width:auto; white-space:nowrap; } .good-place--mobile{ display:block; flex:0 0 auto; margin-left:auto; } .good-place--mobile img{ height:82px; width:auto; display:block; } .head-lead{ gap:22px; } .head-lead-text{ flex:1 1 100%; } .good-place--desktop{ display:none; } } /* ===================== Блок «определение» (под H1) ===================== */ .ai-def{ position:relative; overflow:hidden; display:flex; align-items:stretch; min-height:300px; margin:8px 0 44px; background:#0a0a0a; border:1px solid #1a1a1a; border-left:3px solid #BFD730; border-radius:14px; } .ai-def-bg{ position:absolute; top:0; right:0; bottom:0; width:72%; height:100%; object-fit:cover; object-position:center 18%; display:block; pointer-events:none; z-index:0; } .ai-def::before{ content:""; position:absolute; inset:0; z-index:1; pointer-events:none; background:linear-gradient(90deg, #0a0a0a 0%, #0a0a0a 28%, rgba(10,10,10,.72) 44%, rgba(10,10,10,0) 64%), linear-gradient(180deg, rgba(0,0,0,0) 42%, rgba(0,0,0,.5) 74%, #000 100%); } .ai-def-text{ position:relative; z-index:2; min-width:0; display:flex; flex-direction:column; justify-content:center; max-width:50%; padding:34px 28px; } .ai-def h2{ font-family:'Oswald',sans-serif; font-weight:700; font-size:clamp(18px,2vw,24px); letter-spacing:.02em; text-transform:uppercase; color:#fff; margin:0 0 12px; overflow-wrap:break-word; } .ai-def p{ font-family:'Raleway',sans-serif; font-size:15px; line-height:1.7; color:#e6e6e6; margin:0; max-width:52ch; overflow-wrap:break-word; } .ai-def strong{ color:#fff; } @media (max-width:767.98px){ .ai-def{ min-height:460px; } .ai-def-bg{ width:100%; } .ai-def-text{ max-width:100%; padding:26px 20px 30px; } .ai-def::before{ background:linear-gradient(180deg, rgba(0,0,0,.2) 0%, rgba(0,0,0,.62) 55%, #000 100%); } } /* ===================== Твоя свобода (философия) ===================== */ .freedom { position: relative; overflow: hidden; margin: 44px 0; padding: 48px 44px; border: 1px solid #1c1c1c; border-radius: 18px; background: radial-gradient(130% 120% at 0% 0%, #14140f 0%, #0a0a0a 55%, #070707 100%); } .freedom::before { content: ""; position: absolute; top: 0; left: 0; width: 4px; height: 100%; background: #BFD730; } .freedom-eyebrow { display: inline-flex; align-items: center; gap: 8px; font-family: 'Oswald', sans-serif; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; font-size: 12px; color: #BFD730; margin-bottom: 16px; } .freedom h2 { font-family: 'Oswald', sans-serif; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; font-size: clamp(28px, 4vw, 44px); line-height: 1.05; color: #fff; margin: 0 0 20px; } .freedom p { font-family: 'Raleway', sans-serif; text-transform: uppercase; letter-spacing: .02em; font-size: clamp(15px, 1.6vw, 18px); line-height: 1.7; color: #d8d8d8; margin: 0 0 16px; max-width: 780px; } .freedom p:last-child { margin-bottom: 0; } .freedom .fr-accent { color: #BFD730; font-weight: 600; } @media (max-width: 767.98px) { .freedom { padding: 32px 22px; } } /* ===================== Как это работает ===================== */ .howto{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin:0 0 54px; } @media (max-width:767.98px){ .howto{ grid-template-columns:1fr; } } .howto .step{ min-width:0; border:1px solid #1c1c1c; border-radius:12px; background:#0b0b0b; padding:24px 22px; } .howto .num{ font-family:'Oswald',sans-serif; font-weight:700; font-size:13px; line-height:1; color:#111; background:#BFD730; width:30px; height:30px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; margin-bottom:14px; } .howto h3{ font-family:'Oswald',sans-serif; font-weight:700; font-size:17px; letter-spacing:.05em; text-transform:uppercase; color:#fff; margin:0 0 8px; overflow-wrap:break-word; } .howto p{ font-size:14.5px; line-height:1.6; color:#aeaeae; margin:0; overflow-wrap:break-word; } /* ===================== НОВЫЕ / ПОПУЛЯРНЫЕ ===================== */ .bl-tabs{ display:none; } .blog-lists{ margin:72px 0 0; } .blog-lists .bl-cols{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(36px,6vw,84px); } .bl-col{ min-width:0; } .bl-title{ font-family:'Oswald',sans-serif; font-weight:700; font-size:clamp(22px,2.4vw,30px); letter-spacing:.04em; text-transform:uppercase; color:#fff; margin:0 0 4px; } .bl-list{ list-style:none; margin:18px 0 0; padding:0; border-top:1px solid #181818; } .bl-item a{ display:flex; align-items:center; gap:clamp(16px,2vw,26px); padding:16px 2px; border-bottom:1px solid #181818; text-decoration:none; transition:padding-left .25s ease; } .bl-item a:hover{ padding-left:8px; } .bl-item a:focus-visible{ outline:2px solid #BFD730; outline-offset:2px; border-radius:6px; } .bl-rank{ flex:0 0 auto; width:clamp(42px,4vw,58px); font-family:'Oswald',sans-serif; font-weight:700; font-size:clamp(30px,3.4vw,46px); line-height:.9; } .bl-col--new .bl-rank{ color:transparent; -webkit-text-stroke:1.5px #3a3a3a; text-stroke:1.5px #3a3a3a; transition:-webkit-text-stroke .25s ease; } .bl-col--new .bl-item a:hover .bl-rank{ -webkit-text-stroke-color:#BFD730; } .bl-col--pop .bl-rank{ color:#BFD730; } .bl-body{ min-width:0; } .bl-cat{ display:block; font-family:'Oswald',sans-serif; font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:#BFD730; margin-bottom:5px; } .bl-name{ display:block; margin:0; font-weight:400; font-family:'Oswald',sans-serif; font-size:clamp(15px,1.3vw,17px); line-height:1.18; letter-spacing:.01em; text-transform:uppercase; color:#fff; overflow-wrap:break-word; transition:color .2s ease; } .bl-item a:hover .bl-name{ color:#BFD730; } .bl-meta{ display:block; font-family:'Oswald',sans-serif; font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:#777; margin-top:6px; overflow-wrap:break-word; } .bl-meta i{ font-size:10px; opacity:.85; margin:0 1px; } .bl-thumb{ flex:0 0 auto; width:58px; height:58px; border-radius:10px; object-fit:cover; display:block; background:#1a1a1a; margin-left:auto; filter:grayscale(1); transition:transform .25s ease, filter .3s ease; } .bl-item a:hover .bl-thumb{ transform:scale(1.05); filter:grayscale(0); } @media (max-width:767.98px){ .blog-lists{ margin-top:52px; } .bl-tabs{ display:flex; gap:8px; margin-bottom:20px; border-bottom:1px solid #181818; } .bl-tab{ flex:1; text-align:center; background:none; border:none; padding:12px 8px; font-family:'Oswald',sans-serif; font-weight:700; font-size:15px; letter-spacing:.04em; text-transform:uppercase; color:#666; cursor:pointer; border-bottom:2px solid transparent; transition:color .2s ease, border-color .2s ease; } .bl-tab.is-active{ color:#fff; border-bottom-color:#BFD730; } .bl-tab:focus-visible{ outline:2px solid #BFD730; outline-offset:2px; } .blog-lists .bl-cols{ display:block; } .bl-col{ display:none; } .bl-col.is-active{ display:block; } .bl-col .bl-title{ display:none; } } /* ===================== Кому подойдёт ===================== */ .scenarios{ margin:64px 0 72px; } .sc-head{ margin-bottom:30px; } .sc-eyebrow{ font-family:'Oswald',sans-serif; font-size:12px; letter-spacing:.22em; text-transform:uppercase; color:#BFD730; margin-bottom:10px; } .sc-title{ font-family:'Oswald',sans-serif; font-weight:700; font-size:clamp(22px,3vw,34px); text-transform:uppercase; letter-spacing:.01em; color:#fff; margin:0 0 8px; } .sc-sub{ font-family:'Raleway',sans-serif; font-size:15px; line-height:1.6; color:#9a9a9a; margin:0; max-width:64ch; } .sc-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; } .sc-card{ display:flex; flex-direction:column; gap:12px; min-width:0; min-height:240px; padding:24px; border:1px solid #1a1a1a; border-radius:16px; text-decoration:none; position:relative; overflow:hidden; background:#0e0e0e; transition:border-color .2s ease, transform .2s ease; } .sc-img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; z-index:0; filter:grayscale(1); transition:filter .35s ease, transform .35s ease; } .sc-card::after{ content:""; position:absolute; inset:0; z-index:1; background:linear-gradient(180deg, rgba(0,0,0,.35) 0%, rgba(0,0,0,.55) 55%, rgba(0,0,0,.88) 100%); pointer-events:none; } .sc-card:hover{ border-color:#BFD730; transform:translateY(-3px); } .sc-card:hover .sc-img{ filter:grayscale(0); transform:scale(1.05); } .sc-ico{ position:relative; z-index:2; width:46px; height:46px; display:inline-flex; align-items:center; justify-content:center; line-height:1; border-radius:12px; background:rgba(191,215,48,.9); color:#0c0c0c; font-size:20px; } .sc-name{ position:relative; z-index:2; font-family:'Oswald',sans-serif; font-weight:700; font-size:17px; text-transform:uppercase; letter-spacing:.01em; color:#fff; overflow-wrap:break-word; } .sc-desc{ position:relative; z-index:2; font-family:'Raleway',sans-serif; font-size:13.5px; line-height:1.5; color:#d3d3d3; overflow-wrap:break-word; } .sc-go{ position:relative; z-index:2; margin-top:auto; font-family:'Oswald',sans-serif; font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:#BFD730; opacity:0; transform:translateX(-4px); transition:opacity .2s ease, transform .2s ease; } .sc-card:hover .sc-go{ opacity:1; transform:none; } @media (max-width:960px){ .sc-grid{ grid-template-columns:repeat(3,1fr); } } @media (max-width:767.98px){ .sc-grid{ display:flex; gap:14px; overflow-x:auto; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; scrollbar-width:thin; scroll-padding-left:16px; padding:4px 16px 14px 2px; margin-right:-16px; } .sc-grid::-webkit-scrollbar{ height:5px; } .sc-grid::-webkit-scrollbar-thumb{ background:#2a2a2a; border-radius:3px; } .sc-card{ flex:0 0 82%; min-height:0; display:block; padding:0; scroll-snap-align:start; } .sc-card:hover{ transform:none; } .sc-img{ position:relative; height:180px; filter:grayscale(1); transform:none; } .sc-card:hover .sc-img{ transform:none; filter:grayscale(1); } .sc-card.in-view .sc-img{ filter:grayscale(0); } .sc-card::after{ inset:0 0 auto 0; height:180px; background:linear-gradient(180deg, rgba(0,0,0,.05), rgba(0,0,0,.25)); } .sc-ico{ position:absolute; top:12px; left:12px; z-index:3; width:40px; height:40px; font-size:17px; } .sc-name{ display:block; padding:16px 18px 0; } .sc-desc{ display:block; padding:6px 18px 0; } .sc-go{ display:block; padding:10px 18px 18px; opacity:1; transform:none; margin-top:0; } } /* ===================== Студия в движении ===================== */ .blog-video{ margin:74px 0 0; } .bv-head{ margin:0 0 22px; } .bv-eyebrow{ font-family:'Oswald',sans-serif; font-size:12px; letter-spacing:.22em; text-transform:uppercase; color:#BFD730; margin-bottom:10px; } .bv-title{ font-family:'Oswald',sans-serif; font-weight:700; font-size:clamp(22px,2.4vw,30px); letter-spacing:.04em; text-transform:uppercase; color:#fff; margin:0 0 8px; } .bv-sub{ font-family:'Raleway',sans-serif; font-size:15px; line-height:1.6; color:#9a9a9a; margin:0; max-width:64ch; } .bv-strip{ display:flex; gap:16px; overflow-x:auto; scroll-snap-type:x mandatory; scroll-padding-left:16px; padding:4px 2px 16px; -webkit-overflow-scrolling:touch; scrollbar-width:thin; } .bv-strip::-webkit-scrollbar{ height:6px; } .bv-strip::-webkit-scrollbar-thumb{ background:#222; border-radius:3px; } .bv-strip::-webkit-scrollbar-track{ background:transparent; } .bv-card{ position:relative; flex:0 0 auto; width:clamp(180px,21vw,230px); aspect-ratio:9/16; border-radius:16px; overflow:hidden; background:#101010; scroll-snap-align:start; cursor:pointer; border:1px solid #1a1a1a; } .bv-card:focus-visible{ outline:2px solid #BFD730; outline-offset:3px; } .bv-card video{ width:100%; height:100%; object-fit:cover; display:block; } .bv-card::after{ content:""; position:absolute; inset:0; z-index:1; background:linear-gradient(to top, rgba(0,0,0,.4), transparent 38%); pointer-events:none; } .bv-play{ position:absolute; inset:0; z-index:2; display:flex; align-items:center; justify-content:center; color:#fff; font-size:34px; text-shadow:0 4px 16px rgba(0,0,0,.5); opacity:.92; transition:opacity .25s ease; pointer-events:none; } .bv-card.playing .bv-play{ opacity:0; } .bv-sound{ position:absolute; right:10px; bottom:10px; z-index:2; width:34px; height:34px; border-radius:50%; background:rgba(0,0,0,.55); color:#fff; display:flex; align-items:center; justify-content:center; font-size:12px; pointer-events:none; transition:background .2s ease; } .bv-card.sound .bv-sound{ background:#BFD730; color:#0c0c0c; } @media (max-width:767.98px){ .bv-strip{ padding:4px 16px 16px 2px; margin-right:-16px; } .bv-card{ width:62vw; } } /* ===================== Обзор студии (видео) ===================== */ .how-video{ margin:64px 0 72px; } .hv-head{ margin-bottom:22px; } .hv-eyebrow{ font-family:'Oswald',sans-serif; font-size:12px; letter-spacing:.22em; text-transform:uppercase; color:#BFD730; margin-bottom:10px; } .hv-title{ font-family:'Oswald',sans-serif; font-weight:700; font-size:clamp(22px,3vw,34px); text-transform:uppercase; letter-spacing:.01em; color:#fff; margin:0 0 8px; } .hv-sub{ font-family:'Raleway',sans-serif; font-size:15px; line-height:1.6; color:#9a9a9a; margin:0; max-width:64ch; } .hv-frame{ position:relative; margin-top:24px; border-radius:20px; overflow:hidden; border:1px solid #1a1a1a; aspect-ratio:16/9; background:#0a0a0a; cursor:pointer; } .hv-frame:focus-visible{ outline:2px solid #BFD730; outline-offset:3px; } .hv-video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; } .hv-frame::after{ content:""; position:absolute; inset:0; pointer-events:none; background:radial-gradient(120% 120% at 50% 40%, rgba(0,0,0,0) 55%, rgba(0,0,0,.55) 100%), linear-gradient(180deg, rgba(0,0,0,.15) 0%, rgba(0,0,0,0) 30%, rgba(0,0,0,.55) 100%); transition:opacity .3s ease; } .hv-frame.playing::after{ opacity:0; } .hv-play{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); z-index:2; width:74px; height:74px; display:flex; align-items:center; justify-content:center; border-radius:50%; background:rgba(191,215,48,.92); color:#000; font-size:24px; padding-left:4px; box-shadow:0 8px 30px rgba(0,0,0,.5); transition:transform .2s ease, opacity .3s ease; } @media (hover:hover){ .hv-frame:hover .hv-play{ transform:translate(-50%,-50%) scale(1.06); } } .hv-frame.playing .hv-play{ opacity:0; pointer-events:none; } @media (max-width:767.98px){ .hv-frame{ border-radius:14px; } .hv-play{ width:60px; height:60px; font-size:20px; } } @media (prefers-reduced-motion:reduce){ .hv-frame::after, .hv-play{ transition:none; } .hv-frame:hover .hv-play{ transform:translate(-50%,-50%); } } /* ===================== Преимущества (строки в 2 колонки) ===================== */ .advantages{ margin:64px 0 72px; } .adv-head{ margin-bottom:28px; } .adv-eyebrow{ font-family:'Oswald',sans-serif; font-size:12px; letter-spacing:.22em; text-transform:uppercase; color:#BFD730; margin-bottom:10px; } .adv-title{ font-family:'Oswald',sans-serif; font-weight:700; font-size:clamp(22px,3vw,34px); text-transform:uppercase; letter-spacing:.01em; color:#fff; margin:0; } .adv-sub{ font-family:'Raleway',sans-serif; font-size:15px; line-height:1.6; color:#9a9a9a; margin:8px 0 0; max-width:64ch; } .adv-grid{ display:grid; grid-template-columns:1fr 1fr; gap:24px 44px; } .adv-item{ display:flex; gap:18px; align-items:flex-start; min-width:0; } .adv-ico{ flex:0 0 auto; width:52px; height:52px; display:inline-flex; align-items:center; justify-content:center; line-height:1; border-radius:14px; background:rgba(191,215,48,.12); color:#BFD730; font-size:22px; } .adv-body{ min-width:0; padding-top:2px; } .adv-name{ font-family:'Oswald',sans-serif; font-weight:700; font-size:17px; text-transform:uppercase; letter-spacing:.01em; color:#fff; margin-bottom:6px; overflow-wrap:break-word; } .adv-desc{ font-family:'Raleway',sans-serif; font-size:14px; line-height:1.55; color:#9a9a9a; overflow-wrap:break-word; } @media (max-width:767.98px){ .adv-grid{ grid-template-columns:1fr; gap:22px; } } /* ===================== Выбор редакции (карточки) ===================== */ .editor{ margin:0 0 56px; } .editor-head{ margin:0 0 22px; } .editor-eyebrow{ font-family:'Oswald',sans-serif; font-weight:700; font-size:13px; letter-spacing:.18em; text-transform:uppercase; color:#BFD730; margin:0 0 10px; } .editor-h2{ font-family:'Oswald',sans-serif; font-weight:700; font-size:clamp(22px,3vw,34px); text-transform:uppercase; letter-spacing:.01em; color:#fff; margin:0 0 8px; } .editor-sub{ font-family:'Raleway',sans-serif; font-size:15px; line-height:1.6; color:#9a9a9a; margin:0; max-width:64ch; } .editor-grid{ display:grid; grid-template-columns:1fr 1fr; gap:20px; } .feat-card{ display:flex; min-width:0; min-height:210px; border:1px solid #1c1c1c; border-radius:14px; overflow:hidden; background:#0c0c0c; text-decoration:none; transition:border-color .35s ease, transform .35s ease; } .feat-card:hover{ border-color:#BFD730; transform:translateY(-4px); } .feat-card .fc-img{ flex:0 0 44%; object-fit:cover; display:block; min-height:210px; background:#151515; filter:grayscale(1); transition:filter .35s ease, transform .35s ease; } .feat-card:hover .fc-img{ filter:grayscale(0); transform:scale(1.04); } .feat-card .fc-body{ padding:24px; min-width:0; display:flex; flex-direction:column; justify-content:center; } .feat-card .fc-cat{ font-family:'Oswald',sans-serif; font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:#BFD730; } .feat-card .fc-title{ font-family:'Oswald',sans-serif; font-weight:700; font-size:22px; line-height:1.2; text-transform:uppercase; color:#fff; margin:10px 0; overflow-wrap:break-word; } .feat-card .fc-ex{ font-size:14px; line-height:1.6; color:#b0b0b0; overflow-wrap:break-word; } .feat-card .fc-meta{ font-family:'Oswald',sans-serif; font-size:11px; letter-spacing:.05em; text-transform:uppercase; color:#777; margin-top:12px; } .feat-card .fc-meta i{ color:#8a8a8a; } .editor-all{ display:inline-block; margin-top:24px; font-family:'Oswald',sans-serif; font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:#BFD730; text-decoration:none; border-bottom:1px solid rgba(191,215,48,.4); padding-bottom:2px; transition:color .2s ease, border-color .2s ease; } .editor-all:hover{ color:#d4ec4a; border-color:rgba(212,236,74,.7); } .editor-all:focus-visible{ outline:2px solid #BFD730; outline-offset:3px; border-radius:2px; } @media (max-width:767.98px){ .editor-grid{ display:flex; gap:14px; overflow-x:auto; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; scrollbar-width:thin; scroll-padding-left:16px; padding:4px 16px 14px 2px; margin-right:-16px; } .editor-grid::-webkit-scrollbar{ height:5px; } .editor-grid::-webkit-scrollbar-thumb{ background:#2a2a2a; border-radius:3px; } .feat-card{ flex:0 0 82%; flex-direction:column; min-height:0; scroll-snap-align:start; } .feat-card:hover{ transform:none; } .feat-card:hover .fc-img{ transform:none; filter:grayscale(1); } .feat-card.in-view .fc-img{ filter:grayscale(0); } .feat-card .fc-img{ flex:none; width:100%; height:auto; aspect-ratio:16/10; min-height:0; } .feat-card .fc-body{ padding:20px; } } /* ===================== Отзывы гостей (карточки) ===================== */ .guest-reviews{ margin:64px 0 72px; } .gr-head{ margin-bottom:26px; } .gr-eyebrow{ font-family:'Oswald',sans-serif; font-size:12px; letter-spacing:.22em; text-transform:uppercase; color:#BFD730; margin-bottom:10px; } .gr-title{ font-family:'Oswald',sans-serif; font-weight:700; font-size:clamp(22px,3vw,34px); text-transform:uppercase; letter-spacing:.01em; color:#fff; margin:0 0 8px; } .gr-sub{ font-family:'Raleway',sans-serif; font-size:15px; line-height:1.6; color:#9a9a9a; margin:0; max-width:64ch; } .gr-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:24px; } .gr-card{ display:flex; flex-direction:column; gap:12px; min-width:0; padding:22px 24px; background:#0e0e0e; border:1px solid #1a1a1a; border-radius:16px; transition:border-color .2s ease, transform .2s ease; } .gr-card:hover{ border-color:#BFD730; transform:translateY(-3px); } .gr-stars{ color:#BFD730; font-size:14px; letter-spacing:2px; line-height:1; } .gr-text{ font-family:'Raleway',sans-serif; font-size:14px; line-height:1.6; color:#d3d3d3; margin:0; flex:1; overflow-wrap:break-word; } .gr-meta{ display:flex; flex-direction:column; gap:3px; padding-top:6px; border-top:1px solid #1a1a1a; } .gr-name{ font-family:'Oswald',sans-serif; font-weight:700; font-size:14px; text-transform:uppercase; letter-spacing:.01em; color:#fff; } .gr-lvl{ font-family:'Raleway',sans-serif; font-size:12px; color:#8a8a8a; } .gr-all{ display:inline-block; margin-top:24px; font-family:'Oswald',sans-serif; font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:#BFD730; text-decoration:none; border-bottom:1px solid rgba(191,215,48,.4); padding-bottom:2px; transition:color .2s ease, border-color .2s ease; } .gr-all:hover{ color:#d4ec4a; border-color:rgba(212,236,74,.7); } .gr-all:focus-visible{ outline:2px solid #BFD730; outline-offset:3px; border-radius:2px; } @media (max-width:860px){ .gr-grid{ grid-template-columns:1fr 1fr; } } @media (max-width:767.98px){ .gr-grid{ display:flex; gap:14px; overflow-x:auto; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; scrollbar-width:thin; scroll-padding-left:16px; padding:4px 16px 14px 2px; margin-right:-16px; } .gr-grid::-webkit-scrollbar{ height:5px; } .gr-grid::-webkit-scrollbar-thumb{ background:#2a2a2a; border-radius:3px; } .gr-card{ flex:0 0 82%; scroll-snap-align:start; } .gr-card:hover{ transform:none; } } /* ===================== Подарочный сертификат ===================== */ .gift-cert{ margin:64px 0 72px; } .gc-grid{ display:grid; grid-template-columns:1.4fr 1fr; gap:40px; align-items:center; min-width:0; padding:40px 44px; border:1px solid #1a1a1a; border-left:3px solid #BFD730; border-radius:20px; background:linear-gradient(120deg,#0e0e0e 0%,#0b0b0b 60%,#111 100%); } .gc-text{ min-width:0; } .gc-eyebrow{ font-family:'Oswald',sans-serif; font-size:12px; letter-spacing:.22em; text-transform:uppercase; color:#BFD730; margin-bottom:10px; } .gc-title{ font-family:'Oswald',sans-serif; font-weight:700; font-size:clamp(22px,3vw,32px); text-transform:uppercase; letter-spacing:.01em; color:#fff; margin:0 0 12px; overflow-wrap:break-word; } .gc-desc{ font-family:'Raleway',sans-serif; font-size:15px; line-height:1.65; color:#c2c2c2; margin:0 0 18px; overflow-wrap:break-word; } .gc-desc strong{ color:#fff; } .gc-feats{ list-style:none; margin:0 0 18px; padding:0; display:flex; flex-direction:column; gap:10px; } .gc-feats li{ display:flex; align-items:center; gap:12px; font-family:'Raleway',sans-serif; font-size:14.5px; color:#d3d3d3; overflow-wrap:break-word; } .gc-feats i{ color:#BFD730; width:20px; text-align:center; flex:0 0 auto; } .gc-note{ font-family:'Raleway',sans-serif; font-size:12.5px; line-height:1.6; color:#8f8f8f; margin:0 0 22px; overflow-wrap:break-word; } .gc-note strong{ color:#b9b9b9; } .gc-note a{ color:#BFD730; text-decoration:underline; text-underline-offset:2px; } .gc-actions{ display:flex; align-items:center; gap:22px; flex-wrap:wrap; } .gc-btn{ display:inline-block; font-family:'Oswald',sans-serif; font-weight:700; font-size:14px; letter-spacing:.04em; text-transform:uppercase; color:#000; background:#BFD730; padding:14px 30px; border-radius:10px; text-decoration:none; transition:background .2s ease, transform .2s ease; } .gc-btn:focus-visible{ outline:2px solid #BFD730; outline-offset:3px; } .gc-link{ font-family:'Oswald',sans-serif; font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:#BFD730; text-decoration:none; border-bottom:1px solid rgba(191,215,48,.4); padding-bottom:2px; transition:color .2s ease, border-color .2s ease; } .gc-link:focus-visible{ outline:2px solid #BFD730; outline-offset:3px; } .gc-media{ display:flex; justify-content:center; } .gc-video-frame{ position:relative; width:100%; max-width:280px; aspect-ratio:9/16; border-radius:18px; overflow:hidden; border:1px solid #222; background:#0a0a0a; cursor:pointer; } .gc-video-frame:focus-visible{ outline:2px solid #BFD730; outline-offset:3px; } .gc-video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; } .gc-vmute{ position:absolute; bottom:12px; right:12px; z-index:2; width:38px; height:38px; display:flex; align-items:center; justify-content:center; line-height:1; border-radius:50%; background:rgba(0,0,0,.55); border:1px solid rgba(255,255,255,.3); color:#fff; font-size:14px; transition:background .2s ease; } @media (hover:hover){ .gc-btn:hover{ background:#d4ec4a; transform:translateY(-2px); } .gc-link:hover{ color:#d4ec4a; border-color:rgba(212,236,74,.7); } .gc-video-frame:hover .gc-vmute{ background:rgba(191,215,48,.9); color:#000; } } @media (max-width:767.98px){ .gc-grid{ grid-template-columns:1fr; gap:28px; padding:32px 24px; } .gc-media{ order:-1; } .gc-video-frame{ max-width:420px; } } @media (max-width:480px){ .gc-grid{ padding:24px 16px; } .gc-video-frame{ max-width:none; } } /* ===================== CTA — лаймовая панель ===================== */ .blog-cta{ margin:74px 0 0; position:relative; overflow:hidden; border-radius:18px; padding:clamp(30px,4vw,56px); background:#BFD730; color:#0c0c0c; } .blog-cta::after{ content:""; position:absolute; z-index:0; right:-90px; top:-90px; width:280px; height:280px; background:radial-gradient(circle, rgba(0,0,0,.10), transparent 70%); pointer-events:none; } .cta-inner{ position:relative; z-index:1; display:flex; align-items:center; justify-content:space-between; gap:clamp(24px,4vw,56px); flex-wrap:wrap; } .cta-left{ flex:1 1 440px; min-width:0; } .cta-eyebrow{ font-family:'Oswald',sans-serif; font-size:12px; letter-spacing:.22em; text-transform:uppercase; opacity:.6; margin:0 0 12px; } .cta-title{ font-family:'Oswald',sans-serif; font-weight:700; font-size:clamp(28px,3.6vw,50px); line-height:1.02; letter-spacing:.01em; text-transform:uppercase; margin:0 0 14px; color:#0c0c0c; overflow-wrap:break-word; } .cta-sub{ font-family:'Raleway',sans-serif; font-size:clamp(15px,1.25vw,17px); line-height:1.6; color:#1a1a1a; max-width:540px; margin:0 0 20px; overflow-wrap:break-word; } .cta-trust{ display:flex; flex-wrap:wrap; gap:10px 22px; } .cta-trust span{ font-family:'Oswald',sans-serif; font-size:12.5px; letter-spacing:.05em; text-transform:uppercase; display:inline-flex; align-items:center; gap:8px; overflow-wrap:break-word; } .cta-trust i{ font-size:14px; } .cta-right{ flex:0 0 auto; display:flex; flex-direction:column; align-items:flex-start; gap:16px; min-width:220px; } .cta-price{ display:flex; flex-wrap:wrap; align-items:baseline; gap:8px; } .cta-price .from{ font-family:'Oswald',sans-serif; font-size:14px; text-transform:uppercase; letter-spacing:.1em; opacity:.7; } .cta-price .num{ font-family:'Oswald',sans-serif; font-weight:700; font-size:clamp(38px,4.4vw,58px); line-height:1; } .cta-price i{ font-size:clamp(44px,5vw,68px); margin:0 -1px; } .cta-price .per{ font-family:'Oswald',sans-serif; font-size:14px; opacity:.7; } .cta-btn{ display:inline-flex; align-items:center; justify-content:center; margin-top:12px; background:#0c0c0c; color:#BFD730; font-family:'Oswald',sans-serif; font-weight:700; font-size:15px; letter-spacing:.12em; text-transform:uppercase; padding:18px 40px; border-radius:8px; text-decoration:none; transition:transform .25s ease, background .25s ease, color .25s ease, opacity .2s ease; box-shadow:0 10px 30px rgba(0,0,0,.25); } .cta-btn:focus-visible{ outline:2px solid #BFD730; outline-offset:-4px; } .cta-btn:active{ opacity:.85; } .cta-gift{ font-family:'Oswald',sans-serif; font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:#0c0c0c; text-decoration:underline; text-underline-offset:3px; opacity:.75; transition:opacity .25s ease; } .cta-gift:focus-visible{ outline:2px solid #0c0c0c; outline-offset:2px; opacity:1; } @media (hover:hover){ .cta-btn:hover{ transform:translateY(-3px); background:#111; color:#fff; } .cta-gift:hover{ opacity:1; } } @media (max-width:767.98px){ .cta-inner{ flex-direction:column; align-items:stretch; justify-content:flex-start; gap:24px; } .cta-left{ flex:0 0 auto; } .cta-right{ width:100%; flex:0 0 auto; align-items:center; gap:14px; } .cta-price{ justify-content:center; width:100%; } .cta-btn{ width:100%; padding:20px; font-size:16px; } .cta-btn:active{ transform:scale(.98); opacity:.9; } .cta-gift{ text-align:center; } } @media (prefers-reduced-motion:reduce){ .cta-btn{ transition:none; } .cta-btn:hover{ transform:none; } .cta-btn:active{ transform:none; } } /* ===================== Блок «Обзор студии» (2 колонки) ===================== */ .studio-review{ margin:64px 0 72px; } .sr-head{ margin-bottom:32px; } .sr-eyebrow{ font-family:'Oswald',sans-serif; font-size:12px; letter-spacing:.22em; text-transform:uppercase; color:#BFD730; margin-bottom:10px; } .sr-title{ font-family:'Oswald',sans-serif; font-weight:700; font-size:clamp(22px,3vw,34px); text-transform:uppercase; letter-spacing:.01em; color:#fff; margin:0 0 8px; } .sr-sub{ font-family:'Raleway',sans-serif; font-size:15px; line-height:1.6; color:#9a9a9a; margin:0; max-width:64ch; } .sr-grid{ display:grid; grid-template-columns:1fr 0.82fr; gap:40px; align-items:stretch; } .sr-left{ display:flex; flex-direction:column; gap:16px; } .sr-card{ flex:1; display:flex; flex-direction:column; justify-content:center; gap:10px; padding:22px 24px; background:#0e0e0e; border:1px solid #1a1a1a; border-radius:16px; text-decoration:none; transition:border-color .2s ease, transform .2s ease; } .sr-card:hover{ border-color:#BFD730; transform:translateY(-2px); } .sr-card-src{ font-family:'Oswald',sans-serif; font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:#BFD730; } .sr-card-title{ font-family:'Raleway',sans-serif; font-size:16px; line-height:1.4; color:#eaeaea; } .sr-card-go{ font-family:'Oswald',sans-serif; font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:#8a8a8a; margin-top:2px; transition:color .2s ease; } .sr-card:hover .sr-card-go{ color:#BFD730; } .sr-right{ display:grid; grid-template-columns:1fr 1fr; gap:16px; } .sr-right .bv-card.sr-video{ width:auto; height:100%; aspect-ratio:auto; flex:initial; } .sr-right .bv-card.sr-video video{ width:100%; height:100%; object-fit:cover; } @media (max-width:767.98px){ .sr-grid{ grid-template-columns:1fr; gap:24px; } .sr-right{ max-width:420px; margin:0 auto; gap:12px; } .sr-right .bv-card.sr-video{ height:auto; aspect-ratio:9/16; } .sr-card{ flex:initial; } } /* ===================== Сетка статей, пагинатор ===================== */ .blog-filter{ display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin:0 0 40px; } .blog-filter .chip{ font-family:'Oswald',sans-serif; font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:#cfcfcf; background:transparent; border:1px solid #2a2a2a; border-radius:30px; padding:10px 18px; cursor:pointer; line-height:1; transition:color .3s ease, border-color .3s ease, background .3s ease; } .blog-filter .chip:hover{ border-color:#BFD730; color:#BFD730; } .blog-filter .chip.active{ background:#BFD730; border-color:#BFD730; color:#111; font-weight:700; } .blog-filter .chip:focus-visible{ outline:2px solid #BFD730; outline-offset:2px; } .blog-search{ display:inline-flex; align-items:center; gap:8px; background:#0e0e0e; border:1px solid #2a2a2a; border-radius:30px; padding:8px 16px; transition:border-color .2s ease; flex:0 0 auto; } .blog-search:focus-within{ border-color:#BFD730; } .blog-search i{ color:#777; font-size:13px; transition:color .2s ease; } .blog-search:focus-within i{ color:#BFD730; } .blog-search input{ width:160px; max-width:46vw; background:transparent; border:0; outline:none; color:#fff; font-family:'Raleway',sans-serif; font-size:14px; line-height:1; padding:0; } .blog-search input::placeholder{ color:#777; } .blog-search input::-webkit-search-cancel-button{ -webkit-appearance:none; appearance:none; } .blog-empty{ font-family:'Oswald',sans-serif; letter-spacing:.04em; color:#888; text-align:center; padding:40px 0; } .posts-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:26px; } @media (max-width:991.98px){ .posts-grid{ grid-template-columns:repeat(2,1fr); } } @media (max-width:639.98px){ .posts-grid{ grid-template-columns:1fr; } } .post-card{ display:flex; flex-direction:column; min-width:0; border:1px solid #1c1c1c; border-radius:12px; overflow:hidden; background:#0b0b0b; text-decoration:none; transition:border-color .35s ease, transform .35s ease; } .post-card:focus-visible{ outline:2px solid #BFD730; outline-offset:3px; } .post-card .pc-media{ position:relative; aspect-ratio:16/10; overflow:hidden; background:#151515; } .post-card .pc-media .pc-img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; background:#151515; transition:transform .6s cubic-bezier(.2,.8,.2,1); } .post-card .pc-cat{ position:absolute; top:14px; left:14px; z-index:2; font-family:'Oswald',sans-serif; font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:#111; background:#BFD730; padding:6px 12px; border-radius:30px; font-weight:700; overflow-wrap:break-word; } .post-card .pc-body{ padding:22px 22px 26px; display:flex; flex-direction:column; flex:1; min-width:0; } .post-card .pc-date{ font-family:'Oswald',sans-serif; font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:#777; margin-bottom:10px; overflow-wrap:break-word; } .post-card .pc-title{ font-family:'Oswald',sans-serif; font-weight:700; font-size:21px; line-height:1.22; letter-spacing:.02em; text-transform:uppercase; color:#fff; margin:0 0 12px; overflow-wrap:break-word; } .post-card .pc-excerpt{ font-size:15px; line-height:1.7; color:#b8b8b8; margin:0 0 18px; flex:1; overflow-wrap:break-word; } .post-card .pc-more{ font-family:'Oswald',sans-serif; font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:#BFD730; display:inline-flex; align-items:center; gap:8px; overflow-wrap:break-word; } .post-card .pc-more i{ transition:transform .3s ease; } @media (hover:hover){ .post-card:hover{ border-color:#BFD730; transform:translateY(-6px); } .post-card:hover .pc-media .pc-img{ transform:scale(1.07); } .post-card:hover .pc-more i{ transform:translateX(5px); } } .pagination{ display:flex; justify-content:center; align-items:center; gap:8px; margin:60px 0 0; flex-wrap:wrap; } button.pg{ appearance:none; -webkit-appearance:none; background:transparent; border:0; font:inherit; cursor:pointer; } .pagination .pg{ min-width:46px; height:46px; padding:0 14px; display:inline-flex; align-items:center; justify-content:center; border:1px solid #1f1f1f; border-radius:8px; color:#cfcfcf; text-decoration:none; font-family:'Oswald',sans-serif; font-size:16px; letter-spacing:.04em; background:transparent; cursor:pointer; transition:color .3s ease, border-color .3s ease, background .3s ease; } .pagination button.pg:hover{ border-color:#BFD730; color:#BFD730; } .pagination .pg.current{ background:#BFD730; border-color:#BFD730; color:#111; font-weight:700; } .pagination .pg.disabled{ opacity:.35; pointer-events:none; } .pagination .pg-dots{ border-color:transparent; cursor:default; pointer-events:none; opacity:.5; min-width:auto; padding:0 6px; } .pagination .pg:focus-visible{ outline:2px solid #BFD730; outline-offset:2px; } @media (max-width:767.98px){ .pagination{ gap:6px; margin-top:44px; } .pagination .pg{ min-width:40px; height:40px; padding:0 10px; font-size:15px; } } /* ===================== Счётчик просмотров на карточке ===================== */ .pc-eye{ font-size:11px; opacity:.75; margin-right:1px; } /* ===================== Мы в соцсетях (VK-видео) ===================== */ .social-feed{ margin:64px 0 72px; } .sf-head{ margin-bottom:24px; } .sf-eyebrow{ font-family:'Oswald',sans-serif; font-size:12px; letter-spacing:.22em; text-transform:uppercase; color:#BFD730; margin-bottom:10px; } .sf-title{ font-family:'Oswald',sans-serif; font-weight:700; font-size:clamp(22px,3vw,34px); text-transform:uppercase; letter-spacing:.01em; color:#fff; margin:0 0 8px; } .sf-sub{ font-family:'Raleway',sans-serif; font-size:15px; line-height:1.6; color:#9a9a9a; margin:0; max-width:64ch; } .sf-reels{ display:flex; gap:16px; overflow-x:auto; padding:6px 16px 16px 2px; margin-right:-16px; scroll-snap-type:x mandatory; scroll-padding-left:16px; -webkit-overflow-scrolling:touch; scrollbar-width:thin; } .sf-reels::-webkit-scrollbar{ height:6px; } .sf-reels::-webkit-scrollbar-thumb{ background:#2a2a2a; border-radius:3px; } .sf-reel{ position:relative; flex:0 0 auto; width:clamp(190px,22vw,240px); aspect-ratio:9/16; border-radius:16px; overflow:hidden; border:1px solid #1a1a1a; text-decoration:none; scroll-snap-align:start; transition:border-color .2s ease, transform .2s ease; background:#0e0e0e; } .sf-reel:focus-visible{ outline:2px solid #BFD730; outline-offset:3px; } .sf-cover{ position:absolute; inset:0; z-index:0; background-size:cover; background-position:center; } .sf-reel::after{ content:""; position:absolute; inset:0; z-index:1; pointer-events:none; background:linear-gradient(180deg,rgba(0,0,0,0) 40%,rgba(0,0,0,.85)); } .sf-play{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); z-index:2; width:52px; height:52px; display:flex; align-items:center; justify-content:center; line-height:1; border-radius:50%; background:rgba(0,0,0,.45); border:1px solid rgba(255,255,255,.4); color:#fff; font-size:16px; backdrop-filter:blur(2px); transition:background .2s ease; } .sf-label{ position:absolute; left:14px; right:14px; bottom:14px; z-index:2; font-family:'Raleway',sans-serif; font-size:13px; line-height:1.4; color:#fff; } @media (hover:hover){ .sf-reel:hover{ border-color:#BFD730; transform:translateY(-3px); } .sf-reel:hover .sf-play{ background:#BFD730; color:#000; border-color:#BFD730; } } .sf-all{ display:inline-block; margin-top:14px; font-family:'Oswald',sans-serif; font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:#BFD730; text-decoration:none; border-bottom:1px solid rgba(191,215,48,.4); padding-bottom:2px; transition:color .2s ease, border-color .2s ease; } .sf-all:hover{ color:#d4ec4a; border-color:rgba(212,236,74,.7); } .sf-all:focus-visible{ outline:2px solid #BFD730; outline-offset:3px; border-radius:2px; } /* ===================== Футер доверия ===================== */ .blog-footer{ margin:74px 0 0; border-top:1px solid #1c1c1c; padding:48px 0 0; display:grid; grid-template-columns:1.1fr 1fr; gap:40px; align-items:start; } .bf-hi{ color:#BFD730; font-weight:600; } .bf-col{ min-width:0; display:flex; flex-direction:column; } .bf-col h3{ font-family:'Oswald',sans-serif; font-weight:700; font-size:14px; letter-spacing:.16em; text-transform:uppercase; color:#fff; margin:0 0 16px; } .bf-addr{ font-family:'Oswald',sans-serif; font-size:18px; color:#fff; letter-spacing:.03em; margin:0 0 8px; overflow-wrap:break-word; } .bf-col p{ font-size:14.5px; color:#bdbdbd; line-height:1.7; margin:0 0 6px; overflow-wrap:break-word; } .blog-footer .link-underline:focus-visible{ outline:2px solid #BFD730; outline-offset:3px; border-radius:2px; } .bf-top{ display:flex; justify-content:space-between; align-items:flex-start; gap:24px; flex-wrap:wrap; margin-bottom:24px; } .bf-contacts{ min-width:0; } .bf-social{ display:flex; gap:12px; margin:0; flex:0 0 auto; } .bf-social a{ width:42px; height:42px; display:inline-flex; align-items:center; justify-content:center; border:1px solid #2a2a2a; border-radius:50%; color:#fff; font-size:17px; text-decoration:none; line-height:1; transition:border-color .3s ease, color .3s ease; } .bf-social a:focus-visible{ outline:2px solid #BFD730; outline-offset:3px; } .bf-map{ margin:0 0 20px; border-radius:14px; overflow:hidden; border:1px solid #1e1e1e; line-height:0; } .bf-map iframe{ display:block; width:100%; height:260px; border:0; filter:grayscale(1) contrast(.95); transition:filter .4s ease; } .bf-metro{ margin:0; font-family:'Raleway',sans-serif; font-size:14px; line-height:1.65; color:#9a9a9a; max-width:48ch; } .bf-faq .faq-acc{ border-top:1px solid #1c1c1c; } .bf-faq .faq-item{ border-bottom:1px solid #1c1c1c; } .bf-faq .faq-item summary{ list-style:none; cursor:pointer; position:relative; padding:13px 30px 13px 0; font-family:'Oswald',sans-serif; font-size:13.5px; letter-spacing:.02em; text-transform:uppercase; color:#e8e8e8; transition:color .2s ease; overflow-wrap:break-word; } .bf-faq .faq-item summary::-webkit-details-marker{ display:none; } .bf-faq .faq-item summary::marker{ content:""; } .bf-faq .faq-item summary::after{ content:"+"; position:absolute; right:2px; top:50%; transform:translateY(-50%); font-size:19px; line-height:1; color:#BFD730; transition:transform .25s ease; } .bf-faq .faq-item[open] summary::after{ content:"−"; } .bf-faq .faq-item summary:focus-visible{ outline:2px solid #BFD730; outline-offset:2px; color:#BFD730; } .bf-faq .faq-a{ padding:0 0 15px; font-family:'Raleway',sans-serif; font-size:13.5px; line-height:1.6; color:#9a9a9a; max-width:48ch; overflow-wrap:break-word; } .faq-cta{ margin-left:6px; color:#BFD730; text-decoration:underline; text-underline-offset:2px; font-weight:600; white-space:nowrap; transition:color .2s ease; } .faq-cta:focus-visible{ outline:2px solid #BFD730; outline-offset:2px; } .bf-faq .bf-trust{ margin-top:auto; padding-top:26px; border-top:1px solid #1c1c1c; } .bf-rating{ flex:0 0 auto; max-width:100%; min-width:0; display:inline-flex; align-items:center; gap:14px; padding:12px 18px; background:#0e0e0e; border:1px solid #242424; border-radius:14px; text-decoration:none; transition:border-color .2s ease; } .bf-rating:focus-visible{ outline:2px solid #BFD730; outline-offset:3px; } .bf-rating-val{ font-family:'Oswald',sans-serif; font-size:26px; font-weight:700; line-height:1; color:#fff; flex:0 0 auto; } .bf-rating-body{ min-width:0; display:flex; flex-direction:column; gap:4px; } .bf-rating-stars{ color:#BFD730; font-size:15px; letter-spacing:2px; line-height:1; } .bf-rating-meta{ font-family:'Raleway',sans-serif; font-size:12.5px; color:#8a8a8a; overflow-wrap:break-word; } @media (hover:hover){ .bf-social a:hover{ border-color:#BFD730; color:#BFD730; } .bf-map:hover iframe{ filter:grayscale(0) contrast(1); } .bf-faq .faq-item summary:hover{ color:#BFD730; } .faq-cta:hover{ color:#d4ec4a; } .bf-rating:hover{ border-color:#BFD730; } } @media (max-width:767.98px){ .blog-footer{ grid-template-columns:1fr; } .bf-col{ display:block; } .bf-top{ flex-direction:column; gap:18px; } .bf-map iframe{ height:220px; } .bf-faq .bf-trust{ margin-top:24px; } .bf-metro{ margin-bottom:0; } } /* ===================== Cookie-bar ===================== */ .cookie-bar{ position:fixed; left:40px; bottom:40px; right:auto; z-index:1000; box-sizing:border-box; display:flex; flex-direction:row; align-items:center; gap:18px; width:auto; max-width:560px; margin:0; padding:16px 20px; background:rgba(14,14,14,.72); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); border:1px solid rgba(255,255,255,.1); border-radius:14px; box-shadow:0 14px 44px rgba(0,0,0,.5); } .cookie-bar[hidden]{ display:none !important; } .cookie-text{ font-family:'Raleway',sans-serif; font-size:13px; line-height:1.5; color:#bdbdbd; overflow-wrap:break-word; } .cookie-text a{ color:#BFD730; text-decoration:none; } .cookie-text a:focus-visible{ outline:2px solid #BFD730; outline-offset:2px; } .cookie-ok{ flex:0 0 auto; font-family:'Oswald',sans-serif; font-size:13px; letter-spacing:.08em; text-transform:uppercase; line-height:1; color:#0c0c0c; background:#BFD730; border:0; border-radius:8px; padding:12px 26px; cursor:pointer; white-space:nowrap; transition:opacity .2s ease; } .cookie-ok:focus-visible{ outline:2px solid #0c0c0c; outline-offset:-4px; } @media (hover:hover){ .cookie-text a:hover{ text-decoration:underline; } .cookie-ok:hover{ opacity:.88; } } @media (max-width:767.98px){ .cookie-bar{ flex-direction:column; align-items:stretch; left:16px; right:16px; bottom:calc(96px + env(safe-area-inset-bottom)); width:auto; max-width:none; gap:12px; } .cookie-ok{ width:100%; } } /* ===================== Доступность: уменьшенное движение ===================== */ @media (prefers-reduced-motion: reduce){ *, *::before, *::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; } } /* ==================== СТАТЬЯ: блоки и продажи ==================== */ /* ===================== Страница статьи: база и типографика ===================== */ .article-page { position: relative; z-index: 1; max-width: 1240px; margin: 0 auto; padding: 160px 24px 120px; color: #fff; font-family: 'Raleway', sans-serif; } @media (max-width: 991.98px) { .article-page { padding: 80px 18px 90px; } } .article-page h1 { font-family: 'Oswald', sans-serif; font-weight: 700; font-size: 46px; line-height: 1.08; letter-spacing: .04em; text-transform: uppercase; margin: 0 0 26px; color: #fff; } @media (max-width: 991.98px) { .article-page h1 { font-size: 30px; } } .article-lead { font-size: 20px; line-height: 1.6; color: #e9e9e9; font-weight: 500; border-left: 3px solid #BFD730; padding-left: 20px; margin: 0 0 40px; } @media (max-width: 991.98px) { .article-lead { font-size: 17px; } } .article-body h2 { font-family: 'Oswald', sans-serif; font-weight: 700; font-size: 26px; letter-spacing: .05em; text-transform: uppercase; color: #fff; margin: 52px 0 18px; position: relative; padding-bottom: 14px; } .article-body h2::after { content: ""; position: absolute; left: 0; bottom: 0; width: 54px; height: 3px; background: #BFD730; } .article-body h3 { font-family: 'Oswald', sans-serif; font-weight: 700; font-size: 18px; letter-spacing: .05em; text-transform: uppercase; color: #BFD730; margin: 30px 0 12px; } .article-body p { font-size: 16.5px; line-height: 1.8; color: #dcdcdc; margin: 0 0 18px; } .article-body p a:not(.c-btn), .article-body li a:not(.c-btn) { color:#BFD730; text-decoration:underline; text-underline-offset:3px; } @media (hover:hover) { .article-body p a:not(.c-btn):hover, .article-body li a:not(.c-btn):hover { color:#d4ec4a; } } .article-body strong { color:#fff; } .article-body blockquote { margin: 30px 0; padding: 22px 26px; background: #0d0d0d; border: 1px solid #1c1c1c; border-left: 4px solid #BFD730; border-radius: 6px; font-size: 18px; line-height: 1.6; color: #f3f3f3; font-style: italic; } /* ===================== Мета статьи (категория, дата, обновление) ===================== */ .article-meta { font-family:'Oswald',sans-serif; font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:#BFD730; margin-bottom:18px; } .article-meta .upd-date { font-family:'Raleway',sans-serif; font-size:13px; color:#8a8a8a; } .article-meta i { margin-right:6px; } /* ===================== Оглавление ===================== */ .toc { position: relative; min-width: 0; border: 1px solid rgba(191,215,48,.45); border-radius: 16px; background: #0a0a0a; padding: 24px 28px; margin: 26px 0; box-shadow: 0 18px 40px -12px rgba(191,215,48,.25), inset 0 -30px 50px -30px rgba(191,215,48,.18); } .toc-h { font-family: 'Oswald', sans-serif; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; font-size: 13px; color: #BFD730; margin: 0 0 14px; } .toc ul { list-style: none; margin: 0; padding: 0; columns: 4; column-gap: 22px; } .toc li { margin: 0 0 2px; break-inside: avoid; overflow-wrap: break-word; } .toc a { display: flex; align-items: center; gap: 10px; padding: 8px 10px; margin: 0 -10px; border-radius: 8px; font-family: 'Raleway', sans-serif; font-size: 14.5px; color: #d8d8d8; text-decoration: none; transition: background .2s ease, color .2s ease; overflow-wrap: break-word; -webkit-tap-highlight-color: transparent; } @media (hover: hover) { .toc a:hover { color: #fff; background: rgba(191,215,48,.08); } } .toc a:focus-visible { outline: 2px solid #BFD730; outline-offset: 2px; } .toc-i { flex-shrink: 0; width: 18px; text-align: center; color: #BFD730; font-size: 14px; } @media (max-width: 1100px) { .toc ul { columns: 3; } } @media (max-width: 991.98px) { .toc ul { columns: 2; } } @media (max-width: 767.98px) { .toc { padding: 20px 16px; } .toc ul { columns: 2; column-gap: 12px; } .toc a { gap: 8px; padding: 7px 6px; margin: 0 -6px; font-size: 13.5px; } .toc-i { width: 16px; font-size: 12px; } } @media (prefers-reduced-motion: reduce) { .toc a { transition: none; } } /* ===================== Обложка статьи (hero-картинка) ===================== */ .post-figure { margin: 0 0 44px; } .post-figure img { width: 100%; height: auto; display: block; border-radius: 8px; background: #111; } .post-figure figcaption { font-family: 'Oswald', sans-serif; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: #777; margin-top: 10px; overflow-wrap: break-word; } /* ===================== Что такое: определение ===================== */ .article-body .def-box { position: relative; margin: 24px 0 28px; padding: 26px 30px 26px 34px; border-radius: 14px; background: radial-gradient(120% 140% at 0% 0%, #14140f, #0a0a0a 60%); border: 1px solid #1c1c1c; overflow: hidden; } .article-body .def-box::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: #BFD730; } .article-body .def-box p { margin: 0; font-family: 'Raleway', sans-serif; font-size: clamp(16px, 1.8vw, 19px); line-height: 1.6; color: #eaeaea; overflow-wrap: break-word; } .article-body .def-box p strong { color: #fff; } .article-body .def-box .def-syn { margin: 18px 0 0; font-size: 14px; color: #8a8a8a; overflow-wrap: break-word; } .article-body .def-box .def-syn b { color: #BFD730; font-weight: 600; } .article-body .pullquote { margin: 26px 0; padding: 6px 0 6px 22px; border-left: 3px solid #BFD730; font-family: 'Oswald', sans-serif; font-weight: 600; text-transform: uppercase; letter-spacing: .02em; font-size: clamp(18px, 2.2vw, 24px); line-height: 1.3; color: #fff; overflow-wrap: break-word; } @media (max-width: 767.98px) { .article-body .def-box { padding: 22px 20px 22px 24px; } } /* ===================== Как проходит: путь клиента ===================== */ .steps { position: relative; margin: 26px 0 28px; padding: 0; } .steps .step { position: relative; display: flex; gap: 20px; padding: 0 0 30px 0; } .steps .step:last-child { padding-bottom: 0; } .steps .step::before { content: ""; position: absolute; left: 23px; top: 50px; bottom: -4px; width: 2px; background: linear-gradient(180deg, #BFD730, #2a3312); } .steps .step:last-child::before { display: none; } .step-ic { position: relative; z-index: 1; flex-shrink: 0; width: 48px; height: 48px; border-radius: 50%; background: #0d0d0d; border: 2px solid #BFD730; color: #BFD730; font-size: 18px; display: inline-flex; align-items: center; justify-content: center; } .step-body { padding-top: 3px; min-width: 0; } .step-body strong { display: block; font-family: 'Oswald', sans-serif; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; font-size: 16px; color: #fff; margin-bottom: 6px; overflow-wrap: break-word; } .step-body span { font-family: 'Raleway', sans-serif; font-size: 15px; line-height: 1.6; color: #b8b8b8; overflow-wrap: break-word; } .steps-cta { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 18px; min-width: 0; margin-top: 4px; padding: 24px 28px; border: 1px solid #1c1c1c; border-radius: 14px; background: radial-gradient(120% 140% at 0% 0%, #14140f, #0a0a0a 60%); } .steps-cta-text { font-family: 'Oswald', sans-serif; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; font-size: clamp(17px,2vw,22px); color: #fff; overflow-wrap: break-word; } .steps-cta-text b { color: #BFD730; } @media (max-width: 767.98px) { .steps-cta { flex-direction: column; align-items: stretch; text-align: center; padding: 22px 18px; } .steps-cta .c-btn { display: flex; justify-content: center; } } /* ===================== Кому подойдёт: сценарии ===================== */ .use-cases { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 24px 0 10px; } .uc-item { display: flex; align-items: flex-start; gap: 14px; padding: 20px; border: 1px solid #1c1c1c; border-radius: 12px; background: #0b0b0b; min-width: 0; transition: border-color .25s ease, transform .25s ease; } .uc-ic { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: 10px; background: rgba(191,215,48,.1); color: #BFD730; font-size: 20px; } .uc-text { display: flex; flex-direction: column; gap: 4px; min-width: 0; } .uc-text strong { font-family: 'Oswald', sans-serif; font-weight: 700; text-transform: uppercase; letter-spacing: .02em; font-size: 15px; color: #fff; overflow-wrap: break-word; } .uc-text span { font-family: 'Raleway', sans-serif; font-size: 14px; line-height: 1.55; color: #b8b8b8; overflow-wrap: break-word; } @media (hover: hover) { .uc-item:hover { border-color: #BFD730; transform: translateY(-3px); } } @media (max-width: 900px) { .use-cases { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 767.98px) { .use-cases { grid-template-columns: 1fr; } } @media (prefers-reduced-motion: reduce) { .uc-item { transition: none; } .uc-item:hover { transform: none; } } /* ===================== Почему выбирают (статья) ===================== */ .why-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 24px 0 10px; } .why-item { min-width: 0; padding: 22px 24px; border: 1px solid #1c1c1c; border-radius: 12px; background: #0b0b0b; transition: border-color .25s ease, transform .25s ease; } .why-head { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; min-width: 0; } .why-i { flex-shrink: 0; width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border-radius: 10px; background: rgba(191,215,48,.1); color: #BFD730; font-size: 20px; } .why-item h3 { margin: 0; font-family: 'Oswald', sans-serif; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; font-size: 15px; line-height: 1.2; color: #fff; overflow-wrap: break-word; } .why-item p { margin: 0; font-family: 'Raleway', sans-serif; font-size: 14px; line-height: 1.6; color: #b8b8b8; overflow-wrap: break-word; } @media (hover: hover) { .why-item:hover { border-color: #BFD730; transform: translateY(-3px); } } @media (max-width: 900px) { .why-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 767.98px) { .why-grid { grid-template-columns: 1fr; } } @media (prefers-reduced-motion: reduce) { .why-item { transition: none; } .why-item:hover { transform: none; } } /* ===================== Факт-бокс ===================== */ .quickfacts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 22px 0 24px; } .quickfacts .qf { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; border: 1px solid #1c1c1c; border-left: 3px solid #BFD730; border-radius: 12px; background: #0b0b0b; padding: 18px 20px; } .quickfacts .qf-ic { display: block; color: #BFD730; font-size: 18px; line-height: 1; margin: 0 0 2px; } .quickfacts .qf-l { display: block; width: 100%; font-family: 'Oswald', sans-serif; font-weight: 700; font-size: 12px; line-height: 1.2; letter-spacing: .08em; text-transform: uppercase; color: #8a8a8a; overflow-wrap: break-word; } .quickfacts .qf-v { display: block; width: 100%; font-family: 'Oswald', sans-serif; font-weight: 700; font-size: clamp(16px,1.5vw,19px); line-height: 1.25; letter-spacing: .02em; color: #fff; overflow-wrap: break-word; } @media (max-width: 900px) { .quickfacts { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 767.98px) { .quickfacts { grid-template-columns: 1fr 1fr; gap: 10px; } .quickfacts .qf { padding: 14px; } } /* ===================== Достижения (цифры) ===================== */ .stats-band { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; margin: 44px 0; padding: 38px 24px; border: 1px solid #2a2411; border-radius: 18px; background: radial-gradient(120% 140% at 50% 0%, #14140f 0%, #0a0a0a 60%, #070707 100%); box-shadow: 0 0 0 1px rgba(214,178,64,.12), 0 0 60px rgba(214,178,64,.18), inset 0 0 40px rgba(214,178,64,.05); text-align: center; } .stats-band .stat { position: relative; padding: 6px 12px; min-width: 0; } .stats-band .stat:not(:last-child)::after { content: ""; position: absolute; top: 50%; right: 0; transform: translateY(-50%); width: 1px; height: 54px; background: linear-gradient(180deg, transparent, #2a2411 30%, #2a2411 70%, transparent); } .stat-num { display: block; font-family: 'Oswald', sans-serif; font-weight: 700; font-size: clamp(34px, 4.4vw, 52px); line-height: 1; color: #BFD730; text-shadow: 0 2px 0 #6f7d1a, 0 0 22px rgba(191,215,48,.35); letter-spacing: .01em; overflow-wrap: break-word; } .stat-l { display: block; font-family: 'Raleway', sans-serif; font-size: 14px; color: #cfcfc4; margin-top: 10px; overflow-wrap: break-word; } @media (max-width: 767.98px) { .stats-band { grid-template-columns: 1fr; gap: 14px; padding: 0; border: 0; background: none; box-shadow: none; } .stats-band .stat { padding: 24px 16px; border: 1px solid #2a2411; border-radius: 14px; background: radial-gradient(120% 160% at 50% 0%, #14140f 0%, #0a0a0a 70%); box-shadow: 0 0 40px rgba(214,178,64,.16), inset 0 0 30px rgba(214,178,64,.05); } .stats-band .stat:not(:last-child)::after { display: none; } } /* ===================== Таблица сравнения ===================== */ .cmp-wrap { margin: 26px 0 10px; overflow-x: auto; -webkit-overflow-scrolling: touch; } .cmp-table { width: 100%; border-collapse: collapse; font-family: 'Raleway', sans-serif; font-size: 15px; color: #e6e6e6; min-width: 560px; } .cmp-table th, .cmp-table td { text-align: left; padding: 14px 16px; border: 1px solid #1c1c1c; vertical-align: top; } .cmp-table thead th { font-family: 'Oswald', sans-serif; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; font-size: 13px; color: #fff; background: #0d0d0d; } .cmp-table thead th.c-photofree { color: #BFD730; } .cmp-table tbody th.c-param { font-weight: 600; color: #fff; } .cmp-table tbody td.c-photofree { color: #d8f36b; } .cmp-table tbody tr:nth-child(even) th, .cmp-table tbody tr:nth-child(even) td { background: #0a0a0a; } .cmp-tabs { display: none; } @media (max-width: 767.98px) { .cmp-tabs { display: flex; gap: 8px; margin: 22px 0 0; padding: 4px; background: #0b0b0b; border: 1px solid #1c1c1c; border-radius: 12px; } .cmp-tab { flex: 1 1 0; padding: 12px 10px; border: 0; border-radius: 9px; background: transparent; color: #b8b8b8; font-family: 'Oswald', sans-serif; font-weight: 700; font-size: 13px; letter-spacing: .04em; text-transform: uppercase; cursor: pointer; transition: background .25s ease, color .25s ease; -webkit-tap-highlight-color: transparent; } .cmp-tab.is-active { background: #BFD730; color: #111; } .cmp-tab:focus-visible { outline: 2px solid #BFD730; outline-offset: 2px; } .cmp-wrap { overflow: visible; margin-top: 12px; } .cmp-table { min-width: 0; } .cmp-table .c-photographer, .cmp-table .c-photofree { display: none; } .cmp-table[data-col="photographer"] .c-photographer { display: table-cell; } .cmp-table[data-col="photofree"] .c-photofree { display: table-cell; } } .value-note { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; border: 1px solid #1c1c1c; border-left: 3px solid #BFD730; border-radius: 14px; background: #0b0b0b; padding: 28px 30px; margin: 30px 0; } .value-big { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; } .value-num { display: inline-flex; align-items: center; gap: 4px; color: #BFD730; } .value-num i { font-size: clamp(34px, 5vw, 50px); line-height: 1; } .value-num .fa-tilde { font-size: clamp(20px, 3vw, 30px); margin-right: 4px; } .value-num .fa-ruble-sign { font-size: clamp(28px, 4.2vw, 42px); margin-left: 8px; } .value-num .value-dash { font-family: 'Oswald', sans-serif; font-size: clamp(30px, 4.5vw, 46px); line-height: 1; color: #BFD730; } .value-label { font-family: 'Oswald', sans-serif; font-weight: 700; font-size: 16px; letter-spacing: .06em; text-transform: uppercase; color: #8a8a8a; } .value-note p { font-family: 'Raleway', sans-serif; font-size: 15.5px; line-height: 1.65; color: #d8d8d8; margin: 0; flex: 1 1 300px; overflow-wrap: break-word; } /* ===================== Три зала (плитки с фоном) ===================== */ .zal-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 26px 0 10px; } .zal-card { min-width: 0; border-radius: 14px; overflow: hidden; display: flex; flex-direction: column; background: #0c0c0c; box-shadow: 0 4px 14px rgba(0,0,0,.18); transition: transform .3s cubic-bezier(.4,0,.2,1), box-shadow .3s cubic-bezier(.4,0,.2,1); } .zal-photo { aspect-ratio: 3/4; overflow: hidden; background: #151515; } .zal-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; background: #151515; filter: grayscale(1); transition: filter .35s ease, transform .35s ease; will-change: filter, transform; } .zal-body { padding: 22px 20px 26px; } .zal-body h3 { margin: 0 0 10px; font-family: 'Oswald', sans-serif; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; font-size: 20px; overflow-wrap: break-word; } .zal-body p { margin: 0; font-family: 'Raleway', sans-serif; font-size: 14.5px; line-height: 1.6; overflow-wrap: break-word; } .zal-white { background: #f2f2f2; } .zal-white h3 { color: #111; } .zal-white p { color: #444; } .zal-black { background: #0a0a0a; border: 1px solid #1c1c1c; } .zal-black h3 { color: #fff; } .zal-black p { color: #b8b8b8; } .zal-color { background: linear-gradient(135deg, #ffd3ee 0%, #ff9ed1 18%, #dda6ff 38%, #aeb7ff 58%, #8de8ff 78%, #ffe27a 100%); } .zal-color h3 { color: #1a1a1a; } .zal-color p { color: #1a1a1a; } @media (hover: hover) { .zal-card:hover .zal-photo img { filter: grayscale(0); transform: scale(1.04); } .zal-card:hover { transform: translateY(-4px); box-shadow: 0 12px 30px rgba(0,0,0,.35); } } .zal-card.in-view .zal-photo img { filter: grayscale(0); } @media (max-width: 767.98px) { .zal-grid { display: flex; grid-template-columns: none; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: thin; scroll-padding-left: 16px; padding: 4px 16px 14px 2px; margin-right: -16px; } .zal-grid::-webkit-scrollbar { height: 5px; } .zal-grid::-webkit-scrollbar-thumb { background: #2a2a2a; border-radius: 3px; } .zal-card { flex: 0 0 92%; scroll-snap-align: start; } } @media (prefers-reduced-motion: reduce) { .zal-card, .zal-photo img { transition: none; } .zal-card:hover { transform: none; } .zal-card:hover .zal-photo img { transform: none; } } .zal-color .rainbow { font-weight: 800; } .zal-color .rainbow span { text-shadow: 0 1px 2px rgba(0,0,0,.18); } .zal-color .rainbow span:nth-child(1) { color: #ff2e93; } .zal-color .rainbow span:nth-child(2) { color: #ff4db8; } .zal-color .rainbow span:nth-child(3) { color: #b93bff; } .zal-color .rainbow span:nth-child(4) { color: #7a4bff; } .zal-color .rainbow span:nth-child(5) { color: #2f7bff; } .zal-color .rainbow span:nth-child(6) { color: #0aa6d6; } .zal-color .rainbow span:nth-child(7) { color: #12b39a; } .zal-color .rainbow span:nth-child(8) { color: #2fa832; } .zal-color .rainbow span:nth-child(9) { color: #d69a00; } /* ===================== Чек-лист (советы) ===================== */ .article-body ul.checklist { margin: 0 0 22px; padding: 0; list-style: none; } .article-body ul.checklist li { position: relative; padding: 0 0 0 30px; margin: 0 0 12px; font-size: 16px; line-height: 1.7; color: #dcdcdc; overflow-wrap: break-word; } .article-body ul.checklist li::before { content: "\2713"; font-family: inherit; font-weight: 700; position: absolute; left: 0; top: 0; color: #BFD730; font-size: 18px; line-height: 1.6; } /* ===================== Галерея ===================== */ .gallery-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 14px 0 8px; } @media (max-width: 767.98px) { .gallery-grid { display: flex; grid-template-columns: none; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: thin; scroll-padding-left: 16px; padding: 4px 16px 14px 2px; margin-right: -16px; } .gallery-grid::-webkit-scrollbar { height: 5px; } .gallery-grid::-webkit-scrollbar-thumb { background: #2a2a2a; border-radius: 3px; } .gallery-grid figure { flex: 0 0 92%; scroll-snap-align: start; } } .gallery-grid figure { min-width: 0; margin: 0; overflow: hidden; border-radius: 8px; position: relative; aspect-ratio: 3 / 4; background: #111; } .gallery-grid img { width: 100%; height: 100%; object-fit: cover; display: block; background: #111; filter: grayscale(1); transition: transform .6s cubic-bezier(.2, .8, .2, 1), filter .35s ease; } .gallery-grid figure.in-view img { filter: grayscale(0); } @media (hover: hover) { .gallery-grid figure:hover img { transform: scale(1.06); filter: grayscale(0); } } @media (prefers-reduced-motion: reduce) { .gallery-grid img { transition: none; } .gallery-grid figure:hover img { transform: none; } } /* ===================== Отзывы ===================== */ .rev-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin: 26px 0 14px; } .rev-card { margin: 0; min-width: 0; border: 1px solid #1c1c1c; border-radius: 12px; background: #0b0b0b; box-shadow: 0 4px 14px rgba(0,0,0,.18); padding: 24px 24px 20px; transition: border-color .2s ease, transform .2s ease; } .rev-card:hover { border-color: #BFD730; transform: translateY(-3px); } .rev-stars { color: #BFD730; font-size: 14px; letter-spacing: 1px; margin-bottom: 12px; } .rev-card blockquote { margin: 0 0 14px; padding: 0; border: 0; font-family: 'Raleway', sans-serif; font-size: 15px; line-height: 1.65; color: #e0e0e0; font-style: normal; overflow-wrap: break-word; } .rev-meta { display: flex; flex-direction: column; gap: 3px; padding-top: 12px; border-top: 1px solid #1a1a1a; } .rev-name { font-family: 'Oswald', sans-serif; font-weight: 700; font-style: normal; text-transform: uppercase; letter-spacing: .04em; font-size: 14px; color: #fff; } .rev-lvl { font-family: 'Raleway', sans-serif; font-size: 13px; color: #8a8a8a; } @media (max-width: 767.98px) { .rev-grid { display: flex; grid-template-columns: none; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: thin; scroll-padding-left: 16px; padding: 4px 16px 14px 2px; margin-right: -16px; } .rev-grid::-webkit-scrollbar { height: 5px; } .rev-grid::-webkit-scrollbar-thumb { background: #2a2a2a; border-radius: 3px; } .rev-card { flex: 0 0 92%; scroll-snap-align: start; } } @media (hover: none) { .rev-card:hover { transform: none; } } @media (prefers-reduced-motion: reduce) { .rev-card { transition: none; } .rev-card:hover { transform: none; } } /* ===================== Блок покупки тарифов ===================== */ .buy-head{ margin:0 0 4px; } .buy-block { margin: 30px 0 8px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; } .buy-card { position:relative; min-width:0; display:flex; flex-direction:column; border:1px solid #1f1f1f; border-radius:10px; padding:26px 22px; background:#0c0c0c; text-align:center; transition:border-color .3s ease, transform .3s ease, box-shadow .3s ease; } .buy-card .tariff-name { font-family: 'Oswald', sans-serif; font-weight: 700; font-size: 16px; letter-spacing: .08em; text-transform: uppercase; color: #fff; overflow-wrap: break-word; } .buy-card .tariff-price { display: flex; align-items: baseline; justify-content: center; gap: 1px; line-height: 1; margin: 16px 0 12px; } .buy-card .tariff-price i { font-size: 34px; color: #BFD730; } .buy-card .tariff-price .fa-ruble-sign { font-size: 29px; margin-left: 7px; } .buy-card .tariff-desc { flex: 1 1 auto; font-size: 13.5px; color: #9a9a9a; line-height: 1.6; overflow-wrap: break-word; } .buy-card .c-btn { align-self: center; margin-top: 18px; } .buy-card:active { transform: scale(0.98); } @media (hover: hover) { .buy-card:hover { border-color: #BFD730; transform: translateY(-4px); box-shadow: 0 10px 30px rgba(191,215,48,.10); } } .buy-card--popular { border-color: #BFD730; position: relative; } .buy-badge { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); background: #BFD730; color: #111; font-family: 'Oswald', sans-serif; font-weight: 700; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; padding: 4px 12px; border-radius: 20px; white-space: nowrap; box-shadow: 0 4px 12px rgba(191,215,48,.3); } .ceny-sub { margin: -6px 0 22px; font-family: 'Raleway', sans-serif; font-size: 15px; color: #b8b8b8; } .ceny-sub b { color: #BFD730; font-weight: 700; } .ceny-sub .dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #BFD730; margin-right: 8px; vertical-align: middle; box-shadow: 0 0 0 0 rgba(191,215,48,.6); animation: slotPulse 2s infinite; } @keyframes slotPulse { 0% { box-shadow: 0 0 0 0 rgba(191,215,48,.5); } 70% { box-shadow: 0 0 0 8px rgba(191,215,48,0); } 100% { box-shadow: 0 0 0 0 rgba(191,215,48,0); } } @media (prefers-reduced-motion: reduce) { .ceny-sub .dot { animation: none; } } .guarantee { position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; gap: 14px; min-width: 0; border: 1px solid #2f3a12; border-radius: 12px; padding: 20px 24px; margin: 24px 0; font-family: 'Raleway', sans-serif; font-size: 16px; line-height: 1.5; color: #eaeaea; background: #0e120a; text-align: center; } .guarantee::before { content: ""; position: absolute; top: 0; left: -60%; width: 45%; height: 100%; background: linear-gradient(100deg, transparent 0%, rgba(191,215,48,.18) 50%, transparent 100%); transform: skewX(-18deg); animation: guaranteeSweep 3.5s ease-in-out infinite; } .guarantee > * { position: relative; z-index: 1; } .guarantee i { color: #BFD730; font-size: 26px; flex-shrink: 0; filter: drop-shadow(0 0 6px rgba(191,215,48,.5)); } .guarantee p { margin: 0; overflow-wrap: break-word; } .guarantee b { color: #BFD730; font-weight: 700; } @keyframes guaranteeSweep { 0% { left: -60%; } 60%, 100% { left: 120%; } } @media (max-width: 767.98px) { .guarantee { gap: 12px; padding: 16px 18px; font-size: 15px; } .guarantee i { font-size: 24px; } } @media (prefers-reduced-motion: reduce) { .guarantee::before { animation: none; display: none; } } @media (max-width: 767.98px) { .buy-block { display: flex; grid-template-columns: none; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: 12px; -webkit-overflow-scrolling: touch; scrollbar-width: thin; padding: 22px 12px 14px; } .buy-block::-webkit-scrollbar { height: 5px; } .buy-block::-webkit-scrollbar-thumb { background: #2a2a2a; border-radius: 3px; } .buy-card { flex: 0 0 76%; scroll-snap-align: center; } .buy-card--popular { transform: scale(1.04); } } /* ===================== Адрес ===================== */ .address-block { margin: 46px 0 8px; border: 1px solid #1c1c1c; border-radius: 10px; overflow: hidden; background: #0a0a0a; display: grid; grid-template-columns: 1fr 1fr; } @media (max-width: 767.98px) { .address-block { grid-template-columns: 1fr; } } .address-info { padding: 30px; } .address-info p { font-size: 15.5px; color: #cfcfcf; line-height: 1.8; margin: 0 0 10px; } .address-info p:last-child { margin-bottom: 0; } .address-info .addr-line { font-family: 'Oswald', sans-serif; font-size: 20px; letter-spacing: .04em; color: #fff; } .address-map { overflow: hidden; } .address-map iframe { display: block; width: 100%; height: 100%; min-height: 340px; border: 0; filter: grayscale(1) contrast(.95); transition: filter .4s ease; } @media (hover: hover) { .address-map:hover iframe { filter: grayscale(0) contrast(1); } } @media (hover: none) { .address-map iframe { filter: none; } } .post-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px; margin: 30px 0 0; padding: 22px 24px; border: 1px solid #1c1c1c; border-radius: 14px; background: #0b0b0b; } .post-cta .share-row { display: flex; align-items: center; gap: 12px; margin: 0; } .post-cta .share-label, .post-cta .qc-label { font-family: 'Oswald', sans-serif; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; font-size: 13px; color: #8a8a8a; white-space: nowrap; } .post-cta .qc-label { color: #fff; } .post-cta .share-row a { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; border: 1px solid #2a2a2a; color: #e6e6e6; font-size: 16px; transition: border-color .2s ease, color .2s ease; -webkit-tap-highlight-color: transparent; } .post-cta .share-row a:hover { border-color: #BFD730; color: #BFD730; } .post-cta .quick-contact { display: flex; align-items: center; gap: 12px; margin: 0; padding: 0; border: 0; background: none; flex-wrap: wrap; } .post-cta .qc-btn { display: inline-flex; align-items: center; gap: 8px; font-family: 'Raleway', sans-serif; font-weight: 600; font-size: 14px; text-decoration: none; padding: 9px 16px; border-radius: 8px; border: 1px solid #2a2a2a; color: #e6e6e6; transition: border-color .2s ease, color .2s ease; -webkit-tap-highlight-color: transparent; } .post-cta .qc-btn:hover { border-color: #BFD730; color: #BFD730; } .post-cta .qc-btn i { color: #BFD730; } @media (max-width: 767.98px) { .post-cta { flex-direction: column; align-items: stretch; gap: 22px; padding: 22px 16px; } .post-cta .share-row { flex-direction: column; align-items: center; gap: 12px; } .post-cta .share-label { text-align: center; } .post-cta .share-links { display: flex; justify-content: center; gap: 10px; width: 100%; } .post-cta .share-row a { width: auto; height: auto; flex: 1 1 0; max-width: 120px; border-radius: 8px; padding: 11px 0; } .post-cta .quick-contact { flex-direction: column; align-items: center; gap: 12px; } .post-cta .qc-label { text-align: center; } .post-cta .qc-buttons { display: flex; justify-content: center; gap: 10px; width: 100%; } .post-cta .qc-btn { flex: 1 1 0; justify-content: center; } .address-info .cta-inline--left { width: 100%; } .address-info .cta-inline--left .c-btn { display: flex; width: 100%; justify-content: center; } } .address-info .c-btn, .post-cta a { -webkit-tap-highlight-color: transparent; } .address-info .c-btn:focus-visible, .post-cta a:focus-visible { outline: 2px solid #BFD730; outline-offset: 2px; } .cta-inline { text-align: center; margin: 40px 0 0; } .cta-inline--left { text-align: left; } /* ===================== Видимый FAQ на детальной ===================== */ .article-faq { margin: 40px 0; min-width: 0; } .article-faq h2 { position: relative; font-family: 'Oswald', sans-serif; font-weight: 700; font-size: clamp(20px, 2.4vw, 28px); text-transform: uppercase; letter-spacing: .01em; margin: 0 0 18px; padding-bottom: 14px; color: #fff; } .article-faq h2::after { content: ""; position: absolute; left: 0; bottom: 0; width: 54px; height: 3px; background: #BFD730; } .article-faq .faq-a { padding: 0 0 18px; font-family: 'Raleway', sans-serif; font-size: 15px; line-height: 1.7; color: #b8b8b8; overflow-wrap: break-word; } .article-faq .faq-sub { font-family: 'Raleway', sans-serif; font-size: 16px; color: #b8b8b8; margin: 0 0 26px; } .article-faq .faq-acc { border-top: 1px solid #1c1c1c; } .article-faq .faq-item { border-bottom: 1px solid #1c1c1c; min-width: 0; } .article-faq .faq-item summary { list-style: none; cursor: pointer; position: relative; padding: 16px 34px 16px 0; font-family: 'Oswald', sans-serif; font-size: 16px; letter-spacing: .01em; text-transform: uppercase; color: #eaeaea; transition: color .2s ease; user-select: none; -webkit-tap-highlight-color: transparent; overflow-wrap: break-word; } .article-faq .faq-item summary::-webkit-details-marker { display: none; } .article-faq .faq-item summary::after { content: "+"; position: absolute; right: 4px; top: 50%; transform: translateY(-50%); font-size: 22px; line-height: 1; color: #BFD730; } .article-faq .faq-item[open] summary::after { content: "\2212"; } .article-faq .faq-item summary:focus-visible { outline: 2px solid #BFD730; outline-offset: 3px; } @media (hover: hover) { .article-faq .faq-item summary:hover { color: #BFD730; } } /* ===================== Итог статьи ===================== */ .article-conclusion{position:relative;overflow:hidden;min-width:0;margin:clamp(48px,7vw,88px) 0 36px;padding:clamp(30px,4vw,46px) clamp(24px,3vw,44px);border:1px solid #1c1c1c;border-radius:18px;background:radial-gradient(130% 120% at 0% 0%,#14140f 0%,#0a0a0a 55%,#070707 100%);box-shadow:0 18px 44px -20px rgba(191,215,48,.22);} .article-conclusion::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:#BFD730;} .article-conclusion h2{margin:0 0 18px;overflow-wrap:break-word;} .article-conclusion > p{margin:0 0 14px;overflow-wrap:break-word;} .article-conclusion__bottom{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:34px;margin-top:28px;} .article-conclusion .conclusion-highlight{display:flex;align-items:center;gap:12px;min-width:0;height:64px;max-width:100%;margin:0;padding:0 22px;border:1px solid rgba(191,215,48,.35);border-radius:12px;background:rgba(191,215,48,.06);font-family:'Raleway',sans-serif;font-size:clamp(15px,1.6vw,17px);line-height:1.4;color:#eaeaea;overflow-wrap:break-word;box-sizing:border-box;} .article-conclusion .conclusion-highlight i{flex:0 0 auto;color:#BFD730;font-size:17px;} .article-conclusion .conclusion-highlight span{min-width:0;overflow-wrap:break-word;} .article-conclusion .conclusion-highlight b{font-family:'Oswald',sans-serif;font-weight:700;letter-spacing:.02em;color:#BFD730;} .article-conclusion__action{display:flex;align-items:end;justify-content:flex-end;min-width:0;margin:0;} .article-conclusion__btn{display:inline-flex!important;align-items:center!important;justify-content:center!important;width:auto!important;height:64px!important;min-height:64px!important;margin:0!important;padding:0 36px!important;box-sizing:border-box!important;line-height:1!important;white-space:nowrap!important;} .article-conclusion__btn span{display:block;line-height:1!important;} .article-conclusion__btn:focus-visible{outline:2px solid #BFD730;outline-offset:3px;} @media (max-width:767.98px){ .article-conclusion{padding:28px 20px 28px 24px;border-radius:14px;} .article-conclusion__bottom{display:flex;flex-direction:column;align-items:stretch;gap:18px;margin-top:24px;} .article-conclusion .conclusion-highlight{height:auto;min-height:56px;align-items:flex-start;padding:14px 16px;} .article-conclusion__action{width:100%;justify-content:stretch;} .article-conclusion__btn{display:flex!important;width:100%!important;height:56px!important;min-height:56px!important;padding:0 18px!important;white-space:normal!important;text-align:center!important;} } /* ===================== Читайте также ===================== */ .related { margin: 70px 0 0; } .related-h2 { position: relative; font-family: 'Oswald', sans-serif; font-weight: 700; font-size: 26px; letter-spacing: .05em; text-transform: uppercase; color: #fff; margin: 0 0 18px; padding-bottom: 14px; } .related-h2::after { content: ""; position: absolute; left: 0; bottom: 0; width: 54px; height: 3px; background: #BFD730; } .related-sub { font-family: 'Raleway', sans-serif; font-size: 16px; color: #b8b8b8; margin: 0 0 26px; overflow-wrap: break-word; } .related-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; } .related-card { display: block; min-width: 0; border: 1px solid #1c1c1c; border-radius: 10px; overflow: hidden; background: #0c0c0c; text-decoration: none; transition: border-color .3s ease, transform .3s ease; } .article-body a.related-card { text-decoration: none; } .related-card:hover { border-color: #BFD730; transform: translateY(-4px); } .related-card:focus-visible { outline: 2px solid #BFD730; outline-offset: 3px; } .related-card .rc-img { aspect-ratio: 1 / 1; overflow: hidden; background: #151515; } .related-card .rc-img img { width: 100%; height: 100%; object-fit: cover; display: block; } .related-card .rc-body { padding: 18px; min-width: 0; } .related-card .rc-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-width: 0; } .related-card .rc-cat { font-family: 'Oswald', sans-serif; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: #BFD730; } .related-card .rc-meta { font-family: 'Raleway', sans-serif; font-size: 12px; color: #8a8a8a; white-space: nowrap; } .related-card .rc-meta i { color: #BFD730; margin: 0 3px 0 6px; font-size: 11px; } .related-card .rc-meta i:first-child { margin-left: 0; } .related-card .rc-title { font-family: 'Oswald', sans-serif; font-weight: 700; font-size: 17px; line-height: 1.3; color: #fff; margin: 8px 0 0; text-transform: uppercase; letter-spacing: .02em; overflow-wrap: break-word; } @media (max-width: 767.98px) { .related-grid { display: flex; grid-template-columns: none; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: thin; scroll-padding-left: 16px; padding: 4px 16px 14px 2px; margin-right: -16px; } .related-grid::-webkit-scrollbar { height: 5px; } .related-grid::-webkit-scrollbar-thumb { background: #2a2a2a; border-radius: 3px; } .related-card { flex: 0 0 82%; scroll-snap-align: start; } } @media (prefers-reduced-motion: reduce) { .related-card { transition: none; } .related-card:hover { transform: none; } }