/* ============================================================= GLOBAL.CSS — Design Tokens All values consumed via CSS custom properties. Never hardcode values outside of this file. ============================================================= */ /* ------------------------------------------------------------- Fonts — imported via in HTML ------------------------------------------------------------- */ :root { --font-primary: 'Manrope', sans-serif; --font-accent: 'Space Grotesk', sans-serif; } /* ------------------------------------------------------------- Type Scale — 1.2 ratio, base 12px, 8 steps --scale-1 → --scale-8 : 12 → 14.4 → 17.28 → 20.74 → 24.88 → 29.86 → 35.83 → 42.99 ------------------------------------------------------------- */ :root { --scale-1: 0.75rem; /* 12px */ --scale-2: 0.9rem; /* 14.4px */ --scale-3: 1.08rem; /* 17.28px */ --scale-4: 1.296rem; /* 20.74px */ --scale-5: 1.555rem; /* 24.88px */ --scale-6: 1.866rem; /* 29.86px */ --scale-7: 2.239rem; /* 35.83px */ --scale-8: 2.687rem; /* 42.99px */ /* Semantic aliases — body copy */ --font-size-xs: var(--scale-1); --font-size-sm: var(--scale-2); --font-size-base: var(--scale-3); --font-size-md: var(--scale-4); --font-size-lg: var(--scale-5); --font-size-xl: var(--scale-6); --font-size-2xl: var(--scale-7); --font-size-display: var(--scale-8); /* Semantic aliases — jersey / display labels */ --font-size-jersey-xs: var(--scale-1); --font-size-jersey-sm: var(--scale-2); --font-size-jersey-md: var(--scale-3); --font-size-jersey-lg: var(--scale-4); --font-size-jersey-xl: var(--scale-5); } /* ------------------------------------------------------------- Colors ------------------------------------------------------------- */ :root { --color-bg: #F7F7F7; --color-nav-bg: #ffffff; /* nav pill background */ --color-text-primary: #1B1B1E; --color-border: #D9D9D9; --color-active: #11A0FF; /* From Figma work page */ --color-text-secondary: #676767; /* dates, secondary labels */ --color-text-muted: #acacac; /* sub-roles, supporting text */ --color-text-dark: #333; /* card role titles */ --color-text-inactive: #444; /* inactive nav links */ --color-surface: #f6f6f6; /* nav pill bg, hover surfaces */ } /* ------------------------------------------------------------- Dark Mode scaffold — values populated at end of project ------------------------------------------------------------- */ [data-theme="dark"] { --color-bg: ; --color-nav-bg: ; --color-text-primary: ; --color-border: ; --color-active: ; } /* ------------------------------------------------------------- Spacing ------------------------------------------------------------- */ :root { --space-1: 0.25rem; /* 4px */ --space-2: 0.5rem; /* 8px */ --space-3: 0.75rem; /* 12px */ --space-4: 1rem; /* 16px */ --space-5: 1.5rem; /* 24px */ --space-6: 2rem; /* 32px */ --space-7: 3rem; /* 48px */ --space-8: 4rem; /* 64px */ --space-9: 6rem; /* 96px */ --space-10: 8rem; /* 128px */ } /* ------------------------------------------------------------- Layout ------------------------------------------------------------- */ :root { --max-width: 1200px; --border-radius-sm: 4px; --border-radius: 8px; --border-radius-lg: 16px; /* card items */ --border-radius-xl: 32px; /* nav pill, cards */ --shadow-card: 0px 2px 30px -10px rgba(0, 0, 0, 0.2); } /* ------------------------------------------------------------- Transitions ------------------------------------------------------------- */ :root { --transition-fast: 150ms ease; --transition-base: 250ms ease; --transition-slow: 400ms ease; } /* ------------------------------------------------------------- Cross-document View Transitions Enables smooth page-to-page transitions site-wide. Default: simple crossfade. Named elements get custom morphs. ------------------------------------------------------------- */ @view-transition { navigation: auto; } /* Speed up the root (background) crossfade — named elements handle their own timing independently */ ::view-transition-old(root), ::view-transition-new(root) { animation-duration: 300ms; animation-timing-function: ease; } /* ------------------------------------------------------------- CSS Reset + Base ------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { font-size: 16px; scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { font-family: var(--font-primary); font-size: var(--font-size-base); font-weight: 400; line-height: 1.6; color: var(--color-text-primary); background-color: var(--color-bg); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } img, video { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } ul, ol { list-style: none; } button { cursor: pointer; border: none; background: none; font: inherit; } /* ------------------------------------------------------------- Page shell — shared layout wrapper used on every page ------------------------------------------------------------- */ .page { min-height: 100dvh; display: flex; flex-direction: column; gap: 16px; padding: 16px; background-color: var(--color-bg); }