/* ============================================================= themes.css — ALL themes in one file, attribute-scoped. Switch by setting . No stylesheet swapping, no relative paths. Bare :root == ata (no-JS default). Keys: ata micf ta msit ep hellyes bw crimson remains SPARSE-DIFF CONVENTION (2026-07-03): The ata block defines the COMPLETE token set and doubles as the default for every theme — bare :root matches all of them, and a :root[data-theme="x"] block (0,2,0) overrides it only for the tokens it defines. Every other theme block therefore lists ONLY the tokens it changes; anything omitted resolves to ata's value. • To change a value for ONE theme: add/edit it in that block. • To change the default for ALL sparse themes: edit the ata block. • To add a NEW token: define it in ata first, override as needed. Equality of every theme x token pair against the previous full blocks was machine-verified when this restructure shipped. Hoisted to root_variables.css on 2026-06-20 (identical across all themes; they resolve against the active theme's colour vars): --font-colour_black --font-colour_white --gallery-title_main --link-colour_active --link-colour_focus --sidebar-menu_icons --sidebar-menu_icons_active --sidebar-menu_icons_focus --mobile-menu-icon-filter-pressed Also removed from every theme back then: --black --white --transparent (live in root_variables.css) and the unused --gallery-title_font, --sidebar-font_colour, --sidebar-font_colour_hover, --sales-border-light, --sales-status-good-border. ============================================================= */ /* ---------- ata (DEFAULT — complete token set) ---------- */ :root, :root[data-theme="ata"] { --bg-image: url(/images/theme/bg_ata.webp); --logo-colour: hue-rotate(0deg); --main-colour_clear: rgba(175, 0, 2, 0.10); --main-colour: rgba(175, 0, 2, 0.60); --secondary-colour: rgba(20, 20, 20, 0.5); --bg-colour: rgba(37, 0, 0, 1); --menu-colour: rgba(17, 17, 17, 1); --border-colour: var(--black); --font-colour_offwhite: rgba(241, 241, 241, 1); --font-colour_grey: rgba(129, 129, 129, 1); --font-colour_lightgrey: rgba(150, 150, 150, 1); --link-colour: rgba(255, 0, 0, 1); --link-colour_hover: rgba(255, 149, 150, 1); --link-colour_visited: rgba(177, 54, 56, 1); --sidebar-bg_colour: var(--menu-colour); --sidebar-close_btn: rgba(49, 49, 49, 1); --sidebar-open_btn: rgba(68, 68, 68, 1); --sidebar-hr_solid: rgba(165, 42, 42, 1); --sidebar-dropdown_focus: rgba(158, 0, 0, 1); --sidebar-dropdown_nofocus: rgba(78, 0, 0, 1); --sidebar-menu_bg1: rgba(38, 38, 38, 1); --sidebar-menu_bg2: rgba(50, 50, 50, 1); --sidebar-menu_icons_hover: var(--font-colour_offwhite); /* Mobile menu icon filters (for PNG images) */ --mobile-menu-icon-filter: brightness(0) invert(1) sepia(0.5) saturate(3) hue-rotate(340deg); --mobile-menu-icon-filter-hover: brightness(0) invert(1) sepia(1) saturate(5) hue-rotate(340deg); --mobile-menu-icon-filter-active: brightness(0) invert(1) sepia(1) saturate(10) hue-rotate(340deg); --mobile-menu-icon-filter-focus: brightness(0) invert(1) sepia(0.5) saturate(3) hue-rotate(340deg); --gallery-title_secondary: rgba(91, 91, 91, 0.60); --gallery-font_shadow: var(--link-colour); --desc-bg: rgba(42, 10, 11, 0.60); --desc-tracklist: rgba(148, 148, 148, 1); --desc-border-style: var(--border-width-thin) solid var(--sales-light-red); --lightbox-bg: rgba(32, 0, 0, 0.7); /* === Sales & Trivia page variables === */ --sales-red: #a00; --sales-dark-bg: rgba(0, 0, 0, 0.7); --sales-hover-red: rgba(160, 0, 0, 0.5); --sales-light-red: rgba(160, 0, 0, 0.3); --sales-hover-overlay: rgba(160, 0, 0, 0.1); --sales-price-green: #4caf50; --sales-price-red: #d71515; --sales-price-green-hover: #0e6b0e; --sales-price-red-hover: #880606; --sales-status-good: rgba(76, 175, 80, 0.2); --sales-error-red: #ff6b6b; --sales-spinner-border: var(--sales-red); --sales-spinner-top: var(--white); /* changed to var(--white); was #fff */ --sales-white: var(--white); /* changed to var(--white); was #fff */ --sales-black: var(--black); /* changed to var(--black); was #000 */ --sales-text-primary: #e0e0e0; --sales-text-secondary: #ccc; --sales-text-tertiary: #bbb; --sales-text-muted: #888; --sales-text-dark: #666; --sales-bright-red: #c00; --sales-dark-red: #800; --sales-bg-overlay: rgba(0, 0, 0, 0.5); --sales-bg-lightbox: rgba(0, 0, 0, 0.9); --sales-copy-success: #4caf50; --sales-border-subtle: #333; --sales-text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.7); --sales-box-shadow: 0 0 30px rgba(160, 0, 0, 0.8); --sales-lightbox-arrow-bg: rgba(255, 255, 255, 0.2); --sales-lightbox-arrow-hover: rgba(255, 255, 255, 0.4); --sales-lightbox-text: var(--white); /* changed to var(--white); was #fff */ } /* ---------- micf (diffs vs ata) ---------- */ :root[data-theme="micf"] { --bg-image: url(/images/theme/bg_micf.webp); --logo-colour: hue-rotate(50deg); --main-colour_clear: rgba(255, 85, 0, 0.10); --main-colour: rgba(255, 85, 0, 0.60); --secondary-colour: rgba(26, 13, 0, 0.5); --bg-colour: rgba(51, 26, 0, 1); --menu-colour: rgba(34, 17, 0, 1); --border-colour: rgba(17, 8, 0, 1); --font-colour_offwhite: rgba(255, 216, 177, 1); --font-colour_grey: rgba(179, 107, 0, 1); --font-colour_lightgrey: rgba(200, 128, 21, 1); --link-colour: rgba(255, 102, 0, 1); --link-colour_hover: rgba(255, 153, 102, 1); --link-colour_visited: rgba(204, 82, 0, 1); --sidebar-bg_colour: rgba(34, 17, 0, 1); --sidebar-close_btn: rgba(102, 68, 34, 1); --sidebar-open_btn: rgba(136, 85, 51, 1); --sidebar-hr_solid: rgba(179, 89, 0, 1); --sidebar-dropdown_focus: rgba(255, 102, 0, 1); --sidebar-dropdown_nofocus: rgba(179, 59, 0, 1); --sidebar-menu_bg1: rgba(51, 26, 0, 1); --sidebar-menu_bg2: rgba(68, 34, 0, 1); /* Mobile menu icon filters (for PNG images) */ --mobile-menu-icon-filter: brightness(0) invert(1) sepia(0.5) saturate(3) hue-rotate(10deg); --mobile-menu-icon-filter-hover: brightness(0) invert(1) sepia(1) saturate(5) hue-rotate(10deg); --mobile-menu-icon-filter-active: brightness(0) invert(1) sepia(1) saturate(10) hue-rotate(10deg); --mobile-menu-icon-filter-focus: brightness(0) invert(1) sepia(0.5) saturate(3) hue-rotate(10deg); --desc-bg: rgba(85, 42, 0, 0.60); --desc-tracklist: rgba(179, 107, 0, 1); --lightbox-bg: rgba(39, 20, 0, 0.7); /* === Sales & Trivia page variables === */ --sales-red: rgba(255, 85, 0, 1); --sales-dark-bg: rgba(39, 20, 0, 0.7); --sales-hover-red: rgba(255, 150, 102, 0.7); --sales-light-red: rgba(255, 85, 0, 0.3); --sales-hover-overlay: rgba(255, 85, 0, 0.1); --sales-error-red: rgba(255, 153, 102, 1); --sales-spinner-top: rgba(255, 238, 221, 1); --sales-white: rgba(255, 255, 255, 1); --sales-black: rgba(0, 0, 0, 1); --sales-text-primary: rgba(255, 216, 177, 1); --sales-text-secondary: rgba(255, 238, 221, 1); --sales-text-tertiary: rgba(200, 128, 21, 1); --sales-text-muted: rgba(179, 107, 0, 1); --sales-text-dark: rgba(179, 107, 0, 1); --sales-bright-red: rgba(255, 153, 102, 1); --sales-dark-red: rgba(204, 82, 0, 1); --sales-bg-overlay: rgba(39, 20, 0, 0.5); --sales-bg-lightbox: rgba(39, 20, 0, 0.9); --sales-border-subtle: rgba(68, 34, 0, 1); --sales-box-shadow: 0 0 30px rgba(255, 85, 0, 0.8); --sales-lightbox-arrow-bg: rgba(255, 150, 102, 0.2); --sales-lightbox-arrow-hover: rgba(255, 150, 102, 0.4); --sales-lightbox-text: rgba(255, 238, 221, 1); } /* ---------- ta (diffs vs ata) ---------- */ :root[data-theme="ta"] { --bg-image: url(/images/theme/bg_ta.webp); --logo-colour: hue-rotate(90deg); --main-colour_clear: rgba(34, 85, 34, 0.10); --main-colour: rgba(34, 85, 34, 0.60); --secondary-colour: rgba(15, 15, 15, 0.5); --bg-colour: rgba(0, 26, 0, 1); --menu-colour: rgba(26, 26, 26, 1); --border-colour: rgba(13, 13, 13, 1); --font-colour_offwhite: rgba(230, 230, 230, 1); --font-colour_grey: rgba(107, 107, 107, 1); --font-colour_lightgrey: rgba(128, 128, 128, 1); --link-colour: rgba(74, 106, 74, 1); --link-colour_hover: rgba(127, 168, 127, 1); --link-colour_visited: rgba(47, 79, 47, 1); --sidebar-bg_colour: rgba(26, 26, 26, 1); --sidebar-close_btn: rgba(58, 58, 58, 1); --sidebar-open_btn: rgba(82, 82, 82, 1); --sidebar-hr_solid: rgba(75, 75, 75, 1); --sidebar-dropdown_focus: rgba(48, 74, 48, 1); --sidebar-dropdown_nofocus: rgba(32, 48, 32, 1); --sidebar-menu_bg1: rgba(42, 42, 42, 1); --sidebar-menu_bg2: rgba(58, 58, 58, 1); /* Mobile menu icon filters (for PNG images) */ --mobile-menu-icon-filter: brightness(0) invert(1) sepia(0.5) saturate(2) hue-rotate(80deg); --mobile-menu-icon-filter-hover: brightness(0) invert(1) sepia(1) saturate(3) hue-rotate(80deg); --mobile-menu-icon-filter-active: brightness(0) invert(1) sepia(1) saturate(5) hue-rotate(80deg); --mobile-menu-icon-filter-focus: brightness(0) invert(1) sepia(0.5) saturate(2) hue-rotate(80deg); --gallery-title_secondary: rgba(75, 75, 75, 0.60); --gallery-font_shadow: rgba(74, 106, 74, 1); --desc-bg: rgba(10, 25, 10, 0.60); --desc-tracklist: rgba(127, 127, 127, 1); --lightbox-bg: rgba(0, 16, 0, 0.7); /* === Sales & Trivia page variables === */ --sales-red: rgba(34, 85, 34, 1); --sales-dark-bg: rgba(0, 26, 0, 0.7); --sales-hover-red: rgba(79, 168, 79, 0.7); --sales-light-red: rgba(34, 85, 34, 0.3); --sales-hover-overlay: rgba(34, 85, 34, 0.1); --sales-error-red: rgba(153, 204, 153, 1); --sales-spinner-top: rgba(230, 230, 230, 1); --sales-white: rgba(242, 242, 242, 1); --sales-black: rgba(0, 0, 0, 1); --sales-text-primary: rgba(230, 230, 230, 1); --sales-text-secondary: rgba(209, 209, 209, 1); --sales-text-tertiary: rgba(128, 128, 128, 1); --sales-text-muted: rgba(107, 107, 107, 1); --sales-text-dark: rgba(107, 107, 107, 1); --sales-bright-red: rgba(127, 168, 127, 1); --sales-dark-red: rgba(47, 79, 47, 1); --sales-bg-overlay: rgba(0, 26, 0, 0.5); --sales-bg-lightbox: rgba(0, 26, 0, 0.9); --sales-border-subtle: rgba(58, 58, 58, 1); --sales-box-shadow: 0 0 30px rgba(34, 85, 34, 0.8); --sales-lightbox-arrow-bg: rgba(127, 168, 127, 0.2); --sales-lightbox-arrow-hover: rgba(127, 168, 127, 0.4); --sales-lightbox-text: rgba(230, 230, 230, 1); } /* ---------- msit (diffs vs ata) ---------- */ :root[data-theme="msit"] { --bg-image: url(/images/theme/bg_msit.webp); --logo-colour: hue-rotate(-45deg); --main-colour_clear: rgba(204, 102, 255, 0.10); --main-colour: rgba(255, 102, 204, 0.60); --secondary-colour: rgba(88, 0, 69, 0.5); --bg-colour: rgba(20, 24, 45, 1); --menu-colour: rgba(15, 15, 25, 1); --border-colour: rgb(17, 17, 20); --font-colour_lightgrey: rgba(180, 180, 180, 1); --link-colour: rgba(255, 51, 153, 1); --link-colour_hover: rgba(102, 178, 255, 1); --link-colour_visited: rgba(177, 90, 136, 1); --sidebar-bg_colour: rgba(15, 15, 25, 1); --sidebar-close_btn: rgba(80, 80, 80, 1); --sidebar-open_btn: rgba(100, 100, 100, 1); --sidebar-hr_solid: rgba(175, 94, 94, 1); --sidebar-dropdown_focus: rgba(255, 102, 153, 1); --sidebar-dropdown_nofocus: rgba(51, 51, 102, 1); --sidebar-menu_bg1: rgba(38, 38, 58, 1); --sidebar-menu_bg2: rgba(50, 50, 70, 1); /* Mobile menu icon filters (for PNG images) */ --mobile-menu-icon-filter: brightness(0) invert(1) sepia(0.5) saturate(2) hue-rotate(280deg); --mobile-menu-icon-filter-hover: brightness(0) invert(1) sepia(1) saturate(3) hue-rotate(280deg); --mobile-menu-icon-filter-active: brightness(0) invert(1) sepia(1) saturate(5) hue-rotate(280deg); --mobile-menu-icon-filter-focus: brightness(0) invert(1) sepia(0.5) saturate(2) hue-rotate(280deg); --gallery-title_secondary: rgba(120, 120, 150, 0.60); --gallery-font_shadow: rgba(204, 102, 255, 1); --desc-bg: rgba(42, 30, 51, 0.60); --lightbox-bg: rgba(20, 15, 40, 0.7); /* === Sales & Trivia page variables === */ --sales-red: rgba(255, 102, 204, 1); --sales-dark-bg: rgba(20, 15, 40, 0.7); --sales-hover-red: rgba(102, 178, 255, 0.7); --sales-light-red: rgba(255, 102, 204, 0.3); --sales-hover-overlay: rgba(255, 102, 204, 0.1); --sales-error-red: #ff99cc; --sales-spinner-top: #fff; --sales-white: #fff; --sales-black: #000; --sales-bright-red: rgba(102, 178, 255, 1); --sales-dark-red: rgba(51, 51, 102, 1); --sales-bg-overlay: rgba(20, 15, 40, 0.5); --sales-bg-lightbox: rgba(20, 15, 40, 0.9); --sales-box-shadow: 0 0 30px rgba(255, 102, 204, 0.8); --sales-lightbox-text: #fff; } /* ---------- ep (diffs vs ata) ---------- */ :root[data-theme="ep"] { --bg-image: url(/images/theme/bg_ep.webp); --logo-colour: hue-rotate(200deg); --main-colour_clear: rgba(34, 115, 160, 0.10); --main-colour: rgba(34, 115, 160, 0.75); --bg-colour: rgba(10, 10, 10, 1); --menu-colour: rgba(25, 25, 25, 0.95); --font-colour_offwhite: rgba(220, 220, 220, 1); --font-colour_grey: rgba(130, 130, 130, 1); --font-colour_lightgrey: rgba(151, 151, 151, 1); --link-colour: rgba(0, 120, 255, 1); --link-colour_hover: rgba(150, 200, 255, 1); --link-colour_visited: rgba(0, 80, 180, 1); --sidebar-close_btn: rgba(50, 50, 50, 1); --sidebar-open_btn: rgba(70, 70, 70, 1); --sidebar-hr_solid: rgba(200, 100, 0, 1); --sidebar-dropdown_focus: rgba(200, 100, 0, 1); --sidebar-dropdown_nofocus: rgba(120, 60, 0, 1); --sidebar-menu_bg1: rgba(40, 40, 40, 1); /* Mobile menu icon filters (for PNG images) */ --mobile-menu-icon-filter: brightness(0) invert(1) sepia(0.5) saturate(3) hue-rotate(20deg); --mobile-menu-icon-filter-hover: brightness(0) invert(1) sepia(1) saturate(5) hue-rotate(20deg); --mobile-menu-icon-filter-active: brightness(0) invert(1) sepia(1) saturate(10) hue-rotate(20deg); --mobile-menu-icon-filter-focus: brightness(0) invert(1) sepia(0.5) saturate(3) hue-rotate(20deg); --desc-bg: rgba(25, 25, 25, 0.60); --desc-tracklist: rgba(150, 150, 150, 1); --lightbox-bg: rgba(15, 15, 15, 0.7); /* === Sales & Trivia page variables === */ --sales-red: rgba(34, 115, 160, 1); --sales-hover-red: rgba(200, 100, 0, 0.7); --sales-light-red: rgba(34, 115, 160, 0.3); --sales-hover-overlay: rgba(34, 115, 160, 0.1); --sales-error-red: #ff9966; --sales-spinner-top: #fff; --sales-white: #fff; --sales-black: #000; --sales-bright-red: rgba(200, 100, 0, 1); --sales-dark-red: rgba(120, 60, 0, 1); --sales-box-shadow: 0 0 30px rgba(34, 115, 160, 0.8); --sales-lightbox-text: #fff; } /* ---------- hellyes (diffs vs ata) ---------- */ :root[data-theme="hellyes"] { --bg-image: url(/images/theme/bg_hellyes.webp); --logo-colour: hue-rotate(60deg) brightness(4); --main-colour_clear: rgba(255, 87, 34, 0.10); --main-colour: rgba(255, 87, 34, 0.70); --secondary-colour: rgba(15, 45, 85, 0.5); --bg-colour: rgba(11, 22, 36, 1); --menu-colour: rgba(15, 25, 45, 0.95); --border-colour: rgb(15, 24, 38); --font-colour_offwhite: rgba(235, 240, 245, 1); --font-colour_grey: rgba(120, 135, 150, 1); --font-colour_lightgrey: rgba(160, 175, 190, 1); --link-colour: rgba(255, 179, 0, 1); --link-colour_hover: rgba(255, 110, 64, 1); --link-colour_visited: rgba(216, 67, 21, 1); --sidebar-close_btn: rgba(25, 40, 65, 1); --sidebar-open_btn: rgba(45, 70, 110, 1); --sidebar-hr_solid: var(--main-colour); --sidebar-dropdown_focus: rgba(255, 179, 0, 1); --sidebar-dropdown_nofocus: rgba(15, 45, 85, 1); --sidebar-menu_bg1: rgba(20, 35, 60, 0.5); --sidebar-menu_bg2: rgba(30, 50, 85, 0.8); /* Mobile menu icon filters (for PNG images) */ --mobile-menu-icon-filter: brightness(0) invert(1) sepia(0.5) saturate(3) hue-rotate(0deg); --mobile-menu-icon-filter-hover: brightness(0) invert(1) sepia(1) saturate(5) hue-rotate(0deg); --mobile-menu-icon-filter-active: brightness(0) invert(1) sepia(1) saturate(10) hue-rotate(200deg); --mobile-menu-icon-filter-focus: brightness(0) invert(1) sepia(0.5) saturate(3) hue-rotate(0deg); --gallery-title_secondary: rgba(30, 45, 70, 0.60); --desc-bg: rgba(15, 30, 50, 0.60); --desc-tracklist: rgba(180, 195, 210, 1); --desc-border-style: var(--border-width-thin) solid var(--main-colour); --lightbox-bg: rgba(10, 20, 35, 0.85); /* === Sales & Trivia page variables === */ --sales-red: rgba(255, 87, 34, 1); --sales-dark-bg: rgba(11, 22, 36, 0.8); --sales-hover-red: rgba(255, 87, 34, 0.5); --sales-light-red: rgba(255, 87, 34, 0.3); --sales-hover-overlay: rgba(255, 179, 0, 0.1); --sales-price-red: #ff5252; --sales-price-red-hover: #d32f2f; --sales-error-red: #ff8a80; --sales-white: #fff; --sales-black: #000; --sales-text-primary: #e3f2fd; --sales-text-secondary: #bbdefb; --sales-text-tertiary: #90caf9; --sales-text-muted: #617d91; --sales-text-dark: #455a64; --sales-bright-red: rgba(255, 110, 64, 1); --sales-dark-red: rgba(216, 67, 21, 1); --sales-bg-overlay: rgba(11, 22, 36, 0.6); --sales-bg-lightbox: rgba(5, 10, 20, 0.95); --sales-border-subtle: #1e2f42; --sales-text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.8); --sales-box-shadow: 0 0 30px rgba(255, 87, 34, 0.5); } /* ---------- bw (diffs vs ata) ---------- */ :root[data-theme="bw"] { --bg-image: url(/images/theme/bg_bw.webp); --logo-colour: hue-rotate(180deg) brightness(1.2); --main-colour_clear: rgba(0, 242, 255, 0.1); --main-colour: rgba(0, 242, 255, 0.6); --secondary-colour: rgba(0, 96, 100, 0.5); --bg-colour: rgba(1, 10, 20, 1); --menu-colour: rgba(1, 20, 35, 1); --border-colour: rgb(0, 27, 36); --font-colour_offwhite: rgba(230, 245, 255, 1); --font-colour_grey: rgba(100, 120, 140, 1); --font-colour_lightgrey: rgba(150, 175, 200, 1); --link-colour: rgba(0, 242, 255, 1); --link-colour_hover: rgba(150, 250, 255, 1); --link-colour_visited: rgba(0, 150, 160, 1); --sidebar-close_btn: rgba(0, 40, 60, 1); --sidebar-open_btn: rgba(0, 80, 110, 1); --sidebar-hr_solid: var(--main-colour); --sidebar-dropdown_focus: rgba(0, 100, 120, 1); --sidebar-dropdown_nofocus: rgba(0, 40, 60, 1); --sidebar-menu_bg1: rgba(1, 30, 50, 1); --sidebar-menu_bg2: rgba(1, 45, 75, 1); /* Mobile menu icon filters (for PNG images) */ --mobile-menu-icon-filter: brightness(0) invert(1) sepia(1) saturate(5) hue-rotate(150deg); --mobile-menu-icon-filter-hover: brightness(0) invert(1) sepia(1) saturate(10) hue-rotate(150deg); --mobile-menu-icon-filter-active: brightness(0) invert(1) sepia(1) saturate(20) hue-rotate(180deg); --mobile-menu-icon-filter-focus: brightness(0) invert(1) sepia(1) saturate(5) hue-rotate(150deg); --gallery-title_secondary: rgba(0, 60, 80, 0.60); --desc-bg: rgba(1, 30, 55, 0.60); --desc-tracklist: rgba(170, 200, 220, 1); --desc-border-style: var(--border-width-thin) solid var(--main-colour); --lightbox-bg: rgba(0, 15, 30, 0.8); /* === Sales & Trivia page variables === */ --sales-red: var(--link-colour); --sales-dark-bg: rgba(0, 15, 30, 0.7); --sales-hover-red: rgba(0, 242, 255, 0.5); --sales-light-red: rgba(0, 242, 255, 0.3); --sales-hover-overlay: rgba(0, 242, 255, 0.1); --sales-price-green: #00ff88; --sales-price-red: #ff4444; --sales-price-green-hover: #00cc6a; --sales-price-red-hover: #cc3333; --sales-status-good: rgba(0, 255, 136, 0.2); --sales-error-red: #ff8888; --sales-spinner-border: var(--main-colour); --sales-text-primary: #e0f8ff; --sales-text-secondary: #b0e0f0; --sales-text-tertiary: #90c0d0; --sales-text-muted: #608090; --sales-text-dark: #405060; --sales-bright-red: #00d4ff; --sales-dark-red: #006680; --sales-bg-overlay: rgba(0, 10, 20, 0.6); --sales-bg-lightbox: rgba(0, 5, 10, 0.9); --sales-copy-success: #00ff88; --sales-border-subtle: #003344; --sales-text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.8); --sales-box-shadow: 0 0 30px rgba(0, 242, 255, 0.5); } /* ---------- crimson (diffs vs ata) ---------- */ :root[data-theme="crimson"] { --bg-image: url(/images/theme/bg_crimson.webp); --logo-colour: grayscale(1) brightness(1.5); --main-colour_clear: rgba(255, 255, 255, 0.1); --main-colour: rgba(224, 224, 224, 0.6); --secondary-colour: rgba(66, 66, 66, 0.5); --bg-colour: rgba(18, 18, 18, 1); --menu-colour: rgba(24, 24, 24, 1); --border-colour: rgb(9, 9, 9); --font-colour_offwhite: rgba(245, 245, 245, 1); --font-colour_grey: rgba(158, 158, 158, 1); --font-colour_lightgrey: rgba(189, 189, 189, 1); --link-colour: #d32f2f; --link-colour_hover: #ff6659; --link-colour_visited: #9a0007; --sidebar-close_btn: rgba(40, 40, 40, 1); --sidebar-open_btn: rgba(60, 60, 60, 1); --sidebar-hr_solid: var(--main-colour); --sidebar-dropdown_focus: rgba(70, 70, 70, 1); --sidebar-dropdown_nofocus: rgba(40, 40, 40, 1); --sidebar-menu_bg1: rgba(30, 30, 30, 1); --sidebar-menu_bg2: rgba(40, 40, 40, 1); --sidebar-menu_icons_hover: var(--font-colour_white); /* Mobile menu icon filters (for PNG images) */ --mobile-menu-icon-filter: brightness(0) invert(1); --mobile-menu-icon-filter-hover: brightness(0) invert(0.8); --mobile-menu-icon-filter-active: brightness(0) invert(0.6); --mobile-menu-icon-filter-focus: brightness(0) invert(1); --gallery-title_secondary: rgba(60, 60, 60, 0.60); --gallery-font_shadow: rgba(0, 0, 0, 0.5); --desc-bg: rgba(30, 30, 30, 0.60); --desc-tracklist: rgba(200, 200, 200, 1); --desc-border-style: var(--border-width-thin) solid var(--main-colour); --lightbox-bg: rgba(10, 10, 10, 0.9); /* === Sales & Trivia page variables === */ --sales-red: #e0e0e0; --sales-dark-bg: rgba(20, 20, 20, 0.7); --sales-hover-red: rgba(255, 255, 255, 0.2); --sales-light-red: rgba(255, 255, 255, 0.1); --sales-hover-overlay: rgba(255, 255, 255, 0.05); --sales-price-green: #ffffff; --sales-price-red: #777777; --sales-price-green-hover: #cccccc; --sales-price-red-hover: #555555; --sales-status-good: rgba(255, 255, 255, 0.1); --sales-error-red: #cccccc; --sales-spinner-border: var(--main-colour); --sales-text-primary: #f0f0f0; --sales-text-secondary: #d0d0d0; --sales-text-tertiary: #b0b0b0; --sales-text-muted: #808080; --sales-text-dark: #606060; --sales-bright-red: #ffffff; --sales-dark-red: #aaaaaa; --sales-bg-overlay: rgba(0, 0, 0, 0.6); --sales-bg-lightbox: rgba(0, 0, 0, 0.95); --sales-copy-success: #ffffff; --sales-border-subtle: #333333; --sales-text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.8); --sales-box-shadow: 0 0 30px rgba(255, 255, 255, 0.2); } /* ---------- remains (diffs vs ata) ---------- */ :root[data-theme="remains"] { --bg-image: url(/images/theme/bg_remains.webp); --logo-colour: hue-rotate(40deg) brightness(1.1) contrast(1.1); --main-colour_clear: rgba(255, 179, 0, 0.1); --main-colour: rgba(255, 179, 0, 0.6); --secondary-colour: rgba(141, 110, 99, 0.5); --bg-colour: rgba(27, 20, 17, 1); --menu-colour: rgba(35, 25, 20, 1); --border-colour: rgb(18, 13, 10); --font-colour_offwhite: rgba(255, 245, 230, 1); --font-colour_grey: rgba(160, 140, 120, 1); --font-colour_lightgrey: rgba(200, 180, 160, 1); --link-colour: rgba(255, 179, 0, 1); --link-colour_hover: rgba(255, 210, 100, 1); --link-colour_visited: rgba(220, 150, 0, 1); --sidebar-close_btn: rgba(50, 35, 25, 1); --sidebar-open_btn: rgba(80, 60, 40, 1); --sidebar-hr_solid: var(--main-colour); --sidebar-dropdown_focus: rgba(90, 70, 50, 1); --sidebar-dropdown_nofocus: rgba(50, 40, 30, 1); --sidebar-menu_bg1: rgba(45, 35, 30, 1); --sidebar-menu_bg2: rgba(60, 45, 40, 1); /* Mobile menu icon filters (for PNG images) */ --mobile-menu-icon-filter: brightness(0) invert(1) sepia(1) saturate(3) hue-rotate(0deg); --mobile-menu-icon-filter-hover: brightness(0) invert(1) sepia(1) saturate(5) hue-rotate(0deg); --mobile-menu-icon-filter-active: brightness(0) invert(1) sepia(1) saturate(10) hue-rotate(20deg); --mobile-menu-icon-filter-focus: brightness(0) invert(1) sepia(1) saturate(3) hue-rotate(0deg); --gallery-title_secondary: rgba(80, 60, 40, 0.60); --gallery-font_shadow: rgba(0, 0, 0, 0.6); --desc-bg: rgba(45, 30, 25, 0.60); --desc-tracklist: rgba(220, 200, 180, 1); --desc-border-style: var(--border-width-thin) solid var(--main-colour); --lightbox-bg: rgba(20, 15, 10, 0.8); /* === Sales & Trivia page variables === */ --sales-red: var(--link-colour); --sales-dark-bg: rgba(20, 15, 10, 0.7); --sales-hover-red: rgba(255, 179, 0, 0.5); --sales-light-red: rgba(255, 179, 0, 0.3); --sales-hover-overlay: rgba(255, 179, 0, 0.1); --sales-price-green: #ffca28; --sales-price-red: #ff7043; --sales-price-green-hover: #ffb300; --sales-price-red-hover: #f4511e; --sales-status-good: rgba(255, 202, 40, 0.2); --sales-error-red: #ffab91; --sales-spinner-border: var(--main-colour); --sales-text-primary: #fff3e0; --sales-text-secondary: #ffe0b2; --sales-text-tertiary: #ffcc80; --sales-text-muted: #bcaaa4; --sales-text-dark: #8d6e63; --sales-bright-red: #ffb300; --sales-dark-red: #bf360c; --sales-bg-overlay: rgba(27, 20, 17, 0.6); --sales-bg-lightbox: rgba(15, 10, 5, 0.95); --sales-copy-success: #ffca28; --sales-border-subtle: #3e2723; --sales-text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.8); --sales-box-shadow: 0 0 30px rgba(255, 179, 0, 0.4); }