/* ══ SAM — EarthStonks theme ══ Palette matched to the main site and wiki (see /wiki/wiki.css). Two things this fixes beyond colour: 1. The --discord-* variables the markup already referenced were never defined anywhere, so they silently resolved to nothing. 2. Bootstrap 5.3's colour variables are remapped, so stock components (tables, cards, modals, forms) inherit the palette instead of falling back to default light surfaces. Requires data-bs-theme="dark" on . */ :root { --es-green: #4ade80; --es-gold: #fbbf24; --es-red: #f87171; --es-blue: #60a5fa; --es-dark: #0a0f0d; --es-dark2: #0d1410; --es-dark3: #121a16; --es-border: rgba(255,255,255,0.08); --es-text: #e2e8f0; --es-muted: #64748b; --es-sub: #94a3b8; /* Names the existing markup already uses — previously undefined. */ --discord-bg: var(--es-dark); --discord-sidebar: var(--es-dark2); --discord-sidebar-hover: rgba(74,222,128,0.08); --discord-card: var(--es-border); --discord-text-normal: var(--es-text); --discord-text-muted: var(--es-muted); } [data-bs-theme="dark"] { --bs-body-bg: var(--es-dark); --bs-body-color: var(--es-sub); --bs-emphasis-color: #ffffff; --bs-secondary-bg: var(--es-dark2); --bs-tertiary-bg: var(--es-dark3); --bs-border-color: var(--es-border); --bs-primary: var(--es-green); --bs-primary-rgb: 74, 222, 128; --bs-link-color: var(--es-green); --bs-link-hover-color: #86efac; --bs-link-color-rgb: 74, 222, 128; --bs-heading-color: var(--es-text); --bs-code-color: var(--es-green); } body { background: var(--es-dark); color: var(--es-sub); font-family: 'Inter', -apple-system, "Segoe UI", sans-serif; padding-top: 46px; /* clears the fixed site nav */ } /* ── EARTHSTONKS SITE NAV (inc/sitenav.php) ────────────────────── */ .es-sitenav { position: fixed; top: 0; left: 0; right: 0; height: 46px; z-index: 1050; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0 1.25rem; background: rgba(10,15,13,0.95); border-bottom: 1px solid rgba(74,222,128,0.12); backdrop-filter: blur(12px); font-family: 'Inter', sans-serif; } .es-logo { font-family: 'Press Start 2P', monospace; font-size: 0.68rem; color: var(--es-green); text-decoration: none; white-space: nowrap; text-shadow: 0 0 12px rgba(74,222,128,0.6); flex-shrink: 0; } .es-links { display: flex; align-items: center; gap: 0.15rem; flex: 1; justify-content: center; overflow-x: auto; } .es-links::-webkit-scrollbar { display: none; } .es-sitenav .es-link { display: flex; align-items: center; gap: 0.4rem; padding: 0.3rem 0.7rem; border-radius: 8px; margin: 0; font-size: 0.78rem; font-weight: 600; text-decoration: none; color: var(--es-muted); white-space: nowrap; border: 1px solid transparent; transition: all 0.2s; } .es-sitenav .es-link:hover { color: var(--es-text); background: rgba(255,255,255,0.05); } .es-sitenav .es-link.es-active { color: #a78bfa; background: rgba(167,139,250,0.10); border-color: rgba(167,139,250,0.25); } .es-sitenav .es-link.es-home:hover { color: var(--es-green); background: rgba(74,222,128,0.08); } .es-sitenav .es-link.es-wiki:hover { color: #e2b714; background: rgba(226,183,20,0.08); } .es-sitenav .es-link.es-map:hover { color: #a78bfa; background: rgba(167,139,250,0.08); } .es-sitenav .es-link.es-economy:hover { color: #00e87a; background: rgba(0,232,122,0.08); } .es-sitenav .es-link.es-store:hover { color: #f97316; background: rgba(249,115,22,0.08); } .es-sitenav .es-link.es-discord:hover { color: #5865F2; background: rgba(88,101,242,0.10); } .es-ip { display: flex; align-items: center; gap: 0.45rem; flex-shrink: 0; padding: 0.3rem 0.7rem; border-radius: 8px; cursor: pointer; font-family: 'Inter', sans-serif; font-size: 0.74rem; font-weight: 600; color: var(--es-green); background: rgba(74,222,128,0.08); border: 1px solid rgba(74,222,128,0.2); transition: all 0.2s; } .es-ip:hover { background: rgba(74,222,128,0.14); } .es-ip.es-copied { color: #06231a; background: var(--es-green); } .es-ip.es-copied span::after { content: ' copied'; } /* The app shell is height:100vh; give back the space the bar takes. */ .wrapper { height: calc(100vh - 46px) !important; } @media (max-width: 900px) { .es-sitenav { padding: 0 0.75rem; gap: 0.5rem; } .es-ip span { display: none; } } @media (max-width: 600px) { .es-logo { font-size: 0.58rem; } .es-sitenav .es-link { padding: 0.3rem 0.5rem; font-size: 0.72rem; } } h1, h2, .page-title { font-family: 'Press Start 2P', monospace; color: #fff; line-height: 1.45; text-shadow: 0 0 20px rgba(74,222,128,0.18); } h1 { font-size: clamp(1rem, 2.6vw, 1.5rem); } h2 { font-size: clamp(0.8rem, 2vw, 1.05rem); } h3, h4, h5 { color: var(--es-text); font-weight: 700; } /* ── SIDEBAR ───────────────────────────────────────────────────── */ .sidebar-header { padding: 20px; border-bottom: 1px solid var(--es-border); font-family: 'Press Start 2P', monospace; font-size: 0.72rem; color: var(--es-green); text-shadow: 0 0 12px rgba(74,222,128,0.5); } .nav-link { color: var(--es-muted); padding: 10px 20px; border-radius: 8px; margin: 4px 12px; transition: all 0.2s; font-size: 0.88rem; font-weight: 600; border: 1px solid transparent; } .nav-link:hover { background-color: rgba(255,255,255,0.05); color: var(--es-text); } .nav-link.active { background-color: rgba(74,222,128,0.08); color: var(--es-green); border-color: rgba(74,222,128,0.2); } .nav-link i { width: 24px; } .user-profile { background-color: var(--es-dark2); padding: 12px; margin-top: auto; display: flex; flex-direction: column; gap: 12px; border-top: 1px solid var(--es-border); } .user-profile img { width: 32px; height: 32px; border-radius: 50%; } .logout-btn { color: var(--es-muted); padding: 6px 8px; border-radius: 6px; transition: all 0.2s; } .logout-btn:hover { background-color: rgba(248,113,113,0.1); color: var(--es-red) !important; } .discord-muted { color: var(--es-muted) !important; } /* ── SURFACES ──────────────────────────────────────────────────── */ .card, .modal-content, .list-group-item, .dropdown-menu, .offcanvas { background-color: var(--es-dark2) !important; border: 1px solid var(--es-border) !important; color: var(--es-sub); border-radius: 12px; } .card-header, .modal-header, .modal-footer { background-color: rgba(255,255,255,0.02) !important; border-color: var(--es-border) !important; color: var(--es-text); } /* ── TABLES ────────────────────────────────────────────────────── */ /* The white block: Bootstrap's .table sets its own --bs-table-bg, which ignores the body background unless overridden here. */ .table { --bs-table-bg: transparent; --bs-table-color: var(--es-sub); --bs-table-border-color: var(--es-border); --bs-table-striped-bg: rgba(255,255,255,0.02); --bs-table-striped-color: var(--es-sub); --bs-table-hover-bg: rgba(74,222,128,0.05); --bs-table-hover-color: var(--es-text); --bs-table-accent-bg: transparent; margin-bottom: 0; } .table > :not(caption) > * > * { background-color: transparent; box-shadow: none; } .table thead th { background: rgba(74,222,128,0.08) !important; color: var(--es-green) !important; font-size: 0.76rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; border-bottom: 1px solid rgba(74,222,128,0.2) !important; padding: 0.75rem 1rem; } .table tbody td { padding: 0.7rem 1rem; border-color: var(--es-border) !important; vertical-align: middle; } .table-responsive { border-radius: 10px; overflow: hidden; border: 1px solid var(--es-border); } /* ── FORMS ─────────────────────────────────────────────────────── */ .form-control, .form-select, .input-group-text { background-color: rgba(0,0,0,0.35) !important; border: 1px solid var(--es-border) !important; color: var(--es-text) !important; border-radius: 8px; } .form-control:focus, .form-select:focus { border-color: rgba(74,222,128,0.4) !important; box-shadow: 0 0 0 0.2rem rgba(74,222,128,0.12) !important; } .form-control::placeholder { color: var(--es-muted); } .form-label { color: var(--es-sub); font-weight: 600; font-size: 0.82rem; } .form-check-input:checked { background-color: var(--es-green); border-color: var(--es-green); } .form-check-input:focus { box-shadow: 0 0 0 0.2rem rgba(74,222,128,0.12); } .form-check-label { color: var(--es-sub); } /* ── BUTTONS ───────────────────────────────────────────────────── */ .btn-primary { background-color: var(--es-green); border-color: var(--es-green); color: #06231a; font-weight: 700; } .btn-primary:hover, .btn-primary:focus { background-color: #86efac; border-color: #86efac; color: #06231a; } .btn-outline-primary { color: var(--es-green); border-color: rgba(74,222,128,0.4); } .btn-outline-primary:hover { background-color: var(--es-green); color: #06231a; border-color: var(--es-green); } .btn-secondary, .btn-outline-secondary { color: var(--es-sub); border-color: var(--es-border); background-color: transparent; } .btn-secondary:hover, .btn-outline-secondary:hover { background-color: rgba(255,255,255,0.06); color: var(--es-text); border-color: var(--es-border); } .btn-danger { background-color: var(--es-red); border-color: var(--es-red); color: #2a0a0a; font-weight: 700; } .btn-success { background-color: var(--es-green); border-color: var(--es-green); color: #06231a; font-weight: 700; } /* ── TABS ──────────────────────────────────────────────────────── */ .nav-tabs { border-bottom: 1px solid var(--es-border); } .nav-tabs .nav-link { color: var(--es-muted); border: none; margin: 0; border-radius: 0; } .nav-tabs .nav-link:hover { color: var(--es-text); background: transparent; } .nav-tabs .nav-link.active { color: var(--es-green); background: transparent; border: none; border-bottom: 2px solid var(--es-green); } /* ── BADGES / ALERTS ───────────────────────────────────────────── */ .badge { font-weight: 600; letter-spacing: 0.02em; } .text-bg-secondary { background-color: rgba(255,255,255,0.08) !important; color: var(--es-sub) !important; } .text-bg-success { background-color: rgba(74,222,128,0.15) !important; color: var(--es-green) !important; } .text-bg-warning { background-color: rgba(251,191,36,0.15) !important; color: var(--es-gold) !important; } .text-bg-danger { background-color: rgba(248,113,113,0.15) !important; color: var(--es-red) !important; } .text-bg-info { background-color: rgba(96,165,250,0.15) !important; color: var(--es-blue) !important; } .text-muted { color: var(--es-muted) !important; } .alert { border-radius: 10px; border-width: 1px; } .alert-success { background: rgba(74,222,128,0.06); border-color: rgba(74,222,128,0.2); color: #86efac; } .alert-warning { background: rgba(251,191,36,0.06); border-color: rgba(251,191,36,0.2); color: #fde68a; } .alert-danger { background: rgba(248,113,113,0.06); border-color: rgba(248,113,113,0.2); color: #fca5a5; } .alert-info { background: rgba(96,165,250,0.06); border-color: rgba(96,165,250,0.2); color: #93c5fd; } hr { border-color: var(--es-border); opacity: 1; } a { text-decoration: none; } code, pre { color: var(--es-green); background: rgba(74,222,128,0.08); border: 1px solid rgba(74,222,128,0.15); border-radius: 5px; padding: 0.1rem 0.4rem; } ::selection { background: rgba(74,222,128,0.25); }