/* ========================================================================== Theme: Church of Skunk Optional skin, chosen in Settings → System → Appearance. Every rule is scoped to html[data-theme="church-of-skunk"], so Classic and Ghost Protocol V2 render exactly as before. Like Ghost, the theme works by re-pointing the app.css design tokens; component rules only add what a token cannot express (gold frames, cathedral art, candlelight). Artwork is the packaged library under themes/church-of-skunk/. This file maps each numbered piece to its file; wwwroot/appearance.js only picks the numbers, once per route visit, onto : data-skunk-hero 1-5 page header cathedral data-skunk-portrait-a|b|c 1-18 empty-state portraits data-skunk-glass-a|b|c 1-5 stained-glass panel windows data-skunk-scene-a|b 1-4 ledger panel headers data-skunk-section dashboard | work-items | reviews | … Settings: html[data-skunk-rotation|motion|decor] on | off Every image is decorative: drawn by CSS, never hit-tested, never read aloud, never behind a control or a table cell. ========================================================================== */ @media screen { /* ---------------------------------------------------------------------- 1. Palette and artwork library ---------------------------------------------------------------------- */ html[data-theme="church-of-skunk"] { --cos-ink: #110c15; --cos-bg: #17101d; --cos-panel: #211326; --cos-panel-raised: #2d1933; --cos-gold: #c7a063; --cos-gold-bright: #f0d492; --cos-gold-text: #e3c587; --cos-gold-deep: #7d5f35; --cos-purple: #8f4cc3; --cos-violet: #b985d6; --cos-ivory: #fff0d4; --cos-muted: #c6abc4; --cos-faint: #a990a7; --cos-rose: #f08bb0; --cos-candle: rgba(255, 196, 110, 0.5); --cos-font-display: "Cinzel", "Trajan Pro", "Trajan Pro 3", "Cormorant SC", "Palatino Linotype", "Book Antiqua", Palatino, "URW Palladio L", Georgia, serif; --cos-font-script: "Cormorant Garamond", "Adobe Garamond Pro", "EB Garamond", Garamond, "Palatino Linotype", "Book Antiqua", Palatino, Georgia, serif; --cos-hero-art: url("/themes/church-of-skunk/heroes/hero_01_divine_skunk_cathedral.webp"); --cos-portrait-a: url("church-of-skunk/skunks/skunk_15_blessing.webp"); --cos-portrait-b: url("church-of-skunk/skunks/skunk_07_good_enough_mug.webp"); --cos-portrait-c: url("church-of-skunk/skunks/skunk_08_halo_vision.webp"); --cos-glass-a: url("church-of-skunk/glass/glass_02_halo_glass.webp"); --cos-glass-b: url("church-of-skunk/glass/glass_01_cathedral_blessing.webp"); --cos-glass-c: url("church-of-skunk/glass/glass_05_sunrise_skunk.webp"); --cos-scene-a: url("church-of-skunk/scenes/scene_03_stained_glass_hall.webp"); --cos-scene-b: url("church-of-skunk/scenes/scene_01_cathedral_hall.webp"); --cos-sidebar-art: url("church-of-skunk/skunks/sidebar_skunk_stained_glass.webp"); --cos-corner-tl: url("church-of-skunk/ornaments/gothic_corner.svg"); --cos-corner-tr: url("church-of-skunk/ornaments/gothic_corner_tr.svg"); --cos-corner-bl: url("church-of-skunk/ornaments/gothic_corner_bl.svg"); --cos-corner-br: url("church-of-skunk/ornaments/gothic_corner_br.svg"); --cos-divider: url("church-of-skunk/ornaments/gold_divider.svg"); --cos-fleur: url("church-of-skunk/ornaments/fleur_de_lys.svg"); --cos-sparkle: url("church-of-skunk/ornaments/gold_sparkle.svg"); --cos-tagline: "All work is Good Enough."; /* Drawn sizes at 1x; the density tiers in section 12 shrink them so no piece is upscaled. */ --cos-portrait-w: 5.5rem; --cos-portrait-h: 6.5rem; --cos-scene-h: 8rem; } html[data-theme="church-of-skunk"][data-skunk-hero="1"] { --cos-hero-art: url("/themes/church-of-skunk/heroes/hero_01_divine_skunk_cathedral.webp"); } html[data-theme="church-of-skunk"][data-skunk-hero="2"] { --cos-hero-art: url("/themes/church-of-skunk/heroes/hero_02_skunk_high_priest.webp"); } html[data-theme="church-of-skunk"][data-skunk-hero="3"] { --cos-hero-art: url("/themes/church-of-skunk/heroes/hero_03_skunk_throne.webp"); } html[data-theme="church-of-skunk"][data-skunk-hero="4"] { --cos-hero-art: url("/themes/church-of-skunk/heroes/hero_04_skunk_scholar.webp"); } html[data-theme="church-of-skunk"][data-skunk-hero="5"] { --cos-hero-art: url("/themes/church-of-skunk/heroes/hero_05_skunk_congregation.webp"); } html[data-theme="church-of-skunk"][data-skunk-portrait-a="1"] { --cos-portrait-a: url("church-of-skunk/skunks/skunk_01_scroll_scholar.webp"); } html[data-theme="church-of-skunk"][data-skunk-portrait-a="2"] { --cos-portrait-a: url("church-of-skunk/skunks/skunk_02_garden_crown.webp"); } html[data-theme="church-of-skunk"][data-skunk-portrait-a="3"] { --cos-portrait-a: url("church-of-skunk/skunks/skunk_03_flower_crown.webp"); } html[data-theme="church-of-skunk"][data-skunk-portrait-a="4"] { --cos-portrait-a: url("church-of-skunk/skunks/skunk_04_forest_mushrooms.webp"); } html[data-theme="church-of-skunk"][data-skunk-portrait-a="5"] { --cos-portrait-a: url("church-of-skunk/skunks/skunk_05_reverent_priest.webp"); } html[data-theme="church-of-skunk"][data-skunk-portrait-a="6"] { --cos-portrait-a: url("church-of-skunk/skunks/skunk_06_butterfly_chaos.webp"); } html[data-theme="church-of-skunk"][data-skunk-portrait-a="7"] { --cos-portrait-a: url("church-of-skunk/skunks/skunk_07_good_enough_mug.webp"); } html[data-theme="church-of-skunk"][data-skunk-portrait-a="8"] { --cos-portrait-a: url("church-of-skunk/skunks/skunk_08_halo_vision.webp"); } html[data-theme="church-of-skunk"][data-skunk-portrait-a="9"] { --cos-portrait-a: url("church-of-skunk/skunks/skunk_09_purple_hood.webp"); } html[data-theme="church-of-skunk"][data-skunk-portrait-a="10"] { --cos-portrait-a: url("church-of-skunk/skunks/skunk_10_flowers_and_butterflies.webp"); } html[data-theme="church-of-skunk"][data-skunk-portrait-a="11"] { --cos-portrait-a: url("church-of-skunk/skunks/skunk_11_enthroned.webp"); } html[data-theme="church-of-skunk"][data-skunk-portrait-a="12"] { --cos-portrait-a: url("church-of-skunk/skunks/skunk_12_priest_candle.webp"); } html[data-theme="church-of-skunk"][data-skunk-portrait-a="13"] { --cos-portrait-a: url("church-of-skunk/skunks/skunk_13_stained_glass_priest.webp"); } html[data-theme="church-of-skunk"][data-skunk-portrait-a="14"] { --cos-portrait-a: url("church-of-skunk/skunks/skunk_14_mischief_scroll.webp"); } html[data-theme="church-of-skunk"][data-skunk-portrait-a="15"] { --cos-portrait-a: url("church-of-skunk/skunks/skunk_15_blessing.webp"); } html[data-theme="church-of-skunk"][data-skunk-portrait-a="16"] { --cos-portrait-a: url("church-of-skunk/skunks/skunk_16_sacred_scribe.webp"); } html[data-theme="church-of-skunk"][data-skunk-portrait-a="17"] { --cos-portrait-a: url("church-of-skunk/skunks/skunk_17_library_research.webp"); } html[data-theme="church-of-skunk"][data-skunk-portrait-a="18"] { --cos-portrait-a: url("church-of-skunk/skunks/skunk_18_altar_magic.webp"); } html[data-theme="church-of-skunk"][data-skunk-portrait-b="1"] { --cos-portrait-b: url("church-of-skunk/skunks/skunk_01_scroll_scholar.webp"); } html[data-theme="church-of-skunk"][data-skunk-portrait-b="2"] { --cos-portrait-b: url("church-of-skunk/skunks/skunk_02_garden_crown.webp"); } html[data-theme="church-of-skunk"][data-skunk-portrait-b="3"] { --cos-portrait-b: url("church-of-skunk/skunks/skunk_03_flower_crown.webp"); } html[data-theme="church-of-skunk"][data-skunk-portrait-b="4"] { --cos-portrait-b: url("church-of-skunk/skunks/skunk_04_forest_mushrooms.webp"); } html[data-theme="church-of-skunk"][data-skunk-portrait-b="5"] { --cos-portrait-b: url("church-of-skunk/skunks/skunk_05_reverent_priest.webp"); } html[data-theme="church-of-skunk"][data-skunk-portrait-b="6"] { --cos-portrait-b: url("church-of-skunk/skunks/skunk_06_butterfly_chaos.webp"); } html[data-theme="church-of-skunk"][data-skunk-portrait-b="7"] { --cos-portrait-b: url("church-of-skunk/skunks/skunk_07_good_enough_mug.webp"); } html[data-theme="church-of-skunk"][data-skunk-portrait-b="8"] { --cos-portrait-b: url("church-of-skunk/skunks/skunk_08_halo_vision.webp"); } html[data-theme="church-of-skunk"][data-skunk-portrait-b="9"] { --cos-portrait-b: url("church-of-skunk/skunks/skunk_09_purple_hood.webp"); } html[data-theme="church-of-skunk"][data-skunk-portrait-b="10"] { --cos-portrait-b: url("church-of-skunk/skunks/skunk_10_flowers_and_butterflies.webp"); } html[data-theme="church-of-skunk"][data-skunk-portrait-b="11"] { --cos-portrait-b: url("church-of-skunk/skunks/skunk_11_enthroned.webp"); } html[data-theme="church-of-skunk"][data-skunk-portrait-b="12"] { --cos-portrait-b: url("church-of-skunk/skunks/skunk_12_priest_candle.webp"); } html[data-theme="church-of-skunk"][data-skunk-portrait-b="13"] { --cos-portrait-b: url("church-of-skunk/skunks/skunk_13_stained_glass_priest.webp"); } html[data-theme="church-of-skunk"][data-skunk-portrait-b="14"] { --cos-portrait-b: url("church-of-skunk/skunks/skunk_14_mischief_scroll.webp"); } html[data-theme="church-of-skunk"][data-skunk-portrait-b="15"] { --cos-portrait-b: url("church-of-skunk/skunks/skunk_15_blessing.webp"); } html[data-theme="church-of-skunk"][data-skunk-portrait-b="16"] { --cos-portrait-b: url("church-of-skunk/skunks/skunk_16_sacred_scribe.webp"); } html[data-theme="church-of-skunk"][data-skunk-portrait-b="17"] { --cos-portrait-b: url("church-of-skunk/skunks/skunk_17_library_research.webp"); } html[data-theme="church-of-skunk"][data-skunk-portrait-b="18"] { --cos-portrait-b: url("church-of-skunk/skunks/skunk_18_altar_magic.webp"); } html[data-theme="church-of-skunk"][data-skunk-portrait-c="1"] { --cos-portrait-c: url("church-of-skunk/skunks/skunk_01_scroll_scholar.webp"); } html[data-theme="church-of-skunk"][data-skunk-portrait-c="2"] { --cos-portrait-c: url("church-of-skunk/skunks/skunk_02_garden_crown.webp"); } html[data-theme="church-of-skunk"][data-skunk-portrait-c="3"] { --cos-portrait-c: url("church-of-skunk/skunks/skunk_03_flower_crown.webp"); } html[data-theme="church-of-skunk"][data-skunk-portrait-c="4"] { --cos-portrait-c: url("church-of-skunk/skunks/skunk_04_forest_mushrooms.webp"); } html[data-theme="church-of-skunk"][data-skunk-portrait-c="5"] { --cos-portrait-c: url("church-of-skunk/skunks/skunk_05_reverent_priest.webp"); } html[data-theme="church-of-skunk"][data-skunk-portrait-c="6"] { --cos-portrait-c: url("church-of-skunk/skunks/skunk_06_butterfly_chaos.webp"); } html[data-theme="church-of-skunk"][data-skunk-portrait-c="7"] { --cos-portrait-c: url("church-of-skunk/skunks/skunk_07_good_enough_mug.webp"); } html[data-theme="church-of-skunk"][data-skunk-portrait-c="8"] { --cos-portrait-c: url("church-of-skunk/skunks/skunk_08_halo_vision.webp"); } html[data-theme="church-of-skunk"][data-skunk-portrait-c="9"] { --cos-portrait-c: url("church-of-skunk/skunks/skunk_09_purple_hood.webp"); } html[data-theme="church-of-skunk"][data-skunk-portrait-c="10"] { --cos-portrait-c: url("church-of-skunk/skunks/skunk_10_flowers_and_butterflies.webp"); } html[data-theme="church-of-skunk"][data-skunk-portrait-c="11"] { --cos-portrait-c: url("church-of-skunk/skunks/skunk_11_enthroned.webp"); } html[data-theme="church-of-skunk"][data-skunk-portrait-c="12"] { --cos-portrait-c: url("church-of-skunk/skunks/skunk_12_priest_candle.webp"); } html[data-theme="church-of-skunk"][data-skunk-portrait-c="13"] { --cos-portrait-c: url("church-of-skunk/skunks/skunk_13_stained_glass_priest.webp"); } html[data-theme="church-of-skunk"][data-skunk-portrait-c="14"] { --cos-portrait-c: url("church-of-skunk/skunks/skunk_14_mischief_scroll.webp"); } html[data-theme="church-of-skunk"][data-skunk-portrait-c="15"] { --cos-portrait-c: url("church-of-skunk/skunks/skunk_15_blessing.webp"); } html[data-theme="church-of-skunk"][data-skunk-portrait-c="16"] { --cos-portrait-c: url("church-of-skunk/skunks/skunk_16_sacred_scribe.webp"); } html[data-theme="church-of-skunk"][data-skunk-portrait-c="17"] { --cos-portrait-c: url("church-of-skunk/skunks/skunk_17_library_research.webp"); } html[data-theme="church-of-skunk"][data-skunk-portrait-c="18"] { --cos-portrait-c: url("church-of-skunk/skunks/skunk_18_altar_magic.webp"); } html[data-theme="church-of-skunk"][data-skunk-glass-a="1"] { --cos-glass-a: url("church-of-skunk/glass/glass_01_cathedral_blessing.webp"); } html[data-theme="church-of-skunk"][data-skunk-glass-a="2"] { --cos-glass-a: url("church-of-skunk/glass/glass_02_halo_glass.webp"); } html[data-theme="church-of-skunk"][data-skunk-glass-a="3"] { --cos-glass-a: url("church-of-skunk/glass/glass_03_garden_glass.webp"); } html[data-theme="church-of-skunk"][data-skunk-glass-a="4"] { --cos-glass-a: url("church-of-skunk/glass/glass_04_blue_stained_glass.webp"); } html[data-theme="church-of-skunk"][data-skunk-glass-a="5"] { --cos-glass-a: url("church-of-skunk/glass/glass_05_sunrise_skunk.webp"); } html[data-theme="church-of-skunk"][data-skunk-glass-b="1"] { --cos-glass-b: url("church-of-skunk/glass/glass_01_cathedral_blessing.webp"); } html[data-theme="church-of-skunk"][data-skunk-glass-b="2"] { --cos-glass-b: url("church-of-skunk/glass/glass_02_halo_glass.webp"); } html[data-theme="church-of-skunk"][data-skunk-glass-b="3"] { --cos-glass-b: url("church-of-skunk/glass/glass_03_garden_glass.webp"); } html[data-theme="church-of-skunk"][data-skunk-glass-b="4"] { --cos-glass-b: url("church-of-skunk/glass/glass_04_blue_stained_glass.webp"); } html[data-theme="church-of-skunk"][data-skunk-glass-b="5"] { --cos-glass-b: url("church-of-skunk/glass/glass_05_sunrise_skunk.webp"); } html[data-theme="church-of-skunk"][data-skunk-glass-c="1"] { --cos-glass-c: url("church-of-skunk/glass/glass_01_cathedral_blessing.webp"); } html[data-theme="church-of-skunk"][data-skunk-glass-c="2"] { --cos-glass-c: url("church-of-skunk/glass/glass_02_halo_glass.webp"); } html[data-theme="church-of-skunk"][data-skunk-glass-c="3"] { --cos-glass-c: url("church-of-skunk/glass/glass_03_garden_glass.webp"); } html[data-theme="church-of-skunk"][data-skunk-glass-c="4"] { --cos-glass-c: url("church-of-skunk/glass/glass_04_blue_stained_glass.webp"); } html[data-theme="church-of-skunk"][data-skunk-glass-c="5"] { --cos-glass-c: url("church-of-skunk/glass/glass_05_sunrise_skunk.webp"); } html[data-theme="church-of-skunk"][data-skunk-scene-a="1"] { --cos-scene-a: url("church-of-skunk/scenes/scene_01_cathedral_hall.webp"); } html[data-theme="church-of-skunk"][data-skunk-scene-a="2"] { --cos-scene-a: url("church-of-skunk/scenes/scene_02_altar_sanctuary.webp"); } html[data-theme="church-of-skunk"][data-skunk-scene-a="3"] { --cos-scene-a: url("church-of-skunk/scenes/scene_03_stained_glass_hall.webp"); } html[data-theme="church-of-skunk"][data-skunk-scene-a="4"] { --cos-scene-a: url("church-of-skunk/scenes/scene_04_candlelit_library.webp"); } html[data-theme="church-of-skunk"][data-skunk-scene-b="1"] { --cos-scene-b: url("church-of-skunk/scenes/scene_01_cathedral_hall.webp"); } html[data-theme="church-of-skunk"][data-skunk-scene-b="2"] { --cos-scene-b: url("church-of-skunk/scenes/scene_02_altar_sanctuary.webp"); } html[data-theme="church-of-skunk"][data-skunk-scene-b="3"] { --cos-scene-b: url("church-of-skunk/scenes/scene_03_stained_glass_hall.webp"); } html[data-theme="church-of-skunk"][data-skunk-scene-b="4"] { --cos-scene-b: url("church-of-skunk/scenes/scene_04_candlelit_library.webp"); } /* Header captions: approved phrases only, chosen by section. Decorative, so drawn with empty alternative text and never in place of a page's own title or description. */ html[data-theme="church-of-skunk"][data-skunk-section="dashboard"] { --cos-tagline: "Praise Be to Skunk."; } html[data-theme="church-of-skunk"][data-skunk-section="reviews"] { --cos-tagline: "Awaiting Judgment."; } html[data-theme="church-of-skunk"][data-skunk-section="message-board"] { --cos-tagline: "Increase Harmless Chaos."; } html[data-theme="church-of-skunk"][data-skunk-section="settings"] { --cos-tagline: "Do Not Take Yourself Too Seriously."; } /* ---------------------------------------------------------------------- 2. Token mapping. Re-points app.css tokens; components follow. ---------------------------------------------------------------------- */ html[data-theme="church-of-skunk"] { --color-background: var(--cos-ink); --color-background-raised: color-mix(in srgb, var(--cos-ink) 55%, var(--cos-panel)); --color-background-elevated: color-mix(in srgb, var(--cos-ink) 80%, var(--cos-panel)); --color-sidebar: #0d0910; --color-surface: var(--cos-panel); --color-surface-raised: var(--cos-panel-raised); --color-surface-hover: color-mix(in srgb, var(--cos-panel-raised) 82%, var(--cos-purple)); --color-field: #140d18; --color-field-hover: #1b1220; --color-border: color-mix(in srgb, var(--cos-gold) 26%, #2a1d2e); --color-border-strong: color-mix(in srgb, var(--cos-gold) 48%, #2a1d2e); --color-border-loud: var(--cos-gold); /* Every step clears AA on the raised panel: muted 8.4:1, subtle 6.6:1, faint 5.5:1. */ --color-text: var(--cos-ivory); --color-text-muted: color-mix(in srgb, var(--cos-ivory) 45%, var(--cos-muted)); --color-text-subtle: var(--cos-muted); --color-text-faint: var(--cos-faint); --color-ink: var(--cos-ink); --color-accent: var(--cos-gold); --color-accent-hover: var(--cos-gold-bright); --color-accent-active: #a9844b; --color-accent-text: var(--cos-gold-text); --color-accent-soft: color-mix(in srgb, var(--cos-gold) 16%, transparent); --color-accent-faint: color-mix(in srgb, var(--cos-gold) 7%, transparent); --color-accent-glow: color-mix(in srgb, var(--cos-gold) 30%, transparent); /* Semantic tones keep their meaning and stay distinct from the gold trim. */ --color-info: #7bafff; --color-info-soft: color-mix(in srgb, #7bafff 14%, transparent); --color-purple: var(--cos-violet); --color-purple-soft: color-mix(in srgb, var(--cos-violet) 15%, transparent); --color-warning: #f1b35d; --color-warning-soft: color-mix(in srgb, #f1b35d 14%, transparent); --color-success: #69ce9d; --color-success-soft: color-mix(in srgb, #69ce9d 14%, transparent); --color-danger: #e87b87; --color-danger-soft: color-mix(in srgb, #e87b87 15%, transparent); --color-hot: #f0946a; --color-hot-soft: color-mix(in srgb, #f0946a 14%, transparent); --color-neutral: #ab99aa; --color-neutral-soft: color-mix(in srgb, #ab99aa 12%, transparent); --overlay-dark: rgba(8, 4, 10, 0.74); --font-display: var(--cos-font-display); --font-poster: var(--cos-font-display); --notch-sm: 0px; --notch-md: 0px; --notch-lg: 0px; --shadow-panel: 0 1.25rem 3rem rgba(0, 0, 0, 0.55), 0 0 2.5rem rgba(199, 160, 99, 0.06); --shadow-raised: 0 0.6rem 1.6rem rgba(0, 0, 0, 0.55); --shadow-accent: 0 0 1.5rem var(--color-accent-glow); --focus-ring: inset 0 0 0 2px var(--cos-gold-bright), inset 0 0 0 4px var(--cos-ink); --texture-line: transparent; --tap-highlight: color-mix(in srgb, var(--cos-gold) 24%, transparent); --text-primary: var(--color-text); --text-muted: var(--color-text-muted); --color-focus: var(--cos-gold-bright); --warning: var(--color-warning); --success: var(--color-success); --danger: var(--color-danger); background: radial-gradient(ellipse 70% 45% at 78% -8%, rgba(143, 76, 195, 0.2), transparent 70%), radial-gradient(ellipse 60% 50% at 0% 100%, rgba(199, 160, 99, 0.07), transparent 70%), var(--cos-ink); color-scheme: dark; } /* Die-cut shapes square off: cathedral stonework, not torn paper. Components set their own --notch from literals, so it is reset on every element rather than only on the tokens. */ html[data-theme="church-of-skunk"] * { --notch: 0px; } html[data-theme="church-of-skunk"] ::selection { background: color-mix(in srgb, var(--cos-gold) 40%, transparent); color: var(--cos-ivory); } /* ---------------------------------------------------------------------- 3. Canvas and ambient candlelight The canvas lives on ; body and shell go transparent so the ambient layers (z-index -1, behind every layout) show between surfaces. The two ambient children are the generic theme hosts in App.razor. ---------------------------------------------------------------------- */ html[data-theme="church-of-skunk"] body { background: transparent; } html[data-theme="church-of-skunk"] body::before { opacity: 0.12; } html[data-theme="church-of-skunk"] .app-shell { background: transparent; } html[data-theme="church-of-skunk"] .app-shell::after { display: none; } html[data-theme="church-of-skunk"] .theme-ambience { background: radial-gradient(ellipse 50% 38% at 100% 0%, rgba(240, 212, 146, 0.07), transparent 70%), radial-gradient(circle at 50% 50%, transparent 55%, rgba(0, 0, 0, 0.45) 100%); display: block; inset: 0; overflow: hidden; pointer-events: none; position: fixed; z-index: -1; } html[data-theme="church-of-skunk"] .theme-ambience > * { pointer-events: none; position: absolute; } /* The visit's cathedral, as far-off haze behind the whole page: the background changes with the hero between visits but is never sharp enough to compete with content. */ html[data-theme="church-of-skunk"] .theme-ambience-rain { background: var(--cos-hero-art) right top / auto 100% no-repeat; filter: blur(34px) saturate(1.15); height: 30rem; -webkit-mask-image: linear-gradient(180deg, #000 10%, transparent 100%); mask-image: linear-gradient(180deg, #000 10%, transparent 100%); opacity: 0.2; right: 0; top: 0; width: 70%; } /* Candle glow pooled along the lower edge. Animated only when background animations are on. */ html[data-theme="church-of-skunk"] .theme-ambience-scanlines { background: radial-gradient(circle at 12% 100%, var(--cos-candle), transparent 22%), radial-gradient(circle at 46% 104%, rgba(255, 180, 90, 0.32), transparent 18%), radial-gradient(circle at 92% 100%, var(--cos-candle), transparent 20%); bottom: 0; height: 40vh; left: 0; opacity: 0.32; right: 0; } html[data-theme="church-of-skunk"][data-skunk-motion="on"] .theme-ambience-scanlines { animation: cos-candle 5.2s ease-in-out infinite; } @keyframes cos-candle { 0%, 100% { opacity: 0.32; } 18% { opacity: 0.27; } 31% { opacity: 0.36; } 47% { opacity: 0.29; } 66% { opacity: 0.35; } 82% { opacity: 0.3; } } /* ---------------------------------------------------------------------- 4. Typography: engraved capitals for titles, readable sans for data ---------------------------------------------------------------------- */ html[data-theme="church-of-skunk"] :is(h1, h2, h3, h4) { color: var(--cos-gold-text); font-weight: 600; } /* Preserve typography elsewhere; PageHeading alone owns operational title geometry. */ html[data-theme="church-of-skunk"] :is(h1, h2, h3, h4):where(:not(.page-heading *)) { letter-spacing: 0.04em; } html[data-theme="church-of-skunk"] h1 { background: linear-gradient(180deg, #fff3d6 0%, var(--cos-gold-bright) 45%, #c99a54 100%); -webkit-background-clip: text; background-clip: text; color: var(--cos-gold-bright); -webkit-text-fill-color: transparent; filter: drop-shadow(0 2px 10px rgba(0, 0, 0, 0.7)); font-weight: 600; } html[data-theme="church-of-skunk"] h1:where(:not(.page-heading *)) { font-size: clamp(2rem, 3.6vw, 3.1rem); letter-spacing: 0.03em; line-height: 1.04; } html[data-theme="church-of-skunk"] :is( .eyebrow, .panel-kicker, .stat-label, .sidebar-heading, .field-group > label, .data-table th, .definition-grid dt, .appearance-fieldset legend) { font-weight: 600; } html[data-theme="church-of-skunk"] .eyebrow { color: var(--cos-gold-text); letter-spacing: 0.24em; } html[data-theme="church-of-skunk"] .eyebrow::before, html[data-theme="church-of-skunk"] .sidebar-heading::before { background: var(--cos-gold-bright); box-shadow: 0 0 0.5rem rgba(240, 212, 146, 0.6); height: 0.4rem; transform: rotate(45deg); width: 0.4rem; } html[data-theme="church-of-skunk"] a { color: var(--cos-gold-text); } html[data-theme="church-of-skunk"] .page-description { color: var(--color-text-muted); } /* ---------------------------------------------------------------------- 5. Shell: sidebar, brand, navigation, topbar ---------------------------------------------------------------------- */ html[data-theme="church-of-skunk"] .sidebar { background: radial-gradient(ellipse 120% 30% at 50% 0%, rgba(143, 76, 195, 0.14), transparent 70%), linear-gradient(180deg, #120b16, #0b070d 70%); border-right: 1px solid color-mix(in srgb, var(--cos-gold) 38%, transparent); box-shadow: inset -1px 0 0 rgba(0, 0, 0, 0.6), 6px 0 28px rgba(0, 0, 0, 0.45); } html[data-theme="church-of-skunk"] .sidebar::after { background: linear-gradient(180deg, transparent, var(--cos-gold-bright) 12rem, var(--cos-gold) 20rem, transparent 34rem); opacity: 0.55; } /* Engraved capitals run far wider than Classic's condensed poster face, so the public poster titles step down to keep their longest word inside its column. */ html[data-theme="church-of-skunk"] .landing-title { font-size: clamp(2.2rem, 4.8vw, 4.3rem); } html[data-theme="church-of-skunk"] .public-hero-title { font-size: clamp(2rem, 4.4vw, 3.3rem); } @media (max-width: 46rem) { html[data-theme="church-of-skunk"] .landing-title { font-size: clamp(1.9rem, 8.6vw, 3rem); } } html[data-theme="church-of-skunk"] :is(.brand-logo, .public-brand-logo) { filter: grayscale(1) sepia(1) saturate(2.4) hue-rotate(-10deg) brightness(1.12) drop-shadow(0 0 0.5rem rgba(240, 212, 146, 0.28)); } html[data-theme="church-of-skunk"] .sidebar-heading { color: color-mix(in srgb, var(--cos-gold) 75%, var(--cos-muted)); } html[data-theme="church-of-skunk"] .nav-link { color: var(--color-text-muted); font-family: var(--font-sans); font-size: 0.86rem; font-weight: 500; letter-spacing: 0.02em; text-transform: none; } html[data-theme="church-of-skunk"] .nav-link::before { transform: none; } html[data-theme="church-of-skunk"] a.nav-link:hover { color: var(--cos-gold-bright); } html[data-theme="church-of-skunk"] a.nav-link:hover::before { background: color-mix(in srgb, var(--cos-purple) 14%, transparent); } html[data-theme="church-of-skunk"] .nav-link.active { color: var(--cos-gold-bright); } html[data-theme="church-of-skunk"] .nav-link.active::before { background: linear-gradient(90deg, rgba(199, 160, 99, 0.18), rgba(143, 76, 195, 0.12) 70%, transparent), #1c1220; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--cos-gold) 70%, transparent), inset 3px 0 0 var(--cos-gold-bright), 0 0 1rem rgba(199, 160, 99, 0.12); } html[data-theme="church-of-skunk"] .nav-link.active .nav-icon { border-color: color-mix(in srgb, var(--cos-gold) 60%, transparent); color: var(--cos-gold-bright); } html[data-theme="church-of-skunk"] .sidebar-status { background: linear-gradient(180deg, #1a1120, #120c15); border-color: color-mix(in srgb, var(--cos-gold) 32%, transparent); border-top-color: var(--cos-gold); } html[data-theme="church-of-skunk"] .status-pulse { background: var(--cos-gold-bright); box-shadow: 0 0 0.6rem rgba(240, 212, 146, 0.7); } /* Sidebar vignette: the packaged stained-glass window, with its motto set as live type beneath it (the lettering baked into the source image was cropped, so it never shows half a word). It is a flex item of the rail placed between the navigation and the version box, and it takes only the space left over: it shrinks, down to nothing, rather than make the rail scroll. The picture is drawn no taller than --cos-vignette-max, which keeps it at or below its 212px source on every screen density. Never in the compact rail. */ html[data-theme="church-of-skunk"] { --cos-vignette-max: 13rem; } html[data-theme="church-of-skunk"] .sidebar-status { order: 2; } html[data-theme="church-of-skunk"][data-skunk-decor="on"] .sidebar:not(.is-compact)::before { align-items: flex-end; background: var(--cos-fleur) center calc(100% - 3.05rem) / 0.75rem auto no-repeat, var(--cos-sidebar-art) center top / auto calc(100% - 3.6rem) no-repeat; color: var(--cos-gold-text); content: "Do Not Take Yourself\A Too Seriously" / ""; display: flex; flex: 1 1 0; font-family: var(--cos-font-script); font-size: 1rem; font-style: italic; justify-content: center; line-height: 1.2; margin: var(--space-3) 0 var(--space-3); max-height: calc(var(--cos-vignette-max) + 3.6rem); min-height: 0; order: 1; overflow: hidden; pointer-events: none; text-align: center; white-space: pre-line; } html[data-theme="church-of-skunk"] .topbar { background: linear-gradient(180deg, rgba(20, 12, 24, 0.97), rgba(14, 9, 17, 0.95)); box-shadow: 0 6px 26px rgba(0, 0, 0, 0.5); } html[data-theme="church-of-skunk"] .topbar::after { background: linear-gradient(90deg, transparent, var(--cos-gold) 12%, var(--cos-gold-deep) 60%, transparent); opacity: 0.7; } html[data-theme="church-of-skunk"] .search-control { background: #120b15; border-color: color-mix(in srgb, var(--cos-gold) 45%, transparent); box-shadow: inset 0 0 0 3px #120b15, inset 0 0 0 4px rgba(199, 160, 99, 0.14); } html[data-theme="church-of-skunk"] .search-icon { color: var(--cos-gold); } html[data-theme="church-of-skunk"] .account-avatar { border-color: var(--cos-gold); box-shadow: 0 0 0.6rem rgba(199, 160, 99, 0.3); } /* ---------------------------------------------------------------------- 6. Page header: the cathedral hero Live title, eyebrow, description and actions sit on the dark left of the artwork; every packaged hero keeps its subject on the right, so nothing is laid over a control. The header grows with its content. ---------------------------------------------------------------------- */ /* Visual identity only: shared PageHeading owns geometry and title sizing. */ html[data-theme="church-of-skunk"] .page-heading { --page-heading-art: var(--cos-hero-art); --page-heading-art-display: block; --page-heading-padding: var(--space-5); background: var(--cos-ink); border: 1px solid color-mix(in srgb, var(--cos-gold) 70%, transparent); box-shadow: inset 0 0 0 4px var(--cos-ink), inset 0 0 0 5px color-mix(in srgb, var(--cos-gold) 34%, transparent), 0 1.2rem 3rem rgba(0, 0, 0, 0.5); } html[data-theme="church-of-skunk"] .page-container .page-heading .page-description { color: color-mix(in srgb, var(--cos-ivory) 80%, var(--cos-muted)); text-shadow: 0 1px 6px rgba(0, 0, 0, 0.9); } /* Inner frame, with Gothic corners when decorations are on. Replaces Classic's offset rule. */ html[data-theme="church-of-skunk"] .page-container .page-heading::after { background: none; border: 1px solid color-mix(in srgb, var(--cos-gold) 22%, transparent); height: auto; inset: 0.65rem; pointer-events: none; z-index: 0; } html[data-theme="church-of-skunk"][data-skunk-decor="on"] .page-container .page-heading::after { background: var(--cos-corner-tl) left top / 3.25rem no-repeat, var(--cos-corner-tr) right top / 3.25rem no-repeat, var(--cos-corner-bl) left bottom / 3.25rem no-repeat, var(--cos-corner-br) right bottom / 3.25rem no-repeat; inset: 0.3rem; } /* Halo: a warm bloom over the artwork's lit side. Pulses only with animations on. */ html[data-theme="church-of-skunk"] .page-container .page-heading::before { background: radial-gradient(ellipse 22% 48% at 72% 34%, rgba(255, 214, 140, 0.2), transparent 70%); content: ""; inset: 0; mix-blend-mode: screen; opacity: 0.85; pointer-events: none; position: absolute; z-index: 0; } html[data-theme="church-of-skunk"][data-skunk-motion="on"] .page-container .page-heading::before { animation: cos-halo 7s ease-in-out infinite; } @keyframes cos-halo { 0%, 100% { opacity: 0.55; } 50% { opacity: 1; } } /* Tagline under the title. An approved phrase picked by section, with empty alternative text so it is never announced in place of the page's own description. */ html[data-theme="church-of-skunk"][data-skunk-decor="on"] .page-container .page-heading-title::after { color: #f6e3bb; content: var(--cos-tagline) / ""; display: block; font-family: var(--cos-font-script); font-size: clamp(1.15rem, 1.8vw, 1.5rem); font-style: italic; line-height: 1.25; margin: var(--space-1) 0 0; text-shadow: 0 2px 8px rgba(0, 0, 0, 0.85); } html[data-theme="church-of-skunk"][data-skunk-decor="on"] .page-container .page-heading-body::after { color: color-mix(in srgb, var(--cos-gold) 85%, var(--cos-ivory)); content: "\2726 Praise Be \00B7 Increase Harmless Chaos \00B7 Skunk Bless" / ""; display: block; font-family: var(--cos-font-display); font-size: 0.66rem; letter-spacing: 0.22em; margin-top: var(--space-4); text-transform: uppercase; white-space: normal; } /* The action plate becomes a gold-framed altar rail. */ html[data-theme="church-of-skunk"] .page-heading-toolbar:has(.button, form)::before { background: color-mix(in srgb, var(--cos-gold) 55%, transparent); } html[data-theme="church-of-skunk"] .page-heading-toolbar:has(.button, form)::after { background: linear-gradient(180deg, var(--cos-gold-bright) 0 100%) left top / 2px 100% no-repeat, linear-gradient(152deg, rgba(33, 19, 38, 0.96), rgba(17, 12, 21, 0.96)); } html[data-theme="church-of-skunk"] .breadcrumb a, html[data-theme="church-of-skunk"] .breadcrumb { letter-spacing: 0.08em; } /* ---------------------------------------------------------------------- 7. Surfaces: panels, tiles, cards, dialogs, popovers ---------------------------------------------------------------------- */ html[data-theme="church-of-skunk"] :is(.panel, .account-card, .stat-tile) { --panel-accent: var(--cos-gold); --panel-border: color-mix(in srgb, var(--cos-gold) 46%, #2a1d2e); --panel-fill: radial-gradient(ellipse 80% 60% at 100% 0%, rgba(143, 76, 195, 0.1), transparent 70%), linear-gradient(160deg, rgba(36, 21, 41, 0.97), rgba(21, 13, 25, 0.97)); filter: drop-shadow(0 0.9rem 1.6rem rgba(0, 0, 0, 0.5)); } /* States keep their own accents: the panel's state is information, not decoration. */ html[data-theme="church-of-skunk"] .panel[data-accent="ai"] { --panel-accent: var(--color-purple); } html[data-theme="church-of-skunk"] .panel[data-accent="info"] { --panel-accent: var(--color-info); } html[data-theme="church-of-skunk"] .panel[data-accent="attention"] { --panel-accent: var(--color-warning); } html[data-theme="church-of-skunk"] .panel[data-accent="success"] { --panel-accent: var(--color-success); } html[data-theme="church-of-skunk"] .panel[data-accent="danger"] { --panel-accent: var(--color-danger); } html[data-theme="church-of-skunk"] .stat-tile[data-tone="success"] { --panel-accent: var(--color-success); } html[data-theme="church-of-skunk"] .stat-tile[data-tone="attention"] { --panel-accent: var(--color-warning); } html[data-theme="church-of-skunk"] .stat-tile[data-tone="info"] { --panel-accent: var(--color-info); } html[data-theme="church-of-skunk"] .stat-tile[data-tone="ai"] { --panel-accent: var(--color-purple); } html[data-theme="church-of-skunk"] .stat-tile[data-tone="danger"] { --panel-accent: var(--color-danger); } /* Engraved double rule inside the gold frame. */ html[data-theme="church-of-skunk"] :is(.panel, .account-card, .stat-tile)::after { box-shadow: inset 0 0 0 3px rgba(17, 12, 21, 0.9), inset 0 0 0 4px color-mix(in srgb, var(--cos-gold) 16%, transparent); } html[data-theme="church-of-skunk"][data-skunk-decor="on"] :is(.panel, .stat-tile)::after { background: linear-gradient(90deg, var(--panel-accent) 0 5rem, transparent 5rem) top left / 100% 2px no-repeat, var(--cos-corner-tl) 3px 3px / 1.1rem no-repeat, var(--cos-corner-tr) calc(100% - 3px) 3px / 1.1rem no-repeat, var(--cos-corner-bl) 3px calc(100% - 3px) / 1.1rem no-repeat, var(--cos-corner-br) calc(100% - 3px) calc(100% - 3px) / 1.1rem no-repeat, var(--panel-fill); } html[data-theme="church-of-skunk"] .panel-header { background: linear-gradient(90deg, rgba(199, 160, 99, 0.07), transparent 55%); border-bottom-color: color-mix(in srgb, var(--cos-gold) 30%, transparent); } html[data-theme="church-of-skunk"] .panel-title { color: var(--cos-gold-text); font-size: 1.08rem; letter-spacing: 0.06em; } html[data-theme="church-of-skunk"] .panel-title::after { background: linear-gradient(90deg, var(--panel-accent, var(--cos-gold)), transparent); height: 1px; width: 4.5rem; } html[data-theme="church-of-skunk"] .panel-kicker { color: color-mix(in srgb, var(--cos-gold) 60%, var(--cos-muted)); } /* Ledger panels: a candlelit scene glows in the middle of the header band, faded out well before the title on the left and the actions on the right. */ html[data-theme="church-of-skunk"][data-skunk-decor="on"] .panel:has(> .panel-body :is(.data-table, .table-scroll, .table-shell)) > .panel-header { background: linear-gradient(90deg, rgba(33, 19, 38, 1) 22%, rgba(33, 19, 38, 0.2) 42%, rgba(33, 19, 38, 0.2) 58%, rgba(33, 19, 38, 1) 76%), var(--cos-scene-a) 50% 46% / auto var(--cos-scene-h) no-repeat, #211326; } html[data-theme="church-of-skunk"][data-skunk-decor="on"] .panel:nth-of-type(even):has(> .panel-body :is(.data-table, .table-scroll, .table-shell)) > .panel-header { background: linear-gradient(90deg, rgba(33, 19, 38, 1) 22%, rgba(33, 19, 38, 0.2) 42%, rgba(33, 19, 38, 0.2) 58%, rgba(33, 19, 38, 1) 76%), var(--cos-scene-b) 50% 46% / auto var(--cos-scene-h) no-repeat, #211326; } /* A small stained-glass lancet before each top-level section title. */ html[data-theme="church-of-skunk"][data-skunk-decor="on"] .page-container > .panel > .panel-header, html[data-theme="church-of-skunk"][data-skunk-decor="on"] .page-container > * > .panel > .panel-header { justify-content: flex-start; } html[data-theme="church-of-skunk"][data-skunk-decor="on"] .page-container > .panel > .panel-header > .panel-actions, html[data-theme="church-of-skunk"][data-skunk-decor="on"] .page-container > * > .panel > .panel-header > .panel-actions { margin-left: auto; } html[data-theme="church-of-skunk"][data-skunk-decor="on"] .page-container > .panel > .panel-header::before, html[data-theme="church-of-skunk"][data-skunk-decor="on"] .page-container > * > .panel > .panel-header::before { background: var(--cos-glass-a) center / cover no-repeat; border-radius: 999px 999px 0 0; box-shadow: 0 0 0 1px var(--cos-gold), 0 0 0.9rem rgba(185, 133, 214, 0.35); content: ""; flex: none; height: 2.5rem; width: 1.6rem; } html[data-theme="church-of-skunk"][data-skunk-decor="on"] .page-container > .panel:nth-of-type(3n+2) > .panel-header::before, html[data-theme="church-of-skunk"][data-skunk-decor="on"] .page-container > * > .panel:nth-of-type(3n+2) > .panel-header::before { background-image: var(--cos-glass-b); } html[data-theme="church-of-skunk"][data-skunk-decor="on"] .page-container > .panel:nth-of-type(3n) > .panel-header::before, html[data-theme="church-of-skunk"][data-skunk-decor="on"] .page-container > * > .panel:nth-of-type(3n) > .panel-header::before { background-image: var(--cos-glass-c); } html[data-theme="church-of-skunk"] .stat-glyph { background: radial-gradient(circle, rgba(240, 212, 146, 0.16), transparent 70%); border-color: color-mix(in srgb, var(--panel-accent) 65%, transparent); border-radius: 50%; color: var(--cos-gold-bright); } html[data-theme="church-of-skunk"] .stat-label { color: color-mix(in srgb, var(--cos-gold) 70%, var(--cos-muted)); } html[data-theme="church-of-skunk"] .stat-value { color: var(--cos-ivory); font-weight: 600; text-shadow: 0 0 1rem rgba(240, 212, 146, 0.18); } html[data-theme="church-of-skunk"] a.stat-tile:hover .stat-value { color: var(--cos-gold-bright); } html[data-theme="church-of-skunk"] :is(.app-dialog, .notification-dropdown, .drawer, .overflow-menu-panel) { background: radial-gradient(ellipse 80% 50% at 100% 0%, rgba(143, 76, 195, 0.12), transparent 70%), linear-gradient(170deg, #22142a, #150d19); border-color: color-mix(in srgb, var(--cos-gold) 45%, transparent); box-shadow: var(--shadow-panel); } html[data-theme="church-of-skunk"] .app-dialog { border-top: 2px solid var(--cos-gold); } html[data-theme="church-of-skunk"] .app-dialog.app-dialog-danger { border-top-color: var(--color-danger); } html[data-theme="church-of-skunk"] .app-dialog::backdrop { background: rgba(8, 4, 10, 0.72); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); } html[data-theme="church-of-skunk"] .callout { background: color-mix(in srgb, var(--callout-fill) 100%, #1a1020); } /* ---------------------------------------------------------------------- 8. Controls ---------------------------------------------------------------------- */ html[data-theme="church-of-skunk"] :is(.button, .text-action) { font-weight: 600; letter-spacing: 0.1em; } html[data-theme="church-of-skunk"] .button-primary { --button-fill: var(--cos-gold); --button-border: var(--cos-gold-bright); color: #1a1008; text-shadow: 0 1px 0 rgba(255, 240, 200, 0.35); } /* A gradient cannot sit in the solid-colour slot the base rule composites, so the primary fill is painted directly. */ html[data-theme="church-of-skunk"] .button-primary::after { background: linear-gradient(180deg, #f3d996, #c7a063 55%, #a9844b); box-shadow: inset 0 0 0 1px rgba(255, 244, 214, 0.4); } /* app.css paints the keyboard ring on ::after for buttons and linked tiles; the engraved shadows above sit on the same layer, so the ring is restated here to stay on top. */ html[data-theme="church-of-skunk"] :is(.button, a.stat-tile):focus-visible::after { box-shadow: var(--focus-ring); } html[data-theme="church-of-skunk"] .button-primary:hover:not(:disabled) { filter: brightness(1.08) drop-shadow(0 0 0.6rem rgba(240, 212, 146, 0.35)); } html[data-theme="church-of-skunk"] :is(.button-secondary, .button-ghost) { --button-border: color-mix(in srgb, var(--cos-gold) 60%, transparent); color: var(--cos-gold-text); } html[data-theme="church-of-skunk"] :is(.field-control, .select-control, .text-area-control, .search-input) { background-color: var(--color-field); border-color: color-mix(in srgb, var(--cos-gold) 30%, #2a1d2e); } html[data-theme="church-of-skunk"] :is(.field-control, .select-control, .text-area-control, .search-input):focus { border-color: var(--cos-gold); } /* The glow is added to the keyboard focus ring, never in place of it: app.css draws that ring as an inset box-shadow, which a bare glow here would replace. */ html[data-theme="church-of-skunk"] :is(.field-control, .select-control, .text-area-control, .search-input):focus-visible { box-shadow: var(--focus-ring), 0 0 0.75rem rgba(199, 160, 99, 0.18); } html[data-theme="church-of-skunk"] :is(input, textarea, select) { caret-color: var(--cos-gold-bright); } html[data-theme="church-of-skunk"] :is(input[type="checkbox"], input[type="radio"]) { accent-color: var(--cos-gold); } html[data-theme="church-of-skunk"] .tab.active::after, html[data-theme="church-of-skunk"] .tab[aria-selected="true"]::after { background: var(--cos-gold-bright); box-shadow: 0 0 0.6rem rgba(240, 212, 146, 0.45); } html[data-theme="church-of-skunk"] .status-chip { letter-spacing: 0.1em; } html[data-theme="church-of-skunk"] .appearance-choice.is-selected { border-color: var(--cos-gold); box-shadow: inset 0 0 0 1px var(--cos-gold), 0 0 1rem rgba(199, 160, 99, 0.15); } /* ---------------------------------------------------------------------- 9. Data tables: the ledger ---------------------------------------------------------------------- */ html[data-theme="church-of-skunk"] .data-table thead th { background: linear-gradient(180deg, #1d1222, #160e1a); color: color-mix(in srgb, var(--cos-gold) 72%, var(--cos-muted)); letter-spacing: 0.16em; } html[data-theme="church-of-skunk"] .data-table thead th::after { background: linear-gradient(90deg, transparent, var(--cos-gold) 15%, var(--cos-gold) 85%, transparent); opacity: 0.6; } html[data-theme="church-of-skunk"] .data-table > tbody > tr > td { border-bottom-color: color-mix(in srgb, var(--cos-gold) 13%, transparent); } html[data-theme="church-of-skunk"] .data-table > tbody > tr:hover > td { background-color: color-mix(in srgb, var(--cos-purple) 10%, transparent); } html[data-theme="church-of-skunk"] .data-table td a { color: var(--cos-gold-text); } html[data-theme="church-of-skunk"] .record-key { color: var(--cos-rose); } /* ---------------------------------------------------------------------- 10. Empty states: a skunk keeps watch where there is nothing yet The portrait replaces only the decorative glyph; the title, explanation and the action that fills the space are untouched. ---------------------------------------------------------------------- */ html[data-theme="church-of-skunk"] .empty-mark { border: 1px solid color-mix(in srgb, var(--cos-gold) 55%, transparent); color: var(--cos-gold-bright); } html[data-theme="church-of-skunk"][data-skunk-decor="on"] .empty-state .empty-mark { background: var(--cos-portrait-a) center / cover no-repeat; border: 1px solid var(--cos-gold); border-radius: 999px 999px 2px 2px; box-shadow: 0 0 0 3px var(--cos-ink), 0 0 0 4px color-mix(in srgb, var(--cos-gold) 40%, transparent), 0 0 1.4rem rgba(240, 212, 146, 0.2); color: transparent; font-size: 0; height: var(--cos-portrait-h); width: var(--cos-portrait-w); } html[data-theme="church-of-skunk"][data-skunk-decor="on"] .empty-state.compact .empty-mark { background-image: var(--cos-portrait-b); height: 3.6rem; width: 3rem; } html[data-theme="church-of-skunk"][data-skunk-decor="on"] .panel:nth-of-type(even) .empty-state:not(.compact) .empty-mark { background-image: var(--cos-portrait-c); } html[data-theme="church-of-skunk"] .empty-state strong { color: var(--cos-gold-text); letter-spacing: 0.08em; } /* ---------------------------------------------------------------------- 11. Component styles that carry the Classic brand pink as a literal ---------------------------------------------------------------------- */ html[data-theme="church-of-skunk"] .machine-hero { background: radial-gradient(circle at top right, var(--color-accent-soft), transparent 35%), linear-gradient(145deg, var(--color-surface), var(--color-background-raised)); border-color: color-mix(in srgb, var(--cos-gold) 30%, transparent); } html[data-theme="church-of-skunk"] .machine-tab.is-active { background: linear-gradient(135deg, var(--color-accent-soft), var(--color-accent-faint)); border-color: color-mix(in srgb, var(--cos-gold) 40%, transparent); } html[data-theme="church-of-skunk"] .machine-task-card:hover { background: var(--color-accent-faint); border-color: color-mix(in srgb, var(--cos-gold) 32%, transparent); } html[data-theme="church-of-skunk"] :is(.credential-reveal, .credential-value, .machine-config-actions) { border-color: color-mix(in srgb, var(--cos-gold) 30%, transparent); } html[data-theme="church-of-skunk"] .notification-dropdown { box-shadow: 0 16px 36px rgba(0, 0, 0, 0.65), 0 0 16px rgba(199, 160, 99, 0.1); } /* ---------------------------------------------------------------------- 12. Responsive: art steps back before it crowds anything ---------------------------------------------------------------------- */ /* Screen density. Every piece is drawn at or below its source pixels, so nothing is upscaled into softness: heroes are 480px tall, the sidebar window 212px, portraits about 144px, scenes 129px. Each tier sizes for its densest member. */ @media (min-resolution: 1.3dppx) { html[data-theme="church-of-skunk"] { --cos-vignette-max: 9rem; --cos-portrait-w: 5.1rem; --cos-portrait-h: 6rem; --cos-scene-h: 5.4rem; } } @media (min-resolution: 1.6dppx) { html[data-theme="church-of-skunk"] { --cos-vignette-max: 7.5rem; --cos-portrait-w: 4.3rem; --cos-portrait-h: 5.1rem; --cos-scene-h: 4.6rem; } } @media (min-resolution: 1.9dppx) { html[data-theme="church-of-skunk"] { --cos-vignette-max: 6.5rem; --cos-portrait-w: 3.8rem; --cos-portrait-h: 4.5rem; --cos-scene-h: 4rem; } } @media (min-resolution: 2.5dppx) { html[data-theme="church-of-skunk"] { --cos-vignette-max: 4.4rem; --cos-portrait-w: 2.6rem; --cos-portrait-h: 3rem; } } @media (max-width: 62rem) { html[data-theme="church-of-skunk"] .page-container .page-heading-body::after { white-space: normal; } } /* Phone: the art becomes a lit band behind a fully darkened text column. */ @media (max-width: 46rem) { html[data-theme="church-of-skunk"] .page-container .page-heading::before { display: none; } html[data-theme="church-of-skunk"][data-skunk-decor="on"] .page-container .page-heading::after { background: none; } html[data-theme="church-of-skunk"] .page-container .page-heading-body::after { display: none !important; } /* A phone-width header has no middle to spare: the scene would sit behind the title. nth-of-type(n) matches the specificity of the alternating rule above. */ html[data-theme="church-of-skunk"][data-skunk-decor="on"] .panel:nth-of-type(n):has(> .panel-body :is(.data-table, .table-scroll, .table-shell)) > .panel-header { background: linear-gradient(90deg, rgba(199, 160, 99, 0.07), transparent 55%); } html[data-theme="church-of-skunk"][data-skunk-decor="on"] .page-container > .panel > .panel-header::before, html[data-theme="church-of-skunk"][data-skunk-decor="on"] .page-container > * > .panel > .panel-header::before { display: none; } } /* ---------------------------------------------------------------------- 13. Preferences ---------------------------------------------------------------------- */ /* Keep the look, drop the motion. */ @media (prefers-reduced-motion: reduce) { html[data-theme="church-of-skunk"] .theme-ambience-scanlines, html[data-theme="church-of-skunk"] .page-container .page-heading::before { animation: none !important; } } /* More contrast: stronger text and borders, no haze or candle wash at all. */ @media (prefers-contrast: more) { html[data-theme="church-of-skunk"] { --color-border: color-mix(in srgb, var(--cos-gold) 60%, var(--cos-ivory)); --color-border-strong: var(--cos-gold-bright); --color-text-muted: color-mix(in srgb, var(--cos-ivory) 85%, var(--cos-muted)); --color-text-subtle: color-mix(in srgb, var(--cos-ivory) 70%, var(--cos-muted)); --color-text-faint: color-mix(in srgb, var(--cos-ivory) 55%, var(--cos-muted)); --focus-ring: inset 0 0 0 3px var(--cos-gold-bright), inset 0 0 0 6px var(--cos-ink); } html[data-theme="church-of-skunk"] .theme-ambience { display: none; } } }