/* ============================================================================
Hermithive - shared sub-page stylesheet (/css/site-pages.css)
----------------------------------------------------------------------------
Styles /events/, /projects/ and /playlist/. Each of those pages links this
file FIRST, then its own small page-specific sheet:
<- page-specific
The homepage has its own /styles.css. This file deliberately reuses that
file's TOKEN NAMES AND VALUES verbatim, so the two halves of the site stay
in step. If you change a colour in one, change it in the other.
THEMING CONTRACT (identical to the homepage):
- localStorage 'hh-theme' = 'light' | 'dark' | absent/other (= system)
- state lives on as data-theme="light" / data-theme="dark"
- when the choice is "system" the attribute is ABSENT, so
prefers-color-scheme alone has to resolve it
- every colour therefore has its base definition on bare :root; the dark
blocks below only REDEFINE tokens. No colour is defined solely inside
a media query or a [data-theme] block.
Rule of thumb: anything that should look the same on every sub-page belongs
here. Only genuinely page-specific rules belong in the per-page sheets, so
the pages cannot drift apart again.
========================================================================== */
/* ---- Light palette: the complete set of tokens, on bare :root ----------- */
:root {
color-scheme: light dark;
--primary-bg: #eceff1;
--surface: #ffffff;
--surface-alt: #f2f5f6;
--border: #cfd8dc;
--accent-bg: #263238;
--accent-bg-light: #37474f;
--primary-fg: #222222;
--muted-fg: #48555d;
--secondary-fg: #ffffff;
--heading-fg: #263238;
--highlight: #546e7a;
--highlight-light: #7e9bae;
--link: #114277;
--link-hover: #0d2f56;
--footer-link: #e6edf1;
--banner-bg: #ffd700;
--banner-fg: #2b2200;
--focus: #ffb300;
--border-radius: 8px;
/* The framed wiki page is light-only, so its backing stays light in both
themes; a dark backing would flash behind it while it loads. */
--frame-bg: #ffffff;
--shadow: 0 2px 12px rgba(0, 0, 0, 0.07);
/* Sub-page-only tokens (no homepage equivalent) */
--cta-bg: #dfe6ea;
--map-bg: #dde3e6;
}
/* ---- Explicit dark choice: data-theme="dark" ---------------------------- */
:root[data-theme="dark"] {
color-scheme: dark;
/* Lifted verbatim from :root[data-theme="dark"] in /styles.css */
--primary-bg: #11171a;
--surface: #1a2227;
--surface-alt: #222c32;
--border: #38474f;
--accent-bg: #0b1012;
--accent-bg-light: #151d21;
--primary-fg: #e7ecee;
--muted-fg: #b9c5cb;
--secondary-fg: #ffffff;
--heading-fg: #d7e3ea;
--highlight: #40555f;
--highlight-light: #6d8a99;
--link: #8fc5ec;
--link-hover: #bfdff6;
--footer-link: #dce6ec;
--banner-bg: #ffd54f;
--banner-fg: #1d1700;
--shadow: 0 2px 12px rgba(0, 0, 0, 0.5);
/* Sub-page-only tokens (no homepage equivalent) */
--cta-bg: #222c32;
--map-bg: #1f282d;
}
/* ---- No explicit choice (attribute absent): follow the OS --------------- */
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) {
color-scheme: dark;
/* Lifted verbatim from :root[data-theme="dark"] in /styles.css */
--primary-bg: #11171a;
--surface: #1a2227;
--surface-alt: #222c32;
--border: #38474f;
--accent-bg: #0b1012;
--accent-bg-light: #151d21;
--primary-fg: #e7ecee;
--muted-fg: #b9c5cb;
--secondary-fg: #ffffff;
--heading-fg: #d7e3ea;
--highlight: #40555f;
--highlight-light: #6d8a99;
--link: #8fc5ec;
--link-hover: #bfdff6;
--footer-link: #dce6ec;
--banner-bg: #ffd54f;
--banner-fg: #1d1700;
--shadow: 0 2px 12px rgba(0, 0, 0, 0.5);
/* Sub-page-only tokens (no homepage equivalent) */
--cta-bg: #222c32;
--map-bg: #1f282d;
}
}
/* An explicit light choice must beat a dark OS preference. */
:root[data-theme="light"] { color-scheme: light; }
/* ---- Base -------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
body {
font-family: Arial, Helvetica, sans-serif;
margin: 0;
padding: 0;
background-color: var(--primary-bg);
color: var(--primary-fg);
line-height: 1.55;
-webkit-text-size-adjust: 100%;
}
/* ---- Skip link --------------------------------------------------------- */
.skip-link {
position: absolute;
left: 0.5rem;
top: -3rem;
z-index: 10000;
padding: 0.6rem 1rem;
background: var(--banner-bg);
color: var(--banner-fg);
font-weight: bold;
border-radius: 0 0 var(--border-radius) var(--border-radius);
text-decoration: none;
transition: top 0.15s ease-in-out;
}
.skip-link:focus { top: 0; }
/* ---- Visible focus for everything interactive -------------------------- */
:focus-visible {
outline: 3px solid var(--focus);
outline-offset: 2px;
}
/* Fallback for browsers without :focus-visible support */
a:focus, button:focus, summary:focus { outline: 3px solid var(--focus); outline-offset: 2px; }
a:focus:not(:focus-visible), button:focus:not(:focus-visible), summary:focus:not(:focus-visible) { outline: none; }
/* ---- Header + site navigation ------------------------------------------ */
header.site-header {
background-color: var(--accent-bg);
color: var(--secondary-fg);
padding: 1em 1.25em 0.5em;
}
.site-header .banner {
display: flex;
align-items: center;
gap: 0.7em;
font-size: 1.5em;
font-weight: bold;
letter-spacing: 0.5px;
}
.site-header .banner img {
height: 40px;
width: auto;
border-radius: 4px;
}
.site-header .banner a {
color: var(--secondary-fg);
text-decoration: none;
display: flex;
align-items: center;
gap: 0.7em;
}
nav.site-nav {
display: flex;
flex-wrap: wrap;
gap: 0.25em 0.9em;
margin-top: 0.75em;
padding-bottom: 0.25em;
}
nav.site-nav a {
color: var(--footer-link);
text-decoration: none;
font-weight: bold;
font-size: 0.95rem;
padding: 0.35em 0.1em;
border-bottom: 3px solid transparent;
}
nav.site-nav a:hover { color: #ffffff; border-bottom-color: var(--highlight-light); }
nav.site-nav a[aria-current="page"] {
color: #ffffff;
border-bottom-color: #ffffff;
}
nav.site-nav a[target="_blank"]::after {
content: " \2197";
font-size: 0.85em;
opacity: 0.8;
}
/* ---- Main layout ------------------------------------------------------- */
main {
max-width: 60rem;
margin: 1.5rem auto;
padding-inline: 1rem;
}
.page-intro { margin-bottom: 1.5rem; }
h1 {
font-size: 1.9rem;
margin: 0 0 0.4em;
color: var(--heading-fg);
line-height: 1.2;
}
h2 {
font-size: 1.3rem;
color: var(--heading-fg);
margin: 0 0 0.6em;
}
h3 { font-size: 1.1rem; margin: 0 0 0.3em; color: var(--primary-fg); }
p { margin: 0 0 0.9em; }
p:last-child { margin-bottom: 0; }
a { color: var(--link); }
a:hover { color: var(--link-hover); }
.lead { font-size: 1.05rem; color: var(--muted-fg); }
/* ---- Cards ------------------------------------------------------------- */
.card {
background: var(--surface);
border-radius: var(--border-radius);
box-shadow: var(--shadow);
padding: 1.25rem;
margin-bottom: 1.5rem;
}
.card > h2:first-child, .card > h3:first-child { margin-top: 0; }
/* ---- Item lists (events, projects) ------------------------------------- */
.item-list {
list-style: none;
margin: 0;
padding: 0;
display: grid;
gap: 1rem;
}
.item {
background: var(--surface);
border: 1px solid var(--border);
border-left: 5px solid var(--highlight);
border-radius: var(--border-radius);
box-shadow: var(--shadow);
padding: 1rem 1.1rem;
}
.item-title {
font-size: 1.15rem;
margin: 0 0 0.35em;
color: var(--heading-fg);
}
.item-desc { margin: 0 0 0.6em; }
.item-meta {
margin: 0;
font-size: 0.9rem;
color: var(--muted-fg);
}
.item-meta dt {
font-weight: bold;
color: var(--primary-fg);
}
.item-meta dd { margin: 0 0 0.4em; }
/* Tag / badge */
/* "In 3 days" / "Tomorrow" countdown on an upcoming event. */
/* Project state ("Active", "Looking for helpers", ...). Deliberately neutral:
green is reserved for the "Open to everyone" access label. */
/* Past items are visibly de-emphasised but still fully readable */
details.past-events {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--border-radius);
box-shadow: var(--shadow);
padding: 0.9rem 1.1rem;
margin-bottom: 1.5rem;
}
details.past-events > summary {
cursor: pointer;
font-weight: bold;
color: var(--heading-fg);
font-size: 1.05rem;
}
details.past-events[open] > summary { margin-bottom: 1rem; }
/* ---- Call to action ---------------------------------------------------- */
.cta {
background: var(--cta-bg);
border: 1px solid var(--border);
border-radius: var(--border-radius);
padding: 1.25rem;
margin-bottom: 1.5rem;
}
.cta h2 { margin-top: 0; }
.button-row {
display: flex;
flex-wrap: wrap;
gap: 0.6rem;
margin-top: 0.9rem;
}
.button {
display: inline-block;
background: var(--accent-bg-light);
color: var(--secondary-fg);
text-decoration: none;
font-weight: bold;
padding: 0.6em 1.1em;
border-radius: var(--border-radius);
border: 1px solid var(--accent-bg-light);
cursor: pointer;
font-size: 0.95rem;
font-family: inherit;
}
.button:hover { background: var(--accent-bg); color: var(--secondary-fg); }
.button-secondary {
background: var(--surface);
color: var(--heading-fg);
border-color: var(--border);
}
.button-secondary:hover { background: var(--surface-alt); color: var(--heading-fg); }
/* ---- "Find us" map ----------------------------------------------------- */
.find-us address {
font-style: normal;
margin-bottom: 0.6em;
}
.map-holder {
height: 260px;
margin-top: 1rem;
border-radius: var(--border-radius);
border: 1px solid var(--highlight);
background: var(--map-bg);
overflow: hidden;
}
.map-note {
font-size: 0.85rem;
color: var(--muted-fg);
margin-top: 0.6em;
}
/* ---- Footer ------------------------------------------------------------ */
footer.site-footer {
background-color: var(--accent-bg-light);
color: var(--secondary-fg);
padding: 1.2em 1rem 0.8em;
font-size: 0.9rem;
text-align: center;
margin-top: 2rem;
}
footer.site-footer a { color: var(--footer-link); }
footer.site-footer a:hover { color: #ffffff; }
footer.site-footer p { margin: 0.45em 0; overflow-wrap: anywhere; }
footer.site-footer .footer-icon { vertical-align: middle; }
/* The WIFI string below is a deliberate puzzle, not a rendering glitch.
.easter-egg keeps it visually quiet and it is labelled in the markup. */
.easter-egg {
display: block;
margin: 0.3em auto 0;
max-width: 48rem;
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
font-size: 0.8em;
color: var(--footer-link);
opacity: 0.85;
overflow-wrap: anywhere;
}
.contact-email {
color: var(--footer-link);
text-decoration: underline;
font-weight: 500;
}
.contact-email:hover { color: #ffffff; }
/* ---- Small screens (no horizontal scroll at 400px) --------------------- */
@media (max-width: 480px) {
header.site-header { padding: 0.9em 1em 0.4em; }
.site-header .banner { font-size: 1.2em; }
.site-header .banner img { height: 32px; }
nav.site-nav { gap: 0.15em 0.75em; }
nav.site-nav a { font-size: 0.9rem; }
h1 { font-size: 1.5rem; }
main { margin: 1rem auto; padding-inline: 1rem; }
.card, .cta { padding: 1rem; }
.item { padding: 0.9rem; }
.map-holder { height: 220px; }
}
@media (prefers-reduced-motion: reduce) {
* { transition: none !important; animation: none !important; }
}
/* Screen-reader-only text: used for "(opens in a new tab)" suffixes.
Kept identical to the definition in /styles.css. */
.visually-hidden {
position: absolute !important;
width: 1px; height: 1px;
margin: -1px; padding: 0;
overflow: hidden;
clip: rect(0 0 0 0);
clip-path: inset(50%);
white-space: nowrap;
border: 0;
}
/* --- Embedded wiki calendar --------------------------------------------- */
.wiki-frame {
display: block;
width: 100%;
/* Tall enough to show several rows without swallowing the whole screen. */
height: clamp(420px, 75vh, 900px);
margin: 1rem 0 0.6rem;
border: 1px solid var(--border);
border-radius: var(--border-radius);
background: var(--frame-bg);
}
@media (max-width: 600px) {
/* On a phone the wiki's own layout needs more vertical room to be usable,
and the "read it on the wiki" link below is the better route anyway. */
.wiki-frame { height: 70vh; }
}