ocupa a coluna toda. */
.logo-page > div:last-child {
width: 100%;
display: flex;
justify-content: center;
}
/* O
e o
ocupam a coluna toda e centralizam: sem isso o max-width
em % era calculado sobre um container do tamanho da própria imagem, e o
logo saía deslocado no celular. */
.logo-main > div,
.logo-main h1 {
width: 100%;
text-align: center;
}
.logo-main img {
width: 320px;
max-width: 76%;
height: auto;
}
/* ***************** */
/* CELULAR E TABLET: até 1024px. O layout de desktop é uma grade de 2 a 4 colunas com
alturas fixas em vmax; aqui tudo vira uma coluna com altura automática.
As células vazias da grade (decorativas no desktop) somem. */
@media screen and (max-width: 1024px) {
/* ---------- HOME ---------- */
header {
height: auto;
grid-template-columns: 1fr;
}
header > div:nth-child(1) {
border-right: 0;
padding: 36px 0 24px 0;
}
.header-text > div {
text-align: center;
font-size: 0.95rem;
line-height: 1.5rem;
margin: 0 6% 32px 6%;
padding: 18px 0 0 0;
border-left: 0;
border-top: 3px solid var(--color-red);
}
article.board,
article.nether {
height: auto;
grid-template-columns: 1fr;
}
/* A foto fica no fundo da própria grade: o padding-top abre espaço para ela. */
.board-grid {
grid-template-columns: 1fr;
grid-template-rows: none;
grid-auto-rows: auto;
padding-top: min(56vw, 420px);
}
.board-grid > div:empty,
.nether-grid-items > div:empty,
.nether-grid > div:nth-child(2) {
display: none;
}
.nether-grid-items {
grid-template-columns: 1fr;
grid-template-rows: none;
grid-auto-rows: auto;
}
.nether-grid {
grid-template-columns: 1fr;
grid-auto-rows: min(60vw, 440px);
}
.nether-grid > div:nth-child(1) {
border-right: 0;
}
.menu-home {
height: auto;
padding: 34px 8%;
border-bottom: 1px solid var(--border-color);
}
.menu-home .menu-text {
font-size: 0.95rem;
line-height: 1.4rem;
}
/* Sem hover no toque: o texto fica sempre visível e o "+" some. */
.menu-home:hover .menu-text {
opacity: 1;
}
.menu-home .menu-icon {
display: none;
}
.div-info-grey {
height: auto;
padding: 34px 0;
}
.div-info-grey > div:nth-child(2) {
font-size: 5.5rem;
height: 5.5rem;
line-height: 5.5rem;
}
.div-info-red {
height: auto;
}
.div-info-red div {
font-size: 1.6rem;
line-height: 2rem;
padding: 40px 10%;
}
article.magazine {
height: auto;
padding: 36px 0;
}
article.magazine .grid-detail {
display: none;
}
.div-magazine {
height: auto;
gap: 16px;
padding: 0 6%;
}
.div-magazine > div:nth-child(2) {
font-size: 1.4rem;
line-height: 2rem;
padding: 0;
}
/* Mapa: o quadro vermelho sai de cima do mapa e vai para baixo dele. */
article.map {
height: min(75vw, 480px);
min-height: 280px;
}
div.map-over {
display: none;
}
address.map-info {
float: none;
width: auto;
height: auto;
margin: 0;
padding: 26px 7%;
gap: 20px;
outline-offset: -8px;
box-shadow: none;
}
.map-info-number {
font-size: 4rem;
}
article.news {
height: auto;
grid-template-columns: 1fr;
}
article.news > div:nth-child(1) {
border-right: 0;
}
.news-items {
padding: 28px 0;
border-bottom: 1px solid var(--border-color);
}
.news-items > div:nth-child(1),
.news-items > div:nth-child(2) {
height: auto;
}
.news-items > div:nth-child(2),
.news-items > div:nth-child(3) {
width: auto;
white-space: normal;
line-height: 1.5rem;
}
.news-items > div:nth-child(2) {
font-size: 1.2rem;
margin-top: 4px;
}
footer,
footer > div:nth-child(1),
footer > div:nth-child(2) {
height: auto;
}
footer > div:nth-child(1) {
padding: 30px 6% 24px 6%;
}
footer > div:nth-child(2) {
padding: 16px 6%;
}
footer .footer-slogan {
font-size: 1rem;
line-height: 2rem;
}
footer .footer-email {
font-size: 1.25rem;
padding: 8px 0 0 0;
}
/* ---------- PÁGINAS INTERNAS ---------- */
nav {
height: min(46vw, 300px);
}
/* Menu: só os itens com link, dividindo a largura. */
.grid-nav {
display: flex;
height: auto;
}
.grid-nav > div {
flex: 1;
min-width: 0;
}
.grid-nav > div:empty {
display: none;
}
.menu-deactive {
height: 44px;
line-height: 46px;
font-size: 1.25rem;
}
/* O da página (aba vermelha) ocupa a largura toda, logo abaixo da foto. */
.grid-detail {
display: block;
}
.grid-detail > div:empty {
display: none;
}
.grid-detail > div:not(:last-child) {
border-right: 0;
}
.menu-active {
margin-top: 0;
font-size: 1.6rem;
}
.content-page {
grid-template-columns: 1fr;
min-height: 0;
}
.logo-page {
border-right: 0;
border-bottom: 1px solid var(--border-color);
padding: 22px 0;
}
.div-direct-icon {
display: none;
}
.logo-page img {
width: 62%;
max-width: 250px;
}
.page-intro {
font-size: 0.95rem;
line-height: 1.5rem;
margin: 28px 6% 20px 6%;
padding-left: 18px;
}
.page-subtitle {
margin: 30px 6% 0 6%;
}
.page-stats {
grid-template-columns: 1fr 1fr;
}
.page-stats > div:nth-child(2) {
border-right: 0;
}
.page-stats > div:nth-child(-n+2) {
border-bottom: 1px solid var(--border-color);
}
.page-stats strong {
font-size: 2.4rem;
line-height: 2.8rem;
}
.page-cards,
.contact-cards {
grid-template-columns: 1fr;
margin-bottom: 30px;
}
.page-card {
padding: 24px 4%;
}
.page-cta {
padding: 30px 8%;
}
.page-cta p {
font-size: 1.15rem;
}
/* Equipe */
.div-teams {
grid-template-columns: 1fr;
grid-row-gap: 36px;
padding: 0 5%;
}
.div-people-team {
grid-template-columns: 130px 1fr;
}
.div-people-team .team-img,
.div-people-team .team-info {
height: 152px;
}
.div-people-team .team-img img {
width: 130px;
height: 152px;
object-fit: cover;
}
.div-people-team .team-info {
padding: 0 8px;
}
.div-people-team .team-info > h2 {
height: auto;
font-size: 1rem;
line-height: 1.4rem;
margin-bottom: 8px;
}
.div-people-team .team-info > div:nth-child(2),
.div-people-team .team-info > div:nth-child(3) {
font-size: 0.8rem;
}
/* Bloco da citação da equipe: só a citação, com a foto embaixo. */
.grid-pages-center {
display: block;
height: auto;
}
.grid-pages-center .grid-left,
.grid-pages-center .grid-right,
#article-team .grid-detail {
display: none;
}
.grid-pages-center .grid-center {
display: block;
padding-bottom: min(60vw, 420px);
}
.grid-pages-center .grid-center > div:not(.div-info-red) {
display: none;
}
/* Publicações */
.publication-index ol {
grid-template-columns: 1fr;
}
.publication h2 {
font-size: 1.4rem;
line-height: 1.9rem;
}
.publication p {
font-size: 0.95rem;
line-height: 1.5rem;
}
}
/* TABLET (600 a 1024px): mesmo layout empilhado, mas com espaço para duas
colunas nos cards, na equipe e no índice das publicações. */
@media screen and (min-width: 600px) and (max-width: 1024px) {
.page-cards,
.contact-cards,
.div-teams,
.publication-index ol {
grid-template-columns: 1fr 1fr;
}
.div-teams {
grid-column-gap: 30px;
}
.page-stats {
grid-template-columns: repeat(4, 1fr);
}
.page-stats > div:nth-child(2) {
border-right: 1px solid var(--border-color);
}
.page-stats > div:nth-child(-n+2) {
border-bottom: 0;
}
.map-info-address,
.map-info-phones {
max-width: 520px;
}
}
/* Notebook pequeno (1025 a 1280px): o quadro do mapa tem só 25% da largura. */
@media screen and (min-width: 1025px) and (max-width: 1280px) {
.map-info-label {
font-size: 1.1rem;
letter-spacing: 2px;
}
.map-info-number {
font-size: 3.4rem;
}
.map-info-street {
font-size: 1.6rem;
line-height: 1.5rem;
}
.map-info-street small {
font-size: 0.7rem;
}
.map-info-phones a {
font-size: 0.8rem;
}
}