/* =========================================================================== themes.css — Retro theme layer for the research hub --------------------------------------------------------------------------- Three opt-in themes that sit ON TOP of the Birch design system (assets/styles.css) without fighting it. Each theme is scoped under a `body.theme-*` class and works mostly by re-defining Birch's own design tokens (the CSS custom properties Birch already consumes), plus a few component accents for personality. Because Birch reads everything through var(--...), a token swap re-skins the whole page with almost no specificity conflicts. Apply a theme by putting the class on , e.g. . The control in theme-switcher.js toggles between them at runtime. Themes: theme-hypercard (default) · theme-homestead · theme-arcade · theme-scholar Distilled from the GeoCities revival experiment; see everything-else/.inbox/geocities-revival/ and archives/. The HyperCard theme comes from everything-else/.inbox/hypercard-revival/. Inspiration: restorativland GeoCities archive — https://geocities.restorativland.org/ and Apple HyperCard (1987, Bill Atkinson). =========================================================================== */ /* All themes: fill the viewport so the themed background reaches the bottom. (Birch's keeps its own background: var(--bg); since the theme only overrides --bg on , a short page would otherwise show white below.) */ body.theme-homestead, body.theme-arcade, body.theme-scholar, body.theme-hypercard { min-height: 100vh; /* Birch's type scale runs small; nudge it up a notch across all themes so body copy, eyebrows and captions read comfortably. */ --text-xs: 13px; --text-sm: 14px; --text-md: 15px; --text-base: 16px; --text-lg: 19px; } /* =========================================================================== THEME: HOMESTEAD — light web-1.0 hobbyist homepage white "paper" panel on a teal dotted desktop, Times New Roman, web-safe accents, beveled cards/buttons, blue underlined links. =========================================================================== */ body.theme-homestead { /* token overrides — these cascade through all of Birch */ --bg: #008080; /* teal desktop */ --surface: #FFFFF0; /* ivory cards */ --surface-tint: #F0FFFF; /* azure */ --surface-warm: #FFFFF0; --text: #000000; --text-soft: #000000; --text-muted: #333333; --muted: #333333; --border-color: #C0C0C0; /* silver */ --accent: #000080; /* navy */ --accent-strong: #800000; /* maroon */ --font-sans: 'Times New Roman', Times, serif; --font-serif: 'Times New Roman', Times, serif; --radius-xs: 0; --radius-sm: 0; --radius-md: 0; --radius-lg: 0; --radius-xl: 0; /* tiled-desktop vibe rebuilt as a CSS dot pattern over teal */ background-image: radial-gradient(rgba(255,255,255,.18) 1px, transparent 1px), radial-gradient(rgba(0,0,0,.10) 1px, transparent 1px); background-size: 12px 12px, 12px 12px; background-position: 0 0, 6px 6px; } /* white paper panel */ body.theme-homestead .page { background: #FFFFFF; border: 3px ridge #C0C0C0; padding-inline: var(--page-pad); } /* centered masthead, beveled headings */ body.theme-homestead header { text-align: center; } body.theme-homestead h1, body.theme-homestead h2, body.theme-homestead h3 { color: #000080; text-shadow: 1px 1px 0 #C0C0C0; } body.theme-homestead .eyebrow { color: #800000; justify-content: center; } body.theme-homestead .lede { color: #000000; font-style: italic; text-align: center; } /* links: classic blue underlined */ body.theme-homestead a { color: #0000EE; text-decoration: underline; text-decoration-color: #0000EE; } body.theme-homestead a:visited { color: #551A8B; } body.theme-homestead a:hover { color: #0000EE; background: #FFFF99; } /* beveled cards + buttons */ body.theme-homestead .card, body.theme-homestead .panel { border: 2px outset #FFFFFF; background: #FFFFF0; } body.theme-homestead .button, body.theme-homestead .btn { border: 2px outset #FFFFFF; background: #C0C0C0; color: #000080; } body.theme-homestead .button:hover { background: #D8D8D8; filter: none; } /* =========================================================================== THEME: ARCADE — dark gaming / sci-fi homepage neon-on-black, metal-plate + starfield tile, glowing accents. =========================================================================== */ body.theme-arcade { --bg: #000000; --surface: rgba(20,20,30,.85); --surface-tint: rgba(0,255,255,.06); --surface-warm: rgba(20,20,30,.85); --text: #FFFFFF; --text-soft: #FFFFFF; --text-muted: #00FFFF; --muted: #00FFFF; --border-color: #6b7280; /* steel */ --accent: #39FF14; /* lime */ --accent-strong: #00FFFF; /* cyan */ --font-sans: 'Times New Roman', Times, serif; --font-serif: 'Times New Roman', Times, serif; --font-mono: 'Courier New', Courier, monospace; --radius-xs: 0; --radius-sm: 0; --radius-md: 0; --radius-lg: 0; --radius-xl: 0; color: #FFFFFF; background-color: #000000; background-image: repeating-linear-gradient(45deg, rgba(255,255,255,.04) 0 2px, transparent 2px 6px), repeating-linear-gradient(-45deg, rgba(255,255,255,.04) 0 2px, transparent 2px 6px), radial-gradient(rgba(255,255,255,.35) 1px, transparent 1px); background-size: 14px 14px, 14px 14px, 90px 90px; } body.theme-arcade .page { background: rgba(0,0,0,.78); border: 3px ridge #6b7280; box-shadow: 0 0 18px rgba(0,255,255,.25); padding-inline: var(--page-pad); } body.theme-arcade header { text-align: center; } body.theme-arcade h1 { color: #39FF14; text-shadow: 0 0 8px #39FF14, 0 0 18px rgba(57,255,20,.5); } body.theme-arcade h2, body.theme-arcade h3 { color: #00FFFF; font-family: 'Courier New', Courier, monospace; text-shadow: 0 0 6px rgba(0,255,255,.6); } body.theme-arcade .eyebrow { color: #00FFFF; justify-content: center; } body.theme-arcade .lede { color: #f5d0ff; text-align: center; } body.theme-arcade a { color: #FFFF00; text-decoration: underline; text-decoration-color: #FFFF00; } body.theme-arcade a:visited { color: #FF6666; } body.theme-arcade a:hover { color: #000000; background: #FFFF00; } body.theme-arcade .card, body.theme-arcade .panel { border: 1px solid #6b7280; background: rgba(20,20,30,.85); box-shadow: inset 0 0 12px rgba(0,255,255,.12); } body.theme-arcade .button, body.theme-arcade .btn { border: 1px solid #00FFFF; background: #000000; color: #00FFFF; text-shadow: 0 0 5px #00FFFF; } body.theme-arcade .button:hover { color: #000000; background: #00FFFF; filter: none; text-shadow: none; } /* =========================================================================== THEME: SCHOLAR — tasteful old-style serif on parchment the restrained end: Palatino/Iowan, small-caps headings, hairline rules. =========================================================================== */ body.theme-scholar { --bg: #ede4d3; /* desk */ --surface: #f6f0e2; /* parchment */ --surface-tint: #efe7d6; --surface-warm: #f6f0e2; --text: #2b2620; --text-soft: #5a5145; --text-muted: #5a5145; --muted: #5a5145; --border-color: #c8bba0; --accent: #7a3b2e; /* faded maroon */ --accent-strong: #6b6a3a; /* olive */ --font-sans: 'Iowan Old Style', 'Palatino Linotype', Palatino, 'Book Antiqua', Georgia, serif; --font-serif: 'Iowan Old Style', 'Palatino Linotype', Palatino, 'Book Antiqua', Georgia, serif; --radius-xs: 2px; --radius-sm: 2px; --radius-md: 3px; --radius-lg: 4px; } body.theme-scholar .page { background: #f6f0e2; border: 1px solid #c8bba0; padding-inline: var(--page-pad); } body.theme-scholar h1, body.theme-scholar h2, body.theme-scholar h3 { font-weight: 600; letter-spacing: .01em; } body.theme-scholar h2, body.theme-scholar h3 { font-variant: small-caps; letter-spacing: .04em; } body.theme-scholar .eyebrow { font-variant: small-caps; text-transform: none; letter-spacing: .14em; } body.theme-scholar a { color: #7a3b2e; text-decoration: none; border-bottom: 1px solid rgba(122,59,46,.4); } body.theme-scholar a:visited { color: #5d4a6b; border-bottom-color: rgba(93,74,107,.4); } body.theme-scholar a:hover { color: #7a3b2e; border-bottom-width: 2px; } body.theme-scholar .card, body.theme-scholar .panel { background: #f6f0e2; border: 1px solid #c8bba0; box-shadow: none; } body.theme-scholar .button, body.theme-scholar .btn { background: #efe7d6; border: 1px solid #c8bba0; color: #2b2620; } body.theme-scholar .button:hover { background: #e6dcc6; filter: none; } /* =========================================================================== THEME: HYPERCARD — classic 1-bit Macintosh stack (Apple HyperCard, 1987) strictly black on white, "gray" only as a CSS dither, Chicago-style chunky headings over Geneva-style body, the page framed as a white card with a hard offset drop shadow on a dithered desktop, rounded-rect buttons that invert when pressed. Fonts are system approximations — no bundled bitmaps. Distilled from everything-else/.inbox/hypercard-revival/. =========================================================================== */ body.theme-hypercard { --bg: #ffffff; --surface: #ffffff; --surface-tint: #ffffff; --surface-warm: #ffffff; --text: #000000; --text-soft: #000000; --text-muted: #000000; --muted: #000000; --border-color: #000000; --accent: #000000; --accent-strong: #000000; /* Geneva ≈ plain humanist system sans for body/fields */ --font-sans: Geneva, Verdana, "Segoe UI", Tahoma, sans-serif; --font-serif: Geneva, Verdana, "Segoe UI", Tahoma, sans-serif; /* sharp 1-bit rectangles everywhere; buttons get their round-rect back below */ --radius-xs: 0; --radius-sm: 0; --radius-md: 0; --radius-lg: 0; --radius-xl: 0; /* dithered "gray" desktop — the classic 50% Mac checkerboard, in pure CSS */ background-color: #ffffff; background-image: repeating-conic-gradient(#000 0 25%, #fff 0 50%); background-size: 4px 4px; } /* the page itself is a white CARD on the desktop, with a hard drop shadow */ body.theme-hypercard .page { background: #ffffff; border: 1px solid #000000; box-shadow: 3px 3px 0 0 #000000; padding-inline: var(--page-pad); } /* Chicago ≈ heavy, slightly condensed system sans for chrome/headings */ body.theme-hypercard header { text-align: center; } body.theme-hypercard h1, body.theme-hypercard h2, body.theme-hypercard h3 { font-family: "Helvetica Neue", "Arial Narrow", Arial, sans-serif; font-weight: 700; color: #000000; letter-spacing: .01em; /* crisp/blocky chrome — scoped to headings so body copy stays readable (esp. on iOS Safari, where this also disables body-text antialiasing) */ -webkit-font-smoothing: none; } body.theme-hypercard .eyebrow { font-family: "Helvetica Neue", "Arial Narrow", Arial, sans-serif; color: #000000; justify-content: center; -webkit-font-smoothing: none; } body.theme-hypercard .lede { color: #000000; text-align: center; } /* links: underlined, invert on hover like a selected HyperCard text-link */ body.theme-hypercard a { color: #000000; text-decoration: underline; text-decoration-color: #000000; } body.theme-hypercard a:visited { color: #000000; } body.theme-hypercard a:hover { color: #ffffff; background: #000000; } /* cards + panels: white "fields" with a 1px black border and a hard shadow */ body.theme-hypercard .card, body.theme-hypercard .panel { background: #ffffff; border: 1px solid #000000; box-shadow: 2px 2px 0 0 #000000; } /* the signature rounded-rectangle button with a hard offset drop shadow */ body.theme-hypercard .button, body.theme-hypercard .btn { background: #ffffff; color: #000000; border: 1px solid #000000; border-radius: 9px; box-shadow: 2px 2px 0 0 #000000; font-family: "Helvetica Neue", "Arial Narrow", Arial, sans-serif; font-weight: 700; } /* pressed/hover: button inverts and sinks onto its shadow */ body.theme-hypercard .button:hover, body.theme-hypercard .btn:hover { background: #000000; color: #ffffff; filter: none; } body.theme-hypercard .button:active, body.theme-hypercard .btn:active { box-shadow: none; transform: translate(2px, 2px); } /* the survey pages colour-code their A/B/C/D variant groups; that colour is the only hue on an otherwise 1-bit page, so flatten it to black & white. The A/B/C/D letter is on every badge/chip/cell, so the grouping survives without the hue. */ body.theme-hypercard .variants { --variant-a: #000000; --variant-b: #000000; --variant-c: #000000; --variant-d: #000000; } body.theme-hypercard .variants .badge[data-variant] { color: #ffffff; background: #000000; border-radius: 3px; } body.theme-hypercard .variants .chip[data-variant] { color: #000000; background: #ffffff; border: 1px solid #000000; border-radius: 3px; } body.theme-hypercard .variants .card[data-variant] { border-color: #000000; } /* =========================================================================== SURVEY VARIANT PALETTES, per theme --------------------------------------------------------------------------- The client/server surveys colour-code their A/B/C/D groups via --variant-a..d (defaults defined in styles.css). Those defaults are tuned for plain Birch and look out of place under the retro themes, so each theme re-tones the four hues to its own palette — keeping the client = cool / server = warm split. (The HyperCard theme flattens them to 1-bit, handled above.) =========================================================================== */ /* Homestead — the classic web-safe 16 colours */ body.theme-homestead .variants-client { --variant-a: #000080; /* navy */ --variant-b: #008080; /* teal */ --variant-c: #800080; /* purple */ --variant-d: #008000; /* green */ } body.theme-homestead .variants-server { --variant-a: #800000; /* maroon */ --variant-b: #CC0000; /* red */ --variant-c: #808000; /* olive */ --variant-d: #AA0066; /* magenta */ } /* Arcade — neon, cool family vs warm family */ body.theme-arcade .variants-client { --variant-a: #00FFFF; /* cyan */ --variant-b: #39FF14; /* lime */ --variant-c: #2D9BFF; /* azure */ --variant-d: #00FF9C; /* spring green */ } body.theme-arcade .variants-server { --variant-a: #FF2DD4; /* magenta */ --variant-b: #FFFF00; /* yellow */ --variant-c: #FF8C1A; /* orange */ --variant-d: #FF3860; /* hot red */ } /* Scholar — muted earth tones on parchment */ body.theme-scholar .variants-client { --variant-a: #46637a; /* slate */ --variant-b: #4f6457; /* sage */ --variant-c: #5d4a6b; /* plum */ --variant-d: #6b6a3a; /* olive */ } body.theme-scholar .variants-server { --variant-a: #7a3b2e; /* maroon */ --variant-b: #8c7a2f; /* ochre */ --variant-c: #a8552d; /* terracotta */ --variant-d: #7a4f68; /* plum */ } /* =========================================================================== TOPIC FLAGS — the "new" / "hot" badges, as a real convention --------------------------------------------------------------------------- Mark a topic as freshly added or very active by dropping a small badge next to its title: new hot Each theme renders the flag in its own idiom. Base style applies if no theme is active. =========================================================================== */ .flag { display: inline-block; margin-left: .4em; padding: 1px 5px; font-size: .62rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; vertical-align: super; line-height: 1.4; border-radius: 3px; background: var(--accent, #800000); color: #fff; } .flag.is-hot { background: var(--danger, #B04A3F); } /* homestead — chunky web-safe superscript (green = new, red = hot) */ body.theme-homestead .flag { font-family: Verdana, Geneva, sans-serif; color: #FFFF00; background: #008000; border-radius: 0; } body.theme-homestead .flag.is-hot { background: #FF0000; color: #FFFF00; } /* arcade — neon tag, hot one glows */ body.theme-arcade .flag { font-family: 'Courier New', Courier, monospace; color: #000; background: #39FF14; border-radius: 0; } body.theme-arcade .flag.is-hot { background: #FF0000; color: #FFFF00; box-shadow: 0 0 6px #FF0000; } /* scholar — quiet italic parenthetical, not a loud badge */ body.theme-scholar .flag { margin-left: .35em; padding: 0; background: none; color: #6b6a3a; font-size: .82rem; font-weight: 400; font-style: italic; letter-spacing: 0; text-transform: lowercase; vertical-align: baseline; } body.theme-scholar .flag::before { content: "("; } body.theme-scholar .flag::after { content: ")"; } body.theme-scholar .flag.is-hot { color: #7a3b2e; } /* hypercard — small inverted Chicago tag; hot gets a leading arrow */ body.theme-hypercard .flag { font-family: "Helvetica Neue", "Arial Narrow", Arial, sans-serif; color: #ffffff; background: #000000; border-radius: 3px; } body.theme-hypercard .flag.is-hot { background: #000000; color: #ffffff; } body.theme-hypercard .flag.is-hot::before { content: "\2192 "; } /* A linked card title should wear its theme's heading color, not the link color — it only reveals itself as a link on hover. Works across all themes. */ .card-title a { color: inherit; text-decoration: none; border-bottom: 0; } .card-title a:hover { text-decoration: underline; } /* =========================================================================== Theme switcher control — neutral styling, independent of the active theme so it stays legible everywhere. Injected by theme-switcher.js. =========================================================================== */ .theme-switcher { position: fixed; top: 10px; right: 10px; z-index: 9999; display: flex; flex-direction: column; /* vertical list — scales past 3-4 themes */ align-items: stretch; /* buttons span the control's width */ gap: 4px; padding: 6px 7px; background: rgba(28,28,30,.86); border: 1px solid rgba(255,255,255,.25); border-radius: 8px; backdrop-filter: blur(4px); font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 11px; color: #f2f2f2; box-shadow: 0 2px 10px rgba(0,0,0,.3); } .theme-switcher__label { opacity: .7; margin: 0 2px 2px; text-transform: uppercase; letter-spacing: .06em; } .theme-switcher button { appearance: none; cursor: pointer; padding: 4px 10px; text-align: left; border: 1px solid rgba(255,255,255,.2); border-radius: 5px; background: transparent; color: #f2f2f2; font: inherit; } .theme-switcher button:hover { background: rgba(255,255,255,.12); } .theme-switcher button:focus-visible { outline: 2px solid #fff; outline-offset: 1px; } .theme-switcher button[aria-checked="true"] { background: #f2f2f2; color: #1c1c1e; border-color: #f2f2f2; font-weight: 700; } @media print { .theme-switcher { display: none; } }