/* barefoot.computer theme — dark, in the sole.computer family. * * A LAYER over the engine's bundled default (the Epoch 24.6 crafted- * functionalist substrate, ADR-0051). The default is CHAMELEONIC: every rule * reads a :root CONTROL PANEL variable and is wrapped in :where(...) (zero * specificity), so overriding the control panel re-themes the whole site and * any single-class rule here wins the cascade (custom.css loads AFTER the * bundled sheet). * * DO NOT create content/style.css — authoring it makes the engine drop the * bundled substrate wholesale. The theme lives here. * * The look is barefoot's TWIN of sole.computer: black page, antique-gold body, * silver headings and wordmark, bronze muted text, cyan links with a phosphor * glow. The ONE deliberate difference from sole: the typeface stays Alice * (font.ttf, the warm book serif the engine binds) — NOT sole's monospace — * because barefoot is a reading site. When the animated background lands in a * future epoch, the palette is expected to soften to sit under it; for now it * is the family dark. * * Contrast: every colour used as text meets WCAG AA on black — gold 9.52:1, * bronze 5.98:1, cyan 16.75:1, silver 11.54:1. */ :root { /* --- Control panel: our palette (the substrate reads these names) --- */ --bg: #000; /* black page */ --ink: #d4a850; /* antique gold — body text (9.52:1) */ --muted: #c07838; /* bronze — dates, nav, captions (5.98:1) */ --accent: cyan; /* links, active states (16.75:1) */ --accent-ink: #a0f8ff; /* phosphor cyan — link hover (17.37:1) */ --rule: #3a2e1a; /* hairlines, borders */ --code-bg: #1a1305; /* code / preformatted surface */ /* TYPE: --font-body is LEFT at the engine default on purpose — the engine binds font.ttf (Alice) as its body face, so barefoot reads in Alice. We do NOT adopt sole.computer's monospace body. --measure stays default. */ /* --- Our own aliases: silver headings/wordmark, and the link glow --- */ --text-strong: silver; --link-hover-glow: 0 0 0.4rem rgba(0, 255, 255, 0.6); } /* The substrate ships a light :root + a dark @media variant; our theme is dark for everyone. Re-assert the palette inside the dark media so a future substrate reorder cannot flip us to its light defaults. */ @media (prefers-color-scheme: dark) { :root { --bg: #000; --ink: #d4a850; --muted: #c07838; --accent: cyan; --accent-ink: #a0f8ff; --rule: #3a2e1a; --code-bg: #1a1305; } } /* Paint the whole canvas black, not just the centered reading column. */ html { background: var(--bg); } /* --- Masthead: a centered title-page crest ------------------------------- */ /* The engine emits the masthead blocks as flex children of (the

dissolves via display:contents); align-self centres each. */ header > .logo { max-height: 5rem; /* the foot photo is large; cap it */ width: auto; align-self: center; margin-bottom: var(--space-2); } header > .site-title, header > .navigation, header > .language-switcher, header > .custom-header { align-self: center; text-align: center; } /* Lift the motto (the .custom-header, from header..html) up to sit directly under the wordmark, above the nav — the substrate defaults it to the bottom of the masthead (order 130). */ header > .custom-header { order: 107; } /* Wordmark: silver, uppercase, lightly tracked — quiet authority. */ header > .site-title { color: var(--text-strong); font-weight: 700; text-transform: uppercase; letter-spacing: 0.14em; text-decoration: none; } header > .site-title:hover { color: var(--text-strong); text-shadow: var(--link-hover-glow); } /* Nav + language-switcher links: cyan, with the phosphor glow on hover. */ header .navigation .link { color: var(--accent); } header .navigation .link:hover, header .language-switcher .link:not(.active):hover { color: var(--accent-ink); text-shadow: var(--link-hover-glow); } header > .language-switcher { font-size: var(--text-sm); margin-bottom: var(--space-3); } /* The motto (header..html) — the fixed flag under the wordmark. */ .site-motto { margin: 0.3rem 0 0; color: var(--ink); font-style: italic; } /* --- Prose --------------------------------------------------------------- */ /* 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. */ .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); } /* --- Footer: the barefoot foot as a colour-drifting sign-off ------------- */ /* A large foot signs off each page. Both feet — this one and the masthead crest — drift through hues on a slow random walk and are ticklish (hover/click/scroll bursts), reduced-motion safe; see footer.html. sole.computer's cousin adds a slider control panel; barefoot keeps the sensible default walk without it. */ footer .custom-footer { border-top: none; text-align: center; margin-top: var(--space-5); } /* Large, like sole.computer. The art is a square, full-bleed rainbow, so this reads big; drive it by viewport height with a viewport-width cap. */ .site-signoff { display: block; width: min(80vh, 94vw); height: auto; margin: var(--space-5) auto 0; border-radius: 0.25rem; } /* The family colophon — "The barefoot hippie's projects" — sits below the foot. Heading + glosses are localized: every language's text is in the DOM, and CSS :lang() (the engine stamps per page) reveals only the current one. Domain links are language-neutral. */ .family-links { margin-top: var(--space-5); font-family: var(--font-chrome); font-size: var(--text-sm); line-height: var(--leading); text-align: center; } .family-links__lead { margin: 0 0 var(--space-2); color: var(--muted); } .family-links__list { list-style: none; margin: 0; padding: 0; } .family-links__list li { margin-bottom: var(--space-2); } .family-links__list a { display: block; /* the gloss drops to the next line */ color: var(--accent); font-weight: 700; text-decoration: none; } .family-links__list a:hover { color: var(--accent-ink); text-shadow: var(--link-hover-glow); } .family-links__list li .tr { color: var(--muted); font-style: italic; } /* Reveal only the page-language span (all others stay display:none). */ .family-links .tr { display: none; } .family-links:lang(en) .tr-en, .family-links:lang(es) .tr-es, .family-links:lang(pt) .tr-pt, .family-links:lang(fr) .tr-fr, .family-links:lang(de) .tr-de, .family-links:lang(ja) .tr-ja, .family-links:lang(ru) .tr-ru, .family-links:lang(zh) .tr-zh { display: inline; } /* Odds.School links per language: its branded language domain (+ ?l= param) where one exists, else odds.school/?l=; ja has no odds.school locale, so it falls back to the English root. Revealed by :lang() like the glosses, but as a block so the gloss still drops to the next line. See footer.html. */ .family-links__list a.olink { display: none; } .family-links__list:lang(en) a.olink-en, .family-links__list:lang(es) a.olink-es, .family-links__list:lang(pt) a.olink-pt, .family-links__list:lang(fr) a.olink-fr, .family-links__list:lang(de) a.olink-de, .family-links__list:lang(ja) a.olink-ja, .family-links__list:lang(ru) a.olink-ru, .family-links__list:lang(zh) a.olink-zh { display: block; }