/* ============================================================ Videos / Films page — Nicko Trenchev Studio Design plan ----------- Subject : the studio's films. The page's single job is to make the work feel cinematic and get the visitor to press play. Palette : inherited from home-test.css (#0a0a0a ground, white ink). The footage is the only colour on the page — chrome stays monochrome, matching the "the work is the interface" rule of the rest of the site. Type : Inter 800/900 uppercase for display (existing wordmark voice), Bodoni Moda italic for the couple/venue line — the same pairing the home grid captions already use. Layout : an oversized VIDEOS wordmark, one full-bleed featured film, then a calm three-column grid of film cards. Signature element : the featured film's title is set huge and straddles the bottom edge of the hero frame in `mix-blend-mode: difference`, so it inverts against the footage instead of sitting on a scrim. This is the page's one memorable moment, and it reuses the blend-mode chrome language already established by .h-logo / .h-chrome-label. Loads AFTER home-test.css, which owns the tokens, the fixed chrome and the MENU / CONTACT overlays. Only what is specific to this page lives here. ============================================================ */ :root { /* Page-specific tiers, expressed as tokens so nothing is hardcoded below. */ --v-ink-dim: rgba(255, 255, 255, 0.56); --v-ink-faint: rgba(255, 255, 255, 0.34); --v-frame: #131313; /* placeholder ground behind a loading frame */ --v-gap: 8px; /* grid gutter — tight, like the home grid */ --v-edge: 24px; /* page side margin */ --v-radius: 0px; /* the site is hard-edged; kept as a token anyway */ --v-ease: cubic-bezier(0.2, 0, 0.2, 1); } /* Lenis smooth scroll: it drives scrolling via transform on , and needs the native behaviour switched off to avoid fighting it. */ html.lenis, html.lenis body { height: auto; } html.lenis { scroll-behavior: auto !important; } .lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; } body.v-page { background: var(--h-bg); } /* ============================================================ PAGE HEAD — oversized VIDEOS wordmark, right-aligned under MENU ============================================================ */ .v-head { padding: 26px var(--v-edge) 0; /* clears the fixed vertical MENU label that lives in the same corner */ padding-right: calc(var(--v-edge) + 46px); display: flex; justify-content: flex-end; } .v-title { font-family: var(--h-sans); font-weight: 900; font-size: clamp(44px, 8.6vw, 132px); line-height: 0.82; letter-spacing: -0.03em; color: var(--h-ink); mix-blend-mode: difference; margin: 0; } /* ============================================================ FEATURED FILM — full-bleed frame with the title straddling its base ============================================================ */ .v-featured { position: relative; margin: 14px var(--v-edge) 0; } .v-frame { position: relative; width: 100%; aspect-ratio: 21 / 9; /* Cap the height so the oversized title below still lands inside the first screen — the overlap IS the composition, so it must not need a scroll to be seen. On wide viewports this makes the frame a true cinema letterbox (the poster crops via object-fit), which is the intended look. */ max-height: 46vh; overflow: hidden; background: var(--v-frame); } .v-frame img, .v-frame video, .v-frame iframe { width: 100%; height: 100%; object-fit: cover; display: block; border: 0; } /* The oversized title overlaps the frame's lower edge. `difference` inverts it against whatever the footage is doing behind it — the page's one flourish. */ .v-featured-title { position: relative; /* The overlap is set in `em`, so it stays proportional at whatever size the fit-to-width measurement lands on. */ margin: -0.40em 0 0; font-family: var(--h-sans); font-weight: 900; /* Starting value only — VideosApp.jsx measures the text and overrides this inline so one line spans the frame exactly, whatever the film is called. Kept as a clamp so there is no flash of the wrong size before JS runs. */ font-size: clamp(34px, 7.4vw, 116px); line-height: 0.86; letter-spacing: -0.035em; color: var(--h-ink); mix-blend-mode: difference; pointer-events: none; white-space: nowrap; } .v-featured-meta { display: flex; align-items: baseline; gap: 18px; margin-top: 10px; padding-bottom: 6px; } .v-featured-meta .sub { font-family: var(--h-serif); font-style: italic; font-size: clamp(14px, 1.5vw, 20px); color: var(--v-ink-dim); } .v-featured-meta .tag { font-family: var(--h-sans); font-weight: 700; font-size: 11px; letter-spacing: 0.16em; color: var(--v-ink-faint); } /* ============================================================ PLAY CONTROLS Big circular button on the hero, small square badge on each card — both are real