/* Via-Sacra — a folha do Terço Virtual, com o escopo trocado e o que é próprio desta devoção no fim do arquivo. Escopado em .a12-via-sacra: nada daqui pode vazar para a moldura do portal. Tema claro, sempre, como o Terço: fundo claro e superfícies brancas, e cada cor escrita aqui, sem depender do tema de quem visita. A base é cópia de propósito, e não importação: os dois apps vão divergir no desenho, e um ajuste no Terço não pode mexer na Via-Sacra calado. O que se aprendeu medindo lá — a faixa livre entre as barras, o palco do celular sem rolagem de documento, os alvos de 44 px — vem junto, com os comentários. */ .a12-via-sacra{ /* Azul Manto — confiança e acolhimento. É o azul da marca A12 (#005199), o mesmo que o Terço do Santuário sempre usou, e o mesmo que a Bíblia já carrega. Cada valor traz o contraste medido sobre a superfície sutil. */ --marca:#005199; /* 7,96:1 — ações, contas grandes, foco */ --marca-escura:#003361; /* 12,76:1 — títulos e texto forte */ --marca-media:#1E70B8; /* 5,17:1 — texto de apoio, rótulos */ --superficie:#E3EEF7; --superficie-sutil:#F4F8FB; --sobre-marca:#FFFFFF; /* o que se escreve em cima do azul */ --ground:var(--superficie-sutil); --surface:#FFFFFF; --surface-2:var(--superficie); --ink:var(--marca-escura); --ink-2:#3B5F7D; --ink-3:#7793AC; --linha:#CFE0EE; --foco:var(--marca); --leitura:1.125rem; --entrelinha:1.75; --coluna:62ch; --altura-barra:17rem; /* o quanto a barra fixa ocupa embaixo */ --barra-topo:4.25rem; /* e a barra grudada em cima */ /* A altura de verdade da barra da reza, medida pela ilha e escrita aqui: ela varia conforme a barra mostra legenda ou instrução. `--altura-barra` é a reserva de espaço no fim da página; esta é a que define a FAIXA LIVRE onde a oração, o cartão e a conta corrente são centrados — e é por os três usarem o mesmo número que o traço do cartão aponta para a conta certa. */ --barra-reza:17rem; /* o que sobra da tela entre as duas barras flutuantes. É a altura de que a oração dispõe, e é a medida pela qual ela se dimensiona */ --faixa-livre:calc(100svh - var(--barra-topo) - var(--barra-reza)); --sombra:0 1px 2px rgba(0,51,97,.07), 0 6px 20px rgba(0,51,97,.08); --raio:10px; /* O terço como objeto: conta de pérola, conta grande em azul, a medalha da flor e o oval da Aparecida em branco com aro. */ --perola:radial-gradient(circle at 32% 26%, #FFFFFF 0%, #FBFDFF 22%, #E7F0F7 58%, #CBDCE9 82%, #9FB8CC 100%); --perola-rezada:radial-gradient(circle at 32% 26%, #EFF5FA 0%, #D8E6F1 45%, #A9C2D6 100%); --azul-conta:radial-gradient(circle at 32% 26%, #3C86C4 0%, #1E70B8 38%, #005199 72%, #003361 100%); --cordao:#9FB8CC; /* O ouro é o das auréolas das ilustrações, não um amarelo escolhido: média ponderada dos 235 mil pixels dourados dos vinte recortes. */ --ouro:#CFB764; --ouro-claro:#F0DFA6; --branco-conta:radial-gradient(circle at 36% 30%, #FFFFFF 0%, #FFFFFF 62%, #EAF2F9 100%); --brilho-conta:0 2px 3px rgba(0,51,97,.26), 0 0 0 .5px rgba(0,81,153,.28), inset 0 -2px 3px rgba(0,51,97,.2), inset 0 2px 2px rgba(255,255,255,.75); } /* ------------------------------------------------------------------ base */ *,*::before,*::after{box-sizing:border-box} body{margin:0} .a12-via-sacra{ background:var(--ground); color:var(--ink); font-family:"Nunito Sans",system-ui,-apple-system,sans-serif; -webkit-font-smoothing:antialiased; min-height:100vh; } .a12-via-sacra h1,.a12-via-sacra h2,.a12-via-sacra h3{ font-family:Bitter,Georgia,serif; color:var(--marca-escura); line-height:1.2; text-wrap:balance; margin:0; } .a12-via-sacra p{margin:0} .a12-via-sacra :focus-visible{outline:3px solid var(--foco); outline-offset:3px; border-radius:4px} .a12-via-sacra img{max-width:100%; height:auto} @media (prefers-reduced-motion:reduce){ .a12-via-sacra *{animation:none!important; transition:none!important} } .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} /* Um atalho de teclado antes de tudo: quem navega por tabulação não deve atravessar a barra inteira para chegar à reza. */ .pular{ position:absolute; left:-9999px; top:0; z-index:20; background:var(--marca); color:var(--sobre-marca); padding:.75rem 1.25rem; border-radius:0 0 var(--raio) 0; font-weight:700; text-decoration:none; } .pular:focus{left:0} /* ------------------------------------------------------------------ barra */ /* Três grupos: o som à esquerda, os mistérios num menu flutuante no meio e a ajuda à direita — o arranjo do terço que está no ar, refeito com os desenhos do Santuário e as cores do sistema. A barra em si não tem fundo: quem flutua são as peças, sobre a cena. */ .barra{ position:sticky; top:0; z-index:10; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:1rem; padding:.75rem clamp(1rem,4vw,2rem); } .barra__lado{display:flex; align-items:center; gap:.625rem; min-width:0} .barra__lado--fim{justify-content:flex-end} /* O nome e o menu numa peça só, em duas seções. O nome estava solto sobre o fundo da página — era o único elemento da barra sem superfície própria — e a ilustração passando atrás dele comeria a leitura. */ .barra__centro{ display:grid; justify-items:center; background:var(--surface); border:1px solid var(--linha); border-radius:calc(var(--raio) + 4px); box-shadow:var(--sombra); overflow:hidden; } /* o nome é rótulo, não link: não há para onde ir a partir dele — daí também não haver estado de passagem do mouse */ .selo{ display:block; width:100%; margin:0; text-align:center; white-space:nowrap; padding:.625rem 1.5rem; color:var(--marca-escura); font-family:Bitter,Georgia,serif; font-weight:700; border-bottom:1px solid var(--linha); } /* o nome é o título da página, não um rótulo de menu: em 1,125rem ele pesava o mesmo que os nomes dos mistérios logo abaixo e sumia entre eles */ .selo__nome{ font-family:Roboto,system-ui,-apple-system,sans-serif; font-weight:700; font-size:clamp(1.375rem,2vw,1.75rem); line-height:1.15; letter-spacing:-.01em; } /* O menu é a segunda seção da peça: a superfície e a sombra são dela. */ .barra__misterios ul{ display:flex; gap:.25rem; list-style:none; margin:0; padding:.375rem; } .barra__misterios a{ display:grid; justify-items:center; gap:.25rem; padding:.5rem 1rem; border-radius:var(--raio); white-space:nowrap; color:var(--ink-2); text-decoration:none; font-size:.875rem; font-weight:700; min-height:44px; transition:background .18s ease, color .18s ease; } .barra__sinal{width:26px; height:26px; color:var(--marca-media)} .barra__misterios a:hover{background:var(--surface-2); color:var(--marca-escura)} .barra__misterios a[aria-current="page"]{background:var(--marca-escura); color:var(--sobre-marca)} .barra__misterios a[aria-current="page"] .barra__sinal{color:var(--sobre-marca)} @media (prefers-reduced-motion:reduce){.barra__misterios a{transition:none}} /* O som e a ajuda: peças da mesma família, menores. */ .barra__botao, .barra__ajuda{ display:inline-flex; align-items:center; gap:.375rem; padding:.5rem .875rem; min-height:44px; background:var(--surface); border:1px solid var(--linha); border-radius:999px; box-shadow:var(--sombra); color:var(--marca); font-family:inherit; font-size:.9375rem; font-weight:700; text-decoration:none; cursor:pointer; } .barra__icone{width:20px; height:20px; flex:none} .barra__botao:hover, .barra__ajuda:hover{background:var(--surface-2); border-color:var(--cordao)} .barra__botao[aria-pressed="true"]{background:var(--marca); border-color:var(--marca); color:var(--sobre-marca)} /* ------------------------------------------------- a página de uma reza */ .reza{ max-width:calc(var(--coluna) + 8rem); margin:0 auto; padding:clamp(1.5rem,5vw,3.5rem) clamp(1rem,4vw,2rem) 6rem; } /* com a ilha montada, o fim da página não pode ficar debaixo da barra */ /* Nada de respiro no rodapé da página durante a reza: o que sobrasse aí ficaria FORA da linha da grade, e a coluna grudada do texto se soltaria por essa diferença ao chegar no fim. Todo o respiro vive no cordão, que é quem dá altura à linha. */ .a12-via-sacra[data-modo="guiado"] .reza{padding-bottom:0} .a12-via-sacra[data-modo="guiado"] .etapa{scroll-margin-bottom:var(--altura-barra)} .reza h1{font-size:clamp(2rem,5vw,2.75rem); margin-bottom:.75rem} .reza__descricao{ font-family:Literata,Georgia,serif; font-size:1.0625rem; line-height:1.7; color:var(--ink-2); max-width:56ch; } .secao{ font-size:1.375rem; margin:3rem 0 1rem; padding-top:1.5rem; border-top:1px solid var(--linha); } /* o sprite não se vê */ .sprite{position:absolute; width:0; height:0; overflow:hidden} /* ----------------------------------------------- o terço em texto, inteiro */ .fluxo{list-style:none; margin:2rem 0 0; padding:0; display:grid; gap:1rem} .etapa{ background:var(--surface); border:1px solid var(--linha); border-radius:var(--raio); padding:clamp(1.25rem,3vw,2rem); box-shadow:var(--sombra); scroll-margin-top:5rem; } .etapa__titulo{font-size:1.25rem; display:flex; flex-direction:column; gap:.25rem} .etapa__ordinal{font-size:.8125rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--marca-media); font-family:"Nunito Sans",sans-serif} .etapa__assunto{font-size:1.375rem} .etapa__nota,.etapa__repete{color:var(--ink-2); font-size:.9375rem; margin-top:.5rem} .etapa__imagem{width:100%; border-radius:var(--raio); margin-top:1rem; background:var(--surface-2)} /* o momento é a unidade da reza guiada; na leitura corrida ele é só mais um bloco de oração, e por isso divide a aparência com .oracao */ .momento{margin-top:1rem} .momento__instrucao{ font-family:"Nunito Sans",sans-serif; font-size:.9375rem; color:var(--marca-media); margin:.25rem 0 .5rem} .etapa--cruz{border-left:4px solid var(--marca)} .etapa--misterio{border-left:4px solid var(--marca)} .etapa--fim{border-left:4px solid var(--marca)} .oracao__titulo,.momento .oracao__titulo{ font-size:.8125rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--marca-media); font-family:"Nunito Sans",sans-serif; margin-bottom:.375rem; } .oracao__texto{ font-family:Literata,Georgia,serif; font-size:var(--leitura); line-height:var(--entrelinha); color:var(--ink); max-width:var(--coluna); } /* ------------------------------------------------------------- como rezar */ .como-rezar__resumo{color:var(--ink-2); max-width:56ch; line-height:1.7} /* ========================================================================== Modo guiado — o palco da reza. O documento que o servidor manda é o terço inteiro, para ler e para o buscador. Quando a ilha entra, o mesmo HTML vira ritual: a ilustração do mistério ocupa a tela, uma oração de cada vez fica no centro, e o terço pende na lateral, rolando junto — como quem passa as contas entre os dedos. Nada é reconstruído; muda o que está em cena. O modo claro é o principal: o véu sobre a ilustração é quente e claro, e o texto continua marrom-escuro sobre ele, com o contraste que o AA pede. ========================================================================== */ .a12-via-sacra[data-modo="guiado"]{ /* sem ilustração de fundo: a cena é o terço e o texto */ background:var(--ground); } /* a barra do topo recua: no ritual ela não é o assunto */ .a12-via-sacra[data-modo="guiado"] .barra{background:transparent; border-bottom:0} /* o menu dos mistérios fica: ele é a navegação do app, e some-lo durante a reza deixava quem quisesse trocar de mistério sem saída a não ser recarregar */ /* A ilustração do mistério ao fundo, no canto direito. O recorte foi feito com a figura deitada na borda de baixo do quadro — é por isso que ela nasce do rodapé e não flutua. Fica atrás de tudo e não recebe clique; é cena, não conteúdo: quem diz qual mistério é são o título e o cartão. */ /* A caixa da cena. Ela existe porque no encerramento a cena tem duas camadas — a Basílica atrás e a padroeira diante dela —, e as duas precisam de um mesmo referencial, alinhadas pela base: é assim que a imagem fica em pé no chão do desenho em vez de flutuar sobre ele. */ .a12-via-sacra[data-modo="guiado"] .cena-caixa{ position:fixed; right:0; top:50%; translate:0 -50%; z-index:0; pointer-events:none; display:grid; justify-items:center; align-items:end; /* A que entra espera a que sai quase acabar: sobrepostas em meia opacidade, os dois desenhos se somariam e virariam um borrão. */ animation:cena-entra 1s ease .35s both; } .a12-via-sacra[data-modo="guiado"] .cena-caixa[data-saindo]{ animation:cena-sai 1s ease both; } .a12-via-sacra[data-modo="guiado"] .cena{ grid-area:1 / 1; display:block; /* medida pela altura: 45% da tela, e a largura sai da proporção do recorte. À direita ela não cruza a coluna do texto, que fica no centro-esquerda. */ height:45svh; width:auto; max-width:50vw; } /* a cena de fora das dezenas é larga e baixa (644 × 301): medida pela altura ela ficaria enorme, então esta se mede pela largura */ .a12-via-sacra[data-modo="guiado"] .cena[data-santuario]{ height:auto; width:min(38vw, 30rem); max-width:none; } .a12-via-sacra[data-modo="guiado"] .cena__padroeira{ grid-area:1 / 1; align-self:end; justify-self:center; height:min(34svh, 22rem); width:auto; display:block; filter:drop-shadow(0 6px 18px rgba(0,51,97,.18)); } @keyframes cena-entra{from{opacity:0} to{opacity:1}} @keyframes cena-sai{from{opacity:1} to{opacity:0}} @media (prefers-reduced-motion:reduce){ .a12-via-sacra[data-modo="guiado"] .cena-caixa{animation:none} } /* o palco fica por cima da cena */ .a12-via-sacra[data-modo="guiado"] .reza{position:relative; z-index:1} /* a coluna vira palco: uma etapa em cena, sem moldura. A grade, a largura e o rodapé vêm da regra das três colunas, mais abaixo — aqui ficou só o que ainda é desta camada. O que havia aqui era de um arranjo anterior e, por vir antes, parecia inofensivo: eram os 288 px de rodapé que soltavam a coluna do texto ao fim da reza. */ .a12-via-sacra[data-modo="guiado"] .reza__descricao, .a12-via-sacra[data-modo="guiado"] .como-rezar, .a12-via-sacra[data-modo="guiado"] .etapa:not([data-corrente]){display:none} /* O h1 sai do desenho, não do documento. No palco quem nomeia a série é o menu de cima, com o mistério corrente marcado — mas a página continua precisando de um cabeçalho de primeiro nível, que é como se sabe, por leitor de tela, onde se chegou. Apagá-lo deixava a reza sem nome nenhum na árvore. */ .a12-via-sacra[data-modo="guiado"] .reza > h1{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; } .a12-via-sacra[data-modo="guiado"] .fluxo{margin:0; gap:0} .a12-via-sacra[data-modo="guiado"] .etapa[data-corrente]{ background:none; border:0; box-shadow:none; padding:0; text-align:center; animation:entra .5s ease both; } @keyframes entra{from{opacity:0; transform:translateY(8px)} to{opacity:1; transform:none}} @media (prefers-reduced-motion:reduce){ .a12-via-sacra[data-modo="guiado"] .etapa[data-corrente]{animation:none} } /* a ilustração já é o fundo: no palco ela não se repete no meio do texto */ .a12-via-sacra[data-modo="guiado"] .etapa__imagem, .a12-via-sacra[data-modo="guiado"] .etapa__nota, .a12-via-sacra[data-modo="guiado"] .etapa__repete, .a12-via-sacra[data-modo="guiado"] .etapa__repete{display:none} /* O cartão à direita já nomeia a oração. Repetir o nome no alto do texto o fazia aparecer três vezes na mesma tela — título da conta, rótulo da oração e cartão. No mistério o título fica: ali ele não é rótulo, é o nome do mistério que se contempla. */ /* Fora dos mistérios o nome da etapa já está dito duas vezes — no cartão preso à conta e na barra —, e desenhá-lo uma terceira empilharia dois títulos em cima da oração. Some do desenho, fica na árvore: apagado, a ordem dos cabeçalhos saltava do h1 da página para o h3 da oração. */ .a12-via-sacra[data-modo="guiado"] .etapa:not(.etapa--estacao) .etapa__titulo{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; } .a12-via-sacra[data-modo="guiado"] .etapa__titulo{align-items:center; gap:.5rem; margin-bottom:1.5rem} .a12-via-sacra[data-modo="guiado"] .etapa__ordinal{font-size:.875rem} .a12-via-sacra[data-modo="guiado"] .etapa__assunto{font-size:clamp(1.5rem,4vw,2.125rem)} /* uma oração de cada vez */ /* um momento de cada vez no palco: a etapa inteira continua no documento, e é o mesmo documento que quem desliga o JavaScript lê inteiro */ .a12-via-sacra[data-modo="guiado"] .momento{display:none} .a12-via-sacra[data-modo="guiado"] .momento[data-em-cena]{display:block; margin-top:1.5rem} .a12-via-sacra[data-modo="guiado"] .oracao__titulo{font-size:.875rem; letter-spacing:.1em} .a12-via-sacra[data-modo="guiado"] .oracao__texto{ /* Tamanho de leitura, não de cartaz: até 20 px, com medida de 46 caracteres. A 28 px e 34 caracteres a oração virava uma coluna estreita e altíssima — a Salve Rainha passava de 640 px e não cabia em tela nenhuma. A letra é medida na FAIXA LIVRE, não em pixels: numa tela baixa ela encolhe junto com o espaço que tem para caber. O `min` guarda o teto — o tamanho de sempre, que é o que se lê numa tela alta; a faixa só entra quando é ela a mais apertada. O divisor é medido na maior oração do terço, que é o CREDO: 560 caracteres contra 470 da Salve Rainha. Calibrado pela Salve Rainha, o Credo passava da faixa e rolava dentro dela. E é medido na pior largura, não na melhor: quanto mais estreita a coluna, mais linhas a mesma oração ocupa — o Credo precisa de 28 numa coluna de 444 px e de 32 numa de 341. Um divisor por largura seria mais justo e custa interpolação em duas dimensões; 33 serve a todas, e o teto continua valendo em tela alta, onde sobra altura. O tamanho é o mesmo para todas as orações na mesma tela de propósito: se cada uma calculasse o seu, o texto mudaria de corpo a cada conta e a reza inteira ficaria sacudindo. */ font-size:clamp(0.75rem, min(clamp(1.0625rem,1.5vw,1.25rem), var(--faixa-livre) / 33), 1.25rem); line-height:1.75; max-width:46ch; margin:0 auto; text-wrap:pretty; } /* o terço pendurado: no ritual ele sai da barra e vai para a lateral */ /* O terço é a página, como sempre foi neste site: desce inteiro, do Credo à Salve Rainha, e quem reza desce com ele. O que o legado não tinha era o texto — aqui ele acompanha, grudado ao lado, trocando quando a conta troca. */ /* Três colunas, com o terço no meio: o texto à esquerda, o cordão no centro da tela e o cartão de estado à direita, ligado à conta por um traço. As colunas de fora têm a mesma largura justamente para o cordão cair no centro. */ .a12-via-sacra[data-modo="guiado"] .reza{ --vao:clamp(1.5rem,5vw,4rem); --cordao-larg:8.5rem; display:grid; grid-template-columns:minmax(0,1fr) var(--cordao-larg) minmax(0,1fr); gap:var(--vao); align-items:start; align-content:start; max-width:76rem; /* sem respiro no topo: a coluna do texto gruda logo abaixo da barra, e é o respiro que a fazia escorregar antes de grudar. O cordão ganha o seu. */ min-height:auto; padding-top:0; } /* A folga vai no cordão, não na página: é ele que dá altura à linha da grade, e é essa altura que a coluna grudada do texto tem para grudar. Posta no `padding` da página ela ficava fora da linha, e o texto se soltava ao chegar na última conta. Meia tela embaixo também é o que deixa a Aparecida subir até o meio quando se rola até o fim. */ .a12-via-sacra[data-modo="guiado"] .caminho-objeto{ /* âncora da marca do passeio: o holofote precisa recortar um grupo de contas — as três Ave-Marias, as dez da dezena — e a marca que cobre o grupo se posiciona contra este contêiner. Sem `relative` ela se penduraria na página e o holofote acenderia um pedaço vazio da tela. Sem z-index: continua na mesma camada, abaixo da coluna do texto, que é positioned com z-index 1. */ position:relative; padding-top:2rem; /* meia tela para a última conta poder subir até o meio, mais a barra e o rodapé da página: o que ficasse abaixo da linha da grade seria rolagem sem onde grudar, e a coluna do texto subiria por essa diferença ao chegar ao fim — medido, eram 288 px */ padding-bottom:calc(50svh + var(--altura-barra)); } /* O cordão desce com a página, inteiro. Ele já foi uma trilha que rolava por dentro, da altura da tela — e cortava o terço: quem quisesse ver o resto não tinha como. Aqui quem rola é a página, e o terço inteiro está sempre ao alcance. */ .a12-via-sacra[data-modo="guiado"] .caminho-objeto{grid-column:2; grid-row:1} /* A coluna do texto divide a linha com o cordão: é a altura dessa linha que dá à posição grudada onde grudar. Numa linha só sua, ela acabava antes do cordão e o texto se soltava no meio da reza. */ /* A coluna do texto atravessa a grade inteira: é a altura da área dela que dá à posição grudada onde grudar, e limitada a uma linha ela se soltava ao chegar ao fim. Acrescentar folga ao cordão não resolvia — a folga aumenta a página na mesma medida em que aumenta a linha. */ .a12-via-sacra[data-modo="guiado"] .fluxo{grid-column:1; grid-row:1 / -1} /* o portal do fim da reza não ocupa lugar na grade: o que ele monta é um diálogo do navegador, que vive na camada de cima da página */ .a12-via-sacra[data-modo="guiado"] .conclusao{display:contents} /* O texto fica na altura da conta que está sendo rezada: a ilha centra a conta corrente na tela, e a coluna acompanha. Antes o texto ficava no alto e a conta no meio, e os olhos tinham de escolher um dos dois. */ .a12-via-sacra[data-modo="guiado"] .fluxo{ position:sticky; top:var(--barra-topo); min-height:calc(100svh - var(--barra-topo) - var(--barra-reza)); display:flex; flex-direction:column; /* `safe` é o que salva a Salve Rainha: oração que cabe fica centrada na faixa livre; oração mais alta que ela encosta o começo no topo em vez de transbordar para os dois lados e sumir por baixo da barra. Centrar em `50vh`, como antes, ignorava as duas barras e cortava o começo. */ justify-content:safe center; } /* E se ainda assim não couber — letra no piso, tela muito baixa —, a oração rola dentro da própria faixa. Não é um modo à parte: a caixa é sempre do tamanho da faixa, e a barra de rolagem só aparece quando o texto passa dela. Antes a coluna se soltava — `position:static` — para a página inteira poder rolar até ela; mas a coluna nasce no alto de uma página de dois mil pixels, e com a reza na última conta o texto ia parar muito acima da tela. Ele não era cortado: sumia. */ .a12-via-sacra[data-modo="guiado"] .etapa[data-corrente]{ max-height:var(--faixa-livre); overflow-y:auto; overscroll-behavior:contain; } /* ------------------------------------------------- o cartão de estado */ /* O cartão acompanha a CONTA, não a tela: a ilha mede onde a conta corrente está dentro da página e escreve em --conta-y. Assim ele desce com o terço quando se rola, e o traço continua ligando os dois. */ .a12-via-sacra[data-modo="guiado"] .reza{position:relative} .a12-via-sacra[data-modo="guiado"] .caminho-estado{ position:absolute; top:var(--conta-y,0px); left:0; right:0; transform:translateY(-50%); pointer-events:none; display:grid; grid-template-columns:minmax(0,1fr) var(--cordao-larg) minmax(0,1fr); gap:var(--vao); transition:top .3s ease; } @media (prefers-reduced-motion:reduce){.a12-via-sacra[data-modo="guiado"] .caminho-estado{transition:none}} .estado{ grid-column:3; pointer-events:auto; position:relative; align-self:center; max-width:22rem; padding:.875rem 1rem; background:var(--surface); border:1px solid var(--linha); border-radius:var(--raio); box-shadow:var(--sombra); } /* o traço sai da conta e chega ao cartão: atravessa o vão e a metade do cordão */ .estado__traco{ position:absolute; right:100%; top:50%; width:calc(var(--vao) + var(--cordao-larg) / 2); height:1px; background:linear-gradient(to right, transparent, var(--cordao) 35%, var(--cordao)); } .estado__traco::after{ content:""; position:absolute; right:-3px; top:-2.5px; width:6px; height:6px; border-radius:50%; background:var(--marca); } .estado__oracao{ font-family:Bitter,Georgia,serif; font-weight:700; font-size:1.0625rem; color:var(--marca-escura); line-height:1.3; } /* A linha da posição nunca quebra: ela é a mesma frase o tempo todo, e vê-la passar de uma para duas linhas conforme o número muda faz o cartão pular de altura a cada conta. O nome da oração acima pode quebrar à vontade. */ .estado__onde{ font-family:"Nunito Sans",sans-serif; font-size:.8125rem; color:var(--ink-2); margin-top:.25rem; font-variant-numeric:tabular-nums; white-space:nowrap; } .a12-via-sacra[data-modo="guiado"] .caminho-objeto .colar{ flex-direction:column; flex-wrap:nowrap; align-items:center; width:100%; max-height:none; overflow:visible; gap:0; } .a12-via-sacra[data-modo="guiado"] .caminho-objeto .colar li{ min-height:32px; width:100%; justify-content:center; background:linear-gradient(var(--cordao),var(--cordao)) 50% 0/2px 100% no-repeat; } /* proporção de terço: a conta ~26, o Pai-Nosso ~34, a medalha ~3× a conta e a cruz ~5×. Antes a medalha era 7× a conta, e o fio aparecia mais que as contas. */ .a12-via-sacra[data-modo="guiado"] .caminho-objeto .colar__conta{width:100%; height:32px} .a12-via-sacra[data-modo="guiado"] .caminho-objeto .colar__conta::before{width:21px; height:21px} .a12-via-sacra[data-modo="guiado"] .caminho-objeto .colar__conta[data-tipo="grande"]{height:40px} .a12-via-sacra[data-modo="guiado"] .caminho-objeto .colar__conta[data-tipo="grande"]::before{width:27px; height:27px} .a12-via-sacra[data-modo="guiado"] .caminho-objeto .colar__conta[data-tipo="fim"]::before{ width:80px; height:96px} .a12-via-sacra[data-modo="guiado"] .caminho-objeto .colar__conta[data-tipo="fim"]{height:108px} .a12-via-sacra[data-modo="guiado"] .caminho-objeto .colar__aparecida{width:54px; height:70px} /* A medalha junta o pendente ao laço, e há uma só num terço — antes ela era desenhada em cada mistério, cinco medalhas no mesmo cordão. Aqui ela não é peça ao lado da conta: é a própria conta que abre a primeira dezena, como o Santuário informa. Por isso tem botão, recebe foco e conta entre as 62: é nela que se anuncia o mistério e se reza o Pai-Nosso. */ .a12-via-sacra[data-modo="guiado"] .caminho-objeto .colar__conta[data-tipo="medalha"]{height:80px} .a12-via-sacra[data-modo="guiado"] .caminho-objeto .colar__conta[data-tipo="medalha"]::before{ width:70px; height:70px} .a12-via-sacra[data-modo="guiado"] .caminho-objeto .colar__conta[data-tipo="medalha"] .colar__desenho{ width:45px; height:45px; color:var(--marca-media)} .a12-via-sacra[data-modo="guiado"] .caminho-objeto .colar__conta[data-tipo="cruz"]{height:160px} .a12-via-sacra[data-modo="guiado"] .caminho-objeto .colar__desenho{width:46px; height:46px} .a12-via-sacra[data-modo="guiado"] .caminho-objeto .colar__conta[data-tipo="cruz"] .colar__desenho{ width:104px; height:134px} /* O fio nasce ATRÁS da cruz e desce: nunca aparece acima dela. São duas exigências, e elas se contradizem se o fio for curto demais ou longo demais. Curto — os 46% de antes — ele começava exatamente onde a tinta da cruz termina, medido no pixel: 147 px e 147 px, uma emenda topo a topo que lia como um cabo saindo do pé. Longo, correndo a célula inteira, ele reaparecia acima da cabeça, e ali em cima não há terço nenhum para justificá-lo. 70% da célula resolve as duas: o fio começa lá dentro do corpo da cruz, onde o desenho o esconde, e só se vê quando sai por baixo. */ .a12-via-sacra[data-modo="guiado"] .caminho-objeto .colar li:first-child{ padding-bottom:.75rem; background-position:50% 100%; background-size:2px 70%; } .a12-via-sacra[data-modo="guiado"] .caminho-objeto .colar__conta[aria-current="step"]::after{ width:27px; height:27px} /* no cordão a auréola tem espaço para se abrir */ .a12-via-sacra[data-modo="guiado"] .caminho-objeto .colar__conta[aria-current="step"]::before{ box-shadow:var(--brilho-conta), 0 0 0 2px color-mix(in srgb, var(--ouro) 80%, transparent), 0 0 14px 5px color-mix(in srgb, var(--ouro) 55%, transparent), 0 0 34px 14px color-mix(in srgb, var(--ouro) 26%, transparent); } /* a última conta ganha ar embaixo — é onde a reza termina — e o cordão para nela: terço não tem sobra de fio pendurada */ .a12-via-sacra[data-modo="guiado"] .caminho-objeto .colar li:last-child{ padding-bottom:30vh; background-size:2px 34px; } /* Em tela estreita as três colunas não cabem. Vira uma coluna só: o cartão em cima, o texto no meio e o cordão como fita deitada embaixo — que é como um terço cabe num celular. O traço some, porque sem as colunas ele não liga nada. Este bloco vem depois de todas as regras da trilha vertical de propósito: com a mesma especificidade, quem vem por último manda, e posto antes ele era anulado silenciosamente. */ /* --------------------------------------------- o terço no celular */ /* Em tela estreita o terço não é uma página que rola: é UMA TELA, com quatro faixas na ordem em que se usa. De cima para baixo — a série que se reza, a oração que se lê, o cordão ao alcance do polegar, e os controles. A oração fica no meio porque é o que se lê; o cordão fica embaixo porque é o que se toca. ┌───────────────────────┐ barra │ 🔇 Terço Virtual ? │ │ ○ ○ ○ ○ as séries │ ├───────────────────────┤ a oração │ │ (o que resta) │ SINAL DA CRUZ │ │ Em nome do Pai... │ ├───────────────────────┤ o cordão │ ‹ ●●○○○◍○○ › │ ├───────────────────────┤ a reza │ legenda · progresso │ │ estado ‹ ▶ › │ └───────────────────────┘ Antes isto era a mesma grade de três colunas do desktop, colapsada — e o que colapsava não cabia: o menu das quatro séries saía com 404 px numa tela de 335, e o cordão guardava o respiro de meia tela do palco vertical, 848 px de altura que empurravam a oração para dentro dele. */ @media (max-width:59.999rem){ /* O DOCUMENTO NÃO ROLA. Não basta o palco ter a altura da janela: no Safari do iPhone o documento tem a altura do viewport GRANDE — 741 px numa janela de 659 —, e sobra rolagem para esconder a barra de endereço. Qualquer arrasto levava junto a barra dos mistérios, que saía pelo alto da tela. Medido no simulador: `docTop 82`, `barra -82>-6`. `:has()` é o que deixa isto valer só no modo guiado: sem JavaScript o terço é um documento longo e tem de rolar como qualquer página. Navegador sem `:has()` ignora a regra e fica como estava — e a ilha, por sua vez, já não rola a janela em tela estreita. */ html:has(.a12-via-sacra[data-modo="guiado"]), body:has(.a12-via-sacra[data-modo="guiado"]){ height:100%; overflow:hidden; overscroll-behavior:none; } /* A página é a tela: uma coluna de quatro faixas, sem rolagem de documento. Quem rola é a oração, dentro dela, e o cordão, na horizontal. No desktop as duas barras flutuam sobre o terço e por isso a página reserva altura para elas; aqui elas SÃO faixas, e reserva viraria buraco. */ .a12-via-sacra[data-modo="guiado"]{ /* `--altura-barra` é a reserva que a página faz para a barra flutuante do desktop; aqui não há flutuação, então não há reserva. `--barra-topo` e `--barra-reza` não se declaram: quem as escreve é a ilha, medindo as duas barras, e é por elas que a oração e a cena sabem onde a tela acaba. */ --altura-barra:0rem; /* As duas medidas do celular moram aqui, na RAIZ da ilha, e não no palco: a cena é fixa e pendurada na raiz, e variável declarada no palco não chega até ela — `max-height:var(--cena-altura)` virava `none` calado e a arte voltava a subir por trás do texto. */ --fita:5.5rem; /* A arte tem altura DECLARADA, e declarada por último: a oração escolhe primeiro — mas só as 11rem que fazem uma oração curta caber. O resto é dela, até 30dvh. A reserva era de 17rem, e sobrava para a arte um carimbo de 90 px: com a deixa acesa trazendo o texto sozinha, a oração longa não precisa mais caber inteira, e a arte pode ser arte. Sem altura declarada o texto centrava na faixa inteira e caía em cima do desenho; sem a ordem — texto primeiro — a arte comia a oração nas telas curtas. */ --cena-altura:clamp(0px, calc(100dvh - var(--barra-topo,110px) - var(--barra-reza,220px) - var(--fita) - 11rem), 30dvh); display:flex; flex-direction:column; /* `min-height:0` NÃO é detalhe. A base do módulo tem `min-height:100vh`, e no Safari do iPhone `vh` é o viewport GRANDE — o de barra de endereço recolhida. Medido no simulador: janela de 659 px (svh), caixa de 741 (lvh), documento rolável em 82 px, e a barra de cima ia parar fora da tela. `min-height` vence `height`, então é ele que tem de sair. */ height:100dvh; min-height:0; max-height:100dvh; overflow:hidden; /* `dvh`, e não `svh`: no celular a barra do navegador encolhe quando se arrasta a tela, e a janela cresce. Com `svh` — a janela pequena, de barra aberta — o palco ficava 82 px menor que a tela e sobrava uma tira vazia embaixo; com `lvh` ele passa da tela e corta o topo, que foi o defeito medido no simulador. `dvh` é a janela viva: o palco acompanha. */ } /* a raiz da ilha não é caixa: é só onde ela monta */ .a12-via-sacra[data-modo="guiado"] .ilha{display:contents} /* E o palco também não. Com `display:contents` a oração, a cena e o cordão deixam de estar aninhados e viram faixas irmãs da mesma coluna — que é o que permite ao flex repartir a altura entre elas. É esta a diferença que faz a arte valer: a cena fica com o que a oração NÃO usa. Anúncio de mistério, que tem três linhas, deixa a ilustração grande; o Credo, que tem vinte, toma o espaço de volta. Com altura declarada — a conta fixa de antes — a arte ficava do mesmo tamanho nas duas, e esse tamanho era o pior caso: um carimbo de 90 px. */ .a12-via-sacra[data-modo="guiado"] .barra{order:1; position:static; flex:none} .a12-via-sacra[data-modo="guiado"] .reza-barra{ order:5; position:static; flex:none; padding:0; width:auto; } .a12-via-sacra[data-modo="guiado"] .reza-barra__painel{ border-radius:0; border-left:0; border-right:0; border-bottom:0; box-shadow:none; max-width:none; } /* O PALCO NÃO É CAIXA. Com `display:contents` a oração, a cena e o cordão deixam de estar aninhados num item só e viram faixas irmãs da mesma coluna — que é o que permite ao flex repartir a altura entre elas. É esta a diferença que faz a arte valer: a cena fica com o que a oração NÃO usa. O anúncio do mistério, que tem três linhas, deixa a ilustração grande; o Credo, que tem vinte, toma o espaço de volta. Com altura declarada — a conta fixa de antes — a arte ficava do mesmo tamanho nos dois casos, e esse tamanho era o do pior caso: um carimbo de 90 px. A grade de três colunas do desktop morre junto, e é bom que morra: era ela que mandava a oração para uma coluna 2 que não existe aqui. */ .a12-via-sacra[data-modo="guiado"] .reza{ display:contents; /* `--fita` e `--cena-altura` moram na raiz da ilha, que é ancestral da cena também. Aqui fica só a faixa livre, que dimensiona a letra — e ela é herdada pela oração mesmo com `display:contents`. */ --faixa-livre:calc(100dvh - var(--barra-topo) - var(--barra-reza) - var(--fita)); } /* o que não é faixa não ocupa lugar nenhum */ .a12-via-sacra[data-modo="guiado"] .reza > svg.sprite, .a12-via-sacra[data-modo="guiado"] .reza > h1{position:absolute; width:1px; height:1px; overflow:hidden} /* o cartão de estado sai: a barra de baixo já diz a mesma coisa, palavra por palavra, e no celular o espaço é a oração */ .a12-via-sacra[data-modo="guiado"] .caminho-estado{display:none} /* A ORAÇÃO ocupa o que sobra, centrada, e rola dentro de si quando não couber */ .a12-via-sacra[data-modo="guiado"] .barra{order:1} .a12-via-sacra[data-modo="guiado"] .fluxo{ /* `flex:0 1 auto`: a oração pede o tamanho do seu texto e cede o resto. É o contrário do que era — ela tomava tudo e a arte ficava com as sobras. */ order:2; flex:0 1 auto; min-height:8rem; /* `top:auto` não é detalhe: no palco vertical a coluna é grudenta e o `top` vale `--barra-topo`, que a ILHA escreve como estilo inline medindo a barra — 110 px. Trocar `sticky` por `relative` sem zerar o `top` deixava a oração 110 px abaixo do lugar, invadindo a fita do cordão. */ position:relative; top:auto; margin:0; display:flex; flex-direction:column; justify-content:safe center; overflow-y:auto; overscroll-behavior:contain; /* o enchimento de baixo é maior de propósito: é ele que mantém a última linha fora do esmaecimento quando a oração cabe inteira */ padding:1rem 1.25rem 1.5rem; margin-bottom:0; } .a12-via-sacra[data-modo="guiado"] .etapa[data-corrente]{max-height:none; overflow:visible} /* quando a oração não cabe, a última linha esmaece na borda da caixa: é o que diz que há mais texto abaixo, sem precisar de seta nem de aviso */ .a12-via-sacra[data-modo="guiado"] .fluxo{ -webkit-mask-image:linear-gradient(to bottom, #000 calc(100% - 1.25rem), transparent); mask-image:linear-gradient(to bottom, #000 calc(100% - 1.25rem), transparent); } /* O piso do corpo de letra é outro aqui. No desktop ele pode cair a 12 px porque lá a regra é não rolar nunca; no celular a oração rola quando não cabe, e então o que não pode ceder é a legibilidade: 15 px é o mínimo. O Credo, que é a maior, passa uns 40 px da caixa e rola esses 40. */ .a12-via-sacra[data-modo="guiado"] .oracao__texto{ max-width:34ch; font-size:clamp(0.9375rem, var(--faixa-livre) / 33, 1.125rem); } /* O CORDÃO é uma fita que rola na horizontal, com a conta corrente no meio. `padding-inline:50%` é o que permite a primeira e a última conta chegarem ao centro — sem isso a cruz nunca centraliza e a Aparecida também não. */ .a12-via-sacra[data-modo="guiado"] .caminho-objeto{ order:4; flex:none; height:var(--fita); position:static; width:100%; min-width:0; padding:0; overflow-x:auto; overflow-y:hidden; overscroll-behavior-x:contain; background:var(--surface); border-top:1px solid var(--linha); scrollbar-width:none; } .a12-via-sacra[data-modo="guiado"] .caminho-objeto::-webkit-scrollbar{display:none} .a12-via-sacra[data-modo="guiado"] .caminho-objeto .colar{ flex-direction:row; flex-wrap:nowrap; align-items:center; width:max-content; height:100%; max-height:none; gap:0; padding-block:0; padding-inline:50%; /* o fio vai de conta a conta, e só. Com `padding-inline:50%` — que é o que deixa a cruz e a Aparecida chegarem ao centro da tela — um fio de 100% saía meia tela antes da cruz e meia depois da última conta, pendurado no vazio. Recortado no content-box, ele nasce na cruz; os 44 px a menos são as duas contas das pontas, para acabar no meio delas. */ background:linear-gradient(var(--cordao),var(--cordao)) no-repeat 50% / calc(100% - 68px) 3px; background-origin:content-box; background-clip:content-box; } .a12-via-sacra[data-modo="guiado"] .caminho-objeto .colar li{ background:none; width:auto; min-height:0; display:flex; align-items:center; } /* A primeira e a última conta trazem do palco vertical um enchimento que ali é o ar em volta da cruz e o fim do cordão — 30vh na última. Deitadas, esses enchimentos viram altura: a última conta ficava com 76+253 px, e a fita, que centra o conteúdo e corta o que passa, empurrava a Aparecida para fora da faixa. O fio acabava em nada e a medalha final não aparecia. */ .a12-via-sacra[data-modo="guiado"] .caminho-objeto .colar li:first-child, .a12-via-sacra[data-modo="guiado"] .caminho-objeto .colar li:last-child{ padding:0; background:none; } /* Alvo de toque de 44 px em toda conta, desenho menor dentro dele: o dedo acerta o botão, o olho vê a pérola. O legado tinha span de 16 px com onclick, que nem teclado alcançava nem dedo acertava. */ /* Toda conta tem a MESMA altura na fita — 76 px — e varia só na largura. O desenho é o dobro do que era: a pérola tinha 14 px e o terço se lia como enfeite; com 28 ela é a peça que a pessoa toca para andar na reza. A altura do alvo cresce junto porque a cruz desenhada tem 68 px. No palco vertical elas variam em altura (a cruz tem 160 px, a medalha 80), e essas alturas vindas de lá faziam a fita ter 377 px: o terço empurrava a oração para fora da tela. */ .a12-via-sacra[data-modo="guiado"] .caminho-objeto .colar__conta, .a12-via-sacra[data-modo="guiado"] .caminho-objeto .colar__conta[data-tipo="grande"], .a12-via-sacra[data-modo="guiado"] .caminho-objeto .colar__conta[data-tipo="cruz"], .a12-via-sacra[data-modo="guiado"] .caminho-objeto .colar__conta[data-tipo="medalha"], .a12-via-sacra[data-modo="guiado"] .caminho-objeto .colar__conta[data-tipo="fim"]{ height:76px; flex:none; } .a12-via-sacra[data-modo="guiado"] .caminho-objeto .colar__conta{width:44px} .a12-via-sacra[data-modo="guiado"] .caminho-objeto .colar__conta::before{width:28px; height:28px} .a12-via-sacra[data-modo="guiado"] .caminho-objeto .colar__conta[data-tipo="grande"]{width:52px} .a12-via-sacra[data-modo="guiado"] .caminho-objeto .colar__conta[data-tipo="grande"]::before{ width:38px; height:38px} .a12-via-sacra[data-modo="guiado"] .caminho-objeto .colar__conta[data-tipo="cruz"]{width:68px} .a12-via-sacra[data-modo="guiado"] .caminho-objeto .colar__conta[data-tipo="cruz"] .colar__desenho{ width:52px; height:68px} .a12-via-sacra[data-modo="guiado"] .caminho-objeto .colar__conta[data-tipo="medalha"]{width:80px} .a12-via-sacra[data-modo="guiado"] .caminho-objeto .colar__conta[data-tipo="medalha"]::before{ width:68px; height:68px} .a12-via-sacra[data-modo="guiado"] .caminho-objeto .colar__conta[data-tipo="medalha"] .colar__desenho{ width:46px; height:46px} .a12-via-sacra[data-modo="guiado"] .caminho-objeto .colar__conta[data-tipo="fim"]{width:68px} .a12-via-sacra[data-modo="guiado"] .caminho-objeto .colar__conta[data-tipo="fim"]::before{ width:58px; height:72px} .a12-via-sacra[data-modo="guiado"] .caminho-objeto .colar__aparecida{width:46px; height:60px} .a12-via-sacra[data-modo="guiado"] .caminho-objeto .colar__desenho{width:38px; height:38px} /* a auréola da conta corrente cabe no alvo, sem estourar a fita */ .a12-via-sacra[data-modo="guiado"] .caminho-objeto .colar__conta[aria-current="step"]::after{ width:38px; height:38px} /* O BRILHO tem de caber na faixa. Ele vem do palco vertical, onde a conta tem uma tela inteira em volta: 34 px de desfoque mais 14 de espalhamento. Na fita deitada, que tem `overflow-y:hidden` para o cordão rolar de lado, isso é cortado em cima e embaixo — e o que sobra não lê como luz, lê como um retângulo dourado atrás da medalha. Aqui a marca é um anel de 3 px com um sopro curto: 7 px além da peça, contra os 12 px de folga que a faixa tem. */ .a12-via-sacra[data-modo="guiado"] .caminho-objeto .colar__conta[aria-current="step"]::before{ box-shadow:var(--brilho-conta), 0 0 0 3px color-mix(in srgb, var(--ouro) 85%, transparent), 0 0 6px 1px color-mix(in srgb, var(--ouro) 45%, transparent); } /* na cruz e no mistério quem acende é o desenho, e pelo mesmo motivo o halo encurta */ .a12-via-sacra[data-modo="guiado"] .caminho-objeto .colar__conta[aria-current="step"] .colar__desenho{ filter:drop-shadow(0 0 3px color-mix(in srgb, var(--ouro) 85%, transparent)) drop-shadow(0 0 8px color-mix(in srgb, var(--ouro) 50%, transparent)); } /* A ILUSTRAÇÃO vira fundo de verdade. No desktop ela mora à direita, fora da coluna do texto; aqui não há "fora": largura de tela é a mesma da oração. Então ela se centra atrás do texto, discreta o bastante para não disputar a leitura — é ambiente, não ilustração de livro. */ /* A cena é fixa e mora fora do palco, na raiz da ilha — por isso ela se prende à tela e não à faixa da oração. Aqui o rodapé dela é a fita do cordão mais a barra da reza, que a ilha mede: assim a arte encosta no cordão e não passa por baixo dos controles. */ /* A CENA é a terceira faixa, entre a oração e o cordão. Ela não é mais fixa: estando no fluxo, ela não pode passar por cima de texto nenhum — a garantia deixa de ser aritmética (medir as barras e descontar) e passa a ser estrutural. E some junto com o espaço quando não houver espaço. .28, e não .12: a arte não disputa mais a leitura, então pode ser vista. A 12% era marca d'água. */ .a12-via-sacra[data-modo="guiado"] .cena-caixa{ order:3; position:static; inset:auto; translate:none; /* base ZERO, e não `auto`: a cena não pede espaço, ela recebe o que sobra. Com base automática ela entrava na conta pelo tamanho da imagem e o flex encolhia as duas — a Ave-Maria perdia 40 px e passava a rolar por causa de um desenho. Assim a oração leva o que o texto pede, e a arte fica com o resto, até 30dvh. Oração longa: a arte cede até sumir. */ flex:1 1 0; min-height:0; max-height:30dvh; width:100%; height:auto; align-items:end; justify-items:center; opacity:.28; /* A faixa é a moldura, e o desenho mora DENTRO dela — por isso `relative` e `overflow:hidden`. Uma imagem com `height:100%` numa caixa cuja altura vem do flex não resolve a porcentagem: ela volta para a proporção natural, e com `align-items:end` crescia para CIMA, por trás do texto. Medido no Credo: caixa de 0 px, desenho de 182. */ position:relative; overflow:hidden; } /* As duas imagens ocupam a faixa inteira e se centram pelo `object-position`, não pelo alinhamento da grade: um filho absoluto herda o `justify-items` do pai em alguns motores e não em outros, e a padroeira, que tem largura automática, ia encostar na esquerda. Aqui a caixa é a faixa e a imagem se coloca dentro dela — mesmo resultado em todo navegador. */ .a12-via-sacra[data-modo="guiado"] .cena, .a12-via-sacra[data-modo="guiado"] .cena__padroeira{ position:absolute; inset:0; width:100%; height:100%; object-fit:contain; object-position:bottom; } /* No meio da troca existem duas cenas: a que entra e a que sai. Fixas, elas se sobrepunham; como faixas, seriam duas faixas. No celular a que sai não espera — a que entra já traz o seu esmaecimento. */ .a12-via-sacra[data-modo="guiado"] .cena-caixa[data-saindo]{display:none} .a12-via-sacra[data-modo="guiado"] .cena{ height:100%; width:100%; max-width:none; max-height:none; min-height:0; object-fit:contain; object-position:bottom; /* a arte esmaece para cima: embaixo ela é ambiente, em cima ela sairia por trás das palavras, e aí disputa a leitura — que é o que a pessoa veio fazer. Na tela larga isso não é preciso, porque lá ela mora fora da coluna do texto. */ -webkit-mask-image:linear-gradient(to bottom, transparent, #000 22%); mask-image:linear-gradient(to bottom, transparent, #000 22%); } .a12-via-sacra[data-modo="guiado"] .cena[data-santuario]{width:100%} /* A PADROEIRA do encerramento vinha do palco largo com 34svh de altura — três vezes a faixa da arte — e subia por trás da oração do Agradecimento, que é uma das mais longas. Aqui ela é do tamanho da faixa, como a ilustração, e esmaece igual: no celular, o que a arte não pode fazer é disputar a leitura. A sombra sai junto, que a 12% de opacidade ela só suja o contorno. */ .a12-via-sacra[data-modo="guiado"] .cena__padroeira{ height:100%; max-height:100%; min-height:0; width:auto; filter:none; -webkit-mask-image:linear-gradient(to bottom, transparent, #000 22%); mask-image:linear-gradient(to bottom, transparent, #000 22%); } /* A BARRA DA REZA no celular: a mesma informação, mais junta. Ela ocupava 205 px de 844 — um quarto da tela para os controles. */ .a12-via-sacra[data-modo="guiado"] .reza-barra__painel{padding:.625rem 1rem .5rem} .a12-via-sacra[data-modo="guiado"] .reza-barra__legenda{ font-size:.9375rem; margin-bottom:.375rem; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; } /* na tela estreita a linha vira coluna, e coluna encostada à esquerda com os botões embaixo lê como duas peças soltas. Centrada, é uma só. */ .a12-via-sacra[data-modo="guiado"] .reza-barra__linha{ margin-top:.5rem; flex-direction:column; align-items:center; gap:.5rem} .a12-via-sacra[data-modo="guiado"] .reza-barra__estado{text-align:center} /* "Avançar no meu tempo" desliga o limite de tempo (2.2.1) e é o único controle da barra que era só texto sublinhado: 139 x 26 px, abaixo dos 44 px de alvo. O sublinhado fica, o alvo cresce por dentro — a margem de cima sai para o painel não pagar duas vezes pelo mesmo espaço. */ .a12-via-sacra[data-modo="guiado"] .reza-barra__ajuste{ margin-top:0; font-size:.8125rem; display:inline-flex; align-items:center; justify-content:center; min-height:44px; padding:0 .75rem; } /* O aviso de som bloqueado vem depois do painel e, com a barra sendo a última faixa da tela, caía fora dela. Aqui ele se apoia acima do painel, onde há espaço, e continua sendo `role=status` — quem não vê, ouve o anúncio. */ .a12-via-sacra[data-modo="guiado"] .reza-barra{display:flex; flex-direction:column} .a12-via-sacra[data-modo="guiado"] .reza-barra__aviso{ order:-1; border-radius:0; border-left:0; border-right:0; border-top:0; text-align:center; padding:.5rem .75rem; } /* TELA BAIXA — o iPhone SE, e qualquer aparelho de até 704 px de altura. Ali as duas barras comem 393 px de 568 e sobram 172 para a oração, que é a única coisa que a pessoa veio ler. As duas linhas que saem são as que se repetem: o nome do app, que está no título da aba, e o nome da oração, que está em corpo grande no palco dois dedos acima. O que diz onde se está — "Na cruz · Conta 1 de 62" — fica, porque isso não está em lugar nenhum. */ @media (max-height:44rem){ .a12-via-sacra[data-modo="guiado"] .selo{display:none} .a12-via-sacra[data-modo="guiado"] .reza-barra__oracao{display:none} .a12-via-sacra[data-modo="guiado"] .reza-barra__painel{padding:.5rem 1rem .375rem} /* E a legenda também sai. Ela mostra a deixa que está soando — que é a mesma frase que acende DENTRO da oração, dois dedos acima, em corpo maior. Numa tela de 568 px as duas barras levavam 281 px e sobravam 196 para o texto: nem a Ave-Maria cabia. Entre repetir a deixa e deixar a oração inteira à vista, a oração ganha. */ .a12-via-sacra[data-modo="guiado"] .reza-barra__legenda{display:none} /* A fita fica do tamanho exato da conta — 76 px mais a linha de cima — em vez dos 88 que dão respiro na tela grande, e a oração perde o enchimento de luxo. São 22 px, e são eles que fazem a Ave-Maria caber inteira numa tela de 568: faltavam 9. */ .a12-via-sacra[data-modo="guiado"]{--fita:4.8125rem} .a12-via-sacra[data-modo="guiado"] .fluxo{padding:.75rem 1rem 1rem} } } /* A BARRA DE CIMA no celular: identidade e as quatro séries, sem transbordar. Medido antes: a lista saía com 404 px numa tela de 335 e empurrava "Como rezar" por cima do menu, com "Silenciar" cortado na margem. Agora os dois botões laterais são só ícone — o nome continua lá para quem lê por leitor de tela — e as séries cabem em quatro colunas iguais. */ @media (max-width:40rem){ /* a folga em volta do menu é o que ele não tem para dar: em 320 px cada série ficava com 42 px de largura, abaixo dos 44 do alvo de toque. Os 20 px que saem daqui vão todos para as quatro células. */ .barra{padding:.5rem; gap:.375rem; align-items:center} .barra__centro{flex:1; min-width:0} .selo{padding:.375rem .5rem} .selo__nome{font-size:1.0625rem} /* Sem folga entre as quatro: elas são um seletor segmentado, e cada 2 px de vão sai da largura do alvo. Em 320 px a célula ia a 42, abaixo dos 44 — os vãos e o enchimento do cartão são o que faltava. */ .barra__misterios ul{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:0; padding:.125rem; width:100%; } /* A coluna do meio era `auto` e se media pelo menu — quatro rótulos `nowrap` que somam mais que 320 px —, e o menu saía por cima dos dois botões laterais. Quem manda na largura aqui é a tela. */ .barra{grid-template-columns:auto minmax(0,1fr) auto} /* A peça do meio ganhou a coluna inteira, mas o menu dentro dela continuava do tamanho do próprio conteúdo: `justify-items:center` no cartão faz os filhos nascerem `max-content`. Eram 239 px de menu numa coluna de 298, e a folga que sobrava para "Luminosos" era de 4 px — o rótulo quase encostando no vizinho. Esticando, cada série passa de 59 para 73 px. */ .barra__centro{justify-items:stretch} /* e o rótulo cabe na coluna que sobrou: 10 px onde a tela é de 320, 11 onde ela é maior. Sem isto "Luminosos" e "Dolorosos" se escreviam um por cima do outro, cada um saindo da sua célula de 47 px. */ .barra__misterios a{ /* o rótulo respira dentro da própria célula, e é esse ar que separa um nome do outro — entre as células não há vão, elas são um seletor segmentado */ padding:.375rem .375rem; gap:.125rem; min-height:48px; min-width:0; font-size:clamp(.625rem, 3vw, .6875rem); } .barra__misterios a span{min-width:0; text-align:center} /* O MENU EM LINHA PRÓPRIA, onde houver altura para isso. Numa tela de 360 os dois botões laterais e os vãos comem 100 px, e o que sobra para as quatro séries são células de 55 px para rótulos de 54: um pixel de folga, os nomes quase encostando um no outro. Nenhum ajuste de tipografia resolve isso — o que falta é largura. Então o menu desce para uma linha só dele, com a tela inteira: as células passam de 55 para 85 px. O nome do app sobe para o meio da primeira linha, entre os dois botões, que é onde ele cabe sem disputar com nada. `min-height` na condição: numa tela baixa a linha a mais custa 32 px de oração, e lá a oração é o que está faltando. Ali o menu continua ao lado dos botões, com os rótulos partidos em duas linhas. */ @media (min-height:44rem){ .barra{ grid-template-columns:auto minmax(0,1fr) auto; grid-template-areas:"esq nome dir" "menu menu menu"; row-gap:.375rem; } .barra__lado{grid-area:esq} .barra__lado--fim{grid-area:dir} /* o cartão deixa de ser caixa: o nome e o menu viram peças da barra, cada uma na sua área. A superfície do cartão passa para o menu, que é quem continua precisando dela. */ .barra__centro{display:contents} .selo{ grid-area:nome; border-bottom:0; padding:.125rem .25rem; background:none; display:flex; align-items:center; justify-content:center; } .barra__misterios{ grid-area:menu; background:var(--surface); border:1px solid var(--linha); border-radius:calc(var(--raio) + 4px); box-shadow:var(--sombra); overflow:hidden; } /* com a linha inteira, o rótulo volta ao tamanho de leitura e as células ganham vão entre si */ .barra__misterios ul{gap:.125rem; padding:.1875rem} .barra__misterios a{font-size:.75rem; padding:.375rem .5rem} } /* Só na tela de 320: ali a célula tem 47 px e "Luminosos" a 10 px pede 50, e os rótulos se escreviam um por cima do outro. Cortar com reticências apagaria justamente o que distingue "Dolorosos" de "Gloriosos"; então a palavra se parte, com hífen, em duas linhas — a página é `lang="pt-BR"` e o navegador sabe onde partir. Em 360 px eles cabem inteiros, e o corte fica em 22rem para não deixar duas alturas de rótulo na mesma barra. */ @media (max-width:24rem), (max-height:43.999rem){ .barra__misterios a span{ white-space:normal; overflow-wrap:anywhere; hyphens:auto; line-height:1.1; } } .barra__sinal{width:20px; height:20px} /* ícone só: o rótulo continua no documento, invisível, e é o que o leitor de tela anuncia — botão sem nome é botão que ninguém sabe o que faz */ .barra__botao span:not(.sr), .barra__ajuda span:not(.sr){ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; } .barra__botao, .barra__ajuda{ width:44px; height:44px; padding:0; display:grid; place-items:center; border-radius:50%; flex:none; } .barra__ajuda{font-size:0} .barra__ajuda::before{content:"?"; font-size:1.125rem; font-weight:700} } /* A contagem regressiva do momento sem gravação: um anel fino em volta do botão. Um número grande contando no meio da tela transformaria oração em prova — a pessoa precisa perceber o tempo, não ser cobrada por ele. */ .reza-barra__conduzir{position:relative; overflow:hidden} .reza-barra__conduzir-texto{ position:relative; z-index:1; display:inline-flex; align-items:center; gap:.4375rem; } .reza-barra__anel{ position:absolute; inset:0; /* --resta vai de 1 a 0 e a faixa clara recua com ele */ background:linear-gradient(to right, rgba(255,255,255,.28) calc(var(--resta) * 100%), transparent calc(var(--resta) * 100%)); transition:background .2s linear} @media (prefers-reduced-motion:reduce){.reza-barra__anel{transition:none}} .reza-barra__instrucao{ font-family:"Nunito Sans",sans-serif; font-size:.9375rem; color:var(--marca-media); text-align:center; margin:.5rem 0 0} .reza-barra__ajuste, .reza-barra__modo{ justify-self:center; background:none; border:0; padding:.25rem 0; font:inherit; font-size:.8125rem; font-weight:700; color:var(--marca); text-decoration:underline; text-underline-offset:3px; cursor:pointer; } .reza-barra__ajuste:hover, .reza-barra__modo:hover{color:var(--marca-escura)} /* A barra da reza é fixa, não grudenta: `sticky` só gruda enquanto o elemento pai está na tela, e o pai dela fica no fim do documento — a barra só apareceria quando a pessoa já tivesse rolado o terço inteiro. Estado do sistema que só se vê no fim não é estado visível. */ .reza-barra{ position:fixed; left:0; right:0; bottom:0; z-index:12; display:grid; justify-items:center; gap:.5rem; padding:0 clamp(1rem,4vw,2rem) calc(1rem + env(safe-area-inset-bottom)); pointer-events:none; } /* a peça que flutua, irmã do menu dos mistérios lá em cima */ .reza-barra__painel{ pointer-events:auto; width:min(100%, 36rem); display:grid; gap:.625rem; justify-items:center; padding:.875rem 1.25rem 1rem; background:var(--surface); border:1px solid var(--linha); border-radius:calc(var(--raio) + 6px); box-shadow:var(--sombra); } /* a deixa que está soando, no centro: quem olha para os controles continua acompanhando a oração */ .reza-barra__legenda{ font-family:Literata,Georgia,serif; font-size:.9375rem; color:var(--ink-2); text-align:center; min-height:1.5em; } .reza-barra__linha{ display:flex; align-items:center; justify-content:space-between; gap:1rem; width:100%; flex-wrap:wrap; } .reza-barra__estado{min-width:0} .reza-barra__oracao{font-family:Bitter,Georgia,serif; font-weight:700; color:var(--marca-escura)} .reza-barra__onde{font-size:.8125rem; color:var(--ink-2); font-variant-numeric:tabular-nums} .reza-barra__controles{display:flex; align-items:center; gap:.5rem} .botao__icone{width:20px; height:20px} .reza-barra__aviso{ pointer-events:auto; font-size:.8125rem; color:var(--ink-2); background:var(--surface); border:1px solid var(--linha); border-radius:999px; padding:.375rem .75rem; } /* A legenda no texto: a frase que está sendo dita acende, e o resto continua legível. Nada some — quem lê adiante ou atrás continua podendo. */ /* A deixa entra e sai com calma. O peso interpola porque Literata vem como fonte variável, na faixa 400..600 — com pesos soltos o navegador saltaria de um para o outro, e a troca ficaria dura. */ .oracao__texto span[data-deixa]{ transition:color .28s ease-in-out, font-weight .28s ease-in-out} @media (prefers-reduced-motion:reduce){.oracao__texto span[data-deixa]{transition:none}} /* O texto fora do foco recua, mas não sai do alcance: #4E6F8D dá 4,94:1 sobre a superfície e passa em AA. O --ink-3 daria 3,00:1 — recuo bonito e leitura reprovada, que é exatamente o que a legenda não pode fazer. */ .a12-via-sacra[data-modo="guiado"][data-tocando] .oracao__texto span[data-deixa]{color:#4E6F8D} /* O destaque é a própria letra: a frase falada em 11,95:1 contra 4,94:1 do resto. Sem faixa atrás — ela competia com a leitura, que é o que importa aqui. A informação não fica só na cor: a mesma frase aparece escrita na barra. */ /* A frase que está soando ganha peso além da cor. O 600 é o mais forte que cabe aqui: medido, ele alarga a deixa em 6,8 px e desloca a vizinha em 1,8 px, sem mudar a quebra de linha — o 700 desloca 3,0 px, e como o texto é centralizado cada troca de deixa sacudiria a oração inteira. */ .a12-via-sacra[data-modo="guiado"] .oracao__texto span[data-soando]{ color:var(--marca-escura); font-weight:600} .reza-barra__progresso{width:100%; appearance:none; width:100%; height:6px; border:0; border-radius:999px; background:var(--surface-2); overflow:hidden; } .reza-barra__progresso::-webkit-progress-bar{background:var(--surface-2)} .reza-barra__progresso::-webkit-progress-value{background:var(--marca)} .reza-barra__progresso::-moz-progress-bar{background:var(--marca)} .botao{ display:inline-flex; align-items:center; justify-content:center; gap:.5rem; min-height:44px; min-width:44px; padding:.625rem 1.125rem; border:1px solid var(--marca); border-radius:999px; background:var(--surface); color:var(--marca); font:inherit; font-weight:700; font-size:.9375rem; cursor:pointer; } .botao:hover{background:var(--surface-2)} .botao--principal{background:var(--marca); color:var(--sobre-marca)} .botao--principal:hover{background:var(--marca-escura); border-color:var(--marca-escura); color:var(--ground)} .botao[aria-pressed="true"]{background:var(--surface-2)} .botao--icone{padding:.625rem; border-radius:50%} /* O colar: um terço, não uma barra de progresso. O cordão passa por dentro das contas (a linha é fundo de cada item, e por isso continua de uma para a outra), a conta comum é pérola, a do Pai-Nosso é madeira, e a do mistério é a flor com a coroa de doze estrelas. Cada conta é um botão de 44 px — o legado usava span de 16 px com onclick, que nem teclado alcançava nem dedo acertava. */ .colar{display:flex; flex-wrap:wrap; gap:0; list-style:none; margin:0; padding:0; max-height:8.5rem; overflow-y:auto; overscroll-behavior:contain} .colar li{display:flex; align-items:center; background:linear-gradient(var(--cordao),var(--cordao)) left 50%/100% 2px no-repeat} .colar__conta{ width:44px; height:44px; padding:0; border:0; background:none; cursor:pointer; display:grid; place-items:center; border-radius:50%; position:relative; } /* a conta branca e o desenho ficam na mesma célula, um sobre o outro — sem isto a grade os põe em linhas diferentes e a flor escorrega para fora da conta */ /* A pérola é o fundo da conta e o conteúdo vem por cima. Sem dizer a ordem, o oval branco da última conta pintava sobre a imagem de Nossa Senhora e ela sumia — só ali, porque é a única conta cujo conteúdo é uma imagem opaca. */ .colar__conta::before, .colar__conta > *{grid-area:1 / 1} .colar__conta::before{z-index:0} .colar__conta > *{position:relative; z-index:1} .colar__conta::before{ content:""; width:13px; height:13px; border-radius:50%; background:var(--perola); box-shadow:var(--brilho-conta); } .colar__conta[data-rezada]::before{background:var(--perola-rezada)} .colar__conta[data-tipo="grande"]::before{width:18px; height:18px; background:var(--azul-conta)} .colar__conta[data-tipo="fim"]::before{ width:44px; height:52px; border-radius:50%; background:var(--branco-conta); border:1px solid var(--linha); box-shadow:0 2px 4px rgba(0,51,97,.24), 0 0 0 .5px rgba(0,81,153,.3), inset 0 0 0 2px #FFF, inset 0 0 0 3px color-mix(in srgb, var(--marca) 35%, #FFF); } .colar__conta[data-tipo="fim"]{height:60px} .colar__aparecida{width:34px; height:44px; object-fit:contain} /* A cruz vem solta; a flor vai dentro de uma conta branca, como no terço do Santuário. Esta é a medalha — e, na junção, ela É a conta grande que abre a primeira dezena: uma peça só, que se reza. */ .colar__conta[data-tipo="cruz"]::before{display:none} .colar__conta[data-tipo="medalha"]::before{ width:52px; height:52px; background:var(--branco-conta); border:1px solid var(--linha); box-shadow:0 2px 4px rgba(0,51,97,.24), 0 0 0 .5px rgba(0,81,153,.3), inset 0 0 0 2px #FFF, inset 0 0 0 3px color-mix(in srgb, var(--marca) 35%, #FFF), inset 0 -3px 5px rgba(0,51,97,.12); } .colar__conta[data-tipo="medalha"]{height:56px} .colar__conta[data-tipo="medalha"] .colar__desenho{width:46px; height:46px} /* a cruz tem proporção própria — 242 × 310 no desenho original — e é a maior peça do terço, como em qualquer terço de verdade */ .colar__desenho{width:32px; height:32px; color:var(--marca-media)} .colar__conta[data-tipo="cruz"]{height:60px} .colar__conta[data-tipo="cruz"] .colar__desenho{width:44px; height:56px; color:var(--marca)} .colar__conta[data-rezada] .colar__desenho{opacity:.75} /* A conta que está sendo rezada acende: uma auréola dourada em volta dela, do mesmo ouro das auréolas desenhadas nas ilustrações. Ela é acréscimo, não a única marca — a conta continua com `aria-current`, o anel e o cartão preso a ela pelo traço —, então quem não distingue a cor não perde nada. */ .colar__conta[aria-current="step"]::after{ content:""; position:absolute; width:28px; height:28px; border-radius:50%; border:2px solid var(--marca); opacity:.45; } /* na cruz, na medalha e na Aparecida o anel cortaria o desenho: nelas o realce é a luz. Na Aparecida ele estava aparecendo como um circulozinho solto dentro do oval, que era o que restava de visível com a imagem escondida. */ .colar__conta[data-tipo="cruz"][aria-current="step"]::after, .colar__conta[data-tipo="fim"][aria-current="step"]::after, .colar__conta[data-tipo="misterio"][aria-current="step"]::after{display:none} .colar__conta[data-tipo="cruz"][aria-current="step"] .colar__desenho, .colar__conta[data-tipo="cruz"][aria-current="step"] .colar__desenho, .colar__conta[data-tipo="misterio"][aria-current="step"] .colar__desenho{ filter:drop-shadow(0 0 4px color-mix(in srgb, var(--ouro) 85%, transparent)) drop-shadow(0 0 16px color-mix(in srgb, var(--ouro) 55%, transparent)); } /* a Aparecida acende pelo oval que a emoldura */ .colar__conta[data-tipo="fim"][aria-current="step"]::before{ box-shadow:var(--brilho-conta), 0 0 0 2px color-mix(in srgb, var(--ouro) 80%, transparent), 0 0 16px 6px color-mix(in srgb, var(--ouro) 45%, transparent); } /* A auréola é sombra, não fundo: fundo é recortado pela caixa do botão — que no cordão tem 32 px de altura — e a luz saía cortada em cima e embaixo. */ .colar__conta[aria-current="step"]::before{ box-shadow:var(--brilho-conta), 0 0 0 2px color-mix(in srgb, var(--ouro) 80%, transparent), 0 0 10px 3px color-mix(in srgb, var(--ouro) 55%, transparent), 0 0 24px 9px color-mix(in srgb, var(--ouro) 24%, transparent); } .colar__conta[aria-current="step"][data-tipo="misterio"] .colar__desenho, .colar__conta[aria-current="step"][data-tipo="cruz"] .colar__desenho{transform:scale(1.12)} .colar__conta:hover::before{filter:brightness(1.06)} /* Conclusão: o fim da reza é um momento, não um alerta do navegador. */ /* O fim da reza. Diálogo do navegador: foco preso, Esc para sair e o resto da página inerte — o que um cartão solto no fim do documento nunca teve. */ .fim{ border:1px solid var(--linha); border-radius:calc(var(--raio) + 6px); background:var(--surface); color:var(--ink); padding:clamp(1.5rem,4vw,2.25rem); width:min(100% - 2rem, 30rem); box-shadow:0 24px 60px rgba(0,51,97,.18); display:grid; gap:1rem; animation:fim-entra .32s ease both; } .fim::backdrop{ background:color-mix(in srgb, #003361 34%, transparent); backdrop-filter:blur(3px); } @keyframes fim-entra{from{opacity:0; transform:translateY(10px)} to{opacity:1; transform:none}} @media (prefers-reduced-motion:reduce){.fim{animation:none}} .fim__cabeca{display:grid; gap:.375rem; text-align:center} .fim__olho{ font-family:"Nunito Sans",sans-serif; font-size:.75rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--marca-media); } .fim__titulo{font-size:clamp(1.25rem,3vw,1.5rem); color:var(--marca-escura)} .fim__bencao{ font-family:Literata,Georgia,serif; font-size:.9375rem; line-height:1.6; /* `balance` reparte as linhas em comprimentos parecidos; `pretty` só evita a órfã no fim, e num bloco de duas linhas centradas é o desequilíbrio entre elas que se lê como torto. `justify-self` e não `margin:auto`: o pai é uma grade, e ali o item estica na área, o `max-width` o encosta à esquerda e as margens automáticas não recebem a folga. Media 38 px fora do centro. */ color:var(--ink-2); max-width:38ch; margin:.25rem 0 0; justify-self:center; text-wrap:balance; } .fim__repetir{width:100%; justify-content:center; min-height:52px} /* a separação entre repetir e trocar de série: rótulo, não linha decorativa — ele diz o que vem abaixo */ .fim__ou{ font-family:"Nunito Sans",sans-serif; font-size:.75rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); text-align:center; margin-top:.25rem; } .fim__series{list-style:none; margin:0; padding:0; display:grid; gap:.5rem} .fim__serie{ display:flex; align-items:center; gap:.75rem; min-height:52px; padding:.625rem .875rem; border:1px solid var(--linha); border-radius:var(--raio); color:var(--marca-escura); text-decoration:none; font-weight:700; transition:background .18s ease, border-color .18s ease; } .fim__serie:hover{background:var(--surface-2); border-color:var(--cordao)} @media (prefers-reduced-motion:reduce){.fim__serie{transition:none}} .fim__sinal{width:26px; height:26px; color:var(--marca-media); flex:none} .fim__nome{flex:1 1 auto} /* o mistério do dia é dito, não só colorido: cor sozinha não é informação */ .fim__hoje{ font-family:"Nunito Sans",sans-serif; font-size:.75rem; font-weight:700; letter-spacing:.04em; color:var(--sobre-marca); background:var(--marca); padding:.1875rem .5rem; border-radius:999px; } .fim__serie[aria-current] .fim__sinal{color:var(--marca)} .fim__rodape{ display:flex; gap:1.25rem; justify-content:center; align-items:center; padding-top:.25rem; } .fim__discreto{ background:none; border:0; padding:.375rem .25rem; cursor:pointer; font:inherit; font-family:"Nunito Sans",sans-serif; font-size:.875rem; font-weight:700; color:var(--marca); text-decoration:underline; text-underline-offset:3px; } .fim__discreto:hover{color:var(--marca-escura)} /* Em tela estreita o colar vira uma linha só que rola: três fileiras de contas comeriam metade da tela, e quem reza no celular precisa ver a oração. */ @media (max-width:60rem){ .a12-via-sacra{--altura-barra:11.5rem} .colar{flex-wrap:nowrap; overflow-x:auto; max-height:none; scroll-snap-type:x proximity; padding-bottom:.25rem} .colar__conta{scroll-snap-align:center} } @media (max-width:40rem){ /* barra do topo em uma linha só: a lista de mistérios rola, e o resto não empurra a reza para baixo da dobra */ .barra{gap:.5rem; padding:.625rem 1rem; flex-wrap:nowrap} .selo__nome{font-size:.9375rem} .barra__ajuda{padding:.5rem; white-space:nowrap} /* e a barra da reza: o texto ocupa a sua linha, os controles ficam juntos */ .reza-barra__agora{flex:1 1 100%} .reza-barra{gap:.5rem} .reza-barra__linha{gap:.5rem} .colar__conta{width:38px; height:38px} } /* ========================================================================== O que é da Via-Sacra. ========================================================================== */ /* A parada em texto: a aclamação em destaque, a meditação, cada oração com o seu título e o canto. No legado era um parágrafo só (auditoria 3.6). */ .momento__destaque{ font-family:Bitter,Georgia,serif; font-weight:700; color:var(--marca-escura); font-size:1.0625rem; line-height:1.5; max-width:var(--coluna); margin-bottom:1rem; } .momento .oracao__texto + .oracao__texto{margin-top:.75rem} .momento__oracao, .momento__canto{margin-top:1.5rem} .momento__canto .oracao__texto{font-style:italic} /* a arte da estação no documento: sem JavaScript, é aqui que ela aparece */ .etapa__ilustracao{display:block; width:100%; max-width:36rem; height:auto; margin:1rem auto 0} /* a Basílica é larga e baixa (644 × 301): mais estreita que as estações */ .etapa__ilustracao--santuario{max-width:24rem} .a12-via-sacra[data-modo="guiado"] .etapa__ilustracao{display:none} /* sem JavaScript, é por aqui que se anda de estação em estação */ .etapa__passos{ display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap; margin-top:1.5rem; padding-top:1rem; border-top:1px solid var(--linha); } .etapa__passos a{ display:inline-flex; align-items:center; min-height:44px; padding:0 .25rem; color:var(--marca); font-weight:700; text-decoration:none; } .etapa__passos a[rel="next"]{margin-left:auto} .etapa__passos a:hover{text-decoration:underline; text-underline-offset:3px} .etapa--abertura,.etapa--final{border-left:4px solid var(--marca)} /* o índice das dezessete, em "Como rezar": o mapa do caminho sem JavaScript */ .caminho-indice{list-style:none; margin:1.5rem 0 0; padding:0; display:grid; gap:.25rem; max-width:var(--coluna)} .caminho-indice a{ display:flex; gap:.75rem; align-items:baseline; min-height:44px; padding:.5rem .75rem; border-radius:var(--raio); color:var(--marca-escura); text-decoration:none; } .caminho-indice a:hover{background:var(--surface-2)} .caminho-indice__n{ flex:none; min-width:6.5rem; font-size:.8125rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--marca-media); } /* ----------------------------------------------------------- no palco */ /* Os links de passo e a navegação do documento saem: no palco quem anda é a barra da reza e o caminho. */ .a12-via-sacra[data-modo="guiado"] .etapa__passos{display:none} /* O texto de uma estação é longo — meditação, três orações e o canto passam de 1.500 caracteres —, e centrado ele se lê mal. Fica a coluna de leitura, alinhada à esquerda, e o título da estação continua no centro. */ .a12-via-sacra[data-modo="guiado"] .momento[data-em-cena]{ text-align:start; max-width:46ch; margin-inline:auto; } .a12-via-sacra[data-modo="guiado"] .momento .oracao__texto{margin:0; max-width:none} .a12-via-sacra[data-modo="guiado"] .momento .oracao__texto + .oracao__texto{margin-top:.75rem} .a12-via-sacra[data-modo="guiado"] .momento__destaque{ text-align:center; font-size:clamp(1rem,1.4vw,1.125rem); margin-bottom:1.25rem; } .a12-via-sacra[data-modo="guiado"] .momento__oracao, .a12-via-sacra[data-modo="guiado"] .momento__canto{margin-top:1.25rem} /* a ilustração da estação é traço cheio e pesa mais que a arte do Terço: um pouco de recuo para ela não disputar o texto */ .a12-via-sacra[data-modo="guiado"] .cena{opacity:.9} /* O caminho: a cruz no começo e no fim, quinze marcos no meio. O marco é um medalhão branco com o número da estação em romano — a numeração de toda Via-Sacra de igreja —, e o corrente acende no ouro das auréolas. */ .colar__numero{ font-family:Bitter,Georgia,serif; font-weight:700; font-size:.75rem; color:var(--marca); letter-spacing:.02em; line-height:1; } .colar__conta[data-tipo="estacao"]::before{ width:34px; height:34px; background:var(--branco-conta); border:1px solid var(--linha); box-shadow:var(--brilho-conta); } .colar__conta[data-tipo="estacao"][data-rezada]::before{background:var(--perola-rezada)} .colar__conta[data-tipo="estacao"][aria-current="step"]::before{background:var(--marca)} .colar__conta[data-tipo="estacao"][aria-current="step"] .colar__numero{color:var(--sobre-marca)} .colar__conta[data-tipo="estacao"][aria-current="step"]::after{display:none} .a12-via-sacra[data-modo="guiado"] .caminho-objeto .colar__conta[data-tipo="estacao"]{height:52px} .a12-via-sacra[data-modo="guiado"] .caminho-objeto .colar__conta[data-tipo="estacao"]::before{ width:38px; height:38px} @media (max-width:59.999rem){ .a12-via-sacra[data-modo="guiado"] .fluxo{scrollbar-width:none} .a12-via-sacra[data-modo="guiado"] .fluxo::-webkit-scrollbar{display:none} .a12-via-sacra[data-modo="guiado"] .caminho-objeto .colar__conta[data-tipo="estacao"]{ width:48px; height:76px} .a12-via-sacra[data-modo="guiado"] .caminho-objeto .colar__conta[data-tipo="estacao"]::before{ width:36px; height:36px} .a12-via-sacra[data-modo="guiado"] .caminho-objeto .colar__conta[data-tipo="ponta"]{ width:64px; height:76px} .a12-via-sacra[data-modo="guiado"] .caminho-objeto .colar__conta[data-tipo="ponta"]::before{ width:56px; height:56px} /* A ARTE no celular vai dentro do texto, no alto da estação, e rola com ele. Como faixa de fundo ela ficava com o que o texto não usa — e o texto de uma estação usa tudo: a arte nova não aparecia em estação nenhuma. */ .a12-via-sacra[data-modo="guiado"] .cena-caixa{display:none} .a12-via-sacra[data-modo="guiado"] .etapa__ilustracao{ display:block; width:100%; max-width:22rem; height:auto; aspect-ratio:3 / 2; margin:0 auto 1rem; opacity:.9} .a12-via-sacra[data-modo="guiado"] .etapa__ilustracao--santuario{ aspect-ratio:auto; max-width:16rem} /* o texto da estação é o mais longo do Reze: aqui ele rola dentro da faixa, e a letra não desce do piso de leitura */ .a12-via-sacra[data-modo="guiado"] .momento[data-em-cena]{max-width:38ch} } /* No palco largo quem rola é a coluna do texto, não a estação: é a coluna que recebe foco (tabindex no
    ), e uma região que rola sem poder ser focada é uma estação que o teclado não consegue ler até o fim. No Terço a oração cabe e isso não aparecia; aqui a estação passa da faixa quase sempre. */ @media (min-width:60rem){ .a12-via-sacra[data-modo="guiado"] .fluxo{ max-height:var(--faixa-livre); overflow-y:auto; overscroll-behavior:contain; justify-content:flex-start; /* a coluna rola, mas a barra de rolagem não aparece: ela desenhava um trilho cinza no meio da página, ao lado da oração. Quem avisa que há mais texto é o esmaecimento no pé; e quem conduz a rolagem, com a voz, é a legenda */ scrollbar-width:none; -webkit-mask-image:linear-gradient(to bottom, #000 calc(100% - 2rem), transparent); mask-image:linear-gradient(to bottom, #000 calc(100% - 2rem), transparent); padding-bottom:2rem; } .a12-via-sacra[data-modo="guiado"] .fluxo::-webkit-scrollbar{display:none} .a12-via-sacra[data-modo="guiado"] .etapa[data-corrente]{max-height:none; overflow:visible} } /* ---------------------------------------------- as pontas do caminho */ /* O começo e o fim são pérolas grandes com a palavra dentro. Não há cruz: ela diz "rosário", e a Via-Sacra não é um. A pérola é a mesma conta branca de aro azul das estações, maior — as pontas são do mesmo caminho, não enfeite dele. */ .colar__conta[data-tipo="ponta"]::before{ width:52px; height:52px; background:var(--branco-conta); border:1px solid var(--linha); box-shadow:0 2px 4px rgba(0,51,97,.24), 0 0 0 .5px rgba(0,81,153,.3), inset 0 0 0 2px #FFF, inset 0 0 0 3px color-mix(in srgb, var(--marca) 35%, #FFF), inset 0 -3px 5px rgba(0,51,97,.12); } .colar__palavra{ font-family:Bitter,Georgia,serif; font-weight:700; font-size:.75rem; color:var(--marca-escura); letter-spacing:.01em; line-height:1; } .colar__conta[data-tipo="ponta"][data-rezada]::before{background:var(--perola-rezada)} .colar__conta[data-tipo="ponta"][aria-current="step"]::before{background:var(--marca)} .colar__conta[data-tipo="ponta"][aria-current="step"] .colar__palavra{color:var(--sobre-marca)} .colar__conta[data-tipo="ponta"][aria-current="step"]::after{display:none} .a12-via-sacra[data-modo="guiado"] .caminho-objeto .colar__conta[data-tipo="ponta"]{height:84px} .a12-via-sacra[data-modo="guiado"] .caminho-objeto .colar__conta[data-tipo="ponta"]::before{ width:66px; height:66px} .a12-via-sacra[data-modo="guiado"] .caminho-objeto .colar__conta[data-tipo="ponta"] .colar__palavra{ font-size:.875rem} /* o fio nasce no meio da pérola do começo e desce; acima dela não há caminho */ .a12-via-sacra[data-modo="guiado"] .caminho-objeto .colar li:first-child{ padding-bottom:0; background-position:50% 100%; background-size:2px 50%; } /* ------------------------------------------------ o texto da estação */ /* A coluna do texto estava no corpo de oração do Terço — até 20 px, pensado para uma Ave-Maria de 200 caracteres. A estação tem 1.500: naquele corpo ela virava uma parede. Aqui o corpo é de leitura corrida, e a hierarquia vem da ordem da reza: o título, a aclamação, a meditação, e as orações e o canto um degrau abaixo — são textos que quem reza já sabe. */ .a12-via-sacra[data-modo="guiado"] .etapa__assunto{font-size:clamp(1.375rem,2.2vw,1.75rem)} .a12-via-sacra[data-modo="guiado"] .etapa__ordinal{font-size:.75rem} .a12-via-sacra[data-modo="guiado"] .etapa__titulo{margin-bottom:1rem} .a12-via-sacra[data-modo="guiado"] .momento[data-em-cena]{max-width:40ch} .a12-via-sacra[data-modo="guiado"] .momento__destaque{ font-size:1rem; line-height:1.5; margin-bottom:1rem; text-wrap:balance} .a12-via-sacra[data-modo="guiado"] .momento .oracao__texto{ font-size:clamp(.9375rem, .85rem + .25vw, 1.0625rem); line-height:1.7; } /* Cada oração e o canto são momentos sozinhos no palco, como no Terço: sem fio separando, e no mesmo corpo da meditação — quem reza lê um de cada vez. */ .a12-via-sacra[data-modo="guiado"] .momento__oracao, .a12-via-sacra[data-modo="guiado"] .momento__canto{margin-top:0} .a12-via-sacra[data-modo="guiado"] .momento .oracao__titulo{ font-size:.75rem; letter-spacing:.12em; margin-bottom:.5rem; text-align:center} /* A citação bíblica: a referência da passagem, logo abaixo dela. A voz não a lê, e por isso ela não entra na legenda — fica como nota, alinhada à direita como a fonte de uma epígrafe. */ .citacao{ margin:.25rem 0 .75rem; text-align:right; max-width:var(--coluna); font-family:"Nunito Sans",sans-serif; font-size:.8125rem; font-weight:700; letter-spacing:.02em; color:var(--marca-media); } .citacao cite{font-style:normal} .citacao cite::before{content:"— "} /* e na barra, ao lado da frase que fecha a passagem citada */ .reza-barra__citacao{ margin-left:.5em; font-family:"Nunito Sans",sans-serif; font-style:normal; font-size:.8125rem; font-weight:700; color:var(--marca-media); white-space:nowrap; } /* a deixa que está soando acende em qualquer parte da estação — também no título e na aclamação, que a voz lê primeiro. Mesmas cores do Terço: o resto recua para 4,94:1 e continua legível, a frase falada vai a 11,95:1. */ .a12-via-sacra[data-modo="guiado"][data-tocando] [data-deixas] span[data-deixa]{ color:#4E6F8D} .a12-via-sacra[data-modo="guiado"] [data-deixas] span[data-deixa]{transition:color .28s ease-in-out} .a12-via-sacra[data-modo="guiado"] [data-deixas] span[data-soando]{ color:var(--marca-escura)} .a12-via-sacra[data-modo="guiado"] .oracao__texto span[data-soando]{font-weight:600} /* o título não recua: ele nomeia a estação o tempo todo, e esmaecido parecia desabilitado. A voz o lê primeiro, e ali ele só ganha a cor forte de volta */ .a12-via-sacra[data-modo="guiado"] .etapa__titulo [data-deixas] span[data-deixa]{color:inherit} @media (prefers-reduced-motion:reduce){ .a12-via-sacra[data-modo="guiado"] [data-deixas] span[data-deixa]{transition:none} } @media (max-width:59.999rem){ .a12-via-sacra[data-modo="guiado"] .momento[data-em-cena]{max-width:36ch} .a12-via-sacra[data-modo="guiado"] .momento .oracao__texto{font-size:1rem; max-width:none} }