/* ============================================================================ МЕРКА · единая система стилей (Apple-стиль, светлая тема) ---------------------------------------------------------------------------- Направление акцента переключается атрибутом data-variant на : a — синий (iOS) b — мятно-зелёный c — индиго-градиент Меняются только акцент/радиусы/фон hero; вся сетка и типографика — общие. ============================================================================ */ :root{ --bg:#ffffff; --bg-alt:#f5f5f7; --bg-tint:#fbfbfd; --ink:#1d1d1f; --ink-2:#6e6e73; --ink-3:#86868b; --line:#e6e6ec; --line-2:#d2d2d7; --accent:#0071e3; --accent-deep:#0057b3; /* для текста/ссылок на белом */ --accent-fill:#0071e3; /* фон primary-кнопки */ --accent-ink:#ffffff; /* текст на акценте */ --accent-soft:#eaf3fd; /* мягкая заливка/чипы */ --accent-ring:rgba(0,113,227,.32); --radius:18px; --radius-sm:12px; --radius-lg:28px; --radius-pill:980px; --maxw:1080px; --gutter:22px; --shadow-sm:0 1px 2px rgba(20,22,25,.05), 0 8px 24px -16px rgba(20,22,25,.22); --shadow-md:0 2px 8px rgba(20,22,25,.05), 0 30px 60px -30px rgba(20,22,25,.35); --font:"Onest","-apple-system",BlinkMacSystemFont,"SF Pro Text","Segoe UI",system-ui,"Helvetica Neue",Arial,sans-serif; --mono:"SF Mono","JetBrains Mono","Cascadia Code",ui-monospace,"Roboto Mono",Consolas,monospace; --ease:cubic-bezier(.22,.61,.36,1); --dur:.6s; } /* ---- варианты акцента --------------------------------------------------- */ [data-variant="a"]{ /* iOS blue */ --accent:#0071e3; --accent-deep:#0057b3; --accent-fill:#0071e3; --accent-soft:#eaf3fd; --accent-ring:rgba(0,113,227,.30); --radius:18px; --radius-lg:26px; } [data-variant="b"]{ /* mint / green */ --accent:#12a179; --accent-deep:#0c7d5d; --accent-fill:#12a179; --accent-soft:#e6f6ef; --accent-ring:rgba(18,161,121,.28); --radius:24px; --radius-lg:32px; } [data-variant="c"]{ /* indigo → violet gradient */ --accent:#5b54d6; --accent-deep:#4a41c6; --accent-fill:#5b54d6; --accent-grad:linear-gradient(120deg,#6a5be0 0%,#b23ccf 100%); --accent-soft:#efeafb; --accent-ring:rgba(91,84,214,.30); --radius:20px; --radius-lg:28px; } [data-variant="c"] .btn-primary{ background:var(--accent-grad); } [data-variant="c"] .brand .tick::after{ background:var(--accent-grad); } [data-variant="c"] .hero-headline .accent{ background:var(--accent-grad); -webkit-background-clip:text; background-clip:text; color:transparent; } /* ---- сброс / база ------------------------------------------------------- */ *{ box-sizing:border-box; } html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; } body{ margin:0; background:var(--bg); color:var(--ink); font-family:var(--font); font-size:17px; line-height:1.55; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; letter-spacing:-.01em; } h1,h2,h3{ margin:0; line-height:1.06; letter-spacing:-.03em; font-weight:700; text-wrap:balance; } p{ margin:0; } a{ color:var(--accent-deep); text-decoration:none; } a:hover{ color:var(--accent); } img{ max-width:100%; display:block; } ::selection{ background:var(--accent-soft); color:var(--ink); } :focus-visible{ outline:2.5px solid var(--accent); outline-offset:3px; border-radius:6px; } .wrap{ max-width:var(--maxw); margin:0 auto; padding-inline:var(--gutter); } .eyebrow{ font-size:13px; font-weight:600; letter-spacing:.02em; color:var(--accent-deep); text-transform:none; } .mono{ font-family:var(--mono); font-variant-numeric:tabular-nums; } /* ---- кнопки ------------------------------------------------------------- */ .btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; font-family:inherit; font-weight:600; font-size:16px; line-height:1; padding:13px 22px; border-radius:var(--radius-pill); border:1.5px solid transparent; cursor:pointer; text-decoration:none; white-space:nowrap; transition:transform .18s var(--ease), background .18s var(--ease), border-color .18s var(--ease), color .18s var(--ease); } .btn-primary{ background:var(--accent-fill); color:var(--accent-ink); } .btn-primary:hover{ color:var(--accent-ink); transform:translateY(-1px); filter:brightness(1.05); } .btn-primary:active{ transform:translateY(0); filter:brightness(.95); } .btn-ghost{ color:var(--ink); border-color:var(--line-2); background:transparent; } .btn-ghost:hover{ color:var(--ink); background:var(--bg-alt); border-color:var(--line-2); } .btn-soft{ background:var(--accent-soft); color:var(--accent-deep); } .btn-soft:hover{ color:var(--accent-deep); transform:translateY(-1px); } .btn-sm{ padding:10px 16px; font-size:15px; } /* ---- шапка -------------------------------------------------------------- */ .bar{ position:sticky; top:0; z-index:50; background:color-mix(in srgb, var(--bg) 78%, transparent); backdrop-filter:saturate(180%) blur(18px); -webkit-backdrop-filter:saturate(180%) blur(18px); } /* линейка с делениями (мм) — тематический мотив приложения */ .ruler{ height:16px; position:relative; overflow:hidden; background:transparent; border-bottom:1px solid color-mix(in srgb, var(--line) 70%, transparent); } /* шкала как у мм-линейки: каждый 8px — малый штрих, каждый 5-й — средний, каждый 10-й — большой (акцент). Самый высокий рисуется сверху, поэтому на общих позициях штрихи не накладываются. */ .ruler::before{ content:""; position:absolute; inset:0; background: repeating-linear-gradient(90deg, color-mix(in srgb, var(--accent) 62%, var(--line-2)) 0 1.5px, transparent 1.5px 80px) bottom/100% 13px no-repeat, repeating-linear-gradient(90deg, var(--line-2) 0 1px, transparent 1px 40px) bottom/100% 9px no-repeat, repeating-linear-gradient(90deg, var(--line-2) 0 1px, transparent 1px 8px) bottom/100% 5px no-repeat; } .bar .wrap{ display:flex; align-items:center; gap:20px; height:60px; } .brand{ display:inline-flex; align-items:center; gap:10px; font-weight:700; font-size:20px; letter-spacing:-.02em; color:var(--ink); } .brand:hover{ color:var(--ink); } .brand .tick{ width:22px; height:22px; position:relative; flex:0 0 auto; } .brand .app-icon{ width:27px; height:27px; border-radius:7px; flex:0 0 auto; display:block; } .brand .tick::before{ content:""; position:absolute; inset:0; border:2.5px solid var(--ink); border-radius:7px; } .brand .tick::after{ content:""; position:absolute; left:50%; top:4px; bottom:4px; width:2.5px; border-radius:2px; background:var(--accent); transform:translateX(-50%); } .bar nav{ display:flex; gap:4px; margin-left:8px; } .bar nav a{ color:var(--ink-2); font-size:15px; font-weight:500; padding:8px 12px; border-radius:var(--radius-sm); } .bar nav a:hover{ color:var(--ink); background:var(--bg-alt); } .bar-right{ display:flex; align-items:center; gap:14px; margin-left:auto; } /* переключатель языка — сегментированный контрол */ .lang{ display:inline-flex; padding:3px; gap:2px; background:var(--bg-alt); border-radius:var(--radius-pill); } .lang button{ appearance:none; border:0; background:transparent; cursor:pointer; font-family:inherit; font-size:12.5px; font-weight:600; letter-spacing:.03em; color:var(--ink-2); padding:6px 11px; border-radius:var(--radius-pill); transition:background .18s var(--ease), color .18s var(--ease); } .lang button:hover{ color:var(--ink); } .lang button[aria-pressed="true"]{ background:var(--bg); color:var(--ink); box-shadow:var(--shadow-sm); } /* ---- секции ------------------------------------------------------------- */ section{ padding:clamp(56px,8vw,104px) 0; } .section-alt{ background:var(--bg-alt); } .sec-head{ max-width:56ch; margin-bottom:clamp(28px,4vw,48px); display:flex; flex-direction:column; gap:14px; } .sec-head h2{ font-size:clamp(28px,4vw,44px); } .sec-head p{ font-size:19px; color:var(--ink-2); max-width:52ch; } /* ---- hero --------------------------------------------------------------- */ .hero{ position:relative; overflow:hidden; padding-top:clamp(48px,6vw,84px); } .hero::before{ content:""; position:absolute; inset:0; z-index:0; pointer-events:none; opacity:.9; } [data-variant="a"] .hero::before{ background:radial-gradient(80% 60% at 78% 0%, #eef4fd 0%, transparent 60%); } [data-variant="b"] .hero::before{ background:radial-gradient(78% 62% at 80% 4%, #e7f6ef 0%, transparent 62%); } [data-variant="c"] .hero::before{ background:radial-gradient(70% 55% at 82% 0%, #efe9fb 0%, transparent 58%), radial-gradient(50% 40% at 12% 18%, #fbe9f6 0%, transparent 60%); } .hero .wrap{ position:relative; z-index:1; } .hero-grid{ display:grid; grid-template-columns:1.02fr .98fr; gap:clamp(32px,5vw,64px); align-items:center; } .hero-copy{ max-width:34ch; } .hero-headline{ font-size:clamp(38px,6.1vw,68px); line-height:1.03; margin:18px 0 0; font-weight:700; } .hero-headline .accent{ color:var(--accent-deep); } .hero .lede{ margin-top:22px; font-size:clamp(18px,2.2vw,21px); color:var(--ink-2); max-width:40ch; } .hero .cta-row{ margin-top:32px; display:flex; gap:12px; flex-wrap:wrap; } /* устройство-плейсхолдер */ .device{ position:relative; width:min(100%,340px); margin-inline:auto; aspect-ratio:9/18.5; background:#0f1115; border-radius:44px; padding:12px; box-shadow:var(--shadow-md); border:1px solid #23262c; } .device::before{ /* динамический островок */ content:""; position:absolute; top:20px; left:50%; transform:translateX(-50%); width:86px; height:22px; background:#000; border-radius:var(--radius-pill); z-index:3; } .device .screen{ position:absolute; inset:12px; border-radius:34px; overflow:hidden; background:var(--accent-soft); background-image:repeating-linear-gradient(135deg, color-mix(in srgb,var(--accent) 12%,transparent) 0 2px, transparent 2px 13px); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; text-align:center; } .device .screen .cap{ font-family:var(--mono); font-size:11px; letter-spacing:.06em; color:var(--accent-deep); } .device .screen .ph{ font-family:var(--mono); font-size:12px; color:var(--ink-3); padding:6px 12px; border:1px dashed var(--line-2); border-radius:var(--radius-pill); background:color-mix(in srgb,var(--bg) 70%, transparent); } .device .screen .chip{ font-family:var(--mono); font-variant-numeric:tabular-nums; font-size:24px; font-weight:600; color:var(--ink); background:color-mix(in srgb,var(--bg) 82%, transparent); padding:10px 18px; border-radius:16px; box-shadow:var(--shadow-sm); } .device .screen .chip span{ display:block; font-size:10px; font-weight:600; letter-spacing:.14em; color:var(--ink-3); } /* ---- селектор аудитории (вкладки) -------------------------------------- */ .who .who-label{ font-size:19px; font-weight:600; color:var(--ink); margin-bottom:18px; } .tabs{ display:inline-flex; padding:5px; gap:4px; background:var(--bg); border:1px solid var(--line); border-radius:var(--radius-pill); box-shadow:var(--shadow-sm); } .section-alt .tabs{ background:var(--bg); } .tab{ appearance:none; border:0; background:transparent; cursor:pointer; font-family:inherit; font-size:15.5px; font-weight:600; color:var(--ink-2); padding:11px 22px; border-radius:var(--radius-pill); white-space:nowrap; transition:background .2s var(--ease), color .2s var(--ease); } .tab:hover{ color:var(--ink); } .tab[aria-selected="true"]{ background:var(--accent-fill); color:var(--accent-ink); } [data-variant="c"] .tab[aria-selected="true"]{ background:var(--accent-grad); } .tabpanel{ display:none; margin-top:34px; } .tabpanel.active{ display:block; } .panel-media{ width:min(100%,460px); margin:0 auto 26px; border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-sm); background:var(--accent-soft); } .panel-media img{ width:100%; height:auto; display:block; } .points{ list-style:none; margin:0; padding:0; display:grid; gap:16px; grid-template-columns:repeat(2,1fr); } .points li{ background:var(--bg); border:1px solid var(--line); border-radius:var(--radius); padding:24px 24px 22px; position:relative; transition:transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease); } .section-alt .points li{ background:var(--bg); } .points li:hover{ transform:translateY(-3px); box-shadow:var(--shadow-md); border-color:var(--line); } .points li b{ display:flex; align-items:center; gap:10px; font-size:17.5px; font-weight:600; letter-spacing:-.01em; margin-bottom:8px; } .points li b::before{ content:""; flex:0 0 auto; width:22px; height:22px; border-radius:50%; background:var(--accent-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230071e3' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/13px no-repeat; } [data-variant="b"] .points li b::before{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2312a179' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E"); } [data-variant="c"] .points li b::before{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235b54d6' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E"); } .points li p{ color:var(--ink-2); font-size:15.5px; line-height:1.5; } .points li p a{ font-weight:500; } .tabpanel .panel-cta{ margin-top:26px; } /* App Store бейдж-плейсхолдер */ .appstore{ display:inline-flex; margin-top:26px; line-height:0; border-radius:12px; } .appstore:hover{ transform:translateY(-1px); } .appstore svg{ display:block; } /* ---- контакты ----------------------------------------------------------- */ .contact-cards{ display:grid; gap:16px; grid-template-columns:1fr 1fr; margin-top:12px; } .contact-cards a.card{ display:block; background:var(--bg); border:1px solid var(--line); border-radius:var(--radius); padding:24px 26px; color:var(--ink); transition:transform .25s var(--ease), box-shadow .25s var(--ease); } .contact-cards a.card:hover{ color:var(--ink); transform:translateY(-3px); box-shadow:var(--shadow-md); } .contact-cards .card b{ font-size:17.5px; font-weight:600; } .contact-cards .card .mail{ display:block; margin:8px 0 6px; font-family:var(--mono); font-size:15px; color:var(--accent-deep); } .contact-cards .card small{ color:var(--ink-3); font-size:13.5px; line-height:1.45; display:block; } /* ---- футер -------------------------------------------------------------- */ footer{ border-top:1px solid var(--line); padding:44px 0 60px; background:var(--bg-alt); } .foot-grid{ display:flex; justify-content:space-between; gap:24px; flex-wrap:wrap; align-items:center; } .foot-grid .brand img{ width:26px; height:26px; border-radius:7px; display:inline-block; } .foot-links{ display:flex; gap:22px; flex-wrap:wrap; } .foot-links a{ color:var(--ink-2); font-size:15px; } .foot-links a:hover{ color:var(--ink); } .fineprint{ color:var(--ink-3); font-size:13.5px; margin-top:22px; max-width:62ch; } /* ---- reveal ------------------------------------------------------------- */ @media (prefers-reduced-motion:no-preference){ .reveal{ opacity:0; transform:translateY(16px); transition:opacity var(--dur) var(--ease), transform var(--dur) var(--ease); } .reveal.in{ opacity:1; transform:none; } .reveal.d1{ transition-delay:.06s; } .reveal.d2{ transition-delay:.12s; } .reveal.d3{ transition-delay:.18s; } } /* ---- адаптив ------------------------------------------------------------ */ @media (max-width:900px){ .hero-grid{ grid-template-columns:1fr; gap:40px; } .hero-copy{ max-width:none; } .device{ width:min(72%,300px); } .points{ grid-template-columns:1fr; } .contact-cards{ grid-template-columns:1fr; } .bar nav{ display:none; } } @media (max-width:560px){ .bar .wrap{ gap:10px; } .lang button{ padding:6px 9px; } .tabs{ display:flex; width:100%; } .tab{ flex:1; padding:11px 8px; } } /* ---- страница-документ (privacy / support) — общий типографический блок -- */ .doc{ max-width:760px; margin:0 auto; padding:clamp(40px,6vw,72px) var(--gutter) 96px; } .doc h1{ font-size:clamp(30px,4.5vw,46px); margin-bottom:14px; } .doc h2{ font-size:clamp(22px,3vw,30px); margin:44px 0 14px; } .doc h3{ font-size:19px; margin:28px 0 10px; } .doc p, .doc li{ color:var(--ink-2); font-size:17px; line-height:1.65; } .doc p{ margin:12px 0; } .doc ul{ padding-left:22px; margin:12px 0; display:grid; gap:8px; } .doc a{ font-weight:500; } .doc .lead{ font-size:19px; color:var(--ink); } .doc .meta{ color:var(--ink-3); font-size:14px; font-family:var(--mono); }