/* * FinFam design system — premium African-global fintech. * Deep emerald + harvest gold on warm ivory. * Ported from the original Tailwind v4 `styles.css` design tokens. * Tailwind's utility classes (bg-gold, text-deep-muted, rounded-3xl, etc.) * are supplied at runtime by the Tailwind Play CDN + inline config in each * page's . This file supplies everything Tailwind's CDN build can't: * CSS custom properties, keyframes, and the handful of bespoke utilities * (surface-deep, card-hover, eyebrow, text-gradient-gold...) that the * original project defined with `@utility`. */ :root { --radius: 0.9rem; --radius-sm: calc(var(--radius) - 4px); --radius-md: calc(var(--radius) - 2px); --radius-lg: var(--radius); --radius-xl: calc(var(--radius) + 4px); --radius-2xl: calc(var(--radius) + 8px); --radius-3xl: calc(var(--radius) + 12px); --radius-4xl: calc(var(--radius) + 16px); --font-display: "Sora", ui-sans-serif, system-ui, sans-serif; --font-sans: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif; --background: oklch(0.985 0.011 95); --foreground: oklch(0.24 0.035 162); --card: oklch(1 0 0); --card-foreground: oklch(0.24 0.035 162); --popover: oklch(1 0 0); --popover-foreground: oklch(0.24 0.035 162); --primary: oklch(0.44 0.108 161); --primary-foreground: oklch(0.985 0.011 95); --secondary: oklch(0.955 0.022 150); --secondary-foreground: oklch(0.32 0.06 162); --muted: oklch(0.955 0.016 110); --muted-foreground: oklch(0.505 0.028 162); --accent: oklch(0.79 0.128 84); --accent-foreground: oklch(0.24 0.045 90); --destructive: oklch(0.55 0.2 27); --destructive-foreground: oklch(0.985 0.011 95); --border: oklch(0.9 0.018 140); --input: oklch(0.9 0.018 140); --ring: oklch(0.44 0.108 161); --gold: oklch(0.79 0.128 84); --gold-soft: oklch(0.9 0.075 88); --gold-foreground: oklch(0.24 0.045 90); --deep: oklch(0.205 0.045 162); --deep-2: oklch(0.27 0.058 160); --deep-foreground: oklch(0.97 0.014 100); --deep-muted: oklch(0.78 0.028 150); --deep-border: oklch(0.36 0.05 160); --gradient-deep: linear-gradient(160deg, var(--deep) 0%, oklch(0.24 0.055 168) 45%, oklch(0.17 0.04 160) 100%); --gradient-gold: linear-gradient(100deg, var(--gold) 0%, var(--gold-soft) 55%, var(--gold) 100%); --gradient-mint: linear-gradient(180deg, oklch(0.985 0.011 95) 0%, oklch(0.96 0.026 150) 100%); --shadow-lift: 0 24px 60px -28px oklch(0.24 0.045 162 / 0.32); --shadow-card: 0 2px 6px -2px oklch(0.24 0.045 162 / 0.1), 0 18px 40px -30px oklch(0.24 0.045 162 / 0.28); --shadow-gold: 0 18px 44px -18px oklch(0.79 0.128 84 / 0.5); } * { border-color: var(--border); } html { scroll-behavior: smooth; } body { background-color: var(--background); color: var(--foreground); font-family: var(--font-sans); -webkit-font-smoothing: antialiased; } h1, h2, h3, h4 { font-family: var(--font-display); letter-spacing: -0.02em; } /* ---------- keyframes ---------- */ @keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } } @keyframes rise { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: translateY(0); } } @keyframes pop-in { from { opacity: 0; transform: translateY(14px) scale(0.96); } to { opacity: 1; transform: translateY(0) scale(1); } } @keyframes drip { 0% { transform: translateY(-6px) scale(0.9); opacity: 0; } 35% { opacity: 1; } 100% { transform: translateY(30px) scale(0.5); opacity: 0; } } @keyframes sheen { 0%, 100% { opacity: 0.35; transform: translate3d(0, 0, 0) scale(1); } 50% { opacity: 0.7; transform: translate3d(0, -12px, 0) scale(1.06); } } /* ---------- bespoke utilities (were `@utility` in the Tailwind v4 source) ---------- */ .surface-deep { background-image: var(--gradient-deep); color: var(--deep-foreground); } .surface-mint { background-image: var(--gradient-mint); } .text-gradient-gold { background-image: var(--gradient-gold); -webkit-background-clip: text; background-clip: text; color: transparent; } .shadow-lift { box-shadow: var(--shadow-lift); } .shadow-card { box-shadow: var(--shadow-card); } .shadow-gold { box-shadow: var(--shadow-gold); } .eyebrow { font-family: var(--font-sans); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; } .card-hover { transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.35s ease, border-color 0.35s ease; } .card-hover:hover { transform: translateY(-6px); box-shadow: var(--shadow-lift); border-color: var(--gold); } .animate-marquee { animation: marquee 38s linear infinite; } .animate-rise { animation: rise 0.7s cubic-bezier(0.22, 1, 0.36, 1) both; } .animate-pop-in { animation: pop-in 0.45s cubic-bezier(0.22, 1, 0.36, 1) both; } .animate-drip { animation: drip 3.4s ease-in-out infinite; } .animate-sheen { animation: sheen 6s ease-in-out infinite; } /* ---------- small helpers not worth a Tailwind class ---------- */ input[type="range"] { accent-color: var(--gold); } /* Accordion (FAQ) */ .accordion-item[data-open="true"] .accordion-icon { transform: rotate(180deg); } .accordion-panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.3s ease; } .accordion-item[data-open="true"] .accordion-panel { grid-template-rows: 1fr; } .accordion-panel>div { overflow: hidden; } /* Toast */ #toast-root { position: fixed; top: 1rem; left: 50%; transform: translateX(-50%); z-index: 100; display: flex; flex-direction: column; gap: 0.5rem; width: min(360px, calc(100vw - 2rem)); } .toast { border-radius: 0.9rem; padding: 0.85rem 1rem; font-size: 0.85rem; font-weight: 500; box-shadow: var(--shadow-lift); background: var(--card); color: var(--card-foreground); border: 1px solid var(--border); animation: pop-in 0.3s ease both; } .toast strong { display: block; font-size: 0.9rem; margin-bottom: 0.15rem; } .toast[data-variant="success"] { border-color: color-mix(in oklch, var(--primary) 40%, var(--border)); } .toast[data-variant="error"] { border-color: color-mix(in oklch, var(--destructive) 50%, var(--border)); } /* Live popup / sticky cta slide transitions */ .slide-up-enter { transform: translateY(1rem); opacity: 0; pointer-events: none; } .slide-up-visible { transform: translateY(0); opacity: 1; }