/* ============================================================================= VTH Auth v3 — Sign Up & Log In redesign ----------------------------------------------------------------------------- Implements the "Handoff: Sign Up & Log In (new flow)" spec: every colour, size, weight and radius below is taken from that document verbatim. Isolation: everything is namespaced `rs3-` and scoped under `.rs3`, so it neither inherits from nor fights the legacy reskin CSS (which keys off `.login_page` / `.register_page` / `.input-field` / `.btn-red`) or Materialize v0.100. Form controls additionally carry `.browser-default` in the markup, which is Materialize's own opt-out selector. ========================================================================== */ /* ---------- Figtree (self-hosted; the app is not allowed to depend on a CDN) */ @font-face { font-family: 'Figtree'; font-style: normal; font-weight: 300 900; font-display: swap; src: url('../../fonts/figtree/figtree-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Figtree'; font-style: normal; font-weight: 300 900; font-display: swap; src: url('../../fonts/figtree/figtree-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* ---------- Design tokens -------------------------------------------------- */ .rs3 { --rs3-primary: #1f27c9; --rs3-primary-hover: #161ca0; --rs3-primary-disabled: #cfcff5; --rs3-primary-tint: #eef0fd; --rs3-ink: #12121a; --rs3-body: #3f3f46; --rs3-muted: #52525b; --rs3-subtle: #71717a; --rs3-placeholder: #a1a1aa; --rs3-border: #e4e4e7; --rs3-surface: #f5f5f5; --rs3-surface-alt: #fafafa; --rs3-disabled-surface: #ededed; --rs3-error: #dc2626; --rs3-success: #16a34a; --rs3-page: #2b2b2b; --rs3-facebook: #1877f2; --rs3-font: 'Figtree', 'Helvetica Neue', Helvetica, Arial, sans-serif; --rs3-shadow-card: 0 24px 60px rgba(0, 0, 0, .35); --rs3-shadow-dropdown: 0 12px 28px rgba(0, 0, 0, .14); --rs3-shadow-tab: 0 1px 2px rgba(0, 0, 0, .08); --rs3-shadow-nav: 0 1px 3px rgba(0, 0, 0, .25); } /* AngularJS FOUC guard — same technique the rest of the reskin uses. */ .rs3 [ng-cloak], .rs3[ng-cloak] { display: none !important; } /* ---------- Page shell ----------------------------------------------------- */ /* The scope flag goes on (set by a one-line script in the head partial) because the layout builds the class list itself and must not be edited. */ html.rs3-html, html.rs3-html body { background: #2b2b2b !important; font-family: 'Figtree', 'Helvetica Neue', Helvetica, Arial, sans-serif; } /* The legacy layout wraps content in helpers that add their own chrome. */ html.rs3-html .wrapper, html.rs3-html #main-wrapper, html.rs3-html .main_wrapper { background: transparent !important; } html.rs3-html > body > header, html.rs3-html > body > footer, html.rs3-html > body > .header, html.rs3-html > body > .footer_main { display: none !important; } .rs3 { display: flex; justify-content: center; align-items: flex-start; padding: 26px 0 40px; min-height: 100vh; box-sizing: border-box; overflow-x: auto; /* the card never reflows; the page scrolls */ font-family: var(--rs3-font); color: var(--rs3-ink); -webkit-font-smoothing: antialiased; } .rs3 *, .rs3 *::before, .rs3 *::after { box-sizing: border-box; } /* Positioning context for the two circular nav buttons flanking the card. */ .rs3-stage { position: relative; flex: 0 0 auto; } .rs3-card { position: relative; width: 1060px; min-height: 640px; border-radius: 16px; overflow: hidden; box-shadow: var(--rs3-shadow-card); display: flex; background: #fff; } .rs3-pane-form { flex: 0 0 54%; max-width: 54%; padding: 38px 44px 44px; background: #fff; display: flex; flex-direction: column; } .rs3-pane-photo { flex: 0 0 46%; max-width: 46%; position: relative; overflow: hidden; background: #e4e4e7 var(--rs3-photo, none) center / cover no-repeat; } .rs3-pane-photo img { display: block; width: 100%; height: 100%; object-fit: cover; } /* Darkening wash behind the slogan so white type stays legible over any crop. */ .rs3-pane-photo::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(147deg, rgba(0, 0, 0, 0) 47%, rgba(0, 0, 0, .38) 78%, rgba(0, 0, 0, .62) 100%); } /* Slogan sits in the photo's bottom-right corner: its longest line ends on the pane's right edge, 28px up from the bottom. Sized to its content so no empty box hangs off the right (the same fix the previous reskin needed). */ .rs3-photo-slogan { position: absolute; right: 0; bottom: 28px; z-index: 2; width: max-content; margin: 0; padding-right: 24px; color: #fff; font: 600 44px/1.18 var(--rs3-font); text-align: left; text-shadow: 0 2px 4px rgba(0, 0, 0, .35); } /* Circular back / close buttons — 42px, 14px down from the card's top edge, sitting just outside it on either side. */ .rs3-nav { position: absolute; top: 14px; width: 42px; height: 42px; border: 0; border-radius: 999px; background: #fff; box-shadow: var(--rs3-shadow-nav); display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--rs3-ink); font-size: 17px; line-height: 1; padding: 0; text-decoration: none; z-index: 3; } .rs3-nav:hover, .rs3-nav:focus { background: #fff; color: var(--rs3-ink); outline: none; } .rs3-nav:focus-visible { box-shadow: var(--rs3-shadow-nav), 0 0 0 3px rgba(31, 39, 201, .35); } .rs3-nav-back { left: -56px; } .rs3-nav-close { right: -56px; } .rs3-nav svg { width: 17px; height: 17px; } /* ---------- Typography helpers -------------------------------------------- */ .rs3-title { margin: 0 0 26px; font: 600 23px/1.2 var(--rs3-font); color: var(--rs3-ink); text-align: center; letter-spacing: 0; } .rs3-intro { margin: 0 0 22px; font: 400 14.5px/1.5 var(--rs3-font); color: var(--rs3-body); } .rs3-prompt { margin: 0 0 18px; font: 500 15px/1.4 var(--rs3-font); color: var(--rs3-ink); text-align: center; } .rs3-head-row { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 22px; } .rs3-head-row .rs3-title { margin: 0; text-align: left; } .rs3-welcome { font: 500 14px/1.3 var(--rs3-font); color: var(--rs3-body); text-align: right; white-space: nowrap; } .rs3-link { color: var(--rs3-primary); text-decoration: none; } .rs3-link:hover, .rs3-link:focus { color: var(--rs3-primary-hover); text-decoration: none; } /* ---------- Step progress bar --------------------------------------------- */ .rs3-progress { display: flex; gap: 10px; margin: 0 0 20px; } .rs3-progress span { flex: 1 1 0; height: 3px; border-radius: 999px; background: var(--rs3-border); } .rs3-progress span.is-on { background: var(--rs3-primary); } /* ---------- Fields -------------------------------------------------------- */ .rs3-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .rs3-field { margin-bottom: 16px; } .rs3-grid .rs3-field { margin-bottom: 0; } .rs3-label { display: block; margin: 0 0 7px; font: 600 13px/1.3 var(--rs3-font); color: var(--rs3-ink); } .rs3-label em, .rs3-req { color: var(--rs3-error); font-style: normal; } .rs3-label-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 7px; } .rs3-label-row .rs3-label { margin: 0; } .rs3-label-link { font: 500 12.5px/1.3 var(--rs3-font); color: var(--rs3-primary); text-decoration: none; } .rs3-label-link:hover { color: var(--rs3-primary-hover); } .rs3-input-wrap { position: relative; } /* `input.rs3-input` matches Materialize's own specificity and loads later; the markup also carries .browser-default, which Materialize excludes outright. */ .rs3 input.rs3-input, .rs3 select.rs3-input, .rs3 textarea.rs3-input { display: block; width: 100%; height: auto; margin: 0; padding: 12px 14px; border: 1px solid var(--rs3-border); border-radius: 8px; background: #fff; box-shadow: none; font: 400 15px/1.4 var(--rs3-font); color: var(--rs3-ink); outline: none; transition: border-color .12s ease; box-sizing: border-box; } .rs3 input.rs3-input:focus, .rs3 select.rs3-input:focus, .rs3 textarea.rs3-input:focus { border: 1px solid var(--rs3-primary); box-shadow: none; } .rs3 input.rs3-input::-webkit-input-placeholder { color: var(--rs3-placeholder); } .rs3 input.rs3-input::placeholder { color: var(--rs3-placeholder); opacity: 1; } .rs3 select.rs3-input { -webkit-appearance: none; -moz-appearance: none; appearance: none; padding-right: 34px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%2352525b' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; cursor: pointer; } /* Error state: red border + text, room for the badge, badge, helper line. */ .rs3-input-wrap.is-error input.rs3-input, .rs3 input.rs3-input.is-error { border-color: var(--rs3-error); color: var(--rs3-error); padding-right: 40px; } .rs3-input-wrap.is-error input.rs3-input:focus { border-color: var(--rs3-error); } .rs3-input-wrap.is-error::after { content: '!'; position: absolute; top: 11px; right: 12px; width: 18px; height: 18px; border-radius: 999px; background: var(--rs3-error); color: #fff; font: 700 12px/18px var(--rs3-font); text-align: center; pointer-events: none; } .rs3-helper { margin: 7px 0 0; font: 400 12.5px/1.45 var(--rs3-font); color: var(--rs3-muted); } /* .error / .success are written by RegisterV2Controller's availability check. .success is declared last on purpose: the controller's error branch clears `success` but its success branch leaves `error` in place, so the later rule has to be the one that wins when both classes are present. */ .rs3-helper.is-error, .rs3-helper.error { color: var(--rs3-error); } .rs3-helper.success { color: var(--rs3-success); } /* ---------- Buttons ------------------------------------------------------- */ .rs3 .rs3-btn { display: block; width: 100%; height: auto; margin: 0; padding: 14px; border: 0; border-radius: 8px; background: var(--rs3-primary); color: #fff; font: 600 15px/1.2 var(--rs3-font); text-align: center; text-transform: none; letter-spacing: 0; text-decoration: none; cursor: pointer; box-shadow: none; transition: background-color .12s ease; } .rs3 .rs3-btn:hover, .rs3 .rs3-btn:focus { background: var(--rs3-primary); color: #fff; outline: none; } .rs3 .rs3-btn:focus-visible { box-shadow: 0 0 0 3px rgba(31, 39, 201, .3); } .rs3 .rs3-btn[disabled], .rs3 .rs3-btn.is-disabled, .rs3 .rs3-btn[disabled]:hover, .rs3 .rs3-btn[disabled]:focus { background: var(--rs3-primary-disabled); color: #fff; cursor: not-allowed; } .rs3 .rs3-btn-secondary { display: block; width: 100%; height: auto; margin: 0; padding: 13px; border: 0; border-radius: 8px; background: var(--rs3-surface); color: var(--rs3-ink); font: 600 14.5px/1.2 var(--rs3-font); text-align: center; text-transform: none; letter-spacing: 0; text-decoration: none; cursor: pointer; box-shadow: none; } .rs3 .rs3-btn-secondary:hover, .rs3 .rs3-btn-secondary:focus { background: var(--rs3-surface); color: var(--rs3-ink); outline: none; } .rs3 .rs3-btn-secondary[disabled], .rs3 .rs3-btn-secondary.is-disabled, .rs3 .rs3-btn-secondary[disabled]:hover { background: var(--rs3-disabled-surface); color: var(--rs3-placeholder); cursor: not-allowed; } /* ---------- Password field + eye toggle ----------------------------------- */ .rs3-pw-wrap { position: relative; } .rs3 .rs3-pw-wrap input.rs3-input { padding-right: 42px; } .rs3 .rs3-eye { position: absolute; top: 7px; right: 8px; width: 28px; height: 28px; padding: 0; border: 0; background: transparent; color: var(--rs3-muted); display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: none; } .rs3 .rs3-eye:hover, .rs3 .rs3-eye:focus { background: transparent; color: var(--rs3-muted); outline: none; } .rs3 .rs3-eye svg { width: 19px; height: 19px; display: block; } /* ---------- Password rules panel ------------------------------------------ */ .rs3-rules { border: 1px solid var(--rs3-border); border-radius: 8px; padding: 14px 16px; } .rs3-rules-head { margin: 0 0 10px; font: 400 14px/1.4 var(--rs3-font); color: var(--rs3-ink); } .rs3-rules-list { display: flex; flex-direction: column; gap: 7px; margin: 0; padding: 0; list-style: none; } .rs3-rule { display: flex; align-items: baseline; gap: 0; margin: 0; font: 400 13.5px/1.4 var(--rs3-font); color: var(--rs3-body); } .rs3-rule-mark { flex: 0 0 14px; width: 14px; font-weight: 700; color: var(--rs3-error); } .rs3-rule.is-ok .rs3-rule-mark { color: var(--rs3-success); } .rs3-rule-mark::before { content: '\2715'; } .rs3-rule.is-ok .rs3-rule-mark::before { content: '\2713'; } /* ---------- Divider + social buttons -------------------------------------- */ .rs3-divider { display: flex; align-items: center; gap: 14px; margin: 22px 0; } .rs3-divider::before, .rs3-divider::after { content: ''; flex: 1 1 auto; height: 1px; background: var(--rs3-border); } .rs3-divider span { font: 400 13.5px/1.3 var(--rs3-font); color: var(--rs3-subtle); white-space: nowrap; } .rs3-social { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .rs3 .rs3-social a, .rs3 .rs3-social button { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; height: auto; margin: 0; padding: 13px; border: 1px solid var(--rs3-border); border-radius: 8px; background: #fff; color: var(--rs3-ink); font: 500 14.5px/1.2 var(--rs3-font); text-transform: none; letter-spacing: 0; text-decoration: none; cursor: pointer; box-shadow: none; } .rs3 .rs3-social a:hover, .rs3 .rs3-social a:focus { background: #fff; color: var(--rs3-ink); } .rs3 .rs3-social img, .rs3 .rs3-social svg { width: 18px; height: 18px; display: block; flex: 0 0 18px; } /* ---------- Legal + footer lines ------------------------------------------ */ .rs3-legal { margin: 22px 0 0; font: 400 12.5px/1.6 var(--rs3-font); color: var(--rs3-subtle); text-align: center; } .rs3-legal a { color: var(--rs3-primary); text-decoration: none; } .rs3-legal a:hover { color: var(--rs3-primary-hover); } .rs3-foot { margin: 22px 0 0; font: 600 14.5px/1.3 var(--rs3-font); color: var(--rs3-ink); text-align: center; } .rs3-foot a { color: var(--rs3-primary); text-decoration: none; } .rs3-foot a:hover { color: var(--rs3-primary-hover); } .rs3-foot-login { margin-top: 34px; text-align: left; } /* ---------- OTP block ----------------------------------------------------- */ .rs3-otp-again { margin: 24px 0 10px; font: 400 14px/1.4 var(--rs3-font); color: var(--rs3-ink); } /* The shared component renders its own six boxes; give them the v3 input geometry without touching the component itself. */ .rs3 .otp_code, .rs3 input.otp_code { width: 46px !important; height: 52px !important; margin: 0 8px 0 0 !important; padding: 0 !important; border: 1px solid var(--rs3-border) !important; border-radius: 8px !important; background: #fff !important; box-shadow: none !important; font: 600 18px/50px var(--rs3-font) !important; color: var(--rs3-ink) !important; text-align: center; } .rs3 .otp_code:focus { border-color: var(--rs3-primary) !important; } /* ---------- Login tab switcher -------------------------------------------- */ .rs3-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 5px; background: var(--rs3-surface); border-radius: 9px; margin-bottom: 22px; } .rs3 .rs3-tab { display: block; width: 100%; height: auto; margin: 0; padding: 11px; border: 0; border-radius: 6px; background: transparent; color: var(--rs3-ink); font: 500 14.5px/1.2 var(--rs3-font); text-transform: none; letter-spacing: 0; text-align: center; text-decoration: none; cursor: pointer; box-shadow: none; } .rs3 .rs3-tab.is-active, .rs3 .rs3-tab.is-active:hover { background: #fff; box-shadow: var(--rs3-shadow-tab); } .rs3 .rs3-tab:hover, .rs3 .rs3-tab:focus { color: var(--rs3-ink); outline: none; } /* ---------- Checkbox rows ------------------------------------------------- */ /* flex-wrap so a jQuery-Validate message inserted after the checkbox drops onto its own line instead of squeezing the label. */ .rs3-check { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 10px; margin: 0 0 16px; } /* order pushes the message past the label: jQuery-Validate inserts it directly after the checkbox, which would otherwise split the row in two. */ .rs3-check > span.error, .rs3-check > label.error { order: 99; flex: 1 1 100%; margin-top: 0; font: 400 12.5px/1.45 var(--rs3-font) !important; color: var(--rs3-error) !important; } .rs3 .rs3-check input[type="checkbox"] { position: static; opacity: 1; width: 16px; height: 16px; margin: 1px 0 0; flex: 0 0 16px; accent-color: var(--rs3-primary); pointer-events: auto; } .rs3 .rs3-check label { font: 400 14px/1.4 var(--rs3-font); color: var(--rs3-ink); margin: 0; padding: 0; height: auto; line-height: 1.4; } .rs3 .rs3-check label::before, .rs3 .rs3-check label::after { display: none !important; content: none !important; } .rs3-consent label { font: 400 12px/1.5 var(--rs3-font) !important; color: var(--rs3-muted) !important; } /* ---------- Bullet lists -------------------------------------------------- */ .rs3-bullets { display: flex; flex-direction: column; gap: 10px; margin: 22px 0 0; padding-left: 18px; list-style: disc; } .rs3-bullets li { font: 400 12.5px/1.5 var(--rs3-font); color: var(--rs3-muted); } /* ---------- Role cards (step1) -------------------------------------------- */ .rs3-roles { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 18px; } .rs3 .rs3-role { display: flex; flex-direction: column; align-items: center; text-align: center; width: 100%; height: auto; margin: 0; padding: 20px 16px; border: 1px solid var(--rs3-border); border-radius: 10px; background: #fff; cursor: pointer; text-decoration: none; box-shadow: none; text-transform: none; letter-spacing: 0; } .rs3 .rs3-role:hover, .rs3 .rs3-role:focus { background: #fff; outline: none; } .rs3 .rs3-role.is-selected { border: 2px solid var(--rs3-primary); padding: 19px 15px; /* keep the box the same size as unselected */ } .rs3-role-photo { display: block; width: 76px; height: 76px; border-radius: 999px; overflow: hidden; background: var(--rs3-surface); margin-bottom: 12px; } .rs3-role-photo img { width: 100%; height: 100%; object-fit: cover; display: block; } .rs3-role-title { margin: 0 0 6px; font: 600 16px/1.3 var(--rs3-font); color: var(--rs3-ink); } .rs3-role-desc { display: block; font: 400 12.5px/1.5 var(--rs3-font); color: var(--rs3-muted); } /* ---------- Sector dropdown (custom, not a native select) ----------------- */ .rs3-select { position: relative; } .rs3 .rs3-select-btn { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; height: auto; margin: 0; padding: 12px 14px; border: 1px solid var(--rs3-border); border-radius: 8px; background: #fff; font: 400 15px/1.4 var(--rs3-font); color: var(--rs3-ink); text-align: left; text-transform: none; letter-spacing: 0; cursor: pointer; box-shadow: none; } .rs3 .rs3-select-btn:hover, .rs3 .rs3-select-btn:focus { background: #fff; outline: none; } .rs3 .rs3-select-btn.is-empty { color: var(--rs3-placeholder); } .rs3-select-btn .rs3-select-value { display: flex; align-items: center; gap: 12px; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .rs3-select-btn .rs3-select-value img { width: 24px; height: 24px; object-fit: contain; flex: 0 0 24px; } .rs3-select-caret { flex: 0 0 auto; color: var(--rs3-muted); font-size: 12px; line-height: 1; } .rs3-select-panel { position: absolute; left: 0; right: 0; bottom: calc(100% + 6px); background: #fff; border: 1px solid var(--rs3-border); border-radius: 8px; box-shadow: var(--rs3-shadow-dropdown); padding: 6px; max-height: 280px; overflow-y: auto; z-index: 5; margin: 0; list-style: none; } .rs3 .rs3-select-option { display: flex; align-items: center; gap: 12px; width: 100%; margin: 0; padding: 9px 12px; border: 0; border-radius: 6px; background: transparent; font: 400 14.5px/1.3 var(--rs3-font); color: var(--rs3-ink); white-space: nowrap; text-align: left; text-transform: none; letter-spacing: 0; cursor: pointer; box-shadow: none; } .rs3 .rs3-select-option:hover, .rs3 .rs3-select-option:focus, .rs3 .rs3-select-option.is-active { background: var(--rs3-surface); outline: none; } .rs3-select-option img { width: 30px; height: 30px; object-fit: contain; flex: 0 0 30px; } /* ---------- Benefits panel (step1) ---------------------------------------- */ .rs3-benefits { border: 1px solid var(--rs3-border); border-radius: 10px; background: var(--rs3-surface-alt); padding: 18px 18px 14px; margin-top: 16px; } .rs3-benefits-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 16px; } .rs3-benefits-head-text { max-width: 240px; } .rs3-benefits-title { margin: 0 0 4px; font: 700 14.5px/1.35 var(--rs3-font); color: var(--rs3-ink); } .rs3-benefits-sub { margin: 0; font: 500 12px/1.45 var(--rs3-font); color: var(--rs3-muted); } .rs3-benefits-logo { width: 42px; height: 42px; object-fit: contain; flex: 0 0 42px; } .rs3-benefits-list { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 18px; margin: 0; padding: 0; list-style: none; } .rs3-benefit { display: flex; align-items: flex-start; gap: 10px; font: 400 12.5px/1.4 var(--rs3-font); color: var(--rs3-body); } .rs3-benefit-icon { flex: 0 0 22px; width: 22px; height: 22px; border-radius: 999px; background: var(--rs3-primary-tint); display: flex; align-items: center; justify-content: center; } .rs3-benefit-icon svg { width: 12px; height: 12px; display: block; color: var(--rs3-primary); } .rs3-benefits-foot { margin: 15px 0 0; padding-top: 13px; border-top: 1px solid var(--rs3-border); font: 400 12.5px/1.4 var(--rs3-font); color: var(--rs3-body); text-align: center; } .rs3-benefits-foot strong { font-weight: 700; } /* ---------- Terminal screens ---------------------------------------------- */ .rs3-terminal { padding-top: 60px; text-align: center; } .rs3-terminal .rs3-title { margin-bottom: 14px; } .rs3-terminal p { margin: 0 0 26px; font: 400 14.5px/1.6 var(--rs3-font); color: var(--rs3-body); } /* ---------- Post-signup "Account created" screen -------------------------- */ /* The card keeps its geometry; only this screen's pane scrolls, because the benefits list is taller than 640px on the narrower form pane. */ .rs3-pane-wide { overflow-y: auto; max-height: 100vh; } .rs3-success { text-align: center; padding-top: 24px; } .rs3-success .rs3-title { margin-bottom: 10px; } .rs3-success-lead { margin: 0 0 26px; font: 400 14.5px/1.6 var(--rs3-font); color: var(--rs3-body); } .rs3-success-badge { position: relative; width: 74px; height: 74px; margin: 0 auto 18px; } .rs3-success-circle { position: absolute; inset: 0; border-radius: 999px; background: var(--rs3-success); display: flex; align-items: center; justify-content: center; } .rs3-confetti { position: absolute; width: 6px; height: 6px; border-radius: 999px; background: var(--rs3-primary); } .rs3-confetti.d1 { top: -4px; left: 8px; background: var(--rs3-primary); } .rs3-confetti.d2 { top: 4px; right: -6px; background: var(--rs3-success); } .rs3-confetti.d3 { bottom: -2px; left: -4px; background: #e0a200; } .rs3-confetti.d4 { bottom: 6px; right: 0; background: var(--rs3-primary); width: 5px; height: 5px; } .rs3-confetti.d5 { top: 18px; left: -10px; background: #8a55c8; width: 5px; height: 5px; } .rs3-confetti.d6 { top: -2px; right: 14px; background: #e0a200; width: 5px; height: 5px; } .rs3-success-amazing { text-align: center; margin-bottom: 18px; } .rs3-success-amazing-title { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 0 0 6px; font: 700 14.5px/1.35 var(--rs3-font); color: var(--rs3-ink); } .rs3-success-amazing p { margin: 0; font: 400 12.5px/1.5 var(--rs3-font); color: var(--rs3-muted); } .rs3-ms-ico { display: block; } .rs3-feature-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 18px; } .rs3-feature { display: flex; align-items: flex-start; gap: 10px; } .rs3-feature-icon { flex: 0 0 30px; width: 30px; height: 30px; border-radius: 999px; background: var(--rs3-primary-tint); display: flex; align-items: center; justify-content: center; } .rs3-feature h3 { margin: 0 0 2px; font: 600 13px/1.3 var(--rs3-font); color: var(--rs3-ink); } .rs3-feature p { margin: 0; font: 400 12.5px/1.4 var(--rs3-font); color: var(--rs3-muted); } .rs3-demo { display: flex; align-items: center; gap: 12px; margin-top: 18px; padding: 14px 16px; border-radius: 10px; background: var(--rs3-primary); color: #fff; } .rs3-demo-icon { flex: 0 0 34px; width: 34px; height: 34px; border-radius: 999px; background: rgba(255, 255, 255, .18); display: flex; align-items: center; justify-content: center; } .rs3-demo-text { flex: 1 1 auto; min-width: 0; } .rs3-demo-text h3 { margin: 0 0 2px; font: 600 13.5px/1.3 var(--rs3-font); color: #fff; } .rs3-demo-text p { margin: 0; font: 400 12px/1.45 var(--rs3-font); color: rgba(255, 255, 255, .82); } .rs3 .rs3-demo-btn { flex: 0 0 auto; padding: 9px 14px; border: 0; border-radius: 8px; background: #fff; color: var(--rs3-primary); font: 600 13px/1.2 var(--rs3-font); text-transform: none; letter-spacing: 0; text-decoration: none; box-shadow: none; height: auto; white-space: nowrap; } .rs3 .rs3-demo-btn:hover, .rs3 .rs3-demo-btn:focus { background: #fff; color: var(--rs3-primary); } /* ---------- Spacing utilities used by the screens ------------------------- */ .rs3-mb-0 { margin-bottom: 0 !important; } .rs3-mb-14 { margin-bottom: 14px !important; } .rs3-mb-16 { margin-bottom: 16px !important; } .rs3-mb-18 { margin-bottom: 18px !important; } .rs3-mb-22 { margin-bottom: 22px !important; } .rs3-mb-26 { margin-bottom: 26px !important; } .rs3-mt-14 { margin-top: 14px !important; } .rs3-mt-18 { margin-top: 18px !important; } .rs3-stack-14 { display: flex; flex-direction: column; gap: 14px; } .rs3-full { grid-column: 1 / -1; } /* Mobile-number composite: the country-code select and the number share one bordered box so it reads as the single field the design shows. */ /* !important on border/radius: this element also carries `learner-mobile` (the hook RegisterV2Controller's errorPlacement looks for), and the theme stylesheets — which load after this file — give that class a 10px radius and their own border colour. */ .rs3-tel { display: flex; align-items: stretch; border: 1px solid var(--rs3-border) !important; border-radius: 8px !important; overflow: hidden; background: #fff; } .rs3-tel:hover { border-color: var(--rs3-border) !important; } .rs3-tel:focus-within { border-color: var(--rs3-primary) !important; } .rs3-tel.error-border { border-color: var(--rs3-error) !important; } .rs3-tel .rs3-tel-code { flex: 0 0 96px; width: 96px; border: 0 !important; border-right: 1px solid var(--rs3-border) !important; border-radius: 0 !important; background-position: right 8px center !important; padding: 12px 26px 12px 12px !important; } .rs3 .rs3-tel input.rs3-input { flex: 1 1 auto; min-width: 0; border: 0 !important; border-radius: 0 !important; } .rs3 .rs3-tel input.rs3-input:focus { border: 0 !important; } /* select2 renders the dialling code as flag + "+44"; make its container behave exactly like the 96px code cell it replaces. */ .rs3 .rs3-tel .select2-container { flex: 0 0 96px; width: 96px !important; border-right: 1px solid var(--rs3-border); } .rs3 .rs3-tel .select2-container .select2-selection--single { height: 100%; min-height: 44px; border: 0; border-radius: 0; background: #fff; display: flex; align-items: center; outline: none; } .rs3 .rs3-tel .select2-container .select2-selection__rendered { padding: 0 12px; font: 400 15px/1.4 var(--rs3-font); color: var(--rs3-ink); display: flex; align-items: center; gap: 6px; } .rs3 .rs3-tel .select2-container .select2-selection__arrow { top: 50%; transform: translateY(-50%); right: 4px; } .rs3 .rs3-tel .select2-container .img-flag { display: inline-block; } /* The signup page's Angular section is only a wrapper here; the v3 layer owns the page shell, so nothing may add padding or a background around it. */ html.rs3-html #signUpController { display: block !important; padding: 0 !important; margin: 0 !important; background: transparent !important; min-height: 0 !important; } /* reCAPTCHA v3 badge container the controller renders into. The design has no badge, which Google permits as long as the notice is in the copy — it is, in the legal paragraph on the signup screen. Parked in the corner rather than display:none'd, so grecaptcha.render/execute still has a live element. */ html.rs3-html #inline-badge-4, html.rs3-html .rs3-recaptcha { position: fixed; left: 16px; bottom: 16px; z-index: 1; opacity: 0; pointer-events: none; } html.rs3-html > body > #captcha_error, html.rs3-html #signUpController > .cls_error { position: fixed; left: 16px; bottom: 16px; z-index: 6; font: 400 12.5px/1.45 var(--rs3-font); color: var(--rs3-error); } .rs3 .cls_error { font: 400 12.5px/1.45 var(--rs3-font); color: var(--rs3-error); } /* ============================================================================= Legacy-markup compatibility — password-recovery steps only. getResetSection() injects auth/passwords/main-*-new, primary-*, and resetpassword_new into #reset_wrapper over AJAX. Those partials are also used by the logged-in account-settings reset flow, so their markup must not change; instead everything below re-expresses their existing classes in v3 tokens, and applies ONLY inside .rs3 — the account-settings context is untouched. ========================================================================== */ .rs3 > .rs3-stage > .rs3-card > .col_50:not(.hide_mobile) { flex: 0 0 54%; max-width: 54%; padding: 38px 44px 44px; background: #fff; order: 1; } .rs3 > .rs3-stage > .rs3-card > .col_50.hide_mobile { flex: 0 0 46%; max-width: 46%; padding: 0; position: relative; overflow: hidden; order: 2; } .rs3 .col_50.hide_mobile .inner_log { height: 100%; position: relative; } .rs3 .col_50.hide_mobile .inner_log img.w-100 { width: 100% !important; height: 100% !important; max-height: none !important; object-fit: cover; display: block; } /* Same darkening wash + corner slogan as the v3 photo pane, applied to the legacy markup the AJAX steps bring with them (they ship their own .rs-panel-slogan with the right copy for the recovery journey). */ .rs3 .col_50.hide_mobile .inner_log::after { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(147deg, rgba(0, 0, 0, 0) 47%, rgba(0, 0, 0, .38) 78%, rgba(0, 0, 0, .62) 100%); } .rs3 .rs-panel-slogan { position: absolute; right: 0; bottom: 28px; z-index: 2; width: max-content; margin: 0; padding-right: 24px; color: #fff !important; font: 600 44px/1.18 var(--rs3-font) !important; text-align: left; text-shadow: 0 2px 4px rgba(0, 0, 0, .35); } /* The logo overlays are not part of the v3 photo pane. */ .rs3 .logo_stake, .rs3 .log_sign_logo, .rs3 .backtopbtn, .rs3 .btn-cricle, .rs3 .row_submit .btn-cricle, .rs3 .reset-back-iocn { display: none !important; } /* The legacy .inside_form centres itself vertically; the v3 pane is top-aligned. */ .rs3 .inside_form { display: block !important; width: 100%; height: auto !important; min-height: 0 !important; padding: 0 !important; margin: 0 !important; justify-content: flex-start !important; overflow: visible !important; } .rs3 .group_select { width: 100%; margin: 0 !important; padding: 0 !important; } .rs3 .inside_form .title3, .rs3 .reset_pass_h2_text { margin: 0 0 22px; font: 600 23px/1.2 var(--rs3-font) !important; color: var(--rs3-ink) !important; text-align: center; text-transform: none; } .rs3 .input-field { position: relative; margin: 0 0 16px !important; } .rs3 .input-field .label-form, .rs3 .label-form { display: block; margin: 0 0 7px; font: 600 13px/1.3 var(--rs3-font) !important; color: var(--rs3-ink) !important; } .rs3 .label-form em { color: var(--rs3-error); font-style: normal; } .rs3 .input-field input[type="text"], .rs3 .input-field input[type="email"], .rs3 .input-field input[type="password"], .rs3 .input-field input[type="number"] { display: block; box-sizing: border-box; width: 100%; height: auto; margin: 0; padding: 12px 14px; border: 1px solid var(--rs3-border); border-radius: 8px; background: #fff; box-shadow: none; font: 400 15px/1.4 var(--rs3-font); color: var(--rs3-ink); outline: none; } .rs3 .input-field input[type="text"]:focus, .rs3 .input-field input[type="email"]:focus, .rs3 .input-field input[type="password"]:focus { border: 1px solid var(--rs3-primary); box-shadow: none; } .rs3 .input-field input::placeholder { color: var(--rs3-placeholder); opacity: 1; } .rs3 .para_other, .rs3 .get_verification_text { margin: 7px 0 0; font: 400 12.5px/1.5 var(--rs3-font) !important; color: var(--rs3-muted) !important; } .rs3 .mt-30.para_other { margin-top: 22px; } .rs3 .error, .rs3 .mail-error-text, .rs3 span.error, .rs3 label.error { display: block; margin: 7px 0 0; font: 400 12.5px/1.45 var(--rs3-font) !important; color: var(--rs3-error) !important; } .rs3 .alert-warning { margin: 0 0 16px; padding: 0; border: 0; background: transparent; font: 400 12.5px/1.45 var(--rs3-font); color: var(--rs3-error); } /* Legacy primary buttons take the v3 primary shape. !important throughout: the app's own stylesheets are linked after this one (layouts/app.blade.php yields 'head' at line 227 and loads more CSS below it), so they would otherwise win on the pill radius and the red fill. */ .rs3 .btn.btn-red, .rs3 button.btn-red, .rs3 .btn.btn-gray { display: block !important; width: 100% !important; height: auto !important; min-width: 0 !important; margin: 0 !important; padding: 14px !important; border: 0 !important; border-radius: 8px !important; background: var(--rs3-primary) !important; background-image: none !important; color: #fff !important; font: 600 15px/1.2 var(--rs3-font) !important; text-align: center !important; text-transform: none !important; letter-spacing: 0 !important; text-decoration: none !important; box-shadow: none !important; } .rs3 .btn.btn-red:hover, .rs3 .btn.btn-red:focus, .rs3 button.btn-red:hover, .rs3 button.btn-red:focus { background: var(--rs3-primary) !important; color: #fff !important; } .rs3 .rightarrow-icon::after, .rs3 .rightarrow-icon::before { display: none !important; content: none !important; } /* Password visibility toggles in the legacy markup. */ .rs3 .input-group-new { position: relative; } .rs3 .input-group-new input { padding-right: 42px !important; } .rs3 .input-group-new .input-group-text { position: absolute; top: 7px; right: 8px; width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; background: transparent; border: 0; color: var(--rs3-muted); cursor: pointer; z-index: 2; } .rs3 .row_submit, .rs3 .row_submit2 { margin: 0; padding: 0; border: 0; } .rs3 .Account-recovery { margin-top: 18px; } /* ============================================================================= Responsive — the design is desktop-first and fixed width. Below the card width the page scrolls horizontally, as specified. On real phones that is unusable, so at <=767px the photo pane drops and the form fills the viewport (the "obvious adaptation" the handoff names, pending a designed mobile view). ========================================================================== */ @media (max-width: 1180px) { .rs3 { padding-left: 60px; padding-right: 60px; } } @media (max-width: 767px) { .rs3 { padding: 16px 12px 28px; overflow-x: hidden; } .rs3-stage { width: 100%; } .rs3-card { width: 100%; min-height: 0; border-radius: 14px; } .rs3-pane-photo { display: none; } /* The nav circles move inside the card on phones, so the form starts below them (nav is 42px tall at top:10px). */ .rs3-pane-form { flex: 1 1 100%; max-width: 100%; padding: 64px 18px 28px; } .rs3 > .rs3-stage > .rs3-card > .col_50:not(.hide_mobile) { flex: 1 1 100%; max-width: 100%; padding: 64px 18px 28px; } .rs3 > .rs3-stage > .rs3-card > .col_50.hide_mobile { display: none !important; } .rs3-nav { top: 10px; } .rs3-nav-back { left: 10px; } .rs3-nav-close { right: 10px; } .rs3-grid { grid-template-columns: 1fr; } .rs3-roles { grid-template-columns: 1fr; } .rs3-benefits-list { grid-template-columns: 1fr; } .rs3-social { grid-template-columns: 1fr; gap: 10px; } .rs3-head-row { flex-direction: column; align-items: flex-start; gap: 4px; } .rs3-welcome { text-align: left; } .rs3-select-panel { bottom: auto; top: calc(100% + 6px); } .rs3 .otp_code { width: 40px !important; margin-right: 6px !important; } .rs3-feature-grid { grid-template-columns: 1fr; } .rs3-pane-wide { max-height: none; } .rs3-demo { flex-wrap: wrap; } .rs3 .rs3-demo-btn { width: 100%; text-align: center; } }