@import url('fonts.css'); /* ============================================================ EdMechanics — Colors & Type foundations Educational Humanoid Robotics · "Made in Saudi" · Vision 2030 ============================================================ Fonts: the brand's real TT Norms Pro family is self-hosted via fonts.css (@imported above) — TT Norms Pro for display + body, TT Norms Pro Mono for technical/spec data. No CDN or webfont is required; just link this stylesheet. ============================================================ */ :root { /* ---- Brand palette (sampled from EDMechanics_2.1.pptx) ---- */ --em-ink: #15191F; /* primary dark — near-black navy */ --em-ink-2: #222121; /* secondary dark — warm charcoal */ --em-forest: #236055; /* deep teal-green — primary brand */ --em-teal: #3EA896; /* mint teal — secondary brand */ --em-steel: #4E868C; /* muted steel teal — most-used hue */ --em-cyan: #83F4FB; /* electric cyan — high-energy accent */ --em-paper: #E4E2DD; /* warm cream/paper — light background */ --em-white: #FFFFFF; /* ---- Tints & shades (oklch-harmonized off the brand hues) ---- */ --em-forest-900: #15302b; --em-forest-700: #1c4a42; --em-forest-500: #236055; --em-teal-300: #6fc4b5; --em-teal-100: #c4e8e1; --em-steel-300: #8fb6ba; --em-steel-100: #d3e2e3; --em-cyan-soft: #b8f8fc; /* ---- Neutral ramp (warm-grey, paper-leaning) ---- */ --em-n-0: #ffffff; --em-n-50: #f4f3ef; --em-n-100: #E4E2DD; --em-n-200: #d2cfc8; --em-n-300: #b4b0a7; --em-n-400: #8c8881; --em-n-500: #67645e; --em-n-600: #494742; --em-n-700: #2e2d2a; --em-n-800: #1d1c1a; --em-n-900: #15191F; /* ---- Semantic foreground / background ---- */ --fg1: var(--em-ink); /* primary text */ --fg2: #494742; /* secondary text */ --fg3: #67645e; /* tertiary / captions */ --fg-on-dark: #f4f3ef; /* primary text on dark surfaces */ --fg-on-dark-2: #aebec0; /* secondary text on dark */ --bg1: var(--em-paper); /* page background (warm) */ --bg2: #f4f3ef; /* raised surface */ --bg-card: #ffffff; /* card surface */ --bg-dark: var(--em-ink); /* dark section background */ --bg-dark-2: #1d2228; /* dark raised surface */ --brand: var(--em-forest); /* primary action / brand */ --brand-hover: #1c4a42; --brand-press: #15302b; --accent: var(--em-cyan); /* highlights, focus, data viz */ --accent-ink: var(--em-forest); /* text on cyan accent */ --line: rgba(21,25,31,.12); /* hairline border on light */ --line-strong: rgba(21,25,31,.22); --line-on-dark: rgba(255,255,255,.14); /* ---- Status ---- */ --ok: #2f8f6f; --warn: #c9912f; --err: #c0504d; /* from theme accent2 */ /* ---- Type families ---- */ --font-display: 'TT Norms Pro', 'Manrope', system-ui, sans-serif; --font-body: 'TT Norms Pro', 'Manrope', system-ui, sans-serif; --font-mono: 'TT Norms Pro Mono', 'JetBrains Mono', ui-monospace, monospace; /* ---- Type scale (1.250 major-third, 16px base) ---- */ --t-display: 600; --t-bold: 700; --t-xbold: 800; --fs-display: 76px; --lh-display: 0.98; --ls-display: -0.02em; --fs-h1: 54px; --lh-h1: 1.02; --ls-h1: -0.018em; --fs-h2: 38px; --lh-h2: 1.08; --ls-h2: -0.012em; --fs-h3: 27px; --lh-h3: 1.15; --ls-h3: -0.008em; --fs-h4: 21px; --lh-h4: 1.25; --ls-h4: -0.004em; --fs-body: 16px; --lh-body: 1.55; --fs-sm: 14px; --lh-sm: 1.5; --fs-xs: 12px; --lh-xs: 1.45; --fs-eyebrow: 13px; --ls-eyebrow: 0.16em; /* uppercase label */ /* ---- Radii ---- */ --r-xs: 4px; --r-sm: 8px; --r-md: 12px; --r-lg: 18px; --r-xl: 28px; --r-pill: 999px; /* ---- Spacing (8pt base) ---- */ --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; /* ---- Shadows (soft, warm-neutral) ---- */ --sh-sm: 0 1px 2px rgba(21,25,31,.06), 0 1px 3px rgba(21,25,31,.08); --sh-md: 0 4px 12px rgba(21,25,31,.08), 0 2px 4px rgba(21,25,31,.06); --sh-lg: 0 16px 40px rgba(21,25,31,.12), 0 4px 10px rgba(21,25,31,.07); --sh-glow: 0 0 0 4px rgba(131,244,251,.35); /* cyan focus ring */ } /* Fix typo'd custom prop above — keep --warn clean */ /* ============================================================ Base element styles (opt-in via .em-type scope) ============================================================ */ .em-type, .em-type * { box-sizing: border-box; } .em-type { font-family: var(--font-body); color: var(--fg1); font-size: var(--fs-body); line-height: var(--lh-body); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } .em-display, .em-type h1.display { font-family: var(--font-display); font-weight: var(--t-display); font-size: var(--fs-display); line-height: var(--lh-display); letter-spacing: var(--ls-display); text-transform: uppercase; } .em-type h1 { font-family: var(--font-display); font-weight: var(--t-xbold); font-size: var(--fs-h1); line-height: var(--lh-h1); letter-spacing: var(--ls-h1); margin: 0; } .em-type h2 { font-family: var(--font-display); font-weight: var(--t-bold); font-size: var(--fs-h2); line-height: var(--lh-h2); letter-spacing: var(--ls-h2); margin: 0; } .em-type h3 { font-family: var(--font-display); font-weight: var(--t-bold); font-size: var(--fs-h3); line-height: var(--lh-h3); letter-spacing: var(--ls-h3); margin: 0; } .em-type h4 { font-family: var(--font-body); font-weight: var(--t-bold); font-size: var(--fs-h4); line-height: var(--lh-h4); letter-spacing: var(--ls-h4); margin: 0; } .em-type p { margin: 0 0 1em; max-width: 68ch; text-wrap: pretty; } .em-type .lead { font-size: 19px; line-height: 1.5; color: var(--fg2); } .em-type small, .em-type .small { font-size: var(--fs-sm); color: var(--fg3); } .em-eyebrow { font-family: var(--font-mono); font-weight: 500; font-size: var(--fs-eyebrow); letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--em-steel); } .em-mono { font-family: var(--font-mono); } .em-stat { font-family: var(--font-display); font-weight: var(--t-xbold); letter-spacing: -0.02em; font-size: 56px; line-height: 1; color: var(--em-forest); }