/* Restpy design system Colors: Red / White / Black (configurable via --brand) Light mode default; dark mode toggled by [data-theme="dark"] on . */ :root { --brand: #c62828; --brand-600: #b71c1c; --brand-50: #ffebee; --black: #111111; --white: #ffffff; --bg: #fafafa; --surface: #ffffff; --text: #1a1a1a; --text-muted: #5f6368; --border: #e5e5e5; --shadow: 0 1px 2px rgba(0,0,0,.04), 0 8px 24px rgba(0,0,0,.06); --radius: 10px; --radius-sm: 6px; --radius-lg: 18px; --success: #2e7d32; --warning: #ef6c00; --danger: #c62828; --info: #1565c0; --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; } html[data-theme="dark"] { --bg: #0e0e10; --surface: #17171a; --text: #f2f2f2; --text-muted: #a0a0a7; --border: #2b2b30; --shadow: 0 1px 2px rgba(0,0,0,.6), 0 12px 32px rgba(0,0,0,.5); --brand-50: #2a0e10; } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; background: var(--bg); color: var(--text); font-family: var(--font); -webkit-font-smoothing: antialiased; } body { min-height: 100vh; line-height: 1.55; font-size: 15px; } a { color: var(--brand); text-decoration: none; } a:hover { text-decoration: underline; } img { max-width: 100%; display: block; } /* ---------- Layout ---------- */ .container { max-width: 1160px; margin: 0 auto; padding: 0 20px; } .container-sm { max-width: 720px; margin: 0 auto; padding: 0 20px; } .grid { display: grid; gap: 20px; } .grid.cols-2 { grid-template-columns: 1fr 1fr; } .grid.cols-3 { grid-template-columns: 1fr 1fr 1fr; } .grid.cols-4 { grid-template-columns: repeat(4, 1fr); } @media (max-width: 1100px) { .grid.cols-4 { grid-template-columns: 1fr 1fr; } } @media (max-width: 900px) { .grid.cols-2, .grid.cols-3 { grid-template-columns: 1fr; } } @media (max-width: 600px) { .grid.cols-4 { grid-template-columns: 1fr 1fr; gap: 10px; } .stat { padding: 12px; } .stat .value { font-size: 22px; } } .row { display: flex; gap: 16px; flex-wrap: wrap; } .space { flex: 1; } /* ---------- Nav ---------- */ .nav { background: var(--surface); border-bottom: 1px solid var(--border); padding: 14px 0; position: sticky; top: 0; z-index: 50; backdrop-filter: saturate(150%) blur(8px); } .nav-inner { display: flex; align-items: center; gap: 20px; } .nav .brand { font-weight: 800; font-size: 20px; color: var(--text); letter-spacing: -0.5px; } .nav .brand .dot { color: var(--brand); } .nav .links { display: flex; gap: 20px; margin-left: auto; align-items: center; flex-wrap: wrap; } .nav .links a { color: var(--text); font-weight: 500; font-size: 14px; } @media (max-width: 700px) { .nav .links { gap: 10px; } /* Old simple-nav ONLY: hide anchor links so the burger handles them. The mega-nav drawer (.nav-mega) has its own slide-in handling. */ .nav:not(.nav-mega) .links a:not(.btn) { display: none; } .nav .brand { font-size: 18px; } } /* ---------- Buttons ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 18px; font-size: 14px; font-weight: 600; border-radius: var(--radius-sm); border: 1px solid transparent; cursor: pointer; transition: transform .06s ease, background .15s ease, border-color .15s ease; font-family: var(--font); background: transparent; color: var(--text); } .btn:hover { text-decoration: none; transform: translateY(-1px); } /* Primary button: explicit white text in BOTH themes (some