is a flex child of the head now rather than a sibling after it, and it is given a flex-basis: a flex item with no basis is sized from its content, and a paragraph's max-content width is the whole paragraph, so the deck always overflowed the line and wrapped to its own row. With a basis it shares the row — heading left, deck right, and a trailing "all ..." link pushed to the end by space-between. When the two bases no longer fit side by side, flex-wrap stacks them heading first. */ .section-head { display: flex; justify-content: space-between; align-items: baseline; gap: 0.9rem 2.5rem; margin-bottom: 1.6rem; flex-wrap: wrap; } /* flex: 0 1 auto, not a grow: a head that carries only a heading (six of the fourteen on the site) must stay exactly as wide as its words, or the 42ch cap would break a forty-character heading across two lines for nothing. */ .section-head > h2 { flex: 0 1 auto; max-width: 42ch; } /* 50ch, not the 56ch a full-width deck was allowed. The deck now sits beside the heading instead of under it, so its widest wrapped line has to stay inside the 80-character bar after the heading's column is taken out of the row first. 50ch measures at most 70. */ .section-head > p { flex: 1 1 20rem; max-width: 50ch; margin: 0; } /* The underline, not the colour, is what marks these as links: the global `a` rule leaves them a --line underline at 1.27:1 on --paper, well under the 3:1 non-text-contrast floor (WCAG 1.4.11). currentColor puts the underline on the accent the text already carries — 6.38:1 on --paper and 6.60:1 on --surface, for the nine "all …" links in section heads. */ .section-head a { font-size: var(--step--1); color: var(--accent); text-decoration-color: currentColor; text-decoration-thickness: 1px; } /* Section decks. A bare
placed directly in a section's .wrap has nothing constraining its measure and runs the full 1120px container — ~120 characters per line. Cap the measure for running text; components set their own. 56ch, not 68ch: ch is the advance of the "0" glyph, and lowercase prose in IBM Plex Sans averages narrower than a digit, so a 68ch box held 91-character lines. 56ch measures at most 78. */ .section > .wrap > p, .section--tight > .wrap > p, .section--band > .wrap > p { max-width: 56ch; } /* --- header ------------------------------------------------ */ .site-header { position: sticky; top: 0; z-index: 20; background: var(--surface); border-bottom: 1px solid var(--line); box-shadow: 0 1px 0 rgba(21,23,26,.03); } .header-inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-block: 0.8rem; } .brand { display: inline-flex; align-items: center; gap: 0.55rem; text-decoration: none; } .brand-mark { width: 24px; height: 24px; flex: 0 0 24px; } .brand-name { font-family: var(--serif); font-size: 1rem; } .nav { display: flex; align-items: center; gap: 1.1rem; } .nav a { font-size: var(--step--1); color: var(--ink-2); text-decoration: none; } .nav a:hover { color: var(--ink); } .nav a[aria-current="page"] { color: var(--ink); box-shadow: inset 0 -1px 0 var(--accent); } .nav-cta { border: 1px solid var(--line); border-radius: 3px; padding: 0.4rem 0.75rem; color: var(--ink) !important; } .nav-cta:hover { border-color: var(--ink-3); } .nav-toggle { display: none; font: 400 var(--step--1) var(--sans); background: none; border: 1px solid var(--line); border-radius: 3px; padding: 0.4rem 0.75rem; cursor: pointer; } /* --- footer ------------------------------------------------ */ .site-footer { border-top: 1px solid var(--line); background: var(--surface); margin-top: 3rem; } .footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 2rem; padding-block: 2.5rem 2rem; } .footer-grid h2 { font-family: var(--mono); font-size: 0.6875rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); margin-bottom: 0.75rem; } .footer-grid nav { display: flex; flex-direction: column; gap: 0.45rem; } .footer-grid a { font-size: var(--step--1); color: var(--ink-2); text-decoration: none; } .footer-grid a:hover { color: var(--ink); text-decoration: underline; } .footer-brand p { font-size: var(--step--1); color: var(--ink-3); max-width: 34ch; margin: 0.8rem 0 0; } .footer-contact p { font-size: var(--step--1); color: var(--ink-3); margin: 0.45rem 0 0; } .footer-base { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; border-top: 1px solid var(--line-soft); padding-block: 1rem 1.5rem; font-size: var(--step--1); color: var(--ink-3); } .footer-base p { margin: 0; } .footer-base nav { display: flex; gap: 1.25rem; } /* Same hole as .section-head a, in the other direction: these two legal links inherit .footer-base's --ink-3 text under a --line underline at 1.32:1 on --surface. They are the only underlined links in the footer — .footer-grid a sets text-decoration: none — so the underline is their whole affordance and has to clear 3:1. currentColor gives 4.77:1 on --surface. */ .footer-base a { text-decoration-color: currentColor; text-decoration-thickness: 1px; } /* `.footer-base a` and the global `a:hover` have equal specificity, so the rule above would otherwise mask the existing hover treatment. Restore it. */ .footer-base a:hover { text-decoration-color: var(--accent); } /* --- 1/2. hero --------------------------------------------- */ .hero { display: grid; grid-template-columns: 1.12fr 0.88fr; gap: clamp(1.5rem, 4vw, 2.75rem); align-items: start; padding-block: clamp(2.25rem, 5vw, 3.5rem); } .hero-body h1 { margin-bottom: 0.9rem; } .hero-body p.lead { font-size: var(--step-1); line-height: 1.6; color: var(--ink-2); max-width: 46ch; margin-bottom: 1.5rem; } .hero--full { grid-template-columns: 1fr; } .hero--full .hero-body p.lead { max-width: 58ch; } /* --- buttons ----------------------------------------------- */ .btn { display: inline-block; font-size: var(--step--1); padding: 0.62rem 1.05rem; background: var(--ink); color: var(--paper); border-radius: 3px; text-decoration: none; border: 1px solid var(--ink); } .btn:hover { background: #000; } .btn--ghost { background: transparent; color: var(--ink); border-color: var(--line); margin-left: 0.45rem; } .btn--ghost:hover { background: transparent; border-color: var(--ink-3); } /* --- 3. spec-panel ----------------------------------------- */ .spec-panel { border: 1px solid var(--line); border-radius: 4px; background: var(--surface); } .spec-panel > h2, .spec-panel > h3 { font-family: var(--mono); font-size: 0.6875rem; letter-spacing: 0.11em; text-transform: uppercase; color: var(--muted); padding: 0.6rem 0.9rem; border-bottom: 1px solid var(--line); background: var(--paper); margin: 0; } .spec-row { display: flex; justify-content: space-between; gap: 1rem; padding: 0.6rem 0.9rem; border-bottom: 1px solid var(--line-soft); font-size: var(--step--1); } .spec-row:last-child { border-bottom: 0; } .spec-row dt, .spec-row > span:first-child { color: var(--ink-3); } .spec-row dd, .spec-row > span:last-child { margin: 0; font-family: var(--mono); font-variant-numeric: tabular-nums; text-align: right; } /* --- 4. chip-strip ----------------------------------------- */ .chip-strip { display: flex; flex-wrap: wrap; gap: 0.55rem; } /* Three sizes have been tried here. 0.6875rem (11px) made the ten technologies read as a legal footnote under the paragraph that calls them "the whole list we staff against". Pass 1 took them to var(--step--1) (13px). This is var(--step-0) (15px) — body size, the same step as the paragraph above them, which is what makes the strip the second thing in that block rather than a caption under the first. Measured at 1440px: the ten-item strip is one row using about 980px of the 1040px container. The horizontal padding is 0.75rem rather than a proportional 0.8rem precisely to keep that slack; at 0.85rem the strip is 30px from wrapping, which is not a margin to ship on. */ .chip { font-family: var(--mono); font-size: var(--step-0); color: var(--ink-2); border: 1px solid var(--line); background: var(--surface); padding: 0.45rem 0.75rem; border-radius: 3px; } /* The supporting column is 438px, a little over a third of the band the rule above is sized for. A 15px chip there is not a bigger chip, it is a strip that wraps to four rows. In the aside the strip is a reference list rather than a headline, so it keeps pass 1's 13px — the same reasoning that re-lays-out .stat-row and .bordered-grid for that column. */ .split-aside .chip-strip { gap: 0.5rem; } .split-aside .chip { font-size: var(--step--1); padding: 0.34rem 0.7rem; } /* --- 5. bordered-grid -------------------------------------- */ .bordered-grid { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--line); background: var(--surface); } .bordered-grid--2 { grid-template-columns: repeat(2, 1fr); } .cell { padding: 1.1rem 1.15rem; border-right: 1px solid var(--line); text-decoration: none; display: block; } .cell:last-child { border-right: 0; } /* A lone cell is auto-placed into column 1 and fills a third of an obviously bordered box. The bible's sequence token for such a section is a bare `bordered-grid`, so span it here rather than add a `--1` modifier that would force a markup change on pages that are already correct. */ .bordered-grid > .cell:only-child { grid-column: 1 / -1; } .cell:hover { background: var(--paper); } .cell-idx { font-family: var(--mono); font-size: 0.6875rem; color: var(--accent); margin-bottom: 0.6rem; } .cell h3 { margin-bottom: 0.55rem; } .cell p { font-size: var(--step--1); color: var(--ink-2); margin: 0; max-width: 56ch; } /* --- 6. record-row ----------------------------------------- */ .record-list { border-top: 1px solid var(--line); } .record { display: grid; grid-template-columns: 8.5rem 1fr 10rem; gap: 1.2rem; padding: 1.05rem 0; border-bottom: 1px solid var(--line-soft); align-items: center; text-decoration: none; } .record:hover { background: var(--surface); } .record-meta { font-family: var(--mono); font-size: 0.6875rem; color: var(--muted); line-height: 1.55; } .record-body h3 { margin-bottom: 0.55rem; } .record-body p { font-size: var(--step--1); color: var(--ink-2); margin: 0; max-width: 56ch; } .record-result { text-align: right; font-size: var(--step--1); } .record-result strong { display: block; font-family: var(--serif); font-size: var(--step-1); font-weight: 400; letter-spacing: -0.02em; } .record-result span { font-family: var(--mono); font-size: 0.6875rem; color: var(--muted); } /* --- 7. pull-quote ----------------------------------------- */ .pull-quote { display: grid; grid-template-columns: 1fr 11rem; gap: 1.6rem; align-items: center; border: 1px solid var(--line); background: var(--surface); padding: 1.35rem 1.5rem; } /* 64ch, not the 56ch used for body copy: this is Source Serif 4 at --step-1, where ch is 9.34px against the sans's 7.8px, so the same ch count would set a much shorter line. 64ch is 609px and holds 72 characters of the shipped quote against 91 uncapped. It stays above the ~40-character floor below which a pull quote reads as fragments, and it is inert under about 900px, where the two-column grid already narrows the quote past the cap. */ .pull-quote blockquote { margin: 0; font-family: var(--serif); font-size: var(--step-1); line-height: 1.5; letter-spacing: -0.01em; max-width: 64ch; } .pull-quote-who { border-left: 1px solid var(--line); padding-left: 1.15rem; font-size: 0.6875rem; line-height: 1.6; color: var(--ink-3); } .pull-quote-who strong { display: block; color: var(--ink); } /* --- 8. prose ---------------------------------------------- */ /* 56ch, for the same reason as the section decks above: 68ch measured 95 characters on the widest wrapped line of a long-form column at 1440px. Long-form lowercase prose averages a narrower advance than deck copy, which carries digits and capitals, so prose does not get to sit wider. 55ch, not 56ch: at 56ch the widest line on the site was 81 characters — `services/dedicated-teams.html`, "…before the team takes a full sprint's load. Those days sit inside the three-month" — one over the 80-character bar. One ch off the cap takes it to 79 and moves nothing else. */ .prose { max-width: 55ch; } .prose h2 { margin: 2.2rem 0 0.7rem; padding-top: 1.4rem; border-top: 1px solid var(--line); } .prose h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; } .prose h3 { margin: 1.5rem 0 0.5rem; } .prose p, .prose li { color: var(--ink-2); } .prose ul, .prose ol { padding-left: 1.15rem; margin: 0 0 1em; } .prose li { margin-bottom: 0.4rem; } .prose strong { color: var(--ink); font-weight: 600; } /* --- 9. stat-row ------------------------------------------- */ .stat-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.25rem; border-top: 1px solid var(--line); padding-top: 1.25rem; } .stat strong { display: block; font-family: var(--serif); font-size: var(--step-2); font-weight: 400; letter-spacing: -0.02em; } .stat span { font-family: var(--mono); font-size: 0.6875rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); } /* --- 10. cta-band ------------------------------------------ */ .cta-band { border: 1px solid var(--line); background: var(--surface); padding: 1.75rem; display: flex; justify-content: space-between; align-items: center; gap: 1.5rem; flex-wrap: wrap; } .cta-band h2 { max-width: 28ch; } .cta-band p { font-size: var(--step--1); color: var(--ink-3); margin: 0.5rem 0 0; max-width: 40ch; } /* --- 11. split --------------------------------------------- */ /* The eleventh component, added after the vocabulary was held closed at ten for the whole build. Every section below a hero was one 56ch column inside a 1120px container, so about 600px of each screen below the fold carried nothing at all. The fix is not a wider measure — the 56ch caps are what stopped this site setting 125-character lines — it is putting the supporting material that sat stacked underneath the prose alongside it instead. The ratio is the hero's, so the page keeps one asymmetry rather than acquiring a second. .split-body and .split-aside are the two column elements. Either may carry another class (`prose split-body` is the usual left column); the aside is a container that HOLDS a component rather than being one, which is what lets the four rules below re-lay-out the components that assume a full-width row. */ .split { display: grid; grid-template-columns: 1.12fr 0.88fr; gap: clamp(1.5rem, 4vw, 2.75rem); align-items: start; } /* A grid item's automatic minimum size is its min-content width, so a long unbroken token — a mono figure, an email address — in either column would push that track past its fr share and overflow the page at 375px. */ .split-body, .split-aside { min-width: 0; } /* The left track is 1.12fr of about 996px at 1440px, which is wider than the 56ch the rest of the site sets. Cap the running text so the measure is exactly what it was before this component existed and the extra width goes into the gutter, not into line length. .prose carries its own 56ch and needs nothing here. */ .split-body > p, .split-body > ul, .split-body > ol, .split-body > dl { max-width: 56ch; } /* The supporting track is about 438px at 1440px — the same width as the hero's spec panel, which is why .spec-panel and .chip-strip need no help. The three components that assume a full-width row do. */ .split-aside .stat-row { grid-template-columns: repeat(2, 1fr); row-gap: 1.35rem; } .split-aside .bordered-grid, .split-aside .bordered-grid--2 { grid-template-columns: 1fr; } .split-aside .cell { border-right: 0; border-bottom: 1px solid var(--line); } .split-aside .cell:last-child { border-bottom: 0; } .split-aside .pull-quote { grid-template-columns: 1fr; } .split-aside .pull-quote-who { border-left: 0; border-top: 1px solid var(--line); padding: 1rem 0 0; } /* A plain list is the sixth thing the column is allowed to hold; the browser default is 40px of padding and a 1em margin, neither of which belongs against a bordered panel's top edge. */ .split-aside > ul, .split-aside > ol { margin: 0; padding-left: 1.15rem; } .split-aside > ul > li, .split-aside > ol > li { font-size: var(--step--1); color: var(--ink-2); margin-bottom: 0.4rem; } /* Pass 2 stacks two and three components in this column — a spec panel, then a chip strip, then a stat row. None of the ten components carries an outer margin (they were all designed to be the only thing in a full-width row), so stacked they would sit flush against one another. The gap comes from the container instead of from margins added to nine components. align-content keeps the rows at their content height rather than stretching them to fill a column whose height is set by the prose beside it. */ .split-aside { display: grid; gap: clamp(1.25rem, 2.5vw, 1.75rem); align-content: start; } /* Running text is allowed in this column only as a caption to the component under it — the four case studies' "five of the ten technologies" sentence sits above its chip strip. --step--1 and --ink-2 are the same treatment the plain list above gets; the margin is zero because the grid gap now owns the spacing. */ .split-aside > p { margin: 0; font-size: var(--step--1); color: var(--ink-2); } .split-aside svg { display: block; } /* The heading of a section that has been folded into the supporting column. It was tried as a mono 11px --muted label, matching .spec-panel > h2 and .footer-grid h2. That was wrong: on about.html the label sat directly above the two