/* ==========================================================================
AcmaCorp UI Polish v1.0
--------------------------------------------------------------------------
Targeted visual corrections layered on top of design-system.css. Every rule
here fixes a defect that was measured, not assumed — see
/docs/ui-polish-changes.md for the evidence behind each block.
Load order: after design-system.css.
========================================================================== */
/* ==========================================================================
1. HERO CONTRAST FLOOR
Measured by sampling the composited pixels behind each hero headline.
Templates using .no-overlay-gradient disable the scrim entirely, so white
headlines sat on raw photography:
/contact-us/ brightest pixel 0.838 -> contrast 1.18:1
/media-room/ brightest pixel 0.587 -> contrast 1.65:1
/ (video hero) brightest pixel 1.000 -> contrast 1.00:1
Large text needs 3:1. These restore a guaranteed floor without hiding the
imagery: a left-weighted gradient that is dense where the text sits and
clears to nothing over the right of the image.
========================================================================== */
.banner.no-overlay-gradient::before {
display: block; /* was display:none — no scrim at all */
content: "";
position: absolute;
inset: 0;
z-index: 1; /* over the photograph, under the copy */
pointer-events: none;
background: linear-gradient(
100deg,
rgba(0, 20, 39, .84) 0%,
rgba(0, 20, 39, .78) 45%,
rgba(0, 20, 39, .73) 62%,
rgba(0, 20, 39, .32) 80%,
rgba(0, 20, 39, 0) 100%
);
}
/* Keep hero content above the new scrim.
Both numbers went up by one when the banner photograph became an
instead of a background: the picture needs a layer of its own beneath the
scrim, and it takes 0. Left at 0 and 1, the scrim tied with the image and
lost the tie on tree order -- which put raw photography straight back under
the contact-us headline, at the 1.18:1 this block exists to prevent. */
.banner.no-overlay-gradient .wrapper { position: relative; z-index: 2; }
.hero-banner .wrapper { position: relative; z-index: 2; }
/* ==========================================================================
2. CTA PROMINENCE AND TARGET SIZE
Measured button heights ranged across 12 values, seven of them below the
44px WCAG target-size minimum (15, 18, 27, 30, 31, 35, 42px).
Applied only to real buttons — .arrow-link-cta and similar inline text
links are deliberately excluded so they stay text links.
========================================================================== */
form .submit-btn,
.join-team-btn,
.banner-cta a,
input[type="submit"],
.ds-btn {
min-height: 48px;
display: inline-flex;
align-items: center;
justify-content: center;
line-height: 1.15;
}
/* The primary CTA should read as the primary action. */
form .submit-btn,
.banner-cta a {
font-weight: var(--ds-weight-medium, 500);
letter-spacing: var(--ds-tracking-wide, .03em);
}
/* ==========================================================================
3. ICON CONSISTENCY
Icons in .icon-svg rendered at 69x23, 69x69 and 85x85 depending on the
source asset, because only .icon-text-card constrained the box.
One box, object-fit: contain, so mixed aspect ratios align optically.
========================================================================== */
.icon-svg {
display: inline-flex;
align-items: center;
justify-content: flex-start;
width: 64px;
height: 64px;
}
.icon-svg img,
.icon-svg svg {
width: 100%;
height: 100%;
object-fit: contain;
object-position: left center;
}
/* .icon-text-card already declares its own 85px box — keep it. */
.icon-text-card .icon-svg { width: 80px; height: 80px; }
/* Inline glyphs (arrows, chevrons, social) snap to a 20px optical box. */
.social-links img,
.social-links svg { width: 20px; height: 20px; object-fit: contain; }
/* ==========================================================================
5. SECTION HIERARCHY
Measured heading sizes showed an inversion: the most common h2 rendered at
20px while h3 and h4 rendered at 24px, so section titles read smaller than
the headings nested beneath them. Footer column headings were also marked
up as h2/h5, which both caused the inversion and produced the h2->h5 skip
found in the audit. The markup fix is in footer.php; this guarantees the
visual order inside page content regardless of markup.
========================================================================== */
main :is(section, .section) > .wrapper > h2{
font-size: var(--ds-display-3);
line-height: var(--ds-leading-tight);
}
/* These two are the *default* size for an unstyled sub-heading inside a
section, not a decision about any particular component. Written as
`main :is(...) h3` they carried (0,2,1), which quietly beat every component
class -- .acma-card__title and .acma-feature-row__title both rendered at
2rem instead of their own scale, and the only ways out were !important or
an ever-longer selector. Wrapping both parts in :where() drops them to
(0,0,1): still a default for a bare h3, now beaten by any class that has an
opinion. Verified against a census of all 90 h3/h4 in sections across 14
pages: 16 moved. Thirteen are component titles finally getting their own
scale (.acma-card__title 32 -> 17, .acma-post-card__title 32 -> 20). The
other three are unclassed h4s on /product/consultpro/ that drop 28 -> 24,
where a (0,1,1) rule in style.css now wins the default. Both sizes are on
the scale and both sit below the h3 above them, so that is a change, not a
regression. */
main :where(section, .section) :where(h3) { font-size: var(--ds-display-4); }
main :where(section, .section) :where(h4) { font-size: var(--ds-display-4); }
/* The region/language modal sits outside