/* ========================================================= EXILECHAOS — DOKUMENTIERTE EINZELDATEI DATEI-AUFBAU 01 Basis / globale Einstellungen 02 Seitenrahmen 03 Header / Hauptnavigation 04 Hero-Bereich 05 Themenleiste 06 Gemeinsame Section-Grundlagen 07 Neuigkeiten 08 Builds 09 Medien / Community-Archiv 10 Discord-Livebereich 11 Beitreten-Banner 12 Footer 13 Medien-Modal 14 Responsive: kleiner Desktop 15 Responsive: Tablet 16 Responsive: Smartphone 17 Globaler Seitenhintergrund 18 Bewegung reduzieren 19 Feinschliff / Überschreibungen 20 Hero-Bildstreifen-Fix 21 Alter Hero-Trennlinien-Fix 22 Finaler Hero-Trennlinien-Fix HINWEIS - Alles bleibt in EINER CSS-Datei. - Keine CSS-Regel wurde entfernt. - Keine Werte oder Selektoren wurden geändert. - Nur Kommentare, Überschriften und Abstände wurden ergänzt. - Spätere Blöcke überschreiben teilweise bewusst frühere Regeln. ========================================================= */ /* ========================================================= 01 — BASIS / GLOBALE EINSTELLUNGEN HTML: , , globale Elemente und Hilfsklassen Enthält: Variablen, Reset, Grundtypografie, Bilder, Links, versteckte Daten ========================================================= */ :root { --page: #020707; --panel: #07100f; --panel-2: #0a1211; --panel-3: #101817; --border: rgba(210, 152, 72, 0.28); --border-soft: rgba(255, 255, 255, 0.09); --text: #f3eee4; --muted: #8d9490; --muted-2: #626a67; --gold: #d39a3f; --orange: #ed5b20; --orange-2: #b83512; --green: #26e58a; --shell-width: 1280px; --content-pad: 38px; --radius: 14px; } * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; min-width: 320px; color: var(--text); background: #020707; font-family: "Arial Narrow", "Roboto Condensed", "Segoe UI", sans-serif; line-height: 1.5; } body::before { content: ""; position: fixed; inset: 0; z-index: -2; background: radial-gradient(circle at 50% 0%, rgba(31, 56, 53, 0.24), transparent 36rem), linear-gradient(rgba(255, 255, 255, 0.012) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.009) 1px, transparent 1px), #020707; background-size: auto, 5px 5px, 5px 5px, auto; } img, video { max-width: 100%; } a { color: inherit; } button, a { -webkit-tap-highlight-color: transparent; } .hidden-data { position: absolute !important; width: 1px !important; height: 1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; } .page-backdrop { position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: 0.24; background: radial-gradient(circle at 20% 22%, rgba(27, 77, 68, 0.16), transparent 28rem), radial-gradient(circle at 80% 40%, rgba(135, 56, 20, 0.09), transparent 30rem); } /* ========================================================= 02 — SEITENRAHMEN HTML:
und
Enthält: äußeren Rahmen, Hauptfläche und Grundhintergrund ========================================================= */ .site-shell { position: relative; z-index: 2; width: min(var(--shell-width), calc(100% - 24px)); margin: 8px auto 26px; overflow: hidden; border: 1px solid rgba(202, 151, 75, 0.38); border-radius: 18px; background: linear-gradient(180deg, rgba(4, 10, 10, 0.96), rgba(1, 7, 7, 0.99)), #030808; box-shadow: 0 30px 90px rgba(0, 0, 0, 0.5), inset 0 0 90px rgba(20, 75, 64, 0.035); } main { display: block; padding-top: 74px; background: #030808; } /* ========================================================= 03 — HEADER / HAUPTNAVIGATION HTML:
Enthält: Logo, Navigation, Discord-Button und Mobile-Menü-Schalter ========================================================= */ .site-header { position: fixed; top: 8px; left: 50%; transform: translateX(-50%); isolation: isolate; width: min(var(--shell-width), calc(100% - 24px)); min-height: 74px; padding: 0 var(--content-pad); display: grid; grid-template-columns: 260px 1fr auto; align-items: center; gap: 30px; z-index: 1000; background: rgba(3, 8, 8, 0.88); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); border: 1px solid rgba(202,151,75,.25); border-radius: 18px 18px 0 0; border-bottom: 1px solid rgba(255,255,255,.07); } .brand, .footer-brand { display: flex; align-items: center; gap: 12px; text-decoration: none; } .brand img, .footer-brand img { width: 43px; height: 43px; flex: 0 0 43px; object-fit: cover; border-radius: 50%; } .brand span, .footer-brand span { min-width: 0; } .brand strong, .brand small, .footer-brand strong, .footer-brand small { display: block; } .brand strong, .footer-brand strong { font-size: 0.93rem; letter-spacing: 0.03em; } .brand small, .footer-brand small { margin-top: 3px; color: #747b78; font-size: 0.55rem; letter-spacing: 0.1em; } .main-nav { display: flex; align-items: center; justify-content: center; gap: 32px; } .main-nav a { position: relative; color: #c1c3bf; text-decoration: none; font-size: 0.78rem; font-weight: 600; letter-spacing: .02em; padding: 8px 2px; transition: color .18s ease, text-shadow .18s ease; } .main-nav a::after{ content:""; position:absolute; left:50%; bottom:-8px; width:0; height:2px; transform:translateX(-50%); border-radius:999px; background:linear-gradient(90deg,#d39a3f,#f2c56f,#d39a3f); box-shadow:0 0 10px rgba(211,154,63,.35); transition:width .18s ease; } .main-nav a:hover, .main-nav a:focus-visible{ color:#fff; text-shadow:0 0 10px rgba(242,197,111,.18); } .main-nav a:hover::after, .main-nav a:focus-visible::after, .main-nav a.active::after, .main-nav a[aria-current="page"]::after{ width:100%; } .main-nav a.active, .main-nav a[aria-current="page"]{ color:#fff4df; } .header-invite, .button { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 28px; padding: 0 18px; border: 0; border-radius: 7px; text-decoration: none; text-transform: uppercase; font-size: 0.67rem; font-weight: 800; letter-spacing: 0.035em; transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease; } .header-invite, .button-primary { color: #fff; background: linear-gradient(135deg, #f06323, #d94713); box-shadow: 0 10px 30px rgba(227, 79, 24, 0.22); } .header-invite:hover, .button:hover { transform: translateY(-2px); } .nav-toggle { display: none; } .header-invite { min-width: 180px; min-height: 28px; padding: 0 18px; white-space: nowrap; flex-shrink: 0; } .header-invite .discord-icon { width: 15px; height: 15px; flex: 0 0 15px; } /* ========================================================= 04 — HERO-BEREICH HTML:
Enthält: Titel, Beschreibung, Buttons, Avatare und Community-Karte ========================================================= */ .hero { position: relative; min-height: 620px; padding: 78px var(--content-pad) 42px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(286px, 0.58fr); align-items: center; gap: 56px; overflow: hidden; border-bottom: 1px solid rgba(255, 255, 255, 0.045); background: linear-gradient(90deg, rgba(2, 8, 8, 0.98) 0%, rgba(2, 8, 8, 0.82) 35%, rgba(2, 8, 8, 0.18) 64%, rgba(2, 8, 8, 0.82) 100%), linear-gradient(180deg, rgba(0, 0, 0, 0.08), #030808 94%), url("/assets/hero-bg.jpg") center 34% / cover no-repeat; } .hero::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; z-index: 1; height: 220px; pointer-events: none; background: linear-gradient( 180deg, rgba(3, 8, 8, 0) 0%, rgba(3, 8, 8, 0.78) 58%, #030808 82%, #030808 100% ); } .hero-art { position: absolute; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(circle at 59% 48%, rgba(223, 102, 33, 0.2), transparent 20rem), radial-gradient(circle at 74% 21%, rgba(229, 88, 28, 0.12), transparent 24rem); } .hero-copy, .community-card { position: relative; z-index: 2; } .hero-copy { width: 100%; max-width: 640px; min-width: 0; overflow: visible; } .eyebrow, .section-kicker { margin: 0 0 16px; color: #d89b37; font-size: 0.64rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; } .hero h1 { width: 100%; max-width: 640px; margin: 0; padding-right: 0.08em; overflow: visible; line-height: 0.86; letter-spacing: -0.055em; text-transform: uppercase; } .hero h1 span, .hero h1 strong { display: block; width: max-content; max-width: 100%; white-space: nowrap; } .hero h1 span { font-size: clamp(4.15rem, 6.2vw, 6.6rem); line-height: 0.94; color: #f5f0e7; } .hero h1 strong { padding-right: 0.06em; font-size: clamp(5.6rem, 8.7vw, 8.9rem); line-height: 0.9; color: #f0d6a8; background: linear-gradient(180deg, #fff3d2 0%, #e2ba78 54%, #a96a2c 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; text-shadow: 0 9px 35px rgba(0, 0, 0, 0.45); } .hero-description { max-width: 560px; margin: 24px 0 0; color: #b0b4b0; font-size: 0.9rem; line-height: 1.72; } .hero-actions { margin-top: 28px; display: flex; flex-wrap: wrap; gap: 14px; } .button-ghost { color: #ddd9d1; border: 1px solid rgba(214, 164, 87, 0.45); background: rgba(5, 11, 11, 0.65); } .community-card { width: 286px; justify-self: end; margin-right: 12px; padding: 24px; border: 1px solid rgba(221, 157, 67, 0.55); border-radius: 14px; background: radial-gradient(circle at 100% 0%, rgba(102, 55, 21, 0.2), transparent 15rem), rgba(6, 11, 11, 0.91); box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45), inset 0 0 30px rgba(255, 255, 255, 0.018); backdrop-filter: blur(8px); } .community-card header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; } .community-card header span { font-size: 0.67rem; font-weight: 800; letter-spacing: 0.09em; } .community-card header i, .pulse { width: 8px; height: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 14px var(--green); } .community-total { display: block; font-size: 4.4rem; line-height: 0.95; letter-spacing: -0.05em; } .community-card > small { display: block; margin-top: 6px; color: #858d89; font-size: 0.59rem; letter-spacing: 0.12em; } .community-grid { margin-top: 20px; display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--border-soft); border-left: 1px solid transparent; } .community-grid div { min-height: 88px; padding: 17px 14px 13px 0; border-bottom: 1px solid var(--border-soft); } .community-grid div:nth-child(odd) { border-right: 1px solid var(--border-soft); } .community-grid div:nth-child(even) { padding-left: 18px; } .community-grid strong, .community-grid span { display: block; } .community-grid strong { font-size: 1.45rem; } .community-grid span { margin-top: 4px; color: #818985; font-size: 0.56rem; letter-spacing: 0.08em; } .community-card > a { min-height: 40px; margin-top: 17px; padding: 0 14px; display: flex; align-items: center; justify-content: space-between; color: #e5b45d; border: 1px solid rgba(211, 154, 63, 0.22); border-radius: 5px; text-decoration: none; text-transform: uppercase; font-size: 0.62rem; font-weight: 800; } /* ========================================================= 05 — THEMENLEISTE HTML:
Enthält: Path of Exile 1/2, Builds, Anleitungen, Gilden und Handel ========================================================= */ .topic-bar { position: relative; z-index: 5; min-height: 58px; margin: 28px var(--content-pad) 0; padding: 0 20px; display: flex; align-items: center; justify-content: space-between; gap: 18px; overflow: hidden; color: #d0d1cb; border: 1px solid rgba(209, 154, 72, 0.35); border-radius: 9px; background: #07100f; box-shadow: 0 14px 35px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255,255,255,.025); } .topic-bar span { white-space: nowrap; font-size: 0.63rem; letter-spacing: 0.065em; } .topic-bar i { width: 1px; height: 16px; flex: 0 0 1px; background: rgba(255, 255, 255, 0.22); } /* ========================================================= 06 — GEMEINSAME SECTION-GRUNDLAGEN HTML:
und
Enthält: gemeinsame Abstände, Überschriften und Section-Trennlinien ========================================================= */ .section { padding: 82px var(--content-pad) 0; } .section + .section { margin-top: 28px; border-top: 1px solid rgba(255, 255, 255, 0.05); } .section-header { margin-bottom: 28px; } .section-header-split { display: grid; grid-template-columns: 1fr 300px; align-items: end; gap: 40px; } .section-header h2 { margin: 0; font-size: clamp(2.4rem, 3.1vw, 3rem); line-height: 1; letter-spacing: -0.045em; } .section-header p { margin: 0; color: #7f8783; font-size: 0.78rem; line-height: 1.7; } /* ========================================================= 07 — NEUIGKEITEN HTML:
Enthält: Hauptmeldung, Meldungsliste, Vorschaubilder und Metadaten ========================================================= */ .news-layout { display: grid; grid-template-columns: minmax(0, 1.38fr) minmax(330px, 0.92fr); gap: 24px; } .news-feature { min-height: 530px; display: grid; grid-template-rows: minmax(330px, 1fr) auto; overflow: hidden; border: 1px solid rgba(220, 163, 84, 0.28); border-radius: 13px; background: #07100f; } .news-feature-media { position: relative; min-height: 330px; padding: 22px; display: flex; align-items: flex-end; background: linear-gradient(180deg, transparent 34%, rgba(2, 7, 7, 0.94)), radial-gradient(circle at 70% 25%, rgba(58, 94, 128, 0.22), transparent 25rem), #0b171e; background-size: cover; background-position: center; } .news-feature-media span { padding: 7px 10px; border: 1px solid rgba(255, 255, 255, 0.22); border-radius: 4px; background: rgba(0, 0, 0, 0.65); font-size: 0.58rem; font-weight: 800; letter-spacing: 0.09em; } .news-feature-copy { padding: 22px 24px 24px; background: linear-gradient(180deg, rgba(5, 10, 10, 0.9), #070c0c); } .news-meta { display: flex; align-items: center; justify-content: space-between; color: #707874; font-size: 0.6rem; } .news-feature-copy h3 { margin: 11px 0 6px; font-size: clamp(1.75rem, 2.7vw, 2.55rem); line-height: 1.08; } .news-feature-copy p { margin: 0; color: #8f9692; font-size: 0.73rem; line-height: 1.65; } .news-feature-copy a { margin-top: 18px; display: inline-flex; gap: 8px; color: #d7d5ce; text-decoration: none; font-size: 0.68rem; } .news-feature-copy a span { color: var(--gold); } .news-list, .news-rail { display: flex; flex-direction: column; gap: 10px; } .news-list button, .news-rail button { width: 100%; min-height: 82px; padding: 0; display: grid; grid-template-columns: 124px minmax(0, 1fr); gap: 0; align-items: stretch; overflow: hidden; color: inherit; text-align: left; cursor: pointer; border: 1px solid rgba(255, 255, 255, 0.09); border-radius: 9px; background: #0a1111; transition: transform 160ms ease, border-color 160ms ease, background 160ms ease; } .news-list button:hover, .news-list button.active, .news-rail button:hover, .news-rail button.active { transform: translateX(3px); border-color: rgba(221, 157, 67, 0.42); background: #101716; } .news-rail-thumb, .news-list .news-rail-thumb { width: 100%; min-width: 0; min-height: 82px; align-self: stretch; border-radius: 0; background-color: #13201f; background-size: cover; background-position: center; background-repeat: no-repeat; } .news-rail-copy { min-width: 0; padding: 10px 14px; display: flex; flex-direction: column; justify-content: center; } .news-rail-copy small, .news-list small { color: #df7d32; font-size: 0.56rem; font-weight: 800; } .news-rail-copy strong, .news-list strong { margin-top: 4px; display: -webkit-box; overflow: hidden; -webkit-line-clamp: 2; -webkit-box-orient: vertical; font-size: 0.77rem; line-height: 1.35; } .news-rail-copy time, .news-list time { margin-top: 5px; color: #69716e; font-size: 0.54rem; } /* ========================================================= 08 — BUILDS / GAMING-OVERLAY-KARTEN Aufbau wie die Medienkarten: Bild vollständig im Hintergrund, Informationen als modernes Overlay. Keine Buttons oder Tabellen. ========================================================= */ #builds { position: relative; } .build-filters { margin-bottom: 22px; display: flex; flex-wrap: wrap; gap: 8px; } .build-filter { min-height: 36px; padding: 0 14px; color: #9ba29e; border: 1px solid rgba(255, 255, 255, 0.09); border-radius: 999px; background: rgba(8, 16, 15, 0.72); font: inherit; font-size: 0.64rem; font-weight: 800; letter-spacing: 0.045em; text-transform: uppercase; cursor: pointer; transition: color 160ms ease, border-color 160ms ease, background 160ms ease, transform 160ms ease; } .build-filter:hover, .build-filter.active { color: #fff0d4; border-color: rgba(218, 158, 67, 0.52); background: linear-gradient( 180deg, rgba(211, 154, 63, 0.16), rgba(211, 154, 63, 0.055) ), #091110; transform: translateY(-1px); } .build-grid, .build-list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; } .build-card, .build-card:first-child { position: relative; min-width: 0; aspect-ratio: 16 / 9; display: block; overflow: hidden; grid-column: auto; grid-row: auto; color: inherit; border: 1px solid rgba(218, 158, 77, 0.32); border-radius: 10px; background: #08100f; text-decoration: none; box-shadow: 0 16px 36px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.025); transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease; } .build-card:hover { transform: translateY(-4px); border-color: rgba(229, 171, 88, 0.58); box-shadow: 0 24px 46px rgba(0, 0, 0, 0.38), 0 0 22px rgba(211, 154, 63, 0.06); } .build-card-media { position: absolute; inset: 0; width: 100%; height: 100%; min-height: 0; background-color: #101817; background-size: cover; background-position: center; transform: scale(1.01); transition: transform 320ms ease, filter 320ms ease; } .build-card:hover .build-card-media { transform: scale(1.055); filter: saturate(1.08); } .build-card::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient( 180deg, rgba(2, 7, 7, 0.08) 0%, rgba(2, 7, 7, 0.08) 30%, rgba(2, 7, 7, 0.62) 64%, rgba(2, 7, 7, 0.98) 100% ); } .build-card-badges { position: absolute; top: 9px; left: 9px; right: 9px; z-index: 3; display: flex; align-items: center; justify-content: space-between; gap: 7px; } .build-game, .build-category { min-height: 24px; max-width: 49%; padding: 0 8px; display: inline-flex; align-items: center; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: #f8f2e8; border: 1px solid rgba(255, 255, 255, 0.16); border-radius: 5px; background: rgba(4, 9, 9, 0.76); backdrop-filter: blur(9px); -webkit-backdrop-filter: blur(9px); font-size: 0.58rem; font-weight: 900; letter-spacing: 0.035em; text-transform: uppercase; } .build-card.is-poe2 .build-game { color: #ffe5b8; border-color: rgba(211, 154, 63, 0.58); background: rgba(94, 54, 17, 0.8); } .build-card.is-poe1 .build-game { color: #dcece8; border-color: rgba(102, 152, 143, 0.52); background: rgba(20, 65, 59, 0.78); } .build-card-body { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; min-width: 0; margin: 0; padding: 44px 12px 11px; border: 0; background: linear-gradient( 180deg, rgba(2, 7, 7, 0), rgba(2, 7, 7, 0.84) 42%, rgba(2, 7, 7, 0.98) 100% ); } .build-provider { min-width: 0; display: flex; align-items: center; gap: 6px; overflow: hidden; color: #edb45b; white-space: nowrap; text-overflow: ellipsis; font-size: 0.63rem; font-weight: 900; letter-spacing: 0.045em; text-transform: uppercase; text-shadow: 0 2px 7px rgba(0, 0, 0, 0.9); } .build-provider span { flex: 0 0 auto; font-size: 0.68rem; } .build-card { min-height: 150px; } .build-card h3 { min-width: 0; margin: 4px 0 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: #fff; font-size: 1.08rem; line-height: 1.15; letter-spacing: -0.018em; text-shadow: 0 2px 9px rgba(0, 0, 0, 0.95); } .build-meta-line { margin: 5px 0 0; overflow: hidden; color: #e0e5e1; white-space: nowrap; text-overflow: ellipsis; font-size: 0.7rem; font-weight: 700; line-height: 1.3; text-shadow: 0 2px 7px rgba(0, 0, 0, 0.95); } .build-meta-line span { margin: 0 4px; color: #d6a24d; } .build-submitter { margin-top: 3px; display: block; overflow: hidden; color: #aab2ad; white-space: nowrap; text-overflow: ellipsis; font-size: 0.62rem; line-height: 1.2; text-shadow: 0 2px 7px rgba(0, 0, 0, 0.95); } .build-description, .build-details, .build-card-actions, .build-open, .build-discord { display: none !important; } .build-empty { grid-column: 1 / -1; padding: 42px 24px; color: #79817d; border: 1px dashed rgba(211, 154, 63, 0.24); border-radius: 11px; text-align: center; font-size: 0.74rem; } /* ========================================================= 09 — MEDIEN / GAMING-OVERLAY-KARTEN Gleicher Stil wie die Builds: 16:9, Vollbild-Hintergrund, dunkles Overlay, moderne Badges. ========================================================= */ #media { position: relative; } .media-grid, .media-wall { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: auto; gap: 14px; } .media-card, .media-card:nth-child(n) { position: relative; min-width: 0; aspect-ratio: 16 / 9; grid-column: auto; grid-row: auto; overflow: hidden; color: inherit; border: 1px solid rgba(218, 158, 77, 0.32); border-radius: 10px; background: #08100f; cursor: pointer; box-shadow: 0 16px 36px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.025); transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease; } .media-card:hover, .media-card:focus-visible { transform: translateY(-4px); border-color: rgba(229, 171, 88, 0.58); box-shadow: 0 24px 46px rgba(0, 0, 0, 0.38), 0 0 22px rgba(211, 154, 63, 0.06); outline: none; } .media-card img, .media-card video, .media-preview-image, .media-preview-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.01); transition: transform 320ms ease, filter 320ms ease; } .media-card:hover img, .media-card:hover video, .media-card:focus-visible img, .media-card:focus-visible video { transform: scale(1.055); filter: saturate(1.08); } .media-card-shade { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient( 180deg, rgba(2, 7, 7, 0.08) 0%, rgba(2, 7, 7, 0.08) 30%, rgba(2, 7, 7, 0.62) 64%, rgba(2, 7, 7, 0.98) 100% ); } .media-card-top { position: absolute; top: 9px; left: 9px; right: 9px; z-index: 3; display: flex; justify-content: flex-start; } .media-type { min-height: 24px; max-width: 70%; padding: 0 8px; display: inline-flex; align-items: center; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: #f8f2e8; border: 1px solid rgba(255, 255, 255, 0.16); border-radius: 5px; background: rgba(4, 9, 9, 0.76); backdrop-filter: blur(9px); -webkit-backdrop-filter: blur(9px); font-size: 0.58rem; font-weight: 900; letter-spacing: 0.035em; text-transform: uppercase; } .media-kind-youtube .media-type { color: #ffd9d4; border-color: rgba(226, 86, 67, 0.55); background: rgba(92, 27, 19, 0.78); } .media-kind-video .media-type { color: #ffe5b8; border-color: rgba(211, 154, 63, 0.58); background: rgba(94, 54, 17, 0.8); } .media-kind-image .media-type { color: #dcece8; border-color: rgba(102, 152, 143, 0.52); background: rgba(20, 65, 59, 0.78); } .media-overlay { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; padding: 44px 12px 11px; background: linear-gradient( 180deg, rgba(2, 7, 7, 0), rgba(2, 7, 7, 0.84) 42%, rgba(2, 7, 7, 0.98) 100% ); } .media-overlay strong, .media-overlay small { display: block; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; text-shadow: 0 2px 9px rgba(0, 0, 0, 0.95); } .media-overlay strong { color: #fff; font-size: 1.08rem; line-height: 1.15; letter-spacing: -0.018em; } .media-overlay small { margin-top: 4px; color: #aab2ad; font-size: 0.62rem; line-height: 1.2; } .play { position: absolute; z-index: 4; left: 50%; top: 47%; width: 54px; height: 54px; display: grid; place-items: center; transform: translate(-50%, -50%); border: 1px solid rgba(224, 169, 82, 0.72); border-radius: 50%; background: radial-gradient( circle at 38% 28%, rgba(255, 255, 255, 0.11), transparent 38% ), linear-gradient( 145deg, rgba(23, 29, 27, 0.94), rgba(5, 10, 10, 0.96) ); box-shadow: 0 14px 34px rgba(0, 0, 0, 0.55), 0 0 0 5px rgba(211, 154, 63, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.11); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease, background 180ms ease; } .play::before { content: ""; position: absolute; inset: 5px; border: 1px solid rgba(255, 255, 255, 0.055); border-radius: inherit; pointer-events: none; } .play i { width: 0; height: 0; margin-left: 4px; border-top: 8px solid transparent; border-bottom: 8px solid transparent; border-left: 13px solid #f3bd64; filter: drop-shadow(0 0 8px rgba(226, 163, 68, 0.42)); transition: transform 180ms ease, border-left-color 180ms ease; } .media-kind-youtube .play { border-color: rgba(224, 88, 68, 0.76); box-shadow: 0 14px 34px rgba(0, 0, 0, 0.55), 0 0 0 5px rgba(180, 48, 35, 0.11), inset 0 1px 0 rgba(255, 255, 255, 0.11); } .media-kind-youtube .play i { border-left-color: #f08b78; filter: drop-shadow(0 0 8px rgba(224, 88, 68, 0.42)); } .media-card:hover .play, .media-card:focus-visible .play { transform: translate(-50%, -50%) scale(1.1); border-color: rgba(241, 193, 111, 0.95); background: radial-gradient( circle at 38% 28%, rgba(255, 255, 255, 0.15), transparent 38% ), linear-gradient( 145deg, rgba(39, 31, 19, 0.97), rgba(7, 12, 11, 0.98) ); box-shadow: 0 18px 42px rgba(0, 0, 0, 0.62), 0 0 0 7px rgba(211, 154, 63, 0.1), 0 0 28px rgba(211, 154, 63, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.14); } .media-card:hover .play i, .media-card:focus-visible .play i { transform: translateX(1px) scale(1.08); border-left-color: #ffd58f; } .media-kind-youtube:hover .play, .media-kind-youtube:focus-visible .play { border-color: rgba(242, 119, 96, 0.96); box-shadow: 0 18px 42px rgba(0, 0, 0, 0.62), 0 0 0 7px rgba(180, 48, 35, 0.12), 0 0 28px rgba(224, 88, 68, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.14); } .media-kind-youtube:hover .play i, .media-kind-youtube:focus-visible .play i { border-left-color: #ffc1b5; } /* ========================================================= 10 — DISCORD-LIVEBEREICH HTML:
Enthält: Sprachkanäle, Mitglieder, Rollen und Statusanzeigen ========================================================= */ .live-section { padding-bottom: 40px; } .server-grid { display: grid; grid-template-columns: 0.92fr 0.92fr 1.25fr; gap: 14px; } .server-panel, .roles-strip { padding: 18px; border: 1px solid rgba(255, 255, 255, 0.085); border-radius: 10px; background: linear-gradient(180deg, #0a1211, #07100f); } .server-panel { min-height: 360px; } .server-panel > header { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 14px; } .server-panel header span, .roles-strip > span { color: #dca54a; font-size: 0.52rem; font-weight: 800; letter-spacing: 0.09em; } .server-panel h3 { margin: 4px 0 0; font-size: 0.87rem; } .server-panel header > strong { color: #7a827e; font-size: 0.56rem; } .voice-row, .member-row { min-height: 45px; margin-bottom: 7px; padding: 7px 9px; display: flex; align-items: center; gap: 9px; border: 1px solid rgba(255, 255, 255, 0.07); border-radius: 7px; background: rgba(255, 255, 255, 0.014); } .voice-icon, .avatar { width: 30px; height: 30px; flex: 0 0 30px; display: grid; place-items: center; object-fit: cover; border-radius: 6px; background: #1a2220; } .avatar { border-radius: 50%; } .row-copy { min-width: 0; } .row-copy strong, .row-copy small { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .row-copy strong { font-size: 0.58rem; } .row-copy small { margin-top: 2px; color: #69716d; font-size: 0.54rem; } .row-value { margin-left: auto; color: #7e8682; font-size: 0.54rem; } .online-dot { width: 6px; height: 6px; margin-left: auto; border-radius: 50%; background: var(--green); } .role-cloud { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; } .role { min-height: 43px; padding: 7px 8px; display: grid; grid-template-columns: 4px 1fr auto; align-items: center; gap: 8px; border: 1px solid rgba(255, 255, 255, 0.07); border-radius: 6px; } .role-color { width: 4px; height: 24px; border-radius: 99px; } .role strong, .role small { display: block; } .role strong { font-size: 0.62rem; } .role small { color: #707874; font-size: 0.5rem; } .role b { font-size: 0.63rem; } .roles-strip { margin-top: 14px; } .role-cloud-horizontal { margin-top: 12px; display: flex; flex-wrap: wrap; } .role-cloud-horizontal .role { min-width: 135px; } /* Prevent duplicate visible role entries when JS only populates roleList. */ #roleListMirror:empty { display: none; } /* ========================================================= 11 — BEITRETEN-BANNER HTML:
Enthält: Logo, Text und Discord-Beitrittsbutton ========================================================= */ .join-banner { position: relative; min-height: 150px; margin: 62px var(--content-pad) 0; padding: 22px 26px; display: grid; grid-template-columns: 112px 1fr auto; align-items: center; gap: 24px; overflow: hidden; border: 1px solid rgba(223, 151, 55, 0.58); border-radius: 11px; background: linear-gradient(90deg, rgba(16, 10, 7, 0.98), rgba(39, 16, 9, 0.78) 60%, rgba(12, 10, 9, 0.86)), url("/assets/join-bg.jpg") center / cover no-repeat; } .join-banner::after { content: ""; position: absolute; width: 310px; height: 310px; right: 70px; top: -80px; border-radius: 50%; background: radial-gradient(circle, rgba(225, 82, 21, 0.24), transparent 65%); } .join-logo, .join-copy, .join-banner .button { position: relative; z-index: 2; } .join-logo img { width: 92px; height: 92px; object-fit: cover; border-radius: 12px; } .join-copy > span { color: #d59d3e; font-size: 0.56rem; font-weight: 800; letter-spacing: 0.12em; } .join-copy h2 { margin: 6px 0 3px; font-size: clamp(1.65rem, 3.1vw, 2.7rem); line-height: 1; } .join-copy p { margin: 0; color: #9b9e99; font-size: 0.7rem; } /* ========================================================= 12 — FOOTER HTML: