/* Prelo's @font-face declarations live in styles/fonts.css, which head.html
loads alongside this file. Do not re-declare them here — a duplicate set
lived in this file until 2026-09-01 and meant edits to fonts.css did nothing. */
:root {
/* grid — the rail is 90% between 992 and 1440, 1280px from 1440 (below), and
`calc(100% - 20px)` under 992 (the media rule after this block, ISS-509). */
--grid-container-width: 90%;
--grid-column-width: calc(var(--grid-container-width) / 12);
--grid-gutter-width: 5%;
/* spacing */
--spacing-none: 0;
--spacing-xxl: 48px;
--spacing-xl: 32px;
--spacing-l: 20px;
--spacing-m: 14px;
--spacing-s: 8px;
--spacing-xs: 4px;
/* Authored line-break token (see .line-break). Deliberately NOT --spacing-l,
which happens to share its value: section spacing and an author's in-copy
gap are different knobs, and one must not resize the other. Shared by
.line-break and .line-break-token so the pre-paint stand-in and the real
spacer can never drift apart. */
--line-break-size: 20px;
/* color schemes */
color-scheme: light;
/* color tokens */
--color-primary-white: #fff;
--color-primary-green: #3f9c35;
--color-primary-light-green: #d9ebd7;
--color-primary-blue: #009cde;
--color-primary-light-blue: #ccebf8;
--color-primary-light-grey: #888b8d;
--color-primary-medium-grey: #63666a;
--color-primary-dark-grey: #515356;
--color-primary-hover-green: #2b6c25;
--color-high-contrast: #777;
--color-dark-navy: #00153d;
--color-accent-green: #00a94f;
--color-section-grey: #f0f0f0;
/* primary brand colors — author-facing palette; library-sync reads the
--color-* names in this block to build the DA options color-token list */
--color-green: var(--color-primary-green);
--color-light-green: var(--color-primary-light-green);
--color-blue: var(--color-primary-blue);
--color-light-blue: var(--color-primary-light-blue);
--color-navy: var(--color-dark-navy);
--color-white: var(--color-primary-white);
--color-grey: var(--color-primary-light-grey);
--color-medium-grey: var(--color-primary-medium-grey);
--color-dark-grey: var(--color-primary-dark-grey);
--color-light-grey: var(--color-section-grey);
--color-light-grey-2: #CDCECF;
/* secondary palette */
--color-secondary-cyan: #38a798;
--color-secondary-magenta: #9f5cc0;
--color-secondary-yellow: #f1b434;
--color-secondary-pink: #e40046;
--color-secondary-yellow-green: #a2a569;
--color-secondary-orange: #e87722;
/* high-contrast palette */
--color-hc-primary-blue: #007eb4;
--color-hc-primary-green: #36872e;
--color-hc-primary-grey: #515356;
/* transitions */
--transition-base: 0.3s ease-in-out;
--color-gray-100: #f1f1f1;
--color-gray-200: #d3d3d3;
--color-gray-300: #b5b5b5;
--color-gray-400: #999;
--color-gray-500: #7d7d7d;
--color-gray-600: #636363;
--color-gray-700: #494949;
--color-gray-800: #313131;
--color-gray-900: #1b1b1b;
--color-green-100: #e1f5e3;
--color-green-200: #a3e1a8;
--color-green-300: #60cb6a;
--color-green-400: #24b032;
--color-green-500: #1e9029;
--color-green-600: #187220;
--color-green-700: #115418;
--color-green-800: #0c3910;
--color-green-900: #072009;
--color-teal-100: #e4f3f5;
--color-teal-200: #acdbdf;
--color-teal-300: #71c1c9;
--color-teal-400: #36a7b3;
--color-teal-500: #108a96;
--color-teal-600: #0d6d77;
--color-teal-700: #0a5158;
--color-teal-800: #06363b;
--color-teal-900: #041e21;
--color-blue-100: #eaf2ff;
--color-blue-200: #b9d4ff;
--color-blue-300: #88b6ff;
--color-blue-400: #5898ff;
--color-blue-500: #2176ff;
--color-blue-600: #0058e4;
--color-blue-700: #0041a9;
--color-blue-800: #002c74;
--color-blue-900: #001942;
--color-purple-100: #f4edfb;
--color-purple-200: #dfcbf2;
--color-purple-300: #c9a7ea;
--color-purple-400: #b385e1;
--color-purple-500: #9d60d8;
--color-purple-600: #843ccb;
--color-purple-700: #622c98;
--color-purple-800: #421e66;
--color-purple-900: #251139;
--color-magenta-100: #ffebf9;
--color-magenta-200: #ffc0ec;
--color-magenta-300: #ff8fde;
--color-magenta-400: #ff53cc;
--color-magenta-500: #eb00a5;
--color-magenta-600: #bd0084;
--color-magenta-700: #8e0064;
--color-magenta-800: #630045;
--color-magenta-900: #3b002a;
--color-red-100: #ffecea;
--color-red-200: #ffc4be;
--color-red-300: #ff9990;
--color-red-400: #ff6759;
--color-red-500: #f81400;
--color-red-600: #c71000;
--color-red-700: #950c00;
--color-red-800: #670800;
--color-red-900: #3c0500;
--color-orange-100: #ffeddc;
--color-orange-200: #ffc895;
--color-orange-300: #ff9e43;
--color-orange-400: #f37500;
--color-orange-500: #c76000;
--color-orange-600: #9e4c00;
--color-orange-700: #753800;
--color-orange-800: #4f2600;
--color-orange-900: #2d1500;
--color-yellow-100: #fff48e;
--color-yellow-200: #ebd400;
--color-yellow-300: #cab600;
--color-yellow-400: #ab9a00;
--color-yellow-500: #8c7e00;
--color-yellow-600: #6e6400;
--color-yellow-700: #514a00;
--color-yellow-800: #373100;
--color-yellow-900: #1e1b00;
/* named colors */
--color-light-base: 255 255 255;
--color-dark-base: 0 0 0;
--color-light: rgb(255 255 255);
--color-dark: rgb(0 0 0);
--color-text: var(--color-primary-dark-grey);
--color-link: var(--color-primary-green);
--color-brand: var(--color-purple-500);
--color-accent: light-dark(var(--color-magenta-600), var(--color-yellow-100));
--color-shaded: light-dark(#f9f9f9, #000);
/* fonts */
--font-family: prelo, "Trebuchet MS", sans-serif;
/* headings */
--heading-font-size-xxl: 48px;
--heading-font-size-xl: 36px;
--heading-font-size-l: 24px;
--heading-font-size-m: 20px;
--heading-font-size-s: 18px;
--heading-font-size-xs: 16px;
/* h2-h6 ONLY — h1 is not in the rule this feeds (see the h2..h6 block below), and
legacy genuinely differs by level. Measured on rsmus.com at 1440 across three
pages, 56 headings: h1 1.2 (3/3), h2 1.3 (16 of 17, one 1.5 outlier), h3 1.3
(18/18), h4 1.3 (18/18).
Was 1.2, sourced from rsm.global — a DIFFERENT property — and set from an h1
measurement, which is the one level where 1.2 is right. Every h2-h6 on the site
therefore rendered 8% tighter than legacy: 36px copy at 43.2px leading instead of
46.8px. Surfaced as "legacy is taller" on the global-enterprise-strategy CTA
panel (194px vs 196px), where the 2px box difference is the symptom and the
leading is the cause. */
--heading-line-height: 1.3;
/* body */
--body-font-size-xxxl: 27px;
--body-font-size-xxl: 24px;
--body-font-size-xl: 22px;
--body-font-size-l: 20px;
--body-font-size-m: 18px;
--body-font-size-s: 14px;
--body-font-size-xs: 12px;
--body-line-height: 1.3;
/* misc */
--header-height: 100px;
--preheader-height: 38px;
--breadcrumb-height: 24px;
/* Font weights — THESE FIVE VALUES ARE THE ONLY ONES THAT EXIST.
Prelo ships here as one file per weight/style (see styles/fonts.css). A
font-weight the family has no face for does NOT fall back to something
sane — CSS font matching silently snaps it to the nearest available face,
and between 500 and 800 that is always Bold:
550 → Bold 600 → Bold 650 → Bold 800 → Black 200 → Light
So `font-weight: 600` renders identically to 700, with no warning anywhere.
There is no semibold in this family, so 600 can never be honoured.
Prefer these vars over raw numbers; a var cannot name a missing face.
WATCH OUT when porting CSS from legacy (RSMUS_ACM
ui.frontend/src/main/webpack/site/base/font.scss): legacy mapped the SAME
four files to DIFFERENT numbers — Book was 500 and Medium was 600 there,
against 400 and 500 here. A weight copied from legacy therefore reads one
step too heavy, and 600 in particular lands on Bold instead of Medium.
Black (900) is a special case: legacy shipped the file but declared it under
the WRONG family name ('HurmeGeometric') with a typo'd URL, so legacy's own
`font-weight: 900` fell back to Bold. Anything ported from legacy that says
900 was Bold on the live page — it is deliberately written 700 here. Use 900
only where Black is genuinely wanted (e.g. the net-new Seahawks template). */
--font-weight-black: 900; /* Prelo-Black — see the note above: NOT what legacy showed */
--font-weight-bold: 700; /* Prelo-Bold — legacy called this 700 too */
--font-weight-medium: 500; /* Prelo-Medium — legacy called this 600 */
--font-weight-regular: 400; /* Prelo-Book — legacy called this 500 */
--font-weight-light: 300; /* Prelo-Light — legacy called this 300 too */
}
/* Mobile bar sizes. Overridden on :root so the header/preheader heights, the
body's top padding (calc of both), and the desktop menu offset all track the
actual bar heights. The preheader block also mirrors --preheader-height. */
@media (width < 992px) {
:root {
--preheader-height: 44px;
--header-height: 51px;
/* ISS-509 (ruled 2026-09-25): below 992 the section rail keeps a FIXED 10px gutter
each side, which is legacy's (390 -> 372 content, 768 -> 748), measured two-sided
on 9 of 9 control pages. It used to be 90% of the viewport (20px @390, 38px @768),
set in #63 (83.4% -> 90%) relative to the previous EDS value, not to legacy.
992-1440 keeps 90% and >=1440 keeps 1280px. */
--grid-container-width: calc(100% - 20px);
}
}
@media (width < 992px) {
:root {
--heading-font-size-xxl: 30px;
--heading-font-size-xl: 30px;
}
}
.light-scheme {
color-scheme: light;
}
.dark-scheme {
color-scheme: dark;
}
/* high-contrast mode — re-points the primary palette at the HC values.
Every block using var(--color-primary-*) inherits these automatically.
Triggered by the manual .high-contrast toggle OR the OS prefers-contrast
setting; .no-high-contrast lets the toggle opt out of the system preference. */
body.high-contrast {
--color-primary-blue: var(--color-hc-primary-blue);
--color-primary-green: var(--color-hc-primary-green);
--color-primary-light-grey: var(--color-hc-primary-grey);
}
@media (prefers-contrast: more) {
body:not(.no-high-contrast) {
--color-primary-blue: var(--color-hc-primary-blue);
--color-primary-green: var(--color-hc-primary-green);
--color-primary-light-grey: var(--color-hc-primary-grey);
}
}
html {
/* An anchor jump has to clear everything pinned over the top of the viewport,
or the target heading lands underneath it and reads as missing text. That
stack is the fixed header, the preheader above it when present (see the
:has() rule below), and the secondary-nav once it pins — which publishes
--secondary-nav-height from blocks/secondary-nav/secondary-nav.js.
The nav height counts even before the bar pins: the browser resolves
scroll-padding-top when the jump STARTS, and the bar pins during the scroll
that follows, so a stuck-only value would always arrive too late. */
scroll-padding-top: calc(
var(--header-height) + var(--secondary-nav-height, 0px) + 1rem
);
/* Silver canvas only shows outside the 1920px body on very wide viewports. */
background-color: silver;
}
/* The preheader is fixed at top: 0 with the header offset below it, so it
occludes an anchor target too. scroll-padding-top has to live on ,
which is why the body class is read through :has(). */
html:has(body.has-preheader) {
scroll-padding-top: calc(
var(--preheader-height) + var(--header-height) +
var(--secondary-nav-height, 0px) + 1rem
);
}
/* Magic line-break token (bold " " authored anywhere).
A block-level spacer that breaks the line and adds a fixed vertical gap,
matching the 20px spacing between the h2/h3 in the site's text CTAs. */
.line-break {
display: block;
height: var(--line-break-size);
}
/* The SAME spacer, worn by the raw token itself between first paint and the
moment scripts.js can swap it for a real .line-break — see markLineBreakTokens.
Without this the literal text " " is visible for as long as the blocks take
to load. Geometry is identical to .line-break (one --line-break-size per ,
no inherited margins), so the swap is invisible: nothing moves, nothing
reflows. font-size:0 hides the text without display:none, which would collapse
the box we are holding open. */
.line-break-token {
display: block;
height: calc(var(--line-break-size) * var(--line-break-count, 1));
margin: 0;
font-size: 0;
line-height: 0;
}
body {
margin: 0 auto;
max-width: 1920px;
background-color: var(--color-primary-white);
color: var(--color-text);
font-family: var(--font-family);
font-size: var(--body-font-size-m);
line-height: var(--body-line-height);
padding: var(--header-height) 0 0;
&.has-preheader {
padding-top: calc(var(--header-height) + var(--preheader-height));
}
&.has-breadcrumb {
margin: calc(var(--header-height) + var(--breadcrumb-height)) 0 0;
}
&.no-header {
--header-height: 0;
margin: 0;
}
p{
margin: 1rem 0;
}
}
header {
display: none;
height: var(--header-height);
position: fixed;
}
body.has-preheader header {
top: var(--preheader-height);
}
/* While the mobile/tablet mega menu is open the preheader is hidden (see
blocks/preheader/preheader.css), so the header must reclaim the top of the
viewport instead of keeping the --preheader-height offset above. Same file,
later source order, higher specificity than the rule above — so it wins
regardless of block-CSS load order. */
body.has-preheader header.is-mobile-open {
top: 0;
}
a {
color: var(--color-link);
font-weight: 500;
/* A bolded link (DA emits …) must still read bold —
the anchor's own 500 would otherwise override the strong's weight — and
shows its underline at rest instead of only fading in on hover. */
strong &:not(.btn) {
font-weight: var(--font-weight-bold);
text-decoration-color: currentColor;
}
/* Regular links: no visible underline by default, fade one in on hover.
text-decoration-color (unlike text-decoration) is transitionable. */
&:not(.btn) {
text-decoration: underline;
text-decoration-color: transparent;
text-underline-offset: 0.15em;
transition: text-decoration-color var(--transition-base);
}
&:not(.btn):hover {
text-decoration-color: currentColor;
}
&.btn {
display: inline-block;
font-weight: 500;
border-radius: 0;
cursor: pointer;
outline: none;
padding: 14px 30px;
position: relative;
text-decoration: none;
-webkit-transition: all .3s ease-out;
transition: all .3s ease-out;
/* The `outline: none` above is legacy's own (_button.scss `.cmp-button`), but legacy
puts the ring straight back on every variant with `&:focus-visible { outline: auto; }`
and the port carried only the first half. Without this a keyboard user tabbing
through any CTA saw no focus at all — 0 of 16 buttons on both eds-prd homepages
vs 21 of 21 on rsmus.com, measured 2026-10-22 (WCAG 2.4.7). `auto` is the
browser's two-tone ring, so it reads on the white and the dark bands alike. */
&:focus-visible {
outline: auto;
}
&.btn-outline {
background: transparent;
}
}
&.btn-accent {
color: var(--color-primary-dark-grey);
background: var(--color-primary-white);
border: 0px solid var(--color-primary-green);
transition: background-color var(--transition-base), border-color var(--transition-base), color var(--transition-base);
&:hover {
background: var(--color-primary-blue);
color: var(--color-primary-white);
}
/* The white OUTLINE — legacy `.cmp-button.secondary._white`: transparent,
white label, 1px white border. The width is restated because the base
.btn-accent border is 0px, which left this variant's white border-color
with nothing to paint. */
&.btn-outline {
color: var(--color-primary-white);
background: transparent;
border-width: 1px;
border-color: var(--color-primary-white);
transition: background-color var(--transition-base), border-color var(--transition-base), color var(--transition-base);
&:hover {
color: var(--color-primary-green);
background: var(--color-primary-white);
border-color: var(--color-primary-white);
}
}
}
&.btn-primary {
color: var(--color-primary-white);
background-color: var(--color-primary-green);
border: 1px solid var(--color-primary-green);
transition: background-color var(--transition-base), border-color var(--transition-base);
&:hover {
background-color: var(--color-primary-hover-green);
border-color: var(--color-primary-hover-green);
}
&.btn-outline {
color: var(--color-primary-green);
background: transparent;
border-color: var(--color-primary-green);
transition: background-color var(--transition-base), border-color var(--transition-base), color var(--transition-base);
&:hover {
color: var(--color-primary-white);
background-color: var(--color-primary-hover-green);
border-color: var(--color-accent-green);
}
}
}
&.btn-secondary {
color: var(--color-primary-dark-grey);
background-color: var(--color-primary-white);
border: 0px solid var(--color-primary-dark-grey);
transition: background-color var(--transition-base), border-color var(--transition-base), color var(--transition-base);
&:hover {
color: var(--color-primary-white);
background-color: var(--color-primary-hover-green);
border-color: var(--color-primary-green);
}
&.btn-outline {
color: var(--color-primary-dark-grey);
background: var(--color-primary-white);
border-color: var(--color-primary-dark-grey);
border: 1px solid var(--color-primary-dark-grey);
transition: background-color var(--transition-base), border-color var(--transition-base), color var(--transition-base);
&:hover {
color: var(--color-primary-white);
background-color: var(--color-primary-hover-green);
border-color: var(--color-primary-hover-green);
}
}
}
&.btn-secondary-outline-variant-1 {
color: var(--color-primary-green);
background: var(--color-primary-white);
border: 1px solid var(--color-primary-dark-grey);
transition: background-color var(--transition-base), border-color var(--transition-base), color var(--transition-base);
&:hover {
color: var(--color-primary-white);
background-color: var(--color-primary-hover-green);
border-color: var(--color-primary-hover-green);
}
}
&.btn-negative {
color: var(--color-primary-white);
background-color: var(--color-primary-light-grey);
border: 1px solid var(--color-primary-light-grey);
transition: background-color var(--transition-base), border-color var(--transition-base), color var(--transition-base);
&:hover {
color: var(--color-primary-white);
background-color: var(--color-primary-dark-grey);
border-color: var(--color-primary-dark-grey);
}
&.btn-outline {
display: flex;
align-items: center;
justify-content: space-between;
text-align: left;
color: var(--color-primary-white);
background: transparent;
border-color: var(--color-primary-white);
transition: background-color var(--transition-base), border-color var(--transition-base), color var(--transition-base);
&::after {
content: '\203A';
margin-left: 1em;
font-weight: var(--font-weight-bold);
line-height: 1;
}
&:hover {
color: var(--color-primary-green);
background-color: var(--color-primary-white);
border-color: var(--color-primary-white);
}
}
}
}
/* Tablet & mobile (≤991px): buttons span the full width of their container.
.btn has padding (14px 30px) but no global box-sizing, so border-box keeps
that padding inside the width instead of overflowing by 60px. text-align
centres the label, since .btn is inline-block and would otherwise sit left
once stretched. */
@media (max-width: 991px) {
a.btn {
display: block;
width: 100%;
box-sizing: border-box;
text-align: center;
}
}
/* section-metadata `button-span | true`: reproduce the legacy rsmus.com button
grid. On the live site that grid is a centered block capped at 1280px, three
equal columns (~32px gaps → ~405px buttons), and — crucially — every button is
the SAME height: long labels wrap to two lines and the short ones grow to
match. We mirror that exactly rather than trying to force one line.
• cap + center the grid at the live 1280px (shrink with a 40px side margin
on narrower viewports, as the live layout does);
• reclaim the per-column side padding as button width and use an even grid
gap between columns;
• give every button a min-height of exactly two text lines (2lh + the
28px vertical padding, box-sizing:border-box) so a one-line label grows to
the two-line height — uniform boxes, no magic numbers.
Text-align stays owned by the button variant, so the .btn-negative.btn-outline
layout (left label + right chevron) is unaffected. */
main .section.button-span .cta .cta-content {
max-width: 1280px;
width: calc(100% - 80px);
margin-inline: auto;
}
main .section.button-span .cta-columns {
gap: var(--spacing-xl, 32px);
}
main .section.button-span .cta-column {
padding-left: 0;
padding-right: 0;
}
main .section.button-span a.btn {
width: 100%;
box-sizing: border-box;
min-height: calc(2lh + 32px);
}
/* The wrapper fragment.js builds around a loaded fragment. It needs its own
`display` for the same cascade reason `.section` does: it is a direct child of
`main` whenever a fragment link sits at the top level of a document, and the
`main > div` guard further down hides every such child until something
out-points it. `.fragment-content` never carries `.section`, so without this
rule nothing ever does and the fragment stays hidden forever.
That was ISS-259: `404.html` is the one page whose fragment link is a direct
child of `main`, and rsm-us's `/fragments/404` holds three sections, so
fragment.js keeps the wrapper instead of hoisting a lone section. Every rsm-us
404 rendered a blank body — `main` 0px tall, the copy present in the DOM at
0x0 — while returning HTTP 404 with a resolved fragment and correct
`.plain.html`. Nothing that stops short of measuring layout can see that.
This cannot flash undecorated: the wrapper is script-created after `loadArea`
has run on its contents and is never present in the served HTML. */
.fragment-content {
display: block;
}
/* sections */
.section {
display: block;
background-color: var(--color-primary-white);
> .default-content {
max-width: var(--grid-container-width);
margin: 0 auto;
img {
width: auto;
max-width: 100%;
display: block;
margin: 0 auto;
}
}
}
/* A FRAGMENT'S section loaded in BLOCK position — fragment.js puts the fragment's own
section inside the host section's `.block-content` — paints nothing of its own unless
it authors a fill. Legacy's XF containers are transparent, so the host band shows
through. The rule above made it a white slab on the host's fill: rsm-us
/events/2025-events/whats-next-for-ipos-in-2025/thank-you-whats-next-for-ipos-2025
hosts the undeliverable-protocol fragment inside its #F0F0F0 cardlist band, and at
1440 legacy draws that copy on rgb(240,240,240) while ours drew it on white (C45).
`:where()` keeps this at the specificity of `.section`, so any authored fill — a
class rule or the inline colour decorateSectionData sets — still wins. */
:where(main .section .block-content) > .section {
background-color: transparent;
}
/* Authored body copy — match rsm.global computed paragraph metrics
(line-height 1.333, margin-bottom 10px). Scoped to default-content so it
does not disturb the global body line-height, tables, forms, or block CSS. */
main .section > .default-content p {
line-height: 1.333;
margin-bottom: 10px;
}
/* Emphasis INSIDE an authored heading — `
Stay alert: …
`.
Legacy leaves that `` entirely to the UA, whose default is the RELATIVE
`font-weight: bolder`; against a heading at 300 the bolder table resolves it to
400. This repo's global `strong { font-weight: var(--font-weight-bold) }` (below)
is ABSOLUTE, so the same authored heading landed two steps heavier than the
source. Measured at 1440px on rsm-us /careers/experienced/audit-careers —
legacy `` computes 400, ours computed 600 — reported by the client as
"the heading shouldn't be bolded".
`bolder` rather than a literal 400 so the relationship survives a heading that
sets its own weight, exactly as the UA rule it restores would.
Scoped to `.default-content`, which scripts/ak.js groupChildren() makes the exact
analogue of legacy's `.cmp-text` (see the blockquote note below). A block that
styles emphasis in its own headings therefore keeps its own rule — `event-hero`
pins the same construct to `inherit` for its kicker, and carries the font-matching
trap behind 600 in full. */
main .section > .default-content :is(h1, h2, h3, h4, h5, h6) :is(strong, b) {
font-weight: bolder;
}
/* The same restoration for the LIGHT headings inside blocks (ISS-595). The importer
(cleanRichText) now keeps an authored in h1–h3 — column cells, table cells,
cards, article bodies — because legacy draws it: rsmus.com/industries/health-care's
stat `
3,500+
` computes 400 in a 300 h3 @1440 and @390, while ours
drew 300. Without this rule the global `strong { 700 }` would jump it to 700.
h4–h6 are left out: the importer still strips there, because legacy's
bolder against their 700 requests the Black face it never loads.
`:where()` keeps this at (0,0,2), just above the global `strong`, so a block that
sets its own heading-emphasis weight still wins (event-hero pins it to `inherit`,
and columns does the same where it had pinned the heading at 400 to stand in for
the the importer used to strip). */
main :where(h1, h2, h3) :is(strong, b) {
font-weight: bolder;
}
/* In-flow blockquote — the legacy pull-quote a news release authors INSIDE its
body copy. Legacy styles every rich-text blockquote globally
(`.cmp-text blockquote` in clientlib-site.css, flat at all viewports):
border-top/bottom: 1px solid #d9dada; color: var(--primary-dark-grey);
font-size: 24px; font-style: italic; font-weight: 700; padding: 20px 0;
so a bare
that carries no block wrapper still renders as a
bold-italic quote framed by hairline rules. EDS had no equivalent, so those
blockquotes inherited plain body copy: right words, wrong weight, and no
divider bars. Measured across the published corpus: 389 such quotes on 358
pages (100 on 86 rsm-ca, 289 on 272 rsm-us).
`.default-content` is the exact analogue of `.cmp-text`: groupChildren() in
scripts/ak.js puts every NON-div child (p, headings, blockquote) there and
every div (i.e. every block) in `.block-content`. Scoping here therefore
cannot reach a blockquote a block owns — `quote` builds its own in
`.quote-body` (see quote.css `quote-inline`, the opt-in variant that renders
this same treatment when the quote IS authored as a block), and
`rsm100-section` styles `.rsm100-section-content blockquote` itself.
#d9dada is legacy's literal hairline and has no `--color-*` token — the
nearest, `--color-light-grey-2` (#cdcecf), is a shade darker. Kept in sync
with quote.css `quote-inline` by hand; both cite this same legacy rule. */
main .section > .default-content blockquote {
margin: 0;
padding: 20px 0;
border-block: 1px solid #d9dada;
color: var(--color-primary-dark-grey);
font-size: 24px;
font-style: italic;
font-weight: 700;
}
/* The legacy blockquote holds raw text; DA wraps it in a
, whose own margin
would otherwise stack on top of the 20px padding above and pull the rules
apart. Zero it so the framed height matches legacy. */
main .section > .default-content blockquote p {
margin: 0;
}
main .section > .default-content blockquote p + p {
margin-top: 10px;
}
/* full-width: release the section's content from the centered 90% rail so it
stretches to the full section width (up to the 1920px body cap). Authored via
Section Metadata › Style: full-width. Lives here (not section-metadata.css)
because EDS can strip that sheet. */
main .section.full-width > .default-content,
main .section.full-width > .block-content {
max-width: 100%;
}
/* card-width | full-width (Section Metadata) — force the card grid in this
section to span the full section width, like the featured cards atop
rsmus.com/insights.html. A `card` block is double-capped: the section's
block-content rail AND the block's own --grid-container-width (see card.css).
This releases the block-content wrapper so the grid can stretch edge-to-edge
(up to the 1920px body cap); the per-block cap and the desktop 4-up column
layout are released in card.css. Only .block-content is released (NOT
.default-content), so sibling headings/text in the section stay on the normal
centered rail — this widens cards, not copy. Lives here (not
section-metadata.css) because EDS can strip that sheet. */
main .section.card-width-full-width > .block-content {
max-width: 100%;
}
/* section style variants (authored via Section Metadata › Style field) */
main .section.text-light {
color: var(--color-white);
h1, h2, h3, h4, h5, h6 { color: var(--color-white); }
a:any-link:not(.btn) { color: var(--color-white); }
}
/* Heading highlight (C77, ISS-593 / ISS-607) — Section Metadata › Style:
heading-highlight-blue | heading-highlight-navy. Legacy authors it as
`
…
`: a block heading with
one inline run, so a colour box sits behind each LINE of text. DA unwraps
every span, so the importer hoists a span that wraps a WHOLE h1–h3 to this
section style, and section-metadata.js restores the run as
`.heading-highlight-run` (the heading stays a block: alignment and margins
unchanged). Measured on legacy (rsmcanada.com agentic-ai-xf, @1440 + @390):
the run is inline, padding 0, box-decoration-break slice — so nothing but
the colour is set here. Section-wide by design: the importer applies it only
when EVERY h1–h3 in the section was highlighted. */
main .section.heading-highlight-blue :is(h1, h2, h3) > .heading-highlight-run { background-color: var(--color-primary-blue); }
main .section.heading-highlight-navy :is(h1, h2, h3) > .heading-highlight-run { background-color: var(--color-dark-navy); }
/* Author aid — Section Metadata → Style: link- recolors a section's
default-content links (e.g. a trailing "See all …" link). Scoped to
.default-content so block links (cards, etc.) are unaffected; covers plain
links and DA button links, and overrides the hover colour too. To add a
colour: set --section-link-color in a new rule and add the class to the
:is() list below.
NOTE: this color-only helper is DISTINCT from the `link | dark` key
(data-link, further below) — that one is the full legacy-sitemap link-list
treatment (chevron, bulletless, reaches .block-content). */
main .section:is(
.link-dark, .link-white, .link-green, .link-blue,
.link-grey, .link-gray, .link-medium-grey, .link-light-grey
) .default-content a:any-link,
main .section:is(
.link-dark, .link-white, .link-green, .link-blue,
.link-grey, .link-gray, .link-medium-grey, .link-light-grey
) .default-content a:any-link:hover {
color: var(--section-link-color);
}
main .section.link-dark { --section-link-color: #000; }
main .section.link-white { --section-link-color: var(--color-white); }
main .section.link-green { --section-link-color: var(--color-green); }
main .section.link-blue { --section-link-color: var(--color-blue); }
main .section.link-grey,
main .section.link-gray { --section-link-color: var(--color-dark-grey); }
main .section.link-medium-grey { --section-link-color: var(--color-medium-grey); }
main .section.link-light-grey { --section-link-color: var(--color-light-grey); }
/* bg-* section backgrounds — background-color and base text contrast come from
the global bg-* rules above; only section-specific overrides live here. */
main .section.bg-navy {
background-color: var(--color-navy);
color: var(--color-white);
h1, h2, h3, h4, h5, h6 { color: var(--color-white); }
a:any-link:not(.btn) { color: var(--color-white); }
}
main .section.bg-light-grey {
background-color: var(--color-light-grey);
color: var(--color-primary-dark-grey);
}
main .section.bg-accent-green {
background-color: var(--color-accent-green);
color: var(--color-white);
h1, h2, h3, h4, h5, h6 { color: var(--color-white); }
a:any-link:not(.btn) { color: var(--color-white); }
a.btn { border-color: var(--color-white); }
}
main .section.bg-blue {
background-color: var(--color-blue);
color: var(--color-white);
h1, h2, h3, h4, h5, h6 { color: var(--color-white); }
a:any-link:not(.btn) { color: var(--color-white); }
}
/* Global bg-* block background variants.
Authored as Block (bg-green), Block (bg-navy), etc. in Document Authoring.
Light backgrounds keep default dark text; dark backgrounds flip to white.
Block-specific link-colour overrides (e.g. navy links) stay in block CSS. */
.bg-white { background-color: var(--color-white); }
.bg-light-green { background-color: var(--color-light-green); }
.bg-light-blue { background-color: var(--color-light-blue); }
.bg-light-grey { background-color: var(--color-light-grey); }
.bg-green { background-color: var(--color-green); }
.bg-blue { background-color: var(--color-blue); }
.bg-accent-green { background-color: var(--color-accent-green); }
.bg-navy { background-color: var(--color-navy); }
.bg-grey { background-color: var(--color-grey); }
.bg-medium-grey { background-color: var(--color-medium-grey); }
.bg-dark-grey { background-color: var(--color-dark-grey); }
:is(.bg-green, .bg-blue, .bg-accent-green, .bg-navy,
.bg-grey, .bg-medium-grey, .bg-dark-grey) {
color: var(--color-white);
h1, h2, h3, h4, h5, h6, p { color: var(--color-white); }
a:any-link:not(.btn) { color: var(--color-white); }
}
/* Section background images (data-background-image). decorateSectionData adds
.has-background globally, but section-metadata.css only loads when that block
is present — so size/center the image here in the always-loaded global sheet. */
/* Section backgrounds. These rules live in the always-loaded global sheet
because section-metadata.css only loads when the section-metadata block is
present — so the block CSS can't be relied on in production. */
main .section.has-background {
position: relative;
min-height: 300px;
display: flex;
flex-direction: column;
justify-content: center;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
/* An IMAGE banner is a fixed-height band in legacy; ours was content-sized, so
`background-size: cover` cropped the subject (f-260920-pqjm: "the image of the
man and woman is getting cropped").
Measured on the render pair at 1440/1280/1024/992, rsm-us /careers/experienced
vs rsmus.com/careers/experienced.html — legacy's CTA banner (`.desktop-background`
after the first) is a FLAT 480px at every one of those widths, on 9 of 9 sampled
pages and 13 of 13 CTA-banner instances: /careers/experienced (2),
/careers/experienced/audit-careers (1), /services/audit-services (2),
/industries/retail (1), /about/year-in-review (1), /technologies/dayforce (1),
/offers/finance-accounting-outsourcing (1), /industries/asset-management (3),
/industries/private-equity (1). The asset-management page is the sharpest of
them: legacy 480/480/480, ours 380/380/395 before and 480/480/480 after.
Ours came out 380px, and 424px where the copy ran longer — same 1440 width and
the same `cover`, so 100px more of the image was cropped away vertically.
Count the CTA banners only. The FIRST `.desktop-background` on each of those
pages is the hero, and it is 450px, not 480 — so an element count over that
class reads 14 instances at two different heights and averages into a number
neither component has.
Three things this is deliberately NOT:
- NOT keyed on `.has-background` alone. That class is also on colour-only bands
(861 pages / 1935 `background-color` section rows in the staged corpus vs 141
pages / 168 `background-image` rows), and a flat 480px floor is wrong for a
band with no image to crop. `[data-background-image]` selects the image class
and only it.
- NOT applied below 992px. There, legacy HIDES the desktop background outright
(measured `display:none`, height 0 at 768) and so do we, two rules down — a
floor under a band with no image would just be a tall empty box.
- NOT `min-height: 480px` on its own. `min-height` sizes the CONTENT box, and
this section carries 40px of block padding each side, so the bare value
renders 560px. Same content-box trap as `.section.box`. `border-box` makes the
number in this rule the number on the screen.
The hero is a different component (`.hero`) and is untouched: legacy's hero is
450/400/426px across those widths, not a constant, and ours already matches.
One page in the sample does NOT have a legacy counterpart to match, and it is
recorded rather than dropped: rsm-us /industries/financial-services renders an
image band here (380 -> 480) where legacy shows a hero and no CTA banner at all.
That is a content-shape difference, not evidence about the height, so it neither
supports nor contradicts the 480 — but the band is real on our side, and 480 is
what every measured legacy banner does. */
@media (width >= 992px) {
main .section.has-background[data-background-image] {
box-sizing: border-box;
min-height: 480px;
}
}
/* The same floor for a BOXED panel whose background is the picture form
(`background-image` / `background-image-mobile` section-metadata keys →
), which never carries the attribute the
rule above keys on. It is the same legacy component: `.has-desktopBg`, a
`min-height: 480px` on any container that paints a desktop background.
Measured 2026-10-08 on rsm-ca …/persistent-cybersecurity-threats-require-
protective-strategies (nine chapter banners): legacy 940x480 @1440 and 370x480
@390, ours 853x300 at both — the 300 is `.has-background`'s own floor, and the
cover-fit art lost its icon to the crop.
Below 992px only WITH a mobile picture: legacy keeps the 480 there because it
swaps in `cyber_break_mob.jpg`; without one the desktop picture hides (the
`:not(.has-mobile-background)` rules below) and a floor would be an empty box.
`.section.box` is already border-box, so the number is the number on screen.
BOTH background forms, below 992px. The published page does not keep the
picture form: the pipeline delivers the section-metadata background as the
ATTRIBUTE form (`data-background-image` / `-mobile`, painted inline), so on the
CDN the desktop floor above already applies — and this mobile rule, written
for the picture form only, matched nothing. Measured 2026-10-08 on that page on
eds-prd.rsmcanada.com after re-stage: 853x480 @1440 (right), 370x300 @390
(legacy 370x480). Still scoped to `.box`: an unboxed CTA banner's mobile height
has not been measured, so it is left alone. */
@media (width >= 992px) {
main .section.box.has-background:has(> picture.section-background) {
min-height: 480px;
}
}
main .section.box.has-mobile-background:is(:has(> picture.section-background.mobile), [data-background-image-mobile]) {
min-height: 480px;
}
/* …and the UNBOXED band with a mobile picture, below 992px, which the note above left
unmeasured. It is the same legacy rule (`.cmp-container.has-mobileBg { min-height:
480px }` below `desktop`, RSMUS_ACM _container.scss), not a box-only one. Measured
2026-10-13 @390, rsm-us …/aimbridge-case-study-hospitality-company-focuses-on-process-
integration, the "Ready to modernize your finance function?" CTA band
(/fragments/digital-transformation, mobile picture digital_data_binary_abs_ctamob.jpg
on both sides): legacy 480 tall, ours 380 (f-260624-i161). border-box because an
unboxed section is content-box with block padding, which would render 560. */
@media (width < 992px) {
main .section.has-mobile-background:is(:has(> picture.section-background.mobile), [data-background-image-mobile]) {
box-sizing: border-box;
min-height: 480px;
}
}
/* Content sits above the background image and stays within the grid width. */
main .section.has-background > :is(.default-content, .block-content) {
position: relative;
z-index: 2;
width: 100%;
}
/* Picture-based backgrounds (background-image / background-image-mobile keys →
). */
main .section picture.section-background {
display: block;
position: absolute;
inset: 0;
z-index: 0;
}
main .section .section-background img {
object-fit: cover;
height: 100%;
width: 100%;
}
/* A mobile background hides until the breakpoint, where it swaps in. */
main .section.has-mobile-background .section-background.mobile {
display: none;
}
@media (width < 992px) {
main .section.has-mobile-background .section-background.desktop {
display: none;
}
main .section.has-mobile-background .section-background.mobile {
display: block;
}
/* Attribute form (inline CSS background via --section-bg, no ): swap
the desktop URL for the mobile one below 992px. --section-bg is set as an
INLINE custom property by the JS, which normally out-specifies a stylesheet
rule — so !important is required here for the reassignment to win. */
main .section.has-mobile-background {
--section-bg: var(--section-bg-mobile) !important;
}
/* No mobile background authored: below 992px drop the image so the section's
background-color shows instead (a desktop banner image often doesn't crop
well on narrow screens). This covers BOTH background paths:
- picture form → hide the .section-background.desktop element
- attribute form (data-background-image → inline CSS background-image on
the section) → null the inline image via a custom property fallback.
Sections with no background-color simply show no image here. */
main .section.has-background:not(.has-mobile-background) .section-background.desktop {
display: none;
}
main .section.has-background:not(.has-mobile-background) {
background-image: none !important;
}
/* background-color-mobile (section-metadata option): below 992px, override
the section background-color with the authored mobile value. Typically used
where a desktop background-image is hidden on mobile and a flat colour
should replace it. The value is set inline by section-metadata.js. */
main .section.has-mobile-bg-color {
background-color: var(--background-color-mobile) !important;
}
/* Copy on the flat fallback above takes white or dark, whichever passes 4.5:1
(CAM-033, RSM ruling Q14 2026-09-25). section-metadata.js marks only the
elements that sit directly on the band AND fail against its fallback colour,
and picks the colour; this applies it. Same selector as the image drop, so it
can only act where the image is actually gone. !important because the copy's
own colour comes from rules of every specificity (text-light, panel-text-light,
.default-content.dark-scheme). Desktop is untouched: this is the only rule. */
main .section.has-background:not(.has-mobile-background) .mobile-fallback-text {
color: var(--mobile-fallback-text) !important;
}
main .section.has-background:not(.has-mobile-background) a.btn.mobile-fallback-text {
border-color: var(--mobile-fallback-text) !important;
}
}
/* Per-tag text centering via data-text-center="h1,p" etc. (set by section-metadata) */
main .section[data-text-center*="h1"] :is(.default-content, .block-content) h1,
main .section[data-text-center*="h2"] :is(.default-content, .block-content) h2,
main .section[data-text-center*="h3"] :is(.default-content, .block-content) h3,
main .section[data-text-center*="h4"] :is(.default-content, .block-content) h4,
main .section[data-text-center*="h5"] :is(.default-content, .block-content) h5,
main .section[data-text-center*="h6"] :is(.default-content, .block-content) h6,
main .section[data-text-center*="p"] :is(.default-content, .block-content) p,
main .section[data-text-center*="li"] :is(.default-content, .block-content) li {
text-align: center;
}
main .section[data-text-right*="h1"] :is(.default-content, .block-content) h1,
main .section[data-text-right*="h2"] :is(.default-content, .block-content) h2,
main .section[data-text-right*="h3"] :is(.default-content, .block-content) h3,
main .section[data-text-right*="h4"] :is(.default-content, .block-content) h4,
main .section[data-text-right*="h5"] :is(.default-content, .block-content) h5,
main .section[data-text-right*="h6"] :is(.default-content, .block-content) h6,
main .section[data-text-right*="p"] :is(.default-content, .block-content) p,
main .section[data-text-right*="li"] :is(.default-content, .block-content) li {
text-align: right;
}
main .section[data-text-left*="h1"] :is(.default-content, .block-content) h1,
main .section[data-text-left*="h2"] :is(.default-content, .block-content) h2,
main .section[data-text-left*="h3"] :is(.default-content, .block-content) h3,
main .section[data-text-left*="h4"] :is(.default-content, .block-content) h4,
main .section[data-text-left*="h5"] :is(.default-content, .block-content) h5,
main .section[data-text-left*="h6"] :is(.default-content, .block-content) h6,
main .section[data-text-left*="p"] :is(.default-content, .block-content) p,
/* `li` (T-C7 round 3): a list in a left-governed fragment is copy too — see
engine scripts/lib/fragment-align.mjs › unclaimedTags. */
main .section[data-text-left*="li"] :is(.default-content, .block-content) li {
text-align: left;
}
/* POSITIONAL alignment (ISS-550): one element whose legacy alignment differs from its tag's,
stamped by section-metadata.js from `text-center | h2:2`. (0,4,1) outranks the (0,3,2) tag
rules above, so an explicit per-element value wins over the tag-wide one. ISS-562 extends it
to block content (`b:p:4~fp`): the tag rows reach .block-content too, and a block element
legacy aligns differently from its row is stamped the same way. :is() keeps (0,4,1). */
main .section[data-text-pos] :is(.default-content, .block-content) [data-text-align="center"] { text-align: center; }
main .section[data-text-pos] :is(.default-content, .block-content) [data-text-align="right"] { text-align: right; }
main .section[data-text-pos] :is(.default-content, .block-content) [data-text-align="left"] { text-align: left; }
/* MOBILE alignment (`text-left-mobile`, set by section-metadata.js): legacy's one responsive
alignment rule, `.ta-center.mobile-left` = centre >=992px, LEFT below (RSMUS_ACM
_container.scss, `media(", so it inherits the 10px body-paragraph margin above and sits half
as far from the heading that follows as legacy puts it. Measured 2026-08-26 at
1440 on /technologies/microsoft/services/managed-services/managed-applications,
both full-width graphics on the page:
legacy mas-pillars-infographic (840x792) 20px before the next H2
mas-focus-areas-graphic (840x587) 20px
EDS both 10px
Scoped to a
whose ONLY child is the picture, so an inline image sitting
alongside text keeps the body-copy margin it should have. A LINKED graphic
(`
`
with no ``/`` wrapper, so ak.js never decorates it and it falls through
to the body-link defaults: `--color-link` green, weight 500, underlined, and the
section's own (left) alignment. Legacy's `.cmp-linklist a` is none of those.
Measured @1440, ours vs `rsmus.com/industries/asset-management.html` as the control:
before x=80 w=280 rgb(63,156,53) w500 underline
after x=583 w=275 rgb(83,86,90) w400 none
legacy x=580 w=281 rgb(83,86,90) w400 none
Colour, weight and decoration match exactly; position is 3px out on font metrics.
`#53565a` is the literal legacy value and the one h1–h6 already use above — NOT
`--color-text`, which is `--color-primary-dark-grey` `#515356`, a different grey.
The two halves are scoped differently ON PURPOSE. Colour/weight/decoration is what
legacy's linklist does everywhere, so it applies to every arrow link in default
content. CENTERING is not: legacy centres this CTA by putting the whole container
in `ta-center`, which is a per-band authoring choice, and the fragment path emits
the same arrow shape where centring has not been measured. So centring is scoped
to a section that also holds a cardlist — the "See all insights" pattern
both findings describe — rather than applied to all 156 arrow linklists blind.
Refs f-260901-ukpp, f-260824-jgqp. */
/* stylelint-disable no-descending-specificity -- these three sit beside the
button/link rules they belong with; hoisting them above `a:any-link:not(.btn)`
(line ~724) to satisfy the rule would move them out of that cascade for no
rendering gain. The file already carries 58 of this same class (deferred lint
backlog); this keeps the count from growing. */
main .default-content a:has(> .icon-chevron-right-solid-full),
main .default-content a:has(> .icon-chevron-right-green) {
font-weight: 400;
text-decoration: none;
}
/* The GREY is the linklist's alone. A legacy `button style=tertiary theme=_green`
is emitted as the same arrow link with its own icon, `:chevron-right-green:`
(formatButton), because legacy draws it `.cmp-button.tertiary._green`: rgb(63,156,53),
the body link's own green. Keyed on the shared icon, this rule greyed 164 of them
on 35 published pages (render-measured, f-260926-g98m). */
main .default-content a:has(> .icon-chevron-right-solid-full) {
color: #53565a;
}
main .default-content a:has(> .icon-chevron-right-solid-full):hover,
main .default-content a:has(> .icon-chevron-right-green):hover {
text-decoration: underline;
}
main .section:has(.cardlist) .default-content p:has(> a:only-child > .icon-chevron-right-solid-full),
main .section:has(.cardlist) .default-content p:has(> a:only-child > .icon-chevron-right-green) {
text-align: center;
margin-top: 8px;
}
/* The same tertiary arrow link inside a `columns` cell (f-261001-s8j6). Legacy
renders it as `a.cmp-button._green.tertiary`: weight 400. The rule above only
reaches `.default-content`, so a column cell fell to the body link's 500.
WEIGHT ONLY, on purpose: legacy's colour here is `_green` (rgb(63,156,53)),
which the body link already matches, not the linklist grey above. Measured on
rsm-us /insights/technology/microsoft/dynamics-365-buyers-guide @1440 (6 links
in the gold-partner fragment): legacy w400, ours w500. The "underline" a style
read reports on ours is `text-decoration-line` with a TRANSPARENT colour — not
visible at rest, same as legacy — so decoration is left alone. */
main .columns a:has(> .icon-chevron-right-solid-full),
main .columns a:has(> .icon-chevron-right-green) {
font-weight: 400;
}
/* stylelint-enable no-descending-specificity */
main a.button:any-link {
background: none;
border: none;
border-radius: 0;
color: var(--color-link);
font-size: inherit;
font-weight: inherit;
padding: 0;
margin: 0;
text-decoration: underline;
white-space: normal;
}
strong {
font-weight: var(--font-weight-bold);
}
input,
textarea,
select,
button {
font: inherit;
}
img {
width: 100%;
height: auto;
}
svg {
width: 20px;
height: 20px;
}
svg.icon {
width: 1em;
height: 1em;
fill: currentColor;
vertical-align: middle;
}
a svg.icon {
width: 10px;
height: 10px;
}
/* Legacy's linklist chevron sits 5px off its text (`.cmp-linklist em`, margin-left 5px)
wherever it appears, not only in a `link-list` section. Measured @1440 on rsm-ca
/insights/services/audit/guide-to-changing-your-auditor (a `box` TOC, C67):
text-to-glyph gap legacy 8px, ours 0px; with this, the glyph's own side bearing
makes up the other ~3px. */
a svg.icon-chevron-right-solid-full,
a svg.icon-chevron-right-green {
margin-left: 5px;
}
/* …but a link-list chevron is legacy's 12px glyph, not the 10px inline default
(see the `link-list` section style above). */
main .section.link-list > .default-content a svg.icon {
width: 12px;
height: 12px;
margin-left: 5px;
}
/*
* Canonical breakpoints (RSMUS_ACM-aligned — media queries cannot use CSS vars):
* phoneL 567px @media (width >= 567px)
* tablet 768px @media (width >= 768px)
* desktop 992px @media (width >= 992px)
* desktopMx 1280px @media (width >= 1280px)
* desktopS 1440px @media (width >= 1440px)
*/
@media (width >= 1440px) {
:root {
--grid-container-width: 1280px;
}
}
/* Hide authored sections until they are decorated, so nothing flashes undecorated.
The reveal is pure cascade: decoration adds `.section`, and the `.section`
rule's `display: block` (0,1,0) out-points `main > div` (0,0,2) because one
class beats any number of element selectors. `div[data-status]` re-hides a
section while its blocks load, until ak.js deletes the attribute.
DO NOT write the fragment exemption below as `main > div:not(.fragment-content)`.
`:not()` takes the specificity of its argument, so that selector is (0,1,2) —
which then out-points `.section` (0,1,0) and hides EVERY section on EVERY page.
The exemption has to be a separate rule that wins on its own, which is why it
sits beside the `.section` rule rather than as an exception here. */
main > div,
.has-template,
div[data-status] {
display: none;
}
/* A hero that never decorated: hero.js failed to load twice (ak.js retries once), or
decorate() threw before it built `.cmp-hero`. The reveal above happens anyway, and
the raw table renders both background pictures at full width with the key names
as text. Keep the heading on the rail and drop the rest. This has to live here, not
in hero.css, which rides the same connection that just failed.
`.cmp-hero` in the :not() keeps the decorated root out: hero.js adds the authored
`type` to it as a class, so a `type: hero` root (both homepages) is itself `.hero`
with no `.cmp-hero` child. Without it the root matched, was capped at the rail, and
its background div (no h1) was hidden. */
main .hero:not(.cmp-hero, :has(> .cmp-hero)) {
max-width: 1280px;
margin-inline: auto;
padding: 32px 20px;
}
main .hero:not(.cmp-hero, :has(> .cmp-hero)) > div:not(:has(h1)),
main .hero:not(.cmp-hero, :has(> .cmp-hero)) > div > div:first-child:not(:only-child) {
display: none;
}
aem-sidekick {
opacity: 0;
&[open="true"].is-ready {
opacity: 1;
}
}
/* Newsroom welcome column (rsmus.com parity). Scoped via the section-metadata
style token `newsroom-welcome` (authored classes on a
are stripped by the
pipeline, but section-metadata style values survive as section classes). */
/* Match rsmus.com's wider columns: trim the block's 40px side gutter so the
promo image (and intro text) fill the column like live — the image renders
~512px, matching live, instead of 453px inside the default padding. */
main .section.newsroom-welcome .columns .col {
padding-inline: 10px;
}
/* The RSM100 promo image is the column's first child, so the columns block's
`.col > p:first-child img` icon rule shrinks it to 80px — restore full width. */
main .section.newsroom-welcome .columns .col > p:first-child img {
width: 100%;
height: auto;
max-width: none;
}
/* "Follow RSM:" label inline with the social icons on one row (rsmus.com):
bold 700 label (matches live), ~18px dark-grey icons spaced ~26px apart,
right-aligned to the column's right edge (under the promo image's edge). */
main .section.newsroom-welcome .columns .col p:has(> a > .icon, > a > svg) {
display: flex;
flex-wrap: wrap;
gap: 28px;
align-items: center;
justify-content: flex-end;
margin-top: 16px;
font-weight: 700;
}
main .section.newsroom-welcome .columns .col p a:has(> .icon, > svg) {
display: inline-flex;
align-items: center;
justify-content: center;
width: 24px;
height: 24px;
color: var(--color-primary-dark-grey, #515356);
transition: color 0.2s ease;
}
main .section.newsroom-welcome .columns .col p a:has(> .icon, > svg):hover {
color: var(--color-primary-green);
}
main .section.newsroom-welcome .columns .col :is(.icon, svg) {
width: 24px;
height: 24px;
fill: currentColor;
}
/* Tablet+ (>= 768px): keep the welcome intro (left) and RSM100 promo (right)
side-by-side, overriding the global sub-992 columns stack (columns.css). The
7-5 ratio lives in --col-template (set by columns.js); align content to the
top so the intro copy and the promo image share a top edge (rsmus.com). */
@media (width >= 768px) {
main .section.newsroom-welcome .columns .row {
grid-template-columns: var(--col-template, 7fr 5fr);
align-items: start;
column-gap: var(--spacing-m);
}
}
/* Media-contact band — the "…for media use only / Follow RSM:" row that opens
/newsroom. It is authored as a `columns` block whose trailing paragraph is a
run of icon-only links. `span.icon` is swapped for a bare