258 lines
7.4 KiB
CSS
258 lines
7.4 KiB
CSS
@tailwind base;
|
||
@tailwind components;
|
||
@tailwind utilities;
|
||
|
||
:root {
|
||
--font-inter: 'Inter', sans-serif;
|
||
--font-space: 'Space Grotesk', sans-serif;
|
||
|
||
/* Light Mode (hero / site-wide) */
|
||
--background: #F0EEE9;
|
||
--foreground: #121212;
|
||
--primary: #316263;
|
||
--primary-foreground: #FFFFFF;
|
||
--secondary: #E0DED9;
|
||
--secondary-foreground: #121212;
|
||
--muted: #D6D4D0;
|
||
--muted-foreground: #666666;
|
||
--accent: #B6FF3B;
|
||
--accent-foreground: #121212;
|
||
--border: #D6D4D0;
|
||
|
||
/* Hero gradient (CTA / headlines) - use site-wide */
|
||
--gradient-start: #6366f1;
|
||
--gradient-mid: #a855f7;
|
||
--gradient-end: #34d399;
|
||
--gradient-glow: rgba(88, 80, 236, 0.45);
|
||
--gradient-glow-hover: rgba(56, 189, 248, 0.5);
|
||
--accent-emerald: #10b981;
|
||
--accent-emerald-muted: rgba(34, 197, 94, 0.35);
|
||
}
|
||
|
||
.dark {
|
||
/* Dark Mode (Charcoal/Electric Cyan) */
|
||
--background: #121212;
|
||
--foreground: #F0EEE9;
|
||
--primary: #00FFFF;
|
||
--primary-foreground: #121212;
|
||
--secondary: #1E1E1E;
|
||
--secondary-foreground: #F0EEE9;
|
||
--muted: #2A2A2A;
|
||
--muted-foreground: #A0A0A0;
|
||
--accent: #316263;
|
||
--accent-foreground: #FFFFFF;
|
||
--border: #2A2A2A;
|
||
}
|
||
|
||
html,
|
||
body {
|
||
padding: 0;
|
||
margin: 0;
|
||
background-color: var(--background);
|
||
color: var(--foreground);
|
||
font-family: var(--font-inter);
|
||
-webkit-font-smoothing: antialiased;
|
||
-moz-osx-font-smoothing: grayscale;
|
||
overflow-x: hidden;
|
||
transition: background-color 0.3s ease, color 0.3s ease;
|
||
}
|
||
|
||
/* Glassmorphism Utilities */
|
||
.glass-panel {
|
||
background: rgba(255, 255, 255, 0.4);
|
||
backdrop-filter: blur(12px);
|
||
-webkit-backdrop-filter: blur(12px);
|
||
border: 1px solid rgba(255, 255, 255, 0.3);
|
||
}
|
||
|
||
.dark .glass-panel {
|
||
background: rgba(18, 18, 18, 0.6);
|
||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||
}
|
||
|
||
/* Landing hero: animated gradient glow (10–20s loop, subtle) */
|
||
@keyframes hero-glow-shift {
|
||
0%, 100% {
|
||
opacity: 0.35;
|
||
transform: scale(1) translate(0, 0);
|
||
}
|
||
33% {
|
||
opacity: 0.5;
|
||
transform: scale(1.08) translate(3%, -2%);
|
||
}
|
||
66% {
|
||
opacity: 0.4;
|
||
transform: scale(1.04) translate(-2%, 2%);
|
||
}
|
||
}
|
||
|
||
.animate-hero-glow {
|
||
animation: hero-glow-shift 15s ease-in-out infinite;
|
||
}
|
||
|
||
/* Soft gradient base for hero/feature pages: blue → lavender → green (ethereal) */
|
||
.page-soft-bg {
|
||
background: linear-gradient(
|
||
135deg,
|
||
#f0f9ff 0%,
|
||
#e0f2fe 15%,
|
||
#f5f3ff 40%,
|
||
#faf5ff 55%,
|
||
#f0fdf4 75%,
|
||
#ecfdf5 100%
|
||
);
|
||
background-attachment: fixed;
|
||
}
|
||
|
||
/* Subtle floating animation for gradient blobs */
|
||
@keyframes blob-float {
|
||
0%, 100% {
|
||
transform: translate(0, 0) scale(1);
|
||
}
|
||
33% {
|
||
transform: translate(2%, -3%) scale(1.02);
|
||
}
|
||
66% {
|
||
transform: translate(-2%, 2%) scale(0.98);
|
||
}
|
||
}
|
||
|
||
.animate-blob-float {
|
||
animation: blob-float 18s ease-in-out infinite;
|
||
}
|
||
|
||
/* Mesh Gradient */
|
||
.mesh-gradient {
|
||
background-color: #F0EEE9;
|
||
background-image:
|
||
radial-gradient(at 0% 0%, rgba(49, 98, 99, 0.15) 0px, transparent 50%),
|
||
radial-gradient(at 100% 0%, rgba(182, 255, 59, 0.1) 0px, transparent 50%),
|
||
radial-gradient(at 100% 100%, rgba(49, 98, 99, 0.1) 0px, transparent 50%),
|
||
radial-gradient(at 0% 100%, rgba(255, 255, 255, 0.5) 0px, transparent 50%);
|
||
}
|
||
|
||
.dark .mesh-gradient {
|
||
background-color: #121212;
|
||
background-image:
|
||
radial-gradient(at 0% 0%, rgba(0, 255, 255, 0.1) 0px, transparent 50%),
|
||
radial-gradient(at 100% 0%, rgba(49, 98, 99, 0.2) 0px, transparent 50%);
|
||
}
|
||
|
||
/* Utility for text balance */
|
||
.text-balance {
|
||
text-wrap: balance;
|
||
}
|
||
|
||
/* Custom Scrollbar */
|
||
::-webkit-scrollbar {
|
||
width: 8px;
|
||
height: 8px;
|
||
}
|
||
|
||
::-webkit-scrollbar-track {
|
||
background: transparent;
|
||
}
|
||
|
||
::-webkit-scrollbar-thumb {
|
||
background: var(--muted);
|
||
border-radius: 4px;
|
||
}
|
||
|
||
::-webkit-scrollbar-thumb:hover {
|
||
background: var(--muted-foreground);
|
||
}
|
||
|
||
/* ============================================
|
||
GLOBAL THEME (hero section = source of truth)
|
||
Use these classes site-wide for consistency.
|
||
============================================ */
|
||
|
||
@layer components {
|
||
/* Primary CTA - gradient, glow, rounded-full */
|
||
.btn-primary {
|
||
@apply inline-flex items-center justify-center rounded-full px-7 py-3 text-sm font-semibold text-white outline-none ring-2 ring-transparent ring-offset-2 ring-offset-background transition-all focus-visible:ring-emerald-400/80;
|
||
background: linear-gradient(to right, var(--gradient-start), var(--gradient-mid), var(--gradient-end));
|
||
box-shadow: 0 18px 60px var(--gradient-glow);
|
||
}
|
||
.btn-primary:hover {
|
||
box-shadow: 0 22px 70px var(--gradient-glow-hover);
|
||
transform: translateY(-2px);
|
||
}
|
||
.btn-primary:active {
|
||
transform: translateY(0);
|
||
}
|
||
|
||
/* Secondary - soft border, backdrop blur */
|
||
.btn-secondary {
|
||
@apply inline-flex items-center justify-center rounded-full border border-border px-7 py-3 text-sm font-semibold text-foreground backdrop-blur-md outline-none ring-2 ring-transparent ring-offset-2 ring-offset-background transition-colors focus-visible:ring-emerald-400/80;
|
||
background-color: color-mix(in srgb, var(--background) 60%, transparent);
|
||
}
|
||
|
||
.btn-secondary:hover {
|
||
background-color: color-mix(in srgb, var(--secondary) 40%, transparent);
|
||
}
|
||
|
||
/* Small primary (e.g. navbar Get Started) */
|
||
.btn-primary-sm {
|
||
@apply inline-flex items-center justify-center rounded-full px-5 py-2.5 text-sm font-semibold text-white outline-none ring-2 ring-transparent ring-offset-2 ring-offset-background transition-all focus-visible:ring-emerald-400/80 active:scale-[0.98];
|
||
background: linear-gradient(to right, var(--gradient-start), var(--gradient-mid), var(--gradient-end));
|
||
box-shadow: 0 18px 60px var(--gradient-glow);
|
||
}
|
||
.btn-primary-sm:hover {
|
||
box-shadow: 0 22px 70px var(--gradient-glow-hover);
|
||
transform: translateY(-1px);
|
||
}
|
||
|
||
/* Pill / badge (hero "AI-native · Live predictions" style) */
|
||
.badge-pill {
|
||
@apply inline-flex items-center gap-2 rounded-full border px-3 py-1 text-[11px] font-medium text-muted-foreground backdrop-blur-md;
|
||
border-color: color-mix(in srgb, var(--border) 60%, transparent);
|
||
background-color: color-mix(in srgb, var(--background) 60%, transparent);
|
||
box-shadow: 0 0 25px var(--accent-emerald-muted);
|
||
}
|
||
.badge-pill-dot {
|
||
@apply h-1.5 w-1.5 rounded-full bg-emerald-400;
|
||
}
|
||
|
||
/* Hero headline - gradient second line */
|
||
.heading-hero {
|
||
@apply text-balance text-4xl font-semibold tracking-tight text-foreground sm:text-5xl lg:text-6xl;
|
||
}
|
||
.heading-hero-accent {
|
||
@apply block text-transparent bg-clip-text bg-gradient-to-r from-indigo-400 via-sky-400 to-emerald-400;
|
||
}
|
||
|
||
/* Section headings site-wide */
|
||
.heading-section {
|
||
@apply text-3xl font-semibold tracking-tight text-foreground sm:text-4xl;
|
||
}
|
||
.heading-section-sub {
|
||
@apply mt-4 text-base text-muted-foreground sm:text-lg;
|
||
}
|
||
|
||
/* Body lead (hero subtext) */
|
||
.body-lead {
|
||
@apply text-pretty text-base text-muted-foreground sm:text-lg;
|
||
}
|
||
|
||
/* Feature bullets (Instant Plaid, Bank-grade, 14-day) */
|
||
.feature-bullets {
|
||
@apply flex flex-wrap items-center gap-6 text-xs text-muted-foreground;
|
||
}
|
||
.feature-bullet {
|
||
@apply flex items-center gap-2;
|
||
}
|
||
.feature-bullet-dot {
|
||
@apply h-1.5 w-1.5 rounded-full bg-emerald-400;
|
||
}
|
||
|
||
/* Card shell (hero-style glass) */
|
||
.card-glass {
|
||
@apply rounded-3xl border border-border/60 bg-gradient-to-b from-background/90 via-background to-background/60 shadow-glass;
|
||
}
|
||
|
||
/* Nav link - consistent with hero area */
|
||
.nav-link {
|
||
@apply text-sm font-medium text-muted-foreground transition-colors hover:text-foreground;
|
||
}
|
||
} |