/* ========================================================================== GitHub Solutions Engineering — Shared Design System ========================================================================== Shared design tokens, minimal reset, and utility classes for se-resources. Import this file in any HTML page to get consistent theming: ========================================================================== */ /* ========================================================================== 1. Design Tokens (CSS Custom Properties) ========================================================================== */ :root { /* -- Colors: Dark theme (default) --------------------------------------- */ --bg: #0d1117; --bg-deep: #010409; --surface: #161b22; --surface-2: #1c2128; --surface-3: #21262d; --border: #30363d; --border-subtle: rgba(255, 255, 255, 0.08); --text-primary: #e6edf3; --text-secondary: #8b949e; --text-muted: #484f58; --text-faint: #6e7681; --blue: #58a6ff; --blue-dark: #1f6feb; --purple: #d2a8ff; --purple-dark: #534AB7; --green: #3fb950; --green-dark: #238636; --orange: #f59e0b; --red: #ef4444; --cyan: #06b6d4; /* -- Typography --------------------------------------------------------- */ --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-mono: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', monospace; --font-display: 'Inter', var(--font-sans); /* -- Spacing scale (power-of-2) ----------------------------------------- */ --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 */ /* -- Border radius ------------------------------------------------------ */ --radius-sm: 4px; --radius-md: 0.5rem; --radius-lg: 0.75rem; --radius-xl: 1rem; --radius-full: 9999px; /* -- Shadows (dark-appropriate) ----------------------------------------- */ --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.5); --shadow-glow: 0 0 20px rgba(88, 166, 255, 0.15); /* -- Transitions -------------------------------------------------------- */ --transition-fast: 0.15s ease; --transition-base: 0.2s ease; --transition-slow: 0.3s ease; } /* ========================================================================== 2. Light Theme Override Apply .light-theme on or to switch palettes. ========================================================================== */ .light-theme { --bg: #ffffff; --bg-deep: #f6f8fa; --surface: #f6f8fa; --surface-2: #eaeef2; --surface-3: #d0d7de; --border: #d0d7de; --border-subtle: rgba(0, 0, 0, 0.08); --text-primary: #1f2328; --text-secondary: #656d76; --text-muted: #8b949e; --blue: #0969da; --purple: #8250df; --green: #1a7f37; --orange: #bf8700; --red: #cf222e; --cyan: #0550ae; --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.08); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.12); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.16); } /* ========================================================================== 3. Minimal Reset Light-touch reset — only box-sizing and smooth rendering. Does NOT include opinionated resets that could break existing pages. ========================================================================== */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } /* ========================================================================== 4. Utility Classes Optional helpers used across multiple pages in the repo. ========================================================================== */ /* -- Glass morphism surface ----------------------------------------------- */ .glass { background: rgba(255, 255, 255, 0.05); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); } /* -- Gradient text (blue → purple, common in titles) ---------------------- */ .gradient-text { background: linear-gradient(135deg, var(--blue), var(--purple)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } /* -- Link group label (sub-heading inside a link-list section) ------------ */ .link-group-label { list-style: none; font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-secondary); padding: 0.75rem 0 0.25rem; border-bottom: 1px solid var(--border-subtle); margin-bottom: 0.25rem; } .link-group-label:first-child { padding-top: 0; } /* -- Back-to-home navigation (used by all resource pages) ----------------- */ .back-nav { position: fixed; top: 1.5rem; left: 1.5rem; z-index: 1000; } .back-nav a { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.5rem 1rem; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; text-decoration: none; color: var(--text-secondary); font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; font-size: 0.85rem; font-weight: 500; transition: all 0.2s; } .back-nav a:hover { border-color: var(--blue); color: var(--text-primary); transform: translateX(-2px); } .back-nav a::before { content: '←'; font-size: 1rem; }