/* ── 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: #e11d48; --accent-bright: #f43f5e; /* Site extras base.css does not define. The file owns four literals and nothing else: --accent and --accent-bright above, and the two --danger values below, which base.css does not define at all. Every other value here is a color-mix of one of them. */ /* The toast floats over content, so it has to be opaque; it is the page's own ground carried a tenth of the way toward the accent. */ --surface-toast: color-mix(in srgb, var(--bg) 90%, var(--accent)); /* Text on an accent fill: tinted toward the accent rather than pure white, but only just. Measured, because the two rules pull against each other here: the accent is light enough that #f9f9f9 already sits on it at 4.46:1, under AA for 14px, and every step of tint costs more. 2% is chroma 0.0045, the tint the law asks for, at 4.57:1 on --accent and 4.70:1 on --danger. Deepen the tint and the label stops passing. */ --on-accent: color-mix(in oklab, white 98%, var(--accent)); /* Destructive stays a different red from the accent, or "reset progress" reads as the primary action on every screen it appears on. */ --danger: #dc2626; --danger-hover: #ef4444; --ease-out: cubic-bezier(0.22, 1, 0.36, 1); --control-height: 44px; --control-height-sm: 36px; --shadow-ink: color-mix(in srgb, var(--bg) 55%, transparent); --shadow-card: 0 12px 28px var(--shadow-ink); --shadow-modal: 0 24px 48px color-mix(in srgb, var(--bg) 62%, transparent); --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; } 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; } /* 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. Auth styles (.auth-*) stay * site-owned below. * * There is deliberately no bare `nav` rule. This file used to carry * `nav { display: flex; align-items: center }`, written for a header that has * not been a