/* ============================================================================
v9-pages-skin.css
----------------------------------------------------------------------------
Visual-only re-skin for /sectors, /markets, /articles to match the v9 design
system established by the home (v9) / about (v1) / methodology (v1) /
services (v1) redesigns.
Pure overlay — does NOT alter any text content or markup. Codex applies it
by adding ONE line to each page's :
All selectors are scoped to unique IDs / aria-labelledby values that already
exist on these 3 pages, so loading this file on other pages is a no-op.
Color tokens mirror the inline :root in services-redesign-test.html so the
look stays bit-perfect with the rest of the v9 system.
IMPORTANT (2026-04-26): font-family handling for these pages is now provided
by the centralized common.min.v3.css bundle (see
instructions/sitewide-fonts-rollout.md). This overlay file no longer declares
any font-family rules — colors, hovers, gradients, spacing only.
========================================================================== */
:root{
--v9-navy:#003366; --v9-navy-2:#0a2a52; --v9-navy-deep:#021631;
--v9-blue:#0066cc; --v9-amber:#ff9900; --v9-amber-2:#e68a00; --v9-amber-dim:#fff4e0;
--v9-paper:#ffffff; --v9-gray-50:#f6f7f9; --v9-gray-100:#eef0f3;
--v9-ink:#0f1724; --v9-ink-2:#1f2937;
--v9-mute:#4b5563; --v9-mute-2:#6b7280; --v9-mute-3:#9ca3af;
--v9-line:#e5e7eb; --v9-line-strong:#d1d5db;
--v9-ease:cubic-bezier(.16,1,.3,1);
}
/* ============================================================================
1 · SHARED — heroes on /sectors and /articles
----------------------------------------------------------------------------
Both pages use as their
hero. Markets has its own .markets-hero — handled in section 3.
========================================================================== */
.page-hero[aria-labelledby="sectors-hero-heading"],
.page-hero[aria-labelledby="articles-hero-heading"]{
position:relative !important;
overflow:hidden !important;
color:#fff !important;
background:radial-gradient(120% 70% at 50% 0%, #0d3b73 0%, var(--v9-navy) 35%, var(--v9-navy-deep) 100%) !important;
padding:96px 0 84px !important;
}
.page-hero[aria-labelledby="sectors-hero-heading"]::before,
.page-hero[aria-labelledby="articles-hero-heading"]::before{
content:""; position:absolute; inset:0;
background:
radial-gradient(60% 60% at 90% 0%, rgba(255,255,255,.10), transparent 60%),
radial-gradient(60% 60% at 0% 100%, rgba(255,153,0,.16), transparent 60%);
pointer-events:none;
animation:v9HeroDrift 30s var(--v9-ease) infinite alternate;
}
.page-hero[aria-labelledby="sectors-hero-heading"]::after,
.page-hero[aria-labelledby="articles-hero-heading"]::after{
content:""; position:absolute; inset:0; pointer-events:none; opacity:.045;
background-image:radial-gradient(rgba(255,255,255,.7) 1px, transparent 1px);
background-size:3px 3px; mix-blend-mode:overlay;
}
.page-hero[aria-labelledby="sectors-hero-heading"] > .container,
.page-hero[aria-labelledby="articles-hero-heading"] > .container{
position:relative; z-index:1;
}
.page-hero[aria-labelledby="sectors-hero-heading"] h1,
.page-hero[aria-labelledby="articles-hero-heading"] h1{
font-weight:600 !important;
font-size:clamp(2rem,4.6vw,3.3rem) !important;
line-height:1.06 !important;
letter-spacing:-.02em !important;
margin:0 auto 1.1rem !important;
max-width:880px;
}
.page-hero[aria-labelledby="sectors-hero-heading"] h1 em,
.page-hero[aria-labelledby="articles-hero-heading"] h1 em{
font-style:italic; color:var(--v9-amber); font-weight:600;
}
.page-hero[aria-labelledby="sectors-hero-heading"] p,
.page-hero[aria-labelledby="articles-hero-heading"] p{
font-size:1.04rem !important;
line-height:1.7 !important;
color:rgba(255,255,255,.78) !important;
max-width:640px !important;
margin:0 auto !important;
}
.page-hero[aria-labelledby="sectors-hero-heading"] p a,
.page-hero[aria-labelledby="articles-hero-heading"] p a{
color:#fff !important;
text-decoration:underline !important;
text-decoration-color:rgba(255,153,0,.55) !important;
text-underline-offset:0.18em;
transition:text-decoration-color .25s var(--v9-ease);
}
.page-hero[aria-labelledby="sectors-hero-heading"] p a:hover,
.page-hero[aria-labelledby="articles-hero-heading"] p a:hover{
text-decoration-color:var(--v9-amber) !important;
}
/* Insert a v9 eyebrow above the H1 via ::before on the H1's parent container.
Sectors hero already has no eyebrow so we synthesize "Industry Sectors".
Articles hero already has no eyebrow so we synthesize "Insights & Analysis".
This is purely visual decoration, not content — Codex does not need to
localize it because we use CSS content. */
.page-hero[aria-labelledby="sectors-hero-heading"] > .container::before,
.page-hero[aria-labelledby="articles-hero-heading"] > .container::before{
display:inline-flex; align-items:center; gap:.6rem; font-size:.78rem; font-weight:600;
text-transform:uppercase; letter-spacing:.16em; color:var(--v9-amber);
margin-bottom:1.1rem; justify-content:center; width:auto;
}
.page-hero[aria-labelledby="sectors-hero-heading"] > .container{
text-align:center;
}
.page-hero[aria-labelledby="articles-hero-heading"] > .container{
text-align:center;
}
/* DELIBERATELY no eyebrow ::before content — keeps content untouched */
@keyframes v9HeroDrift{
0%{transform:translate3d(0,0,0) scale(1)}
100%{transform:translate3d(2%,-1.2%,0) scale(1.04)}
}
@media (prefers-reduced-motion:reduce){
.page-hero[aria-labelledby="sectors-hero-heading"]::before,
.page-hero[aria-labelledby="articles-hero-heading"]::before{animation:none}
}
/* Testimonial section — calm white with hairline rules */
#sectors-testimonial{
background:var(--v9-paper) !important;
border-top:1px solid var(--v9-line);
}
#sectors-testimonial blockquote,
#sectors-testimonial figure{
color:var(--v9-ink-2);
font-size:1.08rem;
line-height:1.7;
}
/* CTA "Need Expertise in Your Sector?" — re-skin as v9 dark closing CTA */
main section.bg-k-hero-gradient:not(.page-hero),
main section[class*="bg-gradient-to"]:has(h2):not(.page-hero){
position:relative; overflow:hidden;
background:var(--v9-navy) !important;
color:#fff !important;
padding:88px 0 !important;
}
main section.bg-k-hero-gradient:not(.page-hero)::before{
content:""; position:absolute; inset:0;
background:
radial-gradient(50% 70% at 50% 0%, rgba(255,153,0,.18), transparent 60%),
radial-gradient(60% 60% at 100% 100%, rgba(255,255,255,.06), transparent 60%);
pointer-events:none;
}
main section.bg-k-hero-gradient:not(.page-hero) > *{position:relative; z-index:1}
main section.bg-k-hero-gradient:not(.page-hero) h2{
color:#fff !important;
font-size:clamp(1.6rem,3vw,2.1rem) !important;
font-weight:600 !important;
line-height:1.12 !important;
}
main section.bg-k-hero-gradient:not(.page-hero) h2 em{font-style:italic; color:var(--v9-amber); font-weight:600}
/* ============================================================================
3 · MARKETS — FONTS ONLY (per user direction 2026-04-26)
----------------------------------------------------------------------------
Original markets page layout / hero map / dark sections / CTA all kept
as-is. Only swap the fonts to bring it inline with the v9 typography
system: Playfair Display for headings, DM Sans for body, Inter for UI
elements (eyebrow / kicker / labels). NO color, layout, gradient, or
spacing overrides.
========================================================================== */
.markets-hero h1,
.featured-maps-section h2,
#all-countries h2,
.markets-cta h2{
letter-spacing:-.02em;
}
.markets-hero h1 em,
.featured-maps-section h2 em,
#all-countries h2 em,
.markets-cta h2 em{
font-style:italic;
color:var(--v9-amber);
font-weight:600;
}
.markets-hero h2,
.markets-hero h3,
.featured-maps-section h3,
.featured-maps-section h4,
#all-countries h3,
#all-countries h4{
}
.markets-hero p,
.markets-hero__sub,
.featured-maps-section p,
#all-countries p,
.markets-cta p{
}
.markets-hero .section-kicker,
.markets-hero__stat-label,
.featured-maps-section button,
.featured-maps-section [role="tab"],
#all-countries .section-kicker{
}
.markets-hero__stat-number{
}
/* ============================================================================
4 · ARTICLES — RSS bar, listing cards, browse-by-sector, guides,
candidate resources, browse-by-country
========================================================================== */
/* RSS subscription bar — calm white with hairline rule */
.rss-subscription{
background:var(--v9-paper) !important;
border-bottom:1px solid var(--v9-line);
padding:32px 0 !important;
}
.rss-subscription h2,
.rss-subscription h3,
.rss-subscription p{
color:var(--v9-ink-2) !important;
}
.rss-subscription a{
font-weight:600;
color:var(--v9-amber-2) !important;
}
.rss-subscription a[href$=".xml"]{
color:#fff !important;
background:var(--v9-amber) !important;
}
.rss-subscription a[href$=".xml"]:hover{
color:#fff !important;
background:var(--v9-amber-2) !important;
}
/* Featured Market Intelligence (#articles-listing) */
#articles-listing{
background:var(--v9-gray-50) !important;
border-top:1px solid var(--v9-line);
border-bottom:1px solid var(--v9-line);
padding:80px 0 !important;
}
#articles-listing h2{
color:var(--v9-navy) !important;
font-weight:600 !important;
font-size:clamp(1.7rem,3.2vw,2.3rem) !important;
letter-spacing:-.02em;
}
#articles-listing h2 em{font-style:italic; color:var(--v9-amber); font-weight:600}
/* Article cards (cards inside listing/sectors/guides/candidate-resources) */
#articles-listing article,
#articles-listing a[class*="card"],
#articles-browse-sector article,
#articles-browse-sector a[class*="card"],
#articles-guides article,
#articles-guides a[class*="card"],
#articles-candidate-resources article,
#articles-candidate-resources a[class*="card"]{
background:var(--v9-paper) !important;
border:1px solid var(--v9-line) !important;
border-radius:14px !important;
transition:transform .35s var(--v9-ease), border-color .35s var(--v9-ease), box-shadow .35s var(--v9-ease) !important;
}
#articles-listing article:hover,
#articles-listing a[class*="card"]:hover,
#articles-browse-sector article:hover,
#articles-browse-sector a[class*="card"]:hover,
#articles-guides article:hover,
#articles-guides a[class*="card"]:hover,
#articles-candidate-resources article:hover,
#articles-candidate-resources a[class*="card"]:hover{
transform:translateY(-3px);
border-color:var(--v9-line-strong) !important;
box-shadow:0 24px 50px -28px rgba(0,51,102,.18);
}
#articles-listing h3,
#articles-browse-sector h3,
#articles-guides h3,
#articles-candidate-resources h3{
font-weight:700 !important;
color:var(--v9-navy) !important;
letter-spacing:-.005em !important;
font-size:1.12rem !important;
line-height:1.3 !important;
}
#articles-listing p,
#articles-browse-sector p,
#articles-guides p,
#articles-candidate-resources p{
color:var(--v9-mute) !important;
font-size:.96rem;
line-height:1.65;
}
/* "Read more" type links inside cards */
#articles-listing a[class*="link"],
#articles-listing a:not([class*="card"]):not(:has(*)),
#articles-browse-sector a[class*="link"],
#articles-guides a[class*="link"],
#articles-candidate-resources a[class*="link"]{
font-weight:600;
color:var(--v9-amber-2);
transition:color .25s var(--v9-ease);
}
/* Browse by Sector / Guides / Candidate Resources section heads */
#articles-browse-sector,
#articles-guides{background:var(--v9-paper) !important; padding:80px 0 !important}
#articles-browse-sector{border-top:1px solid var(--v9-line)}
#articles-candidate-resources{
background:var(--v9-gray-50) !important;
border-top:1px solid var(--v9-line);
border-bottom:1px solid var(--v9-line);
padding:80px 0 !important;
}
#articles-browse-sector h2,
#articles-guides h2,
#articles-candidate-resources h2,
#browse-by-country h2{
color:var(--v9-navy) !important;
font-weight:600 !important;
font-size:clamp(1.7rem,3.2vw,2.3rem) !important;
letter-spacing:-.02em;
}
#articles-browse-sector h2 em,
#articles-guides h2 em,
#articles-candidate-resources h2 em,
#browse-by-country h2 em{
font-style:italic; color:var(--v9-amber); font-weight:600;
}
/* Browse by Country */
#browse-by-country{background:var(--v9-paper) !important; padding:80px 0 !important; border-top:1px solid var(--v9-line)}
#browse-by-country button,
#browse-by-country [role="tab"]{
letter-spacing:.02em;
border-radius:8px !important;
transition:all .25s var(--v9-ease) !important;
}
#browse-by-country a{
border-radius:6px;
transition:all .2s var(--v9-ease);
}
#browse-by-country a:hover{
color:var(--v9-amber-2) !important;
}
/* ============================================================================
5 · BREADCRUMB — universal soft restyle for all 3 pages
========================================================================== */
nav[aria-label="Breadcrumb"]{
font-size:.82rem !important;
letter-spacing:.02em;
background:var(--v9-paper);
border-bottom:1px solid var(--v9-line);
padding:14px 0 !important;
}
nav[aria-label="Breadcrumb"] ol,
nav[aria-label="Breadcrumb"] ul{
color:var(--v9-mute) !important;
}
nav[aria-label="Breadcrumb"] a{
color:var(--v9-mute) !important;
transition:color .25s var(--v9-ease);
}
nav[aria-label="Breadcrumb"] a:hover{
color:var(--v9-amber-2) !important;
}
nav[aria-label="Breadcrumb"] [aria-current="page"]{
color:var(--v9-navy) !important;
font-weight:600;
}
/* ============================================================================
6 · SEO blocks below — very subtle refinement
========================================================================== */
[data-seo-crosslinks],
[data-pillar-links]{
}
[data-seo-crosslinks] h2,
[data-pillar-links] h2{
color:var(--v9-navy) !important;
font-weight:600 !important;
letter-spacing:-.015em;
}
#sectors-testimonial blockquote,
#sectors-testimonial figure blockquote{
position:relative; padding-left:24px;
border-left:3px solid var(--v9-amber, #ff9900);
font-style:italic; color:var(--v9-ink-2, #1f2937);
font-size:1.12rem; line-height:1.7;
max-width:760px; margin:0 auto;
}
#sectors-testimonial figcaption,
#sectors-testimonial cite{
display:block; margin-top:18px; max-width:760px; margin-left:auto; margin-right:auto;
font-style:normal; color:var(--v9-mute, #4b5563);
font-size:.84rem; letter-spacing:.04em;
}
/* ─────────────────────────────────────────────────────────────────
03 · CTA section — "Need Expertise in Your Sector?"
v9 closing-CTA treatment: navy + amber halo + amber pill
───────────────────────────────────────────────────────────────── */
.cta-section.bg-k-cta-gradient{
background:var(--v9-navy, #003366) !important;
position:relative; overflow:hidden;
padding-top:96px !important; padding-bottom:96px !important;
border-top:1px solid rgba(255,255,255,.06);
}
.cta-section.bg-k-cta-gradient::before{
content:""; position:absolute; inset:0; pointer-events:none;
background:
radial-gradient(50% 70% at 50% 0%, rgba(255,153,0,.20), transparent 60%),
radial-gradient(60% 60% at 100% 100%, rgba(255,255,255,.06), transparent 60%);
}
.cta-section.bg-k-cta-gradient::after{
content:""; position:absolute; inset:0; pointer-events:none;
opacity:.05;
background-image:radial-gradient(rgba(255,255,255,.7) 1px, transparent 1px);
background-size:3px 3px; mix-blend-mode:overlay;
}
.cta-section.bg-k-cta-gradient > .container{position:relative; z-index:1}
/* tighter conversion focus + hairline accent above the H2 */
.cta-section.bg-k-cta-gradient .container > h2{
position:relative; display:inline-block; padding-top:30px;
font-weight:600 !important;
font-size:clamp(1.8rem, 3.4vw, 2.4rem) !important;
letter-spacing:-.018em; line-height:1.12 !important;
color:#fff !important;
margin-bottom:18px !important;
}
.cta-section.bg-k-cta-gradient .container > h2::before{
content:""; position:absolute; top:0; left:50%; transform:translateX(-50%);
width:42px; height:2px; background:var(--v9-amber, #ff9900);
border-radius:2px;
}
.cta-section.bg-k-cta-gradient .container > p{
color:rgba(255,255,255,.78) !important;
max-width:600px !important;
font-size:1.04rem !important; line-height:1.7 !important;
margin-left:auto !important; margin-right:auto !important;
margin-bottom:32px !important;
}
.cta-section.bg-k-cta-gradient .container > p a{
color:#fff !important;
text-decoration:underline !important;
text-decoration-color:rgba(255,153,0,.55) !important;
text-underline-offset:.18em;
transition:text-decoration-color .25s var(--v9-ease, cubic-bezier(.16,1,.3,1));
}
.cta-section.bg-k-cta-gradient .container > p a:hover{
text-decoration-color:var(--v9-amber, #ff9900) !important;
}
/* primary CTA — the "Meet Us" white pill becomes amber-on-navy
(matches v9 conversion-button signature on home / services /
methodology closing CTAs). */
.cta-section.bg-k-cta-gradient .btn--white{
background:var(--v9-amber, #ff9900) !important;
color:var(--v9-navy, #003366) !important;
border:1.5px solid var(--v9-amber, #ff9900) !important;
font-weight:700 !important;
padding:14px 28px !important;
border-radius:6px !important;
letter-spacing:.01em;
transition:transform .25s var(--v9-ease, cubic-bezier(.16,1,.3,1)),
box-shadow .25s var(--v9-ease, cubic-bezier(.16,1,.3,1)),
background .25s var(--v9-ease, cubic-bezier(.16,1,.3,1)) !important;
}
.cta-section.bg-k-cta-gradient .btn--white:hover{
background:var(--v9-amber-2, #e68a00) !important;
transform:translateY(-1px);
box-shadow:0 14px 30px -12px rgba(255,153,0,.55) !important;
}
/* secondary CTA — outline-light, polished hover */
.cta-section.bg-k-cta-gradient .btn--outline{
background:transparent !important;
color:#fff !important;
border:1.5px solid rgba(255,255,255,.32) !important;
font-weight:600 !important;
padding:14px 28px !important;
border-radius:6px !important;
transition:transform .25s var(--v9-ease, cubic-bezier(.16,1,.3,1)),
background .25s var(--v9-ease, cubic-bezier(.16,1,.3,1)),
border-color .25s var(--v9-ease, cubic-bezier(.16,1,.3,1)),
color .25s var(--v9-ease, cubic-bezier(.16,1,.3,1)) !important;
}
.cta-section.bg-k-cta-gradient .btn--outline:hover{
background:#fff !important; color:var(--v9-navy, #003366) !important;
border-color:#fff !important;
transform:translateY(-1px);
}
/* the gap between the two buttons */
.cta-section.bg-k-cta-gradient .flex{gap:14px !important}
/* ─────────────────────────────────────────────────────────────────
04 · "Our Strategic Perspective" section — cool gray break
───────────────────────────────────────────────────────────────── */
section[aria-label="Our Strategic Perspective"]{
background:var(--v9-gray-50, #f6f7f9) !important;
border-top:1px solid var(--v9-line, #e5e7eb) !important;
padding-top:64px !important; padding-bottom:64px !important;
}
section[aria-label="Our Strategic Perspective"] h2,
section[aria-label="Our Strategic Perspective"] h3{
color:var(--v9-navy, #003366) !important;
letter-spacing:-.015em;
}
section[aria-label="Our Strategic Perspective"] p{
color:var(--v9-mute, #4b5563) !important;
line-height:1.7;
}
/* ─────────────────────────────────────────────────────────────────
05 · Section rhythm — section dividers / breathing room
───────────────────────────────────────────────────────────────── */
[data-seo-crosslinks]{
border-top:1px solid var(--v9-line, #e5e7eb) !important;
}