/* ================================================================ AI-Native Builders — Design System Source code terminal aesthetic STYLE GUIDE: Before adding a new class, check if an existing one works. Prefer composing utility classes over creating new components. SECTIONS: 1. Tokens — CSS custom properties 2. Reset & Base — box model, body, links 3. Infrastructure — canvas, HUD overlays, grain 4. Typography — headings, body text, code 5. Layout — container, sections, grids 6. Terminal Window — core reusable component 7. Syntax — code highlighting classes 8. Navigation — nav bar 9. Buttons & Pills — all interactive elements 10. Cards — terminal-window card variants 11. Forms — inputs, labels, groups 12. Footer — footer component 13. Auth — login-state visibility 14. Animations — keyframes, reveals 15. Responsive — all breakpoints ================================================================ */ /* ============================================ 1. TOKENS ============================================ */ :root { /* Surfaces */ --bg: #0c0e14; --bg-alt: #10131a; --surface: #151921; --surface-up: #1a1f2b; --surface-hover: #1f2636; /* Borders */ --border: rgba(255, 255, 255, 0.06); --border-hover: rgba(255, 255, 255, 0.1); --border-active: rgba(255, 255, 255, 0.15); /* Terminal chrome dots */ --dot-red: #ff5f57; --dot-yellow: #ffbd2e; --dot-green: #28c840; /* Accent: cyan */ --cyan: #00d4ff; --cyan-dim: rgba(0, 212, 255, 0.12); --cyan-glow: rgba(0, 212, 255, 0.25); /* Accent: violet */ --violet: #8b5cf6; --violet-dim: rgba(139, 92, 246, 0.1); /* Semantic */ --success: #28c840; --error: #ff5f57; --warning: #ffbd2e; /* Syntax highlighting */ --syn-kw: #00d4ff; --syn-str: #a78bfa; --syn-num: #f0abfc; --syn-var: #e8eaed; --syn-comment: #4b5563; --syn-prompt: #00d4ff; /* Text */ --text: #e8eaed; --text-2: #9ca3af; --text-3: #6b7280; --text-inv: #0c0e14; /* Typography */ --font-mono: 'JetBrains Mono', 'SF Mono', Monaco, Consolas, monospace; --font-body: 'Outfit', sans-serif; /* Spacing scale */ --sp-1: 0.25rem; --sp-2: 0.5rem; --sp-3: 0.75rem; --sp-4: 1rem; --sp-6: 1.5rem; --sp-8: 2rem; --sp-10: 2.5rem; --sp-12: 3rem; --sp-16: 4rem; --sp-20: 5rem; --sp-24: 6rem; /* Radius scale */ --r-sm: 4px; --r-md: 8px; --r-lg: 12px; --r-xl: 16px; --r-full: 9999px; /* Motion */ --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1); --transition: 0.3s var(--ease-out-expo); /* Layout */ --nav-h: 52px; --max-w: 1200px; } /* ============================================ 1b. LIGHT THEME — applied via data-theme="light" on ============================================ */ [data-theme="light"] { --bg: #f8f9fa; --bg-alt: #ffffff; --surface: #ffffff; --surface-up: #f0f1f3; --surface-hover: #e8e9eb; --border: rgba(0, 0, 0, 0.08); --border-hover: rgba(0, 0, 0, 0.12); --border-active: rgba(0, 0, 0, 0.18); --cyan: #0891b2; --cyan-dim: rgba(8, 145, 178, 0.08); --cyan-glow: rgba(8, 145, 178, 0.15); --violet: #7c3aed; --violet-dim: rgba(124, 58, 237, 0.06); --syn-kw: #0891b2; --syn-str: #7c3aed; --syn-num: #c026d3; --syn-var: #1e293b; --syn-comment: #94a3b8; --syn-prompt: #0891b2; --text: #1e293b; --text-2: #475569; --text-3: #94a3b8; --text-inv: #ffffff; --success: #16a34a; --error: #dc2626; --warning: #d97706; } /* Light theme: disable grain overlay */ [data-theme="light"]::after { opacity: 0; } /* Light theme: hide flow field canvas */ [data-theme="light"] #flow-field { opacity: 0; } /* Light theme: nav adjustments */ [data-theme="light"] nav { background: rgba(255, 255, 255, 0.9); border-bottom-color: var(--border); } [data-theme="light"] nav.scrolled { background: rgba(255, 255, 255, 0.97); box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06); } /* Light theme: terminal chrome */ [data-theme="light"] .terminal-chrome { background: var(--surface-up); } /* Light theme: shadows */ [data-theme="light"] .terminal-window:hover { box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08); } [data-theme="light"] .terminal-lift:hover { box-shadow: 0 12px 32px rgba(0, 0, 0, 0.1); } /* Light theme: buttons */ [data-theme="light"] .btn-primary, [data-theme="light"] .btn-primary-xl { box-shadow: 0 2px 8px rgba(8, 145, 178, 0.2); } [data-theme="light"] .btn-primary:hover, [data-theme="light"] .btn-primary-xl:hover { box-shadow: 0 4px 16px rgba(8, 145, 178, 0.3); } /* Light theme: footer */ [data-theme="light"] footer { background: var(--surface-up); } /* Light theme: nav dropdown */ [data-theme="light"] .nav-dropdown-menu { box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1); } [data-theme="light"] .nav-avatar-btn:hover .nav-avatar { border-color: rgba(8, 145, 178, 0.4); } /* Light theme: HUD panels hidden (genetic algorithm not visible) */ [data-theme="light"] .hud-panel { display: none; } /* ============================================ 2. RESET & BASE ============================================ */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } html { background: var(--bg); scroll-behavior: smooth; -webkit-font-smoothing: antialiased; } body { font-family: var(--font-mono); font-size: 14px; line-height: 1.6; color: var(--text); background: var(--bg); overflow-x: hidden; } a { color: inherit; text-decoration: none; } /* ============================================ 3. INFRASTRUCTURE ============================================ */ /* Noise grain overlay */ body::after { content: ''; position: fixed; inset: 0; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); opacity: 0.015; pointer-events: none; z-index: 5; } /* Flow field canvas */ #flow-field { position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: 0.4; } /* HUD panels (genetic algorithm stats) */ .hud-panel { position: fixed; z-index: 9999; pointer-events: none; font-family: var(--font-mono); font-size: 11px; line-height: 1.5; color: var(--text-2); opacity: 0.5; background: rgba(12, 14, 20, 0.12); border: 1px solid rgba(255, 255, 255, 0.02); border-radius: var(--r-md); padding: 12px 14px; white-space: pre; overflow: hidden; } .hud-left { top: 70px; left: 14px; min-width: 260px; } .hud-right { top: 70px; right: 14px; max-height: 80vh; background: transparent; border: none; overflow: hidden; } @media (max-width: 768px) { .hud-panel { display: none; } } .hud-panel .hud-header { color: rgba(75, 85, 99, 0.8); } .hud-panel .hud-cyan { color: rgba(0, 212, 255, 0.8); } .hud-panel .hud-green { color: rgba(40, 200, 64, 0.8); } .hud-panel .hud-violet { color: rgba(139, 92, 246, 0.75); } .hud-panel .hud-pink { color: rgba(240, 171, 252, 0.75); } .hud-panel .hud-yellow { color: rgba(255, 189, 46, 0.75); } .hud-panel .hud-red { color: rgba(255, 95, 87, 0.75); } .hud-panel .hud-dim { color: rgba(75, 85, 99, 0.6); } .hud-bar-track { display: inline-block; width: 80px; height: 6px; background: rgba(255, 255, 255, 0.06); border-radius: 2px; vertical-align: middle; margin-left: 6px; } .hud-bar-fill { display: block; height: 100%; border-radius: 2px; } #hud-right canvas { display: block; } /* ============================================ 4. TYPOGRAPHY ============================================ */ /* Section heading — used across all pages */ .section-heading { font-family: var(--font-mono); font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 700; color: var(--text); text-align: center; margin-bottom: var(--sp-8); } /* Section label — "// filename.ts" style above headings */ .section-label { font-size: 0.75rem; color: var(--syn-comment); text-align: center; margin-bottom: var(--sp-4); } /* Body text inside terminal windows */ .body-text { font-family: var(--font-body); font-size: 0.9rem; color: var(--text-2); line-height: 1.7; } /* ============================================ 5. LAYOUT ============================================ */ .container { max-width: var(--max-w); margin: 0 auto; padding: 0 var(--sp-6); } /* Standard section — consistent spacing + stacking */ .section { position: relative; z-index: 1; padding: var(--sp-16) 0; } .section-lg { padding: var(--sp-20) 0; } /* 2-column layout with sidebar */ .page-layout-2col { display: grid; grid-template-columns: 260px 1fr; gap: var(--sp-10); align-items: start; } .main-content { min-width: 0; width: 100%; } .sidebar { position: sticky; top: calc(var(--nav-h) + var(--sp-4)); display: flex; flex-direction: column; } .sidebar-profile { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--sp-3); margin-bottom: var(--sp-2); } .sidebar-profile .card-avatar, .sidebar-profile .user-avatar { width: 64px; height: 64px; border-radius: var(--r-lg); } .sidebar-profile .card-author-info { display: flex; flex-direction: column; align-items: center; gap: var(--sp-1); } .sidebar-profile .card-author { font-size: 0.8rem; } .sidebar-profile .code-comment { font-size: 0.65rem; } .sidebar-stats { display: flex; flex-direction: column; gap: var(--sp-2); } .sidebar-stat { display: flex; justify-content: space-between; align-items: center; padding: var(--sp-1) 0; } .sidebar-stat .stat-value { font-weight: 700; color: var(--text); font-size: 0.85rem; } /* Responsive grids */ .grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-6); } .grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-6); } .grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-6); } /* Utility */ .centered { text-align: center; } .flex-center { display: flex; align-items: center; justify-content: center; } .flex-between { display: flex; align-items: center; justify-content: space-between; } .flex-col { display: flex; flex-direction: column; } .gap-2 { gap: var(--sp-2); } .gap-4 { gap: var(--sp-4); } .gap-6 { gap: var(--sp-6); } .gap-8 { gap: var(--sp-8); } .mt-4 { margin-top: var(--sp-4); } .mt-6 { margin-top: var(--sp-6); } .mb-4 { margin-bottom: var(--sp-4); } .mb-6 { margin-bottom: var(--sp-6); } .mb-8 { margin-bottom: var(--sp-8); } /* ============================================ 6. TERMINAL WINDOW — Core reusable component ============================================ */ .terminal-window { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition); } .terminal-window:hover { border-color: var(--border-hover); box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3); } /* Chrome bar: red/yellow/green dots + title */ .terminal-chrome { display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-3) var(--sp-4); background: var(--bg-alt); border-bottom: 1px solid var(--border); } .dot { width: 10px; height: 10px; border-radius: 50%; } .dot-red { background: var(--dot-red); } .dot-yellow { background: var(--dot-yellow); } .dot-green { background: var(--dot-green); } .terminal-title { margin-left: var(--sp-3); font-size: 0.75rem; color: var(--text-3); font-weight: 500; } .terminal-status { margin-left: auto; font-size: 0.7rem; color: var(--dot-green); font-weight: 600; } .terminal-body { padding: var(--sp-6); } .terminal-body-lg { padding: var(--sp-8); } /* Lift variant — cards that rise on hover */ .terminal-lift:hover { transform: translateY(-6px); border-color: rgba(0, 212, 255, 0.15); box-shadow: 0 16px 40px rgba(0, 0, 0, 0.3), 0 0 30px var(--cyan-dim); } /* ============================================ 7. SYNTAX HIGHLIGHTING ============================================ */ .kw { color: var(--syn-kw); font-weight: 600; } .str { color: var(--syn-str); } .num { color: var(--syn-num); font-weight: 700; font-size: 1.75em; } .var { color: var(--syn-var); } .prompt { color: var(--syn-prompt); font-weight: 700; } .code-comment { color: var(--syn-comment); font-size: 0.85em; } .code-comment.indent { padding-left: var(--sp-6); } .cmd-prefix { color: var(--text-3); margin-right: var(--sp-1); } .cmd-arg { color: var(--cyan); } .cmd-arrow { color: var(--cyan); } /* Blinking cursor */ .cursor-blink { color: var(--cyan); animation: blink 1s step-end infinite; } /* Stat line: "const x = 42 ;" */ .stat-line { font-size: 0.9rem; line-height: 2; color: var(--text-2); } /* JSDoc block */ .jsdoc { line-height: 1.8; } .jsdoc-open, .jsdoc-close { color: var(--syn-comment); } .jsdoc-star { color: var(--syn-comment); margin-right: var(--sp-2); } .jsdoc-line { color: var(--text-2); padding-left: var(--sp-3); } /* Code block: manifesto/config style */ .code-block { font-size: 0.9rem; line-height: 2; color: var(--text-2); } .code-indent { padding-left: var(--sp-6); } /* ============================================ 8. NAVIGATION ============================================ */ nav { position: fixed; top: 0; width: 100%; z-index: 1000; background: rgba(12, 14, 20, 0.85); backdrop-filter: blur(20px) saturate(1.2); border-bottom: 1px solid var(--border); transition: background 0.3s; } nav.scrolled { background: rgba(12, 14, 20, 0.95); box-shadow: 0 2px 20px rgba(0, 0, 0, 0.5); } .nav-inner { max-width: var(--max-w); margin: 0 auto; padding: 0 var(--sp-6); display: flex; align-items: center; height: var(--nav-h); gap: var(--sp-6); } .nav-logo { display: flex; align-items: center; gap: var(--sp-2); flex-shrink: 0; } .nav-status { width: 8px; height: 8px; border-radius: 50%; background: var(--dot-green); box-shadow: 0 0 8px rgba(40, 200, 64, 0.4); } .nav-path { font-size: 0.85rem; font-weight: 700; color: var(--text); } .nav-cursor { width: 2px; height: 14px; background: var(--cyan); animation: blink 1s step-end infinite; margin-left: 1px; } .nav-commands { display: flex; gap: var(--sp-1); flex: 1; justify-content: center; } .nav-actions { flex-shrink: 0; } .nav-toggle { display: none; flex-direction: column; gap: 4px; background: none; border: none; cursor: pointer; padding: var(--sp-2); } .nav-toggle span { width: 20px; height: 2px; background: var(--text); transition: all 0.3s; display: block; } /* Nav user dropdown */ .nav-user-dropdown { position: relative; } .nav-avatar-btn { background: none !important; border: none !important; padding: 0 !important; cursor: pointer; box-shadow: none !important; display: flex; align-items: center; } .nav-avatar-btn:hover { transform: none; } .nav-avatar { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; border: 2px solid transparent; transition: border-color 0.2s; } .nav-avatar-btn:hover .nav-avatar { border-color: rgba(0, 212, 255, 0.4); } .nav-user-name { font-size: 0.75rem; color: var(--text-2); font-weight: 500; margin-left: var(--sp-2); } .nav-dropdown-menu { position: absolute; top: 100%; right: 0; margin-top: var(--sp-2); min-width: 180px; background: var(--surface); border: 1px solid var(--border-hover); border-radius: var(--r-md); padding: var(--sp-2); box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4); opacity: 0; visibility: hidden; transform: translateY(-8px); transition: opacity 0.2s, transform 0.2s, visibility 0.2s; z-index: 1100; } .nav-user-dropdown.open .nav-dropdown-menu { opacity: 1; visibility: visible; transform: translateY(0); } .nav-dropdown-item { display: block; padding: 0.5rem 0.75rem; font-size: 0.8rem; color: var(--text-3); border-radius: var(--r-sm); transition: background 0.15s, color 0.15s; } .nav-dropdown-item:hover { background: var(--cyan-dim); color: var(--text); } /* ============================================ 9. BUTTONS & PILLS ============================================ */ /* Base: shared by all interactive pill/button elements */ .pill { font-family: var(--font-mono); font-size: 0.75rem; font-weight: 500; color: var(--text-3); padding: 0.35rem 0.75rem; border-radius: var(--r-md); border: 1px solid transparent; background: transparent; cursor: pointer; transition: all 0.2s; white-space: nowrap; display: inline-flex; align-items: center; gap: var(--sp-2); } .pill:hover { color: var(--text); background: var(--surface); border-color: var(--border); } .pill.active { color: var(--cyan); background: var(--cyan-dim); border-color: rgba(0, 212, 255, 0.15); } /* Nav command — pill with sign-in variant */ .nav-cmd { /* inherits .pill styling via same properties */ } .nav-cmd { font-size: 0.75rem; font-weight: 500; color: var(--text-3); padding: 0.35rem 0.75rem; border-radius: var(--r-md); border: 1px solid transparent; transition: all 0.2s; white-space: nowrap; } .nav-cmd:hover { color: var(--text); background: var(--surface); border-color: var(--border); } .nav-cmd.active { color: var(--cyan); background: var(--cyan-dim); border-color: rgba(0, 212, 255, 0.15); } .sign-in { border-color: var(--border-hover) !important; } .sign-in:hover { border-color: var(--cyan) !important; color: var(--cyan) !important; } /* Button base */ .btn { font-family: var(--font-mono); font-size: 0.85rem; font-weight: 600; padding: 0.75rem 1.75rem; border-radius: var(--r-md); border: none; cursor: pointer; transition: all var(--transition); display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2); text-decoration: none; } /* Primary — cyan solid */ .btn-primary, .btn-primary-xl { color: var(--text-inv); background: var(--cyan); box-shadow: 0 4px 20px var(--cyan-dim); } .btn-primary:hover, .btn-primary-xl:hover { transform: translateY(-2px); box-shadow: 0 6px 30px var(--cyan-glow); } /* Ghost — transparent with border */ .btn-ghost { color: var(--text-2); background: transparent; border: 1px solid var(--border-hover); } .btn-ghost:hover { color: var(--text); border-color: rgba(0, 212, 255, 0.25); background: rgba(0, 212, 255, 0.04); transform: translateY(-2px); } /* Danger */ .btn-danger { color: var(--text); background: rgba(255, 95, 87, 0.15); border: 1px solid rgba(255, 95, 87, 0.3); } .btn-danger:hover { background: rgba(255, 95, 87, 0.25); border-color: rgba(255, 95, 87, 0.5); } /* Small variant */ .btn-sm { font-size: 0.75rem; padding: 0.4rem 1rem; } /* ============================================ 10. CARDS — Terminal window content variants ============================================ */ /* Card metadata: "from" line, date, footer */ .card-from { font-size: 0.8rem; margin-bottom: var(--sp-4); } .card-desc { font-family: var(--font-body); font-size: 0.9rem; color: var(--text-2); line-height: 1.7; margin-bottom: var(--sp-6); } .card-footer { display: flex; justify-content: space-between; align-items: center; padding-top: var(--sp-4); border-top: 1px solid var(--border); } .card-date { font-size: 0.7rem; color: var(--text-3); } /* Blog card — author row, stats, actions, preview comments */ .card-author-row { display: flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-4); } .card-avatar, .user-avatar { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; border: 1px solid var(--border-hover); flex-shrink: 0; } .card-avatar-sm { width: 20px; height: 20px; border-radius: 50%; object-fit: cover; flex-shrink: 0; } .card-author { color: var(--text); font-size: 0.8rem; font-weight: 600; display: block; } .card-author-info { display: flex; flex-direction: column; gap: var(--sp-1); } .card-title-link { text-decoration: none; } .card-title-link h3 { color: var(--text); font-size: 1rem; margin-bottom: var(--sp-1); } .card-title-link:hover h3 { color: var(--cyan); } .card-subtitle { color: var(--text-3); font-size: 0.8rem; display: block; margin-bottom: var(--sp-2); } .pill.tag { cursor: pointer; font-size: 0.7rem; } .pill.tag:hover { color: var(--cyan); border-color: var(--cyan); } .card-stats { display: flex; align-items: center; gap: var(--sp-4); font-size: 0.75rem; color: var(--text-3); margin-bottom: var(--sp-3); } .card-stats-right { margin-left: auto; display: flex; gap: var(--sp-2); } .card-desc-box { padding-top: var(--sp-3); margin-top: var(--sp-3); border-top: 1px solid var(--border); position: relative; } .card-desc-box::before { content: "// description"; position: absolute; top: -0.55em; left: 0; font-size: 0.6rem; color: var(--syn-comment); background: var(--surface); padding-right: var(--sp-2); } .card-actions { display: flex; align-items: center; gap: var(--sp-2); padding-top: var(--sp-3); border-top: 1px solid var(--border); flex-wrap: wrap; position: relative; } .card-actions::before { content: "// tags"; position: absolute; top: -0.55em; left: 0; font-size: 0.6rem; color: var(--syn-comment); background: var(--surface); padding-right: var(--sp-2); } .card-actions::after { content: "social //"; position: absolute; top: -0.55em; right: 0; font-size: 0.6rem; color: var(--syn-comment); background: var(--surface); padding-left: var(--sp-2); } .card-actions-right { margin-left: auto; display: flex; gap: var(--sp-2); } .card-action-btn { cursor: pointer; } .card-featured-pill { margin-left: auto; } /* Share popover */ .share-popover-wrap { position: relative; display: inline-block; } .share-popover { position: absolute; bottom: 100%; left: 0; margin-bottom: var(--sp-2); min-width: 160px; background: var(--surface); border: 1px solid var(--border-hover); border-radius: var(--r-md); padding: var(--sp-2); box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4); opacity: 0; visibility: hidden; transform: translateY(4px); transition: opacity 0.2s, transform 0.2s, visibility 0.2s; z-index: 100; } .share-popover.show { opacity: 1; visibility: visible; transform: translateY(0); } /* Kebab menu (⋮ on cards/comments — owner only) */ .kebab-menu-wrap { position: relative; margin-left: auto; } .kebab-btn { all: unset; display: inline-block; color: var(--text-2); font-size: 1.2rem; cursor: pointer; padding: var(--sp-1) var(--sp-2); border-radius: var(--r-sm); } .kebab-btn:hover { color: var(--cyan); background: var(--cyan-dim); } .kebab-dropdown { position: absolute; top: 100%; right: 0; margin-top: var(--sp-1); min-width: 140px; background: var(--surface); border: 1px solid var(--border-hover); border-radius: var(--r-md); padding: var(--sp-2); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4); opacity: 0; visibility: hidden; transform: translateY(-4px); transition: opacity 0.2s, transform 0.2s, visibility 0.2s; z-index: 100; } .kebab-dropdown.show { opacity: 1; visibility: visible; transform: translateY(0); } .kebab-item { all: unset; display: block; width: 100%; padding: 0.4rem 0.6rem; font-size: 0.75rem; color: var(--text-3); border-radius: var(--r-sm); cursor: pointer; font-family: var(--font-mono); box-sizing: border-box; } .kebab-item:hover { background: var(--cyan-dim); color: var(--text); } .kebab-item.danger { color: var(--error); } .kebab-item.danger:hover { background: rgba(255, 95, 87, 0.1); } [data-theme="light"] .kebab-dropdown { box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1); } [data-theme="light"] .share-popover { box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1); } .card-comments { margin-top: var(--sp-4); padding-top: var(--sp-3); border-top: 1px solid var(--border); position: relative; } .card-comments::before { content: "// comments"; position: absolute; top: -0.55em; left: var(--sp-2); font-size: 0.6rem; color: var(--syn-comment); background: var(--surface); padding: 0 var(--sp-2); } .card-comment { display: flex; align-items: flex-start; gap: var(--sp-2); margin-bottom: var(--sp-2); font-size: 0.8rem; } .card-comment-body { color: var(--text-2); font-size: 0.8rem; margin: var(--sp-1) 0 0; } .card-comment-meta { color: var(--text); font-weight: 500; } /* Comment section — full post view */ .comment { margin-bottom: var(--sp-4); padding-bottom: var(--sp-4); border-bottom: 1px solid var(--border); } .comment:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; } .comment-indent-1 { margin-left: var(--sp-8); } .comment-indent-2 { margin-left: calc(var(--sp-8) * 2); } .comment-indent-3 { margin-left: calc(var(--sp-8) * 3); } .comment-header { display: flex; align-items: center; gap: var(--sp-2); margin-bottom: var(--sp-2); } .comment-author { color: var(--text); font-weight: 600; font-size: 0.8rem; } .comment-time { color: var(--text-3); font-size: 0.7rem; } .comment-body { color: var(--text-2); font-size: 0.85rem; line-height: 1.6; } .comment-actions { display: flex; gap: var(--sp-2); margin-top: var(--sp-2); } /* Search bar inside terminal */ .search-line { display: flex; align-items: center; gap: var(--sp-2); font-size: 0.85rem; } .search-placeholder { color: var(--text-3); font-size: 0.8rem; } /* Sort/filter bar */ .sort-bar { display: flex; align-items: center; justify-content: center; gap: var(--sp-2); flex-wrap: wrap; } .sort-label { font-size: 0.75rem; color: var(--text-3); margin-right: var(--sp-2); } /* Chart (growth bars) */ .chart-body { padding: var(--sp-8) var(--sp-6) var(--sp-4); } .chart-bars { display: flex; align-items: flex-end; gap: var(--sp-3); height: 160px; padding-bottom: var(--sp-6); border-bottom: 1px solid var(--border); } .chart-bar { flex: 1; height: var(--h); background: linear-gradient(180deg, var(--cyan-dim) 0%, rgba(0, 212, 255, 0.04) 100%); border: 1px solid rgba(0, 212, 255, 0.15); border-radius: var(--r-sm) var(--r-sm) 0 0; position: relative; transition: all 0.3s; } .chart-bar:hover { background: linear-gradient(180deg, rgba(0, 212, 255, 0.2) 0%, rgba(0, 212, 255, 0.06) 100%); border-color: rgba(0, 212, 255, 0.3); } .chart-bar.bar-current { background: linear-gradient(180deg, rgba(0, 212, 255, 0.25) 0%, rgba(0, 212, 255, 0.08) 100%); border-color: rgba(0, 212, 255, 0.3); box-shadow: 0 0 20px var(--cyan-dim); } .chart-bar span { position: absolute; bottom: -22px; left: 50%; transform: translateX(-50%); font-size: 0.65rem; color: var(--text-3); } .chart-label { text-align: center; font-size: 0.7rem; color: var(--text-3); margin-top: var(--sp-6); } /* ============================================ 10b. TABLES ============================================ */ .table { width: 100%; border-collapse: collapse; font-size: 0.8rem; } .table th { text-align: left; padding: var(--sp-3) var(--sp-4); border-bottom: 2px solid var(--border-hover); color: var(--cyan); font-weight: 600; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; } .table td { padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--border); color: var(--text-2); } .table-striped tr:nth-child(even) td { background: var(--surface-up); } .table tr:hover td { background: var(--surface-hover); } .table .status-active { color: var(--success); } .table .status-locked { color: var(--error); } .table .status-pending { color: var(--warning); } /* ============================================ 11. FORMS ============================================ */ .form-group { margin-bottom: var(--sp-6); } .form-label { display: block; font-size: 0.8rem; color: var(--text-2); margin-bottom: var(--sp-2); } .form-input { width: 100%; font-family: var(--font-mono); font-size: 0.85rem; color: var(--text); background: var(--bg); border: 1px solid var(--border-hover); border-radius: var(--r-md); padding: 0.65rem var(--sp-4); transition: border-color 0.2s, box-shadow 0.2s; outline: none; } .form-input:focus { border-color: var(--cyan); box-shadow: 0 0 0 2px var(--cyan-dim); } .form-input::placeholder { color: var(--text-3); } .input-toggle-wrap { position: relative; } .input-toggle-wrap .form-input { padding-right: var(--sp-16); } .input-toggle-btn { position: absolute; right: var(--sp-2); top: 50%; transform: translateY(-50%); background: none; border: none; color: var(--syn-comment); font-family: var(--font-mono); font-size: 0.7rem; cursor: pointer; padding: var(--sp-1) var(--sp-2); box-shadow: none; } .input-toggle-btn:hover { color: var(--cyan); transform: translateY(-50%); } .form-hint { font-size: 0.7rem; color: var(--text-3); margin-top: var(--sp-1); } .form-error { font-size: 0.7rem; color: var(--error); margin-top: var(--sp-1); } /* ============================================ 12. FOOTER ============================================ */ footer { position: relative; z-index: 1; border-top: 1px solid var(--border); background: var(--bg-alt); padding: var(--sp-10) 0 var(--sp-6); } .footer-inner { max-width: var(--max-w); margin: 0 auto; padding: 0 var(--sp-6); display: flex; justify-content: space-between; gap: var(--sp-16); } .footer-brand { max-width: 400px; } .footer-brand p { font-family: var(--font-body); font-size: 0.85rem; color: var(--text-3); line-height: 1.7; margin-top: var(--sp-3); } .footer-links { display: flex; gap: var(--sp-12); } .footer-col { display: flex; flex-direction: column; gap: var(--sp-3); } .footer-col .code-comment { margin-bottom: var(--sp-2); } .footer-col a { font-size: 0.8rem; color: var(--text-3); transition: color 0.2s; } .footer-col a:hover { color: var(--cyan); } .footer-bottom { max-width: var(--max-w); margin: var(--sp-8) auto 0; padding: var(--sp-4) var(--sp-6) 0; border-top: 1px solid var(--border); font-size: 0.7rem; } /* Toast container (OOB alerts) */ .toast-container { position: fixed; bottom: 1rem; right: 1rem; z-index: 800; display: flex; flex-direction: column; gap: 0.5rem; pointer-events: none; } /* ============================================ 13. AUTH VISIBILITY ============================================ */ [data-show-when-logged-in] { display: none !important; } body.logged-in [data-show-when-logged-in] { display: revert !important; } body.logged-in [data-hide-when-logged-in] { display: none !important; } [data-admin-only] { display: none !important; } body.user-is-admin [data-admin-only] { display: revert !important; } [data-moderator-only] { display: none !important; } body.user-is-moderator [data-moderator-only], body.user-is-admin [data-moderator-only] { display: revert !important; } .hidden { display: none !important; } /* ============================================ 14. ANIMATIONS ============================================ */ @keyframes blink { 50% { opacity: 0; } } @keyframes fadeUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } /* Hero staggered entrance */ .hero .terminal-window { opacity: 0; animation: fadeUp 0.8s var(--ease-out-expo) forwards; } .hero .terminal-window:nth-child(1) { animation-delay: 0.1s; } .hero .terminal-window:nth-child(2) { animation-delay: 0.25s; } .hero .terminal-window:nth-child(3) { animation-delay: 0.4s; } .hero-cta { opacity: 0; animation: fadeUp 0.7s var(--ease-out-expo) 0.55s forwards; } .hero-side .terminal-window { opacity: 0; animation: fadeUp 0.8s var(--ease-out-expo) forwards; } .hero-side .terminal-window:nth-child(1) { animation-delay: 0.3s; } .hero-side .terminal-window:nth-child(2) { animation-delay: 0.5s; } /* Scroll-triggered reveal */ .reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.7s var(--ease-out-expo), transform 0.7s var(--ease-out-expo); } .reveal.visible { opacity: 1; transform: translateY(0); } .reveal-stagger > * { opacity: 0; transform: translateY(16px); transition: opacity 0.6s var(--ease-out-expo), transform 0.6s var(--ease-out-expo); } .reveal-stagger.visible > *:nth-child(1) { transition-delay: 0.05s; opacity: 1; transform: translateY(0); } .reveal-stagger.visible > *:nth-child(2) { transition-delay: 0.12s; opacity: 1; transform: translateY(0); } .reveal-stagger.visible > *:nth-child(3) { transition-delay: 0.19s; opacity: 1; transform: translateY(0); } .reveal-stagger.visible > *:nth-child(4) { transition-delay: 0.26s; opacity: 1; transform: translateY(0); } .reveal-stagger.visible > *:nth-child(5) { transition-delay: 0.33s; opacity: 1; transform: translateY(0); } .reveal-stagger.visible > *:nth-child(6) { transition-delay: 0.40s; opacity: 1; transform: translateY(0); } .reveal-stagger.visible > *:nth-child(n+7) { transition-delay: 0.45s; opacity: 1; transform: translateY(0); } /* ============================================ 15. RESPONSIVE ============================================ */ @media (max-width: 1024px) { .grid-3 { grid-template-columns: repeat(2, 1fr); } .grid-4 { grid-template-columns: repeat(2, 1fr); } .hero-layout { grid-template-columns: 1fr; } .page-layout-2col { grid-template-columns: 1fr; } .sidebar { position: static; } } @media (max-width: 768px) { .nav-commands, .nav-actions { display: none; } .nav-toggle { display: flex; } .nav-commands.open { display: flex; flex-direction: column; position: fixed; top: var(--nav-h); left: 0; right: 0; background: rgba(12, 14, 20, 0.97); backdrop-filter: blur(20px); padding: var(--sp-4) var(--sp-6); gap: var(--sp-2); border-bottom: 1px solid var(--border); } .nav-actions.open { display: flex; position: fixed; top: calc(var(--nav-h) + 220px); left: 0; right: 0; background: rgba(12, 14, 20, 0.97); padding: var(--sp-3) var(--sp-6) var(--sp-4); border-bottom: 1px solid var(--border); } .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } .footer-inner { flex-direction: column; gap: var(--sp-6); } .footer-links { gap: var(--sp-6); } .sort-bar { flex-wrap: wrap; } .code-indent { padding-left: var(--sp-3); } .btn, .btn-primary-xl, .btn-ghost { width: 100%; justify-content: center; } } /* ============================================ 16. PAGE: HERO (index.html specific) ============================================ */ .hero { position: relative; z-index: 1; padding: calc(var(--nav-h) + var(--sp-12)) var(--sp-6) var(--sp-16); min-height: 100vh; display: flex; align-items: center; } .hero::before { content: ''; position: absolute; top: 25%; left: 35%; width: 600px; height: 500px; background: radial-gradient(ellipse, rgba(0, 212, 255, 0.06) 0%, rgba(139, 92, 246, 0.03) 40%, transparent 70%); pointer-events: none; filter: blur(50px); } .hero-layout { max-width: var(--max-w); margin: 0 auto; display: grid; grid-template-columns: 1.1fr 0.9fr; gap: var(--sp-8); align-items: start; width: 100%; } .hero-main { display: flex; flex-direction: column; gap: var(--sp-6); } .hero-side { display: flex; flex-direction: column; gap: var(--sp-6); } .hero h1 { font-family: var(--font-mono); font-size: clamp(2.4rem, 5.5vw, 3.8rem); font-weight: 800; line-height: 1.1; letter-spacing: -0.03em; color: var(--text); } .hero .code-tagline { font-size: 1rem; color: var(--text-2); } .hero .code-comment { margin-bottom: var(--sp-2); } .hero-cta { display: flex; gap: var(--sp-4); flex-wrap: wrap; margin-top: var(--sp-4); } @media (max-width: 768px) { .hero { min-height: auto; padding-bottom: var(--sp-10); } .hero-cta { flex-direction: column; align-items: center; } }