/* * Meridian Cyber Range — UA Little Rock brand tokens for CTFd core-beta. * * Every value below is copied verbatim from the token table at PRD.md:1424, * which states the contrast ratio each pair was chosen for; changing one here * without changing it there breaks the Section 508 claim the dashboard's * contrast test makes against the same table. * * Loaded through `{{ Plugins.styles }}`, which core-beta emits *after* its own * stylesheet, so plain specificity is enough and nothing here needs * `!important`. core-beta is Bootstrap 5.3: dark mode is `data-bs-theme="dark"` * on ``, set by the theme's own color_mode_switcher.js, so both the OS * preference and the theme toggle are already honoured and this file only has * to supply the two value sets. */ :root, [data-bs-theme="light"] { --brand-maroon: #6a0032; --brand-teal: #005f7c; --brand-silver: #a7a9ac; --brand-fg: #14121a; --brand-fg-muted: #54505c; --brand-bg: #ffffff; --brand-surface: #f7f5f8; --brand-success: #0f7a4a; --brand-warning: #8a5a00; --brand-danger: #b3261e; } [data-bs-theme="dark"] { --brand-maroon: #d4568c; --brand-teal: #6fc5e0; --brand-silver: #4a4d52; --brand-fg: #f2f0f5; --brand-fg-muted: #b4afbc; --brand-bg: #14121a; --brand-surface: #1e1b26; --brand-success: #4fce8f; --brand-warning: #e5b45c; --brand-danger: #ff8a80; } /* * Map the tokens onto the Bootstrap variables core-beta is built from. This is * the whole "colors and CSS variables" change — no component is restyled by * selector, so a CTFd upgrade that renames a class cannot break the branding. */ :root, [data-bs-theme="light"], [data-bs-theme="dark"] { --bs-primary: var(--brand-maroon); --bs-primary-rgb: var(--brand-maroon-rgb); --bs-link-color: var(--brand-teal); --bs-link-hover-color: var(--brand-maroon); --bs-body-color: var(--brand-fg); --bs-body-bg: var(--brand-bg); --bs-secondary-color: var(--brand-fg-muted); --bs-tertiary-bg: var(--brand-surface); --bs-border-color: var(--brand-silver); --bs-success: var(--brand-success); --bs-warning: var(--brand-warning); --bs-danger: var(--brand-danger); --bs-focus-ring-color: var(--brand-maroon); } /* Bootstrap composes rgba() from the -rgb triplets, so they need the same * value in decomposed form or every translucent surface stays Bootstrap * indigo. */ :root, [data-bs-theme="light"] { --brand-maroon-rgb: 106, 0, 50; --bs-link-color-rgb: 0, 95, 124; --bs-body-color-rgb: 20, 18, 26; --bs-body-bg-rgb: 255, 255, 255; } [data-bs-theme="dark"] { --brand-maroon-rgb: 212, 86, 140; --bs-link-color-rgb: 111, 197, 224; --bs-body-color-rgb: 242, 240, 245; --bs-body-bg-rgb: 20, 18, 26; } .btn-primary { --bs-btn-bg: var(--brand-maroon); --bs-btn-border-color: var(--brand-maroon); --bs-btn-hover-bg: var(--brand-maroon); --bs-btn-hover-border-color: var(--brand-maroon); --bs-btn-active-bg: var(--brand-maroon); --bs-btn-active-border-color: var(--brand-maroon); --bs-btn-disabled-bg: var(--brand-silver); --bs-btn-disabled-border-color: var(--brand-silver); } .navbar-dark, .navbar { --bs-navbar-color: var(--brand-fg); --bs-navbar-active-color: var(--brand-maroon); --bs-navbar-hover-color: var(--brand-maroon); } /* * The lockup. It replaces the text in core-beta's `.navbar-brand`, so the * element keeps its own accessible name — PRD.md:1424 requires the lockup * never be the only carrier of a piece of information, and an image-replaced * link would otherwise have no name at all. */ .navbar-brand { background-image: url("ualr-core-lockup.png"); background-position: left center; background-repeat: no-repeat; background-size: contain; min-height: 44px; min-width: 220px; padding-left: 232px; } /* Focus is always visible (PRD.md:1455): 2px maroon with a 2px offset, and a * white ring in dark mode so the outline survives the dark surface. */ :focus-visible { outline: 2px solid var(--brand-maroon); outline-offset: 2px; } [data-bs-theme="dark"] :focus-visible { outline-color: #ffffff; } /* Every interactive target is at least 44x44 CSS px (PRD.md:1457). */ .btn, .nav-link, .page-link { min-height: 44px; min-width: 44px; } /* prefers-reduced-motion collapses transitions to opacity within 150ms * (PRD.md:1462). */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms; animation-iteration-count: 1; transition-duration: 150ms; transition-property: opacity; } }