/* ============================================================================ isConnect — design tokens + global chrome (nav + footer). Tokens mirror the Figma "ISV isConnect UI Design" variables. Fonts (@font-face + the Barlow import) live in wwwroot/css/fonts.css, which _Layout loads BEFORE this file. COLOUR IS TWO LAYERS, and the split is load-bearing: LAYER 1 the raw brand palette — the ONLY place a brand hex may appear. LAYER 2 semantic roles — what every rule in this file actually references. Why: the rebrand collapses six brand colours onto three, and the retired --teal-1 alone meant link colour AND icon colour AND border colour AND "background under white text" — four things that must now diverge, because white on Royal Blue is 3.80:1 while white on Deep Blue is 7.10:1. A flat palette cannot express that; renaming or aliasing the old tokens would have preserved the conflation. It also means the open accessibility question (Royal Blue text on white fails AA at small sizes) is a ONE-LINE flip of --brand-primary rather than a second sweep of ~56 call sites. Rule: never reference a LAYER 1 *brand* token outside LAYER 2, and never write a brand hex anywhere else in this file. The bare neutrals (--white, --black, --grey, --body-text) are exempt — they are identical in both brands and reading `var(--white)` on a fill is clearer than `var(--surface)`. ========================================================================== */ :root { /* ---- LAYER 1 — raw palette (Figma "Style → Colours", node 279:7442) ---- */ --deep-blue: #2756a0; --royal-blue: #2985e0; --ocean-blue: #a0dbec; --sunshine: #fce17c; --cream: #fef9e5; /* Royal Blue at ~10% over white — the hairline on chips, search fields and bookmark boxes (Figma card component 67:4949). */ --royal-blue-tint: #d4e7f9; --blue-doc: #0076DF; /* document file-type icon (Figma node 102:7099) — a file-type convention, deliberately NOT brand. */ /* Neutrals */ --white: #ffffff; --black: #000000; --grey: #888888; --body-text: #666666; --light-grey: #d8d8d8; /* hairlines: nav underline, footer overline */ --light-grey-neutral: #f4f4f4; /* nav / footer / category-card surface */ --light-grey-cool: #e2f4f9; /* the Resources / Recently-explored band */ /* ---- LAYER 2 — semantic roles (reference these, not the above) -------- */ --brand-primary: var(--royal-blue); /* links, icon glyphs, borders on light */ --brand-primary-strong: var(--deep-blue); /* fills that carry WHITE text (7.10:1) */ --brand-primary-hover: var(--deep-blue); /* hover / active / selected */ --brand-soft: var(--ocean-blue); /* links on dark, decorative rules */ --brand-deep: var(--deep-blue); /* wordmark, on-light emphasis */ --accent-warm: var(--sunshine); --accent-warm-bg: var(--cream); --text-strong: var(--black); /* headings, card titles */ --text-body: var(--body-text); /* body copy, footer links */ --text-muted: var(--grey); /* dates, meta, disabled */ --surface: var(--white); --surface-muted: var(--light-grey-neutral); --surface-cool: var(--light-grey-cool); --surface-brand: var(--royal-blue); /* the hero wash */ --border-hairline: var(--light-grey); --border-accent: var(--royal-blue-tint); --focus-ring: var(--brand-primary-hover); --icon-accent: var(--brand-primary); /* Shadows and scrims are neutral black, NOT tinted. They previously encoded rgba(41,64,83,…) — which is the retired #294053 written in decimal. */ --shadow-card: 0 6px 18px rgba(0, 0, 0, .12); --shadow-pop: 0 10px 30px rgba(0, 0, 0, .18); --scrim: rgba(0, 0, 0, .45); /* Type scale (Stevie Sans) — Figma "Typography" (node 279:7373). Canonical roles + responsive sizes live with the .t-* classes below. See /isv-typography-skill before authoring block headings. @font-face for both families lives in ONE place: wwwroot/css/fonts.css. */ /* NO FALLBACK STACK — deliberate. Segoe UI is close enough to Stevie Sans that a failed webfont load was invisible; with the stack gone a failure drops to the browser's default serif and is unmistakable. Keep in step with the identical token in editor.css. Trade-off: if the woff2 ever 404s, visitors get Times, not a tidy system sans. Restore the stack ("Segoe UI", system-ui, -apple-system, Roboto, Helvetica, Arial, sans-serif) once the typography has been signed off. See the font check in _Layout.cshtml. */ --font-body: "Stevie Sans"; /* Uppercase eyebrow labels only ("LATEST UPDATES", "QUICK LINKS", the rail heading). Stevie Sans has no matching cut, so Barlow Bold stays from the previous brand. */ --font-eyebrow: "Barlow", var(--font-body); /* 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; /* Figma "Body extra small" — dates and card meta lines ("Last updated: DD/MM/YYYY", Home node 102:2747). Book 400 / 12px / lh 1.4. Was hardcoded as a bare 12px at several call sites before it was tokenised. */ --fs-body-xs: 12px; /* Role line-heights */ --lh-display: 1.2; /* h1-xl, h1-lg, h1 */ --lh-heading: 1.3; /* h2, h3 */ --lh-subhead: 1.4; /* h4, h5, body-xs */ --lh-body: 1.5; /* body, body-sm */ /* Role weights — Stevie Sans cuts, declared in fonts.css. The names are the FOUNDRY's style names, not CSS-weight nicknames, so "regular" is 550 and "medium" is 600. The old Quicksand set (medium 500 / semibold 600 / bold 700) is retired: every call site was re-pointed explicitly rather than redefining --fw-medium in place, which would have silently bolded all body copy from 500 to 600. */ --fw-light: 300; /* Light — h1-xl, h1-lg, h1 */ --fw-book: 400; /* Book — body, body-sm */ --fw-regular: 550; /* Regular — buttons, pill links, search chips */ --fw-medium: 600; /* Medium — h2, h3, h4, h5, nav links */ --fw-eyebrow: 700; /* Barlow Bold — uppercase eyebrow labels only */ /* 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; /* Height of the article's sticky breadcrumb/share topbar (its tallest child is the 34px share button). Anything else that pins inside .article__main has to clear it — see the jump bar. */ --article-topbar-h: 34px; /* 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); /* 1 once the viewport is too narrow (or too short, turned sideways) for the listing's 250px filter rail, so it collapses into the sticky FILTERS dropdown. CSS owns this breakpoint — site.js only READS the flag (search "--filters-collapsed" for the query that sets it). */ --filters-collapsed: 0; /* Semantic */ --isv-bg: var(--white); --isv-fg: var(--text-strong); } /* 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; } /* Replaced elements never exceed their column. TinyMCE writes intrinsic width/height attributes onto editor-inserted images, and without this cap that intrinsic width becomes the subtree's MIN-content width — which propagates up the flex shell and lays the whole content column (text included) out wider than the viewport on mobile. Safe as a bare-element rule: every other img rule in this file is class-scoped, so it out-specifies this one (e.g. .media-block__img keeps its width:100%). */ img, svg, video, iframe, canvas { max-width: 100%; } img { height: auto; /* keep the aspect ratio once the width is clamped */ } body { margin: 0; font-family: var(--font-body); font-size: var(--fs-body); font-weight: var(--fw-book); 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; } /* Display roles are Stevie Sans LIGHT (300) — Figma H1-extra-large / H1-large / H1. This is the most visible change in the rebrand: they were Quicksand Bold 700. */ .t-h1-xl { font-weight: var(--fw-light); font-size: var(--fs-h1-xl); line-height: var(--lh-display); } .t-h1-lg { font-weight: var(--fw-light); font-size: var(--fs-h1-lg); line-height: var(--lh-display); } .t-h1 { font-weight: var(--fw-light); font-size: var(--fs-h1); line-height: var(--lh-display); } .t-h2 { font-weight: var(--fw-medium); font-size: var(--fs-h2); line-height: var(--lh-heading); } .t-h3 { font-weight: var(--fw-medium); font-size: var(--fs-h3); line-height: var(--lh-heading); } .t-h4 { font-weight: var(--fw-medium); font-size: var(--fs-h4); line-height: var(--lh-subhead); } .t-h5 { font-weight: var(--fw-medium); font-size: var(--fs-h5); line-height: var(--lh-subhead); } .t-body { font-family: var(--font-body); font-weight: var(--fw-book); font-size: var(--fs-body); line-height: var(--lh-body); } .t-body-sm { font-family: var(--font-body); font-weight: var(--fw-book); font-size: var(--fs-body-sm); line-height: var(--lh-body); } /* Figma "Body extra small" (Stevie Sans Book 400, 12/16.8) — dates and card meta rows. NOTE the line-height breaks the pattern: it is 1.4, not the 1.5 the other body roles use. */ .t-body-xs { font-family: var(--font-body); font-weight: var(--fw-book); font-size: var(--fs-body-xs); line-height: var(--lh-subhead); } /* Interactive labels — Figma "Body small regular" (Stevie Sans Regular 550): buttons, pill links, search chips, "Subscribe to newsletter". */ .t-label { font-family: var(--font-body); font-weight: var(--fw-regular); 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-light) var(--fs-h1)/var(--lh-display) var(--font-body); margin: 0 0 .5em; } h2 { font: var(--fw-medium) var(--fs-h2)/var(--lh-heading) var(--font-body); margin: 0 0 .5em; } h3 { font: var(--fw-medium) var(--fs-h3)/var(--lh-heading) var(--font-body); margin: 0 0 .5em; } h4 { font: var(--fw-medium) var(--fs-h4)/var(--lh-subhead) var(--font-body); margin: 0 0 .5em; } h5 { font: var(--fw-medium) var(--fs-h5)/var(--lh-subhead) var(--font-body); margin: 0 0 .5em; } /* ---- Buttons -------------------------------------------------------------- */ .icon-btn { /* Figma: white rounded square, NO border, Royal Blue icon. */ display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border: 0; border-radius: 6px; background: var(--white); color: var(--brand-primary); font-size: 16px; cursor: pointer; transition: background-color .15s ease; } .icon-btn:hover { background: var(--surface-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: var(--fw-regular); text-decoration: none; cursor: pointer; } .btn--outline { border: 1px solid var(--brand-primary); color: var(--brand-primary); background: var(--white); } .btn--outline:hover { background: var(--brand-primary-strong); 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(--brand-deep); color: var(--white); border-radius: 3px; font-weight: var(--fw-medium); 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: var(--fw-medium); font-size: 22px; color: var(--brand-deep); } /* ---- 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. Figma node 102:2733 keeps this 1330 frame; it is NOT full-bleed. */ position: relative; /* containing block for the optional photo layer */ isolation: isolate; /* keep the photo's stacking context out of the page's */ overflow: hidden; /* the photo is cropped to fill, per Figma */ max-width: 1330px; margin: 0 auto; border: 1px solid var(--border-hairline); border-bottom: 0; /* the search band below draws the shared seam */ /* 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); /* ...and the Section Header's action link ("View all") goes Ocean Blue on the wash — Figma node 102:4698 — because brand blue on brand blue disappears. */ --section-header-action: var(--brand-soft); --section-header-action-hover: var(--white); } /* Optional background photo — Figma node 102:2735 lays the image over the colour wash at 50%. A real rather than a CSS background-image, so the ContentReference resolves through IUrlResolver like every other image here and object-fit owns the crop. --hero-overlay comes from the section's "Photo strength" property, inline per band. */ .hero-band__media { position: absolute; inset: 0; opacity: var(--hero-overlay, .5); pointer-events: none; } .hero-band__media img { width: 100%; height: 100%; object-fit: cover; /* Figma crops the photo well above centre so faces clear the headline. */ object-position: center 30%; } /* Everything authored in the band sits above the photo. */ .hero-band > .hero-band__inner { position: relative; z-index: 1; } .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. TWO different gaps, and the split is the point: Figma node 102:2740 puts 15px between the "LATEST UPDATES" header row and the cards, while the card row itself (102:2742) is 30px. One wrapping flex serves both, so row-gap and column-gap are set separately rather than with a single --sp-grid — which was making the header sit 15px too low and the band 15px too tall (Figma's banner is 403px). Note this also makes a SECOND row of cards sit 15px below the first; the design only ever shows two, so there is no Figma value to honour there. */ .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: 15px 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); } /* Figma node 102:2741 — Barlow Bold 700, like every other uppercase eyebrow on the site (.contents-rail__top, .site-footer__heading). Stevie Sans has no matching cut, so the family MUST be restated here: without it this inherits --font-body and renders as Stevie Sans Medium, which is what the rebrand left behind. */ .updates-header__eyebrow { margin: 0; font-family: var(--font-eyebrow); font-size: 12px; font-weight: var(--fw-eyebrow); 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; /* Figma 102:4698 — Ocean Blue, because this link sits ON the blue hero band. */ color: var(--brand-soft); font-size: var(--fs-body-sm); /* Figma "Body small regular" (Stevie Sans Regular 550) — the shared type of every "Button icon text" in the design ("View all resources", "View all recent"). The hero's own node still reads Quicksand SemiBold, a leftover in the Figma file: Quicksand is retired brand-wide, so follow the design system's 550, not the stale layer. */ font-weight: var(--fw-regular); text-decoration: none; } .updates-header__viewall:hover { color: var(--brand-primary-hover); } /* ---- 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; /* Square corners — Figma node 102:2744 puts no radius on the hero update thumbnails. (The Grid card look's 8px media radius IS in the design; don't confuse the two.) */ 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 "Body extra small" (node 102:2747), white at 50% on the hero band. */ font-size: var(--fs-body-xs); font-weight: var(--fw-book); line-height: var(--lh-subhead); color: rgba(255, 255, 255, .5); } /* ---- 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); } /* Figma node 102:2741 ("LATEST UPDATES") — Barlow Bold 700. Restating the family is load-bearing: Stevie Sans has no eyebrow cut, so inheriting --font-body silently renders this as Stevie Sans Medium. Colour inherits so the eyebrow reads white on the hero band and dark on a light section. */ .section-header__eyebrow { margin: 0; font-family: var(--font-eyebrow); font-size: 12px; font-weight: var(--fw-eyebrow); letter-spacing: 1.2px; text-transform: uppercase; color: inherit; } .section-header__action { display: inline-flex; align-items: center; gap: 10px; flex: 0 0 auto; /* Brand blue on a light section; a coloured band (e.g. .hero-band) re-points --section-header-action to Ocean Blue. Figma "Button icon text" = Body small regular (Stevie Sans Regular 550 / 14 / 150%) — the same role .pill-link takes via .t-label. */ color: var(--section-header-action, var(--brand-primary)); font-size: var(--fs-body-sm); font-weight: var(--fw-regular); line-height: var(--lh-body); text-decoration: none; } .section-header__action:hover { color: var(--section-header-action-hover, var(--brand-primary-hover)); } .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(--surface-muted); --card-pad: 25px; --card-radius: 12px; --card-fg: inherit; --card-hover-shadow: var(--shadow-card); --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: var(--text-muted); --card-title-fs: var(--fs-h4); --card-title-fw: var(--fw-medium); --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 = Deep Blue). 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 { /* Figma card component 67:4949 draws these in Font Awesome Pro LIGHT at 30px. --fa-style is FA7's weight switch, so this one declaration thins whatever cut the author picked (fa-solid / fa-regular) down to Light — no need to restate the weight on every stored icon class in the CMS. It out-ranks .fa-solid's own --fa-style only because site.css loads after all.min.css; keep that order. */ --fa-style: 300; font-size: 30px; line-height: 1; color: var(--icon-accent); } .isv-card__bookmark { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border: 1px solid var(--border-accent); border-radius: 6px; background: var(--white); color: var(--brand-primary); 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; min-width: 0; /* lets the pills below shrink instead of stretching the card's meta row */ } .isv-card__tag { background: var(--white); border: 1px solid var(--border-accent); border-radius: 100px; padding: 6px 12px; /* Figma's Tag component (I102:5378;111:7815) is Stevie Sans REGULAR (550), not Medium — the same interactive-label cut the breadcrumb and sort pills use. Size reads the body-xs token so the pill follows the mobile type step; line-height stays `normal` because the pill's height comes from its padding, as in the component. */ font-size: var(--fs-body-xs); font-weight: var(--fw-regular); line-height: normal; color: var(--brand-primary); white-space: nowrap; /* A long category name stays on one line (the pill shape depends on it), so cap it at the card's width and ellipsis the overflow — otherwise it juts out of a narrow card. */ max-width: 100%; overflow: hidden; text-overflow: ellipsis; } /* Figma "Body extra small" — the card's "Last updated: …" line (Home node 102:2747). */ .isv-card__date { display: var(--card-date-display, inline); font-size: var(--fs-body-xs); font-weight: var(--fw-book); line-height: var(--lh-subhead); 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-book); 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(--surface-muted); --card-meta-display: flex; --card-bookmark-display: inline-flex; /* Figma 102:5378 puts the bookmark box opposite the tags */ /* Lighter than --text-muted (#888): Figma 102:5378 draws the card date at #a3a3a3. Design-fidelity call — it is 2.53:1 on white, so it sits with the rebrand's known AA debt rather than passing it. Article look only; Grid keeps its own. */ --card-date-color: #a3a3a3; --card-title-fs: var(--fs-h5); --card-title-fw: var(--fw-medium); --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(--text-strong); --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-medium); --card-title-color: var(--text-strong); --card-title-hover-color: var(--brand-primary-hover); /* Grid card title turns Deep Blue 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-medium); --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(--brand-soft); 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-medium); --card-title-color: var(--text-strong); --card-title-hover-color: var(--brand-primary-hover); /* title turns Deep Blue on hover */ } /* Search result rows — the full-width row from Figma 237:7081: a soft filled panel laid out as [icon] [title + snippet] [category pill], one per line. Wired to the Search Results element's default "Search result rows" Style variant, which stamps .isv-cards--searchrow. The ONE look that changes the card's LAYOUT rather than just its colours, because the tag pill has to move from above the title (where every other look puts it) to a right-hand column. Rather than fork _IsvCard.cshtml's markup, .isv-card__body is set to display:contents so its children become grid items of the link and can be placed directly — the markup stays shared, the layout differs. */ .isv-card--searchrow, .isv-cards--searchrow .isv-card:not(.isv-card--styled) { --card-bg: var(--surface-muted); --card-pad: 16px 20px; --card-radius: 8px; --card-link-gap: 0; --card-hover-shadow: none; --card-hover-transform: none; --card-top-display: flex; /* the leading type icon */ --card-media-display: none; /* a row, never an image */ --card-meta-display: inline-flex; /* the category pill, moved right below */ --card-date-display: none; /* the design shows no date on a result row */ --card-bookmark-display: none; --card-title-fs: var(--fs-h5); --card-title-fw: var(--fw-medium); --card-title-color: var(--text-strong); --card-title-hover-color: var(--brand-primary-hover); } /* Rows sit in a 1-up grid, so kill the equal-height stretch the card grid gives tiles. */ .isv-cards--searchrow .isv-card:not(.isv-card--styled), .isv-card--searchrow { height: auto; } .isv-cards--searchrow .isv-card:not(.isv-card--styled) .isv-card__link, .isv-card--searchrow .isv-card__link { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-rows: auto auto; align-items: center; column-gap: 16px; row-gap: 2px; height: auto; } /* Lift the body's children into the link's grid so the meta row can leave the text column. */ .isv-cards--searchrow .isv-card:not(.isv-card--styled) .isv-card__body, .isv-card--searchrow .isv-card__body { display: contents; } .isv-cards--searchrow .isv-card:not(.isv-card--styled) .isv-card__top, .isv-card--searchrow .isv-card__top { grid-column: 1; grid-row: 1 / span 2; } .isv-cards--searchrow .isv-card:not(.isv-card--styled) .isv-card__icon, .isv-card--searchrow .isv-card__icon { font-size: 22px; color: var(--blue-doc); } /* A listing/hub result is a "topic" — flagged maroon, as in the design's TOPICS row. */ .isv-cards--searchrow .isv-card:not(.isv-card--styled) .isv-card__icon.fa-clipboard-check, .isv-card--searchrow .isv-card__icon.fa-clipboard-check { /* Deep, not Royal: this sits beside the --blue-doc file icon, which is 3 degrees of hue away. */ color: var(--brand-primary-strong); } .isv-cards--searchrow .isv-card:not(.isv-card--styled) .isv-card__title, .isv-card--searchrow .isv-card__title { grid-column: 2; grid-row: 1; } .isv-cards--searchrow .isv-card:not(.isv-card--styled) .isv-card__summary, .isv-card--searchrow .isv-card__summary { grid-column: 2; grid-row: 2; font-size: var(--fs-body-sm); /* One line, ellipsised — the design's rows are a fixed height. */ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .isv-cards--searchrow .isv-card:not(.isv-card--styled) .isv-card__meta, .isv-card--searchrow .isv-card__meta { grid-column: 3; grid-row: 1 / span 2; justify-self: end; } /* The matched-term highlight. Graph tells us which words matched (including stems), and GraphSearchService wraps them in AFTER encoding — see its remarks. Restyled from the browser default yellow block to the design's teal emphasis. */ .isv-card__title mark, .isv-card__summary mark { background: none; color: var(--brand-primary); font-weight: inherit; } /* 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 ---------------------------------------------- Deep Blue, not Royal: this fill carries WHITE text (7.10:1 vs 3.80:1). */ .btn--primary { background: var(--brand-primary-strong); color: var(--white); border: 1px solid var(--brand-primary-strong); } .btn--primary:hover { background: var(--brand-primary-hover); border-color: var(--brand-primary-hover); 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: 10px; /* Figma 212:6393 gap-10 — 30 + 34 + 10 + 94 + 40 closes its 208 height exactly */ background: var(--surface-cool); border: 1px solid var(--border-hairline); 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; } /* The 34px square icon button (Figma 191:14917). ONE definition for every icon in the article topbar's action row — share and bookmark from the markup, plus the back-to-top and jump-to controls site.js appends there, which arrive with the rail-bar's own class names. */ .header-section__share, .article__icon-btn, .contents-rail-bar--inline .contents-rail-bar__btn { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; padding: 0; border: 1px solid var(--border-accent); border-radius: 6px; background: var(--white); color: var(--brand-primary); font-size: 16px; text-decoration: none; /* back-to-the-top is an */ cursor: pointer; } .header-section__share:hover, .article__icon-btn:hover, .contents-rail-bar--inline .contents-rail-bar__btn:hover { background: var(--surface-cool); } /* The ≡ section-navigation toggle (Figma 191:14915) — the same 34px square, in the maroon of the side-nav eyebrow it opens, so it reads as that rail's control and not another page action. */ .article__icon-btn--nav { color: var(--icon-accent); } /* The action group itself — right-aligned in the topbar, 12px between icons (Figma 1739:8585, which binds the "Spacing/Buttons" variable). .article__actions holds share + bookmark; the appended .contents-rail-bar--inline contributes the other two on the touch band, so the row reads as one continuous set of four at the same rhythm. */ .article__actions { flex: 0 0 auto; /* the icons never shrink — the breadcrumb beside them absorbs the squeeze */ margin-left: auto; /* hard right, whatever sits to the left (see .article__topbar) */ display: flex; align-items: center; gap: 12px; } /* 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; /* Deep Blue, NOT --text-strong: Figma 212:6397 is text-[color:var(--deep-blue,#2756a0)]. Only the SUBTEXT below is black. --brand-deep is the layer-2 role for on-light emphasis (7.10:1 on the light-grey-cool band), so no layer-1 hex is referenced here. */ color: var(--brand-deep); } .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, --border-accent hairline, Royal Blue 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. The family name must match one the self-hosted Font Awesome Pro 7 stylesheet actually declares — it defines "Font Awesome 7 Pro" (plus 7 Free/Brands/Duotone and a 5 Pro shim) and NOT the "Font Awesome 6 Free" this used to name, which rendered nothing. */ .breadcrumbs__item + .breadcrumbs__item::before { content: "\f054"; /* fa chevron-right */ font-family: "Font Awesome 7 Pro"; font-weight: 900; font-size: 10px; color: var(--grey); } .breadcrumbs__crumb { display: inline-flex; align-items: center; /* Figma "Button icon text" component (I212:6395) — gap 10, pt 6 / pb 7 / px 10, and Stevie Sans REGULAR 550, i.e. the .t-label interactive role, not Medium 600. */ gap: 10px; padding: 6px 10px 7px; border: 1px solid var(--border-accent); border-radius: 6px; background: var(--white); color: var(--brand-primary); font-weight: var(--fw-regular); font-size: var(--fs-body-sm); text-decoration: none; } a.breadcrumbs__crumb:hover { background: var(--surface-cool); } .breadcrumbs__crumb--current { background: transparent; border-color: transparent; padding-left: 0; padding-right: 0; color: var(--body-text); } /* ---- "Back" crumb (article/Content topbar only) --------------------------- Figma 191:14913 reads the topbar crumb as a BACK control — "← Strategic Planning" where the row has room, "← Back" where it does not. The arrow is injected by site.js (initBackCrumb), which also does the label swap; here it just gets the icon's size/colour. Scoped to .article__topbar so the same Breadcrumb component keeps its plain trail inside header sections. */ .article__topbar .breadcrumbs__arrow { flex: 0 0 auto; font-size: 13px; color: var(--brand-primary); } /* Collapsed to "Back": the pill is now short enough that shrinking it further only makes it unreadable, so let it hold its natural width instead of absorbing the row's squeeze. */ .article__topbar .breadcrumbs__crumb--back { flex: 0 0 auto; white-space: nowrap; } /* ---- 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(--surface-cool); border-bottom: 1px solid var(--border-hairline); border-left: 1px solid var(--border-hairline); border-right: 1px solid var(--border-hairline); } .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(--border-hairline); } /* 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 { /* Figma nodes 102:2758 / 102:2772 draw these in Font Awesome Pro LIGHT at 32px. The glyph class is CMS-authored (an editor picks "fa-solid fa-clipboard-list"), so the cut has to be forced here rather than in the markup — --fa-style is FA7's weight switch and thins whatever the author chose. Same device as .isv-card__icon; it out-ranks .fa-solid's own --fa-style only because site.css loads after all.min.css, so keep that order. */ --fa-style: 300; font-size: 32px; line-height: 1; color: var(--icon-accent); } .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"). Type comes from the .t-label role in the markup (Figma "Body small regular" — Stevie Sans 550 / 14px / 150%); this rule owns only box + colour. */ .pill-link { display: inline-flex; align-items: center; gap: 10px; flex: 0 0 auto; background: var(--white); color: var(--brand-primary); text-decoration: none; padding: 6px 10px; border-radius: 6px; } .pill-link:hover { color: var(--brand-primary-hover); } /* 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); /* Royal Blue tint hairline — Figma card component 67:4949. */ border: 1px solid var(--border-accent); 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 var(--border-accent); border-radius: 6px; color: var(--brand-primary); cursor: pointer; } /* Rendered only when no search page is nominated on the start page, so the field has nowhere to submit (see IHasSiteSearch / SiteSearchViewComponent, which also logs a warning). It must LOOK unavailable — a live-looking magnifier that silently does nothing is the whole reason this state was hard to diagnose. */ .search-field__btn:disabled { color: var(--grey); border-color: var(--border-hairline); cursor: not-allowed; } .search-tags { display: flex; flex-wrap: wrap; gap: 12px; } /* Same author-vs-UA problem as .explore-tags[hidden] below: the home panel's recent-search shell (data-home-search-recent) ships `hidden`, and without this a visitor with no search history got an unexplained gap in the Resources column. */ .search-tags[hidden] { display: none; } .search-tag { display: inline-flex; align-items: center; gap: 10px; background: var(--white); color: var(--brand-primary); /* Figma "Button icon text" — Body small regular (Stevie Sans Regular 550), matching .pill-link / .t-label. Was --fw-medium 600, half a cut too heavy. */ font-weight: var(--fw-regular); text-decoration: none; padding: 6px 10px; border-radius: 6px; } .search-tag:hover { color: var(--brand-primary-hover); } /* Recently explored: item pills -------------------------------------------- */ /* Built by renderRecentExplored() from this visitor's own localStorage history — the server never sees it, so the shell below ships empty. */ .explore-tags { display: flex; flex-wrap: wrap; align-content: flex-start; gap: 12px; } /* Load-bearing: the rule above is an AUTHOR declaration, which outranks the UA's [hidden] { display: none } no matter the specificity. Without this the empty shell stays display:flex and still eats its slot in .search-panel's 20px column gap — an unexplained hole above the empty-state line. Same fix as .site-search-modal__recent[hidden] further down. */ .explore-tags[hidden] { display: none; } .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; /* A long card title is a real possibility now these are real pages, not three curated mocks. */ max-width: 100%; } /* These are real links now, so they need a hover; as mocks pointing at "#" they had none. */ .explore-tag:hover { color: var(--brand-primary); } /* Shown until this visitor has any history — see RecentlyExploredBlock.EmptyStateText. */ .explore-empty { margin: 0; color: var(--text-muted); } .explore-tag__icon { /* Figma node 102:2783 — Font Awesome Pro REGULAR at 16px. The markup hardcodes fa-solid, so thin it here (see .search-panel__icon for why the cut is forced in CSS). */ --fa-style: 400; flex: 0 0 auto; width: 16px; text-align: center; color: var(--icon-accent); } /* ---- Top navigation ------------------------------------------------------- */ .site-header { /* Figma: full-width --surface-muted bar with a bottom border. The 55px side gutters are this grey showing beside the centred, bordered content box. */ background: var(--surface-muted); border-bottom: 1px solid var(--border-hairline); /* 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). No side borders: the header/footer read as clean full-width bands. VERTICAL padding only — Figma's nav inner (102:2732) is w-1330 / py-24 with no side pad, which is what puts the logo exactly on the hero band's left edge. A horizontal 24px here pushed the logo and the action icons 24px inside the frame, out of line with every band below. The ≤720px rule sets its own padding-inline and still wins. */ max-width: 1330px; margin: 0 auto; padding: 24px 0; display: flex; align-items: center; gap: var(--sp-grid); } .site-nav__links { display: flex; align-items: center; gap: var(--sp-grid); /* Figma 47:1701 — 30px between primary links */ margin: 0; padding: 0; list-style: none; } .site-nav__links a { text-decoration: none; font-weight: var(--fw-medium); color: var(--text-body); } .site-nav__links a:hover { color: var(--brand-primary); } .site-nav__actions { margin-left: auto; display: flex; align-items: center; gap: 12px; /* Figma "Spacing/Buttons" */ } /* Figma 47:1706-1709 — all four nav actions are Font Awesome Pro REGULAR at 16px. Their glyph classes are CMS-authored (NavActionBlock.Icon, no code default), so an author typing "fa-solid …" for one of them silently breaks the row's consistency — which is what happened to the magnifier. Force the cut for the slot instead of chasing the content. Scoped to a.icon-btn so the burger