/* * Slate Operations Theme — GameBuddyTracker * * Overrides Bootstrap 5 defaults with the Slate Operations palette. * Uses Outfit (sans-serif) + JetBrains Mono (monospace). * All colors defined as CSS variables for easy tweaking. */ /* ========================================================================== Design Tokens — Axis-Driven Theme System ========================================================================== Three orthogonal axes drive the appearance, set as data attributes on by base.html (and derived in core/context_processors.py): data-mode = light | dark (brightness baseline) data-accent = slate | storm | forest | sunrise | pride data-bg = flat | aurora (festival reserved for PR2) data-motion = full | reduced Legacy stable token names (--bg-deep, --bg-card, --accent, --text-primary, etc.) are preserved so existing rules and templates need no edits. :root holds the dark + slate + aurora baseline. Mode and accent overrides live in dedicated blocks below the rules section. ========================================================================== */ :root { /* Mode tokens (dark default — overridden under [data-mode="light"]) */ --bg-deep: #0c0f14; --bg-surface: #12161e; --bg-card: rgba(24, 29, 40, 0.85); --bg-card-hover: rgba(30, 37, 53, 0.88); --bg-elevated: rgba(36, 44, 61, 0.9); --text-primary: #e2e8f0; --text-secondary: #94a3b8; --text-muted: #64748b; --border: #1e293b; --border-green: rgba(34, 197, 94, 0.25); /* Semantic colors (per-mode shading allowed; values here are dark-mode) */ --green: #22c55e; --green-dim: #16a34a; --orange: #f59e0b; --red: #ef4444; --sky: #38bdf8; --amber: #fbbf24; --emerald: #34d399; --purple: #a855f7; /* Accent tokens (slate default — overridden under [data-accent="..."]) */ --accent: #6366f1; --accent-light: #818cf8; --accent-dim: #4338ca; --accent-rgb: 99, 102, 241; --accent-on: #ffffff; --border-accent: rgba(var(--accent-rgb), 0.2); /* ---- Bootstrap variable bridge ---- Maps Bootstrap's --bs-* design tokens onto our tokens so .btn-primary, .bg-primary, .alert-*, .badge.bg-*, .border-*, .link-* all follow accent + mode automatically without per-component overrides. */ --bs-primary: var(--accent); --bs-primary-rgb: var(--accent-rgb); --bs-link-color: var(--accent); --bs-link-color-rgb: var(--accent-rgb); --bs-link-hover-color: var(--accent-dim); --bs-body-bg: var(--bg-deep); --bs-body-color: var(--text-primary); --bs-border-color: var(--border); --bs-secondary-bg: var(--bg-elevated); --bs-tertiary-bg: var(--bg-surface); --bs-success: var(--green); --bs-success-rgb: 34, 197, 94; --bs-danger: var(--red); --bs-danger-rgb: 239, 68, 68; --bs-warning: var(--orange); --bs-warning-rgb: 245, 158, 11; --bs-info: var(--sky); --bs-info-rgb: 56, 189, 248; } /* ========================================================================== Base / Body ========================================================================== */ body { font-family: 'Outfit', sans-serif; /* Background color from --bg-deep. The bg-image (grid + accent glows) is defined in the axis-driven body[data-bg="aurora"] / pride / etc. rules near the bottom of this file so it can react to mode + accent + bg. */ background-color: var(--bg-deep); background-attachment: fixed; color: var(--text-primary); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-size: 15px; line-height: 1.5; } a { color: var(--accent-light); } a:hover { color: var(--accent); } /* ========================================================================== Navbar ========================================================================== */ .navbar { background: rgba(12, 15, 20, 0.8) !important; backdrop-filter: blur(20px) saturate(150%); border-bottom: 1px solid var(--border); padding-top: 0.4rem; padding-bottom: 0.4rem; position: relative; z-index: 1050; } .navbar-brand { font-weight: 800; font-size: 1.05rem; letter-spacing: -0.5px; color: var(--text-primary) !important; display: flex; align-items: center; gap: 10px; } .navbar-brand .brand-icon { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; background: linear-gradient(135deg, var(--accent), var(--accent-dim)); border-radius: 8px; color: white; font-size: 0.9rem; } /* ── Red-E-Up Logo Images ── */ .brand-logo-clip { line-height: 0; } .brand-logo-img { height: 42px; width: auto; object-fit: contain; } .brand-logo-img-footer { height: 36px; width: auto; object-fit: contain; opacity: 0.6; } .brand-logo-img-auth { height: 64px; width: auto; object-fit: contain; } .footer-tagline { font-size: 0.7rem; color: var(--text-muted, rgba(255,255,255,0.3)); margin-top: 4px; font-style: italic; letter-spacing: 0.3px; } .navbar-nav .nav-link { color: var(--text-secondary) !important; font-weight: 500; font-size: 0.875rem; padding: 0.4rem 0.85rem; border-radius: 6px; transition: all 0.15s; } .navbar-nav .nav-link:hover { color: var(--text-primary) !important; background: var(--bg-card); } .navbar-nav .nav-link.active, .navbar-nav .nav-link[aria-current="page"] { color: var(--accent-light) !important; background: rgba(var(--accent-rgb), 0.1); } .nav-user-text { color: var(--text-secondary) !important; font-size: 0.875rem; font-weight: 500; } .btn-nav-logout { color: var(--text-muted); background: none; border: 1px solid var(--border); padding: 4px 12px; border-radius: 6px; font-size: 0.8rem; font-weight: 500; transition: all 0.15s; } .btn-nav-logout:hover { color: var(--text-secondary); border-color: var(--text-muted); background: var(--bg-card); } /* ---------- Crew Switcher ---------- */ .crew-switcher-toggle, .crew-switcher-label { color: var(--amber) !important; font-size: 0.85rem; font-weight: 600; letter-spacing: 0.02em; } .crew-switcher-toggle:hover { color: var(--sky) !important; } /* Override Bootstrap's dropdown CSS variables at the component level so .active states, hover, and focus all use our theme colours. */ .crew-dropdown { z-index: 1050; --bs-dropdown-bg: var(--bg-card); --bs-dropdown-border-color: var(--border); --bs-dropdown-link-color: var(--text-secondary); --bs-dropdown-link-hover-color: var(--text-primary); --bs-dropdown-link-hover-bg: var(--bg-elevated); --bs-dropdown-link-active-color: var(--amber); --bs-dropdown-link-active-bg: rgba(251, 191, 36, 0.06); --bs-dropdown-divider-bg: var(--border); background: var(--bg-card); border: 1px solid var(--border); border-radius: 8px; padding: 6px 0; min-width: 220px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4); } .crew-dropdown .dropdown-item { font-size: 0.85rem; font-weight: 500; padding: 8px 16px; display: flex; align-items: center; gap: 8px; transition: all 0.15s; } .crew-dropdown .dropdown-item.active, .crew-dropdown .dropdown-item.active:hover, .crew-dropdown .dropdown-item.active:focus { color: var(--amber) !important; background-color: rgba(251, 191, 36, 0.06) !important; } .crew-dropdown .dropdown-item.active i { color: var(--emerald); } .crew-dropdown .crew-action { color: var(--text-muted); } .crew-dropdown .crew-action:hover { color: var(--text-primary); background: var(--bg-elevated); } .crew-dropdown form { margin: 0; padding: 0; } .crew-dropdown form button.dropdown-item { border: none; background: none; width: 100%; text-align: left; cursor: pointer; } .crew-dropdown .dropdown-divider { margin: 4px 0; opacity: 0.3; } /* ========================================================================== Cards (override Bootstrap .card) ========================================================================== */ .card { background: var(--bg-card); backdrop-filter: blur(12px) saturate(120%); border: 1px solid var(--border); border-radius: 10px; transition: all 0.15s; } .card.card-hover:hover { background: var(--bg-card-hover); border-color: var(--border-accent); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25); } .card-body { padding: 1.25rem; } .card-title { font-weight: 600; } /* Card section headers (uppercase label style) */ .card-section-title { font-size: 0.85rem; font-weight: 600; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.5px; display: flex; align-items: center; gap: 8px; margin-bottom: 1rem; } .card-section-title i { color: var(--accent-light); font-size: 0.9rem; } /* ========================================================================== Stat Cards ========================================================================== */ .stat-card { display: flex; align-items: center; gap: 14px; cursor: pointer; } .stat-card:hover { background: var(--bg-card-hover); border-color: var(--border-accent); transform: translateY(-1px); } .stat-icon { width: 44px; height: 44px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 1.1rem; flex-shrink: 0; } .stat-icon-accent { background: rgba(var(--accent-rgb), 0.1); color: var(--accent-light); border: 1px solid rgba(var(--accent-rgb), 0.15); } .stat-icon-sky { background: rgba(56, 189, 248, 0.1); color: var(--sky); border: 1px solid rgba(56, 189, 248, 0.15); } .stat-icon-green { background: rgba(34, 197, 94, 0.1); color: var(--green); border: 1px solid rgba(34, 197, 94, 0.15); } .stat-icon-amber { background: rgba(251, 191, 36, 0.1); color: var(--amber); border: 1px solid rgba(251, 191, 36, 0.15); } .stat-number { font-family: 'JetBrains Mono', monospace; font-size: 1.75rem; font-weight: 700; line-height: 1; margin-bottom: 2px; color: var(--text-primary); } .stat-label { color: var(--text-secondary); font-size: 0.78rem; font-weight: 500; } /* ========================================================================== Availability Banner ========================================================================== */ .avail-banner { border-color: var(--border); } .avail-banner.available { border-color: var(--border-green); background: linear-gradient(135deg, var(--bg-card), rgba(34, 197, 94, 0.03)); } .avail-indicator { width: 36px; height: 36px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 1rem; } .avail-indicator-on { background: rgba(34, 197, 94, 0.1); color: var(--green); border: 1px solid rgba(34, 197, 94, 0.2); } .avail-indicator-off { background: rgba(71, 85, 105, 0.2); color: var(--text-muted); border: 1px solid var(--border); } /* ========================================================================== Player Avatars ========================================================================== */ .player-avatar { width: 28px; height: 28px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; font-size: 0.65rem; font-weight: 700; color: white; flex-shrink: 0; } /* Rotating avatar colors */ .player-avatar-1 { background: linear-gradient(135deg, #6366f1, #4338ca); } .player-avatar-2 { background: linear-gradient(135deg, #22c55e, #16a34a); } .player-avatar-3 { background: linear-gradient(135deg, #f59e0b, #d97706); } .player-avatar-4 { background: linear-gradient(135deg, #38bdf8, #0284c7); } .player-avatar-5 { background: linear-gradient(135deg, #ef4444, #b91c1c); } .player-avatar-6 { background: linear-gradient(135deg, #a855f7, #7c3aed); } .player-status-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--green); display: inline-block; } .player-status-dot--idle { background: var(--orange); } .player-status-label--idle { color: var(--orange); } /* ========================================================================== Buttons ========================================================================== */ .btn-primary { background: var(--accent); border-color: var(--accent); font-weight: 600; } .btn-primary:hover { background: var(--accent-dim); border-color: var(--accent-dim); } .btn-success { background: var(--green); border-color: var(--green); font-weight: 600; } .btn-success:hover { background: var(--green-dim); border-color: var(--green-dim); } .btn-outline-primary { color: var(--accent-light); border-color: var(--border-accent); } .btn-outline-primary:hover { background: rgba(var(--accent-rgb), 0.1); color: var(--accent-light); border-color: var(--accent-light); } .btn-outline-danger { color: var(--red); border-color: rgba(239, 68, 68, 0.3); } .btn-outline-danger:hover { background: rgba(239, 68, 68, 0.1); color: var(--red); border-color: var(--red); } .btn-outline-success { color: var(--green); border-color: rgba(34, 197, 94, 0.3); } .btn-outline-success:hover { background: rgba(34, 197, 94, 0.1); color: var(--green); border-color: var(--green); } .btn-outline-info { color: var(--sky); border-color: rgba(56, 189, 248, 0.3); } .btn-outline-info:hover { background: rgba(56, 189, 248, 0.1); color: var(--sky); border-color: var(--sky); } .btn-outline-light { color: var(--text-secondary); border-color: var(--border); } .btn-outline-light:hover { background: var(--bg-card-hover); color: var(--text-primary); border-color: var(--text-muted); } /* Quick action buttons (dashboard) */ .action-btn { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 14px; margin-bottom: 6px; background: var(--bg-surface); border: 1px solid var(--border); border-radius: 8px; color: var(--text-primary); font-size: 0.875rem; font-weight: 500; text-decoration: none; transition: all 0.15s; } .action-btn i { color: var(--text-muted); width: 18px; font-size: 0.9rem; transition: color 0.15s; } .action-btn:hover { background: var(--bg-card-hover); border-color: var(--border-accent); color: var(--accent-light); } .action-btn:hover i { color: var(--accent-light); } /* ========================================================================== Badges ========================================================================== */ .badge-players { background: rgba(var(--accent-rgb), 0.1) !important; color: var(--accent-light) !important; border: 1px solid rgba(var(--accent-rgb), 0.15); font-family: 'JetBrains Mono', monospace; font-size: 0.65rem; font-weight: 500; padding: 3px 7px; border-radius: 5px; } .badge-vr-optional { background: rgba(245, 158, 11, 0.1) !important; color: var(--orange) !important; border: 1px solid rgba(245, 158, 11, 0.15); } .badge-vr-required { background: rgba(245, 158, 11, 0.15) !important; color: var(--orange) !important; border: 1px solid rgba(245, 158, 11, 0.25); } .badge-no-vr { background: rgba(71, 85, 105, 0.15) !important; color: var(--text-secondary) !important; border: 1px solid rgba(71, 85, 105, 0.2); } .badge-platform { background: rgba(148, 163, 184, 0.08) !important; color: var(--text-secondary) !important; border: 1px solid rgba(148, 163, 184, 0.12); } .badge-ideal { background: rgba(34, 197, 94, 0.1) !important; color: var(--green) !important; border: 1px solid rgba(34, 197, 94, 0.15); } .badge-free { background: rgba(56, 189, 248, 0.1) !important; color: var(--sky) !important; border: 1px solid rgba(56, 189, 248, 0.2); } .badge-deal { background: rgba(34, 197, 94, 0.15) !important; color: var(--green) !important; border: 1px solid rgba(34, 197, 94, 0.25); font-weight: 700; font-size: 0.85rem; padding: 4px 10px; } .badge-deal-sm { background: rgba(34, 197, 94, 0.15) !important; color: var(--green) !important; border: 1px solid rgba(34, 197, 94, 0.25); font-weight: 700; font-size: 0.7rem; padding: 2px 6px; } .badge-price { background: rgba(34, 197, 94, 0.08) !important; color: var(--green) !important; border: 1px solid rgba(34, 197, 94, 0.15); font-weight: 600; font-size: 0.7rem; } .badge-hist-low { background: rgba(245, 158, 11, 0.15) !important; color: var(--amber) !important; border: 1px solid rgba(245, 158, 11, 0.25); font-weight: 600; font-size: 0.7rem; } .badge-owner { background: var(--bg-elevated) !important; color: var(--text-secondary) !important; border: 1px solid var(--border); font-weight: 500; padding: 4px 10px; } .btn-outline-purple { color: var(--purple); border-color: rgba(168, 85, 247, 0.4); background: none; } .btn-outline-purple:hover, .btn-outline-purple.active-purple { color: #fff; background: rgba(168, 85, 247, 0.2); border-color: var(--purple); } .btn-outline-purple.active-purple { color: #fff; background: rgba(168, 85, 247, 0.25); border-color: var(--purple); } /* Override Bootstrap badge defaults for our context */ .badge.bg-secondary { background: var(--bg-elevated) !important; color: var(--text-secondary) !important; } .badge.bg-success { background: rgba(34, 197, 94, 0.15) !important; color: var(--green) !important; } .badge.bg-info { background: rgba(56, 189, 248, 0.1) !important; color: var(--sky) !important; } .badge.bg-warning { background: rgba(245, 158, 11, 0.15) !important; color: var(--orange) !important; } /* ========================================================================== Forms ========================================================================== */ .form-control, .form-select { background: var(--bg-surface); border: 1px solid var(--border); color: var(--text-primary); border-radius: 8px; font-size: 0.875rem; padding: 0.5rem 0.75rem; } .form-control:focus, .form-select:focus { background: var(--bg-card); border-color: var(--accent); color: var(--text-primary); box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.15); } .form-control::placeholder { color: var(--text-muted); } .form-label { color: var(--text-secondary); font-size: 0.85rem; font-weight: 500; } .form-text { color: var(--text-muted); font-size: 0.8rem; } .invalid-feedback { color: var(--red); } /* ========================================================================== Alerts ========================================================================== */ .alert { border-radius: 8px; border: 1px solid; font-size: 0.875rem; } .alert-success { background: rgba(34, 197, 94, 0.08); border-color: rgba(34, 197, 94, 0.2); color: var(--green); } .alert-danger { background: rgba(239, 68, 68, 0.08); border-color: rgba(239, 68, 68, 0.2); color: var(--red); } .alert-info { background: rgba(56, 189, 248, 0.08); border-color: rgba(56, 189, 248, 0.2); color: var(--sky); } .alert-warning { background: rgba(245, 158, 11, 0.08); border-color: rgba(245, 158, 11, 0.2); color: var(--orange); } /* ========================================================================== Game Cards (catalog, my list, coordination) ========================================================================== */ .game-card { cursor: pointer; } .game-card .card-img-top { height: 160px; object-fit: cover; } .game-card .card-img-placeholder { height: 160px; background: linear-gradient(135deg, var(--bg-surface), var(--bg-elevated)); display: flex; align-items: center; justify-content: center; position: relative; } .game-card .card-img-placeholder i { color: var(--text-muted); font-size: 2.5rem; } /* Fade gradient at bottom of art */ .game-card .card-img-placeholder::after, .game-card .img-wrapper::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 40px; background: linear-gradient(transparent, var(--bg-card)); } .game-card .img-wrapper { position: relative; overflow: hidden; } .game-card .card-title a { color: var(--text-primary); text-decoration: none; font-weight: 600; letter-spacing: -0.2px; } .game-card .card-title a:hover { color: var(--accent-light); } /* ========================================================================== Game Detail Page ========================================================================== */ .detail-player-num { font-family: 'JetBrains Mono', monospace; font-size: 1.75rem; font-weight: 700; line-height: 1; } .detail-player-num-primary { color: var(--accent-light); } .detail-player-num-green { color: var(--green); } .detail-player-num-sky { color: var(--sky); } /* ========================================================================== Breadcrumbs ========================================================================== */ .breadcrumb { background: none; padding: 0; font-size: 0.85rem; } .breadcrumb-item a { color: var(--text-secondary); text-decoration: none; } .breadcrumb-item a:hover { color: var(--accent-light); } .breadcrumb-item.active { color: var(--text-muted); } .breadcrumb-item + .breadcrumb-item::before { color: var(--text-muted); } /* ========================================================================== Section Dividers ========================================================================== */ .section-divider { font-size: 0.85rem; font-weight: 600; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.5px; display: flex; align-items: center; gap: 10px; margin-top: 2rem; margin-bottom: 1rem; } .section-divider::after { content: ''; flex: 1; height: 1px; background: var(--border); } /* ========================================================================== Footer ========================================================================== */ footer { background: transparent !important; border-top: 1px solid var(--border); color: var(--text-muted) !important; } footer small { color: var(--text-muted) !important; font-size: 0.75rem; font-weight: 500; letter-spacing: 0.5px; } /* ========================================================================== Auth Pages (login, register) ========================================================================== */ .auth-card { max-width: 420px; margin: 2rem auto; } .auth-card .card-body { padding: 2rem; } .auth-card h2 { font-size: 1.3rem; font-weight: 700; letter-spacing: -0.5px; } .auth-card hr { border-color: var(--border); opacity: 1; } /* ========================================================================== Empty States ========================================================================== */ .empty-state { text-align: center; padding: 3rem 1rem; color: var(--text-muted); } .empty-state i { font-size: 3rem; display: block; margin-bottom: 1rem; } .empty-state p { margin-top: 0.5rem; } /* ========================================================================== Utility Overrides ========================================================================== */ .text-muted { color: var(--text-muted) !important; } .text-primary { color: var(--accent-light) !important; } .text-success { color: var(--green) !important; } .text-info { color: var(--sky) !important; } .text-warning { color: var(--orange) !important; } .text-danger { color: var(--red) !important; } .text-light { color: var(--text-primary) !important; } .text-white { color: var(--text-primary) !important; } .text-secondary { color: var(--text-secondary) !important; } .border-secondary { border-color: var(--border) !important; } .border-success { border-color: var(--border-green) !important; } .bg-dark { background: var(--bg-card) !important; } .bg-secondary { background: var(--bg-elevated) !important; } h1, h2, h3, h4, h5, h6 { letter-spacing: -0.3px; } h1 { font-weight: 700; font-size: 1.5rem; } h5 { font-weight: 600; } /* ========================================================================== Scrollbar ========================================================================== */ ::-webkit-scrollbar { width: 8px; } ::-webkit-scrollbar-track { background: var(--bg-deep); } ::-webkit-scrollbar-thumb { background: var(--bg-elevated); border-radius: 4px; } ::-webkit-scrollbar-thumb:hover { background: var(--text-muted); } /* ========================================================================== Mobile Responsive ========================================================================== */ @media (max-width: 768px) { .stat-card { gap: 10px; } .stat-icon { width: 36px; height: 36px; font-size: 0.9rem; } .stat-number { font-size: 1.4rem; } h1 { font-size: 1.3rem; } } /* ========================================================================== Notification Toasts ========================================================================== */ .notification-toast { background: var(--bg-elevated); border: 1px solid var(--border-accent); border-radius: 10px; padding: 12px 16px; min-width: 280px; max-width: 360px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(var(--accent-rgb), 0.08); backdrop-filter: blur(12px); opacity: 0; transform: translateX(40px); transition: opacity 0.3s ease, transform 0.3s ease; } .notification-toast.show { opacity: 1; transform: translateX(0); } .notification-toast.hide { opacity: 0; transform: translateX(40px); } /* ========================================================================== Notification Bell ========================================================================== */ #notification-bell .notification-bell-trigger { position: relative; padding: 4px 8px; } #notification-bell .notification-bell-trigger:hover i { color: var(--amber) !important; } .notification-dropdown .dropdown-item:hover { background: var(--bg-card-hover); } .notification-dropdown .dropdown-item:active { background: var(--bg-elevated); } /* ========================================================================== Crew Dropdown Check-In Toggles ========================================================================== */ .crew-checkin-toggle { transition: all 0.15s ease; } .crew-checkin-toggle:hover { transform: scale(1.15); filter: brightness(1.3); } /* ========================================================================== Steam Quick-Add Badges ========================================================================== */ #steam-badge-wrapper .badge:hover, [id^="steam-badge-"] button:hover { background: rgba(34,197,94,0.1) !important; color: var(--green) !important; border-color: rgba(34,197,94,0.3) !important; } /* ========================================================================== Appearance Axes — Mode / Accent / Background / Motion ========================================================================== Body carries data-mode, data-accent, data-bg, and data-motion. The :root block above is the dark + slate + aurora baseline; the rules below override tokens for the other axis values. Token names (--bg-deep, --accent, etc.) stay the same so existing rules and templates require no edits. Legacy theme → axes mapping (also done in core/context_processors.py): theme=dark → mode=dark + accent=slate + bg=aurora theme=light → mode=light + accent=slate + bg=aurora theme=midnight → mode=dark + accent=storm + bg=flat theme=pride → mode=dark + accent=pride + bg=aurora ========================================================================== */ /* ---------- Mode: light ---------- */ [data-mode="light"] { --bg-deep: #f0f2f5; --bg-surface: #ffffff; --bg-card: rgba(255, 255, 255, 0.92); --bg-card-hover: rgba(245, 247, 250, 0.95); --bg-elevated: rgba(235, 238, 244, 0.9); --text-primary: #1e293b; --text-secondary: #475569; --text-muted: #94a3b8; --border: #e2e8f0; --border-green: rgba(22, 163, 74, 0.2); /* Semantic colors darkened for legibility on a light surface */ --green: #16a34a; --green-dim: #15803d; --orange: #d97706; --red: #dc2626; --sky: #0284c7; --amber: #d97706; --emerald: #059669; --purple: #7c3aed; } /* ---------- Accent: slate (default — also defined in :root) ---------- */ [data-mode="light"][data-accent="slate"] { --accent: #4f46e5; --accent-light: #6366f1; --accent-dim: #3730a3; --accent-rgb: 79, 70, 229; --accent-on: #ffffff; --border-accent: rgba(79, 70, 229, 0.2); } /* ---------- Accent: storm (deep blue — Midnight migration target) ---------- */ [data-accent="storm"] { --accent: #3b82f6; --accent-light: #60a5fa; --accent-dim: #2563eb; --accent-rgb: 59, 130, 246; --accent-on: #ffffff; --border-accent: rgba(59, 130, 246, 0.2); } [data-mode="light"][data-accent="storm"] { --accent: #2563eb; --accent-light: #3b82f6; --accent-dim: #1d4ed8; --accent-rgb: 37, 99, 235; --border-accent: rgba(37, 99, 235, 0.2); } /* ---------- Accent: forest (calm green) ---------- */ [data-accent="forest"] { --accent: #22c97c; --accent-light: #4cd99a; --accent-dim: #16a763; --accent-rgb: 34, 201, 124; --accent-on: #062416; --border-accent: rgba(34, 201, 124, 0.25); } [data-mode="light"][data-accent="forest"] { --accent: #16a763; --accent-light: #22c97c; --accent-dim: #0f8a51; --accent-rgb: 22, 167, 99; --accent-on: #ffffff; --border-accent: rgba(22, 167, 99, 0.2); } /* ---------- Accent: sunrise (warm coral) ---------- */ [data-accent="sunrise"] { --accent: #ff6f3c; --accent-light: #ff9a55; --accent-dim: #d94d18; --accent-rgb: 255, 111, 60; --accent-on: #2a1408; --border-accent: rgba(255, 111, 60, 0.25); } [data-mode="light"][data-accent="sunrise"] { --accent: #e85d23; --accent-light: #ff7a3a; --accent-dim: #c84a14; --accent-rgb: 232, 93, 35; --accent-on: #ffffff; --border-accent: rgba(232, 93, 35, 0.2); } /* ---------- Accent: pride (pink/magenta — Pride migration target) ---------- Note: --accent-on kept at #ffffff for PR1 parity with the legacy pride theme (which inherited Bootstrap's default white btn-primary text). PR2 can switch to a higher-contrast dark text after a contrast review. */ [data-accent="pride"] { --accent: #e879f9; --accent-light: #f0abfc; --accent-dim: #c026d3; --accent-rgb: 232, 121, 249; --accent-on: #ffffff; --border-accent: rgba(232, 121, 249, 0.25); } [data-mode="light"][data-accent="pride"] { --accent: #c739a4; --accent-light: #e879f9; --accent-dim: #8b3ad6; --accent-rgb: 199, 57, 164; --accent-on: #ffffff; --border-accent: rgba(199, 57, 164, 0.2); } /* ---------- btn-primary text color ---------- Bootstrap hardcodes --bs-btn-color: #fff. Override so accents like forest/sunrise (which need dark text for contrast) stay legible. */ .btn-primary { --bs-btn-color: var(--accent-on); --bs-btn-hover-color: var(--accent-on); --bs-btn-active-color: var(--accent-on); --bs-btn-disabled-color: var(--accent-on); } /* ========================================================================== Body Background — driven by data-bg + data-mode + data-accent ========================================================================== Default (no data-bg attr) falls through to aurora behavior to keep unauthenticated pages and any caller-without-context looking right. ========================================================================== */ body, body[data-bg="aurora"] { background-image: linear-gradient(rgba(var(--accent-rgb), 0.02) 1px, transparent 1px), linear-gradient(90deg, rgba(var(--accent-rgb), 0.02) 1px, transparent 1px), radial-gradient(ellipse at 20% 10%, rgba(var(--accent-rgb), 0.14), transparent 55%), radial-gradient(ellipse at 80% 80%, rgba(56, 189, 248, 0.09), transparent 55%); background-size: 60px 60px, 60px 60px, 100% 100%, 100% 100%; } body[data-mode="light"], body[data-mode="light"][data-bg="aurora"] { background-image: linear-gradient(rgba(var(--accent-rgb), 0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(var(--accent-rgb), 0.03) 1px, transparent 1px), radial-gradient(ellipse at 20% 10%, rgba(var(--accent-rgb), 0.06), transparent 55%), radial-gradient(ellipse at 80% 80%, rgba(2, 132, 199, 0.04), transparent 55%); } body[data-bg="flat"] { background-image: none; } /* Pride gets the rainbow radial wash (preserves the existing pride look). */ body[data-accent="pride"][data-bg="aurora"] { background-image: linear-gradient(rgba(232, 121, 249, 0.02) 1px, transparent 1px), linear-gradient(90deg, rgba(232, 121, 249, 0.02) 1px, transparent 1px), radial-gradient(ellipse at 10% 15%, rgba(239, 68, 68, 0.10), transparent 35%), radial-gradient(ellipse at 30% 10%, rgba(245, 158, 11, 0.07), transparent 35%), radial-gradient(ellipse at 50% 8%, rgba(34, 197, 94, 0.07), transparent 35%), radial-gradient(ellipse at 70% 12%, rgba(59, 130, 246, 0.08), transparent 35%), radial-gradient(ellipse at 90% 15%, rgba(168, 85, 247, 0.10), transparent 35%); background-size: 60px 60px, 60px 60px, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%; } /* ========================================================================== Mode + Accent component overrides (navbar / dropdown / nav-link active) ========================================================================== */ /* Navbar background tracks --bg-deep (with reduced alpha for blur) */ [data-mode="light"] .navbar { background: rgba(255, 255, 255, 0.85) !important; border-bottom-color: var(--border); } [data-mode="light"] .navbar-brand, [data-mode="light"] .nav-link, [data-mode="light"] .nav-user-text { color: var(--text-primary) !important; } [data-mode="light"] .btn-nav-logout { color: var(--text-secondary); border-color: var(--border); } [data-mode="light"] .btn-nav-logout:hover { color: var(--text-primary); background: var(--bg-elevated); } [data-mode="light"] .btn-close { filter: none; } [data-mode="light"] footer { color: var(--text-muted); } [data-mode="light"] ::-webkit-scrollbar-track { background: var(--bg-deep); } [data-mode="light"] ::-webkit-scrollbar-thumb { background: #cbd5e1; } [data-mode="light"] ::-webkit-scrollbar-thumb:hover { background: #94a3b8; } /* Storm + dark = the old Midnight feel: pitch-black-ish navbar, no body glow */ [data-mode="dark"][data-accent="storm"] .navbar { background: rgba(0, 0, 0, 0.9) !important; } /* Pride keeps the rainbow border under the navbar */ [data-accent="pride"] .navbar { border-bottom: 2px solid transparent; border-image: linear-gradient(90deg, #ef4444 0%, #f59e0b 17%, #22c55e 33%, #38bdf8 50%, #6366f1 67%, #a855f7 83%, #ec4899 100%) 1; } /* Active nav-link uses the current accent */ .navbar-nav .nav-link.active, .navbar-nav .nav-link[aria-current="page"] { background: rgba(var(--accent-rgb), 0.1); } /* ========================================================================== Motion preference ========================================================================== */ body[data-motion="reduced"] *, body[data-motion="reduced"] *::before, body[data-motion="reduced"] *::after { animation-duration: 0.001s !important; animation-delay: 0s !important; transition-duration: 0.05s !important; } /* ========================================================================== Preferences: Toggle Styles ========================================================================== */ .pref-toggle { cursor: pointer; padding: 10px 14px; border-radius: 8px; transition: background 0.15s; color: var(--text-primary); } .pref-toggle .fw-medium { color: var(--text-primary); } .pref-toggle:hover { background: var(--bg-card-hover); } /* ========================================================================== Dual-Range Slider (Coordination Page) ========================================================================== */ .range-slider-container { position: relative; height: 36px; display: flex; align-items: center; } .range-slider-track { position: absolute; top: 50%; left: 0; right: 0; height: 6px; transform: translateY(-50%); background: var(--bg-elevated); border-radius: 3px; border: 1px solid var(--border); pointer-events: none; } .range-slider-fill { position: absolute; top: 0; height: 100%; background: var(--accent); border-radius: 3px; opacity: 0.6; transition: left 0.05s, width 0.05s; } /* Diamond marker showing actual checked-in count */ .range-slider-marker { position: absolute; top: 50%; width: 8px; height: 8px; background: var(--amber); transform: translate(-50%, -50%) rotate(45deg); border-radius: 1px; pointer-events: none; z-index: 3; box-shadow: 0 0 6px rgba(251, 191, 36, 0.5); } /* Range input thumbs — overlaid on the same track */ .range-slider-thumb { -webkit-appearance: none; appearance: none; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: transparent; pointer-events: none; margin: 0; padding: 0; z-index: 4; } .range-slider-thumb::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 20px; height: 20px; border-radius: 50%; background: var(--accent-light); border: 2px solid var(--bg-deep); cursor: pointer; pointer-events: auto; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4); transition: transform 0.1s, box-shadow 0.1s; } .range-slider-thumb::-webkit-slider-thumb:hover { transform: scale(1.15); box-shadow: 0 2px 10px rgba(var(--accent-rgb), 0.5); } .range-slider-thumb::-webkit-slider-thumb:active { transform: scale(1.2); } .range-slider-thumb::-moz-range-thumb { width: 20px; height: 20px; border-radius: 50%; background: var(--accent-light); border: 2px solid var(--bg-deep); cursor: pointer; pointer-events: auto; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4); } /* Ensure the max slider's thumb is on top when at the same position */ .range-slider-max { z-index: 5; } /* ========================================================================== Hidden Game Cards ========================================================================== */ .hidden-game-card { transition: opacity 0.2s ease; } .hidden-game-card:hover { opacity: 0.85 !important; } /* ========================================================================== No-Crew Onboarding Card ========================================================================== */ .onboarding-card { max-width: 540px; margin: 3rem auto; text-align: center; padding: 2.5rem 2rem; } .onboarding-card .onboarding-icon { font-size: 3rem; color: var(--accent-light); margin-bottom: 1rem; } .onboarding-card h2 { font-size: 1.3rem; font-weight: 700; margin-bottom: 0.75rem; } .onboarding-card p { color: var(--text-secondary); margin-bottom: 1.5rem; } .onboarding-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; } /* ── Coordination session sidebar (desktop) ── */ .session-sidebar { position: sticky; top: 80px; } /* ── Coordination mobile sticky end-session bar ── */ .coordination-mobile-end { position: fixed; bottom: 0; left: 0; right: 0; z-index: 1040; padding: 12px 16px; background: var(--bg-card); border-top: 1px solid var(--border); box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.4); } /* ========================================================================== Ambient backdrop — bg-effects layer + festival confetti ========================================================================== The .bg-effects div is rendered on every page in base.html and painted per data-bg axis value. It sits behind page content (z-index 0). Page wrappers like .container/.card use position: relative implicitly via their stacking context, so no per-page changes are needed. ========================================================================== */ .bg-effects { position: fixed; inset: 0; pointer-events: none; z-index: 0; display: none; } /* Aurora — soft accent-tinted glow drifting behind the page */ body[data-bg="aurora"] .bg-effects { display: block; background: radial-gradient(900px 500px at 12% -10%, rgba(var(--accent-rgb), 0.18), transparent 60%), radial-gradient(800px 600px at 95% 8%, rgba(var(--accent-rgb), 0.14), transparent 60%), radial-gradient(700px 500px at 50% 110%, rgba(var(--accent-rgb), 0.12), transparent 60%); } /* Festival — full rainbow drift (mostly meaningful with pride accent) */ body[data-bg="festival"] .bg-effects { display: block; background: radial-gradient(620px 420px at 14% 18%, rgba(255, 75, 75, 0.30), transparent 60%), radial-gradient(560px 380px at 78% 12%, rgba(255, 209, 102, 0.26), transparent 60%), radial-gradient(640px 460px at 88% 62%, rgba(76, 199, 255, 0.30), transparent 60%), radial-gradient(700px 480px at 22% 78%, rgba(139, 107, 255, 0.30), transparent 60%), radial-gradient(540px 380px at 50% 50%, rgba(255, 121, 198, 0.22), transparent 65%), radial-gradient(500px 360px at 6% 50%, rgba(92, 220, 138, 0.22), transparent 65%); filter: blur(8px) saturate(115%); animation: festivalDrift 22s ease-in-out infinite alternate; } body[data-mode="light"][data-bg="festival"] .bg-effects { opacity: 0.55; filter: blur(10px) saturate(105%); } @keyframes festivalDrift { 0% { transform: translate3d(0, 0, 0) scale(1); } 50% { transform: translate3d(-2%, 1.5%, 0) scale(1.05); } 100% { transform: translate3d(2%, -1%, 0) scale(1.03); } } /* Festival makes cards translucent so the wash bleeds through */ body[data-bg="festival"] .card { background: color-mix(in oklab, var(--bg-card) 78%, transparent); } /* When Festival turns on with the Pride accent, give the topbar a shimmer */ body[data-bg="festival"][data-accent="pride"] .navbar { background: linear-gradient(90deg, transparent, rgba(255,255,255,0.06) 50%, transparent) 0 0 / 200% 100%, rgba(12, 15, 20, 0.85) !important; animation: festivalShimmer 4.5s linear infinite; } @keyframes festivalShimmer { 0% { background-position: -100% 0, 0 0; } 100% { background-position: 200% 0, 0 0; } } /* Confetti — rendered only when bg=festival */ .festival-confetti { display: none; position: fixed; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; } body[data-bg="festival"] .festival-confetti { display: block; } .festival-confetti span { position: absolute; top: 0; width: 10px; height: 10px; border-radius: 2px; opacity: 0.55; will-change: transform; animation: confettiFall linear infinite; } .festival-confetti span:nth-child(odd) { width: 6px; height: 6px; border-radius: 50%; } .festival-confetti span:nth-child(3n) { width: 14px; height: 4px; border-radius: 2px; } body[data-mode="light"] .festival-confetti span { opacity: 0.4; } body[data-motion="reduced"] .festival-confetti span { animation: none; opacity: 0; } @keyframes confettiFall { 0% { transform: translate3d(0, -10vh, 0) rotate(0deg); opacity: 0; } 8% { opacity: 0.55; } 100% { transform: translate3d(var(--dx, 20px), 110vh, 0) rotate(540deg); opacity: 0.55; } } /* Reduced motion — kill bg drift wherever it appears */ body[data-motion="reduced"] .bg-effects { animation: none !important; } /* ========================================================================== Appearance Studio — segmented control / swatches / bg cards / presets ========================================================================== Lives on the profile page. Drives the four data attributes on live, then submits the hidden inputs on Save Preferences. ========================================================================== */ .appearance-row { display: flex; flex-wrap: wrap; gap: 18px; margin-bottom: 18px; } .appearance-field { min-width: 0; } .appearance-field-grow { flex: 1 1 220px; } .appearance-field-head { font-size: 0.78rem; font-weight: 600; color: var(--text-primary); margin-bottom: 8px; letter-spacing: 0.02em; } .appearance-hint { font-weight: 400; color: var(--text-muted); font-size: 0.78rem; } /* Mode segmented control */ .seg-mode { display: inline-flex; padding: 3px; border-radius: 10px; background: var(--bg-surface); border: 1px solid var(--border); width: 100%; } .seg-mode .seg-btn { flex: 1; border: none; background: transparent; padding: 7px 10px; border-radius: 7px; font-size: 0.8rem; font-weight: 500; color: var(--text-secondary); display: inline-flex; align-items: center; justify-content: center; gap: 6px; cursor: pointer; transition: background 0.15s, color 0.15s; } .seg-mode .seg-btn:hover { color: var(--text-primary); } .seg-mode .seg-btn.on { background: var(--bg-elevated); color: var(--text-primary); box-shadow: inset 0 0 0 1px var(--border); } .seg-mode .seg-btn i { font-size: 0.85rem; } /* Accent swatches */ .accents { display: flex; flex-wrap: wrap; gap: 10px; } .swatch { width: 38px; height: 38px; border-radius: 10px; border: 1px solid var(--border); cursor: pointer; position: relative; background: var(--swatch-bg, #888); transition: transform 0.1s, box-shadow 0.15s, border-color 0.15s; padding: 0; } .swatch:hover { transform: translateY(-1px); border-color: var(--border-strong, var(--text-muted)); } .swatch.on { box-shadow: 0 0 0 2px var(--bg-deep), 0 0 0 4px var(--accent); } .swatch .swatch-name { position: absolute; bottom: -18px; left: 50%; transform: translateX(-50%); font-size: 10.5px; color: var(--text-muted); white-space: nowrap; pointer-events: none; opacity: 0; transition: opacity 0.15s; } .swatch:hover .swatch-name { opacity: 1; } .sw-slate { --swatch-bg: linear-gradient(135deg, #7c8cff, #5d6cff); } .sw-storm { --swatch-bg: linear-gradient(135deg, #4f9cff, #2d80f0); } .sw-forest { --swatch-bg: linear-gradient(135deg, #67e3a8, #22c97c); } .sw-sunrise { --swatch-bg: linear-gradient(135deg, #ffba6e, #ff6f3c); } .sw-pride { --swatch-bg: linear-gradient(90deg, #ff4b4b, #ff8c42, #ffd166, #5cdc8a, #4cc7ff, #8b6bff, #ff79c6); } /* Background option cards */ .bg-options { display: flex; gap: 10px; } .bg-opt { flex: 1; height: 56px; border-radius: 10px; border: 1px solid var(--border); cursor: pointer; position: relative; overflow: hidden; display: flex; align-items: flex-end; justify-content: center; background: var(--bg-surface); transition: border-color 0.15s, transform 0.1s; padding: 0; } .bg-opt:hover { transform: translateY(-1px); } .bg-opt.on { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); } .bg-opt-name { font-size: 0.7rem; font-weight: 500; color: var(--text-primary); position: relative; z-index: 2; background: var(--bg-card); padding: 1px 7px 2px; border-radius: 4px 4px 0 0; border: 1px solid var(--border); border-bottom: none; margin-bottom: 0; } .bg-opt-preview { position: absolute; inset: 0; pointer-events: none; } .bg-flat .bg-opt-preview { background: transparent; } .bg-aurora .bg-opt-preview { background: radial-gradient(80px 50px at 20% 20%, rgba(var(--accent-rgb), 0.35), transparent 60%), radial-gradient(80px 60px at 80% 80%, rgba(var(--accent-rgb), 0.30), transparent 60%); } .bg-festival .bg-opt-preview { background: radial-gradient(60px 50px at 18% 25%, rgba(255, 75, 75, 0.6), transparent 60%), radial-gradient(60px 50px at 78% 22%, rgba(255, 209, 102, 0.6), transparent 60%), radial-gradient(60px 50px at 28% 78%, rgba(76, 199, 255, 0.6), transparent 60%), radial-gradient(60px 50px at 80% 80%, rgba(139, 107, 255, 0.6), transparent 60%); filter: blur(2px); } /* Quick presets */ .appearance-presets-wrap { margin-top: 6px; } .presets { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; } .preset-chip { padding: 4px 10px; border-radius: 999px; background: var(--bg-surface); border: 1px solid var(--border); color: var(--text-secondary); font-size: 0.78rem; display: inline-flex; align-items: center; gap: 6px; cursor: pointer; transition: color 0.15s, border-color 0.15s; } .preset-chip:hover { color: var(--text-primary); border-color: var(--text-muted); } .preset-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; } .preset-dot-slate { background: #5d6cff; } .preset-dot-storm { background: #2d80f0; } .preset-dot-forest { background: #16a763; } .preset-dot-sunrise { background: #ff6f3c; } .preset-dot-pride { background: linear-gradient(90deg, #ff4b4b, #ffd166, #5cdc8a, #4cc7ff, #8b6bff); } /* Live preview tag */ .appearance-preview-tag { margin-top: 14px; padding: 10px 12px; border-radius: 10px; background: var(--bg-surface); border: 1px solid var(--border); display: flex; align-items: center; gap: 10px; font-size: 0.78rem; color: var(--text-secondary); } .appearance-preview-tag strong { color: var(--text-primary); font-weight: 500; } .appearance-preview-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.2); flex-shrink: 0; } /* Card-title trailing summary badge */ #appearance-summary { margin-left: auto; font-size: 0.68rem; font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-secondary); background: var(--bg-elevated); border: 1px solid var(--border); padding: 2px 8px; border-radius: 999px; } /* ========================================================================== Profile sidebar — Your Crews widget ========================================================================== Per-crew row with shield icon, name, role badge, member count, and chevron. Shield color is set inline via --cs (derived from crew.pk for stability). */ .crew-row { display: flex; align-items: center; gap: 12px; padding: 10px 8px; border-radius: 8px; text-decoration: none; color: inherit; transition: background 0.15s; } .crew-row:hover { background: var(--bg-card-hover); color: inherit; } .crew-row + .crew-row { border-top: 1px solid var(--border); border-radius: 0; } .crew-row + .crew-row:hover { border-radius: 8px; } .crew-shield { width: 36px; height: 36px; border-radius: 8px; background: color-mix(in oklab, var(--cs, var(--accent)) 18%, transparent); color: var(--cs, var(--accent)); display: grid; place-items: center; flex-shrink: 0; border: 1px solid color-mix(in oklab, var(--cs, var(--accent)) 35%, transparent); } .crew-shield i { font-size: 1.05rem; } .crew-meta { flex: 1; min-width: 0; } .crew-name { font-size: 0.875rem; font-weight: 500; color: var(--text-primary); display: flex; align-items: center; gap: 6px; } .crew-badge { font-size: 0.62rem; padding: 1px 7px; border-radius: 999px; background: rgba(var(--accent-rgb), 0.15); color: var(--accent); border: 1px solid rgba(var(--accent-rgb), 0.3); font-weight: 500; letter-spacing: 0.02em; text-transform: uppercase; } .crew-sub { font-size: 0.75rem; color: var(--text-secondary); margin-top: 2px; } .crew-arrow { color: var(--text-muted); font-size: 0.85rem; flex-shrink: 0; }