/* ============================================================================= MODELO 64 - linha EDITORIAL Sistema de design proprio: papel creme, tinta quente, serifada de display, versalete espacado e fios finos. Assimetria de propósito. A cor da marca do cliente entra so como acento (--ed-acento). ============================================================================= */ :root{ --ed-papel: #FAF8F5; /* fundo, creme quente */ --ed-papel-2: #F2EEE8; /* alternancia de secao */ --ed-tinta: #1A1815; /* quase preto, quente */ --ed-tinta-2: #6B655C; /* texto secundario */ --ed-fio: #E3DDD3; /* filetes */ /* IMPORTANTE: este arquivo carrega CRU (via masthead), NAO passa pelo make-css, entao o placeholder $primary nunca seria substituido. Cor de acento com valor valido de fallback; o masthead injeta :root{--ed-acento:} por cima. Sem isso, var(--ed-acento) fica invalido e o hover some (fundo transparente = botao branco no branco). */ --ed-acento: #9a7b4f; --ed-serif: "Fraunces", ui-serif, Georgia, "Iowan Old Style", "Palatino Linotype", serif; --ed-sans: ui-sans-serif, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --ed-max: 1280px; } /* ---------- base ---------- */ /* fundo creme em toda a pagina do modelo 64 (o editorial.css so carrega aqui, via masthead) - o make-layout nao poe classe .ed-body no e o id muda por pagina/idioma, entao o seletor tem que ser o body cru, senao sobra branco. */ body{ background: var(--ed-papel); color: var(--ed-tinta); font-family: var(--ed-sans); -webkit-font-smoothing: antialiased; } .ed-wrap{ max-width: var(--ed-max); margin-inline: auto; padding-inline: clamp(20px, 5vw, 56px); } /* ---------- tarja superior (kicker) ---------- */ .ed-kicker{ display: flex; align-items: center; gap: 14px; margin: 0 0 clamp(28px, 4vw, 52px); font-size: .7rem; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--ed-tinta-2); } .ed-kicker__rule{ width: 56px; height: 1px; background: var(--ed-tinta); flex: 0 0 auto; } .ed-kicker__sep{ opacity: .4; } /* =============================== HERO ==================================== */ .ed-hero{ padding: clamp(28px, 5vw, 64px) 0 clamp(40px, 6vw, 88px); } .ed-hero__grid{ display: grid; grid-template-columns: 1.15fr .85fr; /* assimetrico */ gap: clamp(28px, 5vw, 72px); align-items: end; } .ed-hero__title{ font-family: var(--ed-serif); font-weight: 400; font-size: clamp(2.6rem, 7vw, 5.6rem); line-height: .96; letter-spacing: -.03em; margin: 0 0 clamp(18px, 2vw, 26px); color: var(--ed-tinta); text-wrap: balance; } .ed-hero__lede{ font-size: clamp(1rem, 1.25vw, 1.12rem); line-height: 1.65; color: var(--ed-tinta-2); max-width: 46ch; margin: 0 0 clamp(26px, 3.5vw, 40px); } /* foto vertical: retrato, nao paisagem - quebra o padrao de banner */ .ed-hero__figure{ margin: 0; } .ed-hero__figure img{ width: 100%; aspect-ratio: 3 / 4; object-fit: cover; display: block; background: var(--ed-papel-2); } .ed-hero__figure figcaption{ margin-top: 10px; font-size: .68rem; letter-spacing: .18em; text-transform: uppercase; color: var(--ed-tinta-2); } /* ---------- busca em campos sublinhados (sem cartao) ---------- */ .ed-hero__busca{ border-top: 1px solid var(--ed-tinta); padding-top: 20px; } .ed-hero__busca .form-control, .ed-hero__busca .btn.multiselect{ background: transparent !important; border: 0 !important; border-bottom: 1px solid var(--ed-fio) !important; border-radius: 0 !important; height: 44px !important; padding: 0 !important; font-family: var(--ed-sans); font-size: .95rem !important; color: var(--ed-tinta) !important; box-shadow: none !important; display: flex; align-items: center; justify-content: space-between; transition: border-color .18s ease; } .ed-hero__busca .btn.multiselect:hover, .ed-hero__busca .form-control:focus{ border-bottom-color: var(--ed-tinta) !important; } .ed-hero__busca label{ font-size: .62rem !important; letter-spacing: .2em; text-transform: uppercase; color: var(--ed-tinta-2); font-weight: 600; margin-bottom: 4px; } .ed-hero__busca fieldset{ margin-bottom: 16px; } /* pilulas de quarto viram texto sublinhavel */ .ed-hero__busca .btn.btn-secondary:not(.c49btn-main){ background: transparent !important; border: 1px solid var(--ed-fio) !important; color: var(--ed-tinta-2) !important; border-radius: 0 !important; height: 34px; min-width: 40px; font-size: .82rem; font-weight: 600; } .ed-hero__busca .btn.btn-secondary:not(.c49btn-main).active{ background: var(--ed-tinta) !important; border-color: var(--ed-tinta) !important; color: var(--ed-papel) !important; } /* CTA: retangulo solido, sem raio - assinatura editorial */ .ed-hero__busca .c49btn-main{ background: var(--ed-tinta) !important; color: var(--ed-papel) !important; border: 0 !important; border-radius: 0 !important; height: 48px; padding-inline: 30px; font-size: .72rem !important; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; transition: background .18s ease; } .ed-hero__busca .c49btn-main:hover{ background: var(--ed-acento) !important; color: var(--ed-papel) !important; } /* ========================== CABECALHO DE SECAO =========================== */ .ed-sec-head{ display: flex; align-items: baseline; gap: 18px; margin-bottom: clamp(24px, 3.5vw, 44px); } .ed-sec-title{ font-family: var(--ed-serif); font-weight: 400; font-size: clamp(1.7rem, 3.4vw, 2.9rem); letter-spacing: -.02em; line-height: 1; margin: 0; color: var(--ed-tinta); } .ed-sec-rule{ flex: 1 1 auto; height: 1px; background: var(--ed-fio); } .ed-sec-count{ font-size: .68rem; letter-spacing: .2em; text-transform: uppercase; color: var(--ed-tinta-2); white-space: nowrap; } /* ================================ BENTO ================================== */ .ed-bento{ padding: clamp(40px, 6vw, 88px) 0; } .ed-bento__grid{ display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(18px, 2.4vw, 32px); } /* ORDEM IMPORTA: a regra generica vem primeiro. Se ".ed-card" viesse depois de ".ed-card--destaque", ela venceria por ter a mesma especificidade e o destaque deixaria de ocupar 2 colunas. */ .ed-card{ grid-column: span 1; } /* o primeiro ocupa metade da largura e duas fileiras: hierarquia real */ .ed-card--destaque{ grid-column: span 2; grid-row: span 2; } .ed-card__link{ display: block; text-decoration: none; color: inherit; height: 100%; } .ed-card__media{ position: relative; overflow: hidden; background: var(--ed-papel-2); } .ed-card__media img{ width: 100%; height: 100%; object-fit: cover; display: block; aspect-ratio: 4 / 3; transition: transform .6s cubic-bezier(.22,.61,.36,1), filter .4s ease; } .ed-card--destaque .ed-card__media img{ aspect-ratio: 4 / 5; } .ed-card__link:hover .ed-card__media img{ transform: scale(1.04); } /* numeracao editorial */ .ed-card__num{ position: absolute; top: 0; left: 0; background: var(--ed-papel); color: var(--ed-tinta); font-family: var(--ed-serif); font-size: .8rem; font-weight: 600; padding: 6px 12px; letter-spacing: .06em; } .ed-card--destaque .ed-card__num{ font-size: 1rem; padding: 9px 16px; } .ed-card__body{ padding-top: 14px; } .ed-card__local{ font-size: .62rem; letter-spacing: .2em; text-transform: uppercase; color: var(--ed-tinta-2); margin: 0 0 6px; } .ed-card__title{ font-family: var(--ed-serif); font-weight: 400; font-size: clamp(1rem, 1.3vw, 1.18rem); line-height: 1.25; letter-spacing: -.01em; margin: 0 0 10px; color: var(--ed-tinta); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .ed-card--destaque .ed-card__title{ font-size: clamp(1.5rem, 2.6vw, 2.1rem); -webkit-line-clamp: 3; margin-bottom: 14px; } /* preco em serifada e corpo grande: e o dado que o olho procura */ .ed-card__preco{ font-family: var(--ed-serif); font-size: clamp(1.15rem, 1.7vw, 1.45rem); font-weight: 600; letter-spacing: -.02em; margin: 0 0 10px; color: var(--ed-tinta); } .ed-card--destaque .ed-card__preco{ font-size: clamp(1.7rem, 3vw, 2.4rem); } .ed-card__moeda{ font-size: .62em; font-weight: 500; margin-right: 3px; color: var(--ed-tinta-2); } .ed-card__preco em{ font-style: normal; font-family: var(--ed-sans); font-size: .52em; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--ed-tinta-2); margin-left: 10px; } .ed-card__specs{ list-style: none; display: flex; flex-wrap: wrap; gap: 0 14px; margin: 0; padding: 0; font-size: .76rem; color: var(--ed-tinta-2); } .ed-card__specs li + li{ padding-left: 14px; border-left: 1px solid var(--ed-fio); } /* sublinhado que cresce no hover - detalhe editorial */ .ed-card__link:hover .ed-card__title{ text-decoration: underline; text-underline-offset: .18em; text-decoration-thickness: 1px; } /* ---------- responsivo ---------- */ @media (max-width: 1023px){ .ed-hero__grid{ grid-template-columns: 1fr; gap: 34px; } .ed-hero__figure{ order: -1; } .ed-hero__figure img{ aspect-ratio: 16 / 10; } .ed-bento__grid{ grid-template-columns: repeat(2, 1fr); } .ed-card--destaque{ grid-column: span 2; grid-row: span 1; } .ed-card--destaque .ed-card__media img{ aspect-ratio: 16 / 10; } } @media (max-width: 599px){ .ed-bento__grid{ grid-template-columns: 1fr; } .ed-card--destaque{ grid-column: span 1; } .ed-sec-head{ flex-wrap: wrap; gap: 10px; } .ed-sec-rule{ display: none; } } @media (prefers-reduced-motion: reduce){ .ed-card__media img{ transition: none; } .ed-card__link:hover .ed-card__media img{ transform: none; } } /* ============================== MASTHEAD ================================= */ .ed-masthead{ border-bottom: 1px solid var(--ed-fio); background: var(--ed-papel); position: relative; z-index: 30; } .ed-masthead__bar{ display: flex; align-items: center; gap: clamp(20px, 4vw, 56px); padding-block: 18px; } .ed-masthead__marca img{ max-height: 42px; max-width: 160px; width: auto; height: auto; object-fit: contain; display: block; } .ed-masthead__nav{ display: flex; gap: clamp(18px, 2.6vw, 36px); margin-inline: auto; } .ed-masthead__nav a{ font-size: .7rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--ed-tinta); text-decoration: none; padding-block: 4px; border-bottom: 1px solid transparent; transition: border-color .18s ease; } .ed-masthead__nav a:hover{ border-bottom-color: var(--ed-tinta); } .ed-masthead__tel{ font-family: var(--ed-serif); font-size: 1.05rem; color: var(--ed-tinta); text-decoration: none; white-space: nowrap; } .ed-masthead__tel:hover{ color: var(--ed-acento); } .ed-masthead__toggle{ display: none; background: none; border: 0; cursor: pointer; width: 34px; height: 34px; padding: 0; flex-direction: column; justify-content: center; gap: 6px; } .ed-masthead__toggle span{ display: block; height: 1px; background: var(--ed-tinta); } @media (max-width: 899px){ .ed-masthead__toggle{ display: flex; } .ed-masthead__nav{ display: none; order: 3; flex-basis: 100%; flex-direction: column; gap: 14px; padding-block: 18px 6px; margin-inline: 0; border-top: 1px solid var(--ed-fio); margin-top: 14px; } .ed-masthead.is-aberto .ed-masthead__nav{ display: flex; } .ed-masthead__bar{ flex-wrap: wrap; } .ed-masthead__tel{ margin-left: auto; font-size: .95rem; } } /* =============================== RODAPE ================================== */ .ed-rodape{ border-top: 1px solid var(--ed-tinta); margin-top: clamp(48px, 7vw, 96px); padding-top: clamp(36px, 5vw, 64px); padding-bottom: 28px; background: var(--ed-papel); } /* mata o espaco branco depois do rodape: o c49 aplica uma margin-bottom default de modulo (1.9rem) que as rows padrao removem com .c49-mod-mb-0; as .ed-row nao tem. Zera na coluna do footer e no proprio rodape (ultimo elemento da pagina). */ #c49footer .ed-row, #c49footer .ed-row > div, #c49footer [id^="c49mod-"], .ed-rodape{ margin-bottom: 0 !important; } .ed-rodape__grid{ display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: clamp(24px, 4vw, 56px); } .ed-rodape__col--marca img{ max-height: 40px; max-width: 150px; width: auto; height: auto; } .ed-rodape__end{ margin: 14px 0 6px; font-size: .84rem; line-height: 1.6; color: var(--ed-tinta-2); max-width: 30ch; } .ed-rodape__creci{ margin: 0; font-size: .66rem; letter-spacing: .18em; text-transform: uppercase; color: var(--ed-tinta-2); } .ed-rodape__tit{ font-size: .66rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--ed-tinta-2); margin: 0 0 14px; padding-bottom: 10px; border-bottom: 1px solid var(--ed-fio); } .ed-rodape__lista{ list-style: none; margin: 0; padding: 0; } .ed-rodape__lista li + li{ margin-top: 9px; } .ed-rodape__lista a{ font-size: .88rem; color: var(--ed-tinta); text-decoration: none; display: flex; justify-content: space-between; gap: 10px; transition: color .16s ease; } .ed-rodape__lista a:hover{ color: var(--ed-acento); } .ed-rodape__lista a span{ color: var(--ed-tinta-2); font-size: .74rem; } .ed-rodape__base{ display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; margin-top: clamp(30px, 4vw, 52px); padding-top: 18px; border-top: 1px solid var(--ed-fio); } .ed-rodape__base p{ margin: 0; font-size: .74rem; color: var(--ed-tinta-2); } .ed-rodape__base a{ color: var(--ed-tinta-2); text-decoration: none; } .ed-rodape__base a:hover{ color: var(--ed-tinta); } @media (max-width: 899px){ .ed-rodape__grid{ grid-template-columns: 1fr 1fr; } } @media (max-width: 559px){ .ed-rodape__grid{ grid-template-columns: 1fr; } } /* ========================= INDICE DE BAIRROS ============================= */ .ed-bairros{ padding: clamp(40px, 6vw, 88px) 0 clamp(24px, 3.5vw, 48px); border-top: 1px solid var(--ed-fio); } .ed-indice{ list-style: none; margin: 0; padding: 0; counter-reset: none; } .ed-indice__item{ border-top: 1px solid var(--ed-fio); } .ed-indice__item:last-child{ border-bottom: 1px solid var(--ed-fio); } .ed-indice__item a{ display: grid; grid-template-columns: 56px 1fr auto 64px; align-items: baseline; gap: 18px; padding: clamp(16px, 2vw, 24px) 4px; text-decoration: none; color: inherit; transition: padding-left .25s cubic-bezier(.22,.61,.36,1), background-color .25s ease; } .ed-indice__item a:hover{ padding-left: 16px; /* o item "avanca" - gesto editorial */ background: var(--ed-papel-2); } .ed-indice__num{ font-family: var(--ed-serif); font-size: .84rem; color: var(--ed-tinta-2); letter-spacing: .06em; } .ed-indice__nome{ font-family: var(--ed-serif); font-weight: 400; font-size: clamp(1.3rem, 2.6vw, 2.05rem); line-height: 1.1; letter-spacing: -.02em; color: var(--ed-tinta); } .ed-indice__item a:hover .ed-indice__nome{ text-decoration: underline; text-underline-offset: .14em; text-decoration-thickness: 1px; } .ed-indice__cidade{ font-size: .66rem; letter-spacing: .2em; text-transform: uppercase; color: var(--ed-tinta-2); white-space: nowrap; } .ed-indice__n{ font-family: var(--ed-serif); font-size: 1.1rem; color: var(--ed-tinta-2); text-align: right; } @media (max-width: 599px){ .ed-indice__item a{ grid-template-columns: 36px 1fr auto; gap: 12px; row-gap: 2px; } .ed-indice__cidade{ grid-column: 2; } .ed-indice__n{ grid-row: 1; grid-column: 3; } /* busca do hero: empilhar os campos fica mais limpo que espremer 2 colunas */ .ed-hero__busca [class*="col-"]{ flex: 0 0 100% !important; max-width: 100% !important; } } /* ======================= PAGINA DO IMOVEL (materia) ====================== */ .ed-imovel{ padding: clamp(24px, 4vw, 48px) 0 clamp(40px, 6vw, 80px); } /* ---------- abertura ---------- */ .ed-imovel__abertura{ display: grid; grid-template-columns: 1fr 1.05fr; /* assimetrico */ gap: clamp(28px, 5vw, 64px); align-items: start; margin-bottom: clamp(40px, 6vw, 80px); } .ed-imovel__titulo{ font-family: var(--ed-serif); font-weight: 400; font-size: clamp(2rem, 4.6vw, 3.6rem); line-height: 1.02; letter-spacing: -.03em; margin: 0 0 clamp(20px, 3vw, 32px); color: var(--ed-tinta); text-wrap: balance; } .ed-imovel__precos{ display: flex; flex-wrap: wrap; gap: 10px 36px; padding-bottom: clamp(20px, 3vw, 30px); border-bottom: 1px solid var(--ed-tinta); } .ed-imovel__preco{ font-family: var(--ed-serif); font-weight: 600; font-size: clamp(1.9rem, 4vw, 3rem); letter-spacing: -.03em; line-height: 1; margin: 0; color: var(--ed-tinta); } .ed-imovel__preco--sec{ font-size: clamp(1.3rem, 2.4vw, 1.9rem); color: var(--ed-tinta-2); } .ed-imovel__moeda{ font-size: .52em; font-weight: 500; color: var(--ed-tinta-2); margin-right: 4px; } .ed-imovel__preco em{ display: block; font-style: normal; font-family: var(--ed-sans); font-size: .62rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--ed-tinta-2); margin-top: 8px; } /* ficha tecnica: quadro tipografico, nao chips com icone */ .ed-ficha{ display: grid; grid-template-columns: repeat(auto-fit, minmax(88px, 1fr)); gap: 0; margin: 0; padding: 0; } .ed-ficha__item{ padding: 18px 14px 16px 0; border-bottom: 1px solid var(--ed-fio); } .ed-ficha__item dt{ font-size: .6rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--ed-tinta-2); margin-bottom: 7px; } .ed-ficha__item dd{ font-family: var(--ed-serif); font-size: 1.5rem; font-weight: 400; letter-spacing: -.02em; margin: 0; color: var(--ed-tinta); } .ed-imovel__capa img{ width: 100%; aspect-ratio: 4 / 5; object-fit: cover; display: block; background: var(--ed-papel-2); } /* ---------- texto com olho ---------- */ .ed-imovel__texto{ display: grid; grid-template-columns: 1fr 1.2fr; gap: clamp(24px, 5vw, 64px); padding-block: clamp(30px, 5vw, 60px); border-top: 1px solid var(--ed-fio); } .ed-imovel__olho{ font-family: var(--ed-serif); font-weight: 400; font-size: clamp(1.25rem, 2.2vw, 1.75rem); line-height: 1.3; letter-spacing: -.02em; color: var(--ed-tinta); margin: 0; padding-left: 18px; border-left: 2px solid var(--ed-tinta); } .ed-imovel__corpo{ font-size: 1rem; line-height: 1.75; color: var(--ed-tinta-2); max-width: 62ch; } /* ---------- ensaio fotografico ---------- */ .ed-ensaio{ display: grid; grid-template-columns: repeat(6, 1fr); gap: clamp(14px, 2vw, 26px); margin-bottom: clamp(40px, 6vw, 76px); } .ed-ensaio__item{ margin: 0; grid-column: span 3; } .ed-ensaio__item.is-lg{ grid-column: span 6; } /* largura total */ .ed-ensaio__item.is-md{ grid-column: span 3; } .ed-ensaio__item.is-sm{ grid-column: span 2; } .ed-ensaio__item img{ width: 100%; object-fit: cover; display: block; background: var(--ed-papel-2); aspect-ratio: 3 / 2; } .ed-ensaio__item.is-lg img{ aspect-ratio: 21 / 9; } .ed-ensaio__item.is-sm img{ aspect-ratio: 4 / 5; } .ed-ensaio__item figcaption{ display: flex; gap: 10px; align-items: baseline; margin-top: 9px; font-size: .66rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ed-tinta-2); } .ed-ensaio__num{ font-family: var(--ed-serif); letter-spacing: .06em; } /* ---------- caracteristicas ---------- */ .ed-caracs{ list-style: none; margin: 0; padding: 0; columns: 3; column-gap: clamp(24px, 4vw, 56px); } .ed-caracs li{ break-inside: avoid; padding: 11px 0; border-bottom: 1px solid var(--ed-fio); font-size: .92rem; color: var(--ed-tinta); } @media (max-width: 899px){ .ed-imovel__abertura, .ed-imovel__texto{ grid-template-columns: 1fr; } .ed-imovel__capa{ order: -1; } .ed-imovel__capa img{ aspect-ratio: 16 / 10; } .ed-caracs{ columns: 2; } .ed-ensaio__item.is-sm{ grid-column: span 3; } } @media (max-width: 559px){ .ed-caracs{ columns: 1; } .ed-ensaio{ grid-template-columns: 1fr; } .ed-ensaio__item, .ed-ensaio__item.is-lg, .ed-ensaio__item.is-md, .ed-ensaio__item.is-sm{ grid-column: span 1; } .ed-ensaio__item img, .ed-ensaio__item.is-lg img, .ed-ensaio__item.is-sm img{ aspect-ratio: 4 / 3; } } /* ====================== LISTAGEM (indice de materias) ==================== */ .ed-listagem{ padding: clamp(28px, 4vw, 56px) 0 clamp(40px, 6vw, 80px); } .ed-lista{ list-style: none; margin: 0; padding: 0; } .ed-lista__item{ border-top: 1px solid var(--ed-fio); } .ed-lista__item:last-child{ border-bottom: 1px solid var(--ed-fio); } .ed-lista__link{ display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(20px, 4vw, 52px); align-items: center; padding: clamp(22px, 3vw, 38px) 0; text-decoration: none; color: inherit; } /* ALTERNA o lado da foto - e o que cria o ritmo de revista */ .ed-lista__item:nth-child(even) .ed-lista__foto{ order: 2; } .ed-lista__foto{ position: relative; margin: 0; overflow: hidden; background: var(--ed-papel-2); } .ed-lista__foto img{ width: 100%; aspect-ratio: 3 / 2; object-fit: cover; display: block; transition: transform .6s cubic-bezier(.22,.61,.36,1); } .ed-lista__link:hover .ed-lista__foto img{ transform: scale(1.04); } .ed-lista__num{ position: absolute; top: 0; left: 0; background: var(--ed-papel); color: var(--ed-tinta); font-family: var(--ed-serif); font-size: .82rem; padding: 6px 12px; letter-spacing: .06em; } .ed-lista__local{ display: flex; gap: 14px; align-items: baseline; font-size: .64rem; letter-spacing: .2em; text-transform: uppercase; color: var(--ed-tinta-2); margin: 0 0 10px; } .ed-lista__local span{ opacity: .7; } .ed-lista__titulo{ font-family: var(--ed-serif); font-weight: 400; font-size: clamp(1.35rem, 2.6vw, 2.1rem); line-height: 1.12; letter-spacing: -.025em; margin: 0 0 14px; color: var(--ed-tinta); } .ed-lista__link:hover .ed-lista__titulo{ text-decoration: underline; text-underline-offset: .14em; text-decoration-thickness: 1px; } .ed-lista__preco{ font-family: var(--ed-serif); font-weight: 600; font-size: clamp(1.4rem, 2.4vw, 1.9rem); letter-spacing: -.025em; margin: 0 0 14px; color: var(--ed-tinta); } .ed-lista__moeda{ font-size: .58em; font-weight: 500; color: var(--ed-tinta-2); margin-right: 4px; } .ed-lista__preco em{ font-style: normal; font-family: var(--ed-sans); font-size: .38em; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--ed-tinta-2); margin-left: 12px; } .ed-lista__consulta{ font-family: var(--ed-sans); font-size: .8rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--ed-tinta-2); } .ed-lista__specs{ list-style: none; display: flex; flex-wrap: wrap; gap: 0 14px; margin: 0; padding: 0; font-size: .82rem; color: var(--ed-tinta-2); } .ed-lista__specs li + li{ padding-left: 14px; border-left: 1px solid var(--ed-fio); } .ed-vazio{ padding: 40px 0; color: var(--ed-tinta-2); font-size: 1rem; } .ed-vazio a{ color: var(--ed-tinta); } /* ---------- paginacao ---------- */ .ed-paginacao{ display: flex; align-items: center; justify-content: center; gap: clamp(20px, 4vw, 48px); margin-top: clamp(32px, 4vw, 56px); padding-top: 24px; border-top: 1px solid var(--ed-fio); } .ed-paginacao__nav{ font-size: .68rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--ed-tinta); text-decoration: none; padding-bottom: 3px; border-bottom: 1px solid var(--ed-tinta); } .ed-paginacao__nav.is-off{ color: var(--ed-fio); border-bottom-color: transparent; } .ed-paginacao__conta{ font-family: var(--ed-serif); font-size: 1.1rem; color: var(--ed-tinta-2); } .ed-paginacao__conta i{ font-style: normal; opacity: .45; margin-inline: 4px; } @media (max-width: 767px){ .ed-lista__link{ grid-template-columns: 1fr; gap: 16px; } .ed-lista__item:nth-child(even) .ed-lista__foto{ order: 0; } /* no celular, foto sempre em cima */ .ed-lista__foto img{ aspect-ratio: 16 / 10; } } /* ----------------------------------------------------------------------------- * Ponte com o sistema de modulos (make-layout) * ----------------------------------------------------------------------------- * Quando as paginas sao geradas pelo make-layout, cada modulo vem embrulhado * num wrapper Bootstrap (
com margem negativa -15px + col). * Sem um .container que absorva a margem, isso empurra as secoes full-width 15px * pra fora e cria scroll horizontal. As rows editoriais recebem a classe .ed-row * (ver layout.php) e aqui neutralizamos o wrapper - as secoes ed- ja tem seu * proprio .ed-wrap pra conter o conteudo. Escopado em .ed-row pra NAO afetar as * paginas de servico (servicos/contato/...) que usam o grid Bootstrap de verdade. */ .ed-row, .ed-row > div, .ed-row .row, .ed-row .row > div{ margin: 0; padding: 0; width: 100%; max-width: none; } .ed-row .row{ display: block; } /* ===================== CONTATO NA PAGINA DO IMOVEL ======================= */ /* form/2 (lead) e map/basic (localizacao) reusados dentro do .ed-contato * (ver modules/editorial/imovel). Reaproveita o tratamento de input da busca * do hero: fio fino, sem raio, tinta. */ .ed-contato{ padding: clamp(48px,7vw,96px) 0; border-top: 1px solid var(--ed-fio); } .ed-contato__grid{ margin-top: 32px; } .ed-contato__grid--mapa{ display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px,5vw,72px); align-items: start; } .ed-contato__form{ max-width: 560px; } /* centraliza o form SO quando ele esta sozinho (sem corretor e sem mapa) */ .ed-contato__grid:not(.ed-contato__grid--mapa):not(.ed-contato__grid--corretor) .ed-contato__form{ margin: 0 auto; } .ed-contato__subtit{ font-family: var(--ed-sans); font-size: .62rem; letter-spacing: .2em; text-transform: uppercase; color: var(--ed-tinta-2); font-weight: 600; margin: 0 0 14px; } /* inputs do form reusado */ .ed-contato .c49mod-form .row{ margin: 0 !important; } .ed-contato .c49mod-form .form-control{ background: transparent !important; border: 0 !important; border-bottom: 1px solid var(--ed-fio) !important; border-radius: 0 !important; padding: 0 !important; height: 46px !important; font-family: var(--ed-sans); font-size: .95rem !important; color: var(--ed-tinta) !important; box-shadow: none !important; transition: border-color .18s ease; } .ed-contato .c49mod-form textarea.form-control{ height: auto !important; padding: 10px 0 !important; resize: vertical; } .ed-contato .c49mod-form .form-control:focus{ border-bottom-color: var(--ed-tinta) !important; } .ed-contato .c49mod-form .form-control::placeholder{ color: var(--ed-tinta-2); opacity: .85; } .ed-contato .c49mod-form fieldset.form-group{ margin-bottom: 20px; } /* botao enviar: retangulo solido, assinatura editorial */ .ed-contato .c49mod-form .form-submit{ background: var(--ed-tinta) !important; color: var(--ed-papel) !important; border: 0 !important; border-radius: 0 !important; height: 52px; display: flex; align-items: center; justify-content: center; font-size: .72rem !important; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; cursor: pointer; transition: background .18s ease; margin-top: 8px; } .ed-contato .c49mod-form .form-submit:hover{ background: var(--ed-acento) !important; } /* mapa contido, moldura fina */ .ed-contato__mapa .c49mod-map-basic, .ed-contato__mapa #mapid{ min-height: 380px; height: 100%; border: 1px solid var(--ed-fio); } @media (max-width: 800px){ .ed-contato__grid--mapa{ grid-template-columns: 1fr; } .ed-contato__mapa{ margin-top: 40px; } .ed-contato__mapa #mapid{ min-height: 300px; } } /* corretor responsavel: REUSA o modulo broker-profile/basic (89) - aqui so o restyling do markup .broker-* pro visual editorial (ver modules/editorial/imovel). */ /* corretor (sidebar estreita) + form (coluna definida), par centralizado na secao - sem o vao vazio enorme; o form preenche a coluna em vez de ficar fino no meio */ .ed-contato__grid--corretor{ display: grid; grid-template-columns: 230px minmax(0, 520px); gap: clamp(40px,5vw,80px); align-items: start; justify-content: center; } .ed-contato__grid--corretor .ed-contato__form{ max-width: none; margin: 0; } .ed-corretor__rotulo{ font-size: .62rem; letter-spacing: .2em; text-transform: uppercase; color: var(--ed-tinta-2); font-weight: 600; margin: 0 0 14px; } .ed-corretor .media{ display: block; } .ed-corretor .broker-photo{ width: 120px; height: 120px; border-radius: 50%; background-size: cover; background-position: center; border: 1px solid var(--ed-fio); margin: 0 0 18px !important; } /* nome -> CRECI -> contatos (a ordem do DOM do modulo poe CRECI antes do nome) */ .ed-corretor .media-body{ display: flex; flex-direction: column; } .ed-corretor .broker-name{ order: 1; font-family: var(--ed-serif); font-weight: 400; font-size: 1.4rem; color: var(--ed-tinta); margin: 0 0 6px; line-height: 1.15; } .ed-corretor .broker-info-creci{ order: 2; display: block; font-size: .78rem; letter-spacing: .04em; color: var(--ed-tinta-2); margin: 0 0 12px; } .ed-corretor .broker-info:not(.broker-info-creci){ order: 3; display: block; font-size: .92rem; margin: 0 0 7px; } .ed-corretor .broker-info a{ color: var(--ed-tinta); text-decoration: none; border-bottom: 1px solid var(--ed-fio); transition: border-color .18s ease; } .ed-corretor .broker-info a:hover{ border-bottom-color: var(--ed-tinta); } .ed-corretor .broker-info i{ color: var(--ed-tinta-2); margin-right: 6px; } .ed-corretor .broker-social{ order: 4; display: inline-block; margin: 6px 12px 0 0; color: var(--ed-tinta); } @media (max-width: 800px){ .ed-contato__grid--corretor{ grid-template-columns: 1fr; gap: 36px; } } /* ===================== PAGINAS INTERNAS (editorial) ===================== * quem-somos / contato / servicos / dicionario / ... usam o breadcrumb-basic * + .c49wrap-card (header azul + corpo). Essas classes so aparecem nas paginas * internas do modelo 64 (as principais usam modulos ed-), entao da pra estilizar * global aqui. Objetivo: mesma linha editorial (sem caixa azul/sombra, serifada, * fio fino, tipografia de leitura). */ /* respiro vertical do conteudo interno */ #c49main > .c49row .container{ padding-top: clamp(28px,4vw,56px); padding-bottom: clamp(40px,6vw,80px); } /* breadcrumb: fio fino + versalete, sem barra cinza */ .c49mod-breadcrumb-basic{ background: transparent !important; border: 0 !important; box-shadow: none !important; border-radius: 0 !important; margin: 0 0 clamp(28px,4vw,52px) !important; padding: 0 0 12px !important; border-bottom: 1px solid var(--ed-fio) !important; } /* nav interno so RESETA o Bootstrap (sem borda/margem/padding proprios, senao dobra o fio e cria um vao vazio que parece titulo faltando) */ .c49mod-breadcrumb-basic .breadcrumb{ background: transparent !important; border: 0 !important; box-shadow: none !important; border-radius: 0 !important; margin: 0 !important; padding: 0 !important; } .c49mod-breadcrumb-basic, .c49mod-breadcrumb-basic *{ font-size: .66rem !important; letter-spacing: .18em; text-transform: uppercase; color: var(--ed-tinta-2) !important; font-weight: 600; } .c49mod-breadcrumb-basic a{ text-decoration: none !important; } .c49mod-breadcrumb-basic a:hover{ color: var(--ed-tinta) !important; } /* card de conteudo: flat, sem caixa/sombra/raio */ .card.c49wrap-card, .c49wrap-card{ background: transparent !important; border: 0 !important; box-shadow: none !important; border-radius: 0 !important; overflow: visible !important; } /* header azul -> retranca serifada com fio */ .c49wrap-card .card-header{ background: transparent !important; color: var(--ed-tinta) !important; border: 0 !important; border-bottom: 1px solid var(--ed-tinta) !important; border-radius: 0 !important; padding: 0 0 16px !important; margin-bottom: clamp(24px,3.2vw,40px) !important; } .c49wrap-card .card-header *, .c49wrap-card .c49-card-title{ font-family: var(--ed-serif) !important; font-weight: 400 !important; font-size: clamp(1.5rem,3.2vw,2.4rem) !important; line-height: 1.1 !important; letter-spacing: -.02em !important; color: var(--ed-tinta) !important; text-transform: none !important; margin: 0 !important; } /* corpo: tipografia de leitura editorial */ .c49wrap-card .card-block, .c49wrap-card .card-body{ padding: 0 !important; background: transparent !important; } .c49wrap-card .card-block h1, .c49wrap-card .card-block h2, .c49wrap-card .card-block h3, .c49wrap-card .card-body h1, .c49wrap-card .card-body h2, .c49wrap-card .card-body h3{ font-family: var(--ed-serif); font-weight: 400; color: var(--ed-tinta); letter-spacing: -.015em; line-height: 1.15; margin: 0 0 .5em; } .c49wrap-card .card-block p, .c49wrap-card .card-body p, .c49wrap-card .card-block li, .c49wrap-card .card-body li{ font-size: 1.02rem !important; line-height: 1.75 !important; color: var(--ed-tinta-2) !important; margin: 0 0 1.15em; max-width: 74ch; } .c49wrap-card .card-block a, .c49wrap-card .card-body a{ color: var(--ed-tinta); text-decoration: underline; text-underline-offset: 3px; } .c49wrap-card .card-block strong, .c49wrap-card .card-body strong{ color: var(--ed-tinta); } /* esconde os icones decorativos nos headers das paginas internas (viravam [] no editorial) */ .c49wrap-card .card-header i, .c49wrap-card .card-header [class^="c49icon"], .c49wrap-card .card-header [class*=" c49icon"], .c49wrap-card .card-header [class^="fa-"], .c49wrap-card .card-header [class^="fa "], .c49wrap-card .card-header .fa{ display: none !important; } /* barra de busca/filtros no topo da listagem (reusa .ed-hero__busca) */ .ed-listagem__busca{ margin: 0 0 clamp(28px,4vw,52px); border-top: 1px solid var(--ed-fio); padding-top: clamp(20px,3vw,32px); } /* ===== situacao 2=Vendido / 3=Locado: tratamento de revista ===== carimbo rotacionado sobre a foto + preco riscado com selo em italico. */ .ed-carimbo{ position: absolute; top: 16px; right: -6px; z-index: 2; font-family: var(--ed-sans); font-size: .64rem; font-weight: 700; letter-spacing: .3em; text-transform: uppercase; text-indent: .3em; color: var(--ed-papel); background: var(--ed-tinta); padding: .55em 1.1em; transform: rotate(-4deg); box-shadow: 0 8px 20px rgba(26,24,21,.3); } .ed-preco-off{ text-decoration: line-through; text-decoration-thickness: 2px; text-decoration-color: var(--ed-acento); opacity: .55; } .ed-selo-txt{ font-family: var(--ed-serif); font-style: italic; font-weight: 400; color: var(--ed-acento); margin-left: .35em; letter-spacing: 0; text-transform: none; } /* botao Buscar (hero + listagem): icone+texto centralizados vertical/horizontal (o .btn-block tinha altura 48px mas conteudo colava no topo -> desalinhado) */ .ed-hero__busca .btn, .ed-hero__busca .c49btn-main, .ed-listagem__busca .btn, .ed-listagem__busca .c49btn-main{ display: flex !important; align-items: center !important; justify-content: center !important; gap: .5em; line-height: 1 !important; } /* ===== depoimentos: pull-quote de revista ===== */ .ed-depoimentos{ padding: clamp(16px,2.4vw,36px) 0 0; } .ed-pullquote{ margin: 0; } .ed-pullquote::before{ content: "\201C"; display: block; font-family: var(--ed-serif); font-size: clamp(4rem,8vw,7rem); line-height: .6; color: var(--ed-acento); margin-bottom: .15em; } .ed-pullquote blockquote{ margin: 0; border: 0; padding: 0; } .ed-pullquote p{ font-family: var(--ed-serif); font-style: italic; font-weight: 400; font-size: clamp(1.35rem,2.6vw,2rem); line-height: 1.35; letter-spacing: -.01em; color: var(--ed-tinta); max-width: 52ch; margin: 0; } .ed-pullquote figcaption, .ed-depoimento figcaption{ margin-top: 1em; font-size: .68rem; letter-spacing: .2em; text-transform: uppercase; color: var(--ed-tinta-2); font-weight: 600; } .ed-depoimentos__mais{ display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px,4vw,56px); margin-top: clamp(28px,4vw,48px); border-top: 1px solid var(--ed-fio); padding-top: clamp(24px,3vw,40px); } .ed-depoimento{ margin: 0; } .ed-depoimento blockquote{ margin: 0; border: 0; padding: 0; } .ed-depoimento p{ font-family: var(--ed-sans); font-size: .98rem; line-height: 1.7; color: var(--ed-tinta-2); margin: 0; } /* ===== chamadas: classificados CTA (anuncie / nao encontrou) ===== */ .ed-chamadas{ padding: clamp(28px,4vw,52px) 0 clamp(32px,4.5vw,60px); } .ed-chamadas__grid{ display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px,4vw,56px); } .ed-chamada{ border-top: 2px solid var(--ed-tinta); padding-top: clamp(18px,2.4vw,28px); } .ed-chamada__kicker{ font-size: .66rem; letter-spacing: .22em; text-transform: uppercase; color: var(--ed-tinta-2); font-weight: 600; margin: 0 0 .8rem; } .ed-chamada__titulo{ font-family: var(--ed-serif); font-weight: 400; font-size: clamp(1.6rem,3vw,2.4rem); line-height: 1.05; letter-spacing: -.02em; color: var(--ed-tinta); margin: 0 0 .7rem; } .ed-chamada__texto{ color: var(--ed-tinta-2); line-height: 1.65; max-width: 40ch; margin: 0 0 1.2rem; } .ed-chamada__link{ display: inline-block; font-size: .72rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--ed-tinta); text-decoration: none; border-bottom: 1px solid var(--ed-tinta); padding-bottom: 4px; transition: color .15s ease, border-color .15s ease; } .ed-chamada__link:hover{ color: var(--ed-acento); border-bottom-color: var(--ed-acento); } @media (max-width: 820px){ .ed-chamadas__grid, .ed-depoimentos__mais{ grid-template-columns: 1fr; } }