/* Legacy-parity text rendering: the old Creditas site sets
* -webkit-font-smoothing: antialiased globally, which renders type
* lighter/thinner on macOS. Webflow Code Components live in isolated
* shadow roots, so this must be declared per-component on :host to
* inherit into the shadow tree (the property does not cross the
* shadow boundary). Without it, Blink defaults to subpixel smoothing
* and identical 400-weight text looks heavier than the old site. */
:host {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/**
* SimpleImagePlusText — full-bleed section with a background image and
* an overlay text block (category pill + heading + paragraph + up to
* two CTAs).
*
* As the user scrolls past, the section scales down to 0.95 and gains
* a 16px border-radius — same `appear` keyframe the legacy site uses,
* but driven by `animation-timeline: view()` (modern CSS scroll-driven
* animations) instead of an `IntersectionObserver`. Older browsers
* degrade to the static initial state. `prefers-reduced-motion` skips
* the animation entirely.
*
* Token values inlined from @creditas-ui/themes standard:
*
* colors.primary.40 = #8edb00
* colors.primary.60 = #4f9e00
* colors.primary.100 = #1c4200
* colors.neutral.0 = #ffffff
*
* spacingY.4xl = 18px (buttons stack gap)
* spacingY.8xl = 32px (content gaps)
*
* radius.lg = 8px
*
* breakpoints.2xl = 600px
* breakpoints.4xl = 880px
* breakpoints.5xl = 1024px
*
* typography.heading.xl → 40px / 52px / 0.5px / Maison Neue Extended / 400
* typography.body.xl → 20px / 28px / 0.5px / Helvetica Now Display / 400
*
* fadedBrightnessAmount = 0.75
*/
.simple-image-plus-text,
.simple-image-plus-text *,
.simple-image-plus-text *::before,
.simple-image-plus-text *::after {
box-sizing: border-box;
}
/* ----- scroll-driven scale animation ----------------------------- */
@keyframes simple-image-plus-text-appear {
0% {
scale: 1;
border-radius: 0;
}
10% {
scale: 1;
border-radius: 16px;
}
30%,
100% {
scale: 0.95;
border-radius: 16px;
}
}
.simple-image-plus-text {
/* Default: in-flow section (used in the Webflow Designer and as a safe
* fallback). The legacy pin is layered on top via `[data-pin='on']` below,
* which the component only sets on the published site. Keeping the base
* in-flow means the Designer canvas always shows a normal, selectable block
* and props stay editable. */
position: relative;
z-index: 0;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto;
overflow: hidden;
/* Mobile: tight top padding + symmetric horizontal */
padding: 120px 24px 40px;
font-family: 'Helvetica Now Display', 'Helveticanowdisplay', sans-serif;
/* `transform-origin` keeps the scaled-down state centered as the
* scroll-driven animation runs. */
transform-origin: 50% 50%;
/* ----- legacy pin (published site only) -------------------------- *
* Set by the component's ref when the page is the top-level document
* (never in the framed Webflow Designer canvas). The section pins to the
* top and the following sections scroll OVER it.
*
* z-index:0 (NOT -1): the section must sit ABOVE the page `body` layer so
* its CTAs stay clickable while it's the exposed top-of-viewport content.
* `z-index:-1` dropped it BEHIND `body`, which then swallowed the clicks
* (CTA visible but dead). Because the following sections are `position:
* static` and live in separate code-islands, a positioned (sticky) section
* would otherwise paint OVER them; so the component's ref raises those
* following sections above this one at runtime (position:relative;
* z-index:1) and releases the pin once scrolled fully past — see `enablePin`
* in the .jsx. That keeps "next scrolls over it", prevents overlap with any
* later component, and keeps this section clickable wherever it's exposed. */
&[data-pin='on'] {
position: sticky;
top: 0;
z-index: 0;
}
@supports (animation-timeline: view()) {
@media (min-width: 600px) {
animation: simple-image-plus-text-appear both;
animation-range: contain cover;
animation-timeline: view();
}
}
@media (prefers-reduced-motion: reduce) {
animation: none;
}
@media (min-width: 600px) {
/* Tablet: large top + bottom padding, content shifted left so the
* subject of the background image (typically on the right) stays
* visible. Matches source `media.between('2xl', '5xl')`. */
padding: 178px 0 139px 94px;
}
@media (min-width: 1024px) {
/* Desktop: symmetric vertical, smaller horizontal */
padding: 176px 36px;
}
/* ----- background image ------------------------------------------ */
.image {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
filter: brightness(0.75);
pointer-events: none;
}
/* ----- content (positioned above image via z-index) -------------- */
.content {
position: relative;
z-index: 2;
width: 100%;
max-width: 1600px;
display: flex;
align-items: flex-end;
justify-content: center;
gap: 32px;
@media (min-width: 880px) {
justify-content: flex-end;
padding-right: 68px;
}
}
/* ----- text block (left-aligned vertical stack) ------------------ */
.text {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 32px;
max-width: 582px;
width: 100%;
}
/* ----- category pill --------------------------------------------- */
.pill {
display: inline-flex;
align-items: center;
padding: 4px 12px;
background: transparent;
backdrop-filter: blur(10px);
border: 1px solid #ffffff;
border-radius: 500px;
color: #ffffff;
font-size: 15px;
font-weight: 400;
line-height: 1.2;
letter-spacing: 0.3px;
}
/* ----- title ----------------------------------------------------- */
.title {
margin: 0;
color: #ffffff;
font-family: 'Maison Neue Extended', 'Maisonneueextended Book',
'Maisonneueextended', 'Helvetica Now Display', 'Helveticanowdisplay',
sans-serif;
font-weight: 400;
font-size: 40px;
line-height: 52px;
letter-spacing: 0.5px;
}
/* ----- description ----------------------------------------------- */
.description {
margin: 0;
color: #ffffff;
font-weight: 400;
font-size: 20px;
line-height: 28px;
letter-spacing: 0.5px;
/* RichText renders its content wrapped in tags. Keep them matching the
container's typography and collapse the default browser margins so the
visual result is identical to the previous plain-text
. */
& > p {
margin: 0;
font: inherit;
color: inherit;
letter-spacing: inherit;
}
& > p + p {
margin-top: 16px;
}
& strong,
& b {
font-weight: 700;
}
}
/* ----- CTAs ------------------------------------------------------ */
.ctas {
display: flex;
flex-direction: column;
gap: 18px;
width: 100%;
@media (min-width: 600px) {
flex-direction: row;
width: auto;
}
}
.cta-link {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 12px 20px;
border: 0;
border-radius: 8px;
font-family: 'Helvetica Now Display', 'Helveticanowdisplay', sans-serif;
font-weight: 500;
font-size: 16px;
line-height: 24px;
text-decoration: none;
cursor: pointer;
transition: background-color 0.2s ease, color 0.2s ease,
border-color 0.2s ease;
&:focus-visible {
outline: 2px solid #8edb00;
outline-offset: 2px;
}
&.primary {
background: #8edb00;
color: #1c4200;
&:hover {
background: #4f9e00;
color: #ffffff;
}
}
&.secondary {
background: transparent;
backdrop-filter: blur(200px);
color: #ffffff;
border: 1px solid #ffffff;
&:hover {
background: rgba(255, 255, 255, 0.12);
}
}
}
}