/**
* Homepage hero -- typography, rhythm and the CTA pair.
*
* Loaded on the front page only, after css/main.css, which is where every rule
* this overrides lives. `!important` throughout for the same reason: the base
* rules carry it, so nothing here would land without it.
*
* WHAT WAS ACTUALLY WRONG, measured at 1920x1000 before any change:
*
* - The description had no measure at all. `max-width` computed to 1920px
* and the paragraph ran 1344px wide -- 330 characters at roughly 110 per
* line, about double the readable maximum. That is the single biggest
* reason the block looked unset: the headline was capped at 820px and the
* paragraph under it ran nearly twice as wide, so the two had no shared
* edge to read against.
*
* - The accent line inherited the headline's tracking. `-0.02em` on a 72px
* headline computes to -1.44px, and children inherit the COMPUTED pixel
* value, not the em -- so a 39.6px line was carrying -1.44px, i.e.
* -0.036em. Nearly twice as tight as intended, at half the size.
*
* - The two buttons did not match each other: 44px against 42px tall, 14px
* against 15.2px type, title case against forced uppercase, and on a phone
* 44px against 34px. They also had 6px corners where every other button on
* the site is a pill.
*
* - The vertical rhythm was 28px after the headline and 0 after the
* paragraph, so the CTA row sat straight under the text with no air.
*/
/* ==========================================================================
THE HEADLINE
========================================================================== */
.home .hero-title,
.front-page .hero-title {
/*
* Slightly tighter ceiling than the base 4.5rem. At 72px the headline took
* three lines inside its 820px cap; the wrap is better balanced a step
* down, and the accent line beneath it gets room to be legible.
*/
font-size: clamp(2.25rem, 4.6vw, 4rem) !important;
line-height: 1.1 !important;
letter-spacing: -0.025em !important;
max-width: 17ch !important;
margin-bottom: 0 !important;
/* Keeps the last word of a line from stranding on its own. */
text-wrap: balance;
}
/*
* The accent line is a full sentence, not a highlighted phrase, so it is set
* as a subhead rather than as part of the headline.
*
* The explicit letter-spacing is the fix described above: without it this
* inherits the headline's computed -1.44px and sets far too tight.
*/
.home .hero-title .accent,
.front-page .hero-title .accent {
display: block;
max-width: 24ch;
margin-top: 1.1rem !important;
font-size: clamp(1.15rem, 1.9vw, 1.75rem) !important;
line-height: 1.35 !important;
letter-spacing: -0.01em !important;
font-weight: 500 !important;
text-wrap: balance;
}
/* ==========================================================================
THE DESCRIPTION
========================================================================== */
.home .hero-desc,
.front-page .hero-desc {
/*
* A measure, at last. 62ch is the upper end of comfortable for a single
* paragraph; the headline's 17ch cap sits inside it, so the two share a
* left edge and the block reads as one column rather than two unrelated
* widths.
*/
max-width: 62ch !important;
margin: 1.75rem 0 0 !important;
font-size: clamp(1rem, 1.05vw, 1.1rem) !important;
line-height: 1.7 !important;
/* `pretty` only affects the last few lines, which is where a lone word
would otherwise sit. */
text-wrap: pretty;
}
/* ==========================================================================
THE CTA PAIR
One set of dimensions for both, so they are the same object in two
emphases rather than two different buttons that happen to sit together.
========================================================================== */
.home .hero-cta-row,
.front-page .hero-cta-row {
display: flex !important;
flex-wrap: wrap;
align-items: stretch !important;
gap: 0.85rem !important;
margin-top: 2.25rem !important;
}
.home .hero-cta-row .btn-hero,
.home .hero-cta-row .hero-cta-secondary,
.front-page .hero-cta-row .btn-hero,
.front-page .hero-cta-row .hero-cta-secondary {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
gap: 0.55rem !important;
/* min-height rather than height: a button that wraps on a narrow screen
should grow, not clip. */
min-height: 54px !important;
padding: 0 1.9rem !important;
margin: 0 !important;
border-radius: 100px !important;
font-size: 0.975rem !important;
font-weight: 600 !important;
letter-spacing: 0.01em !important;
/* The secondary was forced to uppercase while its sibling was title case.
Neither is wrong; having both in one row is. */
text-transform: none !important;
line-height: 1.2 !important;
white-space: nowrap;
}
/* The primary keeps its gradient; only the shape and metrics change. */
.home .hero-cta-row .btn-hero,
.front-page .hero-cta-row .btn-hero {
box-shadow: 0 16px 34px -14px rgba(var(--color-accent-rgb), 0.55) !important;
}
.home .hero-cta-row .btn-hero:hover,
.front-page .hero-cta-row .btn-hero:hover {
box-shadow: 0 20px 40px -14px rgba(var(--color-accent-rgb), 0.7) !important;
}
/* The secondary reads as the quieter action: a hairline on the photograph. */
.home .hero-cta-row .hero-cta-secondary.btn-contact,
.front-page .hero-cta-row .hero-cta-secondary.btn-contact {
border: 1.5px solid rgba(255, 255, 255, 0.55) !important;
color: #fff !important;
backdrop-filter: blur(2px);
}
.home .hero-cta-row .hero-cta-secondary.btn-contact:hover,
.home .hero-cta-row .hero-cta-secondary.btn-contact:focus-visible,
.front-page .hero-cta-row .hero-cta-secondary.btn-contact:hover,
.front-page .hero-cta-row .hero-cta-secondary.btn-contact:focus-visible {
color: #fff !important;
/*
* White is the requested colour, and on the accent end of the hover
* gradient (#26D07C) it measures about 1.9:1 -- below the 4.5:1 that text
* this size needs. The shadow is what makes it hold: it darkens the few
* pixels immediately behind each glyph, which is where the contrast
* actually has to exist, without touching the button's colour.
*/
text-shadow: 0 1px 3px rgba(4, 18, 11, 0.55) !important;
}
/* ==========================================================================
NARROW SCREENS
========================================================================== */
@media (max-width: 992px) {
/*
* Both buttons go full width together. A sitewide rule in inner-pages.css
* takes every .btn-contact to 100% here, and only the secondary carries
* that class -- so without this the pair splits, one full width and one
* content width.
*/
.home .hero-cta-row,
.front-page .hero-cta-row {
flex-direction: column;
align-items: flex-start !important;
}
.home .hero-cta-row .btn-hero,
.home .hero-cta-row .hero-cta-secondary,
.front-page .hero-cta-row .btn-hero,
.front-page .hero-cta-row .hero-cta-secondary {
width: 100% !important;
max-width: 340px !important;
}
}
@media (max-width: 640px) {
/*
* main.css drops the headline to a flat 2rem under 500px, which left it
* barely larger than the paragraph beneath it and inverted the hierarchy.
* Restated as a clamp so it scales with the screen instead.
*/
.home .hero-title,
.front-page .hero-title {
font-size: clamp(2.1rem, 8.5vw, 2.75rem) !important;
max-width: 100% !important;
}
.home .hero-title .accent,
.front-page .hero-title .accent {
max-width: 100%;
margin-top: 0.85rem !important;
font-size: clamp(1.05rem, 4.4vw, 1.25rem) !important;
}
.home .hero-desc,
.front-page .hero-desc {
max-width: 100% !important;
margin-top: 1.25rem !important;
font-size: 1rem !important;
line-height: 1.65 !important;
}
.home .hero-cta-row,
.front-page .hero-cta-row {
margin-top: 1.75rem !important;
}
.home .hero-cta-row .btn-hero,
.home .hero-cta-row .hero-cta-secondary,
.front-page .hero-cta-row .btn-hero,
.front-page .hero-cta-row .hero-cta-secondary {
max-width: 100% !important;
}
}
/* ==========================================================================
TECHNICAL CAPABILITY — the heading
The content now carries a
after "Across", so the heading is meant to
read on two lines:
Technical Capability Across
Residential & Commercial Engineering Services.
It came out on three. The base rule caps .section-title at 750px and the
second line measures 868px, so "Services." was pushed onto a third line of
its own -- which reads as a mistake rather than a break.
Raised to 940px, which is the measured width plus room for the full stop
and a little slack. `min()` rather than a flat value so it still collapses
on a narrow screen instead of forcing a horizontal scrollbar.
========================================================================== */
.home .sectors-overview-section .section-title,
.front-page .sectors-overview-section .section-title {
max-width: min(940px, 100%) !important;
text-wrap: initial; /* the break is explicit; balancing would fight it */
}
/* ==========================================================================
TECHNICAL CAPABILITY — the two sector cards
Same structure and the same behaviour: two cards, title, description,
capability list, button. What changes is how it is set.
THE PHOTOGRAPH MOVES OFF THE CARD'S OWN BACKGROUND
css/theme-extra.css paints the image onto the card and lays a flat 82%
white wash over it to keep dark text readable. That wash is why the photo
read as grime rather than as a picture -- at 18% opacity a photograph has
no subject, only noise, and it sat at full strength directly behind the
body copy.
Here the image goes onto a ::before layer instead. That buys three things
the wash could not: it can be faded with a mask so it is strongest in the
corner away from the text and absent behind the copy, it can scale on hover
without moving the text with it, and the card keeps a solid surface so the
type sits on a known colour in both themes.
The card's own background-image is cleared with !important because the rule
it overrides carries !important too, for reasons documented where it lives.
========================================================================== */
.home .sectors-overview-section .sector-card,
.front-page .sectors-overview-section .sector-card {
position: relative;
isolation: isolate;
overflow: hidden;
align-items: stretch;
padding: clamp(1.9rem, 2.6vw, 2.5rem);
border-radius: 20px;
text-align: left;
background-image: none !important;
background-color: var(--color-surface);
/* The border token is very light; on a cream page the card edge was
barely there. Mixed with the ink for a definite hairline. */
border-color: rgba(var(--ink-rgb), 0.14);
box-shadow: 0 1px 2px rgba(var(--ink-rgb), 0.05),
0 16px 38px -22px rgba(var(--ink-rgb), 0.4);
transition: transform 0.55s cubic-bezier(0.16, 1, 0.3, 1),
box-shadow 0.55s cubic-bezier(0.16, 1, 0.3, 1),
border-color 0.55s cubic-bezier(0.16, 1, 0.3, 1);
}
[data-theme="dark"] .home .sectors-overview-section .sector-card,
[data-theme="dark"] .front-page .sectors-overview-section .sector-card {
background-color: rgba(255, 255, 255, 0.035);
}
/* ------------------------------------------------------------ the picture */
.home .sectors-overview-section .sector-card.has-sector-bg::before,
.front-page .sectors-overview-section .sector-card.has-sector-bg::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background-image: var(--sector-bg-image);
background-size: cover;
background-position: var(--sector-bg-position, center center);
background-repeat: no-repeat;
/*
* 0.34, up from 0.2. At the lower value the picture was there but not
* readable as one -- a texture rather than a building. It can afford the
* extra weight precisely because the mask below keeps it away from the
* copy, which is the whole reason for moving it off the card background.
*/
opacity: 0.34;
/*
* Strongest at the bottom-right, gone by the time it reaches the text.
* This is what lets the photograph be a real image rather than a wash:
* it never has to compete with the copy, so it does not have to be faded
* to nothing everywhere.
*
* The falloff is later and steeper than the first pass -- 0.5 at 52%
* rather than 0.35 at 45% -- so more of the picture is at full strength
* and the fade happens over a shorter distance, nearer the text.
*/
-webkit-mask-image: radial-gradient(ellipse 125% 108% at 100% 100%, #000 0%, rgba(0, 0, 0, 0.5) 52%, transparent 80%);
mask-image: radial-gradient(ellipse 125% 108% at 100% 100%, #000 0%, rgba(0, 0, 0, 0.5) 52%, transparent 80%);
transform: scale(1.02);
transition: transform 1.1s cubic-bezier(0.16, 1, 0.3, 1),
opacity 0.55s ease;
}
/*
* Dark mode needs less, not more. The card is nearly black, so the same
* opacity puts far more contrast between picture and surface than it does
* on a light card.
*/
[data-theme="dark"] .home .sectors-overview-section .sector-card.has-sector-bg::before,
[data-theme="dark"] .front-page .sectors-overview-section .sector-card.has-sector-bg::before {
opacity: 0.28;
}
/* ------------------------------------------------------- the accent edge */
/*
* A rule along the top that draws itself in on hover. It replaces the border
* colour change as the thing that says "this card is live" -- a 1px border
* going green is easy to miss, a line drawing across the top is not.
*/
.home .sectors-overview-section .sector-card::after,
.front-page .sectors-overview-section .sector-card::after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 3px;
transform: scaleX(0);
transform-origin: left center;
background: linear-gradient(90deg, var(--color-accent), var(--color-accent-hover));
transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.home .sectors-overview-section .sector-card:hover,
.home .sectors-overview-section .sector-card:focus-within,
.front-page .sectors-overview-section .sector-card:hover,
.front-page .sectors-overview-section .sector-card:focus-within {
transform: translateY(-6px);
border-color: rgba(var(--color-accent-rgb), 0.4);
box-shadow: 0 1px 2px rgba(var(--ink-rgb), 0.05),
0 34px 60px -28px rgba(var(--ink-rgb), 0.45);
}
.home .sectors-overview-section .sector-card:hover::after,
.home .sectors-overview-section .sector-card:focus-within::after,
.front-page .sectors-overview-section .sector-card:hover::after,
.front-page .sectors-overview-section .sector-card:focus-within::after {
transform: scaleX(1);
}
.home .sectors-overview-section .sector-card:hover.has-sector-bg::before,
.home .sectors-overview-section .sector-card:focus-within.has-sector-bg::before,
.front-page .sectors-overview-section .sector-card:hover.has-sector-bg::before,
.front-page .sectors-overview-section .sector-card:focus-within.has-sector-bg::before {
transform: scale(1.09);
opacity: 0.46;
}
/* ---------------------------------------------------------------- the type */
.home .sectors-overview-section .sector-card-title,
.front-page .sectors-overview-section .sector-card-title {
/* Both cards left, whatever alignment each carries from the editor. One
was left and the other centred, which is most of why the pair looked
unconsidered. */
text-align: left !important;
margin: 0 0 0.75rem;
font-size: clamp(1.3rem, 1.75vw, 1.6rem) !important;
font-weight: 800;
letter-spacing: -0.02em;
line-height: 1.25;
}
.home .sectors-overview-section .sector-card-desc,
.front-page .sectors-overview-section .sector-card-desc {
margin: 0 0 1.75rem;
max-width: 46ch;
font-size: 0.97rem;
line-height: 1.7;
color: var(--color-text-muted);
text-wrap: pretty;
}
/* ---------------------------------------------------- the capability list */
.home .sectors-overview-section .capabilities-heading,
.front-page .sectors-overview-section .capabilities-heading {
position: relative;
margin: 0 0 1rem;
padding-top: 1rem;
font-size: 0.7rem;
letter-spacing: 0.14em;
color: var(--color-text-muted);
text-align: left !important;
}
.home .sectors-overview-section .capabilities-heading::before,
.front-page .sectors-overview-section .capabilities-heading::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 34px;
height: 2px;
border-radius: 2px;
background: var(--color-accent);
}
.home .sectors-overview-section .capabilities-list,
.front-page .sectors-overview-section .capabilities-list {
gap: 2px;
margin-bottom: 1.9rem;
}
.home .sectors-overview-section .capabilities-list li,
.front-page .sectors-overview-section .capabilities-list li {
align-items: flex-start;
gap: 0.7rem;
padding: 0.5rem 0.6rem;
margin-inline: -0.6rem;
border-radius: 10px;
font-size: 0.93rem;
line-height: 1.5;
transition: background-color 0.35s ease, color 0.35s ease;
}
.home .sectors-overview-section .capabilities-list li:hover,
.front-page .sectors-overview-section .capabilities-list li:hover {
background: rgba(var(--color-accent-rgb), 0.08);
color: var(--color-text);
}
/*
* The marker. It is an empty in the content, so the tick is
* drawn here rather than added to the markup -- two rotated borders, which
* costs nothing and needs no icon font or SVG per item.
*/
.home .sectors-overview-section .capabilities-list li .dot,
.front-page .sectors-overview-section .capabilities-list li .dot {
position: relative;
flex: 0 0 auto;
width: 18px;
height: 18px;
margin-top: 0.15rem;
border-radius: 50%;
background: rgba(var(--color-accent-rgb), 0.16);
transition: background-color 0.35s ease, scale 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
.home .sectors-overview-section .capabilities-list li .dot::after,
.front-page .sectors-overview-section .capabilities-list li .dot::after {
content: "";
position: absolute;
top: 5px;
left: 6.5px;
width: 4px;
height: 8px;
border: solid var(--color-accent-hover);
border-width: 0 2px 2px 0;
transform: rotate(45deg);
}
.home .sectors-overview-section .capabilities-list li:hover .dot,
.front-page .sectors-overview-section .capabilities-list li:hover .dot {
background: rgba(var(--color-accent-rgb), 0.28);
scale: 1.1;
}
/* -------------------------------------------------------------- the button */
/*
* Pushed to the bottom of the card, so both buttons sit on one line whatever
* the lists above them do. `margin-top: auto` inside the card's flex column
* is what does it -- without it a shorter list leaves its button floating
* halfway up its neighbour.
*/
.home .sectors-overview-section .sector-card .wp-block-buttons,
.front-page .sectors-overview-section .sector-card .wp-block-buttons {
margin-top: auto;
justify-content: flex-start;
width: 100%;
}
/*
* The pill goes on the WRAPPER here, which is the opposite of the hero and
* the Careers CTA -- and getting that backwards is why the first attempt came
* out as a colourless outline.
*
* css/theme-extra.css deliberately blanks the inner link for this component
* (`background: transparent !important; color: inherit !important`) because
* .btn-sector-explore is an older rule written for a bare , so the wrapper
* is what draws the button and the link is only the label. Styling the link
* therefore lost to !important and produced a transparent button.
*
* Following the existing convention rather than reversing it: the wrapper is
* the pill, and the label inherits its colour.
*/
.home .sectors-overview-section .btn-sector-explore,
.front-page .sectors-overview-section .btn-sector-explore {
display: inline-flex !important;
align-items: center;
gap: 0.55rem;
min-height: 48px;
padding: 0 1.6rem !important;
border: 0 !important;
border-radius: 100px !important;
font-size: 0.93rem;
font-weight: 700;
letter-spacing: 0.01em;
background: linear-gradient(135deg, var(--color-accent), var(--color-accent-hover)) !important;
/* Near-black, not white: white on #26D07C is about 1.9:1. The link inside
carries `color: inherit !important`, so this is what colours the label. */
color: #04120b !important;
box-shadow: 0 14px 28px -14px rgba(var(--color-accent-rgb), 0.6);
transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.home .sectors-overview-section .btn-sector-explore::after,
.front-page .sectors-overview-section .btn-sector-explore::after {
content: "";
flex: 0 0 auto;
width: 15px;
height: 9px;
background: currentColor;
/* Drawn rather than an icon file: one arrow, no request, and it takes the
label's colour for free. */
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 14'%3E%3Cpath d='M0 7h21M15 1l6 6-6 6' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 14'%3E%3Cpath d='M0 7h21M15 1l6 6-6 6' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.home .sectors-overview-section .btn-sector-explore:hover,
.front-page .sectors-overview-section .btn-sector-explore:hover {
transform: translateY(-2px);
box-shadow: 0 20px 34px -14px rgba(var(--color-accent-rgb), 0.75);
}
.home .sectors-overview-section .btn-sector-explore:hover::after,
.front-page .sectors-overview-section .btn-sector-explore:hover::after {
transform: translateX(4px);
}
/* The existing sheet leaves an SVG arrow inside the link on some cards; the
wrapper draws one now, so two would sit side by side. */
.home .sectors-overview-section .btn-sector-explore .wp-block-button__link svg,
.front-page .sectors-overview-section .btn-sector-explore .wp-block-button__link svg {
display: none;
}
/* ==========================================================================
ARRIVAL
Keyed off `.is-visible`, which js/main.js already puts on every
`.reveal-section` when it scrolls into view. No new script, and nothing is
hidden unless that script has run -- if it never does, the cards are simply
there.
Delays come from the card's TYPE, not :nth-child. There are four cards in
the DOM -- a US and an AU variant of each -- and region-switch.js hides two
of them, so counting position would stagger against whichever pair is
showing.
========================================================================== */
.home .sectors-overview-section.reveal-section .sector-card,
.front-page .sectors-overview-section.reveal-section .sector-card {
opacity: 0;
transform: translateY(26px);
transition: opacity 0.75s cubic-bezier(0.16, 1, 0.3, 1),
transform 0.75s cubic-bezier(0.16, 1, 0.3, 1),
box-shadow 0.55s cubic-bezier(0.16, 1, 0.3, 1),
border-color 0.55s cubic-bezier(0.16, 1, 0.3, 1);
}
.home .sectors-overview-section.reveal-section.is-visible .sector-card,
.front-page .sectors-overview-section.reveal-section.is-visible .sector-card {
opacity: 1;
transform: none;
}
.home .sectors-overview-section.reveal-section .sector-card--comm,
.front-page .sectors-overview-section.reveal-section .sector-card--comm {
transition-delay: 0.13s;
}
/* The capability rows come in after their card, one behind the next, so the
list reads as filling in rather than appearing. */
.home .sectors-overview-section.reveal-section .capabilities-list li,
.front-page .sectors-overview-section.reveal-section .capabilities-list li {
opacity: 0;
transform: translateX(-10px);
transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.16, 1, 0.3, 1),
background-color 0.35s ease, color 0.35s ease;
}
.home .sectors-overview-section.reveal-section.is-visible .capabilities-list li,
.front-page .sectors-overview-section.reveal-section.is-visible .capabilities-list li {
opacity: 1;
transform: none;
}
.home .sectors-overview-section.reveal-section.is-visible .capabilities-list li:nth-child(1),
.front-page .sectors-overview-section.reveal-section.is-visible .capabilities-list li:nth-child(1) { transition-delay: 0.30s; }
.home .sectors-overview-section.reveal-section.is-visible .capabilities-list li:nth-child(2),
.front-page .sectors-overview-section.reveal-section.is-visible .capabilities-list li:nth-child(2) { transition-delay: 0.37s; }
.home .sectors-overview-section.reveal-section.is-visible .capabilities-list li:nth-child(3),
.front-page .sectors-overview-section.reveal-section.is-visible .capabilities-list li:nth-child(3) { transition-delay: 0.44s; }
.home .sectors-overview-section.reveal-section.is-visible .capabilities-list li:nth-child(4),
.front-page .sectors-overview-section.reveal-section.is-visible .capabilities-list li:nth-child(4) { transition-delay: 0.51s; }
.home .sectors-overview-section.reveal-section.is-visible .capabilities-list li:nth-child(5),
.front-page .sectors-overview-section.reveal-section.is-visible .capabilities-list li:nth-child(5) { transition-delay: 0.58s; }
.home .sectors-overview-section.reveal-section.is-visible .capabilities-list li:nth-child(6),
.front-page .sectors-overview-section.reveal-section.is-visible .capabilities-list li:nth-child(6) { transition-delay: 0.65s; }
/* ------------------------------------------------------------ narrow screens */
@media (max-width: 860px) {
.home .sectors-overview-section .sector-card,
.front-page .sectors-overview-section .sector-card {
padding: 1.6rem 1.4rem;
}
.home .sectors-overview-section .sector-card-desc,
.front-page .sectors-overview-section .sector-card-desc {
max-width: none;
}
/* One card per row, so a stagger only delays the content. */
.home .sectors-overview-section.reveal-section .sector-card--comm,
.front-page .sectors-overview-section.reveal-section .sector-card--comm {
transition-delay: 0s;
}
}
@media (prefers-reduced-motion: reduce) {
.home .sectors-overview-section.reveal-section .sector-card,
.home .sectors-overview-section.reveal-section .capabilities-list li,
.front-page .sectors-overview-section.reveal-section .sector-card,
.front-page .sectors-overview-section.reveal-section .capabilities-list li {
opacity: 1;
transform: none;
transition: none;
transition-delay: 0s;
}
.home .sectors-overview-section .sector-card:hover,
.front-page .sectors-overview-section .sector-card:hover {
transform: none;
}
.home .sectors-overview-section .sector-card:hover.has-sector-bg::before,
.front-page .sectors-overview-section .sector-card:hover.has-sector-bg::before {
transform: scale(1.02);
}
}
/* ==========================================================================
HERO MOTION (js/pages/home-hero.js)
Once the splash screen has lifted, the headline's words rise out of a mask
one after another, the subhead is wiped in left to right in a moving brand
gradient, the paragraph sharpens out of a blur and the buttons follow, the
primary with a light sweeping across it every few seconds. Scrolling
away lifts and fades the text while the film eases in. (No pointer
effects: the text and film stay still under the cursor.)
Everything keys off classes the script adds (.hh-enhanced, .hh-live,
.hh-split, .hh-on), so without it -- or under reduced motion, where it
does not run -- the hero behaves exactly as before. The script writes
--hp (scroll, 0..1) on .hero.
========================================================================== */
.hero.hh-on { --hp: 0; }
.hero-content.hh-enhanced {
transform: translate3d(0, calc(var(--hp) * -80px), 0);
opacity: calc(1 - var(--hp) * 1.3);
will-change: transform, opacity;
}
.hero.hh-on .hero-video {
transform: scale(calc(1.05 + var(--hp) * 0.08));
}
/* No transitions on these two: they follow the scroll directly. Easing them
(0.5s / 0.8s) made the top of the page trail behind the wheel, which read
as a sluggish, delayed scroll. */
/* ---- the headline: words rise out of a mask */
.hero-title.hh-split { opacity: 1 !important; transform: none !important; }
.hero-title.hh-split .hw {
display: inline-block;
overflow: hidden;
vertical-align: top;
/* room for descenders inside the mask */
padding: 0 0.02em 0.14em;
margin-bottom: -0.14em;
}
.hero-title.hh-split .hw > span {
display: inline-block;
transform: translate3d(0, 108%, 0) rotate(5deg);
transform-origin: 0 100%;
transition: transform 1.1s cubic-bezier(0.16, 1, 0.3, 1);
transition-delay: calc(var(--w, 0) * 75ms + 0.1s);
}
.hero-content.hh-live.reveal-active .hero-title.hh-split .hw > span { transform: none; }
/* ---- the subhead: wiped in, in a slow moving gradient */
.hero-title.hh-split .accent {
background: linear-gradient(100deg, #26d07c 0%, #8ff5c2 22%, #26d07c 42%, #00c2a8 70%, #26d07c 100%);
background-size: 250% 100%;
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
clip-path: inset(-0.25em 100% -0.25em 0);
transition: clip-path 1.4s cubic-bezier(0.65, 0, 0.35, 1);
transition-delay: calc(var(--hw-n, 6) * 75ms + 0.3s);
animation: hh-sheen 7s ease-in-out infinite;
}
/* background-position repaints every frame; held while the page scrolls (js/main.js) */
html.is-scrolling .hero-title.hh-split .accent { animation-play-state: paused; }
.hero-content.hh-live.reveal-active .hero-title.hh-split .accent { clip-path: inset(-0.25em -0.2em -0.25em 0); }
@keyframes hh-sheen {
0%, 100% { background-position: 100% 0; }
50% { background-position: 0 0; }
}
/* ---- the paragraph sharpens in, then the buttons */
.hero-content.hh-enhanced .hero-desc {
filter: blur(8px);
transition: opacity 1.1s cubic-bezier(0.16, 1, 0.3, 1), transform 1.1s cubic-bezier(0.16, 1, 0.3, 1), filter 1.1s cubic-bezier(0.16, 1, 0.3, 1) !important;
transition-delay: 0.95s !important;
}
.hero-content.hh-enhanced.hh-live.reveal-active .hero-desc { filter: none; }
.hero-content.hh-enhanced .hero-cta-row { transition-delay: 1.15s !important; }
/* held back until the splash has gone, so the entrance is seen */
.hero-content.hh-enhanced:not(.hh-live) .hero-desc,
.hero-content.hh-enhanced:not(.hh-live) .hero-cta-row {
opacity: 0 !important;
transform: translateY(24px) !important;
}
/* ---- a light sweeps across the primary button */
.hero-content.hh-enhanced .btn-hero {
position: relative;
overflow: hidden;
}
.hero-content.hh-enhanced .btn-hero::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 40%;
height: 100%;
background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.45), transparent);
transform: translateX(-150%) skewX(-20deg);
animation: hh-sweep 4.5s ease-in-out 2.6s infinite;
pointer-events: none;
}
/* transform, not left: the GPU runs it, so it costs nothing while scrolling */
@keyframes hh-sweep {
0%, 60% { transform: translateX(-150%) skewX(-20deg); }
100% { transform: translateX(325%) skewX(-20deg); }
}