/* ============ TOKENS ============ */ :root{ /* Paleta "vibrante" (redesenho) — nomes de variável mantidos por compatibilidade com o resto do CSS, só os valores mudaram: --gold agora é o acento magenta, --olive é o verde-teal, --wine é o coral. */ --bg:#ffffff; --text:#16202e; --muted:rgba(22,32,46,.64); --surface:#eef2f6; --surface-2:#ffffff; --primary:#1e3a5f; --primary-hover:#17324f; --on-primary:#ffffff; --border:rgba(22,32,46,.12); --gold:#d6127a; --olive:#0e9f6e; --wine:#ff5b7a; --blue:#2f6fed; --shadow:0 14px 34px -14px rgba(30,58,95,.24); --shadow-sm:0 6px 16px -8px rgba(30,58,95,.18); --radius:20px; --font-display:"Bricolage Grotesque",var(--font-body); --font-body:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif; } /* Escuro é o padrão da página (a tag já nasce com data-theme="dark" em todas as páginas do site). :root/[data-theme="light"] só entra em cena se o visitante clicar no toggle e escolher claro (fica salvo no localStorage a partir daí, ver site.js). */ html[data-theme="dark"]{ --bg:#0d1420; --text:#eef2f6; --muted:rgba(238,242,246,.66); --surface:#16202e; --surface-2:#0f1826; --primary:#6f93b8; --primary-hover:#8babc9; --on-primary:#0d1420; --border:rgba(238,242,246,.14); --gold:#ff62b0; --olive:#3fe0a5; --wine:#ff7f94; --blue:#6c93ff; --shadow:0 14px 34px -14px rgba(0,0,0,.55); --shadow-sm:0 6px 16px -8px rgba(0,0,0,.4); } /* ============ BASE ============ */ *,*::before,*::after{box-sizing:border-box} html{scroll-behavior:smooth;scroll-padding-top:84px} body{ margin:0; background:var(--bg); color:var(--text); font-family:var(--font-body); font-size:17px; line-height:1.65; -webkit-font-smoothing:antialiased; overflow-x:hidden; transition:background-color .35s ease,color .35s ease; } img,svg{display:block;max-width:100%} a{color:inherit} h1,h2,h3{font-family:var(--font-display);line-height:1.15;margin:0 0 .5em;font-weight:600;letter-spacing:-.01em} h1{font-size:clamp(2.6rem,7.5vw,5rem)} h2{font-size:clamp(1.7rem,4vw,2.5rem)} h3{font-size:1.15rem;font-family:var(--font-body);font-weight:700;letter-spacing:0} p{margin:0 0 1em} .container{width:min(1120px,92%);margin-inline:auto} section{padding:clamp(5rem,10vw,8.5rem) 0;position:relative} .eyebrow{ display:inline-flex;align-items:center;gap:.5rem; font-size:.78rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase; color:var(--primary);margin-bottom:1rem; } .eyebrow::before{content:"";width:22px;height:2px;background:var(--primary);border-radius:2px} .lead{font-size:clamp(1.05rem,2vw,1.25rem);color:var(--muted);max-width:62ch} :focus-visible{outline:3px solid var(--primary);outline-offset:3px;border-radius:6px} /* ============ BUTTONS ============ */ .btn{ display:inline-flex;align-items:center;justify-content:center;gap:.5rem; padding:.85rem 1.7rem;border-radius:999px;font-weight:700;font-size:1rem; text-decoration:none;cursor:pointer;border:2px solid transparent; font-family:var(--font-body); transition:transform .18s ease,background-color .18s ease,color .18s ease,border-color .18s ease,box-shadow .18s ease; } .btn:active{transform:scale(.97)} .btn-primary{background:var(--primary);color:var(--on-primary);box-shadow:var(--shadow-sm)} .btn-primary:hover{background:var(--primary-hover)} .btn-outline{background:transparent;color:var(--text);border-color:var(--border)} .btn-outline:hover{border-color:var(--primary);color:var(--primary)} /* ============ HEADER ============ */ .site-header{ position:fixed;top:0;left:0;right:0;z-index:50; background:transparent; border-bottom:1px solid transparent; transition:background-color .35s ease,backdrop-filter .35s ease,border-color .35s ease,box-shadow .35s ease; } .site-header.is-scrolled{ background:color-mix(in srgb,var(--bg) 86%,transparent); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); border-bottom-color:var(--border); box-shadow:var(--shadow-sm); } .nav{ display:flex;align-items:center;justify-content:space-between; height:88px;gap:1rem; transition:height .3s ease; } .site-header.is-scrolled .nav{height:66px} .brand{ display:flex;align-items:center; font-family:var(--font-display); text-decoration:none; } /* Só o texto "ATLAS" — sem selo/logo. Mesmo tamanho/peso/tracking do wordmark da sidebar do app logado (font-light, 40px, tracking .16em) — mesma marca, mesmo peso visual nas duas telas. */ .brand-word{ font-size:40px;font-weight:300;letter-spacing:.16em; text-shadow:0 0 16px color-mix(in srgb, var(--primary) 35%, transparent); transition:font-size .3s ease; } .site-header.is-scrolled .brand-word{font-size:32px} .nav-links{ display:flex;align-items:center;gap:1.6rem;list-style:none;margin:0;padding:0; } .nav-links a{ text-decoration:none;font-size:.95rem;font-weight:600;color:var(--muted); transition:color .18s ease; } .nav-links a:hover{color:var(--primary)} .nav-links .btn-primary,.nav-links .btn-primary:hover{color:var(--on-primary)} .nav-links .btn-outline{color:var(--text)} .nav-links .btn-outline:hover{color:var(--primary)} .nav-links .btn{padding:.55rem 1.2rem;font-size:.9rem} .nav-actions{display:flex;align-items:center;gap:.75rem} .theme-toggle{ background:transparent;border:1px solid var(--border);border-radius:999px; width:40px;height:40px;display:grid;place-items:center;cursor:pointer;color:var(--text); transition:border-color .18s ease,color .18s ease; } .theme-toggle:hover{border-color:var(--primary);color:var(--primary)} .theme-toggle .icon-sun{display:none} html[data-theme="dark"] .theme-toggle .icon-sun{display:block} html[data-theme="dark"] .theme-toggle .icon-moon{display:none} .hamburger{ display:none;background:transparent;border:1px solid var(--border);border-radius:12px; width:44px;height:44px;cursor:pointer;color:var(--text); align-items:center;justify-content:center; } @media (max-width:820px){ .hamburger{display:flex} .nav-links{ position:fixed;inset:88px 0 auto 0; flex-direction:column;align-items:stretch;gap:0; background:var(--bg);border-bottom:1px solid var(--border); padding:.5rem 4%;box-shadow:var(--shadow); transform:translateY(-8px);opacity:0;visibility:hidden;pointer-events:none; transition:transform .22s ease,opacity .22s ease,visibility .22s; } .nav-links.open{transform:translateY(0);opacity:1;visibility:visible;pointer-events:auto} .nav-links li{border-bottom:1px solid var(--border)} .nav-links li:last-child{border-bottom:0;padding:1rem 0} .nav-links a{display:block;padding:1rem .25rem;font-size:1.05rem} .nav-links .btn{display:flex;width:100%} } /* ============ HERO ============ */ #hero{ padding-top:clamp(7rem,13vw,10.5rem);padding-bottom:clamp(4rem,8vw,6rem);overflow:hidden; background:linear-gradient(180deg,color-mix(in srgb,var(--primary) 8%,var(--bg)) 0%,var(--bg) 60%); } .hero-flex{display:grid;gap:2.5rem;align-items:center} @media (min-width:960px){.hero-flex{grid-template-columns:1.1fr .9fr}} .hero-content{max-width:620px} /* marca-texto: destaque em qualquer h1/h2, basta envolver a palavra em */ h1 em,h2 em{ font-style:normal;position:relative;color:var(--text);z-index:1; white-space:nowrap; } h1 em::after,h2 em::after{ content:"";position:absolute;left:-.12em;right:-.08em;bottom:.06em;height:.34em; background:var(--gold);opacity:.5;z-index:-1;border-radius:6px; transform:rotate(-1.4deg); } .badge-soon{ display:inline-flex;align-items:center;gap:.5rem; background:var(--surface);border:1px solid var(--border); padding:.4rem 1rem;border-radius:999px; font-size:.82rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase; margin-bottom:1.4rem; } .badge-soon .dot{ width:8px;height:8px;border-radius:50%;background:var(--olive); animation:pulse 2.2s ease-in-out infinite; } @keyframes pulse{ 0%,100%{transform:scale(1);opacity:1} 50%{transform:scale(1.5);opacity:.5} } .hero-blob{ position:absolute;border-radius:50%;filter:blur(90px);opacity:.5;pointer-events:none;z-index:-1; } .hero-blob.b1{width:480px;height:480px;background:var(--primary);opacity:.14;top:-140px;right:-160px} .hero-blob.b2{width:360px;height:360px;background:var(--gold);opacity:.12;bottom:-120px;left:-140px} /* Letra "A" gigante no hero — mesma marca d'água do menu, numa escala que só faz sentido com o espaço de uma seção inteira (referência: painel esquerdo do login do app). #hero já tem overflow:hidden, então ela fica bem recortada nas bordas da seção, sem vazar pro resto da página. */ .hero-a-mark{ position:absolute;right:-8%;top:-16%;z-index:-1; font-family:"Archivo Black","Bricolage Grotesque",sans-serif; font-size:min(46vw,640px);line-height:1; color:color-mix(in srgb, var(--primary) 5%, transparent); -webkit-text-stroke:1px color-mix(in srgb, var(--primary) 14%, transparent); pointer-events:none;user-select:none; } /* ============ FORMAS DECORATIVAS ============ */ /* Círculos/quadrados soltos espalhados pelas seções — textura discreta que ecoa a mesma marca (cor do --primary), cada seção com uma forma/posição diferente pra não parecer repetição do mesmo elemento. */ .deco{position:absolute;pointer-events:none;z-index:-1} .deco-invert{border-color:rgba(255,255,255,.22) !important;background:transparent !important} .deco-circle{border-radius:50%;border:1.5px solid color-mix(in srgb, var(--primary) 26%, transparent)} .deco-square{border-radius:20px;border:1.5px solid color-mix(in srgb, var(--primary) 22%, transparent)} .deco-dot{border-radius:50%;background:color-mix(in srgb, var(--gold) 55%, transparent)} /* fluxo orgânico do hero — chips flutuantes conectados por uma linha curva */ .flow-visual{position:relative;min-height:460px;display:none} @media (min-width:960px){.flow-visual{display:block}} .flow-glow{position:absolute;border-radius:50%;filter:blur(70px);pointer-events:none} .flow-glow.g1{width:280px;height:280px;background:var(--primary);opacity:.2;top:-6%;right:6%} .flow-glow.g2{width:220px;height:220px;background:var(--gold);opacity:.16;bottom:2%;left:2%} .flow-path{position:absolute;inset:0;width:100%;height:100%;overflow:visible} .flow-path path{ fill:none;stroke:url(#flowGrad);stroke-width:2.5;stroke-linecap:round; stroke-dasharray:7 11; } .flow-chip{ position:absolute;display:inline-flex;align-items:center;gap:.55rem; background:var(--surface-2);border:1px solid var(--border); padding:.65rem 1.1rem;border-radius:999px; font-size:.86rem;font-weight:700;color:var(--text);white-space:nowrap; box-shadow:var(--shadow-sm); } .flow-chip .fc-dot{width:9px;height:9px;border-radius:50%;flex:none} .flow-chip.fc1{top:2%;left:6%} .flow-chip.fc2{top:34%;left:52%} .flow-chip.fc3{top:64%;left:10%} .flow-chip.fc4{top:87%;left:50%} /* waitlist form */ .waitlist{ display:flex;flex-direction:column;gap:.6rem;margin-top:1.8rem;max-width:520px; } .waitlist input[type="email"]{ width:100%; padding:.85rem 1.2rem;border-radius:999px; border:2px solid var(--border);background:var(--surface-2);color:var(--text); font-size:1rem;font-family:var(--font-body); transition:border-color .18s ease; } .waitlist .btn{align-self:flex-start} .waitlist input[type="email"]:focus{border-color:var(--primary);outline:none} .waitlist input[type="email"]::placeholder{color:var(--muted)} .form-msg{ font-size:.92rem;font-weight:600; margin-top:.7rem;margin-bottom:0; /* anula o margin do p base */ height:3em; /* espaço fixo: 2 linhas no desktop */ line-height:1.45; overflow:visible; visibility:hidden; } @media (max-width:640px){ .form-msg{height:4.5em} /* 3 linhas no mobile */ } .form-msg.ok,.form-msg.err{visibility:visible} .form-msg.ok{color:var(--olive)} .form-msg.err{color:var(--wine)} .hero-note{font-size:.85rem;color:var(--muted);margin-top:0} /* ============ STATS BAND ============ */ #stats{background:var(--text);padding:clamp(2.6rem,5vw,3.6rem) 0} .stats-grid{ display:grid;gap:1.6rem;text-align:center; grid-template-columns:repeat(2,1fr); } @media (min-width:760px){.stats-grid{grid-template-columns:repeat(4,1fr)}} .stat-num{ font-family:var(--font-display);font-weight:700; font-size:clamp(2.1rem,4.5vw,2.9rem); color:var(--bg);line-height:1;margin-bottom:.4rem; } .stat-label{ font-size:.85rem;font-weight:600;color:color-mix(in srgb,var(--bg) 68%,transparent); } /* ============ GENERIC CARDS ============ */ .cards{ display:grid;gap:1.2rem;margin-top:2.5rem; grid-template-columns:1fr; } @media (min-width:640px){.cards{grid-template-columns:repeat(2,1fr)}} @media (min-width:980px){.cards{grid-template-columns:repeat(3,1fr)}} .card{ background:var(--surface-2);border:1px solid var(--border); border-radius:var(--radius);padding:1.6rem; box-shadow:var(--shadow-sm); transition:transform .22s ease,box-shadow .22s ease; } .card:hover{transform:translateY(-4px);box-shadow:var(--shadow)} .card p{color:var(--muted);font-size:.95rem;margin:0} .card h3{margin:.9rem 0 .4rem} .card-icon{ width:46px;height:46px;border-radius:13px; display:grid;place-items:center; background:var(--surface); } .card-icon svg{width:22px;height:22px} .ic-terracota{color:var(--primary)} .ic-gold{color:var(--gold)} .ic-olive{color:var(--olive)} .ic-wine{color:var(--wine)} .ic-blue{color:var(--blue)} /* ============ SAAS SECTION ============ */ #o-que-e{background:var(--surface)} .saas-grid{display:grid;gap:2.5rem;align-items:center} @media (min-width:900px){.saas-grid{grid-template-columns:1fr 1fr}} .saas-points{list-style:none;margin:1.5rem 0 0;padding:0;display:grid;gap:1rem} .saas-points li{ display:flex;gap:.9rem;align-items:flex-start; background:var(--surface-2);border:1px solid var(--border); border-radius:var(--radius);padding:1rem 1.2rem; } .saas-points .check{ flex:none;width:26px;height:26px;border-radius:50%; background:var(--olive);color:var(--bg); display:grid;place-items:center;margin-top:.15rem; } .saas-points .check svg{width:14px;height:14px} .saas-points strong{display:block} .saas-points span{color:var(--muted);font-size:.93rem} /* ============ ROADMAP ============ */ .roadmap{ display:grid;gap:1.2rem;margin-top:2.5rem; } @media (min-width:760px){.roadmap{grid-template-columns:repeat(2,1fr)}} .roadmap .card{display:flex;flex-direction:column;gap:.4rem} .status{ align-self:flex-start; font-size:.72rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase; padding:.3rem .8rem;border-radius:999px;margin-bottom:.6rem; } .status-dev{background:color-mix(in srgb,var(--olive) 16%,transparent);color:var(--olive);border:1px solid color-mix(in srgb,var(--olive) 40%,transparent)} .status-plan{background:color-mix(in srgb,var(--blue) 14%,transparent);color:var(--blue);border:1px solid color-mix(in srgb,var(--blue) 38%,transparent)} /* ============ DIFERENCIAL ============ */ #diferencial{background:var(--surface)} .dif-grid{display:grid;gap:2.5rem;align-items:center} @media (min-width:900px){.dif-grid{grid-template-columns:1fr 1fr}} .dif-list{list-style:none;margin:1.6rem 0 0;padding:0;display:grid;gap:1.1rem} .dif-list li{display:flex;gap:.9rem;align-items:flex-start} .dif-list .n{ flex:none;width:34px;height:34px;border-radius:11px; background:var(--primary);color:var(--on-primary); font-family:var(--font-display);font-weight:700;font-size:1rem; display:grid;place-items:center; } .dif-list span{color:var(--muted)} .dif-list strong{color:var(--text)} .funil-tipos{ background:var(--surface-2);border:1px solid var(--border); border-radius:calc(var(--radius) + 8px);padding:1.8rem;box-shadow:var(--shadow); } .funil-tipos h3{margin-top:0} .tipo-chips{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1rem} .chip{ padding:.5rem 1rem;border-radius:999px;font-size:.86rem;font-weight:700; border:1.5px solid var(--border);background:var(--surface); } .chip.c1{border-color:var(--primary);color:var(--primary)} .chip.c2{border-color:var(--gold);color:var(--gold)} .chip.c3{border-color:var(--olive);color:var(--olive)} .chip.c4{border-color:var(--wine);color:var(--wine)} .chip.c5{border-color:var(--blue);color:var(--blue)} .funil-tipos p.small{font-size:.9rem;color:var(--muted);margin:1.2rem 0 0} /* ============ CTA FINAL ============ */ #lista-de-espera .cta-box{ background:linear-gradient(135deg,var(--primary),color-mix(in srgb,var(--primary) 70%,var(--gold))); color:var(--on-primary); border-radius:calc(var(--radius) + 10px); padding:clamp(2.5rem,6vw,4.5rem); text-align:center; box-shadow:var(--shadow); position:relative;overflow:hidden; } #lista-de-espera .cta-box::before{ content:"";position:absolute;width:340px;height:340px;border-radius:50%; background:rgba(255,255,255,.09);top:-160px;right:-120px; } #lista-de-espera .cta-box::after{ content:"";position:absolute;width:260px;height:260px;border-radius:50%; background:rgba(0,0,0,.08);bottom:-140px;left:-100px; } #lista-de-espera h2{color:inherit} #lista-de-espera h2 em{color:inherit} #lista-de-espera h2 em::after{background:var(--on-primary);opacity:.24} #lista-de-espera .lead{color:inherit;opacity:.9;margin-inline:auto} #lista-de-espera .waitlist{margin-inline:auto;align-items:center;position:relative;z-index:1} #lista-de-espera .waitlist input[type="email"]{border-color:transparent} #lista-de-espera .btn-invert{background:var(--bg);color:var(--text)} #lista-de-espera .btn-invert:hover{transform:translateY(-2px)} #lista-de-espera .form-msg{position:relative;z-index:1} #lista-de-espera .form-msg.ok{color:inherit;visibility:visible} #lista-de-espera .form-msg.err{color:inherit;text-decoration:underline;visibility:visible} /* ============ FOOTER ============ */ .site-footer{ border-top:1px solid var(--border); padding:2.5rem 0; } .footer-inner{ display:flex;flex-wrap:wrap;gap:1.2rem;align-items:center;justify-content:space-between; } .footer-links{display:flex;flex-wrap:wrap;gap:1.4rem;list-style:none;margin:0;padding:0} .footer-links a{text-decoration:none;color:var(--muted);font-size:.9rem;transition:color .18s ease} .footer-links a:hover{color:var(--primary)} .footer-copy{color:var(--muted);font-size:.88rem} .footer-brand{ display:flex;align-items:center;text-decoration:none; font-family:var(--font-display); } .footer-brand .brand-word{font-size:22px;text-shadow:none} /* ============ APP MODAL ============ */ .modal-overlay{ position:fixed;inset:0;z-index:100; display:flex;align-items:center;justify-content:center; padding:1.2rem; background:rgba(20,16,12,.6); backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px); opacity:0;visibility:hidden;transition:opacity .25s ease,visibility .25s; } .modal-overlay.open{opacity:1;visibility:visible} .modal-box{ position:relative;width:min(440px,100%); background:var(--surface-2);border:1px solid var(--border); border-radius:calc(var(--radius) + 10px); padding:2.4rem 2rem 2rem;text-align:center; box-shadow:var(--shadow); transform:translateY(18px) scale(.96);opacity:0; transition:transform .28s cubic-bezier(.2,.8,.2,1),opacity .28s ease; } .modal-overlay.open .modal-box{transform:translateY(0) scale(1);opacity:1} .modal-close{ position:absolute;top:.9rem;right:.9rem; width:34px;height:34px;border-radius:50%; background:var(--surface);border:1px solid var(--border); display:grid;place-items:center;cursor:pointer;color:var(--muted); transition:color .18s ease,border-color .18s ease; } .modal-close:hover{color:var(--primary);border-color:var(--primary)} .modal-icon{ width:64px;height:64px;margin:0 auto 1.1rem;border-radius:50%; background:linear-gradient(135deg,var(--primary) 0%,var(--gold) 120%); display:grid;place-items:center;font-size:1.9rem; box-shadow:var(--shadow-sm); } .modal-box h3{font-family:var(--font-display);font-size:1.5rem;margin-bottom:.6rem} .modal-box p{color:var(--muted);font-size:.98rem;margin-bottom:1.6rem} .modal-actions{display:flex;gap:.8rem;justify-content:center;flex-wrap:wrap} /* ============ PÁGINAS DE TEXTO (Termos/Privacidade) ============ */ .doc-page{padding-top:clamp(7rem,13vw,9rem)} .doc-page .container{max-width:760px} .doc-page h1{font-size:clamp(2rem,5vw,2.8rem);margin-bottom:.3em} .doc-updated{color:var(--muted);font-size:.9rem;margin-bottom:2.5rem} .doc-page h2{font-size:1.3rem;margin-top:2.2em} .doc-page p,.doc-page li{color:var(--muted);font-size:1rem} .doc-page ul,.doc-page ol{padding-left:1.3rem;display:grid;gap:.5rem} .doc-page strong{color:var(--text)} .doc-page a{color:var(--primary);text-decoration:underline} /* ============ FORMULÁRIO DE CONTATO ============ */ .contact-form{ display:flex;flex-direction:column;gap:1rem;max-width:520px;margin-top:2rem; } .contact-form label{font-size:.86rem;font-weight:700;margin-bottom:.35rem;display:block} .contact-form input,.contact-form textarea{ width:100%; padding:.85rem 1.1rem;border-radius:16px; border:2px solid var(--border);background:var(--surface-2);color:var(--text); font-size:1rem;font-family:var(--font-body); transition:border-color .18s ease; } .contact-form textarea{border-radius:20px;resize:vertical;min-height:130px} .contact-form input:focus,.contact-form textarea:focus{border-color:var(--primary);outline:none} .contact-form input::placeholder,.contact-form textarea::placeholder{color:var(--muted)} .contact-form .btn{align-self:flex-start;margin-top:.4rem} /* ============ REVEAL ANIMATION ============ */ .reveal{opacity:0;transform:translateY(22px);transition:opacity .6s ease,transform .6s ease} .reveal.visible{opacity:1;transform:none} @media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} .reveal{opacity:1;transform:none;transition:none} .badge-soon .dot{animation:none} *{transition-duration:.01ms !important;animation-duration:.01ms !important} }