:root {
--bb-gold: #F2B233;
--bb-gold-rgb: 242, 178, 51;
--bb-gold-pale: #FBDB7C;
--bb-green-deep: #0F352C;
--bb-green-mid: #1F6652;
--bb-red: #BC2727;
--bb-red-dark: #9E0000;
--bb-ink: #16140F;
--bb-white: #FFFFFF;
--bb-border-dark: #23272B;
/* The lit appearance of the 3D scenes' red wall (red_wall = 0xBC2727 in the *.js scene files) as it actually renders on screen, noticeably lighter/pinker than the raw --bb-red hex. Measured by pixel-scanning a /schedule screenshot. Used on /contact to visually echo "the wall you just walked through" coming from /home, without replaying a real 3D scene. */
--bb-wall-pink: #F17870;
/* Soft shadow shared by the whole file-manager "card" family (new folder form, drop zone, hub cards, move banner, .navbar-admin mobile panel): one setting to give consistent depth to all these blocks. */
--bb-shadow-soft: 0 4px 14px rgba(0, 0, 0, 0.18);
}
body {
background-color: var(--bb-gold);
}
/* Skip link: the page's first focusable element, invisible until keyboard focus (moved off-screen rather than display:none, to stay Tab-reachable), then visible and high-contrast once focused. Lets keyboard users skip the navbar/3D scene straight to #main-content. */
.skip-link {
position: absolute;
z-index: 2000;
top: -3rem;
left: 0.5rem;
padding: 0.6rem 1.2rem;
background: var(--bb-ink);
color: var(--bb-white);
font-weight: bold;
border-radius: 0 0 8px 8px;
transition: top 0.15s ease;
}
.skip-link:focus {
top: 0;
outline: 3px solid var(--bb-white);
outline-offset: 2px;
}
.avatar {
max-width: 128px;
max-height: 128px;
border-radius: 25px;
}
.avatar-medium {
max-width: 64px;
max-height: 64px;
}
/* Gold on red only reaches 3.24:1, below AA (4.5:1). White (6.07:1, AA) instead, same fix as #joinForm/#loginForm for the same color pair. */
.badge-red {
color: var(--bb-white);
background-color: var(--bb-red);
}
.btn-link, a,
.btn-link:hover, a:hover {
color: var(--bb-green-mid);
border-radius: 25px;
}
/* White text (not green) on red background: green on red only reaches ~1.45:1, same fix as the navbar, here for the desk/admin "reject" buttons. */
.btn-red {
color: var(--bb-white);
font-weight: bold;
border-radius: 25px;
background: var(--bb-red);
width: fit-content;
}
.btn-red:hover{
color: var(--bb-white);
background: var(--bb-red-dark);
}
/* --bb-ink here rather than white: these buttons sit on light backgrounds (body's gold, white table rows/cards), unlike .login/.join on the dark 3D scene. ink/gold 9.81:1, ink/white 18.4:1 (AAA either way). */
.btn-red:focus-visible,
.btn-green:focus-visible {
outline: 3px solid var(--bb-ink);
outline-offset: 2px;
}
/* White text (not red) on green background: same fix, for "validate" buttons. */
.btn-green {
color: var(--bb-white);
font-weight: bold;
border-radius: 25px;
background: var(--bb-green-mid);
width: fit-content;
}
.btn-green:hover{
color: var(--bb-white);
background: var(--bb-green-deep);
}
.bg-yellow {
background: var(--bb-gold);
}
.centered {
display: flex;
align-items: center;
justify-content: center;
}
/* .text-green: a color utility used directly on the body's gold background. --bb-green-deep reaches 7.15:1 (AAA) there, unlike the lighter green previously used which only reached 2.77:1 (below AA). */
.text-green {
color: var(--bb-green-deep);
}
.text-yellow {
color: var(--bb-gold);
}
#c {
position: absolute;
z-index: 800;
top: 0;
width: 100%;
height: 100%;
display: block;
}
canvas {
display: block;
}
.loader {
display: block;
background: url("b_mascot_loading-HY_sOcJ.png") center no-repeat;
width: 100px;
height: 100px;
position: absolute;
top: 50%;
left: 50%;
margin-left: -50px;
margin-top: -50px;
}
.isloaded .loader {
height: 0;
-webkit-transition-property: background-color height;
-webkit-transition-duration: 0.3s;
-webkit-transition-delay: 0.6s;
-webkit-transition-timing-function: ease;
transition-property: background-color height;
transition-duration: 0.3s;
transition-delay: 0.6s;
transition-timing-function: ease;
}
.loading {
position: absolute;
z-index: 1000;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: block;
background: var(--bb-red-dark);
}
.isloaded{
position: absolute;
z-index: 1000;
top: 0;
left: 0;
width: 100%;
height: 0%;
display: block;
background: var(--bb-red-dark);
-webkit-transition-property: background-color height;
-webkit-transition-duration: 0.3s;
-webkit-transition-delay: 0.5s;
-webkit-transition-timing-function: ease;
transition-property: background-color height;
transition-duration: 0.3s;
transition-delay: 0.5s;
transition-timing-function: ease;
}
.list-group-item.active {
background-color: var(--bb-green-mid);
border-color: var(--bb-green-mid);
}
/* Same contrast fix as the other forms below: without an explicit color, this would inherit the generic "form" rule's gold on green (3.63:1, below AA). White reaches 6.83:1 (AA). */
#contactForm {
position: absolute;
z-index: 1100;
width: 790px;
height: 400px;
background: var(--bb-green-mid);
left: 50%;
margin-left: -290px;
top: 23px;
color: var(--bb-white);
}
/* Anti-spam honeypot: moved off-screen rather than display:none, since some bots specifically ignore that, and removed from the accessibility tree via aria-hidden/tabindex="-1" on the field itself in the templates. */
.hp-field {
position: absolute;
left: -9999px;
width: 1px;
height: 1px;
overflow: hidden;
}
.contact-status {
font-weight: 600;
min-height: 1.2em;
}
.contact-status.is-error {
color: var(--bb-gold-pale);
}
form {
background: var(--bb-green-mid);
text-align: left;
color: var(--bb-gold);
padding: 2% 4%;
border: 5px solid var(--bb-border-dark);
}
/* .login/.join and #joinForm/#loginForm moved to assets/login/join.css: a page with its own 3D scene gets its own file. */
/* Same contrast fix as #joinForm/#loginForm: any plain