/** * Schnick Schnack Schluck — Sponsor Theming System * Themes: default (SSS purple) · gaffel (CI blue) · giesinger (dark green) * Set via etc. */ :root { /* ── Brand palette · DEFAULT (SSS purple) ── */ --primary: #667eea; --primary-color: #667eea; /* legacy alias */ --primary-dark: #764ba2; --primary-light: #8b9cf5; --accent: #ffd700; --accent-color: #ffd700; /* legacy alias */ --accent-secondary: #ff9800; --bg-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%); --bg-gradient-dark: linear-gradient(135deg, #5568d3 0%, #653a8b 100%); --bg-solid: #667eea; --text-on-primary: #ffffff; --text-on-accent: #333333; /* ── Surfaces & ink ── */ --card-bg: #ffffff; --card-border: rgba(102, 126, 234, 0.30); --ink: #333333; --ink-soft: #666666; --ink-faint: #999999; --ink-ghost: #bbbbbb; --field-bg-soft: #f8f9ff; --field-border: #e0e0e0; --hairline: #f0f0f0; /* ── Dark hero (login) ── */ --hero-bg: #0a0e1a; --glass-bg: rgba(255, 255, 255, 0.06); --glass-border: rgba(255, 255, 255, 0.12); /* ── Semantic status ── */ --success: #28a745; --success-color: #28a745; /* legacy alias */ --danger: #dc3545; --danger-color: #dc3545; /* legacy alias */ --warning: #ffc107; --warning-color: #ffc107; /* legacy alias */ --info: #17a2b8; --info-color: #17a2b8; /* legacy alias */ --flash-success-bg: #d4edda; --flash-success-fg: #155724; --flash-danger-bg: #f8d7da; --flash-danger-fg: #721c24; --flash-warning-bg: #fff3cd; --flash-warning-fg: #856404; --flash-info-bg: #d1ecf1; --flash-info-fg: #0c5460; /* ── Typography ── */ --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; --font-mono: 'SF Mono', ui-monospace, 'Cascadia Code', Menlo, Consolas, monospace; --fs-display: 2.5rem; --fs-h1: 2rem; --fs-h2: 1.6rem; --fs-h3: 1.25rem; --fs-body: 1rem; --fs-sm: 0.9rem; --fs-xs: 0.8rem; --fs-score: 3rem; --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --fw-heavy: 800; --fw-black: 900; --lh-tight: 1.1; --lh-snug: 1.2; --lh-normal: 1.5; --tracking-label: 0.06em; /* ── Radii ── */ --r-xs: 4px; --r-sm: 6px; --r-md: 8px; --r-lg: 12px; --r-xl: 15px; --r-2xl: 20px; --r-3xl: 24px; --r-pill: 25px; --r-full: 9999px; /* ── Elevation ── */ --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.10); --shadow-card: 0 2px 12px rgba(0, 0, 0, 0.08); --shadow-md: 0 5px 20px rgba(0, 0, 0, 0.20); --shadow-lg: 0 10px 40px rgba(0, 0, 0, 0.30); --shadow-hero: 0 25px 60px rgba(0, 0, 0, 0.50); --shadow-brand: 0 4px 15px rgba(102, 126, 234, 0.30); --glow-accent: 0 0 20px rgba(255, 215, 0, 0.50); /* ── Spacing ── */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; /* ── Motion ── */ --dur-fast: 0.2s; --dur: 0.3s; --lift: translateY(-2px); --slide: translateX(5px); /* ── Logos ── */ --logo-brand: url('/static/logos/sss-association.png'); --logo-sponsor: url('/static/logos/sss-association.png'); --logo-mascot: url('/static/logos/biertitan-giesinger.png'); --sponsor-logo: url('/pics/SSS_Logo_hero.png'); /* legacy */ --main-logo: url('/pics/SSS_Logo_hero.png'); /* legacy */ } /* ===== Gaffel Theme (CI blue #1558B8) ===== */ [data-theme="gaffel"] { --primary: #1558B8; --primary-color: #1558B8; --primary-dark: #0A3280; --primary-light: #3A78D4; --accent: #C8102E; --accent-color: #C8102E; --accent-secondary: #e63050; --bg-gradient: linear-gradient(135deg, #1558B8 0%, #0A3280 100%); --bg-gradient-dark: linear-gradient(135deg, #1045A0 0%, #071E60 100%); --bg-solid: #1558B8; --text-on-accent: #ffffff; --card-border: rgba(21, 88, 184, 0.30); --shadow-brand: 0 4px 15px rgba(21, 88, 184, 0.30); --logo-brand: url('/static/logos/gaffel-koelsch.png'); --logo-sponsor: url('/static/logos/gaffel-koelsch.png'); --logo-mascot: url('/static/logos/biertitan-gaffel.png'); --sponsor-logo: url('/pics/Gaffel_Logo.png'); --main-logo: url('/pics/Biertitan_Gaffel_transparent.png'); } /* ===== Giesinger Theme (dark green) ===== */ [data-theme="giesinger"] { --primary: #1a4d3e; --primary-color: #1a4d3e; --primary-dark: #0d2920; --primary-light: #2d7a63; --accent: #c9a227; --accent-color: #c9a227; --accent-secondary: #e6c547; --bg-gradient: linear-gradient(135deg, #1a4d3e 0%, #0d2920 100%); --bg-gradient-dark: linear-gradient(135deg, #143d31 0%, #091d18 100%); --bg-solid: #1a4d3e; --text-on-accent: #1a4d3e; --card-border: rgba(26, 77, 62, 0.30); --shadow-brand: 0 4px 15px rgba(26, 77, 62, 0.30); --logo-brand: url('/static/logos/sss-association.png'); --logo-sponsor: url('/static/logos/sss-association.png'); --logo-mascot: url('/static/logos/biertitan-giesinger.png'); --sponsor-logo: url('/pics/Biertitan_LogoGiesinger.png'); --main-logo: url('/pics/Biertitan_LogoGiesinger.png'); } /* ===== Utility Classes für Themes ===== */ .theme-bg { background: var(--bg-gradient); } .theme-bg-solid { background-color: var(--bg-solid); } .theme-bg-dark { background: var(--bg-gradient-dark); } .theme-text-primary { color: var(--primary-color); } .theme-text-accent { color: var(--accent-color); } .theme-border { border-color: var(--primary-color); } .theme-card { background: var(--card-bg); border: 2px solid var(--card-border); } /* ===== Themed Components ===== */ /* Buttons */ .btn-theme { background: var(--bg-gradient); color: var(--text-on-primary); border: none; padding: 12px 24px; border-radius: 25px; font-weight: 600; cursor: pointer; transition: all 0.3s ease; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); } .btn-theme:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3); } .btn-theme-outline { background: transparent; color: var(--primary-color); border: 2px solid var(--primary-color); padding: 12px 24px; border-radius: 25px; font-weight: 600; cursor: pointer; transition: all 0.3s ease; } .btn-theme-outline:hover { background: var(--primary-color); color: var(--text-on-primary); } /* Badges */ .badge-theme { background: var(--bg-gradient); color: var(--text-on-primary); padding: 8px 20px; border-radius: 20px; font-weight: 600; display: inline-block; } .badge-accent { background: linear-gradient(135deg, var(--accent-color) 0%, var(--accent-secondary) 100%); color: var(--text-on-accent); padding: 8px 20px; border-radius: 20px; font-weight: 600; display: inline-block; } /* Headers */ .header-theme { background: var(--bg-gradient); color: var(--text-on-primary); padding: 20px; border-radius: 15px; box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3); } /* Cards */ .card-theme { background: var(--card-bg); border-radius: 15px; padding: 20px; box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1); border: 2px solid var(--card-border); } .card-theme-header { background: var(--bg-gradient); color: var(--text-on-primary); margin: -20px -20px 20px -20px; padding: 15px 20px; border-radius: 13px 13px 0 0; } /* Winner/Accent Styling */ .winner-highlight { color: var(--accent-color); text-shadow: 0 0 20px rgba(255, 215, 0, 0.5); } .accent-glow { box-shadow: 0 0 20px var(--accent-color); } /* Score Display */ .score-theme { background: var(--bg-gradient); color: var(--text-on-primary); padding: 15px 30px; border-radius: 15px; font-size: 2em; font-weight: bold; display: inline-block; } .score-winner { color: var(--accent-color); text-shadow: 0 0 15px var(--accent-color); } /* Sponsor Logo Container */ .sponsor-logo { width: 200px; height: auto; max-height: 150px; object-fit: contain; } .sponsor-logo-small { width: 100px; height: auto; max-height: 80px; object-fit: contain; } .sponsor-logo-large { width: 300px; height: auto; max-height: 220px; object-fit: contain; } /* Main Logo Container */ .main-logo { width: 180px; height: auto; max-height: 180px; object-fit: contain; } /* ===== Bracket-specific Theming ===== */ .bracket-container { background: var(--bg-solid); min-height: 100vh; } .bracket-match { background: var(--card-bg); border: 2px solid var(--card-border); border-radius: 8px; transition: all 0.3s ease; } .bracket-match:hover { border-color: var(--primary-color); transform: scale(1.02); } .bracket-match.active { border-color: var(--accent-color); box-shadow: 0 0 15px var(--accent-color); animation: pulse-bracket 2s infinite; } .bracket-match.completed { opacity: 0.85; border-color: var(--success-color); } .bracket-finale { background: var(--card-bg); border: 4px solid var(--accent-color); border-radius: 15px; padding: 20px; box-shadow: 0 0 30px rgba(255, 215, 0, 0.3); } .bracket-round-label { background: var(--bg-gradient); color: var(--text-on-primary); padding: 8px 16px; border-radius: 20px; font-weight: bold; text-transform: uppercase; font-size: 0.85em; } /* Bracket Lines */ .bracket-line { border-color: var(--primary-light); } /* ===== Animation Keyframes ===== */ @keyframes pulse-bracket { 0%, 100% { box-shadow: 0 0 15px var(--accent-color); } 50% { box-shadow: 0 0 30px var(--accent-color); } } @keyframes fadeIn { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } } @keyframes slideIn { from { opacity: 0; transform: translateX(-20px); } to { opacity: 1; transform: translateX(0); } } /* ===== Responsive Adjustments ===== */ @media (max-width: 1200px) { .sponsor-logo { width: 150px; } .sponsor-logo-large { width: 220px; } .main-logo { width: 140px; } } @media (max-width: 768px) { .sponsor-logo { width: 100px; } .sponsor-logo-large { width: 160px; } .main-logo { width: 100px; } .btn-theme, .btn-theme-outline { padding: 10px 18px; font-size: 0.9em; } } /* ===== App Navigation ===== */ .app-nav { background: var(--bg-gradient); color: var(--text-on-primary); position: sticky; top: 0; z-index: 200; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.25); overflow: hidden; max-width: 100vw; } .nav-inner { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 20px; height: 56px; max-width: 1400px; margin: 0 auto; } .nav-brand { font-size: 1.2em; font-weight: 800; color: var(--text-on-primary); text-decoration: none; white-space: nowrap; letter-spacing: 0.02em; } .nav-breadcrumb { display: flex; align-items: center; gap: 6px; font-size: 0.88em; opacity: 0.9; overflow: hidden; min-width: 0; } .nav-breadcrumb a { color: var(--text-on-primary); text-decoration: none; opacity: 0.75; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .nav-breadcrumb a:hover { opacity: 1; } .nav-breadcrumb .sep { opacity: 0.5; flex-shrink: 0; } .nav-breadcrumb .current { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .nav-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; } .nav-link { color: var(--text-on-primary); text-decoration: none; padding: 6px 14px; border-radius: 20px; font-size: 0.82em; font-weight: 600; border: 1px solid rgba(255, 255, 255, 0.35); transition: background 0.2s; white-space: nowrap; } .nav-link:hover { background: rgba(255, 255, 255, 0.2); } .nav-link-danger { border-color: rgba(255, 100, 100, 0.5); } .nav-link-danger:hover { background: rgba(220, 53, 69, 0.35); } .nav-link-accent { background: rgba(255, 255, 255, 0.15); border-color: rgba(255, 255, 255, 0.5); } /* ===== Flash Messages ===== */ .flash-container { max-width: 1400px; margin: 12px auto 0; padding: 0 20px; } .flash { padding: 12px 16px; border-radius: 8px; margin-bottom: 8px; font-weight: 500; font-size: 0.95em; } .flash-success { background: #d4edda; color: #155724; border: 1px solid #c3e6cb; } .flash-error, .flash-danger { background: #f8d7da; color: #721c24; border: 1px solid #f5c6cb; } .flash-warning { background: #fff3cd; color: #856404; border: 1px solid #ffeeba; } .flash-info { background: #d1ecf1; color: #0c5460; border: 1px solid #bee5eb; } /* ===== Page Layout ===== */ .page-wrapper { max-width: 1400px; margin: 0 auto; padding: 24px 20px; } .page-header { background: var(--bg-gradient); color: var(--text-on-primary); padding: 24px 24px 20px; border-radius: 14px; margin-bottom: 24px; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15); } .page-header h1, .page-header h2 { margin: 0 0 4px; font-size: 1.6em; line-height: 1.2; } .page-header p { margin: 0; opacity: 0.85; font-size: 0.95em; } .page-header-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 16px; } /* ===== Admin Table ===== */ .admin-table { width: 100%; border-collapse: collapse; background: white; border-radius: 12px; overflow: hidden; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08); } .admin-table th { background: var(--bg-gradient); color: var(--text-on-primary); padding: 12px 16px; text-align: left; font-weight: 600; font-size: 0.8em; text-transform: uppercase; letter-spacing: 0.06em; white-space: nowrap; } .admin-table td { padding: 12px 16px; border-bottom: 1px solid #f0f0f0; color: #333; font-size: 0.93em; vertical-align: middle; } .admin-table tr:last-child td { border-bottom: none; } .admin-table tbody tr:hover td { background: #f5f7ff; } /* ===== Responsive Grid ===== */ .grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; } .grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; } .grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; } .grid-auto { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; } /* ===== Utility ===== */ .mt-4 { margin-top: 4px; } .mt-8 { margin-top: 8px; } .mt-16 { margin-top: 16px; } .mt-24 { margin-top: 24px; } .mb-16 { margin-bottom: 16px; } .mb-24 { margin-bottom: 24px; } .text-center { text-align: center; } .text-muted { opacity: 0.65; } .flex-gap { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; } /* ===== Responsive Breakpoints ===== */ @media (max-width: 1024px) { .grid-4 { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 768px) { .nav-breadcrumb { display: none; } .nav-inner { padding: 0 14px; } .page-wrapper { padding: 14px 12px; } .page-header { padding: 18px 16px; border-radius: 10px; } .page-header h1, .page-header h2 { font-size: 1.3em; } .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } .grid-auto { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); } .flash-container { padding: 0 12px; } /* Touch-friendly table: horizontal scroll */ .table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; } } @media (max-width: 480px) { .nav-link { padding: 5px 10px; font-size: 0.78em; } .btn-theme, .btn-theme-outline { padding: 10px 16px; font-size: 0.88em; } .page-header-actions { gap: 8px; } } /* ===== Print Styles ===== */ @media print { .app-nav, .flash-container { display: none; } .theme-bg, .theme-bg-solid, .theme-bg-dark { -webkit-print-color-adjust: exact; print-color-adjust: exact; } .bracket-container { background: var(--bg-solid) !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; } }