/* ============================================================
LifeCircuit — shared stylesheet
lifecircuit.neocities.org
One file. No build step. Link it, delete the page's own
duplicate of these rules, change nothing else.
Sections:
1. Tokens — canonical names + back-compat aliases
2. Themes — dark (default), parchment, light
3. Reset
4. Typography
5. Shell — lc-topbar (the shared nav)
6. Footer
7. Utilities
============================================================ */
/* ── 1. TOKENS ──────────────────────────────────────────────
Canonical names. Every page migrates to these.
Chosen so the T₁→T₄ drain is legible in the names themselves:
accents are named by hue (teal/amber/coral), not by role,
because the same three colours carry different meanings on
different pages and role-names would lie.
─────────────────────────────────────────────────────────── */
:root {
/* surfaces */
--bg: #06070b;
--bg-raised: #0b0f1a;
--bg-panel: rgba(255,255,255,.03);
/* text */
--ink: #e9edf7;
--ink-dim: #a9b2c7;
--muted: #6b7491;
--faint: #4a5170;
/* structure */
--line: rgba(255,255,255,.07);
--line-strong: rgba(255,255,255,.14);
/* accents — hue-named, not role-named */
--accent-coral: #ff4d6d;
--accent-amber: #ffd166;
--accent-teal: #4cc9f0;
/* type */
--serif: 'EB Garamond', Georgia, Cambria, 'Times New Roman', serif;
--mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
/* metrics */
--max: 720px;
--max-wide: 980px;
--radius: 14px;
--shadow: 0 18px 60px rgba(0,0,0,.55);
/* ── back-compat aliases ──────────────────────────────────
Existing pages use these names. Keeping them means a page
can link this stylesheet and drop its own :root block in
the same edit without a visual regression. Remove an alias
only once no file references it.
───────────────────────────────────────────────────────── */
--bg0: var(--bg);
--bg1: var(--bg-raised);
--bg2: var(--bg-raised);
--text: var(--ink);
--soft: var(--bg-raised);
--label: var(--ink-dim);
--border: var(--line);
--surface: var(--bg-raised);
--accent: var(--accent-coral);
--accent2: var(--accent-amber);
--accent3: var(--accent-teal);
--teal: var(--accent-teal);
--amber: var(--accent-amber);
--coral: var(--accent-coral);
}
/* ── 2. THEMES ──────────────────────────────────────────────
Dark is the default and needs no class.
Two documented exceptions, set on :
gaia, almanac
fortification-spiral
Anything not carrying a theme class is dark.
─────────────────────────────────────────────────────────── */
.theme-parchment {
--bg: #f5f0e8;
--bg-raised: #ede7d9;
--bg-panel: rgba(26,23,20,.04);
--ink: #1a1714;
--ink-dim: #4a3f30;
--muted: #8a7a65;
--faint: #b8a99a;
--line: rgba(26,23,20,.12);
--line-strong: rgba(26,23,20,.22);
}
.theme-light {
--bg: #fdfcfb;
--bg-raised: #ffffff;
--bg-panel: rgba(0,0,0,.02);
--ink: #1a1a1a;
--ink-dim: #2a2a2a;
--muted: #4a4a4a;
--faint: #8a8a8a;
--line: rgba(0,0,0,.10);
--line-strong: rgba(0,0,0,.18);
}
/* ── 3. RESET ─────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
body {
margin: 0;
background: var(--bg);
color: var(--ink);
font-family: var(--serif);
font-size: 17px;
line-height: 1.65;
-webkit-font-smoothing: antialiased;
}
/* ── 4. TYPOGRAPHY ────────────────────────────────────────── */
h1, h2, h3, h4 {
font-family: var(--serif);
font-weight: 500;
line-height: 1.2;
margin: 0 0 .6em;
}
h1 { font-size: clamp(28px, 4vw, 42px); }
h2 { font-size: clamp(22px, 3vw, 30px); }
h3 { font-size: clamp(18px, 2.2vw, 22px); }
p { margin: 0 0 1.2em; }
a { color: inherit; }
.kicker,
.lc-label {
font-family: var(--mono);
font-size: 12px;
letter-spacing: .14em;
text-transform: uppercase;
color: var(--muted);
}
code, kbd, pre { font-family: var(--mono); font-size: .92em; }
blockquote {
margin: 1.5em 0;
padding-left: 1.2em;
border-left: 2px solid var(--line-strong);
font-style: italic;
color: var(--ink-dim);
}
/* ── 5. SHELL — lc-topbar ───────────────────────────────────
Byte-identical to the hand-written copy already present in
16 files, with three additions:
· uses tokens instead of literals
· adds .lc-topbar--onlight for pages with a light body
· adds :focus-visible for keyboard users
Markup contract:
─────────────────────────────────────────────────────────── */
.lc-topbar {
position: sticky;
top: 0;
z-index: 999;
backdrop-filter: blur(12px) saturate(1.4);
-webkit-backdrop-filter: blur(12px) saturate(1.4);
background: rgba(6,7,11,.82);
border-bottom: 1px solid rgba(255,255,255,.07);
}
.lc-topbar-inner {
max-width: var(--max-wide);
margin: 0 auto;
padding: 12px 18px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
}
.lc-brand {
display: flex;
align-items: center;
gap: 9px;
text-decoration: none;
color: #e9edf7;
flex-shrink: 0;
}
.lc-mark {
width: 26px;
height: 26px;
border-radius: 8px;
border: 1px solid rgba(255,255,255,.1);
object-fit: cover;
display: block;
}
.lc-brand b { font-weight: 650; font-size: 15px; }
.lc-topbar nav {
display: flex;
flex-wrap: wrap;
gap: 6px;
justify-content: flex-end;
}
.lc-topbar nav a {
text-decoration: none;
font-size: 13px;
color: #a9b2c7;
padding: 6px 12px;
border-radius: 999px;
border: 1px solid rgba(255,255,255,.09);
background: rgba(255,255,255,.04);
transition: color .15s, background .15s, border-color .15s;
white-space: nowrap;
}
.lc-topbar nav a:hover {
color: #e9edf7;
background: rgba(255,255,255,.09);
border-color: rgba(255,255,255,.18);
}
.lc-topbar nav a:focus-visible,
.lc-brand:focus-visible {
outline: 2px solid var(--accent-teal);
outline-offset: 2px;
}
/* current page */
.lc-topbar nav a[aria-current="page"] {
color: #e9edf7;
border-color: rgba(255,255,255,.22);
background: rgba(255,255,255,.10);
}
/* Softens the hard black band above a light page.
Add to the on parchment / light bodies. */
.lc-topbar--onlight {
box-shadow: 0 1px 0 rgba(0,0,0,.06), 0 6px 24px rgba(0,0,0,.10);
}
@media (max-width: 560px) {
.lc-topbar nav { gap: 4px; }
.lc-topbar nav a { padding: 5px 9px; font-size: 12px; }
}
/* ── 6. FOOTER ────────────────────────────────────────────── */
.lc-footer {
max-width: var(--max-wide);
margin: 64px auto 0;
padding: 20px 18px 28px;
border-top: 1px solid var(--line);
display: flex;
flex-wrap: wrap;
gap: 10px;
justify-content: space-between;
font-family: var(--mono);
font-size: 11px;
letter-spacing: .1em;
text-transform: uppercase;
color: var(--muted);
}
/* ── 7. UTILITIES ─────────────────────────────────────────── */
.lc-wrap {
max-width: var(--max);
margin: 0 auto;
padding: 32px 20px 0;
}
.lc-wrap--wide { max-width: var(--max-wide); }
.lc-panel {
border: 1px solid var(--line);
border-radius: var(--radius);
background: var(--bg-panel);
padding: 18px;
}
.lc-rule {
height: 1px;
background: var(--line);
border: 0;
margin: 2.4em 0;
}
/* series prev/next, added during migration */
.lc-seriesnav {
display: flex;
justify-content: space-between;
gap: 14px;
margin: 48px 0 0;
padding-top: 20px;
border-top: 1px solid var(--line);
font-family: var(--mono);
font-size: 12px;
}
.lc-seriesnav a {
color: var(--ink-dim);
text-decoration: none;
padding: 8px 12px;
border: 1px solid var(--line);
border-radius: 999px;
transition: color .15s, border-color .15s;
}
.lc-seriesnav a:hover { color: var(--ink); border-color: var(--line-strong); }
.visually-hidden {
position: absolute;
width: 1px; height: 1px;
margin: -1px; padding: 0;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
}
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: .01ms !important;
animation-iteration-count: 1 !important;
transition-duration: .01ms !important;
}
}
