/* ============================================================ MT2GOLD · base.css — Tokens, Reset, Typografie, Bühne Portal-Design nach Genre-Vorbild (MT2009/Baerim): vollflächige Szene, Inhalte als dunkle Fenster darüber. DIE FARBEN SIND GEMESSEN, NICHT ERFUNDEN. Sie stammen aus den echten Fenstergrafiken des Baerim-Clients (C:\Users\kenne\Desktop\Baerim_ENTPACKT\ui\game\…) — abgelesen an den Stellen, die in der Datei danebenstehen. Das ist Kenneths stehende Vorgabe: das Vorbild übernehmen, nicht im eigenen Geschmack neu erfinden. ============================================================ */ :root { /* ---------- Farbwelt (aus dem MT2GOLD-Logo) ---------- */ --black: #060504; --ink-2: #120e09; --ink-3: #1b1610; --gold-100: #f8e9b8; --gold-300: #f0c75e; --gold-500: #d9a63a; --gold-700: #9a742a; --gold-900: #55401a; --crimson: #a8352a; --paper: #f0e8d8; --paper-dim: #b3a88f; --paper-mute: #7d6f52; --realm-red: #c05040; --realm-gold: #d9a63a; --realm-blue: #5c7ba3; --gold-grad: linear-gradient(180deg, var(--gold-100) 0%, var(--gold-300) 38%, var(--gold-500) 62%, var(--gold-700) 100%); /* ---------- DREI HELLIGKEITSSTUFEN — die Grundregel von Baerim ---------- „Flächen fast schwarz mit warmem Braunstich, Kopfbänder eine Stufe heller, Zeilenplatten wieder etwas heller — drei Stufen, nicht mehr." Genau drei. Jede vierte Stufe macht die Seite unruhig; wer das prüfen will, öffnet die Vorlagen und zählt nach. Gemessene Quellen: --flaeche ui/game/battlepass/bg_quest_list.png, Bildmitte #14110F --flaeche-hell dieselbe Datei, Oberkante #171311 --platte ui/game/companion/content_bg.png, Mitte #201914 --platte-hell dieselbe Datei, Oberkante #2D2A24 --haar bg_quest_list.png, Rahmenlinie #605345 */ --flaeche: #14110f; --flaeche-hell: #171311; --platte: #201914; --platte-hell: #2d2a24; /* Das Kopfband — bei Baerim ein Verlauf mit warmer, rotbrauner Mitte. Gemessen an ui/game/battlepass/header/header_background.png bei 15 %, 50 % und 90 % Höhe. Das ist der Grund, warum unsere Überschriften jetzt auf einer eigenen Fläche sitzen statt frei im Fenster zu schweben. */ --band-1: #1c120e; --band-2: #492e26; --band-3: #1a100d; --band: linear-gradient(180deg, var(--band-1) 0%, var(--band-2) 52%, var(--band-3) 100%); /* Die Rahmenlinie ist bei Baerim KEIN Gold, sondern ein warmes Graubraun — eine einzige Haarlinie rundum. Gold ist dort ausschliesslich Schrift- und Aktivfarbe. Vorher hatte diese Seite goldene Rahmen und goldene Eckwinkel: dadurch schrie jeder Kasten gleich laut, und nichts führte das Auge. */ --haar: #605345; --haar-linie: rgba(96, 83, 69, 0.55); --haar-hell: rgba(96, 83, 69, 0.85); --font-display: "Cinzel", "Times New Roman", serif; --font-body: "Schibsted Grotesk", "Segoe UI", sans-serif; --max: 1180px; --pad: clamp(16px, 4vw, 48px); --radius: 3px; --line: 1px solid var(--haar-linie); /* Leicht durchscheinend, damit die Bühne dahinter noch lebt — bei Baerim sind die Fenster sogar deutlich durchsichtiger (Alpha 117 von 255). So weit gehen wir nicht: hier steht Fliesstext drin, der gelesen werden muss. */ --panel-bg: rgba(20, 17, 15, 0.93); --panel-shadow: 0 18px 50px rgba(0, 0, 0, 0.55); --ease: cubic-bezier(0.22, 1, 0.36, 1); } /* ---------- Reset ---------- */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } /* Das hidden-Attribut MUSS gewinnen. Der Browser setzt für [hidden] nur "display: none" auf seiner schwächsten Ebene. Jede eigene Regel mit display sticht das aus — bei uns tat es ".panel.discord { display: flex }": der Discord-Kasten war mit hidden ausgezeichnet und stand trotzdem sichtbar auf der Seite. Nachgemessen: hidden-Attribut vorhanden, berechnetes display "flex". Diese eine Zeile macht hidden für die ganze Seite verlässlich. */ [hidden] { display: none !important; } html { scroll-behavior: smooth; /* Firefox-Scrollbar im Markenlook */ scrollbar-color: var(--gold-900) var(--black); scrollbar-width: thin; } body { background: var(--black); color: var(--paper); font-family: var(--font-body); font-size: 16.5px; line-height: 1.65; -webkit-font-smoothing: antialiased; overflow-x: hidden; } img, svg, canvas { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; } ul, ol { list-style: none; } button { font: inherit; background: none; border: 0; cursor: pointer; color: inherit; } strong { font-weight: 700; } ::selection { background: var(--gold-500); color: var(--black); } /* WebKit-Scrollbar (Chrome/Edge) */ ::-webkit-scrollbar { width: 11px; } ::-webkit-scrollbar-track { background: var(--black); } ::-webkit-scrollbar-thumb { background: var(--gold-900); border-radius: 6px; border: 2px solid var(--black); } ::-webkit-scrollbar-thumb:hover { background: var(--gold-700); } /* ============================================================ BÜHNE — fixierte Hintergrund-Szene hinter allem Inhalt. Ebenen: Himmel -> Bergrücken -> Pagoden -> Nebel -> Glut. Legt Kenneth ein echtes Artwork als assets/img/bg.jpg ab, übernimmt es die Bühne (JS blendet es ein). ============================================================ */ .stage { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; background: radial-gradient(120% 70% at 50% 108%, rgba(217, 166, 58, 0.16) 0%, rgba(168, 83, 32, 0.08) 34%, transparent 62%), radial-gradient(90% 60% at 50% -10%, #171009 0%, transparent 70%), linear-gradient(180deg, #0a0806 0%, #070503 45%, #0c0805 100%); } .stage-art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; /* JS: .loaded, wenn bg.jpg existiert */ transition: opacity 1.2s ease; } .stage-art.loaded { opacity: 0.5; } .stage-sky { position: absolute; inset: 0; background: radial-gradient(2px 2px at 12% 18%, rgba(248, 233, 184, 0.5), transparent 60%), radial-gradient(1.6px 1.6px at 28% 9%, rgba(248, 233, 184, 0.35), transparent 60%), radial-gradient(2px 2px at 44% 22%, rgba(248, 233, 184, 0.3), transparent 60%), radial-gradient(1.4px 1.4px at 63% 12%, rgba(248, 233, 184, 0.4), transparent 60%), radial-gradient(2px 2px at 78% 19%, rgba(248, 233, 184, 0.32), transparent 60%), radial-gradient(1.6px 1.6px at 91% 8%, rgba(248, 233, 184, 0.42), transparent 60%); } .stage-ridge { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 42vh; opacity: 0.9; } /* Die beiden Pagoden sind gezeichnete Umrisse, keine Kunst — sie sollen Tiefe andeuten und sonst nichts. Bei voller Deckkraft las man sie als Bauzeichnung mitten auf der Seite, besonders hinter den hellen Frage-Kästen. Zurückgenommen und leicht unscharf treten sie dorthin, wo ein Hintergrund hingehört: dahinter. (Sobald echtes Artwork als assets/img/bg.jpg daliegt, verschwinden sie ohnehin fast ganz — siehe .stage-art.loaded weiter oben.) */ .stage-pagoda { position: absolute; bottom: -12px; height: min(62vh, 560px); width: auto; opacity: 0.42; filter: blur(1.5px) drop-shadow(0 0 30px rgba(0, 0, 0, 0.6)); } .stage-pagoda.left { left: max(-40px, calc(50vw - 46rem - 120px)); } .stage-pagoda.right { right: max(-40px, calc(50vw - 46rem - 120px)); transform: scaleX(-1); } .stage-mist { position: absolute; left: -20%; right: -20%; height: 26vh; background: radial-gradient(60% 100% at 50% 50%, rgba(217, 166, 58, 0.05), transparent 70%); filter: blur(6px); } .stage-mist.m1 { bottom: 8vh; animation: mist 46s ease-in-out infinite alternate; } .stage-mist.m2 { bottom: 22vh; animation: mist 62s ease-in-out infinite alternate-reverse; } @keyframes mist { from { transform: translateX(-4%); } to { transform: translateX(4%); } } .stage-glow { position: absolute; inset: auto 0 0 0; height: 40vh; background: radial-gradient(70% 120% at 50% 115%, rgba(224, 132, 40, 0.14), transparent 65%); } #embers { position: absolute; inset: 0; width: 100%; height: 100%; } /* Körnung über allem */ body::after { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 40; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E"); } /* ---------- Typografie ---------- */ h1, h2, h3 { font-family: var(--font-display); font-weight: 600; line-height: 1.18; letter-spacing: 0.015em; color: var(--paper); } h1 { font-size: clamp(2rem, 5vw, 3.6rem); } h2 { font-size: clamp(1.4rem, 2.8vw, 2rem); } h3 { font-size: clamp(1.02rem, 1.6vw, 1.2rem); } h1 em, h2 em, .goldtext { font-style: normal; background: var(--gold-grad); -webkit-background-clip: text; background-clip: text; color: transparent; } /* Fallback, falls background-clip:text nicht greift */ @supports not ((-webkit-background-clip: text) or (background-clip: text)) { h1 em, h2 em, .goldtext { background: none; color: var(--gold-300); } } .lede { font-size: clamp(1rem, 1.5vw, 1.12rem); color: var(--paper-dim); max-width: 58ch; margin-top: 1rem; } .lede.center { margin-left: auto; margin-right: auto; } /* Diamant-Ornament (Logo-Motiv) */ .dia { display: inline-block; flex: none; width: 9px; height: 15px; background: var(--gold-500); -webkit-clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); } .dia.big { width: 15px; height: 25px; margin-bottom: 1.3rem; } /* ---------- Layout ---------- */ .section { max-width: var(--max); margin: 0 auto; padding: clamp(28px, 4vh, 48px) var(--pad) 0; position: relative; } .section.narrow { max-width: 880px; } /* ---------- Scroll-Reveal ---------- Standard: alles sichtbar (kein JS = keine versteckten Inhalte). JS setzt und blendet dann sanft ein. */ html.anim .reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); } html.anim .reveal.in { opacity: 1; transform: none; } html.anim .d1 { transition-delay: 0.08s; } html.anim .d2 { transition-delay: 0.16s; } html.anim .d3 { transition-delay: 0.24s; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } html.anim .reveal { opacity: 1; transform: none; transition: none; } .stage-mist { animation: none; } #embers { display: none; } } /* ---------- Zugänglichkeit ---------- */ .skip { position: absolute; left: -9999px; top: 0; background: var(--gold-500); color: var(--black); padding: 10px 18px; z-index: 100; } .skip:focus { left: 12px; top: 12px; } :focus-visible { outline: 2px solid var(--gold-300); outline-offset: 3px; }