/* ========================================================================== SAMI Sistemas — Páginas de solução (Condomínios e Locação) Seções: hero centralizado com mockup, dores, pilares, CTA com formulário e venda cruzada. As variações da página Locação usam modificadores (.pilar--protecao, .cta-form__caixa--azul). ========================================================================== */ /* -------------------------------------------------------------------------- Fundo único (Condomínios, Locação e Sobre) Mesma ideia da home/payhub (ver comentário "Fundo único da home" em home.css): uma cor sólida escura por trás de TODAS as seções da página (só o hero tem imagem própria), em vez de cada seção clara/card branco isolado como o resto deste arquivo foi desenhado originalmente. Escopado a essas três classes (uma por página, ver em condominios.php/locacao.php/sobre.php) — não afeta nenhuma outra página que algum dia venha a reaproveitar esses componentes num tema claro. Reaproveita os próprios tokens de cor do root.css (--cor-fundo, --cor-texto, --cor-borda...): como quase todo componente deste arquivo já é construído sobre eles, redefinir só os tokens aqui faz a página inteira virar "vidro escuro sobre fundo escuro" sem precisar reescrever regra por regra. */ body.pagina-condominios, body.pagina-locacao, body.pagina-sobre { --cor-fundo: rgba(255, 255, 255, .05); --cor-fundo-suave: rgba(255, 255, 255, .04); --cor-fundo-suave-2: rgba(255, 255, 255, .08); --cor-fundo-suave-3: rgba(255, 255, 255, .04); --cor-fundo-chip-azul: rgba(110, 168, 255, .16); --cor-texto: var(--cor-texto-invertido); --cor-texto-forte: var(--cor-texto-invertido); --cor-texto-suave: var(--cor-texto-borda-clara); --cor-texto-placeholder: rgba(255, 255, 255, .4); --cor-borda: rgba(255, 255, 255, .14); --cor-borda-suave: rgba(255, 255, 255, .08); } body.pagina-condominios main, body.pagina-locacao main, body.pagina-sobre main { background-color: var(--cor-fundo-escuro); } /* -------------------------------------------------------------------------- Hero -------------------------------------------------------------------------- */ .hero-solucao { position: relative; background-color: var(--cor-fundo-escuro); background-image: url("img.php?src=bg-overlay.jpg&w=2000"); background-size: cover; background-position: center top; padding-top: calc(var(--altura-header) + var(--espaco-96)); /* O mockup "vaza" do fundo escuro para a área branca */ margin-bottom: 22rem; } /* A seção de baixo (.dores/.problemas) agora é do mesmo fundo escuro sólido (ver .pagina-condominios/.pagina-locacao acima), então a imagem do hero precisa desbotar pra essa cor antes de acabar — mesma técnica do .hero-payhub (ver payhub.css) — em vez de cortar seco. Repetido nas duas variações (em vez de um só ".hero-solucao") porque cada página segue tendo seu próprio "mockup vazando" (ou não, ver .hero-solucao--locacao) — só a imagem de fundo em si precisa do fade, igual nas duas. */ .hero-solucao--condominios { background-image: linear-gradient(to bottom, transparent 0%, transparent 70%, var(--cor-fundo-escuro) 100%), url("img.php?src=bg-overlay.jpg&w=2000"); background-size: cover, cover; background-position: center top, center top; background-repeat: no-repeat, no-repeat; } .hero-solucao__conteudo { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; text-align: center; } .hero-solucao__titulo { max-width: 70rem; font-size: var(--texto-hero); font-weight: var(--peso-regular); line-height: var(--altura-linha-compacta); letter-spacing: var(--espacamento-letra-hero); color: var(--cor-texto-invertido); } .hero-solucao__titulo strong { font-weight: var(--peso-extrabold); } .hero-solucao__subtitulo { max-width: 38rem; margin-top: var(--espaco-24); font-size: var(--texto-subtitulo-hero); font-weight: var(--peso-bold); line-height: 1; letter-spacing: var(--espacamento-letra-hero); color: var(--cor-azul-claro); } .hero-solucao__descricao { max-width: 37rem; margin-block: var(--espaco-32) var(--espaco-40); font-size: var(--texto-subtitulo); line-height: 1.2; color: var(--cor-texto-invertido); } .hero-solucao__mockup { position: relative; width: min(60rem, 100%); margin-top: var(--espaco-48); margin-bottom: -22rem; } /* Mesmo tratamento do print da Vitrine na home (ver .vitrine__brilho/ .vitrine__imagem em home.css): glow atrás subindo por cima da imagem, fade da base pro fundo escuro e um fio de luz girando na borda. */ .hero-solucao__mockup-brilho { position: absolute; left: 50%; top: -8rem; transform: translateX(-50%); width: 62rem; max-width: 96%; height: 30rem; background: radial-gradient(ellipse 55% 50% at 50% 30%, rgba(var(--glow-royal), .55) 0%, rgba(var(--glow-ciano), .2) 42%, transparent 72%); filter: blur(50px); z-index: -1; pointer-events: none; } .hero-solucao__mockup-imagem { position: relative; z-index: 1; -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 30%, transparent 100%); mask-image: linear-gradient(to bottom, #000 0%, #000 30%, transparent 100%); } .hero-solucao__mockup-imagem img { display: block; width: 100%; height: auto !important; border-radius: var(--raio-16) var(--raio-16) 0 0; border: 1px solid rgba(255, 255, 255, .14); border-bottom: none; } @property --hero-mockup-beam { syntax: ""; initial-value: 0deg; inherits: false; } .hero-solucao__mockup-imagem::after { content: ""; position: absolute; inset: 0; z-index: 2; border-radius: var(--raio-16) var(--raio-16) 0 0; padding: 1.5px; background: conic-gradient(from var(--hero-mockup-beam), transparent 0deg, transparent 290deg, rgba(var(--glow-ciano), .85) 330deg, #ffffff 345deg, rgba(var(--glow-ciano), .85) 355deg, transparent 360deg); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; animation: hero-mockup-beam-girar 6s linear infinite; } @keyframes hero-mockup-beam-girar { to { --hero-mockup-beam: 360deg; } } @media (prefers-reduced-motion: reduce) { .hero-solucao__mockup-imagem::after { animation: none; } } /* Locação: o mockup é uma imagem única (notebook + fundo já inclusos), sem a "sangria" para a área branca — o azul do hero cobre a imagem toda. O fade (ver .hero-solucao--condominios acima) continua precisando entrar aqui: é sobre a IMAGEM DE FUNDO da seção (bg-overlay.jpg), não sobre o mockup — as duas coisas são independentes. */ .hero-solucao--locacao { background-image: linear-gradient(to bottom, transparent 0%, transparent 70%, var(--cor-fundo-escuro) 100%), url("img.php?src=bg-overlay.jpg&w=2000"); background-size: cover, cover; background-position: center top, center top; background-repeat: no-repeat, no-repeat; margin-bottom: 0; } .hero-solucao--locacao .hero-solucao__mockup { margin-bottom: 0; } /* No Figma o título da Locação fica numa caixa fixa bem mais estreita (~514px em canvas de 1920px), por isso quebra comprimido mesmo no desktop. */ .hero-solucao--locacao .hero-solucao__titulo { max-width: 33rem; } /* -------------------------------------------------------------------------- Dores -------------------------------------------------------------------------- */ .dores { position: relative; padding-block: var(--espaco-96); } .dores__grade { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr 1fr; gap: var(--espaco-40); align-items: center; } .dores__titulo { font-size: var(--texto-titulo-card-grande); font-weight: var(--peso-semibold); letter-spacing: var(--espacamento-letra-titulo); line-height: var(--altura-linha-titulo); color: var(--cor-texto); } .dores__titulo strong { display: block; font-weight: var(--peso-extrabold); color: var(--cor-azul-claro); } .dores__descricao { margin-top: var(--espaco-24); font-size: var(--texto-medio); line-height: var(--altura-linha-larga); color: var(--cor-texto-suave); } .dores__lista { display: flex; flex-direction: column; gap: var(--espaco-24); margin-top: var(--espaco-32); } .dores__item { display: flex; align-items: flex-start; gap: var(--espaco-16); } .dores__icone { width: 2.125rem; height: 2.375rem; flex-shrink: 0; object-fit: contain; } .dores__item-titulo { font-size: var(--texto-medio); color: var(--cor-texto); } .dores__item-texto { font-size: var(--texto-medio); color: var(--cor-texto-suave); } .dores__cartoes { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--espaco-24); } .cartao-dor { display: flex; flex-direction: column; gap: var(--espaco-16); padding: var(--espaco-24); background-color: var(--cor-fundo); border: 1px solid var(--cor-borda); border-radius: var(--raio-16); box-shadow: var(--sombra-card-leve); } .cartao-dor__icone { width: 1.75rem; height: 1.75rem; object-fit: contain; } .cartao-dor__texto { font-size: var(--texto-medio); color: var(--cor-texto); white-space: nowrap; } /* -------------------------------------------------------------------------- Pilares -------------------------------------------------------------------------- */ .pilares { position: relative; padding-block: var(--espaco-64) var(--espaco-96); } .pilares>.container { position: relative; z-index: 1; } .pilares__cabecalho { text-align: center; margin-bottom: var(--espaco-80); } .pilares__titulo { font-size: var(--texto-titulo-grande); font-weight: var(--peso-bold); letter-spacing: var(--espacamento-letra-titulo); color: var(--cor-texto); } .pilares__subtitulo { margin-top: var(--espaco-16); font-size: var(--texto-destaque); font-weight: var(--peso-semibold); color: var(--cor-azul-claro); } .pilares__grade { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--espaco-24); } .pilar { border-radius: var(--raio-20); padding: 2.375rem; box-shadow: var(--sombra-card-leve); } .pilar__cabecalho { display: flex; align-items: center; gap: var(--espaco-12); margin-bottom: var(--espaco-16); } .pilar__icone { width: 1.5rem; height: 1.75rem; object-fit: contain; } .pilar__titulo { font-size: var(--texto-titulo-card-grande); font-weight: var(--peso-semibold); line-height: 1.15; color: var(--cor-texto-invertido); } .pilar__titulo--azul { color: var(--cor-texto); } .pilar__descricao { font-size: var(--texto-medio); line-height: var(--altura-linha-texto); color: var(--cor-texto-invertido); opacity: 0.9; } .pilar__descricao--central { text-align: center; } /* Lista com marcadores ">" (cards escuros) */ .pilar__topicos { display: flex; flex-direction: column; gap: var(--espaco-12); margin-top: var(--espaco-24); } .pilar__topico { display: flex; align-items: center; gap: var(--espaco-8); font-size: var(--texto-medio); color: var(--cor-texto-invertido); } .pilar__topico img { width: 0.4rem; height: 0.66rem; } .pilar__topicos--central { align-self: center; } /* ----- Pilar 1: Blindagem Financeira (card branco largo) ----- */ .pilar--financeiro { position: relative; grid-column: span 8; background-color: var(--cor-fundo); border: 1px solid var(--cor-borda); overflow: hidden; } .pilar--financeiro__marca-dagua { position: absolute; right: 0; bottom: 0; width: 14.7rem; height: 16.6rem; background-image: url("assets/img/simbolo-sami.png"); background-size: contain; background-repeat: no-repeat; opacity: 0.62; pointer-events: none; } .pilar--financeiro .pilar__descricao { max-width: 26rem; color: var(--cor-texto-suave); opacity: 1; } .pilar__checagens { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--espaco-16); max-width: 25rem; margin-top: var(--espaco-24); } .pilar__checagem { display: flex; align-items: center; gap: var(--espaco-8); font-size: var(--texto-medio); color: var(--cor-texto); } .pilar__checagem img { width: 1.125rem; height: 1.125rem; flex-shrink: 0; } .pilar__botao { margin-top: var(--espaco-32); padding: 0.7rem 1.4rem; font-size: var(--texto-medio); } /* ----- Pilar 2: Presença Digital (card azul) ----- */ .pilar--presenca { grid-column: span 4; display: flex; flex-direction: column; gap: var(--espaco-16); background-color: var(--cor-primaria); } /* ----- Pilar 3: Produtividade da Equipe (card azul claro) ----- */ .pilar--produtividade { grid-column: span 5; background-color: var(--cor-fundo-suave-2); border: 1px solid var(--cor-borda); } .pilar--produtividade .pilar__descricao { margin-top: var(--espaco-16); color: var(--cor-texto-suave); opacity: 1; } .pilar__recursos { display: flex; flex-direction: column; gap: var(--espaco-16); margin-top: var(--espaco-24); } .pilar__recurso { padding: 1rem; background-color: var(--cor-fundo); border: 1px solid var(--cor-borda-suave); border-radius: var(--raio-8); font-size: var(--texto-medio); color: var(--cor-azul-claro); } /* ----- Pilar 4: Autonomia do Condômino (card azul-marinho, Condomínios) ----- */ .pilar--autonomia { position: relative; grid-column: span 5; display: flex; align-items: center; padding-block: var(--espaco-64); background-color: var(--cor-azul-marinho); } .pilar--autonomia__conteudo { position: relative; z-index: 1; max-width: 15.25rem; } .pilar--autonomia .pilar__topicos { max-width: 10.2rem; } .pilar--autonomia__mockup { position: absolute; left: 58.4%; bottom: -1rem; width: 26.8rem; } /* ----- Pilar 4 (variação Locação): Presença Digital e Proteção ----- */ .pilar--protecao { grid-column: span 7; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--espaco-16); padding-block: var(--espaco-64); background-color: var(--cor-azul-acinzentado); text-align: center; } .pilar--protecao .pilar__icone { width: 2.2rem; height: 1.75rem; } .pilar__etiquetas { display: flex; gap: var(--espaco-16); margin-top: var(--espaco-8); flex-wrap: wrap; justify-content: center; } .pilar__etiqueta { padding: var(--espaco-8) var(--espaco-16); background-color: rgba(255, 255, 255, 0.1); border-radius: var(--raio-12); font-size: var(--texto-medio); color: var(--cor-texto-invertido); } /* -------------------------------------------------------------------------- Área do Cliente Online (recursos-online) -------------------------------------------------------------------------- */ .recursos-online { position: relative; padding-block: var(--espaco-96); } /* Glow interativo (segue o mouse) atrás do cartão à direita — mesma base compartilhada .secao-glow-interativo de base.css (ver comentário lá), reposicionado pra essa coluna. Análogo ao .payhub-conheca__glow-interativo em payhub.css. */ .recursos-online__glow-interativo { top: 55%; left: 76%; width: 26rem; height: 26rem; margin: -13rem 0 0 -13rem; background: radial-gradient(circle, rgba(87, 169, 224, .5) 0%, rgba(30, 90, 150, .16) 45%, rgba(30, 90, 150, 0) 72%); } .recursos-online__grade { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr 1fr; gap: var(--espaco-64); align-items: end; } .recursos-online__chapeu { font-size: var(--texto-micro); font-weight: var(--peso-bold); letter-spacing: var(--espacamento-letra-caps); text-transform: uppercase; color: var(--cor-azul-claro); } .recursos-online__titulo { margin-top: var(--espaco-16); font-size: var(--texto-titulo-secao); font-weight: var(--peso-semibold); line-height: var(--altura-linha-titulo); letter-spacing: var(--espacamento-letra-titulo); color: var(--cor-texto); } .recursos-online__descricao { margin-top: var(--espaco-24); color: var(--cor-texto-suave); } .recursos-online__lista { display: flex; flex-direction: column; gap: var(--espaco-16); margin-top: var(--espaco-32); } .recursos-online__item { display: flex; align-items: flex-start; gap: var(--espaco-16); padding: var(--espaco-16); background-color: var(--cor-fundo-suave-3); border: 1px solid var(--cor-borda); border-radius: var(--raio-4); } .recursos-online__item-icone { margin-top: 0.15rem; flex-shrink: 0; object-fit: contain; } .recursos-online__item-icone--pastas { width: 1.34rem; height: 1rem; } .recursos-online__item-icone--assembleias { width: 1.25rem; height: 1.03rem; } .recursos-online__item-icone--portaria { width: 1.13rem; height: 1.13rem; } .recursos-online__item-titulo { font-weight: var(--peso-bold); color: var(--cor-texto); } .recursos-online__item-texto { margin-top: 0.15rem; font-size: var(--texto-pequeno); color: var(--cor-texto-suave); } .recursos-online__acao { position: relative; z-index: 1; margin-top: var(--espaco-48); text-align: center; } .recursos-online__cartao { padding: 1.95rem; background-color: var(--cor-fundo-suave-3); border: 1px solid var(--cor-borda); border-radius: var(--raio-20); box-shadow: var(--sombra-card); } .recursos-online__cartao-lista { display: flex; flex-direction: column; gap: var(--espaco-24); } .recursos-online__cartao-item { display: flex; align-items: flex-start; gap: var(--espaco-12); } .recursos-online__cartao-icone { width: 1.18rem; height: 1.18rem; margin-top: 0.2rem; flex-shrink: 0; } .recursos-online__cartao-titulo { font-weight: var(--peso-bold); color: var(--cor-texto); } .recursos-online__cartao-texto { margin-top: 0.2rem; font-size: var(--texto-pequeno); color: var(--cor-texto-suave); } /* -------------------------------------------------------------------------- App do Condômino -------------------------------------------------------------------------- */ .app-condominio { position: relative; padding-block: var(--espaco-96); } .app-condominio__caixa { position: relative; z-index: 1; padding: 5.33rem 1.78rem; background-color: var(--cor-fundo-suave-3); border-radius: var(--raio-16); } .app-condominio__cabecalho { max-width: 44rem; margin-inline: auto; text-align: center; } .app-condominio__chapeu { font-size: var(--texto-micro); font-weight: var(--peso-bold); letter-spacing: var(--espacamento-letra-caps); text-transform: uppercase; color: var(--cor-azul-claro); } .app-condominio__titulo { margin-top: var(--espaco-16); font-size: var(--texto-titulo-secao); font-weight: var(--peso-semibold); letter-spacing: var(--espacamento-letra-titulo); color: var(--cor-texto); } .app-condominio__titulo strong { font-weight: var(--peso-extrabold); color: var(--cor-primaria); } .app-condominio__descricao { margin-top: var(--espaco-16); color: var(--cor-texto-suave); } .app-condominio__grade { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--espaco-24); margin-top: var(--espaco-64); } .app-condominio__card { display: flex; flex-direction: column; gap: var(--espaco-12); padding: 1.4rem; border: 1px solid var(--cor-borda); border-radius: var(--raio-8); } .app-condominio__card-icone { object-fit: contain; } .app-condominio__card-icone--assembleias { width: 1.39rem; height: 1.14rem; } .app-condominio__card-icone--portaria { width: 1.25rem; height: 1.25rem; } .app-condominio__card-icone--2via { width: 1.53rem; height: 1.11rem; } .app-condominio__card-icone--pastas { width: 1.49rem; height: 1.11rem; } .app-condominio__card-icone--comunicacao { width: 1.39rem; height: 1.11rem; } .app-condominio__card-icone--reserva { width: 1.25rem; height: 1.39rem; } .app-condominio__card-titulo { font-size: var(--texto-grande); font-weight: var(--peso-semibold); color: var(--cor-texto); } .app-condominio__card-texto { font-size: var(--texto-pequeno); color: var(--cor-texto-suave); } /* -------------------------------------------------------------------------- App de Leitura -------------------------------------------------------------------------- */ .app-leitura { position: relative; padding-block: var(--espaco-96); } /* Glow interativo atrás da imagem — aqui a imagem é a PRIMEIRA coluna do grid (31rem, à esquerda), o espelho do padrão usado em .recursos-online__glow-interativo acima (lá a coluna focal é a da direita). */ .app-leitura__glow-interativo { top: 50%; left: 22%; width: 24rem; height: 24rem; margin: -12rem 0 0 -12rem; background: radial-gradient(circle, rgba(87, 169, 224, .5) 0%, rgba(30, 90, 150, .16) 45%, rgba(30, 90, 150, 0) 72%); } .app-leitura__grade { position: relative; z-index: 1; display: grid; grid-template-columns: 31rem 1fr; gap: var(--espaco-64); align-items: center; } .app-leitura__imagem img { width: 100%; } .app-leitura__chapeu { font-size: var(--texto-micro); font-weight: var(--peso-bold); letter-spacing: var(--espacamento-letra-caps); text-transform: uppercase; color: var(--cor-azul-claro); } .app-leitura__titulo { margin-top: var(--espaco-16); font-size: var(--texto-titulo-secao); font-weight: var(--peso-semibold); letter-spacing: var(--espacamento-letra-titulo); color: var(--cor-texto); } .app-leitura__descricao { margin-top: var(--espaco-24); color: var(--cor-texto-suave); } .app-leitura__lista { display: flex; flex-direction: column; gap: var(--espaco-16); margin-top: var(--espaco-32); } .app-leitura__item { display: flex; align-items: center; gap: var(--espaco-12); color: var(--cor-texto); } .app-leitura__item img { flex-shrink: 0; } .app-leitura__item-icone--camera { width: 1.25rem; height: 1.13rem; } .app-leitura__item-icone--offline { width: 1.38rem; height: 1.24rem; } /* -------------------------------------------------------------------------- Aumente a produtividade (CTA de recursos) -------------------------------------------------------------------------- */ .produtividade-cta { position: relative; padding-block: var(--espaco-64) var(--espaco-96); } .produtividade-cta>.container { position: relative; z-index: 1; } .produtividade-cta__cabecalho { max-width: 57rem; margin-inline: auto; text-align: center; } .produtividade-cta__titulo { font-size: var(--texto-titulo-card-grande); font-weight: var(--peso-semibold); color: var(--cor-texto); white-space: nowrap; } .produtividade-cta__titulo strong { font-weight: var(--peso-extrabold); color: var(--cor-primaria); } .produtividade-cta__descricao { margin-top: var(--espaco-16); color: var(--cor-texto-suave); white-space: nowrap; } .produtividade-cta__grade { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--espaco-24); margin-top: var(--espaco-48); } .produtividade-cta__card { display: flex; gap: var(--espaco-24); padding: 1.9rem; border: 1px solid var(--cor-borda); border-radius: var(--raio-12); } .produtividade-cta__card-icone { display: flex; align-items: center; justify-content: center; width: 2.8rem; height: 2.8rem; flex-shrink: 0; background-color: var(--cor-fundo-chip-azul); border-radius: var(--raio-4); } .produtividade-cta__card-icone--integracao { width: 1.17rem; height: 1.05rem; } .produtividade-cta__card-icone--globo { width: 1.17rem; height: 1.17rem; } .produtividade-cta__card-titulo { font-size: 0.945rem; line-height: 1.5; font-weight: var(--peso-semibold); color: var(--cor-texto); } .produtividade-cta__card-texto { margin-top: var(--espaco-4); font-size: 0.827rem; line-height: 1.43; color: var(--cor-texto-suave); } /* -------------------------------------------------------------------------- CTA final com formulário -------------------------------------------------------------------------- */ .cta-form { position: relative; padding-block: var(--espaco-64) var(--espaco-96); } .cta-form>.container { position: relative; z-index: 1; } .cta-form__caixa { display: grid; grid-template-columns: 1fr 1fr; gap: var(--espaco-64); align-items: center; padding: 5.625rem 1.875rem; border-radius: var(--raio-27); } /* Só a variante de Condomínios (a da Locação é a --azul, sólida, abaixo): trocado o navy sólido por vidro escuro translúcido — mesmo motivo do ".cta__caixa" da home e do ".payhub-cta__form" do payhub (ver comentários lá): um bloco de cor sólida vira "banner" colado sobre o fundo escuro único da página. */ .cta-form__caixa--preta { background-color: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .14); } .cta-form__caixa--azul { background-color: var(--cor-primaria); } .cta-form__titulo { max-width: 27.5rem; font-size: var(--texto-titulo-grande); font-weight: var(--peso-bold); line-height: var(--altura-linha-titulo); letter-spacing: var(--espacamento-letra-titulo); color: var(--cor-texto-invertido); } .cta-form__descricao { margin-top: var(--espaco-32); font-size: var(--texto-destaque); font-weight: var(--peso-semibold); line-height: 1.33; color: var(--cor-texto-invertido); opacity: 0.9; } .cta-form__formulario { display: flex; flex-direction: column; gap: var(--espaco-16); padding: 2.375rem; background-color: var(--cor-fundo); border-radius: var(--raio-24); box-shadow: var(--sombra-form); } /* --caixa--preta é sempre um "vidro escuro", em qualquer página que a use — não só condomínios/sobre (que têm os tokens de cor globais reescritos por body.pagina-*, ver topo do arquivo), mas também a home (que não participa desse override e usaria os tokens padrão, claros, deixando formulário/campos/rótulos brancos-no-branco). Escopado à própria variante em vez de a uma página específica, pra funcionar igual em qualquer lugar que a use. */ .cta-form__caixa--preta .cta-form__formulario { background-color: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .14); } .cta-form__caixa--preta .cta-form__rotulo { color: var(--cor-texto-invertido); } .cta-form__caixa--preta .cta-form__entrada { background-color: rgba(255, 255, 255, .05); border-color: rgba(255, 255, 255, .14); color: var(--cor-texto-invertido); } .cta-form__caixa--preta .cta-form__entrada::placeholder { color: rgba(255, 255, 255, .4); } .cta-form__campo { display: flex; flex-direction: column; gap: var(--espaco-4); flex: 1; } .cta-form__rotulo { font-size: var(--texto-medio); color: var(--cor-texto); } .cta-form__entrada { width: 100%; padding: 0.65rem 0.75rem; background-color: var(--cor-fundo); border: 1px solid var(--cor-borda); border-radius: var(--raio-4); font-size: var(--texto-medio); color: var(--cor-texto); transition: border-color var(--transicao-rapida); } .cta-form__entrada::placeholder { color: var(--cor-texto-placeholder); } .cta-form__entrada:focus { outline: none; border-color: var(--cor-primaria); } .cta-form__linha { display: flex; gap: var(--espaco-16); } /* -------------------------------------------------------------------------- Select personalizado — só a variante de cor "vidro preto" (.cta-form__ caixa--preta) usada aqui. O componente base (.select-personalizado*) virou compartilhado — ver base.css. -------------------------------------------------------------------------- */ /* Sobre fundo escuro (ver .cta-form__caixa--preta), o botão segue o mesmo tratamento aplicado aos na regra acima. */ .cta-form__caixa--preta .select-personalizado__botao { background-color: rgba(255, 255, 255, .05); border-color: rgba(255, 255, 255, .14); color: var(--cor-texto-invertido); } /* A lista flutua (position: absolute) por cima do resto da página, então não pode usar um fundo translúcido como o botão — sem opacidade total aqui, o texto por baixo (ex.: o botão do CTA) vaza através dela. */ .cta-form__caixa--preta .select-personalizado__lista { background-color: var(--cor-fundo-cta-final); border-color: rgba(255, 255, 255, .14); color: var(--cor-texto-invertido); } .cta-form__caixa--preta .select-personalizado__valor--vazio { color: rgba(255, 255, 255, .4); } .cta-form__caixa--preta .select-personalizado__opcao { color: var(--cor-texto-invertido); } .cta-form__caixa--preta .select-personalizado__opcao:hover, .cta-form__caixa--preta .select-personalizado__opcao--foco { background-color: rgba(255, 255, 255, .1); } .cta-form__botao { margin-top: var(--espaco-8); padding-block: var(--espaco-16); background-color: var(--cor-primaria); border-radius: var(--raio-8); font-size: var(--texto-medio); color: var(--cor-texto-invertido); transition: background-color var(--transicao-padrao); } .cta-form__botao:hover { background-color: var(--cor-primaria-hover); } /* -------------------------------------------------------------------------- Venda cruzada -------------------------------------------------------------------------- */ .venda-cruzada { background-color: var(--cor-primaria); padding-block: var(--espaco-96); text-align: center; } .venda-cruzada__chapeu { font-size: 1.34rem; letter-spacing: var(--espacamento-letra-caps); text-transform: uppercase; color: var(--cor-texto-invertido); } .venda-cruzada__links { display: flex; align-items: center; justify-content: center; gap: 5.25rem; margin-top: var(--espaco-32); flex-wrap: wrap; } .venda-cruzada__link { font-size: 1.913rem; font-weight: var(--peso-bold); color: var(--cor-texto-invertido); transition: color var(--transicao-rapida), opacity var(--transicao-rapida); } .venda-cruzada__link img { height: 3.94rem; width: auto; } .venda-cruzada__link:has(img):hover { opacity: 0.85; } .venda-cruzada__link:hover { color: var(--cor-azul-claro); } /* -------------------------------------------------------------------------- Problemas (Locação) — cabeçalho centralizado + grade de 4 cartões -------------------------------------------------------------------------- */ .problemas { position: relative; padding-block: var(--espaco-96); } .problemas>.container { position: relative; z-index: 1; } .problemas__cabecalho { max-width: 59rem; margin-inline: auto; text-align: center; } .problemas__titulo { font-size: 30px; font-weight: var(--peso-semibold); letter-spacing: var(--espacamento-letra-titulo); color: var(--cor-azul-claro); } .problemas__descricao { margin-top: var(--espaco-16); max-width: 40rem; margin-inline: auto; color: var(--cor-texto-suave); } .problemas__grade { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--espaco-24); margin-top: var(--espaco-48); } .problemas__cartao { display: flex; flex-direction: column; gap: var(--espaco-16); padding: var(--espaco-32); background-color: var(--cor-fundo); border: 1px solid var(--cor-borda); border-radius: var(--raio-8); } .problemas__icone { width: 1.8rem; height: 1.8rem; object-fit: contain; } .problemas__cartao-texto { font-size: var(--texto-grande); font-weight: var(--peso-semibold); line-height: var(--altura-linha-titulo); color: var(--cor-texto); } /* -------------------------------------------------------------------------- Ponte para a solução (Locação) — faixa azul centralizada -------------------------------------------------------------------------- */ .ponte-solucao { padding-block: var(--espaco-64); } .ponte-solucao__caixa { display: flex; flex-direction: column; align-items: center; gap: var(--espaco-16); padding: var(--espaco-64) var(--espaco-48); background-color: var(--cor-primaria); text-align: center; } .ponte-solucao__titulo { font-size: 30px; font-weight: var(--peso-semibold); letter-spacing: var(--espacamento-letra-titulo); color: var(--cor-texto-invertido); } .ponte-solucao__descricao { max-width: 44rem; font-size: var(--texto-pequeno); line-height: var(--altura-linha-larga); color: var(--cor-texto-invertido); opacity: 0.9; } .ponte-solucao__linha { width: 4.5rem; height: 0.19rem; margin-top: var(--espaco-8); background-color: #d8e2ff; } /* -------------------------------------------------------------------------- Pilar destaque (Locação) — Blindagem financeira e fiscal -------------------------------------------------------------------------- */ .pilar-destaque { position: relative; padding-block: var(--espaco-96); } /* Glow interativo atrás da imagem (primeira coluna do grid, à esquerda) — mesma base compartilhada .secao-glow-interativo de base.css, mesmo posicionamento usado em .app-leitura__glow-interativo (condominios.php), já que o layout é o mesmo (imagem à esquerda, texto à direita). */ .pilar-destaque__glow-interativo { top: 50%; left: 22%; width: 24rem; height: 24rem; margin: -12rem 0 0 -12rem; background: radial-gradient(circle, rgba(87, 169, 224, .5) 0%, rgba(30, 90, 150, .16) 45%, rgba(30, 90, 150, 0) 72%); } .pilar-destaque__grade { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr 1fr; gap: var(--espaco-64); align-items: center; } /* Era um card branco quase opaco com borda azulada, pensado pro tema claro original — na página escura (ver .pagina-locacao no topo do arquivo) virava um retângulo bem claro destoando de tudo em volta. Mesmo vidro escuro usado no resto da página. */ body.pagina-locacao .pilar-destaque__imagem { background-color: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .16); } .pilar-destaque__imagem { padding: var(--espaco-16); background-color: rgba(255, 255, 255, 0.8); border: 1px solid rgba(0, 61, 155, 0.1); border-radius: var(--raio-20); box-shadow: var(--sombra-card); } .pilar-destaque__imagem img { display: block; width: 100%; border-radius: var(--raio-8); } .pilar-destaque__chapeu { font-size: var(--texto-micro); font-weight: var(--peso-medio); letter-spacing: var(--espacamento-letra-caps); text-transform: uppercase; color: var(--cor-azul-claro); } .pilar-destaque__titulo { margin-top: var(--espaco-12); font-size: 30px; font-weight: var(--peso-semibold); letter-spacing: var(--espacamento-letra-titulo); color: var(--cor-texto); } .pilar-destaque__lista { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--espaco-16); margin-top: var(--espaco-24); } .pilar-destaque__item { display: flex; align-items: center; gap: var(--espaco-8); font-size: var(--texto-pequeno); color: var(--cor-texto); } .pilar-destaque__item img { width: 1.1rem; height: 1.1rem; flex-shrink: 0; } .pilar-destaque__botao { display: inline-flex; margin-top: var(--espaco-24); padding: var(--espaco-12) var(--espaco-24); background-color: #0052cc; font-size: var(--texto-micro); letter-spacing: 0.02em; white-space: nowrap; } /* -------------------------------------------------------------------------- Portal do Cliente (Locação) — cartões Proprietário / Locatário -------------------------------------------------------------------------- */ .portal-cliente { position: relative; padding-block: var(--espaco-96); padding-inline: var(--espaco-24); background-color: var(--cor-fundo-suave); } .portal-cliente>.container { position: relative; z-index: 1; } .portal-cliente__titulo { margin-inline: auto; font-size: 30px; font-weight: var(--peso-semibold); letter-spacing: var(--espacamento-letra-titulo); color: var(--cor-azul-claro); text-align: center; } .portal-cliente__grade { display: grid; grid-template-columns: 1fr 1fr; gap: var(--espaco-24); margin-top: var(--espaco-48); } .portal-cliente__cartao { display: flex; flex-direction: column; gap: var(--espaco-24); padding: var(--espaco-32); background-color: var(--cor-fundo); border: 1px solid var(--cor-borda); border-radius: var(--raio-16); box-shadow: var(--sombra-card-leve); } .portal-cliente__cabecalho { display: flex; align-items: center; gap: var(--espaco-16); } .portal-cliente__icone { display: flex; align-items: center; justify-content: center; width: 3rem; height: 3rem; flex-shrink: 0; border-radius: var(--raio-12); } .portal-cliente__icone img { width: 1rem; height: 1rem; } .portal-cliente__icone--proprietario { background-color: rgba(0, 61, 155, 0.1); } .portal-cliente__icone--locatario { background-color: rgba(76, 94, 133, 0.1); } /* As duas eram tons de azul/cinza a 10% pensados pra contrastar com um fundo BRANCO (ver .portal-cliente__cartao, que já virou vidro escuro via token --cor-fundo) — a 10% sobre fundo escuro ficam praticamente invisíveis. Bem mais opacas aqui, mesmo tom de cada ícone. */ body.pagina-locacao .portal-cliente__icone--proprietario { background-color: rgba(110, 168, 255, .18); } body.pagina-locacao .portal-cliente__icone--locatario { background-color: rgba(140, 150, 180, .22); } .portal-cliente__cartao-titulo { font-size: var(--texto-titulo-card); font-weight: var(--peso-semibold); color: var(--cor-texto); } .portal-cliente__lista { display: flex; flex-direction: column; gap: var(--espaco-16); } .portal-cliente__lista li { position: relative; padding-left: var(--espaco-16); font-size: var(--texto-medio); color: var(--cor-texto); } .portal-cliente__lista li::before { content: ""; position: absolute; left: 0; top: 0.5em; width: 0.35rem; height: 0.35rem; background-color: var(--cor-azul-claro); border-radius: 50%; } .portal-cliente__lista--locatario li::before { background-color: var(--cor-azul-claro); } /* -------------------------------------------------------------------------- Bento (Locação) — Vistorias, Leads e Inadimplência -------------------------------------------------------------------------- */ .bento { position: relative; padding-block: var(--espaco-96); } .bento__grade { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--espaco-24); } .bento__cartao { border-radius: var(--raio-16); } .bento__cartao--vistorias { grid-column: span 7; display: flex; flex-direction: column; gap: var(--espaco-16); padding: var(--espaco-32); background-color: var(--cor-fundo); border: 1px solid var(--cor-borda); } .bento__cartao--leads { grid-column: span 5; display: flex; flex-direction: column; gap: var(--espaco-16); padding: var(--espaco-32); background-color: var(--cor-primaria); } .bento__cartao--inadimplencia { grid-column: span 12; display: flex; align-items: center; gap: var(--espaco-32); padding: var(--espaco-32); background-color: #d7e3fb; } /* Era um azul bem clarinho pra combinar com o texto azul em cima (ver .bento__inadimplencia-conteudo .bento__titulo/.bento__mini-titulo abaixo) — na página escura fica um retângulo claro isolado. Vidro escuro, mesmo texto azul continua legível em cima dele. */ body.pagina-locacao .bento__cartao--inadimplencia { background-color: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .14); } .bento__icone { width: 1.6rem; height: 1.5rem; object-fit: contain; } .bento__titulo { font-size: var(--texto-titulo-card-grande); font-weight: var(--peso-semibold); color: var(--cor-texto); } .bento__titulo--claro { color: var(--cor-texto-invertido); } .bento__etiquetas { display: flex; flex-wrap: wrap; gap: var(--espaco-12); } .bento__etiqueta { padding: var(--espaco-4) var(--espaco-12); background-color: #e7eeff; border-radius: var(--raio-4); font-size: var(--texto-micro); font-weight: var(--peso-medio); color: var(--cor-azul-claro); } /* Chip azul bem claro pensado pro card branco original (ver .bento__cartao--vistorias, que já virou vidro escuro via token --cor-fundo) — o mesmo tom de chip usado em .produtividade-cta__card-icone (condominios.php). */ body.pagina-locacao .bento__etiqueta { background-color: rgba(110, 168, 255, .16); } .bento__imagem { overflow: hidden; border-radius: var(--raio-8); background-color: var(--cor-fundo-suave); height: 150px; display: flex; align-items: center; justify-content: center; } .bento__imagem img { display: block; width: 95%; object-fit: cover; height: 120px; } .bento__lista { display: flex; flex-direction: column; gap: var(--espaco-12); opacity: 0.9; } .bento__lista li { display: flex; align-items: center; gap: var(--espaco-8); font-size: var(--texto-pequeno); color: var(--cor-texto-invertido); } .bento__lista li img { width: 0.4rem; height: 0.66rem; } .bento__inadimplencia-conteudo { flex: 1; display: flex; flex-direction: column; gap: var(--espaco-24); } .bento__inadimplencia-conteudo .bento__titulo { color: var(--cor-primaria); } .bento__mini-grade { display: flex; gap: var(--espaco-16); } .bento__mini-cartao { flex: 1; padding: var(--espaco-16); background-color: rgba(255, 255, 255, 0.5); border: 1px solid rgba(255, 255, 255, 0.4); border-radius: var(--raio-8); } /* Era um branco a 50% pra destacar um pouco mais que o já-claro .bento__cartao--inadimplencia por baixo — na versão escura desse card (ver acima) um branco a 50% estourava a seção toda. Mesma lógica, tom mais claro que o cartão em volta, só que na escala escura. */ body.pagina-locacao .bento__mini-cartao { background-color: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .16); } .bento__mini-titulo { font-weight: var(--peso-bold); color: var(--cor-azul-claro); } .bento__mini-texto { margin-top: var(--espaco-4); font-size: var(--texto-micro); color: var(--cor-texto); } .bento__estatistica { flex-shrink: 0; width: 14.2rem; padding: var(--espaco-24); background-color: var(--cor-primaria); border-radius: var(--raio-16); text-align: center; } .bento__estatistica-numero { font-size: var(--texto-numero); font-weight: var(--peso-bold); color: var(--cor-texto-invertido); } .bento__estatistica-legenda { margin-top: var(--espaco-4); font-size: var(--texto-micro); font-weight: var(--peso-medio); letter-spacing: var(--espacamento-letra-caps); text-transform: uppercase; color: var(--cor-texto-invertido); opacity: 0.8; } /* -------------------------------------------------------------------------- Diferenciais (Locação) — Por que imobiliárias confiam na Sami -------------------------------------------------------------------------- */ .diferenciais { position: relative; padding-block: var(--espaco-96); padding-inline: var(--espaco-24); background-color: var(--cor-fundo-suave); } .diferenciais>.container { position: relative; z-index: 1; } .diferenciais__titulo { font-size: 30px; font-weight: var(--peso-semibold); letter-spacing: var(--espacamento-letra-titulo); color: var(--cor-primaria); text-align: center; } .diferenciais__grade { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--espaco-40); margin-top: var(--espaco-48); } .diferenciais__item { display: flex; flex-direction: column; align-items: center; gap: var(--espaco-16); text-align: center; } .diferenciais__icone { display: flex; align-items: center; justify-content: center; width: 3.5rem; height: 3.5rem; background-color: var(--cor-primaria); border-radius: var(--raio-16); } .diferenciais__icone img { width: 1.3rem; height: 1.3rem; } .diferenciais__item-titulo { font-size: var(--texto-grande); font-weight: var(--peso-semibold); color: var(--cor-texto); } .diferenciais__item-texto { font-size: var(--texto-micro); color: var(--cor-texto-suave); } /* -------------------------------------------------------------------------- Responsivo — páginas de solução -------------------------------------------------------------------------- */ @media (max-width: 64rem) { /* 1024px */ .hero-solucao { margin-bottom: 14rem; } .hero-solucao__mockup { margin-bottom: -14rem; } .hero-solucao--locacao { margin-bottom: 0; } .hero-solucao--locacao .hero-solucao__mockup { margin-bottom: 0; } .dores__grade { grid-template-columns: 1fr; gap: var(--espaco-48); } .pilares__grade { grid-template-columns: 1fr; } .pilar--financeiro, .pilar--presenca, .pilar--produtividade, .pilar--autonomia, .pilar--protecao { grid-column: span 1; } .pilar--autonomia { padding-bottom: 12rem; text-align: center; } .pilar--autonomia__conteudo { max-width: none; margin-inline: auto; } .pilar--autonomia .pilar__topico { justify-content: center; } .pilar--autonomia__mockup { left: 50%; transform: translateX(-50%); bottom: -2rem; max-width: 80%; } .recursos-online__grade { grid-template-columns: 1fr; gap: var(--espaco-48); } .app-condominio__grade { grid-template-columns: repeat(2, 1fr); } .app-leitura__grade { grid-template-columns: 1fr; gap: var(--espaco-32); } .produtividade-cta__cabecalho { max-width: 36rem; } .produtividade-cta__titulo, .produtividade-cta__descricao { white-space: normal; } .produtividade-cta__grade { grid-template-columns: 1fr; } .cta-form__caixa { grid-template-columns: 1fr; gap: var(--espaco-48); padding: var(--espaco-48) var(--espaco-24); } .cta-form__conteudo { padding-left: 0; text-align: center; } .cta-form__titulo { max-width: none; } .problemas__grade { grid-template-columns: repeat(2, 1fr); } .pilar-destaque__grade, .portal-cliente__grade { grid-template-columns: 1fr; } .bento__cartao--vistorias, .bento__cartao--leads { grid-column: span 12; } .bento__cartao--inadimplencia { flex-direction: column; align-items: stretch; } .bento__mini-grade { flex-direction: column; } .bento__estatistica { width: 100%; } .diferenciais__grade { grid-template-columns: 1fr; gap: var(--espaco-32); } } @media (max-width: 48rem) { /* 768px */ .hero-solucao { padding-top: calc(var(--altura-header) + var(--espaco-48)); margin-bottom: 8rem; } .hero-solucao--locacao { margin-bottom: 0; } .hero-solucao__descricao { font-size: var(--texto-grande); } .hero-solucao__conteudo .botao { width: 100%; } .hero-solucao__mockup { margin-top: var(--espaco-32); margin-bottom: -8rem; } .hero-solucao--locacao .hero-solucao__mockup { margin-bottom: 0; } .dores { padding-block: var(--espaco-64); } .dores__cartoes { grid-template-columns: 1fr; gap: var(--espaco-16); } .pilares { padding-block: var(--espaco-48) var(--espaco-64); } .pilares__cabecalho { margin-bottom: var(--espaco-48); } .pilar { padding: var(--espaco-24); } .pilar--financeiro__marca-dagua { display: none; } .pilar__checagens { grid-template-columns: 1fr; } .pilar__botao { width: 100%; } .pilar--autonomia, .pilar--protecao { padding-block: var(--espaco-40); } .pilar--autonomia { padding-bottom: 10rem; } .recursos-online { padding-block: var(--espaco-64); } .recursos-online__lista { margin-top: var(--espaco-24); } .app-condominio { padding-block: var(--espaco-64); } .app-condominio__caixa { padding: var(--espaco-48) var(--espaco-24); } .app-condominio__grade { grid-template-columns: 1fr; margin-top: var(--espaco-48); } .app-leitura { padding-block: var(--espaco-64); } .produtividade-cta { padding-block: var(--espaco-48) var(--espaco-64); } .produtividade-cta__card { flex-direction: column; } .cta-form { padding-block: var(--espaco-48) var(--espaco-64); } .cta-form__formulario { padding: var(--espaco-24); } .cta-form__linha { flex-direction: column; } .venda-cruzada { padding-block: var(--espaco-64); } .venda-cruzada__chapeu { font-size: var(--texto-base); } .venda-cruzada__links { flex-direction: column; gap: var(--espaco-24); } .venda-cruzada__link { font-size: var(--texto-titulo-card); } .problemas__grade { grid-template-columns: 1fr; } .ponte-solucao__caixa { padding: var(--espaco-40) var(--espaco-24); } }