/* primecode home — `/` and `/emperex/`.
Every number here is measured from migration/capture/source/{home,emperex}/
at 1440 / 768 / 390. Four values the source uses are not in the shared
palette, so they are declared once on .pc-hero as route-scoped tokens
rather than pushed into base.css:
--pc-hero-line 2.3rem = 36.8px home heading-title @1440 + @768
--pc-hero-line-sm 1.6rem = 25.6px home heading-title @390
--pc-hero-outline #222EAC computed.json slideBordered border
--pc-hero-toggle #0B2371 the mobile MENU button @390
The layout switch is 1024px (Elementor's tablet breakpoint: the source's
desktop text column is hidden-tablet, its mobile section hidden-desktop).
The hero TYPE switch is 767px, and the /emperex/ type switch is 1024px —
they genuinely differ; that is what the capture shows. */
/* The hero is full-bleed; base.css caps .site-main at the 1140 wide-size. */
.pc-main--home {
width: 100%;
max-width: none;
}
/* ---- header: transparent, sitting on top of the hero ------------------- */
/* Source: 1440x200, `margin-bottom: -200px`, so the hero begins at y=0. */
/* The source pulls the header back over the hero with `margin-bottom: -200px`,
which only works while the header is exactly 200px tall. Taking it out of
flow instead is the same 200px overlay but cannot shift the hero — without
JavaScript the menu stays expanded and a negative margin would push the
whole page down by the overflow (measured: 76px at 390). */
.pc-header-home {
/* The mobile MENU button's navy: measured @390, not a palette colour. */
--pc-hero-toggle: #0B2371;
position: absolute;
inset: 0 0 auto;
z-index: 2;
display: flex;
align-items: center;
min-height: 200px;
}
.pc-header-home__inner {
display: flex;
align-items: center;
width: min(100%, var(--pc-wide));
}
/* 30 / 70 at desktop; the logo is centred in its column and so is the nav.
Measured @1440: brand column x160 w336, nav column x496 w784, logo centre
and nav centre both land on their column's centre. */
.pc-header-home__brand-col {
flex: 0 0 30%;
display: flex;
justify-content: center;
padding-inline: var(--pc-gutter);
}
.pc-header-home__nav-col {
flex: 0 0 70%;
display: flex;
justify-content: center;
padding-inline: var(--pc-gutter);
}
/* The source opens an Elementor popup here; the theme uses the navigation
component's real disclosure instead. Only the paint differs from base.css:
navy with white text, not yellow with black. Measured @390. */
.pc-header-home .primary-navigation__toggle {
background: var(--pc-hero-toggle);
color: var(--pc-paper);
}
/* ---- hero -------------------------------------------------------------- */
.pc-hero {
--pc-hero-line: 2.3rem;
--pc-hero-line-sm: 1.6rem;
--pc-hero-outline: #222EAC;
--pc-hero-slot: 90px;
position: relative;
background: var(--pc-hero-wash);
}
.pc-hero__media {
position: absolute;
inset: 0;
z-index: 0;
}
/* `object-fit: cover` + `object-position: 100% 50%` reproduce the source's
`background-size: cover` + `background-position: 100% 50%` exactly. */
.pc-hero__photo {
width: 100%;
height: 100%;
object-fit: cover;
object-position: 100% 50%;
}
/* Wider than 1440 the photo stops growing: it keeps its 1440 rendering,
anchored to the right edge, and the wash (measured from the photo's own
flat yellow, so the seam is invisible) fills the rest. Under `cover` alone
a 2000px screen scaled the man up until his head sat behind the header.
Nick, 2026-09-22. */
@media (min-width: 1025px) {
.pc-hero__photo {
position: absolute;
inset: 0 0 0 auto;
width: min(100%, 1440px);
}
}
.pc-hero__body {
position: relative;
z-index: 1;
display: flex;
align-items: center;
min-height: 800px;
}
/* The text column is 60% of the 1120 inner width, with the shell's own 10px
inset: 672 - 20 = 652, which is the measured line width @1440. */
.pc-hero__col {
width: 60%;
padding-inline: var(--pc-gutter);
}
/* ---- hero: the rotating-statistic variant ------------------------------ */
.pc-hero__title {
margin: 0;
color: var(--pc-ink);
font-size: var(--pc-hero-line);
font-weight: var(--pc-fw-body);
line-height: var(--pc-hero-line);
text-align: center;
}
.pc-hero__line {
display: block;
}
/* Measured stack @1440: 36.8 + 20 + 90 + 3 + 50 + 9.5 + 36.8 = 246.1, which
centres in the 800px hero at y=276.7 — the captured position. */
.pc-hero__line--wide {
margin-top: 3px;
line-height: 50px;
}
.pc-hero__line--tail {
margin-top: 9.5px;
}
/* The slot reserves the tallest stat so nothing below it shifts. */
.pc-hero__stats {
position: relative;
display: block;
height: var(--pc-hero-slot);
margin-top: 20px;
}
/* The stat lines are inset a further 10px each side: the source nests them in
an inner Elementor column with its own gutter, so they sit at x=180/w=624
@1440 while the plain lines run the full 652. The 10px gap between the two
lines and the centring in the slot are both measured. */
.pc-hero__stat {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
justify-content: center;
gap: 10px;
padding-inline: var(--pc-gutter);
opacity: 0;
transition: opacity var(--pc-motion) ease;
}
.pc-hero__stat.is-current {
opacity: 1;
}
/* The five inactive statistics are display:none (the `hidden` attribute), so
only the current one is visible text — as on the source, whose slider kept
one slide in the flow. hero.js lifts `hidden` for the 300ms crossfade. */
.pc-hero__stat[hidden] {
display: none;
}
/* The navy outline is on the first line only. 2px solid, 10px radius,
0/5px padding, 8px right margin — computed.json `slideBordered`. */
.pc-hero__stat-figure {
display: block;
margin-right: 8px;
padding: 0 5px;
border: 2px solid var(--pc-hero-outline);
border-radius: 10px;
color: var(--pc-black);
}
.pc-hero__stat-label {
display: block;
}
/* ---- hero: the /emperex/ prose variant --------------------------------- */
/* 32px/48px italic, ranged left. Measured emperex/1440 paragraph.
The source is ONE with a
; the theme splits the two sentences into
an
and a
so the route has a real heading. They must therefore sit
flush — only the last block carries the paragraph's 14.4px bottom margin,
which the desktop vertical centring counts (288 + 14.4 centres at y=248.8). */
.pc-hero__prose {
margin: 0;
color: var(--pc-ink);
font-size: var(--pc-fs-h2);
font-style: italic;
font-weight: var(--pc-fw-body);
line-height: var(--pc-lh-body);
text-align: left;
}
.pc-hero__prose:last-child {
margin-bottom: 14.4px;
}
/* ---- the black band between hero and footer ---------------------------- */
/* 10px at every viewport (measured: 1440 y800-809, 768 y1127-1136,
390 y1174-1183). An empty Elementor section in the source. */
.pc-hero__rule {
height: 10px;
background: var(--pc-black);
}
/* ---- 1024px and below: the photo becomes a band, the text drops under -- */
@media (max-width: 1024px) {
.pc-hero {
--pc-hero-slot: 110px;
}
.pc-hero__media {
position: static;
}
.pc-hero__photo {
height: 800px;
}
/* The source paints this band brand yellow, not the photo's own wash. */
.pc-hero__body {
min-height: 0;
background: var(--pc-secondary);
padding-block: var(--pc-gutter) var(--pc-section-y);
}
/* Stacked, the shell's 10px is the only inset — the source's text runs
x=10..758 @768 and x=10..380 @390, not 20px in. */
.pc-hero__col {
width: 100%;
padding-inline: 0;
}
.pc-hero__prose {
font-size: var(--pc-fs-h4);
}
}
/* ---- 767px and below: the nav collapses, the hero type steps down ------ */
@media (max-width: 767px) {
.pc-hero {
--pc-hero-slot: 130px;
}
/* `--wide` keeps its own 50px leading at every width, so it is untouched. */
.pc-hero__title {
font-size: var(--pc-hero-line-sm);
line-height: var(--pc-hero-line-sm);
}
/* 60 / 40, with the MENU button ranged right against the shell inset. */
.pc-header-home__brand-col {
flex-basis: 60%;
}
.pc-header-home__nav-col {
flex-basis: 40%;
justify-content: flex-end;
}
}
@media (prefers-reduced-motion: reduce) {
.pc-hero__stat {
transition: none;
}
}