/* AyaSend Global Font Import */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap'); @import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&display=swap'); /* =========================== AyaSend Futuristic Theme Version: 67.0 - Desktop Hero Layout Refinements =========================== */ /* --- Amount box styling (matches Mali & USD boxes perfectly) --- */ .amount-box { margin-top: 8px; } .form-label { font-size: 14px; font-weight: 500; color: #64748b; display: block; margin-bottom: 8px; } /* CSS Variables for control consistency */ :root { --font-ui: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --control-font-size: 16px; --control-font-weight: 500; --control-line-height: 1.25; --control-height: 56px; --control-radius: 12px; --control-pad-x: 16px; /* Hero "Africa" gradient - Light mode by default */ --hero-accent-gradient: linear-gradient(90deg, #007BFF, #00C3FF); --hero-accent-underline: linear-gradient(90deg, #007BFF, #00C3FF); } /* 1) COLOR TOKENS */ :root{ /* Premium Fintech Colors (New Design System) */ --aya-blue: #007BFF; --aya-blue-dark: #1E3A8A; --aya-blue-soft: #E6F0FF; --aya-text-main: #0F172A; --aya-text-muted: #6B7280; --aya-text-soft: #94A3B8; --aya-border-soft: rgba(148, 163, 184, 0.35); --aya-card-bg: #FFFFFF; --aya-section-bg: #F9FAFB; /* Brand - Updated Design System */ --brand-blue-700: #0A5DFF; /* deep azure */ --brand-blue-600: #1666FF; --brand-blue-500: #1E7BFF; /* primary buttons */ --brand-cyan-400: #00E5FF; /* electric cyan */ --brand-cyan-300: #22D3EE; /* fee accent */ /* Legacy Brand (keep for backwards compatibility) */ --blue: #0066FF; --cyan: #00CFFF; --blue-600: #0055CC; --blue-300: #3388FF; /* Neutrals */ --ink-900: #0F172A; --ink-700: #334155; --ink-500: #64748B; --ink-400: #94A3B8; /* Backgrounds / Surfaces */ --surface: #FFFFFF; --surface-muted: #F8FAFC; --surface-dark: #0B1220; --bg: #F9FBFF; /* page background */ /* Legacy Text (keep for backwards compatibility) */ --text: #1C1F26; --text-2: #6B7280; /* States */ --success: #00FF88; --warning: #FFC043; --error: #FF3B30; --info: #3BA3FF; /* Gradients - Updated */ --grad: linear-gradient(90deg, var(--brand-cyan-400) 0%, var(--brand-blue-700) 100%); --grad-hover: linear-gradient(90deg, #00E0FF 0%, #3388FF 100%); --grad-active: linear-gradient(90deg, #0099DD 0%, #0055CC 100%); /* Shadows */ --shadow-card: 0 10px 30px rgba(2,12,27,.12); --shadow-card-hover: 0 4px 12px rgba(0,102,255,.08); --shadow-cta: 0 8px 24px rgba(26,115,232,.25); /* Radii & spacing */ --radius: 12px; --radius-xl: 16px; --radius-sm: 8px; --pad: 16px; /* Alignment Variables */ --flag-w: 48px; --chip-gap: 12px; --edge-pad: 14px; } /* Optional dark mode (enable via , html.dark class, or system setting) */ /* REMOVED: @media (prefers-color-scheme: dark) - Light mode is default! Dark mode variables now ONLY set via html.dark class below */ :root[data-theme="dark"]{ color-scheme: dark; } /* Support for html.dark class (used by theme toggle) */ html.dark{ --bg:#0B1220; --surface:#121B2E; --surface-muted:#0F1628; --text:#F1F5F9; /* ✓ Approved primary text */ --text-2:#94A3B8; /* ✓ Approved secondary text */ /* Premium Fintech Dark Mode Colors - APPROVED PALETTE ONLY */ --aya-blue: #60A5FA; --aya-blue-dark: #3B82F6; --aya-blue-soft: rgba(96, 165, 250, 0.15); --aya-text-main: #F8FAFC; /* ✓ Approved primary text */ --aya-text-muted: #94A3B8; /* ✓ Approved secondary text */ --aya-text-soft: #94A3B8; /* ✓ Approved secondary text (was #64748B) */ --aya-border-soft: rgba(148, 163, 184, 0.2); --aya-card-bg: #1E293B; --aya-section-bg: #0F172A; color-scheme: dark; } /* 1.5) INVERTED CONTROLS (Dark background inputs/selects) */ /* Fix for text visibility in controls with dark backgrounds */ /* ONLY applies when explicitly using .control--invert class */ .control--invert input, .control--invert select, .control--invert textarea, .control--invert .select, .control--invert .select__display { color: var(--text) !important; caret-color: var(--text) !important; } .control--invert input::placeholder, .control--invert textarea::placeholder, .control--invert .select__placeholder { color: var(--text-2) !important; opacity: 1; } .control--invert input:-webkit-autofill, .control--invert input:-webkit-autofill:focus, .control--invert input:-webkit-autofill:hover { -webkit-text-fill-color: var(--text) !important; transition: background-color 9999s ease-out 0s; } .control--invert .currency-chip { color: #0A1324; font-weight: 600; } .control--invert .select__icon svg { stroke: var(--text); fill: var(--text); } .control--invert input[disabled], .control--invert select[disabled], .control--invert textarea[disabled] { color: var(--text-2) !important; -webkit-text-fill-color: var(--text-2) !important; } /* 2) GLOBALS */ html,body{ background:var(--bg); color:var(--text); } /* Page Wrapper - Max width container for content */ .page-wrapper { max-width: 1120px; margin: 0 auto; padding: 0 16px; } .card{ background:var(--surface); border:1px solid #E5EAF2; border-radius:var(--radius); box-shadow:var(--shadow-card); } .card:hover{ box-shadow:var(--shadow-card-hover); } /* 3) LINKS */ a{ color:var(--blue); text-decoration:none; } a:hover{ color:#2B7EFF; } /* 4) CTA BUTTONS */ .btn{ display:inline-flex; align-items:center; justify-content:center; padding:12px 18px; border:0; border-radius:var(--radius-sm); font-weight:600; cursor:pointer; transition:all .25s ease; } .btn-primary{ background:var(--grad) !important; color:#fff !important; box-shadow:var(--shadow-cta); transition: opacity 0.18s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.18s cubic-bezier(0.16, 1, 0.3, 1), background 0.18s cubic-bezier(0.16, 1, 0.3, 1); } .btn-primary:hover{ background:var(--grad-hover) !important; opacity: 0.92; box-shadow: 0 6px 20px rgba(0, 123, 255, 0.25); } .btn-primary:active{ background:var(--grad-active) !important; opacity: 0.85; box-shadow: 0 3px 10px rgba(0, 123, 255, 0.15); transition-duration: 0.08s; } .btn-secondary{ background:var(--blue); color:#fff; } .btn-secondary:hover{ background:#2B7EFF; } .btn-outline{ background:transparent; color:var(--blue); border:1px solid var(--blue); } .btn-outline:hover{ background:rgba(0,102,255,.06); } /* ⚡ SEND NOW BUTTON - Electric Cyan Premium Treatment (ULTRA-STABLE) */ .send-now-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 54px; padding: 12px 24px; border: none; border-radius: 12px; cursor: pointer; font-weight: 600; font-size: 18px; color: #ffffff; text-align: center; letter-spacing: 0.3px; background: linear-gradient(90deg, #00E5FF 0%, #00C4FF 100%); box-shadow: 0 4px 12px rgba(0, 229, 255, 0.25); transition: opacity 0.18s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.18s cubic-bezier(0.16, 1, 0.3, 1), background 0.18s cubic-bezier(0.16, 1, 0.3, 1); text-decoration: none; } /* Hover: elegant cyan aura glow (NO TRANSFORM) */ .send-now-btn:hover { background: linear-gradient(90deg, #00F0FF 0%, #00D2FF 100%); box-shadow: 0 0 16px rgba(0, 229, 255, 0.6); opacity: 0.92; } /* Active: subtle press (NO TRANSFORM) */ .send-now-btn:active { opacity: 0.85; box-shadow: 0 0 8px rgba(0, 229, 255, 0.4); transition-duration: 0.08s; } /* Accessibility: focus outline via glow */ .send-now-btn:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(0, 229, 255, 0.5); } /* Dark mode: softer shadow for premium feel */ :root[data-theme='dark'] .send-now-btn, .dark .send-now-btn { color: #ffffff; box-shadow: 0 4px 12px rgba(0, 229, 255, 0.15); } .dark .send-now-btn:hover { box-shadow: 0 0 16px rgba(0, 229, 255, 0.45); } /* 5) TAGS / CHIPS (Best, Fastest, Confidence, etc.) */ .tag{ display:inline-flex; align-items:center; gap:6px; padding:4px 10px; border-radius:999px; font-size:.78rem; font-weight:600; } .tag-success{ background:rgba(0,255,136,.14); color:#00B86B; } .tag-info{ background:rgba(59,163,255,.14); color:#2C8BE8; } .tag-warning{ background:rgba(255,192,67,.18); color:#A86A00; } /* Dark mode badges - Premium fintech contrast */ .dark .tag-success{ background:rgba(34, 197, 94, 0.15); color:#4ade80; border: 1px solid rgba(34, 197, 94, 0.25); } .dark .tag-info{ background:rgba(59, 130, 246, 0.15); color:#60a5fa; border: 1px solid rgba(59, 130, 246, 0.3); } .dark .tag-warning{ background:rgba(251, 191, 36, 0.15); color:#fbbf24; border: 1px solid rgba(251, 191, 36, 0.3); } .tag-medium{ background:#FFF3BF; color:#7A5D00; } .tag-high{ background:#C6F6D5; color:#0E7A4B; } .tag-low{ background:#FFE1E1; color:#B61E1E; } /* Dark mode confidence badges - Premium fintech contrast */ .dark .tag-medium{ background:rgba(234, 179, 8, 0.15); color:#fbbf24; border: 1px solid rgba(234, 179, 8, 0.3); } .dark .tag-high{ background:rgba(34, 197, 94, 0.15); color:#4ade80; border: 1px solid rgba(34, 197, 94, 0.3); } .dark .tag-low{ background:rgba(239, 68, 68, 0.15); color:#f87171; border: 1px solid rgba(239, 68, 68, 0.3); } /* 6) ALERTS (footnote + select country notice) */ .alert{ border-radius:var(--radius-sm); padding:var(--pad); display:flex; gap:10px; align-items:flex-start; font-size:.95rem; } .alert-info{ background:var(--surface-muted); color:var(--text-2); } .alert-warning{ background:rgba(255,192,67,.15); color:#7A5D00; } .alert-danger{ background:rgba(255,59,48,.12); color:#A21C1C; } /* 7) RATE CARDS: fee/FX highlights */ .rate-fx{ color:var(--text); font-weight:700; } .rate-fee-free{ color:#00B86B; font-weight:700; } .rate-total{ color:var(--text); font-weight:700; } /* 8) FORM ELEMENTS */ input, select, textarea{ background:#fff; color:var(--text); border:1px solid #E5EAF2; border-radius:10px; padding:12px 14px; outline:0; transition:box-shadow .2s ease, border-color .2s; } input:focus, select:focus, textarea:focus{ border-color:#BFD9FF; box-shadow:0 0 0 4px rgba(0,153,255,.12); } /* 9) CTA SECTIONS (hero / promo blocks) */ .section-gradient{ background:var(--grad); color:#fff; border-radius:20px; box-shadow:var(--shadow-cta); } /* 10) UTILITIES */ .text-muted{ color:var(--text-2); } .bg-muted{ background:var(--surface-muted); } /* =========================== 11) PREMIUM DARK-MODE SUPPORT =========================== */ /* Dark mode keeps same gradient for consistency */ html.dark .btn-primary, [data-theme="dark"] .btn-primary { background: var(--grad) !important; color: #fff !important; } /* Keyboard focus ring for WCAG AA contrast */ .btn-primary:focus-visible { outline: 2px solid rgba(34, 211, 238, 0.45); outline-offset: 2px; box-shadow: 0 0 0 4px rgba(138, 223, 255, 0.35), 0 10px 20px rgba(4, 18, 41, 0.18); } /* =========================== 12) PROVIDER PILL BUTTONS =========================== */ /* Base pill */ .btn-provider{ --pill-bg: #FFFFFF; /* default pill bg on light */ --pill-fg: #1C1F26; /* text/icon */ --pill-border: #E5EAF2; --pill-shadow: 0 2px 6px rgba(0,0,0,.06); display:inline-flex; align-items:center; gap:10px; padding:10px 14px; border-radius:999px; font-weight:600; border:1px solid var(--pill-border); background:var(--pill-bg); color:var(--pill-fg); box-shadow: var(--pill-shadow); transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease, color .18s ease; cursor:pointer; text-decoration:none; line-height:1; position: relative; } /* Icon slot (optional) */ .btn-provider .ico{ width:18px; height:18px; display:inline-block; flex:0 0 18px; } /* Hover pulse (subtle opacity+shadow only) */ .btn-provider:hover, .btn-provider:focus-visible{ opacity: 0.9; box-shadow: 0 6px 14px rgba(0,102,255,.12); border-color: #BFD9FF; } /* Active press */ .btn-provider:active{ opacity: 0.85; box-shadow: 0 2px 6px rgba(0,0,0,.08); transition-duration: 0.08s; } /* Keyboard accessibility */ .btn-provider:focus-visible{ outline: 2px solid #8adfff; outline-offset: 2px; } /* Optional shimmer ring on hover - NO SCALE */ .btn-provider::after{ content:""; position:absolute; inset:-2px; border-radius:999px; pointer-events:none; opacity:0; box-shadow: 0 0 0 0 rgba(0, 207, 255, 0.35); transition: opacity .18s ease, box-shadow .18s ease; } .btn-provider:hover::after, .btn-provider:focus-visible::after{ opacity:1; box-shadow: 0 0 0 6px rgba(0, 207, 255, 0.12); } /* Respect reduced motion */ @media (prefers-reduced-motion: reduce){ .btn-provider, .btn-provider::after{ transition: none; } } /* Dark mode adjustments - supports both html.dark and [data-theme="dark"] */ html.dark .btn-provider, [data-theme="dark"] .btn-provider{ --pill-bg: #121B2E; --pill-fg: #F8FAFC; /* ✓ Approved primary text */ --pill-border: #23304D; --pill-shadow: 0 6px 18px rgba(0,0,0,.35); } /* =========================== Brand Variants (optional) =========================== */ /* Use tasteful brand hints (BG stays pill white/dark; text/icon tinted) */ /* Remitly */ .btn-provider--remitly{ --brand:#003087; } .btn-provider--remitly:hover, .btn-provider--remitly:focus-visible{ color: var(--brand); } /* Sendwave */ .btn-provider--sendwave{ --brand:#009FE3; } .btn-provider--sendwave:hover, .btn-provider--sendwave:focus-visible{ color: var(--brand); } /* Western Union - support both short and long slugs */ .btn-provider--wu, .btn-provider--western_union, .btn-provider--westernunion{ --brand:#FFCC00; } .btn-provider--wu:hover, .btn-provider--wu:focus-visible, .btn-provider--western_union:hover, .btn-provider--western_union:focus-visible, .btn-provider--westernunion:hover, .btn-provider--westernunion:focus-visible{ color: #C79F00; } /* MoneyGram - support both short and long slugs */ .btn-provider--mg, .btn-provider--moneygram{ --brand:#E11D2E; } .btn-provider--mg:hover, .btn-provider--mg:focus-visible, .btn-provider--moneygram:hover, .btn-provider--moneygram:focus-visible{ color: var(--brand); } /* Ria */ .btn-provider--ria{ --brand:#F36C21; } .btn-provider--ria:hover, .btn-provider--ria:focus-visible{ color: var(--brand); } /* TapTap Send - support both short and long slugs */ .btn-provider--taptap, .btn-provider--taptapsend{ --brand:#8B5CF6; } .btn-provider--taptap:hover, .btn-provider--taptap:focus-visible, .btn-provider--taptapsend:hover, .btn-provider--taptapsend:focus-visible{ color: var(--brand); } /* Wise */ .btn-provider--wise{ --brand:#9FE870; } .btn-provider--wise:hover, .btn-provider--wise:focus-visible{ color: #7AC34D; } /* WorldRemit */ .btn-provider--worldremit{ --brand:#E02020; } .btn-provider--worldremit:hover, .btn-provider--worldremit:focus-visible{ color: var(--brand); } /* Xoom */ .btn-provider--xoom{ --brand:#6C0BA9; } .btn-provider--xoom:hover, .btn-provider--xoom:focus-visible{ color: var(--brand); } /* =========================== 13) LOADING STATES & SPINNER =========================== */ /* Re-usable inline spinner (uses currentColor) */ .aya-spinner { width: 16px; height: 16px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: ayaSpin .7s linear infinite; display: inline-block; vertical-align: -2px; } @keyframes ayaSpin { to { transform: rotate(360deg); } } /* Generic loading state for any button */ .is-loading, [aria-busy="true"] { pointer-events: none; opacity: 0.75; } /* Provider pill – content swap while loading */ .btn-provider .label { display: inline-flex; align-items: center; gap: 8px; } .btn-provider .when-loading { display: none; } /* Show spinner+text when loading */ .btn-provider.is-loading .label, .btn-provider[aria-busy="true"] .label { display: none; } .btn-provider.is-loading .when-loading, .btn-provider[aria-busy="true"] .when-loading { display: inline-flex; align-items: center; gap: 8px; } /* Primary CTA variant mirrors same pattern */ .btn-primary .label { display: inline-flex; align-items: center; gap: 8px; } .btn-primary .when-loading { display: none; } .btn-primary.is-loading .label, .btn-primary[aria-busy="true"] .label { display: none; } .btn-primary.is-loading .when-loading, .btn-primary[aria-busy="true"] .when-loading { display: inline-flex; align-items: center; gap: 8px; } /* Optional: subtle pulse while loading - NO SCALE */ .is-loading, [aria-busy="true"] { box-shadow: none; /* keep calm during loading */ } /* Respect reduced motion for spinner */ @media (prefers-reduced-motion: reduce) { .aya-spinner { animation: none; border-right-color: currentColor; opacity: 0.5; } } /* =========================== 14) PREMIUM LOGO GLOW =========================== */ /* Logo glow effect for "Get AyaSend App" card */ .logo-pop{ filter: drop-shadow(0 10px 24px rgba(14,165,233,.45)) drop-shadow(0 3px 8px rgba(2,6,23,.25)); } /* =========================== 15) PREMIUM FEE GRADIENT =========================== */ /* Gradient text for $0.00 free fees */ .fee-gradient { background: linear-gradient(90deg, #06B6D4, #0EA5E9); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; font-weight: 600; } /* Fallback for browsers that don't support background-clip: text */ @supports not (-webkit-background-clip: text) { .fee-gradient { color: #06B6D4; } } /* =========================== 17) UNIFIED FEE STYLING =========================== */ /* Unified fee value styling - AyaSend brand cyan */ .fee-value { color: #00B8FF; font-weight: 700; font-size: 1rem; letter-spacing: -0.2px; } /* Dark mode: slightly lighter cyan for contrast */ html.dark .fee-value, html[data-theme="dark"] .fee-value { color: #00D4FF; } /* FREE badge emphasis */ .fee-free { background-color: rgba(0, 184, 255, 0.1); color: #00B8FF; font-weight: 700; padding: 3px 8px; border-radius: 6px; text-transform: uppercase; font-size: 0.85rem; display: inline-block; } /* Dark mode FREE badge */ html.dark .fee-free, html[data-theme="dark"] .fee-free { background-color: rgba(0, 212, 255, 0.15); color: #00D4FF; } /* =========================== 18) BRAND BLUE CONSISTENCY =========================== */ /* Brand color variables */ :root { --ayasend-blue: #007BFF; --ayasend-cyan: #00B8FF; } /* Hero Section "Africa" Keyword - Static fallback */ .highlight-africa { color: var(--ayasend-blue) !important; font-weight: 800; position: relative; } /* Subtle animated gradient shimmer on the text */ .highlight-africa--animated { background: linear-gradient(90deg, var(--ayasend-blue), var(--ayasend-cyan), var(--ayasend-blue)); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent !important; animation: africaShimmer 6s linear infinite; } /* Gentle underline that slides left→right and back */ .highlight-africa--animated::after { content: ""; position: absolute; left: 0; bottom: -0.15em; height: 2px; width: 36%; border-radius: 2px; background: linear-gradient(90deg, var(--ayasend-blue), var(--ayasend-cyan)); opacity: 0.9; animation: africaUnderline 3.8s ease-in-out infinite alternate; } /* Keyframes */ @keyframes africaShimmer { 0% { background-position: 0% 50%; } 100% { background-position: 200% 50%; } } @keyframes africaUnderline { 0% { transform: translateX(0%); width: 28%; } 100% { transform: translateX(180%); width: 36%; } } /* Respect users who prefer reduced motion */ @media (prefers-reduced-motion: reduce) { .highlight-africa--animated, .highlight-africa--animated::after { animation: none !important; background-position: 50% 50%; } .highlight-africa--animated { color: var(--ayasend-blue) !important; background: none; } } /* Ensure excellent contrast in dark mode */ html.dark .highlight-africa, html.dark .highlight-africa--animated, html[data-theme="dark"] .highlight-africa, html[data-theme="dark"] .highlight-africa--animated { filter: saturate(110%); } /* Language Selector Active Button */ .lang-btn-active { background-color: #007BFF !important; color: #FFFFFF !important; font-weight: 600; box-shadow: 0 4px 10px rgba(0, 123, 255, 0.35); border: none; } /* Hover effect for elegance */ .lang-btn-active:hover { background: linear-gradient(90deg, #007BFF 0%, #00B8FF 100%) !important; box-shadow: 0 6px 14px rgba(0, 184, 255, 0.45); } /* Inactive language button */ .lang-btn-inactive { color: #64748b; transition: all 0.2s ease; } .lang-btn-inactive:hover { color: #1e293b; } /* Dark mode inactive */ html.dark .lang-btn-inactive, html[data-theme="dark"] .lang-btn-inactive { color: #94a3b8; } html.dark .lang-btn-inactive:hover, html[data-theme="dark"] .lang-btn-inactive:hover { color: #e2e8f0; } /* =========================== 19) PREMIUM SUBSCRIBE SECTION =========================== */ /* Section Container */ .subscribe-section { padding: 24px; } /* Card */ .subscribe-card { background: linear-gradient(180deg, #F5FAFF 0%, #FFFFFF 100%); border-radius: 12px; padding: 24px; box-shadow: 0 3px 10px rgba(0, 0, 0, 0.04); display: grid; gap: 12px; grid-template-columns: 1fr; max-width: 640px; margin: 0 auto; } /* Email Input */ #subscribe-email { background: #F9FBFF; border: 1.5px solid #D3E3FF; border-radius: 8px; color: #222; padding: 12px 14px; font-size: 0.95rem; transition: border-color 0.25s, box-shadow 0.25s; } #subscribe-email::placeholder { color: #9FB3D9; } #subscribe-email:focus { outline: none; border-color: #007BFF; box-shadow: 0 0 6px rgba(0, 123, 255, 0.28); } /* Subscribe Button (AyaSend gradient) */ #subscribe-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; background: linear-gradient(90deg, #007BFF 0%, #00B8FF 100%); color: #fff; font-weight: 600; border: none; border-radius: 10px; padding: 12px 18px; cursor: pointer; transition: opacity 0.18s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.18s cubic-bezier(0.16, 1, 0.3, 1); box-shadow: 0 4px 12px rgba(0, 123, 255, 0.30); } #subscribe-btn:hover { opacity: 0.9; box-shadow: 0 6px 16px rgba(0, 184, 255, 0.40); } #subscribe-btn:disabled { opacity: 0.65; cursor: not-allowed; } /* Success micro-animation - FADE ONLY, NO SCALE */ @keyframes pop-in { 0% { opacity: 0; } 60% { opacity: 1; } 100% { opacity: 1; } } @keyframes glow { 0% { box-shadow: 0 0 0 0 rgba(0, 184, 255, 0.5); } 100% { box-shadow: 0 0 0 12px rgba(0, 184, 255, 0); } } #subscribe-btn.success { background: linear-gradient(90deg, #00C853 0%, #00E5A8 100%); animation: glow 0.8s ease-out forwards; } #subscribe-btn .btn-check { display: none; font-size: 1.2rem; line-height: 1; } #subscribe-btn.success .btn-label { display: none; } #subscribe-btn.success .btn-check { display: inline; animation: pop-in 0.32s ease-out; } /* Screen-reader helpers */ .sr-only { position: absolute !important; left: -9999px; } .sr-status { position: absolute; left: -9999px; } /* Dark mode */ /* REMOVED: @media (prefers-color-scheme: dark) - Light mode is default! Dark mode styles now ONLY apply via html.dark class below */ html.dark .subscribe-card, html[data-theme="dark"] .subscribe-card { background: linear-gradient(180deg, #0B1626 0%, #0F1E34 100%); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35); } html.dark #subscribe-email, html[data-theme="dark"] #subscribe-email { background: #0E1A2B; border-color: #24446B; color: #F3F6FF; } html.dark #subscribe-email::placeholder, html[data-theme="dark"] #subscribe-email::placeholder { color: #6E8BB8; } /* =========================== 16) PREMIUM CTA MICRO-TWEAKS =========================== */ /* 1. Soft glow behind logo card */ .shadow-glow { box-shadow: 0 8px 30px rgba(11,94,215,0.25), 0 0 60px rgba(21,227,255,0.15); } /* 2. Animated gradient text for "Get the AyaSend App" heading */ .app-heading { /* Light mode: Dark text for visibility */ color: #0f172a; font-weight: 700; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.08); } /* Dark mode: Light gradient with glow */ html.dark .app-heading, html[data-theme="dark"] .app-heading { background: linear-gradient(90deg, #FFFFFF 0%, #B9E6FF 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; text-shadow: 0 0 12px rgba(255, 255, 255, 0.7), 0 0 24px rgba(21, 227, 255, 0.4); animation: glowPulse 3s ease-in-out infinite; } /* Fallback for browsers that don't support background-clip: text (dark mode only) */ @supports not (-webkit-background-clip: text) { html.dark .app-heading, html[data-theme="dark"] .app-heading { color: #FFFFFF; } } /* Animated glow pulse for heading (dark mode only) */ @keyframes glowPulse { 0% { text-shadow: 0 0 8px rgba(255,255,255,0.4), 0 0 16px rgba(21,227,255,0.2); } 50% { text-shadow: 0 0 16px rgba(255,255,255,0.9), 0 0 32px rgba(21,227,255,0.5); } 100% { text-shadow: 0 0 8px rgba(255,255,255,0.4), 0 0 16px rgba(21,227,255,0.2); } } /* 3. Subtext styling - visible in both modes */ .app-subtext { /* Light mode: Slightly darker for visibility */ color: rgba(15, 23, 42, 0.85); text-shadow: 0 1px 1px rgba(255, 255, 255, 0.3); font-weight: 400; } /* Dark mode: Light text */ html.dark .app-subtext, html[data-theme="dark"] .app-subtext { color: rgba(255, 255, 255, 0.95); text-shadow: 0 0 8px rgba(0, 0, 0, 0.25); } /* 4. Download button - tactile, elevated, premium feel */ .download-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; background: linear-gradient(90deg, #007BFF 0%, #00B8FF 100%); color: #FFFFFF; font-weight: 600; font-size: 1rem; padding: 14px 28px; border: none; border-radius: 12px; text-decoration: none; box-shadow: 0 8px 18px rgba(0, 184, 255, 0.35); transition: all 0.3s ease; cursor: pointer; animation: buttonPulse 3s ease-in-out infinite; } .download-btn:hover { transform: translateY(-3px); box-shadow: 0 10px 25px rgba(0, 184, 255, 0.5); background: linear-gradient(90deg, #00A2FF 0%, #0CD6FF 100%); } .download-btn:active { transform: translateY(1px); box-shadow: 0 6px 12px rgba(0, 184, 255, 0.4); } /* Synchronized pulsing glow animation */ @keyframes buttonPulse { 0%, 100% { box-shadow: 0 8px 18px rgba(0,184,255,0.35); } 50% { box-shadow: 0 10px 24px rgba(0,184,255,0.65); } } /* Respect reduced motion */ @media (prefers-reduced-motion: reduce) { .app-heading, .download-btn { animation: none; text-shadow: none; } .download-btn:hover { transform: none; } } /* =========================== 19) ALIGNMENT FIXES & OVERRIDES =========================== */ /* Shared field text start position */ :root { --fieldTextStart: 78px; --brandBlue: #1466FF; --feeValue: #00B6F0; } /* APP CARD: white text for contrast on gradient */ #appCtaCard h3, #appCtaCard .cta-subtext { color: #ffffff !important; text-shadow: 0 1px 2px rgba(0,0,0,.15); } /* SUBSCRIBE BUTTON: match Send Now gradient */ .subscribe-btn, button[type="submit"].subscribe-btn { background: linear-gradient(90deg, #1EC4FF 0%, #1466FF 100%) !important; color: #fff !important; border: 0 !important; border-radius: 12px; font-weight: 700; padding: 14px 18px; box-shadow: 0 6px 16px rgba(20,102,255,.25); } .subscribe-btn:hover { filter: brightness(1.05); } .subscribe-btn:active { opacity: 0.85; transition-duration: 0.08s; } /* =========================== 20) FEE VALUES - CYAN ACCENT =========================== */ /* Fee color: consistent cyan everywhere */ .fee-value, .rate-card .fee .value, .quote-card .fee-value { color: var(--brand-cyan-300) !important; font-weight: 800; } .rate-card .fee .label { color: var(--ink-500); } /* Language pill + hero accent */ .lang-toggle .active { background: var(--brand-blue-700) !important; color: #fff !important; } /* Hero title accent styling moved to .hero-title-accent at bottom of file */ /* Light/dark input visibility */ .country-trigger, .country-select { background: #fff !important; } html.dark .country-trigger, html.dark .country-select { background: #0E1526 !important; color: #E6F0FF; } /* Amount input styling defined at top of file (lines 8-134) */ /* Country chip surface color by mode */ .country-chip, .country-badge { background: var(--surface); color: var(--ink-900); } html.dark .country-chip, html.dark .country-badge { background: #0E1526; color: #E6F0FF; } /* "Get the AyaSend App" card + logo visibility */ .app-card { background: linear-gradient(135deg, var(--brand-cyan-400) 0%, var(--brand-blue-700) 100%); border-radius: 24px; box-shadow: var(--shadow-card); color: #fff; padding: 24px; } .app-card h3, .app-card p, .app-card .subtitle, .app-card .cta-subtext { color: #fff !important; } .app-card .logo { width: 72%; max-width: 420px; aspect-ratio: 16/9; object-fit: contain; filter: drop-shadow(0 6px 18px rgba(0,0,0,.25)); } /* Subscribe button uses the primary gradient */ .subscribe-section .btn-subscribe, .btn-subscribe { background: linear-gradient(90deg, var(--brand-cyan-400) 0%, var(--brand-blue-700) 100%); color: #fff; border: 0; border-radius: 999px; padding: 14px 22px; font-weight: 700; box-shadow: var(--shadow-cta); } /* ALIGNMENT: make the "100" start exactly under the start of "Mali" WITHOUT CSS Grid */ .selector-card { --flag-w: 48px; --chip-gap: 12px; --edge-pad: 14px; } /* Country row layout */ .country-trigger, .country-select { padding: 10px var(--edge-pad); border-radius: 12px; background: var(--surface); display: flex; align-items: center; gap: var(--chip-gap); } /* Amount input styling moved to top of file (lines 8-134) for consistency */ /* Removed duplicate .amount-input block here */ .amount-input-legacy-removed { /* Keeping this comment for reference - actual styling at top of file */ padding: 10px var(--edge-pad); } /* Currency symbol placed absolutely; real text aligned with Mali */ .amount-input .currency-icon, .amount-input .currency-prefix { position: absolute; left: calc(var(--edge-pad)); top: 50%; transform: translateY(-50%); color: var(--ink-500); font-weight: 600; } .amount-input input { padding-left: calc(var(--flag-w) + var(--chip-gap)) !important; background: transparent; border: 0; outline: 0; width: 100%; } /* Hero subtexts in app card must be readable (white) */ .app-card .subtitle { color: #fff; } /* Send Now buttons get the gradient */ .provider-btn, .send-btn, button.btn-send { background: linear-gradient(90deg, var(--brand-cyan-400) 0%, var(--brand-blue-700) 100%) !important; color: #fff !important; border: 0 !important; border-radius: 999px; font-weight: 700; padding: 12px 24px; box-shadow: var(--shadow-cta); } /* =================================================================== AMOUNT INPUT: SURGICAL FIX - Exact match to Mali/USD selectors =================================================================== */ /* Strong, specific selectors that override everything */ .control, .select, .amount-field { font: inherit; } .amount-field input.amount-input, .amount-input[type="text"], .amount-input[type="number"] { font-family: var(--font-ui, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif) !important; font-size: var(--control-font-size, 16px) !important; font-weight: var(--control-font-weight, 500) !important; line-height: var(--control-line-height, 1.25) !important; letter-spacing: 0 !important; -webkit-text-size-adjust: 100% !important; text-rendering: optimizeLegibility; height: var(--control-height, 56px) !important; border-radius: var(--control-radius, 12px) !important; padding-inline: var(--control-pad-x, 16px) !important; text-align: center; appearance: none; -moz-appearance: textfield; } /* Remove number spinners */ .amount-input::-webkit-outer-spin-button, .amount-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } /* Mobile iOS Safari parity */ @media (max-width: 768px) { :root { --control-font-size: 17px; --control-height: 56px; } } /* =================================================================== AMOUNT INPUT: Mobile-first, no caret jumping, identical to selects =================================================================== */ :root{ --control-h: 56px; /* match select height */ --control-radius: 14px; --control-pad-x: 16px; --control-font: 500 18px/1 Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif; --border-200: rgba(17,24,39,.12); --surface-elev-0: #fff; } /* shared shell used by select & amount */ .control{ display:flex; align-items:center; height:var(--control-h); border:1px solid var(--border-200); border-radius:var(--control-radius); background:var(--surface-elev-0); padding:0 var(--control-pad-x); width:100%; box-sizing:border-box; } .amount-shell{ position:relative; } .amount-shell .prefix{ position:absolute; left:16px; top:50%; transform:translateY(-50%); pointer-events:none; opacity:.85; } /* input text matches select text exactly and stays centered vertically */ .amount-input{ -webkit-appearance:none; appearance:none; border:none; outline:none; background:transparent; width:100%; height:100%; padding-left:28px; /* room for $ */ font: var(--control-font); /* same size/weight as select row */ letter-spacing:.2px; caret-color: currentColor; } /* Prevent any size change on focus (this causes caret jumps on iOS) */ .amount-input:focus{ border:none; box-shadow:none; } /* iOS: prevent auto-zoom & text resizing side effects */ @supports (-webkit-touch-callout: none){ .amount-input{ font-size:16px; } /* iOS requires ≥16px to avoid zoom */ } @media (max-width: 768px){ .control{ height:56px; } } /* Remove numeric spinners if type=number is ever used */ .amount-input::-webkit-outer-spin-button, .amount-input::-webkit-inner-spin-button{ -webkit-appearance: none; margin: 0; } .amount-input[type=number]{ -moz-appearance: textfield; } /* =========================== Micro-Animations =========================== */ /* Pulse animation for best provider badge */ @keyframes pulse-glow { 0%, 100% { box-shadow: 0 0 0 0 rgba(6, 182, 212, 0.7); } 50% { box-shadow: 0 0 0 10px rgba(6, 182, 212, 0); } } .pulse-on-best { animation: pulse-glow 2s ease-in-out infinite; } /* Hover lift effect for cards */ .hover-lift { transition: transform 0.2s ease, box-shadow 0.2s ease; } .hover-lift:hover { transform: translateY(-4px); box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15); } /* Success checkmark animation */ @keyframes checkmark-draw { 0% { stroke-dashoffset: 100; } 100% { stroke-dashoffset: 0; } } .checkmark-animate { stroke-dasharray: 100; stroke-dashoffset: 100; animation: checkmark-draw 0.5s ease-out forwards; } /* Fade-in animation for content */ @keyframes fade-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } .fade-in { animation: fade-in 0.4s ease-out; } /* Slide-in from bottom (for mobile sheets) */ @keyframes slide-up { from { transform: translateY(100%); } to { transform: translateY(0); } } .slide-up { animation: slide-up 0.3s ease-out; } /* Shimmer loading effect */ @keyframes shimmer { 0% { background-position: -1000px 0; } 100% { background-position: 1000px 0; } } .shimmer { background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%); background-size: 1000px 100%; animation: shimmer 2s infinite linear; } .dark .shimmer { background: linear-gradient(90deg, #1e293b 25%, #334155 50%, #1e293b 75%); background-size: 1000px 100%; } /* Smooth bounce for buttons - DISABLED (NO SCALE) */ @keyframes bounce-subtle { 0%, 100% { opacity: 1; } 50% { opacity: 1; } } .bounce-subtle { /* Animation disabled for ultra-stability */ } /* Rotate animation for refresh icons */ @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } .spin { animation: spin 1s linear infinite; } /* Accessibility: Respect prefers-reduced-motion */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } /* View Toggle Buttons */ .view-toggle-btn { background: transparent; color: #64748b; cursor: pointer; border: none; } .view-toggle-btn:hover { color: #1e293b; } .view-toggle-btn.active { background: linear-gradient(135deg, #00E5FF 0%, #00C4FF 100%); color: white; font-weight: 600; box-shadow: 0 2px 8px rgba(0, 229, 255, 0.3); } .dark .view-toggle-btn { color: #94a3b8; } .dark .view-toggle-btn:hover { color: #e2e8f0; } .dark .view-toggle-btn.active { color: white; } /* ============================================== ELITE FINTECH WIDGET DESIGN TOKENS Wise/Stripe-grade UI System ============================================== */ :root { /* Typography Scale */ --widget-font-stack: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; /* Labels (small, light gray) */ --widget-label-size: 12px; --widget-label-weight: 500; --widget-label-color: #64748b; --widget-label-spacing: 0.01em; /* Helper text (subtle, under labels) */ --widget-helper-size: 13px; --widget-helper-weight: 400; --widget-helper-color: #94a3b8; /* Currency codes (medium weight) */ --widget-currency-size: 16px; --widget-currency-weight: 600; --widget-currency-color: #1e293b; /* Interactive text (buttons, dropdowns) */ --widget-interactive-size: 16px; --widget-interactive-weight: 500; --widget-interactive-color: #0f172a; /* Primary amounts (large, bold) */ --widget-amount-size-desktop: 32px; --widget-amount-size-mobile: 24px; --widget-amount-weight: 700; --widget-amount-color: #0f172a; --widget-amount-spacing: -0.02em; /* Spacing Scale */ --widget-space-xs: 8px; --widget-space-s: 12px; --widget-space-m: 16px; --widget-space-l: 24px; --widget-space-xl: 32px; /* Color Palette */ --widget-bg: #ffffff; --widget-bg-surface: #f8fafc; --widget-border-soft: #e2e8f0; --widget-border-medium: #cbd5e1; --widget-border-strong: #94a3b8; --widget-accent: #1E7BFF; --widget-accent-hover: #1666FF; --widget-accent-active: #0A5DFF; --widget-success: #10b981; --widget-text-primary: #0f172a; --widget-text-secondary: #64748b; --widget-text-muted: #94a3b8; /* Card Styling */ --widget-card-radius: 16px; --widget-card-padding-mobile: var(--widget-space-m); --widget-card-padding-desktop: var(--widget-space-xl); --widget-card-border: 1px solid rgba(0, 229, 255, 0.1); --widget-card-shadow: 0 2px 8px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.02); } /* Dark Mode Tokens */ /* REMOVED: @media (prefers-color-scheme: dark) - Light mode is default! Widget variables now ONLY set via html.dark class below */ .dark { --widget-bg: #0B1220; --widget-bg-surface: #141d2e; --widget-border-soft: #263044; --widget-border-medium: #374151; --widget-border-strong: #4b5563; --widget-label-color: #94a3b8; --widget-helper-color: #64748b; --widget-currency-color: #e2e8f0; --widget-interactive-color: #f1f5f9; --widget-amount-color: #f8fafc; --widget-text-primary: #f8fafc; --widget-text-secondary: #cbd5e1; --widget-text-muted: #94a3b8; --widget-card-border: 1px solid rgba(18, 214, 255, 0.15); --widget-card-shadow: 0 4px 12px rgba(0, 0, 0, 0.3), 0 2px 4px rgba(0, 0, 0, 0.2); } /* === WIDGET COMPONENTS === */ /* Main Card Wrapper */ .widget-card { background: var(--widget-bg); border: var(--widget-card-border); border-radius: var(--widget-card-radius); box-shadow: var(--widget-card-shadow); padding: var(--widget-card-padding-mobile); transition: box-shadow 0.2s ease; } @media (min-width: 768px) { .widget-card { padding: var(--widget-card-padding-desktop); } } .widget-card:hover { box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08), 0 2px 4px rgba(0, 0, 0, 0.04); } .dark .widget-card:hover { box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4), 0 3px 6px rgba(0, 0, 0, 0.3); } /* Route Select Dropdowns */ .route-select { display: flex; align-items: center; gap: var(--widget-space-s); height: 64px; padding: 0 var(--widget-space-m); background: var(--widget-bg); border: 1px solid var(--widget-border-strong); border-radius: 18px; font-family: var(--widget-font-stack); font-size: var(--widget-interactive-size); font-weight: var(--widget-interactive-weight); color: var(--widget-interactive-color); cursor: pointer; transition: all 0.2s ease; } .route-select:hover { border-color: var(--widget-accent); background: var(--widget-bg-surface); } .route-select:focus { outline: none; border-color: var(--widget-accent); box-shadow: 0 0 0 3px rgba(30, 123, 255, 0.1); } /* Amount Card (connected fields) */ .amount-card { position: relative; background: var(--widget-bg); border: 2px solid var(--widget-border-soft); border-radius: var(--widget-space-m); padding: var(--widget-space-m); transition: all 0.25s ease; } .amount-card:hover { border-color: #00C4FF; box-shadow: 0 0 6px rgba(0, 229, 255, 0.3); } .amount-card:focus-within { border-color: #00E5FF; box-shadow: 0 0 10px rgba(0, 229, 255, 0.6); transform: translateY(-1px); } .dark .amount-card:hover { border-color: #12D6FF; box-shadow: 0 0 8px rgba(18, 214, 255, 0.28); } .dark .amount-card:focus-within { border-color: #3BE8FF; box-shadow: 0 0 12px rgba(59, 232, 255, 0.55); } /* Amount Card Label */ .amount-card-label { font-family: var(--widget-font-stack); font-size: var(--widget-label-size); font-weight: var(--widget-label-weight); color: var(--widget-label-color); letter-spacing: var(--widget-label-spacing); margin-bottom: var(--widget-space-xs); display: block; text-transform: uppercase; } /* Amount Input */ .amount-card-input { width: 100%; border: none; outline: none; background: transparent; font-family: var(--widget-font-stack); font-size: var(--widget-amount-size-mobile); font-weight: var(--widget-amount-weight); color: var(--widget-amount-color); letter-spacing: var(--widget-amount-spacing); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } @media (min-width: 768px) { .amount-card-input { font-size: var(--widget-amount-size-desktop); } } .amount-card-input::placeholder { color: var(--widget-text-muted); opacity: 0.6; } /* Currency Badge */ .currency-badge { font-family: var(--widget-font-stack); font-size: var(--widget-currency-size); font-weight: var(--widget-currency-weight); color: var(--widget-currency-color); background: var(--widget-bg-surface); padding: 4px 10px; border-radius: 6px; margin-top: var(--widget-space-xs); } /* Quick Amount Chips */ .amount-chip { height: 40px; padding: 0 20px; border: 1px solid var(--widget-border-medium); border-radius: 20px; background: var(--widget-bg); font-family: var(--widget-font-stack); font-size: 14px; font-weight: 500; color: var(--widget-text-secondary); cursor: pointer; transition: all 0.2s ease; white-space: nowrap; } .amount-chip:hover { border-color: var(--widget-accent); background: var(--widget-bg-surface); color: var(--widget-text-primary); } .amount-chip[data-selected="true"], .amount-chip.selected { background: var(--widget-accent-active); border-color: var(--widget-accent-active); color: #ffffff; font-weight: 600; } .amount-chip:active { opacity: 0.85; transition-duration: 0.08s; } /* Rate Info Line */ .rate-line { font-family: var(--widget-font-stack); font-size: 14px; color: var(--widget-text-secondary); padding-top: var(--widget-space-s); border-top: 1px solid var(--widget-border-soft); margin-top: var(--widget-space-s); } .rate-line strong { font-weight: 600; color: var(--widget-text-primary); } .rate-line .rate-highlight { color: var(--widget-accent); font-weight: 600; } /* Helper Text */ .helper-text { font-family: var(--widget-font-stack); font-size: var(--widget-helper-size); font-weight: var(--widget-helper-weight); color: var(--widget-helper-color); margin-top: 4px; } /* Route Arrow */ .route-arrow { color: var(--widget-text-muted); font-size: 20px; flex-shrink: 0; } /* Responsive Typography Adjustments */ @media (max-width: 640px) { .widget-card { border-radius: var(--widget-space-s); } .route-select { height: 56px; font-size: 15px; } .amount-card { border-radius: var(--widget-space-s); } } /* =========================== HERO & TRANSFER WIDGET - CLEAN MODERN DESIGN =========================== */ /* Hero Section - Light gradient background */ .hero { background: linear-gradient(180deg, #f4f7ff 0%, #ffffff 100%); padding: 48px 0 32px; /* Reduced by ~40% from 56px to 32px */ } .hero-inner { max-width: 1280px; margin: 0 auto; padding: 0 32px; display: flex; flex-direction: column; align-items: center; } /* Desktop: Two-column layout for main card + popular corridors */ @media (min-width: 1024px) { .hero-inner { max-width: 1400px; padding: 0 48px; } } /* Headline and subheadline above card */ .hero-text { text-align: center; margin-bottom: 8px; /* Reduced spacing below text - layout grid will add margin */ max-width: 800px; width: 100%; } /* Main content area - holds transfer card + popular corridors (DEPRECATED - use .hero-layout) */ .hero-main { width: 100%; max-width: 100%; display: flex; flex-direction: column; align-items: center; gap: 32px; } /* Hero Layout Grid - Calculator + Popular Corridors alignment */ .hero-layout { display: flex; flex-direction: column; gap: 32px; margin-top: 32px; width: 100%; } /* Desktop: Two-column grid layout - aligns calculator with Popular Corridors */ @media (min-width: 1024px) { .hero-layout { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 32px; align-items: flex-start; max-width: 1120px; margin: 32px auto 0; } } /* Responsive: Stack at smaller laptop widths */ @media (max-width: 1100px) { .hero-layout { grid-template-columns: 1fr; gap: 40px; max-width: 580px; margin-left: auto; margin-right: auto; /* margin-top: 32px preserved from base rule */ } } /* Hero h1 styling moved to .hero-title at bottom of file */ .hero-text p { font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; font-size: 16px; font-weight: 400; line-height: 1.6; color: #64748b; } .hero-main { width: 100%; display: flex; flex-direction: row; justify-content: center; align-items: flex-start; } /* Transfer Card - Clean white card */ .transfer-card { max-width: 520px; width: 100%; margin: 0 auto; padding: 24px; border-radius: 20px; background: #ffffff; border: 1px solid rgba(148, 163, 184, 0.25); box-shadow: 0 18px 45px rgba(15, 23, 42, 0.08); font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; } /* Route Row - Source and Destination selectors */ .transfer-route { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 8px; } .route-side { display: flex; flex-direction: column; gap: 6px; flex: 1 1 0; } .route-label { font-size: 13px; font-weight: 500; color: #64748b; } .route-select { display: inline-flex; align-items: center; gap: 8px; width: 100%; padding: 10px 14px; border-radius: 999px; border: 1px solid #e2e8f0; background: #ffffff; cursor: pointer; transition: all 0.2s ease; box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04); } .route-select:hover { border-color: #1363df; box-shadow: 0 0 0 2px rgba(19, 99, 223, 0.08); } .flag { font-size: 20px; line-height: 1; flex-shrink: 0; display: inline-block; opacity: 1; visibility: visible; } .currency-code { font-size: 14px; font-weight: 600; color: #0f172a; } .chevron { font-size: 12px; color: #94a3b8; margin-left: auto; } .route-arrow { font-size: 20px; color: #cbd5e1; flex-shrink: 0; } /* "From ... To ..." line */ .route-sub { text-align: center; font-size: 12px; color: #94a3b8; margin-bottom: 20px; display: flex; align-items: center; justify-content: center; gap: 6px; } .route-sub-text { white-space: nowrap; } .route-dot { font-size: 10px; } /* Mobile: Allow better wrapping and spacing */ @media (max-width: 599px) { .route-sub { flex-wrap: wrap; max-width: 90%; margin-left: auto; margin-right: auto; } } @media (max-width: 480px) { .route-sub { font-size: 11px; gap: 4px; line-height: 1.4; max-width: 95%; } .route-sub-text { white-space: normal; max-width: 140px; text-align: center; } .route-dot { flex-shrink: 0; } } /* Amount Fields */ .amount-row { display: flex; gap: 16px; margin-bottom: 16px; } .amount-field { flex: 1 1 0; min-width: 0; } /* Premium Fintech-Grade Label Typography (Wise/Stripe Style) */ .field-label { display: block; font-family: "Inter", sans-serif; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 1.2px; color: #6B7280; margin-bottom: 6px; } .amount-input-wrapper { display: flex; align-items: center; padding: 14px 16px; border-radius: 12px; border: 1px solid #e2e8f0; background: #ffffff; transition: all 0.2s ease; } .amount-input-wrapper:focus-within { border-color: #1363df; box-shadow: 0 0 0 3px rgba(19, 99, 223, 0.1); } /* Premium Amount Input - Perfect Vertical Centering */ .amount-input { flex: 1 1 auto; text-align: center; font-family: "Inter", sans-serif; font-size: 22px; font-weight: 650; border: none; outline: none; width: 100%; background: transparent; padding: 10px 0; line-height: 1.4; color: #111827; min-width: 0; -moz-appearance: textfield; } .amount-input::placeholder { color: #cbd5e1; } .currency-pill { padding: 8px 12px; border-radius: 8px; background: #f1f5ff; font-size: 13px; font-weight: 600; color: #1363df; margin-left: 10px; flex-shrink: 0; display: flex; align-items: center; line-height: 1; pointer-events: none; /* CRITICAL: Allow taps to pass through to input field */ user-select: none; } .field-helper { margin-top: 4px; font-size: 11px; color: #94a3b8; } /* Preset Buttons */ .preset-row { display: flex; gap: 8px; margin-bottom: 16px; } .preset-btn { flex: 1 1 0; min-width: 0; padding: 12px 0; /* Increased for 44px+ touch target */ min-height: 44px; /* Mobile touch target minimum */ text-align: center; border-radius: 10px; border: 1px solid #e2e8f0; background: #f8fafc; font-size: 14px; font-weight: 500; color: #64748b; cursor: pointer; transition: all 0.2s ease; } .preset-btn:hover { border-color: #cbd5e1; background: #f1f5f9; color: #475569; } .preset-btn.preset-active { background: linear-gradient(135deg, #1363df 0%, #0a4fc5 100%); border-color: #1363df; color: #ffffff; font-weight: 600; box-shadow: 0 4px 12px rgba(19, 99, 223, 0.25); } /* Rate Info Line */ .rate-info { text-align: center; font-size: 13px; color: #64748b; line-height: 1.5; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 6px; } /* Desktop Premium: Elegant status bar with card styling */ @media (min-width: 1024px) { .rate-info { background: linear-gradient(135deg, #FAFBFC 0%, #F8FAFC 100%); border: none; box-shadow: 0 0 0 1px rgba(148, 163, 184, 0.1), 0 2px 4px rgba(0, 0, 0, 0.02); border-radius: 12px; padding: 16px 20px; margin-bottom: 32px; font-size: 14px; gap: 10px; } .rate-label, .rate-value { font-weight: 600; font-size: 14px; letter-spacing: -0.01em; } .rate-dot { color: #CBD5E1; } .ai-verified-badge { font-weight: 500; } html.dark .rate-info { background: linear-gradient(135deg, #1E293B 0%, #0F172A 100%); box-shadow: 0 0 0 1px rgba(148, 163, 184, 0.08), 0 2px 4px rgba(0, 0, 0, 0.1); } html.dark .rate-dot { color: #475569; } } /* Live Timestamp with Pulsing Indicator */ .live-timestamp { display: inline-flex; align-items: center; gap: 4px; } .pulse-dot { width: 6px; height: 6px; background: #22c55e; border-radius: 50%; display: inline-block; animation: pulse-animation 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.7); } @keyframes pulse-animation { 0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.7); } 50% { opacity: 0.8; box-shadow: 0 0 0 4px rgba(34, 197, 94, 0); } } html.dark .pulse-dot { background: #4ade80; box-shadow: 0 0 0 0 rgba(74, 222, 128, 0.7); } /* AI Verified Badge */ .ai-verified-badge { display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; background: linear-gradient(135deg, #e6f0ff 0%, #dbeafe 100%); color: #007BFF; border-radius: 999px; font-size: 11px; font-weight: 600; letter-spacing: 0.02em; transition: all 0.2s ease; } .ai-verified-badge:hover { background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%); opacity: 0.9; } html.dark .ai-verified-badge { background: linear-gradient(135deg, rgba(59, 130, 246, 0.15) 0%, rgba(96, 165, 250, 0.15) 100%); color: #60a5fa; } .ai-icon { color: #007BFF; animation: sparkle 3s ease-in-out infinite; } html.dark .ai-icon { color: #60a5fa; } @keyframes sparkle { 0%, 100% { opacity: 1; } 50% { opacity: 0.7; } } .rate-label { font-weight: 600; color: #0f172a; white-space: nowrap; } .rate-value { font-weight: 600; color: #0f172a; white-space: nowrap; } .rate-dot { margin: 0 4px; color: #cbd5e1; font-size: 10px; } /* Mobile: Better wrapping and spacing for rate info */ @media (max-width: 599px) { .rate-info { font-size: 12px; line-height: 1.6; padding: 0 8px; max-width: 95%; margin-left: auto; margin-right: auto; word-wrap: break-word; } .rate-dot { margin: 0 3px; } } /* Extra small screens: Stack vertically if needed */ @media (max-width: 360px) { .rate-info { font-size: 11px; line-height: 1.7; max-width: 100%; } } /* Dark Mode Support */ .dark .hero { background: linear-gradient(180deg, #0f172a 0%, #1e293b 100%); } .dark .hero-text h1 { color: #f8fafc; } .dark .hero-text p { color: #94a3b8; } .dark .transfer-card { background: #1e293b; border-color: rgba(148, 163, 184, 0.2); box-shadow: 0 18px 45px rgba(0, 0, 0, 0.3); } .dark .route-label, .dark .field-label { color: #94a3b8; } html.dark .route-select, .dark .route-select { background: #0f172a; border-color: rgba(148, 163, 184, 0.2); } html.dark .route-select:hover, .dark .route-select:hover { border-color: #1363df; background: #1e293b; } html.dark .currency-code, html.dark .route-select .currency-code, .dark .currency-code { color: #FFFFFF !important; /* Force white text in dark mode */ } .dark .amount-input-wrapper { background: #0f172a; border-color: rgba(148, 163, 184, 0.2); } .dark .amount-input { color: #f8fafc; } .dark .amount-input::placeholder { color: #475569; } .dark .currency-pill { background: rgba(19, 99, 223, 0.15); color: #60a5fa; } .dark .preset-btn { background: #0f172a; border-color: rgba(148, 163, 184, 0.2); color: #cbd5e1; } .dark .preset-btn:hover { background: #1e293b; border-color: rgba(148, 163, 184, 0.3); color: #e2e8f0; } .dark .rate-info { color: #94a3b8; } .dark .rate-label, .dark .rate-value { color: #f8fafc; } /* Mobile Responsive - PREMIUM IMPRESSIVE DESIGN v115.0 - HERO TEXT VISIBILITY FIX */ @media (max-width: 767px) { .hero { padding: 24px 0 32px !important; background: linear-gradient(180deg, #f8f9ff 0%, #ffffff 100%) !important; display: block !important; visibility: visible !important; opacity: 1 !important; } .hero-inner { width: 100% !important; max-width: 100% !important; padding: 0 !important; display: flex !important; flex-direction: column !important; } .hero-main { width: 100% !important; padding: 0 12px !important; flex-direction: column !important; align-items: stretch !important; gap: 20px !important; } /* Transfer card - full width on mobile */ .transfer-card { max-width: 100% !important; width: 100% !important; align-self: stretch !important; } /* CRITICAL: Force hero text visible on mobile - overrides all conflicting rules */ .hero-text { display: block !important; visibility: visible !important; opacity: 1 !important; margin-bottom: 20px !important; padding: 0 16px !important; position: relative !important; z-index: 1 !important; max-height: none !important; overflow: visible !important; } .hero-text h1, .hero-text .hero-title { display: block !important; visibility: visible !important; opacity: 1 !important; font-size: 26px !important; font-weight: 800 !important; letter-spacing: -0.02em !important; color: #0f172a !important; margin-bottom: 12px !important; max-height: none !important; } .hero-text p, .hero-text .hero-subtitle { display: block !important; visibility: visible !important; opacity: 1 !important; font-size: 15px !important; line-height: 1.5 !important; color: #64748b !important; margin-bottom: 16px !important; max-height: none !important; } /* Force CTA buttons visible */ .hero-cta-group { display: flex !important; visibility: visible !important; opacity: 1 !important; flex-wrap: wrap !important; gap: 12px !important; justify-content: center !important; } .hero-cta { display: inline-flex !important; visibility: visible !important; opacity: 1 !important; padding: 12px 24px !important; font-size: 14px !important; } /* Premium Transfer Card - Mobile */ .transfer-card { padding: 24px 20px; margin: 0 12px; border-radius: 24px; background: #ffffff; border: 1px solid rgba(19, 99, 223, 0.1); box-shadow: 0 8px 32px rgba(19, 99, 223, 0.08), 0 2px 8px rgba(0, 0, 0, 0.04); } /* Route Section - Enhanced Mobile */ .transfer-route { flex-direction: column; gap: 12px; margin-bottom: 12px; } .route-label { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: #64748b; } .route-select { padding: 14px 16px; border-radius: 16px; border: 1.5px solid #e2e8f0; background: #f8fafc; box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06); transition: all 0.2s ease; } .route-select:active { opacity: 0.85; border-color: #1363df; background: #ffffff; transition-duration: 0.08s; } .route-arrow { display: none; } .route-sub { margin-bottom: 20px; font-size: 13px; color: #94a3b8; justify-content: center; flex-wrap: wrap; /* Maintain wrapping on mobile */ } /* Amount Fields - Premium Mobile */ .amount-row { flex-direction: column; gap: 16px; margin-bottom: 20px; } /* Premium Mobile Typography - Consistent with Desktop */ .field-label { font-family: "Inter", sans-serif; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 1.2px; color: #6B7280; margin-bottom: 6px; } .amount-input-wrapper { padding: 14px 14px; border-radius: 16px; border: 1.5px solid #e2e8f0; background: #f8fafc; box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.02); transition: all 0.25s ease; } .amount-input-wrapper:focus-within { border-color: #1363df; background: #ffffff; box-shadow: 0 0 0 4px rgba(19, 99, 223, 0.08), inset 0 1px 2px rgba(19, 99, 223, 0.05); transform: translateY(-1px); } /* Mobile: Slightly Smaller but Perfectly Centered */ .amount-input { font-family: "Inter", sans-serif; font-size: 20px; font-weight: 650; color: #111827; text-align: center; padding: 10px 0; line-height: 1.4; } .currency-pill { padding: 7px 10px; border-radius: 10px; background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%); font-size: 12px; font-weight: 600; color: #1363df; border: 1px solid rgba(19, 99, 223, 0.15); display: flex; align-items: center; line-height: 1; } .field-helper { margin-top: 6px; font-size: 11px; color: #94a3b8; font-weight: 500; } /* Preset Buttons - Premium Mobile */ .preset-btn { font-size: 14px; font-weight: 600; padding: 12px 0; border-radius: 14px; border: 1.5px solid #e2e8f0; background: #f8fafc; color: #64748b; transition: all 0.2s ease; } .preset-btn:active { opacity: 0.85; transition-duration: 0.08s; } .preset-btn.preset-active { background: linear-gradient(135deg, #1363df 0%, #0a4fc5 100%); border-color: #1363df; color: #ffffff; box-shadow: 0 4px 12px rgba(19, 99, 223, 0.3), 0 2px 4px rgba(19, 99, 223, 0.2); } /* Rate Info - Enhanced Mobile */ .rate-info { font-size: 12px; line-height: 1.6; color: #64748b; } .rate-label, .rate-value { font-weight: 700; color: #0f172a; } } /* =========================== END: HERO & TRANSFER WIDGET =========================== */ /* --------------------------------------- Hero Title (AyaSend Blue - Premium Style) ------------------------------------------*/ /* Hero title */ .hero-title { font-size: 28px; line-height: 1.25; font-weight: 700; color: #0f172a; text-align: center; margin-bottom: 8px; letter-spacing: -0.25px; } /* DELETED: Duplicate .hero-title-accent definition (replaced by consolidated version below at line ~2812) */ /* Mobile */ @media (max-width: 640px) { .hero-title { font-size: 22px; line-height: 1.3; } .hero-title-accent::after { height: 3px; } } /* =========================== PREMIUM GRADIENT HERO =========================== */ /* Hero gradient background - Premium fintech style */ .hero-gradient { background: linear-gradient(135deg, #F0F7FF 0%, #FFFFFF 35%, #F9FBFF 100%); position: relative; overflow: hidden; } .hero-gradient::before { content: ''; position: absolute; top: -50%; right: -20%; width: 600px; height: 600px; background: radial-gradient(circle, rgba(0, 123, 255, 0.08) 0%, transparent 70%); pointer-events: none; } .hero-gradient::after { content: ''; position: absolute; bottom: -30%; left: -10%; width: 500px; height: 500px; background: radial-gradient(circle, rgba(14, 165, 233, 0.06) 0%, transparent 70%); pointer-events: none; } /* Dark mode gradient */ html.dark .hero-gradient { background: linear-gradient(135deg, #0F172A 0%, #1E293B 35%, #0F172A 100%); } html.dark .hero-gradient::before { background: radial-gradient(circle, rgba(59, 130, 246, 0.12) 0%, transparent 70%); } html.dark .hero-gradient::after { background: radial-gradient(circle, rgba(14, 165, 233, 0.08) 0%, transparent 70%); } /* Hero CTA Group - Responsive dual buttons */ .hero-cta-group { display: flex; gap: 12px; margin-top: 16px; margin-bottom: 8px; justify-content: center; align-items: center; flex-wrap: wrap; } /* Base CTA button styles */ .hero-cta { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 14px 28px; border-radius: 12px; font-size: 15px; font-weight: 600; font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; letter-spacing: -0.01em; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); cursor: pointer; text-decoration: none; border: none; white-space: nowrap; } /* Primary CTA - Gradient blue */ .hero-cta-primary { background: linear-gradient(135deg, #007BFF 0%, #0EA5E9 100%); color: #ffffff; box-shadow: 0 4px 14px rgba(0, 123, 255, 0.35); } .hero-cta-primary:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0, 123, 255, 0.45); } .hero-cta-primary:active { transform: translateY(0); } .hero-cta-icon { transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); } .hero-cta-primary:hover .hero-cta-icon { transform: translateY(2px); } /* Secondary CTA - Outlined */ .hero-cta-secondary { background: transparent; color: #007BFF; border: 2px solid #007BFF; box-shadow: 0 2px 8px rgba(0, 123, 255, 0.1); } .hero-cta-secondary:hover { background: rgba(0, 123, 255, 0.08); transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0, 123, 255, 0.2); } .hero-cta-secondary:active { transform: translateY(0); } /* Dark mode CTAs */ html.dark .hero-cta-primary { background: linear-gradient(135deg, #3B82F6 0%, #06B6D4 100%); box-shadow: 0 4px 14px rgba(59, 130, 246, 0.4); } html.dark .hero-cta-secondary { color: #60A5FA; border-color: #3B82F6; box-shadow: 0 2px 8px rgba(59, 130, 246, 0.15); } html.dark .hero-cta-secondary:hover { background: rgba(59, 130, 246, 0.15); box-shadow: 0 4px 12px rgba(59, 130, 246, 0.25); } /* Responsive CTA styles */ @media (max-width: 640px) { .hero-cta-group { flex-direction: column; width: 100%; gap: 10px; margin-top: 20px; } .hero-cta { width: 100%; max-width: 320px; padding: 13px 24px; font-size: 14px; } } @media (min-width: 641px) and (max-width: 1023px) { .hero-cta { padding: 13px 26px; font-size: 15px; } } @media (min-width: 1024px) { .hero-cta { padding: 15px 32px; font-size: 16px; } } /* END: Premium Gradient Hero */ /* =========================== TRUST BADGES & COMPLIANCE =========================== */ .trust-badges-section { margin-top: 48px; padding: 32px 24px; background: linear-gradient(135deg, #F9FAFB 0%, #FFFFFF 100%); border-radius: 16px; border: 1px solid rgba(148, 163, 184, 0.15); } .trust-badges-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; max-width: 900px; margin: 0 auto; } .trust-badge { display: flex; align-items: center; gap: 12px; padding: 16px; background: #FFFFFF; border-radius: 12px; border: 1px solid rgba(148, 163, 184, 0.2); transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); } .trust-badge:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(15, 23, 42, 0.08); border-color: #007BFF; } .trust-badge-icon { flex-shrink: 0; color: #007BFF; } .trust-badge-text { font-size: 14px; font-weight: 600; color: #0F172A; font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; } /* Dark mode */ html.dark .trust-badges-section { background: linear-gradient(135deg, #1E293B 0%, #0F172A 100%); border-color: rgba(148, 163, 184, 0.1); } html.dark .trust-badge { background: #1E293B; border-color: rgba(148, 163, 184, 0.15); } html.dark .trust-badge:hover { border-color: #3B82F6; box-shadow: 0 4px 12px rgba(59, 130, 246, 0.15); } html.dark .trust-badge-icon { color: #60A5FA; } html.dark .trust-badge-text { color: #F8FAFC; } /* Responsive */ @media (max-width: 640px) { .trust-badges-section { padding: 24px 16px; margin-top: 32px; } .trust-badges-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; } .trust-badge { flex-direction: column; text-align: center; padding: 12px; } .trust-badge-text { font-size: 12px; } } /* END: Trust Badges */ /* Clean, premium active state for top dropdowns */ .route-select.is-open, .route-select[aria-expanded="true"] { background: #ffffff; border-color: #007BFF; /* AyaSend blue */ box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25); color: #0f172a; } /* Make sure flag / currency stay readable */ .route-select.is-open .currency-code, .route-select[aria-expanded="true"] .currency-code { color: #0f172a; } .route-select.is-open .flag, .route-select[aria-expanded="true"] .flag, .route-select.is-open .chevron, .route-select[aria-expanded="true"] .chevron { filter: none; color: #9ca3af; } /* Selected row inside dropdown list */ .dropdown-item--active, .dropdown-item.selected { background: #e6f0ff; color: #0f172a; } /* ===== Remove black highlight & apply clean AyaSend focus ===== */ /* When dropdown is opened or focused */ .route-select:focus, .route-select.is-open, .route-select[aria-expanded="true"] { background-color: #ffffff !important; /* pure white background */ border: 1.5px solid #007BFF !important; /* AyaSend blue border */ box-shadow: 0 0 8px rgba(0, 123, 255, 0.25) !important; /* soft blue glow */ color: #0f172a !important; transition: all 0.25s ease-in-out; } /* Flag, currency text, and arrow inside dropdown */ .route-select .flag { display: inline-block !important; flex-shrink: 0 !important; width: 20px !important; height: 15px !important; object-fit: contain !important; opacity: 1 !important; visibility: visible !important; vertical-align: middle !important; margin-right: 8px !important; } .route-select .currency-code, .route-select .chevron { filter: none !important; color: #0f172a !important; } /* Dark mode override for currency text visibility */ html.dark .route-select .currency-code, html.dark .route-select .chevron { color: #f8fafc !important; /* White text in dark mode */ } /* On hover */ .route-select:hover { background-color: #f8faff !important; border-color: #007BFF !important; } /* When selected row in dropdown list */ .dropdown-item--active, .dropdown-item.selected { background: #e6f0ff !important; color: #0f172a !important; } /* Optional: remove any dark mode inheritance */ body.dark-mode .route-select, body.dark-mode .dropdown-item { background-color: #ffffff !important; color: #0f172a !important; } /* =============================== Dropdown panels – currency + country (Clean AyaSend blue-and-white theme) ==================================*/ /* The white box that pops under the button */ .currency-dropdown, .country-dropdown { background: #ffffff; border-radius: 18px; border: 1px solid rgba(148, 163, 184, 0.35); box-shadow: 0 18px 40px rgba(15, 23, 42, 0.18); padding: 10px 10px 8px; max-height: 60vh; overflow-y: auto; } /* Each row in the list */ .currency-dropdown__item, .country-dropdown__item { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 10px; font-size: 14px; color: #0f172a; cursor: pointer; transition: background-color 0.18s ease, color 0.18s ease, transform 0.12s ease; } /* Flag + label inside row */ .currency-dropdown__item-flag, .country-dropdown__item-flag { flex-shrink: 0; width: 20px; height: 15px; object-fit: contain; vertical-align: middle; display: inline-block; } .currency-dropdown__item-text, .country-dropdown__item-text { flex: 1; display: flex; flex-direction: column; } .currency-dropdown__item-code { font-weight: 600; } .currency-dropdown__item-name { font-size: 12px; color: #6b7280; } /* Hover state */ .currency-dropdown__item:hover, .country-dropdown__item:hover { background: #f3f6ff; transform: translateY(-1px); } /* Selected / active row */ .currency-dropdown__item--active, .country-dropdown__item--active { background: #e6f0ff; color: #0f172a; box-shadow: 0 0 0 1px rgba(0, 123, 255, 0.35); } /* The currency chip (XOF / NGN etc) at the right */ .currency-dropdown__item-chip, .country-dropdown__item-chip { padding: 4px 10px; border-radius: 999px; background: #f1f5ff; color: #007BFF; font-size: 11px; font-weight: 600; } /* Mobile tweaks */ @media (max-width: 640px) { .currency-dropdown, .country-dropdown { max-height: 70vh; border-radius: 20px; } .currency-dropdown__item, .country-dropdown__item { padding: 10px 12px; } } /* ========================================= Country picker modal: "Select destination country (Africa only)" ==========================================*/ /* Backdrop - Crisp Dark Overlay (NO BLUR for Fintech Look) */ .modal-backdrop { position: fixed; inset: 0; background: rgba(15, 23, 42, 0.6); /* Stronger backdrop to properly dim background */ backdrop-filter: blur(4px); /* Subtle blur to indicate modal focus */ -webkit-backdrop-filter: blur(4px); opacity: 0; pointer-events: none; transition: opacity 220ms ease-out; z-index: 9998; /* High z-index to cover everything */ } .modal-backdrop.is-visible { opacity: 1; pointer-events: auto; } /* Hide Popular Corridors when modal is open to avoid "two sidebars" confusion */ body.modal-open .popular-corridors { opacity: 0; pointer-events: none; transition: opacity 220ms ease-out; } /* ===== RATE INFO MODAL ===== */ .modal { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; padding: 16px; opacity: 0; pointer-events: none; transition: opacity 220ms ease-out; } .modal.visible { opacity: 1; pointer-events: auto; } .modal__dialog { background: white; border-radius: 16px; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3); max-width: 600px; width: 100%; max-height: 90vh; overflow-y: auto; opacity: 0; transition: opacity 220ms cubic-bezier(0.4, 0, 0.2, 1); } .modal.visible .modal__dialog { opacity: 1; } .modal__header { display: flex; align-items: center; justify-content: space-between; padding: 20px 24px; border-bottom: 1px solid #E5EAF2; } .modal__close { width: 32px; height: 32px; border-radius: 8px; background: transparent; border: none; font-size: 24px; line-height: 1; color: #64748B; cursor: pointer; transition: all 0.2s; } .modal__close:hover { background: #F1F5F9; color: #334155; } .modal__body { padding: 24px; } .modal__footer { padding: 16px 24px; border-top: 1px solid #E5EAF2; } /* Dark Mode */ html.dark .modal__dialog { background: #1E293B; } html.dark .modal__header { border-bottom-color: #334155; } html.dark .modal__close { color: #94A3B8; } html.dark .modal__close:hover { background: #334155; color: #F8FAFC; } html.dark .modal__footer { border-top-color: #334155; } /* Prevent double scrollbar: Lock scroll on both html and body when modal is open */ html.modal-open, body.modal-open { overflow: hidden; overscroll-behavior: contain; } /* Modal container - PREMIUM FINTECH DESIGN */ .country-modal { position: fixed; inset-inline: 0; top: 12%; /* Slightly higher for better balance */ margin-inline: auto; width: 94vw; max-width: 480px; /* Wider for more comfortable reading */ background: #ffffff; border-radius: 24px; /* Larger radius for premium feel */ border: 1px solid rgba(148, 163, 184, 0.25); box-shadow: 0 32px 80px rgba(15, 23, 42, 0.22), 0 8px 24px rgba(15, 23, 42, 0.12), 0 0 0 1px rgba(255, 255, 255, 0.5) inset; /* Premium multi-layer shadow */ padding: 20px 20px 18px; /* More generous padding */ transform: translateY(10px); opacity: 0; pointer-events: none; transition: opacity 0.28s cubic-bezier(0.4, 0, 0.2, 1), transform 0.28s cubic-bezier(0.4, 0, 0.2, 1); z-index: 9999; /* Above backdrop to ensure proper layering */ max-height: 85vh; /* Prevent overflow on small screens */ display: flex; flex-direction: column; } /* Mobile-specific positioning - Prevent URL bar overlap */ @media (max-width: 767px) { .country-modal { top: 80px; /* Fixed position below mobile browser chrome */ max-height: calc(100vh - 100px); /* Ensure full content visible */ padding-top: 24px; /* Extra top padding for breathing room */ } } .country-modal.is-open { opacity: 1; transform: translateY(0); pointer-events: auto; } /* Header: title + close button - PREMIUM POLISH */ .country-modal__header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; /* More breathing room */ padding-bottom: 16px; border-bottom: 1px solid rgba(226, 232, 240, 0.6); /* Subtle separator */ } .country-modal__title { font-size: 18px; /* Larger, bolder title */ font-weight: 700; /* Bolder */ color: #0f172a; letter-spacing: -0.02em; /* Tighter kerning for premium feel */ } .country-modal__subtitle { font-size: 13px; /* Slightly larger subtitle */ color: #6b7280; margin-top: 3px; font-weight: 500; } .country-modal__close { width: 36px; /* Slightly larger close button */ height: 36px; border-radius: 999px; border: 1px solid #e5e7eb; background: #f9fafb; display: inline-flex; align-items: center; justify-content: center; font-size: 18px; color: #6b7280; cursor: pointer; transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); } .country-modal__close:hover { background: #fee2e2; /* Light red on hover */ border-color: #ef4444; color: #ef4444; opacity: 0.9; } /* Letter chips row - POLISHED DESIGN */ .country-modal__letters { display: flex; flex-wrap: wrap; gap: 10px; /* More breathing room */ margin: 14px 0 16px; padding-bottom: 12px; border-bottom: 1px solid rgba(226, 232, 240, 0.5); /* Separator */ } .country-modal__letter { width: 40px; /* Slightly larger for better touch targets */ height: 40px; border-radius: 12px; /* Less rounded for modern look */ border: 1.5px solid rgba(148, 163, 184, 0.35); background: #f9fafb; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 700; /* Bolder text */ color: #475569; cursor: pointer; transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); } .country-modal__letter:hover { background: linear-gradient(135deg, #e6f0ff 0%, #dbeafe 100%); /* Gradient hover */ border-color: #007BFF; color: #007BFF; transform: translateY(-2px); /* Lift effect */ box-shadow: 0 4px 12px rgba(0, 123, 255, 0.15); } .country-modal__letter--active { background: linear-gradient(135deg, #007BFF 0%, #0066ff 100%); /* Premium gradient */ border-color: #007BFF; color: #ffffff; box-shadow: 0 4px 16px rgba(0, 123, 255, 0.3); } /* Country list - SMOOTH SCROLLING */ .country-modal__list { max-height: 52vh; /* Slightly taller */ overflow-y: auto; flex: 1; /* Take remaining space */ margin: 0 -4px; /* Negative margin for edge-to-edge scrolling */ padding: 0 4px; /* Restore padding for content */ padding-top: 4px; } .country-modal__item { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 6px; border-radius: 10px; cursor: pointer; transition: background-color 0.16s ease, transform 0.12s ease; } .country-modal__item:hover { background: #f3f6ff; transform: translateY(-1px); } .country-modal__item-left { display: flex; align-items: center; gap: 8px; } .country-modal__item-flag { width: 20px !important; height: 15px !important; min-width: 20px !important; min-height: 15px !important; object-fit: cover; border-radius: 2px; flex-shrink: 0; visibility: visible !important; opacity: 1 !important; display: inline-block !important; position: relative !important; z-index: 10; } /* Desktop override to ensure flags are always visible */ @media (min-width: 768px) { .country-modal__item-flag { width: 22px; height: 16px; } } .country-modal__item-text { display: flex; flex-direction: column; } .country-modal__item-name { font-size: 14px; font-weight: 500; color: #0f172a; } .country-modal__item-code { font-size: 11px; color: #6b7280; } /* Right-side currency pill */ .country-modal__item-chip { padding: 4px 10px; border-radius: 999px; background: #f1f5ff; color: #007BFF; font-size: 11px; font-weight: 600; } /* Active selected country */ .country-modal__item--active { background: #e6f0ff; box-shadow: 0 0 0 1px rgba(0, 123, 255, 0.35); } .country-modal__item--active .country-modal__item-chip { background: #007BFF; color: #ffffff; } /* Mobile adjustments */ @media (max-width: 640px) { .country-modal { top: 12%; width: 94vw; max-width: 430px; border-radius: 22px; } .country-modal__letters { justify-content: flex-start; } } /* =============================== AyaSend Typography Refinement Elite Fintech Polish =============================== */ /* Apply Inter as the universal default with premium fallbacks */ html, body, input, button, select { font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; color: var(--ink-900); letter-spacing: -0.2px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* Section labels (YOU SEND, RECIPIENT GETS, etc.) */ .card-section-label { font-size: 13px; font-weight: 600; letter-spacing: 0.5px; text-transform: uppercase; color: var(--ink-500); margin-bottom: 6px; } /* Amount fields */ .amount-field { font-size: 22px; font-weight: 600; color: var(--ink-900); line-height: 1.3; } /* Currency badge inside input (USD / XOF) */ .currency-code-badge { font-size: 13px; font-weight: 600; letter-spacing: 0.3px; color: var(--brand-blue-700); /* Darker blue for WCAG AA contrast (≥4.5:1) */ } /* Small hint texts (e.g., "Transfer amount", "Estimated amount") */ .field-hint { font-size: 12px; color: var(--ink-500); /* Mid-gray for WCAG AA contrast (≥4.5:1) */ margin-top: 3px; } /* Buttons for preset amounts ($100, $250...) */ .amount-preset-btn { font-size: 14px; font-weight: 600; color: var(--ink-900); } /* Dark mode overrides */ html.dark .card-section-label, [data-theme="dark"] .card-section-label { color: var(--ink-400); } html.dark .amount-field, [data-theme="dark"] .amount-field, html.dark .amount-preset-btn, [data-theme="dark"] .amount-preset-btn, html.dark body, [data-theme="dark"] body, html.dark input, [data-theme="dark"] input, html.dark button, [data-theme="dark"] button, html.dark select, [data-theme="dark"] select { color: #f9fafb; } html.dark .currency-code-badge, [data-theme="dark"] .currency-code-badge { color: var(--brand-cyan-400); } html.dark .field-hint, [data-theme="dark"] .field-hint { color: #94a3b8; /* Lighter gray for dark mode contrast (≥4.5:1) */ } /* Mobile adjustments for typography */ @media (max-width: 640px) { .amount-field { font-size: 20px; } .card-section-label { font-size: 12px; } } /* ========================================= AyaSend Signature Underline Animation Scroll-Reactive Speed ========================================= */ /* CSS variable for dynamic animation speed */ :root { --aya-underline-speed: 2.6s; /* default duration */ } /* === "Africa" Gradient Text (CONSOLIDATED - SINGLE SOURCE OF TRUTH) === */ .hero-title-accent { position: relative; display: inline-block; background: var(--hero-accent-gradient); -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important; background-clip: text !important; color: transparent !important; font-weight: 700; } /* Dynamic sliding underline with AyaSend brand gradient - Back & Forth Motion */ .hero-title-accent::after { content: ""; position: absolute; left: 0; bottom: -4px; width: 65%; height: 3px; background: var(--hero-accent-underline); box-shadow: 0 0 10px rgba(0, 124, 255, 0.5); border-radius: 999px; transform-origin: left; animation: africa-underline-slide 3.6s ease-in-out infinite; } @keyframes africa-underline-slide { 0% { transform: translateX(0%); opacity: 0.85; box-shadow: 0 0 8px rgba(0, 124, 255, 0.4); } 50% { transform: translateX(54%); opacity: 1; box-shadow: 0 0 12px rgba(0, 163, 255, 0.6); } 100% { transform: translateX(0%); opacity: 0.85; box-shadow: 0 0 8px rgba(0, 124, 255, 0.4); } } /* Keyframe animation */ @keyframes underlineSlideGlow { 0% { transform: translateX(0); box-shadow: 0 0 6px rgba(0, 123, 255, 0.5); } 100% { transform: translateX(12%); box-shadow: 0 0 12px rgba(0, 163, 255, 0.6); } } /* Animated underline for "Popular Corridors" - Same premium effect */ .corridor-title-accent { position: relative; display: inline-block; } .corridor-title-accent::after { content: ""; position: absolute; left: 0; bottom: -4px; width: 60%; height: 2px; background: var(--hero-accent-underline); box-shadow: 0 0 8px rgba(0, 124, 255, 0.35); border-radius: 999px; transform-origin: left; animation: corridor-underline-slide 4.2s ease-in-out infinite; } @keyframes corridor-underline-slide { 0% { transform: translateX(0%); opacity: 0.75; box-shadow: 0 0 6px rgba(0, 124, 255, 0.3); } 50% { transform: translateX(67%); opacity: 1; box-shadow: 0 0 10px rgba(0, 163, 255, 0.5); } 100% { transform: translateX(0%); opacity: 0.75; box-shadow: 0 0 6px rgba(0, 124, 255, 0.3); } } /* Respect reduced motion preference */ @media (prefers-reduced-motion: reduce) { .hero-title-accent::after, .corridor-title-accent::after { animation: none !important; opacity: 1; transform: translateX(0) !important; } } /* ======================================== HERO LAYOUT GRID (Side-by-Side Calculator + Corridors) Premium Fintech UI matching Wise/Revolut/Remitly ======================================== */ /* Default: Stack vertically on mobile */ .hero-layout { display: flex; flex-direction: column; gap: 24px; margin: 0 auto; } /* Desktop: Two-column grid layout */ @media (min-width: 1024px) { .hero-layout { max-width: 1120px; margin: 48px auto 0; display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(260px, 0.9fr); column-gap: 32px; align-items: flex-start; } } /* ======================================== POPULAR CORRIDORS - PREMIUM FINTECH UI ======================================== */ /* Premium Header Styling */ .popular-corridors__header { margin-bottom: 16px; text-align: left; } @media (max-width: 1023px) { .popular-corridors__header { text-align: center; } } .popular-corridors__icon { font-size: 18px; margin-right: 6px; } .popular-corridors__title { display: inline-block; font-family: "Inter", sans-serif; font-size: 16px; font-weight: 600; color: #0f172a; margin: 0 0 6px; } html.dark .popular-corridors__title { color: #f8fafc; } .popular-corridors__subtitle { font-family: "Inter", sans-serif; font-size: 12px; font-weight: 500; color: #6b7280; margin: 0; line-height: 1.4; } html.dark .popular-corridors__subtitle { color: #94a3b8; } .popular-corridors { width: 100%; max-width: 580px; margin: 0 auto; padding: 20px 16px 24px; text-align: center; background: transparent; } /* Desktop: Card styling matching main comparison card with premium elevation */ @media (min-width: 1024px) { .popular-corridors { max-width: 100%; margin: 0; padding: 20px 24px; background: #FFFFFF; border-radius: 24px; box-shadow: 0 18px 40px rgba(15, 23, 42, 0.08); border: 1px solid #e5e7eb; } html.dark .popular-corridors { background: #1E293B; border-color: rgba(148, 163, 184, 0.15); box-shadow: 0 18px 40px rgba(0, 0, 0, 0.25); } } /* Responsive: Center on smaller laptops */ @media (max-width: 1100px) { .popular-corridors { max-width: 480px; margin: 0 auto; } } .corridor-title { font-family: "Inter", sans-serif; font-weight: 700; font-size: 18px; color: #1E3A8A; margin-bottom: 20px; position: relative; } .corridor-title::after { content: ""; display: block; width: 60px; height: 3px; background: linear-gradient(90deg, #2563EB, #60A5FA); margin: 6px auto 0; border-radius: 2px; animation: corridorLinePulse 2.5s ease-in-out infinite alternate; } @keyframes corridorLinePulse { from { width: 40px; opacity: 0.6; } to { width: 80px; opacity: 1; } } .corridor-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 16px; justify-items: center; } /* Desktop: 2×3 Grid Layout (2 columns, 3 rows) - Premium 1320px Spec */ @media (min-width: 1200px) { .corridor-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: 16px; } } .corridor-card { background: #f9fafb; border: 1px solid #e5e7eb; border-radius: 16px; box-shadow: 0 4px 10px rgba(15, 23, 42, 0.04); transition: transform 150ms ease, box-shadow 150ms ease, border-color 150ms ease, background-color 150ms ease; padding: 12px 10px; width: 100%; max-width: 170px; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 8px; /* Button reset for clean appearance */ font: inherit; text-align: left; } /* Premium hover effects matching Wise/Revolut */ .corridor-card { margin-bottom: 8px; /* Mobile/tablet spacing - preserved */ transition: all 0.2s ease; } /* Desktop: Horizontal row layout with refined spacing for 2×3 grid */ @media (min-width: 1200px) { .corridor-card { flex-direction: row; justify-content: space-between; align-items: center; max-width: 100%; padding: 12px 14px; gap: 8px; background: #f9fafb; margin-bottom: 0; /* Grid gap handles spacing on desktop */ } } .corridor-card:hover, .corridor-card:focus-visible { transform: translateY(-2px); border-color: #007bff; background-color: #f9fafc; box-shadow: 0 8px 18px rgba(15, 23, 42, 0.08); outline: none; } html.dark .corridor-card:hover { background-color: rgba(59, 130, 246, 0.1); border-color: #3B82F6; } /* Reduced motion accessibility */ @media (prefers-reduced-motion: reduce) { .corridor-card { transition: none; } .corridor-card:hover { transform: none; } } .corridor-flags { display: flex; align-items: center; justify-content: center; gap: 6px; margin-bottom: 6px; } /* Desktop: No margin-bottom in row layout */ @media (min-width: 1024px) { .corridor-flags { margin-bottom: 0; flex-shrink: 0; } } .corridor-flags .corridor-flag { width: 24px; height: 24px; border-radius: 50%; object-fit: cover; } .corridor-flags .arrow { font-size: 14px; color: #64748B; } .corridor-name { font-family: "Inter", sans-serif; font-size: 13px; font-weight: 600; color: #1F2937; } /* Desktop: Larger text in row layout */ @media (min-width: 1024px) { .corridor-name { font-size: 14px; text-align: left; flex: 1; } } /* Dark Mode Overrides - Premium Fintech Styling */ .dark .corridor-title { color: #60A5FA; } html.dark .corridor-card { background: #020617; border-color: #1f2937; box-shadow: 0 6px 14px rgba(0, 0, 0, 0.4); } /* Premium dark mode hover - softer lift with brand accent */ html.dark .corridor-card:hover, html.dark .corridor-card:focus-visible { transform: translateY(-1px); border-color: rgba(96, 165, 250, 0.4); background-color: rgba(30, 41, 59, 0.85); box-shadow: 0 6px 16px rgba(15, 23, 42, 0.35); } .dark .corridor-name { color: #f8fafc; } .dark .corridor-flags .arrow { color: #94a3b8; } /* Mobile Responsive */ @media (max-width: 640px) { .popular-corridors { padding-top: 16px; } .corridor-grid { gap: 12px; } .corridor-card { max-width: 180px; } } /* ======================================== END: POPULAR CORRIDORS ======================================== */ /* ======================================== PREMIUM FINTECH DESIGN SYSTEM ======================================== */ /* === HERO SECTION === */ .hero-title { font-family: 'DM Sans', sans-serif; font-size: clamp(26px, 4vw, 36px); font-weight: 700; text-align: center; line-height: 1.2; color: var(--aya-text-main); } /* DELETED: Duplicate .hero-title-accent definition (solid color override removed - see consolidated version above at line ~2812) */ @keyframes underlineSlideGlow { 0% { transform: translateX(0); box-shadow: 0 0 6px rgba(0, 123, 255, 0.5); } 100% { transform: translateX(12%); box-shadow: 0 0 12px rgba(0, 163, 255, 0.6); } } .hero-subtitle { font-family: 'Inter', sans-serif; font-size: clamp(14px, 2vw, 16px); color: var(--aya-text-muted); text-align: center; margin-top: 12px; line-height: 1.6; } /* Mobile: Smaller max-width for better readability */ @media (max-width: 600px) { .hero-subtitle { font-size: 14px; line-height: 1.5; max-width: 90%; margin-left: auto; margin-right: auto; padding: 0 16px; } } /* === COMPARE CARD === */ .compare-card-inner { background: #FFFFFF !important; /* Force white in light mode */ border-radius: 24px; box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04), 0 8px 24px rgba(15, 23, 42, 0.06); padding: 28px 24px; border: 1px solid rgba(148, 163, 184, 0.12); max-width: 580px; width: 100%; margin: 0 auto; flex-shrink: 0; } /* Desktop: Adjust sizing for two-column layout */ @media (min-width: 1024px) { .compare-card-inner { max-width: 620px; padding: 32px 28px; } } /* Mobile: Full-width amount inputs */ @media (max-width: 640px) { .compare-card-inner { padding: 24px 16px; max-width: 100%; width: 100%; margin: 0; } .amount-input { width: 100%; max-width: 100%; min-width: auto; } } .label-text { text-transform: uppercase; font-weight: 600; font-size: 12px; letter-spacing: 1.1px; color: var(--aya-text-muted); margin-bottom: 8px; } /* Subtle field labels (less prominent than uppercase) */ .field-label-subtle { font-family: 'Inter', sans-serif; font-size: 12px; font-weight: 600; letter-spacing: 1.2px; text-transform: uppercase; color: #6B7280; margin-bottom: 6px; display: block; } html.dark .field-label-subtle { color: #9CA3AF; } .amount-input-helper { font-size: 11px; color: #9CA3AF; margin-top: 4px; font-weight: 500; } html.dark .amount-input-helper { color: #64748B; } .amount-field-wrapper { position: relative; width: 100%; border-radius: 16px; border: 1.5px solid #E2E8F0; background: #FFFFFF; display: flex; align-items: center; justify-content: center; padding: 12px 16px; min-height: 64px; cursor: text; isolation: isolate; transition: border-color 0.15s ease, box-shadow 0.15s ease; } .amount-field-wrapper:focus-within { border-color: #3B82F6; box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1); } html.dark .amount-field-wrapper { background: #1E293B; border-color: rgba(148, 163, 184, 0.2); } html.dark .amount-field-wrapper:focus-within { border-color: #60A5FA; box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.15); } /* CRITICAL: Ensure any pseudo-elements don't block taps */ .amount-field-wrapper::before, .amount-field-wrapper::after, .amount-input-wrapper::before, .amount-input-wrapper::after { pointer-events: none !important; z-index: -1 !important; } .amount-input { border: none; outline: none; text-align: center; font-size: 22px; font-weight: 700; background: transparent; /* FIXED WIDTH: Prevent layout jitter while typing */ width: 260px; max-width: 260px; min-width: 260px; /* TABULAR NUMBERS: Digits have consistent width */ font-feature-settings: "tnum" 1; font-variant-numeric: tabular-nums; color: var(--aya-text-main); position: relative; /* CRITICAL: Create stacking context */ z-index: 10 !important; /* CRITICAL: Ensure input is above everything for iOS Safari */ pointer-events: auto !important; /* CRITICAL: Ensure input is always tappable */ touch-action: manipulation; /* Optimize touch response */ -webkit-user-select: text; /* Allow text selection */ user-select: text; -webkit-tap-highlight-color: rgba(0, 123, 255, 0.1); /* iOS visual feedback */ /* STABLE TRANSITIONS: Only visual feedback, no layout changes */ transition: background-color 0.15s ease, box-shadow 0.15s ease, color 0.15s ease; /* NO transitions on width, padding, margin, font-size */ } .currency-code-badge { position: absolute; right: 16px; background: #E0EDFF; color: var(--aya-blue); border-radius: 999px; /* FIXED WIDTH: Prevent jumping when currency changes */ min-width: 60px; text-align: center; padding: 6px 12px; font-size: 13px; font-weight: 600; line-height: 1; z-index: 1; /* CRITICAL: Badge below input but above wrapper */ pointer-events: none !important; /* CRITICAL: Allow taps to pass through to input field */ user-select: none; } .route-meta { font-size: 13px; color: var(--aya-text-soft); text-align: center; margin: 8px 0; font-weight: 500; } .route-meta-icon { display: none; /* Hidden on mobile */ } /* Desktop Premium: Enhanced corridor breadcrumb with globe icon and refined typography */ @media (min-width: 1024px) { .route-meta { display: inline-flex; align-items: center; gap: 10px; padding: 10px 18px; background: linear-gradient(135deg, #F8FAFC 0%, #F3F4F6 100%); border-radius: 24px; font-size: 14px; font-weight: 500; margin: 0 0 24px 0; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05); } .route-meta-icon { display: block; color: #3B82F6; flex-shrink: 0; } .route-sub-text strong { font-weight: 600; color: #1E293B; font-family: 'DM Sans', sans-serif; } .route-dot { color: #CBD5E1; font-size: 12px; } html.dark .route-meta { background: linear-gradient(135deg, #1E293B 0%, #1F2937 100%); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2); } html.dark .route-meta-icon { color: #60A5FA; } html.dark .route-sub-text strong { color: #F1F5F9; } html.dark .route-dot { color: #475569; } } /* === UPDATED CORRIDOR CLASSES (Fintech Grade) === */ .corridor-title { font-family: 'DM Sans', sans-serif; font-weight: 700; font-size: 18px; color: var(--aya-blue-dark); text-align: center; margin-bottom: 20px; } .corridor-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 16px; justify-items: center; } .corridor-card { background: #FFFFFF !important; /* Force white in light mode */ border-radius: 14px; box-shadow: 0 2px 10px rgba(15, 23, 42, 0.06); transition: transform 0.2s ease, box-shadow 0.2s ease; padding: 16px 12px; /* Increased for better touch targets */ min-height: 88px; /* 44px+ touch target minimum */ max-width: 170px; cursor: pointer; color: var(--aya-text-main) !important; } .corridor-card:hover { transform: translateY(-3px); box-shadow: 0 8px 22px rgba(15, 23, 42, 0.12); } .corridor-name { font-weight: 600; font-size: 13px; color: var(--aya-text-main); text-align: center; margin-top: 8px; } /* Mobile Responsiveness */ @media (max-width: 640px) { .amount-input { font-size: 20px; } .currency-code-badge { font-size: 12px; padding: 5px 10px; } .corridor-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; padding: 0; } .corridor-card { max-width: 100% !important; /* Full width on mobile */ width: 100%; } } /* === INSIGHTS PAGE === */ .insights-hero { text-align: center; padding: 40px 20px; background: linear-gradient(135deg, #007BFF 0%, #0EA5E9 100%); } .heading-primary { font-family: 'DM Sans', sans-serif; font-size: clamp(32px, 5vw, 48px); font-weight: 700; color: white; margin-bottom: 16px; } .insights-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 24px; margin-top: 32px; } .insight-card { background: var(--aya-card-bg); border-radius: 16px; box-shadow: 0 2px 10px rgba(15, 23, 42, 0.06); transition: transform 0.2s ease, box-shadow 0.2s ease; overflow: hidden; cursor: pointer; } .insight-card:hover { transform: translateY(-4px); box-shadow: 0 8px 22px rgba(15, 23, 42, 0.12); } .insight-tag-row { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; font-size: 13px; color: var(--aya-text-muted); } .insight-tag { background: #E0EDFF; color: var(--aya-blue); padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; } .insight-date { color: var(--aya-text-soft); font-size: 13px; } .insight-title { font-family: 'DM Sans', sans-serif; font-size: 20px; font-weight: 700; color: var(--aya-text-main); margin-bottom: 12px; line-height: 1.3; transition: color 0.2s ease; } .insight-card:hover .insight-title { color: var(--aya-blue); } .insight-excerpt { color: var(--aya-text-muted); font-size: 14px; line-height: 1.6; margin-bottom: 16px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .insight-link { color: var(--aya-blue); font-weight: 600; font-size: 14px; text-decoration: none; display: inline-flex; align-items: center; gap: 4px; } .insight-link:hover { text-decoration: underline; } /* Mobile Responsiveness */ @media (max-width: 640px) { .insights-grid { grid-template-columns: 1fr; gap: 16px; } .insight-title { font-size: 18px; } } /* === DARK MODE OVERRIDES === */ /* REMOVED @media (prefers-color-scheme: dark) - Light mode is default! Dark mode ONLY activates via html.dark class (user toggle) */ html.dark .currency-code-badge, html.dark .currency-pill { background: linear-gradient(135deg, #007BFF, #00C3FF) !important; /* Bright AyaSend blue gradient */ color: #FFFFFF !important; /* Pure white text for maximum contrast */ } html.dark .insight-tag { background: rgba(96, 165, 250, 0.15) !important; color: #60A5FA !important; } html.dark .compare-card-inner { background: #1E293B !important; /* Dark slate in dark mode */ border-color: rgba(148, 163, 184, 0.15) !important; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2), 0 8px 24px rgba(0, 0, 0, 0.25) !important; } html.dark .corridor-card { background: #1E293B !important; /* Dark slate in dark mode */ color: #F8FAFC !important; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3) !important; } html.dark .corridor-card:hover { box-shadow: 0 8px 22px rgba(0, 0, 0, 0.4) !important; } html.dark .corridor-name { color: #F8FAFC !important; } html.dark .insight-card { background: var(--aya-card-bg) !important; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3) !important; } html.dark .insight-card:hover { box-shadow: 0 8px 22px rgba(0, 0, 0, 0.4) !important; } /* Dark mode: Override CSS variables for brighter gradients */ html.dark, body.dark { --hero-accent-gradient: linear-gradient(90deg, #199CFF, #33D2FF); --hero-accent-underline: linear-gradient(90deg, #199CFF, #33D2FF); } html.dark .hero-title-accent::after, body.dark .hero-title-accent::after { box-shadow: 0 0 12px rgba(25, 156, 255, 0.5) !important; } /* ============================================================================ DARK MODE TEXT VISIBILITY FIX - Professional Fintech Grade All text must be light colors for excellent readability ============================================================================ */ html.dark .country-name, html.dark .popular-card .name, html.dark .provider-name { color: #F1F5F9 !important; } html.dark .country-code, html.dark .popular-label, html.dark .field-label, html.dark .label-text, html.dark .route-label { color: #94A3B8 !important; } html.dark .field-helper, html.dark .field-hint { color: #94A3B8 !important; } html.dark .amount-input { color: #F8FAFC !important; } html.dark .amount-input::placeholder { color: #94A3B8 !important; } html.dark .rate-label, html.dark .rate-value { color: #F1F5F9 !important; } html.dark .rate-info { color: #94A3B8 !important; } /* Comprehensive dark mode text overrides - ALL text uses approved palette */ html.dark .form-label, html.dark label, html.dark .label, html.dark .field-label { color: #94A3B8 !important; } html.dark input::placeholder, html.dark textarea::placeholder, html.dark select::placeholder, html.dark .search-input::placeholder { color: #94A3B8 !important; } html.dark .text-secondary, html.dark .muted, html.dark .hint-text { color: #94A3B8 !important; } html.dark h1, html.dark h2, html.dark h3, html.dark h4, html.dark h5, html.dark h6, html.dark p, html.dark span, html.dark div { color: inherit; /* Inherit from parent, which defaults to #F1F5F9 */ } /* Dark mode overrides for ALL utility classes - must use approved palette */ html.dark .tag-success, html.dark .tag-info, html.dark .tag-warning, html.dark .tag-error, html.dark .fee-value, html.dark .fee-free, html.dark .text-success, html.dark .text-info, html.dark .text-warning, html.dark .text-error, html.dark .badge { color: #F1F5F9 !important; /* ✓ Approved primary text - keep backgrounds colored for semantic meaning */ } /* ======================================== END: PREMIUM FINTECH DESIGN ======================================== */ /* ======================================== MOBILE COUNTRY PICKER BOTTOM-SHEET v114 CRITICAL: Targets .country-panel.is-open ======================================== */ @media (max-width: 767px) { /* Ultra-specific selectors for specificity war */ html body div.country-panel[role="dialog"], html body .country-panel[role="dialog"], body div.country-panel, body .country-panel, div.country-panel, .country-panel, .country-panel.is-open, .country-panel:not(.is-open) { position: fixed !important; top: auto !important; bottom: 0 !important; left: 0 !important; right: 0 !important; width: 100% !important; max-width: 100% !important; max-height: 93vh !important; min-height: 560px !important; margin: 0 !important; background: rgba(255, 255, 255, 0.96) !important; backdrop-filter: blur(28px) saturate(180%) !important; -webkit-backdrop-filter: blur(28px) saturate(180%) !important; box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.12), 0 -2px 8px rgba(0, 0, 0, 0.08), 0 0 0 0.5px rgba(0, 0, 0, 0.06) !important; border-radius: 24px 24px 0 0 !important; border-bottom-left-radius: 0 !important; border-bottom-right-radius: 0 !important; transform-origin: bottom center !important; } /* Animation: Hidden state */ html body .country-panel:not(.is-open), body .country-panel:not(.is-open), .country-panel:not(.is-open) { transform: translateY(100%) !important; opacity: 0 !important; } /* Animation: Visible state */ html body .country-panel.is-open, body .country-panel.is-open, .country-panel.is-open { transform: translateY(0) !important; opacity: 1 !important; pointer-events: auto !important; } /* Scrollable country list */ #country-list-container { min-height: 320px !important; max-height: calc(93vh - 200px) !important; overflow-y: auto !important; -webkit-overflow-scrolling: touch !important; } /* Hide alphabet filters on mobile */ .alphabet-filters, .alphabet-filter-bar, [class*="alphabet"] { display: none !important; } } /* Dark mode bottom-sheet */ .dark .country-panel { background: rgba(15, 23, 40, 0.98) !important; } /* ======================================== END OF THEME v114.0 (CSS-ONLY .is-open FIX) ======================================== */ /* === INSIGHTS PAGE TEXT VISIBILITY FIX === */ .text-gray-900 { color: #111827 !important; } .text-gray-700 { color: #374151 !important; } .text-gray-600 { color: #4B5563 !important; } .text-gray-500 { color: #6B7280 !important; } .bg-gray-100 { background-color: #F3F4F6 !important; } .bg-gray-200 { background-color: #E5E7EB !important; } /* Ensure insights intro section is visible on mobile */ @media (max-width: 767px) { .insights-intro-section { color: #374151 !important; visibility: visible !important; opacity: 1 !important; } .insights-intro-section h2 { color: #111827 !important; } .insights-intro-section p { color: #374151 !important; } }