/* ============================================================ SEO Platform — 10 тем оформления Подключается через data-theme="NAME" на ============================================================ */ /* ── 1. Indigo — классика ─────────────────────────────────── */ [data-theme="indigo"],:root{ --c-primary:#4f46e5;--c-primary-dark:#3730a3;--c-primary-light:#eef2ff; --c-accent:#f59e0b;--c-text:#1e293b;--c-muted:#64748b;--c-bg:#f8fafc; --c-white:#fff;--c-border:#e2e8f0;--c-success:#10b981; --radius:10px;--radius-lg:16px;--shadow:0 2px 16px rgba(0,0,0,.07); --font:'Segoe UI',system-ui,sans-serif; --font-heading:var(--font); --hero-bg:linear-gradient(135deg,#eef2ff 0%,#f0fdf4 100%); --header-bg:#fff;--btn-radius:10px;--header-shadow:0 1px 0 #e2e8f0; } /* ── 2. Emerald ───────────────────────────────────────────── */ [data-theme="emerald"]{ --c-primary:#059669;--c-primary-dark:#047857;--c-primary-light:#ecfdf5; --c-accent:#f59e0b;--c-text:#1e293b;--c-muted:#64748b;--c-bg:#f0fdf4; --c-border:#d1fae5;--hero-bg:linear-gradient(135deg,#ecfdf5,#f0f9ff); --header-bg:#fff;--btn-radius:10px; } /* ── 3. Rose ──────────────────────────────────────────────── */ [data-theme="rose"]{ --c-primary:#e11d48;--c-primary-dark:#be123c;--c-primary-light:#fff1f2; --c-accent:#f59e0b;--c-text:#1e293b;--c-muted:#64748b;--c-bg:#fff5f7; --c-border:#fecdd3;--hero-bg:linear-gradient(135deg,#fff1f2,#fdf2f8); --header-bg:#fff;--btn-radius:10px; } /* ── 4. Amber ─────────────────────────────────────────────── */ [data-theme="amber"]{ --c-primary:#d97706;--c-primary-dark:#b45309;--c-primary-light:#fffbeb; --c-accent:#dc2626;--c-text:#1c1917;--c-muted:#78716c;--c-bg:#fafaf9; --c-border:#e7e5e4;--hero-bg:linear-gradient(135deg,#fffbeb,#fff7ed); --header-bg:#1c1917;--btn-radius:6px; } /* ── 5. Dark ──────────────────────────────────────────────── */ [data-theme="dark"]{ --c-primary:#818cf8;--c-primary-dark:#6366f1;--c-primary-light:#1e1b4b; --c-accent:#fbbf24;--c-text:#e2e8f0;--c-muted:#94a3b8;--c-bg:#0f172a; --c-white:#1e293b;--c-border:#334155;--hero-bg:linear-gradient(135deg,#1e1b4b,#0f172a); --header-bg:#1e293b;--btn-radius:10px; } /* ── 6. Slate ─────────────────────────────────────────────── */ [data-theme="slate"]{ --c-primary:#0f172a;--c-primary-dark:#020617;--c-primary-light:#f1f5f9; --c-accent:#3b82f6;--c-text:#0f172a;--c-muted:#475569;--c-bg:#f8fafc; --c-border:#e2e8f0;--hero-bg:linear-gradient(135deg,#f1f5f9,#e2e8f0); --header-bg:#0f172a;--btn-radius:4px; } /* ── 7. Sky ───────────────────────────────────────────────── */ [data-theme="sky"]{ --c-primary:#0284c7;--c-primary-dark:#0369a1;--c-primary-light:#e0f2fe; --c-accent:#f59e0b;--c-text:#0c4a6e;--c-muted:#64748b;--c-bg:#f0f9ff; --c-border:#bae6fd;--hero-bg:linear-gradient(135deg,#e0f2fe,#f0fdf4); --header-bg:#fff;--btn-radius:8px; } /* ── 8. Purple ────────────────────────────────────────────── */ [data-theme="purple"]{ --c-primary:#7c3aed;--c-primary-dark:#6d28d9;--c-primary-light:#f5f3ff; --c-accent:#ec4899;--c-text:#1e1b4b;--c-muted:#6b7280;--c-bg:#faf5ff; --c-border:#e9d5ff;--hero-bg:linear-gradient(135deg,#f5f3ff,#fdf2f8); --header-bg:#fff;--btn-radius:12px; } /* ── 9. Teal ──────────────────────────────────────────────── */ [data-theme="teal"]{ --c-primary:#0d9488;--c-primary-dark:#0f766e;--c-primary-light:#f0fdfa; --c-accent:#f59e0b;--c-text:#134e4a;--c-muted:#64748b;--c-bg:#f0fdfa; --c-border:#99f6e4;--hero-bg:linear-gradient(135deg,#f0fdfa,#ecfdf5); --header-bg:#fff;--btn-radius:8px; } /* ── 10. Orange ───────────────────────────────────────────── */ [data-theme="orange"]{ --c-primary:#ea580c;--c-primary-dark:#c2410c;--c-primary-light:#fff7ed; --c-accent:#16a34a;--c-text:#1c1917;--c-muted:#78716c;--c-bg:#fafaf9; --c-border:#fed7aa;--hero-bg:linear-gradient(135deg,#fff7ed,#fef9c3); --header-bg:#fff;--btn-radius:8px; } /* ── Применение переменных ────────────────────────────────── */ body{font-family:var(--font,'Segoe UI',sans-serif);background:var(--c-bg);color:var(--c-text)} .site-header{background:var(--header-bg);box-shadow:var(--header-shadow,0 1px 0 var(--c-border))} .logo{color:var(--c-primary)} a{color:var(--c-primary)} .btn-primary{background:var(--c-primary);border-color:var(--c-primary);border-radius:var(--btn-radius)} .btn-primary:hover{background:var(--c-primary-dark);border-color:var(--c-primary-dark)} .btn-outline{color:var(--c-primary);border-color:var(--c-primary);border-radius:var(--btn-radius)} .btn-outline:hover{background:var(--c-primary);color:#fff} .hero{background:var(--hero-bg)} .stat-card__val{color:var(--c-primary)} .service-card:hover{border-color:var(--c-primary)} .step__num{background:var(--c-primary)} .order-form-section{background:linear-gradient(135deg,var(--c-primary),var(--c-primary-dark))} .faq__icon{color:var(--c-primary)} .main-nav a:hover{color:var(--c-primary)} .internal-links__grid a:hover{color:var(--c-primary);border-color:var(--c-primary)} /* Тёмная тема — адаптация элементов */ [data-theme="dark"] .admin-card, [data-theme="dark"] .adv-card, [data-theme="dark"] .step, [data-theme="dark"] .review-card, [data-theme="dark"] .order-card, [data-theme="dark"] .service-card{background:#1e293b;border-color:#334155} [data-theme="dark"] .site-footer{background:#020617} [data-theme="dark"] .order-form__wrap{background:#1e293b} [data-theme="dark"] .order-form__step{background:#0f172a;border-color:#334155} [data-theme="dark"] .order-form__field input, [data-theme="dark"] .order-form__field select, [data-theme="dark"] .order-form__field textarea{background:#1e293b;color:#e2e8f0;border-color:#334155} /* Amber — белый текст в шапке */ } /* ── Шапки: тёмный фон = белый текст ────────────────────────── */ /* Темы у которых --header-bg тёмный: amber, dark, slate, midnight, neon, fire, ocean, gold, lava, dusk, corporate */ .dark-header .logo, .dark-header .main-nav a, .dark-header .header-phone, .dark-header .header-cta { /* задаётся классом на
*/ } /* Проще — задаём напрямую через атрибут темы */ [data-theme="amber"] .site-header, [data-theme="dark"] .site-header, [data-theme="slate"] .site-header, [data-theme="midnight"] .site-header, [data-theme="neon"] .site-header, [data-theme="fire"] .site-header, [data-theme="ocean"] .site-header, [data-theme="gold"] .site-header, [data-theme="lava"] .site-header, [data-theme="dusk"] .site-header, [data-theme="corporate"].site-header { color: rgba(255,255,255,.9); } /* Все дочерние элементы наследуют белый цвет */ [data-theme="amber"] .site-header .logo, [data-theme="dark"] .site-header .logo, [data-theme="slate"] .site-header .logo, [data-theme="midnight"] .site-header .logo, [data-theme="neon"] .site-header .logo, [data-theme="fire"] .site-header .logo, [data-theme="ocean"] .site-header .logo, [data-theme="gold"] .site-header .logo, [data-theme="lava"] .site-header .logo, [data-theme="dusk"] .site-header .logo, [data-theme="corporate"].site-header .logo { color: #fff; } [data-theme="amber"] .site-header .main-nav a, [data-theme="dark"] .site-header .main-nav a, [data-theme="slate"] .site-header .main-nav a, [data-theme="midnight"] .site-header .main-nav a, [data-theme="neon"] .site-header .main-nav a, [data-theme="fire"] .site-header .main-nav a, [data-theme="ocean"] .site-header .main-nav a, [data-theme="gold"] .site-header .main-nav a, [data-theme="lava"] .site-header .main-nav a, [data-theme="dusk"] .site-header .main-nav a, [data-theme="corporate"].site-header .main-nav a { color: rgba(255,255,255,.8); } [data-theme="amber"] .site-header .main-nav a:hover, [data-theme="dark"] .site-header .main-nav a:hover, [data-theme="slate"] .site-header .main-nav a:hover, [data-theme="midnight"] .site-header .main-nav a:hover, [data-theme="neon"] .site-header .main-nav a:hover, [data-theme="fire"] .site-header .main-nav a:hover, [data-theme="ocean"] .site-header .main-nav a:hover, [data-theme="gold"] .site-header .main-nav a:hover, [data-theme="lava"] .site-header .main-nav a:hover, [data-theme="dusk"] .site-header .main-nav a:hover, [data-theme="corporate"].site-header .main-nav a:hover { color: #fff; } [data-theme="amber"] .site-header .header-phone, [data-theme="dark"] .site-header .header-phone, [data-theme="slate"] .site-header .header-phone, [data-theme="midnight"] .site-header .header-phone, [data-theme="neon"] .site-header .header-phone, [data-theme="fire"] .site-header .header-phone, [data-theme="ocean"] .site-header .header-phone, [data-theme="gold"] .site-header .header-phone, [data-theme="lava"] .site-header .header-phone, [data-theme="dusk"] .site-header .header-phone, [data-theme="corporate"].site-header .header-phone { color: rgba(255,255,255,.9); } [data-theme="amber"] .site-header .social-link, [data-theme="dark"] .site-header .social-link, [data-theme="slate"] .site-header .social-link, [data-theme="midnight"] .site-header .social-link, [data-theme="neon"] .site-header .social-link, [data-theme="fire"] .site-header .social-link, [data-theme="ocean"] .site-header .social-link, [data-theme="gold"] .site-header .social-link, [data-theme="lava"] .site-header .social-link, [data-theme="dusk"] .site-header .social-link, [data-theme="corporate"].site-header .social-link { color: rgba(255,255,255,.8); } [data-theme="amber"] .site-header .burger span, [data-theme="dark"] .site-header .burger span, [data-theme="slate"] .site-header .burger span, [data-theme="midnight"] .site-header .burger span, [data-theme="neon"] .site-header .burger span, [data-theme="fire"] .site-header .burger span, [data-theme="ocean"] .site-header .burger span, [data-theme="gold"] .site-header .burger span, [data-theme="lava"] .site-header .burger span, [data-theme="dusk"] .site-header .burger span, [data-theme="corporate"].site-header .burger span { background: rgba(255,255,255,.9); }