/* =====================================================================
Hageman Capital — Rebrand reskin
White base · navy ink · copper CTA · cerulean accent · light grotesque
---------------------------------------------------------------------
Override sheet for the hageman-capital parent theme. Targets the REAL
rendered ACF block selectors on the homepage (page ID 6). Loaded last
so it wins the cascade; !important is used only to beat the parent's
inline color/background styles (number module, two-column, CTA bands,
eyebrow spans) flagged in the architecture audit.
===================================================================== */
:root{
/* surfaces */
--hc-paper:#ffffff;
--hc-soft:#f6f5f2;
--hc-soft-2:#efece5;
--hc-navy:#00263d; /* matches existing inline rgb(0,38,62) */
--hc-navy-deep:#001a2b;
--hc-navy-2:#123a55;
/* ink */
--hc-ink:#16273b;
--hc-ink-soft:#566578;
--hc-ink-faint:#8a96a4;
--hc-on-navy:#eef2f6;
--hc-on-navy-soft:#9fb1c4;
/* lines */
--hc-line:#e6e2da;
--hc-line-navy:rgba(255,255,255,.14);
/* accent (cerulean, from logo) — links / eyebrows / marks */
--hc-accent:#0476a8;
--hc-accent-strong:#055f87;
--hc-accent-soft:#7fc1e0;
/* CTA (copper) — LOCKED */
--hc-cta:#AE5E3A;
--hc-cta-strong:#974c2c;
--hc-cta-text:#ffffff;
--hc-cta-shadow:rgba(174,94,58,.5);
/* type */
--hc-font:"Hanken Grotesk", system-ui, -apple-system, sans-serif;
--hc-mono:"DM Mono", ui-monospace, "SFMono-Regular", monospace;
/* rhythm — compact density (locked) */
--hc-section-y:84px;
--hc-shadow-card:0 1px 2px rgba(14,34,54,.04), 0 18px 40px -24px rgba(14,34,54,.22);
}
/* ---------------------------------------------------------------------
BASE
--------------------------------------------------------------------- */
body.page-homepage,
body{
background:var(--hc-paper);
color:var(--hc-ink);
font-family:var(--hc-font);
-webkit-font-smoothing:antialiased;
text-rendering:optimizeLegibility;
}
html{ scroll-behavior:smooth; }
/* Squared-off editorial aesthetic — kill rounded corners site-wide */
.common__button,
.button,
.cards__item,
.number__module__items,
.resource__listing__item img,
.testimonial__item{
border-radius:0 !important;
}
/* Headings → Hanken, light weight, tight tracking */
.banner__heading__content h1,
.two__column__item__right h2,
.content__overlap__info h3,
.testimonial__wrapper h2,
.cta__content h2,
.cards__wrapper__heading h2,
.resource__listing h2{
font-family:var(--hc-font);
font-weight:300;
letter-spacing:-.02em;
line-height:1.07;
}
/* ---------------------------------------------------------------------
HEADER / NAV
--------------------------------------------------------------------- */
.site-header,
header.header{
position:sticky; top:0; z-index:60;
background:rgba(255,255,255,.86);
-webkit-backdrop-filter:saturate(140%) blur(14px);
backdrop-filter:saturate(140%) blur(14px);
border-bottom:1px solid var(--hc-line);
}
.header__nav .menu > .menu-item > a,
.main-navigation .menu > .menu-item > a{
font-family:var(--hc-font);
font-weight:500;
font-size:.93rem;
color:var(--hc-ink);
letter-spacing:.01em;
transition:color .2s ease;
}
.header__nav .menu > .menu-item > a:hover,
.main-navigation .menu > .menu-item > a:hover{
color:var(--hc-accent-strong);
}
/* dropdown panels — squared, hairline, soft shadow */
.header__nav .sub-menu,
.main-navigation .sub-menu{
border:1px solid var(--hc-line);
box-shadow:var(--hc-shadow-card);
border-radius:0;
}
.header__nav .sub-menu a:hover,
.main-navigation .sub-menu a:hover{ color:var(--hc-accent-strong); }
/* ---------------------------------------------------------------------
PRIMARY CTA BUTTON (copper, squared, white label)
.common__button is the single button class used site-wide.
--------------------------------------------------------------------- */
.common__button,
.common__button.button,
a.common__button,
.mobile__btn{
background:var(--hc-cta) !important;
color:var(--hc-cta-text) !important;
border:1px solid transparent !important;
border-radius:0 !important;
font-family:var(--hc-font);
font-weight:600;
letter-spacing:.01em;
box-shadow:0 12px 30px -14px var(--hc-cta-shadow);
transition:background .22s ease, box-shadow .22s ease;
}
.common__button:hover,
.common__button.button:hover,
a.common__button:hover,
.mobile__btn:hover{
background:var(--hc-cta-strong) !important;
color:#fff !important;
}
/* ---------------------------------------------------------------------
BANNER HEADING (hero)
NOTE: structural hero rebuild (light 2-col w/ figure + stat badge, or
dark stat-hero) is Phase 2 / pending Xiao. This restyles the existing
centered video hero to the new type + spacing only.
--------------------------------------------------------------------- */
.banner__heading__content h1{
font-size:clamp(2.6rem,4.8vw,4.4rem);
color:#ffffff;
}
.banner__heading__content__item p{
font-size:1.15rem;
line-height:1.6;
color:rgba(255,255,255,.86);
}
/* keep the dusk scrim readable behind light grotesque */
.banner__heading__overlay .banner__heading__bg::after{
content:""; position:absolute; inset:0;
background:linear-gradient(100deg, rgba(0,26,43,.78) 30%, rgba(0,26,43,.45) 100%);
}
.banner__heading__bg{ position:relative; }
/* ---------------------------------------------------------------------
NUMBER MODULE → stats band (light, hairline-divided)
Override the inline light-blue background; render numbers as large
Hanken 300 with cerulean unit highlight.
--------------------------------------------------------------------- */
.number__module__items.bg__shape,
.number__module__items{
background-color:transparent !important;
background:none !important;
display:grid;
grid-template-columns:repeat(3,1fr);
gap:0;
}
.number__module__item{
padding:8px 44px;
border-left:1px solid var(--hc-line);
}
.number__module__item:first-child{ border-left:0; padding-left:0; }
.number__module__item h4{
font-family:var(--hc-font);
font-weight:300;
letter-spacing:-.02em;
font-size:clamp(2.8rem,5vw,4.4rem);
line-height:1;
color:var(--hc-ink);
margin:0;
}
.number__module__item .number__heading{ color:var(--hc-ink); font-weight:300; }
.number__module__item > span{
display:inline-block;
font-family:var(--hc-font);
font-weight:300;
font-size:clamp(1.4rem,2.4vw,2rem);
color:var(--hc-accent-strong); /* the "Million+" unit in cerulean */
margin-left:2px;
}
.number__module__item p{
color:var(--hc-ink-soft);
font-size:.98rem;
margin-top:14px;
max-width:24ch;
}
@media (max-width:760px){
.number__module__items{ grid-template-columns:1fr; }
.number__module__item{ border-left:0; border-top:1px solid var(--hc-line); padding:26px 0; }
.number__module__item:first-child{ border-top:0; padding-top:0; }
}
/* ---------------------------------------------------------------------
TWO COLUMN (navy split — already on-brand navy)
--------------------------------------------------------------------- */
.two__column__wrapper{
background-color:var(--hc-navy) !important;
}
.two__column__item__right h2{
color:#ffffff !important;
font-size:clamp(1.9rem,3vw,2.7rem);
}
.two__column__item__content,
.two__column__item__content p,
.two__column__item__content span{
color:var(--hc-on-navy-soft) !important;
font-size:1.06rem;
line-height:1.65;
}
/* ---------------------------------------------------------------------
CONTENT OVERLAP
--------------------------------------------------------------------- */
.content__overlap__info h3{
font-family:var(--hc-font);
font-weight:400;
font-size:clamp(1.7rem,2.6vw,2.3rem);
letter-spacing:-.01em;
color:var(--hc-ink);
}
.content__overlap__info p,
.content__overlap__info p span{
color:var(--hc-ink-soft);
font-size:1.04rem;
line-height:1.65;
}
/* ---------------------------------------------------------------------
TESTIMONIALS → static 3-up grid (was carousel)
Override the carousel layout to a hairline-quiet grid. Cerulean rule
above each quote; muted author line.
--------------------------------------------------------------------- */
.testimonial__wrapper h2{
font-size:clamp(2rem,3.4vw,3rem);
color:var(--hc-ink);
margin-bottom:48px;
}
.testimonial__items{
display:grid !important;
grid-template-columns:repeat(3,1fr);
gap:1px !important;
background:var(--hc-line);
border:1px solid var(--hc-line);
transform:none !important; /* neutralise any carousel transform */
}
.testimonial__item{
background:var(--hc-paper);
padding:40px 36px;
margin:0 !important;
width:auto !important; /* neutralise carousel slide widths */
position:relative;
}
.testimonial__item::before{
content:""; display:block;
width:30px; height:2px; background:var(--hc-accent);
margin-bottom:22px;
}
.testimonial__item p{
color:var(--hc-ink);
font-size:1rem;
line-height:1.6;
}
.testimonial__author p,
.testimonial__author{
color:var(--hc-ink-faint);
font-size:.9rem;
}
.testimonial__author a{ color:var(--hc-accent-strong); }
/* show the first three in the grid; keep the rest available but de-emphasised */
.testimonial__item:nth-child(n+4){ display:none; }
@media (max-width:980px){
.testimonial__items{ grid-template-columns:1fr; }
.testimonial__item:nth-child(n+4){ display:block; }
}
/* ---------------------------------------------------------------------
CTA / "Hageman Capital Difference" → Solutions section (light)
Override inline light-blue bg → warm soft. Recolor the inline #2796D1
eyebrow to the new cerulean.
--------------------------------------------------------------------- */
.cta__wrapper{
background-color:var(--hc-soft) !important;
border-block:1px solid var(--hc-line);
}
.cta__content .text-lighterblue,
.cta__content span[style*="2796D1"]{
color:var(--hc-accent-strong) !important;
font-family:var(--hc-font);
font-weight:600;
letter-spacing:.22em;
font-size:.74rem;
}
.cta__content h2{
color:var(--hc-ink) !important;
font-size:clamp(2rem,3.4vw,3rem);
}
.cta__content p{ color:var(--hc-ink-soft); font-size:1.1rem; }
/* ---------------------------------------------------------------------
CARDS → feature grid (hairline-separated, numbered)
--------------------------------------------------------------------- */
.cards__wrapper__heading h2{
color:var(--hc-ink);
font-size:clamp(2rem,3.4vw,3rem);
}
.cards__items{
display:grid;
grid-template-columns:repeat(2,1fr);
gap:1px;
background:var(--hc-line);
border:1px solid var(--hc-line);
}
.cards__item{
background:var(--hc-paper);
padding:44px 40px;
counter-increment:hc-card;
position:relative;
}
.cards__item::before{
content:"0" counter(hc-card);
display:block;
font-family:var(--hc-font);
font-weight:300;
letter-spacing:.2em;
font-size:.95rem;
color:var(--hc-accent-strong);
margin-bottom:24px;
}
.cards__wrapper{ counter-reset:hc-card; }
.cards__item h3{
font-family:var(--hc-font);
font-weight:400;
font-size:1.4rem;
letter-spacing:-.01em;
color:var(--hc-ink);
margin:0 0 14px;
}
.cards__item__content,
.cards__item__content p,
.cards__item__content span{
color:var(--hc-ink-soft) !important;
font-size:1rem;
}
@media (max-width:760px){ .cards__items{ grid-template-columns:1fr; } }
/* ---------------------------------------------------------------------
RESOURCE LISTING → insights grid (squared cards, cerulean tags)
--------------------------------------------------------------------- */
.resource__listing__tagline,
.resource__listing span[style*="2796D1"]{
color:var(--hc-accent-strong) !important;
font-family:var(--hc-font);
font-weight:600;
letter-spacing:.18em;
text-transform:uppercase;
font-size:.74rem;
}
.resource__listing h2{
color:var(--hc-ink) !important;
font-size:clamp(2rem,3.4vw,3rem);
margin-bottom:48px;
}
.resource__listing__items{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:36px;
}
.resource__listing__item{
display:flex;
flex-direction:column;
border:0;
}
.resource__listing__item img{
aspect-ratio:16/10;
object-fit:cover;
width:100%;
}
.resource__listing__item__content{ padding-top:20px; }
.resource__listing__item__content > span{
font-size:.84rem; color:var(--hc-ink-faint);
}
.resource__listing__item h5{
font-family:var(--hc-font);
font-weight:400;
font-size:1.24rem;
line-height:1.3;
letter-spacing:-.01em;
margin:8px 0 12px;
}
.resource__listing__item h5 a{ color:var(--hc-ink); }
.resource__listing__item h5 a:hover{ color:var(--hc-accent-strong); }
.resource__listing__item p{ color:var(--hc-ink-soft); font-size:.98rem; }
@media (max-width:980px){ .resource__listing__items{ grid-template-columns:1fr; } }
/* ---------------------------------------------------------------------
FOOTER (navy-deep)
White logo via filter (proper asset swap is a template change — see README).
--------------------------------------------------------------------- */
.footer__bottom{
background:var(--hc-navy-deep);
color:var(--hc-on-navy-soft);
}
.footer__bottom .custom-logo,
.footer__logo .custom-logo{
filter:brightness(0) invert(1);
}
.footer__bottom__copyright p,
.footer__bottom__contact p{ color:var(--hc-on-navy-soft); }
.footer__bottom__contact h4{
color:#fff;
font-family:var(--hc-font);
font-weight:600;
letter-spacing:.18em;
text-transform:uppercase;
font-size:.74rem;
}
.footer__bottom a{ color:var(--hc-on-navy-soft); transition:color .2s ease; }
.footer__bottom a:hover{ color:#fff; }
.footer__bottom__menu a{ font-family:var(--hc-font); font-weight:500; }
/* ---------------------------------------------------------------------
SECTION RHYTHM (compact density)
--------------------------------------------------------------------- */
.number__module__wrapper,
.two__column__wrapper,
.content__overlap__wrapper,
.testimonial__wrapper,
.cta__wrapper,
.cards__wrapper,
.resource__listing{
padding-top:var(--hc-section-y);
padding-bottom:var(--hc-section-y);
}
/* ---------------------------------------------------------------------
GLOBAL ACCENT CLEANUP
Recolor any lingering old-blue helper classes to the new cerulean.
--------------------------------------------------------------------- */
.text-lighterblue{ color:var(--hc-accent-strong) !important; }
.text-darkblue{ color:var(--hc-ink) !important; }
a{ color:var(--hc-accent-strong); }
/* =====================================================================
HOMEPAGE HERO (signed-off light two-column hero)
Injected on the front page via the render_block filter in functions.php.
Namespaced .hc-* so it never collides with the parent banner block,
which is still restyled (above) for inner pages.
===================================================================== */
.hc-hero{
position:relative;
background:var(--hc-paper);
border-bottom:1px solid var(--hc-line);
}
.hc-hero-grid{
display:grid;
grid-template-columns:1.05fr .95fr;
gap:72px;
align-items:center;
padding:104px 0 110px;
}
.hc-hero-text{ min-width:0; }
.hc-eyebrow{
display:inline-flex; align-items:center; gap:12px;
font-family:var(--hc-font);
font-size:.74rem; font-weight:600; letter-spacing:.22em;
text-transform:uppercase; color:var(--hc-accent-strong);
margin:0 0 26px;
}
.hc-eyebrow::before{
content:""; width:26px; height:1px; background:var(--hc-accent);
display:inline-block;
}
.hc-hero h1.hc-display{
font-family:var(--hc-font);
font-weight:300; letter-spacing:-.02em; line-height:1.05;
font-size:clamp(2.7rem,4.9vw,4.6rem);
color:var(--hc-ink);
margin:0 0 26px;
}
.hc-hero h1 .hc-accent{
color:var(--hc-navy); font-style:italic; font-weight:300;
position:relative; display:inline-block;
}
.hc-hero h1 .hc-accent::after{
content:""; position:absolute; left:0; right:0; bottom:-2px;
height:3px; background:var(--hc-accent);
transform:scaleX(1); transform-origin:left center;
}
@media (prefers-reduced-motion:no-preference){
.hc-hero h1 .hc-accent::after{
transform:scaleX(0);
animation:hcDrawUnderline 1s cubic-bezier(.22,.7,.2,1) .55s forwards;
}
}
@keyframes hcDrawUnderline{ to{ transform:scaleX(1); } }
.hc-lead{
font-size:1.18rem; line-height:1.65; color:var(--hc-ink-soft);
font-weight:400; max-width:54ch; margin:0 0 38px;
}
.hc-hero-cta{ display:flex; align-items:center; gap:18px; flex-wrap:wrap; }
/* hero buttons (namespaced; copper primary + ghost) */
.hc-btn{
display:inline-flex; align-items:center; gap:10px;
font-family:var(--hc-font);
font-size:.96rem; font-weight:600; letter-spacing:.01em;
padding:16px 28px; border:1px solid transparent;
cursor:pointer; transition:.22s ease; white-space:nowrap;
border-radius:0;
}
.hc-btn .arw{ transition:transform .22s ease; }
.hc-btn:hover .arw{ transform:translateX(4px); }
.hc-btn-copper{
background:var(--hc-cta); color:#fff;
box-shadow:0 12px 30px -14px var(--hc-cta-shadow);
}
.hc-btn-copper:hover{ background:var(--hc-cta-strong); color:#fff; }
.hc-btn-ghost{ background:transparent; color:var(--hc-ink); border-color:var(--hc-line); }
.hc-btn-ghost:hover{ border-color:var(--hc-navy); }
/* hero figure + floating stat badge */
.hc-hero-figure{ position:relative; }
.hc-hero-img{
display:block; width:100%;
aspect-ratio:4/4.5; object-fit:cover;
}
.hc-hero-badge{
position:absolute; left:-34px; bottom:38px;
background:#fff; border:1px solid var(--hc-line);
box-shadow:var(--hc-shadow-card);
padding:22px 26px; min-width:210px;
}
.hc-hb-n{
font-family:var(--hc-font); font-weight:300;
font-size:2.4rem; color:var(--hc-ink); line-height:1;
}
.hc-hb-l{ font-size:.78rem; color:var(--hc-ink-soft); margin-top:8px; }
/* in-page anchor target for the "How it works" ghost button */
#how.hc-anchor{ display:block; scroll-margin-top:100px; height:0; }
@media (max-width:1080px){
.hc-hero-grid{ grid-template-columns:1fr; gap:48px; padding:72px 0 80px; }
.hc-hero-img{ aspect-ratio:16/10; }
.hc-hero-badge{ left:auto; right:24px; }
}
@media (max-width:760px){
.hc-hero h1.hc-display{ font-size:clamp(2.3rem,8vw,3rem); }
.hc-hero-badge{ position:static; margin-top:18px; min-width:0; }
}
/* =====================================================================
REBRAND BLOCKS — shared section primitives
Used by the native ACF blocks (Stats band, Track record, …).
===================================================================== */
.hc-section{ padding:var(--hc-section-y) 0; }
.hc-section-alt{ background:var(--hc-soft); border-block:1px solid var(--hc-line); }
.hc-display{
font-family:var(--hc-font); font-weight:300;
letter-spacing:-.02em; line-height:1.07; color:var(--hc-ink); margin:0;
}
.hc-sec-head-row{
display:flex; align-items:flex-end; justify-content:space-between;
gap:40px; margin-bottom:48px;
}
.hc-sec-head h2.hc-display{ font-size:clamp(2rem,3.4vw,3rem); margin:0; }
.hc-tlink{
display:inline-flex; align-items:center; gap:9px;
font-family:var(--hc-font); font-weight:600; font-size:.95rem;
color:var(--hc-accent-strong); white-space:nowrap; flex-shrink:0;
}
.hc-tlink .arw{ transition:transform .2s ease; }
.hc-tlink:hover .arw{ transform:translateX(4px); }
.hc-empty{ color:var(--hc-ink-faint); font-size:.95rem; }
/* ---------------------------------------------------------------------
BLOCK: HC — Stats band
--------------------------------------------------------------------- */
.hc-statband{ padding:78px 0; border-bottom:1px solid var(--hc-line); }
.hc-statband-grid{
display:grid;
grid-template-columns:repeat(var(--hc-stat-cols,3),1fr);
gap:0;
}
.hc-stat{ padding:0 44px; border-left:1px solid var(--hc-line); }
.hc-stat:first-child{ border-left:0; padding-left:0; }
.hc-stat-n{
font-family:var(--hc-font); font-weight:300; letter-spacing:-.02em;
font-size:clamp(3rem,5.2vw,4.6rem); line-height:1; color:var(--hc-ink);
}
.hc-stat-n b{ color:var(--hc-accent-strong); font-weight:300; }
.hc-stat-l{ font-size:.98rem; color:var(--hc-ink-soft); margin-top:16px; max-width:24ch; }
/* ---------------------------------------------------------------------
BLOCK: HC — Track record
--------------------------------------------------------------------- */
.hc-proj-grid{ display:grid; grid-template-columns:repeat(12,1fr); gap:28px; }
.hc-proj{
position:relative; overflow:hidden; display:block;
border:1px solid var(--hc-line); background:var(--hc-navy-deep);
}
.hc-proj-img{
width:100%;
background-size:cover; background-position:center;
background-image:
repeating-linear-gradient(135deg, rgba(255,255,255,.025) 0 2px, transparent 2px 11px),
linear-gradient(150deg, #14304a 0%, #0c2237 48%, #0a1c2e 100%);
}
.hc-proj-a{ grid-column:span 7; }
.hc-proj-b{ grid-column:span 5; }
.hc-proj-a .hc-proj-img,
.hc-proj-b .hc-proj-img{ aspect-ratio:16/10.5; }
.hc-proj-c, .hc-proj-d, .hc-proj-e{ grid-column:span 4; }
.hc-proj-c .hc-proj-img,
.hc-proj-d .hc-proj-img,
.hc-proj-e .hc-proj-img{ aspect-ratio:4/3; }
.hc-proj-cap{
position:absolute; inset:auto 0 0 0; z-index:2; padding:26px 28px;
background:linear-gradient(to top, rgba(8,20,33,.86), rgba(8,20,33,0));
}
.hc-pc-tag{ font-size:.72rem; letter-spacing:.18em; text-transform:uppercase; color:var(--hc-accent-soft); font-weight:600; }
.hc-pc-t{ font-family:var(--hc-font); font-weight:400; font-size:1.3rem; color:#fff; margin-top:8px; letter-spacing:-.01em; }
.hc-pc-m{ font-size:.86rem; color:var(--hc-on-navy-soft); margin-top:4px; }
@media (max-width:1080px){
.hc-proj-a, .hc-proj-b, .hc-proj-c, .hc-proj-d, .hc-proj-e{ grid-column:span 12; }
}
@media (max-width:760px){
.hc-statband-grid{ grid-template-columns:1fr; }
.hc-stat{ border-left:0; border-top:1px solid var(--hc-line); padding:30px 0; }
.hc-stat:first-child{ border-top:0; padding-top:0; }
.hc-sec-head-row{ flex-direction:column; align-items:flex-start; gap:18px; }
}
/* =====================================================================
REBRAND BLOCKS — v1.3.0 additions
Process steps · Split + checklist · Feature cards · Insights ·
Closing CTA · shared placeholder frames & figure tags
===================================================================== */
/* Section head variants */
.hc-sec-head-narrow{ max-width:640px; margin-bottom:56px; }
.hc-sec-head-narrow h2.hc-display{ font-size:clamp(2rem,3.4vw,3rem); }
.hc-sec-lead{
font-size:1.08rem; line-height:1.65; color:var(--hc-ink-soft);
margin:20px 0 0; max-width:56ch;
}
/* Placeholder frames (used while imagery is pending) */
.hc-ph{
background:
repeating-linear-gradient(135deg, rgba(255,255,255,.03) 0 2px, transparent 2px 11px),
linear-gradient(150deg, #14304a 0%, #0c2237 48%, #0a1c2e 100%);
}
.hc-ph-light{
background:
repeating-linear-gradient(135deg, rgba(0,38,61,.045) 0 2px, transparent 2px 11px),
linear-gradient(150deg, #f2efe8 0%, #eae6dc 100%);
border:1px solid var(--hc-line);
}
/* Figure caption tag (mono label pinned to the image) */
.hc-hero-figure, .hc-split-figure{ position:relative; }
.hc-fig-tag{
position:absolute; left:16px; bottom:16px; z-index:2;
font-family:var(--hc-mono);
font-size:.66rem; letter-spacing:.14em; text-transform:uppercase;
color:var(--hc-ink-soft);
background:rgba(255,255,255,.92);
border:1px solid var(--hc-line);
padding:6px 10px;
}
.hc-hero-figure .hc-fig-tag{ left:auto; right:16px; }
/* ---------------------------------------------------------------------
BLOCK: HC — Process steps
--------------------------------------------------------------------- */
.hc-steps{
display:grid;
grid-template-columns:repeat(var(--hc-step-cols,3),1fr);
gap:44px;
}
.hc-step-n{
display:flex; align-items:center; gap:14px;
font-family:var(--hc-font); font-weight:600;
font-size:.78rem; letter-spacing:.2em;
color:var(--hc-accent-strong);
margin-bottom:20px;
}
.hc-step .hc-step-n::after{
content:""; flex:1; height:1px; background:var(--hc-line);
}
.hc-step-t{
font-family:var(--hc-font); font-weight:400; letter-spacing:-.01em;
font-size:1.28rem; color:var(--hc-ink); margin:0 0 12px;
}
.hc-step-c{ font-size:.99rem; line-height:1.62; color:var(--hc-ink-soft); margin:0; }
/* ---------------------------------------------------------------------
BLOCK: HC — Split + checklist
--------------------------------------------------------------------- */
.hc-split-grid{
display:grid; grid-template-columns:.9fr 1.1fr;
gap:72px; align-items:center;
}
.hc-split-img{
display:block; width:100%;
aspect-ratio:16/11.5; object-fit:cover;
}
.hc-split-text h2.hc-display{ font-size:clamp(1.9rem,3.2vw,2.7rem); }
.hc-checklist{
list-style:none; margin:30px 0 34px; padding:0;
display:grid; gap:16px;
}
.hc-checklist li{
position:relative; padding-left:30px;
font-size:1.01rem; line-height:1.55; color:var(--hc-ink);
}
.hc-checklist li::before{
content:"✦"; position:absolute; left:0; top:1px;
color:var(--hc-accent); font-size:.85rem;
}
/* ---------------------------------------------------------------------
BLOCK: HC — Feature cards
--------------------------------------------------------------------- */
.hc-feature-grid{
display:grid;
grid-template-columns:repeat(var(--hc-card-cols,3),1fr);
gap:1px;
background:var(--hc-line);
border:1px solid var(--hc-line);
}
.hc-feature-card{
background:var(--hc-paper);
padding:44px 40px;
}
.hc-feature-card .hc-step-n::after{ content:none; }
.hc-fc-t{
font-family:var(--hc-font); font-weight:400; letter-spacing:-.01em;
font-size:1.32rem; color:var(--hc-ink); margin:0 0 12px;
}
.hc-fc-c{ font-size:.99rem; line-height:1.62; color:var(--hc-ink-soft); margin:0; }
/* ---------------------------------------------------------------------
BLOCK: HC — Insights
--------------------------------------------------------------------- */
.hc-insight-grid{
display:grid; grid-template-columns:repeat(3,1fr); gap:36px;
}
.hc-insight{ display:flex; flex-direction:column; }
.hc-insight-img{
width:100%; aspect-ratio:16/10;
background-size:cover; background-position:center;
background-image:
repeating-linear-gradient(135deg, rgba(255,255,255,.025) 0 2px, transparent 2px 11px),
linear-gradient(150deg, #14304a 0%, #0c2237 48%, #0a1c2e 100%);
border:1px solid var(--hc-line);
}
.hc-insight-body{ padding-top:20px; }
.hc-in-cat{
font-size:.72rem; font-weight:600; letter-spacing:.18em;
text-transform:uppercase; color:var(--hc-accent-strong);
}
.hc-in-t{
font-family:var(--hc-font); font-weight:400; letter-spacing:-.01em;
font-size:1.24rem; line-height:1.3; color:var(--hc-ink);
margin:10px 0 10px;
transition:color .2s ease;
}
.hc-insight:hover .hc-in-t{ color:var(--hc-accent-strong); }
.hc-in-x{ font-size:.97rem; line-height:1.6; color:var(--hc-ink-soft); margin:0 0 12px; }
.hc-in-meta{ font-size:.84rem; color:var(--hc-ink-faint); }
/* ---------------------------------------------------------------------
BLOCK: HC — Closing CTA (navy band)
--------------------------------------------------------------------- */
.hc-closing{
background:var(--hc-navy);
padding:96px 0;
}
.hc-closing-grid{
display:grid; grid-template-columns:1.2fr .8fr;
gap:64px; align-items:center;
}
.hc-eyebrow-onnavy{ color:var(--hc-accent-soft); }
.hc-eyebrow-onnavy::before{ background:var(--hc-accent-soft); }
.hc-display-onnavy{ color:#ffffff; font-size:clamp(2.1rem,3.6vw,3.2rem); }
.hc-closing-copy{
color:var(--hc-on-navy-soft); font-size:1.08rem; line-height:1.65;
margin:22px 0 0; max-width:48ch;
}
.hc-closing-actions{
display:flex; flex-direction:column; gap:16px;
align-items:stretch; justify-self:end; min-width:280px;
}
.hc-closing-actions .hc-btn{ justify-content:center; }
.hc-btn-ghost-onnavy{
background:transparent; color:#fff;
border:1px solid var(--hc-line-navy);
display:inline-flex; align-items:center; gap:10px;
font-family:var(--hc-font); font-size:.96rem; font-weight:600;
padding:16px 28px; border-radius:0; transition:.22s ease;
}
.hc-btn-ghost-onnavy:hover{ border-color:#fff; color:#fff; }
/* ---------------------------------------------------------------------
Responsive (new blocks)
--------------------------------------------------------------------- */
@media (max-width:1080px){
.hc-split-grid{ grid-template-columns:1fr; gap:44px; }
.hc-closing-grid{ grid-template-columns:1fr; gap:36px; }
.hc-closing-actions{ justify-self:start; flex-direction:row; flex-wrap:wrap; }
}
@media (max-width:980px){
.hc-steps{ grid-template-columns:1fr; gap:36px; }
.hc-feature-grid{ grid-template-columns:1fr; }
.hc-insight-grid{ grid-template-columns:1fr; }
}
/* =====================================================================
v1.3.1 — COLOR HARDENING
The parent theme styles links/headings with high-specificity selectors
(e.g. #main a), which outrank single-class block styles and bleed the
old blue into button labels and navy-section text. Force the color-
critical pieces so parent rules can't reach them.
===================================================================== */
/* Buttons — labels must never inherit link blue */
.hc-btn-copper,
.hc-btn-copper:hover,
.hc-btn-copper:focus,
.hc-btn-copper:visited{
color:#ffffff !important;
background:var(--hc-cta) !important;
}
.hc-btn-copper:hover{ background:var(--hc-cta-strong) !important; }
.hc-btn-ghost,
.hc-btn-ghost:visited{
color:var(--hc-ink) !important;
}
.hc-btn-ghost:hover,
.hc-btn-ghost:focus{
color:var(--hc-ink) !important;
border-color:var(--hc-navy) !important;
}
/* Ghost-on-navy — legibility pass: white label, brighter border, soft
fill on hover so it reads as a button, not a whisper */
.hc-btn-ghost-onnavy,
.hc-btn-ghost-onnavy:visited{
color:#ffffff !important;
border-color:rgba(255,255,255,.38) !important;
background:transparent !important;
}
.hc-btn-ghost-onnavy:hover,
.hc-btn-ghost-onnavy:focus{
color:#ffffff !important;
border-color:#ffffff !important;
background:rgba(255,255,255,.08) !important;
}
/* Navy sections — headings, eyebrows, copy must stay light */
.hc-closing .hc-display,
.hc-display-onnavy{
color:#ffffff !important;
}
.hc-closing .hc-eyebrow,
.hc-eyebrow-onnavy{
color:var(--hc-accent-soft) !important;
}
.hc-closing-copy{
color:var(--hc-on-navy-soft) !important;
}
/* Text links + card text that live inside wrappers — keep them out
of the parent link-color cascade */
.hc-tlink,
.hc-tlink:visited{ color:var(--hc-accent-strong) !important; }
.hc-in-t{ color:var(--hc-ink) !important; }
.hc-insight:hover .hc-in-t{ color:var(--hc-accent-strong) !important; }
.hc-in-cat{ color:var(--hc-accent-strong) !important; }
.hc-in-x{ color:var(--hc-ink-soft) !important; }
.hc-in-meta{ color:var(--hc-ink-faint) !important; }
/* v1.14.5: chip text sits on a paper chip now (TR7), not the dusk
gradient — guard stays (cards are wrappers) but pins ink-soft.
.hc-pc-tag / .hc-pc-m no longer output (merged into .hc-pc-meta). */
.hc-pc-t{ color:var(--hc-ink-soft) !important; }
.hc-pc-meta{ color:var(--hc-ink-soft) !important; }
/* Hero — same protections (copper/ghost handled above) */
.hc-hero .hc-display{ color:var(--hc-ink) !important; }
.hc-hero .hc-display .hc-accent{ color:var(--hc-navy) !important; }
.hc-eyebrow{ color:var(--hc-accent-strong); }
/* =====================================================================
v1.4.0 — HERO HEIGHT · NAV DROPDOWN SUBTEXT · FOOTER
===================================================================== */
/* Hero figure: cap height so text clears the fold (was 4/4.5 portrait) */
.hc-hero-img{
aspect-ratio:1/1;
max-height:560px;
object-fit:cover;
}
.hc-hero-grid{ padding:84px 0 88px; }
@media (max-width:1080px){
.hc-hero-img{ aspect-ratio:16/10; max-height:none; }
.hc-hero-grid{ padding:64px 0 72px; }
}
/* ---------------------------------------------------------------------
Nav dropdown panels — design-spec: roomy panel, title + gray subtext
--------------------------------------------------------------------- */
.header__nav .sub-menu,
.main-navigation .sub-menu{
min-width:300px;
padding:14px 10px;
background:#ffffff;
}
.header__nav .sub-menu li,
.main-navigation .sub-menu li{ margin:0; }
.header__nav .sub-menu a,
.main-navigation .sub-menu a{
display:block;
padding:11px 16px;
}
.hc-nav-t{
display:block;
font-family:var(--hc-font);
font-weight:500;
font-size:.95rem;
color:var(--hc-ink);
transition:color .18s ease;
}
.hc-nav-d{
display:block;
font-family:var(--hc-font);
font-weight:400;
font-size:.82rem;
line-height:1.45;
color:var(--hc-ink-faint);
margin-top:3px;
max-width:26ch;
}
.header__nav .sub-menu a:hover .hc-nav-t,
.main-navigation .sub-menu a:hover .hc-nav-t{
color:var(--hc-accent-strong);
}
/* ---------------------------------------------------------------------
Footer — design-spec navy: brand + Company / Resources / Contact
--------------------------------------------------------------------- */
.hc-footer{
background:var(--hc-navy-deep);
padding:78px 0 0;
}
.hc-footer-grid{
display:grid;
grid-template-columns:1.4fr 1fr 1fr 1fr;
gap:56px;
padding-bottom:64px;
}
.hc-footer-logo img{
height:30px; width:auto; display:block;
}
.hc-footer-blurb{
color:var(--hc-on-navy-soft) !important;
font-size:.95rem; line-height:1.65;
margin:22px 0 0; max-width:34ch;
}
.hc-footer-h{
font-family:var(--hc-font);
font-weight:600;
font-size:.72rem;
letter-spacing:.2em;
text-transform:uppercase;
color:#ffffff !important;
margin:0 0 20px;
}
.hc-footer-col ul{ list-style:none; margin:0; padding:0; display:grid; gap:13px; }
.hc-footer-col a,
.hc-footer-col a:visited{
color:var(--hc-on-navy-soft) !important;
font-size:.95rem;
transition:color .18s ease;
text-decoration:none;
}
.hc-footer-col a:hover{ color:#ffffff !important; }
.hc-footer-bar{
display:flex; align-items:center; justify-content:space-between;
gap:24px; flex-wrap:wrap;
border-top:1px solid var(--hc-line-navy);
padding:26px 0 30px;
}
.hc-footer-bar p{
color:var(--hc-on-navy-soft) !important;
font-size:.85rem; margin:0;
}
.hc-footer-legal{ display:flex; gap:26px; }
.hc-footer-legal a,
.hc-footer-legal a:visited{
color:var(--hc-on-navy-soft) !important;
font-size:.85rem; text-decoration:none;
}
.hc-footer-legal a:hover{ color:#ffffff !important; }
@media (max-width:1080px){
.hc-footer-grid{ grid-template-columns:1fr 1fr; gap:44px; }
}
@media (max-width:640px){
.hc-footer-grid{ grid-template-columns:1fr; gap:36px; }
}
/* =====================================================================
v1.5.0 — BLOCK: HC — Sub-topic nav
===================================================================== */
.hc-subnav-grid{
display:grid;
grid-template-columns:repeat(var(--hc-subnav-cols,3),1fr);
gap:1px;
background:var(--hc-line);
border:1px solid var(--hc-line);
}
.hc-subnav-card{
position:relative;
display:flex; flex-direction:column;
background:var(--hc-paper);
padding:36px 34px 30px;
text-decoration:none;
transition:background .18s ease;
}
.hc-subnav-card:hover{ background:var(--hc-soft); }
.hc-subnav-t{
font-family:var(--hc-font); font-weight:500;
font-size:1.18rem; letter-spacing:-.01em;
color:var(--hc-ink) !important;
transition:color .18s ease;
}
.hc-subnav-card:hover .hc-subnav-t{ color:var(--hc-accent-strong) !important; }
.hc-subnav-d{
font-size:.95rem; line-height:1.55;
color:var(--hc-ink-soft) !important;
margin-top:10px;
}
.hc-subnav-a{
margin-top:22px;
color:var(--hc-accent-strong) !important;
display:inline-flex;
}
.hc-subnav-card .arw{ transition:transform .2s ease; }
.hc-subnav-card:hover .arw{ transform:translateX(4px); }
@media (max-width:980px){
.hc-subnav-grid{ grid-template-columns:1fr; }
}
/* =====================================================================
v1.5.1 — NAV DROPDOWN SPACING (match design spec)
Staging rendered the panel ~200px wide with cramped rows because parent
sub-menu width/padding rules outrank the earlier pass. Force the spec:
wide panel, roomy rows, larger title, no inter-item dividers.
===================================================================== */
.header__nav .sub-menu,
.main-navigation .sub-menu{
min-width:420px !important;
width:max-content !important;
max-width:520px !important;
padding:22px 14px !important;
background:#ffffff !important;
border:1px solid var(--hc-line) !important;
box-shadow:var(--hc-shadow-card) !important;
border-radius:0 !important;
}
.header__nav .sub-menu li,
.main-navigation .sub-menu li{
margin:0 !important;
border:0 !important; /* kill inherited hairline dividers */
border-bottom:0 !important;
}
.header__nav .sub-menu li + li,
.main-navigation .sub-menu li + li{
border-top:0 !important;
}
.header__nav .sub-menu a,
.main-navigation .sub-menu a{
display:block !important;
padding:16px 22px !important;
white-space:normal !important;
}
.hc-nav-t{
font-size:1.06rem !important; /* spec: larger title */
font-weight:500 !important;
color:var(--hc-ink) !important;
line-height:1.35 !important;
}
.hc-nav-d{
font-size:.92rem !important;
line-height:1.5 !important;
color:var(--hc-ink-faint) !important;
margin-top:6px !important;
max-width:38ch !important; /* spec: two-line wrap, not three */
}
/* items without descriptions in the same panel keep consistent rhythm */
.header__nav .sub-menu a:not(.hc-nav-sub),
.main-navigation .sub-menu a:not(.hc-nav-sub){
font-size:1.06rem !important;
font-weight:500 !important;
color:var(--hc-ink) !important;
}
.header__nav .sub-menu a:not(.hc-nav-sub):hover,
.main-navigation .sub-menu a:not(.hc-nav-sub):hover{
color:var(--hc-accent-strong) !important;
}
/* =====================================================================
v1.6.0 — BLOCK: HC — Quotes (static testimonial grid)
===================================================================== */
.hc-quote-grid{
display:grid;
grid-template-columns:repeat(var(--hc-quote-cols,3),1fr);
gap:1px;
background:var(--hc-line);
border:1px solid var(--hc-line);
}
.hc-quote{
background:var(--hc-paper);
padding:40px 36px;
}
.hc-quote::before{
content:""; display:block;
width:30px; height:2px; background:var(--hc-accent);
margin-bottom:22px;
}
.hc-quote-q{
font-size:1rem; line-height:1.62;
color:var(--hc-ink) !important;
margin:0 0 18px;
}
.hc-quote-a{
font-size:.9rem;
color:var(--hc-ink-faint) !important;
margin:0;
}
@media (max-width:980px){
.hc-quote-grid{ grid-template-columns:1fr; }
}
/* v1.6.1 — split-checklist flip (image right) */
.hc-split-flip .hc-split-grid{ direction:rtl; }
.hc-split-flip .hc-split-grid > *{ direction:ltr; }
/* =====================================================================
v1.7.0 — SUB-TOPIC NAV: right-side column + entrance animations
---------------------------------------------------------------------
Layout is always on. Motion is doubly gated: behind .hc-js on
(added by assets/js/hc-reveal.js — no JS means nothing ever hides)
and behind prefers-reduced-motion:no-preference. Angular language
throughout: butt caps, miter joins, square markers, no curves.
===================================================================== */
/* ---- layout ---- */
.hc-subnav-head-grid{
display:grid;
grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
gap:64px;
align-items:center;
}
.hc-subnav-has-side .hc-sec-head-narrow{ max-width:none; }
.hc-subnav-head-grid + .hc-subnav-grid{ margin-top:56px; }
/* ---- side: image (squared, offset navy frame) ---- */
.hc-sn-image{
position:relative;
padding:18px 18px 0 0;
}
.hc-sn-frame{
position:absolute; top:0; right:0;
width:82%; height:86%;
border:1.5px solid var(--hc-navy);
}
.hc-sn-fig{
position:relative; margin:0 14px 0 auto;
width:86%;
}
.hc-sn-fig img{
display:block; width:100%; height:auto;
aspect-ratio:4/3; object-fit:cover;
border-radius:0;
}
/* ---- side: motif ---- */
.hc-sn-motif{ display:flex; justify-content:center; }
.hc-motif{ width:100%; max-width:380px; height:auto; overflow:visible; }
.hc-motif *{ stroke-linecap:butt; stroke-linejoin:miter; vector-effect:non-scaling-stroke; }
.mo-base{ stroke:var(--hc-line); stroke-width:1; }
.mo-dash{ stroke:var(--hc-navy); stroke-width:1; stroke-dasharray:4 7; opacity:.45; }
.mo-stroke rect, .mo-stroke line{ fill:none; stroke:var(--hc-accent); stroke-width:1.5; }
.mo-pin{ stroke-width:1; opacity:.6; }
.mo-fill{ fill:var(--hc-cta); stroke:var(--hc-cta); stroke-width:1.5; }
.mo-ant{ stroke:var(--hc-navy); stroke-width:1.5; }
.mo-path{ fill:none; stroke:var(--hc-navy); stroke-width:2; }
.mo-mark, .mo-tick{ fill:var(--hc-navy); }
.mo-nodes .mo-n{ fill:var(--hc-paper); stroke:var(--hc-accent); stroke-width:1.5; }
.mo-nodes .mo-n-final{ fill:var(--hc-cta); stroke:var(--hc-cta); }
.mo-grid rect, .mo-grid line{ fill:none; stroke:var(--hc-ink-faint); stroke-width:1; }
.mo-parcel{ fill:var(--hc-cta); }
.mo-ring{ fill:none; stroke:var(--hc-cta); stroke-width:1; }
.mo-ring-2{ stroke:var(--hc-navy); opacity:.35; }
.mo-ghost{ fill:none; stroke:var(--hc-navy); stroke-width:1; opacity:.5; }
/* ---- side: on-this-page anchors ---- */
.hc-sn-anchors{
border-left:1px solid var(--hc-line);
padding-left:32px;
max-width:340px; margin-left:auto;
}
.hc-sn-anchors-h{
font-family:var(--hc-mono);
font-size:.68rem; letter-spacing:.2em; text-transform:uppercase;
color:var(--hc-ink-faint);
margin-bottom:14px;
}
.hc-sn-anchors ol{ list-style:none; margin:0; padding:0; }
.hc-sn-anchors li{ border-bottom:1px solid var(--hc-line); }
.hc-sn-anchors li:last-child{ border-bottom:0; }
.hc-sn-anchors a{
display:flex; align-items:baseline; gap:14px;
padding:13px 0;
font-family:var(--hc-font); font-weight:400;
font-size:1.02rem; color:var(--hc-ink);
text-decoration:none;
transition:color .18s ease;
}
.hc-sn-anchors a:hover{ color:var(--hc-accent-strong); }
.hc-sn-num{
font-family:var(--hc-mono);
font-size:.72rem; color:var(--hc-cta);
letter-spacing:.06em;
}
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }
/* ---- entrance animations (gated: .hc-js + motion OK) ---- */
@media (prefers-reduced-motion:no-preference){
/* text: rule draws out, then eyebrow → heading → lead stagger up */
.hc-js .hc-subnav.hc-anim .hc-eyebrow::before{
width:0;
transition:width .7s cubic-bezier(.22,.7,.2,1) .1s;
}
.hc-js .hc-subnav.hc-anim .hc-eyebrow,
.hc-js .hc-subnav.hc-anim .hc-display,
.hc-js .hc-subnav.hc-anim .hc-sec-lead{
opacity:0; transform:translateY(16px);
transition:opacity .6s ease, transform .6s cubic-bezier(.22,.7,.2,1);
}
.hc-js .hc-subnav.hc-anim .hc-eyebrow{ transition-delay:.05s; }
.hc-js .hc-subnav.hc-anim .hc-display{ transition-delay:.2s; }
.hc-js .hc-subnav.hc-anim .hc-sec-lead{ transition-delay:.35s; }
.hc-js .hc-subnav.hc-anim.hc-in .hc-eyebrow::before{ width:26px; }
.hc-js .hc-subnav.hc-anim.hc-in .hc-eyebrow,
.hc-js .hc-subnav.hc-anim.hc-in .hc-display,
.hc-js .hc-subnav.hc-anim.hc-in .hc-sec-lead{
opacity:1; transform:none;
}
/* image: wipe reveal, then the navy frame fades in */
.hc-js .hc-subnav.hc-anim .hc-sn-fig{
clip-path:inset(0 0 100% 0);
transition:clip-path .9s cubic-bezier(.22,.7,.2,1) .35s;
}
.hc-js .hc-subnav.hc-anim .hc-sn-frame{
opacity:0;
transition:opacity .8s ease .95s;
}
.hc-js .hc-subnav.hc-anim.hc-in .hc-sn-fig{ clip-path:inset(0 0 0 0); }
.hc-js .hc-subnav.hc-anim.hc-in .hc-sn-frame{ opacity:1; }
/* motif: bars/buildings rise staggered (--d index), lines draw, marks land */
.hc-js .hc-subnav.hc-anim .mo-b{
opacity:0; transform:translateY(12px);
transition:opacity .5s ease calc(.35s + var(--d,0) * .13s),
transform .5s cubic-bezier(.22,.7,.2,1) calc(.35s + var(--d,0) * .13s);
}
.hc-js .hc-subnav.hc-anim.hc-in .mo-b{ opacity:1; transform:none; }
.hc-js .hc-subnav.hc-anim .mo-path{
stroke-dasharray:520; stroke-dashoffset:520;
transition:stroke-dashoffset 1.2s cubic-bezier(.22,.7,.2,1) 1.15s;
}
.hc-js .hc-subnav.hc-anim.hc-in .mo-path{ stroke-dashoffset:0; }
.hc-js .hc-subnav.hc-anim .mo-mark,
.hc-js .hc-subnav.hc-anim .mo-tick{
opacity:0; transition:opacity .3s ease 2.2s;
}
.hc-js .hc-subnav.hc-anim.hc-in .mo-mark,
.hc-js .hc-subnav.hc-anim.hc-in .mo-tick{ opacity:1; }
.hc-js .hc-subnav.hc-anim .mo-ghost,
.hc-js .hc-subnav.hc-anim .mo-dash,
.hc-js .hc-subnav.hc-anim .mo-base{
opacity:0; transition:opacity .6s ease .25s;
}
.hc-js .hc-subnav.hc-anim.hc-in .mo-base{ opacity:1; }
.hc-js .hc-subnav.hc-anim.hc-in .mo-dash{ opacity:.45; }
.hc-js .hc-subnav.hc-anim.hc-in .mo-ghost{ opacity:.5; }
.hc-js .hc-subnav.hc-anim .mo-nodes .mo-n{
opacity:0; transform:translateY(8px);
transition:opacity .4s ease calc(1.3s + var(--d,0) * .18s),
transform .4s cubic-bezier(.22,.7,.2,1) calc(1.3s + var(--d,0) * .18s);
}
.hc-js .hc-subnav.hc-anim.hc-in .mo-nodes .mo-n{ opacity:1; transform:none; }
.hc-js .hc-subnav.hc-anim .mo-grid rect,
.hc-js .hc-subnav.hc-anim .mo-grid line{
opacity:0; transition:opacity .7s ease .3s;
}
.hc-js .hc-subnav.hc-anim.hc-in .mo-grid rect,
.hc-js .hc-subnav.hc-anim.hc-in .mo-grid line{ opacity:1; }
.hc-js .hc-subnav.hc-anim .mo-parcel{
opacity:0; transition:opacity .5s ease 1.05s;
}
.hc-js .hc-subnav.hc-anim.hc-in .mo-parcel{ opacity:1; }
.hc-js .hc-subnav.hc-anim .mo-ring{
opacity:0; transform:scale(.72);
transform-box:fill-box; transform-origin:center;
transition:opacity .5s ease, transform .7s cubic-bezier(.22,.7,.2,1);
}
.hc-js .hc-subnav.hc-anim .mo-ring-1{ transition-delay:1.35s; }
.hc-js .hc-subnav.hc-anim .mo-ring-2{ transition-delay:1.55s; }
.hc-js .hc-subnav.hc-anim.hc-in .mo-ring{ transform:scale(1); }
.hc-js .hc-subnav.hc-anim.hc-in .mo-ring-1{ opacity:1; }
.hc-js .hc-subnav.hc-anim.hc-in .mo-ring-2{ opacity:.35; }
/* anchors: staggered slide-in from the divider */
.hc-js .hc-subnav.hc-anim .hc-sn-anchors-h{
opacity:0; transition:opacity .5s ease .4s;
}
.hc-js .hc-subnav.hc-anim .hc-sn-anchors li{
opacity:0; transform:translateX(-14px);
transition:opacity .5s ease calc(.5s + var(--i,0) * .12s),
transform .5s cubic-bezier(.22,.7,.2,1) calc(.5s + var(--i,0) * .12s);
}
.hc-js .hc-subnav.hc-anim.hc-in .hc-sn-anchors-h{ opacity:1; }
.hc-js .hc-subnav.hc-anim.hc-in .hc-sn-anchors li{ opacity:1; transform:none; }
}
/* ---- responsive ---- */
@media (max-width:980px){
.hc-subnav-head-grid{ grid-template-columns:1fr; gap:40px; }
.hc-sn-image{ max-width:480px; }
.hc-motif{ max-width:320px; }
.hc-sn-anchors{ margin-left:0; max-width:none; }
}
/* =====================================================================
v1.7.1 — QA BATCH
===================================================================== */
/* ---- QA 1: Split + Checklist bullets — kill the inherited discs so
only the cerulean diamond renders (parent list styles outrank us on
specificity, hence !important + ::marker). ---- */
.hc-checklist,
.hc-checklist li{
list-style:none !important;
}
.hc-checklist{ padding:0 !important; margin-left:0 !important; }
.hc-checklist li::marker{ content:"" !important; }
/* ---- QA 3: nav dropdown smoothing — replace the parent's janky
reveal with a compositor-only opacity/translate transition. The panel
stays in the DOM (no display toggling = no layout hitch); visibility
handles focus/AT. Desktop only — the mobile drawer is untouched. ---- */
@media (min-width:981px){
.header__nav .menu-item-has-children > .sub-menu,
.main-navigation .menu-item-has-children > .sub-menu{
display:block !important;
opacity:0 !important;
visibility:hidden !important;
transform:translateY(10px);
pointer-events:none;
max-height:none !important;
transition:opacity .18s ease,
transform .24s cubic-bezier(.22,.7,.2,1),
visibility 0s linear .24s !important;
will-change:opacity, transform;
}
.header__nav .menu-item-has-children:hover > .sub-menu,
.header__nav .menu-item-has-children:focus-within > .sub-menu,
.main-navigation .menu-item-has-children:hover > .sub-menu,
.main-navigation .menu-item-has-children:focus-within > .sub-menu{
opacity:1 !important;
visibility:visible !important;
transform:translateY(0);
pointer-events:auto;
transition:opacity .18s ease,
transform .24s cubic-bezier(.22,.7,.2,1),
visibility 0s !important;
}
@media (prefers-reduced-motion:reduce){
.header__nav .menu-item-has-children > .sub-menu,
.main-navigation .menu-item-has-children > .sub-menu{
transform:none; transition:none !important;
}
}
}
/* ---- QA 4: trailing empty grid cells (Quotes, Feature cards) —
drifting angular pinstripes in brand navy, right to left. Seamless
200-unit loop; static hairlines under reduced motion / no support. ---- */
.hc-cell-fill{
position:relative;
background:var(--hc-soft);
overflow:hidden;
min-height:180px;
}
.hc-fill-lines{
position:absolute; inset:0;
width:100%; height:100%;
display:block;
}
.hc-fill-lines path{
fill:none;
stroke:var(--hc-navy);
stroke-width:1.5;
stroke-linecap:butt; stroke-linejoin:miter;
vector-effect:non-scaling-stroke;
}
.hc-fl{ opacity:.20; }
.hc-fl:nth-of-type(2){ opacity:.13; }
.hc-fl:nth-of-type(3){ opacity:.08; }
@media (prefers-reduced-motion:no-preference){
.hc-fl{
animation:hcFlDrift var(--fs,18s) linear infinite;
animation-delay:var(--fd,0s);
}
}
@keyframes hcFlDrift{
from{ transform:translateX(0); }
to{ transform:translateX(-200px); }
}
/* ---- QA 5: Split + Checklist white background variant ---- */
.hc-split-white{
background:var(--hc-paper);
border-block:0;
}
/* ---- QA 7: stacked alt sections — drop the hairline between two
consecutive beige sections so they read as one continuous band. ---- */
.hc-section-alt + .hc-section-alt{ border-top:0; }
/* and don't double-stack a white split against an alt hairline */
.hc-split-white + .hc-section-alt{ border-top:1px solid var(--hc-line); }
/* ---- QA 6: legacy module typography harmonization — bring the old
parent modules (accordion et al.) onto the rebrand type system so
mixed pages stop looking disjointed. !important beats the inline
color styles the parent emits on eyebrow spans. ---- */
.accordion__wrapper .accordion__content > span{
display:inline-flex; align-items:center; gap:12px;
font-family:var(--hc-font) !important;
font-size:.74rem !important; font-weight:600 !important;
letter-spacing:.22em !important; text-transform:uppercase;
color:var(--hc-accent-strong) !important;
margin:0 0 26px;
}
.accordion__wrapper .accordion__content > span::before{
content:""; width:26px; height:1px;
background:var(--hc-accent);
display:inline-block;
}
.accordion__wrapper h2{
font-family:var(--hc-font) !important;
font-weight:300 !important;
letter-spacing:-.02em !important;
line-height:1.07 !important;
font-size:clamp(2rem,3.4vw,3rem) !important;
color:var(--hc-ink) !important;
margin:0 0 34px;
}
.accordion__wrapper .accordion__item__title h4{
font-family:var(--hc-font) !important;
font-weight:400 !important;
letter-spacing:-.01em !important;
font-size:1.15rem !important;
color:var(--hc-ink) !important;
}
.accordion__wrapper .accordion__item__contant p{
font-family:var(--hc-font) !important;
font-size:1rem; line-height:1.62;
color:var(--hc-ink-soft) !important;
}
.accordion__wrapper .accordion__item{
border:1px solid var(--hc-line);
border-radius:0 !important;
background:var(--hc-paper);
}
/* ---- QA v1.7.1 addenda ----------------------------------------------
(a) Sub-topic nav: an items repeater with no valid links must render
no grid at all — an empty hairline grid collapses into a stray
full-width line under the module. Template now filters rows; this is
the belt-and-suspenders guard.
(b) Stacked beige sections: the earlier rule killed the SECOND
section's border-top but the FIRST section's border-bottom still drew
the line. :has() removes it so consecutive alts read as one band. */
.hc-subnav-grid:empty{ display:none; border:0; background:transparent; }
.hc-section-alt:has(+ .hc-section-alt){ border-bottom:0; }
/* =====================================================================
CONTACT SPLIT (acf/hc-contact-split) — added v1.9.0
Asymmetric sticky info rail + restyled HubSpot v2 embed. Replaces the
legacy .contact__cta__wrapper 50/50 module.
===================================================================== */
.hc-contact-split{ padding:96px 0 120px; background:var(--hc-paper); }
.hc-contact-grid{
display:grid;
grid-template-columns:5fr 7fr;
gap:48px 88px;
align-items:start;
}
/* --- Left rail (sticky) --- */
.hc-contact-rail{ position:sticky; top:128px; }
.hc-contact-split .hc-display-sm{
font-family:var(--hc-font);
font-size:clamp(28px,3.2vw,40px);
font-weight:300;
line-height:1.12;
color:var(--hc-navy);
margin:0 0 20px;
}
.hc-contact-intro p{
font-size:16px; font-weight:300; line-height:1.65;
color:var(--hc-ink-soft); margin:0 0 14px;
}
.hc-contact-steps{
list-style:none; margin:40px 0 0; padding:0;
border-top:1px solid var(--hc-line);
}
.hc-contact-step{
display:flex; gap:20px; padding:22px 0;
border-bottom:1px solid var(--hc-line);
}
.hc-contact-step-n{
font-family:var(--hc-mono); font-size:13px; color:var(--hc-cta);
line-height:1.9; flex:0 0 auto;
}
.hc-contact-step-t{
font-size:16px; font-weight:500; color:var(--hc-navy);
margin:0 0 4px; line-height:1.35;
}
.hc-contact-step-d{
font-size:14px; font-weight:300; line-height:1.55;
color:var(--hc-ink-soft); margin:0;
}
.hc-contact-direct{ margin-top:36px; }
.hc-contact-direct .hc-eyebrow{ margin-bottom:10px; }
.hc-contact-direct-link{
display:block; font-size:17px; font-weight:400;
color:var(--hc-navy); text-decoration:none; border-bottom:none;
padding:2px 0; transition:color .18s ease;
}
.hc-contact-direct-link:hover{ color:var(--hc-accent); }
/* --- Right: HubSpot form panel --- */
.hc-contact-form-wrap{
background:var(--hc-soft);
border:1px solid var(--hc-line);
padding:48px;
}
/* Flatten HubSpot fieldsets into one grid so field pairing is ours. */
.hc-contact-form form.hs-form{
display:grid; grid-template-columns:1fr 1fr;
column-gap:28px; row-gap:0;
}
.hc-contact-form form.hs-form fieldset{
display:contents; max-width:none; border:0; margin:0; padding:0;
}
.hc-contact-form .hs-form-field{
width:100% !important; float:none !important;
margin-bottom:26px; grid-column:span 1;
}
.hc-contact-form .hs-fieldtype-select,
.hc-contact-form .hs-fieldtype-textarea,
.hc-contact-form .hs-fieldtype-checkbox,
.hc-contact-form .hs-fieldtype-radio,
.hc-contact-form .hs-richtext,
.hc-contact-form .legal-consent-container,
.hc-contact-form .hs_error_rollup,
.hc-contact-form .hs_recaptcha,
.hc-contact-form .hs-submit{ grid-column:1 / -1; }
.hc-contact-form .hs-form-field > label{
display:block; font-size:11px; font-weight:500;
letter-spacing:.14em; text-transform:uppercase;
color:var(--hc-navy); margin-bottom:6px;
}
.hc-contact-form .hs-form-required{ color:var(--hc-cta); margin-left:2px; }
.hc-contact-form .hs-input:not([type='checkbox']):not([type='radio']):not([type='file']){
width:100% !important; box-sizing:border-box; background:transparent;
border:0; border-bottom:1px solid var(--hc-ink-faint); border-radius:0;
padding:10px 0 12px; font-family:var(--hc-font); font-size:16px;
font-weight:300; color:var(--hc-navy); transition:border-color .18s ease;
appearance:none; -webkit-appearance:none; outline:none;
}
.hc-contact-form .hs-input::placeholder{ color:var(--hc-ink-faint); }
.hc-contact-form .hs-input:not([type='checkbox']):not([type='radio']):focus{
border-bottom-color:var(--hc-accent); box-shadow:0 1px 0 0 var(--hc-accent);
}
.hc-contact-form select.hs-input{
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%2300263d' stroke-width='1.5'/%3E%3C/svg%3E");
background-repeat:no-repeat; background-position:right 4px center;
padding-right:28px; cursor:pointer;
}
.hc-contact-form textarea.hs-input{
min-height:96px; resize:vertical;
border:1px solid var(--hc-ink-faint); padding:12px 14px;
}
.hc-contact-form textarea.hs-input:focus{ border-color:var(--hc-accent); box-shadow:none; }
.hc-contact-form .inputs-list{ list-style:none; margin:4px 0 0; padding:0; }
.hc-contact-form .inputs-list li{ margin-bottom:8px; }
.hc-contact-form .inputs-list label{
display:flex; align-items:flex-start; gap:10px;
font-size:14px; font-weight:300; color:var(--hc-ink);
text-transform:none; letter-spacing:0;
}
.hc-contact-form input[type='checkbox'].hs-input,
.hc-contact-form input[type='radio'].hs-input{
accent-color:var(--hc-cta); width:16px; height:16px;
margin-top:2px; flex:0 0 auto;
}
.hc-contact-form .hs-error-msg,
.hc-contact-form .hs-error-msgs label{
font-size:12px; font-weight:400; letter-spacing:0; text-transform:none;
color:#b3392e; margin-top:6px;
}
.hc-contact-form .hs-input.invalid.error{ border-bottom-color:#b3392e; }
.hc-contact-form .hs_error_rollup .hs-error-msgs label{ font-size:13px; }
.hc-contact-form .hs-richtext,
.hc-contact-form .legal-consent-container p{
font-size:13px; font-weight:300; line-height:1.55; color:var(--hc-ink-soft);
}
.hc-contact-form .hs-submit{ margin-top:8px; }
.hc-contact-form .hs-button{
display:inline-block; background:var(--hc-cta); color:var(--hc-cta-text);
border:1px solid var(--hc-cta); border-radius:0; font-family:var(--hc-font);
font-size:15px; font-weight:500; letter-spacing:.02em; line-height:1;
padding:17px 36px; cursor:pointer;
transition:background-color .18s ease, border-color .18s ease;
appearance:none; -webkit-appearance:none;
}
.hc-contact-form .hs-button:hover{ background:var(--hc-cta-strong); border-color:var(--hc-cta-strong); }
.hc-contact-form .hs-button:focus-visible{ outline:2px solid var(--hc-accent); outline-offset:3px; }
.hc-contact-form .submitted-message{
font-size:17px; font-weight:300; line-height:1.6;
color:var(--hc-navy); padding:24px 0;
}
.hc-contact-form .hs_recaptcha{ margin-bottom:20px; }
.hc-contact-form-placeholder{
padding:24px; border:1px dashed var(--hc-accent);
color:var(--hc-navy); font-size:13px;
}
@media (max-width:1024px){
.hc-contact-grid{ gap:48px 56px; }
.hc-contact-form-wrap{ padding:36px; }
}
@media (max-width:860px){
.hc-contact-grid{ grid-template-columns:1fr; }
.hc-contact-rail{ position:static; }
.hc-contact-split{ padding:64px 0 80px; }
}
@media (max-width:560px){
.hc-contact-form form.hs-form{ grid-template-columns:1fr; }
.hc-contact-form-wrap{ padding:28px 20px; }
.hc-contact-form .hs-button{ width:100%; text-align:center; }
}
@media (prefers-reduced-motion:reduce){
.hc-contact-form .hs-input,
.hc-contact-form .hs-button,
.hc-contact-direct-link{ transition:none; }
}
/* =====================================================================
INSIGHTS — index listing + single post reskin — added v1.9.0
Pure overrides on parent-theme markup; AJAX-appended items inherit.
===================================================================== */
/* ---- INDEX: listing grid ---- */
.blog__listing__wrapper{ background:var(--hc-paper); }
.blog__listing__items{
display:grid !important;
grid-template-columns:repeat(3,1fr);
gap:64px 40px; position:relative;
}
.blog__listing__items .ajax__loader{ grid-column:1 / -1; }
.blog__listing__item{
background:transparent !important; border:0 !important;
border-radius:0 !important; box-shadow:none !important; padding:0 !important;
display:flex; flex-direction:column;
border-top:1px solid var(--hc-line) !important; padding-top:24px !important;
}
.blog__listing__item > a:first-of-type{ display:block; overflow:hidden; order:2; position:relative; }
.blog__listing__item > a:first-of-type img{
width:100%; aspect-ratio:3 / 2; object-fit:cover;
border-radius:0 !important; display:block; transition:transform .4s ease;
}
.blog__listing__item:hover > a:first-of-type img{ transform:scale(1.03); }
.blog__listing__item__content{ order:1; padding:0 0 18px !important; flex:0 0 auto; }
.blog__listing__item__content span{
display:block; font-family:var(--hc-mono); font-size:12px;
letter-spacing:.08em; text-transform:uppercase; color:var(--hc-cta);
margin-bottom:12px;
}
.blog__listing__item__content h5{ margin:0 0 10px; }
.blog__listing__item__content h5 a{
font-family:var(--hc-font); font-size:21px; font-weight:300; line-height:1.3;
color:var(--hc-navy) !important; text-decoration:none; transition:color .18s ease;
}
.blog__listing__item__content h5 a:hover{ color:var(--hc-accent) !important; }
.blog__listing__item__content p{
font-size:14px; font-weight:300; line-height:1.6; color:var(--hc-ink-soft);
margin:0; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
overflow:hidden;
}
.blog__listing__item > a.common__button{
order:3; background:transparent !important; border:0 !important;
border-radius:0 !important; box-shadow:none !important; color:var(--hc-cta) !important;
font-family:var(--hc-font); font-size:13px; font-weight:500; letter-spacing:.1em;
text-transform:uppercase; padding:16px 0 0 !important; margin:0 !important;
width:auto !important; align-self:flex-start; transition:color .18s ease;
}
.blog__listing__item > a.common__button::after{
content:'\2192'; margin-left:8px; transition:margin-left .18s ease;
}
.blog__listing__item > a.common__button:hover{ color:var(--hc-navy) !important; }
.blog__listing__item > a.common__button:hover::after{ margin-left:12px; }
/* Featured lead — first post as 7/5 editorial split */
.blog__listing__items > .ajax__loader + .blog__listing__item{
grid-column:1 / -1; display:grid;
grid-template-columns:7fr 5fr; grid-template-rows:1fr auto;
gap:8px 56px; align-items:start;
border-top:0 !important; padding-top:0 !important; margin-bottom:16px;
}
.blog__listing__items > .ajax__loader + .blog__listing__item > a:first-of-type{
grid-column:1; grid-row:1 / 3; order:0;
}
.blog__listing__items > .ajax__loader + .blog__listing__item > a:first-of-type img{ aspect-ratio:16 / 10; }
.blog__listing__items > .ajax__loader + .blog__listing__item .blog__listing__item__content{
grid-column:2; grid-row:1; order:0; align-self:center; padding:24px 0 0 !important;
}
.blog__listing__items > .ajax__loader + .blog__listing__item .blog__listing__item__content h5 a{
font-size:clamp(26px,2.6vw,34px); line-height:1.18;
}
.blog__listing__items > .ajax__loader + .blog__listing__item .blog__listing__item__content p{
font-size:16px; -webkit-line-clamp:3;
}
.blog__listing__items > .ajax__loader + .blog__listing__item > a.common__button{ grid-column:2; grid-row:2; order:0; }
/* Load More — squared ghost */
.blog__listing__readmore a.common__button{
background:transparent !important; border:1px solid var(--hc-navy) !important;
border-radius:0 !important; box-shadow:none !important; color:var(--hc-navy) !important;
font-family:var(--hc-font); font-size:14px; font-weight:500; letter-spacing:.04em;
padding:15px 40px !important; transition:background-color .18s ease, color .18s ease;
}
.blog__listing__readmore a.common__button:hover{ background:var(--hc-navy) !important; color:#fff !important; }
@media (max-width:980px){
.blog__listing__items{ grid-template-columns:repeat(2,1fr); gap:48px 32px; }
.blog__listing__items > .ajax__loader + .blog__listing__item{ grid-template-columns:1fr; grid-template-rows:none; gap:0; }
.blog__listing__items > .ajax__loader + .blog__listing__item > a:first-of-type{ grid-column:1; grid-row:auto; }
.blog__listing__items > .ajax__loader + .blog__listing__item .blog__listing__item__content,
.blog__listing__items > .ajax__loader + .blog__listing__item > a.common__button{ grid-column:1; grid-row:auto; }
}
@media (max-width:620px){ .blog__listing__items{ grid-template-columns:1fr; } }
/* ---- INDEX: media-type filter bar (hidden until podcast/video exist) ---- */
.hc-insights-filters{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:52px; }
.hc-insights-filter{
appearance:none; -webkit-appearance:none; background:transparent;
border:1px solid var(--hc-ink-faint); border-radius:0; font-family:var(--hc-font);
font-size:13px; font-weight:500; letter-spacing:.06em; color:var(--hc-ink-soft);
padding:10px 22px; cursor:pointer;
transition:background-color .18s ease, border-color .18s ease, color .18s ease;
}
.hc-insights-filter:hover{ border-color:var(--hc-navy); color:var(--hc-navy); }
.hc-insights-filter.is-active{ background:var(--hc-navy); border-color:var(--hc-navy); color:#fff; }
.hc-insights-filter:focus-visible{ outline:2px solid var(--hc-accent); outline-offset:2px; }
.hc-media-badge{
position:absolute; top:12px; left:12px; font-family:var(--hc-mono);
font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:#fff;
background:var(--hc-cta); padding:5px 10px; z-index:1;
}
.hc-media-badge-video{ background:var(--hc-accent); }
/* ---- SINGLE POST: heading ---- */
/* Parent tucks this band under the header with a negative top margin sized
for the old tall pale hero — neutralize it and give real clearance. */
.post__wrapper{ margin-top:0 !important; padding-top:0 !important; }
.post__heading__wrapper{
background:var(--hc-paper) !important;
margin-top:0 !important;
padding:64px 0 0 !important;
min-height:0 !important;
}
.post__heading__wrapper .container{ padding-top:0 !important; }
.post__heading__content{ max-width:880px; margin:0 auto; text-align:left !important; }
.post__heading__content > span{
display:inline-flex; align-items:center; gap:12px; font-size:12px; font-weight:500;
letter-spacing:.16em; text-transform:uppercase; color:var(--hc-cta) !important;
background:transparent !important; padding:0 !important; border-radius:0 !important;
margin-bottom:20px;
}
.post__heading__content > span::before{
content:''; display:block; width:28px; height:1px; background:var(--hc-cta);
}
.post__heading__content h1{
font-family:var(--hc-font); font-size:clamp(32px,4vw,52px); font-weight:300;
line-height:1.12; color:var(--hc-navy); margin:0 0 20px; text-align:left !important;
}
.post__heading__content > p{ display:none; } /* auto-excerpt duplicates body */
.post__heading__content img{
width:100%; aspect-ratio:21 / 9; object-fit:cover;
border-radius:0 !important; margin-top:32px; display:block;
}
/* ---- SINGLE POST: body + sidebar ---- */
/* Parent sizes the columns with percentage widths for its own flex layout;
inside the grid those resolve against the track and collapse the body
to a sliver — force full-track widths. */
.post__content{
display:grid !important;
grid-template-columns:minmax(0,7fr) minmax(280px,3fr) !important;
gap:80px; align-items:start;
width:100%; max-width:1140px; margin:0 auto;
}
.post__content__left{
width:100% !important; max-width:720px !important;
flex:none !important; float:none !important;
}
.post__content__right{
width:100% !important; max-width:none !important;
flex:none !important; float:none !important;
background:transparent !important; padding:0 !important;
position:sticky; top:128px;
}
.post__content__left p,
.post__content__left li{
font-family:var(--hc-font); font-size:17px; font-weight:300; line-height:1.75;
color:var(--hc-ink);
}
.post__content__left span[style*='font-weight']{ font-weight:inherit !important; }
.post__content__left p{ margin:0 0 22px; }
.post__content__left h2,
.post__content__left h3{
font-family:var(--hc-font); font-weight:300; color:var(--hc-navy);
line-height:1.2; margin:44px 0 18px;
}
.post__content__left h2{ font-size:clamp(26px,2.6vw,34px); }
.post__content__left h3{ font-size:clamp(21px,2vw,26px); }
.post__content__left h2 b,
.post__content__left h3 b{ font-weight:300; }
.post__content__left li b,
.post__content__left p b,
.post__content__left strong{ font-weight:500; color:var(--hc-navy); }
.post__content__left ol,
.post__content__left ul{ padding-left:22px; margin:0 0 24px; }
.post__content__left li{ margin-bottom:12px; }
.post__content__left ol li::marker{ font-family:var(--hc-mono); font-size:14px; color:var(--hc-cta); }
.post__content__left a{
color:var(--hc-accent); text-decoration:none;
border-bottom:1px solid rgba(4,118,168,.35); transition:border-color .18s ease;
}
.post__content__left a:hover{ border-bottom-color:var(--hc-accent); }
.post__content__left img{ border-radius:0 !important; max-width:100%; height:auto; }
.post__content__left blockquote{
border-left:2px solid var(--hc-cta); margin:32px 0; padding:4px 0 4px 24px;
font-size:19px; font-weight:300; line-height:1.6; color:var(--hc-navy);
}
.post__content__right__cta{
background:var(--hc-navy) !important; border-radius:0 !important;
padding:32px 28px !important; box-shadow:none !important;
}
.post__content__right__cta h5{
font-family:var(--hc-font); font-size:18px; font-weight:300; line-height:1.45;
color:#fff; margin:0 0 20px;
}
.post__content__right__cta a.common__button{
background:var(--hc-cta) !important; border:1px solid var(--hc-cta) !important;
border-radius:0 !important; box-shadow:none !important; color:var(--hc-cta-text) !important;
font-family:var(--hc-font); font-size:14px; font-weight:500; letter-spacing:.02em;
padding:14px 28px !important; transition:background-color .18s ease, border-color .18s ease;
}
.post__content__right__cta a.common__button:hover{ background:var(--hc-cta-strong) !important; border-color:var(--hc-cta-strong) !important; }
.post__content__right__related{ margin-top:36px; }
.post__content__right__related h6{
background:transparent !important; border-radius:0 !important; padding:0 !important;
font-size:12px; font-weight:500; letter-spacing:.16em; text-transform:uppercase;
color:var(--hc-navy); margin:0 0 6px;
}
.post__content__right__related ul{ list-style:none; margin:0; padding:0; }
.post__content__right__related li{
border-bottom:1px solid var(--hc-line); padding:14px 0; margin:0;
}
.post__content__right__related li a{
font-size:14px; font-weight:400; line-height:1.45; color:var(--hc-ink-soft) !important;
text-decoration:none; transition:color .18s ease;
}
.post__content__right__related li a:hover{ color:var(--hc-accent) !important; }
@media (max-width:980px){
.post__content{ grid-template-columns:1fr; gap:56px; }
.post__content__right{ position:static; }
}
@media (prefers-reduced-motion:reduce){
.blog__listing__item > a:first-of-type img,
.blog__listing__item > a.common__button,
.blog__listing__item > a.common__button::after,
.hc-insights-filter{ transition:none; }
.blog__listing__item:hover > a:first-of-type img{ transform:none; }
}
/* =====================================================================
v1.10.0 — QA BATCH (July 20 desktop review)
===================================================================== */
/* ---- QA 1: GLOBAL TYPE HARMONIZATION -------------------------------
The parent sets Sora on the bare h1–h6/p element selectors, which
outranks body-level inheritance — so every legacy module still
rendered Sora. Same-specificity element selectors loaded later win
the cascade cleanly (no !important needed), moving the whole site
onto the rebrand type system in one pass. ---- */
h1, h2, h3, h4, h5, h6{
font-family:var(--hc-font);
font-weight:300;
letter-spacing:-.02em;
color:var(--hc-ink);
}
h4, h5, h6{ font-weight:400; letter-spacing:-.01em; }
p{
font-family:var(--hc-font);
color:var(--hc-ink);
}
strong, b{ font-family:inherit; font-weight:600; }
/* ---- QA 2: SUB-TOPIC NAV — bottom separator ------------------------
Restore a full-width light hairline under the module (matches the
homepage section separators). This is a border on the section itself
— NOT the stray empty-grid rule removed in v1.7.1, whose guards
(.hc-subnav-grid:empty + template row filtering) stay in force.
Suppressed when the next section is a beige band that already draws
its own top hairline, so lines never double up. ---- */
.hc-subnav{ border-bottom:1px solid var(--hc-line); }
.hc-subnav:has(+ .hc-section-alt){ border-bottom:0; }
/* ---- QA 3: NAV DROPDOWN — single-owner reveal ----------------------
First open looked different from every later open because two
animation systems were fighting: the parent's jQuery slide animates
inline height/overflow/margin on the first hover (the bottom-up
"swipe"), then leaves inline display state behind, so subsequent
opens fall through to our CSS fade. Locking every property jQuery
animates with !important makes the inline animation a visual no-op —
the CSS opacity/translate transition is now the only reveal, and
every open (including the first) is identical. ---- */
@media (min-width:981px){
.header__nav .menu-item-has-children > .sub-menu,
.main-navigation .menu-item-has-children > .sub-menu,
.header__nav .menu-item-has-children:hover > .sub-menu,
.main-navigation .menu-item-has-children:hover > .sub-menu{
height:auto !important;
overflow:visible !important;
margin:0 !important;
}
}
/* ---- QA 4: LEGACY MODULE PASS — Calculator form module -------------
Type, spacing, and sizes onto the rebrand system; the inline
light-blue panel (#dfeff8) can only be beaten with !important. ---- */
.calculator__heading h1{
font-size:clamp(2.2rem,4vw,3.4rem);
line-height:1.07;
color:var(--hc-ink);
}
.calculator__heading p{
font-size:1.1rem;
line-height:1.65;
color:var(--hc-ink-soft);
margin-top:22px;
}
.calculator__form{
background-color:var(--hc-soft) !important;
border:1px solid var(--hc-line);
border-radius:0;
margin-top:56px;
padding:56px 32px;
}
@media (min-width:768px){
.calculator__form{ padding:64px 88px; }
}
.calculator__form label,
.calculator__form .form__input span{
font-family:var(--hc-font);
font-weight:500;
font-size:.92rem;
letter-spacing:.01em;
color:var(--hc-ink);
}
.calculator__form input,
.calculator__form select{
font-family:var(--hc-font);
font-size:1rem;
border-radius:0;
border:1px solid var(--hc-line);
background-color:#fff;
color:var(--hc-ink);
transition:border-color .18s ease;
}
.calculator__form input:focus,
.calculator__form select:focus{ border-color:var(--hc-navy); }
.calculator__form input::placeholder,
.calculator__form select::placeholder{
font-family:var(--hc-font);
font-size:1rem;
color:var(--hc-ink-faint);
}
.calculator__form .form__input .error__message{ font-family:var(--hc-font); font-size:.88rem; }
.calculator__form .form__input__errors{ border-radius:0; }
.calculator__form .form__input__errors p{ font-family:var(--hc-font); }
.calculator__result__loading p{
font-family:var(--hc-font); font-weight:300; color:var(--hc-ink);
}
.calculator__result__detail h6{
font-family:var(--hc-font); font-weight:300;
font-size:clamp(1.4rem,2.4vw,1.9rem); color:var(--hc-ink);
}
.calculator__result__detail span{
font-family:var(--hc-font); font-weight:400; color:var(--hc-ink);
}
.calculator__result__total__from,
.calculator__result__total__to{
font-family:var(--hc-font);
font-weight:300;
letter-spacing:-.02em;
font-size:clamp(3rem,5vw,4.4rem);
color:var(--hc-accent-strong);
}
.calculator__result__detail p{ font-family:var(--hc-font); color:var(--hc-ink-soft); }
.tooltip{ font-family:var(--hc-font); }
.tooltip:after{ border-radius:0; background-color:var(--hc-navy); font-family:var(--hc-font); }
.tooltip:before{ border-color:var(--hc-navy) transparent transparent transparent; }
/* ---- QA 4: LEGACY MODULE PASS — Two column image content -----------
Colors/fonts were set in the v1 pass; this locks rhythm to the
compact density and squares the figure. ---- */
.two__column__item{ gap:48px; }
@media (min-width:640px){ .two__column__item{ gap:72px; } }
.two__column__item__left img{ border-radius:0; }
.two__column__item__right h2{ padding-bottom:20px; }
.two__column__item__right p{ margin-bottom:14px; }
.two__column__item__right .button{ margin-top:28px; }
/* ---- QA 4: LEGACY MODULE PASS — Simple CTA --------------------------
Some placements carry inline white text (over the old navy inline
bg) which broke against the soft band the reskin gives this module.
Force the full type stack so every placement reads eyebrow /
heading / body in rebrand ink regardless of inline styles. ---- */
.cta__wrapper .cta__content > span,
.cta__content span[style]{
color:var(--hc-accent-strong) !important;
font-family:var(--hc-font) !important;
font-weight:600;
letter-spacing:.22em;
font-size:.74rem;
}
.cta__content h2,
.cta__content h2[style]{
color:var(--hc-ink) !important;
padding-top:14px;
}
.cta__content p,
.cta__content div[style],
.cta__content div[style] p{
color:var(--hc-ink-soft) !important;
font-size:1.1rem;
line-height:1.6;
}
.cta__content p{ margin-top:18px; }
.cta__content .common__button.button{ margin-top:30px; }
/* ---- QA 4: LEGACY MODULE PASS — Content module ----------------------
The pale-blue info panel moves to the cream band, headings drop the
legacy #2796D1, spacing compacts to the rebrand rhythm, and the
old-identity blue swoosh background art is retired (same treatment
the number module got in v1). ---- */
.content__wrapper.bg__shape,
.content__wrapper .bg__shape{ background-image:none !important; }
.content__wrapper h2{
color:var(--hc-ink) !important;
font-size:clamp(1.9rem,3vw,2.7rem);
padding-bottom:8px;
}
.content__info{
background-color:var(--hc-soft) !important;
border:1px solid var(--hc-line);
padding:48px 32px !important;
}
@media (min-width:768px){ .content__info{ padding:64px !important; } }
@media (min-width:1280px){ .content__info{ padding:72px 88px !important; } }
.content__info__text,
.content__info__text p{
color:var(--hc-ink-soft);
font-size:1.02rem;
line-height:1.65;
}
.content__info__text h1, .content__info__text h2, .content__info__text h3,
.content__info__text h4, .content__info__text h5, .content__info__text h6{
color:var(--hc-ink) !important;
}
.content__wrapper a{ color:var(--hc-accent-strong); }
.content__wrapper blockquote{
background-color:var(--hc-navy) !important;
border-radius:0;
}
/* ---- QA 5: SPLIT DESKTOP NAV (opt-in) -------------------------------
Brookfield-style split: service items sit by the logo, company /
insights / contact items align right. Opt-in per menu item — add the
CSS class `hc-nav-right` (Appearance → Menus → Screen Options →
check "CSS Classes") to every item that should sit in the right
group. With no classed items, nothing changes. Desktop only (the
parent's 1280px nav breakpoint); the mobile drawer is untouched. ---- */
@media (min-width:1280px){
.header__top:has(li.hc-nav-right) .header__nav__wrapper{
flex:1 1 auto;
justify-content:stretch;
}
.header__top:has(li.hc-nav-right) .header__nav{ width:100%; }
.header__nav ul.menu:has(> li.hc-nav-right){
width:100%;
justify-content:flex-start;
}
/* first right-group item pushes itself and everything after it over */
.header__nav ul.menu > li:not(.hc-nav-right) + li.hc-nav-right{
margin-left:auto;
}
}
/* ---- QA 6: HOMEPAGE HERO — right-side entrance ----------------------
The figure wipes in (same clip-path language as the sub-nav image)
and the stat badge rises up after it — the hero now loads with the
same motion vocabulary as the deeper pages. Gated behind .hc-js +
prefers-reduced-motion like every other entrance. ---- */
@media (prefers-reduced-motion:no-preference){
.hc-js .hc-hero.hc-anim .hc-hero-img{
clip-path:inset(0 0 100% 0);
transition:clip-path 1s cubic-bezier(.22,.7,.2,1) .2s;
}
.hc-js .hc-hero.hc-anim .hc-fig-tag{
opacity:0;
transition:opacity .5s ease 1.1s;
}
.hc-js .hc-hero.hc-anim .hc-hero-badge{
opacity:0; transform:translateY(14px);
transition:opacity .5s ease .95s,
transform .55s cubic-bezier(.22,.7,.2,1) .95s;
}
.hc-js .hc-hero.hc-anim.hc-in .hc-hero-img{ clip-path:inset(0 0 0 0); }
.hc-js .hc-hero.hc-anim.hc-in .hc-fig-tag{ opacity:1; }
.hc-js .hc-hero.hc-anim.hc-in .hc-hero-badge{ opacity:1; transform:none; }
}
/* =====================================================================
v1.11.0 — MOBILE QA BATCH (July 26 review · Chrome / iOS / iPhone 16 Pro)
===================================================================== */
/* ---- M1: MOBILE MENU — blank drawer (root cause) --------------------
The reskin's backdrop-filter on the sticky header makes the header
the CONTAINING BLOCK for position:fixed descendants (per the filter
effects spec) — and the parent's off-canvas drawer + backdrop are
fixed elements INSIDE the header. On WebKit/iOS they get trapped and
clipped inside the ~60px header box: the hamburger toggles (icon
swaps to X) but the panel renders nowhere. Dropping the filter below
the desktop nav breakpoint restores viewport-relative fixed
positioning; the frosted blur stays on desktop, where the drawer
markup is never shown. Solid white keeps the header legible. ---- */
@media (max-width:1279px){
.site-header,
header.header{
-webkit-backdrop-filter:none;
backdrop-filter:none;
background:#ffffff;
}
/* the drawer's off-screen resting position (right:-100%) also created
phantom horizontal overflow — clip it without creating a scroll
container (overflow:hidden on body would break the sticky header) */
html, body{ overflow-x:clip; }
}
/* drawer typography onto the rebrand system once it's visible */
.header__menu__middle ul li a{
font-family:var(--hc-font);
font-weight:500;
font-size:1.02rem;
color:var(--hc-ink);
}
.header__menu__middle .hc-nav-d{ display:none; } /* keep drawer rows single-line */
/* ---- M2: HEADER — tighten nav depth + space beneath -----------------
Parent pads .header__top 24px top/bottom on mobile; pull to 10px.
Space beneath the nav is section top padding — compact rhythm below. */
@media (max-width:1279px){
.header__top{
padding-top:10px !important;
padding-bottom:10px !important;
}
}
/* ---- M3: GUTTERS — restore edge whitespace on mobile ----------------
Container padding is being zeroed on small screens (parent zeroes the
header container outright; content containers follow on device).
Force a consistent 20px gutter everywhere below the desktop nav
breakpoint — !important so no parent responsive rule can re-zero it. */
@media (max-width:1279px){
.container{
padding-left:20px !important;
padding-right:20px !important;
}
}
/* ---- M4: SECTION RHYTHM + TYPE SCALE on mobile -----------------------
Compact the vertical rhythm and pull paragraph sizes down a step —
flagged as reading too large on device. Component classes (leads,
fine print, cards) keep their own sizes via higher specificity. ---- */
@media (max-width:640px){
:root{ --hc-section-y:56px; }
p{ font-size:.95rem; line-height:1.6; }
.hc-lead,
.hc-sec-lead{ font-size:1.02rem; line-height:1.62; }
.cta__content p,
.calculator__heading p{ font-size:1rem; }
}
/* ---- M5: HERO on mobile — bigger H1, tighter top, overlaid badge ---- */
@media (max-width:760px){
.hc-hero-grid{ padding:40px 0 56px; gap:36px; }
.hc-hero h1.hc-display{
font-size:clamp(2.5rem,10.5vw,3.3rem);
margin:0 0 20px;
}
.hc-lead{ margin:0 0 28px; }
/* badge: back over the image, scaled down (overrides the earlier
position:static fallback in the base hero rules) */
.hc-hero-badge{
position:absolute;
left:14px; right:auto; bottom:14px;
margin:0;
padding:12px 16px;
min-width:0;
}
.hc-hb-n{ font-size:1.35rem; }
.hc-hb-l{ font-size:.68rem; margin-top:4px; max-width:22ch; }
}
/* ---- M6: SUB-TOPIC NAV — mobile source order -------------------------
Mobile only (desktop grid untouched): eyebrow → graphic → heading →
lead. The head wrapper dissolves via display:contents so the side
column can interleave between the text elements with flex order. ---- */
@media (max-width:980px){
.hc-subnav-head-grid{
display:flex;
flex-direction:column;
align-items:stretch;
gap:0;
}
.hc-subnav-head-grid .hc-sec-head-narrow{ display:contents; }
.hc-subnav-head-grid .hc-eyebrow{ order:1; }
.hc-subnav-head-grid .hc-display{ order:2; }
.hc-subnav-head-grid .hc-subnav-side{ order:3; margin:6px 0 28px; }
.hc-subnav-head-grid .hc-sec-lead{ order:4; }
}
/* ---- M7: FILLER CELLS — hide when grids stack ------------------------
The drifting step-line cells exist to fill trailing empty desktop
grid columns; stacked one-wide on mobile they're just dead bands.
Below the stack breakpoint, drop them and move to the next card. ---- */
@media (max-width:980px){
.hc-cell-fill{ display:none !important; }
}
/* =====================================================================
v1.12.0 — MOBILE FOLLOW-UP (drawer rebuild · footer whitespace ·
duplicate-enqueue fallout)
===================================================================== */
/* ---- F1: FOOTER WHITESPACE ------------------------------------------
Root cause was structural: the child footer.php never closed #content
/ #page (opened in the parent's header.php), so the footer rendered
INSIDE .site-content and the parent's ~80px end-of-content spacing
fell BELOW it. footer.php now closes both wrappers. With the footer
outside, that same spacing would reappear as a gap ABOVE the footer —
zero it, and neutralize the old inline margin-bottom:-80px hacks that
legacy templates used to fight it (else they'd now tuck under the
footer). ---- */
#content.site-content{ padding-bottom:0 !important; margin-bottom:0 !important; }
#main > section[style*="-80px"],
#main > .calculator__wrapper[style*="-80px"]{ margin-bottom:0 !important; }
/* ---- F2: MOBILE DRAWER — deterministic rebuild -----------------------
The parent's drawer is position:fixed INSIDE our position:sticky
header; on iOS WebKit, fixed elements inside sticky containers are
laid out against the sticky box instead of the viewport (long-standing
WebKit containment bug) — so the panel sized itself to the ~56px
header: exactly the short white logo+X band over the page seen in QA.
Rebuild the panel so nothing depends on fixed-positioning resolution:
viewport units for size (100vw/100dvh resolve identically no matter
what the containing block is), top/left:0 (the sticky header is pinned
to the viewport top, so header-relative == viewport-relative), and a
transform slide instead of the right:-100% offset (no layout overflow,
no percentage insets). The parent's .is-open toggle drives it
unchanged. Everything !important so no stale cached sheet or parent
rule can re-break it. ---- */
@media (max-width:1279px){
.header__menu__backdrop{ display:none !important; } /* full-screen panel needs no scrim */
.header__menu__block{
position:fixed !important;
top:0 !important; left:0 !important;
right:auto !important; bottom:auto !important;
width:100vw !important;
max-width:none !important;
height:100dvh !important;
background:#ffffff !important;
z-index:9999 !important;
overflow-y:auto !important;
-webkit-overflow-scrolling:touch;
transform:translateX(100%);
transition:transform .34s cubic-bezier(.22,.7,.2,1), visibility 0s linear .34s !important;
visibility:hidden;
pointer-events:none;
}
.header__menu.is-open .header__menu__block{
transform:translateX(0);
transition:transform .34s cubic-bezier(.22,.7,.2,1), visibility 0s !important;
visibility:visible;
pointer-events:auto;
}
@media (prefers-reduced-motion:reduce){
.header__menu__block{ transition:none !important; }
}
/* top bar: sticky IN-FLOW inside the scrollable panel — replaces the
parent's second fixed element (same WebKit trap as the panel) */
.header__menu__top{
position:sticky !important;
top:0 !important;
width:100% !important;
background:#ffffff !important;
border-bottom:1px solid var(--hc-line);
padding:14px 20px !important;
z-index:2;
}
.header__menu__top img{ max-width:8.5rem !important; }
/* menu list: top bar is in flow now, so drop the fixed-bar clearance */
.header__menu__middle{ padding-top:16px !important; }
.header__menu__middle ul li{ padding-left:20px !important; padding-right:20px !important; }
/* drawer CTA */
.header__menu__middle .common__button.mobile__btn,
.header__menu__block .mobile__btn{
margin:20px 20px 32px !important;
width:calc(100% - 40px) !important;
justify-content:center;
}
}
/* =====================================================================
v1.13.0 — QA BATCH (July 26 follow-up · team page, animation
direction, hero badge, single post mobile)
===================================================================== */
/* ---- T1: TEAM PAGE — tier density (Xiao) -----------------------------
Leadership drops to the 4-across card size the other tiers were
using; the tiers beneath compact to 6-across with a matching type
step-down. Overrides the roster plugin's per-tier --hc-tm-cols inline
values from here (no plugin edit needed). Desktop only — mobile
stacking stays as-is per QA. ---- */
@media (min-width:1081px){
.hc-team-roster .hc-sec-head + .hc-tm-tier .hc-tm-grid{
grid-template-columns:repeat(4,1fr) !important;
}
.hc-team-roster .hc-tm-tier + .hc-tm-tier .hc-tm-grid{
grid-template-columns:repeat(6,1fr) !important;
}
.hc-team-roster .hc-tm-tier + .hc-tm-tier .hc-tm-name{ font-size:.94rem; }
.hc-team-roster .hc-tm-tier + .hc-tm-tier .hc-tm-role{ font-size:.75rem; }
}
/* ---- T2: IMAGE REVEALS — left-to-right + fade -------------------------
Team feedback: top-down wipes can read as a slow-loading page. Every
image wipe (sub-nav figure, hero figure) now reveals left→right with
an accompanying fade. Same selectors as the original rules — declared
later, so these win the cascade cleanly. ---- */
@media (prefers-reduced-motion:no-preference){
.hc-js .hc-subnav.hc-anim .hc-sn-fig{
clip-path:inset(0 100% 0 0);
opacity:0;
transition:clip-path .9s cubic-bezier(.22,.7,.2,1) .35s,
opacity .55s ease .35s;
}
.hc-js .hc-subnav.hc-anim.hc-in .hc-sn-fig{
clip-path:inset(0 0 0 0);
opacity:1;
}
.hc-js .hc-hero.hc-anim .hc-hero-img{
clip-path:inset(0 100% 0 0);
opacity:0;
transition:clip-path 1s cubic-bezier(.22,.7,.2,1) .2s,
opacity .55s ease .2s;
}
.hc-js .hc-hero.hc-anim.hc-in .hc-hero-img{
clip-path:inset(0 0 0 0);
opacity:1;
}
}
/* ---- T3: HERO BADGE vs. FIGURE TAG on mobile ---------------------------
The descriptor tag and the stat badge fight for the same corner space
at phone widths; the number carries the weight. Hero module only,
mobile only — sub-nav figure tags keep their captions everywhere. ---- */
@media (max-width:760px){
.hc-hero .hc-fig-tag{ display:none !important; }
}
/* ---- T4: SINGLE POST — mobile stack ------------------------------------
The article grid (7fr / 3fr with a sticky right rail) had no mobile
breakpoint, so phones got a squeezed one-word-per-line body column
with the CTA rail floating over it. Below 980px: single column, body
first, rail unstuck and stacked beneath the article. ---- */
@media (max-width:980px){
.post__content{
grid-template-columns:1fr !important;
gap:0 !important;
}
.post__content__left{ max-width:none !important; }
.post__content__right{
position:static !important;
margin-top:48px;
padding-top:40px !important;
border-top:1px solid var(--hc-line);
}
.post__heading__content img{ width:100%; }
}
/* =====================================================================
v1.14.0 — POLISH (eyebrow alignment · frame color · perf pass)
===================================================================== */
/* ---- P1: SUB-NAV MOBILE — eyebrow flush left --------------------------
The display:contents reorder makes the eyebrow a flex item, which
blockifies its inline-flex display — at that point the parent theme's
.base__wrapper auto side margins start centering it (they're inert on
inline-level boxes everywhere else, which is why only this module
drifted). Pin the margins and alignment. ---- */
@media (max-width:980px){
.hc-subnav-head-grid .hc-eyebrow{
margin:0 0 26px !important;
align-self:flex-start;
}
}
/* ---- P2: IMAGE FRAME — navy → branded gray -----------------------------
The offset frame behind figures read near-black at 1.5px. New token:
a navy-tinted light gray — visible structure, less contrast. ---- */
:root{ --hc-frame:#bcc5cc; }
.hc-sn-frame{ border-color:var(--hc-frame); }
/* =====================================================================
v1.14.2 — TRACK RECORD FIXES (image fill · project detail template)
===================================================================== */
/* ---- TR1: PROJECT IMAGE — fill the card, crop to cover ----------------
The two top tiles share a grid row but different column spans (7/5),
so at 16/10.5 the wider tile is taller and defines the row height.
The narrower card stretched to match (grid default align: stretch)
but its image only occupied its own aspect height — the navy-deep
card background showed through beneath it as a dark bar.
Fix: move the aspect ratio to the CARD and absolutely fill the image.
The wider tile still sets the row height; every image now covers its
full card via background-size:cover (center crop). On mobile each
tile spans 12 and its own aspect ratio governs — no change there. ---- */
.hc-proj-img{
position:absolute; inset:0;
aspect-ratio:auto;
}
.hc-proj-a,
.hc-proj-b{ aspect-ratio:16/10.5; }
.hc-proj-c,
.hc-proj-d,
.hc-proj-e{ aspect-ratio:4/3; }
/* ---- TR2: SINGLE PROJECT — branded detail template ---------------------
New single-hc_project.php (the parent's generic single template was
rendering projects as blog posts: bare H1 + image + empty rail, and
never surfaced the Project details fields). Head block: back link,
tag eyebrow, display title, DM Mono metric; framed figure; measured
prose column; reused .hc-closing band. ---- */
.hc-projd-head{ padding:64px 0 44px; }
.hc-projd-back{
display:inline-flex; align-items:center; gap:8px;
font-family:var(--hc-mono); font-size:.78rem; letter-spacing:.14em;
text-transform:uppercase; text-decoration:none;
color:var(--hc-ink-soft); margin-bottom:34px;
}
.hc-projd-back:hover{ color:var(--hc-accent-strong); }
.hc-projd-back .arw{ transform:rotate(180deg); }
h1.hc-projd-title{
font-family:var(--hc-font); font-weight:300; letter-spacing:-.02em;
font-size:clamp(2.4rem,4.4vw,3.6rem); line-height:1.05;
color:var(--hc-ink); margin:0;
}
.hc-projd-metric{
font-family:var(--hc-mono); font-size:.92rem; letter-spacing:.06em;
color:var(--hc-accent-strong); margin-top:18px;
}
.hc-projd-figure{ margin:0; }
.hc-projd-figure img{
display:block; width:100%; height:auto;
border:1px solid var(--hc-frame);
}
.hc-projd-body{ padding:56px 0 var(--hc-section-y); }
.hc-projd-prose{ max-width:70ch; }
.hc-projd-prose p{
font-size:1.06rem; line-height:1.75; color:var(--hc-ink-soft);
margin:0 0 1.35em;
}
.hc-projd-prose h2,
.hc-projd-prose h3{
font-family:var(--hc-font); font-weight:400; color:var(--hc-ink);
letter-spacing:-.01em; margin:1.6em 0 .6em;
}
.hc-projd-prose a{ color:var(--hc-accent-strong); }
@media (max-width:760px){
.hc-projd-head{ padding:44px 0 32px; }
}
/* =====================================================================
v1.14.3 — TRACK RECORD REVISIONS (card chip · row fill · detail head)
===================================================================== */
/* ---- TR3: CARD CAPTION — gradient scrim → standard figure chip --------
Project card overlays now use the same treatment as every other
figure on the site (.hc-fig-tag: paper chip, hairline border, mono
label, pinned 16px from the corner) instead of the dusk gradient
with on-navy type. Tag reads in text-safe cerulean, title in ink,
metric as a small mono line. ---- */
.hc-proj-cap{
inset:auto auto 16px 16px;
padding:10px 14px 11px;
background:rgba(255,255,255,.92);
border:1px solid var(--hc-line);
max-width:calc(100% - 32px);
}
.hc-pc-tag{
font-family:var(--hc-mono); font-weight:500;
font-size:.6rem; letter-spacing:.14em;
color:var(--hc-accent-strong);
}
.hc-pc-t{
color:var(--hc-ink);
font-size:1.02rem; margin-top:3px;
}
.hc-pc-m{
font-family:var(--hc-mono);
font-size:.64rem; letter-spacing:.12em; text-transform:uppercase;
color:var(--hc-ink-soft); margin-top:4px;
}
/* ---- TR4: TILE B — restore full-row box, cover-crop the image ---------
v1.14.2 put aspect-ratio on the tile itself, but a grid item with a
definite inline size derives its block size from the ratio INSTEAD
of stretching — so the right-hand tile rendered shorter than the
row and broke the bottom alignment. Desktop: drop the ratio so the
tile stretches back to the row height set by tile A (the original
box dimensions); the absolute image cover-crops to fill it. The
ratio returns below 1081px where every tile owns its row. ---- */
@media (min-width:1081px){
.hc-proj-b{ aspect-ratio:auto; }
}
/* ---- TR5: PROJECT DETAIL — head hierarchy + figure spacing ------------
The back link and tag eyebrow are both inline-level, so they sat on
one line and read as a single muddled breadcrumb; the mono cerulean
metric then repeated the same label voice two lines later. Back
link is now block-level (own row), and the metric is reset as a
quiet figure — Hanken 300, ink — distinct from the mono label
system. The figure also gets section-scale breathing room before
the next module. ---- */
.hc-projd-back{ display:flex; width:max-content; }
.hc-projd-metric{
font-family:var(--hc-font); font-weight:300;
font-size:clamp(1.15rem,1.8vw,1.4rem); letter-spacing:-.01em;
color:var(--hc-ink); margin-top:14px;
}
.hc-projd-figure{ margin-bottom:var(--hc-section-y); }
.hc-projd-body{ padding:0 0 var(--hc-section-y); }
/* =====================================================================
v1.14.4 — TRACK RECORD (chip in fig-tag voice · image fill for real)
===================================================================== */
/* ---- TR6: IMAGE FILL — kill the surviving per-tile img ratios ---------
Root cause of the persistent dark bar: the ORIGINAL rules
(.hc-proj-b .hc-proj-img{aspect-ratio:16/10.5} etc.) are two-class
selectors, so they outranked the single-class aspect-ratio:auto
reset in v1.14.2. An abspos box with inset:0 and an aspect-ratio
resolves its height from the RATIO and top-aligns in the leftover
inset space — image sat at the top, card background showed below.
Matching-specificity override, later in the cascade: ratio off the
image entirely (tiles own it since v1.14.2), so inset:0 finally
resolves to the full card and cover center-crops the photo. ---- */
.hc-proj-a .hc-proj-img,
.hc-proj-b .hc-proj-img,
.hc-proj-c .hc-proj-img,
.hc-proj-d .hc-proj-img,
.hc-proj-e .hc-proj-img{ aspect-ratio:auto; }
/* ---- TR7: CARD CHIP — single voice, fig-tag gray -----------------------
Markup change in hc-track-record.php: line 1 project name, line 2
"tag · metric" joined into one .hc-pc-meta line. Both lines DM Mono,
uppercase, letterspaced, ink-soft — the exact voice of .hc-fig-tag
("PROJECT SHOT · CIVIC INFRASTRUCTURE"), no color stack. ---- */
.hc-proj-cap{ padding:8px 12px 9px; }
.hc-pc-t{
font-family:var(--hc-mono); font-weight:500;
font-size:.68rem; letter-spacing:.14em; text-transform:uppercase;
color:var(--hc-ink-soft); margin-top:0;
}
.hc-pc-meta{
font-family:var(--hc-mono); font-weight:400;
font-size:.6rem; letter-spacing:.14em; text-transform:uppercase;
color:var(--hc-ink-soft); margin-top:4px;
}
/* =====================================================================
v1.14.5 — TRACK RECORD (chip title color)
===================================================================== */
/* ---- TR8: The v1.13-era link-cascade guard pinned .hc-pc-t to white
with !important (correct on the old gradient scrim, invisible on the
new paper chip) and outranked the TR7 restyle. Guard block edited in
place (~line 912) to pin ink-soft instead; no new rules needed here.
This marker records the change in the version log. ---- */
/* =====================================================================
v1.14.6 — FAQ (Yoast FAQ block styled into the design system)
===================================================================== */
/* ---- F1: TIF Basics FAQ — the Yoast FAQ block ships bare strong/p
markup. Rows read as hairline-ruled entries: question in Hanken 400
ink, answer in 300 ink-soft at prose measure. Scoped to .hc-faq so
any future FAQ placement opts in via the same group wrapper. ---- */
.hc-faq .schema-faq{ margin-top:8px; }
.hc-faq .schema-faq-section{
border-top:1px solid var(--hc-line);
padding:26px 0;
}
.hc-faq .schema-faq-section:last-child{
border-bottom:1px solid var(--hc-line);
}
.hc-faq .schema-faq-question{
display:block;
font-family:var(--hc-font); font-weight:400;
font-size:1.18rem; letter-spacing:-.01em;
color:var(--hc-ink);
margin:0 0 10px;
}
.hc-faq .schema-faq-answer{
margin:0; max-width:70ch;
font-weight:300; font-size:1.02rem; line-height:1.7;
color:var(--hc-ink-soft);
}
/* =====================================================================
v1.14.7 — INSIGHTS READ NOW (nav-CTA treatment, hover reclaimed)
===================================================================== */
/* ---- I1: The listing card buttons were styled as quiet text links,
but the parent theme's higher-specificity hover rules (the same
#main-scoped cascade the v1.10 guard block pins elsewhere) hijacked
:hover with a half-styled fill — and the old padding:16px 0 0 left
the label pinned to the top of that box. Reclaimed at ID-boosted
specificity and restyled to the primary nav CTA language: copper
block, white label vertically centered via inline-flex, hover
deepens to cta-strong with the shadow animating in and the arrow
nudging. Grid cards size to content; the featured lead stretches
its grid cell with the label centered. AJAX-appended cards match
automatically. ---- */
#blog_listing .blog__listing__item > a.common__button{
display:inline-flex !important;
align-items:center; justify-content:center;
background:var(--hc-cta) !important;
border:1px solid transparent !important; border-radius:0 !important;
color:#ffffff !important;
font-family:var(--hc-font); font-size:13px; font-weight:600;
letter-spacing:.1em; text-transform:uppercase; line-height:1;
padding:14px 26px !important; margin:18px 0 0 !important;
width:auto !important; align-self:flex-start;
box-shadow:none !important;
transition:background-color .22s ease, box-shadow .22s ease;
}
#blog_listing .blog__listing__item > a.common__button::after{
content:'\2192'; margin-left:8px;
transition:margin-left .22s ease;
}
#blog_listing .blog__listing__item > a.common__button:hover,
#blog_listing .blog__listing__item > a.common__button:focus-visible{
background:var(--hc-cta-strong) !important;
color:#ffffff !important;
box-shadow:0 12px 30px -14px var(--hc-cta-shadow) !important;
}
#blog_listing .blog__listing__item > a.common__button:hover::after{ margin-left:14px; }
#blog_listing .blog__listing__item > a.common__button:focus-visible{
outline:2px solid var(--hc-accent); outline-offset:2px;
}
/* Featured lead keeps its full-cell width (grid stretch) — no override
needed; the centered inline-flex label now sits true in both axes. */
@media (prefers-reduced-motion:reduce){
#blog_listing .blog__listing__item > a.common__button,
#blog_listing .blog__listing__item > a.common__button::after{ transition:none; }
}
/* =====================================================================
v1.14.8 — INSIGHTS READ NOW (design revert: quiet red-clay text link)
===================================================================== */
/* ---- I2: Design call after seeing v1.14.7 live — nine copper blocks
made the index read busy. Reverted to the text-link treatment in
the .hc-tlink voice: red-clay (copper) label, arrow that slides on
hover, no fill, no shadow, ever. What v1.14.7 actually FIXED is
kept: same ID-boosted selectors so the parent theme's #main hover
cascade can't repaint these, and the title-tooltip strip stays in
hc-insights.js. Same selectors, later in the cascade — these fully
supersede the I1 block above. ---- */
#blog_listing .blog__listing__item > a.common__button{
display:inline-flex !important;
align-items:center; justify-content:flex-start;
background:transparent !important;
border:0 !important; box-shadow:none !important;
color:var(--hc-cta) !important;
font-family:var(--hc-font); font-size:13px; font-weight:600;
letter-spacing:.1em; text-transform:uppercase; line-height:1;
padding:16px 0 0 !important; margin:0 !important;
width:auto !important; align-self:flex-start;
transition:color .18s ease;
}
#blog_listing .blog__listing__item > a.common__button::after{
content:'\2192'; display:inline-block; margin-left:9px;
transition:transform .2s ease;
}
#blog_listing .blog__listing__item > a.common__button:hover,
#blog_listing .blog__listing__item > a.common__button:focus-visible{
background:transparent !important;
box-shadow:none !important;
color:var(--hc-cta-strong) !important;
}
#blog_listing .blog__listing__item > a.common__button:hover::after{
margin-left:9px; transform:translateX(4px);
}
@media (prefers-reduced-motion:reduce){
#blog_listing .blog__listing__item > a.common__button::after{ transition:none; transform:none; }
}