/* ========================================================================== RemitZap design system — token layer + portal shell Source: design_handoff_remitzap_portal/README.md Two palettes ship together and switch on the `data-theme` attribute of : "light" = Midnight Light (1a), "dark" = Nocturne (1c). Markup is identical between them; only the custom properties below change. Everything here is namespaced `rz-` so it never fights the purchased theme in style.css. Do not reuse the legacy `.sidebar` / `.navbar-wrapper` class names for styling — they carry vendor rules. ========================================================================== */ /* -------------------------------------------------------------------------- 1. Palettes -------------------------------------------------------------------------- */ :root, :root[data-theme="light"] { --rz-bg: #F4F6F9; --rz-panel: #FFFFFF; --rz-card: #FFFFFF; --rz-border: #ECEEF2; --rz-hair: #EDEFF3; --rz-fill: #F3F5F8; --rz-text: #0B0D12; --rz-t2: #6B7280; --rz-muted: #9AA1AC; --rz-acc: #0D6EFD; --rz-tint: #EAF2FF; --rz-onacc: #FFFFFF; --rz-success: #12A150; --rz-success-bg: #E7F6EE; --rz-warn: #C77D0A; --rz-warn-bg: #FBF1E1; --rz-info: #0D6EFD; --rz-info-bg: #EAF2FF; --rz-danger: #E5484D; --rz-danger-bg: #FCEBEB; --rz-shadow: 0 1px 2px rgba(11, 13, 18, .04), 0 10px 28px rgba(11, 13, 18, .06); --rz-shadow-acc: 0 6px 18px rgba(13, 110, 253, .28); --rz-scroll-thumb: rgba(120, 130, 145, .35); color-scheme: light; } :root[data-theme="dark"] { --rz-bg: #0A0C10; --rz-panel: #0F131A; --rz-card: #141922; --rz-border: #232A36; --rz-hair: #1E242F; --rz-fill: #1A2029; --rz-text: #F3F5F8; --rz-t2: #98A2B3; --rz-muted: #69727F; --rz-acc: #4C8DFF; --rz-tint: #16233B; --rz-onacc: #FFFFFF; --rz-success: #34D399; --rz-success-bg: #10281F; --rz-warn: #FBBF24; --rz-warn-bg: #2A2310; --rz-info: #4C8DFF; --rz-info-bg: #16233B; --rz-danger: #F87171; --rz-danger-bg: #2A1615; --rz-shadow: 0 1px 2px rgba(0, 0, 0, .5), 0 14px 34px rgba(0, 0, 0, .5); --rz-shadow-acc: 0 6px 18px rgba(76, 141, 255, .3); --rz-scroll-thumb: rgba(150, 160, 175, .3); color-scheme: dark; } /* -------------------------------------------------------------------------- 2. Shared scale — type, radii, spacing -------------------------------------------------------------------------- */ :root { --rz-font-display: 'Sora', system-ui, sans-serif; --rz-font-body: 'Inter', system-ui, sans-serif; --rz-font-num: 'Space Grotesk', ui-monospace, monospace; --rz-r: 16px; /* cards */ --rz-r-ctrl: 12px; /* inner controls */ --rz-r-ctrl-lg: 14px; --rz-r-pill: 999px; --rz-pad-page: 28px; /* page padding 26–28 */ --rz-pad-card: 22px; /* card padding 20–24 */ --rz-sidebar-w: 248px; --rz-header-h: 74px; --rz-ease: .2s ease; } /* -------------------------------------------------------------------------- 3. Base -------------------------------------------------------------------------- */ .rz-portal { margin: 0; background: var(--rz-bg); color: var(--rz-text); font-family: var(--rz-font-body); font-size: 15px; line-height: 1.6; -webkit-font-smoothing: antialiased; } .rz-portal *, .rz-portal *::before, .rz-portal *::after { box-sizing: border-box; } /* Only unclassed anchors take the accent colour. Scoping with :not([class]) keeps this at specificity (0,1,1) without out-ranking the single-class component rules below (.rz-nav__link, .rz-btn, ...), which set their own. */ .rz-portal a { text-decoration: none; transition: color var(--rz-ease); } .rz-portal a:not([class]) { color: var(--rz-acc); } .rz-portal a:not([class]):hover { opacity: .82; } .rz-portal h1, .rz-portal h2, .rz-portal h3, .rz-portal h4, .rz-portal h5, .rz-portal h6, .rz-display { font-family: var(--rz-font-display); font-weight: 700; letter-spacing: -0.02em; color: var(--rz-text); margin: 0; } .rz-num { font-family: var(--rz-font-num); font-variant-numeric: tabular-nums; } .rz-portal ::-webkit-scrollbar { width: 8px; height: 8px; } .rz-portal ::-webkit-scrollbar-thumb { background: var(--rz-scroll-thumb); border-radius: 8px; } .rz-portal ::-webkit-scrollbar-track { background: transparent; } /* Accessible focus ring — the prototype omits one; we must not. */ .rz-portal :focus-visible { outline: 2px solid var(--rz-acc); outline-offset: 2px; border-radius: 4px; } /* -------------------------------------------------------------------------- 4. Portal shell — sidebar / header / content -------------------------------------------------------------------------- */ .rz-shell { display: flex; min-height: 100vh; } /* --- Sidebar --- */ .rz-sidebar { width: var(--rz-sidebar-w); flex-shrink: 0; background: var(--rz-panel); border-right: 1px solid var(--rz-hair); display: flex; flex-direction: column; padding: 26px 18px; position: fixed; inset: 0 auto 0 0; z-index: 1030; overflow-y: auto; transition: transform .25s ease; } .rz-sidebar__logo { padding: 0 8px 26px; } .rz-sidebar__logo img { height: 72px; display: block; max-width: 100%; object-fit: contain; } .rz-nav { display: flex; flex-direction: column; gap: 4px; list-style: none; margin: 0; padding: 0; } .rz-nav__link { display: flex; align-items: center; gap: 13px; padding: 11px 12px; border-radius: var(--rz-r-ctrl); font-weight: 500; font-size: 15px; color: var(--rz-t2); transition: background var(--rz-ease), color var(--rz-ease); } .rz-nav__link:hover { background: var(--rz-fill); color: var(--rz-text); opacity: 1; } .rz-nav__icon { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--rz-tint); color: var(--rz-acc); font-size: 18px; flex-shrink: 0; transition: background var(--rz-ease), color var(--rz-ease); } .rz-nav__link.is-active { background: var(--rz-tint); color: var(--rz-text); font-weight: 600; } .rz-nav__link.is-active .rz-nav__icon { background: var(--rz-acc); color: var(--rz-onacc); } /* --- Help Center card --- */ .rz-support-card { margin-top: auto; background: linear-gradient(160deg, var(--rz-acc), #3B8CFF); border-radius: var(--rz-r); padding: 20px; color: #fff; } .rz-support-card__icon { width: 40px; height: 40px; border-radius: 11px; background: rgba(255, 255, 255, .18); display: grid; place-items: center; font-size: 22px; } .rz-support-card__title { font-family: var(--rz-font-display); font-weight: 700; font-size: 16px; margin: 14px 0 4px; color: #fff; } .rz-support-card__text { font-size: 13px; opacity: .85; line-height: 1.5; margin: 0; } .rz-support-card__btn { display: block; margin-top: 14px; background: #fff; color: var(--rz-acc); text-align: center; font-weight: 600; font-size: 14px; padding: 9px; border-radius: var(--rz-r-pill); transition: opacity var(--rz-ease); } .rz-support-card__btn:hover { color: var(--rz-acc); opacity: .9; } /* --- Main column --- */ .rz-main { flex: 1; display: flex; flex-direction: column; min-width: 0; margin-left: var(--rz-sidebar-w); } .rz-header { height: var(--rz-header-h); flex-shrink: 0; background: var(--rz-panel); border-bottom: 1px solid var(--rz-hair); display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 0 var(--rz-pad-page); position: sticky; top: 0; z-index: 1020; } .rz-header__title { font-family: var(--rz-font-display); font-weight: 700; font-size: 20px; letter-spacing: -0.02em; line-height: 1.25; } .rz-header__crumb { font-size: 12.5px; color: var(--rz-muted); } /* Scoped with .rz-portal to out-rank `.rz-portal a:not([class])`, whose :not([class]) argument contributes attribute-selector specificity. */ .rz-portal .rz-header__crumb a { color: inherit; } .rz-portal .rz-header__crumb a:hover { color: var(--rz-acc); } .rz-header__actions { display: flex; align-items: center; gap: 14px; } .rz-content { flex: 1; padding: var(--rz-pad-page); min-width: 0; } /* --- Mobile shell --- */ .rz-nav-toggle { display: none; width: 42px; height: 42px; border-radius: var(--rz-r-ctrl); border: 1px solid var(--rz-border); background: var(--rz-panel); color: var(--rz-t2); font-size: 20px; align-items: center; justify-content: center; cursor: pointer; } .rz-overlay { display: none; position: fixed; inset: 0; background: rgba(0, 0, 0, .45); z-index: 1029; } .rz-overlay.is-open { display: block; } @media (max-width: 991px) { .rz-sidebar { transform: translateX(-100%); } .rz-sidebar.is-open { transform: translateX(0); } .rz-main { margin-left: 0; } .rz-nav-toggle { display: inline-flex; } } @media (max-width: 575px) { :root { --rz-pad-page: 18px; } .rz-header__actions { gap: 8px; } } /* -------------------------------------------------------------------------- 5. Primitives -------------------------------------------------------------------------- */ /* --- Card --- */ .rz-card { background: var(--rz-card); border: 1px solid var(--rz-border); border-radius: var(--rz-r); padding: var(--rz-pad-card); box-shadow: var(--rz-shadow); } .rz-card--flat { box-shadow: none; } /* --- Buttons --- */ .rz-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-family: var(--rz-font-body); font-weight: 600; font-size: 14px; line-height: 1; padding: 12px 20px; border-radius: var(--rz-r-pill); border: 1px solid transparent; cursor: pointer; transition: background var(--rz-ease), color var(--rz-ease), box-shadow var(--rz-ease), opacity var(--rz-ease); } .rz-btn--primary { background: var(--rz-acc); color: var(--rz-onacc); box-shadow: var(--rz-shadow-acc); } .rz-btn--primary:hover { color: var(--rz-onacc); opacity: .92; } .rz-btn--secondary { background: var(--rz-fill); color: var(--rz-text); border-color: var(--rz-border); } .rz-btn--secondary:hover { background: var(--rz-panel); color: var(--rz-text); opacity: 1; } .rz-btn--ghost { background: transparent; color: var(--rz-t2); border-color: var(--rz-border); } .rz-btn--ghost:hover { background: var(--rz-fill); color: var(--rz-text); opacity: 1; } .rz-btn:disabled, .rz-btn.is-disabled { opacity: .5; pointer-events: none; } /* --- Icon button (bell, theme toggle) --- */ .rz-icon-btn { width: 42px; height: 42px; flex-shrink: 0; border-radius: var(--rz-r-ctrl); border: 1px solid var(--rz-border); background: var(--rz-panel); color: var(--rz-t2); font-size: 20px; display: inline-grid; place-items: center; position: relative; cursor: pointer; transition: background var(--rz-ease), color var(--rz-ease); } .rz-icon-btn:hover { background: var(--rz-fill); color: var(--rz-text); } .rz-icon-btn__dot { position: absolute; top: 9px; right: 10px; width: 8px; height: 8px; border-radius: 50%; background: var(--rz-danger); border: 2px solid var(--rz-panel); } /* --- Pill (language select, EN chevron) --- */ .rz-pill { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--rz-border); background: var(--rz-panel); color: var(--rz-text); border-radius: var(--rz-r-pill); padding: 8px 14px; font-size: 14px; font-weight: 500; } /* Native select styled as the design's EN pill — keeps keyboard a11y. */ select.rz-pill { appearance: none; -webkit-appearance: none; padding-right: 32px; cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2 4l4 4 4-4' fill='none' stroke='%239AA1AC' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 13px center; } /* --- Search field --- */ .rz-search { display: flex; align-items: center; gap: 8px; background: var(--rz-fill); border: 1px solid var(--rz-border); border-radius: var(--rz-r-pill); padding: 9px 16px; width: 220px; color: var(--rz-muted); } .rz-search i { font-size: 17px; flex-shrink: 0; } .rz-search input { border: 0; background: transparent; outline: none; width: 100%; min-width: 0; font-size: 14px; font-family: inherit; color: var(--rz-text); } .rz-search input::placeholder { color: var(--rz-muted); } /* --- Form controls --- */ .rz-input, .rz-select, .rz-textarea { width: 100%; background: var(--rz-fill); border: 1px solid var(--rz-border); border-radius: var(--rz-r-ctrl-lg); padding: 13px 16px; font-family: inherit; font-size: 15px; color: var(--rz-text); transition: border-color var(--rz-ease), background var(--rz-ease); } .rz-input::placeholder, .rz-textarea::placeholder { color: var(--rz-muted); } .rz-input:focus, .rz-select:focus, .rz-textarea:focus { border-color: var(--rz-acc); background: var(--rz-panel); } .rz-label { display: block; font-size: 13.5px; font-weight: 500; color: var(--rz-t2); margin-bottom: 8px; } /* --- Status chips --- */ .rz-chip { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; padding: 5px 12px; border-radius: var(--rz-r-pill); font-size: 12.5px; font-weight: 600; line-height: 1.4; background: var(--rz-fill); color: var(--rz-t2); } .rz-chip--success { background: var(--rz-success-bg); color: var(--rz-success); } .rz-chip--warn { background: var(--rz-warn-bg); color: var(--rz-warn); } .rz-chip--info { background: var(--rz-info-bg); color: var(--rz-info); } .rz-chip--danger { background: var(--rz-danger-bg); color: var(--rz-danger); } /* --- Avatar --- */ .rz-avatar { width: 42px; height: 42px; border-radius: 50%; flex-shrink: 0; display: grid; place-items: center; overflow: hidden; background: linear-gradient(150deg, var(--rz-acc), #7AB0FF); color: #fff; font-family: var(--rz-font-display); font-weight: 700; font-size: 15px; letter-spacing: -0.01em; } .rz-avatar img { width: 100%; height: 100%; object-fit: cover; } .rz-avatar--sq { border-radius: 12px; } /* --- Divider --- */ .rz-hair { height: 1px; background: var(--rz-hair); border: 0; margin: 0; } /* -------------------------------------------------------------------------- 6. Page loader -------------------------------------------------------------------------- Shared by the marketing site and the portal. `.preloader` is retained on the element because main.js fades it out on window load; these rules load after the vendor stylesheet and so win the (0,1,0) tie. */ .rz-loader { position: fixed; inset: 0; z-index: 9999999; background: var(--rz-panel); display: grid; place-items: center; } .rz-loader__inner { display: flex; flex-direction: column; align-items: center; gap: 22px; } .rz-loader__logo { height: 56px; width: auto; display: block; animation: rz-loader-pulse 1.8s ease-in-out infinite; } /* Indeterminate track — the app cannot report real progress here, so the bar loops rather than pretending to measure something. */ .rz-loader__bar { width: 168px; height: 3px; border-radius: var(--rz-r-pill); background: var(--rz-fill); overflow: hidden; position: relative; } .rz-loader__bar span { position: absolute; inset: 0 auto 0 0; width: 40%; border-radius: inherit; background: var(--rz-acc); animation: rz-loader-slide 1.15s cubic-bezier(.65, .05, .36, 1) infinite; } @keyframes rz-loader-slide { 0% { left: -40%; width: 40%; } 50% { width: 55%; } 100% { left: 100%; width: 40%; } } @keyframes rz-loader-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .55; } } @media (prefers-reduced-motion: reduce) { .rz-loader__logo { animation: none; } .rz-loader__bar span { animation: none; left: 0; width: 100%; opacity: .6; } } /* -------------------------------------------------------------------------- 7. Legacy theme compatibility -------------------------------------------------------------------------- */ /* The old shell put page content inside `.body-wrapper`, which style.css indents by the old 285px sidebar width. `.rz-content` now owns page padding, so neutralise it for the 18 views that still use the wrapper. Remove these rules once every page has been migrated off `.body-wrapper`. */ .rz-portal .rz-content .body-wrapper { padding: 0; margin: 0; } .rz-portal .rz-content > .body-wrapper > .row:first-child { margin-top: 0; } /* -------------------------------------------------------------------------- 8. Header notification dropdown -------------------------------------------------------------------------- */ .rz-notify { position: relative; } .rz-notify__panel { position: absolute; top: calc(100% + 10px); right: 0; width: 320px; max-height: 380px; overflow-y: auto; background: var(--rz-card); border: 1px solid var(--rz-border); border-radius: var(--rz-r); box-shadow: var(--rz-shadow); padding: 8px; display: none; z-index: 1040; } .rz-notify__panel.is-open { display: block; } .rz-notify__header { padding: 10px 12px 12px; border-bottom: 1px solid var(--rz-hair); font-family: var(--rz-font-display); font-weight: 700; font-size: 15px; } .rz-notify__list { list-style: none; margin: 0; padding: 4px 0 0; } .rz-notify__item { display: flex; gap: 12px; padding: 11px 12px; border-radius: var(--rz-r-ctrl); } .rz-notify__item:hover { background: var(--rz-fill); } .rz-notify__msg { font-size: 14px; color: var(--rz-text); margin: 0; } .rz-notify__time { font-size: 12px; color: var(--rz-muted); } .rz-notify__empty { padding: 18px 12px; text-align: center; font-size: 14px; color: var(--rz-muted); } /* -------------------------------------------------------------------------- 9. select2 -------------------------------------------------------------------------- select2 appends its dropdown to , outside both `.rz-site` and `.rz-portal`, so these rules are deliberately unscoped. They load after select2.css and match its own selector weight, so ties go to us. Colours come from the tokens, so both themes are covered. */ .select2-container { width: 100% !important; } /* --- closed control: mirror .rz-input --- style.css marks height, background, border (line ~2356) and border-radius (line ~7153) as !important, so those four have to be reclaimed the same way. The rest are normal declarations. */ .select2-container--default .select2-selection--single { height: 49px !important; /* matches .rz-input's computed height */ display: flex; align-items: center; background: var(--rz-fill) !important; border: 1px solid var(--rz-border) !important; border-radius: var(--rz-r-ctrl-lg) !important; padding: 0 14px; transition: border-color var(--rz-ease), background var(--rz-ease); } /* `.select2-selection--single span` in style.css greys and bolds the label. */ .select2-container--default .select2-selection--single span.select2-selection__rendered { color: var(--rz-text); font-weight: 500; } .select2-container--default.select2-container--open .select2-selection--single, .select2-container--default.select2-container--focus .select2-selection--single { border-color: var(--rz-acc) !important; background: var(--rz-panel) !important; } .select2-container--default .select2-selection--single .select2-selection__rendered { color: var(--rz-text); font-family: var(--rz-font-body); font-size: 15px; line-height: 1.4; padding: 0; } .select2-container--default .select2-selection--single .select2-selection__placeholder { color: var(--rz-muted); } /* Replace the default caret with the design's chevron. */ /* style.css pins top/right with !important; reclaim both. */ .select2-container--default .select2-selection--single .select2-selection__arrow { height: 100%; top: 0 !important; right: 12px !important; width: 14px; display: flex; align-items: center; } .select2-container--default .select2-selection--single .select2-selection__arrow b { border: 0 !important; width: 12px; height: 12px; margin: -6px 0 0 -6px; background-repeat: no-repeat; background-position: center; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2 4l4 4 4-4' fill='none' stroke='%239AA1AC' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); } .select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b { transform: rotate(180deg); } /* --- open panel --- */ .select2-container--default .select2-dropdown { background: var(--rz-card); border: 1px solid var(--rz-border); border-radius: var(--rz-r); box-shadow: var(--rz-shadow); overflow: hidden; margin-top: 6px; } .select2-container--default .select2-search--dropdown { padding: 10px; border-bottom: 1px solid var(--rz-hair); } .select2-container--default .select2-search--dropdown .select2-search__field { background: var(--rz-fill); border: 1px solid var(--rz-border); border-radius: var(--rz-r-ctrl); padding: 10px 12px; font-family: var(--rz-font-body); font-size: 14px; color: var(--rz-text); outline: none; } .select2-container--default .select2-search--dropdown .select2-search__field:focus { border-color: var(--rz-acc); } .select2-container--default .select2-results > .select2-results__options { max-height: 260px; padding: 6px; } .select2-container--default .select2-results__option { color: var(--rz-text); font-family: var(--rz-font-body); font-size: 14px; padding: 10px 12px; border-radius: var(--rz-r-ctrl); } .select2-container--default .select2-results__option--highlighted[aria-selected], .select2-container--default .select2-results__option--highlighted[data-selected] { background: var(--rz-fill); color: var(--rz-text); } .select2-container--default .select2-results__option[aria-selected="true"], .select2-container--default .select2-results__option[data-selected="true"] { background: var(--rz-tint); color: var(--rz-text); font-weight: 600; } .select2-container--default .select2-results__message { color: var(--rz-muted); font-size: 14px; } /* -------------------------------------------------------------------------- 10. Checkbox -------------------------------------------------------------------------- The native control cannot take the design's 6px radius and accent fill consistently across browsers, so the input is visually hidden (still focusable and still submitted) and the adjacent label is drawn as the box. Shared by the marketing site and the portal. */ .rz-check { display: flex; align-items: flex-start; gap: 10px; font-size: 13px; line-height: 1.5; color: var(--rz-t2); } .rz-check__input { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; } .rz-check__box { width: 20px; height: 20px; border-radius: 6px; border: 1.5px solid var(--rz-border); background: var(--rz-fill); display: grid; place-items: center; flex-shrink: 0; margin-top: 1px; cursor: pointer; font-size: 12px; color: transparent; transition: background var(--rz-ease), border-color var(--rz-ease), color var(--rz-ease); } .rz-check__box:hover { border-color: var(--rz-acc); } .rz-check__input:checked + .rz-check__box { background: var(--rz-acc); border-color: var(--rz-acc); color: #fff; } /* The hidden input cannot show a ring, so surface focus on the drawn box. */ .rz-check__input:focus-visible + .rz-check__box { outline: 2px solid var(--rz-acc); outline-offset: 2px; } .rz-check__text a { color: var(--rz-acc); font-weight: 600; } /* -------------------------------------------------------------------------- 11. Dashboard -------------------------------------------------------------------------- */ .rz-page-head { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-bottom: 22px; } .rz-page-head__title { font-family: var(--rz-font-display); font-weight: 800; font-size: 24px; letter-spacing: -0.02em; } .rz-page-head__sub { font-size: 14.5px; color: var(--rz-t2); margin: 4px 0 0; } /* --- KPI cards --- */ .rz-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 16px; margin-bottom: 20px; } .rz-kpi { background: var(--rz-card); border: 1px solid var(--rz-border); border-radius: var(--rz-r); padding: 20px; box-shadow: var(--rz-shadow); } .rz-kpi__top { display: flex; justify-content: space-between; align-items: center; gap: 10px; } .rz-kpi__label { font-size: 13px; color: var(--rz-t2); font-weight: 500; } .rz-kpi__icon { width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; font-size: 17px; background: var(--rz-tint); color: var(--rz-acc); flex-shrink: 0; } .rz-kpi__icon--success { background: var(--rz-success-bg); color: var(--rz-success); } .rz-kpi__icon--warn { background: var(--rz-warn-bg); color: var(--rz-warn); } .rz-kpi__icon--danger { background: var(--rz-danger-bg); color: var(--rz-danger); } .rz-kpi__value { font-family: var(--rz-font-display); font-weight: 800; font-size: 28px; margin-top: 14px; letter-spacing: -0.02em; line-height: 1.15; word-break: break-word; } .rz-kpi__value small { color: var(--rz-muted); font-size: 18px; font-weight: 800; } .rz-kpi__meta { margin-top: 10px; font-size: 12.5px; color: var(--rz-muted); } /* --- Card with a titled header --- */ .rz-panel { background: var(--rz-card); border: 1px solid var(--rz-border); border-radius: var(--rz-r); padding: 22px; box-shadow: var(--rz-shadow); } .rz-panel__head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 8px; } .rz-panel__title { font-family: var(--rz-font-display); font-weight: 700; font-size: 16px; } .rz-panel__link { font-size: 13.5px; font-weight: 600; color: var(--rz-acc); } /* --- Recent transfers list --- */ .rz-txn-row { display: flex; align-items: center; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--rz-hair); } .rz-txn-row:last-child { border-bottom: 0; } .rz-txn-row__avatar { width: 42px; height: 42px; border-radius: 12px; background: var(--rz-tint); color: var(--rz-acc); display: grid; place-items: center; font-weight: 700; font-size: 14px; flex-shrink: 0; } .rz-txn-row__main { flex: 1; min-width: 0; } .rz-txn-row__name { font-weight: 600; font-size: 14.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .rz-txn-row__meta { font-size: 12.5px; color: var(--rz-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .rz-txn-row__amounts { text-align: right; min-width: 130px; } .rz-txn-row__get { font-weight: 700; font-size: 14.5px; } .rz-txn-row__sent { font-size: 12px; color: var(--rz-muted); } .rz-empty { padding: 34px 12px; text-align: center; color: var(--rz-muted); font-size: 14px; } .rz-empty i { font-size: 30px; display: block; margin-bottom: 8px; } @media (max-width: 575px) { .rz-txn-row { flex-wrap: wrap; } .rz-txn-row__amounts { text-align: left; min-width: 0; } } /* -------------------------------------------------------------------------- 12. Transactions -------------------------------------------------------------------------- */ .rz-filters { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; margin-bottom: 18px; } .rz-filters .rz-search { width: 280px; } .rz-filters .rz-select, .rz-filters .rz-input { width: auto; min-width: 150px; padding: 10px 14px; font-size: 14px; } /* --- Table head: a grid so rows and headings share one column template --- */ .rz-txn-table { /* Status sized to the longest label ("Confirm Payment"); at 120px the chip wrapped inside the cell. */ --rz-txn-cols: minmax(160px, 1.8fr) minmax(110px, 1.1fr) minmax(100px, .9fr) minmax(130px, 1.2fr) minmax(150px, max-content) 40px; } .rz-txn-thead, .rz-txn-head { display: grid; grid-template-columns: var(--rz-txn-cols); gap: 14px; align-items: center; } .rz-txn-thead { padding: 0 14px 12px; font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--rz-muted); border-bottom: 1px solid var(--rz-hair); } .rz-txn-item { border-bottom: 1px solid var(--rz-hair); } .rz-txn-head { width: 100%; text-align: left; background: transparent; border: 0; padding: 16px 14px; cursor: pointer; font: inherit; color: inherit; border-radius: var(--rz-r-ctrl); transition: background var(--rz-ease); } .rz-txn-head:hover { background: var(--rz-fill); } .rz-txn-name { font-weight: 600; font-size: 14.5px; display: flex; align-items: center; gap: 10px; min-width: 0; } .rz-txn-name span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .rz-txn-avatar { width: 34px; height: 34px; border-radius: 10px; background: var(--rz-tint); color: var(--rz-acc); display: grid; place-items: center; font-weight: 700; font-size: 12.5px; flex-shrink: 0; } .rz-txn-mtcn { font-family: var(--rz-font-num); font-size: 13px; color: var(--rz-t2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .rz-txn-date { font-size: 13px; color: var(--rz-t2); white-space: nowrap; } .rz-txn-amount { text-align: right; } .rz-txn-amount b { display: block; font-weight: 700; font-size: 14.5px; } .rz-txn-amount small { font-size: 12px; color: var(--rz-muted); } .rz-txn-chevron { display: grid; place-items: center; color: var(--rz-muted); font-size: 18px; transition: transform var(--rz-ease), color var(--rz-ease); } .rz-txn-item.is-open .rz-txn-chevron { transform: rotate(180deg); color: var(--rz-acc); } /* --- Expanded detail --- */ .rz-txn-detail { display: none; padding: 4px 14px 20px; } .rz-txn-item.is-open .rz-txn-detail { display: block; } .rz-txn-detail__card { background: var(--rz-fill); border: 1px solid var(--rz-border); border-radius: var(--rz-r-ctrl-lg); padding: 18px; } .rz-txn-detail__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px 20px; } .rz-txn-detail__label { font-size: 12px; color: var(--rz-muted); margin-bottom: 3px; } .rz-txn-detail__value { font-size: 14px; font-weight: 600; word-break: break-word; } .rz-txn-detail__actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--rz-border); } /* --- Pagination --- */ .rz-pager { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding-top: 18px; } .rz-pager__info { font-size: 13px; color: var(--rz-muted); } .rz-pager__controls { display: flex; gap: 8px; } .rz-pager__btn { min-width: 36px; height: 36px; padding: 0 12px; border-radius: var(--rz-r-ctrl); border: 1px solid var(--rz-border); background: var(--rz-panel); color: var(--rz-text); font-size: 14px; cursor: pointer; } .rz-pager__btn:disabled { opacity: .45; cursor: default; } /* Below the tablet breakpoint the grid collapses to stacked label/value pairs — a six-column table cannot survive a phone. */ @media (max-width: 900px) { .rz-txn-thead { display: none; } .rz-txn-head { grid-template-columns: 1fr auto; gap: 8px 12px; } .rz-txn-amount { text-align: left; } .rz-txn-mtcn, .rz-txn-date { grid-column: 1 / -1; } } /* -------------------------------------------------------------------------- 13. Recipients -------------------------------------------------------------------------- */ .rz-recipients { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; } .rz-recipient { background: var(--rz-card); border: 1px solid var(--rz-border); border-radius: var(--rz-r); padding: 22px; box-shadow: var(--rz-shadow); display: flex; flex-direction: column; } .rz-recipient__top { display: flex; align-items: center; gap: 13px; margin-bottom: 16px; } .rz-recipient__avatar { width: 48px; height: 48px; border-radius: 14px; flex-shrink: 0; display: grid; place-items: center; background: linear-gradient(150deg, var(--rz-acc), #7AB0FF); color: #fff; font-family: var(--rz-font-display); font-weight: 700; font-size: 16px; } .rz-recipient__name { font-family: var(--rz-font-display); font-weight: 700; font-size: 16px; line-height: 1.3; word-break: break-word; } .rz-recipient__country { font-size: 12.5px; color: var(--rz-muted); margin-top: 2px; } .rz-recipient__rows { display: flex; flex-direction: column; gap: 10px; margin-bottom: 18px; flex: 1; } .rz-recipient__row { display: flex; justify-content: space-between; gap: 12px; font-size: 13.5px; } .rz-recipient__row dt { color: var(--rz-muted); font-weight: 400; flex-shrink: 0; } .rz-recipient__row dd { margin: 0; text-align: right; font-weight: 600; word-break: break-word; } .rz-recipient__actions { display: flex; gap: 8px; align-items: center; padding-top: 16px; border-top: 1px solid var(--rz-hair); } .rz-recipient__actions .rz-btn { flex: 1; padding: 10px 14px; font-size: 13.5px; } /* Square icon buttons for edit/delete, sized to the pill next to them. */ .rz-icon-action { width: 40px; height: 40px; flex-shrink: 0; border-radius: var(--rz-r-ctrl); border: 1px solid var(--rz-border); background: var(--rz-panel); color: var(--rz-t2); font-size: 17px; display: grid; place-items: center; cursor: pointer; transition: background var(--rz-ease), color var(--rz-ease), border-color var(--rz-ease); } .rz-icon-action:hover { background: var(--rz-fill); color: var(--rz-text); } .rz-icon-action--danger:hover { background: var(--rz-danger-bg); border-color: var(--rz-danger); color: var(--rz-danger); } /* Dashed "add new" tile closing the grid */ .rz-recipient--add { /* --rz-border is a hairline meant for solid edges; as a dash it reads as nothing, so the tile uses the stronger muted tone. */ border: 1.5px dashed var(--rz-muted); background: transparent; box-shadow: none; align-items: center; justify-content: center; text-align: center; color: var(--rz-t2); min-height: 220px; gap: 6px; transition: border-color var(--rz-ease), color var(--rz-ease); } .rz-recipient--add:hover { border-color: var(--rz-acc); color: var(--rz-acc); } .rz-recipient--add i { font-size: 30px; color: var(--rz-acc); } .rz-recipient--add span { font-weight: 600; font-size: 14.5px; } /* --- Modal, restyled to the design system --- */ .rz-modal .modal-content { background: var(--rz-card); border: 1px solid var(--rz-border); border-radius: var(--rz-r); box-shadow: var(--rz-shadow); color: var(--rz-text); } .rz-modal .modal-body { padding: 26px 24px 8px; text-align: center; } .rz-modal__icon { width: 52px; height: 52px; margin: 0 auto 14px; border-radius: 15px; display: grid; place-items: center; font-size: 24px; background: var(--rz-danger-bg); color: var(--rz-danger); } .rz-modal__title { font-family: var(--rz-font-display); font-weight: 700; font-size: 17px; margin-bottom: 6px; } .rz-modal__text { font-size: 14px; color: var(--rz-t2); margin: 0; } .rz-modal .modal-footer { border: 0; padding: 18px 24px 24px; gap: 10px; display: flex; } .rz-modal .modal-footer > * { flex: 1; margin: 0; } .rz-btn--danger { background: var(--rz-danger); color: #fff; } .rz-btn--danger:hover { color: #fff; opacity: .92; } /* -------------------------------------------------------------------------- 14. Send money flow -------------------------------------------------------------------------- */ .rz-stepper { display: flex; align-items: center; gap: 8px; list-style: none; margin: 0 0 22px; padding: 0; flex-wrap: wrap; } .rz-stepper__step { display: flex; align-items: center; gap: 9px; font-size: 14px; font-weight: 500; color: var(--rz-muted); } /* Connector between steps; the last one has nothing to connect to. */ .rz-stepper__step:not(:last-child)::after { content: ""; width: 34px; height: 1px; background: var(--rz-hair); margin: 0 6px; } .rz-stepper__dot { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-size: 13px; font-weight: 700; background: var(--rz-fill); color: var(--rz-muted); border: 1px solid var(--rz-border); flex-shrink: 0; } .rz-stepper__step.is-current { color: var(--rz-text); font-weight: 600; } .rz-stepper__step.is-current .rz-stepper__dot { background: var(--rz-acc); border-color: var(--rz-acc); color: var(--rz-onacc); } .rz-stepper__step.is-done { color: var(--rz-t2); } .rz-stepper__step.is-done .rz-stepper__dot { background: var(--rz-success-bg); border-color: var(--rz-success); color: var(--rz-success); } /* --- Two-column step layout: form + sticky summary rail --- */ /* Steps 2 and 3 are a single centred column — their summary rails were removed at the client's request. Step 1 keeps the artboard's two-column layout via .rz-send--rail. */ .rz-send { max-width: 720px; margin: 0 auto; } .rz-send--rail { max-width: none; display: grid; grid-template-columns: 1.55fr 1fr; gap: 20px; align-items: start; } .rz-rail { position: sticky; top: calc(var(--rz-header-h) + 20px); } @media (max-width: 1099px) { .rz-send--rail { grid-template-columns: 1fr; } .rz-rail { position: static; } } .rz-send__actions { display: flex; gap: 10px; margin-top: 22px; } .rz-send__actions .rz-btn--primary { flex: 1; } .rz-summary__row { display: flex; justify-content: space-between; gap: 14px; padding: 11px 0; font-size: 14px; border-bottom: 1px solid var(--rz-hair); } .rz-summary__row:last-of-type { border-bottom: 0; } .rz-summary__row dt { color: var(--rz-t2); font-weight: 400; } .rz-summary__row dd { margin: 0; font-weight: 600; text-align: right; } .rz-summary__total { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; margin-top: 14px; padding-top: 16px; border-top: 1px solid var(--rz-border); } .rz-summary__total dt { font-weight: 700; font-size: 15px; } .rz-summary__total dd { margin: 0; font-family: var(--rz-font-display); font-weight: 800; font-size: 22px; color: var(--rz-acc); } .rz-trust { display: flex; align-items: center; gap: 9px; margin-top: 16px; padding: 11px 13px; border-radius: var(--rz-r-ctrl); background: var(--rz-success-bg); color: var(--rz-success); font-size: 12.5px; font-weight: 600; } /* --- Coupon row --- */ .rz-coupon { display: flex; gap: 10px; align-items: center; margin-top: 14px; } .rz-coupon .rz-input { flex: 1; } @media (max-width: 575px) { .rz-stepper__step:not(:last-child)::after { width: 14px; margin: 0 2px; } .rz-stepper__label { display: none; } .rz-stepper__step.is-current .rz-stepper__label { display: inline; } } /* -------------------------------------------------------------------------- 15. Currency picker (.ad-select) -------------------------------------------------------------------------- Moved out of remitzap-site.css and unscoped: the same legacy markup drives the marketing hero converter AND the portal send flow, so scoping it to .rz-site left the portal pills showing a flag with no currency code. Class names are fixed by main.js — do not rename them. */ /* The vendor style.css colours .custom-currency white for its dark dropdown; restate it or the code disappears against the light pill. .custom-country is the long name and stays hidden — the pill only shows the code. */ .rz-cur .custom-currency { color: var(--rz-text); font-weight: 600; font-size: 14px; } .rz-cur .custom-country { display: none; } /* --- Currency dropdown (legacy .ad-select markup, restyled) --------------- The vendor theme paints .custom-select with the primary colour and leaves .ad-select unpositioned, so the absolutely-positioned panel escaped to the top of the page at full viewport width. Both are corrected here. The class names must not change — main.js binds to them. */ .ad-select { position: relative; } .ad-select .custom-select { background: transparent; padding: 0; border: 0; } .ad-select .custom-select-wrapper { top: calc(100% + 8px); left: auto; right: 0; width: 290px; max-width: 78vw; background: var(--rz-card); border: 1px solid var(--rz-border); border-radius: var(--rz-r); box-shadow: var(--rz-shadow); overflow: hidden; padding: 0; } .ad-select .custom-select-search-wrapper { border-bottom: 1px solid var(--rz-hair); } .ad-select .custom-select-search { width: 100%; border: 0; background: transparent; padding: 12px 16px 12px 44px; font-family: inherit; font-size: 14px; color: var(--rz-text); outline: none; } .ad-select .custom-select-search::placeholder { color: var(--rz-muted); } .ad-select .search-btn { top: 11px; left: 16px; border: 0; color: var(--rz-muted); font-size: 18px; } .ad-select .custom-select-list-wrapper { max-height: 260px; overflow-y: auto; } .ad-select .custom-select-list { list-style: none; margin: 0; padding: 6px; } .ad-select .custom-option { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: var(--rz-r-ctrl); cursor: pointer; color: var(--rz-text); font-size: 14px; background: transparent; } .ad-select .custom-option:hover { background: var(--rz-fill); } .ad-select .custom-option.active { background: var(--rz-tint); font-weight: 600; } .ad-select .custom-option .custom-flag { width: 22px; height: 22px; border-radius: 50%; object-fit: cover; flex-shrink: 0; } .ad-select .custom-option .custom-country { flex: 1; min-width: 0; color: var(--rz-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ad-select .custom-option .custom-currency { color: var(--rz-t2); font-weight: 600; font-size: 13px; } /* -------------------------------------------------------------------------- Generic section furniture -------------------------------------------------------------------------- */ .rz-section { padding-top: 68px; padding-bottom: 68px; } .rz-section--alt { background: var(--rz-alt); } .rz-section--tight { padding-top: 12px; } .rz-section__kicker { font-size: 13px; font-weight: 600; color: var(--rz-acc); text-transform: uppercase; letter-spacing: .06em; } .rz-section__title { font-weight: 800; font-size: 36px; margin: 10px 0 44px; } .rz-section__title--sm { font-size: 30px; margin: 0 0 8px; } .rz-section__lead { font-size: 15px; color: var(--rz-t2); margin: 0 0 28px; } .rz-center { text-align: center; } /* -------------------------------------------------------------------------- How it works / features -------------------------------------------------------------------------- */ .rz-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; text-align: left; } .rz-step { background: var(--rz-alt); border: 1px solid var(--rz-border); border-radius: 18px; padding: 28px; } .rz-step__icon { width: 48px; height: 48px; border-radius: 14px; background: var(--rz-acc); color: #fff; display: grid; place-items: center; font-size: 22px; } /* The admin-uploaded step icons are coloured artwork and disappear against the accent tile. Knock them through to white to match the design. */ .rz-step__icon img { filter: brightness(0) invert(1); } .rz-step__title { font-family: var(--rz-font-display); font-weight: 700; font-size: 18px; margin: 18px 0 8px; } .rz-step__text { font-size: 14.5px; line-height: 1.6; color: var(--rz-t2); margin: 0; } .rz-features { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; } .rz-feature { border: 1px solid var(--rz-border); border-radius: var(--rz-r); padding: 22px; } .rz-feature > i, .rz-feature__icon { font-size: 26px; color: var(--rz-acc); } .rz-feature__title { font-weight: 700; font-size: 15.5px; margin: 12px 0 6px; } .rz-feature__text { font-size: 13.5px; color: var(--rz-t2); line-height: 1.55; margin: 0; } @media (max-width: 991px) { .rz-steps, .rz-features { grid-template-columns: 1fr 1fr; } } @media (max-width: 575px) { .rz-steps, .rz-features { grid-template-columns: 1fr; } .rz-section__title { font-size: 28px; } } /* -------------------------------------------------------------------------- Page hero (About, and other inner marketing pages) -------------------------------------------------------------------------- */ .rz-page-hero { background: linear-gradient(180deg, var(--rz-panel), var(--rz-alt)); padding-top: 72px; padding-bottom: 60px; text-align: center; } .rz-page-hero__title { font-weight: 800; font-size: 46px; line-height: 1.12; letter-spacing: -0.03em; margin: 20px auto 0; max-width: 760px; } .rz-page-hero__lead { font-size: 17px; line-height: 1.6; color: var(--rz-t2); margin: 18px auto 0; max-width: 620px; } @media (max-width: 767px) { .rz-page-hero__title { font-size: 32px; } } /* --- Stat cards, pulled up to overlap the hero band --- */ /* auto-fit rather than a fixed 4 columns: the card count is content-driven and a hardcoded 4 left an empty cell. */ .rz-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; margin-top: -20px; } .rz-stat { background: var(--rz-panel); border: 1px solid var(--rz-border); border-radius: 18px; padding: 26px; text-align: center; box-shadow: var(--rz-shadow); } .rz-stat__num { font-family: var(--rz-font-display); font-weight: 800; font-size: 30px; color: var(--rz-acc); } .rz-stat__label { font-size: 13.5px; color: var(--rz-t2); margin-top: 4px; } /* --- Two-column story block --- */ .rz-split { display: grid; grid-template-columns: 1fr 1fr; gap: 44px; align-items: center; } .rz-split__body p { font-size: 15.5px; line-height: 1.7; color: var(--rz-t2); margin: 0 0 14px; } .rz-split__body p:last-child { margin-bottom: 0; } .rz-split__title { font-weight: 800; font-size: 30px; margin: 12px 0 16px; } .rz-split__media { background: var(--rz-alt); border: 1px solid var(--rz-border); border-radius: 20px; min-height: 300px; display: grid; place-items: center; color: var(--rz-muted); overflow: hidden; } .rz-split__media img { width: 100%; height: 100%; object-fit: cover; display: block; } /* --- Values grid --- */ .rz-values { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; } .rz-value { background: var(--rz-panel); border: 1px solid var(--rz-border); border-radius: 18px; padding: 26px; } .rz-value__icon { width: 46px; height: 46px; border-radius: 13px; background: var(--rz-tint); color: var(--rz-acc); display: grid; place-items: center; font-size: 22px; } .rz-value__title { font-family: var(--rz-font-display); font-weight: 700; font-size: 17px; margin: 16px 0 8px; } .rz-value__text { font-size: 14px; line-height: 1.6; color: var(--rz-t2); margin: 0; } @media (max-width: 991px) { .rz-stats { grid-template-columns: 1fr 1fr; } .rz-split { grid-template-columns: 1fr; gap: 28px; } .rz-values { grid-template-columns: 1fr; } } @media (max-width: 575px) { .rz-stats { grid-template-columns: 1fr; } .rz-split__title { font-size: 25px; } } /* -------------------------------------------------------------------------- 16. Success / result screen -------------------------------------------------------------------------- */ .rz-result { max-width: 620px; margin: 0 auto; text-align: center; } .rz-result__badge { width: 76px; height: 76px; margin: 0 auto 20px; border-radius: 50%; display: grid; place-items: center; font-size: 36px; background: var(--rz-success-bg); color: var(--rz-success); } .rz-result__title { font-family: var(--rz-font-display); font-weight: 800; font-size: 26px; letter-spacing: -0.02em; } .rz-result__sub { font-size: 15px; color: var(--rz-t2); margin: 8px 0 24px; } /* Read-only tracking link with an inline copy button */ .rz-copyfield { display: flex; gap: 8px; align-items: center; background: var(--rz-fill); border: 1px solid var(--rz-border); border-radius: var(--rz-r-ctrl-lg); padding: 6px 6px 6px 14px; } .rz-copyfield input { flex: 1; min-width: 0; border: 0; background: transparent; outline: none; font-family: var(--rz-font-num); font-size: 13px; color: var(--rz-t2); } .rz-result__actions { display: flex; gap: 10px; margin-top: 22px; flex-wrap: wrap; } .rz-result__actions > * { flex: 1; min-width: 180px; } /* -------------------------------------------------------------------------- 17. Selectable list (recipient picker) -------------------------------------------------------------------------- */ .rz-pick { display: flex; flex-direction: column; gap: 10px; } .rz-pick__radio { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; } .rz-pick__opt { display: flex; align-items: center; gap: 14px; padding: 16px; border: 1px solid var(--rz-border); border-radius: var(--rz-r-ctrl-lg); background: var(--rz-card); cursor: pointer; transition: border-color var(--rz-ease), background var(--rz-ease); } .rz-pick__opt:hover { border-color: var(--rz-acc); } .rz-pick__radio:checked + .rz-pick__opt { border-color: var(--rz-acc); background: var(--rz-tint); } .rz-pick__radio:focus-visible + .rz-pick__opt { outline: 2px solid var(--rz-acc); outline-offset: 2px; } .rz-pick__avatar { width: 44px; height: 44px; border-radius: 13px; flex-shrink: 0; display: grid; place-items: center; background: linear-gradient(150deg, var(--rz-acc), #7AB0FF); color: #fff; font-family: var(--rz-font-display); font-weight: 700; font-size: 14px; } .rz-pick__body { flex: 1; min-width: 0; } .rz-pick__name { font-weight: 600; font-size: 15px; } .rz-pick__meta { font-size: 12.5px; color: var(--rz-muted); margin-top: 2px; } /* Radio indicator mirrors the delivery-speed cards */ .rz-pick__dot { width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid var(--rz-border); flex-shrink: 0; } .rz-pick__radio:checked + .rz-pick__opt .rz-pick__dot { border: 5px solid var(--rz-acc); background: var(--rz-panel); } /* -------------------------------------------------------------------------- 18. Review step -------------------------------------------------------------------------- */ .rz-review { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: start; } .rz-review__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px 20px; } .rz-review__label { font-size: 12px; color: var(--rz-muted); margin-bottom: 5px; } .rz-review__value { font-weight: 600; font-size: 14px; word-break: break-word; } /* Total payable sits inside the Payment card as a tinted pill. */ .rz-review__total { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 20px; padding: 16px 20px; background: var(--rz-tint); border-radius: 12px; } .rz-review__total-label { font-weight: 600; font-size: 14.5px; } .rz-review__total-value { font-family: var(--rz-font-display); font-weight: 800; font-size: 22px; color: var(--rz-acc); } .rz-review__actions { display: flex; gap: 12px; margin-top: 18px; } .rz-review__actions .rz-btn--primary { flex: 1; } @media (max-width: 991px) { .rz-review { grid-template-columns: 1fr; } .rz-review__grid { grid-template-columns: 1fr; } } /* -------------------------------------------------------------------------- 19. KYC / 2FA -------------------------------------------------------------------------- */ .rz-split-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: start; } /* Numbered "what you'll need" list */ .rz-checklist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 16px; } .rz-checklist li { display: flex; gap: 13px; align-items: flex-start; } .rz-checklist__icon { width: 38px; height: 38px; border-radius: 11px; flex-shrink: 0; display: grid; place-items: center; background: var(--rz-tint); color: var(--rz-acc); font-size: 18px; } .rz-checklist__title { font-weight: 600; font-size: 14.5px; } .rz-checklist__text { font-size: 13.5px; color: var(--rz-t2); margin: 2px 0 0; line-height: 1.5; } .rz-note { display: flex; gap: 10px; align-items: flex-start; margin-top: 20px; padding: 13px 15px; border-radius: var(--rz-r-ctrl); background: var(--rz-fill); font-size: 13px; color: var(--rz-t2); line-height: 1.5; } .rz-note i { color: var(--rz-acc); font-size: 16px; flex-shrink: 0; margin-top: 1px; } /* Launch card */ .rz-launch { text-align: center; } .rz-launch__shield { width: 88px; height: 88px; margin: 18px auto 20px; border-radius: 26px; display: grid; place-items: center; font-size: 42px; background: var(--rz-tint); color: var(--rz-acc); } .rz-launch__title { font-family: var(--rz-font-display); font-weight: 800; font-size: 22px; letter-spacing: -0.02em; } .rz-launch__text { font-size: 14.5px; color: var(--rz-t2); margin: 8px auto 22px; max-width: 340px; } .rz-ministeps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 22px; } .rz-ministep { padding: 14px 8px; border: 1px solid var(--rz-border); border-radius: var(--rz-r-ctrl); font-size: 12.5px; font-weight: 600; } .rz-ministep i { display: block; font-size: 20px; color: var(--rz-acc); margin-bottom: 6px; } /* --- 2FA --- */ .rz-qr { width: 190px; height: 190px; margin: 0 auto 20px; padding: 12px; background: #fff; border: 1px solid var(--rz-border); border-radius: var(--rz-r-ctrl-lg); display: block; } .rz-steps-list { list-style: none; counter-reset: rz-step; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 16px; } .rz-steps-list li { counter-increment: rz-step; display: flex; gap: 13px; font-size: 14px; color: var(--rz-t2); line-height: 1.55; } .rz-steps-list li::before { content: counter(rz-step); width: 26px; height: 26px; flex-shrink: 0; border-radius: 50%; background: var(--rz-tint); color: var(--rz-acc); font-weight: 700; font-size: 12.5px; display: grid; place-items: center; } .rz-warn { display: flex; gap: 10px; align-items: flex-start; margin-top: 20px; padding: 13px 15px; border-radius: var(--rz-r-ctrl); background: var(--rz-warn-bg); color: var(--rz-warn); font-size: 13px; line-height: 1.5; } .rz-warn i { font-size: 16px; flex-shrink: 0; margin-top: 1px; } @media (max-width: 991px) { .rz-split-2 { grid-template-columns: 1fr; } } /* -------------------------------------------------------------------------- 20. Profile -------------------------------------------------------------------------- */ .rz-profile { display: grid; grid-template-columns: 340px 1fr; gap: 20px; align-items: start; } .rz-identity { text-align: center; } .rz-identity__avatar { width: 96px; height: 96px; margin: 0 auto 14px; border-radius: 50%; position: relative; background: linear-gradient(150deg, var(--rz-acc), #7AB0FF); display: grid; place-items: center; overflow: visible; } .rz-identity__avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; } .rz-identity__initials { color: #fff; font-family: var(--rz-font-display); font-weight: 700; font-size: 30px; } /* Camera affordance sits on the avatar edge */ .rz-identity__edit { position: absolute; right: -2px; bottom: -2px; width: 32px; height: 32px; border-radius: 50%; background: var(--rz-panel); border: 1px solid var(--rz-border); color: var(--rz-t2); display: grid; place-items: center; cursor: pointer; font-size: 15px; transition: color var(--rz-ease), border-color var(--rz-ease); } .rz-identity__edit:hover { color: var(--rz-acc); border-color: var(--rz-acc); } .rz-identity__name { font-family: var(--rz-font-display); font-weight: 700; font-size: 18px; } .rz-identity__email { font-size: 13.5px; color: var(--rz-muted); margin-top: 3px; word-break: break-all; } .rz-identity__chips { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 18px; } .rz-danger-zone { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--rz-hair); } @media (max-width: 991px) { .rz-profile { grid-template-columns: 1fr; } } /* --- Embedded KYC component ----------------------------------------------- user/components/profile/kyc.blade.php ships its own vendor-themed markup. It is left untouched so its verified / pending / rejected / Persona / manual-form branches keep working; these rules restyle what it emits. */ .rz-kyc-embed { text-align: left; margin-top: 22px; /* The component emits the retry button before the rejection reason. Flex ordering puts the explanation first — read why it failed, then act — without editing the component. */ display: flex; flex-direction: column; gap: 14px; } .rz-kyc-embed > .rejected { order: -1; } /* Its "KYC Information — " heading repeats the chip in the page head and the status card above it. */ .rz-kyc-embed > h3.title { display: none; } /* The status cards above now carry this messaging and the retry action, so the component's own .kyc-text blocks (approved / pending notices and the rejected row with its Verify KYC button) are redundant. The manual KYC form sits outside .kyc-text and is unaffected. */ .rz-kyc-embed .kyc-text { display: none !important; } /* The page renders the reason in a .rz-fact row; this is the component's own copy. :not(:empty) kept so it never paints an empty block if shown. */ .rz-kyc-embed .rejected { display: none; } .rz-kyc-embed .rejected-reason:not(:empty) { padding: 12px 14px; border-radius: var(--rz-r-ctrl); background: var(--rz-danger-bg); color: var(--rz-danger); font-size: 13.5px; line-height: 1.5; } .rz-kyc-embed .rejected-reason:not(:empty)::before { content: ""; display: block; font-weight: 700; margin-bottom: 4px; } /* Vendor buttons inside the component adopt the design system. */ .rz-kyc-embed .btn--base { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%; background: var(--rz-acc); color: var(--rz-onacc); border: 1px solid transparent; border-radius: var(--rz-r-pill); padding: 13px 22px; font-family: var(--rz-font-body); font-weight: 600; font-size: 14px; line-height: 1; box-shadow: var(--rz-shadow-acc); cursor: pointer; transition: opacity var(--rz-ease); } .rz-kyc-embed .btn--base:hover { color: var(--rz-onacc); opacity: .92; } /* Bootstrap grid leftovers inside the card */ .rz-kyc-embed .row { margin: 0; } .rz-kyc-embed .form-group { padding: 0; margin-bottom: 14px; } .rz-kyc-embed .form-group:last-child { margin-bottom: 0; } /* Submitted KYC values, shown once approved */ .rz-kyc-embed .kyc-data { list-style: none; margin: 0 0 18px; padding: 0; display: flex; flex-direction: column; gap: 12px; } .rz-kyc-embed .kyc-data li { display: flex; justify-content: space-between; gap: 14px; font-size: 13.5px; padding-bottom: 12px; border-bottom: 1px solid var(--rz-hair); } .rz-kyc-embed .kyc-title { color: var(--rz-muted); } .rz-kyc-embed .kyc-image img { max-width: 120px; border-radius: var(--rz-r-ctrl); display: block; } /* --- KYC result-state fact row ------------------------------------------- Icon + label/value strip used by the pending, approved and rejected cards (estimated wait, sending limit, rejection reason). */ .rz-fact { display: flex; align-items: flex-start; gap: 11px; text-align: left; padding: 12px 14px; border-radius: var(--rz-r-ctrl); background: var(--rz-fill); margin-bottom: 20px; } .rz-fact__icon { width: 32px; height: 32px; border-radius: 9px; flex-shrink: 0; display: grid; place-items: center; font-size: 16px; background: var(--rz-tint); color: var(--rz-acc); } .rz-fact__label { font-size: 13px; font-weight: 600; } .rz-fact__value { font-size: 12px; color: var(--rz-muted); } .rz-fact--danger { background: var(--rz-danger-bg); } .rz-fact--danger > i { color: var(--rz-danger); font-size: 18px; margin-top: 1px; flex-shrink: 0; } .rz-fact--danger .rz-fact__body { font-size: 12.5px; color: var(--rz-text); line-height: 1.5; } /* -------------------------------------------------------------------------- 21. Portal — small-screen corrections -------------------------------------------------------------------------- */ @media (max-width: 767px) { /* The page title wrapped onto two lines and pushed the breadcrumb into the action icons. */ .rz-header__title { font-size: 17px; line-height: 1.2; } .rz-header__crumb { font-size: 11.5px; } /* The bar is a fixed 74px on desktop. On a phone the wrapped title plus breadcrumb measured 78px and overflowed it, so it grows with content instead. */ .rz-header { height: auto; min-height: var(--rz-header-h); padding: 12px 16px; } /* Six steps plus connectors could not fit, so the row wrapped and the trailing steps dropped onto a second line. It scrolls instead. */ .rz-stepper { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 4px; } .rz-stepper::-webkit-scrollbar { display: none; } .rz-stepper__step { flex-shrink: 0; } /* Filters stacked one per row and pushed the table below the fold. */ .rz-filters { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .rz-filters .rz-search { grid-column: 1 / -1; width: 100%; } .rz-filters .rz-select, .rz-filters .rz-input { width: 100%; min-width: 0; } .rz-filters .rz-btn { grid-column: 1 / -1; } /* Page heading and its action stack rather than squeezing side by side. */ .rz-page-head { align-items: flex-start; } .rz-page-head .rz-btn { width: 100%; justify-content: center; } } /* -------------------------------------------------------------------------- 22. Coupon field -------------------------------------------------------------------------- The artboard draws an inline dashed field with a tag icon and an Apply button beside it — not a link that opens a modal. */ .rz-coupon { display: flex; gap: 10px; margin-top: 14px; } .rz-coupon__field { flex: 1; display: flex; align-items: center; gap: 10px; border: 1px dashed var(--rz-border); border-radius: var(--rz-r-ctrl); /* 12px, per the artboard */ padding: 12px 15px; min-width: 0; transition: border-color var(--rz-ease); } .rz-coupon__field:focus-within { border-color: var(--rz-acc); border-style: solid; } .rz-coupon__field > i { color: var(--rz-acc); font-size: 17px; flex-shrink: 0; } .rz-coupon__field input { flex: 1; min-width: 0; border: 0; background: transparent; outline: none; font-family: inherit; font-size: 13.5px; color: var(--rz-text); } .rz-coupon__field input::placeholder { color: var(--rz-muted); } /* Not a pill: the artboard pairs the field with a 12px rounded rect in the fill colour, so it reads as one control. .rz-btn--secondary would have rendered it as a 999px pill beside a square-cornered field. */ .rz-coupon__apply { flex-shrink: 0; padding: 0 22px; border-radius: var(--rz-r-ctrl); background: var(--rz-fill); border: 1px solid var(--rz-border); color: var(--rz-text); font-family: var(--rz-font-body); font-weight: 600; font-size: 13.5px; cursor: pointer; transition: background var(--rz-ease), border-color var(--rz-ease); } .rz-coupon__apply:hover { background: var(--rz-panel); border-color: var(--rz-acc); } /* Applied state: the script swaps these in place of the Apply button. */ .rz-coupon .applied-button { display: inline-flex; align-items: center; gap: 6px; padding: 0 18px; border-radius: var(--rz-r-pill); background: var(--rz-success-bg); color: var(--rz-success); font-weight: 600; font-size: 13.5px; } .remove-coupon-code { display: inline-flex; align-items: center; gap: 5px; color: var(--rz-danger); font-size: 12.5px; font-weight: 600; cursor: pointer; } /* -------------------------------------------------------------------------- 23. Send step 1 converter — portal sizing -------------------------------------------------------------------------- The .rz-conv__* rules come from the Marketing Landing artboard, whose hero converter uses a 12px/400 label and a 26px amount. The portal's Step 1 artboard is larger: a 12.5px/500 label and a 30px amount. Scoped to .rz-portal so the marketing hero keeps its own scale. */ .rz-portal .rz-conv__field-label { font-size: 12.5px; font-weight: 500; color: var(--rz-t2); } .rz-portal .rz-conv__amount { font-size: 30px; } /* -------------------------------------------------------------------------- 24. Send step 1 — summary rail (artboard-exact) -------------------------------------------------------------------------- The rail is not the bordered .rz-summary__row list used elsewhere. The artboard draws a 13.5px flex column with a 12px gap, no row borders, a hairline before the totals, and two distinct total rows. Scoped to .rz-rail so the Review screen's summary is unaffected. */ .rz-rail__rows { display: flex; flex-direction: column; gap: 12px; font-size: 13.5px; margin: 0; } .rz-rail__row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; } .rz-rail__row dt { color: var(--rz-t2); font-weight: 400; } .rz-rail__row dd { margin: 0; font-weight: 600; text-align: right; } .rz-rail__divider { height: 1px; background: var(--rz-hair); margin: 4px 0; } /* Total to pay */ .rz-rail__row--total dt { color: var(--rz-text); font-weight: 600; } .rz-rail__row--total dd { font-weight: 700; font-size: 15px; } /* Recipient gets — the display figure */ .rz-rail__row--get dt { color: var(--rz-text); font-weight: 600; } .rz-rail__row--get dd { font-family: var(--rz-font-display); font-weight: 800; font-size: 22px; color: var(--rz-acc); line-height: 1.15; } .rz-rail .rz-btn--block { margin-top: 18px; font-size: 15px; padding: 14px; } /* Trust chip: successbg, 12.5px, weight 500 */ .rz-rail__trust { display: flex; align-items: center; gap: 10px; margin-top: 14px; padding: 14px 16px; background: var(--rz-success-bg); border-radius: 12px; font-size: 12.5px; color: var(--rz-success); font-weight: 500; line-height: 1.4; } .rz-rail__trust i { font-size: 18px; flex-shrink: 0; } /* -------------------------------------------------------------------------- 25. Send step 1 — connected converter (artboard-exact) -------------------------------------------------------------------------- The Step 1 artboard is one joined control, not two separate fields with a gap: three stacked blocks sharing borders — top rounded, middle strip with no top/bottom border carrying the swap badge, bottom rounded. All three sit on --fill. The rate is NOT shown here; it lives in the summary rail. */ .rz-joined { position: relative; } .rz-joined__field { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 16px 18px; background: var(--rz-fill); border: 1px solid var(--rz-border); } .rz-joined__field--top { border-radius: 14px 14px 0 0; border-bottom: none; } .rz-joined__field--bottom { border-radius: 0 0 14px 14px; border-top: none; } .rz-joined__label { display: block; font-size: 12.5px; color: var(--rz-t2); font-weight: 500; margin-bottom: 4px; } .rz-joined__amount { font-family: var(--rz-font-display); font-weight: 800; font-size: 30px; letter-spacing: -0.02em; border: 0; background: transparent; outline: none; width: 100%; padding: 0; color: var(--rz-text); line-height: 1.15; } /* Middle strip: hairlines either side of the swap badge */ .rz-joined__strip { display: flex; align-items: center; gap: 14px; padding: 6px 18px 6px 20px; background: var(--rz-fill); border: 1px solid var(--rz-border); border-top: none; border-bottom: none; } .rz-joined__line { flex: 1; height: 1px; background: var(--rz-hair); } /* Outlined, not filled — the artboard uses a card-coloured circle with an accent glyph and a shadow. */ .rz-joined__swap { width: 34px; height: 34px; border-radius: 50%; background: var(--rz-card); border: 1px solid var(--rz-border); display: grid; place-items: center; color: var(--rz-acc); font-size: 15px; box-shadow: var(--rz-shadow); flex-shrink: 0; } .rz-joined__swap i { transform: rotate(90deg); } /* The converter card itself: 24px padding, 20px stack gap */ .rz-send--rail .rz-panel--converter { padding: 24px; display: flex; flex-direction: column; gap: 20px; } /* Artboard column ratio */ .rz-send--rail { grid-template-columns: 1.35fr 1fr; } /* --- Step 1 card: collapse empty rows ------------------------------------ The converter card is a 20px flex column, so every child costs 20px of gap even at zero height. Three of them are placeholders the coupon script fills in later, and they were adding dead space to an otherwise correct layout. */ /* Vendor style.css pads every input 12px 20px. Inside the coupon field that made a 46px input in a 72px box; the artboard's control is ~46px total. */ .rz-coupon__field input { padding: 0 !important; height: auto; } /* Filled by the script with the "Remove Coupon" link once one is applied. */ .remove-coupon:empty { display: none; } /* Bonus line: hidden until the script clears .d-none from .coupon-text. */ .rz-coupon-bonus { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: 13.5px; } .rz-coupon-bonus:has(.coupon-text.d-none) { display: none; } .rz-coupon-bonus dd { margin: 0; font-weight: 600; } /* The transaction-type feature note is a quiet caption, not a summary row. */ .rz-feature-note { font-size: 12.5px; color: var(--rz-muted); line-height: 1.5; } .rz-feature-note:empty { display: none; } .rz-feature-note p { margin: 0; } /* The coupon row inherited two vendor margins that stacked on top of the card's own 20px flex gap and pushed its height from 48px to 58px. */ .rz-panel--converter .rz-coupon { margin: 0; } .rz-coupon__field { margin: 0; } /* Match the field it sits beside so the row is a single 48px band. */ .rz-coupon__apply { height: 48px; line-height: 1; flex: 0 0 auto; }