/* ============================================ Minecraft Server News – Frontend Styles Dark theme, Minecraft-inspired ============================================ */ @import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&family=Exo+2:wght@300;400;600;700&display=swap'); :root { --mcn-bg: #0d1117; --mcn-card-bg: #161b22; --mcn-card-hover: #1c2333; --mcn-border: #30363d; --mcn-green: #00d4e8; --mcn-green-glow: rgba(0,212,232,0.25); --mcn-gold: #e3b341; --mcn-red: #f85149; --mcn-blue: #58a6ff; --mcn-purple: #bc8cff; --mcn-text: #c9d1d9; --mcn-muted: #8b949e; --mcn-radius: 8px; --mcn-font-head: 'Press Start 2P', monospace; --mcn-font-body: 'Exo 2', sans-serif; } /* ---- Wrapper ---- */ .mcn-wrapper { font-family: var(--mcn-font-body); color: var(--mcn-text); max-width: 1200px; margin: 0 auto; padding: 0 16px; } /* ---- Filter Bar ---- */ .mcn-filterbar { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 32px; padding: 16px; background: var(--mcn-card-bg); border: 1px solid var(--mcn-border); border-radius: var(--mcn-radius); } .mcn-filter-btn { font-family: var(--mcn-font-body); font-size: 13px; font-weight: 600; padding: 7px 16px; border: 1px solid var(--mcn-border); border-radius: 20px; background: transparent; color: var(--mcn-muted); cursor: pointer; transition: all 0.2s ease; } .mcn-filter-btn:hover, .mcn-filter-btn.active { background: var(--mcn-green); border-color: var(--mcn-green); color: #000; box-shadow: 0 0 12px var(--mcn-green-glow); } /* ---- Grid ---- */ .mcn-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 20px; } .mcn-layout-list .mcn-grid { grid-template-columns: 1fr; } /* ---- Card ---- */ .mcn-card { position: relative; background: var(--mcn-card-bg); border: 1px solid var(--mcn-border); border-radius: var(--mcn-radius); overflow: hidden; transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease; display: flex; flex-direction: column; } .mcn-card:hover { transform: translateY(-3px); border-color: var(--mcn-green); box-shadow: 0 8px 24px rgba(63,185,80,0.15); } .mcn-card.mcn-pinned { border-color: var(--mcn-gold); box-shadow: 0 0 0 1px var(--mcn-gold), 0 4px 16px rgba(227,179,65,0.2); } .mcn-card.mcn-pinned:hover { box-shadow: 0 0 0 1px var(--mcn-gold), 0 8px 24px rgba(227,179,65,0.3); } /* Pin Label */ .mcn-pin-label { font-size: 11px; font-weight: 700; color: var(--mcn-gold); background: rgba(227,179,65,0.12); padding: 4px 12px; border-bottom: 1px solid rgba(227,179,65,0.3); letter-spacing: 0.5px; text-transform: uppercase; } /* Badge */ .mcn-badge { position: absolute; top: 12px; right: 12px; font-size: 10px; font-weight: 800; letter-spacing: 1px; padding: 3px 10px; border-radius: 4px; text-transform: uppercase; z-index: 2; } .mcn-badge-neu { background: var(--mcn-green); color: #000; } .mcn-badge-wichtig { background: var(--mcn-red); color: #fff; } .mcn-badge-hot { background: #f97316; color: #fff; } .mcn-badge-beta { background: var(--mcn-purple); color: #fff; } .mcn-badge-live { background: var(--mcn-red); color: #fff; animation: mcn-pulse 1.5s infinite; } .mcn-badge-bald { background: var(--mcn-blue); color: #fff; } @keyframes mcn-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.6; } } /* Card Image */ .mcn-card-image img { width: 100%; height: 180px; object-fit: cover; display: block; } /* Card Body */ .mcn-card-body { padding: 20px; display: flex; flex-direction: column; flex: 1; gap: 10px; } /* Category Tag */ .mcn-cat-tag { font-size: 12px; font-weight: 700; color: var(--mcn-green); text-transform: uppercase; letter-spacing: 0.5px; } /* Title */ .mcn-card-title { font-family: var(--mcn-font-body); font-size: 17px; font-weight: 700; margin: 0; line-height: 1.3; } .mcn-card-title a { color: var(--mcn-text); text-decoration: none; transition: color 0.2s; } .mcn-card-title a:hover { color: var(--mcn-green); } /* Meta */ .mcn-card-meta { display: flex; gap: 16px; font-size: 12px; color: var(--mcn-muted); } /* Excerpt */ .mcn-card-excerpt { font-size: 14px; line-height: 1.6; color: var(--mcn-muted); flex: 1; } /* Server IP */ .mcn-server-ip { display: flex; align-items: center; gap: 8px; font-size: 13px; background: rgba(63,185,80,0.08); border: 1px solid rgba(63,185,80,0.25); border-radius: 6px; padding: 8px 12px; font-family: monospace; color: var(--mcn-green); } .mcn-copy-btn { font-size: 11px; padding: 3px 10px; background: var(--mcn-green); color: #000; border: none; border-radius: 4px; cursor: pointer; font-weight: 700; margin-left: auto; transition: opacity 0.2s; } .mcn-copy-btn:hover { opacity: 0.8; } /* Read More */ .mcn-read-more { font-size: 13px; font-weight: 700; color: var(--mcn-green); text-decoration: none; transition: letter-spacing 0.2s; margin-top: auto; } .mcn-read-more:hover { letter-spacing: 0.5px; } /* Empty */ .mcn-empty { text-align: center; padding: 40px; color: var(--mcn-muted); } /* ---- Widget ---- */ .mcn-widget-list { list-style: none; margin: 0; padding: 0; } .mcn-widget-item { padding: 10px 0; border-bottom: 1px solid var(--mcn-border); font-family: var(--mcn-font-body); } .mcn-widget-item a { display: block; font-size: 14px; font-weight: 600; color: var(--mcn-text); text-decoration: none; margin-bottom: 3px; } .mcn-widget-item a:hover { color: var(--mcn-green); } .mcn-widget-date { font-size: 11px; color: var(--mcn-muted); } /* ---- Responsive ---- */ @media (max-width: 600px) { .mcn-grid { grid-template-columns: 1fr; } .mcn-filterbar { gap: 6px; } .mcn-filter-btn { font-size: 12px; padding: 6px 12px; } } /* ---- Leere Theme-Blöcke unter News-Beiträgen ausblenden ---- */ .single-mc_news .post-navigation, .single-mc_news .comments-area, .single-mc_news #comments, .single-mc_news .comment-respond, .single-mc_news .entry-footer:empty, .single-mc_news .post-footer:empty, .single-mc_news .wp-block-post-comments:empty { display: none !important; }