/* ============================================================ landing-type9.css, OPTION 9: the chapters, re-typeset. OPTION 9 IS OPTION 8. Same page, same colours, same gradients, same grain, same product visuals, same animation, same hero lights. Only the type, its scale, and the space around it change, so the two can be put side by side and the hierarchy judged on its own. ============================================================ WHY THE OLD RAMP READ FLAT, measured at 1600 ============================================================ eyebrow 12px 600 ink 50% heading 30px 600 ink 100% body 16px 400 ink 68% points 14.5px 400 ink 74% Three faults, and none of them is "too small": 1. THE HEADING WAS NOT A HEADING. 30px against a 16px body is 1.9x. An editorial page runs its feature heading at three times its body or more. At 1.9x the eye has no reason to land there first. 2. THE POINTS OUTRANKED THE COPY THEY SIT UNDER. 14.5px at 74% ink against 16px at 68%: barely smaller, and BRIGHTER. Two levels of the ramp were competing instead of nesting, which is most of the flatness. 3. EVERY GAP WAS THE SAME. One `gap` on the column put identical space between eyebrow and heading, heading and body, body and points. Four levels, evenly spaced, read as four things of equal rank no matter what size they are. ============================================================ THE NEW RAMP ============================================================ eyebrow 11.5px 600 ink 42% tracked wider, and SMALLER than before heading 44px 500 ink 100% 2.5x the body, and LIGHTER than before body 17.5px 400 ink 56% larger than before, and dimmer points 15px 500 ink 84% small, but the brightest thing after the heading, and the only body-scale text carrying weight EVERY LEVEL DIFFERS FROM ITS NEIGHBOUR ON TWO AXES AT ONCE, which is the whole trick: size and ink between heading and body, ink and weight between body and points, size and tracking between eyebrow and heading. One axis at a time is what produces a ramp you can feel but not read. AND THE HEADING GOT LIGHTER, NOT HEAVIER. It was 600 while the chapter heading above it was 500, so a sub-heading was carrying more weight than its own section. At 44px a 500 holds the column on size alone, and light-at-large against dim-at-small is the more expensive-looking pairing. THE SPACE IS NOW RHYTHMIC, not uniform. The eyebrow is tight to its heading because they are one unit; the break before the points is the largest in the block because that is where the eye is meant to stop reading prose and start scanning. 18 / 26 / 34 / 14 between points. ============================================================ */ /* ---- the chapter's own head, which must stay above the feature rows ---- */ /* THE INVESTIGATION CHAPTER OPTS OUT. At 68px its heading broke across three lines with "live data" stranded on the last one, and the subline dropped to 56ch and wrapped tighter than the heading above it. The rest of Option 9 keeps the larger setting; the one chapter Ameer compared against Option 3 is set the way Option 3 sets it, which is the family default in css/landing-full.css, reached by simply not overriding it here. :not([data-module="investigation"] *) excludes anything inside that chapter, so no value has to be written twice to undo one. */ html[data-lp-option="9"] .l7-h:not([data-module="investigation"] *){ font-size:clamp(38px,4.2vw,68px);line-height:1.02;font-weight:500; letter-spacing:-.034em} html[data-lp-option="9"] .l7-sub:not([data-module="investigation"] *){ margin-top:clamp(18px,2vh,26px); font-size:clamp(16px,1.2vw,18.5px);line-height:1.66; color:rgba(255,255,255,.58);max-width:56ch} html[data-lp-option="9"] .l7-head:not([data-module="investigation"] *){padding-bottom:clamp(34px,5vh,64px)} html[data-lp-option="9"] .l7-head__cta{margin-top:clamp(28px,3.6vh,42px)} /* ---- the label: smaller, quieter, tracked wider ----------------------- A label's job is to name the block and then get out of the way. Making it smaller and dimmer while opening the tracking is what turns it from a fourth line of copy into a caption. */ html[data-lp-option="9"] .l7-eyebrow{ font-size:11.5px;font-weight:600;letter-spacing:.15em; color:rgba(255,255,255,.42)} html[data-lp-option="9"] .l7-eyebrow svg{ width:14px;height:14px;color:rgba(255,255,255,.3)} /* ---- the feature heading: the thing the eye lands on ------------------- */ html[data-lp-option="9"] .l7-h3{ font-size:clamp(30px,2.9vw,44px);line-height:1.06;font-weight:500; letter-spacing:-.03em;color:#fff;max-width:15ch} /* ---- the supporting message: larger, and dimmer ------------------------ Bigger type at lower contrast reads as secondary far better than smaller type at the same contrast, and it stays comfortable to read. 42ch keeps it a block rather than a line that runs the width of the column. */ html[data-lp-option="9"] .l7-row__copy .l7-p{ font-size:clamp(15.5px,1.15vw,17.5px);line-height:1.68;font-weight:400; color:rgba(255,255,255,.56);max-width:42ch} /* ---- the key points: the brightest thing after the heading ------------- */ html[data-lp-option="9"] .l7-list{gap:14px} html[data-lp-option="9"] .l7-list li{ font-size:15px;line-height:1.45;font-weight:500; color:rgba(255,255,255,.84);gap:12px} html[data-lp-option="9"] .l7-list svg{width:16px;height:16px;margin-top:2px} /* ---- THE RHYTHM ------------------------------------------------------ The single `gap` on the column is replaced by intervals, because the space between two levels is what tells you whether they belong together. */ html[data-lp-option="9"] .l7-row__copy{gap:0} html[data-lp-option="9"] .l7-row__copy > * + *{margin-top:0} html[data-lp-option="9"] .l7-eyebrow + .l7-h3{margin-top:clamp(14px,1.6vh,18px)} html[data-lp-option="9"] .l7-h3 + .l7-p{margin-top:clamp(20px,2.4vh,26px)} html[data-lp-option="9"] .l7-p + .l7-list, html[data-lp-option="9"] .l7-p + .l7-stats{margin-top:clamp(26px,3.2vh,34px)} /* ---- and more room around the whole block ---------------------------- */ html[data-lp-option="9"] .l7-row{padding-block:clamp(48px,7vh,96px); column-gap:clamp(40px,5.6vw,96px)} /* ---- the three cards under a chapter, kept on the same ramp ----------- */ html[data-lp-option="9"] .l7-h4{font-size:17.5px;line-height:1.28;font-weight:600; letter-spacing:-.014em} html[data-lp-option="9"] .l7-card .l7-p--s{ font-size:14.5px;line-height:1.6;color:rgba(255,255,255,.54)} html[data-lp-option="9"] .l7-cards{margin-top:clamp(36px,4.6vh,60px)} /* ---- narrower windows -------------------------------------------------- The ramp holds its PROPORTIONS as it shrinks; only the largest step is pulled in, because a 44px heading in a stacked column is a different job from a 44px heading beside a visual. */ @media (max-width:1240px){ html[data-lp-option="9"] .l7-h3{font-size:clamp(28px,3.6vw,38px);max-width:20ch} html[data-lp-option="9"] .l7-row__copy .l7-p{max-width:56ch} html[data-lp-option="9"] .l7-row{padding-block:clamp(40px,6vh,72px)} } @media (max-width:620px){ html[data-lp-option="9"] .l7-h{font-size:clamp(30px,8.4vw,40px)} html[data-lp-option="9"] .l7-h3{font-size:clamp(25px,7.4vw,32px)} html[data-lp-option="9"] .l7-eyebrow{font-size:11px;letter-spacing:.13em} } /* ============================================================ OPTION 9 ONLY: the top of the page, in three colours ============================================================ The head of the page arrived as one warm bloom, because what sits under .lp-bg there is the Investigation module's own ground and Investigation is the orange one. Every other place on this page where all three capabilities are in one frame is lit by all three: the closing call and the footer stand on an orange shoulder, a cyan shoulder and a purple low centre (.l7-end). The top of the page is the same kind of place, so it gets the same kind of light (Ameer, 27 Aug: "instead of orange, a mix of orange and purple and the deep, sitting in a very light way"). THREE LIGHTS ABOVE THE FOLD, and they are the closing call's own three at about two thirds of its strength: orange left of centre, the deep sea right of it, purple wide and lowest, all pushed above the top edge so only their falloff is on the page. The orange is not removed, it is joined. The three that were already here, at the shoulders of the fold, are untouched: this adds a group above them, it does not replace them. ONE BLOCK, ONE OPTION. Deleting it reverts the head of the page to exactly what Option 8 has, and nothing else moves. ------------------------------------------------------------------ */ html[data-lp-option="9"] .lp-bg{ background-image: /* ---- the new group, at the head of the page ---- */ radial-gradient(ellipse 40% 26% at 24% -8%, color-mix(in srgb, var(--orange-50) 13%, transparent) 0%, transparent 72%), radial-gradient(ellipse 44% 28% at 68% -8%, color-mix(in srgb, var(--cyan-50) 20%, transparent) 0%, transparent 74%), radial-gradient(ellipse 56% 32% at 47% -12%, color-mix(in srgb, var(--purple-50) 24%, transparent) 0%, transparent 72%), /* THE WARM GROUND UNDERNEATH HAS TO BE KNOCKED BACK, or the three lights are painted onto an orange bloom and the centre stays orange whatever they do. A thin cool veil across the top does that without darkening the head: it takes the warm centre toward the mix rather than hiding it. This is the layer to weaken first if the head reads too cool. */ linear-gradient(180deg, color-mix(in srgb, var(--purple-50) 13%, transparent) 0%, color-mix(in srgb, var(--cyan-50) 7%, transparent) 30%, transparent 58%), /* ---- and the fold's own three, exactly as css/landing-hero3.css has them: left shoulder warm, right shoulder cool, purple low between them, over the module's own background ---- */ radial-gradient(ellipse 52% 46% at 4% 60%, color-mix(in srgb, var(--orange-50) 17%, transparent) 0%, transparent 70%), radial-gradient(ellipse 50% 44% at 96% 60%, color-mix(in srgb, var(--cyan-50) 15%, transparent) 0%, transparent 70%), radial-gradient(ellipse 66% 40% at 50% 74%, color-mix(in srgb, var(--purple-50) 20%, transparent) 0%, transparent 72%), var(--bg)} /* ------------------------------------------------------------------ MEASURED, on the rendered page at 1600x1000, canvas stopped and the copy hidden, so these are the gradients themselves: OPTION 8 OPTION 9 nav row rgb(87,67,60) 9.2 rgb(93,83,101) 7.3 behind the heading rgb(35,31,34) 16.3 rgb(33,33,37) 16.0 behind the subhead rgb(40,34,46) 15.5 rgb(40,34,46) 15.5 behind the CTA row rgb(50,38,63) 14.1 rgb(50,38,63) 14.1 The fold's own copy does not move: the new group sits above it, so the heading, the subhead and the buttons are lit by the same three shoulder lights they always were. The one number that changes is the NAV ROW, 9.2 to 7.3, because that is the part of the page the new light is actually on. 7.3:1 is still past AAA for body text, but it is the figure to watch if these are ever pushed further. ------------------------------------------------------------------ */