/* shared/styles.css — LP de instalação. Vanilla CSS, mobile-first. Layout reage a classes no : .is-ios | .is-android | .is-desktop. Inline script no seta a classe ANTES do paint, evitando flicker. */ /* ────────────────────────── Tokens ────────────────────────── */ :root { --brand: #EFB230; --accent: #05C230; --bg: #ffffff; --bg-alt: #f7f8fb; --bg-card: #ffffff; --fg: #15181f; --fg-mute: #5e6573; --border: #e6e9ef; --border-strong: #d8dde6; --success: #22a560; --success-bg: #ecfdf5; --warn-bg: #fff8e1; --warn-fg: #6b5300; --warn-border: #ffe69c; --radius: 14px; --radius-sm: 10px; --radius-lg: 22px; --shadow-sm: 0 1px 2px rgba(15,23,42,0.04), 0 2px 8px rgba(15,23,42,0.04); --shadow-md: 0 4px 12px rgba(15,23,42,0.06), 0 1px 3px rgba(15,23,42,0.04); --shadow-lg: 0 12px 28px rgba(15,23,42,0.10); } /* ────────────────────────── Reset ────────────────────────── */ *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; font-size: 16px; line-height: 1.5; color: var(--fg); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } body { /* Background com tint sutil da brand + radial accent decorativo */ background: radial-gradient(ellipse 90% 60% at 50% -10%, color-mix(in srgb, var(--brand) 20%, transparent), transparent 60%), radial-gradient(ellipse 80% 50% at 100% 110%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 55%), color-mix(in srgb, var(--brand) 4%, #fafbfd); background-attachment: fixed; } body { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; } img { display: block; max-width: 100%; height: auto; } button { font: inherit; cursor: pointer; } /* ────────────────────────── Topbar ────────────────────────── */ .topbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 18px; border-bottom: 1px solid color-mix(in srgb, var(--brand) 12%, var(--border)); background: rgba(255,255,255,0.78); position: sticky; top: 0; z-index: 10; backdrop-filter: saturate(180%) blur(14px); -webkit-backdrop-filter: saturate(180%) blur(14px); } .topbar-brand { display: flex; align-items: center; gap: 10px; min-width: 0; } .topbar-logo { width: 28px; height: 28px; border-radius: 7px; flex: 0 0 28px; box-shadow: var(--shadow-sm); } .topbar-name { font-weight: 700; font-size: 15px; letter-spacing: -0.01em; color: var(--fg); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .badge-secure { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 600; color: var(--success); background: var(--success-bg); padding: 4px 9px; border-radius: 999px; border: 1px solid #bbf7d0; flex-shrink: 0; } /* ────────────────────────── Layout ────────────────────────── */ .container { flex: 1; width: 100%; max-width: 480px; margin: 0 auto; padding: 0 18px; display: flex; flex-direction: column; gap: 22px; padding-top: 20px; padding-bottom: 32px; } /* ────────────────────────── Hero ────────────────────────── */ .hero { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 14px; padding: 8px 4px 0; } .hero-logo { position: relative; } .hero-logo img { width: 96px; height: 96px; border-radius: var(--radius-lg); box-shadow: var(--shadow-md); background: var(--bg-card); } .hero-logo::after { /* sutil reflexo "vidro" do ícone */ content: ''; position: absolute; inset: 0; border-radius: var(--radius-lg); pointer-events: none; background: linear-gradient(155deg, rgba(255,255,255,0.18), rgba(255,255,255,0) 38%); } .hero-title { margin: 0; font-size: 24px; line-height: 1.2; letter-spacing: -0.02em; font-weight: 800; color: var(--fg); max-width: 340px; } .hero-title .brand-text { color: var(--brand); } .hero-subtitle { margin: 0; font-size: 14.5px; color: var(--fg-mute); font-weight: 500; } .cta-area { width: 100%; display: flex; flex-direction: column; align-items: center; margin-top: 4px; min-height: 56px; } .cta-loading { font-size: 13px; color: var(--fg-mute); padding: 14px 0; } /* ────────────────────────── CTA primário (botão "Instalar") ────────────────────────── */ .cta-primary { display: inline-flex; align-items: center; justify-content: center; gap: 10px; background: linear-gradient(135deg, var(--brand) 0%, color-mix(in srgb, var(--brand) 78%, var(--accent)) 100%); color: #ffffff; font-weight: 700; font-size: 17px; padding: 16px 28px; border: none; border-radius: var(--radius); width: 100%; max-width: 360px; text-decoration: none; box-shadow: 0 10px 24px color-mix(in srgb, var(--brand) 32%, transparent), 0 2px 6px color-mix(in srgb, var(--brand) 20%, transparent), inset 0 1px 0 rgba(255,255,255,0.2); transition: transform 0.14s ease, box-shadow 0.2s ease, opacity 0.15s ease; position: relative; overflow: hidden; } .cta-primary svg { width: 22px; height: 22px; flex-shrink: 0; } .cta-primary:hover { transform: translateY(-1px); box-shadow: 0 14px 30px color-mix(in srgb, var(--brand) 40%, transparent), 0 3px 8px color-mix(in srgb, var(--brand) 26%, transparent), inset 0 1px 0 rgba(255,255,255,0.25); } .cta-primary:active { transform: translateY(0) scale(0.99); } .cta-primary:disabled { opacity: 0.6; cursor: wait; } /* Android com BIP disponível: ring pulse marcante + shimmer atravessando */ .is-android .cta-primary:not(:disabled)::before { content: ''; position: absolute; top: 0; left: -120%; width: 80%; height: 100%; background: linear-gradient( 100deg, transparent 20%, rgba(255,255,255,0.28) 50%, transparent 80% ); animation: cta-shimmer 2.4s ease-in-out infinite; pointer-events: none; z-index: 1; } .is-android .cta-primary:not(:disabled)::after { content: ''; position: absolute; inset: -2px; border-radius: calc(var(--radius) + 2px); box-shadow: 0 0 0 0 color-mix(in srgb, var(--brand) 65%, transparent); animation: cta-pulse 2s ease-out infinite; pointer-events: none; } .is-android .cta-primary:not(:disabled) > * { position: relative; z-index: 2; } @keyframes cta-pulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--brand) 65%, transparent); } 60% { box-shadow: 0 0 0 22px color-mix(in srgb, var(--brand) 0%, transparent); } 100% { box-shadow: 0 0 0 22px color-mix(in srgb, var(--brand) 0%, transparent); } } @keyframes cta-shimmer { 0% { left: -120%; } 55%, 100% { left: 110%; } } .cta-secondary-wrap { display: flex; justify-content: center; margin-top: -8px; } .cta-secondary { background: transparent; color: var(--fg-mute); border: none; padding: 10px 14px; font-size: 13px; text-decoration: underline; text-underline-offset: 3px; } /* ────────────────────────── Tutorial (iOS / Android) ────────────────────────── */ .tutorial { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 22px 18px 18px; box-shadow: var(--shadow-sm); } .tutorial-title { margin: 0 0 14px; font-size: 18px; font-weight: 700; letter-spacing: -0.01em; } .steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; } .step { display: flex; gap: 14px; align-items: flex-start; animation: fade-up 0.3s ease both; } .step:nth-child(1) { animation-delay: 0.05s; } .step:nth-child(2) { animation-delay: 0.12s; } .step:nth-child(3) { animation-delay: 0.19s; } @keyframes fade-up { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } } .step-num { flex: 0 0 34px; width: 34px; height: 34px; border-radius: 50%; background: var(--brand); color: #fff; display: grid; place-items: center; font-weight: 800; font-size: 15px; letter-spacing: -0.01em; box-shadow: 0 2px 6px color-mix(in srgb, var(--brand) 30%, transparent); } .step-body { flex: 1; min-width: 0; } .step-title { font-size: 15.5px; line-height: 1.4; color: var(--fg); } .step-meta { display: flex; align-items: center; gap: 10px; margin-top: 8px; } .step-icon { display: inline-grid; place-items: center; width: 38px; height: 38px; background: #f0f4f9; border: 1px solid var(--border); border-radius: 9px; color: var(--brand); flex-shrink: 0; } .step-icon svg { width: 18px; height: 18px; } .step-hint { font-size: 12.5px; color: var(--fg-mute); line-height: 1.4; } .tutorial-note { margin-top: 14px; padding: 10px 12px; background: var(--warn-bg); border: 1px solid var(--warn-border); border-radius: var(--radius-sm); font-size: 12.5px; line-height: 1.45; color: var(--warn-fg); } /* ────────────────────────── Desktop message ────────────────────────── */ .desktop-msg { background: var(--bg-alt); border: 1px solid var(--border); border-radius: var(--radius); padding: 28px 22px; text-align: center; } .desktop-msg-icon { width: 56px; height: 56px; margin: 0 auto 12px; background: #fff; border: 1px solid var(--border); border-radius: 14px; display: grid; place-items: center; color: var(--brand); } .desktop-msg-icon svg { width: 26px; height: 26px; } .desktop-msg h2 { margin: 0 0 6px; font-size: 18px; font-weight: 700; } .desktop-msg p { margin: 0; color: var(--fg-mute); font-size: 14px; } /* ────────────────────────── Benefits ────────────────────────── */ .section-title { margin: 0 0 4px; font-size: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--fg-mute); padding-left: 4px; } .benefits-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; } .benefit { position: relative; display: flex; align-items: center; gap: 16px; padding: 16px 18px; background: linear-gradient(135deg, #ffffff 0%, color-mix(in srgb, var(--brand) 7%, white) 100%); border: 1px solid color-mix(in srgb, var(--brand) 18%, var(--border)); border-radius: var(--radius); box-shadow: 0 2px 6px color-mix(in srgb, var(--brand) 8%, transparent), 0 1px 2px rgba(15,23,42,0.04); cursor: default; overflow: hidden; transition: transform 0.22s cubic-bezier(.2,.8,.2,1), box-shadow 0.22s ease, border-color 0.22s ease; } /* Linha decorativa colorida na lateral esquerda */ .benefit::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: linear-gradient(180deg, var(--brand), var(--accent)); border-radius: 4px 0 0 4px; opacity: 0.85; transition: width 0.22s ease; } .benefit:hover { transform: translateY(-3px); box-shadow: 0 16px 32px color-mix(in srgb, var(--brand) 22%, transparent), 0 4px 10px color-mix(in srgb, var(--brand) 14%, transparent); border-color: color-mix(in srgb, var(--brand) 45%, var(--border)); } .benefit:hover::before { width: 6px; } .benefit:active { transform: translateY(-1px); } .benefit-icon { flex: 0 0 46px; width: 46px; height: 46px; display: grid; place-items: center; background: linear-gradient(135deg, var(--brand), color-mix(in srgb, var(--brand) 70%, var(--accent))); border-radius: 12px; color: #ffffff; box-shadow: 0 6px 14px color-mix(in srgb, var(--brand) 38%, transparent), inset 0 1px 0 rgba(255,255,255,0.25); transition: transform 0.28s cubic-bezier(.2,.8,.2,1); } .benefit-icon svg { width: 24px; height: 24px; stroke-width: 2.2; } .benefit:hover .benefit-icon { transform: rotate(-6deg) scale(1.06); } .benefit-body { flex: 1; min-width: 0; } .benefit-title { margin: 0 0 3px; font-size: 15.5px; font-weight: 700; letter-spacing: -0.01em; color: var(--fg); } .benefit-text { margin: 0; font-size: 13.5px; color: var(--fg-mute); line-height: 1.45; } /* ────────────────────────── FAQ ────────────────────────── */ .faq { display: flex; flex-direction: column; gap: 6px; } .faq details { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 12px 14px; transition: background 0.15s; } .faq details[open] { background: var(--bg-alt); } .faq summary { font-weight: 600; font-size: 14.5px; cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; outline: none; } .faq summary::-webkit-details-marker { display: none; } .faq summary::after { content: '+'; color: var(--fg-mute); font-size: 18px; margin-left: 12px; transition: transform 0.2s; } .faq details[open] summary::after { content: '−'; } .faq details p { margin: 10px 0 4px; color: var(--fg-mute); font-size: 13.5px; line-height: 1.55; } /* ────────────────────────── Post-install ────────────────────────── */ .post-install { text-align: center; padding: 36px 22px 32px; background: var(--success-bg); border: 1px solid #bbf7d0; border-radius: var(--radius); } .post-install-icon { width: 60px; height: 60px; border-radius: 50%; background: #fff; color: var(--success); display: grid; place-items: center; margin: 0 auto 14px; box-shadow: var(--shadow-md); } .post-install-icon svg { width: 30px; height: 30px; } .post-install h2 { margin: 0 0 6px; font-size: 22px; font-weight: 800; letter-spacing: -0.01em; } .post-install p { margin: 0 0 18px; color: var(--fg-mute); font-size: 14.5px; } .post-install .cta-primary { display: inline-flex; width: auto; max-width: none; padding: 14px 32px; } /* ────────────────────────── Footer ────────────────────────── */ .footer { text-align: center; padding: 16px 18px 24px; color: var(--fg-mute); font-size: 12px; } /* ────────────────────────── Visibilidade por plataforma ────────────────────────── */ /* Default: tudo escondido até a class .is-* aplicar */ .tutorial-ios, .tutorial-android, .desktop-msg { display: none; } /* iOS: tutorial em destaque, hero compacto, sem CTA Android */ .is-ios .tutorial-ios { display: block; } .is-ios .hero-subtitle { display: none; } .is-ios .hero { padding-top: 4px; gap: 10px; } .is-ios .hero-logo img { width: 76px; height: 76px; border-radius: 18px; } .is-ios .hero-title { font-size: 19px; line-height: 1.25; max-width: 320px; } .is-ios .container { gap: 18px; padding-top: 14px; } .is-ios .cta-area { display: none; } /* Reordena no iOS: tutorial vem ANTES de benefits/faq */ .is-ios .tutorial-ios { order: 1; } .is-ios .benefits { order: 2; } .is-ios .faq { order: 3; } .is-ios .post-install { order: 0; } .is-ios .container { /* flex já é vertical, order funciona */ } /* Android: CTA em destaque (no cta-area), tutorial só fallback */ .is-android .tutorial-android { display: none; } /* lp.js mostra se BIP não disparar */ .is-android.no-bip .tutorial-android { display: block; } .is-android.no-bip .cta-area { display: none; } /* Desktop: mensagem específica, esconde CTA e tutoriais */ .is-desktop .desktop-msg { display: block; } .is-desktop .cta-area { display: none; } .is-desktop .hero-logo img { width: 110px; height: 110px; } /* Pós-instalação: esconde tudo menos o success state */ .post-installed .hero, .post-installed .tutorial-ios, .post-installed .tutorial-android, .post-installed .desktop-msg, .post-installed .benefits, .post-installed .faq, .post-installed .cta-secondary-wrap { display: none; } /* ────────────────────────── Responsive tweaks ────────────────────────── */ @media (max-width: 360px) { .hero-title { font-size: 21px; } .is-ios .hero-title { font-size: 17px; } .container { padding: 0 14px; padding-top: 16px; padding-bottom: 24px; } .tutorial { padding: 18px 14px 14px; } } @media (min-width: 600px) { /* Desktop / tablets — hero mais arejado */ .hero { padding-top: 28px; gap: 18px; } .hero-logo img { width: 110px; height: 110px; } .hero-title { font-size: 28px; max-width: 380px; } } /* ────────────────────────── A11y / motion ────────────────────────── */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } } /* Foco visível pra navegação por teclado */ button:focus-visible, a:focus-visible, summary:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 8px; }