/* ============================================================================ Nidalumi — продающая страница. Визуальный язык. Принципы: · разделы стоят на странице, а не в коробках: ритм задают воздух и тонкие линии; · один источник света — тёплое свечение за продуктом в первом экране; · продукт — главный герой: в рамке окна и в рамке телефона, крупно и с глубиной; · одна карточка на всё, где карточка нужна: бенто, тарифы, переписка; · типографика с настоящим перепадом: огромные заголовки, спокойный текст. Всё под :root.ld-on — класс висит на , только пока показана эта страница, поэтому внутрь сервиса отсюда не протекает ничего. ========================================================================== */ :root.ld-on { --lx-bg: #0A0908; --lx-card: linear-gradient(180deg, rgba(255, 255, 255, .045), rgba(255, 255, 255, .015)); --lx-line: rgba(255, 255, 255, .08); --lx-line-2: rgba(255, 255, 255, .14); --lx-ink: #F6F2EC; --lx-ink-2: #BDB5AB; --lx-ink-3: #847C73; --lx-amber: #FFB36B; --lx-r: 24px; --lx-max: 1200px; --lx-shadow: 0 40px 90px -30px rgba(0, 0, 0, .75); --lx-hi: inset 0 1px 0 rgba(255, 255, 255, .07); background: var(--lx-bg); } :root.ld-on body { background: transparent; } /* фон рисует и небо; свой фон у body закрыл бы небо */ /* ---------- страница */ :root.ld-on .onb.ld { padding: 0 20px 0; max-width: none; background: none; } :root.ld-on .ld { color: var(--lx-ink); } /* ---------- кнопки */ :root.ld-on .ld .btn.primary { background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 88%, #fff), var(--accent)); color: #121315; border: 0; border-radius: 14px; box-shadow: var(--lx-hi), 0 12px 32px -10px color-mix(in srgb, var(--accent) 70%, transparent); font-weight: 700; letter-spacing: .005em; } :root.ld-on .ld .btn.primary.lg { height: 56px; padding-inline: 28px; font-size: 16px; } :root.ld-on .ld .btn.primary:hover { filter: brightness(1.06); } :root.ld-on .ld .btn.ghost { background: rgba(255, 255, 255, .04); color: var(--lx-ink); border: 1px solid var(--lx-line-2); border-radius: 14px; } :root.ld-on .ld .link-btn.ld-demo { justify-self: start; color: var(--lx-ink-2); font-size: 15px; text-decoration: none; border-bottom: 1px solid var(--lx-line-2); padding-bottom: 2px; } :root.ld-on .ld .link-btn.ld-demo::after { content: " →"; } :root.ld-on .ld .link-btn.ld-demo:hover { color: var(--lx-ink); border-color: var(--lx-ink-3); } /* ---------- первый экран */ :root.ld-on .ld .ld-hero { position: relative; isolation: isolate; overflow: visible; max-width: var(--lx-max); margin: 0 auto; border-radius: 0; background: none; min-height: min(880px, 100vh); padding: 120px 0 72px; grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr); gap: clamp(28px, 5vw, 80px); align-items: center; } /* свет: тёплое пятно за продуктом и янтарный блик выше — единственный источник на странице */ :root.ld-on .ld .ld-hero::before { content: ""; position: absolute; z-index: -1; pointer-events: none; opacity: 1; inset: -10% -30% -10% 20%; background: radial-gradient(42% 46% at 58% 52%, color-mix(in srgb, var(--accent) 34%, transparent), transparent 70%), radial-gradient(26% 30% at 78% 22%, rgba(255, 179, 107, .20), transparent 72%); filter: blur(8px); } :root.ld-on .ld .ld-hero::after { content: none; } :root.ld-on .ld .ld-hero-copy { gap: 22px; } :root.ld-on .ld .ld-badge { font-size: 13px; font-weight: 600; color: var(--lx-ink-2); background: rgba(255, 255, 255, .04); border: 1px solid var(--lx-line-2); padding: 7px 14px 7px 11px; } :root.ld-on .ld .ld-claim { font-size: clamp(44px, 4.6vw, 72px); line-height: .96; letter-spacing: -.035em; background: linear-gradient(180deg, #FFFFFF 30%, #CFC5B9); -webkit-background-clip: text; background-clip: text; color: transparent; max-width: 16ch; } :root.ld-on .ld .ld-rot { font-size: clamp(20px, 1.9vw, 26px); color: var(--lx-ink-2); } :root.ld-on .ld .ld-lead { font-size: 18px; line-height: 1.6; color: var(--lx-ink-2); max-width: 50ch; } :root.ld-on .ld .ld-flow li { background: rgba(255, 255, 255, .035); border-color: var(--lx-line); color: var(--lx-ink); } :root.ld-on .ld .ld-cta { gap: 18px; align-items: center; } :root.ld-on .ld .ld-note { color: var(--lx-ink-3); font-size: 13px; } /* ---------- продукт в рамках: окно и телефон с глубиной */ :root.ld-on .ld .lx-stage { position: relative; perspective: 1800px; min-height: 560px; display: grid; align-items: center; justify-items: start; } :root.ld-on .ld .lx-window { position: relative; width: min(100%, 560px); background: linear-gradient(180deg, #1A1816, #121110); border: 1px solid var(--lx-line-2); border-radius: 20px; overflow: hidden; box-shadow: var(--lx-hi), var(--lx-shadow), 0 0 0 1px rgba(0, 0, 0, .4); transform: rotateY(9deg) rotateX(4deg) rotateZ(-.6deg); transform-origin: 30% 50%; } :root.ld-on .ld .lx-window-bar { display: flex; align-items: center; gap: 7px; height: 40px; padding: 0 16px; border-bottom: 1px solid var(--lx-line); background: rgba(255, 255, 255, .02); } :root.ld-on .ld .lx-window-bar i { width: 11px; height: 11px; border-radius: 50%; background: rgba(255, 255, 255, .14); } :root.ld-on .ld .lx-window-bar i:first-child { background: #FF6B5E; } :root.ld-on .ld .lx-window-bar i:nth-child(2) { background: #FFBD4A; } :root.ld-on .ld .lx-window-bar i:nth-child(3) { background: #3FCB6B; } :root.ld-on .ld .lx-window-bar span { flex: 1; text-align: center; margin-right: 40px; font-size: 12px; color: var(--lx-ink-3); } /* лист дня внутри окна — без собственной коробки */ :root.ld-on .ld .lx-window .ld-sheet { background: none; border: 0; box-shadow: none; border-radius: 0; padding: 22px 24px 26px; transform: none; } :root.ld-on .ld .lx-window .ld-sheet::before, :root.ld-on .ld .lx-window .ld-sheet::after { content: none; } :root.ld-on .ld .ld-sheet-head { padding-bottom: 14px; border-bottom: 1px solid var(--lx-line); } :root.ld-on .ld .ld-sheet-head b { font-size: 17px; color: var(--lx-ink); } :root.ld-on .ld .ld-rows { gap: 4px; margin-top: 10px; } :root.ld-on .ld .ld-row { padding: 12px 12px; border-radius: 12px; border: 0; } :root.ld-on .ld .ld-row + .ld-row { border-top: 0; } :root.ld-on .ld .ld-row .ld-title { font-size: 16px; color: var(--lx-ink); } :root.ld-on .ld .ld-row.is-mark { background: color-mix(in srgb, var(--accent) 12%, transparent); box-shadow: inset 3px 0 0 var(--accent); } :root.ld-on .ld .ld-row.is-mark .ld-title { color: #FFD9CF; } :root.ld-on .ld .lx-phone { position: absolute; right: -4%; bottom: -12%; z-index: 2; width: 250px; height: 510px; border-radius: 46px; padding: 9px; background: linear-gradient(160deg, #2A2724, #0D0C0B 40%, #1B1917); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16), 0 0 0 1px rgba(0, 0, 0, .6), 0 60px 100px -30px rgba(0, 0, 0, .9), 0 20px 60px -20px color-mix(in srgb, var(--accent) 35%, transparent); transform: rotateY(-14deg) rotateX(4deg) rotateZ(3deg); } :root.ld-on .ld .lx-phone-screen { position: relative; width: 100%; height: 100%; border-radius: 38px; overflow: hidden; background: linear-gradient(180deg, #0F1720, #0B1118); display: flex; flex-direction: column; } :root.ld-on .ld .lx-phone-status { display: flex; align-items: center; justify-content: space-between; height: 44px; padding: 0 22px; font-size: 13px; color: #fff; flex: none; } :root.ld-on .ld .lx-island { width: 86px; height: 26px; border-radius: 20px; background: #000; } :root.ld-on .ld .lx-phone-status i { width: 22px; height: 11px; border-radius: 3px; border: 1.5px solid rgba(255, 255, 255, .8); font-style: normal; } /* переписка внутри телефона — как настоящий Telegram */ :root.ld-on .ld .lx-phone .ld-chat { flex: 1; background: none; border: 0; box-shadow: none; border-radius: 0; padding: 6px 12px 16px; gap: 8px; display: flex; flex-direction: column; justify-content: flex-end; } :root.ld-on .ld .ld-chat-head { color: #fff; font-size: 14px; font-weight: 600; padding: 6px 4px 10px; border-bottom: 1px solid rgba(255, 255, 255, .06); } :root.ld-on .ld .ld-bubble { background: #182533; color: #fff; border: 0; border-radius: 16px 16px 16px 6px; box-shadow: none; max-width: 88%; } :root.ld-on .ld .ld-bubble.mine { background: #2B5278; border-radius: 16px 16px 6px 16px; align-self: flex-end; } :root.ld-on .ld .ld-kb span { background: rgba(255, 255, 255, .08); color: #fff; border: 0; border-radius: 10px; } /* ---------- кинолента: настоящий отрывной календарь во всю яркость */ :root.ld-on .ld .lx-film { position: relative; max-width: var(--lx-max); margin: 0 auto; padding: 8px 0 24px; } :root.ld-on .ld .lx-film-frame { position: relative; aspect-ratio: 16 / 7; border-radius: 28px; overflow: hidden; border: 1px solid var(--lx-line-2); box-shadow: var(--lx-hi), var(--lx-shadow); background: #000; } :root.ld-on .ld .lx-film-poster, :root.ld-on .ld .lx-film-frame .pp-film { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: none; transform: none; opacity: 1; } :root.ld-on .ld .lx-film-frame .pp-film { opacity: 0; transition: opacity .9s var(--ease); } :root.ld-on .ld .lx-film-frame.is-live .pp-film { opacity: 1; } :root.ld-on .ld .lx-film-frame::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, rgba(0, 0, 0, .7), transparent 45%), linear-gradient(0deg, rgba(0, 0, 0, .55), transparent 50%); } :root.ld-on .ld .lx-film-cap { position: absolute; z-index: 1; left: clamp(22px, 4vw, 56px); bottom: calc(24px + clamp(20px, 4vw, 52px)); margin: 0; max-width: 10ch; font-family: var(--f-display); font-weight: 700; color: #fff; /* узко: не наезжает на надпись в кадре */ font-size: clamp(28px, 3.6vw, 56px); line-height: 1; letter-spacing: -.02em; } /* ---------- разделы: не коробки, а страница с ритмом */ :root.ld-on .ld .ld-leaf, :root.ld-on .ld .ld-leaf.is-night, :root.ld-on .ld .ld-leaf.pp-stick { position: relative; max-width: var(--lx-max); margin: 0 auto; background: linear-gradient(90deg, transparent, var(--lx-line-2) 20%, var(--lx-line-2) 80%, transparent) top / 100% 1px no-repeat; border: 0; border-radius: 0; box-shadow: none; overflow: visible; padding: clamp(84px, 11vw, 150px) 0; color: var(--lx-ink); transform: none; opacity: 1; } :root.ld-on .ld .ld-leaf::before, :root.ld-on .ld .ld-leaf::after { content: none; } :root.ld-on .ld .ld-in { gap: 22px; } :root.ld-on .ld .ld-k { display: inline-flex; align-items: center; gap: 10px; font-size: 12px; letter-spacing: .2em; color: var(--lx-ink-3); } :root.ld-on .ld .ld-k::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 12px var(--accent); } :root.ld-on .ld .ld-h { font-size: clamp(34px, 4.6vw, 64px); line-height: 1; letter-spacing: -.028em; color: var(--lx-ink); max-width: 17ch; } :root.ld-on .ld .ld-p { font-size: 17px; line-height: 1.65; color: var(--lx-ink-2); } :root.ld-on .ld .ld-leaf.is-night .ld-h, :root.ld-on .ld .ld-leaf.is-night .ld-kicker { color: var(--lx-ink); } /* боль: крупный список, как исписанный лист */ :root.ld-on .ld .ld-head-list { gap: 16px 56px; margin-top: 18px; } :root.ld-on .ld .ld-head-list li { font-size: clamp(18px, 1.6vw, 22px); color: var(--lx-ink-2); padding-left: 30px; } :root.ld-on .ld .ld-head-list li::before { width: 16px; background: var(--accent); top: .7em; } :root.ld-on .ld .ld-kicker { margin-top: 26px; font-size: clamp(22px, 2.4vw, 34px); line-height: 1.3; max-width: 30ch; color: var(--lx-ink); } /* доказательство: переписка — та же карточка, что и везде */ :root.ld-on .ld .ld-proof-in { gap: clamp(28px, 5vw, 80px); align-items: start; } :root.ld-on .ld .ld-proof-bot { background: var(--lx-card); border: 1px solid var(--lx-line); border-radius: var(--lx-r); box-shadow: var(--lx-hi); padding: 28px; } :root.ld-on .ld .ld-proof-bot h3 { font-size: 22px; color: var(--lx-ink); } :root.ld-on .ld .ld-proof-bot .ld-chat { background: linear-gradient(180deg, #0F1720, #0B1118); border: 1px solid rgba(255, 255, 255, .06); border-radius: 18px; box-shadow: none; padding: 14px; } /* как это работает: три крупных шага с номерами */ :root.ld-on .ld .ld-steps { counter-reset: step; gap: 20px; margin-top: 16px; } :root.ld-on .ld .ld-steps li { counter-increment: step; border-top: 0; padding: 28px; background: var(--lx-card); border: 1px solid var(--lx-line); border-radius: var(--lx-r); box-shadow: var(--lx-hi); } :root.ld-on .ld .ld-steps li::before { content: "0" counter(step); position: static; display: block; height: auto; opacity: 1; transform: none; background: linear-gradient(180deg, var(--lx-amber), var(--accent)); -webkit-background-clip: text; background-clip: text; color: transparent; font-family: var(--f-display); font-weight: 700; font-size: 44px; line-height: 1; margin-bottom: 14px; } :root.ld-on .ld .ld-steps b { font-size: 22px; color: var(--lx-ink); } :root.ld-on .ld .ld-install { color: var(--lx-ink-3); } /* бенто — единая карточка */ :root.ld-on .ld .ld-does.is-bento { gap: 16px; margin-top: 18px; } :root.ld-on .ld .ld-does.is-bento .ld-does-it { background: var(--lx-card); border: 1px solid var(--lx-line); border-radius: var(--lx-r); box-shadow: var(--lx-hi); padding: 22px; border-top: 1px solid var(--lx-line); } :root.ld-on .ld .ld-does.is-bento .ld-does-it:hover { border-color: var(--lx-line-2); transform: translateY(-3px); } :root.ld-on .ld .ld-does dt { font-size: 20px; color: var(--lx-ink); } :root.ld-on .ld .ld-does dd { color: var(--lx-ink-2); } :root.ld-on .ld .ld-viz { background: rgba(0, 0, 0, .28); border-color: var(--lx-line); } /* что внутри */ :root.ld-on .ld .ld-group-top { border-bottom: 1px solid var(--lx-line); color: var(--lx-ink-3); } :root.ld-on .ld .ld-list li b { color: var(--lx-ink); } :root.ld-on .ld .ld-list li span { color: var(--lx-ink-3); } :root.ld-on .ld .ld-ic { background: rgba(255, 255, 255, .05); border-radius: 10px; color: var(--lx-ink-2); } /* вопросы: заголовок слева, раскрывающийся список справа — без карточек, по линейке */ @media (min-width: 961px) { :root.ld-on .ld .ld-leaf#ld-faq .ld-in { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); column-gap: 72px; align-items: start; } :root.ld-on .ld .ld-leaf#ld-faq .ld-k, :root.ld-on .ld .ld-leaf#ld-faq .ld-h { grid-column: 1; } :root.ld-on .ld .ld-leaf#ld-faq .ld-qa { grid-column: 2; grid-row: 1 / span 3; } } :root.ld-on .ld .ld-qa { display: block; } :root.ld-on .ld .ld-qa-item { background: none; border: 0; border-bottom: 1px solid var(--lx-line); border-radius: 0; box-shadow: none; padding: 24px 0; } :root.ld-on .ld .ld-qa-item:first-child { border-top: 1px solid var(--lx-line); } :root.ld-on .ld .ld-qa-item summary b { font-size: 20px; color: var(--lx-ink); font-style: normal; } :root.ld-on .ld .ld-qa-item p { color: var(--lx-ink-2); font-size: 16px; line-height: 1.65; max-width: 60ch; } /* цена */ :root.ld-on .ld .ld-trial { background: color-mix(in srgb, #3FCB6B 10%, transparent); border: 1px solid color-mix(in srgb, #3FCB6B 30%, transparent); border-radius: 999px; padding: 10px 20px; justify-self: start; } :root.ld-on .ld .ld-price { gap: 16px; margin-top: 8px; } :root.ld-on .ld .ld-plan { background: var(--lx-card); border: 1px solid var(--lx-line); border-radius: var(--lx-r); box-shadow: var(--lx-hi); padding: 28px; } :root.ld-on .ld .ld-plan b { font-size: clamp(36px, 3.6vw, 52px); color: var(--lx-ink); letter-spacing: -.02em; } :root.ld-on .ld .ld-plan span { color: var(--lx-ink-3); } :root.ld-on .ld .ld-plan i { color: var(--lx-ink-2); } :root.ld-on .ld .ld-plan.is-best { background: radial-gradient(120% 90% at 50% 0%, color-mix(in srgb, var(--accent) 18%, transparent), transparent 70%), var(--lx-card); border-color: color-mix(in srgb, var(--accent) 55%, transparent); box-shadow: var(--lx-hi), 0 30px 80px -30px color-mix(in srgb, var(--accent) 55%, transparent); } :root.ld-on .ld .ld-plan.is-best b { color: #fff; } /* финал */ :root.ld-on .ld .ld-leaf.is-end { text-align: center; padding-bottom: 40px; } :root.ld-on .ld .ld-end-in { justify-items: center; } :root.ld-on .ld .ld-end { font-size: clamp(40px, 6vw, 88px); line-height: .95; letter-spacing: -.035em; max-width: 14ch; color: var(--lx-ink); } :root.ld-on .ld .ld-giant { font-size: clamp(90px, 22vw, 340px); background: linear-gradient(180deg, rgba(255, 255, 255, .16), transparent 85%); -webkit-background-clip: text; background-clip: text; } /* навигация — чуть собраннее на новом фоне */ :root.ld-on .ld-nav { background: rgba(10, 9, 8, .55); border-color: var(--lx-line); } :root.ld-on.pp-scrolled .ld-nav { background: rgba(10, 9, 8, .86); } /* ---------- телефон */ @media (max-width: 960px) { :root.ld-on .ld .ld-hero { grid-template-columns: minmax(0, 1fr); padding: 96px 0 40px; min-height: 0; margin: 0 auto; } :root.ld-on .ld .ld-hero::before { inset: 30% -40% 0 -40%; } :root.ld-on .ld .lx-stage { justify-items: center; min-height: 0; margin-top: 12px; perspective: none; } :root.ld-on .ld .lx-window { transform: none; width: 100%; } :root.ld-on .ld .lx-phone { position: relative; left: auto; bottom: auto; margin: -140px 0 0 auto; margin-right: -4px; width: 176px; height: 360px; border-radius: 34px; padding: 7px; transform: rotateZ(-3deg); } :root.ld-on .ld .lx-phone-screen { border-radius: 28px; } :root.ld-on .ld .lx-phone-status { height: 34px; padding: 0 16px; font-size: 11px; } :root.ld-on .ld .lx-island { width: 60px; height: 18px; } :root.ld-on .ld .lx-phone .ld-chat { padding: 4px 8px 10px; font-size: 12px; } :root.ld-on .ld .lx-film-frame { aspect-ratio: 4 / 5; border-radius: 22px; } :root.ld-on .ld .ld-claim { max-width: none; } } @media (max-width: 520px) { :root.ld-on .onb.ld { padding: 0 16px; } :root.ld-on .ld .ld-hero { padding-top: 84px; } :root.ld-on .ld .ld-claim { font-size: 40px; } :root.ld-on .ld .lx-window .ld-sheet { padding: 16px; } :root.ld-on .ld .ld-steps li, :root.ld-on .ld .ld-plan, :root.ld-on .ld .ld-proof-bot { padding: 22px; } } @media (prefers-reduced-motion: reduce) { :root.ld-on .ld .lx-window, :root.ld-on .ld .lx-phone { transform: none; } } /* телефон: кнопки под сообщением помещаются в узкий экран, подпись ленты — под кадром */ @media (max-width: 960px) { :root.ld-on .ld .lx-phone .ld-kb { flex-wrap: wrap; gap: 4px; } :root.ld-on .ld .lx-phone .ld-kb span { font-size: 10.5px; padding: 5px 7px; flex: 1 1 auto; text-align: center; } :root.ld-on .ld .lx-phone .ld-bubble { max-width: 94%; } :root.ld-on .ld .lx-film-frame::after { content: none; } :root.ld-on .ld .lx-film-cap { position: static; max-width: none; margin: 16px 4px 0; color: var(--lx-ink); font-size: clamp(26px, 7vw, 34px); } :root.ld-on .ld .lx-film { display: flex; flex-direction: column; } } /* кнопка паузы у киноленты */ :root.ld-on .ld .lx-film-toggle { position: absolute; z-index: 2; right: 16px; bottom: 16px; width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .28); background: rgba(10, 9, 8, .55); color: #fff; cursor: pointer; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); display: grid; place-items: center; opacity: .75; transition: opacity .2s var(--ease), background-color .2s var(--ease); } :root.ld-on .ld .lx-film-toggle:hover, :root.ld-on .ld .lx-film-toggle:focus-visible { opacity: 1; background: rgba(10, 9, 8, .8); } /* значок: две полоски — идёт, треугольник — стоит */ :root.ld-on .ld .lx-film-toggle::before, :root.ld-on .ld .lx-film-toggle::after { content: ""; position: absolute; top: 15px; width: 4px; height: 14px; border-radius: 1px; background: currentColor; } :root.ld-on .ld .lx-film-toggle::before { left: 15px; } :root.ld-on .ld .lx-film-toggle::after { right: 15px; } :root.ld-on .ld .lx-film-toggle.is-paused::after { content: none; } :root.ld-on .ld .lx-film-toggle.is-paused::before { left: 17px; top: 14px; width: 0; height: 0; border-radius: 0; background: none; border-left: 13px solid currentColor; border-top: 8px solid transparent; border-bottom: 8px solid transparent; } :root.ld-on .ld .lx-film-frame .pp-film { display: block; } /* подвал: политика и условия */ :root.ld-on .ld .ld-legal { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 22px; margin-top: 28px; font-size: 14px; color: var(--lx-ink-3); } :root.ld-on .ld .ld-legal a { color: var(--lx-ink-2); text-decoration: none; } :root.ld-on .ld .ld-legal a:hover { color: var(--lx-ink); text-decoration: underline; text-underline-offset: 3px; } /* ============================================================================ Пакет «дорого»: одна пара шрифтов, строгая шкала, небо по времени суток, живая семья в первом экране, один день семьи, живое бенто, один тариф, кнопка. ========================================================================== */ /* ---------- шрифты и шкала: узкий гротеск для заголовков, Inter для всего остального. Антиква на этой странице больше не встречается — третий голос спорил с двумя. */ :root.ld-on { --f-serif: var(--f-body); --lx-bg: #07070A; --lx-h2: clamp(40px, 5.8vw, 88px); --lx-h3: clamp(24px, 2.4vw, 34px); --lx-body: 18px; --lx-pad: clamp(112px, 13vw, 196px); --lx-stick: 84px; } :root.ld-on .ld .ld-kicker, :root.ld-on .ld .ld-head-list li, :root.ld-on .ld .ld-qa-item b, :root.ld-on .ld .ld-list li span, :root.ld-on .ld .ld-sheet-head span { font-style: normal; } :root.ld-on .ld .ld-leaf, :root.ld-on .ld .ld-leaf.is-night, :root.ld-on .ld .ld-leaf.pp-stick { padding-block: var(--lx-pad); } :root.ld-on .ld .ld-h { font-size: var(--lx-h2); line-height: .94; letter-spacing: -.034em; max-width: 15ch; } :root.ld-on .ld .ld-p { font-size: var(--lx-body); line-height: 1.6; } :root.ld-on .ld .ld-in { gap: 26px; } /* надзаголовок — как отметка времени: моноширинный, с чертой вместо точки */ :root.ld-on .ld .ld-k { font-family: var(--f-mono); font-weight: 500; font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: var(--lx-ink-3); gap: 12px; } :root.ld-on .ld .ld-k::before { width: 28px; height: 1px; border-radius: 0; box-shadow: none; background: linear-gradient(90deg, var(--accent), transparent); } :root.ld-on .ld .ld-head-list li { font-size: clamp(18px, 1.5vw, 21px); color: var(--lx-ink-2); } :root.ld-on .ld .ld-kicker { font-family: var(--f-display); font-weight: 600; letter-spacing: -.015em; font-size: clamp(28px, 3.2vw, 48px); line-height: 1.08; max-width: 24ch; } :root.ld-on .ld .ld-qa-item summary b { font-family: var(--f-body); font-weight: 600; font-size: clamp(18px, 1.5vw, 21px); letter-spacing: -.01em; } :root.ld-on .ld .ld-steps b, :root.ld-on .ld .ld-does dt, :root.ld-on .ld .ld-proof-bot h3 { font-size: var(--lx-h3); letter-spacing: -.015em; line-height: 1.1; } /* ---------- небо: утро → день → вечер → ночь, у финала снова светает */ :root.ld-on body { background: transparent; } /* фон рисует и небо; свой фон у body закрыл бы небо */ .lx-sky { position: fixed; inset: 0; z-index: -1; pointer-events: none; } .lx-sky i { position: absolute; inset: 0; opacity: 0; will-change: opacity; } .lx-sky .s-dawn { opacity: 1; background: radial-gradient(80% 55% at 72% -8%, rgba(255, 128, 84, .30), transparent 62%), radial-gradient(55% 45% at 8% -4%, rgba(255, 196, 128, .13), transparent 70%), linear-gradient(180deg, #1B100B 0%, #0D0908 62%, #080607); } .lx-sky .s-day { background: radial-gradient(95% 60% at 50% -18%, rgba(255, 238, 214, .11), transparent 62%), radial-gradient(60% 40% at 90% 10%, rgba(160, 190, 255, .06), transparent 70%), linear-gradient(180deg, #121317, #0B0C0F); } .lx-sky .s-eve { background: radial-gradient(85% 50% at 50% 118%, rgba(255, 92, 76, .30), transparent 62%), radial-gradient(60% 55% at 88% 104%, rgba(168, 84, 214, .20), transparent 70%), linear-gradient(180deg, #0A0C1D 0%, #120B1B 100%); } .lx-sky .s-night { background: radial-gradient(1px 1px at 12% 18%, rgba(255, 255, 255, .7), transparent 60%), radial-gradient(1px 1px at 27% 8%, rgba(255, 255, 255, .5), transparent 60%), radial-gradient(1.5px 1.5px at 41% 23%, rgba(255, 255, 255, .6), transparent 60%), radial-gradient(1px 1px at 58% 12%, rgba(255, 255, 255, .45), transparent 60%), radial-gradient(1px 1px at 69% 30%, rgba(255, 255, 255, .55), transparent 60%), radial-gradient(1.5px 1.5px at 83% 16%, rgba(255, 255, 255, .6), transparent 60%), radial-gradient(1px 1px at 92% 36%, rgba(255, 255, 255, .4), transparent 60%), radial-gradient(1px 1px at 6% 42%, rgba(255, 255, 255, .4), transparent 60%), radial-gradient(1px 1px at 35% 44%, rgba(255, 255, 255, .35), transparent 60%), radial-gradient(1px 1px at 77% 48%, rgba(255, 255, 255, .35), transparent 60%), radial-gradient(70% 50% at 50% -10%, rgba(92, 112, 210, .12), transparent 70%), linear-gradient(180deg, #05060C, #040407); } .lx-sky .s-sunrise { background: radial-gradient(75% 42% at 50% 112%, rgba(255, 146, 88, .34), transparent 66%), radial-gradient(40% 25% at 50% 104%, rgba(255, 214, 150, .22), transparent 70%); } /* свет первого экрана теперь даёт небо: своё пятно остаётся только за продуктом */ :root.ld-on .ld .ld-hero::before { background: radial-gradient(40% 44% at 58% 56%, color-mix(in srgb, var(--accent) 24%, transparent), transparent 70%); } /* ---------- кнопка: блик по краю при наведении, вдавливается при нажатии, без лужи света */ :root.ld-on .ld .btn.primary, :root.ld-on .pp-dock .btn.primary { position: relative; overflow: hidden; isolation: isolate; background: linear-gradient(180deg, #FF7B5E 0%, #F24A33 100%); /* Тёмная подпись, как на акцентной кнопке в приложении: белое на оранжевом давало контраст 2,5–3,6 */ color: #121315; border: 0; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .38), inset 0 -1px 0 rgba(0, 0, 0, .22), 0 1px 2px rgba(0, 0, 0, .45), 0 10px 24px -14px rgba(255, 94, 77, .9); transition: translate .3s cubic-bezier(.2, .8, .2, 1), transform .12s ease, filter .2s ease; animation: none; } :root.ld-on .ld .ld-go::before { content: none; animation: none; } :root.ld-on .ld .btn.primary::after, :root.ld-on .pp-dock .btn.primary::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, .5) 48%, rgba(255, 255, 255, .12) 56%, transparent 70%); transform: translateX(-130%); } @media (hover: hover) { :root.ld-on .ld .btn.primary:hover::after { transform: translateX(130%); transition: transform .85s cubic-bezier(.2, .8, .2, 1); } :root.ld-on .ld .btn.primary:hover { filter: brightness(1.05); } } :root.ld-on .ld .btn.primary:active, :root.ld-on .pp-dock .btn.primary:active { transform: scale(.965); filter: brightness(.94); } :root.ld-on .ld .btn.primary:focus-visible { outline: 2px solid #fff; outline-offset: 3px; } :root.ld-on .ld .ld-go { border-radius: 16px; } /* ---------- первый экран: живая семья */ :root.ld-on .ld .lx-fam { display: grid; justify-items: stretch; align-content: center; gap: 0; min-height: 600px; } :root.ld-on .ld .lx-fam .lx-window { width: 100%; max-width: 580px; transform: rotateY(-7deg) rotateX(3deg); transform-origin: 70% 50%; } :root.ld-on .ld .lx-fam .ld-sheet-head { align-items: center; } :root.ld-on .ld .lx-count { font-family: var(--f-mono); font-size: 12px; color: var(--lx-ink-3); padding: 4px 10px; border-radius: 999px; border: 1px solid var(--lx-line-2); transition: color .3s ease, border-color .3s ease; } :root.ld-on .ld .lx-frow { grid-template-columns: auto minmax(0, 1fr) auto; transition: background-color .35s ease, box-shadow .35s ease; } :root.ld-on .ld .lx-frow .ld-meta { grid-column: 2; } :root.ld-on .ld .lx-frow .ld-title { transition: color .35s ease; background: linear-gradient(currentColor, currentColor) 0 55% / 0 1.5px no-repeat; text-decoration: none; } :root.ld-on .ld .lx-tick { grid-column: 3; grid-row: 1 / span 2; align-self: center; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; border: 1.5px solid var(--lx-line-2); color: transparent; transition: background-color .3s ease, border-color .3s ease, transform .3s cubic-bezier(.3, 1.6, .5, 1); } :root.ld-on .ld .lx-tick svg { width: 14px; height: 14px; } :root.ld-on .ld .lx-frow.is-live { background: color-mix(in srgb, var(--mc) 14%, transparent); box-shadow: inset 3px 0 0 var(--mc); } :root.ld-on .ld .lx-frow.is-done .ld-title { color: var(--lx-ink-3); background-size: 100% 1.5px; transition: background-size .45s ease, color .35s ease; } :root.ld-on .ld .lx-frow.is-done .lx-tick { background: var(--mc); border-color: var(--mc); color: #fff; transform: scale(1.08); } :root.ld-on .ld .lx-devs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; width: 100%; max-width: 580px; margin-top: -26px; padding: 0 10px; position: relative; z-index: 2; } :root.ld-on .ld .lx-dev { position: relative; aspect-ratio: 9 / 16; border-radius: 22px; padding: 5px; background: linear-gradient(160deg, #2C2825, #0E0D0C 45%, #1C1A18); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14), 0 0 0 1px rgba(0, 0, 0, .6), 0 26px 50px -22px rgba(0, 0, 0, .95); transition: transform .5s cubic-bezier(.2, .8, .2, 1), box-shadow .5s ease; } :root.ld-on .ld .lx-dev:nth-child(1) { transform: translateY(14px) rotate(-4deg); } :root.ld-on .ld .lx-dev:nth-child(2) { transform: translateY(2px) rotate(-1.5deg); } :root.ld-on .ld .lx-dev:nth-child(3) { transform: translateY(2px) rotate(1.5deg); } :root.ld-on .ld .lx-dev:nth-child(4) { transform: translateY(14px) rotate(4deg); } :root.ld-on .ld .lx-dev.is-ping { transform: translateY(-12px) rotate(0deg); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--mc) 70%, #fff), 0 0 0 1px rgba(0, 0, 0, .6), 0 26px 50px -18px rgba(0, 0, 0, .95), 0 0 36px -6px color-mix(in srgb, var(--mc) 70%, transparent); } :root.ld-on .ld .lx-dev-scr { position: relative; height: 100%; border-radius: 17px; overflow: hidden; background: linear-gradient(180deg, #111A24, #0A0F15); display: flex; flex-direction: column; gap: 8px; padding: 12px 8px 8px; } :root.ld-on .ld .lx-dev-scr::before { content: ""; position: absolute; top: 5px; left: 50%; width: 34%; height: 6px; border-radius: 6px; background: #000; transform: translateX(-50%); } :root.ld-on .ld .lx-dev-who { display: flex; align-items: center; gap: 6px; margin-top: 6px; min-width: 0; } :root.ld-on .ld .lx-dev-who b { font-size: 12px; font-weight: 600; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } :root.ld-on .ld .lx-note { display: grid; gap: 4px; padding: 8px; border-radius: 12px; background: #1C2B3B; color: #fff; font-size: 11.5px; line-height: 1.25; opacity: 0; transform: translateY(-10px) scale(.94); transform-origin: top center; transition: opacity .35s ease, transform .45s cubic-bezier(.2, .9, .3, 1.2); } :root.ld-on .ld .lx-note b { font-family: var(--f-mono); font-size: 10.5px; color: color-mix(in srgb, var(--mc) 60%, #fff); } :root.ld-on .ld .lx-note span { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } :root.ld-on .ld .lx-note u { text-decoration: none; text-align: center; padding: 5px 4px; margin-top: 2px; border-radius: 8px; background: rgba(255, 255, 255, .1); font-weight: 600; font-size: 11px; transition: background-color .2s ease, transform .15s ease; } :root.ld-on .ld .lx-dev.is-note .lx-note { opacity: 1; transform: none; } :root.ld-on .ld .lx-dev.is-press .lx-note u { background: var(--mc); transform: scale(.94); } :root.ld-on .ld .lx-dev.is-ok .lx-note { opacity: .35; } :root.ld-on .ld .lx-dev-ok { position: absolute; left: 50%; bottom: 14%; width: 40px; height: 40px; margin-left: -20px; border-radius: 50%; display: grid; place-items: center; background: var(--mc); color: #fff; box-shadow: 0 0 0 6px color-mix(in srgb, var(--mc) 25%, transparent), 0 10px 24px -8px var(--mc); opacity: 0; transform: scale(.4); transition: opacity .25s ease, transform .45s cubic-bezier(.3, 1.6, .5, 1); } :root.ld-on .ld .lx-dev-ok svg { width: 20px; height: 20px; } :root.ld-on .ld .lx-dev.is-ok .lx-dev-ok { opacity: 1; transform: none; } /* ---------- один день семьи */ :root.ld-on .ld .lx-day { position: relative; max-width: var(--lx-max); margin: 0 auto; padding-top: var(--lx-pad); background: linear-gradient(90deg, transparent, var(--lx-line-2) 20%, var(--lx-line-2) 80%, transparent) top / 100% 1px no-repeat; } :root.ld-on .ld .lx-day-head { display: grid; gap: 26px; } :root.ld-on .ld .lx-day-track { position: relative; height: calc(100svh - var(--lx-stick) + var(--n) * 58svh); margin-top: 24px; } :root.ld-on .ld .lx-day-pin { position: sticky; top: var(--lx-stick); height: calc(100svh - var(--lx-stick)); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: clamp(32px, 6vw, 96px); } :root.ld-on .ld .lx-day-copy { display: grid; gap: 28px; align-content: center; } :root.ld-on .ld .lx-clock-t { display: block; font-family: var(--f-display); font-weight: 700; font-variant-numeric: tabular-nums; font-size: clamp(96px, 13vw, 200px); line-height: .8; letter-spacing: -.045em; background: linear-gradient(180deg, #fff 20%, color-mix(in srgb, #fff 55%, var(--accent))); -webkit-background-clip: text; background-clip: text; color: transparent; } :root.ld-on .ld .lx-day-line { position: relative; height: 2px; background: var(--lx-line-2); border-radius: 2px; max-width: 460px; } :root.ld-on .ld .lx-day-fill { position: absolute; left: 0; top: 0; bottom: 0; width: calc(var(--p, 0) * 100%); border-radius: inherit; background: linear-gradient(90deg, var(--lx-amber), var(--accent)); box-shadow: 0 0 12px color-mix(in srgb, var(--accent) 70%, transparent); } :root.ld-on .ld .lx-day-line span { position: absolute; top: 50%; left: calc(var(--at) * 100%); width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; border-radius: 50%; background: #0B0A0C; border: 1.5px solid var(--lx-ink-3); } :root.ld-on .ld .lx-day-texts { display: grid; } :root.ld-on .ld .lx-day-texts > * { grid-area: 1 / 1; } :root.ld-on .ld .lx-day-text { opacity: 0; transform: translateY(14px); transition: opacity .45s ease, transform .55s cubic-bezier(.2, .8, .2, 1); pointer-events: none; } :root.ld-on .ld .lx-day-text.is-on { opacity: 1; transform: none; pointer-events: auto; } :root.ld-on .ld .lx-day-text h3 { margin: 0 0 12px; font-family: var(--f-display); font-weight: 700; font-size: var(--lx-h3); line-height: 1.05; letter-spacing: -.02em; color: var(--lx-ink); } :root.ld-on .ld .lx-day-text p { margin: 0; font-size: var(--lx-body); line-height: 1.6; color: var(--lx-ink-2); max-width: 40ch; } :root.ld-on .ld .lx-day-stage { display: grid; justify-items: center; gap: 16px; } :root.ld-on .ld .lx-day-who { display: grid; } :root.ld-on .ld .lx-day-who > span { grid-area: 1 / 1; justify-self: center; display: inline-flex; align-items: center; gap: 8px; padding: 5px 14px 5px 5px; border-radius: 999px; background: rgba(255, 255, 255, .05); border: 1px solid var(--lx-line-2); opacity: 0; transform: translateY(6px); transition: opacity .35s ease, transform .4s ease; } :root.ld-on .ld .lx-day-who > span.is-on { opacity: 1; transform: none; box-shadow: 0 0 24px -8px var(--mc); } :root.ld-on .ld .lx-day-who b { font-size: 14px; font-weight: 600; color: var(--lx-ink); } :root.ld-on .ld .lx-dphone { --ph: min(600px, calc(100svh - var(--lx-stick) - 110px)); height: var(--ph); aspect-ratio: 1 / 2.04; border-radius: 48px; padding: 9px; background: linear-gradient(160deg, #2C2825, #0D0C0B 40%, #1B1917); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16), 0 0 0 1px rgba(0, 0, 0, .6), 0 60px 100px -30px rgba(0, 0, 0, .9), 0 20px 70px -24px color-mix(in srgb, var(--accent) 40%, transparent); } :root.ld-on .ld .lx-dphone-scr { position: relative; height: 100%; border-radius: 40px; overflow: hidden; background: linear-gradient(180deg, #0F1720, #0A1016); } :root.ld-on .ld .lx-dphone .lx-phone-status { position: relative; z-index: 2; } :root.ld-on .ld .lx-dphone-t { font-variant-numeric: tabular-nums; } :root.ld-on .ld .lx-scn { position: absolute; inset: 44px 0 0; display: flex; flex-direction: column; opacity: 0; transform: translateY(18px) scale(.985); transition: opacity .4s ease, transform .5s cubic-bezier(.2, .8, .2, 1); } :root.ld-on .ld .lx-scn.is-on { opacity: 1; transform: none; } :root.ld-on .ld .lx-tg-head { display: flex; align-items: center; gap: 8px; padding: 8px 18px 12px; color: #fff; font-size: 15px; font-weight: 600; border-bottom: 1px solid rgba(255, 255, 255, .06); } :root.ld-on .ld .lx-tg-head i { margin-left: auto; font-style: normal; font-weight: 400; font-size: 13px; color: rgba(255, 255, 255, .5); } :root.ld-on .ld .lx-tg { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; gap: 8px; padding: 14px 14px 22px; } :root.ld-on .ld .lx-tg .ld-bubble { font-size: 14.5px; line-height: 1.4; padding: 10px 13px; max-width: 90%; } :root.ld-on .ld .lx-tg .ld-kb span { font-size: 13px; padding: 8px 6px; } :root.ld-on .ld .lx-mplan { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 6px; } :root.ld-on .ld .lx-mplan li { display: flex; gap: 8px; } :root.ld-on .ld .lx-mplan i { font-style: normal; font-family: var(--f-mono); font-size: 12.5px; color: #8CC4FF; padding-top: 1px; } /* поздние реплики появляются по очереди, когда сцена на экране */ :root.ld-on .ld .lx-later, :root.ld-on .ld .lx-later2 { opacity: 0; transform: translateY(8px); transition: opacity .3s ease, transform .35s ease; } :root.ld-on .ld .lx-scn.is-on .lx-later { opacity: 1; transform: none; transition-delay: .9s; } :root.ld-on .ld .lx-scn.is-on .lx-later2 { opacity: 1; transform: none; transition-delay: 1.5s; } :root.ld-on .ld .lx-scn[data-s="2"] .ld-kb span:first-child { transition: background-color .2s ease; } :root.ld-on .ld .lx-scn[data-s="2"].is-on .ld-kb span:first-child { background: #2B5278; transition-delay: .7s; } :root.ld-on .ld .lx-app-head { padding: 10px 20px 14px; } :root.ld-on .ld .lx-app-head b { font-family: var(--f-display); font-size: 28px; font-weight: 700; color: #fff; letter-spacing: -.01em; } :root.ld-on .ld .lx-app { flex: 1; padding: 0 16px 22px; display: flex; flex-direction: column; } :root.ld-on .ld .lx-shop, :root.ld-on .ld .lx-dlist { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; } :root.ld-on .ld .lx-shop li { display: flex; align-items: center; gap: 12px; padding: 12px 12px; border-radius: 14px; background: rgba(255, 255, 255, .04); color: #fff; font-size: 15px; transition: color .3s ease, opacity .3s ease; } :root.ld-on .ld .lx-box { width: 22px; height: 22px; border-radius: 7px; border: 1.5px solid rgba(255, 255, 255, .3); flex: none; display: grid; place-items: center; color: transparent; transition: background-color .25s ease, border-color .25s ease, color .25s ease; } :root.ld-on .ld .lx-box svg { width: 14px; height: 14px; } :root.ld-on .ld .lx-scn.is-on .lx-shop li.will-tick { color: rgba(255, 255, 255, .45); text-decoration: line-through; transition-delay: calc(.5s + var(--k) * .55s); } :root.ld-on .ld .lx-scn.is-on .lx-shop li.will-tick .lx-box { background: #3FCB6B; border-color: #3FCB6B; color: #0A1016; transition-delay: calc(.5s + var(--k) * .55s); } :root.ld-on .ld .lx-shop li.is-new { opacity: 0; transform: translateY(10px); transition: opacity .35s ease, transform .4s ease; background: color-mix(in srgb, var(--accent) 16%, transparent); } :root.ld-on .ld .lx-scn.is-on .lx-shop li.is-new { opacity: 1; transform: none; transition-delay: 2.3s; } :root.ld-on .ld .lx-shop li em { margin-left: auto; font-style: normal; font-size: 12px; color: #FFB7A6; } :root.ld-on .ld .lx-duty { padding: 12px; border-radius: 16px; background: rgba(255, 255, 255, .05); display: grid; gap: 10px; } :root.ld-on .ld .lx-duty-k { font-family: var(--f-mono); font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; color: rgba(255, 255, 255, .55); } :root.ld-on .ld .lx-duty-row { display: flex; align-items: center; justify-content: space-between; gap: 4px; } :root.ld-on .ld .lx-duty-row span { display: grid; justify-items: center; gap: 4px; opacity: .5; } :root.ld-on .ld .lx-duty-row span.is-on { opacity: 1; } :root.ld-on .ld .lx-duty-row span.is-on .av { box-shadow: 0 0 0 2px var(--mc), 0 0 18px var(--mc); } :root.ld-on .ld .lx-duty-row i { font-style: normal; font-size: 12px; color: #fff; } :root.ld-on .ld .lx-duty-row em { font-style: normal; color: rgba(255, 255, 255, .35); } :root.ld-on .ld .lx-pts { align-self: flex-start; padding: 7px 12px; border-radius: 999px; font-weight: 700; font-size: 14px; background: color-mix(in srgb, var(--lx-amber) 18%, transparent); color: var(--lx-amber); } :root.ld-on .ld .lx-dlist li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 11px 4px; border-bottom: 1px solid rgba(255, 255, 255, .06); font-size: 14.5px; color: #fff; } :root.ld-on .ld .lx-dlist i { font-style: normal; font-family: var(--f-mono); font-size: 12px; color: rgba(255, 255, 255, .45); } :root.ld-on .ld .lx-dlist span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: color .3s ease; } :root.ld-on .ld .lx-dlist b { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; border: 1.5px solid rgba(255, 255, 255, .25); color: transparent; transition: background-color .3s ease, border-color .3s ease, color .3s ease, transform .35s cubic-bezier(.3, 1.6, .5, 1); } :root.ld-on .ld .lx-dlist b svg { width: 13px; height: 13px; } :root.ld-on .ld .lx-scn.is-on .lx-dlist span { color: rgba(255, 255, 255, .45); text-decoration: line-through; transition-delay: calc(.2s + var(--k) * .14s); } :root.ld-on .ld .lx-scn.is-on .lx-dlist b { background: #3FCB6B; border-color: #3FCB6B; color: #0A1016; transition-delay: calc(.2s + var(--k) * .14s); } :root.ld-on .ld .lx-dsum { margin: auto 0 0; padding-top: 16px; font-weight: 600; font-size: 14.5px; color: #7FE0A0; } /* ---------- бенто: разная высота, в каждой клетке живой кусок экрана */ @media (min-width: 961px) { :root.ld-on .ld .ld-does.is-bento { grid-template-columns: repeat(6, minmax(0, 1fr)); grid-auto-flow: dense; } :root.ld-on .ld .ld-does.is-bento .ld-does-it[data-n="1"] { grid-column: span 4; } :root.ld-on .ld .ld-does.is-bento .ld-does-it[data-n="2"] { grid-column: span 2; grid-row: span 2; } :root.ld-on .ld .ld-does.is-bento .ld-does-it[data-n="3"], :root.ld-on .ld .ld-does.is-bento .ld-does-it[data-n="4"] { grid-column: span 2; } :root.ld-on .ld .ld-does.is-bento .ld-does-it[data-n="5"], :root.ld-on .ld .ld-does.is-bento .ld-does-it[data-n="6"] { grid-column: span 3; } :root.ld-on .ld .ld-does.is-bento .ld-does-it[data-n="2"] .ld-viz { min-height: 320px; } } :root.ld-on .ld .ld-does.is-bento .ld-does-it { padding: 24px; gap: 10px; align-content: start; overflow: hidden; } :root.ld-on .ld .ld-does.is-bento .ld-viz { position: relative; display: block; min-height: 176px; margin-bottom: 14px; padding: 18px; border-radius: 16px; background: rgba(0, 0, 0, .32); border: 1px solid var(--lx-line); color: var(--lx-ink-2); font-size: 14px; overflow: hidden; } :root.ld-on .ld .ld-viz .viz-ic { width: 32px; height: 32px; border-radius: 10px; display: inline-grid; place-items: center; background: rgba(255, 255, 255, .06); color: var(--lx-ink); flex: none; } :root.ld-on .ld .ld-viz .viz-ic svg { width: 17px; height: 17px; } /* 1 — очередь: подсветка «сегодня» переходит от одного к другому */ :root.ld-on .ld .bz-duty { display: grid !important; grid-template-columns: repeat(3, 1fr); align-items: center; } :root.ld-on .ld .bz-slot { position: relative; z-index: 1; display: grid; justify-items: center; gap: 8px; padding: 12px 4px; } :root.ld-on .ld .bz-slot i { font-style: normal; font-family: var(--f-mono); font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--lx-ink-3); } :root.ld-on .ld .bz-slot b { font-size: 15px; font-weight: 600; color: var(--lx-ink); } :root.ld-on .ld .bz-hl { position: absolute; z-index: 0; top: 14px; bottom: 14px; left: 18px; width: calc((100% - 36px) / 3); border-radius: 16px; background: color-mix(in srgb, var(--accent) 16%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 45%, transparent), 0 0 40px -10px var(--accent); transform: translateX(0); } :root.ld-on .ld .ld-does-it.is-vis .bz-hl { animation: bz-duty 7.5s cubic-bezier(.7, 0, .2, 1) infinite; } @keyframes bz-duty { 0%, 28% { transform: translateX(0); } 34%, 61% { transform: translateX(100%); } 67%, 94% { transform: translateX(200%); } 100% { transform: translateX(0); } } /* 2 — хвосты: «Всё на сегодня» нажимается, дела уезжают */ :root.ld-on .ld .bz-lo { display: flex !important; flex-direction: column; gap: 14px; } :root.ld-on .ld .bz-lo-h { font-family: var(--f-mono); font-size: 12px; color: var(--lx-ink-3); letter-spacing: .04em; } :root.ld-on .ld .bz-lo ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; } :root.ld-on .ld .bz-lo li { padding: 12px 14px; border-radius: 12px; background: rgba(255, 255, 255, .05); color: var(--lx-ink); font-size: 15px; } :root.ld-on .ld .bz-lo .viz-btns { display: grid; grid-template-columns: 1fr; gap: 8px; margin-top: auto; } :root.ld-on .ld .bz-lo .viz-btns u { text-align: center; padding: 11px 10px; border-radius: 12px; font-size: 14px; } :root.ld-on .ld .bz-lo-ok { position: absolute; left: 18px; right: 18px; top: 50%; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 12px; border-radius: 12px; background: color-mix(in srgb, #3FCB6B 16%, #0B0B0D); color: #7FE0A0; font-weight: 600; opacity: 0; transform: translateY(-50%) scale(.9); } :root.ld-on .ld .bz-lo-ok svg { width: 16px; height: 16px; } :root.ld-on .ld .ld-does-it.is-vis .bz-lo li { animation: bz-lo-li 6s ease infinite; } :root.ld-on .ld .ld-does-it.is-vis .bz-lo li + li { animation-delay: .08s; } :root.ld-on .ld .ld-does-it.is-vis .bz-lo .viz-btns u:first-child { animation: bz-press 6s ease infinite; } :root.ld-on .ld .ld-does-it.is-vis .bz-lo-ok { animation: bz-lo-ok 6s ease infinite; } @keyframes bz-lo-li { 0%, 40% { opacity: 1; transform: none; } 48%, 90% { opacity: 0; transform: translateY(-14px); } 100% { opacity: 1; transform: none; } } @keyframes bz-press { 0%, 32% { transform: none; filter: none; } 36% { transform: scale(.94); filter: brightness(1.2); } 42%, 100% { transform: none; filter: none; } } @keyframes bz-lo-ok { 0%, 46% { opacity: 0; transform: translateY(-50%) scale(.9); } 52%, 88% { opacity: 1; transform: translateY(-50%) scale(1); } 94%, 100% { opacity: 0; transform: translateY(-50%) scale(.9); } } /* 3 — подарки: кто-то взял подарок, имениннику не видно */ :root.ld-on .ld .bz-gift ul { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 8px; } :root.ld-on .ld .bz-gift li { display: flex; align-items: center; gap: 10px; color: var(--lx-ink); font-size: 14.5px; min-width: 0; } :root.ld-on .ld .bz-gift li .viz-ic { width: 28px; height: 28px; } :root.ld-on .ld .bz-gift em { margin-left: auto; font-style: normal; font-size: 12px; font-weight: 600; white-space: nowrap; padding: 4px 9px; border-radius: 999px; background: color-mix(in srgb, var(--accent) 20%, transparent); color: #FFC2B5; } :root.ld-on .ld .ld-does-it.is-vis .bz-gift em { animation: bz-pop 6s cubic-bezier(.3, 1.5, .5, 1) infinite; } @keyframes bz-pop { 0%, 22% { opacity: 0; transform: scale(.6); } 34%, 100% { opacity: 1; transform: none; } } :root.ld-on .ld .bz-lock { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--lx-ink-3); } :root.ld-on .ld .bz-lock svg { width: 14px; height: 14px; } /* 4 — фильтр: полоска заполняется, колокольчик покачивается */ :root.ld-on .ld .bz-gear { display: grid !important; grid-template-columns: auto 1fr; align-items: center; gap: 14px 12px; align-content: center; } :root.ld-on .ld .bz-gear > b { color: var(--lx-ink); font-size: 15px; font-weight: 600; } :root.ld-on .ld .bz-gear .viz-track { grid-column: 1 / -1; height: 10px; } :root.ld-on .ld .bz-gear .viz-track i { width: 0; background: linear-gradient(90deg, var(--lx-amber), var(--accent)); transition: width 1.6s cubic-bezier(.2, .8, .2, 1); } :root.ld-on .ld .ld-does-it.is-vis .bz-gear .viz-track i { width: var(--w); } :root.ld-on .ld .bz-gear-t { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; color: var(--lx-amber); font-weight: 600; } :root.ld-on .ld .bz-gear-t svg { width: 16px; height: 16px; transform-origin: 50% 10%; } :root.ld-on .ld .ld-does-it.is-vis .bz-gear-t svg { animation: bz-bell 3s ease infinite 1.6s; } @keyframes bz-bell { 0%, 70%, 100% { transform: none; } 75% { transform: rotate(16deg); } 80% { transform: rotate(-14deg); } 85% { transform: rotate(10deg); } 90% { transform: rotate(-6deg); } } /* 5 — копилка: кольцо набирается, монетка падает */ :root.ld-on .ld .bz-goal { display: flex !important; align-items: center; gap: 18px; } :root.ld-on .ld .bz-ring { width: 108px; height: 108px; flex: none; transform: rotate(-90deg); } :root.ld-on .ld .bz-ring circle { fill: none; stroke: rgba(255, 255, 255, .08); stroke-width: 8; } :root.ld-on .ld .bz-ring .bz-ring-v { stroke: var(--lx-amber); stroke-linecap: round; stroke-dasharray: var(--c); stroke-dashoffset: var(--c); transition: stroke-dashoffset 1.8s cubic-bezier(.2, .8, .2, 1); filter: drop-shadow(0 0 6px rgba(255, 179, 107, .5)); } :root.ld-on .ld .ld-does-it.is-vis .bz-ring-v { stroke-dashoffset: var(--v); } :root.ld-on .ld .bz-goal-t { display: grid; gap: 2px; } :root.ld-on .ld .bz-goal-t b { font-family: var(--f-display); font-size: 44px; line-height: 1; color: var(--lx-ink); } :root.ld-on .ld .bz-goal-t i { font-style: normal; color: var(--lx-ink-2); } :root.ld-on .ld .bz-coin { position: absolute; left: 62px; top: 20px; padding: 3px 8px; border-radius: 999px; font-weight: 700; font-size: 12px; background: var(--lx-amber); color: #2A1606; opacity: 0; } :root.ld-on .ld .ld-does-it.is-vis .bz-coin { animation: bz-coin 3.2s ease-in infinite 1.2s; } @keyframes bz-coin { 0% { opacity: 0; transform: translateY(-14px); } 15% { opacity: 1; } 55% { opacity: 1; transform: translateY(40px) scale(.9); } 70%, 100% { opacity: 0; transform: translateY(52px) scale(.6); } } /* 6 — тихий режим: переключатель щёлкает, лишнее гаснет, здоровье и SOS остаются */ :root.ld-on .ld .bz-q-top { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; } :root.ld-on .ld .bz-q-top b { color: var(--lx-ink); font-weight: 600; font-size: 15px; } :root.ld-on .ld .bz-quiet .viz-switch { margin-left: auto; background: rgba(255, 255, 255, .14); transition: background-color .3s ease; } :root.ld-on .ld .bz-quiet .viz-switch i { right: auto; left: 3px; transition: transform .3s cubic-bezier(.3, 1.4, .5, 1); } :root.ld-on .ld .bz-quiet ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; } :root.ld-on .ld .bz-quiet li { padding: 7px 12px; border-radius: 999px; background: rgba(255, 255, 255, .06); color: var(--lx-ink); font-size: 13.5px; } :root.ld-on .ld .bz-quiet li.is-keep { background: color-mix(in srgb, var(--accent) 18%, transparent); color: #FFC9BC; } :root.ld-on .ld .ld-does-it.is-vis .bz-quiet .viz-switch { animation: bz-sw-bg 7s ease infinite; } :root.ld-on .ld .ld-does-it.is-vis .bz-quiet .viz-switch i { animation: bz-sw 7s ease infinite; } :root.ld-on .ld .ld-does-it.is-vis .bz-quiet li:not(.is-keep) { animation: bz-mute 7s ease infinite; } @keyframes bz-sw { 0%, 18% { transform: none; } 24%, 86% { transform: translateX(16px); } 92%, 100% { transform: none; } } @keyframes bz-sw-bg { 0%, 18% { background-color: rgba(255, 255, 255, .14); } 24%, 86% { background-color: var(--accent); } 92%, 100% { background-color: rgba(255, 255, 255, .14); } } @keyframes bz-mute { 0%, 22% { opacity: 1; text-decoration: none; } 30%, 86% { opacity: .3; text-decoration: line-through; } 94%, 100% { opacity: 1; text-decoration: none; } } /* ---------- цена: один тариф, переключатель месяц / год */ :root.ld-on .ld .lx-price-in { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(32px, 6vw, 96px); align-items: start; } :root.ld-on .ld .lx-price-copy { display: grid; gap: 26px; align-content: start; } :root.ld-on .ld .lx-price-after { color: var(--lx-ink-3); font-size: 16px; } :root.ld-on .ld .lx-plan { position: relative; display: grid; gap: 20px; padding: clamp(24px, 3vw, 36px); border-radius: 28px; background: radial-gradient(120% 70% at 50% -10%, color-mix(in srgb, var(--accent) 20%, transparent), transparent 60%), linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .02)); border: 1px solid color-mix(in srgb, var(--accent) 40%, var(--lx-line-2)); box-shadow: var(--lx-hi), 0 40px 90px -40px color-mix(in srgb, var(--accent) 60%, transparent); } :root.ld-on .ld .lx-plan-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; } :root.ld-on .ld .lx-plan-top > b { font-size: 16px; font-weight: 600; color: var(--lx-ink); } :root.ld-on .ld .lx-seg { position: relative; display: inline-grid; grid-template-columns: 1fr 1fr; padding: 4px; border-radius: 14px; background: rgba(0, 0, 0, .35); border: 1px solid var(--lx-line-2); } :root.ld-on .ld .lx-seg button { position: relative; z-index: 1; border: 0; background: none; cursor: pointer; font: inherit; font-size: 14px; font-weight: 600; color: var(--lx-ink-2); padding: 8px 16px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; transition: color .25s ease; white-space: nowrap; } :root.ld-on .ld .lx-seg button[aria-pressed="true"] { color: #fff; } :root.ld-on .ld .lx-seg button:focus-visible { outline: 2px solid #fff; outline-offset: 1px; } :root.ld-on .ld .lx-seg em { font-style: normal; font-size: 11.5px; padding: 2px 6px; border-radius: 6px; background: color-mix(in srgb, var(--lx-amber) 22%, transparent); color: var(--lx-amber); } :root.ld-on .ld .lx-seg-knob { position: absolute; z-index: 0; top: 4px; bottom: 4px; left: 4px; width: calc(50% - 4px); border-radius: 10px; background: rgba(255, 255, 255, .12); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12); transition: transform .35s cubic-bezier(.2, .8, .2, 1); } :root.ld-on .ld .lx-plan.is-year .lx-seg-knob { transform: translateX(100%); } :root.ld-on .ld .lx-plan-sum, :root.ld-on .ld .lx-plan-sub { display: grid; } :root.ld-on .ld .lx-plan-sum > *, :root.ld-on .ld .lx-plan-sub > * { grid-area: 1 / 1; transition: opacity .3s ease, transform .45s cubic-bezier(.2, .8, .2, 1); } :root.ld-on .ld .lx-plan-sum > span { display: flex; align-items: baseline; gap: 10px; } :root.ld-on .ld .lx-plan-n { font-family: var(--f-display); font-weight: 700; font-size: clamp(64px, 7vw, 96px); line-height: .9; letter-spacing: -.035em; color: #fff; } :root.ld-on .ld .lx-plan-per { color: var(--lx-ink-2); font-size: 16px; } :root.ld-on .ld .lx-plan .lx-when-y { opacity: 0; transform: translateY(24px); pointer-events: none; } :root.ld-on .ld .lx-plan.is-year .lx-when-y { opacity: 1; transform: none; pointer-events: auto; } :root.ld-on .ld .lx-plan.is-year .lx-when-m { opacity: 0; transform: translateY(-24px); pointer-events: none; } :root.ld-on .ld .lx-plan-sub { margin: -6px 0 0; color: var(--lx-ink-2); font-size: 15px; } :root.ld-on .ld .lx-plan-sub s { color: var(--lx-ink-3); } :root.ld-on .ld .lx-plan-sub em { font-style: normal; color: var(--lx-amber); font-weight: 600; } :root.ld-on .ld .lx-plan-trial { margin: 0; display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 14px; background: color-mix(in srgb, var(--lx-amber) 10%, transparent); color: #FFD6AE; font-weight: 600; font-size: 15px; } :root.ld-on .ld .lx-plan-trial svg { width: 18px; height: 18px; flex: none; } :root.ld-on .ld .lx-feats { list-style: none; margin: 0; padding: 20px 0 0; border-top: 1px solid var(--lx-line); display: grid; gap: 12px; } :root.ld-on .ld .lx-feats li { display: flex; gap: 12px; align-items: flex-start; color: var(--lx-ink); font-size: 16px; line-height: 1.4; } :root.ld-on .ld .lx-feats svg { width: 18px; height: 18px; flex: none; margin-top: 2px; color: var(--accent); } :root.ld-on .ld .lx-plan-go { width: 100%; } :root.ld-on .ld .lx-plan-extra { margin: -6px 0 0; text-align: center; font-size: 13.5px; color: var(--lx-ink-3); } /* ---------- телефон */ @media (max-width: 960px) { :root.ld-on { --lx-stick: 70px; --lx-body: 17px; } :root.ld-on .ld .lx-fam { min-height: 0; } :root.ld-on .ld .lx-fam .lx-window { transform: none; max-width: none; } :root.ld-on .ld .lx-devs { max-width: none; gap: 8px; padding: 0 2px; margin-top: -14px; } :root.ld-on .ld .lx-dev { border-radius: 18px; padding: 4px; } :root.ld-on .ld .lx-dev-scr { border-radius: 14px; padding: 10px 5px 6px; gap: 5px; } :root.ld-on .ld .lx-dev-who .av { display: none; } :root.ld-on .ld .lx-dev-who { justify-content: center; margin-top: 4px; } :root.ld-on .ld .lx-dev-who b { font-size: 10.5px; } :root.ld-on .ld .lx-note { padding: 5px; border-radius: 9px; font-size: 9.5px; gap: 3px; } :root.ld-on .ld .lx-note b { font-size: 9px; } :root.ld-on .ld .lx-note u { font-size: 9px; padding: 4px 2px; border-radius: 6px; } :root.ld-on .ld .lx-dev-ok { width: 30px; height: 30px; margin-left: -15px; bottom: 10%; } :root.ld-on .ld .lx-dev-ok svg { width: 16px; height: 16px; } :root.ld-on .ld .lx-day-track { height: calc(100svh - var(--lx-stick) + var(--n) * 64svh); } :root.ld-on .ld .lx-day-pin { grid-template-columns: minmax(0, 1fr); align-content: center; gap: 14px; padding-bottom: 8px; } :root.ld-on .ld .lx-day-copy { gap: 12px; } :root.ld-on .ld .lx-clock-t { font-size: clamp(60px, 18vw, 96px); } :root.ld-on .ld .lx-day-text h3 { font-size: 22px; margin-bottom: 6px; } :root.ld-on .ld .lx-day-text p { font-size: 15px; line-height: 1.45; } :root.ld-on .ld .lx-day-texts { min-height: 118px; } :root.ld-on .ld .lx-day-stage { gap: 10px; } :root.ld-on .ld .lx-day-who b { font-size: 13px; } :root.ld-on .ld .lx-dphone { --ph: max(300px, calc(100svh - var(--lx-stick) - 330px)); border-radius: 34px; padding: 6px; } :root.ld-on .ld .lx-dphone-scr { border-radius: 29px; } :root.ld-on .ld .lx-dphone .lx-phone-status { height: 32px; font-size: 11px; padding: 0 16px; } :root.ld-on .ld .lx-dphone .lx-island { width: 54px; height: 16px; } :root.ld-on .ld .lx-scn { inset: 32px 0 0; } :root.ld-on .ld .lx-tg-head { font-size: 12.5px; padding: 4px 12px 8px; } :root.ld-on .ld .lx-tg-head i { font-size: 11px; } :root.ld-on .ld .lx-tg { padding: 8px 8px 12px; gap: 6px; } :root.ld-on .ld .lx-tg .ld-bubble { font-size: 11.5px; padding: 7px 9px; } :root.ld-on .ld .lx-tg .ld-kb { gap: 4px; margin-top: 6px; } :root.ld-on .ld .lx-tg .ld-kb span { font-size: 10.5px; padding: 5px 4px; } :root.ld-on .ld .lx-mplan i { font-size: 10px; } :root.ld-on .ld .lx-app-head { padding: 4px 12px 8px; } :root.ld-on .ld .lx-app-head b { font-size: 20px; } :root.ld-on .ld .lx-app { padding: 0 8px 12px; } :root.ld-on .ld .lx-shop li { font-size: 12px; padding: 8px; gap: 8px; border-radius: 10px; } :root.ld-on .ld .lx-shop li em { font-size: 10px; } :root.ld-on .ld .lx-box { width: 16px; height: 16px; border-radius: 5px; } :root.ld-on .ld .lx-box svg { width: 11px; height: 11px; } :root.ld-on .ld .lx-duty { padding: 8px; gap: 6px; } :root.ld-on .ld .lx-duty-row .av { --size: 24px; } :root.ld-on .ld .lx-duty-row i { font-size: 10px; } :root.ld-on .ld .lx-duty-k { font-size: 9.5px; } :root.ld-on .ld .lx-pts { font-size: 11.5px; padding: 5px 9px; } :root.ld-on .ld .lx-dlist li { font-size: 11.5px; padding: 7px 2px; gap: 6px; } :root.ld-on .ld .lx-dlist i { font-size: 9.5px; } :root.ld-on .ld .lx-dlist b { width: 16px; height: 16px; } :root.ld-on .ld .lx-dlist b svg { width: 10px; height: 10px; } :root.ld-on .ld .lx-dsum { font-size: 11.5px; padding-top: 8px; } :root.ld-on .ld .ld-does.is-bento .ld-viz { min-height: 150px; } :root.ld-on .ld .lx-price-in { grid-template-columns: minmax(0, 1fr); } } @media (max-width: 520px) { :root.ld-on .ld .ld-h { font-size: clamp(36px, 10.4vw, 44px); max-width: none; } :root.ld-on .ld .ld-does.is-bento .ld-does-it { padding: 18px; } :root.ld-on .ld .bz-ring { width: 88px; height: 88px; } :root.ld-on .ld .lx-plan-top { gap: 14px; } :root.ld-on .ld .lx-seg { width: 100%; } } /* невысокий телефон: телефон в «Одном дне» уступает место тексту */ @media (max-width: 960px) and (max-height: 700px) { :root.ld-on .ld .lx-day-who { display: none; } :root.ld-on .ld .lx-clock-t { font-size: 56px; } :root.ld-on .ld .lx-dphone { --ph: max(260px, calc(100svh - var(--lx-stick) - 270px)); } } /* ---------- без движения: всё в конечном виде, ничего не крутится */ @media (prefers-reduced-motion: reduce) { :root.ld-on .ld .lx-fam .lx-window, :root.ld-on .ld .lx-dev { transform: none !important; } :root.ld-on .ld .lx-scn, :root.ld-on .ld .lx-day-text, :root.ld-on .ld .lx-day-who > span, :root.ld-on .ld .lx-scn *, :root.ld-on .ld .lx-plan-sum > *, :root.ld-on .ld .lx-plan-sub > * { transition: none !important; } :root.ld-on .ld .ld-does-it .bz-hl, :root.ld-on .ld .ld-does-it .bz-lo li, :root.ld-on .ld .ld-does-it .bz-lo-ok, :root.ld-on .ld .ld-does-it .bz-gift em, :root.ld-on .ld .ld-does-it .bz-coin, :root.ld-on .ld .ld-does-it .viz-switch, :root.ld-on .ld .ld-does-it .viz-switch i, :root.ld-on .ld .ld-does-it .bz-quiet li, :root.ld-on .ld .ld-does-it .bz-press, :root.ld-on .ld .ld-does-it .viz-btns u, :root.ld-on .ld .ld-does-it .bz-gear-t svg { animation: none !important; } :root.ld-on .ld .bz-quiet .viz-switch { background: var(--accent); } :root.ld-on .ld .bz-quiet .viz-switch i { transform: translateX(16px); } :root.ld-on .ld .bz-quiet li:not(.is-keep) { opacity: .3; text-decoration: line-through; } :root.ld-on .ld .bz-gear .viz-track i { width: var(--w); transition: none; } :root.ld-on .ld .bz-ring-v { stroke-dashoffset: var(--v); transition: none; } :root.ld-on .ld .btn.primary::after { content: none; } } /* в первом экране строки подсвечивает сам цикл, а не часы; зачёркивание — по длине текста */ :root.ld-on .ld .lx-fam .ld-row.is-now:not(.is-live) { box-shadow: none; } :root.ld-on .ld .lx-fam .pp-clock { display: none; } :root.ld-on .ld .lx-frow .ld-title { justify-self: start; max-width: 100%; } /* бумажная подложка приложения лежит поверх неба — на витрине её нет, фон даёт небо */ :root.ld-on body::before, :root.ld-on body::after { content: none; } :root.ld-on body { transition: none; background-image: none; } /* ============================================================================ Пакет 2: короче и увереннее. Правка в заголовке, солнце по дуге, шаги линией, «впиши своих», настоящие экраны в «Что внутри», ролик в буквах финала. ========================================================================== */ /* ---------- правка от руки в заголовке */ :root.ld-on .ld .lx-strike { position: relative; display: inline-block; white-space: nowrap; } :root.ld-on .ld .lx-strike-l { position: absolute; left: -4%; top: 38%; width: 108%; height: .42em; overflow: visible; pointer-events: none; } :root.ld-on .ld .lx-strike-l path { fill: none; stroke: var(--accent); stroke-width: 5; stroke-linecap: round; vector-effect: non-scaling-stroke; stroke-dasharray: 240; stroke-dashoffset: 240; filter: drop-shadow(0 0 8px color-mix(in srgb, var(--accent) 60%, transparent)); } :root.ld-on .ld .ld-claim.is-fixed .lx-strike-l path { stroke-dashoffset: 0; transition: stroke-dashoffset .6s cubic-bezier(.6, 0, .3, 1); } :root.ld-on .ld .ld-claim.is-fixed .lx-strike { color: color-mix(in srgb, var(--lx-ink) 55%, transparent); -webkit-text-fill-color: currentColor; transition: color .5s ease .3s; } :root.ld-on .ld .lx-fix { margin: -8px 0 0; justify-self: start; display: inline-flex; align-items: center; gap: 10px; font-family: var(--f-display); font-weight: 700; font-size: clamp(26px, 2.6vw, 38px); line-height: 1; letter-spacing: -.02em; color: var(--accent); transform-origin: 0 50%; opacity: 0; transform: rotate(-3deg) translateY(8px) scale(.94); } :root.ld-on .ld .lx-fix::before { content: ""; width: 34px; height: 2px; border-radius: 2px; background: currentColor; transform: rotate(-18deg); opacity: .8; } :root.ld-on .ld .ld-claim.is-fixed + .lx-fix { opacity: 1; transform: rotate(-3deg); transition: opacity .35s ease .45s, transform .55s cubic-bezier(.3, 1.5, .5, 1) .45s; } /* длинная и короткая версии одной фразы: на телефоне — короткая */ :root.ld-on .ld .lx-short { display: none; } /* ---------- солнце и луна */ .lx-sky .s-sun, .lx-sky .s-moon { position: absolute; left: 0; top: 0; will-change: transform, opacity; } .lx-sky .s-sun { --sun: rgb(255, 150, 90); width: 520px; height: 520px; margin: -260px 0 0 -260px; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--sun) 70%, #fff) 0 5%, color-mix(in srgb, var(--sun) 55%, transparent) 12%, color-mix(in srgb, var(--sun) 18%, transparent) 34%, transparent 66%); opacity: 0; } .lx-sky .s-moon { width: 54px; height: 54px; margin: -27px 0 0 -27px; border-radius: 50%; box-shadow: inset 14px -6px 0 0 #EEF1F8, 0 0 40px 6px rgba(200, 214, 255, .10); transform: rotate(-20deg); opacity: 0; } /* ---------- «Как это работает»: шаги на одной линии, по ней бежит сообщение */ :root.ld-on .ld .lx-steps { position: relative; list-style: none; margin: 48px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(24px, 4vw, 64px); } :root.ld-on .ld .lx-steps::before { content: ""; position: absolute; left: 22px; right: 22px; top: 22px; height: 2px; background: linear-gradient(90deg, var(--lx-line-2), var(--lx-line-2)) no-repeat; } :root.ld-on .ld .lx-steps::after { content: ""; position: absolute; top: 17px; left: 22px; width: 12px; height: 12px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 45%, transparent), 0 0 24px 4px var(--accent); opacity: 0; } :root.ld-on .ld .lx-steps.is-vis::after { animation: lx-run 5.4s cubic-bezier(.6, 0, .3, 1) infinite; } @keyframes lx-run { 0% { left: 22px; opacity: 0; } 6% { opacity: 1; } 45% { left: calc(50% - 6px); } 55% { left: calc(50% - 6px); } 92% { left: calc(100% - 34px); opacity: 1; } 100% { left: calc(100% - 34px); opacity: 0; } } :root.ld-on .ld .lx-step { position: relative; display: grid; gap: 10px; align-content: start; } :root.ld-on .ld .lx-step-n { position: relative; z-index: 1; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; font-family: var(--f-mono); font-size: 15px; font-weight: 600; color: var(--lx-ink); background: #0E0D0F; border: 1.5px solid var(--lx-line-2); margin-bottom: 10px; } :root.ld-on .ld .lx-steps.is-vis .lx-step-n { animation: lx-node 5.4s ease infinite; animation-delay: calc(var(--k) * 2.3s); } @keyframes lx-node { 0%, 4% { border-color: var(--lx-line-2); box-shadow: none; } 10%, 30% { border-color: var(--accent); box-shadow: 0 0 0 6px color-mix(in srgb, var(--accent) 16%, transparent), 0 0 24px -4px var(--accent); } 45%, 100% { border-color: var(--lx-line-2); box-shadow: none; } } :root.ld-on .ld .lx-step b { font-family: var(--f-display); font-weight: 700; font-size: var(--lx-h3); line-height: 1.05; letter-spacing: -.02em; color: var(--lx-ink); } :root.ld-on .ld .lx-step-t { color: var(--lx-ink-2); font-size: 16px; line-height: 1.55; max-width: 34ch; } :root.ld-on .ld .lx-step-fan { display: flex; margin-top: 4px; } :root.ld-on .ld .lx-step-fan .av { margin-right: -6px; box-shadow: 0 0 0 2px #0E0D0F; } /* ---------- «Впиши своих» */ :root.ld-on .ld .lx-names { margin-top: clamp(56px, 7vw, 96px); padding: clamp(22px, 3vw, 32px); border-radius: 24px; display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.6fr); gap: 16px 32px; align-items: center; background: linear-gradient(180deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .02)); border: 1px solid var(--lx-line-2); box-shadow: var(--lx-hi); } :root.ld-on .ld .lx-names-copy { display: grid; gap: 6px; } :root.ld-on .ld .lx-names-copy b { font-family: var(--f-display); font-size: clamp(22px, 2vw, 28px); line-height: 1.1; letter-spacing: -.015em; color: var(--lx-ink); } :root.ld-on .ld .lx-names-copy span { font-size: 14px; color: var(--lx-ink-3); } :root.ld-on .ld .lx-names-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; } :root.ld-on .ld .lx-nm { display: grid; gap: 6px; min-width: 0; } :root.ld-on .ld .lx-nm-k { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--lx-ink-3); } :root.ld-on .ld .lx-nm-k i { font-style: normal; font-family: var(--f-mono); letter-spacing: .04em; } :root.ld-on .ld .lx-nm-in { width: 100%; min-width: 0; height: 46px; padding: 0 14px; border-radius: 12px; font: inherit; font-size: 16px; font-weight: 600; color: var(--lx-ink); background: rgba(0, 0, 0, .35); border: 1px solid var(--lx-line-2); transition: border-color .2s ease, box-shadow .2s ease; } :root.ld-on .ld .lx-nm-in::placeholder { color: var(--lx-ink-3); font-weight: 500; } :root.ld-on .ld .lx-nm-in:focus { outline: none; border-color: var(--mc); box-shadow: 0 0 0 3px color-mix(in srgb, var(--mc) 30%, transparent); } :root.ld-on .ld .lx-nm-reset { grid-column: 2; justify-self: start; font-size: 14px; color: var(--lx-ink-2); } /* ---------- «Один день» теперь внутри «Как это работает» */ :root.ld-on .ld .lx-day-intro { display: grid; gap: 18px; margin-top: clamp(72px, 9vw, 128px); } :root.ld-on .ld .lx-day-h { margin: 0; font-family: var(--f-display); font-weight: 700; font-size: clamp(30px, 3.6vw, 52px); line-height: .98; letter-spacing: -.03em; color: var(--lx-ink); max-width: 20ch; } :root.ld-on .ld .lx-day-foot { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 80px); align-items: start; margin-top: clamp(40px, 6vw, 80px); padding-top: clamp(40px, 6vw, 80px); border-top: 1px solid var(--lx-line); } :root.ld-on .ld .lx-foot-copy { display: grid; gap: 20px; align-content: start; } :root.ld-on .ld .lx-foot-copy .btn { justify-self: start; } :root.ld-on .ld .lx-foot-try { background: var(--lx-card); border: 1px solid var(--lx-line); border-radius: var(--lx-r); box-shadow: var(--lx-hi); padding: 28px; } /* ---------- «Что внутри»: сетка разделов и настоящий экран */ :root.ld-on .ld .lx-in-in { gap: 40px; } :root.ld-on .ld .lx-in-copy { display: grid; gap: 22px; } :root.ld-on .ld .lx-in-copy .ld-p { max-width: 62ch; } :root.ld-on .ld .lx-in-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: clamp(32px, 5vw, 80px); align-items: start; } :root.ld-on .ld .lx-in-view { margin: 0; position: sticky; top: calc(var(--lx-stick) + 12px); display: grid; justify-items: center; gap: 18px; } :root.ld-on .ld .lx-in-phone { width: min(320px, 100%); aspect-ratio: 390 / 844; border-radius: 46px; padding: 9px; background: linear-gradient(160deg, #2C2825, #0D0C0B 40%, #1B1917); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16), 0 0 0 1px rgba(0, 0, 0, .6), 0 60px 100px -30px rgba(0, 0, 0, .9), 0 20px 70px -24px color-mix(in srgb, var(--accent) 38%, transparent); } :root.ld-on .ld .lx-in-shot { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; border-radius: 38px; background: #0E0D0F; transition: opacity .16s ease, transform .3s ease; } :root.ld-on .ld .lx-in-phone.is-swap .lx-in-shot { opacity: 0; transform: scale(.985); } :root.ld-on .ld .lx-in-view figcaption { display: grid; justify-items: center; gap: 6px; text-align: center; } :root.ld-on .ld .lx-in-real { font-family: var(--f-mono); font-size: 11.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--lx-ink-3); } :root.ld-on .ld .lx-in-name { font-family: var(--f-display); font-size: 30px; line-height: 1; color: var(--lx-ink); } :root.ld-on .ld .lx-in-sub { color: var(--lx-ink-2); font-size: 15px; } :root.ld-on .ld .lx-in-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 4px; } :root.ld-on .ld .lx-in-chips i { display: inline-flex; align-items: center; gap: 6px; font-style: normal; font-size: 12.5px; padding: 5px 10px; border-radius: 999px; background: rgba(255, 255, 255, .06); color: var(--lx-ink-2); } :root.ld-on .ld .lx-in-chips i[hidden] { display: none; } :root.ld-on .ld .lx-in-chips svg { width: 14px; height: 14px; } :root.ld-on .ld .lx-in-grid { display: grid; gap: 28px; } :root.ld-on .ld .lx-in-hint { margin: 0; font-size: 14px; color: var(--lx-ink-3); } :root.ld-on .ld .lx-in-g { display: grid; gap: 12px; } :root.ld-on .ld .lx-in-gh { font-family: var(--f-mono); font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--lx-ink-3); } :root.ld-on .ld .lx-in-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 8px; } :root.ld-on .ld .lx-tile { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 8px 12px; border-radius: 14px; cursor: pointer; font: inherit; text-align: left; color: var(--lx-ink-2); background: rgba(255, 255, 255, .03); border: 1px solid var(--lx-line); transition: background-color .2s ease, border-color .2s ease, color .2s ease, transform .2s ease; } :root.ld-on .ld .lx-tile b { font-size: 14.5px; font-weight: 600; } :root.ld-on .ld .lx-tile-ic { width: 30px; height: 30px; flex: none; border-radius: 9px; display: grid; place-items: center; background: rgba(255, 255, 255, .05); } :root.ld-on .ld .lx-tile-ic svg { width: 17px; height: 17px; } :root.ld-on .ld .lx-tile:hover { color: var(--lx-ink); border-color: var(--lx-line-2); } :root.ld-on .ld .lx-tile.is-on { color: #fff; border-color: color-mix(in srgb, var(--accent) 60%, transparent); background: color-mix(in srgb, var(--accent) 14%, transparent); box-shadow: 0 0 30px -12px var(--accent); } :root.ld-on .ld .lx-tile.is-on .lx-tile-ic { background: var(--accent); color: #fff; } :root.ld-on .ld .lx-tile:focus-visible { outline: 2px solid #fff; outline-offset: 2px; } /* ---------- финал: ролик в буквах */ :root.ld-on .ld .lx-giant { display: block; width: 100%; margin-top: 24px; pointer-events: none; } :root.ld-on .ld .ld-giant.is-canvas { display: none; } /* ---------- телефон */ @media (max-width: 960px) { :root.ld-on .ld .lx-long { display: none; } :root.ld-on .ld .lx-short { display: inline; } /* первый экран: заголовок, правка, одна строка, четыре телефона, кнопка — окно семьи ниже */ :root.ld-on .ld .ld-hero { display: grid; row-gap: 16px; } :root.ld-on .ld .ld-hero-copy, :root.ld-on .ld .lx-fam { display: contents; } :root.ld-on .ld .ld-hero .ld-badge { display: none; } :root.ld-on .ld .ld-hero .ld-claim { order: 1; } :root.ld-on .ld .ld-hero .lx-fix { order: 2; margin-top: -4px; } :root.ld-on .ld .ld-hero .ld-rot { display: none; } :root.ld-on .ld .ld-hero .ld-lead { order: 3; font-size: 17px; } :root.ld-on .ld .ld-hero .ld-flow { display: none; } :root.ld-on .ld .ld-hero .lx-devs { order: 4; margin: 4px 0 6px; padding: 0; } :root.ld-on .ld .ld-hero .ld-cta { order: 5; } :root.ld-on .ld .ld-hero .ld-demo { order: 6; } :root.ld-on .ld .ld-hero .lx-window { order: 7; margin-top: 18px; } :root.ld-on .ld .lx-dev { aspect-ratio: 9 / 14; } :root.ld-on .ld .lx-dev:nth-child(n) { transform: none; } :root.ld-on .ld .lx-dev.is-ping { transform: translateY(-6px); } :root.ld-on .ld .ld-cta { gap: 10px; } :root.ld-on .ld .ld-cta .ld-go { width: 100%; } :root.ld-on .ld .ld-cta .ld-note { width: 100%; text-align: center; } :root.ld-on .ld .ld-demo { justify-self: center; } :root.ld-on .ld .lx-steps { grid-template-columns: minmax(0, 1fr); gap: 28px; margin-top: 32px; } :root.ld-on .ld .lx-steps::before { left: 22px; right: auto; top: 22px; bottom: 22px; width: 2px; height: auto; } :root.ld-on .ld .lx-steps::after { display: none; } :root.ld-on .ld .lx-step { grid-template-columns: 46px minmax(0, 1fr); column-gap: 16px; } :root.ld-on .ld .lx-step > * { grid-column: 2; } :root.ld-on .ld .lx-step-n { grid-column: 1; grid-row: 1 / span 3; margin: 0; } :root.ld-on .ld .lx-step b { font-size: 22px; } :root.ld-on .ld .lx-names { grid-template-columns: minmax(0, 1fr); } :root.ld-on .ld .lx-names-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } :root.ld-on .ld .lx-nm-reset { grid-column: 1; } :root.ld-on .ld .lx-day-foot { grid-template-columns: minmax(0, 1fr); } :root.ld-on .ld .lx-foot-try { padding: 20px; } :root.ld-on .ld .lx-in-body { grid-template-columns: minmax(0, 1fr); } :root.ld-on .ld .lx-in-view { position: static; } :root.ld-on .ld .lx-in-phone { width: min(250px, 72vw); border-radius: 38px; padding: 7px; } :root.ld-on .ld .lx-in-shot { border-radius: 31px; } :root.ld-on .ld .lx-in-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } :root.ld-on .ld .lx-tile { min-height: 46px; padding: 6px 10px; } :root.ld-on .ld .lx-tile b { font-size: 13.5px; } .lx-sky .s-sun { width: 340px; height: 340px; margin: -170px 0 0 -170px; } } @media (prefers-reduced-motion: reduce) { :root.ld-on .ld .lx-strike-l path { stroke-dashoffset: 0; transition: none !important; } :root.ld-on .ld .lx-fix { opacity: 1; transform: rotate(-3deg); transition: none !important; } :root.ld-on .ld .lx-steps::after, :root.ld-on .ld .lx-step-n { animation: none !important; } :root.ld-on .ld .lx-in-shot { transition: none; } } /* ---------- движение по требованию: один проход при появлении и ещё раз при наведении */ :root.ld-on .ld .ld-does-it.is-vis, :root.ld-on .ld .ld-does-it.is-vis *, :root.ld-on .ld .lx-steps.is-vis, :root.ld-on .ld .lx-steps.is-vis *, :root.ld-on .ld .lx-steps.is-vis::after { animation-iteration-count: 1 !important; } /* ============================================================================ Пакет 3: сдержанность и точность. ========================================================================== */ /* ---------- первый экран: пять элементов. Надзаголовок вместо значка — как у всех разделов */ :root.ld-on .ld .ld-hero-copy { gap: 20px; } :root.ld-on .ld .lx-hero-k { margin-bottom: 4px; } /* ---------- одна сетка: текст одной ширины, две колонки в одной пропорции 5 : 7 */ :root.ld-on .ld .ld-p, :root.ld-on .ld .lx-in-copy .ld-p, :root.ld-on .ld .ld-wide { max-width: 56ch; } :root.ld-on .ld .ld-h { max-width: 15ch; } :root.ld-on .ld .lx-in-copy, :root.ld-on .ld .lx-price-copy, :root.ld-on .ld .lx-foot-copy, :root.ld-on .ld .lx-day-head, :root.ld-on .ld .lx-day-intro { gap: 24px; } @media (min-width: 961px) { :root.ld-on .ld .lx-price-in, :root.ld-on .ld .lx-in-body, :root.ld-on .ld .lx-day-foot, :root.ld-on .ld .lx-names { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: clamp(40px, 6vw, 96px); } :root.ld-on .ld .ld-leaf#ld-faq .ld-in { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: clamp(40px, 6vw, 96px); } } /* ---------- окно семьи поворачивается за мышью, по стеклу идёт блик */ :root.ld-on .ld .lx-fam .lx-window { transform: rotateY(calc(-7deg + var(--ry, 0deg))) rotateX(calc(3deg + var(--rx, 0deg))); will-change: transform; } :root.ld-on .ld .lx-fam .lx-window::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: radial-gradient(60% 50% at var(--gx, 50%) var(--gy, 40%), rgba(255, 255, 255, .09), transparent 70%); opacity: 0; transition: opacity .4s ease; } :root.ld-on .ld .lx-fam .lx-window.is-tilt::after { opacity: 1; } /* ---------- переход в пример: из кнопки раскрывается экран сервиса */ .lx-morph { position: fixed; z-index: 100; left: var(--x); top: var(--y); width: var(--w); height: var(--h); border-radius: 16px; background: #131211; display: grid; place-items: center; overflow: hidden; box-shadow: 0 0 0 1px rgba(255, 255, 255, .08), 0 40px 120px rgba(0, 0, 0, .6); transition: left .56s cubic-bezier(.7, 0, .2, 1), top .56s cubic-bezier(.7, 0, .2, 1), width .56s cubic-bezier(.7, 0, .2, 1), height .56s cubic-bezier(.7, 0, .2, 1), border-radius .56s cubic-bezier(.7, 0, .2, 1), opacity .45s ease; } .lx-morph img { width: 56px; height: 56px; border-radius: 14px; opacity: 0; transform: scale(.7); transition: opacity .3s ease .2s, transform .45s cubic-bezier(.3, 1.4, .5, 1) .2s; } .lx-morph.is-open { left: 0; top: 0; width: 100vw; height: 100vh; border-radius: 0; } .lx-morph.is-open img { opacity: 1; transform: none; } .lx-morph.is-done { opacity: 0; pointer-events: none; } /* ---------- луна: не серп-значок, а холодный свет у верхнего края, как солнце днём */ .lx-sky .s-moon { width: 460px; height: 460px; margin: -230px 0 0 -230px; border-radius: 50%; box-shadow: none; transform: none; background: radial-gradient(circle, rgba(226, 234, 255, .55) 0 3.5%, rgba(170, 190, 255, .16) 10%, rgba(120, 140, 230, .07) 32%, transparent 64%); } @media (max-width: 960px) { .lx-sky .s-moon { width: 300px; height: 300px; margin: -150px 0 0 -150px; } :root.ld-on .ld .ld-hero .lx-hero-k { order: 0; } } @media (prefers-reduced-motion: reduce) { :root.ld-on .ld .lx-fam .lx-window::after { display: none; } } /* ---------- аудит: мелочи, найденные при проверке */ /* узкий телефон в первом экране: длинное слово переносится, а не обрезается */ :root.ld-on .ld .lx-note span { overflow-wrap: anywhere; hyphens: auto; } @media (min-width: 961px) and (max-width: 1200px) { :root.ld-on .ld .lx-note { font-size: 10.5px; padding: 7px; } } /* на телефоне всё, что нажимают пальцем, — не меньше 40 px */ @media (max-width: 960px) { :root.ld-on .ld-nav .seg button { min-width: 38px; min-height: 40px; } :root.ld-on .ld .ld-legal a { display: inline-flex; align-items: center; min-height: 40px; } :root.ld-on .ld .ld-legal { gap: 0 22px; } } /* установить приложение — тихой строкой под призывом, не второй кнопкой */ :root.ld-on .ld .ld-install { margin-top: 8px; display: grid; justify-items: center; gap: 8px; } :root.ld-on .ld .ld-install .link-btn { color: var(--lx-ink-2); font-size: 15px; } :root.ld-on .ld .ld-install .link-btn:hover { color: var(--lx-ink); } :root.ld-on .ld .dv-help { max-width: 420px; text-align: left; background: rgba(255, 255, 255, .05); border: 1px solid var(--lx-line); color: var(--lx-ink-2); } :root.ld-on .ld .dv-help b { color: var(--lx-ink); }