/* ============================================================================ HUTSY ONBOARD — UI v3.0 ---------------------------------------------------------------------------- Palette is unchanged from v2.6.2 (#03A9F5 on dark). What changed is geometry, structure and motion. Rules this file holds to: 1. ONE field height (--hx-h), ONE radius (--hx-r), ONE horizontal pad. Every input on every screen is pixel-identical. 2. Floating labels are positioned against the INPUT box, never against the label wrapper. No magic offsets — see the "fields" section. 3. Focus is COLOURLESS. No blue ring anywhere. Focus reads as a neutral #333 border plus a one-shot hairline sweep, so it is still clearly visible. 4. Everything is namespaced under .hx-onb and pinned with !important where Elementor / theme CSS is known to bite. 5. All motion is gated behind prefers-reduced-motion at the bottom. ========================================================================== */ /* ── fonts ──────────────────────────────────────────────────────────────── v3.0 FIX: the plugin has always shipped four self-hosted Poppins files under assets/fonts/ — added because the site's optimizer strips Google Fonts — but nothing ever declared them. Every rule asked for 'Poppins' and silently fell through to the system sans on any site whose theme didn't happen to load it. These four declarations are what make the bundled files do their job. Paths are relative to this stylesheet. */ @font-face { font-family: 'Poppins'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/poppins-400.woff2') format('woff2'); } @font-face { font-family: 'Poppins'; font-style: normal; font-weight: 500; font-display: swap; src: url('fonts/poppins-500.woff2') format('woff2'); } @font-face { font-family: 'Poppins'; font-style: normal; font-weight: 600; font-display: swap; src: url('fonts/poppins-600.woff2') format('woff2'); } @font-face { font-family: 'Poppins'; font-style: normal; font-weight: 700; font-display: swap; src: url('fonts/poppins-700.woff2') format('woff2'); } /* ── tokens ─────────────────────────────────────────────────────────────── On :root, not .hx-onb — the toast and the intl-tel-input dropdown are both portalled to and would otherwise fall outside the scope. */ :root { --hx-blue: #03A9F5; --hx-blue-hi: #38bdf8; --hx-blue-wash: rgba(3, 169, 245, .14); --hx-card: #111111; --hx-raise: #1c1c1f; --hx-sunk: #151517; --hx-field: #222222; --hx-lift: #262629; --hx-line: #2b2b2b; /* resting border */ --hx-focus: #333333; /* focus border — neutral by request */ --hx-pill: #333333; /* floated-label pill */ --hx-text: #f9fafb; --hx-muted: #9ca3af; --hx-faint: #6b7280; --hx-ok: #22c55e; --hx-bad: #ff6b6b; --hx-h: 52px; /* the one field height — unchanged by the font-size switch */ --hx-r: 3px; /* the one radius */ --hx-pad: 14px; /* the one horizontal pad */ /* Input text size. 16px is the mobile floor, not a style choice: iOS Safari zooms the viewport on focus for anything under 16px and never zooms back out. Desktop has no such constraint, so it steps down — see the media query below. The field height is fixed and vertical padding is zero, so changing this does not move the box by a pixel. */ --hx-input-fs: 16px; --hx-float-fs: 10.5px; /* the floated pill */ --hx-spring: cubic-bezier(.22, 1.36, .36, 1); --hx-ease: cubic-bezier(.65, 0, .35, 1); --hx-out: cubic-bezier(.22, 1, .36, 1); } /* Desktop only. Deliberately NOT a plain min-width query: a large phone in landscape clears 768px, and dropping to 13px there would reintroduce the iOS zoom-on-focus this is avoiding. hover + fine pointer means a mouse, which means no zoom behaviour to protect against. */ @media (min-width: 768px) and (hover: hover) and (pointer: fine) { :root { --hx-input-fs: 13px; --hx-float-fs: 10px; } } /* ── shell ─────────────────────────────────────────────────────────────── */ .hx-onb { max-width: 460px; margin: 0 auto; padding: 8px 0 30px; font-family: 'Poppins', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important; color: var(--hx-text); } /* form controls do NOT inherit font-family — pin it explicitly */ .hx-onb input, .hx-onb button, .hx-onb select, .hx-onb textarea { font-family: 'Poppins', -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important; } .hx-onb *, .hx-onb *::before, .hx-onb *::after { box-sizing: border-box !important; } .hx-onb [hidden] { display: none !important; } .hx-card { background: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; padding: 0 !important; } /* v3.0: every step is a card. The benefits + done screens already were; auth sat bare on the page, which is what made the login screen read as unfinished. */ /* Steps sit directly on the page background, the way they did before v3.0. Only the two "read this" screens — membership and the final summary — get a card, because those are blocks of content to absorb rather than a form to fill in. NB: no overflow:hidden anywhere here. The intl-tel-input country dropdown renders inside the panel, and clipping would cut the country list off. */ .hx-onb .hx-panel { background: transparent; padding: 0; position: relative; } .hx-onb [data-panel="loading"] { text-align: center; color: var(--hx-muted); } .hx-onb [data-panel="4"] { text-align: center; } /* the carded screen — benefits keeps its background on the LIST only, so the step itself sits flat on the page like every other step */ .hx-onb .hx-done-card { background: var(--hx-card) !important; border: 0 !important; border-radius: 15px !important; padding: 30px 26px !important; } @media (max-width: 480px) { .hx-onb .hx-done-card { padding: 26px 18px !important; border-radius: 13px !important; } } /* ── progress ──────────────────────────────────────────────────────────── */ .hx-progress { width: 100%; background: var(--hx-line); height: 3px; border-radius: 4px; overflow: hidden; margin: 0 0 18px; position: relative; } .hx-progress-fill { height: 100%; width: 10%; background: var(--hx-blue); border-radius: 4px; position: relative; overflow: hidden; transition: width .55s var(--hx-out); } /* a slow sheen travels the filled portion — "still moving" without a spinner */ .hx-progress-fill::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(90deg, transparent, rgba(255,255,255,.45), transparent); transform: translateX(-100%); animation: hxSheen 2.6s var(--hx-ease) infinite; } @keyframes hxSheen { 0% { transform: translateX(-100%); } 60%, 100% { transform: translateX(200%); } } /* ── type ──────────────────────────────────────────────────────────────── */ .hx-onb h3 { margin: 0 0 8px !important; padding: 0 !important; font-size: 20px !important; font-weight: 600 !important; color: var(--hx-text) !important; line-height: 1.3 !important; text-align: center !important; letter-spacing: -.015em; } .hx-onb .hx-sub { margin: 0 0 22px !important; color: var(--hx-muted) !important; font-size: 13.5px !important; line-height: 1.6 !important; text-align: center !important; } .hx-onb .hx-sub b { color: var(--hx-text); font-weight: 600; } .hx-otp-note { font-size: 13.5px !important; color: #cbd5e1 !important; margin: 0 0 14px !important; } /* ── the bubble mark (signature) ─────────────────────────────────────────── Same motif as the OTP icon and the step badges: Hutsy lives in a text thread, so the message bubble is the one shape that repeats on every screen. */ .hx-mark { position: relative; width: 56px; height: 56px; border-radius: 50%; margin: 0 auto 16px; background: var(--hx-blue-wash); display: flex; align-items: center; justify-content: center; } .hx-mark svg { width: 26px; height: 26px; display: block; position: relative; z-index: 1; } .hx-mark::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid rgba(3, 169, 245, .45); animation: hxPing 2.6s cubic-bezier(0, 0, .2, 1) infinite; } .hx-mark .hx-dot { animation: hxDotPulse 1.3s ease-in-out infinite; transform-origin: center; transform-box: fill-box; } .hx-mark .hx-dot:nth-of-type(2) { animation-delay: .18s; } .hx-mark .hx-dot:nth-of-type(3) { animation-delay: .36s; } @keyframes hxPing { 0% { transform: scale(.9); opacity: .9; } 70%, 100% { transform: scale(1.5); opacity: 0; } } @keyframes hxDotPulse { 0%, 60%, 100% { transform: scale(1); opacity: .55; } 30% { transform: scale(1.45); opacity: 1; } } /* reusable step badge — same language, no typing dots */ .hx-badge { position: relative; width: 56px; height: 56px; border-radius: 50%; margin: 0 auto 16px; background: var(--hx-blue-wash); display: flex; align-items: center; justify-content: center; } .hx-badge svg { width: 26px; height: 26px; display: block; position: relative; z-index: 1; } .hx-badge::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid rgba(3, 169, 245, .45); animation: hxPing 2.6s cubic-bezier(0, 0, .2, 1) infinite; } /* collapses on login / password-reset, where there is no progress to report. Height and margin animate too, so nothing below it jumps. */ .hx-progress.is-off { opacity: 0; height: 0; margin-bottom: 0; transition: opacity .28s var(--hx-ease), height .38s var(--hx-out), margin-bottom .38s var(--hx-out); } .hx-progress { transition: opacity .3s var(--hx-ease) .1s, height .38s var(--hx-out), margin-bottom .38s var(--hx-out); } /* ── fields ──────────────────────────────────────────────────────────────── THE FIX. Previously .hx-form input carried `margin: 6px 0 0` (left over from stacked labels) and .hx-float compensated with a hardcoded `top: 31px`. The pill was therefore positioned against the LABEL box, not the input box — so when it floated to `top: -1px` it landed ~7px above the input's real border, hovering in dead space instead of docking onto it. Now: the input's margin is zeroed inside .hx-field, so the input box starts at y=0 of the field. `top: 50%` is the true vertical centre at rest and `top: 0` is exactly the top border when floated. No magic numbers, and it stays correct if --hx-h ever changes. Vertical centring of the typed text: fixed height + zero vertical padding + line-height:normal. A browser centres an input's single line box inside its content box, so the text is centred by construction rather than by tuned padding — which is what was drifting before. */ .hx-form { margin: 0 !important; padding: 0 !important; } .hx-form label { display: block !important; margin: 0 0 14px !important; font-size: 12.5px !important; font-weight: 500 !important; color: var(--hx-muted) !important; letter-spacing: .01em; } /* The :not(.hx-otp-box) is load-bearing. `input[type="text"]` outranks `.hx-onb .hx-otp-box` on specificity — (0,3,1) vs (0,2,0) — and specificity decides between two !important declarations, so without this exclusion every OTP digit box inherited `width: 100%` and blew out of the card. */ .hx-onb .hx-form input[type="text"]:not(.hx-otp-box), .hx-onb .hx-form input[type="email"], .hx-onb .hx-form input[type="tel"], .hx-onb .hx-form input[type="password"] { display: block !important; width: 100% !important; margin: 0 !important; height: var(--hx-h) !important; padding: 0 var(--hx-pad) !important; font-size: var(--hx-input-fs) !important; font-weight: 400 !important; line-height: normal !important; border: 1px solid var(--hx-line) !important; border-radius: var(--hx-r) !important; background: var(--hx-field) !important; color: #fff !important; box-shadow: none !important; outline: none !important; min-height: 0 !important; transition: border-color .22s var(--hx-ease), background-color .22s var(--hx-ease); } /* the placeholder is only ever a single space (the :placeholder-shown trick) — keep it invisible so it can never fight the floating label */ .hx-onb .hx-form input::placeholder { color: transparent !important; } .hx-onb .hx-form input:hover:not(:focus) { border-color: #333 !important; } /* focus: NO accent colour anywhere — neutral border lift only */ .hx-onb .hx-form input:focus, .hx-onb .hx-form input:focus-visible { border-color: var(--hx-focus) !important; background: var(--hx-lift) !important; box-shadow: none !important; outline: none !important; } .hx-form small { display: block; margin-top: 6px; font-weight: 400 !important; color: var(--hx-faint) !important; font-size: 12px !important; line-height: 1.5; } .hx-row { display: flex; gap: 10px; } .hx-row .hx-field { flex: 1; min-width: 0; } /* the field wrapper */ .hx-field { position: relative; display: block; margin: 0 0 14px !important; } .hx-field .hx-pw { position: relative; display: block; margin: 0; } /* one-shot hairline sweep on focus — this is the focus signal that replaces the blue ring. Colourless, so it reads as "active" without introducing an accent. */ .hx-field::after { content: ""; position: absolute; left: 1px; right: 1px; bottom: 1px; height: 1px; border-radius: 0 0 var(--hx-r) var(--hx-r); background: linear-gradient(90deg, transparent, rgba(255,255,255,.5), transparent); opacity: 0; transform: scaleX(.2); pointer-events: none; } .hx-field:focus-within::after { animation: hxSweep .6s var(--hx-out) forwards; } @keyframes hxSweep { 0% { opacity: 0; transform: scaleX(.15); } 35% { opacity: 1; transform: scaleX(1); } 100% { opacity: 0; transform: scaleX(1); } } /* the floating label */ .hx-float { position: absolute; left: calc(var(--hx-pad) - 1px); top: 50%; transform: translateY(-50%); font-size: var(--hx-input-fs) !important; font-weight: 400 !important; color: var(--hx-faint) !important; padding: 0 5px; margin: 0 !important; background: transparent; border-radius: 999px; pointer-events: none; z-index: 5; line-height: 1.2; white-space: nowrap; transition: top .32s var(--hx-spring), left .32s var(--hx-spring), font-size .28s var(--hx-out), color .28s var(--hx-ease), background-color .28s var(--hx-ease), padding .28s var(--hx-out); } .hx-field:focus-within .hx-float, .hx-field.is-filled .hx-float, .hx-field:has(input:not(:placeholder-shown)) .hx-float { top: 0; left: 10px; font-size: var(--hx-float-fs) !important; font-weight: 500 !important; color: #a1a1aa !important; background: var(--hx-pill); padding: 3px 9px; letter-spacing: .03em; } /* keep the pill brighter while the field itself is focused */ .hx-field:focus-within .hx-float { color: #e4e4e7 !important; } /* password fields leave room for the eye */ .hx-pw input { padding-right: 44px !important; } .hx-eye { position: absolute; right: 11px; top: 50%; transform: translateY(-50%); width: 24px; height: 24px; border: 0 !important; background: transparent !important; cursor: pointer; padding: 0 !important; box-shadow: none !important; opacity: 0; pointer-events: none; transition: opacity .25s var(--hx-ease); display: flex; align-items: center; justify-content: center; } .hx-pw.has-text .hx-eye { opacity: .4; pointer-events: auto; } .hx-pw.has-text .hx-eye:hover { opacity: .8; } .hx-eye:focus-visible { outline: 2px solid var(--hx-focus); outline-offset: 1px; opacity: .8; } .hx-eye::before { content: ""; display: block; width: 17px; height: 17px; background-repeat: no-repeat; background-position: center; background-size: 17px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E"); } .hx-eye.on::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94'/%3E%3Cpath d='M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19'/%3E%3Cline x1='1' y1='1' x2='23' y2='23'/%3E%3C/svg%3E"); } /* invalid field: a short nudge plus a muted border — the message is in the toast */ .hx-field.hx-bad input { border-color: rgba(255, 107, 107, .55) !important; } .hx-field.hx-bad, .hx-terms.hx-bad { animation: hxNudge .34s var(--hx-ease); } .hx-terms.hx-bad .hx-terms-box { border-color: rgba(255, 107, 107, .7); } @keyframes hxNudge { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } } /* Chrome/Safari autofill — keep the field dark, no white takeover. Scoped from the #id, deliberately. As a class-only selector this rule scored (0,3,1) while the main input rule scores (0,4,1), so `box-shadow: none` beat the inset trick that does all the work here and autofilled fields painted white. An id puts it out of reach of any future specificity change above. The standard :autofill lives in its own rule: one unrecognised selector invalidates an entire comma-separated list, which would take the -webkit- fallback down with it on browsers that don't know the modern pseudo. */ #hutsy-onboard input:-webkit-autofill, #hutsy-onboard input:-webkit-autofill:hover, #hutsy-onboard input:-webkit-autofill:focus, #hutsy-onboard input:-webkit-autofill:active { -webkit-box-shadow: 0 0 0 1000px var(--hx-field) inset !important; box-shadow: 0 0 0 1000px var(--hx-field) inset !important; -webkit-text-fill-color: #fff !important; caret-color: #fff !important; border: 1px solid var(--hx-line) !important; background-color: var(--hx-field) !important; background-image: none !important; /* the delay is the trick: the UA's background change never gets to run */ transition: background-color 99999s ease-in-out 0s !important; } #hutsy-onboard input:autofill { -webkit-box-shadow: 0 0 0 1000px var(--hx-field) inset !important; box-shadow: 0 0 0 1000px var(--hx-field) inset !important; -webkit-text-fill-color: #fff !important; caret-color: #fff !important; border: 1px solid var(--hx-line) !important; background-color: var(--hx-field) !important; background-image: none !important; transition: background-color 99999s ease-in-out 0s !important; } /* focused autofilled field still gets the neutral focus border */ #hutsy-onboard input:-webkit-autofill:focus { border-color: var(--hx-focus) !important; } /* ── buttons ───────────────────────────────────────────────────────────── */ .hx-onb .hx-btn { position: relative; overflow: hidden; display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; padding: 15px 18px !important; margin: 22px 0 0 !important; border: 0 !important; border-radius: var(--hx-r) !important; background: var(--hx-blue) !important; color: #fff !important; font-size: 15px !important; font-weight: 600 !important; letter-spacing: .01em !important; line-height: 1.3 !important; text-align: center !important; text-decoration: none !important; cursor: pointer; box-shadow: 0 6px 18px rgba(3, 169, 245, .22) !important; transition: background-color .18s var(--hx-ease), transform .16s var(--hx-spring), box-shadow .18s var(--hx-ease); } /* a light sweeps across on hover — the button's own "ready" beat */ .hx-onb .hx-btn::after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(100deg, transparent 30%, rgba(255,255,255,.22) 50%, transparent 70%); transform: translateX(-100%); pointer-events: none; } .hx-onb .hx-btn:hover:not(:disabled)::after { animation: hxWipe .75s var(--hx-out); } @keyframes hxWipe { to { transform: translateX(100%); } } .hx-onb .hx-btn:hover:not(:disabled) { background: #0b95d6 !important; color: #fff !important; transform: translateY(-1px); box-shadow: 0 10px 24px rgba(3, 169, 245, .3) !important; } .hx-onb .hx-btn:active:not(:disabled) { transform: translateY(0) scale(.985); } .hx-onb .hx-btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; } .hx-onb .hx-btn:disabled { background: #315a6e !important; color: #9fb6c1 !important; cursor: not-allowed; transform: none; box-shadow: none !important; } .hx-onb .hx-btn-big { font-size: 15.5px !important; padding: 16px 20px !important; } .hx-onb .hx-btn-ok { background: #16a34a !important; color: #fff !important; box-shadow: 0 6px 18px rgba(34, 197, 94, .28) !important; } .hx-btn-row { display: flex; gap: 10px; margin-top: 22px; } .hx-btn-row .hx-btn { flex: 1; margin-top: 0 !important; } .hx-onb .hx-btn-secondary { background: transparent !important; color: #e5e7eb !important; border: 1px solid #3a3a3a !important; box-shadow: none !important; font-weight: 500 !important; } .hx-onb .hx-btn-secondary:hover:not(:disabled) { background: rgba(255, 255, 255, .06) !important; color: #fff !important; box-shadow: none !important; } /* switch line ("New to Hutsy? Create an account") */ .hx-switch { margin: 18px 0 0 !important; text-align: center !important; font-size: 13px !important; color: var(--hx-muted) !important; } .hx-switch a { color: var(--hx-blue) !important; font-weight: 500; cursor: pointer; text-decoration: none !important; } .hx-switch a:hover { text-decoration: underline !important; } /* the alternative route out of this form. A hairline above it separates "the form" from "the other thing you might have meant" — the boxless layout has no card edge to do that job, so the rule does it instead. */ .hx-onb .hx-switch.hx-alt { margin-top: 26px !important; padding-top: 20px; border-top: 1px solid var(--hx-line); } /* forgot-password: sits directly under the password field, right-aligned, where the thought actually occurs — not stranded below the button. */ .hx-onb .hx-forgot { margin: -2px 0 0 !important; text-align: right !important; font-size: 12.5px !important; color: var(--hx-faint) !important; font-weight: 400 !important; } .hx-onb .hx-forgot a { color: var(--hx-muted) !important; font-weight: 500 !important; cursor: pointer; text-decoration: underline !important; text-underline-offset: 3px; text-decoration-thickness: 1px; transition: color .18s var(--hx-ease); } .hx-onb .hx-forgot a:hover { color: #fff !important; } .hx-onb .hx-forgot a:focus-visible { outline: 2px solid var(--hx-focus); outline-offset: 3px; border-radius: 2px; } /* hints */ .hx-hint { display: block; margin: 8px 0 0 !important; color: var(--hx-faint) !important; font-size: 12px !important; font-weight: 400 !important; line-height: 1.5; text-align: left !important; } /* ── errors ────────────────────────────────────────────────────────────── */ .hx-error { margin-top: 14px !important; padding: 10px 12px; background: rgba(255, 107, 107, .1); border: 1px solid rgba(255, 107, 107, .4); border-radius: 8px; color: var(--hx-bad) !important; font-size: 13px !important; line-height: 1.45; text-align: center; } /* ── OTP ───────────────────────────────────────────────────────────────── */ .hx-otp-card { background: transparent !important; border: 0 !important; padding: 0 !important; text-align: center; } .hx-otp-icon { position: relative; width: 56px; height: 56px; border-radius: 50%; margin: 0 auto 16px; background: var(--hx-blue-wash); display: flex; align-items: center; justify-content: center; } .hx-otp-icon svg { width: 26px; height: 26px; display: block; position: relative; z-index: 1; } .hx-otp-icon::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid rgba(3, 169, 245, .55); animation: hxPing 2.2s cubic-bezier(0, 0, .2, 1) infinite; } .hx-otp-icon .hx-dot { animation: hxDotPulse 1.3s ease-in-out infinite; transform-origin: center; transform-box: fill-box; } .hx-otp-icon .hx-dot:nth-of-type(2) { animation-delay: .18s; } .hx-otp-icon .hx-dot:nth-of-type(3) { animation-delay: .36s; } .hx-onb .hx-otp-title { margin: 0 0 8px !important; font-size: 20px !important; color: #fff !important; font-weight: 600 !important; letter-spacing: -.015em; } .hx-otp-card .hx-otp-note { text-align: center; color: var(--hx-muted) !important; font-size: 13.5px !important; line-height: 1.6 !important; margin: 0 0 18px !important; } .hx-otp-card .hx-otp-note b { color: #fff; font-weight: 600; font-size: 15px; letter-spacing: .02em; } .hx-otp-card .hx-error { text-align: center; } .hx-otp-hint { color: var(--hx-faint) !important; font-size: 12px !important; text-align: center; line-height: 1.6 !important; margin: 18px 6px 0 !important; } .hx-otp-row { display: flex; justify-content: center; gap: 8px; margin: 6px 0 10px; } /* each digit box drops in on its own beat when the screen appears. Lower specificity than .filled / .verifying / .settling, so those still win. */ .hx-otp-row .hx-otp-box { animation: hxBoxIn .42s var(--hx-out) backwards; } .hx-otp-row .hx-otp-box:nth-child(1) { animation-delay: .06s; } .hx-otp-row .hx-otp-box:nth-child(2) { animation-delay: .12s; } .hx-otp-row .hx-otp-box:nth-child(3) { animation-delay: .18s; } .hx-otp-row .hx-otp-box:nth-child(4) { animation-delay: .24s; } .hx-otp-row .hx-otp-box:nth-child(5) { animation-delay: .30s; } .hx-otp-row .hx-otp-box:nth-child(6) { animation-delay: .36s; } @keyframes hxBoxIn { 0% { opacity: 0; transform: translateY(10px) scale(.9); } 100% { opacity: 1; transform: translateY(0) scale(1); } } /* Written as input.hx-otp-box so this always outranks any generic `.hx-form input[type=...]` rule. Belt and braces alongside the :not() above. */ .hx-onb input.hx-otp-box { width: 44px !important; flex: none !important; height: 52px !important; text-align: center !important; padding: 0 !important; margin: 0 !important; font-size: 19px !important; font-weight: 600 !important; line-height: normal !important; border: 1px solid var(--hx-line) !important; border-radius: var(--hx-r) !important; background: var(--hx-field) !important; color: #fff !important; caret-color: var(--hx-blue); outline: none !important; box-shadow: none !important; transition: border-color .2s var(--hx-ease), background-color .2s var(--hx-ease), color .2s var(--hx-ease), transform .2s var(--hx-spring); } /* focus stays colourless here too — the box lifts, it doesn't glow */ .hx-onb .hx-otp-box:focus { border-color: var(--hx-focus) !important; background: var(--hx-lift) !important; box-shadow: none !important; transform: translateY(-2px); } .hx-onb .hx-otp-box.filled { animation: hxDigitPop .2s var(--hx-spring); border-color: #3a3a3a !important; } @keyframes hxDigitPop { 0% { transform: scale(.86); } 55% { transform: scale(1.07); } 100% { transform: scale(1); } } /* Verified. Your "no colour on focus" note was about tapping into a field — this is a success state, not a focus state, so the green glow belongs here and v3.0 was wrong to strip it. Restored, with a pop as each digit lands. */ .hx-onb .hx-otp-box.ok { border-color: var(--hx-ok) !important; box-shadow: 0 0 0 3px rgba(34, 197, 94, .22) !important; background: rgba(34, 197, 94, .07) !important; color: #4ade80 !important; } .hx-otp-row.hx-shake { animation: hxShake .36s var(--hx-ease); } @keyframes hxShake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-7px); } 75% { transform: translateX(7px); } } /* verifying → a blue wave travels the row; after success it settles into a slow green breath. Both are status colours, not focus colours, so they stay. */ .hx-otp-row.verifying .hx-otp-box { border-color: var(--hx-blue) !important; box-shadow: 0 0 0 3px rgba(3, 169, 245, .15) !important; animation: hxWave 1s ease-in-out infinite; } .hx-otp-row.settling .hx-otp-box { animation: hxWave 1.6s ease-in-out infinite; } .hx-otp-row.verifying .hx-otp-box:nth-child(2), .hx-otp-row.settling .hx-otp-box:nth-child(2) { animation-delay: .08s; } .hx-otp-row.verifying .hx-otp-box:nth-child(3), .hx-otp-row.settling .hx-otp-box:nth-child(3) { animation-delay: .16s; } .hx-otp-row.verifying .hx-otp-box:nth-child(4), .hx-otp-row.settling .hx-otp-box:nth-child(4) { animation-delay: .24s; } .hx-otp-row.verifying .hx-otp-box:nth-child(5), .hx-otp-row.settling .hx-otp-box:nth-child(5) { animation-delay: .32s; } .hx-otp-row.verifying .hx-otp-box:nth-child(6), .hx-otp-row.settling .hx-otp-box:nth-child(6) { animation-delay: .4s; } @keyframes hxWave { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } } @media (max-width: 480px) { .hx-onb .hx-otp-box { width: 40px !important; height: 48px !important; font-size: 18px !important; } .hx-otp-row { gap: 6px; } } /* verified: the bubble turns green and keeps its living dots */ .hx-otp-icon.good { background: rgba(34, 197, 94, .15); } .hx-otp-icon.good::after { border-color: rgba(34, 197, 94, .5); } .hx-otp-icon.good svg path:first-of-type { fill: var(--hx-ok); } .hx-otp-icon .hx-check { display: none; } /* Change number is the stable action — always available, no cooldown — so it gets the button. Resend is conditional, so it lives below as text that becomes a link. The button is sized to its label rather than the full column: it's a secondary escape hatch, and a full-width slab overstated it. */ .hx-otp-actions { display: block; margin-top: 22px; text-align: center; } .hx-onb .hx-otp-btn { display: inline-flex; align-items: center; justify-content: center; width: auto !important; padding: 12px 24px !important; margin: 0 !important; font-size: 13px !important; font-weight: 500 !important; line-height: 1.2 !important; background: transparent !important; color: var(--hx-muted) !important; border: 1px solid #2e2e33 !important; border-radius: var(--hx-r) !important; cursor: pointer; box-shadow: none !important; white-space: nowrap; transition: background-color .18s var(--hx-ease), border-color .18s var(--hx-ease), color .18s var(--hx-ease); } .hx-onb .hx-otp-btn:hover:not(:disabled) { background: rgba(255, 255, 255, .04) !important; color: #fff !important; border-color: #4a4a50 !important; } .hx-onb .hx-otp-btn:disabled { opacity: .55; cursor: default; } .hx-onb .hx-otp-btn:focus-visible { outline: 2px solid var(--hx-focus); outline-offset: 2px; } /* the countdown line */ .hx-resend { margin: 14px 0 0 !important; text-align: center !important; font-size: 12.5px !important; color: var(--hx-faint) !important; line-height: 1.4 !important; } .hx-resend b { color: var(--hx-blue); font-weight: 600; font-variant-numeric: tabular-nums; } .hx-onb .hx-resend-btn { appearance: none; -webkit-appearance: none; background: transparent !important; border: 0 !important; box-shadow: none !important; padding: 2px 4px !important; margin: 0 !important; font-size: 12.5px !important; font-weight: 400 !important; line-height: 1.4 !important; color: var(--hx-faint) !important; cursor: pointer; transition: color .18s var(--hx-ease); } .hx-onb .hx-resend-btn .hx-ul { color: var(--hx-muted); font-weight: 500; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; } .hx-onb .hx-resend-btn:hover { color: var(--hx-muted) !important; } .hx-onb .hx-resend-btn:hover .hx-ul { color: #fff; } .hx-onb .hx-resend-btn:focus-visible { outline: 2px solid var(--hx-focus); outline-offset: 2px; border-radius: 3px; } /* it arrives rather than just appearing — the one moment on this screen where something new becomes available, so it earns a beat of attention */ .hx-onb .hx-resend-btn.hx-pop { animation: hxPop .42s var(--hx-out); } @keyframes hxPop { 0% { opacity: 0; transform: translateY(5px); } 100% { opacity: 1; transform: translateY(0); } } /* ── spinners ────────────────────────────────────────────────────────────── The iMessage typing dots, again — one loading language across the plugin. */ .hx-btn .hx-btn-spin { display: none; vertical-align: middle; margin-right: 10px; } .hx-btn.hx-working .hx-btn-spin { display: inline-block; } .hx-btn-spin, .hx-inline-spin { position: relative; width: 28px; height: 8px; flex: none; } .hx-btn-spin::before, .hx-btn-spin::after, .hx-btn-spin i, .hx-inline-spin::before, .hx-inline-spin::after, .hx-inline-spin i { content: ""; position: absolute; top: 50%; margin-top: -3px; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .4; animation: hxDots 1.1s ease-in-out infinite; } .hx-btn-spin::before, .hx-inline-spin::before { left: 0; } .hx-btn-spin i, .hx-inline-spin i { left: 11px; animation-delay: .18s; } .hx-btn-spin::after, .hx-inline-spin::after { left: 22px; animation-delay: .36s; } @keyframes hxDots { 0%, 60%, 100% { transform: scale(1); opacity: .35; } 30% { transform: scale(1.5); opacity: 1; } } .hx-inline-spin { display: inline-block; margin-right: 10px; vertical-align: 1px; color: var(--hx-blue); } /* ── skeletons ─────────────────────────────────────────────────────────── */ .hx-skel { width: 100%; } .hx-skel-row { display: flex; gap: 10px; margin-bottom: 10px; } .hx-skel-line { background-color: #2a2a2a; border-radius: 6px; position: relative; overflow: hidden; height: var(--hx-h); flex: 1; } .hx-skel-line.sm { height: 14px; width: 40%; flex: none; } .hx-skel-line.xs { height: 11px; flex: none; } .hx-skel-line.btn { height: 50px; border-radius: var(--hx-r); } .hx-skel-line::before { content: ""; position: absolute; top: 0; left: 0; height: 100%; width: 150px; background: linear-gradient(to right, transparent 0%, rgba(255, 255, 255, .06) 50%, transparent 100%); animation: hxShimmer 1.5s infinite; } @keyframes hxShimmer { 0% { transform: translateX(-150px); } 100% { transform: translateX(460px); } } #hx-payment-element { margin: 4px 0 6px; min-height: 90px; } /* ── entrance: staggered fadeBounce (delay set per-element by JS) ───────── */ @keyframes hxFadeBounce { 0% { opacity: 0; transform: translateY(18px); } 55% { opacity: 1; transform: translateY(-6px); } 100% { opacity: 1; transform: translateY(0); } } .hx-fb { opacity: 0; transform: translateY(18px); } .hx-fb.hx-bounce-in { animation: hxFadeBounce .52s var(--hx-out) forwards; } /* panel cross-fade — the card itself breathes when the step changes */ .hx-panel.hx-entering { animation: hxPanelIn .45s var(--hx-out); } @keyframes hxPanelIn { 0% { opacity: 0; transform: scale(.985); } 100% { opacity: 1; transform: scale(1); } } /* ── intl-tel-input ────────────────────────────────────────────────────── */ .hx-onb .iti { width: 100%; display: block; margin: 0; } .hx-onb .iti input { margin: 0 !important; } .hx-onb .iti input.iti__tel-input { padding-left: 110px !important; } .hx-onb .iti input.iti__tel-input:focus { border-color: var(--hx-focus) !important; box-shadow: none !important; } /* fixed width for every country (+1, +91, …): constant padding, zero layout shift */ .hx-onb .iti__country-container { padding: 0 !important; width: 96px !important; } .hx-onb button.iti__selected-country { appearance: none !important; -webkit-appearance: none !important; border: none !important; outline: none !important; margin: 0 !important; height: 100% !important; width: 100% !important; padding: 0 8px !important; display: flex !important; align-items: center !important; justify-content: center !important; background: #2a2a2a !important; border-radius: var(--hx-r) 0 0 var(--hx-r) !important; border-right: 1px solid #3a3a3a !important; font: inherit !important; cursor: pointer; transition: background-color .18s var(--hx-ease); } .hx-onb button.iti__selected-country:hover, .hx-onb button.iti__selected-country:focus { background: var(--hx-focus) !important; } .hx-onb .iti__selected-dial-code { color: #e5e7eb !important; font-weight: 500 !important; font-size: 14px !important; margin-left: 6px !important; } .hx-onb .iti__arrow { border-top-color: var(--hx-muted) !important; } /* dropdown: solid dark panel floating above everything */ .iti__dropdown-content { position: absolute !important; z-index: 99999 !important; background: var(--hx-raise) !important; border: 1px solid #3a3a3a !important; border-radius: var(--hx-r) !important; color: #fff !important; box-shadow: 0 18px 40px rgba(0, 0, 0, .75) !important; } .iti__country-list { background: var(--hx-raise) !important; color: #e5e7eb !important; max-height: 240px !important; overflow-y: auto !important; } .iti__country { color: #e5e7eb !important; padding: 8px 12px !important; } .iti__country:hover, .iti__country--highlighted, .iti__country.iti__highlight { background: #2e2e2e !important; } .iti__country-name { color: #e5e7eb !important; } .iti__dial-code { color: var(--hx-muted) !important; } .hx-onb .iti__search-input { width: 100% !important; background: #161616 !important; color: #fff !important; border: 0 !important; border-bottom: 1px solid #3a3a3a !important; border-radius: var(--hx-r) var(--hx-r) 0 0 !important; padding: 10px 12px !important; font-size: 14px !important; height: auto !important; outline: none !important; box-shadow: none !important; margin: 0 !important; } .hx-onb .iti__search-input::placeholder { color: var(--hx-faint) !important; } .hx-onb .iti__search-input:focus { border-color: transparent !important; border-bottom-color: #4a4a4a !important; box-shadow: none !important; outline: none !important; } .hx-onb .iti--container, .iti--container { z-index: 99999 !important; } /* the open dropdown must beat the Back/Send row below it */ .hx-form .hx-field:has(.iti) { position: relative; z-index: 30; } /* iti's screen-reader-only span — our input resets were painting it as a stray box */ .iti__a11y-text { position: absolute !important; width: 1px !important; height: 1px !important; overflow: hidden !important; clip-path: inset(50%) !important; border: 0 !important; padding: 0 !important; margin: 0 !important; white-space: nowrap !important; } /* phone fields: the label rests clear of the flag box, then docks to the border */ .hx-field-tel .hx-float { left: 104px; } .hx-field-tel:focus-within .hx-float, .hx-field-tel.is-filled .hx-float, .hx-field-tel:has(input:not(:placeholder-shown)) .hx-float { left: 10px; } /* ── benefits step ─────────────────────────────────────────────────────── */ .hx-termbox { background: #191919; border-radius: 10px; padding: 2px 18px; margin: 0 0 20px; } .hx-payterm { display: flex; gap: 16px; align-items: center; padding: 17px 0; text-align: left; } .hx-payterm + .hx-payterm { border-top: 1px solid var(--hx-line); } .hx-payterm-ic { width: 42px; height: 42px; min-width: 42px; display: inline-flex; align-items: center; justify-content: center; border-radius: 14px; background: rgba(3, 169, 245, .12); color: var(--hx-blue); } .hx-payterm-t { margin: 0 0 4px !important; color: #fff !important; font-size: 13px !important; font-weight: 600 !important; line-height: 1.2 !important; text-align: left !important; } .hx-payterm-d { margin: 0 !important; color: rgba(255, 255, 255, .72) !important; font-size: 12px !important; font-weight: 300 !important; line-height: 1.45 !important; text-align: left !important; } /* ToS checkbox */ .hx-terms { display: flex !important; justify-content: center; align-items: center; gap: 10px; cursor: pointer; margin: 4px 0 20px !important; text-align: center !important; } .hx-terms input { position: absolute; opacity: 0; width: 0; height: 0; } .hx-terms-box { width: 20px; height: 20px; min-width: 20px; border: 1.8px solid #3b3b42; border-radius: 4px; background: #1a1a1d; display: inline-block; position: relative; transition: background-color .18s var(--hx-ease), border-color .18s var(--hx-ease); } .hx-terms:hover .hx-terms-box { border-color: #4a4a50; } .hx-terms input:checked + .hx-terms-box { background: var(--hx-blue); border-color: var(--hx-blue); animation: hxDigitPop .2s var(--hx-spring); } .hx-terms input:checked + .hx-terms-box::after { content: ""; position: absolute; left: 6px; top: 2px; width: 5px; height: 10px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); } .hx-terms input:focus-visible + .hx-terms-box { outline: 2px solid var(--hx-focus); outline-offset: 2px; } .hx-terms-text { color: var(--hx-muted); font-size: 12.5px; line-height: 1.5; } .hx-terms-text a { color: var(--hx-blue); text-decoration: none; font-weight: 500; } .hx-terms-text a:hover { text-decoration: underline; } /* ── done step ─────────────────────────────────────────────────────────── */ /* the card itself is defined up in the panel section, with the benefits screen */ .hx-done-card { text-align: center; } .hx-lottie { display: flex; justify-content: center; min-height: 150px; margin-bottom: 2px; } .hx-done-rows { margin: 16px 0 20px; border: 1px solid var(--hx-line); border-radius: 10px; overflow: hidden; text-align: left; } .hx-done-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 14px; background: #191919; font-size: 12.5px; } .hx-done-row + .hx-done-row { border-top: 1px solid var(--hx-line); } .hx-done-row span { color: var(--hx-muted); } .hx-done-row b { color: #fff; font-weight: 600; text-align: right; } /* ── toast ─────────────────────────────────────────────────────────────── */ .hx-toast-wrap { position: fixed; left: 50%; bottom: 30px; transform: translateX(-50%); z-index: 999999; pointer-events: none; } .hx-toast { display: flex !important; align-items: center !important; height: 34px !important; width: 34px; max-width: none !important; background: #161618 !important; border: 1px solid #34343a !important; color: #fff !important; border-radius: 999px !important; box-shadow: 0 14px 38px rgba(0, 0, 0, .6) !important; pointer-events: auto; overflow: hidden; opacity: 0; padding: 0 !important; margin: 0 !important; will-change: transform, width, opacity; font-family: 'Poppins', system-ui, sans-serif !important; } .hx-toast .hx-toast-dot { flex: none; width: 18px; height: 18px; margin: 0 7px !important; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 11px !important; font-weight: 700; color: #fff !important; line-height: 1 !important; } .hx-toast.err .hx-toast-dot { background: #e5484d; box-shadow: 0 0 12px rgba(229, 72, 77, .5); } .hx-toast.okk .hx-toast-dot { background: var(--hx-ok); box-shadow: 0 0 12px rgba(34, 197, 94, .5); } .hx-toast .hx-toast-msg { opacity: 0; white-space: nowrap !important; overflow: visible; font-size: 12.5px !important; line-height: normal !important; padding: 0 14px 0 0 !important; margin: 0 !important; will-change: opacity, transform; } /* ── reduced motion ──────────────────────────────────────────────────────── Every decorative loop and entrance is dropped; state changes stay instant and legible. Part of the quality floor, not an afterthought. */ @media (prefers-reduced-motion: reduce) { .hx-onb *, .hx-onb *::before, .hx-onb *::after, .hx-toast, .hx-toast * { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } .hx-fb { opacity: 1; transform: none; } .hx-progress-fill::after, .hx-mark::after, .hx-badge::after, .hx-otp-icon::after { display: none; } } /* country picker: two countries only — no search box, so style it like a small menu */ .iti__search-input { display: none !important; } .iti__dropdown-content { min-width: 210px !important; padding: 6px !important; } .iti__country-list { max-height: none !important; } .hx-onb .iti__country { padding: 11px 12px !important; border-radius: 8px !important; display: flex !important; align-items: center !important; gap: 10px !important; } .hx-onb .iti__country:hover, .hx-onb .iti__country--highlighted { background: #2e2e2e !important; } .hx-onb .iti__country[aria-selected="true"] { background: rgba(3,169,245,.14) !important; } /* ── country picker: custom dropdown with a radio list ──────────────────── */ /* ONE button: the container is the block; everything inside it is transparent, so the flag and the dial code sit in a single panel (they were splitting into two boxes). */ .hx-onb .iti__country-container.hx-ctrigger { pointer-events: auto !important; cursor: pointer; background: #2b2b31 !important; border-right: 1px solid #3a3a42 !important; border-radius: 3px 0 0 3px !important; transition: background .15s; /* MUST stay absolute — iti overlays this block on the input's left edge. Forcing position:relative drops it out of the field entirely (it lands above the input). */ position: absolute !important; display: flex !important; align-items: center !important; justify-content: center !important; /* iti stacks the input ABOVE this absolutely-positioned block, so every tap on the flag was landing on the input instead. Lift it so it's actually hittable. */ z-index: 5 !important; } /* centre the flag + dial code inside the button instead of hugging its left edge */ /* .iti__selected-country is the row (flag-wrapper + dial code + caret); the wrapper's own 12px padding was pushing the pair right, so zero it and centre the row itself. */ .hx-onb .hx-ctrigger .iti__selected-country { width: 100% !important; justify-content: center !important; gap: 10px !important; padding: 0 !important; } .hx-onb .hx-ctrigger .iti__selected-country-primary { padding: 0 !important; margin: 0 !important; width: auto !important; gap: 0 !important; } /* iti's own paddings/margins would knock the centred pair off-centre */ .hx-onb .hx-ctrigger .iti__selected-dial-code { margin: 0 !important; padding: 0 !important; } .hx-onb .hx-ctrigger .iti__flag { margin: 0 !important; } .hx-onb .hx-ctrigger .iti__a11y-text { display: none !important; } /* the caret is decoration — it must not steal centring width */ .hx-onb .hx-ctrigger .iti__arrow { position: absolute !important; right: 7px !important; margin: 0 !important; } .hx-onb .hx-ctrigger:hover { background: #353540 !important; } .hx-onb .hx-ctrigger .iti__selected-country, .hx-onb .hx-ctrigger .iti__selected-country-primary { background: transparent !important; border: 0 !important; box-shadow: none !important; height: 100% !important; display: flex !important; align-items: center !important; } .hx-onb .iti__arrow { display: inline-block !important; border-top-color: #9ca3af !important; margin-left: 6px !important; } /* the field's fadeBounce animation makes it a stacking context, so a plain high z-index on the panel still paints UNDER the later animated siblings (hint, buttons). Lift the whole tel field instead — that's what actually wins. */ .hx-onb .hx-field-tel { position: relative; z-index: 40; } .hx-cdd { position: absolute; left: 0; right: 0; top: 100%; z-index: 99999; margin-top: 6px; background: #1c1c1f; border: 1px solid #34343a; border-radius: 12px; padding: 6px; box-shadow: 0 18px 44px rgba(0,0,0,.65); font-family: 'Poppins', -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; opacity: 0; transform: translateY(-6px); transition: opacity .16s ease, transform .16s ease; } .hx-cdd.open { opacity: 1; transform: translateY(0); } .hx-onb .hx-cdd-row, .hx-cdd-row { display: flex; align-items: center; gap: 11px; width: 100%; padding: 12px 12px; background: transparent; border: 0; border-radius: 9px; color: #e5e7eb; font-family: inherit; font-size: 14px; font-weight: 500; text-align: left; cursor: pointer; transition: background .14s, color .14s; } /* Elementor paints its own button hover (a pink/accent fill) over these rows, so every interactive state is pinned. background-image kills gradient-based theme buttons too. */ .hx-onb .hx-cdd-row, .hx-cdd-row { background-image: none !important; box-shadow: none !important; text-shadow: none !important; outline: none !important; } .hx-onb .hx-cdd-row:hover, .hx-cdd-row:hover, .hx-onb .hx-cdd-row:focus, .hx-cdd-row:focus, .hx-onb .hx-cdd-row:focus-visible, .hx-cdd-row:focus-visible, .hx-onb .hx-cdd-row:active, .hx-cdd-row:active { background: #26262b !important; background-image: none !important; color: #fff !important; box-shadow: none !important; border: 0 !important; } .hx-onb .hx-cdd-row.on, .hx-cdd-row.on { background: transparent !important; color: #fff !important; } .hx-onb .hx-cdd-row.on:hover, .hx-cdd-row.on:hover { background: #26262b !important; } .hx-cdd-flag { font-size: 20px; line-height: 1; } .hx-cdd-name { flex: 1; } .hx-cdd-dial { color: #6b7280; font-size: 13px; } .hx-cdd-row.on .hx-cdd-dial { color: #03A9F5; } /* the radio itself — a real control, not a stray checkmark */ .hx-cradio { width: 18px; height: 18px; flex: none; border-radius: 50%; border: 2px solid #4a4a52; background: transparent; position: relative; transition: border-color .15s, box-shadow .15s; } .hx-cdd-row:hover .hx-cradio { border-color: #6b6b75; } .hx-cdd-row.on .hx-cradio { border-color: #03A9F5; box-shadow: 0 0 0 3px rgba(3,169,245,.14); } .hx-cdd-row.on .hx-cradio::after { content: ""; position: absolute; inset: 3px; border-radius: 50%; background: #03A9F5; } /* welcome-back: the masked number is a caption for the button, so centre it */ .hx-onb [data-form="welcome-back"] .hx-hint { text-align: center !important; margin-top: 10px !important; color: #6b7280 !important; } .hx-onb [data-form="welcome-back"] .hx-hint b { color: #9ca3af; font-weight: 600; } .hx-onb [data-form="welcome-back"] .hx-otp-row { margin-top: 14px; } /* the masked number is the moment they realise we already know them — give it presence */ .hx-idchip { display: flex; align-items: center; gap: 12px; margin: 2px 0 18px; padding: 14px 16px; border-radius: 14px; background: linear-gradient(180deg, rgba(3,169,245,.10) 0%, rgba(3,169,245,.04) 100%); border: 1px solid rgba(3,169,245,.28); box-shadow: inset 0 1px 0 rgba(255,255,255,.04); } .hx-idchip-ic { width: 38px; height: 38px; flex: none; border-radius: 11px; color: #03A9F5; background: rgba(3,169,245,.14); display: flex; align-items: center; justify-content: center; } .hx-idchip-ic svg { width: 20px; height: 20px; display: block; } .hx-idchip-txt { display: flex; flex-direction: column; gap: 2px; text-align: left; min-width: 0; } .hx-idchip-txt small { color: #9ca3af; font-size: 11.5px; letter-spacing: .02em; } .hx-idchip-txt b { color: #fff; font-size: 16px; font-weight: 600; letter-spacing: .06em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }