/* ─── Template "Moderno" — vitrine do domínio próprio (Pro/Premium) ───────── Carrega DEPOIS de perfil_publico.css e só quando . Reaproveita a mesma cor do corretor (--c) e deriva um paleta de tons via color-mix() — se adapta automaticamente a qualquer cor escolhida, sem precisar cadastrar variações manualmente. Toda a lógica de captura de lead, WhatsApp e tracking continua no HTML/JS original, intocada — aqui é só apresentação. */ body.tema-moderno { --c-100: color-mix(in srgb, var(--c) 12%, #ffffff); --c-300: color-mix(in srgb, var(--c) 45%, #ffffff); /* --c2 vem da paleta escolhida (services/vitrine_temas.py). Sem paleta, o segundo tom é derivado da própria cor da marca, como antes. */ --c-600: var(--c2, color-mix(in srgb, var(--c) 82%, #000000 8%)); --c-800: color-mix(in srgb, var(--c-600) 60%, #05060f 88%); --c-glow: color-mix(in srgb, var(--c) 55%, transparent); --pp-fundo: #05060f; background: var(--pp-fundo); } /* ─── Header: vidro fosco com brilho da cor do corretor ─────────────────── */ body.tema-moderno .pp-header { background: rgba(8, 10, 22, .72); border-bottom: 1px solid color-mix(in srgb, var(--c) 30%, transparent); box-shadow: 0 1px 0 color-mix(in srgb, var(--c) 15%, transparent); } body.tema-moderno .pp-header__brand-name, body.tema-moderno .pp-header__home { color: #f1f5f9; } body.tema-moderno .pp-header__home:hover { color: var(--c-300); } /* ─── Hero: gradiente animado + malha de pontos ──────────────────────────── */ body.tema-moderno .pp-hero { background: radial-gradient(ellipse 120% 90% at 15% -10%, var(--c-600) 0%, transparent 55%), radial-gradient(ellipse 100% 80% at 100% 10%, var(--c-800) 0%, transparent 60%), #05060f; position: relative; overflow: hidden; } body.tema-moderno .pp-hero::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(color-mix(in srgb, var(--c) 35%, transparent) 1px, transparent 1px); background-size: 26px 26px; opacity: .35; animation: pp-drift 40s linear infinite; pointer-events: none; } @keyframes pp-drift { from { background-position: 0 0; } to { background-position: 260px 130px; } } body.tema-moderno .pp-hero::after { display: none; } body.tema-moderno .pp-hero__skyline { display: none; } /* Imagem de capa (opcional, definida em /ferramentas/template-site/editar): fica atrás do gradiente da cor do corretor, que serve de véu pra legibilidade — mesmo princípio do "véu de cor" do cartão de visita. */ body.tema-moderno .pp-hero[data-tem-capa="1"] { background-image: radial-gradient(ellipse 120% 90% at 15% -10%, color-mix(in srgb, var(--c) 70%, transparent) 0%, transparent 55%), linear-gradient(180deg, rgba(5,6,15,.55) 0%, rgba(5,6,15,.93) 100%), var(--capa-url); background-size: cover; background-position: center; } body.tema-moderno .pp-hero__headline { font-size: 17px; font-weight: 500; color: #cbd5e1; margin: 6px 0 14px; max-width: 520px; line-height: 1.5; } body.tema-moderno .pp-hero__photo { border: 3px solid var(--c-300); box-shadow: 0 0 0 6px color-mix(in srgb, var(--c) 18%, transparent), 0 12px 40px -8px var(--c-glow); } body.tema-moderno .pp-hero__photo--initials { background: linear-gradient(135deg, var(--c), var(--c-800)); } body.tema-moderno .pp-hero__badge { background: linear-gradient(135deg, var(--c), var(--c-600)); box-shadow: 0 4px 14px -3px var(--c-glow); } body.tema-moderno .pp-hero__eyebrow { color: var(--c-300); letter-spacing: .08em; text-transform: uppercase; font-weight: 700; } body.tema-moderno .pp-hero__name { color: #fff; text-shadow: 0 2px 24px color-mix(in srgb, var(--c) 40%, transparent); } body.tema-moderno .pp-hero__meta-item { color: #cbd5e1; } body.tema-moderno .pp-hero__meta-item svg { color: var(--c-300); } body.tema-moderno .pp-hero__bio { color: #94a3b8; } body.tema-moderno .pp-hero__whatsapp { background: linear-gradient(135deg, #25d366, #128c7e); box-shadow: 0 10px 30px -8px rgba(37,211,102,.55); border: 1px solid rgba(255,255,255,.15); } body.tema-moderno .pp-hero__whatsapp:hover { transform: translateY(-2px); box-shadow: 0 14px 36px -8px rgba(37,211,102,.7); } /* ─── Vitrine ─────────────────────────────────────────────────────────────── */ body.tema-moderno .pp-vitrine { background: var(--pp-fundo); } body.tema-moderno .pp-vitrine__title { color: #f1f5f9; } body.tema-moderno .pp-search-wrap { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); border-radius: 12px; } body.tema-moderno .pp-search { color: #f1f5f9; } body.tema-moderno .pp-search::placeholder { color: #64748b; } body.tema-moderno .pp-search-icon { color: #64748b; } body.tema-moderno .pp-filter { border-color: rgba(255,255,255,.14); color: #cbd5e1; background: rgba(255,255,255,.03); } body.tema-moderno .pp-filter:hover { border-color: var(--c-300); color: var(--c-300); } body.tema-moderno .pp-filter--active, body.tema-moderno .pp-filter--active:hover { background: linear-gradient(135deg, var(--c), var(--c-600)); border-color: transparent; color: #fff; box-shadow: 0 6px 18px -6px var(--c-glow); } .pp-filters-avancado { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; } .pp-select-avancado { appearance: none; -webkit-appearance: none; background-color: rgba(255,255,255,.04); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; background-size: 14px; border: 1px solid rgba(255,255,255,.14); border-radius: 10px; padding: 8px 30px 8px 12px; font-size: 12.5px; font-weight: 500; color: #e2e8f0; cursor: pointer; transition: border-color .15s ease; } .pp-select-avancado:hover, .pp-select-avancado:focus { border-color: var(--c-300); outline: none; } .pp-select-avancado option { background: #0b0d1a; color: #f1f5f9; } /* ─── Cards: vidro escuro com brilho no hover ────────────────────────────── */ body.tema-moderno .pp-grid { gap: 22px; } body.tema-moderno .pp-card { background: rgba(255,255,255,.035); border: 1px solid rgba(255,255,255,.09); border-radius: 20px; backdrop-filter: blur(6px); transition: transform .22s cubic-bezier(.2,.8,.2,1), box-shadow .22s ease, border-color .22s ease; } body.tema-moderno .pp-card:hover { transform: translateY(-6px); border-color: var(--c-300); box-shadow: 0 20px 48px -14px var(--c-glow), 0 0 0 1px color-mix(in srgb, var(--c) 25%, transparent); } body.tema-moderno .pp-card__local { color: #94a3b8; } body.tema-moderno .pp-card__title { color: #f1f5f9; } body.tema-moderno .pp-card__price { color: var(--c-300); font-weight: 800; } body.tema-moderno .pp-spec { background: rgba(255,255,255,.06); color: #cbd5e1; } body.tema-moderno .pp-card__btn-ver { background: linear-gradient(135deg, var(--c), var(--c-600)); color: #fff; border: none; box-shadow: 0 6px 18px -6px var(--c-glow); } body.tema-moderno .pp-card__btn-ver:hover { filter: brightness(1.1); } body.tema-moderno .pp-card__btn-share, body.tema-moderno .pp-card__btn-wa { border-color: rgba(255,255,255,.14); color: #cbd5e1; } body.tema-moderno .pp-card__btn-share:hover { border-color: var(--c-300); color: var(--c-300); background: color-mix(in srgb, var(--c) 12%, transparent); } body.tema-moderno .pp-badge--venda { background: linear-gradient(135deg, var(--c), var(--c-600)); } body.tema-moderno .pp-vitrine__count { color: #64748b; } body.tema-moderno .pp-empty { color: #64748b; } /* ─── Footer & flutuante ──────────────────────────────────────────────────── */ body.tema-moderno .pp-footer { background: var(--pp-fundo); border-top: 1px solid rgba(255,255,255,.08); } body.tema-moderno .pp-footer__inner { color: #64748b; } body.tema-moderno .pp-footer__inner a { color: var(--c-300); } body.tema-moderno .pp-float-wa { box-shadow: 0 10px 30px -8px rgba(37,211,102,.6); } /* ─── Redes sociais no hero, ao lado do botão do WhatsApp ─────────────────── */ body.tema-moderno .pp-hero__whatsapp { padding: 12px 22px; font-size: 14.5px; } body.tema-moderno .pp-rede { width: 44px; height: 44px; border-radius: 13px; display: inline-flex; align-items: center; justify-content: center; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14); color: #e2e8f0; text-decoration: none; transition: transform .15s ease, background .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease; } /* Etiqueta com o usuário: mesma pílula, em grade alinhada. ATENÇÃO: a regra acima (body.tema-moderno .pp-rede) fixa width:44px e justify-content:center e tem especificidade maior que .pp-hero__redes--rotulo .pp-rede do CSS base — por isso largura, alinhamento e recuo precisam ser repetidos aqui, senão a pílula não cresce e o usuário fica cortado. */ body.tema-moderno .pp-hero__faixa { border-top-color: color-mix(in srgb, var(--c) 22%, transparent); } body.tema-moderno .pp-hero__redes--rotulo .pp-rede { width: auto; height: 42px; border-radius: 12px; justify-content: flex-start; padding: 0 15px 0 13px; gap: 9px; } body.tema-moderno .pp-hero__redes--rotulo .pp-rede svg { flex-shrink: 0; } body.tema-moderno .pp-rede__user { color: inherit; letter-spacing: -.01em; } @media (max-width: 640px) { body.tema-moderno .pp-hero__redes--rotulo .pp-rede { width: 100%; height: 40px; padding: 0 11px 0 10px; gap: 7px; } } body.tema-moderno .pp-rede:hover { transform: translateY(-2px); background: color-mix(in srgb, var(--c) 22%, transparent); border-color: var(--c-300); color: #fff; box-shadow: 0 10px 24px -10px var(--c-glow); } /* ─── Tema claro ──────────────────────────────────────────────────────────── */ body.tema-moderno.tema-claro { --c-300: color-mix(in srgb, var(--c) 72%, #000000); --c-glow: color-mix(in srgb, var(--c) 35%, transparent); --pp-fundo: #f6f8fb; } body.tema-moderno.tema-claro .pp-header { background: rgba(255,255,255,.82); border-bottom: 1px solid color-mix(in srgb, var(--c) 18%, #e2e8f0); box-shadow: 0 1px 0 rgba(15,23,42,.04); } body.tema-moderno.tema-claro .pp-header__brand-name, body.tema-moderno.tema-claro .pp-header__home { color: #0f172a; } body.tema-moderno.tema-claro .pp-header__home:hover { color: var(--c); } /* O hero segue colorido nos dois temas — é o que dá identidade à vitrine. No claro fica um degradê suave da cor da marca sobre fundo branco. */ body.tema-moderno.tema-claro .pp-hero { background: radial-gradient(ellipse 120% 90% at 15% -10%, color-mix(in srgb, var(--c) 22%, #ffffff) 0%, transparent 60%), radial-gradient(ellipse 100% 80% at 100% 10%, color-mix(in srgb, var(--c-600) 16%, #ffffff) 0%, transparent 65%), #ffffff; } body.tema-moderno.tema-claro .pp-hero::before { background-image: radial-gradient(color-mix(in srgb, var(--c) 28%, transparent) 1px, transparent 1px); opacity: .3; } body.tema-moderno.tema-claro .pp-hero[data-tem-capa="1"] { background-image: radial-gradient(ellipse 120% 90% at 15% -10%, color-mix(in srgb, var(--c) 35%, transparent) 0%, transparent 55%), linear-gradient(180deg, rgba(255,255,255,.62) 0%, rgba(255,255,255,.9) 100%), var(--capa-url); } body.tema-moderno.tema-claro .pp-hero__name { color: #0f172a; text-shadow: none; } body.tema-moderno.tema-claro .pp-hero__eyebrow { color: var(--c-300); } body.tema-moderno.tema-claro .pp-hero__headline { color: #334155; } body.tema-moderno.tema-claro .pp-hero__meta-item { color: #475569; } body.tema-moderno.tema-claro .pp-hero__meta-item svg { color: var(--c); } body.tema-moderno.tema-claro .pp-hero__bio { color: #64748b; } body.tema-moderno.tema-claro .pp-hero__photo { border-color: #fff; box-shadow: 0 0 0 6px color-mix(in srgb, var(--c) 12%, transparent), 0 14px 40px -12px rgba(15,23,42,.28); } body.tema-moderno.tema-claro .pp-rede { background: #fff; border-color: #e2e8f0; color: #475569; box-shadow: 0 2px 8px rgba(15,23,42,.06); } body.tema-moderno.tema-claro .pp-rede:hover { background: color-mix(in srgb, var(--c) 10%, #ffffff); border-color: var(--c); color: var(--c); } body.tema-moderno.tema-claro .pp-vitrine__title { color: #0f172a; } body.tema-moderno.tema-claro .pp-search-wrap { background: #fff; border-color: #e2e8f0; } body.tema-moderno.tema-claro .pp-search { color: #0f172a; } body.tema-moderno.tema-claro .pp-search::placeholder, body.tema-moderno.tema-claro .pp-search-icon { color: #94a3b8; } body.tema-moderno.tema-claro .pp-filter { background: #fff; border-color: #e2e8f0; color: #475569; } body.tema-moderno.tema-claro .pp-select-avancado { background-color: #fff; border-color: #e2e8f0; color: #334155; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E"); } body.tema-moderno.tema-claro .pp-select-avancado option { background: #fff; color: #0f172a; } body.tema-moderno.tema-claro .pp-card { background: #fff; border-color: #e8edf5; backdrop-filter: none; box-shadow: 0 2px 10px rgba(15,23,42,.05); } body.tema-moderno.tema-claro .pp-card:hover { border-color: var(--c); box-shadow: 0 20px 44px -18px var(--c-glow), 0 0 0 1px color-mix(in srgb, var(--c) 18%, transparent); } body.tema-moderno.tema-claro .pp-card__local { color: #64748b; } body.tema-moderno.tema-claro .pp-card__title { color: #0f172a; } body.tema-moderno.tema-claro .pp-card__price { color: var(--c-300); } body.tema-moderno.tema-claro .pp-spec { background: #f1f5f9; color: #475569; } body.tema-moderno.tema-claro .pp-card__btn-share, body.tema-moderno.tema-claro .pp-card__btn-wa { border-color: #e2e8f0; color: #64748b; } body.tema-moderno.tema-claro .pp-footer { border-top: 1px solid #e8edf5; } body.tema-moderno.tema-claro .pp-footer__inner { color: #94a3b8; } body.tema-moderno.tema-claro .pp-footer__inner a { color: var(--c-300); } body.tema-moderno.tema-claro .pp-vitrine__count, body.tema-moderno.tema-claro .pp-empty { color: #94a3b8; } /* ─── Neon: brilho nos títulos, bordas e botões ───────────────────────────── */ body.tema-moderno.tema-neon .pp-hero__name { text-shadow: 0 0 28px color-mix(in srgb, var(--c) 65%, transparent), 0 0 8px color-mix(in srgb, var(--c) 35%, transparent); } body.tema-moderno.tema-neon .pp-hero__eyebrow { text-shadow: 0 0 14px var(--c-glow); } body.tema-moderno.tema-neon .pp-hero__photo { box-shadow: 0 0 0 6px color-mix(in srgb, var(--c) 22%, transparent), 0 0 46px -6px var(--c), 0 12px 40px -8px var(--c-glow); } body.tema-moderno.tema-neon .pp-filter--active, body.tema-moderno.tema-neon .pp-card__btn-ver { box-shadow: 0 0 22px -4px var(--c), 0 6px 18px -6px var(--c-glow); } body.tema-moderno.tema-neon .pp-card__price { text-shadow: 0 0 18px var(--c-glow); } body.tema-moderno.tema-neon .pp-card:hover { box-shadow: 0 0 0 1px var(--c), 0 0 38px -10px var(--c), 0 20px 48px -14px var(--c-glow); } body.tema-moderno.tema-neon .pp-rede:hover { box-shadow: 0 0 22px -4px var(--c), 0 10px 24px -10px var(--c-glow); } body.tema-moderno.tema-neon.tema-escuro .pp-header { border-bottom-color: color-mix(in srgb, var(--c) 55%, transparent); box-shadow: 0 1px 22px -6px var(--c-glow); } @media (max-width: 640px) { body.tema-moderno .pp-filters-avancado { flex-direction: column; } .pp-select-avancado { width: 100%; } body.tema-moderno .pp-hero__redes { justify-content: center; } body.tema-moderno .pp-rede { width: 42px; height: 42px; } }