# Styling Guide _Global fonts and responsive breakpoint system. For CMS/dashboard design tokens (colors, spacing, components), see [CMS_DESIGN_SYSTEM.md](./CMS_DESIGN_SYSTEM.md)._ This document outlines the global styling system for the AMSOIL Dealer Lead Pages application. ## Font Family System ### Inter Font (Global Default) The application uses **Inter** as the primary font family, loaded via `next/font/google` for optimal performance. #### Configuration **Location:** `app/layout.tsx` ```typescript import { Inter } from 'next/font/google'; const inter = Inter({ subsets: ['latin'], display: 'swap', variable: '--font-inter', }); ``` #### Application The font is applied globally via: 1. **CSS Variable:** `--font-inter` (available throughout the app) 2. **Body Class:** Applied to `` 3. **HTML Variable:** Applied to `` #### Usage All text elements inherit Inter by default. No additional configuration is needed. ```tsx // Inter is automatically applied

This text uses Inter font

// Or explicitly use the CSS variable
Custom styled text
``` --- ## Responsive Breakpoints System ### Tailwind CSS Breakpoints The application uses Tailwind CSS's standard breakpoint system for responsive design. #### Standard Breakpoints | Breakpoint | Min Width | Device Target | Tailwind Prefix | | ---------------- | --------- | -------------------------------- | --------------- | | Mobile (default) | 0px | Mobile portrait | _(no prefix)_ | | `sm` | 640px | Mobile landscape | `sm:` | | `md` | 768px | Tablet portrait | `md:` | | `lg` | 1024px | Tablet landscape / Small desktop | `lg:` | | `xl` | 1280px | Desktop | `xl:` | | `2xl` | 1536px | Large desktop | `2xl:` | #### Configuration **Location:** `tailwind.config.ts` ```typescript theme: { extend: { screens: { // Standard Tailwind breakpoints (default) // 'sm': '640px', // 'md': '768px', // 'lg': '1024px', // 'xl': '1280px', // '2xl': '1536px', }, }, } ``` #### Usage Examples ##### Mobile-First Approach (Recommended) Tailwind uses a mobile-first approach. Styles apply to mobile by default, then override for larger screens. ```tsx // Base styles apply to mobile, then override for larger screens
Responsive text size
// Grid layout: 1 column on mobile, 2 on tablet, 4 on desktop
Card 1
Card 2
Card 3
Card 4
// Hidden on mobile, visible on tablet and up
Desktop navigation
// Padding: small on mobile, medium on tablet, large on desktop
Content
``` ##### Flex Direction ```tsx // Stack vertically on mobile, horizontal on desktop
Sidebar
Main content
``` ##### Container Widths ```tsx // Full width on mobile, constrained on larger screens
Responsive container
``` --- ## CSS Architecture ### File Structure - **`app/globals.css`** - Global styles, Tailwind directives, CSS variables - **`app/styles/registration-theme.css`** - Registration-specific theme styles - **`app/layout.tsx`** - Font configuration and global layout ### Tailwind Configuration Files - **`tailwind.config.ts`** - Tailwind configuration (theme, plugins, content paths) - **`postcss.config.mjs`** - PostCSS configuration for Tailwind processing --- ## Custom CSS vs Tailwind ### When to Use Tailwind Use Tailwind classes for: - Layout (flex, grid, spacing) - Responsive design (breakpoint prefixes) - Common utilities (colors, typography, shadows) - Rapid prototyping ```tsx ``` ### When to Use Custom CSS Use custom CSS for: - Complex animations - Gradient backgrounds with specific designs - Component-specific styles that don't map to Tailwind utilities - Existing styled components (landing page, registration flow) ```css .hero-content { background: rgba(15, 23, 42, 0.45); border: 1px solid rgba(148, 163, 184, 0.25); border-radius: 32px; backdrop-filter: blur(12px); } ``` --- ## Best Practices ### 1. Prefer Tailwind for New Components For new components, use Tailwind classes where possible for consistency and maintainability. ```tsx // Good

Title

Description

// Avoid (unless complex styling needed)

Title

Description

``` ### 2. Mobile-First Responsive Design Always design for mobile first, then add breakpoints for larger screens. ```tsx // Good - Mobile first
Content
// Avoid - Desktop first (requires more overrides)
Content
``` ### 3. Use Semantic Breakpoints Choose breakpoints based on content needs, not specific devices. ```tsx // Good - Based on layout needs
// Avoid - Device-specific thinking
``` ### 4. Consistent Spacing Use Tailwind's spacing scale for consistency. ```tsx // Good - Consistent spacing scale
// Avoid - Arbitrary values (unless necessary)
``` --- ## Migration Notes ### Existing Styles The landing page (`index.html`) and registration pages use custom CSS. These can remain as-is or be gradually migrated to Tailwind as needed. ### Font Migration The font system now uses: - **`next/font/google`** for optimized font loading - **CSS variable** `--font-inter` for flexible usage - **Global application** via layout.tsx Old references to `font-family: 'Inter'` in CSS will still work but now fallback to the optimized next/font version. --- ## Quick Reference ### Common Responsive Patterns ```tsx // Responsive grid
// Responsive text

// Responsive spacing
// Responsive flex direction
// Hide/show at breakpoints
Mobile only
Desktop only
// Responsive container
``` ### Font Usage ```tsx // Default (automatic)

Uses Inter font automatically

// Explicit CSS variable Inter font // Tailwind class

Uses Inter via Tailwind

``` --- ## Troubleshooting ### Font Not Loading 1. Verify `app/layout.tsx` imports and applies Inter correctly 2. Check that `--font-inter` CSS variable is present in browser DevTools 3. Ensure `globals.css` is imported in `layout.tsx` ### Tailwind Classes Not Working 1. Verify `tailwind.config.ts` includes correct content paths 2. Check that `@tailwind` directives are in `globals.css` 3. Restart the dev server after config changes 4. Clear `.next` cache: `rm -rf .next` ### Breakpoints Not Triggering 1. Ensure mobile-first approach (base styles, then larger breakpoints) 2. Check browser width in DevTools 3. Verify Tailwind config has correct breakpoint values 4. Use browser DevTools to inspect computed styles --- ## Resources - [Tailwind CSS Documentation](https://tailwindcss.com/docs) - [Next.js Font Optimization](https://nextjs.org/docs/pages/building-your-application/optimizing/fonts) - [Responsive Design Best Practices](https://tailwindcss.com/docs/responsive-design)