/* ============================================================================
EUX Blocks — Simple CTA
----------------------------------------------------------------------------
A centered call-to-action card with three theme variants:
.eux-block--simple-cta--cream — cream-paper section, cream-50 card
.eux-block--simple-cta--light — white section, white card w/ soft shadow
.eux-block--simple-cta--dark — ink section, glass card w/ purple glow
Visual reference: exports/simple-cta/Gutenberg Block - Simple CTA.html
from the design package.
Defensive scoping per salient-coexistence.md — every selector starts
with `.eux-block--simple-cta`.
============================================================================ */
/* --------------------------------------------------------------------------
Section base — shared across all themes
-------------------------------------------------------------------------- */
.eux-block--simple-cta {
padding-block: 56px;
}
@media (max-width: 640px) {
.eux-block--simple-cta {
padding-block: 36px;
padding-inline: 16px;
}
}
/* --------------------------------------------------------------------------
Card — centered, with internal padding and styled content
-------------------------------------------------------------------------- */
.eux-block--simple-cta .eux-simple-cta__card {
max-width: 880px;
margin: 0 auto;
border-radius: 18px;
padding: 56px 40px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
gap: 14px;
}
@media (max-width: 640px) {
.eux-block--simple-cta .eux-simple-cta__card {
padding: 40px 24px;
}
}
/* --------------------------------------------------------------------------
Content typography — shared across themes, color set per-theme below
-------------------------------------------------------------------------- */
.eux-block--simple-cta .eux-simple-cta__kicker {
font-family: var(--eux-font-display);
font-size: 11px;
font-weight: 600;
letter-spacing: 0.18em;
text-transform: uppercase;
margin: 0;
}
.eux-block--simple-cta .eux-simple-cta__title {
font-family: var(--eux-font-display);
font-weight: 400;
font-size: clamp(28px, 3.6vw, 36px);
line-height: 1.1;
letter-spacing: -0.02em;
margin: 0;
text-wrap: balance;
max-width: 22ch;
/* Salient defends — see salient-coexistence.md defence 2 */
word-break: normal !important;
overflow-wrap: normal !important;
}
.eux-block--simple-cta .eux-simple-cta__title em {
font-style: italic;
font-weight: 300;
color: var(--eux-woo-500);
}
.eux-block--simple-cta .eux-simple-cta__sub {
font-family: var(--eux-font-body);
font-size: 15px;
line-height: 1.55;
margin: 4px 0 0;
max-width: 52ch;
}
/* --------------------------------------------------------------------------
Button styling
--------------------------------------------------------------------------
The button is a standard core/button. We style its rendered link so it
matches the design's pill-shaped purple CTA with a trailing arrow icon.
The arrow uses a CSS mask so its color follows the button's text color
(currentColor) — flips automatically between dark/light themes.
-------------------------------------------------------------------------- */
.eux-block--simple-cta .wp-block-buttons.eux-simple-cta__ctas {
margin-top: 18px;
justify-content: center;
}
.eux-block--simple-cta .wp-block-buttons.eux-simple-cta__ctas .wp-block-button {
margin: 0;
}
.eux-block--simple-cta .wp-block-button .wp-block-button__link {
display: inline-flex;
align-items: center;
gap: 10px;
background: var(--eux-woo-500);
color: var(--eux-white);
text-decoration: none;
padding: 14px 26px;
border-radius: 999px;
font-family: var(--eux-font-display);
font-size: 14px;
font-weight: 500;
border: 1px solid var(--eux-woo-500);
transition:
background var(--eux-dur-fast, 150ms) var(--eux-ease-out, ease-out),
border-color var(--eux-dur-fast, 150ms) var(--eux-ease-out, ease-out),
transform var(--eux-dur-fast, 150ms) var(--eux-ease-out, ease-out);
}
.eux-block--simple-cta .wp-block-button .wp-block-button__link:hover {
background: var(--eux-woo-700);
border-color: var(--eux-woo-700);
transform: translateY(-1px);
}
/* Trailing arrow — masked SVG. Color follows the button's text color
automatically because background-color is `currentColor`. */
.eux-block--simple-cta .wp-block-button .wp-block-button__link::after {
content: '';
display: inline-block;
width: 16px;
height: 16px;
background-color: currentColor;
-webkit-mask-image: url("data:image/svg+xml;utf8,");
mask-image: url("data:image/svg+xml;utf8,");
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: center;
mask-position: center;
-webkit-mask-size: contain;
mask-size: contain;
flex-shrink: 0;
}
/* ==========================================================================
THEME: CREAM (default) — cream section, cream-50 card with soft border
========================================================================== */
.eux-block--simple-cta--cream {
background: var(--eux-cream-100);
}
.eux-block--simple-cta--cream .eux-simple-cta__card {
background: var(--eux-cream-50);
color: var(--eux-ink-900);
border: 1px solid var(--eux-ink-200);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02);
}
.eux-block--simple-cta--cream .eux-simple-cta__kicker { color: var(--eux-woo-500); }
.eux-block--simple-cta--cream .eux-simple-cta__title { color: var(--eux-ink-900); }
.eux-block--simple-cta--cream .eux-simple-cta__sub { color: var(--eux-ink-700); }
/* ==========================================================================
THEME: LIGHT — white section, white card with subtle drop shadow
========================================================================== */
.eux-block--simple-cta--light {
background: var(--eux-white);
}
.eux-block--simple-cta--light .eux-simple-cta__card {
background: var(--eux-white);
color: var(--eux-ink-900);
border: 1px solid var(--eux-ink-100);
box-shadow:
0 1px 2px rgba(0, 0, 0, 0.04),
0 18px 48px rgba(0, 0, 0, 0.04);
}
.eux-block--simple-cta--light .eux-simple-cta__kicker { color: var(--eux-woo-500); }
.eux-block--simple-cta--light .eux-simple-cta__title { color: var(--eux-ink-900); }
.eux-block--simple-cta--light .eux-simple-cta__sub { color: var(--eux-ink-700); }
/* ==========================================================================
THEME: DARK — ink section, glass card with subtle purple radial glow
==========================================================================
The glow is a radial gradient on a ::before pseudo-element behind the
card's content. Content sits on top via z-index. */
.eux-block--simple-cta--dark {
background: var(--eux-ink-900);
}
.eux-block--simple-cta--dark .eux-simple-cta__card {
background: rgba(255, 255, 255, 0.04);
color: var(--eux-cream-100);
border: 1px solid rgba(255, 255, 255, 0.1);
box-shadow: none;
position: relative;
overflow: hidden;
}
/* Purple glow behind the content — pinned to the bottom-center of the card */
.eux-block--simple-cta--dark .eux-simple-cta__card::before {
content: '';
position: absolute;
inset: 0;
background: radial-gradient(
ellipse at 50% 110%,
rgba(166, 89, 248, 0.18) 0%,
transparent 55%
);
pointer-events: none;
z-index: 0;
}
/* Lift card content above the glow */
.eux-block--simple-cta--dark .eux-simple-cta__card > * {
position: relative;
z-index: 1;
}
.eux-block--simple-cta--dark .eux-simple-cta__kicker { color: var(--eux-woo-200); }
.eux-block--simple-cta--dark .eux-simple-cta__title { color: var(--eux-cream-100); }
.eux-block--simple-cta--dark .eux-simple-cta__title em { color: var(--eux-woo-300); }
.eux-block--simple-cta--dark .eux-simple-cta__sub { color: rgba(244, 240, 236, 0.7); }
/* Dark-theme button — cream-on-ink (inverted from purple-on-light) */
.eux-block--simple-cta--dark .wp-block-button .wp-block-button__link {
background: var(--eux-cream-100);
color: var(--eux-ink-900);
border-color: var(--eux-cream-100);
}
.eux-block--simple-cta--dark .wp-block-button .wp-block-button__link:hover {
background: var(--eux-woo-500);
color: var(--eux-white);
border-color: var(--eux-woo-500);
}