/* ============================================================ PAGE TWO, MACCA'S PICKS FOLDED IN. 29 Jul. The base is the original page two. Five sections keep exactly what they had, four take the structure off a concept, and the whole thing is held together by one kicker, one heading scale and one section rhythm so the changes of alignment read as a deliberate rhythm rather than four different pages stapled together. hero original nameplate, plate over the shopfront 01 founders original split, story left, film right 02 why REVL original, photograph with the plate over it 03 partnership original split, pillars left, Academy film right 04 numbers concept 05, centred 05 voices concept 01, three across, unboxed 06 territory concept 05, centred, opened on their own state 07 launch original track <-- ASSUMED, pick unclear 08 book a call original, calendar on the photo 09 questions concept 05, centred One stylesheet drives both the scroller and the deck, so the two options can only differ in how you move through them. ============================================================ */ body.pk{ --measure:1180px; --pad:clamp(74px,9.5vh,124px); } /* ---------- the cohesive frame ---------- */ .pk .kick{ margin-bottom:20px; font-size:10.5px; letter-spacing:.3em; } .pk .kick .ch{ font-family:'Acier',sans-serif; font-size:12px; color:var(--beige); font-weight:400; } .pk h2.hl{ font-size:clamp(28px,3.9vw,52px); line-height:1.0; } .pk .p{ margin-top:20px; font-size:clamp(14.5px,1.35vw,17.5px); line-height:1.65; max-width:56ch; } /* THE RULE, Macca 29 Jul: if a section is not two sided, it is centred. Two sided means a genuine left and right column (founders, the partnership). Everything else hangs off the centre axis, which is what stops the page reading as a pile of differently aligned slabs. Book a call came OFF the centre axis on 30 Jul (Macca): the four things the call covers on the left and the calendar on the right is a genuine left and right, so by the same rule it splits. */ .pk [data-type="sheet"], .pk [data-type="incl"], .pk [data-type="territory"], .pk [data-type="faq"], .pk [data-type="voices"], .pk [data-type="path"]{ text-align:center; } .pk [data-type="sheet"] .head, .pk [data-type="incl"] .head, .pk [data-type="territory"] .head, .pk [data-type="faq"] .head, .pk [data-type="voices"] .head, .pk [data-type="path"] .head{ display:flex; flex-direction:column; align-items:center; } .pk [data-type="sheet"] .kick, .pk [data-type="incl"] .kick, .pk [data-type="territory"] .kick, .pk [data-type="faq"] .kick, .pk [data-type="voices"] .kick, .pk [data-type="path"] .kick{ justify-content:center; } .pk [data-type="sheet"] .p, .pk [data-type="incl"] .p, .pk [data-type="territory"] .p, .pk [data-type="faq"] .p, .pk [data-type="voices"] .p, .pk [data-type="path"] .p{ margin-inline:auto; text-align:center; } .pk [data-type="sheet"] h2.hl, .pk [data-type="incl"] h2.hl, .pk [data-type="territory"] h2.hl, .pk [data-type="faq"] h2.hl, .pk [data-type="voices"] h2.hl, .pk [data-type="path"] h2.hl{ max-width:20ch; } /* ---------- 04 WHAT YOU GET. The anchor (E), Macca 30 Jul. One studio photograph holding the section down, the six numbered beside it. The heading stays on the centre axis and the split happens underneath it, which is exactly what Macca picked off the compare sheet, so all three designs carry the same composition here. ---------- */ .pk [data-type="incl"] .incl{ margin-top:0; } .pk [data-type="incl"] .body{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,3.8vw,56px); align-items:center; margin-top:clamp(34px,4.2vw,52px); } /* Shorter than it was (Macca 30 Jul). It still reads as an upright anchor, but at 4:4.2 it stood 591px against a 367px list and overhung it by more than half the list's own height. */ .pk .wg-anchor{ position:relative; overflow:hidden; border:1px solid var(--line); aspect-ratio:4/3.7; background:var(--black); } .pk .wg-anchor img{ width:100%; height:100%; object-fit:cover; filter:grayscale(1) contrast(1.06) brightness(.6); } .pk [data-type="incl"] .incl-grid{ grid-template-columns:1fr; gap:0; max-width:none; margin-inline:0; counter-reset:wg; } .pk [data-type="incl"] .incitem{ counter-increment:wg; display:grid; grid-template-columns:auto 1fr; align-items:baseline; gap:16px; text-align:left; padding:clamp(13px,1.6vw,19px) 0; border-bottom:1px solid var(--line2); font-family:'Acier',sans-serif; text-transform:uppercase; color:var(--white); font-size:clamp(14px,1.55vw,20px); line-height:1.1; } .pk [data-type="incl"] .incitem:first-child{ border-top:1px solid var(--line2); } .pk [data-type="incl"] .incitem::before{ content:counter(wg,decimal-leading-zero); font-size:11px; color:var(--beige); letter-spacing:.06em; } /* ---------- HERO. Original nameplate. ---------- */ /* the plate sits higher up the shopfront than it did: it carries four figures now, and bottom-anchoring it that low left it sitting on the fold */ .pk .s-hero{ min-height:90svh; justify-content:flex-end; padding-bottom:clamp(84px,13vh,150px); } .pk .s-hero .scrimbg{ background: linear-gradient(180deg, rgba(10,10,10,.52) 0%, rgba(10,10,10,.34) 40%, rgba(10,10,10,.95) 100%); } .pk .s-hero .inr{ display:flex; flex-direction:column; align-items:center; text-align:center; } .pk .s-hero .eyebrow{ margin-bottom:26px; } /* the same weight of black as 02's plate (Macca 30 Jul): .5 let the shopfront through so strongly that the figures had nothing to sit on */ .pk .plate{ border:1px solid rgba(255,255,255,.5); background:rgba(10,10,10,.9); padding:clamp(24px,3.4vw,40px) clamp(26px,4.6vw,64px); max-width:100%; width:auto; } .pk .plate h1.hl{ font-size:clamp(26px,5.2vw,66px); line-height:1; letter-spacing:.02em; margin-bottom:0; } /* The wordmark stands in for the heading inside the plate. margin:auto on the h1 does nothing (a block heading is already full width): it is the IMAGE that has to centre itself, because a display:block image ignores the text-align around it and sits hard left. */ .pk .plate h1.np-mark{ line-height:0; } .pk .plate h1.np-mark img{ display:block; margin-inline:auto; width:clamp(126px,17vw,224px); height:auto; } .pk .np-figs{ display:flex; flex-wrap:wrap; justify-content:center; margin-top:26px; background:none; border:0; gap:0; } .pk .np-figs .fig{ background:none; padding:0 clamp(11px,1.9vw,26px); text-align:center; } .pk .np-figs .fig + .fig{ border-left:1px solid rgba(255,255,255,.28); } .pk .np-figs .fv{ font-size:clamp(19px,2.5vw,30px); font-variant-numeric:tabular-nums; } .pk .np-figs .fl{ margin-top:9px; font-size:9.5px; letter-spacing:.16em; } .pk .grow{ margin-top:28px; font-family:'Acier',sans-serif; text-transform:uppercase; color:var(--white); font-size:clamp(15px,1.9vw,23px); line-height:1.15; letter-spacing:.01em; text-wrap:balance; } /* Only the FIRST rule takes the gap above it. Putting the margin on both left the name sitting 14px under the top line and 40px above the bottom one, which is what read as off centre between them. */ .pk .rule{ background:rgba(255,255,255,.28); margin:0; } .pk .figs-plate + .rule, .pk .grow + .rule{ margin-top:26px; } .pk .who{ padding:14px 0; flex-direction:column; align-items:center; gap:2px; justify-content:center; } .pk .wn{ font-family:'Manrope',sans-serif; font-size:11.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--white); font-weight:700; line-height:1.6; } .pk .wr{ font-size:10px; letter-spacing:.2em; color:var(--chalk); opacity:.85; } .pk .caveat{ margin-top:16px; font-size:10.5px; color:var(--grey); font-style:italic; opacity:.85; text-align:center; } .pk .s-hero .sub{ margin-top:18px; font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--chalk); font-weight:400; line-height:1.9; max-width:min(100%,660px); text-wrap:pretty; } .pk .s-hero .scroll-cue{ margin-top:16px; } /* the hero ends on near black, so 01 does not need a full pad on top of it. The bottom is the opposite: 02 opens on a photograph, and the founders needed clear air before it rather than running straight into the frame. */ /* 40px more again on this one (Macca 30 Jul). It needs more than the directory does: there is no index down the side holding the eye, so the hero has nothing to hand over to and the gap has to do that work. */ .pk [data-sec="founders"]{ padding-top:clamp(120px,14.45vh,180px); padding-bottom:clamp(112px,14vh,178px); } /* ---------- 01 FOUNDERS. Original split. The heading and the story sit in the left column with the three facts under them, and the film sits beside the lot and centres against it. The renderer moves the head into the column (foundersSplit). ---------- */ .pk [data-type="founders"] .body{ margin-top:0; } /* the film finishes level with the three fact boxes beside it, so the two columns land together (Macca 30 Jul). The media carries its own align-self, and self beats items, so both have to say end. */ .pk [data-type="founders"] .duo{ grid-template-columns:1fr 1.06fr; gap:clamp(28px,4vw,54px); align-items:end; } .pk [data-type="founders"] .col-a{ display:flex; flex-direction:column; } .pk [data-type="founders"] .facts{ margin-top:clamp(26px,3vw,38px); grid-template-columns:repeat(3,1fr); } .pk .fact{ display:block; padding:16px 18px; } .pk .fact .k{ font-size:10px; letter-spacing:.18em; color:var(--grey); } .pk .fact .v{ font-size:13px; color:var(--off); margin-top:7px; line-height:1.4; text-align:left; } .pk [data-type="founders"] .media{ align-self:end; width:100%; } .pk [data-type="founders"] .media .video-ph{ margin-top:0; } /* ---------- 02 WHY REVL. The photograph, then the plate over it. ---------- */ .pk [data-type="why"] .fr{ position:relative; overflow:hidden; border:1px solid var(--line); aspect-ratio:16/6.4; background:var(--black); } .pk [data-type="why"] .fr img{ width:100%; height:100%; object-fit:cover; filter:grayscale(1) contrast(1.05) brightness(.8); } /* the vignette is what keeps the frame from ending on a hard edge */ .pk [data-type="why"] .fr .vg{ position:absolute; inset:0; background: linear-gradient(180deg, rgba(10,10,10,.5) 0%, rgba(10,10,10,0) 24%, rgba(10,10,10,0) 58%, rgba(10,10,10,.7) 100%), linear-gradient(90deg, rgba(10,10,10,.42) 0%, rgba(10,10,10,0) 16%, rgba(10,10,10,0) 84%, rgba(10,10,10,.42) 100%); } .pk .why-plate{ position:relative; z-index:2; width:min(100%,900px); margin:-150px auto 0; background:var(--black); border:1px solid rgba(255,255,255,.4); padding:clamp(26px,3.2vw,42px); text-align:center; } .pk .why-plate .head{ display:flex; flex-direction:column; align-items:center; } .pk .why-plate .kick{ justify-content:center; } .pk .why-plate h2.hl{ font-size:clamp(26px,3.9vw,54px); max-width:none; } .pk .why-plate .p{ margin:20px auto 0; max-width:52ch; text-align:center; } .pk .why-plate .body{ margin-top:26px; } .pk [data-type="why"] .rows-2{ text-align:left; } .pk [data-type="why"] .row{ padding:19px; } .pk [data-type="why"] .rh{ font-size:clamp(13px,1.25vw,15.5px); line-height:1.2; } .pk [data-type="why"] .rd{ font-size:12.5px; } .pk [data-type="why"] .pull{ margin-top:28px; } /* ---------- 03 PARTNERSHIP. Original split. ---------- */ .pk [data-type="support"] .duo{ grid-template-columns:1fr 1fr; gap:30px; align-items:stretch; } .pk [data-type="support"] .rows{ background:none; border:0; grid-template-columns:1fr; gap:14px; } .pk [data-type="support"] .row{ background:none; border:1px solid var(--line); border-radius:6px; padding:17px 19px; } .pk [data-type="support"] .rh{ font-size:18px; line-height:1; } .pk [data-type="support"] .rd{ font-size:12.5px; margin-top:8px; } .pk [data-type="support"] .media .video-ph{ margin-top:0; aspect-ratio:auto; min-height:340px; height:100%; } /* What building a REVL includes lives here now: it is what the partnership actually hands over, so it sits under the four teams rather than under a price. Left aligned, because this section is two sided. */ .pk [data-type="support"] .incl{ margin-top:clamp(30px,3.6vw,44px); } .pk [data-type="support"] .incl-t{ text-align:left; } .pk [data-type="support"] .incl-grid{ grid-template-columns:repeat(3,1fr); background:var(--line2); border:1px solid var(--line2); gap:1px; max-width:none; margin-inline:0; } .pk [data-type="support"] .incitem{ background:var(--black); padding:15px 17px; border-bottom:0; text-align:left; } /* ---------- 04 KEY NUMBERS. Concept 05, centred. Just the term sheet and the caveat under it now. What building a REVL includes moved to the partnership on 30 Jul. ---------- */ .pk [data-type="sheet"] .terms{ max-width:760px; margin-inline:auto; width:100%; text-align:left; border-top:1px solid var(--line); } .pk [data-type="sheet"] .flagline{ margin-top:16px; } .pk .tv{ font-size:clamp(19px,2.3vw,29px); } .pk .incl{ margin-top:38px; } .pk .incl-t{ text-align:center; } .pk .incl-grid{ background:none; border:0; gap:0 clamp(20px,2.6vw,38px); max-width:860px; margin-inline:auto; } .pk .incitem{ background:none; padding:12px 0; text-align:left; border-bottom:1px solid var(--line2); } .pk [data-type="sheet"] .flagline{ max-width:58ch; margin-inline:auto; text-align:center; } /* ---------- 05 FROM THE NETWORK. Concept 01, three across, unboxed. ---------- */ .pk .voices{ grid-template-columns:repeat(3,1fr); gap:clamp(18px,2.6vw,32px); } .pk .vp{ aspect-ratio:1/1; } .pk .vq{ margin-top:18px; font-size:14px; line-height:1.6; font-weight:300; } /* the owners' names carry the quote, so they read as names rather than as a caption: white and bold instead of beige and light (Macca 30 Jul) */ .pk .vn{ margin-top:14px; font-size:11px; letter-spacing:.16em; color:var(--white); font-weight:700; } /* ---------- 06 WHERE YOU COULD BUILD. Concept 05, centred. The explorer is a real drill-down that state.js opens on the state they picked on page one, so the layout has to hold a left aligned component inside a centred section. It is capped and centred as a block, and the component keeps its own alignment. ---------- */ .pk [data-type="territory"] #tx-root{ max-width:1000px; margin-inline:auto; text-align:left; } .pk [data-type="territory"] .tx-crumb{ justify-content:center; } .pk [data-type="territory"] .body{ margin-top:clamp(30px,3.6vw,44px); } /* the grid was a fixed four columns, so three areas sat over on the left. Sized columns that centre themselves keep any number of them on the axis. */ .pk [data-type="territory"] .tx-grid{ grid-template-columns:repeat(auto-fit,minmax(196px,232px)); justify-content:center; } .pk [data-type="territory"] .tx-list{ align-items:stretch; } .pk [data-type="territory"] .tx-flag{ text-align:center; max-width:74ch; margin-inline:auto; } /* the explorer is a component with its own frame, so without extra air above and below it read as part of whatever it happened to sit between rather than as its own section */ .pk [data-sec="opportunity"]{ padding-block:clamp(116px,14.5vh,186px); } /* ---------- 07 HOW YOU LAUNCH. Original track, on the centre axis. The six stages read left to right, so the track itself stays a row; it is the section around it that centres, and the row is capped and centred as a block. ---------- */ .pk .track{ background:none; border:0; gap:0; grid-template-columns:repeat(6,1fr); position:relative; margin-top:14px; max-width:1060px; margin-inline:auto; } .pk .track::before{ content:''; position:absolute; top:6px; left:6.5px; width:calc(500% / 6); height:1px; background:var(--line); } .pk .node{ background:none; padding:0 18px 0 0; text-align:left; } .pk .node .dot{ width:13px; height:13px; border-radius:50%; border:1px solid var(--beige); background:var(--black); position:relative; z-index:2; margin-bottom:18px; } .pk .node.first .dot{ background:rgba(204,203,188,.4); } .pk .nw{ font-size:10px; letter-spacing:.12em; color:var(--beige); } .pk .nt{ font-family:'Manrope',sans-serif; text-transform:none; font-weight:600; font-size:13.5px; color:var(--white); margin:8px 0 6px; line-height:1.2; } .pk .nd{ font-size:11.5px; color:var(--grey); line-height:1.45; } /* the track is the last thing in 07 and 08 opens on a photograph, so the stages need room under them before the join */ .pk [data-sec="path"]{ padding-bottom:clamp(116px,14.5vh,186px); } /* ---------- 08 BOOK A CALL. Two sided, on the rack wall. The heading, the lead and the four things the call covers run down the left, the calendar sits beside them on the right. The renderer moves the head into the left column (bookSplit), the same way 01 works. ---------- */ .pk [data-sec="book"]{ padding-top:clamp(126px,15.5vh,196px); } /* The left column sizes to its own content and the calendar sits straight after it, rather than the calendar being pinned to the far right of the measure with 200px of nothing in between (Macca 30 Jul). The four boxes finish where "Pick a time that suits." finishes, because the heading is what sets the column's width. Starts at the gutter, not centred: every other section on this page begins on that same left edge. */ .pk [data-type="book"] .duo{ grid-template-columns:auto 470px; justify-content:start; gap:clamp(42px,5.8vw,86px); align-items:center; justify-items:stretch; } .pk [data-type="book"] .col-a{ display:flex; flex-direction:column; } .pk [data-type="book"] .col-a, .pk [data-type="book"] .col-b{ width:100%; } .pk [data-type="book"] .head{ margin-bottom:clamp(26px,3.2vw,40px); } /* narrow enough that "no hard sell." keeps together on the second line rather than "hard sell." being stranded there on its own, which is the same fix the deck needed */ .pk [data-type="book"] .p{ max-width:40ch; } .pk .expect{ margin-top:0; max-width:none; margin-inline:0; grid-template-columns:1fr; } /* Ticks back in (Macca 30 Jul). They came out earlier the same day and went straight back: the four lines are things the call gives you, and the mark is what says so. */ .pk .bxi{ display:flex; gap:13px; align-items:flex-start; font-size:13.5px; padding:15px 18px; text-align:left; } .pk .bxi::before{ content:''; flex:0 0 auto; width:5px; height:10px; margin-top:4px; border-right:1px solid var(--beige); border-bottom:1px solid var(--beige); transform:rotate(45deg); } .pk .bk-inline{ max-width:none; margin-inline:0; text-align:left; } /* the rack wall is calm and dark, so the scrim can be lighter than the others and the room still shows through behind the panel. The first layer carries a little of 07's flat page black across the top so the join with How you launch softens instead of landing as a seam. */ .pk [data-type="book"] .scrimbg{ background: linear-gradient(180deg, var(--black) 0%, rgba(10,10,10,.88) 9%, rgba(10,10,10,0) 26%), linear-gradient(180deg, rgba(10,10,10,.72) 0%, rgba(10,10,10,.6) 45%, rgba(10,10,10,.92) 100%); } /* ---------- 09 THE BUSINESS QUESTIONS. Concept 05, centred. ---------- */ .pk [data-type="faq"] .qdeck{ text-align:left; max-width:860px; margin-inline:auto; gap:0; border-top:1px solid var(--line2); } .pk .qcard{ border:0; border-bottom:1px solid var(--line2); border-radius:0; background:none; } .pk .qcard.open{ background:none; } /* ---------- the deck option ---------- Same designs, moved across a window at a time. Only the things that have to change to live in a fixed window change. */ /* Every slide sits in the middle of its window, hero included. Pinned to the top, ten of the eleven carried between 200px and 416px of dead space along the bottom, which is what made the deck read as a scroll page chopped into windows rather than as slides. `safe center` and not plain `center`: on a slide whose content is taller than the window, plain centring pushes the first line above the scroll origin where it can never be reached. safe falls back to start exactly then, and only then. */ .pk.is-deck .slide .s{ justify-content:safe center; padding:clamp(70px,8.4vh,94px) var(--gut) clamp(24px,3.2vh,38px); } .pk.is-deck .slide .s-hero{ justify-content:safe center; } /* Slide one. The eyebrow was landing on the white banner painted across the shopfront behind it, so the whole group drops a touch to clear the line. A relative nudge rather than padding, because padding on a centred slide only moves the content half as far as you asked for. */ .pk.is-deck .s-hero .inr{ position:relative; top:14px; } /* and the scroll cue goes: it points down, and a deck goes across */ .pk.is-deck .s-hero .scroll-cue{ display:none; } .pk.is-deck .s-hero{ min-height:0; } .pk.is-deck [data-sec="founders"]{ padding-top:clamp(70px,8.4vh,94px); } /* Sizing, now that the slides centre. Ten of the eleven were using barely two thirds of their window, so the type comes up to fill it. Voices is the exception, the one slide that was already close to full, so it keeps the smaller heading and is the reason the bump is not blanket. */ .pk.is-deck h2.hl{ font-size:clamp(31px,4.3vw,58px); } .pk.is-deck [data-type="voices"] h2.hl{ font-size:clamp(28px,3.9vw,52px); } .pk.is-deck .p{ font-size:clamp(15px,1.45vw,19px); } .pk.is-deck .kick{ margin-bottom:24px; font-size:11px; } /* the launch track is the emptiest slide of the eleven */ .pk.is-deck .nt{ font-size:15px; } .pk.is-deck .nd{ font-size:12.5px; } .pk.is-deck .nw{ font-size:10.5px; } .pk.is-deck .node .dot{ width:14px; height:14px; } .pk.is-deck [data-type="support"] .media .video-ph{ min-height:0; } /* Slide two: the film's BOTTOM edge lines up with the bottom of the three fact boxes beside it, so the two columns finish together. align-items on the row is not enough on its own: the media column carries its own align-self:center from the scroller, and self beats items. */ .pk.is-deck [data-type="founders"] .duo{ align-items:end; } .pk.is-deck [data-type="founders"] .media{ align-self:end; } /* the four teams sit level with the middle of the Academy film rather than starting at its top edge, so the film reads as centred in the slide */ .pk.is-deck [data-type="support"] .duo{ align-items:center; } /* and the film rides above that centre line */ .pk.is-deck [data-type="support"] .media{ position:relative; top:-38px; } /* The rules under each team stop just past the longest description rather than running the full width of the column, and they all stop in the same place. Longest line measures 473px, so 500px clears it by a word. */ .pk.is-deck [data-type="support"] .rows{ max-width:500px; } /* the emptiest slide of the eleven, so the track gets room around it rather than sitting as a thin band in the middle of a black window */ .pk.is-deck .track{ margin-top:26px; } /* 24px here cost the first column enough width to wrap "Connect and discover" onto two lines while the other five stayed on one */ .pk.is-deck .node{ padding-right:10px; } .pk.is-deck .node .dot{ margin-bottom:22px; } .pk.is-deck [data-type="path"] .body{ margin-top:clamp(30px,4vh,46px); } /* 02 why REVL. The photograph gives up its height and the plate rides further up into it, so the whole composition still lands in one window with the overlap intact. */ /* The photograph was a 240px band with the plate covering most of it, so the community, which is the whole point of 02, barely showed. It gets real height now and the plate pulls in at the sides, so the picture reads around the words instead of behind them. */ /* The photograph IS the slide (Macca 30 Jul). It stops being a framed band with a plate over it and becomes the full bleed background, with the plate floating on top the way the hero's does. Two things make that work. The frame comes out of the flow entirely, so the slide centres on the plate alone and the picture is free to fill the window whatever height that ends up being. And .inr has to give up its positioning: it is position:relative in base.css, so an absolute frame inside it would stretch to the words rather than to the slide. */ .pk.is-deck [data-type="why"]{ overflow:hidden; } .pk.is-deck [data-type="why"] .inr{ position:static; } .pk.is-deck [data-type="why"] .fr{ position:absolute; inset:0; width:100%; height:auto; aspect-ratio:auto; border:0; z-index:0; } .pk.is-deck [data-type="why"] .fr img{ width:100%; height:100%; object-fit:cover; filter:grayscale(1) contrast(1.04) brightness(.62); } /* one even scrim across the whole window instead of the framed vignette: enough to hold the plate's text, not so much that the room disappears */ .pk.is-deck [data-type="why"] .fr .vg{ position:absolute; inset:0; background: linear-gradient(180deg, rgba(10,10,10,.55) 0%, rgba(10,10,10,.34) 42%, rgba(10,10,10,.72) 100%); } /* .72 let too much of the room through behind the words. .9 still reads as sitting ON the photograph rather than as a solid slab cut out of it, but the text has a floor to stand on. */ .pk.is-deck .why-plate{ position:relative; z-index:2; margin:0 auto; background:rgba(10,10,10,.9); width:min(100%,820px); padding:clamp(15px,2.4vh,30px) clamp(20px,2.4vw,30px); } .pk.is-deck .why-plate .p{ margin-top:clamp(9px,1.6vh,14px); } .pk.is-deck .why-plate .body{ margin-top:clamp(12px,2vh,18px); } .pk.is-deck [data-type="why"] .row{ padding:clamp(9px,1.5vh,13px) 15px; } .pk.is-deck [data-type="why"] .rd{ font-size:11.5px; margin-top:clamp(4px,.8vh,6px); } .pk.is-deck [data-type="why"] .pull{ margin-top:clamp(11px,2vh,18px); } .pk.is-deck [data-type="why"] .head{ margin-bottom:0; } .pk.is-deck [data-type="why"] .pull q{ font-size:clamp(16px,1.8vw,22px); } /* 04 numbers. The term sheet and what it includes go side by side rather than stacking, which is the only way six rows plus six inclusions read in a single window. */ /* the numbers slide is only the sheet and its caveat now, so it stays centred rather than splitting */ .pk.is-deck [data-type="sheet"] .terms{ max-width:820px; } /* the partnership slide picks up the includes, so its two halves tighten and the includes run as one row of three underneath */ .pk.is-deck [data-type="support"] .incl{ margin-top:clamp(14px,1.8vh,20px); } .pk.is-deck [data-type="support"] .incl-t{ margin-bottom:9px; } .pk.is-deck [data-type="support"] .incitem{ padding:9px 12px; font-size:11.5px; } .pk.is-deck [data-type="support"] .media .video-ph{ min-height:0; } /* the four teams tighten so the film beside them and the includes under them all still land in one window */ .pk.is-deck [data-type="support"] .rows{ gap:9px; } .pk.is-deck [data-type="support"] .row{ padding:12px 15px; } .pk.is-deck [data-type="support"] .rh{ font-size:15px; } .pk.is-deck [data-type="support"] .rd{ font-size:11.5px; margin-top:6px; } .pk.is-deck [data-type="support"] .duo{ gap:20px; } .pk.is-deck .trow{ padding:12px 0; } .pk.is-deck .tv{ font-size:clamp(17px,2vw,25px); } /* 04 what you get. A 4:4.2 anchor is taller than a slide will take, so on the deck the photograph goes landscape and the two halves tighten. */ /* bigger labels: the six things are the point of this slide and they were the smallest type on it. The photograph gains a little height back, and the extra air under the heading lifts it clear of the picture. */ .pk.is-deck .wg-anchor{ aspect-ratio:16/10; } .pk.is-deck [data-type="incl"] .body{ gap:clamp(20px,2.6vw,34px); margin-top:clamp(30px,4.2vh,50px); align-items:center; } .pk.is-deck [data-type="incl"] .incitem{ padding:clamp(11px,1.5vh,17px) 0; font-size:clamp(15px,1.6vw,21px); } /* 05 voices. The three portraits give up height to the quotes rather than the row growing past the slide. The whole chain from the section down to the portrait needs a definite height for that to work, so it is set here rather than on .body generally, which would disturb the split sections. */ .pk.is-deck [data-type="voices"] .inr{ display:flex; flex-direction:column; flex:1 1 auto; min-height:0; } .pk.is-deck [data-type="voices"] .body{ display:flex; flex-direction:column; flex:1 1 auto; min-height:0; } .pk.is-deck .voices{ grid-template-rows:minmax(0,1fr); flex:1 1 auto; min-height:0; } .pk.is-deck .vitem{ min-height:0; } /* All three portraits take the SAME height, so all three quotes begin on the same line. Letting the portrait flex meant the one with the longest quote got the shortest picture and the three started at three different heights. Getting them level cost picture size and pulled the words up the slide, which was the wrong trade (Macca 30 Jul). The portraits go big again, so the quotes sit back down near the names where they were, and they are still level because the height is fixed rather than flexed. */ .pk.is-deck .vp{ aspect-ratio:auto; flex:0 0 auto; height:clamp(215px,41vh,400px); min-height:0; } .pk.is-deck .vq{ font-size:12.5px; margin-top:16px; line-height:1.55; flex:0 0 auto; } .pk.is-deck .vn{ margin-top:auto; padding-top:12px; flex:0 0 auto; } /* The name sits on the floor of its column, which only lines the three names up while there is slack left under the LONGEST quote. On a short window a big portrait eats that slack and the three names step. The picture gives height back below 800px so they stay level; the quotes are level either way, because their start is set by the picture. */ @media (max-height:800px){ .pk.is-deck .vp{ height:clamp(190px,30vh,300px); } } /* 09 book a call. Left and right (Macca 30 Jul): the kicker, the heading, the lead and the four things the call covers all read down the LEFT, and the calendar sits beside them on the right. The renderer has already put the head in the left column (bookSplit), so this only has to set the two columns and let each side keep its own alignment. It was briefly centred with everything stacked above the calendar. That made this the tallest slide of the eleven and it is why the numbers below are measured in vh: the split does not need that headroom, but keeping it costs nothing and the slide holds on a short window either way. */ /* Both columns size to their content and the PAIR centres, rather than the left one taking a fixed fraction of the row. Narrowing the four boxes to the width of the lead left the left column still holding 633px, so 233px of nothing sat between the boxes and the calendar. */ .pk.is-deck [data-type="book"] .duo{ grid-template-columns:auto 470px; justify-content:center; gap:clamp(34px,4.2vw,62px); align-items:center; justify-items:stretch; } .pk.is-deck [data-type="book"] .col-a{ display:flex; flex-direction:column; } .pk.is-deck [data-type="book"] .head{ margin-bottom:clamp(16px,2.4vh,30px); } .pk.is-deck [data-type="book"] .p{ max-width:46ch; } /* The four boxes finish where the words above them finish, not at the edge of the column. Tied to the SAME measure as the lead rather than a fixed width, so the two right edges stay level whatever the type does. The lead's long line is the wider of the two things above it: 424px against the heading's 288px. */ .pk.is-deck .expect{ grid-template-columns:1fr; max-width:41ch; margin-inline:0; } /* capped, because a content-sized column would otherwise let the calendar take every pixel the left column gave back */ .pk.is-deck .bk-inline{ max-width:470px; margin-inline:0; } .pk.is-deck [data-type="book"] .bxi{ padding:clamp(9px,1.5vh,14px) 15px; font-size:clamp(11.5px,1.5vh,13px); } /* The heading was shrunk to 39.6px against every other slide's 58px, back when this section stacked above the calendar and needed the room. Side by side it does not, so it comes back to the same size as the rest and wraps to two lines in the column, which is where it wants to break anyway. */ /* narrow enough that it breaks after "Pick a time" rather than running the full width of the column on one line */ .pk.is-deck [data-type="book"] h2.hl{ max-width:12ch; } .pk.is-deck [data-type="book"] .p{ font-size:clamp(13.5px,1.9vh,17px); margin-top:clamp(10px,1.7vh,18px); /* carries "...No pressure," and drops "no hard sell." to its own line, which is where the boxes below take their width from */ max-width:41ch; } .pk.is-deck .bk-inline{ padding:14px; } .pk.is-deck .bk-note{ font-size:9.5px; margin-top:8px; } /* The calendar was squeezed hard back when this slide stacked everything on one axis and the day cells were the only thing that could give. It sits beside the words now and the slide centres, so it was running at under half the window: the cells go back to something you can actually aim at with a mouse. */ /* Everything here is measured in vh, not px. Stacked and centred, this slide is the tallest of the eleven and the calendar is six rows of days plus the times: on a 700px window it ran 136px past the frame. Sized off the window it fills a big screen and still lands on a small one. */ .pk.is-deck .bk-day{ height:clamp(24px,4.2vh,38px); font-size:clamp(11.5px,1.5vh,13px); } /* six rows of days means the shortest windows need the slide's own top pad back as well; the running header is 47px, so 56px still clears it */ .pk.is-deck .slide .s[data-type="book"]{ padding-top:clamp(56px,8.4vh,94px); } .pk.is-deck .bk-grid, .pk.is-deck .bk-dow{ gap:clamp(3px,.5vh,4px); } .pk.is-deck .bk-dow span{ padding:clamp(2px,.4vh,3px) 0; } .pk.is-deck .bk-cal-head{ margin-bottom:clamp(8px,1.4vh,12px); } .pk.is-deck .bk-slot{ padding:clamp(8px,1.4vh,12px) 0; font-size:clamp(11.5px,1.5vh,13px); } .pk.is-deck .bk-lab{ margin:clamp(10px,1.7vh,15px) 0 clamp(6px,1vh,9px); } .pk.is-deck .bk-inline{ padding:clamp(10px,1.5vh,20px); } .pk.is-deck [data-type="book"] .p{ margin-top:13px; } .pk.is-deck [data-type="book"] .body{ margin-top:14px; } /* the gap for this row is set with the columns further up; a bare 16px sat here from the stacked layout and, being later in the file at the same weight, was quietly winning */ .pk.is-deck [data-type="book"] .kick{ margin-bottom:14px; } /* ---------- responsive ---------- */ @media (max-width:1000px){ .pk [data-type="founders"] .duo, .pk [data-type="support"] .duo, .pk [data-type="book"] .duo{ grid-template-columns:1fr; } /* the deck's own book rule is a class heavier, so a media query alone does not undo it: it has to be beaten on its own terms */ .pk.is-deck [data-type="book"] .duo{ grid-template-columns:1fr; justify-content:stretch; } .pk.is-deck .bk-inline{ max-width:470px; margin-inline:auto; } .pk [data-type="incl"] .body{ grid-template-columns:1fr; } .pk .wg-anchor{ aspect-ratio:16/9; } .pk [data-type="support"] .media .video-ph{ min-height:240px; } .pk .track{ grid-template-columns:1fr 1fr 1fr; row-gap:26px; } .pk .track::before{ display:none; } .pk .voices{ grid-template-columns:1fr; } .pk .vp{ aspect-ratio:16/10; } } @media (max-width:760px){ /* On a phone the 16:6.4 frame collapses to a 140px sliver and the plate covers most of what is left, so the community photograph, which is the whole point of this section, never actually shows. It goes portrait and the plate rides less far up and pulls in at the sides, so the picture reads and the overlap still does its job. */ .pk [data-type="why"] .fr{ aspect-ratio:4/3; } .pk .why-plate{ margin-top:-48px; width:calc(100% - 26px); margin-inline:auto; } .pk [data-type="why"] .rows-2{ grid-template-columns:1fr; } } /* The plate carries four figures. Four across needs about 900px before the labels start breaking mid-word, so under that they go two by two and the divider moves from every gap to the middle one only. Two by two holds all the way down to 390px, which reads far better than a stack of four. */ @media (max-width:900px){ .pk .np-figs{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(16px,3vw,24px) 0; justify-content:stretch; } .pk .np-figs .fig{ padding:0 clamp(10px,2.6vw,22px); } .pk .np-figs .fig + .fig{ border-left:0; } .pk .np-figs .fig:nth-child(even){ border-left:1px solid rgba(255,255,255,.28); } } @media (max-width:620px){ .pk .track{ grid-template-columns:1fr; } .pk .incl-grid{ gap:0; } /* Three grids kept their desktop column counts on a phone because the section-scoped selectors outrank the plain ones above. At 390px that is 114px per cell, which is not a column, it is a word per line. */ .pk [data-type="founders"] .facts{ grid-template-columns:1fr; } .pk [data-type="support"] .incl-grid{ grid-template-columns:1fr; } .pk .expect, .pk.is-deck .expect{ grid-template-columns:1fr; } /* the deck runs four across on a laptop, which has to come back to one on a phone */ /* the founder facts read better as label and figure on one line than as a stack of three boxes */ .pk .fact{ display:flex; justify-content:space-between; align-items:baseline; gap:16px; padding:13px 16px; } .pk .fact .v{ text-align:right; } /* a touch more room to breathe, and nothing under 10px */ .pk .p{ font-size:15px; } .pk .np-figs .fl{ font-size:10px; } .pk .plate{ padding:24px 20px; } .pk [data-type="why"] .row{ padding:16px; } }