/* Theme Name: Betavision Theme URI: https://betavision.com.br Author: Betavision Sistemas Author URI: https://betavision.com.br Description: Tema institucional da Betavision — automação de marketing e processos. Visual técnico "blueprint" com paleta da marca (laranja e azul). Version: 1.5.7 Requires at least: 6.0 Requires PHP: 7.4 Text Domain: betavision */ :root{ --navy-950:#0a1526; --navy-900:#0e1d33; --navy-800:#152b48; --navy-700:#1d3a5f; --line:rgba(140,168,196,0.14); --blue:#2f7fd1; --blue-deep:#1b5fa6; --cyan:#4fd3f0; --orange:#ea6a2a; --orange-soft:#f28c4e; --white:#f4f7fb; --slate:#93a8c2; --slate-dim:#5f7793; /* altura real do header; o nav.js remede e sobrescreve depois da fonte carregar */ --bv-header-height:72px; /* espaço reservado pela barra do admin e quanto dela ainda está visível; o nav.js mede as duas coisas quando o visitante está logado */ --bv-admin-bar:0px; --bv-admin-bar-topo:var(--bv-admin-bar); } body.admin-bar{--bv-admin-bar:32px;} @media screen and (max-width:860px){ :root{--bv-header-height:64px;} } @media screen and (max-width:782px){ body.admin-bar{--bv-admin-bar:46px;} } @media screen and (max-width:600px){ body.admin-bar{--bv-admin-bar:0px;} } *{box-sizing:border-box;margin:0;padding:0;} /* linguagem visual reta: nenhum componente usa cantos arredondados */ *,*::before,*::after{border-radius:0 !important;} html{scroll-behavior:smooth;} html,body{overflow-x:clip;} body{ /* o header é fixed e desce da barra do admin: o conteúdo começa depois dos dois */ padding-top:calc(var(--bv-header-height) + var(--bv-admin-bar)); background:var(--navy-950); color:var(--white); font-family:'IBM Plex Sans',sans-serif; line-height:1.5; } h1,h2,h3{font-family:'Space Grotesk',sans-serif;letter-spacing:-0.01em;} .mono{font-family:'JetBrains Mono',monospace;} a{color:inherit;text-decoration:none;} img{max-width:100%;display:block;} ul{list-style:none;} .wrap{max-width:1180px;margin:0 auto;padding:0 28px;} :focus-visible{outline:2px solid var(--cyan);outline-offset:3px;} /* o header é fixed: âncoras compensam a altura dele + admin bar */ [id]{scroll-margin-top:calc(var(--bv-header-height) + var(--bv-admin-bar) + 20px);} /* acessibilidade: texto só para leitores de tela + link de pular navegação */ .screen-reader-text{ position:absolute;width:1px;height:1px;overflow:hidden; clip-path:inset(50%);white-space:nowrap; } .skip-link{ position:absolute;left:-9999px;top:var(--bv-admin-bar-topo);z-index:1000; background:var(--orange);color:var(--navy-950);font-weight:600; padding:12px 20px;border-radius:0 0 4px 0; } .skip-link:focus{left:0;} @media (prefers-reduced-motion: reduce){ *{animation:none !important;transition:none !important;} } /* ===== entrada dos blocos ao rolar ===== A classe js-reveal só entra no pelo script do wp_head, antes da primeira pintura: sem JS (ou com movimento reduzido) nada fica escondido. O nav.js lê a lista de alvos da variável --bv-reveal em vez de repeti-la: assim quem esconde e quem revela são sempre a mesma versão do arquivo, mesmo que o navegador esteja com um CSS ou um JS antigo em cache. Sem a variável o nav.js desiste e o script do wp_head desfaz o estado escondido. */ :root{ --bv-reveal:".section-head, .cards > *, .test-grid > *, .blog-grid > *, .services-detail-grid > *, .process-grid > *, .about-text, .about-marcas, .about-pillars > *, .stack-grid > *, .contact-form-card, .cta-box"; } .js-reveal .section-head, .js-reveal .cards > *, .js-reveal .test-grid > *, .js-reveal .blog-grid > *, .js-reveal .services-detail-grid > *, .js-reveal .process-grid > *, .js-reveal .about-text, .js-reveal .about-marcas, .js-reveal .about-pillars > *, .js-reveal .stack-grid > *, .js-reveal .contact-form-card, .js-reveal .cta-box{ opacity:0;transform:translateY(16px); } .js-reveal .is-revealing{ animation:reveal-in .55s cubic-bezier(.22,.8,.32,1) var(--reveal-delay,0ms) both; } /* terminada a entrada o nav.js troca a classe: nada de animation/transition sobra para atrapalhar o transform do hover */ .js-reveal .is-revealed{opacity:1;transform:none;} @keyframes reveal-in{ from{opacity:0;transform:translateY(16px);} to{opacity:1;transform:none;} } /* blueprint grid backdrop */ .grid-bg{ position:absolute;inset:0; background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px); background-size:44px 44px; -webkit-mask-image:radial-gradient(ellipse 80% 60% at 50% 0%, #000 40%, transparent 100%); mask-image:radial-gradient(ellipse 80% 60% at 50% 0%, #000 40%, transparent 100%); pointer-events:none; } /* ===== header ===== */ header.site-header{ position:fixed; top:0; left:0; right:0; width:100%; z-index:990; background:rgba(10,21,38,0.92); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); border-bottom:1px solid var(--line); transition:background-color .25s ease, border-color .25s ease, box-shadow .25s ease; } /* fora do topo o header ganha corpo, sem mudar de altura (mudar daria salto no padding-top do body) */ header.site-header.is-scrolled{ background:rgba(10,21,38,0.97); border-bottom-color:rgba(140,168,196,0.24); box-shadow:0 14px 34px -22px rgba(0,0,0,.95); } body.admin-bar header.site-header{ top:var(--bv-admin-bar-topo); } .nav{ display:flex;align-items:center;justify-content:space-between; padding:16px 28px;max-width:1180px;margin:0 auto; } .brand{display:flex;align-items:center;} .brand img{height:32px;width:auto;display:block;} .brand.foot img{height:26px;} .navlinks{display:flex;gap:32px;font-size:14px;color:var(--slate);} .navlinks ul{display:flex;gap:32px;} .navlinks a{transition:color .2s ease;} .navlinks a:hover{color:var(--white);} .navlinks .current-menu-item > a{color:var(--white);} .nav-cta{ font-family:'JetBrains Mono',monospace;font-size:13px; --button-corner:var(--orange-soft); border:1px solid var(--orange);color:var(--orange-soft); background:var(--navy-950); padding:9px 18px;border-radius:3px; transition:background .2s, color .2s, border-color .2s, transform .15s; } .nav-cta:hover{background:var(--navy-950);border-color:var(--orange);color:var(--orange-soft);transform:translateY(-1px);} .burger{display:none;background:none;border:none;color:var(--white);font-size:22px;cursor:pointer;} /* ===== hero ===== */ .hero{ position:relative; padding:100px 0 120px; overflow:hidden; } .hero-inner{position:relative;} .eyebrow{ font-family:'JetBrains Mono',monospace; font-size:12.5px;letter-spacing:.08em;color:var(--cyan); display:inline-flex;align-items:center;gap:8px; border:1px dashed var(--navy-700);padding:6px 12px;border-radius:3px; margin-bottom:28px; } .eyebrow::before{ content:'';width:6px;height:6px;flex:none;background:var(--cyan); box-shadow:0 0 8px var(--cyan); } .hero h1{ font-size:clamp(38px,5.4vw,68px); font-weight:700;line-height:1.04; max-width:820px; } .hero h1 .hl{color:var(--orange);} .hero h1 .hl2{ background:linear-gradient(90deg,var(--cyan),var(--blue)); -webkit-background-clip:text;background-clip:text;color:transparent; } .hero p.lede{ margin-top:26px;max-width:560px;font-size:18px;color:var(--slate); } .hero-ctas{display:flex;gap:16px;margin-top:38px;flex-wrap:wrap;} .btn-primary{ display:inline-block; --button-corner:var(--orange-soft); background:var(--orange);color:var(--navy-950);font-weight:600; padding:14px 26px;border:1px solid var(--orange-soft);border-radius:3px;font-size:15px; box-shadow:0 0 0 0 rgba(234,106,42,.45); transition:transform .15s, box-shadow .25s, background .2s, border-color .2s; } .btn-primary:hover{background:var(--orange);border-color:var(--orange-soft);color:var(--navy-950);transform:translateY(-2px);box-shadow:0 8px 24px -6px rgba(234,106,42,.55);} .btn-ghost{ display:inline-block; --button-corner:var(--cyan); border:1px solid var(--cyan);color:var(--white);background:var(--blue); padding:14px 26px;border-radius:3px;font-size:15px; transition:border-color .2s, background .2s, color .2s, transform .15s; } .btn-ghost:hover{border-color:var(--cyan);background:var(--blue);color:var(--white);transform:translateY(-1px);} .btn-ghost::before,.btn-ghost::after{display:none;} /* clique: o botão volta pro lugar, dando resposta tátil */ .btn-primary:active, .btn-ghost:active, .nav-cta:active, .search-submit:active, .cta-form .mauticform-button-wrapper .mauticform-button:active, .page-content .mauticform-button-wrapper .mauticform-button:active{ transform:translateY(0);box-shadow:none; } /* cantos técnicos nos botões, sem trocar de cor no hover */ .btn-primary::before, .btn-ghost::before, .search-submit::before, .comment-form .btn-primary::before, .cta-form .mauticform-button-wrapper .mauticform-button::before, .page-content .mauticform-button-wrapper .mauticform-button::before{ content:'';position:absolute;width:12px;height:12px;top:-5px;left:-5px; border-top:1px solid var(--button-corner);border-left:1px solid var(--button-corner); pointer-events:none; } .btn-primary::after, .btn-ghost::after, .search-submit::after, .comment-form .btn-primary::after, .cta-form .mauticform-button-wrapper .mauticform-button::after, .page-content .mauticform-button-wrapper .mauticform-button::after{ content:'';position:absolute;width:12px;height:12px;right:-5px;bottom:-5px; border-right:1px solid var(--button-corner);border-bottom:1px solid var(--button-corner); pointer-events:none; } /* somente o CTA do header recebe os quatro cantos */ .nav-cta::before{ content:'';position:absolute;inset:-5px; background: linear-gradient(var(--button-corner),var(--button-corner)) left top/12px 1px no-repeat, linear-gradient(var(--button-corner),var(--button-corner)) left top/1px 12px no-repeat, linear-gradient(var(--button-corner),var(--button-corner)) right top/12px 1px no-repeat, linear-gradient(var(--button-corner),var(--button-corner)) right top/1px 12px no-repeat, linear-gradient(var(--button-corner),var(--button-corner)) left bottom/12px 1px no-repeat, linear-gradient(var(--button-corner),var(--button-corner)) left bottom/1px 12px no-repeat, linear-gradient(var(--button-corner),var(--button-corner)) right bottom/12px 1px no-repeat, linear-gradient(var(--button-corner),var(--button-corner)) right bottom/1px 12px no-repeat; pointer-events:none; } .nav-cta, .btn-primary, .btn-ghost, .search-submit, .comment-form .btn-primary, .cta-form .mauticform-button-wrapper .mauticform-button, .page-content .mauticform-button-wrapper .mauticform-button{position:relative;} /* iris signature element */ .iris{ position:absolute;top:-40px;right:-120px;width:560px;height:560px; pointer-events:none; } .iris svg{width:100%;height:100%;} .iris-ring{fill:none;stroke:var(--navy-700);stroke-width:1;transform-origin:280px 280px;} /* os dois anéis respiram fora de fase: dá profundidade sem chamar atenção */ .iris-ring.accent{ stroke:var(--blue);opacity:.55; animation:pulse 7s ease-in-out infinite .9s; } .iris-ring.pulse{ stroke:var(--cyan);opacity:.7; animation:pulse 4.5s ease-in-out infinite; } @keyframes pulse{ 0%,100%{opacity:.25;transform:scale(1);} 50%{opacity:.75;transform:scale(1.035);} } .iris-core{fill:url(#coreGrad);animation:core-breathe 6s ease-in-out infinite;transform-origin:280px 280px;} @keyframes core-breathe{ 0%,100%{opacity:.9;transform:scale(1);} 50%{opacity:1;transform:scale(1.04);} } /* ===== generic section ===== */ .section{padding:110px 0;} .section-head{max-width:640px;margin-bottom:56px;} .section-head .eyebrow{margin-bottom:18px;} .section-head h2{font-size:clamp(28px,3.6vw,40px);font-weight:700;} .section-head p{color:var(--slate);margin-top:14px;font-size:16px;} /* ===== cards / services ===== */ .cards{display:grid;grid-template-columns:1fr 1fr;gap:24px;} .card{ background:var(--navy-900); border:1px solid var(--navy-700); border-radius:8px; padding:34px; } @keyframes box-corner-spin-before{ 0%{ top:-1px;left:-1px;width:14px;height:14px; border-top-width:1px;border-right-width:0;border-bottom-width:0;border-left-width:1px; } 18%{ top:-1px;left:-1px;width:calc(100% + 2px);height:1px; border-top-width:1px;border-right-width:0;border-bottom-width:0;border-left-width:0; } 48%{ top:-1px;left:-1px;width:calc(100% + 2px);height:1px; border-top-width:1px;border-right-width:0;border-bottom-width:0;border-left-width:0; } 58%{ top:-1px;left:calc(100% - 13px);width:14px;height:14px; border-top-width:1px;border-right-width:1px;border-bottom-width:0;border-left-width:0; } 76%{ top:-1px;left:calc(100% - 1px);width:1px;height:calc(100% + 2px); border-top-width:0;border-right-width:1px;border-bottom-width:0;border-left-width:0; } 88%{ top:calc(100% - 29px);left:calc(100% - 1px);width:1px;height:30px; border-top-width:0;border-right-width:1px;border-bottom-width:0;border-left-width:0; } 94%{ top:calc(100% - 29px);left:calc(100% - 29px);width:30px;height:30px; border-top-width:0;border-right-width:1px;border-bottom-width:1px;border-left-width:0; } 100%{ top:calc(100% - 13px);left:calc(100% - 13px);width:14px;height:14px; border-top-width:0;border-right-width:1px;border-bottom-width:1px;border-left-width:0; } } @keyframes box-corner-spin-after{ 0%{ right:-1px;bottom:-1px;width:14px;height:14px; border-top-width:0;border-right-width:1px;border-bottom-width:1px;border-left-width:0; } 18%{ right:-1px;bottom:-1px;width:calc(100% + 2px);height:1px; border-top-width:0;border-right-width:0;border-bottom-width:1px;border-left-width:0; } 48%{ right:-1px;bottom:-1px;width:calc(100% + 2px);height:1px; border-top-width:0;border-right-width:0;border-bottom-width:1px;border-left-width:0; } 58%{ right:calc(100% - 13px);bottom:-1px;width:14px;height:14px; border-top-width:0;border-right-width:0;border-bottom-width:1px;border-left-width:1px; } 76%{ right:calc(100% - 1px);bottom:calc(100% - 1px);width:1px;height:calc(100% + 2px); border-top-width:0;border-right-width:0;border-bottom-width:0;border-left-width:1px; } 88%{ right:calc(100% - 1px);bottom:calc(100% - 29px);width:1px;height:30px; border-top-width:0;border-right-width:0;border-bottom-width:0;border-left-width:1px; } 94%{ right:calc(100% - 29px);bottom:calc(100% - 29px);width:30px;height:30px; border-top-width:1px;border-right-width:0;border-bottom-width:0;border-left-width:1px; } 100%{ right:calc(100% - 13px);bottom:calc(100% - 13px);width:14px;height:14px; border-top-width:1px;border-right-width:0;border-bottom-width:0;border-left-width:1px; } } @keyframes box-glow{ 0%,100%{box-shadow:0 0 0 rgba(79,211,240,0);} 35%{box-shadow:0 0 26px rgba(79,211,240,.45),0 0 6px rgba(79,211,240,.35);} 68%{box-shadow:0 0 10px rgba(79,211,240,.18);} } .card:hover::before, .service-detail-card:hover::before, .process-step:hover::before, .pillar-card:hover::before, .test-card:hover::before, .post-card:hover::before, .comment-body:hover::before{ animation:box-corner-spin-before 1.5s cubic-bezier(.5,0,.2,1) forwards; } .card:hover::after, .service-detail-card:hover::after, .process-step:hover::after, .pillar-card:hover::after, .test-card:hover::after, .post-card:hover::after, .comment-body:hover::after{ animation:box-corner-spin-after 1.5s cubic-bezier(.5,0,.2,1) forwards; } .card:hover, .service-detail-card:hover, .process-step:hover, .pillar-card:hover, .test-card:hover, .post-card:hover, .comment-body:hover{ animation:box-glow 1.5s ease-out; } /* hover comum dos boxes: o mesmo realce de borda em toda a família de cards, independentemente da página */ .card, .service-detail-card, .process-step, .pillar-card, .test-card, .post-card{ transition:border-color .25s ease; } /* nada de deslocar o box no hover: ao subir, a borda de baixo saía de debaixo do ponteiro, o hover caía e o card ficava piscando */ /* o pillar-card fica de fora da troca de borda: a lateral colorida é o identificador dele */ .card:hover, .service-detail-card:hover, .process-step:hover, .test-card:hover, .post-card:hover{ border-color:var(--blue); } .card .icon{ width:44px;height:44px;border-radius:6px; display:flex;align-items:center;justify-content:center; background:var(--navy-800);border:1px solid var(--navy-700); color:var(--orange-soft);margin-bottom:22px;font-size:20px; transition:border-color .25s ease, color .25s ease; } .card:hover .icon{border-color:var(--orange);color:var(--orange);} .card h3{font-size:20px;margin-bottom:12px;} .card p{color:var(--slate);font-size:15px;} /* a etiqueta é usada nos cards da home e nas páginas de serviço */ .tag{ display:inline-block;font-family:'JetBrains Mono',monospace; font-size:11px;color:var(--blue);border:1px solid var(--navy-700); padding:4px 10px;border-radius:3px;line-height:1.4; } .card .tag{margin-top:20px;} /* todos os boxes informativos seguem a mesma moldura técnica */ .card, .service-detail-card, .process-step, .pillar-card, .test-card, .post-card, .contact-form-card, .cta-box, .comment-body{ position:relative; } .card::before, .card::after, .service-detail-card::before, .service-detail-card::after, .process-step::before, .process-step::after, .pillar-card::before, .pillar-card::after, .test-card::before, .test-card::after, .post-card::before, .post-card::after, .contact-form-card::before, .contact-form-card::after, .cta-box::before, .cta-box::after, .comment-body::before, .comment-body::after{ content:'';position:absolute;width:14px;height:14px; border-color:var(--slate-dim);pointer-events:none;z-index:2; } .card::before, .service-detail-card::before, .process-step::before, .pillar-card::before, .test-card::before, .post-card::before, .contact-form-card::before, .cta-box::before, .comment-body::before{ top:-1px;left:-1px;border-top:1px solid;border-left:1px solid; } .card::after, .service-detail-card::after, .process-step::after, .pillar-card::after, .test-card::after, .post-card::after, .contact-form-card::after, .cta-box::after, .comment-body::after{ right:-1px;bottom:-1px;border-right:1px solid;border-bottom:1px solid; } /* ===== testimonials ===== */ .test-section{background:var(--navy-900);border-top:1px solid var(--line);border-bottom:1px solid var(--line);} .test-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;} .test-card{ background:var(--navy-950);border:1px solid var(--navy-700);border-radius:8px; padding:26px;font-size:14.5px; display:flex;flex-direction:column; } .test-card blockquote{color:var(--slate);} /* o autor encosta na base: os depoimentos têm tamanhos bem diferentes e o grid iguala a altura dos cards da mesma linha */ .test-who{display:flex;align-items:center;gap:12px;margin-top:auto;padding-top:20px;} .test-avatar{ width:44px;height:44px;border-radius:50%; object-fit:cover;flex-shrink:0; background:var(--navy-800); border:1px solid var(--navy-700); } .test-who .name{font-size:13.5px;font-weight:600;} .test-who .role{font-size:11.5px;color:var(--slate-dim);font-family:'JetBrains Mono';} /* ===== blog cards ===== */ .blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;} /* sem overflow:hidden aqui: ele cortaria as marcas de canto e a animação delas */ .post-card{ background:var(--navy-900);border:1px solid var(--navy-700);border-radius:8px; display:flex;flex-direction:column; } .post-card .thumb{aspect-ratio:16/10;background:var(--navy-800);overflow:hidden;} .post-card .thumb img{width:100%;height:100%;object-fit:cover;transition:transform .5s cubic-bezier(.22,.8,.32,1);} .post-card:hover .thumb img{transform:scale(1.04);} .post-card .body{padding:22px;display:flex;flex-direction:column;gap:10px;flex:1;} .post-card .cat{font-family:'JetBrains Mono';font-size:11px;color:var(--orange-soft);} .post-card h3{font-size:17px;line-height:1.3;} .post-card h3 a:hover{color:var(--cyan);} .post-card .excerpt{color:var(--slate);font-size:14px;flex:1;} .post-card .readmore{font-family:'JetBrains Mono';font-size:12px;color:var(--blue);margin-top:auto;} /* single post */ .single-post{padding:80px 0;max-width:760px;margin:0 auto;} .single-post .post-meta{font-family:'JetBrains Mono';font-size:12px;color:var(--slate-dim);margin-bottom:18px;} .single-post h1{font-size:clamp(30px,4vw,44px);margin-bottom:24px;} .single-post .content{color:var(--slate);font-size:16.5px;} .single-post .content p{margin-bottom:18px;} .single-post .content h2,.single-post .content h3{color:var(--white);margin:32px 0 14px;} .single-post .content a{color:var(--cyan);text-decoration:underline;} .single-post .content img{border-radius:8px;margin:20px 0;} /* ===== conteúdo editorial (post e página) ===== */ .content ul,.content ol{color:var(--slate);margin:0 0 18px 22px;} .content ul{list-style:disc;} /* o reset global tira os marcadores */ .content ol{list-style:decimal;} .content li{margin-bottom:6px;} .content li::marker{color:var(--slate-dim);} .content blockquote{ border-left:2px solid var(--orange);background:var(--navy-900); padding:18px 22px;margin:0 0 22px;border-radius:0 6px 6px 0; } .content blockquote p:last-child{margin-bottom:0;} .content code{ font-family:'JetBrains Mono',monospace;font-size:.9em; background:var(--navy-800);border:1px solid var(--navy-700); padding:2px 6px;border-radius:3px;color:var(--cyan); } .content pre{ background:var(--navy-900);border:1px solid var(--navy-700);border-radius:8px; padding:20px;margin-bottom:22px;overflow-x:auto; } .content pre code{background:none;border:none;padding:0;color:var(--slate);} .content table{width:100%;border-collapse:collapse;margin-bottom:22px;font-size:15px;} .content th,.content td{border:1px solid var(--navy-700);padding:10px 14px;text-align:left;} .content th{background:var(--navy-900);color:var(--white);font-weight:600;} .content figure{margin:0 0 22px;} .content figcaption{ font-family:'JetBrains Mono',monospace;font-size:11.5px;color:var(--slate-dim); margin-top:8px;text-align:center; } .content hr{border:none;border-top:1px solid var(--line);margin:36px 0;} /* page */ .page-content{padding:80px 0;max-width:760px;margin:0 auto;} .page-content h1{font-size:clamp(30px,4vw,44px);margin-bottom:28px;} .page-content .content{color:var(--slate);font-size:16.5px;} .page-content .content p{margin-bottom:18px;} /* imagem de destaque e navegação do post */ .post-hero img{border-radius:8px;margin-bottom:32px;} .post-navigation{ display:flex;gap:20px;justify-content:space-between;flex-wrap:wrap; margin-top:56px;padding-top:28px;border-top:1px solid var(--line); font-size:14px; } .post-navigation .nav-links{display:flex;gap:24px;justify-content:space-between;width:100%;flex-wrap:wrap;} .post-navigation a{color:var(--slate);max-width:330px;} .post-navigation a:hover{color:var(--white);} .post-navigation .mono{display:block;font-size:11.5px;color:var(--blue);margin-bottom:4px;} /* pagination (markup de the_posts_pagination) */ .pagination{margin-top:48px;font-family:'JetBrains Mono',monospace;font-size:13px;} .pagination .nav-links{display:flex;gap:10px;flex-wrap:wrap;} .pagination .page-numbers{ border:1px solid var(--navy-700);padding:8px 14px;border-radius:3px;color:var(--slate); } .pagination .page-numbers.current{color:var(--cyan);border-color:var(--cyan);} .pagination a.page-numbers:hover{border-color:var(--slate-dim);color:var(--white);} .page-links{font-family:'JetBrains Mono',monospace;font-size:13px;color:var(--slate-dim);margin-top:24px;} /* ===== busca ===== */ .search-form{display:flex;gap:10px;flex-wrap:wrap;margin:28px 0;max-width:520px;} .search-field{ flex:1;min-width:200px; background:var(--navy-900);border:1px solid var(--navy-700);border-radius:4px; color:var(--white);font-family:inherit;font-size:15px;padding:12px 14px; } .search-field::placeholder{color:var(--slate-dim);} .search-submit{ --button-corner:var(--cyan); background:var(--blue);color:var(--white);font-weight:600;font-family:inherit; border:1px solid var(--cyan);border-radius:3px;padding:12px 22px;font-size:15px;cursor:pointer; transition:background .2s, border-color .2s, color .2s, transform .15s; } .search-submit:hover{background:var(--blue);border-color:var(--cyan);color:var(--white);transform:translateY(-1px);} /* ===== 404 ===== */ .error-404 h1{font-size:clamp(30px,4.4vw,50px);margin-bottom:18px;} .error-404 .lede{color:var(--slate);font-size:17px;max-width:560px;} /* ===== comentários ===== */ .comments-area{margin-top:56px;padding-top:32px;border-top:1px solid var(--line);} .comments-title{font-size:20px;margin-bottom:24px;} .comment-list{margin-bottom:40px;} .comment-list li{margin-bottom:22px;} .comment-list .children{margin-left:24px;margin-top:22px;} .comment-body{ background:var(--navy-900);border:1px solid var(--navy-700);border-radius:8px;padding:20px; color:var(--slate);font-size:15px; } .comment-author{display:flex;align-items:center;gap:10px;font-size:14px;color:var(--white);} .comment-author img{border-radius:50%;} .comment-metadata{font-family:'JetBrains Mono',monospace;font-size:11.5px;color:var(--slate-dim);margin:6px 0 12px;} .comment-respond{margin-top:32px;} .comment-reply-title{font-family:'Space Grotesk',sans-serif;font-size:20px;margin-bottom:18px;} .comment-form label{display:block;font-size:13px;color:var(--slate);margin-bottom:6px;} .comment-form input[type=text], .comment-form input[type=email], .comment-form input[type=url], .comment-form textarea{ width:100%;background:var(--navy-900);border:1px solid var(--navy-700);border-radius:4px; color:var(--white);font-family:inherit;font-size:15px;padding:12px 14px;margin-bottom:16px; } .comment-form .btn-primary{--button-corner:var(--orange-soft);border:1px solid var(--orange-soft);cursor:pointer;font-family:inherit;} .comment-form .comment-form-cookies-consent{display:flex;align-items:center;gap:8px;font-size:13px;} .comment-form .comment-form-cookies-consent label{margin:0;} /* ===== cta ===== */ .cta-section{padding:110px 0;position:relative;} .cta-box{ position:relative; border:1px solid var(--navy-700);border-radius:10px; padding:64px 48px;text-align:center; background:radial-gradient(ellipse at 50% -20%, rgba(47,127,209,.25), transparent 60%), var(--navy-900); } .cta-box .cta-eyebrow{margin:0 auto 20px;} /* ===== formulário do Mautic no fim da home ===== O generate.js injeta um