/* bloco1.css (escopado) */ /* ===== Import de fonte (opcional) ===== Se já importar a font no ou num CSS global, remova essa linha. */ @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;700&display=swap'); /* ===== Escopo e reset limitado ao bloco 1 ===== */ /* Evita alterações globais no site — aplica box-sizing apenas dentro do bloco. */ .bloco1-quadro-principal, .bloco1-quadro-principal * { box-sizing: border-box; } /* ===== Variáveis substituídas por valores literais (sem :root) ===== */ /* Valores usados: gap: 20px max-width: 1280px card-size-min: 80px card-size-max: 140px transition: 180ms cubic-bezier(.2,.9,.3,1) text: #ffffff subtext: rgba(255,255,255,0.78) */ /* ===== Layout principal (escopado para bloco1) ===== */ .bloco1-quadro-principal{ min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 48px 20px; gap: 20px; /* fonte base localizada aqui para o bloco apenas (não altera body) */ font-family: "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; line-height: 1.25; -webkit-tap-highlight-color: transparent; color: #ffffff; } /* Container central com largura fluida (nav do bloco1) */ .bloco1-quadro-principal .bloco1-navegacao-temas{ width: min(1280px, 94vw); display: grid; grid-template-columns: repeat(7, minmax(110px, 1fr)); grid-auto-rows: auto; gap: 22px 36px; align-items: start; justify-items: center; padding: 24px; border-radius: 14px; position: relative; justify-content: center; } /* ===== Cards / itens (escopados para bloco1) ===== */ /* DEFAULT: 28% de opacidade para pastas/itens (ícone + texto) */ .bloco1-quadro-principal .bloco1-navegacao-temas article{ display: flex; flex-direction: column; align-items: center; width: 100%; max-width: 160px; text-align: center; user-select: none; color: rgba(255,255,255,0.78); transition: transform 180ms cubic-bezier(.2,.9,.3,1), opacity 180ms cubic-bezier(.2,.9,.3,1), box-shadow 180ms cubic-bezier(.2,.9,.3,1); opacity: 0.28; outline: none; } /* Apenas o artigo "Sobre Nós" (ou explicitamente marcado) reage ao hover/focus */ .bloco1-quadro-principal .bloco1-navegacao-temas article.bloco1-art-sobre-nos:hover, .bloco1-quadro-principal .bloco1-navegacao-temas article.bloco1-art-sobre-nos:focus-within, .bloco1-quadro-principal .bloco1-navegacao-temas article.bloco1-art-sobre-nos:active, .bloco1-quadro-principal .bloco1-navegacao-temas article[aria-current="page"]:hover, .bloco1-quadro-principal .bloco1-navegacao-temas article[aria-current="page"]:focus-within, .bloco1-quadro-principal .bloco1-navegacao-temas article[aria-current="page"]:active { transform: translateY(-6px) scale(1.02); opacity: 1; color: #ffffff; } /* tornar o artigo acessível quando for clicável (adicionar tabindex no HTML se necessário) */ .bloco1-quadro-principal .bloco1-navegacao-temas article[tabindex]{ cursor: pointer; } /* ícone / pasta (usa o svg único) - figuras do bloco1 */ .bloco1-quadro-principal .bloco1-fig-pasta-comum, .bloco1-quadro-principal .bloco1-fig-pasta-principal{ width: clamp(80px, 12vw, 140px); aspect-ratio: 1/1; display: flex; align-items: center; justify-content: center; border-radius: 10px; transition: transform 180ms cubic-bezier(.2,.9,.3,1), box-shadow 180ms cubic-bezier(.2,.9,.3,1); } /* destaque para a pasta "aberta" (sobre-nos) */ .bloco1-quadro-principal .bloco1-art-sobre-nos .bloco1-fig-pasta-principal{ border-radius: 14px; transform-origin: center; position: relative; /* necessário para ::after */ } /* imagem SVG dentro das pastas */ .bloco1-quadro-principal .bloco1-fig-pasta-comum img, .bloco1-quadro-principal .bloco1-fig-pasta-principal img{ width: 100%; height: 100%; object-fit: contain; display: block; filter: none; pointer-events: none; transition: opacity 180ms cubic-bezier(.2,.9,.3,1), transform 180ms cubic-bezier(.2,.9,.3,1); } /* Texto dos cards (escopado) */ .bloco1-quadro-principal .bloco1-navegacao-temas h2, .bloco1-quadro-principal .bloco1-navegacao-temas .bloco1-titulo, .bloco1-quadro-principal .bloco1-navegacao-temas .bloco1-titulo-pequeno, .bloco1-quadro-principal .bloco1-navegacao-temas .bloco1-titulo-sobre{ margin: 0; font-weight: 600; color: #ffffff; font-size: clamp(14px, 1.25vw, 20px); line-height: 1.1; text-wrap: balance; } /* manter o Sobre Nós com destaque (100% de opacidade por padrão) */ .bloco1-quadro-principal .bloco1-navegacao-temas article.bloco1-art-sobre-nos, .bloco1-quadro-principal .bloco1-navegacao-temas article[aria-current="page"]{ opacity: 1; } /* ===== Grid específico (responsivo) ===== */ @media (min-width: 1280px){ .bloco1-quadro-principal .bloco1-navegacao-temas{ grid-template-columns: repeat(7, 1fr); gap: 24px 36px; } } @media (max-width: 1100px){ .bloco1-quadro-principal .bloco1-navegacao-temas{ gap: 10px; width: min(1000px, 94vw); } } @media (max-width: 700px){ .bloco1-quadro-principal{ padding: 32px 10px; } .bloco1-quadro-principal .bloco1-navegacao-temas{ grid-template-columns: repeat(2, 1fr); gap: 14px 18px; width: 100%; padding: 16px; } .bloco1-quadro-principal .bloco1-fig-pasta-comum, .bloco1-quadro-principal .bloco1-fig-pasta-principal{ width: clamp(64px, 24vw, 110px); padding: 8%; } .bloco1-quadro-principal .bloco1-navegacao-temas h2{ font-size: 14px; } } /* ===== Acessibilidade e preferências do usuário ===== */ @media (prefers-reduced-motion: reduce){ .bloco1-quadro-principal .bloco1-navegacao-temas article, .bloco1-quadro-principal .bloco1-fig-pasta-comum, .bloco1-quadro-principal .bloco1-fig-pasta-principal{ transition: none; transform: none; } } /* ===== Ajustes finos ===== */ /* efeito de "levantar" do ícone só para o artigo sobre-nos */ .bloco1-quadro-principal .bloco1-navegacao-temas article.bloco1-art-sobre-nos:hover .bloco1-fig-pasta-comum img, .bloco1-quadro-principal .bloco1-navegacao-temas article.bloco1-art-sobre-nos:focus-within .bloco1-fig-pasta-comum img, .bloco1-quadro-principal .bloco1-navegacao-temas article.bloco1-art-sobre-nos:hover .bloco1-fig-pasta-principal img, .bloco1-quadro-principal .bloco1-navegacao-temas article.bloco1-art-sobre-nos:focus-within .bloco1-fig-pasta-principal img { transform: translateY(-2px); } /* evita que pastas comuns tenham qualquer transformação no hover */ .bloco1-quadro-principal .bloco1-navegacao-temas article:not(.bloco1-art-sobre-nos):hover, .bloco1-quadro-principal .bloco1-navegacao-temas article:not(.bloco1-art-sobre-nos):focus-within { transform: none; opacity: 0.28; color: rgba(255,255,255,0.78); } /* utilitários (mantidos e escopados) */ .bloco1-hidden{display:none !important;} .bloco1-center{display:flex;align-items:center;justify-content:center;} /* ===== Troca do ícone apenas para o artigo sobre-nos usando ::after ===== - Confirme que o caminho abaixo está correto relativo ao seu arquivo CSS. */ .bloco1-quadro-principal .bloco1-navegacao-temas article.bloco1-art-sobre-nos .bloco1-fig-pasta-principal::after{ content: ""; position: absolute; inset: 0; pointer-events: none; background-repeat: no-repeat; background-position: center; background-size: contain; opacity: 0; transition: opacity 180ms cubic-bezier(.2,.9,.3,1); } /* quando a pasta principal recebe hover / foco, exibimos o -over e escondemos o */ .bloco1-quadro-principal .bloco1-navegacao-temas article.bloco1-art-sobre-nos:hover .bloco1-fig-pasta-principal::after, .bloco1-quadro-principal .bloco1-navegacao-temas article.bloco1-art-sobre-nos:focus-within .bloco1-fig-pasta-principal::after{ background-image: url("../../images/sobre_nos/bloco1/pasta-principal-over.svg"); opacity: 1; } .bloco1-quadro-principal .bloco1-navegacao-temas article.bloco1-art-sobre-nos:hover .bloco1-fig-pasta-principal img, .bloco1-quadro-principal .bloco1-navegacao-temas article.bloco1-art-sobre-nos:focus-within .bloco1-fig-pasta-principal img{ opacity: 0; } /* pré-carregamento leve (fora da tela) — opcional */ .bloco1-quadro-principal .bloco1-navegacao-temas article.bloco1-art-sobre-nos .bloco1-fig-pasta-principal::before{ content: ""; position: absolute; left: -9999px; width: 1px; height: 1px; background-image: url("../../images/sobre_nos/bloco1/pasta-principal-over.svg"); background-size: 1px 1px; background-repeat: no-repeat; opacity: 0; pointer-events: none; }