/* ========================================================================== AmPuH SEO Intelligence - PAGE MASTHEAD v1.22.15 -------------------------------------------------------------------------- ONE HEADER, TWENTY-NINE PAGES. /audit-tools/ opened on a dark pine slab and every other surface opened on a paragraph, so the product looked like two products. This promotes that slab to the design system's `.ds-page-head`, which twenty-nine templates already use with the same three parts: an eyebrow, an h1, and a sentence of explanation. NOT ONE TEMPLATE IS EDITED TO GET IT. The markup was already right; only the paint was missing. LOAD ORDER, AND WHY IT IS A NEW FILE RATHER THAN A BLOCK IN THE DESIGN SYSTEM. ampuh-design-system.css loads FIRST and every page stylesheet loads after it, so a rule here written as `.ds-page-head .external` would lose a specificity tie to `.report .external` in audit-report.css. ampuh-tokens.css loads LAST and clamps every app `h1` through `body:has(> header...) h1`, which would win over `.ds-page-title` outright. So the masthead is loaded after all of them, by AppShell::transform(), beside the favicon block it already injects into every document. Single-class selectors then win on order alone: NO `!important` anywhere in this file, by rule. WHAT A PAGE STILL OWNS. The right-hand slot of a split head is whatever that page put there - a spec plate, a score panel, a project chip, a toolbar. Those are LIGHT CARDS, and a light card on a dark slab reads as an instrument plate fitted into a bench, so they are left alone. Only the things that sit BARE on the slab are re-inked here, because bare muted text on pine is unreadable and that is a contrast defect, not a taste question. THE TITLE IS NOT UPPERCASED, and that is the one place this deliberately departs from /audit-tools/. "AUDIT TOOLS" is two words and sets beautifully in caps. "Are you visible to AI answer engines?" and "Govern access and shared infrastructure." are sentences, and a sentence in caps stops being read and starts being decoded. Scale, weight and tracking carry the authority instead. NO WEBFONT, NO INLINE STYLE: font-src, style-src and script-src are all 'self'. Same constraint the bench was built under. ========================================================================== */ /* ---------------------------------------------------------------- THE SLAB */ .ds-page-head { position: relative; margin: 0 0 var(--ds-space-7, 28px); padding: clamp(28px, 3.4vw, 44px) clamp(20px, 2.2vw, 28px) clamp(24px, 2.6vw, 30px); /* The gradient this product already owns: ampuh-tokens.css carries a lime wash over a pine wash as an ambient body background. Here it runs at full strength. */ background: radial-gradient(120% 150% at 92% -20%, oklch(83% .145 116 / .30), transparent 62%), radial-gradient(90% 120% at 4% 108%, oklch(37% .105 155 / .55), transparent 68%), linear-gradient(158deg, oklch(22% .062 158) 0%, oklch(28.5% .085 156) 46%, oklch(33% .098 155) 100%); /* The underside. A slab that fades into paper is the one place a slab must not be vague: an instrument is fitted to a bench, and the join is what says so. */ border: 0; border-bottom: 2px solid oklch(83% .145 116 / .5); border-radius: var(--ds-radius-lg, 14px); box-shadow: inset 0 -14px 26px -18px oklch(16% .045 158 / .55), 0 14px 30px -22px oklch(22% .062 158 / .75); overflow: hidden; /* THE IDENTITY COLUMN STARTS AT THE TOP EDGE, ON EVERY PAGE. .ds-page-head shipped with align-items:end, which is correct when both columns are about the same height and wrong the moment one is not: /reports/ puts a 130px score plate on the right, and end-alignment pushed the eyebrow and title a third of the way down the slab with dead space above them. Thirty pages with the title at thirty different heights is the zigzag, and it is the reason a set of screens stops reading as one product. The title is now nailed to the top edge; the meter is the one thing that opts back into the bottom, below. */ align-items: start; /* Inherited by every bare descendant, so a page that adds an element to its head next year gets readable text without this file knowing about it. */ color: oklch(88% .022 130); } /* The one place the accent touches the slab, and what keeps a dark band from reading blank. */ .ds-page-head::before { content: ""; position: absolute; inset: 0 0 auto; height: 2px; background: linear-gradient(90deg, var(--ds-lime, #cbe888) 0%, oklch(83% .145 116 / .35) 38%, transparent 72%); } /* The bench grid, faint: the same surface seen in shadow. */ .ds-page-head::after { content: ""; position: absolute; inset: 0; background: linear-gradient(oklch(83% .145 116 / .05) 1px, transparent 1px) 0 0 / 34px 34px, linear-gradient(90deg, oklch(83% .145 116 / .05) 1px, transparent 1px) 0 0 / 34px 34px; pointer-events: none; } /* Both pseudo-elements are painted on the slab, so everything the page put inside it has to be lifted above them. */ .ds-page-head > * { position: relative; z-index: 1; min-width: 0; } /* --------------------------------------------------------------- IDENTITY */ .ds-page-head .ds-eyebrow { /* Mono, not sans. The eyebrow names the instrument; the mono stack is what the bench uses for anything that names or measures. Scoped to the masthead because .ds-eyebrow is also every card heading in the application. */ font-family: var(--ds-font-mono, ui-monospace, monospace); font-weight: 500; letter-spacing: .16em; color: var(--ds-lime, #cbe888); } .ds-page-head .ds-page-title { margin: 0; /* Beats `body:has(> header.enterprise-app-header) h1` in ampuh-tokens.css on specificity, which is why the size finally holds on an app page. */ font-size: clamp(2rem, 3.6vw, 3rem); font-weight: 800; line-height: 1.04; letter-spacing: -.028em; color: oklch(98% .012 116); /* Weight, not glow: the shadow sits under the strokes, so the letters read as struck in rather than lit up. */ text-shadow: 0 1px 0 oklch(20% .06 158 / .55); text-wrap: balance; } /* THE DISPLAY VARIANT, AND THE ONE PAGE THAT EARNS IT. /audit-tools/ is titled "Audit Tools" - two words, a noun, no punctuation - and it sets beautifully as a slab of caps at 4.5rem. That is a fact about the STRING, not about the page, so it is an opt-in modifier rather than the default. A title that is a sentence or asks a question must never take it: caps stop being read and start being decoded at about six words. */ .ds-page-head--display .ds-page-title { font-size: clamp(2.75rem, 6vw, 4.5rem); line-height: .9; letter-spacing: -.03em; text-transform: uppercase; text-wrap: initial; } /* THE LEAD IS MATCHED THREE WAYS ON PURPOSE. Twenty-four pages use .ds-page-lead, five wrote a bare

, and three of those five are reached by `.head-shell > div > p:last-child` in their own stylesheet - a 0,3,0 selector that sets muted ink. All three shapes are named here so no page is left with grey text on pine. */ .ds-page-head .ds-page-lead, .ds-page-head > :first-child > p, .ds-page-head.head-shell > div > p:last-child { max-width: 62ch; /* 16px, not the design system's 8px. The title is now display-scale, and a lead set 8px under a 3rem line reads as a subtitle of it rather than a sentence about the page. This is the gap /audit-tools/ was built with. */ margin: var(--ds-space-4, 16px) 0 0; color: oklch(88% .022 130); text-wrap: pretty; } /* A link is lime IN THE IDENTITY COLUMN AND NOWHERE ELSE, and :first-child is what says so. Written as `> div a` this reached the plan chip on /dashboard, which is also a direct child div - so the plan name rendered lime on a white chip, which is 1.56:1 and the exact failure ampuh-tokens.css warns about in writing. The identity column is the first child of every one of these thirty heads. */ /* v1.22.88. :not(.ds-btn), AND THE BROWSER IS WHAT FOUND IT. Moving the dashboard's primary action into the identity column made this rule paint it, and the label vanished: LIME INK ON THE LIME PLATE, both measured as the identical oklch(.83 .145 116). The button rule below sets pine ink on lime and is correct - it just loses, because `> :first-child a` is (0,2,1) with the pseudo-class and `.ds-page-head .ds-btn--primary` is (0,2,0). One pseudo-class outranked the entire button skin. SAME FAILURE AS v1.22.76, OPPOSITE CAUSE: that one was a dark token on a dark slab, this is a link colour beating a button colour. Both produce a control that renders, occupies space and cannot be read. A BUTTON IS NOT A TEXT LINK, so it is excluded here rather than patched with a louder selector: the next page to put an action in an identity column inherits the fix instead of the bug. */ .ds-page-head > :first-child a:not(.ds-btn), .ds-page-head > :first-child .external { color: var(--ds-lime, #cbe888); } .ds-page-head > :first-child a:not(.ds-btn):hover, .ds-page-head > :first-child .external:hover { text-decoration: underline; } /* Inline code in a lead sentence: the sunken paper chip is invisible here. */ .ds-page-head .ds-code { border-color: oklch(83% .145 116 / .28); background: oklch(100% 0 0 / .08); color: oklch(94% .03 120); } /* Bare on the slab: a release stamp, an allowance sentence under a button, a label with nothing behind it. These need light ink or they are grey on pine. */ .ds-page-head .ds-help, .ds-page-head .mh-release { color: oklch(82% .03 124); } .ds-page-head .ds-label { color: oklch(78% .04 122); } /* AND THE PLATES TAKE THEIR OWN INK BACK. The rules above are right for text sitting on the slab and wrong for the same class inside a light plate: /dashboard renders "PLAN" inside a white chip and it came out near-white on white. Every plate a page currently puts in its head is named here, and A NEW ONE MUST BE ADDED TO THIS LIST - that is the cost of a dark masthead hosting light components, and it is cheaper than thirty pages each inventing a dark variant of its own panel. v1.22.17 added .mc-env (the environment reading on Maintenance) and .psa-scope (the evidence boundary on Page Source Audit) when those two pages joined, which is this list working as intended rather than a surprise. */ .ds-page-head :is(.ds-spec, .plan-chip, .score-panel, .context-chip, .mc-env, .psa-scope, .ds-toolbar, .ds-card) :is(.ds-label, .ds-help, .ds-page-lead, a, small, span, strong, dt, dd, p, label) { color: var(--ds-text-muted, #536054); } .ds-page-head :is(.ds-spec, .plan-chip, .score-panel, .context-chip, .mc-env, .psa-scope, .ds-toolbar, .ds-card) :is(strong, dd, a, label) { color: var(--ds-text, #162319); } /* A BUTTON INSIDE A PLATE IS A BUTTON ON PAPER AGAIN. /reports puts its project switcher in a .ds-toolbar, which is a sunken-paper panel, and the lime/translucent skins further down are built for pine: the Apply button came out as pale ink on pale paper, which is a control you cannot see. The plate is paper, so the paper skins are restored inside it. Doubled class beats the :is() blocks above. */ .ds-page-head :is(.ds-spec, .plan-chip, .score-panel, .context-chip, .mc-env, .psa-scope, .ds-toolbar, .ds-card) .ds-btn.ds-btn--primary { border-color: var(--ds-pine-dark, #01351d); background: var(--ds-pine, #0e5631); color: oklch(100% 0 0); box-shadow: none; } .ds-page-head :is(.ds-spec, .plan-chip, .score-panel, .context-chip, .mc-env, .psa-scope, .ds-toolbar, .ds-card) .ds-btn.ds-btn--secondary, .ds-page-head :is(.ds-spec, .plan-chip, .score-panel, .context-chip, .mc-env, .psa-scope, .ds-toolbar, .ds-card) .ds-btn.ds-btn--ghost { border-color: var(--ds-border-strong, #7d8375); background: var(--ds-surface, #fefdfa); color: var(--ds-pine, #0e5631); } /* A BADGE KEEPS ITS OWN TONE, AND IT HAS TO BE SAID FIVE TIMES TO SURVIVE THE RULES ABOVE. `color: inherit` was tried first and was worse than doing nothing: a badge carries its own pale tint, so inheriting the slab's near-white ink put white text on a pale grey pill. A badge is a tint, a border and an ink chosen as a set, and the set is what has to be restored. Doubled class for specificity, after the plate block, so both the slab and a plate leave it alone. */ .ds-page-head .ds-badge.ds-badge--success { color: var(--ds-success, #0b6834); } .ds-page-head .ds-badge.ds-badge--warning { color: var(--ds-warning, #915e07); } .ds-page-head .ds-badge.ds-badge--danger { color: var(--ds-danger, #a12c25); } .ds-page-head .ds-badge.ds-badge--info { color: var(--ds-info, #075c8b); } .ds-page-head .ds-badge.ds-badge--neutral { color: var(--ds-text-muted, #536054); } /* ------------------------------------------------------- ACTIONS ON THE SLAB A pine-filled primary button on a pine slab is a rectangle you cannot see. Lime is the accent fill this product owns, and ampuh-tokens.css states the rule it comes with: lime FAILS as text at 1.56:1 and must always carry pine ink on top. So the button inverts - lime plate, pine letters - which is also the strongest thing on the slab, exactly as a primary action should be. */ .ds-page-head .ds-btn--primary { border-color: oklch(83% .145 116); background: var(--ds-lime, #cbe888); color: var(--ds-pine-dark, #01351d); box-shadow: 0 1px 0 oklch(100% 0 0 / .25) inset, 0 10px 22px -14px oklch(16% .045 158 / .8); } .ds-page-head .ds-btn--primary:hover { background: oklch(88% .15 116); } .ds-page-head .ds-btn--secondary, .ds-page-head .ds-btn--ghost { border-color: oklch(83% .145 116 / .45); background: oklch(100% 0 0 / .07); color: oklch(95% .03 120); } .ds-page-head .ds-btn--secondary:hover, .ds-page-head .ds-btn--ghost:hover { background: oklch(100% 0 0 / .14); } .ds-page-head .ds-btn:disabled { opacity: .55; } .ds-page-head .ds-btn:focus-visible { outline: 3px solid var(--ds-lime, #cbe888); outline-offset: 2px; } /* A field label in a head toolbar - /reports has one - is bare on the slab. The control itself stays a light control, because it is a control. */ .ds-page-head .ds-field > label { color: oklch(84% .03 122); } /* ------------------------------------------------------------- THE METER The optional right-hand reading: "9 of 9 available" on the bench. Bare figures rather than a plate, so a page can state one fact without building a card for it. Any page may adopt it; nothing is required to. */ .ds-page-head__meter { text-align: right; /* The only opt-out from the top alignment above. The reading is a caption on the lead sentence, so it sits on the same baseline the lead ends on. */ align-self: end; } .ds-page-head__meter > p { margin: 0; } .ds-page-head__label { margin: 0 0 var(--ds-space-2, 8px); font-family: var(--ds-font-mono, ui-monospace, monospace); font-size: var(--ds-font-size-xs, .75rem); letter-spacing: .14em; text-transform: uppercase; color: oklch(78% .04 122); } .ds-page-head__reading { margin: 0; font-family: var(--ds-font-mono, ui-monospace, monospace); font-size: var(--ds-font-size-sm, .8125rem); letter-spacing: .04em; color: oklch(76% .035 124); } .ds-page-head__reading span { font-weight: 700; color: var(--ds-lime, #cbe888); } .ds-page-head__reading em { font-style: normal; color: oklch(86% .10 88); } .ds-page-head__reading em::before { content: " \00b7 "; } /* ============================================================================ v1.22.34 (Stage F). THE MASTHEAD INSIGHT PANEL - a SHARED right-column box. ---------------------------------------------------------------------------- Audit Tools invented a premium tier panel on the right of its masthead (the dark-on-dark box with a label, a reading and a segmented gauge). It reads well, but its GAUGE measures nine instruments - a fact true only on that page - so it cannot be copied verbatim anywhere else without printing a meter that measures nothing. This component keeps the box - the consistent frame, depth and type - and drops the page-specific gauge, so any masthead can carry ONE relevant reading on the right in the same premium shape. HOW A PAGE USES IT: put .ds-page-head__panel as the second child of a .ds-page-head--split, with a .ds-page-head__label and any readings inside. The audit-tools tier panel is UNTOUCHED and still owns its gauge; this is the generic sibling, and it lives in the shared masthead sheet on purpose so there is one frame, not thirty. */ .ds-page-head__panel { align-self: end; /* v1.22.40. PROPORTIONAL TO ITS CONTENT, NOT A BALLOON. The old min(260px, 40vw) let the pane grow with the viewport, and align-items:stretch forced the button and chips edge to edge, so the card read as an oversized box around a little data. It now sizes to its content between a sensible floor and ceiling, and its children keep their natural width. Same skin as the tier panel. */ width: fit-content; min-width: 210px; max-width: 288px; padding: var(--ds-space-4, 16px) var(--ds-space-5, 20px); border: 1px solid oklch(100% 0 0 / .16); border-radius: var(--ds-radius-lg, 14px); background: oklch(100% 0 0 / .10); box-shadow: inset 0 1px 0 oklch(100% 0 0 / .18); text-align: left; /* A left-aligned column whose items are their own natural size - a status badge is a badge, a button is a button, neither a full-width bar. Tighter rhythm so the height matches the content. flex-wrap:nowrap and the explicit column direction are DEFENSIVE: dashboard.css gives its .overview-head-actions flex-wrap:wrap and align-items:center at the same (0,1,0) specificity, so this states the intended layout outright rather than trusting AppShell's load-order tie-break. */ display: flex; flex-direction: column; flex-wrap: nowrap; align-items: flex-start; gap: var(--ds-space-2, 8px); } /* v1.22.41. HIGHER SPECIFICITY (0,2,0) SO SIZING CANNOT LOSE. dashboard.css sets .overview-head-actions width/align at (0,1,0); a page that adds another single-class rule tomorrow could tie and win on order. Prefixing with .ds-page-head lifts these to (0,2,0), which beats every single-class rule on every page regardless of load order. This is the one property set that MUST hold: the pane's proportional size. */ .ds-page-head .ds-page-head__panel { width: fit-content; min-width: 210px; max-width: 288px; align-items: flex-start; flex-direction: column; flex-wrap: nowrap; } .ds-page-head .ds-page-head__panel .ds-page-head__label { margin: 0 0 var(--ds-space-2, 8px); } /* The headline reading of the panel: one figure that matters, in the lime the product uses for a live value everywhere else. */ .ds-page-head__figure { margin: 0; font-family: var(--ds-font-mono, ui-monospace, monospace); font-size: var(--ds-font-size-lg, 1.0625rem); line-height: 1.15; letter-spacing: .01em; color: oklch(90% .03 122); } .ds-page-head__figure b { color: var(--ds-lime, #cbe888); font-weight: 800; } /* A quiet caption under the figure, for the unit or the context. */ .ds-page-head__panel .ds-page-head__reading { margin-top: var(--ds-space-2, 8px); } /* ========================================================================================== THE DEPARTURE LINK. v1.22.78, MOVED HERE IN v1.22.80. ------------------------------------------------------------------------------------------ IT LIVES IN THIS SHEET BECAUSE THIS SHEET OWNS THE PANEL. v1.22.78 put it in reports-center.css, which was correct while Reports was the only page with one; v1.22.80 adds a second on the dashboard, and that template does not link the reports sheet - so the link would have rendered unstyled on the page every customer lands on. A rule about a masthead element belongs with the masthead, and this sheet is injected by AppShell::transform() on every authenticated surface, so a third one needs no CSS at all. THE INK IS LIGHT, WHICH IS THE WHOLE HISTORY OF THIS RULE. v1.22.76 shipped it as color:var(--ds-pine) - a dark token on the dark pine slab - and it rendered, took up space and could not be read. It now takes the same ink as .ds-page-head__label above it and lifts to lime on hover, which is the one colour this product uses for a live, actionable value. ========================================================================================== */ .ds-page-head__panel .ds-page-head__depart { margin: var(--ds-space-3, 12px) 0 0; padding-top: var(--ds-space-3, 12px); border-top: 1px solid oklch(100% 0 0 / .16); } /* v1.22.88. A GROUP OF DEPARTURES IS ONE GROUP, SO IT GETS ONE RULE. The border marks where wayfinding begins, which is a boundary the first link crosses and the second does not - two full hairlines for a two-item list draws a table where there is a list. v1.22.75 fixed the SPACING when a second departure appeared and left the divider fanning out; the dashboard now has two and other consoles will have more. Adjacent-sibling, so it survives any number of them and needs no template change. */ .ds-page-head__panel .ds-page-head__depart + .ds-page-head__depart { margin-top: var(--ds-space-2, 8px); padding-top: 0; border-top: 0; } .ds-page-head__panel .ds-page-head__depart a { font: 750 var(--ds-font-size-sm, .8125rem)/1.3 var(--ds-font-sans, system-ui); color: oklch(90% .03 122); text-decoration: none; } .ds-page-head__panel .ds-page-head__depart a:hover, .ds-page-head__panel .ds-page-head__depart a:focus-visible { color: var(--ds-lime, #cbe888); text-decoration: underline; } /* An optional inline action inside the panel keeps the panel self-contained. */ /* v1.22.40. The primary action is its own natural width, sat a touch below the reading - not a full-width bar that stretched the pane. A comfortable min keeps it tappable. */ .ds-page-head__panel .ds-btn { margin-top: var(--ds-space-2, 8px); align-self: flex-start; min-width: 140px; justify-content: center; } /* ============================================================================ v1.22.37 (Stage F fix). HARMONISE THE WRAPPED CHIPS WITH THE DARK PANEL. ---------------------------------------------------------------------------- THE BUG ELROYS SAW: plan-chip, score-panel and context-chip are LIGHT cards (background: --ds-surface) built to sit DIRECTLY on the slab. Wrapped inside the dark glass panel they rendered as WHITE boxes inside a dark box - the disharmony, the white colour, the overlap, and the fixed width that did not stretch with the panel. Inside the panel they must shed their card skin - the PANEL is the card now - stretch to its full width, and turn their ink light, so the whole reads as ONE dark glass panel, exactly like the Audit Tools tier panel. The switcher on Reports keeps its .ds-select as a usable field; only its wrapper loses the paper. */ .ds-page-head__panel > p { margin: 0; } /* Shed the light card skin: no white background, no border, no double padding. The pane IS the card now, so the chip is just a left-aligned column of lines at their natural width - v1.22.40 drops the width:100% that made the chip (and its button/badge) stretch and inflate the pane. */ .ds-page-head__panel :is(.plan-chip, .score-panel, .context-chip, .ds-toolbar) { width: auto; margin: 0; padding: 0; border: 0; background: none; box-shadow: none; border-radius: 0; align-items: flex-start; } /* The Reports project switcher's select gets a comfortable, bounded width - full-bleed inside a fit-content pane would fight the pane's own sizing. */ .ds-page-head__panel .ds-toolbar .ds-select { width: 100%; min-width: 168px; } /* LIGHT INK, overriding the dark-text :is() block earlier in this file. The .ds-page-head prefix plus the panel class makes this heavier, so it wins for certain rather than relying on source order. The greens (Active/Completed/ Platform badges) are semantic and legible on the glass, so they are left be. */ .ds-page-head .ds-page-head__panel :is(.plan-chip, .score-panel, .context-chip, .ds-toolbar) :is(.ds-label, .context-chip__host, small, p, dt, label) { color: oklch(78% .04 122); } /* The semantic status badge (Active / Completed / Platform) keeps its OWN colour - a light-green pill with green ink reads on the glass and MUST NOT be lightened, or its text washes out. It is deliberately excluded from the light-ink rule above. */ .ds-page-head .ds-page-head__panel :is(.plan-chip, .score-panel, .context-chip) :is(strong, dd, a, .score-panel__value) { /* The bright value/name, matching the tier panel's plan name (Platform Owner) - near-white. */ color: oklch(98% .012 116); } /* The score's "/100" stays a quieter caption, in light ink now rather than dark. */ .ds-page-head__panel .score-panel__of { color: oklch(76% .035 124); } /* The plan name that links to billing keeps a lime hint so it still reads as a link. */ .ds-page-head__panel .plan-chip > a > strong { color: var(--ds-lime, #cbe888); } /* ------------------------------------------------------------ ONE COLUMN Under 900px .ds-page-head is already a single column, so this only has to fix what a right-aligned reading does when it is no longer on the right, and let a full-width action be full-width. */ @media (max-width: 899px) { .ds-page-head { padding: clamp(22px, 6vw, 30px) clamp(16px, 4.5vw, 22px) clamp(20px, 5vw, 26px); border-radius: var(--ds-radius-md, 10px); align-items: start; } .ds-page-head .ds-page-title { font-size: clamp(1.75rem, 7.4vw, 2.375rem); } .ds-page-head--display .ds-page-title { font-size: clamp(2.125rem, 11vw, 3rem); } .ds-page-head__meter { text-align: left; } /* Stage F: below the split breakpoint the panel is full-width under the title, not a narrow box floating in a single column. */ .ds-page-head__panel { min-width: 0; width: 100%; } } /* ------------------------------------------------------------------ ON PAPER A 24%-lightness slab across the top of a printed page costs a cartridge and prints as a grey block that hides its own text. Every ink here reverts to black, the gradient and both pseudo-element layers go, and a single rule under the head does the job the dark band was doing on screen: it separates the identity of the page from its contents. Same decision as the audit snapshot's @media print block, for the same reason. */ @media print { .ds-page-head { padding: 0 0 var(--ds-space-4, 16px); border: 0; border-bottom: 2px solid #000; border-radius: 0; background: none; box-shadow: none; color: #000; } .ds-page-head::before, .ds-page-head::after { content: none; } .ds-page-head .ds-eyebrow, .ds-page-head .ds-page-title, .ds-page-head .ds-page-lead, .ds-page-head > :first-child > p, .ds-page-head > :first-child a, .ds-page-head > :first-child .external, .ds-page-head .ds-help, .ds-page-head .ds-label, .ds-page-head .mh-release, .ds-page-head__label, .ds-page-head__reading, .ds-page-head__reading span, .ds-page-head__reading em { color: #000; text-shadow: none; } /* Stage F: the shared panel becomes a plain bordered block on paper, so its one reading still prints - it is data, not decoration - but the dark glass does not. */ .ds-page-head__panel { border: 1px solid #000; background: none; box-shadow: none; color: #000; } .ds-page-head__figure, .ds-page-head__figure b { color: #000; } .ds-page-head .ds-code { border-color: #000; background: none; color: #000; } /* A button on paper is furniture. */ .ds-page-head .ds-btn, .ds-page-head .ds-toolbar { display: none; } }