diff --git a/src/app/globals.css b/src/app/globals.css index f47d0d7..5b78112 100644 --- a/src/app/globals.css +++ b/src/app/globals.css @@ -1,23 +1,26 @@ -@import url("./styles/base.css"); -@import url("./styles/variables.css"); +@tailwind base; +@tailwind components; +@tailwind utilities; + +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +html { + scroll-behavior: smooth; +} + +body { + background-color: var(--background); + color: var(--foreground); + transition: background-color 0.3s ease, color 0.3s ease; +} @layer base { - * { - @apply m-0 p-0 box-border; - } - - html { - scroll-behavior: smooth; - } - body { - background-color: var(--background); - color: var(--foreground); - font-size: clamp(0.69rem, 0.92vw, 0.92rem); - line-height: 1.6; - font-weight: 400; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; + font-family: var(--font-inter), sans-serif; } h1, @@ -26,56 +29,6 @@ h4, h5, h6 { - line-height: 1.2; - font-weight: 400; - } - - button, - input, - textarea, - select { - font: inherit; - color: inherit; - } - - img, - picture, - video, - canvas, - svg { - @apply block max-w-full; - } -} - -@layer components { - .text-animation { - @apply overflow-hidden; - } - - .words-trigger { - @apply inline-block overflow-hidden; - } - - .word { - @apply inline-block; - } -} - -@keyframes aurora { - 0% { - background-position: 0% center; - } - 100% { - background-position: 200% center; - } -} - -@keyframes float { - 0%, - 100% { - transform: translateY(0px); - } - 50% { - transform: translateY(-20px); + font-family: var(--font-inter), sans-serif; } } diff --git a/src/app/layout.tsx b/src/app/layout.tsx index a13bbe0..5465452 100644 --- a/src/app/layout.tsx +++ b/src/app/layout.tsx @@ -1,12 +1,14 @@ import type { Metadata } from "next"; import { Inter } from "next/font/google"; +import "./styles/variables.css"; import "./globals.css"; -const inter = Inter({ subsets: ["latin"] }); +const inter = Inter({ + variable: "--font-inter", subsets: ["latin"], +}); export const metadata: Metadata = { - title: "مطعم النجمه والهلال", description: "أفضل تجربة إفطار مصري أصيل. مفتوح 24 ساعة" -}; + title: "مطعم النجمه والهلال", description: "أفضل تجربة إفطار مصري أصيل. مفتوح 24 ساعة"}; export default function RootLayout({ children, @@ -15,7 +17,7 @@ export default function RootLayout({ }) { return ( - {children} + {children}