/* ════════════════════════════════════════════════════════════════ Hibritech · folha comum às três páginas ════════════════════════════════════════════════════════════════ Extraída do index.html quando o site deixou de ser uma página só. A única coisa que NÃO vem para cá é o bloco anti-piscar do tema: folha externa chega depois da primeira pintura, e é justamente o quadro que ele existe para evitar. Aquilo segue embutido no de cada página. */ /* ════════════════════════════════════════════════════════════════ Hibritech · site institucional ════════════════════════════════════════════════════════════════ Tema único escuro, sem prefers-color-scheme. Não é economia: é como apresentação de arquitetura se lê, e é o que faz a fotografia da obra brilhar. Todo fundo e toda cor são pintados explicitamente. As cores da marca saíram medidas do lockup oficial (assets/logo/lockup-flat-escuro.png), não escolhidas de memória: HIBRI é #5FA85F, TECH é #3FA5C9, a tinta de fundo é #16242E. */ :root{ --breu:#0A1015; /* o fundo mais fundo */ --carvao:#111C24; /* blocos e cartões */ --tinta:#16242E; /* tinta da marca */ --aresta:#25343F; --giz:#E8EFF3; --bruma:#8296A2; --verde:#5FA85F; /* HIBRI */ --azul:#3FA5C9; /* TECH */ --acao:#0B6B8C; /* mesma ação da loja, para o azul não brigar */ --madeira:#C2874A; --aluminio:#93A7B3; --vidro:#4FB3D4; --concreto:#6C7B84; --grama:#33543B; --creme:#D8CDB0; --grafite:#3A464E; --env:min(1240px, 100% - 2.6rem); --medida:clamp(1rem, .62rem + 1.5vw, 1.32rem); --veu-topo:.62; --veu-meio:.55; /* opacidade do véu sobre o vídeo */ --sombra-cartao:rgba(17,28,36,.86); --borda-cartao:var(--aresta); } /* ── tema claro ────────────────────────────────────────────── O escuro é o padrão porque é como apresentação de arquitetura se lê e é o que faz a fotografia da obra brilhar. O claro existe para quem vai ler a ficha técnica com sol na tela, e para impressão. As cores da MARCA não mudam entre os dois: verde e azul são os do lockup oficial, e trocá-los por causa do fundo seria trocar a marca. O que muda é o chão — e o que se apoia nele: as linhas de alumínio do desenho, que em fundo claro precisam escurecer para continuar existindo. */ :root[data-tema="claro"]{ --breu:#F4F6F7; --carvao:#E8ECEE; --tinta:#DDE3E6; --aresta:#C4CFD5; --giz:#16242E; --bruma:#5A6B76; --acao:#0B6B8C; --aluminio:#5E7080; --concreto:#9AA7AE; --grama:#7EA07C; --creme:#C9BE9E; --grafite:#57646D; --veu-topo:.34; --veu-meio:.22; --sombra-cartao:rgba(255,255,255,.9); --borda-cartao:#B7C4CB; } *{box-sizing:border-box} html{-webkit-text-size-adjust:100%;scroll-behavior:smooth} /* clip, e não hidden. `overflow-x:hidden` faz o body virar um contêiner de rolagem — o overflow-y vira `auto` pela regra que emparelha os eixos. Um segundo contêiner de rolagem no meio do caminho atrapalha tudo que depende de saber quem rola: position:sticky, scroll-snap e qualquer medida de posição. `clip` corta o estouro horizontal sem criar contêiner nenhum, que é o que se queria. */ body{margin:0;background:var(--breu);color:var(--giz);overflow-x:clip; font:400 17px/1.62 "Saira",system-ui,"Segoe UI",sans-serif} h1,h2,h3,.rot{font-family:"Rajdhani","Segoe UI",sans-serif;font-weight:700; text-transform:uppercase;text-wrap:balance;margin:0;letter-spacing:.015em} h1{font-size:clamp(2.3rem,1.2rem + 4.2vw,4.6rem);line-height:.94} h2{font-size:clamp(1.8rem,1.1rem + 2.4vw,3rem);line-height:1} h3{font-size:1.22rem;line-height:1.14;letter-spacing:.03em} p{margin:0} a{color:var(--azul)} img,svg{max-width:100%} .rot{font-size:.74rem;letter-spacing:.26em;color:var(--bruma);font-weight:600} .env{width:var(--env);margin-inline:auto} /* O cabeçalho é sticky com 66px: sem esta margem, clicar em "Imóveis e terrenos" para a rolagem com o título da seção escondido atrás dele. */ section[id],footer[id]{scroll-margin-top:74px} .secao{padding:clamp(4rem,2rem + 7vw,8.5rem) 0;display:grid;gap:clamp(1.8rem,1rem + 2vw,3rem)} .corpo{color:var(--bruma);font-size:var(--medida)} .corpo strong{color:var(--giz);font-weight:500} .corpo p+p{margin-top:1.1rem} :focus-visible{outline:2px solid var(--azul);outline-offset:3px} /* ── botões ─────────────────────────────────────────────────── */ .btn{display:inline-flex;align-items:center;gap:.55rem;padding:.9rem 1.7rem; text-decoration:none;font:600 .84rem/1 "Rajdhani",sans-serif; letter-spacing:.14em;text-transform:uppercase;border:1px solid transparent; transition:background .18s,border-color .18s,color .18s} .btn-cheio{background:var(--acao);color:#fff} .btn-cheio:hover{background:#0A5B78} .btn-vazio{border-color:var(--aresta);color:var(--giz)} .btn-vazio:hover{border-color:var(--azul);color:var(--azul)} /* ── cabeçalho ──────────────────────────────────────────────── */ /* color-mix do fundo do tema, não uma rgba cravada: com a cor fixa o cabeçalho continuava azul-escuro por cima da página clara. */ .topo{position:sticky;top:0;z-index:40; background:color-mix(in srgb, var(--breu) 84%, transparent); backdrop-filter:blur(14px);border-bottom:1px solid var(--aresta)} /* position:relative aqui, e não no .menu-mob: o painel do menu pende do CABEÇALHO, não do botão. Ancorado no botão ele saía pela esquerda da tela, porque o botão não fica na borda direita — vêm depois dele o seletor de tema e o de orçamento. Os links apareciam cortados pela metade. */ .topo .env{display:flex;align-items:center;gap:1.5rem;min-height:66px;position:relative} .topo img{height:34px;width:auto;display:block} .menu{display:none;gap:1.5rem;margin-left:auto;list-style:none;padding:0;margin-block:0} .menu a{color:var(--bruma);text-decoration:none;font-size:.84rem; letter-spacing:.06em;transition:color .18s;white-space:nowrap} .menu a:hover{color:var(--giz)} /* ONDE VOCÊ ESTÁ, no menu. Faltava por inteiro: as três páginas tinham o mesmo cabeçalho, sem nada marcado, e as âncoras da home não marcavam nada nunca. Quem descia a home passava por quatro seções sem que o menu se mexesse — daí a sensação de não estar preso a nada e de não saber de onde se veio. */ .menu a[aria-current]{color:var(--giz)} .menu a[aria-current]::after{content:"";display:block;height:2px;margin-top:5px; background:var(--verde);border-radius:2px} .menu a{padding-bottom:2px} /* A barra de leitura, na base do cabeçalho. Responde "quanto falta" sem ocupar espaço nenhum: são 2px colados na borda que o cabeçalho já tinha. transform em vez de width porque escala não dispara relayout a cada quadro de rolagem. */ .progresso{position:absolute;left:0;right:0;bottom:-1px;height:2px; background:linear-gradient(90deg,var(--verde),var(--azul)); transform:scaleX(0);transform-origin:0 50%;will-change:transform} /* A migalha: de onde você veio, e como voltar. Nas páginas internas o único caminho de volta era o logo, que ninguém lê como botão de voltar quando chegou por link direto. */ .migalha{width:var(--env);margin:0 auto;padding-top:1.4rem; display:flex;align-items:center;gap:.5rem;flex-wrap:wrap; font:600 .74rem/1 "Rajdhani",sans-serif;letter-spacing:.14em; text-transform:uppercase;color:var(--bruma)} .migalha a{color:var(--bruma);text-decoration:none} .migalha a:hover{color:var(--verde)} .migalha b{color:var(--giz);font-weight:600} .migalha svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:2.4; stroke-linecap:round;stroke-linejoin:round;opacity:.6} /* Para onde ir agora. Cada página interna termina oferecendo as outras três frentes, com a atual marcada — assim o fim de uma página é o começo da seguinte, em vez de um beco. */ .adiante{border-top:1px solid var(--aresta); padding:clamp(2.4rem,2rem + 2vw,4rem) 0} .adiante .env{display:grid;gap:1.2rem} .adiante-grade{display:grid;gap:.9rem;grid-template-columns:1fr} @media (min-width:52rem){.adiante-grade{grid-template-columns:repeat(3,1fr)}} .adiante-cartao{display:grid;gap:.35rem;padding:1.1rem 1.2rem;text-decoration:none; border:1px solid var(--aresta);border-radius:12px;background:var(--carvao); transition:border-color .18s,transform .18s} .adiante-cartao:hover{border-color:var(--acao);transform:translateY(-2px)} .adiante-cartao b{color:var(--giz);font-size:1.02rem} .adiante-cartao span{color:var(--bruma);font-size:.88rem;line-height:1.45} .adiante-cartao i{color:var(--verde);font-style:normal;font-size:.8rem; font-weight:600;letter-spacing:.1em;text-transform:uppercase;margin-top:.3rem} /* O cartão da própria página fica visível e inerte: some do caminho sem sumir da lista, que é o que diz "esta é a que você está lendo". */ .adiante-cartao[aria-current]{opacity:.5;pointer-events:none;border-style:dashed} .adiante-cartao[aria-current] i{color:var(--bruma)} .tema{margin-left:auto;background:none;border:1px solid var(--aresta); color:var(--bruma);width:38px;height:38px;display:grid;place-items:center; cursor:pointer;padding:0;flex:none;transition:color .18s,border-color .18s} .tema:hover{color:var(--giz);border-color:var(--azul)} .tema svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.7; stroke-linecap:round;grid-area:1/1} /* mostra o ícone do tema para onde o botão LEVA, não do tema atual: no escuro ele oferece o sol, no claro oferece a lua */ .i-sol{display:block} .i-lua{display:none} :root[data-tema="claro"] .i-sol{display:none} :root[data-tema="claro"] .i-lua{display:block} .topo .btn{padding:.62rem 1.1rem;font-size:.76rem;white-space:nowrap} .so-largo{display:none} @media (min-width:34rem){.so-largo{display:inline}.so-estreito{display:none}} /* 74rem, não 60: em 60 os cinco itens cabiam na largura mas quebravam cada um em duas linhas, e o cabeçalho ficava com 110px de altura. Abaixo disso quem navega é o .menu-mob. */ @media (min-width:74rem){ .menu{display:flex} .tema{margin-left:0} .menu-mob{display:none} } /* ── o menu abaixo de 74rem ───────────────────────────────────── A régua de links some nessa largura, e por um tempo não havia nada no lugar: a justificativa era que os quatro cartões do hero e o rodapé levavam aos mesmos destinos. Só que hero com quatro cartões existe na HOME — nas páginas modular e de imóveis a única saída era rolar até o rodapé, e isso vale para toda janela abaixo de 1184px, o que inclui notebook, não só celular.
em vez de botão com JS: já vem com estado, foco e teclado prontos, e o menu continua funcionando se o script falhar em carregar. */ .menu-mob{margin-left:auto} .menu-mob>summary{list-style:none;cursor:pointer;width:42px;height:42px; display:grid;place-items:center;color:var(--giz); border:1px solid var(--borda-cartao);border-radius:10px} .menu-mob>summary::-webkit-details-marker{display:none} .menu-mob>summary svg{width:20px;height:20px;fill:none;stroke:currentColor; stroke-width:2;stroke-linecap:round} .menu-mob>summary:focus-visible{outline:2px solid var(--azul);outline-offset:2px} .menu-mob[open]>summary{background:var(--carvao);border-color:var(--acao)} /* Ancorado no .topo .env: o painel cai sob o cabeçalho, alinhado à direita da mesma coluna do conteúdo. max-width impede que o min-width de 15rem o faça estourar em tela de 320px. */ .menu-mob>ul{position:absolute;right:0;top:calc(100% + .5rem);z-index:50; margin:0;padding:.45rem;list-style:none;min-width:15rem;max-width:100%; background:var(--carvao);border:1px solid var(--borda-cartao); border-radius:12px;box-shadow:0 18px 44px rgba(6,11,15,.45)} .menu-mob a{display:block;padding:.66rem .75rem;border-radius:8px; color:var(--giz);text-decoration:none;font-size:.92rem} .menu-mob a:hover{background:var(--tinta)} .menu-mob a[aria-current]{color:var(--verde)} /* ── hero ─────────────────────────────────────────────────────── O vídeo é fixo atrás de tudo e a primeira dobra passa por cima dele. z-index -2 em vez de position:fixed no