/* ============================================================
BRX Design System — global entry point.
Consumers link this single file. Keep it as @import lines only.
============================================================ */
/* tokens/fonts.css */
/* BRX webfonts — Space Grotesk (display) · Manrope (UI/body) · Space Mono (preços/SKUs).
As fontes NÃO são mais carregadas por @import aqui (anti-padrão: bloqueia render e encadeia
requisições). Agora vêm de + no de cada
página, injetados pelo build (build.mjs → headTags). Mantido só como documentação. */
/* tokens/colors.css */
/* ============================================================
BRX · COLORS
Concept: tri-color e-ink (black / white / red) + electric-blue data layer
============================================================ */
:root {
/* --- Ink (cool neutral ramp) --- */
--ink-950: #0E0F13;
--ink-900: #16181D;
--ink-800: #21242C;
--ink-700: #2E323C;
--ink-600: #434956;
--ink-500: #5C6373;
--ink-400: #818897;
--ink-300: #A8AEBB;
--ink-200: #CDD2DB;
--ink-100: #E6E9EF;
--ink-50: #F3F5F8;
/* --- Paper (surfaces) --- */
--paper: #FFFFFF;
--paper-2: #F6F7F9; /* subtle section fill */
--paper-3: #EEF0F4; /* deeper fill / wells */
/* --- Signal Red (primary brand — price / promo / CTA) --- */
--red-700: #A8160E;
--red-600: #C81E14;
--red-500: #E5342A; /* BRX primary */
--red-400: #FF5347;
--red-200: #FBC4BF;
--red-100: #FDE3E0;
--red-50: #FEF2F1;
/* --- Electric Blue (data / digital platform accent) --- */
--blue-700: #1740B8;
--blue-600: #1E4FD6;
--blue-500: #2F6BFF;
--blue-400: #5B8BFF;
--blue-200: #BFD2FF;
--blue-100: #E0E8FF;
--blue-50: #F0F4FF;
/* --- Semantic hues --- */
--green-600: #0F8A47;
--green-500: #18A957;
--green-100: #E1F6E9;
--amber-600: #D5860C;
--amber-500: #F5A623;
--amber-100: #FFF1D6;
--danger-600: #C8160C;
--danger-500: #E11D12;
--danger-100: #FBE0DE;
/* --- E-ink display palette (the physical label) --- */
--eink-black: #1A1A1A;
--eink-paper: #F7F6F1;
--eink-red: #D8362B;
--eink-bezel: #2A2C30;
/* ============================================================
SEMANTIC ALIASES
============================================================ */
/* Text */
--text-strong: var(--ink-900);
--text-body: var(--ink-700);
--text-muted: var(--ink-500);
--text-subtle: var(--ink-400);
--text-inverse: var(--paper);
--text-brand: var(--red-500);
--text-link: var(--blue-600);
/* Surfaces */
--surface-page: var(--paper);
--surface-subtle: var(--paper-2);
--surface-well: var(--paper-3);
--surface-card: var(--paper);
--surface-ink: var(--ink-900);
--surface-ink-2: var(--ink-800);
--surface-brand: var(--red-500);
--surface-brand-soft: var(--red-50);
--surface-data-soft: var(--blue-50);
/* Borders */
--border-subtle: var(--ink-100);
--border-default: var(--ink-200);
--border-strong: var(--ink-300);
--border-ink: var(--ink-700);
--border-brand: var(--red-500);
/* Interactive / brand */
--brand: var(--red-500);
--brand-hover: var(--red-600);
--brand-press: var(--red-700);
--brand-tint: var(--red-50);
--accent-data: var(--blue-500);
--accent-data-hover: var(--blue-600);
/* States */
--success: var(--green-500);
--warning: var(--amber-500);
--danger: var(--danger-500);
--info: var(--blue-500);
/* Focus */
--focus-ring: var(--blue-500);
}
/* tokens/typography.css */
/* ============================================================
BRX · TYPOGRAPHY
Space Grotesk (display) · Manrope (UI/body) · Space Mono (data)
============================================================ */
:root {
/* Families */
--font-display: 'Space Grotesk', 'Manrope', system-ui, sans-serif;
--font-sans: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
--font-mono: 'Space Mono', 'SFMono-Regular', ui-monospace, monospace;
/* Weights */
--weight-regular: 400;
--weight-medium: 500;
--weight-semibold: 600;
--weight-bold: 700;
--weight-extra: 800;
/* Type scale (1.25 major-third-ish, tuned) */
--text-2xs: 11px;
--text-xs: 12px;
--text-sm: 14px;
--text-base: 16px;
--text-md: 18px;
--text-lg: 20px;
--text-xl: 24px;
--text-2xl: 30px;
--text-3xl: 38px;
--text-4xl: 48px;
--text-5xl: 62px;
--text-6xl: 80px;
--text-7xl: 104px;
/* Line heights */
--leading-none: 1;
--leading-tight: 1.1;
--leading-snug: 1.25;
--leading-normal: 1.5;
--leading-relaxed: 1.65;
/* Letter spacing */
--tracking-tighter: -0.03em;
--tracking-tight: -0.015em;
--tracking-normal: 0em;
--tracking-wide: 0.02em;
--tracking-wider: 0.08em;
--tracking-caps: 0.14em; /* eyebrows / mono labels */
}
/* tokens/spacing.css */
/* ============================================================
BRX · SPACING & RADII (4px base grid)
============================================================ */
:root {
--space-0: 0;
--space-1: 4px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-5: 20px;
--space-6: 24px;
--space-8: 32px;
--space-10: 40px;
--space-12: 48px;
--space-16: 64px;
--space-20: 80px;
--space-24: 96px;
--space-32: 128px;
--space-40: 160px;
/* Radii — moderate, label-like crispness */
--radius-xs: 4px;
--radius-sm: 8px;
--radius-md: 12px;
--radius-lg: 16px;
--radius-xl: 24px;
--radius-2xl: 32px;
--radius-pill: 999px;
/* Containers */
--container-sm: 640px;
--container-md: 840px;
--container-lg: 1080px;
--container-xl: 1280px;
--container-2xl: 1440px;
/* Control heights */
--control-sm: 34px;
--control-md: 42px;
--control-lg: 52px;
}
/* tokens/elevation.css */
/* ============================================================
BRX · ELEVATION (shadows, rings, motion)
Cool-tinted, low-spread. No purple. Crisp, modern.
============================================================ */
:root {
--shadow-xs: 0 1px 2px rgba(16, 18, 24, 0.06);
--shadow-sm: 0 1px 2px rgba(16, 18, 24, 0.06), 0 2px 6px rgba(16, 18, 24, 0.05);
--shadow-md: 0 2px 4px rgba(16, 18, 24, 0.05), 0 8px 18px rgba(16, 18, 24, 0.08);
--shadow-lg: 0 8px 24px rgba(16, 18, 24, 0.10), 0 2px 6px rgba(16, 18, 24, 0.06);
--shadow-xl: 0 24px 60px rgba(16, 18, 24, 0.16), 0 8px 20px rgba(16, 18, 24, 0.08);
/* Brand-tinted lift (for primary CTAs / price cards) */
--shadow-brand: 0 8px 22px rgba(229, 52, 42, 0.28);
--shadow-data: 0 8px 22px rgba(47, 107, 255, 0.24);
/* Inset for wells / e-ink screens */
--shadow-inset: inset 0 1px 2px rgba(16, 18, 24, 0.10);
/* Focus ring */
--ring-focus: 0 0 0 3px rgba(47, 107, 255, 0.35);
--ring-brand: 0 0 0 3px rgba(229, 52, 42, 0.30);
/* Motion */
--ease-out: cubic-bezier(0.22, 1, 0.36, 1); /* @kind other */
--ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); /* @kind other */
--ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* @kind other */
--dur-fast: 120ms; /* @kind other */
--dur-base: 200ms; /* @kind other */
--dur-slow: 360ms; /* @kind other */
}
/* responsive.css */
/* ============================================================
BRX · RESPONSIVIDADE MOBILE
O site usa inline styles (sem media query nativa). Aqui:
- reduzimos a escala tipográfica via tokens (afeta todos os headings);
- colapsamos grids para 1 coluna via classes-âncora (.brx-*);
- ajustes de header/sidebar/galeria.
Os !important são necessários para sobrepor os inline styles.
============================================================ */
/* ---- Tablet e abaixo ---- */
@media (max-width: 900px) {
.brx-grid-4 { grid-template-columns: repeat(2, 1fr) !important; }
.brx-grid-models { grid-template-columns: repeat(3, 1fr) !important; }
.brx-masonry { column-count: 2 !important; }
}
/* ---- Mobile (≤ 760px) ---- */
@media (max-width: 760px) {
/* Escala tipográfica menor */
:root {
--text-7xl: 56px;
--text-6xl: 42px; /* hero */
--text-5xl: 36px;
--text-4xl: 30px;
--text-3xl: 26px;
--text-2xl: 24px;
--text-xl: 20px;
}
/* Containers: menos padding lateral */
.brx-container { padding-left: 20px !important; padding-right: 20px !important; }
/* Grids → 1 coluna */
/* minmax(0,1fr) impede que um filho largo (ex.: o mockup) estique a coluna
além da largura da tela — causa do overflow/texto cortado no celular. */
.brx-hero-grid,
.brx-grid-2,
.brx-grid-3,
.brx-grid-4,
.brx-grid-detail,
.brx-footer-grid {
grid-template-columns: minmax(0, 1fr) !important;
gap: 28px !important;
}
.brx-grid-models { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 12px !important; }
/* Linhas flex do hero que não quebravam: stats (Segundos/Tricolor/Sem fio) e eyebrow */
.brx-hero-stats { flex-wrap: wrap !important; gap: 18px 26px !important; }
.brx-eyebrow { flex-wrap: wrap !important; }
/* Hero: menos respiro vertical e mídia depois do texto */
.brx-hero-grid { padding-top: 40px !important; padding-bottom: 48px !important; }
/* Header: nav textual some no mobile (navegação fica no rodapé + CTA visível) */
.brx-nav { display: none !important; }
.brx-header-inner { padding-left: 18px !important; padding-right: 18px !important; }
/* Galeria (Produtos): menos colunas */
.brx-masonry { column-count: 1 !important; }
/* Plataforma (mockup): esconde a sidebar e deixa o conteúdo ocupar a tela */
.brx-dash-sidebar { display: none !important; }
.brx-dash-topbar { flex-wrap: wrap !important; height: auto !important; padding: 10px 14px !important; gap: 10px !important; }
/* Seções com muito padding vertical no desktop */
.brx-section { padding-top: 56px !important; padding-bottom: 56px !important; }
}
/* ---- Mobile pequeno (≤ 420px) ---- */
@media (max-width: 420px) {
:root { --text-6xl: 36px; --text-5xl: 30px; }
.brx-container { padding-left: 16px !important; padding-right: 16px !important; }
}