/* ── Reset & base ──────────────────────────────────────────── */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
/*
* ── Design tokens ─────────────────────────────────────────────
*
* Colors
* bg: #040714
* surface-1 (cards): rgba(255,255,255,.03)
* surface-2 (hover): rgba(255,255,255,.06)
* border-subtle: rgba(255,255,255,.07)
* border: rgba(255,255,255,.1)
* border-strong: rgba(255,255,255,.22)
* blue accent: #0063e5
* blue accent bright: #0080ff
* text primary: #f9f9f9
* text secondary: #cacaca
* text muted: rgba(255,255,255,.55)
* header gradient: in oklch 135deg, #B015B0 0%, #3D0080 50%, #040714 100%
*
* Typography scale (rem)
* --text-xs: 0.75 --text-sm: 0.875 --text-base: 1
* --text-lg: 1.125 --text-xl: 1.25 --text-2xl: 1.5
* font stack: 'Avenir Next', -apple-system, BlinkMacSystemFont,
* 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif
*
* Spacing scale (4px grid)
* --space-1: 4px --space-2: 8px --space-3: 12px --space-4: 16px
* --space-6: 24px --space-8: 32px
*
* Radii
* --radius-sm: 6px --radius: 10px --radius-lg: 15px
*
* Easing
* --ease-snap: cubic-bezier(0.34, 1.56, 0.64, 1) (spring/overshoot)
* --dur-fast: 120ms --dur: 200ms
*
* UI primitives
* --control-height: 44px (touch minimum)
* --control-height-sm: 36px
* --z-sticky-header: 200 --z-modal: 400 --z-toast: 500
*/
:root {
--bg: #040714;
--surface-1: rgba(255,255,255,.03);
--surface-2: rgba(255,255,255,.06);
--surface-toast: #1a1730;
--border-subtle: rgba(255,255,255,.07);
--border: rgba(255,255,255,.1);
--border-strong: rgba(255,255,255,.22);
--text-primary: #f9f9f9;
--text-secondary: #cacaca;
--text-muted: rgba(255,255,255,.55);
--accent: #06b6d4;
--accent-bright: #22d3ee;
--danger: #e11d48;
--danger-hover: #f43f5e;
--font: 'Avenir Next', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
--text-xs: 0.75rem; --text-sm: 0.875rem; --text-base: 1rem;
--text-lg: 1.125rem; --text-xl: 1.25rem; --text-2xl: 1.5rem;
--space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px;
--space-5: 20px; --space-6: 24px; --space-8: 32px;
--radius-sm: 6px; --radius: 10px; --radius-lg: 15px;
--ease-snap: cubic-bezier(0.34, 1.56, 0.64, 1);
--dur-fast: 120ms; --dur: 200ms;
--control-height: 44px;
--control-height-sm: 36px;
--shadow-card: 0 12px 28px rgba(15, 23, 42, 0.5);
--shadow-modal: 0 24px 48px rgba(2, 6, 23, 0.58);
--z-sticky-header: 200;
--z-modal: 400;
--z-toast: 500;
}
html { height: 100%; }
body {
font-family: var(--font);
background: var(--bg);
min-height: 100%;
color: var(--text-primary);
display: flex; flex-direction: column;
}
body.modal-open {
overflow: hidden;
}
main#main {
flex: 1;
display: flex;
flex-direction: column;
min-height: 0;
width: 100%;
}
/* ── Layout ────────────────────────────────────────────────── */
/*
* GOTCHA: body { display:flex; flex-direction:column } + margin: 0 auto
* on a child collapses its width — always pair with width: 100%.
*
* GOTCHA: External images (YouTube ggpht, Gravatar, etc.) may block loading
* when the Referer header points to localhost or an unknown origin. Fix:
* 1. Add in (global)
* 2. Or add referrerpolicy="no-referrer" on each ![]()
tag
*/
.container {
max-width: 900px;
width: 100%;
margin: 0 auto;
padding: var(--space-6);
flex: 1;
}
/* Vertical rhythm: use inside .container or nested regions */
.stack {
display: flex;
flex-direction: column;
gap: var(--space-6);
}
.stack--tight { gap: var(--space-4); }
.stack--loose { gap: var(--space-8); }
/* Page section: title row + body (replaces “card everything” for grouping) */
.section {
display: flex;
flex-direction: column;
gap: var(--space-4);
}
.section__header {
display: flex;
flex-wrap: wrap;
align-items: flex-end;
justify-content: space-between;
gap: var(--space-4);
}
.section__titles {
display: flex;
flex-direction: column;
gap: var(--space-1);
min-width: 0;
}
.section__title {
font-size: var(--text-xl);
font-weight: 600;
letter-spacing: 0.02em;
color: var(--text-primary);
}
.section__lead {
font-size: var(--text-sm);
color: var(--text-muted);
line-height: 1.45;
max-width: 52ch;
}
.section__lead code {
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
font-size: 0.92em;
color: var(--text-secondary);
}
.stack > .card { margin-bottom: 0; }
.toolbar {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--space-2);
}
/* ── Header ────────────────────────────────────────────────────
* Owned by the Neorgon Header Kit (css/neorgon-header.css — canonical
* source: packages/neorgon-ui/header/). Do NOT style .header-bar,
* .header-logo*, .header-title-link, .header-subtitle, .header-right,
* .header-actions, or .header-home here. Auth styles (.auth-*) stay
* site-owned below.
*/
nav {
display: flex;
align-items: center;
gap: var(--space-2);
}
/* ── Buttons (canonical) ─────────────────────────────────────
* Use .btn + a variant. Aliases: .nav-link = toolbar ghost; .auth-* map below.
*/
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--space-2);
min-height: var(--control-height);
padding: 0 var(--space-4);
border-radius: var(--radius-sm);
font-family: inherit;
font-size: var(--text-sm);
font-weight: 600;
line-height: 1.2;
text-decoration: none;
cursor: pointer;
border: 1px solid transparent;
background: transparent;
color: var(--text-primary);
transition:
background-color var(--dur),
color var(--dur),
border-color var(--dur),
box-shadow var(--dur),
transform var(--dur-fast);
-webkit-tap-highlight-color: transparent;
}
.btn:disabled,
.btn[aria-disabled="true"] {
opacity: 0.45;
cursor: not-allowed;
pointer-events: none;
}
.btn--sm {
min-height: var(--control-height-sm);
padding: 0 var(--space-3);
font-size: var(--text-xs);
}
.btn--block { width: 100%; }
.btn--icon {
min-width: var(--control-height);
padding: 0;
}
.btn--primary {
background: var(--accent);
color: #fff;
border-color: transparent;
}
.btn--primary:hover { background: var(--accent-bright); }
.btn--secondary {
background: var(--surface-2);
color: var(--text-primary);
border-color: var(--border-strong);
}
.btn--secondary:hover {
background: rgba(255, 255, 255, 0.1);
}
.btn--ghost {
background: transparent;
color: rgba(255,255,255,0.92);
border-color: rgba(255,255,255,0.18);
}
.btn--ghost:hover {
background: rgba(255,255,255,0.1);
color: #fff;
}
.btn--danger {
background: var(--danger);
color: #fff;
border-color: transparent;
}
.btn--danger:hover { background: var(--danger-hover); }
/* Toolbar ghost (header nav) — same as .btn.btn--ghost.btn--sm */
.nav-link {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: var(--control-height);
padding: 0 var(--space-3);
border: 1px solid rgba(255,255,255,0.18);
border-radius: var(--radius-sm);
background: transparent;
color: rgba(255,255,255,0.92);
cursor: pointer;
font-family: inherit;
font-size: var(--text-sm);
font-weight: 600;
transition: background-color var(--dur), color var(--dur), border-color var(--dur);
}
.nav-link:hover {
background: rgba(255,255,255,0.1);
color: #fff;
}
.auth-toggle {
display: flex;
align-items: center;
justify-content: center;
min-width: var(--control-height);
min-height: var(--control-height);
padding: 0;
border: 1px solid rgba(255,255,255,0.18);
border-radius: var(--radius-sm);
background: transparent;
color: rgba(255,255,255,0.92);
cursor: pointer;
font-family: inherit;
transition: background-color var(--dur), color var(--dur), border-color var(--dur);
}
.auth-toggle:hover {
background: rgba(255,255,255,0.1);
color: #fff;
}
.auth-toggle svg {
width: 22px;
height: 22px;
flex-shrink: 0;
display: block;
}
.auth-toggle.logged-in { color: var(--accent); }
.auth-toggle.logged-in svg circle:nth-of-type(2) {
fill: currentColor;
stroke: none;
}
/* ── Sheet (inline panel under header) — not a modal ─────────
* Use for auth, filters, compact forms. No backdrop; page scrolls.
* For blocking overlays use .modal below.
*/
.auth-panel {
background: rgba(255,255,255,0.02);
border-bottom: 1px solid var(--border-subtle);
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease-out;
}
.auth-panel.open { max-height: 300px; }
.auth-panel-inner {
padding: var(--space-6);
max-width: 400px;
margin: 0 auto;
}
.auth-tabs {
display: flex;
gap: var(--space-2);
margin-bottom: var(--space-4);
}
.auth-tab {
flex: 1;
min-height: var(--control-height-sm);
padding: 0 var(--space-4);
border: 1px solid var(--border);
border-radius: var(--radius-sm);
background: transparent;
color: var(--text-muted);
cursor: pointer;
font-family: inherit;
font-size: var(--text-sm);
font-weight: 600;
transition: background-color var(--dur), color var(--dur), border-color var(--dur);
}
.auth-tab.active {
background: var(--surface-2);
color: var(--text-primary);
border-color: var(--border-strong);
}
.auth-form input {
width: 100%;
padding: var(--space-3) var(--space-4);
margin-bottom: var(--space-3);
border: 1px solid var(--border);
border-radius: var(--radius-sm);
background: var(--surface-1);
color: var(--text-primary);
font-size: var(--text-sm);
font-family: inherit;
}
.auth-submit {
width: 100%;
min-height: var(--control-height);
padding: 0 var(--space-4);
border: none;
border-radius: var(--radius-sm);
background: var(--accent);
color: #fff;
font-family: inherit;
font-weight: 600;
font-size: var(--text-sm);
cursor: pointer;
transition: background-color var(--dur);
}
.auth-submit:hover { background: var(--accent-bright); }
#authUser {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-4);
}
.auth-username {
color: var(--text-primary);
font-weight: 600;
}
.auth-logout {
min-height: var(--control-height-sm);
padding: 0 var(--space-3);
border: 1px solid var(--border);
border-radius: var(--radius-sm);
background: transparent;
color: var(--text-muted);
cursor: pointer;
font-family: inherit;
font-size: var(--text-sm);
font-weight: 600;
transition: background-color var(--dur), color var(--dur), border-color var(--dur);
}
.auth-logout:hover {
background: var(--surface-2);
color: var(--text-primary);
}
.auth-divider {
height: 1px;
background: var(--border-subtle);
}
/* ── Modal (blocking overlay) ──────────────────────────────── */
.modal[hidden] {
display: none !important;
}
.modal {
position: fixed;
inset: 0;
z-index: var(--z-modal);
display: flex;
align-items: center;
justify-content: center;
padding: var(--space-4);
}
.modal__backdrop {
position: absolute;
inset: 0;
background: rgba(2, 4, 12, 0.72);
backdrop-filter: blur(4px);
}
.modal__dialog {
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
width: min(100%, 440px);
max-height: min(88vh, 560px);
overflow: hidden;
background: var(--surface-1);
border: 1px solid var(--border-strong);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-modal);
}
.modal__header {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-4);
padding: var(--space-4) var(--space-6);
border-bottom: 1px solid var(--border-subtle);
}
.modal__header h2 {
font-size: var(--text-lg);
font-weight: 600;
color: var(--text-primary);
}
.modal__body {
padding: var(--space-6);
overflow: auto;
font-size: var(--text-sm);
color: var(--text-secondary);
line-height: 1.55;
}
.modal__body code {
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
font-size: 0.9em;
color: var(--text-primary);
}
.modal__footer {
display: flex;
flex-wrap: wrap;
justify-content: flex-end;
gap: var(--space-2);
padding: var(--space-4) var(--space-6);
border-top: 1px solid var(--border-subtle);
}
/* ── Card ──────────────────────────────────────────────────── */
/*
* GOTCHA: backdrop-filter creates a stacking context — dropdowns inside
* a card can be clipped by a later card's stacking context. Fix by adding
* position: relative; z-index: 10 to the card that owns the open dropdown.
*
* Default: static surface (no hover lift — avoids generic “dashboard demo”).
* Use .card--interactive for raised hover + entrance motion.
*
* GOTCHA: a