/* =========================================================================
RBCCM Hero - shared component
Deploy path: /assets/rbccm/css/components/rbccm-hero.css
Purpose
-------------------------------------------------------------------------
Shared hero shell + per-page variant modifiers. Each RBCCM page that
ships a big top-of-page hero authors its own markup with the shared
.rbccm-hero block + a --{page-slug} modifier that owns the variant's
layout, typography ramp, background treatment, and section-specific
accents.
The BASE block owns:
- Vertical padding response (compensates for the fixed site nav)
- Container max-width + centring
- Font-family locks (RBCDisplay + Roboto -- defends against
unified.css sibling rules that reset h1/h2 tag-level)
- Overflow clipping so decorative bg/halos don't bleed to siblings
- Reset of margin/padding on inner elements when a tag-selector
from the CMS global stylesheet would otherwise interfere
Each VARIANT modifier owns:
- Layout (centred vs split-column vs full-bleed image, etc.)
- Background treatment (glow halo, chart image, gradient, plain)
- Typography ramp (H1 size + weight + colour flip)
- Aside/media slot styling
- CTA button row layout
Variants (one TeamSite skin each, all sharing this file)
-------------------------------------------------------------------------
MAAS+MATA .rbccm-hero.rbccm-hero--maas-mata
skin rbccm-hero--maas-mata.xsl
(buttons are styled in this file; no
rbccm-button.css needed)
Strategy & Economics .rbccm-hero.rbccm-hero--strategy-and-economics
skin rbccm-hero--strategy-and-economics.xsl
(insight card also needs rbccm-hero.js)
US Credentials .rbccm-hero.rbccm-hero--us-credentials
skin rbccm-hero--us-credentials.xsl
Option on any variant: .rbccm-hero--header-center (HeaderAlignment)
(candidate) Insights hub, About Us, others as they migrate.
Adding a new variant
-------------------------------------------------------------------------
1. Copy the closest skin to rbccm-hero--{page-slug}.xsl and change its
hardcoded variant class to .rbccm-hero--{page-slug}
2. Add a new modifier block at the bottom of this file with the
variant's layout + typography + bg treatment
3. List it above
4. Load rbccm-hero.css BEFORE the page's own CSS so page rules can
still override if needed
========================================================================= */
/* ---------- Base block -------------------------------------------------- */
.rbccm-hero {
--rbccm-hero-ink: #082043;
--rbccm-hero-navy: #003168;
--rbccm-hero-navy-dark: #002144;
--rbccm-hero-blue: #0051A5;
--rbccm-hero-yellow: #FFC72C;
--rbccm-hero-serif: RBCDisplay, Georgia, Times, serif;
--rbccm-hero-sans: Roboto, Arial, sans-serif;
/* Vertical padding compensates for the fixed site navbar (~55px)
sitting on top of the hero. Variants can override via inline
`style="--rbccm-hero-pt-m: 120px; --rbccm-hero-pt-d: 160px;"`
or by re-declaring in their modifier block. */
padding-top: var(--rbccm-hero-pt-m, 95px);
padding-bottom: var(--rbccm-hero-pb-m, 75px);
position: relative;
overflow: hidden;
box-sizing: border-box;
}
.rbccm-hero *,
.rbccm-hero *::before,
.rbccm-hero *::after { box-sizing: border-box; }
@media (min-width: 992px) {
.rbccm-hero {
padding-top: var(--rbccm-hero-pt-d, 130px);
padding-bottom: var(--rbccm-hero-pb-d, 120px);
}
}
/* Container -- max width + horizontal gutter. Individual variants can
override to full-bleed by targeting .rbccm-hero__container inside
their modifier scope. */
.rbccm-hero__container {
max-width: 1180px;
margin: 0 auto;
padding: 0 16px;
position: relative;
z-index: 1;
}
@media (min-width: 992px) {
.rbccm-hero__container { padding: 0 24px; }
}
/* Safety net for direct children of the hero that sit OUTSIDE the
container -- keeps them above decorative ::before backdrops that
variants layer at z-index 0. */
.rbccm-hero > * { position: relative; z-index: 1; }
/* Font-family lock on the big serif visual headings. unified.css
sets its own font-family + letter-spacing on h1/h2 via tag
selectors, which suppresses RBCDisplay and opens tracking. The
lock targets the semantic classes (not h1/h2 raw tags), because
MAAS+MATA authors the H1 on the eyebrow (Roboto uppercase, SEO)
and the visual "title" as a
. Locking the tag would force
serif onto the sans eyebrow. */
.rbccm-hero .rbccm-hero__title,
.rbccm-hero .rbccm-hero__title-line {
font-family: var(--rbccm-hero-serif) !important;
letter-spacing: 0 !important;
}
/* Reset margin/padding on inner elements where a CMS global tag
rule would otherwise apply !important margins. Tag-agnostic --
authors can use
or
for either element depending on
their page's semantic needs. Variants own the visual margin via
their own class rules. */
h1.rbccm-hero__eyebrow, p.rbccm-hero__eyebrow,
h1.rbccm-hero__title, p.rbccm-hero__title,
h1.rbccm-hero__subtitle, p.rbccm-hero__subtitle,
h1.rbccm-hero__body, p.rbccm-hero__body {
padding: 0;
}
/* =========================================================================
Variant: MAAS + MATA
-------------------------------------------------------------------------
Centred hero. Eyebrow with yellow underline, 2-line H1 (last line
flips to bright blue), subtitle, dual CTA row. Soft blue glow halo
at top-centre via ::before. Faint graph-paper backdrop across the
whole hero (ported from `.rbccm-maas-mata` page-root pattern:
1.2px vertical + horizontal rules @ 23.35px pitch, plus a small
"cross" accent at every intersection). If the consumer page also
paints the graph paper site-wide (as maas-mata.css does today),
the two stacks are visually identical and layer harmlessly.
========================================================================= */
.rbccm-hero--maas-mata {
/* Clears the fixed site navbar; 170px from 992 up (below). */
padding-top: 140px;
background-color: #fff;
background-image:
repeating-linear-gradient(
90deg,
rgba(0, 49, 104, 0.025) 0,
rgba(0, 49, 104, 0.025) 1.2px,
transparent 1.2px,
transparent 23.35px,
rgba(0, 49, 104, 0.01) 23.35px,
rgba(0, 49, 104, 0.01) 24.55px,
transparent 24.55px,
transparent 46.70px,
rgba(0, 49, 104, 0.01) 46.70px,
rgba(0, 49, 104, 0.01) 47.90px,
transparent 47.90px,
transparent 70.05px,
rgba(0, 49, 104, 0.01) 70.05px,
rgba(0, 49, 104, 0.01) 71.25px,
transparent 71.25px,
transparent 93.40px,
rgba(0, 49, 104, 0.01) 93.40px,
rgba(0, 49, 104, 0.01) 94.60px,
transparent 94.60px,
transparent 116.75px
),
repeating-linear-gradient(
180deg,
rgba(0, 49, 104, 0.025) 0,
rgba(0, 49, 104, 0.025) 1.2px,
transparent 1.2px,
transparent 23.35px,
rgba(0, 49, 104, 0.01) 23.35px,
rgba(0, 49, 104, 0.01) 24.55px,
transparent 24.55px,
transparent 46.70px,
rgba(0, 49, 104, 0.01) 46.70px,
rgba(0, 49, 104, 0.01) 47.90px,
transparent 47.90px,
transparent 70.05px,
rgba(0, 49, 104, 0.01) 70.05px,
rgba(0, 49, 104, 0.01) 71.25px,
transparent 71.25px,
transparent 93.40px,
rgba(0, 49, 104, 0.01) 93.40px,
rgba(0, 49, 104, 0.01) 94.60px,
transparent 94.60px,
transparent 116.75px
),
url("data:image/svg+xml;utf8,");
background-size: auto, auto, 116.75px 116.75px;
background-position: 0 0, 0 0, -57.775px -57.775px;
background-repeat: repeat, repeat, repeat;
}
@media (min-width: 992px) {
.rbccm-hero--maas-mata { padding-top: 170px; }
}
.rbccm-hero--maas-mata .rbccm-hero__container { text-align: center; }
/* Same as the MAAS+MATA page: 75px below the button at every size
(the base block's desktop 120 is for the other variants). */
.rbccm-hero--maas-mata {
--rbccm-hero-pb-d: 75px;
}
/* Glow halo -- soft light-blue disc, blurred, sitting at top-centre
like a backdrop. Kept OUT of the accessibility tree via ::before. */
.rbccm-hero--maas-mata::before {
content: "";
position: absolute;
top: -369px;
left: 50%;
width: 702px;
height: 702px;
margin-left: -351px;
border-radius: 50%;
background: rgba(0, 81, 165, 0.04);
filter: blur(100px);
pointer-events: none;
z-index: 0;
}
/* Eyebrow -- blue, letter-spaced, text as typed (not uppercased,
same as the MAAS+MATA page), with a 45x2 yellow underline beneath
via ::after. Bottom margin of 80px lands the eyebrow-to-H1
measurement per Figma. It's the page's h1, so !important beats the
site's h1 tag rules (size, weight, case, tracking). */
.rbccm-hero--maas-mata .rbccm-hero__eyebrow {
color: var(--rbccm-hero-blue) !important;
font-family: var(--rbccm-hero-sans) !important;
font-size: 14px !important;
font-weight: 400 !important;
line-height: 120% !important;
letter-spacing: 3px !important;
text-transform: none !important;
margin: 0 0 80px !important;
}
.rbccm-hero--maas-mata .rbccm-hero__eyebrow::after {
content: "";
display: block;
width: 45px;
height: 2px;
background: var(--rbccm-hero-yellow);
margin: 15px auto 0;
}
/* Title -- RBCDisplay 50/75px, 2 lines. Last line flips to blue via
__title-line:last-child. */
.rbccm-hero--maas-mata .rbccm-hero__title {
font-family: var(--rbccm-hero-serif);
font-size: 50px;
font-weight: 500;
line-height: 100%;
color: var(--rbccm-hero-ink);
margin: 0 auto 12px;
}
@media (min-width: 992px) {
.rbccm-hero--maas-mata .rbccm-hero__title {
font-size: 75px;
margin: 0 0 20px;
}
}
.rbccm-hero--maas-mata .rbccm-hero__title-line { display: block; }
.rbccm-hero--maas-mata .rbccm-hero__title-line:last-child { color: var(--rbccm-hero-blue); }
/* Subtitle -- Roboto, centered, cap width. Values match the MAAS+MATA
page (620 / 832 caps, 33 / 48 desktop margins). !important on type:
site p rules otherwise add letter-spacing and change the size. */
.rbccm-hero--maas-mata .rbccm-hero__subtitle {
color: var(--rbccm-hero-ink) !important;
font-family: var(--rbccm-hero-sans) !important;
font-size: 16px !important;
font-weight: 400 !important;
line-height: 120% !important;
letter-spacing: 0 !important;
max-width: 620px;
margin: 0 auto 32px !important;
}
.rbccm-hero--maas-mata .rbccm-hero__subtitle strong { font-weight: 700; }
@media (min-width: 992px) {
.rbccm-hero--maas-mata .rbccm-hero__subtitle {
font-size: 21.945px !important;
max-width: 832px;
margin: 33px auto 48px !important;
}
}
/* CTA row -- two buttons centered, 12px gap. Wraps on narrow. */
.rbccm-hero--maas-mata .rbccm-hero__actions {
display: inline-flex;
gap: 12px;
align-items: center;
flex-wrap: wrap;
justify-content: center;
}
/* ---- MAAS+MATA buttons (baked in) ---------------------------------------
The hero's buttons are styled right here, copied from maas-mata.css
(.rbccm-maas-mata__btn / --primary / --secondary, their icon, the
shine sweep + arrow flyby, and the TeamSite defence block), so the
hero doesn't need rbccm-button.css. The skin still outputs the
rbccm-button class names; these rules are scoped to the MAAS+MATA
hero so they don't touch rbccm-button anywhere else.
!important where maas-mata.css used it: unified.css / unified2.css
.btn, a and a:hover rules otherwise reshape the pill. */
.rbccm-hero--maas-mata .rbccm-button {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
gap: 10px;
height: 50px !important;
padding: 12px 35px !important;
border-radius: 100px !important;
border: 1px solid transparent;
cursor: pointer;
font-family: Roboto, Arial, sans-serif !important;
font-size: 18px;
line-height: 29.26px;
letter-spacing: 0 !important;
text-decoration: none !important;
box-sizing: border-box;
position: relative !important;
overflow: hidden !important;
}
.rbccm-hero--maas-mata .rbccm-button > * { position: relative !important; z-index: 1 !important; }
.rbccm-hero--maas-mata .rbccm-button:hover,
.rbccm-hero--maas-mata .rbccm-button:focus { text-decoration: none !important; }
.rbccm-hero--maas-mata .rbccm-button:focus-visible {
outline: 2px solid #0051A5;
outline-offset: 3px;
}
/* Primary: #0051A5 pill, white 18/29.26 wt 500 text, white arrow. */
.rbccm-hero--maas-mata .rbccm-button--primary {
background: #0051A5 !important;
color: #fff !important;
border: 1px solid #0051A5 !important;
font-size: 18px !important;
font-weight: 500 !important;
line-height: 29.26px !important;
}
.rbccm-hero--maas-mata .rbccm-button--primary:hover,
.rbccm-hero--maas-mata .rbccm-button--primary:focus-visible {
background: #003168 !important;
border-color: #003168 !important;
color: #fff !important;
}
.rbccm-hero--maas-mata .rbccm-button--primary .rbccm-button__icon {
fill: #fff;
width: 23px;
height: 23px;
flex-shrink: 0;
transition: transform 200ms ease, opacity 200ms ease !important;
will-change: transform, opacity;
}
/* Secondary: outlined, grey text + border, small grey icon. */
.rbccm-hero--maas-mata .rbccm-button--secondary {
background: transparent !important;
color: #494949 !important;
border: 1px solid #D8D8D8 !important;
font-weight: 400 !important;
}
.rbccm-hero--maas-mata .rbccm-button--secondary:hover,
.rbccm-hero--maas-mata .rbccm-button--secondary:focus-visible {
border-color: #494949 !important;
color: #494949 !important;
}
.rbccm-hero--maas-mata .rbccm-button--secondary .rbccm-button__icon {
fill: #494949;
width: 12px;
height: 13px;
flex-shrink: 0;
}
/* Shine sweep on primary: a soft white diagonal band crosses the pill
on hover / keyboard focus (transition-based, like the live page, so
it retriggers on every hover). */
.rbccm-hero--maas-mata .rbccm-button--primary::before {
content: "" !important;
position: absolute !important;
top: 0 !important;
bottom: 0 !important;
left: -60% !important;
width: 40% !important;
background: linear-gradient(120deg, transparent 0%, rgba(255,255,255,0.35) 50%, transparent 100%) !important;
transform: skewX(-18deg) !important;
pointer-events: none !important;
opacity: 0 !important;
z-index: 0 !important;
transition: left 600ms ease-out, opacity 600ms ease-out !important;
animation: none !important;
}
.rbccm-hero--maas-mata .rbccm-button--primary:hover::before,
.rbccm-hero--maas-mata .rbccm-button--primary:focus-visible::before {
left: 120% !important;
opacity: 1 !important;
}
/* Arrow flyby: slides out right, reappears from the left, settles. */
.rbccm-hero--maas-mata .rbccm-button--primary:hover .rbccm-button__icon,
.rbccm-hero--maas-mata .rbccm-button--primary:focus-visible .rbccm-button__icon {
animation: rbccm-hero-arrow-flyby 550ms cubic-bezier(0.55, 0, 0.1, 1) both !important;
}
@keyframes rbccm-hero-arrow-flyby {
0% { transform: translateX(0); opacity: 1; }
45% { transform: translateX(32px); opacity: 0; }
46% { transform: translateX(-32px); opacity: 0; }
100% { transform: translateX(0); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
.rbccm-hero--maas-mata .rbccm-button--primary::before { transition: none !important; }
.rbccm-hero--maas-mata .rbccm-button--primary:hover::before,
.rbccm-hero--maas-mata .rbccm-button--primary:focus-visible::before { opacity: 0 !important; }
.rbccm-hero--maas-mata .rbccm-button--primary:hover .rbccm-button__icon,
.rbccm-hero--maas-mata .rbccm-button--primary:focus-visible .rbccm-button__icon { animation: none !important; }
}
/* =========================================================================
Variant: Strategy & Economics
-------------------------------------------------------------------------
Mobile-first spec (per Justin's Figma-derived measurements).
Outer bg: soft blue-grey #E7EEF1. Content stacks: H1 + body copy,
then a dark-navy "Latest insight" card below. Fixed 781px mobile
height, 23px horizontal padding, content capped at 1320px inside.
Desktop layout override lands at >=992px (grid split, insight
card moves to the right column) -- kept as a light layer atop the
mobile base so nothing shifts unexpectedly.
========================================================================= */
.rbccm-hero--strategy-and-economics {
background: #E7EEF1;
color: var(--rbccm-hero-ink);
/* Vertical rhythm from the Figma spec:
frame height 781px
content height 568.1875px
remainder ~212.8125px -> split ~106px top / ~106px bottom
Using padding rather than a fixed height so the section grows
with content if the copy runs longer than Figma expected. Outer
23px horizontal gutter matches the Figma spec exactly.
Top padding also carries the shared nav compensation: the base
.rbccm-hero block sets 95px top on mobile to clear the fixed
nav, but the shorthand below would clobber it, so we add the
95 back in (95 + 106 = 201px total). Bottom stays at 106px. */
padding: 171px 23px 106px;
height: auto;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
/* 8px warm-yellow rule at the bottom, per Figma. Applied on the
base variant so it carries through both mobile and desktop. */
border-bottom: 8px solid var(--Yellow-Warm-Yellow, #FFC72C);
/* position: relative is inherited from the shared block base; keeps
the bg-video slot anchored to this section. */
}
/* Optional background video slot. When an author includes an
`.rbccm-hero__bg-video` element inside the section, it fills the
entire section as an absolute-cover backdrop and the solid
#E7EEF1 fallback stays behind it (visible until the video paints,
and if the source ever fails). aria-hidden on the wrapper keeps
assistive tech from announcing decorative motion. In production
this element hosts a Brightcove Player iframe with autoplay,
muted, loop, playsinline, controls disabled - same URL contract
as featured-conferences.js already uses. */
.rbccm-hero--strategy-and-economics .rbccm-hero__bg-video {
position: absolute;
inset: 0;
z-index: 0;
overflow: hidden;
pointer-events: none;
}
.rbccm-hero--strategy-and-economics .rbccm-hero__bg-video video,
.rbccm-hero--strategy-and-economics .rbccm-hero__bg-video iframe {
width: 100%;
height: 100%;
object-fit: cover;
/* Anchor the crop to the top-right so the "interesting" corner of
the frame stays in view when the container aspect-ratio changes
across breakpoints. */
object-position: top right;
border: 0;
display: block;
/* Figma doesn't ship a spec for the video opacity so we set it
here. Chosen to let the video read as a subtle motion backdrop
without competing with the H1 lede + insight card in the
foreground. Bump toward 1.0 for a more prominent video; drop
toward 0.1 for a barely-there ambient feel. */
opacity: 0.1;
}
/* Brightcove background (in-page player, see the skin and
rbccm-brightcove-bg-layer.css, which hides the player chrome and crops
the video to cover). The S&E cuts read too faint at the MP4's 0.1, so
the layer is 0.2 on mobile (behind the stacked title and card) and
0.4 from tablet up. The opacity sits on the layer, so the poster
fallback matches; the video inside goes back to 1 to undo the 0.1
from the shared video rule above. */
.rbccm-hero--strategy-and-economics .rbccm-brightcove-bg-layer {
opacity: 0.2;
}
@media (min-width: 768px) {
.rbccm-hero--strategy-and-economics .rbccm-brightcove-bg-layer {
opacity: 0.4;
}
}
.rbccm-hero--strategy-and-economics .rbccm-brightcove-bg-layer video {
opacity: 1;
}
/* Content column lifted above the video. Base container already
sits at z-index 1 (from the shared block's `> *` z-index safety
net), so this rule just makes the intent explicit. */
.rbccm-hero--strategy-and-economics .rbccm-hero__container {
position: relative;
z-index: 1;
}
/* Inner column: fills the outer flex, stacks its own child (the
1320-capped content column) centred. */
.rbccm-hero--strategy-and-economics .rbccm-hero__container {
max-width: none;
padding: 0;
display: flex;
flex-direction: column;
align-items: center;
flex: 1 0 0;
}
/* Content column - the actual copy + card stack. Fills 100% on
mobile (no cap until desktop authors a max-width). 51px gap
between the text block and the insight card. */
.rbccm-hero--strategy-and-economics .rbccm-hero__grid {
display: flex;
width: 100%;
flex-direction: column;
justify-content: center;
align-items: flex-start;
gap: 51px;
align-self: stretch;
}
/* Top block: H1 + paragraph, 24px gap between them. */
.rbccm-hero--strategy-and-economics .rbccm-hero__lede {
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
gap: 13px;
align-self: stretch;
}
/* H1 -- RBC Display 39px / 120% / weight 500, colour #003168.
Left-aligned, no bottom margin (gap on the parent handles rhythm). */
.rbccm-hero--strategy-and-economics .rbccm-hero__title {
color: var(--rbccm-hero-navy);
font-family: var(--rbccm-hero-serif);
font-size: 39px;
font-style: normal;
font-weight: 500;
line-height: 120%; /* 46.8px */
margin: 0;
}
/* Body copy -- Roboto 16/150%, #444, ligatures off per spec. */
.rbccm-hero--strategy-and-economics .rbccm-hero__body {
color: #444;
font-feature-settings: 'liga' off, 'clig' off;
font-family: var(--rbccm-hero-sans);
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: 150%; /* 24px */
align-self: stretch;
margin: 0;
}
/* -------- Insight card -------- */
/* Dark navy card. 30/20 padding, 10px radius, subtle grey border,
soft box shadow.
..............................................................
!important on padding + background is defensive: this is a
semantic element, and the RBCCM site-wide CSS
applies a bare `footer { ... }` rule at unified2.css:2970 --
assume similar bare `article { ... }` rules could land next
and paint over the card. Hardening now prevents a future
drive-by regression. */
.rbccm-hero--strategy-and-economics .rbccm-hero__insight-card {
display: flex;
padding: 30px 20px !important;
margin: 0 !important;
flex-direction: column;
align-items: flex-start;
align-self: stretch;
border-radius: 10px;
border: 1px solid #D7D7D7;
background: #051B38 !important;
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}
/* Pill row wrapper. 12px bottom padding pushes the H3 down. */
.rbccm-hero--strategy-and-economics .rbccm-hero__insight-eyebrow-row {
display: flex;
padding-bottom: 12px;
flex-direction: column;
align-items: flex-start;
align-self: stretch;
}
.rbccm-hero--strategy-and-economics .rbccm-hero__insight-eyebrow-inner {
display: flex;
padding-bottom: 10px;
justify-content: space-between;
align-items: center;
align-self: stretch;
}
/* Yellow pill with a 4x4 navy dot + tiny uppercase label. */
.rbccm-hero--strategy-and-economics .rbccm-hero__insight-eyebrow {
display: flex;
padding: 2px 8px;
align-items: center;
gap: 6px;
border-radius: 100px;
background: var(--rbccm-hero-yellow);
color: var(--rbccm-hero-navy);
font-family: var(--rbccm-hero-sans);
font-size: 9px;
font-style: normal;
font-weight: 600;
line-height: 13.5px; /* 150% */
letter-spacing: 0.8px;
text-transform: uppercase;
margin: 0;
}
.rbccm-hero--strategy-and-economics .rbccm-hero__insight-eyebrow::before {
content: "";
width: 4px;
height: 4px;
aspect-ratio: 1 / 1;
border-radius: 33554400px;
background: var(--rbccm-hero-navy);
}
/* Card H3 -- RBC Display 22 / 25.65 line-height, white. */
.rbccm-hero--strategy-and-economics .rbccm-hero__insight-title {
display: flex;
padding-bottom: 8px;
flex-direction: column;
align-items: flex-start;
align-self: stretch;
color: #FFF;
font-family: var(--rbccm-hero-serif);
font-size: 22px;
font-style: normal;
font-weight: 500;
line-height: 25.65px;
margin: 0;
}
/* Card body copy -- Roboto 12 / 18.6, warm light grey. */
.rbccm-hero--strategy-and-economics .rbccm-hero__insight-body {
display: flex;
padding-bottom: 20px;
flex-direction: column;
align-items: flex-start;
align-self: stretch;
color: #D7D7D7;
font-family: var(--rbccm-hero-sans);
font-size: 12px;
font-style: normal;
font-weight: 400;
line-height: 18.6px; /* 155% */
margin: 0;
}
/* Divider row: date left, read-more right. Top hairline in warm
light grey at 77% alpha.
..............................................................
!important on padding + background is defensive against RBCCM's
site-wide `footer { padding: 30px 0; background-color: #003168; }`
rule (unified2.css). Our footer here is a semantic