/* v3.50.0 — self-hosted fonts (SIL OFL, see assets/fonts). Inter covers Latin; Hind Siliguri's Bengali file only downloads when Bengali glyphs are on screen. */ @font-face { font-family: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('../fonts/inter-latin-wght-normal.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: 'Hind Siliguri'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/hind-siliguri-bengali-400-normal.woff2') format('woff2'); unicode-range: U+0951-0952, U+0964-0965, U+0980-09FE, U+1CD0, U+1CD2, U+1CD5-1CD6, U+1CD8, U+1CE1, U+1CEA, U+1CED, U+1CF2, U+1CF5-1CF7, U+200C-200D, U+20B9, U+25CC, U+A8F1; } @font-face { font-family: 'Hind Siliguri'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/hind-siliguri-bengali-500-normal.woff2') format('woff2'); unicode-range: U+0951-0952, U+0964-0965, U+0980-09FE, U+1CD0, U+1CD2, U+1CD5-1CD6, U+1CD8, U+1CE1, U+1CEA, U+1CED, U+1CF2, U+1CF5-1CF7, U+200C-200D, U+20B9, U+25CC, U+A8F1; } @font-face { font-family: 'Hind Siliguri'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/hind-siliguri-bengali-600-normal.woff2') format('woff2'); unicode-range: U+0951-0952, U+0964-0965, U+0980-09FE, U+1CD0, U+1CD2, U+1CD5-1CD6, U+1CD8, U+1CE1, U+1CEA, U+1CED, U+1CF2, U+1CF5-1CF7, U+200C-200D, U+20B9, U+25CC, U+A8F1; } @font-face { font-family: 'Hind Siliguri'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/hind-siliguri-bengali-700-normal.woff2') format('woff2'); unicode-range: U+0951-0952, U+0964-0965, U+0980-09FE, U+1CD0, U+1CD2, U+1CD5-1CD6, U+1CD8, U+1CE1, U+1CEA, U+1CED, U+1CF2, U+1CF5-1CF7, U+200C-200D, U+20B9, U+25CC, U+A8F1; } /* ========================================================================= RealGoods Trading Platform — v2.1.0 Rewritten from scratch. Every rule is scoped to a plugin container so the stylesheet can never leak into the theme or the WordPress admin chrome. (v1.7.0 opened with an unscoped `*{box-sizing:border-box}` and stacked five generations of overrides on top of each other, which is why it needed !important everywhere.) ========================================================================= */ :root { --rgt-primary: #12313F; --rgt-accent: #3B82F6; } /* FIX v3.0.0: .rgt-toast-wrap is created by JS and appended straight to document.body (see initToasts() in rgt.js) — a sibling of .rgt-shell, not a descendant. CSS custom properties only inherit down the DOM tree, so every var(--rgt-green-bg)/--rgt-red-bg/--rgt-amber-bg/etc. reference inside a toast resolved to nothing and the !important background rules below silently fell back to transparent. Toasts have been see-through against any page background since the variables were introduced. Defining the full palette directly on .rgt-toast-wrap (not just inheriting it) fixes this regardless of where in the DOM the wrapper ends up. */ .rgt-shell, .rgt-account-menu, .rgt-wp-admin-mirror, .rgt-admin-grid, .rgt-calc-card, .rgt-toast-wrap { /* Surfaces */ --rgt-bg: #F4F7FA; --rgt-surface: #FFFFFF; --rgt-surface-2: #F7FAFC; --rgt-surface-3: #EEF3F8; --rgt-border: #E3EAF1; --rgt-border-strong: #CFDBE6; /* Text */ --rgt-text: #16232E; --rgt-text-2: #4A5D6E; --rgt-muted: #607383; /* Semantic */ --rgt-green: #0E9F6E; --rgt-green-bg: #E8F8F1; --rgt-red: #DC2F32; --rgt-red-bg: #FDEEEE; --rgt-amber: #D97706; --rgt-amber-bg: #FEF4E6; --rgt-violet: #7C5CE7; --rgt-violet-bg: #F3EFFE; --rgt-cyan: #0E9BAE; --rgt-cyan-bg: #E6F7F9; --rgt-rose: #E1467C; --rgt-rose-bg: #FDECF3; /* Elevation */ --rgt-sh-1: 0 1px 2px rgba(16, 35, 48, .05), 0 1px 3px rgba(16, 35, 48, .04); --rgt-sh-2: 0 4px 12px rgba(16, 35, 48, .06), 0 1px 3px rgba(16, 35, 48, .04); --rgt-sh-3: 0 12px 32px rgba(16, 35, 48, .10), 0 2px 8px rgba(16, 35, 48, .05); --rgt-sh-4: 0 24px 60px rgba(16, 35, 48, .16); /* Geometry */ --rgt-r-sm: 10px; --rgt-r: 14px; --rgt-r-lg: 20px; --rgt-r-xl: 26px; --rgt-ease: cubic-bezier(.4, 0, .2, 1); --rgt-spring: cubic-bezier(.34, 1.4, .64, 1); --rgt-font: 'Inter', 'Hind Siliguri', system-ui, -apple-system, 'Segoe UI', sans-serif; --rgt-font-bn: 'Hind Siliguri', 'Inter', system-ui, sans-serif; } /* ------------------------------------------------------------------------- Base — scoped, never global ------------------------------------------------------------------------- */ .rgt-shell, .rgt-account-menu, .rgt-toast-wrap { font-family: var(--rgt-font); color: var(--rgt-text); line-height: 1.55; -webkit-font-smoothing: antialiased; } .rgt-shell *, .rgt-shell *::before, .rgt-shell *::after, .rgt-account-menu *, .rgt-toast-wrap *, .rgt-wp-admin-mirror .rgt-shell * { box-sizing: border-box; } /* FIX v2.8.0: text-decoration:none without !important could still lose to a theme's own higher-specificity or later-loaded link rules (the exact problem already hardened for the sidebar/drawer nav below, in v1.8.2) — links elsewhere in the plugin (buttons, callouts, tables, product cards, the account menu, etc.) never had that same protection. This is now the one site-wide rule: no anchor inside a plugin surface ever shows an underline, in any state. */ .rgt-shell a, .rgt-shell a:hover, .rgt-shell a:focus, .rgt-shell a:active, .rgt-shell a:visited, .rgt-account-menu a, .rgt-account-menu a:hover, .rgt-account-menu a:focus, .rgt-account-menu a:active, .rgt-account-menu a:visited { text-decoration: none !important; text-decoration-line: none !important; text-decoration-color: transparent !important; -webkit-text-decoration-line: none !important; } .rgt-shell a { color: var(--rgt-accent); } .rgt-shell img { max-width: 100%; height: auto; } .rgt-shell h2, .rgt-shell h3, .rgt-shell h4 { color: var(--rgt-primary); margin: 0; letter-spacing: -.02em; } .rgt-shell p { margin: 0; } .rgt-shell button, .rgt-shell input, .rgt-shell select, .rgt-shell textarea { font: inherit; color: inherit; } .rgt-shell code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .9em; background: var(--rgt-surface-3); padding: 2px 6px; border-radius: 6px; } .rgt-muted { color: var(--rgt-muted); } .rgt-profit { color: var(--rgt-green); } .rgt-debit { color: var(--rgt-text-2); } .rgt-eyebrow { display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--rgt-accent); margin-bottom: 6px; } .rgt-subhead { margin: 28px 0 14px; font-size: 17px; } /* Layout containers */ .rgt-market-shell, .rgt-auth-wrap, .rgt-product-shell { width: 100%; max-width: 1240px; margin: 0 auto; padding: 32px 20px; } .rgt-dashboard-shell, .rgt-admin-portal-shell { width: 100%; max-width: 1560px; margin: 0 auto; padding: 28px 20px; } .rgt-wp-admin-mirror { margin: 16px 20px 0 0; } .rgt-wp-admin-mirror .rgt-admin-portal-shell { max-width: none; padding: 0; } /* ------------------------------------------------------------------------- Buttons ------------------------------------------------------------------------- */ .rgt-shell .rgt-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 11px 20px; border: 0; border-radius: var(--rgt-r); background: var(--rgt-primary); color: #fff; font-size: 14px; font-weight: 600; line-height: 1.2; cursor: pointer; text-align: center; box-shadow: var(--rgt-sh-1); transition: transform .16s var(--rgt-ease), box-shadow .16s var(--rgt-ease), background .16s var(--rgt-ease), opacity .16s var(--rgt-ease); } .rgt-shell .rgt-btn:hover { background: color-mix(in srgb, var(--rgt-primary) 88%, #fff); box-shadow: var(--rgt-sh-2); transform: translateY(-1px); } .rgt-shell .rgt-btn:active { transform: translateY(0) scale(.985); } .rgt-shell .rgt-btn:focus-visible { outline: 2px solid var(--rgt-accent); outline-offset: 2px; } .rgt-shell .rgt-btn-small { min-height: 38px; padding: 8px 14px; font-size: 13px; border-radius: var(--rgt-r-sm); } .rgt-shell .rgt-btn-secondary { background: var(--rgt-surface); color: var(--rgt-primary); border: 1px solid var(--rgt-border-strong); box-shadow: none; } .rgt-shell .rgt-btn-secondary:hover { background: var(--rgt-surface-3); } .rgt-shell .rgt-btn-danger { background: var(--rgt-red); } .rgt-shell .rgt-btn-danger:hover { background: color-mix(in srgb, var(--rgt-red) 88%, #000); } .rgt-shell .rgt-btn[disabled], .rgt-shell .rgt-btn.is-loading { opacity: .6; cursor: not-allowed; transform: none; } .rgt-shell .rgt-btn.is-loading::before { content: ""; width: 15px; height: 15px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: rgt-spin .6s linear infinite; } @keyframes rgt-spin { to { transform: rotate(360deg); } } .rgt-shell .rgt-wide { grid-column: 1 / -1; width: 100%; } .rgt-link-btn { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: 14px; color: var(--rgt-accent); white-space: nowrap; } .rgt-link-btn::after { content: "→"; transition: transform .16s var(--rgt-ease); } .rgt-link-btn:hover::after { transform: translateX(3px); } .rgt-table-link { display: inline-flex; align-items: center; padding: 5px 10px; border-radius: 8px; background: var(--rgt-surface-3); color: var(--rgt-primary); font-size: 12px; font-weight: 600; border: 0; cursor: pointer; transition: background .16s var(--rgt-ease); } .rgt-table-link:hover { background: var(--rgt-border); } .rgt-table-link.is-danger { background: var(--rgt-red-bg); color: var(--rgt-red); } .rgt-table-link.is-danger:hover { background: color-mix(in srgb, var(--rgt-red-bg) 80%, var(--rgt-red)); } .rgt-row-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; } /* ------------------------------------------------------------------------- Notices / toasts ------------------------------------------------------------------------- */ .rgt-notice { display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; margin: 0 0 20px; border-radius: var(--rgt-r); border: 1px solid; font-size: 14px; font-weight: 500; animation: rgt-slide-in .3s var(--rgt-spring) both; } .rgt-notice-icon { flex: 0 0 20px; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 700; color: #fff; margin-top: 1px; } .rgt-notice-text { flex: 1; min-width: 0; } .rgt-notice-close { border: 0; background: transparent; font-size: 20px; line-height: 1; cursor: pointer; color: inherit; opacity: .5; padding: 0 2px; } .rgt-notice-close:hover { opacity: 1; } .rgt-notice-success { background: var(--rgt-green-bg); border-color: color-mix(in srgb, var(--rgt-green) 25%, transparent); color: #0A6B4B; } .rgt-notice-success .rgt-notice-icon { background: var(--rgt-green); } .rgt-notice-success .rgt-notice-icon::before { content: "✓"; } .rgt-notice-error { background: var(--rgt-red-bg); border-color: color-mix(in srgb, var(--rgt-red) 25%, transparent); color: #A32224; } .rgt-notice-error .rgt-notice-icon { background: var(--rgt-red); } .rgt-notice-error .rgt-notice-icon::before { content: "!"; } .rgt-notice-warning { background: var(--rgt-amber-bg); border-color: color-mix(in srgb, var(--rgt-amber) 25%, transparent); color: #96540A; } .rgt-notice-warning .rgt-notice-icon { background: var(--rgt-amber); } .rgt-notice-warning .rgt-notice-icon::before { content: "!"; } .rgt-notice-info { background: #EAF2FE; border-color: color-mix(in srgb, var(--rgt-accent) 25%, transparent); color: #1D4E9B; } .rgt-notice-info .rgt-notice-icon { background: var(--rgt-accent); } .rgt-notice-info .rgt-notice-icon::before { content: "i"; } @keyframes rgt-slide-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } } /* Floating toast copy created by JS */ /* FIX v2.0.1: the toast sat at z-index 100000 (above the WP admin bar's 99999) with a flat top:20px, so on both wp-admin screens and the logged-in frontend it rendered on top of the admin bar and covered "Howdy, admin". It now sits just below the admin bar (z-index 99998) and is pushed clear of the fixed bar in both contexts — frontend uses body.admin-bar, wp-admin uses .wp-admin — so it can never overlap the bar again. */ /* FIX v2.4.1: on sites whose theme has its own fixed/sticky mobile header (logo, site title, hamburger menu) with a higher z-index than 99998, that header painted ON TOP of the toast — the toast's own background was fine, but the theme header's foreground (logo text, menu icon) rendered over it, making the message look like it had no background at all. Two changes close this regardless of what the theme does: the z-index is now the maximum valid value so nothing can out-rank it, isolation:isolate guarantees it forms its own stacking context, and the tint backgrounds below are !important so a theme's own "transparent header children" reset rules cannot strip them either. */ .rgt-toast-wrap { position: fixed; top: 20px; right: 20px; z-index: 2147483647; isolation: isolate; display: grid; gap: 10px; width: min(380px, calc(100vw - 32px)); pointer-events: none; } body.admin-bar .rgt-toast-wrap, .wp-admin .rgt-toast-wrap { top: 42px; } /* FIX v2.0.0: this rule forced background-color: var(--rgt-surface) (white) with a higher specificity (.rgt-toast-wrap .rgt-notice = 0,2,0) than the type tints (.rgt-notice-success = 0,1,0), so every floating toast rendered white regardless of type and looked broken. The type-specific tint is kept instead. */ .rgt-toast-wrap .rgt-notice { margin: 0; pointer-events: auto; box-shadow: var(--rgt-sh-4); background-clip: padding-box; } .rgt-toast-wrap .rgt-notice-success { background: var(--rgt-green-bg) !important; } .rgt-toast-wrap .rgt-notice-error { background: var(--rgt-red-bg) !important; } .rgt-toast-wrap .rgt-notice-warning { background: var(--rgt-amber-bg) !important; } .rgt-toast-wrap .rgt-notice-info { background: #EAF2FE !important; } .rgt-toast-wrap .rgt-notice.is-leaving { animation: rgt-slide-out .25s var(--rgt-ease) forwards; } @keyframes rgt-slide-out { to { opacity: 0; transform: translateX(16px); } } /* ------------------------------------------------------------------------- App shell (trader dashboard + admin portal) ------------------------------------------------------------------------- */ .rgt-app { display: grid; grid-template-columns: 268px minmax(0, 1fr); gap: 24px; align-items: start; } .rgt-app-main { min-width: 0; display: flex; flex-direction: column; gap: 20px; } .rgt-sidebar { position: sticky; top: 24px; align-self: start; max-height: calc(100vh - 48px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; padding: 20px 16px; border-radius: var(--rgt-r-xl); background: linear-gradient(168deg, var(--rgt-primary) 0%, color-mix(in srgb, var(--rgt-primary) 78%, #000) 100%); color: rgba(255, 255, 255, .9); box-shadow: var(--rgt-sh-3); } .admin-bar .rgt-sidebar { top: 56px; max-height: calc(100vh - 80px); } .rgt-side-brand { display: flex; align-items: center; gap: 12px; padding-bottom: 16px; border-bottom: 1px solid rgba(255, 255, 255, .1); } .rgt-side-brand img { width: 44px; height: 44px; object-fit: contain; background: #fff; border-radius: var(--rgt-r-sm); padding: 5px; flex: 0 0 auto; } .rgt-side-brand strong { display: block; color: #fff; font-size: 16px; line-height: 1.25; } .rgt-side-brand span { display: block; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: rgba(255, 255, 255, .55); } .rgt-user-mini { display: flex; align-items: center; gap: 12px; margin: 16px 0; padding: 12px; border-radius: var(--rgt-r); background: rgba(255, 255, 255, .07); } .rgt-user-mini strong { display: block; color: #fff; font-size: 14px; line-height: 1.3; } .rgt-user-mini small { display: block; font-size: 11px; color: rgba(255, 255, 255, .55); } .rgt-user-mini small.is-verified { color: #6EE7B7; } .rgt-avatar { flex: 0 0 auto; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; background: linear-gradient(135deg, var(--rgt-accent), var(--rgt-violet)); color: #fff; font-weight: 700; font-size: 16px; } .rgt-avatar.sm { width: 34px; height: 34px; font-size: 13px; } /* NEW v2.9.0: an uploaded profile picture drops into the exact same box (avatar, account-menu avatar, profile cover avatar) as a cover-fit background image instead of the initials-on-gradient look — no layout changes needed at any call site. !important guards against later single-class rules (.rgt-account-avatar, .rgt-profile-avatar, etc., which set the "background" shorthand for the gradient) resetting size/position/repeat back to their defaults regardless of source order; the actual image itself comes from an inline style, which always wins anyway. */ .rgt-avatar-photo { background-color: var(--rgt-surface-3) !important; background-size: cover !important; background-position: center !important; background-repeat: no-repeat !important; color: transparent !important; } .rgt-side-nav { display: grid; gap: 3px; } .rgt-side-nav a { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 40px; padding: 9px 12px; border-radius: var(--rgt-r-sm); color: rgba(255, 255, 255, .72); font-size: 13.5px; font-weight: 500; transition: background .16s var(--rgt-ease), color .16s var(--rgt-ease); } .rgt-side-nav a:hover { background: rgba(255, 255, 255, .08); color: #fff; } .rgt-side-nav a.active { background: rgba(255, 255, 255, .13); color: #fff; font-weight: 600; box-shadow: inset 2px 0 0 var(--rgt-accent); } .rgt-side-nav .rgt-nav-logout { margin-top: 8px; padding-top: 14px; border-top: 1px solid rgba(255, 255, 255, .1); border-radius: 0; color: rgba(255, 255, 255, .5); } .rgt-side-nav .rgt-nav-logout:hover { background: transparent; color: #fff; } .rgt-nav-label { flex: 1; min-width: 0; } .rgt-nav-badge { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; min-width: 21px; height: 21px; padding: 0 6px; border-radius: 999px; background: var(--rgt-accent); color: #fff; font-size: 11px; font-weight: 700; line-height: 1; } /* Page head */ .rgt-page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; } .rgt-page-head h2 { font-size: clamp(22px, 2.4vw, 30px); line-height: 1.2; } .rgt-page-head p { margin-top: 6px; color: var(--rgt-muted); font-size: 14px; max-width: 640px; } .rgt-balance-pill { padding: 12px 18px; border-radius: var(--rgt-r); background: var(--rgt-surface); border: 1px solid var(--rgt-border); box-shadow: var(--rgt-sh-1); min-width: 180px; } .rgt-balance-pill span { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--rgt-muted); font-weight: 600; } .rgt-balance-pill strong { display: block; font-size: 22px; color: var(--rgt-primary); margin-top: 2px; } /* Section head (market) */ .rgt-section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 26px; flex-wrap: wrap; } .rgt-section-head h2 { font-size: clamp(24px, 3vw, 34px); line-height: 1.15; } .rgt-section-head p { margin-top: 8px; color: var(--rgt-muted); max-width: 620px; } /* ------------------------------------------------------------------------- Mobile bar + drawer FIX v1.8.0 — the old drawer shared the .rgt-mobile-nav class, which media queries forced to display:block. That beat the [hidden] attribute and left a fixed, fully transparent, z-index:9999 overlay permanently on top of the dashboard on every screen under 850px, swallowing all clicks. The drawer now owns its own class and an explicit [hidden] rule. ------------------------------------------------------------------------- */ .rgt-mobile-bar { display: none; } .rgt-drawer[hidden] { display: none !important; } .rgt-drawer { position: fixed; inset: 0; z-index: 99999; } .rgt-drawer-backdrop { position: absolute; inset: 0; background: rgba(10, 22, 32, .5); opacity: 0; transition: opacity .22s var(--rgt-ease); } .rgt-drawer-panel { position: absolute; top: 0; left: 0; width: min(84vw, 320px); height: 100%; padding: 18px 14px; overflow-y: auto; background: linear-gradient(168deg, var(--rgt-primary) 0%, color-mix(in srgb, var(--rgt-primary) 78%, #000) 100%); color: #fff; transform: translateX(-100%); transition: transform .24s var(--rgt-ease); box-shadow: 20px 0 48px rgba(0, 0, 0, .28); } .rgt-drawer.is-open .rgt-drawer-backdrop { opacity: 1; } .rgt-drawer.is-open .rgt-drawer-panel { transform: translateX(0); } /* FIX v3.21.0: two tap-accuracy bugs in the mobile drawer, both from the same cause — the overlay covers the entire screen (inset: 0) and the panel slides for 240ms, but neither stopped receiving taps during those windows. 1) While the panel is animating in, its links are physically moving across the screen. A tap lands on whatever sits under the finger at that instant, which is a DIFFERENT nav item from the one the user sees a moment later — exactly the "I tapped one tab but another opened" symptom. 2) After closing, `hidden` is only set 240ms later (waiting for the slide-out), so for a quarter of a second an invisible full-screen overlay swallowed taps meant for the page underneath. Blocking pointer events until the panel has actually settled, and again as soon as closing starts, fixes both. */ .rgt-drawer:not(.is-open) { pointer-events: none; } .rgt-drawer.is-open { pointer-events: auto; } .rgt-drawer.is-animating .rgt-drawer-panel { pointer-events: none; } .rgt-drawer-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 16px; } .rgt-drawer-head .rgt-side-brand { border: 0; padding: 0; } .rgt-drawer-close { flex: 0 0 auto; width: 38px; height: 38px; border: 0; border-radius: var(--rgt-r-sm); background: rgba(255, 255, 255, .1); color: #fff; font-size: 24px; line-height: 1; cursor: pointer; } .rgt-drawer-list { display: grid; gap: 3px; } .rgt-drawer-list a { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px; border-radius: var(--rgt-r-sm); color: rgba(255, 255, 255, .78); font-size: 14px; font-weight: 500; } .rgt-drawer-list a.active { background: rgba(255, 255, 255, .13); color: #fff; font-weight: 600; } /* FIX v3.21.0: the icon, label and badge inside a nav link are the actual tap target on most taps. Making them transparent to pointer events means the event always resolves to the itself, so which row was tapped is never ambiguous. */ .rgt-drawer-list a > * { pointer-events: none; } .rgt-drawer-list a i { font-style: normal; display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px; background: var(--rgt-accent); color: #fff; font-size: 11px; font-weight: 700; } .rgt-drawer-list .rgt-nav-logout { margin-top: 8px; padding-top: 14px; border-top: 1px solid rgba(255, 255, 255, .1); border-radius: 0; color: rgba(255, 255, 255, .5); } body.rgt-drawer-open { overflow: hidden; } /* ------------------------------------------------------------------------- Panels & cards ------------------------------------------------------------------------- */ .rgt-panel { background: var(--rgt-surface); border: 1px solid var(--rgt-border); border-radius: var(--rgt-r-lg); padding: 22px; box-shadow: var(--rgt-sh-1); } .rgt-panel + .rgt-panel { margin-top: 20px; } /* NEW v3.6.0: visually marks a panel as holding a destructive, irreversible action (e.g. resetting a trader's trading data) — a red-tinted border/wash instead of the neutral default, so it reads as different at a glance. */ .rgt-panel-danger { border-color: color-mix(in srgb, var(--rgt-red) 35%, var(--rgt-border)); background: color-mix(in srgb, var(--rgt-red) 4%, var(--rgt-surface)); } .rgt-panel-danger .rgt-panel-head h3 { color: var(--rgt-red); } .rgt-panel-danger .rgt-panel-note { color: var(--rgt-text-2); } .rgt-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 18px; } .rgt-panel-head h3 { font-size: 17px; } .rgt-panel-head a { font-size: 13px; font-weight: 600; } /* NEW v3.6.0: lightweight in-page sub-tabs (e.g. Recharge "Submit" vs "History"). */ .rgt-subtabs { display: inline-flex; gap: 4px; padding: 4px; background: var(--rgt-surface-2); border: 1px solid var(--rgt-border); border-radius: 999px; margin-bottom: 18px; } .rgt-subtab-btn { border: 0; background: transparent; padding: 9px 18px; border-radius: 999px; font-size: 13px; font-weight: 600; color: var(--rgt-text-2); cursor: pointer; transition: background .16s var(--rgt-ease), color .16s var(--rgt-ease); display: inline-flex; align-items: center; gap: 6px; } .rgt-subtab-btn:hover:not(.is-active) { background: var(--rgt-surface-3); } .rgt-subtab-btn.is-active { background: var(--rgt-primary); color: #fff; } .rgt-subtab-count { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: rgba(255,255,255,.25); font-size: 10px; } .rgt-subtab-btn:not(.is-active) .rgt-subtab-count { background: var(--rgt-surface-3); color: var(--rgt-text-2); } .rgt-panel-note { margin: -8px 0 16px; font-size: 13px; color: var(--rgt-muted); } .rgt-pill { display: inline-flex; align-items: center; justify-content: center; min-width: 24px; height: 24px; padding: 0 8px; border-radius: 999px; background: var(--rgt-surface-3); color: var(--rgt-text-2); font-size: 12px; font-weight: 700; } .rgt-badge { display: inline-block; padding: 4px 9px; border-radius: 7px; background: var(--rgt-surface-3); color: var(--rgt-text-2); font-size: 11px; font-weight: 600; } /* Stat cards */ .rgt-stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; } .rgt-stat { position: relative; overflow: hidden; padding: 18px; border-radius: var(--rgt-r-lg); background: var(--rgt-surface); border: 1px solid var(--rgt-border); box-shadow: var(--rgt-sh-1); transition: transform .18s var(--rgt-ease), box-shadow .18s var(--rgt-ease); } .rgt-stat:hover { transform: translateY(-2px); box-shadow: var(--rgt-sh-2); } .rgt-stat::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 3px; background: var(--rgt-accent); } .rgt-stat span { display: block; font-size: 12px; font-weight: 600; color: var(--rgt-muted); } .rgt-stat strong { display: block; margin-top: 5px; font-size: clamp(19px, 1.9vw, 25px); line-height: 1.15; color: var(--rgt-primary); overflow-wrap: anywhere; } .rgt-tone-accent::before { background: var(--rgt-accent); } .rgt-tone-blue::before { background: #2563EB; } .rgt-tone-green::before { background: var(--rgt-green); } .rgt-tone-amber::before { background: var(--rgt-amber); } .rgt-tone-violet::before { background: var(--rgt-violet); } .rgt-tone-cyan::before { background: var(--rgt-cyan); } .rgt-tone-rose::before { background: var(--rgt-rose); } .rgt-tone-slate::before { background: #64748B; } .rgt-finance-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; } .rgt-finance-card { padding: 20px; border-radius: var(--rgt-r-lg); background: linear-gradient(135deg, var(--rgt-primary), color-mix(in srgb, var(--rgt-primary) 60%, var(--rgt-accent))); color: #fff; box-shadow: var(--rgt-sh-2); } .rgt-finance-card span { display: block; font-size: 12px; color: rgba(255, 255, 255, .7); font-weight: 500; } .rgt-finance-card strong { display: block; margin-top: 4px; font-size: 24px; } /* v3.49.0: every admin KPI card with a destination is a real drill-down link. */ body.rgt-premium-admin-app .rgt-admin-summary-card.is-linked, .rgt-wp-admin-mirror .rgt-admin-summary-card.is-linked { color: inherit; text-decoration: none; cursor: pointer; transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease; } body.rgt-premium-admin-app .rgt-admin-summary-card.is-linked:hover, .rgt-wp-admin-mirror .rgt-admin-summary-card.is-linked:hover { transform: translateY(-2px); border-color: rgba(45,121,199,.35); box-shadow: 0 10px 22px rgba(15,37,54,.09); } body.rgt-premium-admin-app .rgt-admin-summary-card.is-linked:focus-visible, .rgt-wp-admin-mirror .rgt-admin-summary-card.is-linked:focus-visible { outline: 3px solid rgba(37,99,235,.28); outline-offset: 2px; } /* Launch / quick grids */ .rgt-launch-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; } .rgt-launch-grid a { position: relative; display: block; padding: 18px; border-radius: var(--rgt-r); background: var(--rgt-surface-2); border: 1px solid var(--rgt-border); transition: transform .18s var(--rgt-ease), box-shadow .18s var(--rgt-ease), border-color .18s var(--rgt-ease); } .rgt-launch-grid a:hover { transform: translateY(-2px); box-shadow: var(--rgt-sh-2); border-color: var(--rgt-border-strong); } .rgt-launch-grid b { display: block; color: var(--rgt-primary); font-size: 15px; } .rgt-launch-grid span { display: block; margin-top: 5px; font-size: 12.5px; color: var(--rgt-muted); line-height: 1.5; } .rgt-card-badge { position: absolute; top: 12px; right: 12px; display: grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px; background: var(--rgt-accent); color: #fff; font-size: 11px; font-weight: 700; font-style: normal; } .rgt-overview-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 20px; align-items: start; } .rgt-overview-grid .rgt-panel + .rgt-panel { margin-top: 0; } .rgt-quick-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .rgt-quick-grid a { display: block; padding: 16px; border-radius: var(--rgt-r); background: var(--rgt-surface-2); border: 1px solid var(--rgt-border); transition: background .16s var(--rgt-ease), transform .16s var(--rgt-ease); } .rgt-quick-grid a:hover { background: var(--rgt-surface-3); transform: translateY(-2px); } .rgt-quick-grid b { display: block; color: var(--rgt-primary); font-size: 14px; } .rgt-quick-grid span { display: block; font-size: 12px; color: var(--rgt-muted); margin-top: 2px; } /* ------------------------------------------------------------------------- Empty states & callouts ------------------------------------------------------------------------- */ .rgt-empty { display: block; width: 100%; grid-column: 1 / -1; padding: 20px; border: 1px dashed var(--rgt-border-strong); border-radius: var(--rgt-r); background: var(--rgt-surface-2); text-align: left; line-height: 1.6; } .rgt-empty strong { display: block; color: var(--rgt-primary); font-size: 15px; } .rgt-empty span { display: block; margin-top: 4px; font-size: 13.5px; color: var(--rgt-muted); } .rgt-empty .rgt-btn { margin-top: 14px; } .rgt-empty-lg { padding: 36px 24px; text-align: center; } .rgt-empty-lg span { max-width: 380px; margin-inline: auto; } .rgt-callout { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; padding: 16px 18px; border-radius: var(--rgt-r); background: #EAF2FE; border: 1px solid color-mix(in srgb, var(--rgt-accent) 22%, transparent); color: #1D4E9B; font-size: 14px; } .rgt-callout strong { display: block; width: 100%; color: inherit; font-size: 14px; } .rgt-callout span { flex: 1; min-width: 200px; font-size: 13.5px; } .rgt-callout a:not(.rgt-btn) { font-weight: 600; text-decoration: none; color: inherit; } .rgt-callout .rgt-btn { background: currentColor; } .rgt-callout .rgt-btn { color: #fff; background: var(--rgt-accent); } .rgt-callout-warn { background: var(--rgt-amber-bg); border-color: color-mix(in srgb, var(--rgt-amber) 25%, transparent); color: #96540A; } .rgt-callout-warn .rgt-btn { background: var(--rgt-amber); } /* Mode banner (product edit vs create) */ .rgt-mode-banner { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 18px; padding: 14px 16px; border-radius: var(--rgt-r); background: var(--rgt-amber-bg); border: 1px solid color-mix(in srgb, var(--rgt-amber) 25%, transparent); } .rgt-mode-dot { flex: 0 0 10px; width: 10px; height: 10px; margin-top: 6px; border-radius: 50%; background: var(--rgt-amber); box-shadow: 0 0 0 4px color-mix(in srgb, var(--rgt-amber) 18%, transparent); } .rgt-mode-banner strong { display: block; color: #96540A; font-size: 14px; } .rgt-mode-banner small { display: block; margin-top: 3px; font-size: 12.5px; color: #A9720E; line-height: 1.55; font-family: var(--rgt-font-bn); } /* ------------------------------------------------------------------------- Forms ------------------------------------------------------------------------- */ .rgt-form { display: grid; gap: 16px; } .rgt-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } .rgt-form .rgt-form-grid { gap: 16px; } .rgt-shell label { display: block; font-size: 12.5px; font-weight: 600; color: var(--rgt-text-2); } .rgt-shell input[type="text"], .rgt-shell input[type="email"], .rgt-shell input[type="password"], .rgt-shell input[type="number"], .rgt-shell input[type="date"], .rgt-shell input[type="search"], .rgt-shell input[type="file"], .rgt-shell select, .rgt-shell textarea { display: block; width: 100%; margin-top: 6px; min-height: 44px; padding: 11px 13px; border: 1px solid var(--rgt-border-strong); border-radius: var(--rgt-r-sm); background: var(--rgt-surface); color: var(--rgt-text); font-size: 14px; outline: 0; transition: border-color .16s var(--rgt-ease), box-shadow .16s var(--rgt-ease); } .rgt-shell textarea { min-height: 96px; resize: vertical; line-height: 1.6; } .rgt-shell select[multiple] { min-height: 108px; padding: 8px; } .rgt-shell input[type="file"] { padding: 9px 12px; background: var(--rgt-surface-2); cursor: pointer; } .rgt-shell input:focus, .rgt-shell select:focus, .rgt-shell textarea:focus { border-color: var(--rgt-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--rgt-accent) 15%, transparent); } .rgt-shell input[readonly] { background: var(--rgt-surface-3); color: var(--rgt-text-2); cursor: default; } .rgt-shell ::placeholder { color: var(--rgt-muted); opacity: 1; } /* NEW v3.20.0: visible marker on required fields — `required` alone shows nothing until submission is blocked, so a form gave no indication of which fields were mandatory. Added by initRequiredMarkers() in rgt.js. */ .rgt-req { color: var(--rgt-red); font-weight: 700; margin-left: 3px; } .rgt-required-note { display: block; margin-bottom: 14px; font-size: 12.5px; color: var(--rgt-text-2); } .rgt-required-note b { color: var(--rgt-red); } .rgt-field-hint { display: block; margin-top: 6px; font-size: 11.5px; font-weight: 400; color: var(--rgt-muted); line-height: 1.5; } .rgt-form-section { margin-top: 8px; padding-top: 18px; border-top: 1px solid var(--rgt-border); } .rgt-form-section h4 { font-size: 14px; letter-spacing: .04em; text-transform: uppercase; color: var(--rgt-muted); } .rgt-check { display: flex !important; align-items: flex-start; gap: 10px; font-weight: 500; color: var(--rgt-text-2); } .rgt-check input[type="checkbox"] { width: 18px; height: 18px; min-height: 0; margin: 2px 0 0; flex: 0 0 18px; accent-color: var(--rgt-accent); } .rgt-check span { font-size: 13.5px; } .rgt-login-options { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; } .rgt-forgot-link { font-size: 13px; font-weight: 600; } .rgt-forgot-link:hover { text-decoration: none; } /* Password toggle */ .rgt-password-field { position: relative; margin-top: 6px; } .rgt-password-field input { margin-top: 0; padding-right: 50px; } .rgt-password-toggle { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); display: grid; place-items: center; width: 34px; height: 34px; border: 0; border-radius: 8px; background: var(--rgt-surface-3); color: var(--rgt-text-2); cursor: pointer; transition: background .16s var(--rgt-ease); } .rgt-password-toggle:hover { background: var(--rgt-border); } .rgt-password-toggle svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; } .rgt-password-toggle .rgt-eye-closed { display: none; } .rgt-password-toggle.is-visible .rgt-eye-open { display: none; } .rgt-password-toggle.is-visible .rgt-eye-closed { display: block; } /* Number stepper */ .rgt-stepper { display: inline-flex; align-items: stretch; margin-top: 6px; border: 1px solid var(--rgt-border-strong); border-radius: var(--rgt-r-sm); overflow: hidden; background: var(--rgt-surface); } .rgt-stepper button { width: 38px; border: 0; background: var(--rgt-surface-2); color: var(--rgt-text-2); font-size: 17px; line-height: 1; cursor: pointer; transition: background .14s var(--rgt-ease); } .rgt-stepper button:hover { background: var(--rgt-surface-3); } .rgt-stepper input { width: 62px; margin: 0; min-height: 42px; border: 0; border-inline: 1px solid var(--rgt-border); border-radius: 0; text-align: center; padding: 8px 4px; -moz-appearance: textfield; } .rgt-stepper input:focus { box-shadow: none; } .rgt-stepper input::-webkit-outer-spin-button, .rgt-stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } /* Colour field */ .rgt-color-field { display: flex; gap: 8px; margin-top: 6px; } .rgt-color-field input[type="color"] { width: 48px; min-height: 44px; margin: 0; padding: 4px; border-radius: var(--rgt-r-sm); cursor: pointer; } .rgt-color-field input[type="text"] { margin: 0; } /* Capability grid */ .rgt-cap-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 8px; } .rgt-cap { display: flex !important; align-items: center; gap: 10px; padding: 12px 14px; border: 1px solid var(--rgt-border); border-radius: var(--rgt-r-sm); background: var(--rgt-surface-2); cursor: pointer; transition: border-color .14s var(--rgt-ease); } .rgt-cap:hover { border-color: var(--rgt-border-strong); } .rgt-cap input { width: 17px; height: 17px; min-height: 0; margin: 0; flex: 0 0 17px; accent-color: var(--rgt-accent); } .rgt-cap span { font-size: 13px; font-weight: 500; } /* Search field */ .rgt-search-field { position: relative; } .rgt-search-field svg { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); width: 17px; height: 17px; fill: none; stroke: var(--rgt-muted); stroke-width: 1.8; stroke-linecap: round; pointer-events: none; } /* FIX v3.17.0: this was `.rgt-search-field input`, which loses the cascade to `.rgt-shell input[type="search"]` above — that rule's `padding` shorthand resets padding-left back to 13px, so the magnifier icon sat right on top of the placeholder text in every table search box. Matching the .rgt-shell prefix raises specificity enough for the left padding to actually apply. */ .rgt-shell .rgt-search-field input, .rgt-wp-admin-mirror .rgt-search-field input { margin-top: 0; padding-left: 38px; } /* Filter bar */ .rgt-filter { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr) auto; gap: 10px; align-items: center; margin-bottom: 22px; } .rgt-filter select, .rgt-filter input { margin-top: 0; } .rgt-panel > .rgt-filter { margin-bottom: 18px; } .rgt-table-toolbar { margin-bottom: 14px; max-width: 340px; } /* Inline forms inside tables */ .rgt-inline-form { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0; } .rgt-inline-form input, .rgt-inline-form select { margin-top: 0; min-height: 36px; padding: 7px 10px; font-size: 13px; width: auto; min-width: 120px; } .rgt-inline-form-wide input, .rgt-inline-form-wide select { min-width: 140px; } .rgt-settle-form { display: grid; grid-template-columns: repeat(2, minmax(120px, 1fr)); gap: 8px; min-width: 320px; } .rgt-settle-form label { font-size: 11px; } .rgt-settle-form input { margin-top: 4px; min-height: 36px; padding: 7px 10px; font-size: 13px; } .rgt-hidden-form { display: none; } /* Live calculation card */ .rgt-calc-card { padding: 16px 18px; border-radius: var(--rgt-r); background: #EAF2FE; border: 1px solid color-mix(in srgb, var(--rgt-accent) 18%, transparent); } .rgt-calc-card strong { display: block; font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--rgt-accent); margin-bottom: 8px; } .rgt-calc-card div { display: inline-block; margin: 4px 24px 0 0; font-size: 13.5px; color: var(--rgt-text-2); } .rgt-calc-card b { color: var(--rgt-primary); font-size: 15px; } /* Classic wp-admin metabox grid */ .rgt-admin-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; } .rgt-admin-grid label span { display: block; margin-bottom: 5px; font-weight: 600; font-size: 12.5px; } .rgt-admin-grid input, .rgt-admin-grid select, .rgt-admin-grid textarea { width: 100%; } .rgt-admin-grid .rgt-wide { grid-column: 1 / -1; } /* ------------------------------------------------------------------------- Auth screens ------------------------------------------------------------------------- */ .rgt-auth-wrap { min-height: 60vh; display: grid; place-items: center; } .rgt-auth-card { width: min(520px, 100%); padding: 32px; background: var(--rgt-surface); border: 1px solid var(--rgt-border); border-radius: var(--rgt-r-xl); box-shadow: var(--rgt-sh-3); } .rgt-auth-wide { width: min(760px, 100%); } .rgt-auth-brand { display: flex; align-items: center; gap: 12px; margin-bottom: 22px; } .rgt-auth-brand img { width: 48px; height: 48px; object-fit: contain; border-radius: var(--rgt-r-sm); background: var(--rgt-surface-2); padding: 5px; } .rgt-auth-brand span { display: block; font-size: 10.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--rgt-accent); } .rgt-auth-brand strong { display: block; color: var(--rgt-primary); font-size: 16px; } .rgt-auth-card h2 { font-size: 26px; margin-bottom: 6px; } .rgt-auth-card > p.rgt-muted { font-size: 14px; margin-bottom: 4px; } .rgt-auth-foot { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--rgt-border); text-align: center; font-size: 13.5px; color: var(--rgt-muted); } .rgt-auth-foot a { font-weight: 600; } /* ------------------------------------------------------------------------- Market grid ------------------------------------------------------------------------- */ .rgt-product-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(255px, 1fr)); gap: 20px; } .rgt-product-card { display: flex; flex-direction: column; background: var(--rgt-surface); border: 1px solid var(--rgt-border); border-radius: var(--rgt-r-lg); overflow: hidden; box-shadow: var(--rgt-sh-1); transition: transform .2s var(--rgt-ease), box-shadow .2s var(--rgt-ease), border-color .2s var(--rgt-ease); } .rgt-product-card:hover { transform: translateY(-3px); box-shadow: var(--rgt-sh-3); border-color: var(--rgt-border-strong); } /* FIX v2.0.1: product thumbnails are now a fixed 1:1 square (object-fit: cover centre-crops any non-square upload) so the grid stays even regardless of source image dimensions. */ .rgt-product-image { position: relative; display: block; aspect-ratio: 1 / 1; background: var(--rgt-surface-3); overflow: hidden; } .rgt-product-image img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s var(--rgt-ease); } .rgt-product-card:hover .rgt-product-image img { transform: scale(1.04); } .rgt-product-image > .rgt-status { position: absolute; top: 12px; right: 12px; background: rgba(255, 255, 255, .95); box-shadow: var(--rgt-sh-1); } .rgt-placeholder { width: 100%; height: 100%; display: grid; place-items: center; font-size: 32px; font-weight: 800; letter-spacing: .04em; color: var(--rgt-primary); background: linear-gradient(135deg, var(--rgt-surface-3), var(--rgt-surface-2)); text-transform: uppercase; } .rgt-product-body { display: flex; flex-direction: column; flex: 1; padding: 16px; } .rgt-cat { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--rgt-accent); } .rgt-product-card h3 { margin: 6px 0 12px; font-size: 16px; line-height: 1.35; } .rgt-product-card h3 a { color: var(--rgt-primary); } .rgt-product-card h3 a:hover { color: var(--rgt-accent); } .rgt-shop-price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; } .rgt-shop-price span { width: 100%; font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--rgt-muted); } .rgt-shop-price strong { font-size: 23px; line-height: 1.1; color: var(--rgt-primary); } .rgt-shop-price small { font-size: 12px; color: var(--rgt-muted); } .rgt-shop-benefits { display: grid; gap: 6px; padding: 11px 12px; margin-bottom: 14px; border-radius: var(--rgt-r-sm); background: var(--rgt-surface-2); } .rgt-shop-benefits span { display: flex; justify-content: space-between; gap: 10px; font-size: 12px; color: var(--rgt-muted); } .rgt-shop-benefits b { color: var(--rgt-primary); white-space: nowrap; } .rgt-stock-head { display: flex; justify-content: space-between; gap: 10px; margin-bottom: 6px; font-size: 11.5px; font-weight: 600; color: var(--rgt-muted); } .rgt-progress { height: 6px; border-radius: 999px; background: var(--rgt-surface-3); overflow: hidden; } .rgt-progress i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--rgt-accent), var(--rgt-cyan)); transition: width .6s var(--rgt-ease); } .rgt-shop-card-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: auto; padding-top: 16px; } /* FIX v3.32.0: the form now holds two buttons (Add to cart + Buy now), so it spans the full width and lays its own pair out side by side underneath the Details link, instead of being squeezed into one grid column. */ .rgt-shop-card-actions form { margin: 0; grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .rgt-shop-card-actions .rgt-btn { width: 100%; } .rgt-shop-card-actions > .rgt-btn:only-child { grid-column: 1 / -1; } /* Status chips */ .rgt-status { display: inline-flex; align-items: center; padding: 5px 10px; border-radius: 999px; background: var(--rgt-surface-3); color: var(--rgt-text-2); font-size: 11px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; white-space: nowrap; } .rgt-status-lg { font-size: 12px; padding: 7px 14px; } .rgt-status-live, .rgt-status-verified, .rgt-status-settled, .rgt-status-approved, .rgt-status-paid, .rgt-status-completed, .rgt-status-payment_verified, .rgt-status-delivered { background: var(--rgt-green-bg); color: #0A6B4B; } .rgt-status-limited, .rgt-status-pending, .rgt-status-upcoming, .rgt-status-submitted, .rgt-status-processing, .rgt-status-awaiting_payment, .rgt-status-payment_submitted, .rgt-status-not_submitted, .rgt-status-new { background: var(--rgt-amber-bg); color: #96540A; } .rgt-status-sold_out, .rgt-status-cancelled, .rgt-status-rejected, .rgt-status-expired { background: var(--rgt-red-bg); color: #A32224; } .rgt-status-trading, .rgt-status-procurement, .rgt-status-warehouse, .rgt-status-market_sale, .rgt-status-sale_processing, .rgt-status-settlement, .rgt-status-settlement_processing, .rgt-status-contacted { background: #EAF2FE; color: #1D4E9B; } /* Pagination */ .rgt-pagination { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px; margin-top: 28px; } .rgt-page-link { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; height: 40px; padding: 0 12px; border-radius: var(--rgt-r-sm); background: var(--rgt-surface); border: 1px solid var(--rgt-border); color: var(--rgt-text-2); font-size: 13.5px; font-weight: 600; transition: background .16s var(--rgt-ease), color .16s var(--rgt-ease); } .rgt-page-link:hover { background: var(--rgt-surface-3); } .rgt-page-link.is-current { background: var(--rgt-primary); border-color: var(--rgt-primary); color: #fff; } .rgt-page-gap { color: var(--rgt-muted); padding: 0 4px; } /* ------------------------------------------------------------------------- Single product ------------------------------------------------------------------------- */ .rgt-ecom-product-detail { display: grid; grid-template-columns: minmax(280px, .95fr) minmax(320px, 1.05fr); gap: 32px; padding: 26px; margin-bottom: 22px; background: var(--rgt-surface); border: 1px solid var(--rgt-border); border-radius: var(--rgt-r-xl); box-shadow: var(--rgt-sh-2); } /* FIX v2.0.1: the detail image is now a 1:1 square with fully rounded corners. The square is enforced on the frame (aspect-ratio) and the corner radius is set on the image itself as well as the frame, so the crop reads as rounded even if a theme resets overflow. */ .rgt-ecom-product-media { display: grid; place-items: center; aspect-ratio: 1 / 1; border-radius: var(--rgt-r-lg); background: var(--rgt-surface-3); overflow: hidden; } .rgt-ecom-product-media img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--rgt-r-lg); } .rgt-ecom-product-media .rgt-placeholder { border-radius: var(--rgt-r-lg); } .rgt-ecom-product-info { min-width: 0; } .rgt-ecom-product-info h2 { margin: 6px 0 10px; font-size: clamp(24px, 2.8vw, 32px); line-height: 1.2; } .rgt-ecom-main-price { margin: 16px 0 10px; font-size: 30px; font-weight: 700; color: var(--rgt-primary); } .rgt-ecom-main-price small { margin-left: 6px; font-size: 13px; font-weight: 500; color: var(--rgt-muted); } .rgt-ecom-desc { margin: 10px 0 16px; color: var(--rgt-text-2); line-height: 1.7; } .rgt-ecom-stock { display: inline-flex; padding: 7px 13px; margin-bottom: 18px; border-radius: 999px; background: var(--rgt-green-bg); color: #0A6B4B; font-size: 12.5px; font-weight: 600; } .rgt-ecom-stock b { margin-right: 4px; } .rgt-ecom-benefit-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-bottom: 20px; } .rgt-ecom-benefit-grid > div { padding: 13px 14px; border-radius: var(--rgt-r-sm); background: var(--rgt-surface-2); border: 1px solid var(--rgt-border); } .rgt-ecom-benefit-grid span { display: block; font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--rgt-muted); } .rgt-ecom-benefit-grid strong { display: block; margin-top: 4px; font-size: 15px; color: var(--rgt-primary); } /* FIX v2.0.0: single shared buy form (one quantity, two action buttons). */ .rgt-ecom-buy { display: flex; flex-direction: column; gap: 14px; padding-top: 18px; border-top: 1px solid var(--rgt-border); } .rgt-ecom-buy > label { font-weight: 600; font-size: 14px; } .rgt-ecom-buy-actions { display: flex; flex-wrap: wrap; gap: 12px; } .rgt-ecom-buy-actions .rgt-btn { flex: 1; min-width: 160px; } .rgt-single-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; } .rgt-single-stats > div { padding: 14px; border-radius: var(--rgt-r-sm); background: var(--rgt-surface-2); border: 1px solid var(--rgt-border); } .rgt-single-stats span { display: block; font-size: 11px; font-weight: 600; color: var(--rgt-muted); } .rgt-single-stats strong { display: block; margin-top: 4px; font-size: 17px; color: var(--rgt-primary); } .rgt-single-stats .rgt-highlight { background: #EAF2FE; border-color: color-mix(in srgb, var(--rgt-accent) 20%, transparent); } .rgt-timeline-template { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; } .rgt-timeline-template li { position: relative; text-align: center; } .rgt-timeline-template li::after { content: ""; position: absolute; top: 17px; left: calc(50% + 22px); right: calc(-50% + 22px); height: 2px; background: var(--rgt-border); } .rgt-timeline-template li:last-child::after { display: none; } .rgt-timeline-template i { position: relative; z-index: 1; display: grid; place-items: center; width: 36px; height: 36px; margin: 0 auto; border-radius: 50%; background: var(--rgt-primary); color: #fff; font-style: normal; font-weight: 700; font-size: 14px; } .rgt-timeline-template span { display: block; margin-top: 8px; font-size: 11.5px; font-weight: 600; color: var(--rgt-text-2); } /* ------------------------------------------------------------------------- Trade cards ------------------------------------------------------------------------- */ .rgt-trade-list { display: grid; gap: 14px; } .rgt-trade-card { padding: 18px; border: 1px solid var(--rgt-border); border-radius: var(--rgt-r-lg); background: var(--rgt-surface); transition: border-color .18s var(--rgt-ease), box-shadow .18s var(--rgt-ease); } .rgt-trade-card:hover { border-color: var(--rgt-border-strong); box-shadow: var(--rgt-sh-1); } .rgt-trade-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; flex-wrap: wrap; } .rgt-ref { display: block; font-size: 10.5px; font-weight: 700; letter-spacing: .08em; color: var(--rgt-accent); } .rgt-trade-top h3 { margin-top: 3px; font-size: 16px; } .rgt-trade-metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px; margin: 16px 0 0; } .rgt-trade-metrics > div { padding: 11px 12px; border-radius: var(--rgt-r-sm); background: var(--rgt-surface-2); } .rgt-trade-metrics span { display: block; font-size: 10.5px; font-weight: 600; color: var(--rgt-muted); } .rgt-trade-metrics strong { display: block; margin-top: 3px; font-size: 14.5px; color: var(--rgt-primary); } .rgt-timeline-toggle { margin-top: 14px; } .rgt-timeline-toggle summary { cursor: pointer; font-size: 12.5px; font-weight: 600; color: var(--rgt-accent); list-style: none; padding: 6px 0; } .rgt-timeline-toggle summary::-webkit-details-marker { display: none; } .rgt-timeline-toggle summary::before { content: "▸ "; display: inline-block; transition: transform .18s var(--rgt-ease); } .rgt-timeline-toggle[open] summary::before { content: "▾ "; } .rgt-event-line { display: grid; padding-top: 8px; } .rgt-event-line > div { position: relative; display: grid; grid-template-columns: 16px minmax(0, 1fr); gap: 10px; padding-bottom: 14px; } .rgt-event-line > div::before { content: ""; position: absolute; left: 5px; top: 14px; bottom: 0; width: 2px; background: var(--rgt-border); } .rgt-event-line > div:last-child { padding-bottom: 0; } .rgt-event-line > div:last-child::before { display: none; } .rgt-event-line i { width: 12px; height: 12px; margin-top: 3px; border-radius: 50%; background: var(--rgt-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--rgt-accent) 15%, transparent); z-index: 1; } .rgt-event-line b { display: block; font-size: 13px; color: var(--rgt-text); } .rgt-event-line small { display: block; margin-top: 2px; font-size: 11.5px; color: var(--rgt-muted); line-height: 1.5; } /* ------------------------------------------------------------------------- Generic list rows (wallet, notifications, history) ------------------------------------------------------------------------- */ .rgt-list { display: grid; gap: 10px; } .rgt-list-row { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 14px 16px; border: 1px solid var(--rgt-border); border-radius: var(--rgt-r); background: var(--rgt-surface); transition: border-color .16s var(--rgt-ease); } .rgt-list-row:hover { border-color: var(--rgt-border-strong); } .rgt-list-icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: var(--rgt-r-sm); background: var(--rgt-surface-3); color: var(--rgt-text-2); font-weight: 700; font-size: 15px; } .rgt-list-icon.in { background: var(--rgt-green-bg); color: var(--rgt-green); } .rgt-list-icon.out { background: var(--rgt-red-bg); color: var(--rgt-red); } .rgt-list-icon.tone-success { background: var(--rgt-green-bg); color: var(--rgt-green); } .rgt-list-icon.tone-warning { background: var(--rgt-amber-bg); color: var(--rgt-amber); } .rgt-list-icon.tone-info { background: #EAF2FE; color: var(--rgt-accent); } .rgt-list-body { min-width: 0; } .rgt-list-body b { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font-size: 13.5px; color: var(--rgt-text); } .rgt-list-body small { display: block; margin-top: 3px; font-size: 12px; color: var(--rgt-muted); line-height: 1.55; } .rgt-list-body time { display: block; margin-top: 4px; font-size: 11px; color: var(--rgt-muted); } .rgt-list-row > strong { font-size: 14.5px; white-space: nowrap; } /* ------------------------------------------------------------------------- Cart & checkout ------------------------------------------------------------------------- */ .rgt-cart-layout, .rgt-checkout-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 330px); gap: 20px; align-items: start; } .rgt-checkout-layout > * { min-width: 0; } .rgt-cart-layout .rgt-panel + .rgt-panel, .rgt-checkout-layout .rgt-panel + .rgt-panel { margin-top: 0; } .rgt-cart-main { padding: 0; overflow: hidden; } .rgt-cart-main form { display: block; } .rgt-cart-head, /* FIX v3.36.0: these fixed columns needed ~726px, but on the Checkout page the row sits in a column narrowed by the 330px summary sidebar — roughly 686px on a 1100px screen. The grid overflowed its container, which is what pushed the text together and clipped the panel heading. Narrower columns and a smaller gap bring the row back inside its space, and min-width:0 lets each cell actually shrink instead of forcing the overflow. */ .rgt-cart-item { display: grid; grid-template-columns: 64px minmax(120px, 1fr) 92px 184px 104px 44px; gap: 10px; align-items: center; } .rgt-cart-item > * { min-width: 0; } /* FIX v3.56.0: v3.55.0 added −10 / +10 buttons, so the cart stepper became about 210px wide. The old 148px quantity column clipped the + / +10 controls on desktop and let them collide with the subtotal. Give the full five-control stepper a real desktop column and prevent its children from being flex-shrunk. */ .rgt-cart-qty { display: flex; justify-content: center; } .rgt-cart-qty .rgt-stepper { margin-top: 0; max-width: none; flex: 0 0 auto; } .rgt-cart-qty .rgt-stepper button, .rgt-cart-qty .rgt-stepper input { flex: 0 0 auto; } .rgt-cart-qty .rgt-stepper input { width: 56px; } .rgt-cart-head { padding: 14px 18px; background: var(--rgt-surface-2); border-bottom: 1px solid var(--rgt-border); font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--rgt-muted); } .rgt-cart-head span:first-child { grid-column: 1 / 3; } .rgt-cart-item { padding: 16px 18px; border-bottom: 1px solid var(--rgt-border); } .rgt-cart-thumb { display: grid; place-items: center; width: 64px; height: 64px; border-radius: var(--rgt-r-sm); background: var(--rgt-surface-3); color: var(--rgt-primary); font-weight: 700; overflow: hidden; text-transform: uppercase; } .rgt-cart-thumb img { width: 100%; height: 100%; object-fit: cover; } .rgt-cart-product { min-width: 0; } .rgt-cart-product small { display: block; font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--rgt-accent); } .rgt-cart-product b { display: block; margin: 3px 0; font-size: 14px; } .rgt-cart-product b a { color: var(--rgt-primary); } .rgt-cart-product em { display: block; font-style: normal; font-size: 11.5px; color: var(--rgt-text-2); } .rgt-cart-product em.is-warn { color: var(--rgt-amber); font-weight: 600; } .rgt-cart-price { font-size: 14px; color: var(--rgt-text-2); } .rgt-cart-qty .rgt-stepper { margin-top: 0; } .rgt-cart-subtotal { font-size: 15px; color: var(--rgt-primary); } .rgt-cart-remove { display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 8px; background: transparent; color: var(--rgt-muted); font-size: 20px; line-height: 1; cursor: pointer; transition: background .14s var(--rgt-ease), color .14s var(--rgt-ease); } .rgt-cart-remove:hover { background: var(--rgt-red-bg); color: var(--rgt-red); } .rgt-cart-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 18px; } .rgt-cart-actions .rgt-field-hint { margin: 0; } /* FIX v3.56.0: with the desktop sidebar + 330px payment summary visible, the order panel becomes narrow on ordinary 1366/1440px PCs. The five-control quantity stepper needs about 210px by itself, so keeping all six order columns on one row until 1100px was not responsive. Use the compact order-row layout up to 1500px; wider desktops keep the full horizontal row. */ @media (max-width: 1500px) { /* FIX v3.56.0: qty and subtotal shared one row here — qty spanning the first two columns, subtotal squeezed into the third, which is only 32px (sized for the small × remove button). subtotal's box is far wider than that, and with justify-self:end anchoring its RIGHT edge to that narrow column's right edge, it grew LEFTWARD over the qty column — hiding the stepper's "+" behind the subtotal text. This is what the screenshots showed, and it triggers on any screen ≤1100px, a plain desktop browser window included if it isn't maximized — not only on a phone. Subtotal now gets its own full-width row, the same pattern already used correctly at the ≤480px tier below. */ .rgt-checkout-layout .rgt-cart-item { grid-template-columns: 64px minmax(0, 1fr) 44px; grid-template-areas: "thumb product remove" "price price price" "qty qty qty" "subtotal subtotal subtotal"; row-gap: 10px; } .rgt-checkout-layout .rgt-cart-thumb { grid-area: thumb; } .rgt-checkout-layout .rgt-cart-product { grid-area: product; } .rgt-checkout-layout .rgt-cart-price { grid-area: price; align-self: center; } .rgt-checkout-layout .rgt-cart-qty { grid-area: qty; justify-self: center; } .rgt-checkout-layout .rgt-cart-subtotal { grid-area: subtotal; display: flex; align-items: center; gap: 8px; } .rgt-checkout-layout .rgt-cart-subtotal::before { content: attr(data-label) ":"; font-size: 12px; font-weight: 400; color: var(--rgt-text-2); } .rgt-checkout-layout .rgt-cart-remove { grid-area: remove; } } .rgt-cart-summary, .rgt-checkout-summary { position: sticky; top: 24px; } .rgt-cart-summary h3, .rgt-checkout-summary h3 { margin-bottom: 16px; font-size: 17px; } .rgt-cart-summary > div, .rgt-checkout-summary > div { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--rgt-border); font-size: 13.5px; color: var(--rgt-text-2); } .rgt-cart-summary > div strong, .rgt-checkout-summary > div strong { color: var(--rgt-primary); font-size: 15px; } .rgt-cart-grand { border-bottom: 0 !important; padding-bottom: 16px !important; } .rgt-cart-grand strong { font-size: 22px !important; } .rgt-cart-summary > small, .rgt-checkout-summary > small { display: block; margin-top: 12px; font-size: 11.5px; color: var(--rgt-muted); line-height: 1.55; } .rgt-checkout-summary form { margin-top: 8px; } .rgt-checkout-row { display: grid; grid-template-columns: 62px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 13px 0; border-bottom: 1px solid var(--rgt-border); } .rgt-checkout-row:last-child { border-bottom: 0; } .rgt-checkout-row .rgt-cart-thumb { width: 62px; height: 62px; } .rgt-checkout-row b { display: block; font-size: 14px; color: var(--rgt-primary); } .rgt-checkout-row small { display: block; margin-top: 3px; font-size: 12px; color: var(--rgt-muted); } .rgt-checkout-row > strong { font-size: 15px; color: var(--rgt-primary); } /* ------------------------------------------------------------------------- Payment account cards ------------------------------------------------------------------------- */ .rgt-payment-guide { position: relative; overflow: hidden; padding: 22px; margin-bottom: 20px; border-radius: var(--rgt-r-lg); background: var(--rgt-surface); border: 1px solid var(--rgt-border); box-shadow: var(--rgt-sh-1); } .rgt-payment-guide::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--rgt-accent), var(--rgt-cyan)); } .rgt-payment-guide-head h3 { font-size: 19px; margin-bottom: 4px; } .rgt-payment-guide-head p { margin-bottom: 18px; font-size: 13px; color: var(--rgt-muted); font-family: var(--rgt-font-bn); } .rgt-payment-account-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 12px; } .rgt-payment-account { display: flex; align-items: flex-start; gap: 12px; padding: 15px; border-radius: var(--rgt-r); background: var(--rgt-surface-2); border: 1px solid var(--rgt-border); } .rgt-payment-account-icon { flex: 0 0 40px; width: 40px; height: 40px; display: grid; place-items: center; border-radius: var(--rgt-r-sm); background: #EAF2FE; color: var(--rgt-accent); font-size: 17px; font-weight: 800; } .rgt-payment-account-body { flex: 1; min-width: 0; } .rgt-payment-account-body strong { display: block; margin-bottom: 4px; font-size: 14px; color: var(--rgt-primary); } .rgt-payment-account-body span { display: block; font-size: 12px; color: var(--rgt-text-2); line-height: 1.6; overflow-wrap: anywhere; } .rgt-copy-btn { flex: 0 0 auto; align-self: center; padding: 6px 11px; border: 1px solid var(--rgt-border-strong); border-radius: 8px; background: var(--rgt-surface); color: var(--rgt-text-2); font-size: 11.5px; font-weight: 600; cursor: pointer; transition: all .14s var(--rgt-ease); } .rgt-copy-btn:hover { background: var(--rgt-surface-3); } .rgt-copy-btn.is-copied { background: var(--rgt-green-bg); border-color: var(--rgt-green); color: var(--rgt-green); } .rgt-pay-bkash .rgt-payment-account-icon { background: #FDECF3; color: #D42B6B; } .rgt-pay-nagad .rgt-payment-account-icon { background: #FEF0E6; color: #E4671A; } .rgt-pay-rocket .rgt-payment-account-icon { background: #F3EFFE; color: #6D42B5; } .rgt-payment-extra { margin-top: 14px; padding: 13px 15px; border-radius: var(--rgt-r-sm); background: var(--rgt-surface-3); font-size: 12.5px; color: var(--rgt-text-2); line-height: 1.65; } .rgt-payment-qr { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; padding: 16px; margin-bottom: 16px; border-radius: var(--rgt-r-sm); background: var(--rgt-surface-3); border: 1px solid var(--rgt-border); } .rgt-payment-qr img { width: 140px; height: 140px; object-fit: contain; background: #fff; border-radius: 10px; border: 1px solid var(--rgt-border-strong); padding: 6px; flex: 0 0 auto; } .rgt-payment-qr-body { flex: 1; min-width: 180px; } .rgt-payment-qr-body strong { display: block; margin-bottom: 4px; font-size: 14px; color: var(--rgt-primary); } .rgt-payment-qr-body span { display: block; font-size: 12.5px; color: var(--rgt-text-2); line-height: 1.6; font-family: var(--rgt-font-bn); margin-bottom: 10px; } .rgt-payment-qr-actions { display: flex; gap: 8px; flex-wrap: wrap; } .rgt-qr-preview { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 4px; } .rgt-qr-preview img { width: 120px; height: 120px; object-fit: contain; background: #fff; border-radius: 8px; border: 1px solid var(--rgt-border-strong); padding: 6px; } .rgt-payment-form { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--rgt-border); } /* ------------------------------------------------------------------------- Profile header ------------------------------------------------------------------------- */ .rgt-profile-cover { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; padding: 26px; border-radius: var(--rgt-r-xl); background: linear-gradient(135deg, var(--rgt-primary), color-mix(in srgb, var(--rgt-primary) 55%, var(--rgt-accent))); color: #fff; box-shadow: var(--rgt-sh-2); } .rgt-profile-id { flex: 1; min-width: 200px; } .rgt-profile-cover-actions { flex: 0 0 auto; align-self: flex-start; margin-left: auto; } .rgt-eyebrow-light { color: rgba(255, 255, 255, .75); } .rgt-profile-avatar { flex: 0 0 auto; width: 80px; height: 80px; display: grid; place-items: center; border-radius: 50%; background: rgba(255, 255, 255, .16); border: 2px solid rgba(255, 255, 255, .3); font-size: 30px; font-weight: 700; } .rgt-profile-cover h2 { color: #fff; margin-bottom: 5px; font-size: 24px; } .rgt-profile-cover p { margin-bottom: 12px; color: rgba(255, 255, 255, .8); font-size: 14px; } .rgt-profile-mini { display: flex; flex-wrap: wrap; gap: 8px; } .rgt-profile-mini span { padding: 6px 12px; border-radius: 999px; background: rgba(255, 255, 255, .14); font-size: 12.5px; } .rgt-profile-panel .rgt-stat-grid + .rgt-section-label, .rgt-profile-panel .rgt-section-label { margin-top: 26px; margin-bottom: 14px; } .rgt-section-label { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--rgt-muted); padding-top: 18px; border-top: 1px solid var(--rgt-border); } .rgt-profile-panel > .rgt-section-label:first-of-type { border-top: none; padding-top: 0; } .rgt-back-link { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--rgt-text-2); margin-bottom: 14px; } .rgt-back-link svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; } .rgt-back-link:hover { color: var(--rgt-accent); } .rgt-shell .rgt-btn-light { background: rgba(255, 255, 255, .16); color: #fff; border: 1px solid rgba(255, 255, 255, .35); } .rgt-shell .rgt-btn-light:hover { background: rgba(255, 255, 255, .28); } /* ------------------------------------------------------------------------- Data tables ------------------------------------------------------------------------- */ .rgt-table { width: 100%; overflow-x: auto; border: 1px solid var(--rgt-border); border-radius: var(--rgt-r); -webkit-overflow-scrolling: touch; } .rgt-table table { width: 100%; min-width: 840px; border-collapse: collapse; background: var(--rgt-surface); } .rgt-table th, .rgt-table td { padding: 13px 15px; text-align: left; vertical-align: middle; border-bottom: 1px solid var(--rgt-border); } .rgt-table thead th { position: sticky; top: 0; z-index: 1; background: var(--rgt-surface-2); font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--rgt-muted); white-space: nowrap; } .rgt-table tbody tr:last-child td { border-bottom: 0; } .rgt-table tbody tr { transition: background .14s var(--rgt-ease); } .rgt-table tbody tr:hover { background: var(--rgt-surface-2); } .rgt-table tbody tr.is-filtered-out { display: none; } .rgt-table td { font-size: 13.5px; color: var(--rgt-text-2); } .rgt-table td b { display: block; color: var(--rgt-primary); font-weight: 600; } .rgt-table td small { display: block; margin-top: 3px; font-size: 11.5px; color: var(--rgt-muted); overflow-wrap: anywhere; } .rgt-table td .rgt-empty { border: 0; background: transparent; } .rgt-person { display: flex; align-items: center; gap: 10px; } .rgt-person-link { color: inherit; text-decoration: none; } .rgt-person-link:hover b { color: var(--rgt-accent); text-decoration: none; } .rgt-mini-thumb { display: grid; place-items: center; width: 52px; height: 52px; border-radius: var(--rgt-r-sm); background: var(--rgt-surface-3); color: var(--rgt-primary); font-weight: 700; text-transform: uppercase; font-size: 15px; } .rgt-table img { width: 52px; height: 52px; border-radius: var(--rgt-r-sm); object-fit: cover; } .rgt-account-state { display: inline-flex; padding: 4px 10px; border-radius: 999px; font-size: 11px; font-weight: 700; } .rgt-account-state.is-active { background: var(--rgt-green-bg); color: #0A6B4B; } .rgt-account-state.is-banned { background: var(--rgt-red-bg); color: #A32224; } /* ------------------------------------------------------------------------- Account menu shortcode (for external headers) ------------------------------------------------------------------------- */ .rgt-account-menu { display: inline-flex; align-items: center; gap: 10px; font-family: var(--rgt-font-bn); } .rgt-account-menu a { text-decoration: none; } .rgt-account-signin { display: inline-flex; align-items: center; min-height: 42px; padding: 9px 15px; border-radius: var(--rgt-r-sm); color: var(--rgt-primary); font-weight: 600; transition: background .16s var(--rgt-ease); } .rgt-account-signin:hover { background: var(--rgt-surface-3); } .rgt-account-register { display: inline-flex; align-items: center; min-height: 42px; padding: 9px 17px; border-radius: var(--rgt-r-sm); background: var(--rgt-primary); color: #fff; font-weight: 600; box-shadow: var(--rgt-sh-1); transition: transform .16s var(--rgt-ease), box-shadow .16s var(--rgt-ease); } .rgt-account-register:hover { transform: translateY(-1px); box-shadow: var(--rgt-sh-2); } .rgt-account-profile { display: flex; align-items: center; gap: 10px; padding: 6px 14px 6px 6px !important; margin: 0 !important; border-radius: 999px; background: var(--rgt-surface-2); border: 1px solid var(--rgt-border); color: var(--rgt-primary); box-sizing: border-box !important; transition: background .16s var(--rgt-ease); } .rgt-account-profile:hover { background: var(--rgt-surface-3); } .rgt-account-avatar { display: grid; place-items: center; width: 36px !important; height: 36px !important; min-width: 36px !important; max-width: 36px !important; min-height: 36px !important; max-height: 36px !important; padding: 0 !important; box-sizing: border-box !important; border-radius: 50% !important; background: linear-gradient(135deg, var(--rgt-accent), var(--rgt-violet)); color: #fff; font-weight: 700; flex: 0 0 36px; } .rgt-account-copy { display: flex; flex-direction: column; line-height: 1.2; } .rgt-account-copy b { font-size: 13.5px; } .rgt-account-copy small { font-size: 11px; color: var(--rgt-muted); } .rgt-account-menu.compact .rgt-account-copy { display: none; } .rgt-account-menu.compact .rgt-account-profile { padding: 4px !important; } /* NEW v2.6.0: notification bell / cart icons in the account menu. */ /* FIX v3.8.0: the bell/cart triggers are