/* * ELITE RMB — Professional Design System * A refined, human-designed financial services aesthetic * Ghana → China currency exchange platform */ /* ═══════════════════════════════════════════════ 1. DESIGN TOKENS ═══════════════════════════════════════════════ */ :root { /* Brand — Deep Blue */ --sr-primary: #1A2A5E; --sr-primary-hover: #2D3F7A; --sr-primary-light: #3D5599; --sr-primary-soft: #F1F4FA; /* Accent — Green */ --sr-accent: #20B96B; --sr-accent-hover: #179352; --sr-accent-soft: #EAF9F0; /* Semantic */ --sr-success: #20B96B; --sr-success-soft: #EAF9F0; --sr-warning: #F59E0B; --sr-warning-soft: #FEF6E7; --sr-error: #D92D20; --sr-error-soft: #FEF3F2; --sr-info: #1A2A5E; --sr-info-soft: #F1F4FA; /* Neutrals */ --sr-gray-50: #FAFBFC; --sr-gray-100: #F3F4F6; --sr-gray-200: #E5E7EB; --sr-gray-300: #D1D5DB; --sr-gray-400: #9CA3AF; --sr-gray-500: #6B7280; --sr-gray-600: #4B5563; --sr-gray-700: #374151; --sr-gray-800: #1F2937; --sr-gray-900: #111827; /* Backgrounds */ --sr-bg-page: #F8F9FA; --sr-bg-panel: #FFFFFF; --sr-bg-muted: #F3F4F6; --sr-bg-dark: #1A2A5E; /* Borders */ --sr-border: #E2E5EB; --sr-border-strong: #CBD2DE; --sr-border-focus: #1A2A5E; /* Typography */ --sr-font: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif; --sr-heading: 'Plus Jakarta Sans', 'Inter', 'Segoe UI', system-ui, sans-serif; /* Font sizes — restrained, professional hierarchy */ --sr-text-xs: 0.75rem; /* 12px */ --sr-text-sm: 0.875rem; /* 14px */ --sr-text-base: 1rem; /* 16px */ --sr-text-lg: 1.125rem; /* 18px */ --sr-text-xl: 1.25rem; /* 20px */ --sr-text-2xl: 1.5rem; /* 24px */ --sr-text-3xl: 1.875rem; /* 30px */ --sr-text-4xl: 2.25rem; /* 36px */ --sr-text-5xl: 2.75rem; /* 44px — max heading */ /* Spacing — consistent 4px base */ --sr-space-1: 0.25rem; --sr-space-2: 0.5rem; --sr-space-3: 0.75rem; --sr-space-4: 1rem; --sr-space-5: 1.25rem; --sr-space-6: 1.5rem; --sr-space-8: 2rem; --sr-space-10: 2.5rem; --sr-space-12: 3rem; --sr-space-16: 4rem; --sr-space-20: 5rem; /* Border radius */ --sr-radius-sm: 4px; --sr-radius-md: 6px; --sr-radius-lg: 8px; --sr-radius-xl: 12px; --sr-radius-2xl: 16px; /* Shadows — restrained */ --sr-shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.04); --sr-shadow-md: 0 2px 4px rgba(16, 24, 40, 0.06); --sr-shadow-lg: 0 4px 12px rgba(16, 24, 40, 0.08); --sr-shadow-xl: 0 8px 24px rgba(16, 24, 40, 0.1); /* Container */ --sr-container: 1200px; } /* Theme overrides for the landing page. The theme controller stores the selected mode on . */ html[data-theme="dark"] { --sr-bg-page: #0d1624; --sr-bg-panel: #172335; --sr-bg-muted: #142033; --sr-gray-50: #0d1624; --sr-gray-100: #142033; --sr-gray-200: #26364a; --sr-gray-300: #3a4d63; --sr-gray-400: #9eafc2; --sr-gray-500: #b2c0cf; --sr-gray-600: #c3cfdb; --sr-gray-700: #d4dee8; --sr-gray-800: #e7edf3; --sr-gray-900: #f8fafc; } html[data-theme="dark"] body { background: var(--sr-bg-page); color: var(--sr-gray-800); } html[data-theme="dark"] .swift-nav { background: rgba(23, 35, 53, .96); border-color: var(--sr-gray-200); } html[data-theme="dark"] .swift-nav-brand, html[data-theme="dark"] .swift-nav-brand:hover { color: var(--sr-gray-900); } html[data-theme="dark"] .swift-nav-link { color: var(--sr-gray-400); } html[data-theme="dark"] .swift-nav-link:hover { color: var(--sr-gray-200); } html[data-theme="dark"] .swift-mobile-menu { background: var(--sr-bg-panel); border-color: var(--sr-gray-200); } html[data-theme="dark"] .swift-mobile-menu a { color: var(--sr-gray-400); } html[data-theme="dark"] .swift-mobile-menu a:hover { background: var(--sr-gray-200); color: var(--sr-gray-900); } html[data-theme="dark"] .swift-nav-toggle { background: var(--sr-bg-panel); border-color: var(--sr-gray-300); color: var(--sr-gray-800); } html[data-theme="dark"] .swift-theme-toggle { color: var(--sr-gray-800); border-color: var(--sr-gray-300); } html[data-theme="dark"] .swift-card, html[data-theme="dark"] .swift-panel, html[data-theme="dark"] .buy-card, html[data-theme="dark"] .hero-rate-card { background: var(--sr-bg-panel); border-color: var(--sr-gray-200); color: var(--sr-gray-800); } html[data-theme="dark"] .swift-card p, html[data-theme="dark"] .swift-panel p, html[data-theme="dark"] .buy-card p, html[data-theme="dark"] .swift-section p { color: var(--sr-gray-600); } html[data-theme="dark"] input, html[data-theme="dark"] select, html[data-theme="dark"] textarea, html[data-theme="dark"] .swift-input, html[data-theme="dark"] .swift-select, html[data-theme="dark"] .swift-textarea { background: #122033; border-color: var(--sr-gray-300); color: var(--sr-gray-900); } html[data-theme="dark"] input::placeholder, html[data-theme="dark"] textarea::placeholder { color: var(--sr-gray-400); } html[data-theme="dark"] .swift-section-gray, html[data-theme="dark"] footer { background: #101b2b; } /* ═════════════════════════════════════════════════ 2. BASE STYLES ═════════════════════════════════════════════════ */ * { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; box-sizing: border-box; } html { scroll-behavior: smooth; } body { font-family: var(--sr-font); background-color: var(--sr-bg-page); color: var(--sr-gray-800); font-size: var(--sr-text-base); line-height: 1.6; letter-spacing: -0.011em; } h1, h2, h3, h4, h5, h6 { font-family: var(--sr-heading); color: var(--sr-gray-900); letter-spacing: -0.022em; line-height: 1.2; margin-top: 0; margin-bottom: 0.5em; font-weight: 700; } /* Typography hierarchy — restrained */ h1 { font-size: var(--sr-text-4xl); } h2 { font-size: var(--sr-text-3xl); } h3 { font-size: var(--sr-text-xl); } h4 { font-size: var(--sr-text-lg); } @media (min-width: 768px) { h1 { font-size: var(--sr-text-5xl); } h2 { font-size: var(--sr-text-4xl); } } /* Shared mobile safety rules for legacy public pages. */ html, body { max-width: 100%; overflow-x: hidden; overflow-x: clip; } img, svg, video, canvas { max-width: 100%; } @media (max-width: 768px) { input, select, textarea { max-width: 100%; font-size: 16px; } .container, .card, .bg-white { min-width: 0; } .overflow-x-auto, .table-responsive { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; } .overflow-x-auto table, .table-responsive table { min-width: 560px; } } @media (max-width: 480px) { .container { padding-left: .75rem; padding-right: .75rem; } .overflow-x-auto table, .table-responsive table { min-width: 520px; } } p { margin-top: 0; margin-bottom: 1rem; line-height: 1.6; } a { color: var(--sr-accent); text-decoration: none; transition: color 0.2s ease; } a:hover { color: var(--sr-accent-hover); } img { max-width: 100%; height: auto; } /* ═════════════════════════════════════════════════ 3. BUTTONS — Professional hierarchy ═════════════════════════════════════════════════ */ .btn, button[type="submit"], [role="button"], button { font-family: var(--sr-font); font-weight: 500; transition: all 0.2s ease; cursor: pointer; } /* Neutralize extreme rounded-full buttons */ .rounded-full { border-radius: var(--sr-radius-lg) !important; } /* Primary button pattern */ .bg-indigo-600, .bg-blue-600, .bg-gradient-to-r, [class*="from-indigo"], [class*="from-blue"] { background: var(--sr-primary) !important; border-color: var(--sr-primary) !important; } .bg-indigo-600:hover, .bg-blue-600:hover, .bg-gradient-to-r:hover, [class*="from-indigo"]:hover, [class*="from-blue"]:hover { background: var(--sr-primary-hover) !important; } /* Success CTA */ .bg-green-500, .bg-green-600, .bg-emerald-600, [class*="from-green"] { background: var(--sr-accent) !important; } .bg-green-500:hover, .bg-green-600:hover, .bg-emerald-600:hover, [class*="from-green"]:hover { filter: brightness(0.95); } /* Button text refinement */ .bg-indigo-600, .bg-blue-600, .bg-green-500, .bg-green-600, .bg-gradient-to-r, [class*="from-indigo"], [class*="from-blue"], [class*="from-green"] { font-weight: 500 !important; letter-spacing: -0.01em !important; } /* ═════════════════════════════════════════════════ 4. NAVBAR — Clean, professional ═════════════════════════════════════════════════ */ nav { border-bottom: 1px solid var(--sr-border); } nav .backdrop-filter, nav .backdrop-blur-lg { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } nav.bg-white, nav.bg-opacity-90, nav.bg-opacity-95 { background: #FFFFFF !important; } /* Nav links */ nav a.text-gray-700 { color: var(--sr-gray-600) !important; font-weight: 500 !important; font-size: var(--sr-text-sm); padding: 0.375rem 0; position: relative; } nav a.text-gray-700:hover { color: var(--sr-accent) !important; } nav a.text-black { color: var(--sr-gray-700) !important; font-weight: 500 !important; font-size: var(--sr-text-sm); } nav a.text-black:hover { color: var(--sr-accent) !important; } /* Reduce brand size */ nav .text-2xl, nav span.text-2xl { font-family: var(--sr-heading); font-weight: 700; font-size: 1.375rem; letter-spacing: -0.02em; } nav a.text-2xl { font-family: var(--sr-heading); font-weight: 700; font-size: 1.375rem; letter-spacing: -0.02em; color: var(--sr-primary); } /* ═════════════════════════════════════════════════ 5. HERO — Professional conversion-focused ═════════════════════════════════════════════════ */ /* Replace gradients with clean deep blue */ .bg-gradient { background: var(--sr-primary) !important; } /* Remove decorative blobs and floating elements */ [class*="blob"], [class*="animate-blob"], [class*="animate-ping"], [class*="animate-bounce"] { display: none !important; } /* Restrain hero heading sizes */ header h1 { font-size: var(--sr-text-3xl) !important; line-height: 1.2 !important; letter-spacing: -0.025em !important; max-width: 12em; } @media (min-width: 768px) { header h1 { font-size: var(--sr-text-4xl) !important; line-height: 1.15 !important; } } header h2 { font-size: var(--sr-text-xl) !important; font-weight: 500 !important; color: rgba(255, 255, 255, 0.85) !important; letter-spacing: -0.015em !important; } /* Hero body text */ header p.text-lg, header .text-lg { font-size: var(--sr-text-base) !important; line-height: 1.7 !important; color: rgba(255, 255, 255, 0.75) !important; } /* Hero badge — clean, not pill-heavy */ header .rounded-full, header .live-badge { background: rgba(255, 255, 255, 0.12) !important; border: 1px solid rgba(255, 255, 255, 0.2) !important; font-size: var(--sr-text-xs) !important; font-weight: 500 !important; letter-spacing: 0.06em !important; text-transform: uppercase !important; padding: 0.375rem 0.75rem !important; } /* Rate card in hero — clean and precise */ header .bg-white.rounded-lg, header .bg-white.p-6 { border-radius: var(--sr-radius-xl) !important; border: 1px solid var(--sr-border) !important; box-shadow: var(--sr-shadow-lg) !important; } header .bg-gray-50 { background: var(--sr-gray-50) !important; border-radius: var(--sr-radius-lg) !important; } header .text-4xl { font-size: var(--sr-text-3xl) !important; font-weight: 700 !important; } /* ═════════════════════════════════════════════════ 6. CALCULATOR — The centerpiece, professional FX style ═════════════════════════════════════════════════ */ /* Calculator section container — replace dark gradient with light panel */ section#calculator, [id*="calculator"] section, .bg-gradient-to-br, [class*="from-indigo-900"], [class*="from-purple-900"], [class*="to-indigo-800"] { background: var(--sr-bg-page) !important; } section#calculator h2, section#calculator p { color: var(--sr-gray-900); } /* Calculator tabs — professional segmented control */ #calculator [id^="tab-"] { background: transparent !important; border: 1px solid var(--sr-border) !important; border-radius: var(--sr-radius-md) !important; color: var(--sr-gray-600) !important; padding: 0.5rem 1.25rem !important; font-size: var(--sr-text-sm) !important; font-weight: 500 !important; } #calculator [id^="tab-"].active-tab { background: var(--sr-primary) !important; border-color: var(--sr-primary) !important; color: #FFFFFF !important; } /* Calculator inputs — light, professional */ #calculator .calculator-input, #calculator input[type="number"], #calculator input[type="text"], #calculator input { background: #FFFFFF !important; border: 1px solid var(--sr-border) !important; border-radius: var(--sr-radius-md) !important; color: var(--sr-gray-900) !important; box-shadow: var(--sr-shadow-sm) !important; } #calculator .calculator-input:focus, #calculator input[type="number"]:focus, #calculator input[type="text"]:focus, #calculator input:focus { border-color: var(--sr-border-focus) !important; box-shadow: 0 0 0 3px rgba(13, 27, 62, 0.1) !important; background: #FFFFFF !important; } /* Converter panels — clean panels */ #calculator [class*="bg-white"], #calculator .bg-white { background: var(--sr-bg-panel) !important; border: 1px solid var(--sr-border) !important; border-radius: var(--sr-radius-lg) !important; box-shadow: none !important; backdrop-filter: none !important; } /* Live rate pill */ #calculator .live-badge { color: var(--sr-success) !important; } /* Formula display — clean */ #conversion-formula, #calculator .formula-text { color: var(--sr-gray-600) !important; font-size: var(--sr-text-sm) !important; font-weight: 500 !important; } /* Conversion section headers */ #calculator label.text-white, #calculator label { color: var(--sr-gray-700) !important; font-size: var(--sr-text-sm) !important; font-weight: 500 !important; } /* Currency symbols in calculator */ #calculator .absolute[class*="left"], #calculator .text-white.text-opacity-80, #calculator .text-white.text-opacity-60 { color: var(--sr-gray-500) !important; } /* Create transaction button — remove glow */ #create-transaction-btn, .bg-gradient-to-r.from-green-500 { background: var(--sr-success) !important; box-shadow: var(--sr-shadow-md) !important; } #create-transaction-btn span.blur-sm, #create-transaction-btn .blur-sm { display: none !important; } /* ═════════════════════════════════════════════════ 7. CARDS — Subtle, realistic ═════════════════════════════════════════════════ */ /* Reduce card rounding and shadows globally */ .rounded-xl { border-radius: var(--sr-radius-lg) !important; } .rounded-2xl { border-radius: var(--sr-radius-xl) !important; } .shadow-lg, .shadow-xl, .shadow-2xl { box-shadow: var(--sr-shadow-md) !important; } .hover\:shadow-xl:hover, .hover\:shadow-lg:hover { box-shadow: var(--sr-shadow-lg) !important; } /* Cards with proper hierarchy */ .bg-white.rounded-xl, .bg-white.rounded-2xl, .bg-white.rounded-lg { border: 1px solid var(--sr-border) !important; box-shadow: var(--sr-shadow-sm) !important; } /* Remove hover lift effects */ .feature-card:hover, .hover\:scale-105:hover, .transform.hover\:-rotate-1:hover, [class*="hover:scale"] { transform: none !important; } /* Section padding rhythm */ .py-16 { padding-top: var(--sr-space-16) !important; padding-bottom: var(--sr-space-16) !important; } .py-20 { padding-top: var(--sr-space-20) !important; padding-bottom: var(--sr-space-20) !important; } .py-10 { padding-top: var(--sr-space-10) !important; padding-bottom: var(--sr-space-10) !important; } .py-8 { padding-top: var(--sr-space-8) !important; padding-bottom: var(--sr-space-8) !important; } /* Container width */ .container { max-width: var(--sr-container); } /* ═════════════════════════════════════════════════ 8. FORMS — Professional fintech inputs ═════════════════════════════════════════════════ */ input, select, textarea { font-family: var(--sr-font); font-size: var(--sr-text-sm) !important; border-radius: var(--sr-radius-md) !important; border-color: var(--sr-border) !important; box-shadow: var(--sr-shadow-sm) !important; transition: border-color 0.2s ease, box-shadow 0.2s ease; padding: 0.625rem 0.875rem !important; } input:focus, select:focus, textarea:focus { border-color: var(--sr-border-focus) !important; box-shadow: 0 0 0 3px rgba(13, 27, 62, 0.1) !important; outline: none !important; } input::placeholder, textarea::placeholder { color: var(--sr-gray-400); font-weight: 400; } /* Form labels */ label { font-size: var(--sr-text-sm) !important; font-weight: 500 !important; color: var(--sr-gray-700) !important; margin-bottom: 0.375rem !important; display: block; } /* Show visible labels */ label.sr-only { position: static !important; width: auto !important; height: auto !important; padding: 0 !important; margin: 0 0 0.375rem 0 !important; overflow: visible !important; clip: auto !important; white-space: normal !important; border: none !important; font-size: var(--sr-text-sm) !important; font-weight: 500 !important; color: var(--sr-gray-700) !important; } /* Optional administrator announcement */ .swift-announcement { position: sticky; top: 0; z-index: 1000; overflow: hidden; background: var(--sr-primary); border-bottom: 2px solid var(--sr-accent); color: #ffffff; box-shadow: 0 3px 12px rgba(13, 27, 62, 0.24); } .swift-announcement-track { display: grid; grid-template-columns: 18px minmax(0, 1fr) 28px; align-items: center; gap: .35rem; max-width: 1200px; min-height: 38px; margin: 0 auto; padding: .35rem .75rem; overflow: hidden; } .swift-announcement-marquee { display: flex; align-items: center; width: 100%; min-width: 0; overflow: hidden; white-space: nowrap; } .swift-announcement-label { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 50%; background: rgba(255,255,255,0.12); color: #ffffff; font-size: .66rem; line-height: 1; } .swift-announcement-label i { font-size: .66rem; } .swift-announcement-text { display: inline-block; flex: 0 0 auto; min-width: max-content; white-space: nowrap; color: #ffffff; font-size: .8rem; font-weight: 700; letter-spacing: .01em; opacity: 1; animation: swift-announcement-scroll 240s linear infinite; } .swift-announcement-close { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border: 1px solid rgba(255, 255, 255, .45); border-radius: 999px; background: transparent; color: #ffffff; cursor: pointer; } .swift-announcement-close:hover { background: rgba(255,255,255,0.12); border-color: rgba(255,255,255,0.7); } @keyframes swift-announcement-scroll { 0% { opacity: 1; transform: translateX(100%); } 100% { opacity: 1; transform: translateX(-120%); } } @media (prefers-reduced-motion: reduce) { .swift-announcement-text { animation: none; min-width: 0; overflow: visible; text-overflow: clip; } } @media (max-width: 640px) { .swift-announcement-label { font-size: .62rem; } .swift-announcement-text { font-size: .76rem; } } html[data-theme="dark"] .swift-announcement { background: var(--sr-primary); border-color: var(--sr-accent); } /* ═════════════════════════════════════════════════ 9. TABLES — Clean financial data ═════════════════════════════════════════════════ */ table { border-collapse: separate; border-spacing: 0; border: 1px solid var(--sr-border); border-radius: var(--sr-radius-lg); overflow: hidden; } thead th { background: var(--sr-gray-50) !important; color: var(--sr-gray-600) !important; font-size: var(--sr-text-xs) !important; font-weight: 600 !important; text-transform: uppercase !important; letter-spacing: 0.05em !important; padding: 0.75rem 1rem !important; border-bottom: 1px solid var(--sr-border) !important; } tbody tr { transition: background-color 0.15s ease; } tbody tr:hover { background-color: var(--sr-gray-50) !important; } tbody td { padding: 0.875rem 1rem !important; border-bottom: 1px solid var(--sr-border) !important; color: var(--sr-gray-700) !important; font-size: var(--sr-text-sm) !important; } tbody tr:last-child td { border-bottom: none !important; } /* ═════════════════════════════════════════════════ 10. STATUS BADGES ═════════════════════════════════════════════════ */ span[class*="bg-green-100"] { background: var(--sr-accent-soft) !important; color: var(--sr-accent) !important; border: 1px solid rgba(22, 163, 74, 0.15); } span[class*="bg-yellow-100"] { background: var(--sr-warning-soft) !important; color: var(--sr-warning) !important; border: 1px solid rgba(180, 83, 9, 0.15); } span[class*="bg-red-100"] { background: var(--sr-error-soft) !important; color: var(--sr-error) !important; border: 1px solid rgba(220, 38, 38, 0.15); } span[class*="bg-blue-100"] { background: var(--sr-info-soft) !important; color: var(--sr-info) !important; border: 1px solid rgba(14, 165, 233, 0.15); } span[class*="bg-gray-100"] { background: var(--sr-gray-100) !important; color: var(--sr-gray-600) !important; border: 1px solid var(--sr-border); } /* ═════════════════════════════════════════════════ 11. NOTIFICATION BANNERS ═════════════════════════════════════════════════ */ .notification-banner { font-weight: 500; font-size: var(--sr-text-sm); } /* ═════════════════════════════════════════════════ 12. SECTION EYEBROWS ═════════════════════════════════════════════════ */ span.rounded-full, .inline-block.rounded-full { border-radius: var(--sr-radius-md) !important; } .inline-block.py-1.px-3 { letter-spacing: 0.03em !important; text-transform: uppercase !important; font-size: 0.688rem !important; font-weight: 600 !important; } /* ═════════════════════════════════════════════════ 13. FOOTER ═════════════════════════════════════════════════ */ footer { background: var(--sr-gray-900) !important; } footer a { color: var(--sr-gray-400) !important; transition: color 0.15s ease; } footer a:hover { color: #FFFFFF !important; } /* ═════════════════════════════════════════════════ 14. DASHBOARD SPECIFICS ═════════════════════════════════════════════════ */ .bg-gradient-to-r.from-indigo-600.to-purple-600 { background: linear-gradient(120deg, var(--sr-primary) 0%, var(--sr-primary-light) 100%) !important; } .sidebar-link { color: var(--sr-gray-600) !important; } .sidebar-link:hover { color: var(--sr-accent) !important; } /* ═════════════════════════════════════════════════ 15. AUTH PAGES ═════════════════════════════════════════════════ */ .min-h-screen .bg-white.p-10, .min-h-screen .bg-white.p-8 { border: 1px solid var(--sr-border) !important; box-shadow: var(--sr-shadow-lg) !important; border-radius: var(--sr-radius-xl) !important; padding: 2.5rem !important; } .min-h-screen .text-3xl { font-size: var(--sr-text-2xl) !important; font-weight: 700 !important; } /* ═════════════════════════════════════════════════ 16. SECTION HEADINGS — Restrained globally ═════════════════════════════════════════════════ */ .text-4xl { font-size: var(--sr-text-3xl) !important; } .text-5xl { font-size: var(--sr-text-4xl) !important; } /* ═════════════════════════════════════════════════ 17. CONVERTER LANDING PAGES ═════════════════════════════════════════════════ */ .converter-hero { background: var(--sr-primary) !important; } .converter-hero .cc { background: rgba(255, 255, 255, 0.06) !important; border: 1px solid rgba(255, 255, 255, 0.15) !important; border-radius: var(--sr-radius-lg) !important; backdrop-filter: none !important; } .converter-hero .cc input { background: rgba(255, 255, 255, 0.1) !important; border-color: rgba(255, 255, 255, 0.15) !important; } .converter-table { border-radius: var(--sr-radius-lg) !important; overflow: hidden; } /* ═════════════════════════════════════════════════ 18. MOBILE RESPONSIVENESS ═════════════════════════════════════════════════ */ @media (max-width: 767px) { /* No horizontal scroll */ html, body { overflow-x: hidden; overflow-x: clip; } /* Reduced heading sizes on mobile */ h1 { font-size: 1.625rem !important; } h2 { font-size: 1.375rem !important; } h3 { font-size: 1.125rem !important; } /* Calculator inputs full clarity */ #calculator input[type="number"], #calculator input[type="text"] { font-size: 1.125rem !important; padding: 0.75rem 1rem !important; } /* Tappable buttons */ button, .btn, [type="button"], [type="submit"] { min-height: 44px; } /* Container padding */ .container { padding-left: 1rem !important; padding-right: 1rem !important; } /* Table scrolling */ .overflow-x-auto { -webkit-overflow-scrolling: touch; } /* Feature cards group */ .grid { gap: 1rem !important; } /* Auth pages */ .min-h-screen { padding: 2rem 1rem !important; } /* Form spacing */ .space-y-6 > * + * { margin-top: 1.25rem !important; } .space-y-4 > * + * { margin-top: 1rem !important; } /* Only explicit table containers scroll; preserve table semantics elsewhere. */ .table-responsive, .overflow-x-auto { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; } } /* Tablet adjustments */ @media (min-width: 768px) and (max-width: 1023px) { .container { padding-left: 1.5rem !important; padding-right: 1.5rem !important; } h1 { font-size: var(--sr-text-4xl) !important; } h2 { font-size: var(--sr-text-3xl) !important; } } /* ═════════════════════════════════════════════════ 19. UTILITY CLASSES ═════════════════════════════════════════════════ */ /* Clean rate display panel */ .rate-panel { background: #FFFFFF; border: 1px solid var(--sr-border); border-radius: var(--sr-radius-lg); padding: 1rem 1.25rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; } .rate-panel .currency-code { font-family: var(--sr-heading); font-weight: 600; font-size: var(--sr-text-sm); color: var(--sr-gray-500); text-transform: uppercase; letter-spacing: 0.03em; } .rate-panel .currency-amount { font-family: var(--sr-heading); font-weight: 700; font-size: var(--sr-text-xl); color: var(--sr-gray-900); } .rate-panel .currency-divider { color: var(--sr-gray-300); font-weight: 500; } /* Section spacing */ .section-spacing { padding-top: var(--sr-space-16); padding-bottom: var(--sr-space-16); } /* Divider */ .divider { height: 1px; background: var(--sr-border); border: none; margin: 0; }