/* Block Treatment-09 "the accordion of panels". Every value comes from tokens.css, spec: docs/blocks/treatment-lab-panel-page.md. The opening and closing is assets/js/steps.js, which drives every accordion on the site through attributes rather than classes; the grid of panes is assets/css/tile-grid.css; the heading halves, the button and the arrival are the shared components. What this file draws is the row — its rail, its head and the way its panel unfolds — and how the closing section inside a panel is laid out. WITHOUT JAVASCRIPT NOTHING IS COLLAPSED. The rule that hides a shut panel is written against the flag the script puts on , so a page whose script never ran shows every panel open and reads as ordinary prose. That is the default rather than the fallback. */ /* overflow-x: clip because the open row's wash runs to the edges of the screen rather than to the edges of the column — see below. Nothing else in this block overflows on purpose. */ .treatment-panels { position: relative; padding-block: var(--treatment-panels-top) var(--treatment-panels-bottom); overflow-x: clip; } .treatment-panels__inner { width: min(var(--page-max), 100% - var(--page-inset) * 2); margin-inline: auto; } .treatment-panels__list { margin: 0; padding: 0; list-style: none; } /* The row is a rail and a column beside it. The rail is a track with a dot on it; the connector between two dots is drawn from the row's own box, so a fifth panel joins the rail without anything being counted. */ /* The rail — the dot and the line under it — stands OUTSIDE the page column, 45 to the left of it in the frame, so it is placed absolutely rather than given a grid track: a track would have pushed the words right by its width. The row itself is therefore an ordinary block. It was a two-column grid for one round, left over from when the rail was a track, and with the rail taken out of flow the whole panel dropped into the 65-pixel column meant for the number — every paragraph came out one word wide. */ .treatment-panels__item { position: relative; border-top: var(--rule-w) solid var(--treatment-panels-rule); } /* The open row is washed with the accent, brightest in the middle and gone at both ends — the same wash the steps of the home page use, and the frame gives it the same 32% at the same 50.4%. It runs the width of the screen and not of the column, which is why it is a pseudo-element pulled out to the viewport rather than a background on the row: the row is 1440 and the wash in the frame is 1916. Behind the content, so the type keeps its contrast. */ .treatment-panels__item[data-open="true"]::before { position: absolute; z-index: -1; top: 0; bottom: 0; left: 50%; width: 100vw; margin-left: -50vw; background-image: var(--treatment-panels-wash); content: ""; } .treatment-panels__item:last-child { border-bottom: var(--rule-w) solid var(--treatment-panels-rule); } /* The dot and the line share one centre, which is the whole of what was wrong the first time: the dot sat at the rail's left edge and the line 4.4 further in, so they read as two marks that missed each other. In the frame both are centred on the same axis and the line clears each dot by 16. */ .treatment-panels__rail { position: absolute; top: var(--treatment-panels-dot-top); bottom: 0; left: var(--treatment-panels-rail-x); width: var(--treatment-panels-dot-on); } .treatment-panels__dot { display: block; width: var(--treatment-panels-dot); height: var(--treatment-panels-dot); margin-inline: auto; border-radius: var(--radius-pill); background: var(--treatment-panels-dot-off); } .treatment-panels__item[data-open="true"] .treatment-panels__dot { width: var(--treatment-panels-dot-on); height: var(--treatment-panels-dot-on); background: var(--treatment-panels-dot-on-color); } /* The line, from under this row's dot to the top of the next one's. Its bottom is negative by the distance the next dot sits below the row's edge, so it stops short of that dot by the same 16 it starts below this one — whatever the height of the row in between. The last row has none: :not(:last-child) rather than a class, so a fifth panel takes the line and gives it up again with nothing edited. */ .treatment-panels__item:not(:last-child) .treatment-panels__rail::after { position: absolute; top: calc(var(--treatment-panels-dot-on) + var(--treatment-panels-dot-clear)); bottom: calc((var(--treatment-panels-dot-top) + var(--treatment-panels-dot-clear)) * -1); left: 50%; width: var(--treatment-panels-connector-w); margin-left: calc(var(--treatment-panels-connector-w) / -2); border-radius: var(--radius-pill); background: var(--treatment-panels-connector); content: ""; } .treatment-panels__heading { margin: 0; } /* The whole head is the control, so the name and the pill are one target rather than a button beside a title that does nothing. Three columns because it has three parts: the number, the name, and the pill. Two columns and three children put the pill on a second row. */ .treatment-panels__head { display: grid; width: 100%; padding: var(--treatment-panels-head-pad-y) 0; border: 0; background: none; cursor: pointer; align-items: start; gap: 0 var(--treatment-panels-head-gap); grid-template-columns: var(--treatment-panels-num-w) minmax(0, 1fr) auto; text-align: left; } .treatment-panels__num { color: var(--treatment-panels-num-color); font-size: var(--fs-treatment-panels-num); letter-spacing: var(--ls-treatment-panels-num); line-height: var(--lh-treatment-panels-num); } /* A block, not the inline span it is by default: inside a grid cell an inline box is only as wide as its words, and the name inside it then wrapped where the cell had room to spare — "Comprehensive Panel" came out in two lines and every shut row was 336 tall against the frame's 192. */ .treatment-panels__label { display: block; min-width: 0; } .treatment-panels__eyebrow { display: block; margin-bottom: var(--treatment-panels-eyebrow-gap); color: var(--treatment-panels-eyebrow-color); font-size: var(--fs-treatment-panels-eyebrow); font-weight: var(--fw-semibold); letter-spacing: var(--ls-treatment-panels-eyebrow); line-height: var(--lh-treatment-panels-eyebrow); text-transform: uppercase; } /* The name is the shared two-tone heading at this block's size. Its dark half fades when the row is shut, which is the design's way of saying which one you are reading — the light half does not move, because it is already light. */ .treatment-panels__name { display: block; --heading-fs: var(--fs-treatment-panels-name); --heading-ls: var(--ls-treatment-panels-name); --heading-lh: var(--lh-treatment-panels-name); --heading-segment-display: inline; --fw-display-dark: var(--fw-light); } .treatment-panels__item:not([data-open="true"]) .treatment-panels__name { --heading-ink: var(--treatment-panels-name-off); } /* The pill. One word is shown and the other is not; both are printed — see panels.php. */ .treatment-panels__toggle { align-self: center; padding: var(--treatment-panels-pill-pad-y) var(--treatment-panels-pill-pad-x); border: var(--rule-w) solid var(--treatment-panels-pill-border); border-radius: var(--radius-pill); color: var(--treatment-panels-pill-color); font-size: var(--fs-treatment-panels-pill); font-weight: var(--fw-regular); letter-spacing: var(--ls-treatment-panels-pill); line-height: var(--lh-treatment-panels-pill); text-transform: uppercase; white-space: nowrap; } .treatment-panels__toggle-close, .treatment-panels__item[data-open="true"] .treatment-panels__toggle-open { display: none; } .treatment-panels__item[data-open="true"] .treatment-panels__toggle-close { display: inline; } /* THE PANEL OPENS THE WAY EVERY OTHER ACCORDION ON THIS SITE OPENS: a grid row animated from 1fr to 0fr, which is how a box of unknown height is animated to and from nothing. The first version used display: none, which cannot be animated at all — it was quick to write and it made this block the only one on the site that snapped. Open is the default and closed is the exception, gated on the flag steps.js puts on . Without JavaScript the flag never arrives, nothing is ever collapsed, and every panel reads as plain text. */ .treatment-panels__panel { display: grid; grid-template-rows: 1fr; transition: grid-template-rows var(--steps-dur) var(--steps-ease); } :root[data-accordion-js="on"] .treatment-panels__item:not([data-open="true"]) .treatment-panels__panel { grid-template-rows: 0fr; } /* overflow: hidden is what makes the clip real — without it the contents keep their height and spill out of a row that has been animated to nothing. The room under the panel is a margin on its last child and not padding here, for the reason the steps accordion records: a box clipped to nothing still has its padding, so a shut panel stayed 32 tall and the three closed rows each carried that 32. Measured, not guessed — the computed row read 32px where it should have read 0. */ .treatment-panels__panel-inner { overflow: hidden; padding-left: var(--treatment-panels-num-w); } .treatment-panels__panel-inner > :last-child { margin-bottom: var(--treatment-panels-panel-pad-b); } /* Each paragraph in the panel sits under a rule of its own, which is the design's way of separating the parts of a long panel without drawing a box around each. */ .treatment-panels__copy { max-width: var(--treatment-panels-copy-w); margin: 0; padding: var(--treatment-panels-copy-pad) 0; border-top: var(--rule-w) solid var(--treatment-panels-rule); color: var(--treatment-panels-copy-color); font-size: var(--fs-treatment-panels-copy); font-weight: var(--fw-regular); line-height: var(--lh-treatment-panels-copy); } .treatment-panels__tiles { margin: var(--treatment-panels-tiles-gap) 0; } /* The closing section: words on the left, a photograph on the right. Two columns of the design's own widths rather than equal shares — the text column is 597 against the picture's 449. */ .treatment-panels__closing { display: grid; margin-top: var(--treatment-panels-closing-gap); align-items: center; gap: var(--treatment-panels-closing-col-gap); grid-template-columns: minmax(0, var(--treatment-panels-closing-text-w)) minmax(0, var(--treatment-panels-closing-photo-w)); justify-content: space-between; } .treatment-panels__closing-title { margin: 0; --heading-fs: var(--fs-treatment-panels-closing); --heading-ls: var(--ls-treatment-panels-closing); --heading-lh: var(--lh-treatment-panels-closing); --heading-segment-display: inline; --fw-display-dark: var(--fw-bold); } .treatment-panels__closing-copy { margin: var(--treatment-panels-closing-copy-gap) 0 0; color: var(--treatment-panels-copy-color); font-size: var(--fs-treatment-panels-closing-copy); font-weight: var(--fw-regular); line-height: var(--lh-treatment-panels-closing-copy); } /* min() rather than the design's flat width: at 320 the column is 280 and a button that cannot give way pushes the page sideways. Every other button on this site is capped the same way. */ .treatment-panels__cta { margin-top: var(--treatment-panels-cta-gap); --btn-w: min(var(--treatment-panels-cta-w), 100%); } /* No radius here: the picture arrives with its corners already rounded and a soft edge around them, which is how it comes out of the design file. A radius on top of that would cut the soft edge into a hard one. */ .treatment-panels__closing-photo img { display: block; width: 100%; height: auto; } /* --bp-lg: the closing section stacks and the rail narrows. */ @media (max-width: 1300px) { .treatment-panels__closing { grid-template-columns: minmax(0, 1fr); } } /* --bp-sm: the pill drops under the name rather than squeezing it. */ @media (max-width: 700px) { .treatment-panels__head { grid-template-columns: var(--treatment-panels-num-w) minmax(0, 1fr); } .treatment-panels__toggle { grid-column: 2; } .treatment-panels__toggle { justify-self: start; margin-top: var(--treatment-panels-pill-stacked-gap); } }