/* buttons.css — four variants, in a real hierarchy.
REBUILT 2026-09-09. The primary button used to be a pale tint (#e6eff7) with black
text, in a full pill, while the strong brand colour was spent on section backgrounds.
On an advisory site the main call to action read as a DISABLED control. That is now
inverted: the brand carries the primary action, and the pale tints have been demoted
to surface washes that never hold text.
RECOLOURED 2026-09-10: the fill is now #0000CD, 11.16:1 under its white label.
A NUMBER TO KNOW ABOUT BEFORE AN AUDIT DOES. On the dark grounds a filled primary
measures 1.50:1 against the raw ground token, and 1.35:1 against the hero scrim as
actually rendered over the photograph. The old navy fill measured 1.44:1, so this is
not a regression, and a derived deep blue ground would have measured 1.54:1 -- there
is no ground colour that fixes it.
It also does not look like a problem, which was verified and not assumed: the button
screenshots as a crisp, clearly bounded shape. WCAG's ratio is luminance-only and
this pair separates on CHROMA instead -- saturated blue on desaturated slate. Left
exactly as is. If an audit flags it, the answer is a light border on dark grounds,
not a different ground.
Pills are gone too. A fully rounded button reads consumer app; the audience here is
owners of manufacturing and professional-services companies weighing a confidential
sale, and an 8px radius reads considered rather than playful.
WHY EACH RULE IS PAIRED, AND WHY THE SELECTORS ARE THIS LONG
The prototype writes , so the class is on the
anchor. Elementor's button widget puts the class on the widget WRAPPER and renders
inside it. Styling a bare .gnt-btn would draw the pill
on the wrapper as well as the anchor — a button inside a button.
So every rule names the two places a button can legitimately land, and nothing else:
a.gnt-btn the prototype's anchor 0,1,1
.elementor-element.gnt-btn .elementor-button Elementor's anchor 0,3,0
A wrapper div carrying .gnt-btn matches neither and stays unstyled, which is the
point. Neither specificity is incidental — both have to beat upstream rules that
would otherwise take the button:
hello-elementor theme.css .page-content a{text-decoration:underline} 0,1,1
tied by a.gnt-btn, which loads later, so we win
the Elementor kit .elementor-widget-button .elementor-button
{background-color:var(--e-global-color-accent)} 0,2,0
beaten outright by the 0,3,0 form
That second one is why `.elementor-element` is in the selector rather than a bare
class: a tie would be settled by load order against a stylesheet Elementor enqueues
itself, which loads AFTER ours and would win. See elementor-bridge.css. */
a.gnt-btn,
.elementor-element.gnt-btn .elementor-button {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--space-2);
min-height: 3rem;
padding: var(--space-3) var(--space-6);
font-family: var(--font-body);
font-size: var(--text-body);
font-weight: var(--font-weight-semibold);
line-height: 1.2;
text-align: center;
text-decoration: none;
border: var(--border-width-thin) solid transparent;
border-radius: var(--radius-sm);
cursor: pointer;
transition:
background-color var(--duration-base) var(--easing-standard),
border-color var(--duration-base) var(--easing-standard),
color var(--duration-base) var(--easing-standard),
box-shadow var(--duration-base) var(--easing-standard);
}
/* ------------------------------------------------------------------ primary */
/* Brand blue, white text, and the only button on a page carrying a fill this strong.
#ffffff on #0000cd is 11.16:1. (The old note here claimed 9.4:1 on the #0b3b60 navy;
the real figure was 11.61:1, so the number was wrong before the rebrand too.) */
a.gnt-btn--primary,
.elementor-element.gnt-btn--primary .elementor-button {
background-color: var(--blue-600);
border-color: var(--blue-600);
color: var(--color-text-inverse);
box-shadow: var(--shadow-sm);
}
a.gnt-btn--primary:hover,
.elementor-element.gnt-btn--primary .elementor-button:hover {
background-color: var(--blue-500);
border-color: var(--blue-500);
box-shadow: var(--shadow-md);
}
/* ---------------------------------------------------------------- secondary */
/* Paper with a navy edge. Reads as the alternative to the primary rather than as a
second primary, which is what two filled buttons side by side always look like. */
a.gnt-btn--secondary,
.elementor-element.gnt-btn--secondary .elementor-button {
background-color: var(--paper);
border-color: var(--color-border-subtle);
color: var(--blue-600);
}
a.gnt-btn--secondary:hover,
.elementor-element.gnt-btn--secondary .elementor-button:hover {
background-color: var(--ink-050);
border-color: var(--blue-600);
}
/* ------------------------------------------------------------------ outline */
a.gnt-btn--outline-dark,
.elementor-element.gnt-btn--outline-dark .elementor-button {
background-color: transparent;
border-color: var(--color-border-strong);
color: var(--color-text-body);
}
a.gnt-btn--outline-dark:hover,
.elementor-element.gnt-btn--outline-dark .elementor-button:hover {
background-color: var(--ink-900);
border-color: var(--ink-900);
color: var(--color-text-inverse);
}
/* For dark grounds: the hero, the CTA band, --dark sections. */
a.gnt-btn--outline-light,
.elementor-element.gnt-btn--outline-light .elementor-button {
background-color: transparent;
border-color: rgba(255, 255, 255, 0.55);
color: var(--color-text-inverse);
}
a.gnt-btn--outline-light:hover,
.elementor-element.gnt-btn--outline-light .elementor-button:hover {
background-color: var(--color-text-inverse);
border-color: var(--color-text-inverse);
color: var(--navy-700);
}
/* On a dark ground the secondary needs to be legible against navy, not against
paper, so it inverts to the outline treatment. 0,4,0 to stay ahead of the base
variant rules above. */
.gnt-hero .elementor-element.gnt-btn--secondary .elementor-button,
.gnt-cta .elementor-element.gnt-btn--secondary .elementor-button,
.gnt-pagehero .elementor-element.gnt-btn--secondary .elementor-button,
.gnt-section--dark .elementor-element.gnt-btn--secondary .elementor-button {
background-color: transparent;
border-color: rgba(255, 255, 255, 0.55);
color: var(--color-text-inverse);
}
.gnt-hero .elementor-element.gnt-btn--secondary .elementor-button:hover,
.gnt-cta .elementor-element.gnt-btn--secondary .elementor-button:hover,
.gnt-pagehero .elementor-element.gnt-btn--secondary .elementor-button:hover,
.gnt-section--dark .elementor-element.gnt-btn--secondary .elementor-button:hover {
background-color: var(--color-text-inverse);
border-color: var(--color-text-inverse);
color: var(--navy-700);
}
/* -------------------------------------------------------------------- block */
a.gnt-btn--block,
.elementor-element.gnt-btn--block .elementor-button {
width: 100%;
}
/* A button widget is a block-level element in Elementor's flow, so a row of them
needs the wrapper to shrink to its content or every button spans the column. */
.elementor-element.gnt-btn {
display: inline-flex;
width: auto;
}
.elementor-element.gnt-btn--block {
display: block;
width: 100%;
}