ViViFiCAR

How it’s built

Layout

Split hero: mint left half has large dark serif headline over scattered yellow pixel squares, body copy and dark pill; right half shows an interior scene with white pill navigation above.

Type

Large dark high-contrast serif headline and smaller serif body; compact sans navigation.

Color and surface

Mint, yellow pixels, dark blue, white and warm image.

Components

Mint text panel with pixel pattern, right image and white pill navigation.

What makes it work

• Mint text panel
• yellow pixel squares
• dark serif headline
• right image
• white pill navigation

Measured

Computed CSS at 1440px, 2026-10-24.

Live behavior

Today

ViViFiCAR opens with an orange wordmark and a segmented navigation row above a split hero: a bright yellow text panel on the left and a photograph of a person using a camera on the right. The text describes “living and staying” and has a dark SEE DIARY button. A white project-information notice overlays the lower-right of the desktop opening. The desktop-scroll frame at actual y=750 shows the municipalities section, three image cards, and an accordion-style list with Torre de Moncorvo expanded. Tablet and phone use a compact menu and stack the hero text and photograph.

Responsive

At 1440×1000 the yellow text panel and photographer image form side-by-side columns, with a compact white project notice over the lower-right of the image. At 768×1024 and 390×844 the navigation is reduced to the wordmark and menu control, the text and SEE DIARY action stack above a narrower photo, and the municipalities section begins below. These captured widths do not establish exact breakpoints.

Scroll

At actual scrollY=750 in a 1440×3691 document, the image above ends near the top, followed by “MUNICIPALITIES WITH RESIDENCES,” three image cards and a right-side list containing Sabrosa, Mêda and Torre de Moncorvo; Torre de Moncorvo is expanded with artist details and a KNOW MORE button. The single frame does not establish sticky positioning or accordion behavior.