/* ============================================================ design/aa1-site.html — локальный слой главного лендинга. Сгенерирован из эталона: селекторы обёрнуты в .page-site, токены :root перенесены на body.is-site-page, raw rgba переведены в точный OKLCH (oklch(from rgb(15 20 40) l c h) = oklch(19.79% 0.041 271.63)). Правила появления html.js [data-reveal] не переносились: класс .js на в SPA не ставится, а без него содержимое видно всегда. ============================================================ */ /* --- токены эталона --- */ body.is-site-page { --radius: 16px; --ink: var(--purple); --ink-2: var(--purple-2); --warn: oklch(50% 0.13 75); --surface: oklch(100% 0 0); --danger: oklch(46% 0.17 25); --purple: oklch(27% 0.10 300); --success: oklch(46% 0.13 155); --muted: oklch(48% 0.02 300); --accent: oklch(78% 0.21 150); --fg: oklch(20% 0.02 300); --bg: oklch(98% 0.004 250); --border: oklch(90% 0.006 280); --purple-2: oklch(34% 0.12 300); --warn-soft: oklch(96% 0.07 85); --muted-ink: oklch(42% 0.02 300); --accent-ink: oklch(42% 0.14 150); --danger-soft: oklch(96% 0.04 25); --accent-warm: oklch(80% 0.19 75); --accent-soft: oklch(95% 0.07 150); --purple-soft: oklch(94% 0.03 300); --accent-deep: oklch(70% 0.22 150); --success-soft: oklch(95% 0.05 155); --accent-warm-soft: oklch(96% 0.08 85); --font-mono: ui-monospace,'SF Mono',Menlo,Consolas,monospace; --shadow-1: 0 1px 2px oklch(19.79% 0.041 271.63 / .05), 0 14px 34px -16px oklch(19.79% 0.041 271.63 / .16); --shadow-2: 0 1px 2px oklch(19.79% 0.041 271.63 / .06), 0 24px 60px -24px oklch(19.79% 0.041 271.63 / .22); --font-body: -apple-system,BlinkMacSystemFont,'SF Pro Text',system-ui,sans-serif; --font-display: 'Söhne','Avenir Next',-apple-system,BlinkMacSystemFont,system-ui,sans-serif; } body.is-site-page { font-family:var(--font-body);font-size:17px;line-height:1.62;color:var(--fg);background:var(--bg);-webkit-font-smoothing:antialiased } .page-site :focus-visible { outline:2px solid var(--accent-deep);outline-offset:3px;border-radius:6px } .page-site .container { max-width:1160px;margin:0 auto;padding:0 24px } .page-site .hl { background:linear-gradient(var(--accent-warm),var(--accent-warm)) 0 100%/100% .52em no-repeat;color:var(--purple);padding:0 .08em .02em;box-decoration-break:clone;-webkit-box-decoration-break:clone;font-weight:inherit;font-style:inherit } .page-site .hl.green { background:linear-gradient(var(--accent),var(--accent)) 0 100%/100% .52em no-repeat;color:var(--purple) } .page-site h1 { font-size:clamp(2.2rem,5vw,3.6rem);font-weight:700;letter-spacing:-.03em;line-height:1.12 } .page-site h2 { font-size:clamp(1.95rem,3.6vw,2.8rem) } .page-site h3 { font-size:1.22rem;font-weight:680;letter-spacing:-.015em } .page-site .lead { font-size:clamp(1.06rem,1.6vw,1.22rem);color:var(--muted);max-width:56ch } .page-site .btn { display:inline-flex;align-items:center;justify-content:center;gap:.55rem;font-family:var(--font-body);font-weight:600;font-size:15px;line-height:1;letter-spacing:-.01em;min-height:48px;padding:0 1.45rem;border-radius:999px;border:1px solid transparent;cursor:pointer;text-decoration:none;transition:background .18s ease,border-color .18s ease,transform .18s ease,color .18s ease;white-space:nowrap } .page-site .btn-ghost:hover { background:oklch(97.2% 0.005 240);border-color:oklch(83% 0.008 240);transform:translateY(-1px) } .page-site .btn[disabled] { opacity:.5;cursor:not-allowed;transform:none } .page-site .badge { display:inline-flex;align-items:center;gap:.45rem;font-size:.78rem;font-weight:600;padding:.28rem .7rem;border-radius:999px;white-space:nowrap } .page-site .badge-neutral { background:oklch(96% 0.004 240);color:var(--muted) } .page-site /* ---------- topnav ---------- */ .topnav { position:sticky;top:0;z-index:50;background:color-mix(in oklab,var(--bg) 86%,transparent);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--border) } .page-site /* ---------- hero ---------- */ .hero { padding:72px 0 88px;overflow:hidden } .page-site .hero-grid { display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:56px;align-items:center } .page-site .hero-copy h1 { margin-bottom:22px } .page-site .hero-copy .lead { margin-bottom:30px } .page-site .hero-actions { display:flex;flex-wrap:wrap;gap:12px;margin-bottom:26px } .page-site .hero-note { font-size:.86rem;color:var(--muted) } .page-site .hero-note code { font-family:var(--font-mono);background:var(--surface);border:1px solid var(--border);padding:2px 6px;border-radius:6px;font-size:.8rem } .page-site /* ---------- phone mockup (public page) ---------- */ .mock-wrap { position:relative;justify-self:center } .page-site .mock-wrap::before { content:"";position:absolute;inset:-12% -6% -6%;background:radial-gradient(58% 52% at 50% 42%,var(--accent-soft),transparent 70%);border-radius:48%;pointer-events:none } .page-site .phone { position:relative;width:322px;border-radius:44px;background:var(--purple);padding:11px;box-shadow:var(--shadow-2) } .page-site .phone-notch { position:absolute;top:11px;left:50%;transform:translateX(-50%);width:104px;height:26px;background:var(--purple);border-radius:0 0 16px 16px;z-index:3 } .page-site .phone-screen { background:var(--bg);border-radius:34px;overflow:hidden;display:flex;flex-direction:column;height:640px } .page-site .phone-bar { display:flex;align-items:center;justify-content:center;gap:6px;background:var(--surface);border-bottom:1px solid var(--border);padding:30px 14px 10px;font-family:var(--font-mono);font-size:.68rem;color:var(--muted) } .page-site .phone-bar .lck { color:var(--success) } .page-site .phone-demo { position:relative;flex:1;min-height:0;background:var(--bg);overflow:hidden } .page-site .demo-slide { position:absolute;inset:0;visibility:hidden;z-index:1 } .page-site .demo-slide.is-active { z-index:3;visibility:visible } .page-site .demo-slide.is-entering { z-index:3;visibility:visible } .page-site .demo-slide.is-exiting { z-index:2;visibility:visible } .page-site .demo-slide .phone-bg { position:absolute;inset:0;background:var(--c-photo) 50% 18%/cover no-repeat;opacity:0;transition:opacity .7s ease } .page-site .demo-slide .phone-bg::before { content:"";position:absolute;inset:0;background:linear-gradient(180deg,oklch(13% 0.02 300/.42) 0%,oklch(11% 0.02 300/.38) 30%,oklch(10% 0.02 300/.52) 56%,oklch(8% 0.03 300/.84) 88%,oklch(7% 0.03 300/.94) 100%) } .page-site .demo-slide.is-active .phone-bg { opacity:1 } .page-site .demo-slide.is-exiting .phone-bg { opacity:0 } .page-site .phone-page { position:relative;height:100%;overflow:hidden;display:flex;flex-direction:column;color:var(--c-fg);--c-fg:oklch(96% 0.02 80);--c-txt:oklch(100% 0 0);--c-mut:oklch(98% 0 0/.9);--c-line:oklch(100% 0 0/.22);--c-card:oklch(100% 0 0/.13);--c-chip:oklch(100% 0 0/.16);--c-accent:var(--c-gold) } .page-site .phone-page>* { position:relative;z-index:1 } .page-site .demo-slide.is-exiting .cafe-body>*:not(.cafe-reviews) { animation:demoExit .36s cubic-bezier(.2,.7,.25,1) both } .page-site .demo-slide.is-exiting .cafe-reviews>:not(.cafe-rvs) { animation:demoExit .36s cubic-bezier(.2,.7,.25,1) both } .page-site .demo-slide.is-exiting .cafe-rvs .cafe-rv { animation:demoExit .36s cubic-bezier(.2,.7,.25,1) both } .page-site .demo-slide.is-exiting .cafe-foot { animation:demoExit .36s cubic-bezier(.2,.7,.25,1) both } .page-site .demo-slide.is-exiting .cafe-foot { animation:demoExit .36s cubic-bezier(.2,.7,.25,1) both } .page-site .demo-slide.is-entering .cafe-body>*:not(.cafe-reviews) { animation:demoEnter .38s cubic-bezier(.2,.7,.25,1) both } .page-site .demo-slide.is-entering .cafe-reviews>:not(.cafe-rvs) { animation:demoEnter .38s cubic-bezier(.2,.7,.25,1) both } .page-site .demo-slide.is-entering .cafe-rvs .cafe-rv { animation:demoEnter .38s cubic-bezier(.2,.7,.25,1) both } .page-site .demo-slide.is-entering .cafe-foot { animation:demoEnter .38s cubic-bezier(.2,.7,.25,1) both } .page-site .demo-slide.is-entering .cafe-foot { animation:demoEnter .38s cubic-bezier(.2,.7,.25,1) both } .page-site @keyframes demoExit { from{opacity:1;transform:translateX(0)}to{opacity:0;transform:translateX(-44px)} } .page-site @keyframes demoEnter { from{opacity:0;transform:translateX(42px)}to{opacity:1;transform:translateX(0)} } .page-site .phone-page .phone-bar { display:flex;align-items:center;justify-content:center;gap:6px;background:oklch(8% 0.02 300/.34);border-bottom:1px solid var(--c-line);padding:14px 2px 8px;font-family:var(--font-mono);font-size:.62rem;color:var(--c-mut);backdrop-filter:blur(8px) } .page-site .phone-page .phone-bar .lck { color:var(--c-gold) } .page-site .phone-page .cafe-body { flex:1;overflow:auto;padding:26px 20px 18px;scrollbar-width:none;color:var(--c-fg) } .page-site .phone-page .cafe-body::-webkit-scrollbar { display:none } .page-site .phone-page .cafe-head { display:flex;flex-direction:column;align-items:center;text-align:center;margin:0 0 18px;position:relative;padding:18px 12px 14px;background:linear-gradient(180deg,oklch(9% 0.02 300/.2),oklch(9% 0.02 300/.42));border-radius:18px } .page-site .phone-page .cafe-head::before { content:"";position:absolute;inset:-8px -6px -10px;background:radial-gradient(58% 56% at 50% 0%,oklch(9% 0.03 300/.5),transparent 72%);z-index:-1;border-radius:24px } .page-site .phone-page .cafe-mono { width:72px;height:72px;border-radius:50%;display:grid;place-items:center;font-family:var(--c-serif);font-weight:700;font-size:1.8rem;color:oklch(30% 0.05 60);background:linear-gradient(140deg,oklch(88% 0.11 82),oklch(70% 0.13 72));box-shadow:0 0 0 4px oklch(100% 0 0/.22),0 18px 32px -18px oklch(0% 0 0/.8);margin-bottom:12px } .page-site .phone-page .cafe-mono img { width:100%;height:100%;border-radius:50%;object-fit:cover;box-shadow:none } .page-site .phone-page .cafe-mono.cafe-av img { width:100%;height:100%;border-radius:50%;object-fit:cover;box-shadow:none } .page-site .phone-page .cafe-tag { font-family:var(--font-mono);font-size:.52rem;letter-spacing:.24em;text-transform:uppercase;color:var(--c-accent);font-weight:600;margin-bottom:9px;display:flex;align-items:center;gap:7px } .page-site .phone-page .cafe-tag::before { content:"";width:6px;height:6px;border-radius:50%;background:var(--c-accent);box-shadow:0 0 0 3px oklch(0% 0 0/.35) } .page-site .phone-page .cafe-name { font-family:var(--c-serif);font-size:1.4rem;font-weight:600;letter-spacing:-.01em;line-height:1.1;color:var(--c-txt);text-shadow:0 1px 2px oklch(0% 0 0/.4),0 6px 18px oklch(0% 0 0/.5) } .page-site .phone-page .cafe-bio { font-size:.72rem;color:var(--c-txt);max-width:30ch;margin-top:6px;text-shadow:0 1px 2px oklch(0% 0 0/.45) } .page-site .phone-page .cafe-cta { display:flex;align-items:center;justify-content:center;min-height:48px;border-radius:16px;background:linear-gradient(135deg,var(--c-gold),var(--c-gold-2));color:oklch(24% 0.05 60);font-weight:680;font-size:.92rem;box-shadow:0 14px 28px -14px oklch(0% 0 0/.65) } .page-site .phone-page .cafe-block { margin-top:14px } .page-site .phone-page .cafe-block-title { font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.24em;font-size:.54rem;color:var(--c-txt);text-align:center;margin-bottom:8px } .page-site .phone-page .cafe-links { display:flex;flex-direction:column;gap:8px } .page-site .phone-page .cafe-link { display:flex;align-items:center;gap:11px;min-height:46px;padding:0 14px;background:var(--c-card);border:1px solid var(--c-line);border-radius:15px;color:var(--c-txt);font-size:.8rem;font-weight:600 } .page-site .phone-page .cafe-chip { width:28px;height:28px;border-radius:50%;background:var(--c-chip);color:var(--c-fg);display:grid;place-items:center;flex:none } .page-site .phone-page .cafe-chip :is(.fa, .fa-solid, .fa-regular, .fa-brands) { font-size:15px; } .page-site .phone-page .cafe-chip img { width:100%;height:100%;border-radius:50%;object-fit:cover } .page-site .phone-page .cafe-link .cv { color:var(--c-mut);width:12px;height:12px;margin-left:auto } .page-site .phone-page .cafe-rv-meta { display:flex;align-items:center;justify-content:center;gap:8px;margin-bottom:9px;font-family:var(--font-mono);font-size:.58rem;letter-spacing:.04em;color:var(--c-mut) } .page-site .phone-page .cafe-rv-meta .stars { display:flex;gap:1px;color:var(--c-gold) } .page-site .phone-page .cafe-rv-meta .stars :is(.fa, .fa-solid, .fa-regular, .fa-brands) { font-size:11px; } .page-site .phone-page .cafe-rvs { display:flex;flex-direction:column;gap:8px } .page-site .phone-page .cafe-rv { background:var(--c-card);border:1px solid var(--c-line);border-radius:14px;padding:8px 12px;backdrop-filter:blur(14px) saturate(1.25);-webkit-backdrop-filter:blur(14px) saturate(1.25) } .page-site .phone-page .cafe-rv .top { display:flex;align-items:center;gap:7px;margin-bottom:3px } .page-site .phone-page .cafe-rv .ini { flex:none;width:22px;height:22px;border-radius:50%;background:oklch(100% 0 0/.16);color:var(--c-gold);display:grid;place-items:center;font-size:.62rem;font-weight:700;text-transform:uppercase } .page-site .phone-page .cafe-rv b { font-size:.74rem;color:var(--c-txt);font-weight:640 } .page-site .phone-page .cafe-rv .rs { display:flex;gap:1px;color:var(--c-gold);margin-left:auto } .page-site .phone-page .cafe-rv .rs :is(.fa, .fa-solid, .fa-regular, .fa-brands) { font-size:10px; } .page-site .phone-page .cafe-rv p { font-size:.68rem;line-height:1.35;color:var(--c-fg) } .page-site .phone-page .cafe-map { position:relative;border-radius:15px;overflow:hidden;border:1px solid var(--c-line);margin-top:8px } .page-site .phone-page .cafe-map svg { width:100%;height:auto;display:block } .page-site .phone-page .cafe-map svg .m-base { fill:oklch(22% 0.02 300/.96) } .page-site .phone-page .cafe-map svg .m-strw { fill:oklch(33% 0.02 300) } .page-site .phone-page .cafe-map svg .m-str { fill:oklch(37% 0.02 300) } .page-site .phone-page .cafe-map svg .m-box { fill:oklch(27% 0.02 300) } .page-site .phone-page .cafe-map svg .m-p1 { fill:oklch(30% 0.02 70) } .page-site .phone-page .cafe-map svg .m-p2 { fill:oklch(32% 0.02 150) } .page-site .phone-page .cafe-map svg .m-p3 { fill:oklch(31% 0.02 300) } .page-site .phone-page .cafe-map svg .m-park { fill:oklch(31% 0.04 145) } .page-site .phone-page .cafe-map svg .m-pin { fill:var(--c-gold) } .page-site .phone-page .cafe-map svg .m-pinrow { fill:none;stroke:var(--c-gold);stroke-opacity:.4 } .page-site .phone-page .cafe-mcard { position:absolute;left:8px;right:8px;bottom:8px;display:flex;align-items:center;gap:9px;background:oklch(10% 0.02 300/.62);border:1px solid var(--c-line);border-radius:13px;padding:8px 10px } .page-site .phone-page .cafe-mcard .mchip { flex:none;width:28px;height:28px;border-radius:50%;background:oklch(100% 0 0/.16);color:var(--c-gold);display:grid;place-items:center } .page-site .phone-page .cafe-mcard .mchip :is(.fa, .fa-solid, .fa-regular, .fa-brands) { font-size:14px; } .page-site .phone-page .cafe-mcard b { display:block;font-size:.72rem;color:var(--c-txt);font-weight:650 } .page-site .phone-page .cafe-mcard span { display:block;font-size:.64rem;color:var(--c-mut) } .page-site .phone-page .cafe-mcard .gobtn { margin-left:auto;font-size:.7rem;font-weight:650;color:oklch(24% 0.05 60);background:linear-gradient(135deg,var(--c-gold),var(--c-gold-2));border:none;border-radius:99px;padding:.42rem .75rem;min-height:28px;cursor:pointer } .page-site .phone-page .cafe-foot { margin-top:auto;border-top:1px solid var(--c-line);padding:11px 14px;text-align:center;font-family:var(--font-mono);font-size:.54rem;letter-spacing:.1em;color:var(--c-mut);background:oklch(8% 0.02 300/.24);backdrop-filter:blur(8px) } .page-site .phone-page .cafe-foot b { color:var(--c-gold);font-weight:700 } .page-site .demo-controls { display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:16px;padding:7px 8px 7px 12px;border:1px solid color-mix(in oklab,var(--fg) 14%,transparent);border-radius:999px;background:color-mix(in oklab,var(--surface) 94%,transparent);box-shadow:0 8px 22px -12px color-mix(in oklab,var(--fg) 40%,transparent);backdrop-filter:blur(12px) } /* Подпись забирает свободное место, точки и стрелка прижаты к правому краю пилюли. В эталоне тут justify-content:space-between: подписи слайдов разной ширины («Цветы «Луг»» против «Йога-студия «Дыхание»»), поэтому индикатор ездил на 33px. Прижатие к правому краю — правка по замечанию QA (t8), осознанное отклонение от эталона: набор из пяти точек всегда 62px, так что при постоянном правом крае точки не двигаются вовсе. */ .page-site .demo-caption { flex:1 1 auto;min-width:0;overflow:hidden;font-size:.67rem;font-weight:700;white-space:nowrap;text-overflow:ellipsis } .page-site .demo-dots { display:flex;align-items:center;gap:5px;flex:none;margin-left:auto } .page-site .demo-dot { width:6px;height:6px;padding:0;border:0;border-radius:50%;background:var(--border);cursor:pointer;transition:width .25s ease,background .25s ease } .page-site .demo-dot.is-active { width:18px;border-radius:999px;background:var(--accent-ink) } .page-site .demo-arrow { display:grid;place-items:center;width:28px;height:28px;padding:0;border:1px solid var(--border);border-radius:50%;background:var(--surface);color:var(--fg);cursor:pointer;transition:background .18s ease,border-color .18s ease,transform .18s ease } .page-site .demo-arrow:hover { background:var(--accent-soft);border-color:var(--accent-ink);transform:translateY(-1px) } .page-site .demo-arrow :is(.fa, .fa-solid, .fa-regular, .fa-brands) { font-size:13px; } .page-site .page { flex:1;overflow:hidden;display:flex;flex-direction:column } .page-site .page-body { flex:1;overflow-y:auto;padding:22px 20px 18px;scrollbar-width:none } .page-site .page-body::-webkit-scrollbar { display:none } .page-site .p-head { display:flex;flex-direction:column;align-items:center;text-align:center;margin-bottom:20px } .page-site .ph-img { width:88px;height:88px;border-radius:50%;background:linear-gradient(140deg,var(--accent-soft),var(--accent));display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-weight:800;font-size:2rem;color:var(--surface);box-shadow:0 0 0 5px var(--surface),0 12px 28px -10px color-mix(in oklab,var(--accent) 60%,transparent);margin-bottom:14px } .page-site .p-name { font-family:var(--font-display);font-weight:750;font-size:1.42rem;letter-spacing:-.02em } .page-site img.ph-img { object-fit:cover;font-size:0 } .page-site .p-bio { font-size:.85rem;color:var(--muted);max-width:34ch;margin-top:6px } .page-site .p-block { margin-top:20px } .page-site .p-block-title { font-family:var(--font-mono);font-size:.64rem;letter-spacing:.13em;text-transform:uppercase;color:var(--muted);margin-bottom:9px;text-align:center } .page-site .p-links { display:flex;flex-direction:column;gap:9px } .page-site .plink { display:flex;align-items:center;gap:12px;min-height:52px;padding:0 16px;background:var(--surface);border:1px solid var(--border);border-radius:14px;color:var(--fg);transition:border-color .18s ease,transform .18s ease } .page-site .plink:hover { border-color:color-mix(in oklab,var(--accent) 55%,var(--border));transform:translateY(-1px) } .page-site .pchip { width:34px;height:34px;border-radius:50%;background:var(--accent-soft);display:flex;align-items:center;justify-content:center;flex:none;transition:background .18s ease,color .18s ease } .page-site .pchip :is(.fa, .fa-solid, .fa-regular, .fa-brands) { font-size:17px;color:var(--fg); } .page-site .plink:hover .pchip { background:var(--accent-ink) } .page-site .plink:hover .pchip svg { color:var(--surface) } .page-site .pchip.vm { font-family:var(--font-display);font-weight:800;font-size:.78rem;color:var(--fg) } .page-site .plabel { flex:1;font-weight:600;font-size:.92rem } .page-site .pchev { color:var(--muted);width:14px;height:14px;flex:none } .page-site .p-row2 { display:grid;grid-template-columns:1fr 1fr;gap:9px } .page-site .page-foot { padding:14px 20px;border-top:1px solid var(--border);background:var(--surface);text-align:center;font-family:var(--font-mono);font-size:.62rem;letter-spacing:.08em;color:var(--muted) } .page-site .page-foot b { color:var(--accent-ink);font-weight:700 } .page-site /* ---------- steps / how ---------- */ .steps { display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:44px } .page-site .step { background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:28px 26px;position:relative } .page-site .step-num { font-family:var(--font-mono);font-size:.8rem;font-weight:700;color:var(--accent-ink);background:var(--accent-soft);width:38px;height:38px;border-radius:12px;display:flex;align-items:center;justify-content:center;margin-bottom:18px } .page-site .step h3 { margin-bottom:10px } .page-site .step p { font-size:.95rem;color:var(--muted) } .page-site /* ---------- features ---------- */ .feat-grid { display:grid;grid-template-columns:repeat(2,1fr);gap:22px;margin-top:44px } .page-site .feat { background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:30px 28px;transition:box-shadow .2s ease,border-color .2s ease } .page-site .feat:hover { box-shadow:var(--shadow-1);border-color:color-mix(in oklab,var(--accent) 30%,var(--border)) } .page-site .feat-icon { width:44px;height:44px;border-radius:13px;background:var(--accent-soft);color:var(--accent-ink);display:flex;align-items:center;justify-content:center;margin-bottom:20px } .page-site .feat-icon :is(.fa, .fa-solid, .fa-regular, .fa-brands) { font-size:21px; } .page-site .feat h3 { margin-bottom:10px } .page-site .feat p { font-size:.95rem;color:var(--muted) } .page-site .feat-tag { display:inline-block;font-family:var(--font-mono);font-size:.64rem;letter-spacing:.1em;text-transform:uppercase;color:var(--accent-ink);margin-top:14px;font-weight:600 } .page-site /* ---------- product demo (tabs) ---------- */ .demo { border-top:1px solid var(--border);border-bottom:1px solid var(--border) } .page-site .tabs { display:inline-flex;background:var(--surface);border:1px solid var(--border);border-radius:999px;padding:4px;margin-top:40px;gap:2px;flex-wrap:wrap } .page-site .tab-btn { border:none;background:none;font-family:var(--font-body);font-size:14.5px;font-weight:600;color:var(--muted);padding:.62rem 1.15rem;border-radius:999px;cursor:pointer;min-height:42px;transition:background .18s ease,color .18s ease } .page-site .tab-btn:hover { color:var(--fg) } .page-site .tab-btn.active { background:var(--ink);color:var(--surface) } .page-site .demo-panel { display:none;margin-top:26px } .page-site .demo-panel.active { display:block;animation:panelIn .28s ease } .page-site @keyframes panelIn { from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none} } .page-site .mock-browser { background:var(--surface);border:1px solid var(--border);border-radius:20px;box-shadow:var(--shadow-2);overflow:hidden } .page-site .browser-chrome { display:flex;align-items:center;gap:10px;padding:13px 18px;border-bottom:1px solid var(--border);background:var(--bg) } .page-site .browser-dots { display:flex;gap:6px } .page-site .browser-dots i { width:11px;height:11px;border-radius:50% } .page-site .browser-dots i:nth-child(1) { background:oklch(62% 0.13 25) } .page-site .browser-dots i:nth-child(2) { background:oklch(72% 0.13 85) } .page-site .browser-dots i:nth-child(3) { background:oklch(70% 0.13 145) } .page-site .browser-url { flex:1;max-width:340px;background:var(--surface);border:1px solid var(--border);border-radius:9px;padding:6px 12px;font-family:var(--font-mono);font-size:.72rem;color:var(--muted) } .page-site /* editor panel */ .editor { padding:30px } .page-site .editor-top { display:flex;align-items:flex-start;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-bottom:26px } .page-site .editor-top h2 { font-size:1.5rem } .page-site .editor-top-actions { display:flex;align-items:center;gap:10px;flex-wrap:wrap } .page-site .editor-grid { display:grid;grid-template-columns:300px 1fr;gap:24px;align-items:start } .page-site .mini-phone { background:var(--purple);border-radius:30px;padding:8px;position:sticky;top:90px } .page-site .mini-screen { background:var(--bg);border-radius:23px;padding:18px 16px;min-height:420px;display:flex;flex-direction:column;gap:16px } .page-site .mini-head { display:flex;flex-direction:column;align-items:center;text-align:center;gap:5px } .page-site .mini-av { width:52px;height:52px;border-radius:50%;background:linear-gradient(140deg,var(--accent-soft),var(--accent));display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-weight:800;font-size:1.2rem;color:var(--surface) } .page-site .mini-av img { width:100%;height:100%;border-radius:50%;object-fit:cover } .page-site .mini-head .n { font-family:var(--font-display);font-weight:750;font-size:1rem } .page-site .mini-head .b { font-size:.68rem;color:var(--muted);text-align:center } .page-site .mini-block h6 { font-family:var(--font-mono);font-size:.56rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin:2px 0 6px;text-align:center;font-weight:600 } .page-site .mini-item { display:flex;align-items:center;gap:8px;background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:9px 11px;min-height:36px;font-size:.74rem;font-weight:600 } .page-site .mini-item :is(.fa, .fa-solid, .fa-regular, .fa-brands) { font-size:13px;color:var(--accent-ink);flex:none; } .page-site .mini-item .mvm { font-family:var(--font-display);font-weight:800;font-size:.66rem;color:var(--accent-ink);width:16px;text-align:center;flex:none } .page-site .mini-item span { overflow:hidden;text-overflow:ellipsis;white-space:nowrap } .page-site .mini-items { display:flex;flex-direction:column;gap:6px } .page-site .mini-row2 { display:grid;grid-template-columns:1fr 1fr;gap:7px } .page-site .mini-foot { margin-top:auto;border-top:1px solid var(--border);padding-top:10px;text-align:center;font-family:var(--font-mono);font-size:.56rem;letter-spacing:.08em;color:var(--muted) } .page-site /* blocks list */ .blocks { display:flex;flex-direction:column;gap:14px } .page-site .block-row { background:var(--bg);border:1px solid var(--border);border-radius:16px;overflow:hidden } .page-site .block-head { display:flex;align-items:center;gap:12px;padding:14px 16px;cursor:default } .page-site .block-ico { width:38px;height:38px;border-radius:11px;background:var(--accent-soft);color:var(--accent-ink);display:flex;align-items:center;justify-content:center;flex:none } .page-site .block-ico :is(.fa, .fa-solid, .fa-regular, .fa-brands) { font-size:18px; } .page-site .block-title { font-weight:650;font-size:.98rem;flex:1 } .page-site .block-count { font-family:var(--font-mono);font-size:.72rem;color:var(--muted);background:var(--surface);border:1px solid var(--border);border-radius:999px;padding:.2rem .55rem } .page-site .icon-btn { width:36px;height:36px;border-radius:10px;border:1px solid var(--border);background:var(--surface);color:var(--muted);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background .16s ease,color .16s ease,border-color .16s ease } .page-site .icon-btn:hover { background:var(--accent-soft);color:var(--accent-ink);border-color:transparent } .page-site .icon-btn[disabled] { opacity:.35;cursor:not-allowed } .page-site .icon-btn :is(.fa, .fa-solid, .fa-regular, .fa-brands) { font-size:15px; } .page-site .block-body { padding:0 16px 16px } .page-site .block-items { display:flex;flex-direction:column;gap:8px } .page-site .item-row { display:flex;align-items:center;gap:11px;background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:10px 13px } .page-site .item-row .pchip { width:30px;height:30px } .page-site .item-row .pchip :is(.fa, .fa-solid, .fa-regular, .fa-brands) { font-size:15px; } .page-site .item-row .pchip.vm { font-size:.68rem } .page-site .item-meta { flex:1;min-width:0 } .page-site .item-meta b { display:block;font-size:.9rem;font-weight:600 } .page-site .item-meta span { display:block;font-family:var(--font-mono);font-size:.68rem;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap } .page-site .add-form { margin-top:10px;display:none } .page-site .add-form.open { display:block } .page-site .add-form label { display:block;font-family:var(--font-mono);font-size:.66rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:8px;font-weight:600 } .page-site .add-row { display:flex;gap:8px;align-items:center } .page-site .add-row input { flex:1;min-width:0;border:1px solid var(--border);border-radius:11px;background:var(--surface);padding:11px 13px;font-family:var(--font-body);font-size:.9rem;color:var(--fg) } .page-site .add-row input::placeholder { color:var(--muted) } .page-site .add-row input:focus { outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft) } .page-site .detect { margin-top:10px;display:none } .page-site .detect.show { display:flex;align-items:center;gap:9px } .page-site .detect .pchip { width:30px;height:30px } .page-site .detect .pchip :is(.fa, .fa-solid, .fa-regular, .fa-brands) { font-size:15px; } .page-site .detect .pchip.vm { font-size:.68rem } .page-site .detect em { font-style:normal;font-size:.85rem;font-weight:600 } .page-site .detect small { color:var(--muted);font-size:.78rem } .page-site .form-error { display:none;margin-top:9px;font-size:.8rem;color:var(--danger);font-weight:500 } .page-site .form-error.show { display:block } .page-site .add-block-btn { margin-top:6px;width:100%;border:1.5px dashed color-mix(in oklab,var(--accent) 55%,var(--border));background:none;border-radius:14px;min-height:50px;font-family:var(--font-body);font-weight:600;font-size:.9rem;color:var(--accent-ink);cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px;transition:background .16s ease } .page-site .add-block-btn:hover { background:var(--accent-soft) } .page-site /* share row */ .share-row { display:flex;align-items:center;gap:12px;margin-top:26px;padding-top:22px;border-top:1px solid var(--border);flex-wrap:wrap } .page-site .share-url { display:flex;align-items:center;gap:10px;flex:1;min-width:230px;background:var(--bg);border:1px solid var(--border);border-radius:12px;padding:9px 14px } .page-site .share-url .globe { color:var(--accent-ink) } .page-site .share-url .globe :is(.fa, .fa-solid, .fa-regular, .fa-brands) { font-size:17px; } .page-site .share-url code { font-family:var(--font-mono);font-size:.88rem;color:var(--fg) } .page-site .qr-box { width:46px;height:46px;border:1px solid var(--border);border-radius:10px;background:var(--surface);display:flex;align-items:center;justify-content:center;color:var(--muted) } .page-site .qr-box :is(.fa, .fa-solid, .fa-regular, .fa-brands) { font-size:22px; } .page-site .share-note { width:100%;font-size:.82rem;color:var(--muted) } .page-site .share-note.error { color:var(--warn) } .page-site /* stats panel */ .stats { padding:30px } .page-site .stats-top { display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:24px } .page-site .stats-top h2 { font-size:1.5rem } .page-site .segment { display:inline-flex;background:var(--bg);border:1px solid var(--border);border-radius:999px;padding:3px;gap:2px } .page-site .seg-btn { border:none;background:none;font-family:var(--font-body);font-size:13.5px;font-weight:600;color:var(--muted);padding:.5rem .95rem;border-radius:999px;cursor:pointer;min-height:38px;transition:background .18s ease,color .18s ease } .page-site .seg-btn:hover { color:var(--fg) } .page-site .seg-btn.active { background:var(--surface);color:var(--fg);box-shadow:0 1px 3px oklch(19.79% 0.041 271.63 / .12) } .page-site .stat-cards { display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:16px } .page-site .stat-card .mono { font-family:var(--font-mono);font-size:1.6rem;font-weight:700;letter-spacing:-.02em } .page-site .stat-card .lbl { font-size:.8rem;color:var(--muted);margin-top:2px } .page-site .stat-card .delta { font-size:.72rem;color:var(--success);font-weight:600;margin-top:4px } /* Отступ до карточки «Источники трафика» (t14). В эталоне её верхняя граница стыкуется с нижней границей карточек .stats-grid: замер даёт gap = 0px и margin 0 у обеих, две рамки сливаются и блоки читаются как один. Заказчик просил развести их — осознанное отклонение от эталона. 16px — шаг вертикального ритма самой панели: столько же у .stat-cards снизу, у gap в .stats-grid и у .stats-foot сверху. */ .page-site .stats-grid { display:grid;grid-template-columns:1.4fr 1fr;gap:16px;margin-bottom:16px } .page-site .panel-card h4 { font-family:var(--font-display);font-weight:650;font-size:1rem;letter-spacing:-.01em;margin-bottom:14px } .page-site .chart { display:flex;align-items:flex-end;gap:10px;height:190px;padding-top:8px } .page-site .clicks-row { display:flex;align-items:center;gap:12px;padding:9px 0;border-bottom:1px solid var(--border) } .page-site .clicks-row:last-child { border-bottom:none } .page-site .clicks-row .nm { width:96px;flex:none;font-size:.85rem;font-weight:600 } .page-site .clicks-row .track { flex:1;height:8px;border-radius:99px;background:color-mix(in oklab,var(--accent) 14%,var(--border));overflow:hidden } .page-site .clicks-row .fill { height:100%;border-radius:99px;background:var(--accent);transition:width .4s ease } .page-site .clicks-row .val { font-family:var(--font-mono);font-size:.82rem;color:var(--muted);width:34px;text-align:right } .page-site .stats-foot { margin-top:16px;font-family:var(--font-mono);font-size:.68rem;color:var(--muted);letter-spacing:.04em } .page-site /* traffic sources */ .traffic { display:grid;grid-template-columns:1fr 1fr;gap:14px 30px;margin-top:4px } .page-site .traffic .srow { display:flex;align-items:center;gap:11px;min-width:0 } .page-site .traffic .sico { flex:none;width:27px;height:27px;border-radius:50%;background:var(--accent-soft);color:var(--accent-ink);display:flex;align-items:center;justify-content:center } .page-site .traffic .sico :is(.fa, .fa-solid, .fa-regular, .fa-brands) { font-size:13px; } .page-site .traffic .sname { flex:1;min-width:0;font-size:.86rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis } .page-site .traffic .strack { flex:none;width:120px;height:6px;border-radius:99px;background:color-mix(in oklab,var(--accent) 16%,var(--border));overflow:hidden } .page-site .traffic .sfill { display:block;height:100%;border-radius:99px;background:var(--accent) } .page-site .traffic .sval { flex:none;width:42px;text-align:right;font-family:var(--font-mono);font-size:.8rem;color:var(--muted-ink) } .page-site /* ---------- cta ---------- */ .cta { position:relative;overflow:hidden } .page-site .cta-card { position:relative;background:var(--ink);border-radius:28px;padding:72px 48px;text-align:center;color:var(--surface);box-shadow:var(--shadow-2) } .page-site .cta-card::before { content:"";position:absolute;inset:0;background:radial-gradient(60% 90% at 50% 0%,color-mix(in oklab,var(--accent) 45%,transparent),transparent 72%);pointer-events:none;border-radius:28px } .page-site .cta-card .eyebrow { color:color-mix(in oklab,var(--accent) 40%,white) } .page-site .cta-card h2 { font-size:clamp(1.9rem,3.6vw,2.7rem);max-width:22ch;margin:0 auto 18px } .page-site .cta-card .hl { color:var(--surface);background:linear-gradient(var(--accent-ink),var(--accent-ink)) 0 100%/100% .52em no-repeat } .page-site .cta-card .hl.green { color:var(--surface);background:linear-gradient(var(--accent-ink),var(--accent-ink)) 0 100%/100% .52em no-repeat } .page-site .cta-card p { color:color-mix(in oklab,white 62%,transparent);max-width:46ch;margin:0 auto 30px } .page-site .cta-card .btn-primary { background:var(--surface);color:var(--ink) } .page-site .cta-card .btn-primary:hover { background:color-mix(in oklab,white 88%,transparent) } .page-site .cta-card .cta-note { margin-top:18px;font-size:.8rem;color:color-mix(in oklab,white 52%,transparent) } .page-site .cta-card .cta-note code { font-family:var(--font-mono);background:color-mix(in oklab,white 12%,transparent);padding:2px 7px;border-radius:6px } .page-site /* ---------- footer ---------- */ .foot { padding:60px 0 44px;border-top:1px solid var(--border) } .page-site .foot-inner { display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap } .page-site .foot .brand { font-size:1.3rem } .page-site .foot .brand .brand-mark { width:26px;height:26px } .page-site .foot p { font-size:.85rem;color:var(--muted);max-width:44ch } .page-site .foot-links { display:flex;gap:8px;flex-wrap:wrap } .page-site .foot-links a { font-size:.88rem;color:var(--muted);padding:.4rem .6rem;border-radius:8px } .page-site .foot-links a:hover { color:var(--accent-ink);background:var(--surface) } .page-site .foot-meta { width:100%;margin-top:28px;padding-top:22px;border-top:1px solid var(--border);display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;font-size:.78rem;color:var(--muted) } .page-site /* reveal */ html.js [data-reveal] { opacity:0;transform:translateY(16px) } .page-site /* readability: secondary text needs >= 4.5:1 */ .lead { color:var(--muted-ink) } .page-site .hero-note { color:var(--muted-ink) } .page-site .phone-bar { color:var(--muted-ink) } .page-site .p-bio { color:var(--muted-ink) } .page-site .p-block-title { color:var(--muted-ink) } .page-site .page-foot { color:var(--muted-ink) } .page-site .step p { color:var(--muted-ink) } .page-site .feat p { color:var(--muted-ink) } .page-site .tab-btn { color:var(--muted-ink) } .page-site .seg-btn { color:var(--muted-ink) } .page-site .browser-url { color:var(--muted-ink) } .page-site .item-meta span { color:var(--muted-ink) } .page-site .block-count { color:var(--muted-ink) } .page-site .mini-head .b { color:var(--muted-ink) } .page-site .mini-block h6 { color:var(--muted-ink) } .page-site .mini-foot { color:var(--muted-ink) } .page-site .add-form label { color:var(--muted-ink) } .page-site .add-row input::placeholder { color:var(--muted-ink) } .page-site .detect small { color:var(--muted-ink) } .page-site .stat-card .lbl { color:var(--muted-ink) } .page-site .chart-lbl { color:var(--muted-ink) } .page-site .chart-cap { color:var(--muted-ink) } .page-site .clicks-row .val { color:var(--muted-ink) } .page-site .stats-foot { color:var(--muted-ink) } .page-site .foot p { color:var(--muted-ink) } .page-site .foot-links a { color:var(--muted-ink) } .page-site .foot-meta { color:var(--muted-ink) } .page-site .share-note { color:var(--muted-ink) } .page-site .tab-btn:hover { color:var(--fg) } .page-site .seg-btn:hover { color:var(--fg) } .page-site .badge-success { color:oklch(44% 0.13 155) } .page-site .stat-card .delta { color:oklch(44% 0.13 155) } .page-site .badge-draft { color:oklch(47% 0.13 75) } .page-site .share-note.error { color:oklch(47% 0.13 75) } .page-site .badge-blocked { color:oklch(44% 0.17 25) } .page-site .form-error { color:oklch(44% 0.17 25) } @media(max-width:920px) { .page-site .hero-grid { grid-template-columns:1fr;gap:44px } .page-site .hero { padding:44px 0 60px } } @media(prefers-reduced-motion:reduce) { .page-site .demo-slide { transition:none!important;animation:none!important } .page-site .demo-slide .phone-bg { transition:none!important;animation:none!important } .page-site .phone-page .cafe-body>* { transition:none!important;animation:none!important } .page-site .phone-page .cafe-reviews>* { transition:none!important;animation:none!important } .page-site .phone-page .cafe-rvs .cafe-rv { transition:none!important;animation:none!important } .page-site .phone-page .cafe-foot { transition:none!important;animation:none!important } .page-site .phone-page .phone-bar { transition:none!important;animation:none!important } .page-site .demo-slide.is-exiting { visibility:hidden } .page-site .demo-arrow { transition:none } .page-site .demo-dot { transition:none } } @media(max-width:920px) { .page-site .steps { grid-template-columns:1fr } } @media(max-width:920px) { .page-site .feat-grid { grid-template-columns:1fr } } @media(max-width:920px) { .page-site .editor-grid { grid-template-columns:1fr } } @media(max-width:920px) { .page-site .stat-cards { grid-template-columns:1fr } } @media(max-width:920px) { .page-site .stats-grid { grid-template-columns:1fr } } @media(max-width:920px) { .page-site .traffic { grid-template-columns:1fr;gap:12px } .page-site .traffic .strack { flex:1;width:auto } } @media(max-width:920px) { .page-site .cta-card { padding:56px 26px } }