|
|
@@ -1,4 +1,4 @@
|
|
|
-@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;600;700;800;900&family=Inter:wght@300;400;500;600;700&display=swap');
|
|
|
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Outfit:wght@400;500;600;700;800&display=swap');
|
|
|
|
|
|
@tailwind base;
|
|
|
@tailwind components;
|
|
|
@@ -6,62 +6,55 @@
|
|
|
|
|
|
@layer base {
|
|
|
:root {
|
|
|
- --background: 220 16% 8%;
|
|
|
- --foreground: 220 10% 90%;
|
|
|
+ --background: 0 0% 100%;
|
|
|
+ --foreground: 240 10% 4%;
|
|
|
|
|
|
- --card: 220 14% 12%;
|
|
|
- --card-foreground: 220 10% 90%;
|
|
|
+ --card: 0 0% 100%;
|
|
|
+ --card-foreground: 240 10% 4%;
|
|
|
|
|
|
- --popover: 220 14% 12%;
|
|
|
- --popover-foreground: 220 10% 90%;
|
|
|
+ --popover: 0 0% 100%;
|
|
|
+ --popover-foreground: 240 10% 4%;
|
|
|
|
|
|
- --primary: 210 50% 55%;
|
|
|
- --primary-foreground: 220 16% 8%;
|
|
|
+ /* Apple Blue Color */
|
|
|
+ --primary: 221.2 83.2% 53.3%;
|
|
|
+ --primary-foreground: 210 40% 98%;
|
|
|
|
|
|
- --secondary: 220 14% 16%;
|
|
|
- --secondary-foreground: 220 10% 90%;
|
|
|
+ --secondary: 240 4.8% 95.9%;
|
|
|
+ --secondary-foreground: 240 5.9% 10%;
|
|
|
|
|
|
- --muted: 220 12% 20%;
|
|
|
- --muted-foreground: 220 10% 50%;
|
|
|
+ --muted: 240 4.8% 95.9%;
|
|
|
+ --muted-foreground: 240 3.8% 46.1%;
|
|
|
|
|
|
- --accent: 210 40% 50%;
|
|
|
- --accent-foreground: 220 16% 8%;
|
|
|
+ --accent: 240 4.8% 95.9%;
|
|
|
+ --accent-foreground: 240 5.9% 10%;
|
|
|
|
|
|
- --destructive: 0 55% 55%;
|
|
|
- --destructive-foreground: 220 10% 90%;
|
|
|
+ --destructive: 0 84.2% 60.2%;
|
|
|
+ --destructive-foreground: 210 40% 98%;
|
|
|
|
|
|
- --border: 220 12% 20%;
|
|
|
- --input: 220 12% 20%;
|
|
|
- --ring: 210 50% 55%;
|
|
|
+ --border: 240 5.9% 90%;
|
|
|
+ --input: 240 5.9% 90%;
|
|
|
+ --ring: 240 10% 4%;
|
|
|
|
|
|
- --radius: 0.75rem;
|
|
|
+ --radius: 1rem;
|
|
|
|
|
|
- /* Custom design tokens */
|
|
|
- --gradient-primary: linear-gradient(135deg, hsl(210 50% 55%) 0%, hsl(220 45% 65%) 100%);
|
|
|
- --gradient-hero: linear-gradient(180deg, hsl(220 16% 8%) 0%, hsl(220 18% 13%) 50%, hsl(220 16% 8%) 100%);
|
|
|
- --gradient-card: linear-gradient(145deg, hsl(220 14% 14%) 0%, hsl(220 14% 10%) 100%);
|
|
|
- --gradient-glow: radial-gradient(ellipse at center, hsl(210 50% 55% / 0.1) 0%, transparent 70%);
|
|
|
+ /* Apple-style gradients and effects */
|
|
|
+ --gradient-primary: linear-gradient(135deg, hsl(221.2 83.2% 53.3%) 0%, hsl(210 100% 66%) 100%);
|
|
|
+ --gradient-hero: radial-gradient(circle at 50% 50%, hsl(210 40% 98%) 0%, hsl(0 0% 100%) 100%);
|
|
|
+ --gradient-card: linear-gradient(180deg, hsl(0 0% 100%) 0%, hsl(240 4.8% 98%) 100%);
|
|
|
+ --gradient-glow: radial-gradient(circle at center, hsla(221, 83%, 53%, 0.05) 0%, transparent 70%);
|
|
|
|
|
|
- --shadow-glow: 0 0 30px hsl(210 50% 55% / 0.15);
|
|
|
- --shadow-card: 0 8px 32px hsl(0 0% 0% / 0.4);
|
|
|
- --shadow-hover: 0 12px 48px hsl(210 50% 55% / 0.1);
|
|
|
+ --shadow-glow: 0 0 40px hsla(221, 83%, 53%, 0.08);
|
|
|
+ --shadow-card: 0 4px 20px rgba(0, 0, 0, 0.04);
|
|
|
+ --shadow-hover: 0 12px 40px rgba(0, 0, 0, 0.08);
|
|
|
|
|
|
- --font-display: 'Orbitron', sans-serif;
|
|
|
+ --font-display: 'Outfit', 'Inter', sans-serif;
|
|
|
--font-body: 'Inter', sans-serif;
|
|
|
-
|
|
|
- --sidebar-background: 220 14% 12%;
|
|
|
- --sidebar-foreground: 220 10% 90%;
|
|
|
- --sidebar-primary: 210 50% 55%;
|
|
|
- --sidebar-primary-foreground: 220 16% 8%;
|
|
|
- --sidebar-accent: 220 12% 20%;
|
|
|
- --sidebar-accent-foreground: 220 10% 90%;
|
|
|
- --sidebar-border: 220 12% 20%;
|
|
|
- --sidebar-ring: 210 50% 55%;
|
|
|
}
|
|
|
|
|
|
.dark {
|
|
|
- --background: 220 20% 6%;
|
|
|
- --foreground: 210 40% 98%;
|
|
|
+ --background: 240 10% 4%;
|
|
|
+ --foreground: 0 0% 98%;
|
|
|
+ /* Add dark mode overrides if needed, but the user asked for LIGHT/CLASSIC */
|
|
|
}
|
|
|
}
|
|
|
|
|
|
@@ -71,19 +64,20 @@
|
|
|
}
|
|
|
|
|
|
body {
|
|
|
- @apply bg-background text-foreground;
|
|
|
+ @apply bg-background text-foreground antialiased;
|
|
|
font-family: var(--font-body);
|
|
|
+ font-feature-settings: "cv02", "cv03", "cv04", "cv11";
|
|
|
}
|
|
|
|
|
|
h1, h2, h3, h4, h5, h6 {
|
|
|
font-family: var(--font-display);
|
|
|
+ @apply tracking-tight;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
@layer utilities {
|
|
|
.text-gradient {
|
|
|
- @apply bg-clip-text text-transparent;
|
|
|
- background-image: var(--gradient-primary);
|
|
|
+ @apply bg-clip-text text-transparent bg-gradient-to-r from-primary to-blue-400 font-bold;
|
|
|
}
|
|
|
|
|
|
.bg-gradient-hero {
|
|
|
@@ -98,77 +92,48 @@
|
|
|
background: var(--gradient-glow);
|
|
|
}
|
|
|
|
|
|
- .shadow-glow {
|
|
|
- box-shadow: var(--shadow-glow);
|
|
|
- }
|
|
|
-
|
|
|
- .shadow-card {
|
|
|
- box-shadow: var(--shadow-card);
|
|
|
+ .glass-effect {
|
|
|
+ @apply bg-white/70 backdrop-blur-md border border-white/20;
|
|
|
}
|
|
|
|
|
|
- .shadow-hover {
|
|
|
- box-shadow: var(--shadow-hover);
|
|
|
+ /* Compact spacing utility */
|
|
|
+ .section-padding {
|
|
|
+ @apply py-16 sm:py-20;
|
|
|
}
|
|
|
|
|
|
.animate-float {
|
|
|
animation: float 6s ease-in-out infinite;
|
|
|
}
|
|
|
|
|
|
- .animate-pulse-glow {
|
|
|
- animation: pulse-glow 2s ease-in-out infinite;
|
|
|
- }
|
|
|
-
|
|
|
.animate-slide-up {
|
|
|
- animation: slide-up 0.6s ease-out forwards;
|
|
|
+ animation: slide-up 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
|
|
|
}
|
|
|
|
|
|
.animate-fade-in {
|
|
|
animation: fade-in 0.8s ease-out forwards;
|
|
|
}
|
|
|
-}
|
|
|
|
|
|
-@keyframes float {
|
|
|
- 0%, 100% {
|
|
|
- transform: translateY(0px);
|
|
|
- }
|
|
|
- 50% {
|
|
|
- transform: translateY(-20px);
|
|
|
+ .card-apple {
|
|
|
+ @apply bg-white rounded-3xl border border-black/[0.03] shadow-[0_2px_10px_-3px_rgba(0,0,0,0.07),0_10px_15px_-3px_rgba(0,0,0,0.05)] hover:shadow-[0_20px_40px_-15px_rgba(0,0,0,0.1)] transition-all duration-500;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
-@keyframes pulse-glow {
|
|
|
- 0%, 100% {
|
|
|
- box-shadow: 0 0 15px hsl(210 50% 55% / 0.2);
|
|
|
- }
|
|
|
- 50% {
|
|
|
- box-shadow: 0 0 30px hsl(210 50% 55% / 0.3);
|
|
|
- }
|
|
|
+@keyframes float {
|
|
|
+ 0%, 100% { transform: translateY(0px) rotate(0deg); }
|
|
|
+ 50% { transform: translateY(-15px) rotate(1deg); }
|
|
|
}
|
|
|
|
|
|
@keyframes slide-up {
|
|
|
- from {
|
|
|
- opacity: 0;
|
|
|
- transform: translateY(30px);
|
|
|
- }
|
|
|
- to {
|
|
|
- opacity: 1;
|
|
|
- transform: translateY(0);
|
|
|
- }
|
|
|
+ from { opacity: 0; transform: translateY(20px); }
|
|
|
+ to { opacity: 1; transform: translateY(0); }
|
|
|
}
|
|
|
|
|
|
@keyframes fade-in {
|
|
|
- from {
|
|
|
- opacity: 0;
|
|
|
- }
|
|
|
- to {
|
|
|
- opacity: 1;
|
|
|
- }
|
|
|
+ from { opacity: 0; }
|
|
|
+ to { opacity: 1; }
|
|
|
}
|
|
|
|
|
|
-/* Grid pattern overlay */
|
|
|
.grid-pattern {
|
|
|
- background-image:
|
|
|
- linear-gradient(hsl(210 50% 55% / 0.03) 1px, transparent 1px),
|
|
|
- linear-gradient(90deg, hsl(210 50% 55% / 0.03) 1px, transparent 1px);
|
|
|
- background-size: 50px 50px;
|
|
|
+ background-image: radial-gradient(circle at 1px 1px, hsl(240 5.9% 90%) 1px, transparent 0);
|
|
|
+ background-size: 40px 40px;
|
|
|
}
|
unknown