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; } .ed-contato .c49mod-form .form-submit i{ margin-right: 7px; } /* acoes do imovel (form/1: WhatsApp / solicitar visita / fazer proposta) - visual editorial: botao Enviar solido (acima) + estas acoes como retangulos vazados (outline), hover preenche */ .ed-contato .c49mod-whatsapp-button{ margin-top: 20px; display: flex; flex-direction: column; gap: 10px; } .ed-contato .c49mod-whatsapp-button > div:first-child{ position: relative; text-align: center; margin: 6px 0 4px; } .ed-contato .c49mod-whatsapp-button > div:first-child::before{ content: ""; position: absolute; top: 50%; left: 0; right: 0; height: 1px; background: var(--ed-fio); } .ed-contato .c49mod-whatsapp-button > div:first-child span{ position: relative; background: var(--ed-papel); padding: 0 14px; font-family: var(--ed-sans); font-size: .62rem; letter-spacing: .2em; text-transform: uppercase; color: var(--ed-tinta-2); font-weight: 600; } .ed-contato .c49mod-whatsapp-button a.btn{ display: flex; align-items: center; justify-content: center; gap: 9px; height: 52px; border-radius: 0 !important; border: 1px solid var(--ed-tinta) !important; background: transparent !important; color: var(--ed-tinta) !important; box-shadow: none !important; font-family: var(--ed-sans); font-size: .72rem !important; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; text-decoration: none; transition: background .18s ease, color .18s ease; } .ed-contato .c49mod-whatsapp-button a.btn:hover{ background: var(--ed-tinta) !important; color: var(--ed-papel) !important; } .ed-contato .c49mod-whatsapp-button a.btn .card-title{ display: inline-flex; align-items: center; gap: 8px; color: inherit !important; margin: 0; } .ed-contato .c49mod-whatsapp-button a.btn .card-title i{ color: inherit !important; font-size: 1rem; } /* 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; } } /* imovel SEM FOTO na listagem editorial: em vez do preco boiando num vazio, a coluna da foto vira um "passe-partout" de revista - painel creme, moldura fina e um esboco de fachada a traco. Segura o mesmo espaco (3/2) que uma foto teria. */ .ed-lista__foto--vazia{ aspect-ratio: 3 / 2; background: var(--ed-papel-2); } .ed-lista__foto--vazia::after{ content: ""; position: absolute; inset: 16px; border: 1px solid var(--ed-fio); background: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%20140%20100'%20fill%3D'none'%20stroke%3D'%236B655C'%20stroke-width%3D'1.3'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M22%2046%20L70%2018%20L118%2046'%2F%3E%3Cpath%20d%3D'M31%2046%20V80%20H109%20V46'%2F%3E%3Cpath%20d%3D'M31%2080%20H109'%2F%3E%3Crect%20x%3D'47'%20y%3D'56'%20width%3D'16'%20height%3D'16'%2F%3E%3Crect%20x%3D'77'%20y%3D'56'%20width%3D'16'%20height%3D'24'%2F%3E%3Cpath%20d%3D'M85%2068%20h0.5'%2F%3E%3Cpath%20d%3D'M70%2018%20v-6'%2F%3E%3C%2Fsvg%3E") center / 120px auto no-repeat; opacity: .8; } @media (max-width: 720px){ .ed-lista__foto--vazia{ aspect-ratio: 16 / 10; } } /* === IMÓVEL RESTRITO (restricted-property.php) — on-brand Editorial. Hook .c49-restricted vem do restricted-property.php (distribuído). Card papel + faixa de acento no topo + botoes retangulares versalete (magazine). === */ .c49-restricted{ padding:2.6rem 0 3.6rem; } .c49-restricted .card.c49wrap-card{ max-width:480px; margin:0 auto; background:var(--ed-papel); border:1px solid var(--ed-fio); border-radius:12px; box-shadow:0 26px 60px -30px rgba(26,24,21,.26); position:relative; overflow:hidden; } .c49-restricted .card.c49wrap-card::before{ content:""; position:absolute; top:0; left:0; right:0; height:5px; background:var(--ed-acento); } .c49-restricted .card-block{ padding:2.1rem 1.9rem 2.2rem !important; font-family:var(--ed-sans); font-size:1rem; line-height:1.55; color:var(--ed-tinta); } .c49-restricted .card-block b{ font-family:var(--ed-serif); font-weight:600; color:var(--ed-acento); } .c49-restricted .btn.c49btn{ display:inline-block; margin:.5rem .3rem 0; font-family:var(--ed-sans); font-weight:700; font-size:.78rem; letter-spacing:.06em; text-transform:uppercase; border:0; border-radius:6px; padding:.7rem 1.7rem; background:var(--ed-acento); color:var(--ed-papel) !important; transition:filter .18s ease, transform .18s ease; } .c49-restricted .btn.c49btn:hover{ filter:brightness(1.08); transform:translateY(-1px); } /* ===== DESTAQUES padrão (properties/grid & capsule) vestidos no Editorial ===== Quando o cliente usa o módulo de destaques PADRÃO na home do 64, os cards vinham default (azul, sombra, estrela). Aqui ficam on-brand: papel, fio fino, serifa no título/preço, specs em versalete. Só mira .c49mod-properties-grid/capsule — a listagem do 64 usa .ed-card (não é afetada). */ .c49mod-properties-grid .container, .c49mod-properties-capsule .container{ max-width:var(--ed-max); } .c49mod-properties-grid .c49-properties-title, .c49mod-properties-capsule .c49-properties-title{ font-family:var(--ed-sans); font-size:.8rem; font-weight:600; letter-spacing:.22em; text-transform:uppercase; color:var(--ed-tinta); display:flex; align-items:center; gap:.55em; margin:0 0 clamp(18px,2.6vw,34px); } .c49mod-properties-grid .c49-properties-title i, .c49mod-properties-capsule .c49-properties-title i{ color:var(--ed-acento); font-size:.85em; } .c49mod-properties-grid .c49-property-card, .c49mod-properties-capsule .c49-property-card{ background:var(--ed-papel) !important; border:1px solid var(--ed-fio) !important; border-radius:3px !important; box-shadow:none !important; overflow:hidden; transition:border-color .2s ease, transform .2s ease; } .c49mod-properties-grid .c49-property-card:hover, .c49mod-properties-capsule .c49-property-card:hover{ border-color:var(--ed-tinta); transform:translateY(-3px); } .c49mod-properties-grid .c49-property-photo img{ aspect-ratio:4/3; object-fit:cover; width:100%; border-radius:0 !important; } .c49mod-properties-grid .c49-property-block, .c49mod-properties-grid .card-block, .c49mod-properties-capsule .c49-property-block, .c49mod-properties-capsule .card-block{ padding:1.05rem 1.15rem 1.2rem !important; background:transparent !important; } .c49mod-properties-grid .c49-property-title, .c49mod-properties-capsule .c49-property-title{ font-family:var(--ed-serif) !important; font-weight:500 !important; font-size:1.02rem !important; color:var(--ed-tinta) !important; line-height:1.25; } .c49mod-properties-grid .c49-property-value, .c49mod-properties-grid .c49-property-count, .c49mod-properties-grid .c49-currency, .c49mod-properties-capsule .c49-property-value, .c49mod-properties-capsule .c49-property-count, .c49mod-properties-capsule .c49-currency{ font-family:var(--ed-serif) !important; color:var(--ed-acento) !important; font-weight:600 !important; } .c49mod-properties-grid .c49-property-numbers, .c49mod-properties-capsule .c49-property-numbers{ border-top:1px solid var(--ed-fio); margin-top:.7rem; padding-top:.65rem; } .c49mod-properties-grid .c49-property-number, .c49mod-properties-grid .c49-num-lbl, .c49mod-properties-capsule .c49-property-number, .c49mod-properties-capsule .c49-num-lbl{ font-family:var(--ed-sans) !important; font-size:.72rem !important; color:var(--ed-tinta-2) !important; letter-spacing:.04em; text-transform:uppercase; } .c49mod-properties-grid .c49-property-number [class^="c49icon"], .c49mod-properties-grid .c49-property-number i, .c49mod-properties-capsule .c49-property-number [class^="c49icon"], .c49mod-properties-capsule .c49-property-number i{ color:var(--ed-acento) !important; } .c49mod-properties-grid .c49-strip, .c49mod-properties-capsule .c49-strip{ background:var(--ed-tinta) !important; color:var(--ed-papel) !important; font-family:var(--ed-sans); font-size:.6rem; letter-spacing:.1em; text-transform:uppercase; border-radius:2px; } .c49mod-properties-grid .c49btn, .c49mod-properties-grid .c49btn-main, .c49mod-properties-grid .btn-secondary, .c49mod-properties-capsule .c49btn, .c49mod-properties-capsule .c49btn-main, .c49mod-properties-capsule .btn-secondary{ background:var(--ed-tinta) !important; border:0 !important; border-radius:2px !important; color:var(--ed-papel) !important; font-family:var(--ed-sans); font-size:.72rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; padding:.78rem 1.6rem !important; box-shadow:none !important; } .c49mod-properties-grid .c49btn:hover, .c49mod-properties-grid .c49btn-main:hover, .c49mod-properties-capsule .c49btn:hover, .c49mod-properties-capsule .c49btn-main:hover{ background:var(--ed-acento) !important; } .c49mod-properties-grid .carousel-control-prev, .c49mod-properties-grid .carousel-control-next{ opacity:.65; } .c49mod-properties-grid .carousel-control-prev:hover, .c49mod-properties-grid .carousel-control-next:hover{ opacity:1; }