/* ============================================================
MEGAMIX — Performance Digital
Optimized Foundations: color + type tokens
Performance notes:
1) This file intentionally DOES NOT use @import.
2) Add the Google Fonts links below directly in the of the page.
3) Keep only the font weights actually used by the landing page.
Recommended snippet:
Optional high-performance fallback:
If FCP is still slow, remove Google Fonts temporarily and use only system-ui.
============================================================ */
:root {
/* ---------- BRAND ---------- */
--mx-orange:#ED7203;
--mx-orange-bright:#FF7E0A;
--mx-orange-600:#D45F00;
--mx-orange-700:#A84A00;
--mx-orange-300:#FBA962;
--mx-orange-100:#FFE2C7;
--mx-orange-50:#FFF3E8;
--mx-ink:#05080F;
--mx-ink-2:#0E131D;
--mx-ink-3:#171D2A;
--mx-ink-4:#232B3A;
/* ---------- NEUTRALS ---------- */
--mx-white:#FFFFFF;
--mx-paper:#F6F7FA;
--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 ---------- */
--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);
--mx-fg-2:var(--mx-600);
--mx-fg-3:var(--mx-500);
--mx-accent:var(--mx-orange);
/* ---------- TYPE FAMILIES ---------- */
--mx-font-display:'Saira',system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
--mx-font-body:'Archivo',system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
--mx-font-mono:ui-monospace,'SFMono-Regular','Roboto Mono','Consolas',monospace;
/* ---------- TYPE SCALE ---------- */
--mx-text-hero:clamp(42px,11vw,104px);
--mx-text-d1:clamp(36px,8vw,72px);
--mx-text-d2:clamp(30px,6vw,52px);
--mx-text-h1:clamp(28px,5vw,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 ---------- */
--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:optimizeSpeed;
}
.mx .mx-eyebrow {
font-family:var(--mx-font-mono);
font-weight:600;
font-size:var(--mx-text-xs);
letter-spacing:.18em;
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;
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);
}
@media (max-width:767px) {
:root {
--mx-text-hero:clamp(40px,12vw,64px);
--mx-text-d1:clamp(34px,10vw,56px);
--mx-text-d2:clamp(28px,8vw,44px);
--mx-text-lg:17px;
}
.mx-hero,
.mx h1.mx-hero {
line-height:.96;
letter-spacing:-.015em;
}
}