/* ============================================================ noimob — website one-page Segue docs/design/guia-de-design-website (v1.0, junho/2026) ============================================================ */ /* ---------- Fontes da marca (variáveis, subset latin) ---------- */ @font-face{ font-family:'Quicksand'; font-style:normal; font-weight:300 700; font-display:swap; src:url('../fonts/quicksand-latin.woff2') format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } @font-face{ font-family:'Nunito'; font-style:normal; font-weight:200 1000; font-display:swap; src:url('../fonts/nunito-latin.woff2') format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } /* Fallbacks metricamente ajustados — controlam o CLS na troca de fonte */ @font-face{ font-family:'Quicksand Fallback'; src:local('Arial'); size-adjust:104%;ascent-override:96%;descent-override:24%;line-gap-override:0%; } @font-face{ font-family:'Nunito Fallback'; src:local('Arial'); size-adjust:99%;ascent-override:101%;descent-override:35%;line-gap-override:0%; } /* ---------- Tokens ---------- */ :root{ /* Constantes da marca */ --verde-mata:#112E26; --verde-direto:#1EBE6E; --verde-direto-hover:#1BB266; --verde-claro:#2BE08A; --branco:#FFFFFF; /* TEMA PADRÃO: ESCURO (decisão do dono do projeto). O visitante alterna no botão do header; a escolha vive em localStorage('noimob-tema') e vence o padrão. Claro = . */ color-scheme:dark; --fundo:#0C211B; --superficie:#14352C; --tinta:#E8F2EC; --foco:#2BE08A; --cinza-texto:#A7BDB2; --cinza-nevoa:#112E26; --verde-suave:#1B4A37; --cinza-borda-card:#27473C; --cinza-borda-campo:#6E8A7C; --vermelho-aviso:#FF8A80; --sombra-1:0 1px 2px rgba(0,0,0,.35); --sombra-2:0 4px 16px rgba(0,0,0,.45); --s-1:4px;--s-2:8px;--s-3:12px;--s-4:16px;--s-5:24px; --s-6:32px;--s-7:40px;--s-8:48px;--s-9:64px;--s-10:96px; --fonte-titulo:'Quicksand','Quicksand Fallback',sans-serif; --fonte-texto:'Nunito','Nunito Fallback',sans-serif; --container:1120px; --pad-lateral:20px; --header-h:64px; --raio-card:16px; --raio-campo:12px; } @media (min-width:640px){:root{--pad-lateral:24px}} @media (min-width:1024px){:root{--pad-lateral:32px;--header-h:72px}} /* ---------- Base ---------- */ *,*::before,*::after{box-sizing:border-box} html{scroll-behavior:smooth} body{ margin:0; font-family:var(--fonte-texto); font-size:16px;line-height:1.625; color:var(--tinta); background:var(--fundo); -webkit-text-size-adjust:100%; } img,svg{display:block;max-width:100%;height:auto} h1,h2,h3{font-family:var(--fonte-titulo);line-height:1.2;margin:0;text-wrap:balance} p{margin:0} a{color:inherit} section{scroll-margin-top:calc(var(--header-h) + 8px)} /* Foco visível — acompanha o tema */ :focus-visible{outline:3px solid var(--foco);outline-offset:2px;border-radius:4px} /* Foco visível — fundos escuros */ .fundo-escuro :focus-visible{outline-color:var(--verde-claro)} /* Movimento reduzido */ @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} *,*::before,*::after{transition:none!important;animation:none!important} } /* ---------- Utilitários ---------- */ .container{max-width:var(--container);margin-inline:auto;padding-inline:var(--pad-lateral)} .pular-conteudo{ position:absolute;left:-9999px;top:0;z-index:100; background:var(--verde-mata);color:#fff; font-family:var(--fonte-titulo);font-weight:700; padding:12px 24px;border-radius:0 0 12px 0; } .pular-conteudo:focus-visible{left:0} /* ---------- Tipografia ---------- */ .display{font-size:32px;line-height:38px;font-weight:700;letter-spacing:-.01em} .h2{font-size:26px;line-height:32px;font-weight:700} .h3{font-size:19px;line-height:26px;font-weight:500} .texto-lg{font-size:18px;line-height:29px} .texto-suave{color:var(--cinza-texto)} .pequeno{font-size:14px;line-height:22px} @media (min-width:1024px){ .display{font-size:48px;line-height:56px} .h2{font-size:36px;line-height:44px} .h3{font-size:22px;line-height:30px} .texto-lg{font-size:20px;line-height:32px} } /* ---------- Selo / chip ---------- */ .selo{ display:inline-flex;align-items:center;gap:8px; background:var(--verde-suave);color:var(--verde-mata); font-family:var(--fonte-titulo);font-weight:700; font-size:13px;line-height:16px;letter-spacing:.08em;text-transform:uppercase; border-radius:999px;padding:8px 18px; } .fundo-escuro .selo{background:transparent;color:var(--verde-claro);border:2px solid var(--verde-claro)} /* ---------- Botões ---------- */ .btn{ display:inline-flex;align-items:center;justify-content:center; font-family:var(--fonte-titulo);font-weight:700;font-size:17px;line-height:24px; border-radius:999px;border:0;cursor:pointer;text-decoration:none; min-height:48px;padding:12px 32px; transition:background-color .2s,transform .15s,box-shadow .2s; } .btn-primario{background:var(--verde-direto);/*color:var(--verde-mata);*/color:#FFFFFF;} .btn-primario:hover{background:var(--verde-direto-hover)} .btn-primario:active{background:var(--verde-direto-hover);transform:translateY(1px)} .btn-grande{min-height:52px;padding:14px 36px} .btn-secundario{ background:transparent;color:var(--tinta); border:2px solid var(--tinta); } .btn-secundario:hover{background:var(--cinza-nevoa)} .btn-bloco{width:100%} @media (max-width:639px){ .btn-bloco-mobile{width:100%} } /* ---------- Header ---------- */ .cabecalho{ position:sticky;top:0;z-index:50; background:var(--fundo); transition:box-shadow .2s; } .cabecalho.rolou{box-shadow:var(--sombra-2)} .cabecalho-inner{ display:flex;align-items:center;justify-content:space-between;gap:16px; min-height:var(--header-h); } .cabecalho-logo{display:inline-flex;border-radius:6px} .cabecalho-logo img{height:32px;width:auto} .cabecalho-nav{display:none} .cabecalho .btn{min-height:44px;padding:10px 24px;font-size:16px} /* Mobile: o CTA do header sai de cena — o hero, logo abaixo, já o apresenta */ @media (max-width:639px){.cabecalho .btn{display:none}} @media (min-width:1024px){ .cabecalho-nav{display:flex;gap:32px;align-items:center} .cabecalho-nav a{ font-family:var(--fonte-titulo);font-weight:500;font-size:16px; color:var(--tinta);text-decoration:none; } .cabecalho-nav a:hover{color:var(--verde-direto-hover);text-decoration:underline;text-underline-offset:6px} } /* ---------- Seções (ritmo) ---------- */ .secao{padding-block:var(--s-9)} @media (min-width:1024px){.secao{padding-block:var(--s-10)}} .secao-nevoa{background:var(--cinza-nevoa)} .secao-mata{background:var(--verde-mata);color:var(--branco)} .secao-titulo{margin-bottom:var(--s-6)} @media (min-width:1024px){.secao-titulo{margin-bottom:var(--s-7)}} /* ---------- Hero ---------- */ .hero{padding-block:var(--s-8) var(--s-9)} .hero-grid{display:grid;gap:var(--s-7);align-items:center} .hero h1{margin:var(--s-5) 0 var(--s-4)} .hero-sub{max-width:65ch} .hero-acoes{display:flex;flex-wrap:wrap;gap:var(--s-4);margin-top:var(--s-6)} .hero-micro{margin-top:var(--s-4)} .hero-figura{display:flex;justify-content:center} .hero-figura .painel{ background:var(--cinza-nevoa);border-radius:24px; padding:var(--s-7); display:flex;align-items:center;justify-content:center; width:min(100%,420px); } .hero-figura svg{width:min(60vw,240px)} @media (min-width:1024px){ .hero{padding-block:var(--s-9) var(--s-10)} .hero-grid{grid-template-columns:1.15fr .85fr} .hero-figura .painel{width:100%;max-width:460px;padding:var(--s-8)} .hero-figura svg{width:280px} } /* ---------- Como funciona ---------- */ .passos{display:grid;gap:var(--s-4);counter-reset:passo} @media (min-width:1024px){.passos{grid-template-columns:repeat(3,1fr);gap:var(--s-5)}} .passo{ background:var(--superficie); border:1px solid var(--cinza-borda-card);border-radius:var(--raio-card); box-shadow:var(--sombra-1); padding:var(--s-5) var(--s-5) var(--s-6); } .passo-numero{ width:48px;height:48px;border-radius:14px; background:var(--verde-suave); display:flex;align-items:center;justify-content:center; font-family:var(--fonte-titulo);font-weight:700;font-size:20px; margin-bottom:var(--s-4); } .passo h3{margin-bottom:var(--s-2)} /* ---------- Vantagens ---------- */ .cards{display:grid;gap:var(--s-4)} @media (min-width:640px){.cards{grid-template-columns:1fr 1fr}} @media (min-width:1024px){.cards{grid-template-columns:repeat(4,1fr);gap:var(--s-5)}} .card{ background:var(--superficie); border:1px solid var(--cinza-borda-card);border-radius:var(--raio-card); box-shadow:var(--sombra-1); padding:var(--s-5) var(--s-5) var(--s-6); transition:transform .2s,box-shadow .2s; } @media (hover:hover){ .card:hover{transform:translateY(-2px);box-shadow:var(--sombra-2)} } .card-icone{ width:48px;height:48px;border-radius:14px; background:var(--verde-suave); display:flex;align-items:center;justify-content:center; margin-bottom:var(--s-4); } .card h3{margin-bottom:var(--s-2)} /* ---------- Economia (seção escura) ---------- */ .economia-intro{max-width:65ch;margin-bottom:var(--s-6);color:rgba(255,255,255,.85)} .exemplos{display:grid;gap:var(--s-4);margin-bottom:var(--s-6)} @media (min-width:1024px){.exemplos{grid-template-columns:repeat(3,1fr);gap:var(--s-5)}} .exemplo{ border:1px solid rgba(255,255,255,.15);border-radius:var(--raio-card); padding:var(--s-5); } .exemplo .imovel{color:rgba(255,255,255,.85)} .exemplo .valor{ font-family:var(--fonte-titulo);font-weight:700; font-size:30px;line-height:1.15;color:var(--verde-claro); margin-top:var(--s-2); } @media (min-width:1024px){.exemplo .valor{font-size:36px}} .economia-zero{ font-family:var(--fonte-titulo);font-weight:700; font-size:22px;line-height:1.3; } @media (min-width:1024px){.economia-zero{font-size:28px}} .economia-zero strong{color:var(--verde-claro);font-weight:700} .economia-nota{margin-top:var(--s-3);color:rgba(255,255,255,.7)} /* ---------- FAQ ---------- */ .faq{max-width:720px;margin-inline:auto} .faq-lista{ background:var(--superficie); border:1px solid var(--cinza-borda-card);border-radius:var(--raio-card); box-shadow:var(--sombra-1); overflow:hidden; } .faq-item + .faq-item{border-top:1px solid var(--cinza-borda-card)} .faq-item summary{ display:flex;align-items:center;justify-content:space-between;gap:var(--s-4); list-style:none;cursor:pointer; min-height:56px;padding:var(--s-4) var(--s-5); font-family:var(--fonte-titulo);font-weight:700;font-size:17px;line-height:1.4; } .faq-item summary::-webkit-details-marker{display:none} .faq-icone{ flex:none;width:28px;height:28px;border-radius:999px; background:var(--verde-suave); display:flex;align-items:center;justify-content:center; color:var(--verde-mata); transition:transform .2s; } .faq-icone::before{content:"+";font-family:var(--fonte-titulo);font-weight:700;font-size:18px;line-height:1} .faq-item[open] .faq-icone{transform:rotate(45deg)} .faq-resposta{ padding:0 var(--s-5) var(--s-5); color:var(--cinza-texto); max-width:65ch; } /* ---------- Anunciar (CTA final) ---------- */ .anunciar-card{ background:var(--superficie); border:1px solid var(--cinza-borda-card);border-radius:24px; box-shadow:var(--sombra-1); padding:var(--s-6) var(--s-5); max-width:560px;margin-inline:auto; } @media (min-width:640px){.anunciar-card{padding:var(--s-8)}} .anunciar-card .h2{margin-bottom:var(--s-2)} .anunciar-card > .texto-suave{margin-bottom:var(--s-6)} .campo{margin-bottom:var(--s-5)} .campo label{ display:block;font-weight:700;font-size:14px;line-height:22px; margin-bottom:var(--s-2); } .campo input{ width:100%;height:52px; border:1.5px solid var(--cinza-borda-campo);border-radius:var(--raio-campo); background:var(--superficie); font-family:var(--fonte-texto);font-size:16px;color:var(--tinta); padding:0 var(--s-4); } .campo input::placeholder{color:var(--cinza-texto);opacity:1} .campo input:focus-visible{outline:3px solid var(--foco);outline-offset:2px;border-color:var(--foco)} .campo input:user-invalid{border-color:var(--vermelho-aviso);border-width:2px} .form-micro{margin-top:var(--s-4);text-align:center} /* ---------- Rodapé ---------- */ .rodape{background:var(--verde-mata);color:var(--branco);padding-block:var(--s-9) var(--s-6)} .rodape-grid{display:grid;gap:var(--s-7)} @media (min-width:1024px){.rodape-grid{grid-template-columns:1.2fr 1fr 1fr}} .rodape-logo img{height:36px;width:auto} .rodape-tagline{margin-top:var(--s-4);color:rgba(255,255,255,.85)} .rodape h2{font-size:16px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:rgba(255,255,255,.6);margin-bottom:var(--s-4)} .rodape-nav{display:grid;gap:var(--s-3)} .rodape-nav a{ color:var(--verde-claro);text-decoration:none; font-family:var(--fonte-titulo);font-weight:500; width:fit-content; } .rodape-nav a:hover{text-decoration:underline;text-underline-offset:4px} .rodape-contato{color:rgba(255,255,255,.85)} .rodape-legal{ border-top:1px solid rgba(255,255,255,.15); margin-top:var(--s-8);padding-top:var(--s-5); display:flex;flex-wrap:wrap;gap:var(--s-2) var(--s-5); color:rgba(255,255,255,.7); } .rodape-legal a{color:rgba(255,255,255,.85);text-underline-offset:3px} .rodape-legal a:hover{color:var(--verde-claro)} /* ---------- Banner de consentimento de cookies (LGPD) ---------- */ .banner-cookies{ position:fixed;left:16px;right:16px;bottom:16px;z-index:60; background:var(--superficie); border:1px solid var(--cinza-borda-card);border-radius:var(--raio-card); box-shadow:var(--sombra-2); padding:var(--s-5); max-width:560px;margin-inline:auto; } .banner-cookies p{margin-bottom:var(--s-4)} .banner-cookies a{color:var(--tinta);font-weight:700} .banner-cookies .acoes{display:flex;gap:var(--s-3);flex-wrap:wrap} .banner-cookies .acoes .btn{flex:1 1 140px;min-height:48px;padding:10px 16px;font-size:16px} /* ---------- Páginas legais ---------- */ .legal{max-width:720px;margin-inline:auto;padding-block:var(--s-8) var(--s-9)} .legal h1{font-size:32px;line-height:1.2;margin-bottom:var(--s-2)} @media (min-width:1024px){.legal h1{font-size:40px}} .legal .meta{color:var(--cinza-texto);margin-bottom:var(--s-6)} .legal h2{font-family:var(--fonte-titulo);font-size:22px;font-weight:700;margin:var(--s-7) 0 var(--s-3)} .legal h3{font-family:var(--fonte-titulo);font-size:17px;font-weight:700;margin:var(--s-5) 0 var(--s-2)} .legal p,.legal li{color:var(--cinza-texto)} .legal p{margin-bottom:var(--s-3)} .legal ul,.legal ol{margin:0 0 var(--s-4);padding-left:22px} .legal li{margin-bottom:var(--s-2)} .legal strong{color:var(--tinta)} .legal mark{background:#FFF3BF;padding:0 4px;border-radius:4px} .legal table{width:100%;border-collapse:collapse;font-size:14px;margin:0 0 var(--s-4)} .legal th{font-family:var(--fonte-titulo);text-align:left;background:var(--verde-mata);color:#fff;padding:10px 12px} .legal td{border-bottom:1px solid var(--cinza-borda-card);padding:10px 12px;vertical-align:top;color:var(--cinza-texto)} /* ============================================================ TEMA — padrão escuro; claro quando (escolha do visitante no botão sol/lua do header, persistida) ============================================================ */ /* Componentes no tema escuro (base) — versão negativa da marca */ .selo{color:var(--verde-claro)} .faq-icone{color:var(--verde-claro)} .cabecalho.rolou{border-bottom:1px solid rgba(255,255,255,.08)} .secao-mata{border-block:1px solid rgba(255,255,255,.07)} svg [stroke="#112E26"]{stroke:#FFFFFF} svg [stroke="#1EBE6E"]{stroke:var(--verde-claro)} .legal mark{background:#52431A;color:#FFE08A} .logo-claro{display:none} .logo-escuro{display:block} /* Tema claro (escolha do visitante) */ :root[data-tema="claro"]{ color-scheme:light; --fundo:#FFFFFF; --superficie:#FFFFFF; --tinta:#112E26; --foco:#112E26; --cinza-texto:#4A5F56; --cinza-nevoa:#F4F7F5; --verde-suave:#E6F8EF; --cinza-borda-card:#D9E2DD; --cinza-borda-campo:#74897F; --vermelho-aviso:#B3261E; --sombra-1:0 1px 2px rgba(17,46,38,.06); --sombra-2:0 4px 16px rgba(17,46,38,.10); } [data-tema="claro"] .selo{color:var(--verde-mata)} [data-tema="claro"] .fundo-escuro .selo{color:var(--verde-claro)} [data-tema="claro"] .faq-icone{color:var(--verde-mata)} [data-tema="claro"] .cabecalho.rolou{border-bottom:none} [data-tema="claro"] .secao-mata{border-block:none} [data-tema="claro"] svg [stroke="#112E26"]{stroke:#112E26} [data-tema="claro"] svg [stroke="#1EBE6E"]{stroke:#1EBE6E} [data-tema="claro"] .legal mark{background:#FFF3BF;color:inherit} [data-tema="claro"] .logo-claro{display:block} [data-tema="claro"] .logo-escuro{display:none} /* Botão de alternância de tema (header) */ .cabecalho-acoes{display:flex;align-items:center;gap:12px} .tema-toggle{ display:inline-flex;align-items:center;justify-content:center; width:44px;height:44px;flex:none; border-radius:999px;border:2px solid var(--cinza-borda-card); background:transparent;color:var(--tinta);cursor:pointer; transition:background-color .2s; } .tema-toggle:hover{background:var(--cinza-nevoa)} .tema-toggle svg{width:20px;height:20px} .icone-lua{display:none} [data-tema="claro"] .icone-sol{display:none} [data-tema="claro"] .icone-lua{display:block}