/* ===================================================================== PLH® USA — home. The brand, not a product demo. PLH is a Milanese design house whose subject is matter: the same gesture, drawn eight ways, in brass, steel, concrete, stone, Alcantara. So the page is monochrome and editorial, and the ONLY colour is the material itself — poured into the brand line, "devices with soul". ===================================================================== */ :root { --paper: #FAFAF8; --ink: #0B0B0C; --soft: rgba(11,11,12,.55); --faint: rgba(11,11,12,.34); --hair: rgba(11,11,12,.13); --live: #126E82; --f: "Helvetica Neue", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; --gutter: clamp(1.25rem, 3.4vw, 4rem); --maxw: 1440px; --ease: cubic-bezier(.16,1,.3,1); } /* the whole page swings between paper and ink as you scroll: the tokens are swapped on and the body eases across, so there is no hard edge between one section and the next. */ /* the request sits on its own ground too: white text, so the small labels stay legible on a colour this saturated */ html[data-chrome="ember"] { color-scheme: dark; --paper: #CB5224; --ink: #FFFFFF; --soft: rgba(255,255,255,.84); --faint: rgba(255,255,255,.64); --hair: rgba(255,255,255,.32); } /* the Corelli chapter has a ground of its own */ html[data-chrome="deep"] { color-scheme: dark; --paper: #126E82; --ink: #F4F3F0; --soft: rgba(244,243,240,.72); --faint: rgba(244,243,240,.5); --hair: rgba(244,243,240,.24); } html[data-chrome="ink"] { color-scheme: dark; --paper: #0B0B0C; --ink: #F4F3F0; --soft: rgba(244,243,240,.58); --faint: rgba(244,243,240,.34); --hair: rgba(244,243,240,.16); } * { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; overflow-x: clip; scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { margin: 0; font-family: var(--f); font-size: clamp(1rem, .96rem + .2vw, 1.08rem); line-height: 1.5; color: var(--ink); background: var(--paper); transition: background-color .8s var(--ease), color .8s var(--ease); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } h1, h2, p, ul, li, blockquote, figure { margin: 0; padding: 0; } ul { list-style: none; } a { color: inherit; text-decoration: none; } svg { display: block; } sup { font-size: .5em; vertical-align: super; } .visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .skip-link { position: absolute; left: -9999px; top: 0; background: var(--paper); color: var(--ink); padding: .6rem 1rem; z-index: 999; } .skip-link:focus { left: 0; } .label { font-size: .68rem; letter-spacing: .2em; text-transform: uppercase; font-weight: 600; color: var(--faint); } .heading { font-size: clamp(1.9rem, 4.2vw, 3.4rem); font-weight: 600; line-height: 1.04; letter-spacing: -.028em; } .lede { color: var(--soft); max-width: 52ch; font-size: clamp(1.02rem, .98rem + .3vw, 1.2rem); line-height: 1.55; } .lede--tight { max-width: 40ch; } /* ---------------------------------------------------------------- masthead */ .masthead { position: fixed; inset: 0 0 auto 0; z-index: 50; display: flex; align-items: center; justify-content: space-between; padding: clamp(1rem, 2.4vw, 1.6rem) var(--gutter); } .mark svg { width: 34px; height: auto; fill: var(--ink); } .masthead__nav { display: flex; align-items: center; gap: clamp(1rem, 2.2vw, 2rem); } .masthead__nav a { font-size: .84rem; color: var(--soft); transition: color .3s var(--ease); } .masthead__nav a:hover { color: var(--ink); } /* the last item is the call: a pill that follows whichever ground it is over. Note the a.nav-cta selector: plain .nav-cta would lose to .masthead__nav a. */ .masthead__nav a.nav-cta { padding: .5rem 1.05rem; border-radius: 999px; background: var(--ink); color: var(--paper); border: 1px solid var(--ink); transition: background .5s var(--ease), color .5s var(--ease), border-color .5s var(--ease); } .masthead__nav a.nav-cta:hover { background: transparent; color: var(--ink); } /* the bulge lens: a WebGL plane drawn from the real copy. The DOM text stays exactly where it is for crawlers and screen readers, only made invisible once the lens is running, and restored if WebGL is missing. */ /* a canvas is a replaced element: with inset:0 alone it would NOT stretch, it would take its intrinsic size (the drawing buffer) and render at DPR scale. The explicit 100% is what keeps it locked to the hero. */ .hero > .hero__gl { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; pointer-events: none; opacity: 0; } /* The swap is instant on purpose: the lens draws the very same words, from the same fonts and the same positions, so a cross-fade would only show the two copies at once for half a second. Swapped in one frame, it is invisible. */ .hero.gl-ready .hero__gl { opacity: 1; } .hero.gl-ready .hero__copy { opacity: 0; } /* ---------------------------------------------------------------- hero mosaic */ /* A wall of PLH plates behind the words: full bleed, kept very pale so the type always wins. The tile under the pointer lights up to full strength, like a torch moving across a catalogue wall. Built only after load. */ .mosaic { --cols: 6; /* declared here so JS can read it back */ position: absolute; top: 0; bottom: 0; left: 50%; width: 100vw; transform: translateX(-50%); /* full bleed, past the max-width */ z-index: 0; overflow: hidden; display: grid; grid-template-columns: repeat(var(--cols), 1fr); grid-auto-rows: 1fr; gap: 1px; background: transparent; opacity: 0; transition: opacity 1.4s var(--ease); } .mosaic.is-in { opacity: 1; } /* an empty cell is just paper: the gaps are half the composition */ .mosaic__tile { position: relative; overflow: hidden; background: transparent; opacity: .34; filter: grayscale(.15); transition: opacity .7s var(--ease), filter .55s var(--ease), background .7s var(--ease); } .mosaic__tile.has-photo { background: transparent; } .mosaic__tile.is-lit { opacity: 1; filter: none; z-index: 1; } .mosaic__tile.is-lit img { transform: scale(1.05); } .mosaic__tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; /* the whole plate, never cropped */ padding: 6%; opacity: 0; transition: opacity 1.1s var(--ease), transform 1.6s var(--ease); transform: scale(1.03); } .mosaic__tile img.is-on { opacity: 1; transform: scale(1); } @media (max-width: 900px) { .mosaic { --cols: 4; } } @media (max-width: 560px) { .mosaic { --cols: 3; } } /* The copy keeps its full strength while a photograph is lit: dimming it made the hidden DOM copy resurface (:not() adds its argument's specificity, so the dim rule outweighed the rule hiding it) and the words showed twice. */ /* ---------------------------------------------------------------- hero */ .hero { position: relative; isolation: isolate; min-height: 100svh; width: 100%; max-width: var(--maxw); margin: 0 auto; padding: clamp(7rem, 16vh, 11rem) var(--gutter) clamp(2.5rem, 7vh, 4rem); display: grid; grid-template-columns: 1.08fr .92fr; align-items: center; gap: clamp(2rem, 5vw, 4.5rem); } .hero__text { display: flex; flex-direction: column; gap: clamp(1.3rem, 3.4vh, 2.2rem); align-items: start; } /* the object, cut out on transparency, so it sits on whatever ground it lands */ .hero__shot { margin: 0; display: flex; justify-content: center; } .hero__shot img { width: auto; height: auto; max-width: 100%; max-height: 62vh; display: block; filter: drop-shadow(0 40px 60px rgba(11,11,12,.16)); } @media (max-width: 860px) { .hero { grid-template-columns: 1fr; align-content: center; gap: clamp(2.5rem, 6vh, 4rem); } .hero__shot img { max-height: 44vh; } } /* the materials PLH actually machines, as swappable fills */ :root { --mat-ink: linear-gradient(0deg,var(--ink),var(--ink)); /* the opening state: just ink */ --mat-brass: linear-gradient(112deg,#6d4a17,#c9a25c 16%,#f6e6ba 27%,#b88d40 40%,#7d5a20 52%,#e6cd8c 66%,#a97f34 80%,#6d4a17); --mat-copper: linear-gradient(112deg,#71361c,#c2733f 16%,#eeb184 27%,#ad6033 40%,#843f22 52%,#d99566 66%,#9d5730 80%,#71361c); --mat-steel: linear-gradient(112deg,#4e5358,#a4aab0 16%,#d6dbdf 27%,#848b92 40%,#5b6167 52%,#bfc5ca 66%,#787f86 80%,#4e5358); --mat-cimento: radial-gradient(52% 42% at 16% 24%, rgba(255,255,255,.55), transparent 60%), radial-gradient(44% 36% at 66% 60%, rgba(0,0,0,.38), transparent 60%), radial-gradient(34% 36% at 40% 86%, rgba(255,255,255,.34), transparent 58%), radial-gradient(30% 30% at 84% 20%, rgba(0,0,0,.26), transparent 58%), linear-gradient(158deg,#94918a,#67655f); --mat-alcantara: radial-gradient(68% 58% at 28% 22%, rgba(255,255,255,.26), transparent 66%), radial-gradient(50% 50% at 76% 78%, rgba(0,0,0,.3), transparent 64%), linear-gradient(148deg,#635d57,#37332f); } .soulline { --h1: clamp(2.6rem, 8vw, 7.4rem); /* capped: past --maxw the column stops growing, the viewport does not */ font-size: var(--h1); font-weight: 600; line-height: .92; letter-spacing: -.045em; } /* "soul" changes soul: every few seconds it takes another material AND another typeface. The box is pinned to the headline size so a wider serif or a mono never nudges the layout. One real text node — crawlers read it once. */ /* "soul" is simply inked in the house teal now: no gradient and no clipping, which also lets the lens read its colour like any other piece of text. */ /* on the orange ground the teal turns muddy, so there the word joins the rest in white; on paper it keeps the accent */ html[data-chrome="ember"] .soul, html[data-chrome="deep"] .soul { color: var(--ink); } .soul { display: inline-block; color: #126E82; height: calc(var(--h1) * .92); line-height: calc(var(--h1) * .92); font-size: calc(var(--h1) * var(--face-size, 1)); letter-spacing: var(--face-track, -.045em); } /* the trade-show line — the reason the US site goes live today */ .cedia { display: flex; align-items: center; gap: .6rem; margin-top: clamp(.6rem, 2vh, 1.4rem); font-size: .86rem; color: var(--soft); } .cedia__dot { --pulse: 18,110,130; /* the halo follows the dot, whatever it is */ width: 7px; height: 7px; border-radius: 50%; background: var(--live); flex: none; box-shadow: 0 0 0 0 rgba(var(--pulse),.5); animation: live-pulse 2.4s var(--ease) infinite; } /* on the coloured grounds the dot joins the text in white, halo included */ html[data-chrome="ember"] .cedia__dot, html[data-chrome="deep"] .cedia__dot { background: var(--ink); --pulse: 255,255,255; } @keyframes live-pulse { 70%, 100% { box-shadow: 0 0 0 9px rgba(var(--pulse),0); } } @media (prefers-reduced-motion: reduce) { .cedia__dot { animation: none; } } .cedia strong { color: var(--ink); font-weight: 600; } .cedia a { border-bottom: 1px solid var(--hair); color: var(--ink); } .cedia a:hover { border-color: var(--ink); } /* ---------------------------------------------------------------- the two products */ /* Client-approved layout: the logo centred at the top, the two plates side by side, each with its claim. Both sections sit on the same orange ground. */ .masthead--center { justify-content: center; } .cards { min-height: 100svh; max-width: var(--maxw); margin: 0 auto; width: 100%; padding: clamp(7rem, 16vh, 11rem) var(--gutter) clamp(4rem, 10vh, 7rem); display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: clamp(2.5rem, 7vw, 7rem); } .card { display: flex; align-items: flex-start; gap: clamp(1.2rem, 2.6vw, 2.4rem); } .card__shot { display: block; height: auto; flex: none; } .card__shot--slim { width: clamp(110px, 13vw, 200px); } .card__shot--neo { width: clamp(84px, 8.8vw, 138px); margin-top: .25rem; } .card__text { display: grid; gap: .1rem; } .card__name, .card__claim { font-size: clamp(1.15rem, 1.5vw, 1.75rem); line-height: 1.28; letter-spacing: -.01em; color: var(--ink); } .card__text--bold .card__name, .card__text--bold .card__claim { font-weight: 700; letter-spacing: -.02em; } /* on a phone the page opens straight on the form: the plates would push the ask a full screen down, and this page exists to collect the address */ @media (max-width: 820px) { .cards { display: none; } } /* ---------------------------------------------------------------- the ask */ /* The page has one job: get the card in the visitor's pocket turned into an address we can write to. So the hero states the offer and then asks. */ .hero__call { font-size: clamp(1.05rem, 1rem + .45vw, 1.35rem); color: var(--ink); max-width: 32ch; } .hero__go { align-self: start; display: inline-flex; align-items: center; width: max-content; padding: .95rem 1.9rem; border-radius: 999px; font-weight: 600; font-size: .98rem; background: var(--ink); color: var(--paper); border: 1px solid var(--ink); transition: background .45s var(--ease), color .45s var(--ease); } .hero__go:hover { background: transparent; color: var(--ink); } /* ---------------------------------------------------------------- what arrives */ .what { padding: clamp(7rem, 19vh, 13rem) var(--gutter); } .what__inner { max-width: var(--maxw); margin: 0 auto; } .what__head { display: grid; gap: 1.1rem; margin-bottom: clamp(3rem, 8vh, 5rem); } .what__list { border-top: 1px solid var(--hair); } .what__list li { display: grid; grid-template-columns: 3rem minmax(9rem, 14rem) 1fr; gap: .4rem 1.6rem; align-items: baseline; padding: clamp(1.4rem, 3.2vh, 2.1rem) 0; border-bottom: 1px solid var(--hair); } .what__n { font-size: .7rem; letter-spacing: .16em; color: var(--faint); } .what__t { font-size: clamp(1.1rem, 1.8vw, 1.5rem); font-weight: 600; letter-spacing: -.02em; } .what__d { color: var(--soft); font-size: .95rem; max-width: 54ch; } .what__note { margin-top: clamp(1.6rem, 4vh, 2.4rem); color: var(--faint); font-size: .9rem; } @media (max-width: 760px) { .what__list li { grid-template-columns: 2.4rem 1fr; } .what__d { grid-column: 2; } } /* ---------------------------------------------------------------- collections */ .collections { max-width: var(--maxw); margin: 0 auto; padding: clamp(7rem, 19vh, 13rem) var(--gutter); } .collections__head { display: grid; gap: 1.1rem; margin-bottom: clamp(2.6rem, 7vh, 4.5rem); } .index { border-top: 1px solid var(--hair); } .index__row { display: grid; align-items: baseline; gap: .3rem 1.4rem; grid-template-columns: 2.4rem minmax(6rem, 9rem) 1fr auto; padding: clamp(1rem, 2.4vh, 1.5rem) 0; border-bottom: 1px solid var(--hair); } .index__n { font-size: .7rem; letter-spacing: .16em; color: var(--faint); } .index__name { font-size: clamp(1.15rem, 1.9vw, 1.6rem); font-weight: 600; letter-spacing: -.02em; } /* only the rows that lead somewhere react: they step forward and grow an arrow */ a.index__name { border-bottom: 1px solid transparent; transition: border-color .35s var(--ease); } a.index__name::after { content: '\2197'; display: inline-block; margin-left: .3em; font-weight: 500; opacity: 0; transform: translate(-.3em, .2em); transition: opacity .35s var(--ease), transform .35s var(--ease); } .index__row--link { cursor: pointer; transition: transform .4s var(--ease); } .index__row--link:hover { transform: translateX(8px); } .index__row--link:hover a.index__name { border-color: var(--ink); } .index__row--link:hover a.index__name::after { opacity: 1; transform: translate(0, 0); } .index__desc { color: var(--soft); font-size: .93rem; } .index__flag { font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: var(--faint); white-space: nowrap; } .index__flag.is-live { color: var(--live); } /* hover preview — the plate you are reading about, following the cursor */ .peek { color-scheme: light; position: fixed; top: 0; left: 0; z-index: 80; width: clamp(220px, 21vw, 300px); pointer-events: none; opacity: 0; transform: translate3d(-999px,-999px,0) scale(.96); transition: opacity .42s var(--ease), scale .42s var(--ease); background: #fff; border: 1px solid var(--hair); border-radius: 15px; overflow: hidden; box-shadow: 0 24px 48px -28px rgba(11,11,12,.35); } .peek.is-on { opacity: 1; } .peek img { display: block; width: 100%; height: auto; transition: opacity .4s var(--ease), filter .4s var(--ease); } .peek.is-muted img { opacity: .38; filter: grayscale(.7); } /* not available here yet */ @media (hover: none), (pointer: coarse) { .peek { display: none; } } /* the row you are on comes forward, the others step back */ @media (hover: hover) and (pointer: fine) { .index:hover .index__row { opacity: .38; transition: opacity .4s var(--ease); } .index:hover .index__row:hover { opacity: 1; } } .collections__systems { margin-top: clamp(1.6rem, 4vh, 2.6rem); color: var(--soft); max-width: 56ch; } .collections__systems strong { color: var(--ink); font-weight: 600; } @media (max-width: 760px) { .index__row { grid-template-columns: 2.2rem 1fr; } .index__desc { grid-column: 2; } .index__flag { grid-column: 2; } } /* ---------------------------------------------------------------- the ink half of the page */ /* Collections, the Corelli chapter, the form and the footer share one black ground. Re-declaring the tokens is enough: every child follows, including the form fields and the button, which swap ink and paper by themselves. */ [data-theme] { background: transparent; } /* the ground belongs to the body now */ /* ---------------------------------------------------------------- bespoke */ .bespoke { padding: clamp(7rem, 19vh, 12.5rem) var(--gutter); } .bespoke__inner { max-width: var(--maxw); margin: 0 auto; display: grid; grid-template-columns: 1.15fr 1fr; gap: clamp(2.4rem, 6vw, 5rem); align-items: start; } .bespoke blockquote p { font-size: clamp(1.35rem, 2.6vw, 2.1rem); font-weight: 500; line-height: 1.24; letter-spacing: -.022em; max-width: 20ch; } .bespoke cite { display: flex; align-items: center; gap: .9rem; margin-top: 1.6rem; font-style: normal; font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; color: var(--faint); } .byline__face { width: 56px; height: 56px; flex: none; border-radius: 50%; object-fit: cover; display: block; box-shadow: 0 0 0 1px var(--hair); /* a hairline ring, so it sits on any ground */ } .bespoke__body { display: grid; gap: 1.1rem; color: var(--soft); max-width: 48ch; } @media (max-width: 860px) { .bespoke__inner { grid-template-columns: 1fr; } } /* the header needs no special case: it reads the same tokens as everything else */ .mark svg, .masthead__nav a { transition: fill .8s var(--ease), color .8s var(--ease); } /* ---------------------------------------------------------------- documentation */ .doc { max-width: var(--maxw); margin: 0 auto; padding: clamp(7rem, 19vh, 12.5rem) var(--gutter) clamp(7rem, 18vh, 11rem); display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2.4rem, 6vw, 5rem); align-items: start; } .doc__head { display: grid; gap: 1.1rem; } .doc__form { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.4rem, 3vw, 2rem) clamp(1.2rem, 2.4vw, 1.8rem); } .fld { display: grid; gap: .5rem; } .fld--wide { grid-column: 1 / -1; } .fld label { font-size: .68rem; letter-spacing: .16em; text-transform: uppercase; color: var(--faint); } .fld input, .fld select { font: inherit; color: var(--ink); width: 100%; padding: .55rem 0; border: 0; border-bottom: 1px solid var(--hair); background: transparent; border-radius: 0; transition: border-color .3s var(--ease); } .fld select { appearance: none; -webkit-appearance: none; cursor: pointer; padding-right: 1.6rem; } .fld--select { position: relative; } .fld--select::after { content: ''; position: absolute; right: 3px; bottom: 1.05rem; width: 7px; height: 7px; border-right: 1.5px solid var(--soft); border-bottom: 1.5px solid var(--soft); transform: rotate(45deg); pointer-events: none; } .fld input:focus, .fld select:focus { outline: 0; border-bottom-color: var(--ink); } .fld--hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; } .fld--consent label { display: flex; gap: .6rem; align-items: center; font-size: .86rem; letter-spacing: 0; text-transform: none; color: var(--soft); } /* drawn by hand instead of the native box: the OS one is painted from color-scheme, so on the coloured grounds it landed as a dark grey blob */ .fld--consent input { appearance: none; -webkit-appearance: none; width: 16px; height: 16px; flex: none; margin: 0; padding: 0; border: 1px solid var(--hair); border-radius: 3px; background: transparent; display: grid; place-content: center; cursor: pointer; transition: background .25s var(--ease), border-color .25s var(--ease); } .fld--consent input:hover { border-color: var(--soft); } .fld--consent input:checked { background: var(--ink); border-color: var(--ink); } .fld--consent input:checked::after { content: ''; width: 9px; height: 5px; margin-top: -2px; border-left: 2px solid var(--paper); border-bottom: 2px solid var(--paper); transform: rotate(-45deg); } .fld--consent input:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; } .submit { justify-self: start; font: inherit; font-weight: 600; font-size: .92rem; cursor: pointer; padding: .85rem 1.9rem; border-radius: 999px; border: 1px solid var(--ink); background: var(--ink); color: var(--paper); transition: background .35s var(--ease), color .35s var(--ease); } .submit:hover { background: transparent; color: var(--ink); } .submit[disabled] { opacity: .5; cursor: wait; } .doc__status { grid-column: 1 / -1; min-height: 1.3em; font-size: .9rem; font-weight: 500; color: var(--soft); } .doc__status.is-ok { color: var(--ink); } .doc__status.is-err { color: #C0392B; } @media (max-width: 860px) { .doc { grid-template-columns: 1fr; } .doc__form { grid-template-columns: 1fr; } } /* ---------------------------------------------------------------- footer */ .foot { display: flex; align-items: center; gap: 1.2rem 1.6rem; flex-wrap: wrap; max-width: var(--maxw); margin: 0 auto; padding: clamp(2.4rem, 5vh, 3.4rem) var(--gutter) clamp(3rem, 6vh, 4.2rem); border-top: 1px solid var(--hair); font-size: .82rem; color: var(--faint); } .mark--foot svg { width: 28px; } .foot__line { margin-right: auto; } .foot__social { display: flex; gap: .2rem; } .foot__social a { display: inline-flex; padding: .45rem; border-radius: 50%; color: var(--faint); transition: color .3s var(--ease); } .foot__social a:hover { color: var(--ink); } .foot__social svg { width: 17px; height: 17px; fill: currentColor; } @media (max-width: 560px) { .foot { flex-direction: column; align-items: flex-start; } .foot__line { margin-right: 0; } } /* ---------------------------------------------------------------- motion */ .will-rise { opacity: 0; transform: translateY(18px); } .risen { opacity: 1; transform: none; transition: opacity .9s var(--ease), transform .9s var(--ease); } @keyframes rise-in { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } } .hero > *:not(.mosaic):not(.hero__gl):not(.hero__film) { position: relative; z-index: 2; animation: rise-in .95s var(--ease) both; } .hero__text > * { animation: rise-in .95s var(--ease) both; } .hero__text > *:nth-child(2) { animation-delay: .1s; } .hero__text > *:nth-child(3) { animation-delay: .2s; } .hero > *:nth-child(2) { animation-delay: .08s; } .hero > *:nth-child(3) { animation-delay: .16s; } .hero > *:nth-child(4) { animation-delay: .24s; } .hero > *:nth-child(5) { animation-delay: .32s; } @media (prefers-reduced-motion: reduce) { .hero > * { animation: none; } .will-rise { opacity: 1; transform: none; } } /* ------------------------------------------------------- hero, on footage */ /* index-1a: the film IS the ground, and it is shown as shot — no petrol cast over it. The only veil is a neutral shade, kept to the side where the words sit, purely so white type keeps its contrast against a pale wall. */ .hero--video { grid-template-columns: 1fr; } .hero--video .hero__text { max-width: 44rem; } .hero__film { position: absolute; top: 0; bottom: 0; left: 50%; width: 100vw; transform: translateX(-50%); z-index: 0; pointer-events: none; opacity: 0; transition: opacity 1.4s var(--ease); will-change: opacity; } .hero__film.is-in { opacity: 1; } .hero__vid { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .hero__scrim { position: absolute; inset: 0; z-index: 1; background: linear-gradient(100deg, rgba(8,12,14,.5) 0%, rgba(8,12,14,.3) 38%, rgba(8,12,14,.06) 66%, rgba(8,12,14,0) 100%); } /* Portrait crops the frame hard: hold it on the plate — which sits right of centre — instead of the empty wall, and let the shade rise only under the copy, so the object stays clean in the top half. */ @media (max-width: 860px) { .hero__vid { object-position: 72% center; } .hero__scrim { background: linear-gradient(to bottom, rgba(8,12,14,.5) 0%, rgba(8,12,14,0) 25%, /* the mark needs its own shade */ rgba(8,12,14,0) 30%, rgba(8,12,14,.42) 46%, rgba(8,12,14,.62) 100%); } } /* On the film the call reads better the other way round: an outline that lets the footage through, filling in only when you reach for it. Scoped to the video hero so the other versions keep the solid pill they were signed off with. */ .hero--video .hero__go { background: transparent; color: var(--ink); } /* The pill in the corner starts as an outline on the orange, so nothing in the top bar competes with the film. Once you leave the hero it fills white — the header is fixed, so from there on it has to hold its own over the content. */ .page-film .masthead__nav a.nav-cta { background: transparent; color: var(--ink); border-color: var(--ink); } .page-film .masthead.is-stuck a.nav-cta { background: var(--ink); color: var(--paper); } .page-film .masthead.is-stuck a.nav-cta:hover { background: transparent; color: var(--ink); } .hero--video .hero__go:hover { background: var(--ink); color: var(--paper); } /* The film is tied to the scroll: it fades as the hero leaves, so what remains underneath is the ground colour, free to swing to the next section. */ /* On a phone the film version breathes differently: the payoff has to read big even though 8vw is small at 390px, the hero only needs to hold the copy — not a full screen of wall — and the form should be the next thing you meet, so the space above it comes down. Scoped to this page. */ @media (max-width: 640px) { .page-film .soulline { --h1: 3.6rem; } .page-film .hero { min-height: 40svh; } .page-film .doc { padding-top: 7rem; } /* the pill in the corner is redundant here: the hero's own call sits a thumb's width below it, and the film needs the top-right corner clear */ .page-film .masthead__nav { display: none; } /* and the stand line goes too: on a phone the hero is the payoff and the call, nothing else — the fair is already why they are here */ .page-film .cedia { display: none; } }