/* ============================================================ Creatico — лендинг «Разработка сайта»: стили Извлечены из Hero.dc.html (дизайн-canvas), 1:1 по значениям. Шрифты подключить отдельно (Google Fonts, см. README): Unbounded:wght@400;500;600;700 и Onest:wght@400;500;600 Все стили заскоуплены под #creatico-landing — оборачивающий контейнер в index.html. Так стили не затрагивают остальной сайт. ============================================================ */ /* Элементы сворачивания длинных кейсов существуют только для mobile-логики (см. @media max-width:767px и script.js) — по умолчанию (в т.ч. на десктопе, где своего display для них никто не задаёт) всегда скрыты. */ #creatico-landing .cr-case-fade, #creatico-landing .cr-case-more { display: none; } /* Вертикальный timeline процесса — только для mobile (см. @media max-width:767px); по умолчанию скрыт, чтобы на десктопе никогда не показывались оба варианта разом. */ #creatico-landing .cr-ptl { display: none; } #creatico-landing { width: 100%; margin: 0; background: #1d1d1f; color: #fff; font-family: 'Avenir Next', 'Onest', system-ui, sans-serif; -webkit-font-smoothing: antialiased; --cr-page-gutter: max(24px, calc((100% - 1200px) / 2)); } #creatico-landing .cr-container { width: calc(100% - 48px); max-width: 1200px; margin-inline: auto; box-sizing: border-box; } #creatico-landing a { color: #F93762; text-decoration: none; } #creatico-landing a:hover { color: #ff5f82; } @keyframes cr-unfold { 0%, 16% { transform: translateY(-330px) rotateX(60deg) rotateZ(-45deg); opacity: 1; } 100% { transform: translateY(var(--y)) rotateX(60deg) rotateZ(-45deg); opacity: 1; } } @keyframes cr-content-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } @keyframes cr-fade { from { opacity: 0; transform: translateX(-10px); } to { opacity: var(--fade-opacity, 1); transform: translateX(var(--fade-shift, 0px)); } } @keyframes cr-base-in { from { opacity: 0; filter: saturate(0.5); box-shadow: none; } to { opacity: var(--base-opacity, 1); filter: saturate(1); box-shadow: 0 42px 90px -24px rgba(249,55,98,0.78), inset 0 0 0 1px rgba(255,255,255,0.1); } } @keyframes cr-glow { 0%, 100% { opacity: 0.55; } 50% { opacity: 0.9; } } @keyframes cr-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } } #creatico-landing [style*="cursor: pointer"], #creatico-landing [style*="transition:"], #creatico-landing div[style*="border: 1px"], #creatico-landing span[style*="border: 1px"], #creatico-landing a[style*="border-bottom"] { transition: color 0.32s cubic-bezier(0.22, 1, 0.36, 1), background-color 0.32s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.32s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.32s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.32s cubic-bezier(0.22, 1, 0.36, 1), transform 0.32s cubic-bezier(0.22, 1, 0.36, 1), filter 0.32s cubic-bezier(0.22, 1, 0.36, 1) !important; } #creatico-landing .cr-track { animation: cr-marquee 82s linear infinite; } #creatico-landing .cr-marquee:hover .cr-track { animation-play-state: paused; } /* лента логотипов перетаскивается пальцем/мышью — JS берёт анимацию под свой контроль */ #creatico-landing.cr-marquee-js .cr-track { animation: none !important; } #creatico-landing .cr-marquee { cursor: grab; touch-action: pan-y; -webkit-user-select: none; user-select: none; } #creatico-landing .cr-marquee.is-dragging { cursor: grabbing; } #creatico-landing .cr-marquee.is-dragging .cr-track { transition: none !important; } #creatico-landing .cr-client-item { transition: transform 220ms ease; } #creatico-landing .cr-client-mark { opacity: 0.55; filter: saturate(0.68) brightness(0.94); transition: opacity 220ms ease, filter 220ms ease; } #creatico-landing .cr-client-caption { color: #9a9a9f; transition: color 220ms ease; } #creatico-landing .cr-client-item:hover { transform: translateY(-2px); } #creatico-landing .cr-client-item:hover .cr-client-mark { opacity: 1; filter: saturate(1) brightness(1); } #creatico-landing .cr-client-item:hover .cr-client-caption { color: #747479; } #creatico-landing .cr-situation-head { position: relative; max-width: 820px; margin-bottom: 32px; } #creatico-landing .cr-situation-switch { position: relative; display: grid; grid-template-columns: 1fr 1fr; width: 560px; height: 52px; margin-bottom: 32px; padding: 3px; border-radius: 28px; background: #29292c; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.1); box-sizing: border-box; } #creatico-landing .cr-situation-slider { position: absolute; top: 3px; bottom: 3px; left: 3px; width: calc(50% - 3px); border-radius: 24px; background: #b7c8ad; box-shadow: 0 6px 20px rgba(171,189,162,0.2); transform: translateX(var(--situation-x, 0%)); transition: transform 280ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 280ms ease; will-change: transform; } #creatico-landing .cr-situation-option { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; padding: 0 18px; color: rgba(255,255,255,0.48); font: 600 12px/1 'Avenir Next', 'Onest', system-ui, sans-serif; letter-spacing: 0.055em; cursor: pointer; transition: color 280ms ease; user-select: none; } #creatico-landing .cr-situation-option[aria-pressed="true"] { color: #1d1d1f; } #creatico-landing .cr-situation-option:focus-visible { outline: 2px solid #F93762; outline-offset: -4px; border-radius: 24px; } #creatico-landing .cr-situation-panels, #creatico-landing .cr-situation-ctas { position: relative; } #creatico-landing .cr-situation-grid { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: 20px; align-items: stretch; } @keyframes cr-situation-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } #creatico-landing .cr-situation-card { min-height: 268px; display: flex; flex-direction: column; border-radius: 18px; border: 1px solid rgba(255,255,255,0.1); background: #29292c; overflow: hidden; animation: cr-situation-in 280ms cubic-bezier(0.22, 1, 0.36, 1) both; transition: transform 200ms ease, border-color 200ms ease, background-color 200ms ease, box-shadow 200ms ease !important; } #creatico-landing .cr-situation-card:hover { transform: translateY(-3px); background: #2d2d30; border-color: rgba(255,255,255,0.19); box-shadow: 0 14px 34px rgba(0,0,0,0.2), 0 0 24px rgba(249,55,98,0.035); } #creatico-landing .cr-situation-card-main { min-height: 137px; display: flex; flex-direction: column; gap: 9px; padding: 17px 26px 14px; box-sizing: border-box; } #creatico-landing .cr-situation-card-mark { width: 24px; height: 2px; flex: none; border-radius: 2px; background: #F93762; } #creatico-landing .cr-situation-card h3 { margin: 0; font-family: 'Unbounded', sans-serif; font-size: 19px; font-weight: 600; line-height: 1.24; letter-spacing: -0.015em; color: #fff; text-wrap: balance; } #creatico-landing .cr-situation-card p { margin: 0; font-size: 14px; font-weight: 400; line-height: 1.5; color: rgba(255,255,255,0.54); text-wrap: pretty; } #creatico-landing .cr-situation-solution { flex: 1; display: flex; flex-direction: column; gap: 7px; padding: 14px 26px 16px; border-top: 1px solid rgba(255,255,255,0.055); background: #323237; } #creatico-landing .cr-situation-solution-label { font-size: 11px; font-weight: 650; letter-spacing: 0.09em; text-transform: uppercase; color: #ff416b; } #creatico-landing .cr-situation-solution-copy { font-size: 14px; font-weight: 500; line-height: 1.48; color: rgba(255,255,255,0.86); text-wrap: pretty; } #creatico-landing .cr-situation-ctas { min-height: 56px; margin-top: 38px; } #creatico-landing .cr-situation-cta { position: relative; min-height: 56px; display: flex; align-items: center; gap: 20px; animation: cr-situation-in 240ms cubic-bezier(0.22, 1, 0.36, 1); } #creatico-landing .cr-situation-button { display: inline-flex; flex: none; align-items: center; gap: 10px; height: 56px; padding: 0 28px; border: 0; border-radius: 14px; background: #F93762; color: #fff; font: 600 16px/1 'Avenir Next', 'Onest', system-ui, sans-serif; cursor: pointer; box-shadow: 0 12px 40px -10px rgba(249,55,98,0.7); } #creatico-landing .cr-situation-button:hover { background: #ff4d75; transform: translateY(-1px); } #creatico-landing .cr-situation-cta-copy { font-size: 15px; line-height: 1.45; color: rgba(255,255,255,0.68); max-width: 490px; } #creatico-landing [hidden] { display: none !important; } #creatico-landing .cr-review-letter { transition: transform 210ms ease, box-shadow 210ms ease, border-color 210ms ease !important; } #creatico-landing .cr-review-letter--left { transform: rotate(-2deg); } #creatico-landing .cr-review-letter--right { transform: rotate(2deg); } #creatico-landing .cr-review-letter:hover { transform: translateY(-3px) rotate(0); border-color: rgba(249,55,98,.28) !important; box-shadow: 0 20px 42px rgba(29,29,31,.13) !important; } #creatico-landing .cr-models-section { width: 100%; padding: 104px var(--cr-page-gutter) 112px; box-sizing: border-box; overflow: hidden; background: #202023; color: #fff; font-family: 'Avenir Next', 'Onest', system-ui, sans-serif; } #creatico-landing .cr-models-intro { width: 52%; max-width: 620px; margin-bottom: 52px; } #creatico-landing .cr-models-eyebrow { margin-bottom: 16px; color: #F93762; font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; } #creatico-landing .cr-models-title { margin: 0; font-family: 'Unbounded', sans-serif; font-size: 44px; font-weight: 600; line-height: 1.12; letter-spacing: -.02em; text-wrap: balance; } #creatico-landing .cr-models-subtitle { margin: 18px 0 0; color: rgba(255,255,255,.61); font-size: 17px; line-height: 1.55; text-wrap: pretty; } #creatico-landing .cr-models-pair { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 28px; } #creatico-landing .cr-model-card { min-height: 570px; position: relative; display: flex; flex-direction: column; padding: 30px; border: 1px solid rgba(255,255,255,.1); border-radius: 22px; box-sizing: border-box; overflow: hidden; background: #29292d; } #creatico-landing .cr-model-card--system { border-color: rgba(183,200,173,.3); background: linear-gradient(145deg,#2b2d2c,#29292d 62%); box-shadow: 0 24px 70px rgba(0,0,0,.2); } #creatico-landing .cr-model-kicker { color: rgba(255,255,255,.48); font-size: 11px; font-weight: 650; letter-spacing: .1em; text-transform: uppercase; } #creatico-landing .cr-model-name { margin-top: 8px; font-family: 'Unbounded', sans-serif; font-size: 24px; font-weight: 600; line-height: 1.2; } #creatico-landing .cr-fragments { height: 330px; position: relative; margin: 24px 0 20px; } #creatico-landing .cr-fragments::before { content: ''; position: absolute; inset: 44px 55px 42px; border: 1px dashed rgba(255,255,255,.11); border-radius: 50%; } #creatico-landing .cr-fragment { position: absolute; width: 208px; min-height: 68px; padding: 13px 15px; border: 1px solid rgba(255,255,255,.11); border-radius: 12px; box-sizing: border-box; background: #343439; transition: border-color .2s ease, background .2s ease, transform .2s ease !important; animation: cr-piece-in .72s cubic-bezier(.22,1,.36,1) both; } #creatico-landing .cr-fragment:hover { border-color: rgba(255,255,255,.22); background: #39393e; transform: translateY(-2px); } #creatico-landing .cr-fragment:nth-child(1) {left:0;top:5px} #creatico-landing .cr-fragment:nth-child(2) {right:4px;top:30px} #creatico-landing .cr-fragment:nth-child(3) {left:45px;top:118px} #creatico-landing .cr-fragment:nth-child(4) {right:0;top:142px} #creatico-landing .cr-fragment:nth-child(5) {left:5px;bottom:8px} #creatico-landing .cr-fragment:nth-child(6) {right:42px;bottom:0} #creatico-landing .cr-fragment:nth-child(2), #creatico-landing .cr-system-node:nth-child(2) {animation-delay:70ms} #creatico-landing .cr-fragment:nth-child(3), #creatico-landing .cr-system-node:nth-child(3) {animation-delay:120ms} #creatico-landing .cr-fragment:nth-child(4), #creatico-landing .cr-system-node:nth-child(4) {animation-delay:170ms} #creatico-landing .cr-fragment:nth-child(5), #creatico-landing .cr-system-node:nth-child(5) {animation-delay:220ms} #creatico-landing .cr-fragment:nth-child(6), #creatico-landing .cr-system-node:nth-child(6) {animation-delay:270ms} #creatico-landing .cr-node-title { display:block; color:#fff; font-size:14px; font-weight:600; line-height:1.25; } #creatico-landing .cr-node-meta { display:block; margin-top:5px; color:rgba(255,255,255,.42); font-size:12px; line-height:1.25; } #creatico-landing .cr-system-map { position: relative; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; margin: 24px 0 20px; padding: 24px; border: 1px solid rgba(183,200,173,.17); border-radius: 18px; background: rgba(183,200,173,.035); } #creatico-landing .cr-system-map::before { content:''; position:absolute; left:50%; top:46px; bottom:46px; width:1px; background:linear-gradient(transparent,rgba(183,200,173,.35),transparent); } #creatico-landing .cr-system-node { position:relative; z-index:1; min-height:76px; padding:14px 15px; border:1px solid rgba(183,200,173,.18); border-radius:12px; box-sizing:border-box; background:#343735; transition:border-color .2s ease,background .2s ease,transform .2s ease !important; animation:cr-system-in .72s cubic-bezier(.22,1,.36,1) both; } #creatico-landing .cr-system-node:hover { transform:translateY(-2px); border-color:rgba(183,200,173,.42); background:#393d3a; } #creatico-landing .cr-system-node .cr-node-meta {color:#b7c8ad} #creatico-landing .cr-system-node:nth-child(6) {border-color:rgba(249,55,98,.34)} #creatico-landing .cr-model-result { margin-top:auto; padding-top:20px; border-top:1px solid rgba(255,255,255,.1); } #creatico-landing .cr-model-result strong {display:block;font-family:'Unbounded',sans-serif;font-size:18px;line-height:1.3} #creatico-landing .cr-model-result span {display:block;margin-top:8px;color:rgba(255,255,255,.5);font-size:14px;line-height:1.45} #creatico-landing .cr-market { margin-top: 88px; padding-top: 80px; border-top: 1px solid rgba(255,255,255,.1); } #creatico-landing .cr-market-head {margin-bottom:34px} #creatico-landing .cr-market-head .cr-models-title {font-size:34px} #creatico-landing .cr-market-table { overflow:hidden; border:1px solid rgba(255,255,255,.1); border-radius:20px; background:#27272b; } #creatico-landing .cr-market-row {display:grid;grid-template-columns:180px repeat(4,minmax(0,1fr));} #creatico-landing .cr-market-row>* {padding:17px 18px;box-sizing:border-box;border-top:1px solid rgba(255,255,255,.075);font-size:14px;line-height:1.4} #creatico-landing .cr-market-row--head>* {min-height:116px;border-top:0;padding-top:22px} #creatico-landing .cr-market-criterion {color:rgba(255,255,255,.77);font-weight:600} #creatico-landing .cr-market-cell {color:rgba(255,255,255,.56)} #creatico-landing .cr-market-brand {background:linear-gradient(90deg,rgba(183,200,173,.09),rgba(249,55,98,.055));color:rgba(255,255,255,.85);font-weight:500} #creatico-landing .cr-market-label {display:block;margin-bottom:9px;color:#b7c8ad;font-size:10px;font-weight:650;letter-spacing:.1em;text-transform:uppercase} #creatico-landing .cr-market-col-title {display:block;font-family:'Unbounded',sans-serif;font-size:15px;font-weight:600;line-height:1.25;color:#fff} #creatico-landing .cr-market-points {display:flex;flex-direction:column;gap:3px;margin-top:10px;color:rgba(255,255,255,.5);font-size:11px} #creatico-landing .cr-market-points span::before {content:'·';margin-right:5px;color:#F93762} #creatico-landing .cr-market-statement {max-width:750px;margin:32px 0 0 auto;padding-left:20px;border-left:2px solid #F93762;color:rgba(255,255,255,.72);font-size:17px;line-height:1.55} #creatico-landing .cr-market-statement strong {color:#fff;font-weight:600} #creatico-landing .cr-models-cta {display:flex;align-items:center;gap:20px;margin-top:42px} #creatico-landing .cr-models-button {display:inline-flex;align-items:center;gap:10px;height:56px;padding:0 28px;border-radius:14px;background:#F93762;color:#fff;font-size:16px;font-weight:600;box-shadow:0 12px 36px -12px rgba(249,55,98,.65)} #creatico-landing .cr-models-cta-copy {max-width:470px;color:rgba(255,255,255,.55);font-size:14px;line-height:1.45} @keyframes cr-piece-in {from{opacity:0;transform:translate(var(--dx,-10px),var(--dy,8px))}to{opacity:1;transform:none}} @keyframes cr-system-in {from{opacity:0;transform:scale(.97) translateY(8px)}to{opacity:1;transform:none}} #creatico-landing .cr-economy-section {width:100%;padding:104px var(--cr-page-gutter) 112px;box-sizing:border-box;overflow:hidden;background:#f3f1ee;color:#1d1d1f;font-family:'Avenir Next','Onest',system-ui,sans-serif} #creatico-landing .cr-economy-intro {max-width:650px;margin-bottom:54px} #creatico-landing .cr-economy-eyebrow {margin-bottom:16px;color:#F93762;font-size:12px;font-weight:650;letter-spacing:.1em;text-transform:uppercase} #creatico-landing .cr-economy-title {margin:0;font-family:'Unbounded',sans-serif;font-size:44px;font-weight:600;line-height:1.11;letter-spacing:-.025em;text-wrap:balance} #creatico-landing .cr-economy-copy {margin:19px 0 0;max-width:640px;color:rgba(29,29,31,.62);font-size:16px;line-height:1.6;text-wrap:pretty} #creatico-landing .cr-cost-flow {position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px} #creatico-landing .cr-cost-flow::before {content:'';position:absolute;left:4%;right:4%;top:46px;height:2px;background:linear-gradient(90deg,rgba(171,189,162,.45),rgba(249,55,98,.65));transform-origin:left;animation:cr-route-in .8s ease both} #creatico-landing .cr-cost-step {--step:#abbda2;position:relative;z-index:1;min-height:355px;display:flex;flex-direction:column;padding:24px;border:1px solid rgba(29,29,31,.1);border-radius:18px;box-sizing:border-box;background:#faf9f7;box-shadow:0 14px 35px rgba(36,31,27,.045);animation:cr-step-in .65s cubic-bezier(.22,1,.36,1) both;transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease!important} #creatico-landing .cr-cost-step:nth-child(2) {--step:#b5ab9f;animation-delay:70ms} #creatico-landing .cr-cost-step:nth-child(3) {--step:#cf7f84;animation-delay:140ms} #creatico-landing .cr-cost-step:nth-child(4) {--step:#F93762;animation-delay:210ms} #creatico-landing .cr-cost-step:hover {transform:translateY(-3px);border-color:rgba(249,55,98,.25);box-shadow:0 18px 42px rgba(36,31,27,.08)} #creatico-landing .cr-cost-num {width:44px;height:44px;display:grid;place-items:center;margin-bottom:28px;border-radius:50%;background:var(--step);color:#fff;font-family:'Unbounded',sans-serif;font-size:13px;font-weight:600;box-shadow:0 0 0 7px #f3f1ee} #creatico-landing .cr-cost-step h3 {margin:0 0 12px;font-family:'Unbounded',sans-serif;font-size:17px;font-weight:600;line-height:1.28;letter-spacing:-.015em} #creatico-landing .cr-cost-step p {margin:0;color:rgba(29,29,31,.57);font-size:14px;line-height:1.5} #creatico-landing .cr-cost-amount {margin-top:auto;padding-top:18px;border-top:1px solid rgba(29,29,31,.09)} #creatico-landing .cr-cost-amount span {display:block;color:rgba(29,29,31,.48);font-size:11px;line-height:1.35} #creatico-landing .cr-cost-amount strong {display:block;margin:4px 0;color:#d92e54;font-family:'Unbounded',sans-serif;font-size:19px;font-weight:600} #creatico-landing .cr-cost-summary {display:grid;grid-template-columns:.85fr 1.15fr;gap:20px;margin-top:24px} #creatico-landing .cr-total {padding:28px 30px;border-radius:18px;background:#242427;color:#fff;animation:cr-step-in .65s ease 300ms both} #creatico-landing .cr-total-label {color:#F93762;font-size:11px;font-weight:650;letter-spacing:.09em;text-transform:uppercase} #creatico-landing .cr-total-value {display:block;margin:7px 0;font-family:'Unbounded',sans-serif;font-size:34px;font-weight:650} #creatico-landing .cr-total p, #creatico-landing .cr-alternative p {margin:0;color:rgba(255,255,255,.57);font-size:14px;line-height:1.5} #creatico-landing .cr-total-note {display:block;margin-top:18px;color:rgba(255,255,255,.38);font-size:11px;line-height:1.45} #creatico-landing .cr-alternative {padding:27px 30px;border:1px solid rgba(171,189,162,.55);border-radius:18px;background:#e8ede5} #creatico-landing .cr-alternative h3 {margin:0 0 16px;font-family:'Unbounded',sans-serif;font-size:20px;line-height:1.3} #creatico-landing .cr-alternative-list {display:flex;flex-wrap:wrap;gap:8px;margin-bottom:18px} #creatico-landing .cr-alternative-list span {padding:8px 11px;border:1px solid rgba(29,29,31,.1);border-radius:8px;background:rgba(255,255,255,.46);color:rgba(29,29,31,.68);font-size:12px;font-weight:600} #creatico-landing .cr-alt-conclusion {color:#1d1d1f!important;font-weight:600} #creatico-landing .cr-economy-cta {display:flex;align-items:center;gap:20px;margin-top:34px} #creatico-landing .cr-economy-button {display:inline-flex;align-items:center;gap:9px;height:56px;padding:0 28px;border-radius:14px;background:#F93762;color:#fff;font-size:16px;font-weight:600;box-shadow:0 12px 35px -12px rgba(249,55,98,.58)} #creatico-landing .cr-economy-cta span {max-width:500px;color:rgba(29,29,31,.54);font-size:14px;line-height:1.45} #creatico-landing .cr-vendor-market {margin-top:90px;padding-top:82px;border-top:1px solid rgba(29,29,31,.12)} #creatico-landing .cr-vendor-head {max-width:680px;margin-bottom:34px} #creatico-landing .cr-vendor-head h3 {margin:0;font-family:'Unbounded',sans-serif;font-size:34px;font-weight:600;line-height:1.2;letter-spacing:-.02em} #creatico-landing .cr-vendor-head p {margin:13px 0 0;color:rgba(29,29,31,.55);font-size:15px;line-height:1.5} #creatico-landing .cr-vendor-table {overflow:hidden;border:1px solid rgba(29,29,31,.11);border-radius:20px;background:#faf9f7;box-shadow:0 18px 48px rgba(36,31,27,.055)} #creatico-landing .cr-vendor-row {display:grid;grid-template-columns:174px repeat(4,minmax(0,1fr));transition:background .18s ease!important} #creatico-landing .cr-vendor-row:hover {background:rgba(171,189,162,.06)} #creatico-landing .cr-vendor-row>* {padding:17px 16px;border-top:1px solid rgba(29,29,31,.075);box-sizing:border-box;color:rgba(29,29,31,.62);font-size:13px;line-height:1.42} #creatico-landing .cr-vendor-row--head>* {min-height:86px;padding-top:23px;border-top:0} #creatico-landing .cr-vendor-row--head strong {font-family:'Unbounded',sans-serif;color:#1d1d1f;font-size:13px;line-height:1.3} #creatico-landing .cr-vendor-criterion {color:#1d1d1f!important;font-weight:600} #creatico-landing .cr-vendor-brand {background:linear-gradient(90deg,rgba(171,189,162,.18),rgba(249,55,98,.075));color:#1d1d1f!important;font-weight:550} #creatico-landing .cr-vendor-label {display:block;margin-bottom:8px;color:#c5274a;font-size:10px;font-weight:650;letter-spacing:.1em;text-transform:uppercase} #creatico-landing .cr-vendor-statement {max-width:780px;margin:30px 0 0 auto;padding:18px 0 18px 22px;border-left:2px solid #F93762;color:rgba(29,29,31,.67);font-size:17px;line-height:1.55} #creatico-landing .cr-vendor-statement strong {color:#1d1d1f} #creatico-landing .cr-vendor-cta {display:flex;align-items:center;gap:20px;margin-top:28px} #creatico-landing .cr-vendor-secondary {display:inline-flex;align-items:center;height:50px;padding:0 23px;border:1px solid rgba(29,29,31,.18);border-radius:13px;color:#1d1d1f;font-size:15px;font-weight:600} #creatico-landing .cr-vendor-cta span {color:rgba(29,29,31,.5);font-size:14px} #creatico-landing .cr-vendor-hint {display:none} @keyframes cr-route-in {from{transform:scaleX(0);opacity:0}to{transform:scaleX(1);opacity:1}} @keyframes cr-step-in {from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}} #creatico-landing .cr-cost-summary {grid-template-columns:repeat(2,minmax(0,1fr));align-items:stretch} #creatico-landing .cr-total {display:flex;flex-direction:column} #creatico-landing .cr-total-note {margin-top:auto;padding-top:18px} #creatico-landing .cr-alternative {display:flex;flex-direction:column;border-color:rgba(137,159,127,.62);background:#dfe8dc;box-shadow:0 16px 38px rgba(74,91,67,.09)} #creatico-landing .cr-alternative h3 {margin-bottom:13px;font-size:17px;text-transform:uppercase;letter-spacing:.01em} #creatico-landing .cr-alt-label {color:rgba(29,29,31,.52);font-size:11px;font-weight:650;letter-spacing:.09em;text-transform:uppercase} #creatico-landing .cr-alt-price {margin:5px 0 8px;font-family:'Unbounded',sans-serif;color:#252a24} #creatico-landing .cr-alt-price strong {font-size:34px;font-weight:650;line-height:1.1} #creatico-landing .cr-alt-copy {max-width:510px;color:rgba(29,29,31,.62)!important} #creatico-landing .cr-alternative-list {gap:7px;margin:17px 0} #creatico-landing .cr-alternative-list span {padding:7px 10px;font-size:11px} #creatico-landing .cr-alt-conclusion {margin-top:auto!important;padding-top:13px;border-top:1px solid rgba(29,29,31,.11);font-weight:650} #creatico-landing .cr-total, #creatico-landing .cr-alternative {padding:24px 28px} #creatico-landing .cr-total-label {display:block;min-height:43px;max-width:360px;line-height:1.35} #creatico-landing .cr-total-value {margin:5px 0 12px} #creatico-landing .cr-total-lead {margin:0 0 9px!important;color:rgba(255,255,255,.64)!important;font-weight:600} #creatico-landing .cr-total-list {display:flex;flex-direction:column;gap:8px} #creatico-landing .cr-total-list span {position:relative;padding-left:14px;color:rgba(255,255,255,.77);font-size:13px;line-height:1.35} #creatico-landing .cr-total-list span::before {content:'';position:absolute;left:0;top:.55em;width:5px;height:2px;border-radius:2px;background:#F93762} #creatico-landing .cr-total-time {display:block;margin-top:15px;color:#ef6684;font-size:14px;font-weight:650;line-height:1.4} #creatico-landing .cr-total-note {margin-top:14px;padding-top:13px;border-top:1px solid rgba(255,255,255,.09)} #creatico-landing .cr-alternative h3 {min-height:43px;margin:0 0 4px} #creatico-landing .cr-alt-price {position:relative;margin:3px 0 13px;padding-bottom:10px} #creatico-landing .cr-alt-price::after {content:'';position:absolute;left:0;bottom:0;width:28px;height:2px;border-radius:2px;background:#F93762} #creatico-landing .cr-alt-price strong {font-size:42px;font-weight:750;letter-spacing:-.035em} #creatico-landing .cr-alt-copy {font-size:15px!important;line-height:1.45!important;color:rgba(29,29,31,.69)!important} #creatico-landing .cr-alternative-list {margin:15px 0 13px} #creatico-landing .cr-alt-conclusion {font-size:15px!important} #creatico-landing .cr-economy-subtitle {margin:19px 0 0;color:rgba(29,29,31,.78);font-size:17px;font-weight:600;line-height:1.5} #creatico-landing .cr-economy-subtitle+.cr-economy-copy {margin-top:11px} #creatico-landing .cr-total-title {min-height:43px;margin:0 0 4px;font-family:'Unbounded',sans-serif;font-size:17px;font-weight:600;line-height:1.3;text-transform:uppercase;letter-spacing:.01em;color:#F93762} #creatico-landing .cr-alt-product {margin-top:1px;color:rgba(29,29,31,.58);font-size:13px;font-weight:650} #creatico-landing .cr-alt-price {display:flex;align-items:baseline;gap:8px} #creatico-landing .cr-alt-price small {font-family:'Avenir Next','Onest',system-ui,sans-serif;color:#252a24;font-size:21px;font-weight:650;line-height:1} #creatico-landing .cr-alt-price strong {white-space:nowrap} #creatico-landing .cr-vendor-market {margin-top:96px;padding-top:86px} #creatico-landing .cr-vendor-head {margin-bottom:38px} #creatico-landing .cr-vendor-table {border-color:rgba(29,29,31,.09);border-radius:24px;background:#fbfaf8;box-shadow:0 24px 70px rgba(36,31,27,.07)} #creatico-landing .cr-vendor-row {grid-template-columns:180px repeat(4,minmax(0,1fr))} #creatico-landing .cr-vendor-row>* {padding:21px 18px;border-top-color:rgba(29,29,31,.065);font-size:13px;line-height:1.48} #creatico-landing .cr-vendor-row>*+* {border-left:1px solid rgba(29,29,31,.035)} #creatico-landing .cr-vendor-row:not(.cr-vendor-row--head):nth-child(odd)>:not(.cr-vendor-brand) {background:rgba(171,189,162,.035)} #creatico-landing .cr-vendor-row:hover {background:transparent} #creatico-landing .cr-vendor-row:not(.cr-vendor-row--head):hover>*:not(.cr-vendor-brand) {background:rgba(171,189,162,.075)} #creatico-landing .cr-vendor-row--head>* {min-height:146px;padding-top:27px;padding-bottom:24px;border-top:0} #creatico-landing .cr-vendor-row--head>*:nth-child(2) {background:rgba(29,29,31,.018)} #creatico-landing .cr-vendor-row--head>*:nth-child(3) {background:rgba(181,171,159,.075)} #creatico-landing .cr-vendor-row--head>*:nth-child(4) {background:rgba(171,189,162,.075)} #creatico-landing .cr-vendor-row--head strong {display:block;font-size:15px;line-height:1.3} #creatico-landing .cr-vendor-head-kicker {display:block;margin-top:10px;color:rgba(29,29,31,.43);font-size:11px;font-weight:500;line-height:1.35} #creatico-landing .cr-vendor-criterion-head {display:flex;align-items:flex-end;color:rgba(29,29,31,.42);font-size:10px;font-weight:650;letter-spacing:.1em;text-transform:uppercase} #creatico-landing .cr-vendor-criterion {color:#252527!important;font-weight:650} #creatico-landing .cr-vendor-brand {position:relative;background:linear-gradient(135deg,rgba(171,189,162,.23),rgba(249,55,98,.09));box-shadow:inset 1px 0 rgba(249,55,98,.1);color:#202124!important;font-weight:620} #creatico-landing .cr-vendor-row--head .cr-vendor-brand {background:linear-gradient(135deg,rgba(171,189,162,.32),rgba(249,55,98,.13))} #creatico-landing .cr-vendor-row--head .cr-vendor-brand strong {font-size:20px;letter-spacing:-.02em} #creatico-landing .cr-vendor-label {margin-bottom:7px;font-size:9px} #creatico-landing .cr-vendor-tags {display:flex;flex-wrap:wrap;gap:5px;margin-top:12px} #creatico-landing .cr-vendor-tags span {padding:4px 6px;border:1px solid rgba(96,113,88,.18);border-radius:6px;background:rgba(255,255,255,.46);color:rgba(29,29,31,.62);font-size:9px;font-weight:600;line-height:1.2} #creatico-landing .cr-vendor-statement {max-width:none;margin:18px 0 0;padding:20px 24px;border:1px solid rgba(249,55,98,.13);border-left:3px solid #F93762;border-radius:0 14px 14px 0;background:linear-gradient(90deg,rgba(249,55,98,.045),rgba(171,189,162,.065));color:rgba(29,29,31,.72);font-size:16px;line-height:1.5} #creatico-landing .cr-vendor-cta {gap:24px;margin-top:38px} #creatico-landing .cr-vendor-cta>span {max-width:530px;color:rgba(29,29,31,.64);font-size:14px;line-height:1.5} #creatico-landing .cr-vendor-head p {max-width:620px;color:rgba(29,29,31,.5)} #creatico-landing .cr-vendor-row>* {padding-top:24px;padding-bottom:24px} #creatico-landing .cr-vendor-row--head>* {min-height:158px;padding-top:30px;padding-bottom:27px} #creatico-landing .cr-vendor-row--head .cr-vendor-brand {background:#f5ccd8;box-shadow:inset 1px 0 rgba(249,55,98,.16),inset 0 -1px rgba(249,55,98,.12)} #creatico-landing .cr-vendor-brand {background:rgba(249,55,98,.035);box-shadow:inset 1px 0 rgba(249,55,98,.11);font-weight:600} #creatico-landing .cr-vendor-row:not(.cr-vendor-row--head):nth-child(odd)>.cr-vendor-brand {background:rgba(249,55,98,.055)} #creatico-landing .cr-vendor-row:not(.cr-vendor-row--head):hover>.cr-vendor-brand {background:rgba(249,55,98,.075)} #creatico-landing .cr-vendor-logo {display:inline-block;font-family:'Unbounded',sans-serif;color:#1d1d1f;font-size:22px;font-weight:700;line-height:1;letter-spacing:-.045em} #creatico-landing .cr-vendor-logo i {color:#F93762;font-style:normal} #creatico-landing .cr-vendor-tags {margin-top:15px} #creatico-landing .cr-vendor-tags span {border-color:rgba(29,29,31,.1);background:rgba(255,255,255,.62);color:rgba(29,29,31,.66)} #creatico-landing .cr-vendor-statement {margin-top:14px} #creatico-landing .cr-vendor-cta {margin-top:34px} #creatico-landing .cr-vendor-row {grid-template-columns:192px repeat(4,minmax(0,1fr))} #creatico-landing .cr-vendor-row>* {padding:14px 17px;font-size:14px;line-height:1.4} #creatico-landing .cr-vendor-row--head>* {min-height:112px;padding-top:19px;padding-bottom:17px} #creatico-landing .cr-vendor-row--head strong {font-size:18px;line-height:1.2} #creatico-landing .cr-vendor-head-kicker {margin-top:7px;font-size:12px;line-height:1.3} #creatico-landing .cr-vendor-criterion {font-size:15px!important;font-weight:650;line-height:1.35} #creatico-landing .cr-vendor-row:not(.cr-vendor-row--head)>.cr-vendor-brand {font-weight:650} #creatico-landing .cr-vendor-row--head .cr-vendor-brand {background:#F93762;box-shadow:inset 1px 0 rgba(173,18,53,.16),inset 0 -1px rgba(173,18,53,.18)} #creatico-landing .cr-vendor-logo {color:#fff;font-size:23px} #creatico-landing .cr-vendor-logo i {color:#fff} #creatico-landing .cr-vendor-tags {gap:4px;margin-top:10px} #creatico-landing .cr-vendor-tags span {padding:3px 5px;border-color:rgba(255,255,255,.24);background:rgba(255,255,255,.15);color:#fff;font-size:9px} #creatico-landing .cr-vendor-criterion-head {font-size:10px} #creatico-landing .cr-hero-layer { position: absolute; left: 42px; top: calc(360px + var(--scroll-shift, 0px)); width: 300px; height: 226px; transform-origin: center; transform: translateY(var(--y)) rotateX(60deg) rotateZ(-45deg); border-radius: 16px; overflow: hidden; animation: cr-unfold 1.15s cubic-bezier(0.2, 0.78, 0.2, 1) var(--delay) both; will-change: top, transform; } #creatico-landing .cr-layer-content { position: absolute; inset: 20px; opacity: 0; animation: cr-content-in 0.55s ease calc(var(--delay) + 0.72s) both; } #creatico-landing .cr-stack-copy { position: absolute; left: 432px; top: 82px; z-index: 9; width: 245px; animation: cr-fade 0.5s ease 0.82s both; will-change: opacity, transform; } #creatico-landing .cr-stack-group-label { font-size: 11px; line-height: 1; letter-spacing: 0.11em; text-transform: uppercase; color: #abbda2; font-weight: 600; } #creatico-landing .cr-stack-group-label:first-child { margin-bottom: 11px; } #creatico-landing .cr-stack-group-label--services { margin: 28px 0 11px; } #creatico-landing .cr-stack-copy-item { position: relative; } #creatico-landing .cr-stack-copy-item::before { content: ''; position: absolute; top: 9px; right: calc(100% + 18px); width: 35px; height: 1px; background: rgba(255,255,255,0.3); } #creatico-landing .cr-stack-copy-item--accent::before { background: #F93762; } #creatico-landing .cr-stack-copy-item + .cr-stack-copy-item { margin-top: 18px; } #creatico-landing .cr-stack-label-title { display: block; font-size: 15px; line-height: 1.2; color: #fff; font-weight: 600; } #creatico-landing .cr-stack-label-copy { display: block; margin-top: 5px; font-size: 12px; line-height: 1.35; color: rgba(255,255,255,0.53); white-space: normal; } #creatico-landing .cr-messenger-icons { display: flex; align-items: center; isolation: isolate; flex: none; } #creatico-landing .cr-messenger-icon { position: relative; width: 36px; height: 36px; margin-left: -10px; padding: 1px; border-radius: 50%; background: #1d1d1f; box-sizing: border-box; cursor: pointer; transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1), filter 0.32s cubic-bezier(0.22, 1, 0.36, 1); transform-origin: center; will-change: transform; } #creatico-landing .cr-messenger-icon img { display: block; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; } #creatico-landing .cr-messenger-icon:first-child { margin-left: 0; } #creatico-landing .cr-messenger-icon:nth-child(1) { z-index: 1; } #creatico-landing .cr-messenger-icon:nth-child(2) { z-index: 2; } #creatico-landing .cr-messenger-icon:nth-child(3) { z-index: 3; } #creatico-landing .cr-messenger-icon:hover { z-index: 10; transform: translateY(-2px) scale(1.16); filter: brightness(1.06); } #creatico-landing .cr-underhood-legacy { display: none !important; } #creatico-landing .cr-underhood { width: 100%; overflow: hidden; padding: 96px 0 104px; background: #1d1d1f; color: #fff; box-sizing: border-box; font-family: 'Avenir Next', 'Onest', system-ui, sans-serif; } #creatico-landing .cr-underhood-head { width: calc(100% - 48px); max-width: 1200px; margin: 0 auto 42px; } #creatico-landing .cr-underhood-eyebrow { margin-bottom: 16px; color: #F93762; font-size: 12px; font-weight: 650; letter-spacing: .1em; text-transform: uppercase; } #creatico-landing .cr-underhood-title { max-width: 760px; margin: 0; color: #fff; font-family: 'Unbounded', sans-serif; font-size: 44px; font-weight: 600; line-height: 1.12; letter-spacing: -.025em; text-wrap: balance; } #creatico-landing .cr-underhood-copy { max-width: 760px; margin: 18px 0 0; color: rgba(255,255,255,.61); font-size: 17px; line-height: 1.55; text-wrap: pretty; } #creatico-landing .cr-stack-tile { min-height: 156px; display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 0; padding: 18px 17px 16px; box-sizing: border-box; text-align: left; border: 1px solid rgba(255,255,255,.1); border-radius: 17px; background: #27272b; transition: transform 200ms cubic-bezier(.22,1,.36,1), border-color 200ms ease, background-color 200ms ease !important; } #creatico-landing .cr-stack-tile:hover { transform: translateY(-2px); border-color: rgba(255,255,255,.2); background: #2c2c31; } #creatico-landing .cr-stack-tile[data-own="true"] { border-color: rgba(249,55,98,.3); background: linear-gradient(145deg,rgba(249,55,98,.09),#29272b 55%); } #creatico-landing .cr-stack-tile[data-own="true"]:hover { border-color: rgba(249,55,98,.5); background: linear-gradient(145deg,rgba(249,55,98,.13),#2d2a2f 58%); } #creatico-landing .cr-stack-logo-wrap { height: 46px; width: 100%; display: flex; align-items: center; justify-content: flex-start; margin-bottom: 14px; } #creatico-landing .cr-stack-logo { height: 46px; width: auto; max-width: 100%; flex: none; object-fit: contain; object-position: left center; opacity: .9; transition: opacity 200ms ease !important; } #creatico-landing .cr-stack-tile:hover .cr-stack-logo { opacity: 1; } #creatico-landing .cr-stack-logo-empty { width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid rgba(255,255,255,.1); border-radius: 11px; color: rgba(255,255,255,.3); font-size: 8px; font-weight: 600; letter-spacing: .06em; line-height: 1; text-transform: uppercase; } #creatico-landing .cr-stack-name { font-family: 'Unbounded', sans-serif; font-size: 15px; font-weight: 600; color: #fff; line-height: 1.25; letter-spacing: -.015em; } #creatico-landing .cr-stack-caption { margin-top: 7px; color: rgba(255,255,255,.48); font-size: 11.5px; line-height: 1.35; } #creatico-landing .cr-feature-shell { margin-left: var(--cr-page-gutter); } #creatico-landing .cr-feature-toolbar { width: calc(100vw - var(--cr-page-gutter) * 2); max-width: 1200px; display: flex; justify-content: flex-end; gap: 9px; margin-bottom: 16px; } #creatico-landing .cr-feature-arrow { width: 42px; height: 42px; display: grid; place-items: center; padding: 0; border: 1px solid rgba(255,255,255,.16); border-radius: 12px; background: #29292d; color: #fff; font-size: 20px; line-height: 1; cursor: pointer; transition: transform 220ms ease, border-color 220ms ease, background-color 220ms ease, opacity 220ms ease !important; } #creatico-landing .cr-feature-arrow:hover:not(:disabled) { transform: translateY(-2px); border-color: rgba(249,55,98,.6); background: #323237; } #creatico-landing .cr-feature-arrow:focus-visible { outline: 2px solid #F93762; outline-offset: 3px; } #creatico-landing .cr-feature-arrow:disabled { opacity: .3; cursor: default; } #creatico-landing .cr-feature-viewport { overflow: hidden; padding: 3px var(--cr-page-gutter) 24px 0; cursor: grab; scrollbar-width: none; overscroll-behavior-x: contain; touch-action: pan-y; user-select: none; -webkit-user-select: none; } #creatico-landing .cr-feature-viewport::-webkit-scrollbar { display: none; } #creatico-landing .cr-feature-viewport.is-dragging { cursor: grabbing; } #creatico-landing .cr-feature-track { width: max-content; display: flex; gap: 18px; will-change: transform; transform: translate3d(0, 0, 0); transition: transform 460ms cubic-bezier(.22, 1, .36, 1) !important; } #creatico-landing .cr-feature-track.is-instant { transition: none !important; } #creatico-landing .cr-feature-card { --feature-accent: #F93762; width: 300px; height: 410px; flex: 0 0 300px; position: relative; display: flex; flex-direction: column; overflow: hidden; padding: 25px 25px 0; border: 1px solid rgba(255,255,255,.105); border-radius: 20px; box-sizing: border-box; background: #29292d; transition: transform 230ms cubic-bezier(.22,1,.36,1), border-color 230ms ease, background-color 230ms ease !important; } #creatico-landing .cr-feature-card.cr-feature-tone-0 { background: #29292d; } #creatico-landing .cr-feature-card.cr-feature-tone-1 { background: #292c2a; } #creatico-landing .cr-feature-card.cr-feature-tone-2 { background: #2d282b; } #creatico-landing .cr-feature-card:hover { transform: translateY(-3px); border-color: rgba(255,255,255,.22); } #creatico-landing .cr-feature-card.cr-feature-card--final { border-color: rgba(249,55,98,.38); background: linear-gradient(150deg,#30272b,#29292d 70%); } #creatico-landing .cr-feature-card h3 { min-height: 52px; margin: 0; color: #fff; font-family: 'Unbounded', sans-serif; font-size: 20px; font-weight: 600; line-height: 1.28; letter-spacing: -.018em; text-wrap: balance; } #creatico-landing .cr-feature-card p { margin: 12px 0 0; color: rgba(255,255,255,.57); font-size: 14px; line-height: 1.5; text-wrap: pretty; } #creatico-landing .cr-feature-visual { height: 210px; position: relative; flex: none; margin: auto -25px 0; overflow: hidden; } #creatico-landing .cr-feature-glass { position: absolute; inset: 46px 40px 45px; border: 1px solid rgba(255,255,255,.18); border-radius: 28px; background: linear-gradient(145deg,rgba(255,255,255,.13),rgba(255,255,255,.025)); box-shadow: inset 0 1px rgba(255,255,255,.15); transform: rotate(-7deg); transition: transform 230ms cubic-bezier(.22,1,.36,1) !important; } #creatico-landing .cr-feature-glass::before, #creatico-landing .cr-feature-glass::after { content: ''; position: absolute; border-radius: 999px; } #creatico-landing .cr-feature-glass::before { width: 72px; height: 72px; left: 27px; top: 30px; border: 1px solid rgba(255,255,255,.23); background: radial-gradient(circle at 35% 30%,rgba(255,255,255,.26),rgba(183,200,173,.1) 42%,rgba(249,55,98,.1)); box-shadow: 52px 20px 0 -17px rgba(249,55,98,.35); } #creatico-landing .cr-feature-glass::after { width: 94px; height: 7px; right: 23px; top: 43px; background: rgba(255,255,255,.22); box-shadow: 0 20px rgba(255,255,255,.11),0 40px rgba(249,55,98,.28); } #creatico-landing .cr-feature-image { position: absolute; left: 0; top: -27px; width: 300px; height: 300px; object-fit: contain; transform-origin: top left; filter: drop-shadow(0 18px 24px rgba(0,0,0,.2)); pointer-events: none; user-select: none; -webkit-user-select: none; -webkit-user-drag: none; transition: transform 230ms cubic-bezier(.22,1,.36,1), filter 230ms ease !important; } #creatico-landing .cr-feature-card:hover .cr-feature-image { filter: drop-shadow(0 20px 28px rgba(0,0,0,.26)); } #creatico-landing .cr-feature-card.cr-feature-alt .cr-feature-glass { transform: rotate(6deg); } #creatico-landing .cr-feature-card.cr-feature-quad .cr-feature-glass::before { border-radius: 18px; transform: rotate(12deg); } #creatico-landing .cr-feature-card:hover .cr-feature-glass { transform: translateY(-3px) rotate(-5deg) scale(1.015); } #creatico-landing .cr-feature-card.cr-feature-alt:hover .cr-feature-glass { transform: translateY(-3px) rotate(4deg) scale(1.015); } #creatico-landing .cr-dark-atmosphere { position: relative; isolation: isolate; overflow: hidden; background: #1d1d1f !important; } #creatico-landing .cr-dark-atmosphere > :not(.cr-dark-background):not(style) { position: relative; z-index: 1; } #creatico-landing .cr-dark-background { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; background: linear-gradient(145deg, rgba(255,255,255,.018), transparent 36%, rgba(0,0,0,.14) 100%); } #creatico-landing .cr-dark-background::before { content: ''; position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,.026) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.026) 1px, transparent 1px); background-size: 72px 72px; mask-image: radial-gradient(ellipse 78% 72% at var(--cr-grid-x, 50%) var(--cr-grid-y, 45%), #000 10%, transparent 82%); -webkit-mask-image: radial-gradient(ellipse 78% 72% at var(--cr-grid-x, 50%) var(--cr-grid-y, 45%), #000 10%, transparent 82%); opacity: .72; } #creatico-landing .cr-dark-background::after { content: ''; position: absolute; inset: -22%; background: radial-gradient(ellipse 38% 46% at var(--cr-pink-x, 88%) var(--cr-pink-y, 50%), rgba(249,55,98,.12), rgba(249,55,98,.035) 45%, transparent 72%), radial-gradient(ellipse 34% 42% at var(--cr-sage-x, 10%) var(--cr-sage-y, 80%), rgba(171,189,162,.075), rgba(171,189,162,.018) 48%, transparent 74%), radial-gradient(ellipse 72% 66% at 50% 48%, transparent 42%, rgba(0,0,0,.22) 100%); filter: blur(20px); } #creatico-landing .cr-dark-atmosphere[data-dark-atmosphere="a"] { --cr-grid-x: 22%; --cr-grid-y: 12%; --cr-pink-x: 94%; --cr-pink-y: 34%; --cr-sage-x: 8%; --cr-sage-y: 88%; } #creatico-landing .cr-dark-atmosphere[data-dark-atmosphere="b"] { --cr-grid-x: 76%; --cr-grid-y: 42%; --cr-pink-x: 4%; --cr-pink-y: 66%; --cr-sage-x: 92%; --cr-sage-y: 16%; } #creatico-landing .cr-dark-atmosphere[data-dark-atmosphere="c"] { --cr-grid-x: 48%; --cr-grid-y: 78%; --cr-pink-x: 68%; --cr-pink-y: 98%; --cr-sage-x: 4%; --cr-sage-y: 20%; } #creatico-landing .cr-dark-atmosphere[data-dark-atmosphere="d"] { --cr-grid-x: 84%; --cr-grid-y: 22%; --cr-pink-x: 98%; --cr-pink-y: 72%; --cr-sage-x: 30%; --cr-sage-y: 2%; } #creatico-landing .cr-dark-atmosphere[data-dark-atmosphere="e"] { --cr-grid-x: 18%; --cr-grid-y: 58%; --cr-pink-x: 2%; --cr-pink-y: 24%; --cr-sage-x: 96%; --cr-sage-y: 86%; } #creatico-landing .cr-dark-atmosphere[data-dark-atmosphere="f"] { --cr-grid-x: 62%; --cr-grid-y: 16%; --cr-pink-x: 60%; --cr-pink-y: 2%; --cr-sage-x: 2%; --cr-sage-y: 72%; } /* ---------- бейдж hero: периодический блик + мягкое дышащее свечение рамки ---------- */ #creatico-landing .cr-hero-badge { position: relative; overflow: hidden; isolation: isolate; animation: cr-badge-glow 3.6s ease-in-out infinite; } #creatico-landing .cr-hero-badge::after { content: ''; position: absolute; top: 0; left: -60%; width: 45%; height: 100%; background: linear-gradient(100deg, transparent, rgba(255,255,255,0.4), transparent); transform: skewX(-20deg); animation: cr-badge-shine 4.2s ease-in-out infinite; } @keyframes cr-badge-shine { 0% { left: -60%; } 20% { left: 130%; } 100% { left: 130%; } } @keyframes cr-badge-glow { 0%, 100% { border-color: rgba(171,189,162,0.35); box-shadow: 0 0 0 rgba(171,189,162,0); } 50% { border-color: rgba(171,189,162,0.85); box-shadow: 0 0 14px rgba(171,189,162,0.35); } } @media (prefers-reduced-motion: reduce) { #creatico-landing { scroll-behavior: auto; } #creatico-landing .cr-hero-badge, #creatico-landing .cr-hero-badge::after { animation: none !important; } #creatico-landing .cr-track, #creatico-landing .cr-hero-layer, #creatico-landing .cr-layer-content, #creatico-landing .cr-stack-copy, #creatico-landing .cr-stack-base { animation: none !important; } #creatico-landing [style*="cursor: pointer"], #creatico-landing [style*="transition:"], #creatico-landing div[style*="border: 1px"], #creatico-landing span[style*="border: 1px"], #creatico-landing a[style*="border-bottom"], #creatico-landing .cr-messenger-icon, #creatico-landing .cr-client-item, #creatico-landing .cr-client-mark, #creatico-landing .cr-client-caption, #creatico-landing .cr-situation-slider, #creatico-landing .cr-situation-grid, #creatico-landing .cr-situation-cta { transition: none !important; } } #creatico-landing .sc-hv-1:hover { border-color: #F93762 !important; color: #F93762 !important; } #creatico-landing .sc-hv-2:hover { background: #ff4d75 !important; transform: translateY(-1px) !important; } #creatico-landing .sc-hv-3:hover { border-color: rgba(255,255,255,0.42) !important; background: rgba(255,255,255,0.055) !important; } #creatico-landing .sc-hv-4:hover { border-bottom-color: #F93762 !important; } #creatico-landing .sc-hv-5:hover { background: #313134 !important; border-color: rgba(255,255,255,0.18) !important; } #creatico-landing .sc-hv-6:hover { border-color: rgba(255,255,255,.28) !important; background: rgba(255,255,255,.055) !important; color: #fff !important; } #creatico-landing .sc-hv-7:hover { background: #ff4d75 !important; } #creatico-landing .sc-hv-8:hover { border-color: rgba(0,0,0,0.4) !important; } /* ---------- popup «Аудит моего сайта» ---------- */ #creatico-landing .cr-audit-popup { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 24px; box-sizing: border-box; } #creatico-landing .cr-audit-popup[hidden] { display: none !important; } #creatico-landing .cr-audit-popup-overlay { position: absolute; inset: 0; background: rgba(10,10,11,0.72); backdrop-filter: blur(3px); animation: cr-audit-fade-in 220ms ease both; } #creatico-landing .cr-audit-popup-dialog { position: relative; width: 100%; max-width: 600px; max-height: calc(100vh - 32px); overflow-y: auto; overflow-x: hidden; box-sizing: border-box; padding: 26px 30px 22px; border-radius: 22px; border: 1px solid rgba(255,255,255,0.12); background: linear-gradient(165deg, #242226 0%, #1d1d1f 62%); box-shadow: 0 32px 90px rgba(0,0,0,0.45), 0 0 0 1px rgba(255,255,255,0.02); animation: cr-audit-pop-in 260ms cubic-bezier(.22,1,.36,1) both; } #creatico-landing .cr-audit-popup-dialog::before { content: ''; position: absolute; right: -80px; top: -90px; width: 320px; height: 320px; border-radius: 50%; background: radial-gradient(circle, rgba(249,55,98,0.22) 0%, rgba(249,55,98,0.06) 40%, transparent 72%); filter: blur(20px); pointer-events: none; z-index: 0; } #creatico-landing .cr-audit-popup-dialog::after { content: ''; position: absolute; inset: 0; border-radius: 22px; background-image: linear-gradient(rgba(255,255,255,0.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.035) 1px, transparent 1px); background-size: 44px 44px; mask-image: radial-gradient(70% 60% at 75% 10%, #000 20%, transparent 100%); pointer-events: none; z-index: 0; } #creatico-landing .cr-audit-popup-dialog > * { position: relative; z-index: 1; } #creatico-landing .cr-audit-popup-x { position: absolute; top: 16px; right: 16px; z-index: 2; width: 32px; height: 32px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,0.14); border-radius: 50%; background: rgba(255,255,255,0.02); color: rgba(255,255,255,0.7); font-size: 19px; line-height: 1; cursor: pointer; transition: border-color .2s ease, color .2s ease, background .2s ease !important; } #creatico-landing .cr-audit-popup-x:hover { border-color: rgba(249,55,98,0.5) !important; color: #fff !important; background: rgba(249,55,98,0.12) !important; } #creatico-landing .cr-audit-popup-eyebrow { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 10px; color: #F93762; font-size: 11px; font-weight: 650; letter-spacing: .1em; text-transform: uppercase; } #creatico-landing .cr-audit-popup-title { margin: 0 0 8px; padding-right: 24px; color: #fff; font-family: 'Unbounded', sans-serif; font-size: 25px; font-weight: 600; line-height: 1.2; letter-spacing: -.015em; text-wrap: balance; } #creatico-landing .cr-audit-popup-subtitle { margin: 0 0 14px; color: rgba(255,255,255,0.62); font-size: 14.5px; line-height: 1.48; text-wrap: pretty; } #creatico-landing .cr-audit-popup-checklist { list-style: none; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 6px 12px; margin: 0 0 16px; padding: 10px 14px; border: 1px solid rgba(255,255,255,0.09); border-radius: 14px; background: rgba(255,255,255,0.025); box-sizing: border-box; } #creatico-landing .cr-audit-popup-checklist li { position: relative; padding-left: 16px; color: rgba(255,255,255,0.72); font-size: 12.5px; line-height: 1.35; } #creatico-landing .cr-audit-popup-checklist li::before { content: ''; position: absolute; left: 0; top: 6px; width: 6px; height: 6px; border-radius: 50%; background: #abbda2; } #creatico-landing .cr-audit-popup-form { display: flex; flex-direction: column; gap: 10px; } #creatico-landing .cr-audit-field { display: flex; flex-direction: column; gap: 7px; min-width: 0; } #creatico-landing .cr-audit-field-label { font-size: 12px; font-weight: 600; letter-spacing: .02em; color: rgba(255,255,255,0.72); } #creatico-landing .cr-audit-field-optional { font-weight: 400; color: rgba(255,255,255,0.4); text-transform: none; letter-spacing: 0; } #creatico-landing .cr-audit-field input, #creatico-landing .cr-audit-field textarea { width: 100%; max-width: 100%; box-sizing: border-box; padding: 14px 15px; border-radius: 12px; border: 1px solid rgba(255,255,255,0.12); background: rgba(255,255,255,0.035); color: #fff; font: 500 14.5px/1.35 'Avenir Next', 'Onest', system-ui, sans-serif; transition: border-color .2s ease, background .2s ease, box-shadow .2s ease !important; } #creatico-landing .cr-audit-field textarea { resize: vertical; min-height: 76px; max-height: 90px; font-weight: 400; } #creatico-landing .cr-audit-field input::placeholder, #creatico-landing .cr-audit-field textarea::placeholder { color: rgba(255,255,255,0.32); } #creatico-landing .cr-audit-field input:hover, #creatico-landing .cr-audit-field textarea:hover { border-color: rgba(255,255,255,0.22) !important; } #creatico-landing .cr-audit-field input:focus, #creatico-landing .cr-audit-field textarea:focus { outline: none; border-color: #F93762 !important; background: rgba(249,55,98,0.05) !important; box-shadow: 0 0 0 3px rgba(249,55,98,0.14) !important; } #creatico-landing .cr-audit-field.is-invalid input, #creatico-landing .cr-audit-field.is-invalid textarea { border-color: #ff5f5f !important; } #creatico-landing .cr-audit-field-hint { font-size: 11.5px; line-height: 1.3; color: rgba(255,255,255,0.4); } #creatico-landing .cr-audit-channels { display: flex; flex-wrap: wrap; gap: 6px; margin-top: -3px; } #creatico-landing .cr-audit-channel { flex: 1 1 auto; min-width: 0; height: 29px; padding: 0 12px; border-radius: 999px; border: 1px solid rgba(255,255,255,0.14); background: rgba(255,255,255,0.03); color: rgba(255,255,255,0.62); font: 600 12.5px/1 'Avenir Next', 'Onest', system-ui, sans-serif; white-space: nowrap; cursor: pointer; transition: border-color .18s ease, background .18s ease, color .18s ease !important; } #creatico-landing .cr-audit-channel:hover { border-color: rgba(255,255,255,0.28) !important; color: #fff !important; } #creatico-landing .cr-audit-channel.is-active { border-color: rgba(249,55,98,0.55) !important; background: rgba(249,55,98,0.14) !important; color: #fff !important; } @media (max-width: 640px) { #creatico-landing .cr-audit-channel { flex: 1 1 calc(50% - 3px); } } #creatico-landing .cr-audit-field-error { display: block; margin-top: 6px; color: #ff8383; font-size: 11.5px; line-height: 1.35; } #creatico-landing .cr-audit-field-error[hidden] { display: none !important; } #creatico-landing .cr-audit-consent { margin-top: -1px; } #creatico-landing .cr-audit-consent-row { position: relative; display: flex; align-items: flex-start; gap: 10px; cursor: pointer; } #creatico-landing .cr-audit-consent-checkbox { position: absolute; opacity: 0; width: 19px; height: 19px; margin: 0; top: 1px; left: 0; cursor: pointer; } #creatico-landing .cr-audit-consent-box { position: relative; flex: none; width: 19px; height: 19px; margin-top: 1px; border-radius: 5px; border: 1px solid rgba(255,255,255,0.28); background: rgba(255,255,255,0.03); box-sizing: border-box; transition: background .18s ease, border-color .18s ease !important; } #creatico-landing .cr-audit-consent-box::after { content: ''; position: absolute; left: 50%; top: 46%; width: 5px; height: 9px; margin: -6px 0 0 -3px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); opacity: 0; transition: opacity .15s ease !important; } #creatico-landing .cr-audit-consent-checkbox:hover ~ .cr-audit-consent-box { border-color: rgba(255,255,255,0.48) !important; } #creatico-landing .cr-audit-consent-checkbox:focus-visible ~ .cr-audit-consent-box { outline: 2px solid rgba(249,55,98,0.55); outline-offset: 2px; } #creatico-landing .cr-audit-consent-checkbox:checked ~ .cr-audit-consent-box { background: #F93762 !important; border-color: #F93762 !important; } #creatico-landing .cr-audit-consent-checkbox:checked ~ .cr-audit-consent-box::after { opacity: 1; } #creatico-landing .cr-audit-consent-text { font-size: 12px; line-height: 1.45; color: rgba(255,255,255,0.5); } #creatico-landing .cr-audit-consent-text a { color: rgba(255,255,255,0.72); text-decoration: underline; text-underline-offset: 2px; } #creatico-landing .cr-audit-consent-text a:hover { color: #fff !important; } #creatico-landing .cr-audit-consent.is-invalid .cr-audit-consent-box { border-color: #ff5f5f !important; } #creatico-landing .cr-audit-popup-submit { display: inline-flex; align-items: center; justify-content: center; width: 100%; height: 52px; margin-top: 2px; border: 0; border-radius: 14px; background: #F93762; color: #fff; font-weight: 600; font-size: 15.5px; cursor: pointer; box-shadow: 0 14px 36px -10px rgba(249,55,98,0.65); transition: background .2s ease, transform .2s ease !important; } #creatico-landing .cr-audit-popup-submit:hover { background: #ff4d75 !important; transform: translateY(-1px) !important; } #creatico-landing .cr-audit-popup-submit:disabled { opacity: .6; cursor: default; transform: none !important; } #creatico-landing .cr-audit-popup-micro { margin: 8px 0 0; text-align: center; color: rgba(255,255,255,0.46); font-size: 12px; line-height: 1.35; } #creatico-landing .cr-audit-popup-consent { margin: 8px 0 0; color: rgba(255,255,255,0.38); font-size: 11.5px; line-height: 1.4; text-align: center; } #creatico-landing .cr-audit-popup-consent a { color: rgba(255,255,255,0.56); text-decoration: underline; text-underline-offset: 2px; } #creatico-landing .cr-audit-popup-consent a:hover { color: #fff !important; } #creatico-landing .cr-audit-popup-view[hidden] { display: none !important; } #creatico-landing .cr-audit-popup-success-mark { width: 48px; height: 48px; display: grid; place-items: center; margin-bottom: 14px; border-radius: 50%; background: rgba(171,189,162,0.16); color: #abbda2; font-size: 22px; font-weight: 700; } @keyframes cr-audit-fade-in { from { opacity: 0; } to { opacity: 1; } } @keyframes cr-audit-pop-in { from { opacity: 0; transform: translateY(12px) scale(.98); } to { opacity: 1; transform: none; } } @media (max-width: 640px) { #creatico-landing .cr-audit-popup { padding: 12px; } #creatico-landing .cr-audit-popup-dialog { padding: 24px 20px 20px; max-height: calc(100vh - 24px); } #creatico-landing .cr-audit-popup-checklist { grid-template-columns: 1fr; } #creatico-landing .cr-audit-popup-title { font-size: 21px; padding-right: 20px; } } #creatico-landing .cr-copy-email:hover .cr-copy-email-text { color: #F93762 !important; } #creatico-landing .cr-copy-email:hover .cr-copy-email-icon { color: #F93762 !important; opacity: 1 !important; } #creatico-landing .cr-copy-email:hover .cr-copy-email-hint { max-width: 120px !important; margin-right: 8px !important; opacity: 1 !important; } #creatico-landing .cr-tg-channel-btn:hover { background: #1e96d1 !important; transform: translateY(-1px) !important; } #creatico-landing.cr-reveal-on [data-reveal] { opacity: 0; transform: translateY(22px); transition: opacity 700ms ease, transform 700ms cubic-bezier(.22,1,.36,1); transition-delay: var(--reveal-delay, 0ms); will-change: opacity, transform; } #creatico-landing.cr-reveal-on [data-reveal].is-revealed { opacity: 1; transform: translateY(0); } /* Кейсы: анимация появления при скролле отключена — карточки видны сразу */ #creatico-landing.cr-reveal-on .cr-cases-list[data-reveal-group] [data-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; } /* ---------- Квиз «Расскажите о проекте» — 5 шагов ---------- Базовые стили компонента: работают на десктопе и мобиле одинаково, мобильные точечные уточнения — в @media max-width:767px ниже. */ #creatico-landing .cr-quiz-progress { display: flex; align-items: center; justify-content: space-between; gap: 12px; } #creatico-landing .cr-quiz-progress-track { flex: 1 1 auto; height: 5px; border-radius: 3px; background: rgba(0,0,0,0.1); overflow: hidden; } #creatico-landing .cr-quiz-progress-fill { height: 100%; border-radius: 3px; background: #F93762; transition: width 280ms cubic-bezier(.22,1,.36,1); } #creatico-landing .cr-quiz-progress-text { flex: none; font-size: 12px; font-weight: 600; letter-spacing: .04em; color: rgba(0,0,0,0.45); white-space: nowrap; } #creatico-landing .cr-quiz-step { display: none; flex-direction: column; gap: 16px; } #creatico-landing .cr-quiz-step.is-active { display: flex; } #creatico-landing .cr-quiz-step.is-anim-in { animation: cr-quiz-step-in 220ms cubic-bezier(.22,1,.36,1) both; } #creatico-landing .cr-quiz-step.is-anim-back { animation: cr-quiz-step-in-back 220ms cubic-bezier(.22,1,.36,1) both; } @keyframes cr-quiz-step-in { from { opacity: 0; transform: translateX(14px); } to { opacity: 1; transform: none; } } @keyframes cr-quiz-step-in-back { from { opacity: 0; transform: translateX(-14px); } to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { #creatico-landing .cr-quiz-step.is-anim-in, #creatico-landing .cr-quiz-step.is-anim-back { animation: none !important; } } #creatico-landing .cr-quiz-back { align-self: flex-start; display: inline-flex; align-items: center; margin: -6px 0 -6px -4px; padding: 8px; border: 0; background: none; color: rgba(0,0,0,0.4); font: 500 13px/1 inherit; cursor: pointer; transition: color .15s ease; } #creatico-landing .cr-quiz-back:hover { color: rgba(0,0,0,0.72); } #creatico-landing .cr-quiz-title { margin: 0; font-family: 'Unbounded', sans-serif; font-size: 22px; font-weight: 600; letter-spacing: -.01em; line-height: 1.25; } #creatico-landing .cr-quiz-sub { margin: -8px 0 0; font-size: 14px; line-height: 1.45; color: rgba(0,0,0,0.5); } #creatico-landing .cr-quiz-options { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; } #creatico-landing .cr-quiz-option { display: flex; align-items: center; min-height: 48px; padding: 14px 16px; border-radius: 14px; border: 1px solid rgba(0,0,0,0.14); background: #fff; color: inherit; font: 500 15px/1.35 inherit; text-align: left; cursor: pointer; transition: border-color .15s ease, background .15s ease, transform .1s ease; -webkit-tap-highlight-color: transparent; } #creatico-landing .cr-quiz-option:hover { border-color: rgba(0,0,0,0.4); } #creatico-landing .cr-quiz-option:active { transform: scale(0.98); } #creatico-landing .cr-quiz-option.is-selected { border: 2px solid #F93762; background: rgba(249,55,98,0.06); font-weight: 600; padding: 13px 15px; } #creatico-landing .cr-quiz-field { display: flex; flex-direction: column; gap: 7px; min-width: 0; } #creatico-landing .cr-quiz-label { font-size: 12px; font-weight: 600; letter-spacing: .02em; color: rgba(0,0,0,0.55); } #creatico-landing .cr-quiz-input, #creatico-landing .cr-quiz-textarea { width: 100%; max-width: 100%; box-sizing: border-box; padding: 14px 15px; border-radius: 12px; border: 1px solid rgba(0,0,0,0.14); background: #fff; color: inherit; font: 500 15px/1.4 'Avenir Next', 'Onest', system-ui, sans-serif; transition: border-color .15s ease, box-shadow .15s ease; } #creatico-landing .cr-quiz-textarea { resize: vertical; min-height: 92px; max-height: 160px; font-weight: 400; } #creatico-landing .cr-quiz-input::placeholder, #creatico-landing .cr-quiz-textarea::placeholder { color: rgba(0,0,0,0.32); } #creatico-landing .cr-quiz-input:hover, #creatico-landing .cr-quiz-textarea:hover { border-color: rgba(0,0,0,0.28); } #creatico-landing .cr-quiz-input:focus, #creatico-landing .cr-quiz-textarea:focus { outline: none; border-color: #F93762; box-shadow: 0 0 0 3px rgba(249,55,98,0.12); } #creatico-landing .cr-quiz-field.is-invalid .cr-quiz-input, #creatico-landing .cr-quiz-field.is-invalid .cr-quiz-textarea { border-color: #e0304f; } #creatico-landing .cr-quiz-hint { font-size: 11.5px; line-height: 1.35; color: rgba(0,0,0,0.4); } #creatico-landing .cr-quiz-error { display: block; margin-top: -2px; color: #e0304f; font-size: 12px; line-height: 1.35; } #creatico-landing .cr-quiz-error[hidden] { display: none !important; } #creatico-landing .cr-quiz-toggle { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 6px; } #creatico-landing .cr-quiz-toggle-btn { min-width: 0; height: 38px; padding: 0 10px; border-radius: 999px; border: 1px solid rgba(0,0,0,0.14); background: #fff; color: rgba(0,0,0,0.6); font: 600 12.5px/1 inherit; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; transition: border-color .15s ease, background .15s ease, color .15s ease; } #creatico-landing .cr-quiz-toggle-btn:hover { border-color: rgba(0,0,0,0.35); } #creatico-landing .cr-quiz-toggle-btn.is-active { border-color: #F93762; background: rgba(249,55,98,0.08); color: #F93762; } #creatico-landing .cr-quiz-consent { position: relative; display: flex; align-items: flex-start; gap: 10px; cursor: pointer; padding-top: 2px; } #creatico-landing .cr-quiz-consent-checkbox { position: absolute; opacity: 0; width: 19px; height: 19px; margin: 0; top: 3px; left: 0; cursor: pointer; } #creatico-landing .cr-quiz-consent-box { position: relative; flex: none; width: 19px; height: 19px; margin-top: 3px; border-radius: 5px; border: 1px solid rgba(0,0,0,0.25); background: #fff; box-sizing: border-box; transition: background .15s ease, border-color .15s ease; } #creatico-landing .cr-quiz-consent-box::after { content: ''; position: absolute; left: 50%; top: 46%; width: 5px; height: 9px; margin: -6px 0 0 -3px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); opacity: 0; transition: opacity .15s ease; } #creatico-landing .cr-quiz-consent-checkbox:hover ~ .cr-quiz-consent-box { border-color: rgba(0,0,0,0.45); } #creatico-landing .cr-quiz-consent-checkbox:focus-visible ~ .cr-quiz-consent-box { outline: 2px solid rgba(249,55,98,0.5); outline-offset: 2px; } #creatico-landing .cr-quiz-consent-checkbox:checked ~ .cr-quiz-consent-box { background: #F93762; border-color: #F93762; } #creatico-landing .cr-quiz-consent-checkbox:checked ~ .cr-quiz-consent-box::after { opacity: 1; } #creatico-landing .cr-quiz-consent-text { font-size: 12.5px; line-height: 1.45; color: rgba(0,0,0,0.55); } #creatico-landing .cr-quiz-consent-text a { color: inherit; text-decoration: underline; text-underline-offset: 2px; } #creatico-landing .cr-quiz-consent-text a:hover { color: #F93762; } #creatico-landing .cr-quiz-consent.is-invalid .cr-quiz-consent-box { border-color: #e0304f; } #creatico-landing .cr-quiz-actions { display: flex; align-items: center; gap: 16px; padding-top: 2px; } #creatico-landing .cr-quiz-next, #creatico-landing .cr-quiz-submit { display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 52px; padding: 0 24px; border: 0; border-radius: 14px; background: #F93762; color: #fff; font-weight: 600; font-size: 15.5px; cursor: pointer; box-shadow: 0 12px 36px -10px rgba(249,55,98,0.55); transition: background .2s ease, transform .2s ease; } #creatico-landing .cr-quiz-next:hover, #creatico-landing .cr-quiz-submit:hover { background: #ff4d75; transform: translateY(-1px); } #creatico-landing .cr-quiz-submit { width: 100%; } #creatico-landing .cr-quiz-submit:disabled { opacity: .6; cursor: default; transform: none; } #creatico-landing .cr-quiz-next-arrow { font-size: 16px; line-height: 1; } #creatico-landing .cr-quiz-submit-note { margin-top: -6px; text-align: center; font-size: 12px; line-height: 1.35; color: rgba(0,0,0,0.4); } /* ================================================================ МОБИЛЬНАЯ АДАПТАЦИЯ Всё ниже — только @media-правила поверх десктопа. Десктопные правила выше не тронуты. Брейкпоинты: tablet 768–1024, mobile <=767, small mobile <=480. ================================================================ */ /* ---------- HERO: не помещается 540px+визуал уже на 900px, чуть раньше общего mobile-брейкпоинта ---------- */ @media (max-width: 900px) { #creatico-landing [data-screen-label="Hero"] .cr-container[style*="grid-template-columns: 540px"] { grid-template-columns: 1fr !important; } #creatico-landing [data-hero-stack] { display: none !important; } #creatico-landing [data-screen-label="Hero"] { min-height: auto !important; } #creatico-landing [data-screen-label="Доверие"] div[style*="flex-wrap: nowrap"] { flex-wrap: wrap !important; } } /* ---------- TABLET 768–1024: лёгкие поджатия, без перестройки раскладки ---------- */ @media (max-width: 1024px) { #creatico-landing .cr-cost-flow { grid-template-columns: repeat(2, minmax(0,1fr)) !important; } #creatico-landing .cr-cost-flow::before { display: none !important; } #creatico-landing .cr-process-cards { grid-template-columns: repeat(2, minmax(0,1fr)) !important; } #creatico-landing .cr-guarantees-layout { grid-template-columns: 1fr !important; gap: 40px !important; } #creatico-landing .cr-contract-scene { margin: 32px auto 0 !important; } } /* ---------- MOBILE <=767px: основной каркас ---------- */ @media (max-width: 767px) { /* 0. страховка от горизонтального скролла страницы */ #creatico-landing { overflow-x: hidden !important; } /* страховка от белой полосы по краям при overscroll/изменении высоты адресной строки браузера — html/body сами по себе белые, виден только #creatico-landing поверх них; красим фон под цвет сайта. */ html, body { background-color: #1d1d1f !important; } /* 1. контейнер / боковые отступы — единый gutter 20px на mobile */ #creatico-landing { --cr-page-gutter: 20px; } #creatico-landing .cr-container { width: calc(100% - 40px) !important; } /* 2. вертикальный ритм секций — единая сетка 48 / 64 / 72 компактная (Доверие): 48/48 обычная: 64/64 важная крупная (Экономия, Под капотом, Кейсы — самые насыщенные секции): 72/72 */ #creatico-landing [style*="padding: 88px var(--cr-page-gutter) 96px"] { padding-top: 48px !important; padding-bottom: 48px !important; } #creatico-landing [style*="padding: 56px var(--cr-page-gutter) 40px"] { padding-top: 32px !important; padding-bottom: 24px !important; } #creatico-landing [data-screen-label="Боль"], #creatico-landing .cr-process-section, #creatico-landing [data-screen-label="Цены"], #creatico-landing [data-screen-label="После запуска"], #creatico-landing [data-screen-label="Руководитель"], #creatico-landing [data-screen-label="Отзывы"], #creatico-landing .cr-guarantees-section, #creatico-landing [data-screen-label="Квиз"] { padding-top: 64px !important; padding-bottom: 64px !important; } #creatico-landing .cr-economy-section { padding-top: 64px !important; padding-bottom: 72px !important; } #creatico-landing .cr-cases-section, #creatico-landing .cr-underhood { padding-top: 72px !important; padding-bottom: 72px !important; } #creatico-landing [data-screen-label="Доверие"] { padding-top: 48px !important; padding-bottom: 48px !important; } /* 2b. ритм заголовков секций: overline/H2/subtitle → контент = 32px (было 56px) */ #creatico-landing [style*="gap: 16px; max-width: 560px; margin-bottom: 56px"], #creatico-landing [style*="gap: 16px; max-width: 620px; margin-bottom: 56px"] { margin-bottom: 32px !important; } /* подзаголовок "На чём делаем" → табы = 28px (было 38px) */ #creatico-landing [style*="gap: 14px; max-width: 560px; margin-bottom: 38px"] { margin-bottom: 28px !important; } /* заголовок "Кейсы" и подзаголовок "Кому доверить сайт" — тот же ритм 28–32px */ #creatico-landing .cr-cases-head { margin-bottom: 32px !important; } #creatico-landing .cr-vendor-head { margin-bottom: 28px !important; } #creatico-landing .cr-economy-intro { margin-bottom: 32px !important; } #creatico-landing .cr-process-head { margin-bottom: 32px !important; } /* 3. типографика — h1/h2 в общем виде, минимум точечно */ #creatico-landing h1 { font-size: 40px !important; line-height: 1.04 !important; letter-spacing: -0.01em !important; } #creatico-landing h2 { font-size: 32px !important; line-height: 1.16 !important; letter-spacing: -0.01em !important; } #creatico-landing .cr-vendor-head h3 { font-size: 25px !important; } #creatico-landing [data-screen-label="Под капотом"] h3[style*="font-size: 30px"] { font-size: 23px !important; } /* 4. кнопки / touch */ #creatico-landing .sc-hv-1, #creatico-landing .sc-hv-2, #creatico-landing .sc-hv-3, #creatico-landing .sc-hv-7, #creatico-landing .sc-hv-8, #creatico-landing .cr-situation-button, #creatico-landing .cr-economy-button, #creatico-landing .cr-vendor-secondary { min-height: 48px !important; } #creatico-landing .cr-economy-cta, #creatico-landing .cr-vendor-cta, #creatico-landing .cr-situation-cta { flex-direction: column !important; align-items: flex-start !important; gap: 12px !important; margin-top: 24px !important; } /* 5. формы / попапы */ #creatico-landing .cr-audit-field input, #creatico-landing .cr-audit-field textarea { font-size: 16px !important; } /* Белая полоса снизу при открытии попапа "Аудит": popup закрыт через position:fixed; inset:0, и при открытии сворачивается адресная строка мобильного браузера — видимая область высоты (visual viewport) растёт, а popup, посчитанный по старой (100vh) высоте, не успевает подрасти — снизу на долю секунды видно белый html/body фон. 100dvh пересчитывается под актуальную высоту, поэтому щели не остаётся. */ #creatico-landing .cr-audit-popup { padding: 12px !important; height: 100vh !important; height: 100dvh !important; } #creatico-landing [data-review-lightbox] > div, #creatico-landing [data-video-lightbox] > div { width: calc(100vw - 24px) !important; max-width: calc(100vw - 24px) !important; } #creatico-landing [data-review-lightbox], #creatico-landing [data-video-lightbox] { padding: 12px !important; } /* ---------- HERO ---------- */ #creatico-landing [data-screen-label="Hero"] { min-height: auto !important; } #creatico-landing [data-screen-label="Hero"] .cr-container[style*="grid-template-columns: 540px"] { grid-template-columns: 1fr !important; gap: 0 !important; padding-top: 36px !important; padding-bottom: 56px !important; } #creatico-landing .cr-hero-badge { height: auto !important; min-height: 32px !important; padding: 8px 14px !important; line-height: 1.4 !important; white-space: normal !important; text-align: left !important; } #creatico-landing [data-screen-label="Hero"] h1 { font-size: 38px !important; margin-bottom: 18px !important; } #creatico-landing [data-screen-label="Hero"] p[style*="max-width: 530px"] { font-size: 16px !important; max-width: 100% !important; } /* trust-карточки 17 лет / 200+ / 97% — 2 в ряд + акцентная на всю ширину */ #creatico-landing .cr-hero-stats { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 11px !important; max-width: 100% !important; margin-bottom: 24px !important; align-items: stretch !important; } #creatico-landing .cr-hero-stats > span { display: none !important; } #creatico-landing .cr-hero-stat { position: relative; overflow: hidden; min-width: 0 !important; box-sizing: border-box !important; display: flex !important; flex-direction: column !important; gap: 3px !important; padding: 15px 16px !important; border-radius: 16px !important; border: 1px solid rgba(255,255,255,0.13) !important; background: rgba(255,255,255,0.045) !important; } #creatico-landing .cr-hero-stat::before { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .55; background-image: linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px); background-size: 13px 13px; } #creatico-landing .cr-hero-stat::after { content: ''; position: absolute; width: 110px; height: 110px; right: -36px; top: -40px; pointer-events: none; background: radial-gradient(circle, rgba(171,189,162,.28), transparent 70%); filter: blur(14px); } #creatico-landing .cr-hero-stat > span:first-child { position: relative; z-index: 1; font-family: 'Unbounded', sans-serif !important; font-size: 21px !important; font-weight: 700 !important; line-height: 1.15 !important; color: #fff !important; } #creatico-landing .cr-hero-stat > span:last-child { position: relative; z-index: 1; margin-top: 0 !important; font-size: 13px !important; line-height: 1.32 !important; color: rgba(255,255,255,.56) !important; } #creatico-landing .cr-hero-stat:last-child { grid-column: 1 / -1 !important; flex-direction: row !important; align-items: center !important; gap: 10px !important; border-color: rgba(249,55,98,.42) !important; background: linear-gradient(135deg, rgba(249,55,98,.16), rgba(171,189,162,.05)) !important; } #creatico-landing .cr-hero-stat:last-child::after { background: radial-gradient(circle, rgba(249,55,98,.4), transparent 70%) !important; } #creatico-landing .cr-hero-stat:last-child > span:last-child { margin-top: 0 !important; } #creatico-landing [data-screen-label="Hero"] div[style*="gap: 14px; margin-bottom: 18px"] { flex-direction: column !important; align-items: stretch !important; gap: 12px !important; } #creatico-landing [data-screen-label="Hero"] .sc-hv-2, #creatico-landing [data-screen-label="Hero"] .sc-hv-3 { width: 100% !important; justify-content: center !important; box-sizing: border-box !important; } #creatico-landing [data-hero-stack] { display: none !important; } /* ---------- ДОВЕРИЕ (trust) ---------- */ #creatico-landing [data-screen-label="Доверие"] > .cr-container[style*="grid-template-columns: minmax(0px, 1fr) 300px"] { grid-template-columns: 1fr !important; gap: 28px !important; margin-bottom: 32px !important; } #creatico-landing [data-screen-label="Доверие"] div[style*="flex-wrap: nowrap"] { flex-wrap: wrap !important; gap: 6px !important; } /* теги: Коммерческие / Личные бренды в 1 строку, Госучреждения переносится ниже */ #creatico-landing [data-screen-label="Доверие"] div[style*="flex-wrap: nowrap"] > span { padding: 0 11px !important; font-size: 12.5px !important; } #creatico-landing [data-screen-label="Доверие"] div[style*="flex-wrap: nowrap"] > span:nth-child(2) { order: 3 !important; } #creatico-landing [data-screen-label="Доверие"] div[style*="flex-wrap: nowrap"] > span:nth-child(3) { order: 2 !important; } /* плашка "Сотрудничество на долгие годы" — компактнее и ближе к тегам */ #creatico-landing [data-screen-label="Доверие"] div[style*="margin-top: 26px"] { margin-top: 0 !important; } #creatico-landing [data-screen-label="Доверие"] div[style*="border-left: 2px solid rgb(249, 55, 98)"] { padding-left: 12px !important; gap: 4px !important; } /* лента логотипов — контрастнее, компактнее, видно больше карточек, без лишнего отступа под текстом */ /* height у .cr-marquee — фиксированный inline overflow:hidden обрезал подпись по вертикали, если она заворачивалась в 3 строки (длинные названия вроде "Сеть медицинских колледжей"). height:auto тянется под самую высокую карточку в ленте, overflow-y:visible снимает обрезание по вертикали, а overflow-x остаётся hidden — горизонтальная лента клонов по-прежнему не даёт скроллбара и не портит вёрстку. */ #creatico-landing .cr-marquee { height: auto !important; min-height: 94px !important; overflow-x: hidden !important; overflow-y: visible !important; mask-image: linear-gradient(90deg, transparent 0px, #000 28px, #000 calc(100% - 28px), transparent 100%) !important; cursor: grab !important; touch-action: pan-y !important; -webkit-user-select: none !important; user-select: none !important; } #creatico-landing .cr-marquee.is-dragging { cursor: grabbing !important; } #creatico-landing .cr-track { height: auto !important; min-height: 94px !important; gap: 22px !important; padding-left: 20px !important; align-items: flex-start !important; } #creatico-landing .cr-client-item { width: 124px !important; gap: 7px !important; height: auto !important; } #creatico-landing .cr-client-mark { width: 116px !important; height: 46px !important; opacity: 1 !important; filter: none !important; } #creatico-landing .cr-client-caption { min-height: 0 !important; font-size: 13.5px !important; line-height: 1.28 !important; white-space: normal !important; max-width: 116px !important; } /* ---------- БОЛЬ / ВАША СИТУАЦИЯ ---------- */ #creatico-landing .cr-situation-switch { width: 100% !important; } #creatico-landing .cr-situation-option { font-size: 11px !important; padding: 0 8px !important; } #creatico-landing .cr-situation-grid { grid-template-columns: 1fr !important; grid-auto-rows: auto !important; align-items: start !important; } #creatico-landing .cr-situation-card { min-height: auto !important; height: auto !important; align-self: start !important; } #creatico-landing .cr-situation-card-main { min-height: auto !important; } #creatico-landing .cr-situation-solution { flex: none !important; } /* ---------- ЦЕНА ЭКОНОМИИ (шаги 01–04 + итог) ---------- */ /* Карточка "Что предлагаем мы" на mobile не должна проигрывать fade/slide при каждом скролле мимо неё (общий scroll-reveal реплеится туда-обратно при пересечении viewport) — просто всегда видна. */ #creatico-landing.cr-reveal-on .cr-alternative[data-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; } #creatico-landing .cr-cost-flow { grid-template-columns: 1fr !important; gap: 16px !important; } #creatico-landing .cr-cost-flow::before { display: none !important; } #creatico-landing .cr-cost-step { min-height: auto !important; } /* разделительная линия перед ценой: одинаковый отступ сверху и снизу от неё */ #creatico-landing .cr-cost-amount { margin-top: 18px !important; } #creatico-landing .cr-cost-amount span { font-size: 12.5px !important; color: #1d1d1f !important; } #creatico-landing .cr-total-note { margin-top: 13px !important; } #creatico-landing .cr-alt-conclusion { margin-top: 13px !important; } /* карточки "исследование / структура и дизайн" в "что предлагаем мы" */ #creatico-landing .cr-alternative-list span { font-size: 13px !important; padding: 8px 11px !important; } #creatico-landing .cr-cost-summary { grid-template-columns: 1fr !important; gap: 16px !important; margin-top: 24px !important; } #creatico-landing .cr-total-value { font-size: 27px !important; } #creatico-landing .cr-alt-price strong { font-size: 32px !important; } #creatico-landing .cr-vendor-market { margin-top: 32px !important; padding-top: 32px !important; } /* ---------- ТАБЛИЦА СРАВНЕНИЯ ПОДРЯДЧИКОВ ---------- */ #creatico-landing .cr-vendor-hint { display: flex !important; align-items: center !important; gap: 6px !important; margin: 0 0 12px !important; color: #d92e54 !important; font-size: 13px !important; font-weight: 650 !important; } #creatico-landing .cr-vendor-table { overflow-x: auto !important; overflow-y: hidden !important; -webkit-overflow-scrolling: touch !important; scroll-snap-type: x mandatory !important; scrollbar-width: none !important; -ms-overflow-style: none !important; border-radius: 16px !important; } #creatico-landing .cr-vendor-table::-webkit-scrollbar { display: none !important; height: 0 !important; } #creatico-landing .cr-vendor-row { grid-template-columns: 172px repeat(4, 190px) !important; width: max-content !important; min-width: 100% !important; } #creatico-landing .cr-vendor-row > * { padding: 15px 14px !important; font-size: 14px !important; line-height: 1.4 !important; white-space: normal !important; overflow-wrap: break-word !important; scroll-snap-align: start !important; box-sizing: border-box !important; } #creatico-landing .cr-vendor-criterion, #creatico-landing .cr-vendor-criterion-head { font-size: 14px !important; font-weight: 650 !important; position: sticky !important; left: 0 !important; z-index: 2 !important; background: #fbfaf8 !important; } #creatico-landing .cr-vendor-row:not(.cr-vendor-row--head):nth-child(odd) > .cr-vendor-criterion { background: #f4f2ee !important; } #creatico-landing .cr-vendor-row--head > .cr-vendor-criterion-head { min-height: 0 !important; } #creatico-landing .cr-vendor-brand { box-shadow: inset 2px 0 0 0 rgba(249,55,98,.45), inset -2px 0 0 0 rgba(249,55,98,.45) !important; } #creatico-landing .cr-vendor-row--head .cr-vendor-brand { box-shadow: none !important; } #creatico-landing .cr-vendor-row--head > * { min-height: 0 !important; } /* ---------- ПОД КАПОТОМ: карусель карточек ---------- Десктопный приём (огромная абсолютно спозиционированная картинка, "вытекающая" за пределы карточки через отрицательные margin) на узкой mobile-карточке ломается — картинка доминирует, а заголовок с текстом визуально отваливаются. На mobile карточка собирается как один блок: картинка (в рамке одинаковой высоты у всех карточек) → заголовок → текст, без абсолютного позиционирования и bleed. */ #creatico-landing .cr-feature-toolbar { display: none !important; } #creatico-landing .cr-feature-shell { margin-left: 20px !important; } #creatico-landing .cr-feature-viewport { padding: 3px 20px 20px 0 !important; } #creatico-landing .cr-feature-card { width: 82vw !important; flex: 0 0 82vw !important; height: auto !important; min-height: 0 !important; display: flex !important; flex-direction: column !important; padding: 18px !important; border-radius: 20px !important; box-sizing: border-box !important; overflow: hidden !important; } #creatico-landing .cr-feature-glass { display: none !important; } #creatico-landing .cr-feature-visual { order: -1 !important; position: relative !important; flex: none !important; height: 230px !important; max-height: 230px !important; margin: 0 0 16px !important; display: flex !important; align-items: center !important; justify-content: center !important; overflow: hidden !important; } #creatico-landing .cr-feature-image { position: static !important; left: auto !important; top: auto !important; width: 100% !important; height: 100% !important; max-height: 230px !important; object-fit: contain !important; transform: none !important; filter: none !important; } #creatico-landing .cr-feature-card:hover .cr-feature-image { filter: none !important; } #creatico-landing .cr-feature-card h3 { order: 0 !important; min-height: 0 !important; margin: 0 !important; font-size: 23px !important; line-height: 1.24 !important; } #creatico-landing .cr-feature-card p { order: 1 !important; margin: 9px 0 0 !important; font-size: 15.5px !important; line-height: 1.5 !important; } #creatico-landing .cr-underhood-head { margin-bottom: 32px !important; } /* ---------- НА ЧЁМ ДЕЛАЕМ (табы + сетка технологий) ---------- */ #creatico-landing [style*="width: calc(100% - 48px); max-width: 1200px; margin: 88px auto 0px"] { width: calc(100% - 40px) !important; margin-top: 32px !important; padding-top: 48px !important; } #creatico-landing [data-tech-tabs] { gap: 8px !important; margin-bottom: 28px !important; } #creatico-landing [data-tech-tabs] > div { height: 32px !important; padding: 0 12px !important; font-size: 12px !important; } #creatico-landing [data-tech-grid] { grid-template-columns: repeat(2, minmax(0,1fr)) !important; gap: 12px !important; } #creatico-landing .cr-stack-tile { min-height: auto !important; height: auto !important; padding: 16px !important; border-radius: 18px !important; align-self: stretch !important; } #creatico-landing .cr-stack-logo-wrap { height: 40px !important; margin-bottom: 10px !important; } #creatico-landing .cr-stack-logo { height: 40px !important; } #creatico-landing .cr-stack-logo-empty { width: 34px !important; height: 34px !important; } #creatico-landing .cr-stack-name { font-size: 13.5px !important; line-height: 1.25 !important; } #creatico-landing .cr-stack-caption { margin-top: 5px !important; font-size: 11px !important; line-height: 1.3 !important; } /* ---------- КЕЙСЫ ---------- */ #creatico-landing .cr-case-wide { grid-template-columns: 1fr !important; gap: 20px !important; min-height: auto !important; padding: 22px !important; } #creatico-landing .cr-case-visual-wrap { order: -1 !important; height: 260px !important; } #creatico-landing .cr-case-accent { left: 12px !important; bottom: 12px !important; gap: 6px !important; height: 28px !important; padding: 0 10px !important; } #creatico-landing .cr-case-accent-dot { width: 5px !important; height: 5px !important; } #creatico-landing .cr-case-accent-value { font-size: 13px !important; } #creatico-landing .cr-case-accent-divider { height: 12px !important; } #creatico-landing .cr-case-accent-label { font-size: 10.5px !important; } #creatico-landing .cr-cases-medium { grid-template-columns: minmax(0, 1fr) !important; gap: 16px !important; } #creatico-landing .cr-case-medium { box-sizing: border-box !important; min-width: 0 !important; } #creatico-landing .cr-case-name { font-size: 18px !important; line-height: 1.3 !important; margin-bottom: 14px !important; } #creatico-landing .cr-case-chips { gap: 5px !important; margin-bottom: 14px !important; } #creatico-landing .cr-case-chip { min-height: 22px !important; padding: 0 7px !important; font-size: 10px !important; border-radius: 7px !important; } #creatico-landing .cr-case-medium { padding: 18px !important; } #creatico-landing .cr-case-medium-visual { margin-bottom: 16px !important; } /* ---------- КЕЙСЫ: сворачивание длинных карточек на мобиле ---------- По умолчанию (и если JS не отметил карточку как длинную) всё показывается полностью — так безопасно и на десктопе, и как fallback без JS. */ /* max-height анимируется до реального пиксельного значения, которое проставляет JS (инлайн-стилем) — так переход всегда плавный и точный, без обрезки контента, даже если высота строки заранее не известна. */ #creatico-landing .cr-case-point--extra { opacity: 1; overflow: hidden; transition: max-height 300ms cubic-bezier(.22,1,.36,1), opacity 220ms ease; } #creatico-landing .cr-case-collapse { overflow: hidden; transition: max-height 300ms cubic-bezier(.22,1,.36,1); } #creatico-landing .cr-case-fade, #creatico-landing .cr-case-more { display: none; } #creatico-landing .cr-case-wide.cr-case--collapsible:not(.is-case-expanded) .cr-case-point--extra { max-height: 0 !important; opacity: 0; } #creatico-landing .cr-case-wide.cr-case--collapsible:not(.is-case-expanded) .cr-case-collapse { max-height: 0 !important; } /* Мягкое затухание в цвет карточки — сигнал "здесь есть продолжение", без резкой границы среза. */ #creatico-landing .cr-case-wide.cr-case--collapsible:not(.is-case-expanded) .cr-case-fade { display: block; margin-top: -48px; height: 48px; position: relative; z-index: 1; background: linear-gradient(to bottom, rgba(246,246,247,0), rgba(246,246,247,.85) 55%, rgba(246,246,247,1)); pointer-events: none; } /* "Развернуть" — второстепенное, служебное действие: чёрный курсив, без фирменного розового и без веса кнопки, чтобы не спорить за внимание с "Подробнее" (это остаётся основным CTA карточки, см. .cr-case-link). Прижато ближе к тексту над ним (минимальный верхний паддинг) — нижний оставлен побольше для удобной tap-area. */ #creatico-landing .cr-case-wide.cr-case--collapsible:not(.is-case-expanded) .cr-case-more { display: flex; align-items: center; justify-content: center; gap: 5px; width: 100%; margin: 0 0 8px; padding: 0 4px 10px; border: none; background: none; color: #000; font-family: inherit; font-size: 13px; font-weight: 600; line-height: 1; text-align: center; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: opacity 150ms ease; } #creatico-landing .cr-case-wide.cr-case--collapsible:not(.is-case-expanded) .cr-case-more:active { opacity: .6; } /* Курсив — только на тексте, стрелка остаётся прямой. */ #creatico-landing .cr-case-more-text { font-style: italic; } #creatico-landing .cr-case-more-arrow { font-size: 10px; line-height: 1; opacity: .75; font-style: normal; } /* Между служебной ссылкой и основным CTA — заметный, но не разделяющий карточку надвое интервал (иначе это выглядит как две одинаковые кнопки подряд). */ #creatico-landing .cr-case-wide.cr-case--collapsible:not(.is-case-expanded) .cr-case-more + .cr-case-link { margin-top: 2px !important; } /* ---------- ПРОЦЕСС ---------- На mobile Gantt (горизонтальная таблица с прокруткой) заменяем на вертикальный timeline — сам Gantt десктопа при этом не трогаем. */ #creatico-landing .cr-process-timeline { display: none !important; } #creatico-landing .cr-ptl { display: block !important; margin-top: 4px; } #creatico-landing .cr-ptl-list { position: relative; margin: 0; padding: 0; list-style: none; } #creatico-landing .cr-ptl-list::before { content: ''; position: absolute; top: 6px; bottom: 6px; left: 14px; width: 1px; background: rgba(255,255,255,.14); z-index: 0; } #creatico-landing .cr-ptl-step, #creatico-landing .cr-ptl-milestone { position: relative; z-index: 1; display: grid; grid-template-columns: 29px 1fr; column-gap: 14px; } #creatico-landing .cr-ptl-step { align-items: flex-start; padding: 13px 0; } #creatico-landing .cr-ptl-step--last { padding-bottom: 13px; } #creatico-landing .cr-ptl-num { width: 29px; height: 29px; margin-top: 2px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: #242427; border: 1px solid rgba(249,55,98,.4); box-sizing: border-box; color: #F93762; font-family: 'Unbounded', sans-serif; font-size: 11px; font-weight: 700; } #creatico-landing .cr-ptl-body { display: flex; flex-direction: column; gap: 6px; min-width: 0; padding-top: 4px; } #creatico-landing .cr-ptl-title { color: #fff; font-size: 15px; font-weight: 600; line-height: 1.3; } #creatico-landing .cr-ptl-duration { align-self: flex-start; padding: 4px 10px; border-radius: 999px; box-sizing: border-box; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); color: rgba(255,255,255,.62); font-size: 14px; font-weight: 600; line-height: 1.3; white-space: nowrap; } #creatico-landing .cr-ptl-milestone { align-items: center; padding: 6px 0; } #creatico-landing .cr-ptl-milestone-dot { width: 9px; height: 9px; justify-self: center; background: #abbda2; border-radius: 1px; transform: rotate(45deg); } #creatico-landing .cr-ptl-milestone-text { color: #abbda2; font-size: 14px; font-weight: 600; line-height: 1.35; } #creatico-landing .cr-ptl-note { margin: 14px 0 0; color: rgba(255,255,255,.42); font-size: 12px; line-height: 1.5; } #creatico-landing .cr-process-cards { grid-template-columns: 1fr !important; gap: 16px !important; margin-top: 28px !important; } #creatico-landing .cr-process-card { min-height: auto !important; } /* margin-top:auto у плашки "Аванс 50%"/"Оплата 50%" рассчитан на карточку фиксированной высоты (десктоп) — на mobile карточка стала высотой по контенту, auto-отступ схлопнулся в 0, и плашка прилипла к тексту. */ #creatico-landing .cr-process-payment-chip { margin-top: 14px !important; } /* "Что нужно от вас" / "Оплата" — на mobile картинка+заголовок+текст собираются в один цельный блок. min-height:100% из десктопной вёрстки (там картинка — узкая колонка во всю высоту строки) на mobile-колонке разворачивался в реальную высоту контента (250-300px) и обрезал заголовок за нижний край карточки — явно проставляем высоту и снимаем min-height, чтобы картинка была ровно одного размера у обеих карточек. */ #creatico-landing .cr-process-bottom { grid-template-columns: 1fr !important; gap: 18px !important; margin-top: 28px !important; } #creatico-landing .cr-process-info { flex-direction: column !important; align-items: stretch !important; padding: 18px !important; box-sizing: border-box !important; overflow: hidden !important; } #creatico-landing .cr-process-info-visual { width: 100% !important; height: 130px !important; max-height: 130px !important; min-height: 0 !important; flex: none !important; margin: 0 0 16px !important; background-size: 41% !important; } #creatico-landing .cr-process-info-content { gap: 0 !important; min-width: 0 !important; } #creatico-landing .cr-process-info-title { margin: 0 !important; font-size: 22px !important; line-height: 1.26 !important; } #creatico-landing .cr-process-info-text { margin: 9px 0 0 !important; font-size: 15.5px !important; line-height: 1.5 !important; } /* ---------- ЦЕНЫ (3 карточки) ---------- */ #creatico-landing [data-screen-label="Цены"] div[style*="grid-template-columns: repeat(3, minmax(0px, 1fr))"] { grid-template-columns: 1fr !important; gap: 16px !important; } /* Компактный мобильный ритм: меньше "воздуха" между заголовком блока и карточками, карточки ниже и плотнее, единая спокойная иерархия внутри. */ #creatico-landing .cr-price-head { gap: 8px !important; margin-bottom: 24px !important; } #creatico-landing [data-screen-label="Цены"] .cr-price-head h2 { font-size: 28px !important; } #creatico-landing [data-screen-label="Цены"] .cr-price-head p { font-size: 14.5px !important; } #creatico-landing .cr-price-card { padding: 20px !important; gap: 10px !important; border-radius: 16px !important; } #creatico-landing .cr-price-title { font-size: 16px !important; line-height: 1.28 !important; min-height: 0 !important; } #creatico-landing .cr-price-amount { font-size: 23px !important; } #creatico-landing .cr-price-desc { font-size: 12.5px !important; line-height: 1.4 !important; } #creatico-landing .cr-price-list { gap: 7px !important; padding-top: 12px !important; } #creatico-landing .cr-price-item { gap: 8px !important; } #creatico-landing .cr-price-icon { width: 13px !important; height: 13px !important; margin-top: 2px !important; } #creatico-landing .cr-price-text { font-size: 13px !important; line-height: 1.35 !important; } #creatico-landing .cr-price-cta-wrap { padding-top: 12px !important; } #creatico-landing .cr-price-cta { height: 42px !important; padding: 0 16px !important; font-size: 13.5px !important; border-radius: 10px !important; } #creatico-landing .cr-price-cta--accent { gap: 6px !important; } #creatico-landing .cr-price-badge { top: -10px !important; left: 20px !important; font-size: 9.5px !important; padding: 4px 9px !important; } /* Плашка "Из чего складывается цена" — десктопная 2-колоночная сетка (текст 2fr + узкая кнопка 1fr, min-width:280px) на mobile-ширине не помещалась и текст разваливался по одному слову на строку. */ #creatico-landing .cr-price-note { grid-template-columns: 1fr !important; gap: 18px !important; padding: 22px !important; margin-top: 24px !important; } #creatico-landing .cr-price-note > div:last-child { justify-content: stretch !important; } #creatico-landing .cr-price-note > div:last-child a { width: 100% !important; justify-content: center !important; } /* ---------- ПОСЛЕ ЗАПУСКА ---------- */ #creatico-landing [data-screen-label="После запуска"] div[style*="grid-template-columns: minmax(0px, 1fr) 520px"] { grid-template-columns: 1fr !important; gap: 28px !important; } #creatico-landing [data-support-preview] { display: none !important; } #creatico-landing [data-screen-label="После запуска"] div[style*="grid-template-columns: repeat(2, minmax(0px, 1fr))"] { grid-template-columns: 1fr !important; } /* ---------- ГАРАНТИИ ---------- */ /* Иллюстрация договора (документ + печать + бейдж "Работаем по ЭДО") на mobile убрана целиком: сразу после заголовка/подзаголовка идут карточки. */ /* Ровно 20px между подзаголовком ("...от цены до передачи доступов.") и первой карточкой ("Цена зафиксирована"). */ #creatico-landing .cr-guarantees-layout { grid-template-columns: 1fr !important; gap: 20px !important; } #creatico-landing .cr-contract-scene { display: none !important; } /* grid-auto-rows:1fr (десктоп, для ровных 2х-колоночных рядов) на mobile-колонке растягивал все карточки под самую длинную — у карточек с коротким текстом получался огромный лишний отступ снизу. На mobile карточка должна сидеть по высоте контента, с равным padding сверху и снизу (он уже одинаковый — 24px), без принудительного растягивания. */ #creatico-landing .cr-guarantees-cards { grid-template-columns: 1fr !important; grid-auto-rows: auto !important; gap: 16px !important; padding-top: 0 !important; } #creatico-landing .cr-guarantee-card { min-height: 0 !important; height: auto !important; } /* ---------- РУКОВОДИТЕЛЬ ---------- Desktop-порядок в DOM: фото-карточка, затем текстовая колонка целиком (лейбл+заголовок, абзац, цитата, теги команды). На mobile нужен другой порядок чтения: заголовок → фото → абзац → цитата → теги команды — то есть фото-карточка должна встать МЕЖДУ заголовком и абзацем, хотя в DOM они лежат в разных колонках. Решаем через display:contents на текстовой колонке (её дети становятся прямыми flex-item'ами внешнего контейнера наравне с фото-карточкой) + flex order на каждом элементе. */ /* gap:0 — весь ритм задаём точными margin на каждом элементе ниже, чтобы не складывать "gap контейнера + собственный margin элемента" (именно так набегали лишние пиксели между фото и абзацем/цитатой). */ #creatico-landing [data-screen-label="Руководитель"] div[style*="grid-template-columns: 380px"] { display: flex !important; flex-direction: column !important; gap: 0 !important; } #creatico-landing [data-screen-label="Руководитель"] div[style*="min-width: 0px; display: flex; flex-direction: column; align-items: stretch;"] { display: contents !important; } /* Фото-карточка — более вытянута по вертикали (лицо не обрезается) и всегда центрирована по ширине блока явным width, а не "случайным" intrinsic-размером через align-items: start (из-за него карточку раньше прижимало влево). */ #creatico-landing [data-screen-label="Руководитель"] div[style*="height: 506px"] { order: 2 !important; height: 420px !important; width: 300px !important; max-width: 100% !important; margin: 0 auto 20px !important; } #creatico-landing [data-screen-label="Руководитель"] div[style*="margin-bottom: 18px; font-size: 12px"] { order: 1 !important; margin-bottom: 16px !important; } #creatico-landing [data-screen-label="Руководитель"] h2 { order: 1 !important; margin-bottom: 24px !important; } #creatico-landing [data-screen-label="Руководитель"] p[style*="margin: 24px 0px 0px"] { order: 3 !important; margin-top: 0 !important; margin-bottom: 20px !important; } #creatico-landing [data-screen-label="Руководитель"] div[style*="padding: 28px 32px; border-radius: 18px; background: rgb(42, 42, 45)"] { order: 4 !important; margin-top: 0 !important; } #creatico-landing [data-screen-label="Руководитель"] div[style*="flex-direction: column; align-items: flex-start; margin-top: 28px;"] { order: 5 !important; } /* Подпись поверх фото — компактнее, под более вытянутую карточку. */ #creatico-landing [data-screen-label="Руководитель"] strong[style*="font-size: 26px"] { font-size: 19px !important; } #creatico-landing [data-screen-label="Руководитель"] span[style*="margin-top: 7px"] { font-size: 13px !important; } /* Цитата — мельче, чтобы не спорила по весу с остальным текстом блока. */ #creatico-landing [data-screen-label="Руководитель"] p[style*="font-size: 18px; line-height: 1.6; color: rgba(255, 255, 255, 0.9)"] { font-size: 14.5px !important; line-height: 1.55 !important; } #creatico-landing [data-screen-label="Руководитель"] div[style*="flex-wrap: nowrap; margin-top: 12px"] { flex-wrap: wrap !important; } /* ---------- ОТЗЫВЫ ---------- */ #creatico-landing [data-screen-label="Отзывы"] div[style*="grid-template-columns: minmax(0px, 50fr) minmax(0px, 50fr)"] { grid-template-columns: 1fr !important; gap: 32px !important; } /* ---------- КВИЗ / ФОРМА ---------- Desktop-порядок в DOM: левая колонка целиком (лейбл+заголовок+текст, затем контакты — TG/Max/WhatsApp, почта, наш канал), потом квиз-карточка справа. На mobile нужно: заголовок → квиз → контакты. Тот же приём, что и в "Руководителе": display:contents на левой колонке "растворяет" её, и её дети выстраиваются через flex order наравне с квиз-карточкой. */ #creatico-landing [data-screen-label="Квиз"] div[style*="grid-template-columns: minmax(0px, 1fr) 560px"] { display: flex !important; flex-direction: column !important; gap: 28px !important; } /* Точное совпадение атрибута (не *=), иначе подхватывает и квиз-карточку — её style тоже НАЧИНАЕТСЯ с "display: flex; flex-direction: column; gap: 20px;". */ #creatico-landing [data-screen-label="Квиз"] div[style="display: flex; flex-direction: column; gap: 20px;"] { display: contents !important; } #creatico-landing [data-screen-label="Квиз"] div[style="display: flex; flex-direction: column; gap: 20px;"] > div[style*="font-size: 12px; letter-spacing: 0.1em"], #creatico-landing [data-screen-label="Квиз"] h2, #creatico-landing [data-screen-label="Квиз"] div[style="display: flex; flex-direction: column; gap: 20px;"] > p { order: 1 !important; } #creatico-landing [data-screen-label="Квиз"] .cr-quiz-card { order: 2 !important; } #creatico-landing [data-screen-label="Квиз"] div[style*="gap: 10px; padding-top: 12px;"], #creatico-landing [data-screen-label="Квиз"] div[style*="gap: 10px; padding-top: 16px;"] { order: 3 !important; } /* Квиз-карточка на mobile: один столбец вариантов, крупные поля (16px — чтобы iOS не открывал зум при фокусе), удобная зона нажатия. */ #creatico-landing .cr-quiz-card { width: 100% !important; padding: 24px 20px !important; } #creatico-landing .cr-quiz-options { grid-template-columns: 1fr !important; } #creatico-landing .cr-quiz-input, #creatico-landing .cr-quiz-textarea { font-size: 16px !important; } #creatico-landing .cr-quiz-option { font-size: 15px !important; } #creatico-landing .cr-quiz-actions { flex-direction: column !important; align-items: stretch !important; } #creatico-landing .cr-quiz-next { width: 100% !important; } #creatico-landing .cr-quiz-title { font-size: 20px !important; } /* "Или напишите напрямую": TG/Max/WhatsApp — компактнее по паддингам и шрифту, чтобы все три помещались в одну строку на любой mobile-ширине. */ #creatico-landing [data-screen-label="Квиз"] div[style*="gap: 10px; flex-wrap: wrap;"] { gap: 6px !important; } #creatico-landing [data-screen-label="Квиз"] div[style*="gap: 10px; flex-wrap: wrap;"] a { gap: 5px !important; padding: 6px 10px 6px 6px !important; font-size: 12.5px !important; } #creatico-landing [data-screen-label="Квиз"] div[style*="gap: 10px; flex-wrap: wrap;"] a img { width: 19px !important; height: 19px !important; } /* Почта: на mobile подсказка "(Скопировать)" не нужна — hover-эффект на тач-устройствах срабатывает непредсказуемо и надпись "мигает" перед кликом. Оставляем только клик → копирование → всплывающее "Скопировано". */ #creatico-landing .cr-copy-email-hint { display: none !important; } } /* ---------- SMALL MOBILE <=480px: точечные уточнения ---------- */ @media (max-width: 480px) { #creatico-landing { --cr-page-gutter: 16px; } #creatico-landing h1 { font-size: 34px !important; } #creatico-landing h2 { font-size: 28px !important; } #creatico-landing [data-screen-label="Hero"] h1 { font-size: 32px !important; } #creatico-landing [data-screen-label="Hero"] div[style*="gap: 26px; margin-bottom: 26px"] > div { min-width: 0 !important; } #creatico-landing .cr-vendor-row { grid-template-columns: 150px repeat(4, 172px) !important; } #creatico-landing .cr-vendor-row > * { padding: 13px 12px !important; font-size: 13px !important; } #creatico-landing .cr-feature-card { width: 88vw !important; flex: 0 0 88vw !important; } #creatico-landing .cr-situation-option { font-size: 10px !important; letter-spacing: 0.02em !important; } } /* ---------- ОЧЕНЬ УЗКИЕ ЭКРАНЫ <=360px ---------- */ @media (max-width: 360px) { #creatico-landing [data-tech-grid] { grid-template-columns: 1fr !important; } }