/* ===== Reset & base ===== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
/* Paleta - troque aqui para mudar as cores do site inteiro */
--color-bg: #0a0906;
--color-bg-alt: #15120b;
--color-primary: #f5f1e6;
--color-primary-dark: #0a0906;
--color-panel: #3a2f14;
--color-panel-dark: #0a0906;
--color-accent: #d4af37;
--color-accent-dark: #a8842a;
--color-text: #f5f1e6;
--color-text-muted: #d9cdb0;
--color-border: #2a2418;
/* titulos em Cinzel: letra de inscricao classica, combina com o preto e dourado e o tema biblico */
--font-heading: 'Cinzel', 'Times New Roman', serif;
--font-brand: 'Dancing Script', cursive;
--font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
--radius: 16px;
--shadow: 0 12px 32px rgba(0, 0, 0, 0.5);
--max-width: 1120px;
}
html { scroll-behavior: smooth; overflow-x: clip; }
/* Fundos fixos (background-attachment:fixed) custam caro no scroll do mobile e causam travamento;
no celular eles viram scroll normal, que é bem mais leve. */
@media (max-width: 900px) {
body { background-attachment: scroll, scroll, scroll; }
.page-ministerios--star .site-header,
.page-ministerios--star .section--star-bg,
.page-ministerios--star .site-footer {
background-attachment: scroll;
}
/* backdrop-filter (vidro desfocado) é um dos efeitos mais pesados pro mobile renderizar,
principalmente repetido em vários cards na tela ao mesmo tempo. Desliga no celular. */
* {
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
}
}
#inicio, #sobre, #ministerios, #eventos, #galeria, #contato, #lideranca, #duvidas {
scroll-margin-top: 84px;
}
body {
font-family: var(--font-body);
color: var(--color-text);
background-color: #0a0906;
overflow-x: clip;
background-image:
radial-gradient(rgba(212, 175, 55, 0.16) 1px, transparent 1px),
radial-gradient(rgba(245, 241, 230, 0.06) 1px, transparent 1px),
radial-gradient(circle at center, #241d0c 0%, #0a0906 100%);
background-size: 28px 28px, 28px 28px, 100% 100%;
background-position: 0 0, 14px 14px, center;
background-attachment: fixed, fixed, fixed;
line-height: 1.6;
}
/* Video fixo no fundo: fica parado (o video que roda por baixo) enquanto o conteudo rola por cima. */
.bg-video-wrap {
position: fixed;
inset: 0;
z-index: -2;
overflow: hidden;
pointer-events: none;
}
.bg-video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
pointer-events: none;
filter: contrast(1.08) saturate(1.1);
}
body::before {
content: '';
position: fixed;
inset: 0;
z-index: -1;
pointer-events: none;
background: linear-gradient(
to bottom,
rgba(10, 9, 6, 0.42) 0%,
rgba(10, 9, 6, 0.48) 40%,
rgba(10, 9, 6, 0.56) 70%,
rgba(10, 9, 6, 0.62) 100%
);
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
h1, h2, h3, h4 {
font-family: var(--font-heading);
color: var(--color-primary);
line-height: 1.25;
font-weight: 700;
}
.container {
max-width: var(--max-width);
margin: 0 auto;
padding: 0 24px;
}
.section {
padding: 110px 0;
}
@media (max-width: 720px) {
.section { padding: 72px 0; }
}
.section--alt {
position: relative;
overflow: hidden;
}
#ministerios {
border-bottom: none;
}
.section-eyebrow {
display: none;
}
.story-text p {
color: var(--color-text-muted);
font-size: 1.02rem;
line-height: 1.85;
margin-bottom: 18px;
}
.story-text p:last-child { margin-bottom: 0; }
.story-text p:first-of-type::first-letter {
font-family: var(--font-brand);
font-size: 3.6rem;
font-weight: 700;
color: var(--color-accent);
float: left;
line-height: 0.8;
margin: 6px 10px 0 0;
}
.section-title {
font-size: clamp(2.1rem, 3.6vw, 2.9rem);
margin-bottom: 26px;
text-transform: uppercase;
letter-spacing: 0.02em;
font-weight: 800;
display: block;
width: fit-content;
max-width: 100%;
margin-left: auto;
margin-right: auto;
text-align: center;
position: relative;
padding-bottom: 18px;
background: linear-gradient(120deg, var(--color-primary) 55%, #cbb87a 100%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.section-title::after {
content: '';
position: absolute;
left: 0;
right: 0;
margin: 0 auto;
bottom: 0;
width: 64px;
height: 3px;
border-radius: 2px;
background: linear-gradient(90deg, var(--color-accent-dark), var(--color-accent));
}
.section-lead {
color: var(--color-text-muted);
max-width: 640px;
margin-bottom: 40px;
font-size: 1.05rem;
}
.section-title--xl { font-size: clamp(2rem, 3.6vw, 2.9rem); max-width: 900px; }
.section-lead--xl { font-size: 1.25rem; max-width: 760px; }
.section-title--sm { font-size: clamp(1.3rem, 2.2vw, 1.7rem); margin-bottom: 14px; padding-bottom: 12px; }
/* Titulo com o divisor ornamentado (arte enviada, em dourado) embaixo, no lugar da linha padrao */
.section-title--divider { padding-bottom: 0; margin-bottom: 14px; }
.section-title--divider::after { display: none; }
.title-divider {
display: block;
width: min(520px, 80%);
height: auto;
margin: 0 auto 26px;
}
/* Moldura ornamentada (cantos + flor recortados da arte enviada, em dourado) ao redor de um titulo.
A linha entre as pecas e desenhada em CSS (nao faz parte da imagem), entao estica sozinha
para caber qualquer texto, sem esticar/distorcer o desenho. Posicao da linha (28% e 72.9% da
altura) foi medida pixel a pixel nas duas imagens, bem na costura onde elas encontram o vao -
e uma linha so, nao dupla; usar outra posicao faz ela ficar torta ao encostar nas pecas. */
.ornament-frame {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
margin: 0 auto 26px;
font-size: clamp(2.1rem, 3.6vw, 2.9rem); /* acompanha o .section-title */
--oh: 3.6em;
height: var(--oh);
padding: 0 2.6em;
}
.ornament-row {
position: absolute;
inset: 0;
display: flex;
align-items: center;
z-index: 0;
pointer-events: none;
}
.ornament-piece {
height: var(--oh);
width: auto;
display: block;
flex: 0 0 auto;
}
.ornament-cap--right { transform: scaleX(-1); }
.ornament-gap {
position: relative;
flex: 1 1 90px;
min-width: 24px;
height: var(--oh);
}
.ornament-gap::before {
content: '';
position: absolute;
left: 0;
right: 0;
top: 28.1%;
height: 2.9%;
background: #c9a53a;
box-shadow: 0 0 4px rgba(201, 165, 58, 0.4);
}
.ornament-gap::after {
content: '';
position: absolute;
left: 0;
right: 0;
top: 72.9%;
height: 2.9%;
background: #c9a53a;
box-shadow: 0 0 4px rgba(201, 165, 58, 0.4);
}
.ornament-frame .section-title.ornament-title {
position: relative;
z-index: 1;
font-size: 1em;
white-space: nowrap;
margin: 0;
padding: 0 0.2em;
}
.ornament-frame .section-title.ornament-title::after { display: none; }
@media (max-width: 640px) {
.ornament-frame { font-size: clamp(0.85rem, 4.6vw, 1.3rem); --oh: 3.2em; padding: 0 1.4em; }
.ornament-gap { flex-basis: 40px; min-width: 14px; }
}
.section-header {
text-align: center;
}
.section-header .section-lead {
margin-left: auto;
margin-right: auto;
}
/* ===== Buttons ===== */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 14px 30px;
border-radius: var(--radius);
font-weight: 600;
font-size: 0.85rem;
text-transform: uppercase;
letter-spacing: 0.08em;
border: 1.5px solid transparent;
cursor: pointer;
transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn--primary {
background: #c6a032;
color: #ffffff;
box-shadow: 0 6px 16px rgba(212, 175, 55, 0.15);
}
.btn--primary:hover { background: var(--color-accent-dark); }
.btn--dark {
background: #15120b;
color: var(--color-primary);
box-shadow: none;
}
.btn--dark:hover { background: #0a0906; }
.btn--dark.glow-ring-frame {
border-width: 2px;
background-image:
linear-gradient(#15120b, #15120b),
conic-gradient(from var(--border-angle),
var(--color-accent-dark) 0%,
var(--color-accent) 40%,
#fff6d9 50%,
var(--color-accent) 60%,
var(--color-accent-dark) 100%);
}
.btn--ghost {
background: transparent;
border-color: rgba(255,255,255,0.6);
color: #fff;
}
.btn--ghost:hover { background: rgba(255,255,255,0.12); }
.btn--outline {
background: transparent;
border-color: var(--color-primary);
color: var(--color-primary);
}
.btn--outline:hover { background: var(--color-primary); color: var(--color-bg); }
/* ===== Placeholder tag ===== */
.ph {
}
.placeholder-notice {
background: #fff4e0;
border-bottom: 1px solid #e9d3a3;
color: #6b4d17;
font-size: 0.85rem;
text-align: center;
padding: 8px 16px;
}
.placeholder-notice strong { font-weight: 700; }
/* ===== Header / Nav ===== */
.site-header {
position: sticky;
top: 0;
z-index: 100;
background: rgba(11, 11, 12, 0.85);
backdrop-filter: blur(8px);
}
.nav {
display: flex;
align-items: center;
justify-content: space-between;
padding: 16px 24px;
max-width: var(--max-width);
margin: 0 auto;
}
.nav-brand {
display: flex;
align-items: center;
gap: 10px;
font-family: var(--font-brand);
font-weight: 700;
font-size: 1.7rem;
color: var(--color-primary);
}
.nav-brand .logo-dot {
width: 12px;
height: 12px;
border-radius: 3px;
background: var(--color-accent);
transform: rotate(45deg);
flex-shrink: 0;
}
.nav-links {
display: flex;
align-items: center;
gap: 6px;
}
.nav-links a {
padding: 8px 4px;
margin: 0 8px;
font-weight: 600;
font-size: 0.78rem;
text-transform: uppercase;
letter-spacing: 0.09em;
color: var(--color-text);
border-bottom: 2px solid transparent;
transition: color 0.15s ease, border-color 0.15s ease;
}
.nav-links a:hover { color: var(--color-primary); border-color: rgba(255,255,255,0.35); }
.nav-links a.active {
color: var(--color-primary);
border-color: var(--color-accent);
}
.nav-cta { margin-left: 8px; }
.nav-toggle {
display: none;
flex-direction: column;
gap: 5px;
background: none;
border: none;
cursor: pointer;
padding: 6px;
}
.nav-toggle span {
width: 24px;
height: 2px;
background: var(--color-primary);
border-radius: 2px;
}
/* ===== Hero ===== */
.hero {
position: relative;
color: #fff;
padding: 140px 0 110px;
min-height: 74vh;
display: flex;
align-items: center;
overflow: hidden;
}
/* a foto fica fixa no body::before; aqui so escurece a esquerda para o texto ler bem.
A mascara faz o escurecido sumir aos poucos embaixo, sem deixar uma linha reta na emenda. */
.hero::before {
content: '';
position: absolute;
inset: 0;
pointer-events: none;
background: linear-gradient(100deg, rgba(5,5,6,0.6) 0%, rgba(5,5,6,0.35) 42%, rgba(5,5,6,0.08) 68%, transparent 80%);
-webkit-mask-image: linear-gradient(180deg, #000 45%, transparent 100%);
mask-image: linear-gradient(180deg, #000 45%, transparent 100%);
}
.hero .container {
position: relative;
z-index: 1;
display: grid;
gap: 28px;
max-width: 720px;
}
.hero-eyebrow {
text-transform: uppercase;
letter-spacing: 0.16em;
font-size: 0.8rem;
color: var(--color-accent);
font-weight: 700;
margin-bottom: -14px;
}
.hero h1 {
color: #fff;
font-size: clamp(2.1rem, 4.4vw, 3.4rem);
font-weight: 600;
letter-spacing: 0.01em;
line-height: 1.32;
text-shadow: 0 4px 26px rgba(0,0,0,0.55), 0 1px 4px rgba(0,0,0,0.4);
}
.hero h1 .hero-title-accent {
display: block;
font-family: var(--font-brand);
font-weight: 700;
font-size: 1.4em;
line-height: 1.1;
color: var(--color-accent);
margin: 2px 0;
}
.hero p {
color: rgba(255,255,255,0.88);
font-size: 1.1rem;
max-width: 560px;
text-shadow: 0 1px 10px rgba(0,0,0,0.5);
}
.hero-actions {
display: flex;
gap: 14px;
flex-wrap: wrap;
margin-top: 8px;
}
.hero-facts {
display: flex;
gap: 28px;
flex-wrap: wrap;
margin-top: 20px;
padding-top: 24px;
border-top: 1px solid rgba(255,255,255,0.18);
}
.hero-fact strong {
display: block;
font-family: var(--font-heading);
font-size: 1.15rem;
color: #fff;
}
.hero-fact span {
font-size: 0.85rem;
color: rgba(255,255,255,0.7);
}
/* ===== Fundo animado reutilizável (grade + chuva dourada + brilho pulsante) ===== */
.bg-fx {
position: absolute;
inset: 0;
z-index: 0;
overflow: hidden;
pointer-events: none;
background:
radial-gradient(ellipse 60% 55% at 18% 28%, rgba(96,68,24,0.32), transparent 60%),
radial-gradient(ellipse 65% 60% at 82% 72%, rgba(74,52,20,0.3), transparent 60%),
radial-gradient(ellipse 55% 55% at 50% 95%, rgba(44,30,12,0.4), transparent 60%),
linear-gradient(160deg, #1b150c 0%, #0a0906 100%);
box-shadow: inset 0 0 90px rgba(0,0,0,0.55);
}
.bg-fx .glow {
position: absolute;
left: 50%;
top: 28%;
width: 640px;
height: 640px;
margin-left: -320px;
margin-top: -320px;
border-radius: 50%;
background: radial-gradient(circle, rgba(212,175,55,0.5) 0%, rgba(212,175,55,0.14) 40%, transparent 70%);
animation: heroGlowPulse 3.2s ease-in-out infinite;
}
.bg-fx .drop {
position: absolute;
top: -2%;
width: 3px;
height: 3px;
border-radius: 50%;
background: #cbb87a;
box-shadow: 0 0 3px rgba(212,175,55,0.5);
animation: heroDrop linear infinite;
}
.bg-fx .grid {
position: absolute;
inset: auto 0 0 0;
height: 420px;
perspective: 420px;
overflow: hidden;
}
.bg-fx .grid-plane {
position: absolute;
inset: 0;
transform: rotateX(62deg);
transform-origin: bottom;
background-image:
repeating-linear-gradient(90deg, rgba(212,175,55,0.5) 0 2px, transparent 2px 90px),
repeating-linear-gradient(0deg, rgba(212,175,55,0.35) 0 2px, transparent 2px 60px);
}
.bg-fx .fade {
position: absolute;
inset: 0;
background: linear-gradient(to top, transparent 0%, var(--color-primary-dark) 55%);
}
@keyframes heroDrop {
0% { top: -2%; opacity: 0; }
5% { opacity: 1; }
95% { opacity: 1; }
100% { top: 102%; opacity: 0; }
}
@keyframes heroGlowPulse {
0%, 100% { opacity: 0.4; transform: scale(1); }
50% { opacity: 0.8; transform: scale(1.1); }
}
@media (max-width: 720px) {
.bg-fx .glow { width: 420px; height: 420px; margin-left: -210px; margin-top: -210px; }
}
.bg-fx--rain .grid,
.bg-fx--rain .fade {
display: none;
}
.below-hero-bg {
position: relative;
background: var(--color-primary-dark);
}
.below-hero-bg > section {
position: relative;
overflow: hidden;
}
.below-hero-bg > section > .container {
position: relative;
z-index: 1;
}
/* Pagina "Nossos Ministerios": troca o video de fundo por padrao de hexagramas (Estrela de Davi) so nessa secao */
.section--hex-bg {
position: relative;
overflow: hidden;
background-color: var(--color-primary-dark);
background-image: url("data:image/svg+xml;utf8,");
background-repeat: repeat;
background-size: 60px 60px;
}
.section--hex-bg > .container {
position: relative;
z-index: 1;
}
.page-ministerios .site-header {
background-color: var(--color-primary-dark);
background-image: url("data:image/svg+xml;utf8,");
background-repeat: repeat;
background-size: 60px 60px;
backdrop-filter: none;
}
/* Opção 26 — Estrela de Davi grande: imagem única fixa na tela, alinhada entre o topo e a seção */
.page-ministerios--star .site-header,
.page-ministerios--star .section--star-bg,
.page-ministerios--star .site-footer {
background-color: var(--color-primary-dark);
background-image:
url("data:image/svg+xml;utf8,"),
radial-gradient(circle, rgba(203,184,122,0.75) 1.2px, transparent 1.8px);
background-repeat: no-repeat, repeat;
background-size: 640px 640px, 48px 120px;
background-position: right -120px top -60px, 0 0;
background-attachment: fixed;
animation: starRainFall 7s linear infinite;
}
@keyframes starRainFall {
from { background-position: right -120px top -60px, 0 0; }
to { background-position: right -120px top -60px, 0 120px; }
}
.page-ministerios--star .site-header {
backdrop-filter: none;
}
.page-no-rain-bg .site-header,
.page-no-rain-bg .section--star-bg,
.page-no-rain-bg .site-footer {
background-image: url("data:image/svg+xml;utf8,");
background-size: 640px 640px;
background-position: right -120px top -60px;
animation: none;
}
.section--star-bg {
position: relative;
overflow: hidden;
}
.section--star-bg > .container {
position: relative;
z-index: 1;
}
/* small page header for internal pages */
.page-header {
position: relative;
overflow: hidden;
border-bottom: 1px solid var(--color-border);
color: #fff;
padding: 64px 0;
text-align: center;
}
.page-header--no-border {
border-bottom: none;
overflow: visible;
padding-bottom: 30px;
}
.page-header-title--low {
margin-top: -10px;
margin-bottom: 0;
}
.fire-title-img {
display: flex;
justify-content: center;
}
.fire-title-img img {
width: 100%;
max-width: 420px;
height: auto;
filter: drop-shadow(0 0 18px rgba(255, 120, 0, 0.5));
}
.fire-text {
background-image: linear-gradient(
0deg,
#ff2d00 0%,
#ff6a00 20%,
#ff9d00 38%,
#ffd500 50%,
#fff5b0 58%,
#ff9d00 68%,
#ff6a00 82%,
#ff2d00 100%
);
background-size: 100% 260%;
background-position: 0% 30%;
-webkit-background-clip: text;
background-clip: text;
color: transparent;
filter:
drop-shadow(0 0 6px rgba(255, 150, 0, 0.85))
drop-shadow(0 0 16px rgba(255, 90, 0, 0.65))
drop-shadow(0 0 30px rgba(255, 60, 0, 0.4));
animation: fire-text-flicker 1.6s ease-in-out infinite;
}
@keyframes fire-text-flicker {
0% { background-position: 0% 15%; }
25% { background-position: 0% 45%; }
50% { background-position: 0% 20%; }
75% { background-position: 0% 55%; }
100% { background-position: 0% 15%; }
}
.page-header h1 {
font-size: clamp(2.3rem, 4.6vw, 3.3rem);
text-transform: uppercase;
font-weight: 800;
letter-spacing: 0.02em;
display: inline-block;
position: relative;
padding-bottom: 18px;
background: linear-gradient(120deg, #ffffff 40%, var(--color-accent) 100%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
text-shadow: 0 2px 18px rgba(212, 175, 55, 0.25);
}
.page-header h1::after {
content: '';
position: absolute;
left: 0;
right: 0;
margin: 0 auto;
bottom: 0;
width: 64px;
height: 3px;
border-radius: 2px;
background: linear-gradient(90deg, var(--color-accent-dark), var(--color-accent));
}
.page-header p { color: rgba(255,255,255,0.8); max-width: 560px; margin: 12px auto 0; }
/* ===== Cards / Grids ===== */
.grid {
display: grid;
gap: 26px;
}
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }
.card {
background: linear-gradient(160deg, rgba(24, 24, 27, 0.92), rgba(12, 12, 14, 0.94));
border: 1px solid rgba(212, 175, 55, 0.16);
border-radius: var(--radius);
padding: 30px;
box-shadow: var(--shadow);
transition: transform 0.18s ease, box-shadow 0.18s ease;
display: flex;
flex-direction: column;
}
.card:hover { transform: translateY(-4px); box-shadow: 0 14px 30px rgba(212, 175, 55, 0.18); }
.card-icon {
width: 64px;
height: 64px;
border-radius: 14px;
background: rgba(212, 175, 55,0.15);
color: var(--color-accent-dark);
display: flex;
align-items: center;
justify-content: center;
font-size: 2rem;
margin-bottom: 16px;
}
.card h3 { font-size: 1.35rem; margin-bottom: 8px; }
.card p { color: var(--color-text-muted); font-size: 1.05rem; }
/* Schedule cards */
.schedule {
display: flex;
flex-direction: column;
align-items: center;
gap: 18px;
}
.schedule-item {
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-items: center;
text-align: left;
gap: 12px 18px;
width: 100%;
max-width: 780px;
min-height: 5cm;
padding: 20px 28px;
background: var(--color-bg-alt);
border: 1px solid var(--color-border);
border-radius: var(--radius);
overflow: hidden;
transition: transform 0.2s ease, border-color 0.2s ease;
}
.schedule-item:hover {
transform: translateY(-2px);
border-color: var(--color-accent);
}
.schedule-num {
flex-shrink: 0;
width: 52px;
height: 52px;
border-radius: 24px;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, var(--color-accent), var(--color-panel));
color: #ffffff;
font-family: var(--font-heading);
font-weight: 800;
font-size: 1.4rem;
}
.schedule-body { flex: 0 1 480px; min-width: 180px; }
.schedule-item .day { font-weight: 600; color: var(--color-primary); }
.schedule-item .time { color: var(--color-accent); font-weight: 700; }
.schedule-item .desc { color: var(--color-text-muted); font-size: 0.9rem; margin-top: 2px; }
.schedule-time-box {
flex-shrink: 0;
display: flex;
align-items: center;
gap: 8px;
padding: 10px 16px;
border: 1px solid var(--color-border);
border-radius: 10px;
background: var(--color-bg);
}
.schedule-time-icon { font-size: 0.95rem; }
@media (max-width: 600px) {
.schedule-item { flex-wrap: wrap; height: auto; padding: 18px 22px; }
.schedule-body { flex: 1 1 auto; }
.schedule-time-box { margin-left: 66px; }
}
/* Event card */
.event-card {
display: grid;
grid-template-columns: 96px 1fr;
gap: 20px;
background: var(--color-bg-alt);
border: 1px solid var(--color-border);
border-radius: var(--radius);
padding: 22px;
box-shadow: var(--shadow);
}
.event-date {
background: var(--color-accent);
color: #ffffff;
border-radius: var(--radius);
text-align: center;
padding: 12px 6px;
height: fit-content;
}
.event-date .num { font-family: var(--font-heading); font-size: 1.6rem; font-weight: 700; display: block; }
.event-date .mon { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.08em; opacity: 0.85; }
.event-card h3 { margin-bottom: 6px; font-size: 1.1rem; }
.event-meta { color: var(--color-accent); font-size: 0.85rem; font-weight: 600; margin-bottom: 8px; }
.event-card p { color: var(--color-text-muted); font-size: 0.92rem; }
/* Leadership */
.leader-card { text-align: center; display: flex; flex-direction: column; }
.leader-card-cta {
margin-top: auto;
align-self: center;
font-weight: 700;
background: transparent;
border-color: var(--color-accent-dark);
color: var(--color-accent);
padding: 11px 26px;
}
.leader-card-cta:hover {
background: rgba(212, 175, 55, 0.14);
border-color: var(--color-accent);
}
.card > :has(+ .leader-card-cta) {
margin-bottom: 28px;
}
.leader-card-cta span {
color: var(--color-accent);
}
.leader-photo {
width: 200px;
height: 200px;
border-radius: 50%;
margin: 0 auto 16px;
display: flex;
align-items: center;
justify-content: center;
color: var(--color-text-muted);
font-size: 0.75rem;
overflow: hidden;
}
.leader-photo img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
border-radius: 50%;
filter: sepia(22%) saturate(1.15) hue-rotate(-6deg) contrast(1.03);
}
.ministerio-entry {
display: flex;
align-items: center;
gap: 48px;
background: linear-gradient(160deg, rgba(20, 17, 10, 0.72), rgba(10, 9, 6, 0.8));
border: 1px solid rgba(212, 175, 55, 0.16);
border-radius: var(--radius);
padding: 32px;
}
.ministerio-entry--reverse { flex-direction: row-reverse; }
.ministerio-entry-media { flex-shrink: 0; }
.ministerio-entry-text { flex: 1; }
.ministerio-entry-text .section-title { text-align: left; margin: 0 0 12px; }
.ministerio-entry-text p { color: var(--color-text-muted); font-size: 1.05rem; }
@media (max-width: 720px) {
.ministerio-entry { flex-direction: column; text-align: center; gap: 24px; }
.ministerio-entry--reverse { flex-direction: column; }
.ministerio-entry-text .section-title { text-align: center; }
}
.grid--4 .card:nth-child(2) .leader-photo::after { animation-delay: -1.8s; }
.grid--4 .card:nth-child(3) .leader-photo::after { animation-delay: -3.5s; }
.grid--4 .card:nth-child(4) .leader-photo::after { animation-delay: -5.2s; }
.leader-card {
transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
background: transparent;
border: none;
box-shadow: none;
}
.leader-card:hover .leader-photo {
transform: scale(1.05);
}
.leader-photo {
transition: transform 0.3s ease;
}
.leader-card h3 { margin-bottom: 4px; }
.leader-role {
color: var(--color-accent);
font-size: 0.8rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.08em;
margin-bottom: 16px;
}
.leader-card-divider {
width: 36px;
height: 2px;
margin: 8px auto 16px;
background: linear-gradient(90deg, transparent, var(--color-accent), transparent);
}
.leader-card p {
position: relative;
z-index: 1;
font-family: var(--font-body);
font-style: italic;
font-size: 0.92rem;
line-height: 1.65;
color: var(--color-text-muted);
padding: 8px 6px 0;
}
.leader-card p::before {
content: "\201C";
position: absolute;
top: -18px;
left: 50%;
transform: translateX(-50%);
font-family: var(--font-heading);
font-style: normal;
font-weight: 800;
font-size: 3.2rem;
line-height: 1;
color: var(--color-accent);
opacity: 0.18;
z-index: -1;
pointer-events: none;
}
/* Values */
.values-grid { text-align: center; }
.ministerios-grid .card {
background: none;
border-color: transparent;
box-shadow: none;
}
/* Missao, Visao e Valores: faixa de fundo escuro com bordas em onda (em cima e embaixo),
descendo em diagonal como o degrau dos blocos */
.section:has(> .container > .values-grid) { position: relative; }
.section:has(> .container > .values-grid) {
--wave-h: 150px;
background:
url("data:image/svg+xml,") 0 -6px / 100% var(--wave-h) no-repeat,
url("data:image/svg+xml,") 0 calc(100% + 6px) / 100% var(--wave-h) no-repeat,
linear-gradient(rgba(14, 12, 12, 0.86), rgba(14, 12, 12, 0.86)) 0 calc(var(--wave-h) - 6px) / 100% calc(100% - 2 * var(--wave-h) + 12px) no-repeat;
}
/* mais espaco entre a linha de cima e a de baixo */
.section:has(> .container > .values-grid) { padding: 200px 0; }
@media (max-width: 720px) {
.section:has(> .container > .values-grid) { --wave-h: 56px; padding: 110px 0; }
}
/* Topo: versiculo de Atos 2:42 abaixo do titulo */
.hero-verse {
max-width: 560px;
margin: 18px 0 30px;
font-size: 1.05rem;
line-height: 1.7;
font-style: italic;
color: rgba(255, 255, 255, 0.9);
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9), 0 2px 12px rgba(0, 0, 0, 0.7);
}
.hero-verse cite {
display: block;
margin-top: 6px;
font-style: normal;
font-size: 0.82rem;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--color-accent);
}
/* Primeira vez: 4 passos do culto em linha do tempo.
Uma linha dourada liga os 4 marcos numerados; de cada marco desce um cartao de vidro
(icone, rotulo "Passo N", titulo e texto). Ao entrar na tela a linha se desenha e os
marcos acendem em sequencia (classes .will-animate / .is-inview postas pelo script.js) */
#primeira-vez { --glass: linear-gradient(155deg, rgba(212, 175, 55, 0.16) 0%, rgba(255, 255, 255, 0.05) 45%, rgba(212, 175, 55, 0.06) 100%); }
.culto-steps {
--step-gap: 22px;
--step-node: 54px;
--step-stem: 30px;
position: relative;
list-style: none;
margin: 0;
padding: 0;
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: var(--step-gap);
}
/* trilho apagado e, por cima, a linha dourada acesa (do centro do 1o marco ao centro do ultimo) */
.culto-steps::before,
.culto-steps::after {
content: '';
position: absolute;
top: calc(var(--step-node) / 2 - 1px);
left: calc((100% - 3 * var(--step-gap)) / 8);
right: calc((100% - 3 * var(--step-gap)) / 8);
height: 2px;
border-radius: 2px;
}
.culto-steps::before { background: rgba(212, 175, 55, 0.3); box-shadow: 0 0 0 3px rgba(10, 9, 6, 0.7); }
.culto-steps::after {
background: linear-gradient(90deg, var(--color-accent-dark), var(--color-accent) 30%, #fff1b8 50%, var(--color-accent) 70%, var(--color-accent-dark));
background-size: 220% 100%;
box-shadow: 0 0 16px rgba(212, 175, 55, 0.6);
transform-origin: left center;
animation: culto-line-shine 4.5s linear infinite;
}
@keyframes culto-line-shine {
from { background-position: 220% 0; }
to { background-position: 0 0; }
}
/* bolinha de luz que percorre a linha do primeiro marco ate o ultimo (passa por tras dos marcos) */
.culto-ball {
--ball: 14px;
--ball-from: calc((100% - 3 * var(--step-gap)) / 8 - var(--ball) / 2);
position: absolute;
z-index: 0;
top: calc(var(--step-node) / 2 - var(--ball) / 2);
left: var(--ball-from);
width: var(--ball);
height: var(--ball);
border-radius: 50%;
background: radial-gradient(circle, #fff 0%, #fff1b8 35%, var(--color-accent) 75%);
box-shadow: 0 0 10px 2px rgba(255, 241, 184, 0.9), 0 0 26px 8px rgba(212, 175, 55, 0.65);
pointer-events: none;
animation: culto-ball-run 7s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}
@keyframes culto-ball-run {
0% { left: var(--ball-from); opacity: 0; }
6% { opacity: 1; }
88% { left: calc(100% - var(--ball-from) - var(--ball)); opacity: 1; }
100% { left: calc(100% - var(--ball-from) - var(--ball)); opacity: 0; }
}
.culto-steps.will-animate .culto-ball { display: none; }
.culto-step {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
min-width: 0;
}
/* haste que desce do marco ate o cartao */
.culto-step::before {
content: '';
position: absolute;
top: var(--step-node);
left: calc(50% - 1px);
width: 2px;
height: var(--step-stem);
background: linear-gradient(180deg, var(--color-accent), rgba(212, 175, 55, 0.25));
}
.culto-step-node {
position: relative;
z-index: 1;
flex: none;
display: flex;
align-items: center;
justify-content: center;
width: var(--step-node);
height: var(--step-node);
margin-bottom: var(--step-stem);
border-radius: 50%;
font-family: 'Playfair Display', Georgia, serif;
font-size: 1.35rem;
font-weight: 700;
line-height: 1;
color: #1a1408;
background: linear-gradient(145deg, #f7e08f, var(--color-accent) 55%, var(--color-accent-dark));
box-shadow: 0 0 0 6px #0a0906, 0 0 0 7px rgba(212, 175, 55, 0.55), 0 0 30px rgba(212, 175, 55, 0.55);
transition: transform 0.35s ease, box-shadow 0.35s ease, background 0.5s ease, color 0.5s ease;
}
/* onda que pulsa em volta do marco */
.culto-step-node::after {
content: '';
position: absolute;
inset: -7px;
border-radius: 50%;
border: 1px solid rgba(243, 214, 120, 0.7);
opacity: 0;
animation: culto-node-pulse 3.2s ease-out infinite;
}
.culto-step:nth-child(2) .culto-step-node::after { animation-delay: 0.8s; }
.culto-step:nth-child(3) .culto-step-node::after { animation-delay: 1.6s; }
.culto-step:nth-child(4) .culto-step-node::after { animation-delay: 2.4s; }
@keyframes culto-node-pulse {
0% { transform: scale(0.9); opacity: 0.9; }
70%, 100% { transform: scale(1.7); opacity: 0; }
}
.culto-step-card {
position: relative;
flex: 1;
width: 100%;
overflow: hidden;
padding: 34px 24px 30px;
border-radius: 22px;
text-align: center;
background: linear-gradient(165deg, rgba(38, 30, 12, 0.94) 0%, rgba(14, 12, 7, 0.93) 48%, rgba(10, 9, 6, 0.95) 100%);
-webkit-backdrop-filter: blur(16px);
backdrop-filter: blur(16px);
border: 1px solid rgba(212, 175, 55, 0.5);
box-shadow: inset 0 1px 0 rgba(255, 241, 184, 0.18), inset 0 0 0 5px rgba(10, 9, 6, 0.55), inset 0 0 0 6px rgba(212, 175, 55, 0.16), 0 24px 50px rgba(0, 0, 0, 0.55);
transition: transform 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease;
}
/* filete dourado no topo do cartao, onde a haste encosta */
.culto-step-card::before {
content: '';
position: absolute;
left: 22px;
right: 22px;
top: 0;
height: 2px;
background: linear-gradient(90deg, transparent, var(--color-accent), transparent);
}
/* luz dourada que acompanha o cartao ao passar o mouse */
.culto-step-card::after {
content: '';
position: absolute;
left: 50%;
top: -70px;
width: 180px;
height: 140px;
transform: translateX(-50%);
background: radial-gradient(closest-side, rgba(243, 214, 120, 0.3), transparent);
opacity: 0.55;
pointer-events: none;
transition: opacity 0.35s ease;
}
/* Passo 1 (Você chega): porta aberta em segundo plano, bem sutil */
.culto-step:nth-child(1) .culto-step-card {
background-image:
url("data:image/svg+xml;utf8,"),
linear-gradient(165deg, rgba(38, 30, 12, 0.94) 0%, rgba(14, 12, 7, 0.93) 48%, rgba(10, 9, 6, 0.95) 100%);
background-repeat: no-repeat, no-repeat;
background-size: 190px auto, cover;
background-position: right -2px bottom -10px, center;
}
/* Passo 2 (Louvor): notas musicais em segundo plano, bem sutil */
.culto-step:nth-child(2) .culto-step-card {
background-image:
url("data:image/svg+xml;utf8,"),
linear-gradient(165deg, rgba(38, 30, 12, 0.94) 0%, rgba(14, 12, 7, 0.93) 48%, rgba(10, 9, 6, 0.95) 100%);
background-repeat: no-repeat, no-repeat;
background-size: 190px auto, cover;
background-position: right -45px bottom -14px, center;
}
/* Passo 3 (A Palavra): livro aberto em segundo plano, bem sutil */
.culto-step:nth-child(3) .culto-step-card {
background-image:
url("data:image/svg+xml;utf8,"),
linear-gradient(165deg, rgba(38, 30, 12, 0.94) 0%, rgba(14, 12, 7, 0.93) 48%, rgba(10, 9, 6, 0.95) 100%);
background-repeat: no-repeat, no-repeat;
background-size: 150px auto, cover;
background-position: right 6px bottom 4px, center;
}
/* Passo 4 (Comunhão à mesa): cálice e pão em segundo plano, bem sutil */
.culto-step:nth-child(4) .culto-step-card {
background-image:
url("data:image/svg+xml;utf8,"),
linear-gradient(165deg, rgba(38, 30, 12, 0.94) 0%, rgba(14, 12, 7, 0.93) 48%, rgba(10, 9, 6, 0.95) 100%);
background-repeat: no-repeat, no-repeat;
background-size: 190px auto, cover;
background-position: right -45px bottom -14px, center;
}
.culto-step:hover .culto-step-card {
transform: translateY(-6px);
border-color: rgba(243, 214, 120, 0.85);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), 0 26px 54px rgba(0, 0, 0, 0.45), 0 0 36px rgba(212, 175, 55, 0.25);
}
.culto-step:hover .culto-step-card::after { opacity: 1; }
.culto-step:hover .culto-step-node {
transform: scale(1.12);
box-shadow: 0 0 0 6px #0a0906, 0 0 0 7px rgba(243, 214, 120, 0.9), 0 0 44px rgba(212, 175, 55, 0.85);
}
.culto-step-icon {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
width: 58px;
height: 58px;
margin-bottom: 18px;
border-radius: 50%;
color: #f3d678;
background: radial-gradient(circle at 30% 25%, rgba(243, 214, 120, 0.28), rgba(212, 175, 55, 0.06) 70%);
border: 1px solid rgba(212, 175, 55, 0.6);
box-shadow: 0 0 22px rgba(212, 175, 55, 0.18);
}
.culto-step-icon svg {
width: 26px;
height: 26px;
fill: none;
stroke: currentColor;
stroke-width: 1.8;
stroke-linecap: round;
stroke-linejoin: round;
}
.culto-step-label {
position: relative;
display: block;
margin-bottom: 8px;
font-family: var(--font-body);
font-size: 0.68rem;
font-weight: 600;
letter-spacing: 0.34em;
text-transform: uppercase;
color: var(--color-accent);
}
.culto-step h3 {
position: relative;
margin: 0 0 14px;
padding-bottom: 14px;
font-family: 'Playfair Display', Georgia, serif;
font-size: 1.35rem;
font-weight: 600;
line-height: 1.2;
letter-spacing: 0.01em;
color: #f7e7b0;
}
.culto-step h3::after {
content: '';
position: absolute;
left: 50%;
bottom: 0;
width: 34px;
height: 1px;
transform: translateX(-50%);
background: linear-gradient(90deg, transparent, var(--color-accent), transparent);
}
.culto-step .culto-step-card p {
font-size: 0.98rem;
font-weight: 400;
line-height: 1.75;
color: rgba(245, 241, 230, 0.84);
text-shadow: none;
}
/* entrada: a linha se desenha e marcos/cartoes aparecem um depois do outro */
.culto-steps.will-animate::after { transform: scaleX(0); transition: transform 1.8s cubic-bezier(0.65, 0, 0.35, 1); }
.culto-steps.will-animate.is-inview::after { transform: scaleX(1); }
.culto-steps.will-animate .culto-step-node,
.culto-steps.will-animate .culto-step::before,
.culto-steps.will-animate .culto-step-card { opacity: 0; }
.culto-steps.will-animate .culto-step-node { transform: scale(0.4); }
.culto-steps.will-animate .culto-step-card { transform: translateY(26px); }
.culto-steps.will-animate.is-inview .culto-step-node { animation: culto-node-in 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) both; }
.culto-steps.will-animate.is-inview .culto-step::before { animation: culto-fade-in 0.4s ease both; }
.culto-steps.will-animate.is-inview .culto-step-card { animation: culto-card-in 0.7s cubic-bezier(0.22, 1, 0.36, 1) both; }
.culto-steps.is-inview .culto-step:nth-child(1) > * , .culto-steps.is-inview .culto-step:nth-child(1)::before { animation-delay: 0.1s; }
.culto-steps.is-inview .culto-step:nth-child(2) > * , .culto-steps.is-inview .culto-step:nth-child(2)::before { animation-delay: 0.6s; }
.culto-steps.is-inview .culto-step:nth-child(3) > * , .culto-steps.is-inview .culto-step:nth-child(3)::before { animation-delay: 1.1s; }
.culto-steps.is-inview .culto-step:nth-child(4) > * , .culto-steps.is-inview .culto-step:nth-child(4)::before { animation-delay: 1.6s; }
.culto-steps.is-inview .culto-step:nth-child(1) .culto-step-card { animation-delay: 0.3s; }
.culto-steps.is-inview .culto-step:nth-child(2) .culto-step-card { animation-delay: 0.8s; }
.culto-steps.is-inview .culto-step:nth-child(3) .culto-step-card { animation-delay: 1.3s; }
.culto-steps.is-inview .culto-step:nth-child(4) .culto-step-card { animation-delay: 1.8s; }
@keyframes culto-node-in { from { opacity: 0; transform: scale(0.4); } to { opacity: 1; transform: scale(1); } }
@keyframes culto-card-in { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: translateY(0); } }
@keyframes culto-fade-in { from { opacity: 0; } to { opacity: 1; } }
/* depois da entrada o script tira .will-animate, para o efeito do mouse voltar a funcionar */
.culto-step p,
.culto-faq p {
position: relative;
margin: 0;
color: rgba(255, 255, 255, 0.92);
font-weight: 500;
line-height: 1.7;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}
/* Duvidas comuns: um painel escuro com moldura dourada (mesmo visual dos cartoes dos passos).
Chamado a esquerda; a direita as perguntas numeradas, separadas por filetes dourados */
.culto-faq {
position: relative;
display: grid;
grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.3fr);
gap: 56px;
align-items: start;
margin-top: 90px;
padding: 52px 52px 44px;
border-radius: 28px;
background: linear-gradient(165deg, rgba(38, 30, 12, 0.94) 0%, rgba(14, 12, 7, 0.94) 45%, rgba(10, 9, 6, 0.96) 100%);
-webkit-backdrop-filter: blur(16px);
backdrop-filter: blur(16px);
border: 1px solid rgba(212, 175, 55, 0.5);
box-shadow: inset 0 1px 0 rgba(255, 241, 184, 0.18), inset 0 0 0 6px rgba(10, 9, 6, 0.55), inset 0 0 0 7px rgba(212, 175, 55, 0.16), 0 30px 70px rgba(0, 0, 0, 0.6);
}
/* filete dourado no topo do painel */
.culto-faq::before {
content: '';
position: absolute;
left: 15%;
right: 15%;
top: 0;
height: 2px;
background: linear-gradient(90deg, transparent, var(--color-accent), transparent);
}
.culto-faq-intro { position: sticky; top: 110px; }
.culto-faq-intro .section-eyebrow { letter-spacing: 0.34em; }
.culto-faq-intro h3 {
margin: 12px 0 18px;
padding-bottom: 18px;
position: relative;
font-family: 'Playfair Display', Georgia, serif;
font-size: clamp(1.8rem, 1.3rem + 1.4vw, 2.5rem);
font-weight: 600;
line-height: 1.18;
color: #f7e7b0;
}
.culto-faq-intro h3::after {
content: '';
position: absolute;
left: 0;
bottom: 0;
width: 48px;
height: 2px;
background: linear-gradient(90deg, var(--color-accent), transparent);
}
.culto-faq .culto-faq-intro p {
margin-bottom: 28px;
font-size: 1rem;
font-weight: 400;
line-height: 1.75;
color: rgba(245, 241, 230, 0.84);
text-shadow: none;
}
.culto-faq-list { counter-reset: faq; display: flex; flex-direction: column; }
.culto-faq-list details {
counter-increment: faq;
border-bottom: 1px solid rgba(212, 175, 55, 0.22);
}
.culto-faq-list details:first-child { border-top: 1px solid rgba(212, 175, 55, 0.22); }
.culto-faq-list summary {
list-style: none;
cursor: pointer;
display: flex;
align-items: center;
gap: 18px;
padding: 20px 4px;
font-family: 'Playfair Display', Georgia, serif;
font-size: 1.18rem;
font-weight: 600;
line-height: 1.3;
color: #fff;
transition: color 0.3s ease, padding-left 0.3s ease;
}
.culto-faq-list summary::-webkit-details-marker { display: none; }
/* numero da pergunta (01, 02...) */
.culto-faq-list summary::before {
content: counter(faq, decimal-leading-zero);
flex: none;
width: 30px;
font-size: 0.95rem;
font-weight: 700;
letter-spacing: 0.04em;
color: var(--color-accent);
opacity: 0.75;
}
.culto-faq-list summary::after {
content: '+';
flex: none;
display: inline-flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
margin-left: auto;
border-radius: 50%;
border: 1px solid rgba(212, 175, 55, 0.6);
font-family: var(--font-body);
font-size: 1.2rem;
font-weight: 400;
line-height: 1;
color: var(--color-accent);
transition: transform 0.35s ease, background 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
}
.culto-faq-list summary:hover { color: #f7e7b0; padding-left: 10px; }
.culto-faq-list summary:hover::after { box-shadow: 0 0 18px rgba(212, 175, 55, 0.45); }
.culto-faq-list details[open] summary { color: #f7e7b0; }
.culto-faq-list details[open] summary::before { opacity: 1; }
.culto-faq-list details[open] summary::after {
transform: rotate(45deg);
background: linear-gradient(145deg, #f7e08f, var(--color-accent) 55%, var(--color-accent-dark));
border-color: transparent;
color: #1a1408;
}
.culto-faq .culto-faq-list details p {
margin: 0 46px 22px 52px;
padding-left: 16px;
border-left: 2px solid rgba(212, 175, 55, 0.6);
font-size: 1rem;
font-weight: 400;
line-height: 1.75;
color: rgba(245, 241, 230, 0.86);
text-shadow: none;
animation: culto-faq-open 0.45s ease both;
}
@keyframes culto-faq-open {
from { opacity: 0; transform: translateY(-8px); }
to { opacity: 1; transform: translateY(0); }
}
.culto-faq-list details a { color: var(--color-accent); font-weight: 600; text-decoration: none; }
.culto-faq-list details a:hover { color: #f7e7b0; }
@media (max-width: 1000px) {
.culto-faq { grid-template-columns: 1fr; gap: 30px; margin-top: 64px; padding: 40px 32px 30px; }
.culto-faq-intro { position: static; text-align: center; }
.culto-faq-intro h3::after { left: 50%; transform: translateX(-50%); background: linear-gradient(90deg, transparent, var(--color-accent), transparent); }
}
/* celular e tablet: linha do tempo vertical, marcos a esquerda e cartoes a direita */
@media (max-width: 900px) {
.culto-steps { --step-node: 46px; --step-stem: 16px; grid-template-columns: 1fr; gap: 20px; }
/* no lugar da linha unica, cada passo desenha o trecho ate o marco seguinte */
.culto-steps::before,
.culto-steps::after { display: none; }
.culto-step:not(:nth-child(4))::after {
content: '';
position: absolute;
left: calc(var(--step-node) / 2 - 1px);
top: var(--step-node);
bottom: -20px;
width: 2px;
background: linear-gradient(180deg, var(--color-accent), var(--color-accent-dark));
box-shadow: 0 0 12px rgba(212, 175, 55, 0.5);
}
/* a bolinha desce pela linha; --ball-end (topo do ultimo passo) vem do script.js */
.culto-ball {
left: calc(var(--step-node) / 2 - var(--ball) / 2);
animation-name: culto-ball-run-v;
}
.culto-step { flex-direction: row; align-items: flex-start; }
.culto-step::before {
top: calc(var(--step-node) / 2 - 1px);
left: var(--step-node);
width: var(--step-stem);
height: 2px;
background: linear-gradient(90deg, var(--color-accent), rgba(212, 175, 55, 0.25));
}
.culto-step-node { margin: 0 var(--step-stem) 0 0; font-size: 1.05rem; }
.culto-step-card { padding: 24px 22px; text-align: left; }
.culto-step h3 { font-size: 1.4rem; }
.culto-step h3::after { left: 0; transform: none; background: linear-gradient(90deg, var(--color-accent), transparent); }
.culto-step-card::before { left: 0; right: auto; top: 16px; bottom: 16px; width: 2px; height: auto; background: linear-gradient(180deg, transparent, var(--color-accent), transparent); }
.culto-step-card::after { left: 0; top: 50%; transform: translate(-50%, -50%); }
.culto-step-icon { width: 48px; height: 48px; margin-bottom: 14px; }
}
@keyframes culto-ball-run-v {
0% { top: calc(var(--step-node) / 2 - var(--ball) / 2); opacity: 0; }
6% { opacity: 1; }
88% { top: calc(var(--ball-end, 75%) + var(--step-node) / 2 - var(--ball) / 2); opacity: 1; }
100% { top: calc(var(--ball-end, 75%) + var(--step-node) / 2 - var(--ball) / 2); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
.culto-ball { display: none; }
.culto-steps::after, .culto-step-node::after { animation: none; }
}
@media (max-width: 560px) {
.culto-faq { padding: 32px 20px 22px; border-radius: 22px; }
.culto-faq-list summary { gap: 12px; padding: 18px 0; font-size: 1.06rem; }
.culto-faq-list summary::before { width: 24px; font-size: 0.85rem; }
.culto-faq .culto-faq-list details p { margin: 0 0 20px 36px; }
.hero-verse { font-size: 0.95rem; }
}
/* Missao, Visao e Valores: mesmo tamanho e espacamento de linha do texto da historia */
.values-grid .card p { font-size: 1.02rem; line-height: 1.85; }
/* Missao um pouco mais pra cima e Valores um pouco mais pra baixo (degrau),
so quando os tres ficam lado a lado. Usa translate pra nao brigar com a animacao de entrada. */
@media (min-width: 901px) {
.values-grid { padding: 50px 0; }
.values-grid > .card:nth-child(1) { translate: 0 -50px; }
.values-grid > .card:nth-child(3) { translate: 0 50px; }
}
/* Nossa historia (secao Sobre): sem caixa; letras brancas, mais firmes e com sombra
suave em volta pra destacar do video de fundo */
#sobre .story-text p,
.values-grid .card p {
color: #fff;
font-weight: 500;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.95), 0 2px 10px rgba(0, 0, 0, 0.85), 0 0 24px rgba(0, 0, 0, 0.6);
}
/* Missao, Visao e Valores: fundo escuro translucido pra leitura em cima do video */
.values-grid .card {
/* sem fundo proprio: os blocos ficam da mesma cor da faixa escura atras deles */
background: none;
border: 1px solid transparent;
box-shadow: none;
padding: 32px 28px;
}
/* Ministerios (pagina inicial): cartoes escuros com moldura dourada, no mesmo visual dos passos
do culto. Numero cursivo dourado, titulo serifado com filete e texto. 3 por linha, o ultimo centralizado */
.ministerio-list {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 22px;
max-width: 1100px;
margin: 0 auto;
}
.ministerio-list-item {
position: relative;
flex: 0 1 calc((100% - 44px) / 3);
min-width: 0;
overflow: hidden;
padding: 28px 26px 30px;
border-radius: 22px;
background: linear-gradient(165deg, rgba(38, 30, 12, 0.94) 0%, rgba(14, 12, 7, 0.93) 48%, rgba(10, 9, 6, 0.95) 100%);
-webkit-backdrop-filter: blur(16px);
backdrop-filter: blur(16px);
border: 1px solid rgba(212, 175, 55, 0.5);
box-shadow: inset 0 1px 0 rgba(255, 241, 184, 0.18), inset 0 0 0 5px rgba(10, 9, 6, 0.55), inset 0 0 0 6px rgba(212, 175, 55, 0.16), 0 24px 50px rgba(0, 0, 0, 0.55);
transition: transform 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease;
}
/* filete dourado no topo e luz dourada no canto do numero */
.ministerio-list-item::before {
content: '';
position: absolute;
left: 22px;
right: 22px;
top: 0;
height: 2px;
background: linear-gradient(90deg, transparent, var(--color-accent), transparent);
}
.ministerio-list-item::after {
content: '';
position: absolute;
left: -40px;
top: -50px;
width: 190px;
height: 160px;
background: radial-gradient(closest-side, rgba(243, 214, 120, 0.26), transparent);
opacity: 0.6;
pointer-events: none;
transition: opacity 0.35s ease;
}
.ministerio-list-item:hover {
transform: translateY(-6px);
border-color: rgba(243, 214, 120, 0.85);
box-shadow: inset 0 1px 0 rgba(255, 241, 184, 0.2), inset 0 0 0 5px rgba(10, 9, 6, 0.55), inset 0 0 0 6px rgba(212, 175, 55, 0.22), 0 28px 56px rgba(0, 0, 0, 0.6), 0 0 36px rgba(212, 175, 55, 0.25);
}
.ministerio-list-item:hover::after { opacity: 1; }
/* Projeto Sarah (01): símbolo feminino, bem sutil */
.ministerio-list-item:nth-child(1) {
background-image:
url("data:image/svg+xml;utf8,"),
linear-gradient(165deg, rgba(38, 30, 12, 0.94) 0%, rgba(14, 12, 7, 0.93) 48%, rgba(10, 9, 6, 0.95) 100%);
background-repeat: no-repeat, no-repeat;
background-size: 100px auto, cover;
background-position: right 10px bottom 10px, center;
}
/* Culto dos Homens (02): símbolo masculino, bem sutil */
.ministerio-list-item:nth-child(2) {
background-image:
url("data:image/svg+xml;utf8,"),
linear-gradient(165deg, rgba(38, 30, 12, 0.94) 0%, rgba(14, 12, 7, 0.93) 48%, rgba(10, 9, 6, 0.95) 100%);
background-repeat: no-repeat, no-repeat;
background-size: 100px auto, cover;
background-position: right 10px bottom 10px, center;
}
/* Terça da Torá (03): rolo da Torá, bem sutil */
.ministerio-list-item:nth-child(3) {
background-image:
url("data:image/svg+xml;utf8,"),
linear-gradient(165deg, rgba(38, 30, 12, 0.94) 0%, rgba(14, 12, 7, 0.93) 48%, rgba(10, 9, 6, 0.95) 100%);
background-repeat: no-repeat, no-repeat;
background-size: 190px auto, cover;
background-position: right -5px bottom -6px, center;
}
/* Sexta do Shabat (04): velas do Shabat, bem sutil */
.ministerio-list-item:nth-child(4) {
background-image:
url("data:image/svg+xml;utf8,"),
linear-gradient(165deg, rgba(38, 30, 12, 0.94) 0%, rgba(14, 12, 7, 0.93) 48%, rgba(10, 9, 6, 0.95) 100%);
background-repeat: no-repeat, no-repeat;
background-size: 215px auto, cover;
background-position: right -8px bottom -10px, center;
}
/* Louvor e Adoração (05): notas musicais, bem sutil */
.ministerio-list-item:nth-child(5) {
background-image:
url("data:image/svg+xml;utf8,"),
linear-gradient(165deg, rgba(38, 30, 12, 0.94) 0%, rgba(14, 12, 7, 0.93) 48%, rgba(10, 9, 6, 0.95) 100%);
background-repeat: no-repeat, no-repeat;
background-size: 165px auto, cover;
background-position: right -5px bottom -8px, center;
}
/* Jovens (07): montanha com trilha, bem sutil */
.ministerio-list-item:nth-child(7) {
background-image:
url("data:image/svg+xml;utf8,"),
linear-gradient(165deg, rgba(38, 30, 12, 0.94) 0%, rgba(14, 12, 7, 0.93) 48%, rgba(10, 9, 6, 0.95) 100%);
background-repeat: no-repeat, no-repeat;
background-size: 180px auto, cover;
background-position: right -5px bottom -6px, center;
}
/* Ministério Infantil (06): família em silhueta, bem sutil */
.ministerio-list-item:nth-child(6) {
background-image:
url("data:image/svg+xml;utf8,"),
linear-gradient(165deg, rgba(38, 30, 12, 0.94) 0%, rgba(14, 12, 7, 0.93) 48%, rgba(10, 9, 6, 0.95) 100%);
background-repeat: no-repeat, no-repeat;
background-size: 185px auto, cover;
background-position: right -10px bottom -10px, center;
}
.ministerio-list-num {
position: relative;
z-index: 1;
display: block;
margin-bottom: 14px;
font-family: var(--font-brand);
font-size: 3rem;
line-height: 1;
color: var(--color-accent);
text-shadow: 0 0 22px rgba(212, 175, 55, 0.35);
}
.ministerio-list-item h3 {
position: relative;
margin: 0 0 14px;
padding-bottom: 14px;
font-family: 'Playfair Display', Georgia, serif;
font-size: 1.4rem;
font-weight: 600;
line-height: 1.2;
color: #f7e7b0;
}
.ministerio-list-item h3::after {
content: '';
position: absolute;
left: 0;
bottom: 0;
width: 38px;
height: 1px;
background: linear-gradient(90deg, var(--color-accent), transparent);
}
.ministerio-list-item p {
margin: 0;
font-size: 0.98rem;
font-weight: 400;
line-height: 1.75;
color: rgba(245, 241, 230, 0.84);
}
@media (max-width: 960px) {
.ministerio-list-item { flex-basis: calc((100% - 22px) / 2); }
}
/* celular: um por linha, numero a esquerda e texto a direita */
@media (max-width: 620px) {
.ministerio-list { gap: 14px; }
.ministerio-list-item {
flex-basis: 100%;
display: flex;
align-items: flex-start;
gap: 18px;
padding: 22px 20px 24px;
}
.ministerio-list-num { flex: none; min-width: 50px; margin: 0; font-size: 2.5rem; }
.ministerio-list-item h3 { font-size: 1.28rem; margin-bottom: 12px; padding-bottom: 12px; }
}
/* Map placeholder */
.map-placeholder {
width: 100%;
aspect-ratio: 16 / 7;
background: repeating-linear-gradient(135deg, #1c1c20, #1c1c20 12px, #232327 12px, #232327 24px);
border: 1px solid var(--color-border);
border-radius: var(--radius);
display: flex;
align-items: center;
justify-content: center;
color: var(--color-text-muted);
font-size: 0.9rem;
text-align: center;
padding: 20px;
}
.map-link {
display: flex;
align-items: center;
gap: 16px;
width: 100%;
padding: 20px;
background: #09090b;
border: 1px solid rgba(212, 175, 55, 0.22);
border-radius: var(--radius);
cursor: pointer;
transition: border-color 0.2s ease, transform 0.2s ease;
}
.map-link:hover {
border-color: var(--color-accent);
transform: translateY(-2px);
}
.map-link-icon {
font-size: 1.6rem;
flex-shrink: 0;
}
.map-link-text {
display: flex;
flex-direction: column;
gap: 2px;
flex: 1;
}
.map-link-text strong {
color: var(--color-primary);
font-size: 0.98rem;
}
.map-link-text span {
color: var(--color-text-muted);
font-size: 0.85rem;
}
.map-link-cta {
color: var(--color-accent);
font-weight: 600;
font-size: 0.9rem;
white-space: nowrap;
flex-shrink: 0;
}
.about-photo {
width: 100%;
aspect-ratio: 4 / 3;
border-radius: var(--radius);
overflow: hidden;
}
.about-photo img {
width: 100%;
height: 100%;
border-radius: 4px;
object-fit: cover;
}
/* Contact */
.contact-grid {
display: grid;
grid-template-columns: 1fr;
gap: 48px;
align-items: start;
max-width: 640px;
margin: 0 auto;
}
.contact-info-panel {
background: var(--color-bg-alt);
border: 1px solid var(--color-border);
border-radius: var(--radius);
padding: 32px;
box-shadow: var(--shadow);
}
.contact-info-item {
display: flex;
gap: 14px;
margin-bottom: 22px;
}
.contact-info-item .icon {
width: 40px;
height: 40px;
border-radius: var(--radius);
background: rgba(255,255,255,0.06);
color: var(--color-primary);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.contact-info-item h4 { font-size: 0.95rem; margin-bottom: 3px; }
.contact-info-item p, .contact-info-item a { color: var(--color-text-muted); font-size: 0.92rem; }
.social-row {
display: flex;
gap: 10px;
margin-top: 20px;
}
.social-row a {
width: 40px;
height: 40px;
border-radius: 50%;
background: transparent;
border: 1px solid var(--color-border);
color: var(--color-primary);
display: flex;
align-items: center;
justify-content: center;
font-size: 0.85rem;
transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.social-row a:hover { background: var(--color-accent); border-color: var(--color-accent); color: #ffffff; }
.form-card {
background: var(--color-bg-alt);
border: 1px solid var(--color-border);
border-radius: var(--radius);
padding: 32px;
box-shadow: var(--shadow);
}
.form-row { margin-bottom: 18px; }
.form-row label {
display: block;
font-size: 0.85rem;
font-weight: 600;
color: var(--color-primary);
margin-bottom: 6px;
}
.form-row input,
.form-row textarea {
width: 100%;
padding: 12px 14px;
border: 1px solid rgba(212, 175, 55, 0.18);
border-radius: 8px;
font-family: var(--font-body);
font-size: 0.95rem;
background: #09090b;
}
.form-row input:focus,
.form-row textarea:focus {
outline: none;
border-color: var(--color-accent);
}
.form-note {
font-size: 0.8rem;
color: var(--color-text-muted);
margin-top: 10px;
}
/* CTA band */
.cta-band {
color: #fff;
padding: 56px 0;
text-align: center;
}
.cta-band h2 { color: #fff; margin-bottom: 12px; }
.cta-band p { color: rgba(255,255,255,0.82); max-width: 520px; margin: 0 auto 26px; }
/* WhatsApp CTA */
.whatsapp-cta {
position: relative;
overflow: hidden;
padding: 110px 0;
text-align: center;
}
.whatsapp-cta-inner {
position: relative;
z-index: 1;
}
.whatsapp-cta-tags {
color: var(--color-accent);
letter-spacing: 0.22em;
text-transform: uppercase;
font-size: 0.8rem;
font-weight: 600;
margin-top: 16px;
}
.whatsapp-cta-row {
display: flex;
align-items: center;
justify-content: center;
gap: 56px;
margin-top: 48px;
flex-wrap: wrap;
}
.whatsapp-cta-logo {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 8px;
width: 130px;
height: 130px;
border-radius: 50%;
background: var(--color-bg-alt);
border: 1px solid var(--color-border);
box-shadow: var(--shadow);
font-family: var(--font-brand);
font-size: 1.3rem;
color: var(--color-primary);
}
.whatsapp-cta-logo .logo-dot {
width: 14px;
height: 14px;
border-radius: 4px;
background: var(--color-accent);
transform: rotate(45deg);
}
.whatsapp-cta-button {
display: flex;
align-items: center;
justify-content: center;
width: 130px;
height: 130px;
border-radius: 50%;
background: #c6a032;
box-shadow: 0 12px 28px rgba(212, 175, 55, 0.2);
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.whatsapp-cta-button:hover {
transform: scale(1.06);
box-shadow: 0 14px 34px rgba(212, 175, 55, 0.3);
}
.whatsapp-cta-button svg {
width: 52px;
height: 52px;
fill: #ffffff;
}
@media (max-width: 640px) {
.whatsapp-cta-row { gap: 28px; }
.whatsapp-cta-logo, .whatsapp-cta-button { width: 100px; height: 100px; }
.whatsapp-cta-button svg { width: 40px; height: 40px; }
}
/* ===== Galeria (colagem espalhada: todas as fotos aparecem juntas) ===== */
/* Colagem em 4 colunas de larguras diferentes, fotos coladinhas (vao de 1.4%),
colunas mais curtas centralizadas na altura. Encostada na direita. */
.gallery-scatter {
position: relative;
width: 12cm;
max-width: 100%;
aspect-ratio: 100 / 90.94;
margin: 20px 0 20px auto;
}
/* Borda grossa em degradê, com a luz girando de verdade dentro do anel */
@property --border-angle {
syntax: '';
inherits: false;
initial-value: 0deg;
}
@keyframes border-spin {
to { --border-angle: 360deg; }
}
.glow-ring-frame,
.video-frame-ring,
.about-photo,
.leader-photo,
.lightbox-frame {
position: relative;
border: 4px solid transparent;
border-radius: inherit;
background-image:
linear-gradient(#000, #000),
conic-gradient(from var(--border-angle),
var(--color-bg-alt) 0%,
var(--color-bg-alt) 72%,
var(--color-panel) 82%,
var(--color-accent) 90%,
#f3f0ff 95%,
var(--color-accent) 99%,
var(--color-bg-alt) 100%);
background-origin: border-box;
background-clip: padding-box, border-box;
animation: border-spin 10s linear infinite;
}
.leader-photo {
border-radius: 50%;
}
.schedule-item.glow-ring-frame {
border-radius: var(--radius);
}
.leader-card-cta.glow-ring-frame {
border-width: 2px;
background-image:
linear-gradient(#000, #000),
conic-gradient(from var(--border-angle),
var(--color-accent-dark) 0%,
var(--color-accent) 40%,
#fff6d9 50%,
var(--color-accent) 60%,
var(--color-accent-dark) 100%);
}
.form-card.glow-ring-frame,
.contact-info-panel.glow-ring-frame {
border-radius: var(--radius);
animation: none;
background: none;
background-image: none;
border: none;
box-shadow: none;
}
.video-frame-ring:hover {
animation-play-state: paused;
}
.gallery-item {
position: absolute;
aspect-ratio: var(--ar);
border-radius: 8px;
overflow: hidden;
cursor: pointer;
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
/* Posicoes: coluna 1 (fotos 5, 6), coluna 2 (7, 10, 4), coluna 3 (8, 9), coluna 4 (2, 1, 3) */
.gallery-item:nth-child(5) { left: 0; top: 0; width: 33.58%; }
.gallery-item:nth-child(6) { left: 0; top: 50.77%; width: 33.58%; }
.gallery-item:nth-child(7) { left: 34.98%; top: 12.28%; width: 14.81%; }
.gallery-item:nth-child(10) { left: 34.98%; top: 35.54%; width: 14.81%; }
.gallery-item:nth-child(4) { left: 34.98%; top: 66.01%; width: 14.81%; }
.gallery-item:nth-child(8) { left: 51.19%; top: 8.69%; width: 27.65%; }
.gallery-item:nth-child(9) { left: 51.19%; top: 50.77%; width: 27.65%; }
.gallery-item:nth-child(2) { left: 80.24%; top: 5.04%; width: 19.75%; }
.gallery-item:nth-child(1) { left: 80.24%; top: 35.53%; width: 19.75%; }
.gallery-item:nth-child(3) { left: 80.24%; top: 66.02%; width: 19.75%; }
.gallery-item:hover {
transform: scale(1.08);
z-index: 5;
box-shadow: 0 24px 46px rgba(0,0,0,0.65);
}
.gallery-item img {
width: 100%;
height: 100%;
display: block;
object-fit: cover;
pointer-events: none;
animation: gallery-ken-burns 14s ease-in-out infinite;
}
.gallery-item:nth-child(3n+1) img { animation-delay: -2s; }
.gallery-item:nth-child(3n+2) img { animation-delay: -6s; }
.gallery-item:nth-child(3n+3) img { animation-delay: -10s; }
@keyframes gallery-ken-burns {
0%, 100% { transform: scale(1) translate(0, 0); }
50% { transform: scale(1.18) translate(-2%, 2%); }
}
/* Texto ao lado da colagem + pagina com todas as fotos */
.gallery-layout {
display: flex;
align-items: center;
gap: 56px;
}
.gallery-layout--no-photos {
justify-content: center;
text-align: center;
}
.gallery-layout--no-photos .gallery-info {
flex: 0 1 auto;
max-width: 640px;
}
/* Carrossel contínuo: fotos passam sozinhas pra direita, sem parar */
.photo-marquee {
width: 100vw;
margin-left: calc(50% - 50vw);
margin-top: 40px;
overflow: hidden;
padding: 10px 0;
}
.photo-marquee-track {
display: flex;
align-items: center;
gap: 20px;
width: max-content;
animation: photo-marquee-scroll 46s linear infinite;
}
.photo-marquee-track img,
.photo-marquee-track video {
height: 260px;
width: auto;
max-width: none;
border-radius: 16px;
object-fit: cover;
box-shadow: var(--shadow);
flex-shrink: 0;
background: #000;
}
.photo-marquee-track video { aspect-ratio: 9 / 16; cursor: pointer; }
@keyframes photo-marquee-scroll {
from { transform: translateX(-50%); }
to { transform: translateX(0%); }
}
@media (max-width: 720px) {
.photo-marquee-track img, .photo-marquee-track video { height: 170px; }
.photo-marquee-track { animation-duration: 32s; gap: 14px; }
}
/* Carrossel curvo das fotos: quem move e entorta as fotos e o js (fotos das pontas perto e grandes,
do meio longe e pequenas). Sem js, fica o trenzinho reto de cima. */
.photo-curve.is-curved { position: relative; margin-top: 0; padding: 0 0 140px; overflow-x: clip; overflow-y: visible; }
.photo-curve.is-curved .photo-marquee-track { animation: none; gap: 6px; }
.photo-curve.is-curved .photo-marquee-track img {
height: 380px;
aspect-ratio: 3 / 4;
will-change: transform, opacity, filter;
position: relative;
border: 2px solid rgba(212, 175, 55, 0.55);
box-shadow: 0 18px 40px rgba(0, 0, 0, 0.55), 0 0 22px rgba(212, 175, 55, 0.18);
transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.photo-curve.is-curved .photo-marquee-track img:hover {
border-color: rgba(243, 214, 120, 0.95);
box-shadow: 0 22px 48px rgba(0, 0, 0, 0.6), 0 0 36px rgba(212, 175, 55, 0.55);
}
@media (max-width: 720px) {
.photo-curve.is-curved { padding: 0 0 60px; }
.photo-curve.is-curved::after { bottom: 20px; height: 80px; }
.photo-curve.is-curved .photo-marquee-track img { height: 160px; }
}
.gallery-info {
flex: 1 1 0;
min-width: 0;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}
.gallery-wings {
display: block;
width: 240px;
max-width: 70%;
height: auto;
margin: 0 0 18px;
filter: drop-shadow(0 0 8px rgba(212,175,55,0.14));
}
.gallery-info p {
color: var(--color-text-muted);
margin: 6px 0 28px;
max-width: 44ch;
}
.gallery-layout .gallery-scatter {
flex: 0 0 auto;
margin: 0;
}
@media (max-width: 960px) {
.gallery-layout { flex-direction: column; align-items: stretch; gap: 32px; }
.gallery-layout .gallery-scatter { margin: 0 auto; }
}
.photo-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
gap: 14px;
}
.photo-grid-item {
aspect-ratio: 3 / 4;
border-radius: 10px;
overflow: hidden;
cursor: pointer;
background: #000;
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.photo-grid-item:hover {
transform: translateY(-4px);
box-shadow: 0 18px 36px rgba(0,0,0,0.55);
}
.photo-grid-item img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
pointer-events: none;
}
/* Linhas decorativas tipo circuito, com uma luz correndo por elas */
.circuit-lines {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 300px;
height: 200px;
opacity: 0.9;
pointer-events: none;
z-index: 0;
display: none;
}
.circuit-lines--left { left: -40px; }
.circuit-lines--right { right: -40px; transform: translateY(-50%) scaleX(-1); }
/* Linhas que saem das bordas da tela, passam por trás das bolinhas e se juntam no meio (desenhadas no JS) */
.whatsapp-cta-row { position: relative; }
.whatsapp-cta-row .circuit-lines {
top: 50%;
width: 50vw;
height: 200px;
overflow: visible;
}
.whatsapp-cta-row .circuit-lines--left { left: auto; right: 50%; transform: translateY(-50%); }
.whatsapp-cta-row .circuit-lines--right { right: auto; left: 50%; transform: translateY(-50%) scaleX(-1); }
.whatsapp-cta-logo, .whatsapp-cta-button { position: relative; z-index: 1; }
/* Linhas finas em dourado sólido, com um reflexo suave correndo por cima */
.whatsapp-cta-row .circuit-wire {
stroke: #c9a53a;
stroke-width: 1.5;
opacity: 0.95;
filter: drop-shadow(0 0 3px rgba(212, 175, 55, 0.35));
}
.whatsapp-cta-row .circuit-glow {
stroke: #f3dc8f;
stroke-width: 1.8;
stroke-dasharray: 18 82;
filter: drop-shadow(0 0 3px rgba(243, 220, 143, 0.6));
animation-delay: 0s;
}
.circuit-lines--top {
top: -16px;
width: 320px;
height: 160px;
transform: none;
}
.circuit-lines--top.circuit-lines--right {
transform: scaleX(-1);
}
/* Emblema de asas com halo, centralizado acima do título */
.wing-emblem {
position: absolute;
top: -18px;
left: 50%;
transform: translateX(-50%);
width: 260px;
opacity: 0.95;
pointer-events: none;
z-index: 0;
}
.wing-emblem img {
width: 100%;
height: auto;
display: block;
filter: drop-shadow(0 0 8px rgba(212,175,55,0.14));
}
.wing-emblem--eventos {
top: -260px;
left: 65%;
transform: translateX(-50%);
width: 620px;
height: 346px;
}
.wing-emblem--eventos img.wing-half {
position: absolute;
top: 0;
width: 54.3%;
height: auto;
display: block;
filter: none;
}
.wing-half--left {
left: 0;
}
.wing-half--right {
right: 0;
}
@media (max-width: 900px) {
.wing-emblem { width: 190px; }
.wing-emblem--eventos { left: 80%; width: 300px; }
}
@media (min-width: 1200px) {
.circuit-lines { display: block; }
}
.circuit-wire {
fill: none;
stroke: var(--color-text-muted);
stroke-width: 2;
opacity: 0.6;
}
.circuit-glow {
fill: none;
stroke: var(--color-accent);
stroke-width: 3.5;
stroke-linecap: round;
stroke-dasharray: 55 45;
filter: drop-shadow(0 0 4px rgba(212, 175, 55, 0.7));
animation: circuit-flow 3.5s linear infinite;
}
.circuit-glow--b { animation-delay: -1.75s; }
@keyframes circuit-flow {
to { stroke-dashoffset: -100; }
}
/* Aparecer ao rolar: as classes sao adicionadas e removidas pelo js/script.js */
.reveal {
opacity: 0;
transform: translateY(20px);
transition: opacity 0.35s ease, transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1);
transition-delay: var(--reveal-delay, 0ms);
}
.reveal.is-visible {
opacity: 1;
transform: none;
}
.ministries-connector-wrap {
position: relative;
}
.circuit-connector {
position: absolute;
bottom: 100%;
left: 0;
width: 100%;
height: 130px;
pointer-events: none;
z-index: 0;
}
@media (max-width: 900px) {
.circuit-connector { display: none; }
}
/* Mesma faixa em que a seção empilha (.gallery-layout vira coluna, ver acima) —
as fotos precisam se reorganizar juntas, senão ficam soltas com o tamanho de desktop. */
@media (max-width: 960px) {
.gallery-scatter {
width: 100%;
margin: 20px 0;
aspect-ratio: auto;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: flex-start;
gap: 14px 12px;
}
.gallery-scatter .gallery-item:nth-child(n) { position: relative; left: auto; top: auto; width: 46%; }
.gallery-scatter .gallery-item:nth-child(4n+1) { width: 58%; }
.gallery-scatter .gallery-item:nth-child(4n+2) { width: 34%; margin-top: 26px; }
.gallery-scatter .gallery-item:nth-child(4n+3) { width: 38%; }
.gallery-scatter .gallery-item:nth-child(4n+4) { width: 54%; margin-top: -6px; }
}
/* Videos: um em destaque (em pe, no meio de um palco largo e transparente)
e uma fileira de miniaturas embaixo. O js troca o destaque quando o video acaba.
--vw = largura do video em relacao ao palco (altura do palco x 9/16). */
.video-feature {
max-width: 980px;
margin: 40px auto 0;
}
.video-feature-stage {
--vw: 31.64%;
position: relative;
aspect-ratio: 16 / 9;
}
.video-feature-main {
position: relative;
display: block;
height: 100%;
aspect-ratio: 9 / 16;
margin: 0 auto;
object-fit: cover;
background: #000;
border-radius: 22px;
border: 1px solid rgba(212, 175, 55, 0.6);
box-shadow: 0 30px 70px rgba(0, 0, 0, 0.6), 0 0 44px rgba(212, 175, 55, 0.18);
transition: opacity 0.35s ease;
}
.video-feature.is-switching .video-feature-main { opacity: 0; }
.video-feature-caption {
position: absolute;
left: calc((100% - var(--vw)) / 2 + 20px);
right: calc((100% - var(--vw)) / 2 + 20px);
bottom: 24px;
display: flex;
flex-direction: column;
gap: 4px;
text-shadow: 0 2px 12px rgba(0, 0, 0, 0.8);
}
.video-feature-now {
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--color-accent);
}
.video-feature-label {
font-family: 'Poppins', sans-serif;
font-size: 1.6rem;
font-weight: 700;
color: #fff;
}
.video-feature-progress {
position: absolute;
left: calc((100% - var(--vw)) / 2 + 14px);
right: calc((100% - var(--vw)) / 2 + 14px);
bottom: 10px;
height: 4px;
border-radius: 4px;
overflow: hidden;
background: rgba(255, 255, 255, 0.18);
}
.video-feature-progress span {
display: block;
height: 100%;
width: 0;
background: linear-gradient(90deg, var(--color-accent-dark), var(--color-accent), #f3d678);
box-shadow: 0 0 12px rgba(212, 175, 55, 0.7);
}
.video-feature-thumbs {
display: flex;
justify-content: center;
gap: 14px;
margin-top: 20px;
}
.video-thumb {
flex: 0 0 auto;
width: 132px;
padding: 0;
border: 0;
background: none;
cursor: pointer;
color: rgba(255, 255, 255, 0.7);
font: 600 0.8rem/1.3 'Inter', sans-serif;
text-align: center;
opacity: 0.55;
transition: opacity 0.3s ease, transform 0.3s ease;
}
.video-thumb img,
.video-thumb video {
display: block;
width: 100%;
aspect-ratio: 4 / 5;
object-fit: cover;
border-radius: 12px;
border: 2px solid transparent;
margin-bottom: 8px;
pointer-events: none;
transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.video-thumb:hover { opacity: 0.9; transform: translateY(-3px); }
.video-thumb.is-active { opacity: 1; color: #fff; }
.video-thumb.is-active img,
.video-thumb.is-active video {
border-color: var(--color-accent);
box-shadow: 0 0 22px rgba(212, 175, 55, 0.45);
}
@media (max-width: 720px) {
.video-feature { margin-top: 24px; }
.video-feature-stage { --vw: 70.31%; aspect-ratio: 4 / 5; }
.video-feature-main { border-radius: 18px; }
.video-feature-caption { left: calc((100% - var(--vw)) / 2 + 14px); right: calc((100% - var(--vw)) / 2 + 14px); bottom: 20px; }
.video-feature-label { font-size: 1.15rem; }
.video-feature-thumbs { justify-content: flex-start; overflow-x: auto; gap: 10px; padding-bottom: 6px; scrollbar-width: none; }
.video-feature-thumbs::-webkit-scrollbar { display: none; }
.video-thumb { width: 84px; font-size: 0.7rem; }
}
/* Pagina Ministerios: grade de cards iguais (capa, etiqueta, nome, descricao e "Saiba mais") */
.min-intro {
max-width: 560px;
margin: -12px auto 32px;
text-align: center;
color: rgba(255, 255, 255, 0.78);
font-size: 1.05rem;
}
/* flex com centro: a ultima linha (se sobrar card) fica centralizada */
.min-grid {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 24px;
}
.min-card {
flex: 0 1 calc((100% - 48px) / 3);
display: flex;
flex-direction: column;
border-radius: 18px;
overflow: hidden;
text-decoration: none;
color: inherit;
background: rgba(14, 12, 12, 0.78);
-webkit-backdrop-filter: blur(6px);
backdrop-filter: blur(6px);
border: 1px solid rgba(212, 175, 55, 0.22);
box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
transition: transform 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease;
}
.min-card:hover {
transform: translateY(-6px);
border-color: rgba(212, 175, 55, 0.7);
box-shadow: 0 26px 54px rgba(0, 0, 0, 0.55), 0 0 30px rgba(212, 175, 55, 0.18);
}
.min-card-media {
position: relative;
aspect-ratio: 4 / 3;
overflow: hidden;
}
.min-card-media img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 0.6s ease;
}
.min-card:hover .min-card-media img { transform: scale(1.06); }
.min-card-media::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(180deg, transparent 55%, rgba(14, 12, 12, 0.85) 100%);
}
.min-card-tag {
position: absolute;
left: 16px;
top: 16px;
z-index: 1;
padding: 5px 12px;
border-radius: 999px;
font-size: 0.7rem;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: #1a1408;
background: var(--color-accent);
box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
}
.min-card-body {
display: flex;
flex-direction: column;
flex: 1;
padding: 18px 22px 22px;
}
.min-card-body h3 {
margin: 0 0 4px;
font-family: var(--font-heading);
font-size: 1.25rem;
color: #fff;
}
.min-card-by {
font-size: 0.82rem;
font-weight: 600;
color: var(--color-accent);
margin-bottom: 6px;
}
.min-card-body p {
margin: 6px 0 18px;
color: rgba(255, 255, 255, 0.75);
font-size: 0.95rem;
line-height: 1.6;
}
.min-card-more {
margin-top: auto;
font-size: 0.85rem;
font-weight: 700;
letter-spacing: 0.04em;
color: var(--color-accent);
}
.min-card:hover .min-card-more { color: #f3d678; }
@media (max-width: 960px) {
.min-card { flex-basis: calc((100% - 24px) / 2); }
}
@media (max-width: 600px) {
.min-grid { gap: 18px; }
.min-card { flex-basis: 100%; }
.min-intro { font-size: 0.95rem; }
}
/* espaco entre a galeria de fotos e os videos (mesma secao) */
.video-block { margin-top: 150px; }
@media (max-width: 720px) {
.video-block { margin-top: 80px; }
}
/* Floreio dourado ao lado do cartao Jovens: o cipo sobe e se enrosca na lateral do cartao Ministerio Infantil.
O quadro tem altura 0 para nao esticar a linha dos cartoes; a imagem sobe (margem negativa) ate o cartao
e passa um pouco da borda direita (margem direita negativa). Medidas em px de tela = px da imagem x 0,47. */
.ministry-flourish {
grid-column: 2 / 4;
height: 0;
display: flex;
justify-content: flex-end;
align-items: flex-start;
pointer-events: none;
}
.ministry-flourish img {
display: block;
flex: none;
max-width: none;
width: 714.9px;
height: auto;
margin-top: -147.7px;
margin-right: -74.3px;
filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.4));
}
@media (max-width: 1100px) {
.ministry-flourish { display: none; }
}
.section--videos {
position: relative;
overflow: hidden;
}
.section-videos-blob {
display: none;
}
.video-stage {
position: relative;
display: flex;
justify-content: center;
align-items: center;
padding: 20px 0;
}
.video-stage-glow {
position: absolute;
border-radius: 50%;
filter: blur(30px);
pointer-events: none;
z-index: 0;
}
.video-stage-glow--a {
width: 320px;
height: 320px;
top: 10%;
left: 50%;
transform: translateX(-80%);
background: radial-gradient(circle, rgba(212, 175, 55,0.22), transparent 70%);
}
.video-stage-glow--b {
width: 300px;
height: 300px;
bottom: 0;
left: 50%;
transform: translateX(20%);
background: radial-gradient(circle, rgba(58, 47, 20, 0.6), transparent 70%);
}
.video-frame-ring {
position: relative;
z-index: 1;
border-radius: 28px;
width: 100%;
max-width: 440px;
transition: transform 0.3s ease;
}
.video-frame-ring:hover { transform: translateY(-4px); }
.video-frame-ring:hover::after { animation-play-state: paused; }
/* Carrossel de ponta a ponta: os outros vídeos preenchem a tela dos dois lados */
.video-stage {
width: 100vw;
margin-left: calc(50% - 50vw);
overflow: hidden;
}
.video-reel {
position: absolute;
top: 50%;
z-index: 0;
display: flex;
gap: 16px;
transform: translateY(-50%);
}
.video-reel--next { left: calc(50% + 236px); }
.video-reel--prev { right: calc(50% + 236px); flex-direction: row-reverse; }
.video-reel-tile {
flex: 0 0 260px;
aspect-ratio: 9 / 16;
border-radius: 18px;
overflow: hidden;
background: #000;
box-shadow: 0 20px 45px rgba(0,0,0,0.5);
cursor: pointer;
filter: brightness(0.38);
transition: filter 0.25s ease;
}
.video-reel-tile:hover { filter: brightness(0.75); }
.video-reel-tile:nth-child(2) { opacity: 0.85; }
.video-reel-tile:nth-child(3) { opacity: 0.7; }
.video-reel-tile:nth-child(n+4) { opacity: 0.55; }
.video-reel-tile video,
.video-reel-tile img {
width: 100%;
height: 100%;
display: block;
object-fit: cover;
pointer-events: none;
}
@media (max-width: 760px) {
.video-reel { display: none; }
}
.video-single-frame {
position: relative;
width: 100%;
border-radius: 24px;
overflow: hidden;
background: #000;
}
.video-single-frame video {
width: 100%;
display: block;
aspect-ratio: 9 / 16;
object-fit: cover;
background: #000;
pointer-events: none;
}
/* Dois players sobrepostos: o que está entrando some por cima só quando já tem imagem, sem tela preta */
.video-carousel-player {
position: absolute;
inset: 0;
opacity: 0;
transition: opacity 0.25s ease;
z-index: 0;
}
.video-carousel-player.active {
position: relative;
opacity: 1;
z-index: 1;
}
/* Barra de progresso estilo "stories" */
.video-progress {
position: absolute;
top: 12px;
left: 12px;
right: 12px;
z-index: 3;
display: flex;
gap: 5px;
}
.video-progress-segment {
flex: 1;
height: 3px;
border-radius: 3px;
background: rgba(255,255,255,0.32);
overflow: hidden;
}
.video-progress-fill {
display: block;
height: 100%;
width: 0%;
background: #fff;
border-radius: 3px;
}
.video-progress-segment.done .video-progress-fill { width: 100%; }
.video-story-header {
position: absolute;
top: 26px;
left: 14px;
z-index: 3;
display: flex;
align-items: center;
gap: 8px;
color: #fff;
font-family: var(--font-heading);
font-weight: 700;
font-size: 0.85rem;
text-shadow: 0 1px 6px rgba(0,0,0,0.55);
}
.video-story-dot {
width: 9px;
height: 9px;
border-radius: 3px;
transform: rotate(45deg);
background: var(--color-accent);
box-shadow: 0 0 0 3px rgba(255,255,255,0.25);
}
.video-nav {
position: absolute;
top: 50%;
transform: translateY(-50%);
z-index: 3;
background: rgba(255,255,255,0.16);
backdrop-filter: blur(6px);
border: 1px solid rgba(255,255,255,0.35);
color: #fff;
width: 38px;
height: 38px;
border-radius: 50%;
font-size: 1.2rem;
line-height: 1;
cursor: pointer;
transition: background 0.15s ease, transform 0.15s ease;
}
.video-nav:hover { background: rgba(255,255,255,0.32); transform: translateY(-50%) scale(1.08); }
.video-nav--prev { left: 10px; }
.video-nav--next { right: 10px; }
/* Lightbox */
.lightbox {
position: fixed;
inset: 0;
background: rgba(20, 20, 20, 0.92);
display: none;
align-items: center;
justify-content: center;
z-index: 1000;
padding: 40px 20px;
}
.lightbox.open { display: flex; }
.lightbox-frame {
display: inline-flex;
border-radius: 8px;
max-height: 88vh;
}
.lightbox-frame img {
display: block;
max-width: 100%;
max-height: 88vh;
border-radius: 4px;
}
.lightbox-close {
position: absolute;
top: 24px;
right: 28px;
background: rgba(255,255,255,0.12);
color: #fff;
border: none;
width: 44px;
height: 44px;
border-radius: 50%;
font-size: 1.4rem;
cursor: pointer;
}
.lightbox-close:hover { background: rgba(255,255,255,0.24); }
.lightbox-nav {
position: absolute;
top: 50%;
transform: translateY(-50%);
background: rgba(255,255,255,0.12);
color: #fff;
border: none;
width: 48px;
height: 48px;
border-radius: 50%;
font-size: 1.4rem;
cursor: pointer;
}
.lightbox-nav:hover { background: rgba(255,255,255,0.24); }
.lightbox-prev { left: 24px; }
.lightbox-next { right: 24px; }
@media (max-width: 600px) {
.lightbox-nav { width: 40px; height: 40px; font-size: 1.1rem; }
}
/* ===== Footer ===== */
.site-footer {
position: relative;
overflow: hidden;
background: var(--color-primary-dark);
color: rgba(255,255,255,0.75);
padding: 56px 0 24px;
}
.site-footer > .container {
position: relative;
z-index: 1;
}
.footer-grid {
display: grid;
grid-template-columns: 1.4fr 1fr 1fr 1fr;
gap: 32px;
margin-bottom: 40px;
}
.footer-brand {
font-family: var(--font-brand);
font-size: 1.7rem;
color: #fff;
margin-bottom: 10px;
}
.footer-col h4 {
color: #fff;
font-size: 0.9rem;
text-transform: uppercase;
letter-spacing: 0.08em;
margin-bottom: 14px;
}
.footer-col ul li { margin-bottom: 10px; }
.footer-col a { color: rgba(255,255,255,0.7); font-size: 0.92rem; }
.footer-col a:hover { color: var(--color-accent); }
.footer-bottom {
padding-top: 20px;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
gap: 10px;
font-size: 0.82rem;
}
/* ===== Responsive ===== */
@media (max-width: 900px) {
.grid--3, .grid--4 { grid-template-columns: repeat(2, 1fr); }
.contact-grid { grid-template-columns: 1fr; }
.footer-grid { grid-template-columns: 1fr 1fr; }
}
/* Em 2 colunas, o card precisa caber: foto e espaçamento menores, e o card pode encolher */
@media (max-width: 720px) {
.grid--4 .card { min-width: 0; padding: 18px 14px; }
.grid--4 .leader-photo { width: 124px; height: 124px; }
.grid--4 .leader-card-cta { font-size: 0.72rem; padding: 12px 16px; }
}
@media (max-width: 720px) {
.nav-links {
position: absolute;
top: 100%;
left: 0;
right: 0;
background: var(--color-bg-alt);
border-bottom: 1px solid var(--color-border);
flex-direction: column;
align-items: stretch;
padding: 12px;
gap: 4px;
display: none;
}
.nav-links.open { display: flex; }
.nav-links a { padding: 12px 14px; }
.nav-cta { margin-left: 0; }
.nav-toggle { display: flex; }
.grid--3, .grid--2 { grid-template-columns: 1fr; }
.event-card { grid-template-columns: 72px 1fr; }
.footer-grid { grid-template-columns: 1fr; }
}
/* Paginas dos pastores: texto de apresentacao (logo abaixo da linha dourada) maior e mais firme */
.form-card .leader-card-divider + p {
font-size: clamp(1.12rem, 1rem + 0.5vw, 1.32rem);
font-weight: 500;
line-height: 1.75;
letter-spacing: 0.01em;
color: rgba(255, 255, 255, 0.94);
max-width: 50ch;
margin-left: auto;
margin-right: auto;
}
/* Paginas dos pastores: sem a caixa escura em volta da foto e do texto (fica direto sobre o video) */
.form-card.glow-ring-frame:has(.leader-photo) {
background: none;
border-color: transparent;
box-shadow: none;
animation: none;
}
/* Secoes empilhando: cada secao fica parada (sticky) e a de baixo sobe pela frente; o JS marca
as secoes com .stack-panel e calcula --stick-top. (overflow-x: clip no html/body -- com
hidden o sticky nao funciona.) */
/* o bloco das secoes fica por cima do Hero parado */
.below-hero-bg { z-index: 2; }
.stack-panel {
/* !important: varias secoes tem position: relative, que desligava o sticky */
position: sticky !important;
top: var(--stick-top, 0px);
}
/* Pastores: secao ocupa no minimo a tela inteira, com o conteudo no meio */
#lideranca {
min-height: 100vh;
min-height: 100svh;
display: flex;
align-items: center;
padding-top: 140px;
padding-bottom: 160px;
}
#lideranca > .container { width: 100%; }
/* Pastores: antes da animacao as fotos e os textos ficam escondidos
(o JS faz cada foto subir saindo do desfoque, uma de cada vez) */
#lideranca .pastores-espera .leader-photo,
#lideranca .pastores-espera .leader-card > :not(.leader-photo) {
opacity: 0;
}
/* brilho dourado ao pousar: canvas por cima da secao, sem bloquear cliques */
.pastores-fogos {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 20;
}
/* Como e o nosso culto e perguntas: itens escondidos ate a animacao de entrada pelos lados comecar */
.culto-steps.entra-lados-espera .culto-step,
.culto-faq-list.entra-lados-espera > details { opacity: 0; }
/* Missao/Visao/Valores: escondidos ate a animacao de cair do alto comecar */
.values-grid.cai-espera > * { opacity: 0; }
/* Sobre: titulo alinhado com o texto (a esquerda), "Igreja da Restauracao" em dourado
cursivo embaixo, foto ao lado centralizada com o bloco. No celular: titulo, foto, texto. */
#sobre .sobre-grid {
grid-template-columns: 1.1fr 1fr;
grid-template-areas: "head photo" "text photo";
column-gap: 56px;
row-gap: 0;
align-items: start;
}
#sobre .sobre-head { grid-area: head; }
#sobre .story-text { grid-area: text; }
#sobre .about-photo { grid-area: photo; align-self: center; }
#sobre .section-title {
text-align: left;
margin-left: 0;
margin-right: 0;
}
#sobre .section-title::after {
right: auto;
margin: 0;
}
#sobre .sobre-title-sub {
display: block;
margin-top: 6px;
font-family: var(--font-brand);
font-size: 0.78em;
font-weight: 700;
text-transform: none;
letter-spacing: 0;
color: var(--color-accent);
-webkit-text-fill-color: var(--color-accent);
}
@media (max-width: 900px) {
#sobre .sobre-grid {
grid-template-columns: 1fr;
grid-template-areas: "head" "photo" "text";
row-gap: 28px;
}
#sobre .section-title { margin-bottom: 0; }
}
/* Contato no celular: o e-mail comprido empurrava o bloco pra fora da tela. Agora os blocos
cabem na largura e tudo fica centralizado (icone em cima, texto embaixo). */
.contact-grid > * { min-width: 0; }
.contact-info-item a,
.contact-info-item p { overflow-wrap: anywhere; }
@media (max-width: 720px) {
.contact-info-panel,
.form-card { padding: 26px 20px; }
.contact-info-panel { text-align: center; }
.contact-info-panel .section-title::after { left: 0; right: 0; margin: 0 auto; }
.contact-info-item {
flex-direction: column;
align-items: center;
text-align: center;
gap: 8px;
}
.contact-info-panel .social-row { justify-content: center; }
.map-link {
flex-direction: column;
text-align: center;
gap: 10px;
}
}
/* Botao do Instagram no lugar do circulo "Tempo de Mesa" (ao lado do WhatsApp) */
.instagram-cta {
color: var(--color-accent);
transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.instagram-cta svg {
width: 44px;
height: 44px;
fill: none;
stroke: currentColor;
stroke-width: 1.8;
}
.instagram-cta span {
font-size: 1.15rem;
color: var(--color-primary);
}
.instagram-cta:hover {
transform: scale(1.06);
border-color: var(--color-accent);
box-shadow: 0 12px 28px rgba(212, 175, 55, 0.2);
}
@media (max-width: 720px) {
.instagram-cta svg { width: 34px; height: 34px; }
.instagram-cta span { font-size: 0.95rem; }
}
/* Ministerios organizados: 7 cartoes ficam 4 em cima + 3 embaixo (centralizados), mesma altura
por linha e titulo na fonte dos titulos do site (Cinzel). Tablet: 3 + 3 + 1 centralizado
vira 2 colunas; celular continua um por linha. */
.ministerio-list {
max-width: 1200px;
gap: 24px;
align-items: stretch;
}
.ministerio-list-item {
flex: 0 1 calc((100% - 72px) / 4);
}
.ministerio-list-item h3 {
font-family: var(--font-heading);
font-size: 1.15rem;
font-weight: 700;
letter-spacing: 0.02em;
}
@media (max-width: 1100px) {
.ministerio-list-item { flex-basis: calc((100% - 48px) / 3); }
}
@media (max-width: 960px) {
.ministerio-list-item { flex-basis: calc((100% - 24px) / 2); }
}
@media (max-width: 620px) {
.ministerio-list-item { flex-basis: 100%; }
.ministerio-list-item h3 { font-size: 1.08rem; }
}
/* Duvidas como ultima secao: sem o espaco de cima de quando ficava embaixo dos passos do culto */
#duvidas .culto-faq { margin-top: 0; }
/* Pastores com o mesmo cartao dos Ministerios: vidro escuro, borda dourada com moldura interna,
filete dourado no topo e luz no canto. Sem overflow:hidden (as fotos giram pra fora do cartao
na animacao); a luz do canto fica dentro do cartao com border-radius proprio. */
#lideranca .grid--4 { gap: 24px; }
#lideranca .leader-card {
position: relative;
padding: 34px 22px 30px;
border-radius: 22px;
background: linear-gradient(165deg, rgba(38, 30, 12, 0.94) 0%, rgba(14, 12, 7, 0.93) 48%, rgba(10, 9, 6, 0.95) 100%);
-webkit-backdrop-filter: blur(16px);
backdrop-filter: blur(16px);
border: 1px solid rgba(212, 175, 55, 0.5);
box-shadow: inset 0 1px 0 rgba(255, 241, 184, 0.18), inset 0 0 0 5px rgba(10, 9, 6, 0.55), inset 0 0 0 6px rgba(212, 175, 55, 0.16), 0 24px 50px rgba(0, 0, 0, 0.55);
transition: transform 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease;
}
#lideranca .leader-card::before {
content: '';
position: absolute;
left: 22px;
right: 22px;
top: 0;
height: 2px;
background: linear-gradient(90deg, transparent, var(--color-accent), transparent);
pointer-events: none;
}
#lideranca .leader-card::after {
content: '';
position: absolute;
left: 0;
top: 0;
width: 170px;
height: 130px;
border-top-left-radius: 22px;
background: radial-gradient(circle at 0 0, rgba(243, 214, 120, 0.22), transparent 70%);
opacity: 0.6;
pointer-events: none;
transition: opacity 0.35s ease;
}
#lideranca .leader-card > * { position: relative; z-index: 1; }
#lideranca .leader-card:hover {
transform: translateY(-6px);
border-color: rgba(243, 214, 120, 0.85);
box-shadow: inset 0 1px 0 rgba(255, 241, 184, 0.2), inset 0 0 0 5px rgba(10, 9, 6, 0.55), inset 0 0 0 6px rgba(212, 175, 55, 0.22), 0 28px 56px rgba(0, 0, 0, 0.6), 0 0 36px rgba(212, 175, 55, 0.25);
}
#lideranca .leader-card:hover::after { opacity: 1; }
/* nome do pastor na mesma cor creme-dourada dos titulos dos cartoes de ministerio */
#lideranca .leader-card h3 { color: #f7e7b0; }
#lideranca .leader-card .leader-card-cta { margin-top: auto; }
@media (max-width: 620px) {
#lideranca .leader-card { padding: 26px 12px 22px; }
#lideranca .leader-card h3 { font-size: 1rem; }
}
/* ===== Carrossel 3D de videos (Galeria) ===== */
.vcarousel {
--vc-h: min(64vh, 540px);
position: relative;
max-width: 1100px;
margin: 0 auto;
outline: none;
}
.vcarousel-stage {
position: relative;
height: var(--vc-h);
perspective: 1400px;
transform-style: preserve-3d;
}
.vslide {
position: absolute;
left: 50%;
top: 0;
height: 100%;
width: calc(var(--vc-h) * 9 / 16);
border-radius: 22px;
overflow: hidden;
cursor: pointer;
background: #0a0906;
border: 1px solid rgba(212, 175, 55, 0.35);
box-shadow: 0 24px 50px rgba(0, 0, 0, 0.6);
transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1), filter 0.7s ease, opacity 0.7s ease, border-color 0.4s ease, box-shadow 0.4s ease;
}
.vslide video {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
pointer-events: none;
}
.vslide.is-ativo {
border-color: rgba(243, 214, 120, 0.85);
box-shadow: inset 0 0 0 1px rgba(255, 241, 184, 0.15), 0 30px 60px rgba(0, 0, 0, 0.65), 0 0 40px rgba(212, 175, 55, 0.25);
}
.vcarousel-nav {
position: absolute;
top: 50%;
z-index: 20;
width: 52px;
height: 52px;
margin-top: -26px;
border-radius: 50%;
border: 1px solid rgba(212, 175, 55, 0.55);
background: rgba(10, 9, 6, 0.7);
color: var(--color-accent);
font-size: 2rem;
line-height: 1;
cursor: pointer;
-webkit-backdrop-filter: blur(6px);
backdrop-filter: blur(6px);
transition: background 0.2s ease, transform 0.2s ease, color 0.2s ease;
}
.vcarousel-nav:hover { background: var(--color-accent); color: #0a0906; transform: scale(1.08); }
.vcarousel-prev { left: 0; }
.vcarousel-next { right: 0; }
.vcarousel-info {
display: flex;
align-items: center;
justify-content: center;
gap: 18px;
margin-top: 26px;
}
.vcarousel-label {
font-family: var(--font-heading);
font-size: 1.3rem;
font-weight: 700;
letter-spacing: 0.04em;
color: #f7e7b0;
}
.vcarousel-som {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px 16px;
border-radius: 999px;
border: 1px solid rgba(212, 175, 55, 0.55);
background: transparent;
color: var(--color-accent);
font-size: 0.8rem;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
cursor: pointer;
transition: background 0.2s ease, color 0.2s ease;
}
.vcarousel-som:hover,
.vcarousel-som[aria-pressed="true"] { background: var(--color-accent); color: #0a0906; }
.vcarousel-som svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.vcarousel-som svg path:first-child { fill: currentColor; }
.vcarousel-som .som-onda { display: none; }
.vcarousel-som[aria-pressed="true"] .som-onda { display: inline; }
.vcarousel-som[aria-pressed="true"] .som-x { display: none; }
.vcarousel-progress {
width: min(320px, 70%);
height: 2px;
margin: 16px auto 0;
background: rgba(212, 175, 55, 0.18);
border-radius: 2px;
overflow: hidden;
}
.vcarousel-progress span {
display: block;
height: 100%;
width: 0;
background: linear-gradient(90deg, var(--color-accent-dark), var(--color-accent));
}
.vcarousel-dots {
display: flex;
justify-content: center;
gap: 10px;
margin-top: 18px;
}
.vcarousel-dots button {
width: 9px;
height: 9px;
padding: 0;
border-radius: 50%;
border: 1px solid rgba(212, 175, 55, 0.6);
background: transparent;
cursor: pointer;
transition: background 0.2s ease, transform 0.2s ease;
}
.vcarousel-dots button.is-ativo { background: var(--color-accent); transform: scale(1.3); }
@media (max-width: 720px) {
.vcarousel { --vc-h: min(58vh, 460px); }
.vcarousel-nav { width: 42px; height: 42px; margin-top: -21px; font-size: 1.6rem; }
.vcarousel-info { flex-direction: column; gap: 12px; }
}
/* Ministerios no celular: em vez de 7 cartoes empilhados (parede de texto), um carrossel de
arrastar pro lado. Um cartao por vez, com a pontinha do proximo aparecendo, e bolinhas
embaixo (o JS cria). No computador nada muda. */
.ministerio-dots { display: none; }
@media (max-width: 620px) {
.ministerio-list {
position: relative;
flex-wrap: nowrap;
justify-content: flex-start;
gap: 14px;
margin: 0 -24px;
padding: 6px 24px 10px;
overflow-x: auto;
scroll-snap-type: x mandatory;
scroll-padding: 0 24px;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
}
.ministerio-list::-webkit-scrollbar { display: none; }
.ministerio-list-item {
flex: 0 0 78%;
scroll-snap-align: center;
display: block;
padding: 24px 22px 26px;
}
.ministerio-list-num { min-width: 0; margin: 0 0 10px; font-size: 2.4rem; }
.ministerio-list-item:hover { transform: none; }
.ministerio-dots {
display: flex;
justify-content: center;
gap: 9px;
margin-top: 18px;
}
.ministerio-dots button {
width: 8px;
height: 8px;
padding: 0;
border-radius: 50%;
border: 1px solid rgba(212, 175, 55, 0.6);
background: transparent;
transition: background 0.2s ease, transform 0.2s ease;
}
.ministerio-dots button.is-ativo { background: var(--color-accent); transform: scale(1.3); }
.ministerio-dica {
display: block;
margin-top: 10px;
text-align: center;
font-size: 0.78rem;
letter-spacing: 0.08em;
text-transform: uppercase;
color: rgba(212, 175, 55, 0.75);
}
}
@media (min-width: 621px) {
.ministerio-dica { display: none; }
}
/* Identidade hebraica: palavra em hebraico (e a pronuncia) em cima de cada titulo, em dourado.
Ex.: Pastores -> רועים · Ro'im. Vem do atributo data-he / data-he-tr do titulo. */
[data-he]::before {
content: attr(data-he) " · " attr(data-he-tr);
display: block;
margin-bottom: 12px;
font-family: 'Frank Ruhl Libre', 'Times New Roman', serif;
font-size: 0.95rem;
font-weight: 500;
letter-spacing: 0.14em;
text-transform: none;
white-space: pre;
color: var(--color-accent);
-webkit-text-fill-color: var(--color-accent);
background: none;
opacity: 0.9;
}
.culto-faq-intro h3[data-he]::before { font-size: 0.85rem; }
.hero-shalom {
font-family: 'Frank Ruhl Libre', 'Times New Roman', serif;
font-size: 1.15em;
letter-spacing: 0.06em;
margin-right: 10px;
}
/* Contato: icones dourados de linha fina no lugar dos emojis */
.contact-info-item .icon svg,
.map-link-icon svg {
width: 20px;
height: 20px;
fill: none;
stroke: var(--color-accent);
stroke-width: 1.6;
stroke-linecap: round;
stroke-linejoin: round;
}
.contact-info-item .icon {
border: 1px solid rgba(212, 175, 55, 0.35);
background: rgba(212, 175, 55, 0.06);
}
.map-link-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
flex: none;
border-radius: 50%;
border: 1px solid rgba(212, 175, 55, 0.35);
background: rgba(212, 175, 55, 0.06);
}
.map-link-icon svg { width: 22px; height: 22px; }
/* Contato: mapa de verdade, escurecido e puxado pro dourado pra combinar com o site */
.contato-mapa {
margin-top: 30px;
height: 260px;
border-radius: 18px;
overflow: hidden;
border: 1px solid rgba(212, 175, 55, 0.35);
box-shadow: 0 18px 40px rgba(0, 0, 0, 0.5);
}
.contato-mapa iframe {
width: 100%;
height: 100%;
border: 0;
display: block;
filter: invert(0.92) hue-rotate(180deg) sepia(0.35) saturate(0.8) brightness(0.9) contrast(0.95);
}
.contato-mapa + .map-link { margin-top: 16px; }
@media (max-width: 620px) { .contato-mapa { height: 220px; } }
/* ===== Logo de verdade (ampulheta com a estrela de Davi, YHWH e a bussola) ===== */
.brand-logo {
width: 40px;
height: 40px;
object-fit: contain;
filter: drop-shadow(0 0 8px rgba(212, 175, 55, 0.35));
transition: transform 0.4s ease;
}
.nav-brand:hover .brand-logo { transform: rotate(-12deg) scale(1.06); }
.footer-brand { display: flex; align-items: center; gap: 12px; }
.footer-logo {
width: 54px;
height: 54px;
object-fit: contain;
filter: drop-shadow(0 0 10px rgba(212, 175, 55, 0.3));
}
/* inicio: logo grande e bem suave do lado direito, com um brilho que pulsa devagar */
.hero-logo-marca {
position: absolute;
right: max(-60px, calc(50% - 720px));
top: 50%;
width: min(48vw, 600px);
height: auto;
transform: translateY(-50%);
opacity: 0.16;
pointer-events: none;
z-index: 0;
filter: drop-shadow(0 0 40px rgba(212, 175, 55, 0.35));
animation: heroLogoPulso 6s ease-in-out infinite;
}
@keyframes heroLogoPulso {
0%, 100% { opacity: 0.13; }
50% { opacity: 0.22; }
}
@media (max-width: 900px) {
.hero-logo-marca { right: 50%; transform: translate(50%, -50%); width: 86vw; opacity: 0.1; animation: none; }
}
/* embaixo dos titulos: ampulheta pequena entre dois fios dourados, no lugar do tracinho */
.section-title { padding-bottom: 34px; }
.section-title::after {
width: 132px;
height: 22px;
border-radius: 0;
background:
url("../img/logo/logo-dourado.png") center / 22px 22px no-repeat,
linear-gradient(90deg, transparent, var(--color-accent)) left center / 44px 1px no-repeat,
linear-gradient(90deg, var(--color-accent), transparent) right center / 44px 1px no-repeat;
}
#sobre .section-title::after { margin: 0; }
/* ===== Proximo encontro (inicio) ===== */
.proximo-culto {
display: inline-flex;
flex-wrap: wrap;
align-items: center;
gap: 8px 12px;
margin-top: 22px;
padding: 10px 18px;
border-radius: 999px;
border: 1px solid rgba(212, 175, 55, 0.45);
background: rgba(10, 9, 6, 0.6);
-webkit-backdrop-filter: blur(8px);
backdrop-filter: blur(8px);
font-size: 0.9rem;
color: rgba(245, 241, 230, 0.9);
}
.proximo-culto[hidden] { display: none; }
.proximo-culto-ponto {
width: 9px;
height: 9px;
border-radius: 50%;
background: var(--color-accent);
box-shadow: 0 0 0 0 rgba(212, 175, 55, 0.6);
animation: proximoPulso 2s ease-out infinite;
}
.proximo-culto.is-agora .proximo-culto-ponto { background: #6fd38b; animation-name: proximoPulsoVerde; }
.proximo-culto-conta {
font-family: var(--font-heading);
font-weight: 700;
letter-spacing: 0.06em;
color: var(--color-accent);
font-variant-numeric: tabular-nums;
}
@keyframes proximoPulso {
0% { box-shadow: 0 0 0 0 rgba(212, 175, 55, 0.6); }
100% { box-shadow: 0 0 0 12px rgba(212, 175, 55, 0); }
}
@keyframes proximoPulsoVerde {
0% { box-shadow: 0 0 0 0 rgba(111, 211, 139, 0.6); }
100% { box-shadow: 0 0 0 12px rgba(111, 211, 139, 0); }
}
@media (max-width: 620px) {
.proximo-culto { border-radius: 16px; font-size: 0.82rem; }
}
/* ===== Secao de tela cheia: jovens na Suca + "Vivendo a Tora a mesa" ===== */
.secao-foto {
position: relative;
min-height: 100vh;
min-height: 100svh;
display: flex;
align-items: center;
padding: 140px 0 120px;
overflow: hidden;
background: #0a0906;
text-align: center;
}
.secao-foto-bg {
position: absolute;
inset: 0;
background: url("../img/fotos/suca-jovens.jpg") center 40% / cover no-repeat;
filter: saturate(0.9);
}
.secao-foto-bg::after {
content: '';
position: absolute;
inset: 0;
background:
radial-gradient(ellipse at center, rgba(10, 9, 6, 0.55) 0%, rgba(10, 9, 6, 0.82) 70%),
linear-gradient(to bottom, rgba(10, 9, 6, 0.85) 0%, transparent 25%, transparent 70%, rgba(10, 9, 6, 0.95) 100%);
}
.secao-foto-conteudo { position: relative; z-index: 1; max-width: 860px; }
.secao-foto-he {
display: block;
font-family: 'Frank Ruhl Libre', serif;
font-size: 1.6rem;
color: var(--color-accent);
letter-spacing: 0.12em;
margin-bottom: 10px;
}
.secao-foto-titulo {
font-family: var(--font-heading);
font-size: clamp(2.4rem, 6vw, 4.6rem);
line-height: 1.05;
color: #f7e7b0;
text-transform: uppercase;
letter-spacing: 0.03em;
text-shadow: 0 6px 30px rgba(0, 0, 0, 0.7);
margin: 0 0 18px;
}
.secao-foto-titulo span {
display: block;
font-family: var(--font-brand);
text-transform: none;
letter-spacing: 0;
color: var(--color-accent);
font-size: 0.85em;
}
.secao-foto-texto {
max-width: 560px;
margin: 0 auto 34px;
font-size: 1.1rem;
color: rgba(245, 241, 230, 0.9);
text-shadow: 0 2px 12px rgba(0, 0, 0, 0.8);
}
.numeros {
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 14px;
margin: 0 auto 34px;
}
.numero {
min-width: 150px;
padding: 16px 18px;
border-radius: 16px;
border: 1px solid rgba(212, 175, 55, 0.4);
background: rgba(10, 9, 6, 0.55);
-webkit-backdrop-filter: blur(8px);
backdrop-filter: blur(8px);
}
.numero strong {
display: block;
font-family: var(--font-heading);
font-size: 1.7rem;
color: var(--color-accent);
line-height: 1.1;
}
.numero span {
font-size: 0.78rem;
letter-spacing: 0.12em;
text-transform: uppercase;
color: rgba(245, 241, 230, 0.8);
}
.secao-foto-legenda {
position: absolute;
right: 24px;
bottom: 22px;
z-index: 1;
font-size: 0.75rem;
letter-spacing: 0.1em;
text-transform: uppercase;
color: rgba(245, 241, 230, 0.6);
}
@media (max-width: 620px) {
.secao-foto { padding: 110px 0 90px; }
.numero { min-width: 0; flex: 1 1 calc(50% - 14px); }
.numero strong { font-size: 1.35rem; }
.secao-foto-legenda { left: 0; right: 0; text-align: center; }
}
/* ===== Secao da mesa: foto de Rosh Hashana + Salmo 23:5 ===== */
.secao-mesa {
position: relative;
overflow: hidden;
padding: 120px 0;
background:
radial-gradient(ellipse 50% 60% at 75% 50%, rgba(96, 68, 24, 0.35), transparent 70%),
#0c0a07;
}
.secao-mesa-grid {
position: relative;
z-index: 1;
display: grid;
grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
gap: 64px;
align-items: center;
max-width: 1100px;
}
.secao-mesa-foto { margin: 0; position: relative; }
.secao-mesa-foto img {
width: 100%;
aspect-ratio: 4 / 5;
object-fit: cover;
object-position: center 60%;
border-radius: 22px;
border: 1px solid rgba(212, 175, 55, 0.5);
box-shadow: 0 30px 60px rgba(0, 0, 0, 0.6), 0 0 0 8px rgba(212, 175, 55, 0.06);
}
.secao-mesa-foto figcaption {
margin-top: 12px;
font-size: 0.78rem;
letter-spacing: 0.12em;
text-transform: uppercase;
color: rgba(245, 241, 230, 0.6);
text-align: center;
}
.secao-mesa-he {
display: block;
font-family: 'Frank Ruhl Libre', serif;
font-size: 1.5rem;
color: var(--color-accent);
margin-bottom: 18px;
}
.secao-mesa-he em { font-family: var(--font-body); font-style: normal; font-size: 0.85rem; letter-spacing: 0.12em; opacity: 0.8; }
.secao-mesa-texto blockquote { margin: 0 0 24px; }
.secao-mesa-texto blockquote p {
font-family: 'Playfair Display', Georgia, serif;
font-style: italic;
font-size: clamp(1.6rem, 3vw, 2.4rem);
line-height: 1.35;
color: #f7e7b0;
margin: 0 0 14px;
}
.secao-mesa-texto cite {
font-family: var(--font-heading);
font-style: normal;
font-size: 0.9rem;
letter-spacing: 0.16em;
color: var(--color-accent);
}
.secao-mesa-sub {
font-size: 1.05rem;
color: rgba(245, 241, 230, 0.82);
max-width: 460px;
margin: 0 0 28px;
}
@media (max-width: 900px) {
.secao-mesa { padding: 90px 0; }
.secao-mesa-grid { grid-template-columns: 1fr; gap: 36px; text-align: center; }
.secao-mesa-foto { max-width: 360px; margin: 0 auto; }
.secao-mesa-sub { margin-left: auto; margin-right: auto; }
}
/* proximo encontro logo depois dos botoes do inicio; numeros na fonte do texto (a Cinzel deixava em versalete) */
.proximo-culto { margin: 18px 0 6px; }
.proximo-culto-conta { font-family: var(--font-body); letter-spacing: 0.04em; }
/* =====================================================================
PADRAO DE DESIGN (fontes, cores e botoes) -- vale pro site inteiro
Fontes: Cinzel = titulos | Playfair italico = versiculos e citacoes |
Inter = textos e botoes | cursiva = so os detalhes ("a mesa",
"Igreja da Restauracao") | Frank Ruhl = so o hebraico
Cores: titulos e nomes em creme; dourado so no que importa (botao
principal, hebraico, ampulheta, numeros e o brilho no hover)
Botoes: 2 estilos -- principal (dourado cheio) e secundario (contorno)
===================================================================== */
:root {
--creme: #f5f1e6;
--creme-suave: rgba(245, 241, 230, 0.72);
--borda-suave: rgba(212, 175, 55, 0.26);
--font-quote: 'Playfair Display', Georgia, serif;
}
/* ---- 1. Fontes ---- */
.culto-step-node,
.culto-step h3,
.culto-faq-intro h3,
.ministerio-list-num,
.story-text p:first-of-type::first-letter {
font-family: var(--font-heading);
}
.culto-step h3,
.culto-faq-intro h3 { letter-spacing: 0.03em; }
.ministerio-list-num { font-weight: 700; font-size: 2.2rem; letter-spacing: 0.04em; }
.culto-faq-list summary { font-family: var(--font-body); font-weight: 600; }
.hero-verse,
.secao-mesa-texto blockquote p {
font-family: var(--font-quote);
font-style: italic;
}
.hero-verse { font-size: 1.12rem; }
/* ---- 2. Dourado so no que importa: titulos e nomes em creme ---- */
.section-title {
background: none;
color: var(--creme);
-webkit-text-fill-color: var(--creme);
}
.ministerio-list-item h3,
#lideranca .leader-card h3,
.culto-step h3,
.culto-faq-intro h3,
.secao-foto-titulo,
.vcarousel-label,
.secao-mesa-texto blockquote p {
color: var(--creme);
}
.leader-role { color: var(--creme-suave); }
/* bordas dos cartoes mais suaves (o dourado forte aparece so ao passar o mouse) */
.ministerio-list-item,
#lideranca .leader-card {
border-color: var(--borda-suave);
box-shadow: inset 0 1px 0 rgba(255, 241, 184, 0.1), inset 0 0 0 5px rgba(10, 9, 6, 0.55), inset 0 0 0 6px rgba(212, 175, 55, 0.08), 0 24px 50px rgba(0, 0, 0, 0.55);
}
.vslide { border-color: rgba(212, 175, 55, 0.2); }
/* ---- 3. Botoes: so 2 estilos, mesmo formato no site inteiro ---- */
.btn {
border-radius: 999px;
padding: 14px 30px;
font-family: var(--font-body);
font-weight: 700;
font-size: 0.8rem;
letter-spacing: 0.1em;
border-width: 1px;
transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
/* principal: dourado cheio */
.btn.btn--primary {
background: linear-gradient(135deg, #e8c862 0%, #c9a332 100%);
color: #14110a;
border-color: transparent;
box-shadow: 0 8px 22px rgba(212, 175, 55, 0.22);
}
.btn.btn--primary:hover {
background: linear-gradient(135deg, #f1d47a 0%, #d4af37 100%);
box-shadow: 0 12px 30px rgba(212, 175, 55, 0.35);
}
/* secundario: contorno fino creme, fica dourado ao passar o mouse */
.btn.btn--ghost,
.btn.btn--outline,
.btn.btn--dark,
.btn.leader-card-cta,
.btn.leader-card-cta.glow-ring-frame,
.vcarousel-som {
background: transparent;
background-image: none;
border: 1px solid rgba(245, 241, 230, 0.35);
color: var(--creme);
box-shadow: none;
}
.btn.leader-card-cta span { color: inherit; }
.btn.btn--ghost:hover,
.btn.btn--outline:hover,
.btn.btn--dark:hover,
.btn.leader-card-cta:hover,
.vcarousel-som:hover {
background: rgba(212, 175, 55, 0.08);
border-color: var(--color-accent);
color: var(--color-accent);
}
.vcarousel-som { border-radius: 999px; padding: 10px 20px; font-size: 0.75rem; letter-spacing: 0.1em; }
.vcarousel-som[aria-pressed="true"] { background: rgba(212, 175, 55, 0.12); border-color: var(--color-accent); color: var(--color-accent); }
/* ===== 4. Missao, Visao e Valores: icone do logo + uma frase em destaque ===== */
.valor-icone {
width: 66px;
height: 66px;
margin: 0 auto 18px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
border: 1px solid var(--borda-suave);
background: radial-gradient(circle, rgba(212, 175, 55, 0.12), transparent 70%);
}
.valor-icone svg {
width: 34px;
height: 34px;
fill: none;
stroke: var(--color-accent);
stroke-width: 1.6;
stroke-linecap: round;
stroke-linejoin: round;
}
.valor-icone svg .cheio { fill: var(--color-accent); stroke: none; }
.valor-card .valor-destaque {
font-family: var(--font-quote);
font-style: italic;
font-size: 1.25rem;
line-height: 1.4;
color: var(--creme);
margin: 0 0 10px;
}
.valor-card .valor-resto {
font-size: 0.92rem;
line-height: 1.7;
color: var(--creme-suave);
margin: 0;
}
/* ===== 5. Sobre: selinhos e citacao grande ===== */
.sobre-selos {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin: 18px 0 6px;
}
.sobre-selos span {
padding: 6px 14px;
border-radius: 999px;
border: 1px solid var(--borda-suave);
font-size: 0.72rem;
font-weight: 600;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--creme-suave);
}
.sobre-citacao {
margin: 26px 0;
padding: 4px 0 4px 22px;
border-left: 2px solid var(--color-accent);
font-family: var(--font-quote);
font-style: italic;
font-size: clamp(1.35rem, 2.4vw, 1.75rem);
line-height: 1.35;
color: var(--creme);
}
#sobre .story-text p { font-size: 0.98rem; color: var(--creme-suave); }
@media (max-width: 900px) { .sobre-selos { justify-content: flex-start; } }
/* ===== 6a. Menu: secao atual, menu fino ao rolar e menu do celular em tela cheia ===== */
.site-header { transition: background 0.3s ease, box-shadow 0.3s ease; }
.site-header .nav { transition: padding 0.3s ease; }
.site-header.is-scrolled { background: rgba(10, 9, 6, 0.94); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4); }
.site-header.is-scrolled .nav { padding-top: 9px; padding-bottom: 9px; }
.site-header.is-scrolled .brand-logo { width: 34px; height: 34px; }
.nav-links a:not(.nav-cta) { position: relative; border-bottom: 0; }
.nav-links a:not(.nav-cta)::after {
content: '';
position: absolute;
left: 4px;
right: 4px;
bottom: 2px;
height: 1px;
background: var(--color-accent);
transform: scaleX(0);
transition: transform 0.3s ease;
}
.nav-links a:not(.nav-cta):hover::after,
.nav-links a.active::after { transform: scaleX(1); }
.nav-links a.active { color: var(--color-accent); }
.nav-toggle span { transition: transform 0.3s ease, opacity 0.3s ease; }
.nav-toggle.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.is-open span:nth-child(2) { opacity: 0; }
.nav-toggle.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
@media (max-width: 720px) {
body.menu-aberto { overflow: hidden; }
.nav-toggle { position: relative; z-index: 120; }
.nav-links {
position: fixed;
inset: 0;
z-index: 110;
padding: 110px 24px 40px;
gap: 6px;
justify-content: center;
align-items: center;
background:
url("../img/logo/logo-dourado.png") center 18% / 120px no-repeat,
radial-gradient(ellipse at center, rgba(60, 44, 14, 0.5), transparent 70%),
rgba(10, 9, 6, 0.98);
border: 0;
}
.nav-links a:not(.nav-cta) {
font-family: var(--font-heading);
font-size: 1.35rem;
letter-spacing: 0.08em;
color: var(--creme);
padding: 12px 18px;
}
.nav-links .nav-cta { margin-top: 18px; padding: 14px 34px !important; font-size: 0.85rem; }
}
/* ===== 6b. Rodape: bencao de Numeros 6:24 ===== */
.footer-bencao {
position: relative;
z-index: 1;
text-align: center;
padding: 10px 0 46px;
margin-bottom: 46px;
border-bottom: 1px solid rgba(212, 175, 55, 0.18);
}
.footer-bencao img {
width: 84px;
height: 84px;
object-fit: contain;
margin: 0 auto 16px;
filter: drop-shadow(0 0 16px rgba(212, 175, 55, 0.35));
}
.footer-bencao-he {
font-family: 'Frank Ruhl Libre', serif;
font-size: 1.6rem;
color: var(--color-accent);
margin: 0 0 6px;
}
.footer-bencao-pt {
font-family: var(--font-quote);
font-style: italic;
font-size: 1.3rem;
color: var(--creme);
margin: 0 0 6px;
}
.footer-bencao cite {
font-style: normal;
font-size: 0.75rem;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--creme-suave);
}
/* ===== 8. Inicio: video um pouco mais escuro pra o titulo ganhar destaque ===== */
.hero::before {
background: linear-gradient(90deg, rgba(10, 9, 6, 0.6) 0%, rgba(10, 9, 6, 0.35) 55%, rgba(10, 9, 6, 0.2) 100%);
-webkit-mask-image: none;
mask-image: none;
}
.hero h1 { font-size: clamp(2.6rem, 6vw, 4.6rem); }
/* ajustes: texto de apoio da Missao/Visao/Valores menor e mais leve; proximo encontro so do tamanho do texto */
.values-grid .valor-card p.valor-resto { font-size: 0.92rem; font-weight: 400; color: var(--creme-suave); text-shadow: none; }
.values-grid .valor-card p.valor-destaque { font-weight: 500; text-shadow: none; }
.hero .proximo-culto { justify-self: start; width: fit-content; max-width: 100%; }
/* menu do celular: o vidro desfocado do cabecalho prendia o menu de tela cheia dentro dele.
Com o menu aberto o cabecalho fica sem o desfoque e o menu ocupa a tela toda. */
@media (max-width: 720px) {
body.menu-aberto .site-header {
-webkit-backdrop-filter: none;
backdrop-filter: none;
background: transparent;
box-shadow: none;
}
body.menu-aberto .nav-brand { position: relative; z-index: 120; }
}
@media (max-width: 720px) {
.nav-links { background-color: #0a0906; }
}
/* ===== Oracao final (bencao de Numeros 6:24-26) ===== */
.secao-bencao { min-height: 100vh; min-height: 100svh; display: flex; align-items: center; }
.bencao-conteudo { position: relative; z-index: 1; max-width: 820px; text-align: center; }
.bencao-logo {
width: 96px;
height: 96px;
object-fit: contain;
margin: 0 auto 22px;
filter: drop-shadow(0 0 22px rgba(212, 175, 55, 0.45));
}
.bencao-he {
display: block;
font-family: 'Frank Ruhl Libre', serif;
font-size: 1.3rem;
color: var(--color-accent);
margin-bottom: 8px;
}
.bencao-he em { font-family: var(--font-body); font-style: normal; font-size: 0.8rem; letter-spacing: 0.14em; opacity: 0.85; }
.bencao-titulo {
font-family: var(--font-heading);
font-size: clamp(2rem, 4vw, 3rem);
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--creme);
margin: 0 0 34px;
}
.bencao-texto { margin: 0 auto 26px; }
.bencao-linha {
font-family: var(--font-quote);
font-style: italic;
font-size: clamp(1.35rem, 2.6vw, 2rem);
line-height: 1.5;
color: var(--creme);
margin: 0 0 14px;
}
.bencao-linha strong {
font-style: normal;
font-family: var(--font-heading);
font-weight: 700;
letter-spacing: 0.06em;
color: var(--color-accent);
text-shadow: 0 0 18px rgba(212, 175, 55, 0.45);
}
.bencao-ref {
display: block;
font-style: normal;
font-size: 0.8rem;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--creme-suave);
margin-bottom: 30px;
}
.bencao-amem {
font-family: var(--font-heading);
font-size: 1.4rem;
letter-spacing: 0.1em;
color: var(--color-accent);
margin: 0;
}
.bencao-amem span { font-family: 'Frank Ruhl Libre', serif; margin-right: 10px; }
/* as linhas aparecem uma de cada vez */
.bencao-espera .bencao-linha,
.bencao-espera .bencao-ref,
.bencao-espera .bencao-amem {
opacity: 0;
transform: translateY(16px);
transition: opacity 0.9s ease, transform 0.9s ease;
}
.bencao-espera.is-visivel .bencao-linha,
.bencao-espera.is-visivel .bencao-ref,
.bencao-espera.is-visivel .bencao-amem { opacity: 1; transform: none; }
.bencao-espera.is-visivel .bencao-linha:nth-child(2) { transition-delay: 0.7s; }
.bencao-espera.is-visivel .bencao-linha:nth-child(3) { transition-delay: 1.4s; }
.bencao-espera.is-visivel .bencao-ref { transition-delay: 2.1s; }
.bencao-espera.is-visivel .bencao-amem { transition-delay: 2.6s; }
/* Oracao final: a mesma bencao em hebraico, embaixo do portugues */
.bencao-hebraico {
margin: 0 auto 28px;
padding-top: 24px;
max-width: 560px;
border-top: 1px solid rgba(212, 175, 55, 0.22);
}
.bencao-hebraico p {
font-family: 'Frank Ruhl Libre', serif;
font-size: clamp(1.35rem, 2.6vw, 1.8rem);
line-height: 1.6;
color: var(--color-accent);
margin: 0;
}
.bencao-hebraico strong {
font-weight: 700;
color: #f1d47a;
text-shadow: 0 0 18px rgba(212, 175, 55, 0.5);
}
.bencao-espera .bencao-hebraico { opacity: 0; transform: translateY(16px); transition: opacity 1s ease, transform 1s ease; }
.bencao-espera.is-visivel .bencao-hebraico { opacity: 1; transform: none; transition-delay: 2.1s; }
.bencao-espera.is-visivel .bencao-ref { transition-delay: 2.8s; }
.bencao-espera.is-visivel .bencao-amem { transition-delay: 3.3s; }
/* Oracao final: maquina de escrever. As linhas ficam no lugar (sem o fade antigo) e cada letra
aparece quando o JS liga ".on"; o cursor dourado pisca na ultima letra escrita.
A referencia e o Amem aparecem quando termina de escrever. */
.bencao-espera .bencao-linha,
.bencao-espera .bencao-hebraico {
opacity: 1;
transform: none;
transition: none;
}
.digitando-espera .letra { opacity: 0; }
.digitando-espera .letra.on { opacity: 1; }
.letra.cursor { position: relative; }
.letra.cursor::after {
content: '';
position: absolute;
top: 0.12em;
bottom: 0.08em;
right: -3px;
width: 2px;
background: var(--color-accent);
box-shadow: 0 0 8px rgba(212, 175, 55, 0.8);
animation: cursorPisca 0.7s steps(1) infinite;
}
.bencao-hebraico .letra.cursor::after { right: auto; left: -3px; }
@keyframes cursorPisca { 50% { opacity: 0; } }
.bencao-espera.is-visivel .bencao-ref,
.bencao-espera.is-visivel .bencao-amem { opacity: 0; transform: translateY(16px); }
.bencao-espera.digitou .bencao-ref,
.bencao-espera.digitou .bencao-amem { opacity: 1; transform: none; transition-delay: 0.2s; }
.bencao-espera.digitou .bencao-amem { transition-delay: 0.7s; }
/* Paginas de cada ministerio: conteudo explicativo.
Dois cartoes ("Para quem esta chegando" e "Para nos, na fe"), glossario de termos em hebraico,
passo a passo do encontro, lista de musicas (louvor), faixa de informacoes e chamada pro WhatsApp */
.minp-conteudo { display: flex; flex-direction: column; gap: 56px; margin-top: 24px; text-align: left; }
.minp-dois-olhares { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
.minp-card,
.minp-info,
.minp-cta {
position: relative;
border-radius: 22px;
background: linear-gradient(165deg, rgba(38, 30, 12, 0.94) 0%, rgba(14, 12, 7, 0.93) 48%, rgba(10, 9, 6, 0.95) 100%);
-webkit-backdrop-filter: blur(16px);
backdrop-filter: blur(16px);
border: 1px solid rgba(212, 175, 55, 0.45);
box-shadow: inset 0 1px 0 rgba(255, 241, 184, 0.16), inset 0 0 0 5px rgba(10, 9, 6, 0.55), inset 0 0 0 6px rgba(212, 175, 55, 0.14), 0 24px 50px rgba(0, 0, 0, 0.5);
}
.minp-card { padding: 34px 30px 30px; }
.minp-card::before,
.minp-cta::before {
content: '';
position: absolute;
left: 26px;
right: 26px;
top: 0;
height: 2px;
background: linear-gradient(90deg, transparent, var(--color-accent), transparent);
}
.minp-card-eyebrow {
display: block;
margin-bottom: 10px;
font-size: 0.7rem;
font-weight: 600;
letter-spacing: 0.3em;
text-transform: uppercase;
color: var(--color-accent);
}
.minp-card h2,
.minp-titulo {
margin: 0 0 16px;
font-family: var(--font-heading);
font-size: clamp(1.3rem, 1.1rem + 0.6vw, 1.6rem);
line-height: 1.25;
color: #f7e7b0;
}
.minp-card p,
.minp-intro,
.minp-cta p {
margin: 0 0 14px;
font-size: 1rem;
line-height: 1.8;
color: rgba(245, 241, 230, 0.86);
}
.minp-card--fe { border-color: rgba(243, 214, 120, 0.6); }
.minp-verso {
margin: 20px 0 0;
padding: 4px 0 4px 18px;
border-left: 2px solid var(--color-accent);
font-family: var(--font-heading);
font-size: 1.02rem;
line-height: 1.6;
font-style: italic;
color: #f7e7b0;
}
.minp-verso cite {
display: block;
margin-top: 8px;
font-family: var(--font-body);
font-size: 0.75rem;
font-style: normal;
font-weight: 600;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--color-accent);
}
.minp-bloco { text-align: center; }
.minp-titulo { position: relative; padding-bottom: 16px; margin-bottom: 26px; }
.minp-titulo::after {
content: '';
position: absolute;
left: 50%;
bottom: 0;
width: 48px;
height: 2px;
transform: translateX(-50%);
background: linear-gradient(90deg, transparent, var(--color-accent), transparent);
}
.minp-intro { max-width: 640px; margin: -10px auto 24px; }
/* passo a passo numerado */
.minp-passos {
counter-reset: minp-passo-n;
list-style: none;
margin: 0;
padding: 0;
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 18px;
text-align: left;
}
.minp-passos li {
counter-increment: minp-passo-n;
position: relative;
padding: 22px 20px 22px;
border-radius: 18px;
background: rgba(10, 9, 6, 0.82);
border: 1px solid rgba(212, 175, 55, 0.3);
}
.minp-passos li::before {
content: counter(minp-passo-n);
display: flex;
align-items: center;
justify-content: center;
width: 38px;
height: 38px;
margin-bottom: 14px;
border-radius: 50%;
font-family: var(--font-heading);
font-weight: 700;
color: #1a1408;
background: linear-gradient(145deg, #f7e08f, var(--color-accent) 55%, var(--color-accent-dark));
box-shadow: 0 0 18px rgba(212, 175, 55, 0.4);
}
.minp-passos strong { display: block; margin-bottom: 6px; font-size: 1.02rem; color: #f7e7b0; }
.minp-passos span { font-size: 0.93rem; line-height: 1.65; color: rgba(245, 241, 230, 0.8); }
/* glossario de termos em hebraico */
.minp-glossario {
margin: 0;
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 14px;
text-align: left;
}
.minp-glossario > div {
padding: 18px 22px;
border-radius: 16px;
background: rgba(10, 9, 6, 0.82);
border: 1px solid rgba(212, 175, 55, 0.3);
}
.minp-glossario dt {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 12px;
margin-bottom: 6px;
font-weight: 700;
font-size: 1.05rem;
color: #f7e7b0;
}
.minp-glossario dt span { font-family: 'Frank Ruhl Libre', serif; font-size: 1.25rem; font-weight: 500; color: var(--color-accent); }
.minp-glossario dd { margin: 0; font-size: 0.93rem; line-height: 1.65; color: rgba(245, 241, 230, 0.8); }
/* musicas do louvor: cada uma abre a busca no YouTube */
.minp-musicas {
list-style: none;
margin: 0;
padding: 0;
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 14px;
text-align: left;
}
.minp-musicas a {
display: flex;
align-items: flex-start;
gap: 16px;
height: 100%;
padding: 18px 20px;
border-radius: 16px;
background: rgba(10, 9, 6, 0.82);
border: 1px solid rgba(212, 175, 55, 0.3);
text-decoration: none;
transition: border-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}
.minp-musicas a:hover { transform: translateY(-3px); border-color: rgba(243, 214, 120, 0.85); box-shadow: 0 0 26px rgba(212, 175, 55, 0.22); }
.minp-musica-play {
flex: none;
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border-radius: 50%;
font-size: 0.85rem;
color: #1a1408;
background: linear-gradient(145deg, #f7e08f, var(--color-accent) 55%, var(--color-accent-dark));
}
.minp-musica-txt strong { display: block; font-size: 1.02rem; color: #f7e7b0; }
.minp-musica-txt em { display: block; margin: 2px 0 6px; font-style: normal; font-size: 0.75rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-accent); }
.minp-musica-txt > span { display: block; font-size: 0.92rem; line-height: 1.6; color: rgba(245, 241, 230, 0.8); }
/* faixa de informacoes rapidas */
.minp-info {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
padding: 8px;
}
.minp-info > div { padding: 20px 22px; }
.minp-info > div + div { border-left: 1px solid rgba(212, 175, 55, 0.22); }
.minp-info span {
display: block;
margin-bottom: 6px;
font-size: 0.7rem;
font-weight: 600;
letter-spacing: 0.26em;
text-transform: uppercase;
color: var(--color-accent);
}
.minp-info strong { font-size: 0.98rem; font-weight: 600; line-height: 1.5; color: #f5f1e6; }
/* chamada final */
.minp-cta { padding: 38px 30px; text-align: center; }
.minp-cta p { max-width: 520px; margin: 0 auto 22px; font-size: 1.08rem; }
@media (max-width: 900px) {
.minp-passos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
.minp-conteudo { gap: 44px; }
.minp-dois-olhares,
.minp-glossario,
.minp-musicas { grid-template-columns: 1fr; }
.minp-card { padding: 28px 22px 24px; }
.minp-info { grid-template-columns: 1fr; }
.minp-info > div + div { border-left: none; border-top: 1px solid rgba(212, 175, 55, 0.22); }
}
@media (max-width: 460px) {
.minp-passos { grid-template-columns: 1fr; }
}