Header preview (internal)

Header preview (internal)

Desktop — Option A (approved)

One row. Logo left, nav beside it, one teal action right. No dead middle, nothing right-jammed, no stray items.

Page content scrolls under the header.
 
 
 
 
 
 
 

Mobile — the Tesla pattern

Three things borrowed: the header dissolves into the hero image instead of sitting on a slab, the hamburger becomes a labelled Menu button, and a floating dock pins the two actions that matter to the bottom of the screen — a small text-us button beside one wide primary.

1 · Over a hero image

Page content begins here.
 
 
 

2 · On a page with no hero

This is also what the blended header turns into the moment you scroll.
 
 
 
 

3 · Quieter dock

Same dock, outlined instead of filled — closer to how Tesla actually does it.
 
 
 

The bubble button is the text-us entry point for the 24/7 AI support. It needs an SMS-capable number before it can go live — if (203) 238-1334 is a landline, texts will silently fail.

Good news on the logo: the white wordmark over the photo above is the navy file, inverted in CSS. Because the wordmark is one flat colour on transparent, that works cleanly — so nothing here is blocked waiting on a white export. A real white asset is still tidier long term.

What you have today

The real header is at the top of this page. The bar is #000053, a near-black blue that is not your brand navy (#262963), and the logo is the 200×200 circle.

CARLSON
PROCARE
Content.