@import url('https://fonts.googleapis.com/css2?family=Barlow:wght@600;700&display=swap');
/* ============================================================================
isConnect — design tokens + global chrome (nav + footer).
Tokens mirror the Figma "ISV isConnect UI Design" variables.
========================================================================== */
:root {
/* Brand palette */
--maroon-1: #d0103a;
--teal-1: #006671;
--teal-2: #22a9b8;
--teal-3: #00c0cf;
--blue-1: #294053;
--blue-2: #365975;
--blue-doc: #0076DF; /* document file-type icon (Figma node 102:7099) */
/* Neutrals */
--white: #ffffff;
--black: #000000;
--grey: #888888;
--body-text: #666666;
--light-grey: #d3d9df;
--light-grey-warm: #f1f3f4;
--light-grey-cool: #ecf4f5;
/* Type scale (Quicksand) — Figma "Typography" (node 279:7373).
Canonical roles + responsive sizes live with the .t-* classes below.
See /isv-typography-skill before authoring block headings. */
--font-body: "Quicksand", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
/* Role sizes — desktop (≥1025px). Tablet/mobile overrides in media queries. */
--fs-h1-xl: 60px;
--fs-h1-lg: 50px;
--fs-h1: 40px;
--fs-h2: 24px;
--fs-h3: 20px;
--fs-h4: 18px;
--fs-h5: 16px;
--fs-body: 16px;
--fs-body-sm: 14px;
/* Role line-heights */
--lh-display: 1.2; /* h1-xl, h1-lg, h1 */
--lh-heading: 1.3; /* h2, h3 */
--lh-subhead: 1.4; /* h4, h5 */
--lh-body: 1.5; /* body, body-sm */
/* Role weights (Quicksand weights loaded in _Layout: 400/500/600/700) */
--fw-medium: 500;
--fw-semibold: 600;
--fw-bold: 700;
/* Spacing */
--sp-grid: 30px;
--sp-v-medium: 40px;
--sp-v-large: 50px;
--sp-h-large: 60px;
/* Layout */
--container: 1440px;
--container-pad: 55px;
/* Auto-hiding sticky nav height — SINGLE SOURCE OF TRUTH for header clearance.
--header-h → where jumped-to anchors land (scroll-margin-top).
--sticky-top → where a sticky rail pins while the nav is VISIBLE (below it).
--sticky-top-collapsed → where a sticky rail pins while the nav is HIDDEN (scrolled
down) — near the very top. site.js toggles .nav-hidden on
; rails transition between the two, so a rail rides up
to the top when the nav slides away and drops back to clear it
on scroll-up. Edit these once and every rail + anchor follows. */
--header-h: 90px;
--sticky-top: calc(var(--header-h) + var(--sp-grid));
--sticky-top-collapsed: 12px;
/* The LIVE pin offset every sticky rail reads (`top: var(--rail-top)`): --sticky-top while the
nav is visible, --sticky-top-collapsed once site.js adds .nav-hidden to on scroll-down.
This is the ONE switch — flipping it here moves the article topbar/contents rail, the hub rail,
the Side Navigation pane, and any future rail together, so they always stay aligned. */
--rail-top: var(--sticky-top);
/* Semantic */
--isv-bg: var(--white);
--isv-fg: var(--blue-1);
}
/* Nav hidden (scrolled down) → every rail rides up to the near-top in lockstep (transition on each). */
:root.nav-hidden {
--rail-top: var(--sticky-top-collapsed);
}
* {
box-sizing: border-box;
}
body {
margin: 0;
font-family: var(--font-body);
font-size: var(--fs-body);
font-weight: 500;
line-height: 1.5;
color: var(--isv-fg);
background: var(--isv-bg);
}
a {
color: inherit;
}
.container {
max-width: var(--container);
margin: 0 auto;
padding-inline: var(--container-pad);
}
/* ---- Typography ----------------------------------------------------------
Canonical type roles from Figma node 279:7373. Two ways to apply:
1. .t-* utility classes — put the visual ROLE on any element, regardless of
its HTML tag (e.g. a section title in an styled as h1-large):
News & Articles
2. Bare elements — h1–h5 / p get role defaults so rich-text
(XhtmlString via @Html.PropertyFor) renders on-scale with no classes.
Roles set family / weight / size / line-height only — colour is INHERITED so
blocks stay in control (Figma's spec sheet shows them black for demo only).
All sizes are responsive; tablet/mobile overrides live in the media queries
at the bottom of this file. Author headings via /isv-typography-skill. */
.t-h1-xl,
.t-h1-lg,
.t-h1,
.t-h2,
.t-h3,
.t-h4,
.t-h5 {
font-family: var(--font-body);
margin: 0;
}
.t-h1-xl { font-weight: var(--fw-bold); font-size: var(--fs-h1-xl); line-height: var(--lh-display); }
.t-h1-lg { font-weight: var(--fw-bold); font-size: var(--fs-h1-lg); line-height: var(--lh-display); }
.t-h1 { font-weight: var(--fw-bold); font-size: var(--fs-h1); line-height: var(--lh-display); }
.t-h2 { font-weight: var(--fw-bold); font-size: var(--fs-h2); line-height: var(--lh-heading); }
.t-h3 { font-weight: var(--fw-bold); font-size: var(--fs-h3); line-height: var(--lh-heading); }
.t-h4 { font-weight: var(--fw-bold); font-size: var(--fs-h4); line-height: var(--lh-subhead); }
.t-h5 { font-weight: var(--fw-semibold); font-size: var(--fs-h5); line-height: var(--lh-subhead); }
.t-body { font-family: var(--font-body); font-weight: var(--fw-medium); font-size: var(--fs-body); line-height: var(--lh-body); }
.t-body-sm { font-family: var(--font-body); font-weight: var(--fw-medium); font-size: var(--fs-body-sm); line-height: var(--lh-body); }
/* Bare-element defaults so rich text renders on-scale (tag → nearest role). */
h1 { font: var(--fw-bold) var(--fs-h1)/var(--lh-display) var(--font-body); margin: 0 0 .5em; }
h2 { font: var(--fw-bold) var(--fs-h2)/var(--lh-heading) var(--font-body); margin: 0 0 .5em; }
h3 { font: var(--fw-bold) var(--fs-h3)/var(--lh-heading) var(--font-body); margin: 0 0 .5em; }
h4 { font: var(--fw-bold) var(--fs-h4)/var(--lh-subhead) var(--font-body); margin: 0 0 .5em; }
h5 { font: var(--fw-semibold) var(--fs-h5)/var(--lh-subhead) var(--font-body); margin: 0 0 .5em; }
/* ---- Buttons -------------------------------------------------------------- */
.icon-btn {
/* Figma: white rounded square, NO border, teal-1 icon. */
display: inline-flex;
align-items: center;
justify-content: center;
width: 34px;
height: 34px;
border: 0;
border-radius: 6px;
background: var(--white);
color: var(--teal-1);
font-size: 16px;
cursor: pointer;
transition: background-color .15s ease;
}
.icon-btn:hover {
background: var(--light-grey-cool);
}
a.icon-btn {
text-decoration: none;
}
.icon-btn img {
width: 18px;
height: 18px;
object-fit: contain;
}
.btn {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 9px 16px;
border-radius: 6px;
font-size: var(--fs-body-sm);
font-weight: 600;
text-decoration: none;
cursor: pointer;
}
.btn--outline {
border: 1px solid var(--teal-1);
color: var(--teal-1);
background: var(--white);
}
.btn--outline:hover {
background: var(--teal-1);
color: var(--white);
}
/* ---- Brand mark ----------------------------------------------------------- */
.brand {
display: inline-flex;
align-items: center;
gap: 6px;
text-decoration: none;
}
.brand__mark {
display: inline-flex;
align-items: center;
justify-content: center;
width: 34px;
height: 30px;
background: var(--maroon-1);
color: var(--white);
border-radius: 3px;
font-weight: 700;
font-size: 15px;
letter-spacing: .5px;
clip-path: polygon(0 0, 100% 0, 100% 70%, 70% 100%, 0 100%);
}
.brand__logo {
height: 40px;
width: auto;
max-width: 220px;
object-fit: contain;
display: block;
}
.brand__name {
font-weight: 700;
font-size: 22px;
color: var(--blue-1);
}
/* ---- Hero band (HeroSection + HeroBlock) ---------------------------------- */
.hero-band {
/* The coloured band, contained to the 1330px frame (matching the nav/footer)
rather than bleeding edge to edge — the page background shows in the side
margins. background-color is set inline from the section's BackgroundColor. */
max-width: 1330px;
margin: 0 auto;
/* Dark band → white text by default, so colour-inheriting elements (e.g. the generic
Section Header) read correctly here; light sections leave text dark. */
color: var(--white);
}
.hero-band__inner {
/* Content frame. Figma node 102:2736: px 60 / py 40. */
padding: var(--sp-v-medium) var(--sp-h-large);
}
/* Lay out the section's composition (a row with a Hero column + an Updates column)
into the hero-left / cards-right design. The VB grid renders CLASS-LESS divs
(.hero-band__inner > grid > row > columns), so we target row/columns by depth and
tell them apart with :has(). The Hero column is a fixed 590 on the left; the Updates
column fills the rest and lays its cards out side by side (wrapping if there are
more than two). */
/* The row → columns side by side. */
.hero-band__inner > div > div {
display: flex;
flex-wrap: wrap;
align-items: stretch;
gap: var(--sp-grid);
}
/* Hero column → fixed left, content vertically centred against the cards. */
.hero-band__inner > div > div > div:has(.hero-block) {
flex: 0 0 590px;
max-width: 590px;
display: flex;
flex-direction: column;
justify-content: center;
}
/* Updates column → fills the right; its cards sit in a row. */
.hero-band__inner > div > div > div:has(.update-card) {
flex: 1 1 0;
min-width: 0;
display: flex;
flex-wrap: wrap;
align-content: flex-start;
gap: var(--sp-grid);
}
/* Each card (its class-less wrapper) → equal width, side by side. */
.hero-band__inner > div > div > div:has(.update-card) > div {
flex: 1 1 220px;
min-width: 0;
}
/* The header element (Heading + Text, Section Header variant) → full width, on its own line
above the cards. */
.hero-band__inner > div > div > div:has(.update-card) > div:has(.section-header) {
flex: 0 0 100%;
}
.updates-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--sp-grid);
}
.updates-header__eyebrow {
margin: 0;
font-size: 12px;
font-weight: var(--fw-bold);
letter-spacing: 1.2px;
text-transform: uppercase;
color: var(--white);
}
.updates-header__viewall {
display: inline-flex;
align-items: center;
gap: 10px;
flex: 0 0 auto;
color: var(--teal-3);
font-size: var(--fs-body-sm);
font-weight: var(--fw-semibold);
text-decoration: none;
}
.updates-header__viewall:hover {
color: var(--teal-2);
}
/* ---- Update card ---------------------------------------------------------- */
.update-card {
/* Fill the equal-height wrapper so the bottom-pinned date lines up across cards
even when one title wraps to more lines than another. */
height: 100%;
display: flex;
flex-direction: column;
gap: 15px;
}
.update-card__link {
/* Grow so the "Last updated" meta pins to the card bottom (Figma justify-between):
keeps every card's image top-aligned and date bottom-aligned regardless of how
many lines the title wraps to. */
flex: 1 1 auto;
display: flex;
flex-direction: column;
gap: 15px;
text-decoration: none;
color: inherit;
}
.update-card__media {
/* Fixed-ratio box: the image is absolutely positioned inside so its intrinsic
size can't feed back and override the ratio — every card's image is identical
regardless of the source photo's dimensions. */
position: relative;
display: block;
width: 100%;
aspect-ratio: 1445 / 850;
flex: none;
border-radius: 4px;
overflow: hidden;
/* Placeholder tint when no thumbnail is set. */
background: rgba(255, 255, 255, .1);
}
.update-card__media img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.update-card__title {
margin: 0;
color: var(--white);
}
.update-card__meta {
margin: 0;
/* Figma: white at 40%, 12px. */
font-size: 12px;
color: rgba(255, 255, 255, .4);
}
/* ---- Section Header (generic: heading + optional subtext + action link) ----
Colours INHERIT from the section context (white on the hero band, dark on light
sections). The header itself has no variant — only the cards do. */
.section-header {
display: flex;
flex-direction: column;
gap: 10px;
color: inherit;
}
.section-header__row {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--sp-grid);
}
.section-header__eyebrow {
margin: 0;
font-size: 12px;
font-weight: var(--fw-bold);
letter-spacing: 1.2px;
text-transform: uppercase;
color: inherit;
}
.section-header__action {
display: inline-flex;
align-items: center;
gap: 10px;
flex: 0 0 auto;
color: var(--teal-3);
font-size: var(--fs-body-sm);
font-weight: var(--fw-semibold);
text-decoration: none;
}
.section-header__action:hover { color: var(--teal-2); }
.section-header__subtext { color: inherit; }
.section-header__subtext:empty { display: none; } /* no space when empty (view mode) */
.section-header__subtext > :first-child { margin-top: 0; }
.section-header__subtext > :last-child { margin-bottom: 0; }
/* ============================================================================
Unified card system (.isv-card) — ONE markup + ONE set of styles for every
card "look". Used by:
• home Category Group cards (Views/Shared/_IsvCard.cshtml)
• the query-driven listing/article grid (ListingResultCardGrid/Default.cshtml)
A "look" is a CSS modifier — NOT a separate stylesheet — so it can be set in
two places that CASCADE (this is what makes a section-level style possible):
1. CONTAINER (group default): a wrapper look class restyles every inheriting
card inside it — a card with NO explicit look (no .isv-card--styled). Two
container hooks share the SAME look definitions below:
• .cat-group--{look} — home Category Group section (also drives its layout)
• .isv-cards--{look} — any card container; the Listing Result Card Grid stamps it on
its grid root per the element's Style-panel variant so the query-driven grid gets the
same looks (via ListingResultCardGridViewComponent).
2. CARD (override): .isv-card--styled.isv-card--{look} on a single
card wins (the container rule excludes .isv-card--styled), so you can
cherry-pick one card to differ while the rest follow the group.
Each look is expressed ONCE as a small block of CSS custom properties (below);
the structural rules read those vars, so changing a look in one place updates
it everywhere. Base defaults = the Category (icon panel) look, which is also
the safety net for a bare inherit card outside any styled container.
(Hero keeps its own .update-card view — white-on-dark, homepage hero band only.)
========================================================================== */
.isv-card {
/* Tunable look vars — defaults are the CATEGORY look. */
--card-link-gap: 10px;
--card-body-gap: 10px;
--card-bg: var(--light-grey-warm);
--card-pad: 25px;
--card-radius: 12px;
--card-fg: inherit;
--card-hover-shadow: 0 6px 18px rgba(41, 64, 83, .12);
--card-hover-transform: translateY(-2px);
--card-top-display: flex; /* icon row — category only */
--card-media-display: none;
--card-media-radius: 8px;
--card-media-bg: rgba(0, 0, 0, .06);
--card-meta-display: none;
--card-tags-display: inline-flex;
--card-date-display: inline; /* meta date — a look can hide it (Resources look) */
--card-bookmark-display: none; /* meta-row bookmark — the Resources look opts in */
--card-date-color: #a3a3a3;
--card-title-fs: var(--fs-h4);
--card-title-fw: var(--fw-bold);
--card-title-color: var(--black);
--card-title-hover-color: var(--card-title-color); /* per-look opt-in; default = no change */
--card-summary-color: var(--body-text);
display: flex;
flex-direction: column;
height: 100%; /* equal heights across a grid row */
background: var(--card-bg);
padding: var(--card-pad);
border-radius: var(--card-radius);
color: var(--card-fg);
transition: box-shadow .15s ease, transform .15s ease;
}
.isv-card:hover {
box-shadow: var(--card-hover-shadow);
transform: var(--card-hover-transform);
}
/* Title recolours on hover for looks that opt in via --card-title-hover-color
(Grid look = teal-2). Looks that don't set it keep their title colour. */
.isv-card:hover .isv-card__title {
color: var(--card-title-hover-color);
}
.isv-card__link {
display: flex;
flex-direction: column;
gap: var(--card-link-gap);
height: 100%;
text-decoration: none;
color: inherit;
}
/* Icon row (category look) */
.isv-card__top {
display: var(--card-top-display);
align-items: center;
justify-content: space-between;
}
.isv-card__icon {
font-size: 30px;
line-height: 1;
color: var(--maroon-1);
}
.isv-card__bookmark {
display: inline-flex;
align-items: center;
justify-content: center;
width: 34px;
height: 34px;
border: 1px solid #cce0e3;
border-radius: 6px;
background: var(--white);
color: var(--teal-1);
font-size: 16px;
}
/* Bookmark rendered inside the meta row (Resources look) — reuses the box look above but
its visibility is look-driven: hidden by default, the Resources look sets the var. This
overrides the base .isv-card__bookmark inline-flex used by the icon-row bookmark. */
.isv-card__bookmark--in-meta { display: var(--card-bookmark-display); }
/* Media (image looks) — fixed-ratio box, image absolutely placed so the source
photo's intrinsic size can't override the ratio. */
.isv-card__media {
display: var(--card-media-display);
position: relative;
width: 100%;
aspect-ratio: 1445 / 850;
overflow: hidden;
border-radius: var(--card-media-radius);
background: var(--card-media-bg);
}
.isv-card__media img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.isv-card__body {
display: flex;
flex-direction: column;
gap: var(--card-body-gap);
}
/* Tag pills (left) opposite the date (right). */
.isv-card__meta {
display: var(--card-meta-display);
align-items: center;
justify-content: space-between;
gap: 10px;
width: 100%;
}
.isv-card__tags {
display: var(--card-tags-display);
flex-wrap: wrap;
gap: 8px;
}
.isv-card__tag {
background: var(--white);
border: 1px solid #cce0e3;
border-radius: 100px;
padding: 6px 12px;
font-size: 12px;
font-weight: var(--fw-semibold);
line-height: normal;
color: var(--teal-2);
white-space: nowrap;
}
.isv-card__date {
display: var(--card-date-display, inline);
font-size: 12px;
font-weight: var(--fw-medium);
color: var(--card-date-color);
white-space: nowrap;
}
.isv-card__title {
margin: 0;
font-family: var(--font-body);
font-size: var(--card-title-fs);
font-weight: var(--card-title-fw);
line-height: var(--lh-subhead);
color: var(--card-title-color);
transition: color .15s ease;
}
.isv-card__summary {
color: var(--card-summary-color);
font-family: var(--font-body);
font-weight: var(--fw-medium);
font-size: var(--fs-body-sm);
line-height: var(--lh-body);
}
.isv-card__summary:empty { display: none; } /* no gap when description is blank */
.isv-card__summary > :first-child { margin-top: 0; }
.isv-card__summary > :last-child { margin-bottom: 0; }
/* ---- Looks (var overrides). Each look is written ONCE, applied at BOTH the
per-card level (.isv-card--X) and the group-cascade level
(.cat-group--X .isv-card:not(.isv-card--styled)). ----------------------- */
/* Category = base defaults; re-asserted so an explicit Category card inside a
non-category group still renders the panel look. */
.isv-card--category { /* uses base vars (category) */ }
/* Article card — borderless image + tag/date meta + title + clamped summary. */
.isv-card--article,
.cat-group--article .isv-card:not(.isv-card--styled),
.isv-cards--article .isv-card:not(.isv-card--styled) {
--card-link-gap: 15px;
--card-body-gap: 10px;
--card-bg: transparent;
--card-pad: 0;
--card-radius: 0;
--card-hover-shadow: none;
--card-hover-transform: none;
--card-top-display: none;
--card-media-display: block;
--card-media-radius: 0;
--card-media-bg: var(--light-grey-warm);
--card-meta-display: flex;
--card-title-fs: var(--fs-h5);
--card-title-fw: var(--fw-semibold);
--card-title-color: #000;
}
/* Grid — larger 3-up article card, rounded media, tag pills + date. */
.isv-card--grid,
.cat-group--grid .isv-card:not(.isv-card--styled),
.isv-cards--grid .isv-card:not(.isv-card--styled) {
--card-link-gap: 12px;
--card-body-gap: 12px;
--card-bg: transparent;
--card-pad: 0;
--card-radius: 0;
--card-fg: var(--blue-1);
--card-hover-shadow: none;
--card-hover-transform: none;
--card-top-display: none;
--card-media-display: block;
--card-media-radius: 8px;
--card-meta-display: flex;
--card-tags-display: inline-flex;
--card-date-color: rgba(0, 0, 0, .5);
--card-title-fs: var(--fs-h4);
--card-title-fw: var(--fw-bold);
--card-title-color: var(--blue-1);
--card-title-hover-color: var(--teal-2); /* Grid card title turns teal-2 on hover */
--card-summary-color: rgba(0, 0, 0, .7);
}
/* Text — no media, left teal accent (listing "All Resources"). */
.isv-card--text,
.cat-group--text .isv-card:not(.isv-card--styled),
.isv-cards--text .isv-card:not(.isv-card--styled) {
--card-link-gap: 15px;
--card-body-gap: 10px;
--card-bg: transparent;
--card-pad: 0;
--card-radius: 0;
--card-hover-shadow: none;
--card-hover-transform: none;
--card-top-display: none;
--card-media-display: none;
--card-meta-display: flex;
--card-title-fs: var(--fs-h5);
--card-title-fw: var(--fw-semibold);
--card-title-color: #000;
}
.isv-card--text,
.cat-group--text .isv-card:not(.isv-card--styled),
.isv-cards--text .isv-card:not(.isv-card--styled) {
border-left: 4px solid var(--teal-2);
padding-left: 18px;
}
/* Resources — filled PANEL (same panel as the Category look: base bg/pad/radius/hover) but
leading with the page's category tag pill + a bookmark instead of an icon, then the
title and a clamped summary. Wired to the Listing Result Card Grid "Resources cards" Style
variant, which stamps .isv-cards--resources on the grid so its bare cards inherit this look. */
.isv-card--resources,
.cat-group--resources .isv-card:not(.isv-card--styled),
.isv-cards--resources .isv-card:not(.isv-card--styled) {
--card-body-gap: 12px;
--card-top-display: none; /* no icon row */
--card-media-display: none; /* panel — no image */
--card-meta-display: flex; /* the tag pill row */
--card-bookmark-display: inline-flex; /* bookmark, opposite the tags */
--card-date-display: none; /* no date in this look */
--card-title-fs: var(--fs-h4);
--card-title-fw: var(--fw-bold);
--card-title-color: var(--blue-1);
--card-title-hover-color: var(--teal-2); /* title turns teal-2 on hover */
}
/* Clamp the summary teaser to 3 lines for the image/text article + resources looks. */
.isv-card--article .isv-card__summary,
.cat-group--article .isv-card:not(.isv-card--styled) .isv-card__summary,
.isv-cards--article .isv-card:not(.isv-card--styled) .isv-card__summary,
.cat-group--text .isv-card:not(.isv-card--styled) .isv-card__summary,
.isv-cards--text .isv-card:not(.isv-card--styled) .isv-card__summary,
.isv-card--text .isv-card__summary,
.cat-group--resources .isv-card:not(.isv-card--styled) .isv-card__summary,
.isv-cards--resources .isv-card:not(.isv-card--styled) .isv-card__summary,
.isv-card--resources .isv-card__summary {
display: -webkit-box;
-webkit-line-clamp: 3;
line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
.hero-block {
display: flex;
flex-direction: column;
gap: 10px;
color: var(--white);
}
.hero-block__heading {
margin: 0;
}
/* Strip the rich-text wrapper's default margins so the subtext sits tight under
the heading (gap is owned by .hero-block). */
.hero-block__body > :first-child {
margin-top: 0;
}
.hero-block__body > :last-child {
margin-bottom: 0;
}
/* ---- Heading + Text (generic element, default variant) -------------------- */
.heading-text {
display: flex;
flex-direction: column;
gap: 10px;
}
.heading-text__heading {
margin: 0;
}
/* Strip the rich-text wrapper's default outer margins so spacing is owned by .heading-text. */
.heading-text__body > :first-child {
margin-top: 0;
}
.heading-text__body > :last-child {
margin-bottom: 0;
}
/* ---- Generic Heading + Text element — self-contained framing --------------
The element is droppable into ANY section (the VB add-element picker can't be
scoped per section), so it can land in a FRAMELESS full-width section — e.g.
inside the Listing Section above the grid — where nothing constrains it and it
bled to the viewport edge. So the (dark-text) variants frame THEMSELVES to the
shared 1330 content box with the standard gutters + vertical breathing room,
matching how the listing element (.listing) self-frames. Where an ancestor
ALREADY owns the frame — the Header / Hero bands, or the narrow article column —
the self-frame is neutralised so widths/padding don't double up. The Hero
variant (.hero-block) is intentionally excluded: it's white-on-dark and only
reads inside its dark band. */
.heading-text,
.header-content,
.section-header,
.article-header {
max-width: 1330px;
margin-inline: auto;
padding: var(--sp-v-medium) var(--sp-h-large);
}
.header-section__body :is(.heading-text, .header-content, .section-header, .article-header),
.hero-band__inner :is(.heading-text, .header-content, .section-header, .article-header),
.article__main :is(.heading-text, .header-content, .section-header, .article-header) {
max-width: none;
margin-inline: 0;
padding: 0;
}
/* ---- Filled (primary) button ---------------------------------------------- */
.btn--primary {
background: var(--teal-1);
color: var(--white);
border: 1px solid var(--teal-1);
}
.btn--primary:hover {
background: var(--blue-1);
border-color: var(--blue-1);
color: var(--white);
}
/* ---- Header Section (HeaderSection + its elements) ------------------------
Figma node 212:6393: light-grey-cool banner, light-grey border, pt 30 / pb 40 /
px 60. Contained to the same 1330 frame as nav/footer. Breadcrumbs auto on top;
editable content (Header Content + CTA Buttons) are VB elements composed below. */
.header-section {
max-width: 1330px;
margin: 0 auto;
}
.header-section__inner {
display: flex;
flex-direction: column;
gap: 16px;
background: var(--light-grey-cool);
border: 1px solid var(--light-grey);
padding: 30px var(--sp-h-large) var(--sp-v-medium);
}
/* Article: flat header — no tinted band, no inner padding, so it sits on white and fills the
content column (the breadcrumb/heading align with the column edge, no empty box). */
.header-section--flat .header-section__inner {
background: transparent;
border: 0;
padding: 0;
}
/* Top row: breadcrumb (left) opposite the share action (right). */
.header-section__top {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
}
.header-section__share {
flex: 0 0 auto;
display: inline-flex;
align-items: center;
justify-content: center;
width: 34px;
height: 34px;
border: 1px solid #cce0e3;
border-radius: 6px;
background: var(--white);
color: var(--teal-1);
font-size: 16px;
cursor: pointer;
}
.header-section__share:hover {
background: var(--light-grey-cool);
}
/* The element content renders through the epi-grid composition (grid → row → column →
element wrappers, all class-less divs). Lay rows in a column, columns in a row, and
stack the elements within a column. */
.header-section__body > div { display: flex; flex-direction: column; gap: 16px; } /* grid → rows */
.header-section__body > div > div { display: flex; flex-wrap: wrap; gap: 16px; } /* row → columns */
.header-section__body > div > div > div { /* column → elements */
display: flex;
flex-direction: column;
gap: 12px;
align-items: flex-start;
flex: 1 1 auto;
min-width: 0;
}
/* CTA buttons sit in a wrapping row even when stacked in one column. */
.header-section__body div:has(> a.btn) { display: inline-flex; }
/* Header Content element (heading + description). */
.header-content {
display: flex;
flex-direction: column;
gap: 10px;
}
.header-content__heading {
margin: 0;
color: var(--blue-1);
}
.header-content__description { color: var(--black); }
.header-content__description > :first-child { margin-top: 0; }
.header-content__description > :last-child { margin-bottom: 0; }
/* ---- Breadcrumbs ----------------------------------------------------------
Figma "Button icon text" chips: white, #cce0e3 border, teal-1 text, rounded. */
.breadcrumbs__list {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px;
list-style: none;
margin: 0;
padding: 0;
}
.breadcrumbs__item {
display: inline-flex;
align-items: center;
gap: 8px;
}
/* Chevron separator between crumbs. */
.breadcrumbs__item + .breadcrumbs__item::before {
content: "\f054"; /* fa chevron-right */
font-family: "Font Awesome 6 Free";
font-weight: 900;
font-size: 10px;
color: var(--grey);
}
.breadcrumbs__crumb {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 6px 10px;
border: 1px solid #cce0e3;
border-radius: 6px;
background: var(--white);
color: var(--teal-1);
font-weight: var(--fw-semibold);
font-size: var(--fs-body-sm);
text-decoration: none;
}
a.breadcrumbs__crumb:hover {
background: var(--light-grey-cool);
}
.breadcrumbs__crumb--current {
background: transparent;
border-color: transparent;
padding-left: 0;
padding-right: 0;
color: var(--body-text);
}
/* ---- Search band (SearchSection + ResourcesBlock + RecentlyExploredBlock) --
Figma node 102:2754: light band, two equal columns split by a vertical divider,
px 60 / py 40, 40px gap. Contained to the same 1330 frame as nav/footer, with the
matching light-grey side/bottom border. Background colour is set inline from the
section's BackgroundColor. */
.search-band {
max-width: 1330px;
margin: 0 auto;
background: var(--light-grey-cool);
border-bottom: 1px solid var(--light-grey);
border-left: 1px solid var(--light-grey);
border-right: 1px solid var(--light-grey);
}
.search-band__inner {
padding: var(--sp-v-medium) var(--sp-h-large);
display: flex;
align-items: stretch;
gap: var(--sp-v-medium);
}
.search-band__col {
flex: 1 1 0;
min-width: 0;
display: flex;
flex-direction: column;
gap: 20px;
}
.search-band__divider {
flex: 0 0 1px;
align-self: stretch;
background: var(--light-grey);
}
/* Shared panel layout (both columns) ---------------------------------------- */
.search-panel {
display: flex;
flex-direction: column;
gap: 20px;
height: 100%;
}
.search-panel__head {
display: flex;
flex-direction: column;
gap: 10px;
}
.search-panel__topline {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: var(--sp-grid);
}
.search-panel__icon {
font-size: 32px;
line-height: 1;
color: var(--maroon-1);
}
.search-panel__title {
margin: 0;
color: var(--isv-fg);
}
.search-panel__desc {
margin: 0;
color: var(--body-text);
}
/* The white rounded "view all …" link button (Figma "Button icon text"). */
.pill-link {
display: inline-flex;
align-items: center;
gap: 10px;
flex: 0 0 auto;
background: var(--white);
color: var(--teal-1);
font-size: var(--fs-body-sm);
font-weight: var(--fw-semibold);
text-decoration: none;
padding: 6px 10px;
border-radius: 6px;
}
.pill-link:hover {
color: var(--teal-2);
}
/* Resources: search field + popular-search pills (static mock) -------------- */
.search-panel__search {
display: flex;
flex-direction: column;
gap: 12px;
}
.search-field {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
max-width: 565px;
background: var(--white);
/* Soft teal-tinted border from Figma (#cce0e3) — one-off, no palette token. */
border: 1px solid #cce0e3;
border-radius: 10px;
padding: 7px 7px 7px 15px;
}
.search-field__input {
flex: 1 1 auto;
min-width: 0;
border: 0;
background: transparent;
outline: none;
color: var(--isv-fg);
padding: 0;
}
.search-field__input::placeholder {
color: var(--grey);
}
.search-field__btn {
flex: 0 0 auto;
display: inline-flex;
align-items: center;
justify-content: center;
width: 34px;
height: 34px;
background: var(--white);
border: 1px solid #cce0e3;
border-radius: 6px;
color: var(--teal-1);
cursor: pointer;
}
.search-tags {
display: flex;
flex-wrap: wrap;
gap: 12px;
}
.search-tag {
display: inline-flex;
align-items: center;
gap: 10px;
background: var(--white);
color: var(--teal-1);
font-weight: var(--fw-semibold);
text-decoration: none;
padding: 6px 10px;
border-radius: 6px;
}
.search-tag:hover {
color: var(--teal-2);
}
/* Recently explored: item pills (static mock) ------------------------------- */
.explore-tags {
display: flex;
flex-wrap: wrap;
align-content: flex-start;
gap: 12px;
}
.explore-tag {
display: inline-flex;
align-items: center;
gap: 10px;
background: var(--white);
color: var(--isv-fg);
text-decoration: none;
padding: 10px 15px;
border-radius: 12px;
}
.explore-tag__icon {
flex: 0 0 auto;
width: 16px;
text-align: center;
color: var(--maroon-1);
}
/* ---- Top navigation ------------------------------------------------------- */
.site-header {
/* Figma: full-width light-grey-warm bar with a bottom border. The 55px side
gutters are this grey showing beside the centred, bordered content box. */
background: var(--light-grey-warm);
border-bottom: 1px solid var(--light-grey);
/* Auto-hiding sticky header (Amazon-style): sticks to the top, slides up when
scrolling down, slides back in when scrolling up — toggled by site.js. */
position: sticky;
top: 0;
z-index: 100;
transition: transform 0.25s ease;
}
.site-header--hidden {
transform: translateY(-100%);
}
.site-nav__inner {
/* The 1330px content box, centred (→ 55px gutters at 1440), framed left/right. */
max-width: 1330px;
margin: 0 auto;
padding: 24px;
border-left: 1px solid var(--light-grey);
border-right: 1px solid var(--light-grey);
display: flex;
align-items: center;
gap: 40px;
}
.site-nav__links {
display: flex;
align-items: center;
gap: 32px;
margin: 0;
padding: 0;
list-style: none;
}
.site-nav__links a {
text-decoration: none;
font-weight: 600;
color: var(--blue-1);
}
.site-nav__links a:hover {
color: var(--teal-1);
}
.site-nav__actions {
margin-left: auto;
display: flex;
align-items: center;
gap: 12px;
}
/* ---- Footer --------------------------------------------------------------- */
.site-footer {
background: var(--light-grey-warm);
color: var(--blue-1);
border-top: 1px solid var(--light-grey);
}
.site-footer__inner {
/* Mirror the header frame: a centred 1330px box with vertical side borders
that cross the footer's full-width border-top, giving the same
intersecting corner lines as the navbar (.site-nav__inner). */
max-width: 1330px;
margin: 0 auto;
padding: var(--sp-v-large) 24px;
border-left: 1px solid var(--light-grey);
border-right: 1px solid var(--light-grey);
display: grid;
grid-template-columns: 1.2fr 2fr 1.2fr;
gap: var(--sp-h-large);
}
.footer-logo {
display: flex;
align-items: center;
gap: 12px;
}
.footer-logo__mark {
display: inline-flex;
align-items: center;
justify-content: center;
width: 44px;
height: 40px;
background: var(--maroon-1);
color: var(--white);
border-radius: 3px;
font-weight: 700;
clip-path: polygon(0 0, 100% 0, 100% 70%, 70% 100%, 0 100%);
}
.footer-logo__name {
font-size: 15px;
line-height: 1.2;
}
.footer-logo__name strong {
color: var(--blue-1);
}
.footer-logo__name span {
color: var(--body-text);
}
.site-footer__social {
display: flex;
gap: 10px;
margin: 20px 0;
padding: 0;
list-style: none;
}
.site-footer__social a {
display: inline-flex;
align-items: center;
justify-content: center;
width: 34px;
height: 34px;
border-radius: 6px;
background: var(--white);
border: 1px solid var(--light-grey);
/* Figma: Blue 2 — same colour as the footer links/contact text. */
color: var(--blue-2);
text-decoration: none;
}
.site-footer__social a:hover {
color: var(--teal-1);
border-color: var(--teal-2);
}
.site-footer__heading {
font-size: var(--fs-body-sm);
font-weight: 700;
letter-spacing: 1px;
text-transform: uppercase;
color: var(--maroon-1);
margin: 0 0 18px;
}
.site-footer__links {
display: flex;
flex-wrap: wrap;
gap: 0 var(--sp-grid);
}
/* Each chunk of (up to) five links is one equal-width column. */
.site-footer__links > .footer-links {
flex: 1 1 0;
min-width: 150px;
}
.footer-links {
margin: 0;
padding: 0;
list-style: none;
}
.footer-links li {
/* Figma: 12px gap between links (node 87:1364). */
margin-bottom: 12px;
line-height: 1.4;
}
.footer-links li:last-child {
margin-bottom: 0;
}
.footer-links a {
text-decoration: none;
/* Figma: Blue 2, Quicksand 14 / 600 / 140% (node 87:1364) */
color: var(--blue-2);
font-size: var(--fs-body-sm);
font-weight: var(--fw-semibold);
}
.footer-links a:hover {
color: var(--teal-1);
}
.site-footer__contact {
margin: 0;
padding: 0;
list-style: none;
}
.site-footer__contact li {
display: flex;
gap: 12px;
margin-bottom: 14px;
font-size: var(--fs-body-sm);
line-height: 1.5;
}
.site-footer__contact i {
color: var(--maroon-1);
margin-top: 3px;
}
.site-footer__contact a {
text-decoration: none;
color: var(--blue-1);
}
.site-footer__contact a:hover {
color: var(--teal-1);
}
/* Footer media (uploaded logo / social images) */
.footer-logo img {
height: 48px;
width: auto;
max-width: 240px;
object-fit: contain;
display: block;
}
.site-footer__social a img {
width: 18px;
height: 18px;
object-fit: contain;
}
/* ---- Contact Us block (footer + reusable) --------------------------------- */
.contact-us__heading {
font-size: var(--fs-body-sm);
font-weight: 700;
letter-spacing: 1px;
text-transform: uppercase;
color: var(--maroon-1);
margin: 0 0 18px;
}
.contact-us__items {
margin: 0;
padding: 0;
list-style: none;
}
.contact-us__item {
display: flex;
align-items: flex-start;
gap: 10px;
margin-bottom: 8px;
/* Figma: Blue 2, Quicksand 14 / 600 / 140% (node 87:1364) */
color: var(--blue-2);
font-size: var(--fs-body-sm);
font-weight: var(--fw-semibold);
line-height: 1.4;
}
.contact-us__icon {
flex: 0 0 auto;
color: var(--blue-2);
/* nudge so the glyph centres on the first line of text */
margin-top: 1px;
}
.contact-us__icon img {
width: 16px;
height: 16px;
object-fit: contain;
}
/* XhtmlString renders the text inside
; strip its default margins so the
text aligns with the icon and items don't gain extra vertical space. */
.contact-us__text > :first-child {
margin-top: 0;
}
.contact-us__text > :last-child {
margin-bottom: 0;
}
.contact-us__text a {
text-decoration: none;
color: var(--blue-2);
}
.contact-us__text a:hover {
color: var(--teal-1);
}
/* ---- Category groups (CategoryGroupSection + CategoryCardBlock) ----------
Figma node 102:2807: each titled group is its OWN full-width section (white, 1330
frame) with a heading + description and a 3-up card grid. A single page-level rail
(.contents-rail--fixed) is fixed to the right of the frame and aggregates every group. */
.cat-group {
max-width: 1330px;
margin: 0 auto;
background: var(--white);
border-left: 1px solid var(--light-grey); /* frame the region (matches nav/footer/search) */
border-right: 1px solid var(--light-grey);
scroll-margin-top: var(--header-h); /* clears the sticky header when jumped to via anchor */
}
/* The first group sits flush under the Search band (its border-bottom is the divider) —
no top border, no gap. The last group closes the frame bottom. */
.cat-group--last {
border-bottom: 1px solid var(--light-grey);
}
/* Separator between groups — a content-width line above the heading (Figma node 102:2820:
border-top + 30px). Drawn on the head so it insets to the card column, not the frame edge. */
.cat-group--sep .cat-group__head {
border-top: 1px solid var(--light-grey);
padding-top: var(--sp-grid);
}
/* Separated groups start flush at the band top, so the separator sits ~30px below the
previous group's cards (the previous group's 30px bottom padding) instead of ~80px. */
.cat-group--sep .cat-group__inner {
padding-top: 0;
}
.cat-group__inner {
/* top 40 (gap below the Search band) · right = rail gutter · bottom 30 · left 60.
--cat-rail-gutter reserves 300px for the fixed contents rail. It collapses to the normal
side pad when the rail isn't actually shown (see the reclaim rule below) so the cards fill
the frame instead of leaving a dead column on the right. */
--cat-rail-gutter: 300px;
padding: var(--sp-v-medium) var(--cat-rail-gutter) var(--sp-grid) var(--sp-h-large);
}
/* Reclaim the rail gutter whenever the fixed contents rail isn't actually on screen — either the
page turned it Off (no .contents-rail--fixed in the DOM) or it has no opted-in sections (site.js
never adds .contents-rail--on). Content then flexes to fill the space the rail would have taken.
Full-width looks (--article/--grid) and article-embedded groups set padding-right / padding-inline
directly (higher specificity than the shorthand), so they're unaffected in either state. */
body:not(:has(.contents-rail--fixed.contents-rail--on)) .cat-group__inner {
--cat-rail-gutter: var(--sp-h-large);
}
/* Image-card group looks (Article / Grid) are full-width feature strips — they don't sit
beside the contents rail, so reclaim its 300px right gutter. Effect: the 3-up cards use
the full content width (bigger, matching the listing grid) AND the group heading +
separator line span the full width (a top divider, not a short line inset on the left).
Category groups keep the gutter for the rail. If a full-width group shares a page with
the rail, turn OFF its "Show in contents rail" so the rail doesn't overlap the cards. */
.cat-group--article .cat-group__inner,
.cat-group--grid .cat-group__inner {
padding-right: var(--sp-h-large);
}
/* Inside an article body the content column (.article__main) already insets by 60px and supplies
its OWN right rail (.article__aside) — so a category group here needs neither the 300px homepage
contents-rail gutter nor its own side padding, or the cards get crushed into a sliver of the
already-narrow column (worse still when a side-nav pane is also present). Zero the side padding
for EVERY look so the cards fill the content column, aligned to the rich-text edge. (Homepage
groups keep the gutter for their fixed contents rail — they have no .article__main ancestor.) */
.article__main .cat-group__inner {
padding-inline: 0;
}
/* ...and they're standalone strips (e.g. inside an article body), NOT part of the homepage's
framed "explore by category" column — so drop the side frame borders and use a separator line
ON TOP (above the heading) instead of vertical lines down the sides. */
.cat-group--article,
.cat-group--grid {
border-left: 0;
border-right: 0;
}
.cat-group--article .cat-group__head,
.cat-group--grid .cat-group__head {
border-top: 1px solid var(--light-grey);
padding-top: var(--sp-grid);
}
.cat-group__head {
display: flex;
flex-direction: column;
gap: 10px;
margin-bottom: var(--sp-grid);
}
.cat-group__title {
margin: 0;
color: var(--blue-1);
}
.cat-group__desc {
margin: 0;
color: var(--body-text);
}
/* The VB grid renders CLASS-LESS divs (.cat-group__grid > grid > row > column >
[card wrappers]). Make the column a 3-up grid; cards fill the cells and stay
individually selectable. */
.cat-group__grid > div > div > div {
display: grid;
grid-template-columns: repeat(var(--cards, 3), 1fr);
grid-auto-rows: 1fr; /* every row equal height → uniform cards (Figma: all 217px) */
gap: var(--sp-grid);
align-items: stretch; /* each card fills its cell (card has height:100%) */
}
/* Cards per row (editor "size" control): --cards is set on the grid wrapper and inherited by the
class-less VB column above. Fewer columns = larger cards. The view always emits data-cols (default
3), so existing content keeps the 3-up look. 3 uses the base default; the others override. */
.cat-group__grid[data-cols="1"] { --cards: 1; }
.cat-group__grid[data-cols="2"] { --cards: 2; }
.cat-group__grid[data-cols="4"] { --cards: 4; }
/* Category Group cards now use the unified .isv-card system (see top of file).
The group's per-look default is set on the .cat-group--{look} wrapper. */
/* Rich-text (XhtmlString) descriptions render their own
/list markup — strip the
first/last child margins so the copy sits flush inside its styled container. */
.search-panel__desc > :first-child,
.cat-group__desc > :first-child {
margin-top: 0;
}
.search-panel__desc > :last-child,
.cat-group__desc > :last-child {
margin-bottom: 0;
}
/* Page-level contents rail: the fixed-right variant of the unified rail now lives with the shared
.contents-rail rules (search ".contents-rail--fixed"). The link vocabulary (.contents-rail__top /
__list / __link) is shared by both variants — the former .cat-rail* rules were folded into it. */
/* ---- Responsive ----------------------------------------------------------- */
@media (max-width: 1024px) {
/* Tablet type scale (Figma "Tablet" column). */
:root {
--fs-h1-xl: 40px;
--fs-h1-lg: 40px;
--fs-h1: 30px;
--fs-h4: 16px;
}
.site-footer__inner {
grid-template-columns: 1fr;
gap: var(--sp-v-medium);
}
/* Hero band stacks: intro above the updates region. */
.hero-band__inner {
flex-direction: column;
align-items: stretch;
}
.hero-band__intro {
flex: 1 1 auto;
max-width: none;
}
/* Search band stacks: Resources above Recently explored; drop the vertical rule. */
.search-band__inner {
flex-direction: column;
align-items: stretch;
gap: var(--sp-v-medium);
}
.search-band__divider {
display: none;
}
/* Category groups: hide the fixed rail, reclaim its gutter, go 2-up. */
.contents-rail--fixed,
.contents-rail--fixed.contents-rail--on {
display: none;
}
.cat-group__inner {
padding-right: var(--sp-h-large);
}
/* Tablet: cap dense grids at 2-up (1 and 2 keep their setting). */
.cat-group__grid[data-cols="3"] { --cards: 2; }
.cat-group__grid[data-cols="4"] { --cards: 2; }
}
@media (max-width: 720px) {
/* Mobile type scale (Figma "Mobile" column). */
:root {
--fs-h1-xl: 30px;
--fs-h1-lg: 30px;
--fs-h1: 28px;
--fs-h2: 22px;
--fs-h3: 18px;
--fs-body: 14px;
}
.site-nav__links {
display: none;
}
.site-nav__inner,
.site-footer__inner {
padding-inline: 20px;
}
.site-footer__links {
flex-direction: column;
}
/* Hero band stacks on mobile: hero above the updates, each card full width. */
.hero-band__inner > div > div {
flex-direction: column;
}
.hero-band__inner > div > div > div:has(.hero-block) {
flex: 1 1 auto;
max-width: none;
}
.hero-band__inner > div > div > div:has(.update-card) > div {
flex: 1 1 100%;
}
/* Category cards go single-column on mobile (any density). */
.cat-group__grid[data-cols] { --cards: 1; }
}
/* ============================================================================
Listing experience — page header + query-driven grid (filter rail, cards,
pagination). Used by "News & Articles", "All Resources" and any future listing.
========================================================================== */
/* (The listing page header is now a reusable HeaderSectionBlock — see .header-section.) */
/* No vertical padding: the listing frame sits flush under the header band (its bottom
border is the divider) and flush above the footer, so the side borders run as one
continuous frame — header → content → footer (per Figma). */
.listing-section {
padding-block: 0;
}
/* The 1330px content box, centred (→ 55px gutters at 1440), framed left/right — matches
.site-nav__inner / .site-footer__inner. No bottom border: the footer's full-width
border-top closes the frame, giving the same intersecting corner lines as nav→footer. */
.listing {
max-width: 1330px;
margin: 0 auto;
border-left: 1px solid var(--light-grey);
border-right: 1px solid var(--light-grey);
}
/* Two columns, no gap: the sidebar's left padding and the main column's padding give the
inset; the filter rail sits flush against the frame's left border (per Figma 102:4969). */
.listing__body {
display: grid;
grid-template-columns: 250px 1fr;
align-items: start;
}
/* Filter rail hidden (ShowFilterRail off) — content spans the full width. */
.listing__body--no-rail {
grid-template-columns: 1fr;
}
/* Content column: toolbar → grid → pager. */
.listing__main {
padding: 30px;
min-width: 0;
}
/* Toolbar: "Showing N" left, sort control right. No separator line (Figma 102:6228). */
.listing__bar {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--sp-grid);
margin-bottom: var(--sp-grid);
}
.listing__count {
color: var(--black);
}
/* ---- Sort control (Figma 102:6221: white pill, teal text, chevron) -------- */
.listing-sort {
display: inline-flex;
align-items: center;
gap: 10px;
flex: 0 0 auto;
}
/* Visually-hidden but screen-reader-accessible (used for the sort control's label). */
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
.listing-sort__control {
position: relative;
display: inline-flex;
align-items: center;
}
.listing-sort__select {
appearance: none;
-webkit-appearance: none;
background: var(--white);
border: 1px solid #cce0e3;
border-radius: 6px;
padding: 6px 34px 7px 12px;
color: var(--teal-1);
font-family: var(--font-body);
font-size: 14px;
font-weight: var(--fw-semibold);
line-height: 1.5;
cursor: pointer;
}
.listing-sort__select:focus-visible {
outline: 2px solid var(--teal-2);
outline-offset: 1px;
}
.listing-sort__chevron {
position: absolute;
right: 12px;
font-size: 12px;
color: var(--teal-1);
pointer-events: none;
}
/* ---- Toolbar controls cluster (keyword search + sort) --------------------
Groups the toolbar controls so the whole cluster can be repositioned later
as one unit (the planned "filters position" style). Static/right-aligned now. */
.listing__tools {
display: flex;
align-items: center;
justify-content: flex-end;
flex-wrap: wrap;
gap: 12px;
flex: 0 1 auto;
}
/* ---- Keyword search (white pill + magnifier, matches the sort control) ---- */
.listing-search {
display: inline-flex;
align-items: center;
background: var(--white);
border: 1px solid #cce0e3;
border-radius: 6px;
padding: 0 4px 0 12px;
flex: 0 1 auto;
min-width: 0;
}
.listing-search:focus-within {
outline: 2px solid var(--teal-2);
outline-offset: 1px;
}
.listing-search__input {
appearance: none;
-webkit-appearance: none;
border: 0;
background: transparent;
padding: 7px 0;
width: 210px;
max-width: 100%;
min-width: 0;
color: var(--black);
font-family: var(--font-body);
font-size: 14px;
line-height: 1.5;
}
.listing-search__input::placeholder {
color: #7a8a8c;
opacity: 1;
}
.listing-search__input:focus-visible {
outline: none;
}
.listing-search__submit {
display: inline-flex;
align-items: center;
justify-content: center;
border: 0;
background: transparent;
padding: 6px 8px;
color: var(--teal-1);
font-size: 14px;
cursor: pointer;
}
.listing-search__submit:focus-visible {
outline: 2px solid var(--teal-2);
outline-offset: 1px;
border-radius: 4px;
}
/* ---- Filter rail (container styling; faceted accordion comes later) ------- */
.listing-filters {
padding: 30px 0 30px 20px;
position: sticky;
top: var(--sticky-top); /* clears the auto-hiding header (see :root --sticky-top) */
}
/* "FILTERS" eyebrow — mirrors .contents-rail__top (Barlow, uppercase, teal). */
.listing-filters__eyebrow {
display: inline-flex;
align-items: center;
gap: 8px;
margin: 0 0 15px;
font-family: "Barlow", var(--font-body);
font-size: 12px;
font-weight: 700;
line-height: 1.5;
letter-spacing: 1.2px;
text-transform: uppercase;
color: var(--teal-1);
}
/* Accordion groups — native ; header = parent category, options = its children. */
.listing-filters__group {
border-bottom: 1px solid var(--light-grey);
padding-bottom: 9px;
margin-bottom: 5px;
}
.listing-filters__summary {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
padding: 9px 0;
cursor: pointer;
list-style: none;
font-family: var(--font-body);
font-size: 14px;
font-weight: var(--fw-bold);
line-height: 1.3;
color: #000;
}
/* Hide the native disclosure triangle (we use our own chevron). */
.listing-filters__summary::-webkit-details-marker { display: none; }
.listing-filters__summary::marker { content: ""; }
.listing-filters__chevron {
font-size: 12px;
color: var(--grey);
transition: transform .15s ease;
}
.listing-filters__group[open] > .listing-filters__summary .listing-filters__chevron,
.listing-filters__subgroup[open] > .listing-filters__summary .listing-filters__chevron {
transform: rotate(180deg);
}
/* Date-range facet (lives inside an accordion group). */
.listing-filters__date {
display: flex;
flex-direction: column;
gap: 10px;
padding: 4px 0 2px;
}
.listing-filters__date-field {
display: flex;
flex-direction: column;
gap: 4px;
font-family: var(--font-body);
font-size: 12px;
font-weight: var(--fw-semibold);
color: var(--teal-1);
}
.listing-filters__date-field input[type="date"] {
appearance: none;
-webkit-appearance: none;
background: var(--white);
border: 1px solid #cce0e3;
border-radius: 6px;
padding: 7px 10px;
color: var(--body-text);
font-family: var(--font-body);
font-size: 14px;
font-weight: var(--fw-medium);
line-height: 1.4;
}
.listing-filters__date-field input[type="date"]:focus-visible {
outline: 2px solid var(--teal-2);
outline-offset: 1px;
}
.listing-filters__date-actions {
display: flex;
align-items: center;
gap: 14px;
margin-top: 2px;
}
.listing-filters__apply {
border: 0;
cursor: pointer;
background: var(--teal-1);
color: var(--white);
font-family: var(--font-body);
font-size: 14px;
font-weight: var(--fw-semibold);
line-height: 1.3;
padding: 8px 18px;
border-radius: 6px;
transition: background-color .15s ease;
}
.listing-filters__apply:hover {
background: var(--teal-2);
}
.listing-filters__clear {
font-family: var(--font-body);
font-size: 14px;
font-weight: var(--fw-medium);
color: var(--body-text);
text-decoration: underline;
}
.listing-filters__clear:hover {
color: var(--teal-1);
}
.listing-filters__list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 8px;
}
.listing-filters__link {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
padding: 6px 10px;
border-radius: 6px;
text-decoration: none;
color: var(--body-text);
font-family: var(--font-body);
font-size: 14px;
font-weight: var(--fw-medium);
line-height: 1.3;
transition: background-color .15s ease, color .15s ease;
}
.listing-filters__link:hover {
background: var(--light-grey-cool);
color: var(--teal-1);
}
.listing-filters__link.is-active {
background: rgba(0, 192, 207, .1); /* pale Teal 2, per Figma active item */
color: var(--teal-1);
}
.listing-filters__count {
font-size: 12px;
opacity: .8;
}
/* A top-level category with no configured children: a single filter, rendered like a group row. */
.listing-filters__group--leaf {
padding: 3px 0 9px;
}
/* Non-clickable node (a structural ancestor the editor didn't enable) — reads as a plain label. */
.listing-filters__link--static {
color: var(--body-text);
cursor: default;
}
.listing-filters__link--static:hover {
background: none;
color: var(--body-text);
}
/* The clickable LABEL of a parent node (lives in the accordion summary, beside the chevron). It
filters (matches the node's whole enabled subtree); the chevron toggles the accordion. */
.listing-filters__branch-link {
text-decoration: none;
color: inherit;
transition: color .15s ease;
}
.listing-filters__branch-link:hover {
color: var(--teal-1);
}
.listing-filters__branch-link.is-active {
color: var(--teal-1);
}
/* Nested accordion (a subcategory that itself has configured children). No divider — the parent
group's border already frames it; the indented list gives the tree its shape. */
.listing-filters__subgroup {
border: 0;
}
/* Subcategory summaries read like a regular option link — same weight AND colour as the
option links; only the top-level parent header keeps the bold/heavier black. */
.listing-filters__summary--nested {
padding: 6px 10px;
font-size: 14px;
font-weight: var(--fw-medium);
color: var(--body-text);
border-radius: 6px;
}
.listing-filters__summary--nested:hover {
background: var(--light-grey-cool);
}
/* Indent each nested level and drop a subtle guide line so the hierarchy reads at a glance. */
.listing-filters__list--nested {
margin: 2px 0 2px 12px;
padding-left: 10px;
border-left: 1px solid var(--light-grey);
}
/* ---- Card grid ------------------------------------------------------------ */
.listing-grid {
display: grid;
grid-template-columns: repeat(var(--cards, 3), 1fr);
gap: var(--sp-grid);
}
/* Cards per row (editor "size" control). The view always emits data-cols (default 3); 3 uses the
base default, the others override. Fewer columns = larger cards. Ignored by the Grouped (hub) look
(a different grid). */
.listing-grid[data-cols="1"] { --cards: 1; }
.listing-grid[data-cols="2"] { --cards: 2; }
.listing-grid[data-cols="4"] { --cards: 4; }
.listing-grid__empty {
grid-column: 1 / -1;
color: var(--body-text);
}
/* Listing cards now use the unified .isv-card system (see top of file):
image style → .isv-card--article, text style → .isv-card--text.
Opt these cards into the hover title recolour (teal-2) without touching the
shared --article / --text looks used by homepage category groups — scoped to
the listing grid container. Uses the base .isv-card:hover .isv-card__title rule. */
.listing-grid .isv-card {
--card-title-hover-color: var(--teal-2);
}
/* ---- Pagination ----------------------------------------------------------- */
.listing-pager {
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
margin-top: var(--sp-v-large);
}
.listing-pager__page,
.listing-pager__step {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 36px;
height: 36px;
padding: 0 10px;
border-radius: 6px;
text-decoration: none;
color: var(--body-text);
font-weight: var(--fw-semibold);
transition: background-color .15s ease, color .15s ease;
}
.listing-pager__page:hover,
.listing-pager__step:hover {
background: var(--light-grey-cool);
color: var(--teal-1);
}
.listing-pager__page.is-active {
background: var(--teal-1);
color: var(--white);
}
/* ---- Responsive ----------------------------------------------------------- */
@media (max-width: 1024px) {
.listing__body {
grid-template-columns: 1fr;
}
.listing-filters {
position: static;
padding: 30px 30px 0;
}
/* Tablet: cap dense grids at 2-up (1 and 2 keep their setting). */
.listing-grid[data-cols="3"] { --cards: 2; }
.listing-grid[data-cols="4"] { --cards: 2; }
}
@media (max-width: 640px) {
/* Mobile: single column at any density. */
.listing-grid[data-cols] { --cards: 1; }
}
/* ============================================================================
Article experience — main content column (VB canvas) + sticky right rail
(auto "on this page" anchors + key contacts). Figma node 224:7192.
========================================================================== */
.article__frame {
max-width: 1330px;
margin: 0 auto;
display: flex;
align-items: flex-start;
}
.article__main {
flex: 1 1 auto;
min-width: 0;
border-left: 1px solid var(--light-grey);
padding: var(--sp-grid) var(--sp-h-large) var(--sp-v-large);
display: flex;
flex-direction: column;
gap: var(--sp-v-medium);
}
/* Sticky back-nav bar (breadcrumb + share) — pins at the SAME offset as the right rail
(--sticky-top) so the two align and follow the article scroll. White background masks the
article content scrolling beneath it. */
.article__topbar {
position: sticky;
top: var(--rail-top);
z-index: 5;
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
transition: top 0.25s ease; /* slide with the nav (matches .site-header) */
/* Transparent bar: only the breadcrumb pill + share button carry their own (white)
backgrounds, so article content scrolls UNDER them like a floating navbar — no
full-width white blockade across the row. */
}
/* Right column — a real sticky panel (not the homepage's fixed overlay rail). */
.article__aside {
flex: 0 0 250px;
align-self: stretch;
border-right: 1px solid var(--light-grey);
padding: var(--sp-grid) 20px var(--sp-grid) 0;
}
.article__aside-inner {
position: sticky;
top: var(--rail-top); /* follows the auto-hiding nav via :root --rail-top */
display: flex;
flex-direction: column;
gap: 20px;
transition: top 0.25s ease; /* slide with the nav (matches .site-header) */
}
/* Contents rail (shared _ContentsRail partial). Base = the sticky-column variant (article aside;
positioning comes from .article__aside-inner). The --fixed modifier is the global fixed-right
variant (formerly .cat-rail). Link vocabulary (.contents-rail__*) below is shared by both. */
.contents-rail {
display: flex;
flex-direction: column;
gap: 15px;
}
/* Fixed-right variant (global rail via ContentsRailViewComponent → _Layout). Hidden until the engine
adds .contents-rail--on (i.e. the page has rail entries), so it never floats over the hero/footer.
Placed after the base rule so its display:none wins for the initial hidden state. */
.contents-rail--fixed {
display: none;
position: fixed;
top: var(--sticky-top); /* resting offset; JS overrides on scroll but pins to the same value */
right: calc(max(0px, (100vw - 1330px) / 2) + var(--sp-h-large));
width: 210px;
max-height: calc(100vh - var(--sticky-top) - var(--sp-v-medium));
overflow-y: auto;
padding-left: var(--sp-grid);
border-left: 1px solid var(--light-grey);
z-index: 5;
}
.contents-rail--fixed.contents-rail--on {
display: flex;
}
.contents-rail__top {
display: inline-flex;
align-items: center;
gap: 8px;
text-decoration: none;
color: var(--teal-2);
font-family: "Barlow", var(--font-body);
font-size: 12px;
font-weight: 700;
line-height: 1.5;
letter-spacing: 1.2px;
text-transform: uppercase;
}
.contents-rail__list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 12px;
}
.contents-rail__link {
position: relative;
display: block;
padding-left: 16px;
text-decoration: none;
color: var(--body-text);
font-size: var(--fs-body-sm);
line-height: 1.3;
}
.contents-rail__link:hover {
color: var(--teal-1);
}
.contents-rail__link.is-active {
color: var(--blue-1);
font-weight: var(--fw-bold);
}
.contents-rail__link.is-active::before {
content: "\203A";
position: absolute;
left: 0;
font-weight: var(--fw-bold);
}
/* Nested in-body anchor entries (under a rail-tagged section). Flat anchors from
untagged sections reuse the top-level .contents-rail__link styling. */
.contents-rail__sublist {
list-style: none;
margin: 12px 0 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 8px;
}
.contents-rail__sublink {
padding-left: 28px;
font-size: calc(var(--fs-body-sm) - 1px);
}
.contents-rail__sublink.is-active::before {
left: 12px;
}
/* Article header (HeadingTextBlock "Article" variant) ---------------------- */
.article-header {
display: flex;
flex-direction: column;
gap: 16px;
}
.article-header__heading {
margin: 0;
color: var(--black);
}
.article-header__intro {
color: var(--body-text);
}
.article-meta {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 12px;
}
.article-meta__tags {
display: inline-flex;
flex-wrap: wrap;
gap: 8px;
}
.article-meta__tag {
background: var(--white);
border: 1px solid #cce0e3;
border-radius: 100px;
padding: 6px 12px;
font-size: 12px;
font-weight: var(--fw-semibold);
line-height: normal;
color: var(--teal-2);
white-space: nowrap;
}
.article-meta__date {
font-size: 12px;
font-weight: var(--fw-medium);
color: var(--grey);
white-space: nowrap;
}
/* Content sections (ContentSection) --------------------------------------- */
.content-section {
padding-block: 16px;
scroll-margin-top: var(--header-h); /* clear the sticky bar when jumped to via anchor */
}
/* In-body bookmark anchors (editor-inserted / with no href) are the
contents-rail's other jump targets. Mirror the JS selector in site.js (initContentsRail) so
they land below the auto-hiding header — same --header-h source as section targets,
and this also covers native hash navigation (reload / shared links), which the rail's
JS click handler doesn't. Centralized: one rule, every page that uses the rail follows. */
a[id]:not([href]),
a[name]:not([href]) {
scroll-margin-top: var(--header-h);
}
.content-section__inner {
display: flex;
flex-direction: column;
gap: 14px;
}
.content-section__title {
margin: 0;
color: var(--black);
}
/* Callout — the tinted "Overview" panel (heading + body inside the box). */
.content-section--callout .content-section__inner {
background: var(--light-grey-cool);
border-radius: 12px;
padding: 25px;
gap: 10px;
}
.content-section--callout .content-section__title {
color: var(--teal-1);
}
/* Card grid — "Relevant Learning & Events": a separated 3-up grid of cards. */
.content-section--cards {
border-top: 1px solid var(--light-grey);
margin-top: var(--sp-grid);
padding-top: var(--sp-v-medium);
}
.content-section--cards .content-section__body > div > div > div {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-auto-rows: 1fr;
gap: var(--sp-grid);
align-items: stretch;
}
/* Rich text — strip first/last child margins so copy sits flush in its box. */
.rich-text > :first-child {
margin-top: 0;
}
.rich-text > :last-child {
margin-bottom: 0;
}
/* Blockquote — Figma node 121:2813: 3px maroon left bar + 24px inset, body-text colour.
Mirrored in editor.css so the TinyMCE surface matches the published look. */
.rich-text blockquote {
margin: 0 0 1em;
padding-inline-start: 24px;
border-inline-start: 3px solid var(--maroon-1);
}
/* Media block (figures) --------------------------------------------------- */
.media-block {
margin: 0;
}
.media-block__img {
display: block;
width: 100%;
height: auto;
border-radius: 12px;
}
.media-block__video {
position: relative;
width: 100%;
aspect-ratio: 16 / 9;
border-radius: 12px;
overflow: hidden;
background: rgba(0, 0, 0, .06);
}
.media-block__video iframe {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
border: 0;
}
.media-block__caption {
margin-top: 8px;
color: var(--body-text);
}
/* Key contacts panel ------------------------------------------------------ */
.key-contacts {
display: flex;
flex-direction: column;
gap: 20px;
padding-top: 5px;
border-top: 1px solid var(--light-grey);
}
.key-contacts__eyebrow {
margin: 0;
font-family: "Barlow", var(--font-body);
font-size: 12px;
font-weight: 700;
line-height: 1.5;
letter-spacing: 1.2px;
text-transform: uppercase;
color: var(--teal-1);
}
/* Multiple contact cards stack with a gap. */
.key-contacts__list {
display: flex;
flex-direction: column;
gap: 12px;
}
.key-contact {
display: flex;
flex-direction: column;
gap: 8px;
padding: 12px;
border-radius: 12px;
background: var(--light-grey-cool);
}
.key-contact__head {
display: flex;
align-items: center;
gap: 12px;
}
.key-contact__photo {
flex: 0 0 50px;
}
.key-contact__photo img {
width: 50px;
height: 50px;
border-radius: 50%;
object-fit: cover;
display: block;
}
.key-contact__id {
display: flex;
flex-direction: column;
font-size: var(--fs-body-sm);
line-height: 1.5;
}
.key-contact__name {
font-weight: var(--fw-semibold);
color: var(--black);
}
.key-contact__role {
font-weight: var(--fw-medium);
color: var(--body-text);
}
.key-contact__details {
display: flex;
flex-direction: column;
gap: 2px;
padding-top: 8px;
border-top: 1px solid rgba(0, 0, 0, .1);
font-size: 12px;
}
.key-contact__link {
color: var(--teal-1);
text-decoration: none;
word-break: break-word;
}
.key-contact__link:hover {
text-decoration: underline;
}
/* ---- Article responsive --------------------------------------------------- */
@media (max-width: 1024px) {
/* Drop the sticky rail/contacts column; the body goes full width. */
.article__aside {
display: none;
}
.content-section--cards .content-section__body > div > div > div {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 640px) {
.content-section--cards .content-section__body > div > div > div {
grid-template-columns: 1fr;
}
}
/* ============================================================================
Hub experience — topic hub (e.g. Strategic Planning). A header band (reuses
.header-section) over a two-column body: a sticky "on this page" section rail
(left, the shared _ContentsRail) and a stack of titled groups (right), each a
2-up grid of "resources" cards. Fully generated from the content tree — one
group section per child listing, cards from each group's children. Figma 47:2280.
========================================================================== */
/* Frame sits flush under the header band; the footer's full-width border-top closes it. */
.hub-section {
padding-block: 0;
}
/* The 1330px content box, centred, framed left/right (matches .listing / .site-nav__inner). */
.hub {
max-width: 1330px;
margin: 0 auto;
border-left: 1px solid var(--light-grey);
border-right: 1px solid var(--light-grey);
display: grid;
grid-template-columns: 250px 1fr;
align-items: start;
}
/* Left column — the sticky section rail (shared .contents-rail markup + styling). */
.hub__rail {
position: sticky;
top: var(--rail-top); /* follows the auto-hiding nav via :root --rail-top */
max-height: calc(100vh - var(--rail-top) - var(--sp-v-medium));
overflow-y: auto;
padding: 30px 20px 30px 30px;
min-width: 0;
transition: top 0.25s ease, max-height 0.25s ease; /* slide with the nav (matches article rails) */
}
/* ---- Section-nav accordion (.side-nav) — Figma node 191:13487 --------------
Shared by the standalone Side Navigation pane (.side-nav-pane) AND the Grouped (hub) rail
(.hub__rail). Source name = maroon eyebrow; each section is a native accordion whose
sub-links are the section's pages and navigate to them. The current page's link (and its section
header) get .is-active. Markup: Views/Shared/_SideNav.cshtml. */
.side-nav__eyebrow {
margin: 0 0 20px;
font-family: "Barlow", var(--font-body);
font-size: 13px;
font-weight: 700;
letter-spacing: 1.2px;
text-transform: uppercase;
color: var(--maroon-1);
}
.side-nav__list {
list-style: none;
margin: 0;
padding: 0;
}
/* Hairline between accordion rows (subtle, matches the airy Figma spacing). */
.side-nav__item + .side-nav__item {
border-top: 1px solid var(--light-grey);
}
/* Row header = section title (left) + chevron (right); the whole row toggles the accordion. */
.side-nav__summary {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 14px 0;
cursor: pointer;
list-style: none;
color: var(--blue-1);
font-size: 15px;
font-weight: var(--fw-semibold);
line-height: 1.3;
}
/* Hide the native disclosure triangle (we use our own chevron). */
.side-nav__summary::-webkit-details-marker { display: none; }
.side-nav__summary::marker { content: ""; }
.side-nav__summary:hover .side-nav__title {
color: var(--teal-1);
}
/* Current section header (you're on the section listing page itself). */
.side-nav__summary.is-active .side-nav__title {
color: var(--teal-1);
font-weight: var(--fw-bold);
}
.side-nav__chevron {
flex: 0 0 auto;
font-size: 12px;
color: var(--grey);
transition: transform .15s ease;
}
.side-nav__group[open] > .side-nav__summary .side-nav__chevron {
transform: rotate(180deg);
}
/* Sub-page links (navigate to the section's pages). */
.side-nav__sublist {
list-style: none;
margin: 0 0 12px;
padding: 0 0 0 2px;
display: flex;
flex-direction: column;
gap: 4px;
}
.side-nav__sublink {
display: block;
padding: 6px 10px;
margin: 0 -10px;
border-radius: 6px;
text-decoration: none;
color: var(--body-text);
font-size: var(--fs-body-sm);
line-height: 1.3;
}
.side-nav__sublink:hover {
color: var(--teal-1);
}
/* Current page — the highlighted link in the Figma (teal text on a pale tinted pill). */
.side-nav__sublink.is-active {
background: var(--light-grey-cool);
color: var(--teal-1);
font-weight: var(--fw-semibold);
}
/* ---- Standalone Side Navigation pane + page frame --------------------------
_Layout wraps the page content in .page-frame (a flex row) and drops the optional pane beside it.
When no pane renders, flexes to full width, so pages with the pane Off are unchanged.
The pane hosts the shared .side-nav accordion; Right places it after the content via flex order. */
.page-frame {
display: flex;
align-items: flex-start;
}
.page-frame > main {
flex: 1 1 auto;
min-width: 0; /* let inner grids shrink instead of overflowing the row */
}
/* When a pane is actually present, .page-frame BECOMES the centred 1330 site frame (matching the
nav/footer/listing), so the pane aligns to the container's left edge and the content column
compresses to fill the rest — instead of the pane sitting at the viewport edge with the content
re-centring in the leftover space. Scoped with :has() so pane-Off pages are completely unchanged.
.page-frame owns the OUTER frame hairlines; the pane owns the seam divider; the inner content
frames drop their own centring + side borders (redundant now) and fill the column. */
.page-frame:has(> .side-nav-pane) {
max-width: 1330px;
margin-inline: auto;
background: var(--white);
border-left: 1px solid var(--light-grey);
border-right: 1px solid var(--light-grey);
}
.page-frame:has(> .side-nav-pane) :is(
.header-section, .listing, .hub, .cat-group,
.article__frame, .article__main, .article__aside) {
max-width: none;
margin-inline: 0;
border-left: 0;
border-right: 0;
}
.side-nav-pane {
flex: 0 0 260px;
align-self: stretch; /* full-height divider beside the content */
box-sizing: border-box;
background: var(--white);
border-right: 1px solid var(--light-grey); /* seam between the pane and the content */
}
.side-nav-pane--right {
order: 2; /* push after → sits on the right */
border-right: none;
border-left: 1px solid var(--light-grey);
}
.side-nav-pane__inner {
position: sticky;
top: var(--rail-top); /* follows the auto-hiding nav via :root --rail-top */
max-height: calc(100vh - var(--rail-top) - var(--sp-v-medium));
overflow-y: auto;
padding: 30px 20px 30px 30px;
transition: top 0.25s ease, max-height 0.25s ease; /* slide with the nav (matches article rails) */
}
.side-nav-pane--right .side-nav-pane__inner {
padding: 30px 30px 30px 20px;
}
/* On narrow screens the pane drops out of the row and stacks above the content (matches .hub__rail). */
@media (max-width: 1024px) {
.page-frame {
flex-direction: column;
}
.side-nav-pane {
flex-basis: auto;
width: 100%;
border-right: none;
border-bottom: 1px solid var(--light-grey);
}
.side-nav-pane--right {
order: 0;
border-left: none;
}
.side-nav-pane__inner {
position: static;
max-height: none;
overflow: visible;
padding: 20px 30px;
}
}
/* Right column — the stacked group sections. */
.hub__groups {
padding: 30px;
min-width: 0;
display: flex;
flex-direction: column;
gap: var(--sp-v-large);
}
.hub__empty {
color: var(--body-text);
}
/* One group section. scroll-margin-top so a jumped-to section clears the sticky header. */
.hub-group {
scroll-margin-top: var(--header-h);
display: flex;
flex-direction: column;
gap: var(--sp-grid);
}
.hub-group__head {
margin: 0;
color: var(--blue-1);
}
/* 2-up card grid (per Figma). Bare cards inherit the "resources" look from the
.isv-cards--resources modifier on this container (see the .isv-card system). */
.hub-group__grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--sp-grid);
}
/* Opt hub cards into the hover title recolour, matching the listing grid. */
.hub-group__grid .isv-card {
--card-title-hover-color: var(--teal-2);
}
/* Hub cards show the FULL description (intro + the whole bullet list), not the shared
"resources" 3-line clamp. Selector specificity intentionally beats that clamp rule. */
.hub-group__grid.isv-cards--resources .isv-card:not(.isv-card--styled) .isv-card__summary {
display: block;
-webkit-line-clamp: unset;
line-clamp: unset;
overflow: visible;
}
.hub-group__empty {
grid-column: 1 / -1;
color: var(--body-text);
}
/* ---- Responsive ----------------------------------------------------------- */
@media (max-width: 1024px) {
.hub {
grid-template-columns: 1fr;
}
/* Rail drops out of the sticky column and sits at the top of the body. */
.hub__rail {
position: static;
max-height: none;
overflow: visible;
padding: 30px 30px 0;
}
}
@media (max-width: 640px) {
.hub-group__grid {
grid-template-columns: 1fr;
}
}
/* ---- Downloadable Resource (DownloadableResourceBlock) ---------------------
Three Style-panel looks share one element:
• .isv-resource--row = compact document row (icon + heading + desc + price + Get now) — default
• .isv-resource--pdf = inline PDF viewer (title + print/download bar over a large preview)
• .isv-resource--button = a single compact "Download link" outlined button (Figma 102:7134)
Buttons reuse the shared .btn / .btn--* styling so they match a CTA Button. */
.isv-resource {
box-sizing: border-box;
/* Block-owned vertical rhythm, BOTTOM-only: each block spaces only below itself, so a
stack of blocks in a container gets one gap between each (no 30+30 doubling), the first
block sits naturally against the container top, and the block never stacks a top margin
on top of a section's own padding (Figma: 30px between modules). */
margin-block: 0 var(--sp-grid);
}
/* --- Document row look --- */
.isv-resource--row {
display: flex;
align-items: center;
gap: 20px;
padding: 25px;
background: var(--white);
border: 1px solid var(--light-grey);
border-radius: 12px;
}
.isv-resource__icon {
flex: 0 0 auto;
display: inline-flex;
font-size: 50px; /* Figma node 102:7099 */
line-height: 1;
color: var(--blue-doc);
}
/* Uploaded icon image (e.g. a coloured Word/PDF badge) — sized to the FA glyph box. */
.isv-resource__icon-img {
width: 50px;
height: 50px;
object-fit: contain;
}
.isv-resource__body {
flex: 1 1 auto;
min-width: 0;
display: flex;
flex-direction: column;
gap: 4px;
}
.isv-resource__title {
margin: 0;
color: var(--blue-1);
}
/* Row title should read as a card title regardless of the chosen heading level. */
.isv-resource--row .isv-resource__title {
font-size: var(--fs-h4);
}
.isv-resource__desc {
color: var(--blue-1);
}
.isv-resource__desc > :first-child { margin-top: 0; }
.isv-resource__desc > :last-child { margin-bottom: 0; }
.isv-resource__aside {
flex: 0 0 auto;
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 8px;
text-align: right;
}
.isv-resource__aside-top {
display: flex;
align-items: center;
gap: 12px;
}
.isv-resource__price-pill {
padding: 5px 12px;
border-radius: 6px;
background: var(--light-grey-cool);
color: var(--teal-1);
font-weight: 600;
white-space: nowrap;
}
.isv-resource__aside-note {
display: flex;
flex-direction: column;
gap: 2px;
color: var(--blue-1);
opacity: .75;
}
/* --- PDF viewer look --- */
.isv-resource--pdf {
border: 1px solid var(--light-grey);
border-radius: 12px;
overflow: hidden;
background: var(--white);
}
.isv-resource__bar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding: 14px 18px;
border-bottom: 1px solid var(--light-grey);
}
.isv-resource--pdf .isv-resource__title {
font-size: var(--fs-h5);
}
.isv-resource__tools {
flex: 0 0 auto;
display: flex;
gap: 8px;
}
.isv-resource__tool {
display: inline-flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
padding: 0;
border: 1px solid var(--light-grey);
border-radius: 6px;
background: var(--white);
color: var(--teal-1);
cursor: pointer;
text-decoration: none;
}
.isv-resource__tool:hover {
background: var(--light-grey-cool);
}
.isv-resource__preview {
background: var(--light-grey-warm);
}
.isv-resource__cover {
display: block;
width: 100%;
height: auto;
}
.isv-resource__frame {
display: block;
width: 100%;
height: 70vh;
min-height: 480px;
border: 0;
}
.isv-resource__placeholder {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 10px;
min-height: 320px;
color: var(--blue-1);
opacity: .6;
}
.isv-resource__placeholder i {
font-size: 64px;
line-height: 1;
}
.isv-resource__placeholder-img {
width: 96px;
height: 96px;
object-fit: contain;
}
/* --- Download button look (Figma 102:7134) ---
A single compact "Download link": light-teal border, teal-1 text, download-to-line icon.
Builds on the shared .btn base and only overrides the deltas from the design. */
.isv-resource__download {
gap: 10px;
padding: 6px 10px;
border: 1px solid #cce0e3;
background: var(--white);
color: var(--teal-1);
}
.isv-resource__download:hover {
border-color: var(--teal-1);
}
.isv-resource__download.is-disabled {
opacity: .5;
pointer-events: none;
}
@media (max-width: 640px) {
.isv-resource--row {
flex-wrap: wrap;
}
.isv-resource__aside {
align-items: flex-start;
text-align: left;
width: 100%;
}
}