/* sole.computer theme — dark, unrepressed. * * A LAYER over the engine's bundled default (Epoch 24.6 crafted- * functionalist substrate, ADR-0051). That default is CHAMELEONIC: every * rule reads a variable from its :root CONTROL PANEL and is wrapped in * :where(...) (zero specificity). So we re-theme the whole site just by * overriding the control-panel variables below, and any single-class rule * here wins the cascade cleanly. custom.css is auto-linked AFTER the * bundled sheet, so we also win the bare content-block classes * (.page-title / .page-body / .contents) by loading later. * * DO NOT create content/style.css — authoring it makes the engine drop * the bundled substrate wholesale (search.rs), losing the whole scaffold. * The theme lives here, in custom.css. * * The look: black, antique-gold body, silver headings/wordmark, bronze * muted, cyan links with a phosphor glow, the site font (font.ttf, * auto-bound by the engine as the 'sole-site-font' family). */ :root { /* --- Control panel: our palette (same variable names the substrate reads, so this re-colours masthead, nav, prose, listings, footer — everything — at once). --- */ --bg: #000; /* black page */ --ink: #d4a850; /* antique gold — body text */ --muted: #c07838; /* bronze — dates, nav, footer, tags */ --accent: cyan; /* links, active states */ --accent-ink: #a0f8ff; /* link hover — phosphor cyan */ --rule: #3a2e1a; /* hairlines, borders */ --code-bg: #1a1305; /* code / preformatted background */ /* --- Control panel: type. font.ttf is bound as 'sole-site-font'; make it the body voice (chrome inherits it via --font-chrome). Monospace fallback keeps the retro-terminal register if the face fails to load. --font-mono stays generic for code. --- */ --font-body: 'sole-site-font', "Courier Prime", "Courier New", Courier, monospace; --measure: 46rem; /* our reading column */ /* --- Our own semantic aliases — the home page's inline styles (content/index.html) read these; keep them in step with the palette above. --- */ --text-strong: silver; /* headings, wordmark */ --link: var(--accent); --link-hover-glow: 0 0 0.4rem rgba(0, 255, 255, 0.6); --border-strong: #3a2e1a; --border-subtle: #241f15; } /* The substrate ships a light :root + a dark @media variant; our theme is dark for everyone, and our plain :root (later in source) already wins both. We re-assert the palette inside the dark media only so a future default reorder can't flip us. */ @media (prefers-color-scheme: dark) { :root { --bg: #000; --ink: #d4a850; --muted: #c07838; --accent: cyan; --accent-ink: #a0f8ff; --rule: #3a2e1a; --code-bg: #1a1305; } } /* Paint the root black too, so the area outside the centered column fills with the page colour rather than the browser canvas. */ html { background: var(--bg); } /* --- Masthead (engine auto-chrome, themed) ------------------------- */ /* The masthead is a centered crest: the (no-text) foot larger and centered, the wordmark and the nav/motto/slogan beneath it centered too — a centered header above the left-aligned reading content. The blocks are flex children of (header dissolves), so align-self centres each on the horizontal axis. */ header > .logo { max-height: 5rem; align-self: center; } header > .site-title, header > .navigation, header > .custom-header { align-self: center; text-align: center; } /* The site-title home link is our wordmark: silver, uppercase, tracked. */ header > .site-title { color: var(--text-strong); font-weight: 700; text-transform: uppercase; letter-spacing: 0.15em; } header > .site-title:hover { color: var(--text-strong); text-shadow: var(--link-hover-glow); } /* Nav links are cyan like the original site (the new substrate defaults them to muted/bronze); the phosphor glow comes in on hover. The language switcher is already cyan by default. */ header .navigation .link { color: var(--link); } header .navigation .link:hover, header .language-switcher .link:not(.active):hover { color: var(--accent-ink); text-shadow: var(--link-hover-glow); } /* Our motto + rotating slogan live in header.html (the .custom-header block), just under the masthead. The motto is the fixed flag and comes first; the slogan is the ever-changing mood, a quiet second breath. */ .site-motto { margin: 0; color: var(--ink); } .site-slogan { margin: 0.4rem 0 0; color: var(--muted); font-style: italic; font-size: var(--text-sm); } /* --- Prose (the .page-body content region) ------------------------- */ /* Headings in silver, like the wordmark. */ .page-title, .page-body h1, .page-body h2, .page-body h3 { color: var(--text-strong); } /* Prose links: cyan, no underline at rest, glow + underline on hover (the substrate underlines them always). */ .page-body a { color: var(--accent); text-decoration: none; } .page-body a:hover { color: var(--accent-ink); text-decoration: underline; text-shadow: var(--link-hover-glow); } /* The ✎ pencil edit-stamp is body prose; keep it a quiet footnote. */ .page-body .edit-stamp { color: var(--muted); font-size: var(--text-sm); margin-top: var(--space-5); } /* --- Footer: the SOLE emblem sign-off + the colour-drift easter egg --- */ footer .custom-footer { border-top: none; /* the substrate adds a rule; keep it open */ text-align: center; margin-top: var(--space-5); } /* The engine's recent-items feed (E24.8, ADR-0055) is emitted on every section landing's footer. A software-company page is not a chronological feed of "recent items", so hide it — the emblem sign-off is the footer. */ .recent { display: none; } /* The with-text emblem, large and attention-calling. The art is square (the foot is portrait inside it, so the sides are empty on purpose), so we drive it mostly by viewport HEIGHT — generous, with room to breathe. */ .site-signoff { display: block; width: min(80vh, 94vw); height: auto; margin: 3rem auto 0; } /* The easter-egg control panel: foot-sole sliders, TWO per row so each row reads as a pair of feet (a left + a mirrored right) that open and close as you slide. Understated at half opacity, full on hover/focus. The values persist across pages and visits (localStorage; see footer.html). */ .feet-controls { display: grid; grid-template-columns: repeat(2, auto); justify-content: center; align-items: center; gap: 1.1rem 1.6rem; max-width: 100%; margin: 2.5rem auto 0; opacity: 0.5; transition: opacity 0.4s; } .feet-controls:hover, .feet-controls:focus-within { opacity: 1; } /* Foot-sole sliders: the thumb is a little foot; the --right ones mirror, so each row is a left + right pair. */ .foot-slider { -webkit-appearance: none; appearance: none; width: min(11rem, 38vw); height: 0.4rem; background: var(--border-strong); border-radius: 1rem; outline: none; } .foot-slider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 1.8rem; height: 1.8rem; background: url('/logo.png') center / contain no-repeat; border: none; cursor: grab; } .foot-slider::-moz-range-thumb { width: 1.8rem; height: 1.8rem; background: url('/logo.png') center / contain no-repeat; border: none; cursor: grab; } .foot-slider--right::-webkit-slider-thumb { transform: scaleX(-1); } .foot-slider--right::-moz-range-thumb { transform: scaleX(-1); } /* Mirror + reset buttons, on their own centered row below the sliders. ⇋ flips the foot to a right foot; ↺ restores the defaults. */ .feet-buttons { grid-column: 1 / -1; display: flex; justify-content: center; gap: 1.6rem; margin-top: 0.6rem; } .feet-mirror, .feet-reset { padding: 0; background: none; border: none; color: var(--muted); font-size: 1.5rem; line-height: 1; cursor: pointer; transition: color 0.2s, text-shadow 0.2s; } .feet-mirror:hover, .feet-reset:hover { color: var(--accent-ink); text-shadow: var(--link-hover-glow); }