/* ========================================================================= CATEDRAL — componentes de conteúdo de catedral.html Carregado apenas nessa página. Usa os tokens e os componentes do site (base.css + main.css + projeto.css); aqui ficam só os blocos editoriais. ========================================================================= */ /* ========================================================================= SEÇÕES ========================================================================= */ .secao { padding-block: clamp(3rem, 7vw, 5.5rem); } /* Faixas alternadas dão ritmo à leitura de uma página longa */ .secao--alt { background-color: var(--cinza-100); } .secao--escura { background-color: var(--fundo-escuro); color: var(--texto-invertido); } .secao--escura .secao__titulo, .secao--escura .prosa { color: var(--texto-invertido); } .secao--escura .secao__sobrelinha { color: var(--cor-vermelho-claro); } /* Quando a sobrelinha é o próprio título da seção (um

sem título grande abaixo), ela precisa recusar a fonte de display herdada de base.css. */ h2.secao__sobrelinha { font-family: var(--fonte-texto); margin-bottom: 0; } /* ========================================================================= APRESENTAÇÃO — logotipo do projeto ao lado do texto de abertura ========================================================================= */ .apresentacao__interno { display: grid; gap: clamp(1.5rem, 4vw, 3rem); align-items: center; } .apresentacao__marca { width: 100%; height: auto; border-radius: var(--raio-md); background-color: var(--cinza-100); } @media (min-width: 860px) { .apresentacao__interno { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } } /* ========================================================================= PROSA — texto corrido com medida confortável ========================================================================= */ .prosa { max-width: 68ch; color: var(--texto-suave); font-size: var(--texto-md); line-height: 1.8; } .prosa > * + * { margin-top: var(--esp-4); } /* Texto justificado. A hifenização evita os "rios" de espaço em branco que o justificado produz sem ela — depende do lang="pt-BR" declarado no . */ .prosa p { text-align: justify; hyphens: auto; } .prosa strong { color: var(--texto); font-weight: 700; } .secao--escura .prosa strong { color: var(--cor-branco); } .prosa + .prosa { margin-top: var(--esp-4); } .prosa ul { padding-left: var(--esp-5); list-style: disc; } .prosa li + li { margin-top: var(--esp-2); } /* Subtítulo dentro de uma seção ------------------------------------------ */ .subtitulo { max-width: 30ch; margin-top: clamp(2.5rem, 5vw, 3.5rem); margin-bottom: var(--esp-5); font-size: var(--texto-xl); } .subtitulo:first-child { margin-top: 0; } /* Um nível abaixo de .subtitulo, para intertítulos dentro de um bloco */ .subtitulo--menor { max-width: 46ch; margin-top: clamp(1.75rem, 4vw, 2.5rem); margin-bottom: var(--esp-4); font-size: var(--texto-lg); } /* ========================================================================= SUPERFÍCIE DE PAPEL — destaca um trecho do texto corrido ========================================================================= */ .card-papel, .destaque-bloco { padding: clamp(1.5rem, 4vw, 2.5rem); background-color: var(--cor-branco); background-image: url("../img/catedral/catedral-nso-textura-papel.jpg"); background-repeat: no-repeat; background-position: center; background-size: cover; border: 1px solid var(--borda); border-radius: var(--raio-md); /* A textura é quase branca: a sombra é o que dá a leitura de folha solta */ box-shadow: var(--sombra-md); } .card-papel { max-width: 68ch; margin-block: clamp(1.5rem, 3vw, 2rem); } .card-papel .prosa { max-width: none; color: var(--texto); } /* ========================================================================= FIGURAS E GALERIAS ========================================================================= */ .figura { margin-block: clamp(1.75rem, 4vw, 2.5rem); } .figura img { width: 100%; height: auto; border-radius: var(--raio-md); background-color: var(--cinza-100); } .figura--estreita { max-width: 620px; } .figura--larga { max-width: none; } .figura figcaption { margin-top: var(--esp-3); max-width: 68ch; color: var(--texto-tenue); font-size: var(--texto-sm); line-height: 1.6; } .secao--escura .figura figcaption { color: rgba(255, 255, 255, 0.6); } /* Galeria em colunas: preserva a proporção original de cada imagem, sem recortes — importante para acervo histórico e documentos. */ .galeria { columns: 240px 3; column-gap: var(--esp-4); margin-block: clamp(1.75rem, 4vw, 2.5rem); list-style: none; } .galeria li { break-inside: avoid; margin-bottom: var(--esp-4); } .galeria img { width: 100%; height: auto; border-radius: var(--raio-md); background-color: var(--cinza-100); } .galeria figcaption { margin-top: var(--esp-3); color: var(--texto-tenue); font-size: var(--texto-sm); line-height: 1.6; } /* ========================================================================= DESTAQUE — citações em evidência ========================================================================= */ /* A superfície de papel é declarada junto de .card-papel, mais acima; aqui ficam apenas a medida e o tratamento tipográfico do destaque. */ .destaque-bloco { max-width: 68ch; margin-block: clamp(1.75rem, 4vw, 2.5rem); color: var(--texto); font-size: var(--texto-md); font-weight: 700; line-height: 1.6; } /* ========================================================================= EQUIPE ========================================================================= */ .equipe { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--esp-5); margin-top: var(--esp-6); } .equipe__item { padding-top: var(--esp-4); border-top: 2px solid var(--borda); } .equipe dt { margin-bottom: var(--esp-2); color: var(--texto-tenue); font-size: var(--texto-xs); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; line-height: 1.5; } .equipe dd { color: var(--texto); font-size: var(--texto-md); font-weight: 700; } /* ========================================================================= LINHA DO TEMPO ========================================================================= */ .linha-tempo { list-style: none; margin-top: var(--esp-6); } .linha-tempo__item { position: relative; padding-left: var(--esp-6); padding-bottom: clamp(2.5rem, 6vw, 4rem); border-left: 2px solid var(--borda); } .linha-tempo__item:last-child { padding-bottom: 0; border-left-color: transparent; } /* Marcador sobre a linha */ .linha-tempo__item::before { content: ""; position: absolute; top: 6px; left: -9px; width: 16px; height: 16px; background-color: var(--cor-vermelho); border: 3px solid var(--fundo); border-radius: 50%; } .secao--alt .linha-tempo__item::before { border-color: var(--cinza-100); } .linha-tempo__ano { margin-bottom: var(--esp-4); color: var(--cor-vermelho); font-family: var(--fonte-display); font-size: var(--texto-xl); line-height: 1.1; } .linha-tempo__complemento { display: block; margin-top: var(--esp-2); color: var(--texto); font-family: var(--fonte-texto); font-size: var(--texto-md); font-weight: 700; } /* ========================================================================= ELEMENTOS DA FACHADA (F01–F15) ========================================================================= */ .elementos { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: clamp(1.25rem, 3vw, 2rem); margin-top: var(--esp-6); list-style: none; } .elemento { display: flex; flex-direction: column; height: 100%; overflow: hidden; background-color: var(--fundo); border: 1px solid var(--borda); border-radius: var(--raio-lg); } .elemento__imagem { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background-color: var(--cinza-100); } /* Sem imagem no material de origem */ .elemento__vazio { display: flex; align-items: center; justify-content: center; aspect-ratio: 4 / 3; padding: var(--esp-4); background-color: var(--cinza-100); color: var(--texto-tenue); font-size: var(--texto-xs); text-align: center; } .elemento__corpo { display: flex; flex: 1; flex-direction: column; gap: var(--esp-2); padding: var(--esp-5); } .elemento__codigo { color: var(--cor-vermelho); font-size: var(--texto-xs); font-weight: 700; letter-spacing: 0.12em; } .elemento__titulo { font-size: var(--texto-lg); line-height: 1.2; } .elemento__texto { color: var(--texto-suave); font-size: var(--texto-sm); line-height: 1.7; } /* ========================================================================= PETROGRAFIA ========================================================================= */ .aspectos { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--esp-4); margin-block: var(--esp-6); } .aspectos__item { padding: var(--esp-4); background-color: var(--fundo); border: 1px solid var(--borda); border-radius: var(--raio-md); } .aspectos dt { margin-bottom: var(--esp-2); color: var(--texto-tenue); font-size: var(--texto-xs); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; } .aspectos dd { color: var(--texto); font-size: var(--texto-sm); line-height: 1.6; } .fotomicrografias { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: clamp(1.5rem, 3vw, 2.5rem); margin-block: var(--esp-6); list-style: none; } .fotomicrografia img { width: 100%; height: auto; border-radius: var(--raio-md); background-color: var(--cinza-100); } .fotomicrografia figcaption { margin-top: var(--esp-3); color: var(--texto-suave); font-size: var(--texto-sm); line-height: 1.7; } .fotomicrografia figcaption strong { display: block; margin-bottom: var(--esp-2); color: var(--texto); } .responsavel { margin-top: var(--esp-6); padding-top: var(--esp-5); border-top: 2px solid var(--borda); } .responsavel__rotulo { margin-bottom: var(--esp-4); color: var(--texto-tenue); font-size: var(--texto-xs); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; } .responsavel ul { display: grid; gap: var(--esp-3); list-style: none; } .responsavel li { color: var(--texto-suave); font-size: var(--texto-sm); line-height: 1.6; } /* ========================================================================= AUDIODESCRIÇÃO ========================================================================= */ .audios { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--esp-4); margin-top: var(--esp-5); list-style: none; } .audio-faixa { padding: var(--esp-4); background-color: var(--fundo); border: 1px solid var(--borda); border-radius: var(--raio-md); } .audio-faixa__rotulo { display: flex; align-items: center; gap: var(--esp-2); margin-bottom: var(--esp-3); color: var(--texto-tenue); font-size: var(--texto-xs); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; } .audio-faixa__rotulo::before { content: ""; width: 8px; height: 8px; background-color: var(--cor-vermelho); border-radius: 50%; } .audio-faixa audio { display: block; width: 100%; } /* ========================================================================= RESPONSIVO ========================================================================= */ @media (max-width: 560px) { .galeria { columns: 1; } .linha-tempo__item { padding-left: var(--esp-5); } }