/* ============================================================ Syncann — Light theme (saúde integrativa) Off-white + lavanda sutil + mint. Textos dark ink. Aplica-se a . ============================================================ */ .theme-light { --color-bg: #fbfaff; --color-bg-deep: #fbfaff; --color-text: var(--ink-900); --color-text-muted: var(--ink-600); --color-text-inverse: var(--ink-900); --color-text-muted-inverse: var(--ink-600); --color-border: rgba(10, 6, 19, 0.08); --color-border-inverse: rgba(10, 6, 19, 0.08); --grad-aurora-light: radial-gradient(1100px 700px at 20% 10%, rgba(196, 181, 253, 0.55) 0%, transparent 60%), radial-gradient(900px 600px at 85% 90%, rgba(134, 239, 172, 0.5) 0%, transparent 55%), #fbfaff; --grad-lavender-mint: linear-gradient(180deg, #fbfaff 0%, #f0ebff 50%, #e8f7ee 100%); --grad-paper-soft: linear-gradient(180deg, #ffffff 0%, #faf7ff 100%); --grad-mint-soft: linear-gradient(180deg, #f7fdf9 0%, #ecf9f0 100%); background: #fbfaff; color: var(--ink-900); } /* Subtle grain pattern on body */ .theme-light::before { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 1; opacity: 0.03; mix-blend-mode: multiply; background-image: url("data:image/svg+xml;utf8,"); background-size: 240px 240px; } .theme-light .noise-overlay { display: none; } /* ============== NAVBAR ============== */ .theme-light .navbar.is-scrolled { background: rgba(251, 250, 255, 0.85); border-bottom: 1px solid var(--color-border); } .theme-light .navbar-brand { color: var(--ink-900); } .theme-light .navbar-links a { color: var(--ink-700); } .theme-light .navbar-toggle { border-color: var(--color-border); color: var(--ink-700); } .theme-light .mobile-menu { background: var(--grad-lavender-mint); } .theme-light .mobile-menu a { color: var(--ink-900); } /* ============== HERO ============== */ .theme-light .hero { background: var(--grad-aurora-light); color: var(--ink-900); } .theme-light .hero-orb-1 { background: radial-gradient(closest-side, rgba(167, 139, 250, 0.5), transparent 70%); opacity: 0.7; } .theme-light .hero-orb-2 { background: radial-gradient(closest-side, rgba(74, 222, 128, 0.45), transparent 70%); opacity: 0.7; } .theme-light .hero-orb-3 { background: radial-gradient(closest-side, rgba(196, 181, 253, 0.5), transparent 70%); opacity: 0.6; } .theme-light .hero-eyebrow { color: var(--violet-700); border-color: rgba(91, 33, 182, 0.22); background: rgba(237, 233, 254, 0.7); } .theme-light .hero-eyebrow-dot { background: var(--green-600); box-shadow: 0 0 10px var(--green-500); } .theme-light .hero-title { color: var(--ink-950); } .theme-light .hero-title .green { color: var(--green-700); } .theme-light .hero-sub { color: var(--ink-600); opacity: 1; } .theme-light .hero-trust { color: var(--ink-500); } .theme-light .hero-trust-icon { color: var(--green-600); } /* ============== BUTTONS ============== */ .theme-light .btn-secondary { border-color: var(--color-border); color: var(--ink-700); background: rgba(255, 255, 255, 0.4); backdrop-filter: var(--blur-sm); -webkit-backdrop-filter: var(--blur-sm); } .theme-light .btn-secondary:hover { background: rgba(139, 92, 246, 0.08); border-color: var(--violet-500); color: var(--violet-700); } /* ============== TRUST STRIP ============== */ .theme-light .trust-strip { background: var(--pure); color: var(--ink-600); border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); } .theme-light .trust-strip-item { color: var(--ink-700); } /* ============== QUEM SOMOS ============== */ .theme-light .who { background: var(--grad-lavender-mint); color: var(--ink-900); } .theme-light .who::before { background: radial-gradient(closest-side, rgba(139, 92, 246, 0.16), transparent 70%); } .theme-light .who-visual { background: var(--violet-100); border: 1px solid var(--color-border); } .theme-light .who-visual::before { background: linear-gradient(135deg, rgba(167, 139, 250, 0.25) 0%, rgba(134, 239, 172, 0.2) 100%); mix-blend-mode: multiply; } .theme-light .who-visual::after { background: radial-gradient(closest-side, transparent 55%, rgba(250, 248, 255, 0.35) 100%); } .theme-light .who-visual img, .theme-light .who-visual video { mix-blend-mode: multiply; opacity: 0.9; } .theme-light .who-heading .eyebrow { color: var(--violet-700); } .theme-light .who-lead { color: var(--ink-700); } .theme-light .who-principle { background: rgba(255, 255, 255, 0.7); border-color: var(--color-border); } .theme-light .who-principle:hover { border-color: var(--violet-500); background: rgba(237, 233, 254, 0.55); } .theme-light .who-principle-dot { background: var(--green-600); box-shadow: 0 0 6px var(--green-500); } .theme-light .who-principle h4 { color: var(--ink-900); } .theme-light .who-principle p { color: var(--ink-600); } /* ============== VERTICAIS ============== */ .theme-light .verticals { background: var(--paper); color: var(--ink-900); } .theme-light .verticals::before { background: radial-gradient(700px 400px at 20% 20%, rgba(196, 181, 253, 0.35) 0%, transparent 55%), radial-gradient(700px 500px at 85% 80%, rgba(134, 239, 172, 0.3) 0%, transparent 55%); } .theme-light .verticals-heading .eyebrow { color: var(--violet-700); } /* Darker signature gradient in light theme for AA contrast */ .theme-light .text-gradient { background: linear-gradient(135deg, #5b21b6 0%, #166534 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } .theme-light .hero-title .green, .theme-light .academy-hero-title .green { color: var(--green-700); } .theme-light .vertical-card { background: var(--pure); border: 1px solid var(--color-border); color: var(--ink-900); } .theme-light .vertical-card::before { opacity: 0.06; } .theme-light .vertical-card:hover { box-shadow: 0 32px 64px -20px rgba(91, 33, 182, 0.18), 0 0 56px -16px var(--card-accent); } .theme-light .vertical-card:hover::before { opacity: 0.14; } .theme-light .vertical-card-desc { color: var(--ink-600); } .theme-light .vertical-card-cta { color: var(--ink-900); border-top: 1px solid var(--color-border); } /* ============== CONNECT PREVIEW ============== */ .theme-light .connect-preview { background: var(--grad-paper-soft); } /* ============== PRÉ-CADASTRO ============== */ .theme-light .prereg { background: var(--grad-mint-soft); color: var(--ink-900); } .theme-light .prereg::before { background: radial-gradient(closest-side, rgba(139, 92, 246, 0.15), transparent 70%); } .theme-light .prereg::after { background: radial-gradient(closest-side, rgba(34, 197, 94, 0.12), transparent 70%); } .theme-light .prereg-head .eyebrow { color: var(--green-700); } .theme-light .prereg-head p { color: var(--ink-700); } .theme-light .prereg-segment { background: var(--pure); border: 1px solid var(--color-border); color: var(--ink-900); } .theme-light .prereg-segment::before { opacity: 0.05; } .theme-light .prereg-segment:hover { box-shadow: 0 24px 48px -20px rgba(91, 33, 182, 0.25), 0 0 48px -16px var(--seg-color); } .theme-light .prereg-segment:hover::before { opacity: 0.14; } .theme-light .prereg-segment p { color: var(--ink-600); } .theme-light .prereg-segment-action { color: var(--ink-900); } .theme-light .prereg-form { background: var(--pure); border: 1px solid var(--color-border); color: var(--ink-900); } .theme-light .prereg-form::before { opacity: 0.05; } .theme-light .prereg-form-lead { color: var(--ink-600); } .theme-light .prereg-back { color: var(--violet-700); } .theme-light .prereg-back:hover { color: var(--ink-900); } .theme-light .field-label { color: var(--ink-700); } .theme-light .field-input, .theme-light .field-select, .theme-light .field-textarea { background: var(--pure); border-color: var(--color-border); color: var(--ink-900); } .theme-light .field-input::placeholder, .theme-light .field-textarea::placeholder { color: var(--ink-400); } .theme-light .field-checkbox input[type="checkbox"] { background: var(--pure); border-color: var(--color-border); } .theme-light .field-checkbox input[type="checkbox"]:checked { background-image: url("data:image/svg+xml;utf8,"), var(--grad-signature); background-color: transparent; background-repeat: no-repeat; background-position: center; background-size: 14px 14px, 100% 100%; border-color: transparent; } .theme-light .prereg-submit-note { color: var(--ink-500); } .theme-light .prereg-success { background: rgba(255, 255, 255, 0.92); color: var(--ink-900); } .theme-light .prereg-success p { color: var(--ink-600); } /* ============== ACADEMY HERO ============== */ .theme-light .academy-hero { background: var(--grad-aurora-light); color: var(--ink-900); } .theme-light .academy-hero-orb-1 { background: radial-gradient(closest-side, rgba(167, 139, 250, 0.55), transparent 70%); opacity: 0.6; } .theme-light .academy-hero-orb-2 { background: radial-gradient(closest-side, rgba(134, 239, 172, 0.5), transparent 70%); opacity: 0.6; } .theme-light .academy-hero-title { color: var(--ink-950); } .theme-light .academy-hero-sub { color: var(--ink-600); } .theme-light .academy-hero-stats { border-top-color: var(--color-border); } .theme-light .academy-hero-stat-label { color: var(--ink-500); } /* ============== ACADEMY PITCH ============== */ .theme-light .academy-pitch { background: var(--grad-lavender-mint); color: var(--ink-900); } .theme-light .academy-pitch-head .eyebrow { color: var(--violet-700); } .theme-light .academy-pitch-head p { color: var(--ink-700); } /* ============== CATALOG ============== */ /* (catalog already uses paper bg — just a few tweaks) */ .theme-light .catalog-filter[aria-pressed="true"] { background: var(--pure); color: var(--violet-700); box-shadow: var(--shadow-sm); } /* ============== METHODOLOGY ============== */ .theme-light .methodology { background: var(--grad-paper-soft); color: var(--ink-900); } .theme-light .methodology::before { background: radial-gradient(700px 450px at 20% 10%, rgba(196, 181, 253, 0.3), transparent 55%), radial-gradient(700px 400px at 85% 90%, rgba(134, 239, 172, 0.25), transparent 55%); } .theme-light .methodology-head .eyebrow { color: var(--green-700); } .theme-light .methodology-head p { color: var(--ink-700); } .theme-light .methodology-step::before { background: var(--paper); border-color: var(--violet-500); box-shadow: 0 0 0 6px var(--paper); } .theme-light .methodology-step:last-child::before { border-color: var(--green-600); } .theme-light .methodology-step.is-visible::before { background: var(--violet-500); box-shadow: 0 0 0 6px var(--paper), 0 0 20px rgba(139, 92, 246, 0.45); } .theme-light .methodology-step:last-child.is-visible::before { background: var(--green-500); box-shadow: 0 0 0 6px var(--paper), 0 0 20px rgba(34, 197, 94, 0.45); } .theme-light .methodology-step-kicker { color: var(--violet-700); } .theme-light .methodology-step p { color: var(--ink-600); } /* ============== FAQ ============== */ /* (already light — just minor) */ .theme-light .faq { background: var(--paper); } .theme-light .faq-head .eyebrow { color: var(--violet-700); } .theme-light .faq-item { background: var(--pure); border-color: var(--color-border); } /* ============== ECOSYSTEM CTA (Academy) ============== */ .theme-light .ecosystem-cta { background: var(--grad-lavender-mint); color: var(--ink-900); } .theme-light .ecosystem-cta::before { background: radial-gradient(600px 400px at 20% 50%, rgba(139, 92, 246, 0.14), transparent 55%), radial-gradient(600px 400px at 80% 50%, rgba(34, 197, 94, 0.12), transparent 55%); } .theme-light .ecosystem-cta-copy .eyebrow { color: var(--violet-700); } .theme-light .ecosystem-cta-copy p { color: var(--ink-700); } .theme-light .ecosystem-cta-link { background: var(--pure); border: 1px solid var(--color-border); color: var(--ink-900); } .theme-light .ecosystem-cta-link:hover { box-shadow: 0 24px 48px -20px rgba(91, 33, 182, 0.18); } .theme-light .ecosystem-cta-link::before { opacity: 0.05; } .theme-light .ecosystem-cta-link:hover::before { opacity: 0.14; } .theme-light .ecosystem-cta-link p { color: var(--ink-600); } .theme-light .ecosystem-cta-link-arrow { color: var(--ink-500); } .theme-light .ecosystem-cta-link:hover .ecosystem-cta-link-arrow { color: var(--ink-900); } /* ============== FOOTER (mantém dark para contraste cinemático) ============== */ /* Sem overrides — footer dark funciona como "landing" cinematográfica no rodapé */ /* ============== EYEBROWS GENÉRICAS ============== */ .theme-light .eyebrow-inverse { color: var(--violet-700); } /* ============== CURSOR (dark dot on light bg — use mix-blend-mode difference) ============== */ /* já usa mix-blend-mode: difference, funciona em ambos os temas */