Overdrive Motor Condos: a premium digital experience for luxury automotive storage

Client Profile

Overdrive Motor Condos is a luxury automotive storage facility offering private suites with 18.5-foot sidewalls, optional mezzanine levels, and a full amenity suite for automotive enthusiasts. Located on Highway 41 between Green Bay and Appleton, Wisconsin, the facility offers six tiers of private suites ranging from 960 to 2,560 square feet. The brief was direct: build a website that sells the vision before buyers ever set foot on site.

The Challenge

Motor condos occupy a growing but unfamiliar niche at the intersection of luxury real estate and automotive culture. Most buyers have never purchased a motor condo before. They do not know what 18.5-foot sidewalls mean for a vehicle lift. They cannot visualize the difference between a 960 sq ft Aficionado suite and a 2,560 sq ft Legacy suite. And they are not making a $150,000 to $400,000 purchase decision based on a generic WordPress template with stock photography.

The Overdrive project required more than a property website. It needed an immersive digital experience with four distinct goals:

• Educate prospective buyers on what motor condos are, why they command premium prices, and how Overdrive's construction quality justifies the investment.
• Let buyers self-explore the facility visually and find their suite tier without requiring a sales call as the first step.
• Communicate the community dimension - motor condos are not just storage, they are a lifestyle. The website needed to sell belonging alongside square footage.
• Feel as premium as the product. A dark, cinematic aesthetic evoking an exclusive showroom after hours - not a real estate listing, not a commercial storage site.

The Design System: Building an Exclusive Showroom After Hours

Every luxury project begins with a design system, not a template. For Overdrive, we built a complete visual language from scratch - one that could not be mistaken for any other property website.

Color palette

The palette was built around four anchor values that evoke the physical materials of the suites themselves. Carbon (#171718) as the primary background - richer and warmer than pure black, suggesting a well-lit showroom in low light. Dust (#dbd6cd) for body text - off-white with warmth, never clinical. Pumpkin (#E77728) as the signature accent - an automotive orange with enough saturation to read as premium without veering into sports brand territory. Iron (#444546), Burgundy (#8c1f2e), and Cedar Bronze (#c4956a) rounded out the system for secondary surfaces, borders, and decorative accents.

Typography

Three typefaces, each assigned a distinct role. DM Sans as the primary workhorse - modern, clean, and confident for headings and UI elements. Montserrat for accent usage where geometric precision matters - section labels, tier names, and eyebrow text. Source Sans Pro as the utility face for body copy, captions, and data-dense contexts where readability under long-form reading is critical. All three are self-hosted as WOFF2 with font-display: swap, eliminating render-blocking requests entirely.

Button components

Two button variants, each with a name: The Gilt and The Whisper. The Gilt is the primary CTA - a luminous border with a light-pass animation that sweeps across the button face on hover, suggesting something expensive catching the light. The Whisper is the secondary action - minimal, underline-only, for contexts where you want the option without competing with the primary call. All class names were scoped to the lmc- namespace to prevent collisions with Bricks Builder's own component library.

The Interactive SVG Site Map: the Technical Centerpiece

The site map is the most technically ambitious feature on the site and the one that transforms passive browsers into engaged prospects. Here is how it works and why the implementation decisions matter.

Architecture

An SVG layer is positioned absolutely over a 1176x1036 WebP site plan image. The SVG uses viewBox="0 0 100 88.1" with percentage-based coordinates for all polygon hotspots. This is the key architectural choice: by working in a normalized coordinate space rather than pixel coordinates, the entire map scales perfectly across any screen size from a 4K monitor to a 375px mobile viewport. No JavaScript needed for responsive scaling - SVG handles it natively.

Each of the 22 suite hotspots carries four data attributes on the polygon element: suite number, suite name, tier, dimensions, and square footage. JavaScript reads these on hover and click rather than embedding the data elsewhere - keeping the SVG itself as the single source of truth for suite positions.

Tooltips and modals

Hovering a hotspot triggers a tooltip positioned dynamically based on the suite's Y-coordinate in the SVG. Suites in the upper half of the plan show tooltips below; suites in the lower half show tooltips above. This prevents any tooltip from clipping outside the map container, regardless of where the user hovers. The tooltip shows suite number, tier name, and square footage - enough to orient the buyer without overwhelming them.

Clicking a hotspot opens a full-detail modal with suite name, tier, dimensions, square footage, and a direct link to the suite's dedicated page. The modal approach keeps the map interface clean while providing a clear path to deeper content.

The Safari touch fix

Safari on iOS presented a specific problem: tapping a hotspot would open the modal, but the tap-end event would immediately propagate and close it. The behavior was invisible in desktop browser simulators and only manifested on actual iOS hardware during real-device testing.

The fix required a modalJustOpened flag with a 300ms cooldown window, combined with preventDefault() and stopPropagation() on the touch event. The 300ms threshold covers Safari's tap recognition timing without creating noticeable lag for the user. This is the category of bug that ships to production if you test only in Chrome DevTools.

Additional map features

• Filter buttons to show only suites of a specific tier - useful when a buyer already knows their budget range and wants to see only the relevant options
• Amenity hotspots for the clubhouse, wash bay, and grilling area - communicating the community dimension of the facility without a paragraph of copy
• A "Coming Soon" overlay for Phase 2 suites - setting expectations without hiding the future expansion from buyers considering long-term value

Fullscreen Video Hero: Cinematic on Every Device

The hero section uses a fullscreen background video. The implementation challenge is always the same: how do you make a video hero legible for text overlay while preserving the visual impact of the footage?

We solved it with a dual-layer CSS overlay approach. The base layer applies a 45% opacity dark fill over the entire video - enough to ensure text contrast without killing the footage. The gradient layer operates at 105-degree angle, concentrating opacity on the left side of the frame where the heading and CTA sit. The right side of the video stays considerably lighter, letting the footage breathe.

On mobile, the 105-degree diagonal gradient becomes a 180-degree vertical gradient. This is a responsive design detail that most developers skip: a diagonal overlay that works on a 1440px widescreen layout creates awkward light pockets on a 390px phone screen. The vertical rotation ensures the heading area at the top of mobile receives full darkening while the lower video area remains visible.

Result: the hero reads as cinematic on a large monitor, clean on a tablet, and legible everywhere - without a single line of JavaScript.

Scroll-Driven Animations: Five Types, Zero JavaScript Libraries

All animations on the site use vanilla JavaScript with the IntersectionObserver API - no GSAP, no ScrollTrigger, no dependencies. For a project of this scope, a lightweight custom implementation outperforms a full animation library on both initial load and runtime performance.

The system supports five animation types, each applied via data attribute:

1. Fade-up (default)

The baseline animation. Elements enter from 20px below their final position while fading from 0 to 1 opacity. Applied to paragraphs, headings, and any element that does not have a more specific animation context. Threshold is configurable per element - suite cards trigger at 15% in-viewport while hero elements trigger at 5%.

2. Staggered cards

Card grids use cascading index-based delays. Each card in a row receives an additional 80ms delay per index position. The result is a wave effect as cards enter from left to right - drawing the eye across the content rather than slamming the full grid in at once.

3. Directional slide-ins

Two-column layouts slide the left column in from the left and the right column in from the right. The direction is determined by column position in the grid, not hardcoded per element. This keeps the markup clean and allows the same layout component to be reused without customizing animation direction each time.

4. Scale reveals

Images scale from 95% to 100% as they enter the viewport. The subtle scale-up frames the image reveal as something being uncovered rather than simply appearing - a small detail that contributes to the premium feel without being flashy.

5. Eyebrow fade

Section eyebrows (small uppercase labels above headings) use a simple fade without the Y-translation. This prevents a visual conflict with the eyebrow's CSS pseudo-element underline animation, which runs on a separate transition. Running both the Y-translate and the pseudo-element simultaneously caused a perceived jitter on the underline - the eyebrow fade isolation eliminates it.

All five types respect prefers-reduced-motion. If the user has requested reduced motion, the IntersectionObserver still fires - elements become visible immediately rather than staying hidden, ensuring content is never inaccessible.

Build Inspiration Gallery: 67 Images, Instant Filtering

The gallery showcases the physical quality of the suites through 67 WebP images organized into four categories: Interiors, Flooring, Lifts and Equipment, and Lighting and Display. The category structure emerged from reviewing the actual image library - an early draft included a "Full Builds" category that overlapped too heavily with Interiors, so those images were merged in.

The filtering system is entirely JavaScript-driven with no page reloads. Clicking a category filter instantly hides all non-matching images with a staggered fade-out, then reveals the matching images with a staggered entrance. The stagger on filter switch gives the transition a polished, intentional feel rather than a binary snap.

Images use IntersectionObserver-based lazy loading - the src attribute is only populated when the image enters the viewport. For a 67-image gallery, this reduces initial page load significantly. All images use relative /wp-content/uploads/ paths rather than absolute URLs, which keeps the gallery functional across staging and production environments without any configuration changes.

The lightbox supports keyboard navigation - left/right arrows to move between images, Escape to close. For a product that buyers need to examine carefully before making a six-figure decision, the ability to move through the gallery without reaching for a mouse matters.

Suite Architecture: Six Tiers, One ACF Template

The six suite tiers - The Aficionado, The Enthusiast, The Reserve, The Founder, The Signature, and The Legacy - each have a dedicated page at /suite/the-[tier-name]/. All six pages share a single ACF-powered template. The content is driven by custom fields; the layout is shared.

This architecture decision has downstream benefits: updating the layout or adding a new content section requires editing one template, not six. Adding a seventh suite tier requires creating an ACF entry and a new WordPress page, not a new template file. The client can manage suite details - dimensions, features, pricing status - without touching code.

One measurement rule required enforcement throughout the project: first-floor square footage is always the primary number displayed. Mezzanine footage is listed separately as an add-on. Early drafts combined the figures into a single total, which inflated the apparent size of lower-tier suites and confused buyers comparing against market norms where square footage typically means ground-floor usable space.

Suite assignments across the 22 units: Suite 01 maps to the Enthusiast tier, Suites 02-04 to Reserve, Suites 05-15 to Founder, and Suites 16-22 to Legacy. The interactive site map reflects these assignments in its filter system - selecting a tier highlights only the relevant polygon hotspots.

Technology Stack

Performance and Accessibility: Non-Negotiables for a Premium Brand

A luxury website that loads slowly is not a luxury website. And a website that fails accessibility standards is not ready for production, regardless of how good it looks. Both constraints shaped implementation decisions throughout the project.

Font self-hosting eliminates a common performance bottleneck. Google Fonts serves fast from CDN, but it requires a DNS lookup, a TCP connection, and a font download from an external domain - all before your first character renders. Three self-hosted WOFF2 files served from the same origin as the HTML load in a single connection without any external round-trips. Combined with font-display: swap, text is visible immediately using the system fallback while web fonts load in the background.

Zero JavaScript dependencies means no npm, no bundler, no version conflicts, and no library overhead. The entire interactive feature set - SVG map, gallery filtering, lightbox, scroll animations, video hero - runs on approximately 400 lines of vanilla JavaScript. For a corporate website that does not need a SPA framework, this is the correct architectural choice.

Real-device testing caught the Safari modal bug described above. It would also catch touch target sizing issues, viewport unit behavior on iOS (where 100vh includes the browser chrome), and font rendering differences between Android and iOS. Browser DevTools simulate these issues poorly. Testing on actual hardware is not optional for a project at this price point.

For ongoing site health, standard maintenance covers WordPress core and plugin updates, uptime monitoring, and performance audits - ensuring the site continues to perform at launch quality over its full lifespan.

Key Takeaways

1. Scope your CSS in Bricks Builder

Generic class names collide with Bricks Builder's internal styles in ways that are non-obvious during development and maddening to debug in production. An early version of the site map used .btn-primary as a filter button class. It conflicted with a Bricks theme style, producing unexpected visual overrides. The refactor to .lmc-map-btn-primary - using a project-specific namespace throughout - eliminated the conflict and, more importantly, established the right habit for every class written afterward.

2. Touch handling requires real device testing

The Safari modal issue was invisible in every browser simulator tested. It only appeared on an actual iPhone during hardware testing. The lesson is not specific to this bug - it is a general principle: any interactive feature that uses touch events, pointer events, or scroll behavior should be validated on physical iOS and Android devices before launch. The gap between simulated and real touch behavior remains significant in 2026.

3. Self-hosting fonts is always correct

For a client that values performance and does not want third-party domains in their network waterfall, self-hosted fonts are the right call. They eliminate external DNS lookups, give you full control over font-display behavior, survive CDN outages, and do not pass visitor data to Google. There is no downside for a project of this type.

4. Let sales close the deal

Early versions of the site map tooltips included pricing information. The client's sales team correctly identified this as premature: buyers seeing a number before they have understood the product and community context were anchoring on price rather than value. Removing pricing from the tooltips - and from the site map entirely - shifted the website's job to education and interest generation. The sales team handles pricing in the context of a real conversation. The website opens the door; it does not close the deal.

Frequently Asked Questions

Can WordPress handle luxury, high-end website design?

Yes. WordPress powers websites for major luxury brands worldwide. The key is not the platform - it is the development approach. With Bricks Builder for visual editing, ACF for structured content, and custom HTML/CSS/JavaScript for every interactive component, WordPress delivers results indistinguishable from fully custom frameworks. The Overdrive Motor Condos website features a custom design system, interactive SVG mapping, scroll-driven animations, and a fullscreen video hero - all built on WordPress.

What is an interactive SVG site map and why use it for real estate?

An interactive SVG site map overlays clickable polygon hotspots on an architectural plan image. Unlike static image maps, SVG polygons scale perfectly at any screen size using percentage-based coordinates. Hovering shows a tooltip with suite details; clicking opens a full modal. For luxury real estate, this approach lets buyers explore the facility visually before contacting sales - turning passive browsing into active engagement.

How do you ensure luxury websites perform well on mobile?

Three key practices: responsive design with mobile-specific layout adjustments (like rotating gradient overlays from diagonal to vertical), real-device testing on actual iOS and Android hardware rather than browser simulators, and IntersectionObserver-based lazy loading for images and animations. We also self-host all fonts to eliminate render-blocking external requests and respect prefers-reduced-motion for accessibility. Read more about our approach to front-end performance optimization.

What is Bricks Builder and why choose it over Elementor?

Bricks Builder is a modern WordPress visual site builder that gives developers full access to custom HTML, CSS, and JavaScript while maintaining a visual editing workflow for content updates. Unlike Elementor, Bricks generates cleaner markup, offers better performance, and provides more flexibility for custom development. For the Overdrive project, it allowed us to build highly custom interactive components while still giving the client an intuitive content management experience.

How much does a luxury custom WordPress website cost?

A premium custom WordPress website with interactive features, custom design system, and multiple page templates typically starts at EUR 4,500 for a corporate-level build. Projects with advanced features like interactive SVG mapping, custom JavaScript components, and ACF-powered dynamic content can range from EUR 5,000 to EUR 10,000+ depending on scope. Contact us for a detailed quote based on your specific requirements.