/* ============================================================ SFS — Light theme overlay (SATURATED) Activates when . Overrides dark colors via specific selectors — keeps style.css untouched. Palette: • Background: pure white (#ffffff) with cyan-tinted bands • Text primary: #0a1628 (deep navy, near-black) • Text body: #334155 (slate-700) • Text muted: #64748b (slate-500) • Accent cyan: #0891b2 (cyan-600) — saturated, readable • Accent cyan deep: #0e7490 (cyan-700) • Accent cyan vivid: #06b6d4 (cyan-500) • Violet: #7c3aed (violet-600) ============================================================ */ body[data-theme="light"] { background: #ffffff !important; color: #0a1628 !important; } /* ───────────── Hero / typography ───────────── */ body[data-theme="light"] h1, body[data-theme="light"] #hero-left h1, body[data-theme="light"] .block-h2, body[data-theme="light"] #block2-title h2 { background: linear-gradient(135deg, #0a1628 20%, #0891b2 70%, #7c3aed 100%) !important; -webkit-background-clip: text !important; background-clip: text !important; -webkit-text-fill-color: transparent !important; color: transparent !important; } body[data-theme="light"] .subtitle, body[data-theme="light"] .block-sub, body[data-theme="light"] #block2-title p { color: #334155 !important; } body[data-theme="light"] .panel-name { color: #0a1628 !important; } body[data-theme="light"] .panel-row { color: #1e293b !important; } body[data-theme="light"] .panel-label { color: #64748b !important; } /* ───────────── Glass panels ───────────── */ body[data-theme="light"] .glass-panel { background: rgba(255,255,255,0.92) !important; border: 1px solid rgba(8,145,178,0.28) !important; box-shadow: 0 8px 30px rgba(8,145,178,0.14) !important; } /* ───────────── Section backgrounds ───────────── */ body[data-theme="light"] #block-team, body[data-theme="light"] #block-individual, body[data-theme="light"] #block-about, body[data-theme="light"] #block-faq, body[data-theme="light"] #block-pricing { background: #ffffff !important; } /* ────────────────────────────────────────────────────────────── BLOCK-INDIVIDUAL — monochromatic cyan ramp (vivid, juicy) One hue (cyan), many tones, zero gray. ────────────────────────────────────────────────────────────── */ body[data-theme="light"] #block-individual { background: #ffffff !important; } body[data-theme="light"] #block-individual .block-tag { background: rgba(8,145,178,0.16) !important; color: #0e7490 !important; border-color: rgba(8,145,178,0.6) !important; } /* Glass panels inside this block — soft cyan-tinted surface, vivid border */ body[data-theme="light"] #block-individual .glass-panel, body[data-theme="light"] #block-individual .ind-panel { background: linear-gradient(180deg, #ecfeff 0%, #cffafe 100%) !important; border: 1px solid rgba(8,145,178,0.5) !important; box-shadow: 0 14px 40px rgba(8,145,178,0.22), 0 0 0 1px rgba(255,255,255,0.7) inset !important; } body[data-theme="light"] #block-individual .panel-name { color: #0a1628 !important; } body[data-theme="light"] .panel-row { color: #0c4a6e !important; } body[data-theme="light"] #block-individual .panel-label, body[data-theme="light"] #block-individual .panel-meta { color: #0e7490 !important; } /* Stat boxes — light cyan tint background, deep cyan label */ body[data-theme="light"] #block-individual .ind-stat, body[data-theme="light"] #block-individual .ind-stat-box, body[data-theme="light"] #block-individual .ind-sensor-row, body[data-theme="light"] #block-individual .ai-analysis-row, body[data-theme="light"] #block-individual .ai-analysis-card { background: linear-gradient(180deg, #ffffff 0%, #a5f3fc 100%) !important; border: 1px solid rgba(8,145,178,0.45) !important; box-shadow: 0 2px 8px rgba(8,145,178,0.1) !important; } body[data-theme="light"] #block-individual .ind-stat-label, body[data-theme="light"] #block-individual .ind-sensor-row-label, body[data-theme="light"] #block-individual .ai-analysis-label { color: #0e7490 !important; } body[data-theme="light"] #block-individual .ind-stat-val, body[data-theme="light"] #block-individual .ind-stat-val span, body[data-theme="light"] #block-individual .ind-sensor-row-val, body[data-theme="light"] #block-individual .ai-analysis-comment, body[data-theme="light"] #block-individual .ai-analysis-value { color: #083344 !important; } body[data-theme="light"] #block-individual .ind-stat-val small, body[data-theme="light"] #block-individual .ind-sensor-row-val small, body[data-theme="light"] #block-individual .ind-stat-unit, body[data-theme="light"] #block-individual .ind-sensor-row-unit { color: #0891b2 !important; } /* Coordinates band — vivid cyan */ body[data-theme="light"] #block-individual .ind-coords-row { color: #0e7490 !important; border-top-color: rgba(8,145,178,0.3) !important; border-bottom-color: rgba(8,145,178,0.3) !important; } /* AI bars — vivid cyan ladder */ body[data-theme="light"] #block-individual .ai-bar { background: #06b6d4 !important; } body[data-theme="light"] #block-individual .ai-bar:nth-child(odd) { background: #0891b2 !important; } /* Sensor cards — saturated cyan tint */ body[data-theme="light"] #block-individual .sensor-card { background: linear-gradient(180deg, #ffffff 0%, #cffafe 100%) !important; border: 1px solid rgba(8,145,178,0.5) !important; box-shadow: 0 10px 28px rgba(8,145,178,0.18) !important; } body[data-theme="light"] #block-individual .sensor-device-img { background: linear-gradient(180deg, rgba(8,145,178,0.18) 0%, rgba(8,145,178,0.04) 100%) !important; border-right-color: rgba(8,145,178,0.3) !important; } body[data-theme="light"] #block-individual .sensor-name { color: #0e7490 !important; } body[data-theme="light"] #block-individual .sensor-val { color: #083344 !important; } body[data-theme="light"] #block-individual .sensor-val small { color: #0891b2 !important; } body[data-theme="light"] #block-individual .sensor-icon { background: rgba(8,145,178,0.22) !important; border-color: rgba(8,145,178,0.6) !important; color: #0e7490 !important; } body[data-theme="light"] #block-individual .sensor-bt-col { border-left-color: rgba(8,145,178,0.3) !important; } /* Sport selector chip + buttons inside block */ body[data-theme="light"] #block-individual .sport-current { color: #0a1628 !important; } body[data-theme="light"] #block-individual .sport-nav { color: #0891b2 !important; } body[data-theme="light"] #block-individual .sport-nav:hover { color: #0e7490 !important; } body[data-theme="light"] #block-individual #sport-label { background: linear-gradient(135deg, #0891b2, #06b6d4) !important; color: #ffffff !important; border-color: rgba(8,145,178,0.6) !important; box-shadow: 0 4px 14px rgba(8,145,178,0.4) !important; } /* AI rec callouts inside the block */ body[data-theme="light"] #block-individual .ai-rec { background: linear-gradient(135deg, rgba(207,250,254,0.9), rgba(165,243,252,0.7)) !important; border-color: rgba(8,145,178,0.45) !important; } body[data-theme="light"] #block-individual .ai-rec p { color: #0c4a6e !important; } /* Soft band gradients between sections (the horizontal divider lines) */ body[data-theme="light"] #block-team::before, body[data-theme="light"] #block-individual::before, body[data-theme="light"] #block-about::before, body[data-theme="light"] #block-pricing::before { background: linear-gradient(90deg, transparent, rgba(8,145,178,0.55), transparent) !important; } /* ───────────── Glow orbs (more vivid in light mode now) ───────────── */ body[data-theme="light"] .glow-orb--1 { background: rgba(6,182,212,0.18) !important; } body[data-theme="light"] .glow-orb--2 { background: rgba(124,58,237,0.14) !important; } /* ───────────── Tags / badges / chips ───────────── */ body[data-theme="light"] .block-tag { background: rgba(8,145,178,0.12) !important; color: #0e7490 !important; border-color: rgba(8,145,178,0.5) !important; } body[data-theme="light"] .ai-rec { background: rgba(8,145,178,0.08) !important; border-color: rgba(8,145,178,0.32) !important; } body[data-theme="light"] .ai-rec p { color: #334155 !important; } /* ───────────── Stat boxes / sensor rows ───────────── */ body[data-theme="light"] .ind-stat-box, body[data-theme="light"] .ind-sensor-row, body[data-theme="light"] .ai-analysis-card { background: rgba(255,255,255,0.85) !important; border-color: rgba(8,145,178,0.25) !important; } body[data-theme="light"] .ind-stat-label, body[data-theme="light"] .ind-sensor-row-label, body[data-theme="light"] .ai-analysis-label { color: #475569 !important; } body[data-theme="light"] .ind-stat-value, body[data-theme="light"] .ind-stat-val, body[data-theme="light"] .ind-stat-val span, body[data-theme="light"] .ind-sensor-row-value, body[data-theme="light"] .ind-sensor-row-val, body[data-theme="light"] .ai-analysis-value { color: #0a1628 !important; } body[data-theme="light"] .ind-stat-unit, body[data-theme="light"] .ind-sensor-row-unit, body[data-theme="light"] .ind-stat-val small, body[data-theme="light"] .ind-sensor-row-val small { color: #64748b !important; } body[data-theme="light"] .ind-coords-row { color: #0891b2 !important; } /* Canvas-drawn device icons & GPS canvas — keep the invert trick but bump saturation so cyan reads vivid on white. */ body[data-theme="light"] .device-icon-canvas, body[data-theme="light"] .device-icon-canvas.flash-icon { filter: invert(1) hue-rotate(180deg) saturate(1.3) brightness(0.72) contrast(0.95) !important; opacity: 1 !important; mix-blend-mode: multiply !important; } /* Override the dark-mode flash keyframes with light-mode versions that keep the same motion but DON'T touch `filter` — so our theme filter above stays applied during the flash. */ @keyframes animWatchLight { 0% { transform: scale(1); } 15% { transform: scale(1.1); } 100% { transform: scale(1); } } @keyframes animPatchLight { 0% { transform: scale(1); } 25% { transform: scale(1.12); } 50% { transform: scale(0.96); } 75% { transform: scale(1.06); } 100% { transform: scale(1); } } @keyframes animLactateLight { 0% { transform: translateY(0) rotate(0); } 30% { transform: translateY(-8px) rotate(-5deg); } 60% { transform: translateY(3px) rotate(3deg); } 100% { transform: translateY(0) rotate(0); } } @keyframes animThermoLight { 0% { transform: scaleY(1); } 30% { transform: scaleY(1.08) translateY(-3px); } 60% { transform: scaleY(0.96); } 100% { transform: scaleY(1); } } @keyframes animInsoleLight { 0% { transform: translateX(0); } 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } 100% { transform: translateX(0); } } @keyframes animCrankLight { 0% { transform: rotate(0deg); } 30% { transform: rotate(60deg) scale(1.1); } 100% { transform: rotate(0deg); } } body[data-theme="light"] .flash-icon[data-icon="watch"] { animation: animWatchLight 0.6s ease-out !important; } body[data-theme="light"] .flash-icon[data-icon="patch"] { animation: animPatchLight 0.6s ease-in-out !important; } body[data-theme="light"] .flash-icon[data-icon="lactate"] { animation: animLactateLight 0.5s ease-out !important; } body[data-theme="light"] .flash-icon[data-icon="thermo"] { animation: animThermoLight 0.5s ease-out !important; } body[data-theme="light"] .flash-icon[data-icon="insole"] { animation: animInsoleLight 0.4s ease-in-out !important; } body[data-theme="light"] .flash-icon[data-icon="crank"] { animation: animCrankLight 0.5s ease-out !important; } /* Center GPS/satellite block — теперь canvas рисуется в светлой палитре нативно (см. block3.js applyGpsTheme) */ body[data-theme="light"] #gps-sat-canvas { filter: none !important; mix-blend-mode: normal !important; opacity: 1 !important; } /* Wave lines */ body[data-theme="light"] .sensor-wave-canvas { filter: invert(1) hue-rotate(180deg) saturate(1.4) brightness(0.85) !important; mix-blend-mode: multiply !important; } /* Sensor card surface */ body[data-theme="light"] .sensor-card { background: rgba(255,255,255,0.85) !important; border-color: rgba(8,145,178,0.28) !important; } body[data-theme="light"] .sensor-device-img { background: linear-gradient(180deg, rgba(8,145,178,0.12) 0%, rgba(8,145,178,0.03) 100%) !important; border-right-color: rgba(8,145,178,0.22) !important; } body[data-theme="light"] .sensor-name { color: #475569 !important; } body[data-theme="light"] .sensor-val { color: #0a1628 !important; } body[data-theme="light"] .sensor-val small { color: #64748b !important; } body[data-theme="light"] .sensor-icon { background: rgba(8,145,178,0.14) !important; border-color: rgba(8,145,178,0.5) !important; } body[data-theme="light"] .sensor-bt-col--idle svg, body[data-theme="light"] .sensor-bt-col--idle .sensor-bt-label, body[data-theme="light"] .sensor-bt-col--idle .sensor-bt-status { color: rgba(8,145,178,0.5) !important; } /* Sport label chip */ body[data-theme="light"] #sport-label { background: rgba(255,255,255,0.95) !important; color: #0e7490 !important; border-color: rgba(8,145,178,0.5) !important; } /* Buttons */ body[data-theme="light"] .btn-secondary { color: #0e7490 !important; border-color: rgba(8,145,178,0.55) !important; } body[data-theme="light"] .btn-secondary:hover { background: rgba(8,145,178,0.1) !important; border-color: #0891b2 !important; } /* ============================================================ Site chrome (header / footer / topbar) ============================================================ */ body[data-theme="light"] .sfs-topbar { background: rgba(255,255,255,0.95) !important; border-bottom-color: rgba(8,145,178,0.22) !important; } body[data-theme="light"] .sfs-lang { color: #0a1628 !important; } body[data-theme="light"] .sfs-lang:hover { background: rgba(8,145,178,0.1) !important; } body[data-theme="light"] .sfs-lang-list { background: #fff !important; border-color: rgba(8,145,178,0.25) !important; box-shadow: 0 8px 24px rgba(8,145,178,0.2) !important; } body[data-theme="light"] .sfs-lang-list button { color: #0a1628 !important; } body[data-theme="light"] .sfs-lang-list button:hover { background: rgba(8,145,178,0.1) !important; color: #0e7490 !important; } body[data-theme="light"] .sfs-top-nav a { color: #334155 !important; } body[data-theme="light"] .sfs-top-nav a:hover { color: #0e7490 !important; background: rgba(8,145,178,0.08) !important; } body[data-theme="light"] .sfs-top-nav a.is-cta { color: #0e7490 !important; border-color: rgba(8,145,178,0.55) !important; } body[data-theme="light"] .sfs-top-nav a.is-cta:hover { background: rgba(8,145,178,0.14) !important; border-color: #0891b2 !important; } body[data-theme="light"] .sfs-header { background: rgba(255,255,255,0.85) !important; border-bottom-color: rgba(8,145,178,0.22) !important; } body[data-theme="light"] .sfs-header.is-scrolled { background: rgba(255,255,255,0.97) !important; border-bottom-color: rgba(8,145,178,0.4) !important; box-shadow: 0 4px 20px rgba(8,145,178,0.14) !important; } body[data-theme="light"] .sfs-brand { color: #0a1628 !important; } body[data-theme="light"] .sfs-brand-mark { color: #fff !important; } body[data-theme="light"] .sfs-brand-name em { color: #0891b2 !important; } body[data-theme="light"] .sfs-nav a { color: #0a1628 !important; } body[data-theme="light"] .sfs-nav a:hover { color: #0e7490 !important; background: rgba(8,145,178,0.1) !important; } body[data-theme="light"] .sfs-nav a.active { color: #0891b2 !important; } body[data-theme="light"] .sfs-icon-btn { color: #0a1628 !important; border-color: rgba(8,145,178,0.3) !important; background: rgba(255,255,255,0.7) !important; } body[data-theme="light"] .sfs-icon-btn:hover { border-color: rgba(8,145,178,0.6) !important; background: rgba(8,145,178,0.1) !important; color: #0e7490 !important; } body[data-theme="light"] .sfs-cart-count { background: #0891b2 !important; color: #fff !important; } body[data-theme="light"] .sfs-burger { color: #0a1628 !important; border-color: rgba(8,145,178,0.3) !important; } /* Footer */ body[data-theme="light"] .sfs-footer { background: linear-gradient(180deg, transparent 0%, rgba(8,145,178,0.06) 30%, #ecfeff 100%) !important; border-top-color: rgba(8,145,178,0.22) !important; } body[data-theme="light"] .sfs-foot-panel h4 { color: #0e7490 !important; border-bottom-color: rgba(8,145,178,0.25) !important; } body[data-theme="light"] .sfs-foot-panel li { color: #475569 !important; } body[data-theme="light"] .sfs-foot-panel a { color: #475569 !important; } body[data-theme="light"] .sfs-foot-panel a:hover { color: #0891b2 !important; } body[data-theme="light"] .sfs-foot-payments span { background: rgba(255,255,255,0.85) !important; border-color: rgba(8,145,178,0.25) !important; color: #475569 !important; } body[data-theme="light"] .sfs-copyright { background: rgba(255,255,255,0.7) !important; border-top-color: rgba(8,145,178,0.22) !important; } body[data-theme="light"] .sfs-copyright p { color: #475569 !important; } body[data-theme="light"] .sfs-copyright a { color: #0891b2 !important; } body[data-theme="light"] .sfs-social a { color: #475569 !important; border-color: rgba(8,145,178,0.3) !important; background: rgba(255,255,255,0.7) !important; } body[data-theme="light"] .sfs-social a:hover { color: #fff !important; background: #0891b2 !important; border-color: #0891b2 !important; } body[data-theme="light"] .sfs-scroll-top { background: linear-gradient(135deg, #0891b2, #7c3aed) !important; color: #fff !important; box-shadow: 0 8px 24px rgba(8,145,178,0.5) !important; } /* ============================================================ Theme toggle button (sun/moon) ============================================================ */ .sfs-theme-toggle { position: relative; width: 44px; height: 22px; border-radius: 11px; border: 1px solid var(--sfs-line); background: rgba(255,255,255,0.04); cursor: pointer; padding: 0; margin-right: 14px; display: inline-flex; align-items: center; transition: background .25s, border-color .25s; vertical-align: middle; } .sfs-theme-toggle:hover { border-color: rgba(121,182,200,0.45); } .sfs-theme-toggle .knob { position: absolute; top: 1px; left: 1px; width: 18px; height: 18px; border-radius: 50%; background: linear-gradient(135deg, #79b6c8, #7b2ff7); display: grid; place-items: center; color: #060b14; transition: transform .35s cubic-bezier(.4,0,.2,1), background .35s; box-shadow: 0 2px 6px rgba(0,0,0,0.3); } .sfs-theme-toggle .knob svg { width: 11px; height: 11px; transition: opacity .25s; } .sfs-theme-toggle .icon-sun { opacity: 0; position: absolute; } .sfs-theme-toggle .icon-moon { opacity: 1; } body[data-theme="light"] .sfs-theme-toggle { background: rgba(8,145,178,0.14) !important; border-color: rgba(8,145,178,0.45) !important; } body[data-theme="light"] .sfs-theme-toggle .knob { transform: translateX(22px); background: linear-gradient(135deg, #ffd166, #ff9f43); color: #fff; } body[data-theme="light"] .sfs-theme-toggle .icon-sun { opacity: 1; } body[data-theme="light"] .sfs-theme-toggle .icon-moon { opacity: 0; } /* ============================================================ BLOCK 4 — ABOUT (cards + stats) ============================================================ */ body[data-theme="light"] #block-about { background: linear-gradient(180deg, #ecfeff 0%, #ffffff 100%) !important; } body[data-theme="light"] #block-about::before { background: linear-gradient(90deg, transparent, rgba(8,145,178,0.55), transparent) !important; } /* Stats numbers — gradient was white→cyan, invisible on white */ body[data-theme="light"] .about-stat-num { background: linear-gradient(135deg, #0a1628 10%, #0891b2 60%, #7c3aed 100%) !important; -webkit-background-clip: text !important; background-clip: text !important; -webkit-text-fill-color: transparent !important; color: transparent !important; } body[data-theme="light"] .about-stat-label { color: #475569 !important; } body[data-theme="light"] .about-stat-sep { background: rgba(8,145,178,0.32) !important; } body[data-theme="light"] .about-stats { border-bottom-color: rgba(8,145,178,0.25) !important; } /* Cards */ body[data-theme="light"] .about-card { background: #ffffff !important; border-color: rgba(8,145,178,0.25) !important; box-shadow: 0 4px 18px rgba(8,145,178,0.1) !important; } body[data-theme="light"] .about-card:hover { border-color: rgba(8,145,178,0.55) !important; box-shadow: 0 16px 48px rgba(8,145,178,0.2) !important; } body[data-theme="light"] .about-icon-cv { background: linear-gradient(180deg, #ecfeff, #f0f9ff) !important; border-bottom-color: rgba(8,145,178,0.18) !important; /* canvas теперь рисует в светлой палитре нативно (см. block4-about.js aboutTheme) */ filter: none; } body[data-theme="light"] .about-card-title { color: #0a1628 !important; } body[data-theme="light"] .about-card-text { color: #334155 !important; } body[data-theme="light"] .about-tagline { background: linear-gradient(135deg, #0a1628 20%, #0891b2 70%, #7c3aed 100%) !important; -webkit-background-clip: text !important; background-clip: text !important; -webkit-text-fill-color: transparent !important; color: transparent !important; } /* ============================================================ BLOCK 4.5 — FAQ ============================================================ */ body[data-theme="light"] #block-faq { background: #ffffff !important; } body[data-theme="light"] .faq-item { background: #ffffff !important; border-color: rgba(8,145,178,0.25) !important; box-shadow: 0 4px 18px rgba(8,145,178,0.08) !important; } body[data-theme="light"] .faq-item:hover { border-color: rgba(8,145,178,0.55) !important; } body[data-theme="light"] .faq-item.active { border-color: #0891b2 !important; box-shadow: 0 8px 28px rgba(8,145,178,0.2) !important; } body[data-theme="light"] .faq-question h3 { color: #0a1628 !important; } body[data-theme="light"] .faq-icon { color: #0891b2 !important; } body[data-theme="light"] .faq-item.active .faq-icon { color: #7c3aed !important; } body[data-theme="light"] .faq-answer { background: rgba(8,145,178,0.06) !important; } body[data-theme="light"] .faq-answer p { color: #334155 !important; } /* ============================================================ BLOCK 5 — PRICING ============================================================ */ body[data-theme="light"] .pricing-card { background: #ffffff !important; border: 1px solid rgba(8,145,178,0.25) !important; box-shadow: 0 4px 18px rgba(8,145,178,0.08) !important; } body[data-theme="light"] .pricing-card:hover { border-color: rgba(8,145,178,0.5) !important; box-shadow: 0 16px 48px rgba(8,145,178,0.18) !important; } body[data-theme="light"] .pricing-card--featured { background: linear-gradient(180deg, #ecfeff 0%, #ffffff 60%) !important; border: 2px solid #0891b2 !important; box-shadow: 0 0 40px rgba(8,145,178,0.22) !important; } body[data-theme="light"] .pricing-card--featured:hover { box-shadow: 0 16px 56px rgba(8,145,178,0.3) !important; } body[data-theme="light"] .pricing-badge { background: linear-gradient(135deg, #0891b2, #7c3aed) !important; color: #ffffff !important; } body[data-theme="light"] .pricing-plan { color: #0a1628 !important; } body[data-theme="light"] .pricing-desc { color: #334155 !important; } body[data-theme="light"] .pricing-amount { color: #0a1628 !important; } body[data-theme="light"] .pricing-currency, body[data-theme="light"] .pricing-period { color: #475569 !important; } body[data-theme="light"] .pricing-features li { color: #1e293b !important; } body[data-theme="light"] .pricing-features li.pf-dim { color: #94a3b8 !important; opacity: 0.7 !important; } body[data-theme="light"] .pf-check { color: #059669 !important; } body[data-theme="light"] .pf-cross { color: #94a3b8 !important; } body[data-theme="light"] .pricing-btn--primary { background: linear-gradient(135deg, #0891b2 0%, #06b6d4 100%) !important; color: #ffffff !important; box-shadow: 0 4px 14px rgba(8,145,178,0.35) !important; } body[data-theme="light"] .pricing-btn--primary:hover { filter: brightness(1.08); box-shadow: 0 8px 22px rgba(8,145,178,0.45) !important; } body[data-theme="light"] .pricing-btn--outline { background: transparent !important; border: 1px solid rgba(8,145,178,0.55) !important; color: #0e7490 !important; } body[data-theme="light"] .pricing-btn--outline:hover { border-color: #0891b2 !important; background: rgba(8,145,178,0.08) !important; color: #0891b2 !important; } body[data-theme="light"] .pricing-note { color: #475569 !important; } /* Billing toggle — light theme */ body[data-theme="light"] .billing-toggle { background: #ffffff !important; border-color: rgba(8,145,178,0.35) !important; box-shadow: 0 4px 16px rgba(8,145,178,0.10) !important; } body[data-theme="light"] .billing-opt { color: #475569 !important; } body[data-theme="light"] .billing-opt:hover { color: #0a1628 !important; } body[data-theme="light"] .billing-opt.is-active { color: #ffffff !important; } body[data-theme="light"] .billing-toggle .billing-slider { background: linear-gradient(135deg, #0891b2, #7c3aed) !important; box-shadow: 0 4px 14px rgba(8,145,178,0.45) !important; } body[data-theme="light"] .billing-save { background: rgba(5,150,105,0.14) !important; color: #059669 !important; border-color: rgba(5,150,105,0.45) !important; } body[data-theme="light"] .billing-opt.is-active .billing-save { background: rgba(255,255,255,0.28) !important; color: #ffffff !important; border-color: rgba(255,255,255,0.5) !important; } /* Pricing canvas icons (athlete/club/organizer) — на белом фоне инверсия даёт мутный цвет. Прямой фильтр на multiply с насыщением — читается чище. */ body[data-theme="light"] .pricing-icon-cv { filter: invert(1) hue-rotate(180deg) saturate(1.6) brightness(0.85) contrast(1.05); mix-blend-mode: multiply; } /* Smooth color transitions globally */ body, .sfs-header, .sfs-topbar, .sfs-footer, .sfs-copyright, .glass-panel, .ind-stat-box, .ind-sensor-row, .ai-analysis-card, .sfs-nav a, .sfs-top-nav a, .sfs-foot-panel a, .sfs-icon-btn, .sfs-social a { transition: background-color .35s ease, color .35s ease, border-color .35s ease, box-shadow .35s ease; } /* Newsletter */ body[data-theme="light"] #block-newsletter { background: #f8fbfd !important; } body[data-theme="light"] .newsletter-copy h2 { color: #0a1628 !important; } body[data-theme="light"] .newsletter-copy p, body[data-theme="light"] .newsletter-consent { color: #475569 !important; } body[data-theme="light"] .newsletter-form { background: #ffffff !important; border: 1px solid rgba(8,145,178,0.24) !important; box-shadow: 0 4px 18px rgba(8,145,178,0.08) !important; } body[data-theme="light"] .newsletter-form label { color: #0f172a !important; } body[data-theme="light"] .newsletter-row input { background: #ffffff !important; border-color: rgba(8,145,178,0.28) !important; color: #0f172a !important; } body[data-theme="light"] .newsletter-status { color: #475569 !important; } body[data-theme="light"] .newsletter-status.is-success { color: #047857 !important; } body[data-theme="light"] .newsletter-status.is-error { color: #b42318 !important; }