@import url('ml-toast.css'); * { margin: 0; padding: 0; box-sizing: border-box; } :root { /* Blue Color Palette - Based on modern financial app design */ --blue-dark-1: #0a1628; --blue-dark-2: #1a2a3a; --blue-dark-3: #2a3a4a; --blue-medium-1: #3a4a5a; --blue-medium-2: #4a5a6a; --blue-light-1: #5a6a7a; --blue-light-2: #6a7a8a; --blue-light-3: #7a8a9a; --blue-accent: #4a90e2; --blue-accent-light: #6ba3f0; --blue-accent-dark: #2a7bc8; /* Gradient Classes */ --gradient-blue-1: linear-gradient(135deg, #1a2a3a 0%, #2a3a4a 50%, #3a4a5a 100%); --gradient-blue-2: linear-gradient(135deg, #2a3a4a 0%, #3a4a5a 50%, #4a5a6a 100%); --gradient-blue-3: linear-gradient(135deg, #3a4a5a 0%, #4a5a6a 50%, #5a6a7a 100%); --gradient-blue-4: linear-gradient(135deg, #4a90e2 0%, #6ba3f0 50%, #4a90e2 100%); --gradient-blue-5: linear-gradient(180deg, #1a2a3a 0%, #2a3a4a 100%); --gradient-blue-6: linear-gradient(180deg, #2a3a4a 0%, #3a4a5a 100%); --gradient-blue-accent: var(--theme-dark-green); /* --gradient-blue-accent: linear-gradient(135deg, #2a7bc8 0%, #4a90e2 50%, #6ba3f0 100%); */ /* Legacy colors (keeping for compatibility) */ --primary-color: #1a2a3a; --secondary-color: #2a3a4a; --accent-color: #4a90e2; --accent-hover: #6ba3f0; --success-color: #27ae60; --text-color: #ffffff; --text-light: #a2a2a2; --text-dark: #1a1a1a; --bg-light: #f8f9fa; --bg-dark: #1a2a3a; --bg-dark-secondary: #2a3a4a; --white: #ffffff; --gray-light: #d1d1d1; --border-color: rgba(255, 255, 255, 0.1); --border-accent: #4a90e2; --shadow: 0 2px 10px rgba(0,0,0,0.1); --shadow-lg: 0 5px 20px rgba(0,0,0,0.15); --shadow-dark: 0 5px 20px rgba(0,0,0,0.3); --shadow-blue: 0 4px 15px rgba(74, 144, 226, 0.3); --font-family: 'Jost', 'Inter'; /* Scrollbars (WebKit + Firefox) */ --scrollbar-track: #052736; --scrollbar-thumb: #f5ae4b; } /* * Alternate site palette (wall-inspired). * Usage: add `theme-alt-palette` to . * * Rules: * - Dark green: large backgrounds / depth. * - Soft white + light blue: primary copy and UI emphasis (via --text-* and --blue-accent). * - Orange + yellow: small accents (hover, borders, CTA gradients) — not dominant fills. * - Light green: isolated only (success / positive); use --success-color or --theme-light-green. */ body.theme-alt-palette { --theme-yellow: #f5ae4b; --theme-light-blue: #59cddb; --theme-orange: #eb5408; --theme-dark-green: #1d3f4d; --theme-soft-white: #f0dbed; --theme-light-green: #439d27; /* Surfaces: stay inside the dark-green family (no big cyan fields) */ --blue-dark-1: #152f3c; --blue-dark-2: #1d3f4d; --blue-dark-3: #254d5c; --blue-medium-1: #2d5868; --blue-medium-2: #356378; /* Lines / chips / secondary chrome — light blue at small scale */ --blue-light-1: #59cddb; --blue-light-2: #6bd0e0; --blue-light-3: #7ed4e5; /* Brand accent = light blue (links, key labels, focus rings that use accent) */ --blue-accent: #59cddb; /* Energy accents — yellow / orange touches (hover, highlights) */ --blue-accent-light: #f5ae4b; --blue-accent-dark: #eb5408; /* Page + card depth: dark green only */ --gradient-blue-5: linear-gradient(180deg, #1d3f4d 0%, #183848 100%); --gradient-blue-6: linear-gradient(180deg, #183848 0%, #1d3f4d 100%); --gradient-blue-1: linear-gradient(135deg, #1d3f4d 0%, #254d5c 50%, #2d5868 100%); --gradient-blue-2: linear-gradient(135deg, #254d5c 0%, #2d5868 50%, #356378 100%); --gradient-blue-3: linear-gradient(135deg, #2d5868 0%, #356378 55%, #3d6f7f 100%); /* Strong CTA / hero strips — orange + yellow as the “pop”, then back to dark */ --gradient-blue-4: linear-gradient(135deg, #eb5408 0%, #f5ae4b 42%, #1d3f4d 100%); --gradient-blue-accent: var(--theme-orange); /* Legacy compatibility tokens */ --primary-color: #1d3f4d; --secondary-color: #254d5c; --accent-color: #59cddb; --accent-hover: #f5ae4b; /* Isolated positive — do not use as a large background */ --success-color: #439d27; /* Typography: soft white body, light blue reads via --blue-accent in headings/links */ --text-color: #f0dbed; --text-light: rgba(240, 219, 237, 0.68); --text-dark: #1d3f4d; --bg-light: #f0dbed; --bg-dark: #1d3f4d; --bg-dark-secondary: #254d5c; --white: #f0dbed; --gray-light: #c9b8c4; --border-color: rgba(240, 219, 237, 0.14); /* Orange as a thin accent on chrome */ --border-accent: #eb5408; --shadow-blue: 0 4px 18px rgba(235, 84, 8, 0.18); } body.theme-alt-palette .btn-shine-effect::before { background: linear-gradient(90deg, transparent, rgba(245, 174, 75, 0.28), transparent); } /* Reusable Gradient Classes */ .gradient-blue-1 { background: var(--gradient-blue-1); } .gradient-blue-2 { background: var(--gradient-blue-2); } .gradient-blue-3 { background: var(--gradient-blue-3); } .gradient-blue-4 { background: var(--gradient-blue-4); } .gradient-blue-5 { background: var(--gradient-blue-5); } .gradient-blue-6 { background: var(--gradient-blue-6); } .gradient-blue-accent { background: var(--gradient-blue-accent); } /* Card with gradient background */ .card-gradient-blue { background: var(--gradient-blue-2); border-radius: 20px; padding: 20px; box-shadow: var(--shadow-blue); } /* Button with gradient */ .btn-gradient-blue { background: var(--gradient-blue-accent); color: var(--white); border: none; border-radius: 50px; padding: 12px 30px; font-weight: 600; cursor: pointer; transition: all 0.3s ease; box-shadow: var(--shadow-blue); } .btn-gradient-blue:hover { background: var(--gradient-blue-4); transform: translateY(-2px); box-shadow: 0 6px 20px rgba(74, 144, 226, 0.5); } body.theme-alt-palette .btn-gradient-blue:hover { box-shadow: 0 6px 22px rgba(235, 84, 8, 0.35); } body { font-family: var(--font-family); font-optical-sizing: auto; font-weight: 600; background: var(--gradient-blue-5); background-attachment: fixed; background-size: cover; background-repeat: no-repeat; color: var(--text-color); min-height: 100vh; } .padding-top-first-section { margin-top: 100px !important; } /* Clase reutilizable para efecto de brillo animado en loop */ .btn-shine-effect { position: relative; overflow: hidden; } .btn-shine-effect::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent); animation: shineLoop 3s infinite; pointer-events: none; } @keyframes shineLoop { 0% { left: -100%; } 50% { left: 100%; } 100% { left: 100%; } } /* Variación con delay para múltiples instancias */ .btn-shine-effect-delay-1::before { animation-delay: 0.5s; } .btn-shine-effect-delay-2::before { animation-delay: 1s; } .btn-shine-effect-delay-3::before { animation-delay: 1.5s; } .container { width: 100%; max-width: 1800px; margin: 0 auto; padding-right: 20px; padding-left: 20px; } @media (min-width: 768px) { .container { padding-right: 40px; padding-left: 40px; } } @media (min-width: 1024px) { .container { padding-right: 45px; padding-left: 45px; } } /* -------------------------------------------------------------------------- Global scrollbars (viewport + overflow areas) Track: #4a90e21a — Thumb: #f5ae4b -------------------------------------------------------------------------- */ html { scrollbar-width: thin; scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track); } * { scrollbar-width: thin; scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track); } *::-webkit-scrollbar { width: 10px; height: 10px; } *::-webkit-scrollbar-track { background: var(--scrollbar-track); } *::-webkit-scrollbar-thumb { background-color: var(--scrollbar-thumb); border-radius: 9999px; border: 2px solid transparent; background-clip: padding-box; } *::-webkit-scrollbar-thumb:hover { background-color: #e59a3a; } *::-webkit-scrollbar-corner { background: var(--scrollbar-track); } *::-webkit-scrollbar-button { display: none; width: 0; height: 0; }