Sterling & Partners — Premier Law Firm Website

May 31, 2026

Concept snapshot

Record date: May 31, 2026. Technology and screenshots describe the prototype as documented on this date. Any performance observations belong to the same point-in-time record. No current client deployment is implied.

Overview

Sterling & Partners is a portfolio-grade law firm website that channels the gravitas and refinement of a top-tier legal practice. The design system anchors on dark navy and champagne gold, a palette that communicates authority without coldness and luxury without excess. Every section, from the hero with its floating stats counter to the practice area cards with image reveals, builds on a consistent visual language of serif headlines, warm gold accents, and restrained motion. Built entirely in vanilla HTML, CSS, and JavaScript with no build step, the site proves that a polished, Awwwards-caliber experience does not require a framework. Intersection Observer handles scroll-triggered reveals, GSAP powers hero and stat animations, and the mobile experience includes a native-app-style bottom navigation bar with haptic feedback on supported devices. Live Demo: https://sterlingandpartner.apalaugonzalez.com/

Key Features

Hero with Animated Stats

Full-viewport hero with responsive image serving (mobile crop via <picture>)
Floating stat counters (35+ years, 5,000+ cases, 98% satisfaction) that count up on scroll with customizable duration and easing
Scroll indicator with animated line that pulses to invite exploration
Dark overlay gradient for text legibility over photography

Practice Areas with Image Reveals

Six practice area cards (Corporate, Family, Real Estate, IP, Criminal Defense, Immigration) with hover-triggered image reveals
Each card features a representative image that clips in from the side on hover, providing visual context without cluttering the layout
Clean card layout with gold accent borders, icon headers, and "Learn More" links with animated arrows

Attorney Profiles

Attorney section with four detailed profile cards
Each card includes portrait, name, title, specialties, and a brief bio
Hover state reveals a gold accent line and subtle elevation
Responsive grid that adapts from 4 columns on desktop to stacked on mobile

Testimonials with Auto-Advancing Carousel

Auto-advancing testimonial slider with 5-second intervals
Each slide includes a gold quote icon, testimonial text, client name, and case type
Smooth cross-fade transitions between slides
Manual navigation via dot indicators, swipe on mobile

Contact & Consultation Form

Multi-field contact form with dropdown topic selector (General Inquiry, Consultation, Billing, Careers)
Practice area, name, email, phone, and message fields with real-time validation
Form submission feedback with loading state and success confirmation
Contact sidebar with phone, email, office hours, and address
Mobile-optimized layout: form stacks vertically, contact info moves above form

Full-screen overlay menu with staggered link animations
Hamburger-to-X toggle with CSS transition
Persistent bottom navigation bar on mobile with key sections (Home, Practice, Attorneys, Contact)
Bottom sheet modal for contact options (call, email, directions)
Haptic feedback on navigation interactions via navigator.vibrate()

Design System

Typography

Cormorant Garamond (500, 600, 700, italic variants) for all display headlines, section titles, and block quotes
System sans-serif stack for body copy, navigation, buttons, and labels
Deliberate size hierarchy: hero title at 72px, section titles at 48px, body at 16px

Color Palette

Dark Navy: #0A1628 (primary backgrounds, hero overlay, section alternation)
Navy Light: #111D30 (card surfaces, hover states)
Champagne Gold: #C9A96E (accent borders, labels, links, stat numbers, hover highlights)
Gold Light: #E8D5B5 (secondary gold for subtle accents)
White: #FFFFFF (body text on dark, card text)
Muted: #8899AA (secondary text, labels)

Component Tokens

Gold left-border accent on practice cards and feature items
Rounded image containers with subtle shadow elevation
Primary button: gold fill with dark text, hover brightens gold
Secondary button: gold outline with gold text, hover fills gold
Section label: uppercase, tracked, gold, before each section title

Technology Stack

Core

Vanilla HTML5 with semantic elements (<header>, <main>, <section>, <article>, <footer>) and ARIA labels
Vanilla CSS3 with custom properties for the design token system, CSS Grid and Flexbox layouts, and @keyframes for micro-animations
Vanilla JavaScript (ES modules) with Intersection Observer for scroll reveals and feature detection

Animation & Interaction

GSAP + ScrollTrigger for hero entry sequence, stat counter animations, and staggered card reveals
Intersection Observer API for scroll-triggered section animations (fade-in, slide-up, image-clip reveals)
Lenis for smooth momentum-based scrolling
CSS transitions and keyframes for hover states, button interactions, and the mobile menu overlay

Responsive Design

Mobile-first CSS with breakpoints at 768px (tablet) and 1024px (desktop)
Safe-area-aware layout using env(safe-area-inset-*) for notched devices
prefers-reduced-motion media query disables GSAP animations, Lenis smooth scroll, and CSS animations for users who prefer reduced motion
-webkit-overflow-scrolling: touch on scrollable containers for native-feeling momentum on iOS

Project Structure

sterling-partner/
├── index.html              # Single-page entry point with all sections
├── css/
│   ├── main.css            # Design tokens, layout, components, sections
│   ├── animations.css     # @keyframes, scroll reveal classes, transition utilities
│   └── responsive.css     # Mobile-first breakpoints and safe-area adjustments
├── js/
│   ├── main.js             # Navigation, scroll effects, mobile menu, tab bar, form handling, haptics
│   └── animations.js       # Intersection Observer scroll reveals and animation orchestration
└── assets/
    └── images/             # WebP images for hero, practice areas, attorneys, office, testimonials

Accessibility

Semantic HTML throughout: <header>, <nav>, <main>, <section>, <article>, <footer>
ARIA labels on navigation, mobile menu toggle, and interactive regions
Skip-to-content link as the first focusable element
Keyboard navigation for the mobile menu (Escape to close), testimonial carousel (arrow keys), and contact form
Focus indicators with consistent gold outline styling
alt text on all content images; decorative SVG icons marked aria-hidden="true"
Reduced motion support via prefers-reduced-motion media query

Performance

All images delivered in WebP format with loading="lazy" and decoding="async"
Hero image uses loading="eager" and fetchpriority="high" with <picture> for mobile crop
No build step and no framework runtime overhead
CSS custom properties for theming eliminate redundant style declarations
Intersection Observer replaces scroll event listeners for reveal animations

Challenges and Solutions

Challenge: Legal Authority Without Stiffness

Solution: Paired the gravitas of dark navy and Cormorant Garamond serif type with warm champagne gold accents and generous whitespace. The result feels authoritative and approachable simultaneously. Headline copy like "Justice, Integrity, Results" is direct without being cold, and section labels in uppercase tracked gold maintain formality without rigidity.

Challenge: Multi-Section Single Page with Distinct Identities

Solution: Alternated dark navy sections (section-dark) with white/cream sections to create visual rhythm and prevent monotony. Each section maintains the same design tokens but shifts background and border emphasis, creating a natural reading flow without jarring transitions.

Challenge: Native-App Mobile Experience Without a Framework

Solution: Built a persistent bottom navigation bar with four key sections, a bottom sheet modal for contact options that slides up with CSS transitions, and haptic feedback via navigator.vibrate() on supported devices. The mobile menu overlay uses staggered reveal animations for each link, creating a polished feel that mirrors native app behavior.

Challenge: Practice Area Cards with Visual Richness

Solution: Developed a hover-triggered image reveal system where each practice card has a hidden image that clips in from the side on desktop hover, providing visual context without making the default card layout heavy. On mobile, images display above the card content by default since hover is not available.

Live Demo

Experience the full law firm website with animated hero, practice area reveals, attorney profiles, testimonial carousel, and native-app mobile navigation: View Live Project

Make it yours