/* ========================================================================== House of Winners — modals (shared) Every Bootstrap modal on the front end, skinned in one place. Why this file exists: the theme's modals are white-on-white by default, and each one that got restyled was being fixed individually — promotion.css for #promo-modal, rebate.css for #terms-modal — which meant every modal nobody had opened yet was still white. The four in footer.php (#language-modal, #gamebox-modal, #gameidbox-modal, #wechat-modal) appear on EVERY page and had no skin at all. Loaded via the $hwRedesignCss list in views/header.php, which is the front-end header only — the admin panel does not load these sheets, so nothing here can reach admin modals. Everything below is class-based (0,x,0). The per-modal rules in promotion.css / rebate.css are id-based (1,x,x) and therefore still win wherever they disagree, regardless of file order. This is the floor, not a replacement for them. ========================================================================== */ .modal-content{ background:var(--hw-surface,#121212); border:1px solid var(--hw-gold-line,#9F853F); border-radius:var(--hw-radius,5px); color:var(--hw-on-surface,#FEFEFE); } .modal-body{padding:30px;} /* Close button. The theme ships it near-black with a white text-shadow, which is invisible on a dark surface. */ .modal .close{ color:var(--hw-muted,#B3B3B3); opacity:1; text-shadow:none; } .modal .close:hover, .modal .close:focus{color:var(--hw-gold,#FACF5A);opacity:1;} /* THE white sheet. style.css:14745 gives .form-box a #fff background, a light drop shadow, a 575px cap and its own 2.2rem/4.4rem padding — it is the login/register form shell, reused inside modals for markup parity. Left alone it paints white over the whole modal body, and any text the redesign forces to white then disappears against it. .modal-body already supplies the inset, so the shell simply stops drawing. */ .modal .form-box, .modal .form-tab, .modal .tab-content, .modal .tab-pane{ background:transparent; box-shadow:none; max-width:none; padding:0; color:inherit; } /* Modal heading. The markup is

inside .nav-pills — a tab strip standing in for a title. The doubled-up selectors are deliberate. style.css:14758 styles this as `.form-tab .nav.nav-pills` (0,3,0) and `.form-tab .nav.nav-pills .nav-link` (0,4,0) — #333 text, an #ebebeb underline, 2rem type and .9rem/1rem padding. A plain `.modal .nav-pills .nav-link` is only (0,3,0) and loses to it, which left the title dark grey on a dark surface. Matching .form-tab in the selector takes it to (0,5,0). The shorter form is kept for any modal that is not wrapped in the form shell. */ .modal .nav-pills, .modal .form-tab .nav.nav-pills{ border-bottom:1px solid var(--hw-rule,#4D4E4C); color:var(--hw-gold,#FACF5A); /* Breathing room under the rule. Without it the first line of content sits directly against the underline. */ margin-bottom:22px; } .modal .nav-pills .nav-link, .modal .form-tab .nav.nav-pills .nav-link{ padding:0 0 14px; background:transparent; color:var(--hw-gold,#FACF5A); font-family:var(--hw-font); font-size:1.8rem; font-weight:700; letter-spacing:.02em; border-bottom:0; } /* Body copy. CKEditor and legacy markup carry inline colours authored for the old white modal, so descendants are forced rather than left to inherit. */ .modal .tab-content{ font-family:var(--hw-font); font-size:var(--hw-fs,1.4rem); line-height:1.6; color:var(--hw-on-surface,#FEFEFE); } .modal .tab-content p, .modal .tab-content li, .modal .tab-content span, .modal .tab-content td, .modal .tab-content th, .modal .tab-content h1, .modal .tab-content h2, .modal .tab-content h3, .modal .tab-content h4{color:var(--hw-on-surface,#FEFEFE);} .modal .tab-content a{color:var(--hw-gold,#FACF5A);} .modal .tab-content img{max-width:100%;height:auto;} /* -------------------------------------------------------------------------- Game modal (#gamebox-modal / #gameidbox-modal) home/gameAjax builds the body from legacy dashboard markup: a .card .card-dashboard per platform wrapping an with an icon and an

, optionally preceded by readonly credential inputs and an
. None of it was written for a dark surface: style.css:15821 .card-dashboard{background-color:#f9f9f9;border:.1rem solid #ebebeb} style.css:9522 .form-control{color:#777;background-color:#fafafa;border:1px solid #ebebeb} The cards rendered as white blocks, and .card-title inherited the modal's white text — so "Android" and "iOS" were white-on-white and invisible. -------------------------------------------------------------------------- */ .modal .card, .modal .card-dashboard{ margin-bottom:12px; background-color:rgba(255,255,255,.03); border:1px solid var(--hw-gold-line,#9F853F); border-top:1px solid var(--hw-gold-line,#9F853F); /* .card sets border-top alone */ border-radius:8px; overflow:hidden; transition:background .15s ease, border-color .15s ease; } .modal .card:hover, .modal .card-dashboard:hover{ background-color:rgba(250,207,90,.08); border-color:var(--hw-gold,#FACF5A); } /* The whole card is the link. Icon over label, centred — the legacy padding is asymmetric (4rem 2.8rem 2rem) and was built for a wider dashboard column. */ .modal .card-dashboard .card-body, .modal .card .card-body{ display:flex; flex-direction:column; align-items:center; gap:10px; padding:18px 16px; text-decoration:none; } .modal .card-body img{width:34px;height:auto;margin:0;} .modal .card-title, .modal .card-dashboard .card-title{ margin:0; color:var(--hw-gold,#FACF5A); font-family:var(--hw-font); font-size:1.5rem; font-weight:700; letter-spacing:.02em; } /* Credential fields — only rendered for a logged-in member, so this path is not visible logged out. */ .modal .form-group{margin-bottom:14px;} /* Not --hw-muted here. #8F8F8F is fine for the footer body copy it was picked for, but at 1.2rem uppercase on this surface it only reaches 5.8:1 and reads muddy. #B7B7B7 is the same grey the rebate modal's list copy uses (9.3:1). */ .modal .form-group label{ display:block; margin-bottom:6px; color:#B7B7B7; font-size:1.2rem; text-transform:uppercase; letter-spacing:.06em; } .modal .form-control{ background-color:rgba(255,255,255,.04); border:1px solid var(--hw-gold-line,#9F853F); border-radius:6px; color:var(--hw-on-surface,#FEFEFE); } .modal .form-control:focus{ background-color:rgba(255,255,255,.06); border-color:var(--hw-gold,#FACF5A); color:var(--hw-on-surface,#FEFEFE); box-shadow:none; } .modal hr{border-top:1px solid var(--hw-rule,#4D4E4C);margin:18px 0;} /* Tables inside modals — the redeem modal in member_claim_view2 uses one. Bootstrap draws the header underline in #dee2e6, which is a bright line on a dark surface, and style.css:10069 greys the header text to #999. */ .modal .table th, .modal .table td{border-color:rgba(255,255,255,.08);} .modal .table thead th{ border-bottom:1px solid var(--hw-rule,#4D4E4C); color:var(--hw-gold,#FACF5A); font-weight:700; } .modal .table td{color:var(--hw-on-surface,#FEFEFE);} /* The theme's outline button already uses a gold-ish #c96, so it survives the dark surface; this just aligns it with the redesign's gold and spacing. */ .modal .btn-outline-primary-2{ display:block; width:100%; margin:0 0 10px; border-color:var(--hw-gold-line,#9F853F); color:var(--hw-gold,#FACF5A); background:transparent; } .modal .btn-outline-primary-2:hover, .modal .btn-outline-primary-2:focus{ background:rgba(250,207,90,.08); border-color:var(--hw-gold,#FACF5A); color:var(--hw-gold,#FACF5A); } /* Scrim — the theme's default is a flat 50% black that reads washed out against a black page. */ .modal-backdrop.show{opacity:.72;}