/* ============================================================================ * designs.css — «дизайн-коды»: 9 визуальных стилей как МОСТ ТОКЕНОВ поверх * ecosystem.css. Навешиваются через data-design="" на ; перекрашивают * существующие компоненты (.card/.btn/.badge/inputs/.switch) на всех * event-поверхностях (ЛК, формы, вход, виджеты). * * Стиль 'cosmos' здесь НЕ описан — он на отдельном механизме .lk-cosmos * (cabinet.css + cabinet_cosmos.js). 'standard' = без data-design (базовый * ecosystem.css). Источник токенов — дизайн-пакет (pack/themes-a,b.jsx), * перенесён на имена токенов платформы. * * Только CSS-классы/атрибуты (CSP style-src 'self'): без inline style. * Ручной акцент мероприятия (lk_accent_color) ставится CSSOM-ом ПОСЛЕ — он * перебивает --accent дизайн-кода (это намеренно). * ========================================================================== */ @import url("https://fonts.googleapis.com/css2?family=Newsreader:ital,wght@0,400;0,500;0,600;1,400&family=Space+Grotesk:wght@400;500;600;700&display=swap"); /* Заголовки берут свой шрифт у стилей с серифом/гротеском. */ [data-design] h1, [data-design] h2, [data-design] h3, [data-design] h4 { font-family: var(--design-head, var(--font-sans)); } /* ═══ 01 · COSMOS (токен-версия) — используется ТОЛЬКО для превью в галерее. На реальных поверхностях cosmos идёт богатым механизмом .lk-cosmos (cabinet.css), и data-design там НЕ ставится, поэтому конфликта нет. ═══ */ [data-design="cosmos"][data-theme="dark"]{ --bg:#06070f; --paper:#06070f; --surface:rgba(150,180,235,0.10); --surface-2:rgba(150,180,235,0.16); --fg:#eaf0fb; --mute:#8194b6; --line:rgba(255,255,255,0.16); --line-strong:rgba(255,255,255,0.28); --accent:#6E9BFF; --accent-warm:#9C7BFF; --on-accent:#07101f; --accent-mint:#5fd0a0; --accent-amber:#e0a35a; --radius-sm:15px; --radius-md:24px; --shadow-md:0 28px 64px -22px rgba(0,0,0,0.7); } [data-design="cosmos"][data-theme="light"]{ --bg:#e7ecf8; --paper:#e7ecf8; --surface:rgba(255,255,255,0.7); --surface-2:rgba(255,255,255,0.88); --fg:#0c1429; --mute:#5d6e8d; --line:rgba(60,90,160,0.16); --line-strong:rgba(60,90,160,0.26); --accent:#3f6fe0; --accent-warm:#7a52e8; --on-accent:#ffffff; --accent-mint:#2f9d74; --accent-amber:#c47a2f; --radius-sm:15px; --radius-md:24px; --shadow-md:0 26px 58px -22px rgba(40,64,120,0.40); } [data-design="cosmos"] .card{ -webkit-backdrop-filter:blur(20px) saturate(160%); backdrop-filter:blur(20px) saturate(160%); box-shadow:inset 0 1px 0 rgba(255,255,255,0.3), var(--shadow-md); } [data-design="cosmos"] .btn-primary{ background:linear-gradient(118deg,var(--accent),var(--accent-warm)); border-color:transparent; } /* ═══ 02 · LANDING — navy blueprint, цветной кант сверху карточек ═══ */ [data-design="landing"][data-theme="dark"]{ --bg:#0E2645; --paper:#0E2645; --surface:#13325a; --surface-2:#0f2c50; --fg:#E6ECF3; --mute:#7E96B0; --line:rgba(230,236,243,0.12); --line-strong:rgba(230,236,243,0.26); --accent:#4D90C6; --accent-warm:#E07856; --on-accent:#06182E; --accent-mint:#4FA888; --accent-amber:#D4A24A; --radius-sm:0px; --radius-md:0px; --shadow-md:none; } [data-design="landing"][data-theme="light"]{ --bg:#EEF2F7; --paper:#EEF2F7; --surface:#ffffff; --surface-2:#F4F7FB; --fg:#06182E; --mute:#4F6A87; --line:rgba(6,24,46,0.12); --line-strong:rgba(6,24,46,0.24); --accent:#2A6FA8; --accent-warm:#C25E3E; --on-accent:#ffffff; --accent-mint:#2F8B6A; --accent-amber:#B8852B; --radius-sm:0px; --radius-md:0px; --shadow-md:none; } [data-design="landing"] .card{ position:relative; } [data-design="landing"] .card::before{ content:""; position:absolute; top:0; left:0; right:0; height:3px; background:var(--accent); } [data-design="landing"] .badge{ border-radius:0; } /* ═══ 03 · MONO — почти без цвета, контраст вместо акцента ═══ */ [data-design="mono"][data-theme="dark"]{ --bg:#0c0c0d; --paper:#0c0c0d; --surface:#121213; --surface-2:#171718; --fg:#ededed; --mute:#757578; --line:rgba(255,255,255,0.11); --line-strong:rgba(255,255,255,0.20); --accent:#ededed; --accent-warm:#bdbdbd; --on-accent:#0c0c0d; --accent-mint:#cfcfcf; --accent-amber:#cfcfcf; --radius-sm:4px; --radius-md:5px; --shadow-md:none; } [data-design="mono"][data-theme="light"]{ --bg:#f4f4f2; --paper:#f4f4f2; --surface:#ffffff; --surface-2:#f8f8f6; --fg:#16161a; --mute:#8a8a86; --line:rgba(0,0,0,0.12); --line-strong:rgba(0,0,0,0.22); --accent:#16161a; --accent-warm:#444; --on-accent:#ffffff; --accent-mint:#444; --accent-amber:#444; --radius-sm:4px; --radius-md:5px; --shadow-md:none; } [data-design="mono"] .btn-primary{ background:var(--fg); color:var(--bg); border-color:var(--fg); } [data-design="mono"] a{ text-underline-offset:3px; } /* ═══ 04 · GLASS — матовое стекло поверх цветных пятен ═══ */ [data-design="glass"][data-theme="dark"]{ --bg:#08130f; --paper:#08130f; --surface:rgba(255,255,255,0.07); --surface-2:rgba(255,255,255,0.11); --fg:#eafaf4; --mute:#8fb0a6; --line:rgba(255,255,255,0.16); --line-strong:rgba(255,255,255,0.26); --accent:#2DD4BF; --accent-warm:#A3E635; --on-accent:#04241c; --accent-mint:#34D399; --accent-amber:#FBBF24; --radius-sm:14px; --radius-md:22px; --shadow-md:0 24px 56px -24px rgba(0,0,0,0.6); } [data-design="glass"][data-theme="light"]{ --bg:#e8f5f0; --paper:#e8f5f0; --surface:rgba(255,255,255,0.62); --surface-2:rgba(255,255,255,0.85); --fg:#0c241d; --mute:#5b8076; --line:rgba(255,255,255,0.8); --line-strong:rgba(20,80,64,0.16); --accent:#0EA98C; --accent-warm:#65A30D; --on-accent:#ffffff; --accent-mint:#0d9d6e; --accent-amber:#CA8A04; --radius-sm:14px; --radius-md:22px; --shadow-md:0 22px 50px -24px rgba(20,80,64,0.34); } [data-design="glass"] body{ background-image: radial-gradient(50% 50% at 8% 8%, color-mix(in oklab,var(--accent) 38%,transparent), transparent 60%), radial-gradient(46% 46% at 96% 22%, color-mix(in oklab,var(--accent-warm) 36%,transparent), transparent 60%); background-attachment:fixed; } [data-design="glass"] .card{ -webkit-backdrop-filter:blur(26px) saturate(150%); backdrop-filter:blur(26px) saturate(150%); box-shadow:inset 0 1px 0 rgba(255,255,255,0.3), var(--shadow-md); } /* ═══ 05 · WARM — кремовый, мягкий сериф, терракота/шалфей ═══ */ [data-design="warm"][data-theme="light"]{ --bg:#F4EEE3; --paper:#F4EEE3; --surface:#FFFCF6; --surface-2:#F7F1E7; --fg:#2C2622; --mute:#897E70; --line:rgba(44,38,34,0.12); --line-strong:rgba(44,38,34,0.20); --accent:#C26B4A; --accent-warm:#6E8B6E; --on-accent:#fff8f1; --accent-mint:#6E8B6E; --accent-amber:#C99A3F; --radius-sm:11px; --radius-md:16px; --shadow-md:0 16px 36px -22px rgba(80,55,35,0.4); --design-head:"Newsreader",Georgia,serif; } [data-design="warm"][data-theme="dark"]{ --bg:#221c16; --paper:#221c16; --surface:#2b241d; --surface-2:#332b22; --fg:#f0e8dc; --mute:#a99c8a; --line:rgba(240,232,220,0.12); --line-strong:rgba(240,232,220,0.22); --accent:#D98A63; --accent-warm:#92AE8E; --on-accent:#221c16; --accent-mint:#92AE8E; --accent-amber:#D9B36A; --radius-sm:11px; --radius-md:16px; --shadow-md:0 18px 40px -22px rgba(0,0,0,0.55); --design-head:"Newsreader",Georgia,serif; } [data-design="warm"] .btn{ border-radius:999px; } [data-design="warm"] .badge{ border-radius:999px; } /* ═══ 06 · NEON — почти чёрный, неон, свечение ═══ */ [data-design="neon"][data-theme="dark"]{ --bg:#07090c; --paper:#07090c; --surface:#0d1117; --surface-2:#11161e; --fg:#d7e3e0; --mute:#5d6b6a; --line:rgba(67,245,167,0.16); --line-strong:rgba(67,245,167,0.30); --accent:#43F5A7; --accent-warm:#38BDF8; --on-accent:#04130c; --accent-mint:#43F5A7; --accent-amber:#FACC15; --radius-sm:7px; --radius-md:9px; --shadow-md:0 24px 50px -28px rgba(0,0,0,0.8); } [data-design="neon"][data-theme="light"]{ --bg:#eef3f1; --paper:#eef3f1; --surface:#ffffff; --surface-2:#f3f7f5; --fg:#0c1612; --mute:#5b6f68; --line:rgba(0,140,90,0.16); --line-strong:rgba(0,140,90,0.30); --accent:#00A86B; --accent-warm:#0284C7; --on-accent:#ffffff; --accent-mint:#00A86B; --accent-amber:#B45309; --radius-sm:7px; --radius-md:9px; --shadow-md:0 18px 40px -26px rgba(0,80,50,0.4); } [data-design="neon"] .btn-primary{ box-shadow:0 0 22px -4px color-mix(in oklab,var(--accent) 80%,transparent); } [data-design="neon"] .btn:hover{ border-color:var(--accent); box-shadow:0 0 16px -6px var(--accent); } /* ═══ 07 · BENTO — модульные плитки, индиго, мягкая тень ═══ */ [data-design="bento"][data-theme="light"]{ --bg:#E9EBF1; --paper:#E9EBF1; --surface:#ffffff; --surface-2:#F1F2F7; --fg:#15181F; --mute:#737888; --line:rgba(20,24,34,0.07); --line-strong:rgba(20,24,34,0.14); --accent:#4F46E5; --accent-warm:#7C3AED; --on-accent:#ffffff; --accent-mint:#16A34A; --accent-amber:#EA580C; --radius-sm:13px; --radius-md:20px; --shadow-md:0 10px 30px -16px rgba(30,30,60,0.22); } [data-design="bento"][data-theme="dark"]{ --bg:#0b0d12; --paper:#0b0d12; --surface:#15181f; --surface-2:#1b1f28; --fg:#ECEEF3; --mute:#868d9e; --line:rgba(255,255,255,0.07); --line-strong:rgba(255,255,255,0.14); --accent:#7C8BFF; --accent-warm:#A78BFA; --on-accent:#0b0d12; --accent-mint:#4ADE80; --accent-amber:#FB923C; --radius-sm:13px; --radius-md:20px; --shadow-md:0 18px 40px -22px rgba(0,0,0,0.6); } [data-design="bento"] .btn-primary{ background:linear-gradient(120deg,var(--accent),var(--accent-warm)); border-color:transparent; } /* ═══ 08 · EDITORIAL — журнальный сериф, чернильный акцент ═══ */ [data-design="editorial"][data-theme="light"]{ --bg:#FBFAF6; --paper:#FBFAF6; --surface:#FFFFFF; --surface-2:#F6F4EE; --fg:#1A1815; --mute:#6e685f; --line:rgba(26,24,21,0.13); --line-strong:rgba(26,24,21,0.22); --accent:#9B2D20; --accent-warm:#1A1815; --on-accent:#FBFAF6; --accent-mint:#3F6B4A; --accent-amber:#9A6B1E; --radius-sm:3px; --radius-md:4px; --shadow-md:none; --font-sans:"Newsreader",Georgia,serif; --design-head:"Newsreader",Georgia,serif; } [data-design="editorial"][data-theme="dark"]{ --bg:#15120d; --paper:#15120d; --surface:#1c1812; --surface-2:#241f18; --fg:#f1ece2; --mute:#a39a8b; --line:rgba(241,236,226,0.14); --line-strong:rgba(241,236,226,0.24); --accent:#E07A63; --accent-warm:#f1ece2; --on-accent:#15120d; --accent-mint:#88B093; --accent-amber:#D8B070; --radius-sm:3px; --radius-md:4px; --shadow-md:none; --font-sans:"Newsreader",Georgia,serif; --design-head:"Newsreader",Georgia,serif; } [data-design="editorial"] h1, [data-design="editorial"] h2{ letter-spacing:-0.01em; line-height:1.12; } [data-design="editorial"] a{ font-style:italic; } /* ═══ 09 · BRUTALIST — ч/б каркас, толстые рамки, жёсткие тени ═══ */ [data-design="brutalist"][data-theme="light"]{ --bg:#F3F1EA; --paper:#F3F1EA; --surface:#FFFFFF; --surface-2:#F3F1EA; --fg:#0A0A0A; --mute:#5b5b58; --line:#0A0A0A; --line-strong:#0A0A0A; --accent:#FF3B00; --accent-warm:#0A0A0A; --on-accent:#FFFFFF; --accent-mint:#0A0A0A; --accent-amber:#0A0A0A; --radius-sm:0px; --radius-md:0px; --shadow-md:5px 5px 0 0 #0A0A0A; --design-head:"Space Grotesk",sans-serif; } [data-design="brutalist"][data-theme="dark"]{ --bg:#0A0A0A; --paper:#0A0A0A; --surface:#141414; --surface-2:#0A0A0A; --fg:#FAFAFA; --mute:#9a9a98; --line:#FAFAFA; --line-strong:#FAFAFA; --accent:#FFE600; --accent-warm:#FAFAFA; --on-accent:#0A0A0A; --accent-mint:#FAFAFA; --accent-amber:#FAFAFA; --radius-sm:0px; --radius-md:0px; --shadow-md:5px 5px 0 0 #FAFAFA; --design-head:"Space Grotesk",sans-serif; } [data-design="brutalist"] .card{ border:2px solid var(--fg); } [data-design="brutalist"] h1, [data-design="brutalist"] h2, [data-design="brutalist"] h3{ text-transform:uppercase; letter-spacing:-0.02em; } [data-design="brutalist"] .btn{ border:2px solid var(--fg); font-weight:600; } [data-design="brutalist"] .btn-primary{ background:var(--accent); color:var(--on-accent); box-shadow:var(--shadow-md); } [data-design="brutalist"] .btn-primary:hover{ transform:translate(-2px,-2px); box-shadow:7px 7px 0 0 var(--fg); filter:none; } [data-design="brutalist"] input, [data-design="brutalist"] select, [data-design="brutalist"] textarea{ border-width:2px; } [data-design="brutalist"] .badge{ border-width:2px; } /* ═══ 10 · SOFT — неоморфизм: мягкие двойные тени, без рамок ═══ */ [data-design="soft"][data-theme="light"]{ --bg:#E4E8EF; --paper:#E4E8EF; --surface:#E4E8EF; --surface-2:#E4E8EF; --fg:#3c4356; --mute:#8b93a6; --line:rgba(255,255,255,0.6); --line-strong:rgba(160,170,190,0.5); --accent:#5B6CFF; --accent-warm:#8B5BFF; --on-accent:#ffffff; --accent-mint:#3FB286; --accent-amber:#E0915A; --radius-sm:13px; --radius-md:20px; --sl:#ffffff; --sd:#bcc4d4; --shadow-md:7px 7px 16px var(--sd), -7px -7px 16px var(--sl); } [data-design="soft"][data-theme="dark"]{ --bg:#21252d; --paper:#21252d; --surface:#21252d; --surface-2:#21252d; --fg:#c7cedb; --mute:#7e8699; --line:rgba(255,255,255,0.05); --line-strong:rgba(0,0,0,0.3); --accent:#7E8BFF; --accent-warm:#A78BFA; --on-accent:#171a20; --accent-mint:#4FB892; --accent-amber:#E0A35A; --radius-sm:13px; --radius-md:20px; --sl:#2a2f39; --sd:#15181d; --shadow-md:7px 7px 16px var(--sd), -7px -7px 16px var(--sl); } [data-design="soft"] .card{ border:none; box-shadow:var(--shadow-md); } [data-design="soft"] input, [data-design="soft"] select, [data-design="soft"] textarea{ border:none; box-shadow:inset 4px 4px 9px var(--sd), inset -4px -4px 9px var(--sl); } [data-design="soft"] .btn{ border:none; box-shadow:5px 5px 12px var(--sd), -5px -5px 12px var(--sl); } [data-design="soft"] .btn:hover{ box-shadow:3px 3px 8px var(--sd), -3px -3px 8px var(--sl); } [data-design="soft"] .btn-primary{ background:var(--accent); color:var(--on-accent); } [data-design="soft"] .badge{ border:none; box-shadow:2px 2px 5px var(--sd), -2px -2px 5px var(--sl); } /* ── Мини-превью в галерее: те же токены на вложенном контейнере [data-design] ── (designs.css скоупит по атрибуту, поэтому вложенный data-design переопределяет токены для своего поддерева — карточки-образцы красятся независимо.) */ .dz-preview{ background:var(--bg); color:var(--fg); } /* ════════════════════════════════════════════════════════════════════════════ Тематические фоны дизайн-кодов на АНКЕТЕ/ВХОДЕ/СТРАНИЦАХ ОПЛАТЫ (поверхности .layout-narrow и .pay-body): не «плоско». Лёгкие CSS-фоны (градиенты/сетки/свечение). cosmos — отдельный canvas (#cosmos); landing — статическая база под canvas «нейросеть» (#formbg + form_bg_neural.js); glass — уже имеет body-фон выше. Скоуп narrow/pay, чтобы не менять сложные раскладки ЛК. ════════════════════════════════════════════════════════════════════════════ */ [data-design="landing"] body.layout-narrow, [data-design="landing"] body.pay-body{ background-image: radial-gradient(65% 55% at 50% -8%, color-mix(in oklab,var(--accent) 24%,transparent), transparent 70%), radial-gradient(45% 45% at 100% 100%, color-mix(in oklab,var(--accent-warm) 18%,transparent), transparent 62%); background-attachment:fixed; } [data-design="mono"] body.layout-narrow, [data-design="mono"] body.pay-body{ background-image: linear-gradient(color-mix(in oklab,var(--fg) 6%,transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in oklab,var(--fg) 6%,transparent) 1px, transparent 1px); background-size:46px 46px; background-attachment:fixed; } [data-design="warm"] body.layout-narrow, [data-design="warm"] body.pay-body{ background-image: radial-gradient(70% 60% at 12% 0%, color-mix(in oklab,var(--accent-warm) 26%,transparent), transparent 60%), radial-gradient(60% 60% at 100% 100%, color-mix(in oklab,var(--accent) 16%,transparent), transparent 60%); background-attachment:fixed; } [data-design="neon"] body.layout-narrow, [data-design="neon"] body.pay-body{ background-image: radial-gradient(42% 42% at 12% 12%, color-mix(in oklab,var(--accent) 42%,transparent), transparent 60%), radial-gradient(42% 42% at 90% 28%, color-mix(in oklab,var(--accent-warm) 38%,transparent), transparent 60%), radial-gradient(50% 50% at 60% 105%, color-mix(in oklab,var(--accent-mint) 28%,transparent), transparent 60%); background-attachment:fixed; } [data-design="bento"] body.layout-narrow, [data-design="bento"] body.pay-body{ background-image: radial-gradient(color-mix(in oklab,var(--fg) 9%,transparent) 1.5px, transparent 1.5px); background-size:22px 22px; background-attachment:fixed; } [data-design="editorial"] body.layout-narrow, [data-design="editorial"] body.pay-body{ background-image: radial-gradient(80% 55% at 50% 0%, color-mix(in oklab,var(--accent-warm) 16%,transparent), transparent 65%); background-attachment:fixed; } [data-design="brutalist"] body.layout-narrow, [data-design="brutalist"] body.pay-body{ background-image: linear-gradient(color-mix(in oklab,var(--fg) 8%,transparent) 2px, transparent 2px), linear-gradient(90deg, color-mix(in oklab,var(--fg) 8%,transparent) 2px, transparent 2px); background-size:64px 64px; background-attachment:fixed; } [data-design="soft"] body.layout-narrow, [data-design="soft"] body.pay-body{ background-image: radial-gradient(60% 50% at 18% 8%, color-mix(in oklab,var(--accent) 18%,transparent), transparent 60%), radial-gradient(60% 50% at 92% 92%, color-mix(in oklab,var(--accent-warm) 15%,transparent), transparent 60%); background-attachment:fixed; }