/* ========================================================================= MakerMods — Design tokens Black + white + maker orange. Stencil cuts. Workshop, not studio. ========================================================================= */ @import url('https://fonts.googleapis.com/css2?family=Chakra+Petch:wght@500;600;700&family=Space+Grotesk:wght@400;500;700&family=JetBrains+Mono:wght@400;700&display=swap'); :root { /* ---- Color: neutrals (true neutral, no temperature bias) ---- */ --ink: #0A0A0A; --ink-2: #262626; /* heavy text on light */ --paper: #FAFAFA; --surface: #FFFFFF; --line: #E5E5E5; --line-2: #D4D4D4; --mute: #737373; --mute-2: #A3A3A3; /* ---- Color: brand accent (maker orange) ---- */ --orange: #FF6B2C; /* primary accent — friendly, hi-vis, soldering-iron warm */ --orange-2: #E55418; /* hover / pressed */ --orange-3: #FFE3D2; /* tint surfaces, highlight rows, halos */ --orange-ink: #0A0A0A; /* on-orange foreground (always dark — orange is bright) */ /* ---- Color: functional (used as ink, never decoration) ---- */ --danger: #DC2626; --warn: #D97706; --ok: #16A34A; --info: #2563EB; /* reserved for code-syntax / links only */ /* ---- Type families ---- */ --font-display: 'Chakra Petch', 'Bai Jamjuree', system-ui, sans-serif; --font-body: 'Space Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace; /* ---- Type scale (modular, 1.25 ratio above body, tighter below) ---- */ --t-eyebrow: 0.6875rem; /* 11px — UPPERCASE LABELS */ --t-caption: 0.75rem; /* 12px */ --t-small: 0.875rem; /* 14px */ --t-body: 1rem; /* 16px */ --t-lead: 1.125rem; /* 18px */ --t-h4: 1.375rem; /* 22px */ --t-h3: 1.75rem; /* 28px */ --t-h2: 2.25rem; /* 36px */ --t-h1: 3rem; /* 48px */ --t-display: 4.5rem; /* 72px */ --t-mega: 6.5rem; /* 104px — hero only */ /* ---- Line heights ---- */ --lh-tight: 1.05; /* display */ --lh-snug: 1.2; /* headings */ --lh-normal: 1.5; /* body */ --lh-loose: 1.7; /* long-form reading */ /* ---- Letter spacing ---- */ --ls-tight: -0.02em; --ls-normal: 0; --ls-wide: 0.04em; --ls-eyebrow: 0.14em; /* ---- Spacing (8-point grid; -1 is the only 4px) ---- */ --s-0: 0; --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px; --s-10: 128px; --s-11: 160px; --s-12: 200px; /* ---- Radii (restrained — the mark has hard corners) ---- */ --r-0: 0; --r-sm: 2px; --r-md: 6px; --r-lg: 12px; --r-xl: 16px; /* ceiling — never above this */ --r-pill: 999px; /* ---- Borders ---- */ --bw-1: 1px; --bw-2: 2px; /* heavy emphasis only */ /* ---- Shadows (two-step elevation) ---- */ --shadow-0: none; --shadow-1: 0 1px 0 rgba(10, 10, 10, 0.06), 0 1px 2px rgba(10, 10, 10, 0.04); --shadow-2: 0 4px 12px rgba(10, 10, 10, 0.08), 0 2px 4px rgba(10, 10, 10, 0.04); /* ---- Motion ---- */ --dur-fast: 80ms; --dur-base: 120ms; --dur-slow: 200ms; --ease-std: cubic-bezier(0.2, 0, 0, 1); --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1); /* ---- Layout ---- */ --container-marketing: 1280px; --container-product: 1440px; --read-column: 68ch; /* ---- Signature: stencil cuts (clip-path corner notches) ---- */ --notch-sm: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px); --notch-md: polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px); --notch-lg: polygon(24px 0, 100% 0, 100% calc(100% - 24px), calc(100% - 24px) 100%, 0 100%, 0 24px); } /* ---- Dark mode (toggle .dark on ) ---- */ .dark, [data-theme="dark"] { --ink: #F5F5F5; --ink-2: #E5E5E5; --paper: #0A0A0A; --surface: #141414; --line: #262626; --line-2: #404040; --mute: #A3A3A3; --mute-2: #737373; --orange: #FF7A40; --orange-2: #FF9460; --orange-3: #3A1F12; --danger: #EF4444; --warn: #F59E0B; --ok: #22C55E; --info: #60A5FA; --shadow-1: 0 1px 0 rgba(0, 0, 0, 0.6), 0 1px 2px rgba(0, 0, 0, 0.4); --shadow-2: 0 4px 12px rgba(0, 0, 0, 0.6), 0 2px 4px rgba(0, 0, 0, 0.4); } /* ========================================================================= Semantic element styles ========================================================================= */ html, body { font-family: var(--font-body); font-size: var(--t-body); line-height: var(--lh-normal); color: var(--ink); background: var(--paper); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 700; line-height: var(--lh-snug); letter-spacing: var(--ls-tight); color: var(--ink); margin: 0; text-wrap: balance; } h1 { font-size: var(--t-h1); line-height: var(--lh-tight); } h2 { font-size: var(--t-h2); } h3 { font-size: var(--t-h3); } h4 { font-size: var(--t-h4); } .display { font-family: var(--font-display); font-weight: 700; font-size: var(--t-display); line-height: var(--lh-tight); letter-spacing: var(--ls-tight); } .mega { font-family: var(--font-display); font-weight: 700; font-size: var(--t-mega); line-height: 0.95; letter-spacing: -0.03em; } p, li { font-size: var(--t-body); line-height: var(--lh-normal); color: var(--ink); margin: 0; text-wrap: pretty; } .lead { font-size: var(--t-lead); line-height: var(--lh-normal); color: var(--ink-2); } .small { font-size: var(--t-small); } .caption { font-size: var(--t-caption); color: var(--mute); } .eyebrow { font-family: var(--font-display); font-size: var(--t-eyebrow); font-weight: 600; letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--mute); } .mute { color: var(--mute); } code, kbd, pre, .mono { font-family: var(--font-mono); font-size: 0.92em; } code { background: var(--line); padding: 1px 6px; border-radius: var(--r-sm); } a { color: var(--ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; transition: opacity var(--dur-base) var(--ease-std); } a:hover { opacity: 0.7; } hr { border: 0; border-top: var(--bw-1) solid var(--line); margin: var(--s-6) 0; } ::selection { background: var(--ink); color: var(--paper); } /* ========================================================================= Utility primitives used across UI kits ========================================================================= */ .grid-bg { background-image: linear-gradient(to right, var(--line) 1px, transparent 1px), linear-gradient(to bottom, var(--line) 1px, transparent 1px); background-size: 24px 24px; background-position: -1px -1px; } .notch-md { clip-path: var(--notch-md); } .notch-lg { clip-path: var(--notch-lg); }