/* ============================================================ despair.jp — alternate theme explorations Applied via . No attribute = glitch (default). ============================================================ */ /* ---------------------------------------------------------- */ /* GRUNGE — warm ink, old-press serif, heavy grain, rust red */ /* ---------------------------------------------------------- */ html[data-theme="grunge"] { --bg: #0d0b09; --bg2: #14100d; --ink: #d8d2c4; --dim: #7a7265; --line: rgba(216, 210, 196, 0.12); --red: #b3402e; --cyan: #b3402e; /* no rgb-split colors in this theme */ --font-display: "IM Fell English", serif; } html[data-theme="grunge"] .hero h1 { font-style: italic; letter-spacing: -0.02em; text-transform: lowercase; } html[data-theme="grunge"] .noise { opacity: 0.11; } html[data-theme="grunge"] .scanlines { display: none; } html[data-theme="grunge"] .glitch.is-glitching::before, html[data-theme="grunge"] .glitch.is-glitching::after { animation: none; opacity: 0; } html[data-theme="grunge"] .hero h1 { text-shadow: 0 0 38px rgba(179, 64, 46, 0.25); } html[data-theme="grunge"] .section h2 { font-style: italic; } html[data-theme="grunge"] .piece-btn { border-color: rgba(216, 210, 196, 0.16); } html[data-theme="grunge"] .piece-btn img { filter: sepia(0.14) grayscale(0.2) contrast(1.02); } html[data-theme="grunge"] .piece-btn:hover img, html[data-theme="grunge"] .piece-btn:focus-visible img { filter: none; animation: none; } html[data-theme="grunge"] .topbar-nav a:hover, html[data-theme="grunge"] .contact-links a:hover { text-shadow: none; color: var(--red); } html[data-theme="grunge"] .marquee-track { font-style: italic; font-family: var(--font-display); letter-spacing: 0.18em; } /* ---------------------------------------------------------- */ /* BRUTALIST — pure black/white, hard borders, zero texture */ /* ---------------------------------------------------------- */ html[data-theme="brutalist"] { --bg: #000000; --bg2: #000000; --ink: #ffffff; --dim: #888888; --line: rgba(255, 255, 255, 0.35); --red: #ff0000; --cyan: #ff0000; } html[data-theme="brutalist"] body { cursor: default; } html[data-theme="brutalist"] .noise, html[data-theme="brutalist"] .scanlines { display: none; } html[data-theme="brutalist"] .hero h1 { text-transform: uppercase; letter-spacing: -0.01em; } html[data-theme="brutalist"] .glitch.is-glitching::before, html[data-theme="brutalist"] .glitch.is-glitching::after { animation: none; opacity: 0; } html[data-theme="brutalist"] .topbar { border-bottom: 2px solid var(--ink); backdrop-filter: none; background: #000; } html[data-theme="brutalist"] .marquee { border-top: 2px solid var(--ink); border-bottom: 2px solid var(--ink); } html[data-theme="brutalist"] .marquee-track { color: var(--ink); animation-duration: 18s; } html[data-theme="brutalist"] .section-head { border-bottom: 2px solid var(--ink); } html[data-theme="brutalist"] .section h2 { text-transform: uppercase; } html[data-theme="brutalist"] .filter-btn.is-active { text-shadow: none; color: #000; background: var(--ink); } html[data-theme="brutalist"] .piece-btn { border: 2px solid var(--ink); background: #000; } html[data-theme="brutalist"] .piece-btn img { filter: none; transition: none; } html[data-theme="brutalist"] .piece-btn:hover img, html[data-theme="brutalist"] .piece-btn:focus-visible img { animation: none; transform: none; } html[data-theme="brutalist"] .piece-btn:hover, html[data-theme="brutalist"] .piece-btn:focus-visible { border-color: var(--red); } html[data-theme="brutalist"] .piece figcaption { background: var(--ink); transform: none; } html[data-theme="brutalist"] .piece figcaption .p-title { color: #000; } html[data-theme="brutalist"] .piece figcaption .p-cat { color: var(--red); } html[data-theme="brutalist"] .reveal { opacity: 1; transform: none; transition: none; } html[data-theme="brutalist"] .topbar-nav a:hover, html[data-theme="brutalist"] .contact-links a:hover { text-shadow: none; color: var(--red); } html[data-theme="brutalist"] .cue-line { background: var(--ink); animation: none; height: 2rem; } html[data-theme="brutalist"] .footer { border-top: 2px solid var(--ink); } html[data-theme="brutalist"] .contact-mail { border-bottom-width: 4px; } /* ---------------------------------------------------------- */ /* GOTHIC — blackletter, deep blood red, candlelit vignette */ /* ---------------------------------------------------------- */ html[data-theme="gothic"] { --bg: #060309; --bg2: #0b060d; --ink: #e6dfe8; --dim: #6d6273; --line: rgba(230, 223, 232, 0.1); --red: #c00021; --cyan: #c00021; --font-display: "Pirata One", serif; } html[data-theme="gothic"] .hero { background: radial-gradient(ellipse at 50% 42%, rgba(192, 0, 33, 0.09), transparent 55%); } html[data-theme="gothic"] .hero h1 { letter-spacing: 0.03em; text-shadow: 0 0 46px rgba(192, 0, 33, 0.5); } html[data-theme="gothic"] .scanlines { display: none; } html[data-theme="gothic"] .noise { opacity: 0.04; } html[data-theme="gothic"] .glitch.is-glitching::before, html[data-theme="gothic"] .glitch.is-glitching::after { animation: none; opacity: 0; } html[data-theme="gothic"] .section h2 { letter-spacing: 0.04em; } html[data-theme="gothic"] .marquee-track { font-family: var(--font-display); font-size: 0.95rem; letter-spacing: 0.22em; } html[data-theme="gothic"] .piece-btn { border-color: rgba(192, 0, 33, 0.25); } html[data-theme="gothic"] .piece-btn:hover, html[data-theme="gothic"] .piece-btn:focus-visible { border-color: rgba(192, 0, 33, 0.7); box-shadow: 0 0 26px rgba(192, 0, 33, 0.22); } html[data-theme="gothic"] .piece-btn:hover img, html[data-theme="gothic"] .piece-btn:focus-visible img { animation: none; } html[data-theme="gothic"] .p-cat { color: var(--red); } html[data-theme="gothic"] .topbar-nav a:hover, html[data-theme="gothic"] .contact-links a:hover { text-shadow: 0 0 12px rgba(192, 0, 33, 0.8); color: var(--ink); } html[data-theme="gothic"] .contact-mail { text-shadow: 0 0 30px rgba(192, 0, 33, 0.35); }