/* ── Reset & base ──────────────────────────────────────────── */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
/*
* ── Design tokens ─────────────────────────────────────────────
*
* Canonical tokens (colors, font, type scale, spacing, radii) come from the CDN:
* https://cdn.neorgon.org/v1.0.0/styles/base.css (linked in index.html)
* Do NOT redeclare them here — a local copy is how the fleet drifted. The block
* below holds only what base.css does not define, plus the per-site accent.
*
* Motion: base.css still ships --ease-snap (bounce) for legacy sites, but it is
* deprecated for new work (impeccable law: ease-out exponential, no bounce).
* Use --ease-out below.
*/
:root {
/* Per-site identity — set to this site's hub card accent (PROJECTS.md section 4) */
--accent: #a855f7;
--accent-bright: #c084fc;
/* Set per game module by render.js, so each game tints its own surfaces. */
--game-accent: #a855f7;
/* Site extras base.css does not define */
--surface-toast: #1a1730;
--danger: #e11d48;
--danger-hover: #f43f5e;
--ease-out: cubic-bezier(0.22, 1, 0.36, 1);
--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;
}
/* Author display values (e.g. .section/.stack flex) would otherwise defeat the
hidden attribute — restore its authority once, globally. */
[hidden] { display: none !important; }
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); }
/* 32px between major sections read as "no space at all" once the sections had
headings of their own. Separate them the way a page break would. */
.stack--loose { gap: 56px; }
/* Page section: title row + body (replaces “card everything” for grouping) */
.section {
display: flex;
flex-direction: column;
gap: var(--space-6);
}
.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: 650;
letter-spacing: 0.01em;
color: var(--text-primary);
}
.section__lead {
font-size: var(--text-sm);
color: var(--text-muted);
line-height: 1.6;
max-width: 64ch;
}
.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.85);
-webkit-backdrop-filter: blur(10px); /* Safari still needs the prefix */
backdrop-filter: blur(10px);
}
.modal__dialog {
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
width: min(100%, 520px);
max-height: min(90vh, 680px);
overflow: hidden;
background: var(--surface-1);
border: 1px solid var(--border-strong);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-modal);
}
/* For modals holding option grids or editors — narrow dialogs cramp them */
.modal__dialog--wide {
width: min(100%, 760px);
}
.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