diff --git a/src/app/globals.css b/src/app/globals.css index b096574..abe4a86 100644 --- a/src/app/globals.css +++ b/src/app/globals.css @@ -8,19 +8,19 @@ --background: #050B14; --foreground: #E2E8F0; - --zsl-bg: #050B14; + --zsl-bg: #0A192F; --zsl-text: #E2E8F0; --zsl-primary: #00D4FF; --zsl-accent: #FFAA00; - --zsl-card: #0F172A; - --zsl-muted: #94A3B8; + --zsl-card: #112240; + --zsl-muted: #8892b0; } @theme inline { --color-background: var(--background); --color-foreground: var(--foreground); - --font-sans: var(--font-geist-sans); - --font-mono: var(--font-geist-mono); + --font-sans: var(--font-inter); + --font-mono: var(--font-rajdhani); --color-zsl-bg: var(--zsl-bg); --color-zsl-text: var(--zsl-text); @@ -29,9 +29,11 @@ --color-zsl-card: var(--zsl-card); --color-zsl-muted: var(--zsl-muted); - --animate-scroll: scroll 40s linear infinite; + --animate-scroll: scroll 60s linear infinite; --animate-pulse-slow: pulse 4s cubic-bezier(0.4, 0, 0.6, 1) infinite; --animate-grid-move: grid-move 20s linear infinite; + --animate-glow: glow 2s ease-in-out infinite alternate; + --animate-float: float 6s ease-in-out infinite; @keyframes scroll { 0% { transform: translateX(0); } @@ -40,7 +42,17 @@ @keyframes grid-move { 0% { background-position: 0 0; } - 100% { background-position: 50px 50px; } + 100% { background-position: 40px 40px; } + } + + @keyframes glow { + 0% { box-shadow: 0 0 5px #00D4FF; } + 100% { box-shadow: 0 0 20px #00D4FF, 0 0 10px #00D4FF; } + } + + @keyframes float { + 0%, 100% { transform: translateY(0); } + 50% { transform: translateY(-20px); } } } @@ -53,7 +65,7 @@ body { ) rgb(var(--background-start-rgb)); overflow-x: hidden; - font-family: Arial, Helvetica, sans-serif; + font-family: var(--font-sans); } /* Custom Scrollbar */ diff --git a/src/app/layout.tsx b/src/app/layout.tsx index ca5cb56..e3efc82 100644 --- a/src/app/layout.tsx +++ b/src/app/layout.tsx @@ -1,12 +1,12 @@ import type { Metadata, Viewport } from "next"; -import { Inter, Orbitron } from "next/font/google"; +import { Inter, Rajdhani } from "next/font/google"; import { Analytics } from '@vercel/analytics/next'; import { LocaleProvider } from '@/context/LocaleContext'; import React from 'react'; import "./globals.css"; -const inter = Inter({ subsets: ["latin"], variable: "--font-inter" }); -const orbitron = Orbitron({ subsets: ["latin"], variable: "--font-orbitron" }); +const inter = Inter({ subsets: ["latin", "latin-ext"], variable: "--font-inter" }); +const rajdhani = Rajdhani({ subsets: ["latin", "latin-ext"], variable: "--font-rajdhani", weight: ["300", "400", "500", "600", "700"] }); export const viewport: Viewport = { width: 'device-width', @@ -92,7 +92,7 @@ export default function RootLayout({ -
+