:root { /* Base palette - sampled from media/base/color_palette.png */ --ioe-periwinkle: #9fb0e2; --ioe-forest: #466e3f; --ioe-teal-black: #12272c; --ioe-coral: #ea777c; --ioe-navy: #242e48; --ioe-lavender: #bcbcd8; /* Surfaces */ --ioe-bg: var(--ioe-teal-black); --ioe-bg-elevated: var(--ioe-navy); --ioe-bg-elevated-2: #364060; /* --ioe-bg-inner-panel is just a clearer name for what .ioe-card/ .ioe-input already use (--ioe-bg-elevated itself, unchanged - not repointing every existing reference, this is for new code that wants the "inner surface" framing explicit) paired with --ioe-bg-outer-panel below (.page-panel's own background) so the two are named as the pair they are, not "elevated" vs. a same-sounding "panel". */ --ioe-bg-inner-panel: var(--ioe-bg-elevated); /* .page-panel's background - darker than --ioe-bg-inner-panel so the outer panel and the cards inside it read as distinct surfaces instead of blending together (they used to be literally the same color). How much darker is style-dependent, not a single constant - see the override in the [data-style="fantasy_nature"] block below. This --ioe-bg-outer-panel value (20% toward black) is what actually applies for every OTHER style (default, fantasy_magic, and Midnight itself, none of which override it) - it can afford to go much darker than Nature because their text is light-on-dark with huge contrast headroom to spare (worst case checked: temple/fantasy_magic heading, 0.77:1 of margin over the 3:1 floor even at this depth). Derived via color-mix() from whatever --ioe-bg-inner-panel currently resolves to (re-resolves var() at use time, following the cascade - same trick --ioe-panel-nature-bg's alias already relies on) rather than a separate hand-picked value per theme. */ --ioe-bg-outer-panel: color-mix(in srgb, var(--ioe-bg-inner-panel) 80%, black); /* Text */ --ioe-text: var(--ioe-lavender); --ioe-text-muted: #8d90ab; --ioe-heading: var(--ioe-periwinkle); /* Borders */ --ioe-border: rgba(159, 176, 226, 0.18); --ioe-border-strong: rgba(159, 176, 226, 0.35); /* Interactive accent */ --ioe-accent: var(--ioe-periwinkle); --ioe-accent-hover: #8c9bc7; --ioe-focus-ring: rgba(159, 176, 226, 0.5); /* Semantic/status */ --ioe-danger: var(--ioe-coral); --ioe-danger-text-on: var(--ioe-bg); --ioe-warning: #e3b23c; --ioe-info: var(--ioe-accent); --ioe-success: var(--ioe-forest); --ioe-success-strong: #5f8758; /* World map panel (world/css/styles.css) - "parchment spread on a dark table" look. Kept separate from the generic tokens above since the map's own visual identity (a light panel on dark chrome) isn't the same as the rest of the site's surfaces. */ --ioe-map-parchment: #d8c191; --ioe-map-frame-border: #6b4a24; --ioe-map-grid-line: rgba(107, 74, 36, 0.45); --ioe-map-tile-empty: rgba(107, 74, 36, 0.12); --ioe-map-hover-glow: #b35900; --ioe-map-title: #d8b463; /* Midnight's own seed - lets the [data-style] formulas below apply the same way regardless of which [data-theme] color is active, not just the 10 environment ones (which each set their own seed already). */ --ioe-theme-seed: var(--ioe-periwinkle); /* "Fantasy: Nature" panel look (accounts.Profile.VisualStyle) - a light/dark sage-and-forest green pairing, deliberately independent of --ioe-map-* above (the world map keeps its own cream/brown parchment look unchanged - this is a sitewide UI style, not a reskin of the map). Was originally a straight alias onto the map's cream/brown tokens ("sandstone"), but that combination produced the worst color-harmony scores of any theme/style pairing (see base/theme_colors.py's clash heuristic) for every cool/green-toned theme - a fixed *warm* ink color sitting on an increasingly *green* background doesn't work regardless of which shade of green is chosen, so the ink itself is now seed-tinted green too, not fixed. These are Midnight's own literal values (Midnight doesn't go through the [data-theme] block below); every other theme computes its own via color-mix() there, same shape. */ --ioe-panel-nature-bg: #8db2a6; --ioe-panel-nature-border: #2e3c42; --ioe-panel-nature-text: #212928; /* "Fantasy: Magic" panel look - anchors toward violet/arcane rather than neutral black, so every color theme still reads as "mystical" even when its own seed hue isn't purple. */ --ioe-panel-magic-bg: color-mix(in srgb, var(--ioe-theme-seed) 20%, #180a24); --ioe-panel-magic-border: color-mix(in srgb, var(--ioe-theme-seed) 55%, #7b2fd1); /* 40% (not 60%) seed weight - keeps this legible as heading/accent text against the dark magic bg regardless of the seed's own darkness (base/tests.py's ThemeStyleContrastTests caught temple/ mountains/cave dropping below WCAG's 3:1 floor at 60%) - also just reads better for an "arcane glow", which should stay luminous. */ --ioe-panel-magic-glow: color-mix(in srgb, var(--ioe-theme-seed) 40%, #b98ce8); } /* Remap Bootstrap's own semantic variables to the site palette, site-wide - makes .btn-danger, .badge.bg-success, .alert-* and friends follow our palette without touching template markup, anywhere. Previously duplicated verbatim per-app (#combat-root, #features-root, #characters-root, #catalog-root); centralized here since the values were 100% identical everywhere - a page that never had its own copy (leaderboard, world, accounts) now gets it too instead of falling back to stock Bootstrap colors. */ :root { --bs-danger: var(--ioe-danger); --bs-danger-rgb: 234, 119, 124; --bs-warning: var(--ioe-warning); --bs-warning-rgb: 227, 178, 60; --bs-info: var(--ioe-info); --bs-info-rgb: 159, 176, 226; --bs-success: var(--ioe-success-strong); --bs-success-rgb: 95, 135, 88; --bs-secondary: var(--ioe-bg-elevated-2); --bs-secondary-rgb: 54, 64, 96; } /* :root above is the "Midnight" theme (the default/original look) - no separate [data-theme="midnight"] block is needed. Selected via Profile.theme (accounts/models.py) and applied to by accounts.context_processors.theme, same attribute-scoping mechanism Bootstrap's own data-bs-theme="dark" already uses on that tag. Every other theme matches a world.Environment (Temple, City, Meadows...) and derives its whole palette from a single --ioe-theme-seed via color-mix() rather than 15 hand-picked values per theme - --ioe-bg and --ioe-bg-elevated always anchor mostly to near-black and --ioe-accent always anchors mostly to white, so contrast stays reasonable whether the seed itself is pale (Meadows) or already dark (Rainforest). Adding a theme for a new environment is one seed line, not a new palette. The seed hexes below are copied from world.Environment.color as of this writing (the same hex already painting that environment's map tiles) - CSS can't query the database, so if staff later change an environment's color through the staff editor, its line here needs a matching edit to stay in sync. */ [data-theme="temple"], [data-theme="city"], [data-theme="meadows"], [data-theme="desert"], [data-theme="rainforest"], [data-theme="woods"], [data-theme="mountains"], [data-theme="cave"], [data-theme="river"], [data-theme="ocean"] { --ioe-bg: color-mix(in srgb, var(--ioe-theme-seed) 14%, #0a0a0c); --ioe-bg-elevated: color-mix(in srgb, var(--ioe-theme-seed) 26%, #0a0a0c); --ioe-bg-elevated-2: color-mix(in srgb, var(--ioe-theme-seed) 36%, #0a0a0c); --ioe-heading: var(--ioe-lavender); --ioe-accent: color-mix(in srgb, var(--ioe-theme-seed) 60%, white); --ioe-accent-hover: color-mix(in srgb, var(--ioe-theme-seed) 45%, white); --ioe-border: color-mix(in srgb, var(--ioe-theme-seed) 40%, transparent); --ioe-border-strong: color-mix(in srgb, var(--ioe-theme-seed) 60%, transparent); --ioe-focus-ring: color-mix(in srgb, var(--ioe-theme-seed) 65%, transparent); --ioe-map-parchment: color-mix(in srgb, var(--ioe-theme-seed) 20%, #e8dcc2); /* 50% (not 65%) seed weight - stays consistently dark against the light parchment regardless of how light the seed itself is (base/tests.py's ThemeStyleContrastTests caught meadows/desert/river dropping below WCAG's 3:1 floor at 65%). */ --ioe-map-frame-border: color-mix(in srgb, var(--ioe-theme-seed) 50%, #1a1008); --ioe-map-grid-line: color-mix(in srgb, var(--ioe-map-frame-border) 45%, transparent); /* "Fantasy: Nature" panel look - independent of --ioe-map-* above, see the big comment in :root. Anchors: #89b397 a true/cool sage green (was #c1cfbe, hue 110deg leaning yellow-green and lightness 78% - against warm/yellow seeds like Desert/Meadows that produced a washed-out khaki/olive rather than green, per screenshot feedback), #08160d deep near-black forest, #161d18 a near-neutral ink barely tinted by the seed (8%, not the ~20-25% the bg/border get) and now hue-matched to the other two (was drifting slightly) - keeping the ink mostly desaturated is what makes it read as "ink" regardless of which green the background lands on, rather than needing to chase an exact hue match per theme. */ --ioe-panel-nature-bg: color-mix(in srgb, var(--ioe-theme-seed) 20%, #89b397); --ioe-panel-nature-border: color-mix(in srgb, var(--ioe-theme-seed) 25%, #08160d); --ioe-panel-nature-text: color-mix(in srgb, var(--ioe-theme-seed) 8%, #161d18); --ioe-map-tile-empty: color-mix(in srgb, var(--ioe-map-frame-border) 15%, transparent); --ioe-map-hover-glow: color-mix(in srgb, var(--ioe-theme-seed) 75%, white); --ioe-map-title: color-mix(in srgb, var(--ioe-theme-seed) 55%, #f5e6c8); } [data-theme="temple"] { --ioe-theme-seed: #8b0000; } [data-theme="city"] { --ioe-theme-seed: #635D5D; } [data-theme="meadows"] { --ioe-theme-seed: #80E49B; } [data-theme="desert"] { --ioe-theme-seed: #E4CD80; } [data-theme="rainforest"] { --ioe-theme-seed: #1B4D36; } [data-theme="woods"] { --ioe-theme-seed: #207D53; } [data-theme="mountains"] { --ioe-theme-seed: #472705; } [data-theme="cave"] { --ioe-theme-seed: #3E3842; } [data-theme="river"] { --ioe-theme-seed: #7EC8E3; } /* new environment, light sky/river blue */ [data-theme="ocean"] { --ioe-theme-seed: #145C86; } /* new environment, deep ocean blue */ body { color: var(--ioe-text); background-color: var(--ioe-bg); /* These two gradient stops are what actually reads as "the theme" on page load - they're a tint over a fixed photo, not a flat fill, so they have to be color-mix()'d from --ioe-bg rather than var()'d directly (a straight background-image: var(...) can't blend with the underlying url()). Without this, the photo's own fixed colors would dominate the page regardless of the active theme. */ background-image: linear-gradient(color-mix(in srgb, var(--ioe-bg) 88%, transparent), color-mix(in srgb, var(--ioe-bg) 94%, transparent)), url('/media/base/aurora_bi.jpg'); background-size: cover; background-attachment: fixed; overflow: scroll; } .ban-image { background-image: linear-gradient(color-mix(in srgb, var(--ioe-bg) 55%, transparent), color-mix(in srgb, var(--ioe-bg) 85%, transparent)), url('/media/base/banner-logo.png'); background-position: center; background-repeat: no-repeat; /*height: 200px;*/ } /* Wraps {% block content %} in base/templates/base/base.html - gives every page's headings/labels a real, controlled surface to render on. Without this, a plain unclassed

(most page titles) just inherited body's color while sitting directly on the raw page background (--ioe-bg, never touched by visual style) - but --ioe-text is meant to pair with --ioe-bg-elevated (what .ioe-card/list-group items use), the surface Fantasy: Nature intentionally makes light. Dark ink text (from Nature) on an unrelated dark page background is nearly invisible - the same token/surface mismatch already fixed twice this session (the character page, the features list), now fixed at the root by making the surface those tokens were always meant for the *actual* surface content renders on, sitewide, in one place. */ .page-panel { position: relative; background-color: var(--ioe-bg-outer-panel); /* Aged-parchment mottling: a vignette plus a handful of irregularly placed stain/sheen blobs, all semi-transparent black/white so they read as *tonal* variation on whatever --ioe-bg-panel currently is, rather than fixed colors of their own - re-themes automatically, same reasoning as the torn-edge SVG. Requested after seeing a real aged-scroll reference image (can't use that file directly - it's a watermarked stock preview, not a licensed asset - but the "flat single color reads as cheap/uniform" note is exactly right, this is the CSS-only answer to it). Kept low-opacity (<=0.18) and away from the padded content area by nature of being strongest at the edges, so it's not re-verified against base/tests.py's WCAG engine (which checks the flat base color, not a gradient's per-pixel variation) - a much stronger version would need that math redone. */ background-image: radial-gradient(ellipse 140% 90% at 50% 50%, transparent 55%, rgba(0, 0, 0, 0.18) 100%), radial-gradient(circle at 15% 18%, rgba(0, 0, 0, 0.10) 0%, transparent 35%), radial-gradient(circle at 82% 12%, rgba(0, 0, 0, 0.08) 0%, transparent 30%), radial-gradient(circle at 28% 88%, rgba(0, 0, 0, 0.09) 0%, transparent 32%), radial-gradient(circle at 92% 78%, rgba(0, 0, 0, 0.07) 0%, transparent 28%), radial-gradient(circle at 55% 45%, rgba(255, 255, 255, 0.05) 0%, transparent 40%); color: var(--ioe-text); padding: 2rem 2.5rem; margin: 1.5rem 0; } /* Torn-scroll edges - see the hidden in base/templates/base/base.html for the actual jagged path (an irregular, hand-authored zigzag, not a uniform sawtooth - a flat CSS gradient can only make a mechanically regular tooth pattern). These two elements are real inline DOM, not a background-image, specifically so `fill` can reference var(--ioe-bg) and stay reactive across every theme/style - an external image (generated or hand-drawn) would be stuck at one fixed color and need a separate variant per combination. The pattern tiles vertically on its own (patternUnits="userSpaceOnUse"), so this handles arbitrary page-panel height the same way the old repeat-y gradient did. */ .page-panel-edge { position: absolute; top: 0; height: 100%; width: 16px; } .page-panel-edge-left { left: 0; } .page-panel-edge-right { right: 0; transform: scaleX(-1); } /* Scroll caps - a rolled-dowel bar top and bottom, the other half of reading this as a scroll rather than just a torn rectangle. Themed via the same accent/border tokens everything else uses, so it re-colors with the active theme/style like the rest of the panel. */ .page-panel-cap { position: absolute; left: -6px; right: -6px; height: 14px; border-radius: 7px; /* --ioe-accent, not --ioe-border-strong/--ioe-border - those are deliberately translucent (rgba alpha ~0.18-0.35) for subtle dividers and would make this bar look patchy rather than a solid dowel; --ioe-accent is opaque under every theme/style. */ background: linear-gradient(to bottom, color-mix(in srgb, var(--ioe-accent) 60%, white) 0%, var(--ioe-accent) 45%, color-mix(in srgb, var(--ioe-accent) 70%, black) 100%); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5); } .page-panel-cap-top { top: -7px; } .page-panel-cap-bottom { bottom: -7px; } #testboarder1 { background-image: url('/media/base/aurora_bi.jpg'); background-size: cover; border-style: outset; } #testboarder2 { background-color: var(--ioe-bg-elevated); border-style: outset; border-color: var(--ioe-border); } /* Shared primitives - app stylesheets should prefer these over stacking Bootstrap utility classes (bg-dark text-light border-secondary, etc). New elevated-surface UI (a panel, a themed input) should reach for these two classes directly rather than re-declaring `background-color: var(--ioe-bg-elevated); color: var(--ioe-text); border-color: var(--ioe-border);` under a bespoke selector - several apps already do the latter (characters' .toon-list-item/.faction-list .list-group-item, combat's/features' .card.bg-dark, leaderboard's .scoreboard-table cells) for their own markup shapes, which is fine - the tokens are the real single source of truth and already re-theme those together with everything else - but a bespoke selector should exist for genuinely app-specific layout, not just to reimplement this triplet again. */ .ioe-card { background-color: var(--ioe-bg-elevated); border-color: var(--ioe-border); color: var(--ioe-text); } .ioe-input { background-color: var(--ioe-bg-elevated); color: var(--ioe-text); border: 1px solid var(--ioe-border-strong); } .ioe-input:focus { background-color: var(--ioe-bg-elevated); color: var(--ioe-text); border-color: var(--ioe-accent); box-shadow: 0 0 0 0.25rem var(--ioe-focus-ring); } .ioe-input::placeholder { color: var(--ioe-text-muted); } /* Solid border */ hr.solid { border-top: 3px solid var(--ioe-border-strong); } /* Dashed border */ hr.dashed { border-top: 3px dashed var(--ioe-border-strong); } /* Dotted border */ hr.dotted { border-top: 3px dotted var(--ioe-border-strong); } /* Rounded border */ hr.rounded { border-top: 8px solid var(--ioe-border-strong); border-radius: 5px; } .login-card-wrap { max-width: 420px; } /* Django's built-in AuthenticationForm widgets carry no `form-control` class, so they're themed by attribute selector rather than by editing django.contrib.auth's view/form. */ #login-root input[type="text"], #login-root input[type="password"] { display: block; width: 100%; background-color: var(--ioe-bg-elevated); color: var(--ioe-text); border: 1px solid var(--ioe-border-strong); border-radius: 0.375rem; padding: 0.375rem 0.75rem; } #login-root input[type="text"]:focus, #login-root input[type="password"]:focus { outline: none; border-color: var(--ioe-accent); box-shadow: 0 0 0 0.25rem var(--ioe-focus-ring); } /* Visual style (accounts.Profile.visual_style, applied via ) is independent of the color theme above - it restyles panel shape/texture rather than hue. "default" needs no block here, same as Midnight needing no [data-theme] block - today's rules above already are that look. Redefining the same core surface/text tokens the color themes already use (rather than only scoping .ioe-card/.ioe-input below) means every other "elevated surface" that already consumes them - list-group items, pagination, muted text (e.g. characters/css/styles.css's .faction-list/ .gear-list/.achievement-list, combat's/features'/leaderboard's own panels) - re-themes too, with no changes needed in any app's own CSS. Without this, only the two explicitly-scoped classes below would flip to parchment while everything else stayed on the old dark palette right next to it - exactly the clash reported on the character detail page, where the summary card (.ioe-card) went light but the Faction/Items/ Achievements lists beside it didn't. --ioe-bg-elevated-2 is deliberately left alone: Bootstrap's plain `.badge` sets a hardcoded white text color (--bs-badge-color) unrelated to dark/light mode, and each app's #-root block remaps --bs-secondary to --ioe-bg-elevated-2 for badge backgrounds - so it has to stay dark for that fixed-white badge text to stay legible, regardless of visual style. */ [data-style="fantasy_nature"] { --ioe-bg-elevated: var(--ioe-panel-nature-bg); /* No --ioe-bg-outer-panel override here (falls through to :root's 80% like every other style) - Nature's dark-ink-on-light-bg pairing has very little contrast headroom to begin with, so the same 20% darkening pushes its outer-panel text/text_muted below full WCAG AA (worst case: 3.48:1/2.50:1 at temple/fantasy_nature, vs. the usual 4.5:1/3:1 floor). Confirmed visually acceptable and explicitly accepted rather than giving Nature its own gentler value - see base/tests.py's test_contrast_against_page_panel_background, which holds this surface to a deliberately lower (but still real) 3.4:1/ 2.4:1 floor instead of full AA. */ --ioe-text: var(--ioe-panel-nature-text); /* 70% (not 65%) - at 65% Temple's muted text dropped to 2.96:1, just under WCAG's 3:1 floor (base/tests.py's ThemeStyleContrastTests). */ --ioe-text-muted: color-mix(in srgb, var(--ioe-panel-nature-text) 70%, transparent); --ioe-heading: var(--ioe-panel-nature-text); --ioe-border: color-mix(in srgb, var(--ioe-panel-nature-border) 45%, transparent); --ioe-border-strong: var(--ioe-panel-nature-border); --ioe-accent: var(--ioe-panel-nature-border); --ioe-accent-hover: color-mix(in srgb, var(--ioe-panel-nature-border) 80%, black); --ioe-focus-ring: color-mix(in srgb, var(--ioe-panel-nature-border) 45%, transparent); } [data-style="fantasy_magic"] { --ioe-bg-elevated: var(--ioe-panel-magic-bg); --ioe-heading: var(--ioe-panel-magic-glow); --ioe-border: color-mix(in srgb, var(--ioe-panel-magic-border) 45%, transparent); --ioe-border-strong: var(--ioe-panel-magic-border); --ioe-accent: var(--ioe-panel-magic-glow); --ioe-accent-hover: color-mix(in srgb, var(--ioe-panel-magic-glow) 70%, white); --ioe-focus-ring: color-mix(in srgb, var(--ioe-panel-magic-glow) 45%, transparent); /* --ioe-text/-muted untouched - the magic background stays dark, so the existing light text already reads fine against it. */ } [data-style="fantasy_nature"] .ioe-card, [data-style="fantasy_nature"] .ioe-input, [data-style="fantasy_nature"] #login-root input[type="text"], [data-style="fantasy_nature"] #login-root input[type="password"] { background-color: var(--ioe-panel-nature-bg); color: var(--ioe-panel-nature-text); border: 4px double var(--ioe-panel-nature-border); } [data-style="fantasy_nature"] .ioe-input:focus, [data-style="fantasy_nature"] #login-root input[type="text"]:focus, [data-style="fantasy_nature"] #login-root input[type="password"]:focus { background-color: var(--ioe-panel-nature-bg); color: var(--ioe-panel-nature-text); } [data-style="fantasy_nature"] .ioe-input::placeholder { color: color-mix(in srgb, var(--ioe-panel-nature-text) 55%, transparent); } [data-style="fantasy_magic"] .ioe-card, [data-style="fantasy_magic"] .ioe-input, [data-style="fantasy_magic"] #login-root input[type="text"], [data-style="fantasy_magic"] #login-root input[type="password"] { background-color: var(--ioe-panel-magic-bg); color: var(--ioe-text); border: 2px solid var(--ioe-panel-magic-border); box-shadow: 0 0 12px 2px color-mix(in srgb, var(--ioe-panel-magic-glow) 45%, transparent), inset 0 0 20px color-mix(in srgb, var(--ioe-panel-magic-border) 25%, transparent); border-radius: 8px; } [data-style="fantasy_magic"] .ioe-input:focus, [data-style="fantasy_magic"] #login-root input[type="text"]:focus, [data-style="fantasy_magic"] #login-root input[type="password"]:focus { background-color: var(--ioe-panel-magic-bg); color: var(--ioe-text); border-color: var(--ioe-panel-magic-glow); } @media only screen and (max-width: 720px) { #toonData{ visibility: hidden; } }