/* ========================================================= KARTA BEZ GRANIC — LIGHT THEME OVERLAY (preview) Активируется когда на Файл подключается ТОЛЬКО при ?theme=light в URL, на dark-тему не влияет. ========================================================= */ [data-theme="light"] { /* palette */ --bg: #F8FAFD; --bg-2: #EFF2F8; --ink: #0F1424; --ink-dim: #4B5570; --ink-mute: #8E97AE; --line: rgba(15,20,36,.08); --line-2: rgba(15,20,36,.14); /* brand — слегка темнее для контраста на белом */ --mint: #1FBFA0; --blue: #4F6FE5; --violet: #8F5AE0; --red: #E55967; /* gradients */ --g-primary: linear-gradient(135deg, #097A65 0%, #2D4FCC 55%, #6E37C7 100%); --g-soft: linear-gradient(135deg, rgba(9,122,101,.10), rgba(45,79,204,.10)); --g-card: linear-gradient(135deg, #FFFFFF 0%, #F4F7FB 100%); /* Акцент-текст: используем глубокие тёмные тона для нормального контраста на белом */ --g-text: linear-gradient(135deg, #097A65, #2D4FCC 60%, #6E37C7); /* shadows — мягкие, без неонового свечения */ --sh-glow: 0 0 40px rgba(79,111,229,.18), 0 0 80px rgba(31,191,160,.10); --sh-card: 0 30px 60px -20px rgba(15,20,36,.12), 0 0 0 1px rgba(15,20,36,.04) inset; } /* ---------- base body & html ---------- */ [data-theme="light"] body { background: var(--bg); color: var(--ink); /* Sharper antialiasing для светлой темы (на тёмной нужно antialiased) */ -webkit-font-smoothing: subpixel-antialiased; -moz-osx-font-smoothing: auto; /* Body text plотнее — Space Grotesk на белом ощущается жидким */ font-weight: 450; } /* Headings — Unbounded на белом смотрится тоньше чем на тёмном. Слегка сжимаем letter-spacing и делаем чуть жирнее. */ [data-theme="light"] h1, [data-theme="light"] h2, [data-theme="light"] h3, [data-theme="light"] .hero__title, [data-theme="light"] .section__title { letter-spacing: -0.02em; font-weight: 700; } /* ---------- gradient-text fallback ---------- */ /* На белом градиентный текст --g-text получается "грязным" — края градиента почти сливаются с фоном. Заменяем на сплошной --ink для читабельности, либо градиент только для очень крупных букв. */ [data-theme="light"] .grad-text, [data-theme="light"] .hero__title-accent, [data-theme="light"] .section__title-accent { background: none; -webkit-background-clip: initial; background-clip: initial; color: var(--ink); -webkit-text-fill-color: var(--ink); } /* Если хочется акцента — оставляем градиент только для самых больших заголовков (hero), где буквы крупные и градиент читается */ [data-theme="light"] .hero__title .grad-text { background: var(--g-text); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; } /* (.hero — без специального фона на light. Декор приходит из .bg-glow, как в dark теме. Это даёт ту же атмосферу.) */ /* ---------- chip / pill (Активация за 5 минут) ---------- */ [data-theme="light"] .hero__chip, [data-theme="light"] .chip { background: #FFFFFF; border: 1px solid rgba(15,20,36,.10); color: var(--ink-dim); box-shadow: 0 1px 3px rgba(15,20,36,.04); } /* ---------- CTA primary button: усилить контраст ---------- */ [data-theme="light"] .btn--primary, [data-theme="light"] .btn-primary { background: var(--g-primary); color: #FFFFFF; box-shadow: 0 8px 24px -8px rgba(45,79,204,.45), 0 2px 6px rgba(15,20,36,.10); } [data-theme="light"] .btn--primary:hover, [data-theme="light"] .btn-primary:hover { filter: brightness(1.05); box-shadow: 0 12px 32px -8px rgba(45,79,204,.55), 0 4px 10px rgba(15,20,36,.12); } /* ---------- декоративный фон: те же узоры что на dark ---------- */ /* .bg-grid — сетка тонких линий, на белом нужны тёмные (вместо белых). Делаем чуть жирнее чем на dark, чтобы текстура была заметна. */ [data-theme="light"] .bg-grid { background-image: linear-gradient(rgba(15,20,36,.085) 1px, transparent 1px), linear-gradient(90deg, rgba(15,20,36,.085) 1px, transparent 1px); } /* .bg-noise — на белом нужен тёмный шум (на dark был белый) */ [data-theme="light"] .bg-noise { opacity: .035; background-image: url("data:image/svg+xml;utf8,"); } /* .bg-glow--1/--2 — те же цвета, opacity бампим чтобы было заметно на белом */ [data-theme="light"] .bg-glow { opacity: .55; } /* radial glows на hero (orbit__glow*) — оставляем оригинальные цвета, они и так с прозрачностью и на белом дают нежное цветовое пятно */ /* (НЕ переопределяем — пусть будут как в dark) */ /* ---------- glassmorphism: card visual (3D-карта на hero) ---------- */ [data-theme="light"] .hero__card, [data-theme="light"] .card-3d, [data-theme="light"] .card-3d__face { background: radial-gradient(ellipse at 82% 18%, rgba(143,90,224,.30), transparent 55%), radial-gradient(ellipse at 0% 100%, rgba(31,191,160,.28), transparent 60%), linear-gradient(135deg, #FFFFFF 0%, #EDF0F6 100%); border: 1px solid rgba(15,20,36,.10); box-shadow: 0 60px 100px -25px rgba(15,20,36,.20), 0 20px 40px -15px rgba(79,111,229,.18), inset 0 1px 0 rgba(255,255,255,.85); color: #0F1424; } /* ---------- ВСЕ карточные компоненты на light ---------- */ /* На dark они rgba(255,255,255,.02) — почти прозрачные. На белом фоне это невидимо → даём белый фон + мягкие тени. */ [data-theme="light"] .plan, [data-theme="light"] .feature, [data-theme="light"] .feat, [data-theme="light"] .cat, [data-theme="light"] .step, [data-theme="light"] .faq__item, [data-theme="light"] .reason, [data-theme="light"] .country, [data-theme="light"] .testimonial, [data-theme="light"] .post, [data-theme="light"] .stat, [data-theme="light"] .term, [data-theme="light"] .term-card, [data-theme="light"] .review, [data-theme="light"] .review-card { background: var(--g-card); border: 1px solid var(--line); box-shadow: 0 10px 30px -15px rgba(15,20,36,.10); } /* Hover на карточках — слегка темнее фон + насыщеннее border */ [data-theme="light"] .feat:hover, [data-theme="light"] .cat:hover, [data-theme="light"] .feature:hover { background: linear-gradient(135deg, #FFFFFF 0%, #EDF0F6 100%); border-color: rgba(79,111,229,.25); box-shadow: 0 16px 40px -15px rgba(79,111,229,.18); } /* Иконка фичи (.feat__icon) — на dark rgba(255,255,255,.03), на light нужен brand-tint */ [data-theme="light"] .feat__icon { background: var(--g-soft); border: 1px solid rgba(79,111,229,.18); } /* Иконка категории (.cat__ic) — уже brand-tinted, оставляем как есть */ /* FAQ accordion — details/summary стандарт браузера */ [data-theme="light"] .feat details summary, [data-theme="light"] details summary { color: var(--ink); } /* Стрелка ▶ на closed details — на mobile стоит default цвет marker */ [data-theme="light"] details summary::marker, [data-theme="light"] details summary::-webkit-details-marker { color: var(--ink-dim); } [data-theme="light"] .plan--popular { background: linear-gradient(135deg, rgba(79,111,229,.06), rgba(31,191,160,.06)), #FFFFFF; border: 1px solid rgba(79,111,229,.30); box-shadow: 0 20px 50px -20px rgba(79,111,229,.25); } [data-theme="light"] .plan--promo { background: linear-gradient(135deg, rgba(34,197,94,.08), rgba(31,191,160,.05)), #FFFFFF; border: 1px solid rgba(34,197,94,.35); } /* ---------- blog post covers ---------- */ [data-theme="light"] .post__cover--1 { background: radial-gradient(ellipse at 30% 40%, rgba(31,191,160,.25), transparent 60%), radial-gradient(ellipse at 70% 80%, rgba(79,111,229,.25), transparent 60%), #F4F7FB; } [data-theme="light"] .post__cover--2 { background: radial-gradient(ellipse at 60% 40%, rgba(143,90,224,.28), transparent 60%), radial-gradient(ellipse at 20% 80%, rgba(31,191,160,.20), transparent 60%), #F4F7FB; } [data-theme="light"] .post__cover--3 { background: radial-gradient(ellipse at 40% 60%, rgba(229,89,103,.22), transparent 60%), radial-gradient(ellipse at 80% 30%, rgba(79,111,229,.22), transparent 60%), #F4F7FB; } /* ---------- header / nav ---------- */ [data-theme="light"] .header { background: rgba(248,250,253,.60); backdrop-filter: blur(20px) saturate(1.3); -webkit-backdrop-filter: blur(20px) saturate(1.3); } [data-theme="light"] .header.is-scrolled { background: rgba(248,250,253,.88); border-bottom-color: var(--line); } [data-theme="light"] .nav { color: var(--ink-dim); } [data-theme="light"] .nav__link { color: var(--ink-dim); } [data-theme="light"] .nav__link:hover { color: var(--ink); } /* ---------- buttons (CTA) ---------- */ /* primary — gradient brand fill + БЕЛЫЙ текст (на dark был тёмный #0a0f1a) */ [data-theme="light"] .btn--primary { background: var(--g-primary); color: #FFFFFF; -webkit-text-fill-color: #FFFFFF; box-shadow: 0 6px 20px -6px rgba(45,79,204,.40), 0 2px 6px rgba(15,20,36,.10); } [data-theme="light"] .btn--primary:hover { background: linear-gradient(135deg, #6E37C7, #097A65 60%, #2D4FCC); box-shadow: 0 12px 30px -8px rgba(45,79,204,.55), 0 4px 10px rgba(15,20,36,.12); } /* ghost — на dark стеклянная, на light нужен светлый glass */ [data-theme="light"] .btn--ghost, [data-theme="light"] .btn--secondary { background: rgba(15,20,36,.04); color: var(--ink); border: 1px solid var(--line-2); } [data-theme="light"] .btn--ghost:hover, [data-theme="light"] .btn--secondary:hover { background: rgba(15,20,36,.08); border-color: rgba(79,111,229,.30); } /* ---------- eyebrow (uppercase mono tag над заголовками секций) ---------- */ /* На dark — мятный текст + мятная рамка. На light — приглушённый deep teal */ [data-theme="light"] .eyebrow { color: var(--mint); border: 1px solid rgba(9,122,101,.25); background: rgba(31,191,160,.06); } /* ---------- section-head h2 em (italic gradient text) ---------- */ /* Большие заголовки секций: "Выберите свой уровень доступа" — em c gradient */ [data-theme="light"] .section-head h2 em { background: var(--g-text); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; font-weight: 500; } /* ---------- chip__dot (зелёная точка в "Активация за 5 минут") ---------- */ [data-theme="light"] .chip__dot { background: var(--mint); box-shadow: 0 0 8px rgba(31,191,160,.5); } /* ---------- общие тёмные fill-цвета на белом → инверсия ---------- */ [data-theme="light"] .section--alt, [data-theme="light"] .features, [data-theme="light"] .pricing, [data-theme="light"] .how, [data-theme="light"] .countries, [data-theme="light"] .faq, [data-theme="light"] .cta, [data-theme="light"] .all-posts, [data-theme="light"] .latest-blog { background: var(--bg); } /* ---------- chips / badges ---------- */ [data-theme="light"] .chip, [data-theme="light"] .badge, [data-theme="light"] .tag { background: rgba(15,20,36,.04); border: 1px solid var(--line); color: var(--ink-dim); } /* ---------- footer ---------- */ [data-theme="light"] .footer { background: var(--bg-2); color: var(--ink-dim); border-top: 1px solid var(--line); } [data-theme="light"] .footer a { color: var(--ink); } /* ---------- marquee (если включена) ---------- */ [data-theme="light"] .marquee, [data-theme="light"] .marquee__track { background: var(--bg-2); color: var(--ink-dim); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); } /* ---------- scrollbar (Safari/Chrome) ---------- */ [data-theme="light"] ::-webkit-scrollbar { background: var(--bg-2); } [data-theme="light"] ::-webkit-scrollbar-thumb { background: rgba(15,20,36,.18); border-radius: 4px; } [data-theme="light"] ::-webkit-scrollbar-thumb:hover { background: rgba(15,20,36,.30); } /* ---------- input / form ---------- */ [data-theme="light"] input, [data-theme="light"] textarea, [data-theme="light"] select { background: #FFFFFF; color: var(--ink); border: 1px solid var(--line-2); } [data-theme="light"] input::placeholder, [data-theme="light"] textarea::placeholder { color: var(--ink-mute); } /* ---------- accent text (заголовки с градиентом) ---------- */ [data-theme="light"] .grad-text, [data-theme="light"] .hero__title-accent { background: var(--g-text); -webkit-background-clip: text; background-clip: text; color: transparent; } /* ---------- meta-theme-color для мобильных браузеров ---------- */ /* (управляется через JS в blade, тут только напоминание) */ /* ---------- sticky-cta (mobile "Получить карту" внизу) ---------- */ /* На dark — тёмная стеклянная плашка. На light — светлая с тонким брендовым цветовым подмесом, чтобы вписаться в палитру под gradient-кнопкой внутри. */ [data-theme="light"] .sticky-cta { background: radial-gradient(ellipse 70% 100% at 0% 50%, rgba(31,191,160,.14), transparent 60%), radial-gradient(ellipse 70% 100% at 100% 50%, rgba(143,90,224,.14), transparent 60%), rgba(248,250,253,.88); backdrop-filter: blur(20px) saturate(1.3); -webkit-backdrop-filter: blur(20px) saturate(1.3); border: 1px solid rgba(79,111,229,.22); box-shadow: 0 14px 36px -10px rgba(79,111,229,.22), 0 6px 16px -8px rgba(15,20,36,.14); } /* ---------- pricing horizontal scroll fade (mobile) ---------- */ /* Справа от scroll-snap карточек — fade-overlay, на dark тёмный, на light нужен светлый */ [data-theme="light"] .pricing .container::after { background: linear-gradient(270deg, rgba(248,250,253,.92) 12%, rgba(248,250,253,0)); } /* ---------- mobile drawer / menu ---------- */ [data-theme="light"] .drawer, [data-theme="light"] .mobile-menu, [data-theme="light"] [class*="drawer"] { background: rgba(248,250,253,.98); backdrop-filter: blur(24px) saturate(1.3); -webkit-backdrop-filter: blur(24px) saturate(1.3); } /* ---------- post tag overlay на обложках блога ---------- */ [data-theme="light"] .post__tag { background: rgba(248,250,253,.85); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border: 1px solid var(--line-2); color: var(--ink); } /* ---------- CTA box (большой блок с "Получить карту" перед футером) ---------- */ [data-theme="light"] .cta__box { background: radial-gradient(ellipse at 20% 20%, rgba(31,191,160,.10), transparent 50%), radial-gradient(ellipse at 80% 80%, rgba(143,90,224,.10), transparent 50%), #FFFFFF; border: 1px solid var(--line-2); } [data-theme="light"] .cta__box::before { background-image: linear-gradient(rgba(15,20,36,.04) 1px, transparent 1px), linear-gradient(90deg, rgba(15,20,36,.04) 1px, transparent 1px); } [data-theme="light"] .cta__box h2 em { background: var(--g-text); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; } [data-theme="light"] .cta__box p { color: var(--ink-dim); } /* ---------- step__num (иконки шагов "Как это работает") ---------- */ /* На dark — тёмный круг + мятная цифра + мятный glow. На light — gradient-цветной круг (brand colors) + белая цифра + цветной glow. */ [data-theme="light"] .step__num { background: var(--g-primary); border: 1px solid rgba(79,111,229,.30); color: #FFFFFF; -webkit-text-fill-color: #FFFFFF; box-shadow: 0 12px 30px -8px rgba(79,111,229,.45), 0 4px 10px -2px rgba(31,191,160,.25), inset 0 1px 0 rgba(255,255,255,.40); } /* Соединительная линия между шагами — на dark тёмная, на light тонкая брендовая */ [data-theme="light"] .steps::before { background: linear-gradient(90deg, transparent, rgba(79,111,229,.30) 20%, rgba(79,111,229,.30) 80%, transparent); }