/* ============================================================================= TEMA "JOYFUL" (modelo 69) — camada fofa/cartoon POR CIMA da linha editorial. Carrega via masthead quando $modules[204]->settings->tema = "joyful". Linguagem visual: papel creme, tinta marrom quente, contorno grosso, sombra deslocada (offset), pilulas, polaroid com fita, ceu com nuvens flutuando e sol — a mesma do Album da Familia (Baloo 2 + Nunito). NAO passa pelo make-css: carrega CRU. Editar = FTP + F5. O acento (--ed-acento) continua vindo do masthead (colors.php/web_colors): este arquivo NAO o define, so consome. ============================================================================= */ @import url('https://fonts.googleapis.com/css2?family=Baloo+2:wght@500;600;700;800&family=Nunito:wght@600;700;800&display=swap'); :root{ /* re-tokenizacao do design system editorial */ --ed-papel: #FFF6E9; /* creme do album */ --ed-papel-2: #FBECD6; /* creme mais fundo (secoes alternadas) */ --ed-tinta: #3B2B20; /* marrom-tinta */ --ed-tinta-2: #7A6552; /* texto secundario */ --ed-fio: #EBDCC4; /* filetes */ --ed-serif: 'Baloo 2', 'Comic Sans MS', cursive; /* display fofinho */ --ed-sans: 'Nunito', 'Segoe UI', Arial, sans-serif; /* tokens proprios do tema */ --lar-ceu: #AEE3F5; --lar-ceu-2: #D8F0FA; --lar-sol: #FFD93D; --lar-verde: #9AD36A; --lar-rosa: #FFB3C6; --lar-azul: #5FB8E0; --lar-sombra: rgba(59,43,32,.45); --lar-fita: rgba(255,217,61,.85); } /* peso: o editorial usa serifada weight 400; a Baloo precisa de corpo */ body{ font-weight: 600; } /* cinto de seguranca: polaroids girados + fitas podem cuspir 1-2px lateral em certas larguras. `clip` corta a rolagem horizontal SEM virar scroll-container (diferente de `hidden`, que no propaga pro viewport e ainda deixa rolar). overflow-y fica visivel (rolagem vertical normal). Nenhuma secao usa scroll-x. */ html{ overflow-x: clip; } /* row do header (#c49row-1-2) sem a ponte .ed-row: as margens -15px do grid Bootstrap vazavam ~6px de rolagem horizontal (a coluna e class="" sem padding que as absorva). Some com o gutter so no header — modulos ed sao full-width. */ #c49header .row{ margin-left: 0; margin-right: 0; } b, strong{ font-weight: 800; } /* ============================== MASTHEAD (ceu) ============================ */ .ed-masthead{ background: linear-gradient(180deg, var(--lar-ceu), var(--lar-ceu-2)); border-bottom: 4px solid var(--ed-tinta); } /* camada decorativa: clipa as nuvens SEM overflow:hidden no masthead (senao corta dropdowns do menu e os badges sociais que vazam a borda) */ .ed-tema-ceu{ position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; } .ed-masthead .ed-wrap{ position: relative; z-index: 2; } .ed-tema-nuvem{ position: absolute; display: block; width: 84px; height: 26px; border-radius: 40px; background: #fff; border: 3px solid var(--ed-tinta); opacity: .92; animation: larFlutua 16s ease-in-out infinite; } .ed-tema-nuvem::before{ content: ''; position: absolute; top: -17px; left: 13px; width: 33px; height: 33px; border-radius: 50%; background: #fff; border: 3px solid var(--ed-tinta); border-bottom-color: transparent; } .ed-tema-nv1{ top: 12px; left: 6%; } .ed-tema-nv2{ top: 40px; left: 40%; animation-delay: -8s; } .ed-tema-nv3{ top: 18px; left: 72%; animation-delay: -4s; transform: scale(.8); } @keyframes larFlutua{ 0%,100%{ transform: translateX(0); } 50%{ transform: translateX(24px); } } .ed-tema-nv3{ animation-name: larFlutua3; } @keyframes larFlutua3{ 0%,100%{ transform: translateX(0) scale(.8); } 50%{ transform: translateX(-20px) scale(.8); } } .ed-tema-sol{ position: absolute; top: 10px; right: 24px; width: 54px; height: 54px; border-radius: 50%; background: var(--lar-sol); border: 4px solid var(--ed-tinta); box-shadow: 0 0 0 8px rgba(255,217,61,.35); animation: larSol 5s ease-in-out infinite; } @keyframes larSol{ 0%,100%{ box-shadow: 0 0 0 8px rgba(255,217,61,.35); } 50%{ box-shadow: 0 0 0 14px rgba(255,217,61,.18); } } /* logo num cartaozinho branco — GRANDE (pedido dela: +100%, pode alargar a barra) */ .ed-masthead__marca{ background: #fff; border: 3px solid var(--ed-tinta); border-radius: 16px; padding: 8px 16px; box-shadow: 3px 3px 0 var(--lar-sombra); transition: transform .12s ease; } .ed-masthead__marca img{ max-height: 84px !important; max-width: 300px !important; width: auto; height: auto; } .ed-masthead__marca:hover{ transform: translate(-1px,-1px) rotate(-1deg); } /* menu em chips */ .ed-masthead__nav a, .ed-masthead__nav .ed-nav-top{ background: #fff; border: 2px solid var(--ed-tinta) !important; border-radius: 30px; padding: 7px 14px; box-shadow: 2px 2px 0 var(--lar-sombra); font-family: var(--ed-sans); font-size: .74rem; font-weight: 800; letter-spacing: .04em; text-transform: none; transition: transform .12s ease, background .15s ease, color .15s ease; } .ed-masthead__nav a:hover, .ed-masthead__nav .ed-nav-top:hover{ border-bottom-color: var(--ed-tinta) !important; background: var(--lar-sol); transform: translateY(-2px); } .ed-masthead__nav{ align-items: center; gap: clamp(8px, 1.4vw, 14px); } .ed-masthead__nav .ed-nav-caretbtn{ background: #fff; border: 2px solid var(--ed-tinta); border-radius: 50%; width: 24px; height: 24px; box-shadow: 2px 2px 0 var(--lar-sombra); } .ed-masthead__nav .ed-nav-drop{ border: 3px solid var(--ed-tinta); border-radius: 14px; box-shadow: 4px 4px 0 var(--lar-sombra); padding: 8px; } .ed-masthead__nav .ed-nav-drop::before{ border-left: 3px solid var(--ed-tinta); border-top: 3px solid var(--ed-tinta); width: 12px; height: 12px; border-radius: 3px 0 0 0; } .ed-masthead__nav .ed-nav-drop a{ border: 0 !important; box-shadow: none; border-radius: 10px; background: transparent; letter-spacing: .02em; text-transform: none; font-size: .78rem; } .ed-masthead__nav .ed-nav-drop a:hover{ background: var(--ed-papel-2); transform: none; } /* telefone = pilula sol */ .ed-masthead__tel{ font-family: var(--ed-sans); font-weight: 800; font-size: .88rem; background: var(--lar-sol); border: 3px solid var(--ed-tinta); border-radius: 30px; padding: 7px 14px; box-shadow: 3px 3px 0 var(--lar-sombra); transition: transform .12s ease; } .ed-masthead__tel:hover{ color: var(--ed-tinta); transform: translate(-1px,-1px); } .ed-masthead__tel .ed-tel-lbl, .ed-masthead__tel .ed-tel-ic{ color: var(--ed-tinta); } .ed-masthead__tel-toggle{ background: #fff; border: 2px solid var(--ed-tinta); box-shadow: 2px 2px 0 var(--lar-sombra); width: 26px; height: 26px; color: var(--ed-tinta); } .ed-masthead__tel-more{ border: 3px solid var(--ed-tinta); border-radius: 14px; box-shadow: 4px 4px 0 var(--lar-sombra); } .ed-masthead__tel-more::before{ border-left: 3px solid var(--ed-tinta); border-top: 3px solid var(--ed-tinta); width: 12px; height: 12px; } .ed-masthead__tel-more a{ font-family: var(--ed-sans); font-weight: 700; border-radius: 10px; } /* redes sociais: mantem os badges vazando a borda, com contorno e sombra */ .ed-masthead__social a{ border: 3px solid var(--ed-tinta); box-shadow: 2px 2px 0 var(--lar-sombra); background: var(--ed-acento, #E2603F) !important; } .ed-masthead__social a:hover{ background: var(--lar-sol) !important; } .ed-masthead__social a:hover i{ color: var(--ed-tinta) !important; } /* hamburguer mobile em chip */ .ed-masthead__toggle{ background: #fff; border: 3px solid var(--ed-tinta); border-radius: 12px; box-shadow: 2px 2px 0 var(--lar-sombra); width: 42px; height: 38px; align-items: center; padding: 0 8px; } .ed-masthead__toggle span{ height: 3px; border-radius: 3px; width: 100%; } /* ================================= HERO ================================== */ /* respiro entre masthead e frase estava GIGANTE no desktop: margem default de modulo no masthead (1.9rem) + padding do primeiro row + clamp do hero até 64px. Encurta os tres — o vao vira só o padding proprio do hero. */ .ed-masthead{ margin-bottom: 0 !important; } #c49row-3-1.c49row, #c49row-3-1{ padding-top: 0 !important; } .ed-hero{ padding-top: clamp(26px, 3vw, 38px); } .ed-hero__title{ font-weight: 800; line-height: 1.04; letter-spacing: -.01em; text-shadow: 3px 3px 0 #fff; } .ed-hero__lede{ font-weight: 700; } /* foto do hero vira POLAROID com fita e leve giro */ .ed-hero__figure{ background: #fff; border: 3px solid var(--ed-tinta); border-radius: 12px; padding: 10px 10px 8px; box-shadow: 7px 8px 0 var(--lar-sombra); transform: rotate(1.4deg); position: relative; transition: transform .18s ease; } .ed-hero__figure:hover{ transform: rotate(0deg) scale(1.01); } .ed-hero__figure::before{ content: ''; position: absolute; top: -12px; left: 50%; transform: translateX(-50%) rotate(-2deg); width: 92px; height: 24px; background: var(--lar-fita); border: 2px solid rgba(59,43,32,.35); border-radius: 4px; z-index: 2; } .ed-hero__figure img{ border-radius: 7px; } .ed-hero__figure figcaption{ font-family: var(--ed-serif); font-weight: 700; font-size: .82rem; letter-spacing: .02em; text-transform: none; text-align: center; color: var(--ed-tinta-2); } /* busca do hero: campos em pilulas brancas + botao acento */ .ed-hero__busca{ border-top: 3px dashed var(--ed-fio); padding-top: 24px; } .ed-hero__busca label{ font-size: .68rem !important; letter-spacing: .06em; text-transform: none; color: var(--ed-tinta-2); font-weight: 800 !important; } .ed-hero__busca .form-control, .ed-hero__busca .btn.multiselect{ background: #fff !important; border: 3px solid var(--ed-tinta) !important; border-radius: 26px !important; height: 46px !important; padding: 0 16px !important; font-weight: 700; box-shadow: 2px 2px 0 var(--lar-sombra); } .ed-hero__busca .btn.multiselect:hover, .ed-hero__busca .form-control:focus{ border-color: var(--ed-tinta) !important; background: #FFFDF7 !important; } .ed-hero__busca .btn.btn-secondary:not(.c49btn-main){ background: #fff !important; border: 2px solid var(--ed-tinta) !important; color: var(--ed-tinta) !important; border-radius: 20px !important; font-weight: 800; box-shadow: 2px 2px 0 var(--lar-sombra); } .ed-hero__busca .btn.btn-secondary:not(.c49btn-main).active{ background: var(--lar-sol) !important; border-color: var(--ed-tinta) !important; color: var(--ed-tinta) !important; } .ed-hero__busca .c49btn-main{ background: var(--ed-acento, #E2603F) !important; color: #fff !important; border: 3px solid var(--ed-tinta) !important; border-radius: 30px !important; box-shadow: 3px 3px 0 var(--lar-sombra); font-size: .82rem !important; font-weight: 800; letter-spacing: .05em; text-transform: none; transition: transform .12s ease, box-shadow .12s ease, background .15s ease; } .ed-hero__busca .c49btn-main:hover{ background: var(--ed-acento, #E2603F) !important; color: #fff !important; transform: translate(-1px,-1px); box-shadow: 4px 4px 0 var(--lar-sombra); } .ed-hero__busca .c49btn-main:active{ transform: translate(2px,2px); box-shadow: 1px 1px 0 var(--lar-sombra); } /* faixa de valor (venda/locacao): o GRUPO inteiro vira UMA pilula; os campos internos perdem a borda propria (senao fica caixa dentro de caixa) */ .ed-hero__busca .input-group{ background: #fff; border: 3px solid var(--ed-tinta); border-radius: 26px; box-shadow: 2px 2px 0 var(--lar-sombra); overflow: hidden; align-items: stretch; flex-wrap: nowrap; } .ed-hero__busca .input-group .form-control, .ed-hero__busca .input-group .input-group-text, .ed-hero__busca .input-group .input-group-prepend > *, .ed-hero__busca .input-group .input-group-append > *, .ed-hero__busca .input-group .input-group-addon{ background: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; height: 44px !important; font-weight: 700; } /* divisor suave entre minimo e maximo (e depois do R$) */ .ed-hero__busca .input-group > * + *{ border-left: 2px dashed var(--ed-fio) !important; } .ed-hero__busca .input-group .input-group-text, .ed-hero__busca .input-group .input-group-addon{ color: var(--ed-tinta-2); font-weight: 800; padding-inline: 12px; display: inline-flex; align-items: center; } /* checkbox "Buscar no mapa" (e afins): quadradinho do tema, alinhado ao rotulo */ .ed-hero__busca input[type="checkbox"]{ appearance: none; -webkit-appearance: none; width: 22px !important; height: 22px !important; min-width: 22px !important; max-width: 22px !important; flex: 0 0 22px !important; padding: 0 !important; background: #fff; border: 3px solid var(--ed-tinta) !important; border-radius: 7px !important; box-shadow: 2px 2px 0 var(--lar-sombra); display: inline-block; vertical-align: middle; margin-right: 8px; cursor: pointer; position: relative; } .ed-hero__busca input[type="checkbox"]:checked{ background: var(--lar-sol); } .ed-hero__busca input[type="checkbox"]:checked::after{ content: ''; position: absolute; inset: 3px 5px 6px 5px; border-left: 3px solid var(--ed-tinta); border-bottom: 3px solid var(--ed-tinta); transform: rotate(-48deg); } .ed-hero__busca input[type="checkbox"] + label, .ed-hero__busca label[for]{ cursor: pointer; } /* ========================= CABECALHOS DE SECAO =========================== */ .ed-sec-title{ font-weight: 800; } .ed-sec-rule{ height: 0; background: none; border-top: 4px dashed var(--ed-tinta); opacity: .22; } .ed-sec-count{ background: #fff; border: 2px solid var(--ed-tinta); border-radius: 20px; padding: 4px 12px; box-shadow: 2px 2px 0 var(--lar-sombra); font-weight: 800; letter-spacing: .04em; text-transform: none; color: var(--ed-tinta); } .ed-kicker{ border-bottom: 0; } /* ======================== CARDS (bento) = POLAROID ======================== */ .ed-card__link{ background: #fff; border: 3px solid var(--ed-tinta); border-radius: 12px; padding: 10px 10px 4px; box-shadow: 4px 5px 0 var(--lar-sombra); position: relative; overflow: visible; transition: transform .16s ease, box-shadow .16s ease; } .ed-card__link::before{ content: ''; position: absolute; top: -11px; left: 50%; transform: translateX(-50%) rotate(-2deg); width: 76px; height: 21px; background: var(--lar-fita); border: 2px solid rgba(59,43,32,.35); border-radius: 4px; z-index: 3; } .ed-bento .ed-card:nth-child(odd) .ed-card__link{ transform: rotate(-.9deg); } .ed-bento .ed-card:nth-child(even) .ed-card__link{ transform: rotate(.8deg); } .ed-bento .ed-card .ed-card__link:hover{ transform: rotate(0deg) translateY(-4px) scale(1.015); box-shadow: 6px 8px 0 var(--lar-sombra); z-index: 2; } .ed-card__media{ border-radius: 8px; } .ed-card__media img{ border-radius: 6px; } .ed-card__num{ top: 8px; left: 8px; border-radius: 14px; background: var(--lar-sol); border: 2px solid var(--ed-tinta); font-weight: 700; box-shadow: 2px 2px 0 var(--lar-sombra); } .ed-card__body{ padding: 12px 6px 10px; } .ed-card__title{ font-weight: 700; } .ed-card__local{ letter-spacing: .08em; font-weight: 800; } .ed-card__preco{ font-weight: 800; } .ed-card__specs li + li{ border-left: 2px dotted var(--ed-tinta-2); } .ed-card__link:hover .ed-card__title{ text-decoration: none; color: var(--ed-acento, #E2603F); } /* carimbo Vendido/Locado */ .ed-carimbo{ background: var(--lar-sol) !important; color: var(--ed-tinta) !important; border: 3px solid var(--ed-tinta) !important; border-radius: 12px; font-weight: 800 !important; box-shadow: 3px 3px 0 var(--lar-sombra); letter-spacing: .04em; } /* ========================== INDICE DE BAIRROS ============================ */ .ed-bairros{ border-top: 4px dashed var(--ed-fio); } .ed-indice__item a{ background: #fff; border: 2px solid var(--ed-tinta); border-radius: 16px; box-shadow: 2px 2px 0 var(--lar-sombra); margin-bottom: 10px; } .ed-indice__item a:hover{ background: var(--ed-papel-2); } /* a linha alinha por BASELINE no editorial — com a moedinha isso espreme o circulo; centraliza a linha inteira */ .ed-indice__item a{ align-items: center; } /* fios hairline do editorial entre as cidades: sobravam embaixo dos cartoes */ .ed-indice__item, .ed-indice__item:last-child{ border-top: 0 !important; border-bottom: 0 !important; } /* moedinha da CONTAGEM (coluna direita): circulo de verdade — tamanho fixo + conteudo centrado (border-radius:50% em box automatico vira OVO espremido) */ .ed-indice__n{ background: var(--lar-sol); border: 2px solid var(--ed-tinta); border-radius: 50%; color: var(--ed-tinta); font-weight: 800; font-family: var(--ed-sans); width: 40px; height: 40px; min-width: 40px; display: inline-flex; align-items: center; justify-content: center; font-size: .9rem; line-height: 1; letter-spacing: 0; box-shadow: 2px 2px 0 var(--lar-sombra); justify-self: end; } /* ordinal da esquerda (01, 02…) fica tipografico, so mais fofinho */ .ed-indice__num{ font-family: var(--ed-serif); font-weight: 700; } .ed-indice__nome{ font-weight: 700; } /* =========== EQUIPE NA HOME — REUSA o broker-profile/team (mod 86) =========== Sem modulo novo: a home inclui o modulo de equipe que TODO cliente JA TEM. O ceu (nuvens/sol/balao/passarinho) e o visual polaroid sao SO CSS, escopados na home (#c49page-index) pra nao afetar a pagina de equipe. */ #c49page-index .c49mod-broker-profile-equipe{ position: relative; overflow: hidden; margin: clamp(6px,1.5vw,20px) 0 0; /* faixa CHEIA (nao um quadro), colada na secao de cima */ padding: clamp(34px,4vw,56px) clamp(16px,4vw,40px); max-width: none !important; border-radius: 0 !important; /* mata fantasma do make-css (versao quadro antiga) */ border: 0 !important; border-top: 4px solid var(--ed-tinta) !important; border-bottom: 4px solid var(--ed-tinta) !important; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 88'%3E%3Cellipse cx='32' cy='30' rx='26' ry='28' fill='%23FF8A65' stroke='%233B2B20' stroke-width='3'/%3E%3Cellipse cx='32' cy='30' rx='10' ry='28' fill='%23FFF6E9' stroke='%233B2B20' stroke-width='2'/%3E%3Cpath d='M14 50 L24 69 M50 50 L40 69' stroke='%233B2B20' stroke-width='2'/%3E%3Crect x='23' y='68' width='18' height='14' rx='3' fill='%23FFD93D' stroke='%233B2B20' stroke-width='3'/%3E%3C/svg%3E") no-repeat 7% 16%, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 60'%3E%3Ccircle cx='30' cy='30' r='19' fill='%23FFD93D' stroke='%233B2B20' stroke-width='4'/%3E%3C/svg%3E") no-repeat right 40px top 28px, linear-gradient(180deg, var(--lar-ceu), var(--lar-ceu-2)); background-size: 52px auto, 50px auto, auto; animation: larBalloonFloat 7s ease-in-out infinite; } @keyframes larBalloonFloat{ 0%,100%{ background-position: 7% 17%, right 40px top 28px, center; } 50%{ background-position: 7% 12%, right 40px top 28px, center; } } /* nuvens: faixa repetida que desliza atravessando a secao */ #c49page-index .c49mod-broker-profile-equipe::before{ content:''; position:absolute; inset:0; z-index:0; pointer-events:none; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 460 300'%3E%3Cg fill='%23fff' stroke='%233B2B20' stroke-width='3' stroke-linejoin='round'%3E%3Cpath transform='translate(14,16)' d='M22 48 Q6 48 8 34 Q10 23 25 27 Q27 10 46 14 Q58 5 65 21 Q88 19 86 38 Q84 48 66 48 Z'/%3E%3Cpath transform='translate(220,124) scale(1.3)' d='M22 48 Q6 48 8 34 Q10 23 25 27 Q27 10 46 14 Q58 5 65 21 Q88 19 86 38 Q84 48 66 48 Z'/%3E%3Cpath transform='translate(348,44) scale(.72)' d='M22 48 Q6 48 8 34 Q10 23 25 27 Q27 10 46 14 Q58 5 65 21 Q88 19 86 38 Q84 48 66 48 Z'/%3E%3Cpath transform='translate(96,206) scale(.95)' d='M22 48 Q6 48 8 34 Q10 23 25 27 Q27 10 46 14 Q58 5 65 21 Q88 19 86 38 Q84 48 66 48 Z'/%3E%3C/g%3E%3C/svg%3E") repeat-x left top; background-size: 460px auto; animation: larCloudDrift 17s linear infinite; } @keyframes larCloudDrift{ from{ background-position-x:0; } to{ background-position-x:-460px; } } /* passarinho: voa na CONTRAMAO com vaivem de voo */ #c49page-index .c49mod-broker-profile-equipe::after{ content:''; position:absolute; width:40px; height:31px; top:26%; z-index:0; pointer-events:none; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 34'%3E%3Cpath d='M33 20l9-4M33 22l9 3' stroke='%233B2B20' stroke-width='2.5' stroke-linecap='round'/%3E%3Ccircle cx='22' cy='18' r='11' fill='%23FFD93D' stroke='%233B2B20' stroke-width='3'/%3E%3Cpath d='M12 16l-8 3 8 4z' fill='%23FF8A65' stroke='%233B2B20' stroke-width='2' stroke-linejoin='round'/%3E%3Ccircle cx='17' cy='15' r='1.8' fill='%233B2B20'/%3E%3Cpath d='M23 16q8-6 14-1-6 8-14 5z' fill='%23FF8A65' stroke='%233B2B20' stroke-width='2.5' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center/contain; animation: larDerivaVolta 30s linear infinite, larVoo 2.6s ease-in-out infinite; animation-delay: -9s, 0s; } @keyframes larDerivaVolta{ from{ left: calc(100% + 90px); } to{ left: -90px; } } @keyframes larVoo{ 0%,100%{ transform: translateY(0) rotate(2deg); } 50%{ transform: translateY(-10px) rotate(-3deg); } } /* grade dos cards POR CIMA do ceu (desfaz a ponte .ed-row que empilharia as colunas) */ #c49page-index .c49mod-broker-profile-equipe .row{ position: relative; z-index: 1; display: flex !important; flex-wrap: wrap; justify-content: center; align-items: stretch; gap: clamp(18px,2vw,28px); max-width: 1080px; margin: 0 auto !important; width: auto !important; } /* titulo "Nossa equipe" — o modulo broker nao emite, entao entra por CSS como primeiro item da grade (ocupa a linha toda); traduz por [lang] */ #c49page-index .c49mod-broker-profile-equipe .row::before{ content: "Nossa equipe"; flex: 0 0 100%; z-index: 1; font-family: var(--ed-serif); font-weight: 800; font-size: clamp(1.6rem, 3.6vw, 2.5rem); line-height: 1.05; color: var(--ed-tinta); text-align: center; text-shadow: 2px 2px 0 #fff; margin: 0 0 clamp(8px,1.5vw,16px); } html[lang="es"] #c49page-index .c49mod-broker-profile-equipe .row::before{ content: "Nuestro equipo"; } html[lang="en"] #c49page-index .c49mod-broker-profile-equipe .row::before{ content: "Our team"; } #c49page-index .c49mod-broker-profile-equipe .row > [class*="col-"]{ flex: 1 1 300px !important; max-width: 480px !important; min-width: 0 !important; width: auto !important; padding: 0 !important; } /* card = polaroid */ #c49page-index .c49mod-broker-profile-equipe .c49mod-broker-single{ height: auto; } #c49page-index .c49mod-broker-profile-equipe .card.c49wrap-card{ background:#fff !important; border:3px solid var(--ed-tinta) !important; border-radius:16px !important; box-shadow:4px 5px 0 var(--lar-sombra) !important; overflow:visible !important; height:auto; position:relative; transition:transform .16s ease, box-shadow .16s ease; } #c49page-index .c49mod-broker-profile-equipe .card.c49wrap-card::before{ content:''; position:absolute; top:-11px; left:50%; transform:translateX(-50%) rotate(-2deg); width:76px; height:21px; background:var(--lar-fita); border:2px solid rgba(59,43,32,.35); border-radius:4px; z-index:3; } #c49page-index .c49mod-broker-profile-equipe .row > *:nth-child(odd) .card{ transform:rotate(-.8deg); } #c49page-index .c49mod-broker-profile-equipe .row > *:nth-child(even) .card{ transform:rotate(.7deg); } #c49page-index .c49mod-broker-profile-equipe .card.c49wrap-card:hover{ transform:rotate(0) translateY(-5px); box-shadow:6px 8px 0 var(--lar-sombra); z-index:4; } #c49page-index .c49mod-broker-profile-equipe .card-block{ display:flex; flex-direction:column; align-items:center; justify-content:flex-start !important; min-height:0 !important; height:auto !important; gap:4px; padding:24px 16px 18px; } #c49page-index .c49mod-broker-profile-equipe .broker-photo-name{ text-align:center; display:flex; flex-direction:column; align-items:center; } #c49page-index .c49mod-broker-profile-equipe .broker-photo{ width:116px; height:116px; border-radius:50%; margin:0 auto 8px; border:3px solid var(--ed-tinta); box-shadow:2px 2px 0 var(--lar-sombra); background-size:cover; background-position:center top; background-color:var(--ed-papel-2); } #c49page-index .c49mod-broker-profile-equipe .broker-name{ font-family:var(--ed-serif); font-weight:800; font-size:1.1rem; line-height:1.15; } #c49page-index .c49mod-broker-profile-equipe .broker-creci{ font-size:.66rem; font-weight:800; letter-spacing:.06em; color:var(--ed-tinta-2); text-transform:uppercase; margin-top:2px; } /* na home a equipe fica enxuta: telefone/email ficam so na pagina de perfil */ #c49page-index .c49mod-broker-profile-equipe .broker-phone, #c49page-index .c49mod-broker-profile-equipe .broker-info{ display:none !important; } /* botao Ver perfil = pilula sol */ #c49page-index .c49mod-broker-profile-equipe .card-block .btn{ margin-top:12px !important; background:var(--lar-sol) !important; color:var(--ed-tinta) !important; border:2px solid var(--ed-tinta) !important; border-radius:24px !important; width:auto !important; padding:8px 20px !important; font-weight:800 !important; box-shadow:2px 2px 0 var(--lar-sombra) !important; text-decoration:none !important; transition:transform .12s ease; } #c49page-index .c49mod-broker-profile-equipe .card-block .btn:hover{ transform:translate(-1px,-1px); } /* ====================== DEPOIMENTOS = balao de fala ====================== */ .ed-depoimento{ background: #fff; border: 3px solid var(--ed-tinta); border-radius: 20px 20px 20px 6px; padding: 20px 24px; box-shadow: 4px 4px 0 var(--lar-sombra); } /* ================== CHAMADAS (anuncie / nao encontrou) =================== */ .ed-chamada{ background: var(--lar-sol); border: 3px solid var(--ed-tinta); border-radius: 18px; box-shadow: 5px 5px 0 var(--lar-sombra); padding: 22px; transform: rotate(-.5deg); transition: transform .15s ease; } .ed-chamadas__grid > :nth-child(even) .ed-chamada, .ed-chamadas__grid > .ed-chamada:nth-child(even){ transform: rotate(.5deg); background: #fff; } .ed-chamada:hover{ transform: rotate(0deg) scale(1.01); } .ed-chamada__kicker{ font-weight: 800; letter-spacing: .06em; } .ed-chamada__titulo{ font-weight: 800; } /* desenhinho no canto de cada chamada (pedido dela): arvore no amarelo, arco-iris no branco */ .ed-chamada{ position: relative; } .ed-chamada::after{ content:''; position:absolute; right:18px; bottom:14px; width:78px; height:78px; background-repeat:no-repeat; background-position:center bottom; background-size:contain; pointer-events:none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 70 92'%3E%3Crect x='29' y='50' width='12' height='36' rx='4' fill='%23B5794A' stroke='%233B2B20' stroke-width='3'/%3E%3Ccircle cx='35' cy='33' r='27' fill='%239AD36A' stroke='%233B2B20' stroke-width='3'/%3E%3Ccircle cx='26' cy='27' r='4' fill='%237cb84f'/%3E%3Ccircle cx='44' cy='37' r='3.5' fill='%237cb84f'/%3E%3Ccircle cx='39' cy='21' r='3' fill='%237cb84f'/%3E%3C/svg%3E"); } .ed-chamadas__grid > :nth-child(even) .ed-chamada::after, .ed-chamadas__grid > .ed-chamada:nth-child(even)::after{ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 84 82'%3E%3Crect x='16' y='40' width='52' height='38' rx='3' fill='%23FFF6E9' stroke='%233B2B20' stroke-width='3'/%3E%3Cpath d='M9 43 L42 13 L75 43 Z' fill='%23FF8A65' stroke='%233B2B20' stroke-width='3' stroke-linejoin='round'/%3E%3Crect x='36' y='55' width='14' height='23' rx='2' fill='%23B5794A' stroke='%233B2B20' stroke-width='3'/%3E%3Crect x='22' y='48' width='11' height='11' rx='2' fill='%23FFD93D' stroke='%233B2B20' stroke-width='2.5'/%3E%3Ccircle cx='46.5' cy='67' r='1.4' fill='%233B2B20'/%3E%3C/svg%3E"); } @media (max-width:560px){ .ed-chamada::after{ display:none; } } /* ============================= RODAPE (casinha) =========================== */ .ed-rodape{ background: linear-gradient(180deg, #4A3626, #3B2B20); border-top: 4px solid var(--ed-tinta); border-radius: 34px 34px 0 0; color: #FFF6E9; } .ed-rodape__tit{ color: #F3C96B; border-bottom: 3px dashed rgba(255,246,233,.22); font-weight: 800; letter-spacing: .08em; text-transform: none; font-size: .8rem; } .ed-rodape__lista a{ color: #FFF6E9; font-weight: 700; } .ed-rodape__lista a:hover{ color: var(--lar-sol); } .ed-rodape__lista a span{ color: #C9B295; } .ed-rodape__end, .ed-rodape__creci{ color: #D9C4A8; } .ed-rodape__base{ border-top: 3px dashed rgba(255,246,233,.22); } .ed-rodape__base p, .ed-rodape__base a{ color: #C9B295; } .ed-rodape__base a:hover{ color: var(--lar-sol); } .ed-rodape__col--marca img{ background: #fff; border: 3px solid var(--ed-tinta); border-radius: 12px; padding: 6px 10px; box-shadow: 3px 3px 0 rgba(0,0,0,.35); max-height: 52px; max-width: 170px; } /* ====================== LISTAGEM (indice de materias) ==================== */ .ed-lista__item{ background: #fff; border: 3px solid var(--ed-tinta); border-radius: 14px; box-shadow: 4px 4px 0 var(--lar-sombra); padding: 16px; margin-bottom: 18px; } .ed-lista__foto{ border: 2px solid var(--ed-tinta); border-radius: 10px; overflow: hidden; } .ed-lista__titulo{ font-weight: 700; } .ed-lista__preco{ font-weight: 800; } .ed-listagem__busca-toggle{ background: #fff; border: 3px solid var(--ed-tinta); border-radius: 26px; box-shadow: 2px 2px 0 var(--lar-sombra); font-weight: 800; letter-spacing: .04em; text-transform: none; font-size: .8rem; } .ed-listagem__busca-toggle:hover{ background: var(--lar-sol); border-color: var(--ed-tinta); } /* paginacao em chips */ .ed-pag a, .ed-pag span, .ed-pag button{ border: 2px solid var(--ed-tinta) !important; border-radius: 18px !important; background: #fff; box-shadow: 2px 2px 0 var(--lar-sombra); font-weight: 800; } /* ===================== PAGINA DO IMOVEL (materia) ======================== */ .ed-imovel__capa{ background: #fff; border: 3px solid var(--ed-tinta); border-radius: 12px; padding: 10px; box-shadow: 7px 8px 0 var(--lar-sombra); position: relative; transform: rotate(.5deg); } .ed-imovel__capa::before{ content: ''; position: absolute; top: -12px; left: 50%; transform: translateX(-50%) rotate(-2deg); width: 92px; height: 24px; background: var(--lar-fita); border: 2px solid rgba(59,43,32,.35); border-radius: 4px; z-index: 2; } .ed-imovel__capa img{ border-radius: 7px; } .ed-imovel__titulo{ font-weight: 800; text-shadow: 2px 2px 0 #fff; } .ed-imovel__preco{ font-weight: 800; } /* quadrinhos SEPARADOS (o grid editorial tem gap:0 — colava borda com borda) */ .ed-ficha{ gap: 14px !important; } /* sem a linha dura em cima dos quadrinhos (border-bottom do bloco de precos) */ .ed-imovel__precos{ border-bottom: 0 !important; } .ed-ficha__item{ background: #fff; border: 2px solid var(--ed-tinta); border-radius: 14px; padding: 12px 16px; box-shadow: 2px 2px 0 var(--lar-sombra); } .ed-ensaio__item{ background: #fff; border: 3px solid var(--ed-tinta); border-radius: 10px; padding: 8px; box-shadow: 4px 5px 0 var(--lar-sombra); } .ed-ensaio__item:nth-child(odd){ transform: rotate(-.7deg); } .ed-ensaio__item:nth-child(even){ transform: rotate(.6deg); } .ed-ensaio__item:hover{ transform: rotate(0deg); } .ed-ensaio__item img{ border-radius: 5px; } .ed-ensaio__num{ background: var(--lar-sol); border: 2px solid var(--ed-tinta); border-radius: 12px; font-weight: 700; box-shadow: 2px 2px 0 var(--lar-sombra); } /* botoes de acao da ficha (enviar por e-mail / whatsapp / visita / proposta): o custom.css os deixa QUADRADOS via seletor com id (#c49page-imovel ... !important) — precisa de id + !important pra vencer. #c49main existe em toda pagina/idioma. */ #c49main .ed-contato__form .btn.btn-block, #c49main .ed-contato__form .form-submit{ border-radius: 30px !important; border: 3px solid var(--ed-tinta) !important; box-shadow: 3px 3px 0 var(--lar-sombra) !important; font-weight: 800 !important; letter-spacing: .04em; transition: transform .12s ease, box-shadow .12s ease; } #c49main .ed-contato__form .btn.btn-block:hover{ transform: translate(-1px,-1px); box-shadow: 4px 4px 0 var(--lar-sombra) !important; } #c49main .ed-contato__form .btn.btn-block:active{ transform: translate(2px,2px); box-shadow: 1px 1px 0 var(--lar-sombra) !important; } /* o principal (enviar) = solido no acento; os demais = brancos com contorno */ #c49main .ed-contato__form .form-submit{ background: var(--ed-acento, #E2603F) !important; color: #fff !important; } #c49main .ed-contato__form .btn-whatsapp, #c49main .ed-contato__form .btn-visita, #c49main .ed-contato__form .btn-proposta{ background: #fff !important; color: var(--ed-tinta) !important; } #c49main .ed-contato__form .btn-whatsapp:hover, #c49main .ed-contato__form .btn-visita:hover, #c49main .ed-contato__form .btn-proposta:hover{ background: var(--lar-sol) !important; color: var(--ed-tinta) !important; } /* foto do hero clicavel (imovel em destaque) */ .ed-hero__figlink{ display: block; color: inherit; text-decoration: none; } /* ================== FORM (contato do imovel + internas) ================== */ .ed-contato .form-control{ background: #fff !important; border: 3px solid var(--ed-tinta) !important; border-radius: 16px !important; box-shadow: 2px 2px 0 var(--lar-sombra); font-weight: 700; padding: 10px 14px !important; } .ed-contato textarea.form-control{ border-radius: 16px !important; } .ed-contato .btn, .ed-contato button[type=submit]{ background: var(--ed-acento, #E2603F) !important; color: #fff !important; border: 3px solid var(--ed-tinta) !important; border-radius: 30px !important; font-weight: 800; box-shadow: 3px 3px 0 var(--lar-sombra); transition: transform .12s ease, box-shadow .12s ease; } .ed-contato .btn:hover{ transform: translate(-1px,-1px); box-shadow: 4px 4px 0 var(--lar-sombra); } .ed-contato .btn:active{ transform: translate(2px,2px); box-shadow: 1px 1px 0 var(--lar-sombra); } /* ================= INTERNAS (breadcrumb + cards padrao) ================== */ .c49mod-breadcrumb-basic .breadcrumb, .c49mod-breadcrumb-basic{ background: transparent; } .c49mod-breadcrumb-basic .breadcrumb li a, .c49mod-breadcrumb-basic .breadcrumb li{ font-weight: 800; color: var(--ed-tinta); } #c49main .card.c49wrap-card:not(#_){ background: #fff; border: 3px solid var(--ed-tinta); border-radius: 18px; box-shadow: 5px 5px 0 var(--lar-sombra); overflow: hidden; } #c49main .card.c49wrap-card:not(#_) .card-header{ background: var(--lar-ceu); border-bottom: 3px solid var(--ed-tinta); } #c49main .card.c49wrap-card:not(#_) .card-header .c49-card-title{ font-family: var(--ed-serif); font-weight: 800; color: var(--ed-tinta); } /* botoes padrao (services/internas) em pilula */ .btn.c49btn-main:not(#_), .btn.btn-primary:not(#_){ border-radius: 30px !important; border: 3px solid var(--ed-tinta) !important; box-shadow: 3px 3px 0 var(--lar-sombra); font-weight: 800; } /* imovel restrito (gate) — mantem on-brand */ .c49-restricted:not(#_){ background: #fff; border: 3px solid var(--ed-tinta); border-radius: 18px; box-shadow: 5px 5px 0 var(--lar-sombra); } /* ================= EQUIPE (lista de corretores) =========================== */ /* a regra generica de link das internas pintava o TEXTO do botao de tinta + sublinhado — texto marrom em botao marrom = invisivel */ #c49main .c49mod-broker-profile-equipe .btn{ color: #FFF6E9 !important; text-decoration: none !important; border-radius: 30px !important; border: 3px solid var(--ed-tinta) !important; box-shadow: 3px 3px 0 var(--lar-sombra); font-weight: 800; transition: transform .12s ease, background .15s ease, color .15s ease; } #c49main .c49mod-broker-profile-equipe .btn:hover{ background: var(--lar-sol) !important; color: var(--ed-tinta) !important; transform: translate(-1px,-1px); } /* ============ GRADE PADRAO DE IMOVEIS (perfil do corretor etc.) =========== */ #c49main .card.c49-property-card{ background: #fff; border: 3px solid var(--ed-tinta); border-radius: 12px; box-shadow: 4px 5px 0 var(--lar-sombra); overflow: hidden; } /* faixa diagonal (aceita financiamento / proximo a praia…) vira etiqueta sol */ #c49main .c49-property-card .c49-strip{ background: var(--lar-sol) !important; color: var(--ed-tinta) !important; border: 2px solid var(--ed-tinta); font-weight: 800; } /* barra de acoes (compartilhar / favorito / mapa): chips legiveis */ #c49main .c49-property-card .card-footer{ background: var(--ed-papel-2) !important; border-top: 2px solid var(--ed-tinta); padding: 8px; } #c49main .c49-property-card .card-footer .btn{ background: #fff !important; color: var(--ed-tinta) !important; border: 2px solid var(--ed-tinta) !important; border-radius: 12px !important; margin: 0 4px; box-shadow: 2px 2px 0 var(--lar-sombra); } #c49main .c49-property-card .card-footer .btn:hover{ background: var(--lar-sol) !important; } #c49main .c49-property-card .card-footer .btn i{ color: var(--ed-tinta) !important; } /* painel que SOBE no hover da foto (hover-infos): era transparente com texto tinta sobre a foto = ilegivel. Scrim marrom + texto creme + preco sol. Escopado no wrapper _hover-infos pra NAO pintar grades sem o efeito. */ .c49mod-properties_hover-infos .c49-property-card .card-block.c49-property-block{ background: linear-gradient(180deg, rgba(59,43,32,.88), rgba(59,43,32,.96)) !important; } .c49mod-properties_hover-infos .c49-property-block .c49-property-title, .c49mod-properties_hover-infos .c49-property-block .c49-property-resume, .c49mod-properties_hover-infos .c49-property-block .card-text, .c49mod-properties_hover-infos .c49-property-block small.text-muted, .c49mod-properties_hover-infos .c49-property-block .c49-property-code{ color: #FFF6E9 !important; } .c49mod-properties_hover-infos .c49-property-block .c49-property-value, .c49mod-properties_hover-infos .c49-property-block .c49-currency, .c49mod-properties_hover-infos .c49-property-block .valorDesc{ color: var(--lar-sol) !important; } /* ===================== LINKS UTEIS (linhas com respiro) =================== */ #c49main .c49mod-useful-links-basic .card-block-border{ padding: 16px 8px !important; border-top: 0 !important; border-bottom: 3px dashed var(--ed-fio) !important; } #c49main .c49mod-useful-links-basic > .card-block-border:last-child{ border-bottom: 0 !important; } #c49main .c49mod-useful-links-basic a{ font-weight: 800; } #c49main .c49mod-useful-links-basic a.float-right{ font-weight: 700; color: var(--ed-tinta-2) !important; } #c49main .c49mod-useful-links-basic .card-block-border:hover{ background: var(--ed-papel-2); border-radius: 12px; } /* ===================== PARCEIROS (padrao do modelo) ======================= */ #c49main .c49mod-partners-basic .card-block-border{ padding: 28px 8px !important; border-top: 0 !important; border-bottom: 3px dashed var(--ed-fio) !important; } #c49main .c49mod-partners-basic > .card-block-border:last-child{ border-bottom: 0 !important; } #c49main .c49mod-partners-basic .img-partner{ background: #fff; border: 3px solid var(--ed-tinta); border-radius: 14px; padding: 10px; box-shadow: 3px 3px 0 var(--lar-sombra); max-width: 100%; height: auto; } #c49main .c49mod-partners-basic .card-title{ font-family: var(--ed-serif); font-weight: 800; } #c49main .c49mod-partners-basic .btn.c49btn{ background: #fff !important; color: var(--ed-tinta) !important; border: 3px solid var(--ed-tinta) !important; border-radius: 24px !important; padding: 7px 20px !important; font-weight: 800; box-shadow: 2px 2px 0 var(--lar-sombra); transition: transform .12s ease, background .15s ease; text-decoration: none !important; } #c49main .c49mod-partners-basic .btn.c49btn:hover{ background: var(--lar-sol) !important; color: var(--ed-tinta) !important; transform: translate(-1px,-1px); } /* ============================== MOBILE ==================================== */ @media (max-width: 899px){ /* sol some no cel SO NO MASTHEAD: colidia com o hamburguer (o da secao equipe fica) */ .ed-masthead .ed-tema-sol{ display: none; } .ed-tema-nv3{ display: none; } .ed-masthead__marca{ padding: 6px 12px; } .ed-masthead__marca img{ max-height: 60px !important; max-width: 210px !important; } .ed-masthead__nav{ border-top: 3px dashed var(--ed-fio); align-items: stretch; } /* menu aberto: chips UNIFORMES, largura cheia, texto centralizado */ .ed-masthead__nav a, .ed-masthead__nav .ed-nav-top{ display: inline-flex; align-items: center; justify-content: center; width: 100%; text-align: center; padding-block: 10px; } .ed-masthead__nav .ed-nav-group{ width: 100%; } .ed-masthead__nav .ed-nav-group .ed-nav-top{ flex: 1 1 auto; width: auto; } .ed-masthead__nav .ed-nav-drop a{ justify-content: flex-start; text-align: left; } .ed-rodape{ border-radius: 22px 22px 0 0; } } /* ========================= ACESSIBILIDADE ================================= */ @media (prefers-reduced-motion: reduce){ .ed-tema-nuvem, .ed-tema-sol{ animation: none; } #c49page-index .c49mod-broker-profile-equipe, #c49page-index .c49mod-broker-profile-equipe::before, #c49page-index .c49mod-broker-profile-equipe::after{ animation: none !important; } .ed-hero__figure, .ed-card__link, .ed-chamada, .ed-ensaio__item, #c49page-index .c49mod-broker-profile-equipe .card.c49wrap-card{ transition: none; } }