diff --git a/app/globals.css b/app/globals.css index c3ed392..7c03cb6 100644 --- a/app/globals.css +++ b/app/globals.css @@ -3,14 +3,22 @@ body { font-family: - SF Pro Display, - Geist; + var(--font-geist-sans), + "SF Pro Display", + "Segoe UI", + sans-serif; + position: relative; + min-height: 100%; + background-attachment: fixed; + text-rendering: optimizeLegibility; } .font-super-mono { font-family: - SF Mono, - Geist Mono; + var(--font-geist-mono), + "SF Mono", + "Segoe UI Mono", + monospace; } @layer base { @@ -59,6 +67,11 @@ body { --sidebar-accent-foreground: 240 5.9% 10%; --sidebar-border: 220 13% 91%; --sidebar-ring: 217.2 91.2% 59.8%; + + --glow-1: 217 91.86992049217224% 75.88235139846802%; + --glow-2: 170 57.35294222831726% 73.33333492279053%; + --glow-3: 343 81.25% 74.90196228027344%; + --grain-opacity: 0.08; } .dark { --sidebar-background: 240 5.9% 10%; @@ -116,6 +129,30 @@ body { } body { @apply bg-background text-foreground; + isolation: isolate; + } + h1, + h2, + h3 { + font-family: var(--font-space-grotesk), var(--font-geist-sans), sans-serif; + letter-spacing: -0.02em; + } + a { + text-decoration: underline; + text-decoration-color: hsl(var(--primary) / 0.35); + text-underline-offset: 0.18em; + transition: color 150ms ease, text-decoration-color 150ms ease; + } + a:hover { + text-decoration-color: hsl(var(--primary) / 0.85); + } + :focus-visible { + outline: 2px solid hsl(var(--ring) / 0.6); + outline-offset: 2px; + } + ::selection { + background: hsl(var(--primary) / 0.25); + color: hsl(var(--foreground)); } } @@ -128,7 +165,46 @@ body { -ms-overflow-style: none; scrollbar-width: 0; } + .ambient-backdrop { + position: fixed; + inset: 0; + z-index: 0; + pointer-events: none; + background-image: + radial-gradient( + 1200px 700px at 10% -10%, + hsl(var(--glow-2) / 0.2), + transparent 55% + ), + radial-gradient( + 900px 600px at 95% 0%, + hsl(var(--glow-1) / 0.22), + transparent 60% + ), + radial-gradient( + 800px 500px at 50% 100%, + hsl(var(--glow-3) / 0.18), + transparent 55% + ), + linear-gradient( + 180deg, + hsl(var(--background)) 0%, + hsl(var(--background)) 45%, + hsl(var(--muted)) 100% + ); + } } @utility border-border { border-color: hsl(var(--border)); } + +body::before { + content: ""; + position: fixed; + inset: 0; + z-index: 1; + pointer-events: none; + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='0.6'/%3E%3C/svg%3E"); + opacity: var(--grain-opacity); + mix-blend-mode: soft-light; +} diff --git a/app/layout.tsx b/app/layout.tsx index e7c3129..7504471 100644 --- a/app/layout.tsx +++ b/app/layout.tsx @@ -1,5 +1,5 @@ import type { Metadata } from "next"; -import { Geist, Geist_Mono } from "next/font/google"; +import { Geist, Geist_Mono, Space_Grotesk } from "next/font/google"; import "./globals.css"; import { TooltipProvider } from "@/components/ui/tooltip"; import { Toaster } from "@/components/ui/toaster"; @@ -20,6 +20,11 @@ const geistMono = Geist_Mono({ subsets: ["latin"] }); +const spaceGrotesk = Space_Grotesk({ + variable: "--font-space-grotesk", + subsets: ["latin"] +}); + export const metadata: Metadata = { title: "Home | Roblox", description: @@ -44,12 +49,13 @@ export default function RootLayout({ return ( -
+
+