/* ========================================================== UI2 — Radical Design Refresh (Admin + Landing) - Applies only when - Safe overrides (scoped) ========================================================== */ /* Base background upgrades */ body.ui2{ background: radial-gradient(1200px 800px at 18% -10%, rgba(14,165,233,0.26), transparent 55%), radial-gradient(900px 700px at 90% 6%, rgba(34,197,94,0.16), transparent 56%), radial-gradient(900px 700px at 55% 100%, rgba(245,158,11,0.10), transparent 52%), linear-gradient(180deg, var(--bg) 0%, var(--bg2) 100%); } :root[data-theme="light"] body.ui2{ background: radial-gradient(1200px 800px at 18% -10%, rgba(2,132,199,0.14), transparent 55%), radial-gradient(900px 700px at 90% 6%, rgba(34,197,94,0.10), transparent 56%), linear-gradient(180deg, var(--bg) 0%, rgba(248,250,252,1) 100%); } /* Premium surfaces */ body.ui2 .card{ border-radius: 22px; padding: 16px; background: linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.05)); border: 1px solid rgba(255,255,255,0.12); box-shadow: 0 20px 48px rgba(0,0,0,0.26); } :root[data-theme="light"] body.ui2 .card{ background: linear-gradient(180deg, rgba(255,255,255,0.92), rgba(255,255,255,0.80)); border-color: rgba(15,23,42,0.10); box-shadow: 0 18px 44px rgba(15,23,42,0.10); } body.ui2 .btn{ border-radius: 16px; padding: 11px 14px; border-color: rgba(255,255,255,0.14); background: rgba(255,255,255,0.07); } body.ui2 .btn:hover{ background: rgba(255,255,255,0.12); } body.ui2 .btn.primary{ background: radial-gradient(120% 160% at 20% 10%, rgba(255,255,255,0.22), transparent 55%), linear-gradient(135deg, rgba(14,165,233,0.98), rgba(34,197,94,0.78)); border-color: rgba(255,255,255,0.20); } body.ui2 .btn.danger{ background: rgba(239,68,68,0.16); border-color: rgba(239,68,68,0.32); } /* Badges */ body.ui2 .badge.hot{ background: rgba(245,158,11,0.18); border-color: rgba(245,158,11,0.35); } /* Tables */ body.ui2 .table{ border-radius: 18px; overflow: hidden; } body.ui2 .table thead th{ position: sticky; top: 0; z-index: 1; background: rgba(2,6,23,0.65); backdrop-filter: blur(10px); } :root[data-theme="light"] body.ui2 .table thead th{ background: rgba(255,255,255,0.88); } body.ui2 .table tbody tr:hover{ background: rgba(14,165,233,0.06); } /* Subtle reveal animation (landing) */ body.ui2 [data-reveal]{ opacity: 0; transform: translateY(10px); transition: opacity .55s ease, transform .55s ease; } body.ui2 [data-reveal].is-in{ opacity: 1; transform: translateY(0); } @media (prefers-reduced-motion: reduce){ body.ui2 [data-reveal]{ opacity:1; transform:none; transition:none; } } /* ---------------------------------------------- ADMIN UI2 ---------------------------------------------- */ body.ui2-admin .panel-topbar{ background: rgba(2,6,23,0.40); border-bottom-color: rgba(255,255,255,0.10); } :root[data-theme="light"] body.ui2-admin .panel-topbar{ background: rgba(255,255,255,0.78); border-bottom-color: rgba(15,23,42,0.08); } body.ui2-admin .panel-sidebar{ background: radial-gradient(120% 120% at 10% 10%, rgba(14,165,233,0.16), transparent 60%), rgba(2,6,23,0.52); border-inline-end-color: rgba(255,255,255,0.10); } :root[data-theme="light"] body.ui2-admin .panel-sidebar{ background: radial-gradient(120% 120% at 10% 10%, rgba(2,132,199,0.10), transparent 60%), rgba(255,255,255,0.78); border-inline-end-color: rgba(15,23,42,0.08); } body.ui2-admin .panel-sidebar__brand{ border-radius: 20px; } body.ui2-admin .panel-nav__item{ border-radius: 18px; } body.ui2-admin .panel-group__head{ border-radius: 16px; } /* KPI grid */ .ui2-kpis{display:grid; grid-template-columns: repeat(4, 1fr); gap:12px; margin-top:12px} @media (max-width: 1100px){ .ui2-kpis{grid-template-columns: repeat(2,1fr);} } @media (max-width: 560px){ .ui2-kpis{grid-template-columns: 1fr;} } .ui2-kpi{padding:14px; position:relative; overflow:hidden} .ui2-kpi::after{content:""; position:absolute; inset:-50% -30%; background: radial-gradient(circle at 20% 20%, rgba(14,165,233,0.18), transparent 55%), radial-gradient(circle at 70% 40%, rgba(34,197,94,0.12), transparent 55%); transform: rotate(8deg); opacity:.75; pointer-events:none} .ui2-kpi > *{position:relative; z-index:1} .ui2-kpi .t{font-size:12px; color: var(--muted); font-weight:800} .ui2-kpi .v{font-size:22px; font-weight:950; letter-spacing:.2px; margin-top:6px} .ui2-kpi .s{font-size:12px; color: var(--muted); margin-top:8px; line-height:1.6} /* Compact toolbar */ .ui2-toolbar{display:flex; gap:10px; flex-wrap:wrap; justify-content:space-between; align-items:center; margin-top:12px} .ui2-toolbar .search{flex:1; min-width:260px} .ui2-toolbar input[type="search"]{border-radius: 16px} /* Inline chart */ .ui2-spark{width:100%; height:84px; border-radius: 18px; border:1px solid var(--border); background: rgba(255,255,255,0.04); overflow:hidden} :root[data-theme="light"] .ui2-spark{background: rgba(255,255,255,0.78)} /* ---------------------------------------------- LANDING UI2 ---------------------------------------------- */ body.ui2-landing .topbar{ background: rgba(2,6,23,0.42); border-bottom-color: rgba(255,255,255,0.10); } :root[data-theme="light"] body.ui2-landing .topbar{ background: rgba(255,255,255,0.78); border-bottom-color: rgba(15,23,42,0.08); } /* Pricing calc */ .ui2-pricing-calc{display:grid; grid-template-columns: 1.2fr .8fr; gap:12px; align-items:stretch} @media (max-width: 980px){ .ui2-pricing-calc{grid-template-columns: 1fr;} } .ui2-tabs{display:flex; gap:8px; flex-wrap:wrap} .ui2-tab{display:inline-flex; align-items:center; gap:8px; padding:9px 12px; border-radius: 999px; border:1px solid var(--border); background: rgba(255,255,255,0.06); cursor:pointer; user-select:none; font-weight:900; font-size:12px} .ui2-tab[aria-selected="true"]{background: rgba(14,165,233,0.12); border-color: rgba(14,165,233,0.32)} .ui2-breakdown .kv{padding:8px 0} .ui2-breakdown .kv + .kv{border-top:1px dashed rgba(255,255,255,0.12)} :root[data-theme="light"] .ui2-breakdown .kv + .kv{border-top-color: rgba(15,23,42,0.12)} /* ---------------------------------------------- PANEL UI2 (Company / Merchant Panel) ---------------------------------------------- */ body.ui2-panel .panel-topbar{ background: rgba(2,6,23,0.40); border-bottom-color: rgba(255,255,255,0.10); } :root[data-theme="light"] body.ui2-panel .panel-topbar{ background: rgba(255,255,255,0.78); border-bottom-color: rgba(15,23,42,0.08); } body.ui2-panel .panel-sidebar{ background: radial-gradient(120% 120% at 10% 10%, rgba(14,165,233,0.16), transparent 60%), rgba(2,6,23,0.52); border-inline-end-color: rgba(255,255,255,0.10); } :root[data-theme="light"] body.ui2-panel .panel-sidebar{ background: radial-gradient(120% 120% at 10% 10%, rgba(2,132,199,0.10), transparent 60%), rgba(255,255,255,0.78); border-inline-end-color: rgba(15,23,42,0.08); } body.ui2-panel .panel-sidebar__brand{ border-radius: 22px; } body.ui2-panel .panel-nav__item{border-radius: 18px;} /* Nav groups (accordion) */ body.ui2-panel .panel-group{ margin-top: 10px; border: 1px solid rgba(255,255,255,0.10); border-radius: 18px; overflow: hidden; background: rgba(255,255,255,0.04); } :root[data-theme="light"] body.ui2-panel .panel-group{ border-color: rgba(15,23,42,0.10); background: rgba(255,255,255,0.70); } body.ui2-panel .panel-group__head{ width:100%; display:flex; align-items:center; justify-content:space-between; gap:10px; padding:10px 12px; border:none; background: rgba(255,255,255,0.04); color: inherit; cursor: pointer; } body.ui2-panel .panel-group__title{display:flex;align-items:center;gap:10px;min-width:0} body.ui2-panel .panel-group__title b{font-weight:950} body.ui2-panel .panel-group__chev{opacity:.8; transition: transform .15s ease} body.ui2-panel .panel-group__items{display:none; padding:8px} body.ui2-panel .panel-group[data-open="1"] .panel-group__items{display:block} body.ui2-panel .panel-group[data-open="1"] .panel-group__chev{transform: rotate(180deg)} /* Dropdown (Quick actions) */ body.ui2 .yr-dd{position:relative} body.ui2 .yr-dd-menu{ display:none; position:absolute; top: calc(100% + 10px); inset-inline-end: 0; min-width: 240px; padding: 10px; border-radius: 18px; border: 1px solid rgba(255,255,255,0.14); background: rgba(2,6,23,0.72); backdrop-filter: blur(12px); box-shadow: 0 24px 54px rgba(0,0,0,0.32); z-index: 90; } :root[data-theme="light"] body.ui2 .yr-dd-menu{ background: rgba(255,255,255,0.88); border-color: rgba(15,23,42,0.10); box-shadow: 0 22px 52px rgba(15,23,42,0.12); } body.ui2 .yr-dd.open .yr-dd-menu{display:block} body.ui2 .yr-dd-item{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:14px;border:1px solid transparent} body.ui2 .yr-dd-item:hover{background: rgba(255,255,255,0.06)} /* Admin groups styling (same as panel) */ body.ui2-admin .panel-group{ margin-top: 10px; border: 1px solid rgba(255,255,255,0.10); border-radius: 18px; overflow: hidden; background: rgba(255,255,255,0.04); } :root[data-theme="light"] body.ui2-admin .panel-group{ border-color: rgba(15,23,42,0.10); background: rgba(255,255,255,0.70); } body.ui2-admin .panel-group__head{ width:100%; display:flex; align-items:center; justify-content:space-between; gap:10px; padding:10px 12px; border:none; background: rgba(255,255,255,0.04); color: inherit; cursor: pointer; } body.ui2-admin .panel-group__title{display:flex;align-items:center;gap:10px;min-width:0} body.ui2-admin .panel-group__title b{font-weight:950} body.ui2-admin .panel-group__chev{opacity:.8; transition: transform .15s ease} body.ui2-admin .panel-group__items{display:none; padding:8px} body.ui2-admin .panel-group[data-open="1"] .panel-group__items{display:block} body.ui2-admin .panel-group[data-open="1"] .panel-group__chev{transform: rotate(180deg)}