/* Estilo do site publico da igreja. As cores e as fontes vem do cadastro, injetadas como variaveis CSS pelo App.razor -- por isso aqui so se usa var(), nunca um valor fixo da marca. O carrega duas classes: modelo-acolhida | modelo-tradicao | modelo-agenda | modelo-simples capa-vitral | capa-arcos | capa-ondas | capa-liso A primeira decide a personalidade do site; a segunda, o desenho da capa quando a igreja ainda nao subiu foto. A ORDEM das secoes nao esta aqui: e decidida no Home.razor, porque e conteudo, nao aparencia. */ :root { --tinta: #1f2328; --tinta-suave: #5b6472; --papel: #ffffff; --papel-suave: #f6f7f9; --borda: #e5e8ec; --raio: 10px; } body { font-family: var(--fonte-texto, system-ui, sans-serif); color: var(--tinta); background: var(--papel); } h1, h2, h3, .nome-site, .capa-titulo { font-family: var(--fonte-titulo, Georgia, serif); } /* Texto longo respira melhor perto de 65 caracteres por linha. */ .texto-longo { max-width: 62ch; line-height: 1.75; color: var(--tinta-suave); } .texto-centrado { margin-inline: auto; text-align: center; } /* Quem escreveu digitou em varias linhas; e assim que deve aparecer. Sem isso, horarios e textos longos viram um paragrafo unico. */ .horarios, .texto-longo { white-space: pre-line; } .secao { padding-block: 3.5rem; } .titulo-secao { font-size: 1.6rem; font-weight: 700; margin-bottom: 1.5rem; text-wrap: balance; } /* ---------------- cabecalho ---------------- */ .cabecalho { background: var(--cor-primaria); color: #fff; } .cabecalho a { color: #fff; } .cabecalho nav a { text-decoration: none; opacity: .9; padding-bottom: 2px; border-bottom: 2px solid transparent; } .cabecalho nav a:hover, .cabecalho nav a:focus-visible { opacity: 1; border-bottom-color: var(--cor-secundaria); } .cabecalho .logo { height: 44px; } .cabecalho .nome-site { font-weight: 700; font-size: 1.15rem; } /* ---------------- capa ---------------- */ .capa { position: relative; background-color: var(--cor-primaria); color: #fff; display: flex; align-items: center; min-height: 22rem; overflow: hidden; } .capa-conteudo { position: relative; z-index: 1; padding-block: 3rem; } .capa-titulo { font-size: clamp(2rem, 5vw, 3.4rem); font-weight: 700; text-wrap: balance; margin: 0; } .capa-slogan { font-size: clamp(1.05rem, 2vw, 1.35rem); opacity: .92; margin-top: .75rem; max-width: 45ch; } .capa-horarios { margin-top: 1.75rem; padding-top: 1.25rem; border-top: 2px solid var(--cor-secundaria); display: inline-block; font-size: 1.05rem; } /* --- capas desenhadas --- Valem quando nao ha foto. Sao camadas de gradiente sobre a cor primaria: nenhuma imagem, nenhuma requisicao, e funcionam em qualquer cor que a igreja escolher. O ::before so aparece sem foto porque o Home.razor, quando tem foto, sobrescreve o background da .capa por estilo inline -- e a foto fica por cima. */ .capa::before { content: ""; position: absolute; inset: 0; opacity: .5; } .capa-vitral::before { background: linear-gradient(135deg, var(--cor-secundaria) 0 18%, transparent 18% 100%), linear-gradient(45deg, rgba(255,255,255,.22) 0 30%, transparent 30% 100%), linear-gradient(200deg, rgba(0,0,0,.35) 0 45%, transparent 45% 100%); } .capa-arcos::before { background-image: radial-gradient(circle at 50% 100%, transparent 68%, var(--cor-secundaria) 68% 71%, transparent 71%), radial-gradient(circle at 50% 100%, transparent 46%, rgba(255,255,255,.28) 46% 49%, transparent 49%); background-size: 9rem 9rem; background-repeat: repeat-x; background-position: bottom; } .capa-ondas::before { background: radial-gradient(120% 60% at 10% 110%, var(--cor-secundaria) 0%, transparent 60%), radial-gradient(90% 50% at 90% -10%, rgba(255,255,255,.35) 0%, transparent 65%); } .capa-liso::before { background: linear-gradient(160deg, rgba(255,255,255,.16), rgba(0,0,0,.4)); } /* ---------------- horarios em faixa ---------------- */ .faixa-horarios { background: var(--papel-suave); border-block: 1px solid var(--borda); padding-block: 2.5rem; text-align: center; } .faixa-horarios .horarios { font-size: 1.1rem; } /* ---------------- eventos ---------------- */ .lista-eventos { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); } .evento { border: 1px solid var(--borda); border-radius: var(--raio); overflow: hidden; background: var(--papel); display: flex; flex-direction: column; } .evento-foto { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; } .evento-corpo { padding: 1.1rem; } .evento-data { color: var(--cor-secundaria); font-weight: 600; font-size: .8rem; letter-spacing: .06em; text-transform: uppercase; } .evento-nome { font-size: 1.05rem; font-weight: 700; margin: .35rem 0 .5rem; } .evento-texto { color: var(--tinta-suave); font-size: .93rem; margin: 0; } .evento-local { font-size: .85rem; color: var(--tinta-suave); margin-top: .6rem; } .link-mais { display: inline-block; margin-top: 1.5rem; color: var(--cor-primaria); font-weight: 600; text-decoration: none; } .link-mais:hover { text-decoration: underline; } /* ---------------- galeria ---------------- */ .galeria { display: grid; gap: .75rem; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); } .galeria img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--raio); } /* ---------------- missao ---------------- */ .missao { background: var(--papel-suave); border-top: 3px solid var(--cor-secundaria); padding-block: 3.5rem; text-align: center; } /* ---------------- linha do tempo ---------------- */ .linha-tempo { position: relative; padding-left: 2rem; } .linha-tempo::before { content: ""; position: absolute; left: .5rem; top: 0; bottom: 0; width: 2px; background: var(--cor-secundaria); } .linha-tempo .marco { position: relative; padding-bottom: 1.75rem; } .linha-tempo .marco::before { content: ""; position: absolute; left: -1.62rem; top: .35rem; width: .75rem; height: .75rem; border-radius: 50%; background: var(--cor-primaria); border: 2px solid var(--cor-secundaria); } /* ---------------- rodape ---------------- */ .rodape { background: var(--cor-primaria); color: #fff; margin-top: 3rem; } .rodape a { color: #fff; } .rodape a:hover { color: var(--cor-secundaria); } /* ========================================================================= OS QUATRO MODELOS Cada um muda proporcao, peso e temperatura. A ordem das secoes vem do Home.razor -- aqui e so a aparencia. ========================================================================= */ /* ACOLHIDA -- capa alta, tudo generoso, horario ja na primeira tela. */ .modelo-acolhida .capa { min-height: 32rem; text-align: center; } .modelo-acolhida .capa-conteudo { width: 100%; } .modelo-acolhida .capa-slogan { margin-inline: auto; } .modelo-acolhida .titulo-secao { text-align: center; } .modelo-acolhida .texto-longo { margin-inline: auto; } .modelo-acolhida .evento { box-shadow: 0 2px 14px rgba(0,0,0,.07); border-color: transparent; } /* TRADICAO -- serifada e sobria: capa mais baixa, regra fina no titulo, texto em coluna estreita como pagina impressa. */ .modelo-tradicao .capa { min-height: 20rem; } .modelo-tradicao .capa-titulo { font-weight: 500; letter-spacing: .01em; } .modelo-tradicao .titulo-secao { font-weight: 500; border-bottom: 1px solid var(--borda); padding-bottom: .6rem; } .modelo-tradicao .texto-longo { max-width: 58ch; font-size: 1.05rem; } .modelo-tradicao .evento { border-radius: 0; } .modelo-tradicao .galeria img { border-radius: 0; } .modelo-tradicao .missao { background: var(--papel); } /* AGENDA -- os encontros primeiro e em lista horizontal, densa; capa curta para nao empurrar o que interessa para baixo da dobra. */ .modelo-agenda .capa { min-height: 15rem; } .modelo-agenda .secao { padding-block: 2.5rem; } .modelo-agenda .lista-eventos { grid-template-columns: 1fr; gap: .75rem; } .modelo-agenda .evento { flex-direction: row; } .modelo-agenda .evento-foto { width: 11rem; flex: 0 0 11rem; aspect-ratio: auto; } .modelo-agenda .evento-corpo { padding: .9rem 1.1rem; } @media (max-width: 640px) { .modelo-agenda .evento { flex-direction: column; } .modelo-agenda .evento-foto { width: 100%; flex: none; aspect-ratio: 16 / 9; } } /* SIMPLES -- uma pagina curta, sem enfeite: capa baixa, tipografia maior, espaco no lugar de decoracao. */ .modelo-simples .capa { min-height: 14rem; } .modelo-simples .secao { padding-block: 2.75rem; } .modelo-simples .texto-longo { font-size: 1.08rem; } .modelo-simples .missao { border-top-width: 2px; } /* ---------------- acessibilidade ---------------- */ a:focus-visible, button:focus-visible { outline: 3px solid var(--cor-secundaria); outline-offset: 2px; } @media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }