/* ============================================================ Beace Design System — Foundations Two brands share this stylesheet under namespaced custom properties. Wrap an interface in `.brand-beace` or `.brand-begamers` (or apply to ) to switch palettes. ============================================================ */ /* ---------- Webfonts ---------- */ @font-face { font-family: "Commuters Sans"; src: url("fonts/CommutersSans-Heavy.otf") format("opentype"); font-weight: 900; font-style: normal; font-display: swap; } @font-face { font-family: "Network"; src: url("fonts/Network.ttf") format("truetype"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Lightcase"; src: url("fonts/Lightcase.ttf") format("truetype"); font-weight: 400; font-style: normal; font-display: swap; } /* DM Sans — body face (per brand direction) */ @import url("https://fonts.googleapis.com/css2?family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,600;9..40,700&display=swap"); /* ---------- Shared raw palette ---------- */ :root { /* Neutrals */ --c-black: #000000; --c-white: #ffffff; --c-ink-900: #0a0a0a; /* near-black surface */ --c-ink-800: #141414; /* card surface dark */ --c-ink-700: #1c1c1c; /* elevated surface */ --c-ink-600: #262626; /* hairline / divider on dark */ --c-ink-500: #3a3a3a; /* muted border */ --c-ink-400: #6b6b6b; /* secondary text on dark */ --c-ink-300: #a3a3a3; /* tertiary text */ --c-ink-200: #d4d4d4; /* subtle line on light */ --c-ink-100: #ededed; /* paper */ --c-ink-050: #f6f6f6; /* paper highlight */ /* Reds — same accent, two intensities */ --c-red-600: #cc0000; /* canonical brand red */ --c-red-700: #a30000; /* pressed / hover-darker */ --c-red-500: #e60000; /* hover-lighter / glow */ --c-red-100: #ffd6d6; /* faint wash for tags */ /* Semantic utility */ --c-success: #1f9d55; --c-warning: #d99a00; --c-danger: #cc0000; /* reuses brand red */ /* Spacing scale (8pt base, 4pt half-step) */ --space-0: 0; --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; --space-9: 96px; --space-10: 128px; /* Radii — kept tight; brand reads architectural, not soft */ --radius-0: 0; --radius-1: 2px; --radius-2: 4px; --radius-3: 8px; --radius-4: 12px; --radius-pill: 999px; /* Borders */ --border-hair: 1px; --border-rule: 2px; --border-bold: 4px; /* Shadows — used sparingly; dark UI prefers borders + glow */ --shadow-sm: 0 1px 2px rgba(0,0,0,0.4); --shadow-md: 0 6px 18px rgba(0,0,0,0.45); --shadow-lg: 0 18px 40px rgba(0,0,0,0.55); --glow-red: 0 0 0 1px rgba(204,0,0,0.6), 0 0 24px rgba(204,0,0,0.35); /* Motion */ --ease-out: cubic-bezier(0.22, 1, 0.36, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --dur-fast: 120ms; --dur-med: 220ms; --dur-slow: 400ms; /* Type families */ --font-display-heavy: "Commuters Sans", "Anton", "Arial Black", system-ui, sans-serif; --font-display: "Network", "Commuters Sans", "Bebas Neue", system-ui, sans-serif; --font-secondary: "Lightcase", "Network", system-ui, sans-serif; --font-body: "DM Sans", "Helvetica Neue", Arial, system-ui, sans-serif; --font-mono: "JetBrains Mono", "SF Mono", ui-monospace, monospace; /* Type scale (clamped — 16:9 deck friendly) */ --fs-display-2xl: clamp(64px, 9vw, 160px); --fs-display-xl: clamp(48px, 6.5vw, 112px); --fs-display: clamp(40px, 5vw, 80px); --fs-h1: clamp(36px, 4vw, 64px); --fs-h2: clamp(28px, 3vw, 44px); --fs-h3: 24px; --fs-h4: 18px; --fs-body-lg: 18px; --fs-body: 16px; --fs-body-sm: 14px; --fs-caption: 12px; --fs-micro: 11px; /* Line heights */ --lh-display: 0.92; --lh-heading: 1.08; --lh-body: 1.55; --lh-tight: 1.2; /* Tracking */ --ls-tight: -0.02em; --ls-normal: 0; --ls-wide: 0.06em; --ls-wider: 0.14em; /* eyebrows, micro caps */ } /* ============================================================ BRAND — Beace Publicidade Premium agency. Black canvas, white type, red as a single confident accent (never a wash). Display set in Network; weighty headlines in Commuters Sans Heavy. ============================================================ */ .brand-beace { --bg: var(--c-black); --bg-elev: var(--c-ink-900); --surface: var(--c-ink-800); --surface-2: var(--c-ink-700); --fg1: var(--c-white); /* primary text */ --fg2: var(--c-ink-300); /* secondary text */ --fg3: var(--c-ink-400); /* tertiary / meta */ --fg-inverse: var(--c-black); --line: var(--c-ink-600); --line-strong: var(--c-ink-500); --accent: var(--c-red-600); --accent-hover: var(--c-red-500); --accent-press: var(--c-red-700); --accent-ink: var(--c-white); --link: var(--c-white); --link-hover: var(--c-red-500); --font-h: var(--font-display-heavy); --font-d: var(--font-display); --font-p: var(--font-body); background: var(--bg); color: var(--fg1); font-family: var(--font-p); } /* ============================================================ BRAND — BEGAMERS Sister mark, esports tone. Same DNA, more aggressive. Red runs hotter; Commuters Sans Heavy is the default display. ============================================================ */ .brand-begamers { --bg: var(--c-black); --bg-elev: #050505; --surface: var(--c-ink-900); --surface-2: var(--c-ink-800); --fg1: var(--c-white); --fg2: var(--c-ink-300); --fg3: var(--c-ink-400); --fg-inverse: var(--c-black); --line: var(--c-ink-700); --line-strong: var(--c-red-600); --accent: var(--c-red-600); --accent-hover: var(--c-red-500); --accent-press: var(--c-red-700); --accent-ink: var(--c-white); --link: var(--c-red-600); --link-hover: var(--c-white); --font-h: var(--font-display-heavy); --font-d: var(--font-display-heavy); --font-p: var(--font-body); background: var(--bg); color: var(--fg1); font-family: var(--font-p); } /* ============================================================ Semantic typography classes Use these instead of raw font-sizes. They pick the right family per brand because they reference --font-h / --font-d. ============================================================ */ .display-2xl, .display-xl, .display, .h1, .h2, .h3, .h4, .eyebrow, .lede, .p, .small, .caption, .mono { display: block; } .display-2xl { font-family: var(--font-h); font-size: var(--fs-display-2xl); line-height: var(--lh-display); letter-spacing: var(--ls-tight); text-transform: uppercase; font-weight: 900; } .display-xl { font-family: var(--font-h); font-size: var(--fs-display-xl); line-height: var(--lh-display); letter-spacing: var(--ls-tight); text-transform: uppercase; font-weight: 900; } .display { font-family: var(--font-d); font-size: var(--fs-display); line-height: var(--lh-heading); letter-spacing: var(--ls-normal); font-weight: 400; } .h1 { font-family: var(--font-h); font-size: var(--fs-h1); line-height: var(--lh-heading); letter-spacing: var(--ls-tight); text-transform: uppercase; font-weight: 900; } .h2 { font-family: var(--font-h); font-size: var(--fs-h2); line-height: var(--lh-heading); letter-spacing: var(--ls-tight); text-transform: uppercase; font-weight: 900; } .h3 { font-family: var(--font-d); font-size: var(--fs-h3); line-height: var(--lh-tight); font-weight: 400; } .h4 { font-family: var(--font-body); font-size: var(--fs-h4); line-height: var(--lh-tight); font-weight: 600; letter-spacing: var(--ls-normal); } .eyebrow { font-family: var(--font-body); font-size: var(--fs-micro); line-height: 1; letter-spacing: var(--ls-wider); text-transform: uppercase; font-weight: 600; color: var(--fg2); } .lede { font-family: var(--font-body); font-size: var(--fs-body-lg); line-height: var(--lh-body); color: var(--fg2); font-weight: 400; } .p { font-family: var(--font-body); font-size: var(--fs-body); line-height: var(--lh-body); color: var(--fg1); font-weight: 400; text-wrap: pretty; } .small { font-family: var(--font-body); font-size: var(--fs-body-sm); line-height: var(--lh-body); color: var(--fg2); } .caption { font-family: var(--font-body); font-size: var(--fs-caption); line-height: 1.4; color: var(--fg3); letter-spacing: var(--ls-wide); text-transform: uppercase; } .mono { font-family: var(--font-mono); font-size: var(--fs-body-sm); letter-spacing: 0; color: var(--fg2); } /* ---- Inline link ---- */ a.link, .brand-beace a, .brand-begamers a { color: var(--link); text-decoration: none; border-bottom: 1px solid currentColor; transition: color var(--dur-fast) var(--ease-out); } .brand-beace a:hover, .brand-begamers a:hover { color: var(--link-hover); } /* ---- Selection ---- */ .brand-beace ::selection, .brand-begamers ::selection { background: var(--accent); color: var(--accent-ink); } /* ---- Utility: red rule (signature 4px slash used as a divider) ---- */ .rule-red { display: block; width: var(--space-7); height: var(--border-bold); background: var(--accent); border: 0; }