Customizing Styles & Theme
Relevant source files
The following files were used as context for generating this wiki page:
The AVP Supercars project utilizes a modern styling stack centered around Tailwind CSS v4 and Framer Motion. The theme is designed with a "luxury-first" aesthetic, characterized by a dark color palette, high-contrast typography, and cinematic motion effects. Styling is globally managed through CSS variables and utility classes, ensuring a consistent premium look across all pages.
Sources: app/globals.css:1-24, package.json:17-25, app/layout.tsx:1-12
Core Architecture & Configuration
The project's styling architecture relies on Tailwind CSS's latest features for theme definition and utility-first styling. The configuration is primarily split between global CSS variable definitions and inline theme extensions.
Global CSS Variables
The system defines base colors using CSS variables within the :root pseudo-class. These variables are reactive to system color schemes using media queries.
| Variable | Default Value | Dark Mode Value | Description |
|---|---|---|---|
--background | #ffffff | #0a0a0a | Primary background color |
--foreground | #171717 | #ededed | Primary text/foreground color |
--font-sans | var(--font-geist-sans) | N/A | Primary sans-serif font family |
--font-mono | var(--font-geist-mono) | N/A | Monospaced font family |
Sources: app/globals.css:3-20
Theme Integration
Tailwind CSS v4 is configured to use these variables directly within the @theme directive, mapping them to Tailwind's utility names like bg-background and text-foreground.
Sources: app/globals.css:8-13
Layout & Global Styles
The RootLayout component establishes the baseline for the application's appearance by applying global classes to the body element.
The application enforces a consistent dark theme by hardcoding bg-black and text-white on the body tag in the layout, overriding the potential white default from :root variables.
Sources: app/layout.tsx:11-13, app/globals.css:22-26
UI Component Styling Patterns
The project follows specific recurring patterns for "Luxury" UI elements, such as glassmorphism and cinematic overlays.
Glassmorphism & Overlays
Components like Navbar, FleetFilters, and various cards use backdrop blurs and semi-transparent borders to create a premium depth effect.
- Glass Containers: Often use
bg-black/70,backdrop-blur-xl, andborder-white/10. - Cinematic Overlays: Sections utilize absolute-positioned divs with
bg-gradient-to-bandradial-gradientto create focus and improve text readability over background images.
Sources: components/Navbar.tsx:43-48, components/FleetFilters.tsx:43-43, app/page.tsx:32-34
Animation & Motion
Motion is a core part of the theme's identity, handled via Framer Motion.
The system implements parallax backgrounds and entrance animations to enhance the "luxury" feel. For example, the bgY and contentY transforms create vertical movement relative to scroll position.
Sources: app/page.tsx:21-25, app/locations/page.tsx:21-25
Navigation Styling
The Navbar component demonstrates dynamic styling based on scroll state and active routes.
- Scroll-driven Styles: When
scrolledis true (scrollY > 12), the navbar adds a border and backdrop blur. - Active Link Indicators: Active routes are highlighted with a white scale-x animation on a bottom border.
// Example of conditional styling in Navbar.tsx
const isActive = pathname?.startsWith(item.href);
// ...
className={`absolute -bottom-2 left-0 h-[2px] w-full transition-transform duration-300 ${
isActive ? "bg-white scale-x-100" : "bg-white/40 scale-x-0"
}`}
Sources: components/Navbar.tsx:26-30, components/Navbar.tsx:75-84
Summary of Typography
Typography is optimized using Next.js font optimization, specifically the Geist font family. The global body tag defaults to standard sans-serif stacks, while the Tailwind theme maps font-sans to the optimized Geist font.
Sources: README.md:21-21, app/globals.css:24-25