/* ========================================================================== House of Winners — mobile side navigation Scoped under .hw-side. Open/close is still main.js toggling `mmenu-active` on ; only the panel's own appearance is overridden here. ========================================================================== */ .hw-side{ width:var(--hw-side-w); max-width:88vw; background:var(--hw-side-bg); font-family:var(--hw-font); color:var(--hw-on-surface); display:flex; flex-direction:column; } .hw-side *, .hw-side *::before, .hw-side *::after{box-sizing:border-box;} .hw-side a{text-decoration:none;color:inherit;} .hw-side ul{list-style:none;margin:0;padding:0;} .hw-side .mobile-menu-wrapper{ display:flex; flex-direction:column; height:100%; padding:0; background:none; } /* The sprite must occupy no space but stay renderable — display:none would stop resolving in some browsers. */ .hw-side__sprite{position:absolute;width:0;height:0;overflow:hidden;} /* -------------------------------------------------------------------------- 1. Compact header -------------------------------------------------------------------------- */ .hw-side__head{ flex:0 0 auto; min-height:60px; display:flex; align-items:center; justify-content:space-between; padding:0 16px 0 20px; } .hw-side__logo{display:block;height:50px;width:auto;max-width:150px;} .hw-side__logo img{height:100%;width:auto;max-width:150px;object-fit:contain;object-position:left center;display:block;} .hw-side .hw-side__close{ width:34px;height:34px; display:flex;align-items:center;justify-content:center; background:var(--hw-side-tint); border:1px solid var(--hw-side-hairline); border-radius:8px; cursor:pointer; /* neutralise the legacy absolute-positioned .mobile-menu-close */ position:static; top:auto;right:auto; color:var(--hw-side-muted); } .hw-side__close-icon{width:14px;height:14px;display:block;} /* -------------------------------------------------------------------------- 2. Auth buttons — same tokens as the desktop header, taller here -------------------------------------------------------------------------- */ .hw-side__auth{ flex:0 0 auto; min-height:60px; display:flex; align-items:center; justify-content:center; gap:7px; padding:10px 20px; } .hw-side .hw-btn{ display:inline-flex;align-items:center;justify-content:center; flex:1 1 0; min-height:44px; padding:8px 12px; border-radius:var(--hw-radius-pill); font-size:var(--hw-fs-btn); font-weight:900; text-transform:uppercase; white-space:nowrap; transition:filter .15s ease; } .hw-side .hw-btn--login{background:var(--hw-btn-login-bg);color:var(--hw-on-surface);} .hw-side .hw-btn--join{background:var(--hw-gold-gradient);color:var(--hw-surface);} .hw-side .hw-btn:hover{filter:brightness(1.12);} /* -------------------------------------------------------------------------- 3 & 4. Blocks: language + balance -------------------------------------------------------------------------- */ .hw-side__block{ flex:0 0 auto; display:flex; flex-direction:column; gap:5px; padding:10px 20px; } .hw-side__label{ font-size:9px; font-weight:700; line-height:14px; letter-spacing:1.8px; text-transform:uppercase; color:var(--hw-side-muted); } /* Language pills. Figma laid out two in a fixed 2-up row; three ship, so this wraps and shares width instead of overflowing. */ .hw-side__langs{display:flex;flex-wrap:wrap;gap:8px;} .hw-side .hw-langpill{ flex:1 1 76px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; min-height:40px; padding:4px 8px; background:var(--hw-side-bg); border:1px solid var(--hw-side-hairline); border-radius:var(--hw-radius-pill); transition:background .15s ease,border-color .15s ease; } .hw-langpill__code{font-size:13px;font-weight:900;line-height:1;color:var(--hw-side-muted);} .hw-langpill__name{font-size:9px;font-weight:400;line-height:10px;color:var(--hw-side-dim);} .hw-side .hw-langpill.is-active{ background:var(--hw-lang-active-bg); border-color:var(--hw-lang-active-border); } .hw-side .hw-langpill.is-active .hw-langpill__code{color:var(--hw-lang-active);} .hw-side .hw-langpill.is-active .hw-langpill__name{color:var(--hw-lang-active-dim);} /* Balance — the wallet row is the header pill in another shape: same script, same cache, tap to check. The i-Point row below it is server-rendered. */ .hw-side__block--wallet{gap:8px;} .hw-side__balance{ display:flex; align-items:center; gap:22px; min-height:48px; padding:6px 8px; border:1px solid var(--hw-gold-line); border-radius:var(--hw-radius); transition:border-color .15s ease,background .15s ease; } .hw-side__balance-icon{width:25px;height:25px;color:var(--hw-gold);flex:0 0 auto;} .hw-side__balance-text{display:flex;flex-direction:column;gap:2px;min-width:0;} .hw-side__balance-label{font-size:9px;font-weight:400;line-height:10px;color:var(--hw-side-muted);} .hw-side__balance-value{font-size:var(--hw-fs-sm);font-weight:400;line-height:14px;color:var(--hw-gold);} .hw-js-wallet{cursor:pointer;} a.hw-side__balance{text-decoration:none;} .hw-side__balance:hover, .hw-side__balance:focus-visible{border-color:var(--hw-gold);background:rgba(250,207,90,.06);text-decoration:none;} /* Trailing glyphs sit on the right edge whatever the value's width. */ .hw-side__balance-refresh, .hw-side__balance .hw-side__chev{margin-left:auto;flex:0 0 auto;} .hw-side__balance-refresh{width:16px;height:16px;color:var(--hw-gold);opacity:.7;} .hw-side__balance:hover .hw-side__balance-refresh{opacity:1;} /* Spinner takes the wallet icon's place, so the row never reflows mid-load. */ .hw-side__balance-spinner{ display:none; width:25px; height:25px; flex:0 0 auto; border:2px solid var(--hw-gold-line); border-top-color:var(--hw-gold); border-radius:50%; animation:hw-side-spin .7s linear infinite; } .hw-side__balance.is-loading{cursor:progress;} .hw-side__balance.is-loading .hw-side__balance-icon{display:none;} .hw-side__balance.is-loading .hw-side__balance-spinner{display:block;} .hw-side__balance.is-loading .hw-side__balance-value{opacity:.55;} .hw-side__balance.is-loading .hw-side__balance-refresh{visibility:hidden;} @keyframes hw-side-spin{to{transform:rotate(360deg);}} /* -------------------------------------------------------------------------- 5. Navigation — the only scrolling region -------------------------------------------------------------------------- */ .hw-side__nav{ flex:1 1 auto; min-height:0; overflow-y:auto; -webkit-overflow-scrolling:touch; padding:8px 0; } .hw-side__nav .mobile-menu{display:flex;flex-direction:column;gap:5px;} .hw-side__nav .mobile-menu li{border:0;padding:0;margin:0;} .hw-side .hw-side__item{ display:flex; align-items:center; gap:14px; min-height:52px; padding:6px 20px; color:var(--hw-on-surface); transition:background .15s ease; } .hw-side .hw-side__item:hover, .hw-side .hw-side__item:focus-visible{background:var(--hw-side-tint);} .hw-side__tile{ flex:0 0 auto; width:40px;height:40px; display:flex;align-items:center;justify-content:center; background:var(--hw-side-tile); border-radius:8px; color:var(--hw-gold); } .hw-side__tile svg{width:22px;height:22px;display:block;} /* Icons render at their NATURAL size, centred in the 40px tile. The design uses two sizes deliberately — 30px for game categories, 19px for account rows — so forcing one size upscales the small ones and blurs them. Scoped through .hw-side purely for weight. style.css:2735 `.mobile-menu li a img{position:relative;top:-5px;height:30px;margin:0 auto}` is (0,1,3) and beat the unscoped `.hw-side__tile img` (0,1,1); this selector is (0,2,1) and takes it back. That legacy rule was doing two things here: `top:-5px` shunted every icon 5px above the tile's centre AFTER flexbox had centred it correctly, and `height:30px` upscaled the 19px account icons to 30px — the exact blurring this block exists to avoid. */ .hw-side .hw-side__tile img{ position:static; /* neutralises the inherited top:-5px */ width:auto;height:auto; max-width:30px;max-height:30px; object-fit:contain; display:block; margin:0; /* the tile is a flex box — it does the centring */ } .hw-side__text{ flex:1 1 auto; min-width:0; font-size:14px; font-weight:700; line-height:16px; } .hw-side__chev{ flex:0 0 auto; width:16px;height:16px; color:var(--hw-side-chev); } .hw-side__sep{ height:1px; background:var(--hw-side-hairline); margin:3px 0; display:none; /* Figma's first separator is display:none */ } .hw-side__sep--visible{display:block;} .hw-side__badge{ flex:0 0 auto; display:inline-flex;align-items:center; padding:2px 7px; background:var(--hw-live); border-radius:4px; font-size:9px; font-weight:800; line-height:11px; letter-spacing:.8px; color:#FFFFFF; } /* -------------------------------------------------------------------------- 6. Sign out -------------------------------------------------------------------------- */ .hw-side__foot{ flex:0 0 auto; padding:12px 0; border-top:1px solid var(--hw-side-hairline); } /* -------------------------------------------------------------------------- Accessibility -------------------------------------------------------------------------- */ .hw-side a:focus-visible, .hw-side [role="button"]:focus-visible{ outline:2px solid var(--hw-focus); outline-offset:-2px; } @media (prefers-reduced-motion:reduce){ .hw-side *{transition:none !important;} }