/* ============================================================================
EUX Blocks — Big CTA
----------------------------------------------------------------------------
Full-width hero CTA card with floating decorative icons, hover-triggered
selection frames, and a scrolling credentials marquee at the bottom.
Three theme variants (cream / light / dark) cascade from the section
wrapper. Visual reference: exports/big-cta/big-cta-standalone.css
Defensive scoping per salient-coexistence.md — every selector starts
with `.eux-block--big-cta`.
============================================================================ */
/* --------------------------------------------------------------------------
Section base — no padding because the card has its own margin
-------------------------------------------------------------------------- */
.eux-block--big-cta {
padding: 0;
}
/* --------------------------------------------------------------------------
The card — rounded, full-width with margin, multiple decorative layers
-------------------------------------------------------------------------- */
.eux-block--big-cta .eux-big-cta__card {
position: relative;
overflow: hidden;
margin: 64px auto;
max-width: 1320px;
min-height: 520px;
border-radius: 18px;
border: 1px solid var(--eux-ink-100);
box-shadow:
0 1px 2px rgba(0, 0, 0, 0.02),
0 18px 48px rgba(0, 0, 0, 0.04);
background: var(--eux-cream-50);
color: var(--eux-ink-900);
display: flex;
flex-direction: column;
/* `isolation: isolate` creates a new stacking context so the ::before
and ::after pseudo-elements stay layered correctly behind body. */
isolation: isolate;
}
/* Background dot pattern — fades out toward the bottom */
.eux-block--big-cta .eux-big-cta__card::before {
content: '';
position: absolute;
inset: 0;
background-image: radial-gradient(rgba(0, 0, 0, 0.08) 1px, transparent 1.4px);
background-size: 6px 6px;
opacity: 0.5;
pointer-events: none;
z-index: 0;
-webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 60%, rgba(0, 0, 0, 0) 100%);
mask-image: linear-gradient(180deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 60%, rgba(0, 0, 0, 0) 100%);
}
/* Purple radial glow centered at the bottom */
.eux-block--big-cta .eux-big-cta__card::after {
content: '';
position: absolute;
left: 50%;
bottom: -30%;
width: 90%;
aspect-ratio: 3 / 1;
transform: translateX(-50%);
background: radial-gradient(ellipse at center, color-mix(in srgb, var(--eux-woo-500) 42%, transparent) 0%, color-mix(in srgb, var(--eux-woo-500) 0%, transparent) 65%);
filter: blur(24px);
pointer-events: none;
z-index: 0;
}
/* --------------------------------------------------------------------------
BODY — title, sub, buttons (the editable region)
-------------------------------------------------------------------------- */
.eux-block--big-cta .eux-big-cta__body {
position: relative;
z-index: 2;
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
padding: 80px 96px;
gap: 18px;
}
.eux-block--big-cta .eux-big-cta__title {
font-family: var(--eux-font-display);
font-weight: 400;
font-size: clamp(40px, 5vw, 64px);
line-height: 1.04;
letter-spacing: -0.025em;
margin: 0;
color: var(--eux-ink-900);
text-wrap: balance;
max-width: 16ch;
/* Salient defends — see salient-coexistence.md defence 2 */
word-break: normal !important;
overflow-wrap: normal !important;
}
.eux-block--big-cta .eux-big-cta__title em {
font-style: italic;
font-weight: 300;
color: var(--eux-woo-500);
}
.eux-block--big-cta .eux-big-cta__sub {
font-family: var(--eux-font-body);
font-size: 17px;
line-height: 1.55;
color: var(--eux-ink-700);
margin: 0;
max-width: 56ch;
}
/* Buttons — inline-flex group, centered */
.eux-block--big-cta .wp-block-buttons.eux-big-cta__buttons {
display: flex;
align-items: center;
gap: 10px;
margin-top: 14px;
flex-wrap: wrap;
justify-content: center;
}
.eux-block--big-cta .wp-block-buttons.eux-big-cta__buttons .wp-block-button {
margin: 0;
}
/* Base button — ghost (secondary) style */
.eux-block--big-cta .wp-block-button .wp-block-button__link {
display: inline-flex;
align-items: center;
gap: 10px;
font-family: var(--eux-font-display);
font-size: 15px;
font-weight: 500;
padding: 14px 26px;
border-radius: 999px;
border: 1px solid transparent;
background: rgba(0, 0, 0, 0.06);
color: var(--eux-ink-900);
text-decoration: none;
transition:
background var(--eux-dur-base, 220ms) var(--eux-ease-out, ease),
color var(--eux-dur-base, 220ms) var(--eux-ease-out, ease);
}
.eux-block--big-cta .wp-block-button .wp-block-button__link:hover {
background: rgba(0, 0, 0, 0.1);
}
/* Primary button — dark filled */
.eux-block--big-cta .wp-block-button.is-style-eux-big-cta-primary .wp-block-button__link {
background: var(--eux-ink-900);
color: var(--eux-white);
}
.eux-block--big-cta .wp-block-button.is-style-eux-big-cta-primary .wp-block-button__link:hover {
background: #2a251f;
}
/* --------------------------------------------------------------------------
FLOATING ICONS — positioned via inline CSS custom props
--------------------------------------------------------------------------
Each icon has a starting position (--sx/--sy/--sr) and a hover
destination (--nx/--ny). The transition migrates them over 720ms
when the card is hovered. The border and background fade out so
they look like they've "landed" on the body.
-------------------------------------------------------------------------- */
.eux-block--big-cta .eux-big-cta__icon {
position: absolute;
z-index: 1;
width: 56px;
height: 56px;
top: var(--sy);
left: var(--sx);
transform: translate(-50%, -50%) rotate(var(--sr, 0deg));
border: 1px dashed color-mix(in srgb, var(--eux-woo-500) 40%, transparent);
border-radius: 10px;
display: grid;
place-items: center;
color: var(--eux-woo-500);
background: color-mix(in srgb, var(--eux-woo-500) 5%, transparent);
/* 720ms migration — matches the design reference. Per the ux-motion
skill this falls into "complex choreography" timing (500-700ms);
the gather effect needs the runway to read as a deliberate motion. */
transition:
top 720ms cubic-bezier(0.5, 0, 0.2, 1),
left 720ms cubic-bezier(0.5, 0, 0.2, 1),
transform 720ms cubic-bezier(0.5, 0, 0.2, 1),
border-color 220ms var(--eux-ease-out, ease),
background 220ms var(--eux-ease-out, ease);
}
.eux-block--big-cta .eux-big-cta__icon svg {
width: 24px;
height: 24px;
}
.eux-block--big-cta .eux-big-cta__card:hover .eux-big-cta__icon {
top: var(--ny);
left: var(--nx);
transform: translate(-50%, -50%) rotate(0deg);
border-color: transparent;
background: transparent;
}
/* --------------------------------------------------------------------------
SELECTION FRAMES — fade in on card hover, with corner dots
-------------------------------------------------------------------------- */
.eux-block--big-cta .eux-big-cta__frame {
position: absolute;
z-index: 1;
top: var(--fy);
left: var(--fx);
width: var(--fw);
height: var(--fh);
transform: translate(-50%, -50%);
border: 1px solid color-mix(in srgb, var(--eux-woo-500) 55%, transparent);
background: color-mix(in srgb, var(--eux-woo-500) 4%, transparent);
border-radius: 4px;
opacity: 0;
visibility: hidden;
pointer-events: none;
/* When the card isn't hovered, fade out then hide. The visibility
delay matches the icons' migration so the frames don't snap
away before icons have settled. */
transition: opacity 320ms ease 360ms, visibility 0s linear 700ms;
}
/* Four corner dots — :before/:after on the frame and on a nested */
.eux-block--big-cta .eux-big-cta__frame::before,
.eux-block--big-cta .eux-big-cta__frame::after,
.eux-block--big-cta .eux-big-cta__frame > i::before,
.eux-block--big-cta .eux-big-cta__frame > i::after {
content: '';
position: absolute;
width: 6px;
height: 6px;
background: var(--eux-woo-500);
border-radius: 1px;
}
.eux-block--big-cta .eux-big-cta__frame::before { top: -3px; left: -3px; }
.eux-block--big-cta .eux-big-cta__frame::after { top: -3px; right: -3px; }
.eux-block--big-cta .eux-big-cta__frame > i {
position: absolute;
inset: 0;
pointer-events: none;
}
.eux-block--big-cta .eux-big-cta__frame > i::before { bottom: -3px; left: -3px; }
.eux-block--big-cta .eux-big-cta__frame > i::after { bottom: -3px; right: -3px; }
.eux-block--big-cta .eux-big-cta__card:hover .eux-big-cta__frame {
opacity: 1;
visibility: visible;
transition: opacity 320ms ease 360ms, visibility 0s linear 0s;
}
/* --------------------------------------------------------------------------
MARQUEE STRIP — scrolling credentials ticker
--------------------------------------------------------------------------
Items are emitted twice in the track HTML so a 50% translateX wraps
seamlessly. 36s duration is intentionally slow — readers should be
able to actually read the text. Pauses when card is hovered (lets
visitors stop the scroll to read a specific item).
-------------------------------------------------------------------------- */
.eux-block--big-cta .eux-big-cta__strip {
position: relative;
z-index: 2;
border-top: 1px solid rgba(0, 0, 0, 0.08);
height: 56px;
overflow: hidden;
display: flex;
align-items: center;
background: transparent;
color: var(--eux-ink-700);
}
.eux-block--big-cta .eux-big-cta__strip-track {
display: flex;
gap: 56px;
flex-shrink: 0;
padding-left: 48px;
animation: euxBigCtaMarquee 36s linear infinite;
white-space: nowrap;
}
@keyframes euxBigCtaMarquee {
from { transform: translateX(0); }
to { transform: translateX(-50%); }
}
.eux-block--big-cta .eux-big-cta__card:hover .eux-big-cta__strip-track {
animation-play-state: paused;
}
.eux-block--big-cta .eux-big-cta__strip-item {
display: inline-flex;
align-items: center;
gap: 12px;
font-family: var(--eux-font-display);
font-size: 13.5px;
font-weight: 500;
color: var(--eux-ink-700);
}
.eux-block--big-cta .eux-big-cta__strip-item svg {
width: 16px;
height: 16px;
opacity: 0.8;
color: var(--eux-woo-500);
flex-shrink: 0;
}
/* ==========================================================================
THEME: CREAM (default)
========================================================================== */
.eux-block--big-cta--cream {
background: var(--eux-cream-50);
}
/* ==========================================================================
THEME: LIGHT — pure white section, white card
========================================================================== */
.eux-block--big-cta--light {
background: var(--eux-white);
}
.eux-block--big-cta--light .eux-big-cta__card {
background: var(--eux-white);
border-color: var(--eux-ink-100);
}
/* ==========================================================================
THEME: DARK — ink section, deep card with purple glow
========================================================================== */
.eux-block--big-cta--dark {
background: var(--eux-ink-900);
}
.eux-block--big-cta--dark .eux-big-cta__card {
background: #14131a;
color: var(--eux-cream-100);
border-color: rgba(255, 255, 255, 0.08);
box-shadow:
0 1px 2px rgba(0, 0, 0, 0.4),
0 24px 60px rgba(0, 0, 0, 0.5);
}
.eux-block--big-cta--dark .eux-big-cta__card::before {
background-image: radial-gradient(rgba(255, 255, 255, 0.08) 1px, transparent 1.4px);
}
.eux-block--big-cta--dark .eux-big-cta__card::after {
background: radial-gradient(ellipse at center, color-mix(in srgb, var(--eux-woo-500) 55%, transparent) 0%, color-mix(in srgb, var(--eux-woo-500) 0%, transparent) 65%);
}
/* Dark theme text */
.eux-block--big-cta--dark .eux-big-cta__title { color: var(--eux-cream-100); }
.eux-block--big-cta--dark .eux-big-cta__title em { color: var(--eux-woo-300); }
.eux-block--big-cta--dark .eux-big-cta__sub { color: rgba(244, 240, 236, 0.7); }
/* Dark theme buttons */
.eux-block--big-cta--dark .wp-block-button .wp-block-button__link {
background: rgba(255, 255, 255, 0.08);
color: var(--eux-cream-100);
}
.eux-block--big-cta--dark .wp-block-button .wp-block-button__link:hover {
background: rgba(255, 255, 255, 0.14);
}
.eux-block--big-cta--dark .wp-block-button.is-style-eux-big-cta-primary .wp-block-button__link {
background: var(--eux-cream-100);
color: var(--eux-ink-900);
}
.eux-block--big-cta--dark .wp-block-button.is-style-eux-big-cta-primary .wp-block-button__link:hover {
background: var(--eux-white);
}
/* Dark theme icons */
.eux-block--big-cta--dark .eux-big-cta__icon {
border-color: rgba(197, 140, 251, 0.45);
color: var(--eux-woo-200);
background: color-mix(in srgb, var(--eux-woo-500) 8%, transparent);
}
/* Dark theme frames */
.eux-block--big-cta--dark .eux-big-cta__frame {
border-color: rgba(197, 140, 251, 0.55);
background: color-mix(in srgb, var(--eux-woo-500) 6%, transparent);
}
.eux-block--big-cta--dark .eux-big-cta__frame::before,
.eux-block--big-cta--dark .eux-big-cta__frame::after,
.eux-block--big-cta--dark .eux-big-cta__frame > i::before,
.eux-block--big-cta--dark .eux-big-cta__frame > i::after {
background: var(--eux-woo-300);
}
/* Dark theme strip */
.eux-block--big-cta--dark .eux-big-cta__strip {
border-top-color: rgba(255, 255, 255, 0.08);
color: rgba(244, 240, 236, 0.7);
}
.eux-block--big-cta--dark .eux-big-cta__strip-item {
color: rgba(244, 240, 236, 0.75);
}
.eux-block--big-cta--dark .eux-big-cta__strip-item svg {
color: var(--eux-woo-300);
opacity: 1;
}
/* ==========================================================================
GOOGLE REVIEWS BADGE — top-right corner of the card (v0.36.1)
--------------------------------------------------------------------------
Absolutely-positioned chrome rendered by preset_bigcta_default() at
the top of the source order. Sits over the card's top-right corner
with a flat-bottom-left, rounded-top-right border-radius so it
matches the card's outer corner curvature on top-right while keeping
the inner edges crisp against the card body.
Color inversion across themes — the badge always reads as a "lifted"
overlay against its card surface:
- Cream / Light: dark badge (#0a0a0a) with cream text. The Google
"G" sits inside a white circle for the multi-color logo to read.
- Dark: cream badge with ink-900 text — full color inversion.
No animations on the badge itself; it appears with the card's
existing eux-reveal fade-in. Static-decorative chrome convention,
per the project's design-tokens-as-content principle for big-cta.
========================================================================== */
.eux-block--big-cta .eux-big-cta__reviews {
position: absolute;
top: 0;
right: 0;
z-index: 5;
display: flex;
align-items: center;
gap: 12px;
padding: 14px 22px 14px 18px;
background: #0a0a0a;
color: var(--eux-cream-100);
/* Top-right rounded matches the card's outer 24px-ish corner;
bottom-left and top-left stay flat so the badge sits flush
against the card's inner top edge. */
border-radius: 0 18px 0 16px;
font-family: var(--eux-font-display);
box-shadow: 0 8px 18px rgba(0, 0, 0, 0.15);
}
.eux-block--big-cta--dark .eux-big-cta__reviews {
background: var(--eux-cream-100);
color: var(--eux-ink-900);
box-shadow: 0 8px 18px rgba(0, 0, 0, 0.4);
}
.eux-block--big-cta .eux-big-cta__reviews-logo {
width: 30px;
height: 30px;
background: var(--eux-white);
border-radius: 999px;
display: grid;
place-items: center;
flex-shrink: 0;
}
.eux-block--big-cta .eux-big-cta__reviews-logo svg {
width: 18px;
height: 18px;
display: block;
}
.eux-block--big-cta .eux-big-cta__reviews-text {
display: flex;
flex-direction: column;
gap: 1px;
align-items: flex-start;
line-height: 1;
}
.eux-block--big-cta .eux-big-cta__reviews-rating {
font-family: var(--eux-font-display);
font-weight: 600;
font-size: 12.5px;
letter-spacing: 0.01em;
color: inherit;
}
.eux-block--big-cta .eux-big-cta__reviews-stars {
font-family: var(--eux-font-body);
font-size: 12px;
letter-spacing: 1.5px;
/* Google's brand-defined stars yellow — kept as a raw hex rather
than tokenized; this is the only place in the project that uses
it and the value is part of the Google identity. */
color: #FFC107;
line-height: 1;
margin-top: 3px;
}
.eux-block--big-cta .eux-big-cta__reviews-count {
font-family: var(--eux-font-body);
font-size: 9.5px;
font-weight: 500;
letter-spacing: 0.06em;
color: rgba(244, 240, 236, 0.6);
margin-top: 3px;
}
.eux-block--big-cta--dark .eux-big-cta__reviews-count {
color: var(--eux-ink-700);
}
/* ==========================================================================
TEAM AVATAR STACK — inline pill below the CTA buttons (v0.36.1)
--------------------------------------------------------------------------
Rendered inside .eux-big-cta__body AFTER the InnerBlocks content by
render.php. Avatar pile uses overlap (-12px margin-left on each
successive avatar) and grayscale(100%) filter so the pile reads as
a neutral "team presence" rather than competing with the brand
color. Six varied grayscale gradients keep the pile from looking
like identical circles.
Per v0.35.1 lesson, the team-label in dark mode uses pure white
(with alpha) instead of cream-100 — small descriptor text needs the
crispness; the warm-cream tint reads as off-white against ink-black.
========================================================================== */
.eux-block--big-cta .eux-big-cta__team {
display: inline-flex;
align-items: center;
gap: 14px;
margin-top: 22px;
padding: 8px 18px 8px 10px;
background: rgba(0, 0, 0, 0.04);
border-radius: 999px;
}
.eux-block--big-cta--light .eux-big-cta__team {
background: var(--eux-cream-100);
}
.eux-block--big-cta--dark .eux-big-cta__team {
background: rgba(255, 255, 255, 0.06);
border: 1px solid rgba(255, 255, 255, 0.05);
}
.eux-block--big-cta .eux-big-cta__team-stack {
display: flex;
padding-left: 12px;
}
.eux-block--big-cta .eux-big-cta__team-avatar {
width: 32px;
height: 32px;
border-radius: 99px;
margin-left: -12px;
border: 2px solid var(--eux-cream-50);
display: grid;
place-items: center;
color: rgba(255, 255, 255, 0.92);
font-family: var(--eux-font-display);
font-weight: 600;
font-size: 11px;
letter-spacing: 0.02em;
/* grayscale filter is what gives the pile its neutral team-photo
feel — even if the underlying gradients had hue, we'd flatten
them. Kept as a filter (not pre-baked into gradient hex) so
themed variants can override later if needed. */
filter: grayscale(100%);
flex-shrink: 0;
}
.eux-block--big-cta--light .eux-big-cta__team-avatar {
border-color: var(--eux-white);
}
.eux-block--big-cta--dark .eux-big-cta__team-avatar {
/* Border matches the dark card surface so each avatar reads as
"cut out" of the card rather than ringed by an extra outline. */
border-color: #14131a;
}
/* Six varied grayscale gradients so the pile doesn't read as identical
circles. Order matters — kept verbatim from the design reference. */
.eux-block--big-cta .eux-big-cta__team-avatar:nth-child(1) { background: linear-gradient(135deg, #9c9c9c 0%, #4a4a4a 100%); }
.eux-block--big-cta .eux-big-cta__team-avatar:nth-child(2) { background: linear-gradient(135deg, #6b6b6b 0%, #2c2c2c 100%); }
.eux-block--big-cta .eux-big-cta__team-avatar:nth-child(3) { background: linear-gradient(135deg, #bdbdbd 0%, #6e6e6e 100%); }
.eux-block--big-cta .eux-big-cta__team-avatar:nth-child(4) { background: linear-gradient(135deg, #545454 0%, #1f1f1f 100%); }
.eux-block--big-cta .eux-big-cta__team-avatar:nth-child(5) { background: linear-gradient(135deg, #8f8f8f 0%, #3d3d3d 100%); }
.eux-block--big-cta .eux-big-cta__team-avatar:nth-child(6) { background: linear-gradient(135deg, #767676 0%, #2a2a2a 100%); }
.eux-block--big-cta .eux-big-cta__team-label {
font-family: var(--eux-font-body);
font-size: 13px;
line-height: 1.35;
color: var(--eux-ink-700);
text-align: left;
white-space: nowrap;
margin: 0;
/* Salient defence — Salient's global paragraph rule applies
`padding-bottom: 1.5em` to every , which shifts the label
downward inside the flex-aligned team pill and breaks vertical
centering against the avatar pile. `!important` is required
because Salient's selector wins on specificity in this content
context — see salient-coexistence.md "Defence 5". The fix is
scoped to this label only, not all paragraphs in the block. */
padding: 0 !important;
}
.eux-block--big-cta .eux-big-cta__team-label b {
color: var(--eux-ink-900);
font-weight: 600;
}
.eux-block--big-cta--dark .eux-big-cta__team-label {
color: rgba(255, 255, 255, 0.78);
}
.eux-block--big-cta--dark .eux-big-cta__team-label b {
color: #FFFFFF;
}
/* ==========================================================================
MOBILE — hide floating decoration, tighten card
========================================================================== */
@media (max-width: 760px) {
.eux-block--big-cta .eux-big-cta__card {
margin: 32px 16px;
}
.eux-block--big-cta .eux-big-cta__icon,
.eux-block--big-cta .eux-big-cta__frame {
display: none;
}
.eux-block--big-cta .eux-big-cta__body {
padding: 56px 32px;
}
}
/* Smaller mobile — tighten the reviews badge and let the team pill
wrap so the descriptor doesn't overflow at narrow widths. */
@media (max-width: 600px) {
.eux-block--big-cta .eux-big-cta__reviews {
padding: 10px 14px 10px 12px;
gap: 8px;
border-radius: 0 18px 0 14px;
}
.eux-block--big-cta .eux-big-cta__reviews-logo {
width: 26px;
height: 26px;
}
.eux-block--big-cta .eux-big-cta__reviews-logo svg {
width: 16px;
height: 16px;
}
.eux-block--big-cta .eux-big-cta__reviews-rating {
font-size: 11px;
}
.eux-block--big-cta .eux-big-cta__reviews-stars {
font-size: 10.5px;
letter-spacing: 1px;
}
.eux-block--big-cta .eux-big-cta__reviews-count {
font-size: 9px;
}
.eux-block--big-cta .eux-big-cta__team {
/* v0.36.43 — centre the team pill on small mobile. inline-flex
shrinks to content and obeys the parent's text-align, but on
stacked mobile the body's natural text alignment is left, so
the pill ended up flush against the left edge. Switch the
pill to a block-level flex container with auto horizontal
margin so it self-centres regardless of the surrounding
block-level text alignment. */
display: flex;
margin: 22px auto 0;
flex-wrap: wrap;
gap: 10px;
padding: 8px 14px 8px 10px;
width: max-content;
max-width: 100%;
justify-content: center;
}
.eux-block--big-cta .eux-big-cta__team-label {
white-space: normal;
text-align: center;
}
}
/* ==========================================================================
REDUCED MOTION — disable migration + marquee
========================================================================== */
@media (prefers-reduced-motion: reduce) {
.eux-block--big-cta .eux-big-cta__icon,
.eux-block--big-cta .eux-big-cta__strip-track {
transition: none !important;
animation: none !important;
}
}