/* ══════════════════════════════════════════════════════════ Próvision — lp-kit components (extraido de lp-kit-guilherme.html) Requer design-tokens.css. Carregar DEPOIS dos outros css. ══════════════════════════════════════════════════════════ */ /* 1. Hooks base (opt-in via classe .lp-kit no ) */ .lp-kit, .lp-kit * { -webkit-font-smoothing: antialiased; box-sizing: border-box; } .lp-kit { font-family: var(--font-body-lp); background: var(--color-base); color: var(--color-txt); font-feature-settings: "ss01", "cv11"; } .lp-kit h1, .lp-kit h2, .lp-kit h3, .lp-kit h4, .lp-kit h5, .lp-kit h6 { font-family: var(--font-heading-lp); letter-spacing: -0.01em; } .lp-kit code, .lp-kit kbd, .lp-kit pre, .lp-kit .font-mono { font-family: var(--font-mono-lp); } /* 2. Accent line (shimmer text + amber underline) */ .accent-line { display: inline-block; position: relative; background: linear-gradient(90deg, var(--color-txt) 0%, var(--color-blue-light) 50%, var(--color-txt) 100%); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; animation: shimmer 6s ease-in-out infinite; } .accent-line::after { content: ''; position: absolute; bottom: -6px; left: 0; width: 100%; height: 2px; background: linear-gradient(90deg, transparent 0%, var(--color-amber) 30%, var(--color-amber) 70%, transparent 100%); border-radius: 2px; } /* 3. Glass tiers */ .glass-nav { background: var(--glass-nav-bg); backdrop-filter: blur(20px) saturate(180%); -webkit-backdrop-filter: blur(20px) saturate(180%); } .glass-card { background: var(--glass-card-bg); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid var(--glass-hairline); } .glass-soft { background: var(--glass-soft-bg); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } @supports not (backdrop-filter: blur(1px)) { .glass-nav, .glass-card, .glass-soft { background: var(--color-surface); } } /* 4. Card hover glow */ .card-glow { transition: box-shadow .35s ease, border-color .35s ease, transform .35s ease; } .card-glow:hover { box-shadow: var(--glow-blue-card); border-color: rgba(59, 130, 246, 0.25); transform: translateY(-2px); } /* 5. Button glows */ .btn-glow { box-shadow: var(--glow-blue-rest); transition: box-shadow .3s, transform .2s; } .btn-glow:hover { box-shadow: var(--glow-blue-hover); transform: translateY(-1px); } .btn-amber-glow { box-shadow: var(--glow-amber-rest); transition: box-shadow .3s, transform .2s; } .btn-amber-glow:hover { box-shadow: var(--glow-amber-hover); transform: translateY(-1px); } /* 6. Badge (JetBrains Mono uppercase pill) */ .badge { display: inline-flex; align-items: center; gap: 6px; font-size: .6875rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; padding: 5px 12px; border-radius: 100px; font-family: var(--font-mono-lp); } /* 7. Hero background (gradient + radial glow, imagem opt-in via --hero-image) */ .hero-bg { position: relative; background: linear-gradient(180deg, rgba(11,17,32,0.78) 0%, rgba(11,17,32,0.92) 55%, var(--color-base) 100%), var(--hero-image, none) center/cover no-repeat; } .hero-bg::before { content: ''; position: absolute; top: -10%; left: 50%; transform: translateX(-50%); width: 720px; height: 720px; background: radial-gradient(circle, rgba(59,130,246,0.13) 0%, transparent 65%); pointer-events: none; z-index: 0; } .hero-bg > * { position: relative; z-index: 1; } /* 8. FAQ accordion */ .faq-answer { display: none; } .faq-item.open .faq-answer { display: block; } .faq-item.open .faq-chevron { transform: rotate(180deg); } .faq-chevron { transition: transform .25s; } /* 9. Chat bubbles */ .bubble-user { background: var(--color-blue-deep); color: #F8FAFC; border-radius: 18px 18px 4px 18px; box-shadow: 0 4px 16px rgba(29,78,216,0.25); } .bubble-sofia { background: rgba(15,23,42,0.85); color: #E2E8F0; border-radius: 18px 18px 18px 4px; border: 1px solid rgba(148,163,184,0.08); } /* 10. Sofia pulse + typing */ .sofia-pulse-wrap { position: relative; display: inline-flex; align-items: center; justify-content: center; } .sofia-pulse-wrap::after { content: ''; position: absolute; inset: -3px; border-radius: 50%; border: 2px solid var(--color-blue); animation: sofiaPulseRing 2.5s ease-in-out infinite; pointer-events: none; opacity: 0; } .sofia-active .sofia-pulse-wrap::after { opacity: 0.6; } .sofia-typing-dot { animation: sofiaTyping 1.4s ease-in-out infinite; } /* 11. Scroll reveal (apenas opacity) */ .reveal { opacity: 0; transition: opacity .65s ease; } .reveal.visible { opacity: 1; } /* 12. Selection + scrollbar */ ::selection { background: rgba(59,130,246,0.35); color: #F8FAFC; } .lp-kit ::-webkit-scrollbar { width: 10px; height: 10px; } .lp-kit ::-webkit-scrollbar-track { background: var(--color-base); } .lp-kit ::-webkit-scrollbar-thumb { background: var(--color-surface-raised); border-radius: 8px; } .lp-kit ::-webkit-scrollbar-thumb:hover { background: #334155; } /* 13. Nav scrolled state (igual lp-kit) */ nav.scrolled { background: rgba(11,17,32,0.95); border-bottom-color: rgba(148,163,184,0.10); } /* 14. Keyframes */ @keyframes shimmer { 0%, 100% { background-position: -200% center; } 50% { background-position: 200% center; } } @keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } } @keyframes sofiaTyping { 0%, 100% { opacity: 0.25; } 50% { opacity: 0.85; } } @keyframes sofiaPulseRing { 0% { opacity: 0.6; transform: scale(1); } 50% { opacity: 0; transform: scale(1.65); } 100% { opacity: 0; transform: scale(1.65); } }