.
This file cancels (1) inside `.rmp-page` and re-applies the RED MILLS button
design for (2). It is deliberately enqueued *between* WordPress's
global-styles and pages.css, so it out-ranks core but never out-ranks the
theme's own design rules. See rmp_assets() in functions.php.
Nothing here is a design decision - it exists purely so that converting a
page to blocks produces byte-for-byte the same layout as before.
========================================================================== */
/* --------------------------------------------------------------------------
1. Cancel core's blockGap spacing inside page content.
`:root :where(...)` matches the specificity of core's own rule (0,1,0), so
any real rule in pages.css - which loads afterwards - still wins.
-------------------------------------------------------------------------- */
:root :where(.rmp-page.is-layout-flow) > *,
:root :where(.rmp-page.is-layout-constrained) > *,
:root :where(.rmp-page .is-layout-flow) > *,
:root :where(.rmp-page .is-layout-constrained) > * {
margin-block-start: 0;
margin-block-end: 0;
}
/* List items: core gives them a blockGap margin, the original markup did not. */
:root :where(.rmp-page .wp-block-list li) {
margin-top: 0;
}
/* --------------------------------------------------------------------------
2. RED MILLS CTAs as core Button blocks.
`.rmp-ctas` stays on the wrapper (so `.rmp-hero .rmp-ctas` etc. still work);
the visual treatment moves from `.rmp-cta` on the
to the that core
renders. Colour variants are registered block styles - see rmp_block_styles().
-------------------------------------------------------------------------- */
.rmp-ctas.wp-block-buttons {
display: flex;
flex-wrap: wrap;
gap: var(--rmp-s2);
}
.rmp-ctas > .wp-block-button {
display: inline-flex;
margin: 0;
max-width: none;
}
.rmp-ctas .wp-block-button__link {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
width: auto;
min-height: 54px;
padding: 0 30px;
border: 2px solid transparent;
border-radius: 4px;
cursor: pointer;
font: 700 .875rem/1 var(--rmp-font);
letter-spacing: .09em;
text-transform: uppercase;
text-decoration: none;
background: transparent;
transition: background .18s ease, color .18s ease, border-color .18s ease, transform .18s ease;
}
.rmp-ctas .wp-block-button__link:hover {
transform: translateY(-2px);
}
/* Focus ring - see the matching note in pages.css. 2px at 2px offset is the
minimum WCAG 2.2 SC 2.4.11 accepts; the range styles below hand it their
brand colour, and dark/red bands flip it to white. */
.rmp-ctas .wp-block-button__link:focus-visible {
outline: 2px solid var(--rmp-focus, var(--rmp-ink));
outline-offset: 2px;
}
/* Colour variants (registered as Button block styles). */
.rmp-ctas .is-style-rmp-red .wp-block-button__link {
background: var(--rmp-red);
color: #fff;
}
.rmp-ctas .is-style-rmp-red .wp-block-button__link:hover {
background: var(--rmp-red-dark);
color: #fff;
}
.rmp-ctas .is-style-rmp-ghost .wp-block-button__link {
background: transparent;
color: var(--rmp-red);
border-color: var(--rmp-red);
}
.rmp-ctas .is-style-rmp-ghost .wp-block-button__link:hover {
background: var(--rmp-red);
color: #fff;
}
.rmp-ctas .is-style-rmp-white .wp-block-button__link {
background: #fff;
color: var(--rmp-red);
}
.rmp-ctas .is-style-rmp-white .wp-block-button__link:hover {
background: var(--rmp-ink);
color: #fff;
}
/* Range colour variants: same outline button, in the range's brand colour.
Leader used its darkened tint here until 28 Sep 2026; the new Leader #036355 passes AA on its own, so it now uses the base colour like the others. */
.rmp-ctas .is-style-rmp-gonative .wp-block-button__link,
.rmp-ctas .is-style-rmp-leader .wp-block-button__link,
.rmp-ctas .is-style-rmp-winner .wp-block-button__link,
.rmp-ctas .is-style-rmp-engage .wp-block-button__link {
background: transparent;
color: var(--rmp-brand);
border-color: var(--rmp-brand);
}
.rmp-ctas .is-style-rmp-gonative .wp-block-button__link:hover,
.rmp-ctas .is-style-rmp-leader .wp-block-button__link:hover,
.rmp-ctas .is-style-rmp-winner .wp-block-button__link:hover,
.rmp-ctas .is-style-rmp-engage .wp-block-button__link:hover {
background: var(--rmp-brand-deep);
border-color: var(--rmp-brand-deep);
color: #fff;
}
.rmp-ctas .is-style-rmp-gonative {
--rmp-brand: var(--rmp-gonative);
--rmp-brand-deep: var(--rmp-gonative-deep);
}
.rmp-ctas .is-style-rmp-leader {
--rmp-brand: var(--rmp-leader);
--rmp-brand-deep: var(--rmp-leader-deep);
}
.rmp-ctas .is-style-rmp-winner {
--rmp-brand: var(--rmp-winner);
--rmp-brand-deep: var(--rmp-winner-deep);
}
.rmp-ctas .is-style-rmp-engage {
--rmp-brand: var(--rmp-engage);
--rmp-brand-deep: var(--rmp-engage-deep);
}
/* Winner cat: orange outline button. Hover fills with the deeper orange and keeps the dark label (white on it is only 3.0:1). */
.rmp-ctas .is-style-rmp-winner-cat {
--rmp-brand: var(--rmp-winner-cat);
--rmp-brand-deep: var(--rmp-winner-cat-deep);
--rmp-focus: var(--rmp-winner-cat);
}
.rmp-ctas .is-style-rmp-winner-cat .wp-block-button__link {
background: transparent;
color: var(--rmp-brand);
border-color: var(--rmp-brand);
}
.rmp-ctas .is-style-rmp-winner-cat .wp-block-button__link:hover {
background: var(--rmp-brand-deep);
border-color: var(--rmp-brand-deep);
color: var(--rmp-winner-cat-ink);
}
/* Outline buttons in a range colour get a focus ring in that same colour,
so it reads as part of the button rather than a stray second border. */
.rmp-ctas .is-style-rmp-gonative,
.rmp-ctas .is-style-rmp-leader,
.rmp-ctas .is-style-rmp-winner,
.rmp-ctas .is-style-rmp-engage {
--rmp-focus: var(--rmp-brand);
}
/* Size / width modifiers, carried on the button wrapper. */
.rmp-ctas .rmp-ctabtn--lg .wp-block-button__link {
min-height: 62px;
padding: 0 44px;
font-size: 1rem;
}
.rmp-ctas .rmp-ctabtn--block,
.rmp-ctas .rmp-ctabtn--block .wp-block-button__link {
width: 100%;
}
@media (max-width: 640px) {
.rmp-ctas.wp-block-buttons {
flex-direction: column;
}
.rmp-ctas > .wp-block-button,
.rmp-ctas .wp-block-button__link {
width: 100%;
}
}