/* ======================================================================== ../../assets/css/main.css Global shell styles for Una Amigo Lending Corp. Covers: CSS reset, theme vars, splash loader, navbar, colour panel, footer, scroll-top All component/page styles live inside their respective .js files. ======================================================================== */ /* ── Google Font fallback (Figtree loaded in ) ──────────────── */ @import url('https://fonts.googleapis.com/css2?family=Figtree:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,400&display=swap'); /* ── CSS Variables ─────────────────────────────────────────────────── */ :root { /* ── Brand (professional green – dynamic via JS colour panel) ─── */ --brand: #16a34a; --brand-dark: #15803d; --brand-glow: rgba(22,163,74,.18); --brand-pale: rgba(22,163,74,.08); /* ── Light (default) ─────────────────────────────────────────── */ --bg: #ffffff; --bg-2: #f8f9fa; --surface: #ffffff; --border: rgba(0,0,0,.08); --text-1: #0d1117; --text-2: #374151; --text-3: #6b7280; --shadow: 0 8px 40px rgba(0,0,0,.07); --shadow-md: 0 16px 60px rgba(0,0,0,.11); --nav-bg: rgba(255,255,255,.9); --nav-border: rgba(0,0,0,.08); --radius: 20px; --radius-sm: 12px; --tr: .25s cubic-bezier(.4,0,.2,1); --nav-h: 68px; } [data-theme="dark"] { --bg: #0a0a0a; --bg-2: #111111; --surface: #141414; --border: rgba(255,255,255,.08); --text-1: #f0f0f0; --text-2: #c0c0c0; --text-3: #707070; --shadow: 0 8px 40px rgba(0,0,0,.4); --shadow-md: 0 16px 60px rgba(0,0,0,.55); --nav-bg: rgba(10,10,10,.92); --nav-border: rgba(255,255,255,.06); } /* ── Reset ─────────────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { font-family: 'Figtree', 'Segoe UI', system-ui, sans-serif; background: var(--bg); color: var(--text-1); line-height: 1.6; transition: background .3s ease, color .3s ease; overflow-x: hidden; } a { text-decoration: none; color: inherit; } button { font-family: inherit; } img { max-width: 100%; display: block; } /* ── App layout wrapper ─────────────────────────────────────────────── */ #app-layout { min-height: 100vh; display: flex; flex-direction: column; } .ua-main { flex: 1; padding-top: var(--nav-h); } /* ══════════════════════════════════════════════════════════════════════ SPLASH LOADER ══════════════════════════════════════════════════════════════════════ */ #app-loading { position: fixed; inset: 0; z-index: 9999; background: var(--bg); display: flex; align-items: center; justify-content: center; transition: opacity .4s ease; } #app-loading.hidden { opacity: 0; pointer-events: none; } .splash-inner { display: flex; flex-direction: column; align-items: center; gap: 1rem; } .splash-logo svg { width: 52px; height: 52px; animation: splash-spin 1.8s linear infinite; } /* Override SVG presentation attributes so the splash adapts to brand colour */ .splash-logo svg circle:first-child { stroke: var(--brand); fill: none; } .splash-logo svg path { stroke: var(--brand); fill: none; } .splash-logo svg circle:last-child { fill: var(--brand); stroke: none; } @keyframes splash-spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .splash-text { font-family: 'Figtree', sans-serif; font-size: 1.1rem; font-weight: 900; letter-spacing: .2em; color: var(--text-1); } .splash-bar { width: 120px; height: 3px; background: var(--border); border-radius: 99px; overflow: hidden; } .splash-fill { height: 100%; background: var(--brand); border-radius: 99px; animation: splash-fill 1.4s ease-in-out infinite alternate; } @keyframes splash-fill { from { width: 0%; } to { width: 100%; } } /* ══════════════════════════════════════════════════════════════════════ NAVBAR ══════════════════════════════════════════════════════════════════════ */ .ua-nav { position: fixed; top: 0; left: 0; right: 0; z-index: 900; height: var(--nav-h); background: transparent; transition: background .35s ease, box-shadow .35s ease, border-color .35s ease; border-bottom: 1px solid transparent; } .ua-nav.scrolled { background: var(--nav-bg); backdrop-filter: blur(24px) saturate(160%); -webkit-backdrop-filter: blur(24px) saturate(160%); border-color: var(--nav-border); box-shadow: 0 4px 32px rgba(0,0,0,.08); } .ua-nav-inner { max-width: 1200px; margin: 0 auto; height: 100%; padding: 0 1.5rem; display: flex; align-items: center; gap: 2rem; } /* Logo */ .ua-logo { display: flex; align-items: center; flex-shrink: 0; } .ua-logo-img { height: 44px; width: auto; display: block; mix-blend-mode: screen; filter: brightness(1.08); transition: opacity var(--tr); } .ua-logo-img--footer { height: 52px; } .ua-logo:hover .ua-logo-img { opacity: .85; } [data-theme="light"] .ua-logo-img { mix-blend-mode: multiply; filter: brightness(1); } /* Nav links */ .ua-nav-links { display: flex; align-items: center; gap: .25rem; } .ua-nav-link { padding: .45rem .9rem; font-size: .88rem; font-weight: 600; color: var(--text-2); border-radius: 8px; transition: color var(--tr), background var(--tr); position: relative; } .ua-nav-link::after { content: ''; position: absolute; bottom: 4px; left: 50%; right: 50%; height: 2px; background: var(--brand); border-radius: 1px; transition: left var(--tr), right var(--tr); } .ua-nav-link:hover, .ua-nav-link.active { color: var(--text-1); } .ua-nav-link:hover::after, .ua-nav-link.active::after { left: .9rem; right: .9rem; } /* Alert link (Advisory) */ .ua-nav-link--alert { color: #e05555 !important; } .ua-nav-link--alert::after { background: #e05555; } .ua-nav-link--alert:hover, .ua-nav-link--alert.active { color: #ff6b6b !important; } .ua-drawer-link--alert { color: #e05555 !important; } .ua-drawer-link--alert:hover { background: rgba(224,85,85,.08) !important; } /* Controls — always pushed to the far right */ .ua-nav-controls { display: flex; align-items: center; gap: .5rem; margin-left: auto; } .ua-icon-btn { width: 38px; height: 38px; background: transparent; border: 1.5px solid var(--border); border-radius: 10px; color: var(--text-2); font-size: 1.05rem; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all var(--tr); } .ua-icon-btn:hover { border-color: var(--brand); color: var(--brand); background: var(--brand-pale); } .ua-cta-btn { display: inline-flex; align-items: center; gap: .4rem; background: var(--brand); color: #fff; font-family: inherit; font-weight: 800; font-size: .85rem; padding: .55rem 1.2rem; border-radius: 10px; border: none; cursor: pointer; transition: all var(--tr); box-shadow: 0 2px 12px var(--brand-glow); white-space: nowrap; } .ua-cta-btn:hover { background: var(--brand-dark); transform: translateY(-1px); box-shadow: 0 4px 20px var(--brand-glow); } /* Mobile menu button */ .ua-menu-btn { display: none; } /* Mobile drawer */ .ua-drawer { display: none; flex-direction: column; gap: .35rem; padding: 0 1rem; background: var(--nav-bg); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); border-top: 1px solid var(--nav-border); max-height: 0; overflow: hidden; transition: max-height .35s ease, padding .35s ease; } .ua-drawer.open { max-height: 400px; padding: .75rem 1rem 1.25rem; } .ua-drawer-link { padding: .7rem 1rem; font-size: .95rem; font-weight: 600; color: var(--text-2); border-radius: var(--radius-sm); transition: all var(--tr); } .ua-drawer-link:hover, .ua-drawer-link.active { color: var(--text-1); background: var(--brand-pale); } .ua-drawer-cta { margin-top: .5rem; justify-content: center; } /* ── Colour Theme Button & Dot indicator ─────────────────────────── */ #ua-color-btn { position: relative; } .ua-color-dot { position: absolute; bottom: 6px; right: 6px; width: 6px; height: 6px; border-radius: 50%; background: var(--brand); border: 1.5px solid var(--surface); pointer-events: none; transition: background var(--tr); } /* ── Colour Panel ────────────────────────────────────────────────── */ .ua-color-panel { position: absolute; top: 100%; right: 1rem; margin-top: 6px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); box-shadow: var(--shadow-md); padding: 1.1rem 1.2rem; min-width: 210px; z-index: 100; opacity: 0; transform: translateY(-8px) scale(0.97); pointer-events: none; transition: opacity .22s ease, transform .22s ease; } .ua-color-panel.open { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; } .ua-cp-title { font-size: .7rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--text-3); margin-bottom: .85rem; } .ua-cp-option { display: flex; align-items: center; gap: .55rem; padding: .4rem .3rem; border-radius: 8px; margin-bottom: .3rem; transition: background var(--tr); cursor: pointer; } .ua-cp-option:hover { background: var(--brand-pale); } .ua-cp-option input[type="radio"] { accent-color: var(--brand); width: 16px; height: 16px; cursor: pointer; flex-shrink: 0; } .ua-cp-option label { display: flex; align-items: center; gap: .5rem; cursor: pointer; font-size: .88rem; font-weight: 600; color: var(--text-1); width: 100%; } .ua-cp-swatch { width: 18px; height: 18px; border-radius: 50%; border: 2px solid rgba(0,0,0,.12); display: inline-block; flex-shrink: 0; transition: transform .2s ease; } .ua-cp-option:hover .ua-cp-swatch { transform: scale(1.15); } /* Picker row — shown under Blue/Custom radio when that option is selected */ .ua-cp-picker-row { display: none; align-items: center; gap: .6rem; margin-top: .6rem; padding-left: 1.7rem; /* indent to align with the label text */ } .ua-cp-picker-row.visible { display: flex; } #ua-cp-picker { width: 40px; height: 30px; border: 1.5px solid var(--border); border-radius: 8px; cursor: pointer; padding: 2px; background: transparent; flex-shrink: 0; } .ua-cp-save-btn { display: inline-flex; align-items: center; gap: .3rem; background: var(--brand); color: #fff; border: none; border-radius: 8px; padding: .35rem .9rem; font-family: inherit; font-weight: 700; font-size: .8rem; cursor: pointer; transition: background var(--tr), transform .15s ease; } .ua-cp-save-btn:hover { background: var(--brand-dark); transform: translateY(-1px); } .ua-cp-divider { height: 1px; background: var(--border); margin: .75rem 0; } /* Responsive nav */ @media (max-width: 768px) { .ua-nav-links { display: none; } .ua-menu-btn { display: flex; } .ua-cta-btn:not(.ua-drawer-cta) { display: none; } .ua-drawer { display: flex; } } @media (max-width: 480px) { .ua-nav-controls { gap: .3rem; } .ua-icon-btn { width: 34px; height: 34px; font-size: .95rem; border-radius: 8px; } .ua-color-panel { right: .5rem; left: .5rem; min-width: unset; } } /* ── Language toggle button (moved here from MainLayout.js inline