Built once, used everywhere.
Every pattern below ships from atmospheric.css and renders here live. If a page needs something not on this list, it probably wants one of these first.
Buttons
Yellow-fill primary with near-black text; ghost secondary. One primary CTA per view.
Inline text-link CTAHeader
Sticky, 55% black fill, 14px backdrop-blur. On mobile the links collapse behind a hamburger; the CTA stays.
Tags and chips
FAQ block
Native details/summary disclosure - no JS, keyboard-accessible by default.
What happens when the power goes out?
The charger has its own solar panels and a LiFePO4 battery bank, so it keeps charging through dumsor. No half-charged cars.
Will EV drivers actually show up?
Timeline
- Week 0You apply.We email back within 48 hours.
- Week 1Site visit.We assess parking, power supply, foot traffic.
- Weeks 6–8Commissioning.Energy Commission compliance.
Image slot
Reserves aspect-ratioed space at every breakpoint - CLS = 0 is a hard acceptance criterion. Ships empty until the real photo exists.
Email CTAs
No forms anywhere. Both audiences convert through prominently styled pre-filled mailto links.
On dark - .btn--primary + .mailto-noteOpens your mail app with the details pre-filled. We reply to every one.
Apply to host a charger.
Email ask@pitvolt.com with:
- - Your name and business name
- - Business type · Location · Parking spaces
- - Three-phase power · MoMo phone
Earnings calculator
Ships as a complete static worked example - with JS disabled the numbers still read true. hosts.html adds the live recompute script.
Demo chrome
Frames for product previews. Every demo carries the caption chip - product previews always declare themselves illustrative.
Step strip
The three-step money-flow strip, shared by the homepage and /drivers.