/* ============================================================================ hub-overlay.css — the "dark glass console" design system for hub windows. This is the reusable visual language for every surface that opens inside the castle hub (merchant / ranks / bag / loadouts / codex / profile). Direction locked 2026-06-05: dark frosted glass + gold hairlines + Cinzel titles + tabular numbers + SVG icons + one glowing CTA. SKINNABLE-FRAME SEAM (important): panels get their "frame" look from the --hg-frame-* tokens and the .hg-frame treatment below — NOT from hard-coded borders. When Teammate B's PNG-layer art lands, a carved-wood / stone frame becomes a drop-in skin: set --hg-frame-bg to a 9-slice border-image (or add body.hg-skin-art overrides) and the glass console becomes the skeuomorphic stall with no layout change. Keep frame styling flowing through these tokens. Opt-in per page with + linking this file AFTER the page's own stylesheet so the reskin wins. ========================================================================== */ :root { --hg-gold: #D4A64B; --hg-gold-2: #f0d28a; --hg-ink: #f3ecdd; --hg-sub: #bdb2a0; --hg-faint: #8b8170; /* Frame seam — swap these (or border-image) for PNG art later. */ --hg-frame-bg: linear-gradient(180deg, rgba(36,30,48,.66), rgba(18,14,26,.72)); --hg-frame-border: 1px solid rgba(212,166,75,.28); --hg-frame-radius: 16px; --hg-frame-shadow: 0 1px 0 rgba(255,255,255,.05) inset, 0 18px 48px rgba(0,0,0,.5); --hg-frame-blur: 16px; } /* ── Reusable components (for native hub surfaces built directly in glass) ── */ .hg-frame { background: var(--hg-frame-bg); -webkit-backdrop-filter: blur(var(--hg-frame-blur)); backdrop-filter: blur(var(--hg-frame-blur)); border: var(--hg-frame-border); border-radius: var(--hg-frame-radius); box-shadow: var(--hg-frame-shadow); } .hg-title { font-family: 'Cinzel', serif; font-weight: 900; letter-spacing: 3px; color: var(--hg-gold-2); text-shadow: 0 2px 10px rgba(0,0,0,.6); } .hg-num { font-variant-numeric: tabular-nums; font-family: ui-monospace,'SFMono-Regular',monospace; } .hg-cta { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 13px 24px; border-radius: 12px; border: none; cursor: pointer; font-family: 'Cinzel', serif; font-weight: 700; letter-spacing: 1.5px; font-size: 14px; color: #140e06; background: linear-gradient(180deg, var(--hg-gold-2), var(--hg-gold)); box-shadow: 0 6px 22px rgba(212,166,75,.4), 0 0 0 1px rgba(255,255,255,.25) inset; } .hg-cta:hover { filter: brightness(1.05); } .hg-cta:disabled { opacity: .45; cursor: default; box-shadow: none; } /* ============================================================================ PACKS.HTML glass reskin (body.hub-glass). Restyles the existing markup into the glass console — no markup/JS changes, so the claim + ceremony flow is untouched. As other surfaces adopt .hub-glass, add their sections below. ========================================================================== */ body.hub-glass { font-family: 'Inter', system-ui, sans-serif; } /* Header — centered Cinzel plate */ body.hub-glass .bazaar-header { display: block; text-align: center; border-bottom: none; background: none; padding: 6px 18px 18px; } body.hub-glass .bazaar-header h1 { font-size: 22px; letter-spacing: 4px; color: var(--hg-gold-2); text-shadow: 0 2px 12px rgba(0,0,0,.6); } body.hub-glass .bazaar-header .sub { color: var(--hg-sub); letter-spacing: 1px; } /* Tabs — glass pill row */ body.hub-glass .tab-bar { border-bottom: none; gap: 8px; padding: 6px; justify-content: center; background: var(--hg-frame-bg); border: var(--hg-frame-border); border-radius: 14px; -webkit-backdrop-filter: blur(var(--hg-frame-blur)); backdrop-filter: blur(var(--hg-frame-blur)); max-width: 520px; margin: 0 auto 18px; } body.hub-glass .tab-btn { flex: 1; border-radius: 10px; border: 1px solid transparent; padding: 10px 8px; font-family: 'Cinzel', serif; font-weight: 700; font-size: 12px; letter-spacing: 1.5px; color: var(--hg-sub); } body.hub-glass .tab-btn.active { color: #100c08; border-color: var(--hg-gold); background: linear-gradient(180deg, var(--hg-gold-2), var(--hg-gold)); box-shadow: 0 6px 18px rgba(212,166,75,.28); } /* Section labels — drop the emoji glyph, keep the gold caps */ body.hub-glass .section-label { color: var(--hg-sub); letter-spacing: 2px; font-size: 10px; } body.hub-glass .section-label .icon { display: none; } /* Daily claim — premium glass-gold hero CTA */ body.hub-glass .daily-bar { max-width: 560px; margin: 0 auto 20px; } body.hub-glass .daily-claim-btn { padding: 20px 24px; border-radius: var(--hg-frame-radius); font-size: 16px; letter-spacing: 2px; color: #140e06; border: 1px solid var(--hg-gold); background: linear-gradient(180deg, var(--hg-gold-2), var(--hg-gold)); box-shadow: 0 10px 30px rgba(212,166,75,.4), inset 0 1px 0 rgba(255,255,255,.4); } body.hub-glass .daily-claim-btn:hover:not(:disabled) { background: linear-gradient(180deg, var(--hg-gold-2), var(--hg-gold)); filter: brightness(1.05); transform: translateY(-1px); box-shadow: 0 14px 36px rgba(212,166,75,.5); } body.hub-glass .daily-claim-btn .btn-icon { font-size: 20px; } /* Claimed state → glass panel */ body.hub-glass .daily-claimed-bar { background: var(--hg-frame-bg); border: var(--hg-frame-border); border-radius: var(--hg-frame-radius); -webkit-backdrop-filter: blur(var(--hg-frame-blur)); backdrop-filter: blur(var(--hg-frame-blur)); } body.hub-glass .daily-claimed-bar .left .text { color: var(--hg-ink); } body.hub-glass .countdown-badge { color: var(--hg-gold-2); background: rgba(212,166,75,.1); border-color: rgba(212,166,75,.25); font-variant-numeric: tabular-nums; } /* Inventory + buy + shop cards → glass frames */ body.hub-glass .pack-card, body.hub-glass .buy-pack-card, body.hub-glass .shop-item, body.hub-glass .earn-info, body.hub-glass .token-card { background: var(--hg-frame-bg) !important; border: var(--hg-frame-border) !important; border-radius: var(--hg-frame-radius); box-shadow: var(--hg-frame-shadow); -webkit-backdrop-filter: blur(var(--hg-frame-blur)); backdrop-filter: blur(var(--hg-frame-blur)); } body.hub-glass .pack-name { font-family: 'Cinzel', serif; } body.hub-glass .price-btn, body.hub-glass .item-price { font-variant-numeric: tabular-nums; font-family: ui-monospace, monospace; } /* Earn rows */ body.hub-glass .earn-item { gap: 12px; } body.hub-glass .earn-item .label { color: var(--hg-ink); font-weight: 600; font-family: 'Inter', sans-serif; } body.hub-glass .earn-item .desc { color: var(--hg-sub); } /* Shared helper: any element opted into a glass frame */ .hg-glass-panel { background: var(--hg-frame-bg) !important; border: var(--hg-frame-border) !important; border-radius: var(--hg-frame-radius); box-shadow: var(--hg-frame-shadow); -webkit-backdrop-filter: blur(var(--hg-frame-blur)); backdrop-filter: blur(var(--hg-frame-blur)); } /* ---- market.html — the wagering book (mk-*) ---- */ body.hub-glass .mk-title { font-family: 'Cinzel', serif; color: var(--hg-gold-2); letter-spacing: 2px; } body.hub-glass .mk-sub, body.hub-glass .mk-subhead { color: var(--hg-sub); } body.hub-glass .mk-tab { font-family: 'Cinzel', serif; font-weight: 700; letter-spacing: 1px; border-radius: 10px; color: var(--hg-sub); } body.hub-glass .mk-tab.is-active { color: #100c08; border-color: var(--hg-gold); background: linear-gradient(180deg, var(--hg-gold-2), var(--hg-gold)); box-shadow: 0 6px 18px rgba(212,166,75,.28); } body.hub-glass .mk-card, body.hub-glass .mk-pnl, body.hub-glass .mk-pnl-cell { background: var(--hg-frame-bg) !important; border: var(--hg-frame-border) !important; border-radius: var(--hg-frame-radius); box-shadow: var(--hg-frame-shadow); -webkit-backdrop-filter: blur(var(--hg-frame-blur)); backdrop-filter: blur(var(--hg-frame-blur)); } body.hub-glass .mk-pnl-value, body.hub-glass .mk-pick-odds { font-variant-numeric: tabular-nums; } /* ---- token.html — $9LV (page-header + *-card) ---- */ body.hub-glass .page-header h1 { font-family: 'Cinzel', serif; } body.hub-glass .page-eyebrow { color: var(--hg-gold-2); letter-spacing: 2px; } body.hub-glass .info-card, body.hub-glass .stat-card, body.hub-glass .burn-card, body.hub-glass .rule-card, body.hub-glass .staking-card, body.hub-glass .data-table { background: var(--hg-frame-bg) !important; border: var(--hg-frame-border) !important; border-radius: var(--hg-frame-radius); box-shadow: var(--hg-frame-shadow); -webkit-backdrop-filter: blur(var(--hg-frame-blur)); backdrop-filter: blur(var(--hg-frame-blur)); } body.hub-glass .stat-card-value { font-variant-numeric: tabular-nums; } /* ---- loadouts.html (ll-*) — frame the panels, NOT the cards inside ---- */ body.hub-glass .ll-title { font-family: 'Cinzel', serif; color: var(--hg-gold-2); letter-spacing: 2px; } body.hub-glass .ll-intro { color: var(--hg-sub); } body.hub-glass .ll-slot, body.hub-glass .ll-empty-state, body.hub-glass .ll-paywall, body.hub-glass .ll-picker-item, body.hub-glass .ll-modal { background: var(--hg-frame-bg) !important; border: var(--hg-frame-border) !important; border-radius: var(--hg-frame-radius); box-shadow: var(--hg-frame-shadow); -webkit-backdrop-filter: blur(var(--hg-frame-blur)); backdrop-filter: blur(var(--hg-frame-blur)); } body.hub-glass .ll-slot-name { font-family: 'Cinzel', serif; } /* ---- spellbook.html / codex (sb-*) — frame the chrome, NOT the .card-wrap cards ---- */ body.hub-glass .sb-header h1, body.hub-glass .sb-progress-text { font-family: 'Cinzel', serif; } body.hub-glass .sb-filters, body.hub-glass .sb-progress, body.hub-glass .sb-search-wrap, body.hub-glass .fuel-card { background: var(--hg-frame-bg) !important; border: var(--hg-frame-border) !important; border-radius: var(--hg-frame-radius); box-shadow: var(--hg-frame-shadow); -webkit-backdrop-filter: blur(var(--hg-frame-blur)); backdrop-filter: blur(var(--hg-frame-blur)); } body.hub-glass .sb-progress-fill { background: linear-gradient(90deg, var(--hg-gold), var(--hg-gold-2)); } /* ---- profile-public.template.html (pp-*) — frame the panels, keep the hero ---- */ body.hub-glass .pp-stat, body.hub-glass .card { background: var(--hg-frame-bg) !important; border: var(--hg-frame-border) !important; border-radius: var(--hg-frame-radius); box-shadow: var(--hg-frame-shadow); -webkit-backdrop-filter: blur(var(--hg-frame-blur)); backdrop-filter: blur(var(--hg-frame-blur)); } body.hub-glass .pp-stat__val { font-variant-numeric: tabular-nums; } body.hub-glass .card-header .label, body.hub-glass .pp-name { font-family: 'Cinzel', serif; }