/* =========================================================================
BMR 3D — site institucional (bmr3d.com.br)
Nenhuma cor crua. Tudo sai de tokens.css.
Escala de espaçamento de 4px. Roxo é ação, não decoração.
========================================================================= */
/* Fontes e tokens NÃO entram por @import.
@import cria corrente: o navegador baixa este arquivo, só então descobre o
próximo, baixa, e só então as fontes — três idas e voltas antes de pintar
qualquer texto. No celular em rede lenta isso é o que mais atrasa a página.
Ambos são carregados por no das páginas, em paralelo. */
/* ---------------------------------------------------------------- base -- */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 5.5rem; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
margin: 0;
background: var(--color-background);
color: var(--color-text);
font-family: var(--font-sans);
font-size: var(--text-base);
line-height: var(--leading-normal);
-webkit-font-smoothing: antialiased;
overflow-x: hidden;
}
img, svg { max-width: 100%; display: block; }
a { color: var(--color-brand-soft); }
::selection { background: var(--color-brand); color: var(--color-text-on-brand); }
:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--radius-xs); }
.skip {
position: absolute; left: var(--space-4); top: -4rem; z-index: var(--z-toast);
padding: var(--space-3) var(--space-4);
border-radius: var(--radius-sm);
background: var(--color-brand); color: var(--color-text-on-brand);
font-weight: var(--weight-semibold); text-decoration: none;
transition: top var(--duration-fast) var(--ease-out);
}
.skip:focus { top: var(--space-4); }
/* ------------------------------------------------------------ layout --- */
.container {
width: 100%;
max-width: var(--container-max);
margin-inline: auto;
padding-inline: var(--space-page);
}
.section { padding-block: clamp(var(--space-8), 9vw, var(--space-10)); }
.section--tight { padding-block: clamp(var(--space-7), 6vw, var(--space-9)); }
.section--sunken { background: var(--color-surface-sunken); }
.section-head { max-width: 46rem; margin-bottom: var(--space-7); }
.section-head--center { margin-inline: auto; text-align: center; }
.eyebrow {
display: inline-flex; align-items: center; gap: var(--space-2);
margin: 0 0 var(--space-3);
color: var(--color-brand-soft);
font-family: var(--font-mono);
font-size: var(--text-xs);
font-weight: var(--weight-medium);
letter-spacing: var(--tracking-caps);
text-transform: uppercase;
}
.eyebrow::before {
content: ""; width: 7px; height: 7px; border-radius: 50%;
background: var(--color-brand); box-shadow: 0 0 12px var(--color-brand);
flex-shrink: 0;
}
.section-head--center .eyebrow { justify-content: center; }
h1, h2, h3 {
font-family: var(--font-display);
line-height: var(--leading-tight);
letter-spacing: var(--tracking-tight);
margin: 0;
}
h2 { font-size: clamp(var(--text-2xl), 4.4vw, var(--text-3xl)); font-weight: var(--weight-bold); }
h3 { font-size: var(--text-lg); font-weight: var(--weight-semibold); }
p { margin: 0; color: var(--color-text-muted); }
.lede { max-width: 62ch; margin-top: var(--space-4); font-size: var(--text-lg); }
.section-head--center .lede { margin-inline: auto; }
.mono { font-family: var(--font-mono); }
.muted { color: var(--color-text-muted); }
/* ---------------------------------------------------- marcador de TODO -- */
/* Tudo que precisa ser confirmado por você aparece destacado em âmbar.
Some da tela quando a classe .todo for removida. Ver README.md. */
.todo {
background: var(--color-warning-subtle);
box-shadow: 0 0 0 1px var(--color-warning) inset;
border-radius: var(--radius-xs);
padding-inline: 0.28em;
}
.todo::after {
content: " ⚑";
color: var(--color-warning);
font-size: 0.8em;
}
/* ----------------------------------------------------------- botões ---- */
.btn {
display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
min-height: 44px; padding: 0.7rem 1.35rem;
border: 1px solid transparent; border-radius: var(--radius-control);
background: var(--color-brand); color: var(--color-text-on-brand);
font-family: var(--font-sans); font-size: var(--text-sm); font-weight: var(--weight-semibold);
line-height: 1; text-decoration: none; cursor: pointer; white-space: nowrap;
transition: background var(--duration-fast) var(--ease-out),
box-shadow var(--duration-fast) var(--ease-out),
transform var(--duration-fast) var(--ease-out),
border-color var(--duration-fast) var(--ease-out);
}
.btn:hover { background: var(--color-brand-hover); box-shadow: var(--shadow-brand); transform: translateY(-1px); }
.btn:active { background: var(--color-brand-active); transform: translateY(0); box-shadow: none; }
.btn--secondary { background: var(--color-brand-subtle); color: var(--color-brand-soft); border-color: var(--color-border-brand); }
.btn--secondary:hover { background: var(--color-brand-subtle-hi); box-shadow: none; }
.btn--ghost { background: transparent; color: var(--color-text); border-color: var(--color-border-control); }
.btn--ghost:hover { background: var(--color-surface-raised); box-shadow: none; border-color: var(--color-border-strong); }
.btn--lg { min-height: 52px; padding: 0.95rem 1.85rem; font-size: var(--text-base); }
.btn--sm { min-height: 36px; padding: 0.45rem 0.95rem; font-size: var(--text-xs); }
.btn svg { width: 1.05em; height: 1.05em; flex-shrink: 0; }
.btn-row { display: flex; flex-wrap: wrap; gap: var(--space-3); }
/* ---------------------------------------------------------- cabeçalho -- */
.header {
position: sticky; top: 0; z-index: var(--z-sticky);
background: var(--color-surface-glass);
backdrop-filter: blur(14px);
border-bottom: 1px solid transparent;
transition: border-color var(--duration-base) var(--ease-out),
background var(--duration-base) var(--ease-out);
}
.header[data-scrolled="true"] { border-bottom-color: var(--color-border); }
.header__inner {
display: flex; align-items: center; gap: var(--space-5);
min-height: 4.5rem;
}
.header__logo { display: flex; align-items: center; flex-shrink: 0; }
.header__logo img { width: 116px; height: auto; }
.nav { display: flex; align-items: center; gap: var(--space-2); margin-left: auto; }
.nav a {
padding: var(--space-2) var(--space-3);
border-radius: var(--radius-sm);
color: var(--color-text-muted);
font-size: var(--text-sm); font-weight: var(--weight-medium);
text-decoration: none;
transition: color var(--duration-fast) var(--ease-out),
background var(--duration-fast) var(--ease-out);
}
.nav a:hover { color: var(--color-text); background: var(--color-surface-raised); }
.header .btn { margin-left: var(--space-2); }
/* O CTA do cabeçalho é um dentro de