/* ========================= WOW THEME SKIN File: styles_wow.css ========================= */ /* ========================= THEME TOKENS ========================= */ :root { --bg: #070a0f; --bg-card: rgba(10, 14, 20, 0.82); --bg-elevated: rgba(8, 10, 14, 0.95); --fg: #e7e3d6; --muted: rgba(231, 227, 214, 0.68); --accent: #d6b35a; --accent-2: #3bd6c6; --accent-soft: rgba(214, 179, 90, 0.18); --border-subtle: rgba(214, 179, 90, 0.18); --danger: #f87171; --ink: rgba(0, 0, 0, 0.55); --glow: rgba(214, 179, 90, 0.35); --glow-2: rgba(59, 214, 198, 0.22); --radius: 14px; --radius-sm: 11px; /* Home page */ --content-max: 1000px; } /* ========================= BASE ========================= */ * { box-sizing: border-box; } html, body { height: 100%; } body { font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; margin: 0; padding: 0; color: var(--fg); background: radial-gradient(900px 500px at 10% 0%, rgba(59, 214, 198, 0.10), transparent 55%), radial-gradient(700px 420px at 80% 10%, rgba(214, 179, 90, 0.12), transparent 55%), radial-gradient(900px 520px at 60% 100%, rgba(214, 179, 90, 0.10), transparent 60%), linear-gradient(180deg, #05070c 0%, #070a0f 40%, #04060a 100%); /* Prevent any accidental horizontal scroll */ overflow-x: hidden; } a { color: inherit; text-decoration: none; } .page { min-height: 100vh; display: flex; flex-direction: column; position: relative; } /* ========================= BACKGROUND LAYERS - Add

as first element inside ========================= */ .bg-layer { position: fixed; inset: 0; z-index: -2; pointer-events: none; background: radial-gradient(900px 600px at 20% 10%, rgba(214, 179, 90, 0.18), transparent 60%), radial-gradient(800px 520px at 85% 15%, rgba(59, 214, 198, 0.10), transparent 55%), linear-gradient(180deg, rgba(7, 10, 15, 0.70), rgba(7, 10, 15, 0.92)), url("/images/ncbg.webp"); background-size: auto, auto, auto, cover; background-position: center, center, center, center; background-repeat: no-repeat; transform: translateZ(0); } /* Vignette overlay */ body.wow-bg::after { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: -1; background: radial-gradient(circle at center, transparent 35%, rgba(0, 0, 0, 0.55) 100%); opacity: 0.55; } /* Grain overlay */ body::before { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: -1; background: radial-gradient(circle at 20% 10%, rgba(255, 255, 255, 0.04), transparent 35%), radial-gradient(circle at 75% 30%, rgba(255, 255, 255, 0.03), transparent 40%), radial-gradient(circle at 40% 80%, rgba(255, 255, 255, 0.025), transparent 45%); opacity: 0.7; mix-blend-mode: screen; } /* ========================= HEADER / NAV ========================= */ .nav { position: sticky; top: 0; z-index: 40; background: radial-gradient(circle at 15% 0%, rgba(214, 179, 90, 0.18), transparent 60%), radial-gradient(circle at 75% 0%, rgba(59, 214, 198, 0.12), transparent 60%), linear-gradient(180deg, rgba(10, 14, 20, 0.92), rgba(6, 8, 12, 0.92)); border-bottom: 1px solid rgba(214, 179, 90, 0.22); backdrop-filter: blur(14px); } .nav-inner { max-width: 1120px; margin: 0 auto; padding: 0.85rem 1.25rem; display: flex; align-items: center; justify-content: space-between; gap: 1.25rem; } .brand-block { display: flex; align-items: center; gap: 0.85rem; } .brand-logo { width: 34px; height: 34px; border-radius: 10px; border: 1px solid rgba(214, 179, 90, 0.35); display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 0.82rem; letter-spacing: 0.08em; text-transform: uppercase; background: radial-gradient(circle at 30% 20%, rgba(214, 179, 90, 0.35), transparent 60%), radial-gradient(circle at 80% 90%, rgba(59, 214, 198, 0.20), transparent 55%), linear-gradient(180deg, rgba(20, 24, 34, 0.95), rgba(8, 10, 14, 0.95)); color: #f3e7b6; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.7), 0 12px 30px rgba(0, 0, 0, 0.7); } .brand-text { display: flex; flex-direction: column; gap: 2px; } .brand-title { font-size: 1.02rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: #f0e8d1; text-shadow: 0 0 16px rgba(214, 179, 90, 0.12); } .brand-subtitle { font-size: 0.82rem; color: var(--muted); } .top-bar-right { display: flex; align-items: center; gap: 0.55rem; flex-wrap: wrap; justify-content: flex-end; } /* Season pill (header) */ .pill { display: inline-flex; flex-direction: column; align-items: flex-start; justify-content: center; border-radius: 999px; padding: 0.32rem 0.85rem 0.38rem; font-size: 0.73rem; background: radial-gradient(circle at 20% 30%, rgba(214, 179, 90, 0.16), transparent 55%), linear-gradient(180deg, rgba(12, 16, 24, 0.75), rgba(8, 10, 14, 0.75)); color: rgba(243, 231, 182, 0.85); border: 1px solid rgba(214, 179, 90, 0.30); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.55), 0 10px 24px rgba(0, 0, 0, 0.55); max-width: 100%; word-break: break-word; } .user-chip { display: none; align-items: center; gap: 0.55rem; padding: 0.2rem 0.65rem; border-radius: 999px; background: rgba(10, 14, 20, 0.86); border: 1px solid rgba(214, 179, 90, 0.22); } .user-avatar { width: 24px; height: 24px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 0.7rem; font-weight: 800; background: radial-gradient(circle at 30% 20%, rgba(59, 214, 198, 0.35), transparent 55%), linear-gradient(180deg, rgba(20, 24, 34, 0.95), rgba(8, 10, 14, 0.95)); border: 1px solid rgba(59, 214, 198, 0.35); color: #e8fff9; } .user-name { font-size: 0.8rem; font-weight: 600; color: #f0e8d1; } /* Buttons */ button { border-radius: 999px; border: none; padding: 0.48rem 0.95rem; cursor: pointer; background: linear-gradient(180deg, rgba(214, 179, 90, 0.95), rgba(143, 108, 42, 0.95)); color: #1a1206; font-size: 0.85rem; display: inline-flex; align-items: center; gap: 0.35rem; box-shadow: 0 14px 30px rgba(0, 0, 0, 0.55); } button:hover { filter: brightness(1.05); transform: translateY(-1px); } button:disabled { opacity: 0.6; cursor: default; transform: none; } .btn-ghost { border-radius: 999px; border: 1px solid rgba(214, 179, 90, 0.28); padding: 0.3rem 0.75rem; font-size: 0.76rem; background: rgba(10, 14, 20, 0.78); color: #f0e8d1; display: inline-flex; align-items: center; gap: 0.4rem; cursor: pointer; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.55); } .btn-ghost:hover { border-color: rgba(59, 214, 198, 0.45); color: #e8fff9; transform: translateY(-1px); } .btn-link { font-size: 0.8rem; color: rgba(243, 231, 182, 0.92); border: 1px solid rgba(214, 179, 90, 0.22); padding: 0.25rem 0.65rem; border-radius: 999px; background: rgba(10, 14, 20, 0.55); } .btn-link:hover { border-color: rgba(59, 214, 198, 0.45); color: #e8fff9; } /* ========================= SUBNAV ========================= */ .subnav { position: sticky; top: 62px; z-index: 30; background: rgba(8, 10, 14, 0.92); border-bottom: 1px solid rgba(214, 179, 90, 0.16); backdrop-filter: blur(10px); } .subnav-inner { max-width: 1120px; margin: 0 auto; padding: 0.45rem 1.25rem; display: flex; gap: 0.45rem; overflow-x: auto; } .subnav-tab { font-size: 0.82rem; padding: 0.28rem 0.85rem; border-radius: 999px; color: rgba(231, 227, 214, 0.72); border: 1px solid transparent; white-space: nowrap; background: rgba(10, 14, 20, 0.35); } .subnav-tab:hover { color: #f0e8d1; border-color: rgba(214, 179, 90, 0.22); background: rgba(10, 14, 20, 0.55); } .subnav-tab-active { color: #f3e7b6; border-color: rgba(214, 179, 90, 0.45); background: radial-gradient(circle at 20% 30%, rgba(214, 179, 90, 0.18), transparent 55%), rgba(10, 14, 20, 0.65); box-shadow: 0 10px 26px rgba(0, 0, 0, 0.55); } /* ========================= MAIN + HOME WRAP ========================= */ .main { flex: 1; width: 100%; padding: 1.25rem; } .home-wrap { width: min(var(--content-max), 96vw); margin: 0 auto; } /* ========================= HERO ========================= */ .hero { margin-bottom: 1rem; border-radius: var(--radius); padding: 1rem 1.05rem; background: radial-gradient(900px 240px at 20% 0%, rgba(59, 214, 198, 0.10), transparent 60%), radial-gradient(900px 240px at 80% 0%, rgba(214, 179, 90, 0.14), transparent 60%), linear-gradient(180deg, rgba(10, 14, 20, 0.70), rgba(8, 10, 14, 0.88)); border: 1px solid rgba(214, 179, 90, 0.22); box-shadow: 0 22px 60px rgba(0, 0, 0, 0.62); position: relative; overflow: hidden; } .hero::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(to right, rgba(214, 179, 90, 0.18), transparent 25%, transparent 75%, rgba(214, 179, 90, 0.18)), linear-gradient(to bottom, rgba(214, 179, 90, 0.12), transparent 35%, transparent 65%, rgba(214, 179, 90, 0.12)); opacity: 0.35; } .hero-title { font-size: 1.45rem; font-weight: 800; margin-bottom: 0.3rem; letter-spacing: 0.03em; color: #f3e7b6; text-shadow: 0 0 18px rgba(214, 179, 90, 0.18), 0 0 26px rgba(59, 214, 198, 0.08); } .hero-sub { font-size: 0.92rem; color: rgba(231, 227, 214, 0.72); line-height: 1.35; max-width: none; } /* ========================= HOME GRID ========================= */ .home-layout { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr); gap: 1rem; align-items: start; } .home-right { display: flex; flex-direction: column; gap: 0.75rem; } /* Admin strip */ .admin-panel { display: flex; align-items: center; justify-content: flex-end; gap: 0.5rem; padding: 0.35rem; border-radius: 999px; background: radial-gradient(circle at 20% 30%, rgba(214, 179, 90, 0.10), transparent 55%), rgba(8, 10, 14, 0.55); border: 1px solid rgba(214, 179, 90, 0.18); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.55); } .icon-btn { width: 36px; height: 36px; padding: 0; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; background: radial-gradient(circle at 30% 25%, rgba(59, 214, 198, 0.16), transparent 55%), linear-gradient(180deg, rgba(12, 16, 24, 0.72), rgba(8, 10, 14, 0.78)); border: 1px solid rgba(214, 179, 90, 0.22); color: #f3e7b6; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.55), 0 10px 24px rgba(0, 0, 0, 0.55); cursor: pointer; user-select: none; } .icon-btn:hover { border-color: rgba(59, 214, 198, 0.45); color: #e8fff9; transform: translateY(-1px); filter: brightness(1.06); } .icon-btn .icon { font-size: 1.05rem; line-height: 1; } /* ========================= CARDS ========================= */ .card { background: var(--bg-card); border-radius: var(--radius); padding: 0.95rem 1rem; box-shadow: 0 20px 55px rgba(0, 0, 0, 0.65); border: 1px solid rgba(214, 179, 90, 0.20); position: relative; overflow: hidden; } .card::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle at 20% 20%, rgba(214, 179, 90, 0.10), transparent 55%), radial-gradient(circle at 80% 0%, rgba(59, 214, 198, 0.08), transparent 55%); opacity: 0.65; } .card-title-row { position: relative; display: flex; justify-content: space-between; align-items: center; gap: 0.6rem; margin-bottom: 0.55rem; } .card-title { font-size: 1rem; font-weight: 800; color: #f0e8d1; letter-spacing: 0.02em; } .card-sub { font-size: 0.82rem; color: rgba(231, 227, 214, 0.66); } .card-body { position: relative; } /* Header-like row (loot_tokens etc.) */ .card-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.75rem; margin-bottom: 0.6rem; position: relative; } .card-subtitle { font-size: 0.82rem; color: rgba(231, 227, 214, 0.66); margin-top: 0.15rem; } /* ========================= LISTS / FEEDS ========================= */ .stack-list { display: flex; flex-direction: column; gap: 0.6rem; } .stack-list-item { border-radius: var(--radius-sm); border: 1px solid rgba(214, 179, 90, 0.18); background: rgba(8, 10, 14, 0.55); padding: 0.65rem 0.7rem; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.55); transition: transform 0.12s ease, border-color 0.12s ease, box-shadow 0.12s ease; } .stack-list-item:hover { transform: translateY(-1px); border-color: rgba(59, 214, 198, 0.35); box-shadow: 0 18px 48px rgba(0, 0, 0, 0.65); } .placeholder-text, .empty-state-text { font-size: 0.84rem; color: rgba(231, 227, 214, 0.65); padding: 0.25rem 0.15rem; } .error-text { font-size: 0.84rem; color: var(--danger); padding: 0.25rem 0.15rem; } .news-title, .event-title { font-size: 0.92rem; font-weight: 800; color: #f3e7b6; } .news-meta, .event-meta { font-size: 0.76rem; color: rgba(231, 227, 214, 0.62); } .news-body, .event-body { margin: 0; font-size: 0.84rem; color: rgba(231, 227, 214, 0.78); line-height: 1.35; } /* News thumbnails (optional) */ .news-row { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.75rem; align-items: start; } .news-thumb { width: 120px; aspect-ratio: 16 / 10; border-radius: 10px; overflow: hidden; border: 1px solid rgba(214, 179, 90, 0.18); background: rgba(0, 0, 0, 0.28); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.45); } .news-thumb-img { width: 100%; height: 100%; display: block; object-fit: cover; } .news-content { min-width: 0; } .news-thumb-error { height: 100%; width: 100%; display: flex; align-items: center; justify-content: center; padding: 0.35rem; text-align: center; font-size: 0.76rem; color: var(--danger); } /* If the image fails, make it obvious (no silent fallback) */ .news-item.news-image-error { border-color: rgba(248, 113, 113, 0.35); } @media (max-width: 520px) { .news-row { grid-template-columns: 1fr; } .news-thumb { width: 100%; aspect-ratio: 16 / 9; } } /* ========================= UTILITIES ========================= */ .hidden { display: none !important; } .officer-only { display: none; } /* Layout helpers used across pages */ .container { width: min(1120px, 96vw); margin: 0 auto; } .stack { display: flex; flex-direction: column; gap: 0.75rem; } .row { display: flex; gap: 0.75rem; align-items: flex-start; flex-wrap: wrap; } .row > * { flex: 1 1 220px; min-width: 220px; } .small-label { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em; color: rgba(231, 227, 214, 0.62); margin-bottom: 0.25rem; } .section-divider { height: 1px; background: rgba(214, 179, 90, 0.16); margin: 0.45rem 0; } .muted { color: rgba(231, 227, 214, 0.60); font-size: 0.82rem; } .footnote { margin-top: 0.45rem; font-size: 0.75rem; color: rgba(231, 227, 214, 0.60); line-height: 1.35; } /* ========================= GRIDS (legacy pages) ========================= */ .grid { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 1rem; align-items: flex-start; } .grid-loot { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1.3fr); gap: 1rem; align-items: flex-start; } @media (max-width: 960px) { .grid-loot { grid-template-columns: minmax(0, 1fr); } } @media (max-width: 900px) { .grid { grid-template-columns: minmax(0, 1fr); } .home-layout { grid-template-columns: 1fr; } } /* ========================= FORMS ========================= */ .input, select, textarea, input[type="text"], input[type="number"], input[type="date"], input[type="datetime-local"] { width: 100%; padding: 8px 10px; border-radius: 12px; border: 1px solid rgba(214, 179, 90, 0.20); background: rgba(10, 14, 20, 0.70); color: var(--fg); font-size: 0.85rem; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.45); } textarea { min-height: 90px; resize: vertical; } .input::placeholder, textarea::placeholder { color: rgba(231, 227, 214, 0.55); } /* ========================= TABLES ========================= */ table { width: 100%; border-collapse: collapse; font-size: 0.85rem; } th, td { padding: 8px 6px; text-align: left; } th { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em; color: rgba(231, 227, 214, 0.65); border-bottom: 1px solid rgba(214, 179, 90, 0.18); } tr:nth-child(even) td { background: rgba(8, 10, 14, 0.55); } tr:nth-child(odd) td { background: rgba(8, 10, 14, 0.30); } tr td:first-child, tr th:first-child { border-top-left-radius: 12px; border-bottom-left-radius: 12px; } tr td:last-child, tr th:last-child { border-top-right-radius: 12px; border-bottom-right-radius: 12px; } /* Small helper badges + status lines */ .badge-soft { font-size: 0.75rem; background: rgba(214, 179, 90, 0.12); border: 1px solid rgba(214, 179, 90, 0.18); border-radius: 999px; padding: 0.1rem 0.55rem; color: rgba(243, 231, 182, 0.85); } .status-line { font-size: 0.85rem; color: rgba(231, 227, 214, 0.70); margin-top: 0.6rem; } .status-line.error { color: var(--danger); } /* ========================= WOW RAID PLANNER LAYER (next_season + similar) - Fixes pill conflict: header .pill vs raid buff/utility pills ========================= */ .right-rail { display: flex; flex-direction: column; gap: 0.75rem; } .sidebar-card { padding: 0.75rem 0.85rem; } .roles-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; } @media (max-width: 700px) { .roles-grid { grid-template-columns: minmax(0, 1fr); } } .role-column { border-radius: 0.65rem; background: radial-gradient(circle at top, rgba(214, 179, 90, 0.10), transparent 65%); border: 1px solid rgba(214, 179, 90, 0.18); padding: 0.45rem 0.55rem 0.5rem; } .role-header { display: flex; align-items: center; justify-content: space-between; font-size: 0.8rem; margin-bottom: 0.25rem; color: rgba(231, 227, 214, 0.85); } .role-label { display: inline-flex; align-items: center; gap: 0.35rem; } .role-icon { width: 20px; height: 20px; border-radius: 999px; display: flex; align-items: center; justify-content: center; font-size: 0.65rem; background: rgba(10, 14, 20, 0.85); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.55); } .role-icon.tank { border: 1px solid rgba(56, 189, 248, 0.9); } .role-icon.healer { border: 1px solid rgba(34, 197, 94, 0.9); } .role-icon.melee { border: 1px solid rgba(250, 204, 21, 0.9); } .role-icon.ranged { border: 1px solid rgba(168, 85, 247, 0.9); } .role-count { font-size: 0.75rem; color: rgba(231, 227, 214, 0.60); } .role-list { display: flex; flex-direction: column; gap: 0.25rem; max-height: 260px; overflow-y: auto; padding-top: 0.1rem; } .char-row { display: flex; align-items: center; gap: 0.4rem; padding: 0.2rem 0.25rem; border-radius: 0.45rem; } .char-row:nth-child(2n) { background: rgba(8, 10, 14, 0.55); } .class-pill { min-width: 10px; width: 10px; height: 26px; border-radius: 999px; background: #6b7280; } .char-main { flex: 1; min-width: 0; } .char-name { font-size: 0.85rem; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #f3e7b6; } .char-meta { font-size: 0.75rem; color: rgba(231, 227, 214, 0.62); } .char-tag { font-size: 0.72rem; color: rgba(231, 227, 214, 0.55); } /* Class breakdown bars */ .class-bars { display: flex; align-items: flex-end; gap: 0.35rem; min-height: 140px; padding-top: 0.4rem; } .class-bar { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 0.25rem; min-width: 0; } .class-bar-visual { width: 100%; max-width: 18px; border-radius: 999px; background: rgba(10, 14, 20, 0.85); border: 1px solid rgba(214, 179, 90, 0.18); display: flex; align-items: flex-end; justify-content: center; overflow: hidden; } .class-bar-fill { width: 100%; background: #6b7280; } .class-count { font-size: 0.75rem; color: rgba(231, 227, 214, 0.62); } .class-label { font-size: 0.7rem; text-align: center; line-height: 1.1; min-height: 2.2em; color: rgba(231, 227, 214, 0.75); } /* Tier breakdown */ .tier-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 0.5rem; margin-top: 0.4rem; } .tier-stat-box { background: rgba(8, 10, 14, 0.55); border-radius: 0.6rem; border: 1px solid rgba(214, 179, 90, 0.18); padding: 0.45rem 0.55rem; font-size: 0.78rem; } .tier-stat-label { color: rgba(231, 227, 214, 0.62); margin-bottom: 0.15rem; } .tier-stat-value { font-size: 0.95rem; font-weight: 800; color: #f3e7b6; } /* Raid buffs/utility pills (scoped) */ .pill-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem; } @media (max-width: 700px) { .pill-grid { grid-template-columns: minmax(0, 1fr); } } .pill-grid .pill { border-radius: 0.65rem; padding: 0.45rem 0.55rem; border: 1px solid rgba(214, 179, 90, 0.18); background: rgba(8, 10, 14, 0.55); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.55); display: flex; flex-direction: column; align-items: flex-start; gap: 0.15rem; } .pill-grid .pill-success { border-color: rgba(59, 214, 198, 0.35); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.55), 0 10px 26px rgba(0, 0, 0, 0.55); } .pill-grid .pill-missing { border-color: rgba(248, 113, 113, 0.35); } .pill-label-main { font-size: 0.82rem; font-weight: 800; color: #f3e7b6; } .pill-label-sub { font-size: 0.75rem; color: rgba(231, 227, 214, 0.62); line-height: 1.2; } .no-data { font-size: 0.8rem; color: rgba(231, 227, 214, 0.62); } /* ========================= WOW HOUSING LAYER ========================= */ .housing-map-wrapper { display: flex; flex-direction: column; gap: 0.75rem; } .housing-toolbar { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; justify-content: space-between; } .housing-toolbar-left, .housing-toolbar-right { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; } /* Panzoom viewport */ .housing-map-shell { height: 60vh; /* critical */ overflow: hidden; position: relative; border-radius: 0.85rem; border: 1px solid rgba(214, 179, 90, 0.18); background: var(--bg-elevated); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.55); } /* Panzoom target */ .housing-map-inner { position: relative; display: inline-block; /* critical */ width: auto; /* critical */ height: auto; transform-origin: center center; will-change: transform; touch-action: none; user-select: none; pointer-events: auto; } /* Base image */ .housing-map-image { display: block; width: auto; /* critical */ height: auto; max-width: none; /* critical */ opacity: 0.98; user-select: none; -webkit-user-drag: none; pointer-events: none !important; /* overlays get the events */ position: relative; z-index: 1; image-rendering: crisp-edges; image-rendering: -webkit-optimize-contrast; } /* Overlay layer for plots/pins */ .housing-map-layer { position: absolute; inset: 0; pointer-events: none; /* markers handle pointer events */ z-index: 2; } /* Plot markers injected by JS */ .plot-marker { position: absolute; transform: translate(-50%, -100%); pointer-events: auto !important; z-index: 3; border: none; background: transparent; padding: 0; cursor: pointer; } .plot-marker:focus { outline: none; } .plot-marker-inner { border-radius: 999px; padding: 0.25rem 0.5rem; font-size: 0.7rem; display: inline-flex; align-items: center; gap: 0.35rem; background: radial-gradient(circle at 20% 30%, rgba(214, 179, 90, 0.12), transparent 60%), rgba(8, 10, 14, 0.82); border: 1px solid rgba(214, 179, 90, 0.30); color: rgba(243, 231, 182, 0.92); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.55), 0 14px 30px rgba(0, 0, 0, 0.55); } .plot-marker-inner::before { content: "🏠"; font-size: 0.85rem; } .plot-marker-label { max-width: 90px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .plot-marker--available .plot-marker-inner { border-style: dashed; border-color: rgba(231, 227, 214, 0.35); color: rgba(231, 227, 214, 0.75); background: rgba(8, 10, 14, 0.72); } .plot-marker--claimed .plot-marker-inner { border-color: rgba(59, 214, 198, 0.45); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.55), 0 18px 48px rgba(0, 0, 0, 0.65); } .plot-marker:hover .plot-marker-inner { border-color: rgba(59, 214, 198, 0.55); color: #e8fff9; transform: translateY(-1px); filter: brightness(1.06); } .plot-marker--selected .plot-marker-inner { outline: 2px solid rgba(59, 214, 198, 0.70); outline-offset: 2px; } /* Optional pins (if used elsewhere) */ .housing-pin { position: absolute; width: 20px; height: 20px; transform: translate(-50%, -50%); border-radius: 999px; border: 1px solid rgba(0, 0, 0, 0.75); box-shadow: 0 10px 26px rgba(0, 0, 0, 0.55); pointer-events: auto; cursor: pointer; z-index: 3; } .housing-pin::after { content: ""; position: absolute; inset: -6px; border-radius: 999px; background: radial-gradient(circle, rgba(214, 179, 90, 0.22), transparent 65%); opacity: 0.9; } .housing-pin-owner { background: rgba(34, 197, 94, 0.65); } .housing-pin-empty { background: rgba(31, 41, 55, 0.85); } .housing-pin-selected { outline: 2px solid rgba(59, 214, 198, 0.75); outline-offset: 2px; } /* Housing legend + details */ .housing-legend, .housing-map-legend { display: flex; flex-wrap: wrap; gap: 0.55rem; align-items: center; font-size: 0.82rem; color: rgba(231, 227, 214, 0.72); } .legend-item { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.25rem 0.55rem; border-radius: 999px; background: rgba(10, 14, 20, 0.55); border: 1px solid rgba(214, 179, 90, 0.16); } .legend-icon { width: 12px; height: 12px; border-radius: 999px; border: 1px solid rgba(0, 0, 0, 0.75); } .legend-icon-house { background: rgba(34, 197, 94, 0.55); } .legend-icon-empty { background: rgba(31, 41, 55, 0.95); } .housing-details { border-top: 1px solid rgba(214, 179, 90, 0.16); padding-top: 0.4rem; font-size: 0.85rem; } .housing-details-title { font-weight: 800; color: #f3e7b6; } .housing-details-meta { color: rgba(231, 227, 214, 0.65); font-size: 0.8rem; } .housing-details-notes { font-size: 0.78rem; color: rgba(231, 227, 214, 0.62); } /* Residents list */ .housing-list { margin-top: 0.2rem; max-height: 360px; overflow-y: auto; padding-right: 0.25rem; display: flex; flex-direction: column; gap: 0.4rem; } .housing-list-item { border-radius: 0.65rem; padding: 0.5rem 0.6rem; background: rgba(8, 10, 14, 0.55); border: 1px solid rgba(214, 179, 90, 0.16); cursor: pointer; transition: border-color 0.12s ease, box-shadow 0.12s ease, transform 0.12s ease, background 0.12s ease; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.55); } .housing-list-item:hover { border-color: rgba(59, 214, 198, 0.35); background: rgba(8, 10, 14, 0.72); box-shadow: 0 18px 48px rgba(0, 0, 0, 0.65); transform: translateY(-1px); } .housing-list-item--active { border-color: rgba(59, 214, 198, 0.55); box-shadow: 0 0 0 1px rgba(59, 214, 198, 0.20), 0 18px 48px rgba(0, 0, 0, 0.65); } .housing-list-header { display: flex; align-items: baseline; justify-content: space-between; gap: 0.5rem; } .housing-list-name { font-weight: 800; color: #f3e7b6; font-size: 0.9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .housing-list-meta { font-size: 0.75rem; color: rgba(231, 227, 214, 0.60); white-space: nowrap; } .housing-list-plot, .housing-list-theme, .housing-list-notes { font-size: 0.82rem; color: rgba(231, 227, 214, 0.75); margin-top: 0.15rem; } /* Split + stats */ .housing-split { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 1rem; align-items: start; } @media (max-width: 900px) { .housing-split { grid-template-columns: minmax(0, 1fr); } } .housing-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.5rem; } @media (max-width: 900px) { .housing-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .housing-stat { background: rgba(8, 10, 14, 0.55); border-radius: 0.65rem; border: 1px solid rgba(214, 179, 90, 0.16); padding: 0.45rem 0.55rem; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.55); } /* ========================= WOWHEAD TOOLTIP READABILITY ========================= */ .whtooltip *, .qtip *, #tt * { color: #e7e3d6 !important; } .wowhead-tooltip .tooltip, .wowhead-tooltip { background: rgba(10, 14, 20, 0.95) !important; border: 1px solid rgba(214, 179, 90, 0.18) !important; } /* Loot item links */ .loot-item-link { color: #a335ee; text-shadow: 0 0 6px rgba(163, 53, 238, 0.4); text-decoration: none; } .loot-item-link:hover { text-decoration: underline; } /* ========================= RESPONSIVE ========================= */ @media (max-width: 700px) { .nav-inner { padding-inline: 0.75rem; } .main { padding-inline: 0.75rem; } } /* ========================= CLASS COLOURS + "MY CHAR" HIGHLIGHT (loot/tables) Keep this near the end so it wins. ========================= */ .class-warrior { color: #c79c6e; } .class-paladin { color: #f58cba; } .class-hunter { color: #abd473; } .class-rogue { color: #fff569; } .class-priest { color: #ffffff; } .class-deathknight { color: #c41f3b; } .class-shaman { color: #0070de; } .class-mage { color: #69ccf0; } .class-warlock { color: #9482c9; } .class-monk { color: #00ff96; } .class-druid { color: #ff7d0a; } .class-demonhunter { color: #a330c9; } .class-evoker { color: #33937f; } .current-user-char { font-weight: 700; text-shadow: 0 0 10px rgba(59, 214, 198, 0.35); } /* Force inside tables */ table td span[class^="class-"] { font-weight: 700; } table td .class-warrior { color: #c79c6e !important; } table td .class-paladin { color: #f58cba !important; } table td .class-hunter { color: #abd473 !important; } table td .class-rogue { color: #fff569 !important; } table td .class-priest { color: #ffffff !important; } table td .class-deathknight { color: #c41f3b !important; } table td .class-shaman { color: #0070de !important; } table td .class-mage { color: #69ccf0 !important; } table td .class-warlock { color: #9482c9 !important; } table td .class-monk { color: #00ff96 !important; } table td .class-druid { color: #ff7d0a !important; } table td .class-demonhunter { color: #a330c9 !important; } table td .class-evoker { color: #33937f !important; } table td .current-user-char { padding: 0.12rem 0.4rem; border-radius: 999px; background: rgba(59, 214, 198, 0.12); border: 1px solid rgba(59, 214, 198, 0.28); box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.45), 0 12px 26px rgba(0, 0, 0, 0.45); text-shadow: 0 0 10px rgba(59, 214, 198, 0.35); }