/* === UBC Star-Citizen Skin === Greift nur wenn / die Klasse .sc-mode hat. Reskin primär über Überschreiben der CSS-Variablen aus common.css. */ html.sc-mode, body.sc-mode { --bg-dark: #05080f; --bg-panel: #0a1018; --bg-card: #0c131d; --bg-hover: #122033; --border: #1c3148; --accent: #29d6ff; /* SC-Cyan */ --accent-dim: rgba(41, 214, 255, 0.13); --text: #dbe7f0; --text-dim: #6f8ba3; --text-muted:#4d6a82; --blue: #29d6ff; --green: #36e0a0; --green-dim: rgba(54, 224, 160, 0.15); } /* SC-Akzent 2: Amber/Gold für Hervorhebungen */ body.sc-mode { --sc-amber: #ffae42; } body.sc-mode { background: radial-gradient(1200px 600px at 80% -10%, rgba(41,214,255,0.06), transparent 60%), radial-gradient(900px 500px at 0% 110%, rgba(255,174,66,0.05), transparent 55%), var(--bg-dark); background-attachment: fixed; } /* Nav: kantiger, leichter Glow */ body.sc-mode nav { border-bottom: 1px solid var(--border); box-shadow: 0 1px 0 rgba(41,214,255,0.12); } body.sc-mode .nav-brand-btn { color: var(--accent); text-shadow: 0 0 12px rgba(41,214,255,0.4); } body.sc-mode .nav-links a.active { box-shadow: inset 0 -2px 0 var(--accent); } /* Karten: kantige Ecken, dünne Akzentkante, dezenter Innenschein */ body.sc-mode .card, body.sc-mode .sc-card, body.sc-mode .settings-card, body.sc-mode .mission-card { border-radius: 4px; border: 1px solid var(--border); background: linear-gradient(180deg, rgba(41,214,255,0.03), transparent 40%), var(--bg-card); position: relative; } body.sc-mode .card::before, body.sc-mode .sc-card::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: linear-gradient(180deg, var(--accent), transparent); opacity: 0.5; } /* Buttons: kantig, Cyan-Primary mit Glow */ body.sc-mode .btn { border-radius: 3px; letter-spacing: 0.5px; text-transform: uppercase; font-size: 12px; } body.sc-mode .btn-primary { background: linear-gradient(180deg, #2ad8ff, #129fce); border-color: #29d6ff; color: #04121b; font-weight: 700; box-shadow: 0 0 14px rgba(41,214,255,0.35); } body.sc-mode .btn-primary:hover { box-shadow: 0 0 20px rgba(41,214,255,0.55); } body.sc-mode .btn-secondary { border-radius: 3px; } /* Überschriften: Sci-Fi-Tracking + Cyan */ body.sc-mode h1, body.sc-mode h2 { letter-spacing: 1.5px; } body.sc-mode h1 { color: var(--accent); text-shadow: 0 0 18px rgba(41,214,255,0.3); } /* Scrollbar dezent cyan */ body.sc-mode ::-webkit-scrollbar { width: 9px; height: 9px; } body.sc-mode ::-webkit-scrollbar-thumb { background: #1c3148; border-radius: 2px; } body.sc-mode ::-webkit-scrollbar-thumb:hover { background: #29516e; } /* SC-Hub spezifisch */ body.sc-mode .sc-tabs { display: flex; gap: 4px; flex-wrap: wrap; border-bottom: 1px solid var(--border); margin-bottom: 24px; } body.sc-mode .sc-tab { background: none; border: none; cursor: pointer; font-family: inherit; color: var(--text-dim); font-size: 13px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; padding: 12px 18px; border-bottom: 2px solid transparent; transition: all 0.15s; } body.sc-mode .sc-tab:hover { color: var(--text); } body.sc-mode .sc-tab.active { color: var(--accent); border-bottom-color: var(--accent); } body.sc-mode .sc-tab-panel { display: none; } body.sc-mode .sc-tab-panel.active { display: block; } body.sc-mode .sc-amber { color: var(--sc-amber); } /* === SC Hero / Landing (robust, ohne clip-path/mask) === */ body.sc-mode .sc-hero { border-bottom: 1px solid var(--border); background: radial-gradient(800px 300px at 75% 0%, rgba(41,214,255,0.12), transparent 60%), linear-gradient(180deg, #0a121d, var(--bg-dark)); } body.sc-mode .sc-hero-grid { display: none; } body.sc-mode .sc-hero-inner { max-width: 980px; margin: 0 auto; padding: 48px 24px 40px; } body.sc-mode .sc-hero-kicker { font-size: 11px; letter-spacing: 3px; color: var(--accent); text-transform: uppercase; margin-bottom: 12px; } body.sc-mode .sc-hero-title { font-size: clamp(28px, 5vw, 48px); font-weight: 800; letter-spacing: 4px; color: #eaf6ff; margin: 0 0 10px; line-height: 1.1; text-shadow: 0 0 24px rgba(41,214,255,0.4); } body.sc-mode .sc-hero-sub { color: var(--text-dim); font-size: 14px; letter-spacing: 0.5px; margin-bottom: 22px; } body.sc-mode .sc-hero-actions { display: flex; gap: 12px; flex-wrap: wrap; } /* Holo-Panels (schlicht: Akzent-Topline + linke Kante, KEIN clip-path) */ body.sc-mode .sc-holo { position: relative; background: var(--bg-card); border: 1px solid var(--border); border-top: 2px solid var(--accent); border-radius: 4px; padding: 16px 18px; } body.sc-mode .sc-holo-label { font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: var(--accent); margin-bottom: 12px; } body.sc-mode .sc-panel-head { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; padding-bottom: 12px; border-bottom: 1px solid var(--border); } body.sc-mode .sc-panel-head h2 { font-size: 18px; letter-spacing: 2px; text-transform: uppercase; color: var(--accent); } /* Roster-Chips (Übersicht-Teaser) */ body.sc-mode .sc-roster-chips { display: flex; flex-wrap: wrap; gap: 8px; } body.sc-mode .sc-chip { font-size: 12px; padding: 5px 11px; border-radius: 3px; background: rgba(41,214,255,0.08); border: 1px solid var(--border); color: var(--text-dim); } body.sc-mode .sc-chip b { color: var(--text); } body.sc-mode .sc-chip.muted { color: var(--text-muted); }