/* ========================================================================= e-Fuse — Design System Tokens ------------------------------------------------------------------------ Ported from MiM Pro for GPs Part 1 (Movember-Learning) and rebranded to the e-Fuse identity. Font faces are declared in engine/fonts.css — import that file before this one. Brand: Electric Navy #0D224F · Volt Blue #00AEEF · Anton/Overpass/Lora ========================================================================= */ :root { /* ---------- COLOR — e-Fuse PALETTE ---------- */ --efuse-navy: #0D224F; /* Electric Navy — primary surface, headings */ --efuse-storm: #1A3A6B; /* Storm — secondary navy tone */ --efuse-ink: #0A1326; /* Ink — deepest background, inverse surfaces */ --efuse-panel: #15233F; /* Panel — dark card/panel surfaces */ --efuse-volt: #00AEEF; /* Volt Blue — CTA, accent, interactive */ --efuse-arc: #33C3F5; /* Arc — hover/lighter volt */ --efuse-plasma: #7DD8F7; /* Plasma — soft volt highlight */ --efuse-volt-ink: #076D94; /* Volt-ink — AA accent text on light backgrounds */ --efuse-steel: #C0C8DD; /* Steel — borders, muted UI on dark */ --efuse-cloud: #E5E9EB; /* Cloud — muted surface, light bg variant */ --efuse-white: #FFFFFF; --efuse-body: #3B4D72; /* Body text — navy-tinted mid-tone */ --efuse-muted: #6B7A9B; /* Muted — labels, meta, sub-copy */ --efuse-correct: #1a7a4a; /* Feedback — correct/success */ --efuse-wrong: #b91c1c; /* Feedback — incorrect/error */ /* ---------- COLOR — SEMANTIC SURFACES ---------- */ --bg: var(--efuse-white); --bg-inverse: var(--efuse-navy); --bg-muted: var(--efuse-cloud); --bg-accent: var(--efuse-volt); --fg: var(--efuse-navy); --fg-inverse: var(--efuse-white); --fg-muted: var(--efuse-body); /* sub-copy on white */ --fg-subtle: var(--efuse-muted); /* labels, meta */ --border: rgba(13, 34, 79, 0.12); --border-strong: rgba(13, 34, 79, 0.55); --border-on-dark: rgba(255, 255, 255, 0.18); --highlighter: rgba(0, 174, 239, 0.22); /* translucent Volt Blue sweep */ /* ---------- TYPE — FAMILIES ---------- */ --font-display: 'Anton', sans-serif; /* hero / display (uppercase) */ --font-primary: 'Overpass', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif; --font-feature: 'Lora', Georgia, 'Times New Roman', serif; /* quotes / scenario italic only */ --font-mono: 'Overpass Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace; /* ---------- TYPE — WEIGHTS (Overpass) ---------- */ --weight-light: 300; --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; --weight-black: 900; /* ---------- TYPE — RAW SCALE (digital, scaled from 1920 print rules) ---------- Every type token is multiplied by --fs-scale (default 1). The accessibility "Text size" control sets --fs-scale on to scale all content text. */ --fs-scale: 1; --fs-display: calc(clamp(56px, 7vw, 96px) * var(--fs-scale)); /* Anton — hero */ --fs-h1: calc(clamp(40px, 4.5vw, 64px) * var(--fs-scale)); --fs-h2: calc(clamp(28px, 2.6vw, 40px) * var(--fs-scale)); --fs-h3: calc(clamp(22px, 1.8vw, 28px) * var(--fs-scale)); --fs-h4: calc(18px * var(--fs-scale)); --fs-subhead: calc(clamp(20px, 1.6vw, 26px) * var(--fs-scale)); /* Overpass Light */ --fs-body: calc(16px * var(--fs-scale)); --fs-body-lg: calc(18px * var(--fs-scale)); --fs-quote: calc(clamp(20px, 1.5vw, 24px) * var(--fs-scale)); --fs-small: calc(14px * var(--fs-scale)); --fs-eyebrow: calc(12px * var(--fs-scale)); /* Shared content measure — all body text + callout/interactive blocks use this so their left and right edges line up down the page. */ --measure: 700px; /* ---------- TYPE — LEADING & TRACKING ---------- */ --lh-tight: 1.05; --lh-snug: 1.15; --lh-normal: 1.4; --lh-relaxed: 1.55; --tr-display: -0.025em; /* Anton display */ --tr-subhead: -0.01em; --tr-body: 0; --tr-eyebrow: 0.16em; /* All-caps Overpass Mono eyebrows */ /* ---------- SPACING ---------- */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px; --sp-9: 96px; --sp-10: 128px; /* ---------- RADII ---------- */ --radius-none: 0; --radius-sm: 4px; --radius-md: 8px; --radius-lg: 16px; --radius-pill: 999px; /* ---------- ELEVATION ---------- */ --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06); --shadow-md: 0 4px 14px rgba(0, 0, 0, 0.08); --shadow-lg: 0 18px 48px rgba(0, 0, 0, 0.16); /* ---------- MOTION ---------- */ --ease-standard: cubic-bezier(0.2, 0.7, 0.2, 1); --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --dur-fast: 120ms; --dur-base: 220ms; --dur-slow: 360ms; } /* ========================================================================= BASE TYPE — semantic defaults ========================================================================= */ html, body { font-family: var(--font-primary); font-weight: var(--weight-light); font-size: var(--fs-body); line-height: var(--lh-relaxed); color: var(--fg); background: var(--bg); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } h1, h2, h3, h4, h5, h6 { font-family: var(--font-display); font-weight: var(--weight-regular); letter-spacing: var(--tr-display); line-height: var(--lh-tight); margin: 0; text-wrap: balance; } h1 { font-size: var(--fs-h1); } h2 { font-size: var(--fs-h2); } h3 { font-size: var(--fs-h3); line-height: var(--lh-snug); } h4 { font-size: var(--fs-h4); line-height: var(--lh-snug); letter-spacing: 0; } .display { font-family: var(--font-display); font-size: var(--fs-display); font-weight: var(--weight-regular); line-height: var(--lh-tight); letter-spacing: var(--tr-display); text-wrap: balance; } .subhead { font-family: var(--font-primary); font-weight: var(--weight-light); font-size: var(--fs-subhead); line-height: var(--lh-snug); letter-spacing: var(--tr-subhead); text-wrap: pretty; } .eyebrow { font-family: var(--font-mono); font-weight: var(--weight-semibold); font-size: var(--fs-eyebrow); letter-spacing: var(--tr-eyebrow); text-transform: uppercase; } p { margin: 0; max-width: 64ch; text-wrap: pretty; } .body-lg { font-size: var(--fs-body-lg); line-height: var(--lh-relaxed); } .body { font-size: var(--fs-body); line-height: var(--lh-relaxed); } .body-sm { font-size: var(--fs-small); line-height: var(--lh-normal); color: var(--fg-muted); } blockquote, .pull-quote { font-family: var(--font-feature); font-style: italic; font-weight: var(--weight-regular); font-size: var(--fs-quote); line-height: var(--lh-normal); letter-spacing: var(--tr-subhead); margin: 0; text-wrap: pretty; } /* ========================================================================= SIGNATURE — highlighter mark A translucent Volt Blue sweep sits behind key words. Use sparingly: at most one per layout. ========================================================================= */ .highlight { background-image: linear-gradient( to right, transparent 0%, var(--highlighter) 6%, var(--highlighter) 94%, transparent 100% ); background-repeat: no-repeat; background-position: center 60%; background-size: 100% 88%; padding: 0 0.18em 0.05em; box-decoration-break: clone; -webkit-box-decoration-break: clone; }