/* ============================================================ Cobra Engenharia — styles.css Site institucional (ProsperSites / Jonnpo Tecnologia) ============================================================ */ :root { /* Paleta OFICIAL — manual da marca (_entrada/marca/ANALISE-MANUAL.md). Não inventar cor: o manual tem 2 principais + 2 de apoio, e nenhuma quente. */ --brand: #056333; /* PRINCIPAL · Pantone 349 C · verde escuro */ --brand-2: #4ab969; /* PRINCIPAL · Pantone 7723 C · verde claro */ --accent: #00b0b5; /* APOIO · Pantone 7466 C · ciano */ --soft: #c7d6ee; /* APOIO · Pantone 2707 C · azul claro */ --brand-dark: #044a26; /* derivado do --brand, p/ hover */ --footer-bg: #044a26; /* derivado: rodapé com profundidade */ --ink: #16302a; /* texto principal */ --muted: #5d716b; /* texto secundário */ --line: #e3e9e6; /* bordas */ --bg: #ffffff; --bg-soft: #f6f5f2; /* neutro QUENTE (era esverdeado) */ --bg-azul: #eef2f9; /* derivado do --soft: 3º tom de seção */ --star: #f5a623; --radius: 16px; --radius-sm: 10px; --shadow: 0 10px 30px rgba(5, 99, 51, .10); --shadow-lg: 0 24px 60px rgba(5, 99, 51, .18); --maxw: 1180px; --header-h: 76px; --font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; } * { box-sizing: border-box; } html { scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { margin: 0; font-family: var(--font); color: var(--ink); background: var(--bg); line-height: 1.6; overflow-x: clip; -webkit-font-smoothing: antialiased; } img { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } .container { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: 24px; } .section { padding: 84px 0; } /* Página de política de privacidade — sem componente próprio, só legibilidade. */ .legal h1 { font-size: clamp(1.8rem, 3.4vw, 2.4rem); font-weight: 800; margin: 0 0 8px; } .legal h2 { font-size: 1.2rem; font-weight: 800; margin: 32px 0 10px; } .legal p, .legal li { color: var(--ink); line-height: 1.6; } .legal ul { padding-left: 20px; margin: 10px 0; display: grid; gap: 8px; } .legal__data { color: var(--muted); font-size: .88rem; margin: 0 0 24px; } .section--soft { background: var(--bg-soft); } .eyebrow { display: inline-block; font-size: .78rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--brand); background: rgba(5,99,51, .1); padding: 6px 16px; border-radius: 999px; } .section__head { text-align: center; max-width: 640px; margin: 0 auto 48px; } .section__title { font-size: clamp(1.7rem, 3.4vw, 2.4rem); font-weight: 800; margin: 14px 0 8px; letter-spacing: -.02em; } .section__title em { color: var(--brand); font-style: normal; } .section__sub { color: var(--muted); font-size: 1.05rem; margin: 0; } /* ---------- Buttons ---------- */ .btn { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: .95rem; padding: 12px 22px; border-radius: 999px; border: 1.5px solid transparent; cursor: pointer; transition: transform .15s ease, background .2s ease, box-shadow .2s ease; } .btn:hover { transform: translateY(-2px); } .btn--primary { background: var(--brand); color: #fff; } .btn--primary:hover { background: var(--brand-dark); filter: brightness(.88); } /* CTA sobre fundo VERDE (footer, bandas, CTA final). Branco com texto da marca: 14,9:1 de contraste e hierarquia correta. O ciano (--accent) é COR DE APOIO no manual — apoia, não lidera CTA. Ele fica restrito a detalhes: kicker do hero, ano da timeline, ícones. */ .btn--light { background: #fff; color: var(--brand); } .btn--light:hover { background: #eef3f0; } .btn--ghost { background: transparent; color: var(--brand); border-color: var(--brand); } .btn--block { width: 100%; justify-content: center; } .link-more { color: var(--brand); font-weight: 600; display: inline-flex; align-items: center; gap: 6px; } .link-more svg { transition: transform .2s ease; } .link-more:hover svg { transform: translateX(4px); } /* ============================================================ HEADER (template — injetado por site.js) ============================================================ */ .site-header { position: sticky; top: 0; z-index: 60; height: var(--header-h); background: rgba(255, 255, 255, .92); backdrop-filter: blur(10px); border-bottom: 1px solid transparent; transition: box-shadow .25s ease, border-color .25s ease; } .site-header.is-scrolled { box-shadow: var(--shadow); border-color: var(--line); } .site-header__inner { display: flex; align-items: center; justify-content: space-between; height: 100%; } .brand { display: flex; flex-direction: column; line-height: 1; } .brand__name { font-weight: 800; font-size: 1.35rem; letter-spacing: .02em; color: var(--ink); } .brand__tag { font-size: .6rem; letter-spacing: .34em; color: var(--brand); text-transform: uppercase; } .brand__logo { display: block; height: 38px; width: auto; align-self: flex-start; } .nav { display: flex; align-items: center; gap: 30px; } .nav a { font-size: .95rem; font-weight: 500; color: var(--ink); position: relative; } .nav a::after { content: ""; position: absolute; left: 0; bottom: -6px; width: 0; height: 2px; background: var(--brand); transition: width .25s ease; } .nav a:hover::after, .nav a.is-active::after { width: 100%; } .nav a.is-active { color: var(--brand); } .header__cta { display: flex; align-items: center; gap: 14px; } .nav-toggle { display: none; background: none; border: 0; cursor: pointer; padding: 8px; } .nav-toggle span { display: block; width: 24px; height: 2px; background: var(--ink); margin: 5px 0; transition: .3s; } @media (max-width: 900px) { .nav-toggle { display: block; } .nav { position: fixed; inset: var(--header-h) 0 auto 0; flex-direction: column; gap: 0; background: #fff; padding: 12px 24px 24px; box-shadow: var(--shadow); transform: translateY(-120%); transition: transform .3s ease; align-items: stretch; } .nav.is-open { transform: translateY(0); } .nav a { padding: 14px 0; border-bottom: 1px solid var(--line); } .header__cta .btn { display: none; } } /* ============================================================ HERO — vídeo sincronizado com scroll ============================================================ */ .hero { position: relative; height: 520vh; } /* trilho de scroll (quanto maior, mais lento o vídeo) */ .hero__stage { position: sticky; top: 0; height: 100vh; overflow: hidden; will-change: transform; } .hero__video, .hero__fallback { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; /* Camada própria na GPU: sem isto, em alguns navegadores o quadro do vídeo é redesenhado na CPU a cada rolagem e o scrub trava (aparecia liso só com a caixa fixa do ?debug=1). */ will-change: transform; transform: translateZ(0); backface-visibility: hidden; } .hero__fallback { background: #16302a center/cover no-repeat; } .hero__overlay { position: absolute; inset: 0; z-index: 2; /* Equilíbrio: escuro o bastante para o texto, claro o bastante para o vídeo AINDA SER VÍDEO. Cheguei a subir o topo para .46 e o hero virou um fundo escuro parado — com véu pesado o movimento some, mesmo o vídeo rolando. O topo pode ser leve porque o único texto lá é o kicker, que agora tem pastilha própria e não depende do véu. O H1 fica na faixa dos .48, onde o branco passa com folga para texto grande. */ background: linear-gradient(180deg, rgba(12,18,16,.20) 0%, rgba(12,18,16,.48) 55%, rgba(12,18,16,.70) 100%); will-change: transform; transform: translateZ(0); } .hero__content { position: absolute; inset: 0; z-index: 3; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; color: #fff; padding: 0 24px; } .hero__line { position: absolute; left: 50%; top: 50%; width: min(900px, 92vw); transform: translate(-50%, -50%); /* JS soma o deslocamento vertical do scroll */ opacity: 0; will-change: opacity, transform; } /* Ciano em texto pequeno sobre vídeo dava 1,77:1 na parte clara — ilegível. Texto pequeno precisa de 4,5:1, e cor de apoio não sustenta isso (o manual já avisa). Branco sobre pastilha escura: contraste garantido em qualquer frame, e o acento da marca fica na borda. */ /* texto na metade esquerda (a planta do apartamento ocupa a direita do vídeo) */ .hero__line--side { left: 29%; width: min(520px, 44vw); } @media (max-width: 900px) { .hero__line--side { left: 50%; width: min(900px, 92vw); } } .hero__kicker { font-size: .82rem; letter-spacing: .34em; text-transform: uppercase; font-weight: 600; color: #fff; display: inline-block; margin: 0 auto 18px; padding: 7px 16px; border-radius: 999px; background: rgba(5,99,51,.55); border: 1px solid rgba(255,255,255,.28); } .hero__title { font-size: clamp(2.4rem, 6.2vw, 5rem); font-weight: 800; letter-spacing: -.02em; margin: 0; line-height: 1.04; text-shadow: 0 2px 30px rgba(0,0,0,.35); } .hero__title--serif { font-family: "Fraunces", Georgia, serif; font-weight: 500; font-style: italic; letter-spacing: -.01em; line-height: 1; font-size: clamp(2.8rem, 7vw, 5.8rem); } /* O ciano dava 1,62:1 aqui mesmo com o véu reforçado — texto grande precisa de 3:1. O acento da marca migra para o sublinhado, onde é decoração e não carrega leitura: o texto vira branco (4,32:1) e a cor continua na tela. */ .hero__em { color: #fff; text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 5px; text-underline-offset: 10px; } .hero__big { display: inline-block; font-size: 1.35em; font-weight: 800; color: var(--brand); letter-spacing: -.03em; } .hero__sub { font-size: clamp(1.05rem, 2vw, 1.45rem); margin: 20px auto 0; max-width: 620px; opacity: .92; } .hero__link { font-weight: 600; text-decoration: underline; text-underline-offset: 3px; } .hero__link:hover { opacity: .8; } .hero__title-link { display: inline-block; transition: opacity .2s ease; } .hero__title-link:hover { opacity: .85; } .hero__cta { margin-top: 34px; } .hero__scroll { position: absolute; bottom: 28px; left: 50%; transform: translateX(-50%); z-index: 3; display: flex; flex-direction: column; align-items: center; opacity: .8; } .hero__scroll span { width: 1px; height: 36px; background: #fff; animation: scrollPulse 1.8s ease-in-out infinite; } .hero__scroll { transition: opacity .3s ease; } @keyframes scrollPulse { 0%,100%{opacity:.2;transform:scaleY(.5);} 50%{opacity:1;transform:scaleY(1);} } /* ============================================================ FINANCIAMENTO — cards (seção verde arredondada) ============================================================ */ .finance { background: var(--brand); color: #fff; border-radius: 0 0 56px 56px; padding: 84px 0; } .finance .eyebrow { background: rgba(255,255,255,.15); color: #fff; } .finance .section__title, .finance .section__sub { color: #fff; } /* O tem `color: var(--brand)` fixo lá em cima, e essa é a cor DO FUNDO desta seção: "financiar" ficava verde-escuro sobre verde-escuro — 1,00:1, invisível. A cor herdada do pai não vence uma cor declarada, então precisa ser dito aqui. Usa o azul claro do manual (Pantone 2707 C): 5,03:1, passa AA para texto normal e grande. O verde claro daria só 2,97:1. */ .finance .section__title em { color: var(--soft); } .finance .section__sub { opacity: .85; } .finance__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } /* Cards BRANCOS sobre a faixa verde. Antes eram branco a 8% por cima do verde, o que não é um card claro — é outro verde (#196f43). A seção empilhava quatro verdes: fundo, dois cards e o destaque. Branco quebra o empilhamento e ainda sobe o corpo do texto para 5,2:1. A faixa segue verde, então o ritmo da página não muda: o verde vira moldura em vez de banho. */ .fcard { position: relative; background: #fff; color: var(--ink); border-radius: var(--radius); padding: 30px 26px; transition: transform .2s ease, box-shadow .2s ease; } /* Card inteiro clicável (pedido do cliente, 11/09) — mesmo truque do .pcard: o link que já existe estica por cima do card, em vez de embrulhar tudo num e duplicar o link pra leitor de tela. */ .fcard .link-more::after { content: ''; position: absolute; inset: 0; z-index: 1; } .fcard:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); } .fcard__icon { width: 52px; height: 52px; border-radius: 12px; display: grid; place-items: center; background: rgba(5,99,51,.09); margin-bottom: 18px; } .fcard__icon svg { width: 24px; height: 24px; stroke: var(--brand); } .fcard h3 { font-size: 1.15rem; margin: 0 0 10px; } .fcard p { font-size: .95rem; color: var(--muted); margin: 0 0 18px; } .fcard .link-more { color: var(--brand); } /* Destaque. Era um card VERDE CLARO no meio de brancos, sobre fundo verde: em vez de destacar, ele afundava — num conjunto de cartões brancos, o colorido lê como "esse falhou", não como "esse é o principal". E o verde claro sobre o verde escuro tem separação baixa demais para funcionar como superfície. Agora ele é branco como os irmãos e destaca por HIERARQUIA, não por cor: fica elevado, com sombra maior, fita superior e o ícone em verde cheio. */ .fcard--hi { transform: translateY(-8px); box-shadow: var(--shadow-lg); border-top: 4px solid var(--brand-2); } /* Sem isto o card destaque DESCERIA no hover (-8px → -6px do .fcard:hover). */ .fcard--hi:hover { transform: translateY(-14px); } .fcard--hi .fcard__icon { background: var(--brand); } .fcard--hi .fcard__icon svg { stroke: #fff; } @media (max-width: 900px) { .fcard--hi { transform: none; } .fcard--hi:hover { transform: translateY(-6px); } } /* ============================================================ IMÓVEIS EM DESTAQUE ============================================================ */ .props__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; } .pcard { display: flex; flex-direction: column; background: #fff; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); transition: transform .2s ease, box-shadow .2s ease; } .pcard:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); } .pcard__media { position: relative; aspect-ratio: 4/3; background: #d7e0dc center/cover no-repeat; } .pcard__badge { position: absolute; top: 14px; left: 14px; background: #fff; color: var(--brand); border-radius: 10px; padding: 8px 12px; font-size: .72rem; box-shadow: var(--shadow); line-height: 1.2; } .pcard__badge strong { display: block; font-size: 1rem; } .pcard__media { flex-shrink: 0; } .pcard__body { display: flex; flex-direction: column; flex: 1; padding: 20px 22px 24px; } .pcard__body .btn { margin-top: auto; } .pcard__title { font-size: 1.2rem; font-weight: 700; margin: 0 0 4px; } .pcard__loc { color: var(--muted); font-size: .9rem; display: flex; align-items: center; gap: 6px; margin-bottom: 14px; } .pcard__specs { display: flex; gap: 16px; color: var(--muted); font-size: .85rem; padding-bottom: 18px; border-bottom: 1px solid var(--line); margin-bottom: 18px; } .pcard__specs span { display: flex; align-items: center; gap: 5px; } /* ============================================================ DEPOIMENTOS ============================================================ */ .tcards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px; max-width: 920px; margin: 0 auto; } /* Provisório: só a Elizângela sobrou depois de tirar o depoimento falso. Some assim que os novos depoimentos entrarem (revisão set/2026). */ .tcards--um { grid-template-columns: 1fr; max-width: 460px; } .tcard { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 32px; box-shadow: var(--shadow); } .tcard__quote-mark { font-size: 3rem; line-height: 0; color: var(--line); font-family: Georgia, serif; } .tcard__stars { color: var(--star); letter-spacing: 2px; margin: 8px 0 14px; } .tcard__text { font-style: italic; color: var(--ink); margin: 0 0 22px; } .tcard__author { display: flex; align-items: center; gap: 12px; } .tcard__avatar { width: 44px; height: 44px; border-radius: 50%; background: var(--brand); color: #fff; display: grid; place-items: center; font-weight: 700; } .tcard__name { font-weight: 700; font-size: .95rem; } .tcard__role { color: var(--muted); font-size: .82rem; } /* ============================================================ AGENDE UMA VISITA (CTA verde + formulário) ============================================================ */ .visit { background: var(--brand); position: relative; } .visit__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0; align-items: stretch; } .visit__media { background: #16302a center/cover no-repeat; border-radius: var(--radius); min-height: 420px; position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; padding: 32px; } .visit__media::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(12,18,16,.25), rgba(12,18,16,.6)); } .visit__media-text { position: relative; z-index: 1; max-width: 440px; margin: 0; color: #fff; text-align: center; font-weight: 400; line-height: 1.3; font-size: clamp(1.3rem, 2.4vw, 2rem); text-shadow: 0 2px 16px rgba(0,0,0,.45); } .visit__media-text strong { font-weight: 700; } .visit__card { background: #fff; border-radius: var(--radius); padding: 40px; box-shadow: var(--shadow-lg); } .visit__card h2 { font-size: 1.6rem; margin: 0 0 6px; } .visit__card p { color: var(--muted); margin: 0 0 24px; } .field { margin-bottom: 16px; } .field label { display: block; font-size: .85rem; font-weight: 600; margin-bottom: 6px; } .field input, .field textarea { width: 100%; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius-sm); font: inherit; color: var(--ink); background: #fafbfb; transition: border-color .2s ease, box-shadow .2s ease; } .field select { width: 100%; padding: 12px 40px 12px 14px; border: 1px solid var(--line); border-radius: var(--radius-sm); font: inherit; color: var(--ink); appearance: none; -webkit-appearance: none; cursor: pointer; background: #fafbfb url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%235d716b' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 14px center; } .field input:focus, .field textarea:focus, .field select:focus { outline: 0; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(5,99,51,.12); } .field textarea { resize: vertical; min-height: 92px; } .form__note { font-size: .78rem; color: var(--muted); text-align: center; margin: 12px 0 0; } .form__status { font-size: .9rem; margin-top: 10px; min-height: 1.2em; color: var(--brand); } /* ============================================================ FOOTER (template — injetado por site.js) ============================================================ */ .site-footer { background: var(--footer-bg); color: rgba(255,255,255,.78); padding: 64px 0 28px; } .footer__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 40px; } .site-footer .brand__name { color: #fff; } .footer__about { margin: 18px 0 20px; font-size: .92rem; max-width: 280px; } .footer__col h4 { color: #fff; font-size: 1rem; margin: 0 0 18px; } .footer__col ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; } .footer__col a:hover { color: #fff; } .footer__contact li { display: flex; gap: 10px; font-size: .92rem; margin-bottom: 12px; } .footer__news input { width: 100%; padding: 12px 14px; border: 0; border-radius: var(--radius-sm); margin: 10px 0; font: inherit; } .footer__news .form__status { color: #fff; } .footer__social { display: flex; gap: 12px; margin-top: 18px; } .footer__social a { width: 38px; height: 38px; border-radius: 50%; background: rgba(255,255,255,.1); display: grid; place-items: center; transition: background .2s ease; } .footer__social a:hover { background: var(--brand); } .footer__social svg { width: 18px; height: 18px; fill: #fff; } .footer__bottom { border-top: 1px solid rgba(255,255,255,.12); margin-top: 44px; padding-top: 22px; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; font-size: .82rem; } .footer__bottom a { color: #fff; } /* ============================================================ FLOATERS — WhatsApp + Back to top ============================================================ */ .wa-float, .to-top { position: fixed; right: 22px; z-index: 70; width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; box-shadow: var(--shadow-lg); cursor: pointer; border: 0; transition: transform .2s ease, opacity .3s ease; } .wa-float { bottom: 22px; background: #25d366; border: 2px solid #fff; } .wa-float:hover, .to-top:hover { transform: scale(1.08); } .wa-float svg { width: 30px; height: 30px; fill: #fff; } .to-top { bottom: 86px; background: var(--brand); border: 2px solid #fff; opacity: 0; pointer-events: none; } .to-top.is-visible { opacity: 1; pointer-events: auto; } .to-top svg { width: 22px; height: 22px; stroke: #fff; } /* ============================================================ COOKIE MODAL ============================================================ */ .cookie { position: fixed; left: 22px; bottom: 22px; z-index: 80; max-width: 380px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-lg); padding: 22px; transform: translateY(160%); transition: transform .4s cubic-bezier(.2,.8,.2,1); } .cookie.is-visible { transform: translateY(0); } .cookie h4 { margin: 0 0 8px; font-size: 1.05rem; } .cookie p { margin: 0 0 16px; font-size: .88rem; color: var(--muted); } .cookie p a { color: var(--brand); text-decoration: underline; } .cookie__actions { display: flex; gap: 10px; } .cookie__actions .btn { flex: 1; padding: 10px 14px; font-size: .85rem; } /* ---------- Reveal on scroll ---------- */ .reveal { opacity: 0; transform: translateY(28px); transition: opacity .6s ease, transform .6s ease; } .reveal.is-in { opacity: 1; transform: translateY(0); } /* ---------- Page hero (internal pages) ---------- */ .page-hero { background: var(--brand); color: #fff; padding: 64px 0; text-align: center; } .page-hero h1 { font-size: clamp(2rem, 4vw, 3rem); margin: 0 0 10px; } .page-hero p { opacity: .9; margin: 0; } /* variante com foto de fundo (ex.: Sobre) */ /* Altura padronizada nas quatro páginas internas. Elas já usavam a mesma classe — o que variava era o conteúdo: Sobre tem H1 de duas linhas mais subtítulo, Empreendimentos tem H1 de duas linhas, Financiamento tem uma. Com padding fixo, cada página ficava de um tamanho. Piso de altura + centro vertical resolve: o texto cresce dentro da mesma caixa. */ .page-hero--photo { /* 560 e não 420: com o fundo preso à viewport, a altura do hero é a janela por onde a imagem aparece — quanto maior, mais a rolagem revela. */ position: relative; padding: 96px 0 88px; min-height: 560px; display: flex; align-items: center; background-color: #16302a; background-size: cover; background-position: center; overflow: hidden; /* no-repeat é obrigatório: sem ele, qualquer folga de enquadramento aparece ladrilhada — o céu repetindo na base da imagem. */ background-repeat: no-repeat; } /* No celular o hero não pode comer a tela inteira: ali ele não tem o parallax (o `fixed` está desligado) e altura demais só empurra o conteúdo para baixo. */ @media (max-width: 900px) { .page-hero--photo { min-height: 420px; } } @media (max-width: 640px) { .page-hero--photo { min-height: 340px; padding: 72px 0 64px; } } /* Parallax: a imagem fica presa à viewport e a rolagem revela mais ou menos dela. Só no desktop de propósito — no iOS o `fixed` é ignorado ou trava, e ali o hero simplesmente fica estático, que é um degrau aceitável. `hover: hover` exclui tablet/celular com tela grande, onde o bug também aparece. Substituiu um parallax em JS que movia background-position: aquele empurrava a imagem além da borda e revelava a repetição. */ @media (min-width: 900px) and (hover: hover) { .page-hero--photo { background-attachment: fixed; } } @media (prefers-reduced-motion: reduce) { .page-hero--photo { background-attachment: scroll; } } /* Escurecido NEUTRO, não verde: a cor da marca vive na UI, não espalhada por cima da fotografia. Foto tem que parecer foto. */ .page-hero--photo::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(12,18,16,.30) 0%, rgba(12,18,16,.52) 55%, rgba(12,18,16,.72) 100%); } /* width: 100% porque o .container virou item de flex — sem isso ele encolhe até o tamanho do texto e o hero deixa de centralizar. */ .page-hero--photo .container { position: relative; z-index: 1; width: 100%; } .page-hero__badge { display: inline-block; margin: 0 0 20px; padding: 8px 22px; background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.28); border-radius: 999px; font-size: .82rem; font-weight: 600; letter-spacing: .03em; backdrop-filter: blur(4px); } .page-hero--photo h1 { font-size: clamp(2.2rem, 5.4vw, 3.6rem); font-weight: 800; letter-spacing: -.02em; margin: 0; } /* ============================================================ SOBRE — Nossa História ============================================================ */ .about-history__grid { display: grid; grid-template-columns: 1fr 1.05fr; gap: 56px; align-items: start; } .about-history h2 { font-size: clamp(1.6rem, 3vw, 2.1rem); font-weight: 800; letter-spacing: -.02em; margin: 0 0 18px; } .about-history__bar { width: 56px; height: 4px; background: var(--brand); border-radius: 2px; margin-bottom: 26px; } .about-history__text p { color: var(--muted); margin: 0 0 18px; } .about-cards { display: grid; gap: 18px; } .acard { border: 1px solid var(--line); border-radius: var(--radius); padding: 24px 26px; background: #fff; } .acard__label { font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--brand); margin: 0 0 8px; } .acard__text { font-weight: 600; margin: 0; color: var(--ink); } .acard__values { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px 22px; } .acard__values li { font-weight: 600; font-size: .92rem; display: flex; gap: 8px; } .acard__values li::before { content: "»"; color: var(--brand); font-weight: 800; } /* ============================================================ SOBRE — Nossa Trajetória (timeline) ============================================================ */ .timeline { background: var(--brand); color: #fff; padding: 84px 0; } .timeline h2 { font-size: clamp(1.7rem, 3.2vw, 2.3rem); font-weight: 800; letter-spacing: -.02em; margin: 0 0 44px; } .timeline__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; } .tl-card { background: #0c1512; border: 1px solid rgba(255,255,255,.08); border-radius: var(--radius); padding: 26px 24px; transition: transform .2s ease; } .tl-card:hover { transform: translateY(-6px); } .tl-card--hi { background: var(--brand-2); border-color: var(--brand-2); color: var(--ink); } .tl-card__year { font-size: 1.35rem; font-weight: 800; color: var(--accent); margin: 0 0 14px; } .tl-card--hi .tl-card__year { color: var(--brand-dark); } .tl-card__label { font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; margin: 0 0 8px; opacity: .85; } .tl-card__text { font-size: .92rem; line-height: 1.5; margin: 0; opacity: .9; } .tl-card--hi .tl-card__label, .tl-card--hi .tl-card__text { opacity: 1; } /* ============================================================ SOBRE — Compromisso com a Qualidade ============================================================ */ .quality__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; } .qitem { text-align: center; } .qitem__icon { width: 72px; height: 72px; border-radius: 18px; margin: 0 auto 18px; display: grid; place-items: center; background: #fff; box-shadow: var(--shadow); } .qitem__icon svg { width: 30px; height: 30px; fill: none; stroke: var(--brand); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; } .qitem h3 { font-size: 1rem; margin: 0 0 6px; } .qitem p { color: var(--muted); font-size: .9rem; margin: 0; } /* ============================================================ SOBRE — Família Cobra Engenharia ============================================================ */ .family__grid { display: grid; grid-template-columns: 1fr 1.05fr; gap: 56px; align-items: center; } .family__media { position: relative; min-height: 420px; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); background-color: var(--brand); background-size: cover; background-position: center; } .family__badge { position: absolute; left: 0; bottom: 0; background: var(--footer-bg); color: #fff; padding: 22px 30px; border-top-right-radius: var(--radius); } .family__badge strong { display: block; font-size: 2rem; font-weight: 800; line-height: 1; color: var(--accent); } .family__badge span { font-size: .85rem; opacity: .92; } .family h2 { font-size: clamp(1.6rem, 3vw, 2.1rem); font-weight: 800; letter-spacing: -.02em; margin: 0 0 16px; } .family__text { color: var(--muted); margin: 0 0 26px; } .quote-card { background: var(--bg-soft); border-radius: var(--radius); padding: 28px 32px 30px; } .quote-card__mark { display: block; height: 22px; font-family: Georgia, serif; font-size: 3rem; line-height: 0; color: var(--line); } .quote-card__stars { color: var(--star); letter-spacing: 3px; margin: 6px 0 14px; } .quote-card__text { font-style: italic; color: var(--ink); margin: 0 0 22px; } .quote-card__author { display: flex; align-items: center; gap: 12px; } .quote-card__avatar { width: 44px; height: 44px; border-radius: 50%; background: var(--brand); color: #fff; display: grid; place-items: center; font-weight: 700; font-size: .9rem; } .quote-card__name { font-weight: 700; font-size: .92rem; } .quote-card__role { color: var(--muted); font-size: .82rem; } /* ============================================================ EMPREENDIMENTOS — toolbar (filtros + cidade) ============================================================ */ .emp-toolbar { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap; margin-bottom: 40px; } .emp-filters { display: flex; flex-wrap: wrap; gap: 10px; } .emp-filters button { border: 1px solid var(--line); background: #fff; color: var(--ink); font: inherit; font-weight: 600; font-size: .9rem; padding: 9px 20px; border-radius: 999px; cursor: pointer; transition: background .2s ease, color .2s ease, border-color .2s ease; } .emp-filters button:hover { border-color: var(--brand); color: var(--brand); } .emp-filters button.is-active { background: var(--ink); color: #fff; border-color: var(--ink); } .emp-loc { display: flex; flex-direction: column; gap: 6px; min-width: 240px; } .emp-loc__label { font-size: .72rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); } .emp-loc select { appearance: none; -webkit-appearance: none; width: 100%; padding: 12px 42px 12px 16px; border: 1px solid var(--line); border-radius: var(--radius-sm); font: inherit; color: var(--ink); cursor: pointer; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%235d716b' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 14px center; } .emp-loc select:focus { outline: 0; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(5,99,51,.12); } /* card de empreendimento (variante do .pcard) */ .pcard--emp .pcard__badge { top: auto; bottom: 16px; } .pcard.is-hidden { display: none; } /* Card inteiro clicável. O "Ver detalhes" que já existe estica por cima do card inteiro — em vez de embrulhar tudo num segundo , que daria dois links para o mesmo destino e faria o leitor de tela ler o card duas vezes. Continua um link só, com o mesmo rótulo, e o Tab continua parando no botão. */ .pcard__body .btn::after { content: ''; position: absolute; inset: 0; z-index: 1; } /* O `.btn:hover` genérico levanta o botão 2px. Aqui isso criava um loop: elemento transformado vira containing block dos próprios absolutos, então no hover o `inset:0` do ::after deixava de medir o card e passava a medir o BOTÃO. O overlay encolhia, o cursor saía dele, o hover caía, o overlay voltava ao tamanho do card e o cursor entrava de novo — piscando entre mão e seta. Quem levanta no hover é o card inteiro (.pcard:hover), que já é a affordance certa; o botão levantar junto era redundante. */ .pcard__body .btn:hover { transform: none; } /* Quem chega pelo teclado precisa ver o card destacado, não só o botão. */ .pcard:focus-within { transform: translateY(-6px); box-shadow: var(--shadow-lg); } /* ============================================================ EMPREENDIMENTOS — CTA "Fale com nossa equipe" ============================================================ */ .emp-cta__grid { display: grid; grid-template-columns: 1.05fr .95fr; align-items: center; } .emp-cta__media { min-height: 460px; border-radius: var(--radius); background: #d7e0dc center/cover no-repeat; box-shadow: var(--shadow); } .emp-cta__card { position: relative; z-index: 1; margin-left: -70px; background: #fff; border-radius: var(--radius); box-shadow: var(--shadow-lg); padding: 46px 44px; } .emp-cta__card h2 { font-size: clamp(1.5rem, 2.6vw, 2rem); font-weight: 800; letter-spacing: -.02em; margin: 0 0 14px; } .emp-cta__card p { color: var(--muted); margin: 0 0 28px; } .emp-cta__btn { text-transform: uppercase; letter-spacing: .04em; } .emp-cta__note { font-size: .78rem; color: var(--muted); text-align: center; margin: 14px 0 0; } /* paginação */ .emp-pagination { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 48px; } .emp-pagination button { min-width: 44px; height: 44px; padding: 0 12px; border: 1px solid var(--line); background: #fff; color: var(--ink); border-radius: 10px; font: inherit; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: background .2s ease, color .2s ease, border-color .2s ease; } .emp-pagination button:hover:not(:disabled) { border-color: var(--brand); color: var(--brand); } .emp-pagination button.is-active { background: var(--brand); color: #fff; border-color: var(--brand); } .emp-pagination button:disabled { opacity: .4; cursor: not-allowed; } /* ============================================================ EMPREENDIMENTO — página de detalhe (template) ============================================================ */ .emp-hero__loc { margin: 12px 0 0; font-size: 1rem; opacity: .92; } #sec-form { padding-top: 40px; } .emp-form { max-width: 80%; margin: 0 auto; } .emp-form .visit__card h2 { font-size: 1.4rem; } .emp-hero__price { display: inline-flex; align-items: baseline; gap: 8px; margin-top: 24px; padding: 12px 22px; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.28); border-radius: 14px; backdrop-filter: blur(4px); } .emp-hero__price span { font-size: .8rem; opacity: .85; } .emp-hero__price strong { font-size: 1.6rem; font-weight: 800; } .emp-hero__price small { opacity: .8; font-weight: 600; } .emp-intro { text-align: center; max-width: 760px; margin: 0 auto; } .emp-intro h2 { font-size: clamp(1.6rem, 3.4vw, 2.4rem); font-weight: 800; letter-spacing: -.02em; margin: 14px 0 16px; } .emp-intro p { color: var(--muted); font-size: 1.05rem; margin: 0; } /* ============================================================ GALERIA — Lightbox ============================================================ */ .gallery-grid img { cursor: zoom-in; transition: transform .2s ease, filter .2s ease; } .gallery-grid img:hover { filter: brightness(1.05); } .lightbox { position: fixed; inset: 0; z-index: 120; display: none; align-items: center; justify-content: center; background: rgba(6,26,20,.92); backdrop-filter: blur(4px); } .lightbox.is-open { display: flex; } .lightbox__img { max-width: 92vw; max-height: 82vh; border-radius: var(--radius-sm); box-shadow: var(--shadow-lg); object-fit: contain; } .lightbox__btn { position: absolute; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.28); color: #fff; width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; cursor: pointer; transition: background .2s ease; } .lightbox__btn:hover { background: rgba(255,255,255,.28); } .lightbox__btn svg { width: 24px; height: 24px; fill: none; stroke: #fff; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; } .lightbox__prev { left: 3vw; } .lightbox__next { right: 3vw; } .lightbox__close { top: 3vh; right: 3vw; width: 46px; height: 46px; } .lightbox__count { position: absolute; bottom: 3vh; left: 50%; transform: translateX(-50%); color: #fff; font-size: .9rem; letter-spacing: .05em; background: rgba(0,0,0,.35); padding: 6px 16px; border-radius: 999px; } /* ============================================================ FINANCIAMENTO ============================================================ */ /* Resumo em 3 passos — bússola do topo, âncora pras 3 seções abaixo. */ .fin-passos { padding: 32px 0; border-bottom: 1px solid var(--line); } .fin-passos__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } .fin-passo { display: flex; gap: 14px; align-items: flex-start; padding: 14px; border-radius: var(--radius-sm); transition: background .2s ease; } .fin-passo:hover { background: var(--bg-soft); } .fin-passo__n { flex-shrink: 0; width: 32px; height: 32px; border-radius: 50%; background: var(--brand); color: #fff; font-weight: 800; font-size: .95rem; display: grid; place-items: center; } .fin-passo h3 { font-size: .92rem; font-weight: 700; color: var(--ink); margin: 0 0 3px; } .fin-passo p { font-size: .82rem; color: var(--muted); margin: 0; } @media (max-width: 780px) { .fin-passos__grid { grid-template-columns: 1fr; gap: 6px; } } /* Casa Verde e Amarela — sobre + features */ .fin-about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; } .fin-about h2 { font-size: clamp(1.7rem, 3.2vw, 2.3rem); font-weight: 800; letter-spacing: -.02em; margin: 0 0 16px; } .fin-about__text { color: var(--muted); margin: 0 0 28px; } .fin-feats { display: grid; gap: 16px; } .fin-feat { display: flex; gap: 16px; align-items: flex-start; border: 1px solid var(--line); border-radius: var(--radius); padding: 20px 22px; background: #fff; box-shadow: var(--shadow); } .fin-feat__i { flex-shrink: 0; width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--bg-soft); } .fin-feat__i svg { width: 22px; height: 22px; fill: none; stroke: var(--brand); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .fin-feat h3 { font-size: .74rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--brand); margin: 2px 0 6px; } .fin-feat p { font-size: .92rem; color: var(--muted); margin: 0; } .fin-media { min-height: 420px; border-radius: var(--radius); background: #d7e0dc center/cover no-repeat; box-shadow: var(--shadow-lg); } /* Utilize seu FGTS — banda verde com card simulador */ .fin-fgts { background: var(--brand); color: #fff; padding: 84px 0; } .fin-fgts__grid { display: grid; grid-template-columns: 1fr 1.05fr; gap: 48px; align-items: center; } .fin-fgts h2 { font-size: clamp(1.7rem, 3.2vw, 2.3rem); font-weight: 800; letter-spacing: -.02em; margin: 0 0 16px; } .fin-fgts__text { opacity: .9; margin: 0 0 24px; } .fin-check { list-style: none; padding: 0; margin: 0 0 28px; display: grid; gap: 0; } .fin-check li { display: flex; gap: 12px; align-items: center; padding: 14px 0; border-bottom: 1px solid rgba(255,255,255,.16); font-size: .95rem; } .fin-check li::before { content: "✓"; flex-shrink: 0; width: 24px; height: 24px; border-radius: 50%; background: var(--accent); color: var(--ink); display: grid; place-items: center; font-size: .8rem; font-weight: 800; } .fin-fgts__btns { display: flex; flex-wrap: wrap; gap: 12px; } .btn--outline-light { background: transparent; color: #fff; border-color: rgba(255,255,255,.5); } .btn--outline-light:hover { background: rgba(255,255,255,.12); } /* Card simulador */ .sim-card { background: #fff; color: var(--ink); border-radius: var(--radius); box-shadow: var(--shadow-lg); padding: 40px; } .sim-card h2 { font-size: 1.6rem; font-weight: 800; margin: 0 0 6px; color: var(--ink); } .sim-card__lead { color: var(--muted); font-size: .95rem; margin: 0 0 22px; } .sim-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 24px; } .sim-stat { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 18px; text-align: center; } .sim-stat strong { display: block; font-size: 1.9rem; font-weight: 800; color: var(--brand); line-height: 1; } .sim-stat span { font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); } .sim-stats__nota { margin: -12px 0 24px; font-size: .82rem; color: var(--muted); } .sim-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .sim-note { font-size: .74rem; color: var(--muted); margin: 4px 0 0; } .sim-result { display: none; margin-top: 22px; border-radius: var(--radius); padding: 24px; border: 1.5px solid var(--line); } .sim-result.is-show { display: block; } .sim-result--ok { background: rgba(5,99,51,.08); border-color: var(--brand); } .sim-result--no { background: rgba(0,176,181,.08); border-color: var(--accent); } .sim-result__title { display: flex; align-items: center; gap: 10px; font-size: 1.15rem; font-weight: 800; margin: 0 0 12px; } .sim-result--ok .sim-result__title { color: var(--brand-dark); } .sim-result--no .sim-result__title { color: #b5670c; } .sim-result__nums { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 14px 0 18px; } .sim-result__num { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 14px; } .sim-result__num span { display: block; font-size: .72rem; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; } .sim-result__num strong { font-size: 1.25rem; font-weight: 800; } .sim-result p { font-size: .9rem; color: var(--ink); margin: 0 0 16px; } /* 10 Motivos para Investir */ .motivos-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px 48px; } .motivo { display: flex; gap: 18px; align-items: flex-start; } .motivo__n { font-size: 2.6rem; font-weight: 800; color: var(--line); line-height: .9; letter-spacing: -.04em; flex-shrink: 0; } .motivo h3 { font-size: .78rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--brand); margin: 4px 0 8px; } .motivo p { font-size: .92rem; color: var(--muted); margin: 0; } /* ============================================================ RESPONSIVE ============================================================ */ @media (max-width: 900px) { .finance__grid, .tcards, .visit__grid, .footer__grid { grid-template-columns: 1fr; } .props__grid { grid-template-columns: repeat(2, 1fr); } .about-history__grid, .family__grid { grid-template-columns: 1fr; gap: 36px; } .timeline__grid, .quality__grid { grid-template-columns: 1fr 1fr; } .visit__media { min-height: 240px; } .hero { height: 360vh; } .emp-toolbar { align-items: stretch; } .emp-loc { min-width: 0; } .emp-cta__grid { grid-template-columns: 1fr; } .emp-cta__media { min-height: 300px; } .emp-cta__card { margin: -48px 18px 0; } } @media (max-width: 900px) { .amen-grid { grid-template-columns: repeat(3, 1fr); } .gallery-grid { grid-template-columns: repeat(2, 1fr); } .emp-loc-grid { grid-template-columns: 1fr; } .fin-about-grid, .fin-fgts__grid { grid-template-columns: 1fr; gap: 36px; } .fin-media { min-height: 280px; } .motivos-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 640px) { .props__grid { grid-template-columns: 1fr; } } @media (max-width: 560px) { .timeline__grid, .quality__grid, .acard__values { grid-template-columns: 1fr; } .emp-filters { width: 100%; } .emp-filters button { flex: 1 1 auto; } .amen-grid { grid-template-columns: repeat(2, 1fr); } .gallery-grid > *:first-child { grid-column: auto; grid-row: auto; } .motivos-grid { grid-template-columns: 1fr; } .sim-card { padding: 26px; } .sim-row, .sim-result__nums { grid-template-columns: 1fr; } } /* ============================================================ HISTÓRIA — números + timeline que acende com o scroll ============================================================ */ /* Faixa CLARA de propósito: ela ficava verde colada no financiamento, que também é verde — duas seções viravam um bloco só de quase tela e meia. Clara, a Home passa a alternar: vídeo escuro → números claros → financiamento verde → azul → branco → visita verde. */ .statbar { background: var(--bg-soft); color: var(--ink); padding: 46px 0; border-bottom: 1px solid var(--line); } .statbar__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 18px; text-align: center; } .statbar__grid li { display: flex; flex-direction: column; gap: 4px; } .statbar__grid strong { font-size: clamp(1.7rem, 3.4vw, 2.6rem); font-weight: 800; color: var(--brand); letter-spacing: -.02em; line-height: 1; font-variant-numeric: tabular-nums; } /* Cor explícita em vez de opacidade: --muted a 85% sobre o claro cairia abaixo de 4,5:1. Cheio dá 4,77:1. */ .statbar__grid span { font-size: .82rem; color: var(--muted); letter-spacing: .02em; } .hist { padding: 84px 0 96px; } .hist__list { list-style: none; margin: 0 auto; padding: 0; position: relative; max-width: 980px; } /* trilho + preenchimento: o ::after cresce conforme --lit (0→100), setado pelo JS */ .hist__list::before, .hist__list::after { content: ""; position: absolute; left: 20px; top: 0; width: 3px; border-radius: 3px; } .hist__list::before { height: 100%; background: var(--line); } .hist__list::after { height: calc(var(--lit, 0) * 1%); background: linear-gradient(180deg, var(--brand) 0%, var(--brand-2) 100%); box-shadow: 0 0 14px rgba(74,185,105,.5); transition: height .12s linear; } .hist__item { position: relative; padding: 0 0 52px 58px; } .hist__item:last-child { padding-bottom: 0; } .hist__dot { position: absolute; left: 12px; top: 6px; width: 19px; height: 19px; border-radius: 50%; background: var(--bg); border: 3px solid var(--line); transition: border-color .45s ease, background .45s ease, box-shadow .45s ease, transform .45s ease; } .hist__card { opacity: .32; transform: translateY(26px); transition: opacity .6s ease, transform .6s cubic-bezier(.2,.7,.3,1); will-change: opacity, transform; } .hist__item.is-lit .hist__card { opacity: 1; transform: none; } .hist__item.is-lit .hist__dot { background: var(--brand); border-color: var(--brand-2); box-shadow: 0 0 0 6px rgba(74,185,105,.18); transform: scale(1.12); } .hist__year { display: inline-block; font-size: .78rem; font-weight: 800; letter-spacing: .14em; color: var(--brand); background: rgba(5,99,51,.09); padding: 5px 14px; border-radius: 999px; margin-bottom: 12px; } .hist__item--now .hist__year { background: var(--brand); color: #fff; } .hist__title { font-size: clamp(1.25rem, 2.4vw, 1.6rem); font-weight: 800; letter-spacing: -.02em; margin: 0 0 10px; } .hist__text { color: var(--muted); margin: 0; max-width: 62ch; } .hist__text strong { color: var(--ink); font-weight: 700; } .hist__media { margin: 20px 0 0; } .hist__media img { width: 100%; height: auto; border-radius: var(--radius); box-shadow: var(--shadow); background: var(--bg-soft); } .hist__media figcaption { font-size: .8rem; color: var(--muted); margin-top: 8px; } .hist__award { display: flex; align-items: center; gap: 14px; margin: 18px 0 0; padding: 12px 16px; background: var(--bg-soft); border: 1px solid var(--line); border-left: 3px solid var(--brand-2); border-radius: var(--radius-sm); font-size: .9rem; } .hist__award img { width: 46px; height: auto; flex-shrink: 0; } .hist__award strong { color: var(--ink); } .hist__award span { color: var(--muted); } .hist-mission { background: var(--brand); color: #fff; padding: 76px 0; text-align: center; } .hist-mission__text { font-size: clamp(1.15rem, 2.4vw, 1.65rem); line-height: 1.5; font-weight: 500; max-width: 820px; margin: 0 auto 18px; } .hist-mission__text strong { font-weight: 800; } .hist-mission__sign { font-size: .78rem; letter-spacing: .22em; text-transform: uppercase; opacity: .7; margin: 0 0 28px; } @media (max-width: 780px) { .statbar__grid { grid-template-columns: repeat(2, 1fr); gap: 24px 12px; } .statbar__grid li:last-child { grid-column: 1 / -1; } .hist__item { padding-left: 46px; padding-bottom: 42px; } .hist__list::before, .hist__list::after { left: 13px; } .hist__dot { left: 5px; } } @media (prefers-reduced-motion: reduce) { .hist__card { opacity: 1; transform: none; transition: none; } .hist__dot, .hist__list::after { transition: none; } } .timeline__more { text-align: center; margin: 36px 0 0; } /* Resultado do simulador — opções, não veredito */ .sim-result__lead { font-weight: 700; margin: 20px 0 12px; } .sim-result__note { font-size: .8rem; color: var(--muted); margin: 14px 0 0; } .field__opt { font-weight: 400; color: var(--muted); } /* Cidade e empreendimento lado a lado: são a mesma pergunta em dois graus. */ .form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } @media (max-width: 520px) { .form__row { grid-template-columns: 1fr; gap: 0; } } .field__hint { font-size: .8rem; color: var(--muted); margin: 6px 0 0; } .field__hint a { color: var(--brand); } .sim-opts { list-style: none; margin: 0 0 18px; padding: 0; display: grid; gap: 10px; } .sim-opts a { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 4px 14px; padding: 14px 18px; background: var(--bg); border: 1px solid var(--line); border-left: 3px solid var(--brand-2); border-radius: var(--radius-sm); transition: border-color .2s ease, transform .2s ease; } .sim-opts a:hover { border-left-color: var(--brand); transform: translateX(3px); } .sim-opts strong { font-size: 1rem; } .sim-opts span { grid-column: 1; font-size: .85rem; color: var(--muted); } .sim-opts em { grid-row: 1 / 3; font-style: normal; font-weight: 700; color: var(--brand); font-size: .9rem; } /* ============================================================ FINANCIAMENTO — "De onde vem o dinheiro" Discreto de propósito: para faixa 1-2 isto é a informação que decide; para faixa 3-4 é ruído. Fica acessível sem dominar a página — a tabela de faixas vai recolhida num
(nativo, sem JS). ============================================================ */ .money { padding: 56px 0; border-top: 1px solid var(--line); } .money__h { font-size: 1.3rem; font-weight: 800; margin: 0 0 6px; letter-spacing: -.01em; } .money__lead { color: var(--muted); margin: 0 0 22px; max-width: 66ch; font-size: .98rem; } .money__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; max-width: 78ch; } .money__list li { display: grid; gap: 3px; padding: 14px 0; border-top: 1px solid var(--line); } .money__list li:last-child { border-bottom: 1px solid var(--line); } .money__list strong { font-size: .98rem; font-weight: 700; } .money__list em { font-style: normal; font-weight: 500; color: var(--muted); } .money__list span { color: var(--muted); font-size: .92rem; line-height: 1.55; } .money__list span strong { color: var(--ink); } /* O Nossa Casa é o único que ninguém explica — ganha um traço, não um card. */ .money__li--hi { border-left: 3px solid var(--brand-2); padding-left: 16px !important; } .money__more { margin-top: 22px; max-width: 78ch; } .money__more summary { cursor: pointer; font-size: .9rem; font-weight: 600; color: var(--brand); padding: 8px 0; list-style: revert; } .money__more summary:hover { text-decoration: underline; } .money__table-wrap { overflow-x: auto; margin-top: 10px; } .money__table { width: 100%; border-collapse: collapse; min-width: 560px; font-size: .88rem; } .money__table th { text-align: left; padding: 9px 12px; border-bottom: 2px solid var(--line); font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); } .money__table td { padding: 9px 12px; border-bottom: 1px solid var(--line); color: var(--muted); } .money__table td:first-child { color: var(--ink); font-weight: 600; } .money__disclaimer { font-size: .78rem; color: var(--muted); margin: 14px 0 0; } /* ============================================================ MAPA DO ES — acende conforme a timeline avança Contorno e coordenadas das cidades vêm da malha oficial do IBGE (API v3 malhas, UF 32 + centroides dos municípios), projetados em equirretangular com correção de latitude. Versionado, não buscado em runtime. ============================================================ */ .hist .container { display: grid; grid-template-columns: 300px 1fr; gap: 48px; align-items: start; } .hist .section__head { grid-column: 1 / -1; } .hist__col { min-width: 0; } /* `align-items: start` no container encolhia este