/* ═══════════════════════════════════════════════════════════ SCENE 09 — THE INVITATION THE LAST THING BEFORE THE FOOTER, AND IT SCROLLS. Four pinned screens, then the partners band, then this: one dark box on the paper that asks for the meeting. Nothing about it holds the page. ONE BOX, AND IT IS THE ONLY DARK THING ON THE PAGE AFTER THE FILM. The site is paper throughout — that is the whole register — so inverting a single panel at the end is the loudest thing available without introducing a colour, a photograph or a rule the page has not used already. It is also why the box has no corner radius: this is the one moment the page raises its voice, and a softened rectangle is a moment that apologises for itself. THE BUILDING BREAKS THE BOX. It is anchored to the right of the panel and rises clear of its top edge, so the tower is on the paper and in the dark at once. That overhang is the section's only idea and it does two things: it stops the box being a rectangle with words in it, and it puts the product — a building — in the frame at the exact moment the page asks for a site visit. IT COSTS THE SECTION ITS OVERFLOW. Everything above depends on the artwork escaping upward, so .ct cannot clip and the top padding has to carry the overhang. Both are load-bearing; see the notes. ═══════════════════════════════════════════════════════════ */ .ct { position: relative; /* ABOVE THE TRAVELLING PICTURE at z-index 5, like every section after the hero. */ z-index: 6; /* --page IS PAPER UNTIL THIS SECTION IS HALF UP THE SCREEN AND BLUE AFTER IT. One token, switched on by js/core/theme.js. The transition lives on the element that READS the token, because a custom property cannot itself be transitioned - only the properties resolved from it. */ background: var(--page); transition: background-color .9s var(--ease); /* THE TOP PADDING IS THE OVERHANG. The tower clears the box by --over, and that has to come out of this section's own space or it lands in the partners band above. Written as one sum so the two can never drift apart. */ /* Back to 11rem. Twenty put the tower half a screen above the box and the clearance it needed above the panel came straight out of the page. */ --over: 11rem; /* 2.5rem of real padding, not 9. The section used to open with the better part of a screen of blank paper: nine of its own plus the partners band closing on sixteen, and the overhang on top of both. The tower needs the clearance; the section does not. */ padding-block: calc(1.5rem + var(--over)) 7rem; /* NOT overflow:hidden. Every other section on this page clips — it is how the scenes crop their photographs — and copying that reflex here would cut the tower off at the box's top edge, which is the one thing the section is for. */ } .ct-box { grid-column: content; position: relative; /* NOT A GRID. The tower is out of flow, so a column reserved for it was reserving the wrong number: the artwork is sized by its HEIGHT and its width follows from the aspect, which the grid could not know. The copy is held to a measure instead and the tower is positioned against the panel. */ /* A FLOOR, BECAUSE THE TOWER IS SIZED OFF THIS BOX. The artwork takes its height from the panel, so a four-word headline would shrink the panel and the building with it — the composition would quietly get smaller every time the copy got tighter. */ /* Grid purely to centre the copy: the panel is taller than its text now, and left to flow the slack would all pile at the bottom. Centred, the extra height reads as the panel being generous rather than as the copy having run out. */ display: grid; align-content: center; /* 62rem, up from 44. The tower takes its height from this box, so the box is what has to grow for the building to — and a title that now sets on ONE line made the panel SHORTER, which would have quietly shrunk the artwork while it was meant to be getting bigger. */ min-height: 62rem; padding: 7rem; background: var(--ink); color: var(--paper); } /* THE INSET RULE, not a border on the box. A border sits on the panel's own edge, where it reads as a stroke somebody put around a rectangle; held in by two centimetres it reads as a margin ruled on a sheet, which is the language the monogram screen and the partners band are both already speaking. Gold, because it is the only place on a navy panel the brand can appear without becoming a coloured object. */ .ct-box::before { content: ''; position: absolute; inset: 1.8rem; z-index: 1; border: var(--hair) solid rgba(217, 179, 120, .22); pointer-events: none; } /* ── The copy ────────────────────────────────────────────── */ .ct-body { position: relative; z-index: 2; /* 66rem, NOT 52. The panel was leaving four hundred and fifty pixels of empty navy between the copy and the tower — not space, which is shaped, but a column that stopped early. The measure is wide here because there is a tower on the other side of it holding the line; .ct-note keeps its own narrower measure so the body text is still read at a sane length. */ max-width: 84rem; } .ct-eyebrow { display: flex; align-items: center; gap: 1.4rem; margin-bottom: 2.4rem; font-family: var(--font-sans); font-size: 1.2rem; font-weight: 500; letter-spacing: .28em; text-transform: uppercase; color: var(--gold); } .ct-eyebrow i { width: 3.4rem; height: var(--hair); background: currentColor; opacity: .55; } .ct-title { font-family: var(--font-sans); font-weight: 500; /* BIG, BECAUSE IT IS SHORT. At 5.2rem a four-word headline set one line across a third of the panel and left the middle empty — the box read as under-filled rather than as spacious. A short line can carry a much larger size, and the extra height it takes also grows the panel, which grows the tower with it. */ font-size: 7rem; line-height: 1.08; letter-spacing: -.026em; /* NO BALANCE. It equalises the lines rather than filling them, so a headline that ALMOST fits breaks into two short centred-looking lines with the right-hand half of the column empty. Left to fill, it uses the measure it has been given. */ } .ct-note { margin-top: 3rem; /* Wider than a book measure, and deliberately. It sat at 58rem and broke to three lines with the column still open to its right — the thing the panel was being pulled up on. At 68rem it sets in two, which is the shape this block wants: a display line, then a short paragraph under it, then the actions. */ max-width: 68rem; font-family: var(--font-sans); font-weight: 500; font-size: 1.65rem; line-height: 1.65; color: var(--on-dark); } /* ── The actions ───────────────────────────────────────── NO RULE ABOVE THEM ANY MORE. There was a hairline dividing the actions from the copy, and with a ground that moves behind it that is one line too many: the panel already carries an inset frame, and a second horizontal rule three centimetres inside it reads as scaffolding rather than as structure. Space does the same job and does not have to be drawn. */ .ct-actions { display: flex; align-items: center; gap: 3.2rem; flex-wrap: wrap; margin-top: 5rem; } /* The one line that is not a button. A number on a panel asking for a visit is worth more than a second button — some people will always rather ring — and set as a hover-line it stays quiet until it is wanted. */ .ct-call { font-family: var(--font-sans); font-size: 1.5rem; font-weight: 500; letter-spacing: .04em; color: var(--on-dark); transition: color .45s var(--ease-out); } .ct-call b { display: block; margin-bottom: .5rem; font-size: 1.1rem; font-weight: 500; letter-spacing: .24em; text-transform: uppercase; color: var(--on-dark-mute); } .ct-call:hover { color: var(--gold-lift); } /* ── The button, inverted ──────────────────────────────── WHITE BY DEFAULT ON THE DARK PANEL. .btn--solid is built for the paper page — ink fill, paper label — and dropped onto navy it became a dark pill on a dark ground held together by its own border. The white one it filled to on hover was the state that actually read; this makes that the resting state and gives the hover somewhere else to go. It is the header's arrangement exactly: paper fill, ink label, and the gold gradient wiping up from the bottom on hover. Two primary buttons on one page should not disagree about what a primary button looks like. The .on-dark rules in core.css set the same properties at the same weight, so these win on source order alone — cta.css is linked after core. Worth knowing before either is reordered. */ .ct .btn--solid { background: var(--paper); border-color: var(--paper); color: var(--ink); } .ct .btn--solid::before { background: var(--gold-grad); } .ct .btn--solid:hover { color: var(--ink); border-color: var(--gold); } /* ── The tower ─────────────────────────────────────────── ABSOLUTE, SO IT CAN LEAVE. In the grid it would stretch the row and the box would grow to fit the artwork instead of the artwork sitting in the box. Out of flow it is free to overrun the top edge by --over while the panel keeps the height its copy asked for. The copy never runs under it because .ct-body is held to its own measure — 52rem against a panel more than twice that — so the two are kept apart by the type, not by a reserved column. */ .ct-art { position: absolute; right: 6rem; bottom: 0; top: calc(-1 * var(--over)); /* WIDTH FOLLOWS THE HEIGHT, and that is the whole reason the overhang works. Given a fixed width the image was fitted to it and came out far shorter than the space it was in — it sat well inside the panel with the top of the box nowhere near it, which is to say it did not overhang at all. Sized by height it fills the box AND the overhang above it, and the aspect decides how wide that makes it. */ width: auto; max-width: 46%; z-index: 1; pointer-events: none; } .ct-art img { height: 100%; width: auto; max-width: 100%; /* CONTAIN AND BOTTOM. The replacement is a photograph on transparency at whatever crop the retoucher hands over; fitted by contain it can never be stretched, and anchored to the bottom it always stands ON the box's lower edge rather than floating at some height that depends on the file. */ object-fit: contain; object-position: bottom center; display: block; } /* ── The moving ground ─────────────────────────────────── THREE BLOOMS OF BLUE, DRIFTING. The panel was one flat navy, and flat is the right answer for a rectangle you read past — this one is meant to be arrived at. Colour that moves slowly enough not to be caught at it does what a static fill cannot: it makes the box feel lit rather than filled, and it gives the tower something to stand in front of. CLIPPED BY ITS OWN WRAPPER, NOT BY THE BOX. The obvious way to keep the blooms inside the panel is overflow:hidden on .ct-box — and that would crop the tower off at the top edge, which is the one thing this section exists to do. The blooms get their own clipping layer instead, so the artwork is still free to leave. TRANSFORMS, NOT BACKGROUND-POSITION. Animating a gradient's position repaints the whole panel every frame; moving three already-rasterised blobs is compositor work and costs the main thread nothing. It is also why the blur is on the element rather than in the gradient — a filtered layer is rasterised once. THREE, AND ALL DIFFERENT LENGTHS. 19, 26 and 22 seconds, none a multiple of another, so the arrangement never returns to a frame you have already seen and the movement cannot be counted. IT WAS TOO SLOW TO SEE. The first pass ran 34 to 46 seconds over a sixteen per cent drift, which on a shape already blurred by 90px is a few hundredths of a pixel between frames — running, and invisible. Roughly halving the durations and doubling the travel puts it where it was meant to be: you cannot catch it moving, but look away and back and the panel is a different colour. THE OPACITIES DRIFT TOO, and out of phase with the positions. Three blooms sliding at fixed strength move a pattern around; three that also fade against each other change the MIX, which is what reads as the colour itself shifting rather than as shapes travelling. */ .ct-glow { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; } .ct-glow i { position: absolute; display: block; width: 62%; aspect-ratio: 1; border-radius: 50%; filter: blur(90px); will-change: transform; } /* Deep blue, top right, behind where the tower stands — so the building is lit from its own side of the panel. */ .ct-glow i:nth-child(1) { top: -34%; right: -8%; background: #27508f; animation: ct-drift-a 19s var(--ease) infinite alternate, ct-fade-a 23s var(--ease) infinite alternate; } /* Steel, bottom left, under the copy. Cooler and weaker: it is there to stop the corner going dead, not to be seen. */ .ct-glow i:nth-child(2) { bottom: -40%; left: -12%; width: 74%; background: #1b426e; animation: ct-drift-b 26s var(--ease) infinite alternate, ct-fade-b 17s var(--ease) infinite alternate; } /* The lift, and it is barely there: a lighter blue through the middle so the panel is not darkest exactly where the copy sits. */ .ct-glow i:nth-child(3) { top: 22%; left: 30%; width: 52%; background: #3767a8; animation: ct-drift-c 22s var(--ease) infinite alternate, ct-fade-c 29s var(--ease) infinite alternate; } @keyframes ct-drift-a { from { transform: translate3d(0, 0, 0) scale(1); } to { transform: translate3d(-34%, 26%, 0) scale(1.34); } } @keyframes ct-drift-b { from { transform: translate3d(0, 0, 0) scale(1.18); } to { transform: translate3d(36%, -22%, 0) scale(1); } } @keyframes ct-drift-c { from { transform: translate3d(-14%, 0, 0) scale(1); } to { transform: translate3d(28%, 30%, 0) scale(1.42); } } @keyframes ct-fade-a { from { opacity: .62; } to { opacity: .20; } } @keyframes ct-fade-b { from { opacity: .22; } to { opacity: .60; } } @keyframes ct-fade-c { from { opacity: .14; } to { opacity: .50; } } /* Continuous ambient movement is squarely what the setting is asking not to have. The blooms stay exactly where they are — the panel keeps its colour and loses only the drift. */ @media (prefers-reduced-motion: reduce) { .ct-glow i { animation: none; } } /* ── The pre-JS state ──────────────────────────────────── Guarded on .has-gsap, so a browser without it shows the panel rather than hiding it for good. Released by .is-in the moment js/sections/cta.js takes over — see the note there on why the class goes on BEFORE the tween rather than after it. */ .has-gsap .ct:not(.is-in) .ct-box, .has-gsap .ct:not(.is-in) .ct-art, .has-gsap .ct:not(.is-in) [data-cta-item] { opacity: 0; } /* ── Responsive ──────────────────────────────────────────── */ @media (max-width: 1200px) { .ct-box { padding: 7.5rem 5.5rem; } .ct-title { font-size: 5.6rem; } .ct-art { right: 4rem; max-width: 42%; } } @media (max-width: 991px) { /* TABLET: NO TOWER AT ALL. There is no room for a column of type and a building side by side — the artwork crossed the copy, and a building you can read a paragraph through is an obstruction, not a background. Stacking it on top is the answer on a phone, but not here: at this width the tower is still wide enough to need most of a screen of height above the words, and the panel becomes a picture with a caption under it. HIDING IT COLLAPSES THE OVERHANG WITH IT, which is the real gain. --over exists for one reason — room for the artwork to rise above the panel — so with no artwork the section's top padding goes back to being ordinary padding instead of a screen of empty paper held open for nothing. */ .ct { --over: 0rem; padding-block: 7rem 6rem; } .ct-art { display: none; } /* The floor went too: it was holding the panel tall so the tower had something to take its height from. With no tower the box should be the size of what is in it. */ .ct-box { min-height: 0; align-content: start; padding: 6.5rem 4.5rem; } .ct-title { font-size: 4.6rem; } .ct-body { max-width: none; } .ct-note { max-width: 54rem; } } @media (max-width: 767px) { /* PHONE: IT COMES BACK, ON TOP. The panel is narrow enough now that a centred tower reads as the header of the block rather than as something competing with it — and there is nowhere else for it to go. It still breaks the top edge, so the section keeps the one gesture it was built around. The panel's top padding is the part of the tower that falls INSIDE it — its height less the overhang, plus a gap — so the copy starts below the artwork whatever either is set to. */ .ct { --over: 7rem; --art-h: 49rem; padding-block: calc(1rem + var(--over)) 4.5rem; } .ct-box { padding: calc(var(--art-h) - var(--over) + 3rem) 3rem 5rem; } .ct-box::before { inset: 1.2rem; } .ct-art { display: block; top: calc(-1 * var(--over)); bottom: auto; /* CENTRED BY AUTO MARGINS, NOT BY A TRANSFORM. translateX(-50%) is the usual way and cannot be used here: the entrance in js/sections/cta.js animates y, and GSAP writes the WHOLE transform when it does — the centring would be thrown away for the length of the tween and snap back when clearProps ran, so the tower would slide in half a width off-centre. Auto margins are layout; nothing the animation writes can disturb them. */ left: 0; right: 0; margin-inline: auto; width: max-content; height: var(--art-h); max-width: 92%; } .ct-art img { height: 100%; width: auto; } /* THE BUTTON LOSES ITS SHOULDERS. .btn--lg is sized for a desktop panel — 5.8rem tall on 2.8rem of side padding — and on a phone that is a pill nearly the width of the column with a short label marooned in the middle of it. The label is the same; the air around it is not. */ .ct .btn--lg { --h: 4.9rem; padding: 0 1.9rem; } .ct .btn--lg span:first-child { font-size: 1.15rem; } .ct-title { font-size: 3.6rem; } .ct-note { font-size: 1.55rem; margin-top: 2rem; } .ct-actions { margin-top: 3.6rem; gap: 2.2rem; } }