Client
SilvaTimeline
Studio buildProduct
Concept build, single-page property marketing siteIndustry
Property DevelopmentHospitalityLuxury MarketingSilva is a concept build for a development of premium eco-villas in the Dolomites, produced in-house as a reference rather than for a client. The brief was a page that could carry a luxury property brand with no CMS, no build step, and no framework, using photography that has not been shot yet. One constraint shaped most of the CSS: the wordmark and the play control are baked into the hero photograph rather than drawn in markup, so an ordinary cover crop cuts the brand in half on a narrow screen.
Shipped the whole site as one HTML file holding markup, CSS, JavaScript, and an inline SVG sprite, so it renders from any static host with nothing to install and no assets to resolve.
Built the type, spacing, and radius scale from 172 clamp() declarations, so the layout scales continuously between a 320px phone and a 1920px display instead of jumping at breakpoints.
Protected the baked-in wordmark with four aspect-ratio queries that bias the hero crop further left as the viewport gets taller, then change the hero's shape entirely below square.
Drew seven alpine scenes and fourteen icons as vectors in an inline sprite, used 51 times across the page, so the site could be finished before the photography exists and swap to real plates without a layout change.
One 3,648-line file with no dependencies, no build step, and no runtime framework.
A hero that keeps the wordmark intact from 320px to 1920px and across four viewport aspect ratios.
Zero cumulative layout shift on the hero, with the WebP srcset preloaded at high fetch priority before the stylesheet is parsed.
Reduced-motion support that suppresses every animation and transition without hiding content, because motion is CSS-driven and JavaScript only toggles classes.
