/* =========================================================== Aqua — Sistema de escala + tokens ----------------------------------------------------------- ESTRATÉGIA: escala proporcional total (root fluido). Âncora de design: 1920px → 1rem = 16px (1:1 com o Figma). Como tudo é medido em rem, a página inteira (fontes, espaços, larguras) cresce/encolhe junto com o root: • 1920px → 1rem = 16px (design 1:1) • 3840px (4K) → 1rem = 32px (arte 2x, proporcional) • telas menores encolhem proporcional até o piso • < 768px → entra a âncora mobile (referência 390px) REGRA DE OURO: ao construir as seções, meça SEMPRE em rem. Converta o valor do Figma (que está em 1920) por: px / 16. Ex.: 40px no Figma → 2.5rem. =========================================================== */ /* ----------------------------------------------------------- 1. Root fluido — a mágica da escala ----------------------------------------------------------- */ :root { /* Desktop/tablet (≥768px): 1rem proporcional ao viewport. 100vw / 120 = 16px @1920. Piso 11px trava telas pequenas, teto 40px evita crescer demais em 5K+ (4K fica em 32px). */ font-size: clamp(11px, calc(100vw / 120), 40px); /* -------- Tokens de tipografia (px @1920 → rem) -------- */ --fs-hero: 1.5625rem; /* 25px */ --fs-h1: 2.5rem; /* 40px */ --fs-h2: 1.4375rem; /* 23px */ --fs-h3: 1.25rem; /* 20px */ --fs-body: 0.9375rem; /* 15px */ --fs-small: 0.8125rem; /* 13px */ /* -------- Espaçamento (rem = escala junto) -------- */ --space-xs: 0.5rem; /* 8px */ --space-sm: 1rem; /* 16px */ --space-md: 2rem; /* 32px */ --space-lg: 4rem; /* 64px */ --space-xl: 7.5rem; /* 120px */ /* -------- Largura do conteúdo (proporcional no 4K) -------- */ --container: 82.5rem; /* 1320px @1920 → 2640px @4K */ /* -------- Paleta (placeholder — troque pelas cores da marca) -------- */ --c-bg: #0b1f2a; --c-text: #ffffff; --c-muted: rgba(255, 255, 255, 0.72); --c-accent: #7fd4d0; } /* Âncora mobile/tablet (≤1024px): referência de design 414px (iPhone XR/11). 100vw / 25.875 = 16px @414. Piso 13px; teto 22px trava o tablet. */ @media (max-width: 1024px) { :root { font-size: clamp(13px, calc(100vw / 25.875), 22px); } } /* ----------------------------------------------------------- 2. Reset enxuto ----------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { overflow-x: hidden; /* trava a rolagem lateral no também (mobile) */ width: 100%; } body { margin: 0; background: var(--c-bg); color: var(--c-text); font-family: 'Montserrat', system-ui, sans-serif; font-size: var(--fs-body); line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: hidden; /* segura sangramentos laterais (ex.: Vector) */ width: 100%; max-width: 100%; } img, video, svg { display: block; max-width: 100%; height: auto; } a { color: inherit; text-decoration: none; } /* ----------------------------------------------------------- 3. Tipografia base ----------------------------------------------------------- */ h1, h2, h3, h4, h5, h6 { font-family: 'Montserrat', sans-serif; font-weight: 900; line-height: 1.1; margin: 0 0 var(--space-sm); } h1 { font-size: var(--fs-h1); } h2 { font-size: var(--fs-h2); } h3 { font-size: var(--fs-h3); } p, span { font-family: 'Montserrat', sans-serif; } p { margin: 0 0 var(--space-sm); } small, .text-small { font-size: var(--fs-small); } /* ----------------------------------------------------------- 4. Layout — container e ritmo das seções Sobrescreve o container do Bootstrap p/ escalar no 4K. ----------------------------------------------------------- */ .container, main .container { width: 100%; max-width: var(--container); padding-inline: var(--space-md); margin-inline: auto; } main > section, main > home { display: block; padding-block: var(--space-xl); } /* ----------------------------------------------------------- 5. Hero (section #home) Fundo bg-home cobrindo tudo; logo no topo, endereço no rodapé. ----------------------------------------------------------- */ .hero { position: relative; min-height: 100vh; padding: var(--space-lg) var(--space-xl); display: flex; flex-direction: column; justify-content: space-between; /* logo em cima, endereço embaixo */ background: url("../img/bg-home.png") center / cover no-repeat; overflow: hidden; } /* leve escurecimento no topo e base p/ legibilidade */ .hero::before { content: ""; position: absolute; inset: 0; background: linear-gradient( 180deg, rgba(0, 0, 0, 0.28) 0%, rgba(0, 0, 0, 0) 28%, rgba(0, 0, 0, 0) 62%, rgba(0, 0, 0, 0.38) 100% ); pointer-events: none; } .hero > * { position: relative; z-index: 1; } /* topo: logo à esquerda, menu à direita */ .hero__top { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); margin-top: -2rem; /* sobe logo + menu juntos */ } /* menu — specs do Figma (Montserrat 700, 10px, tracking 0.31em) */ .hero__nav { display: flex; align-items: center; gap: 0.9rem; font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 0.75rem; /* 12px @1920 — um pouco maior */ letter-spacing: 0.31em; text-transform: uppercase; color: #ffffff; } .hero__nav a { color: #ffffff; white-space: nowrap; transition: opacity 0.25s ease; } .hero__nav a:hover { opacity: 0.7; } .hero__nav span { opacity: 0.55; } /* separadores | */ /* hambúrguer — só aparece no mobile (ver mobile.css) */ .hero__burger { display: none; } .hero__nav { margin-right: 23rem; } /* puxa o menu p/ mais perto do logo */ .hero__logo { width: 19.375rem; /* 310px @1920 (tamanho nativo) */ max-width: 60vw; height: auto; margin-left: 3.8rem; /* desloca o logo um pouco p/ a direita */ } /* centro à esquerda: texto1 + texto2 empilhados */ .hero__lead { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-sm); margin-left: 3.8rem; /* alinha com o logo title.png */ } .hero__lead-title { width: 27rem; margin-top: 6.5rem; } /* maior + desce mais */ /* "Pronto para morar" — texto (Walkway Expand Black, 18px, 0.2em) */ .hero__lead-sub { margin: 1rem 0 0; align-self: flex-start; font-family: 'Walkway Expand', 'Montserrat', sans-serif; font-weight: 400; font-size: 1.375rem; /* maior p/ evidenciar */ line-height: 1; letter-spacing: 0.22em; text-transform: uppercase; color: #E5D0BE; -webkit-text-stroke: 1px #E5D0BE; /* bem encorpado */ text-shadow: 0 2px 10px rgba(0, 0, 0, 0.55); } .br-mob { display: none; } /* quebras de linha só no mobile */ .mobile-only { display: none; } /* elementos exclusivos do mobile */ .desktop-only { display: block; } /* elementos exclusivos do desktop */ /* mapa (imagem) */ .mapa__map-desk { width: 100%; height: auto; display: block; } /* imagens da galeria clicáveis (abrem no lightbox) */ .exepcional__track img { cursor: pointer; } /* ----------------------------------------------------------- Lightbox — amplia a imagem da galeria (mobile + desktop) ----------------------------------------------------------- */ .lightbox { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 1000; align-items: center; justify-content: center; overflow: hidden; /* o zoom é via transform (pinça/arrastar) */ touch-action: none; /* bloqueia o zoom nativo da página no modal */ overscroll-behavior: contain; padding: 3vw; background: rgba(0, 0, 0, 0.9); } .lightbox.is-open { display: flex; } /* ----------------------------------------------------------- Modal do formulário (botões "Quero mais informações") ----------------------------------------------------------- */ .fmodal { display: none; position: fixed; inset: 0; z-index: 1100; align-items: center; justify-content: center; padding: 5vw; background: rgba(0, 0, 0, 0.72); } .fmodal.is-open { display: flex; } .fmodal__card { position: relative; width: 100%; max-width: 33rem; /* maior no desktop */ max-height: 92vh; overflow-y: auto; background: #303032; padding: 3.25rem 3rem 2.75rem; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.55); } /* fontes um pouco maiores no modal (desktop) */ .fmodal .field label { font-size: 0.8125rem; } .fmodal .field input, .fmodal .field select { font-size: 1.0625rem; } .fmodal__close { position: absolute; top: 0.5rem; right: 0.9rem; width: 2.25rem; height: 2.25rem; padding: 0; background: none; border: none; color: #ffffff; font-size: 1.9rem; line-height: 1; cursor: pointer; transition: opacity 0.2s ease; } .fmodal__close:hover { opacity: 0.7; } .fmodal__title { margin: 0 0 1.5rem; color: #ffffff; font-family: 'Walkway Expand', 'Montserrat', sans-serif; font-weight: 900; font-size: 0.9375rem; letter-spacing: 0.18em; text-transform: uppercase; } /* campos na vertical */ .fmodal__form { display: flex; flex-direction: column; gap: 1.9rem; } .fmodal__form .field { width: 100%; max-width: none; height: auto; } .fmodal__btn { margin-top: 0.6rem; height: 3.1rem; padding: 0 1.75rem; background: #b68760; border: none; color: #ffffff; font-family: 'Walkway Expand', 'Montserrat', sans-serif; font-weight: 900; font-size: 0.9375rem; letter-spacing: 0.18em; text-transform: uppercase; white-space: nowrap; cursor: pointer; transition: background 0.25s ease; } .fmodal__btn:hover { background: #a5764f; } .lightbox__img { max-width: 92vw; max-height: 88vh; width: auto; height: auto; object-fit: contain; touch-action: none; /* habilita pinça (2 dedos) + arrastar */ transform-origin: center center; cursor: zoom-in; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.6); } .lightbox__close { position: absolute; top: 1.5rem; right: 2rem; width: 2.75rem; height: 2.75rem; padding: 0; background: none; border: none; color: #ffffff; font-size: 2.5rem; line-height: 1; cursor: pointer; transition: opacity 0.2s ease; } .lightbox__close:hover { opacity: 0.7; } /* descrição (specs Figma: Montserrat 600, 15px, tracking 0.3em) */ .hero__desc { max-width: 30.25rem; /* 484px @1920 */ margin: 1rem 0 0; /* pequeno respiro em relação ao texto2 */ font-family: 'Montserrat', sans-serif; font-weight: 600; font-size: 0.9375rem; /* 15px — um pouco maior (desktop) */ line-height: 2; letter-spacing: 0.3em; text-transform: uppercase; color: #ffffff; } /* botão AGENDE SUA VISITA (Figma: 287x42, bg #B68760) */ .hero__cta { display: inline-flex; flex-direction: row; justify-content: center; align-items: center; gap: 0.625rem; /* 10px */ padding: 0.5rem 1rem; /* 8px 16px */ width: 17.9375rem; /* 287px */ height: 2.625rem; /* 42px */ margin-top: 4rem; /* compensa a descida do trio p/ o botão não descer junto */ background: #b68760; color: #ffffff; font-family: 'Walkway Expand', 'Montserrat', sans-serif; font-weight: 900; font-size: 0.8125rem; /* 13px */ letter-spacing: 0.2em; text-transform: uppercase; transition: background 0.25s ease; } .hero__cta:hover { background: #a5764f; } .hero__address { display: flex; align-items: center; gap: var(--space-xs); margin-left: 3.8rem; /* alinha com o logo title.png */ margin-bottom: 7rem; /* sobe o endereço um pouco */ font-size: var(--fs-small); letter-spacing: 0.12em; text-transform: uppercase; color: var(--c-text); } .hero__pin { width: 1.5rem; /* 24px @1920 */ height: auto; flex: none; } /* ----------------------------------------------------------- 6. Contato — barra de formulário (fundo Rectangle.png) ----------------------------------------------------------- */ .contato { padding-block: 0; /* remove o ritmo padrão das seções */ min-height: 8.5rem; /* 136px (altura da Rectangle) */ display: flex; align-items: center; background: url("../img/Rectangle.png") center / cover no-repeat; } .contato__form { display: flex; align-items: flex-end; /* alinha inputs/botão pela base */ gap: var(--space-md); width: 100%; padding-inline: 5.9375rem; /* 95px @1920 */ } /* cada campo — config do Figma (Group 78: 273.83 x 54.5) */ .field { display: flex; flex-direction: column; justify-content: flex-end; gap: 0.5rem; width: 17.114rem; /* 273.83px */ height: 3.406rem; /* 54.5px */ } .field label { font-family: 'Walkway Expand', 'Montserrat', sans-serif; font-weight: 900; font-size: 0.625rem; /* 10px */ letter-spacing: 0.18em; text-transform: uppercase; color: rgba(255, 255, 255, 0.7); } .field input, .field select { width: 100%; background: transparent; border: none; border-bottom: 1px solid rgba(255, 255, 255, 0.45); padding: 0.35rem 0; color: #ffffff; font-family: 'Walkway Expand', 'Montserrat', sans-serif; font-size: 0.8125rem; /* 13px */ outline: none; } .field input::placeholder { color: rgba(255, 255, 255, 0.5); } .field input.border-danger { border-color: #e05656; } /* select com seta customizada */ .field select { appearance: none; -webkit-appearance: none; font-family: 'Montserrat', sans-serif; /* fonte diferente do label (Walkway) */ font-size: 0.5625rem; /* 9px — menor que o rótulo (10px) */ letter-spacing: 0.12em; text-transform: uppercase; cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23ffffff' stroke-width='1.4'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 0.25rem center; padding-right: 1.5rem; } .field select option { color: #1a1a1a; } /* botão QUERO MAIS INFORMAÇÕES */ .contato__btn { margin-left: auto; /* empurra p/ a direita da barra */ margin-right: 4rem; /* traz um pouco de volta p/ a esquerda */ height: 2.75rem; /* alinha pela base com os inputs */ padding: 0 1.75rem; background: #b68760; border: none; color: #ffffff; font-family: 'Walkway Expand', 'Montserrat', sans-serif; font-weight: 900; font-size: 0.8125rem; /* 13px */ letter-spacing: 0.2em; text-transform: uppercase; white-space: nowrap; cursor: pointer; transition: background 0.25s ease; } .contato__btn:hover { background: #a5764f; } /* campos ocultos (honeypot / mensagem) */ .hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; } /* ----------------------------------------------------------- 7. Vídeo — banner com play sobre fundo branco ----------------------------------------------------------- */ .video { background: #303032; /* fundo escuro atrás do vídeo (desktop) */ padding: 4rem var(--space-xl); } .video__frame { position: relative; max-width: var(--container); margin-inline: auto; line-height: 0; /* remove gap abaixo da img */ } .video__img { width: 100%; height: auto; display: block; } /* vídeo: largura total; a visibilidade por breakpoint fica com .desktop-only/.mobile-only */ .video__media { width: 100%; height: auto; } /* botão play centralizado */ .video__play { display: none; /* triângulo de play removido */ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 5.625rem; /* 90px @1920 */ height: 5.625rem; padding: 0; background: none; border: none; cursor: pointer; transition: opacity 0.25s ease, transform 0.25s ease; } .video__play svg { width: 100%; height: 100%; display: block; } .video__play:hover { opacity: 0.85; transform: translate(-50%, -50%) scale(1.06); } /* ----------------------------------------------------------- 8. Espaços — foto + forma orgânica (Group 85) integradas ----------------------------------------------------------- */ .espacos { background: #ffffff; padding: 4rem var(--space-xl); /* mesma moldura do vídeo */ } /* palco com a mesma largura do vídeo (blob + foto escalam juntos → integração intacta) */ .espacos__stage { position: relative; width: 100%; max-width: 92rem; /* um pouco maior (blob + sala escalam juntos) */ margin-inline: auto; aspect-ratio: 1920 / 980; overflow: hidden; } /* foto: começa em 15% (borda esquerda ~x288 no eixo do Group 85, entre 254 e 313 → sempre atrás da parte opaca do blob) e vai até a direita (full-bleed). object-fit cover evita distorção. */ /* área visível (recorta) na mesma posição/tamanho da antiga img-sala */ .espacos__viewport { position: absolute; top: 0; left: 27%; /* começa mais à direita → borda esquerda fica atrás do blob */ width: 73%; height: 100%; overflow: hidden; } /* trilho que desliza */ .espacos__track { display: flex; width: 100%; height: 100%; transition: transform 0.55s ease; will-change: transform; } .espacos__photo { flex: 0 0 100%; width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; cursor: pointer; /* clique amplia no lightbox */ } /* Group 85 sobreposto à ESQUERDA — mesma altura (980px nativas). A curva bronze cobre a borda esquerda da foto; os cantos transparentes revelam o branco da seção (não a foto). */ .espacos__overlay { position: absolute; top: 0; left: 0; height: 100%; width: auto; /* proporção 777:980 */ } /* botão dentro do Group 85 (desktop) — abaixo dos bullets, à esquerda */ .espacos__btn-desk { position: absolute; left: 21%; top: 70%; z-index: 4; display: inline-flex; align-items: center; justify-content: center; height: 2.1rem; padding: 0 1.4rem; background: #303032; color: #ffffff; font-family: 'Walkway Expand', 'Montserrat', sans-serif; font-weight: 900; font-size: 0.625rem; letter-spacing: 0.16em; text-transform: uppercase; white-space: nowrap; transition: background 0.25s ease; } .espacos__btn-desk:hover { background: #1f1f20; } /* setas sobre a foto — mesmo modelo do carrossel, porém pretas */ .espacos__controls { position: absolute; z-index: 3; left: 76%; /* mais para a direita da foto */ bottom: 4.5rem; /* mais para cima */ transform: translateX(-50%); display: flex; gap: 1rem; } .espacos__arrow { width: 12.6875rem; /* 203px */ height: 1.25rem; /* 20px */ padding: 0; border: none; background: #1a1a1a; /* preto */ cursor: pointer; transition: background 0.2s ease; } .espacos__arrow:hover { background: #000000; } .espacos__arrow svg { width: 100%; height: 100%; display: block; } .espacos__arrow svg line, .espacos__arrow svg polyline { stroke: #ffffff; stroke-width: 1.4; fill: none; } /* ----------------------------------------------------------- 9. Excepcional — lazer (fundo #303032) ----------------------------------------------------------- */ .exepcional { position: relative; background: #303032; padding-block: 0 9rem; /* mais respiro no final */ overflow: hidden; } /* linha bronze decorativa (canto superior esquerdo) */ .exepcional__vector { position: absolute; top: 2.5rem; /* desce um pouco */ left: 0; width: 33rem; /* um pouco maior */ height: auto; z-index: 1; /* fica atrás da galeria */ pointer-events: none; } /* topo: título à esquerda + listas à direita */ .exepcional__content { position: relative; display: flex; align-items: flex-start; gap: var(--space-lg); padding: 4rem var(--space-xl) 3rem; } .exepcional__head { padding-top: 5rem; } /* desce título + subtítulo */ .exepcional__title { width: 15rem; /* 242px @1920 */ height: auto; display: block; } .exepcional__sub { margin: 1.25rem 0 0; font-size: 0.8125rem; /* 13px */ letter-spacing: 0.22em; text-transform: uppercase; color: #ffffff; } /* duas colunas de amenidades */ .exepcional__lists { display: flex; gap: 10rem; /* col2 ancorada à direita; col1 desliza p/ a esquerda */ margin-left: auto; padding-top: 0.25rem; margin-right: 10rem; } .exepcional__lists ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1.1rem; } .exepcional__lists li { display: flex; align-items: center; font-size: 0.75rem; /* 12px */ letter-spacing: 0.2em; text-transform: uppercase; color: rgba(255, 255, 255, 0.82); white-space: nowrap; } .exepcional__lists .dash { width: 1.75rem; /* 28px */ height: 0.0625rem; /* 1px, escala junto */ margin-right: 0.9rem; flex: none; } .exepcional__lists li.is-accent { color: #b68760; } /* galeria — carrossel full-bleed (4 fotos visíveis) */ .exepcional__gallery { position: relative; z-index: 2; /* passa por cima da linha bronze */ overflow: hidden; } .exepcional__track { display: flex; flex-direction: row; /* garante horizontal */ flex-wrap: nowrap; /* nunca empilha */ gap: 0.5rem; will-change: transform; } .exepcional__track img { /* fallback antes do JS ajustar (o JS mede a largura exata) */ flex: 0 0 calc((100% - 1.5rem) / 4); width: calc((100% - 1.5rem) / 4); max-width: none; /* neutraliza o max-width:100% do reset */ aspect-ratio: 424 / 333; /* uniformiza fotos de proporções diferentes */ height: auto; object-fit: cover; object-position: center; display: block; } /* controles do carrossel (Rectangle 150: 203x20, bg #B68760) */ .exepcional__controls { display: flex; justify-content: center; gap: 1rem; margin-top: 4rem; } .exepcional__arrow { width: 12.6875rem; /* 203px */ height: 1.25rem; /* 20px */ padding: 0; border: none; background: #b68760; cursor: pointer; transition: background 0.2s ease; } .exepcional__arrow:hover { background: #a5764f; } .exepcional__arrow svg { width: 100%; height: 100%; display: block; } .exepcional__arrow svg line, .exepcional__arrow svg polyline { stroke: #303032; stroke-width: 1.4; fill: none; } /* ----------------------------------------------------------- 10. Experiência — cards (fundo branco) ----------------------------------------------------------- */ .experiencia { position: relative; background: #ffffff; padding-block: 8.5rem 5.5rem; /* mais respiro antes do título */ /* sem overflow:hidden — o Vector precisa sangrar p/ cima (seção anterior) */ } /* detalhe bronze — sobe entre esta seção e a anterior (escura) e sangra à direita */ .experiencia__vector { position: absolute; top: -19rem; /* imagem tem ~10.6rem transparentes no topo → curva cruza a divisa */ right: -2.5rem; /* sangra p/ fora à direita */ width: 17rem; height: auto; z-index: 3; pointer-events: none; } .experiencia__title { margin: 0 0 2.5rem; text-align: center; color: #303032; font-family: 'Montserrat', sans-serif; font-weight: 900; font-size: 1.375rem; /* 22px */ letter-spacing: 0.22em; text-transform: uppercase; } .experiencia__cards { display: flex; justify-content: center; gap: 1rem; padding-inline: var(--space-md); } /* botão ao final da seção */ .experiencia__cta-wrap { display: flex; justify-content: center; margin-top: 3rem; } .experiencia__btn { display: inline-flex; align-items: center; justify-content: center; height: 2.75rem; padding: 0 2rem; background: #303032; color: #ffffff; font-family: 'Walkway Expand', 'Montserrat', sans-serif; font-weight: 900; font-size: 0.8125rem; letter-spacing: 0.2em; text-transform: uppercase; transition: background 0.25s ease; } .experiencia__btn:hover { background: #1f1f20; } /* card */ .expcard { position: relative; width: 21rem; /* 336px @1920 */ max-width: 23%; overflow: hidden; /* borda limpa p/ o blur */ border-bottom: 3px solid #b68760; /* barrinha bronze na base */ } /* máscara em degradê (só no 1º card) — sem blur, transparente em cima escurecendo suave pra baixo */ .expcard--blur::after { background: linear-gradient( 180deg, rgba(0, 0, 0, 0) 5%, rgba(0, 0, 0, 0.45) 42%, rgba(0, 0, 0, 0.92) 100% ); } .expcard__bg { width: 100%; height: auto; display: block; } /* gradiente p/ legibilidade */ .expcard::after { content: ""; position: absolute; left: 0; right: 0; bottom: 3px; top: 0; background: linear-gradient( 180deg, rgba(0, 0, 0, 0.15) 0%, rgba(0, 0, 0, 0.05) 38%, rgba(0, 0, 0, 0.62) 100% ); pointer-events: none; } /* ícone + título — centralizados no meio do card */ .expcard__main { position: absolute; left: 0; right: 0; top: 52%; transform: translateY(-50%); z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 0.9rem; padding-inline: 1rem; text-align: center; } .expcard__icon { width: auto; height: 2.25rem; /* altura consistente p/ ícones de tamanhos diferentes */ display: block; } .expcard__main h3 { margin: 0; color: #ffffff; font-family: 'Montserrat', sans-serif; font-weight: 900; font-size: 0.95rem; /* ~15px */ letter-spacing: 0.18em; text-transform: uppercase; line-height: 1.3; } /* subtítulo (só card 1) — perto da base */ .expcard__sub { position: absolute; left: 0; right: 0; bottom: 2rem; z-index: 1; margin: 0; padding-inline: 1.75rem; text-align: center; color: rgba(255, 255, 255, 0.92); font-size: 0.9375rem; /* 15px — um pouco maior */ line-height: 1.5; } /* ----------------------------------------------------------- 11. Onde a cidade encontra a natureza (fundo #B68760) ----------------------------------------------------------- */ .cidade { position: relative; background: #b68760; padding-block: 6.5rem 4.5rem; /* desce o título e o conteúdo */ } /* detalhe bolhas — canto superior esquerdo */ .cidade__camada { position: absolute; top: -1rem; left: 0; width: 12rem; /* bolhas maiores */ height: auto; z-index: 1; pointer-events: none; } .cidade__inner { max-width: 85.5rem; /* 1368px @1920 */ margin-inline: auto; padding-inline: var(--space-md); } .cidade__title { margin: 0 0 1.75rem; color: #ffffff; font-family: 'Walkway Expand', 'Montserrat', sans-serif; font-weight: 900; font-size: 1.15rem; /* ~18px */ letter-spacing: 0.2em; text-transform: uppercase; line-height: 1.55; } /* acordeão — clique no título abre a foto + texto e fecha o anterior */ .cidade__acc { border: 1px solid rgba(255, 255, 255, 0.35); } .cidade__item + .cidade__item { border-top: 1px solid rgba(255, 255, 255, 0.35); } /* barra (cabeçalho clicável) — faixa com prévia da foto (item fechado) */ .cidade__bar { position: relative; display: flex; align-items: center; width: 100%; height: 4rem; /* faixa/prévia da imagem */ padding: 0 2rem; background-color: #4a3a2b; background-size: cover; background-position: center; border: none; cursor: pointer; text-align: left; overflow: hidden; } /* escurece a prévia p/ o título ficar legível */ .cidade__bar::after { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, 0.5); transition: background 0.25s ease; } .cidade__bar:hover::after { background: rgba(0, 0, 0, 0.32); } .cidade__bar span { position: relative; /* acima do escurecimento */ z-index: 1; color: #ffffff; font-family: 'Montserrat', sans-serif; font-weight: 900; font-size: 0.85rem; letter-spacing: 0.2em; text-transform: uppercase; } .cidade__item.is-open .cidade__bar { display: none; } /* painel (foto + texto sobreposto) — visível quando o item está aberto */ .cidade__panel { display: none; position: relative; } .cidade__item.is-open .cidade__panel { display: block; } .cidade__panel::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 55%; z-index: 1; background: linear-gradient(180deg, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0) 100%); pointer-events: none; } .cidade__panel-head { position: absolute; top: 0; left: 0; right: 0; z-index: 2; padding: 1.5rem 2rem 1.25rem; } .cidade__panel-head h3 { margin: 0 0 0.75rem; color: #ffffff; font-family: 'Montserrat', sans-serif; font-weight: 900; font-size: 1.05rem; /* maior */ letter-spacing: 0.2em; text-transform: uppercase; white-space: nowrap; /* sem quebra de linha */ } .cidade__panel-head p { margin: 0; color: rgba(255, 255, 255, 0.92); font-weight: 700; /* bold */ font-size: 1rem; /* maior (~16px) */ line-height: 1.5; white-space: normal; /* quebra quando o texto é longo */ } .cidade__panel-img { width: 100%; height: 22rem; /* altura uniforme p/ fotos de proporções diferentes */ object-fit: cover; object-position: center; display: block; } /* primeira (vogue) — mostra a imagem inteira, sem cortar */ .cidade__item:first-child .cidade__panel-img { height: auto; object-fit: fill; } /* botão */ .cidade__cta-wrap { display: flex; justify-content: center; margin-top: 2.75rem; } .cidade__btn { display: inline-flex; align-items: center; justify-content: center; height: 2.75rem; padding: 0 2rem; background: #303032; color: #ffffff; font-family: 'Walkway Expand', 'Montserrat', sans-serif; font-weight: 900; font-size: 0.8125rem; letter-spacing: 0.2em; text-transform: uppercase; transition: background 0.25s ease; } .cidade__btn:hover { background: #1f1f20; } /* ----------------------------------------------------------- 12. Mapa / localização + RJZ Cyrela (fundo branco) ----------------------------------------------------------- */ .mapa { background: #ffffff; color: #303032; padding-block: 4rem 5rem; } .mapa__inner { max-width: 80rem; /* ~1280px — mais largo */ margin-inline: auto; padding-inline: var(--space-md); } .mapa__intro { margin: 0 auto 2.5rem; max-width: 52rem; text-align: center; color: #303032; font-family: 'Montserrat', sans-serif; font-weight: 900; font-size: 0.8125rem; /* 13px */ letter-spacing: 0.18em; text-transform: uppercase; line-height: 1.7; } /* placeholder do mapa */ .mapa__map { display: flex; align-items: center; justify-content: center; aspect-ratio: 62 / 27; background: #f0efee; border: 1px dashed #c9c6c2; } .mapa__map span { color: #a5a09a; font-size: 0.8125rem; letter-spacing: 0.1em; text-transform: uppercase; } /* botão */ .mapa__cta-wrap { display: flex; justify-content: center; margin-top: 2rem; } .mapa__btn { display: inline-flex; align-items: center; justify-content: center; height: 2.75rem; padding: 0 2rem; background: #303032; color: #ffffff; font-family: 'Walkway Expand', 'Montserrat', sans-serif; font-weight: 900; font-size: 0.8125rem; letter-spacing: 0.2em; text-transform: uppercase; transition: background 0.25s ease; } .mapa__btn:hover { background: #1f1f20; } /* bloco RJZ Cyrela — logo + texto centralizados na tela */ .mapa__about { display: flex; align-items: center; justify-content: center; gap: 7rem; margin-top: 7rem; } .mapa__logo { width: 13.1875rem; /* 211px */ height: auto; flex: none; } .mapa__about-text { margin: 0; color: #4a4844; font-size: 0.8125rem; /* 13px */ line-height: 1.7; } .mapa__divider { border: none; border-top: 1px solid #d9d6d2; margin: 5rem 0 5rem; } .mapa__projects-title { margin: 0 0 3rem; text-align: center; color: #303032; font-family: 'Walkway Expand', 'Montserrat', sans-serif; font-weight: 900; font-size: 0.95rem; letter-spacing: 0.2em; text-transform: uppercase; } /* projetos */ .mapa__projects { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.25rem; } .mapa__projects figure { margin: 0; } .mapa__projects img { width: 100%; height: auto; display: block; } .mapa__projects figcaption { margin-top: 0.85rem; text-align: center; color: #6a6660; font-size: 0.75rem; letter-spacing: 0.1em; /* menor p/ acomodar nomes maiores */ line-height: 1.5; text-transform: uppercase; } /* ----------------------------------------------------------- 13. Rodapé (fundo preto, linha bronze no topo) ----------------------------------------------------------- */ .footer { display: flex; align-items: center; justify-content: space-between; background: #1a1a1a; border-top: 2px solid #b68760; padding: 1.75rem var(--space-xl); } .footer__logo { width: 3.5rem; /* um pouco maior */ height: auto; margin-left: 3rem; /* desloca p/ a direita */ } .footer__credit { color: rgba(255, 255, 255, 0.5); font-family: 'Montserrat', sans-serif; font-size: 0.6875rem; /* ~11px */ letter-spacing: 0.3em; text-transform: uppercase; } /* ----------------------------------------------------------- 14. Utilitários de animação (usados pelo script.js) ----------------------------------------------------------- */ [data-anim] { opacity: 0; transform: translateY(1.5rem); transition: opacity .7s ease, transform .7s ease; } [data-anim].is-visible { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { [data-anim] { opacity: 1; transform: none; transition: none; } }