/* ============================================================ MF ENGENHARIA — "Engineered Editorial" · PRETO & DOURADO Type: Archivo (display) + Chivo (body) + Instrument Serif (accent) Folha compartilhada por index.html e imoveis.html ============================================================ */ /* ------------------------------------------------------------ FONTES — hospedadas aqui, não no Google (30/07/2026) Antes o site pedia o CSS das fontes a fonts.googleapis.com, que por sua vez pedia os arquivos a fonts.gstatic.com. Eram DUAS origens novas antes de qualquer pixel aparecer: DNS + conexão + TLS em cada uma, e o CSS delas bloqueava a renderização. No 4G isso custava caro — o teste de velocidade da Hostinger acusou "render-blocking requests" e "network dependency tree". Agora os .woff2 vêm do mesmo servidor, junto do resto. Só o subconjunto LATIN foi baixado: cobre todo o português (ã, ç, é, õ, …). As setas → e ↘ e a estrela ★ nunca estiveram nestes arquivos — já vinham da fonte do sistema antes, segue igual. Archivo e Chivo são VARIÁVEIS: um arquivo só cobre todos os pesos, por isso o range em font-weight. Não trocar por versões estáticas sem conferir o 'wdth' 112, que a marca usa. ------------------------------------------------------------ */ @font-face{ font-family:'Archivo'; src:url('fontes/archivo-var-latin.woff2') format('woff2-variations'), url('fontes/archivo-var-latin.woff2') format('woff2'); font-weight:100 900; font-stretch:62% 125%; font-style:normal; font-display:swap; } @font-face{ font-family:'Chivo'; src:url('fontes/chivo-var-latin.woff2') format('woff2-variations'), url('fontes/chivo-var-latin.woff2') format('woff2'); font-weight:100 900; font-style:normal; font-display:swap; } @font-face{ font-family:'Instrument Serif'; src:url('fontes/instrument-serif-latin.woff2') format('woff2'); font-weight:400; font-style:normal; font-display:swap; } @font-face{ font-family:'Instrument Serif'; src:url('fontes/instrument-serif-italic-latin.woff2') format('woff2'); font-weight:400; font-style:italic; font-display:swap; } /* ------------------------------------------------------------ TOKENS Quem estrutura é o PRETO (tipografia, fios, blocos). O dourado vira toque de valor — e como texto ele precisa fechar em bronze, senão não passa de 2:1 de contraste. ------------------------------------------------------------ */ :root{ --bg: #F4F1EA; /* papel quente */ --bg-2: #EDE9DF; --surface: #FFFFFF; /* card / superfície elevada */ --surface-2: #FBF9F4; /* card em hover */ --ink: #0F0E0C; /* texto SOBRE preenchimento dourado */ --text: #14130F; /* texto principal */ --mute: #55524B; /* texto de apoio */ --faint: #77726A; /* legendas — ≥4.5:1 */ --gold: #C79A33; /* dourado de PREENCHIMENTO (faixas, botões, selos) */ --gold-ink: #7A5C1C; /* dourado de TEXTO — bronze, 5.5:1 sobre o papel */ --gold-deep: #9A7A2E; /* dourado secundário / sobrescritos */ --gold-050: rgba(199,154,51,.09); --gold-32: rgba(199,154,51,.38); --line: rgba(20,19,15,.14); /* fio estrutural — preto, não dourado */ --line-soft: rgba(20,19,15,.07); --hatch: rgba(20,19,15,.05); /* textura diagonal dos placeholders */ --scrim: rgba(10,10,10,.94); /* véu sobre foto */ --nav-bg: rgba(244,241,234,.84); --glow-1: rgba(199,154,51,.16); /* luz ambiente */ --glow-2: rgba(199,154,51,.07); --contact-glow: rgba(211,168,76,.20); --contact-grid: rgba(211,168,76,.07); --grain-op: .16; --grain-blend: multiply; /* inversão do card de serviço no hover — aqui ele vira PRETO */ --svc-bg: #12110F; --svc-bar: var(--gold); --svc-h: #D3A84C; --svc-p: rgba(242,239,231,.76); --svc-idx: rgba(242,239,231,.5); --shadow: 0 26px 60px -32px rgba(35,28,10,.38); --glow: 0 0 0 1px rgba(199,154,51,.45), 0 20px 50px -26px rgba(199,154,51,.4); --display: 'Archivo', system-ui, sans-serif; --body: 'Chivo', system-ui, sans-serif; --serif: 'Instrument Serif', Georgia, serif; --maxw: 1360px; --pad: clamp(20px, 5vw, 80px); --ease: cubic-bezier(.16,1,.3,1); } /* Dois blocos continuam ESCUROS de propósito — a faixa de contato e os cards de portfólio (que recebem foto). Basta redeclarar os tokens dentro deles: os filhos herdam. */ .contact, .port{ --surface: #1A1917; --surface-2: #221F1C; --text: #F2EFE7; --mute: #A8A399; --faint: #8A857B; --gold-ink: #D3A84C; --line: rgba(211,168,76,.22); --line-soft: rgba(242,239,231,.10); --hatch: rgba(211,168,76,.055); } .contact{--bg-2:#111110} *{margin:0;padding:0;box-sizing:border-box} html{scroll-behavior:smooth;-webkit-text-size-adjust:100%} body{ background:var(--bg); color:var(--text); font-family:var(--body); font-size:clamp(16px,1.02vw,17px); line-height:1.65; overflow-x:hidden; -webkit-font-smoothing:antialiased; } /* luz ambiente dourada */ body::before{ content:"";position:fixed;inset:0;z-index:0;pointer-events:none; background: radial-gradient(90% 60% at 88% -8%, var(--glow-1), transparent 62%), radial-gradient(60% 50% at 4% 104%, var(--glow-2), transparent 66%); } /* granulado de filme */ body::after{ content:"";position:fixed;inset:0;z-index:1;pointer-events:none; opacity:var(--grain-op);mix-blend-mode:var(--grain-blend); background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } ::selection{background:var(--gold);color:var(--ink)} a{color:inherit;text-decoration:none} img{display:block;max-width:100%;height:auto} :focus-visible{outline:2px solid var(--gold-ink);outline-offset:3px} /* O alvo do "pular para o conteúdo" recebe foco por script do navegador, não por clique: sem isto ele ganharia um contorno visível sem motivo. */ [tabindex="-1"]:focus{outline:none} /* Some da tela, mas continua sendo lido por leitor de tela e contando na hierarquia de títulos. Não usar display:none nem visibility:hidden aqui: os dois apagam o elemento também para quem usa leitor. */ .sr-only{ position:absolute;width:1px;height:1px;margin:-1px;padding:0; overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0 } /* ---- pular para o conteúdo ---- */ .skip{ position:fixed;top:0;left:50%;transform:translate(-50%,-120%);z-index:100; background:var(--gold);color:var(--ink);padding:14px 26px; font-family:var(--body);font-size:.82rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase; transition:transform .25s var(--ease) } .skip:focus{transform:translate(-50%,0)} /* ============================================================ LAYOUT HELPERS ============================================================ */ .wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad);position:relative;z-index:2} .eyebrow{ font-family:var(--body);font-size:.72rem;font-weight:600;letter-spacing:.24em;text-transform:uppercase; color:var(--gold-ink);display:inline-flex;align-items:center;gap:.7em; } .eyebrow::before{content:"";width:26px;height:1px;background:var(--gold-ink);display:inline-block} section{position:relative;z-index:2} h1,h2,h3,h4,.big{font-family:var(--display);font-variation-settings:'wdth' 112} /* palavras-acento: serifa itálica dourada — a assinatura da marca */ em.acc{font-family:var(--serif);font-style:italic;font-weight:400;text-transform:none;color:var(--gold-ink);letter-spacing:-.005em} /* ============================================================ NAV ============================================================ */ header.nav{ position:fixed;top:0;left:0;right:0;z-index:50; display:flex;align-items:center;justify-content:space-between; padding:18px var(--pad); transition:background .4s var(--ease),box-shadow .4s,border-color .4s,padding .4s var(--ease); border-bottom:1px solid transparent; } header.nav.scrolled{ background:var(--nav-bg);backdrop-filter:blur(16px) saturate(140%); border-bottom:1px solid var(--line);padding-block:12px; } .brand{display:flex;align-items:center;gap:14px;font-family:var(--display);font-weight:800;letter-spacing:.01em;text-transform:uppercase;color:var(--text)} .brand .mono-mark{ width:40px;height:40px;display:grid;place-items:center;border:1px solid var(--gold-ink); color:var(--gold-ink);font-family:var(--display);font-weight:800;font-size:1rem;position:relative;flex:none } .brand .mono-mark::after{content:"";position:absolute;inset:0;border:1px solid var(--gold-32);transform:translate(4px,4px)} .brand small{display:block;font-family:var(--body);font-size:.56rem;font-weight:500;letter-spacing:.22em;color:var(--faint);margin-top:3px} .nav-links{display:flex;align-items:center;gap:30px;font-size:.9rem;font-weight:500;letter-spacing:.01em} .nav-links a{position:relative;color:var(--mute);transition:color .3s} .nav-links a::after{content:"";position:absolute;left:0;bottom:-6px;width:0;height:1px;background:var(--gold-ink);transition:width .35s var(--ease)} .nav-links a:hover,.nav-links a[aria-current="page"]{color:var(--gold-ink)} .nav-links a:hover::after,.nav-links a[aria-current="page"]::after{width:100%} .nav-cta{ font-family:var(--body);font-size:.8rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase; background:var(--gold);color:var(--ink)!important;padding:12px 22px;border:1px solid var(--gold); transition:.35s var(--ease);white-space:nowrap } .nav-cta::after{display:none!important} .nav-cta:hover{background:transparent;color:var(--gold-ink)!important;border-color:var(--gold-ink)} .burger{display:none;flex-direction:column;gap:5px;background:none;border:0;cursor:pointer;padding:8px} .burger span{width:26px;height:1.5px;background:var(--gold-ink);transition:.3s} /* ============================================================ HERO ============================================================ */ .hero{min-height:100vh;display:flex;flex-direction:column;justify-content:flex-end;padding-top:120px;padding-bottom:48px} /* O hero tem foto de obra no fundo, então ele é ESCURO. Mesmo truque das seções .contact e .port lá em cima: redeclarar os tokens aqui dentro e deixar os filhos herdarem. O --mute sai mais claro que nas outras seções escuras porque aqui ele cai sobre foto, não sobre preenchimento chapado. */ .hero{ --text: #F2EFE7; --mute: #C4BFB4; --faint: #A8A399; --gold-ink: #D3A84C; --line: rgba(211,168,76,.26); --line-soft: rgba(242,239,231,.10); } .hero::before{ content:"";position:absolute;inset:0;z-index:0;pointer-events:none; background-image:linear-gradient(var(--line-soft) 1px,transparent 1px),linear-gradient(90deg,var(--line-soft) 1px,transparent 1px); background-size:78px 78px; mask-image:radial-gradient(circle at 72% 26%,#000,transparent 68%) } /* ---- FOTO DE FUNDO DO HERO ---------------------------------- O .hero é um .wrap, ou seja, tem largura máxima de 1360px. A foto precisa passar disso e ir até a borda da tela, daí o left:50% + width:100vw. O body já tem overflow-x:hidden, então não cria barra de rolagem lateral. */ .hero-bg{ position:absolute;top:0;bottom:0;left:50%;transform:translateX(-50%); width:100vw;z-index:0;overflow:hidden;pointer-events:none } /* A foto da fundação é areia clara e saturada; crua, ela briga com a paleta preto-e-dourado e obriga a máscara a ser quase opaca para o texto sobreviver. Rebaixada e parcialmente dessaturada, ela entra como textura da marca e a máscara pode ser mais leve — ou seja, sobra mais foto visível, não menos. */ .hero-bg img{ width:100%;height:100%;object-fit:cover;object-position:50% 45%; filter:grayscale(.4) brightness(.62) contrast(1.06) } /* A máscara. São duas rampas somadas: 1. vertical — pesada no rodapé (H1, lede e botões) e pesada no topo (eyebrow, coordenadas e a nav fixa), leve no miolo, que é a faixa onde a foto tem permissão de aparecer; 2. horizontal — reforço à esquerda, que é onde todo o texto se alinha. Se trocar a foto por uma mais clara, suba os valores do rodapé e do topo antes de publicar: o texto de apoio é o primeiro a sumir. */ .hero-bg::after{ content:"";position:absolute;inset:0; background: linear-gradient(to right, rgba(10,10,10,.42) 0%, rgba(10,10,10,.10) 52%, transparent 76%), linear-gradient(to top, rgba(10,10,10,.90) 0%, rgba(10,10,10,.72) 22%, rgba(10,10,10,.26) 50%, rgba(10,10,10,.38) 68%, rgba(10,10,10,.86) 90%, rgba(10,10,10,.90) 100%) } /* o conteúdo sobe acima da foto e da máscara */ .hero-top,.hero h1,.hero-foot{position:relative;z-index:1} /* A nav é fixa e transparente até rolar 40px, ou seja: no topo ela cai em cima da foto escura do hero e precisa de cores claras. Depois de rolar ela ganha fundo próprio e volta ao normal sozinha. O html.js é a trava para o caso do JavaScript não rodar: sem ele a classe .scrolled nunca é adicionada, e a nav ficaria clara sobre papel claro no resto da página. E o :has(.hero-bg) limita a regra às páginas que realmente têm a foto — imoveis.html não tem. Vai nos filhos, e não no
inteiro, por causa do celular: lá os links viram gaveta lateral com fundo claro próprio, e clarear o texto deixaria branco no branco. */ html.js body:has(.hero-bg) header.nav:not(.scrolled) .brand, html.js body:has(.hero-bg) header.nav:not(.scrolled) .burger{ --text: #F2EFE7; --mute: #C4BFB4; --faint: #A8A399; --gold-ink: #D3A84C; --gold-32: rgba(211,168,76,.32); } /* acima de 720px os links ficam na própria barra, sobre a foto */ @media(min-width:721px){ html.js body:has(.hero-bg) header.nav:not(.scrolled) .nav-links{ --text: #F2EFE7; --mute: #C4BFB4; --faint: #A8A399; --gold-ink: #D3A84C; } } .hero-top{ display:flex;justify-content:space-between;align-items:flex-start;gap:24px;flex-wrap:wrap; margin-bottom:auto;padding-top:clamp(40px,8vh,90px) } .hero h1{ font-family:var(--display); font-weight:900; font-variation-settings:'wdth' 108; font-size:clamp(2.4rem,7vw,6.5rem); line-height:.9; letter-spacing:-.025em; text-transform:uppercase; color:var(--text); text-align:left; max-width:14ch; } .hero h1 .line{display:block;overflow:hidden;padding-bottom:.06em} .hero h1 .line span{display:block;transform:translateY(105%);animation:riseIn 1.05s var(--ease) forwards} .hero h1 .l2 span{animation-delay:.12s} .hero h1 em.acc{font-size:1.06em;line-height:.9} @keyframes riseIn{to{transform:translateY(0)}} .hero-foot{ display:flex;justify-content:space-between;align-items:flex-end;gap:40px;flex-wrap:wrap; margin-top:38px;padding-top:26px;border-top:1px solid var(--line); opacity:0;animation:fade 1s var(--ease) .5s forwards } @keyframes fade{to{opacity:1}} .hero-lede{max-width:46ch;color:var(--mute);font-size:1.05rem;line-height:1.7;font-weight:300} .hero-lede strong{color:var(--text);font-weight:600} .hero-actions{display:flex;gap:14px;align-items:center;flex-wrap:wrap} .btn{ font-family:var(--body);font-size:.82rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase; padding:16px 26px;display:inline-flex;align-items:center;gap:12px;transition:.4s var(--ease);cursor:pointer;border:1px solid transparent } .btn-primary{background:var(--gold);color:var(--ink);border-color:var(--gold)} .btn-primary:hover{background:transparent;color:var(--gold-ink);border-color:var(--gold-ink);transform:translateY(-3px);box-shadow:var(--glow)} .btn-ghost{border-color:var(--line);color:var(--text)} .btn-ghost:hover{border-color:var(--gold-ink);color:var(--gold-ink);transform:translateY(-3px)} .btn .arrow{transition:transform .4s var(--ease)} .btn:hover .arrow{transform:translateX(5px)} /* ---- faixa dourada rolante ---- */ /* Sem margin-top: a faixa encosta na base do hero de propósito (pedido da cliente). O respiro que existe abaixo dos botões é o padding-bottom do .hero, que fica DENTRO da foto escura — não é folga entre as duas. */ .marquee{ overflow:hidden;white-space:nowrap; position:relative;z-index:2;background:var(--gold) } .marquee-track{display:inline-flex;gap:0;animation:scrollX 28s linear infinite;will-change:transform} .marquee:hover .marquee-track{animation-play-state:paused} .marquee-track span{ font-family:var(--display);font-weight:700;text-transform:uppercase;letter-spacing:.09em; font-variation-settings:'wdth' 100; font-size:clamp(.78rem,1.05vw,.95rem);padding:11px 22px;display:inline-flex;align-items:center;gap:22px;color:var(--ink) } .marquee-track span::after{content:"◆";font-size:.62em;opacity:.5} @keyframes scrollX{to{transform:translateX(-50%)}} /* ============================================================ SOBRE ============================================================ */ .section-head{display:flex;justify-content:space-between;align-items:baseline;gap:20px;margin-bottom:52px;flex-wrap:wrap} .h-xl{font-family:var(--display);font-weight:900;text-transform:uppercase;font-size:clamp(2rem,5vw,4rem);letter-spacing:-.03em;line-height:.95;margin-top:14px;color:var(--text)} .about{padding-block:clamp(60px,8vw,120px)} .about-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(40px,6vw,90px);align-items:center} .about h2{ font-family:var(--display);font-weight:900;text-transform:uppercase;letter-spacing:-.03em; font-size:clamp(2.1rem,4.6vw,4rem);line-height:1;margin-bottom:28px;color:var(--text) } .about h2 em.acc{font-size:1.1em} .about p{color:var(--mute);max-width:52ch;margin-bottom:22px;font-size:1.03rem;font-weight:300} .about p strong{color:var(--text);font-weight:600} .about p a{border-bottom:1px solid var(--gold-ink);transition:color .3s} .about p a:hover{color:var(--gold-ink)} .pillars{display:flex;flex-direction:column;gap:1px;background:var(--line);border:1px solid var(--line)} .pillar{background:var(--surface);padding:26px 28px;display:flex;gap:22px;align-items:flex-start;transition:background .4s var(--ease)} .pillar:hover{background:var(--gold-050)} .pillar .p-num{font-family:var(--display);font-weight:800;color:var(--gold-ink);font-size:.95rem;padding-top:4px} .pillar h3{font-family:var(--display);font-weight:700;font-size:1.12rem;text-transform:uppercase;letter-spacing:.01em;margin-bottom:6px;color:var(--text)} .pillar p{color:var(--mute);font-size:.93rem;margin:0;max-width:none;font-weight:300} /* ============================================================ SERVIÇOS ============================================================ */ .services{padding-block:clamp(60px,8vw,120px)} .svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line)} .svc{ background:var(--surface);padding:40px 32px 34px;min-height:280px;position:relative;overflow:hidden; display:flex;flex-direction:column;justify-content:space-between;transition:background .5s var(--ease);cursor:default } .svc::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:3px;background:var(--gold);transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease)} .svc .svc-idx{font-family:var(--body);font-size:.74rem;font-weight:500;color:var(--faint);letter-spacing:.1em;transition:color .5s} .svc .svc-ico{margin:20px 0 auto;color:var(--gold-ink);transition:color .5s var(--ease),transform .5s var(--ease)} .svc .svc-ico svg{display:block;width:46px;height:46px} .svc h3{font-family:var(--display);font-weight:800;text-transform:uppercase;font-size:1.42rem;letter-spacing:-.01em;margin-bottom:12px;line-height:1.05;color:var(--text);transition:color .5s} .svc p{color:var(--mute);font-size:.93rem;font-weight:300;transition:color .5s} /* inversão total no hover — dourado no escuro, preto no claro */ .svc:hover{background:var(--svc-bg)} .svc:hover::after{transform:scaleX(1);background:var(--svc-bar)} .svc:hover h3{color:var(--svc-h)} .svc:hover p{color:var(--svc-p)} .svc:hover .svc-idx{color:var(--svc-idx)} .svc:hover .svc-ico{color:var(--svc-h);transform:translateY(-3px)} /* ============================================================ PORTFÓLIO ============================================================ */ .portfolio{padding-block:clamp(60px,8vw,120px)} .port-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:16px} .port{ position:relative;overflow:hidden;background:var(--surface);border:1px solid var(--line); min-height:260px;display:flex;flex-direction:column;justify-content:flex-end;padding:24px;cursor:pointer; background-image:repeating-linear-gradient(45deg,var(--hatch) 0 1px,transparent 1px 20px); transition:transform .5s var(--ease),box-shadow .5s,border-color .5s } .port.big{grid-column:span 4;min-height:440px} .port.tall{grid-column:span 2;min-height:440px} .port.third{grid-column:span 2;min-height:300px} .port .p-cat{font-family:var(--body);font-size:.7rem;font-weight:600;letter-spacing:.14em;color:var(--gold-ink);text-transform:uppercase;margin-bottom:8px} .port h3{font-family:var(--display);font-weight:800;text-transform:uppercase;font-size:clamp(1.3rem,2.4vw,2rem);line-height:1;letter-spacing:-.015em;color:var(--text)} .port .p-meta{font-family:var(--body);font-size:.74rem;font-weight:400;color:var(--mute);margin-top:10px;letter-spacing:.04em} /* Cronograma das obras em execução (início e entrega prevista). Só entra nos cards cuja data o cliente confirmou; os demais ficam só com .p-meta. */ .port .p-prazo{ display:flex;flex-wrap:wrap;gap:6px 26px;margin-top:12px;padding-top:12px;border-top:1px solid var(--gold-32); font-family:var(--body);font-size:.68rem;font-weight:400;color:var(--mute);letter-spacing:.06em;text-transform:uppercase } .port .p-prazo b{display:block;font-size:.8rem;font-weight:600;color:var(--text);letter-spacing:.02em;text-transform:none} .port:hover{transform:translateY(-6px);border-color:var(--gold);box-shadow:var(--shadow)} .port::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 30%,var(--scrim));z-index:1} .port>*{position:relative;z-index:2} /* foto do card: fica ABAIXO do véu, para o texto continuar legível */ .port img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0} .port .go{position:absolute;top:16px;right:16px;color:var(--gold-ink);opacity:0;transform:translate(-6px,6px);transition:.4s var(--ease);z-index:2;font-weight:700} .port:hover .go{opacity:1;transform:translate(0,0)} /* ============================================================ CAPA DE VÍDEO — fachada do YouTube Não existe mais seção de vídeo: os vídeos entram na sequência da galeria do projeto. Estas classes são usadas lá dentro (.lb-video). O player só é injetado no clique: sem 1MB de script e sem cookie de rastreio antes do consentimento. ============================================================ */ /* a capa é um