/* ===== ESAGAMES v2 auth — form column + illustrated dark island ===== */ html, body{ height:auto; } /* the login body carries data-action="esagames-enter" (header.tpl), which styles.css pins to max-height:100vh + overflow:hidden; this shell scrolls in normal flow, so both are released here */ :is(body.page-login, body.page-oauth-login, body.page-clientregister, body.page-password-reset-container){ overflow-x:hidden !important; overflow-y:auto !important; max-height:none !important; padding-top:0 !important; } :is(body.page-login, body.page-oauth-login, body.page-clientregister, body.page-password-reset-container) #main-body{ padding:0 !important; margin:0 !important; background:transparent !important; } /* esa26-chrome widens every inner page-container with !important at (1,3,1) — match it with the doubled class */ :is(body.page-login, body.page-oauth-login, body.page-clientregister, body.page-password-reset-container) #main-body > .page-container.page-container{ max-width:none !important; width:100% !important; padding:0 !important; margin:0 !important; } :is(body.page-login, body.page-oauth-login, body.page-clientregister, body.page-password-reset-container) #main-body > .page-container > .row{ margin:0 !important; } :is(body.page-login, body.page-oauth-login, body.page-clientregister, body.page-password-reset-container) #main-body > .page-container > .row > [class*="col-"]{ padding:0 !important; flex:0 0 100% !important; max-width:100% !important; } :is(body.page-login, body.page-oauth-login, body.page-clientregister, body.page-password-reset-container) #main-body .row > .col-lg-4.col-xl-3, :is(body.page-login, body.page-oauth-login, body.page-clientregister, body.page-password-reset-container) #main-body .row > div:has(> .sidebar){ display:none !important; } :is(body.page-login, body.page-oauth-login, body.page-clientregister, body.page-password-reset-container) .page-header, :is(body.page-login, body.page-oauth-login, body.page-clientregister, body.page-password-reset-container) #navbar, :is(body.page-login, body.page-oauth-login, body.page-clientregister, body.page-password-reset-container) .site-header, :is(body.page-login, body.page-oauth-login, body.page-clientregister, body.page-password-reset-container) .page-footer, :is(body.page-login, body.page-oauth-login, body.page-clientregister, body.page-password-reset-container) footer.footer{ display:none !important; } /* shell: two columns; the form column follows the theme, the island is always dark */ .esa-auth{ --isl-bg:#0e151d; --isl-ink:#ece7df; --isl-mute:#c9c3b9; --isl-dim:#a49e95; --isl-line:rgba(236, 231, 223, .10); --isl-line-2:rgba(236, 231, 223, .18); --radius:12px; --field-h:48px; display:flex; align-items:stretch; width:100%; min-height:100vh; min-width:0; font-family:'Inter',system-ui,-apple-system,sans-serif; color:var(--esa26c-ink); background:var(--esa26c-bg); } /* dark theme: the form column sits one step above the island (bg-2 next to bg) so the two bands read apart */ html[data-theme="dark"] .esa-auth{ background:var(--esa26c-bg-2); } /* ---- form column ---- */ .esa-auth-main{ flex:1 1 50%; min-width:0; display:flex; align-items:center; justify-content:center; padding:48px 40px; } .esa-auth-inner{ width:100%; max-width:440px; animation:esaAuthRise 400ms ease-out both; } @keyframes esaAuthRise{ from{ opacity:0; } to{ opacity:1; } } /* V2 fix — no transform: a filled transform makes .esa-auth-inner a containing block and traps the fixed reCAPTCHA badge inside the form */ .esa-auth-brand{ display:inline-flex; margin:0 0 28px; } .esa-auth-brand img{ height:36px; width:auto; } .esa-logo-light{ display:none; } html[data-theme="dark"] .esa-auth .esa-logo-dark{ display:block; } html[data-theme="dark"] .esa-auth .esa-logo-light{ display:none; } html[data-theme="light"] .esa-auth .esa-logo-dark{ display:none; } html[data-theme="light"] .esa-auth .esa-logo-light{ display:block; } .esa-auth-head{ margin:0 0 24px; } .esa-auth-head h1{ margin:0 0 8px; font-size:clamp(26px, 2.6vw, 30px); line-height:1.15; font-weight:700; letter-spacing:-.02em; color:var(--esa26c-ink); } .esa-auth-head p{ margin:0; color:var(--esa26c-ink-mute); font-size:15px; line-height:1.5; } .esa-auth .w-hidden, .esa-auth .hidden{ display:none !important; } /* fields (spec §5 Input) */ .esa-field{ margin:0 0 16px; } .esa-auth .esa-lbl, .esa-field > label, .esa-field-top > label{ display:block; margin:0 0 6px; font-size:13px; font-weight:600; line-height:1.3; color:var(--esa26c-ink); } .esa-field-top{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; } .esa-input-wrap{ display:flex; align-items:center; min-height:var(--field-h); border:1px solid var(--esa26c-field-line); border-radius:var(--radius); background:var(--esa26c-field); transition:border-color 160ms ease-out, box-shadow 160ms ease-out; } .esa-input-wrap:hover{ border-color:var(--esa26c-ink-dim); } .esa-input-wrap:focus-within{ border-color:var(--brand-text); box-shadow:0 0 0 3px rgba(var(--brand-rgb), .25); } .esa-input-wrap .esa-ic, .esa-input-wrap .field-icon{ flex:none; width:44px; margin:0 !important; position:static !important; display:grid; place-items:center; color:var(--esa26c-ink-dim); font-size:17px; line-height:1; transition:color 160ms ease-out; pointer-events:none; } .esa-input-wrap:focus-within .esa-ic, .esa-input-wrap:focus-within .field-icon{ color:var(--brand-text); } .esa-input-wrap .field-icon + .field-icon{ display:none; } /* WHMCS emits two icon labels for the state field */ .esa-auth .esa-input, .esa-input-wrap > .field, .esa-input-wrap > .form-control, .esa-input-wrap > select{ flex:1 1 auto; min-width:0; width:auto; min-height:calc(var(--field-h) - 2px); height:auto; margin:0; border:0 !important; background:transparent !important; box-shadow:none !important; outline:none; border-radius:0 !important; color:var(--esa26c-ink) !important; font-size:15px !important; font-weight:500 !important; line-height:1.3; padding:0 12px 0 0 !important; } .esa-auth .esa-input::placeholder, .esa-input-wrap > .field::placeholder, .esa-input-wrap > .form-control::placeholder{ color:var(--esa26c-ink-dim); font-weight:400; opacity:1; } .esa-auth input:-webkit-autofill, .esa-auth input:-webkit-autofill:hover, .esa-auth input:-webkit-autofill:focus, .esa-auth select:-webkit-autofill{ -webkit-text-fill-color:var(--esa26c-ink) !important; -webkit-box-shadow:0 0 0 1000px var(--esa26c-field) inset !important; box-shadow:0 0 0 1000px var(--esa26c-field) inset !important; caret-color:var(--esa26c-ink) !important; transition:background-color 9999s ease-in-out 0s; } .esa-auth select.esa-select, .esa-input-wrap > select{ appearance:none; -webkit-appearance:none; padding-right:36px !important; cursor:pointer; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23a49e95' stroke-width='2.5'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") !important; background-repeat:no-repeat !important; background-position:right 12px center !important; } html[data-theme="light"] .esa-auth select.esa-select, html[data-theme="light"] .esa-input-wrap > select{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%235f6675' stroke-width='2.5'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") !important; } .esa-auth select option{ background:var(--esa26c-surface); color:var(--esa26c-ink); } .esa-auth .esa-input-wrap:has(:disabled), .esa-auth .esa-input-wrap:has([readonly]){ opacity:.5; } .esa-password-toggle{ flex:none; width:44px; min-height:calc(var(--field-h) - 2px); border:0; background:transparent; color:var(--esa26c-ink-dim); font-size:18px; line-height:1; cursor:pointer; display:grid; place-items:center; border-radius:calc(var(--radius) - 3px); transition:color 160ms ease-out; } .esa-password-toggle:hover{ color:var(--esa26c-ink); } .esa-password-toggle:focus-visible{ outline:2px solid var(--brand-text); outline-offset:-4px; } /* validation states: WHMCS toggles .is-invalid / .is-warning / .is-valid on the input, Bootstrap 3 wraps in .has-error */ .esa-input-wrap:has(> .is-invalid), .has-error .esa-input-wrap, .esa-input-wrap.is-invalid{ border-color:var(--danger-text, var(--danger-bright)); } .esa-input-wrap:has(> .is-warning){ border-color:var(--warning-text, var(--warning-bright)); } .esa-input-wrap:has(> .is-valid){ border-color:var(--success-text, var(--success-bright)); } .esa-auth .has-error > label, .esa-auth .has-error .esa-lbl, .esa-auth .help-block, .esa-auth .form-text, .esa-auth .invalid-feedback{ color:var(--danger-text, var(--danger-bright)); font-size:12.5px; margin:6px 0 0; display:block; } /* alerts (flash messages, error lists, password feedback) — semantic pair + icon, never colour alone */ .esa-auth .alert{ position:relative; display:block; margin:0 0 16px; padding:12px 14px 12px 40px; border:1px solid; border-radius:var(--radius); font-size:14px; line-height:1.45; font-weight:500; text-align:left; background:transparent; } .esa-auth .alert::before{ content:""; position:absolute; left:14px; top:13px; width:18px; height:18px; background:currentColor; -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm-1 5h2v7h-2zm0 8h2v2h-2z'/%3E%3C/svg%3E") center/contain no-repeat; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm-1 5h2v7h-2zm0 8h2v2h-2z'/%3E%3C/svg%3E") center/contain no-repeat; } .esa-auth .alert strong{ font-weight:700; } .esa-auth .alert ul{ margin:6px 0 0; padding-left:18px; } .esa-auth .alert a, .esa-auth .alert .alert-link{ color:inherit; text-decoration:underline; } .esa-auth .alert-danger{ color:var(--danger-text, var(--danger-bright)); background:color-mix(in srgb, var(--danger-text, var(--danger-bright)) 10%, transparent); border-color:color-mix(in srgb, var(--danger-text, var(--danger-bright)) 35%, transparent); } .esa-auth .alert-success{ color:var(--success-text, var(--success-bright)); background:color-mix(in srgb, var(--success-text, var(--success-bright)) 10%, transparent); border-color:color-mix(in srgb, var(--success-text, var(--success-bright)) 35%, transparent); } .esa-auth .alert-warning{ color:var(--warning-text, var(--warning-bright)); background:color-mix(in srgb, var(--warning-text, var(--warning-bright)) 10%, transparent); border-color:color-mix(in srgb, var(--warning-text, var(--warning-bright)) 35%, transparent); } .esa-auth .alert-info{ color:var(--info-text, var(--accent)); background:color-mix(in srgb, var(--info-text, var(--accent)) 10%, transparent); border-color:color-mix(in srgb, var(--info-text, var(--accent)) 35%, transparent); } .esa-auth-errors:empty{ display:none; } /* captcha (WHMCS renders a Bootstrap .row + two col-6 — neutralise the negative margins and stack) */ .esa-captcha{ margin:0 0 16px; } .esa-captcha .input-group-addon, .esa-captcha .input-group-text{ display:none !important; } .esa-captcha p{ margin:0 0 10px; font-size:13px; color:var(--esa26c-ink-mute); text-align:left; } .esa-captcha .row{ margin-left:0 !important; margin-right:0 !important; } .esa-captcha [class*="col-"]{ flex:0 0 100% !important; max-width:100% !important; padding-left:0 !important; padding-right:0 !important; } .esa-captcha .captchaimage{ margin-bottom:10px; text-align:left; } .esa-captcha img{ border-radius:8px; max-width:100% !important; height:auto !important; } .esa-captcha input[type="text"], .esa-captcha .form-control{ width:100% !important; max-width:100% !important; min-height:var(--field-h) !important; border-radius:var(--radius) !important; background:var(--esa26c-field) !important; border:1px solid var(--esa26c-field-line) !important; color:var(--esa26c-ink) !important; padding:0 12px !important; box-shadow:none !important; font-size:15px !important; } .esa-captcha input[type="text"]:focus, .esa-captcha .form-control:focus{ border-color:var(--brand-text) !important; box-shadow:0 0 0 3px rgba(var(--brand-rgb), .25) !important; outline:none; } .esa-captcha .recaptcha-container{ margin:0; } /* checkbox rows, buttons, links */ .esa-check{ display:flex; align-items:flex-start; gap:10px; margin:0 0 20px; color:var(--esa26c-ink-mute); font-size:14px; font-weight:500; line-height:1.4; cursor:pointer; text-align:left; } .esa-check input{ flex:none; width:16px; height:16px; margin:2px 0 0; accent-color:var(--brand); } .esa-check input:focus-visible{ outline:2px solid var(--brand-text); outline-offset:2px; } .esa-actions{ margin:0 0 20px; } .esa-auth .esa-submit, .esa-auth .esa-submit.btn{ display:block; width:100%; min-height:50px; padding:0 18px; border:1px solid var(--brand) !important; border-radius:var(--radius) !important; cursor:pointer; background:var(--brand) !important; color:var(--brand-ink) !important; font-family:inherit; font-size:15px !important; font-weight:700 !important; letter-spacing:.01em; line-height:1.2; box-shadow:none !important; transition:background-color 160ms ease-out, border-color 160ms ease-out, transform 160ms ease-out, opacity 160ms ease-out; } .esa-auth .esa-submit:hover, .esa-auth .esa-submit.btn:hover{ background:var(--brand2) !important; border-color:var(--brand2) !important; color:var(--brand-ink) !important; } .esa-auth .esa-submit:active{ transform:scale(.98); } .esa-auth .esa-submit:focus-visible{ outline:2px solid var(--brand-text); outline-offset:2px; } .esa-auth .esa-submit:disabled, .esa-auth .esa-submit[disabled]{ opacity:.5; pointer-events:none; } .esa-auth .esa-ghost, .esa-auth .btn-default{ display:inline-flex; align-items:center; justify-content:center; min-height:40px; padding:0 14px; border:1px solid var(--esa26c-line-2) !important; border-radius:var(--radius) !important; background:transparent !important; color:var(--esa26c-ink) !important; font-size:13.5px !important; font-weight:600 !important; box-shadow:none !important; cursor:pointer; transition:color 160ms ease-out, border-color 160ms ease-out, transform 160ms ease-out; } .esa-auth .esa-ghost:hover, .esa-auth .btn-default:hover{ border-color:var(--esa26c-line-brand-hover) !important; color:var(--brand-text) !important; } .esa-auth .esa-ghost:active, .esa-auth .btn-default:active{ transform:scale(.98); } .esa-auth .esa-ghost:focus-visible, .esa-auth .btn-default:focus-visible{ outline:2px solid var(--brand-text); outline-offset:2px; } .esa-auth .esa-link, .esa-auth-foot a, .esa-auth-main a:not(.esa-auth-brand):not(.btn):not(.esa-submit){ color:var(--brand-text); font-weight:600; text-decoration:underline !important; text-decoration-color:transparent !important; text-underline-offset:3px; transition:text-decoration-color 150ms ease-out, color 160ms ease-out; } .esa-auth .esa-link:hover, .esa-auth-foot a:hover, .esa-auth-main a:not(.esa-auth-brand):not(.btn):not(.esa-submit):hover{ color:var(--brand-text); text-decoration-color:currentColor !important; } .esa-auth .esa-link:focus-visible, .esa-auth-foot a:focus-visible{ outline:2px solid var(--brand-text); outline-offset:2px; border-radius:3px; } .esa-auth .esa-link{ font-size:13px; } .esa-auth-foot{ margin:0; font-size:14px; color:var(--esa26c-ink-mute); text-align:center; } .esa-auth-foot a{ font-size:14px; } /* ---- illustrated island: always the dark set, in both themes (island rule from tokens-light.css, inlined) ---- */ .esa-auth-island{ --brand-text:var(--brand); --brand-display:var(--brand); --esa26c-ink:var(--isl-ink); --esa26c-ink-mute:var(--isl-mute); --esa26c-ink-dim:var(--isl-dim); --esa26c-line:var(--isl-line); --esa26c-line-2:var(--isl-line-2); --esa26c-surface:#1c2531; --esa26c-surface-2:#26303e; flex:1 1 50%; min-width:0; position:sticky; top:0; height:100vh; display:flex; align-items:center; justify-content:center; padding:56px 48px; background:var(--isl-bg); color:var(--isl-ink); border-left:1px solid var(--isl-line); text-align:center; } .esa-auth-island-inner{ width:100%; max-width:480px; } .esa-auth-island .esa26-illus-scene{ --il-top:#26303e; --il-left:#1c2531; --il-right:#141c27; --il-ink:#ece7df; --il-neutral:#c9c3b9; --il-delay:450ms; display:block; width:min(420px, 100%); height:auto; margin:0 auto 20px; } .esa-auth-lead{ margin:0 auto 14px; max-width:400px; font-size:17px; line-height:1.5; font-weight:600; color:var(--isl-ink); } .esa-auth-stats{ margin:0; font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size:13px; letter-spacing:.02em; color:var(--isl-mute); white-space:nowrap; } .esa-auth-stats b{ font-weight:700; color:var(--brand); } .esa-auth-stats .sep{ margin:0 8px; color:var(--isl-dim); } .esa-auth-steps{ display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:8px 6px; margin:0; padding:0; list-style:none; } .esa-auth-step{ display:inline-flex; align-items:center; gap:8px; font-size:13.5px; font-weight:600; color:var(--isl-mute); white-space:nowrap; } .esa-auth-step .n{ width:26px; height:26px; border-radius:50%; display:grid; place-items:center; border:1px solid var(--isl-line-2); font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size:12px; font-weight:700; color:var(--isl-dim); } .esa-auth-step.is-current{ color:var(--isl-ink); } .esa-auth-step.is-current .n{ background:var(--brand); border-color:var(--brand); color:var(--brand-ink); } .esa-auth-steps .arrow{ color:var(--isl-dim); font-size:14px; } /* ===== ≤992px: one column; the island collapses to a slim dark band above the form ===== */ @media (max-width:992px){ .esa-auth{ flex-direction:column; min-height:100vh; } .esa-auth-island{ order:-1; position:static; height:auto; flex:none; padding:22px 20px 18px; border-left:0; border-bottom:1px solid var(--isl-line); } .esa-auth-island .esa26-illus-scene{ width:auto; height:180px; margin-bottom:10px; } .esa-auth-lead{ font-size:14px; max-width:440px; margin-bottom:8px; } .esa-auth-stats{ font-size:12px; } .esa-auth-steps{ gap:6px 4px; } .esa-auth-step{ font-size:12.5px; gap:6px; } .esa-auth-step .n{ width:22px; height:22px; font-size:11px; } .esa-auth-main{ flex:1 0 auto; align-items:flex-start; padding:28px 20px 90px; } /* 90px clears the fixed reCAPTCHA badge (V2 QA D-1) */ .esa-auth-inner{ max-width:480px; margin:0 auto; } .esa-auth-brand{ margin-bottom:22px; } } @media (max-width:575px){ .esa-auth-main{ padding:24px 16px 90px; } .esa-auth-inner{ max-width:100%; } .esa-auth-brand img{ height:32px; } .esa-auth-head h1{ font-size:24px; } .esa-auth-island .esa26-illus-scene{ height:160px; } .esa-auth-stats{ white-space:normal; } /* 16px inputs so iOS Safari does not auto-zoom on focus */ .esa-auth .esa-input, .esa-input-wrap > .field, .esa-input-wrap > .form-control, .esa-input-wrap > select, .esa-captcha input[type="text"], .esa-captcha .form-control{ font-size:16px !important; } } @media (max-width:380px){ .esa-auth-main{ padding:20px 12px 90px; } .esa-auth-island{ padding:18px 14px 14px; } } @media (prefers-reduced-motion:reduce){ .esa-auth, .esa-auth *, .esa-auth *::before, .esa-auth *::after{ animation:none !important; transition:none !important; } .esa-auth-inner{ opacity:1; transform:none; } } /* ---- register: wider form (three address fields share one row), section rail on the left ---- */ #register-page .esa-auth-main{ align-items:flex-start; } #register-page .esa-auth-inner{ max-width:520px; } #register-page .esa-auth-head{ margin-bottom:28px; } .esa-reg-sections{ counter-reset:esa-step; } #register-page .card{ position:relative; margin:0 0 28px !important; padding:0 0 0 56px; background:transparent !important; border:0 !important; border-radius:0 !important; box-shadow:none !important; overflow:visible; counter-increment:esa-step; } #register-page .card::before{ content:""; position:absolute; left:17px; top:44px; bottom:6px; width:2px; border-radius:2px; background:var(--esa26c-line-2); } #register-page .card-body{ padding:0 !important; overflow:visible !important; max-height:none !important; } #register-page .card-title{ position:relative; margin:0 0 16px !important; padding:6px 0 0; font-size:17px !important; font-weight:700 !important; letter-spacing:-.01em; line-height:1.3; color:var(--esa26c-ink) !important; } #register-page .card-title::before{ content:counter(esa-step, decimal-leading-zero); position:absolute; left:-56px; top:0; width:36px; height:36px; border-radius:50%; display:grid; place-items:center; font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size:12px; font-weight:700; color:var(--brand-text); border:1px solid var(--esa26c-line-brand); background:var(--esa26c-bg); } html[data-theme="dark"] #register-page .card-title::before{ background:var(--esa26c-bg-2); } .esa-reg .card-title br{ display:none; } .esa-reg .card-title i{ font-style:normal; } .esa-reg .card-title small{ display:block; margin-top:4px; font-size:12.5px; font-weight:500; color:var(--esa26c-ink-dim) !important; } .esa-reg .row{ margin-left:-8px; margin-right:-8px; } .esa-reg .row > [class*="col-"]{ padding-left:8px; padding-right:8px; } .esa-reg .form-group{ margin:0 0 14px; } .esa-reg .form-group.esa-input-wrap{ margin-bottom:14px; } .esa-reg .form-group .control > .form-control, .esa-reg .form-group .control > select, .esa-reg .form-group .control > textarea, .esa-reg .form-group > select.form-control{ width:100%; min-height:var(--field-h); padding:0 12px; border:1px solid var(--esa26c-field-line) !important; border-radius:var(--radius) !important; background:var(--esa26c-field) !important; color:var(--esa26c-ink) !important; font-size:15px !important; font-weight:500 !important; box-shadow:none !important; transition:border-color 160ms ease-out, box-shadow 160ms ease-out; } .esa-reg .form-group .control > textarea{ padding:12px; min-height:96px; } .esa-reg .form-group .control > .form-control:hover, .esa-reg .form-group > select.form-control:hover{ border-color:var(--esa26c-ink-dim) !important; } .esa-reg .form-group .control > .form-control:focus, .esa-reg .form-group > select.form-control:focus{ border-color:var(--brand-text) !important; box-shadow:0 0 0 3px rgba(var(--brand-rgb), .25) !important; outline:none; } .esa-reg .field-help-text{ display:block; margin:6px 0 0; font-size:12.5px; color:var(--esa26c-ink-dim); } .esa-reg .clearfix{ display:none; } /* city / state / postcode share one row at 520px: WHMCS's 4/5/3 split leaves the postcode 60px of input — rebalance to 36/36/28 */ @media (min-width:576px){ #register-page .row > .col-sm-4, #register-page .row > .col-sm-5{ flex:0 0 34%; max-width:34%; } /* col-sm-4/5/3 occur only in this row */ #register-page .row > .col-sm-3{ flex:1 1 0; max-width:none; min-width:0; } /* fills the rest — three fixed percentages wrap on subpixel rounding */ } /* theme.min.css styles #registration .prepend-icon as an inline-block with an absolute icon (id specificity) — restate the flex group above it */ #registration .prepend-icon.esa-input-wrap{ display:flex; position:static; width:auto; top:auto; left:auto; } #registration .prepend-icon.esa-input-wrap .field-icon{ width:44px; height:auto; line-height:1; } #registration .esa-input-wrap > .field, #registration .esa-input-wrap > .form-control, #registration .esa-input-wrap > select{ display:block; width:auto; } #registration .esa-input-wrap:has(#inputPhone){ display:block; } /* phone: intl-tel-input wraps the input in .iti and paints the flag inside it, so this group is a plain block and the input carries the box */ .esa-reg .esa-input-wrap:has(#inputPhone){ display:block; border:0; background:transparent; box-shadow:none; } .esa-reg .esa-input-wrap:has(#inputPhone) > .field-icon{ display:none; } .esa-reg .iti{ display:block !important; width:100% !important; } .esa-reg #inputPhone, .esa-reg .esa-input-wrap:has(#inputPhone) > .field{ display:block; box-sizing:border-box; width:100% !important; min-height:var(--field-h) !important; border:1px solid var(--esa26c-field-line) !important; border-radius:var(--radius) !important; background:var(--esa26c-field) !important; padding:0 12px 0 92px !important; transition:border-color 160ms ease-out, box-shadow 160ms ease-out; } .esa-reg #inputPhone:hover{ border-color:var(--esa26c-ink-dim) !important; } .esa-reg #inputPhone:focus{ border-color:var(--brand-text) !important; box-shadow:0 0 0 3px rgba(var(--brand-rgb), .25) !important; } .esa-reg .iti__selected-flag, .esa-reg .selected-flag{ z-index:4 !important; pointer-events:auto !important; border-radius:var(--radius) 0 0 var(--radius); } .esa-reg .iti__arrow, .esa-reg .iti__arrow--up{ border-top-color:var(--esa26c-ink-mute); } .esa-reg .iti__country-list, .esa-reg .country-list{ background:var(--esa26c-surface) !important; color:var(--esa26c-ink) !important; border:1px solid var(--esa26c-line-2) !important; border-radius:var(--radius) !important; box-shadow:0 8px 24px rgba(0, 0, 0, .35) !important; } html[data-theme="light"] .esa-reg .iti__country-list, html[data-theme="light"] .esa-reg .country-list{ box-shadow:0 8px 24px rgba(15, 20, 30, .08) !important; } .esa-reg .iti__country:hover, .esa-reg .country:hover, .esa-reg .iti__country.iti__highlight, .esa-reg .country.highlight{ background:var(--esa26c-surface-2) !important; } .esa-reg .iti__dial-code, .esa-reg .dial-code{ color:var(--esa26c-ink-mute) !important; } .esa-reg .iti__divider{ border-color:var(--esa26c-line) !important; } /* social sign-up divider (linkedaccounts.tpl) */ .esa-reg .sub-heading{ display:flex; align-items:center; gap:12px; margin:0 0 16px; font-size:11.5px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--esa26c-ink-dim); } .esa-reg .sub-heading::before, .esa-reg .sub-heading::after{ content:""; flex:1; height:1px; background:var(--esa26c-line-2); } .esa-reg .social-signin-btns{ display:flex; flex-wrap:wrap; gap:10px; margin:0 0 24px; } .esa-reg .providerLinkingFeedback:empty{ display:none; } /* password strength (PasswordStrength.js toggles bg-danger / bg-warning / bg-success on the bar) */ .esa-reg .generate-password{ width:100%; } .esa-reg .password-strength-meter{ padding-top:4px; margin-bottom:10px; } .esa-reg .password-strength-meter .progress{ height:6px; margin:11px 0 8px; border:0; border-radius:999px; background:var(--esa26c-line-2); overflow:hidden; box-shadow:none; } .esa-reg .progress-bar{ border-radius:999px; background-image:none !important; transition:width 160ms ease-out, background-color 160ms ease-out; } .esa-reg .progress-bar.bg-danger{ background-color:var(--danger-text, var(--danger-bright)) !important; } .esa-reg .progress-bar.bg-warning{ background-color:var(--warning-text, var(--warning-bright)) !important; } .esa-reg .progress-bar.bg-success{ background-color:var(--success-text, var(--success-bright)) !important; } #register-page #passwordStrengthTextLabel{ margin:0; text-align:left !important; font-size:12.5px; font-weight:500; text-transform:none; letter-spacing:0; color:var(--esa26c-ink-dim) !important; } .esa-reg #passwdFeedback{ flex:0 0 100%; max-width:100%; margin:0 8px 14px; } /* marketing opt-in, terms, submit */ .esa-reg .esa-optin{ display:flex; align-items:flex-start; gap:12px; } .esa-reg .esa-optin .esa-optin-text{ margin:0; font-size:14px; line-height:1.5; color:var(--esa26c-ink-mute); } .esa-reg .esa-optin input[type="checkbox"]{ flex:none; width:16px; height:16px; margin:3px 0 0; accent-color:var(--brand); } .esa-reg .esa-optin input[type="checkbox"]:focus-visible{ outline:2px solid var(--brand-text); outline-offset:2px; } .esa-reg .esa-tos{ margin:0 0 20px; } .esa-reg .esa-tos .form-check{ display:flex; align-items:flex-start; gap:10px; padding:0; margin:0; font-size:14px; line-height:1.45; color:var(--esa26c-ink-mute); cursor:pointer; } .esa-reg .esa-tos .form-check-input{ position:static; flex:none; width:16px; height:16px; margin:3px 0 0; accent-color:var(--brand); } .esa-reg .esa-tos .form-check-input:focus-visible{ outline:2px solid var(--brand-text); outline-offset:2px; } .esa-reg .esa-actions{ margin-bottom:18px; } @media (max-width:575px){ #register-page .card{ padding-left:0; } #register-page .card::before{ display:none; } #register-page .card-title{ padding-left:46px; min-height:36px; } #register-page .card-title::before{ left:0; } .esa-reg .row > [class*="col-sm-"]{ flex:0 0 100% !important; max-width:100% !important; } /* Bootstrap col-sm stays 50% below 768 */ .esa-reg #inputPhone{ padding-left:88px !important; } } /* the container's card is a plain wrapper while this shell is inside it (the shell IS the page) */ .pwreset-wrap:has(> .pwreset-card > #pwreset-page){ display:block; padding:0; min-height:0; } .pwreset-card:has(> #pwreset-page){ background:transparent; border:0; border-radius:0; padding:0; max-width:none; box-shadow:none; } .esa-auth-foot-sep{ margin:0 6px; color:var(--esa26c-ink-dim); } /* ===== ESAGAMES v2 password reset — card steps (security question, new password, success) ===== */ .pwreset-wrap{ display:flex; flex-direction:column; align-items:center; min-height:100vh; padding:48px 16px; font-family:'Inter',system-ui,-apple-system,sans-serif; } .pwreset-brand{ display:inline-flex; margin:0 0 24px; } .pwreset-brand img{ height:36px; width:auto; } .pwreset-brand .esa-logo-light{ display:none; } html[data-theme="light"] .pwreset-brand .esa-logo-dark{ display:none; } html[data-theme="light"] .pwreset-brand .esa-logo-light{ display:block; } .pwreset-card{ width:100%; max-width:460px; padding:32px; background:var(--esa26c-surface); border:1px solid var(--esa26c-line); border-radius:16px; box-shadow:none; color:var(--esa26c-ink); } .pwreset-card > p, .pwreset-card form > p{ margin:0 0 18px; color:var(--esa26c-ink-mute); font-size:15px; line-height:1.5; } .pwreset-card label, .pwreset-card .control-label{ display:block; margin:0 0 6px; font-size:13px; font-weight:600; color:var(--esa26c-ink); } .pwreset-card .form-group{ margin:0 0 16px; } .pwreset-card .form-control{ width:100%; min-height:48px; padding:0 12px; border:1px solid var(--esa26c-field-line) !important; border-radius:12px !important; background:var(--esa26c-field) !important; color:var(--esa26c-ink) !important; font-size:15px; font-weight:500; box-shadow:none !important; transition:border-color 160ms ease-out, box-shadow 160ms ease-out; } .pwreset-card .form-control:hover{ border-color:var(--esa26c-ink-dim) !important; } .pwreset-card .form-control:focus{ border-color:var(--brand-text) !important; box-shadow:0 0 0 3px rgba(var(--brand-rgb), .25) !important; outline:none; } .pwreset-card .form-control.is-invalid{ border-color:var(--danger-text, var(--danger-bright)) !important; } .pwreset-card .form-control.is-valid{ border-color:var(--success-text, var(--success-bright)) !important; } .pwreset-card .form-text, .pwreset-card .text-muted{ color:var(--danger-text, var(--danger-bright)) !important; font-size:12.5px; margin:6px 0 0; } .pwreset-card .progress{ height:6px; margin:6px 0 12px; border:0; border-radius:999px; background:var(--esa26c-line-2); overflow:hidden; box-shadow:none; } .pwreset-card .progress-bar{ border-radius:999px; background:var(--success-text, var(--success-bright)); transition:width 160ms ease-out, background-color 160ms ease-out; } .pwreset-card .progress-bar.bg-danger{ background:var(--danger-text, var(--danger-bright)) !important; } .pwreset-card .progress-bar.bg-warning{ background:var(--warning-text, var(--warning-bright)) !important; } .pwreset-card .progress-bar.bg-success{ background:var(--success-text, var(--success-bright)) !important; } .pwreset-card .alert{ margin:0 0 16px; padding:12px 14px; border:1px solid; border-radius:12px; font-size:14px; line-height:1.45; font-weight:500; background:transparent; } .pwreset-card .alert-danger{ color:var(--danger-text, var(--danger-bright)); background:color-mix(in srgb, var(--danger-text, var(--danger-bright)) 10%, transparent); border-color:color-mix(in srgb, var(--danger-text, var(--danger-bright)) 35%, transparent); } .pwreset-card .alert-success{ color:var(--success-text, var(--success-bright)); background:color-mix(in srgb, var(--success-text, var(--success-bright)) 10%, transparent); border-color:color-mix(in srgb, var(--success-text, var(--success-bright)) 35%, transparent); } .pwreset-card .alert-info{ color:var(--info-text, var(--accent)); background:color-mix(in srgb, var(--info-text, var(--accent)) 10%, transparent); border-color:color-mix(in srgb, var(--info-text, var(--accent)) 35%, transparent); } .pwreset-card .btn{ min-height:44px; padding:0 18px; border-radius:12px !important; font-size:14px !important; font-weight:700 !important; box-shadow:none !important; transition:background-color 160ms ease-out, border-color 160ms ease-out, color 160ms ease-out, transform 160ms ease-out; } .pwreset-card .btn:active{ transform:scale(.98); } .pwreset-card .btn:focus-visible{ outline:2px solid var(--brand-text); outline-offset:2px; } .pwreset-card .btn-primary{ background:var(--brand) !important; border:1px solid var(--brand) !important; color:var(--brand-ink) !important; } .pwreset-card .btn-primary:hover{ background:var(--brand2) !important; border-color:var(--brand2) !important; } .pwreset-card .btn-primary:disabled, .pwreset-card .btn-primary[disabled]{ opacity:.5; pointer-events:none; } .pwreset-card .btn-default{ background:transparent !important; border:1px solid var(--esa26c-line-2) !important; color:var(--esa26c-ink) !important; } .pwreset-card .btn-default:hover{ border-color:var(--esa26c-line-brand-hover) !important; color:var(--brand-text) !important; } .pwreset-card .text-center .btn + .btn{ margin-left:8px; } .pwreset-foot{ margin:18px 0 0; font-size:14px; color:var(--esa26c-ink-mute); } .pwreset-foot a{ color:var(--brand-text); font-weight:600; text-decoration:underline !important; text-decoration-color:transparent !important; text-underline-offset:3px; transition:text-decoration-color 150ms ease-out; } .pwreset-foot a:hover{ text-decoration-color:currentColor !important; } /* the email step renders its own two-column shell inside this card — then the wrapper and card must get out of the way */ .pwreset-wrap:has(#pwreset-page){ display:block; padding:0; min-height:0; } .pwreset-wrap:has(#pwreset-page) > .pwreset-brand, .pwreset-wrap:has(#pwreset-page) > .pwreset-foot{ display:none; } .pwreset-card:has(> #pwreset-page){ background:transparent; border:0; border-radius:0; padding:0; max-width:none; } @media (max-width:540px){ .pwreset-wrap{ padding:32px 12px; } .pwreset-card{ padding:24px 18px; } } @media (prefers-reduced-motion:reduce){ .pwreset-card *{ transition:none !important; } } /* =================================================================== R190-AUTH — THE CHEVRON ON A SELECT INSIDE A FIELD WRAPPER. The box reset (transparent fill, no border, no radius, no shadow) now lives once, in esa26-chrome.css R189, which reaches (0,7,2) for `.esa-input-wrap select` and so beats the (0,7,1) !important global field rule on its own. Nothing here repeats it — two rules fighting over the same declarations is how the shorthand bug got in. What is left is only what R189 must NOT do: