/* ── 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: #f97316; /* base.css pairs every --accent with a brighter hover; the pair has to move together */ --accent-bright: #fb923c; --neo-auth-accent: #c2410c; /* Orange-700: the Auth Kit paints white on this, 5.18:1; on the site accent it would be 2.80:1 */ /* Text on an accent-filled control. White on this orange measures 2.8:1 and fails AA; the fleet ground measures 7.2:1 on --accent and 8.9:1 on --accent-bright (WCAG relative luminance, measured 2026-09-14). */ --accent-ink: #040714; /* 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, so 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, so 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; } /* ── Side-rail shell (opt-in) ────────────────────────────────── * A desktop window is far wider than a comfortable line of text, so a single * centred column leaves two large empty gutters and still runs the prose to * 100+ characters. This puts the section nav in the left gutter and narrows * the reading column, without changing .container for sites that do not use it. * *
* *
…
*
* * Below 940px it collapses to one column and the rail becomes a scrollable * row, so the same markup works on a phone with no JavaScript involved. From * 1240px up, the spare width goes to the right margin only, so the reading * column walks onto the page's centre line instead of sitting right of it. */ .shell { width: 100%; max-width: 1240px; margin: 0 auto; padding: var(--space-6) var(--space-6) 64px; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-6); align-content: start; flex: 1; } /* A 1fr track is minmax(auto, 1fr): a wide child (a board, a table, a long code line) sets min-content and stretches the column past the viewport. */ .shell > * { min-width: 0; } .shell__rail { display: flex; gap: var(--space-1); padding: 4px; background: var(--surface-1); border: 1px solid var(--border); border-radius: var(--radius); overflow-x: auto; scrollbar-width: none; } .shell__rail::-webkit-scrollbar { display: none; } @media (min-width: 940px) { .shell { grid-template-columns: 208px minmax(0, 1fr); gap: var(--space-8); padding: var(--space-8) var(--space-8) 80px; } .shell__rail { position: sticky; top: 76px; /* clears the app-mode header */ flex-direction: column; align-items: stretch; gap: 2px; padding: var(--space-2); overflow: visible; align-self: start; } } /* The rail sits in the left gutter, but with only two tracks it does not stay there: the rail plus its gap add to main's left side and nothing balances them on the right, so main sits half that distance right of the page's centre line (120px at a 208px rail). A column that far off centre reads as a misalignment rather than as a nav beside it. The correction is to stop splitting the spare width between both margins and spend all of it on the right. Main then walks back onto the centre line as the window grows, reaching it at 1240 + 208 + 32 = 1480px, and it costs main no width at any point on the way: the shell widens, main does not move relative to the rail. Below 1240px the shell already fills the viewport, so there is no spare width to spend and any correction would come straight out of the reading column. That trade is not worth making. */ @media (min-width: 1240px) { .shell { --shell-nudge: calc(208px + var(--space-8)); max-width: calc(1240px + var(--shell-nudge)); padding-right: clamp( var(--space-8), calc(var(--space-8) + 100vw - 1240px), calc(var(--space-8) + var(--shell-nudge)) ); } } /* Vertical rhythm: use inside .container or nested regions */ .stack { display: flex; flex-direction: column; gap: var(--space-6); } .stack--tight { gap: var(--space-4); } /* Major sections need a real break. At 32px a heading sits almost on top of the block above it and the page reads as one undifferentiated column. */ .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: 600; letter-spacing: 0.02em; color: var(--text-primary); } .section__lead { font-size: var(--text-sm); color: var(--text-muted); line-height: 1.6; max-width: 64ch; /* 65-75 characters is the readable measure */ } .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. Sign-in is the Neorgon Auth Kit * (css/neorgon-auth.css): never style .neo-auth or .auth-* here either. */ nav { display: flex; align-items: center; gap: var(--space-2); } /* ── Buttons (canonical) ───────────────────────────────────── * Use .btn + a variant. Alias: .nav-link = toolbar ghost. */ .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: var(--accent-ink); 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; } /* ── 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, so 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