/* ============================================================ SYLVARIA — Main Stylesheet Fonts: Cinzel (display) + Open Sans (body) Palette: --sv-bg-deep: #0a150a (deepest background) --sv-bg-dark: #0d1a0d (page background) --sv-bg-panel: #111f11 (panel fill) --sv-bg-header: #1a3220 (panel header) --sv-border: #2d4a2d (borders / dividers) --sv-green-mid: #4a7c59 (muted green, labels) --sv-green-text: #8ab88a (body text, values) --sv-gold: #c8a84b (accent / titles) --sv-online: #4aaa4a (online status) ============================================================ */ @import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;600&family=Open+Sans:wght@400;500&display=swap'); /* ── Reset & Base ── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { font-size: 16px; scroll-behavior: smooth; } body { font-family: 'Open Sans', sans-serif; background-color: #0a150a; /* Swap src() below for your own background image: background-image: url('../images/background.jpg'); */ background-image: radial-gradient(ellipse 80% 50% at 50% 0%, rgba(45, 74, 45, 0.35) 0%, transparent 70%), repeating-linear-gradient(160deg, transparent, transparent 80px, rgba(20, 40, 20, 0.08) 80px, rgba(20, 40, 20, 0.08) 81px); background-attachment: fixed; background-size: cover; color: #8ab88a; min-height: 100vh; } a { color: #8ab88a; text-decoration: none; transition: color 0.2s; } a:hover { color: #c8a84b; } ul { list-style: none; } /* ── Typography ── */ h1, h2, h3, h4, h5 { font-family: 'Cinzel', serif; color: #c8a84b; letter-spacing: 1px; } h1 { font-size: 1.6rem; } h2 { font-size: 1.25rem; } h3 { font-size: 1rem; } p { line-height: 1.7; color: #8ab88a; } /* ── Layout wrapper ── */ .main { display: flex; flex-direction: column; min-height: 100vh; } .container { width: 100%; max-width: 1160px; margin: 0 auto; padding: 0 20px; } /* ============================================================ HERO BANNER ============================================================ */ .site-hero { position: relative; height: 220px; display: flex; align-items: center; justify-content: center; flex-direction: column; overflow: hidden; /* Fully transparent — background image on shows through */ background: transparent; } .site-hero__trees { position: absolute; bottom: 0; left: 0; right: 0; width: 100%; pointer-events: none; } .site-hero__mist { position: absolute; bottom: 0; left: 0; right: 0; height: 60px; background: linear-gradient(0deg, rgba(10, 21, 10, 0.55) 0%, transparent 100%); pointer-events: none; } .site-hero__logo { font-family: 'Cinzel', serif; font-size: 2.4rem; font-weight: 600; color: #c8a84b; letter-spacing: 8px; text-transform: uppercase; position: relative; z-index: 2; text-shadow: 0 2px 24px rgba(74, 124, 89, 0.5); } .site-hero__tagline { font-size: 0.65rem; letter-spacing: 8px; color: #4a7c59; text-transform: uppercase; margin-top: 6px; position: relative; z-index: 2; } /* ============================================================ NAVIGATION ============================================================ */ .site-nav { background: rgba(6, 12, 6, 0.82); border-top: 1px solid #1a3220; border-bottom: 1px solid #2d4a2d; position: sticky; top: 0; z-index: 100; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } .site-nav .container { display: flex; justify-content: space-between; align-items: stretch; } /* Primary nav list */ .site-nav__list { display: flex; align-items: stretch; } .site-nav__list>li { position: relative; } .site-nav__list>li>a { display: flex; align-items: center; gap: 6px; padding: 0 16px; height: 44px; font-family: 'Cinzel', serif; font-size: 0.68rem; letter-spacing: 1.5px; color: #7aaa7a; border-right: 1px solid #1a2e1a; transition: background 0.2s, color 0.2s; } .site-nav__list>li:first-child>a { border-left: 1px solid #1a2e1a; } .site-nav__list>li>a:hover, .site-nav__list>li.active>a { color: #c8a84b; background: rgba(45, 74, 45, 0.3); } /* Dropdown */ .site-nav__list .dropdown { display: none; position: absolute; top: 100%; left: 0; min-width: 180px; background: rgba(8, 14, 8, 0.92); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid #2d4a2d; border-top: 2px solid #c8a84b; z-index: 200; } .site-nav__list>li:hover .dropdown { display: block; } .site-nav__list .dropdown li a { display: block; padding: 9px 16px; font-size: 0.75rem; color: #6a9a6a; border-bottom: 1px solid #1a2e1a; transition: background 0.15s, color 0.15s; } .site-nav__list .dropdown li a:hover { background: rgba(45, 74, 45, 0.25); color: #c8a84b; } /* Right-side nav */ .site-nav__right { display: flex; align-items: center; } .site-nav__right a { font-size: 0.68rem; font-family: 'Cinzel', serif; letter-spacing: 1px; color: #4a7c59; padding: 0 14px; transition: color 0.2s; } .site-nav__right a:hover { color: #c8a84b; } /* ============================================================ CONTENT AREA (left + right) ============================================================ */ .feed-container { flex: 1; max-width: 1160px; width: 100%; margin: 24px auto; padding: 0 20px; display: flex; gap: 20px; align-items: flex-start; } /* ── Left (main) pane ── */ .left-pane { flex: 1; min-width: 0; } /* ── Right (sidebar) pane ── */ .right-pane { width: 220px; flex-shrink: 0; display: flex; flex-direction: column; gap: 14px; } /* ============================================================ PANEL (shared base for main content blocks & widgets) ============================================================ */ .panel { position: relative; background: rgba(14, 26, 14, 0.82); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border: 1px solid #2d4a2d; border-radius: 2px; overflow: visible; margin-bottom: 16px; } /* Gold corner accents */ .panel::before, .panel::after, .panel>.panel-corner-bl, .panel>.panel-corner-br { content: ''; position: absolute; width: 14px; height: 14px; pointer-events: none; z-index: 1; } .panel::before { top: -1px; left: -1px; border-top: 2px solid #c8a84b; border-left: 2px solid #c8a84b; } .panel::after { top: -1px; right: -1px; border-top: 2px solid #c8a84b; border-right: 2px solid #c8a84b; } .panel>.panel-corner-bl { bottom: -1px; left: -1px; border-bottom: 2px solid #c8a84b; border-left: 2px solid #c8a84b; } .panel>.panel-corner-br { bottom: -1px; right: -1px; border-bottom: 2px solid #c8a84b; border-right: 2px solid #c8a84b; } .panel-header { background: rgba(26, 50, 32, 0.75); border-bottom: 1px solid #2d4a2d; padding: 9px 14px; display: flex; align-items: center; gap: 8px; } .panel-header__icon { font-size: 1rem; } .panel-title { font-family: 'Cinzel', serif; font-size: 0.7rem; color: #c8a84b; letter-spacing: 2px; text-transform: uppercase; } .panel-body { padding: 14px; } /* ── Divider inside panels ── */ .panel-sep { height: 1px; background: linear-gradient(90deg, transparent, #2d4a2d, transparent); margin: 10px 0; } /* ============================================================ FORM ELEMENTS (shared) ============================================================ */ .sv-input { width: 100%; background: rgba(10, 22, 10, 0.7); border: 1px solid #2d4a2d; border-radius: 2px; padding: 7px 10px; color: #8ab88a; font-size: 0.8rem; font-family: 'Open Sans', sans-serif; outline: none; transition: border-color 0.2s; } .sv-input:focus { border-color: #4a7c59; } .sv-input::placeholder { color: #3d5e3d; } .sv-label { display: block; font-size: 0.65rem; color: #4a7c59; letter-spacing: 1px; text-transform: uppercase; margin-bottom: 4px; } .sv-btn { display: block; width: 100%; background: linear-gradient(135deg, #1e4020 0%, #2a5530 100%); border: 1px solid #3d7a3d; border-radius: 2px; color: #8ab88a; font-family: 'Cinzel', serif; font-size: 0.68rem; letter-spacing: 1.5px; padding: 8px 14px; cursor: pointer; text-align: center; transition: background 0.2s, color 0.2s, border-color 0.2s; text-transform: uppercase; } .sv-btn:hover { background: linear-gradient(135deg, #255227 0%, #336635 100%); color: #c8a84b; border-color: #c8a84b; } .sv-btn--secondary { background: transparent; border-color: #2d4a2d; color: #4a7c59; font-size: 0.62rem; padding: 6px 10px; } .sv-btn--secondary:hover { background: rgba(45, 74, 45, 0.2); color: #8ab88a; border-color: #4a7c59; } /* ============================================================ WIDGET — LOGIN ============================================================ */ .widget-login .form-row { margin-bottom: 10px; } .widget-login .forgot-link { display: block; text-align: right; font-size: 0.65rem; color: #4a7c59; margin-top: 4px; } .widget-login .forgot-link:hover { color: #c8a84b; } .widget-login .register-row { margin-top: 10px; text-align: center; font-size: 0.65rem; color: #3d5e3d; } .widget-login .register-row a { color: #4a7c59; } .widget-login .register-row a:hover { color: #c8a84b; } /* ============================================================ WIDGET — MY ACCOUNT ============================================================ */ .widget-account__name { font-family: 'Cinzel', serif; font-size: 0.8rem; color: #c8a84b; margin-bottom: 2px; } .widget-account__role { font-size: 0.65rem; color: #4a7c59; margin-bottom: 10px; } .widget-account__links { display: flex; flex-direction: column; gap: 2px; } .widget-account__links a { display: flex; align-items: center; gap: 8px; font-size: 0.72rem; color: #6a9a6a; padding: 5px 6px; border-radius: 2px; transition: background 0.15s, color 0.15s; } .widget-account__links a:hover { background: rgba(45, 74, 45, 0.3); color: #c8a84b; } .widget-account__links a i { font-size: 0.85rem; color: #4a7c59; } /* ============================================================ WIDGET — TOP PLAYERS ============================================================ */ .widget-topplayers__list { display: flex; flex-direction: column; gap: 0; } .widget-topplayers__item { display: flex; align-items: center; gap: 8px; padding: 6px 0; border-bottom: 1px solid #1a2e1a; transition: background 0.15s; } .widget-topplayers__item:last-child { border-bottom: none; } .widget-topplayers__item:hover { background: rgba(45, 74, 45, 0.15); } .widget-topplayers__rank { font-family: 'Cinzel', serif; font-size: 0.65rem; color: #4a7c59; width: 18px; text-align: center; flex-shrink: 0; } .widget-topplayers__rank--1 { color: #c8a84b; } .widget-topplayers__rank--2 { color: #9ab0b0; } .widget-topplayers__rank--3 { color: #a07850; } .widget-topplayers__name { flex: 1; font-size: 0.72rem; color: #8ab88a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .widget-topplayers__name a { color: inherit; } .widget-topplayers__name a:hover { color: #c8a84b; } .widget-topplayers__level { font-size: 0.65rem; color: #4a7c59; flex-shrink: 0; } /* ============================================================ WIDGET — SERVER INFO (sidebar) ============================================================ */ .widget-serverinfo__row { display: flex; justify-content: space-between; align-items: center; padding: 5px 0; border-bottom: 1px solid #1a2e1a; font-size: 0.72rem; } .widget-serverinfo__row:last-child { border-bottom: none; } .widget-serverinfo__key { color: #4a7c59; } .widget-serverinfo__val { color: #8ab88a; text-align: right; } .status-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #4aaa4a; margin-right: 5px; vertical-align: middle; } .status-dot--offline { background: #aa4a4a; } /* ============================================================ TABLES (highscores, deaths, online list etc.) ============================================================ */ .sv-table { width: 100%; border-collapse: collapse; font-size: 0.8rem; } .sv-table thead tr { background: rgba(26, 50, 32, 0.75); border-bottom: 1px solid #2d4a2d; } .sv-table thead th { font-family: 'Cinzel', serif; font-size: 0.65rem; letter-spacing: 1.5px; color: #c8a84b; padding: 9px 12px; text-align: left; font-weight: 400; text-transform: uppercase; } .sv-table tbody tr { border-bottom: 1px solid #1a2e1a; transition: background 0.15s; } .sv-table tbody tr:hover { background: rgba(45, 74, 45, 0.2); } .sv-table tbody td { padding: 8px 12px; color: #8ab88a; } .sv-table tbody td a { color: #8ab88a; } .sv-table tbody td a:hover { color: #c8a84b; } .sv-table .rank-cell { font-family: 'Cinzel', serif; font-size: 0.7rem; color: #4a7c59; width: 40px; } /* ============================================================ ALERTS / NOTICES ============================================================ */ .sv-alert { padding: 10px 14px; border-left: 3px solid #4a7c59; background: rgba(45, 74, 45, 0.15); font-size: 0.8rem; color: #8ab88a; margin-bottom: 14px; border-radius: 0 2px 2px 0; } .sv-alert--error { border-color: #aa4a4a; background: rgba(100, 30, 30, 0.15); color: #d08080; } .sv-alert--gold { border-color: #c8a84b; background: rgba(100, 80, 20, 0.12); color: #c8a84b; } /* ============================================================ FOOTER ============================================================ */ .site-footer { margin-top: auto; border-top: 1px solid #1a2e1a; background: rgba(8, 14, 8, 0.8); padding: 16px 20px; text-align: center; font-size: 0.68rem; color: #3d5e3d; letter-spacing: 1px; } .site-footer a { color: #4a7c59; } .site-footer a:hover { color: #c8a84b; } /* ============================================================ UTILITIES ============================================================ */ .text-gold { color: #c8a84b; } .text-muted { color: #4a7c59; } .text-green { color: #8ab88a; } .text-center { text-align: center; } .mt-sm { margin-top: 8px; } .mt-md { margin-top: 14px; } .mb-sm { margin-bottom: 8px; } .mb-md { margin-bottom: 14px; } /* ============================================================ RESPONSIVE ============================================================ */ @media (max-width: 860px) { .feed-container { flex-direction: column; } .right-pane { width: 100%; flex-direction: row; flex-wrap: wrap; } .right-pane .panel { flex: 1 1 200px; margin-bottom: 0; } .site-hero__logo { font-size: 1.6rem; letter-spacing: 5px; } } @media (max-width: 540px) { .site-nav__list>li>a { padding: 0 10px; font-size: 0.6rem; } .right-pane { flex-direction: column; } .right-pane .panel { flex: none; } }