/* * cursedwalking.css — theme layer for the "Very Cool Cursed Walking Server" branch. * * Loads AFTER stylesheets/extra.css (the shared functional CSS). Everything * layout-wise (server status card, activity panel, announcements, * spoiler component, modlist chips) is already handled there and reads * from Material's CSS variables — so redefining those variables shifts * the whole site's palette in one place. * * This file only does what the shared CSS can't: * 1. Redefine palette variables (both dark and light modes). * 2. Swap in a display face (Big Shoulders Display) for large headers. * 3. Style the Emergency Broadcast strip (signature element). * 4. Add a subtle accent to announcements and warning admonitions. * * Design language: modern public-safety signage — hazard tape, * quarantine posters, EAS broadcasts. Not fantasy zombie, not gothic. */ /* Display font for large headers only. */ @import url("https://fonts.googleapis.com/css2?family=Big+Shoulders+Display:wght@500;700&display=swap"); /* ========================================================================= * 1. THEME PALETTE * ========================================================================= * Shared branch tokens — same names across both schemes so component * rules below don't need to branch on mode. */ :root { --cw-hazard: #f0b429; /* signature yellow, warning signage */ --cw-hazard-strong: #f8c249; --cw-signal: #b02a2a; /* dried-blood red, critical only */ --cw-rust: #c67328; /* warm accent */ --cw-toxic: #8fa049; /* dulled infection green, info only */ } /* Dark theme (default) — asphalt and bone. */ [data-md-color-scheme="slate"] { --md-default-bg-color: #141513; /* asphalt */ --md-default-fg-color: #e6e2d6; /* bone paper */ --md-default-fg-color--light: #9a9689; /* ash */ --md-default-fg-color--lighter: #5f5d54; --md-default-fg-color--lightest: #3a3b34; /* worn metal */ --md-typeset-color: #e6e2d6; --md-typeset-a-color: var(--cw-hazard); --md-primary-fg-color: #0e0f0d; /* header — hair darker than bg */ --md-primary-fg-color--light: #1a1b18; --md-primary-fg-color--dark: #050605; --md-primary-bg-color: #e6e2d6; --md-primary-bg-color--light: #9a9689; --md-accent-fg-color: var(--cw-hazard-strong); /* links on hover, active states */ --md-accent-fg-color--transparent: rgba(240, 180, 41, 0.12); --md-accent-bg-color: #0e0f0d; --md-code-bg-color: #0f100e; --md-code-fg-color: #d6d1c2; --md-footer-bg-color: #0a0b09; --md-footer-bg-color--dark: #050605; } /* Light theme — aged notice paper. */ [data-md-color-scheme="default"] { --md-default-bg-color: #e9e4d3; /* paper */ --md-default-fg-color: #1c1d19; --md-default-fg-color--light: #5a5850; --md-default-fg-color--lighter: #7a7768; --md-default-fg-color--lightest: #c1bba4; --md-typeset-color: #1c1d19; --md-typeset-a-color: #a3491a; /* burnt umber for paper contrast */ --md-primary-fg-color: #1c1d19; --md-primary-fg-color--light: #2c2d28; --md-primary-fg-color--dark: #0e0f0d; --md-primary-bg-color: #e9e4d3; --md-primary-bg-color--light: #5a5850; --md-accent-fg-color: #a3491a; --md-accent-fg-color--transparent: rgba(163, 73, 26, 0.1); --md-accent-bg-color: #e9e4d3; --md-code-bg-color: #ded9c6; --md-code-fg-color: #1c1d19; } /* ========================================================================= * 2. TYPOGRAPHY * ========================================================================= * Body stays on Inter (set in mkdocs.yml theme.font.text) — long-form copy * needs to be readable. Only large headers get the display face, and only * where they're actually large enough to earn a character font. */ .md-typeset h1, .md-typeset h2, .md-typeset h3 { font-family: "Big Shoulders Display", "Roboto Condensed", ui-sans-serif, system-ui, sans-serif; font-weight: 700; letter-spacing: 0.01em; } .md-typeset h1 { font-size: 2.4rem; line-height: 1.05; text-transform: uppercase; } .md-typeset h2 { font-size: 1.55rem; text-transform: uppercase; letter-spacing: 0.02em; margin-top: 2.2em; padding-top: 0.3em; border-top: 1px solid var(--md-default-fg-color--lightest); } .md-typeset h3 { font-size: 1.15rem; letter-spacing: 0.03em; text-transform: uppercase; } /* ========================================================================= * 3. SIGNATURE ELEMENT — EMERGENCY BROADCAST STRIP * ========================================================================= * Sits between the H1 and the server status card on the home page. * Populated by the inline day-counter script in docs/index.md. */ .eas-strip { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6em; margin: 1.2rem 0 2rem; padding: 0.55rem 0.9rem; border-top: 1px solid var(--cw-hazard); border-bottom: 1px solid var(--cw-hazard); background: linear-gradient( 90deg, rgba(240, 180, 41, 0.06) 0%, rgba(240, 180, 41, 0.02) 100% ); font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.78rem; color: var(--md-default-fg-color); text-transform: uppercase; letter-spacing: 0.14em; line-height: 1.5; } .eas-strip .eas-mark { color: var(--cw-hazard); font-weight: 700; } .eas-strip .eas-field { color: var(--md-default-fg-color--light); } .eas-strip .eas-day { color: var(--md-default-fg-color); font-weight: 700; } .eas-strip .eas-day [data-day] { color: var(--cw-hazard); padding: 0 0.15em; } /* Subtle blink on the trailing time — ambient, not attention-seeking. * Respects the OS reduce-motion preference. */ @media (prefers-reduced-motion: no-preference) { .eas-strip .eas-field:last-of-type [data-time] { animation: eas-pulse 3s ease-in-out infinite; } } @keyframes eas-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.55; } } /* ========================================================================= * 4. ANNOUNCEMENT ACCENT (works with shared script.js's real classes) * ========================================================================= * The shared script.js emits `details.announcement` inside * `#announcement > .announcements-list`. Base styles come from extra.css; * we add a subtle left border in signal-red so announcements read like * broadcast alerts without disrupting the summary/chevron layout. */ #announcement details.announcement { border-left: 3px solid var(--cw-signal); } #announcement details.announcement:hover { border-left-color: var(--cw-hazard); } /* ========================================================================= * 5. WARNING ADMONITIONS — subtle hazard-tape treatment * ========================================================================= */ .md-typeset .admonition.warning > .admonition-title, .md-typeset details.warning > summary { background: repeating-linear-gradient( -45deg, rgba(240, 180, 41, 0.14) 0 8px, rgba(240, 180, 41, 0.04) 8px 16px ); } /* ========================================================================= * 6. TAB LABELS — pick up the display font on the install page * ========================================================================= * pymdownx.tabbed alternate style uses