/* ========================================================================== layout/grid.css — Container, seções e grades O esqueleto de todas as seções. Componentes não definem largura própria. ========================================================================== */ /* -------------------------------------------------------------------------- Container -------------------------------------------------------------------------- */ .container { inline-size: 100%; max-inline-size: var(--container); margin-inline: auto; padding-inline: var(--gutter); } .container--narrow { max-inline-size: var(--container-narrow); } /* -------------------------------------------------------------------------- Seção -------------------------------------------------------------------------- */ .section { padding-block: var(--space-section); position: relative; /* Sem scroll-margin aqui: `scroll-padding-top` no (base/reset.css) já recua a zona de pouso das âncoras. Os dois mecanismos são independentes por especificação e SOMAM — juntos empurravam a seção 168px abaixo do topo. */ } .section--alt { background: var(--bg-secondary); } .section--deep { background: var(--bg-base); } .section--tight { padding-block: clamp(3rem, 6vw, 5rem); } /* Fio de separação sutil entre blocos de mesma cor de fundo. */ .section--divided { border-block-start: 1px solid var(--border); } /* -------------------------------------------------------------------------- Cabeçalho de seção -------------------------------------------------------------------------- */ .section__head { display: grid; gap: var(--space-sm); max-inline-size: 56rem; margin-block-end: clamp(2.5rem, 5vw, 4rem); } .section__head--center { justify-items: center; text-align: center; margin-inline: auto; } .section__title { max-inline-size: 22ch; } .section__head--center .section__title { max-inline-size: 26ch; } .section__lead { max-inline-size: 64ch; } /* -------------------------------------------------------------------------- Grades min() no minmax impede overflow horizontal em telas muito estreitas. -------------------------------------------------------------------------- */ .grid { display: grid; gap: var(--space-md); } .grid--cards { grid-template-columns: repeat(auto-fit, minmax(min(17.5rem, 100%), 1fr)); } .grid--wide { grid-template-columns: repeat(auto-fit, minmax(min(21rem, 100%), 1fr)); } .grid--pillars { grid-template-columns: repeat(auto-fit, minmax(min(13.5rem, 100%), 1fr)); gap: var(--space-sm); } /* -------------------------------------------------------------------------- Split — texto ao lado de um visual -------------------------------------------------------------------------- */ .split { display: grid; gap: clamp(2rem, 5vw, 4rem); align-items: center; } @media (min-width: 60rem) { .split { grid-template-columns: 1fr 1fr; } .split--text-lead { grid-template-columns: 1.05fr 0.95fr; } .split--visual-lead { grid-template-columns: 0.9fr 1.1fr; } } .split__body { display: grid; gap: var(--space-md); align-content: start; } /* -------------------------------------------------------------------------- Faixa de rodapé de seção (nota, aviso, CTA secundário) -------------------------------------------------------------------------- */ .section__note { margin-block-start: var(--space-lg); font-size: var(--fs-sm); color: var(--text-tertiary); } /* -------------------------------------------------------------------------- Brilho ambiente — usado com moderação, só em hero e CTA final -------------------------------------------------------------------------- */ .glow { position: relative; isolation: isolate; overflow: clip; } .glow::before { content: ""; position: absolute; z-index: -1; inset-block-start: -30%; inset-inline-start: 50%; inline-size: min(70rem, 130%); aspect-ratio: 1; translate: -50% 0; background: radial-gradient( circle at center, var(--brand-soft) 0%, transparent 62% ); pointer-events: none; }