/* * Web fonts for the 'zombie' theme (Creepster for the wordmark, Oswald for * headings/labels). An @import must come first in the file; the font FILES * only download on pages whose active theme actually uses these families, * so paper/dark/playful pay one tiny CSS fetch and nothing more. */ @import url('https://fonts.googleapis.com/css2?family=Creepster&family=Oswald:wght@400;500;600;700&display=swap'); /* * Shipped themes. Each theme is one block that re-sets the tokens declared * in style.css — nothing else. Pick one with siteConfig.theme in * firebase-config.js ('paper' | 'dark' | 'playful' | 'zombie'); theme.js * stamps it on . * * To make your own theme, copy a block, rename it, and change the values. * To tweak a shipped theme, override individual tokens after this file: * [data-theme="dark"] { --accent: #7dd3a0; } */ /* * A theme also sets how the site MOVES — the motion tokens (--dur*, --ease, * --lift, --press, --rise) are re-tuned per theme just like the colours. * 'paper' is the quietest on purpose: print doesn't bounce. */ /* 'paper' is the default: its tokens live on :root in style.css. */ [data-theme="paper"] { /* alias of the defaults */ } /* * dark — "evening chalkboard": deep green-black board, chalk-white text, * a warm lamp-amber accent. Flat, quiet, easy on the eyes. */ [data-theme="dark"] { --bg: #151b17; --surface: #1d2620; --surface-2: #263129; --border: #33403a; --border-strong: #4b5a4f; --text: #e7e4d8; --muted: #9aa596; --danger: #e07c74; --accent: #dfa63f; --accent-hover: #ecbb5e; --on-accent: #241a05; --accent-soft: #2b2b1e; --ok-bg: #24382a; --ok-text: #b5d2a4; --warn-bg: #3a3122; --warn-text: #e3c37c; --shadow: none; --shadow-btn: none; --hero-rule: 2px dashed var(--border-strong); /* a chalk line */ /* Motion: unhurried, like writing on a board at night. Everything else (the lift, the easing) is inherited from the defaults. */ --dur: 240ms; --dur-slow: 500ms; } /* * playful — "sticker sheet": light periwinkle paper, thick ink outlines, * hard offset shadows, a coral accent, rounded type. Loud on purpose. */ [data-theme="playful"] { --bg: #edf1fb; --surface: #ffffff; --surface-2: #e2e8f8; --border: #1d1a33; /* ink outlines everywhere */ --border-strong: #1d1a33; --text: #1d1a33; --muted: #5c5876; --danger: #d92662; --accent: #ff5470; --accent-hover: #e63e5c; --on-accent: #ffffff; --accent-soft: #ffe9a3; /* callouts go sunny yellow */ --ok-bg: #baf2c5; --ok-text: #124a26; --warn-bg: #ffe9a3; --warn-text: #6b4e00; --line: 2px; --radius: 12px; --radius-sm: 9px; --shadow: 3px 3px 0 #1d1a33; --shadow-btn: 2px 2px 0 #1d1a33; --hero-rule: 4px solid #1d1a33; --font-display: ui-rounded, 'SF Pro Rounded', 'Segoe UI', system-ui, sans-serif; --font-body: system-ui, -apple-system, 'Segoe UI', sans-serif; /* Motion: springy. The easing overshoots slightly, things lift off the page on hover and get pressed back into it on click. */ --dur-quick: 120ms; --dur: 240ms; --ease: cubic-bezier(0.34, 1.56, 0.64, 1); --lift: 2px; --press: 2px; --rise: 14px; } /* Playful buttons keep their ink outline (transparent elsewhere) — and a link that is a button (a.button-link: the header's controls, a notice's actions) is the same object, so it is dressed with them. */ [data-theme="playful"] button, [data-theme="playful"] a.button-link { border-color: var(--border); } [data-theme="playful"] button:disabled { border-color: var(--muted); } /* Sticker physics: the hard shadow grows as a button lifts and disappears as it is pressed flat against the page. */ [data-theme="playful"] button:hover:not(:disabled), [data-theme="playful"] a.button-link:hover { box-shadow: 4px 4px 0 var(--border); } [data-theme="playful"] button:active:not(:disabled), [data-theme="playful"] a.button-link:active { box-shadow: 0 0 0 var(--border); } /* The file picker's own button is a pseudo-element, so no `button` rule above reaches it. It gets the same physics in its own rule — and it must stay its own rule: `:not()` after a pseudo-element is invalid and would kill the whole comma list it joined. */ [data-theme="playful"] input[type="file"]::file-selector-button:hover { box-shadow: 4px 4px 0 var(--border); } [data-theme="playful"] input[type="file"]::file-selector-button:active { box-shadow: 0 0 0 var(--border); } [data-theme="playful"] assessment-link:hover { box-shadow: 5px 5px 0 var(--border); } /* * zombie — "survival bulletin": bone-white paper with a faint mold tint, * forest-green command band, blood-red hover, barbed wire under the course * title. Built for the BUS 3420 Zombie Survival Academy: Creepster for the * wordmark and title only, Oswald (condensed, stencil-adjacent) for every * heading and button, a clean sans for reading. Green is the action color; * red is what happens when you touch it. */ [data-theme="zombie"] { --bg: #eef0e2; --surface: #faf9f0; --surface-2: #e3e6d2; --border: #d0d4bb; --border-strong: #8f9877; --text: #1e2418; --muted: #626b52; --danger: #8f1d1d; --accent: #2f4d24; /* forest green — actions, links */ --accent-hover: #871616; /* …that bleed on hover, like her site's buttons */ --on-accent: #e9f2dc; --accent-soft: #e2e9d3; --ok-bg: #dbe6c8; --ok-text: #33511f; --warn-bg: #f0e3bd; --warn-text: #6b5310; --line: 1.5px; --radius: 7px; --radius-sm: 4px; --shadow: 0 2px 10px rgba(30, 36, 24, 0.1); --shadow-btn: none; --hero-rule: 3px solid var(--border-strong); /* replaced by barbed wire below */ --font-display: 'Oswald', 'Avenir Next Condensed', 'Arial Narrow', system-ui, sans-serif; --font-body: system-ui, -apple-system, 'Segoe UI', sans-serif; --font-ui: system-ui, -apple-system, 'Segoe UI', sans-serif; --font-zombie: 'Creepster', 'Oswald', 'Arial Narrow', sans-serif; /* The command band across the top of every page (used by the header rules below): deeper green than the accent, pale-green ink. */ --z-band: #2c471f; --z-band-edge: #3c5c2e; --z-band-deep: #22381a; --z-band-ink: #e9f2dc; --z-band-ink-soft: #b9c9a4; --z-band-title: #c8e6b0; /* Motion: a lurch — slow wind-up, sudden arrival. Rises travel farther. */ --dur-quick: 130ms; --dur: 260ms; --dur-slow: 560ms; --ease: cubic-bezier(0.5, 0, 0.15, 1); --lift: 2px; --press: 2px; --rise: 18px; } /* The header is the dark-green command band from her site. Re-pointing the tokens inside it repaints everything the header holds — background, links, secondary buttons, and the built-in ticket mark (drawn in --on-accent on --accent) — without touching a single rule in style.css. */ [data-theme="zombie"] header { color: var(--z-band-ink); --surface: var(--z-band); --surface-2: var(--z-band-deep); --border: var(--z-band-edge); --border-strong: var(--z-band-ink-soft); --text: var(--z-band-ink); --muted: var(--z-band-ink-soft); --accent: var(--z-band-title); --on-accent: var(--z-band); } /* Creepster is rationed: the wordmark, the page title in the band, the sign-in lockup, and the course title. Everything else stays Oswald. */ [data-theme="zombie"] .brand, [data-theme="zombie"] header h1 { font-family: var(--font-zombie); font-weight: 400; font-size: 19px; letter-spacing: 0.05em; } [data-theme="zombie"] #signin .brand-lockup { font-family: var(--font-zombie); font-weight: 400; font-size: 26px; letter-spacing: 0.05em; color: var(--accent); } [data-theme="zombie"] .hero h1 { font-family: var(--font-zombie); font-weight: 400; letter-spacing: 0.04em; color: var(--accent); text-shadow: 3px 3px 0 var(--accent-soft); /* her hard offset shadow, in daylight */ } /* Barbed wire under the course title: a 12px strip — one horizontal wire, a barb every 24px — replaces the hero rule. Pure gradient, no images. */ [data-theme="zombie"] .hero { border-bottom: none; padding-bottom: 36px; background: repeating-linear-gradient(90deg, var(--border-strong) 0 3px, transparent 3px 24px) left bottom / 100% 12px no-repeat, linear-gradient(180deg, transparent 0 4.5px, var(--border-strong) 4.5px 7.5px, transparent 7.5px 12px) left bottom / 100% 12px no-repeat; } /* Oswald's condensed caps are the mission-briefing voice: buttons, kickers, and card headings get it. (Score cells and table buttons reset their own fonts, so the gradebook's data stays in the reading face.) */ [data-theme="zombie"] button, [data-theme="zombie"] a.button-link, [data-theme="zombie"] input[type="file"]::file-selector-button, [data-theme="zombie"] .gb-options > summary { font-family: var(--font-display); font-weight: 500; letter-spacing: 0.06em; } [data-theme="zombie"] .eyebrow { font-family: var(--font-display); font-weight: 500; letter-spacing: 0.22em; } [data-theme="zombie"] .card h2 { text-transform: uppercase; letter-spacing: 0.1em; font-size: 15.5px; font-weight: 600; }