/* ============================================================ rs-theme.css — shared "blocky MMORPG / RuneScape" theme. Opt a page in by adding class="rs-theme" to and linking this file. Themes the global chrome (backdrop, nav/header, footer) + the database hub. Page-specific layout (home hero, etc.) lives in that page's own stylesheet. ============================================================ */ body.rs-theme { --rs-bg: #14110b; --rs-stone: #2e2a22; --rs-stone-hi: #3b362b; --rs-stone-lo: #211e18; --rs-bevel-light: #5c5340; --rs-bevel-dark: #0c0a06; --rs-trim: #6b5a2e; --rs-trim-hi: #9a8a4e; --rs-gold: #ffcf45; --rs-gold-soft: #ffe48a; --rs-gold-deep: #b8881f; --rs-ink: #2a2012; --rs-text: #e8dcc2; --rs-text-dim: #b3a585; --rs-veil: 0.80; } html[data-theme="light"] body.rs-theme { --rs-bg: #cdbb8c; --rs-stone: #e9d8a8; --rs-stone-hi: #f3e6c2; --rs-stone-lo: #d8c597; --rs-text: #2a2012; --rs-text-dim: #5c4a28; } /* ---- Full-bleed backdrop: game map ghosting under a stone veil ---- */ body.rs-theme::before { background-color: rgba(16, 13, 8, var(--rs-veil)) !important; background-image: radial-gradient(rgba(255, 255, 255, 0.022) 1px, transparent 1px), radial-gradient(rgba(0, 0, 0, 0.20) 1px, transparent 1px); background-size: 5px 5px, 7px 7px; background-position: 0 0, 3px 4px; } /* Shared chunky beveled stone panel */ body.rs-theme .rs-panel, body.rs-theme .stat-card, body.rs-theme .build-card, body.rs-theme .patch-note-card, body.rs-theme .video-card, body.rs-theme .db-featured-card, body.rs-theme .db-category, body.rs-theme .db-link-card, body.rs-theme .json-api-overview, body.rs-theme .recipe-card, body.rs-theme .forge-card, body.rs-theme .subcategory-card, body.rs-theme .boss-card, body.rs-theme .monster-card, body.rs-theme .quest-card, body.rs-theme .relic-card, body.rs-theme .talent-card, body.rs-theme .info-panel { background-color: var(--rs-stone); background-image: radial-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px), radial-gradient(rgba(0, 0, 0, 0.25) 1px, transparent 1px); background-size: 5px 5px, 7px 7px; background-position: 0 0, 3px 4px; border: 3px solid var(--rs-trim); border-radius: 0; box-shadow: inset 2px 2px 0 rgba(255, 255, 255, 0.10), inset -2px -2px 0 rgba(0, 0, 0, 0.55), 0 4px 0 rgba(0, 0, 0, 0.4); } /* ===================== HEADER / NAV ===================== */ body.rs-theme header { background: linear-gradient(180deg, var(--rs-stone-hi), var(--rs-stone-lo)); border-bottom: 3px solid var(--rs-trim); box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.08), 0 4px 0 rgba(0, 0, 0, 0.5); backdrop-filter: none; -webkit-backdrop-filter: none; } body.rs-theme header::after { display: none; } body.rs-theme .brand h1 { font-family: 'Press Start 2P', monospace; font-size: 0.85rem; letter-spacing: 0.06em; color: var(--rs-gold); text-shadow: 2px 2px 0 #000; } body.rs-theme .main-nav > a, body.rs-theme .nav-dropbtn { color: var(--rs-text); font-weight: 700; border-radius: 0; } body.rs-theme .main-nav > a:hover, body.rs-theme .nav-dropbtn:hover { color: var(--rs-gold); background: var(--rs-stone); box-shadow: inset 1px 1px 0 var(--rs-bevel-light), inset -1px -1px 0 var(--rs-bevel-dark); border-radius: 0; } body.rs-theme .main-nav > a.active { color: var(--rs-gold); background: var(--rs-stone-lo); box-shadow: inset 1px 1px 0 var(--rs-bevel-light), inset -1px -1px 0 var(--rs-bevel-dark); border-radius: 0; } body.rs-theme .main-nav > a.active::after { background: var(--rs-gold); } /* dropdown panels */ body.rs-theme .nav-dropdown-content { background: var(--rs-stone); border: 3px solid var(--rs-trim); border-radius: 0; box-shadow: inset 2px 2px 0 rgba(255, 255, 255, 0.08), inset -2px -2px 0 rgba(0, 0, 0, 0.5), 0 8px 0 rgba(0, 0, 0, 0.4); } body.rs-theme .nav-dropdown-content a, body.rs-theme .menu-category a { color: var(--rs-text); border-radius: 0; } body.rs-theme .nav-dropdown-content a:hover, body.rs-theme .menu-category a:hover { color: var(--rs-gold); background: var(--rs-stone-lo); } body.rs-theme .mega-menu-home-link { color: var(--rs-gold-soft); } body.rs-theme .category-title { color: var(--rs-gold-soft); } body.rs-theme .menu-category { border-color: var(--rs-trim); } /* header buttons */ body.rs-theme .ethyrial-theme-toggle, body.rs-theme .steam-login-btn, body.rs-theme .moon-tracker { background: linear-gradient(180deg, var(--rs-stone-hi), var(--rs-stone-lo)); border: 2px solid var(--rs-bevel-dark); border-radius: 0; box-shadow: inset 1px 1px 0 var(--rs-bevel-light), inset -1px -1px 0 var(--rs-bevel-dark); color: var(--rs-gold-soft); } body.rs-theme .steam-login-btn:hover, body.rs-theme .ethyrial-theme-toggle:hover { filter: brightness(1.15); color: #fff36b; } /* ===================== FOOTER ===================== */ body.rs-theme footer { background: linear-gradient(180deg, var(--rs-stone-hi), var(--rs-stone-lo)); border-top: 3px solid var(--rs-trim); color: var(--rs-text-dim); } body.rs-theme footer a { color: var(--rs-text-dim); text-decoration: none; } body.rs-theme footer a:hover { color: var(--rs-gold); } /* ===================== DATABASE HUB ===================== */ body.rs-theme .page-title { font-family: 'Asul', serif; color: var(--rs-gold); text-shadow: 2px 2px 0 #000; } body.rs-theme .page-subtitle { color: var(--rs-text-dim); } body.rs-theme .back-link { color: var(--rs-text-dim); } body.rs-theme .back-link:hover { color: var(--rs-gold); } body.rs-theme .db-featured-card, body.rs-theme .db-link-card { transition: filter 0.15s, transform 0.15s; } body.rs-theme .db-featured-card:hover, body.rs-theme .db-link-card:hover { filter: brightness(1.12); transform: translateY(-3px); } body.rs-theme .db-featured-label { color: var(--rs-gold); font-weight: 800; } body.rs-theme .db-featured-desc { color: var(--rs-text-dim); } body.rs-theme .db-category { padding: 1.25rem; } body.rs-theme .db-category-title { color: var(--rs-gold-soft); font-family: 'Asul', serif; text-shadow: 1px 1px 0 #000; } body.rs-theme .db-link-name { color: var(--rs-text); } body.rs-theme .db-link-card:hover .db-link-name { color: var(--rs-gold); } body.rs-theme .json-api-path { color: var(--rs-gold-soft); } body.rs-theme .json-api-stat { background: var(--rs-stone-lo); border-color: var(--rs-bevel-dark); border-radius: 0; } /* ===================== SHARED CONTENT COMPONENTS ===================== */ /* recessed stone input fields */ body.rs-theme .search-input, body.rs-theme .filter-select, body.rs-theme select.filter-select, body.rs-theme input[type="text"], body.rs-theme input[type="search"], body.rs-theme input[type="number"] { background: var(--rs-stone-lo); color: var(--rs-text); border: 2px solid var(--rs-bevel-dark); border-radius: 0; box-shadow: inset 1px 1px 0 var(--rs-bevel-dark), inset -1px -1px 0 rgba(92, 83, 64, 0.5); } body.rs-theme .search-input::-moz-placeholder { color: var(--rs-text-dim); } body.rs-theme .search-input::placeholder { color: var(--rs-text-dim); } body.rs-theme .search-input:focus, body.rs-theme .filter-select:focus { outline: 2px solid var(--rs-gold); outline-offset: 0; } /* card text accents */ body.rs-theme .recipe-forge-name, body.rs-theme .subcategory-card__title, body.rs-theme .card-title, body.rs-theme .item-name { color: var(--rs-gold-soft); } body.rs-theme .blueprint-badge, body.rs-theme .subcategory-card__count { color: var(--rs-gold); } body.rs-theme .subcategory-card__arrow { color: var(--rs-trim-hi); } /* chips & badges */ body.rs-theme .reagent-chip, body.rs-theme .tier-badge-forge, body.rs-theme .ingredient-chip, body.rs-theme .tag-chip { background: var(--rs-stone-lo); border: 1px solid var(--rs-bevel-dark); border-radius: 0; color: var(--rs-text); } /* breadcrumbs & inline links inside content */ body.rs-theme .breadcrumb-nav a, body.rs-theme .view-all-link { color: var(--rs-text-dim); } body.rs-theme .breadcrumb-nav a:hover { color: var(--rs-gold); } body.rs-theme .breadcrumb-sep { color: var(--rs-trim); } /* generic stat / count rows */ body.rs-theme .recipe-stats, body.rs-theme .stats-row { color: var(--rs-text-dim); } body.rs-theme .recipe-stats span, body.rs-theme .item-count { color: var(--rs-gold-soft); } /* primary action buttons -> gold stone */ body.rs-theme .btn-primary, body.rs-theme .submit-btn, body.rs-theme .primary-btn { background: linear-gradient(180deg, var(--rs-gold-soft), var(--rs-gold-deep)); color: var(--rs-ink); border: 2px solid var(--rs-bevel-dark); border-radius: 0; box-shadow: inset 1px 1px 0 rgba(255, 255, 255, 0.3), inset -1px -1px 0 var(--rs-bevel-dark); text-shadow: none; } body.rs-theme .btn-secondary, body.rs-theme .secondary-btn { background: linear-gradient(180deg, var(--rs-stone-hi), var(--rs-stone-lo)); color: var(--rs-gold-soft); border: 2px solid var(--rs-bevel-dark); border-radius: 0; box-shadow: inset 1px 1px 0 var(--rs-bevel-light), inset -1px -1px 0 var(--rs-bevel-dark); } /* dungeon / boss detail */ body.rs-theme .resistance-badge, body.rs-theme .weakness-item, body.rs-theme .ability-item { background: var(--rs-stone-lo); border: 1px solid var(--rs-bevel-dark); border-radius: 0; color: var(--rs-text); } body.rs-theme .boss-resistances h4, body.rs-theme .boss-abilities h4, body.rs-theme .boss-weaknesses h4 { color: var(--rs-gold-soft); } body.rs-theme .strategy-tip { border-left: 3px solid var(--rs-gold); } /* loading / empty states */ body.rs-theme .no-results, body.rs-theme .loading { color: var(--rs-text-dim); }