Dark, mobile-first global styling

This tutorial adds a single global CSS file for a dark theme: CSS variables, sticky nav, hero section, responsive grid, cards, and footer. The layout is mobile-first (one column by default, then three columns on wider screens) for better performance and readability on small devices.

Why mobile-first and dark theme

Mobile-first CSS means base styles target small screens; you then use media queries to enhance for larger viewports. This keeps initial CSS smaller and improves perceived performance. A dark theme reduces eye strain and can match your brand (e.g. gaming or app-style sites).

1. Create src/app/globals.css

Import this file in layout.tsx with import "./globals.css". Start with CSS custom properties for colors and shadows so you can change the theme in one place:

:root {
  --bg: #05070b;
  --card: #0b1220;
  --text: #e7eefc;
  --muted: #9db0d0;
  --accent: #4f8cff;
  --accent2: #00e5a8;
  --border: rgba(255,255,255,0.08);
  --shadow: 0 14px 40px rgba(0,0,0,0.45);
}

2. Body and base styles

Set box-sizing, reset padding/margin on html/body, then style body with a system font stack, background (e.g. radial gradients using your accent colors), color, and line-height. Use max-width: 100% and height: auto on images.

3. Container and nav

A .container class with max-width: 1100px, padding: 0 16px, and margin: 0 auto centers content. The nav can be position: sticky; top: 0 with backdrop-filter: blur(12px) and a subtle border for a frosted effect.

4. Buttons and cards

Buttons use flexbox, padding, border-radius, and a hover state (e.g. slight translateY and background change). A primary variant can use--accent for border and gradient background. Cards use--card background, --border, and--shadow with rounded corners.

5. Grid — mobile-first

Default: grid-template-columns: 1fr so the layout is one column on small screens. Then use a media query (e.g. min-width: 820px) to switch to repeat(3, 1fr) for a three-column grid on larger viewports.

Next steps

After globals.css, build your homepage with semantic HTML (header, main, section, footer). For crawlers, add robots and sitemap. Back to all tutorials.