|
| 1 | +:root { |
| 2 | + --bg-primary: #0d1117; --bg-secondary: #161b22; --bg-tertiary: #1c2128; --bg-card: #21262d; --bg-hover: #292e36; |
| 3 | + --text-primary: #e6edf3; --text-secondary: #8b949e; --text-muted: #6e7681; |
| 4 | + --border-color: #30363d; --border-light: #21262d; |
| 5 | + --blue: #58a6ff; --green: #3fb950; --purple: #bc8cff; --orange: #f0883e; --cyan: #79c0ff; --pink: #f778ba; --yellow: #e3b341; --red: #f85149; |
| 6 | + --blue-dim: rgba(88,166,255,0.15); --green-dim: rgba(63,185,80,0.15); --purple-dim: rgba(188,140,255,0.15); --orange-dim: rgba(240,136,62,0.15); --cyan-dim: rgba(121,192,255,0.15); --pink-dim: rgba(247,120,186,0.15); --yellow-dim: rgba(227,179,65,0.15); --red-dim: rgba(248,81,73,0.15); |
| 7 | + --gradient-hero: linear-gradient(135deg, #0d1117 0%, #161b40 30%, #1a1040 60%, #0d1117 100%); |
| 8 | + --shadow-sm: 0 1px 3px 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); |
| 9 | + --radius-sm: 6px; --radius-md: 10px; --radius-lg: 16px; |
| 10 | + --font-sans: 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif; |
| 11 | + --font-mono: 'Cascadia Code', 'Fira Code', Consolas, monospace; |
| 12 | + --nav-height: 64px; |
| 13 | +} |
| 14 | +*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } |
| 15 | +html { scroll-behavior: smooth; font-size: 16px; } |
| 16 | +body { font-family: var(--font-sans); background: var(--bg-primary); color: var(--text-primary); line-height: 1.7; -webkit-font-smoothing: antialiased; } |
| 17 | +a { color: var(--cyan); text-decoration: none; transition: color 0.2s; } |
| 18 | +a:hover { color: var(--blue); text-decoration: underline; } |
| 19 | +h1, h2, h3, h4 { line-height: 1.3; } |
| 20 | +h2 { font-size: 1.6rem; margin: 2.5rem 0 1rem; padding-bottom: 0.5rem; border-bottom: 1px solid var(--border-color); } |
| 21 | +h3 { font-size: 1.25rem; margin: 2rem 0 0.75rem; } |
| 22 | +.navbar { position: sticky; top: 0; z-index: 1000; background: rgba(13,17,23,0.85); backdrop-filter: blur(12px); border-bottom: 1px solid var(--border-color); height: var(--nav-height); display: flex; align-items: center; padding: 0 2rem; } |
| 23 | +.nav-inner { max-width: 1200px; width: 100%; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; } |
| 24 | +.logo { display: flex; align-items: center; gap: 10px; font-size: 1.15rem; font-weight: 700; color: var(--text-primary); text-decoration: none; } |
| 25 | +.logo:hover { text-decoration: none; color: var(--text-primary); } |
| 26 | +.logo-icon { width: 32px; height: 32px; background: linear-gradient(135deg, #1158a6, #58a6ff); border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; font-weight: 900; font-size: 0.8rem; color: #fff; } |
| 27 | +.nav-links { display: flex; align-items: center; gap: 0.25rem; } |
| 28 | +.nav-links a { padding: 0.5rem 1rem; border-radius: var(--radius-sm); color: var(--text-secondary); font-size: 0.9rem; font-weight: 500; transition: all 0.2s; } |
| 29 | +.nav-links a:hover { color: var(--text-primary); background: var(--bg-tertiary); text-decoration: none; } |
| 30 | +.nav-links a.active { color: var(--blue); background: var(--blue-dim); } |
| 31 | +.breadcrumb { display: flex; align-items: center; gap: 0.5rem; font-size: 0.85rem; color: var(--text-muted); margin-bottom: 1.5rem; flex-wrap: wrap; padding: 1rem 2rem 0; max-width: 1200px; margin: 0 auto; } |
| 32 | +.breadcrumb a { color: var(--text-secondary); } |
| 33 | +.breadcrumb .sep { color: var(--text-muted); } |
| 34 | +.hero { background: var(--gradient-hero); padding: 5rem 2rem 4rem; text-align: center; position: relative; overflow: hidden; } |
| 35 | +.hero::before { content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background: radial-gradient(circle at 30% 50%, rgba(88,166,255,0.08) 0%, transparent 50%), radial-gradient(circle at 70% 50%, rgba(188,140,255,0.08) 0%, transparent 50%); } |
| 36 | +.hero-content { position: relative; z-index: 1; max-width: 800px; margin: 0 auto; } |
| 37 | +.hero h1 { font-size: 3rem; font-weight: 800; margin-bottom: 1rem; } |
| 38 | +.hero .subtitle { font-size: 1.2rem; color: var(--text-secondary); margin-bottom: 2rem; } |
| 39 | +.hero-badges { display: flex; gap: 0.5rem; justify-content: center; flex-wrap: wrap; margin-bottom: 2rem; } |
| 40 | +.hero-buttons { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; } |
| 41 | +.btn { display: inline-flex; align-items: center; gap: 8px; padding: 0.7rem 1.5rem; border-radius: var(--radius-sm); font-weight: 600; font-size: 0.95rem; cursor: pointer; transition: all 0.25s; border: none; text-decoration: none !important; } |
| 42 | +.btn-primary { background: var(--blue); color: #fff !important; } |
| 43 | +.btn-primary:hover { background: #79b8ff; box-shadow: 0 0 20px rgba(88,166,255,0.3); transform: translateY(-2px); } |
| 44 | +.btn-outline { background: transparent; border: 1px solid var(--border-color); color: var(--text-secondary) !important; } |
| 45 | +.btn-outline:hover { border-color: var(--blue); color: var(--blue) !important; background: var(--blue-dim); } |
| 46 | +.badge { display: inline-flex; align-items: center; padding: 2px 10px; border-radius: 20px; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.3px; text-transform: uppercase; } |
| 47 | +.badge-blue { background: var(--blue-dim); color: var(--blue); } |
| 48 | +.badge-green { background: var(--green-dim); color: var(--green); } |
| 49 | +.badge-purple { background: var(--purple-dim); color: var(--purple); } |
| 50 | +.badge-orange { background: var(--orange-dim); color: var(--orange); } |
| 51 | +.badge-cyan { background: var(--cyan-dim); color: var(--cyan); } |
| 52 | +.badge-pink { background: var(--pink-dim); color: var(--pink); } |
| 53 | +.badge-yellow { background: var(--yellow-dim); color: var(--yellow); } |
| 54 | +.badge-red { background: var(--red-dim); color: var(--red); } |
| 55 | +.section { padding: 4rem 2rem; max-width: 1200px; margin: 0 auto; } |
| 56 | +.section-alt { background: var(--bg-secondary); } |
| 57 | +.section-title { font-size: 1.8rem; font-weight: 800; margin-bottom: 0.5rem; text-align: center; border: none; } |
| 58 | +.section-subtitle { color: var(--text-secondary); text-align: center; margin-bottom: 2rem; font-size: 1rem; } |
| 59 | +.feature-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1.5rem; } |
| 60 | +.feature-card { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius-md); padding: 1.5rem; transition: all 0.3s; } |
| 61 | +.feature-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: var(--text-muted); } |
| 62 | +.feature-card h3 { font-size: 1.1rem; margin: 0 0 0.5rem; border: none; } |
| 63 | +.feature-card p { color: var(--text-secondary); font-size: 0.9rem; margin: 0; } |
| 64 | +pre { background: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: var(--radius-md); padding: 1.2rem 1.5rem; overflow-x: auto; font-family: var(--font-mono); font-size: 0.85rem; line-height: 1.7; margin: 1rem 0; } |
| 65 | +code { font-family: var(--font-mono); font-size: 0.85em; } |
| 66 | +:not(pre) > code { background: var(--bg-tertiary); padding: 2px 7px; border-radius: 4px; color: var(--cyan); } |
| 67 | +table { width: 100%; border-collapse: collapse; margin: 1rem 0; font-size: 0.9rem; } |
| 68 | +th { background: var(--bg-tertiary); padding: 0.75rem 1rem; text-align: left; font-weight: 600; font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.5px; border-bottom: 2px solid var(--border-color); } |
| 69 | +td { padding: 0.6rem 1rem; border-bottom: 1px solid var(--border-light); } |
| 70 | +tr:hover { background: rgba(255,255,255,0.04); } |
| 71 | +.footer { background: var(--bg-secondary); border-top: 1px solid var(--border-color); padding: 2rem; margin-top: 4rem; } |
| 72 | +.footer-inner { max-width: 1200px; margin: 0 auto; } |
| 73 | +.footer-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 1rem; margin-bottom: 1.5rem; } |
| 74 | +.footer-grid a { color: var(--text-secondary); font-size: 0.85rem; padding: 0.3rem 0; display: block; } |
| 75 | +.footer-grid a:hover { color: var(--blue); } |
| 76 | +.footer-bottom { text-align: center; color: var(--text-muted); font-size: 0.8rem; padding-top: 1rem; border-top: 1px solid var(--border-color); } |
| 77 | +@media (max-width: 768px) { |
| 78 | + .hero h1 { font-size: 2rem; } |
| 79 | + .feature-grid { grid-template-columns: 1fr; } |
| 80 | + .nav-links { display: none; } |
| 81 | + .footer-grid { grid-template-columns: repeat(2, 1fr); } |
| 82 | +} |
0 commit comments