Vantera

What it is

A one-page marketing site for a sports and luxury car showroom: a full-image hero with a search bar, a figures panel, six car cards, four buying steps, a review carousel, two showrooms, four articles, two calls to action, a five-column footer. One page, one HTML file.

What makes this site is its hero: a full-width photograph over which three layers are stacked in a single CSS property — a flat 40% darkening so white holds up, a fade to white over the last quarter, and the photo. It's that fade that lets the dark figures panel overlap the image by 140 px with no clipping and no mask.

The design comes from a Webflow dealership template of which only the structure has been kept. Everything else has been rewritten: jQuery, the IX2 animation engine and its 126 events, the 94 kB of minified CSS, the home-made slider, the editor's badge, and the style="opacity:0" set inline on every animated block — which a strict security policy blocks, leaving a blank page.

The site has been renamed, and not only in the title: the five real car makes it showed — logos included — have become five invented ones, and so have the four social networks in the footer. Twenty photographs were produced for this template.

What you change first

The colours — nine lines

Right at the top of assets/css/style.css:

--accent:        #31b5a3;  /* fills: buttons, badges, stars */
--accent-deep:   #1f7a6e;  /* writing on light, and hovers */
--accent-bright: #62daca;  /* writing on a photo, and on the ink */
--ink:           #0e1523;  /* dark panels, footer, text */
--cloud:         #f6f6f6;  /* the grey sections */

One thing to know before touching it: the accent exists in three shades and they aren't interchangeable. The solid teal passes at 7.2:1 on the midnight blue and disappears on white (2.5:1); the dark version does the opposite, at 4.8:1 on the light grey; the lightened version holds at 10.8:1 on the ink and at 7.5:1 on a darkened photo. Changing one means changing all three.

The name

Search for “Vantera” in index.html: the title, the description, the logo, the hero, the footer, the email address. No CSS class carries the brand name, so a find-and-replace can't break anything. The logo is a 667-byte SVG pictogram; the word beside it is text, in the template's own font.

The cars

A card is one <article class="car">. Duplicate it or delete it, the grid recomposes itself — the same goes for a review and for an article. The photos' display ratios are fixed in CSS by aspect-ratio: 16/9 for a car, 25/18 for a showroom, 3/2 for an article. An image with another ratio is cropped, not distorted.

The sizes

The type scale is declared once at the top, then redeclared at each of the three breakpoints. So a heading never gets its own media query: you change --h2-size and every section heading follows. If you find yourself writing a @media elsewhere in the stylesheet, you're probably missing a token.

The thirteen effects, and how they're built

The settings aren't eyeballed: they're read out of the store ixData of Webflow's animation engine, then deduplicated. The template declares 126 events there — one per collection instance — for 13 distinct effects.

What you should know

• No external requests. Self-hosted fonts, local images, zero CDN. Checked by listing the requests on load, not assumed.
• Without JavaScript, nothing is hidden. The hidden state of the scroll reveal is written under html.js, a class set before the first paint. Checked by removing the <script>: 25 headings out of 25, 68 paragraphs out of 68, all six cars, all six reviews, and the menu staying open.
• The filters and the menu are native. The hero's three filters are <details> elements: they open by click and by keyboard, script or no script. The “Pages” panel opens on :focus-within, so from the keyboard alone. The script only adds the 300 ms animation — and it has to add it, because a closed <details> is removed from rendering and a @keyframes would never replay after the first opening.
• The carousel slides on its own. The track is a scroll container with scroll-snap: mouse, finger and arrow keys all work without a line of JavaScript. The two buttons, their disabled state at either end and the position announced through role="status" are the layer on top.
• Zero inline styles, zero inline scripts. The template honours the site's strict security policy, checked by serving the folder with the real header — read from the project's /_headers file, not copied out.
• The trigger sits 15% up from the bottom of the screen, measured against the screen and not against the element as in the original. A threshold expressed as a fraction of the element never fires for a block taller than the viewport — and here a block visibly enters instead of having finished before it was seen.
• Contrast corrected. The original writes in white on its green accent: 2.6:1, where 16 px text needs 4.5. Here a solid button's label is in midnight blue, at 7.2:1 on the same fill.
• Responsive checked at 390, 1440 and 2560 px, on load and throughout the scroll, with no horizontal overflow.

What isn't perfect

Better said here than left for you to find out.