/* ============================================================================= Hull — site styles. Built on the PrimeForge design system tokens. Dark control-room aesthetic: slate-950 canvas, single emerald accent, Instrument Sans + JetBrains Mono. ============================================================================= */ /* Fonts are loaded via non-blocking tags in each page's . */ :root { /* Brand */ --emerald-300: #6ee7b7; --emerald-400: #34d399; --emerald-500: #10b981; --emerald-600: #059669; --emerald-glow: rgba(16, 185, 129, 0.10); --emerald-ring: rgba(16, 185, 129, 0.20); /* Slate canvas */ --slate-950: #020617; --slate-900: #0f172a; --slate-800: #1e293b; --slate-700: #334155; --slate-600: #475569; --slate-500: #64748b; --slate-400: #94a3b8; --slate-300: #cbd5e1; --slate-200: #e2e8f0; --slate-100: #f1f5f9; --gray-300: #d1d5db; --gray-400: #9ca3af; --gray-500: #6b7280; /* Semantic */ --info: #22d3ee; --info-bg: rgba(34, 211, 238, 0.10); --warn: #fbbf24; --warn-bg: rgba(251, 191, 36, 0.10); --danger: #f87171; --danger-bg: rgba(248, 113, 113, 0.10); --violet: #a78bfa; --violet-bg: rgba(167, 139, 250, 0.10); --surface-1: rgba(15, 23, 42, 0.50); --surface-2: rgba(15, 23, 42, 0.80); --font-sans: 'Instrument Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, 'Menlo', monospace; --maxw: 1280px; --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1); } * { box-sizing: border-box; } html { scroll-behavior: smooth; scroll-padding-top: 88px; } body { margin: 0; background: var(--slate-950); color: var(--slate-100); font-family: var(--font-sans); font-size: 16px; line-height: 1.5; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } a { color: inherit; text-decoration: none; } ::selection { background: rgba(16, 185, 129, 0.25); color: #fff; } /* Scrollbar */ ::-webkit-scrollbar { width: 11px; height: 11px; } ::-webkit-scrollbar-track { background: var(--slate-950); } ::-webkit-scrollbar-thumb { background: var(--slate-800); border-radius: 999px; border: 3px solid var(--slate-950); } ::-webkit-scrollbar-thumb:hover { background: var(--slate-700); } /* ---------------------------------------------------------------------------- Logo / lockup ---------------------------------------------------------------------------- */ .lockup { display: inline-flex; align-items: center; gap: 10px; } .lockup .word { font-size: 20px; font-weight: 700; letter-spacing: -0.02em; color: var(--slate-100); } .lockup svg { display: block; } /* ---------------------------------------------------------------------------- Navbar ---------------------------------------------------------------------------- */ .nav { position: sticky; top: 0; z-index: 50; border-bottom: 1px solid var(--slate-800); background: rgba(2, 6, 23, 0.80); backdrop-filter: saturate(140%) blur(16px); -webkit-backdrop-filter: saturate(140%) blur(16px); } .nav-inner { max-width: var(--maxw); margin: 0 auto; padding: 0 32px; height: 64px; display: flex; align-items: center; justify-content: space-between; } .nav-left { display: flex; align-items: center; gap: 36px; } .nav-links { display: flex; gap: 26px; } .nav-links a { font-size: 14px; color: var(--gray-400); transition: color 200ms var(--ease-out); } .nav-links a:hover { color: #fff; } .nav-links a.active { color: var(--slate-100); } .nav-right { display: flex; align-items: center; gap: 14px; } .nav-ghost { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--gray-400); transition: color 200ms; } .nav-ghost:hover { color: #fff; } @media (max-width: 860px) { .nav-links { display: none; } } /* Mobile menu (hamburger + slide-down panel; toggled by assets/site.js) */ .nav-burger { display: none; background: transparent; border: none; color: var(--slate-300); cursor: pointer; padding: 8px; margin-left: 2px; } .nav-burger svg { width: 22px; height: 22px; display: block; } .nav-burger:hover { color: #fff; } .mobile-panel { display: none; border-top: 1px solid var(--slate-800); background: rgba(2, 6, 23, 0.97); padding: 10px 24px 18px; } .mobile-panel.open { display: flex; flex-direction: column; gap: 2px; } .mobile-panel a { padding: 10px 8px; font-size: 15px; color: var(--gray-400); border-radius: 8px; transition: color 150ms, background 150ms; } .mobile-panel a:hover { color: #fff; background: var(--surface-1); } .mobile-panel .mh { font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--slate-500); margin: 14px 0 4px; padding-left: 8px; } @media (max-width: 860px) { .nav-burger { display: block; } } @media (min-width: 861px) { .mobile-panel { display: none !important; } } /* ---------------------------------------------------------------------------- Buttons ---------------------------------------------------------------------------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-family: var(--font-sans); font-weight: 600; font-size: 15px; border-radius: 8px; padding: 13px 22px; cursor: pointer; border: 1px solid transparent; transition: background-color 200ms var(--ease-out), color 200ms var(--ease-out), border-color 300ms var(--ease-out); white-space: nowrap; } .btn.sm { padding: 9px 16px; font-size: 14px; } .btn-primary { background: var(--emerald-500); color: var(--slate-950); box-shadow: 0 24px 48px -16px rgba(16,185,129,0.45); } .btn-primary:hover { background: var(--emerald-400); } .btn-secondary { background: var(--surface-1); color: var(--slate-300); border-color: var(--slate-800); } .btn-secondary:hover { color: #fff; border-color: var(--emerald-ring); } .btn-ghost { background: var(--slate-800); color: #fff; border-color: var(--slate-700); } .btn-ghost:hover { background: var(--slate-700); border-color: var(--emerald-ring); } /* ---------------------------------------------------------------------------- Layout primitives ---------------------------------------------------------------------------- */ .wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 32px; } .section { padding: 96px 0; } .section-head { text-align: center; max-width: 680px; margin: 0 auto 64px; } .section-head h2 { font-size: 36px; font-weight: 700; letter-spacing: -0.02em; margin: 0; text-wrap: balance; } .section-head p { margin: 16px 0 0; color: var(--gray-400); font-size: 18px; line-height: 1.6; text-wrap: pretty; } .eyebrow { display: inline-flex; align-items: center; gap: 8px; padding: 6px 16px; border-radius: 999px; background: var(--emerald-glow); border: 1px solid var(--emerald-ring); color: var(--emerald-400); font-size: 13px; font-weight: 500; } .eyebrow .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--emerald-400); animation: pulse 2s ease-in-out infinite; } @keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.35; } } /* Card */ .card { background: var(--surface-1); border: 1px solid var(--slate-800); border-radius: 16px; padding: 24px; transition: border-color 300ms var(--ease-out); } .card:hover { border-color: var(--emerald-ring); } /* Icon chip */ .chip { width: 40px; height: 40px; border-radius: 8px; display: flex; align-items: center; justify-content: center; } .chip svg { width: 20px; height: 20px; } .chip.emerald { background: var(--emerald-glow); color: var(--emerald-400); } .chip.cyan { background: var(--info-bg); color: var(--info); } .chip.amber { background: var(--warn-bg); color: var(--warn); } .chip.red { background: var(--danger-bg); color: var(--danger); } .chip.violet { background: var(--violet-bg); color: var(--violet); } /* ---------------------------------------------------------------------------- Window chrome ---------------------------------------------------------------------------- */ .window { border-radius: 16px; background: var(--surface-1); border: 1px solid var(--slate-800); overflow: hidden; box-shadow: 0 25px 50px -12px rgba(0,0,0,0.5); } .window-bar { display: flex; align-items: center; gap: 8px; padding: 11px 14px; background: var(--slate-900); border-bottom: 1px solid var(--slate-800); } .tl { width: 12px; height: 12px; border-radius: 50%; } .tl.r { background: rgba(239,68,68,0.8); } .tl.y { background: rgba(234,179,8,0.8); } .tl.g { background: rgba(34,197,94,0.8); } .window-title { margin-left: 6px; font-family: var(--font-mono); font-size: 11px; color: var(--slate-500); } .window-title.with-icon { display: inline-flex; align-items: center; gap: 7px; color: var(--slate-400); } .window-title.with-icon svg { width: 14px; height: 14px; } /* ---------------------------------------------------------------------------- Code blocks + syntax highlight ---------------------------------------------------------------------------- */ pre, code { font-family: var(--font-mono); } .code { background: var(--slate-900); border: 1px solid var(--slate-800); border-radius: 8px; font-size: 13.5px; line-height: 1.75; color: var(--slate-200); overflow-x: auto; margin: 0; } .code pre { margin: 0; padding: 18px 20px; } .code.plain { padding: 18px 20px; } code.inline { font-family: var(--font-mono); font-size: 0.86em; background: var(--slate-800); color: var(--slate-200); padding: 2px 6px; border-radius: 4px; white-space: nowrap; } /* tokens */ .tok-com { color: var(--slate-500); font-style: italic; } .tok-key { color: var(--violet); } .tok-str { color: var(--emerald-300); } .tok-num { color: var(--warn); } .tok-fn { color: var(--info); } .tok-prop { color: var(--slate-100); } .tok-punct { color: var(--slate-500); } .tok-tag { color: var(--danger); } .tok-attr { color: var(--warn); } .tok-prompt { color: var(--slate-500); } .tok-flag { color: var(--slate-400); } /* code header (filename + copy) */ .code-block { border-radius: 8px; overflow: hidden; border: 1px solid var(--slate-800); } .code-head { display: flex; align-items: center; justify-content: space-between; padding: 8px 14px; background: var(--slate-900); border-bottom: 1px solid var(--slate-800); } .code-head .fname { font-family: var(--font-mono); font-size: 12px; color: var(--slate-400); } .code-block .code { border: none; border-radius: 0; } .copy-btn { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; background: transparent; border: 1px solid var(--slate-700); color: var(--slate-400); border-radius: 6px; padding: 4px 9px; font-size: 11px; font-family: var(--font-mono); transition: color 200ms, border-color 200ms; } .copy-btn:hover { color: var(--emerald-400); border-color: var(--emerald-ring); } .copy-btn.copied { color: var(--emerald-400); border-color: var(--emerald-ring); } .copy-btn svg { width: 13px; height: 13px; } /* ---------------------------------------------------------------------------- Tabs (framework switcher) ---------------------------------------------------------------------------- */ .tabs { display: inline-flex; gap: 4px; padding: 4px; background: var(--slate-900); border: 1px solid var(--slate-800); border-radius: 10px; } .tab { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; border-radius: 7px; font-size: 14px; font-weight: 600; color: var(--gray-400); cursor: pointer; border: none; background: transparent; font-family: var(--font-sans); transition: background 200ms, color 200ms; } .tab:hover { color: #fff; } .tab.active { background: var(--slate-800); color: var(--slate-100); } .tab .glyph { width: 16px; height: 16px; } .tab-panel { display: none; } .tab-panel.active { display: block; } /* ---------------------------------------------------------------------------- Tables ---------------------------------------------------------------------------- */ .tbl { width: 100%; border-collapse: collapse; font-size: 14px; } .tbl th { text-align: left; font-weight: 600; color: var(--slate-100); font-size: 13px; padding: 12px 16px; border-bottom: 1px solid var(--slate-700); } .tbl td { padding: 12px 16px; border-bottom: 1px solid var(--slate-800); color: var(--slate-400); vertical-align: top; line-height: 1.55; } .tbl tr:last-child td { border-bottom: none; } .tbl td code, .tbl th code { font-family: var(--font-mono); font-size: 12.5px; color: var(--emerald-300); background: var(--emerald-glow); padding: 1px 6px; border-radius: 4px; white-space: nowrap; } .tbl td:first-child { color: var(--slate-200); } .tbl-wrap { border: 1px solid var(--slate-800); border-radius: 12px; overflow: hidden; } /* ---------------------------------------------------------------------------- Footer ---------------------------------------------------------------------------- */ .footer { background: var(--surface-1); border-top: 1px solid var(--slate-800); } .footer-inner { max-width: var(--maxw); margin: 0 auto; padding: 64px 32px; } .footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 32px; } .footer h4 { font-size: 14px; font-weight: 600; margin: 0 0 16px; color: var(--slate-100); } .footer ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; } .footer ul a { font-size: 14px; color: var(--gray-400); transition: color 200ms; } .footer ul a:hover { color: #fff; } .footer .tagline { margin: 14px 0 0; font-size: 14px; color: var(--gray-400); max-width: 280px; line-height: 1.6; } .footer-bottom { border-top: 1px solid var(--slate-800); margin-top: 48px; padding-top: 28px; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; } .footer-bottom p { margin: 0; font-size: 13px; color: var(--slate-500); } .footer-bottom .lic { font-family: var(--font-mono); font-size: 12px; color: var(--slate-500); } @media (max-width: 760px) { .footer-grid { grid-template-columns: 1fr 1fr; } } /* glow puddle */ .glow { position: absolute; border-radius: 999px; background: var(--emerald-500); filter: blur(90px); opacity: 0.10; pointer-events: none; }