/* ============================================================ BEINGESPORTS — eigenständiges Theme (komplett losgelöst vom Dark-Gold) Aktiv nur unter . Nachbau des beingesports.com-Looks: schwarzer Hintergrund mit grünem Glow, Mint-Akzent, kondensierte Uppercase-Typo mit weitem Tracking, scharfkantige Ghost-Buttons. Hauptschrift ist Barlow Condensed (wie beingesports.com), Rajdhani bleibt als Fallback; beide werden in base.html.twig selbst gehostet geladen. ============================================================ */ html[data-theme="being"] { /* Marken-Palette (Akzent; per data-accent umschaltbar — s. unten Gold-Variante) */ /* Markenmint = exakt der Live-Wert von beingesports.com (primary-400). --be-mint-2 ist der zweite Stopp der Verlaufs-Schrift (secondary-400). */ --be-mint: #00ffae; --be-mint-2: #00ffd0; --be-mint-bright: #7dffd2; --be-mint-dim: #00b87d; --be-mint-pale: #e6fff6; --be-mint-rgb: 0, 255, 174; --be-bg: #030706; --be-bg-2: #070f0c; --be-panel: rgba(10, 22, 18, 0.55); --be-text: #e3f0ea; --be-muted: #a6c3b9; --be-line: rgba(var(--be-mint-rgb), 0.16); --be-line-strong: rgba(var(--be-mint-rgb), 0.40); /* bestehende Design-Tokens auf BeingEsports umbiegen (Gold -> Mint) */ --gold: var(--be-mint); --gold-2: var(--be-mint-2); --gold-dark: var(--be-mint-dim); --gold-light: var(--be-mint-bright); --gold-rgb: var(--be-mint-rgb); --bg: var(--be-bg); --bg-card: var(--be-bg-2); --bg-hover: #0c1814; --bg-input: #0a1411; --border: var(--be-line); --border-gold: var(--be-line); --border-gold-hover: var(--be-line-strong); --text: var(--be-text); --text-muted: var(--be-muted); --text-dim: #85a096; --color-gold: var(--be-mint); --color-gold-rgb: var(--be-mint-rgb); --color-gold-dark: var(--be-mint-dim); --color-bg: var(--be-bg); --color-bg-card: var(--be-bg-2); --color-bg-card-rgb: 7, 15, 12; --color-bg-hover: #0c1814; --color-bg-input: #0a1411; --color-text: var(--be-text); --color-text-muted: var(--be-muted); --color-text-dim: #85a096; --color-border-light: var(--be-line); } /* Accent-Variante GOLD (für Farbsehschwäche): nur die Mint-Tokens umbiegen, alles Abgeleitete (--gold, Border, Glows, …) folgt automatisch. Aktiv via . */ html[data-theme="being"][data-accent="gold"] { --be-mint: #c9a44a; --be-mint-2: #e0c675; --be-mint-bright: #e0c675; --be-mint-dim: #a8872e; --be-mint-pale: #f6ead0; --be-mint-rgb: 201, 164, 74; } /* Accent-Umschalter (oben rechts): Punkt zeigt die aktive Akzentfarbe */ html[data-theme="being"] .be-accent-toggle { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; padding: 0; background: transparent; border: 1px solid var(--be-line-strong); border-radius: 6px; cursor: pointer; transition: border-color 0.15s; } html[data-theme="being"] .be-accent-toggle:hover { border-color: var(--gold); } html[data-theme="being"] .be-accent-dot { width: 14px; height: 14px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 6px rgba(var(--be-mint-rgb), 0.7); } /* ---- Grundflaeche: schwarz + grüner Atmosphaeren-Glow, kondensierte Typo ---- */ html[data-theme="being"] { background: var(--be-bg); } /* body transparent lassen, damit die z-index:-1-Layer (Hintergrund-Mark + Glow aus body::before) ueber dem html-Grund sichtbar bleiben und nicht vom deckenden body-Hintergrund uebermalt werden. */ html[data-theme="being"] body { background: transparent; } html[data-theme="being"], html[data-theme="being"] body { color: var(--be-text); font-family: 'Barlow Condensed', 'Rajdhani', 'Segoe UI', sans-serif; letter-spacing: 0.01em; } html[data-theme="being"] body::before { content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: /* Zentraler Lichtschein oben (wie auf der Loginseite) */ radial-gradient(1200px 680px at 50% 22%, rgba(var(--be-mint-rgb), 0.24), transparent 55%), radial-gradient(900px 520px at 50% 80%, rgba(var(--be-mint-rgb), 0.16), transparent 60%), /* unterer Schein, damit das Gruen bis zum Footer reicht (kein dunkles Band) */ radial-gradient(1100px 460px at 50% 100%, rgba(var(--be-mint-rgb), 0.13), transparent 62%), radial-gradient(700px 400px at 12% 0%, rgba(var(--be-mint-rgb), 0.10), transparent 55%), var(--be-bg); animation: none; } html[data-theme="being"] body::after { display: none; } /* Kondensierte, gespreizte Uppercase-Headings in Mint */ html[data-theme="being"] h1, html[data-theme="being"] h2, html[data-theme="being"] h3, html[data-theme="being"] .nav-logo-text, html[data-theme="being"] .login-title-big, html[data-theme="being"] .login-topbar-text, html[data-theme="being"] .login-card-title, html[data-theme="being"] .login-features-title { font-family: 'Barlow Condensed', 'Rajdhani', sans-serif; font-weight: 600; text-transform: uppercase; letter-spacing: 0.14em; color: var(--be-mint); } html[data-theme="being"] ::selection { background: rgba(var(--be-mint-rgb), 0.32); color: #021; } /* ---- Top-Nav: minimal, schwarz, Mint ---- */ html[data-theme="being"] .main-nav { background: rgba(3, 7, 6, 0.92); backdrop-filter: blur(10px); border-bottom: 1px solid var(--be-line); } /* Mobile: backdrop-filter erzeugt einen containing block und klemmt den Fullscreen-Drawer (.nav-tabs, position:fixed) auf Header-Hoehe. Auf Mobile aus — dafuer opaker Hintergrund, optisch identisch (analog nav.css). */ @media (max-width: 1023px) { html[data-theme="being"] .main-nav { backdrop-filter: none; -webkit-backdrop-filter: none; background: rgba(3, 7, 6, 1); } } html[data-theme="being"] .nav-logo-text { font-size: 1.05rem; color: var(--be-mint); } /* Grünes Schwert-Schild-Logo in der Nav (Gold per hue-rotate auf Gruen) */ html[data-theme="being"] .be-navlogo-img { height: 30px; margin-right: 9px; filter: hue-rotate(118deg) saturate(1.7) brightness(1.05) drop-shadow(0 0 6px rgba(var(--be-mint-rgb), 0.5)); } html[data-theme="being"] .nav-tab { font-family: 'Barlow Condensed', 'Rajdhani', sans-serif; text-transform: uppercase; letter-spacing: 0.12em; color: var(--be-muted); border-radius: 0; background: transparent; } html[data-theme="being"] .nav-tab:hover, html[data-theme="being"] .nav-tab.active { color: var(--be-mint); background: transparent; border-color: transparent; text-shadow: 0 0 14px rgba(var(--be-mint-rgb), 0.5); } /* ---- Cards: scharfkantig, dunkel, dünner Rand ---- */ html[data-theme="being"] .card, html[data-theme="being"] .card-hover, html[data-theme="being"] .card-compact { background: var(--be-panel); border: 1px solid var(--be-line); border-radius: 0; box-shadow: none; } html[data-theme="being"] .card-hover:hover, html[data-theme="being"] .card:hover { border-color: var(--be-line-strong); box-shadow: 0 0 0 1px rgba(var(--be-mint-rgb), 0.08), 0 10px 40px rgba(0, 0, 0, 0.5); } /* ---- Buttons: Ghost-Outline, Uppercase, gespreizt, scharfkantig ---- */ html[data-theme="being"] .btn-primary, html[data-theme="being"] .filter-chip, html[data-theme="being"] .btn-small { background: transparent; border: 1px solid var(--be-line-strong); border-radius: 0; color: var(--be-mint); font-family: 'Barlow Condensed', 'Rajdhani', sans-serif; text-transform: uppercase; letter-spacing: 0.16em; font-weight: 600; box-shadow: none; } html[data-theme="being"] .btn-primary:hover, html[data-theme="being"] .filter-chip:hover, html[data-theme="being"] .btn-small:hover { background: rgba(var(--be-mint-rgb), 0.10); border-color: var(--be-mint); color: var(--be-mint-bright); box-shadow: 0 0 18px rgba(var(--be-mint-rgb), 0.25); } html[data-theme="being"] .filter-chip.active { background: rgba(var(--be-mint-rgb), 0.14); border-color: var(--be-mint); color: var(--be-mint-bright); } /* Draft-Start-Button: nutzt sonst einen hartkodierten Gold-Gradient (#a8893a) -> im gruenen Theme matschig. Auf den Ghost-Mint-Look angleichen. */ html[data-theme="being"] .draft-start-btn { background: transparent; border: 1px solid var(--be-line-strong); border-radius: 0; color: var(--be-mint); text-transform: uppercase; letter-spacing: 0.16em; box-shadow: none; } html[data-theme="being"] .draft-start-btn:hover { background: rgba(var(--be-mint-rgb), 0.10); border-color: var(--be-mint); color: var(--be-mint-bright); box-shadow: 0 0 18px rgba(var(--be-mint-rgb), 0.25); } html[data-theme="being"] .btn-link { color: var(--be-muted); } html[data-theme="being"] .btn-link:hover { color: var(--be-mint); } /* ---- Tabellen ---- */ html[data-theme="being"] .table-header, html[data-theme="being"] thead tr { background: rgba(var(--be-mint-rgb), 0.05); color: var(--be-mint); text-transform: uppercase; letter-spacing: 0.1em; border-bottom: 1px solid var(--be-line); } html[data-theme="being"] .table-row { border-bottom: 1px solid rgba(255, 255, 255, 0.03); } html[data-theme="being"] .table-row:hover { background: rgba(var(--be-mint-rgb), 0.04); } /* ---- Inputs ---- */ html[data-theme="being"] .input, html[data-theme="being"] input[type="text"], html[data-theme="being"] input[type="password"], html[data-theme="being"] select { background: var(--be-bg-2); border: 1px solid var(--be-line); border-radius: 0; color: var(--be-text); } html[data-theme="being"] .input:focus { border-color: var(--be-mint); box-shadow: 0 0 0 1px rgba(var(--be-mint-rgb), 0.3); } /* ---- Footer ---- */ html[data-theme="being"] .site-footer { border-top: 1px solid var(--be-line); background: transparent; } /* ---- Text-Akzente generisch ---- */ html[data-theme="being"] .text-radiant { color: var(--be-mint); } html[data-theme="being"] a { color: var(--be-mint); } /* ============================================================ /being Landing + Login — dedizierte BeingEsports-Komponenten ============================================================ */ .be-page { max-width: 1100px; margin: 0 auto; padding: 56px 24px 80px; } .be-hero { position: relative; padding: 40px 0 28px; } .be-mark { color: var(--be-mint); font-weight: 700; font-size: 1.4rem; margin-right: 10px; } .be-kicker { font-family: 'Barlow Condensed', 'Rajdhani', sans-serif; text-transform: uppercase; letter-spacing: 0.32em; color: var(--be-muted); font-size: 0.78rem; margin-bottom: 10px; } .be-title { font-family: 'Barlow Condensed', 'Rajdhani', sans-serif; font-weight: 700; text-transform: uppercase; letter-spacing: 0.10em; color: var(--be-mint); font-size: clamp(2rem, 5vw, 3.4rem); line-height: 1.02; margin: 0; text-shadow: 0 0 30px rgba(var(--be-mint-rgb), 0.25); } .be-sub { color: var(--be-muted); margin-top: 12px; font-size: 1.05rem; letter-spacing: 0.04em; } .be-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin: 40px 0; } .be-stat { border: 1px solid var(--be-line); padding: 22px 20px; background: var(--be-panel); } .be-stat-num { font-family: 'Barlow Condensed', 'Rajdhani', sans-serif; font-weight: 700; font-size: 2.4rem; color: var(--be-mint); line-height: 1; text-shadow: 0 0 22px rgba(var(--be-mint-rgb), 0.3); } .be-stat-label { color: var(--be-muted); text-transform: uppercase; letter-spacing: 0.16em; font-size: 0.74rem; margin-top: 8px; } .be-section-title { font-family: 'Barlow Condensed', 'Rajdhani', sans-serif; text-transform: uppercase; letter-spacing: 0.2em; color: var(--be-muted); font-size: 0.8rem; margin: 0 0 14px; } .be-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 14px; } .be-tile { display: block; border: 1px solid var(--be-line); background: var(--be-panel); padding: 26px 20px; color: var(--be-text); text-decoration: none; text-transform: uppercase; letter-spacing: 0.16em; font-weight: 600; font-family: 'Barlow Condensed', 'Rajdhani', sans-serif; transition: all 0.18s ease; position: relative; } .be-tile:hover { border-color: var(--be-mint); color: var(--be-mint-bright); box-shadow: 0 0 24px rgba(var(--be-mint-rgb), 0.18); transform: translateY(-2px); } .be-tile small { display: block; color: var(--be-muted); letter-spacing: 0.08em; font-weight: 400; font-size: 0.72rem; margin-top: 6px; text-transform: none; } /* Login im BeingEsports-Stil */ html[data-theme="being"] .login-page { background: transparent; } html[data-theme="being"] .login-card { background: var(--be-panel); border: 1px solid var(--be-line); border-radius: 0; } html[data-theme="being"] .login-label { text-transform: uppercase; letter-spacing: 0.14em; color: var(--be-muted); font-size: 0.74rem; } html[data-theme="being"] .login-tagline { color: var(--be-muted); letter-spacing: 0.03em; } html[data-theme="being"] .login-topbar { border-bottom: 1px solid var(--be-line); } html[data-theme="being"] .feature-title { color: var(--be-mint); text-transform: uppercase; letter-spacing: 0.08em; } html[data-theme="being"] .feature-desc { color: var(--be-muted); } @media (max-width: 640px) { .be-stats { grid-template-columns: 1fr; } } /* ============================================================ Scope-Switch (Gimmick, nur BeingEsports-Accounts) — theme-neutral via var(--gold), adaptiert also automatisch: Gold im Analyseboard-Modus, Mint im Reincarnation-Modus. ============================================================ */ .scope-toggle { display: inline-flex; align-items: center; gap: 6px; margin-right: 8px; padding: 4px 11px; border: 1px solid var(--border-gold-hover); border-radius: 0; font-family: 'Barlow Condensed', 'Rajdhani', 'JetBrains Mono', sans-serif; text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.68rem; font-weight: 600; color: var(--gold); text-decoration: none; white-space: nowrap; transition: all 0.15s ease; } .scope-toggle:hover { background: rgba(var(--gold-rgb), 0.14); box-shadow: 0 0 12px rgba(var(--gold-rgb), 0.25); } .scope-toggle-ic { font-size: 0.85rem; line-height: 1; } /* ============================================================ Glitter — Partikel steigen vom Text nach oben (BeingEsports-Look) ============================================================ */ .nav-logo { position: relative; } .glitter { position: absolute; inset: 0; pointer-events: none; overflow: visible; } .glitter i { position: absolute; bottom: 2px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 6px rgba(var(--gold-rgb), 0.95), 0 0 13px rgba(var(--gold-rgb), 0.5); opacity: 0; animation-name: glitter-rise; animation-timing-function: ease-out; animation-iteration-count: infinite; } @keyframes glitter-rise { 0% { transform: translateY(8px) scale(0.4); opacity: 0; } 12% { opacity: 1; } 70% { opacity: 0.9; } 100% { transform: translateY(-52px) scale(1.1); opacity: 0; } } /* dezentere, kürzere Variante in der Nav */ .be-navlogo .glitter i { animation-name: glitter-rise-sm; } @keyframes glitter-rise-sm { 0% { transform: translateY(5px) scale(0.4); opacity: 0; } 15% { opacity: 1; } 100% { transform: translateY(-24px) scale(1); opacity: 0; } } .be-title-wrap { position: relative; display: inline-block; } /* Funkenflug hoeher: Partikel ziehen ueber den Co-Brand-Schriftzug hinweg und flicken weit weg */ .be-brand .glitter { overflow: visible; } .be-brand .glitter i { animation-name: glitter-rise-tall-be; } @keyframes glitter-rise-tall-be { 0% { transform: translateY(12px) scale(0.4); opacity: 0; } 10% { opacity: 1; } 60% { opacity: 1; } 100% { transform: translateY(-130px) scale(1.15); opacity: 0; } } @media (prefers-reduced-motion: reduce) { .glitter { display: none; } } /* ============================================================ Co-Branding — "BEINGESPORTS ✕ ANALYSEBOARD": Gold (Analyseboard) glimmert in Gruen (BeingEsports) ueber, als Zeichen der Zusammenarbeit. ============================================================ */ /* Login-Hintergrund im Being-Scope: die in login.css hartkodierten Gold-Glows (rgba(201,164,74)) auf Gruen umfaerben — sonst bleibt der goldene Schein. */ html[data-theme="being"] .login-page::before { background: radial-gradient(ellipse at 50% 20%, rgba(var(--be-mint-rgb), 0.22) 0%, transparent 45%), radial-gradient(ellipse at 5% 35%, rgba(var(--be-mint-rgb), 0.12) 0%, transparent 45%), radial-gradient(ellipse at 95% 55%, rgba(var(--be-mint-rgb), 0.10) 0%, transparent 45%), radial-gradient(ellipse at 50% 95%, rgba(var(--be-mint-rgb), 0.16) 0%, transparent 50%); /* Nur Helligkeit atmen, NICHT skalieren (sonst wandert der untere Rand -> "groesser/kleiner") */ animation: be-login-glow 9s ease-in-out infinite alternate; } @keyframes be-login-glow { from { opacity: 0.74; } to { opacity: 1; } } html[data-theme="being"] .login-page::after { background: linear-gradient(135deg, transparent 35%, rgba(var(--be-mint-rgb), 0.05) 42%, transparent 48%), linear-gradient(135deg, transparent 55%, rgba(var(--be-mint-rgb), 0.03) 62%, transparent 68%), linear-gradient(315deg, transparent 65%, rgba(var(--be-mint-rgb), 0.03) 72%, transparent 78%); } /* Wörter eng beieinander (flex), Logo absolut ueber dem ✕ — so beeinflusst das Logo die Wort-Abstaende nicht und sitzt exakt mittig ueberm ✕. */ .be-brand { display: flex; align-items: center; justify-content: center; gap: 16px; width: max-content; max-width: 100%; margin: 0 auto; position: relative; /* Freiraum fuers absolute Emblem — skaliert fluid mit der Fensterhoehe (= Emblem + 16px). */ padding-top: clamp(100px, calc(15vh + 16px), 196px); } .be-brand .cobrand-x { position: relative; } .cobrand-name { font-family: 'Barlow Condensed', 'Rajdhani', sans-serif; font-weight: 700; text-transform: uppercase; letter-spacing: 0.10em; line-height: 1; /* Titel skaliert mit der kleineren Dimension (Breite ODER Hoehe) — schrumpft auf flachen Fenstern mit. */ font-size: clamp(1.4rem, min(4vw, 5vh), 2.7rem); } .cobrand-being { color: var(--be-mint); text-shadow: 0 0 28px rgba(var(--be-mint-rgb), 0.40); } .cobrand-ab { color: var(--be-mint-bright); text-shadow: 0 0 28px rgba(var(--be-mint-rgb), 0.40); } .cobrand-x { font-size: clamp(1.3rem, 3vw, 2rem); color: #ffffff; opacity: 0.85; font-weight: 700; text-shadow: 0 0 18px rgba(255, 255, 255, 0.3); } /* BeingEsports-Mark als Hintergrund-Wasserzeichen: schimmert durch und wird vom zentralen Lichtschein aufgedeckt (radiale Maske blendet zu den Raendern aus). */ html[data-theme="being"] .be-bg-mark { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: min(1100px, 96vw); height: min(1100px, 96vw); /* background-image wird inline per asset() gesetzt (umgeht css-loader URL-Resolver) */ background-position: center; background-size: contain; background-repeat: no-repeat; mix-blend-mode: screen; /* schwarzer Bildgrund verschwindet, Arme schimmern in den dunklen Bereichen */ z-index: 0; pointer-events: none; opacity: 0.24; filter: brightness(0.9) saturate(1.0); animation: be-mark-shimmer 7s ease-in-out infinite; } @keyframes be-mark-shimmer { 0%, 100% { opacity: 0.14; } 50% { opacity: 0.30; } } /* "Lichteinfall": der zentrale Glow erhellt das (dunklere) Mark zur Mitte hin. Eine radiale Maske duemmt das Mark zu den Raendern/Textzonen, hellt es im Lichtkegel auf — so bleibt der Text lesbar, das Mark wirkt vom Licht enthuellt. */ html[data-theme="being"] .be-bg-mark { -webkit-mask-image: radial-gradient(120% 90% at 50% 30%, #000 0%, rgba(0,0,0,0.55) 45%, rgba(0,0,0,0.2) 70%, transparent 100%); mask-image: radial-gradient(120% 90% at 50% 30%, #000 0%, rgba(0,0,0,0.55) 45%, rgba(0,0,0,0.2) 70%, transparent 100%); } @media (prefers-reduced-motion: reduce) { html[data-theme="being"] .be-bg-mark { animation: none; opacity: 0.10; } } /* Top-Left-Lockup (Being): Schwert-Mark gruen + "BEINGESPORTS ✕ ANALYSEBOARD". Text faerbt sich ueber var(--gold) (=mint im Being-Scope) automatisch. */ html[data-theme="being"] .be-topbar-logo { filter: hue-rotate(118deg) saturate(1.7) brightness(1.05) drop-shadow(0 0 6px rgba(var(--be-mint-rgb), 0.45)); } .be-topbar-x { color: #ffffff; opacity: 0.8; margin: 0 3px; font-weight: 700; } /* BeingEsports-Mark (Logo auf Schwarz) als Topbar-Icon: screen-Blend laesst das Schwarz auf dem dunklen Hintergrund verschwinden. */ html[data-theme="being"] .be-topbar-mark { mix-blend-mode: screen; filter: brightness(1.15); } /* ---- Being-Branding auf den eingeloggten Seiten ----------------------------- 1) Hintergrund-Mark als persistentes Wasserzeichen: gleicher Look wie auf dem Login (screen-Blend + radiale Lichtschein-Maske, geerbt von .be-bg-mark), aber viewport-fixiert und hinter allen Seiteninhalten (z-index:-1, sitzt ueber dem Atmosphaeren-Glow von body::before). */ html[data-theme="being"] .be-bg-mark.be-bg-mark--app { position: fixed; top: 48%; z-index: -1; width: min(980px, 88vw); height: min(980px, 88vw); /* Mask + Shimmer werden von .be-bg-mark geerbt -> gleicher Reveal-Look wie auf dem Login; nur etwas praesenter (Opazitaet) fuer die inhaltsreichen Seiten. */ animation: be-mark-shimmer-app 8s ease-in-out infinite; } @keyframes be-mark-shimmer-app { 0%, 100% { opacity: 0.20; } 50% { opacity: 0.34; } } @media (prefers-reduced-motion: reduce) { html[data-theme="being"] .be-bg-mark.be-bg-mark--app { animation: none; opacity: 0.26; } } /* 2) Nav-Cobrand-Lockup oben links: BeingEsports-Mark (gruen via screen) + "BEINGESPORTS ✕ ANALYSEBOARD" + Analyseboard-Logo (gruen via hue-rotate). */ html[data-theme="being"] .be-nav-cobrand { display: flex; align-items: center; gap: 9px; position: relative; } html[data-theme="being"] .be-nav-cobrand .be-nav-mark, html[data-theme="being"] .be-nav-cobrand .be-nav-ablogo { height: 26px; margin: 0; max-width: none; } html[data-theme="being"] .be-nav-cobrand-text { font-family: 'Barlow Condensed', 'Rajdhani', sans-serif; font-weight: 700; text-transform: uppercase; letter-spacing: 0.10em; font-size: 0.98rem; color: var(--be-mint); white-space: nowrap; } @media (max-width: 720px) { html[data-theme="being"] .be-nav-cobrand-text { font-size: 0.72rem; letter-spacing: 0.05em; } html[data-theme="being"] .be-nav-cobrand .be-nav-mark, html[data-theme="being"] .be-nav-cobrand .be-nav-ablogo { height: 20px; } } /* Schwert-Schild-Logo: Gold per hue-rotate auf Gruen gedreht + pulsierender gruener Glow (gleicher Effekt wie das Gold-Logo, nur gruen). */ html[data-theme="being"] .be-hero-logo { position: absolute; left: 50%; bottom: calc(100% + 33px); transform: translateX(-50%); height: clamp(84px, 15vh, 180px); max-width: none; /* Emblem skaliert fluid mit der Fensterhoehe */ animation: be-logo-glow 3s ease-in-out infinite; } @keyframes be-logo-glow { 0%, 100% { filter: hue-rotate(118deg) saturate(1.7) brightness(1.05) drop-shadow(0 0 10px rgba(var(--be-mint-rgb), 0.5)) drop-shadow(0 0 42px rgba(var(--be-mint-rgb), 0.25)); } 50% { filter: hue-rotate(118deg) saturate(1.7) brightness(1.05) drop-shadow(0 0 20px rgba(var(--be-mint-rgb), 0.85)) drop-shadow(0 0 72px rgba(var(--be-mint-rgb), 0.40)); } } @media (max-width: 640px) { html[data-theme="being"] .be-hero-logo { height: 120px; } .be-brand { padding-top: 132px; } } /* Login einspaltig + zentriert (rechte Feature-Liste entfaellt im Being-Scope) */ html[data-theme="being"] .login-container { grid-template-columns: 1fr; max-width: 460px; } /* Hinweis unter dem Lockup: speziell fuer die Reincarnation League + Link */ html[data-theme="being"] .login-cobrand-note { text-align: center; color: var(--be-muted); font-size: 0.92rem; letter-spacing: 0.03em; margin-top: 8px; } html[data-theme="being"] .login-cobrand-note strong { color: var(--be-mint); font-weight: 600; } html[data-theme="being"] .login-cobrand-note a { color: var(--be-mint); text-decoration: none; border-bottom: 1px solid var(--be-line-strong); } html[data-theme="being"] .login-cobrand-note a:hover { color: var(--be-mint-bright); } /* Kleingedrucktes lesbar halten: KEIN Blur-Schatten (verwaschen), nur ein knapper dunkler Schein gegen das Hintergrund-Mark. Lesbarer Sans statt kondensiertem Rajdhani + etwas mehr Gewicht. */ html[data-theme="being"] .login-tagline, html[data-theme="being"] .login-cobrand-note, html[data-theme="being"] .login-access-note { font-family: 'Segoe UI', system-ui, -apple-system, sans-serif; font-weight: 500; letter-spacing: 0.01em; text-shadow: 0 1px 2px rgba(3, 7, 6, 0.95); } html[data-theme="being"] .login-tagline { color: #c2ddd4; } html[data-theme="being"] .login-cobrand-note { color: #b6d2c8; } /* Englischer Zugangs-Hinweis unter dem Login */ html[data-theme="being"] .login-access-note { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--be-line); color: #aac6bc; font-size: 0.82rem; line-height: 1.6; letter-spacing: 0.01em; text-align: center; } /* Rechtlicher Hinweis: eigenstaendiges Projekt, kein BeingEsports-Credit/Haftung */ html[data-theme="being"] .login-access-disclaimer { display: block; margin-top: 10px; color: #8fab9f; font-size: 0.74rem; font-style: italic; line-height: 1.55; } @media (prefers-reduced-motion: reduce) { .cobrand-bg::before { opacity: 0.6; animation: none; } .cobrand-bg::after { opacity: 0.8; animation: none; } } /* ============================================================ P9 — Angleichung an beingesports.com (Header, Hero-Panel, Game-Band, Seitenkoepfe). Diese Regeln muessen im being-Scope stehen, weil das Theme oben h1/h2/.nav-* generisch auf Mint + 0.14em Tracking zieht. ============================================================ */ /* Wortmarke im Header: gross und mint wie auf beingesports.com. Groessen/Abstaende stehen bewusst HIER und nicht nur in app.css — das Theme greift oben mit html[data-theme="being"] .nav-* generisch ein und wuerde die Basiswerte sonst wieder ueberschreiben. */ html[data-theme="being"] .nav-logo-text { color: var(--be-mint); font-size: 1.875rem; font-weight: 500; letter-spacing: 0.06em; line-height: 1; text-shadow: 0 0 18px rgba(var(--be-mint-rgb), 0.3); } /* Die Mark bringt ihren Schein selbst mit (PNG) — kein zusaetzlicher Filter, sonst wirkt sie wie in einem Kasten. */ html[data-theme="being"] .nav-logo img { filter: none; } /* Reiter: Ruhezustand mint (Live-Look), aktiv/hover weiss mit Schein. Groesse/Tracking so knapp wie noetig, damit die 11 Reiter zusammen mit Wortmarke und Aktionen in EINER Zeile bleiben (Vorgabe). */ /* Ruhezustand ist HELLGRAU, nicht mint — am Live-DOM gemessen: inaktive Reiter #bfbfbf / weight 300 / 20px, nur der aktive ist mint. Mint fuer alle war ein Messfehler (gemessen wurde versehentlich der aktive Reiter). */ html[data-theme="being"] .nav-tab { color: #bfbfbf; font-size: 1.08rem; font-weight: 300; letter-spacing: 0.1em; } /* Nur Hover und aktive Seite in Mint (live: hover:text-primary-400). */ html[data-theme="being"] .nav-tab:hover, html[data-theme="being"] .nav-tab.active { color: var(--be-mint); text-shadow: 0 0 16px rgba(var(--be-mint-rgb), 0.45); } html[data-theme="being"] .nav-tab-mini { font-size: 0.95rem; letter-spacing: 0.05em; } /* Enger werdende Fenster: erst Abstaende, dann die Aktionen, zuletzt die Reiterschrift — die Wortmarke bleibt gross. */ @media (max-width: 1400px) { html[data-theme="being"] .nav-logo-text { letter-spacing: 0.05em; } html[data-theme="being"] .nav-tab { letter-spacing: 0.08em; } } @media (max-width: 1200px) { html[data-theme="being"] .nav-logo-text { font-size: 1.7rem; letter-spacing: 0.03em; } html[data-theme="being"] .nav-tab { font-size: 1.02rem; letter-spacing: 0.04em; } html[data-theme="being"] .nav-tab-mini { font-size: 0.88rem; letter-spacing: 0.03em; } } @media (max-width: 900px) { html[data-theme="being"] .nav-logo-text { font-size: 1.6rem; letter-spacing: 0.14em; } html[data-theme="being"] .nav-tab { font-size: 1.0rem; letter-spacing: 0.08em; } } /* Seitenkopf: Titel weiss (nicht mint), Eyebrow mint */ html[data-theme="being"] .page-head-title { color: #ffffff; letter-spacing: 0.12em; text-shadow: 0 0 26px rgba(255, 255, 255, 0.12); } html[data-theme="being"] .page-head-eyebrow { color: var(--be-mint); letter-spacing: 0.26em; } html[data-theme="being"] .section-title { color: var(--be-muted); letter-spacing: 0.22em; } /* Hero-Feature-Panel: Haupttitel weiss mit leichtem Glow */ html[data-theme="being"] .hero-panel-title { color: #ffffff; letter-spacing: 0.15em; text-shadow: 0 0 34px rgba(255, 255, 255, 0.28), 0 0 90px rgba(var(--be-mint-rgb), 0.16); } html[data-theme="being"] .hero-panel-inner { border-color: var(--be-line-strong); } html[data-theme="being"] .hero-panel-cta:hover { color: var(--be-mint-bright); } /* Footer im being-Scope zentriert lassen (Theme setzt nur den Rahmen) */ html[data-theme="being"] .footer-links a:hover { text-shadow: 0 0 14px rgba(var(--be-mint-rgb), 0.5); }