/* Лендинг «Много денег» — «Новый вид». Плоские поверхности, крупные радиусы, мятный акцент, две темы (data-theme на ), плавающая таблетка-навигация. Токены совпадают с ~/katyshev-money/web/look-new.css и ~/miniapp-ds (бренд money). Шрифты локальные: Onest — текст, Unbounded — цифры. Mobile-first: базовые правила написаны под телефон 320–430 px, всё, что шире, добавляется через min-width. Тач-цели ≥ 44 px, поля ≥ 16 px. */ /* ---------- токены ---------- */ :root { color-scheme: light; --bg: #FFFFFF; --surface: #F4F5F7; /* карточка на странице */ --surface-3: #E9ECF1; /* шкалы, «утопленные» элементы */ --line: #E3E6EC; --band: #F4F5F7; /* плашка-секция */ --surface-b: #FFFFFF; /* карточка внутри плашки */ --text: #111418; --text-2: #40485A; --muted: #6A7180; --brand: #0C7A51; --brand-2: #3DDC97; --on-brand: #FFFFFF; --brand-a10: rgba(12, 122, 81, .10); --brand-a20: rgba(12, 122, 81, .20); --nav-bg: #FFFFFF; --sheet-bg: #FFFFFF; --backdrop: rgba(10, 14, 20, .5); --shadow-float: 0 14px 34px -14px rgba(14, 34, 61, .34), 0 1px 3px rgba(14, 34, 61, .08); --warn: #8A5600; --warn-bg: #FCF6EA; --loss: #C52F2F; --web: #1E7FE0; --display: "Onest", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --num-face: "Unbounded", "Trebuchet MS", sans-serif; --mono: "SFMono-Regular", ui-monospace, Menlo, Consolas, monospace; --r-md: 16px; --r-lg: 24px; --r-xl: 32px; --ease: cubic-bezier(.22, .61, .36, 1); --wrap: 1120px; } :root[data-theme="dark"] { color-scheme: dark; --bg: #08090C; --surface: #161A22; --surface-3: #222733; --line: #262C38; --band: #10141B; --surface-b: #1A1F29; --text: #EDEFF3; --text-2: #B4BBC9; --muted: #8B94A7; --brand: #3DDC97; --brand-2: #7BE8C0; --on-brand: #04120C; --brand-a10: rgba(61, 220, 151, .12); --brand-a20: rgba(61, 220, 151, .22); --nav-bg: #10141B; --sheet-bg: #10141B; --backdrop: rgba(0, 0, 0, .66); --shadow-float: 0 18px 44px -14px rgba(3, 11, 20, .9), 0 0 0 1px rgba(255, 255, 255, .06); --warn: #F5A623; --warn-bg: #1E1A12; --loss: #FF6B6B; --web: #3E9DFF; } /* Тёмный «остров»: карточка с мятным свечением, как «Итог месяца» в приложении. Одинаково тёмный в обеих темах; токены переопределяются, а не компоненты. */ .ink { --surface: rgba(255, 255, 255, .07); --surface-3: rgba(255, 255, 255, .13); --line: rgba(255, 255, 255, .12); --text: #EDEFF3; --text-2: #BAC5BF; --muted: #95A59D; --brand: #3DDC97; --brand-2: #7BE8C0; --on-brand: #04120C; --brand-a10: rgba(61, 220, 151, .14); --brand-a20: rgba(61, 220, 151, .26); --warn: #F5A623; color: var(--text); background: radial-gradient(120% 90% at 100% 0%, rgba(61, 220, 151, .30) 0%, transparent 58%), linear-gradient(160deg, #0E1512, #16261D); } /* ---------- база ---------- */ * { box-sizing: border-box; } [hidden] { display: none !important; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--display); font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-wrap: break-word; padding-bottom: calc(96px + env(safe-area-inset-bottom)); } img { max-width: 100%; } a { color: inherit; } :focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; } .sr { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .skip { position: absolute; left: 12px; top: -60px; z-index: 100; padding: 12px 18px; border-radius: 999px; background: var(--brand); color: var(--on-brand); font-weight: 600; text-decoration: none; } .skip:focus { top: 12px; } .wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 max(20px, env(safe-area-inset-left)) 0 max(20px, env(safe-area-inset-right)); } section { padding: 56px 0; scroll-margin-top: 16px; } h1, h2, h3, h4 { margin: 0; letter-spacing: -.03em; text-wrap: balance; } h1 { font-size: clamp(34px, 10vw, 66px); font-weight: 700; line-height: 1.04; letter-spacing: -.04em; } h2 { font-size: clamp(27px, 7.4vw, 46px); font-weight: 700; line-height: 1.08; margin-bottom: 16px; } h3 { font-size: 20px; font-weight: 700; line-height: 1.25; letter-spacing: -.025em; margin-bottom: 8px; } p { margin: 0 0 14px; color: var(--text-2); } .lead { font-size: 17px; line-height: 1.55; color: var(--text-2); max-width: 62ch; } .muted { color: var(--muted); } .num { font-family: var(--num-face); font-variant-numeric: tabular-nums; letter-spacing: -.04em; } .eyebrow { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 14px; font-size: 14px; font-weight: 600; letter-spacing: -.01em; color: var(--brand); } .eyebrow::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--brand); } code { font-family: var(--mono); } /* ---------- плашки-секции ---------- */ .band { margin: 0 10px; padding: 48px 0; border-radius: var(--r-xl); background: var(--band); --surface: var(--surface-b); } .band.ink { --surface: rgba(255, 255, 255, .07); background: radial-gradient(120% 90% at 100% 0%, rgba(61, 220, 151, .30) 0%, transparent 58%), linear-gradient(160deg, #0E1512, #16261D); } /* ---------- шапка ---------- */ .top .wrap { display: flex; align-items: center; justify-content: space-between; min-height: 68px; } .brand { font-weight: 700; font-size: 17px; letter-spacing: -.02em; text-decoration: none; } .brand span { color: var(--brand); } .theme-toggle { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-width: 44px; height: 44px; padding: 0 12px; border: 0; border-radius: 999px; cursor: pointer; background: var(--surface); color: var(--text-2); font: 600 14px var(--display); } .theme-toggle svg { width: 20px; height: 20px; flex: none; } .theme-toggle .t-moon { display: none; } :root[data-theme="light"] .theme-toggle .t-moon { display: block; } :root[data-theme="light"] .theme-toggle .t-sun { display: none; } .theme-toggle #theme-label { display: none; } /* ---------- кнопки ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 26px; border: 0; border-radius: 999px; cursor: pointer; background: var(--surface-3); color: var(--text); font: 600 16.5px/1.15 var(--display); text-align: center; text-decoration: none; -webkit-tap-highlight-color: transparent; transition: transform .15s var(--ease), filter .15s, background .15s; } .btn.primary { background: var(--brand); color: var(--on-brand); } .btn.ghost { background: var(--surface); } .btn.block { width: 100%; } .btn.lg { min-height: 58px; font-size: 17.5px; } .btn:active { transform: scale(.98); } @media (hover: hover) { .btn:hover { filter: brightness(1.07); } } .btn .ic { width: 20px; height: 20px; } /* ---------- иконки ---------- */ .ic { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex: none; } /* ---------- подстановки цены: закрыто/открыто ---------- */ :root[data-sales="open"] .only-closed { display: none !important; } :root:not([data-sales="open"]) .only-open { display: none !important; } .buy-note { margin: 12px 0 0; font-size: 14px; color: var(--muted); text-align: center; } /* ---------- герой ---------- */ .hero { padding: 24px 0 40px; } .hero-grid { display: grid; gap: 22px; grid-template-areas: "copy" "offer" "links"; } .hero-copy { grid-area: copy; } .offer { grid-area: offer; } .hero-links { grid-area: links; } .hero h1 span { color: var(--brand); } .hero .lead { margin: 20px 0 0; } .hero-links { display: flex; flex-wrap: wrap; gap: 10px; } .offer { border-radius: 28px; padding: 24px; } .offer .chip { display: inline-flex; align-items: center; min-height: 32px; padding: 0 14px; border-radius: 999px; background: var(--brand-a10); color: var(--brand); font-size: 14px; font-weight: 600; } .o-price { margin: 16px 0 0; font: 700 clamp(46px, 14vw, 60px)/1 var(--num-face); letter-spacing: -.05em; color: var(--text); } .o-price small { font-family: var(--display); font-weight: 500; font-size: 16px; letter-spacing: 0; color: var(--text-2); margin-left: 6px; } .o-sub { margin: 8px 0 0; font-size: 15px; color: var(--text-2); } .ladder-line { display: flex; flex-wrap: wrap; column-gap: 10px; margin: 18px 0 0; font-size: 15.5px; color: var(--text); font-weight: 600; } .ladder-line span { color: var(--muted); font-weight: 400; } .ladder-line [data-next-text] { white-space: nowrap; } .ladder-bar { height: 8px; margin: 10px 0 0; border-radius: 999px; background: var(--surface-3); overflow: hidden; } .ladder-bar i { display: block; width: 0; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--brand), var(--brand-2)); transition: width 1s var(--ease); } .offer .btn { margin-top: 20px; } .offer .app-note { display: flex; gap: 10px; align-items: flex-start; margin: 18px 0 0; padding-top: 16px; border-top: 1px solid var(--line); font-size: 14px; line-height: 1.45; color: var(--text-2); } .offer .app-note .ic { width: 20px; height: 20px; color: var(--brand); margin-top: 1px; } .offer .app-note a { color: var(--text); text-underline-offset: 3px; } /* горизонтальная лента на телефоне; на планшете и выше — сетка */ .snap { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; margin: 0 -20px; padding: 0 20px 6px; scroll-padding: 0 20px; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .snap::-webkit-scrollbar { display: none; } .snap > * { flex: 0 0 min(78vw, 320px); margin: 0; scroll-snap-align: start; } .hero .snap { margin-top: 36px; } .tile { display: flex; flex-direction: column; overflow: hidden; border-radius: var(--r-lg); background: var(--surface); } .tile-head { padding: 22px 22px 16px; } .tile-head h3 { font-size: 19px; } .tile-head p { margin: 0; font-size: 15px; line-height: 1.45; } .tile-shot { margin-top: auto; height: 280px; padding: 0 20px; overflow: hidden; } .tile-shot img { display: block; width: 100%; height: auto; border-radius: 16px 16px 0 0; } .tile.accent { background: var(--brand); } .tile.accent h3 { color: var(--on-brand); } .tile.accent p { color: var(--on-brand); opacity: .82; } /* ---------- факты ---------- */ .facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 28px; } .fact { padding: 18px 16px; border-radius: 20px; background: var(--surface); } .fact .ic { color: var(--brand); margin-bottom: 10px; } .fact b { display: block; margin-bottom: 4px; font: 700 clamp(16px, 5vw, 21px)/1.15 var(--num-face); letter-spacing: -.045em; color: var(--text); overflow-wrap: anywhere; } .fact span { font-size: 14px; line-height: 1.4; color: var(--muted); } /* ---------- карточки и сетки ---------- */ .card { padding: 22px; border-radius: var(--r-lg); background: var(--surface); } .card > :last-child { margin-bottom: 0; } .card .btn.ghost { background: var(--surface-3); margin-top: 6px; } .grid-2, .grid-3 { display: grid; gap: 12px; } .warn-box { background: var(--warn-bg); } .warn-box h3 { color: var(--warn); } .list { list-style: none; margin: 0; padding: 0; } .list li { position: relative; padding: 12px 0 12px 30px; border-bottom: 1px solid var(--line); color: var(--text-2); font-size: 15.5px; line-height: 1.5; } .list li:last-child { border-bottom: 0; } .list li::before { content: ""; position: absolute; left: 2px; top: 16px; width: 16px; height: 16px; background: var(--brand); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.2 4.2L19 7.2'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.2 4.2L19 7.2'/%3E%3C/svg%3E") center / contain no-repeat; } .list.no li::before { -webkit-mask: none; mask: none; width: 10px; height: 2px; top: 25px; left: 4px; border-radius: 2px; background: var(--muted); } .list.soon li::before { background: var(--web); } .worth { display: flex; gap: 14px; align-items: flex-start; margin-top: 22px; padding: 18px 20px; border-radius: var(--r-lg); background: var(--brand-a10); } .worth .ic { color: var(--brand); margin-top: 2px; } .worth b { display: block; margin-bottom: 3px; color: var(--text); font-size: 16px; } .worth span { font-size: 15px; line-height: 1.5; color: var(--text-2); } .worth em { font-style: normal; font-weight: 700; color: var(--brand); } /* ---------- всё в одном месте ---------- */ .oneplace { display: grid; gap: 12px; margin-top: 28px; } .scatter { display: grid; gap: 8px; } .scatter > div { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 18px; background: var(--surface); color: var(--muted); font-size: 14.5px; line-height: 1.35; } .scatter .ic { width: 20px; height: 20px; } .scatter b { display: block; color: var(--text-2); font-weight: 600; } .merge { display: grid; place-items: center; height: 40px; color: var(--brand); transform: rotate(90deg); } .merge svg { width: 32px; height: 32px; stroke: currentColor; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; } .united { padding: 24px; border-radius: var(--r-lg); background: var(--brand); color: var(--on-brand); } .united h3, .united p { color: var(--on-brand); } .united p { opacity: .85; font-size: 15.5px; } .united-row { display: flex; gap: 8px; margin-bottom: 20px; } .united-row span { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; background: rgba(255, 255, 255, .18); } :root[data-theme="dark"] .united-row span { background: rgba(4, 18, 12, .14); } .united .sum { margin-top: 18px; padding-top: 16px; border-top: 1px solid rgba(255, 255, 255, .28); font-weight: 700; font-size: 16.5px; letter-spacing: -.02em; } :root[data-theme="dark"] .united .sum { border-color: rgba(4, 18, 12, .22); } /* ---------- две колонки ---------- */ .duo { display: grid; gap: 32px; } .cta { display: flex; flex-direction: column; gap: 10px; margin-top: 26px; } /* ---------- скриншот с выносками ---------- */ .annot { position: relative; display: block; max-width: 340px; margin: 0 auto; } .annot img { display: block; width: 100%; height: auto; border-radius: 22px; } .pin { position: absolute; transform: translate(-50%, -50%); display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; border: 3px solid var(--band); background: var(--brand); color: var(--on-brand); font-weight: 700; font-size: 14px; } .annot-list { list-style: none; margin: 0; padding: 0; } .annot-list li { display: flex; gap: 14px; align-items: flex-start; padding: 14px 0; border-bottom: 1px solid var(--line); font-size: 15.5px; line-height: 1.5; color: var(--text-2); } .annot-list li:last-child { border-bottom: 0; } .annot-list i { flex: none; display: grid; place-items: center; width: 26px; height: 26px; margin-top: 1px; border-radius: 50%; background: var(--brand-a10); color: var(--brand); font: 700 13px var(--display); font-style: normal; } .annot-list b { color: var(--text); font-weight: 600; } /* ---------- экраны приложения ---------- */ .shots { margin-top: 22px; } .shots.snap { align-items: flex-start; } .shot { display: flex; flex-direction: column-reverse; justify-content: flex-end; overflow: hidden; border-radius: var(--r-lg); background: var(--surface); } .shot img { display: block; width: 100%; height: auto; } .shot figcaption { padding: 20px 20px 16px; } .shot figcaption b { display: block; margin-bottom: 4px; font-size: 18px; font-weight: 700; letter-spacing: -.02em; } .shot figcaption span { font-size: 14.5px; line-height: 1.45; color: var(--muted); } .feat h4 { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; font-size: 19px; font-weight: 700; } .feat h4 .ic { width: 22px; height: 22px; color: var(--brand); } .feat ul { list-style: none; margin: 0; padding: 0; } .feat li { position: relative; padding: 8px 0 8px 18px; font-size: 15px; line-height: 1.5; color: var(--muted); } .feat li::before { content: ""; position: absolute; left: 0; top: 17px; width: 6px; height: 6px; border-radius: 50%; background: var(--brand-a20); } .feat li b { font-weight: 600; color: var(--text-2); } /* ---------- как добавить ---------- */ .demo { display: grid; gap: 22px; margin-top: 26px; } .chat { padding: 18px; border-radius: var(--r-lg); background: var(--surface); min-height: 210px; } .chat-you { margin-left: auto; max-width: 92%; min-height: 48px; padding: 12px 16px; border-radius: 18px 18px 6px 18px; background: var(--brand); color: var(--on-brand); font-size: 16px; font-variant-ligatures: none; } .caret { display: inline-block; width: 2px; height: 17px; margin-left: 1px; vertical-align: -3px; background: currentColor; animation: blink 1s steps(2) infinite; } @keyframes blink { 50% { opacity: 0; } } .chat-bot { margin-top: 12px; max-width: 96%; padding: 16px 18px; border-radius: 18px 18px 18px 6px; background: var(--bg); font-size: 15px; opacity: 0; transform: translateY(8px); transition: opacity .35s var(--ease), transform .35s var(--ease); } .band .chat-bot { background: var(--bg); } .chat-bot.on { opacity: 1; transform: none; } .chat-bot b { display: block; margin-bottom: 8px; font-size: 17px; } .chat-bot .kv { color: var(--muted); } .chat-btns { display: flex; gap: 8px; margin-top: 14px; } .chat-btns span { flex: 1; padding: 10px 6px; border-radius: 12px; background: var(--surface); color: var(--muted); font-size: 13.5px; text-align: center; } .chat-btns span:last-child { background: var(--brand); color: var(--on-brand); font-weight: 600; } .parse { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 24px; } .tok { position: relative; padding: 20px 16px 16px; border-radius: 18px; background: var(--surface); transition: background .25s; } .tok:last-child:nth-child(odd) { grid-column: 1 / -1; } .tok::before { content: ""; position: absolute; left: 16px; right: 16px; top: 0; height: 3px; border-radius: 0 0 3px 3px; background: var(--surface-3); } .tok.key::before, .tok.lit::before { background: var(--brand); } .tok b { display: block; font-size: 18px; letter-spacing: -.03em; color: var(--text); overflow-wrap: anywhere; } .tok.key b { color: var(--brand); } .tok span { display: block; margin-top: 6px; font-size: 13px; line-height: 1.35; color: var(--muted); } .tok.lit { background: var(--brand-a10); } .parse-after { margin-top: 16px; font-size: 15px; color: var(--muted); } .parse-after b { color: var(--text-2); font-weight: 600; } .ways { display: grid; gap: 10px; margin-top: 26px; } .way { padding: 22px; border-radius: var(--r-lg); background: var(--surface); } .way i { display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: 14px; border-radius: 14px; background: var(--brand-a10); color: var(--brand); } .way b { display: block; margin-bottom: 6px; font-size: 18px; font-weight: 700; letter-spacing: -.02em; } .way span { font-size: 14.5px; line-height: 1.45; color: var(--muted); } .dirs-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; } .dirs-chips span { display: inline-flex; align-items: center; gap: 9px; min-height: 40px; padding: 0 16px; border-radius: 999px; background: var(--surface); font-size: 15px; font-weight: 600; color: var(--text-2); } .dirs-chips span.on { background: var(--text); color: var(--bg); } .dirs-chips i { width: 9px; height: 9px; border-radius: 50%; flex: none; } .d-mafia { background: #FF6B6B; } .d-mkt { background: #F5A623; } .d-web { background: #3E9DFF; } .d-other { background: #8B98A5; } .dirs-link { display: inline-block; padding: 4px 10px; border-radius: 8px; background: var(--brand-a10); color: var(--brand); font-family: var(--mono); font-size: 14px; } .panel-card { padding: 22px; border-radius: var(--r-lg); background: var(--surface); } .panel-card h3 { font-size: 22px; margin-bottom: 16px; } .checklist { list-style: none; margin: 0; padding: 0; } .checklist li { display: flex; gap: 14px; align-items: flex-start; padding: 13px 0; border-bottom: 1px solid var(--line); font-size: 15.5px; line-height: 1.45; color: var(--text-2); } .checklist li:last-child { border-bottom: 0; } .checklist .ic { margin-top: 2px; color: var(--muted); } .checklist b { font-weight: 600; color: var(--text); } .panel-card .cta { margin-top: 20px; } /* ---------- таблицы ---------- */ .tbl { margin-top: 22px; overflow: hidden; border-radius: var(--r-lg); background: var(--surface); } .tbl table { width: 100%; border-collapse: collapse; } .tbl th, .tbl td { text-align: left; } .tbl thead { display: none; } .tbl tr { display: block; padding: 14px 16px; border-bottom: 1px solid var(--line); } .tbl tr:last-child { border-bottom: 0; } .tbl td { display: block; padding: 0; } .syntax td:first-child { margin-bottom: 8px; font-size: 13.5px; font-weight: 500; color: var(--muted); } .syntax code { display: inline-block; margin: 0 6px 6px 0; padding: 6px 10px; border-radius: 10px; background: var(--brand-a10); color: var(--brand); font-size: 14px; line-height: 1.4; white-space: normal; overflow-wrap: anywhere; } .syntax .alt code { background: var(--surface-3); color: var(--text-2); } .vs td { display: flex; justify-content: space-between; gap: 14px; padding: 5px 0; color: var(--muted); font-size: 15px; text-align: right; } .vs td::before { content: attr(data-l); flex: none; text-align: left; color: var(--muted); } .vs td:first-child { display: block; padding-bottom: 8px; color: var(--text); font-weight: 600; text-align: left; } .vs td:first-child::before { content: none; } .vs td.us { margin: 2px -10px; padding: 8px 10px; border-radius: 12px; background: var(--brand-a10); color: var(--text); font-weight: 600; } .vs td.us::before { color: var(--brand); font-weight: 600; } .vs .win { color: var(--brand); font-weight: 600; } .vs .them-win { color: var(--warn); font-weight: 600; } .vs-note { margin-top: 14px; font-size: 13.5px; color: var(--muted); } .vs-note a { color: var(--brand); } /* ---------- ленты и шаги ---------- */ .steps { display: grid; gap: 18px; margin-top: 22px; } .step { display: flex; gap: 14px; align-items: flex-start; } .step-n { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 12px; background: var(--brand-a10); color: var(--brand); font-weight: 700; font-size: 15px; } .step b { display: block; margin-bottom: 2px; font-size: 17px; font-weight: 700; letter-spacing: -.02em; } .step span { font-size: 15px; line-height: 1.5; color: var(--muted); } .pill { display: inline-flex; align-items: center; min-height: 32px; padding: 0 14px; margin-bottom: 16px; border-radius: 999px; background: var(--brand-a10); color: var(--brand); font-size: 13.5px; font-weight: 600; } .proof-nums { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 24px; } .proof-nums div { padding: 20px 16px; border-radius: 20px; background: var(--surface); } .proof-nums b { display: block; font: 700 clamp(18px, 5.2vw, 26px)/1.1 var(--num-face); letter-spacing: -.05em; color: var(--brand); overflow-wrap: anywhere; } .proof-nums div:first-child, .proof-nums div:last-child { grid-column: 1 / -1; } .proof-nums span { display: block; margin-top: 10px; font-size: 14px; line-height: 1.4; color: var(--muted); } .road h4 { display: flex; align-items: center; gap: 9px; margin: 0 0 12px; font-size: 17px; font-weight: 700; letter-spacing: -.02em; } .road h4 i { width: 9px; height: 9px; border-radius: 50%; flex: none; } .road .now i { background: var(--brand); } .road .soon i { background: var(--warn); } .road .chat i { background: var(--web); } .road ul { list-style: none; margin: 0; padding: 0; } .road li { position: relative; padding: 8px 0 8px 18px; font-size: 15px; line-height: 1.5; color: var(--muted); } .road li::before { content: ""; position: absolute; left: 0; top: 17px; width: 6px; height: 6px; border-radius: 50%; background: var(--surface-3); } .road .now li::before { background: var(--brand-a20); } /* ---------- прогресс приложения ---------- */ .prog-all { display: grid; gap: 14px; margin-top: 26px; padding: 22px; border-radius: var(--r-lg); background: var(--surface); } .prog-all .big { font: 700 clamp(44px, 13vw, 60px)/1 var(--num-face); letter-spacing: -.05em; color: var(--brand); } .prog-all small { display: block; margin-top: 6px; font-size: 14px; color: var(--muted); } .pbar { height: 10px; border-radius: 999px; background: var(--surface-3); overflow: hidden; } .pbar i { display: block; width: 0; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--brand), var(--brand-2)); transition: width 1.1s var(--ease); } .lanes { display: grid; gap: 12px; margin-top: 12px; } .lane { padding: 22px; border-radius: var(--r-lg); background: var(--surface); } .lane-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 4px; } .lane-head h3 { margin: 0; } .lane-pct { font: 700 15px var(--num-face); letter-spacing: -.04em; color: var(--brand); } .lane-sub { margin: 0 0 12px; font-size: 14px; color: var(--muted); } .lane ol { list-style: none; margin: 0; padding: 0; } .pstage { position: relative; display: flex; gap: 14px; padding: 12px 0; } .pstage + .pstage { border-top: 1px solid var(--line); } .pdot { flex: none; display: grid; place-items: center; width: 26px; height: 26px; margin-top: 1px; border-radius: 50%; border: 2px solid var(--surface-3); color: var(--on-brand); } .pdot svg { width: 14px; height: 14px; stroke-width: 3; opacity: 0; } .pstage[data-status="done"] .pdot { background: var(--brand); border-color: var(--brand); } .pstage[data-status="done"] .pdot svg { opacity: 1; } .pstage[data-status="active"] .pdot { border-color: var(--brand); background: var(--brand-a10); } .pstage[data-status="active"] .pdot::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--brand); } .pt { font-size: 16px; font-weight: 600; line-height: 1.35; color: var(--text); } .pst { display: inline-block; margin-left: 8px; padding: 2px 9px; border-radius: 999px; background: var(--surface-3); font-size: 12.5px; font-weight: 600; font-style: normal; color: var(--muted); vertical-align: 1px; } .pstage[data-status="done"] .pst, .pstage[data-status="active"] .pst { background: var(--brand-a10); color: var(--brand); } .pn { margin: 4px 0 0; font-size: 14px; line-height: 1.45; color: var(--muted); } .pstage .pbar { height: 6px; margin-top: 10px; } .prog-fail { margin-top: 22px; } /* ---------- цена ---------- */ .pricing .lead { margin-bottom: 0; } .price-grid { display: grid; gap: 12px; margin-top: 26px; } .plan { padding: 24px; border-radius: 28px; background: var(--surface); display: flex; flex-direction: column; } .plan-name { margin-bottom: 8px; font-size: 16px; font-weight: 600; color: var(--muted); } .plan-price { font: 700 clamp(46px, 14vw, 60px)/1 var(--num-face); letter-spacing: -.05em; color: var(--text); } .plan-price small { margin-left: 8px; font-family: var(--display); font-size: 16px; font-weight: 500; letter-spacing: 0; color: var(--muted); } .plan .ladder-line { color: var(--text); } .plan .ladder-line span { color: var(--muted); } .plan .ladder-static { margin: 16px 0 0; font-size: 14.5px; color: var(--muted); } .plan .list { margin: 18px 0 22px; } .plan .btn { margin-top: auto; } .how { padding: 24px; border-radius: 28px; background: var(--surface); } .how .steps { margin-top: 18px; } /* ---------- цель ---------- */ .goal { margin: 26px 0 0; overflow: hidden; border-radius: var(--r-lg); background: var(--surface); } .goal-shot { position: relative; } .goal-shot img { display: block; width: 100%; height: 210px; object-fit: cover; object-position: 62% 62%; } .goal-shot::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, transparent 30%, rgba(6, 10, 8, .82)); } .goal-shot figcaption { position: absolute; left: 20px; right: 20px; bottom: 16px; z-index: 1; } .goal-shot figcaption b { display: block; font-size: 22px; letter-spacing: -.03em; color: #fff; } .goal-shot figcaption span { font-size: 14px; color: rgba(255, 255, 255, .82); } .goal-body { padding: 22px 20px; } .goal-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; } .goal-now { font: 700 clamp(34px, 10vw, 46px)/1 var(--num-face); letter-spacing: -.05em; color: var(--brand); } .goal-now.dim { color: var(--text); font-size: clamp(24px, 7vw, 32px); } .goal-head small { display: block; margin-top: 8px; font-size: 13.5px; color: var(--muted); } .goal .ladder { margin-top: 22px; } .goal .ladder-bar { height: 14px; margin-top: 8px; } .ladder-cap { display: flex; justify-content: space-between; gap: 12px; font-size: 13.5px; color: var(--muted); } .ladder-cap span { white-space: nowrap; } .ladder-cap b { color: var(--text); font-weight: 600; } .goal-note { margin: 18px 0 0; font-size: 14.5px; color: var(--muted); } /* ---------- вопросы ---------- */ details { margin-bottom: 8px; border-radius: var(--r-md); background: var(--surface); } summary { display: flex; align-items: center; justify-content: space-between; gap: 14px; min-height: 58px; padding: 14px 18px; cursor: pointer; list-style: none; font-size: 16.5px; font-weight: 600; line-height: 1.35; letter-spacing: -.015em; } summary::-webkit-details-marker { display: none; } summary::after { content: "+"; flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--brand-a10); color: var(--brand); font-size: 20px; line-height: 1; } details[open] summary::after { content: "−"; } details p { margin: 0; padding: 0 18px 18px; font-size: 15.5px; line-height: 1.55; } /* ---------- подвал ---------- */ footer { padding: 40px 0 24px; color: var(--muted); font-size: 14.5px; } footer a { color: var(--brand); text-underline-offset: 3px; } .foot-links { display: flex; flex-wrap: wrap; gap: 0 18px; margin-top: 8px; font-size: 14px; } .foot-links a, footer .bot-link { display: inline-flex; align-items: center; min-height: 44px; } /* ---------- плавающая таблетка: навигация + покупка ---------- */ .dock { position: fixed; z-index: 50; left: 50%; bottom: calc(14px + env(safe-area-inset-bottom)); transform: translateX(-50%); display: flex; align-items: center; gap: 2px; padding: 6px; width: max-content; max-width: calc(100% - 20px); border-radius: 999px; background: var(--nav-bg); box-shadow: var(--shadow-float); } .dock .tab { display: flex; align-items: center; justify-content: center; gap: 8px; min-width: 46px; height: 48px; padding: 0 11px; border-radius: 999px; color: var(--muted); font-size: 15px; font-weight: 600; text-decoration: none; white-space: nowrap; -webkit-tap-highlight-color: transparent; } .dock .tab .ic { width: 24px; height: 24px; } .dock .tab .lb { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } .dock .tab.on { background: var(--surface); color: var(--text); } .dock .buy { display: inline-flex; align-items: center; justify-content: center; height: 48px; max-width: 0; padding: 0; margin-left: 0; overflow: hidden; border-radius: 999px; background: var(--brand); color: var(--on-brand); font-size: 15px; font-weight: 700; text-decoration: none; white-space: nowrap; opacity: 0; visibility: hidden; transition: max-width .3s var(--ease), padding .3s var(--ease), margin .3s var(--ease), opacity .2s, visibility 0s .3s; } .dock.buy-on .buy { max-width: 220px; padding: 0 16px; margin-left: 4px; opacity: 1; visibility: visible; transition: max-width .3s var(--ease), padding .3s var(--ease), margin .3s var(--ease), opacity .2s, visibility 0s; } /* ---------- брейкпоинты ---------- */ @media (min-width: 460px) { .dock .tab.on { padding: 0 16px 0 12px; } .dock .tab.on .lb { position: static; width: auto; height: auto; overflow: visible; clip: auto; } } @media (min-width: 560px) { .theme-toggle #theme-label { display: inline; } .ways { grid-template-columns: 1fr 1fr; } .cta { flex-direction: row; flex-wrap: wrap; } .proof-nums { grid-template-columns: repeat(4, 1fr); } .proof-nums div:first-child, .proof-nums div:last-child { grid-column: auto; } .hero .btn.block { width: auto; } .goal-shot img { height: 260px; } } @media (min-width: 720px) { section { padding: 72px 0; } .band { margin: 0 20px; padding: 64px 0; border-radius: 40px; } .card, .panel-card { padding: 28px; } .grid-2 { grid-template-columns: 1fr 1fr; gap: 16px; } .grid-3 { grid-template-columns: 1fr 1fr; gap: 16px; } .facts { grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 36px; } .fact { padding: 22px 20px; } .fact b { font-size: 24px; } .snap { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 0; padding: 0; overflow: visible; scroll-snap-type: none; } .snap > * { flex: none; } .tile-shot { height: 320px; } .tile-head { padding: 26px 24px 18px; } .oneplace { grid-template-columns: 1fr 48px 1fr; gap: 20px; align-items: center; margin-top: 36px; } .merge { height: auto; transform: none; } .united { padding: 30px; } .demo { grid-template-columns: 1fr 1fr; gap: 20px; align-items: start; } .parse { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 1fr; } .tok:last-child:nth-child(odd) { grid-column: auto; } .tok b { font-size: 19px; } .tbl thead { display: table-header-group; } .tbl tr { display: table-row; padding: 0; } .tbl td, .tbl th { display: table-cell; padding: 15px 22px; border-bottom: 1px solid var(--line); vertical-align: middle; } .tbl tbody tr:last-child td { border-bottom: 0; } .tbl thead th { font-size: 13.5px; font-weight: 600; color: var(--muted); } .syntax td:first-child { margin: 0; font-size: 15.5px; white-space: nowrap; color: var(--text-2); } .syntax code { margin: 2px 6px 2px 0; } .vs td { display: table-cell; text-align: left; font-size: 15.5px; } .vs td::before { content: none; } .vs td:first-child { min-width: 230px; padding-bottom: 15px; font-weight: 500; color: var(--text-2); } .vs td.us, .vs thead th.us { margin: 0; border-radius: 0; background: var(--brand-a10); } .vs thead th.us { color: var(--brand); } .price-grid { grid-template-columns: 1.15fr .85fr; gap: 16px; align-items: stretch; } :root:not([data-sales="open"]) .price-grid { grid-template-columns: minmax(0, 620px); } .goal-body { padding: 28px; } .goal-shot figcaption { left: 28px; bottom: 22px; } .prog-all { grid-template-columns: auto 1fr; align-items: center; gap: 32px; padding: 28px; } } @media (min-width: 960px) { section { padding: 88px 0; } h2 { margin-bottom: 20px; } .hero { padding: 40px 0 16px; } .hero-grid { grid-template-columns: 1.12fr .88fr; grid-template-areas: "copy offer" "links offer"; gap: 24px 56px; align-items: center; } .hero-copy { align-self: end; } .hero-links { align-self: start; } .hero .lead { font-size: 19px; } .offer { padding: 32px; } .grid-3 { grid-template-columns: repeat(3, 1fr); } .lanes { grid-template-columns: repeat(3, 1fr); gap: 16px; } .duo { grid-template-columns: 1.02fr .98fr; gap: 56px; align-items: center; } .ways { grid-template-columns: repeat(4, 1fr); gap: 14px; } .goal { display: grid; grid-template-columns: 1fr 1fr; } .goal-shot img { height: 100%; min-height: 340px; } .goal-body { display: flex; flex-direction: column; justify-content: center; padding: 34px; } .dock .tab .lb { position: static; width: auto; height: auto; overflow: visible; clip: auto; } .dock .tab { padding: 0 16px 0 12px; } .dock .buy { font-size: 16px; } .panel-card { padding: 34px; } .floats { position: relative; margin-top: 34px; } .floats::before { content: ""; display: block; padding-top: 66%; } .floats .panel { position: absolute; } .floats .p1 { left: 0; top: 0; width: 72%; z-index: 1; } .floats .p2 { right: 0; bottom: 0; width: 62%; z-index: 3; } .floats.trio::before { padding-top: 70%; } .floats.trio .p1 { left: 0; top: 0; width: 64%; z-index: 1; } .floats.trio .p3 { right: 0; top: 25%; width: 58%; z-index: 2; } .floats.trio .p2 { left: 5%; bottom: 0; width: 62%; z-index: 3; } } /* плавающие панели-картинки: на телефоне просто стопка */ .floats { display: grid; gap: 12px; margin-top: 28px; } @media (min-width: 960px) { .floats { display: block; } } .panel { overflow: hidden; border-radius: 18px; background: var(--surface); box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .7); } .panel img { display: block; width: 100%; height: auto; } /* ---------- скриншоты приложения: тема страницы выбирает кадр ---------- */ :root img.t-d, :root[data-theme="dark"] img.t-l { display: none !important; } :root[data-theme="dark"] img.t-d { display: block !important; } /* иконка приложения в карточке покупки */ .o-app { display: flex; align-items: center; gap: 14px; } .o-icon { flex: none; width: 60px; height: 60px; border-radius: 14px; box-shadow: 0 0 0 1px rgba(255, 255, 255, .12); } .o-app b { display: block; margin-bottom: 6px; font-size: 19px; letter-spacing: -.02em; color: var(--text); } /* иконка на экране «Домой» и навигация как внутри приложения */ .app-kit { display: grid; gap: 28px; margin-top: 44px; align-items: center; } .homescreen { margin: 0 auto; width: min(100%, 300px); } .hs-screen { padding: 26px 20px 22px; border-radius: 34px; box-shadow: 0 0 0 1px rgba(255, 255, 255, .08); } .hs-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px 12px; } .hs-cell { display: flex; flex-direction: column; align-items: center; gap: 7px; min-width: 0; } .hs-cell i { display: block; width: 100%; aspect-ratio: 1; border-radius: 22%; background: rgba(255, 255, 255, .13); } .hs-cell u { display: block; width: 62%; height: 6px; border-radius: 3px; background: rgba(255, 255, 255, .16); margin: 3px 0; } .hs-app img { display: block; width: 100%; height: auto; aspect-ratio: 1; border-radius: 22%; } .hs-app em { display: flex; justify-content: center; width: 100%; height: 12px; overflow: visible; font-size: 10px; font-style: normal; font-weight: 600; line-height: 12px; color: #fff; text-align: center; white-space: nowrap; } .homescreen figcaption { margin-top: 14px; text-align: center; font-size: 14px; line-height: 1.4; color: var(--muted); } .homescreen figcaption b { display: block; color: var(--text); font-size: 15.5px; margin-bottom: 2px; } .appnav-box h3 { font-size: 20px; } .appnav-box p { margin: 14px 0 0; font-size: 14.5px; } .appnav { list-style: none; margin: 14px 0 0; padding: 6px; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 2px; border-radius: 28px; background: var(--nav-bg); box-shadow: var(--shadow-float); } .appnav li { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 64px; padding: 6px 2px; border-radius: 22px; color: var(--muted); font-size: 11.5px; font-weight: 600; letter-spacing: -.01em; } .appnav li.on { background: var(--surface); color: var(--text); } .appnav .ic { width: 26px; height: 26px; } /* две темы */ .themes-stage { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 30px; align-items: start; } .tphone, .tsheet { margin: 0; } .tphone-shot { overflow: hidden; border-radius: 26px; aspect-ratio: 780 / 1150; background: var(--surface); box-shadow: 0 0 0 1px var(--line); } .tphone-shot img { display: block; width: 100%; height: auto; } .tphone figcaption, .tsheet figcaption { margin-top: 10px; text-align: center; font-size: 14.5px; font-weight: 600; color: var(--text-2); } .tsheet { grid-column: 1 / -1; } .tsheet-shot { overflow: hidden; border-radius: 26px; background: var(--surface); box-shadow: 0 0 0 1px var(--line); max-width: 520px; margin: 0 auto; } .tsheet-shot img { display: block; width: 100%; height: auto; } /* карточка «Ещё» в галерее и подпись под панелями */ .more-card { display: flex; align-items: center; padding: 22px; background: var(--brand); color: var(--on-brand); } .more-card b { display: block; margin-bottom: 8px; font-size: 22px; letter-spacing: -.03em; } .more-card ul { list-style: none; margin: 0; padding: 0; } .more-card li { padding: 8px 0; border-top: 1px solid rgba(255, 255, 255, .28); font-size: 15px; line-height: 1.4; } :root[data-theme="dark"] .more-card li { border-color: rgba(4, 18, 12, .22); } .fig-note { margin: 16px 0 0; font-size: 14px; } .shots.snap .more-card { align-self: stretch; } @media (min-width: 720px) { .app-kit { grid-template-columns: 300px 1fr; gap: 56px; } .themes-stage { grid-template-columns: 1fr 1fr 1.2fr; gap: 20px; align-items: center; } .tsheet { grid-column: auto; } .more-card { padding: 28px; } } @media (min-width: 960px) { .themes-stage { grid-template-columns: 1fr 1fr 1.5fr; gap: 28px; } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition: none !important; animation: none !important; } .btn:active { transform: none; } }