File size: 4,244 Bytes
3095284 3679583 3095284 1ae88f5 3095284 1ae88f5 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 | @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');
@import "tailwindcss";
@theme {
--font-sans: "Inter", ui-sans-serif, system-ui, sans-serif;
--color-primary: #2563EB;
--color-dark-navy: #0F172A;
--color-light-bg: #F8FAFC;
--color-border-gray: #E2E8F0;
--color-text-primary: #0B1220;
--color-text-muted: #64748B;
--radius-xl: 12px;
--radius-2xl: 16px;
}
@layer base {
body {
@apply bg-[#F8FAFC] text-[#0B1220] font-sans antialiased;
}
}
@layer components {
.btn-primary {
@apply bg-[#2563EB] text-white px-6 py-2.5 rounded-full font-bold hover:bg-blue-700 transition-all shadow-lg shadow-blue-200 active:scale-95;
}
.btn-secondary {
@apply border border-[#E2E8F0] text-[#64748B] px-6 py-2.5 rounded-full font-bold hover:bg-gray-50 transition-all active:scale-95;
}
.btn-navy {
@apply bg-[#0F172A] text-white px-6 py-2.5 rounded-xl font-bold hover:bg-black transition-all active:scale-95;
}
/* Liquid Glass Panels */
.glass-panel {
background: rgba(255, 255, 255, 0.4);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border: 1px solid rgba(255, 255, 255, 0.5);
box-shadow:
0 12px 40px -10px rgba(15, 23, 42, 0.05),
inset 0 1px 1px 0 rgba(255, 255, 255, 0.5);
}
.glass-panel-dark {
background: rgba(15, 23, 42, 0.45);
backdrop-filter: blur(24px);
-webkit-backdrop-filter: blur(24px);
border: 1px solid rgba(255, 255, 255, 0.08);
box-shadow:
0 20px 50px -12px rgba(0, 0, 0, 0.3),
inset 0 1px 0 0 rgba(255, 255, 255, 0.1);
}
.glass-card {
background: rgba(255, 255, 255, 0.45);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border: 1px solid rgba(255, 255, 255, 0.4);
box-shadow: 0 8px 32px -4px rgba(15, 23, 42, 0.03);
}
.glass-button {
background: rgba(255, 255, 255, 0.5);
border: 1px solid rgba(255, 255, 255, 0.4);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.4);
transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.glass-button:hover {
background: rgba(255, 255, 255, 0.82);
border-color: rgba(255, 255, 255, 0.7);
@apply transform -translate-y-0.5 shadow-md shadow-gray-200/50 text-dark-navy;
}
.glass-button-primary {
background: rgba(37, 99, 235, 0.85);
border: 1px solid rgba(255, 255, 255, 0.2);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
box-shadow: 0 10px 25px -5px rgba(37, 99, 235, 0.25), inset 0 1px 1px 0 rgba(255, 255, 255, 0.35);
transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.glass-button-primary:hover {
background: rgba(37, 99, 235, 0.95);
transform: translateY(-2px);
box-shadow: 0 12px 30px -5px rgba(37, 99, 235, 0.35), inset 0 1px 1px 0 rgba(255, 255, 255, 0.45);
}
}
@keyframes float-slow {
0% { transform: translateY(0px) rotate(0deg) scale(1); }
50% { transform: translateY(-40px) rotate(180deg) scale(1.15); }
100% { transform: translateY(0px) rotate(360deg) scale(1); }
}
@keyframes float-reverse {
0% { transform: translateY(0px) rotate(360deg) scale(1.1); }
50% { transform: translateY(40px) rotate(180deg) scale(0.9); }
100% { transform: translateY(0px) rotate(0deg) scale(1.1); }
}
@keyframes pulse-glow {
0%, 100% { opacity: 0.35; transform: scale(1); }
50% { opacity: 0.65; transform: scale(1.1); }
}
.animate-float-1 {
animation: float-slow 22s infinite ease-in-out;
}
.animate-float-2 {
animation: float-reverse 26s infinite ease-in-out;
}
.animate-pulse-glow {
animation: pulse-glow 14s infinite ease-in-out;
}
/* Glass Refraction Background Elements */
.glow-spot-primary {
@apply absolute bg-gradient-to-tr from-primary/35 to-blue-300/35 rounded-full filter blur-[120px] mix-blend-multiply opacity-50;
}
.glow-spot-cyan {
@apply absolute bg-gradient-to-tr from-cyan-300/35 to-indigo-300/35 rounded-full filter blur-[120px] mix-blend-multiply opacity-55;
}
.glow-spot-magenta {
@apply absolute bg-gradient-to-tr from-pink-300/25 to-purple-400/25 rounded-full filter blur-[120px] mix-blend-multiply opacity-45;
}
|