/* ============================================================ Расчётус — landing styles Design tokens ported from the Расчётус (v3) brand system. Dark theme is default; .light on switches to light. ============================================================ */ /* ---- Fonts (self-hosted Geist, variable 400–900) ---- */ @font-face { font-family: 'Geist'; font-style: normal; font-weight: 400 900; font-display: swap; src: url('fonts/geist-cyrillic-ext.woff2') format('woff2'); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; } @font-face { font-family: 'Geist'; font-style: normal; font-weight: 400 900; font-display: swap; src: url('fonts/geist-cyrillic.woff2') format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } @font-face { font-family: 'Geist'; font-style: normal; font-weight: 400 900; font-display: swap; src: url('fonts/geist-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Geist'; font-style: normal; font-weight: 400 900; font-display: swap; src: url('fonts/geist-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* ---- Reset ---- */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } /* ---- Design tokens ---- */ :root { --gr: #0e1110; --gr2: #141817; --gr3: #1b201e; --lime: #a9c811; --lime-h: #bcdd1a; --tint: rgba(169, 200, 17, .10); --tint2: rgba(169, 200, 17, .18); --soft: rgba(233, 237, 230, .04); --on-lime: #0e1110; --lime-tx: #a9c811; --bar: rgba(14, 17, 16, .92); --tx: #e9ede6; --tx2: #b6c0b7; --mut: #7f8c82; --hair: rgba(233, 237, 230, .10); --hair2: rgba(233, 237, 230, .20); --neg: #ff7a6b; --warn: #f7c937; --cool: #7ec8f7; --maxw: 1120px; } :root.light { --gr: #ffffff; --gr2: #f7f9f2; --gr3: #eff3e4; --on-lime: #14181a; --lime-tx: #5f7a08; --tint: rgba(169, 200, 17, .16); --tint2: rgba(169, 200, 17, .30); --soft: rgba(20, 24, 26, .05); --bar: rgba(255, 255, 255, .92); --tx: #14181a; --tx2: #414b46; --mut: #5c655e; --hair: rgba(20, 24, 26, .09); --hair2: rgba(20, 24, 26, .16); --neg: #c2483a; --warn: #a37d05; --cool: #1f6f9e; } /* ---- Base ---- */ html { scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { background: var(--gr); color: var(--tx); font-family: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; line-height: 1.45; min-height: 100vh; -webkit-font-smoothing: antialiased; font-feature-settings: "tnum" 1; font-variant-numeric: tabular-nums; } a { color: var(--tx); text-decoration: none; transition: color .15s ease; } a:hover { color: var(--lime-tx); } :focus-visible { outline: 2px solid var(--lime); outline-offset: 2px; border-radius: 4px; } /* ============================================================ DAY STRIP (header) ============================================================ */ .day-strip { position: sticky; top: 0; z-index: 40; background: var(--bar); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid var(--hair2); } .day-strip__inner { display: flex; align-items: center; gap: clamp(12px, 2vw, 26px); padding: 11px clamp(16px, 4vw, 52px); max-width: var(--maxw); margin-inline: auto; } /* ---- Brand logo (official assets, tightly cropped) ---- */ .logo { display: flex; align-items: center; gap: 8px; flex-shrink: 0; } .logo:hover { color: var(--tx); } .logo__badge { width: 32px; height: 32px; display: block; } .logo__word { height: 23px; width: auto; display: block; color: var(--tx); } .logo__word--sm { height: 20px; } .progress { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; } .progress__labels { display: flex; justify-content: space-between; font-size: 8.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--mut); } .progress__labels span { transition: color .3s ease; } .progress__labels span.on { color: var(--lime-tx); } .progress__track { height: 3px; background: var(--hair); border-radius: 99px; position: relative; } .progress__fill { position: absolute; left: 0; top: 0; bottom: 0; background: var(--lime); border-radius: 99px; width: 0; transition: width .3s ease; } .progress__dot { position: absolute; top: -3px; left: 0; width: 9px; height: 9px; border-radius: 50%; background: var(--lime); transform: translateX(-50%); box-shadow: 0 0 0 3px var(--tint2); transition: left .3s ease; } .theme-toggle { flex-shrink: 0; background: none; border: 1px solid var(--hair2); border-radius: 8px; color: var(--mut); cursor: pointer; width: 32px; height: 32px; font-size: 14px; line-height: 1; padding: 0; font-family: inherit; display: flex; align-items: center; justify-content: center; transition: border-color .15s ease, color .15s ease; } .theme-toggle:hover { border-color: var(--lime-tx); color: var(--lime-tx); } /* ---- Buttons ---- */ .btn { display: inline-block; font-weight: 700; border-radius: 8px; transition: background .15s ease, color .15s ease; cursor: pointer; } .btn--sm { font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; padding: 10px 15px; } .btn--lime { background: var(--lime); color: var(--on-lime); } .btn--lime:hover { background: var(--lime-h); color: var(--on-lime); } .btn--lg { font-size: 15px; padding: 13px 24px; border-radius: 10px; } .btn--dark { background: var(--gr); color: var(--lime-tx); font-size: 16px; padding: 15px 28px; border-radius: 10px; } .btn--dark:hover { background: #000; color: var(--lime-tx); } :root.light .btn--dark:hover { background: #14181a; } /* ============================================================ OPENING (hero) ============================================================ */ .hero { border-bottom: 1px solid var(--hair2); padding: clamp(38px, 6vw, 96px) clamp(16px, 4vw, 52px); } .hero__inner { max-width: var(--maxw); margin-inline: auto; } .eyebrow { font-size: 10.5px; letter-spacing: .24em; text-transform: uppercase; color: var(--mut); margin-bottom: 18px; } .eyebrow .ozonus { color: var(--cool); } .hero__title { font-weight: 900; font-size: clamp(30px, 5.8vw, 78px); letter-spacing: -0.05em; line-height: 0.96; max-width: 19ch; } .hero__sub { font-weight: 800; font-size: clamp(17px, 2.3vw, 28px); letter-spacing: -0.03em; line-height: 1.12; color: var(--tx2); margin-top: clamp(14px, 1.6vw, 22px); white-space: nowrap; } .hero__sub .hl { color: var(--lime-tx); } .hero__body { display: flex; flex-direction: column; align-items: flex-start; margin-top: clamp(24px, 3vw, 40px); } .hero__cta { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; } /* ============================================================ HOURS (moment sections) ============================================================ */ .moment { border-bottom: 1px solid var(--hair); } .moment--alt { background: var(--gr2); } .moment__grid { display: grid; grid-template-columns: clamp(74px, 8vw, 124px) minmax(0, 1fr); align-items: stretch; max-width: var(--maxw); margin-inline: auto; } .clock { border-right: 1px solid var(--hair); padding: clamp(24px, 3vw, 50px) 8px clamp(24px, 3vw, 50px) clamp(14px, 2vw, 22px); min-width: 0; } .clock__time { display: inline-flex; align-items: center; gap: 6px; font-weight: 800; font-size: clamp(15px, 1.7vw, 22px); letter-spacing: -0.04em; color: var(--lime-tx); line-height: 1; } .clock__ic { width: 0.9em; height: 0.9em; flex-shrink: 0; opacity: .85; } .dialog { padding: clamp(24px, 3vw, 50px) clamp(16px, 4vw, 52px) clamp(24px, 3vw, 50px) clamp(16px, 2.6vw, 38px); min-width: 0; display: flex; flex-direction: column; gap: clamp(14px, 1.8vw, 22px); } /* chat rows */ .msg { display: flex; gap: 10px; align-items: flex-end; } .msg--service { justify-content: flex-end; text-align: right; } .avatar { width: 26px; height: 26px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-weight: 700; line-height: 1; } .avatar--seller { border-radius: 50%; background: var(--gr3); color: var(--mut); font-size: 9px; letter-spacing: .04em; } /* service avatar is the official ё-badge */ img.avatar--service { display: block; } .bubble__kicker { font-size: 8.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--mut); } .bubble--seller { display: inline-block; background: var(--gr3); border-radius: 14px 14px 14px 4px; padding: 13px 18px; } .bubble--seller .bubble__kicker { margin-bottom: 6px; } .bubble--seller .question { display: block; font-weight: 700; font-size: clamp(16px, 1.9vw, 26px); letter-spacing: -0.035em; line-height: 1.12; color: var(--tx); white-space: nowrap; } .bubble--service { display: inline-block; text-align: left; background: var(--tint); border-radius: 14px 14px 4px 14px; padding: 16px 18px; max-width: 52ch; min-width: min(100%, 320px); } .bubble--service .bubble__kicker { margin-bottom: 7px; text-align: right; color: var(--lime-tx); } .bubble--service .answer-title { font-weight: 700; font-size: clamp(18px, 2.3vw, 30px); letter-spacing: -0.04em; line-height: 1.08; margin-bottom: 9px; color: var(--lime-tx); max-width: 22ch; } .bubble--service .answer-desc { font-size: 14.5px; color: var(--tx2); margin-bottom: 14px; } /* ---- Panel shell ---- */ .panel { background: var(--gr2); border-radius: 11px; padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; } .panel__label { font-size: 9px; letter-spacing: .2em; text-transform: uppercase; color: var(--mut); } /* ---- Panel: pulse (donut + notes) ---- */ .pulse { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; } .pulse__ring { width: 88px; height: 88px; flex-shrink: 0; } .pulse__notes { display: flex; flex-direction: column; gap: 5px; font-size: 11px; min-width: 0; } .c-neg { color: var(--neg); } .c-warn { color: var(--warn); } .c-lime { color: var(--lime-tx); } .c-mut { color: var(--mut); } .c-cool { color: var(--cool); } /* ---- Panel: bars (unit economics) ---- */ .bars { display: flex; flex-direction: column; gap: 8px; } .bar { display: flex; flex-direction: column; gap: 4px; } .bar__head { display: flex; justify-content: space-between; gap: 10px; font-size: 11px; } .bar__label { color: var(--tx2); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .bar__val { font-weight: 700; white-space: nowrap; } .bar__track { height: 4px; background: var(--hair); border-radius: 99px; overflow: hidden; } .bar__fill { height: 100%; } .bars__total { border-top: 1px solid var(--hair2); padding-top: 8px; display: flex; justify-content: space-between; gap: 10px; font-size: 12.5px; font-weight: 700; } .bars__total span { white-space: nowrap; } /* ---- Panel: promo (chips + lines) ---- */ .chips { display: flex; gap: 6px; flex-wrap: wrap; } .chip { font-size: 9.5px; letter-spacing: .08em; text-transform: uppercase; padding: 5px 10px; border-radius: 99px; border: 1px solid currentColor; display: inline-flex; align-items: baseline; gap: 6px; white-space: nowrap; flex-shrink: 0; } .chip b { font-weight: 700; } .lines { display: block; } .line { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 10px; align-items: baseline; border-top: 1px solid var(--hair); padding: 6px 0; } .line__name { font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .line__mid { font-size: 11px; color: var(--mut); } .line__val { font-size: 11.5px; font-weight: 700; white-space: nowrap; } /* ---- Panel: clusters (day-of-stock grid) ---- */ .clusters { display: grid; grid-template-columns: repeat(auto-fill, minmax(50px, 1fr)); gap: 4px; } .cluster { padding: 7px 4px; border-radius: 6px; text-align: center; font-size: 10px; font-weight: 700; } .cluster--crit { background: rgba(255, 122, 107, .16); color: var(--neg); } .cluster--warn { background: rgba(247, 201, 55, .14); color: var(--warn); } .cluster--ok { background: var(--tint); color: var(--lime-tx); } .cluster--cool { background: rgba(126, 200, 247, .12); color: var(--cool); } /* ---- Panel: geo (region bars) ---- */ .geo { display: flex; flex-direction: column; gap: 8px; } .geo__row { display: grid; grid-template-columns: minmax(0, 1fr) 36px; gap: 10px; align-items: center; } .geo__meta { display: flex; flex-direction: column; gap: 4px; min-width: 0; } .geo__name { font-size: 11px; color: var(--tx2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .geo__track { height: 3px; background: var(--hair); border-radius: 99px; } .geo__fill { height: 100%; border-radius: 99px; } .geo__pct { font-size: 11.5px; font-weight: 700; text-align: right; } /* ---- Panel: day (summary + area chart) ---- */ .day { display: flex; flex-direction: column; gap: 8px; } .day__row { display: flex; justify-content: space-between; font-size: 11px; } .day__row .k { color: var(--tx2); } .day__row .v { font-weight: 700; } .day__chart { width: 100%; height: 62px; display: block; margin-top: 4px; } /* ============================================================ CLOSING (motto) ============================================================ */ .closing { background: var(--lime); color: var(--on-lime); padding: clamp(50px, 8vw, 120px) clamp(16px, 4vw, 52px); } .closing__inner { max-width: var(--maxw); margin-inline: auto; } .closing__eyebrow { font-size: clamp(20px, 2.6vw, 32px); font-weight: 800; letter-spacing: -0.02em; opacity: .95; margin-bottom: clamp(14px, 1.8vw, 22px); } .closing__motto { font-weight: 900; font-size: clamp(34px, 7.4vw, 104px); letter-spacing: -0.055em; line-height: 0.94; } .closing__cta { margin-top: clamp(24px, 3vw, 44px); display: flex; align-items: center; gap: 16px; flex-wrap: wrap; } .closing__note { font-size: 13px; opacity: .7; } /* ============================================================ FOOTER ============================================================ */ .footer { border-top: 1px solid var(--hair2); padding: clamp(32px, 4vw, 56px) clamp(16px, 4vw, 52px) clamp(20px, 2.5vw, 32px); color: var(--mut); } .footer__inner { max-width: var(--maxw); margin-inline: auto; display: grid; gap: clamp(24px, 3vw, 48px); grid-template-columns: 1.2fr 1fr 1.6fr; align-items: start; } .footer__brand { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; } .footer__tag { color: var(--tx2); font-size: 13px; max-width: 30ch; } .footer__motto { letter-spacing: .16em; text-transform: uppercase; font-size: 10px; color: var(--mut); } .footer__nav { display: flex; flex-direction: column; gap: 9px; } .footer__nav a { color: var(--tx2); font-size: 13px; } .footer__nav a:hover { color: var(--lime-tx); } .footer__req { display: flex; flex-direction: column; gap: 5px; line-height: 1.5; } .footer__req-title { font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var(--mut); margin-bottom: 4px; } .footer__req p { font-size: 12px; color: var(--tx2); } .footer__bottom { max-width: var(--maxw); margin: clamp(24px, 3vw, 40px) auto 0; padding-top: 16px; border-top: 1px solid var(--hair); display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: space-between; font-size: 11px; color: var(--mut); letter-spacing: .02em; } /* ============================================================ CHAT ANIMATION Enabled only when html.anim is set (no prefers-reduced-motion). JS stages each dialog on scroll: question in → typing dots → Расчётус "prints" the answer. ============================================================ */ html.anim .dialog .msg { opacity: 0; } html.anim .msg.in { animation: msgIn .45s cubic-bezier(.2, .7, .2, 1) forwards; } @keyframes msgIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } } /* typing indicator (assistant is composing the answer) */ .typing { display: flex; justify-content: flex-end; opacity: 0; } .typing.in { animation: msgIn .3s ease forwards; } .typing__bubble { background: var(--tint); border-radius: 14px 14px 4px 14px; padding: 13px 17px; display: inline-flex; gap: 6px; align-items: center; } .typing__bubble span { width: 6px; height: 6px; border-radius: 50%; background: var(--lime-tx); animation: typeBlink 1.2s infinite ease-in-out; } .typing__bubble span:nth-child(2) { animation-delay: .18s; } .typing__bubble span:nth-child(3) { animation-delay: .36s; } @keyframes typeBlink { 0%, 60%, 100% { opacity: .25; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } } /* typewriter caret while text is being printed */ .tw::after { content: '▍'; color: var(--lime-tx); margin-left: 1px; font-weight: 400; animation: caretBlink 1s step-end infinite; } @keyframes caretBlink { 50% { opacity: 0; } } /* answer body prints after the title: hold desc + panel, then reveal */ html.anim .msg--service .answer-desc, html.anim .msg--service .panel { opacity: 0; } html.anim .msg--service .answer-desc.show, html.anim .msg--service .panel.show { animation: msgIn .4s cubic-bezier(.2, .7, .2, 1) forwards; } /* ============================================================ OFFERS (cards) ============================================================ */ .offers { border-top: 1px solid var(--hair2); border-bottom: 1px solid var(--hair2); } .offers__grid { max-width: var(--maxw); margin-inline: auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(14px, 2vw, 24px); padding: clamp(28px, 4vw, 56px) clamp(16px, 4vw, 52px); } .offer { border: 1px solid var(--hair2); border-radius: 14px; background: var(--gr2); padding: 22px 22px 24px; display: flex; flex-direction: column; gap: 8px; } .offer__ic { width: 24px; height: 24px; color: var(--lime-tx); margin-bottom: 2px; } .offer__title { font-weight: 700; font-size: 18px; letter-spacing: -0.02em; color: var(--tx); } .offer__desc { font-size: 13.5px; color: var(--tx2); } /* ============================================================ RESPONSIVE ============================================================ */ @media (max-width: 760px) { .footer__inner { grid-template-columns: 1fr; } } @media (max-width: 700px) { .offers__grid { grid-template-columns: 1fr; } } @media (max-width: 560px) { .hero__sub { white-space: normal; } .bubble--seller .question { white-space: normal; } /* Numeric hour labels get cramped in the narrow header — keep just the bar. */ .progress__labels { display: none; } .progress { gap: 0; } .msg--service { flex-direction: row-reverse; } .logo__word { height: 22px; } .logo__badge { width: 30px; height: 30px; } }