/* ========================================================================== Hargen Software — Landing page institucional Tema escuro: preto + azul-marinho, com acentos da marca (azul -> ciano) ========================================================================== */ :root{ /* acentos da marca (clareados para leitura sobre fundo escuro) */ --blue-700:#1f63e8; --blue-600:#2b7bff; --blue-500:#4f96ff; --cyan-500:#2fcdec; --cyan-400:#58e0f4; --cyan-300:#9aeefb; /* verde oficial do WhatsApp */ --wa-green:#25d366; --wa-green-2:#5bf07f; --wa-green-3:#12a150; /* superfícies: preto -> azul-marinho */ --black:#04060b; --bg:#06090f; --bg-alt:#080e1a; --navy:#091326; --navy-2:#0b1830; --surface:#0c1526; --surface-2:#101c31; /* linhas e textos */ --line:rgba(255,255,255,.09); --line-strong:rgba(255,255,255,.16); --ink:#f3f7fd; --ink-2:#b9c5da; --ink-3:#8394ad; --grad:linear-gradient(120deg,var(--blue-700) 0%,var(--blue-600) 42%,var(--cyan-500) 100%); --grad-soft:linear-gradient(120deg,rgba(43,123,255,.16),rgba(47,205,236,.14)); --radius:16px; --radius-lg:24px; --shadow-sm:0 1px 2px rgba(0,0,0,.5),0 6px 20px rgba(0,0,0,.35); --shadow-md:0 18px 40px -18px rgba(0,0,0,.85),0 4px 14px rgba(0,0,0,.4); --shadow-lg:0 34px 70px -28px rgba(0,0,0,.95),0 0 0 1px rgba(47,205,236,.16); --glow:0 14px 34px -12px rgba(43,123,255,.55); --container:1160px; --font:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif; --font-display:"Sora","Inter",-apple-system,"Segoe UI",Roboto,Arial,sans-serif; } /* ---------- Base ---------- */ *,*::before,*::after{box-sizing:border-box} html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;background:var(--bg)} body{ margin:0; font-family:var(--font); font-size:17px; line-height:1.65; color:var(--ink-2); background:var(--bg); -webkit-font-smoothing:antialiased; /* clip nao cria contexto de rolagem; hidden criaria e quebraria o scroll-behavior:smooth do . O hidden fica so de fallback. */ overflow-x:hidden; overflow-x:clip; } /* Ancora do topo da pagina (ver comentario no index.html) */ #topo{display:block;height:0} img{max-width:100%;height:auto;display:block} a{color:var(--cyan-400);text-decoration:none} h1,h2,h3,h4{font-family:var(--font-display);color:var(--ink);line-height:1.15;margin:0 0 .6em;letter-spacing:-.02em} h1{font-size:clamp(2.15rem,6vw,4.05rem);font-weight:800;letter-spacing:-.035em} h2{font-size:clamp(1.75rem,3.4vw,2.6rem);font-weight:700} h3{font-size:1.2rem;font-weight:700} p{margin:0 0 1.1em} ul,ol{margin:0;padding:0;list-style:none} ::selection{background:rgba(47,205,236,.28);color:#fff} .container{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:24px} .skip-link{ position:absolute;left:-9999px;top:0;z-index:200; background:var(--blue-600);color:#fff;padding:12px 18px;border-radius:0 0 10px 0;font-weight:600; } .skip-link:focus{left:0} :focus-visible{outline:3px solid var(--cyan-500);outline-offset:3px;border-radius:6px} .eyebrow{ font-size:.78rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase; color:var(--cyan-400);margin:0 0 .9em; } .eyebrow-light{color:var(--cyan-400)} .grad{ background:linear-gradient(100deg,var(--blue-500),var(--cyan-400)); -webkit-background-clip:text;background-clip:text;color:transparent; } /* ---------- Botões ---------- */ .btn{ display:inline-flex;align-items:center;justify-content:center;gap:.5em; font-family:var(--font);font-weight:600;font-size:1rem;line-height:1; padding:16px 28px;border-radius:999px;border:1px solid transparent; cursor:pointer;transition:transform .2s ease,box-shadow .25s ease,background .25s ease,color .25s ease,border-color .25s ease; white-space:nowrap; } .btn-primary{background:var(--grad);color:#fff;box-shadow:var(--glow)} .btn-primary:hover{transform:translateY(-2px);box-shadow:0 20px 44px -14px rgba(47,205,236,.6)} .btn-ghost{background:rgba(255,255,255,.04);color:var(--ink);border-color:var(--line-strong)} .btn-ghost:hover{transform:translateY(-2px);border-color:var(--cyan-500);color:#fff;background:rgba(47,205,236,.10)} .btn-sm{padding:11px 20px;font-size:.92rem} .btn-lg{padding:19px 36px;font-size:1.06rem} .btn-block{width:100%} /* ---------- Header ---------- */ .site-header{ position:sticky;top:0;z-index:100; background:rgba(4,6,11,.72); backdrop-filter:saturate(160%) blur(14px); -webkit-backdrop-filter:saturate(160%) blur(14px); border-bottom:1px solid transparent; transition:border-color .25s ease,background .25s ease; } .site-header.is-stuck{border-bottom-color:var(--line);background:rgba(4,6,11,.9)} .header-inner{display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:78px} .brand{display:flex;align-items:center} .brand img{height:44px;width:auto} .nav{display:flex;align-items:center;gap:30px} .nav a{ color:var(--ink-2);font-weight:500;font-size:.97rem;position:relative;padding:6px 0; transition:color .2s ease; } .nav a:not(.btn):after{ content:"";position:absolute;left:0;bottom:0;height:2px;width:0;border-radius:2px; background:var(--grad);transition:width .25s ease; } .nav a:not(.btn):hover{color:#fff} .nav a:not(.btn):hover:after{width:100%} .nav a.btn{color:#fff;padding:12px 22px} .nav-toggle{ display:none;width:46px;height:46px;border:1px solid var(--line-strong);background:rgba(255,255,255,.04); border-radius:12px;cursor:pointer;padding:0;place-items:center; } .nav-toggle span{ display:block;width:20px;height:2px;background:var(--ink);border-radius:2px;margin:4px auto; transition:transform .25s ease,opacity .2s ease; } .nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg)} .nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0} .nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)} /* ---------- Hero ---------- */ .hero{ position:relative;overflow:hidden;isolation:isolate; padding:clamp(60px,8vw,104px) 0 clamp(56px,7vw,88px); background:linear-gradient(180deg,#070d19 0%,var(--bg) 78%); } .hero-glow{ position:absolute;inset:-30% -10% auto -10%;height:960px;z-index:-2; background: radial-gradient(620px 440px at 80% 8%,rgba(47,205,236,.30),transparent 66%), radial-gradient(720px 480px at 10% -4%,rgba(43,123,255,.34),transparent 64%), radial-gradient(900px 520px at 50% 0%,rgba(11,24,48,.9),transparent 70%); filter:blur(4px); } .hero-grid-lines{ position:absolute;inset:0;z-index:-1; background-image:linear-gradient(rgba(255,255,255,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.055) 1px,transparent 1px); background-size:64px 64px; mask-image:radial-gradient(120% 80% at 50% 0%,#000 18%,transparent 76%); -webkit-mask-image:radial-gradient(120% 80% at 50% 0%,#000 18%,transparent 76%); } .hero-inner{max-width:900px} .hero h1{margin-bottom:.35em} .lead{font-size:clamp(1.05rem,1.7vw,1.25rem);color:var(--ink-2);max-width:660px} .hero-actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:34px} .hero-stats{ display:grid;grid-template-columns:repeat(4,1fr);gap:8px; margin-top:64px;padding-top:34px;border-top:1px solid var(--line); } .hero-stats li{display:flex;flex-direction:column;gap:2px} .hero-stats strong{ font-family:var(--font-display);font-size:clamp(1.5rem,3vw,2.1rem);font-weight:800; background:linear-gradient(100deg,var(--blue-500),var(--cyan-400)); -webkit-background-clip:text;background-clip:text;color:transparent;letter-spacing:-.02em; } .hero-stats span{font-size:.9rem;color:var(--ink-3);line-height:1.4} /* ---------- Seções ---------- */ .section{padding:clamp(72px,9vw,116px) 0} .section-alt{background:var(--bg-alt);border-block:1px solid var(--line)} .section-head{max-width:720px;margin:0 auto clamp(44px,5vw,64px);text-align:center} .section-sub{color:var(--ink-3);font-size:1.06rem;margin:0 auto;max-width:640px} /* ---------- Produtos ---------- */ .products{display:grid;grid-template-columns:repeat(2,1fr);gap:28px} .product-card{ position:relative;display:flex;flex-direction:column; background:linear-gradient(180deg,var(--surface-2),var(--surface)); border:1px solid var(--line);border-radius:var(--radius-lg); padding:38px 34px;box-shadow:var(--shadow-md);overflow:hidden; transition:transform .3s ease,box-shadow .3s ease,border-color .3s ease; } .product-card::before{ content:"";position:absolute;inset:0 0 auto 0;height:4px;background:var(--grad); } .product-card::after{ content:"";position:absolute;right:-100px;top:-100px;width:300px;height:300px;border-radius:50%; background:radial-gradient(circle,rgba(47,205,236,.20),transparent 68%);opacity:0;transition:opacity .35s ease; } .product-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg);border-color:rgba(47,205,236,.35)} .product-card:hover::after{opacity:1} .product-top{position:relative;z-index:1} .product-tag{ display:inline-block;font-size:.74rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase; color:var(--cyan-300);background:rgba(47,205,236,.12);border:1px solid rgba(47,205,236,.22); padding:6px 12px;border-radius:999px;margin-bottom:16px; } .product-card h3{font-size:clamp(1.6rem,2.6vw,2rem);font-weight:800;margin-bottom:.5em} .product-card p{color:var(--ink-2)} .product-list{position:relative;z-index:1;margin:6px 0 28px;display:grid;gap:11px} .product-list li{position:relative;padding-left:30px;font-size:.97rem;color:var(--ink-2)} .product-list li::before{ content:"";position:absolute;left:0;top:.52em;width:16px;height:16px;border-radius:50%; background:var(--grad); mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 6 9 17l-5-5' fill='none' stroke='%23000' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px no-repeat; -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 6 9 17l-5-5' fill='none' stroke='%23000' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px no-repeat; } .product-note{ position:relative;z-index:1;margin:-14px 0 24px;padding-left:14px; border-left:2px solid rgba(255,255,255,.14); font-size:.85rem;line-height:1.55;color:var(--ink-3); } .product-link{ position:relative;z-index:1;margin-top:auto;display:inline-flex;align-items:center;gap:8px; font-weight:700;color:var(--cyan-400); } .product-link:hover{color:#fff} .product-link svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .25s ease} .product-link:hover svg{transform:translate(3px,-3px)} /* ---------- Cards de serviço ---------- */ .cards{display:grid;grid-template-columns:repeat(3,1fr);gap:24px} .card{ background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:32px 28px; box-shadow:var(--shadow-sm);transition:transform .3s ease,box-shadow .3s ease,border-color .3s ease,background .3s ease; } .card:hover{transform:translateY(-5px);box-shadow:var(--shadow-md);border-color:rgba(47,205,236,.32);background:var(--surface-2)} .card-icon{ width:52px;height:52px;border-radius:14px;display:grid;place-items:center;margin-bottom:20px; background:var(--grad);box-shadow:0 10px 24px -10px rgba(43,123,255,.8); } .card-icon svg{width:25px;height:25px;fill:none;stroke:#fff;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round} .card h3{margin-bottom:.45em} .card p{font-size:.97rem;color:var(--ink-3);margin:0} /* ---------- Processo ---------- */ .steps{display:grid;grid-template-columns:repeat(4,1fr);gap:22px} .step{ position:relative;padding:30px 26px;border-radius:var(--radius); background:linear-gradient(180deg,var(--surface),rgba(12,21,38,.5));border:1px solid var(--line); } .step-num{ display:block;font-family:var(--font-display);font-size:2.1rem;font-weight:800;line-height:1;margin-bottom:14px; background:linear-gradient(100deg,var(--blue-500),var(--cyan-400)); -webkit-background-clip:text;background-clip:text;color:transparent; } .step h3{margin-bottom:.4em} .step p{font-size:.95rem;color:var(--ink-3);margin:0} /* ---------- Empresa (bloco azul-marinho) ---------- */ .section-dark{ position:relative;overflow:hidden; background: radial-gradient(760px 420px at 88% 4%,rgba(47,205,236,.16),transparent 62%), radial-gradient(640px 420px at 2% 96%,rgba(43,123,255,.22),transparent 64%), linear-gradient(180deg,var(--navy-2),var(--navy)); border-block:1px solid var(--line); color:var(--ink-2); } .section-dark h2{color:#fff;max-width:19ch} .section-dark strong{color:#fff} .empresa-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(40px,6vw,84px);align-items:start} .empresa-text{color:rgba(255,255,255,.76);font-size:1.02rem} .pillars{display:grid;gap:1px;border-radius:var(--radius-lg);overflow:hidden;background:rgba(255,255,255,.10);border:1px solid var(--line)} .pillars li{background:rgba(6,10,20,.72);padding:26px 28px;transition:background .3s ease} .pillars li:hover{background:rgba(47,205,236,.08)} .pillars h3{color:#fff;font-size:1.06rem;margin-bottom:.35em} .pillars p{margin:0;font-size:.95rem;color:var(--ink-3)} /* ---------- CTA ---------- */ .cta-band{ position:relative;overflow:hidden;padding:clamp(48px,6vw,72px) 0; background:linear-gradient(110deg,#0a2a7a 0%,var(--blue-700) 45%,#1aa6c9 100%); border-block:1px solid rgba(255,255,255,.10); } .cta-inner{display:flex;align-items:center;justify-content:space-between;gap:32px;flex-wrap:wrap} .cta-band h2{color:#fff;margin-bottom:.25em} .cta-band p{color:rgba(255,255,255,.88);margin:0;font-size:1.06rem} .cta-band .btn-primary{background:#fff;color:#0a2a7a;box-shadow:0 18px 44px -18px rgba(0,0,0,.9)} .cta-band .btn-primary:hover{background:#eaf6ff;box-shadow:0 22px 50px -18px rgba(0,0,0,.95)} /* ---------- Contato ---------- */ .contato-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:24px} .contato-card{ display:flex;flex-direction:column; background:var(--surface);border:1px solid var(--line);border-radius:var(--radius); padding:32px 28px;box-shadow:var(--shadow-sm); transition:transform .3s ease,box-shadow .3s ease,border-color .3s ease,background .3s ease; } .contato-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-md);border-color:rgba(47,205,236,.32);background:var(--surface-2)} .contato-card.is-featured{ background:linear-gradient(180deg,var(--surface-2),var(--surface)); border-color:rgba(47,205,236,.28);box-shadow:var(--shadow-md); } .cc-icon{ width:52px;height:52px;border-radius:14px;display:grid;place-items:center;margin-bottom:20px; background:var(--grad);box-shadow:0 10px 24px -10px rgba(43,123,255,.8); } .cc-icon svg{width:25px;height:25px;fill:none;stroke:#fff;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round} .cc-icon svg.glyph{fill:#fff;stroke:none;width:26px;height:26px} /* WhatsApp na cor da própria marca (#25D366) */ .cc-icon-wa{ background:linear-gradient(150deg,var(--wa-green-2) 0%,var(--wa-green) 55%,var(--wa-green-3) 100%); box-shadow:0 10px 24px -10px rgba(37,211,102,.75); } .contato-card h3{font-size:1.05rem;margin-bottom:.4em} .cc-value{ display:block;font-size:1.02rem;font-weight:600;color:#fff;line-height:1.5; margin-bottom:12px;overflow-wrap:anywhere;transition:color .2s ease; } a.cc-value:hover{color:var(--cyan-400)} .contato-card p{margin:0;font-size:.93rem;color:var(--ink-3)} .contato-cta{margin-top:44px;text-align:center} .btn-wa{padding-left:20px} .btn-wa .wa-chip{ flex:0 0 auto;width:30px;height:30px;border-radius:50%;background:#fff; display:grid;place-items:center;box-shadow:0 2px 8px rgba(0,0,0,.28); } .btn-wa .wa-glyph{width:19px;height:19px;fill:var(--wa-green);stroke:none} .contato-cta-note{margin:14px 0 0;font-size:.9rem;color:var(--ink-3)} /* ---------- Footer ---------- */ .site-footer{ background:var(--black);border-top:1px solid var(--line); color:var(--ink-3);padding:72px 0 28px;font-size:.94rem; } .footer-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.2fr;gap:40px} .footer-logo{display:flex;align-items:center;gap:12px;margin-bottom:14px} .footer-logo img{width:38px;height:38px} .footer-logo span{font-family:var(--font-display);font-size:1.12rem;letter-spacing:.02em;color:rgba(255,255,255,.85)} .footer-logo b{color:#fff;font-weight:800} .footer-tagline{color:var(--cyan-400);font-weight:600;font-size:.92rem;letter-spacing:.04em;margin-bottom:18px} .footer-legal{font-size:.85rem;color:#64748b;line-height:1.7;margin:0} .footer-col{display:flex;flex-direction:column;gap:11px} .footer-col h4{color:#fff;font-size:.83rem;letter-spacing:.14em;text-transform:uppercase;margin:0 0 6px} .footer-col a,.footer-col span{color:var(--ink-3);transition:color .2s ease} .footer-col a:hover{color:var(--cyan-400)} .footer-bottom{ display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap; margin-top:52px;padding-top:24px;border-top:1px solid var(--line); font-size:.86rem;color:#5b6b83; } .footer-bottom p{margin:0} .to-top{color:var(--ink-3)} .to-top:hover{color:var(--cyan-400)} /* ---------- Página 404 ---------- */ .erro-page{ position:relative;overflow:hidden;isolation:isolate; min-height:100vh;display:grid;place-items:center; padding:80px 0;text-align:center; background:linear-gradient(180deg,#070d19 0%,var(--bg) 80%); } .erro-glow{ position:absolute;inset:-20% -10% auto -10%;height:800px;z-index:-1; background: radial-gradient(600px 420px at 72% 10%,rgba(47,205,236,.24),transparent 66%), radial-gradient(700px 460px at 18% 0%,rgba(43,123,255,.28),transparent 64%); } .erro-inner{max-width:640px} .erro-logo{display:inline-block;margin-bottom:44px} .erro-logo img{height:44px;width:auto} .erro-page h1{font-size:clamp(1.9rem,5vw,3rem);margin-bottom:.4em} .erro-page .lead{margin-inline:auto} .erro-actions{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;margin-top:32px} @media (max-width:560px){ .erro-actions .btn{width:100%} } /* ---------- Animação de entrada ---------- */ .reveal{opacity:0;transform:translateY(22px);transition:opacity .7s cubic-bezier(.2,.7,.3,1),transform .7s cubic-bezier(.2,.7,.3,1)} .reveal.visible{opacity:1;transform:none} /* ---------- Responsivo ---------- */ @media (max-width:1024px){ .cards{grid-template-columns:repeat(2,1fr)} .steps{grid-template-columns:repeat(2,1fr)} .empresa-grid{grid-template-columns:1fr} .section-dark h2{max-width:none} .footer-grid{grid-template-columns:1fr 1fr;gap:36px} } @media (max-width:860px){ .products{grid-template-columns:1fr} .contato-cards{grid-template-columns:1fr} .hero-stats{grid-template-columns:repeat(2,1fr);gap:24px} .nav-toggle{display:grid} .nav{ position:absolute;top:100%;left:0;right:0; flex-direction:column;align-items:stretch;gap:0; background:rgba(6,10,20,.98); backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px); border-bottom:1px solid var(--line); box-shadow:0 24px 50px -24px rgba(0,0,0,.9); padding:8px 24px 22px; display:none; } .nav.open{display:flex} .nav a{padding:14px 0;border-bottom:1px solid var(--line);font-size:1.02rem} .nav a:not(.btn):after{display:none} .nav a.btn{margin-top:16px;border-bottom:none;justify-content:center} } @media (max-width:560px){ body{font-size:16px} .cards,.steps{grid-template-columns:1fr} .footer-grid{grid-template-columns:1fr;gap:32px} .hero-actions .btn,.contato-cta .btn{width:100%} .brand img{height:38px} .cta-inner{flex-direction:column;align-items:flex-start} .cta-band .btn{width:100%} } @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important} .reveal{opacity:1;transform:none} } @media print{ .site-header,.nav-toggle,.cta-band,.hero-glow,.hero-grid-lines{display:none} body{background:#fff;color:#000} h1,h2,h3,h4{color:#000} }