/* UCHI ==== The page composition and interaction model follow isu-antwerp.com, carrying the UCHI wordmark and its tagline. Every value here was measured off the live ISU site (its source HTML, its css/style.css, and computed styles read in the browser) on 2026-08-17 — none of it is eyeballed: header absolute, top 50px / right 100px, right-aligned. The slot is wider than ISU's 145px because the UCHI lockup carries its rule in the same image, where ISU splits the mark and the tagline into separate elements home figure 3:2 rather than ISU's 634/358 - see the note at #home .figure nav absolute, bottom 80px / left 100px, Bebas Neue 22px; li margin-bottom 6px, line-height 20px, float + clear; ::before wipe in #888 driven by data-text, .35s ease-in home figure ~60% of viewport width, vertically centred intro Abel 16px / 20px, width 70%, max-width 640px, centred prices box 500px wide, 6px black vertical rule down the centre, .desc 50% right-aligned / .value 50% left-aligned, both Bebas Neue 22px, padding 0 20px, item margin-bottom 5px legend Abel 16px / 19px, offset to calc(50% + 20px) contact box as prices, translateX(40px), .mt rows margin-top 25px, .value span Abel 16px block, padding-top 10px mobile burger 40x24 at left 7.5% / top 76px (3 bars: 50% / 100% / 50%), nav overlay background #888888, ul left 15% centred, li 7vw, boxes 100% wide in normal flow, rule 5px, cells padding 0 10px ONE DELIBERATE CORRECTION, verified rather than copied. ISU's stylesheet carries `#v-res.mobile … { font-size: 6vw }` and then `6vh` for the price and contact cells. No element on the page has id="v-res" — "v-res" is a class on — so neither rule ever applies, and the size that actually renders on a phone is 22px, confirmed by reading the computed style at a 375px viewport. Copying 6vh literally would have set ~50px type inside a ~175px column and overflowed every row. This uses the 22px that really renders. TWO STRUCTURAL SIMPLIFICATIONS, visually identical but sturdier: vertical centring is done with CSS grid rather than ISU's JS-assigned section heights, and the legend sits in normal flow rather than absolutely positioned, so it can never collide with the nav or overflow the viewport. */ /* ------------------------------------------------------------------ fonts */ @font-face { font-family: 'Bebas Neue'; src: url('fonts/bebas-neue-latin.woff2') format('woff2'); font-weight: 400; font-display: swap; } @font-face { font-family: 'Abel'; src: url('fonts/abel-latin.woff2') format('woff2'); font-weight: 400; font-display: swap; } /* ----------------------------------------------------------------- tokens */ :root { --paper: #fcfcfc; /* sampled from ISU's body background */ --ink: #000; --grey: #888; /* ISU's nav wipe + mobile menu ground */ --ease1: cubic-bezier(.37, 1.12, .51, .9); --ease2: cubic-bezier(.19, 1, .22, 1); --display: 'Bebas Neue', 'Arial Narrow', Arial, sans-serif; --text: 'Abel', Arial, sans-serif; } * { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--text); line-height: 1; } p { margin: 0; } ul { margin: 0; padding: 0; list-style: none; } img { max-width: 100%; height: auto; border: 0; } a { color: inherit; text-decoration: none; } :focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; } .page { position: relative; min-height: 100svh; } /* ---------------------------------------------------------------- header -- */ .head { position: absolute; top: 50px; right: 100px; max-width: 200px; /* the UCHI lockup is 648x239: four Helvetica Bold capitals over a rule, with "hair is hair" in Helvetica Regular right-aligned under it. At 200px the caps stand about 40px tall, a mark rather than a headline, in ISU's register */ text-align: right; z-index: 900; } .head__title { margin: 0; font-size: inherit; font-weight: inherit; line-height: 0; } .head__mark { display: block; } .head__mark img { width: 100%; height: auto; display: block; } /* ------------------------------------------------------------------ main -- */ #main-content { position: relative; width: 100%; min-height: 100svh; display: grid; place-items: center; overflow: hidden; } .section { display: none; width: 100%; grid-area: 1 / 1; } .section.is-active { display: block; } /* --------------------------------------------------------------- #home ---- */ #home .figure { position: relative; height: min(66svh, 40rem); aspect-ratio: 1440 / 1920; /* the photograph's own ratio - nothing is cropped */ width: auto; margin: 0 auto; overflow: hidden; } #home .figure img { width: 100%; height: 100%; object-fit: cover; /* frame matches the source ratio, so this crops nothing */ object-position: 50% 50%; display: block; } /* -------------------------------------------------------------- #intro ---- */ #intro .content { width: 70%; max-width: 640px; margin: 0 auto; font-family: var(--text); font-size: 16px; line-height: 20px; } #intro .content p + p { margin-top: 20px; } /* --------------------------------------------- #prices and #contact boxes -- */ /* The signature ISU layout: a 500px column with a 6px black rule straight down the middle, labels right-aligned into it and values left-aligned off it. */ .box { position: relative; width: 500px; margin: 0 auto; padding: 40px 0 30px; } .box .rule { position: absolute; left: 50%; transform: translateX(-50%); top: 0; width: 6px; height: 100%; background: var(--ink); } .item { width: 100%; margin: 0 0 5px 0; } .item::after { content: ''; display: block; clear: both; } .item .desc, .item .value { width: 50%; float: left; box-sizing: border-box; padding: 0 20px; font-family: var(--display); font-size: 22px; line-height: 22px; } .item .desc { text-align: right; } .item .value { text-align: left; } /* Contact values float RIGHT, prices float LEFT. This is not a stylistic whim, it is load-bearing, and ISU's stylesheet does exactly the same. Several contact rows deliberately carry an empty label — the two address lines, the Instagram row — so the value sits alone beside the rule. An empty floated

has zero height, and a zero-height float reserves no vertical band, so a following left-floated value slides right past it to the left edge and lands on the WRONG side of the centre rule. Floating the value right pins it to the right half whether or not its label has content. */ #contact .item .value { float: right; } .item .value a:hover { text-decoration: underline; } .item .value span { font-family: var(--text); display: block; padding-top: 10px; font-size: 16px; line-height: 16px; } /* Group separation inside the contact list. */ .item.mt { margin-top: 25px; } /* ISU keeps this to a single line that runs past the 500px column rather than wrapping inside it; the copy is kept short enough that it cannot reach the viewport edge even at the 900px breakpoint. */ .legend { margin-top: 30px; margin-left: calc(50% + 20px); font-family: var(--text); font-size: 16px; line-height: 19px; white-space: nowrap; } #contact .box { transform: translateX(40px); } /* -------------------------------------------------------------------- nav -- */ #main-navigation { position: absolute; bottom: 80px; left: 100px; z-index: 10; font-family: var(--display); font-size: 22px; } #main-navigation li { margin: 0 0 6px 0; cursor: pointer; position: relative; color: var(--ink); float: left; clear: both; line-height: 20px; white-space: nowrap; } /* ISU's nav hover: a grey copy of the label, taken from data-text, wiping in from the left over the black original. */ #main-navigation li::before { content: attr(data-text); position: absolute; left: 0; top: 0; color: var(--grey); transition: width 0.35s ease-in; transform-origin: left center; width: 0%; overflow: hidden; white-space: nowrap; pointer-events: none; } #main-navigation li:hover::before, #main-navigation li.selected::before { width: 100%; } @media (prefers-reduced-motion: reduce) { #main-navigation li::before { transition: none; } } /* ----------------------------------------------------------------- burger -- */ #ico-nav { display: none; position: absolute; left: 7.5%; top: 76px; width: 40px; height: 24px; z-index: 1001; background: none; border: 0; padding: 0; cursor: pointer; } #ico-nav span { background: var(--ink); height: 4px; display: block; position: absolute; transition: all 0.25s ease-in; } #ico-nav .ln1 { width: 50%; top: 0; left: 0; } #ico-nav .ln2 { width: 100%; top: 0; bottom: 0; margin: auto 0; } #ico-nav .ln3 { width: 50%; bottom: 0; right: 0; } /* Collapses to an X, as ISU's does. */ #ico-nav.open { width: 24px; } #ico-nav.open .ln1 { transform-origin: left bottom; transform: rotate(45deg); width: 55%; } #ico-nav.open .ln2 { transform-origin: center center; transform: rotate(-45deg); } #ico-nav.open .ln3 { transform-origin: right top; transform: rotate(45deg); width: 55%; left: 9px; } @media (prefers-reduced-motion: reduce) { #ico-nav span { transition: none; } } #main-navigation-mobile { display: none; position: fixed; inset: 0; width: 100%; height: 100%; background: #888888; font-family: var(--display); z-index: 1000; } #main-navigation-mobile.open { display: block; } #main-navigation-mobile ul { position: absolute; left: 15%; top: 50%; transform: translateY(-50%); } #main-navigation-mobile li { margin: 0 0 2px 0; cursor: pointer; position: relative; color: var(--ink); float: left; clear: both; font-size: 7vw; line-height: 7vw; } /* --------------------------------------------------- reservation page ----- */ /* The footer is absolutely positioned at the bottom of the page, so the centred booking column has to leave room for it. Without this padding the column centres against the full viewport and, on a short list, lands on top of the address. That is exactly what happened when the price list went from twelve rows to eight: nothing overflowed, nothing was clipped, the two simply overlapped. verify.mjs now asserts they do not. */ .reservation #main-content { display: grid; place-items: center; padding-bottom: 150px; } #reservation-box { width: 560px; margin: 0 auto; padding: 40px 0 30px; } #reservation-box .box { padding-top: 0; } /* ========================================================================== BOOKING ========================================================================== Built out of the same two pieces the rest of the site is made of: the 500px column with the 6px rule down its middle, and Bebas at 22/22. A booking form arriving in its own visual language would read as a widget dropped into the page, which is exactly what this replaces. ========================================================================== */ .step { margin: 0 0 4px; } /* Steps 3, 4 and 5 stay shut until the step before them is answered. The max-height is a ceiling, not a measurement - it only has to exceed the tallest the panel can get, and the eased opacity is what the eye actually reads, so the height is never seen arriving at a wrong value. */ .step[data-step="3"], .step[data-step="4"], .step[data-step="5"] { max-height: 0; opacity: 0; overflow: hidden; pointer-events: none; transition: max-height 0.55s var(--ease2), opacity 0.40s var(--ease2); } .step.is-open { max-height: 1600px; opacity: 1; overflow: visible; pointer-events: auto; } .step__head { display: flex; align-items: baseline; justify-content: center; gap: 10px; margin: 40px 0 6px; font-family: var(--display); font-size: 22px; line-height: 22px; font-weight: normal; } .step__n { color: var(--grey); } .step__t { letter-spacing: 0.02em; } .step__hint { margin: 14px auto 0; max-width: 460px; text-align: center; font-family: var(--text); font-size: 15px; line-height: 19px; color: var(--grey); } .step__hint.legend { margin-left: auto; white-space: normal; } /* ------------------------------------------------------- pickable rows --- */ /* A row is a real