/* ========================================================= Earn+ Accounts UI — account.css - Theme palettes (swappable) - Mobile-first type/spacing tokens - Nav, buttons, cards - Gradients + accessibility ========================================================= */ /* --------- Theme palettes (swap by data-theme attr) --------- */ :root[data-theme="navy"]{ /* Base palette */ --brand-50:#DEDEE2; --brand-300:#6B79A6; --brand-500:#23263C; --brand-600:#35374C; --brand-700:#212438; --earn-blue: #BED6E6; /* Semantic tokens */ --surface: var(--brand-500); /* nav bg */ --surface-strong: var(--brand-700); /* deep zones */ --surface-soft: var(--brand-300); /* highlight */ --accent: var(--brand-500); /* primary btn bg */ --accent-hover: var(--brand-600); /* hover */ --accent-active: var(--brand-700); /* active */ --fg-on-surface:#FFFFFF; /* text/icons on dark */ --fg-muted: rgba(255,255,255,.75); /* secondary on dark */ /* Card gradient stops */ --grad-top: var(--brand-300); --grad-mid: var(--brand-500); --grad-deep: var(--brand-700); /* Gradient controls */ --light-x:16%; --light-y:8%; --heading-band-alpha:.22; --heading-band-alpha-secondary:.14; --hover-shift:4%; } /* alternate theme (flip on ) */ :root[data-theme="royal"]{ --brand-50:#E9E6FF; --brand-300:#9AA2FF; --brand-500:#4A57FF; --brand-600:#3944CC; --brand-700:#232B80; --earn-blue: #BED6E6; --surface: var(--brand-500); --surface-strong: var(--brand-700); --surface-soft: var(--brand-300); --accent: var(--brand-500); --accent-hover: var(--brand-600); --accent-active: var(--brand-700); --fg-on-surface:#FFFFFF; --fg-muted: rgba(255,255,255,.80); --grad-top: var(--brand-300); --grad-mid: var(--brand-500); --grad-deep: var(--brand-700); --light-x:16%; --light-y:8%; --heading-band-alpha:.22; --heading-band-alpha-secondary:.14; --hover-shift:4%; } /* --------- Mobile-first tokens (type, spacing, layout) --------- */ :root{ --nav-h:3.75rem; /* fixed nav height (~60px) */ --radius-cta:24px; /* shared radius */ --tap:44px; /* min tap target */ /* Type scale */ --fs-0:.875rem; --fs-1:1rem; --fs-2:clamp(1.125rem,1rem + 1vw,1.25rem); --fs-3:clamp(1.25rem,1.05rem + 1.5vw,1.5rem); --fs-4:clamp(1.5rem,1.2rem + 2vw,2rem); /* Spacing scale */ --sp-1:.5rem; --sp-2:.75rem; --sp-3:1rem; --sp-4:1.5rem; --sp-5:2rem; } @media (min-width:768px){ :root{ --fs-0:.9rem; --fs-2:clamp(1.2rem,1rem + .8vw,1.375rem); --fs-3:clamp(1.35rem,1.1rem + 1.2vw,1.75rem); --fs-4:clamp(1.75rem,1.3rem + 1.8vw,2.25rem); } } /* Fullscreen menu / offcanvas background */ .offcanvas-menu { background-color: var(--brand-700) !important; color: var(--fg-on-surface); /* ensures text/icons stay legible */ } /* Notification popup styling */ .alert-info { background-color: var(--earn-blue); border-color: var(--earn-blue); color: var(--brand-700); border-radius: var(--radius-cta); } .alert-success { background-color: var(--earn-blue); border-color: var(--earn-blue); color: var(--brand-700); border-radius: var(--radius-cta); }