/* ========================================================================== BeBiWo — auth pages (login / register / forgot / reset / mail-otp / unusual-login) Purpose: make the auth pages look like the landing page. The old theme CSS painted them magenta (#972197 -> #CC42BD) with pink artwork; this sheet repaints them in the landing palette (deep purple page, white card, red #E10113 primary action) and fixes the responsiveness problems: 60px card padding at every width, 150px minimum button width, a side-by-side footer/social row, and sub-16px inputs. Scope: main/header.php renders , so each auth page has its own body class. :is() keeps that list in one place. Loaded last, after style.css / overrides.css / local.css / landing.css; the --bw-* tokens come from landing.css (:root). ========================================================================== */ :root { --bw-auth-radius: 24px; --bw-auth-shadow: 0 30px 70px -28px rgba(12, 4, 28, .75); } /* ---------- Page frame ---------- */ :is(body.login-page, body.register-page, body.forgot-page, body.reset-page, body.mail-otp-page, body.unusual-login-page) { background: #2e1065; color: var(--bw-ink); min-height: 100vh; min-height: 100svh; overflow-x: hidden; } :is(body.login-page, body.register-page, body.forgot-page, body.reset-page, body.mail-otp-page, body.unusual-login-page) .dt_login_body_inner { background: radial-gradient(120% 80% at 50% -10%, rgba(168, 85, 247, .45) 0%, rgba(45, 16, 101, 0) 60%), linear-gradient(160deg, #2e1065 0%, #4c1d95 46%, #7c2a86 78%, #a21caf 100%) !important; min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; } /* the old pink banner artwork is not part of the new brand */ :is(body.login-page, body.register-page, body.forgot-page, body.reset-page, body.mail-otp-page, body.unusual-login-page) :is(.login_baner, .login_banner_mask, .login_banner_lines) { display: none !important; } /* ---------- Header ---------- */ :is(body.login-page, body.register-page, body.forgot-page, body.reset-page, body.mail-otp-page, body.unusual-login-page) :is(.dt_login_body_inner nav, body > nav) { background: transparent !important; box-shadow: none !important; position: relative; z-index: 3; } :is(body.login-page, body.register-page, body.forgot-page, body.reset-page, body.mail-otp-page, body.unusual-login-page) :is(.dt_login_body_inner nav, body > nav) .nav-wrapper { width: 100%; max-width: 1180px; margin: 0 auto; padding: 18px 20px; min-height: 0; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; background: transparent; box-shadow: none; position: static; top: auto; } :is(body.login-page, body.register-page, body.forgot-page, body.reset-page, body.mail-otp-page, body.unusual-login-page) .brand-logo img { width: auto; height: 30px; max-width: 150px; max-height: none; /* the old rule capped this at 40px and clipped the wordmark */ object-fit: contain; display: block; } :is(body.login-page, body.register-page, body.forgot-page, body.reset-page, body.mail-otp-page, body.unusual-login-page) ul.not_usr_nav { display: flex; align-items: center; gap: 10px; margin: 0; padding: 0; line-height: 1; } :is(body.login-page, body.register-page, body.forgot-page, body.reset-page, body.mail-otp-page, body.unusual-login-page) ul.not_usr_nav > li { margin: 0; } :is(body.login-page, body.register-page, body.forgot-page, body.reset-page, body.mail-otp-page, body.unusual-login-page) ul.not_usr_nav a, :is(body.login-page, body.register-page, body.forgot-page, body.reset-page, body.mail-otp-page, body.unusual-login-page) ul.not_usr_nav .dropdown-trigger { display: inline-flex; align-items: center; justify-content: center; min-height: 46px; padding: 0 20px; border-radius: 999px; font: 600 15px/1.2 var(--bw-font-head); text-transform: none; color: #fff !important; transition: background-color .15s ease, color .15s ease; } :is(body.login-page, body.register-page, body.forgot-page, body.reset-page, body.mail-otp-page, body.unusual-login-page) ul.not_usr_nav a:hover, :is(body.login-page, body.register-page, body.forgot-page, body.reset-page, body.mail-otp-page, body.unusual-login-page) ul.not_usr_nav .dropdown-trigger:hover { background: rgba(255, 255, 255, .14); } :is(body.login-page, body.register-page, body.forgot-page, body.reset-page, body.mail-otp-page, body.unusual-login-page) ul.not_usr_nav :is(a.btn.white, a.bold.white, .dropdown-trigger) { background: var(--bw-red) !important; color: #fff !important; box-shadow: 0 10px 26px rgba(159, 0, 17, .38); } :is(body.login-page, body.register-page, body.forgot-page, body.reset-page, body.mail-otp-page, body.unusual-login-page) ul.not_usr_nav :is(a.btn.white, a.bold.white):hover { background: var(--bw-red-hover) !important; } :is(body.login-page, body.register-page, body.forgot-page, body.reset-page, body.mail-otp-page, body.unusual-login-page) #log_in_dropdown { background: #fff; border-radius: 16px; overflow: hidden; box-shadow: var(--bw-auth-shadow); } :is(body.login-page, body.register-page, body.forgot-page, body.reset-page, body.mail-otp-page, body.unusual-login-page) #log_in_dropdown li > a { color: var(--bw-ink) !important; min-height: 46px; display: flex; align-items: center; padding: 0 20px; font: 600 15px/1.2 var(--bw-font-head); } /* ---------- Layout ---------- */ :is(body.login-page, body.register-page, body.forgot-page, body.reset-page, body.mail-otp-page, body.unusual-login-page) .container-fluid.auth_bg_img { background: transparent !important; flex: 1 0 auto; display: flex; align-items: flex-start; justify-content: center; padding: 8px 16px 40px; } :is(body.login-page, body.register-page, body.forgot-page, body.reset-page, body.mail-otp-page, body.unusual-login-page) .container.dt_login_bg { width: 100%; max-width: 520px; margin: 0 auto; padding: 0; float: none !important; } :is(body.login-page, body.register-page, body.forgot-page, body.reset-page, body.mail-otp-page, body.unusual-login-page) .dt_login_con { min-height: 0 !important; padding: 0 !important; display: block; } :is(body.login-page, body.register-page, body.forgot-page, body.reset-page, body.mail-otp-page, body.unusual-login-page) .dt_login_con > .section { padding: 8px 0 0 !important; margin: 0; } :is(body.login-page, body.register-page, body.forgot-page, body.reset-page, body.mail-otp-page, body.unusual-login-page) .dt_login_con:before, :is(body.login-page, body.register-page, body.forgot-page, body.reset-page, body.mail-otp-page, body.unusual-login-page) .dt_login_con:after { content: none !important; display: none !important; } /* ---------- Card ---------- */ :is(body.login-page, body.register-page, body.forgot-page, body.reset-page, body.mail-otp-page, body.unusual-login-page) .dt_login { max-width: 520px; width: 100%; margin: 0 auto; padding: 40px 36px 32px; background: #fff; border-radius: var(--bw-auth-radius); box-shadow: var(--bw-auth-shadow); position: relative; } :is(body.login-page, body.register-page, body.forgot-page, body.reset-page, body.mail-otp-page, body.unusual-login-page) .dt_login:before { content: none !important; } :is(body.login-page, body.register-page, body.forgot-page, body.reset-page, body.mail-otp-page, body.unusual-login-page) .dt_login .row { margin: 0 -6px; } :is(body.login-page, body.register-page, body.forgot-page, body.reset-page, body.mail-otp-page, body.unusual-login-page) .dt_login form { position: relative; } :is(body.login-page, body.register-page, body.forgot-page, body.reset-page, body.mail-otp-page, body.unusual-login-page) .dt_login form > p { color: var(--bw-ink); font: 400 1.05rem/1.6 var(--bw-font-body); margin: 0 0 22px; } :is(body.login-page, body.register-page, body.forgot-page, body.reset-page, body.mail-otp-page, body.unusual-login-page) .dt_login form > p :is(span.bold, strong) { font: 600 1.5rem/1.3 var(--bw-font-head); color: var(--bw-ink); display: block; margin-bottom: 6px; } /* ---------- Fields ---------- */ :is(body.login-page, body.register-page, body.forgot-page, body.reset-page, body.mail-otp-page, body.unusual-login-page) .dt_login .input-field, :is(body.login-page, body.register-page, body.forgot-page, body.reset-page, body.mail-otp-page, body.unusual-login-page) .dt_login .input-field.col { width: 100% !important; float: none !important; margin: 0 0 18px !important; min-width: 0; } :is(body.login-page, body.register-page, body.forgot-page, body.reset-page, body.mail-otp-page, body.unusual-login-page) .dt_login .input-field input:not([type="checkbox"]):not([type="radio"]):not([type="file"]), :is(body.login-page, body.register-page, body.forgot-page, body.reset-page, body.mail-otp-page, body.unusual-login-page) .dt_login .input-field .select-wrapper input, :is(body.login-page, body.register-page, body.forgot-page, body.reset-page, body.mail-otp-page, body.unusual-login-page) .dt_login input[type="submit"] { width: 100% !important; height: 54px; margin: 0; padding: 0 16px !important; background: #fff; border: 1px solid var(--bw-hairline); border-radius: 12px; box-shadow: none; color: var(--bw-ink); font: 500 16px/54px var(--bw-font-body); /* >=16px stops iOS zoom-on-focus */ -webkit-appearance: none; appearance: none; } :is(body.login-page, body.register-page, body.forgot-page, body.reset-page, body.mail-otp-page, body.unusual-login-page) .dt_login .input-field input:focus, :is(body.login-page, body.register-page, body.forgot-page, body.reset-page, body.mail-otp-page, body.unusual-login-page) .dt_login .input-field .select-wrapper input:focus { border-color: var(--bw-violet-600); box-shadow: 0 0 0 4px rgba(124, 58, 237, .16) !important; outline: none; } :is(body.login-page, body.register-page, body.forgot-page, body.reset-page, body.mail-otp-page, body.unusual-login-page) .dt_login .input-field input.invalid { border-color: #c81e1e; box-shadow: 0 0 0 4px rgba(200, 30, 30, .12) !important; } :is(body.login-page, body.register-page, body.forgot-page, body.reset-page, body.mail-otp-page, body.unusual-login-page) .dt_login .input-field input + label, :is(body.login-page, body.register-page, body.forgot-page, body.reset-page, body.mail-otp-page, body.unusual-login-page) .dt_login .input-field > label:not(.label-icon) { top: 0; left: 16px; right: auto; width: calc(100% - 32px); height: 54px; line-height: 54px; padding: 0 !important; color: var(--bw-ink-soft) !important; font: 500 15px/54px var(--bw-font-body); background: transparent !important; transform: none; transition: none; pointer-events: none; } /* float the label up only while the field has content or focus */ :is(body.login-page, body.register-page, body.forgot-page, body.reset-page, body.mail-otp-page, body.unusual-login-page) .dt_login .input-field input:focus + label, :is(body.login-page, body.register-page, body.forgot-page, body.reset-page, body.mail-otp-page, body.unusual-login-page) .dt_login .input-field input:not(:placeholder-shown) + label, :is(body.login-page, body.register-page, body.forgot-page, body.reset-page, body.mail-otp-page, body.unusual-login-page) .dt_login .input-field > label.active { transform: none; color: var(--bw-violet-700) !important; background: transparent !important; line-height: 16px; font-size: 12px; padding-top: 1px !important; } :is(body.login-page, body.register-page, body.forgot-page, body.reset-page, body.mail-otp-page, body.unusual-login-page) .dt_login .input-field .select-wrapper { width: 100%; } :is(body.login-page, body.register-page, body.forgot-page, body.reset-page, body.mail-otp-page, body.unusual-login-page) .dt_login .select-wrapper .select-arrow { right: 14px; width: 12px; height: 12px; } /* checkboxes: real tap target, readable label */ :is(body.login-page, body.register-page, body.forgot-page, body.reset-page, body.mail-otp-page, body.unusual-login-page) .dt_login input[type="checkbox"], :is(body.login-page, body.register-page, body.forgot-page, body.reset-page, body.mail-otp-page, body.unusual-login-page) .dt_login input[type="radio"] { width: 22px !important; height: 22px; margin: 0 10px 0 0; vertical-align: middle; } :is(body.login-page, body.register-page, body.forgot-page, body.reset-page, body.mail-otp-page, body.unusual-login-page) .dt_login :is(label, p, span):has(> input[type="checkbox"]) { font-size: 15px !important; line-height: 1.5; color: var(--bw-ink-soft); display: inline-flex; align-items: center; min-height: 44px; flex-wrap: wrap; } /* ---------- Primary action ---------- */ :is(body.login-page, body.register-page, body.forgot-page, body.reset-page, body.mail-otp-page, body.unusual-login-page) .dt_login :is(form button, .dt_login_footer .btn, .valign-wrapper .btn) { min-width: 100% !important; width: 100%; height: 54px !important; margin: 0; padding: 0 24px; background: var(--bw-red) !important; color: #fff !important; border: 0; border-radius: 999px; font: 600 16px/54px var(--bw-font-head) !important; text-transform: none !important; box-shadow: 0 14px 30px -12px rgba(159, 0, 17, .6) !important; transition: background-color .15s ease, transform .15s ease; } :is(body.login-page, body.register-page, body.forgot-page, body.reset-page, body.mail-otp-page, body.unusual-login-page) .dt_login :is(form button, .dt_login_footer .btn):hover { background: var(--bw-red-hover) !important; transform: translateY(-1px); } :is(body.login-page, body.register-page, body.forgot-page, body.reset-page, body.mail-otp-page, body.unusual-login-page) .dt_login :is(form button, .dt_login_footer .btn):active { transform: scale(.99); } :is(body.login-page, body.register-page, body.forgot-page, body.reset-page, body.mail-otp-page, body.unusual-login-page) .dt_login :is(form button, .dt_login_footer .btn):disabled { background: #b9b3bb !important; box-shadow: none !important; color: #fff !important; opacity: 1; } /* ---------- Footer row (button + helper link) ---------- */ :is(body.login-page, body.register-page, body.forgot-page, body.reset-page, body.mail-otp-page, body.unusual-login-page) .dt_login_footer { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; margin: 6px 0 4px; width: 100%; } :is(body.login-page, body.register-page, body.forgot-page, body.reset-page, body.mail-otp-page, body.unusual-login-page) .dt_login_footer > a { color: var(--bw-violet-700) !important; font: 600 15px/44px var(--bw-font-body) !important; min-height: 44px; display: inline-flex; align-items: center; padding: 0 6px; } :is(body.login-page, body.register-page, body.forgot-page, body.reset-page, body.mail-otp-page, body.unusual-login-page) .dt_login_footer > a:hover { color: var(--bw-red) !important; } /* ---------- Social login ---------- */ :is(body.login-page, body.register-page, body.forgot-page, body.reset-page, body.mail-otp-page, body.unusual-login-page) .dt_social_login { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 22px; width: 100%; } :is(body.login-page, body.register-page, body.forgot-page, body.reset-page, body.mail-otp-page, body.unusual-login-page) .dt_social_login .btn_social { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: auto; min-height: 50px; padding: 12px 16px; border: 1px solid var(--bw-hairline); border-radius: 999px; background: #fff; color: var(--bw-ink-soft) !important; font: 600 14px/1.35 var(--bw-font-body); text-align: center; white-space: normal; overflow: visible; box-shadow: none; transition: border-color .15s ease, color .15s ease, background-color .15s ease; } :is(body.login-page, body.register-page, body.forgot-page, body.reset-page, body.mail-otp-page, body.unusual-login-page) .dt_social_login .btn_social:hover { border-color: var(--bw-violet-600); color: var(--bw-violet-700) !important; background: var(--bw-paper-alt); } :is(body.login-page, body.register-page, body.forgot-page, body.reset-page, body.mail-otp-page, body.unusual-login-page) .dt_social_login .btn_social svg { width: 20px; height: 20px; flex: none; } /* ---------- Terms / misc copy ---------- */ :is(body.login-page, body.register-page, body.forgot-page, body.reset-page, body.mail-otp-page, body.unusual-login-page) .dt_login form.register .terms_check { margin-bottom: 22px; } :is(body.login-page, body.register-page, body.forgot-page, body.reset-page, body.mail-otp-page, body.unusual-login-page) .dt_login :is(form.register .terms_check a, form > p a) { color: var(--bw-red) !important; font-weight: 600; } :is(body.login-page, body.register-page, body.forgot-page, body.reset-page, body.mail-otp-page, body.unusual-login-page) .dt_login .alert { border-radius: 12px; font-size: 15px; } /* ---------- Page footer (links on a purple background) ---------- */ :is(body.login-page, body.register-page, body.forgot-page, body.reset-page, body.mail-otp-page, body.unusual-login-page) :is(.page_footer, .dt_auth_footr_page) { background: transparent; padding: 0 16px 28px; text-align: center; } :is(body.login-page, body.register-page, body.forgot-page, body.reset-page, body.mail-otp-page, body.unusual-login-page) :is(.page_footer, .dt_auth_footr_page) p { color: rgba(255, 255, 255, .84); font-size: 14px; line-height: 1.6; margin: 0 0 10px; } :is(body.login-page, body.register-page, body.forgot-page, body.reset-page, body.mail-otp-page, body.unusual-login-page) :is(.page_footer, .dt_auth_footr_page) a { color: #fff; display: inline-flex; align-items: center; min-height: 44px; padding: 0 10px; font-size: 15px; text-decoration: underline; text-underline-offset: 3px; } :is(body.login-page, body.register-page, body.forgot-page, body.reset-page, body.mail-otp-page, body.unusual-login-page) :is(.page_footer, .dt_auth_footr_page) a:hover { color: var(--bw-pink-glow); } /* ---------- Signup steps / select dropdowns ---------- */ :is(body.login-page, body.register-page, body.forgot-page, body.reset-page, body.mail-otp-page, body.unusual-login-page) .dt_signup_steps { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; } :is(body.login-page, body.register-page, body.forgot-page, body.reset-page, body.mail-otp-page, body.unusual-login-page) .dt_signup_steps li { flex: 1 1 120px; min-width: 0; text-align: center; padding: 10px 8px; border-radius: 12px; background: var(--bw-paper-alt); color: var(--bw-ink-soft); font: 600 13px/1.4 var(--bw-font-body); } :is(body.login-page, body.register-page, body.forgot-page, body.reset-page, body.mail-otp-page, body.unusual-login-page) .dt_login ul.browser-default li::before { color: var(--bw-red) !important; } :is(body.login-page, body.register-page, body.forgot-page, body.reset-page, body.mail-otp-page, body.unusual-login-page) .dt_login ul.browser-default li { color: var(--bw-ink-soft); font-size: 15px; line-height: 1.6; margin-bottom: 10px; } /* ---------- Focus visibility ---------- */ :is(body.login-page, body.register-page, body.forgot-page, body.reset-page, body.mail-otp-page, body.unusual-login-page) a:focus-visible, :is(body.login-page, body.register-page, body.forgot-page, body.reset-page, body.mail-otp-page, body.unusual-login-page) button:focus-visible { outline: 3px solid #fff; outline-offset: 2px; border-radius: 6px; } :is(body.login-page, body.register-page, body.forgot-page, body.reset-page, body.mail-otp-page, body.unusual-login-page) .dt_login input:focus-visible { outline: none; } /* ========================================================================== Responsive ========================================================================== */ @media (max-width: 600px) { :is(body.login-page, body.register-page, body.forgot-page, body.reset-page, body.mail-otp-page, body.unusual-login-page) .container-fluid.auth_bg_img { padding: 4px 14px 28px; } :is(body.login-page, body.register-page, body.forgot-page, body.reset-page, body.mail-otp-page, body.unusual-login-page) .dt_login { padding: 30px 22px 24px; border-radius: 20px; } :is(body.login-page, body.register-page, body.forgot-page, body.reset-page, body.mail-otp-page, body.unusual-login-page) .dt_login form > p { font-size: 1rem; } :is(body.login-page, body.register-page, body.forgot-page, body.reset-page, body.mail-otp-page, body.unusual-login-page) .dt_login form > p :is(span.bold, strong) { font-size: 1.3rem; } } @media (max-width: 480px) { :is(body.login-page, body.register-page, body.forgot-page, body.reset-page, body.mail-otp-page, body.unusual-login-page) :is(.dt_login_body_inner nav, body > nav) .nav-wrapper { padding: 14px 16px; } :is(body.login-page, body.register-page, body.forgot-page, body.reset-page, body.mail-otp-page, body.unusual-login-page) .brand-logo img { height: 26px; } :is(body.login-page, body.register-page, body.forgot-page, body.reset-page, body.mail-otp-page, body.unusual-login-page) ul.not_usr_nav a { padding: 0 16px; font-size: 14px; } :is(body.login-page, body.register-page, body.forgot-page, body.reset-page, body.mail-otp-page, body.unusual-login-page) .dt_login { padding: 26px 18px 22px; } :is(body.login-page, body.register-page, body.forgot-page, body.reset-page, body.mail-otp-page, body.unusual-login-page) .dt_social_login { grid-template-columns: minmax(0, 1fr); } /* the action and its helper link each get a full row */ :is(body.login-page, body.register-page, body.forgot-page, body.reset-page, body.mail-otp-page, body.unusual-login-page) .dt_login_footer { flex-direction: column; align-items: stretch; } :is(body.login-page, body.register-page, body.forgot-page, body.reset-page, body.mail-otp-page, body.unusual-login-page) .dt_login_footer > a { justify-content: center; } } @media (max-width: 359px) { :is(body.login-page, body.register-page, body.forgot-page, body.reset-page, body.mail-otp-page, body.unusual-login-page) .dt_login { padding: 22px 14px 20px; } :is(body.login-page, body.register-page, body.forgot-page, body.reset-page, body.mail-otp-page, body.unusual-login-page) .dt_login :is(.input-field input, .input-field input + label) { height: 50px; line-height: 50px; } :is(body.login-page, body.register-page, body.forgot-page, body.reset-page, body.mail-otp-page, body.unusual-login-page) .dt_login :is(form button, .dt_login_footer .btn) { height: 50px !important; line-height: 50px !important; } :is(body.login-page, body.register-page, body.forgot-page, body.reset-page, body.mail-otp-page, body.unusual-login-page) ul.not_usr_nav a.btn-flat { display: none; } } /* short viewports (landscape phones) */ @media (max-height: 560px) { :is(body.login-page, body.register-page, body.forgot-page, body.reset-page, body.mail-otp-page, body.unusual-login-page) .container-fluid.auth_bg_img { padding-top: 0; } :is(body.login-page, body.register-page, body.forgot-page, body.reset-page, body.mail-otp-page, body.unusual-login-page) .dt_login { padding-top: 24px; padding-bottom: 20px; } } @media (prefers-reduced-motion: reduce) { :is(body.login-page, body.register-page, body.forgot-page, body.reset-page, body.mail-otp-page, body.unusual-login-page) *, :is(body.login-page, body.register-page, body.forgot-page, body.reset-page, body.mail-otp-page, body.unusual-login-page) *::before, :is(body.login-page, body.register-page, body.forgot-page, body.reset-page, body.mail-otp-page, body.unusual-login-page) *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } } @media print { :is(body.login-page, body.register-page, body.forgot-page, body.reset-page, body.mail-otp-page, body.unusual-login-page), :is(body.login-page, body.register-page, body.forgot-page, body.reset-page, body.mail-otp-page, body.unusual-login-page) .dt_login_body_inner { background: #fff !important; } :is(body.login-page, body.register-page, body.forgot-page, body.reset-page, body.mail-otp-page, body.unusual-login-page) .dt_login { box-shadow: none; border: 1px solid #ddd; } } /* ========================================================================== Tap targets found by tests/auth_audit.py ========================================================================== */ /* the header logo is a link: give it a real hit area, not just the image box */ :is(body.login-page, body.register-page, body.forgot-page, body.reset-page, body.mail-otp-page, body.unusual-login-page) a.brand-logo { display: inline-flex; align-items: center; min-width: 44px; min-height: 46px; padding: 4px 2px; } /* footer social icons (icon-only links in main/full-footer.php) */ :is(body.login-page, body.register-page, body.forgot-page, body.reset-page, body.mail-otp-page, body.unusual-login-page) .page_footer :is(.docial, .social) a { display: inline-flex; align-items: center; justify-content: center; min-width: 46px; min-height: 46px; border-radius: 50%; color: #fff; transition: background-color .15s ease, color .15s ease; } :is(body.login-page, body.register-page, body.forgot-page, body.reset-page, body.mail-otp-page, body.unusual-login-page) .page_footer :is(.docial, .social) a:hover { background: rgba(255, 255, 255, .14); color: var(--bw-pink-glow); } :is(body.login-page, body.register-page, body.forgot-page, body.reset-page, body.mail-otp-page, body.unusual-login-page) .page_footer :is(.docial, .social) svg { width: 20px; height: 20px; } /* the page title is an

(it used to be a styled ) / :is(body.login-page, body.register-page, body.forgot-page, body.reset-page, body.mail-otp-page, body.unusual-login-page) .dt_login .auth-h1 { display: block; margin: 0 0 6px; padding: 0; font: 700 30px/1.4 var(--bw-font-head) !important; color: var(--bw-ink) !important; } @media (max-width: 600px) { :is(body.login-page, body.register-page, body.forgot-page, body.reset-page, body.mail-otp-page, body.unusual-login-page) .dt_login .auth-h1 { font-size: 26px !important; } } / the old theme styled the terms copy #eee (for its dark panel) -> 1.1:1 on the white card / :is(body.login-page, body.register-page, body.forgot-page, body.reset-page, body.mail-otp-page, body.unusual-login-page) .dt_login .terms_check > span { color: var(--bw-ink-soft) !important; font-size: 15px !important; line-height: 1.55; } :is(body.login-page, body.register-page, body.forgot-page, body.reset-page, body.mail-otp-page, body.unusual-login-page) .dt_login .terms_check > span a { color: var(--bw-red) !important; font-weight: 600; } / the OAuth authorize modal is rendered outside .dt_login; keep it on brand too */ :is(body.login-page, body.register-page, body.forgot-page, body.reset-page, body.mail-otp-page, body.unusual-login-page) .modal-dialog :is(.btn_primary, .btn-flat.primary) { background: var(--bw-red) !important; color: #fff !important; border-radius: 999px; font: 600 15px/1 var(--bw-font-head); min-height: 44px; padding: 0 22px; } :is(body.login-page, body.register-page, body.forgot-page, body.reset-page, body.mail-otp-page, body.unusual-login-page) .modal-dialog .btn_primary:hover { background: var(--bw-red-hover) !important; }