/* ========================================================================== Veralta — folha de estilos única ========================================================================== */ :root { --bone: #F5F4EF; --ink: #17181A; --teal: #3F7877; --teal-dark: #2F5C5B; --teal-mid: #4C8583; --olive: #3C4535; --plum: #7A4A5C; --line: #DFDDD3; --line-2: #DAD8CE; --muted: #6C6E66; --muted-2: #8A887E; --sand: #D9D7CE; --sans: 'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif; --mono: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', monospace; --header-h: 76px; --gutter: 48px; } /* --- base --------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; font-family: var(--sans); color: var(--ink); background: var(--bone); overflow-x: hidden; -webkit-font-smoothing: antialiased; } h1, h2, h3, p { margin: 0; overflow-wrap: break-word; } /* nada empurra a página na horizontal */ img { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; } a:hover { color: var(--plum); } ::selection { background: var(--olive); color: var(--bone); } :focus-visible { outline: 2px solid var(--plum); outline-offset: 3px; } section, main { scroll-margin-top: var(--header-h); } /* liberta a barra fixa nos saltos de âncora */ /* --- Lenis -------------------------------------------------------------- */ /* Regras exigidas pela lib (equivalentes ao lenis.css oficial), inline para poupar um pedido. Só aplicam quando o Lenis arranca e marca o . */ html.lenis, html.lenis body { height: auto; } .lenis.lenis-smooth { scroll-behavior: auto !important; } /* não competir com o CSS smooth */ .lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; } .lenis.lenis-smooth iframe { pointer-events: none; } .lenis:not(.lenis-autoToggle).lenis-stopped { overflow: clip; } .wrap { max-width: 1320px; margin: 0 auto; padding: 0 var(--gutter); } .nowrap { white-space: nowrap; } .hl { font-weight: 600; } /* --- botões ------------------------------------------------------------- */ .btn { display: inline-flex; align-items: center; gap: 9px; padding: 15px 26px; border: 0; border-radius: 4px; font-family: inherit; font-size: 16px; font-weight: 500; line-height: 1; white-space: nowrap; cursor: pointer; transition: background .18s ease, color .18s ease, border-color .18s ease; } .btn--dark { background: var(--teal); color: var(--bone); } .btn--dark:hover { background: var(--teal-dark); color: var(--bone); } .btn--ghost { border: 1px solid rgba(245,244,239,.35); color: var(--bone); } .btn--ghost:hover { border-color: var(--bone); background: rgba(245,244,239,.08); color: var(--bone); } .btn--cta { border-radius: 0; flex-shrink: 0; padding: 14px clamp(13px, 1.7vw, 24px); background: var(--bone); color: #2E3131; font-size: clamp(11px, 1.05vw, 12.5px); letter-spacing: clamp(.04em, .25vw, .12em); text-transform: uppercase; } .btn--submit { justify-content: center; padding: 15px; background: var(--bone); color: var(--teal); } .btn--cta:hover, .btn--submit:hover { background: var(--teal-dark); color: var(--bone); } .link-underline { display: inline-flex; align-items: center; gap: 10px; margin-top: 28px; padding-bottom: 9px; border-bottom: 1px solid var(--ink); font-size: 16px; font-weight: 500; line-height: 1; } /* --- utilitarios de acessibilidade -------------------------------------- */ /* Primeiro elemento focavel da pagina: quem navega por teclado salta a barra de navegacao inteira em vez de a percorrer em todas as paginas. */ .skip { position: absolute; left: -9999px; z-index: 100; padding: 14px 22px; background: var(--ink); color: var(--bone); font-size: 14px; } .skip:focus { left: var(--gutter); top: 12px; color: var(--bone); } /* visivel para leitores de ecra, fora do ecra para os olhos */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); /* browsers antigos */ clip-path: inset(50%); /* metodo actual */ white-space: nowrap; border: 0; } /* variante de contorno para fundos claros — a .btn--ghost e para fundos escuros */ .btn--linha { border: 1px solid var(--line-2); color: var(--ink); } .btn--linha:hover { border-color: var(--ink); background: #EDEBE3; color: var(--ink); } /* --- tipografia partilhada ---------------------------------------------- */ .eyebrow { font-family: var(--mono); font-size: 11px; line-height: 1; letter-spacing: .2em; text-transform: uppercase; color: var(--muted-2); margin-bottom: 18px; } .h-section { font-size: clamp(32px, 3.5vw, 46px); font-weight: 200; line-height: 1.15; letter-spacing: -.02em; } .section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 40px; flex-wrap: wrap; margin-bottom: 52px; } .section-head--ruled { align-items: flex-end; gap: 48px; margin-bottom: 0; padding-top: 38px; border-top: 1px solid var(--line-2); } .section-note { max-width: 400px; font-size: 16px; font-weight: 300; line-height: 1.6; color: var(--muted); } .center { display: flex; justify-content: center; margin-top: 56px; } /* --- cabeçalho ---------------------------------------------------------- */ .site-header { position: sticky; top: 0; z-index: 50; background: var(--teal); } .header-bar { height: var(--header-h); display: flex; align-items: center; justify-content: space-between; gap: 28px; } .logo { display: flex; align-items: center; gap: 12px; flex-shrink: 0; color: var(--bone); white-space: nowrap; } .logo:hover { color: var(--bone); } .logo__word { font-size: clamp(17px, 1.8vw, 21px); font-weight: 500; line-height: 1; letter-spacing: clamp(.1em, .5vw, .2em); } .logo__rule { width: 1px; height: 18px; background: rgba(245,244,239,.35); } .logo__dot { width: 5px; height: 5px; background: var(--bone); } .nav { display: flex; align-items: center; gap: clamp(9px, 2vw, 32px); min-width: 0; } .nav a { padding: 6px 0; border-bottom: 1px solid transparent; font-size: clamp(11px, 1.05vw, 12.5px); font-weight: 400; line-height: 1; letter-spacing: clamp(.02em, .3vw, .12em); text-transform: uppercase; color: #DCE7E6; white-space: nowrap; transition: color .18s ease, border-color .18s ease; } .nav a:hover { color: #FFFFFF; border-bottom-color: var(--bone); } /* o botão "Fale connosco" da barra chega em desktop; este só serve o painel */ .nav__cta { display: none; } /* --- botão do menu (mobile) --------------------------------------------- */ .menu-toggle { display: none; /* o script revela-o; em desktop fica sempre fora */ flex-direction: column; align-items: center; justify-content: center; gap: 5px; width: 44px; /* alvo de toque confortável */ height: 44px; margin-right: -11px; /* alinha a barra com a goteira sem deslocar o resto */ padding: 0; border: 0; background: none; cursor: pointer; flex-shrink: 0; } .menu-toggle__bar { display: block; width: 22px; height: 1.5px; background: var(--bone); transition: transform .25s ease, opacity .2s ease; } /* as três barras fecham em X */ [data-menu="aberto"] .menu-toggle__bar:nth-child(1) { transform: translateY(6.5px) rotate(45deg); } [data-menu="aberto"] .menu-toggle__bar:nth-child(2) { opacity: 0; } [data-menu="aberto"] .menu-toggle__bar:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); } /* --- hero --------------------------------------------------------------- */ .hero { position: relative; display: flex; align-items: center; min-height: calc(100vh - var(--header-h)); min-height: calc(100svh - var(--header-h)); /* iOS: não conta a barra de endereço */ background: #1C1E1A; overflow: hidden; clip-path: inset(0); /* corta a foto ampliada do parallax mesmo que o overflow falhe */ } .hero__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 60% 55%; } .hero__scrim { position: absolute; inset: 0; background: linear-gradient(100deg, rgba(15,16,13,.9) 0%, rgba(15,16,13,.7) 46%, rgba(15,16,13,.38) 100%); } .hero__inner { position: relative; width: 100%; padding-top: clamp(56px, 7vh, 104px); padding-bottom: clamp(56px, 7vh, 104px); display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 72px; align-items: center; } .hero__copy { max-width: 620px; } .hero h1 { font-size: clamp(38px, 4.6vw, 64px); font-weight: 300; line-height: 1.14; letter-spacing: -.02em; color: var(--bone); text-wrap: pretty; } .hero__lede { max-width: 440px; margin-top: 26px; font-size: 18px; font-weight: 300; line-height: 1.65; color: #C9CCC1; text-wrap: pretty; } .hero__actions { display: flex; gap: 14px; margin-top: 38px; flex-wrap: wrap; } .stat-bar { display: grid; /* contagem fixa: com auto-fit cabiam 3 colunas e a quarta ficava sozinha */ grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(16px, 2.4vw, 40px); padding-bottom: 26px; margin-bottom: 34px; border-bottom: 1px solid rgba(245,244,239,.22); } .stat__n { font-size: clamp(26px, 3.6vw, 48px); font-weight: 800; line-height: 1.05; letter-spacing: -.02em; color: #FFFFFF; } .stat__l { margin-top: 8px; font-family: var(--mono); font-size: 12px; line-height: 1.4; letter-spacing: .1em; text-transform: uppercase; color: #9BA394; } /* --- formulário --------------------------------------------------------- */ .lead-form { display: flex; flex-direction: column; gap: 12px; padding: 30px 28px 28px; background: var(--teal); } .lead-form__q { margin-bottom: 2px; font-size: 14px; line-height: 1.4; color: #DDE1D5; } .choices { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 6px; } .choice { display: flex; align-items: center; gap: 7px; font-size: 14px; line-height: 1; color: var(--bone); cursor: pointer; } .choice input { width: 14px; height: 14px; accent-color: var(--bone); } .field { width: 100%; padding: 13px 12px; border: 1px solid rgba(245,244,239,.2); border-radius: 4px; background: var(--teal-mid); color: #E7EADF; font-family: var(--sans); font-size: 15px; line-height: 1; } .field::placeholder { color: #CFE0DE; opacity: 1; } select.field { appearance: none; } .field--code { text-align: center; } .phone { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 8px; } .consent { display: flex; align-items: flex-start; gap: 9px; margin: 2px 0 4px; font-size: 12px; font-weight: 300; line-height: 1.5; color: #B9C0AF; cursor: pointer; } .consent input { width: 13px; height: 13px; margin-top: 2px; accent-color: var(--bone); } .form-note { font-family: var(--mono); font-size: 13px; line-height: 1.4; color: #C9D2BC; text-align: center; } /* --- empreendimentos ---------------------------------------------------- */ .s-projects { padding: 104px 0 110px; } .projects { border-top: 1px solid var(--line); } .project { display: grid; grid-template-columns: 52px minmax(0, 1.5fr) minmax(0, 1fr) 120px 88px 96px 20px; align-items: center; gap: 20px; padding: 20px 0; border-bottom: 1px solid var(--line); transition: background .18s ease; } .project:hover { background: #EDEBE3; color: var(--ink); } .project__n { padding-left: 12px; font-family: var(--mono); font-size: 11px; line-height: 1; color: #A3A196; } .project__name { font-size: clamp(19px, 2vw, 26px); font-weight: 500; line-height: 1.25; letter-spacing: -.02em; } .project__loc { font-size: 15px; font-weight: 300; line-height: 1.5; color: var(--muted); } .project__status { font-family: var(--mono); font-size: 11px; line-height: 1; letter-spacing: .14em; text-transform: uppercase; color: var(--plum); } .project__status--done { color: var(--muted-2); } .project__year { font-family: var(--mono); font-size: 13px; line-height: 1; color: var(--muted); } .project__thumb { height: 64px; background: var(--sand); overflow: hidden; } .project__thumb img { width: 100%; height: 100%; object-fit: cover; } .project__arrow { font-size: 15px; color: var(--muted); text-align: right; } /* --- quem somos --------------------------------------------------------- */ /* Grelha de 12 colunas com as duas caixas na mesma linha e um troço em comum: a foto ocupa as colunas 1 a 7, o cartão da 7 à 12. A coluna 7 é partilhada, e é aí que se sobrepõem. Ambos ficam dentro da largura da página — a foto a sangrar deixava um terço de folhagem escura sem função nenhuma. */ .s-about { padding: 0 0 120px; } .about { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: center; } .about__media { grid-column: 1 / 8; grid-row: 1; position: relative; aspect-ratio: 4 / 3; background: var(--sand); overflow: hidden; clip-path: inset(0); } .about__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 38% 50%; } .about__cap { position: absolute; left: 26px; bottom: 22px; z-index: 1; font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: rgba(245, 244, 239, .92); text-shadow: 0 1px 14px rgba(15, 16, 13, .6); /* legível seja qual for o recorte */ } .about__body { grid-column: 7 / 13; grid-row: 1; z-index: 1; padding: 48px 44px 44px; background: var(--bone); /* sombra larga e quase transparente: levanta o cartão sem o emoldurar */ box-shadow: 0 44px 80px -44px rgba(23, 24, 26, .34); } .about__body .eyebrow { margin-bottom: 18px; } .about h2 { font-size: clamp(28px, 2.4vw, 36px); font-weight: 200; line-height: 1.2; letter-spacing: -.02em; text-wrap: pretty; } .about__lede { margin-top: 18px; font-size: 16px; font-weight: 300; line-height: 1.7; color: #4E5049; text-wrap: pretty; } .facts { margin: 30px 0 0; border-top: 1px solid var(--line); } .fact { display: grid; grid-template-columns: 78px minmax(0, 1fr); gap: 18px; align-items: baseline; padding: 15px 0; border-bottom: 1px solid var(--line); } .fact__n { font-size: 25px; font-weight: 500; line-height: 1; letter-spacing: -.03em; color: var(--olive); } .fact__t { margin: 0; font-size: 14px; font-weight: 300; line-height: 1.6; color: #565850; } .about .link-underline { margin-top: 26px; } /* --- padrão de entrega (marquee) ---------------------------------------- */ .s-details { padding: 96px 0 110px; overflow: hidden; } .details-head { padding-bottom: 48px; } .details-head .section-note { margin-top: 14px; max-width: 460px; } .marquee-clip { width: 100%; overflow: hidden; } .marquee { display: flex; gap: 24px; width: max-content; animation: marq 60s linear infinite; } @keyframes marq { from { transform: translateX(0); } to { transform: translateX(-50%); } } .tile { width: clamp(320px, 40vw, 620px); flex-shrink: 0; } .tile__frame { position: relative; height: clamp(260px, 32vw, 470px); background: var(--sand); overflow: hidden; } .tile__frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .tile__cap { margin-top: 16px; font-family: var(--mono); font-size: 13px; line-height: 1; letter-spacing: .1em; color: var(--muted); } /* --- processo ----------------------------------------------------------- */ .s-process { padding: 20px 0 120px; } .steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; margin-top: 48px; background: var(--line-2); border: 1px solid var(--line-2); } .step { display: flex; flex-direction: column; gap: 14px; padding: 34px 28px 40px; background: var(--bone); } .step__n { font-family: var(--mono); font-size: 11px; line-height: 1; letter-spacing: .16em; color: var(--plum); } .step h3 { font-size: 22px; font-weight: 500; line-height: 1.3; letter-spacing: -.02em; } .step p { font-size: 15px; font-weight: 300; line-height: 1.65; color: var(--muted); text-wrap: pretty; } /* --- perguntas ---------------------------------------------------------- */ /* Acordeão em
nativo: abre sem JavaScript, responde ao teclado e o próprio browser trata do estado. Não há nada a manter aqui. */ .s-faq { padding: 0 0 120px; } .faq { margin-top: 48px; border-top: 1px solid var(--line); } .faq__item { border-bottom: 1px solid var(--line); } .faq__q { position: relative; display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 20px; padding: 26px 44px 26px 0; /* o espaço à direita é para o sinal de + */ cursor: pointer; list-style: none; /* tira o triângulo do */ font-size: clamp(17px, 1.5vw, 20px); font-weight: 500; line-height: 1.35; letter-spacing: -.01em; transition: color .18s ease; } .faq__q::-webkit-details-marker { display: none; } /* Safari */ .faq__q:hover { color: var(--plum); } .faq__n { padding-left: 12px; font-family: var(--mono); font-size: 11px; font-weight: 400; line-height: inherit; color: #A3A196; } /* o + é feito de dois traços; ao abrir roda para × */ .faq__q::after { content: ''; position: absolute; right: 0; top: 50%; width: 13px; height: 13px; margin-top: -7px; background: linear-gradient(currentColor 0 0) center / 13px 1px no-repeat, linear-gradient(currentColor 0 0) center / 1px 13px no-repeat; transition: transform .3s ease; } [open] > .faq__q::after { transform: rotate(45deg); } .faq__a { max-width: 640px; padding: 0 44px 30px 72px; /* 72 = 52 da coluna + 20 do intervalo */ font-size: 16px; font-weight: 300; line-height: 1.7; color: var(--muted); } /* ========================================================================== PÁGINAS INTERIORES Empreendimento, texto legal e 404. Reaproveitam tudo o que já existe — cabeçalho, rodapé, botões, formulário — e acrescentam só o que é próprio. ========================================================================== */ /* --- hero das páginas interiores ---------------------------------------- */ /* Mais baixo que o da entrada: aqui o trabalho é situar, não impressionar. */ .hero--pagina { min-height: 0; padding-top: clamp(64px, 8vh, 112px); padding-bottom: clamp(56px, 7vh, 96px); align-items: flex-end; } .hero--pagina .hero__inner { display: block; padding-top: 0; padding-bottom: 0; } .hero--pagina h1 { max-width: 15ch; font-size: clamp(38px, 5vw, 72px); line-height: 1.08; } .crumbs { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; margin-bottom: 26px; font-family: var(--mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: rgba(245, 244, 239, .62); } .crumbs a { color: rgba(245, 244, 239, .82); } .crumbs a:hover { color: #FFFFFF; } .crumbs span[aria-hidden] { color: rgba(245, 244, 239, .4); } /* linha de dados por baixo do título: estado, localidade, entrega */ .hero__meta { display: flex; flex-wrap: wrap; gap: 14px 40px; margin-top: 34px; padding-top: 26px; border-top: 1px solid rgba(245, 244, 239, .22); } .hero__meta div { min-width: 0; } .hero__meta dt { font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: #9BA394; } .hero__meta dd { margin: 8px 0 0; font-size: clamp(17px, 1.5vw, 20px); font-weight: 400; line-height: 1.2; color: var(--bone); } /* etiqueta de estado, no mesmo registo das linhas de empreendimento */ .selo { display: inline-flex; align-items: center; gap: 9px; font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; } .selo::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; } .selo--obra { color: #D9A5B4; } .selo--venda { color: #D9A5B4; } .selo--pronto { color: #B9C0AF; } /* --- corpo das páginas interiores --------------------------------------- */ .s-pagina { padding: clamp(72px, 9vw, 112px) 0; } .s-pagina + .s-pagina { padding-top: 0; } /* duas colunas: título à esquerda, conteúdo à direita — a mesma repartição que a entrada usa nos cabeçalhos de secção */ .duplo { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(32px, 6vw, 96px); align-items: start; } .duplo__titulo h2 { font-size: clamp(26px, 2.4vw, 34px); font-weight: 200; line-height: 1.2; letter-spacing: -.02em; } .duplo__texto p { font-size: 16px; font-weight: 300; line-height: 1.8; color: #4E5049; text-wrap: pretty; } .duplo__texto p + p { margin-top: 18px; } /* notas curtas por baixo de um bloco — antes eram margens soltas no HTML */ .nota-titulo { margin-top: 18px; } .nota-tabela { margin-top: 22px; } /* --- ficha técnica ------------------------------------------------------- */ .spec-list { border-top: 1px solid var(--line); } .spec { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 24px; align-items: baseline; padding: 17px 0; border-bottom: 1px solid var(--line); } .spec dt { font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted-2); } .spec dd { margin: 0; font-size: 15px; font-weight: 300; line-height: 1.6; color: var(--ink); } /* --- tabela de tipologias ------------------------------------------------ */ /* Tabela a sério: são dados tabulares e os leitores de ecrã precisam da relação entre célula e cabeçalho para os anunciar. */ .tabela-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; } .tipos { width: 100%; min-width: 560px; border-collapse: collapse; text-align: left; } .tipos th, .tipos td { padding: 16px 20px 16px 0; border-bottom: 1px solid var(--line); vertical-align: baseline; } .tipos thead th { border-bottom-color: var(--ink); font-family: var(--mono); font-size: 10px; font-weight: 400; letter-spacing: .16em; text-transform: uppercase; color: var(--muted-2); } .tipos tbody th { font-size: 19px; font-weight: 500; letter-spacing: -.01em; white-space: nowrap; } .tipos td { font-size: 15px; font-weight: 300; color: #565850; } .tipos tbody tr:hover { background: #EDEBE3; } .tipos .num { font-family: var(--mono); font-size: 14px; } .tipos .esgotado { color: var(--muted-2); } /* --- certificado energético ---------------------------------------------- */ .energia { display: inline-flex; align-items: center; gap: 14px; margin-top: 26px; padding: 14px 20px 14px 14px; border: 1px solid var(--line); } .energia__classe { display: grid; place-items: center; width: 46px; height: 46px; background: var(--olive); color: var(--bone); font-size: 21px; font-weight: 600; letter-spacing: -.02em; } .energia__txt { font-family: var(--mono); font-size: 11px; line-height: 1.6; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); } /* --- galeria ------------------------------------------------------------- */ /* Duas colunas com a primeira em destaque. As fotos são poucas e grandes; uma grelha de miniaturas iguais tornava-as todas irrelevantes. */ .gallery { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 20px; } .tile-gal { position: relative; overflow: hidden; background: var(--sand); clip-path: inset(0); } .tile-gal img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s cubic-bezier(.16, .84, .28, 1); } .tile-gal:hover img { transform: scale(1.045); } /* 6 colunas: fila 1 = 4+2, fila 2 = 2+2+2. As alturas batem certo porque o "alto" e mais estreito mas mais vertical. */ .tile-gal--grande { grid-column: span 4; aspect-ratio: 4 / 3; } .tile-gal--alto { grid-column: span 2; aspect-ratio: 2 / 3; } .tile-gal--meio { grid-column: span 2; aspect-ratio: 4 / 3; } .tile-gal--terco { grid-column: span 2; aspect-ratio: 4 / 3; } .tile-gal__cap { position: absolute; left: 20px; bottom: 16px; font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: rgba(245, 244, 239, .94); text-shadow: 0 1px 14px rgba(15, 16, 13, .6); } /* --- localização --------------------------------------------------------- */ .local { border-top: 1px solid var(--line); } .local__item { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 20px; align-items: baseline; padding: 15px 0; border-bottom: 1px solid var(--line); font-size: 15px; font-weight: 300; color: #565850; } .local__dist { font-family: var(--mono); font-size: 12px; letter-spacing: .06em; color: var(--muted-2); white-space: nowrap; } /* --- estado da obra ------------------------------------------------------ */ /* Linha do tempo vertical: cada fase é um ponto num filete contínuo. */ .obra { display: grid; gap: 0; } .phase { position: relative; display: grid; grid-template-columns: 128px minmax(0, 1fr); gap: 28px; padding: 26px 0 26px 0; border-bottom: 1px solid var(--line); } .obra .phase:first-child { border-top: 1px solid var(--line); } .phase__quando { font-family: var(--mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted-2); } .phase__quando::before { content: ''; display: inline-block; width: 7px; height: 7px; margin-right: 11px; border-radius: 50%; background: var(--line-2); vertical-align: middle; } .phase--feita .phase__quando::before { background: var(--olive); } .phase--agora .phase__quando::before { background: var(--plum); box-shadow: 0 0 0 4px rgba(122, 74, 92, .16); } .phase h3 { font-size: 17px; font-weight: 500; line-height: 1.35; letter-spacing: -.01em; } .phase p { margin-top: 7px; font-size: 15px; font-weight: 300; line-height: 1.6; color: var(--muted); } .phase--agora h3 { color: var(--plum); } /* --- foto larga dentro das páginas --------------------------------------- */ .obra__media { position: relative; aspect-ratio: 21 / 9; margin-top: clamp(40px, 5vw, 64px); background: var(--sand); overflow: hidden; clip-path: inset(0); } .obra__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } /* --- navegação entre empreendimentos ------------------------------------- */ .pager { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; margin-top: clamp(64px, 8vw, 104px); background: var(--line); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); } .pager a { display: block; padding: 30px 32px; background: var(--bone); transition: background .18s ease; } .pager a:hover { background: #EDEBE3; color: var(--ink); } .pager__dir { font-family: var(--mono); font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var(--muted-2); } .pager__nome { display: block; margin-top: 12px; font-size: clamp(19px, 1.9vw, 24px); font-weight: 500; letter-spacing: -.02em; } .pager a:last-child { text-align: right; } /* --- páginas de texto (legal, 404) --------------------------------------- */ .prose { max-width: 68ch; } .prose__head { margin-bottom: clamp(40px, 5vw, 64px); } .prose h2 { margin-top: 52px; font-size: clamp(21px, 1.8vw, 25px); font-weight: 500; line-height: 1.3; letter-spacing: -.01em; } .prose h2:first-child { margin-top: 0; } .prose h3 { margin-top: 30px; font-size: 16px; font-weight: 500; } .prose p, .prose li { font-size: 16px; font-weight: 300; line-height: 1.85; color: #4E5049; text-wrap: pretty; } .prose p { margin-top: 16px; } .prose ul { margin: 16px 0 0; padding-left: 20px; } .prose li { margin-top: 9px; } .prose a { border-bottom: 1px solid var(--line-2); } .prose a:hover { border-bottom-color: var(--plum); } .prose__data { margin-top: 44px; padding-top: 20px; border-top: 1px solid var(--line); font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted-2); } /* --- 404 ----------------------------------------------------------------- */ .erro { display: grid; place-items: center; min-height: calc(100vh - var(--header-h) - 90px); min-height: calc(100svh - var(--header-h) - 90px); padding: clamp(64px, 10vw, 140px) 0; text-align: center; } .erro__cod { font-family: var(--mono); font-size: 12px; letter-spacing: .3em; color: var(--muted-2); } .erro h1 { max-width: 18ch; margin: 24px auto 0; font-size: clamp(30px, 3.6vw, 46px); font-weight: 200; line-height: 1.2; letter-spacing: -.02em; } .erro p { max-width: 46ch; margin: 20px auto 0; font-size: 16px; font-weight: 300; line-height: 1.7; color: var(--muted); } .erro .hero__actions { justify-content: center; margin-top: 36px; } /* --- responsivo das páginas interiores ----------------------------------- */ @media (max-width: 1024px) { .duplo { grid-template-columns: minmax(0, 1fr); gap: 26px; } .gallery { gap: 14px; } .tile-gal--grande { grid-column: span 6; } .tile-gal--alto { grid-column: span 3; aspect-ratio: 3 / 4; } .tile-gal--meio { grid-column: span 3; } .tile-gal--terco { grid-column: span 3; } .obra__media { aspect-ratio: 16 / 9; } } @media (max-width: 760px) { .hero__meta { gap: 18px 32px; } .spec { grid-template-columns: minmax(0, 1fr); gap: 7px; padding: 15px 0; } .phase { grid-template-columns: minmax(0, 1fr); gap: 10px; } .pager { grid-template-columns: minmax(0, 1fr); } .pager a { padding: 24px 22px; } .pager a:last-child { text-align: left; } .tile-gal--grande, .tile-gal--alto, .tile-gal--meio, .tile-gal--terco { grid-column: span 6; aspect-ratio: 4 / 3; } .obra__media { aspect-ratio: 3 / 2; } } @media (max-width: 520px) { .energia { width: 100%; } .tipos { min-width: 460px; } } /* --- rodapé ------------------------------------------------------------- */ .site-footer { padding: 80px 0 0; background: var(--teal); color: #EDF2F1; } .footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1.2fr 1fr; gap: 56px; } .footer__brand { font-size: clamp(17px, 1.7vw, 20px); font-weight: 600; line-height: 1; letter-spacing: .16em; } .footer__blurb { max-width: 250px; margin-top: 18px; font-size: 15px; font-weight: 300; line-height: 1.7; color: #C3D6D4; } .footer__h { margin-bottom: 18px; font-size: 14px; font-weight: 500; line-height: 1; } .footer__list { display: flex; flex-direction: column; gap: 11px; font-size: 15px; font-weight: 300; line-height: 1.6; color: #C3D6D4; } .footer__list a { color: #C3D6D4; } .footer__list a:hover { color: #FFFFFF; } .footer-bar { margin-top: 64px; padding-top: 22px; padding-bottom: 26px; border-top: 1px solid rgba(245,244,239,.14); display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; } .footer-bar p { font-size: 13px; font-weight: 300; line-height: 1; color: #A6C0BE; } .footer-bar__links { display: flex; align-items: center; gap: 22px; } .footer-bar__links a { font-size: 13px; font-weight: 300; line-height: 1; color: #A6C0BE; white-space: nowrap; } .footer-bar__links a:hover { color: #FFFFFF; } .btn-top { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border: 1px solid rgba(245,244,239,.3); border-radius: 4px; font-size: 13px; color: #EDEFE7; transition: background .18s ease, color .18s ease, border-color .18s ease; } .btn-top:hover { background: var(--bone); color: var(--teal); border-color: var(--bone); } /* --- responsivo --------------------------------------------------------- */ @media (max-width: 1024px) { :root { --gutter: 28px; } .hero__inner { grid-template-columns: minmax(0, 1fr); gap: 48px; } /* sem espaço para o cartão ao lado: a foto sangra de bordo a bordo e o cartão sobe para lhe morder o rodapé, mantendo a sobreposição */ .about { display: block; } .about__media { aspect-ratio: 3 / 2; margin-left: calc(var(--gutter) * -1); margin-right: calc(var(--gutter) * -1); } .about__body { margin-top: -72px; padding: 38px 30px 34px; box-shadow: 0 24px 48px -30px rgba(23, 24, 26, .3); } .about__cap { display: none; } /* o cartão sobe e taparia a legenda */ .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px; } .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* as colunas fixas da lista deixam de caber antes do layout mobile */ @media (max-width: 900px) { /* 116px porque "Em construção" a 11px mono com .14em de espaçamento mede ~106px */ .project { grid-template-columns: 44px minmax(0, 1fr) 116px 82px 80px 18px; gap: 16px; } .project__loc { display: none; } /* logo + nav + botão deixam de caber numa linha; a nav passa a faixa deslizante e esconde-se a barra de scroll, não o conteúdo */ .header-bar { height: auto; padding-top: 14px; padding-bottom: 14px; flex-wrap: wrap; gap: 14px; } .nav { order: 3; width: 100%; gap: 20px; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; } .nav::-webkit-scrollbar { display: none; } .nav a { padding: 11px 0; } /* alvo de toque, não muda a caixa visual */ /* --- com JS: a faixa dá lugar a um painel sob a barra ------------------ */ .site-header[data-menu] .menu-toggle { display: flex; } .site-header[data-menu] .nav { display: none; flex-direction: column; align-items: stretch; gap: 0; margin-top: 2px; overflow: visible; border-top: 1px solid rgba(245,244,239,.18); } .site-header[data-menu="aberto"] .nav { display: flex; } .site-header[data-menu] .nav a { padding: 17px 2px; font-size: 13px; letter-spacing: .1em; border-bottom: 1px solid rgba(245,244,239,.12); } .site-header[data-menu] .nav a:hover { border-bottom-color: rgba(245,244,239,.12); } .site-header[data-menu] .nav a:last-child { border-bottom: 0; } } /* abaixo daqui os rótulos ("OBRAS ENTREGUES") já não cabem em 4 colunas: passa a 2×2, que continua simétrico */ @media (max-width: 780px) { .stat-bar { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 760px) { .nav { gap: 18px; } .project { grid-template-columns: 34px minmax(0, 1fr) 68px 16px; gap: 12px; } .faq__q { grid-template-columns: 34px minmax(0, 1fr); gap: 12px; padding-right: 34px; } .faq__a { padding-left: 46px; padding-right: 34px; } .project__status, .project__year { display: none; } .steps { grid-template-columns: minmax(0, 1fr); } .footer-grid { grid-template-columns: minmax(0, 1fr); } section { padding-top: 64px; padding-bottom: 64px; } } /* telemóveis estreitos: só aperta espaçamentos, a composição mantém-se */ @media (max-width: 520px) { :root { --gutter: 20px; } .header-bar { gap: 10px; } .btn--cta { padding: 12px 14px; } .nav { gap: 15px; } /* logo + botão + hambúrguer não cabem numa linha: a acção passa para o painel, onde o .nav__cta lhe toma o lugar. Nunca ficam os dois visíveis. */ .site-header[data-menu] .btn--cta { display: none; } .site-header[data-menu] .nav__cta { display: block; color: #FFFFFF; } .lead-form { padding: 24px 20px 22px; } .phone { grid-template-columns: 66px minmax(0, 1fr); } .section-head { gap: 24px; margin-bottom: 36px; } .section-head--ruled { gap: 24px; } .project { grid-template-columns: 28px minmax(0, 1fr) 56px 14px; gap: 10px; } .project__n { padding-left: 0; } .fact { grid-template-columns: 70px minmax(0, 1fr); gap: 14px; } .fact__n { font-size: 24px; } .about__body { margin-top: -52px; padding: 32px 22px 28px; } .faq__n { padding-left: 0; } .faq__q { grid-template-columns: 28px minmax(0, 1fr); gap: 10px; padding-top: 22px; padding-bottom: 22px; } .faq__a { padding-left: 38px; } .project__thumb { height: 52px; } .step { padding: 28px 22px 32px; } .marquee { gap: 14px; } .footer-bar { gap: 16px; } /* os dois links não encolhem (nowrap), por isso têm de poder passar de linha */ .footer-bar__links { width: 100%; justify-content: space-between; gap: 12px; flex-wrap: wrap; } } /* landscape de telemóvel: o hero não precisa de ecrã inteiro numa faixa baixa */ @media (max-height: 560px) and (orientation: landscape) { .hero { min-height: 0; } .hero__inner { padding-top: 44px; padding-bottom: 44px; } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .marquee { animation: none; } .menu-toggle__bar { transition: none; } .faq__q::after { transition: none; } } /* --- rede de segurança para browsers sem aspect-ratio -------------------- */ /* Safari só o suporta a partir da versão 15. Sem isto, as caixas cujo tamanho depende só da proporção colapsavam a zero e as fotos desapareciam. */ @supports not (aspect-ratio: 1 / 1) { .about__media { height: clamp(360px, 34vw, 520px); } .tile-gal { height: 300px; } .tile-gal--grande { height: 420px; } .tile-gal--alto { height: 420px; } .obra__media { height: clamp(280px, 30vw, 460px); } .tile__frame { height: clamp(230px, 26vw, 360px); } }