/* * 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; /* Plain hex/RGB — NOT oklch(). oklch() opacity modifiers (bg-deep/95, border-deep-border/70, etc.) were failing to resolve in production, which is why the header, borders and toast were rendering wrong. RGB triples keep Tailwind's alpha-modifier syntax (bg-deep/95) working everywhere via the standard rgb(r g b / ) mechanism. */ --background: #fcfaf2; --foreground: #0e241a; --card: #ffffff; --card-foreground: #0e241a; --popover: #ffffff; --popover-foreground: #0e241a; --primary: #00643e; --primary-foreground: #fcfaf2; --secondary: #e6f5e8; --secondary-foreground: #0e3c29; --muted: #f0f1e5; --muted-foreground: #576a60; --accent: #e1b34f; --accent-foreground: #281e03; --destructive: #cc2827; --destructive-foreground: #fcfaf2; --border: #d8e1d6; --input: #d8e1d6; --ring: #00643e; --gold: #e1b34f; --gold-soft: #f3dca5; --gold-foreground: #281e03; --deep: #001d11; --deep-2: #032f1c; --deep-foreground: #f7f6eb; --deep-muted: #abbdae; --deep-border: #244534; --gradient-deep: linear-gradient(160deg, var(--deep) 0%, #052a1c 45%, #001409 100%); --gradient-gold: linear-gradient(100deg, var(--gold) 0%, var(--gold-soft) 55%, var(--gold) 100%); --gradient-mint: linear-gradient(180deg, var(--background) 0%, #eaf4ec 100%); --shadow-lift: 0 24px 60px -28px rgba(14, 36, 26, 0.32); --shadow-card: 0 2px 6px -2px rgba(14, 36, 26, 0.1), 0 18px 40px -30px rgba(14, 36, 26, 0.28); --shadow-gold: 0 18px 44px -18px rgba(225, 179, 79, 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; } header{ background-color: var(--primary); } h1, h2, h3, h4 { font-family: var(--font-display); letter-spacing: -0.02em; } /* Hard fallback: header must never render see-through/white, even if the Tailwind CDN script is blocked, slow, or fails on a given device. The JS in common.js still adds/removes bg-transparent + bg-deep/95 on scroll; this just guarantees a sane deep-green default underneath that. */ [data-site-header] { background-color: var(--deep); } /* ---------- 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) — selector must match the [data-accordion-item] ATTRIBUTE, not a ".accordion-item" class (that class was never actually on the markup, which is why the accordion previously did nothing). */ /* [data-accordion-item] .accordion-panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.3s ease; } [data-accordion-item][data-open="true"] .accordion-panel { grid-template-rows: 1fr; } [data-accordion-item][data-open="true"] .accordion-icon { transform: rotate(180deg); } */ .accordion-panel { display: none; } [data-accordion-item][data-open="true"] .accordion-panel { display: block; } [data-accordion-item][data-open="true"] .accordion-icon { transform: rotate(180deg); } /* 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-color: #ffffff; background-color: var(--card, #ffffff); opacity: 1; 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; }