743 lines
15 KiB
CSS
743 lines
15 KiB
CSS
/* Import Premium Fonts: Space Grotesk (headlines) + Inter Tight (body/UI) - MUST be first */
|
|
@import url('https://fonts.googleapis.com/css2?family=Inter+Tight:wght@300;400;500;600;700&family=Space+Grotesk:wght@400;500;600;700&display=swap');
|
|
|
|
@tailwind base;
|
|
@tailwind components;
|
|
@tailwind utilities;
|
|
|
|
@layer base {
|
|
:root {
|
|
/* Premium Warm Palette - Extracted from User Image */
|
|
--background: 40 11% 97%;
|
|
/* #F9F8F6 */
|
|
--foreground: 30 10% 20%;
|
|
/* Dark Charcoal for text */
|
|
|
|
--card: 0 0% 100%;
|
|
/* #FFFFFF */
|
|
--card-foreground: 30 10% 20%;
|
|
|
|
--popover: 0 0% 100%;
|
|
--popover-foreground: 30 10% 20%;
|
|
|
|
--primary: 34 29% 70%;
|
|
/* #C9B59C - Sand/Gold Accent */
|
|
--primary-foreground: 0 0% 100%;
|
|
|
|
--secondary: 30 24% 91%;
|
|
/* #EFE9E3 - Light Beige */
|
|
--secondary-foreground: 30 10% 20%;
|
|
|
|
--muted: 27 18% 82%;
|
|
/* #D9CFC7 - Taupe/Grayish */
|
|
--muted-foreground: 30 8% 45%;
|
|
|
|
--accent: 34 29% 70%;
|
|
--accent-foreground: 0 0% 100%;
|
|
|
|
--destructive: 0 72% 51%;
|
|
--destructive-foreground: 0 0% 100%;
|
|
|
|
--success: 142 76% 36%;
|
|
--success-foreground: 0 0% 100%;
|
|
|
|
--warning: 38 92% 50%;
|
|
--warning-foreground: 0 0% 100%;
|
|
|
|
--border: 27 18% 82%;
|
|
--input: 27 18% 82%;
|
|
--ring: 34 29% 70%;
|
|
|
|
--radius: 0.75rem;
|
|
|
|
/* New Accent Colors for Landing Page */
|
|
--burgundy: 349 67% 36%;
|
|
/* #8B2635 - Deep burgundy for "change detected" */
|
|
--teal: 177 35% 28%;
|
|
/* #2D5F5D - Deep teal for "signal/filtered" */
|
|
--noise-bg: 40 11% 96%;
|
|
/* #F5F5F3 - Very light gray with texture */
|
|
|
|
/* Section Background Variations for Visual Rhythm */
|
|
--section-bg-1: 40 11% 97%;
|
|
/* Cream/Off-White - Hero */
|
|
--section-bg-2: 30 15% 95%;
|
|
/* Warmer Beige - Stats */
|
|
--section-bg-3: 40 8% 96%;
|
|
/* Kühler Grau - Use Cases */
|
|
--section-bg-4: 35 20% 94%;
|
|
/* Warmes Taupe - How It Works */
|
|
--section-bg-5: 25 12% 93%;
|
|
/* Sandstone - Differentiators */
|
|
--section-bg-6: 177 10% 94%;
|
|
/* Sehr leichtes Teal - Pricing */
|
|
--section-bg-7: 349 8% 95%;
|
|
/* Sehr leichtes Burgundy - Social Proof */
|
|
|
|
/* New Gradients - Light Mode */
|
|
--ivory-start: 40 20% 97%;
|
|
/* #FAF9F6 */
|
|
--ivory-end: 38 18% 84%;
|
|
/* #DCD7CE */
|
|
|
|
--velvet-start: 45 12% 64%;
|
|
/* #ADA996 */
|
|
--velvet-end: 0 0% 95%;
|
|
/* #F2F2F2 */
|
|
}
|
|
|
|
/* Dark theme following the warm palette aesthetic */
|
|
/* Dark theme override with higher specificity */
|
|
html.dark {
|
|
--background: 30 15% 4%;
|
|
--foreground: 40 14% 96%;
|
|
|
|
--card: 30 10% 18%;
|
|
--card-foreground: 40 14% 96%;
|
|
|
|
--popover: 30 10% 18%;
|
|
--popover-foreground: 40 14% 96%;
|
|
|
|
--primary: 32 35% 55%;
|
|
--primary-foreground: 30 15% 10%;
|
|
|
|
--secondary: 30 10% 22%;
|
|
--secondary-foreground: 40 14% 96%;
|
|
|
|
--muted: 30 10% 22%;
|
|
--muted-foreground: 35 10% 65%;
|
|
|
|
--accent: 32 35% 55%;
|
|
--accent-foreground: 30 15% 10%;
|
|
|
|
--destructive: 0 72% 51%;
|
|
--destructive-foreground: 0 0% 100%;
|
|
|
|
--success: 142 76% 36%;
|
|
--success-foreground: 0 0% 100%;
|
|
|
|
--warning: 38 92% 50%;
|
|
--warning-foreground: 0 0% 100%;
|
|
|
|
--border: 30 12% 20%;
|
|
--input: 30 12% 20%;
|
|
--ring: 32 35% 50%;
|
|
|
|
/* Dark Mode Section Backgrounds */
|
|
--section-bg-1: 30 15% 8%;
|
|
--section-bg-2: 30 12% 10%;
|
|
--section-bg-3: 30 12% 9%;
|
|
--section-bg-4: 35 15% 11%;
|
|
--section-bg-5: 25 10% 9%;
|
|
--section-bg-6: 177 20% 8%;
|
|
--section-bg-7: 349 20% 9%;
|
|
|
|
/* New Gradients - Dark Mode */
|
|
--ivory-start: 0 0% 11%;
|
|
/* #1c1c1c */
|
|
--ivory-end: 30 5% 16%;
|
|
/* #2a2826 */
|
|
|
|
--velvet-start: 177 15% 20%;
|
|
/* #2d3a3a - Deep Sage */
|
|
--velvet-end: 0 0% 10%;
|
|
/* #1a1a1a */
|
|
}
|
|
}
|
|
|
|
@layer base {
|
|
* {
|
|
@apply border-border;
|
|
}
|
|
|
|
html {
|
|
font-family: var(--font-body), 'Inter Tight', 'Inter', system-ui, sans-serif;
|
|
-webkit-font-smoothing: antialiased;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
overflow-y: scroll;
|
|
}
|
|
|
|
body {
|
|
@apply bg-background text-foreground;
|
|
font-feature-settings: "cv02", "cv03", "cv04", "cv11";
|
|
}
|
|
|
|
/* Typography Classes - using next/font CSS variables */
|
|
.font-display {
|
|
font-family: var(--font-display), 'Space Grotesk', system-ui, sans-serif;
|
|
font-feature-settings: 'ss01';
|
|
letter-spacing: -0.02em;
|
|
}
|
|
|
|
.font-body {
|
|
font-family: var(--font-body), 'Inter Tight', 'Inter', system-ui, sans-serif;
|
|
}
|
|
|
|
.font-accent {
|
|
font-family: var(--font-display), 'Space Grotesk', monospace;
|
|
font-feature-settings: 'ss01';
|
|
}
|
|
|
|
.font-mono {
|
|
font-family: 'JetBrains Mono', monospace;
|
|
}
|
|
|
|
/* Typography Size Utilities */
|
|
.text-display-xl {
|
|
font-size: clamp(3rem, 8vw, 7rem);
|
|
font-weight: 700;
|
|
line-height: 0.95;
|
|
letter-spacing: -0.03em;
|
|
}
|
|
|
|
.text-display-lg {
|
|
font-size: clamp(2.5rem, 6vw, 5rem);
|
|
font-weight: 600;
|
|
line-height: 1.05;
|
|
letter-spacing: -0.02em;
|
|
}
|
|
|
|
.text-body-lg {
|
|
font-size: clamp(1.125rem, 2vw, 1.5rem);
|
|
line-height: 1.6;
|
|
font-weight: 400;
|
|
}
|
|
}
|
|
|
|
/* Premium UI Utilities */
|
|
@layer components {
|
|
|
|
/* Glass Panel Effect */
|
|
.glass-panel {
|
|
@apply bg-card/80 backdrop-blur-md border border-border/50 shadow-lg;
|
|
}
|
|
|
|
/* Premium Card with subtle shadow and hover effect */
|
|
.premium-card {
|
|
@apply bg-card rounded-xl border border-border/50 shadow-sm transition-all duration-300;
|
|
@apply hover:shadow-md hover:border-primary/30;
|
|
}
|
|
|
|
/* Glassmorphism Cards - Premium frosted glass effect */
|
|
.glass-card {
|
|
background: rgba(255, 255, 255, 0.7);
|
|
backdrop-filter: blur(20px) saturate(180%);
|
|
-webkit-backdrop-filter: blur(20px) saturate(180%);
|
|
border: 1px solid rgba(255, 255, 255, 0.3);
|
|
box-shadow:
|
|
0 8px 32px 0 rgba(0, 0, 0, 0.08),
|
|
inset 0 1px 0 0 rgba(255, 255, 255, 0.5);
|
|
}
|
|
|
|
.dark .glass-card {
|
|
background: rgba(40, 35, 30, 0.7);
|
|
/* Lighter, warmer dark glass */
|
|
border: 1px solid rgba(255, 255, 255, 0.12);
|
|
box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.4);
|
|
}
|
|
|
|
.glass-card-dark {
|
|
background: rgba(0, 0, 0, 0.4);
|
|
backdrop-filter: blur(20px) saturate(180%);
|
|
-webkit-backdrop-filter: blur(20px) saturate(180%);
|
|
border: 1px solid rgba(255, 255, 255, 0.1);
|
|
}
|
|
|
|
/* Gradient Accent Background */
|
|
.gradient-accent {
|
|
background: linear-gradient(135deg, hsl(var(--primary)) 0%, hsl(var(--secondary)) 100%);
|
|
}
|
|
|
|
/* New Gradient Combinations */
|
|
.gradient-primary-teal {
|
|
background: linear-gradient(135deg, hsl(var(--primary)) 0%, hsl(var(--teal)) 100%);
|
|
}
|
|
|
|
.gradient-teal-burgundy {
|
|
background: linear-gradient(135deg, hsl(var(--teal)) 0%, hsl(var(--burgundy)) 100%);
|
|
}
|
|
|
|
.gradient-warm {
|
|
background: linear-gradient(135deg, hsl(var(--primary)) 0%, hsl(34 40% 60%) 100%);
|
|
}
|
|
|
|
.gradient-cool {
|
|
background: linear-gradient(135deg, hsl(var(--teal)) 0%, hsl(200 30% 50%) 100%);
|
|
}
|
|
|
|
/* User Requested Gradients */
|
|
.gradient-ivory {
|
|
background: linear-gradient(180deg, hsl(var(--ivory-start)) 0%, hsl(var(--ivory-end)) 100%);
|
|
}
|
|
|
|
.gradient-velvet {
|
|
background: linear-gradient(180deg, hsl(var(--velvet-start)) 0%, hsl(var(--velvet-end)) 100%);
|
|
}
|
|
|
|
/* Status indicator dots */
|
|
.status-dot {
|
|
@apply w-2.5 h-2.5 rounded-full;
|
|
}
|
|
|
|
.status-dot-success {
|
|
@apply status-dot bg-green-500;
|
|
box-shadow: 0 0 8px rgba(34, 197, 94, 0.5);
|
|
}
|
|
|
|
.status-dot-error {
|
|
@apply status-dot bg-red-500;
|
|
box-shadow: 0 0 8px rgba(239, 68, 68, 0.5);
|
|
}
|
|
|
|
.status-dot-warning {
|
|
@apply status-dot bg-yellow-500;
|
|
box-shadow: 0 0 8px rgba(234, 179, 8, 0.5);
|
|
}
|
|
|
|
.status-dot-neutral {
|
|
@apply status-dot bg-gray-400;
|
|
}
|
|
|
|
/* Animated skeleton loading */
|
|
.skeleton {
|
|
@apply animate-pulse bg-muted rounded;
|
|
}
|
|
|
|
/* Focus ring for accessibility */
|
|
.focus-ring {
|
|
@apply focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 focus:ring-offset-background;
|
|
}
|
|
}
|
|
|
|
/* Smooth scrollbar */
|
|
@layer utilities {
|
|
.scrollbar-thin {
|
|
scrollbar-width: thin;
|
|
scrollbar-color: hsl(var(--border)) transparent;
|
|
}
|
|
|
|
.scrollbar-thin::-webkit-scrollbar {
|
|
width: 6px;
|
|
height: 6px;
|
|
}
|
|
|
|
.scrollbar-thin::-webkit-scrollbar-track {
|
|
background: transparent;
|
|
}
|
|
|
|
.scrollbar-thin::-webkit-scrollbar-thumb {
|
|
background-color: hsl(var(--border));
|
|
border-radius: 3px;
|
|
}
|
|
|
|
.scrollbar-thin::-webkit-scrollbar-thumb:hover {
|
|
background-color: hsl(var(--muted-foreground));
|
|
}
|
|
}
|
|
|
|
/* Animations */
|
|
@keyframes fadeIn {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateY(8px);
|
|
}
|
|
|
|
to {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
@keyframes slideIn {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateX(-16px);
|
|
}
|
|
|
|
to {
|
|
opacity: 1;
|
|
transform: translateX(0);
|
|
}
|
|
}
|
|
|
|
@keyframes pulse-glow {
|
|
|
|
0%,
|
|
100% {
|
|
box-shadow: 0 0 4px rgba(196, 178, 156, 0.4);
|
|
}
|
|
|
|
50% {
|
|
box-shadow: 0 0 12px rgba(196, 178, 156, 0.7);
|
|
}
|
|
}
|
|
|
|
.animate-fade-in {
|
|
animation: fadeIn 0.3s ease-out forwards;
|
|
}
|
|
|
|
.animate-slide-in {
|
|
animation: slideIn 0.3s ease-out forwards;
|
|
}
|
|
|
|
.animate-pulse-glow {
|
|
animation: pulse-glow 2s ease-in-out infinite;
|
|
}
|
|
|
|
/* Grain Texture Overlay */
|
|
@keyframes grain {
|
|
|
|
0%,
|
|
100% {
|
|
transform: translate(0, 0);
|
|
}
|
|
|
|
10% {
|
|
transform: translate(-5%, -10%);
|
|
}
|
|
|
|
20% {
|
|
transform: translate(-15%, 5%);
|
|
}
|
|
|
|
30% {
|
|
transform: translate(7%, -25%);
|
|
}
|
|
|
|
40% {
|
|
transform: translate(-5%, 25%);
|
|
}
|
|
|
|
50% {
|
|
transform: translate(-15%, 10%);
|
|
}
|
|
|
|
60% {
|
|
transform: translate(15%, 0%);
|
|
}
|
|
|
|
70% {
|
|
transform: translate(0%, 15%);
|
|
}
|
|
|
|
80% {
|
|
transform: translate(3%, 35%);
|
|
}
|
|
|
|
90% {
|
|
transform: translate(-10%, 10%);
|
|
}
|
|
}
|
|
|
|
.grain-texture::before {
|
|
content: '';
|
|
position: absolute;
|
|
inset: 0;
|
|
opacity: 0.03;
|
|
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
|
|
animation: grain 8s steps(10) infinite;
|
|
pointer-events: none;
|
|
}
|
|
|
|
/* Stagger Animation Delays */
|
|
.stagger-1 {
|
|
animation-delay: 0.1s;
|
|
}
|
|
|
|
.stagger-2 {
|
|
animation-delay: 0.2s;
|
|
}
|
|
|
|
.stagger-3 {
|
|
animation-delay: 0.3s;
|
|
}
|
|
|
|
.stagger-4 {
|
|
animation-delay: 0.4s;
|
|
}
|
|
|
|
.stagger-5 {
|
|
animation-delay: 0.5s;
|
|
}
|
|
|
|
.stagger-6 {
|
|
animation-delay: 0.6s;
|
|
}
|
|
|
|
/* Enhanced Animations for Phase 2 */
|
|
|
|
/* Smooth Scale In with Spring */
|
|
@keyframes scaleInSpring {
|
|
0% {
|
|
opacity: 0;
|
|
transform: scale(0.85);
|
|
}
|
|
|
|
50% {
|
|
transform: scale(1.05);
|
|
}
|
|
|
|
100% {
|
|
opacity: 1;
|
|
transform: scale(1);
|
|
}
|
|
}
|
|
|
|
/* Blur to Sharp */
|
|
@keyframes blurToSharp {
|
|
from {
|
|
filter: blur(10px);
|
|
opacity: 0;
|
|
}
|
|
|
|
to {
|
|
filter: blur(0px);
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
/* Letter Spacing Animation */
|
|
@keyframes letterSpacing {
|
|
from {
|
|
letter-spacing: 0.2em;
|
|
opacity: 0;
|
|
}
|
|
|
|
to {
|
|
letter-spacing: normal;
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
/* Rubber Band Effect */
|
|
@keyframes rubberBand {
|
|
0% {
|
|
transform: scale3d(1, 1, 1);
|
|
}
|
|
|
|
30% {
|
|
transform: scale3d(1.25, 0.75, 1);
|
|
}
|
|
|
|
40% {
|
|
transform: scale3d(0.75, 1.25, 1);
|
|
}
|
|
|
|
50% {
|
|
transform: scale3d(1.15, 0.85, 1);
|
|
}
|
|
|
|
65% {
|
|
transform: scale3d(0.95, 1.05, 1);
|
|
}
|
|
|
|
75% {
|
|
transform: scale3d(1.05, 0.95, 1);
|
|
}
|
|
|
|
100% {
|
|
transform: scale3d(1, 1, 1);
|
|
}
|
|
}
|
|
|
|
/* Glow Pulse */
|
|
@keyframes glowPulse {
|
|
|
|
0%,
|
|
100% {
|
|
box-shadow: 0 0 5px hsl(var(--teal) / 0.3), 0 0 10px hsl(var(--teal) / 0.2);
|
|
}
|
|
|
|
50% {
|
|
box-shadow: 0 0 20px hsl(var(--teal) / 0.6), 0 0 30px hsl(var(--teal) / 0.3), 0 0 40px hsl(var(--teal) / 0.2);
|
|
}
|
|
}
|
|
|
|
/* Gradient Shift */
|
|
@keyframes gradientShift {
|
|
|
|
0%,
|
|
100% {
|
|
background-position: 0% 50%;
|
|
}
|
|
|
|
50% {
|
|
background-position: 100% 50%;
|
|
}
|
|
}
|
|
|
|
/* Shimmer Effect */
|
|
@keyframes shimmer {
|
|
0% {
|
|
transform: translateX(-100%) skewX(-20deg);
|
|
}
|
|
|
|
100% {
|
|
transform: translateX(200%) skewX(-20deg);
|
|
}
|
|
}
|
|
|
|
/* Ripple Effect */
|
|
@keyframes ripple {
|
|
0% {
|
|
transform: scale(0);
|
|
opacity: 1;
|
|
}
|
|
|
|
100% {
|
|
transform: scale(4);
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
/* Bounce In */
|
|
@keyframes bounceIn {
|
|
0% {
|
|
opacity: 0;
|
|
transform: scale(0.3) translateY(-50px);
|
|
}
|
|
|
|
50% {
|
|
opacity: 1;
|
|
transform: scale(1.05);
|
|
}
|
|
|
|
70% {
|
|
transform: scale(0.9);
|
|
}
|
|
|
|
100% {
|
|
transform: scale(1);
|
|
}
|
|
}
|
|
|
|
/* Float Animation */
|
|
@keyframes float {
|
|
|
|
0%,
|
|
100% {
|
|
transform: translateY(0);
|
|
}
|
|
|
|
50% {
|
|
transform: translateY(-10px);
|
|
}
|
|
}
|
|
|
|
/* Rotate 3D */
|
|
@keyframes rotate3d {
|
|
0% {
|
|
transform: perspective(1000px) rotateY(0deg);
|
|
}
|
|
|
|
100% {
|
|
transform: perspective(1000px) rotateY(360deg);
|
|
}
|
|
}
|
|
|
|
/* Utility Classes */
|
|
.animate-scale-in-spring {
|
|
animation: scaleInSpring 0.6s cubic-bezier(0.22, 1, 0.36, 1) forwards;
|
|
}
|
|
|
|
.animate-blur-to-sharp {
|
|
animation: blurToSharp 0.8s ease-out forwards;
|
|
}
|
|
|
|
.animate-letter-spacing {
|
|
animation: letterSpacing 1s ease-out forwards;
|
|
}
|
|
|
|
.animate-rubber-band {
|
|
animation: rubberBand 0.8s ease-out;
|
|
}
|
|
|
|
.animate-glow-pulse {
|
|
animation: glowPulse 2s ease-in-out infinite;
|
|
}
|
|
|
|
.animate-gradient-shift {
|
|
animation: gradientShift 3s ease infinite;
|
|
background-size: 200% 200%;
|
|
}
|
|
|
|
.animate-shimmer {
|
|
animation: shimmer 2s ease-in-out;
|
|
}
|
|
|
|
.animate-ripple {
|
|
animation: ripple 0.6s ease-out;
|
|
}
|
|
|
|
.animate-bounce-in {
|
|
animation: bounceIn 0.8s cubic-bezier(0.22, 1, 0.36, 1) forwards;
|
|
}
|
|
|
|
.animate-float {
|
|
animation: float 3s ease-in-out infinite;
|
|
}
|
|
|
|
.animate-rotate-3d {
|
|
animation: rotate3d 20s linear infinite;
|
|
}
|
|
|
|
/* Hover Effects */
|
|
.hover-lift {
|
|
transition: transform 0.3s ease, box-shadow 0.3s ease;
|
|
}
|
|
|
|
.hover-lift:hover {
|
|
transform: translateY(-8px);
|
|
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
|
|
}
|
|
|
|
.hover-glow {
|
|
position: relative;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.hover-glow:hover {
|
|
box-shadow: 0 0 20px hsl(var(--primary) / 0.5);
|
|
}
|
|
|
|
.hover-scale {
|
|
transition: transform 0.3s ease;
|
|
}
|
|
|
|
.hover-scale:hover {
|
|
transform: scale(1.05);
|
|
}
|
|
|
|
/* Gradient Text */
|
|
.gradient-text {
|
|
background: linear-gradient(135deg, hsl(var(--primary)) 0%, hsl(var(--teal)) 50%, hsl(var(--burgundy)) 100%);
|
|
-webkit-background-clip: text;
|
|
background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
background-size: 200% auto;
|
|
}
|
|
|
|
.gradient-text-animated {
|
|
background: linear-gradient(135deg, hsl(var(--primary)) 0%, hsl(var(--teal)) 50%, hsl(var(--burgundy)) 100%);
|
|
-webkit-background-clip: text;
|
|
background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
background-size: 200% auto;
|
|
animation: gradientShift 3s ease infinite;
|
|
}
|
|
|
|
/* Reduced Motion Support */
|
|
@media (prefers-reduced-motion: reduce) {
|
|
|
|
*,
|
|
*::before,
|
|
*::after {
|
|
animation-duration: 0.01ms !important;
|
|
animation-iteration-count: 1 !important;
|
|
transition-duration: 0.01ms !important;
|
|
}
|
|
|
|
.grain-texture::before {
|
|
animation: none;
|
|
}
|
|
} |