/* ============================================================ Базовый движок стилей презентаций. Управляется переменными (:root задаётся в каждом деке) + класс семейства fam-* на . Один и тот же скелет слайдов рендерится в 10 разных стилях. ============================================================ */ :root{ --bg:#ffffff; --bg2:#f5f6fa; --surface:#ffffff; --surface2:#f7f8fc; --text:#1a2233; --strong:#0b1020; --muted:#5f6b83; --line:#e6e9f2; --accent:#2f6bff; --accent2:#7c5cff; --on-accent:#ffffff; --font-d:'Inter',system-ui,sans-serif; --font-b:'Inter',system-ui,sans-serif; --radius:18px; --radius-s:12px; --shadow:0 20px 60px -30px rgba(15,23,42,.35); --shadow-s:0 8px 26px -14px rgba(15,23,42,.22); --pad:64px; --ease:cubic-bezier(.2,.7,.2,1); } *{box-sizing:border-box;margin:0;padding:0} html,body{width:100%;height:100%;overflow:hidden;background:var(--bg);color:var(--text); font-family:var(--font-b);font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased} /* ---------- фон ---------- */ .bg{position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none} .bg span{position:absolute;border-radius:50%;filter:blur(80px);opacity:.4; animation:float 24s var(--ease) infinite} .bg-1{width:520px;height:520px;background:var(--accent);top:-140px;left:-120px} .bg-2{width:560px;height:560px;background:var(--accent2);bottom:-180px;right:-150px;animation-delay:-8s} .bg-3{width:380px;height:380px;background:var(--accent);top:34%;left:60%;opacity:.18;animation-delay:-14s} @keyframes float{0%,100%{transform:translate(0,0) scale(1)}33%{transform:translate(40px,-30px) scale(1.08)}66%{transform:translate(-30px,40px) scale(.94)}} /* ---------- nav ---------- */ .nav{position:fixed;top:0;left:0;right:0;height:56px;padding:0 26px;z-index:50; display:flex;align-items:center;gap:20px;background:color-mix(in srgb,var(--bg) 82%,transparent); backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--line)} .brand{font-family:var(--font-d);font-weight:800;letter-spacing:-.02em;font-size:16px;color:var(--strong)} .nav-progress{flex:1;height:4px;border-radius:4px;background:var(--line);overflow:hidden} .nav-progress-bar{display:block;height:100%;width:14%;border-radius:4px; background:linear-gradient(90deg,var(--accent),var(--accent2));transition:width .6s var(--ease)} .counter{font-family:var(--font-d);font-variant-numeric:tabular-nums;font-weight:700;font-size:14px;color:var(--muted)} .counter b{color:var(--accent)} /* ---------- слайды ---------- */ .deck{position:relative;width:100vw;height:100vh;z-index:1} .slide{position:absolute;inset:0;padding:78px var(--pad) 66px;display:flex;flex-direction:column; justify-content:center;opacity:0;pointer-events:none;transform:translateY(18px) scale(.985); transition:opacity .55s var(--ease),transform .65s var(--ease);overflow-y:auto;overflow-x:hidden} .slide.is-active{opacity:1;pointer-events:auto;transform:none} .slide.is-prev{transform:translateY(-18px) scale(.985)} .slide-inner{width:100%;max-width:1160px;margin:0 auto;display:flex;flex-direction:column;gap:22px} /* reveal */ .slide-inner>*{opacity:0;transform:translateY(20px);transition:opacity .6s var(--ease),transform .6s var(--ease)} .slide.is-active .slide-inner>*{opacity:1;transform:none} .slide.is-active .slide-inner>*:nth-child(2){transition-delay:.06s} .slide.is-active .slide-inner>*:nth-child(3){transition-delay:.12s} .slide.is-active .slide-inner>*:nth-child(4){transition-delay:.18s} .slide.is-active .slide-inner>*:nth-child(5){transition-delay:.24s} .slide.is-active .slide-inner>*:nth-child(6){transition-delay:.30s} /* ---------- типографика ---------- */ .kicker{font-family:var(--font-d);font-size:12px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--accent)} .h1{font-family:var(--font-d);font-size:70px;font-weight:900;letter-spacing:-.03em;line-height:1.02;color:var(--strong)} .lead{font-size:21px;color:var(--muted);max-width:820px;line-height:1.45} .lead b,.col-lead b,.list b{color:var(--strong)} .h2{font-family:var(--font-d);font-size:42px;font-weight:800;letter-spacing:-.02em;line-height:1.12;color:var(--strong)} .sub{font-size:17px;color:var(--muted);max-width:760px} .hint{margin-top:10px;font-size:12.5px;color:var(--muted);opacity:.85} /* meta (обложка) */ .meta{display:flex;gap:34px;margin-top:8px;flex-wrap:wrap} .meta-k{font-family:var(--font-d);font-size:30px;font-weight:800;letter-spacing:-.02em;color:var(--strong)} .meta-l{font-size:13px;color:var(--muted);margin-top:2px} /* метрики */ .metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:16px} .stat{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:26px 22px;box-shadow:var(--shadow-s)} .stat-k b{font-family:var(--font-d);font-size:46px;font-weight:900;letter-spacing:-.02em;color:var(--strong); font-variant-numeric:tabular-nums;background:linear-gradient(120deg,var(--accent),var(--accent2)); -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent} .stat-l{font-size:13px;color:var(--muted);margin-top:10px;line-height:1.4} /* карточки */ .cards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px} .card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:26px;box-shadow:var(--shadow-s); transition:transform .25s var(--ease),box-shadow .25s} .card:hover{transform:translateY(-5px);box-shadow:var(--shadow)} .card-ico{width:46px;height:46px;border-radius:12px;display:flex;align-items:center;justify-content:center; font-size:20px;margin-bottom:14px;background:color-mix(in srgb,var(--accent) 14%,transparent);color:var(--accent)} .card-h3{font-family:var(--font-d);font-size:19px;font-weight:800;color:var(--strong);margin-bottom:8px} .card-p{font-size:14px;color:var(--muted);line-height:1.55} .card-tags{margin-top:14px;display:flex;flex-wrap:wrap;gap:6px} .chip{font-size:11.5px;font-weight:700;padding:4px 11px;border-radius:999px;background:color-mix(in srgb,var(--accent) 10%,transparent);color:var(--accent)} /* два столбца */ .split{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center} .col-lead{font-size:22px;line-height:1.5;color:var(--strong);font-weight:500} .list{list-style:none;display:flex;flex-direction:column;gap:14px} .list li{position:relative;padding-left:28px;font-size:16px;color:var(--text);line-height:1.5} .list li::before{content:"→";position:absolute;left:0;color:var(--accent);font-weight:800} /* шаги */ .steps{display:grid;grid-template-columns:repeat(4,1fr);gap:16px} .step{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:24px;box-shadow:var(--shadow-s)} .step-n{font-family:var(--font-d);font-size:30px;font-weight:900;letter-spacing:-.02em; background:linear-gradient(120deg,var(--accent),var(--accent2));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;margin-bottom:8px} .step-h{font-family:var(--font-d);font-size:17px;font-weight:800;color:var(--strong);margin-bottom:6px} .step-p{font-size:13.5px;color:var(--muted);line-height:1.5} /* цитата */ .quote .slide-inner{max-width:1000px} .quote-t{font-family:var(--font-d);font-size:44px;font-weight:800;letter-spacing:-.02em;line-height:1.22;color:var(--strong)} .quote-a{margin-top:22px;font-size:14px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--accent)} /* финал */ .cta-h{font-family:var(--font-d);font-size:52px;font-weight:900;letter-spacing:-.03em;color:var(--strong)} .cta-links{display:flex;gap:14px;flex-wrap:wrap;margin-top:6px} .cta-links a{display:inline-flex;align-items:center;padding:14px 26px;border-radius:var(--radius-s);font-weight:700; text-decoration:none;background:var(--accent);color:var(--on-accent);transition:transform .2s} .cta-links a:hover{transform:translateY(-2px)} .cta-links a:last-child{background:transparent;color:var(--accent);border:1.5px solid var(--line)} .signature{margin-top:22px;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)} /* управление */ .controls{position:fixed;bottom:26px;left:50%;transform:translateX(-50%);display:flex;gap:12px;z-index:40} .ctrl{width:46px;height:46px;border-radius:50%;background:var(--surface);border:1px solid var(--line);color:var(--strong); font-size:22px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow-s);transition:.2s} .ctrl:hover{background:var(--accent);color:var(--on-accent);border-color:var(--accent)} .dots{position:fixed;right:20px;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:9px;z-index:40} .dot{width:8px;height:8px;border-radius:50%;border:none;padding:0;cursor:pointer;background:color-mix(in srgb,var(--muted) 45%,transparent)} .dot.on{background:var(--accent);height:22px;border-radius:5px} @media(max-width:1100px){.h1{font-size:48px}.metrics,.cards,.steps{grid-template-columns:1fr 1fr}.split{grid-template-columns:1fr;gap:20px}.h2{font-size:32px}} /* ============================================================ СЕМЕЙСТВА СТИЛЕЙ (класс fam-* на ) ============================================================ */ /* — SWISS: плоско, тонкие линейки, без теней, красный акцент — */ .fam-swiss .bg{display:none} .fam-swiss .stat,.fam-swiss .card,.fam-swiss .step{border:0;border-top:2px solid var(--strong);border-radius:0;box-shadow:none;background:transparent;padding-left:0;padding-right:0} .fam-swiss .card:hover,.fam-swiss .stat:hover{transform:none;box-shadow:none} .fam-swiss .stat-k b,.fam-swiss .step-n{-webkit-text-fill-color:var(--accent);background:none;color:var(--accent)} .fam-swiss .card-ico{background:none;color:var(--accent);border-radius:0;width:auto;height:auto;font-size:26px;margin-bottom:8px} .fam-swiss .cta-links a{border-radius:0}.fam-swiss .cta-links a:last-child{border-radius:0} .fam-swiss .chip{border-radius:0;background:none;border:1px solid var(--line);color:var(--muted)} .fam-swiss .nav-progress-bar{background:var(--accent)} /* — EDITORIAL: бумага, засечки, тонкие правила — */ .fam-editorial .bg{display:none} .fam-editorial .card,.fam-editorial .stat,.fam-editorial .step{background:var(--surface);border:1px solid var(--line);border-radius:4px;box-shadow:none} .fam-editorial .h1,.fam-editorial .h2,.fam-editorial .quote-t,.fam-editorial .cta-h,.fam-editorial .meta-k{font-weight:600} .fam-editorial .stat-k b{-webkit-text-fill-color:var(--strong);background:none;font-weight:600} .fam-editorial .card-ico{border-radius:50%} .fam-editorial .cta-links a,.fam-editorial .chip{border-radius:4px} /* — MONO: техно-бумага, монопространство, рамки — */ .fam-mono .bg{display:none} .fam-mono .kicker,.fam-mono .counter,.fam-mono .brand,.fam-mono .stat-k b,.fam-mono .step-n,.fam-mono .chip,.fam-mono .quote-a{font-family:var(--font-d)} .fam-mono .card,.fam-mono .stat,.fam-mono .step{border-radius:0;box-shadow:none;border:1.5px solid var(--line)} .fam-mono .stat-k b{-webkit-text-fill-color:var(--accent);background:none} .fam-mono .card-ico{border-radius:0;border:1.5px solid var(--accent);background:none} .fam-mono .cta-links a,.fam-mono .chip{border-radius:0} .fam-mono .list li::before{content:">"} /* — BENTO: мягкие крупные карточки, большие радиусы — */ .fam-bento{--radius:26px} .fam-bento .bg span{opacity:.22} .fam-bento .card,.fam-bento .stat,.fam-bento .step{box-shadow:var(--shadow-s);border:1px solid var(--line)} .fam-bento .card:hover{transform:translateY(-6px) scale(1.01)} .fam-bento .card-ico{border-radius:14px} /* — AURORA: светлый с цветным mesh-фоном, мягкие карточки — */ .fam-aurora .bg span{opacity:.5} .fam-aurora .card,.fam-aurora .stat,.fam-aurora .step{background:color-mix(in srgb,var(--surface) 88%,transparent);backdrop-filter:blur(8px);border:1px solid color-mix(in srgb,#fff 60%,var(--line))} /* — GLASS: стекло на цветном фоне — */ .fam-glass .bg span{opacity:.6} .fam-glass .card,.fam-glass .stat,.fam-glass .step{background:color-mix(in srgb,var(--surface) 55%,transparent); backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid color-mix(in srgb,#fff 55%,transparent);box-shadow:var(--shadow-s)} .fam-glass .nav{background:color-mix(in srgb,var(--bg) 55%,transparent)} /* — CORPORATE: чистый деловой, мягкие тени — */ .fam-corporate .bg span{opacity:.14} /* — WARM: песок/терракота — */ .fam-warm .bg span{opacity:.3} .fam-warm .card,.fam-warm .stat,.fam-warm .step{border-radius:16px} /* — ONYX (тёмная): золото на чёрном, засечки — */ .fam-onyx .bg{display:none} .fam-onyx .stat-k b,.fam-onyx .step-n{background:linear-gradient(120deg,var(--accent),var(--accent2));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent} .fam-onyx .card,.fam-onyx .stat,.fam-onyx .step{background:var(--surface);border:1px solid var(--line)} .fam-onyx .card-ico{background:color-mix(in srgb,var(--accent) 18%,transparent);color:var(--accent)} .fam-onyx .h1,.fam-onyx .h2,.fam-onyx .quote-t,.fam-onyx .cta-h{font-weight:600} /* — NEON (тёмная): синтвейв — */ .fam-neon .bg span{opacity:.55;filter:blur(90px)} .fam-neon .card,.fam-neon .stat,.fam-neon .step{background:color-mix(in srgb,var(--surface) 70%,transparent); border:1px solid color-mix(in srgb,var(--accent) 30%,var(--line));box-shadow:0 0 40px -20px var(--accent)} .fam-neon .card-ico{background:color-mix(in srgb,var(--accent) 18%,transparent);color:var(--accent)} .fam-neon .cta-links a{box-shadow:0 0 30px -8px var(--accent)}