/* ============================================================ landing.css — Página pública (marketing) servida em oblivian.net antes do login. Conteúdo estático p/ SEO/AdSense. Tema da marca. ============================================================ */ .lp { --lp-bg:#0e0f15; --lp-surface:#16171f; --lp-surface2:#1d1f29; --lp-accent:#7c5cff; --lp-accent2:#b59cff; --lp-text:#e8eaf0; --lp-muted:#9aa0ad; --lp-border:#262834; background: var(--lp-bg); color: var(--lp-text); font-family: "Clash Display", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; /* body tem overflow:hidden (scroll do app vive em .view) → a landing rola por conta própria */ height: 100vh; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; } .lp * { box-sizing: border-box; } .lp a { color: inherit; text-decoration: none; } .lp__wrap { max-width: 1080px; margin: 0 auto; padding: 0 20px; } /* nav */ .lp-nav { position: sticky; top: 0; z-index: 10; backdrop-filter: blur(10px); background: rgba(14,15,21,0.8); border-bottom: 1px solid var(--lp-border); } .lp-nav__in { display: flex; align-items: center; gap: 12px; height: 64px; } .lp-brand { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 20px; } .lp-brand img { width: 34px; height: 34px; border-radius: 9px; } .lp-nav__sp { flex: 1; } .lp-nav__links { display: flex; gap: 22px; color: var(--lp-muted); font-size: 15px; } .lp-nav__links a:hover { color: var(--lp-text); } @media (max-width: 720px){ .lp-nav__links { display: none; } } .lp-lang { background: var(--lp-surface2); color: var(--lp-text); border: 1px solid var(--lp-border); border-radius: 999px; padding: 8px 12px; font-size: 14px; font-weight: 600; cursor: pointer; outline: none; } .lp-lang:hover { border-color: var(--lp-accent); } .lp-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 11px 20px; border-radius: 999px; font-weight: 700; font-size: 15px; cursor: pointer; border: none; transition: transform .15s ease, box-shadow .15s ease, background .15s ease; } .lp-btn--primary { background: linear-gradient(135deg, var(--lp-accent), #9a7bff); color: #fff; box-shadow: 0 8px 24px rgba(124,92,255,0.35); } .lp-btn--primary:hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(124,92,255,0.45); } .lp-btn--ghost { background: var(--lp-surface2); color: var(--lp-text); border: 1px solid var(--lp-border); } .lp-btn--ghost:hover { background: #24262f; } .lp-btn--lg { padding: 15px 30px; font-size: 17px; } /* hero */ .lp-hero { position: relative; text-align: center; padding: 80px 0 70px; } .lp-hero::before { content:""; position: absolute; inset: -10% 0 auto 0; height: 480px; z-index: 0; background: radial-gradient(60% 60% at 50% 0%, rgba(124,92,255,0.28), transparent 70%); pointer-events: none; } .lp-hero__in { position: relative; z-index: 1; } .lp-hero__mark { width: 120px; height: 120px; margin: 0 auto 18px; background: url(../assets/icon.svg) center/contain no-repeat; } .lp-hero h1 { font-size: clamp(34px, 6vw, 60px); line-height: 1.05; letter-spacing: -0.02em; margin: 0 0 18px; } .lp-hero h1 span { background: linear-gradient(120deg, var(--lp-accent), var(--lp-accent2)); -webkit-background-clip: text; background-clip: text; color: transparent; } .lp-hero p { font-size: clamp(16px, 2.4vw, 20px); color: var(--lp-muted); max-width: 640px; margin: 0 auto 32px; line-height: 1.55; } .lp-hero__cta { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; } .lp-hero__note { margin-top: 16px; color: var(--lp-muted); font-size: 13px; } /* sections */ .lp-sec { padding: 64px 0; } .lp-sec--alt { background: var(--lp-surface); border-top: 1px solid var(--lp-border); border-bottom: 1px solid var(--lp-border); } .lp-sec__h { text-align: center; font-size: clamp(26px, 4vw, 38px); letter-spacing: -0.02em; margin: 0 0 12px; } .lp-sec__sub { text-align: center; color: var(--lp-muted); max-width: 600px; margin: 0 auto 44px; font-size: 17px; line-height: 1.5; } /* features grid */ .lp-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; } @media (max-width: 860px){ .lp-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 560px){ .lp-grid { grid-template-columns: 1fr; } } .lp-card { background: var(--lp-surface2); border: 1px solid var(--lp-border); border-radius: 18px; padding: 26px; transition: transform .2s ease, border-color .2s ease; } .lp-card:hover { transform: translateY(-4px); border-color: var(--lp-accent); } .lp-card__ico { width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; font-size: 26px; margin-bottom: 16px; background: linear-gradient(150deg, rgba(124,92,255,0.25), rgba(124,92,255,0.08)); border: 1px solid var(--lp-border); } .lp-card h3 { margin: 0 0 8px; font-size: 20px; } .lp-card p { margin: 0; color: var(--lp-muted); line-height: 1.55; font-size: 15px; } /* steps */ .lp-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; counter-reset: step; } @media (max-width: 720px){ .lp-steps { grid-template-columns: 1fr; } } .lp-step { position: relative; padding: 26px 26px 26px 70px; background: var(--lp-surface2); border: 1px solid var(--lp-border); border-radius: 18px; } .lp-step::before { counter-increment: step; content: counter(step); position: absolute; left: 22px; top: 24px; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; background: linear-gradient(135deg, var(--lp-accent), #9a7bff); color: #fff; } .lp-step h3 { margin: 0 0 6px; font-size: 18px; } .lp-step p { margin: 0; color: var(--lp-muted); font-size: 15px; line-height: 1.5; } /* faq */ .lp-faq { max-width: 760px; margin: 0 auto; display: flex; flex-direction: column; gap: 12px; } .lp-faq details { background: var(--lp-surface2); border: 1px solid var(--lp-border); border-radius: 14px; padding: 4px 20px; } .lp-faq summary { cursor: pointer; padding: 16px 0; font-weight: 600; font-size: 17px; list-style: none; display: flex; justify-content: space-between; align-items: center; } .lp-faq summary::-webkit-details-marker { display: none; } .lp-faq summary::after { content: "+"; color: var(--lp-accent); font-size: 22px; font-weight: 700; } .lp-faq details[open] summary::after { content: "–"; } .lp-faq p { margin: 0 0 16px; color: var(--lp-muted); line-height: 1.6; font-size: 15px; } /* cta band */ .lp-cta { text-align: center; padding: 70px 0; } .lp-cta h2 { font-size: clamp(26px, 4vw, 40px); margin: 0 0 14px; letter-spacing: -0.02em; } .lp-cta p { color: var(--lp-muted); margin: 0 0 28px; font-size: 18px; } /* footer */ .lp-footer { border-top: 1px solid var(--lp-border); padding: 40px 0; color: var(--lp-muted); font-size: 14px; } .lp-footer__in { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; } .lp-footer__links { display: flex; gap: 20px; flex-wrap: wrap; } .lp-footer__links a:hover { color: var(--lp-text); } .lp-footer__sp { flex: 1; } @media (max-width: 560px){ .lp-footer__sp { display: none; } .lp-footer__in { justify-content: center; text-align: center; } } /* ============================================================ Hero estilo Kyodo — claro, lúdico, headline preta, CTA preto, logo central colorido + colagem de stickers (emoji) ao redor. ============================================================ */ .lp-hero--light { background: #fbfbfd; color: #16161a; overflow: hidden; padding: 96px 0 84px; } .lp-hero--light::before { display: none; } /* remove o glow roxo escuro */ .lp-hero--light .lp-hero__in { position: relative; z-index: 2; } .lp-hero--light h1 { color: #0e0f15; font-size: clamp(40px, 7vw, 72px); line-height: 1.05; letter-spacing: -0.02em; } .lp-hero--light h1 span { background: none; -webkit-text-fill-color: currentColor; color: #0e0f15; } /* tudo preto bold (estilo Kyodo) */ .lp-hero--light p { color: #5b5d66; } .lp-hero--light .lp-hero__note { color: #8a8d96; } .lp-hero--light .lp-btn--primary { background: #111317; color: #fff; box-shadow: 0 10px 26px rgba(0,0,0,0.18); } .lp-hero--light .lp-btn--primary:hover { background: #000; box-shadow: 0 14px 32px rgba(0,0,0,0.26); } .lp-hero--light .lp-btn--ghost { background: #fff; color: #16161a; border: 1px solid #e3e4e8; } .lp-hero--light .lp-btn--ghost:hover { background: #f1f1f4; } /* colagem de stickers (emoji) emoldurando o hero */ .lp-stickers { position: absolute; inset: 0; z-index: 1; pointer-events: none; } .lp-st { position: absolute; line-height: 1; font-size: 52px; opacity: .96; filter: drop-shadow(0 6px 10px rgba(0,0,0,0.12)); } .lp-st.s1 { top: 7%; left: 6%; font-size: 66px; transform: rotate(-12deg); } .lp-st.s2 { top: 11%; right: 7%; font-size: 72px; transform: rotate(10deg); } .lp-st.s3 { top: 42%; left: 3%; transform: rotate(8deg); } .lp-st.s4 { top: 40%; right: 3%; transform: rotate(-8deg); } .lp-st.s5 { bottom: 9%; left: 8%; font-size: 60px; transform: rotate(-6deg); } .lp-st.s6 { bottom: 7%; right: 9%; font-size: 62px; transform: rotate(12deg); } .lp-st.s7 { bottom: 5%; left: 39%; transform: rotate(-10deg); } .lp-st.s8 { top: 5%; left: 41%; font-size: 40px; transform: rotate(8deg); } .lp-st.s9 { bottom: 16%; right: 28%; font-size: 44px; transform: rotate(-14deg); } .lp-st.s10 { top: 24%; left: 21%; font-size: 38px; transform: rotate(6deg); } .lp-st.s11 { top: 22%; right: 21%; font-size: 40px; transform: rotate(-6deg); } .lp-st.s12 { bottom: 26%; left: 30%; font-size: 36px; transform: rotate(10deg); } @media (max-width: 760px){ .lp-st.s7,.lp-st.s9,.lp-st.s10,.lp-st.s11,.lp-st.s12 { display: none; } .lp-st { font-size: 38px !important; } } /* nav clara (combina com o hero Kyodo) */ .lp-nav { background: rgba(255,255,255,0.92); border-bottom: 1px solid #ececf0; } .lp-nav .lp-brand { color: #16161a; } .lp-nav .lp-brand img { filter: none; border-radius: 8px; } /* ícone (gato badge) colorido */ .lp-nav__links a { color: #5b5d66; } .lp-nav__links a:hover { color: #111; } .lp-nav .lp-btn--primary { background: #111317; color: #fff; box-shadow: none; } .lp-nav .lp-btn--primary:hover { background: #000; transform: none; box-shadow: none; } .lp-lang { background: #f1f1f4; color: #16161a; border-color: #e3e4e8; } .lp-lang:hover { border-color: #111; } /* ============================================================ LANDING CLARA (estilo Kyodo) — clareia todas as seções, bento de cards coloridos, CTA band colorida, footer claro. ============================================================ */ .lp { background: #fbfbfd; color: #16161a; } .lp-sec { padding: 72px 0; } .lp-sec--alt { background: #f4f4f7; border-top-color: #ececf0; border-bottom-color: #ececf0; } .lp-sec__h { color: #0e0f15; letter-spacing: -0.03em; } .lp-sec__sub { color: #5b5d66; } /* bento de cards coloridos (recursos) */ .lp-card { border: none; color: #16161a; box-shadow: 0 8px 22px rgba(20,20,40,0.06); border-radius: 22px; } .lp-card:hover { border: none; transform: translateY(-5px); box-shadow: 0 18px 40px rgba(20,20,40,0.13); } .lp-card p { color: #5b5d66; } .lp-card__ico { background: #fff; border: none; box-shadow: 0 4px 12px rgba(0,0,0,0.07); } .lp-card:nth-child(1) { background: #fdeef6; } .lp-card:nth-child(1) h3 { color: #c2348b; } .lp-card:nth-child(2) { background: #eaf1ff; } .lp-card:nth-child(2) h3 { color: #2f6bd6; } .lp-card:nth-child(3) { background: #e9f9ef; } .lp-card:nth-child(3) h3 { color: #1f9d57; } .lp-card:nth-child(4) { background: #f1edff; } .lp-card:nth-child(4) h3 { color: #6b46e8; } .lp-card:nth-child(5) { background: #fff5e6; } .lp-card:nth-child(5) h3 { color: #c77a14; } .lp-card:nth-child(6) { background: #e8f8f6; } .lp-card:nth-child(6) h3 { color: #0e9488; } /* passos (cards claros) */ .lp-step { background: #fff; border: 1px solid #ececf0; box-shadow: 0 6px 18px rgba(20,20,40,0.05); } .lp-step h3 { color: #0e0f15; } .lp-step p { color: #5b5d66; } /* faq (claro) */ .lp-faq details { background: #fff; border: 1px solid #ececf0; } .lp-faq summary { color: #16161a; } .lp-faq p { color: #5b5d66; } /* CTA band colorida (estilo Kyodo "Convinced?") */ .lp-cta { margin: 56px 20px; max-width: 1100px; margin-left: auto; margin-right: auto; border-radius: 32px; padding: 72px 24px; position: relative; overflow: hidden; background: linear-gradient(135deg, #7c5cff 0%, #c2348b 100%); } .lp-cta::after { content: "🐾 ✨ ⭐ 💬 🎮 🎨 🔥 🌟"; position: absolute; inset: 0; font-size: 80px; opacity: .08; letter-spacing: 40px; line-height: 2.4; word-spacing: 30px; pointer-events: none; transform: rotate(-8deg) scale(1.4); } .lp-cta > .lp__wrap { position: relative; z-index: 1; } .lp-cta h2 { color: #fff; } .lp-cta p { color: rgba(255,255,255,0.88); } .lp-cta .lp-btn--primary { background: #111317; color: #fff; box-shadow: 0 10px 26px rgba(0,0,0,0.25); } .lp-cta .lp-btn--primary:hover { background: #000; } /* footer (claro) */ .lp-footer { background: #f4f4f7; border-top-color: #ececf0; color: #8a8d96; } .lp-footer .lp-brand { color: #16161a; } .lp-footer .lp-brand img { filter: none; border-radius: 7px; } .lp-footer__links a { color: #5b5d66; } .lp-footer__links a:hover { color: #111; } /* seletor de idioma flutuante no mobile (a nav__links some) */ @media (max-width: 720px){ .lp-nav__links { display: none; } } /* dropdown de idioma custom (substitui o