/* PROJECT — Alere. iOS / Web Clinical Data Platform. Ported from the AxureRP export's projects-alere.html + files/projects-alere/ styles.css. Every coordinate, size, type size, leading and colour below is the original's own number, read out of that stylesheet — not estimated from a screenshot and not re-derived through transform maths. Where a value departs from the source it says so in the same comment, with the reason. --------------------------------------------------------------------------- COORDINATE SYSTEM The original is one absolutely-positioned canvas 8179px tall, and every widget carries a page coordinate. That is reproduced literally: `.case` is absolutely positioned at the page's origin and everything inside it uses the original's own left/top. So a number in this file can be checked against files/projects-alere/styles.css by searching for it, with no arithmetic in between. `.case` is OUT OF FLOW, which means .page cannot get its height from it — see the note on .page below. That is the deliberate trade: one coordinate system that matches the source exactly, at the cost of one stated height. Element order in the HTML IS paint order. No z-index anywhere, matching the original and the rest of this rebuild. is the LAST child of .page for exactly that reason: the original's nav master (u531..u538) is the last thing on the page, so it paints over the hero photograph. --------------------------------------------------------------------------- CANVAS WIDTH — 1444, not the source's 1496 files/projects-alere/styles.css sets `body { width: 1496px }`, and base.css anticipates that with "projects-alere at 1496 — those pages override this token". It is not overridden here, and this is why: 1496 is not a design decision, it is Axure reporting the bounding box of every widget. ONE widget reaches it: u541, the Time / Team list, a 258px-wide text box starting at 1238. Its longest line is "1 Product Manager" — about 150px of ink at 19px — so the box is roughly 100px wider than anything drawn in it and NOTHING on the page inks past ~1390. Meanwhile the nav master is 1444 wide at x 0, and the content bands (u285, u287, u292, u294, u328, u468) are 1440. So the composition is a 1440/1444 canvas with one over-wide text box hanging off the side of it. Taking 1496 would have centred a 1444 nav bar inside a 1496 page, putting the nav 26px left of where it sits on every other page in this rebuild, to buy nothing but empty margin. So 1444 is kept and the Time / Team box is trimmed from 258 to 206 — the only number on the page that is not the source's. It costs nothing: that box was 93px wider than its own longest line. The measurement and the failure it fixes are at .team-list. --------------------------------------------------------------------------- THE TWO OWNER'S CHANGES, both deliberate departures from the source: 1. SECTION TITLES ARE BLUE, NOT GREEN. The source's ._-_title_rows style is `rgba(53, 255, 0, 0.7725)` — the same saturated green the nav uses. Every title row on this page now takes --color-accent-cool (#81d3f8), the blue the Testimonials page already uses for names. See .section-title. 2. THE ACCOLADE QUOTE MARKS are the Testimonials treatment, not the source's. The source draws them at full size in solid green; they are now the same glyph at 62%, in the cool blue at 0.5. See .accolade::after — which reads the SAME svg file Testimonials does, so there is one copy of the artwork. Neither change is applied any wider than stated. The green that remains — the progress rings, the thumbs, the star, the "me" figure in each icon cluster — is the source's own and was not part of either instruction. */ /* --------------------------------------------------------------------------- PAGE SHELL --------------------------------------------------------------------------- */ /* .page's only in-flow child is the 66px nav, because .case is absolute. So the height is STATED, and this is the one number on the page that is arithmetic rather than a source value: 7625.5 the last thing on the page — the rendered bottom of .growth-text, MEASURED, not the source's drawn box + 120 bottom padding, the same figure about-testimonials.css uses It was 8299 while the page ran to the source's own content bottom (u329 at 7610 + 569 = 8179). Three owner's changes shortened it: the Accolades came down to the Testimonials type sizes, then had their spacing tightened — 322px between them — and Growth Mindset moved onto the site's body leading and lost another 138. .page is border-box (base.css sets it on *), so this height INCLUDES the padding rather than adding to it — hence 7746 stated outright rather than 7625.5 plus a padding declaration. If the copy ever reflows longer, this is the number that has to move. Measure it, do not guess it: document.querySelector('.growth-text').getBoundingClientRect().bottom */ .page { height: 7506px; } .case { position: absolute; left: 0; top: 0; width: 100%; } /* Everything inside the canvas is placed by the original's own page coordinates. Stated once here so no individual rule has to repeat it. */ .case > *, .cluster > * { position: absolute; } /* --------------------------------------------------------------------------- IN-SENTENCE EMPHASIS --------------------------------------------------------------------------- The same two forms as every other page in this rebuild, so the markup means the same thing wherever it appears: strong — a weight change AND the warm yellow colour only, at body weight, no italic This page uses far more than : most of its yellow runs are colour without a weight change (the results attributions, the outcome paragraph, the new-direction paragraph). The one outside Growth Mindset is the 450-interviews figure, which the source sets in Kumbh ExtraBold — 900. DECLARED HERE, AT THE TOP, and not beside the copy it applies to. Growth Mindset's lead-ins are 700 rather than 900, and `.growth-text b` and `.case b` are the same specificity (0,1,1), so whichever comes LAST in the file wins. With this block at the bottom it beat the override and every Growth lead-in rendered at 900 — measured, not supposed. Generic before specific fixes it without either rule having to inflate its selector to win an argument. */ .case em { font-style: normal; font-weight: var(--font-weight-body); color: var(--color-emphasis); } .case b { font-weight: 900; color: var(--color-emphasis); } /* --------------------------------------------------------------------------- HERO — the photograph, the client badge, the title and the lede --------------------------------------------------------------------------- */ /* u284, 0,66 1440x417. The canvas is 1444 wide, so the source leaves a 4px sliver of page colour down the right-hand side of the photograph. That is the original's own edge and it is kept. */ .hero-photo { left: 0; top: 66px; width: 1440px; height: 417px; object-fit: cover; } /* u285 — the vignette that makes the white left-hand side of the photograph dark enough to carry white type. The source is an SVG radial gradient in userSpaceOnUse coordinates with a gradientTransform, so it has to be resolved rather than copied: centre 1208.82, 180 r 689.82 matrix (0.99975 -0.02252 0.01532 0.68 -2.4507 84.824) Applying the matrix to the centre gives (1208.82, 180) back — it lands on itself to within 0.01px — so the transform's only real effect is the 0.68 on the y axis, which turns the circle into an ellipse: rx 689.82 x 0.9997 = 689.8 ry 689.82 x 0.68 = 469.1 Stops are the source's: fully transparent at the centre, #182738 at 87.8% alpha at the rim. The inner stop is written as page-colour-at-zero-alpha rather than `transparent`, because `transparent` is black-at-zero in some engines and would grey the midpoint of the ramp. */ .hero-scrim { left: 0; top: 66px; width: 1440px; height: 417px; background: radial-gradient( 689.8px 469.1px at 1208.8px 180px, rgba(65, 85, 106, 0) 0%, rgba(24, 39, 56, 0.878) 100% ); } /* The client badge. Appearance comes from components.css (.logo, .logo-mark, .logo-shadow); this supplies position and the one size that differs. The shared component is authored at the case-study CARD's 64px circle. Here the circle is the source's 102px (u333), so the two contact ellipses are larger to match — 160x22 and 94x15 (u331, u332), against the component's 101x14 and 59x9. Those are the source's own numbers for THIS instance, not the 64px ones scaled: 160/101 is 1.584 while 102/64 is 1.594, so scaling would have been wrong by a pixel. Blue, not the cards' grey: u163.svg fills the circle rgba(63,100,206) — which is --color-case-study-blue exactly, so .logo-blue applies unchanged. */ .hero-logo { left: 48px; top: 174px; width: 102px; height: 102px; } /* The mark lives INSIDE the circle, as it does on the case-study cards, so its offsets are circle-relative rather than page coordinates. Subtracting the circle's own origin from the source's: u334 57,209 85x28 minus u333 48,174 -> 9,35 */ .hero-logo-mark { left: 9px; top: 35px; width: 85px; height: 28px; } /* .logo-shadow states its own left/width/height for the 64px circle, so all four have to be overridden here, not just the ones that differ. THE SELECTOR NEEDS BOTH CLASSES. components.css writes `.logo-shadow.wide`, which is two classes; a single-class rule here loses the cascade to it and the shadow silently keeps the 101x14 card size. Measured, not assumed: the one-class version reported left 0 / 101x14 against the source's 19 / 160x22. */ .logo-shadow.hero-shadow-wide { left: 19px; top: 258px; width: 160px; height: 22px; } .logo-shadow.hero-shadow-tight { left: 52px; top: 265px; width: 94px; height: 15px; } /* u539. Josefin Light 46 — the same face and weight the case-study cards use for their titles. The source centres the text in a 56px box; `display: flex` + `align-items: center` reproduces that rather than guessing a top. */ .hero-title { left: 179px; top: 201px; width: 690px; height: 56px; margin: 0; display: flex; align-items: center; font-family: var(--font-heading-light); font-weight: 200; font-size: 46px; line-height: 1; color: var(--color-white); } /* u540 — the same sentence the projects-start card carries, word for word. 19/26 at 0.71 opacity, all three the source's. */ .hero-lede { left: 179px; top: 257px; width: 626px; margin: 0; font-family: var(--font-body-light); font-weight: 200; font-size: 19px; line-height: 26px; opacity: 0.71; } /* --------------------------------------------------------------------------- SECTION TITLE ROWS --------------------------------------------------------------------------- Six of these: My Tasks, Software, Services, Time / Team, Results, Accolades, Growth Mindset. In the source each is a text widget with a background SVG behind it; both halves are reproduced here in one element. THE BAND IS NOW FIGMA'S (owner, 2026-10-12): background reads --section-break-fade from base.css. What follows records the EXPORT'S band. THE BAND (export). A horizontal gradient, white 4.3% -> 1.2%. The source draws it per title at that title's own width, but every one of them uses the same two proportions — the fade starts at 56.9% of the width and finishes at 99.8%: u159 (1440 wide) x1 819.14 -> 56.9% x2 1437.63 -> 99.8% u292 (849 wide) x1 482.95 -> 56.9% x2 847.61 -> 99.8% u528 (316) u530 (314) u543 (273) all the same So the stops are percentages, not the pixel figures, and one rule covers all seven at whatever width each is given. THE TEXT sits on the BOTTOM of the 65px band, indented 66px — the source's `align-self: flex-end; padding: 2px 2px 0px 66px`. THE COLOUR IS THE OWNER'S CHANGE. The source is ._-_title_rows, `rgba(53, 255, 0, 0.7725)`. It is --color-accent-cool here, and at FULL strength rather than the source's 77%: the alpha was doing a job the green no longer needs doing. #35FF00 against #41556a is loud enough that 77% is what makes it liveable; #81d3f8 is already a quiet colour, and knocking it back a further quarter left the page's own section headings reading as disabled text. The type size, weight, face and indent are all untouched. */ .section-title { height: 65px; margin: 0; display: flex; align-items: flex-end; padding: 0 2px 0 66px; font-family: var(--font-body-light); font-weight: 200; font-size: 30px; line-height: 1.2; color: var(--color-accent-cool); background: var(--section-break-fade); /* Figma's; see base.css */ } /* "Growth Mindset" is followed on the same line by "What I learned:" in white at 49.8%. In the source that gap is thirteen non-breaking spaces — authoring, not typography — so it is a real margin here instead. The source's own gap is thirteen U+00A0, which measure 99px at 30px Kumbh Sans Light (read off a hidden probe span after document.fonts.ready — not estimated; an earlier 110 from an estimate put the aside 11px too far right). That would start the aside at 389. 152 IS USED INSTEAD, to open a gap the head fits inside. The source's head sits at x 356 and its own text starts at 389, so in the original the artwork covers the first 71px of "What I learned:" — see .growth-head for the change and the arithmetic. This margin is the second half of it: 24 + 104 + 24. */ .section-title .aside { margin-left: 152px; color: rgba(255, 255, 255, 0.498); } .title-tasks { left: 0; top: 483px; width: 849px; } .title-software{ left: 849px; top: 483px; width: 316px; } .title-team { left: 1170px; top: 483px; width: 273px; } .title-services{ left: 856px; top: 723px; width: 314px; } .title-actions { left: 0; top: 1045px; width: 1440px; } .title-results { left: 0; top: 5565px; width: 1440px; } .title-accolades { left: 0; top: 6192px; width: 1440px; } .title-growth { left: 0; top: 6962px; width: 1440px; } /* --------------------------------------------------------------------------- THE BRIEF — My Tasks / Software / Services / Time / Team --------------------------------------------------------------------------- */ /* Shared shape for the four lists under the first band. They are
    s here rather than the source's run of

    s, because they ARE lists — but they are NOT marked: the original shows no bullets and neither does this. */ .brief-list { margin: 0; padding: 0; list-style: none; font-size: 19px; color: var(--color-white); } /* u291. 19/19 with a blank line between items, so the pitch is 38 and the gap is one full blank line. THE SITE'S -25% LEADING RULE DOES NOT APPLY HERE, and that is a decision, not an oversight. base.css sets --line-height-body to 22.5px as a site-wide reduction of Axure's 30px body leading. This page's copy is not authored at 30: the lists run 19/19, 19/32 and 19/35, and the paragraphs 19/25. Pushing a 19px face onto a 14.25px leading would put the lines through each other. Where the source's own leading is used, it is stated per block below. Item 10 is long enough to wrap at 815px, so the block runs about one line past the source's drawn 385px box. The source overflows it too — Axure boxes are drawn, not fitted — and there is 93px of clear page below before the next band, so nothing collides. */ .task-list { left: 66px; top: 567px; width: 815px; line-height: 19px; } .task-list li + li { margin-top: 19px; } /* u527 and u457. Both 19/32, both starting at x 918 — which is neither band's own 66px text indent (915 and 922). Those two are the source's own hand slop; the lists agreeing with each other matters more than each agreeing with its band to within 4px, and 918 is what the source actually states for both. */ .software-list { left: 918px; top: 568px; width: 413px; line-height: 32px; } .services-list { left: 918px; top: 797px; width: 478px; line-height: 32px; } /* u541. 19/35. The count and the role are two weights in the source — Kumbh Light for the number, Kumbh Thin for the words — a distinction that survives at 200 only as a face change, so .count carries it explicitly. 206, NOT THE SOURCE'S 258 — and this is the one place the 1444-canvas decision in this file's header actually costs something, so it is spelled out here rather than left to be rediscovered. The source's box runs 1238..1496, which is where the 1496 body width comes from. Kept at 258 it overflows the 1444 canvas by 52px, and .page is centred rather than being the body, so that overflow escapes it: the document's scrollWidth went to 1496 and the whole site scrolled 52px sideways past its own design. Measured, not assumed — document.documentElement.scrollWidth read 1496 with the widest child reported as this list. 206 is 1444 - 1238: the box now ends exactly on the canvas edge. Nothing reflows, because the box was never doing any work — the ink of all seven lines, measured with a Range over each

  • 's contents (the
  • is a block and would only report the column width): 1 Product Manager 165.0 <- the widest 50 Developers 125.3 2 Engineers 103.3 4 Designers 102.7 2 QA leads 96.2 2012-2014 90.6 1 CEO 53.3 41px of slack on the longest line. The source's 258 was 93px wider than anything drawn in it. */ .team-list { left: 1238px; top: 571px; width: 206px; line-height: 35px; } .team-list .count { font-family: var(--font-body-light); } /* --------------------------------------------------------------------------- MY ACTIONS — four icon clusters with a label and a paragraph each --------------------------------------------------------------------------- The clusters look like bespoke artwork and are not. Every figure in all four is out of the shared kit (js/icons.js): torso + head a person. Placed as TWO icons, never one composed "person" shape, because this page uses four different head-to-torso offsets (45/28, 40/25, 28/17, 24/15) and a welded pair would be wrong for three of them. That is the same reason the kit dropped its composed person. speech the bubble, flipped on x where it points the other way rect the table top and its base in the Discovery cluster Colour carries the meaning, and it is the source's: green #35FF00 the one figure that is Jesse white at 49.8% the stakeholders being worked WITH #a0aab4 grey the wider group being worked FOR url(#kit-slate) every torso, without exception — the source fills all fourteen with the same #56687a -> #798796 ramp, which is --kit-slate in base.css A cluster is a plain positioned box with its own children placed against the PAGE, not against the cluster — .cluster > * inherits `position: absolute` from the rule at the top of this file and .cluster itself is a zero-size marker, exactly as the source's groups are (every Axure group here is 0,0 0x0). So a coordinate below is still the source's page coordinate. */ .cluster { left: 0; top: 0; width: 0; height: 0; } /* The figure fills — named for what they mean rather than what they are — NOW LIVE IN components.css. This file and css/projects-oracle.css had declared the same five rules with the same five values independently, which is the fork CLAUDE.md's collision warning is about; About > Process becoming a third consumer is what finally moved them. Nothing changed but the file. */ /* u424 / u425 / u426 / u427 — the four cluster labels. 30px in the source's pale yellow #FFECA9, which is NOT --color-emphasis (#FFE073): the two are different colours in the original and the paler one is used only here, so it is written literally rather than borrowed from a token that means "in-sentence emphasis". */ .action-label { margin: 0; font-family: var(--font-body-light); font-weight: 200; font-size: 30px; line-height: 1.2; color: #ffeca9; white-space: nowrap; } .label-vision { left: 154px; top: 1180px; width: 87px; } .label-relationships { left: 1126px; top: 1302px; width: 186px; } .label-findings { left: 1159px; top: 1689px; width: 121px; } /* The one label that is three lines, right-aligned, on its own 40px leading. */ .label-process { left: 95px; top: 1414px; width: 141px; line-height: 40px; text-align: right; white-space: normal; } /* The four paragraphs beside the clusters. All 19/25 in the source. */ .action-text { margin: 0; font-size: 19px; line-height: 25px; color: var(--color-white); } .text-vision { left: 493px; top: 1173px; width: 516px; } .text-relationships { left: 536px; top: 1293px; width: 357px; text-align: right; } .text-findings { left: 266px; top: 1671px; width: 659px; text-align: right; } /* u460 carries a letter-spacing the others do not — 0.5px, the source's own. */ .text-process { left: 543px; top: 1437px; width: 823px; letter-spacing: 0.5px; } .text-findings { letter-spacing: 0.5px; } /* The Discovery cluster's table: a rounded outline with a base bar under it. Both are plain rectangles in the source (u337/u338, class box_2), drawn with a 4px #a0aab4 border at radius 14 and a solid #a0aab4 pill at radius 30. */ .table-top { left: 317px; top: 1432px; --icon-width: 72px; --icon-height: 53px; --icon-fill: transparent; --icon-stroke: #a0aab4; --icon-stroke-width: 4px; --icon-radius: 14px; } .table-base { left: 311px; top: 1489px; --icon-width: 85px; --icon-height: 7px; --icon-fill: #a0aab4; --icon-radius: 30px; } /* --------------------------------------------------------------------------- THE ORIGINAL PLATFORM — the annotated screenshot --------------------------------------------------------------------------- */ /* u431. Orange plate, white type. #FF9100 is the source's and it is used twice on this page — here and on the curved arrow that hooks out of it — so the two are tied together by the same literal rather than by a token. It is deliberately NOT --color-emphasis: this is a label, not emphasis inside a sentence, and the two are visibly different oranges/yellows in the original. CENTRED IN THE PLATE — owner's change. The source pads the text 2px on every side and only centres it VERTICALLY, so the type sits hard against the left edge of the plate with 59px of empty orange trailing it. Centring on both axes is what makes the three gripes below line up on something; the ink is 291.5px wide in a 353px plate, so it now starts at 213.75 rather than 185. */ .platform-label { left: 183px; top: 1887px; width: 353px; height: 66px; margin: 0; display: flex; align-items: center; justify-content: center; padding: 2px; background: #ff9100; font-family: var(--font-body); font-weight: 400; font-size: 30px; line-height: 1.2; color: var(--color-white); } /* The three complaints under the plate. Owner's change: each now carries a short orange dash, which does two jobs at once — it ties them back to the plate by colour, and it indents the text onto the plate's own centred type. THE 31px INDENT IS DERIVED, NOT PICKED. The plate is 353 wide at x 183 and its ink measures 291.5 at 30px Kumbh Regular, so centred it starts at 183 + (353 - 291.5) / 2 = 213.75. The dash runs 183..207 and the text starts at 214 — within a quarter-pixel of the white type above it. The dash is ONE SOLID DASH, 24 x 5, in the plate's own #FF9100 — Oracle's bullet, made the one style for every orange bullet by the owner on 2026-10-12. It was the leader lines' 4-on-4-off pattern, 4 tall. */ .platform-gripes { left: 183px; top: 1975px; width: 249px; margin: 0; padding: 0; list-style: none; font-size: 19px; line-height: 29px; color: var(--color-white); } .platform-gripes li { position: relative; padding-left: 31px; } .platform-gripes li::before { content: ""; position: absolute; left: 0; top: 50%; width: 24px; height: 5px; transform: translateY(-50%); background: #ff9100; /* Oracle's solid dash — owner, 2026-10-12: one bullet style for all orange bullets */ } .platform-shot { left: 308px; top: 2070px; width: 1061px; height: 697px; } /* u432 — the orange arrow hooking off the plate. The source rotates a 122x27 element about ITS OWN centre, but the artwork file is 136x41 sitting at -2,-2 inside that element (the stroke's half-width plus the arrowhead's overhang). Place the file at its own page position and the two centres no longer agree, so the rotation origin is stated in the file's coordinates rather than left at 50% 50%: element 388,1994 122x27 -> centre 449, 2007.5 file 386,1992 136x41 -> centre 454, 2012.5 origin 449-386, 2007.5-1992 = 63, 15.5 Leaving it at 50% 50% would have swung the arrow ~7px off its target. The same correction is applied to the swoosh and both elbows below; each states its own arithmetic. */ .arrow-curved { left: 386px; top: 1992px; width: 136px; height: 41px; transform: rotate(67.89741174662048deg); transform-origin: 63px 15.5px; } /* ---- callouts ------------------------------------------------------------- */ /* The annotations around the screenshot. All 19px; the leading is per-callout and it is the source's, not one value applied to all — six of them are on 51, three on 25 and one on 29, and that difference is what stops the long right-hand labels from sitting where the short left-hand ones do. A 51px leading on 19px type means the ink of the first line sits 16px below the box top. That is the source's own construction and the leader lines are aimed at where it puts the text, so it is reproduced rather than normalised. */ .callout { margin: 0; font-size: 19px; color: var(--color-white); } .callout-features { left: 798px; top: 1950px; width: 307px; line-height: 51px; } .callout-lines { left: 957px; top: 1984px; width: 339px; line-height: 51px; } .callout-bold { left: 10px; top: 2133px; width: 323px; line-height: 51px; text-align: right; } .callout-icons { left: 1298px; top: 2129px; width: 84px; line-height: 25px; } .callout-colors { left: 1298px; top: 2202px; width: 127px; line-height: 25px; } .callout-arch { left: 144px; top: 2226px; width: 189px; line-height: 51px; text-align: right; } .callout-targets { left: 10px; top: 2297px; width: 323px; line-height: 51px; text-align: right; } .callout-borders { left: 1298px; top: 2354px; width: 132px; line-height: 25px; } .callout-dates { left: 10px; top: 2368px; width: 323px; line-height: 51px; text-align: right; } .callout-context { left: 417px; top: 2768px; width: 465px; line-height: 51px; } /* ---- leader lines --------------------------------------------------------- */ /* A dashed line with a solid arrowhead on its far end. Nine of them, and the only thing that varies is length and rotation, so they are CSS rather than nine SVG files — unlike the two elbows below, which bend. Read straight off the source's own geometry (u434 is the worked example; the others are identical bar their length): element 341,2249 79x4 the box, in page coordinates line M 0 2 L 71 2 so 71 = width - 8 arrowhead 69,12.2 79,2 69,-8.2 a 10-wide, 20.4-tall triangle whose tip lands on the element's right edge stroke 4px, dasharray 4,4 exact 4 on / 4 off opacity 0.498, on the ELEMENT (the stroke inside is solid white) repeating-linear-gradient gives the dash pattern exactly; CSS `border: dashed` does not — its dash length is engine-defined and would drift from the arrowheads. The head is a border triangle rather than a second gradient because 10 x 20.4 is not a shape a gradient can cut. */ .leader { /* SOLID — owner's rule, 2026-10-13: a pointer on an annotated screenshot is a solid line; a dashed line means progress through a process or the story. Oracle's pointer: 3px, white at 50%, an 8 x 14 head. */ height: 3px; opacity: 0.498; background: var(--color-white); background-clip: content-box; padding-right: 6px; box-sizing: border-box; } /* The story line ("There were 3 more sheets..."): same box, dashed. */ .leader-dashed { background: repeating-linear-gradient( to right, var(--color-white) 0, var(--color-white) 4px, transparent 4px, transparent 8px ); background-clip: content-box; } .leader::after { content: ""; position: absolute; left: calc(100% - 8px); top: 50%; width: 0; height: 0; transform: translateY(-50%); border-left: 8px solid var(--color-white); border-top: 7px solid transparent; border-bottom: 7px solid transparent; } /* Rotation is about the element's own centre, which is what the source does (`transform-origin: 50% 50%` on every one of them). */ .leader-features { left: 863px; top: 2030px; width: 71px; transform: rotate(90deg); } .leader-lines { left: 1079px; top: 2046px; width: 41px; transform: rotate(90deg); } .leader-bold { left: 341px; top: 2156px; width: 79px; } .leader-icons { left: 1258px; top: 2151px; width: 32px; transform: rotate(180deg); } .leader-arch { left: 341px; top: 2249px; width: 79px; } .leader-targets { left: 341px; top: 2320px; width: 79px; } .leader-dates { left: 341px; top: 2393px; width: 79px; } .leader-context-a{ left: 477px; top: 2737px; width: 84px; transform: rotate(270deg); } .leader-context-b{ left: 662px; top: 2737px; width: 84px; transform: rotate(270deg); } .leader-sheets { left: 431px; top: 4175px; width: 105px; } /* The two double-headed elbows. Same origin correction as the curved arrow: u443 element 1257,2182 32x32 -> centre 1273,2198 file 1255,2170 46x56 -> origin 18,28 u444 element 1257,2386 30x32 -> centre 1272,2402 file 1255,2374 44x56 -> origin 17,28 */ .elbow-up { left: 1255px; top: 2170px; width: 46px; height: 56px; transform: rotate(180deg); transform-origin: 18px 28px; } .elbow-down { left: 1255px; top: 2374px; width: 44px; height: 56px; transform: rotate(180deg); transform-origin: 17px 28px; } /* --------------------------------------------------------------------------- THE JOURNEY — four screens and the story between them --------------------------------------------------------------------------- */ .journey-text { margin: 0; font-size: 19px; line-height: 25px; color: var(--color-white); } /* 430, not the source's 450 — so the swoosh starts where the sentence stops. The dashed curve's TAIL is a fixed point: it comes out of the artwork file's own path through the rotation the source states, at page (409.1, 3102.1). (Its other end, the arrowhead, is at (140.5, 3607.6), which is level with the second line of the paragraph it points into — that end is right and must not move, which rules out sliding the curve.) So the paragraph is what moves. Its last line is "misused. A fine idea, but…", and where that line ENDS depends on where the line above it breaks — a step function, not a slider. Measured with a Range over the block's contents, taking the last client rect, at every width from 430 to 500: 430 5 lines ends 380.7 <- 28px short of the tail 440 5 lines ends 272.6 450 5 lines ends 272.6 (the source's width) 460 5 lines ends 89.5 470 4 lines ends 513.8 past the tail, and 19px off the screenshot 430 is the only width that brings the sentence anywhere near the curve. The remaining 28px is the gap a leader line wants anyway, and the last line's middle sits at y 3097 against the tail's 3102 — 5px, which reads as level. The block now ends at 477, so it clears the screenshot at 536 by 59px. */ .text-ceo-idea { left: 47px; top: 2985px; width: 430px; } .text-mapped-out { left: 168px; top: 3590px; width: 318px; } .text-more-sheets{ left: 98px; top: 4165px; width: 329px; } .text-tried { left: 64px; top: 4349px; width: 451px; } .text-direction { left: 64px; top: 4807px; width: 1323px; } .text-outcome { left: 64px; top: 4929px; width: 445px; } .shot-notes { left: 536px; top: 2859px; width: 851px; height: 625px; } .shot-spec { left: 536px; top: 3571px; width: 851px; height: 691px; } .shot-timeline { left: 536px; top: 4337px; width: 851px; height: 412px; } .shot-summary { left: 536px; top: 4929px; width: 851px; height: 553px; } /* u525. Origin correction as above: element -31,3218 583x263 -> centre 260.5, 3349.5 file -34,3215 590x270 -> origin 294.5, 134.5 */ .swoosh { left: -34px; top: 3215px; width: 590px; height: 270px; transform: rotate(114.3441291211067deg); transform-origin: 294.5px 134.5px; } /* --------------------------------------------------------------------------- RESULTS — four progress rings, a row of thumbs, a star, and the chart --------------------------------------------------------------------------- */ /* The list the badges sit beside. 120px leading is the source's, and it is what sets the whole section's rhythm: the badge centres come out at 5724.5, 5843.5, 5963.5 and 6084.5 — the first line's centre (top 5664 + 60) and then one leading apart, to within the ±1px the source hand-placed them at. Change this and every badge below moves. TWO COLUMNS NOW, where the source has one of six. Owner's change: the four PERCENTAGES stay in this column, and the two qualitative results move under the chart, level with rows 3 and 4. The whole section is 240px shorter for it and the empty area under the chart is gone. See .results-list-aside. WIDTH 580, not the source's 795. 795 would run to x 951 and straight through the right column's badge at 761. Nothing would collide visually — rows 1..4 ink to 656 at most, measured — but a text box that overlaps another column is a hit area waiting to be wrong. 580 ends at 736, clears the badge by 25, and still leaves the longest of these four rows 80px of slack. */ .results-list { left: 156px; top: 5664px; width: 580px; margin: 0; padding: 0; list-style: none; /* The SMALL label variant, which is the source's own 19px. This page keeps it because its Results section shares its width — the chart and the second metric column sit in the right half. See --metric-label-sm in base.css; Oracle takes the large one. */ font-size: var(--metric-label-sm); line-height: 120px; color: var(--color-white); } /* THE RIGHT-HAND COLUMN — the two results that are sentences rather than numbers, moved under the chart. LEVEL WITH ROWS 3 AND 4, which is the point of the arrangement: the reader gets four rows down the left and two beside them, not six down one side. The list carries the same 120px leading, so putting its first line's centre on row 3's (5964) is one subtraction: 5964 - 60 = 5904 and the second line lands on row 4's 6084 by itself. HORIZONTALLY THE COLUMN IS PINNED AT BOTH ENDS, to the chart directly above it, and the CHART moved to make that possible rather than the gutter giving way. The chain, from the only free number outward: longest line ink 552.1 measured, see below width 557 4.9 of slack text right 1387 the page's right text edge text left 830 1387 - 557 badge right 819 830 - 11, the left column's own badge-to-text clearance (its badge ends 145, text starts 156) badge left 742 819 - 77, the badge's width CHART left 742 the same, so the column sits under the chart flush at both ends gutter 88 742 + 88 = 830. The same as the left column's, which is what the chart moving bought. THE CHART WAS 626 WIDE AT 761 AND IS NOW 645 AT 742. It could move: its left edge is bounded by the Results copy beside it, and that copy just lost its two longest rows to this column — the four that remain ink to 656 at most, so 742 still clears them by 86. Nothing else about the chart changed; the height is still the two rings. THE INK IS MEASURED, and the copy edit moved it: "...became passionate advocates" 532.2 "...with the British NHS" 552.1 <- sets the width "...with the British NIS" 542.3 (the source's typo, 9.8px narrower — H is a wider letter than I) Two earlier attempts are recorded because both are easy to re-make. At a 542 column — which fitted "NIS" — the NHS line wrapped and row 2 dropped 60px out of level, which is the one thing this arrangement exists to prevent. Then at 830 with the badge left at 761, the text started 8px INSIDE the badge: the gutter had been computed from the badge's ORIGIN instead of its right edge, so the badge's own 77px width went missing from the sum. */ .results-list-aside { left: 830px; top: 5904px; width: 557px; } /* The parenthetical attributions, #FFE073 in the source — colour only, no weight change, which is exactly what means everywhere in this rebuild. */ .results-list em { font-style: normal; font-weight: var(--font-weight-body); color: var(--color-emphasis); } /* ---- Clinical Outcomes ---------------------------------------------------- REDRAWN. The source is a 1112x696 bitmap; the markup for the replacement is in projects-alere.html and the reasoning for it being inline is there too. This is where its geometry and its colours live. WHY IT COULD NOT STAY A BITMAP. The owner asked to keep the width and cut the height, and to bring the title down from "freaking huge". A bitmap gives you one knob: scale. Keeping 626 of width meant keeping 392 of height and a ~43px title, and squashing only the height would have condensed the lettering. Once it is geometry, the plot area's shape and the type size are independent, which is what the instruction actually asks for. WHAT WAS TRACED, all by pixel scan of the PNG: plate x 87..1075, y 148..625 of 1112x696, fill 83,109,135 rules 3, at 0.2484 / 0.5000 / 0.7516 of the plate height, colour 158,164,172 — i.e. quarters, drawn as quarters here entry line 6,219,190, full plate width, 13px at 1112 wide error line 185,45,93, full plate width, 12px title 247,150,69, ink box 630x59 centred on the plate at x 581 keys "Data Entry Time" ink 356x35, "Error Rate" 217x35, white Both series are 21 points sampled evenly across the plate and converted to plate units (0..1 on each axis) before being placed, so the shape is independent of the box it ends up in. NO AXIS LABELS, because the source has none. Worth recording: a downscaled screenshot of the FIRST build of this page was read as showing "100 / 75 / 50 / 25 / 0" and "Q1..Q10". Neither the source nor the build has ever had them — that was type invented by reading a 1000px-wide crop of a 1444px render. Do not trust small text read off a downscaled screenshot; open the asset. ---- THE BOX --------------------------------------------------------------- 645 x 242 at 742, 5640. RIGHT EDGE IS FIXED; the left edge follows the column beneath it: right edge 1387 the page's own right-hand text edge, shared with .text-direction and .growth-text left edge 742 set by the results column BELOW it, which is pinned to the same two edges — see .results-list-aside for the chain. It clears the copy to its left with room to spare: those four rows ink to 656 at most, measured with a Range over each
  • (the
  • is a block and would only report the column width), so the gutter is 86. It was 626 wide at 761 while the two longest rows were still in that column and inked to 698. HEIGHT IS NOW THE TWO METRICS, exactly. The plate sits at 46..242 inside the graphic, so on the page it runs 5640 + 46 = 5686 metric 1's ring TOP 5640 + 242 = 5882 metric 2's ring BOTTOM — it brackets the two rings whose numbers its two lines ARE. That is the same "tie it to the first two metrics" as before, but now it sets the height instead of being approximated by it: 196px of plate, down from 392px of whole graphic. The 46 above the plate is a 24px title on a 30px line box plus a 16px gap. The title's ink then starts at page 5646, clearing the Results title row (which ends at 5630) by 16. */ .chart-outcomes { left: 742px; top: 5640px; width: 645px; height: 242px; margin: 0; } /* The plate and its rules. Both colours are the source's own, written literally rather than as tokens: they are this artwork's palette, not the site's. */ .chart-plate { fill: #536d87; } .chart-rule { stroke: #9ea4ac; stroke-width: 1; } /* Stroke widths are NOT the traced 13 and 12 scaled by width (7.3 and 6.8). Those were drawn for a plate 392px tall; this one is 196, and a 7px line on it would be a fifth of the distance between the two series. 5 and 4.6 keep the source's own 13:12 ratio between them at half the weight. */ .chart-line { fill: none; stroke-linecap: round; stroke-linejoin: round; } .chart-line-entry { stroke: #06dbbe; stroke-width: 5; } .chart-line-errors { stroke: #b92d5d; stroke-width: 4.6; } /* 24px, against the ~79px the source bakes in — which is 43px once the artwork is at this width, half again bigger than the page's own 30px section titles. 24 sits it below them, where a chart title belongs. */ .chart-heading { font-family: var(--font-body-light); font-weight: 200; font-size: 24px; fill: #f79645; } /* 17px, from the source's ~47px-at-1112 (26px at this width). Just under the page's 19px body, so they read as annotations on the artwork rather than as copy. Their positions are the source's own ink centres, in plate units. */ .chart-key { font-family: var(--font-body-light); font-weight: 200; font-size: 17px; fill: var(--color-white); } /* ---- the badges ----------------------------------------------------------- */ /* All six badges are one 77x77 box centred on their row, so a badge is placed by a single top and every part of it is measured from the same centre. The source instead places the track and the arc as two separate widgets whose tops differ by 2px — 70,5688 and 68,5686 — precisely so that their centres agree at (106.5, 5724.5). Reproducing two boxes to make one centre would be copying the workaround rather than the result. Left is 68 (the arc widget's), so the 77px box spans 68..145 with its centre on the source's 106.5. */ .badge { left: 68px; width: 77px; height: 77px; } /* A badge's contents are placed against the BADGE, so the badge moves as one thing. .case > * gives absolute positioning to the canvas's own children; its grandchildren need their own rule. */ .badge ui-icon { position: absolute; } .badge-98 { top: 5686px; } .badge-70 { top: 5805px; } .badge-62 { top: 5925px; } .badge-50 { top: 6046px; } /* The two moved badges. Their TOPS are rows 3 and 4's own — 5925 and 6046 — because "level with the metrics to their left" means level, and sharing the number is what guarantees it rather than reproducing it. Left is the chart's left edge; see .results-list-aside for why the column is pinned there. */ .badge-thumbs { left: 742px; top: 5925px; } .badge-star { left: 742px; top: 6046px; } .ring-art { position: absolute; inset: 0; width: 77px; height: 77px; } /* THE TRACK. The source strokes a 73px circle 6px wide and clips the stroke to the circle — Axure's inner stroke — so what is drawn is a 3px band inside a 36.5px radius. As a plain SVG stroke that is r 35, width 3. The 0.2 comes from the widget's own opacity (u282/u298/u465, class ax_default with opacity: 0.2 and a solid white stroke inside). ONE BADGE DISAGREES AND KEEPS ITS OWN VALUE. The 50% badge's track is u165, not u179: stroke 8 (a 4px band, r 34.5) at rgba(255,255,255,0.192) with no widget opacity. It is a hairline heavier and a hair dimmer than the other three. That is hand slop in the original rather than meaning, but it is measurably there, and CLAUDE.md's rule is not to apply one value to four without checking each — so it is checked, and stated. */ .ring-track { fill: none; stroke: var(--color-white); stroke-width: 3; opacity: 0.2; } .badge-50 .ring-track { r: 34.5px; stroke-width: 4; stroke: rgba(255, 255, 255, 0.192); opacity: 1; } /* THE ARC. Same construction: the source's path is an annulus 8px thick with a 38.5px outer radius, so the centreline is r 34.5 at width 8. `pathLength="100"` on the circle is what lets the dash be the percentage itself — no circumference, no calc, and the number in the markup is the number in the copy beside it. DIRECTION IS COUNTER-CLOCKWISE FROM TWELVE O'CLOCK, and that is measured, not assumed. The source's arcs are clipped to their own ink, and their widths give it away: the 50% arc's box is 39 wide starting at the badge's left edge, so it covers the LEFT half, not the right. 62% -> 64 wide and 70% -> 76 wide agree with the same reading (the rightmost point of a 223.2deg and a 252deg counter-clockwise sweep lands at x 64.8 and 75.1). Clockwise would have put the 50% box at x 106.5 with width 38.5. scaleX(-1) reverses an SVG circle's built-in clockwise direction and moves its start to nine o'clock; the rotate then carries that start up to twelve. The order matters — CSS applies the rightmost transform first. */ .ring-arc { fill: none; stroke: var(--color-accent); stroke-width: 8; stroke-dasharray: var(--pct) 100; transform: rotate(90deg) scaleX(-1); transform-origin: 38.5px 38.5px; transform-box: view-box; } /* The number inside the ring. 30px for the figure, 17px superscript for the sign — both the source's, and the superscript is its own rather than a `vertical-align: super` span so it still reads as one number without CSS. CENTRED, where the source hand-nudges each one with a left padding (12, 12 and 13px) and places the 62% figure as a separate absolutely-positioned box at 88,5945. Those four constructions put the ink's centre at 36, 36, 36.5 and 40.5 against a box centre of 38.5 — they are all aiming at the middle and missing it by different amounts. Centring hits what they were aiming for and makes the four agree. */ /* ONE INLINE RUN, NOT A FLEX CONTAINER — Oracle's construction, ported back here on 2026-09-03 (HANDOFF's item 3, owner-approved). This used to be `display: flex; align-items: center`, and the block below derived the right raise for the per-cent sign and then could not apply it: a flex item ignores `vertical-align`, so the digits and the sign were two items each centred in the 77px box on their own, and the sign was then nudged with `top: -9.8px` from a position that assumed a shared baseline. It landed ~8px above the digits' cap and cut into the green ring — the fault css/projects-oracle.css records, and the one the owner saw. `line-height: 77px` on a 77px box centres the single line exactly where `align-items: center` did (the digits' em box starts at y 19.5 either way), but everything is now in ONE inline formatting context, so the sign can be aligned against the digits' baseline rather than against the box. */ .ring-value { position: absolute; inset: 0; text-align: center; line-height: 77px; white-space: nowrap; font-family: var(--font-body); font-weight: 400; font-size: 30px; color: var(--color-white); } /* THE PER-CENT SIGN HANGS, AND IT TOP-ALIGNS. Owner's change; the source does neither. `width: 0` is what does the first half. As an ordinary inline run the sign takes part in centring, so the pair "98%" is what gets centred and the digits end up left of the ring's middle. At zero width it contributes nothing to the line, the DIGITS centre on the ring, and the sign hangs off their right edge — which is both "closer to the right side" and "the big numbers closer to the centre of the circle" in one move, with nothing to hand-place. It still fits: the digits are 34.5px wide at 30px, so they run 21.25..55.75 in the 77px box and the sign sits 55.75..66.75, inside the ring's 8..69 opening. `vertical-align: 9.795px` is the second half, now applied where it acts — a length on vertical-align raises the inline box's baseline by that much above the parent's, which is exactly "top-align the two cap heights". It is the difference of the two caps, from canvas TextMetrics `actualBoundingBoxAscent` at the rendered sizes, measured for THIS page's four strings on the self-hosted static cuts (CLAUDE.md: caps are per-string, so each was checked rather than assumed): "98" "70" "62" "50" Kumbh Sans 400 @30px 22.412 (all four) "%" Kumbh Sans 200 @17px 12.617 raise 22.412 - 12.617 = 9.795 The same 9.795 Oracle uses for its "84", which is the check that the two pages now share one construction and not just one number. `line-height: 0` collapses the sign's own line box so the 17px run cannot grow the 77px line (the fixed-leading trap in CLAUDE.md). */ .ring-value sup { display: inline-block; width: 0; vertical-align: 9.795px; position: relative; font-family: var(--font-body-light); font-weight: 200; font-size: 17px; line-height: 0; } /* ---- the five thumbs ------------------------------------------------------ */ /* A raised thumb is TWO pieces in the source and stays two here: the hand () and a small green cuff below the wrist (). They are not welded, because the cuff sits at a different offset on all five copies — the source's own numbers, verbatim: cuff 77,6193 4x12 hand 81,6186 15x19 cuff 110,6198 5x13 hand 114,6191 17x20 cuff 86,6215 5x13 hand 90,6208 17x20 cuff 104,6180 3x10 hand 107,6175 12x15 cuff 113,6221 3x10 hand 116,6216 12x15 Three hand sizes, three cuff sizes, five different gaps. This is exactly the case the kit's head-and-torso rule was written for. THE OFFSETS BELOW ARE BADGE-RELATIVE — the page coordinates above minus the badge's own origin at 68, 6166. They were page coordinates until the badge moved out from under the fourth ring and over under the chart; eleven hand-updated coordinates is eleven chances to get one wrong, and this way the badge carries its contents. The subtraction, once, for the record: cuff 1 77 - 68, 6193 - 6166 -> 9, 27 hand 1 81 - 68, 6186 - 6166 -> 13, 20 ... and so on */ .thumb-hand, .thumb-cuff { --icon-fill: var(--color-accent); } .thumb-1-cuff { left: 9px; top: 27px; --icon-width: 4px; --icon-height: 12px; } .thumb-1-hand { left: 13px; top: 20px; --icon-width: 15px; --icon-height: 19px; } .thumb-2-cuff { left: 42px; top: 32px; --icon-width: 5px; --icon-height: 13px; } .thumb-2-hand { left: 46px; top: 25px; --icon-width: 17px; --icon-height: 20px; } .thumb-3-cuff { left: 18px; top: 49px; --icon-width: 5px; --icon-height: 13px; } .thumb-3-hand { left: 22px; top: 42px; --icon-width: 17px; --icon-height: 20px; } .thumb-4-cuff { left: 36px; top: 14px; --icon-width: 3px; --icon-height: 10px; } .thumb-4-hand { left: 39px; top: 9px; --icon-width: 12px; --icon-height: 15px; } .thumb-5-cuff { left: 45px; top: 55px; --icon-width: 3px; --icon-height: 10px; } .thumb-5-hand { left: 48px; top: 50px; --icon-width: 12px; --icon-height: 15px; } /* u320 — the star in the last badge. The kit's own shape, at the source's non-uniform 50x48 (the shape is authored 24x23, so this is 2.083 on x and 2.087 on y — which is why the kit does not lock the aspect). Badge-relative, like the thumbs: the source's 82, 6297 minus that badge's origin at 68, 6284. */ .results-star { left: 14px; top: 13px; --icon-width: 50px; --icon-height: 48px; --icon-fill: var(--color-accent); } /* --------------------------------------------------------------------------- ACCOLADES — six quotes from clinicians --------------------------------------------------------------------------- The source's construction is a band rectangle with a text box and a pair of quote marks laid on it, and the three are in lockstep on all six: the text is 129px right of the band and 46px down, and the marks are 84px left of the text and 10px up. Those two offsets are what the shared rules below encode, so a quote is placed by ONE coordinate — its band's — and the rest follows. band 1 51,6532 799 band 4 780,6938 660 band 2 708,6627 732 band 5 0,7068 707 band 3 136,6803 799 band 6 588,7221 799 */ /* SET AT THE TESTIMONIALS PAGE'S SIZES, NOT THE SOURCE'S — owner's change, and the biggest departure on the page. The source is a display quote: 26/30 for the words, 20/30 for the credit, in a 203px band with a 145px text box drawn inside it. Against the rest of this rebuild that reads a size and a half too big, and Testimonials had already settled what a quotation looks like here: quote 19px / --line-height-body (22.5) credit 20px / --line-height-body, Kumbh Thin 200 dash one em dash + nbsp ("— "), not the source's two en dashes and a space ONE THING IS DELIBERATELY NOT COPIED FROM TESTIMONIALS: its `.role` is `display: block`, so the person's title drops onto its own line under their name. Here the credit is a speciality and a setting — "Pediatrician in review session" — which is one phrase, not a name and a job. It stays on one line. The blocks are correspondingly denser. Heights are no longer stated at all: the band is padding around its own content, so it is exactly as tall as the quote in it and a two-line quote and a three-line quote can never share a wrong fixed height. vertical 24 top and bottom, against the source's 46 / 12 (which are not even symmetric — the source's box is drawn, not fitted). 30 was here first and came down on a second look at the section: the band is 138 tall around 90px of content rather than 150. left 80 to the quote, against 129. The marks hang 53.9 left of the quote, so this leaves 26px of band outside the mark ink. right 60, against the source's 113..247 (it varies per block, because each band was drawn by hand)
    carries a UA margin of 1em 40px. Absolute positioning does not remove it — it offsets the box from the left/top it was given, which put every quote 40px right and 16px low. The offset is padding rather than an absolutely-positioned inner box because the
    has to FOLLOW the quote, and how far down it starts depends on how many lines that quote takes. Positioning the blockquote absolutely left the caption behind at the figure's own origin (measured: 51,6548 instead of 180,6638), and there is nowhere to wrap the two together, because figcaption must stay a direct child of figure. */ .accolade { margin: 0; padding: 24px 60px 24px 80px; /* Stated once, from the quote's own width plus that padding, so the band and the text it wraps can never be given two different ideas of how wide the block is. .page is border-box (base.css sets it on *), so this width INCLUDES the 140px of padding. */ width: calc(var(--quote-w) + 140px); /* The band. White 4.3% fading to nothing, the fade starting at 67% of the width — the source's four gradients are 490.44/732, 535.33/799, 442.2/660 and 473.69/707, all of which are 67.0%. The same figure as the alternating bands on Collaboration, Process and Testimonials, which is not a coincidence: it is one Axure style, "alternating text rows". */ background: linear-gradient( to right, rgba(255, 255, 255, 0.043) 0, rgba(255, 255, 255, 0.043) 67%, rgba(255, 255, 255, 0) 100% ); } /* `position: relative` only so the quote marks have something to hang off — the block's own placement comes from the figure's padding. */ .accolade blockquote { position: relative; margin: 0; width: var(--quote-w); } .accolade p { margin: 0; font-family: var(--font-body); font-weight: var(--font-weight-body); font-size: 19px; line-height: var(--line-height-body); color: var(--color-white); } /* NO GAP BETWEEN THE TWO PARAGRAPHS OF QUOTE 3, and that is on purpose. Testimonials puts one blank line between a quote's paragraphs, and that rule was copied here first. It is wrong for this page: the only multi-paragraph quote is "I love this! When can we have this? / What do I have to do to get this installed?", which is one person saying one thing over two lines, not two paragraphs. The source agrees — it sets them as two consecutive

    s with no blank

    between, where every other break on the page HAS one. */ /* ONE BLANK LINE before the credit, which is Testimonials' rule. The source's own gap is a 13px blank

    — 16px — which at 22.5px leading would sit the credit CLOSER to the quote than the quote's own paragraphs sit to each other. */ .accolade figcaption { margin-top: var(--line-height-body); font-family: var(--font-body-light); font-weight: 200; font-size: 20px; line-height: var(--line-height-body); color: var(--color-white); /* The credit is one phrase and never breaks. The block widths below are sized so it cannot overflow — see --quote-w. */ white-space: nowrap; } /* The speciality, in the source's Kumbh SemiBold 650 and warm yellow. Yellow, not the cool blue the Testimonials attributions use: there the colour marks the person NAMED in a credit, and these six clinicians are anonymous. That distinction used to be "blue means a link". It no longer is — no credit on Testimonials is a link any more — so blue now says nothing about clickability anywhere the two pages are compared. */ .accolade .who { font-family: var(--font-body); /* 600, not the source's 650: the self-hosted static cuts (base.css) have no 650 and would snap it up to 700. Owner's choice of 600, 2026-09-03, as the nearest cut that cannot widen a credit and wrap it. */ font-weight: 600; color: var(--color-emphasis); } /* ---- placement ------------------------------------------------------------- THE STAGGER IS THE SOURCE'S; THE DENSITY IS NOT. Horizontally nothing has moved: every block still starts its text on the source's own x — 180, 837, 265, 909, 129, 717 — so the left-right rhythm the original composed is untouched. Only the widths and the vertical spacing changed, and both follow from the type being smaller. WIDTH. Scaling by 19/26 = 0.731 keeps each quote breaking into the same number of lines it broke into at 26px. That is the starting figure; the binding constraint is the credit, which does not wrap. Measured at 20px: "— General Practitioner in brainstorming session" 439.8 <- widest "— Cardiologist in brainstorming session" 364.8 "— Cardiologist in testing session" 298.7 "— Pediatrician in review session" 293.4 so each block takes whichever is larger: block source x 0.731 credit used 1 557 407 445.1 452 2 591 432 297.2 432 3 591 432 297.2 432 4 413 302 368.0 374 5 433 316 301.9 316 6 617 450 445.1 450 (The credit figures are re-measured on the settled page — a Range over the rendered figcaption, not a probe span — which is why they differ by ~5px from the estimates the em-dash swap was planned against. 440 and 365 were in here first and overflowed their content box by 5.1 and 3.0px. Blocks 1 and 4 are then the credit's width plus ~6, rather than the credit's width exactly: a caption ending on the content edge to 0.0px is not a fit, it is a coincidence waiting for a font metric to change.) VERTICAL. The source's band tops are 6532, 6627, 6803, 6938, 7068, 7221 — gaps of 95, 176, 135, 130, 153 against a 203px band, which is what makes the blocks overlap and read as clippings laid down rather than as a list. Those gaps were first scaled by the band's own shrink and then tightened again at the owner's request. The rhythm below is NOT a scaling of the source's any more; it is the tightest arrangement that still keeps the composition legible, and it is DERIVED from one rule: ADJACENT blocks overlap; blocks that are not adjacent must clear each other, because the pairs that skip a step (1&3, 2&4, 3&5, 4&6) all share horizontal range and would otherwise stack two 4.3% bands into one 8.6% patch in the middle of the section. With a 138px band that means any such pair needs 146px between their tops (138 plus 8 of clearance), and the gaps below are the smallest set that satisfies every one of them at once: block top gap clears 1 6532 - 2 6594 62 overlaps 1 by 76 3 6740 146 clears 2 by 8 and 1 by 70 4 6816 76 overlaps 3 by 62, clears 2 by 84 5 6888 72 overlaps 4 by 66, clears 3 by 10 6 6964 76 overlaps 5 by 62, clears 4 by 10 THE 146 IS FORCED, not chosen. Block 3's right edge is 757 and block 2's left edge is also 757 — they are edge to edge, because the source puts their text at 265 and 837 and 265 + 432 + the padding lands exactly on it. Two faint bands sharing an edge read as one 1144px band, and their x cannot move without abandoning the source's stagger, so the separation has to be vertical. Every other gap in the table is as small as its own constraint allows. The section spans 570px against the 687 it did before and the source's 892. Growth Mindset follows it up; see .growth-head. */ /* THE QUOTE MARKS — the owner's second change. The glyph is the same file the Testimonials page uses, and that file is in fact THIS page's artwork: Axure filed the pair under images/projects-alere/ (u473 the dot, u474 the hook) because Alere is where it first appeared, and about-testimonials borrowed it from there. So this is the original owner of the shape asking for it back in the form the other page settled on. What changes from the source: it was 21x21 + 21x22 at full size in solid #35FF00 — the "big fat green ones". It is now the Testimonials treatment, number for number: scale 62% box 59x39 -> 36.6 x 24.2 colour --color-accent-cool at 0.5 offset the source's own mark-vs-text offset (-84 x, -10 y), plus the -3,-3 that cancels the file's rotation slack, all x 0.62: x (-84 - 3) x 0.62 = -53.9 y (-10 - 3) x 0.62 = -8.06 -> -8 The x offset is the one number that is NOT simply Testimonials' — that page re-cut the gutter to 60px because its layout moved. Here nothing moved, so the source's own 84px gutter is scaled instead, which keeps the marks where the original hangs them relative to the text. Second consumer of this artwork. If a third appears, the mask belongs in components.css; two is not yet enough to hoist it. mask-size MUST be stated — the `mask` shorthand would reset it to the file's intrinsic 59x39 and the glyph would be clipped by the smaller box instead of scaled into it. */ .accolade blockquote::before { content: ""; position: absolute; left: -53.9px; top: -8px; width: 36.6px; height: 24.2px; background-color: var(--color-accent-cool); opacity: 0.5; -webkit-mask-image: url(../images/about-testimonials/quote-marks.svg); mask-image: url(../images/about-testimonials/quote-marks.svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: contain; mask-size: contain; } /* left = the source's text x, minus the 80px padding. width = 80 + quote + 60, so the band is exactly its padding plus the quote and never has to be kept in step with it by hand. */ .accolade-1 { left: 100px; top: 6292px; --quote-w: 452px; } .accolade-2 { left: 757px; top: 6354px; --quote-w: 432px; } .accolade-3 { left: 185px; top: 6500px; --quote-w: 432px; } .accolade-4 { left: 829px; top: 6576px; --quote-w: 374px; } .accolade-5 { left: 49px; top: 6648px; --quote-w: 316px; } .accolade-6 { left: 637px; top: 6724px; --quote-w: 450px; } /* --------------------------------------------------------------------------- GROWTH MINDSET --------------------------------------------------------------------------- */ /* The head with the hole, beside the heading — the same artwork the original puts on all four project pages, and already in this rebuild as images/components/head.svg with .head-figure to size it. The source's element is 104x120 (0.867); the traced file is 538x622 (0.865) and .head-figure locks that aspect, so stating the width gives a height of 120.2 rather than 120. That 0.2px is the trace, not a placement error, and it is left alone rather than unlocking the aspect to force an integer. THE OPENING IS FILLED, AND IT HOLDS THE GEARS. The source's u208.png is three layers welded into one bitmap: the head silhouette at white 34.5%, a #41556A disc filling the cranium, and three grey gears drawn on that disc. Only the silhouette survived into head.svg, so the port showed an empty outline. The gears are now images/components/head-gears.svg — measured off that bitmap, redrawn as geometry, and filed beside head.svg because they are the same shared asset (all four project pages use it). TWO THINGS ARE DELIBERATELY BETTER THAN THE SOURCE, at the owner's request: * THE GEARS ARE MASKED BY THE CIRCLE. In the original all three overrun it — the big one 13px past the top, and the lower-right one 26px past the bottom and out onto the head's silhouette entirely. .head-slot already clips to the opening's ellipse (components.css), so putting them inside it trims them to the opening and they read as machinery seen through a port rather than as artwork that missed. * THE FILL LIVES HERE, NOT IN THE FILE. The disc colour measured rgb(65, 85, 106), which is --color-bg exactly — the page's own background. So it is set as a background on the slot and the gear file has a hole where its hubs are, rather than #41556A being written into the SVG in three places where it could drift from the page it is supposed to match. IT SITS BETWEEN THE TWO TITLE STRINGS — owner's change. The source puts it at x 356, which is ON "What I learned:" rather than beside it: that string starts at 389 and the head spans 356..460, so the artwork covers its first 71px. In the original the head is a white silhouette at low alpha and the words read through it; here it reads as a collision. The gap between the strings is opened up to hold it, and the head is centred in that gap. Every figure is measured, none is picked twice: "Growth Mindset" ink 224.0 at 30px Kumbh Light, from x 66 -> ends 290 head width 104 gap either side 24 (the one chosen number) head left 290 + 24 = 314 aside starts 314 + 104 + 24 = 442 .aside margin-left 442 - 290 = 152 Change the 24 and both the head's left and the aside's margin move together — they are the only two numbers below that depend on it. THE WHOLE SECTION MOVES UP 322px from the source, because the Accolades above it lost that much: first when their type came down to the Testimonials sizes, then again when their spacing was tightened. The three pieces keep the source's own spacing between THEMSELVES, so only one number is chosen here and the other two follow from it: accolades end 7102 (block 6: top 6964 + its 138px band) + 46 7148 the source's own accolades-to-head gap (its 7470 against an accolades end of 7424) head 7148 + 54 7202 title row (source: 7524 - 7470) + 86 7288 body copy (source: 7610 - 7524) */ .growth-head { left: 314px; top: 6908px; --head-width: 104px; } /* The opening's own colour — the disc the gears turn on. */ .growth-head .head-slot { background: var(--color-bg); } /* The gear plate fills the slot exactly: head-gears.svg is authored in the SLOT's coordinate space (viewBox 405x388, which is the 75.28% x 62.38% that components.css gives the slot), so it needs no offset of its own and the slot's overflow does the masking. */ .growth-head .head-gears { width: 100%; height: 100%; } /* u329, RESET TO THE SITE'S BODY CONVENTIONS rather than the source's — owner's change, and the point of it is that this page should read like the rest of the rebuild rather than like the export. The source is 19px on 34px leading with a blank 19px line between lessons, so each paragraph break costs 34px and the block ran 476px tall. What the two long-form About pages do, and what this now does: size 19px unchanged leading --line-height-body 22.5px (base.css) paragraph gap 30px the figure css/about-collaboration.css and css/about-approach.css both use base.css calls the leading token a site-wide -25% on Axure's 30px. Applying it to a 34px source value is a slightly different sum, but the token is the answer to "what is the leading of body copy on this site", and this is body copy — the other lists on this page are not, which is why .task-list and .results-list still carry the source's own numbers. The block is ~130px shorter as a result; the page height at the top of this file is the number that absorbs it. */ .growth-text { left: 64px; top: 7048px; width: 1323px; margin: 0; font-size: 19px; line-height: var(--line-height-body); color: var(--color-white); } .growth-text p { margin: 0; } .growth-text p + p { margin-top: 30px; } /* The lead-in to each lesson. 700 here, not the 900 that Collaboration and Process use, because the source says 700 — those pages' copy is set in Kumbh ExtraBold and this page's in Kumbh Bold. Same colour, same job, one weight lighter. */ .growth-text b { font-weight: 700; color: var(--color-emphasis); } /* The one aside, at the end of the last lesson: white at 50%, the source's. */ .growth-text .quiet { color: rgba(255, 255, 255, 0.502); }