/* ========================================================================== Forge Academy — Base Variables, reset, typography ========================================================================== */ @import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;0,9..40,800;1,9..40,500&display=swap'); :root { /* Brand */ --color-teal-900: #06534F; --color-teal-700: #0A7E78; --color-teal-500: #12A199; --color-teal-100: #D0F0EE; --color-teal-50: #EEF7F6; --color-teal-tint: #F4F6F8; /* #D0F0EE99 */ --color-orange-700: #DC5F0E; --color-orange-600: #F97316; --color-orange-100: #FFE9DA; --color-ink: #0F1A19; --color-body: #4A5957; --color-muted: #6E7C7A; --color-line: #DCE6E4; --color-surface: #FFFFFF; --color-bg: #FAFBFA; /* Type */ --font-base: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --fs-h1: clamp(2.25rem, 4.2vw, 3.6rem); --fs-h2: clamp(1.75rem, 2.8vw, 2.5rem); --fs-h3: 1.375rem; --fs-lead: 1.15rem; --fs-body: 1rem; --fs-small: 0.875rem; /* Layout */ --container: 1160px; --radius-lg: 28px; --radius-md: 18px; --radius-sm: 10px; --radius-pill: 50px; --space-1: 0.5rem; --space-2: 1rem; --space-3: 1.5rem; --space-4: 2.5rem; --space-5: 4rem; --space-6: 6.5rem; --shadow-card: 0 1px 2px rgba(15, 26, 25, 0.04), 0 12px 28px -12px rgba(15, 26, 25, 0.12); --shadow-float: 0 8px 24px -6px rgba(15, 26, 25, 0.18); --ease: cubic-bezier(0.4, 0, 0.2, 1); } *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; overflow-x: clip; /* belt-and-braces guard against sideways scroll on small screens; `clip` (not `hidden`) so it doesn't turn into a scroll container and break the sticky header */ } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } body { margin: 0; font-family: var(--font-base); font-size: var(--fs-body); color: var(--color-body); background: var(--color-bg); line-height: 1.6; -webkit-font-smoothing: antialiased; } img { max-width: 100%; display: block; } h1, h2, h3, h4 { font-family: var(--font-base); color: var(--color-ink); margin: 0; line-height: 1.15; font-weight: 700; letter-spacing: -0.01em; } h1 { font-size: var(--fs-h1); font-weight: 800; letter-spacing: -0.02em; } h2 { font-size: var(--fs-h2); font-weight: 700; } h3 { font-size: var(--fs-h3); font-weight: 700; } p { margin: 0; } a { color: inherit; text-decoration: none; } button { font-family: var(--font-base); cursor: pointer; } ul { margin: 0; padding: 0; list-style: none; } :focus-visible { outline: 2px solid var(--color-teal-500); outline-offset: 3px; }