/* ============================================================ MEGAMIX — Performance Digital Foundations: color + type tokens Brand: geometric, high-performance, black + orange. Sampled from logo: orange #ED7203 · ink #040810 ============================================================ */ /* ---- Webfonts (Google) ------------------------------------- Display : Saira — angular, technical, sporty (matches wordmark) Body : Archivo — sturdy grotesque, pairs w/ Saira Mono : JetBrains Mono — data, metrics, eyebrow labels ------------------------------------------------------------ */ @import url('https://fonts.googleapis.com/css2?family=Saira:wght@400;500;600;700;800;900&family=Saira+Condensed:wght@600;700;800&family=Archivo:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;700&display=swap'); :root { /* ---------- BRAND ---------- */ --mx-orange: #ED7203; /* primary — CTAs, highlights, the "MIX" */ --mx-orange-bright: #FF7E0A; /* on-dark, glows */ --mx-orange-600: #D45F00; /* hover */ --mx-orange-700: #A84A00; /* press / deep */ --mx-orange-300: #FBA962; /* tints */ --mx-orange-100: #FFE2C7; --mx-orange-50: #FFF3E8; --mx-ink: #05080F; /* the "MEGA" black — primary dark */ --mx-ink-2: #0E131D; /* elevated dark surface */ --mx-ink-3: #171D2A; /* card on dark */ --mx-ink-4: #232B3A; /* hairlines on dark */ /* ---------- NEUTRALS (cool-tinted) ---------- */ --mx-white: #FFFFFF; --mx-paper: #F6F7FA; /* page bg light */ --mx-100: #ECEEF3; --mx-200: #DCE0E8; --mx-300: #C0C7D3; --mx-400: #97A0B0; --mx-500: #697282; --mx-600: #495160; --mx-700: #2D3442; --mx-800: #1A202C; /* ---------- SEMANTIC ---------- */ --mx-success: #18A957; --mx-success-bg: #E6F6EC; --mx-danger: #E5484D; --mx-danger-bg: #FCE9E9; --mx-warning: #F2A93B; --mx-warning-bg: #FDF1DE; --mx-info: #2D7FF9; --mx-info-bg: #E7F0FE; /* ---------- SURFACE / TEXT roles (light theme default) ---------- */ --mx-bg: var(--mx-paper); --mx-surface: var(--mx-white); --mx-surface-2: var(--mx-100); --mx-border: var(--mx-200); --mx-border-strong: var(--mx-300); --mx-fg: var(--mx-ink); /* primary text */ --mx-fg-2: var(--mx-600); /* secondary text */ --mx-fg-3: var(--mx-500); /* muted / captions */ --mx-accent: var(--mx-orange); /* ---------- TYPE FAMILIES ---------- */ --mx-font-display: 'Saira', 'Saira Condensed', system-ui, sans-serif; --mx-font-body: 'Archivo', system-ui, -apple-system, sans-serif; --mx-font-mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', monospace; /* ---------- TYPE SCALE (fluid) ---------- */ --mx-text-hero: clamp(48px, 7vw, 104px); --mx-text-d1: clamp(40px, 5vw, 72px); --mx-text-d2: clamp(32px, 4vw, 52px); --mx-text-h1: clamp(28px, 3vw, 40px); --mx-text-h2: 24px; --mx-text-h3: 19px; --mx-text-lg: 18px; --mx-text-base: 16px; --mx-text-sm: 14px; --mx-text-xs: 12.5px; /* ---------- RADII ---------- */ --mx-r-xs: 3px; --mx-r-sm: 6px; --mx-r-md: 10px; --mx-r-lg: 16px; --mx-r-xl: 24px; --mx-r-pill: 999px; /* ---------- SPACE (4px base) ---------- */ --mx-s1: 4px; --mx-s2: 8px; --mx-s3: 12px; --mx-s4: 16px; --mx-s5: 24px; --mx-s6: 32px; --mx-s7: 48px; --mx-s8: 64px; --mx-s9: 96px; /* ---------- ELEVATION ---------- */ --mx-shadow-sm: 0 1px 2px rgba(5,8,15,.08), 0 1px 1px rgba(5,8,15,.04); --mx-shadow-md: 0 6px 16px rgba(5,8,15,.10), 0 2px 4px rgba(5,8,15,.06); --mx-shadow-lg: 0 18px 48px rgba(5,8,15,.18), 0 6px 14px rgba(5,8,15,.10); --mx-shadow-orange: 0 10px 30px rgba(237,114,3,.35); /* ---------- MOTION ---------- */ --mx-ease: cubic-bezier(.2,.7,.2,1); --mx-ease-out: cubic-bezier(.16,1,.3,1); --mx-dur: 180ms; --mx-dur-lg: 320ms; } /* ============================================================ SEMANTIC ELEMENT STYLES — opt in via .mx scope ============================================================ */ .mx { font-family: var(--mx-font-body); color: var(--mx-fg); background: var(--mx-bg); font-size: var(--mx-text-base); line-height: 1.55; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } .mx .mx-eyebrow { font-family: var(--mx-font-mono); font-weight: 500; font-size: var(--mx-text-xs); letter-spacing: .22em; text-transform: uppercase; color: var(--mx-accent); } .mx-hero, .mx h1.mx-hero { font-family: var(--mx-font-display); font-weight: 800; font-size: var(--mx-text-hero); line-height: .92; letter-spacing: -.02em; text-transform: uppercase; } .mx-d1 { font-family: var(--mx-font-display); font-weight:800; font-size:var(--mx-text-d1); line-height:.96; letter-spacing:-.015em; text-transform:uppercase; } .mx-d2 { font-family: var(--mx-font-display); font-weight:700; font-size:var(--mx-text-d2); line-height:1.0; letter-spacing:-.01em; } .mx h1, .mx-h1 { font-family: var(--mx-font-display); font-weight:700; font-size:var(--mx-text-h1); line-height:1.05; letter-spacing:-.01em; margin:0; } .mx h2, .mx-h2 { font-family: var(--mx-font-display); font-weight:600; font-size:var(--mx-text-h2); line-height:1.15; margin:0; } .mx h3, .mx-h3 { font-family: var(--mx-font-display); font-weight:600; font-size:var(--mx-text-h3); line-height:1.25; margin:0; } .mx-lead { font-size:var(--mx-text-lg); color:var(--mx-fg-2); line-height:1.55; } .mx p { margin:0 0 1em; } .mx small, .mx-small { font-size:var(--mx-text-sm); color:var(--mx-fg-2); } .mx .mx-caption { font-size:var(--mx-text-xs); color:var(--mx-fg-3); } .mx .mx-metric { font-family:var(--mx-font-mono); font-weight:700; font-variant-numeric:tabular-nums; letter-spacing:-.02em; } .mx a { color: var(--mx-accent); text-decoration: none; } .mx a:hover { text-decoration: underline; } .mx ::selection { background: var(--mx-orange); color:#fff; } /* dark theme scope */ .mx-dark { --mx-bg: var(--mx-ink); --mx-surface: var(--mx-ink-2); --mx-surface-2: var(--mx-ink-3); --mx-border: var(--mx-ink-4); --mx-border-strong: #2E3849; --mx-fg: #F4F6FA; --mx-fg-2: #AEB6C4; --mx-fg-3: #7C8696; --mx-accent: var(--mx-orange-bright); color: var(--mx-fg); background: var(--mx-bg); }