/* ==============================================================
AUREX — portal/mobile-final.css
FINAL AUTHORITATIVE MOBILE PRESENTATION LAYER.
Loaded AFTER styles.css, so it wins on source order at equal
specificity. That is the whole point: no !important arms race.
Scope: <= 560px only. Desktop stays owned by styles.css.
Owns: auth entry, mobile header, drawer, bottom nav, shared
mobile typography/spacing/controls.
Business logic, hooks and handlers are untouched.
============================================================== */
@media (max-width: 560px) {
/* ==========================================================
0. TOKENS + RESET FOR THE MOBILE SURFACE
========================================================== */
.portal-body {
--ax-pad: 20px;
--ax-gap: 22px;
--ax-radius: 14px;
--ax-field-h: 52px;
--ax-btn-h: 52px;
--ax-ink: #f3f7fb;
--ax-ink-2: rgba(196, 214, 234, 0.92);
--ax-ink-3: rgba(150, 176, 208, 0.78);
--ax-line: rgba(150, 184, 218, 0.16);
--ax-surface: rgba(255, 255, 255, 0.035);
--ax-bg: #050b14;
--ax-accent: #4aa8d8;
background-color: var(--ax-bg);
}
/* ==========================================================
1. AUTH ENTRY — native phone composition
The page is the container. No stage, no nested cards.
========================================================== */
.portal-body .portal-cinematic-entry {
display: block;
min-height: 100svh;
padding: calc(28px + env(safe-area-inset-top, 0px)) var(--ax-pad)
calc(28px + env(safe-area-inset-bottom, 0px));
background: var(--ax-bg);
}
/* Neutralise the decorative desktop stage on phones */
.portal-body .portal-cinematic-entry::before,
.portal-body .portal-cinematic-entry::after { content: none; }
.portal-body .portal-cinematic-entry .pce-shell {
width: 100%;
max-width: 420px;
margin: 0 auto;
}
/* The card stops being a card: it is simply the page */
.portal-body .portal-cinematic-entry .pce-access {
width: 100%;
border: 0;
border-radius: 0;
background: none;
box-shadow: none;
backdrop-filter: none;
-webkit-backdrop-filter: none;
overflow: visible;
}
.portal-body .portal-cinematic-entry .pce-access::before { content: none; }
/* An earlier styles.css generation still applies padding:20px 18px here,
which held the sign-in fields 36px narrower than registration. Matched
specificity + later source order settles it without !important. */
.portal-body .portal-cinematic-entry .pce-access .pce-access-inner {
display: block;
padding: 0;
width: 100%;
}
.portal-body .portal-cinematic-entry .pce-access .pce-access-inner > * {
width: 100%;
max-width: none;
}
/* ---- Brand: wordmark carries the identity ---- */
.portal-body .portal-cinematic-entry .pce-brand {
display: flex;
align-items: center;
gap: 10px;
margin: 0 0 30px;
}
.portal-body .portal-cinematic-entry .pce-brand-mark {
width: 26px;
height: 26px;
}
.portal-body .portal-cinematic-entry .pce-brand-word {
font-size: 1.15rem;
font-weight: 700;
letter-spacing: 0.16em;
color: var(--ax-ink);
}
/* ---- Headline block ---- */
.portal-body .portal-cinematic-entry .pce-heading {
margin: 0 0 26px;
}
.portal-body .portal-cinematic-entry .pce-heading .eyebrow {
margin: 0 0 10px;
font-size: 0.8rem;
font-weight: 600;
letter-spacing: 0.02em;
text-transform: none;
color: var(--ax-accent);
}
.portal-body .portal-cinematic-entry .pce-heading h1 {
margin: 0 0 10px;
font-size: 2rem;
line-height: 1.22;
letter-spacing: -0.022em;
font-weight: 660;
color: #ffffff;
text-wrap: balance;
}
.portal-body .portal-cinematic-entry .pce-sub {
margin: 0;
font-size: 0.95rem;
line-height: 1.55;
color: var(--ax-ink-2);
}
/* ---- Fields ---- */
.portal-body .portal-cinematic-entry .pce-form {
display: block;
width: 100%;
margin: 0 0 20px;
}
.portal-body .portal-cinematic-entry .pce-form label {
display: block;
width: 100%;
margin: 0 0 16px;
font-size: 0.86rem;
font-weight: 560;
letter-spacing: 0;
text-transform: none;
color: var(--ax-ink-2);
}
.portal-body .portal-cinematic-entry .pce-form input {
-webkit-appearance: none;
appearance: none;
display: block;
width: 100%;
margin-top: 8px;
min-height: var(--ax-field-h);
padding: 0 15px;
border-radius: var(--ax-radius);
border: 1px solid var(--ax-line);
background: var(--ax-surface);
color: var(--ax-ink);
font-size: 16px; /* iOS: prevents focus zoom */
line-height: 1.2;
}
.portal-body .portal-cinematic-entry .pce-form input::placeholder {
color: rgba(148, 174, 202, 0.5);
}
.portal-body .portal-cinematic-entry .pce-form input:focus {
outline: none;
border-color: rgba(74, 168, 216, 0.7);
box-shadow: 0 0 0 3px rgba(74, 168, 216, 0.16);
}
/* Autofill must not paint a white box over the dark field */
.portal-body .portal-cinematic-entry .pce-form input:-webkit-autofill,
.portal-body .portal-cinematic-entry .pce-form input:-webkit-autofill:focus {
-webkit-text-fill-color: var(--ax-ink);
-webkit-box-shadow: 0 0 0 1000px #0d1724 inset;
caret-color: var(--ax-ink);
}
.portal-body .portal-cinematic-entry .portal-password-field {
position: relative;
display: block;
width: 100%;
}
.portal-body .portal-cinematic-entry .portal-password-field input {
padding-right: 78px;
}
.portal-body .portal-cinematic-entry .portal-password-toggle {
position: absolute;
right: 6px;
bottom: 6px;
min-height: 40px;
padding: 0 12px;
border: 0;
border-radius: 10px;
background: none;
color: var(--ax-accent);
font-size: 0.85rem;
font-weight: 600;
}
/* ---- Primary action ---- */
.portal-body .portal-cinematic-entry .portal-login-submit {
-webkit-appearance: none;
appearance: none;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
min-height: var(--ax-btn-h);
border-radius: var(--ax-radius);
border: 1px solid rgba(94, 182, 226, 0.5);
background: #2f8fc4;
color: #ffffff;
font-size: 1rem;
font-weight: 650;
letter-spacing: 0.01em;
transition: background-color 140ms ease, transform 120ms ease;
}
.portal-body .portal-cinematic-entry .portal-login-submit:active {
background: #2a80b1;
transform: scale(0.99);
}
.portal-body .portal-cinematic-entry .portal-login-submit:focus-visible {
outline: 2px solid rgba(103, 232, 249, 0.75);
outline-offset: 3px;
}
.portal-body .portal-cinematic-entry .portal-login-submit[aria-busy="true"] {
opacity: 0.75;
pointer-events: none;
}
/* ---- Secondary actions ---- */
.portal-body .portal-cinematic-entry .pce-login-links {
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
gap: 6px 10px;
margin: 18px 0 0;
padding: 0;
border: 0;
font-size: 0.9rem;
}
.portal-body .portal-cinematic-entry .pce-login-links a {
min-height: 44px;
display: inline-flex;
align-items: center;
color: var(--ax-accent);
font-weight: 580;
text-decoration: none;
}
/* ---- Status ---- */
.portal-body .portal-cinematic-entry .portal-entry-status {
margin: 16px 0 0;
padding: 11px 13px;
border-radius: 12px;
border: 1px solid var(--ax-line);
background: var(--ax-surface);
font-size: 0.86rem;
line-height: 1.45;
color: var(--ax-ink-2);
}
.portal-body .portal-cinematic-entry .portal-entry-status.is-error {
border-color: rgba(255, 118, 132, 0.36);
background: rgba(255, 118, 132, 0.09);
color: #ffc6cd;
}
/* ---- Security / help: small and secondary ---- */
.portal-body .portal-cinematic-entry .pce-trust {
display: flex;
align-items: center;
gap: 8px;
margin: 26px 0 0;
padding-top: 18px;
border-top: 1px solid var(--ax-line);
font-size: 0.79rem;
line-height: 1.45;
color: var(--ax-ink-3);
}
.portal-body .portal-cinematic-entry .pce-trust-dot {
flex: 0 0 auto;
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--ax-accent);
}
.portal-body .portal-cinematic-entry .pce-actions {
display: grid;
gap: 2px;
margin-top: 10px;
padding: 0;
border: 0;
}
.portal-body .portal-cinematic-entry .pce-actions a {
min-height: 40px;
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 5px;
font-size: 0.82rem;
color: var(--ax-ink-3);
text-decoration: none;
}
/* ==========================================================
2. MOBILE HEADER — one identity, calm
========================================================== */
.portal-body .portal-mobile-topbar {
display: grid;
grid-template-columns: 44px 1fr auto;
align-items: center;
gap: 10px;
min-height: 58px;
padding: calc(6px + env(safe-area-inset-top, 0px)) 12px 6px;
border-bottom: 1px solid var(--ax-line);
background: rgba(5, 11, 20, 0.94);
backdrop-filter: saturate(140%) blur(18px);
-webkit-backdrop-filter: saturate(140%) blur(18px);
}
.portal-body .portal-mobile-menu,
.portal-body .portal-mobile-bell {
width: 44px;
height: 44px;
display: grid;
place-items: center;
border: 0;
border-radius: 12px;
background: none;
color: var(--ax-ink-2);
}
.portal-body .portal-mobile-menu svg,
.portal-body .portal-mobile-bell svg { width: 21px; height: 21px; }
.portal-body .portal-mobile-brand {
display: inline-flex;
align-items: center;
gap: 9px;
min-width: 0;
text-decoration: none;
}
.portal-body .portal-mobile-mark { width: 24px; height: 24px; }
.portal-body .portal-mobile-wordmark {
display: block;
font-size: 1.06rem;
font-weight: 700;
letter-spacing: 0.15em;
color: var(--ax-ink);
line-height: 1;
}
/* One product identity: the micro-label goes */
.portal-body .portal-mobile-wordmark small { display: none; }
.portal-body .portal-mobile-actions {
display: inline-flex;
align-items: center;
gap: 4px;
}
.portal-body .portal-mobile-avatar {
width: 32px;
height: 32px;
display: grid;
place-items: center;
border: 0;
border-radius: 50%;
background: rgba(255, 255, 255, 0.07);
color: var(--ax-ink);
font-size: 0.74rem;
font-weight: 650;
}
.portal-body .portal-mobile-bell-count[hidden] { display: none; }
/* ==========================================================
3. DRAWER — plain rows, no tiles
========================================================== */
.portal-body .portal-mobile-drawer {
width: 86vw;
max-width: 340px;
background: #060d17;
border-right: 1px solid var(--ax-line);
transition: transform 240ms cubic-bezier(0.22, 0.7, 0.2, 1);
}
.portal-body .portal-mobile-drawer-nav {
padding: 12px 10px 18px;
display: grid;
gap: 20px;
}
.portal-body #portalMobileDrawerNav .axr-group-label {
padding: 0 12px 8px;
font-size: 0.7rem;
font-weight: 650;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--ax-ink-3);
}
.portal-body #portalMobileDrawerNav .axr-link {
display: grid;
grid-template-columns: 24px minmax(0, 1fr);
align-items: center;
gap: 14px;
min-height: 50px;
padding: 0 12px;
border-radius: 11px;
position: relative;
}
.portal-body #portalMobileDrawerNav .axr-glyph {
width: 24px;
height: 24px;
display: grid;
place-items: center;
border: 0;
border-radius: 0;
background: none;
}
.portal-body #portalMobileDrawerNav .axr-glyph svg {
width: 20px;
height: 20px;
color: var(--ax-ink-3);
}
.portal-body #portalMobileDrawerNav .axr-label {
font-size: 0.94rem;
font-weight: 520;
color: var(--ax-ink-2);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.portal-body #portalMobileDrawerNav .axr-link.is-active {
background: rgba(255, 255, 255, 0.045);
}
.portal-body #portalMobileDrawerNav .axr-link.is-active::before {
content: "";
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 3px;
height: 24px;
border-radius: 0 3px 3px 0;
background: var(--ax-accent);
}
.portal-body #portalMobileDrawerNav .axr-link.is-active .axr-glyph svg { color: var(--ax-ink); }
.portal-body #portalMobileDrawerNav .axr-link.is-active .axr-label {
color: #ffffff;
font-weight: 640;
}
.portal-body .portal-mobile-drawer-foot {
display: grid;
grid-template-columns: 34px minmax(0, 1fr) auto;
align-items: center;
gap: 11px;
padding: 14px 14px calc(14px + env(safe-area-inset-bottom, 0px));
border-top: 1px solid var(--ax-line);
}
.portal-body .portal-mobile-drawer-signout {
min-height: 40px;
padding: 0 12px;
border: 0;
border-radius: 10px;
background: none;
color: var(--ax-ink-3);
font-size: 0.83rem;
font-weight: 560;
white-space: nowrap;
}
/* ==========================================================
4. BOTTOM NAV — restrained selected state
========================================================== */
.portal-body:not(.portal-secure-gated) .portal-bottom-nav {
left: 0;
right: 0;
bottom: 0;
width: auto;
border-radius: 0;
padding: 6px 4px calc(6px + env(safe-area-inset-bottom, 0px));
border-top: 1px solid var(--ax-line);
background: rgba(5, 11, 20, 0.96);
backdrop-filter: saturate(140%) blur(18px);
-webkit-backdrop-filter: saturate(140%) blur(18px);
box-shadow: none;
}
.portal-body .portal-bottom-nav .portal-tab {
min-height: 50px;
gap: 5px;
border-radius: 10px;
background: none;
color: var(--ax-ink-3);
}
.portal-body .portal-bottom-nav .portal-tab svg { width: 22px; height: 22px; }
.portal-body .portal-bottom-nav .portal-tab span {
font-size: 0.66rem;
font-weight: 560;
letter-spacing: 0.01em;
text-transform: none;
}
.portal-body .portal-bottom-nav .portal-tab.is-active {
background: none;
color: var(--ax-ink);
}
.portal-body .portal-bottom-nav .portal-tab.is-active svg { color: var(--ax-accent); }
.portal-body .portal-bottom-nav .portal-tab.is-active span { font-weight: 640; }
/* ==========================================================
5. SHARED MOBILE CONTROLS
========================================================== */
.portal-body .portal-main .primary-button,
.portal-body .portal-main .secondary-button {
min-height: 48px;
border-radius: 12px;
font-size: 0.95rem;
font-weight: 620;
}
.portal-body .portal-main input,
.portal-body .portal-main select,
.portal-body .portal-main textarea { font-size: 16px; }
/* ==========================================================
6. MOTION — restrained, and only after layout is right
========================================================== */
.portal-body .portal-cinematic-entry .pce-brand,
.portal-body .portal-cinematic-entry .pce-heading,
.portal-body .portal-cinematic-entry .pce-form,
.portal-body .portal-cinematic-entry .pce-login-links {
animation: axmEnter 220ms ease-out both;
}
.portal-body .portal-cinematic-entry .pce-heading { animation-delay: 40ms; }
.portal-body .portal-cinematic-entry .pce-form { animation-delay: 80ms; }
.portal-body .portal-cinematic-entry .pce-login-links { animation-delay: 120ms; }
}
@keyframes axmEnter {
from { opacity: 0; transform: translateY(6px); }
to { opacity: 1; transform: none; }
}
@media (max-width: 560px) and (prefers-reduced-motion: reduce) {
.portal-body .portal-cinematic-entry .pce-brand,
.portal-body .portal-cinematic-entry .pce-heading,
.portal-body .portal-cinematic-entry .pce-form,
.portal-body .portal-cinematic-entry .pce-login-links { animation: none; }
.portal-body .portal-mobile-drawer { transition: none; }
}
/* ==============================================================
REWARDS — MOBILE FIRST SCREEN
Scope: <= 560px. Owned entirely by this file.
Desktop nests the balance, four secondary tiles, the formula
strip and the six-stage lifecycle inside .cbk-group-money, so
ordering alone cannot separate them. display:contents flattens
those two wrappers on phones only, making every block a direct
child of .cashback-experience so the first screen can be composed
deliberately. No element is duplicated, no value re-rendered, and
the claim control stays the existing element with its existing
handler and eligibility state.
============================================================== */
@media (max-width: 560px) {
/* ---- Flatten desktop nesting ---- */
.cashback-experience > .cbk-group-money,
.cashback-experience .cashback-hero.cashback-signature { display: contents; }
.cashback-experience.pfx {
display: grid;
gap: 22px;
padding: 0 20px 28px;
}
/* ---- First screen: balance, claim, progress. Nothing else. ---- */
.cashback-experience > .pfx-hero { order: 1; }
.cashback-experience .cbk-hero-available { order: 2; }
.cashback-experience > .cbk-wallet-summary { order: 3; }
.cashback-experience > .cbk-group-progression{ order: 4; }
/* everything below the fold */
.cashback-experience > .cbk-wallet-next { order: 5; }
.cashback-experience .cashback-flow-rail { order: 6; }
.cashback-experience > .cbk-bridges { order: 7; }
.cashback-experience > .cbk-group-payout { order: 8; }
.cashback-experience > .cbk-month-select { order: 9; }
/* Page title only; the desktop hero body is context, not headline */
.cashback-experience > .pfx-hero {
padding: 0; border: 0; background: none; box-shadow: none;
}
.cashback-experience > .pfx-hero .pfx-hero-grid,
.cashback-experience > .pfx-hero .pfx-sub,
.cashback-experience > .pfx-hero .pfx-signals,
.cashback-experience > .pfx-hero .pfx-hero-label { display: none; }
.cashback-experience > .pfx-hero .pfx-eyebrow {
margin: 0; font-size: 0.78rem; font-weight: 650;
letter-spacing: 0.14em; text-transform: uppercase;
color: rgba(150, 176, 208, 0.78);
}
/* ---- The balance dominates ---- */
.cashback-experience .cbk-hero-available {
display: block; margin: 0; padding: 22px 20px 20px;
border-radius: 16px;
border: 1px solid rgba(94, 214, 190, 0.22);
background: linear-gradient(180deg, rgba(16, 34, 40, 0.72), rgba(9, 18, 26, 0.72));
}
.cashback-experience .cbk-hero-available > span {
display: block; margin: 0 0 6px;
font-size: 0.9rem; font-weight: 540; letter-spacing: 0;
text-transform: none; color: rgba(196, 214, 234, 0.9);
}
.cashback-experience .cbk-hero-available > strong {
display: block; margin: 0;
font-size: 2.9rem; line-height: 1.04; font-weight: 680;
letter-spacing: -0.03em; color: #ffffff;
font-variant-numeric: tabular-nums;
}
/* Existing claim control -- same element, same handler */
.cashback-experience .cbk-hero-available .primary-button {
display: flex; align-items: center; justify-content: center;
width: 100%; margin-top: 18px; min-height: 52px;
border-radius: 13px; font-size: 1rem; font-weight: 650;
border: 1px solid rgba(94, 182, 226, 0.5);
background: #2f8fc4; color: #ffffff;
transition: background-color 140ms ease, transform 120ms ease;
}
.cashback-experience .cbk-hero-available .primary-button:active {
background: #2a80b1; transform: scale(0.99);
}
.cashback-experience .cbk-hero-available .primary-button[disabled] {
opacity: 0.5; background: #24506b; transform: none;
}
/* ---- One supporting line: lots + tier ---- */
.cashback-experience > .cbk-wallet-summary {
display: flex; align-items: baseline; gap: 8px;
padding: 0 2px; border: 0; background: none;
}
.cashback-experience .cbk-wallet-summary > div { display: contents; }
.cashback-experience .cbk-wallet-summary strong {
font-size: 0.95rem; font-weight: 640; color: #eaf2fa;
font-variant-numeric: tabular-nums;
}
.cashback-experience .cbk-wallet-summary span {
font-size: 0.95rem; font-weight: 500; color: rgba(150, 176, 208, 0.8);
}
/* ---- Secondary tiles leave the first screen ---- */
.cashback-experience .cbk-hero-activity,
.cashback-experience .cbk-hero-rank,
.cashback-experience .cbk-hero-earned,
.cashback-experience .cbk-hero-next,
.cashback-experience .cbk-hero-next-progress,
.cashback-experience .cashback-formula-strip,
.cashback-experience .cbk-ecosystem-bridge,
.cashback-experience .portal-journey-strip { display: none; }
/* ---- Progression: one horizontal component ---- */
.cashback-experience > .cbk-group-progression { display: block; }
.cashback-experience .cbk-group-progression > .cbk-group-eyebrow {
display: block; margin: 0 0 12px; padding: 0;
font-size: 0.78rem; font-weight: 650; letter-spacing: 0.14em;
text-transform: uppercase; color: rgba(150, 176, 208, 0.78);
}
.cashback-experience .cbk-progress-grid,
.cashback-experience .portal-tier-progress {
display: block; grid-template-columns: none; grid-template-areas: none;
padding: 0; border: 0; background: none; box-shadow: none;
}
.cashback-experience .portal-tier-progress > * { grid-area: auto; }
/* Duplicated tier identity and lifetime figures live above already */
.cashback-experience .cbk-rank-identity,
.cashback-experience .cbk-rank-lifetime { display: none; }
.cashback-experience .cbk-rank-rail {
display: block; grid-template-areas: none; grid-template-columns: none;
width: 100%; margin: 0 0 10px; padding: 0;
}
.cashback-experience .cbk-rank-rail::before,
.cashback-experience .cbk-rank-rail::after { content: none; }
.cashback-experience .cbk-rank-rail-anchors {
display: flex; align-items: baseline; justify-content: space-between;
gap: 12px; margin: 0 0 9px;
}
.cashback-experience .cbk-rail-anchor {
font-size: 0.82rem; font-weight: 640; letter-spacing: 0.04em;
text-transform: none;
}
.cashback-experience .cbk-rail-anchor.cbk-rail-current { color: #eaf2fa; }
.cashback-experience .cbk-rail-anchor.cbk-rail-next { color: #7fd8b4; }
.cashback-experience .cbk-rank-rail .portal-progress {
display: block; width: 100%; height: 8px; border-radius: 99px;
overflow: hidden; border: 0;
background: rgba(140, 178, 214, 0.16);
}
/* The authoritative inline width stays untouched; only transform animates */
.cashback-experience .cbk-rank-rail .portal-progress > span {
display: block; height: 100%; border-radius: 99px;
background: linear-gradient(90deg, #4aa8d8, #6fd8b4);
transform-origin: left center;
animation: axrRail 650ms cubic-bezier(0.22, 1, 0.36, 1) 220ms both;
}
.cashback-experience .cbk-rank-remaining {
margin: 9px 0 0; font-size: 0.88rem; line-height: 1.45;
color: rgba(186, 205, 226, 0.86);
}
.cashback-experience .cbk-rank-remaining strong {
color: #eaf2fa; font-variant-numeric: tabular-nums;
}
/* Next-unlock condenses; benefits stay a disclosure */
.cashback-experience .cbk-rank-next-unlock {
margin-top: 14px; padding: 0; border: 0; background: none;
}
.cashback-experience .cbk-rank-benefits-disclosure > summary {
list-style: none; cursor: pointer; min-height: 44px;
display: inline-flex; align-items: center;
font-size: 0.9rem; font-weight: 600; color: #4aa8d8;
}
.cashback-experience .cbk-rank-benefits-disclosure > summary::-webkit-details-marker { display: none; }
.cashback-experience .cbk-rank-benefits-disclosure:not([open]) > .cbk-rank-benefits { display: none; }
/* ---- Payout history keeps its internal scroll ---- */
.cashback-experience .cashback-history-card .portal-table-scroll,
.cashback-experience .cbk-history-scroll {
max-height: 340px; overflow-y: auto; -webkit-overflow-scrolling: touch;
}
/* ---- Entrance ---- */
.cashback-experience > .pfx-hero,
.cashback-experience .cbk-hero-available,
.cashback-experience > .cbk-wallet-summary,
.cashback-experience > .cbk-group-progression {
animation: axrEnter 380ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
.cashback-experience .cbk-hero-available { animation-delay: 60ms; }
.cashback-experience > .cbk-wallet-summary { animation-delay: 130ms; }
.cashback-experience > .cbk-group-progression { animation-delay: 190ms; }
}
@keyframes axrEnter { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes axrRail { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@media (max-width: 560px) and (prefers-reduced-motion: reduce) {
.cashback-experience > .pfx-hero,
.cashback-experience .cbk-hero-available,
.cashback-experience > .cbk-wallet-summary,
.cashback-experience > .cbk-group-progression,
.cashback-experience .cbk-rank-rail .portal-progress > span { animation: none; }
}
/* ==============================================================
BOTTOM NAV — icon family, typography, restrained active state.
Icons are Lucide geometry (24x24, stroke 2, round caps) inlined
in portal/index.html. This block owns their size and the nav's
type + selected treatment.
============================================================== */
@media (max-width: 560px) {
.portal-body .portal-bottom-nav .portal-tab {
position: relative;
min-height: 52px;
gap: 5px;
border-radius: 0;
background: none;
color: rgba(150, 176, 208, 0.72);
transition: color 170ms ease;
}
.portal-body .portal-bottom-nav .portal-tab svg {
width: 21px;
height: 21px;
stroke-width: 1.9;
transition: transform 170ms cubic-bezier(0.22, 1, 0.36, 1);
}
/* Section 12: readable labels, no 8-9px text, no extreme tracking */
.portal-body .portal-bottom-nav .portal-tab span {
font-size: 0.72rem;
font-weight: 540;
letter-spacing: 0.005em;
text-transform: none;
line-height: 1;
}
/* Section 13: a 3px indicator, not a glowing capsule */
.portal-body .portal-bottom-nav .portal-tab.is-active {
background: none;
color: #f3f8fc;
}
.portal-body .portal-bottom-nav .portal-tab.is-active::before {
content: "";
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
width: 22px;
height: 3px;
border-radius: 0 0 3px 3px;
background: #55b6e0;
transition: width 180ms cubic-bezier(0.22, 1, 0.36, 1);
}
.portal-body .portal-bottom-nav .portal-tab.is-active svg {
color: #7fd0ee;
transform: translateY(-1px);
}
.portal-body .portal-bottom-nav .portal-tab.is-active span {
font-weight: 640;
color: #ffffff;
}
.portal-body .portal-bottom-nav .portal-tab:active svg { transform: scale(0.96); }
.portal-body .portal-bottom-nav .portal-tab:focus-visible {
outline: 2px solid rgba(110, 214, 245, 0.8);
outline-offset: -3px;
}
}
@media (max-width: 560px) and (prefers-reduced-motion: reduce) {
.portal-body .portal-bottom-nav .portal-tab,
.portal-body .portal-bottom-nav .portal-tab svg,
.portal-body .portal-bottom-nav .portal-tab.is-active::before { transition: none; }
}
/* ==============================================================
REWARDS MOBILE — REFINEMENT
Two fixes carried from the previous attempt:
1. display:contents flattens the BOX tree, not the DOM tree, so
`>` selectors against .cashback-experience never matched the
flattened children. Descendant selectors are used instead.
2. styles.css carries 8 competing `order` declarations at the
same specificity, so .portal-body is prefixed throughout to
win deliberately rather than by luck.
Presentation only. No value recomputed, no handler moved.
============================================================== */
@media (max-width: 560px) {
/* ---- Flatten desktop nesting ---- */
.portal-body .cashback-experience .cbk-group-money,
.portal-body .cashback-experience .cashback-hero.cashback-signature {
display: contents;
}
/* §9 — page rhythm */
.portal-body .cashback-experience.pfx {
display: grid;
gap: 22px;
padding: 0 16px 28px;
}
/* ---- Reading order (descendant selectors: see note above) ---- */
.portal-body .cashback-experience .pfx-hero { order: 1; }
.portal-body .cashback-experience .cbk-wallet-summary { order: 2; }
.portal-body .cashback-experience .cbk-hero-available { order: 3; }
.portal-body .cashback-experience .cbk-group-progression { order: 4; }
.portal-body .cashback-experience .cashback-flow-rail { order: 5; }
.portal-body .cashback-experience .cbk-group-payout { order: 6; }
.portal-body .cashback-experience .cbk-wallet-next { order: 7; }
.portal-body .cashback-experience .cbk-bridges { order: 8; }
.portal-body .cashback-experience .cbk-month-select { order: 9; }
/* ==========================================================
§1 — HEADER: one section header, not two floating parts
========================================================== */
.portal-body .cashback-experience .pfx-hero {
display: block;
padding: 0;
border: 0;
background: none;
box-shadow: none;
}
.portal-body .cashback-experience .pfx-hero .pfx-hero-grid,
.portal-body .cashback-experience .pfx-hero .pfx-signals,
.portal-body .cashback-experience .pfx-hero .pfx-hero-label { display: none; }
.portal-body .cashback-experience .pfx-hero .pfx-eyebrow {
margin: 0 0 4px;
font-size: 1.4rem;
font-weight: 680;
letter-spacing: -0.02em;
text-transform: none;
color: #f4f8fc;
}
.portal-body .cashback-experience .pfx-hero .pfx-sub {
display: block;
margin: 0;
font-size: 0.9rem;
line-height: 1.5;
color: rgba(168, 192, 216, 0.84);
}
/* Period selector sits with the header, compact */
.portal-body .cashback-experience .cbk-month-select {
order: 1;
display: flex;
align-items: center;
justify-content: flex-end;
margin-top: -46px; /* aligns onto the header row */
padding: 0;
border: 0;
background: none;
}
.portal-body .cashback-experience .cbk-month-select select {
min-height: 36px;
padding: 0 10px;
border-radius: 9px;
border: 1px solid rgba(150, 184, 218, 0.2);
background: rgba(255, 255, 255, 0.035);
color: #dce8f4;
font-size: 0.82rem;
}
/* ==========================================================
§2 — SUMMARY: a real 2-column stat block
========================================================== */
.portal-body .cashback-experience .cbk-wallet-summary {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0;
padding: 16px;
border: 1px solid rgba(150, 184, 218, 0.15);
border-radius: 13px;
background: rgba(255, 255, 255, 0.022);
}
.portal-body .cashback-experience .cbk-wallet-summary > div {
display: grid;
gap: 4px;
min-width: 0;
}
.portal-body .cashback-experience .cbk-wallet-summary > div + div {
padding-left: 16px;
border-left: 1px solid rgba(150, 184, 218, 0.13);
}
.portal-body .cashback-experience .cbk-wallet-summary strong {
font-size: 1.6rem;
font-weight: 670;
letter-spacing: -0.02em;
line-height: 1.1;
color: #ffffff;
font-variant-numeric: tabular-nums;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.portal-body .cashback-experience .cbk-wallet-summary span {
font-size: 0.72rem;
font-weight: 600;
letter-spacing: 0.1em;
text-transform: uppercase;
color: rgba(150, 176, 208, 0.78);
}
/* ==========================================================
§3/§4 — PROGRESSION as one instrument
========================================================== */
.portal-body .cashback-experience .cbk-group-progression {
display: block;
padding: 16px;
border: 1px solid rgba(150, 184, 218, 0.15);
border-radius: 13px;
background: rgba(255, 255, 255, 0.022);
}
.portal-body .cashback-experience .cbk-group-progression .cbk-group-eyebrow {
display: block;
margin: 0 0 14px;
font-size: 0.72rem;
font-weight: 650;
letter-spacing: 0.12em;
text-transform: uppercase;
color: rgba(150, 176, 208, 0.78);
}
/* §8 — flatten every inner panel */
.portal-body .cashback-experience .cbk-progress-grid,
.portal-body .cashback-experience .portal-tier-progress {
display: block;
grid-template-columns: none;
grid-template-areas: none;
padding: 0;
border: 0;
border-radius: 0;
background: none;
box-shadow: none;
}
.portal-body .cashback-experience .portal-tier-progress > * { grid-area: auto; }
/* Values already shown in the summary above */
.portal-body .cashback-experience .cbk-rank-identity,
.portal-body .cashback-experience .cbk-rank-lifetime { display: none; }
.portal-body .cashback-experience .cbk-rank-rail {
display: block;
grid-template-areas: none;
grid-template-columns: none;
width: 100%;
margin: 0 0 12px;
padding: 0;
}
.portal-body .cashback-experience .cbk-rank-rail::before,
.portal-body .cashback-experience .cbk-rank-rail::after { content: none; }
.portal-body .cashback-experience .cbk-rank-rail-anchors {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 12px;
margin: 0 0 10px;
}
.portal-body .cashback-experience .cbk-rail-anchor {
font-size: 0.76rem;
font-weight: 660;
letter-spacing: 0.1em;
text-transform: uppercase;
}
.portal-body .cashback-experience .cbk-rail-anchor.cbk-rail-current { color: #e8c98a; }
.portal-body .cashback-experience .cbk-rail-anchor.cbk-rail-next { color: #ffd9a0; }
.portal-body .cashback-experience .cbk-rank-rail .portal-progress {
position: relative;
display: block;
width: 100%;
height: 9px;
border: 0;
border-radius: 99px;
background: rgba(140, 178, 214, 0.15);
overflow: visible;
}
/* Gold target marker at the end of the track */
.portal-body .cashback-experience .cbk-rank-rail .portal-progress::after {
content: "";
position: absolute;
right: -2px;
top: 50%;
transform: translateY(-50%);
width: 13px;
height: 13px;
border-radius: 50%;
background: rgba(9, 16, 28, 0.95);
border: 2px solid rgba(231, 199, 106, 0.7);
}
/* Authoritative inline width is untouched; only transform animates */
.portal-body .cashback-experience .cbk-rank-rail .portal-progress > span {
position: relative;
display: block;
height: 100%;
border-radius: 99px;
background: linear-gradient(90deg, #b8894a, #e7c76a 70%, #ffd9a0);
transform-origin: left center;
animation: axr2Rail 720ms cubic-bezier(0.22, 1, 0.36, 1) 180ms both;
}
/* Current-state marker rides the end of the fill */
.portal-body .cashback-experience .cbk-rank-rail .portal-progress > span::after {
content: "";
position: absolute;
right: -6px;
top: 50%;
transform: translateY(-50%);
width: 13px;
height: 13px;
border-radius: 50%;
background: #ffd9a0;
box-shadow: 0 0 0 3px rgba(231, 199, 106, 0.2);
}
.portal-body .cashback-experience .cbk-rank-remaining {
margin: 0 0 14px;
font-size: 0.86rem;
line-height: 1.45;
color: rgba(178, 200, 224, 0.86);
}
.portal-body .cashback-experience .cbk-rank-remaining strong {
color: #ffd9a0;
font-variant-numeric: tabular-nums;
}
/* ==========================================================
§5 — NEXT UNLOCK
========================================================== */
.portal-body .cashback-experience .cbk-rank-next-unlock {
margin: 0;
padding: 14px 0 0;
border: 0;
border-top: 1px solid rgba(150, 184, 218, 0.13);
border-radius: 0;
background: none;
}
.portal-body .cashback-experience .cbk-rank-next-eyebrow {
display: block;
margin: 0 0 8px;
font-size: 0.72rem;
font-weight: 650;
letter-spacing: 0.12em;
text-transform: uppercase;
color: rgba(150, 176, 208, 0.78);
}
.portal-body .cashback-experience .cbk-rank-next-head {
display: flex;
align-items: baseline;
gap: 10px;
flex-wrap: wrap;
margin: 0;
}
.portal-body .cashback-experience .cbk-rank-next-head strong {
font-size: 1.35rem;
font-weight: 680;
letter-spacing: -0.015em;
color: #ffd9a0;
}
.portal-body .cashback-experience .cbk-rank-next-head b {
font-size: 1rem;
font-weight: 620;
color: #eaf2fa;
font-variant-numeric: tabular-nums;
}
/* rate uplift becomes a small chip */
.portal-body .cashback-experience .cbk-rank-uplift {
display: inline-block;
margin: 10px 0 0;
padding: 4px 10px;
border-radius: 99px;
border: 1px solid rgba(231, 199, 106, 0.28);
background: rgba(231, 199, 106, 0.1);
font-size: 0.76rem;
font-weight: 600;
color: #e8c98a;
}
/* ==========================================================
§6 — BENEFITS COLLAPSED BY DEFAULT
========================================================== */
.portal-body .cashback-experience .cbk-rank-benefits-disclosure {
margin-top: 14px;
}
.portal-body .cashback-experience .cbk-rank-benefits-disclosure > summary {
list-style: none;
cursor: pointer;
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
min-height: 46px;
padding: 0 14px;
border: 1px solid rgba(150, 184, 218, 0.2);
border-radius: 11px;
background: rgba(255, 255, 255, 0.03);
font-size: 0.88rem;
font-weight: 600;
color: #dbe8f4;
}
.portal-body .cashback-experience .cbk-rank-benefits-disclosure > summary::-webkit-details-marker { display: none; }
.portal-body .cashback-experience .cbk-rank-benefits-disclosure > summary::after {
content: "";
width: 8px;
height: 8px;
flex: 0 0 auto;
border-right: 1.7px solid currentColor;
border-bottom: 1.7px solid currentColor;
transform: rotate(45deg) translate(-2px, -2px);
transition: transform 200ms ease;
}
.portal-body .cashback-experience .cbk-rank-benefits-disclosure[open] > summary::after {
transform: rotate(-135deg) translate(-3px, -3px);
}
.portal-body .cashback-experience .cbk-rank-benefits-disclosure:not([open]) > .cbk-rank-benefits {
display: none;
}
.portal-body .cashback-experience .cbk-rank-benefits {
margin: 12px 0 0;
padding: 0;
list-style: none;
}
.portal-body .cashback-experience .cbk-rank-benefits li {
display: flex;
align-items: flex-start;
gap: 9px;
margin-bottom: 9px;
font-size: 0.86rem;
line-height: 1.45;
color: rgba(186, 205, 226, 0.88);
}
.portal-body .cashback-experience .cbk-rank-benefits li::before {
content: "";
width: 14px;
height: 14px;
margin-top: 3px;
flex: 0 0 auto;
background-color: #7fd8b4;
-webkit-mask: url("data:image/svg+xml;utf8,") center / contain no-repeat;
mask: url("data:image/svg+xml;utf8,") center / contain no-repeat;
}
/* ==========================================================
§7 — EXPLORE ALL RANKS as a real secondary action
========================================================== */
.portal-body .cashback-experience .cbk-rank-explore {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
width: 100%;
margin: 12px 0 0;
min-height: 48px;
padding: 0 14px;
border: 1px solid rgba(231, 199, 106, 0.26);
border-radius: 11px;
background: rgba(255, 255, 255, 0.028);
color: #e8c98a;
font-size: 0.88rem;
font-weight: 620;
text-decoration: none;
transition: border-color 160ms ease, background-color 160ms ease;
}
.portal-body .cashback-experience .cbk-rank-explore::after {
content: "";
width: 15px;
height: 15px;
flex: 0 0 auto;
background-color: currentColor;
-webkit-mask: url("data:image/svg+xml;utf8,") center / contain no-repeat;
mask: url("data:image/svg+xml;utf8,") center / contain no-repeat;
transition: transform 140ms cubic-bezier(0.22, 1, 0.36, 1);
}
.portal-body .cashback-experience .cbk-rank-explore:active { transform: scale(0.99); }
.portal-body .cashback-experience .cbk-rank-explore:active::after { transform: translateX(3px); }
/* ==========================================================
Balance block + first-screen noise removal
========================================================== */
.portal-body .cashback-experience .cbk-hero-available {
display: block;
margin: 0;
padding: 20px 18px 18px;
border: 1px solid rgba(94, 214, 190, 0.2);
border-radius: 13px;
background: linear-gradient(180deg, rgba(16, 34, 40, 0.7), rgba(9, 18, 26, 0.7));
}
.portal-body .cashback-experience .cbk-hero-available > span {
display: block;
margin: 0 0 6px;
font-size: 0.88rem;
font-weight: 540;
letter-spacing: 0;
text-transform: none;
color: rgba(196, 214, 234, 0.9);
}
.portal-body .cashback-experience .cbk-hero-available > strong {
display: block;
font-size: 2.6rem;
line-height: 1.05;
font-weight: 680;
letter-spacing: -0.03em;
color: #ffffff;
font-variant-numeric: tabular-nums;
}
.portal-body .cashback-experience .cbk-hero-available .primary-button {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
margin-top: 16px;
min-height: 52px;
border-radius: 12px;
font-size: 1rem;
font-weight: 650;
}
/* Secondary tiles and deep reference content leave the first screen */
.portal-body .cashback-experience .cbk-hero-activity,
.portal-body .cashback-experience .cbk-hero-rank,
.portal-body .cashback-experience .cbk-hero-earned,
.portal-body .cashback-experience .cbk-hero-next,
.portal-body .cashback-experience .cbk-hero-next-progress,
.portal-body .cashback-experience .cashback-formula-strip,
.portal-body .cashback-experience .cbk-ecosystem-bridge,
.portal-body .cashback-experience .portal-journey-strip { display: none; }
}
@keyframes axr2Rail { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@media (max-width: 560px) and (prefers-reduced-motion: reduce) {
.portal-body .cashback-experience .cbk-rank-rail .portal-progress > span { animation: none; }
.portal-body .cashback-experience .cbk-rank-benefits-disclosure > summary::after,
.portal-body .cashback-experience .cbk-rank-explore { transition: none; }
}
/* ==============================================================
CASHBACK — CINEMATIC LAYER
Motion communicates state, never fabricates value. The balance
and every lot figure are revealed (opacity/transform only) —
nothing counts up, nothing interpolates toward an authoritative
number. The rail animates transform: scaleX against its real
inline width. One ambient element, no loops on financials.
============================================================== */
@media (max-width: 560px) {
/* ---- Scene depth behind the page ---- */
.portal-body .cashback-experience.pfx {
position: relative;
isolation: isolate;
}
.portal-body .cashback-experience.pfx::before {
content: "";
position: absolute;
inset: -8% -20% auto;
height: 420px;
z-index: -1;
pointer-events: none;
background:
radial-gradient(60% 50% at 22% 12%, rgba(94, 214, 190, 0.10), transparent 64%),
radial-gradient(55% 45% at 88% 4%, rgba(231, 199, 106, 0.07), transparent 60%);
-webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 92%);
mask-image: linear-gradient(180deg, #000 0%, transparent 92%);
}
/* ==========================================================
ENTRANCE — the page resolves top-down, once
========================================================== */
.portal-body .cashback-experience .pfx-hero,
.portal-body .cashback-experience .cbk-wallet-summary,
.portal-body .cashback-experience .cbk-hero-available,
.portal-body .cashback-experience .cbk-group-progression,
.portal-body .cashback-experience .cashback-flow-rail,
.portal-body .cashback-experience .cbk-group-payout {
animation: cbkRise 420ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
.portal-body .cashback-experience .pfx-hero { animation-delay: 40ms; }
.portal-body .cashback-experience .cbk-wallet-summary { animation-delay: 110ms; }
.portal-body .cashback-experience .cbk-hero-available { animation-delay: 180ms; }
.portal-body .cashback-experience .cbk-group-progression{ animation-delay: 260ms; }
.portal-body .cashback-experience .cashback-flow-rail { animation-delay: 330ms; }
.portal-body .cashback-experience .cbk-group-payout { animation-delay: 390ms; }
/* ---- Balance: a reveal, not a count-up ----
The figure is already correct in the DOM; it simply arrives. */
.portal-body .cashback-experience .cbk-hero-available > strong {
animation: cbkReveal 560ms cubic-bezier(0.16, 1, 0.3, 1) 260ms both;
}
.portal-body .cashback-experience .cbk-hero-available > span {
animation: cbkFade 400ms ease 220ms both;
}
.portal-body .cashback-experience .cbk-hero-available .primary-button {
animation: cbkRise 420ms cubic-bezier(0.22, 1, 0.36, 1) 400ms both;
}
/* A single sweep of light across the balance surface, once */
.portal-body .cashback-experience .cbk-hero-available {
position: relative;
overflow: hidden;
}
.portal-body .cashback-experience .cbk-hero-available::after {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background: linear-gradient(100deg,
transparent 30%,
rgba(140, 232, 210, 0.10) 46%,
rgba(140, 232, 210, 0.02) 56%,
transparent 70%);
background-size: 260% 100%;
animation: cbkSweep 1500ms cubic-bezier(0.4, 0, 0.2, 1) 380ms both;
}
/* ---- Stat values arrive after their surface ---- */
.portal-body .cashback-experience .cbk-wallet-summary strong {
animation: cbkReveal 460ms cubic-bezier(0.16, 1, 0.3, 1) 220ms both;
}
.portal-body .cashback-experience .cbk-wallet-summary > div + div strong {
animation-delay: 290ms;
}
/* ==========================================================
PROGRESSION — the instrument comes to life last
========================================================== */
.portal-body .cashback-experience .cbk-rank-rail-anchors {
animation: cbkFade 400ms ease 340ms both;
}
/* Track draws out, then the fill runs, then the marker settles */
.portal-body .cashback-experience .cbk-rank-rail .portal-progress {
transform-origin: left center;
animation: cbkTrack 420ms cubic-bezier(0.22, 1, 0.36, 1) 360ms both;
}
.portal-body .cashback-experience .cbk-rank-rail .portal-progress > span {
animation: axr2Rail 760ms cubic-bezier(0.22, 1, 0.36, 1) 620ms both;
}
.portal-body .cashback-experience .cbk-rank-rail .portal-progress > span::after {
animation: cbkMarker 420ms cubic-bezier(0.34, 1.2, 0.64, 1) 1180ms both;
}
.portal-body .cashback-experience .cbk-rank-rail .portal-progress::after {
animation: cbkFade 400ms ease 900ms both;
}
.portal-body .cashback-experience .cbk-rank-remaining,
.portal-body .cashback-experience .cbk-rank-next-unlock {
animation: cbkRise 420ms cubic-bezier(0.22, 1, 0.36, 1) 480ms both;
}
.portal-body .cashback-experience .cbk-rank-uplift {
animation: cbkChip 380ms cubic-bezier(0.34, 1.2, 0.64, 1) 700ms both;
}
/* ==========================================================
INTERACTION — considered, quiet
========================================================== */
.portal-body .cashback-experience .cbk-hero-available .primary-button {
transition: background-color 140ms ease, transform 110ms ease, box-shadow 140ms ease;
}
.portal-body .cashback-experience .cbk-hero-available .primary-button:active {
transform: scale(0.988);
}
.portal-body .cashback-experience .cbk-rank-benefits-disclosure > summary {
transition: border-color 180ms ease, background-color 180ms ease;
}
.portal-body .cashback-experience .cbk-rank-benefits-disclosure > summary:active {
transform: scale(0.992);
}
.portal-body .cashback-experience .cbk-rank-benefits-disclosure[open] > .cbk-rank-benefits {
animation: cbkDisclose 200ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
.portal-body .cashback-experience .cbk-rank-benefits li {
animation: cbkFade 240ms ease both;
}
.portal-body .cashback-experience .cbk-rank-benefits li:nth-child(1) { animation-delay: 40ms; }
.portal-body .cashback-experience .cbk-rank-benefits li:nth-child(2) { animation-delay: 80ms; }
.portal-body .cashback-experience .cbk-rank-benefits li:nth-child(3) { animation-delay: 120ms; }
.portal-body .cashback-experience .cbk-rank-benefits li:nth-child(4) { animation-delay: 160ms; }
.portal-body .cashback-experience .cbk-rank-explore:active { transform: scale(0.99); }
}
@keyframes cbkRise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes cbkFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes cbkReveal { from { opacity: 0; transform: translateY(8px) scale(0.985); } to { opacity: 1; transform: none; } }
@keyframes cbkTrack { from { opacity: 0; transform: scaleX(0.9); } to { opacity: 1; transform: none; } }
@keyframes cbkMarker { from { opacity: 0; transform: translateY(-50%) scale(0.4); } to { opacity: 1; transform: translateY(-50%) scale(1); } }
@keyframes cbkChip { from { opacity: 0; transform: translateY(4px) scale(0.94); } to { opacity: 1; transform: none; } }
@keyframes cbkSweep { from { background-position: 130% 0; } to { background-position: -30% 0; } }
@keyframes cbkDisclose { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
@media (max-width: 560px) and (prefers-reduced-motion: reduce) {
.portal-body .cashback-experience .pfx-hero,
.portal-body .cashback-experience .cbk-wallet-summary,
.portal-body .cashback-experience .cbk-wallet-summary strong,
.portal-body .cashback-experience .cbk-hero-available,
.portal-body .cashback-experience .cbk-hero-available > strong,
.portal-body .cashback-experience .cbk-hero-available > span,
.portal-body .cashback-experience .cbk-hero-available::after,
.portal-body .cashback-experience .cbk-hero-available .primary-button,
.portal-body .cashback-experience .cbk-group-progression,
.portal-body .cashback-experience .cashback-flow-rail,
.portal-body .cashback-experience .cbk-group-payout,
.portal-body .cashback-experience .cbk-rank-rail-anchors,
.portal-body .cashback-experience .cbk-rank-rail .portal-progress,
.portal-body .cashback-experience .cbk-rank-rail .portal-progress > span,
.portal-body .cashback-experience .cbk-rank-rail .portal-progress > span::after,
.portal-body .cashback-experience .cbk-rank-rail .portal-progress::after,
.portal-body .cashback-experience .cbk-rank-remaining,
.portal-body .cashback-experience .cbk-rank-next-unlock,
.portal-body .cashback-experience .cbk-rank-uplift,
.portal-body .cashback-experience .cbk-rank-benefits,
.portal-body .cashback-experience .cbk-rank-benefits li { animation: none; }
}
/* ==============================================================
STOP LEGACY LOOPING GLOW ON MOBILE.
Live audit found 3x portalLightSweep running on an infinite
5.8s loop over the Cashback cards (tier progress, request card,
history card) from an older styles.css generation, plus two
body-level ambient drifts. Cinematic motion here is one pass on
entrance; nothing on this page may loop forever.
============================================================== */
@media (max-width: 560px) {
.portal-body .cashback-experience .portal-chart-card::after,
.portal-body .cashback-experience .portal-tier-progress::after,
.portal-body .cashback-experience .cbk-request-card::after,
.portal-body .cashback-experience .cashback-history-card::after {
animation: none;
content: none;
}
/* One ambient element for the surface, not two competing drifts */
.portal-body.portal-product-v2::after { animation: none; }
}
/* ==============================================================
CASHBACK — HIGH UI PASS
Replaces flat bordered boxes with layered material, and gives the
financial figures a cinematic reveal.
On "cinematic numbers": the digits are NEVER interpolated. Each
figure is already correct in the DOM; it is masked and slides up
into view behind an overflow clip. At every frame the visible
characters are the authoritative ones — the number simply arrives.
No count-up, no rolling digits, no fabricated intermediate value.
============================================================== */
@media (max-width: 560px) {
/* ==========================================================
MATERIAL — surfaces with depth instead of outlines
========================================================== */
.portal-body .cashback-experience .cbk-wallet-summary,
.portal-body .cashback-experience .cbk-group-progression {
position: relative;
border: 0;
border-radius: 16px;
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.012) 42%),
linear-gradient(180deg, rgba(14, 24, 38, 0.9), rgba(9, 16, 27, 0.9));
box-shadow:
0 1px 0 rgba(255, 255, 255, 0.06) inset,
0 0 0 1px rgba(150, 184, 218, 0.13),
0 18px 36px -26px rgba(0, 0, 0, 0.9);
overflow: hidden;
}
/* Hairline of light along the top edge */
.portal-body .cashback-experience .cbk-wallet-summary::before,
.portal-body .cashback-experience .cbk-group-progression::before {
content: "";
position: absolute;
inset: 0 0 auto;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(150, 210, 235, 0.5), transparent);
}
/* ---- Balance: the signature surface ---- */
.portal-body .cashback-experience .cbk-hero-available {
position: relative;
border: 0;
border-radius: 18px;
padding: 24px 20px 20px;
background:
radial-gradient(120% 90% at 50% -10%, rgba(94, 214, 190, 0.16), transparent 62%),
linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.008) 40%),
linear-gradient(180deg, rgba(12, 30, 34, 0.94), rgba(8, 17, 24, 0.94));
box-shadow:
0 1px 0 rgba(255, 255, 255, 0.08) inset,
0 0 0 1px rgba(94, 214, 190, 0.2),
0 22px 44px -28px rgba(0, 0, 0, 0.95);
}
.portal-body .cashback-experience .cbk-hero-available::before {
content: "";
position: absolute;
inset: 0 0 auto;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(140, 232, 210, 0.65), transparent);
z-index: 1;
}
/* ==========================================================
CINEMATIC NUMBERS — masked rise, authoritative at every frame
========================================================== */
.portal-body .cashback-experience .cbk-hero-available > strong,
.portal-body .cashback-experience .cbk-wallet-summary strong {
display: block;
overflow: hidden; /* the mask */
padding-bottom: 0.06em; /* room for descenders/glyph edge */
}
.portal-body .cashback-experience .cbk-hero-available > strong {
font-size: 3.05rem;
line-height: 1.02;
font-weight: 700;
letter-spacing: -0.038em;
color: #ffffff;
font-variant-numeric: tabular-nums;
font-feature-settings: "tnum" 1, "lnum" 1;
text-shadow: 0 2px 18px rgba(94, 214, 190, 0.22);
animation: cbkNumRise 720ms cubic-bezier(0.16, 1, 0.3, 1) 240ms both;
}
.portal-body .cashback-experience .cbk-wallet-summary strong {
font-size: 1.72rem;
letter-spacing: -0.026em;
font-variant-numeric: tabular-nums;
font-feature-settings: "tnum" 1, "lnum" 1;
animation: cbkNumRise 620ms cubic-bezier(0.16, 1, 0.3, 1) 300ms both;
}
.portal-body .cashback-experience .cbk-wallet-summary > div + div strong {
animation-delay: 370ms;
}
/* Label above the balance reads as a caption, not a field name */
.portal-body .cashback-experience .cbk-hero-available > span {
font-size: 0.8rem;
font-weight: 600;
letter-spacing: 0.12em;
text-transform: uppercase;
color: rgba(140, 210, 195, 0.9);
}
/* ==========================================================
SUMMARY — dividers become light, not borders
========================================================== */
.portal-body .cashback-experience .cbk-wallet-summary > div + div {
border-left: 0;
box-shadow: inset 1px 0 0 rgba(150, 184, 218, 0.12);
}
.portal-body .cashback-experience .cbk-wallet-summary span {
font-size: 0.7rem;
letter-spacing: 0.13em;
color: rgba(146, 172, 202, 0.8);
}
/* ==========================================================
PROGRESSION — the rail becomes an instrument
========================================================== */
.portal-body .cashback-experience .cbk-rank-rail .portal-progress {
height: 10px;
background:
linear-gradient(180deg, rgba(0, 0, 0, 0.34), rgba(0, 0, 0, 0.1)),
rgba(140, 178, 214, 0.14);
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.5);
}
.portal-body .cashback-experience .cbk-rank-rail .portal-progress > span {
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.22), transparent 52%),
linear-gradient(90deg, #a8763c, #e7c76a 66%, #ffe3ae);
box-shadow: 0 0 14px rgba(231, 199, 106, 0.42);
}
.portal-body .cashback-experience .cbk-rank-rail .portal-progress > span::after {
width: 15px;
height: 15px;
right: -7px;
background: radial-gradient(circle at 34% 30%, #fff6e0, #f0cd84 62%, #d9ae5c 100%);
box-shadow:
0 0 0 3px rgba(231, 199, 106, 0.18),
0 2px 8px rgba(0, 0, 0, 0.5);
}
/* Tier endpoints read as destinations */
.portal-body .cashback-experience .cbk-rail-anchor {
display: inline-flex;
align-items: center;
gap: 7px;
font-size: 0.78rem;
}
.portal-body .cashback-experience .cbk-rail-anchor::before {
content: "";
width: 9px;
height: 9px;
border-radius: 50%;
flex: 0 0 auto;
}
.portal-body .cashback-experience .cbk-rail-anchor.cbk-rail-current::before {
background: #e8c98a;
box-shadow: 0 0 0 3px rgba(232, 201, 138, 0.16);
}
.portal-body .cashback-experience .cbk-rail-anchor.cbk-rail-next::before {
background: transparent;
border: 1.6px solid rgba(255, 217, 160, 0.7);
}
/* ==========================================================
NEXT UNLOCK — a statement, not a label pile
========================================================== */
.portal-body .cashback-experience .cbk-rank-next-unlock {
position: relative;
margin-top: 16px;
padding: 16px 0 0;
border-top: 0;
box-shadow: inset 0 1px 0 rgba(150, 184, 218, 0.13);
}
.portal-body .cashback-experience .cbk-rank-next-head strong {
font-size: 1.5rem;
letter-spacing: -0.02em;
background: linear-gradient(180deg, #ffeec4, #e0b969);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
/* ==========================================================
CLAIM — the primary financial action
========================================================== */
.portal-body .cashback-experience .cbk-hero-available .primary-button {
position: relative;
overflow: hidden;
min-height: 54px;
border-radius: 14px;
border: 1px solid rgba(120, 226, 200, 0.4);
background:
linear-gradient(180deg, rgba(140, 232, 210, 0.26), rgba(140, 232, 210, 0) 48%),
linear-gradient(180deg, #1d6f60, #114a41);
box-shadow:
0 1px 0 rgba(255, 255, 255, 0.18) inset,
0 12px 26px -16px rgba(17, 74, 65, 0.95);
font-weight: 670;
letter-spacing: 0.015em;
}
.portal-body .cashback-experience .cbk-hero-available .primary-button[disabled] {
background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.02));
border-color: rgba(150, 184, 218, 0.2);
box-shadow: none;
opacity: 0.55;
}
}
/* Digits are correct at every frame — this only moves them into view. */
@keyframes cbkNumRise {
from { opacity: 0; transform: translateY(105%); }
to { opacity: 1; transform: translateY(0); }
}
@media (max-width: 560px) and (prefers-reduced-motion: reduce) {
.portal-body .cashback-experience .cbk-hero-available > strong,
.portal-body .cashback-experience .cbk-wallet-summary strong { animation: none; }
}
/* ==============================================================
AUREX SERVICES — SHARED HIGH-UI MATERIAL + MOTION
One system for every service page (Overview, Performance,
Leaderboard, Trading Accounts, Carlos, Chart Reader, Strategy
Lab, Education, Membership, Support) rather than per-page rules.
Cashback keeps its own hero treatment: the shared hero rule below
uses :not(.cashback-experience) > .pfx-hero so it cannot override
the work already verified on that page.
Presentation only. Numbers are revealed, never interpolated.
============================================================== */
@media (max-width: 560px) {
/* ==========================================================
1. SURFACE MATERIAL — depth instead of outlines
========================================================== */
.portal-body .portal-main .pfx-panel,
.portal-body .portal-main .portal-chart-card,
.portal-body .portal-main .pov-bridge,
.portal-body .portal-main .pfl-you-card,
.portal-body .portal-main .pfl-table-panel,
.portal-body .portal-main .tac-card,
.portal-body .portal-main .portal-ecosystem-panel {
position: relative;
border: 0;
border-radius: 16px;
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.011) 42%),
linear-gradient(180deg, rgba(14, 24, 38, 0.9), rgba(9, 16, 27, 0.9));
box-shadow:
0 1px 0 rgba(255, 255, 255, 0.055) inset,
0 0 0 1px rgba(150, 184, 218, 0.12),
0 16px 34px -26px rgba(0, 0, 0, 0.9);
overflow: hidden;
}
/* Hairline of light along the top edge */
.portal-body .portal-main .pfx-panel::before,
.portal-body .portal-main .pov-bridge::before,
.portal-body .portal-main .pfl-you-card::before,
.portal-body .portal-main .tac-card::before {
content: "";
position: absolute;
inset: 0 0 auto;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(150, 210, 235, 0.42), transparent);
}
/* Service hero — Cashback excluded, it has its own */
.portal-body .portal-main :not(.cashback-experience) > .pfx-hero {
position: relative;
border: 0;
border-radius: 18px;
background:
radial-gradient(120% 90% at 50% -10%, rgba(103, 232, 249, 0.12), transparent 62%),
linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.008) 40%),
linear-gradient(180deg, rgba(13, 24, 38, 0.94), rgba(8, 15, 25, 0.94));
box-shadow:
0 1px 0 rgba(255, 255, 255, 0.07) inset,
0 0 0 1px rgba(103, 232, 249, 0.16),
0 20px 40px -28px rgba(0, 0, 0, 0.95);
}
.portal-body .portal-main :not(.cashback-experience) > .pfx-hero::before {
content: "";
position: absolute;
inset: 0 0 auto;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(140, 226, 248, 0.6), transparent);
z-index: 1;
}
/* ==========================================================
2. METRIC TILES — instruments, not boxes
========================================================== */
.portal-body .portal-main .pfx-inst {
position: relative;
border: 0;
border-radius: 13px;
padding: 14px 13px;
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.012) 46%),
rgba(11, 20, 32, 0.86);
box-shadow:
0 1px 0 rgba(255, 255, 255, 0.05) inset,
0 0 0 1px rgba(150, 184, 218, 0.11);
overflow: hidden;
}
.portal-body .portal-main .pfx-inst strong {
display: block;
overflow: hidden;
font-size: 1.42rem;
font-weight: 670;
letter-spacing: -0.024em;
line-height: 1.12;
color: #ffffff;
font-variant-numeric: tabular-nums;
font-feature-settings: "tnum" 1, "lnum" 1;
}
.portal-body .portal-main .pfx-inst span {
font-size: 0.72rem;
font-weight: 560;
letter-spacing: 0.04em;
color: rgba(150, 176, 208, 0.8);
}
/* Primary figure on any service hero */
.portal-body .portal-main .pfx-primary strong {
display: block;
overflow: hidden;
font-weight: 700;
letter-spacing: -0.034em;
font-variant-numeric: tabular-nums;
font-feature-settings: "tnum" 1, "lnum" 1;
text-shadow: 0 2px 16px rgba(103, 232, 249, 0.18);
}
/* ==========================================================
3. NUMBER REVEAL — masked rise, never interpolated
The value in the DOM is authoritative at every frame; this
only moves it into view.
========================================================== */
.portal-body .portal-main .pfx-primary strong {
animation: svcNumRise 700ms cubic-bezier(0.16, 1, 0.3, 1) 220ms both;
}
.portal-body .portal-main .pfx-inst strong {
animation: svcNumRise 560ms cubic-bezier(0.16, 1, 0.3, 1) both;
}
.portal-body .portal-main .pfx-instruments .pfx-inst:nth-child(1) strong { animation-delay: 300ms; }
.portal-body .portal-main .pfx-instruments .pfx-inst:nth-child(2) strong { animation-delay: 350ms; }
.portal-body .portal-main .pfx-instruments .pfx-inst:nth-child(3) strong { animation-delay: 400ms; }
.portal-body .portal-main .pfx-instruments .pfx-inst:nth-child(4) strong { animation-delay: 450ms; }
.portal-body .portal-main .pfx-instruments .pfx-inst:nth-child(5) strong { animation-delay: 500ms; }
.portal-body .portal-main .pfx-instruments .pfx-inst:nth-child(6) strong { animation-delay: 550ms; }
/* ==========================================================
4. ENTRANCE — every service resolves top-down, once
========================================================== */
.portal-body .portal-main .pfx > * {
animation: svcRise 420ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
.portal-body .portal-main .pfx > *:nth-child(1) { animation-delay: 40ms; }
.portal-body .portal-main .pfx > *:nth-child(2) { animation-delay: 110ms; }
.portal-body .portal-main .pfx > *:nth-child(3) { animation-delay: 180ms; }
.portal-body .portal-main .pfx > *:nth-child(4) { animation-delay: 250ms; }
.portal-body .portal-main .pfx > *:nth-child(5) { animation-delay: 320ms; }
.portal-body .portal-main .pfx > *:nth-child(6) { animation-delay: 380ms; }
.portal-body .portal-main .pfx > *:nth-child(n+7) { animation-delay: 430ms; }
/* Metric tiles arrive as a group, slightly after their container */
.portal-body .portal-main .pfx-instruments .pfx-inst {
animation: svcTile 400ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
.portal-body .portal-main .pfx-instruments .pfx-inst:nth-child(1) { animation-delay: 240ms; }
.portal-body .portal-main .pfx-instruments .pfx-inst:nth-child(2) { animation-delay: 285ms; }
.portal-body .portal-main .pfx-instruments .pfx-inst:nth-child(3) { animation-delay: 330ms; }
.portal-body .portal-main .pfx-instruments .pfx-inst:nth-child(4) { animation-delay: 375ms; }
.portal-body .portal-main .pfx-instruments .pfx-inst:nth-child(5) { animation-delay: 420ms; }
.portal-body .portal-main .pfx-instruments .pfx-inst:nth-child(6) { animation-delay: 465ms; }
/* ==========================================================
5. PROGRESS RAILS — shared instrument treatment
Authoritative inline width untouched; transform only.
========================================================== */
.portal-body .portal-main .pfx-panel .portal-progress,
.portal-body .portal-main .pfl-gap-rail .portal-progress {
height: 9px;
border: 0;
border-radius: 99px;
background:
linear-gradient(180deg, rgba(0, 0, 0, 0.32), rgba(0, 0, 0, 0.08)),
rgba(140, 178, 214, 0.14);
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.45);
overflow: hidden;
}
.portal-body .portal-main .pfx-panel .portal-progress > span,
.portal-body .portal-main .pfl-gap-rail .portal-progress > span {
display: block;
height: 100%;
border-radius: 99px;
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.2), transparent 52%),
linear-gradient(90deg, #2f8fc4, #67e8f9);
box-shadow: 0 0 12px rgba(103, 232, 249, 0.34);
transform-origin: left center;
animation: svcRail 720ms cubic-bezier(0.22, 1, 0.36, 1) 480ms both;
}
/* ==========================================================
6. TOUCH FEEDBACK
========================================================== */
.portal-body .portal-main .pfx-panel,
.portal-body .portal-main .pfx-inst,
.portal-body .portal-main .pov-bridge {
transition: transform 120ms ease, box-shadow 160ms ease;
}
.portal-body .portal-main a.pfx-panel:active,
.portal-body .portal-main a.pov-bridge:active,
.portal-body .portal-main button.pfx-panel:active { transform: scale(0.99); }
/* Section eyebrows share one voice */
.portal-body .portal-main .pfx-panel-eyebrow {
font-size: 0.72rem;
font-weight: 650;
letter-spacing: 0.12em;
text-transform: uppercase;
color: rgba(150, 176, 208, 0.78);
}
}
@keyframes svcRise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes svcTile { from { opacity: 0; transform: translateY(8px) scale(0.985); } to { opacity: 1; transform: none; } }
@keyframes svcNumRise { from { opacity: 0; transform: translateY(102%); } to { opacity: 1; transform: none; } }
@keyframes svcRail { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@media (max-width: 560px) and (prefers-reduced-motion: reduce) {
.portal-body .portal-main .pfx > *,
.portal-body .portal-main .pfx-instruments .pfx-inst,
.portal-body .portal-main .pfx-inst strong,
.portal-body .portal-main .pfx-primary strong,
.portal-body .portal-main .pfx-panel .portal-progress > span,
.portal-body .portal-main .pfl-gap-rail .portal-progress > span { animation: none; }
.portal-body .portal-main .pfx-panel,
.portal-body .portal-main .pfx-inst,
.portal-body .portal-main .pov-bridge { transition: none; }
}
/* ==============================================================
AUREX WORDMARK — the identity, no mark.
Weight plus generous tracking is what makes a wordmark read as
institutional rather than as a page title. Optical sizes differ
per surface so the tracking stays visually even.
============================================================== */
@media (max-width: 560px) {
/* Topbar: the mark span is gone, so the brand is a single element */
.portal-body .portal-mobile-brand { gap: 0; }
.portal-body .portal-mobile-mark { display: none; }
.portal-body .portal-mobile-wordmark {
display: block;
font-size: 1.12rem;
font-weight: 700;
letter-spacing: 0.24em;
/* tracking adds space after the last glyph; pull it back so the
wordmark sits optically centred against the controls */
text-indent: 0.24em;
margin-left: -0.12em;
line-height: 1;
color: #f6f9fc;
}
.portal-body .portal-mobile-wordmark small { display: none; }
/* Drawer header */
.portal-body .portal-mobile-drawer-kicker { display: none; }
.portal-body .portal-mobile-drawer-head strong {
font-size: 1.1rem;
font-weight: 700;
letter-spacing: 0.22em;
text-indent: 0.22em;
}
}
/* Desktop sidebar lockup */
.portal-body .axr-brand { gap: 0; }
.portal-body .axr-mark { display: none; }
.portal-body .axr-brand h1 {
font-size: 1.22rem;
font-weight: 700;
letter-spacing: 0.26em;
text-indent: 0.26em;
line-height: 1;
color: #f6f9fc;
}
.portal-body .axr-kicker,
.portal-body .axr-sub {
letter-spacing: 0.1em;
color: rgba(150, 176, 208, 0.7);
}
/* ==============================================================
WORDMARK — TOPBAR / DRAWER ENTRANCE
Composited properties only (opacity, transform, filter). No
letter-spacing animation here: the topbar is a grid row and a
reflowing wordmark would nudge the bell and avatar.
============================================================== */
@media (max-width: 560px) {
.portal-body .portal-mobile-wordmark {
animation: axWordIn 620ms cubic-bezier(0.16, 1, 0.3, 1) 80ms both;
}
.portal-body .portal-mobile-drawer-open .portal-mobile-drawer-head strong {
animation: axWordIn 520ms cubic-bezier(0.16, 1, 0.3, 1) 90ms both;
}
/* Touch feedback on the brand */
.portal-body .portal-mobile-brand {
transition: opacity 140ms ease;
}
.portal-body .portal-mobile-brand:active { opacity: 0.72; }
}
@keyframes axWordIn {
from { opacity: 0; filter: blur(3px); transform: translateY(3px); }
to { opacity: 1; filter: blur(0); transform: none; }
}
@media (max-width: 560px) and (prefers-reduced-motion: reduce) {
.portal-body .portal-mobile-wordmark,
.portal-body .portal-mobile-drawer-open .portal-mobile-drawer-head strong { animation: none; }
.portal-body .portal-mobile-brand { transition: none; }
}
/* ==============================================================
AUREX SIGNATURE — shape, colour, type, movement
A corner notch as the ownable detail. Implemented as a pseudo
element rather than clip-path, because clipping would cut the
layered shadows that give the surfaces their depth.
============================================================== */
@media (max-width: 560px) {
/* ---- Accent ramp: one defined set, not ad-hoc colours ---- */
.portal-body {
--ax-cyan: #55b6e0;
--ax-cyan-soft: rgba(85, 182, 224, 0.13);
--ax-gold: #e7c76a; /* reserved for value + tier only */
--ax-emerald: #5ad6a8; /* reserved for confirmed state */
--ax-edge: rgba(150, 210, 235, 0.42);
}
/* ---- SHAPE: the corner notch ---- */
.portal-body .portal-main .pfx-hero,
.portal-body .portal-main .pfx-panel,
.portal-body .cashback-experience .cbk-hero-available,
.portal-body .cashback-experience .cbk-group-progression {
position: relative;
}
.portal-body .portal-main .pfx-hero::after,
.portal-body .cashback-experience .cbk-hero-available::after {
content: "";
position: absolute;
top: 12px;
right: 12px;
width: 16px;
height: 16px;
pointer-events: none;
border-top: 1.5px solid var(--ax-edge);
border-right: 1.5px solid var(--ax-edge);
border-top-right-radius: 4px;
opacity: 0.55;
}
/* ---- TYPE: sharper headings, engineered figures ---- */
.portal-body .portal-main .pfx-hero-label,
.portal-body .portal-main .pfx-heading,
.portal-body .portal-main h1,
.portal-body .portal-main h2 {
letter-spacing: -0.025em;
font-feature-settings: "ss01" 1, "cv01" 1;
}
.portal-body .portal-main .pfx-panel-eyebrow,
.portal-body .portal-main .cbk-group-eyebrow {
font-variant-caps: all-small-caps;
letter-spacing: 0.16em;
font-weight: 660;
}
.portal-body .portal-main strong,
.portal-body .portal-main .pfx-inst strong,
.portal-body .portal-main td {
font-variant-numeric: tabular-nums slashed-zero;
}
/* ---- MOVEMENT: considered focus + press across the shell ---- */
.portal-body .portal-main a,
.portal-body .portal-main button {
-webkit-tap-highlight-color: transparent;
}
.portal-body .portal-main a:focus-visible,
.portal-body .portal-main button:focus-visible,
.portal-body #portalMobileDrawerNav .axr-link:focus-visible {
outline: 2px solid var(--ax-cyan);
outline-offset: 2px;
border-radius: 8px;
}
/* Active route rail grows rather than blinking on */
.portal-body #portalMobileDrawerNav .axr-link.is-active::before {
animation: axRailGrow 220ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
/* Bottom-nav indicator sweeps in from centre */
.portal-body .portal-bottom-nav .portal-tab.is-active::before {
animation: axTabIndicator 200ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
}
@keyframes axRailGrow { from { transform: translateY(-50%) scaleY(0); } to { transform: translateY(-50%) scaleY(1); } }
@keyframes axTabIndicator{ from { transform: translateX(-50%) scaleX(0); } to { transform: translateX(-50%) scaleX(1); } }
@media (max-width: 560px) and (prefers-reduced-motion: reduce) {
.portal-body #portalMobileDrawerNav .axr-link.is-active::before,
.portal-body .portal-bottom-nav .portal-tab.is-active::before { animation: none; }
}
/* ==============================================================
HOME / OVERVIEW — typography + resolution
Three defects visible in the rendered page:
1. the client name rendered lowercase at body weight, so the
hero had no focal point
2. "AUREX Members..." was truncating inside its tile
3. tile values used five different accent colours, which read
as decoration rather than meaning
============================================================== */
@media (max-width: 560px) {
/* ---- Crisp rendering ---- */
.portal-body .portal-main,
.portal-body .portal-mobile-topbar,
.portal-body #portalMobileDrawerNav {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
}
/* ---- Hero: the name is the focal point ---- */
.portal-body .portal-main .pfx-hero-label,
.portal-body .portal-main .pov-welcome-name {
display: block;
font-size: clamp(2.1rem, 9.5vw, 2.5rem);
line-height: 1.05;
font-weight: 700;
letter-spacing: -0.032em;
text-transform: capitalize; /* presentation only — value unchanged */
color: #ffffff;
}
.portal-body .portal-main .pfx-eyebrow {
font-variant-caps: all-small-caps;
font-size: 0.86rem;
font-weight: 660;
letter-spacing: 0.14em;
color: rgba(126, 206, 232, 0.92);
}
/* The membership line is supporting text, not a second heading */
.portal-body .portal-main .pfx-sub {
font-size: 0.88rem;
line-height: 1.5;
color: rgba(158, 184, 212, 0.86);
}
/* ---- Tiles: no truncation, one number voice ---- */
.portal-body .portal-main .pfx-inst {
min-height: 84px;
padding: 14px 14px 13px;
}
.portal-body .portal-main .pfx-inst strong {
/* was clipping to "AUREX Members…" — wrap instead of truncate */
white-space: normal;
overflow-wrap: anywhere;
text-overflow: clip;
overflow: visible;
font-size: clamp(1.15rem, 5.4vw, 1.5rem);
line-height: 1.14;
letter-spacing: -0.026em;
font-weight: 690;
/* one voice: figures are white, meaning comes from the label */
color: #ffffff;
}
.portal-body .portal-main .pfx-inst span {
display: block;
margin-top: 5px;
font-size: 0.76rem;
font-weight: 560;
letter-spacing: 0.01em;
color: rgba(150, 176, 208, 0.82);
}
/* Accent is reserved: value = emerald, tier = gold. Nothing else. */
.portal-body .portal-main .pfx-inst.is-value strong,
.portal-body .portal-main .pfx-inst:has(span:is([data-label="Available Cashback"])) strong {
color: #6fe0b4;
}
.portal-body .portal-main .pfx-inst.is-tier strong { color: #e7c76a; }
/* ---- Status chips ---- */
.portal-body .portal-main .pfx-signal {
font-size: 0.78rem;
font-weight: 580;
letter-spacing: 0.01em;
padding: 6px 12px;
border-radius: 99px;
}
/* ---- Next actions: stronger index, calmer title ---- */
.portal-body .portal-main .pov-actions li strong,
.portal-body .portal-main .pov-action-title {
font-size: 0.98rem;
font-weight: 640;
letter-spacing: -0.012em;
text-transform: none; /* was shouting in caps */
color: #f2f7fc;
}
.portal-body .portal-main .pov-actions li small,
.portal-body .portal-main .pov-action-note {
font-size: 0.84rem;
line-height: 1.45;
color: rgba(158, 184, 212, 0.82);
}
}
/* ==============================================================
PASS 1 — OVERVIEW, using the real markup.
Read from overviewPage() in portal/dashboard/pages.js:
hero name -> (NOT .pfx-hero-label)
tiles -> .pfx-inst > strong + span, emitted in a fixed
order: Verified Lots, Current Rank, Available
Cashback, Current Tier, Trading Account, Access.
Accents are mapped by that render order, so "value" and "tier"
get colour and everything else stays white.
============================================================== */
@media (max-width: 560px) {
/* ---- Hero name is the focal point ---- */
.portal-body .portal-main .pov-hero-name {
display: block;
margin: 6px 0 0;
font-size: clamp(2.1rem, 9.5vw, 2.5rem);
line-height: 1.04;
font-weight: 700;
letter-spacing: -0.032em;
text-transform: capitalize; /* presentation only; value unchanged */
color: #ffffff;
}
/* ---- One number voice: white by default ---- */
.portal-body .portal-main .pfx-instruments .pfx-inst strong { color: #ffffff; }
/* Available Cashback = value */
.portal-body .portal-main .pfx-instruments .pfx-inst:nth-child(3) strong { color: #6fe0b4; }
/* Current Tier = tier */
.portal-body .portal-main .pfx-instruments .pfx-inst:nth-child(4) strong { color: #e7c76a; }
}
/* ==============================================================
SHARED PAGE-ENTRY (§5)
Read from the live DOM — all three pages emit the same shape:
.pfx-hero > .pfx-hero-grid + .pfx-hero-main + scope|period
.pfx-eyebrow = service name
.pfx-sub = descriptor
.pfx-scope / .cbk-period-chip = optional control on the right
Rewards additionally emits .pfx-hero-label.
Compact entry, no second hero panel.
============================================================== */
@media (max-width: 560px) {
.portal-body .portal-main .pfx-hero {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
align-items: start;
gap: 12px;
padding: 18px 16px 16px;
}
.portal-body .portal-main .pfx-hero-grid { display: none; }
.portal-body .portal-main .pfx-hero-main { grid-column: 1; min-width: 0; }
/* Service name */
.portal-body .portal-main .pfx-hero .pfx-eyebrow {
display: block;
margin: 0 0 5px;
font-size: 1.24rem;
font-weight: 680;
letter-spacing: -0.02em;
text-transform: none;
font-variant-caps: normal;
color: #f4f8fc;
}
/* Descriptor: one calm supporting line */
.portal-body .portal-main .pfx-hero .pfx-sub {
display: block;
margin: 0;
font-size: 0.87rem;
line-height: 1.45;
color: rgba(158, 184, 212, 0.84);
}
/* Rewards' extra label is redundant beside the service name */
.portal-body .portal-main .pfx-hero .pfx-hero-label { display: none; }
/* Scope / period sits on the entry row, compact */
.portal-body .portal-main .pfx-hero .pfx-scope,
.portal-body .portal-main .pfx-hero .cbk-period-chip {
grid-column: 1 / -1;
width: 100%;
margin-top: 4px;
}
}
/* Summary stat values must wrap: the tier field can hold a long
string ("No verified lots"), which was clipping at nowrap
(188px into a 131px column). */
@media (max-width: 560px) {
.portal-body .cashback-experience .cbk-wallet-summary strong {
white-space: normal;
overflow-wrap: anywhere;
text-overflow: clip;
font-size: clamp(1.15rem, 5.2vw, 1.72rem);
line-height: 1.14;
}
}
/* ==============================================================
DRAWER HEADER — brand vs account identity (Option 1)
.portal-mobile-drawer-kicker = static "AUREX CLIENT" -> brand
#portalMobileDrawerName = clientDisplayName() -> a person's
name, so it stays cased as stored.
No text-transform on the name: capitalize would mangle acronyms
and names like "d'Angelo" or "McBride".
============================================================== */
@media (max-width: 560px) {
.portal-body .portal-mobile-drawer-head {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
align-items: center;
gap: 14px;
padding: calc(18px + env(safe-area-inset-top, 0px)) 16px 16px;
}
.portal-body .portal-mobile-drawer-head > div { min-width: 0; }
/* Brand line — the strongest element in the header */
.portal-body .portal-mobile-drawer-kicker {
display: block;
margin: 0 0 5px;
font-size: 1rem;
font-weight: 720;
letter-spacing: 0.18em;
line-height: 1;
text-transform: uppercase;
color: #f6f9fc;
}
/* Account identity — reads as a name, not a logo */
.portal-body #portalMobileDrawerName {
display: block;
font-size: 0.88rem;
font-weight: 620;
letter-spacing: 0;
line-height: 1.2;
text-transform: none;
color: rgba(158, 184, 212, 0.9);
/* long names truncate rather than collide with the close control */
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* Close control stays quiet next to the brand */
.portal-body .portal-mobile-drawer-close {
flex: 0 0 auto;
width: 42px;
height: 42px;
display: grid;
place-items: center;
border-radius: 11px;
border: 1px solid rgba(150, 184, 218, 0.16);
background: rgba(255, 255, 255, 0.03);
color: rgba(196, 214, 234, 0.86);
transition: background-color 150ms ease, border-color 150ms ease;
}
.portal-body .portal-mobile-drawer-close:active {
background: rgba(255, 255, 255, 0.07);
border-color: rgba(150, 184, 218, 0.3);
}
.portal-body .portal-mobile-drawer-close svg { width: 17px; height: 17px; }
}
@media (max-width: 560px) and (prefers-reduced-motion: reduce) {
.portal-body .portal-mobile-drawer-close { transition: none; }
}
/* ==============================================================
LEADERBOARD — MOBILE V3
Portal leaderboard only (.pfx.pfl). Composition, order, density.
No ranking, reward, or identity logic is touched; every selector
below already exists in portal/dashboard/pages.js.
DOM order is hero · podium · you-card · table · identity · nav
Required order is hero · YOU · top3 · table · identity · nav,
so the container becomes a flex column and reorders (§2).
Podium DOM is authored 2,1,3 for the desktop plinth, so the
stack re-sorts it to 1,2,3 as well (§6).
============================================================== */
@media (max-width: 560px) {
.portal-body .portal-main .pfx.pfl {
display: flex;
flex-direction: column;
gap: 22px;
padding-left: 16px;
padding-right: 16px;
}
.portal-body .portal-main .pfl > .pfx-hero { order: 1; }
.portal-body .portal-main .pfl > .pfl-you-card { order: 2; }
.portal-body .portal-main .pfl > .pfl-podium { order: 3; }
.portal-body .portal-main .pfl > .pfl-table-panel { order: 4; }
.portal-body .portal-main .pfl > .leaderboard-identity-panel { order: 5; }
.portal-body .portal-main .pfl > .pfl-nav { order: 6; }
/* ---------- §3 compact header ---------- */
.portal-body .portal-main .pfl .pfx-hero {
padding: 10px 0 0;
background: none;
border: 0;
min-height: 0;
}
.portal-body .portal-main .pfl .pfx-hero-grid { display: none; }
.portal-body .portal-main .pfl .pfx-sub { display: none; }
.portal-body .portal-main .pfl .pfx-eyebrow {
margin: 0 0 4px;
font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase;
color: rgba(150, 184, 214, 0.8);
}
.portal-body .portal-main .pfl .pfl-hero-title {
margin: 0; font-size: 24px; font-weight: 720; line-height: 1.12;
letter-spacing: -0.02em; color: #ffffff;
}
/* keep only the "N ranked traders" signal; the other two repeat the header */
.portal-body .portal-main .pfl .pfx-signals {
margin: 6px 0 0; gap: 8px; flex-wrap: wrap;
}
.portal-body .portal-main .pfl .pfx-signal:nth-child(1),
.portal-body .portal-main .pfl .pfx-signal:nth-child(2) { display: none; }
.portal-body .portal-main .pfl .pfx-signal {
padding: 0; min-height: 0; border: 0; background: none;
font-size: 11.5px; color: rgba(158, 186, 212, 0.86);
}
.portal-body .portal-main .pfl .pfx-scope {
display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 6px; margin-top: 0; padding: 0; width: 100%;
}
.portal-body .portal-main .pfl .pfx-scope-btn {
min-height: 44px; padding: 0 6px; width: 100%;
border-radius: 11px;
font-size: 12.5px; font-weight: 660; letter-spacing: 0.04em;
color: rgba(178, 206, 232, 0.9);
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(126, 168, 204, 0.2);
transition: background 200ms ease, border-color 200ms ease, color 200ms ease;
}
.portal-body .portal-main .pfl .pfx-scope-btn.is-active {
color: #eafaff;
background: rgba(74, 168, 216, 0.18);
border-color: rgba(143, 217, 246, 0.6);
}
/* ---------- §4 YOUR POSITION — primary module ---------- */
.portal-body .portal-main .pfl .pfl-you-card {
padding: 18px 16px;
border-radius: 18px;
border: 1px solid rgba(143, 217, 246, 0.3);
background:
radial-gradient(120% 100% at 84% 0%, rgba(74, 168, 216, 0.16), transparent 62%),
rgba(10, 21, 34, 0.8);
}
.portal-body .portal-main .pfl .pfl-you-lead { margin-bottom: 10px; }
.portal-body .portal-main .pfl .pfl-you-card .pfx-panel-eyebrow {
font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase;
color: rgba(168, 200, 226, 0.9);
}
.portal-body .portal-main .pfl .pfl-you-rank {
margin: 2px 0 0; font-size: 46px; font-weight: 730; line-height: 1;
letter-spacing: -0.035em; color: #ffffff;
}
.portal-body .portal-main .pfl .pfl-you-facts {
display: flex; flex-wrap: wrap; gap: 8px 22px; margin-bottom: 14px;
}
.portal-body .portal-main .pfl .pfl-you-facts > div {
display: flex; flex-direction: column; gap: 3px; min-width: 0;
}
.portal-body .portal-main .pfl .pfl-you-facts span {
font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase;
color: rgba(150, 184, 214, 0.78);
}
.portal-body .portal-main .pfl .pfl-you-facts strong {
font-size: 17px; font-weight: 700; color: #f2f8fc;
font-variant-numeric: tabular-nums;
}
/* §11 an unconfigured reward should not occupy a slot on a phone */
.portal-body .portal-main .pfl .pfl-you-facts > div:has(.pfl-you-noreward) { display: none; }
.portal-body .portal-main .pfl .pfl-you-reward { color: #e7c76a; }
/* ---------- §5 pursuit rail ---------- */
.portal-body .portal-main .pfl .pfl-gap-rail {
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto;
grid-template-areas: "track track track" "you . top";
align-items: center;
gap: 8px 10px;
margin: 0 0 12px;
}
.portal-body .portal-main .pfl .pfl-gap-track {
grid-area: track;
position: relative; display: block; height: 4px; border-radius: 4px;
background: rgba(126, 168, 204, 0.2);
}
.portal-body .portal-main .pfl .pfl-gap-track i {
display: block; height: 100%; width: 100%; border-radius: 4px;
background: linear-gradient(90deg, #8fd9f6, rgba(231, 199, 106, 0.85));
transform-origin: left center;
animation: pflRail 620ms cubic-bezier(0.22, 1, 0.36, 1) 180ms both;
}
/* endpoint dots read as "you" and "the position ahead" */
.portal-body .portal-main .pfl .pfl-gap-track::before,
.portal-body .portal-main .pfl .pfl-gap-track::after {
content: ""; position: absolute; top: 50%; width: 10px; height: 10px;
margin-top: -5px; border-radius: 50%;
}
.portal-body .portal-main .pfl .pfl-gap-track::before {
left: -1px; background: #8fd9f6; box-shadow: 0 0 9px rgba(143, 217, 246, 0.8);
}
.portal-body .portal-main .pfl .pfl-gap-track::after {
right: -1px; background: #0b1626; border: 2px solid rgba(231, 199, 106, 0.9);
}
.portal-body .portal-main .pfl .pfl-gap-end {
display: flex; flex-direction: column; gap: 2px; min-width: 0;
}
.portal-body .portal-main .pfl .pfl-gap-end { grid-area: you; }
.portal-body .portal-main .pfl .pfl-gap-end-top { grid-area: top; text-align: right; }
.portal-body .portal-main .pfl .pfl-gap-end b {
font-size: 11.5px; font-weight: 680; color: rgba(206, 228, 248, 0.92);
}
.portal-body .portal-main .pfl .pfl-gap-end i {
font-style: normal; font-size: 12.5px; color: rgba(158, 186, 212, 0.82);
font-variant-numeric: tabular-nums;
}
.portal-body .portal-main .pfl .pfl-insight {
margin: 0 0 13px; font-size: 13px; line-height: 1.45; color: rgba(186, 212, 234, 0.9);
}
.portal-body .portal-main .pfl .pfl-you-card .compact-action {
display: flex; align-items: center; justify-content: center;
width: 100%; min-height: 46px; border-radius: 12px;
font-size: 13px; font-weight: 680;
}
.portal-body .portal-main .pfl .pfl-you-card.is-empty .pfl-you-note {
margin: 6px 0 12px; font-size: 13px; line-height: 1.45; color: rgba(178, 206, 232, 0.86);
}
/* ---------- §6 TOP 3 — vertical stack, not three squeezed cards ---------- */
.portal-body .portal-main .pfl .pfl-podium {
display: flex; flex-direction: column; gap: 8px;
padding: 0; background: none; border: 0;
}
.portal-body .portal-main .pfl .pfl-pod-1 { order: 1; }
.portal-body .portal-main .pfl .pfl-pod-2 { order: 2; }
.portal-body .portal-main .pfl .pfl-pod-3 { order: 3; }
.portal-body .portal-main .pfl .pfl-pod {
display: grid;
grid-template-columns: 34px minmax(0, 1fr) auto;
align-items: center;
gap: 0 12px;
min-height: 72px;
margin: 0;
padding: 12px 14px;
border-radius: 14px;
background: rgba(255, 255, 255, 0.038);
border: 1px solid rgba(126, 168, 204, 0.16);
border-left: 3px solid rgba(126, 168, 204, 0.3);
transform: none;
opacity: 0;
animation: pflPod 480ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
.portal-body .portal-main .pfl .pfl-pod-1 { animation-delay: 60ms; }
.portal-body .portal-main .pfl .pfl-pod-2 { animation-delay: 150ms; }
.portal-body .portal-main .pfl .pfl-pod-3 { animation-delay: 240ms; }
.portal-body .portal-main .pfl .pfl-pod-rank {
grid-column: 1; font-size: 20px; font-weight: 720; line-height: 1;
color: rgba(196, 220, 240, 0.9); font-variant-numeric: tabular-nums;
}
.portal-body .portal-main .pfl .pfl-pod-name {
grid-column: 2; min-width: 0;
font-size: 15px; font-weight: 680; line-height: 1.25; color: #f2f8fc;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.portal-body .portal-main .pfl .pfl-pod-name em {
font-style: normal; font-size: 10px; font-weight: 700; letter-spacing: 0.1em;
text-transform: uppercase; color: #8fd9f6;
}
.portal-body .portal-main .pfl .pfl-pod-lots {
grid-column: 3; display: flex; flex-direction: column; align-items: flex-end; gap: 1px;
}
.portal-body .portal-main .pfl .pfl-pod-lots b {
font-size: 16px; font-weight: 700; color: #ffffff; font-variant-numeric: tabular-nums;
}
.portal-body .portal-main .pfl .pfl-pod-lots small {
font-size: 10.5px; color: rgba(150, 184, 214, 0.72);
}
.portal-body .portal-main .pfl .pfl-pod-reward {
grid-column: 2 / -1; margin-top: 4px; justify-self: start;
padding: 3px 8px; border-radius: 999px;
font-size: 10.5px; font-weight: 660; letter-spacing: 0.06em;
color: #e7c76a;
background: rgba(231, 199, 106, 0.12);
border: 1px solid rgba(231, 199, 106, 0.3);
}
/* §16 one restrained hierarchy: gold #1, cyan you, bronze #3 */
.portal-body .portal-main .pfl .pfl-pod-1 {
min-height: 80px;
border-left-color: #e7c76a;
background: linear-gradient(100deg, rgba(231, 199, 106, 0.11), rgba(255, 255, 255, 0.03) 62%);
}
.portal-body .portal-main .pfl .pfl-pod-1 .pfl-pod-rank { color: #e7c76a; font-size: 22px; }
.portal-body .portal-main .pfl .pfl-pod-1 .pfl-pod-name { font-size: 16px; }
.portal-body .portal-main .pfl .pfl-pod-1 .pfl-pod-lots b { font-size: 17px; }
.portal-body .portal-main .pfl .pfl-pod-3 { border-left-color: rgba(200, 138, 92, 0.75); }
.portal-body .portal-main .pfl .pfl-pod-3 .pfl-pod-rank { color: #d79a6d; }
.portal-body .portal-main .pfl .pfl-pod.is-you {
border-left-color: #8fd9f6;
background: linear-gradient(100deg, rgba(74, 168, 216, 0.16), rgba(255, 255, 255, 0.03) 62%);
}
.portal-body .portal-main .pfl .pfl-pod.is-you .pfl-pod-rank { color: #8fd9f6; }
.portal-body .portal-main .pfl .pfl-crown { display: none; }
.portal-body .portal-main .pfl .pfl-pod.is-vacant .pfl-pod-lots {
font-size: 12px; color: rgba(150, 184, 214, 0.66);
}
/* ---------- §8/§9 full ranking as rows, starting at #4 ---------- */
.portal-body .portal-main .pfl .pfl-table-panel { padding: 16px; border-radius: 18px; }
.portal-body .portal-main .pfl .pfx-panel-head { display: block; margin-bottom: 10px; }
.portal-body .portal-main .pfl .pfx-panel-meta { display: none; }
.portal-body .portal-main .pfl .leaderboard-table { display: block; }
.portal-body .portal-main .pfl .leaderboard-row.leaderboard-head { display: none; }
/* the podium already shows 1-3 immediately above */
.portal-body .portal-main .pfl .leaderboard-row.leaderboard-place-1,
.portal-body .portal-main .pfl .leaderboard-row.leaderboard-place-2,
.portal-body .portal-main .pfl .leaderboard-row.leaderboard-place-3 { display: none; }
.portal-body .portal-main .pfl .leaderboard-row {
display: grid;
grid-template-columns: 30px minmax(0, 1fr) auto;
align-items: center;
gap: 0 12px;
min-height: 0;
padding: 13px 0;
border: 0;
border-bottom: 1px solid rgba(126, 168, 204, 0.1);
border-radius: 0;
background: none;
}
.portal-body .portal-main .pfl .leaderboard-row:last-child { border-bottom: 0; }
.portal-body .portal-main .pfl .leaderboard-row > span[data-label="Rank"] {
font-size: 13px; font-weight: 680; color: rgba(158, 190, 216, 0.86);
font-variant-numeric: tabular-nums;
}
.portal-body .portal-main .pfl .leaderboard-row > strong[data-label="Trader"] {
min-width: 0; font-size: 14.5px; font-weight: 640; color: #eaf4fb;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.portal-body .portal-main .pfl .leaderboard-row > span[data-label="Verified Lots"] {
font-size: 15px; font-weight: 700; color: #ffffff;
font-variant-numeric: tabular-nums; white-space: nowrap;
}
/* §11 no reward column reserved on a phone */
.portal-body .portal-main .pfl .leaderboard-row > span[data-label="Reward"] { display: none; }
.portal-body .portal-main .pfl .leaderboard-row::before,
.portal-body .portal-main .pfl .leaderboard-row > span::before,
.portal-body .portal-main .pfl .leaderboard-row > strong::before { content: none; }
/* §10 the viewer's own row: subtle, not a glowing bar */
.portal-body .portal-main .pfl .leaderboard-row.is-you {
margin: 0 -10px; padding-left: 10px; padding-right: 10px;
border-radius: 10px;
border-left: 2px solid #8fd9f6;
background: rgba(74, 168, 216, 0.1);
}
.portal-body .portal-main .pfl .pfl-you {
font-style: normal; margin-left: 6px;
font-size: 9.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
color: #8fd9f6;
}
.portal-body .portal-main .pfl .leaderboard-empty { padding: 16px 0; }
/* ---------- §12 identity demoted to a setting row ---------- */
.portal-body .portal-main .pfl .leaderboard-identity-panel {
padding: 13px 14px; border-radius: 14px;
}
.portal-body .portal-main .pfl .leaderboard-identity-panel .portal-ecosystem-header {
display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0;
}
.portal-body .portal-main .pfl .leaderboard-identity-panel .eyebrow {
margin: 0 0 2px; font-size: 10px; letter-spacing: 0.15em;
}
.portal-body .portal-main .pfl .leaderboard-identity-panel h3 {
margin: 0; font-size: 15px; font-weight: 660; line-height: 1.2;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* the explainer belongs in the form, not on the collapsed row */
.portal-body .portal-main .pfl .leaderboard-identity-panel .portal-ecosystem-header > div > p:last-child { display: none; }
.portal-body .portal-main .pfl .leaderboard-identity-panel form p { display: block; }
.portal-body .portal-main .pfl .leaderboard-identity-panel .compact-action {
min-height: 44px; padding: 0 14px; flex: 0 0 auto;
}
/* ---------- §13 one CTA per job ---------- */
.portal-body .portal-main .pfl .pfl-nav { padding: 16px; border-radius: 16px; }
.portal-body .portal-main .pfl .pfl-nav-actions {
display: flex; flex-direction: column; gap: 10px;
}
/* "View My Performance" already sits inside YOUR POSITION */
.portal-body .portal-main .pfl .pfl-nav-actions > a[href$="#activity"] { display: none; }
.portal-body .portal-main .pfl .pfl-nav-actions > a {
display: flex; align-items: center; justify-content: center;
width: 100%; min-height: 46px; border-radius: 12px; font-size: 13px; font-weight: 660;
}
@keyframes pflRail { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes pflPod { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
}
@media (max-width: 560px) and (prefers-reduced-motion: reduce) {
.portal-body .portal-main .pfl .pfl-pod { animation: none; opacity: 1; }
.portal-body .portal-main .pfl .pfl-gap-track i { animation: none; transform: none; }
}