@charset "UTF-8"; /* ───────────────────────────────────────────────────────────── N a v i P a l e t t e Narrow column · single flow · post-style entries ───────────────────────────────────────────────────────────── */ :root { --bg-abyss: #030d1c; --bg: #101e2e; --bg-card: #142c4a; --border: #265080; --border-soft: #1e4560; --border-faint: #192e48; --text: #e0f0ff; --text-alt: #a8c8d8; --text-dim: #7898b8; --text-mute: #5a779a; --ghost: #40e8ff; --violet: #c040f8; --green: #00e898; --anchor: #f09030; --red: #ff6060; --font: "Courier Prime", "Courier New", Courier, monospace; --measure: min(640px, 92vw); } /* ─── Reset ─────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; } * { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } html, body { margin: 0; padding: 0; min-height: 100%; } /* The tile lives on so it always covers the full viewport canvas, regardless of how short the body content is and without needing background-attachment:fixed (unreliable on mobile). */ html { background-color: var(--bg); background-image: url("bg-tile.svg"); background-repeat: repeat; background-size: 64px 64px; color: var(--text); } body { font-family: var(--font); font-weight: 400; font-size: 16px; line-height: 1.7; color: var(--text); background: transparent; min-height: 100vh; } /* ─── The one and only column ─────────────────────────────── */ .page { width: var(--measure); margin: 0 auto; padding: 56px 0 80px; } /* ─── Type ──────────────────────────────────────────────────── */ h1, h2, h3, h4 { font-family: var(--font); font-weight: 700; color: var(--text); margin: 0; letter-spacing: 0; } p { margin: 0 0 1em; } a { color: var(--ghost); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; transition: color 120ms ease, background 120ms ease; } a:hover, a:focus-visible { color: var(--bg-abyss); background: var(--ghost); text-decoration: none; outline: none; } ::selection { background: var(--ghost); color: var(--bg-abyss); } /* ─── Header: wordmark + inline nav ───────────────────────── */ .head { text-align: center; margin-bottom: 36px; padding-bottom: 28px; border-bottom: 1px dashed var(--border); } .wordmark { font-family: var(--font); font-weight: 700; font-size: 56px; line-height: 1; letter-spacing: -0.02em; color: var(--text); margin: 0 0 14px; display: inline-block; } /* fauux-style pixel-art mark below the wordmark. image-rendering: pixelated keeps the upscaled SVG rects crisp (no anti-aliased smoothing). */ .mark { display: block; margin: 0 auto 14px; width: 200px; height: 200px; image-rendering: pixelated; image-rendering: -moz-crisp-edges; image-rendering: crisp-edges; } .wordmark a { color: inherit; text-decoration: none; } .wordmark a:hover, .wordmark a:focus-visible { color: var(--ghost); background: transparent; } .nav { font-size: 13px; letter-spacing: 0.06em; color: var(--text-dim); display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 0; } .nav a { color: var(--text-alt); text-decoration: none; padding: 2px 8px; border: 1px solid transparent; /* reserved so hover doesn't shift layout */ } .nav a:hover, .nav a:focus-visible { color: var(--ghost); background: transparent; /* don't inherit the filled cyan box from a:hover — keep text legible */ border-color: var(--text-dim); /* light Cadet-Grey 1px outline on hover */ } .nav .sep { color: var(--text-mute); user-select: none; pointer-events: none; padding: 2px 0; } /* ─── Divider — small dots, centered ──────────────────────── */ .divider { border: 0; margin: 28px 0; text-align: center; height: 0; overflow: visible; font-family: var(--font); } .divider::before { content: "· · · · · · · ·"; color: var(--text-mute); letter-spacing: 0.4em; font-size: 12px; } /* ─── Posts block ───────────────────────────────────────────── Bordered container that visually separates the post content from the identity header (wordmark + butterfly + nav) above it. Double border is a shambhaline-era handmade-web callback; Payne's Grey is the palette's muted border color — present, not loud. ───────────────────────────────────────────────────────────── */ .posts-block { margin-top: 36px; padding: 28px clamp(20px, 5vw, 36px); border: 3px double var(--border); } /* ─── Post entries ────────────────────────────────────────── */ .post { display: block; } .post__head { margin-bottom: 8px; } .post__title { font-family: var(--font); font-size: 20px; font-weight: 700; color: var(--text); margin: 0; display: inline; } .post__title a { color: inherit; text-decoration: none; } .post__title a:hover, .post__title a:focus-visible { color: var(--bg-abyss); background: var(--ghost); } .post__date { font-family: var(--font); font-size: 12px; color: var(--text-dim); margin-left: 10px; letter-spacing: 0.04em; } .post__body { color: var(--text-alt); font-size: 16px; line-height: 1.7; margin-top: 4px; } .post__body p { max-width: 60ch; margin: 0 0 0.9em; } .post__body p:last-child { margin-bottom: 0; } .post__body a { color: var(--ghost); } .post__tags { margin-top: 8px; font-size: 12px; color: var(--text-dim); letter-spacing: 0.04em; } .post__tags .tag { color: var(--text-alt); margin-right: 8px; } /* status badges, kept tiny */ .post__status { font-size: 11.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-mute); margin-left: 10px; } .post__status[data-status="active"] { color: var(--ghost); } .post__status[data-status="live"] { color: var(--green); } .post__status[data-status="paused"] { color: var(--anchor); } /* ─── Section headings (between groups of posts) ──────────── */ .section-head { font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--text-dim); margin: 8px 0 20px; text-align: center; font-weight: 400; } /* ─── About page prose ────────────────────────────────────── */ .prose { text-align: center; } .prose p { color: var(--text-alt); font-size: 16px; line-height: 1.75; margin: 0 auto 1em; max-width: 60ch; } .prose h2 { font-size: 15px; font-weight: 700; color: var(--text); margin: 28px 0 10px; text-transform: uppercase; letter-spacing: 0.12em; } .colophon { margin-top: 36px; padding-top: 18px; border-top: 1px dashed var(--border-faint); font-size: 13px; color: var(--text-dim); line-height: 1.8; } .colophon strong { color: var(--text-alt); font-weight: 700; } /* ─── 404 ─────────────────────────────────────────────────── */ .lost { text-align: center; padding: 60px 0; } .lost__num { font-family: var(--font); font-weight: 700; font-size: clamp(100px, 22vw, 200px); line-height: 1; color: var(--ghost); letter-spacing: -0.04em; text-shadow: 0 0 24px rgba(64,232,255,0.4), 0 0 60px rgba(64,232,255,0.18); } .lost__msg { font-size: 16px; color: var(--text-alt); max-width: 38ch; margin: 16px auto 28px; } .lost__back { font-size: 13px; letter-spacing: 0.18em; text-transform: uppercase; } /* ─── Footer ───────────────────────────────────────────────── */ .foot { margin-top: 56px; padding-top: 18px; border-top: 1px dashed var(--border); font-size: 12px; letter-spacing: 0.06em; color: var(--text-mute); display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; } .foot a { color: var(--text-dim); text-decoration: none; } .foot a:hover, .foot a:focus-visible { color: var(--ghost); background: transparent; } /* ─── Scrollbar (webkit) ──────────────────────────────────── */ ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: var(--bg-abyss); } ::-webkit-scrollbar-thumb { background: var(--border-soft); border: 2px solid var(--bg-abyss); } ::-webkit-scrollbar-thumb:hover { background: var(--border); } /* ─── Reveal animation (kept) ─────────────────────────────── */ .reveal { opacity: 0; transform: translateY(6px); animation: reveal 600ms cubic-bezier(0.2, 0.7, 0.2, 1) forwards; } .reveal-1 { animation-delay: 60ms; } .reveal-2 { animation-delay: 180ms; } @keyframes reveal { to { opacity: 1; transform: translateY(0); } } @media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; animation: none; } } /* ─── Per-post hand-drawn signature ─────────────────────────── PNG with transparent background and gradient ink (Navi palette), baked in by `sigmake`. Lives in /sigs/. Embedded via: #+HTML: Ink color is pre-applied, so NO filter:invert here. ───────────────────────────────────────────────────────────── */ .signature { display: block; margin: 14px 0 0 auto; /* right-aligned, signature-style placement */ max-height: 56px; width: auto; image-rendering: auto; /* signatures are organic curves, not pixelated */ opacity: 0.9; /* slight dim so it doesn't outshout the text */ }