/* =========================================================================== Handling Plan, 2026. A rebuild, taking from four pages that were asked for and from two that set the standard for type. ilabsolutions.it and martinehrlich.com are both near black studio portfolios, and what is worth taking from them is not the black. It is the scale: a display line at seventy or eighty pixels against a label at thirteen, one idea held on a screen with nothing else competing, and a single object behind the words rather than a collage. A moving and handling tool is bought by people whose job is managing risk, and a black portfolio reads to them as an agency rather than as clinical software, so the page is light with full bleed dark scenes cut into it. That is Apple's pattern, and Physitrack's, and it is the one that survives contact with an NHS procurement lead. thrivebetterliving.com/partnerships gives the motion: progress published as custom properties, a line rising out of a mask, cards dealt rather than flashed. The type scale was read off apple.com and tesla.com at 375 and at 1440 and made fluid between the two, rather than invented. Apple sets body at 14 to 17 with a slight negative tracking, display at 48 on a phone and 80 upwards on a desktop, and labels at 12 with positive tracking. Those are the numbers below. ======================================================================== */ .lp{ --hp-ink:#0b1f1a; --hp-ink2:#44544e; --hp-paper:#fff; --hp-mist:#f4f8f6; --hp-line:rgba(11,31,26,.10); --hp-green:#0e5c4a; --hp-green2:#147a62; --hp-mint:#7fd8b0; --hp-deep:#08211c; /* 375 -> 1440, fluid. */ --hp-display:clamp(40px,2.1rem + 4.7vw,84px); --hp-h2:clamp(29px,1.5rem + 2.6vw,52px); --hp-h3:clamp(19px,.95rem + .6vw,26px); /* The floor was 14px, which is what a phone actually got: the lower bound of this clamp is only reached on a small screen, so the home page set its body text at 14.4px at 390px wide while every other page on the site was at 16. The page carrying the most reading, to people who have never seen the product, was the hardest page to read. Raising the floor leaves the top of the scale exactly where it was: 16.2px at 1280, 17px from about 1700 up. Only the small end moves. */ --hp-body:clamp(16px,.85rem + .2vw,17px); --hp-small:clamp(12.5px,.76rem + .1vw,14px); --hp-label:clamp(11px,.68rem + .1vw,12.5px); --hp-gutter:clamp(18px,4vw,44px); --hp-sec:clamp(60px,8.5vh,128px); --hp-max:1240px; --hp-ease:cubic-bezier(.16,.84,.26,1); } /* ---- The pieces every scene is built from ------------------------------- Every type rule names its class twice. The page it is being built inside already carries a floor on paragraphs, .lp .lp__tiles p {font-size:max(17px,1em)}, which outranks a single class and quietly held every line here at seventeen pixels, scale and all. Doubling the class matches the weight without borrowing an ancestor that a later scene might not sit inside. */ .lp .hp-wrap{width:min(var(--hp-max),100%);margin-inline:auto;padding-inline:var(--hp-gutter)} .lp .hp-eyebrow.hp-eyebrow{margin:0 0 clamp(14px,2.2vh,26px);font-size:var(--hp-label); font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--hp-green2);line-height:1.3} .lp .hp-display.hp-display{margin:0;font-size:var(--hp-display);line-height:1.04; letter-spacing:-.032em;font-weight:700;color:var(--hp-ink);text-wrap:balance} .lp .hp-h2.hp-h2{margin:0;font-size:var(--hp-h2);line-height:1.08;letter-spacing:-.028em; font-weight:700;color:var(--hp-ink);text-wrap:balance} .lp .hp-lead.hp-lead{margin:clamp(16px,2.6vh,28px) 0 0;font-size:var(--hp-body);line-height:1.5; letter-spacing:-.011em;color:var(--hp-ink2);max-width:42ch} .lp .hp-note.hp-note{margin:clamp(12px,1.8vh,20px) 0 0;font-size:var(--hp-small); line-height:1.45;color:var(--hp-ink2);letter-spacing:-.008em;max-width:38ch} /* One shape for every button on the page, at two weights. */ .lp .hp-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:clamp(22px,3.4vh,36px)} .lp .hp-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px; min-height:52px;padding:0 clamp(22px,2.4vw,30px);border-radius:999px; font-size:var(--hp-small);font-weight:650;letter-spacing:-.006em;text-decoration:none; transition:transform .25s var(--hp-ease),box-shadow .25s,background .25s,color .25s} .lp .hp-btn--solid{background:var(--hp-ink);color:#fff; box-shadow:0 12px 24px -16px rgba(11,31,26,.85)} .lp .hp-btn--ghost{background:transparent;color:var(--hp-ink);border:1px solid var(--hp-line)} @media (hover:hover){ .lp .hp-btn:hover{transform:translateY(-2px)} .lp .hp-btn--solid:hover{box-shadow:0 18px 30px -16px rgba(11,31,26,.9)} .lp .hp-btn--ghost:hover{background:var(--hp-mist);border-color:rgba(11,31,26,.2)} } /* ---- Arriving ---------------------------------------------------------- A line rises out of a mask rather than fading in. Fading says the page is loading; rising out of a mask says the line was always there and the page has moved up to it, which is the difference between a page that is still arriving and one that is being read. */ .lp .hp-mask{display:block;overflow:hidden;padding-bottom:.08em;margin-bottom:-.08em} .lp .hp-mask>span{display:block;transition:transform 1s var(--hp-ease) var(--hp-d,0ms)} .lp [data-hp-rise]{transition:opacity .9s var(--hp-ease) var(--hp-d,0ms), transform .9s var(--hp-ease) var(--hp-d,0ms)} /* Nothing is hidden until something is able to show it again. The class is set by an inline script above the markup rather than by the deferred one below it, so the hiding and the first paint happen together: set it late and the line is painted, then pulled under its mask, which the eye reads as a fault. */ .hp-go .lp .hp-mask>span{transform:translateY(112%)} .hp-go .lp [data-hp-rise]{opacity:0;transform:translate3d(0,16px,0)} .hp-go .lp [data-hp-scene].is-in .hp-mask>span{transform:none} .hp-go .lp [data-hp-scene].is-in [data-hp-rise]{opacity:1;transform:none} @media (prefers-reduced-motion:reduce){ .lp .hp-mask>span,.lp [data-hp-rise]{transform:none!important;opacity:1!important;transition:none} } /* ---- Every section, brought onto the hero's system ---------------------- One treatment for every heading on the page rather than one per section. Centred, because Apple centres a section opening and because a centred heading over a gallery tells the reader the gallery is the point; eyebrow as plain coloured small caps rather than a grey pill, because a pill is a button that cannot be pressed; and the emphasis in a heading carried by colour rather than by a highlighter stripe behind the words, which is a device from a presentation and not from a product page. All of these name their class twice, for the paragraph floor described above. */ .lp .hz-sec.hz-sec:not(.hz-pinSec){padding-block:var(--hp-sec)} .lp .hz-head{text-align:center;width:min(var(--hp-max),100%);margin-inline:auto; padding-inline:var(--hp-gutter);margin-bottom:clamp(24px,4.2vh,54px)} .lp .hz-chip.hz-chip{display:inline-block;margin:0 0 clamp(10px,1.6vh,18px);padding:0; background:none;border:0;border-radius:0; font-size:var(--hp-label);font-weight:700;letter-spacing:.09em;text-transform:uppercase; color:var(--hp-green2)} .lp .hz-h2.hz-h2{margin:0;font-size:var(--hp-h2);line-height:1.08;letter-spacing:-.028em; font-weight:700;color:var(--hp-ink);text-wrap:balance} .lp .hz-h2.hz-h2 em,.lp .hz-h2.hz-h2 .lp__hl,.lp .hz-h2.hz-h2 mark{ font-style:normal;background:none!important;padding:0;border-radius:0; box-shadow:none;color:var(--hp-green)} .lp .hz-sub.hz-sub{margin:clamp(12px,2vh,20px) auto 0;max-width:44ch; font-size:var(--hp-body);line-height:1.5;letter-spacing:-.011em;color:var(--hp-ink2)} /* The dark scenes, which are the same page with the light turned round. Keyed off what is actually painted behind the heading, measured by script, not off a class that can drift away from the paint. */ .lp .hp-on-dark .hz-h2.hz-h2{color:#fff} .lp .hp-on-dark .hz-h2.hz-h2 em,.lp .hp-on-dark .hz-h2.hz-h2 .lp__hl, .lp .hp-on-dark .hz-h2.hz-h2 mark{color:var(--hp-mint)} .lp .hp-on-dark .hz-chip.hz-chip,.lp .hp-on-dark .hp-eyebrow.hp-eyebrow{color:var(--hp-mint)} .lp .hp-on-dark .hz-sub.hz-sub{color:rgba(255,255,255,.72)} .lp .hp-on-light .hz-h2.hz-h2{color:var(--hp-ink)} .lp .hp-on-light .hz-h2.hz-h2 em,.lp .hp-on-light .hz-h2.hz-h2 .lp__hl, .lp .hp-on-light .hz-h2.hz-h2 mark{color:var(--hp-green)} .lp .hp-on-light .hz-chip.hz-chip,.lp .hp-on-light .hp-eyebrow.hp-eyebrow{color:var(--hp-green2)} .lp .hp-on-light .hz-sub.hz-sub{color:var(--hp-ink2)} /* ---- One ladder, everywhere --------------------------------------------- The page was using twenty four distinct sizes at phone width: 18, 17, 16.5, 16, 15.5, 15.3, 15, 14.5 and 14 all within nine pixels of each other, which is not a scale, it is nine accidents. Apple uses about six sizes on a page and the gaps between them are large enough to mean something. Everything below is mapped onto those six. Scoped through .lp__tiles so it carries the same weight as the paragraph floor described at the top of this file, and ordered after it. The :not() list keeps the pieces that already have a size of their own from being flattened into body. ------------------------------------------------------------------------- */ .lp .lp__tiles h3,.lp .lp__tiles .hz-post b,.lp .lp__tiles .hz-madeList b{ font-size:var(--hp-h3);line-height:1.22;letter-spacing:-.018em;font-weight:650} .lp .lp__tiles p:not(.hp-lead):not(.hp-note):not(.hz-sub):not(.hp-eyebrow), .lp .lp__tiles li,.lp .lp__tiles .hz-tabName b{ font-size:var(--hp-body);line-height:1.45;letter-spacing:-.011em} .lp .lp__tiles small:not(.hp-eyebrow),.lp .lp__tiles .hz-tTag, .lp .lp__tiles .hz-panelKick,.lp .lp__tiles .hz-tabName small, .lp .lp__tiles .hz-panelFoot b,.lp .lp__tiles time{ font-size:var(--hp-small);line-height:1.4;letter-spacing:-.006em} /* Buttons are a single size on the whole page, like Apple's. */ .lp .lp__tiles .hz-btn,.lp .lp__tiles .hp-btn,.lp .lp__tiles .hp-link{ font-size:var(--hp-small);font-weight:650;letter-spacing:-.006em} /* The ghost numerals were sixty five pixels on a three hundred and seventy five pixel screen: a decoration taking more room than the sentence it decorated. */ .lp .lp__tiles .hz-gainNum,.lp .lp__tiles .hz-fanNum,.lp .lp__tiles .hz-beltNum{ font-size:clamp(26px,.9rem + 1.8vw,44px)} /* An arrow is part of the line it sits in, not a size of its own. */ .lp .lp__tiles .hz-tabGo,.lp .lp__tiles .hz-btn svg,.lp .lp__tiles .hp-link svg{ font-size:1em} /* ---- The footer lockup -------------------------------------------------- It was set larger than the one in the header: twenty eight pixels against nineteen, with a mark to match. A footer signature is the quietest instance of a wordmark on a page, not the loudest. The strapline under it is measured and fitted by script, so reducing the name is enough, the line beneath follows it. */ /* Marked important because the wordmark is sized from several places at once and the name and the bold half of it were landing on different rules: without this the lockup reads "Handling" at twenty eight and "Plan" at seventeen. */ .lp__foot .hf__logo i,.lp__foot .hf__logo b{font-size:17px!important;letter-spacing:-.012em} .lp__foot .hf__logo img{width:26px!important;height:auto} .lp__foot .hf__logo{gap:9px} /* The strapline goes with it. It is fitted to the width of the name by script, so at a seventeen pixel name it lands at six, which is a line nobody can read pretending to be a line. The sentence under the footer already says who makes this. */ .lp__foot .hf__logo small{display:none} /* ---- The chrome, on the same ladder ------------------------------------- The header, the mega menus, the announcement bar and the footer sat outside the page wrapper and so outside everything above, which is how a page ends up with eighty four things at sixteen pixels and a hundred and thirteen at thirteen and a half. Same six sizes here as everywhere else. */ .lp__head.lp__head a,.lp__head.lp__head button,.lp__ddBtn.lp__ddBtn, .lp__foot.lp__foot a:not(.hf__logo),.lp__foot.lp__foot li,.lp__foot.lp__foot p{ font-size:var(--hp-small,13px);letter-spacing:-.006em} .lp__ddPanel b,.lp__foot b,footer b:not(.hf__logo b){ font-size:var(--hp-small,13px);font-weight:650;letter-spacing:-.006em} .lp__ddPanel small,.lp__foot small:not(.hf__logo small), footer small:not(.hf__logo small),.lp__bar,.lp__bar *{ font-size:clamp(11.5px,.7rem + .1vw,12.5px);letter-spacing:-.004em} /* ---- The chooser, in three dimensions ----------------------------------- A chooser is the one place on a marketing page where the reader does something, so it is the one place where depth earns its keep: the panel is a card held in front of the page rather than a box printed on it. Three things move it. The section's own progress tips it as it passes, so it is never quite flat while the page is moving. A pointer tips it towards itself, which is the cue that it can be touched. And choosing deals a new card in from behind the old one, so the change reads as a card being turned up rather than as text being swapped. All of it is transform and opacity, so it runs on the compositor, and all of it is off under reduced motion. ------------------------------------------------------------------------- */ /* All five cards are in the room at once. The old version showed one card and swapped it for another, which is why the change could never be smooth: a swap has no middle. Here every audience is a card standing in depth behind the one in front, and choosing does not exchange anything, it turns the whole deck. Each card's place is one arithmetic expression of how far it is from the front, so a half turn is as valid a state as a whole one, and scrolling moves the deck continuously rather than in five jumps. --cur is the deck's position, a fraction, set by the scroll or tweened by a tap. --k is each card's own place in the order, set once. --o is the distance between them, signed: which side, and how far. --a is that distance unsigned, which depth, fade and blur are read from. */ .lp .hz-who2 .hz-tabs{perspective:1700px;perspective-origin:50% 44%} /* ---- Who it is for: five cards, and nothing else ------------------------- One card per audience, all visible, each its own link. No tabs to press, no solid to turn, no section held while it turns. The cards arrive one after another as the section is reached and that is the whole of the motion. ------------------------------------------------------------------------- */ /* ---- The wheel and the stepper ------------------------------------------- A ring of numbered labels turning on one side, the live audience spelled out on the other, and a rail underneath for anyone who would rather press than scroll. One number, --cur, drives all three, so they cannot disagree about which is current, and because it is a fraction rather than an index the ring turns with the scroll instead of stepping between five positions. ------------------------------------------------------------------------- */ /* The held screen is filled by centring what is held in it. Without the rail the copy is a short block, and left at the top of a screen that has stopped it sat above four hundred pixels of background; centred, the space falls either side of it and reads as composition rather than as a hole. */ .lp .hz-who2 .hz-pinStage{min-height:calc(100svh - var(--hdr,64px) - clamp(24px,5vh,56px)); justify-content:center} .lp .hp-steps{display:grid;gap:clamp(22px,4vw,54px);align-items:center; grid-template-columns:1fr;--cur:0} @media (min-width:1000px){ /* Two columns of equal weight: the wheel on one side, and on the other the heading, the line under it, the live card and the rail, in that order. */ .lp .hp-steps{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px} } /* Nothing in this section sits under anything else. The wheel keeps its own layer and the column keeps a higher one, so if a label ever does reach across it passes behind the card rather than through its text, and the card carries a ground of its own so there is never type on type. */ .lp .hp-wheel{z-index:0} .lp .hp-stepsCopy{position:relative;z-index:2;display:grid;align-content:center; gap:clamp(14px,2vh,22px)} .lp .hp-stages>li{background:linear-gradient(135deg,rgba(8,36,30,.96),rgba(8,36,30,.9)); -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)} /* Read against the deep ground, not against the page's light defaults. The standfirst was still taking the light theme's grey, which on this ground is almost the ground. */ .lp .hz-who2 .hz-sub.hz-sub{color:rgba(255,255,255,.78)} .lp .hz-who2 .hp-eyebrow.hp-eyebrow{color:var(--hp-mint)} .lp .hz-who2 .hz-h2.hz-h2{color:#fff} .lp .hz-who2 .hz-h2.hz-h2 em{color:var(--hp-mint)} /* The heading sits in the column, so it is set to the left and its eyebrow is led by a rule, the way the reference sets it. */ /* Block, because the shared head is laid out as a row elsewhere on the page and in a column that put the standfirst beside the heading instead of under it. */ /* Three classes deep, because the shared section head is already laid out as a two column grid by a rule of that weight, and at one class less this was losing: the standfirst was being set in a 150px column beside the heading instead of under it. */ .lp .hz-who2 .hz-head.hp-headLeft{display:block;text-align:left;padding:0;margin:0; width:auto;max-width:none;grid-template-columns:none} @media (min-width:1000px){ /* One line for the rail: at this width it fits, and wrapping put Previous above Next in a stack that read as two separate controls. */ .lp .hz-who2 .hp-stageNav{flex-wrap:nowrap} .lp .hz-who2 .hp-stageBtn b{max-width:14ch;overflow:hidden;text-overflow:ellipsis; white-space:nowrap} } .lp .hp-headLeft .hp-eyebrow.hp-eyebrow{display:flex;align-items:center;gap:12px; margin-bottom:clamp(12px,1.8vh,18px)} .lp .hp-headLeft .hp-eyebrow i{display:block;width:34px;height:1.5px;flex:none; background:currentColor;opacity:.8} .lp .hp-headLeft .hz-h2.hz-h2{text-align:left} .lp .hp-headLeft .hz-sub.hz-sub{margin-left:0;margin-right:0;max-width:46ch;text-align:left} /* The wheel. --wR is the radius the labels sit at. */ /* The radius is an absolute length, not a percentage. A percentage inside a custom property is not resolved where it is written: it is resolved against whatever uses it, which here is translateY on each label, so every label measured the percentage against its own height and the whole ring collapsed into a pile on one side of the circle. */ .lp .hp-wheel{--R:min(190px,24vw,calc((100svh - var(--hdr,64px)) * .28)); --rot:calc(var(--hp-p,0) * -288deg); position:relative;width:calc(var(--R) * 2 + 150px);height:calc(var(--R) * 2 + 120px); margin:0 auto;display:grid;place-items:center} .lp .hp-wheelTrack{position:absolute;left:50%;top:50%; width:calc(var(--R) * 2);height:calc(var(--R) * 2); transform:translate(-50%,-50%) rotate(var(--rot));border-radius:50%; border:1px dashed rgba(127,216,176,.45); box-shadow:0 0 60px rgba(127,216,176,.14),inset 0 0 60px rgba(127,216,176,.06)} .lp .hp-wheelArc{position:absolute;left:50%;top:50%; width:calc(var(--R) * 2 + 16px);height:calc(var(--R) * 2 + 16px); transform:translate(-50%,-50%) rotate(-90deg);overflow:visible;pointer-events:none} .lp .hp-wheelArc circle{fill:none;stroke:var(--hp-mint);stroke-width:1.6;stroke-linecap:round; stroke-dasharray:100;stroke-dashoffset:calc(100 - var(--hp-p,0) * 100); filter:drop-shadow(0 0 6px rgba(127,216,176,.55))} .lp .hp-wheelCore{position:relative;z-index:1; width:calc(var(--R) * 1.25);height:calc(var(--R) * 1.25);margin:0;border-radius:50%; overflow:hidden;border:3px solid var(--hp-mint);display:grid;place-items:center; background:radial-gradient(120% 120% at 30% 25%,#13564a,#07201b); box-shadow:0 30px 70px -30px rgba(0,0,0,.8),0 0 0 10px rgba(127,216,176,.1); transform:rotate(calc(var(--rot) * -.15))} .lp .hp-wheelCore img{width:46%;height:auto;display:block;opacity:.92} .lp .hp-wheelRing{list-style:none;margin:0;padding:0;position:absolute;left:50%;top:50%; width:0;height:0} .lp .hp-wheelRing li{position:absolute;left:0;top:0;display:flex;align-items:center;gap:8px; white-space:nowrap;padding:5px 14px 5px 5px;border-radius:999px; background:rgba(7,32,27,.9);border:1px solid rgba(255,255,255,.2);cursor:pointer; transform-origin:0 0; transform:rotate(calc(var(--i) * 72deg + var(--rot))) translateY(calc(-1 * var(--R))) rotate(calc(-1 * (var(--i) * 72deg + var(--rot)))) translate(-50%,-50%); transition:background .3s,border-color .3s,box-shadow .3s} .lp .hp-wheelRing li.is-done{border-color:rgba(127,216,176,.5)} .lp .hp-wheelRing li.is-done b{background:rgba(127,216,176,.18);border-color:var(--hp-mint)} .lp .hp-wheelRing li.is-live{background:var(--hp-mint);border-color:var(--hp-mint); box-shadow:0 0 0 6px rgba(127,216,176,.2),0 14px 40px -10px rgba(127,216,176,.6)} .lp .hp-wheelRing li.is-live b{background:#07201b;border-color:#07201b;color:var(--hp-mint)} .lp .hp-wheelRing li.is-live span{color:#07201b} .lp .hp-wheelRing li b{flex:0 0 auto;width:34px;height:34px;border-radius:50%;display:grid; place-items:center;background:rgba(255,255,255,.06); border:1.5px solid rgba(127,216,176,.55);color:var(--hp-mint); font-size:12px;font-weight:800;transition:background .3s,color .3s,border-color .3s} .lp .hp-wheelRing li span{font-size:12.5px;font-weight:800;letter-spacing:.06em; text-transform:uppercase;color:#fff;transition:color .3s} /* The section is dark, because this component is lit: a mint arc, a mint rim and a lit pill only read against a deep ground. */ .lp .hz-who2{background:linear-gradient(180deg,#07201b,#0c3a31 55%,#07201b)} /* The stage card, and the rail under it. Ported from the same component: a card with a lit edge on the left when it is the live one, a row of numbers each over a short bar, and two pill buttons naming the step either side. */ .lp .hp-stages>li{background:linear-gradient(135deg,rgba(255,255,255,.07),rgba(255,255,255,.02)); border:1px solid rgba(255,255,255,.14);border-radius:20px; padding:24px 26px 22px 30px;overflow:hidden; display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:20px;align-items:start} .lp .hp-stages>li::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px; background:var(--hp-mint);opacity:0;transition:opacity .45s} .lp .hp-stages>li.is-live::before{opacity:1} .lp .hp-stages>li.is-live{border-color:rgba(127,216,176,.5)} .lp .hp-stageNum{display:grid;gap:5px;justify-items:start;min-width:76px} .lp .hp-stageNum b{font-size:clamp(40px,5vw,64px);line-height:.9;font-weight:800; letter-spacing:-.03em;color:var(--hp-mint)} .lp .hp-stageNum i{font-style:normal;font-size:11px;font-weight:700;letter-spacing:.16em; text-transform:uppercase;color:rgba(255,255,255,.6)} .lp .hp-stageBody{display:grid;gap:8px;justify-items:start} /* The card is on the dark ground, so its own text is lit too. */ .lp .hp-stages h3{color:#fff} .lp .hp-stages p{color:rgba(255,255,255,.76)} .lp .hp-stages .hp-link{color:var(--hp-mint)} .lp .hp-stageNav{display:flex;align-items:center;justify-content:space-between;gap:14px; margin-top:16px;flex-wrap:wrap} .lp .hp-rail{list-style:none;margin:0;padding:0;display:flex;gap:6px} .lp .hp-rail button{display:grid;gap:7px;justify-items:center;background:none;border:0; padding:6px 4px;cursor:pointer;color:rgba(255,255,255,.6);font-family:inherit; font-size:11.5px;font-weight:800;letter-spacing:.12em;line-height:1;transition:color .3s} .lp .hp-rail button::after{content:"";width:34px;height:3px;border-radius:2px; background:rgba(255,255,255,.16);transition:background .3s,box-shadow .3s} .lp .hp-rail button.is-done,.lp .hp-rail button.is-live{color:var(--hp-mint)} .lp .hp-rail button.is-done::after{background:rgba(127,216,176,.55)} .lp .hp-rail button.is-live::after{background:var(--hp-mint);box-shadow:0 0 12px rgba(127,216,176,.6)} .lp .hp-stageBtn{display:inline-flex;align-items:center;gap:10px; background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.18);color:#fff; border-radius:999px;padding:8px 16px;font-family:inherit;cursor:pointer;text-align:left; transition:border-color .3s,background .3s,opacity .3s} .lp .hp-stageBtn span{display:grid;gap:3px;line-height:1.1} .lp .hp-stageBtn small{font-size:11px;font-weight:700;letter-spacing:.16em; text-transform:uppercase;color:rgba(255,255,255,.6)} .lp .hp-stageBtn b{font-size:14px;color:#fff} .lp .hp-stageBtn svg{width:18px;height:18px;flex:0 0 auto;stroke:var(--hp-mint);fill:none; stroke-width:2;stroke-linecap:round;stroke-linejoin:round} .lp .hp-stageBtn:disabled{opacity:.4;cursor:default} @media (hover:hover){ .lp .hp-stageBtn:hover:not(:disabled){border-color:var(--hp-mint);background:rgba(127,216,176,.1)} .lp .hp-rail button:hover{color:#fff} } @media (max-width:899px){ .lp .hp-stageNav{margin-top:10px;gap:8px} .lp .hp-rail{order:-1;width:100%;justify-content:center} .lp .hp-rail button{font-size:10px;padding:4px 2px;gap:5px} .lp .hp-rail button::after{width:24px} .lp .hp-stageBtn{padding:6px 12px;gap:6px} .lp .hp-stageBtn b{font-size:13px} .lp .hp-stages>li{padding:14px 16px 14px 20px;column-gap:12px} } /* The copy. All five are present and stacked; the live one is the one in focus, and the others are a step behind it rather than gone, which is what makes the change read as one thing moving. */ .lp .hp-stages{list-style:none;margin:0;padding:0;position:relative; min-height:clamp(190px,24vh,240px)} /* Shown or not shown, nothing in between. This was a continuous fade computed from the distance between the card and the wheel's position: opacity = 1 - |k - cur| * 1.8. The arithmetic was wrong in the browser and resolved to zero at every position, so the card the reader was meant to be reading was invisible and what showed through was the ground behind it. Even had it computed, a card is only fully lit when the wheel is exactly on it, which is a fraction of the time anybody is actually scrolling. So it is the reference's own rule: the live one is on, the rest are off, and the change between them is a transition rather than a calculation. */ .lp .hp-stages>li{position:absolute;inset:0;display:flex;flex-direction:column;gap:10px; opacity:0;transform:translateY(14px);pointer-events:none; transition:opacity .45s var(--hp-ease),transform .45s var(--hp-ease)} .lp .hp-stages>li.is-live{opacity:1;transform:none;pointer-events:auto} .lp .hp-stageNum{display:flex;align-items:baseline;gap:7px; font-size:var(--hp-small);letter-spacing:.04em} .lp .hp-stageNum b{font-size:clamp(26px,.9rem + 1.6vw,40px);font-weight:700; letter-spacing:-.03em;color:var(--hp-green)} .lp .hp-stageNum i{font-style:normal;color:var(--hp-ink2)} .lp .hp-on-dark .hp-stageNum i{color:rgba(255,255,255,.6)} .lp .hp-stageBody{display:flex;flex-direction:column;gap:8px;align-items:flex-start} /* ---- The phone ----------------------------------------------------------- The wheel does not come to a small screen. At 375 it is a 340px circle carrying five numbers at a radius of ninety, which is a third of the screen spent on five pills floating in a ring with an arc behind them that reads as a stray line rather than as progress. The rail at the foot already says where the reader is, in a row, in words they can press. So the wheel is a wide screen ornament and the phone gets the part that does the work. ------------------------------------------------------------------------- */ @media (max-width:899px){ .lp .hp-wheel{display:none} .lp .hp-steps{gap:clamp(18px,3.4vh,30px)} /* Centred, because the heading above it is, and a left aligned column under a centred heading reads as two sections that happen to touch. */ .lp .hp-stages{min-height:clamp(210px,27vh,260px);text-align:center} .lp .hp-stages>li{align-items:center} .lp .hp-stageNum{justify-content:center} .lp .hp-stageBody{align-items:center} .lp .hp-stageBody p{max-width:32ch;margin-inline:auto} } @media (prefers-reduced-motion:reduce){ .lp .hp-wheelRing li,.lp .hp-stages>li{transition:none} } .lp .hp-whoCard{display:flex;flex-direction:column;align-items:flex-start;gap:10px; padding:clamp(18px,2vw,26px);border-radius:22px; background:#fff;border:1px solid var(--hp-line); box-shadow:0 22px 44px -40px rgba(11,31,26,.5); transition:transform .3s var(--hp-ease),box-shadow .3s} .lp .hp-whoCard h3{margin:2px 0 0} .lp .hp-whoCard p{margin:0;flex:1 1 auto;color:var(--hp-ink2)} .lp .hp-whoCard .hp-link{min-height:0;margin-top:2px} .lp .hp-whoCard .hz-tabIco{display:grid;place-items:center;width:42px;height:42px; border-radius:13px} .lp .hp-whoCard .hz-tabIco svg{width:21px;height:21px} @media (hover:hover){ .lp .hp-whoCard:hover{transform:translateY(-3px); box-shadow:0 30px 54px -38px rgba(11,31,26,.55)} } @media (prefers-reduced-motion:reduce){.lp .hp-whoCard{transition:none}} /* A prism, not a stack of cards. Five audiences, five faces of one solid, turning on its horizontal axis. A card deck fans and a carousel slides, and both are flat things arranged in depth; this is a single object with thickness, which is the difference between a page using perspective and a page having a thing in it. The geometry is the regular pentagon: five faces at seventy two degrees, each pushed out from the centre by the circumradius, which for a face of height h is h divided by twice the tangent of thirty six degrees, so 0.688h. The solid is then pulled back by the same amount, so the face at the front sits exactly where a flat panel would and the reader is not moved towards or away from the text as it turns. Backfaces are hidden, so the far side of the solid never shows its text reversed, and each face dims with the angle it has turned through, which is what makes it read as one lit object rather than five pictures. */ .lp .hz-who2 .hz-deck{ --face:max(var(--hp-deckH,300px),42svh); --r:calc(var(--face) * .688); position:relative;height:var(--face);transform-style:preserve-3d;will-change:transform; /* A turning face sweeps above and below the box it nominally occupies, so the solid is given room to turn in rather than cutting into the rail above it. */ margin-block:clamp(26px,5vh,62px); transform:translateZ(calc(var(--r) * -1)) rotateX(calc(var(--cur,0) * -72deg))} .lp .hz-who2 .hz-deck .hz-panel{ --o:calc(var(--k,0) - var(--cur,0)); --a:max(var(--o),calc(var(--o) * -1)); display:flex!important;flex-direction:column;justify-content:center; position:absolute;left:0;right:0;top:0;bottom:0;margin:0; backface-visibility:hidden;-webkit-backface-visibility:hidden; transform:rotateX(calc(var(--k,0) * 72deg)) translateZ(var(--r)); filter:brightness(calc(1 - var(--a) * .16)); box-shadow:0 40px 70px -50px rgba(11,31,26,.55); pointer-events:none;animation:none!important} /* Only the face at the front can be used, so a link on the far side of the solid is never reached by accident. */ .lp .hz-who2 .hz-deck .hz-panel.is-front{pointer-events:auto} /* It can be turned by hand as well as by the page. */ .lp .hz-who2 .hz-tabs{touch-action:pan-y;cursor:grab} .lp .hz-who2 .hz-tabs.is-turning{cursor:grabbing} /* The tabs become a rail under the deck rather than a list beside it: one row, one line each, and the chosen one filled. */ .lp .hz-who2 .hz-tabList{position:relative;z-index:5; display:flex;gap:8px;overflow-x:auto;scrollbar-width:none; padding:0 var(--hp-gutter) 2px;margin:0 0 clamp(18px,3vh,30px); scroll-snap-type:x proximity} .lp .hz-who2 .hz-tabList::-webkit-scrollbar{display:none} .lp .hz-who2 .hz-tab{flex:0 0 auto;scroll-snap-align:center; display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 15px; border-radius:999px;border:1px solid var(--hp-line);background:rgba(255,255,255,.62); -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px); transition:background .35s var(--hp-ease),color .35s,border-color .35s, transform .35s var(--hp-ease)} .lp .hz-who2 .hz-tab .hz-tabName small,.lp .hz-who2 .hz-tab .hz-tabGo{display:none} .lp .hz-who2 .hz-tab .hz-tabIco{width:22px;height:22px;border-radius:7px} .lp .hz-who2 .hz-tab .hz-tabIco svg{width:13px;height:13px} .lp .hz-who2 .hz-tab.is-on{background:var(--hp-ink);border-color:var(--hp-ink); transform:translateY(-1px)} .lp .hz-who2 .hz-tab.is-on .hz-tabName b{color:#fff} .lp .hz-who2 .hz-tab.is-on .hz-tabIco{background:rgba(255,255,255,.16)} .lp .hz-who2 .hz-tab.is-on .hz-tabIco svg{stroke:#fff} @media (prefers-reduced-motion:reduce){ .lp .hz-who2 .hz-deck{height:auto!important;transform:none} .lp .hz-who2 .hz-deck .hz-panel{position:relative;transform:none;opacity:1;filter:none; pointer-events:auto;margin-bottom:12px} .lp .hz-who2 .hz-deck .hz-panel[hidden]{display:none!important} } @media (hover:hover){ .lp .hz-who2 .hz-tab:hover{transform:translateY(-2px)} } /* ---- Features: the readout ---------------------------------------------- The same dark ground as the chooser, and the same idea: one number drives what is lit. The index down the side becomes a spine with a line that fills as the section is read, so the reader can see how far through the six they are without counting. The card the page is on lights its edge and takes a single scan down its face, once, when it arrives. Everything else sits back. The grid behind it is two hairline gradients masked to a soft oval, which reads as depth at no cost: no image, no canvas, nothing to load. ------------------------------------------------------------------------- */ /* Doubled, because the section and the card both carry a background from a rule of greater weight: at one class less only the text colours landed and the section went white on white. Anything that paints in here is written at this weight. */ .lp .hz-f2.hz-f2{position:relative;overflow:clip; background:linear-gradient(180deg,#07201b,#0a2f28 50%,#07201b)} .lp .hz-f2::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:0; background-image: linear-gradient(rgba(127,216,176,.055) 1px,transparent 1px), linear-gradient(90deg,rgba(127,216,176,.055) 1px,transparent 1px); background-size:64px 64px; -webkit-mask-image:radial-gradient(78% 58% at 50% 42%,#000,transparent 76%); mask-image:radial-gradient(78% 58% at 50% 42%,#000,transparent 76%)} .lp .hz-f2 .hz-in{position:relative;z-index:1} /* The spine. --s is the section's own progress, published by the scrub. */ .lp .hz-f2Nav{position:relative;padding-left:24px} .lp .hz-f2Nav::before,.lp .hz-f2Nav::after{content:"";position:absolute;left:7px;top:8px;width:1px} .lp .hz-f2Nav::before{bottom:8px;background:rgba(255,255,255,.14)} .lp .hz-f2Nav::after{height:calc(var(--s,0) * 100%); background:linear-gradient(180deg,var(--hp-mint),rgba(127,216,176,0)); box-shadow:0 0 12px rgba(127,216,176,.55)} .lp .hz-f2Nav a{position:relative;color:rgba(255,255,255,.55);transition:color .35s} .lp .hz-f2Nav a::before{content:"";position:absolute;left:-24px;top:50%;width:9px;height:9px; margin-top:-4.5px;border-radius:50%;background:#07201b; border:1px solid rgba(127,216,176,.5);transition:background .35s,box-shadow .35s} .lp .hz-f2Nav a.is-on,.lp .hz-f2Nav a:hover{color:#fff} .lp .hz-f2Nav a.is-on::before{background:var(--hp-mint); box-shadow:0 0 0 4px rgba(127,216,176,.18),0 0 14px rgba(127,216,176,.7)} /* The cards. */ .lp .hz-f2Card.hz-f2Card{position:relative;overflow:hidden;border-radius:22px; background:linear-gradient(135deg,rgba(255,255,255,.07),rgba(255,255,255,.025)); border:1px solid rgba(255,255,255,.12); transition:border-color .4s,box-shadow .4s,transform .4s var(--hp-ease)} .lp .hz-f2Card.is-on.is-on{background:linear-gradient(135deg,rgba(127,216,176,.12),rgba(255,255,255,.03))} /* At the card's own weight: the heading colour is set elsewhere by a three class rule and at anything less it stayed near black on the dark card. */ .lp .hz-f2Card.hz-f2Card h3{color:#fff} .lp .hz-f2Card.hz-f2Card p{color:rgba(255,255,255,.78)} .lp .hz-f2Card.hz-f2Card .hz-f2Tag{color:var(--hp-mint);letter-spacing:.14em; text-transform:uppercase;font-variant-numeric:tabular-nums} .lp .hz-f2Card.hz-f2Card .hz-ticks li{color:rgba(255,255,255,.78)} .lp .hz-f2Card.hz-f2Card .hz-ticks svg{stroke:var(--hp-mint)} .lp .hz-f2Card.is-on{border-color:rgba(127,216,176,.45); box-shadow:0 34px 70px -42px rgba(0,0,0,.85),0 0 0 1px rgba(127,216,176,.12)} /* The scan: one pass down the face of the card, when it becomes the live one. */ .lp .hz-f2Card::after{content:"";position:absolute;left:0;right:0;top:0;height:2px;opacity:0; background:linear-gradient(90deg,transparent,rgba(127,216,176,.9),transparent); pointer-events:none} .lp .hz-f2Card.is-on::after{animation:hp-scan 1.5s var(--hp-ease) 1} @keyframes hp-scan{ 0%{opacity:0;top:0} 12%{opacity:.95} 100%{opacity:0;top:100%} } /* The plate is glass here, not paper, and turns solid when the card is the live one. */ .lp .hz-f2Card .hz-f2Ico{background:linear-gradient(160deg,rgba(255,255,255,.16),rgba(255,255,255,.04)); border:1px solid rgba(255,255,255,.18)} .lp .hz-f2Card .hz-f2Ico svg{stroke:var(--hp-mint)} .lp .hz-f2Card.is-on .hz-f2Ico{background:var(--hp-mint);border-color:var(--hp-mint)} .lp .hz-f2Card.is-on .hz-f2Ico svg{stroke:#07201b} @media (prefers-reduced-motion:reduce){ .lp .hz-f2Card.is-on::after{animation:none} .lp .hz-f2Card{transition:none} } /* ---- Features, on white: the fold --------------------------------------- A different pattern from everything else on the page. Nothing turns and nothing is held: the six features are bands stacked down the column, and the one the page is on opens while the rest stay shut. What moves is the content itself rather than a carousel carrying it, which is why it works on a white ground where a lit wheel would not. Three things happen at once as a band becomes the live one: a rule draws across its top from left to right, its detail unfolds, and the bands above and below step back to half light. The reader always has one thing in front of them and five in reach. Written after the dark version it replaces, so it wins on order at the same weight. ------------------------------------------------------------------------- */ .lp .hz-f2.hz-f2{background:linear-gradient(180deg,#fff,#f5f9f7 55%,#fff)} .lp .hz-f2.hz-f2::before{display:none} /* The index keeps its spine, in ink rather than in light. */ .lp .hz-f2Nav::before{background:rgba(11,31,26,.12)} .lp .hz-f2Nav::after{background:linear-gradient(180deg,var(--hp-green),rgba(14,92,74,0)); box-shadow:none} .lp .hz-f2Nav a{color:var(--hp-ink2)} .lp .hz-f2Nav a::before{background:#fff;border-color:rgba(14,92,74,.4)} .lp .hz-f2Nav a.is-on,.lp .hz-f2Nav a:hover{color:var(--hp-ink)} .lp .hz-f2Nav a.is-on::before{background:var(--hp-green); box-shadow:0 0 0 4px rgba(14,92,74,.12)} /* A band, not a card: no box, no shadow, one rule above it. */ .lp .hz-f2Card.hz-f2Card{position:relative;overflow:hidden;border:0;border-radius:0; background:transparent;box-shadow:none; border-top:1px solid var(--hp-line); padding:clamp(18px,2.6vh,30px) 0 clamp(16px,2.2vh,26px); opacity:.55;transition:opacity .45s var(--hp-ease)} .lp .hz-f2Card.is-on.is-on{opacity:1;background:transparent;box-shadow:none} /* The rule draws across the live band rather than simply appearing. */ .lp .hz-f2Card.hz-f2Card::before{content:"";position:absolute;left:0;top:-1px;height:2px; width:0;background:var(--hp-green);transition:width .75s var(--hp-ease)} .lp .hz-f2Card.is-on.is-on::before{width:100%} .lp .hz-f2Card.hz-f2Card::after{display:none} .lp .hz-f2Card.hz-f2Card h3{color:var(--hp-ink)} .lp .hz-f2Card.hz-f2Card p{color:var(--hp-ink2)} .lp .hz-f2Card.hz-f2Card .hz-f2Tag{color:var(--hp-green2);letter-spacing:.14em; text-transform:uppercase;font-variant-numeric:tabular-nums} .lp .hz-f2Card.hz-f2Card .hz-ticks li{color:var(--hp-ink2)} .lp .hz-f2Card.hz-f2Card .hz-ticks svg{stroke:var(--hp-green)} /* The fold. Max height rather than a row track, because a list of several items cannot be collapsed with one 0fr row and this has to work with two items or with four. */ .lp .hz-f2Card.hz-f2Card .hz-ticks{max-height:0;opacity:0;overflow:hidden;margin-top:0; transition:max-height .65s var(--hp-ease),opacity .4s linear,margin-top .65s var(--hp-ease)} .lp .hz-f2Card.is-on.is-on .hz-ticks{max-height:260px;opacity:1;margin-top:10px} /* The plate stays quiet until the band is the one being read. */ .lp .hz-f2Card.hz-f2Card .hz-f2Ico{background:linear-gradient(160deg,#f5fcf9,#e1f2e9 46%,#c5e3d4); border:1px solid rgba(255,255,255,.8)} .lp .hz-f2Card.hz-f2Card .hz-f2Ico svg{stroke:var(--hp-green)} .lp .hz-f2Card.is-on.is-on .hz-f2Ico{background:var(--hp-ink);border-color:var(--hp-ink)} .lp .hz-f2Card.is-on.is-on .hz-f2Ico svg{stroke:#fff} @media (prefers-reduced-motion:reduce){ .lp .hz-f2Card.hz-f2Card{opacity:1;transition:none} .lp .hz-f2Card.hz-f2Card .hz-ticks{max-height:none;opacity:1;transition:none} .lp .hz-f2Card.hz-f2Card::before{transition:none} } /* ---- The rhythm of grounds ----------------------------------------------- The partnerships page is a light page with deep scenes cut into it, and it alternates far more often than ours did: of its eleven scenes, five are deep or dark. Ours ran eight light to three, which is why it reads as one long sheet with a few dark patches rather than as a sequence. Two more scenes go deep, chosen where the content is the page talking about how it works rather than what it contains: how it works, and what changes. The sections that hold a library, a feature board or a list of articles stay light, because those are things to read rather than moments to land. Painted at section weight, since the theme sets these grounds at that weight itself, and nothing here is told its own colour: the script reads what is actually behind the heading and flips the type to match. See the classifier in home6.js. ------------------------------------------------------------------------- How it works goes deep, because its step cards carry their own white ground and sit on it as objects. What changes does not: its cards are transparent, so a deep ground put dark green headings on dark green and I had to put it back. A ground is only free to change where what sits on it brings its own. */ .lp .hz-sec.hz-how{background:linear-gradient(180deg,#07201b,#0c3a31 52%,#07201b)} /* ---- Their signature: every heading rises word by word out of a mask ----- This is the motion that makes that page what it is, and ours had it on two headings out of eleven. Each word sits in a box that hides what overflows it, and the word itself starts below that box and travels up into it, one after another. The eye reads it as the line being set rather than as the page fading in. The word spans were already in the markup, from the landing script; what was missing was something inside each one to move independently of the box that clips it. The script wraps that, and the rest is here. */ .hp-go .lp .hz-h2 .lp__w{display:inline-block;overflow:hidden; padding-bottom:.12em;margin-bottom:-.12em;vertical-align:bottom} .hp-go .lp .hz-h2 .lp__w>.hp-w{display:inline-block;transform:translateY(110%); transition:transform .95s var(--hp-ease) calc(var(--w,0) * 55ms)} .hp-go .lp .hz-sec.is-in .hz-h2 .lp__w>.hp-w, .hp-go .lp [data-hp-scene].is-in .hz-h2 .lp__w>.hp-w{transform:none} @media (prefers-reduced-motion:reduce){ .hp-go .lp .hz-h2 .lp__w>.hp-w{transform:none;transition:none} } /* ---- One slide, every section -------------------------------------------- Up and in, once, when the section is reached. Nothing on this page brightens and dims again as it crosses the screen any more: a block that changes while it is being read is the thing that makes a page feel unsettled. ------------------------------------------------------------------------- */ .hp-go .lp .hp-slide{opacity:0;transform:translate3d(0,26px,0); transition:opacity .8s var(--hp-ease) var(--hp-sd,0ms), transform .9s var(--hp-ease) var(--hp-sd,0ms)} .hp-go .lp .hz-sec.is-in .hp-slide, .hp-go .lp [data-hp-scene].is-in .hp-slide{opacity:1;transform:none} /* The two rows that were dimming their own items as they passed the middle of the screen. An item's brightness is not a readout of where the page is. */ .lp .hz-madeList li,.lp .hz-ticks li,.lp .hp-tile__list li{opacity:1} /* And the rows themselves stop travelling sideways. A column that arrives once is the same promise as a strip that has to be swiped, without the movement under the thumb. */ .lp .hz-gainGrid,.lp .hz-postGrid,.lp .hz-madeList{ display:grid!important;grid-auto-flow:row; grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr))!important; gap:clamp(12px,1.6vw,20px);width:auto!important;max-width:none; overflow:visible!important;margin:0;padding:0;transform:none!important; scroll-snap-type:none} .lp .hz-gainGrid>*,.lp .hz-postGrid>*,.lp .hz-madeList>*{ flex:none!important;width:auto!important;min-width:0;max-width:none; height:auto!important;min-height:0!important;transform:none!important; scroll-snap-align:none} @media (prefers-reduced-motion:reduce){ .hp-go .lp .hp-slide{opacity:1;transform:none;transition:none} } /* ---- Features: the board ------------------------------------------------- Six tiles on a board, and a charge that runs through them in order as the section is read. --s is the section's progress, published by the scrub; --i is a tile's place in the order. Between them they give --lit, which is nothing until the charge reaches the tile and one once it has passed, and everything the tile does is read from that single number: its dial fills, its edge lights, it lifts, and its list comes up. Clamped with plain numbers, so there is no script per tile and nothing to keep in step. ------------------------------------------------------------------------- */ .lp .hp-board.hp-board{background:linear-gradient(180deg,#fff,#f4f8f6 50%,#fff)} .lp .hp-board .hz-head{text-align:center;margin-bottom:clamp(26px,4.4vh,54px)} .lp .hp-board__grid{list-style:none;margin:0;padding:0; display:grid;gap:clamp(12px,1.6vw,20px); /* Three across, so six is two full rows rather than four and a widowed pair. */ grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr))} .lp .hp-tile{ /* Seven, not six, so the last tile is fully charged before the section leaves. */ --lit:clamp(0,calc(var(--s,0) * 7 - var(--i,0)),1); position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:9px; padding:clamp(18px,2vw,26px);border-radius:22px; background:#fff;border:1px solid var(--hp-line); box-shadow:0 20px 40px -38px rgba(11,31,26,.45); opacity:calc(.5 + var(--lit) * .5); transform:translateY(calc((1 - var(--lit)) * 16px)); transition:opacity .5s var(--hp-ease),transform .5s var(--hp-ease), border-color .5s,box-shadow .5s} /* The dial: the number sits in a ring that fills as the charge arrives. */ .lp .hp-tile__dial{position:relative;display:grid;place-items:center; width:46px;height:46px;border-radius:50%; background:conic-gradient(var(--hp-green) calc(var(--lit) * 360deg),rgba(11,31,26,.09) 0)} .lp .hp-tile__dial::after{content:"";position:absolute;inset:3px;border-radius:50%;background:#fff} .lp .hp-tile__dial b{position:relative;z-index:1;font-size:var(--hp-label);font-weight:800; letter-spacing:.04em;color:var(--hp-green);font-variant-numeric:tabular-nums} .lp .hp-tile__name{font-size:var(--hp-label);font-weight:700;letter-spacing:.11em; text-transform:uppercase;color:var(--hp-green2)} .lp .hp-tile h3{margin:0;color:var(--hp-ink)} .lp .hp-tile__list{list-style:none;margin:4px 0 0;padding:0;display:grid;gap:6px} .lp .hp-tile__list li{position:relative;padding-left:16px;color:var(--hp-ink2)} .lp .hp-tile__list li::before{content:"";position:absolute;left:0;top:.62em;width:7px;height:1.5px; background:var(--hp-green);opacity:calc(.25 + var(--lit) * .75)} /* Fully charged, or under a pointer: the tile comes forward. */ .lp .hp-tile:hover,.lp .hp-tile:focus-within{--lit:1} .lp .hp-tile:hover{transform:translateY(-3px); border-color:rgba(14,92,74,.35);box-shadow:0 30px 56px -38px rgba(11,31,26,.5)} @media (prefers-reduced-motion:reduce){ .lp .hp-tile{--lit:1;opacity:1;transform:none;transition:none} } /* ---- Features: the gallery ----------------------------------------------- Replaces the board above, which is retired and no longer carries a class on the page. Six tiles at once was a wall, and most of it sat below the fold. The section holds and the six pass through it sideways. The driver in home6.js owns the movement: it measures the row, makes the section as tall as the row is wide, pins this stage under the header and sets scrollLeft as the reader comes down. Nothing here animates anything, which is the point: one owner for the travel. ------------------------------------------------------------------------- */ /* No background here. Every .hz-sec is transparent by force in hx2070.css, which owns which bands are tinted, and the gradient the board carried never reached the page. */ /* Full width, end to end. The row of cards runs to both edges of the screen, so the inner container gives up the 1220px measure it holds everywhere else. The heading is padded back to where that measure would have put it, so only the cards run out to the edges and the words stay on the line the rest of the page is set to. This is the shape .hz-three already uses for its own pinned row. */ .lp .hz-f2 .hz-in{max-width:none;padding:0} .lp .hp-fgal .hz-head{text-align:center;margin-bottom:clamp(16px,2.6vh,32px); padding-inline:max(28px,calc((100vw - 1220px) / 2))} /* The stage fills most of the screen it is holding, in svh so it keeps its proportion at any height. Left to hug its content it measures under three fifths of the viewport on a tall screen, and the driver then decides a hold is not worth the screen it costs and hands back a strip nobody is told to swipe. */ .lp .hp-fgal .hz-pinStage{min-height:68svh} /* At rest, and wherever nothing is held: a strip under the thumb, snapping card to card. This is also what reduced motion and a browser with no script get. */ .lp .hp-fRow{list-style:none;margin:0;display:flex;flex-wrap:nowrap;align-items:stretch; gap:clamp(12px,1.4vw,22px);padding:2px var(--hp-gutter,20px) 10px; overflow-x:auto;overflow-y:hidden;scrollbar-width:none; scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain} .lp .hp-fRow::-webkit-scrollbar{display:none} .lp .hp-fRow>*{flex:0 0 min(86vw,440px);scroll-snap-align:center} /* Held: the row takes everything the heading leaves and the cards take all of the row. Overflow hidden rather than visible, because the page drives this row by setting scrollLeft and an element with visible overflow has none to set. The snap goes with it: a row being driven a pixel at a time must not be pulled back to the nearest card. */ .lp .hz-pinStage .hp-fRow{flex:1 1 auto;min-height:0; overflow:hidden;scroll-snap-type:none} /* The card is as tall as the row, so the head sits at the top and the list at the foot rather than leaving a hem of nothing under four lines of text. */ .lp .hp-fCard{position:relative;display:flex;flex-direction:column; justify-content:space-between;gap:clamp(18px,2.4vh,34px); padding:clamp(22px,2.4vw,34px);border-radius:24px; background:#fff;border:1px solid var(--hp-line,rgba(11,31,26,.12)); box-shadow:0 24px 44px -40px rgba(11,31,26,.45)} .lp .hp-fCard__head{display:flex;flex-direction:column;align-items:flex-start;gap:10px} .lp .hp-fCard__top{display:flex;align-items:center;justify-content:space-between; width:100%;gap:12px} .lp .hp-fCard__ico{display:grid;place-items:center;flex:0 0 auto; width:50px;height:50px;border-radius:15px; background:#eaf4ef;color:var(--hp-green,#0e5c4a)} .lp .hp-fCard__ico svg{width:25px;height:25px;display:block} .lp .hp-fCard__n{font-size:var(--hp-label,13px);font-weight:800;letter-spacing:.04em; color:var(--hp-green,#0e5c4a);font-variant-numeric:tabular-nums} .lp .hp-fCard__n i{font-style:normal;font-weight:600;color:var(--hp-ink2,#4a5b55)} .lp .hp-fCard__name{font-size:var(--hp-label,13px);font-weight:700;letter-spacing:.11em; text-transform:uppercase;color:var(--hp-green2,#2f7d68)} .lp .hp-fCard h3{margin:0;color:var(--hp-ink,#0b1f1a); font-size:clamp(23px,1.9vw,31px);line-height:1.14;letter-spacing:-.022em} .lp .hp-fCard__list{list-style:none;margin:0;padding:0;display:grid;gap:9px} .lp .hp-fCard__list li{position:relative;padding-left:18px; font-size:clamp(15.5px,1.1vw,18px);line-height:1.5;color:var(--hp-ink2,#4a5b55)} .lp .hp-fCard__list li::before{content:"";position:absolute;left:0;top:.66em; width:9px;height:1.5px;background:var(--hp-green,#0e5c4a)} @media (hover:hover){ .lp .hp-fCard{transition:transform .35s var(--hp-ease,cubic-bezier(.22,.61,.36,1)), border-color .35s,box-shadow .35s} .lp .hp-fCard:hover{transform:translateY(-3px);border-color:rgba(14,92,74,.35); box-shadow:0 32px 58px -40px rgba(11,31,26,.5)} } @media (prefers-reduced-motion:reduce){ .lp .hp-fCard{transition:none;transform:none} } /* ---- Scene 1: the hero ------------------------------------------------- One idea, one object, and nothing else on the screen. The field behind the words is the particle sphere idea from ilabsolutions, done as a masked dot grid that drifts: no canvas, no library, no main thread work, and it reads as depth rather than as a background image. */ .lp .hp-hero{position:relative;isolation:isolate;overflow:clip; padding-block:clamp(40px,7vh,96px) clamp(36px,6vh,88px); background:linear-gradient(180deg,#fff 0%,var(--hp-mist) 62%,#fff 100%)} .lp .hp-hero__field{position:absolute;inset:-14% -14% auto;height:132%;z-index:-1;pointer-events:none; background-image:radial-gradient(circle,rgba(14,92,74,.17) 1.15px,transparent 1.25px); background-size:26px 26px; -webkit-mask-image:radial-gradient(56% 46% at 50% 34%,#000 0%,transparent 72%); mask-image:radial-gradient(56% 46% at 50% 34%,#000 0%,transparent 72%); animation:hp-drift 44s linear infinite} @keyframes hp-drift{to{background-position:260px 130px}} @media (prefers-reduced-motion:reduce){.lp .hp-hero__field{animation:none}} /* Centred, because Apple centres an opening and the symmetry is most of what makes a first screen feel composed rather than laid out. The measure is set on the heading in its own characters, not on the column: set on the column it is read against the body size, and thirteen of those is a hero one word wide. */ .lp .hp-hero__in{max-width:min(100%,860px);margin-inline:auto;text-align:center} .lp .hp-hero .hp-display.hp-display{max-width:14ch;margin-inline:auto} .lp .hp-hero .hp-display em{font-style:normal;color:var(--hp-green)} .lp .hp-hero .hp-lead.hp-lead{max-width:30ch;margin-inline:auto} .lp .hp-hero .hp-cta{justify-content:center;align-items:center} /* The text link beside the button, which is how Apple offers the second thing: the chevron slides on approach, and nothing else happens. */ .lp .hp-link{display:inline-flex;align-items:center;gap:5px;min-height:52px; font-size:var(--hp-small);font-weight:600;letter-spacing:-.006em; color:var(--hp-green);text-decoration:none} .lp .hp-link svg{width:1.05em;height:1.05em;fill:none;stroke:currentColor;stroke-width:2.2; stroke-linecap:round;stroke-linejoin:round;transition:transform .25s var(--hp-ease)} @media (hover:hover){ .lp .hp-link:hover{text-decoration:underline;text-underline-offset:4px} .lp .hp-link:hover svg{transform:translateX(3px)} } /* The words get a screen to themselves, which is what makes the first one land, and the badge belongs to that screen rather than to the whole section: anchored to the section it ended up fifteen hundred pixels down, under the film, where nobody is. */ /* The words and the product share the first screen, the way an Apple page opens: the line, then the thing it is about, with no scrolling in between. */ .lp .hp-hero__screen{position:relative;display:flex;flex-direction:column;justify-content:center; gap:clamp(26px,4.5vh,56px); min-height:calc(100svh - var(--hdr,64px) - clamp(40px,7vh,96px))} @media (max-width:560px){.lp .hp-hero__screen{min-height:0;gap:26px}} /* The film, which is the product, and so is the next thing and not a footnote to the first. */ .lp .hp-hero__stage{min-height:0;padding-inline:var(--hp-gutter)} .lp .hp-hero__stage .hz-screen{max-width:min(980px,100%);margin-inline:auto} /* The badge: a thing that turns, borrowed from ilabsolutions, saying the one fact a first time reader needs before they will press anything. */ .lp .hp-badge{position:absolute;left:var(--hp-gutter);bottom:clamp(14px,3vh,34px);z-index:2; width:clamp(78px,9vw,104px);aspect-ratio:1;display:grid;place-items:center; border-radius:50%;text-decoration:none;color:var(--hp-green); background:rgba(255,255,255,.6); -webkit-backdrop-filter:blur(10px) saturate(180%);backdrop-filter:blur(10px) saturate(180%); border:1px solid rgba(255,255,255,.7); box-shadow:0 10px 24px -18px rgba(11,31,26,.6)} .lp .hp-badge svg{position:absolute;inset:0;width:100%;height:100%; animation:hp-spin 22s linear infinite} .lp .hp-badge text{font-size:9.2px;font-weight:700;letter-spacing:.22em; text-transform:uppercase;fill:var(--hp-green)} .lp .hp-badge i{display:block;width:34%;aspect-ratio:1; background:currentColor; -webkit-mask:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M12 5v14m-6-6 6 6 6-6'/%3E%3C/svg%3E") center/contain no-repeat; mask:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M12 5v14m-6-6 6 6 6-6'/%3E%3C/svg%3E") center/contain no-repeat} @keyframes hp-spin{to{transform:rotate(360deg)}} @media (prefers-reduced-motion:reduce){.lp .hp-badge svg{animation:none}} /* It is decoration on a small screen, where the thumb needs the corner. */ @media (max-width:560px){.lp .hp-badge{display:none}} /* ---- Who we serve: the reader picks, the page answers --------------------- Three radios, three panels, and :checked does the switching. No script, so the choice works on the first paint, and a screen reader is given a radio group rather than a tab pattern that cannot behave like one without script. The three keys are spelled out rather than generated, because a sibling selector cannot be looped. There are three, they are fixed, and writing them is clearer than a trick that hides what is going on. ------------------------------------------------------------------------- */ .lp .hz-serve__box{border:0;margin:clamp(22px,3.4vh,40px) 0 0;padding:0;min-width:0} .lp .hz-serve__r,.lp .hz-serve__legend{position:absolute;width:1px;height:1px;margin:-1px; padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0} .lp .hz-serve__pick{display:grid;gap:clamp(10px,1.2vw,16px); grid-template-columns:repeat(auto-fit,minmax(min(100%,210px),1fr)); max-width:900px;margin-inline:auto} .lp .hz-serve__opt{display:flex;flex-direction:column;align-items:center;gap:6px; text-align:center;cursor:pointer;padding:clamp(14px,1.6vw,20px) 14px;border-radius:18px; background:#fff;border:1px solid var(--hp-line,rgba(11,31,26,.12)); transition:border-color .3s,box-shadow .3s,transform .3s var(--hp-ease,ease)} .lp .hz-serve__opt b{font-size:clamp(16px,1.2vw,18px)} .lp .hz-serve__opt small{font-size:13.5px} .lp .hz-serve__ico{display:grid;place-items:center;width:40px;height:40px;border-radius:13px; background:#eaf4ef;color:var(--hp-green,#0e5c4a)} .lp .hz-serve__ico svg{width:21px;height:21px;display:block} @media (hover:hover){ .lp .hz-serve__opt:hover{transform:translateY(-2px);border-color:rgba(14,92,74,.35)} } /* The one chosen, and the one the keyboard is on. */ #hz-serve-one:checked~.hz-serve__pick [for="hz-serve-one"], #hz-serve-team:checked~.hz-serve__pick [for="hz-serve-team"], #hz-serve-service:checked~.hz-serve__pick [for="hz-serve-service"]{ border-color:var(--hp-green,#0e5c4a); box-shadow:0 0 0 2px rgba(14,92,74,.16),0 18px 34px -30px rgba(11,31,26,.5)} #hz-serve-one:focus-visible~.hz-serve__pick [for="hz-serve-one"], #hz-serve-team:focus-visible~.hz-serve__pick [for="hz-serve-team"], #hz-serve-service:focus-visible~.hz-serve__pick [for="hz-serve-service"]{ outline:2px solid var(--hp-green,#0e5c4a);outline-offset:3px} .lp .hz-serve__p{display:none;gap:clamp(18px,3vw,44px); margin-top:clamp(16px,2.4vh,26px);padding:clamp(22px,2.6vw,36px);border-radius:24px; background:#fff;border:1px solid var(--hp-line,rgba(11,31,26,.12)); box-shadow:0 24px 44px -40px rgba(11,31,26,.45)} #hz-serve-one:checked~.hz-serve__panels .hz-serve__p--one, #hz-serve-team:checked~.hz-serve__panels .hz-serve__p--team, #hz-serve-service:checked~.hz-serve__panels .hz-serve__p--service{display:grid} @media (min-width:900px){ .lp .hz-serve__p{grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);align-items:start} } .lp .hz-serve__p h3{margin:0 0 10px;font-size:clamp(22px,1.9vw,30px);line-height:1.15; letter-spacing:-.022em} .lp .hz-serve__text p{margin:0;font-size:clamp(16px,1.1vw,18px);line-height:1.55} .lp .hz-serve__badge{display:inline-block;margin-top:14px;padding:5px 12px;border-radius:999px; background:#eaf4ef;color:var(--hp-green,#0e5c4a); font-size:var(--hp-label,13px);font-weight:700;letter-spacing:.02em} .lp .hz-serve__cta{display:flex;flex-wrap:wrap;gap:10px;margin-top:clamp(16px,2vh,22px)} .lp .hz-serve__list{list-style:none;margin:0;padding:0;display:grid;gap:10px;align-content:start} .lp .hz-serve__list li{position:relative;padding-left:27px; font-size:clamp(15.5px,1.05vw,17px);line-height:1.5} .lp .hz-serve__list li::before{content:"";position:absolute;left:0;top:.36em; width:17px;height:17px;border-radius:50%;background:#eaf4ef} .lp .hz-serve__list li::after{content:"";position:absolute;left:4.8px;top:.66em; width:7px;height:3.5px;transform:rotate(-45deg); border-left:1.7px solid var(--hp-green,#0e5c4a); border-bottom:1.7px solid var(--hp-green,#0e5c4a)} /* Held to a readable measure. Centred in a 1240px container with nothing to stop it, this one line ran to 144 characters on a desktop, about twice what an eye tracks back from comfortably, and it is the line that tells a care team the plan is free to open. */ .lp .hz-serve__alt{margin:clamp(18px,2.6vh,28px) auto 0;max-width:62ch;text-align:center;font-size:15.5px} .lp .hz-serve__alt a{color:var(--hp-green,#0e5c4a);font-weight:600} @media (prefers-reduced-motion:reduce){ .lp .hz-serve__opt{transition:none} } /* ---- Reach and legibility, measured at 375px ------------------------------------- Two things this sheet was doing to the page by accident. The footer links were set at 12.5px in a 24px box. footer.css asks for 16px and says so in a comment about the line box it needs; the header rule above, the one that sets every control in .lp__head to --hp-small, was reaching them as well and winning. The links are the only way to most of the site from the foot of a page, and 12.5px of white type with 24px between one link and the next is small to read and small to hit. Doubling the class is how this sheet is beaten elsewhere, so it is how it is beaten here: see the type scale floor in pages.css for the same fight. The announcement link was 22px tall, half of what a thumb is given. The strip keeps its height: its own padding comes off as the link's padding goes on, so the bar lands at 44px with the whole of it tappable instead of a 22px line inside a 42px strip. */ footer.hf .hf__col.hf__col a{ font-size:15px;line-height:1.45; display:flex;align-items:center;min-height:40px; padding:6px 0!important} .lp .lp__bar{padding-block:0} .lp .lp__bar p{min-height:44px} .lp .lp__barLink.lp__barLink{min-height:44px;padding-block:6px} /* The two links on this page that are a destination rather than a word in a sentence. "Open a plan with a code" is the only route a carer holding a code has, and it was a 20px line of inline text; "Browse every plan" is the way into the library and was 24px. Both read as CTAs and neither was big enough to be one, at any width. Given the same box as every other control on the page rather than a new style, so nothing else about them changes. */ .lp .hz-serve__alt a, .lp .hz-lib2 p.hz-c > a.hz-link{ display:inline-flex;align-items:center;gap:7px; min-height:44px;padding-block:8px}