/* ========================== bloco_1_montserrat.css — estilos do bloco1-contatos (header / contato) - Versão atualizada para usar a fonte Montserrat (Google Fonts). - Importa Montserrat (400/600/700) com display=swap para melhor performance. - Substitua a linha @import por no se preferir. ========================== */ /* Importa Montserrat do Google Fonts */ @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;700&display=swap'); :root { /* Controle centralizado da opacidade da grade (1 = 100%) */ --grade-opacity: 0.7; /* Controle centralizado da escala da grade: 1 = 100% (tamanho original do SVG), valores >1 aumentam a escala (ex.: 1.8 = 180%). */ --grade-scale: 1.4; /* Escala usada em dispositivos móveis para evitar excesso de recorte */ --grade-scale-mobile: 1.25; /* ========== Variáveis do glow vermelho ========== */ /* cor do glow em RGB (sem alfa) */ --glow-rgb: 255, 0, 0; /* intensidade / opacidade inicial do ponto central (0..1) */ --glow-center-opacity: 1; /* tamanho do círculo (desktop e mobile) */ --glow-width-desktop: clamp(260px, 48vw, 900px); --glow-width-mobile: clamp(180px, 60vw, 480px); /* desfoque principal (alto -> brilho difuso) */ --glow-blur-desktop: 64px; --glow-blur-mobile: 36px; } /* Reset mínimo */ *, *::before, *::after { box-sizing: border-box; } html, body { height: 100%; margin: 0; } body { /* garante Montserrat como fonte primária */ font-family: 'Montserrat', Arial, Helvetica, sans-serif; font-weight: 400; background: #080808; color: #ffffff; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; line-height: 1.45; -webkit-font-feature-settings: "liga" 1; font-feature-settings: "liga" 1; } /* Container global (preserva o layout do site) */ .container, .bloco1-contatos__container { width: 100%; max-width: 1212px; margin: 0 auto; padding: 0 20px; } /* Preservando classes antigas para compatibilidade */ .bloco, .bloco-1 { width: 100%; } /* Header / hero do bloco 1 */ .bloco1-contatos, .bloco1-contatos__desktop { display: flex; justify-content: center; padding: 210px 0; position: relative; overflow: visible; /* garante que o ::before não seja cortado */ isolation: isolate; /* melhora o empilhamento de z-index local */ } /* Também suportamos a classe específica usada no template */ .pj-agendamento-hero-frame { position: relative; overflow: visible; isolation: isolate; } /* Pseudo-elemento para aplicar a grade como background do bloco 1 Usa caminho absoluto apropriado para arquivo CSS estático servido pelo Flask */ .pj-agendamento-hero-frame::before, .bloco1-contatos::before { content: ""; position: absolute; inset: 0; display: block; background-image: url('/static/images/corpo/bloco10/grade.svg'); background-repeat: no-repeat; background-position: center center; /* Usa as variáveis para controlar a escala — mantém proporção uniforme */ background-size: calc(var(--grade-scale) * 100%) calc(var(--grade-scale) * 100%); /* Opacidade controla visibilidade da grade (1 = 100%) */ opacity: var(--grade-opacity, 1); pointer-events: none; transform-origin: center; will-change: transform, opacity; z-index: 0; } /* Wrapper interno */ .bloco1-contatos__inner, .bloco-inner { width: 100%; max-width: 1100px; margin: 0 auto; padding-top: 0; position: relative; /* garante empilhamento consistente */ z-index: 1; /* coloca o conteúdo acima da grade */ } /* Cabeçalho principal */ .contact-info, .bloco1-contatos__cabecalho { width: 100%; max-width: 980px; margin: 0 auto; text-align: center; display: grid; grid-template-columns: 1fr; gap: 22px; align-items: center; position: relative; z-index: 1; } /* Título — preserve Montserrat e tamanho profissional */ .title, .bloco1-contatos__titulo { font-family: 'Montserrat', Arial, Helvetica, sans-serif; font-weight: 700; font-size: clamp(28px, 4vw, 36px); margin: 0; line-height: 1.03; letter-spacing: -0.02em; color: #ffffff; } /* Imagem hero — preserve proporção e max-width */ .contatos, .bloco1-contatos__imagem-contatos { display: block; width: 85%; max-width: 1200px; height: auto; max-height: 388px; object-fit: contain; margin: 0 auto; position: relative; z-index: 2; /* garantir que a imagem fique acima do glow (pseudo-elemento em .inner) */ } /* URL de contato — reafirmando estilo */ .URL, .bloco1-contatos__url { font-family: 'Montserrat', Arial, Helvetica, sans-serif; font-weight: 600; font-size: clamp(16px, 2.2vw, 20px); color: #ffffffbf; margin: 0; position: relative; z-index: 1; } /* Link interno para facilitar SEO/AC */ .bloco1-contatos__url-link { color: #ffffffbf; text-decoration: none; border-bottom: 1px dashed rgba(255, 255, 255, 0.06); } .bloco1-contatos__url-link:hover, .bloco1-contatos__url-link:focus-visible { color: #ffffff; border-bottom-style: solid; outline: none; } /* Centralização e helpers */ .bloco1-contatos__centro { display: flex; justify-content: center; align-items: center; } /* Responsividade */ @media (max-width: 1100px) { .bloco1-contatos, .bloco1-contatos__desktop { padding: 80px 0; } .container, .bloco1-contatos__container { padding: 0 16px; } .contatos, .bloco1-contatos__imagem-contatos { max-height: 320px; } } @media (max-width: 680px) { .bloco1-contatos, .bloco1-contatos__desktop { padding: 48px 0; } .title, .bloco1-contatos__titulo { font-size: clamp(22px, 6.5vw, 28px); } .contatos, .bloco1-contatos__imagem-contatos { max-height: 240px; } .URL, .bloco1-contatos__url { font-size: 16px; } /* Ajustes da grade em telas pequenas: usa escala mobile definida em :root Mantém opacidade em 100% conforme solicitado, mas reduz escala para evitar recorte excessivo. */ .pj-agendamento-hero-frame::before, .bloco1-contatos::before { background-size: calc(var(--grade-scale-mobile) * 100%) calc(var(--grade-scale-mobile) * 100%); background-position: center top; opacity: var(--grade-opacity, 1); } } /* Acessibilidade e redução de movimento */ :focus-visible { outline: 3px solid rgba(74, 144, 226, 0.22); outline-offset: 4px; } @media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } } /* ========================== Glow vermelho atrás da imagem (.bloco1-contatos__imagem-contatos) - Pseudo-elemento criado em .bloco1-contatos__inner::before para: 1) ficar acima dos ::before do bloco (.pj-agendamento-hero-frame::before / .bloco1-contatos::before) 2) ficar atrás da imagem (.bloco1-contatos__imagem-contatos) - Use as variáveis no :root para ajustar cor, intensidade, tamanho e blur. ========================== */ /* Reafirmação do contexto para empilhamento (pode ser redundante, mas garante comportamento consistente) */ .bloco1-contatos, .pj-agendamento-hero-frame { isolation: isolate; } /* Pseudo-elemento que gera o glow (dentro de .bloco1-contatos__inner) */ .bloco1-contatos__inner::before { content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); /* centra exatamente no meio do .inner */ width: var(--glow-width-desktop); height: var(--glow-width-desktop); /* manter proporção quadrada -> círculo */ border-radius: 50%; /* gradiente radial para controle suave de transição */ background: radial-gradient( circle at center, rgba(var(--glow-rgb), var(--glow-center-opacity)) 0%, rgba(var(--glow-rgb), 0.60) 18%, rgba(var(--glow-rgb), 0.18) 38%, transparent 70% ); /* desfoque alto para espalhar o brilho */ filter: blur(var(--glow-blur-desktop)); -webkit-filter: blur(var(--glow-blur-desktop)); pointer-events: none; will-change: transform, opacity, filter; /* z-index: 0 dentro de .bloco1-contatos__inner (que tem z-index:1) -> isto faz com que o pseudo-elemento fique acima dos ::before do bloco (que estão em z-index:0 no contexto do ancestral) e abaixo do conteúdo do .inner (imagem com z-index:2). */ z-index: 0; opacity: 1; /* mix-blend-mode opcional para resultado mais natural sobre fundo escuro */ mix-blend-mode: screen; } /* Garantir que a imagem fique acima do glow */ .bloco1-contatos__imagem-contatos { position: relative; /* necessário para respeitar z-index */ z-index: 2; /* acima do ::before do .inner (0) e dos ::before do bloco (0) */ } /* Responsivo: reduz blur e tamanho em telas pequenas para evitar excesso de recorte */ @media (max-width: 680px) { .bloco1-contatos__inner::before { width: var(--glow-width-mobile); height: var(--glow-width-mobile); filter: blur(var(--glow-blur-mobile)); -webkit-filter: blur(var(--glow-blur-mobile)); /* leve ajuste vertical em mobile, remova se não quiser */ top: 52%; } /* mantém a imagem sobre o glow */ .bloco1-contatos__imagem-contatos { z-index: 2; } } /* ======= Dicas rápidas de ajuste (não obrigatórias) ======= - Para aumentar intensidade: aumentar --glow-center-opacity (máx 1). - Para mudar cor: altere --glow-rgb para outro RGB (ex.: 255,140,0). - Para um efeito ainda mais suave, aumente --glow-blur-desktop. - Se o mix-blend-mode causar sobreposição indesejada em áreas claras, remova a linha mix-blend-mode: screen. ========================================================== */