/* ================================================================= MEMBER PORTAL — Global App Stylesheet ----------------------------------------------------------------- TO CHANGE THE THEME: Edit the CSS custom properties in the ":root" block below. --color-primary → main brand color (header, buttons, active) --color-secondary → accent color (highlights, secondary actions) ================================================================= */ /* ----------------------------------------------------------------- THEME CONFIGURATION ← EDIT HERE TO CHANGE COLORS ----------------------------------------------------------------- */ :root { /* PRIMARY BRAND COLOR */ --color-primary: #1565C0; --color-primary-dark: #0D47A1; --color-primary-light: #1976D2; --color-on-primary: #FFFFFF; /* SECONDARY ACCENT COLOR */ --color-secondary: #00ACC1; --color-secondary-dark: #00838F; --color-on-secondary: #FFFFFF; /* SURFACES & BACKGROUNDS */ --color-bg: #F0F4F8; --color-surface: #FFFFFF; --color-divider: #F1F4F8; --color-border: #E5E7EB; --color-on-surface: #111827; --color-muted: #6B7280; /* STATUS COLORS */ --color-success: #059669; --color-success-bg: #ECFDF5; --color-danger: #DC2626; --color-danger-bg: #FEF2F2; --color-warning: #D97706; --color-warning-bg: #FFFBEB; --color-info: #2563EB; --color-info-bg: #EFF6FF; /* LAYOUT */ --header-height: 56px; --bottomnav-height: 64px; --max-content-width: 480px; --page-h-pad: 16px; /* TYPOGRAPHY */ --font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; /* BORDER RADIUS */ --r-xs: 6px; --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-xl: 20px; --r-2xl: 28px; --r-full: 9999px; /* SHADOWS */ --shadow-sm: 0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.03); --shadow-md: 0 4px 14px rgba(0,0,0,.08), 0 2px 4px rgba(0,0,0,.04); --shadow-lg: 0 10px 32px rgba(0,0,0,.10), 0 4px 8px rgba(0,0,0,.05); --shadow-nav: 0 -2px 20px rgba(0,0,0,.07); } /* ----------------------------------------------------------------- DARK MODE OVERRIDES (applied when ) ----------------------------------------------------------------- */ [data-theme="dark"] { --color-primary: #4A90D9; --color-primary-dark: #2E6DB4; --color-primary-light: #5BA3E8; --color-on-primary: #FFFFFF; --color-secondary: #26C6DA; --color-secondary-dark: #00ACC1; --color-on-secondary: #FFFFFF; --color-bg: #0F1117; --color-surface: #1A1D27; --color-divider: #252836; --color-border: #2E3244; --color-on-surface: #E8EAF0; --color-muted: #8B92A8; --color-success: #34D399; --color-success-bg: #064E3B40; --color-danger: #F87171; --color-danger-bg: #7F1D1D40; --color-warning: #FBBF24; --color-warning-bg: #78350F40; --color-info: #60A5FA; --color-info-bg: #1E3A5F40; --shadow-sm: 0 1px 3px rgba(0,0,0,.3), 0 1px 2px rgba(0,0,0,.2); --shadow-md: 0 4px 14px rgba(0,0,0,.4), 0 2px 4px rgba(0,0,0,.2); --shadow-lg: 0 10px 32px rgba(0,0,0,.5),0 4px 8px rgba(0,0,0,.3); --shadow-nav: 0 -2px 20px rgba(0,0,0,.4); } /* ----------------------------------------------------------------- THEME TOGGLE SWITCH ----------------------------------------------------------------- */ .theme-toggle { display: flex; align-items: center; gap: 6px; cursor: pointer; flex-shrink: 0; } .theme-toggle-track { width: 40px; height: 22px; border-radius: 999px; background: rgba(255,255,255,.25); border: 1.5px solid rgba(255,255,255,.35); position: relative; transition: background .25s, border-color .25s; } .theme-toggle-thumb { position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: transform .25s cubic-bezier(.34,1.56,.64,1), background .25s; display: flex; align-items: center; justify-content: center; font-size: 9px; line-height: 1; } [data-theme="dark"] .theme-toggle-track { background: var(--color-primary); border-color: var(--color-primary-light); } [data-theme="dark"] .theme-toggle-thumb { transform: translateX(18px); background: #1A1D27; } .theme-toggle-icon { font-size: 14px; color: rgba(255,255,255,.85); line-height: 1; } /* ----------------------------------------------------------------- BASE RESET ----------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; -webkit-tap-highlight-color: transparent; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { font-family: var(--font); font-size: 15px; line-height: 1.6; color: var(--color-on-surface); background: var(--color-bg); margin: 0; padding: 0; overscroll-behavior-y: none; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } a { color: var(--color-primary); text-decoration: none; } a:hover { color: var(--color-primary-dark); } img { max-width: 100%; height: auto; } button { font-family: var(--font); } /* ----------------------------------------------------------------- APP SHELL WRAPPER — centers content on desktop ----------------------------------------------------------------- */ .app-wrapper { max-width: var(--max-content-width); margin: 0 auto; min-height: 100dvh; min-height: 100vh; background: var(--color-bg); box-shadow: 0 0 50px rgba(0,0,0,.12); position: relative; } /* ----------------------------------------------------------------- TOP APP BAR ----------------------------------------------------------------- */ .app-header { position: fixed; top: 0; left: 50%; transform: translateX(-50%); width: 100%; max-width: var(--max-content-width); height: var(--header-height); background: var(--color-primary); color: var(--color-on-primary); display: flex; align-items: center; padding: 0 var(--page-h-pad); gap: 10px; z-index: 900; box-shadow: 0 2px 10px rgba(0,0,0,.15); } .app-header-logo { width: 34px; height: 34px; object-fit: contain; border-radius: var(--r-sm); background: rgba(255,255,255,.15); padding: 3px; flex-shrink: 0; } .app-header-info { flex: 1; min-width: 0; } .app-header-greeting { display: block; font-size: 10px; opacity: .8; font-weight: 400; letter-spacing: .03em; line-height: 1.2; } .app-header-name { display: block; font-size: 15px; font-weight: 700; letter-spacing: .01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.3; } .app-header-avatar { width: 36px; height: 36px; border-radius: var(--r-full); background: rgba(255,255,255,.2); border: 2px solid rgba(255,255,255,.35); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 13px; color: #fff; flex-shrink: 0; cursor: pointer; transition: background .2s; text-decoration: none; } .app-header-avatar:hover, .app-header-avatar:focus { background: rgba(255,255,255,.3); color: #fff; } /* ----------------------------------------------------------------- BOTTOM NAVIGATION BAR ----------------------------------------------------------------- */ .app-bottomnav { position: fixed; bottom: 0; left: 50%; transform: translateX(-50%); width: 100%; max-width: var(--max-content-width); height: var(--bottomnav-height); background: var(--color-surface); border-top: 1px solid var(--color-border); display: flex; align-items: stretch; z-index: 900; box-shadow: var(--shadow-nav); padding-bottom: env(safe-area-inset-bottom, 0px); } .nav-item { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; padding: 6px 2px 4px; color: var(--color-muted); font-size: 10px; font-weight: 500; letter-spacing: .02em; cursor: pointer; border: none; background: none; text-decoration: none; transition: color .2s; position: relative; -webkit-tap-highlight-color: transparent; user-select: none; } .nav-item i { font-size: 22px; line-height: 1; transition: transform .2s; } .nav-item.active { color: var(--color-primary); } .nav-item.active i { transform: translateY(-1px); } .nav-item.active::after { content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 32px; height: 3px; background: var(--color-primary); border-radius: 0 0 var(--r-sm) var(--r-sm); } /* Desktop: constrain offcanvas to app width */ @media (min-width: 481px) { .offcanvas.offcanvas-bottom { left: calc(50% - 240px) !important; right: auto !important; width: 480px !important; border-radius: var(--r-xl) var(--r-xl) 0 0 !important; } } /* ----------------------------------------------------------------- PAGE CONTENT AREA ----------------------------------------------------------------- */ .app-content { padding-top: calc(var(--header-height) + 12px); padding-bottom: calc(var(--bottomnav-height) + 20px); padding-left: var(--page-h-pad); padding-right: var(--page-h-pad); } .page-heading { font-size: 20px; font-weight: 700; color: var(--color-on-surface); letter-spacing: -.02em; margin: 8px 0 16px; } .section-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--color-muted); margin-bottom: 8px; margin-top: 4px; } /* ----------------------------------------------------------------- PWA INSTALL BANNER ----------------------------------------------------------------- */ .pwa-install-banner { position: fixed; bottom: calc(var(--bottomnav-height) + 12px); left: 50%; transform: translateX(-50%); width: calc(100% - 24px); max-width: calc(var(--max-content-width) - 24px); background: #1a1a2e; color: #fff; border-radius: var(--r-lg); padding: 12px 14px; display: flex; align-items: center; gap: 10px; box-shadow: var(--shadow-lg); z-index: 950; animation: pwaSlideUp .35s cubic-bezier(.16,1,.3,1); } @keyframes pwaSlideUp { from { transform: translateX(-50%) translateY(20px); opacity: 0; } to { transform: translateX(-50%) translateY(0); opacity: 1; } } .pwa-banner-icon { width: 40px; height: 40px; border-radius: var(--r-sm); background: rgba(255,255,255,.1); object-fit: contain; padding: 4px; flex-shrink: 0; } .pwa-banner-text { flex: 1; } .pwa-banner-text strong { display: block; font-size: 13px; font-weight: 600; } .pwa-banner-text small { font-size: 11px; opacity: .7; } .pwa-btn-add { background: var(--color-primary); color: #fff; border: none; border-radius: var(--r-sm); padding: 7px 13px; font-size: 12px; font-weight: 600; cursor: pointer; white-space: nowrap; font-family: var(--font); } .pwa-btn-dismiss { background: rgba(255,255,255,.12); color: #fff; border: none; border-radius: var(--r-sm); padding: 7px 10px; font-size: 12px; cursor: pointer; white-space: nowrap; font-family: var(--font); } /* ----------------------------------------------------------------- CARDS ----------------------------------------------------------------- */ .app-card { background: var(--color-surface); border-radius: var(--r-lg); box-shadow: var(--shadow-sm); overflow: hidden; margin-bottom: 12px; } .app-card-header { padding: 14px 16px 10px; border-bottom: 1px solid var(--color-divider); display: flex; align-items: center; justify-content: space-between; gap: 8px; } .app-card-title { font-size: 13px; font-weight: 700; color: var(--color-on-surface); letter-spacing: .01em; text-transform: uppercase; letter-spacing: .06em; color: var(--color-muted); } .app-card-body { padding: 16px; } /* Stat summary cards */ .stat-row { display: flex; gap: 10px; margin-bottom: 12px; } .stat-card { flex: 1; background: var(--color-surface); border-radius: var(--r-lg); padding: 14px 16px; box-shadow: var(--shadow-sm); } .stat-label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--color-muted); margin-bottom: 4px; } .stat-value { font-size: 22px; font-weight: 800; color: var(--color-on-surface); letter-spacing: -.02em; line-height: 1.1; } .stat-card.stat-primary { background: var(--color-primary); } .stat-card.stat-primary .stat-label, .stat-card.stat-primary .stat-value { color: #fff; } .stat-card.stat-secondary { background: var(--color-secondary); } .stat-card.stat-secondary .stat-label, .stat-card.stat-secondary .stat-value { color: #fff; } .stat-card.stat-danger { background: var(--color-danger); } .stat-card.stat-danger .stat-label, .stat-card.stat-danger .stat-value { color: #fff; } .stat-card.stat-success { background: var(--color-success); } .stat-card.stat-success .stat-label, .stat-card.stat-success .stat-value { color: #fff; } /* ----------------------------------------------------------------- MEMBER HERO CARD (profile banner) ----------------------------------------------------------------- */ .member-hero { background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark)); border-radius: var(--r-xl); padding: 20px 20px 24px; color: #fff; margin-bottom: 12px; position: relative; overflow: hidden; } .member-hero::before { content: ''; position: absolute; top: -50px; right: -40px; width: 160px; height: 160px; border-radius: 50%; background: rgba(255,255,255,.06); pointer-events: none; } .member-hero::after { content: ''; position: absolute; bottom: -40px; left: -30px; width: 120px; height: 120px; border-radius: 50%; background: rgba(255,255,255,.04); pointer-events: none; } .member-hero-top { display: flex; align-items: center; gap: 16px; position: relative; z-index: 1; } .member-avatar-xl { width: 58px; height: 58px; border-radius: var(--r-full); background: rgba(255,255,255,.2); border: 2.5px solid rgba(255,255,255,.45); display: flex; align-items: center; justify-content: center; font-size: 22px; font-weight: 800; color: #fff; flex-shrink: 0; } .member-hero-name { font-size: 18px; font-weight: 700; letter-spacing: -.01em; margin-bottom: 2px; } .member-hero-code { font-size: 12px; opacity: .8; display: flex; align-items: center; gap: 4px; } /* Quick action grid */ .quick-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 12px; } .quick-card { background: var(--color-surface); border-radius: var(--r-lg); padding: 16px 14px; box-shadow: var(--shadow-sm); text-decoration: none; color: var(--color-on-surface); display: flex; flex-direction: column; gap: 10px; transition: transform .18s, box-shadow .18s; -webkit-tap-highlight-color: transparent; } .quick-card:hover, .quick-card:active { transform: translateY(-2px); box-shadow: var(--shadow-md); color: var(--color-on-surface); } .quick-icon { width: 42px; height: 42px; border-radius: var(--r-md); display: flex; align-items: center; justify-content: center; font-size: 19px; } .qi-blue { background: rgba(21,101,192,.1); color: var(--color-primary); } .qi-cyan { background: rgba(0,172,193,.1); color: var(--color-secondary); } .qi-green { background: rgba(5,150,105,.1); color: var(--color-success); } .qi-orange { background: rgba(217,119,6,.1); color: var(--color-warning); } .quick-label { font-size: 13px; font-weight: 600; letter-spacing: .01em; } /* ----------------------------------------------------------------- FORM ELEMENTS ----------------------------------------------------------------- */ .form-group-app { margin-bottom: 10px; } .form-label-app { display: block; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--color-muted); margin-bottom: 6px; } .form-control-app { display: block; width: 100%; padding: 10px 14px; font-size: 14px; font-family: var(--font); color: var(--color-on-surface); background: var(--color-bg); border: 1.5px solid var(--color-border); border-radius: var(--r-md); outline: none; transition: all .2s; -webkit-appearance: none; appearance: none; line-height: 1.4; } .form-control-app:focus { border-color: var(--color-primary); background: var(--color-surface); box-shadow: 0 0 0 3px rgba(21,101,192,.1); } .form-control-app[readonly], .form-control-app:read-only { background: var(--color-divider); color: var(--color-muted); cursor: default; } .form-control-app::placeholder { color: #B5BEC9; } .input-icon-wrap { position: relative; } .input-icon-wrap .icon-left { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); font-size: 17px; color: var(--color-muted); pointer-events: none; } .input-icon-wrap .icon-left ~ .form-control-app { padding-left: 42px; } .input-icon-wrap .icon-right { position: absolute; right: 13px; top: 50%; transform: translateY(-50%); font-size: 17px; color: var(--color-muted); cursor: pointer; } .input-icon-wrap .icon-right ~ .form-control-app { padding-right: 42px; } /* Override Bootstrap form controls to match our style */ .form-control, .form-select { border-radius: var(--r-md) !important; border-color: var(--color-border) !important; background: var(--color-bg) !important; font-size: 15px !important; padding: 12px 14px !important; height: auto !important; color: var(--color-on-surface) !important; transition: all .2s !important; box-shadow: none !important; } .form-control:focus, .form-select:focus { border-color: var(--color-primary) !important; background: var(--color-surface) !important; box-shadow: 0 0 0 3px rgba(21,101,192,.1) !important; } /* ----------------------------------------------------------------- BUTTONS ----------------------------------------------------------------- */ .btn-app { display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 14px 20px; border-radius: var(--r-md); font-size: 15px; font-weight: 600; font-family: var(--font); border: none; cursor: pointer; text-decoration: none; transition: all .18s; letter-spacing: .01em; user-select: none; -webkit-tap-highlight-color: transparent; line-height: 1; } .btn-app:active { transform: scale(.97); } .btn-app.full { width: 100%; } .btn-app.btn-sm { padding: 9px 14px; font-size: 13px; border-radius: var(--r-sm); } .btn-app.btn-lg { padding: 16px 24px; font-size: 16px; border-radius: var(--r-lg); } .btn-primary-app { background: var(--color-primary); color: #fff; box-shadow: 0 4px 14px rgba(21,101,192,.3); } .btn-primary-app:hover { background: var(--color-primary-dark); color: #fff; } .btn-secondary-app { background: var(--color-secondary); color: #fff; box-shadow: 0 4px 14px rgba(0,172,193,.25); } .btn-secondary-app:hover { background: var(--color-secondary-dark); color: #fff; } .btn-success-app { background: var(--color-success); color: #fff; box-shadow: 0 4px 14px rgba(5,150,105,.25); } .btn-danger-app { background: var(--color-danger); color: #fff; box-shadow: 0 4px 14px rgba(220,38,38,.2); } .btn-outline-app { background: transparent; color: var(--color-primary); border: 2px solid var(--color-primary); box-shadow: none; } .btn-outline-app:hover { background: var(--color-primary); color: #fff; } .btn-ghost-app { background: var(--color-divider); color: var(--color-on-surface); box-shadow: none; } /* Override Bootstrap btn-primary */ .btn-primary { background-color: var(--color-primary) !important; border-color: var(--color-primary) !important; } .btn-primary:hover, .btn-primary:active, .btn-primary:focus { background-color: var(--color-primary-dark) !important; border-color: var(--color-primary-dark) !important; } /* ----------------------------------------------------------------- ALERTS ----------------------------------------------------------------- */ .alert-app { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border-radius: var(--r-md); font-size: 13px; font-weight: 500; margin-bottom: 12px; border: none; } .alert-app i { font-size: 16px; flex-shrink: 0; margin-top: 1px; } .alert-app.success { background: var(--color-success-bg); color: var(--color-success); } .alert-app.danger { background: var(--color-danger-bg); color: var(--color-danger); } .alert-app.warning { background: var(--color-warning-bg); color: var(--color-warning); } .alert-app.info { background: var(--color-info-bg); color: var(--color-info); } /* ----------------------------------------------------------------- LIST ITEMS ----------------------------------------------------------------- */ .list-item { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--color-divider); color: var(--color-on-surface); text-decoration: none; transition: background .12s; cursor: pointer; } .list-item:last-child { border-bottom: none; } .list-item:hover, .list-item:active { background: var(--color-divider); color: var(--color-on-surface); } .list-icon { width: 40px; height: 40px; border-radius: var(--r-md); background: var(--color-bg); display: flex; align-items: center; justify-content: center; font-size: 18px; color: var(--color-primary); flex-shrink: 0; } .list-content { flex: 1; min-width: 0; } .list-title { font-size: 14px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .list-sub { font-size: 12px; color: var(--color-muted); margin-top: 1px; } .list-action { flex-shrink: 0; } /* Transaction list rows */ .tx-item { display: flex; align-items: flex-start; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--color-divider); } .tx-item:last-child { border-bottom: none; } .tx-indicator { width: 8px; height: 8px; border-radius: 50%; margin-top: 5px; flex-shrink: 0; } .tx-indicator.debit { background: var(--color-danger); } .tx-indicator.credit { background: var(--color-success); } .tx-body { flex: 1; min-width: 0; } .tx-desc { font-size: 13px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .tx-date { font-size: 11px; color: var(--color-muted); } .tx-amounts { text-align: right; flex-shrink: 0; } .tx-main { font-size: 14px; font-weight: 700; } .tx-main.debit { color: var(--color-danger); } .tx-main.credit { color: var(--color-success); } .tx-bal { font-size: 11px; color: var(--color-muted); } /* ----------------------------------------------------------------- PIN DISPLAY ----------------------------------------------------------------- */ .pin-card { background: linear-gradient(135deg, var(--color-secondary), var(--color-secondary-dark)); border-radius: var(--r-xl); padding: 24px 20px; text-align: center; color: #fff; margin: 12px 0; } .pin-label { font-size: 11px; text-transform: uppercase; letter-spacing: .1em; opacity: .85; margin-bottom: 10px; } .pin-number { font-size: 48px; font-weight: 800; letter-spacing: .3em; font-variant-numeric: tabular-nums; line-height: 1; margin-bottom: 10px; } .pin-expiry { font-size: 12px; opacity: .75; } /* ----------------------------------------------------------------- LOADING / EMPTY STATES ----------------------------------------------------------------- */ .state-box { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 48px 24px; text-align: center; color: var(--color-muted); gap: 12px; } .state-box i { font-size: 44px; opacity: .35; } .state-box p { font-size: 14px; margin: 0; } .spinner-app { width: 34px; height: 34px; border: 3px solid var(--color-border); border-top-color: var(--color-primary); border-radius: 50%; animation: spin .65s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } /* ----------------------------------------------------------------- TABLE (scrollable wrapper for statement table) ----------------------------------------------------------------- */ .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: var(--r-lg); background: var(--color-surface); box-shadow: var(--shadow-sm); } .table-wrap table { min-width: 440px; margin: 0; font-size: 13px; } .table-wrap .table th { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; } /* ----------------------------------------------------------------- ACCOUNT MENU (offcanvas) ----------------------------------------------------------------- */ .acct-item { display: flex; align-items: center; gap: 14px; padding: 16px 20px; border-bottom: 1px solid var(--color-divider); text-decoration: none; color: var(--color-on-surface); font-size: 15px; font-weight: 500; cursor: pointer; transition: background .12s; background: none; border-left: none; border-right: none; border-top: none; width: 100%; font-family: var(--font); text-align: left; } .acct-item:last-child { border-bottom: none; } .acct-item:hover, .acct-item:active { background: var(--color-divider); color: var(--color-on-surface); } .acct-item .ai-icon { width: 40px; height: 40px; border-radius: var(--r-md); background: var(--color-bg); display: flex; align-items: center; justify-content: center; font-size: 18px; color: var(--color-primary); flex-shrink: 0; } .acct-item.danger .ai-icon { color: var(--color-danger); } .acct-item.danger .ai-label { color: var(--color-danger); } /* ----------------------------------------------------------------- LOGIN PAGE ----------------------------------------------------------------- */ .login-page { min-height: 100dvh; min-height: 100vh; display: flex; flex-direction: column; background: var(--color-bg); } /* ---- LEFT HERO PANEL ---- */ .login-hero { background: var(--color-primary-dark); position: relative; overflow: hidden; flex-shrink: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 18px 24px 20px; text-align: center; } /* Circuit / grid overlay */ .login-hero::before { content: ''; position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px); background-size: 40px 40px; pointer-events: none; } /* Orbital rings */ .lh-orb-wrap { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); pointer-events: none; width: 0; height: 0; z-index: 0; } .lh-ring { position: absolute; border-radius: 50%; top: 0; left: 0; } .lh-ring-1 { width: 280px; height: 280px; margin-left: -140px; margin-top: -140px; border: 1px solid rgba(255,255,255,.10); animation: ringPulse1 4s ease-in-out infinite; } .lh-ring-2 { width: 460px; height: 460px; margin-left: -230px; margin-top: -230px; border: 1px solid rgba(255,255,255,.07); animation: ringPulse2 6s ease-in-out infinite; } .lh-ring-3 { width: 640px; height: 640px; margin-left: -320px; margin-top: -320px; border: 1px solid rgba(255,255,255,.04); animation: ringPulse1 8s ease-in-out infinite reverse; } @keyframes ringPulse1 { 0%, 100% { opacity: .5; transform: scale(1); } 50% { opacity: 1; transform: scale(1.03); } } @keyframes ringPulse2 { 0%, 100% { opacity: .3; transform: scale(1); } 50% { opacity: .8; transform: scale(1.02); } } /* Orbital dots */ .lh-dot { position: absolute; border-radius: 50%; top: 0; left: 0; } /* logo-orange dot — ring 1, fast */ .lh-dot-a { width: 13px; height: 13px; background: #E87722; margin: -6.5px 0 0 -6.5px; box-shadow: 0 0 16px 5px rgba(232,119,34,.75); animation: lhOrbit1 9s linear infinite; } /* logo-gray dot — ring 2, slow */ .lh-dot-b { width: 8px; height: 8px; background: #A8B9C5; margin: -4px 0 0 -4px; box-shadow: 0 0 10px 3px rgba(168,185,197,.65); animation: lhOrbit2 22s linear infinite; } /* logo-blue dot — ring inner, medium */ .lh-dot-c { width: 11px; height: 11px; background: #094f70; margin: -5.5px 0 0 -5.5px; box-shadow: 0 0 14px 4px rgba(30,96,128,.8); animation: lhOrbit3 7s linear infinite; } /* logo-orange dot — ring 2, opposite direction */ .lh-dot-d { width: 9px; height: 9px; background: #E87722; margin: -4.5px 0 0 -4.5px; box-shadow: 0 0 12px 3px rgba(232,119,34,.65); animation: lhOrbit4 16s linear infinite reverse; } /* Faint orange trail on dot-a */ .lh-dot-a::after { content: ''; position: absolute; top: 50%; left: -22px; transform: translateY(-50%); width: 22px; height: 2px; background: linear-gradient(to right, transparent, #E87722); border-radius: 2px; opacity: .55; } /* Faint blue trail on dot-c */ .lh-dot-c::after { content: ''; position: absolute; top: 50%; left: -16px; transform: translateY(-50%); width: 16px; height: 2px; background: linear-gradient(to right, transparent, #094f70); border-radius: 2px; opacity: .5; } @keyframes lhOrbit1 { from { transform: rotate(45deg) translateX(140px) rotate(-45deg); } to { transform: rotate(405deg) translateX(140px) rotate(-405deg); } } @keyframes lhOrbit2 { from { transform: rotate(200deg) translateX(230px) rotate(-200deg); } to { transform: rotate(560deg) translateX(230px) rotate(-560deg); } } @keyframes lhOrbit3 { from { transform: rotate(300deg) translateX(100px) rotate(-300deg); } to { transform: rotate(660deg) translateX(100px) rotate(-660deg); } } @keyframes lhOrbit4 { from { transform: rotate(80deg) translateX(230px) rotate(-80deg); } to { transform: rotate(440deg) translateX(230px) rotate(-440deg); } } /* Scan line sweeping down the hero */ .lh-scan { position: absolute; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, transparent, var(--color-primary-light), var(--color-secondary), transparent); animation: scanLine 4s linear infinite; pointer-events: none; z-index: 0; opacity: .5; } @keyframes scanLine { 0% { top: -2px; opacity: 0; } 5% { opacity: 1; } 95% { opacity: .6; } 100% { top: 100%; opacity: 0; } } /* ---- CSS MOSAIC GRID LOGO ---- */ .ms-grid { display: grid; grid-template-columns: repeat(4, 1fr); position: relative; z-index: 1; flex-shrink: 0; } .ms-grid > div { aspect-ratio: 1; border-radius: 28%; } /* Sizes */ .ms-lg { width: 200px; gap: 9px; } .ms-sm { display: none; width: 72px; gap: 4px; margin-bottom: 10px; animation: loginFadeUp .6s ease both; } /* On dark background (left panel) — exact logo colors */ .ms-on-dark .ms-b { background: #094f70; } .ms-on-dark .ms-o { background: #E87722; box-shadow: 0 3px 12px rgba(232,119,34,.55); } .ms-on-dark .ms-g { background: #A8B9C5; } .ms-on-dark .ms-e { background: transparent; } /* On light background (right panel) — exact logo colors */ .ms-on-light .ms-b { background: #094f70; } .ms-on-light .ms-o { background: #E87722; } .ms-on-light .ms-g { background: #A8B9C5; } .ms-on-light .ms-e { background: transparent; } /* Staggered entrance for large mosaic */ .ms-lg > div { opacity: 0; animation: sqIn .45s ease forwards; } .ms-lg > div:nth-child(1) { animation-delay: .05s; } .ms-lg > div:nth-child(2) { animation-delay: .10s; } .ms-lg > div:nth-child(3) { animation-delay: .15s; } .ms-lg > div:nth-child(4) { animation-delay: .20s; } .ms-lg > div:nth-child(5) { animation-delay: .25s; } .ms-lg > div:nth-child(6) { animation-delay: .30s; } .ms-lg > div:nth-child(7) { animation-delay: .35s; } .ms-lg > div:nth-child(8) { animation-delay: .40s; } .ms-lg > div:nth-child(9) { animation-delay: .45s; } .ms-lg > div:nth-child(10) { animation-delay: .50s; } .ms-lg > div:nth-child(11) { animation-delay: .55s; } .ms-lg > div:nth-child(12) { animation-delay: .60s; } .ms-lg > div:nth-child(13) { animation-delay: .65s; } .ms-lg > div:nth-child(14) { animation-delay: .70s; } .ms-lg > div:nth-child(15) { animation-delay: .75s; } .ms-lg > div:nth-child(16) { animation-delay: .80s; } .ms-lg > div:nth-child(17) { animation-delay: .85s; } .ms-lg > div:nth-child(18) { animation-delay: .90s; } .ms-lg > div:nth-child(19) { animation-delay: .95s; } .ms-lg > div:nth-child(20) { animation-delay: 1.00s; } .ms-lg .ms-e { animation: none; opacity: 1; } /* Secondary (orange) squares pulse */ .ms-lg .ms-o { animation: sqIn .45s ease forwards, msPulse 3s ease-in-out infinite; } @keyframes msPulse { 0%, 100% { box-shadow: 0 3px 12px rgba(232,119,34,.55); } 50% { box-shadow: 0 4px 22px rgba(232,119,34,.85); } } @keyframes sqIn { from { opacity: 0; transform: scale(.55) rotate(-10deg); } to { opacity: 1; transform: scale(1) rotate(0deg); } } /* Left panel inner layout */ .lh-inner { display: flex; flex-direction: column; align-items: center; gap: 24px; position: relative; z-index: 1; width: 100%; } .lh-left-col { display: flex; flex-direction: column; align-items: center; gap: 16px; } /* Logo image wrapper */ .lh-logo-wrap { background: #fff; border-radius: 14px; padding: 8px; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 24px rgba(0,0,0,.18); animation: loginFadeUp .5s .2s ease both; opacity: 0; animation-fill-mode: both; } .lh-logo-img { width: 50px; height: 50px; object-fit: contain; display: block; } /* Small variant for right panel (hidden on mobile, shown on desktop) */ .lh-logo-sm { display: none; padding: 8px; border-radius: 12px; margin-bottom: 10px; } .lh-logo-sm .lh-logo-img { width: 60px; height: 60px; } .lh-brand-name { font-size: 15px; font-weight: 700; color: rgba(255,255,255,.85); letter-spacing: .03em; text-align: center; animation: loginFadeUp .5s .9s ease both; opacity: 0; animation-fill-mode: both; } .lh-brand-d { color: var(--color-secondary); } /* Feature pills — hidden on mobile, shown on desktop */ .lh-features { display: none; flex-direction: column; gap: 8px; position: relative; z-index: 1; width: 100%; max-width: 280px; } .lhf-item { display: flex; align-items: center; gap: 10px; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.10); border-radius: 10px; padding: 10px 14px; font-size: 13px; font-weight: 500; color: rgba(255,255,255,.9); text-align: left; backdrop-filter: blur(4px); } .lhf-item i { font-size: 15px; color: var(--color-secondary); flex-shrink: 0; } /* ---- RIGHT PANEL ---- */ .login-right-panel { flex: 1; display: flex; flex-direction: column; align-items: center; background: var(--color-bg); } .login-form-area { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 16px 16px 8px; width: 100%; max-width: 480px; } /* Logo */ .login-logo { width: 72px; height: 72px; object-fit: contain; margin-bottom: 8px; } .login-portal-title { display: none; font-size: 13px; font-weight: 800; color: var(--color-primary-dark); text-transform: uppercase; letter-spacing: .12em; margin-bottom: 20px; text-align: center; } /* Form card */ .login-form-card { background: var(--color-surface); border-radius: 16px; box-shadow: var(--shadow-lg); border: 1px solid var(--color-border); width: 100%; overflow: hidden; } .login-welcome-bar { background: var(--color-primary-dark); color: var(--color-on-primary); font-size: 16px; font-weight: 600; text-align: center; padding: 12px 24px; letter-spacing: .01em; } .login-form-body { padding: 14px 16px 14px; } .login-form-title { display: none; /* replaced by login-welcome-bar */ } .login-footer { background: transparent; padding: 12px 24px; padding-bottom: max(20px, env(safe-area-inset-bottom)); text-align: center; font-size: 11px; color: var(--color-muted); margin-top: auto; width: 100%; max-width: 480px; } /* ----------------------------------------------------------------- PAYMENT REDIRECT PAGE ----------------------------------------------------------------- */ .pay-redirect { min-height: 100dvh; min-height: 100vh; display: flex; align-items: center; justify-content: center; background: var(--color-bg); padding: 24px; } .pay-redirect-card { background: var(--color-surface); border-radius: var(--r-xl); padding: 40px 28px; box-shadow: var(--shadow-lg); max-width: 340px; width: 100%; text-align: center; } /* ----------------------------------------------------------------- ERROR PAGES ----------------------------------------------------------------- */ .error-page { min-height: 100dvh; min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 24px; text-align: center; background: var(--color-bg); max-width: var(--max-content-width); margin: 0 auto; } .error-code { font-size: 80px; font-weight: 900; letter-spacing: -.04em; color: var(--color-primary); opacity: .2; line-height: 1; margin-bottom: 8px; } .error-title { font-size: 22px; font-weight: 700; color: var(--color-on-surface); margin-bottom: 8px; } .error-sub { font-size: 14px; color: var(--color-muted); margin-bottom: 28px; } /* ----------------------------------------------------------------- MISC UTILITIES ----------------------------------------------------------------- */ .divider { height: 1px; background: var(--color-divider); margin: 8px 0; } .gap-app { gap: 10px; } .text-muted-app { color: var(--color-muted) !important; } .text-primary-app { color: var(--color-primary) !important; } .fw-700 { font-weight: 700 !important; } ::-webkit-scrollbar { width: 4px; height: 4px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--color-border); border-radius: 4px; } /* ================================================================= DESKTOP / LAPTOP — Consumer Website Layout (≥ 992px) ----------------------------------------------------------------- Below this breakpoint = mobile app. Above = full consumer website with top navbar, wide content. ================================================================= */ /* ----- Desktop Navbar (hidden on mobile) ----- */ .desktop-nav { display: none; position: fixed; top: 0; left: 0; right: 0; height: 64px; background: var(--color-primary); z-index: 900; box-shadow: 0 2px 12px rgba(0,0,0,.15); } .desktop-nav-inner { max-width: 1280px; margin: 0 auto; padding: 0 28px; height: 100%; display: flex; align-items: center; gap: 8px; } .desktop-nav-brand { display: flex; align-items: center; gap: 10px; color: #fff; text-decoration: none; font-size: 17px; font-weight: 700; letter-spacing: .01em; margin-right: 24px; flex-shrink: 0; white-space: nowrap; } .desktop-nav-brand:hover { color: rgba(255,255,255,.9); } .desktop-nav-brand img { width: 36px; height: 36px; border-radius: var(--r-sm); background: rgba(255,255,255,.15); padding: 3px; object-fit: contain; } .desktop-nav-links { display: flex; align-items: center; gap: 2px; flex: 1; } .desktop-nav-link { display: flex; align-items: center; gap: 6px; color: rgba(255,255,255,.8); padding: 8px 14px; border-radius: var(--r-sm); font-size: 14px; font-weight: 500; text-decoration: none; transition: all .18s; white-space: nowrap; } .desktop-nav-link:hover { background: rgba(255,255,255,.12); color: #fff; } .desktop-nav-link.active { background: rgba(255,255,255,.2); color: #fff; font-weight: 600; } .desktop-nav-user { display: flex; align-items: center; gap: 14px; flex-shrink: 0; margin-left: 16px; } .desktop-nav-member { text-align: right; line-height: 1.3; } .desktop-nav-member .greeting { font-size: 11px; color: rgba(255,255,255,.65); } .desktop-nav-member .name { font-size: 14px; font-weight: 600; color: #fff; } .desktop-avatar { width: 38px; height: 38px; border-radius: var(--r-full); background: rgba(255,255,255,.2); border: 2px solid rgba(255,255,255,.35); color: #fff; font-weight: 700; font-size: 14px; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background .18s; } .desktop-avatar:hover, .desktop-avatar:focus { background: rgba(255,255,255,.3); color: #fff; } /* Dropdown menu overrides */ .desktop-dropdown-menu { border: none !important; box-shadow: var(--shadow-lg) !important; border-radius: var(--r-md) !important; min-width: 190px !important; padding: 6px !important; margin-top: 8px !important; } .desktop-dropdown-menu .dropdown-item { border-radius: var(--r-sm); font-size: 14px; padding: 9px 14px; font-weight: 500; } .desktop-dropdown-menu .dropdown-item:hover { background: var(--color-divider); } .desktop-dropdown-menu .dropdown-item.text-danger:hover { background: var(--color-danger-bg); } /* Page container (constrains width on desktop) */ .page-container { } /* ================================================================= DESKTOP OVERRIDES ================================================================= */ @media (min-width: 992px) { /* Expand app wrapper to full width */ .app-wrapper { max-width: 100%; box-shadow: none; background: var(--color-bg); } /* Hide all mobile app chrome */ .app-header, .app-bottomnav, .pwa-install-banner { display: none !important; } /* Show desktop navbar */ .desktop-nav { display: block; } /* Content area: below fixed desktop nav, full width */ .app-content { padding-top: calc(64px + 32px); padding-bottom: 56px; padding-left: 0; padding-right: 0; } /* Center & constrain page content */ .page-container { max-width: 1280px; margin: 0 auto; padding: 0 28px; } /* Page heading */ .page-heading { font-size: 26px; margin: 4px 0 24px; } /* Cards */ .app-card { border-radius: var(--r-md); margin-bottom: 16px; } .member-hero { border-radius: var(--r-lg); padding: 28px 32px; } .member-avatar-xl { width: 72px; height: 72px; font-size: 28px; } .member-hero-name { font-size: 22px; } /* Quick action grid: 4 columns */ .quick-grid { grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 20px; } /* Stats */ .stat-row { gap: 16px; margin-bottom: 20px; } .stat-card { padding: 20px 24px; } .stat-value { font-size: 28px; } /* Forms: 2-col inside cards on desktop */ .form-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } /* PIN card */ .pin-card { border-radius: var(--r-xl); } .pin-number { font-size: 56px; } /* Statement: widen date row */ .statement-date-row { display: flex; gap: 16px; align-items: flex-end; } .statement-date-row > * { flex: 1; } .statement-date-row .generate-btn { flex: 0 0 auto; } /* List items: slightly more padding */ .list-item { padding: 16px 20px; } /* ---- LOGIN PAGE on desktop ---- */ .login-page { flex-direction: row; align-items: stretch; max-width: 100%; min-height: 100vh; } /* Left panel: dark navy with orbital & mosaic */ .login-hero { flex: 1.1; padding: 60px 40px; flex-direction: column; align-items: center; justify-content: center; } /* Left panel: mosaic left + features right (row layout) */ .lh-inner { flex-direction: row; align-items: center; justify-content: center; gap: 40px; } .lh-left-col { align-items: flex-start; } .lh-logo-img { width: 140px; height: 140px; } .lh-brand-block { margin-bottom: 32px; } .lh-brand-logo { width: 100px; height: 100px; } .lh-brand-title { font-size: 24px; } .lh-brand-name { text-align: left; font-size: 14px; } .lh-features { display: flex; max-width: 240px; } .lhf-item { font-size: 13px; } /* Right panel: fills all remaining space */ .login-right-panel { flex: 1; box-shadow: -8px 0 40px rgba(0,0,0,.12); } .login-form-area { padding: 48px 56px 24px; max-width: 600px; justify-content: center; } .login-welcome-bar { font-size: 18px; padding: 18px 24px; } .login-form-body { padding: 24px 24px 20px; } .form-group-app { margin-bottom: 14px; } .form-control-app { padding: 13px 14px; font-size: 15px; } .lh-logo-wrap { border-radius: 18px; padding: 12px; } .login-form-card { max-width: 520px; width: 100%; } .lh-logo-sm { display: flex; } .login-portal-title { display: block; font-size: 14px; } .login-footer { padding: 12px 56px 20px; max-width: 600px; } /* ---- ERROR PAGES on desktop ---- */ .error-code { font-size: 120px; } .error-title { font-size: 28px; } /* Payment redirect */ .pay-redirect-card { max-width: 400px; padding: 48px 40px; } } /* Extra large screens */ @media (min-width: 1400px) { .desktop-nav-inner, .page-container { max-width: 1440px; } } /* Login hero feature list (desktop) */ .login-hero-features { display: none; } @media (min-width: 992px) { .login-hero-features { display: flex; flex-direction: column; gap: 12px; margin-top: 36px; align-self: flex-start; width: 100%; max-width: 340px; } .lhf-item { display: flex; align-items: center; gap: 10px; color: rgba(255,255,255,.9); font-size: 14px; font-weight: 500; } .lhf-item i { font-size: 16px; color: rgba(255,255,255,.7); flex-shrink: 0; } } /* ----------------------------------------------------------------- LOGIN PAGE ANIMATIONS ----------------------------------------------------------------- */ @keyframes loginFadeUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } @keyframes loginFeatureIn { from { opacity: 0; transform: translateX(-16px); } to { opacity: 1; transform: translateX(0); } } @keyframes loginLogoFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } } .login-logo { animation: loginLogoFloat 4s ease-in-out infinite, loginFadeUp .6s ease both; } .login-portal-title { animation: loginFadeUp .5s .1s ease both; } .login-form-card { animation: loginFadeUp .6s .15s ease both; } .lhf-item:nth-child(1) { animation: loginFeatureIn .55s .80s ease both; } .lhf-item:nth-child(2) { animation: loginFeatureIn .55s .95s ease both; } .lhf-item:nth-child(3) { animation: loginFeatureIn .55s 1.10s ease both; } .lhf-item:nth-child(4) { animation: loginFeatureIn .55s 1.25s ease both; }