Marenza

What it is

A complete site for a luxury hotel and resort: a photographic hero with a suite card laid over it, an introduction, a carousel of five suites, four selling points inside an engraved frame, a carousel of moments crossed by the name in giant type, a grid of rooms on a wine background, key figures, an accordion of experiences, a review, a staggered discovery block, a journal, a sign-up form and a footer. One page, one HTML file.

What makes this site is its hairline decoration: behind every section run a vertical rule and three one-pixel circles, and two sections sit inside an engraved frame with scrollwork. All of it is SVG drawn by hand, inside the HTML, without a single image file.

The design comes from a Webflow hospitality template of which not one image remains: all 33 photographs were regenerated for this template, at the exact aspect ratio measured on the original. Every line of code was rewritten: 135 kB of minified CSS, three Webflow bundles totalling 1.9 MB, GSAP with ScrollTrigger and SplitText, the proprietary IX2 animation engine, two Lottie animations, an e-commerce cart that calls an API that does not exist outside the tool, and style="opacity:0" set inline on every animated block — which a strict security policy blocks, leaving a blank page.

That is the point: this template is not here to be admired, it is here to be read, broken and put back together.

What you change first

The colours — ten lines

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

--cream:      #f8f2ed;  /* page background */
--sand:       #faeddd;  /* the "details" section, one notch warmer */
--wine:       #7b2e2e;  /* headings, full-bleed sections, footer */
--gold:       #e8b96b;  /* button background */
--gold-deep:  #d3a150;  /* the same gold, one notch darker (hover) */
--gold-soft:  #f5dca8;  /* the same gold, lightened for text on a photo */
--ink:        #211c1a;  /* strongest text */
--body:       #5c534e;  /* running text */
--line:       #e3cfc4;  /* the rules and circles of the decoration */

One thing to understand before touching anything else: there are three golds, not one. The full gold is a button background with black text on it (11.5:1). That same gold as text on the cream would drop to 2.2:1, unreadable: the lightened one takes over as soon as it has to read on a photograph or on the wine (6.9:1). Change the accent, change all three.

The name

Search for “Marenza” in index.html: the logo, the title, the two type bands and the footer. No CSS class contains the brand — a find-and-replace cannot break anything. The logo is a six-line SVG <symbol>.

The sizes

The type scale is declared once, then re-declared at each breakpoint (991, 767 and 599 px). A heading therefore never carries its own media query: change --h2 and the whole page follows — 68 px on a large screen, then 48, 42 and 32 px on the way down.

The sixteen effects, and how they’re built

They were not watched, they were read: 151 events in Webflow’s IX2 store and 26 GSAP triggers, extracted from the original and then deduplicated — the tool creates one event per collection item. Sixteen distinct effects remain — fifteen measured, plus mouse dragging.

What you should know

No external request, no build step. Open index.html in a browser and it works. Self-hosted fonts, local photographs, no CDN, no tracker.

Without JavaScript, nothing is hidden. The hidden state of the reveals is written .js [data-reveal], and enhance.js is the only thing that sets that class. Checked with JavaScript off: 46 headings out of 46 stay visible, 59 blocks out of 59 too, and the accordions still open.

The reveal threshold is 15 % from the bottom of the screen, not the first visible pixel as in the original. The margin is measured on the viewport, not on the element — otherwise the hero and the rooms section, both taller than the screen, would stay hidden for ever. A safety net reveals whatever is left when the bottom of the page is reached.

The decoration sits under the content. The hairlines and circles are absolutely positioned, so they were painted after content that is not — without one stacking rung on the container they ran straight across the photographs of the journal and the discovery block.

The carousels scroll natively. Wheel, finger and keyboard all work without a line of JavaScript; mouse dragging is the one gesture the script adds: 4,320 px of travel for the 4,188 px needed on the suites, 2,100 px for 1,830 px on the gallery. The last card is reachable in both.

Under a strict security policy (script-src 'self'; style-src 'self'): zero violations, checked by serving the folder with the real header. No inline style, no inline script, no onclick.

No horizontal overflow at 390, 1440 and 2560 px, on load and after a full scroll. Accessibility: skip link, aria-expanded on the menu, star ratings spelled out, a single visible focus ring, and prefers-reduced-motion that zeroes the delays as well.

What isn’t perfect