/* * Our colour, in the template's own tokens. * * Linked after main.css rather than imported with the overrides, because the * bundled stylesheet lands in before the linked ones and would lose * every one of these to the template's defaults. * * The template's accent is #002bba, a deep blue, and it sets white on top of * it. Ours is #C1FF72 — a pale volt green that white is illegible on. So this * is not a one-line swap: the accent changes and the ink that sits on it * changes with it, which is the pairing the product has used all along * (`bg-[#C1FF72] text-zinc-950`). */ :root, :root[color-scheme="light"], :root[color-scheme="dark"] { /* The brand green, in both schemes. It is light enough to work on either. */ --accent--light: #c1ff72; --accent--dark: #c1ff72; /* * What is written on the accent. * * White on volt is roughly 1.3:1 — invisible. Near-black is about 15:1 and * is what every accent surface in the product already uses. */ --pt-t-accent-bright: #09090b; --pt-t-accent-medium: #27272a; --pt-t-accent-muted: #3f3f46; } /* * The hero's sentence is a paragraph here, not a five-word statement. * * The template pairs a short name ("Solei") with one large line under it, so * neither has a width: the title block grows to whatever it holds and ran to * 2547px against a 1440 viewport. A five-word line never noticed. Our copy is * the sentence each medium page opens with, which simply ran off the screen. * * So the sentence gets a measure and a size of its own. The headline above it * keeps the template's scale, because that is the part of the design doing the * shouting. */ .mxd-hero-04__descr { max-width: min(86vw, 46ch); /* * Room under the headline. * * Measured, the sentence sat 8px below it on a wide screen — close enough * that the two read as one block and the headline lost its own weight. The * template never needed the gap because its hero name is one short word on * one line; ours is two lines of something very large. * * Padding rather than margin. The headline carries a `margin-bottom` of its * own — 23px on a phone — and adjacent vertical margins collapse to the * larger of the two, so a `margin-top` of 18px changed the gap by nothing * at all there. Padding is additive at every width. */ padding-top: 1.6rem; } .mxd-hero-04__descr p { font-size: clamp(15px, 1.45vw, 20px); line-height: 1.45; } /* * The headline stops where the rectangle starts. * * Only on the first slide, which is the only one with a rectangle, and only * at the width where that rectangle exists. Below 1200px there is none, and * holding the headline to 76% there cost it a line for nothing: at 390px * "Imagine it." broke after "Imagine". */ @media only screen and (min-width: 1200px) { .mxd-hero-04__slide:first-child .mxd-hero-04__title { max-width: 76%; } } /* * The headline sits on two lines, the way every medium page sets it. * * "Imagine it. / Make it." — /make/videos, /make/stories and /make/games all * break between the two halves, and the break is doing work: the accent half * is the payoff and wants its own line. The template's name is one short word * ("Solei"), so it never needed one. * * It also has to fit. On the first slide the rectangle takes the right fifth, * and a single line of this length ran underneath it — the words disappearing * behind the colour rather than stopping at it. */ .mxd-hero-04__name p span, .mxd-hero-04__name h1 span { /* `h1` as well as `p`: the first slide's headline is the page's one h1 and the other two are paragraphs, so a rule written for the template's markup alone missed the only slide that has a headline long enough to need the break. "Imagine it. Make it." ran on one line and the last two words went under the rectangle. */ display: block; } /* * The headline sits on a photograph, so it is set in white. * * The template's hero name takes the page ink, which is near-black, because * in the template this block carries a project title over art chosen to suit * it. Ours is a full-bleed picture that changes every few seconds, and * near-black on any of them was unreadable — measured on the plate this * replaced, the dark half of the headline sat on a pale sky and the volt half * sat on sunlit green. * * White with a soft shadow reads on all three, and the shadow is what makes * it survive a picture that turns out lighter than planned. */ .mxd-hero-04__name h1, .mxd-hero-04__name p { color: var(--nl-white, #ffffff); text-shadow: 0 2px 30px rgba(15, 15, 15, 0.45); } .mxd-hero-04__descr p, .mxd-hero-04__caption p { color: rgba(255, 255, 255, 0.92); text-shadow: 0 1px 18px rgba(15, 15, 15, 0.5); } /* * The scrim the block ships does almost nothing. * * `rgba(black, .4)` at `mix-blend-mode: soft-light` deepens the midtones a * little and leaves the highlights where they were, which is fine over the * template's own art and not enough under type. This puts a real gradient * under the words — heaviest at the bottom left, where the headline is, and * clear at the top right, where the picture is doing its work. */ .mxd-hero-04__cover { background-color: transparent; background-image: linear-gradient(to top, rgba(12, 12, 14, 0.82) 0%, rgba(12, 12, 14, 0.34) 38%, rgba(12, 12, 14, 0) 68%), linear-gradient(to right, rgba(12, 12, 14, 0.62) 0%, rgba(12, 12, 14, 0.12) 45%, rgba(12, 12, 14, 0) 72%); mix-blend-mode: normal; } /* * The plate: the picture and the rectangle as one moving thing. * * It fills the media box and carries GSAP's transform, so the rectangle scales * and drifts exactly as it would if it had been painted into the file — which * is what the template actually does. Bolted on outside, it stays pinned to * the slide while the picture parallaxes underneath, and the two come apart. */ /* * The slider track is as wide as it has slides. * * The block hardcodes `width: 300%` on the track and `flex: 1` on each slide, * because the template ships exactly three. Add a fourth and the four share * the same 300%: measured at a 1600px viewport, each slide came out 1200px * wide, so slide one showed with a quarter of slide two beside it and the * volt band landed in the middle of the screen. * * The count comes from the component, which is the only place that knows it. */ .mxd-hero-04__slides { width: calc(100% * var(--zc-hero-slides, 3)); } .zc-hero-plate { position: absolute; inset: 0; will-change: transform; } .zc-hero-plate > video, .zc-hero-plate > img { display: block; width: 100%; height: 100%; object-fit: cover; } /* * Wider than it looks. The plate stands at scale 1.25 and slides ±25% of the * viewport as you scroll, so a band cut to the width you want on screen walks * off the edge halfway through the transition. This one is cut to survive the * travel; the media box clips the rest. */ .zc-hero-band { position: absolute; top: -10%; right: -6%; bottom: -10%; /* * Cut so its edge lands under the start of "Get started" in the header. * * Not a flat percentage: the header's controls sit a fixed distance in from * the right, so that word moves 40px further out between a 1440 and a 1920 * window while a percentage band moves 120px. At 38% it overshot the word by * 61px on a wide screen and fell 31px short on a narrow one. * * The plate stands at scale 1.25 about its centre, and the algebra falls out * neatly: the band's left edge lands at `viewport - 1.25 x (the fixed part)`, * whatever the viewport. So 336px puts it 420px in from the right at every * width, and the middle of the rectangle is always 210px in. */ width: calc(16% + 336px); background-color: var(--accent); } /* * The picture slides left inside its own plate, so the subject clears the band. * * object-position could not do this. The source is 1920x1200 against a box of * roughly 1440x950, so `cover` only has about 80px of horizontal slack to pan * within — and the character needed about twice that to get out from under the * band's edge, where she was being cut down the middle. * * Widening the picture and pulling it left moves the content properly. It * leaves the right of the plate bare, which costs nothing: that is exactly the * strip the band is sitting on. */ .mxd-hero-04__slide:first-child .zc-hero-plate > video, .mxd-hero-04__slide:first-child .zc-hero-plate > img { /* * A transform, because width will not do it. * * `width: 118%` was ignored, and so were left/right offsets: a video is a * replaced element, and for an absolutely positioned one the spec resolves * `width: auto` from the intrinsic size and drops `right` as * over-constrained. It stayed 1440 either way. A transform has no such * argument with the layout. * * Scaled up so the crop has something to take from, then pushed left so the * character clears the band's edge instead of being cut down the middle. The * bare strip it leaves on the right is exactly where the band sits. */ transform: scale(1.12) translateX(-14%); /* Anchored right so the zoom grows leftward. Scaling from the centre pushed everything right of it further right — the character moved *towards* the band as the picture got bigger, which is the opposite of the intent. */ transform-origin: right center; } /* * Everything on the right sits in the middle of the rectangle. * * The header's buttons, the scroll prompt and the arrow were each positioned * against the edge of the screen, which is where the template put them because * the template has nothing there to line up with. With a rectangle behind them * they need to line up with it, or they read as three things that happen to be * near each other. * * Fixed offsets rather than percentages, because all four of these are pinned a * constant distance from the right edge — the rectangle by the algebra above, * the rest by their own padding — so the gaps do not change with the viewport. * * Only where there is a rectangle. Written unbounded these reached the phone, * where the burger ended up 27px from the right edge against the logo's 30px * on the left: three pixels of disagreement in aid of a band that is not on * screen. Below 1200 the template's own insets are right and are left alone. */ @media (min-width: 1200px) { .mxd-header__controls { transform: translateX(73px); } .mxd-menu__contain { /* The burger is fixed and is not in the header's flow, so it moves by the same amount separately or the cluster comes apart. */ right: 27px; } } .mxd-hero-04__right { transform: translateX(-8px); } .mxd-hero-04__arrow { transform: translateX(-3px); } /* * Bounded at both ends, not just the top. * * Everything in here exists to line the header up with the volt band, and * the band stops below 1200px. Left open at the bottom it reached the phone * too, which is how the burger came to sit 20px from the right edge there * while the logo sat 30px from the left — the two ends of the header not * agreeing, for the sake of a rectangle that is not on screen. */ @media (min-width: 1200px) and (max-width: 1599px) { /* * The same centring, corrected for a narrower window. * * The rectangle holds its 420px at every width — that is the algebra above — * but the template's own paddings do not: the hero controls and the header * both tuck in closer to the edge below 1600px, so the three groups drifted * 20 to 53px right of the middle. Measured at 1440 and taken back out. */ .mxd-header__controls { transform: translateX(53px); } .mxd-menu__contain { /* * 20px, not 47. * * The controls' shift and the burger's inset were tuned separately and * together they met: measured at every width from 1200 to 1599 the gap * between the end of "Get started" and the start of the burger was * exactly -5px, with the top bar crossing the D. Moving the icon out * rather than pulling the caption in, because the caption is the thing * being centred on the band and the icon is not. The gap is 22px now, * against 35px above 1600. */ right: 20px; } .mxd-hero-04__right { transform: translateX(-48px); } .mxd-hero-04__arrow { transform: translateX(-56px); } } @media (max-width: 1199px) { /* * No rectangle below 1200px, and nothing shifted towards one. * * The band's width has a fixed 336px term, which the algebra above needs so * its edge lands under "Get started" at any width. What that does not * survive is a narrow window: the effective width is 420px at every size, * so the band is 26% of a 1600px screen, 41% of a 1024px one and most of a * phone. Measured at 1024 it ran from 604 to the right edge and left the * scroll cue floating in the middle of an empty green field. * * The shifts go with it. They exist to centre the header controls and the * cue on the band; with no band they only pushed "Get started" into the * burger, which is what it was doing at 1024. */ .zc-hero-band { display: none; } .mxd-header__controls, .mxd-hero-04__right, .mxd-hero-04__arrow { transform: none; } .mxd-hero-04__slide:first-child .zc-hero-plate > video, .mxd-hero-04__slide:first-child .zc-hero-plate > img { transform: none; } } /* * The burger goes back to the corner on a phone. * * It was pinned 100px in from the right edge, which put it in the middle of * the header with a hand's width of empty space beyond it — measured at 390, * 430 and 360, always 100px from the edge while the logo sat 30px from the * other one. The two ends of the header did not agree. * * That value came from an older layout and was never right here. The * template's own base is `right: 3rem`, which mirrors the logo's inset * exactly, so the override is simply gone rather than replaced. */ /* * The parallax divider shows one of ours. * * Its picture comes from a background on `.divider-image-4`, not from the * component — which is why it kept 404ing after every other asset had been * swapped: there was nothing in the JSX to change. The theme does ship the * file; it is just somebody else's photograph of somebody else's work. */ .mxd-divider__image.divider-image-4 { background-image: url("/marketing/home/closing.jpg"); } /* * The audience card's colour and its cut-out. * * The template's niche card is a flat page-tint panel with a photograph in * it. Ours is the audience's own wash — the three stops the live site paints * that card with — and the picture is the cut-out its page leads with, which * is drawn to its own edges and cannot be cropped to fill a box. */ #audiences .zc-niche { background-image: linear-gradient( to bottom right, var(--zc-tint-from, #f4f4f5), var(--zc-tint-via, #fafafa), var(--zc-tint-to, #f4f4f5) ); /* The whole card is an anchor now, and an anchor brings its own ink. */ color: inherit; text-decoration: none; } @media only screen and (min-width: 1200px) { /* * `absolute-desktop-full` covers the panel, which crops whatever it is * given. That is right for a photograph of an office and wrong for a person * cut out of one: it took the top off their head. Contained and set to the * corner, the figure stands in the right of the card with the words clear * on the left. */ #audiences .zc-niche__image.absolute-desktop-full img { object-fit: contain; object-position: right bottom; } } @media only screen and (min-width: 1200px) { /* * The thumbnail at the template's size, kept inside the panel. * * It hangs it off the right edge at `right: -8rem` and lets the panel clip * what overflows, which reads as an illustration carrying on past the * frame. Ours is a person, and the frame was taking their arm off — so the * width the template gives it stands, and only the offset changes. */ #audiences .zc-niche__image.absolute-desktop-aside { right: 1.5rem; bottom: 0; /* * The figure, not the box around it. The template keeps 3rem of padding * each side of this slot, so a 200px slot drew a 140px person; with the * padding gone the width declared here is the width that shows. */ padding: 0; width: 200px; } /* * The template's height as a floor, not a ceiling. * * `fixed-height-desktop` is an exact 420px, and at the narrow end of the * desktop range the measure left beside the thumbnail is about 170px, which * is enough lines to run off the bottom of that. Everything above 1400px * still comes out at exactly the height the template sets. */ #audiences .zc-niche--aside.fixed-height-desktop { /* 100%, not auto: the two of these sit side by side and a panel that stops at its own content no longer matches the one next to it. */ height: 100%; min-height: 420px; } /* * And the sentence keeps out of its way. * * The template gives this card's description 300px, which works when most * of the thumbnail is outside the panel. Held inside, it stands where those * last two lines were, so the measure narrows to what is left beside it. */ #audiences .zc-niche--aside .mxd-niche-cards__descr.short { max-width: 125px; } } @media only screen and (min-width: 1600px) { #audiences .zc-niche__image.absolute-desktop-aside { width: 260px; } #audiences .zc-niche--aside.fixed-height-desktop { min-height: 500px; } #audiences .zc-niche--aside .mxd-niche-cards__descr.short { max-width: 150px; } } @media only screen and (min-width: 1200px) { /* * The teacher, a little further in. * * Her cut-out carries the water cycle she has just made off to her right, * so the figure herself sits left of centre in the file and reads as * further from the words than the others do. The sentence gives up the * width the picture takes. */ #audiences .zc-niche--teachers .zc-niche__image.absolute-desktop-aside { right: 3.5rem; } #audiences .zc-niche--teachers .mxd-niche-cards__descr.short { max-width: 105px; } } @media only screen and (min-width: 1600px) { #audiences .zc-niche--teachers .mxd-niche-cards__descr.short { max-width: 130px; } } /* * The clip fills the tile the template sized. * * `.marquee__item.item-imageblock` is 200px wide and 300px from 768 up, and * `.marquee__image img` is `width: 100%; height: auto`. A