/* ── Spieleabend — Design System ─────────────────────────────────────── */ /* ── 1. Google Fonts ──────────────────────────────────────────────────── */ /* Loaded via in every . Token below. */ /* ── 2. Design tokens ─────────────────────────────────────────────────── */ :root { /* Background */ --bg-primary: #0F1021; --bg-secondary: #1B1D33; --bg-tertiary: #232543; /* Text */ --text-primary: #FFFFFF; --text-secondary: #C8CCE4; --text-tertiary: #8E94B8; /* Primary accent — purple / Spiele */ --accent: #B37DFF; --accent-light: #C9A3FF; --accent-subtle: rgba(179, 125, 255, 0.15); --accent-rgb: 179, 125, 255; /* Semantic color system — one color per domain */ --color-pink: #FF5FBF; /* Termine / Events */ --color-pink-subtle: rgba(255, 95, 191, 0.15); --color-pink-border: rgba(255, 95, 191, 0.3); --color-blue: #54C6FF; /* Abstimmung / Voting */ --color-blue-subtle: rgba(84, 198, 255, 0.15); --color-blue-border: rgba(84, 198, 255, 0.3); --color-yellow: #FFD84D; /* Bewertung / Ratings / Stars */ --color-yellow-subtle: rgba(255, 216, 77, 0.15); --color-yellow-border: rgba(255, 216, 77, 0.3); --color-green: #7EF27E; /* Bot / Status / Success */ --color-green-subtle: rgba(126, 242, 126, 0.15); --color-green-border: rgba(126, 242, 126, 0.3); /* Semantic aliases */ --color-success-text: var(--color-green); --color-success-bg: var(--color-green-subtle); --color-warning-text: var(--color-yellow); --color-warning-bg: var(--color-yellow-subtle); --color-error-text: #FF6B6B; --color-error-bg: rgba(255, 107, 107, 0.15); --color-info-text: var(--color-blue); --color-info-bg: var(--color-blue-subtle); --color-rose-text: var(--color-pink); --color-rose-bg: var(--color-pink-subtle); /* Borders */ --border: rgba(179, 125, 255, 0.12); --border-strong: rgba(179, 125, 255, 0.28); /* Card color variants (keep these token names) */ --card-orange-border: var(--color-pink); --card-orange-bg: var(--color-pink-subtle); --card-orange-text: var(--color-pink); --card-indigo-border: var(--color-blue); --card-indigo-bg: var(--color-blue-subtle); --card-indigo-text: var(--color-blue); --card-green-border: var(--color-green); --card-green-bg: var(--color-green-subtle); --card-green-text: var(--color-green); --card-amber-border: var(--color-yellow); --card-amber-bg: var(--color-yellow-subtle); --card-amber-text: var(--color-yellow); /* Typography */ --font-display: 'Nunito', system-ui, sans-serif; --font-body: 'Nunito', system-ui, sans-serif; --font-mono: 'JetBrains Mono', 'Fira Code', monospace; /* Type scale */ --text-display: clamp(2.25rem, 5vw, 3.75rem); --text-h1: clamp(1.625rem, 3.5vw, 2.5rem); --text-h2: clamp(1.2rem, 2.5vw, 1.625rem); --text-h3: 1.125rem; --text-body: 1rem; --text-small: 0.875rem; --text-xs: 0.75rem; /* Spacing — 8px base grid */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; --space-9: 96px; --space-10: 128px; /* Layout */ --max-width: 1200px; --content-width: 720px; --section-padding: clamp(var(--space-7), 8vw, var(--space-9)) var(--space-5); --card-padding: var(--space-5) var(--space-5); --border-radius-sm: 8px; --border-radius-md: 16px; --border-radius-lg: 24px; --border-radius-xl: 32px; /* Motion */ --transition-fast: 100ms ease; --transition-base: 150ms ease; --transition-slow: 300ms ease; --transition-spring: 300ms cubic-bezier(0.34, 1.56, 0.64, 1); /* Bootstrap overrides */ --bs-body-bg: var(--bg-primary); --bs-body-color: var(--text-primary); --bs-primary: var(--accent); --bs-primary-rgb: 179, 125, 255; --bs-border-color: var(--border); --bs-card-bg: var(--bg-secondary); --bs-card-cap-bg: var(--bg-tertiary); --bs-card-border-color: var(--border); --bs-list-group-bg: transparent; --bs-list-group-border-color: var(--border); --bs-modal-bg: var(--bg-secondary); --bs-table-bg: transparent; --bs-table-color: var(--text-primary); --bs-table-border-color: var(--border); --bs-table-hover-bg: rgba(var(--accent-rgb), 0.05); /* Bootstrap 5.3 color-mode variables — override all light defaults */ --bs-secondary-bg: var(--bg-secondary); --bs-tertiary-bg: var(--bg-tertiary); --bs-secondary-bg-rgb: 27, 29, 51; --bs-tertiary-bg-rgb: 35, 37, 67; --bs-emphasis-color: var(--text-primary); --bs-emphasis-color-rgb: 255, 255, 255; --bs-secondary-color: var(--text-secondary); --bs-secondary-color-rgb: 200, 204, 228; --bs-tertiary-color: var(--text-tertiary); --bs-tertiary-color-rgb: 142, 148, 184; --bs-border-color-translucent: var(--border); --bs-link-color: var(--accent-light); --bs-link-color-rgb: 201, 163, 255; --bs-link-hover-color: var(--accent); --bs-body-color-rgb: 255, 255, 255; --bs-body-bg-rgb: 15, 16, 33; --bs-heading-color: var(--text-primary); --bs-form-control-bg: var(--bg-tertiary); --bs-input-btn-focus-color: rgba(var(--accent-rgb), 0.25); /* Tell browser to render native controls in dark mode */ color-scheme: dark; } /* Dark mode — always active. data-theme="light" maps to same values so it has no effect. */ [data-theme="dark"], [data-theme="light"] { /* All tokens already defined in :root above — no overrides needed */ } /* ── 3. Base styles ───────────────────────────────────────────────────── */ /* * Gradient lives on (root canvas), NOT body. * background-attachment: fixed on html avoids the well-known stacking-context * bug where fixed gradients disappear behind children with z-index or transform. * Transparent elements anywhere in the tree then correctly reveal this gradient. */ html { background: linear-gradient(160deg, #0F1021 0%, #171233 100%); background-attachment: fixed; min-height: 100vh; margin: 0; padding: 0; } body { background: transparent; min-height: 100vh; font-family: var(--font-body); color: var(--text-primary); -webkit-font-smoothing: antialiased; line-height: 1.7; font-size: var(--text-body); isolation: isolate; /* confetti z-index: -1 stacks above html gradient, below all content */ } /* Scrollbar */ ::-webkit-scrollbar { width: 6px; height: 6px; } ::-webkit-scrollbar-track { background: var(--bg-primary); } ::-webkit-scrollbar-thumb { background: var(--bg-tertiary); border-radius: 99px; } ::-webkit-scrollbar-thumb:hover { background: var(--text-tertiary); } h1, h2, h3, h4, h5, h6, .navbar-brand, .card-title, .display-1, .display-2, .display-3, .display-4, .display-5, .display-6 { font-family: var(--font-display); } h1, h2, h3, h4, h5, h6 { color: var(--text-primary); line-height: 1.1; } a { color: var(--accent-light); transition: color var(--transition-base); } a:hover { color: var(--accent); } /* Focus ring — applies to all interactive elements */ :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } /* ──────────────────────────────────────────────────────────────────────── 3. Navigation ──────────────────────────────────────────────────────────────────────── */ .sb-nav { position: sticky; top: 0; z-index: 100; background: rgba(15, 16, 33, 0.82); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-bottom: 1px solid var(--border); } .sb-nav .navbar-brand { font-family: var(--font-display); font-weight: 800; font-size: 1.1rem; color: var(--text-primary) !important; letter-spacing: -0.02em; } .sb-nav .nav-link { color: var(--text-secondary) !important; font-size: var(--text-small); font-weight: 500; padding: var(--space-2) var(--space-3) !important; border-radius: var(--border-radius-sm); transition: color var(--transition-base), background var(--transition-base); } .sb-nav .nav-link:hover { color: var(--text-primary) !important; background: rgba(var(--accent-rgb), 0.08); } .sb-nav .nav-link.active { color: var(--accent) !important; background: var(--accent-subtle); } .sb-nav .btn-outline-light { border: 0.5px solid var(--border-strong); color: var(--text-secondary); font-size: 0.8rem; background: transparent; } .sb-nav .btn-outline-light:hover { background: var(--bg-tertiary); color: var(--text-primary); border-color: var(--border-strong); } .navbar-toggler { border-color: var(--border-strong) !important; background: transparent; } .navbar-toggler-icon { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(161,161,170,0.8)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important; } /* ──────────────────────────────────────────────────────────────────────── 4. Cards (DESIGN.md §5) ──────────────────────────────────────────────────────────────────────── */ .card { background: rgba(27, 29, 51, 0.65); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 0.5px solid var(--border); border-radius: var(--border-radius-lg); transition: border-color var(--transition-base); box-shadow: none; } .card:hover { border-color: var(--border-strong); } /* Primary content cards — accent hover border */ .sb-card:hover { border-color: var(--accent) !important; } .card-title { font-family: var(--font-display); font-weight: 700; color: var(--text-primary); } .card-header { background: rgba(35, 37, 67, 0.5) !important; border-bottom: 0.5px solid var(--border); font-family: var(--font-display); font-weight: 600; font-size: var(--text-small); color: var(--text-primary); padding: var(--space-3) var(--space-5); border-radius: var(--border-radius-lg) var(--border-radius-lg) 0 0; } .card-body { padding: var(--space-5); } .card-footer { background: rgba(35, 37, 67, 0.5) !important; border-top: 0.5px solid var(--border); padding: var(--space-3) var(--space-5); border-radius: 0 0 var(--border-radius-lg) var(--border-radius-lg); } /* ──────────────────────────────────────────────────────────────────────── 5. Buttons (DESIGN.md §5) ──────────────────────────────────────────────────────────────────────── */ .btn { border-radius: var(--border-radius-md); font-family: var(--font-body); font-weight: 500; font-size: var(--text-body); min-height: 44px; padding: 12px 24px; display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); transition: background var(--transition-base), border-color var(--transition-base), color var(--transition-base), transform var(--transition-fast); cursor: pointer; text-decoration: none; border: none; } .btn:active { transform: scale(0.98); } .btn-sm { min-height: 36px; padding: 8px 16px; font-size: var(--text-small); border-radius: var(--border-radius-sm); } .btn-xs { min-height: 30px; padding: var(--space-1) var(--space-3); font-size: var(--text-xs); border-radius: var(--border-radius-sm); } .btn-lg { min-height: 52px; padding: 14px 32px; font-size: 1.0625rem; } /* Primary CTA */ .btn-primary { background: var(--accent); color: #fff; border: none; } .btn-primary:hover, .btn-primary:focus { background: var(--accent-light); color: #fff; } /* Secondary */ .btn-secondary { background: transparent; color: var(--text-primary); border: 0.5px solid var(--border-strong); } .btn-secondary:hover, .btn-secondary:focus { background: var(--bg-tertiary); color: var(--text-primary); border-color: var(--border-strong); } /* Outline primary */ .btn-outline-primary { background: transparent; color: var(--accent-light); border: 0.5px solid var(--border-strong); } .btn-outline-primary:hover, .btn-outline-primary:focus { background: var(--accent-subtle); color: var(--accent-light); border-color: var(--accent); } /* Outline secondary */ .btn-outline-secondary { background: transparent; color: var(--text-secondary); border: 0.5px solid var(--border-strong); } .btn-outline-secondary:hover, .btn-outline-secondary:focus { background: var(--bg-tertiary); color: var(--text-primary); border-color: var(--border-strong); } /* Danger */ .btn-danger { background: var(--color-error-bg); color: var(--color-error-text); border: 0.5px solid var(--color-error-text); } .btn-danger:hover, .btn-danger:focus { background: var(--color-error-text); color: #fff; } /* Outline danger */ .btn-outline-danger { background: transparent; color: var(--color-error-text); border: 0.5px solid var(--color-error-text); } .btn-outline-danger:hover, .btn-outline-danger:focus { background: var(--color-error-bg); color: var(--color-error-text); } /* Success */ .btn-success { background: var(--color-success-bg); color: var(--color-success-text); border: 0.5px solid var(--color-success-text); } .btn-success:hover, .btn-success:focus { background: var(--color-success-text); color: #fff; } /* Link */ .btn-link { background: transparent; border: none; color: var(--accent-light); text-decoration: none; padding: 0; min-height: unset; } .btn-link:hover { color: var(--accent); } /* Close button */ .btn-close { filter: invert(0.7) sepia(0.1); opacity: 0.7; } .btn-close:hover { opacity: 1; } /* ──────────────────────────────────────────────────────────────────────── 6. Forms ──────────────────────────────────────────────────────────────────────── */ .form-control, .form-select { background-color: rgba(35, 37, 67, 0.75) !important; border: 0.5px solid var(--border-strong) !important; color: var(--text-primary) !important; border-radius: var(--border-radius-sm); padding: var(--space-3) var(--space-4); font-family: var(--font-body); font-size: var(--text-body); min-height: 44px; transition: border-color var(--transition-base); } .form-control::placeholder { color: var(--text-tertiary) !important; } .form-control:focus, .form-select:focus { background-color: rgba(35, 37, 67, 0.95) !important; border-color: var(--accent) !important; color: var(--text-primary) !important; box-shadow: none; outline: 2px solid var(--accent); outline-offset: 2px; } .form-control-sm, .form-select-sm { min-height: 36px; padding: var(--space-2) var(--space-3); font-size: var(--text-small); } .form-select option { background: var(--bg-tertiary); color: var(--text-primary); } .form-label { color: var(--text-secondary); font-size: var(--text-small); font-weight: 500; margin-bottom: var(--space-2); font-family: var(--font-body); } .form-text { color: var(--text-tertiary); font-size: var(--text-small); } .form-check-input { background-color: var(--bg-tertiary); border: 0.5px solid var(--border-strong); width: 18px; height: 18px; } .form-check-input:checked { background-color: var(--accent); border-color: var(--accent); } .form-check-input:focus { box-shadow: none; outline: 2px solid var(--accent); outline-offset: 2px; } .input-group-text { background: var(--bg-tertiary); border-color: var(--border-strong); color: var(--text-secondary); font-family: var(--font-body); } /* ──────────────────────────────────────────────────────────────────────── 7. Tables ──────────────────────────────────────────────────────────────────────── */ .table { --bs-table-color: var(--text-primary); --bs-table-bg: transparent; --bs-table-hover-bg: rgba(var(--accent-rgb), 0.04); border-color: var(--border); font-size: var(--text-small); } .table td, .table th { border-color: var(--border); vertical-align: middle; padding: var(--space-3) var(--space-4); color: var(--text-primary); } .table thead th { background: var(--bg-tertiary); color: var(--text-tertiary); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.07em; font-weight: 500; border-bottom: 0.5px solid var(--border-strong) !important; font-family: var(--font-body); } .table-hover > tbody > tr:hover > * { background-color: rgba(var(--accent-rgb), 0.04); color: var(--text-primary); } .table-light { --bs-table-bg: var(--bg-tertiary); } .sortable th[data-sort] { cursor: pointer; user-select: none; } .sortable th[data-sort]::after { content: ' ⇅'; opacity: 0.35; font-size: 0.65em; } .sortable th[data-sort].asc::after { content: ' ↑'; opacity: 1; color: var(--accent-light); } .sortable th[data-sort].desc::after { content: ' ↓'; opacity: 1; color: var(--accent-light); } /* ──────────────────────────────────────────────────────────────────────── 8. Badges (DESIGN.md §5) ──────────────────────────────────────────────────────────────────────── */ .badge { background: var(--accent-subtle); color: var(--accent); font-family: var(--font-body); font-size: var(--text-xs); font-weight: 500; padding: 3px 10px; border-radius: 99px; letter-spacing: 0.04em; text-transform: uppercase; border: 0.5px solid var(--border-strong); } .bg-success, .bg-primary { background: var(--color-success-bg) !important; color: var(--color-success-text) !important; border: 0.5px solid var(--color-success-text) !important; } .bg-warning { background: var(--color-warning-bg) !important; color: var(--color-warning-text) !important; border: 0.5px solid var(--color-warning-text) !important; } .bg-danger { background: var(--color-error-bg) !important; color: var(--color-error-text) !important; border: 0.5px solid var(--color-error-text) !important; } .bg-info { background: var(--color-info-bg) !important; color: var(--color-info-text) !important; border: 0.5px solid var(--color-info-text) !important; } .bg-secondary { background: var(--bg-tertiary) !important; color: var(--text-secondary) !important; border: 0.5px solid var(--border-strong) !important; } .bg-light { background: var(--bg-tertiary) !important; color: var(--text-primary) !important; } /* Override Bootstrap text-dark on badges */ .text-dark { color: var(--text-primary) !important; } /* Status badges */ .badge-planned { background: var(--color-info-bg); color: var(--color-info-text); border: 0.5px solid var(--color-info-text); } .badge-active { background: var(--color-success-bg); color: var(--color-success-text); border: 0.5px solid var(--color-success-text); } .badge-done { background: var(--bg-tertiary); color: var(--text-secondary); border: 0.5px solid var(--border-strong); } .badge-cancelled { background: var(--color-error-bg); color: var(--color-error-text); border: 0.5px solid var(--color-error-text); } /* ──────────────────────────────────────────────────────────────────────── 9. Alerts ──────────────────────────────────────────────────────────────────────── */ .alert { border-radius: var(--border-radius-md); font-size: var(--text-small); border: 0.5px solid; font-family: var(--font-body); } .alert-success { background: var(--color-success-bg); border-color: var(--color-success-text); color: var(--color-success-text); } .alert-danger { background: var(--color-error-bg); border-color: var(--color-error-text); color: var(--color-error-text); } .alert-warning { background: var(--color-warning-bg); border-color: var(--color-warning-text); color: var(--color-warning-text); } .alert-info { background: var(--color-info-bg); border-color: var(--color-info-text); color: var(--color-info-text); } /* ──────────────────────────────────────────────────────────────────────── 10. Modals ──────────────────────────────────────────────────────────────────────── */ .modal-content { background: var(--bg-secondary); border: 0.5px solid var(--border-strong); border-radius: var(--border-radius-lg); color: var(--text-primary); box-shadow: none; } .modal-header { background: var(--bg-tertiary); border-bottom: 0.5px solid var(--border); border-radius: var(--border-radius-lg) var(--border-radius-lg) 0 0; padding: var(--space-4) var(--space-5); } .modal-title { font-family: var(--font-display); font-weight: 700; color: var(--text-primary); } .modal-body { padding: var(--space-5); color: var(--text-primary); } .modal-footer { border-top: 0.5px solid var(--border); padding: var(--space-4) var(--space-5); display: flex; flex-direction: row; justify-content: flex-end; gap: var(--space-2); flex-wrap: wrap; } .modal-backdrop.show { backdrop-filter: blur(4px); } .modal-confirm .modal-header { border-top: 2px solid var(--color-error-text); } /* ──────────────────────────────────────────────────────────────────────── 11. List groups ──────────────────────────────────────────────────────────────────────── */ .list-group-item { background: transparent; border-color: var(--border); color: var(--text-primary); transition: background var(--transition-fast); font-family: var(--font-body); } .list-group-item:hover { background: rgba(var(--accent-rgb), 0.04); } .list-group-flush .list-group-item:first-child { border-top: none; } .list-group-flush .list-group-item:last-child { border-bottom: none; } /* ──────────────────────────────────────────────────────────────────────── 12. Tabs & breadcrumbs ──────────────────────────────────────────────────────────────────────── */ .breadcrumb-item a { color: var(--accent-light); text-decoration: none; } .breadcrumb-item a:hover { color: var(--accent); } .breadcrumb-item.active, .breadcrumb-item + .breadcrumb-item::before { color: var(--text-tertiary); } .nav-tabs { border-bottom-color: var(--border); } .nav-tabs .nav-link { color: var(--text-secondary); border-color: transparent; border-radius: var(--border-radius-sm) var(--border-radius-sm) 0 0; font-size: var(--text-small); font-family: var(--font-body); } .nav-tabs .nav-link:hover { color: var(--text-primary); border-color: var(--border); background: rgba(var(--accent-rgb), 0.05); } .nav-tabs .nav-link.active { background: var(--bg-secondary); border-color: var(--border) var(--border) var(--bg-secondary); color: var(--accent-light); } /* ──────────────────────────────────────────────────────────────────────── 13. Progress ──────────────────────────────────────────────────────────────────────── */ .progress { background: var(--bg-tertiary); border-radius: 99px; } .progress-bar { background: var(--accent); } /* ──────────────────────────────────────────────────────────────────────── 14. Dropdown ──────────────────────────────────────────────────────────────────────── */ .dropdown-menu { background: var(--bg-secondary); border: 0.5px solid var(--border-strong); border-radius: var(--border-radius-md); } .dropdown-item { color: var(--text-primary); font-family: var(--font-body); font-size: var(--text-small); padding: var(--space-2) var(--space-4); } .dropdown-item:hover, .dropdown-item:focus { background: var(--bg-tertiary); color: var(--text-primary); } .dropdown-divider { border-color: var(--border); } /* ──────────────────────────────────────────────────────────────────────── 15. Public hero ──────────────────────────────────────────────────────────────────────── */ .sb-hero { background: var(--bg-secondary); border: 0.5px solid var(--border); border-top: 4px solid var(--accent); border-radius: var(--border-radius-xl); padding: var(--space-7) var(--space-5); color: var(--text-primary); } .sb-hero h1 { font-family: var(--font-display); font-weight: 800; font-size: var(--text-h1); color: var(--text-primary); margin-bottom: var(--space-2); } .sb-hero p { color: var(--text-secondary); } /* ──────────────────────────────────────────────────────────────────────── 16. Custom components ──────────────────────────────────────────────────────────────────────── */ .game-slot-card { background: var(--bg-tertiary); border: 0.5px solid var(--border); border-radius: var(--border-radius-md); padding: var(--space-3) var(--space-4); transition: border-color var(--transition-base); } .game-slot-card:hover { border-color: var(--accent); } .game-slot-card .game-name { font-weight: 500; color: var(--text-primary); } .game-slot-card .game-meta { font-size: var(--text-xs); color: var(--text-tertiary); } .game-slot-empty { border: 1px dashed var(--border-strong); border-radius: var(--border-radius-md); padding: var(--space-3) var(--space-4); color: var(--text-tertiary); transition: all var(--transition-base); } .game-slot-empty:hover { border-color: var(--accent); color: var(--accent-light); background: var(--accent-subtle); } .participant-item { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-5); border-bottom: 0.5px solid var(--border); transition: background var(--transition-fast); } .participant-item:last-child { border-bottom: none; } .participant-item:hover { background: rgba(var(--accent-rgb), 0.04); } .participant-name { font-weight: 500; flex-grow: 1; } .event-card:hover { border-color: var(--accent) !important; } /* ──────────────────────────────────────────────────────────────────────── 17. Stars ──────────────────────────────────────────────────────────────────────── */ .stars-input .star-btn { background: none; border: none; font-size: 1.4rem; cursor: pointer; color: var(--bg-tertiary); padding: 0 2px; min-height: 44px; transition: color var(--transition-base); } .stars-input .star-btn.active { color: var(--color-warning-text); } .stars-input:hover .star-btn { color: var(--color-warning-text); } .stars-input .star-btn:hover ~ .star-btn { color: var(--bg-tertiary); } /* ──────────────────────────────────────────────────────────────────────── 18. Utility ──────────────────────────────────────────────────────────────────────── */ .accent-text { color: var(--accent-light); font-weight: 700; } .text-muted { color: var(--text-secondary) !important; } .yt-dot { display: inline-block; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--color-error-text); margin-left: 0.3rem; vertical-align: middle; } .cursor-pointer { cursor: pointer; } .text-truncate-200 { max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: inline-block; vertical-align: bottom; } /* ──────────────────────────────────────────────────────────────────────── 19. Motion (DESIGN.md §6) ──────────────────────────────────────────────────────────────────────── */ @media (prefers-reduced-motion: no-preference) { .fade-in { animation: fadeUp var(--transition-slow) ease both; } @keyframes fadeUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } } /* ──────────────────────────────────────────────────────────────────────── 20. Responsive ──────────────────────────────────────────────────────────────────────── */ @media (max-width: 576px) { .btn { min-height: 44px; } .btn-sm { min-height: 44px; } .modal-dialog { margin: var(--space-2); } .card { border-radius: var(--border-radius-md); } } /* ──────────────────────────────────────────────────────────────────────── 21. Index landing cards ──────────────────────────────────────────────────────────────────────── */ .index-card { display: flex; align-items: flex-start; gap: var(--space-5); padding: var(--space-6); border-radius: var(--border-radius-xl); border: 0.5px solid var(--border); text-decoration: none; color: var(--text-primary); transition: border-color var(--transition-base), transform var(--transition-base); min-height: 44px; } .index-card:hover { color: var(--text-primary); text-decoration: none; } .index-card:active { transform: scale(0.99); } .index-card--events { background: var(--card-orange-bg); border-color: var(--card-orange-border); border-left: 4px solid var(--card-orange-border); } .index-card--events:hover { border-color: var(--card-orange-border); } .index-card--games { background: var(--card-amber-bg); border-color: var(--card-amber-border); border-left: 4px solid var(--card-amber-border); } .index-card--games:hover { border-color: var(--card-amber-border); } .index-card__icon { font-size: 2rem; line-height: 1; flex-shrink: 0; margin-top: 2px; } .index-card__title { font-family: var(--font-display); font-weight: 700; font-size: var(--text-h2); color: var(--text-primary); margin: 0 0 var(--space-2); line-height: 1.15; } .index-card--events .index-card__title { color: var(--card-orange-text); } .index-card--games .index-card__title { color: var(--card-amber-text); } .index-card__desc { color: var(--text-secondary); font-size: var(--text-small); margin: 0 0 var(--space-3); line-height: 1.5; } .index-card__meta { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--text-xs); font-weight: 500; padding: 3px 10px; border-radius: 99px; letter-spacing: 0.04em; text-transform: uppercase; } .index-card--events .index-card__meta { background: var(--card-orange-bg); color: var(--card-orange-text); border: 0.5px solid var(--card-orange-border); } .index-card--games .index-card__meta { background: var(--card-amber-bg); color: var(--card-amber-text); border: 0.5px solid var(--card-amber-border); } /* ──────────────────────────────────────────────────────────────────────── 22. Events / register page ──────────────────────────────────────────────────────────────────────── */ .event-accent-1 { border-left: 4px solid var(--card-orange-border) !important; background: var(--card-orange-bg) !important; } .event-accent-2 { border-left: 4px solid var(--card-green-border) !important; background: var(--card-green-bg) !important; } .participants-list { list-style: none; padding: 0; margin: 0; } .participants-list li { padding: var(--space-1) 0; color: var(--text-secondary); font-size: var(--text-small); border-bottom: 0.5px solid var(--border); line-height: 1.5; } .participants-list li:last-child { border-bottom: none; } .game-vote-list { list-style: none; padding: 0; margin: 0; } .game-vote-list li { display: flex; align-items: center; justify-content: space-between; padding: var(--space-1) 0; font-size: var(--text-small); color: var(--text-secondary); border-bottom: 0.5px solid var(--border); } .game-vote-list li:last-child { border-bottom: none; } .game-vote-item-link { display: flex; align-items: center; gap: var(--space-2); text-decoration: none; color: inherit; flex: 1; min-width: 0; } .game-vote-item-link:hover span, .game-vote-item-link:focus span { color: var(--accent-light); } .game-vote-item-link span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .game-vote-list .vote-count { font-size: var(--text-xs); font-weight: 500; color: var(--accent-light); background: var(--accent-subtle); padding: 2px 8px; border-radius: 99px; white-space: nowrap; } /* ──────────────────────────────────────────────────────────────────────── 23. Game library cards (games.php) ──────────────────────────────────────────────────────────────────────── */ .game-card { display: flex; flex-direction: column; background: var(--bg-secondary); border: 0.5px solid var(--border); border-radius: var(--border-radius-lg); overflow: hidden; text-decoration: none; color: var(--text-primary); transition: border-color var(--transition-base), transform var(--transition-base); height: 100%; } .game-card:hover { border-color: var(--accent); transform: translateY(-2px); color: var(--text-primary); text-decoration: none; } .game-thumb { aspect-ratio: 16 / 9; overflow: hidden; background: var(--bg-tertiary); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .game-thumb img { width: 100%; height: 100%; object-fit: cover; } .game-thumb-placeholder { font-family: var(--font-display); font-size: 2.5rem; font-weight: 800; color: var(--accent); opacity: 0.4; user-select: none; } .game-card-body { padding: var(--space-4); flex-grow: 1; display: flex; flex-direction: column; gap: var(--space-2); } .game-card-title { font-family: var(--font-display); font-weight: 700; font-size: var(--text-h3); color: var(--text-primary); margin: 0; line-height: 1.2; } .game-card-meta { font-size: var(--text-xs); color: var(--text-secondary); margin: 0; line-height: 1.5; } .filter-bar { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-bottom: var(--space-6); } .filter-bar .form-control, .filter-bar .form-select { flex: 1 1 160px; min-width: 0; } /* Empty filter state */ .games-empty { text-align: center; padding: var(--space-9) var(--space-5); color: var(--text-tertiary); font-size: var(--text-small); } /* ──────────────────────────────────────────────────────────────────────── 24. Game detail page ──────────────────────────────────────────────────────────────────────── */ .youtube-wrapper { position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: var(--border-radius-lg); overflow: hidden; background: var(--bg-tertiary); } .youtube-wrapper iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: none; } .game-placeholder-lg { aspect-ratio: 16 / 9; display: flex; align-items: center; justify-content: center; background: var(--bg-tertiary); border: 0.5px solid var(--border); border-radius: var(--border-radius-lg); } .game-placeholder-lg span { font-family: var(--font-display); font-size: clamp(4rem, 12vw, 8rem); font-weight: 800; color: var(--accent); opacity: 0.25; user-select: none; } .detail-meta-table { width: 100%; border-collapse: collapse; } .detail-meta-table td { padding: var(--space-2) 0; border-bottom: 0.5px solid var(--border); vertical-align: top; font-size: var(--text-small); } .detail-meta-table td:first-child { color: var(--text-secondary); font-weight: 500; width: 40%; padding-right: var(--space-4); } .detail-meta-table tr:last-child td { border-bottom: none; } /* ──────────────────────────────────────────────────────────────────────── 25. Fix btn-link text alignment in flex containers ──────────────────────────────────────────────────────────────────────── */ .btn-link { justify-content: flex-start; } /* ──────────────────────────────────────────────────────────────────────── 26. Zebra striping for game tables ──────────────────────────────────────────────────────────────────────── */ .table-zebra > tbody > tr:nth-child(even) > td, .table-zebra > tbody > tr:nth-child(even) > th { background-color: var(--bg-tertiary) !important; } /* ──────────────────────────────────────────────────────────────────────── 27. Inline star rating in admin table ──────────────────────────────────────────────────────────────────────── */ .inline-star-rating { display: inline-flex; gap: 1px; line-height: 1; } .inline-star-rating button { background: none; border: none; padding: 0; font-size: 1rem; cursor: pointer; color: var(--bg-tertiary); transition: color var(--transition-base); min-height: unset; line-height: 1; } .inline-star-rating button.sb-filled { color: var(--color-warning-text); } .inline-star-rating:hover button { color: var(--color-warning-text); } .inline-star-rating button:hover ~ button { color: var(--bg-tertiary); } /* ──────────────────────────────────────────────────────────────────────── 28. Thumbnail in game list table ──────────────────────────────────────────────────────────────────────── */ .game-thumb-sm { width: 40px; height: 40px; border-radius: var(--border-radius-sm); overflow: hidden; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: var(--accent-subtle); font-family: var(--font-display); font-weight: 700; font-size: 1rem; color: var(--accent); user-select: none; } .game-thumb-sm img { width: 100%; height: 100%; object-fit: cover; display: block; } /* ──────────────────────────────────────────────────────────────────────── 29. Card color variants ──────────────────────────────────────────────────────────────────────── */ .sb-card--1 { background: var(--card-orange-bg) !important; border-left: 4px solid var(--card-orange-border) !important; } .sb-card--1 .card-header, .sb-card--1 .card-title { color: var(--card-orange-text) !important; } .sb-card--2 { background: var(--card-indigo-bg) !important; border-left: 4px solid var(--card-indigo-border) !important; } .sb-card--2 .card-header, .sb-card--2 .card-title { color: var(--card-indigo-text) !important; } .sb-card--3 { background: var(--card-green-bg) !important; border-left: 4px solid var(--card-green-border) !important; } .sb-card--3 .card-header, .sb-card--3 .card-title { color: var(--card-green-text) !important; } .sb-card--4 { background: var(--card-amber-bg) !important; border-left: 4px solid var(--card-amber-border) !important; } .sb-card--4 .card-header, .sb-card--4 .card-title { color: var(--card-amber-text) !important; } /* ──────────────────────────────────────────────────────────────────────── 30. Badge variants ──────────────────────────────────────────────────────────────────────── */ .badge--accent { background: var(--accent-subtle); color: var(--accent); border: 0.5px solid var(--accent); } .badge--amber { background: var(--card-amber-bg); color: var(--card-amber-text); border: 0.5px solid var(--card-amber-border); } .badge--rose { background: var(--color-rose-bg); color: var(--color-rose-text); border: 0.5px solid var(--color-rose-text); } .badge--success { background: var(--color-success-bg); color: var(--color-success-text); border: 0.5px solid var(--color-success-text); } .badge--danger { background: var(--color-error-bg); color: var(--color-error-text); border: 0.5px solid var(--color-error-text); } /* ──────────────────────────────────────────────────────────────────────── 31. Analog Time Picker ──────────────────────────────────────────────────────────────────────── */ .tp-wrap { position: relative; display: block; } /* Trigger — styled like form-control */ .tp-trigger { display: flex; align-items: center; gap: var(--space-2); text-align: left; cursor: pointer; color: var(--text-tertiary); font-family: var(--font-body); font-variant-numeric: tabular-nums; transition: color var(--transition-base), border-color var(--transition-base); } .tp-trigger.tp-trigger--set { color: var(--text-primary); } .tp-trigger:focus { outline: 2px solid var(--accent); outline-offset: 1px; } .tp-icon { width: 15px; height: 15px; flex-shrink: 0; opacity: 0.6; } .tp-trigger--set .tp-icon { opacity: 1; } .tp-trig-placeholder { color: var(--text-tertiary); } .tp-trig-val { letter-spacing: 0.04em; } /* Panel */ .tp-panel { position: absolute; top: calc(100% + 4px); left: 0; z-index: 1060; width: 280px; background: var(--bg-secondary); border: 1px solid var(--border-strong); border-radius: var(--border-radius-md); box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45); padding: var(--space-4); user-select: none; } /* Header: large HH : MM */ .tp-header { display: flex; align-items: center; justify-content: center; gap: var(--space-1); margin-bottom: var(--space-2); } .tp-seg { font-family: var(--font-body); font-size: 2.25rem; font-weight: 500; font-variant-numeric: tabular-nums; line-height: 1; min-width: 68px; padding: var(--space-2) var(--space-3); text-align: center; border: none; border-radius: var(--border-radius-sm); background: var(--bg-tertiary); color: var(--text-secondary); cursor: pointer; transition: background var(--transition-base), color var(--transition-base); } .tp-seg:hover { background: var(--accent-subtle); color: var(--accent); } .tp-seg--active { background: var(--accent-subtle) !important; color: var(--accent) !important; } .tp-colon { font-size: 2.25rem; font-weight: 500; color: var(--text-tertiary); line-height: 1; padding: 0 2px; pointer-events: none; } /* Hint */ .tp-hint { text-align: center; font-size: var(--text-xs); color: var(--text-tertiary); text-transform: uppercase; letter-spacing: 0.07em; margin: var(--space-1) 0 var(--space-3); } /* Clock area */ .tp-clock-wrap { display: flex; justify-content: center; margin-bottom: var(--space-3); } .tp-svg { display: block; width: 100%; max-width: 248px; height: auto; cursor: pointer; border-radius: 50%; } /* SVG clock elements */ .tp-face-bg { fill: var(--bg-tertiary); } .tp-face-sep { fill: none; stroke: var(--border-strong); stroke-width: 1; stroke-dasharray: 3 3; } .tp-hand { stroke: var(--accent); stroke-width: 2; stroke-linecap: round; } .tp-hand-dot { fill: var(--accent); } .tp-center-dot { fill: var(--accent); } /* Number groups */ .tp-num circle { fill: transparent; transition: fill 100ms ease; } .tp-num:hover circle { fill: var(--accent-subtle); } .tp-num--sel circle { fill: var(--accent); } .tp-num-txt { fill: var(--text-primary); font-family: var(--font-body); font-size: 13px; font-weight: 500; pointer-events: none; } .tp-num--inner .tp-num-txt { font-size: 11px; } .tp-num--sel .tp-num-txt { fill: #fff; } /* Footer */ .tp-footer { display: flex; justify-content: space-between; align-items: center; padding-top: var(--space-3); border-top: 1px solid var(--border); } .tp-btn-clear { background: none; border: none; color: var(--text-tertiary); font-family: var(--font-body); font-size: var(--text-small); cursor: pointer; padding: var(--space-1) var(--space-2); border-radius: var(--border-radius-sm); transition: color var(--transition-base); } .tp-btn-clear:hover { color: var(--color-error-text); } .tp-btn-ok { background: var(--accent); border: none; color: #fff; font-family: var(--font-body); font-size: var(--text-small); font-weight: 500; cursor: pointer; padding: var(--space-1) var(--space-4); border-radius: var(--border-radius-sm); transition: opacity var(--transition-base); } .tp-btn-ok:hover { opacity: 0.85; } /* ════════════════════════════════════════════════════════════════════════ 32. Public site redesign — Navigation ════════════════════════════════════════════════════════════════════════ */ .sb-nav { border-bottom: 1px solid var(--border); position: fixed; top: 0; left: 0; width: 100%; z-index: 100; height: 120px; display: flex; flex-direction: column; justify-content: center; } body.sb-admin { padding-top: 128px; } .sb-nav > .container-fluid { height: 120px; } .sb-nav-brand img { height: 100px; width: auto; } @media (max-width: 767px) { .sb-nav { height: 72px; } .sb-nav > .container-fluid { height: 72px; } .sb-nav-brand img { height: 48px; } .sb-mobile-nav { top: 72px; } } .sb-nav-brand { text-decoration: none; display: flex; align-items: center; gap: var(--space-2); } .sb-nav-brand:hover { text-decoration: none; } .sb-nav-brand-text { font-family: var(--font-display); font-weight: 800; font-size: 1.125rem; color: var(--text-primary); } .sb-nav-links { display: flex; align-items: center; gap: var(--space-1); } .sb-nav-link { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: var(--border-radius-md); color: var(--text-secondary); text-decoration: none; font-size: var(--text-small); font-weight: 600; transition: color var(--transition-base), background var(--transition-base); min-height: 44px; } .sb-nav-link:hover { color: var(--text-primary); background: rgba(var(--accent-rgb), 0.08); } .sb-nav-link.active { color: var(--color-pink); background: var(--color-pink-subtle); } .sb-hamburger { background: transparent; border: 1px solid var(--border-strong); border-radius: var(--border-radius-sm); color: var(--text-primary); width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background var(--transition-base); font-size: 1.5rem; line-height: 1; padding: 0; } .sb-hamburger:hover { background: var(--bg-tertiary); } .sb-mobile-nav { position: absolute; top: 120px; left: 0; right: 0; background: var(--bg-secondary); border-bottom: 1px solid var(--border); z-index: 200; padding: var(--space-3); display: flex; flex-direction: column; gap: var(--space-1); } .sb-mobile-link { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); color: var(--text-primary); text-decoration: none; font-size: 1rem; font-weight: 600; border-radius: var(--border-radius-md); transition: background var(--transition-base); min-height: 44px; } .sb-mobile-link:hover { background: var(--bg-tertiary); color: var(--text-primary); } /* ════════════════════════════════════════════════════════════════════════ 33. Button additions — pink / blue / updated primary ════════════════════════════════════════════════════════════════════════ */ .btn-pink { background: var(--color-pink); color: #fff; font-weight: 700; border-radius: var(--border-radius-lg); border: none; } .btn-pink:hover, .btn-pink:focus { background: var(--color-pink); opacity: 0.88; color: #fff; } .btn-pink:active { transform: scale(0.97); color: #fff; } .btn-blue { background: var(--color-blue); color: #fff; font-weight: 700; border-radius: var(--border-radius-lg); border: none; } .btn-blue:hover, .btn-blue:focus { background: var(--color-blue); opacity: 0.88; color: #fff; } .btn-blue:active { transform: scale(0.97); color: #fff; } /* ════════════════════════════════════════════════════════════════════════ 34. Empty states ════════════════════════════════════════════════════════════════════════ */ .empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: var(--space-9) var(--space-5); gap: var(--space-4); } .empty-state img { max-width: 180px; width: 100%; } .empty-state-text { font-size: var(--text-body); color: var(--text-secondary); max-width: 320px; margin: 0; line-height: 1.6; } /* ════════════════════════════════════════════════════════════════════════ 35. Meeple avatar list ════════════════════════════════════════════════════════════════════════ */ .meeple-list { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2); } .meeple-list img { width: 32px; height: 32px; object-fit: contain; flex-shrink: 0; } .meeple-overflow { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; background: var(--bg-tertiary); border: 1px solid var(--border-strong); border-radius: 50%; font-size: var(--text-xs); font-weight: 700; color: var(--text-secondary); flex-shrink: 0; } /* ════════════════════════════════════════════════════════════════════════ 36. Animations ════════════════════════════════════════════════════════════════════════ */ @media (prefers-reduced-motion: no-preference) { @keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } } .bot-float { animation: float 3s ease-in-out infinite; } @keyframes meeple-bounce { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-8px) rotate(3deg); } } .meeple-float { animation: meeple-bounce 2.5s ease-in-out infinite; } @keyframes dice-wobble { 0%, 100% { transform: rotate(0deg); } 25% { transform: rotate(8deg); } 75% { transform: rotate(-8deg); } } .dice-wobble { animation: dice-wobble 2s ease-in-out infinite; } @keyframes twinkle { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.5; transform: scale(0.85); } } .star-twinkle { animation: twinkle 1.8s ease-in-out infinite; } .fade-in { animation: fadeIn var(--transition-slow) ease forwards; } @keyframes fadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } } /* ════════════════════════════════════════════════════════════════════════ 36a. Hero banner variant (Termine / Spiele — wide flat image, bottom fade) ════════════════════════════════════════════════════════════════════════ */ .hero-section.hero-banner { display: block !important; height: auto !important; padding: 0 !important; margin: 0 !important; border-bottom: none; overflow: hidden; } .hero-section.hero-banner .hero-img-wrap { display: block !important; position: relative !important; top: auto !important; right: auto !important; bottom: auto !important; left: auto !important; width: 100% !important; height: auto !important; margin: 0 !important; padding: 0 !important; line-height: 0; } .hero-section.hero-banner .hero-img-wrap img { display: block !important; width: 100% !important; height: auto !important; object-fit: unset !important; margin: 0 !important; padding: 0 !important; } .hero-section.hero-banner::after { background: linear-gradient(to bottom, transparent 45%, var(--bg-primary) 90%); } .hero-banner-content { position: relative; z-index: 1; margin-top: -20vh; padding-top: 0; } /* ════════════════════════════════════════════════════════════════════════ 36b. Top navigation links (replaces navbar on public pages) ════════════════════════════════════════════════════════════════════════ */ .top-nav-links { display: flex; justify-content: flex-end; gap: var(--space-1); padding: var(--space-4) var(--space-5); } .hero-section .top-nav-links { position: absolute; top: 0; left: 0; z-index: 3; background: rgba(0, 0, 0, 0.35); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); border-radius: 0 0 var(--border-radius-lg) 0; padding: var(--space-3) var(--space-4); } .top-nav-link { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: var(--border-radius-md); color: rgba(255, 255, 255, 0.85); text-decoration: none; font-size: var(--text-small); font-weight: 700; transition: color var(--transition-base), background var(--transition-base); min-height: 44px; text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6); } .top-nav-link:hover { color: #fff; background: rgba(255, 255, 255, 0.12); } .top-nav-link.active { color: var(--color-pink); background: rgba(255, 95, 191, 0.18); } /* ════════════════════════════════════════════════════════════════════════ 37. Hero section ════════════════════════════════════════════════════════════════════════ */ .hero-section { position: relative; height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; padding: 0 var(--space-5) var(--space-7); text-align: center; overflow: hidden; border-bottom: 1px solid var(--border); } .hero-section::after { content: ''; position: absolute; inset: 0; z-index: 1; background: linear-gradient(to bottom, rgba(15, 16, 33, 0.45) 0%, transparent 22%, transparent 50%, rgba(15, 16, 33, 0.78) 100%); pointer-events: none; } .hero-img-wrap { position: absolute; inset: 0; z-index: 0; margin: 0; } .hero-img-wrap picture { display: block; width: 100%; height: 100%; } .hero-img-wrap img { width: 100%; height: 100%; object-fit: cover; object-position: calc(50% + 20px) top; } .hero-text-wrap { position: relative; z-index: 2; max-width: 640px; margin: 0 auto; } .hero-headline { font-size: clamp(1.25rem, 2.5vw, 1.75rem); font-weight: 800; line-height: 1.15; color: var(--text-primary); margin-bottom: var(--space-3); white-space: nowrap; text-shadow: 0 2px 12px rgba(0,0,0,0.6); } .hero-sub { font-size: 1rem; color: var(--text-secondary); line-height: 1.6; margin-bottom: var(--space-4); text-shadow: 0 1px 6px rgba(0,0,0,0.5); } .hero-buttons { display: flex; flex-wrap: wrap; gap: var(--space-3); justify-content: center; } @media (max-width: 767px) { .hero-section { padding-bottom: var(--space-6); } .hero-headline { white-space: normal; } } /* ════════════════════════════════════════════════════════════════════════ 38. Next event section ════════════════════════════════════════════════════════════════════════ */ .next-event-section { background: rgba(179, 125, 255, 0.07); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid var(--border); border-left: 4px solid var(--color-pink); border-radius: var(--border-radius-xl); padding: var(--space-6); } .next-event-date-block { text-align: center; min-width: 60px; flex-shrink: 0; } .next-event-date-day { font-size: 2.5rem; font-weight: 900; color: var(--color-pink); line-height: 1; } .next-event-date-month { font-size: var(--text-xs); font-weight: 700; color: var(--color-pink); text-transform: uppercase; letter-spacing: 0.08em; } .next-event-date-wd { font-size: var(--text-xs); color: var(--text-tertiary); margin-top: 2px; } .next-event-detail-row { display: flex; align-items: flex-start; gap: var(--space-5); flex-wrap: wrap; } @media (max-width: 767px) { .next-event-detail-row { flex-direction: column; gap: var(--space-4); } .next-event-section { border-radius: var(--border-radius-lg); padding: var(--space-5) var(--space-4); } } /* ════════════════════════════════════════════════════════════════════════ 39. Feature tiles ════════════════════════════════════════════════════════════════════════ */ .feature-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-5); } @media (max-width: 1023px) { .feature-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 575px) { .feature-grid { grid-template-columns: 1fr; } } .feature-tile { background: rgba(27, 29, 51, 0.55); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid var(--border); border-radius: var(--border-radius-xl); padding: var(--space-5); transition: transform var(--transition-base), border-color var(--transition-base); } .feature-tile:hover { transform: translateY(-6px) scale(1.02); border-color: var(--border-strong); } .feature-tile-icon { margin-bottom: var(--space-3); line-height: 1; } .feature-tile-title { font-size: var(--text-h3); font-weight: 800; margin-bottom: var(--space-2); color: var(--text-primary); } .feature-tile-desc { font-size: var(--text-small); color: var(--text-secondary); line-height: 1.6; margin: 0; } /* ════════════════════════════════════════════════════════════════════════ 40. Game card — public view ════════════════════════════════════════════════════════════════════════ */ .games-pub-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-5); } @media (max-width: 1199px) { .games-pub-grid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 767px) { .games-pub-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 479px) { .games-pub-grid { grid-template-columns: 1fr; } } /* Horizontal scroll on mobile for hero popular */ .games-scroll-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-5); } @media (max-width: 1023px) { .games-scroll-row { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 575px) { .games-scroll-row { display: flex; overflow-x: auto; gap: var(--space-4); padding-bottom: var(--space-3); scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; } .games-scroll-row > * { min-width: 200px; scroll-snap-align: start; } } .game-card-pub { background: rgba(27, 29, 51, 0.65); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border: 1px solid var(--border); border-left: 4px solid var(--accent); border-radius: var(--border-radius-xl); overflow: hidden; text-decoration: none; color: var(--text-primary); display: flex; flex-direction: column; transition: transform var(--transition-base), border-color var(--transition-base); } .game-card-pub:hover { transform: translateY(-6px) scale(1.02); border-color: var(--accent); color: var(--text-primary); text-decoration: none; } .game-card-pub-cover { aspect-ratio: 3/4; background: rgba(35, 37, 67, 0.7); overflow: hidden; display: flex; align-items: center; justify-content: center; } .game-card-pub-cover img { width: 100%; height: 100%; object-fit: contain; display: block; } .game-card-pub-placeholder { font-size: 3rem; font-weight: 900; color: var(--accent); opacity: 0.25; user-select: none; } .game-card-pub-body { padding: var(--space-4); flex-grow: 1; display: flex; flex-direction: column; gap: var(--space-2); } .game-card-pub-title { font-weight: 700; font-size: var(--text-small); color: var(--text-primary); margin: 0; line-height: 1.3; } .game-card-pub-meta { font-size: var(--text-xs); color: var(--text-tertiary); margin: 0; } .game-stars { color: var(--color-yellow); font-size: var(--text-xs); font-weight: 700; } /* ════════════════════════════════════════════════════════════════════════ 41. Public footer ════════════════════════════════════════════════════════════════════════ */ .sb-footer { background: rgba(15, 16, 33, 0.7); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-top: 1px solid var(--border); padding: var(--space-7) var(--space-5); margin-top: var(--space-9); } .sb-footer-inner { max-width: var(--max-width); margin: 0 auto; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: var(--space-5); } .sb-footer-brand { display: flex; align-items: center; gap: var(--space-3); font-weight: 800; font-size: 1.1rem; color: var(--text-primary); text-decoration: none; } .sb-footer-links { display: flex; gap: var(--space-5); flex-wrap: wrap; justify-content: center; align-items: center; width: 100%; } .sb-footer-link { color: var(--text-secondary); text-decoration: none; font-size: var(--text-small); transition: color var(--transition-base); } .sb-footer-link:hover { color: var(--text-primary); } .sb-footer-logo-link { display: flex; align-items: center; } .sb-footer-logo { height: 112px; width: auto; opacity: 0.85; transition: opacity var(--transition-base); } .sb-footer-logo:hover { opacity: 1; } .sb-footer-meeples { display: flex; align-items: center; gap: var(--space-2); } .sb-footer-copy { max-width: var(--max-width); margin: var(--space-5) auto 0; padding-top: var(--space-5); border-top: 1px solid var(--border); font-size: var(--text-xs); color: var(--text-tertiary); text-align: center; } /* ════════════════════════════════════════════════════════════════════════ 42. Register page — split layout ════════════════════════════════════════════════════════════════════════ */ .register-content-wrap { max-width: var(--max-width); margin: 0 auto; padding: var(--space-4) var(--space-5) var(--space-9); } .events-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-4); margin-top: var(--space-4); } @media (min-width: 900px) { .events-grid { grid-template-columns: repeat(2, 1fr); } } .events-grid .event-register-card { margin-bottom: 0; margin-top: 0; } .register-split-img { width: 45%; flex-shrink: 0; position: sticky; top: 120px; height: calc(100vh - 120px); display: flex; align-items: center; justify-content: center; } .register-penguin { display: block; margin-left: auto; margin-top: 2px; margin-bottom: 2px; } @media (max-width: 767px) { .register-split { min-height: calc(100vh - 72px); } } .register-split-img img { width: 100%; height: 100%; object-fit: contain; border-radius: 0 var(--border-radius-xl) var(--border-radius-xl) 0; } .register-split-content { flex: 1; padding: 2px var(--space-6) var(--space-7); overflow-y: auto; min-width: 0; } @media (max-width: 767px) { .register-split { display: block; } .register-split-img { display: none; } .register-split-content { padding: var(--space-5) var(--space-4); } } .event-register-card { background: rgba(27, 29, 51, 0.65); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid var(--border); border-left: 4px solid var(--color-pink); border-radius: var(--border-radius-xl); overflow: hidden; margin-bottom: var(--space-5); transition: border-color var(--transition-base); } .event-register-card-header { display: flex; justify-content: space-between; align-items: center; padding: var(--space-3) var(--space-4); background: rgba(35, 37, 67, 0.5); border-bottom: 1px solid var(--border); flex-wrap: wrap; gap: var(--space-2); } .event-register-card-body { padding: var(--space-4); } /* Form focus pink */ .form-control:focus { border-color: var(--color-pink); box-shadow: 0 0 0 3px var(--color-pink-subtle); outline: none; } .form-control-sm:focus { border-color: var(--color-pink); box-shadow: 0 0 0 2px var(--color-pink-subtle); } /* ════════════════════════════════════════════════════════════════════════ 43. Games page — public grid + filter pills ════════════════════════════════════════════════════════════════════════ */ .games-page-header { background: var(--bg-secondary); border-bottom: 1px solid var(--border); padding: var(--space-6) 0; position: relative; overflow: visible; margin-bottom: var(--space-8); } .filter-pill-bar { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-5); align-items: center; } .filter-pill { display: inline-flex; align-items: center; gap: var(--space-2); padding: 6px 16px; border-radius: 99px; background: var(--bg-tertiary); color: var(--text-secondary); border: 1px solid var(--border); font-size: var(--text-small); font-weight: 600; cursor: pointer; text-decoration: none; transition: background var(--transition-base), color var(--transition-base), border-color var(--transition-base); white-space: nowrap; min-height: 36px; } .filter-pill:hover { color: var(--text-primary); border-color: var(--border-strong); text-decoration: none; } .filter-pill.active { background: var(--accent-subtle); color: var(--accent); border: 1.5px solid var(--accent); } .filter-pill.active:hover { color: var(--accent); } /* Desktop: pills wrap inline with search */ .filter-scroll-row { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; flex: 1 1 auto; } .games-search-input { flex: 1; min-width: 180px; max-width: 320px; background: var(--bg-tertiary); border: 1px solid var(--border); border-radius: 99px; color: var(--text-primary); font-family: var(--font-body); padding: 6px 16px; font-size: var(--text-small); min-height: 36px; transition: border-color var(--transition-base); } .games-search-input::placeholder { color: var(--text-tertiary); } .games-search-input:focus { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-subtle); outline: none; } /* ── Filter: search wrap + autocomplete ── */ .filter-search-wrap { position: relative; flex: 1; min-width: 200px; } .search-autocomplete { display: none; position: absolute; top: calc(100% + 6px); left: 0; right: 0; background: var(--bg-secondary); border: 1px solid var(--border); border-radius: var(--border-radius-md); z-index: 300; box-shadow: 0 8px 32px rgba(0,0,0,0.5); max-height: 260px; overflow-y: auto; padding: var(--space-1) 0; } .search-autocomplete.open { display: block; } .search-autocomplete-item { display: block; padding: 9px 16px; color: var(--text-secondary); font-size: var(--text-small); font-weight: 600; cursor: pointer; transition: background var(--transition-base), color var(--transition-base); } .search-autocomplete-item:hover, .search-autocomplete-item.focused { background: var(--bg-tertiary); color: var(--text-primary); } /* ── Filter: dropdown buttons ── */ .filter-btn-row { display: flex; gap: var(--space-2); align-items: center; flex-wrap: wrap; } .filter-dropdown-wrap { position: relative; } .filter-dropdown-btn { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; border-radius: 99px; background: var(--bg-tertiary); color: var(--text-secondary); border: 1px solid var(--border); font-size: var(--text-small); font-weight: 600; font-family: var(--font-body); cursor: pointer; text-decoration: none; white-space: nowrap; min-height: 36px; transition: background var(--transition-base), color var(--transition-base), border-color var(--transition-base); } .filter-dropdown-btn:hover { color: var(--text-primary); border-color: var(--border-strong); text-decoration: none; } .filter-dropdown-btn.active { background: var(--accent-subtle); color: var(--accent); border-color: var(--accent); } .filter-dropdown-menu { display: none; position: absolute; top: calc(100% + 6px); left: 0; min-width: 190px; background: var(--bg-secondary); border: 1px solid var(--border); border-radius: var(--border-radius-md); padding: var(--space-1) 0; z-index: 300; box-shadow: 0 8px 32px rgba(0,0,0,0.5); } .filter-dropdown-menu.open { display: block; } .filter-dropdown-item { display: flex; align-items: center; gap: var(--space-2); padding: 9px 16px; color: var(--text-secondary); font-size: var(--text-small); font-weight: 600; text-decoration: none; white-space: nowrap; transition: background var(--transition-base), color var(--transition-base); } .filter-dropdown-item:hover { background: var(--bg-tertiary); color: var(--text-primary); text-decoration: none; } .filter-dropdown-item.active { color: var(--accent); } /* ════════════════════════════════════════════════════════════════════════ 44. Game detail — two column ════════════════════════════════════════════════════════════════════════ */ .game-detail-layout { display: grid; grid-template-columns: 35% 1fr; gap: var(--space-7); align-items: start; } @media (max-width: 767px) { .game-detail-layout { grid-template-columns: 1fr; gap: var(--space-5); } } .game-detail-cover { position: sticky; top: 80px; } .game-detail-cover-img { border-radius: var(--border-radius-xl); overflow: hidden; box-shadow: 0 8px 32px rgba(var(--accent-rgb), 0.2); } .game-detail-cover-img img { width: 100%; display: block; object-fit: cover; } @media (max-width: 767px) { .game-detail-cover { position: static; } } .game-meta-badges { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-3); } .game-meta-badge { display: inline-flex; align-items: center; gap: var(--space-1); padding: 4px 12px; border-radius: 99px; font-size: var(--text-xs); font-weight: 700; } .badge-blue { background: var(--color-blue-subtle); color: var(--color-blue); border: 1px solid var(--color-blue-border); } .badge-yellow { background: var(--color-yellow-subtle); color: var(--color-yellow); border: 1px solid var(--color-yellow-border); } .badge-purple { background: var(--accent-subtle); color: var(--accent); border: 1px solid var(--border-strong); } .badge-pink { background: var(--color-pink-subtle); color: var(--color-pink); border: 1px solid var(--color-pink-border); } .badge-green { background: var(--color-green-subtle); color: var(--color-green); border: 1px solid var(--color-green-border); } /* ════════════════════════════════════════════════════════════════════════ 45. Section header helper + card xl ════════════════════════════════════════════════════════════════════════ */ .section-header-pub { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-5); } .section-title-pub { font-size: var(--text-h2); font-weight: 800; color: var(--text-primary); display: flex; align-items: center; gap: var(--space-2); margin: 0; } .card-xl { border-radius: var(--border-radius-xl) !important; } .card-xl .card-header { border-radius: var(--border-radius-xl) var(--border-radius-xl) 0 0 !important; } .card-xl .card-footer { border-radius: 0 0 var(--border-radius-xl) var(--border-radius-xl) !important; } .card-lift:hover { transform: translateY(-6px) scale(1.02); } /* ════════════════════════════════════════════════════════════════════════ 46. Admin minimal overrides ════════════════════════════════════════════════════════════════════════ */ .admin-page .card { border-radius: var(--border-radius-lg); } .admin-page .btn:not(.btn-link):not(.btn-close) { border-radius: var(--border-radius-md); } /* ════════════════════════════════════════════════════════════════════════ 47. Confetti canvas + character decorations ════════════════════════════════════════════════════════════════════════ */ /* Confetti — z-index: -1 within body stacking context: above html gradient, below all content/images/chars */ #confetti-bg { position: fixed; inset: 0; pointer-events: none; z-index: -1; opacity: 1; } /* ── Character animations ── */ /* Standalone character — placed alongside a row, never inside a tile */ .char-standalone { pointer-events: none; user-select: none; flex-shrink: 0; filter: drop-shadow(0 8px 24px rgba(0,0,0,0.45)); opacity: 0.90; align-self: flex-end; height: 160px; width: auto; display: block; } @media (max-width: 991px) { .char-standalone { height: 120px; } } @media (max-width: 767px) { .char-standalone { display: none !important; } } /* ════════════════════════════════════════════════════════════════════════ 48. Mobile overrides (max-width: 767px) WARNING: Nothing below this comment may affect desktop (≥768px). Every rule must be wrapped in @media (max-width: 767px). ════════════════════════════════════════════════════════════════════════ */ /* ── Mobile-only elements: hidden everywhere by default ── */ /* Shown only inside @media (max-width: 767px) below. */ /* This prevents any flash of content on desktop. */ .mobile-hero-wrap, .mobile-nav-bar, .hamburger-btn, .mobile-nav-dropdown { display: none; } @media (max-width: 767px) { /* ── Mobile hero image ── */ .mobile-hero-wrap { display: block !important; position: relative; width: 100%; height: 66.66vh; /* content starts at lower third of viewport */ overflow: hidden; /* clip image cleanly; fade makes the cut invisible */ margin-bottom: 0; z-index: 0; } .mobile-hero-img { position: absolute; top: 0; left: 0; width: 100%; height: auto; /* full natural proportions, only clipped by wrapper */ display: block; } .mobile-hero-fade { position: absolute; bottom: 0; left: 0; right: 0; height: 60%; background: linear-gradient( to bottom, transparent 0%, rgba(15, 16, 33, 0.6) 40%, var(--bg-primary) 100% ); pointer-events: none; } /* ── Mobile nav bar: transparent, scrolls away with page ── */ .mobile-nav-bar { display: flex !important; position: absolute; top: 0; left: 0; right: 0; height: 64px; align-items: center; justify-content: flex-end; padding: 0 var(--space-4); background: transparent; border-bottom: none; z-index: 150; } /* ── Hamburger button ── */ .hamburger-btn { display: flex !important; flex-direction: column; justify-content: space-between; width: 44px; height: 44px; padding: 10px 8px; background: transparent; border: 1.5px solid var(--border-strong); border-radius: var(--border-radius-md); cursor: pointer; margin-left: auto; } .hamburger-btn span { display: block; height: 2px; background: var(--text-primary); border-radius: 2px; transition: transform var(--transition-base), opacity var(--transition-base); } .hamburger-btn.open span:nth-child(1) { transform: translateY(9px) rotate(45deg); } .hamburger-btn.open span:nth-child(2) { opacity: 0; } .hamburger-btn.open span:nth-child(3) { transform: translateY(-9px) rotate(-45deg); } /* ── Mobile nav dropdown ── */ .mobile-nav-dropdown { display: none; position: fixed; top: 64px; left: 0; right: 0; background: var(--bg-secondary); border-bottom: 1px solid var(--border); padding: var(--space-4) var(--space-5); z-index: 200; flex-direction: column; gap: var(--space-3); } .mobile-nav-dropdown.open { display: flex; } .mobile-nav-dropdown a { color: var(--text-primary); text-decoration: none; font-family: var(--font-body); font-weight: 600; font-size: 1.1rem; padding: var(--space-3) var(--space-4); border-radius: var(--border-radius-md); transition: background var(--transition-base); } .mobile-nav-dropdown a:hover, .mobile-nav-dropdown a.active { background: var(--accent-subtle); color: var(--accent); } /* ── Hide desktop hero on inner pages (mobile-hero-wrap replaces it) ── */ .hero-section.hero-banner { display: none !important; } /* ── Fix hero image offset on landing page ── */ .hero-img-wrap img { object-position: center top; } /* ── Content sits above mobile hero ── */ .hero-banner-content, .container, .container-fluid, .register-content-wrap { position: relative; z-index: 1; background: var(--bg-primary); } /* ── Termine: cards float into lower portion of image ── */ .register-content-wrap { background: transparent; margin-top: -10vh !important; } /* ── Other inner pages: flush against hero wrap, no gap ── */ .hero-banner-content:not(.register-content-wrap) { margin-top: -1px !important; } /* ── Hide desktop nav links & Bootstrap toggler ── */ .navbar-nav, .nav-links-desktop, .top-nav-links { display: none !important; } .navbar-toggler { display: none !important; } /* ── Container padding ── */ .container, .container-fluid { padding-inline: var(--space-4) !important; } /* ── Section spacing (hero-section manages its own padding) ── */ section:not(.hero-section), .section { padding-top: var(--space-6) !important; padding-bottom: var(--space-6) !important; } /* ── Cards ── */ .card { border-radius: var(--border-radius-lg) !important; } .card-body { padding: var(--space-4); } /* ── Card grids: single column ── */ .card-grid, .games-grid, .row.g-3, .row.g-4 { grid-template-columns: 1fr !important; } /* ── Typography scale-down ── */ h1, .h1 { font-size: clamp(1.5rem, 6vw, 2rem) !important; } h2, .h2 { font-size: clamp(1.2rem, 5vw, 1.5rem) !important; } h3, .h3 { font-size: 1rem !important; } /* ── Buttons: full width standalone, auto in inline flex rows ── */ .btn-primary:not(.btn-sm), .btn-secondary:not(.btn-sm), .btn-pink:not(.btn-sm) { width: 100%; justify-content: center; } .d-flex:not(.flex-column) > .btn-primary, .d-flex:not(.flex-column) > .btn-secondary, .d-flex:not(.flex-column) > .btn-pink { width: auto !important; } .btn-sm, .btn-icon { width: auto !important; } /* ── Form inputs: prevent iOS zoom; full-width only Bootstrap controls ── */ input, select, textarea { font-size: 16px !important; } input[type="checkbox"], input[type="radio"] { font-size: inherit !important; min-height: unset; } .form-control, .form-select { width: 100% !important; } /* ── Tables: horizontal scroll ── */ .table-responsive-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; } .table-responsive-wrap table { min-width: 500px; } /* ── Hide desktop decorative elements ── */ .deco-desktop, .char-float-desktop { display: none !important; } /* ── Participant meeples: smaller on mobile ── */ .participant-list img { width: 24px !important; height: 24px !important; } /* ── Empty state bot images ── */ .empty-state img { width: 120px !important; } /* ── Filter bar: Suche oben, Buttons darunter ── */ .filter-pill-bar { flex-direction: column; align-items: stretch; gap: var(--space-2); margin-bottom: var(--space-4); } .filter-search-wrap { min-width: unset; width: 100%; } .filter-search-wrap .games-search-input { width: 100%; max-width: none; } .filter-btn-row { flex-wrap: nowrap; } .filter-dropdown-menu { min-width: 170px; } /* ── Game scroll row: horizontal swipe ── */ .games-scroll-row { display: flex; overflow-x: auto; gap: var(--space-4); padding-bottom: var(--space-3); scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; } .games-scroll-row .card { flex: 0 0 75vw; scroll-snap-align: start; } } /* ── 480–767px: 2-col game/card grid ── */ @media (min-width: 480px) and (max-width: 767px) { .card-grid, .games-grid { grid-template-columns: 1fr 1fr !important; } }