/* ============================================================ FundCore Bank — Frontend Stylesheet Color palette: Navy · Gold · White · Slate ============================================================ */ :root { --fc-primary: #0D1B2A; --fc-primary-light: #1A3A5C; --fc-primary-mid: #2A5298; --fc-secondary: #C8A84B; --fc-secondary-light: #E0BC6A; --fc-accent: #2E86AB; --fc-accent-light: #48A9D0; --fc-bg-light: #F4F6F9; --fc-bg-lighter: #FAFBFD; --fc-white: #FFFFFF; --fc-text-dark: #0D1B2A; --fc-text-medium: #3D4F65; --fc-text-light: #6B7A99; --fc-border: #E2E8F4; --fc-success: #1E8449; --fc-warning: #D4AC0D; --fc-danger: #C0392B; --fc-font-heading: 'Playfair Display', Georgia, 'Times New Roman', serif; --fc-font-body: 'Inter', 'Segoe UI', system-ui, sans-serif; --fc-radius-sm: 6px; --fc-radius-md: 12px; --fc-radius-lg: 20px; --fc-radius-xl: 32px; --fc-shadow-sm: 0 2px 8px rgba(13,27,42,.08); --fc-shadow-md: 0 8px 28px rgba(13,27,42,.12); --fc-shadow-lg: 0 20px 56px rgba(13,27,42,.18); --fc-shadow-gold: 0 8px 28px rgba(200,168,75,.25); --fc-transition: all .3s cubic-bezier(.4,0,.2,1); --fc-section-py: 96px; } /* ============================================================ DARK MODE VARIABLES Applied when is set. ============================================================ */ html[data-fc-theme="dark"] { --fc-bg-light: #0E1624; --fc-bg-lighter: #131C2D; /* --fc-white is intentionally NOT overridden: it's used as text colour on dark backgrounds (balance card, header). Card surfaces are handled explicitly below. */ --fc-text-dark: #E2EAF6; --fc-text-medium: #9BADC6; --fc-text-light: #6B809E; --fc-border: rgba(255,255,255,.09); --fc-shadow-sm: 0 2px 8px rgba(0,0,0,.40); --fc-shadow-md: 0 8px 28px rgba(0,0,0,.55); --fc-shadow-lg: 0 20px 56px rgba(0,0,0,.70); } html[data-fc-theme="dark"] body.fundcore-page { background: var(--fc-bg-light); } /* ---- Card / surface backgrounds ---- */ html[data-fc-theme="dark"] .fc-dash-account-list, html[data-fc-theme="dark"] .fc-dash-stat-card, html[data-fc-theme="dark"] .fc-dash-action, html[data-fc-theme="dark"] .fc-dash-txn-table, html[data-fc-theme="dark"] .fc-dash-empty, html[data-fc-theme="dark"] .fc-dash-txn-modal, html[data-fc-theme="dark"] .fc-dash-txn-modal__header, html[data-fc-theme="dark"] .fc-dash-profile { background: #192338; } html[data-fc-theme="dark"] .fc-dash-txn-table tbody tr:hover { background: #1e2d4a; } /* ---- Headings & labels that use --fc-primary as text colour ---- */ html[data-fc-theme="dark"] .fc-dash-section-title, html[data-fc-theme="dark"] .fc-dash-account-row__type, html[data-fc-theme="dark"] .fc-dash-account-row__balance, html[data-fc-theme="dark"] .fc-dash-stat-card__value, html[data-fc-theme="dark"] .fc-dash-action__label, html[data-fc-theme="dark"] .fc-dash-empty h4 { color: var(--fc-text-dark); } html[data-fc-theme="dark"] .fc-dash-view-all:hover { color: var(--fc-text-dark); } html[data-fc-theme="dark"] .fc-dash-txn-modal__title, html[data-fc-theme="dark"] .fc-dash-txn-modal__value { color: var(--fc-text-dark); } /* ---- Theme Toggle Button (in dashboard header) ---- */ .fc-dash-theme-toggle { width: 36px; height: 36px; border-radius: 50%; border: 1.5px solid rgba(255,255,255,.2); background: rgba(255,255,255,.08); color: rgba(255,255,255,.8); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background .2s, border-color .2s, color .2s, transform .2s; flex-shrink: 0; padding: 0; } .fc-dash-theme-toggle:hover { background: rgba(255,255,255,.18); border-color: rgba(255,255,255,.45); color: #fff; transform: rotate(18deg); } .fc-theme-icon--sun { display: none; } .fc-theme-icon--moon { display: block; } html[data-fc-theme="dark"] .fc-theme-icon--sun { display: block; } html[data-fc-theme="dark"] .fc-theme-icon--moon { display: none; } /* ---- Support page card surfaces ---- */ html[data-fc-theme="dark"] .fc-support-form-card, html[data-fc-theme="dark"] .fc-support-info-card, html[data-fc-theme="dark"] .fc-support-faq-card, html[data-fc-theme="dark"] .fc-support-hours-card { background: #192338; } /* ---- Support alert (fraud/emergency banner) ---- */ html[data-fc-theme="dark"] .fc-support-alert { background: rgba(239,68,68,.10); border-color: rgba(239,68,68,.35); } html[data-fc-theme="dark"] .fc-support-alert__body strong { color: #fca5a5; } html[data-fc-theme="dark"] .fc-support-alert__steps li { color: #fca5a5; } html[data-fc-theme="dark"] .fc-support-alert__steps a { color: #f87171; } /* ---- FAQ hover ---- */ html[data-fc-theme="dark"] .fc-faq-question:hover { background: rgba(255,255,255,.05); } /* ---- Notice (success / error) ---- */ html[data-fc-theme="dark"] .fc-support-notice--success { background: rgba(16,185,129,.12); color: #6ee7b7; border-color: rgba(16,185,129,.30); } html[data-fc-theme="dark"] .fc-support-notice--error { background: rgba(239,68,68,.12); color: #fca5a5; border-color: rgba(239,68,68,.30); } /* ---- Hours "Closed" badge ---- */ html[data-fc-theme="dark"] .fc-support-hours-badge--closed { background: rgba(239,68,68,.18); color: #fca5a5; } /* ============================================================ DARK MODE — HOME PAGE SECTIONS ============================================================ */ /* Section header headings use color:var(--fc-primary) which isn't remapped */ html[data-fc-theme="dark"] .fc-section-header h2, html[data-fc-theme="dark"] .fc-why__content h2 { color: var(--fc-text-dark); } /* Services */ html[data-fc-theme="dark"] .fc-service-card { background: #192338; } html[data-fc-theme="dark"] .fc-service-card h3 { color: var(--fc-text-dark); } html[data-fc-theme="dark"] .fc-service-card:hover { border-color: rgba(255,255,255,.08); } /* Why Choose Us */ html[data-fc-theme="dark"] .fc-why__badge { background: #192338; } html[data-fc-theme="dark"] .fc-why__badge strong { color: var(--fc-text-dark); } html[data-fc-theme="dark"] .fc-benefit-text strong { color: var(--fc-text-dark); } html[data-fc-theme="dark"] .fc-benefit-icon { background: rgba(255,255,255,.07); } /* Account cards (non-featured; featured card keeps its navy bg intentionally) */ html[data-fc-theme="dark"] .fc-account-card:not(.fc-account-card--featured) { background: #192338; } html[data-fc-theme="dark"] .fc-account-card:not(.fc-account-card--featured) h3 { color: var(--fc-text-dark); } html[data-fc-theme="dark"] .fc-account-card:not(.fc-account-card--featured):hover { border-color: rgba(255,255,255,.12); } /* Loan cards */ html[data-fc-theme="dark"] .fc-loan-card { background: #192338; } html[data-fc-theme="dark"] .fc-loan-card__body h3 { color: var(--fc-text-dark); } html[data-fc-theme="dark"] .fc-loan-card__meta-item strong { color: var(--fc-text-dark); } html[data-fc-theme="dark"] .fc-loan-card__meta { border-color: var(--fc-border); } /* Testimonial cards */ html[data-fc-theme="dark"] .fc-testimonial-card { background: #192338; } html[data-fc-theme="dark"] .fc-testimonial-card__author strong { color: var(--fc-text-dark); } /* News cards */ html[data-fc-theme="dark"] .fc-news-card { background: #192338; } html[data-fc-theme="dark"] .fc-news-card__body h3 { color: var(--fc-text-dark); } html[data-fc-theme="dark"] .fc-news-card__cat { background: rgba(255,255,255,.08); color: var(--fc-text-medium); } /* Dark-outline button: on dark card surfaces flip to a light outline */ html[data-fc-theme="dark"] .fc-btn-outline-dark { color: var(--fc-text-dark); border-color: rgba(255,255,255,.25); } html[data-fc-theme="dark"] .fc-btn-outline-dark:hover { background: rgba(255,255,255,.1); color: var(--fc-text-dark); border-color: rgba(255,255,255,.45); } /* Section backgrounds — explicit overrides for the three home sections */ html[data-fc-theme="dark"] .fc-why { background: var(--fc-bg-light); } html[data-fc-theme="dark"] #fc-loans { background: var(--fc-bg-lighter); } html[data-fc-theme="dark"] #fc-news { background: var(--fc-bg-light); } /* Section header subtext */ html[data-fc-theme="dark"] .fc-section-header p { color: var(--fc-text-medium); } /* Why FundCore Bank — body text */ html[data-fc-theme="dark"] .fc-why__content > p { color: var(--fc-text-medium); } html[data-fc-theme="dark"] .fc-benefit-text span { color: var(--fc-text-medium); } html[data-fc-theme="dark"] .fc-why__badge span { color: var(--fc-text-medium); } /* Loan cards — body text and meta labels */ html[data-fc-theme="dark"] .fc-loan-card__body p { color: var(--fc-text-medium); } html[data-fc-theme="dark"] .fc-loan-card__meta-item span { color: var(--fc-text-medium); } /* News cards — date, body text, and read-more link */ html[data-fc-theme="dark"] .fc-news-card__body p { color: var(--fc-text-medium); } html[data-fc-theme="dark"] .fc-news-card__date { color: var(--fc-text-medium); } html[data-fc-theme="dark"] .fc-news-card__link { color: var(--fc-accent-light); } html[data-fc-theme="dark"] .fc-news-card:hover .fc-news-card__link { color: var(--fc-secondary-light); } /* Sign-in modal */ html[data-fc-theme="dark"] .fc-modal { background: #192338; } html[data-fc-theme="dark"] .fc-modal__title, html[data-fc-theme="dark"] .fc-modal__logo-text { color: var(--fc-text-dark); } html[data-fc-theme="dark"] .fc-modal__logo-mark { background: rgba(255,255,255,.1); } html[data-fc-theme="dark"] .fc-modal__close { background: rgba(255,255,255,.07); color: var(--fc-text-medium); } html[data-fc-theme="dark"] .fc-modal__close:hover { background: rgba(255,255,255,.14); color: var(--fc-text-dark); } html[data-fc-theme="dark"] .fc-input { background: #131C2D; border-color: rgba(255,255,255,.12); color: var(--fc-text-dark); } html[data-fc-theme="dark"] .fc-input:focus { background: #192338; border-color: var(--fc-accent); box-shadow: 0 0 0 3px rgba(46,134,171,.2); } /* ---- Reset ---- */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } body.fundcore-page { font-family: var(--fc-font-body); color: var(--fc-text-dark); background: var(--fc-white); overflow-x: hidden; } img { max-width: 100%; display: block; } a { text-decoration: none; color: inherit; } /* ============================================================ LAYOUT HELPERS ============================================================ */ .fc-container { width: 100%; max-width: 1240px; margin: 0 auto; padding: 0 24px; } .fc-section { padding: var(--fc-section-py) 0; } .fc-section--light { background: var(--fc-bg-light); } .fc-section--lighter { background: var(--fc-bg-lighter); } .fc-section--dark { background: var(--fc-primary); } .fc-section-header { text-align: center; margin-bottom: 64px; } .fc-section-header .fc-eyebrow { display: inline-block; font-size: 12px; font-weight: 600; letter-spacing: 3px; text-transform: uppercase; color: var(--fc-secondary); margin-bottom: 16px; } .fc-section-header h2 { font-family: var(--fc-font-heading); font-size: clamp(28px, 4vw, 44px); font-weight: 700; color: var(--fc-primary); line-height: 1.2; margin-bottom: 20px; } .fc-section--dark .fc-section-header h2 { color: var(--fc-white); } .fc-section-header p { font-size: 17px; color: var(--fc-text-light); max-width: 640px; margin: 0 auto; line-height: 1.7; } .fc-section--dark .fc-section-header p { color: rgba(255,255,255,.65); } .fc-grid-3 { display: grid; grid-template-columns: repeat(3,1fr); gap: 28px; } .fc-grid-4 { display: grid; grid-template-columns: repeat(4,1fr); gap: 24px; } .fc-grid-2 { display: grid; grid-template-columns: repeat(2,1fr); gap: 48px; align-items: center; } /* ============================================================ BUTTONS ============================================================ */ .fc-btn { display: inline-flex; align-items: center; gap: 8px; padding: 14px 32px; border-radius: 50px; font-family: var(--fc-font-body); font-size: 15px; font-weight: 600; cursor: pointer; border: 2px solid transparent; transition: var(--fc-transition); white-space: nowrap; } .fc-btn-primary { background: var(--fc-secondary); color: var(--fc-primary); border-color: var(--fc-secondary); } .fc-btn-primary:hover { background: var(--fc-secondary-light); border-color: var(--fc-secondary-light); transform: translateY(-2px); box-shadow: var(--fc-shadow-gold); } .fc-btn-outline { background: transparent; color: var(--fc-white); border-color: rgba(255,255,255,.5); } .fc-btn-outline:hover { background: rgba(255,255,255,.1); border-color: var(--fc-white); } .fc-btn-outline-dark { background: transparent; color: var(--fc-primary); border-color: var(--fc-primary); } .fc-btn-outline-dark:hover { background: var(--fc-primary); color: var(--fc-white); } .fc-btn-sm { padding: 10px 24px; font-size: 13px; } .fc-btn-lg { padding: 18px 44px; font-size: 16px; } /* ============================================================ 1. HERO SECTION ============================================================ */ .fc-hero { position: relative; min-height: 100vh; display: flex; align-items: center; overflow: hidden; } .fc-hero__bg { position: absolute; top: -30%; left: 0; right: 0; bottom: 0; background-image: url('https://images.unsplash.com/photo-1486406146926-c627a92ad1ab?w=1920&q=85&auto=format&fit=crop'); background-size: cover; background-position: center 30%; transform: scale(1.05); transition: transform 8s ease; } .fc-hero__bg::after { content: ''; position: absolute; inset: 0; background: linear-gradient( 105deg, rgba(13,27,42,.88) 0%, rgba(26,58,92,.75) 50%, rgba(42,82,152,.45) 100% ); } .fc-hero__content { position: relative; z-index: 2; max-width: 720px; padding: 120px 0 80px; } .fc-hero__badge { display: inline-flex; align-items: center; gap: 8px; background: rgba(200,168,75,.15); border: 1px solid rgba(200,168,75,.4); border-radius: 50px; padding: 8px 20px; font-size: 13px; font-weight: 500; color: var(--fc-secondary); margin-bottom: 32px; backdrop-filter: blur(8px); animation: fc-fadeInUp .6s ease both; } .fc-hero__badge svg { width: 14px; height: 14px; flex-shrink: 0; } .fc-hero h1 { font-family: var(--fc-font-heading); font-size: clamp(38px, 5.5vw, 72px); font-weight: 700; color: var(--fc-white); line-height: 1.1; margin-bottom: 28px; animation: fc-fadeInUp .6s .15s ease both; } .fc-hero h1 span { color: var(--fc-secondary); } .fc-hero__sub { font-size: 18px; color: rgba(255,255,255,.75); line-height: 1.7; margin-bottom: 48px; max-width: 540px; animation: fc-fadeInUp .6s .3s ease both; } .fc-hero__actions { display: flex; gap: 16px; flex-wrap: wrap; animation: fc-fadeInUp .6s .45s ease both; } .fc-hero__trust { position: relative; z-index: 2; display: flex; align-items: center; gap: 12px; margin-top: 64px; color: rgba(255,255,255,.6); font-size: 13px; animation: fc-fadeInUp .6s .6s ease both; } .fc-hero__trust-avatars { display: flex; } .fc-hero__trust-avatars img { width: 36px; height: 36px; border-radius: 50%; border: 2px solid rgba(255,255,255,.3); object-fit: cover; margin-right: -8px; } .fc-hero__scroll { position: absolute; bottom: 40px; left: 50%; transform: translateX(-50%); z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 8px; color: rgba(255,255,255,.5); font-size: 11px; letter-spacing: 2px; text-transform: uppercase; animation: fc-fadeIn 1s 1s ease both; cursor: pointer; } .fc-hero__scroll-line { width: 1px; height: 50px; background: linear-gradient(to bottom, rgba(255,255,255,.5), transparent); animation: fc-scrollPulse 2s infinite; } /* ============================================================ 2. TRUST BAR ============================================================ */ .fc-trust-bar { background: var(--fc-primary); padding: 0; } .fc-trust-bar__inner { display: grid; grid-template-columns: repeat(4,1fr); border-top: 1px solid rgba(255,255,255,.06); } .fc-trust-item { padding: 40px 32px; border-right: 1px solid rgba(255,255,255,.08); text-align: center; position: relative; } .fc-trust-item:last-child { border-right: none; } .fc-trust-item__num { font-family: var(--fc-font-heading); font-size: clamp(30px, 3.5vw, 46px); font-weight: 700; color: var(--fc-secondary); display: block; line-height: 1; margin-bottom: 8px; } .fc-trust-item__label { font-size: 13px; color: rgba(255,255,255,.55); letter-spacing: 1px; text-transform: uppercase; } /* ============================================================ 3. SERVICES SECTION ============================================================ */ .fc-services {} .fc-service-card { background: var(--fc-white); border-radius: var(--fc-radius-lg); padding: 40px 32px; border: 1px solid var(--fc-border); transition: var(--fc-transition); position: relative; overflow: hidden; cursor: default; } .fc-service-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--fc-primary-light), var(--fc-secondary)); transform: scaleX(0); transform-origin: left; transition: transform .35s ease; } .fc-service-card:hover { border-color: transparent; box-shadow: var(--fc-shadow-lg); transform: translateY(-6px); } .fc-service-card:hover::before { transform: scaleX(1); } .fc-service-card__icon { width: 60px; height: 60px; border-radius: var(--fc-radius-md); background: var(--fc-bg-light); display: flex; align-items: center; justify-content: center; margin-bottom: 28px; transition: var(--fc-transition); } .fc-service-card__icon svg { width: 28px; height: 28px; } .fc-service-card:hover .fc-service-card__icon { background: var(--fc-primary); } .fc-service-card:hover .fc-service-card__icon svg path, .fc-service-card:hover .fc-service-card__icon svg rect, .fc-service-card:hover .fc-service-card__icon svg circle { stroke: var(--fc-white); } .fc-service-card h3 { font-family: var(--fc-font-heading); font-size: 20px; font-weight: 700; color: var(--fc-primary); margin-bottom: 14px; } .fc-service-card p { font-size: 15px; color: var(--fc-text-light); line-height: 1.7; margin-bottom: 24px; } .fc-service-card__link { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 600; color: var(--fc-primary-mid); transition: var(--fc-transition); } .fc-service-card__link svg { width: 16px; height: 16px; transition: transform .2s ease; } .fc-service-card:hover .fc-service-card__link { color: var(--fc-secondary); } .fc-service-card:hover .fc-service-card__link svg { transform: translateX(4px); } /* ============================================================ 4. WHY CHOOSE US ============================================================ */ .fc-why { overflow: hidden; } .fc-why__image { position: relative; border-radius: var(--fc-radius-xl); overflow: hidden; box-shadow: var(--fc-shadow-lg); } .fc-why__image img { width: 100%; height: 580px; object-fit: cover; } .fc-why__badge { position: absolute; bottom: 32px; left: 32px; background: var(--fc-white); border-radius: var(--fc-radius-md); padding: 20px 24px; box-shadow: var(--fc-shadow-md); display: flex; align-items: center; gap: 16px; } .fc-why__badge-icon { width: 52px; height: 52px; background: var(--fc-secondary); border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .fc-why__badge-icon svg { width: 26px; height: 26px; } .fc-why__badge strong { display: block; font-size: 22px; font-weight: 700; color: var(--fc-primary); } .fc-why__badge span { font-size: 13px; color: var(--fc-text-light); } .fc-why__content { padding-left: 32px; } .fc-why__content .fc-eyebrow { display: block; font-size: 12px; font-weight: 600; letter-spacing: 3px; text-transform: uppercase; color: var(--fc-secondary); margin-bottom: 16px; } .fc-why__content h2 { font-family: var(--fc-font-heading); font-size: clamp(28px, 3.5vw, 42px); font-weight: 700; color: var(--fc-primary); line-height: 1.2; margin-bottom: 20px; } .fc-why__content > p { font-size: 16px; color: var(--fc-text-light); line-height: 1.75; margin-bottom: 40px; } .fc-benefit-list { list-style: none; display: flex; flex-direction: column; gap: 24px; } .fc-benefit-item { display: flex; gap: 16px; align-items: flex-start; } .fc-benefit-icon { width: 44px; height: 44px; border-radius: 50%; background: rgba(26,58,92,.08); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .fc-benefit-icon svg { width: 20px; height: 20px; } .fc-benefit-text strong { display: block; font-size: 16px; font-weight: 600; color: var(--fc-primary); margin-bottom: 4px; } .fc-benefit-text span { font-size: 14px; color: var(--fc-text-light); line-height: 1.6; } /* ============================================================ 5. ACCOUNT TYPES ============================================================ */ .fc-accounts {} .fc-account-card { background: var(--fc-white); border-radius: var(--fc-radius-xl); padding: 44px 36px; border: 2px solid var(--fc-border); position: relative; transition: var(--fc-transition); display: flex; flex-direction: column; } .fc-account-card--featured { background: var(--fc-primary); border-color: var(--fc-primary); box-shadow: var(--fc-shadow-lg); transform: scale(1.04); } .fc-account-card:not(.fc-account-card--featured):hover { border-color: var(--fc-primary-light); box-shadow: var(--fc-shadow-md); transform: translateY(-4px); } .fc-account-card__badge { position: absolute; top: -14px; left: 50%; transform: translateX(-50%); background: var(--fc-secondary); color: var(--fc-primary); font-size: 11px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; padding: 5px 18px; border-radius: 50px; white-space: nowrap; } .fc-account-card__type { font-size: 12px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; color: var(--fc-secondary); margin-bottom: 12px; } .fc-account-card h3 { font-family: var(--fc-font-heading); font-size: 24px; font-weight: 700; margin-bottom: 8px; } .fc-account-card--featured h3 { color: var(--fc-white); } .fc-account-card:not(.fc-account-card--featured) h3 { color: var(--fc-primary); } .fc-account-card__rate { margin: 24px 0; padding: 20px 0; border-top: 1px solid rgba(255,255,255,.1); border-bottom: 1px solid rgba(255,255,255,.1); } .fc-account-card:not(.fc-account-card--featured) .fc-account-card__rate { border-color: var(--fc-border); } .fc-account-card__rate .rate-num { font-family: var(--fc-font-heading); font-size: 44px; font-weight: 700; color: var(--fc-secondary); line-height: 1; } .fc-account-card__rate .rate-label { font-size: 13px; color: var(--fc-text-light); margin-top: 4px; } .fc-account-card--featured .fc-account-card__rate .rate-label { color: rgba(255,255,255,.55); } .fc-account-card__features { list-style: none; flex: 1; display: flex; flex-direction: column; gap: 14px; margin-bottom: 36px; } .fc-account-card__features li { display: flex; align-items: center; gap: 10px; font-size: 14px; } .fc-account-card--featured .fc-account-card__features li { color: rgba(255,255,255,.8); } .fc-account-card:not(.fc-account-card--featured) .fc-account-card__features li { color: var(--fc-text-medium); } .fc-account-card__features li svg { width: 18px; height: 18px; flex-shrink: 0; } .fc-account-card--featured .fc-account-card__features li svg { color: var(--fc-secondary); } /* ============================================================ 6. LOAN PRODUCTS ============================================================ */ .fc-loans {} .fc-loan-card { background: var(--fc-white); border-radius: var(--fc-radius-lg); overflow: hidden; border: 1px solid var(--fc-border); transition: var(--fc-transition); display: flex; flex-direction: column; } .fc-loan-card:hover { box-shadow: var(--fc-shadow-lg); transform: translateY(-4px); } .fc-loan-card__img { height: 200px; overflow: hidden; position: relative; } .fc-loan-card__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; } .fc-loan-card:hover .fc-loan-card__img img { transform: scale(1.06); } .fc-loan-card__img-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(13,27,42,.5), transparent 60%); } .fc-loan-card__rate-tag { position: absolute; bottom: 16px; left: 16px; background: var(--fc-secondary); color: var(--fc-primary); font-size: 13px; font-weight: 700; padding: 5px 14px; border-radius: 50px; } .fc-loan-card__body { padding: 28px; flex: 1; display: flex; flex-direction: column; } .fc-loan-card__body h3 { font-family: var(--fc-font-heading); font-size: 20px; font-weight: 700; color: var(--fc-primary); margin-bottom: 10px; } .fc-loan-card__body p { font-size: 14px; color: var(--fc-text-light); line-height: 1.65; margin-bottom: 20px; flex: 1; } .fc-loan-card__meta { display: flex; gap: 20px; padding: 16px 0; border-top: 1px solid var(--fc-border); margin-bottom: 20px; } .fc-loan-card__meta-item { display: flex; flex-direction: column; gap: 2px; } .fc-loan-card__meta-item strong { font-size: 14px; font-weight: 700; color: var(--fc-primary); } .fc-loan-card__meta-item span { font-size: 11px; color: var(--fc-text-light); text-transform: uppercase; letter-spacing: 1px; } /* ============================================================ 7. DIGITAL BANKING / APP SECTION ============================================================ */ .fc-digital { background: linear-gradient(135deg, var(--fc-primary) 0%, var(--fc-primary-mid) 100%); position: relative; overflow: hidden; } .fc-digital::before { content: ''; position: absolute; width: 500px; height: 500px; border-radius: 50%; background: rgba(200,168,75,.06); top: -200px; right: -150px; } .fc-digital::after { content: ''; position: absolute; width: 350px; height: 350px; border-radius: 50%; background: rgba(46,134,171,.08); bottom: -150px; left: -100px; } .fc-digital__inner { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; } .fc-digital__content .fc-eyebrow { display: block; font-size: 12px; font-weight: 600; letter-spacing: 3px; text-transform: uppercase; color: var(--fc-secondary); margin-bottom: 16px; } .fc-digital__content h2 { font-family: var(--fc-font-heading); font-size: clamp(26px, 3.5vw, 40px); font-weight: 700; color: var(--fc-white); line-height: 1.2; margin-bottom: 20px; } .fc-digital__content p { font-size: 16px; color: rgba(255,255,255,.7); line-height: 1.75; margin-bottom: 36px; } .fc-digital__features { display: flex; flex-direction: column; gap: 16px; margin-bottom: 40px; } .fc-digital__feature { display: flex; align-items: center; gap: 12px; font-size: 15px; color: rgba(255,255,255,.85); } .fc-digital__feature svg { width: 20px; height: 20px; color: var(--fc-secondary); flex-shrink: 0; } .fc-app-btns { display: flex; gap: 16px; flex-wrap: wrap; } .fc-app-btn { display: flex; align-items: center; gap: 12px; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.2); border-radius: var(--fc-radius-md); padding: 14px 22px; color: var(--fc-white); transition: var(--fc-transition); backdrop-filter: blur(8px); } .fc-app-btn:hover { background: rgba(255,255,255,.18); border-color: rgba(255,255,255,.35); } .fc-app-btn svg { width: 28px; height: 28px; } .fc-app-btn small { display: block; font-size: 10px; opacity: .7; text-transform: uppercase; letter-spacing: 1px; } .fc-app-btn strong { display: block; font-size: 15px; font-weight: 600; } .fc-digital__image { position: relative; display: flex; justify-content: center; } .fc-digital__phone { width: 300px; border-radius: 40px; box-shadow: 0 40px 80px rgba(0,0,0,.4), 0 0 0 1px rgba(255,255,255,.1); overflow: hidden; } .fc-digital__phone img { width: 100%; display: block; } .fc-digital__glow { position: absolute; width: 350px; height: 350px; border-radius: 50%; background: radial-gradient(circle, rgba(200,168,75,.2) 0%, transparent 70%); top: 50%; left: 50%; transform: translate(-50%,-50%); pointer-events: none; } /* ============================================================ 8. TESTIMONIALS ============================================================ */ .fc-testimonials { background: var(--fc-bg-light); } .fc-testimonial-card { background: var(--fc-white); border-radius: var(--fc-radius-lg); padding: 36px 32px; border: 1px solid var(--fc-border); transition: var(--fc-transition); position: relative; } .fc-testimonial-card:hover { box-shadow: var(--fc-shadow-md); transform: translateY(-4px); } .fc-testimonial-card__quote { font-size: 48px; line-height: 1; color: var(--fc-secondary); font-family: Georgia, serif; margin-bottom: 16px; opacity: .6; } .fc-testimonial-card__text { font-size: 15px; color: var(--fc-text-medium); line-height: 1.75; margin-bottom: 28px; font-style: italic; } .fc-testimonial-card__author { display: flex; align-items: center; gap: 14px; padding-top: 20px; border-top: 1px solid var(--fc-border); } .fc-testimonial-card__author img { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; border: 2px solid var(--fc-secondary); } .fc-testimonial-card__author strong { display: block; font-size: 15px; font-weight: 600; color: var(--fc-primary); } .fc-testimonial-card__author span { font-size: 13px; color: var(--fc-text-light); } .fc-stars { display: flex; gap: 2px; margin-bottom: 4px; } .fc-stars svg { width: 14px; height: 14px; fill: var(--fc-secondary); } /* ============================================================ 9. NEWS SECTION ============================================================ */ .fc-news {} .fc-news-card { background: var(--fc-white); border-radius: var(--fc-radius-lg); overflow: hidden; border: 1px solid var(--fc-border); transition: var(--fc-transition); display: flex; flex-direction: column; } .fc-news-card:hover { box-shadow: var(--fc-shadow-md); transform: translateY(-4px); } .fc-news-card__img { height: 220px; overflow: hidden; } .fc-news-card__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; } .fc-news-card:hover .fc-news-card__img img { transform: scale(1.06); } .fc-news-card__body { padding: 28px; flex: 1; display: flex; flex-direction: column; } .fc-news-card__meta { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; } .fc-news-card__cat { background: rgba(26,58,92,.08); color: var(--fc-primary-light); font-size: 11px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; padding: 4px 12px; border-radius: 50px; } .fc-news-card__date { font-size: 13px; color: var(--fc-text-light); } .fc-news-card__body h3 { font-family: var(--fc-font-heading); font-size: 19px; font-weight: 700; color: var(--fc-primary); margin-bottom: 12px; line-height: 1.35; } .fc-news-card__body p { font-size: 14px; color: var(--fc-text-light); line-height: 1.65; margin-bottom: 20px; flex: 1; } .fc-news-card__link { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 600; color: var(--fc-primary-mid); transition: var(--fc-transition); } .fc-news-card__link svg { width: 16px; height: 16px; transition: transform .2s ease; } .fc-news-card:hover .fc-news-card__link { color: var(--fc-secondary); } .fc-news-card:hover .fc-news-card__link svg { transform: translateX(4px); } /* ============================================================ 10. CTA SECTION ============================================================ */ .fc-cta { background: var(--fc-primary); position: relative; overflow: hidden; } .fc-cta::before { content: ''; position: absolute; inset: 0; background-image: url('https://images.unsplash.com/photo-1618044733300-9472054094ee?w=1600&q=60&auto=format&fit=crop'); background-size: cover; background-position: center; opacity: .08; } .fc-cta__inner { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr auto; gap: 48px; align-items: center; } .fc-cta h2 { font-family: var(--fc-font-heading); font-size: clamp(26px, 3.5vw, 42px); font-weight: 700; color: var(--fc-white); line-height: 1.2; margin-bottom: 12px; } .fc-cta p { font-size: 16px; color: rgba(255,255,255,.65); max-width: 560px; line-height: 1.65; } .fc-cta__actions { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; } /* ============================================================ SECURITY BADGES ============================================================ */ .fc-security-bar { background: var(--fc-bg-lighter); border-top: 1px solid var(--fc-border); padding: 32px 0; } .fc-security-bar__inner { display: flex; align-items: center; justify-content: center; gap: 48px; flex-wrap: wrap; } .fc-security-badge { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--fc-text-light); font-weight: 500; } .fc-security-badge svg { width: 22px; height: 22px; color: var(--fc-primary-light); } /* ============================================================ HEADER / NAVIGATION ============================================================ */ .fc-header { position: fixed; top: 0; left: 0; right: 0; z-index: 9999; background: rgba(13, 27, 42, 0.95); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid rgba(255, 255, 255, 0.06); transition: background 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease; } .fc-header--transparent { background: transparent; border-bottom-color: transparent; } .fc-header--scrolled { background: rgba(13, 27, 42, 0.98) !important; box-shadow: 0 4px 28px rgba(13, 27, 42, 0.35); border-bottom-color: rgba(255, 255, 255, 0.08) !important; } .fc-header__inner { display: flex; align-items: center; height: 72px; gap: 24px; } /* ── Logo ── */ .fc-header__logo { display: flex; align-items: center; gap: 10px; text-decoration: none; flex-shrink: 0; } .fc-header__logo-img { height: 40px; width: auto; display: block; } .fc-header__logo-mark { width: 38px; height: 38px; background: var(--fc-secondary); border-radius: 10px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: transform 0.2s ease; } .fc-header__logo:hover .fc-header__logo-mark { transform: rotate(-6deg) scale(1.05); } .fc-header__logo-mark svg { color: var(--fc-primary); } .fc-header__logo-text { font-family: var(--fc-font-heading); font-size: 19px; font-weight: 700; color: var(--fc-white); letter-spacing: -0.3px; white-space: nowrap; transition: color 0.2s; } .fc-header__logo:hover .fc-header__logo-text { color: var(--fc-secondary); } /* ── Nav ── */ .fc-nav { display: flex; align-items: center; gap: 2px; justify-content: center; } /* Desktop: float the nav as a transparent fixed overlay centred over the header. pointer-events:none lets clicks fall through to the logo/sign-in beneath it; only the tags re-enable pointer events so they stay clickable. */ @media (min-width: 961px) { .fc-nav { position: fixed; top: 0; left: 0; right: 0; height: 72px; z-index: 10000; pointer-events: none; } .fc-nav a { pointer-events: auto; } .admin-bar .fc-nav { top: 32px; } } .fc-nav a { font-size: 14px; font-weight: 500; color: rgba(255, 255, 255, 0.72); padding: 7px 15px; border-radius: 50px; transition: color 0.2s, background 0.2s; white-space: nowrap; text-decoration: none; } .fc-nav a:hover { color: var(--fc-white); background: rgba(255, 255, 255, 0.1); } .fc-nav a.active { color: var(--fc-secondary); background: rgba(200, 168, 75, 0.1); } /* Sign-in CTA sits between logo and actions; auto left-margin shoves it right on desktop */ .fc-header__cta { margin-left: auto; } /* ── Header Actions ── */ .fc-header__actions { display: flex; align-items: center; gap: 14px; flex-shrink: 0; } .fc-header__phone { display: flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 500; color: rgba(255, 255, 255, 0.7); white-space: nowrap; text-decoration: none; transition: color 0.2s; } .fc-header__phone:hover { color: var(--fc-secondary); } .fc-header__phone svg { flex-shrink: 0; } /* ── Hamburger ── */ .fc-hamburger { display: none; flex-direction: column; justify-content: center; align-items: center; width: 40px; height: 40px; background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.15); border-radius: 8px; cursor: pointer; gap: 5px; transition: background 0.2s; padding: 0; flex-shrink: 0; } .fc-hamburger:hover { background: rgba(255, 255, 255, 0.15); } .fc-hamburger span { display: block; width: 20px; height: 2px; background: var(--fc-white); border-radius: 2px; transition: transform 0.3s ease, opacity 0.25s ease, width 0.25s ease; transform-origin: center; } .fc-hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .fc-hamburger.open span:nth-child(2) { opacity: 0; width: 0; } .fc-hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* ── Mobile Nav Overlay ── */ .fc-nav-overlay { display: none; position: fixed; inset: 0; background: rgba(0, 0, 0, 0.55); z-index: 9990; backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); } .fc-nav-overlay.active { display: block; } /* ── Hero top clearance for fixed header ── */ .fundcore-page .fc-hero__content { padding-top: 140px; } /* ── Push header below WP admin bar when logged in ── */ .admin-bar .fc-header { top: 32px; } @media screen and (max-width: 782px) { .admin-bar .fc-header { top: 46px; } .admin-bar .fc-nav { top: 46px; } } /* ── Responsive ── */ @media (max-width: 960px) { .fc-hamburger { display: flex; } .fc-header__phone { display: none; } .fc-header__cta { margin-left: 0; } .fc-header__inner { justify-content: space-between; gap: 0; } .fc-nav { position: fixed; top: 0; right: -300px; bottom: 0; width: 280px; flex-direction: column; justify-content: flex-start; align-items: flex-start; background: var(--fc-primary); border-left: 1px solid rgba(255, 255, 255, 0.08); padding: 90px 20px 40px; gap: 2px; z-index: 9995; transition: right 0.35s cubic-bezier(0.4, 0, 0.2, 1); box-shadow: -10px 0 40px rgba(0, 0, 0, 0.3); overflow-y: auto; } .fc-nav.open { right: 0; } .fc-nav a { width: 100%; padding: 13px 16px; font-size: 15px; border-radius: var(--fc-radius-md); } } @media (max-width: 480px) { .fc-header__logo-text { font-size: 17px; } } /* ============================================================ ANIMATIONS ============================================================ */ @keyframes fc-fadeInUp { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } } @keyframes fc-fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes fc-scrollPulse { 0%,100% { opacity: .4; transform: scaleY(1); } 50% { opacity: 1; transform: scaleY(1.15); } } .fc-reveal { opacity: 0; transform: translateY(30px); transition: opacity .65s ease, transform .65s ease; } .fc-reveal.fc-revealed { opacity: 1; transform: translateY(0); } .fc-reveal-delay-1 { transition-delay: .1s; } .fc-reveal-delay-2 { transition-delay: .2s; } .fc-reveal-delay-3 { transition-delay: .3s; } .fc-reveal-delay-4 { transition-delay: .4s; } /* ============================================================ SIGN-IN MODAL ============================================================ */ .fc-modal-backdrop { position: fixed; inset: 0; background: rgba(13, 27, 42, 0.65); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); z-index: 99999; display: flex; align-items: flex-start; justify-content: center; padding: 24px; overflow-y: auto; opacity: 0; visibility: hidden; transition: opacity .25s ease, visibility .25s ease; } .fc-modal-backdrop.fc-modal--open { opacity: 1; visibility: visible; } .fc-modal { background: var(--fc-white); border-radius: var(--fc-radius-lg); box-shadow: var(--fc-shadow-lg); width: 100%; max-width: 440px; padding: 48px 40px 40px; position: relative; transform: translateY(24px) scale(.97); transition: transform .3s cubic-bezier(.4,0,.2,1); margin: auto; } .fc-modal-backdrop.fc-modal--open .fc-modal { transform: translateY(0) scale(1); } .fc-modal__close { position: absolute; top: 16px; right: 16px; width: 36px; height: 36px; border-radius: 50%; border: none; background: var(--fc-bg-light); color: var(--fc-text-medium); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: var(--fc-transition); } .fc-modal__close:hover { background: var(--fc-border); color: var(--fc-primary); } .fc-modal__logo { display: flex; align-items: center; gap: 10px; margin-bottom: 28px; } .fc-modal__logo-img { height: 36px; width: auto; } .fc-modal__logo-mark { width: 40px; height: 40px; background: var(--fc-primary); border-radius: var(--fc-radius-sm); display: flex; align-items: center; justify-content: center; color: var(--fc-secondary); } .fc-modal__logo-text { font-family: var(--fc-font-heading); font-size: 18px; font-weight: 700; color: var(--fc-primary); } .fc-modal__title { font-family: var(--fc-font-heading); font-size: 26px; font-weight: 700; color: var(--fc-primary); margin-bottom: 6px; } .fc-modal__subtitle { font-size: 14px; color: var(--fc-text-light); margin-bottom: 32px; } .fc-signin-form { display: flex; flex-direction: column; gap: 20px; } .fc-form-group { display: flex; flex-direction: column; gap: 7px; } .fc-form-label { font-size: 13px; font-weight: 600; color: var(--fc-text-medium); display: flex; justify-content: space-between; align-items: center; } .fc-form-label__link { font-weight: 400; color: var(--fc-accent); transition: color .2s; } .fc-form-label__link:hover { color: var(--fc-primary-mid); } .fc-input-wrap { position: relative; display: flex; align-items: center; } .fc-input-icon { position: absolute; left: 14px; color: var(--fc-text-light); pointer-events: none; flex-shrink: 0; } .fc-input { width: 100%; height: 48px; padding: 0 44px 0 42px; border: 1.5px solid var(--fc-border); border-radius: var(--fc-radius-sm); font-family: var(--fc-font-body); font-size: 14px; color: var(--fc-text-dark); background: var(--fc-bg-lighter); transition: border-color .2s, box-shadow .2s; outline: none; } .fc-input::placeholder { color: var(--fc-text-light); } .fc-input:focus { border-color: var(--fc-primary-mid); box-shadow: 0 0 0 3px rgba(42, 82, 152, .12); background: var(--fc-white); } .fc-input.fc-input--error { border-color: var(--fc-danger); } select.fc-select { appearance: none; -webkit-appearance: none; cursor: pointer; padding-right: 36px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2.5'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; } .fc-currency-select-group { margin-top: 20px; } .fc-input-toggle { position: absolute; right: 12px; background: none; border: none; cursor: pointer; color: var(--fc-text-light); display: flex; align-items: center; padding: 4px; transition: color .2s; } .fc-input-toggle:hover { color: var(--fc-primary); } .fc-signin-form__error { font-size: 13px; color: var(--fc-danger); min-height: 18px; } .fc-signin-form__submit { width: 100%; justify-content: center; height: 50px; font-size: 15px; margin-top: 4px; } .fc-signin-form__submit.fc-btn--loading { pointer-events: none; opacity: .75; } .fc-modal__footer { text-align: center; font-size: 13px; color: var(--fc-text-light); margin-top: 24px; } .fc-modal__footer-link { color: var(--fc-accent); font-weight: 600; transition: color .2s; } .fc-modal__footer-link:hover { color: var(--fc-primary-mid); } /* ============================================================ RESPONSIVE ============================================================ */ @media (max-width: 1024px) { .fc-grid-3 { grid-template-columns: repeat(2,1fr); } .fc-grid-4 { grid-template-columns: repeat(2,1fr); } .fc-trust-bar__inner { grid-template-columns: repeat(2,1fr); } .fc-digital__inner { grid-template-columns: 1fr; gap: 48px; } .fc-digital__image { order: -1; } .fc-cta__inner { grid-template-columns: 1fr; } } @media (max-width: 768px) { :root { --fc-section-py: 60px; } .fc-grid-3 { grid-template-columns: 1fr; } .fc-grid-4 { grid-template-columns: 1fr; } .fc-grid-2 { grid-template-columns: 1fr; } .fc-trust-bar__inner { grid-template-columns: repeat(2,1fr); } .fc-why__content { padding-left: 0; } .fc-account-card--featured { transform: scale(1); } .fc-security-bar__inner { gap: 28px; } .fc-hero__actions { flex-direction: column; } .fc-hero__actions .fc-btn { text-align: center; justify-content: center; } } @media (max-width: 480px) { .fc-trust-bar__inner { grid-template-columns: 1fr 1fr; } .fc-trust-item { padding: 28px 20px; } .fc-digital__phone { width: 220px; } .fc-modal { padding: 40px 24px 32px; } .fc-header__cta { padding: 9px 16px; font-size: 12px; } .fc-header__cta svg { margin-right: 4px !important; } } /* ============================================================ REDIRECT MESSAGE ============================================================ */ .fc-redirect-msg { text-align: center; padding: 80px 24px; color: var(--fc-text-medium); } /* ============================================================ OPEN ACCOUNT — REGISTRATION PAGE ============================================================ */ .fc-register-page { background: var(--fc-bg-light); min-height: 100vh; padding-bottom: 64px; } /* Trust bar */ .fc-register-trust-bar { background: var(--fc-primary); padding: 12px 0; } .fc-register-trust-bar__inner { display: flex; align-items: center; justify-content: center; gap: 32px; flex-wrap: wrap; } .fc-register-trust-bar__inner span { display: flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 500; color: rgba(255,255,255,.75); letter-spacing: .3px; } .fc-register-trust-bar__inner svg { color: var(--fc-secondary); flex-shrink: 0; } /* Two-panel layout */ .fc-register-wrap { display: grid; grid-template-columns: 360px 1fr; gap: 40px; align-items: start; padding-top: 48px; } /* ── Sidebar ── */ .fc-register-sidebar { background: var(--fc-primary); border-radius: var(--fc-radius-lg); padding: 40px 36px; position: sticky; top: 100px; color: var(--fc-white); overflow: hidden; } .fc-register-sidebar::before { content: ''; position: absolute; top: -60px; right: -60px; width: 220px; height: 220px; border-radius: 50%; background: rgba(200,168,75,.12); pointer-events: none; } .fc-register-sidebar__logo { display: flex; align-items: center; gap: 10px; margin-bottom: 36px; text-decoration: none; } .fc-register-sidebar__heading { font-family: var(--fc-font-heading); font-size: 26px; font-weight: 700; line-height: 1.25; margin-bottom: 14px; color: var(--fc-white); } .fc-register-sidebar__sub { font-size: 14px; color: rgba(255,255,255,.65); line-height: 1.6; margin-bottom: 32px; } .fc-register-sidebar__benefits { list-style: none; display: flex; flex-direction: column; gap: 14px; margin-bottom: 36px; } .fc-register-sidebar__benefits li { display: flex; align-items: center; gap: 12px; font-size: 14px; color: rgba(255,255,255,.85); } .fc-register-sidebar__check { width: 22px; height: 22px; border-radius: 50%; background: var(--fc-secondary); color: var(--fc-primary); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .fc-register-sidebar__reviews { border-top: 1px solid rgba(255,255,255,.12); padding-top: 24px; } .fc-register-sidebar__stars { display: flex; gap: 3px; margin-bottom: 10px; } .fc-register-sidebar__review-text { font-size: 13px; font-style: italic; color: rgba(255,255,255,.75); line-height: 1.6; margin-bottom: 8px; } .fc-register-sidebar__reviewer { font-size: 12px; color: var(--fc-secondary); font-weight: 600; } /* ── Form Panel ── */ .fc-register-form-panel { background: var(--fc-white); border-radius: var(--fc-radius-lg); padding: 48px 48px 40px; box-shadow: var(--fc-shadow-md); } /* Step indicator */ .fc-steps { display: flex; align-items: center; margin-bottom: 40px; } .fc-step { display: flex; align-items: center; gap: 10px; flex-shrink: 0; } .fc-step__circle { width: 36px; height: 36px; border-radius: 50%; border: 2px solid var(--fc-border); background: var(--fc-white); display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 700; color: var(--fc-text-light); transition: var(--fc-transition); flex-shrink: 0; } .fc-step__num { display: block; } .fc-step__check { display: none; } .fc-step__label { font-size: 13px; font-weight: 600; color: var(--fc-text-light); transition: color .25s; white-space: nowrap; } .fc-step__connector { flex: 1; height: 2px; background: var(--fc-border); margin: 0 12px; transition: background .3s; } /* Active step */ .fc-step--active .fc-step__circle { background: var(--fc-primary); border-color: var(--fc-primary); color: var(--fc-white); box-shadow: 0 4px 14px rgba(13,27,42,.25); } .fc-step--active .fc-step__label { color: var(--fc-primary); } /* Done step */ .fc-step--done .fc-step__circle { background: var(--fc-success); border-color: var(--fc-success); color: var(--fc-white); } .fc-step--done .fc-step__num { display: none; } .fc-step--done .fc-step__check { display: block; } .fc-step--done .fc-step__label { color: var(--fc-success); } .fc-step--done + .fc-step__connector { background: var(--fc-success); } /* Step content */ .fc-step-content { animation: fcStepIn .28s ease-out both; } @keyframes fcStepIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } } .fc-register-step-head { margin-bottom: 28px; } .fc-register-step-head h3 { font-family: var(--fc-font-heading); font-size: 24px; font-weight: 700; color: var(--fc-primary); margin-bottom: 6px; } .fc-register-step-head p { font-size: 14px; color: var(--fc-text-light); } /* Form helpers */ .fc-form-row { display: flex; gap: 16px; } .fc-form-row--2 > * { flex: 1 1 0; min-width: 0; } .fc-required { color: var(--fc-danger); margin-left: 2px; } .fc-form-check { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; } .fc-form-check input[type="checkbox"] { width: 18px; height: 18px; margin-top: 1px; flex-shrink: 0; accent-color: var(--fc-primary); cursor: pointer; } .fc-form-check__label { font-size: 13px; color: var(--fc-text-medium); line-height: 1.5; } .fc-form-check__label a { color: var(--fc-accent); font-weight: 600; } /* Password strength */ .fc-pw-strength { margin-top: 8px; display: flex; align-items: center; gap: 10px; } .fc-pw-strength__track { flex: 1; height: 4px; background: var(--fc-border); border-radius: 99px; overflow: hidden; } .fc-pw-strength__fill { height: 100%; width: 0%; border-radius: 99px; transition: width .3s, background .3s; } .fc-pw-strength__label { font-size: 12px; font-weight: 600; min-width: 44px; } /* Account type cards */ .fc-acct-type-grid { display: flex; flex-direction: column; gap: 12px; margin-bottom: 28px; } .fc-acct-type-card { display: block; border: 2px solid var(--fc-border); border-radius: var(--fc-radius-md); cursor: pointer; transition: var(--fc-transition); position: relative; overflow: hidden; } .fc-acct-type-card:hover { border-color: var(--fc-primary-mid); box-shadow: var(--fc-shadow-sm); } .fc-acct-type-card--selected { border-color: var(--fc-primary); box-shadow: 0 0 0 3px rgba(26,58,92,.12); } .fc-acct-type-radio { position: absolute; opacity: 0; width: 0; height: 0; } .fc-acct-type-card__inner { display: flex; align-items: flex-start; gap: 16px; padding: 18px 20px; } .fc-acct-type-card__icon { width: 48px; height: 48px; border-radius: var(--fc-radius-sm); background: var(--fc-bg-light); display: flex; align-items: center; justify-content: center; color: var(--fc-primary-light); flex-shrink: 0; transition: background .2s, color .2s; } .fc-acct-type-card--selected .fc-acct-type-card__icon { background: var(--fc-primary); color: var(--fc-secondary); } .fc-acct-type-card__info { flex: 1; min-width: 0; } .fc-acct-type-card__name { font-size: 15px; font-weight: 700; color: var(--fc-primary); margin-bottom: 2px; } .fc-acct-type-card__rate { font-size: 13px; font-weight: 600; color: var(--fc-secondary); margin-bottom: 4px; } .fc-acct-type-card__desc { font-size: 13px; color: var(--fc-text-light); line-height: 1.5; margin: 0; } .fc-acct-type-card__badge { position: absolute; top: 10px; right: 44px; font-size: 10px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; background: var(--fc-secondary); color: var(--fc-primary); padding: 3px 8px; border-radius: 99px; } .fc-acct-type-card__tick { width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--fc-border); display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: transparent; transition: var(--fc-transition); } .fc-acct-type-card--selected .fc-acct-type-card__tick { background: var(--fc-primary); border-color: var(--fc-primary); color: var(--fc-white); } /* Security note */ .fc-register-security-note { display: flex; align-items: center; gap: 7px; font-size: 12px; color: var(--fc-text-light); background: var(--fc-bg-lighter); border: 1px solid var(--fc-border); border-radius: var(--fc-radius-sm); padding: 10px 14px; margin-bottom: 16px; } .fc-register-security-note svg { color: var(--fc-success); flex-shrink: 0; } /* Nav buttons */ .fc-register-nav { margin-top: 24px; } .fc-register-nav--split { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .fc-register-nav .fc-btn { display: inline-flex; align-items: center; gap: 8px; } .fc-register-nav .fc-btn-primary { margin-left: auto; } /* Step error */ .fc-step-error { font-size: 13px; color: var(--fc-danger); min-height: 18px; margin-top: 4px; } /* Sign-in prompt */ .fc-register-signin-prompt { text-align: center; margin-top: 24px; font-size: 13px; color: var(--fc-text-light); padding-top: 24px; border-top: 1px solid var(--fc-border); } .fc-register-signin-prompt__link { color: var(--fc-accent); font-weight: 600; transition: color .2s; } .fc-register-signin-prompt__link:hover { color: var(--fc-primary-mid); } /* ============================================================ CUSTOMER DASHBOARD ============================================================ */ .fc-dashboard { background: var(--fc-bg-light); min-height: 100vh; } /* Dashboard header */ .fc-dash-header { background: var(--fc-primary); padding: 0; position: sticky; top: 0; z-index: 900; box-shadow: 0 2px 16px rgba(13,27,42,.2); } .fc-dash-header__inner { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 16px 0; min-height: 68px; } .fc-dash-header__left { display: flex; align-items: center; gap: 20px; min-width: 0; } .fc-dash-header__logo { display: flex; align-items: center; gap: 10px; color: var(--fc-white); text-decoration: none; font-family: var(--fc-font-heading); font-size: 17px; font-weight: 700; flex-shrink: 0; } .fc-dash-header__logo-icon { width: 34px; height: 34px; border-radius: 8px; background: var(--fc-secondary); color: var(--fc-primary); display: flex; align-items: center; justify-content: center; } .fc-dash-header__divider { width: 1px; height: 28px; background: rgba(255,255,255,.2); flex-shrink: 0; } .fc-dash-header__greeting { font-size: 15px; color: rgba(255,255,255,.75); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .fc-dash-header__greeting strong { color: var(--fc-white); } .fc-dash-header__right { display: flex; align-items: center; gap: 16px; flex-shrink: 0; } .fc-dash-header__status { display: flex; align-items: center; gap: 7px; font-size: 12px; color: rgba(255,255,255,.65); } @media (max-width: 768px) { .fc-dash-header__status { display: none; } } .fc-dash-status-dot { width: 8px; height: 8px; border-radius: 50%; background: #2ecc71; box-shadow: 0 0 0 3px rgba(46,204,113,.25); animation: dashPulse 2s infinite; } @keyframes dashPulse { 0%, 100% { box-shadow: 0 0 0 3px rgba(46,204,113,.25); } 50% { box-shadow: 0 0 0 6px rgba(46,204,113,.08); } } .fc-dash-status-dot--suspended, .fc-dash-status-dot--banned { background: #e74c3c; box-shadow: 0 0 0 3px rgba(231,76,60,.25); animation: dashPulseDanger 2s infinite; } @keyframes dashPulseDanger { 0%, 100% { box-shadow: 0 0 0 3px rgba(231,76,60,.25); } 50% { box-shadow: 0 0 0 6px rgba(231,76,60,.08); } } .fc-dash-status-dot--frozen { background: #3498db; box-shadow: 0 0 0 3px rgba(52,152,219,.25); animation: none; } .fc-dash-status-dot--closed { background: #95a5a6; box-shadow: 0 0 0 3px rgba(149,165,166,.25); animation: none; } .fc-dash-header__date { font-size: 12px; color: rgba(255,255,255,.5); } @media (max-width: 768px) { .fc-dash-header__date { display: none; } } .fc-dash-logout { border-color: rgba(255,255,255,.25) !important; color: rgba(255,255,255,.8) !important; display: flex; align-items: center; gap: 6px; } .fc-dash-logout:hover { border-color: rgba(255,255,255,.6) !important; color: var(--fc-white) !important; background: rgba(255,255,255,.08) !important; } /* Dashboard body */ .fc-dash-body { padding: 36px 0 64px; } .fc-dash-section { margin-bottom: 36px; } .fc-dash-section-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; } .fc-dash-section-title { font-family: var(--fc-font-heading); font-size: 20px; font-weight: 700; color: var(--fc-primary); margin-bottom: 16px; } .fc-dash-section-header .fc-dash-section-title { margin-bottom: 0; } .fc-dash-txn-count { font-size: 13px; color: var(--fc-text-light); } .fc-dash-view-all { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 600; color: var(--fc-accent); text-decoration: none; transition: var(--fc-transition); } .fc-dash-view-all:hover { color: var(--fc-primary); } /* Greeting section */ .fc-dash-greeting-wrapper { grid-column: 1 / -1; margin-bottom: 1.5rem; display: flex; align-items: flex-start; justify-content: space-between; } .fc-dash-greeting-text { font-size: 1.25rem; color: var(--fc-primary); font-weight: 500; } .fc-dash-greeting-text strong { font-weight: 700; } html[data-fc-theme="dark"] .fc-dash-greeting-text { color: var(--fc-text-dark); } .fc-dash-greeting-meta { display: none; flex-direction: column; gap: 6px; font-size: 13px; color: var(--fc-text-light); text-align: right; } .fc-dash-greeting-status { display: flex; align-items: center; gap: 6px; justify-content: flex-end; } .fc-dash-greeting-date { color: var(--fc-text-medium); } html[data-fc-theme="dark"] .fc-dash-greeting-date { color: var(--fc-text-medium); } /* Show meta on mobile */ @media (max-width: 768px) { .fc-dash-greeting-meta { display: flex; } } /* Accounts grid */ .fc-dash-accounts-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: start; } /* Balance card */ .fc-dash-balance-card { background: linear-gradient(135deg, var(--fc-primary) 0%, var(--fc-primary-mid) 100%); border-radius: var(--fc-radius-lg); padding: 32px; color: var(--fc-white); position: relative; overflow: hidden; box-shadow: var(--fc-shadow-lg); } .fc-dash-balance-card__bg { position: absolute; top: -40px; right: -40px; width: 200px; height: 200px; border-radius: 50%; background: rgba(200,168,75,.15); pointer-events: none; } .fc-dash-balance-card__top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; } .fc-dash-balance-card__label { font-size: 12px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; color: rgba(255,255,255,.6); } .fc-dash-balance-card__chip { display: flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 600; color: var(--fc-secondary); background: rgba(200,168,75,.15); padding: 4px 10px; border-radius: 99px; } .fc-dash-balance-card__amount { display: flex; align-items: baseline; gap: 8px; margin-bottom: 20px; } .fc-dash-balance-card__currency { font-size: clamp(32px, 5vw, 48px); font-weight: 600; line-height: 1; color: var(--fc-white); } .fc-dash-balance-card__num { font-family: var(--fc-font-body); font-size: clamp(32px, 5vw, 48px); font-variant-numeric: tabular-nums; letter-spacing: -0.5px; font-weight: 600; line-height: 1; color: var(--fc-white); } .fc-dash-balance-card__meta { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; } .fc-dash-balance-card__acct-num-wrap { display: flex; align-items: center; gap: 8px; } .fc-dash-balance-card__acct-num { font-family: 'Courier New', monospace; font-size: 14px; letter-spacing: 2px; color: rgba(255,255,255,.7); } .fc-copy-acct-btn { display: inline-flex; align-items: center; justify-content: center; background: rgba(255,255,255,.15); border: 1px solid rgba(255,255,255,.25); border-radius: 5px; color: rgba(255,255,255,.8); cursor: pointer; padding: 3px 6px; transition: background .2s, color .2s; flex-shrink: 0; } .fc-copy-acct-btn:hover { background: rgba(255,255,255,.28); color: #fff; } .fc-copy-acct-btn.fc-copied { background: rgba(72,199,120,.25); border-color: rgba(72,199,120,.5); color: #48c778; } .fc-dash-balance-card__type { font-size: 12px; color: var(--fc-secondary); font-weight: 600; } .fc-dash-balance-card__rate { display: flex; align-items: center; gap: 6px; font-size: 12px; color: rgba(255,255,255,.55); border-top: 1px solid rgba(255,255,255,.12); padding-top: 12px; margin-top: 8px; } /* Additional account list */ .fc-dash-account-list { display: flex; flex-direction: column; gap: 12px; background: var(--fc-white); border-radius: var(--fc-radius-md); padding: 20px; box-shadow: var(--fc-shadow-sm); } .fc-dash-account-row { display: flex; align-items: center; gap: 14px; padding-bottom: 12px; border-bottom: 1px solid var(--fc-border); } .fc-dash-account-row:last-child { border-bottom: none; padding-bottom: 0; } .fc-dash-account-row__icon { width: 36px; height: 36px; border-radius: var(--fc-radius-sm); background: var(--fc-bg-light); display: flex; align-items: center; justify-content: center; color: var(--fc-primary-light); flex-shrink: 0; } .fc-dash-account-row__info { flex: 1; min-width: 0; } .fc-dash-account-row__type { font-size: 14px; font-weight: 600; color: var(--fc-primary); } .fc-dash-account-row__num { font-size: 12px; color: var(--fc-text-light); letter-spacing: 1px; } .fc-dash-account-row__balance { font-size: 16px; font-weight: 700; color: var(--fc-primary); } /* Account status indicators */ .fc-dash-balance-card__chip--suspended { background: rgba(217,119,6,.25); color: #fbbf24; } .fc-dash-balance-card__chip--banned { background: rgba(185,28,28,.3); color: #fca5a5; } .fc-dash-balance-card--restricted .fc-dash-balance-card__amount { opacity: .5; } .fc-dash-balance-card__restriction-notice { display: flex; align-items: flex-start; gap: 8px; margin-top: 12px; padding: 12px 14px; background: rgba(0,0,0,.25); border-radius: 10px; font-size: 13px; line-height: 1.5; color: rgba(255,255,255,.9); border: 1px solid rgba(255,255,255,.12); } .fc-dash-balance-card__restriction-notice svg { flex-shrink: 0; margin-top: 1px; opacity: .85; } .fc-dash-account-row--restricted { opacity: .75; } .fc-dash-account-row__status-badge { flex-shrink: 0; font-size: 11px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; padding: 3px 9px; border-radius: 99px; } .fc-dash-account-row__status-badge--suspended { background: #fef3c7; color: #92400e; } .fc-dash-account-row__status-badge--banned { background: #fee2e2; color: #991b1b; } /* Stats row */ .fc-dash-stats { display: flex; flex-direction: column; gap: 12px; } .fc-dash-stat-card { background: var(--fc-white); border-radius: var(--fc-radius-md); padding: 16px 20px; display: flex; align-items: center; gap: 14px; box-shadow: var(--fc-shadow-sm); } .fc-dash-stat-card__icon { width: 40px; height: 40px; border-radius: var(--fc-radius-sm); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .fc-dash-stat-card__icon--blue { background: rgba(46,134,171,.12); color: var(--fc-accent); } .fc-dash-stat-card__icon--gold { background: rgba(200,168,75,.12); color: var(--fc-secondary); } .fc-dash-stat-card__icon--green { background: rgba(30,132,73,.12); color: var(--fc-success); } .fc-dash-stat-card__value { font-size: 20px; font-weight: 700; color: var(--fc-primary); line-height: 1; } .fc-dash-stat-card__label { font-size: 12px; color: var(--fc-text-light); margin-top: 2px; } /* Quick actions */ .fc-dash-actions { display: flex; gap: 12px; flex-wrap: wrap; } .fc-dash-action { flex: 1; min-width: 160px; max-width: 220px; display: flex; flex-direction: row; align-items: center; gap: 12px; padding: 16px 16px; background: var(--fc-white); border: 1.5px solid var(--fc-border); border-radius: var(--fc-radius-md); cursor: pointer; transition: var(--fc-transition); text-align: left; } .fc-dash-action:hover { border-color: var(--fc-primary-light); box-shadow: var(--fc-shadow-md); transform: translateY(-2px); } .fc-dash-action__icon { width: 48px; height: 48px; border-radius: 50%; display: flex; align-items: center; justify-content: center; } .fc-dash-action__icon--blue { background: rgba(46,134,171,.1); color: var(--fc-accent); } .fc-dash-action__icon--purple { background: rgba(126,87,194,.1); color: #7E57C2; } .fc-dash-action__icon--gold { background: rgba(200,168,75,.1); color: var(--fc-secondary); } .fc-dash-action__icon--teal { background: rgba(0,150,136,.1); color: #009688; } .fc-dash-action__icon--red { background: rgba(192,57,43,.1); color: var(--fc-danger); } .fc-dash-action__icon--slate { background: rgba(100,116,139,.1); color: #64748b; } .fc-dash-action__text { display: flex; flex-direction: column; gap: 2px; } .fc-dash-action__label { font-size: 13px; font-weight: 600; color: var(--fc-primary); } .fc-dash-action__sub { font-size: 11px; color: var(--fc-text-light); } @media (max-width: 768px) { .fc-hide-mobile { display: none !important; } } @media (min-width: 769px) { .fc-hide-desktop { display: none !important; } } /* Transaction table */ .fc-dash-txn-wrap { border-radius: var(--fc-radius-md); box-shadow: var(--fc-shadow-sm); } .fc-dash-txn-table { width: 100%; border-collapse: collapse; background: var(--fc-white); font-size: 14px; } .fc-dash-txn-table thead tr { background: var(--fc-bg-lighter); border-bottom: 2px solid var(--fc-border); } .fc-dash-txn-table th { padding: 14px 16px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .8px; color: var(--fc-text-light); text-align: left; white-space: nowrap; } .fc-txn-th-amount { text-align: right; } .fc-dash-txn-table tbody tr { border-bottom: 1px solid var(--fc-border); transition: background .15s; } .fc-dash-txn-table tbody tr:last-child { border-bottom: none; } .fc-dash-txn-table tbody tr:hover { background: var(--fc-bg-lighter); } .fc-dash-txn-table td { padding: 14px 16px; color: var(--fc-text-dark); vertical-align: middle; } .fc-txn-ref { font-family: 'Courier New', monospace; font-size: 12px; background: var(--fc-bg-light); padding: 2px 7px; border-radius: 4px; color: var(--fc-text-medium); white-space: nowrap; } .fc-txn-desc { display: block; font-weight: 500; } .fc-txn-date { display: block; color: var(--fc-text-light); font-size: 12px; margin-top: 2px; white-space: nowrap; } .fc-txn-acct { font-size: 12px; color: var(--fc-text-light); letter-spacing: .5px; } .fc-txn-badge { display: inline-block; padding: 3px 10px; border-radius: 99px; font-size: 11px; font-weight: 700; text-transform: capitalize; } .fc-txn-badge--credit { background: rgba(30,132,73,.1); color: var(--fc-success); } .fc-txn-badge--debit { background: rgba(192,57,43,.1); color: var(--fc-danger); } .fc-txn-badge--transfer { background: rgba(46,134,171,.1); color: var(--fc-accent); } .fc-txn-badge--fee { background: rgba(212,172,13,.1); color: var(--fc-warning); } .fc-txn-badge--interest { background: rgba(126,87,194,.1); color: #7E57C2; } .fc-txn-amount-cell { vertical-align: middle; } .fc-txn-amount-wrap { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; } .fc-txn-amount { font-weight: 700; white-space: nowrap; } .fc-txn-amount--credit { color: var(--fc-success); } .fc-txn-amount--debit { color: var(--fc-danger); } .fc-txn-amount--loan { color: #7c3aed; } .fc-txn-status { display: inline-block; padding: 3px 10px; border-radius: 20px; font-size: 11px; font-weight: 600; text-transform: capitalize; } .fc-txn-status--pending { background: rgba(212,172,13,.12); color: var(--fc-warning); } .fc-txn-status--completed { background: rgba(30,132,73,.1); color: var(--fc-success); } .fc-txn-status--failed { background: rgba(192,57,43,.1); color: var(--fc-danger); } .fc-txn-status--reversed { background: rgba(149,165,166,.15); color: var(--fc-text-light); } .fc-txn-status--approved { background: #dbeafe; color: #1d4ed8; } .fc-txn-status--active { background: #dcfce7; color: #15803d; } .fc-txn-status--rejected { background: #fee2e2; color: #b91c1c; } .fc-txn-status--closed { background: #f1f5f9; color: #64748b; } /* Empty state */ .fc-dash-empty { background: var(--fc-white); border-radius: var(--fc-radius-md); padding: 60px 32px; text-align: center; box-shadow: var(--fc-shadow-sm); } .fc-dash-empty__icon { width: 80px; height: 80px; border-radius: 50%; background: var(--fc-bg-light); display: flex; align-items: center; justify-content: center; margin: 0 auto 20px; color: var(--fc-border); } .fc-dash-empty h4 { font-family: var(--fc-font-heading); font-size: 20px; color: var(--fc-primary); margin-bottom: 8px; } .fc-dash-empty p { font-size: 14px; color: var(--fc-text-light); max-width: 340px; margin: 0 auto; } /* Profile */ .fc-dash-profile { background: var(--fc-white); border-radius: var(--fc-radius-md); padding: 28px; box-shadow: var(--fc-shadow-sm); display: flex; gap: 28px; align-items: flex-start; } .fc-dash-profile__avatar { width: 64px; height: 64px; border-radius: 50%; background: linear-gradient(135deg, var(--fc-primary), var(--fc-primary-mid)); color: var(--fc-secondary); display: flex; align-items: center; justify-content: center; font-family: var(--fc-font-heading); font-size: 22px; font-weight: 700; flex-shrink: 0; } .fc-dash-profile__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; flex: 1; } .fc-dash-profile__item { display: flex; flex-direction: column; gap: 4px; } .fc-dash-profile__item label { font-size: 11px; font-weight: 700; letter-spacing: .8px; text-transform: uppercase; color: var(--fc-text-light); } .fc-dash-profile__item span { font-size: 14px; font-weight: 500; color: var(--fc-primary); } /* Status badges */ .fc-dash-status-badge { display: inline-block; padding: 4px 12px; border-radius: 99px; font-size: 12px; font-weight: 700; text-transform: capitalize; } .fc-dash-status-badge--active { background: rgba(30,132,73,.1); color: var(--fc-success); } .fc-dash-status-badge--inactive { background: rgba(212,172,13,.1); color: var(--fc-warning); } .fc-dash-status-badge--suspended { background: rgba(192,57,43,.1); color: var(--fc-danger); } .fc-dash-status-badge--banned { background: rgba(192,57,43,.15); color: var(--fc-danger); } .fc-dash-status-badge--frozen { background: rgba(52,152,219,.1); color: #2980b9; } .fc-dash-status-badge--closed { background: rgba(149,165,166,.15); color: #7f8c8d; } /* No account error */ .fc-dash-no-account, .fc-dashboard-no-account { text-align: center; padding: 60px 24px; color: var(--fc-text-medium); display: flex; flex-direction: column; align-items: center; gap: 16px; } /* ============================================================ DASHBOARD LOGIN PROMPT ============================================================ */ .fc-dash-login-wrap { min-height: 100vh; background: var(--fc-bg-light); display: flex; align-items: center; justify-content: center; padding: 60px 24px; } .fc-dash-login-card { background: var(--fc-white); border-radius: var(--fc-radius-lg); padding: 48px 44px; width: 100%; max-width: 440px; box-shadow: var(--fc-shadow-lg); } .fc-dash-login-logo { display: flex; align-items: center; gap: 10px; justify-content: center; margin-bottom: 28px; } .fc-dash-login-logo__icon { width: 48px; height: 48px; border-radius: var(--fc-radius-md); background: var(--fc-primary); color: var(--fc-secondary); display: flex; align-items: center; justify-content: center; } .fc-dash-login-logo__text { font-family: var(--fc-font-heading); font-size: 22px; font-weight: 700; color: var(--fc-primary); } .fc-dash-login-title { font-family: var(--fc-font-heading); font-size: 26px; font-weight: 700; color: var(--fc-primary); text-align: center; margin-bottom: 8px; } .fc-dash-login-sub { font-size: 14px; color: var(--fc-text-light); text-align: center; margin-bottom: 32px; line-height: 1.6; } .fc-dash-login-form { display: flex; flex-direction: column; gap: 20px; } .fc-dash-login-submit { width: 100%; justify-content: center; height: 50px; font-size: 15px; display: flex; align-items: center; gap: 8px; } .fc-dash-login-divider { display: flex; align-items: center; gap: 12px; margin: 20px 0; color: var(--fc-text-light); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; } .fc-dash-login-divider::before, .fc-dash-login-divider::after { content: ''; flex: 1; height: 1px; background: var(--fc-border); } .fc-dash-login-register { width: 100%; display: flex; align-items: center; justify-content: center; gap: 8px; height: 48px; font-size: 14px; } .fc-dash-login-security { display: flex; align-items: center; justify-content: center; gap: 7px; font-size: 11px; color: var(--fc-text-light); margin-top: 20px; } .fc-dash-login-security svg { color: var(--fc-success); } /* OTP digit boxes */ .fc-otp-boxes { display: flex; gap: 10px; justify-content: center; margin: 24px 0 8px; } .fc-otp-box { width: 48px; height: 58px; border-radius: var(--fc-radius-md); border: 1.5px solid var(--fc-border); background: var(--fc-white); font-size: 22px; font-weight: 700; text-align: center; color: var(--fc-primary); transition: border-color .15s, box-shadow .15s; -moz-appearance: textfield; } .fc-otp-box::-webkit-outer-spin-button, .fc-otp-box::-webkit-inner-spin-button { -webkit-appearance: none; } .fc-otp-box:focus { outline: none; border-color: var(--fc-primary); box-shadow: 0 0 0 3px rgba(17,59,109,.1); } .fc-otp-box--filled { border-color: var(--fc-primary); background: var(--fc-primary-ultra-light, #f0f4ff); } .fc-otp-resend-row { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 16px; font-size: 13px; color: var(--fc-text-light); } .fc-otp-countdown { font-size: 13px; font-weight: 600; color: var(--fc-text-light); } html[data-fc-theme="dark"] .fc-otp-box { background: var(--fc-dark-card, #1e293b); border-color: var(--fc-dark-border, #334155); color: var(--fc-secondary, #f0c040); } html[data-fc-theme="dark"] .fc-otp-box:focus { border-color: var(--fc-secondary, #f0c040); box-shadow: 0 0 0 3px rgba(240,192,64,.12); } html[data-fc-theme="dark"] .fc-otp-box--filled { border-color: var(--fc-secondary, #f0c040); background: rgba(240,192,64,.08); } /* Forgot / Reset password panels */ .fc-form-label__btn { background: none; border: none; padding: 0; margin: 0; cursor: pointer; font-size: inherit; font-family: inherit; line-height: inherit; } .fc-dl-back-wrap { display: flex; justify-content: center; margin-top: 20px; } .fc-dl-back-link { background: none; border: none; padding: 0; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--fc-text-light); transition: color .15s; } .fc-dl-back-link:hover { color: var(--fc-primary); } .fc-dl-success-msg { background: var(--fc-success-light, #f0fdf4); border: 1px solid var(--fc-success, #22c55e); color: var(--fc-success-dark, #166534); border-radius: var(--fc-radius-sm); padding: 12px 16px; font-size: 13px; line-height: 1.5; text-align: center; } html[data-fc-theme="dark"] .fc-dl-success-msg { background: rgba(34,197,94,.12); color: #86efac; border-color: rgba(34,197,94,.3); } /* fc-btn-outline-dark used in register and dashboard */ .fc-btn-outline-dark { background: transparent; border: 1.5px solid var(--fc-primary-light); color: var(--fc-primary); padding: 10px 20px; border-radius: var(--fc-radius-sm); font-size: 14px; font-weight: 600; cursor: pointer; transition: var(--fc-transition); display: inline-flex; align-items: center; gap: 8px; font-family: var(--fc-font-body); } .fc-btn-outline-dark:hover { background: var(--fc-primary); color: var(--fc-white); border-color: var(--fc-primary); } /* ============================================================ DASHBOARD HEADER — PROFILE BUTTON + DROPDOWN ============================================================ */ .fc-dash-header__profile { position: relative; flex-shrink: 0; } .fc-dash-header__profile-btn { display: flex; align-items: center; justify-content: center; gap: 6px; width: auto; height: 38px; border-radius: 20px; border: 2px solid rgba(255,255,255,.25); background: transparent; cursor: pointer; padding: 0 10px 0 8px; transition: border-color .2s, background .2s; } .fc-dash-header__profile-icon { color: rgba(255,255,255,.85); flex-shrink: 0; } .fc-dash-header__profile-btn:hover, .fc-dash-header__profile-btn[aria-expanded="true"] { border-color: var(--fc-secondary); background: rgba(200,168,75,.12); } .fc-dash-header__profile-avatar { display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; background: linear-gradient(135deg, var(--fc-secondary), var(--fc-secondary-light)); color: var(--fc-primary); font-size: 11px; font-weight: 700; letter-spacing: .5px; line-height: 1; user-select: none; } /* Dropdown */ .fc-dash-profile-dropdown { position: absolute; top: calc(100% + 10px); right: 0; width: 220px; background: var(--fc-white); border-radius: var(--fc-radius-md); box-shadow: var(--fc-shadow-lg); border: 1px solid var(--fc-border); overflow: hidden; opacity: 0; transform: translateY(-8px) scale(.97); pointer-events: none; transition: opacity .18s ease, transform .18s ease; z-index: 200; } .fc-dash-profile-dropdown.open { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; } .fc-dash-profile-dropdown__header { padding: 14px 16px 12px; border-bottom: 1px solid var(--fc-border); background: var(--fc-bg-lighter); } .fc-dash-profile-dropdown__name { font-size: 13px; font-weight: 700; color: var(--fc-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .fc-dash-profile-dropdown__email { font-size: 11px; color: var(--fc-text-light); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .fc-dash-profile-dropdown__items { padding: 6px 0; } .fc-dash-profile-dropdown__item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 16px; font-size: 13px; font-weight: 500; color: var(--fc-text-dark); background: none; border: none; cursor: pointer; text-align: left; text-decoration: none; transition: background .15s; font-family: var(--fc-font-body); } .fc-dash-profile-dropdown__item:hover { background: var(--fc-bg-light); color: var(--fc-primary); } .fc-dash-profile-dropdown__item--danger { color: var(--fc-danger); } .fc-dash-profile-dropdown__item--danger:hover { background: #fdf2f2; color: var(--fc-danger); } /* ============================================================ PROFILE SECTION ============================================================ */ .fc-profile-wrap { display: flex; flex-direction: column; gap: 20px; } /* Hero card */ .fc-profile-hero { display: flex; align-items: center; gap: 24px; background: linear-gradient(135deg, var(--fc-primary) 0%, var(--fc-primary-mid) 100%); border-radius: var(--fc-radius-md); padding: 28px 32px; color: var(--fc-white); } .fc-profile-hero__avatar { width: 72px; height: 72px; border-radius: 50%; background: linear-gradient(135deg, var(--fc-secondary), var(--fc-secondary-light)); color: var(--fc-primary); display: flex; align-items: center; justify-content: center; font-size: 24px; font-weight: 700; flex-shrink: 0; box-shadow: 0 4px 16px rgba(200,168,75,.35); } .fc-profile-hero__info { flex: 1; min-width: 0; } .fc-profile-hero__name { font-size: 20px; font-weight: 700; color: var(--fc-white); margin-bottom: 4px; } .fc-profile-hero__email { font-size: 13px; color: rgba(255,255,255,.65); margin-bottom: 10px; } .fc-profile-hero__meta { display: flex; gap: 32px; flex-shrink: 0; border-left: 1px solid rgba(255,255,255,.15); padding-left: 32px; } .fc-profile-hero__meta-item { display: flex; flex-direction: column; gap: 3px; } .fc-profile-hero__meta-item label { font-size: 10px; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; color: rgba(255,255,255,.5); } .fc-profile-hero__meta-item span { font-size: 14px; font-weight: 600; color: var(--fc-white); } /* Deposit / Withdraw buttons on balance card */ .fc-dash-balance-actions { display: flex; gap: 12px; margin-top: 20px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,.12); } .fc-dash-bal-action { flex: 1; display: flex; align-items: center; justify-content: center; gap: 7px; padding: 10px 16px; border-radius: var(--fc-radius-sm); border: 1.5px solid rgba(255,255,255,.25); background: rgba(255,255,255,.08); color: var(--fc-white); font-family: var(--fc-font-body); font-size: 13px; font-weight: 600; cursor: pointer; transition: var(--fc-transition); } .fc-dash-bal-action:hover { background: rgba(255,255,255,.16); border-color: rgba(255,255,255,.45); } .fc-dash-bal-action--deposit:hover { background: rgba(40,167,90,.25); border-color: rgba(40,167,90,.6); } .fc-dash-bal-action--withdraw:hover { background: rgba(220,53,69,.22); border-color: rgba(220,53,69,.55); } /* Deposit / Withdraw modals */ .fc-txn-modal { max-width: 400px; padding: 40px 36px 36px; text-align: center; } .fc-txn-modal__icon { width: 56px; height: 56px; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 16px; } .fc-txn-modal__icon--deposit { background: rgba(40,167,90,.12); color: #28a75a; } .fc-txn-modal__icon--withdraw { background: rgba(220,53,69,.10); color: #dc3545; } .fc-txn-modal__title { font-size: 18px; font-weight: 700; color: var(--fc-primary); margin-bottom: 24px; } .fc-txn-modal .fc-form-group { text-align: left; } .fc-txn-modal .fc-profile-actions { justify-content: center; } /* Amount input with $ prefix */ .fc-amount-wrap { position: relative; display: flex; align-items: center; } .fc-amount-prefix { position: absolute; left: 14px; font-size: 14px; font-weight: 600; color: var(--fc-text-light); pointer-events: none; } .fc-amount-input { padding-left: 28px !important; padding-right: 16px !important; } /* Two-column card row */ .fc-profile-cards-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: start; } /* Profile cards */ .fc-profile-card { background: var(--fc-white); border: 1px solid var(--fc-border); border-radius: var(--fc-radius-md); padding: 24px 28px; box-shadow: var(--fc-shadow-sm); } .fc-profile-card__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; gap: 12px; } .fc-profile-card__title { display: flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 700; color: var(--fc-primary); } .fc-profile-card__title svg { color: var(--fc-secondary); } /* Profile grid */ .fc-profile-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px 24px; } .fc-profile-grid--2col { grid-template-columns: repeat(2, 1fr); } .fc-profile-field--full { grid-column: 1 / -1; } /* View mode fields */ .fc-profile-field { display: flex; flex-direction: column; gap: 4px; } .fc-profile-field label { font-size: 10px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; color: var(--fc-text-light); } .fc-profile-field span { font-size: 14px; font-weight: 500; color: var(--fc-primary); word-break: break-word; } /* Edit form helpers */ .fc-field-note { font-style: normal; font-size: 10px; color: var(--fc-text-light); font-weight: 400; } /* ============================================================ WITHDRAW PAGE ============================================================ */ /* Breadcrumb */ .fc-wd-breadcrumb { display: flex; align-items: center; gap: 8px; margin-bottom: 28px; } .fc-wd-breadcrumb__link { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; font-weight: 500; color: var(--fc-text-medium); transition: color .2s; } .fc-wd-breadcrumb__link:hover { color: var(--fc-primary); } .fc-wd-breadcrumb__sep { color: var(--fc-border); font-size: 13px; } .fc-wd-breadcrumb__current { font-size: 13px; color: var(--fc-text-light); } /* Hero */ .fc-wd-hero { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 32px; padding: 28px 32px; background: linear-gradient(135deg, var(--fc-primary) 0%, var(--fc-primary-mid) 100%); border-radius: var(--fc-radius-lg); color: var(--fc-white); } .fc-wd-hero__left { display: flex; align-items: center; gap: 18px; } .fc-wd-hero__icon { width: 52px; height: 52px; border-radius: 50%; background: rgba(255,255,255,.12); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .fc-wd-hero__title { font-family: var(--fc-font-heading); font-size: 24px; font-weight: 700; margin: 0 0 4px; } .fc-wd-hero__sub { font-size: 13px; opacity: .75; margin: 0; } .fc-wd-hero__balance { text-align: right; flex-shrink: 0; } .fc-wd-hero__balance-label { display: block; font-size: 11px; opacity: .7; margin-bottom: 6px; letter-spacing: 1.5px; text-transform: uppercase; } .fc-wd-hero__balance-amount { font-family: var(--fc-font-body); font-size: 38px; font-weight: 600; letter-spacing: -0.5px; font-variant-numeric: tabular-nums; color: var(--fc-secondary-light); line-height: 1; } /* Layout */ .fc-wd-layout { display: flex; flex-direction: column; gap: 20px; } .fc-wd-form { display: flex; flex-direction: column; gap: 20px; } /* Cards */ .fc-wd-card { background: var(--fc-white); border: 1px solid var(--fc-border); border-radius: var(--fc-radius-md); padding: 28px 32px; box-shadow: var(--fc-shadow-sm); } .fc-wd-card__head { display: flex; align-items: center; gap: 12px; margin-bottom: 22px; } .fc-wd-card__step { width: 28px; height: 28px; border-radius: 50%; background: var(--fc-primary); color: var(--fc-white); font-size: 12px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .fc-wd-card__title { font-size: 15px; font-weight: 700; color: var(--fc-primary); margin: 0; } /* Payment method grid */ .fc-pm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; } .fc-pm-radio { position: absolute; opacity: 0; width: 0; height: 0; } .fc-pm-option { cursor: pointer; display: block; } .fc-pm-card { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border: 2px solid var(--fc-border); border-radius: var(--fc-radius-md); background: var(--fc-bg-lighter); transition: var(--fc-transition); position: relative; } .fc-pm-option:hover .fc-pm-card { border-color: var(--fc-primary-light); background: var(--fc-white); } .fc-pm-option--active .fc-pm-card { border-color: var(--fc-primary); background: var(--fc-white); box-shadow: 0 0 0 3px rgba(13,27,42,.06); } .fc-pm-card__icon { width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .fc-pm-card__icon--blue { background: rgba(42,82,152,.12); color: var(--fc-primary-mid); } .fc-pm-card__icon--green { background: rgba(30,132,73,.12); color: var(--fc-success); } .fc-pm-card__icon--gold { background: rgba(200,168,75,.15); color: #a07a1e; } .fc-pm-card__icon--navy { background: rgba(13,27,42,.1); color: var(--fc-primary); } .fc-pm-card__icon--purple { background: rgba(138,43,226,.1); color: #6a0dad; } .fc-pm-card__icon--card { background: #fff; border: 1px solid #e5e7eb; width: 58px; gap: 5px; padding: 0 5px; } .fc-pm-card__icon--mobile { background: rgba(255,204,0,.18); color: #8a6700; } .fc-pm-card__icon--bitcoin { background: rgba(247,147,26,.15); color: #c97000; } .fc-pm-card__icon--paypal { background: #fff; border: 1px solid #dce3f0; } .fc-pm-card__info { flex: 1; min-width: 0; } .fc-pm-card__name { display: block; font-size: 13px; font-weight: 600; color: var(--fc-primary); } .fc-pm-card__desc { display: block; font-size: 11px; color: var(--fc-text-light); margin-top: 2px; } .fc-pm-card__check { width: 20px; height: 20px; border-radius: 50%; background: var(--fc-border); display: flex; align-items: center; justify-content: center; flex-shrink: 0; opacity: 0; transition: all .2s; } .fc-pm-option--active .fc-pm-card__check { background: var(--fc-primary); color: var(--fc-white); opacity: 1; } /* Payment detail field groups */ .fc-pm-fields { animation: fcFadeIn .2s ease; } .fc-pm-fields--hidden { display: none; } /* Payment method modal */ .fc-pm-modal { position: fixed; inset: 0; z-index: 10000; display: flex; align-items: center; justify-content: center; padding: 16px; opacity: 0; pointer-events: none; transition: opacity .22s ease; } .fc-pm-modal--open { opacity: 1; pointer-events: all; } .fc-pm-modal__backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.52); backdrop-filter: blur(3px); } .fc-pm-modal__dialog { position: relative; z-index: 1; background: var(--fc-white); border-radius: var(--fc-radius-lg); width: 100%; max-width: 520px; max-height: 90vh; overflow-y: auto; box-shadow: var(--fc-shadow-lg); transform: translateY(18px) scale(.97); transition: transform .25s cubic-bezier(.34,1.56,.64,1); } .fc-pm-modal--open .fc-pm-modal__dialog { transform: translateY(0) scale(1); } .fc-pm-modal__header { display: flex; align-items: center; justify-content: space-between; padding: 20px 24px 18px; border-bottom: 1px solid var(--fc-border); position: sticky; top: 0; background: var(--fc-white); z-index: 1; } .fc-pm-modal__method-info { display: flex; align-items: center; gap: 12px; } .fc-pm-modal__method-icon { width: 44px; height: 44px; border-radius: 10px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .fc-pm-modal__title { font-size: 15px; font-weight: 700; color: var(--fc-primary); margin: 0; line-height: 1.3; } .fc-pm-modal__subtitle { font-size: 12px; color: var(--fc-text-light); margin: 3px 0 0; } .fc-pm-modal__close { width: 34px; height: 34px; border-radius: 8px; border: 1px solid var(--fc-border); background: transparent; cursor: pointer; display: flex; align-items: center; justify-content: center; color: var(--fc-text-medium); transition: var(--fc-transition); flex-shrink: 0; } .fc-pm-modal__close:hover { background: var(--fc-bg-light); } .fc-pm-modal__body { padding: 22px 24px 4px; } .fc-pm-modal__amount-section { margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--fc-border); } .fc-pm-modal__footer { display: flex; justify-content: flex-end; gap: 12px; padding: 16px 24px 22px; border-top: 1px solid var(--fc-border); position: sticky; bottom: 0; background: var(--fc-white); } @media (max-width: 480px) { .fc-pm-modal__footer { flex-direction: column-reverse; } .fc-pm-modal__footer .fc-btn { width: 100%; justify-content: center; } } html[data-fc-theme="dark"] .fc-pm-modal__dialog, html[data-fc-theme="dark"] .fc-pm-modal__header, html[data-fc-theme="dark"] .fc-pm-modal__footer { background: var(--fc-bg-lighter); } html[data-fc-theme="dark"] .fc-pm-modal__title { color: var(--fc-text-dark); } html[data-fc-theme="dark"] .fc-pm-modal__close { color: var(--fc-text-medium); border-color: var(--fc-border); } html[data-fc-theme="dark"] .fc-pm-modal__close:hover { background: var(--fc-bg-light); } /* 2-column form grid */ .fc-form-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 20px; } .fc-form-group--full { grid-column: 1 / -1; } /* Monospace input (for wallet address) */ .fc-input--mono { font-family: 'Courier New', Courier, monospace; font-size: 13px; letter-spacing: .03em; } /* Prevent iOS/mobile auto-zoom on input focus (requires font-size >= 16px) */ @media (max-width: 768px) { .fc-input, .fc-input--mono, select.fc-input { font-size: 16px; } } /* Form hint */ .fc-form-hint { font-size: 12px; color: var(--fc-text-light); margin-top: 6px; } .fc-form-hint strong { color: var(--fc-primary-mid); } /* Notice / warning */ .fc-wd-notice { display: flex; align-items: flex-start; gap: 8px; padding: 10px 14px; border-radius: var(--fc-radius-sm); font-size: 12px; margin-top: 14px; } .fc-wd-notice--warn { background: rgba(212,172,13,.08); border: 1px solid rgba(212,172,13,.3); color: #7a5c00; } .fc-wd-notice svg { flex-shrink: 0; margin-top: 1px; } /* Actions row */ .fc-wd-actions { display: flex; align-items: center; justify-content: flex-end; gap: 12px; padding: 4px 0; } /* Success panel */ .fc-wd-success { background: var(--fc-white); border: 1px solid var(--fc-border); border-radius: var(--fc-radius-lg); padding: 60px 40px; text-align: center; box-shadow: var(--fc-shadow-sm); } .fc-wd-success--hidden { display: none; } .fc-wd-success__icon { width: 72px; height: 72px; border-radius: 50%; background: rgba(30,132,73,.1); color: var(--fc-success); display: flex; align-items: center; justify-content: center; margin: 0 auto 20px; } .fc-wd-success__title { font-family: var(--fc-font-heading); font-size: 26px; font-weight: 700; color: var(--fc-primary); margin: 0 0 10px; } .fc-wd-success__msg { font-size: 15px; color: var(--fc-text-medium); margin: 0 0 6px; } .fc-wd-success__note { font-size: 13px; color: var(--fc-text-light); margin: 0 0 28px; } @keyframes fcFadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } } /* ── Responsive ── */ @media (max-width: 768px) { .fc-wd-hero { flex-direction: column; align-items: flex-start; padding: 22px 20px; } .fc-wd-hero__balance { text-align: left; } .fc-wd-hero__balance-amount { font-size: 28px; } .fc-wd-card { padding: 20px 18px; } .fc-pm-grid { grid-template-columns: 1fr 1fr; } .fc-form-grid-2 { grid-template-columns: 1fr; } .fc-form-group--full { grid-column: 1; } .fc-wd-actions { flex-direction: column-reverse; } .fc-wd-actions .fc-btn { width: 100%; justify-content: center; } } @media (max-width: 480px) { .fc-pm-grid { grid-template-columns: 1fr; } .fc-wd-hero__title { font-size: 20px; } } .fc-textarea { resize: vertical; min-height: 60px; line-height: 1.5; } .fc-input:disabled { background: var(--fc-bg-light); color: var(--fc-text-light); cursor: not-allowed; opacity: .8; } /* Profile messages */ .fc-profile-msg { font-size: 13px; margin-top: 12px; min-height: 18px; } .fc-profile-msg--success { color: var(--fc-success); } .fc-profile-msg--error { color: var(--fc-danger); } /* Profile action buttons row */ .fc-profile-actions { display: flex; align-items: center; justify-content: flex-end; gap: 10px; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--fc-border); } /* Profile page body padding */ .fc-profile-page-wrap { padding: 32px 0 48px; } /* Back to Dashboard button in profile header */ .fc-profile-back-btn { border-color: rgba(255,255,255,.25) !important; color: rgba(255,255,255,.8) !important; } .fc-profile-back-btn:hover { background: rgba(255,255,255,.08) !important; color: var(--fc-white) !important; } .fc-profile-back-btn svg { margin-right: 5px; } /* ============================================================ BIOMETRICS CARD ============================================================ */ /* Status badge next to the card title */ .fc-bio-badge { display: inline-flex; align-items: center; font-size: 11px; font-weight: 600; letter-spacing: .5px; text-transform: uppercase; padding: 3px 10px; border-radius: 20px; } .fc-bio-badge--on { background: rgba(30,132,73,.12); color: var(--fc-success); } .fc-bio-badge--off { background: rgba(107,122,153,.12); color: var(--fc-text-light); } /* Device list */ .fc-bio-devices { margin: 8px 0 4px; } .fc-bio-no-devices { font-size: 13px; color: var(--fc-text-light); padding: 12px 0 4px; } .fc-bio-device-item { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 14px; border: 1px solid var(--fc-border); border-radius: var(--fc-radius-sm); margin-bottom: 8px; background: var(--fc-bg-lighter); transition: var(--fc-transition); } .fc-bio-device-item:hover { border-color: var(--fc-primary-light); } .fc-bio-device-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .fc-bio-device-name { font-size: 14px; font-weight: 600; color: var(--fc-text-dark); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .fc-bio-device-meta { font-size: 12px; color: var(--fc-text-light); } /* Remove button */ .fc-btn-xs { padding: 5px 10px; font-size: 12px; gap: 5px; } .fc-bio-remove-btn { flex-shrink: 0; border: 1px solid var(--fc-danger); color: var(--fc-danger); background: transparent; border-radius: var(--fc-radius-sm); display: inline-flex; align-items: center; gap: 5px; padding: 5px 10px; font-size: 12px; font-weight: 500; cursor: pointer; transition: var(--fc-transition); white-space: nowrap; } .fc-bio-remove-btn:hover:not(:disabled) { background: rgba(192,57,43,.08); } .fc-bio-remove-btn:disabled { opacity: .5; cursor: not-allowed; } /* Name input row inside the actions area */ .fc-bio-actions { flex-wrap: wrap; row-gap: 10px; } .fc-bio-name-wrap { flex: 1 1 220px; margin: 0; } .fc-bio-name-wrap .fc-form-label { margin-bottom: 6px; } /* Dashboard login biometrics button */ .fc-dash-login-biometrics { width: 100%; justify-content: center; gap: 8px; } /* Password hint line */ .fc-profile-pw-hint { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--fc-text-light); padding: 12px 0; } .fc-profile-pw-hint svg { flex-shrink: 0; color: var(--fc-secondary); } /* ============================================================ RESPONSIVE — REGISTER + DASHBOARD ============================================================ */ @media (max-width: 1024px) { .fc-register-wrap { grid-template-columns: 300px 1fr; } .fc-register-form-panel { padding: 36px 32px; } .fc-dash-accounts-grid { grid-template-columns: 1fr; } .fc-dash-stats { flex-direction: row; } .fc-dash-stat-card { flex: 1; } .fc-dash-profile__grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 768px) { .fc-register-wrap { grid-template-columns: 1fr; padding-top: 32px; } .fc-register-sidebar { display: none; } .fc-register-form-panel { padding: 32px 24px; } .fc-steps { gap: 0; } .fc-step__label { display: none; } .fc-step__connector { margin: 0 6px; } .fc-form-row--2 { flex-direction: column; } .fc-register-trust-bar__inner { gap: 16px; } .fc-register-trust-bar__inner span { font-size: 11px; } .fc-dash-header__date { display: none; } .fc-dash-header__status { display: none; } .fc-dash-balance-card { padding: 24px; } .fc-dash-balance-card__num { font-size: 32px; } .fc-dash-balance-card__currency { font-size: 32px; } .fc-dash-actions { gap: 8px; } .fc-dash-action { min-width: 140px; padding: 12px; } .fc-dash-action__icon { width: 40px; height: 40px; } .fc-dash-profile { flex-direction: column; gap: 20px; } .fc-dash-profile__grid { grid-template-columns: 1fr 1fr; } .fc-profile-hero { flex-wrap: wrap; gap: 16px; padding: 20px; } .fc-profile-hero__meta { border-left: none; padding-left: 0; border-top: 1px solid rgba(255,255,255,.15); padding-top: 16px; width: 100%; gap: 20px; } .fc-profile-grid { grid-template-columns: 1fr 1fr; } .fc-profile-card { padding: 20px; } /* Profile page input field overflow fix */ .fc-profile-grid .fc-form-group { min-width: 0; } .fc-profile-grid .fc-input { overflow: hidden; text-overflow: ellipsis; } } @media (max-width: 480px) { .fc-register-form-panel { padding: 24px 20px; } .fc-dash-header__greeting { display: none; } .fc-dash-header__divider { display: none; } .fc-dash-balance-card__num { font-size: 28px; } .fc-dash-balance-card__currency { font-size: 28px; } .fc-dash-stats { flex-wrap: wrap; } .fc-dash-actions { justify-content: space-between; } .fc-dash-action { max-width: none; min-width: 0; flex: 1 1 calc(50% - 8px); } .fc-dash-profile__grid { grid-template-columns: 1fr; } .fc-dash-login-card { padding: 36px 24px; } .fc-profile-cards-row { grid-template-columns: 1fr; } .fc-profile-grid { grid-template-columns: 1fr; } .fc-profile-hero__meta { gap: 16px; flex-wrap: wrap; } .fc-profile-actions { flex-direction: column-reverse; } .fc-profile-actions .fc-btn { width: 100%; justify-content: center; } /* Profile page input field overflow fix */ .fc-profile-grid .fc-form-group { min-width: 0; } .fc-profile-grid .fc-input { padding: 0 14px; overflow: hidden; text-overflow: ellipsis; } } /* ============================================================ DARK MODE — EXTENDED OVERRIDES Covers Profile, Deposit, Withdraw, and Transactions pages. --fc-white is intentionally never remapped (used as text on dark surfaces); card backgrounds must be overridden explicitly. ============================================================ */ /* ── Profile information cards ── */ html[data-fc-theme="dark"] .fc-profile-card { background: #192338; } html[data-fc-theme="dark"] .fc-profile-card__title, html[data-fc-theme="dark"] .fc-profile-field span { color: var(--fc-text-dark); } /* ── btn-outline-dark (Edit / Cancel buttons) on dark background ── */ html[data-fc-theme="dark"] .fc-btn-outline-dark { color: var(--fc-text-medium); border-color: rgba(255,255,255,.2); } html[data-fc-theme="dark"] .fc-btn-outline-dark:hover { background: rgba(255,255,255,.1); color: var(--fc-text-dark); border-color: rgba(255,255,255,.4); } /* ── Profile header dropdown (appears on all dashboard pages) ── */ html[data-fc-theme="dark"] .fc-dash-profile-dropdown { background: #192338; border-color: rgba(255,255,255,.1); } html[data-fc-theme="dark"] .fc-dash-profile-dropdown__name { color: var(--fc-text-dark); } html[data-fc-theme="dark"] .fc-dash-profile-dropdown__item--danger:hover { background: rgba(192,57,43,.2); } /* ── Deposit / Withdraw page cards ── */ html[data-fc-theme="dark"] .fc-wd-card { background: #192338; } html[data-fc-theme="dark"] .fc-wd-card__title, html[data-fc-theme="dark"] .fc-pm-card__name { color: var(--fc-text-dark); } html[data-fc-theme="dark"] .fc-pm-card { background: #131c2d; } html[data-fc-theme="dark"] .fc-pm-option:hover .fc-pm-card, html[data-fc-theme="dark"] .fc-pm-option--active .fc-pm-card { background: #1e2d4a; } html[data-fc-theme="dark"] .fc-wd-success { background: #192338; } html[data-fc-theme="dark"] .fc-wd-success__title, html[data-fc-theme="dark"] .fc-wd-success__msg { color: var(--fc-text-dark); } html[data-fc-theme="dark"] .fc-wd-notice--warn { background: rgba(212,172,13,.12); border-color: rgba(212,172,13,.25); color: #c8a84b; } html[data-fc-theme="dark"] .fc-form-hint strong { color: var(--fc-accent-light); } /* ── Form inputs in dark mode ── */ html[data-fc-theme="dark"] .fc-input { background: #0E1624; border-color: rgba(255,255,255,.12); color: var(--fc-text-dark); } html[data-fc-theme="dark"] .fc-input::placeholder { color: var(--fc-text-light); } html[data-fc-theme="dark"] .fc-input:focus { background: #131C2D; border-color: rgba(255,255,255,.25); box-shadow: 0 0 0 3px rgba(200,168,75,.15); } html[data-fc-theme="dark"] .fc-input:disabled { background: rgba(255,255,255,.05); color: var(--fc-text-light); opacity: 0.6; } html[data-fc-theme="dark"] .fc-form-label { color: var(--fc-text-dark); } html[data-fc-theme="dark"] .fc-amount-prefix { color: var(--fc-text-medium); } html[data-fc-theme="dark"] optgroup, html[data-fc-theme="dark"] option { background: #0E1624; color: var(--fc-text-dark); } /* ── Transaction page — stat cards, filter bar, table wrapper ── */ html[data-fc-theme="dark"] .fc-txn-stat, html[data-fc-theme="dark"] .fc-txn-filters, html[data-fc-theme="dark"] .fc-txn-table-wrap { background: #192338; } /* ── Transaction detail modal (slide-up / dialog) ── */ html[data-fc-theme="dark"] .fc-txn-modal { background: #192338; } html[data-fc-theme="dark"] .fc-txn-modal__header { background: #192338; } html[data-fc-theme="dark"] .fc-txn-modal__close { background: #1e2d4a; color: var(--fc-text-medium); } /* ============================================================ BALANCE CARD & ACTIONS — CARDS PAGE ============================================================ */ /* Cards with balance layout */ .fc-cards-with-balance { display: grid; grid-template-columns: 280px 1fr; gap: 32px; align-items: start; } /* Balance card sidebar */ .fc-balance-sidebar { width: 100%; } /* Balance card container */ .fc-balance-card { background: linear-gradient(135deg, var(--fc-primary) 0%, var(--fc-primary-mid) 100%); border-radius: var(--fc-radius-lg); padding: 32px; color: var(--fc-white); position: relative; overflow: hidden; box-shadow: var(--fc-shadow-lg); } .fc-balance-card::before { content: ''; position: absolute; top: -40px; right: -40px; width: 200px; height: 200px; border-radius: 50%; background: rgba(200, 168, 75, 0.15); pointer-events: none; } /* Label */ .fc-balance-card__label { font-size: 12px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; color: rgba(255, 255, 255, 0.6); margin-bottom: 8px; } /* Amount display */ .fc-balance-card__amount { font-size: clamp(28px, 5vw, 44px); font-weight: 600; line-height: 1; color: var(--fc-white); margin-bottom: 24px; font-family: var(--fc-font-body); letter-spacing: -0.5px; } /* Actions container */ .fc-balance-card__actions { display: flex; gap: 12px; margin-top: 20px; padding-top: 20px; border-top: 1px solid rgba(255, 255, 255, 0.12); position: relative; z-index: 1; } /* Action buttons */ .fc-balance-action { flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 16px; border-radius: var(--fc-radius-sm); border: 1.5px solid rgba(255, 255, 255, 0.25); background: rgba(255, 255, 255, 0.08); color: var(--fc-white); font-family: var(--fc-font-body); font-size: 13px; font-weight: 600; cursor: pointer; transition: var(--fc-transition); flex-direction: column; } .fc-balance-action:hover { background: rgba(255, 255, 255, 0.16); border-color: rgba(255, 255, 255, 0.45); } .fc-balance-action--primary:hover { background: rgba(255, 255, 255, 0.14); border-color: rgba(255, 255, 255, 0.4); } /* Action button text */ .fc-balance-action__text { display: block; color: var(--fc-white); font-size: 13px; font-weight: 600; white-space: nowrap; } /* Action button SVG */ .fc-balance-action svg { width: 20px; height: 20px; color: var(--fc-white); flex-shrink: 0; } /* Dark mode — Balance card */ html[data-fc-theme="dark"] .fc-balance-card { background: linear-gradient(135deg, #1a3a52 0%, #2a5298 100%); box-shadow: 0 8px 28px rgba(0, 0, 0, 0.55); } html[data-fc-theme="dark"] .fc-balance-card__label { color: rgba(255, 255, 255, 0.6); } html[data-fc-theme="dark"] .fc-balance-card__amount { color: var(--fc-white); } html[data-fc-theme="dark"] .fc-balance-card__actions { border-top-color: rgba(255, 255, 255, 0.12); } /* Dark mode — Balance action buttons */ html[data-fc-theme="dark"] .fc-balance-action { background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.25); color: var(--fc-white); } html[data-fc-theme="dark"] .fc-balance-action:hover { background: rgba(255, 255, 255, 0.16); border-color: rgba(255, 255, 255, 0.45); } html[data-fc-theme="dark"] .fc-balance-action__text { color: var(--fc-white); } html[data-fc-theme="dark"] .fc-balance-action svg { color: var(--fc-white); } /* Responsive layout */ @media (max-width: 768px) { .fc-cards-with-balance { grid-template-columns: 1fr; gap: 24px; } .fc-balance-card { padding: 28px 24px; } .fc-balance-action { padding: 10px 12px; font-size: 12px; } .fc-balance-action__text { font-size: 12px; } .fc-balance-action svg { width: 18px; height: 18px; } .fc-balance-card__amount { font-size: clamp(24px, 4vw, 36px); margin-bottom: 20px; } } /* ============================================================ CARDS CAROUSEL — SWIPE SUPPORT ============================================================ */ /* Carousel wrapper */ .fc-cards-carousel { position: relative; width: 100%; overflow: hidden; user-select: none; touch-action: pan-y; } /* Slider wrapper for clipping */ .fc-cards-slider-wrapper { position: relative; width: 100%; overflow: hidden; border-radius: var(--fc-radius-lg); } /* Main slider container */ .fc-cards-slider { display: flex; width: 100%; transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1); will-change: transform; } /* Individual card item */ .fc-card-item-wrapper { flex: 0 0 100%; width: 100%; min-width: 100%; } /* Ensure cards don't shrink */ .fc-real-card { width: 100%; height: auto; } /* Navigation buttons */ .fc-cards-nav { display: flex; align-items: center; justify-content: center; gap: 20px; margin-top: 20px; } .fc-cards-nav__btn { width: 40px; height: 40px; border-radius: 50%; border: 2px solid var(--fc-border); background: var(--fc-white); color: var(--fc-primary); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: var(--fc-transition); padding: 0; flex-shrink: 0; } .fc-cards-nav__btn:hover:not(:disabled) { border-color: var(--fc-primary); background: var(--fc-bg-light); transform: scale(1.08); } .fc-cards-nav__btn:disabled { opacity: 0.5; cursor: not-allowed; } .fc-cards-nav__btn svg { width: 20px; height: 20px; } /* Dots indicator */ .fc-cards-dots { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 16px; } .fc-cards-dot { width: 10px; height: 10px; border-radius: 50%; border: none; background: var(--fc-border); cursor: pointer; transition: var(--fc-transition); padding: 0; flex-shrink: 0; } .fc-cards-dot:hover { background: rgba(13, 27, 42, 0.4); } .fc-cards-dot.is-active { background: var(--fc-primary); width: 28px; border-radius: 50px; } /* Counter */ .fc-cards-counter { font-size: 13px; font-weight: 600; color: var(--fc-text-medium); white-space: nowrap; } .fc-cards-counter__current { color: var(--fc-primary); font-weight: 700; } .fc-cards-counter__separator { margin: 0 4px; color: var(--fc-border); } /* Dark mode support */ html[data-fc-theme="dark"] .fc-cards-nav__btn { background: #192338; border-color: rgba(255, 255, 255, 0.15); color: var(--fc-text-dark); } html[data-fc-theme="dark"] .fc-cards-nav__btn:hover:not(:disabled) { border-color: rgba(255, 255, 255, 0.35); background: #1e2d4a; } html[data-fc-theme="dark"] .fc-cards-dot { background: rgba(255, 255, 255, 0.15); } html[data-fc-theme="dark"] .fc-cards-dot:hover { background: rgba(255, 255, 255, 0.25); } html[data-fc-theme="dark"] .fc-cards-dot.is-active { background: var(--fc-secondary); } html[data-fc-theme="dark"] .fc-cards-counter { color: var(--fc-text-medium); } html[data-fc-theme="dark"] .fc-cards-counter__current { color: var(--fc-secondary); } html[data-fc-theme="dark"] .fc-cards-counter__separator { color: rgba(255, 255, 255, 0.1); } /* Mobile responsiveness */ @media (max-width: 768px) { .fc-cards-nav { gap: 16px; } .fc-cards-nav__btn { width: 36px; height: 36px; } .fc-cards-nav__btn svg { width: 18px; height: 18px; } .fc-cards-dot { width: 8px; height: 8px; } .fc-cards-dot.is-active { width: 24px; } .fc-cards-counter { font-size: 12px; } } /* ============================================================ CARD MENU — Actions Menu Layout ============================================================ */ .fc-real-card__actions { margin-top: 24px; width: 100%; position: relative !important; left: auto !important; top: auto !important; transform: none !important; } .fc-card-item-wrapper { overflow: visible !important; } .fc-card-menu { display: flex; flex-direction: column; gap: 1px; background: var(--fc-border); border-radius: 12px; overflow: hidden; background: rgba(226, 232, 244, 0.6); } .fc-card-menu__item { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 20px; background: var(--fc-white); border: none; cursor: pointer; transition: all 0.2s ease; width: 100%; text-align: left; font-family: var(--fc-font-body); font-size: 15px; font-weight: 500; color: var(--fc-text-dark); min-height: 62px; } .fc-card-menu__item:first-child { border-radius: 11px 11px 0 0; } .fc-card-menu__item:last-child { border-radius: 0 0 11px 11px; } .fc-card-menu__item:hover { background: var(--fc-bg-light); } .fc-card-menu__item:active { background: rgba(42, 82, 152, 0.05); } .fc-card-menu__item--danger { color: var(--fc-danger); } .fc-card-menu__item--danger:hover { background: rgba(192, 57, 43, 0.04); } /* Icon container */ .fc-card-menu__icon { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 8px; background: rgba(13, 27, 42, 0.06); color: var(--fc-primary); flex-shrink: 0; } .fc-card-menu__item--danger .fc-card-menu__icon { background: rgba(192, 57, 43, 0.1); color: var(--fc-danger); } .fc-card-menu__icon svg { width: 20px; height: 20px; } /* Label */ .fc-card-menu__label { flex: 1; font-size: 15px; font-weight: 500; color: inherit; } /* Action indicator (arrow) */ .fc-card-menu__action { display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; color: var(--fc-text-light); flex-shrink: 0; opacity: 0.6; transition: all 0.2s ease; } .fc-card-menu__item:hover .fc-card-menu__action { opacity: 1; color: var(--fc-primary); transform: translateX(2px); } .fc-card-menu__action svg { width: 18px; height: 18px; } /* Toggle Switch */ .fc-card-menu__toggle { display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .fc-card-menu__toggle-input { display: none; } .fc-card-menu__toggle-switch { position: relative; width: 48px; height: 28px; background: #E2E8F4; border-radius: 14px; cursor: pointer; transition: all 0.3s ease; display: inline-block; } .fc-card-menu__toggle-switch::before { content: ''; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; background: white; border-radius: 50%; transition: all 0.3s ease; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); } .fc-card-menu__toggle-input:checked + .fc-card-menu__toggle-switch { background: var(--fc-secondary); } .fc-card-menu__toggle-input:checked + .fc-card-menu__toggle-switch::before { left: 23px; } /* Dark Mode Support */ html[data-fc-theme="dark"] .fc-card-menu { background: rgba(255, 255, 255, 0.08); } html[data-fc-theme="dark"] .fc-card-menu__item { background: #192338; color: var(--fc-text-dark); border-bottom: 1px solid rgba(255, 255, 255, 0.09); } html[data-fc-theme="dark"] .fc-card-menu__item:last-child { border-bottom: none; } html[data-fc-theme="dark"] .fc-card-menu__item:hover { background: #1e2d4a; } html[data-fc-theme="dark"] .fc-card-menu__item:active { background: rgba(200, 168, 75, 0.1); } html[data-fc-theme="dark"] .fc-card-menu__icon { background: rgba(255, 255, 255, 0.08); color: var(--fc-accent); } html[data-fc-theme="dark"] .fc-card-menu__item--danger .fc-card-menu__icon { background: rgba(192, 57, 43, 0.15); color: #FF6B6B; } html[data-fc-theme="dark"] .fc-card-menu__action { color: var(--fc-text-light); } html[data-fc-theme="dark"] .fc-card-menu__item:hover .fc-card-menu__action { color: var(--fc-accent); } html[data-fc-theme="dark"] .fc-card-menu__toggle-switch { background: rgba(255, 255, 255, 0.15); } html[data-fc-theme="dark"] .fc-card-menu__toggle-input:checked + .fc-card-menu__toggle-switch { background: var(--fc-secondary); } /* Responsive */ @media (max-width: 768px) { .fc-card-menu__item { padding: 16px 16px; font-size: 14px; min-height: 56px; } .fc-card-menu__icon { width: 36px; height: 36px; } .fc-card-menu__icon svg { width: 18px; height: 18px; } .fc-card-menu__action { width: 20px; height: 20px; } .fc-card-menu__action svg { width: 16px; height: 16px; } } /* ══════════════════════════════════════════ MOBILE BOTTOM NAV ══════════════════════════════════════════ */ .fc-mobile-nav { display: none; } @media (max-width: 768px) { /* Push all page bodies up so content ends above the nav bar */ #fc-dashboard, #fc-txn-wrap, #fc-profile-page, #fc-cards-wrap, #fc-deposit-wrap, #fc-transfer-wrap, #fc-withdraw-wrap, #fc-loan-wrap, #fc-paybills-wrap { padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px)); } /* Raise bottom-sheet modals above the nav bar */ .fc-dash-txn-modal-overlay, .fc-txn-modal-overlay { padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px)); } .fc-mobile-nav { display: block; position: fixed; bottom: 0; left: 0; width: 100%; z-index: 9999; pointer-events: none; } .fc-mobile-nav__track { display: flex; align-items: center; justify-content: space-around; background: #ffffff; border-radius: 16px 16px 0 0; padding: 10px 8px; padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px)); box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.08), 0 -1px 4px rgba(0, 0, 0, 0.04); pointer-events: all; border-top: 1px solid rgba(0, 0, 0, 0.06); } /* Each nav item */ .fc-mobile-nav__item { display: flex; flex-direction: column; align-items: center; gap: 4px; background: none; border: none; cursor: pointer; padding: 4px 8px; text-decoration: none; color: #9aa5b4; transition: color 0.2s ease; flex: 1; min-width: 0; } .fc-mobile-nav__item:hover { color: #64748b; } /* Active state */ .fc-mobile-nav__item--active { color: var(--fc-secondary, #1a56db); } .fc-mobile-nav__label { font-size: 10px; font-weight: 500; letter-spacing: 0.02em; white-space: nowrap; line-height: 1; } /* Regular icon wrapper */ .fc-mobile-nav__icon { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; } /* Center home icon — styled with accent background, no overflow FAB */ .fc-mobile-nav__icon--fab { width: 44px; height: 44px; background: var(--fc-secondary, #1a56db); border-radius: 14px; box-shadow: 0 4px 12px rgba(26, 86, 219, 0.35); color: #ffffff; margin-top: 0; } .fc-mobile-nav__item--center { color: var(--fc-secondary, #1a56db); margin-top: 0; } .fc-mobile-nav__item--center .fc-mobile-nav__label { margin-top: 2px; } /* Dark mode */ html[data-fc-theme="dark"] .fc-mobile-nav__track { background: #192338; box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.4), 0 -1px 4px rgba(0, 0, 0, 0.2); border-top-color: rgba(255, 255, 255, 0.06); } html[data-fc-theme="dark"] .fc-mobile-nav__item { color: #64748b; } html[data-fc-theme="dark"] .fc-mobile-nav__item--active { color: var(--fc-secondary, #1a56db); } html[data-fc-theme="dark"] .fc-mobile-nav__icon--fab { box-shadow: 0 4px 12px rgba(26, 86, 219, 0.5); } } /* ══════════════════════════════════════════ APP LAYOUT — DESKTOP SIDEBAR ══════════════════════════════════════════ */ .fc-app-layout { display: flex; align-items: stretch; } /* Sidebar: hidden on mobile, shown on desktop */ .fc-desktop-nav { display: none; } /* Body fills remaining width and can shrink on all screen sizes */ .fc-app-layout > .fc-dash-body { flex: 1; min-width: 0; } @media (min-width: 1024px) { .fc-desktop-nav { display: flex; flex-direction: column; width: 240px; flex-shrink: 0; background: var(--fc-white, #ffffff); border-right: 1px solid var(--fc-border, #e2e8f0); padding: 32px 16px 40px; position: sticky; top: 68px; height: calc(100vh - 68px); overflow-y: auto; align-self: flex-start; } .fc-desktop-nav__workspace { font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--fc-text-light, #94a3b8); margin-bottom: 20px; padding: 0 12px; } .fc-desktop-nav__menu { display: flex; flex-direction: column; gap: 2px; } .fc-desktop-nav__item { display: flex; align-items: center; gap: 12px; padding: 11px 14px; border-radius: 10px; text-decoration: none; color: var(--fc-text-medium, #64748b); font-size: 14px; font-weight: 500; transition: background 0.15s ease, color 0.15s ease; border: none; background: none; cursor: pointer; width: 100%; text-align: left; } .fc-desktop-nav__item:hover { background: var(--fc-bg-light, #f8fafc); color: var(--fc-text-dark, #1e293b); text-decoration: none; } .fc-desktop-nav__item--active { background: #e8f0fe; color: var(--fc-secondary, #1a56db); } .fc-desktop-nav__item--active:hover { background: #dde8fd; color: var(--fc-secondary, #1a56db); } .fc-desktop-nav__icon { display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 24px; height: 24px; } .fc-desktop-nav__label { line-height: 1; } /* Dark mode */ html[data-fc-theme="dark"] .fc-desktop-nav { background: #1a2535; border-right-color: #2a3a52; } html[data-fc-theme="dark"] .fc-desktop-nav__workspace { color: #475569; } html[data-fc-theme="dark"] .fc-desktop-nav__item { color: #94a3b8; } html[data-fc-theme="dark"] .fc-desktop-nav__item:hover { background: rgba(255, 255, 255, 0.05); color: #e2e8f0; } html[data-fc-theme="dark"] .fc-desktop-nav__item--active { background: rgba(26, 86, 219, 0.15); color: #6b96f6; } } /* ============================================================ FOOTER ============================================================ */ .fc-footer { display: block !important; visibility: visible !important; opacity: 1 !important; background: var(--fc-primary) !important; color: rgba(255,255,255,.7); font-family: var(--fc-font-body); box-sizing: border-box; width: 100%; max-width: 100%; margin: 0; padding: 0; float: none; position: relative; } /* ── Main grid ── */ .fc-footer__main { padding: 80px 0 60px; } .fc-footer__grid { display: grid; grid-template-columns: 300px repeat(auto-fill, minmax(160px, 1fr)); gap: 48px 32px; align-items: start; } /* ── Brand column ── */ .fc-footer__brand { display: flex; flex-direction: column; gap: 20px; } .fc-footer__logo-link { display: inline-flex; text-decoration: none; } .fc-footer__logo-img { max-height: 48px; max-width: 200px; object-fit: contain; } .fc-footer__logo-mark { display: flex; align-items: center; gap: 10px; color: #fff; } .fc-footer__logo-mark svg { flex-shrink: 0; color: var(--fc-secondary); } .fc-footer__logo-mark span { font-family: var(--fc-font-heading); font-size: 22px; font-weight: 700; color: #fff; letter-spacing: -.3px; line-height: 1; } .fc-footer__tagline { margin: 0; font-size: 14px; line-height: 1.7; color: rgba(255,255,255,.55); max-width: 260px; } /* ── Social icons ── */ .fc-footer__socials { display: flex; gap: 10px; flex-wrap: wrap; } .fc-footer__social-link { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; background: rgba(255,255,255,.08); color: rgba(255,255,255,.65); transition: background .2s, color .2s, transform .2s; text-decoration: none; } .fc-footer__social-link:hover { background: var(--fc-secondary); color: var(--fc-primary); transform: translateY(-2px); } /* ── CTA button ── */ .fc-footer__cta { display: inline-flex; align-items: center; gap: 8px; padding: 11px 20px; border-radius: 8px; background: var(--fc-secondary); color: var(--fc-primary); font-size: 13px; font-weight: 700; text-decoration: none; align-self: flex-start; transition: background .2s, transform .2s; } .fc-footer__cta:hover { background: var(--fc-secondary-light); transform: translateY(-1px); } /* ── Link columns ── */ .fc-footer__col { display: flex; flex-direction: column; gap: 18px; } .fc-footer__col-title { margin: 0; font-family: var(--fc-font-heading); font-size: 15px; font-weight: 700; color: #fff; letter-spacing: .02em; position: relative; padding-bottom: 12px; } .fc-footer__col-title::after { content: ''; position: absolute; bottom: 0; left: 0; width: 28px; height: 2px; background: var(--fc-secondary); border-radius: 2px; } .fc-footer__links { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; } .fc-footer__link { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; color: rgba(255,255,255,.6); text-decoration: none; transition: color .2s, gap .2s; } .fc-footer__link svg { opacity: 0; transition: opacity .2s, transform .2s; transform: translateX(-4px); flex-shrink: 0; } .fc-footer__link:hover { color: var(--fc-secondary); gap: 8px; } .fc-footer__link:hover svg { opacity: 1; transform: translateX(0); } /* ── Contact column ── */ .fc-footer__contact.fc-footer__links { gap: 14px; } .fc-footer__contact-item { display: flex; align-items: flex-start; gap: 10px; font-size: 13.5px; color: rgba(255,255,255,.6); line-height: 1.5; } .fc-footer__contact-item svg { flex-shrink: 0; margin-top: 2px; color: var(--fc-secondary); } .fc-footer__contact-item .fc-footer__link { color: rgba(255,255,255,.6); } .fc-footer__contact-item .fc-footer__link:hover { color: var(--fc-secondary); } /* ── Divider ── */ .fc-footer__divider { height: 1px; background: rgba(255,255,255,.08); } /* ── Bottom bar ── */ .fc-footer__bottom { padding: 24px 0; } .fc-footer__bottom-inner { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; } .fc-footer__copy { margin: 0; font-size: 12.5px; color: rgba(255,255,255,.4); } .fc-footer__badges { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; } .fc-footer__badge { display: flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 600; color: rgba(255,255,255,.35); text-transform: uppercase; letter-spacing: .06em; white-space: nowrap; } .fc-footer__badge svg { color: var(--fc-secondary); opacity: .7; flex-shrink: 0; } /* ── Responsive ── */ @media (max-width: 1100px) { .fc-footer__grid { grid-template-columns: 260px repeat(auto-fill, minmax(140px, 1fr)); gap: 40px 24px; } } @media (max-width: 768px) { .fc-footer__main { padding: 56px 0 40px; } .fc-footer__grid { grid-template-columns: 1fr 1fr; gap: 36px 24px; } .fc-footer__brand { grid-column: 1 / -1; gap: 16px; } .fc-footer__tagline { max-width: 100%; } .fc-footer__bottom-inner { flex-direction: column; align-items: flex-start; gap: 14px; } .fc-footer__badges { gap: 12px; } } @media (max-width: 480px) { .fc-footer__grid { grid-template-columns: 1fr 1fr; gap: 28px 16px; } }