/* ========================================================================== PLATAFORMA EVANGELHO · COR POR MÓDULO -------------------------------------------------------------------------- Esta é a ÚNICA folha que acrescenta algo ao tema. O tema.css é extração verbatim da linha do tempo e não deve ser editado — quando ela evoluir, basta reextrair. Tudo que for da plataforma mora aqui. O que faz: redefine apenas o acento (--ouro e derivados) conforme o módulo, para o leitor saber onde está. Fundo, tipografia, cartões, tabelas e espaçamentos continuam idênticos em toda a plataforma. Cada par foi calibrado para o seu próprio tema — claros sobre o escuro, escuros sobre o claro — mantendo contraste legível nos dois. Uso: (no , nunca no : tema.css casa [data-theme="light"][data-modulo="..."] no mesmo elemento) Carregar DEPOIS de tema.css. ========================================================================== */ /* ========================================================================== HUB — só o que a página inicial precisa e o tema não tem ========================================================================== */ .hub-hero { padding: 3rem 0 2.2rem; border-bottom: 1px solid var(--borda); margin-bottom: 2rem; } .hub-hero h1 { font-size: clamp(1.7rem, 5vw, 2.6rem); font-weight: var(--peso-forte); color: var(--perg); letter-spacing: -0.025em; line-height: 1.1; } .hub-hero h1 em { font-style: normal; color: var(--ouro); } .hub-hero p { margin-top: .7rem; color: var(--perg-dim); max-width: 60ch; font-size: 1.02rem; } .hub-busca-wrap { margin-top: 1.6rem; max-width: 520px; position: relative; } .hub-busca-wrap .busca { width: 100%; padding-left: 2.2rem; } .hub-busca-ico { position: absolute; left: .75rem; top: 50%; transform: translateY(-50%); color: var(--perg-dimmer); pointer-events: none; display: flex; } .hub-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(330px, 100%), 1fr)); gap: 1.1rem; } .hub-card { display: flex; flex-direction: column; background: var(--card-bg); border: 1px solid var(--card-borda); border-top: 3px solid var(--ouro); border-radius: 12px; padding: 1.2rem 1.3rem 1rem; box-shadow: var(--card-shadow); transition: var(--trans-tema), transform .18s ease; text-decoration: none; color: inherit; } .hub-card:hover { box-shadow: var(--card-shadow-hover); transform: translateY(-3px); border-color: var(--ouro-border); border-top-color: var(--ouro); text-decoration: none; } .hub-card-topo { display: flex; align-items: center; gap: .7rem; margin-bottom: .55rem; } .hub-card-ico { width: 40px; height: 40px; flex: 0 0 40px; display: grid; place-items: center; border-radius: 10px; background: var(--ouro-bg); color: var(--ouro); } .hub-card-ico svg { width: 21px; height: 21px; stroke: currentColor; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; } .hub-card h2 { font-size: 1.12rem; font-weight: var(--peso-forte); color: var(--perg); letter-spacing: -0.015em; line-height: 1.2; } .hub-card-tag { font-size: .7rem; color: var(--ouro); font-weight: var(--peso-semi); letter-spacing: .04em; margin-top: .12rem; } .hub-card p { color: var(--perg-dim); font-size: .87rem; margin-bottom: .9rem; } .hub-card h2 a { color: inherit; text-decoration: none; } .hub-card h2 a:hover { color: var(--ouro); text-decoration: none; } /* porta de entrada do cartão de módulo — o cartão inteiro é o link */ .hub-card-acesso { margin-top: auto; padding-top: .8rem; border-top: 1px solid var(--borda); display: flex; align-items: center; gap: .4rem; font-size: .8rem; font-weight: var(--peso-semi); color: var(--ouro); } .hub-card-acesso svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .18s ease; } .hub-card:hover .hub-card-acesso svg { transform: translateX(4px); } /* ações de um arquivo: Abrir / Ler aqui / Baixar */ .hub-card-acoes { margin-top: auto; padding-top: .8rem; border-top: 1px solid var(--borda); display: flex; gap: .45rem; flex-wrap: wrap; } .hub-arquivo { padding-bottom: .9rem; } .hub-arquivo:hover { transform: none; } .hub-arquivo .hub-card-topo { margin-bottom: .9rem; align-items: flex-start; } .hub-arquivo h2 { font-size: 1rem; } .hub-acao, .doc-btn { display: inline-flex; align-items: center; gap: .4rem; font-family: inherit; font-size: .78rem; font-weight: var(--peso-semi); line-height: 1.2; padding: .45rem .85rem; border-radius: 999px; white-space: nowrap; border: 1px solid var(--borda-forte); background: transparent; color: var(--perg); text-decoration: none; cursor: pointer; transition: background-color .15s ease, border-color .15s ease, color .15s ease; } .hub-acao:hover, .doc-btn:hover { border-color: var(--ouro); color: var(--ouro); text-decoration: none; } .hub-acao svg, .doc-btn svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; } .hub-acao-forte, .doc-btn-forte { background: var(--ouro); border-color: transparent; color: var(--noite); font-weight: 700; } .hub-acao-forte:hover, .doc-btn-forte:hover { background: var(--ouro); color: var(--noite); border-color: transparent; box-shadow: 0 0 0 3px var(--ouro-bg); } .hub-sem-resultado { padding: 3rem 1rem; text-align: center; color: var(--perg-dim); font-style: italic; } /* display:flex do cartão venceria o [hidden] do navegador */ .hub-card[hidden], [data-ed-bloco][hidden], [data-ed-item][hidden], [data-ed-grupo][hidden] { display: none; } @media (max-width: 600px) { .hub-hero { padding: 2rem 0 1.6rem; } .hub-grid { grid-template-columns: 1fr; gap: .9rem; } } /* ========================================================================== TÍTULO DE SEÇÃO — índices de módulo e Escola Dominical ========================================================================== */ .ed-secao-tit { display: flex; align-items: center; gap: .8rem; font-size: .68rem; letter-spacing: .24em; text-transform: uppercase; font-weight: 700; color: var(--ouro); margin: 2.2rem 0 1rem; } .ed-secao-tit::after { content: ''; flex: 1; height: 1px; background: var(--borda); } /* ========================================================================== ESCOLA DOMINICAL — página do módulo Desktop: trimestres lado a lado, cada um com as lições à vista. Celular: uma coluna, mesma ordem. ========================================================================== */ .ed-selo { display: inline-block; margin-bottom: 1rem; font-size: .62rem; letter-spacing: .18em; text-transform: uppercase; font-weight: 700; color: var(--ouro); background: var(--ouro-bg); border: 1px solid var(--ouro-border); padding: .3rem .75rem; border-radius: 999px; } .ed-trimestres { display: grid; gap: 1.2rem; grid-template-columns: repeat(auto-fit, minmax(min(520px, 100%), 1fr)); } .ed-tri { display: flex; flex-direction: column; background: var(--card-bg); border: 1px solid var(--card-borda); border-top: 3px solid var(--ouro); border-radius: 12px; box-shadow: var(--card-shadow); overflow: hidden; transition: var(--trans-tema), box-shadow .18s ease; } .ed-tri:hover { box-shadow: var(--card-shadow-hover); } .ed-tri-cab { display: block; padding: 1.3rem 1.4rem 1.1rem; text-decoration: none; color: inherit; border-bottom: 1px solid var(--borda); } .ed-tri-cab:hover { text-decoration: none; } .ed-tri-cab:hover h2 { color: var(--ouro); } .ed-tri-selo { display: inline-block; font-size: .6rem; letter-spacing: .16em; text-transform: uppercase; font-weight: 700; padding: .25rem .65rem; border-radius: 999px; color: var(--ouro); background: var(--ouro-bg); border: 1px solid var(--ouro-border); } .ed-tri-selo.atual { color: var(--noite); background: var(--ouro); border-color: transparent; } .ed-tri h2 { font-size: 1.28rem; font-weight: var(--peso-forte); color: var(--perg); letter-spacing: -.015em; line-height: 1.22; margin: .65rem 0 .3rem; transition: color .15s ease; } .ed-tri-sub { color: var(--perg-dim); font-size: .9rem; font-style: italic; } .ed-tri-meta { display: flex; flex-wrap: wrap; gap: .3rem 1rem; margin-top: .75rem; font-size: .74rem; font-weight: 600; color: var(--perg-dim); } .ed-tri-corpo { display: flex; flex-direction: column; gap: 1.1rem; padding: 1.05rem 1.4rem 1.3rem; flex: 1; } .ed-bloco-tit { font-size: .58rem; letter-spacing: .2em; text-transform: uppercase; font-weight: 700; color: var(--perg-dim); margin-bottom: .4rem; } .ed-licoes, .ed-apoio { list-style: none; margin: 0; padding: 0; } .ed-licoes { display: grid; gap: .1rem 1rem; grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 1fr)); } .ed-apoio { display: flex; flex-direction: column; gap: .1rem; } .ed-licoes a, .ed-apoio a { display: flex; align-items: baseline; gap: .6rem; padding: .42rem .5rem; margin: 0 -.5rem; border-radius: 7px; font-size: .87rem; line-height: 1.3; color: var(--perg-corpo); text-decoration: none; } .ed-licoes a:hover, .ed-apoio a:hover { background: var(--noite-hover); color: var(--ouro); text-decoration: none; } .ed-num { flex: 0 0 1.7rem; font-family: var(--mono, ui-monospace, monospace); font-size: .74rem; font-weight: 700; color: var(--ouro); font-variant-numeric: tabular-nums; } .ed-tipo { margin-left: auto; flex-shrink: 0; font-size: .64rem; letter-spacing: .04em; text-transform: uppercase; color: var(--perg-dim); } .ed-tri-rodape { margin-top: auto; padding-top: .2rem; } /* lista de lições de um trimestre */ .ed-lista { display: grid; gap: .7rem; grid-template-columns: repeat(auto-fill, minmax(min(460px, 100%), 1fr)); } .ed-licao { display: flex; align-items: center; gap: 1rem; padding: .95rem 1.1rem; background: var(--card-bg); border: 1px solid var(--card-borda); border-radius: 12px; box-shadow: var(--card-shadow); text-decoration: none; color: inherit; transition: var(--trans-tema), transform .18s ease; } a.ed-licao:hover { transform: translateY(-2px); border-color: var(--ouro-border); box-shadow: var(--card-shadow-hover); text-decoration: none; } .ed-licao-num { flex: 0 0 42px; height: 42px; display: grid; place-items: center; border-radius: 10px; background: var(--ouro-bg); color: var(--ouro); font-family: var(--mono, ui-monospace, monospace); font-weight: 700; font-size: .88rem; } .ed-licao-num svg { width: 19px; height: 19px; stroke: currentColor; fill: none; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; } .ed-licao-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .18rem; } .ed-licao-txt b { font-size: .97rem; font-weight: var(--peso-forte); color: var(--perg); line-height: 1.3; transition: color .15s ease; } a.ed-licao:hover .ed-licao-txt b { color: var(--ouro); } .ed-licao-txt small { font-size: .78rem; color: var(--perg-dim); line-height: 1.4; } .ed-licao-seta { color: var(--perg-dim); transition: transform .18s ease, color .18s ease; } a.ed-licao:hover .ed-licao-seta { color: var(--ouro); transform: translateX(3px); } .ed-licao-falta { background: transparent; border-style: dashed; box-shadow: none; } .ed-licao-falta .ed-licao-num { background: var(--noite-3); color: var(--perg-dim); } .ed-licao-falta .ed-licao-txt b { color: var(--perg-dim); } .ed-outros { display: grid; gap: 1.1rem; grid-template-columns: repeat(auto-fill, minmax(min(330px, 100%), 1fr)); } .ed-vazio { padding: 3rem 1rem; text-align: center; color: var(--perg-dim); font-style: italic; } /* ========================================================================== VISUALIZADOR DE DOCUMENTOS (plataforma/ver.php) ========================================================================== */ .doc { padding-top: 1.6rem; padding-bottom: 1rem; } .doc-cab { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem 1.5rem; padding-bottom: 1.1rem; margin-bottom: 1.4rem; border-bottom: 1px solid var(--borda); } .doc-cab-texto { min-width: 0; } .doc-tipo { font-size: .64rem; letter-spacing: .2em; text-transform: uppercase; font-weight: 700; color: var(--ouro); margin-bottom: .35rem; } .doc-cab h1 { font-size: clamp(1.35rem, 3.2vw, 2.05rem); font-weight: var(--peso-forte); color: var(--perg); letter-spacing: -.02em; line-height: 1.15; overflow-wrap: anywhere; } .doc-acoes { display: flex; flex-wrap: wrap; gap: .5rem; } .doc-aviso { margin: 1rem 0 2rem; } .doc-pdf { height: calc(100vh - var(--evc-h, 44px) - 12rem); min-height: 520px; border: 1px solid var(--borda); border-radius: 12px; overflow: hidden; background: var(--noite-2); } .doc-pdf iframe { display: block; width: 100%; height: 100%; border: 0; } .doc-nota { margin-top: .7rem; font-size: .8rem; color: var(--perg-dim); } .doc-nota a { color: var(--ouro); } .doc-leitura.com-sumario { display: grid; gap: 2.6rem; align-items: start; grid-template-columns: minmax(220px, 290px) minmax(0, 1fr); } .doc-sumario { position: sticky; top: calc(var(--evc-h, 44px) + 1rem); max-height: calc(100vh - var(--evc-h, 44px) - 2rem); overflow-y: auto; padding-right: .6rem; border-right: 1px solid var(--borda); font-size: .8rem; } .doc-sumario-tit { font-size: .58rem; letter-spacing: .2em; text-transform: uppercase; font-weight: 700; color: var(--ouro); margin: 0 0 .5rem .5rem; } .doc-sumario a { display: block; padding: .28rem .5rem; border-radius: 6px; line-height: 1.35; color: var(--perg-dim); text-decoration: none; } .doc-sumario a.n2 { color: var(--perg-corpo); font-weight: 600; margin-top: .35rem; } .doc-sumario a.n3 { padding-left: 1.3rem; font-size: .76rem; } .doc-sumario a:hover { background: var(--noite-hover); color: var(--ouro); text-decoration: none; } .doc-corpo { max-width: 62rem; color: var(--perg-corpo); line-height: 1.7; overflow-wrap: break-word; } .doc-corpo h2, .doc-corpo h3, .doc-corpo h4, .doc-corpo h5, .doc-corpo h6 { scroll-margin-top: calc(var(--evc-h, 44px) + 1rem); line-height: 1.25; } .doc-corpo > :first-child { margin-top: 0; } .doc-corpo h2 { font-size: 1.5rem; font-weight: var(--peso-forte); color: var(--perg); letter-spacing: -.015em; margin: 2.6rem 0 .9rem; padding-bottom: .45rem; border-bottom: 1px solid var(--borda); } .doc-corpo h3 { font-size: 1.18rem; font-weight: 700; color: var(--ouro); margin: 2rem 0 .7rem; } .doc-corpo h4 { font-size: 1.02rem; font-weight: 700; color: var(--perg); margin: 1.6rem 0 .5rem; } .doc-corpo h5, .doc-corpo h6 { font-size: .8rem; font-weight: 700; color: var(--perg-dim); text-transform: uppercase; letter-spacing: .08em; margin: 1.4rem 0 .5rem; } .doc-corpo p { margin: 0 0 1rem; } .doc-corpo ul, .doc-corpo ol { margin: 0 0 1rem; padding-left: 1.5rem; } .doc-corpo ul { list-style-type: disc; } .doc-corpo ol:not([type]) { list-style-type: decimal; } .doc-corpo ol[type="a"] { list-style-type: lower-alpha; } .doc-corpo ol[type="A"] { list-style-type: upper-alpha; } .doc-corpo ol[type="i"] { list-style-type: lower-roman; } .doc-corpo ol[type="I"] { list-style-type: upper-roman; } .doc-corpo li { margin: .25rem 0; } .doc-corpo li > ul, .doc-corpo li > ol { margin: .25rem 0; } .doc-corpo .doc-sub { padding-left: 2.9rem; } .doc-corpo li::marker { color: var(--ouro); font-weight: 700; } .doc-corpo strong { color: var(--perg); font-weight: var(--peso-forte); } .doc-corpo a { color: var(--ouro); text-decoration: underline; text-underline-offset: 2px; } .doc-corpo blockquote { margin: 1.2rem 0; padding: .8rem 1.1rem; border-left: 3px solid var(--ouro); background: var(--ouro-bg); border-radius: 0 8px 8px 0; } .doc-corpo blockquote > :last-child { margin-bottom: 0; } .doc-corpo hr { border: 0; border-top: 1px solid var(--borda); margin: 2rem 0; } .doc-corpo code { font-family: var(--mono, ui-monospace, monospace); font-size: .88em; background: var(--noite-2); border: 1px solid var(--borda); padding: .05rem .35rem; border-radius: 4px; } .doc-corpo pre { margin: 0 0 1.2rem; padding: .9rem 1rem; overflow-x: auto; background: var(--noite-2); border: 1px solid var(--borda); border-radius: 8px; font-size: .82rem; line-height: 1.55; } .doc-corpo pre code { background: none; border: 0; padding: 0; } .doc-corpo .doc-centro { text-align: center; } .doc-tabela { overflow-x: auto; margin: 0 0 1.3rem; border: 1px solid var(--borda); border-radius: 8px; } .doc-corpo table { width: 100%; border-collapse: collapse; font-size: .86rem; line-height: 1.5; } .doc-corpo th, .doc-corpo td { padding: .5rem .75rem; text-align: left; vertical-align: top; border-bottom: 1px solid var(--borda); } .doc-corpo th { background: var(--noite-2); color: var(--perg); font-weight: 700; } .doc-corpo tr:last-child td { border-bottom: 0; } .doc-corpo td > :last-child { margin-bottom: 0; } .doc-texto { white-space: pre-wrap; font-family: var(--mono, ui-monospace, monospace); font-size: .86rem; } @media (max-width: 980px) { .doc-leitura.com-sumario { display: block; } .doc-sumario { position: static; max-height: 40vh; margin-bottom: 1.6rem; padding: .7rem; border: 1px solid var(--borda); border-radius: 10px; } } @media (max-width: 600px) { .doc-pdf { height: 75vh; min-height: 420px; } .doc-acoes { width: 100%; } } @media print { .doc-sumario, .doc-acoes, .doc-nota { display: none; } .doc-leitura.com-sumario { display: block; } }