/* ========================================================================== ATANA — folha compartilhada das landing pages (AtanaSoft / AtanaLabs) O tema vem da classe .t-soft ou .t-labs no . 1. Tokens 6. Cards 11. Rodapé 2. Base 7. Faixa escura 12. Reveal 3. Header 8. Números 13. Responsivo 4. Hero 9. Processo 5. Faixa/Sobre 10. CTA final ========================================================================== */ /* ── 1. Tokens ───────────────────────────────────────────────────────────── */ :root{ --text: #0f1b2d; --text-2: #51637a; --text-3: #8fa3bd; --paper: #ffffff; --paper-2: #f4f7fb; --hair: #e4eaf2; --wrap: 1200px; --pad: clamp(1.15rem, 4vw, 2.5rem); --ease: cubic-bezier(.22,.61,.36,1); --r: 14px; } /* AtanaSoft — azul (tons do logo oficial) */ .t-soft{ --b-050:#eef5ff; --b-300:#60a5fa; --b-400:#3aa8ff; --b-500:#0b63f6; --b-600:#0a52d6; --b-700:#1e3a8a; --ink:#050d1c; --ink-2:#0b1830; --grad:linear-gradient(100deg,#0b8cff,#0b63f6 55%,#0a52d6); --tint:rgba(11,99,246,.4); } /* AtanaLabs — verde (tons do logo oficial) */ .t-labs{ --b-050:#ecfdf5; --b-300:#6ee7b7; --b-400:#26de9f; --b-500:#17c98a; --b-600:#0b9a6a; --b-700:#065f46; --ink:#06110d; --ink-2:#0c2018; --grad:linear-gradient(100deg,#2ee6a6,#17c98a 50%,#0b9a6a); --tint:rgba(23,201,138,.32); } /* ── 2. Base ─────────────────────────────────────────────────────────────── */ *,*::before,*::after{ box-sizing:border-box; } html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; } body{ margin:0; font-family:"Inter", ui-sans-serif, system-ui, "Segoe UI", Roboto, Arial, sans-serif; font-size:16px; line-height:1.65; color:var(--text); background:var(--paper); -webkit-font-smoothing:antialiased; } h1,h2,h3,h4,p,figure,ul,ol{ margin:0; } ul{ padding:0; list-style:none; } img{ display:block; max-width:100%; } a{ color:inherit; text-decoration:none; } button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; } h1,h2,h3,.display{ font-family:"Montserrat", ui-sans-serif, system-ui, sans-serif; line-height:1.13; letter-spacing:-.015em; font-weight:700; } :focus-visible{ outline:2px solid var(--b-400); outline-offset:3px; border-radius:6px; } .sprite{ position:absolute; width:0; height:0; overflow:hidden; } .wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--pad); } .section{ padding-block:clamp(3.2rem, 7vw, 5.5rem); } .section--tight{ padding-block:clamp(2.2rem, 4.5vw, 3.4rem); } .section--soft{ background:var(--paper-2); } .eyebrow{ font-family:"Montserrat", sans-serif; font-size:.7rem; font-weight:600; letter-spacing:.26em; text-transform:uppercase; color:var(--b-500); } .eyebrow--muted{ color:#8fa3bd; } .eyebrow--on-dark{ color:var(--b-400); } .lead{ color:var(--text-2); max-width:46ch; } .on-dark .lead, .lead--on-dark{ color:#b7c6d8; } /* Logo oficial (assets/logos) + slogan alinhado ao início do nome */ .logo{ --lh:38px; display:inline-flex; flex-direction:column; gap:.3rem; } .logo picture, .logo img{ display:block; } .logo img{ height:var(--lh); width:auto; } .logo__tag{ padding-left:calc(var(--lh) * 1.3); /* 21% da largura do logo */ font-size:.5rem; font-weight:500; letter-spacing:.26em; text-transform:uppercase; line-height:1; color:#8195ad; white-space:nowrap; } .logo--on-dark .logo__tag{ color:#8fa3bb; } .foot .logo{ --lh:36px; } /* Botões */ .btn{ display:inline-flex; align-items:center; justify-content:center; gap:.7rem; padding:.85rem 1.65rem; border-radius:999px; font-family:"Montserrat", sans-serif; font-size:.82rem; font-weight:600; letter-spacing:.02em; white-space:nowrap; transition:transform .25s var(--ease), box-shadow .25s var(--ease), background-color .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease); } .btn svg{ width:17px; height:17px; transition:transform .25s var(--ease); } .btn:hover svg{ transform:translateX(4px); } .btn:hover{ transform:translateY(-2px); } .btn:active{ transform:translateY(0); } .btn--solid{ color:#fff; background-image:var(--grad); box-shadow:0 10px 24px -10px var(--tint), inset 0 1px 0 rgba(255,255,255,.22); } .btn--solid:hover{ box-shadow:0 16px 32px -10px var(--tint), inset 0 1px 0 rgba(255,255,255,.3); } .btn--ghost{ color:#fff; border:1px solid rgba(255,255,255,.38); } .btn--ghost:hover{ background:rgba(255,255,255,.1); border-color:rgba(255,255,255,.7); } .btn--outline{ color:var(--b-600); border:1px solid var(--b-500); } .btn--outline:hover{ background:var(--b-050); } .btn--link{ padding-inline:0; color:#dbe7f5; } .btn--link:hover{ color:#fff; } .btn--sm{ padding:.6rem 1.2rem; font-size:.76rem; } /* ── 3. Header ───────────────────────────────────────────────────────────── */ .hdr{ position:sticky; top:0; z-index:50; border-bottom:1px solid transparent; transition:background-color .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease); } .hdr__in{ display:flex; align-items:center; gap:1.5rem; min-height:74px; } .hdr__nav{ display:flex; align-items:center; gap:clamp(.9rem,1.9vw,1.9rem); margin-left:auto; } .hdr__nav a{ font-size:.86rem; font-weight:500; color:inherit; opacity:.82; transition:opacity .2s var(--ease), color .2s var(--ease); } .hdr__nav a:hover{ opacity:1; color:var(--b-500); } /* botão "Acompanhe Seu Projeto" */ .hdr__nav a.hdr__cta{ margin-left:.6rem; padding:.80rem 1.8rem; font-size:.95rem; font-weight:700; letter-spacing:0; color:#fff; opacity:1; } .hdr .hdr__nav a.hdr__cta:hover{ color:#fff; opacity:1; } .hdr--dark{ background:rgba(6,17,13,.9); color:#e8f2ec; backdrop-filter:blur(10px); } .hdr--dark.is-stuck{ background:rgba(6,17,13,.97); border-color:rgba(255,255,255,.09); } .hdr--dark .hdr__nav a:hover{ color:var(--b-400); } .hdr--light{ background:rgba(255,255,255,.92); color:var(--text); backdrop-filter:blur(10px); } .hdr--light.is-stuck{ border-color:var(--hair); box-shadow:0 6px 24px -18px rgba(15,27,45,.6); } .hdr__burger{ display:none; margin-left:auto; padding:.5rem; } .hdr__burger svg{ width:24px; height:24px; } /* ── 4. Hero ─────────────────────────────────────────────────────────────── */ .hero{ position:relative; isolation:isolate; background:var(--ink); color:#fff; min-height:clamp(460px, 62vw, 620px); display:flex; align-items:center; overflow:hidden; } /* fundo oficial da dimensão (assets/backgrounds) */ .hero__media{ position:absolute; inset:0 0 0 26%; z-index:-2; } .hero__media picture{ display:contents; } .hero__media img{ width:100%; height:100%; object-fit:cover; object-position:var(--hero-pos, 50% 50%); } .hero__media::after{ content:""; position:absolute; inset:0; background: linear-gradient(90deg, var(--ink) 0%, color-mix(in srgb, var(--ink) 80%, transparent) 22%, rgba(0,0,0,.3) 58%, rgba(0,0,0,.08) 100%), linear-gradient(0deg, color-mix(in srgb, var(--ink) 70%, transparent), transparent 35%); } .t-soft .hero__media{ --hero-pos:0% 50%; } .t-labs .hero__media{ --hero-pos:100% 50%; } .hero::before{ content:""; position:absolute; inset:0; z-index:-1; background:radial-gradient(60% 90% at 0% 50%, var(--ink) 30%, transparent 70%); } .hero__in{ padding-block:clamp(3rem,7vw,4.5rem); } .hero__box{ max-width:min(34rem, 90%); display:flex; flex-direction:column; gap:1.15rem; } .hero h1{ font-size:clamp(2.3rem, 5.2vw, 3.7rem); font-weight:700; color:#fff; } .hero h1 em{ font-style:normal; color:var(--b-400); display:block; } .hero .lead{ color:#c3d2e2; font-size:1rem; max-width:38ch; } .hero__actions{ display:flex; flex-wrap:wrap; align-items:center; gap:.85rem; margin-top:.6rem; } .keywords{ position:absolute; right:var(--pad); bottom:clamp(1.6rem,4vw,3rem); display:flex; flex-direction:column; gap:.5rem; font-family:"Montserrat", sans-serif; font-size:.7rem; font-weight:500; letter-spacing:.28em; text-transform:uppercase; text-align:right; color:rgba(255,255,255,.82); } /* ── 5. Barra de atuação + Sobre ─────────────────────────────────────────── */ .quickbar{ border-bottom:1px solid var(--hair); background:var(--paper); } .quickbar__in{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:1.2rem 2rem; padding-block:1.6rem; } .quickbar li{ display:flex; align-items:center; gap:.8rem; } .quickbar svg{ width:30px; height:30px; flex:0 0 auto; color:var(--b-500); } .quickbar span{ font-size:.84rem; font-weight:500; line-height:1.35; color:var(--text); max-width:12ch; } .duo{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.02fr); gap:clamp(2rem,5vw,4rem); align-items:center; } .duo__text{ display:flex; flex-direction:column; gap:1.1rem; align-items:flex-start; } .duo__text h2{ font-size:clamp(1.75rem,3.4vw,2.5rem); } .duo__text h2 em{ font-style:normal; color:var(--b-500); } .shot{ position:relative; overflow:hidden; border-radius:var(--r); min-height:clamp(280px, 32vw, 380px); background:var(--ink); isolation:isolate; } .shot img:not(.shot__mark){ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2; } .shot::before{ content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(115deg, rgba(0,0,0,.82) 8%, rgba(0,0,0,.35) 60%), var(--tint); } .shot__label{ position:absolute; left:clamp(1.4rem,3vw,2.6rem); top:50%; transform:translateY(-50%); display:flex; flex-direction:column; gap:.9rem; } .shot__label p{ font-family:"Montserrat", sans-serif; color:#fff; font-size:clamp(1rem,1.7vw,1.35rem); font-weight:500; line-height:1.6; letter-spacing:.16em; text-transform:uppercase; } .shot__label i{ display:block; width:52px; height:3px; background:var(--b-400); border-radius:2px; } .shot__label small{ font-size:.68rem; font-weight:500; letter-spacing:.24em; text-transform:uppercase; color:rgba(255,255,255,.78); line-height:1.9; } /* variante sem caixa-alta (AtanaSoft) */ .shot__label--plain p{ text-transform:none; letter-spacing:0; font-weight:400; font-size:clamp(1.15rem,2vw,1.65rem); line-height:1.42; } /* marca d'água sobre a foto */ .shot__mark{ position:absolute; right:8%; top:50%; translate:0 -50%; width:clamp(90px,14vw,170px); height:auto; opacity:.95; filter:drop-shadow(0 14px 40px var(--tint)); } /* ── 6. Cards ────────────────────────────────────────────────────────────── */ .cards{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1.15rem; } .card{ padding:1.6rem 1.5rem; background:var(--paper); border:1px solid var(--hair); border-radius:var(--r); display:flex; flex-direction:column; gap:.75rem; transition:transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease); } .section--soft .card{ background:var(--paper); } .card:hover{ transform:translateY(-4px); border-color:color-mix(in srgb, var(--b-500) 35%, var(--hair)); box-shadow:0 18px 40px -26px rgba(15,27,45,.55); } .card svg{ width:34px; height:34px; color:var(--b-500); } .card h3{ font-size:1.02rem; font-weight:600; } .card p{ font-size:.88rem; color:var(--text-2); } /* ── 7. Faixa escura ─────────────────────────────────────────────────────── */ .band{ position:relative; overflow:hidden; isolation:isolate; background:var(--ink); color:#fff; } .band__in{ display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); gap:clamp(1.8rem,4vw,3.5rem); align-items:center; min-height:clamp(300px,34vw,420px); } .band__media{ position:absolute; inset:0 auto 0 0; width:38%; z-index:-2; } .band__media img{ width:100%; height:100%; object-fit:cover; } .band__media::after{ content:""; position:absolute; inset:0; background:linear-gradient(90deg, rgba(0,0,0,.4), var(--ink)), var(--tint); } .band::before{ content:""; position:absolute; inset:0; z-index:-1; background:radial-gradient(60% 100% at 100% 50%, color-mix(in srgb, var(--b-500) 22%, transparent), transparent 70%); } .band__text{ grid-column:2; grid-row:1; display:flex; flex-direction:column; gap:1.05rem; padding-block:clamp(2.4rem,5vw,3.6rem); } .band__text h2{ font-size:clamp(1.7rem,3.4vw,2.5rem); color:#fff; } .band__text h2 em{ font-style:normal; color:var(--b-400); } .band__text p{ color:#b9c8da; max-width:52ch; } /* variante retrato (AtanaSoft — pioneiro) */ .band--portrait .band__media::after{ background:linear-gradient(90deg, rgba(0,0,0,.15) 40%, var(--ink)), linear-gradient(0deg, rgba(0,0,0,.35), rgba(0,0,0,.35)); } .band__name{ font-family:"Montserrat", sans-serif; font-size:clamp(1.3rem,2.4vw,1.85rem); font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:#fff; } .band__quote{ font-size:1.02rem; font-style:italic; color:#e2ebf5; padding-top:.4rem; border-top:1px solid rgba(255,255,255,.16); margin-top:.3rem; } .band__by{ font-size:.8rem; color:#94a8be; } /* retrato-marcador enquanto não há foto licenciada */ .portrait-ph{ position:relative; width:100%; height:100%; background: radial-gradient(60% 60% at 50% 38%, #33404f, #10161f 70%), linear-gradient(180deg,#141c26,#080c12); display:grid; place-items:center; } /* retrato alinhado à direita da 1ª coluna, junto do texto */ .band__portrait{ grid-column:1; grid-row:1; justify-self:center; align-self:center; width:min(250px, 80%); padding-block:clamp(1.6rem,3vw,2.4rem); } .band__portrait img{ width:100%; height:auto; } /* ── 8. Números ──────────────────────────────────────────────────────────── */ .stats{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); } .stats li{ display:flex; align-items:center; justify-content:center; gap:.95rem; padding:1.5rem 1rem; border-left:1px solid var(--hair); } .stats li:first-child{ border-left:0; } .stats svg{ width:34px; height:34px; color:var(--b-500); flex:0 0 auto; } .stats b{ display:block; font-family:"Montserrat", sans-serif; font-size:clamp(1.35rem,2.4vw,1.75rem); font-weight:700; line-height:1.15; } .stats span{ font-size:.8rem; color:var(--text-2); } /* ── 9. Processo ─────────────────────────────────────────────────────────── */ .process{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1.6rem; margin-top:2.2rem; } .step{ display:flex; flex-direction:column; gap:.55rem; } .step__top{ display:flex; align-items:center; gap:.9rem; } .step__n{ flex:0 0 auto; width:34px; height:34px; border-radius:50%; display:grid; place-items:center; background-image:var(--grad); color:#fff; font-family:"Montserrat", sans-serif; font-size:.8rem; font-weight:700; } .step__line{ flex:1; height:1px; background:var(--hair); position:relative; } .step__line::after{ content:""; position:absolute; right:0; top:-3px; border:3px solid transparent; border-left-color:#c6d2e0; } .step:last-child .step__line{ display:none; } .step h3{ font-size:1rem; font-weight:600; } .step p{ font-size:.86rem; color:var(--text-2); } /* ── 10. CTA final ───────────────────────────────────────────────────────── */ .final{ position:relative; overflow:hidden; isolation:isolate; background:var(--ink); color:#fff; } .final::before{ content:""; position:absolute; inset:0; z-index:-3; background:radial-gradient(55% 90% at 78% 50%, color-mix(in srgb, var(--b-500) 24%, transparent), transparent 70%); } /* globo inteiro (assets/graphics/globe-full) — AtanaSoft */ .final__globe{ position:absolute; z-index:-2; right:clamp(-6rem,-4vw,-1rem); top:50%; width:min(560px, 46vw); height:auto; translate:0 -50%; filter:drop-shadow(0 0 60px rgba(40,140,255,.35)); animation:bob 9s ease-in-out infinite; } @keyframes bob{ 50%{ transform:translateY(-12px); } } /* meio globo como horizonte (assets/graphics/globe-half) — AtanaLabs */ .final--arc .final__in{ padding-bottom:max(13rem, 25vw); } .final__arc{ position:absolute; z-index:-2; left:50%; bottom:0; translate:-50% 0; width:max(900px, 95%); max-width:none; height:auto; } .final--arc::after{ content:""; position:absolute; inset:auto 0 0; height:30%; z-index:-1; background:linear-gradient(0deg, color-mix(in srgb, var(--ink) 55%, transparent), transparent); } .final__in{ position:relative; display:grid; grid-template-columns:minmax(0,1fr) auto; gap:2rem; align-items:center; padding-block:clamp(3rem,6vw,4.6rem); } .final__text{ display:flex; flex-direction:column; gap:1.1rem; align-items:flex-start; max-width:34rem; } .final__text h2{ font-size:clamp(1.65rem,3.2vw,2.35rem); color:#fff; } .final__text p{ color:#bccadb; max-width:46ch; } /* ── 11. Rodapé ──────────────────────────────────────────────────────────── */ .foot{ background:var(--ink-2); color:#c3d0de; } .foot__in{ display:grid; grid-template-columns:1.4fr 1fr 1.25fr 1.15fr; gap:clamp(1.6rem,3vw,3rem); padding-block:clamp(2.6rem,5vw,3.6rem); } .foot h4{ font-family:"Montserrat", sans-serif; font-size:.92rem; font-weight:600; color:#fff; margin-bottom:1rem; } .foot li + li{ margin-top:.55rem; } .foot a{ font-size:.87rem; color:#a9bacb; transition:color .2s var(--ease); } .foot a:hover{ color:#fff; } .foot__brand{ display:flex; flex-direction:column; gap:1.1rem; align-items:flex-start; } .foot__brand p{ font-size:.87rem; color:#a9bacb; } .foot__social{ display:flex; gap:.6rem; } .foot__social a{ width:38px; height:38px; border-radius:10px; display:grid; place-items:center; border:1px solid rgba(255,255,255,.14); transition:border-color .2s var(--ease), background-color .2s var(--ease), transform .2s var(--ease); } .foot__social svg{ width:17px; height:17px; } .foot__social a:hover{ border-color:var(--b-400); background:rgba(255,255,255,.06); transform:translateY(-2px); } .contact li{ display:flex; align-items:flex-start; gap:.7rem; font-size:.87rem; color:#a9bacb; } .contact svg{ width:17px; height:17px; margin-top:.28rem; color:var(--b-400); flex:0 0 auto; } .foot__bar{ border-top:1px solid rgba(255,255,255,.1); display:flex; flex-wrap:wrap; justify-content:space-between; gap:.6rem; padding-block:1.15rem; font-size:.74rem; color:#8598ac; } .foot__motto{ font-family:"Montserrat", sans-serif; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--b-400); } /* ── 12. Reveal ──────────────────────────────────────────────────────────── */ .reveal{ opacity:0; translate:0 22px; } .reveal.is-in{ opacity:1; translate:none; transition:opacity .7s var(--ease) var(--delay,0s), translate .7s var(--ease) var(--delay,0s); } /* ── 13. Responsivo ──────────────────────────────────────────────────────── */ @media (max-width:1040px){ .cards{ grid-template-columns:repeat(2,minmax(0,1fr)); } .process{ grid-template-columns:repeat(2,minmax(0,1fr)); row-gap:2rem; } .step:nth-child(2n) .step__line{ display:none; } .foot__in{ grid-template-columns:1fr 1fr; } } @media (max-width:900px){ .hdr__nav{ position:fixed; inset:74px 0 auto; z-index:49; flex-direction:column; align-items:stretch; gap:0; padding:.6rem var(--pad) 1.4rem; background:inherit; border-bottom:1px solid rgba(128,128,128,.2); box-shadow:0 20px 40px -24px rgba(0,0,0,.6); } .hdr--dark .hdr__nav{ background:#08130f; } .hdr--light .hdr__nav{ background:#fff; } .hdr__nav[hidden]{ display:none; } .hdr__nav a{ padding:.75rem 0; border-bottom:1px solid rgba(128,128,128,.16); } .hdr__cta{ margin:.9rem 0 0; align-self:flex-start; } .hdr__burger{ display:block; } .hero{ min-height:0; } .hero__media{ inset:0; } .hero__media::after{ background:linear-gradient(180deg, rgba(0,0,0,.72), rgba(0,0,0,.86)), var(--tint); } .hero__box{ max-width:none; } .keywords{ position:static; flex-direction:row; flex-wrap:wrap; gap:.4rem 1.1rem; text-align:left; margin-top:2rem; } .duo{ grid-template-columns:1fr; } .duo__text{ order:-1; } .band__in{ grid-template-columns:1fr; } .band__media{ position:relative; inset:auto; width:auto; height:230px; } .band__media::after{ background:linear-gradient(180deg, rgba(0,0,0,.25), var(--ink)), var(--tint); } .band__text{ grid-column:1; padding-top:0; } .band--portrait .band__media::after{ background:linear-gradient(180deg, rgba(0,0,0,.2), var(--ink)); } .band--portrait .band__media{ position:absolute; inset:0 0 auto; height:320px; } .band__portrait{ grid-row:auto; justify-self:center; width:min(220px, 60%); padding-bottom:0; } .band--portrait .band__text{ grid-row:auto; padding-top:1.4rem; } .stats{ grid-template-columns:repeat(2,minmax(0,1fr)); } .stats li:nth-child(odd){ border-left:0; } .stats li:nth-child(n+3){ border-top:1px solid var(--hair); } .final__globe{ width:min(420px, 80vw); top:auto; bottom:-30%; right:-30%; translate:none; opacity:.35; } .final__in{ grid-template-columns:1fr; } .final .keywords{ margin-top:1.4rem; } } @media (max-width:620px){ .cards{ grid-template-columns:1fr; } .process{ grid-template-columns:1fr; } .step__line{ display:none !important; } .stats{ grid-template-columns:1fr; } .stats li{ justify-content:flex-start; border-left:0; border-top:1px solid var(--hair); } .stats li:first-child{ border-top:0; } .quickbar__in{ flex-direction:column; } .quickbar span{ max-width:none; } .foot__in{ grid-template-columns:1fr; } .btn{ width:100%; } .hero__actions .btn, .final .btn{ width:100%; } } @media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } *,*::before,*::after{ transition-duration:.001ms !important; animation-duration:.001ms !important; } .reveal{ opacity:1; translate:none; } }