1711 lines
43 KiB
Svelte
1711 lines
43 KiB
Svelte
<script>
|
|
import { onMount } from 'svelte';
|
|
import Header from '$lib/components/Header.svelte';
|
|
import Footer from '$lib/components/Footer.svelte';
|
|
import Modal from '$lib/components/Modal.svelte';
|
|
|
|
import phoneCard from '$lib/assets/phone-card1.png';
|
|
import pixETedAzul from '$lib/assets/pix-e-ted-azul.svg';
|
|
import pagamentosAzul from '$lib/assets/pagamentos-azul.svg';
|
|
import cobranca from '$lib/assets/cobranca.svg';
|
|
import saldosExtratos from '$lib/assets/saldos-e-extratos.svg';
|
|
import fluxoAprovacao from '$lib/assets/fluxo-de-aprovacao.svg';
|
|
import contaEscrowAzul from '$lib/assets/conta-escrow-azul.svg';
|
|
import cobrancaLote from '$lib/assets/cobranca-em-lote.svg';
|
|
import gestaoUsuarios from '$lib/assets/gestao-de-usuarios.svg';
|
|
import iphonePixMockup from '$lib/assets/iphone-pix-mockup.png';
|
|
import check from '$lib/assets/check.svg';
|
|
import bankingInterfaceMockup from '$lib/assets/banking-interface-mockup2.png';
|
|
import approvalFlowMockup from '$lib/assets/lock-icon.svg';
|
|
import paymentScheduleMockup from '$lib/assets/payment-schedule-mockup.svg';
|
|
|
|
let showModal = false;
|
|
|
|
const features = [
|
|
{ icon: pixETedAzul, label: 'Pix' },
|
|
{ icon: pagamentosAzul, label: 'Pagamentos' },
|
|
{ icon: cobranca, label: 'Cobrança' },
|
|
{ icon: saldosExtratos, label: 'Saldos e\nExtratos' },
|
|
{ icon: fluxoAprovacao, label: 'Fluxo de\nAprovação' },
|
|
{ icon: contaEscrowAzul, label: 'Conta\nEscrow' },
|
|
{ icon: cobrancaLote, label: 'Cobrança\nem lote' },
|
|
{ icon: gestaoUsuarios, label: 'Gestão de\nusuários' }
|
|
];
|
|
|
|
function openCreateAccountModal() {
|
|
showModal = true;
|
|
}
|
|
|
|
function closeModal() {
|
|
showModal = false;
|
|
}
|
|
|
|
const pixFeatures = [
|
|
'Transferência Pix',
|
|
'Pix saque',
|
|
'Pix automático',
|
|
'QR fixo e estático',
|
|
'Gestão de chaves'
|
|
];
|
|
|
|
const accountFeatures = [
|
|
{
|
|
title: 'Crie fluxo de aprovação para seus pagamentos',
|
|
description: 'Garanta segurança, controle e eficiência em cada transação realizada.',
|
|
image: approvalFlowMockup
|
|
},
|
|
{
|
|
title: 'Agende seus pagamentos com facilidade',
|
|
description: 'Organize suas finanças, evite atrasos e tenha mais controle com agendamento automático de pagamentos.',
|
|
image: paymentScheduleMockup
|
|
}
|
|
];
|
|
|
|
onMount(() => {
|
|
const observer = new IntersectionObserver(
|
|
(entries) => {
|
|
entries.forEach((entry) => {
|
|
if (entry.isIntersecting) {
|
|
entry.target.style.opacity = '1';
|
|
entry.target.style.transform = 'translateY(0)';
|
|
}
|
|
});
|
|
},
|
|
{ threshold: 0.1 }
|
|
);
|
|
|
|
const elements = document.querySelectorAll('.fade-up');
|
|
elements.forEach((el) => observer.observe(el));
|
|
|
|
return () => observer.disconnect();
|
|
});
|
|
</script>
|
|
|
|
<svelte:head>
|
|
<title>Conta Digital - BassPago</title>
|
|
<meta name="description" content="Você no controle do seu dinheiro. Fácil, rápido e sem complicações." />
|
|
</svelte:head>
|
|
|
|
<Header />
|
|
|
|
<section class="conta-digital-hero">
|
|
<div class="conta-digital-hero__container">
|
|
<div class="conta-digital-hero__content fade-up lg:flex xs:hidden">
|
|
<h1 class="conta-digital-hero__title">Você no controle do <br />seu dinheiro</h1>
|
|
<p class="conta-digital-hero__subtitle">Fácil, rápido e sem complicações.</p>
|
|
<button
|
|
class="link-cta"
|
|
on:click={openCreateAccountModal}
|
|
>
|
|
Abrir conta →
|
|
</button>
|
|
</div>
|
|
<div class="conta-digital-hero__image fade-up lg:flex xs:hidden">
|
|
<div class="conta-digital-visual-bg">
|
|
<img src={phoneCard} alt="Celular com cartão" />
|
|
</div>
|
|
</div>
|
|
<div class="conta-digital-hero__content fade-up lg:hidden">
|
|
<h1 class="conta-digital-hero__title">Você no controle do <br />seu dinheiro</h1>
|
|
<div class="conta-digital-hero__image fade-up lg:hidden">
|
|
<div class="conta-digital-visual-bg">
|
|
<img src={phoneCard} alt="Celular com cartão" />
|
|
</div>
|
|
</div>
|
|
<p class="conta-digital-hero__subtitle">Fácil, rápido e sem complicações.</p>
|
|
<button
|
|
class="link-cta"
|
|
on:click={openCreateAccountModal}
|
|
>
|
|
Abrir conta →
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="conta-digital-features section">
|
|
<div class="container">
|
|
<div class="conta-digital-features__header fade-up">
|
|
<h2 class="text-black">Tudo que você precisa de uma conta digital.</h2>
|
|
</div>
|
|
<div class="conta-digital-features__grid">
|
|
<div class="conta-digital-features__row">
|
|
{#each features.slice(0, 4) as feature}
|
|
<div class="conta-digital-features__card fade-up">
|
|
<div class="conta-digital-features__icon">
|
|
<img src={feature.icon} alt={feature.label} />
|
|
</div>
|
|
<span>{feature.label}</span>
|
|
</div>
|
|
{/each}
|
|
</div>
|
|
<div class="conta-digital-features__row">
|
|
{#each features.slice(4, 8) as feature}
|
|
<div class="conta-digital-features__card fade-up">
|
|
<div class="conta-digital-features__icon">
|
|
<img src={feature.icon} alt={feature.label} />
|
|
</div>
|
|
<span>{feature.label}</span>
|
|
</div>
|
|
{/each}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="conta-digital-pix section">
|
|
<div class="conta-digital-pix__container">
|
|
<div class="conta-digital-pix__mobile">
|
|
<div class="conta-digital-pix__content fade-up">
|
|
<h2 class="conta-digital-pix__title">Todos os tipos de Pix em um só lugar.</h2>
|
|
<p class="conta-digital-pix__subtitle">
|
|
Cobrar, pagar ou automatizar: tudo via Pix, de forma simples, rápida e eficiente.
|
|
</p>
|
|
</div>
|
|
<div class="conta-digital-pix__mockup fade-up">
|
|
<div class="conta-digital-pix__phone">
|
|
<img src={iphonePixMockup} alt="iPhone com aplicativo Basspago" />
|
|
</div>
|
|
</div>
|
|
<div class="conta-digital-pix__features fade-up">
|
|
<div class="conta-digital-pix__column">
|
|
{#each pixFeatures.slice(0, 3) as feature}
|
|
<div class="conta-digital-pix__feature">
|
|
<img src={check} alt="Check" />
|
|
<span>{feature}</span>
|
|
</div>
|
|
{/each}
|
|
</div>
|
|
<div class="conta-digital-pix__column">
|
|
{#each pixFeatures.slice(3, 5) as feature}
|
|
<div class="conta-digital-pix__feature">
|
|
<img src={check} alt="Check" />
|
|
<span>{feature}</span>
|
|
</div>
|
|
{/each}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Desktop Layout -->
|
|
<div class="conta-digital-pix__desktop">
|
|
<div class="conta-digital-pix__mockup fade-up">
|
|
<div class="conta-digital-pix__phone">
|
|
<img src={iphonePixMockup} alt="iPhone com aplicativo Basspago" />
|
|
</div>
|
|
</div>
|
|
<div class="conta-digital-pix__content fade-up">
|
|
<h2 class="conta-digital-pix__title">Todos os tipos de Pix em um só lugar.</h2>
|
|
<p class="conta-digital-pix__subtitle">
|
|
Cobrar, pagar ou automatizar: tudo via Pix, de forma simples, rápida e eficiente.
|
|
</p>
|
|
<div class="conta-digital-pix__features">
|
|
<div class="conta-digital-pix__column">
|
|
{#each pixFeatures.slice(0, 3) as feature}
|
|
<div class="conta-digital-pix__feature">
|
|
<img src={check} alt="Check" />
|
|
<span>{feature}</span>
|
|
</div>
|
|
{/each}
|
|
</div>
|
|
<div class="conta-digital-pix__column">
|
|
{#each pixFeatures.slice(3, 5) as feature}
|
|
<div class="conta-digital-pix__feature">
|
|
<img src={check} alt="Check" />
|
|
<span>{feature}</span>
|
|
</div>
|
|
{/each}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Account Section -->
|
|
<section class="conta-digital-account section">
|
|
<div class="conta-digital-account__container">
|
|
<!-- Main Banking Interface Section -->
|
|
<div class="conta-digital-account__main">
|
|
<div class="conta-digital-account__content fade-up">
|
|
<h2 class="conta-digital-account__title">Centralize tudo em <br />um só lugar</h2>
|
|
<div class="conta-digital-account__mockup fade-up lg:hidden">
|
|
<img src={bankingInterfaceMockup} alt="Interface de internet banking" />
|
|
</div>
|
|
<p class="conta-digital-account__subtitle">
|
|
Tenha toda a sua operação financeira centralizada em dashboards inteligentes. Receba por Pix ou boleto ou PDV e acompanhe cada movimentação com clareza e segurança.
|
|
</p>
|
|
</div>
|
|
<div class="conta-digital-account__mockup fade-up xs:hidden lg:flex">
|
|
<img src={bankingInterfaceMockup} alt="Interface de internet banking" />
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Feature Cards Section -->
|
|
<div class="conta-digital-account__features">
|
|
{#each accountFeatures as feature, index}
|
|
<div class="conta-digital-account__feature-card fade-up">
|
|
<div class="conta-digital-account__feature-content">
|
|
<h3 class="conta-digital-account__feature-title">{feature.title}</h3>
|
|
<p class="conta-digital-account__feature-subtitle">{feature.description}</p>
|
|
</div>
|
|
<div class="conta-digital-account__feature-mockup">
|
|
<img src={feature.image} alt="Feature mockup" />
|
|
</div>
|
|
</div>
|
|
{/each}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- API Documentation Section -->
|
|
<section class="api-documentation section">
|
|
<div class="api-documentation__container">
|
|
<!-- Left side: Text content -->
|
|
<div class="api-documentation__content fade-up">
|
|
<div class="api-documentation__text">
|
|
<h2 class="api-documentation__title">
|
|
Potencialize seu negócio com nossa solução de API.
|
|
</h2>
|
|
</div>
|
|
<a href="/desenvolvedores" class="link-cta white">
|
|
<span>Acesse a documentação</span>
|
|
</a>
|
|
</div>
|
|
|
|
<!-- Right side: Visual mockup -->
|
|
<div class="api-documentation__visual fade-up">
|
|
<!-- Payment summary card -->
|
|
<div class="api-documentation__payment-card fade-up">
|
|
<div class="api-documentation__payment-content">
|
|
<h3 class="api-documentation__payment-title">Resumo do pedido</h3>
|
|
<div class="api-documentation__payment-row">
|
|
<div class="api-documentation__payment-labels">
|
|
<span>Valor da compra</span>
|
|
<span>Desconto</span>
|
|
<span>Subtotal</span>
|
|
<span>Taxa</span>
|
|
</div>
|
|
<div class="api-documentation__payment-values">
|
|
<span>R\$ 265,00</span>
|
|
<span>-R\$ 5,30</span>
|
|
<span>R\$ 259,7</span>
|
|
<span>R\$ 5,60</span>
|
|
</div>
|
|
</div>
|
|
<div class="api-documentation__payment-divider"></div>
|
|
<div class="api-documentation__payment-total">
|
|
<span class="api-documentation__total-label">Total</span>
|
|
<span class="api-documentation__total-value">R\$ 265,30</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Status indicators -->
|
|
<div class="api-documentation__status-indicators">
|
|
<div class="api-documentation__status-card api-documentation__status-card--approved fade-up">
|
|
<div class="api-documentation__status-icon"></div>
|
|
<div class="api-documentation__status-info">
|
|
<span class="api-documentation__status-amount">R\$ 125,33</span>
|
|
<span class="api-documentation__status-label">Aprovado</span>
|
|
</div>
|
|
</div>
|
|
<div class="api-documentation__status-card api-documentation__status-card--rejected fade-up">
|
|
<div class="api-documentation__status-icon"></div>
|
|
<div class="api-documentation__status-info">
|
|
<span class="api-documentation__status-amount">R\$ 14,66</span>
|
|
<span class="api-documentation__status-label">Recusado</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Decorative elements -->
|
|
<div class="api-documentation__decorative-elements">
|
|
<div class="api-documentation__decorative-card api-documentation__decorative-card--1 fade-in"></div>
|
|
<div class="api-documentation__decorative-card api-documentation__decorative-card--2 fade-in"></div>
|
|
<div class="api-documentation__decorative-icon api-documentation__decorative-icon--1 fade-in"></div>
|
|
<div class="api-documentation__decorative-icon api-documentation__decorative-icon--2 fade-in"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<Modal
|
|
bind:isOpen={showModal}
|
|
on:close={closeModal}
|
|
>
|
|
</Modal>
|
|
|
|
<Footer />
|
|
|
|
<style>
|
|
/* =========================
|
|
CONTA DIGITAL PAGE STYLES
|
|
========================= */
|
|
|
|
:root {
|
|
--conta-digital-bg: #fff;
|
|
--conta-digital-blue: rgba(0, 0, 255, 0.03);
|
|
--conta-digital-icon-bg: rgba(0, 0, 255, 0.1);
|
|
--conta-digital-text: #000;
|
|
--conta-digital-text-secondary: rgba(0, 0, 0, 0.75);
|
|
}
|
|
|
|
.modal-content-custom {
|
|
color: #333;
|
|
line-height: 1.6;
|
|
text-align: center;
|
|
}
|
|
|
|
.modal-title {
|
|
font-size: 1.3rem;
|
|
font-weight: 700;
|
|
margin: 0 0 16px 0;
|
|
color: #1a1a1a;
|
|
}
|
|
|
|
.modal-description {
|
|
margin: 0 0 20px 0;
|
|
color: #666;
|
|
font-size: 1rem;
|
|
}
|
|
|
|
.modal-features {
|
|
list-style: none;
|
|
padding: 0;
|
|
margin: 0 0 24px 0;
|
|
text-align: left;
|
|
}
|
|
|
|
.modal-features li {
|
|
padding: 8px 0;
|
|
font-size: 0.95rem;
|
|
color: #555;
|
|
}
|
|
|
|
.modal-actions {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 12px;
|
|
}
|
|
|
|
.modal-button {
|
|
padding: 14px 24px;
|
|
border-radius: 8px;
|
|
font-size: 1rem;
|
|
font-weight: 600;
|
|
cursor: pointer;
|
|
transition: all 0.2s ease;
|
|
border: none;
|
|
width: 100%;
|
|
}
|
|
|
|
.modal-button.primary {
|
|
background: #41FE95;
|
|
color: #000;
|
|
}
|
|
|
|
.modal-button.primary:hover {
|
|
background: #35e085;
|
|
transform: translateY(-1px);
|
|
}
|
|
|
|
.conta-digital-visual-bg {
|
|
background: radial-gradient(ellipse 89% 85% at -68% -3%, #41FE95 0%, rgba(65, 254, 149, 0) 100%),
|
|
radial-gradient(ellipse 153% 147% at 191% 148%, #41FE95 0%, rgba(65, 254, 149, 0) 100%),
|
|
rgba(0, 0, 255, 0.01);
|
|
border-radius: 40px;
|
|
padding: 40px;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
transition: transform 0.3s ease, box-shadow 0.3s ease;
|
|
}
|
|
|
|
.conta-digital-visual-bg:hover {
|
|
transform: translateY(-5px);
|
|
box-shadow: 0 20px 40px rgba(65, 254, 149, 0.2);
|
|
}
|
|
|
|
.conta-digital-visual-bg img {
|
|
width: 100%;
|
|
max-width: 400px;
|
|
height: auto;
|
|
object-fit: contain;
|
|
}
|
|
|
|
/* Ajustes responsivos para o background */
|
|
@media (max-width: 768px) {
|
|
.conta-digital-visual-bg {
|
|
padding: 30px;
|
|
border-radius: 30px;
|
|
}
|
|
|
|
.conta-digital-visual-bg img {
|
|
max-width: 350px;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 480px) {
|
|
.conta-digital-visual-bg {
|
|
padding: 20px;
|
|
border-radius: 20px;
|
|
}
|
|
|
|
.conta-digital-visual-bg img {
|
|
max-width: 300px;
|
|
}
|
|
}
|
|
|
|
/* Hero Section */
|
|
.conta-digital-hero {
|
|
background: var(--conta-digital-bg);
|
|
width: 100%;
|
|
padding: 120px 20px 60px;
|
|
font-family: 'Space Grotesk', sans-serif;
|
|
min-height: 100dvh;
|
|
max-height: 850px;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.conta-digital-hero__container {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 30px;
|
|
max-width: 1100px;
|
|
margin: 0 auto;
|
|
align-items: center;
|
|
flex: 1;
|
|
}
|
|
|
|
.conta-digital-hero__image {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.conta-digital-hero__image img {
|
|
object-fit: contain;
|
|
display: block;
|
|
width: 100%;
|
|
max-width: 447px;
|
|
}
|
|
|
|
.conta-digital-hero__content {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 20px;
|
|
max-width: 430px;
|
|
text-align: center;
|
|
}
|
|
|
|
.conta-digital-hero__title {
|
|
color: var(--conta-digital-text);
|
|
font-weight: 400;
|
|
margin: 0;
|
|
max-width: 95vw;
|
|
line-height: 1;
|
|
font-size: clamp(2rem, 5vw, 3.5rem);
|
|
}
|
|
|
|
.conta-digital-hero__subtitle {
|
|
color: var(--conta-digital-text-secondary);
|
|
font-size: 1.25rem;
|
|
margin: 0;
|
|
max-width: 93vw;
|
|
line-height: 1.5;
|
|
}
|
|
|
|
.link-cta {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background: var(--conta-digital-text);
|
|
color: var(--conta-digital-bg);
|
|
padding: 12px 24px;
|
|
border-radius: 8px;
|
|
text-decoration: none;
|
|
font-weight: 500;
|
|
transition: all 0.3s ease;
|
|
margin-top: 40px;
|
|
border: none;
|
|
cursor: pointer;
|
|
font-size: 1rem;
|
|
font-family: inherit;
|
|
}
|
|
|
|
.link-cta:hover {
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
|
|
}
|
|
|
|
.link-cta.white {
|
|
background: #fff;
|
|
color: #000;
|
|
}
|
|
|
|
.link-cta.white:hover {
|
|
background: #41FE95;
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 10px 25px rgba(65, 254, 149, 0.3);
|
|
}
|
|
|
|
/* Features Section */
|
|
.conta-digital-features {
|
|
background-color: var(--conta-digital-bg);
|
|
color: var(--conta-digital-text);
|
|
padding: 80px 0;
|
|
}
|
|
|
|
.conta-digital-features .container {
|
|
max-width: 1200px;
|
|
margin: 0 auto;
|
|
padding: 0 20px;
|
|
}
|
|
|
|
.conta-digital-features__header {
|
|
display: flex;
|
|
justify-content: center;
|
|
margin-bottom: 60px;
|
|
}
|
|
|
|
.conta-digital-features__header h2 {
|
|
text-align: center;
|
|
font-family: 'Space Grotesk', sans-serif;
|
|
font-weight: 400;
|
|
line-height: 1;
|
|
letter-spacing: -0.4px;
|
|
color: var(--conta-digital-text);
|
|
max-width: 562px;
|
|
font-size: clamp(1.7rem, 3vw, 2.4rem);
|
|
}
|
|
|
|
.conta-digital-features__grid {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 15px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.conta-digital-features__row {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 15px;
|
|
}
|
|
|
|
.conta-digital-features__card {
|
|
display: flex;
|
|
width: 100%;
|
|
max-width: 300px;
|
|
padding: 30px;
|
|
align-items: center;
|
|
gap: 15px;
|
|
border-radius: 15px;
|
|
background: var(--conta-digital-blue);
|
|
color: var(--conta-digital-text-secondary);
|
|
font-family: "Space Grotesk", sans-serif;
|
|
font-size: 16px;
|
|
line-height: normal;
|
|
letter-spacing: -0.16px;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.conta-digital-features__icon {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border-radius: 50%;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.conta-digital-features__icon img {
|
|
object-fit: contain;
|
|
}
|
|
|
|
.conta-digital-features__card span {
|
|
white-space: pre-line;
|
|
line-height: 1.2;
|
|
}
|
|
|
|
/* PIX Section */
|
|
.conta-digital-pix {
|
|
background-color: var(--conta-digital-bg);
|
|
width: 100%;
|
|
padding: 80px 0;
|
|
}
|
|
|
|
.conta-digital-pix__container {
|
|
max-width: 1200px;
|
|
margin: 0 auto;
|
|
padding: 0 20px;
|
|
}
|
|
|
|
/* Mobile Layout */
|
|
.conta-digital-pix__mobile {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 30px;
|
|
align-items: center;
|
|
}
|
|
|
|
.conta-digital-pix__desktop {
|
|
display: none;
|
|
}
|
|
|
|
.conta-digital-pix__mockup {
|
|
width: 300px;
|
|
height: 220px;
|
|
position: relative;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.conta-digital-pix__phone {
|
|
position: relative;
|
|
width: 220px;
|
|
height: 280px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.conta-digital-pix__phone img {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: contain;
|
|
}
|
|
|
|
.conta-digital-pix__content {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 20px;
|
|
max-width: 270px;
|
|
text-align: center;
|
|
}
|
|
|
|
.conta-digital-pix__title {
|
|
font-family: 'Space Grotesk', sans-serif;
|
|
font-weight: 400;
|
|
color: var(--conta-digital-text);
|
|
line-height: 1.2;
|
|
letter-spacing: -0.4px;
|
|
margin: 0;
|
|
max-width: 100%;
|
|
font-size: clamp(1.7rem, 3vw, 2.4rem);
|
|
}
|
|
|
|
.conta-digital-pix__subtitle {
|
|
font-family: 'Space Grotesk', sans-serif;
|
|
font-size: 18px;
|
|
font-weight: 400;
|
|
color: var(--conta-digital-text-secondary);
|
|
line-height: 1.5;
|
|
letter-spacing: -0.2px;
|
|
margin: 0;
|
|
max-width: 100%;
|
|
}
|
|
|
|
.conta-digital-pix__features {
|
|
display: flex;
|
|
flex-direction: row;
|
|
gap: 20px;
|
|
margin-top: 20px;
|
|
justify-content: center;
|
|
}
|
|
|
|
.conta-digital-pix__column {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 12px;
|
|
}
|
|
|
|
.conta-digital-pix__feature {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 5px;
|
|
justify-content: flex-start;
|
|
}
|
|
|
|
.conta-digital-pix__feature img {
|
|
width: 12px;
|
|
height: 11px;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.conta-digital-pix__feature span {
|
|
font-family: 'Space Grotesk', sans-serif;
|
|
font-weight: 400;
|
|
color: var(--conta-digital-text-secondary);
|
|
white-space: nowrap;
|
|
}
|
|
|
|
/* Account Section */
|
|
.conta-digital-account {
|
|
background-color: var(--conta-digital-bg);
|
|
width: 100%;
|
|
padding: 80px 0;
|
|
}
|
|
|
|
.conta-digital-account__container {
|
|
max-width: 1200px;
|
|
margin: 0 auto;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 60px;
|
|
align-items: center;
|
|
padding: 0 20px;
|
|
}
|
|
|
|
/* Main Banking Interface Section */
|
|
.conta-digital-account__main {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 40px;
|
|
align-items: center;
|
|
width: 100%;
|
|
}
|
|
|
|
.conta-digital-account__content {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 30px;
|
|
max-width: 500px;
|
|
text-align: center;
|
|
}
|
|
|
|
.conta-digital-account__title {
|
|
font-family: 'Space Grotesk', sans-serif;
|
|
font-weight: 400;
|
|
color: var(--conta-digital-text);
|
|
line-height: normal;
|
|
letter-spacing: -0.4px;
|
|
margin: 0;
|
|
max-width: 100%;
|
|
font-size: clamp(1.7rem, 3vw, 2.4rem);
|
|
}
|
|
|
|
.conta-digital-account__subtitle {
|
|
font-family: 'Space Grotesk', sans-serif;
|
|
font-size: 18px;
|
|
font-weight: 400;
|
|
color: var(--conta-digital-text-secondary);
|
|
line-height: normal;
|
|
letter-spacing: -0.2px;
|
|
margin: 0;
|
|
max-width: 100%;
|
|
}
|
|
|
|
.conta-digital-account__mockup {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
max-width: 676px;
|
|
width: 100%;
|
|
}
|
|
|
|
.conta-digital-account__mockup img {
|
|
width: 100%;
|
|
height: auto;
|
|
object-fit: contain;
|
|
/* Adicione estas propriedades para a sombra */
|
|
box-shadow: 0 25px 50px rgba(0, 0, 0, 0.15);
|
|
border-radius: 12px;
|
|
transition: transform 0.3s ease, box-shadow 0.3s ease;
|
|
}
|
|
|
|
.conta-digital-account__mockup img:hover {
|
|
transform: translateY(-5px);
|
|
box-shadow: 0 35px 70px rgba(0, 0, 0, 0.2);
|
|
}
|
|
|
|
.conta-digital-account__mockup.fade-up img,
|
|
.conta-digital-account__mockup.lg\:hidden img,
|
|
.conta-digital-account__mockup.xs\:hidden img {
|
|
box-shadow: 0 25px 50px rgba(0, 0, 0, 0.15);
|
|
border-radius: 12px;
|
|
transition: transform 0.3s ease, box-shadow 0.3s ease;
|
|
}
|
|
|
|
.conta-digital-account__mockup.fade-up img:hover,
|
|
.conta-digital-account__mockup.lg\:hidden img:hover,
|
|
.conta-digital-account__mockup.xs\:hidden img:hover {
|
|
transform: translateY(-5px);
|
|
box-shadow: 0 35px 70px rgba(0, 0, 0, 0.2);
|
|
}
|
|
|
|
/* Feature Cards Section */
|
|
.conta-digital-account__features {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 20px;
|
|
width: 100%;
|
|
}
|
|
|
|
.conta-digital-account__feature-card {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 30px;
|
|
padding: 30px;
|
|
border-radius: 33px;
|
|
background: rgba(0, 0, 255, 0.06);
|
|
position: relative;
|
|
overflow: hidden;
|
|
min-height: 320px;
|
|
}
|
|
|
|
.conta-digital-account__feature-card:nth-child(2) {
|
|
background: rgba(65, 254, 149, 0.22);
|
|
}
|
|
|
|
.conta-digital-account__feature-content {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 20px;
|
|
max-width: 270px;
|
|
}
|
|
|
|
.conta-digital-account__feature-title {
|
|
font-family: 'Space Grotesk', sans-serif;
|
|
font-size: 28px;
|
|
font-weight: 400;
|
|
color: var(--conta-digital-text);
|
|
line-height: normal;
|
|
letter-spacing: -0.28px;
|
|
margin: 0;
|
|
}
|
|
|
|
.conta-digital-account__feature-subtitle {
|
|
font-family: 'Space Grotesk', sans-serif;
|
|
font-size: 18px;
|
|
font-weight: 400;
|
|
color: var(--conta-digital-text-secondary);
|
|
line-height: normal;
|
|
letter-spacing: -0.2px;
|
|
margin: 0;
|
|
}
|
|
|
|
.conta-digital-account__feature-mockup {
|
|
position: absolute;
|
|
right: 30px;
|
|
bottom: 0;
|
|
max-width: 200px;
|
|
display: none;
|
|
}
|
|
|
|
.conta-digital-account__feature-mockup img {
|
|
width: 100%;
|
|
height: auto;
|
|
object-fit: contain;
|
|
}
|
|
|
|
.conta-digital-account__feature-mockup img[src*="lock-icon"] {
|
|
width: 60px !important;
|
|
height: 60px !important;
|
|
filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.1));
|
|
transition: transform 0.3s ease, filter 0.3s ease;
|
|
}
|
|
|
|
.conta-digital-account__feature-mockup img[src*="lock-icon"]:hover {
|
|
transform: scale(1.1);
|
|
filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.15));
|
|
}
|
|
|
|
.conta-digital-account__feature-card:nth-child(1) .conta-digital-account__feature-mockup {
|
|
right: 40px;
|
|
bottom: 40px;
|
|
}
|
|
|
|
/* Opcional: Adicionar uma animação sutil */
|
|
@keyframes lockPulse {
|
|
0%, 100% { transform: scale(1); }
|
|
50% { transform: scale(1.05); }
|
|
}
|
|
|
|
.conta-digital-account__feature-mockup img[src*="lock-icon"] {
|
|
animation: lockPulse 3s ease-in-out infinite;
|
|
}
|
|
|
|
.conta-digital-account__feature-mockup img[src*="lock-icon"]:hover {
|
|
animation: none;
|
|
transform: scale(1.1);
|
|
}
|
|
|
|
/* Garantir que o cadeado apareça em desktop */
|
|
@media (min-width: 768px) {
|
|
.conta-digital-account__feature-mockup {
|
|
display: flex !important;
|
|
align-items: center;
|
|
justify-content: center;
|
|
right: 30px;
|
|
bottom: 30px;
|
|
max-width: 100px;
|
|
}
|
|
}
|
|
|
|
/* API Documentation Section */
|
|
.api-documentation {
|
|
background: #000;
|
|
padding: 80px 20px;
|
|
color: #fff;
|
|
overflow: hidden;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.api-documentation__container {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 60px;
|
|
max-width: 1200px;
|
|
width: 100%;
|
|
padding: 75px 26px 75px 75px;
|
|
border-radius: 60px;
|
|
backdrop-filter: blur(10px);
|
|
position: relative;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
/* Left side content */
|
|
.api-documentation__content {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 26px;
|
|
align-items: flex-start;
|
|
justify-content: center;
|
|
flex-shrink: 0;
|
|
flex: 1;
|
|
}
|
|
|
|
.api-documentation__text {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 30px;
|
|
align-items: flex-start;
|
|
justify-content: center;
|
|
}
|
|
|
|
.api-documentation__title {
|
|
font-family: 'Space Grotesk', sans-serif;
|
|
font-weight: 400;
|
|
color: #ffffff;
|
|
letter-spacing: -0.4px;
|
|
margin: 0;
|
|
text-align: left;
|
|
font-size: clamp(1.7rem, 3vw, 2.4rem);
|
|
}
|
|
|
|
/* Right side visual mockup */
|
|
.api-documentation__visual {
|
|
position: relative;
|
|
display: grid;
|
|
grid-template-columns: max-content;
|
|
grid-template-rows: max-content;
|
|
place-items: start;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
/* Payment card */
|
|
.api-documentation__payment-card {
|
|
background: linear-gradient(240deg, rgba(70, 70, 70, 0.85) -20.01%, rgba(0, 0, 0, 0.85) 129.53%);
|
|
backdrop-filter: blur(10px);
|
|
border-radius: 40px;
|
|
padding: 40px;
|
|
box-shadow: 19px 26px 69px rgba(0, 0, 0, 0.31);
|
|
margin-left: 61px;
|
|
margin-top: 15px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 28px;
|
|
align-items: flex-start;
|
|
justify-content: flex-start;
|
|
}
|
|
|
|
.api-documentation__payment-title {
|
|
font-family: 'Space Grotesk', sans-serif;
|
|
font-size: 20px;
|
|
font-weight: 400;
|
|
color: rgba(255, 255, 255, 0.57);
|
|
letter-spacing: 0.4px;
|
|
margin: 0;
|
|
text-align: left;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.api-documentation__payment-content {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 28px;
|
|
align-items: flex-start;
|
|
justify-content: flex-start;
|
|
}
|
|
|
|
.api-documentation__payment-row {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: flex-start;
|
|
gap: 128px;
|
|
}
|
|
|
|
.api-documentation__payment-labels {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 8px;
|
|
align-items: flex-start;
|
|
justify-content: center;
|
|
}
|
|
|
|
.api-documentation__payment-labels span {
|
|
font-family: 'Space Grotesk', sans-serif;
|
|
font-size: 16px;
|
|
font-weight: 400;
|
|
color: rgba(255, 255, 255, 0.31);
|
|
line-height: 25px;
|
|
letter-spacing: 0.32px;
|
|
text-align: left;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.api-documentation__payment-values {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 8px;
|
|
text-align: right;
|
|
width: 135px;
|
|
align-items: flex-end;
|
|
justify-content: center;
|
|
}
|
|
|
|
.api-documentation__payment-values span {
|
|
font-family: 'Space Grotesk', sans-serif;
|
|
font-size: 16px;
|
|
font-weight: 400;
|
|
color: rgba(255, 255, 255, 0.57);
|
|
line-height: 25px;
|
|
letter-spacing: 0.32px;
|
|
text-align: right;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.api-documentation__payment-divider {
|
|
height: 0;
|
|
width: 100%;
|
|
position: relative;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.api-documentation__payment-divider::after {
|
|
content: '';
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
top: -1px;
|
|
height: 1px;
|
|
background: rgba(255, 255, 255, 0.2);
|
|
}
|
|
|
|
.api-documentation__payment-total {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
width: 100%;
|
|
}
|
|
|
|
.api-documentation__total-label {
|
|
font-family: 'Space Grotesk', sans-serif;
|
|
font-size: 20px;
|
|
font-weight: 400;
|
|
color: rgba(255, 255, 255, 0.31);
|
|
letter-spacing: 0.4px;
|
|
text-align: left;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.api-documentation__total-value {
|
|
font-family: 'Space Grotesk', sans-serif;
|
|
font-size: 20px;
|
|
font-weight: 400;
|
|
color: rgba(255, 255, 255, 0.57);
|
|
letter-spacing: 0.4px;
|
|
text-align: left;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
/* Status indicators */
|
|
.api-documentation__status-indicators {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
pointer-events: none;
|
|
z-index: 20;
|
|
}
|
|
|
|
.api-documentation__status-card {
|
|
position: absolute;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
padding: 12px;
|
|
background: rgba(0, 0, 0, 0.2);
|
|
backdrop-filter: blur(25px);
|
|
border-radius: 12px;
|
|
pointer-events: auto;
|
|
z-index: 10;
|
|
border: 1px solid rgba(255, 255, 255, 0.2);
|
|
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
|
|
}
|
|
|
|
.api-documentation__status-card--approved {
|
|
bottom: -40px;
|
|
left: 61px;
|
|
width: 174px;
|
|
height: 63px;
|
|
}
|
|
|
|
.api-documentation__status-card--rejected {
|
|
top: 15px;
|
|
right: 0;
|
|
width: 177px;
|
|
height: 64px;
|
|
}
|
|
|
|
.api-documentation__status-icon {
|
|
width: 39px;
|
|
height: 39px;
|
|
border-radius: 50%;
|
|
background: #656565;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.api-documentation__status-info {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 2px;
|
|
align-items: flex-start;
|
|
justify-content: flex-start;
|
|
text-align: left;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.api-documentation__status-amount {
|
|
font-family: 'Space Grotesk', sans-serif;
|
|
font-size: 18px;
|
|
font-weight: 700;
|
|
color: rgba(255, 255, 255, 0.75);
|
|
letter-spacing: -0.18px;
|
|
text-align: left;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.api-documentation__status-label {
|
|
font-family: 'Space Grotesk', sans-serif;
|
|
font-size: 12px;
|
|
font-weight: 400;
|
|
color: #41fe95;
|
|
letter-spacing: -0.12px;
|
|
text-align: left;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.api-documentation__status-card--rejected .api-documentation__status-label {
|
|
color: #FF9797;
|
|
}
|
|
|
|
/* Decorative elements */
|
|
.api-documentation__decorative-elements {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.api-documentation__decorative-card {
|
|
position: absolute;
|
|
width: 80px;
|
|
height: 85px;
|
|
background: rgba(255, 255, 255, 0.1);
|
|
border-radius: 12px;
|
|
backdrop-filter: blur(5px);
|
|
}
|
|
|
|
.api-documentation__decorative-card--1 {
|
|
top: 158px;
|
|
left: 442px;
|
|
}
|
|
|
|
.api-documentation__decorative-card--2 {
|
|
top: 252px;
|
|
left: 575px;
|
|
}
|
|
|
|
.api-documentation__decorative-icon {
|
|
position: absolute;
|
|
background: rgba(255, 255, 255, 0.05);
|
|
border-radius: 8px;
|
|
}
|
|
|
|
.api-documentation__decorative-icon--1 {
|
|
top: 71px;
|
|
left: 522px;
|
|
width: 63px;
|
|
height: 67px;
|
|
}
|
|
|
|
.api-documentation__decorative-icon--2 {
|
|
top: 31px;
|
|
left: 560px;
|
|
width: 62px;
|
|
height: 67px;
|
|
}
|
|
|
|
/* Fade animations */
|
|
.fade-in {
|
|
opacity: 0;
|
|
animation: fadeIn 1s ease forwards;
|
|
}
|
|
|
|
.fade-up {
|
|
opacity: 0;
|
|
transform: translateY(30px);
|
|
transition: all 0.8s ease;
|
|
}
|
|
|
|
@keyframes fadeIn {
|
|
to {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
/* Utility classes */
|
|
.xs\:hidden {
|
|
display: none;
|
|
}
|
|
|
|
.lg\:flex {
|
|
display: flex;
|
|
}
|
|
|
|
.lg\:hidden {
|
|
display: none;
|
|
}
|
|
|
|
.section {
|
|
padding: 80px 0;
|
|
}
|
|
|
|
/* Responsive Styles */
|
|
@media (min-width: 768px) {
|
|
.conta-digital-hero {
|
|
max-height: min-content;
|
|
min-height: auto;
|
|
padding-top: 200px !important;
|
|
}
|
|
|
|
.conta-digital-hero__container {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 40px;
|
|
}
|
|
|
|
.conta-digital-hero {
|
|
padding: 100px 20px 60px;
|
|
}
|
|
|
|
.conta-digital-hero__image {
|
|
justify-content: flex-end;
|
|
}
|
|
|
|
.conta-digital-hero__content {
|
|
align-items: flex-start;
|
|
text-align: left;
|
|
gap: 30px;
|
|
}
|
|
|
|
.conta-digital-hero__title {
|
|
max-width: 458px;
|
|
}
|
|
|
|
.conta-digital-hero__subtitle {
|
|
font-size: 1.4rem;
|
|
max-width: 429px;
|
|
}
|
|
|
|
.conta-digital-features__row {
|
|
flex-direction: row;
|
|
justify-content: space-between;
|
|
gap: 20px;
|
|
}
|
|
|
|
.conta-digital-features__card {
|
|
width: 238px;
|
|
padding: 40px;
|
|
}
|
|
|
|
/* Account Features Section */
|
|
.conta-digital-account__main {
|
|
flex-direction: row;
|
|
gap: 60px;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.conta-digital-account__content {
|
|
text-align: left;
|
|
gap: 30px;
|
|
max-width: 500px;
|
|
}
|
|
|
|
.conta-digital-account__features {
|
|
flex-direction: row;
|
|
gap: 20px;
|
|
}
|
|
|
|
.conta-digital-account__feature-card {
|
|
flex: 1;
|
|
min-height: 320px;
|
|
}
|
|
|
|
.conta-digital-account__feature-mockup {
|
|
display: block;
|
|
}
|
|
|
|
/* Show desktop layout, hide mobile */
|
|
.conta-digital-pix__mobile {
|
|
display: none;
|
|
}
|
|
|
|
.conta-digital-pix__desktop {
|
|
display: flex;
|
|
flex-direction: row;
|
|
gap: 60px;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.conta-digital-pix__mockup {
|
|
width: 400px;
|
|
height: 300px;
|
|
}
|
|
|
|
.conta-digital-pix__phone {
|
|
width: 280px;
|
|
height: 360px;
|
|
}
|
|
|
|
.conta-digital-pix__content {
|
|
text-align: left;
|
|
max-width: 500px;
|
|
gap: 25px;
|
|
}
|
|
|
|
.conta-digital-pix__features {
|
|
flex-direction: row;
|
|
gap: 39px;
|
|
justify-content: flex-start;
|
|
}
|
|
}
|
|
|
|
@media (min-width: 1024px) {
|
|
.xs\:hidden {
|
|
display: block;
|
|
}
|
|
|
|
.lg\:hidden {
|
|
display: none;
|
|
}
|
|
|
|
.conta-digital-hero__container {
|
|
gap: 60px;
|
|
}
|
|
|
|
.conta-digital-hero {
|
|
padding: 120px 20px 60px;
|
|
}
|
|
|
|
.conta-digital-pix__desktop {
|
|
gap: 98px;
|
|
}
|
|
|
|
.conta-digital-pix__mockup {
|
|
width: 537px;
|
|
height: 390px;
|
|
}
|
|
|
|
.conta-digital-pix__phone {
|
|
width: 354px;
|
|
height: 457px;
|
|
}
|
|
|
|
.conta-digital-account__main {
|
|
gap: 80px;
|
|
}
|
|
|
|
.conta-digital-account__features {
|
|
gap: 30px;
|
|
}
|
|
}
|
|
|
|
/* Mobile styles for API Documentation */
|
|
@media (max-width: 768px) {
|
|
.api-documentation {
|
|
padding: 60px 20px;
|
|
}
|
|
|
|
.api-documentation__container {
|
|
flex-direction: column;
|
|
gap: 40px; /* Aumentado de 30px para 40px */
|
|
padding: 30px 20px;
|
|
border-radius: 20px;
|
|
max-width: 100%;
|
|
position: relative;
|
|
}
|
|
|
|
.api-documentation__content {
|
|
width: 100%;
|
|
text-align: center;
|
|
align-items: center;
|
|
order: 1;
|
|
position: relative;
|
|
z-index: 10; /* Garantir que o conteúdo fique acima */
|
|
}
|
|
|
|
.api-documentation__text {
|
|
align-items: center;
|
|
text-align: center;
|
|
margin-bottom: 20px; /* Espaçamento extra */
|
|
}
|
|
|
|
.api-documentation__title {
|
|
width: 100%;
|
|
text-align: center;
|
|
font-size: clamp(1.5rem, 4vw, 2rem);
|
|
line-height: 1.2;
|
|
margin-bottom: 20px; /* Espaçamento extra */
|
|
}
|
|
|
|
/* Botão com z-index alto */
|
|
.link-cta.white {
|
|
position: relative;
|
|
z-index: 15;
|
|
margin-top: 20px;
|
|
}
|
|
|
|
.api-documentation__visual {
|
|
order: 2;
|
|
transform: scale(0.6); /* Reduzido de 0.7 para 0.6 */
|
|
margin: 20px 0 -60px 0; /* Ajustado: top positivo, bottom negativo */
|
|
width: 100%;
|
|
max-width: 300px; /* Reduzido de 350px */
|
|
align-self: center;
|
|
position: relative;
|
|
z-index: 5; /* Z-index menor que o conteúdo */
|
|
}
|
|
|
|
.api-documentation__payment-card {
|
|
margin: 0;
|
|
min-width: 220px; /* Reduzido */
|
|
max-width: 250px; /* Reduzido */
|
|
padding: 20px; /* Reduzido */
|
|
border-radius: 15px; /* Reduzido */
|
|
}
|
|
|
|
.api-documentation__payment-title {
|
|
font-size: 14px; /* Reduzido */
|
|
text-align: center;
|
|
width: 100%;
|
|
}
|
|
|
|
.api-documentation__payment-row {
|
|
gap: 40px; /* Reduzido */
|
|
flex-direction: column;
|
|
align-items: center;
|
|
text-align: center;
|
|
}
|
|
|
|
.api-documentation__payment-labels,
|
|
.api-documentation__payment-values {
|
|
align-items: center;
|
|
text-align: center;
|
|
width: 100%;
|
|
}
|
|
|
|
.api-documentation__payment-labels span,
|
|
.api-documentation__payment-values span {
|
|
font-size: 12px; /* Reduzido */
|
|
text-align: center;
|
|
line-height: 18px;
|
|
}
|
|
|
|
.api-documentation__payment-total {
|
|
justify-content: center;
|
|
gap: 15px; /* Reduzido */
|
|
}
|
|
|
|
.api-documentation__total-label,
|
|
.api-documentation__total-value {
|
|
font-size: 14px; /* Reduzido */
|
|
}
|
|
|
|
/* Status cards ainda menores */
|
|
.api-documentation__status-card--approved {
|
|
bottom: -15px;
|
|
left: 5px;
|
|
width: 120px; /* Reduzido */
|
|
height: 40px; /* Reduzido */
|
|
padding: 6px; /* Reduzido */
|
|
}
|
|
|
|
.api-documentation__status-card--rejected {
|
|
top: 5px;
|
|
right: 5px;
|
|
width: 120px; /* Reduzido */
|
|
height: 40px; /* Reduzido */
|
|
padding: 6px; /* Reduzido */
|
|
}
|
|
|
|
.api-documentation__status-icon {
|
|
width: 25px; /* Reduzido */
|
|
height: 25px; /* Reduzido */
|
|
}
|
|
|
|
.api-documentation__status-amount {
|
|
font-size: 12px; /* Reduzido */
|
|
}
|
|
|
|
.api-documentation__status-label {
|
|
font-size: 9px; /* Reduzido */
|
|
}
|
|
|
|
/* Esconder elementos decorativos no mobile */
|
|
.api-documentation__decorative-card,
|
|
.api-documentation__decorative-icon {
|
|
display: none;
|
|
}
|
|
|
|
/* Outros ajustes mobile já existentes */
|
|
.conta-digital-features__row {
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 15px;
|
|
}
|
|
|
|
.conta-digital-features__card {
|
|
max-width: 99vw;
|
|
min-width: 0;
|
|
padding: 20px;
|
|
border-radius: 14px;
|
|
gap: 14px;
|
|
}
|
|
|
|
.conta-digital-account__main {
|
|
flex-direction: column;
|
|
gap: 30px;
|
|
}
|
|
|
|
.conta-digital-account__content {
|
|
text-align: center;
|
|
}
|
|
|
|
.conta-digital-account__features {
|
|
flex-direction: column;
|
|
gap: 20px;
|
|
}
|
|
|
|
.conta-digital-account__feature-mockup {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
/* Mobile pequeno - ainda mais compacto */
|
|
@media (max-width: 480px) {
|
|
.api-documentation {
|
|
padding: 40px 15px;
|
|
}
|
|
|
|
.api-documentation__container {
|
|
padding: 25px 15px;
|
|
gap: 30px;
|
|
border-radius: 15px;
|
|
}
|
|
|
|
.api-documentation__visual {
|
|
transform: scale(0.5); /* Ainda menor */
|
|
margin: 10px 0 -70px 0; /* Margin negativo maior */
|
|
max-width: 280px;
|
|
}
|
|
|
|
.api-documentation__payment-card {
|
|
min-width: 200px;
|
|
max-width: 220px;
|
|
padding: 15px;
|
|
border-radius: 12px;
|
|
}
|
|
|
|
.api-documentation__payment-title {
|
|
font-size: 12px;
|
|
}
|
|
|
|
.api-documentation__payment-row {
|
|
gap: 30px;
|
|
}
|
|
|
|
.api-documentation__payment-labels span,
|
|
.api-documentation__payment-values span {
|
|
font-size: 10px;
|
|
line-height: 16px;
|
|
}
|
|
|
|
.api-documentation__total-label,
|
|
.api-documentation__total-value {
|
|
font-size: 12px;
|
|
}
|
|
|
|
.api-documentation__status-card--approved,
|
|
.api-documentation__status-card--rejected {
|
|
width: 100px;
|
|
height: 35px;
|
|
padding: 4px;
|
|
}
|
|
|
|
.api-documentation__status-icon {
|
|
width: 20px;
|
|
height: 20px;
|
|
}
|
|
|
|
.api-documentation__status-amount {
|
|
font-size: 10px;
|
|
}
|
|
|
|
.api-documentation__status-label {
|
|
font-size: 8px;
|
|
}
|
|
}
|
|
|
|
/* Tablet - ajustes intermediários */
|
|
@media (max-width: 1024px) and (min-width: 769px) {
|
|
.api-documentation__container {
|
|
gap: 40px;
|
|
padding: 50px 30px;
|
|
}
|
|
|
|
.api-documentation__visual {
|
|
transform: scale(0.85);
|
|
}
|
|
|
|
.api-documentation__payment-card {
|
|
padding: 35px;
|
|
margin-left: 30px;
|
|
}
|
|
}
|
|
</style> |