filling it at width/height:100% — two levels, not one. A single
with top/right/bottom/left set but no explicit width/height does
NOT stretch to fill that box (CSS replaced-element sizing falls back to
the image's own intrinsic aspect ratio instead — confirmed by measuring
computed style, it rendered at its native ~1.22 aspect ratio, running
into the girl's face on card 1). Adding width/height:100% directly on
that same element doesn't fix it either — percentage height on an
absolutely positioned box resolves against the containing block, which
then over-constrains against the bottom offset and CSS drops bottom
instead, stretching it to the full card height. A plain (non-replaced)
with all four insets set doesn't have either problem — it just
sizes itself to exactly the box they imply — so the fill has to happen
one level in, same shape Figma's own export used (wrapper div with the
insets, inner img at size-full) though this got flattened away below
when the crops were pre-multiplied to one level for an unrelated
Chromium bug — that trick doesn't apply here, this isn't oversized/
cropped, just filled. */
.hero-card-bg-pattern { position: absolute; transform: translateZ(-18px); backface-visibility: hidden; }
.hero-card-bg-pattern img { display: block; width: 100%; height: 100%; }
.hero-card--1 .hero-card-bg-pattern { top: 3.32%; right: 4.59%; bottom: 62.55%; left: 4.73%; }
.hero-card--2 .hero-card-bg-pattern { top: 22.31%; right: -15.37%; bottom: 47.6%; left: 20.9%; }
.hero-card--3 .hero-card-bg-pattern { top: 2.52%; right: 6.22%; bottom: 60.17%; left: 6.47%; }
/* Cards 4/5's pattern insets read off Figma's own CSS `inset()` calc
strings for these vectors (e.g. card 4's was
`inset(calc(10.3%-2.38px) 50% calc(53.43%+0.21px) calc(-28.86%-4.73px))`
in top/right/bottom/left order) — the px terms are Figma's own sub-pixel
correction on top of its percentage, folded in here as one combined
percentage against this box's true 402x874 (same conversion the other
three cards' numbers above came from, just done by hand from raw Figma
node coordinates instead since these two weren't in the original
figma-to-code pass). */
.hero-card--4 .hero-card-bg-pattern { top: 10.03%; right: 50%; bottom: 53.45%; left: -30.04%; }
.hero-card--5 .hero-card-bg-pattern { top: -3.92%; right: 37.63%; bottom: 61.18%; left: -17.67%; }
/* All five photos: Figma's raw asset export kept coming back blank (cards
1-3) or a flattened, un-cropped, fully-opaque fill (cards 4/5 — same
underlying export quirk, just surfacing as "wrong" pixels instead of a
blank one) for these, so all five are get_screenshot captures instead —
clean transparent-background portrait cutouts, already close to the
card's own aspect ratio, so a plain object-fit: cover fill (small
~5%/~2% edge crop on cards 1/3, near-exact match on the rest) is all
they need — no more per-card crop-of-a-crop percentage math to
hand-derive from Figma's nested fill transform, and none of that math's
fragility. Cards 4/5 specifically are screenshots of the whole
402x874 phone-frame node (not just the inner photo layer) — Figma
auto-clips a contentsOnly screenshot to its nearest overflow:hidden
ancestor, so this conveniently comes back already zoomed/cropped
exactly as it appears through the phone frame's own window, matching
cards 1-3's photos being close-to-drop-in crops too. */
.hero-card-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; max-width: none; transform: translateZ(6px); backface-visibility: hidden; }
.hero-card-prop {
position: absolute;
width: 100%;
height: 100%;
object-fit: contain;
}
/* Floating props (headphones/sunglasses/pepper/basil) inherit the card's
real 3D tilt like everything else (no transform of their own needed for
that part), plus their own gentle, continuous orbit drift on top — a
small independent translate loop around their resting spot within that
already-tilted plane, echoing the satellite-decoration motion on
linktr.ee's own marketing hero (the phone stays put, the record/
headphones/social icons around it keep drifting). Runs independently of
the card-flip cycle and of the other props' own drift — each prop gets
its own duration/delay/direction so they don't move in lockstep. This
translate is its own transform, so — same Chromium quirk as noted on
.hero-card — it needs its own backface-visibility: hidden restated. */
.hero-card-prop-box {
position: absolute;
animation: heroPropOrbit 8s ease-in-out infinite;
backface-visibility: hidden;
will-change: transform;
}
.hero-card--1 .hero-card-prop-box { left: 41.865%; top: 0%; width: 58.144%; height: 34.365%; animation-duration: 7.5s; }
.hero-card--2 .hero-card-prop-box { left: 48.702%; top: 0%; width: 66.446%; height: 31.708%; animation-duration: 8.6s; animation-direction: reverse; }
.hero-card--3 .hero-card-prop-box.is-pepper { left: 56.212%; top: 0%; width: 46.868%; height: 26.725%; animation-duration: 9.2s; }
.hero-card--3 .hero-card-prop-box.is-basil { left: 49.65%; top: 30%; width: 70.13%; height: 39.014%; animation-duration: 7s; animation-delay: -3s; animation-direction: reverse; }
/* Football helmet (Figma "image 1513") and guitar (Figma "image 1517") —
get_screenshot contentsOnly captures of their own node, same fix as
the person photos above (the first pass here used download_assets'
raw-image export instead, which came back with the studio black
backdrop baked in for the helmet — screenshot-of-the-node is the
transparent-cutout version Figma actually displays). Neither needs
is-pepper/is-basil's oversized-sprite object-fit:fill treatment; the
base .hero-card-prop rule's plain contain works fine on both. The
guitar's own -7.24deg Figma tilt is already baked into its screenshot's
pixels (captured from its rotated wrapper node), so no extra CSS
rotate is needed here the way sunglasses/basil need one. Position/size
for both read off their frame's own coords relative to the overall
stage group (Figma nodes 3319:109040 / 3320:109067), converted through
the phone-frame anchor the same way the bg-pattern insets above were. */
.hero-card--4 .hero-card-prop-box.is-helmet { left: 37.03%; top: -0.87%; width: 61.22%; height: 32.27%; animation-duration: 8.3s; }
.hero-card--5 .hero-card-prop-box.is-guitar { left: 37.69%; top: 2.38%; width: 65.72%; height: 58.73%; animation-duration: 7.8s; animation-direction: reverse; }
/* translateZ(-40px) — BEHIND the phone card (which sits at 0px) — matches
Figma's own layer order: in the source file every floating prop (the
headphones, the sunglasses, the pepper/basil) is stacked underneath its
iPhone frame, so it peeks out from behind the card's silhouette rather
than floating in front of it. The orbit drift on top just keeps it from
looking pinned in place. */
@keyframes heroPropOrbit {
0% { transform: translateZ(-40px) translate(0%, 0%); }
25% { transform: translateZ(-40px) translate(4%, -5%); }
50% { transform: translateZ(-40px) translate(0%, -7%); }
75% { transform: translateZ(-40px) translate(-4%, -2%); }
100% { transform: translateZ(-40px) translate(0%, 0%); }
}
@media (prefers-reduced-motion: reduce) {
.hero-card-prop-box { animation: none; transform: translateZ(-40px); }
}
/* Card 3's two floating props (pepper/basil) were exported by Figma as two
crops of the SAME shared sprite sheet (a 3x3 veggie/spice grid — a
Figma asset-bundling quirk, not a mistake on our end) rather than two
standalone images like cards 1 & 2's headphones/sunglasses — so these
need the same crop-by-percentage treatment as the phone photos above
instead of a plain object-fit: contain. */
.hero-card-prop-box.is-pepper,
.hero-card-prop-box.is-basil { overflow: hidden; }
.hero-card-prop-box.is-pepper .hero-card-prop,
.hero-card-prop-box.is-basil .hero-card-prop { width: auto; height: auto; max-width: none; object-fit: fill; }
.hero-card-prop-box.is-pepper .hero-card-prop { left: -20.18%; top: -111.47%; width: 331.84%; height: 339.45%; }
.hero-card-prop-box.is-basil .hero-card-prop { left: -9.22%; top: -254.55%; width: 327.43%; height: 373.74%; }
/* Figma rotates several floating props on their own axis, independent of
the shared card tilt — a per-prop styling flourish (a "tossed" pose),
confirmed straight from Figma's own layer transforms, not a guess: the
sunglasses sit at rotate(32.61deg) and the basil sprig at
rotate(-154.09deg) (near upside-down), while the headphones and pepper
carry no extra rotation of their own. Sunglasses use plain
object-fit: contain, so the rotation goes straight on .hero-card-prop.
Basil is a crop-of-a-sprite-sheet (see above) — its crop math already
depends on left/top/width/height on that same element, so rotating that
element too would pivot around the oversized, off-center crop source
instead of the visible tile; needs its own unrotated wrapper between
the overflow:hidden crop box and the rotation, matching Figma's actual
nesting (rotate wraps the crop, not the other way around). */
.hero-card--2 .hero-card-prop { transform: rotate(32.61deg); backface-visibility: hidden; }
.hero-card-prop-tilt { position: absolute; inset: 0; transform: rotate(-154.09deg); backface-visibility: hidden; }
/* transform-style: preserve-3d here is the actual fix for the icon
"残影" ghosting reported on a real phone (invisible in a desktop-
Chromium screenshot — see the will-change comment on the img rule
below for that same caveat; this needed the real-device report to
even see, then a structural read of the DOM to explain).
Every OTHER animated layer in this card (.hero-card-phone,
.hero-card-photo, .hero-card-product, .hero-card-prop-box) has its own
translateZ/backface-visibility set directly on the element that's a
DIRECT child of the rotating .hero-card. This one doesn't: .hero-card
> .hero-card-icons > img is two levels deep, with .hero-card-icons
itself carrying no transform of its own — meaning it defaults to
transform-style: flat. A flat box sitting between a preserve-3d
ancestor that's actually ROTATING (.hero-card's rotateY flip) and a
further-transformed descendant (each img's own translateZ +
backface-visibility: hidden) is exactly the shape that trips a real
WebKit bug: the flat wrapper can flatten the 3D scene at that point,
so each img's backface-visibility ends up computed against its own
lone translateZ instead of the FULL accumulated rotation up through
.hero-card — which never itself includes a rotateY, so the icon
never actually reads as "facing away" and paints through even while
its own card is supposedly hidden mid-flip (seen as another card's
icons, in that card's own tint, bleeding through at a mirrored
position). preserve-3d keeps this wrapper in the same continuous 3D
context as its ancestor and descendant instead of breaking the chain
between them — no other property here needed to change. */
.hero-card-icons {
position: absolute;
left: 79.724%;
top: 70.263%;
width: 12.472%;
height: 26.856%;
display: flex;
flex-direction: column;
justify-content: space-between;
transform-style: preserve-3d;
}
/* will-change is what's missing here, not just backface-visibility — every
OTHER layer in this stack that runs its own animation every 9s lap
(.hero-card, .hero-card-product, .hero-card-prop-box) already carries
will-change: transform; these icons never got it. Without it, a mobile
GPU compositor can fall back to re-rastering this element's bitmap each
frame instead of keeping it on its own promoted layer — during the fast
pop-in (opacity+scale both moving at once, see heroIconPop1/2/3 below)
that shows up as a trailing "残影" ghost of the icon's previous frame,
reported on a real phone (not reproducible in a desktop-Chromium
screenshot, which is why this needed the real-device report to catch). */
.hero-card-icons img { display: block; width: 100%; aspect-ratio: 1; backface-visibility: hidden; will-change: transform, opacity; }
/* Entrance: the 3 reaction icons read as one (the heart) until the card
turns to face forward, then fan out into their column, staggered heart →
comment → bookmark. Riding the exact same 9s heroCardFlip duration and
per-card animation-delay as .hero-card (0s/-6s/-3s) is what syncs the pop
to "the instant this card is readable" instead of an arbitrary loop of
its own. Comment/bookmark start collapsed onto the heart's own slot —
translateY by their flex-column offset (space-between math: icon
12.472% stage-width square, container 26.856% stage-height) rather than
a guessed number — and slide down into place a beat after it, each with
a quick overshoot-then-settle scale for a "popping" feel instead of a
flat fade.
Originally this whole cascade ran AFTER landing (0%→5.5% of the hold),
and stayed settled (opacity 1, scale 1) for the entire rest of the 9s
— icons are a persistent UI element, visible through basically the
whole loop, not just a momentary flash.
Retimed the ARRIVAL to sync with heroCardFlip's fast leg — same
94.444%→95.556% window (the fast leg — see heroProductPop's own
comment below for why that's the sync point, not wherever the slow
leg happens to end). This sync point didn't move even when the flip
around it got retimed twice (see heroCardFlip's own comment for that
history) — fast/slow ended up back at their original 100ms/400ms
values, so 94.444%/95.556% are the exact same numbers this component
has always used. First pass moved the whole keyframe wholesale and
accidentally inverted which part of the cycle is "hidden" vs
"settled": it had icons hidden from 0% all the way to the reveal
window (i.e. invisible for the entire hold — the one time they're
supposed to be sitting there plainly visible!) and only actually on
screen for the brief tail. Fixed by keeping heroProductPop's own shape:
settled (visible) across 0%→26.889% (heroCardFlip's own flip-out-end —
this IS the one number here that tracks the flip's own retiming, same
boundary reused here so this doesn't need its own separate derivation),
THEN drift down to the hidden/collapsed starting pose sometime in the
long invisible 26.889%→hidden-until stretch — moot on screen either
way, backface-visibility hides the whole card then — arriving at
collapsed exactly at each icon's own hidden-until point so the
reveal→settle stagger (heart→comment→bookmark, same relative rhythm
throughout this component's history) still lands inside it, ending
together with the tag and the flip's fast leg. */
.hero-card-icons img { animation: heroIconPop1 15s linear infinite; }
.hero-card-icons img:nth-child(2) { animation-name: heroIconPop2; }
.hero-card-icons img:nth-child(3) { animation-name: heroIconPop3; }
.hero-card--1 .hero-card-icons img { animation-delay: 0s; }
.hero-card--2 .hero-card-icons img { animation-delay: -12s; }
.hero-card--3 .hero-card-icons img { animation-delay: -9s; }
.hero-card--4 .hero-card-icons img { animation-delay: -6s; }
.hero-card--5 .hero-card-icons img { animation-delay: -3s; }
/* Percentages rescaled for the 15s/5-way lap — see heroCardFlip's own
comment for the method (front-anchored stops ×(old/new), end-anchored
stops keep their absolute distance from the end instead) and for the
--1/--3/--4/--5/--2 delay fix that came with this same pass. */
@keyframes heroIconPop1 {
0%, 16.000% { opacity: 1; transform: translateZ(34px) scale(1); }
96.534% { opacity: 0; transform: translateZ(34px) scale(0.5); }
97.000% { opacity: 1; transform: translateZ(34px) scale(1.1); }
97.334%, 100% { transform: translateZ(34px) scale(1); }
}
@keyframes heroIconPop2 {
0%, 16.000% { opacity: 1; transform: translateZ(34px) translateY(0%) scale(1); }
96.734% { opacity: 0; transform: translateZ(34px) translateY(-134.75%) scale(0.5); }
97.200% { opacity: 1; transform: translateZ(34px) translateY(0%) scale(1.1); }
97.534%, 100% { transform: translateZ(34px) translateY(0%) scale(1); }
}
@keyframes heroIconPop3 {
0%, 16.000% { opacity: 1; transform: translateZ(34px) translateY(0%) scale(1); }
96.934% { opacity: 0; transform: translateZ(34px) translateY(-269.47%) scale(0.5); }
97.400% { opacity: 1; transform: translateZ(34px) translateY(0%) scale(1.1); }
97.734%, 100% { transform: translateZ(34px) translateY(0%) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
.hero-card-icons img { animation: none; transform: translateZ(34px); opacity: 1; }
}
/* Single-tag product card (cards 1 & 2) — same box both cards. */
.hero-card-product {
position: absolute;
left: 0%;
top: 66.958%;
width: 67.715%;
height: 33.042%;
border-radius: var(--radius-md);
padding: 4.9% 4.9% 0;
display: flex;
flex-direction: column;
transform-origin: 100% 100%;
animation: heroProductPop 15s linear infinite;
backface-visibility: hidden;
will-change: transform;
}
.hero-card--1 .hero-card-product { background: #4d3fe9; animation-delay: 0s; }
.hero-card--2 .hero-card-product { background: #131870; animation-delay: -12s; }
.hero-card--3 .hero-card-product { animation-delay: -9s; }
.hero-card--4 .hero-card-product { background: #cbf484; animation-delay: -6s; }
.hero-card--5 .hero-card-product { background: #fee26b; animation-delay: -3s; }
/* This product tag is its own layer (translateZ'd in front of the phone,
see the parallax comment above .hero-card-phone), so it can carry its
own pop-in without touching .hero-card's rotation or any sibling layer
— riding the same 9s cycle + per-card delay as heroCardFlip is what
syncs it. Growth is anchored at the tag's own bottom-right corner
(transform-origin above).
Settles to scale(1) at 95.556% — the same instant heroCardFlip's fast
leg (30° in 100ms) completes, so it still finishes in sync with that
flip, NOT with the (longer, 400ms) slow leg that follows it — the sync
point is the fast leg specifically, unaffected by that leg's own
duration changing. This briefly widened to the whole fast+slow window
during a retiming pass that shrank the fast leg down to 30ms (too
quick on its own for a grow to read) — see heroCardFlip's own comment
for why that pass got reverted; fast is back to 100ms, so the original
sync-to-fast-leg-only shape works again unchanged. The grow spans the
FULL 94.444%→95.556% window (all 100ms of the fast leg): with
heroCardFlip's own coast leg soaking up the invisible 0°→90° travel
first, this fast leg starts already inside the visible arc, not
edge-on — unlike the direct-180°-split versions tried before, where
the fast leg's own opening stretch was still off-screen and the grow
had to be confined to a truncated visible tail to be seen at all.
Plain, single scale(0)→scale(1) — cubic-bezier eased for a silky (not
linear/mechanical) feel — no overshoot, that was tried and explicitly
not wanted, just a clean grow landing exactly when the fast leg does. */
@keyframes heroProductPop {
0%, 16.000% { transform: translateZ(22px) scale(1); }
96.534% { transform: translateZ(22px) scale(0); animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1); }
98.534%, 100% { transform: translateZ(22px) scale(1); }
}
.hero-card-product-photo {
flex: 1 1 auto;
border-radius: var(--radius-sm);
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
.hero-card--1 .hero-card-product-photo { background: #cde900; }
.hero-card--2 .hero-card-product-photo { background: #c7b5fb; }
.hero-card--4 .hero-card-product-photo { background: #131870; }
.hero-card--5 .hero-card-product-photo { background: #d24028; }
.hero-card-product-photo img { width: 100%; height: 100%; object-fit: cover; }
.hero-card--1 .hero-card-product-photo img { object-fit: contain; }
.hero-card--2 .hero-card-product-photo img { transform: scaleX(-1); backface-visibility: hidden; }
/* Card 5's cassette-player photo (Figma "image 1516") sits noticeably
smaller than its own backer box in the source (a centered, floating
placement, not an edge-to-edge fill like the skateboard/cream-jar
tags) — same "contain, not cover" treatment as card 1's headphone jar
for the same reason: the photo is meant to float with visible padding,
not crop to fill. */
.hero-card--5 .hero-card-product-photo img { object-fit: contain; }
.hero-card-product-label {
padding: 10% 0 8%;
font-family: "Tomato Grotesk SemiBold", Arial, sans-serif;
font-weight: 600;
/* Was a vw-relative clamp(0.9375rem, 4.6vw, 1.125rem) — that tracked
VIEWPORT width on the assumption .hero-card-stage's own width tracks
it too. It doesn't: .hero-card-stage is a flat 320px at every width
from 640px up (measured — it hits its own max-width immediately) and
a flat 258px at every width below that (the mobile override further
down). A vw-relative font over a viewport-independent box is why
"Moisturizing Cream" grew right past the card's edge on real phones
wider than ~390px, even though it fit fine on paper at 320px. Fixed
size instead, tuned to the 320px-stage regime (measured to exactly
fill the tag's own width, see the ≤639.98px override below for the
258px regime's own size). */
font-size: 1.125rem;
white-space: nowrap;
}
/* Same-specificity override, so — same trap .hero-card-stage's own
≤639.98px rule already ran into (see that comment) — this has to come
AFTER the unconditional rule above to actually win the cascade; placing
it back up near .hero-card-stage's own mobile override would silently
lose to this later rule instead. Measured against "Moisturizing Cream",
the longest label this tag ever holds, at the 258px stage width that
override cap produces. */
@media (max-width: 639.98px) {
.hero-card-product-label { font-size: 0.875rem; }
}
.hero-card--1 .hero-card-product-label { color: #ffc1d7; }
.hero-card--2 .hero-card-product-label { color: #cde900; }
.hero-card--4 .hero-card-product-label { color: #7b0006; }
.hero-card--5 .hero-card-product-label { color: #027b91; }
/* Twin overlapping tag cards (card 3 only: Pot behind, Gloves in front,
same "single tag" internals but half the width and centered text). */
.hero-card-product--twin {
width: 39.56%;
height: 33.042%;
top: 66.084%;
/* Percentage padding resolves against the CONTAINING BLOCK's width — for
an absolutely positioned element that's .hero-card (i.e. the stage),
not this card's own (much narrower, 39.56%-of-stage) width. The old
"8% 8% 0" was sized as if it were 8% of the card itself; against the
real containing block that came out to ~25px of padding on a ~125px-
wide card, squeezing the inner photo box down to ~60% width instead
of Figma's ~85% — exactly the "container's too small" mismatch. These
numbers are the Figma pixel offsets (17.78/19px on a 237.175px-wide,
599.62px-stage-relative card) converted directly to %-of-stage-width. */
padding: 3.169% 3% 0;
text-align: center;
}
.hero-card-product--twin.is-pot { left: -12.51%; background: #cde900; }
/* Pot and Gloves don't actually overlap in Figma — confirmed straight from
its own layout numbers, there's a small gap between them — so both stay
at the same translateZ(22px) as the base .hero-card-product rule
(inherited, no override here). An earlier translateZ(26px) "put Gloves
in front" push (from before this was checked against Figma) was pulling
it measurably closer to the camera than Pot, which under perspective
both enlarges it and shifts its projected position — rendering it
visibly bigger and overlapping Pot instead of the plain side-by-side
pair Figma actually shows. */
.hero-card-product--twin.is-gloves { left: 28.781%; background: #027b91; }
.hero-card-product--twin .hero-card-product-photo { background: #e6efd3; }
.hero-card-product--twin.is-gloves .hero-card-product-photo { background: #cbf484; }
/* Pot now uses the same plain object-fit:contain fill as every other
product photo — the earlier oversized+offset crop-then-rotate tile
(read off Figma's own fill transform) was fighting a source photo that
had a lot of empty canvas baked in, and even with the rotation removed
it still left the teapot visibly stretched (object-fit: fill doesn't
preserve aspect ratio). Swapped the source asset for a tightly-cropped,
level render (Figma node 3275:107330) instead of re-deriving crop math
for the old one, so the plain shared rule below is enough. */
.hero-card-product--twin .hero-card-product-photo img { object-fit: contain; }
.hero-card-product--twin.is-gloves .hero-card-product-photo img { object-fit: cover; }
/* Box sizes stay shared between the twins (layout/label positions must
match) — sized the two photos relative to each other with a plain
scale on the img itself instead, still centered by the flex box above
and clipped by its overflow:hidden. */
.hero-card-product--twin.is-pot .hero-card-product-photo img { transform: scale(1.15); }
.hero-card-product--twin.is-gloves .hero-card-product-photo img { transform: scale(0.85); }
.hero-card-product--twin.is-pot .hero-card-product-label { color: #131870; }
.hero-card-product--twin.is-gloves .hero-card-product-label { color: #cde900; }
/* ==========================================================================
AI feature rows — read out of the Quacko Framer site: dot+label eyebrow,
big paragraph, dark pill CTA, grain-gradient card with a white content
card + dark status pill. Card content is invented for Quacko's product;
the composition (colors, layering, pill-under-card) is the real thing.
========================================================================== */
.ai-rows {
position: relative;
isolation: isolate;
display: flex;
flex-direction: column;
gap: 56px;
background-color: var(--ai-rows-color, #007b91);
transition: background-color 80ms linear;
will-change: background-color;
/* Real, recurring bug (same root cause as the ones already fixed on
.hero and .why-quacko-card--stat, and the one already documented on
's overflow-x:hidden rule — "reported on mobile FAQ"): every
.ai-visual card ([data-visual-reveal]) starts scaled up 15% before
JS's IntersectionObserver reveals it, overhanging ~11px past both of
its own edges until that fires. Unclipped, that's real page-level
overflow, not an inert bleed — reachable via a horizontal drag/pan on
a real device regardless of scroll position, which is exactly why it
was showing up as a "gap" all the way down at the FAQ section, well
after these cards. 's own overflow-x:hidden alone isn't
reliably enough to stop that on-device. .ai-rows is itself already a
top-level, un-padded, full-viewport-width
(confirmed:
left/right match the viewport exactly), so clipping here removes the
overflow without cutting into anything — .ai-row's own ::before/
::after full-bleed color-transition backgrounds (100vw + translateX
centering) already resolve to that exact same width, so they're
unaffected. */
overflow-x: hidden;
}
.ai-rows > .container {
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
gap: 32px;
}
.ai-row {
position: relative;
isolation: isolate;
display: flex;
flex-direction: column;
gap: 32px;
padding-block: 32px;
}
.ai-row > * {
position: relative;
z-index: 1;
}
/* One viewport-anchored grid shared by all three feature rows. Using the
same value on both background axes guarantees square cells; anchoring
the pattern to the viewport's right edge prevents a clipped final
column and avoids the content container leaving an unpainted strip. */
.ai-rows::before {
--mosaic-cell: clamp(56px, 5.5vw, 96px);
content: "";
position: absolute;
inset-block: 0;
right: 0;
z-index: 0;
display: none;
width: 44vw;
overflow: hidden;
pointer-events: none;
background-image:
linear-gradient(to right, rgba(20, 18, 15, 0.13) 1px, transparent 1px),
linear-gradient(to bottom, rgba(20, 18, 15, 0.13) 1px, transparent 1px);
background-size: var(--mosaic-cell) var(--mosaic-cell);
background-position: right top;
}
/* Retained in the markup for compatibility, but the shared section layer
above now draws the grid and these elements must never become flex items. */
.ai-row-mosaic {
display: none;
}
.ai-row::before,
.ai-row::after {
content: "";
position: absolute;
inset-block: 0;
left: 50%;
z-index: 0;
width: 100vw;
transform: translateX(-50%);
pointer-events: none;
display: none;
}
.ai-row::after {
opacity: var(--row-color-progress, 0);
transition: opacity 140ms linear;
will-change: opacity;
}
.ai-row:nth-child(1)::before {
background: #fff;
}
.ai-row:nth-child(1)::after {
background: #007b91;
}
.ai-row:nth-child(2)::before {
background: #007b91;
}
.ai-row:nth-child(2)::after {
background: #ff9e5c;
}
.ai-row:nth-child(3)::before {
background: #ff9e5c;
}
.ai-row:nth-child(3)::after {
background: #f5c3d6;
}
.ai-copy { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.ai-copy-bottom { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
/* Icon badges above each row's title — Figma "Quacko Team" file, node
3240:106600 ("icons", above the Product Highlight headings). Each row
gets its own fixed badge/icon color pair straight from that frame,
independent of the row's own background color. Figma frame itself is
96x96; sized down 20% from that (96 -> 76.8px, radius scaled the same
25% ratio) per spec, then a further 10% (76.8 -> 69.12px, radius
19.2 -> 17.28px) on request. The search/outreach/video icon SVGs inside
are scaled the same factor in their width/height attributes (index.html)
so the whole badge shrinks as one proportional unit, not just its
container. */
.ai-icon-badge {
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
width: 69.12px;
height: 69.12px;
border-radius: 17.28px;
}
.ai-icon-badge--search { background: #c7b5fb; }
.ai-icon-badge--outreach { background: #d3f300; }
.ai-icon-badge--video { background: #4d3fe9; }
/* Pricing hero's money-bag badge — same 96x96-Figma-frame/0.72-scale
family as the three above (see .ai-icon-badge comment), own color pair
from its own Figma frame (node 3252:106699). */
.ai-icon-badge--pricing { background: #ffc1d7; }
.ai-icon-badge--getting-started { background: #FF984B; }
/* Blog hero's grid/table badge — same family (node 3326:109137), own
Figma frame's own color pair happens to match .ai-icon-badge--outreach's
background exactly, but gets its own modifier rather than overloading
that one (same reasoning as .ai-icon-badge--profile above). */
.ai-icon-badge--blog { background: #d3f300; }
/* Icon badge bounce-in entrance — js/main.js adds .is-revealed once in
view (data-bounce-reveal, reusing the same addRiseReveal one-shot
IntersectionObserver as [data-visual-reveal] elsewhere in this file):
the badge starts scaled down and invisible, then springs into its
resting pose with a single overshoot (scale only, no rotation, no
repeated bouncing) — a hand-rolled stand-in for React Bits' BounceCards
(gsap elastic.out(1, 0.5)), matching this file's existing no-gsap,
no-React approach to that package's other entrance effects (see the
staggered text reveal). Used by all four .ai-icon-badge instances
(search/outreach/video here, plus the pricing hero's money-bag badge)
— any badge in view on load plays almost immediately (same as the h1
stagger); ones further down the page play on scroll-into-view instead. */
[data-bounce-reveal] {
opacity: 0;
transform: scale(0.3);
}
[data-bounce-reveal].is-revealed {
animation: badgeBounceIn 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
@keyframes badgeBounceIn {
0% { opacity: 0; transform: scale(0.3); }
60% { opacity: 1; transform: scale(1.08); }
100% { opacity: 1; transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
/* JS skips the reveal trigger under reduced motion (see reduceStaggerMotion
in main.js), so the scaled/hidden starting state above would otherwise
be the badge's permanent, broken look. */
[data-bounce-reveal] {
opacity: 1;
transform: none;
}
}
.ai-eyebrow {
display: inline-flex;
align-items: center;
gap: 16px;
font-family: "Tomato Grotesk SemiBold", Arial, sans-serif;
font-size: 2.75rem;
font-weight: 600;
line-height: 1.12;
letter-spacing: -0.02em;
color: #d9f20f;
}
/* Site-wide display-title wrapping: use the available line width evenly so
headings that fit in two lines do not fall into an avoidable third line. */
h1,
h2,
.ai-eyebrow {
text-wrap: balance;
}
.ai-dot { display: none; }
.ai-copy-text {
font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
font-size: 1.125rem;
font-weight: 500;
line-height: 1.4;
color: #fff;
max-width: 520px;
}
.btn-pill-outline-dark {
display: inline-flex;
align-items: center;
gap: 24px;
margin-top: 8px;
background: #d9f20f;
color: #14120f;
padding: 12px 22px;
border-radius: var(--radius-pill);
font-weight: 600;
font-size: 1.0625rem;
}
.btn-pill-outline-dark:hover { background: #e5fa34; }
.ai-button-label {
display: inline-flex;
align-items: center;
padding-block: 4px;
margin-block: -4px;
overflow: hidden;
}
.ai-button-text-track {
display: inline-flex;
align-items: center;
}
.ai-button-text-track > span {
display: inline;
}
.ai-button-text-track > span[aria-hidden="true"] { display: none; }
.btn-pill-outline-dark:hover .ai-button-text-track { transform: none; }
.ai-arrow {
display: inline-block;
transform: translateX(0) rotate(0deg);
transform-origin: center;
transition: transform 420ms cubic-bezier(.16, 1, .3, 1);
will-change: transform;
}
.btn-pill-outline-dark:hover .ai-arrow,
.btn-pill-outline-dark:focus-visible .ai-arrow,
.btn-hero-primary:hover .ai-arrow,
.btn-hero-primary:focus-visible .ai-arrow,
.btn-hero-secondary:hover .ai-arrow,
.btn-hero-secondary:focus-visible .ai-arrow,
.btn-dark:hover .ai-arrow,
.btn-dark:focus-visible .ai-arrow,
.pricing-table-head-btn:hover .ai-arrow,
.pricing-table-head-btn:focus-visible .ai-arrow {
transform: translateX(2px) rotate(45deg);
}
.ai-row:nth-child(3) .ai-eyebrow {
color: #850010;
}
.ai-row:nth-child(2) .ai-eyebrow {
color: #6b2d00;
}
.ai-row:nth-child(2) .btn-pill-outline-dark {
background: #6b2d00;
color: #fff;
}
.ai-row:nth-child(2) .btn-pill-outline-dark:hover,
.ai-row:nth-child(2) .btn-pill-outline-dark:focus-visible {
background: #823900;
}
.ai-row:nth-child(2) .btn-pill-outline-dark .ai-arrow {
color: #fff;
}
.ai-row:nth-child(2) .ai-copy-text {
color: #14120f;
}
.ai-row:nth-child(3) .ai-copy-text {
color: #14120f;
}
.ai-row:nth-child(3) .btn-pill-outline-dark {
background: #850010;
color: #fff;
}
.ai-row:nth-child(3) .btn-pill-outline-dark:hover,
.ai-row:nth-child(3) .btn-pill-outline-dark:focus-visible {
background: #9b1021;
}
.ai-row:nth-child(3) .btn-pill-outline-dark .ai-arrow {
color: #fff;
}
/* Mobile only (desktop's row layout below 1024px keeps the left-aligned
copy that sits naturally beside the visual) — .ai-row is still a
single stacked column here, so center the eyebrow/body/button like
.audience-stats-copy does for its own stacked mobile layout. */
@media (max-width: 1023px) {
.ai-copy, .ai-copy-bottom { align-items: center; }
/* .ai-eyebrow's inline-flex display (a leftover from once laying out an
icon dot beside the text — .ai-dot is display:none now) gives its text
an anonymous flex-item box with a content-based min-width, so it can't
shrink below one unbroken line and overflows narrow phones instead of
wrapping (worse once centering made that overflow symmetric on both
edges). Dropping to a plain block sidesteps the flex minimum-size
quirk entirely and lets the heading wrap like normal text. */
.ai-eyebrow { display: block; text-align: center; max-width: 100%; }
.ai-copy-text { text-align: center; margin-inline: auto; }
/* .ai-visual was never centered on the stacked mobile/tablet layout — it
has no align-items override of its own, so .ai-row's default
align-items:stretch just left it pinned to the row's start (left)
edge while the copy above it (both rules right above) is explicitly
centered. Real bug: on tablet widths the demo card visibly sat off to
the left under centered text. margin-inline:auto centers it the same
way .ai-copy-text is centered above, whenever it's narrower than the
row (i.e. past 460px — see .ai-visual's own max-width — which on
phones is the full-bleed width anyway, so this is a no-op there). */
.ai-visual { margin-inline: auto; }
}
/*
* These are real screen-recorded product-demo videos from the Quacko
* Framer site (downloaded from their Framer CDN), not a CSS mockup — the
* gradient background, white card, and dark status pill are all baked
* into the footage itself, so the wrapper just sizes/rounds/loops it.
* The gradient fill behind is a same-hue fallback while the video loads.
*/
.ai-visual {
position: relative;
border-radius: 22px;
overflow: hidden;
aspect-ratio: 619 / 519;
width: 100%;
max-width: 460px;
}
/* js/main.js adds .is-revealed once scrolled into view (data-visual-reveal):
the card starts zoomed in and faded out, then settles down to its resting
scale/opacity — a "pop up" entrance rather than a plain fade. */
[data-visual-reveal] {
opacity: 0;
transform: scale(1.15);
transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.4s ease-out;
}
[data-visual-reveal].is-revealed {
opacity: 1;
transform: scale(1);
}
@media (prefers-reduced-motion: reduce) {
/* JS skips the reveal trigger under reduced motion, so the zoomed/hidden
starting state would otherwise be the card's permanent, broken look. */
[data-visual-reveal] {
opacity: 1;
transform: none;
transition: none;
}
}
.ai-visual--violet { background: linear-gradient(165deg, #F472B6, #E879F9); }
.ai-visual--orange { background: linear-gradient(165deg, #FDBA74, var(--color-brand)); }
.ai-visual--pink { background: linear-gradient(165deg, #F9A8D4, #DB2777); }
.ai-video {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
/* ==========================================================================
Audience / performance stats — bento grid + headline
========================================================================== */
/*
* Swapped from the bento stats graphic (GMV Tracked / Active Creators / DM
* Messages / Email) to the UFO/duck illustration from Figma node
* 3183:105078 — a single exported asset, same pattern as the hero's
* collage-image, background chroma-keyed to transparent on export.
*/
/* .ai-rows above has its own background color filling its full padding box
(not blank space), so the entire visible gap above this panel has to come
from this section's own padding-top — hence 110px here, not a 55/55 split. */
.section.audience-stats { padding-top: 110px; padding-bottom: 55px; }
.audience-stats-inner {
background: #E6EFD3;
border-radius: 32px;
padding-block: 130px;
padding-inline: 56px;
display: flex;
align-items: center;
gap: clamp(40px, 6vw, 96px);
}
.audience-stats-grid {
/* 966px cap (~AI Creator Search's .ai-visual height) scaled down 20%,
then reduced by another 1/3 per request. */
flex: 0 1 515px;
max-width: 515px;
min-width: 0;
}
.audience-stats-bento {
display: block;
width: 100%;
height: auto;
aspect-ratio: 254 / 200;
}
.audience-stats-copy { flex: 1 1 auto; min-width: 0; }
.audience-stats-copy h2 {
max-width: 620px;
font-family: "Tomato Grotesk SemiBold", Arial, sans-serif;
font-size: 2.75rem;
font-weight: 600;
letter-spacing: -0.02em;
line-height: 1.12;
}
.audience-stats-copy .section-sub {
max-width: 520px;
font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
font-size: 1.125rem;
font-weight: 500;
line-height: 1.4;
color: var(--color-ink);
}
.audience-stats-copy .btn { margin-top: 28px; }
@media (max-width: 1023px) {
/* Desktop's 110px padding-top exists to hold the gap above the card at
that same 110px the sections around it use (see the comment above
.section.audience-stats) — on mobile that reads as a huge dead gap
under the AI rows section, so match it to the card's own 16px side
margin right below instead. */
.section.audience-stats { padding-top: 16px; }
/* .audience-stats-inner doubles as .container (see the markup), so its
own padding-inline is normally *internal* padding, not a gap to the
viewport edge — the colored card sits flush against the screen with
nothing outside it. Mobile needs an actual outside gap, so swap
.container's width:100%/margin-inline:auto for an explicit 16px
margin instead (width:auto lets the box shrink to fit between them). */
.audience-stats-inner { width: auto; margin-inline: 16px; flex-direction: column; align-items: stretch; padding: 32px 24px; border-radius: 24px; }
.audience-stats-grid { flex: none; max-width: 307px; margin-inline: auto; width: 100%; }
.audience-stats-copy { text-align: center; }
.audience-stats-copy h2, .audience-stats-copy .section-sub { margin-inline: auto; }
}
/* .audience-stats-inner's 16px side margin above was hardcoded for phones
and never followed .container's own responsive bump to 32px at 768px+
(see .container's min-width:768px rule) — real bug on iPad, where every
other section/card on the page (.why-quacko-card included) sits a full
32px off the screen edge while this one card alone stayed pinned at
16px, visibly tighter than its neighbors. Matched here, and padding-top
goes with it (kept equal to the side margin on purpose, same as the
16px pairing right above, so the gap above the card still reads the
same size as the gap beside it). */
@media (min-width: 768px) and (max-width: 1023px) {
.section.audience-stats { padding-top: 32px; }
.audience-stats-inner { margin-inline: 32px; }
}
/* ==========================================================================
Outreach demo — checklist card + phone mockup + pull-quote
========================================================================== */
/*
* Layout pattern brought over from ManyChat's "See how it works" section:
* a white checklist card and a phone mid-conversation, both floating on a
* bold color field, with a short quote off to the side. Copy is Quacko's
* own outreach-automation feature, not ManyChat's IG/FB DM flow.
*/
/* Paired with .audience-stats's own 55px bottom padding above, so the gap
between the "We are quacko" panel and this one totals 110px. Bottom is
paired the same way with .why-quacko's own 55px top padding below. */
.section.outreach-demo { padding-top: 55px; padding-bottom: 55px; }
/* Pinned scroll-through (desktop, motion-ok only — see the combined media
query below): the section becomes one 100vh "stage", 4 more 70vh
"steps" (one per transition between the 5 accordion rows), plus a final
30vh hold after Insight has opened —
and .outreach-demo-sticky fills the viewport for that whole span, so the
photo+card stay vertically centered while initOutreachScrollPin (main.js) advances the
accordion under scroll instead of requiring a click. 70vh rather than a
full 100vh per step keeps the total distance (~380vh) from feeling
excessive for 5 rows — a feel knob, not a hard requirement, and main.js
doesn't hardcode this number back: it measures the actual rendered
scroll range and divides it evenly by (row count − 1) itself, so this
height is the only place step length is tuned. The 55px top/bottom gap
to the neighboring sections moves from the section's own padding (now
0, since the section's height is spoken for by the scroll distance)
into the centered card's available viewport space while pinned.
The card keeps its own height and remains centered on the viewport's
vertical midpoint throughout the pinned scroll range. */
@media (min-width: 1024px) and (prefers-reduced-motion: no-preference) {
.section.outreach-demo { height: calc(100vh + 4 * 70vh + 30vh); padding-top: 0; padding-bottom: 0; }
.outreach-demo-sticky {
position: sticky;
top: 0;
height: 100vh;
}
.outreach-demo-sticky > .outreach-demo-inner {
position: absolute;
top: 50%;
left: 0;
right: 0;
width: 100%;
transform: translateY(-50%);
}
}
/* The photo is a full-bleed background behind the whole card (position:
absolute, cropped to the rounded corners by overflow:hidden here); the
white accordion card floats on top of it, inset by this same padding
instead of sitting beside it in a flex row. */
/* Height is pinned rather than left to size off the card + padding, per
feedback: padding went back down to 32px on every side, but the section
itself should stay exactly as tall as it already was — so the card
stretches (align-items: stretch, the flex default, on this single-item
row) to fill the extra room instead of the box shrinking around it. */
/* White (not the old purple) so it reads correctly as the backdrop for
rows with no dedicated .outreach-demo-bg photo (currently Manage/Promos)
— main.js fades that img's opacity to 0 for those rows instead
of stretching a photo that isn't sized/cropped for this container. */
.outreach-demo-inner {
position: relative;
overflow: hidden;
background: #fff;
border-radius: 32px;
padding: 32px;
min-height: 818px;
display: flex;
color: #fff;
}
/* .container's own ≥768px padding-inline rule (further down, same
specificity) shares this element and comes later in the cascade, so it
was clobbering the side padding above back down to 32px whenever the
value here differed — pin it explicitly so left/right can never drift
from top/bottom again, whatever either rule's own value is. */
@media (min-width: 1024px) {
.outreach-demo .outreach-demo-inner { padding-inline: 32px; }
}
/* Stacked crossfade layers (#outreachDemoBgA/B) — both sit in the exact
same box via position:absolute+inset:0 here, so animating one's opacity
down while the other's goes up reads as one photo dissolving into the
next, not a swap. 420ms/ease-in-out rather than the old 220ms/ease reads
noticeably calmer for a scroll-driven change than for a click-driven
one — a click is a deliberate one-off act that can afford to feel snappy,
but scrolling fires this continuously, so a quick fade there reads as a
flicker rather than a transition. */
.outreach-demo-bg {
position: absolute;
inset: 0;
z-index: 0;
width: 100%;
height: 100%;
object-fit: cover;
transition: opacity 420ms ease-in-out;
}
@media (prefers-reduced-motion: reduce) {
.outreach-demo-bg { transition: none; }
}
/* Search-bar UI chip (Figma node 3190:59121, corrected for density against
3195:59192/3195:59312 — same component, every measurement scaled 1.241x:
padding 19.853 vs 16px, icon 29.78 vs 24px, card radius 17.372 vs 14px,
etc., all the same 1.241x), floating over the open photo to the right of
the card. Was a single flat PNG screenshot capped at a tiny 460px — too
small — so it's rebuilt as real markup (see index.html), sized to fill
the open photo exactly: `left` clears the card's own fixed box (32px
inset + 400px max-width, confirmed constant at every width the chip is
shown at) by the same 48px gap `right` already keeps from the photo's
own edge, so both sides read as one even margin instead of the old
bottom-right hug.
Every measurement past this point is an `em` against 3190:59121's own
16px unit (×1.241 for the 3195 density, i.e. 0.021211 of the box's own
width — 19.853/936), so this one font-size scales icons/padding/text
together like resizing the original component. It's spelled out as
`calc()` off `vw` rather than a self-referencing `cqw` on this same
element: that measured ~1.9x too large in testing (Chromium resolved it
against some ancestor's box, not this element's own — self-reference on
the container-establishing element isn't reliably this element's own
size across engines). `min(100vw, 1200px)` mirrors .container's own cap
below the 1600px tier, where a separate rule below takes over to mirror
its edge-to-edge `margin-inline: 110px` swap; both are exact, not
approximated, so the aspect ratio matches the Figma component instead of
drifting from a mismatched width/font-size pair. */
.outreach-search-chip {
position: absolute;
z-index: 1;
left: 480px;
right: 48px;
/* The white chip card itself isn't what needs to land on .outreach-card's
32px bottom inset — .outreach-search-chip-highlight (the semi-
transparent backdrop behind it) extends 0.375em further down than the
chip on every side, so that's the edge actually visible as this box's
bottom. +0.375em here pushes the *chip* up by exactly that much so the
highlight's true bottom edge — not the white card's — lands on the
32px line. */
bottom: calc(32px + 0.375em);
font-size: min(calc((min(100vw, 1200px) - 528px) * 0.021211), 24px);
filter: drop-shadow(0 20px 40px rgba(10, 6, 60, 0.35));
opacity: 1;
transform: scale(1) translateY(0);
transition: opacity 380ms cubic-bezier(0.22, 1, 0.36, 1), transform 380ms cubic-bezier(0.22, 1, 0.36, 1);
}
@media (prefers-reduced-motion: reduce) {
.outreach-search-chip { transition: none; }
}
/* Mocks the Search bar specifically, so it only makes sense floating over
Search's own photo — hide it once another pillar (with its own photo,
e.g. Connect) is the active row. */
.outreach-demo-inner:not([data-active-pillar="search"]) .outreach-search-chip {
opacity: 0;
transform: scale(0.8) translateY(24px);
pointer-events: none;
}
@media (min-width: 1600px) {
.outreach-search-chip { font-size: min(calc((100vw - 748px) * 0.021211), 24px); }
}
@media (max-width: 1023px) {
.outreach-search-chip { display: none; }
}
.outreach-search-chip-highlight {
position: absolute;
inset: -0.375em -0.375em -0.375em -0.375em;
top: -0.3125em;
background: #f5f3f1;
opacity: 0.8;
border-radius: 1.1em;
}
.outreach-search-chip-card {
position: relative;
display: flex;
flex-direction: column;
gap: 0.75em;
width: 100%;
padding: 1em;
background: #fff;
border-radius: 0.875em;
box-shadow: 0 1px 2px rgba(10, 6, 60, 0.06);
}
/* Gradient ring via mask instead of `border` + the dual-background-layer
border-box/padding-box trick that drew it before: Blink snaps a plain
`border-width` to whole CSS pixels for rendering (confirmed empirically —
anything from 1.0px up to just under 2px paints identically at 1px), so
the requested ~1.3px come out indistinguishable from the original 1px.
`padding` on this pseudo isn't subject to that snapping, so it's what
actually sets the ring's thickness; the two masks XOR'd together punch
the middle out, leaving just that padding-width ring painted in the
gradient. */
.outreach-search-chip-card::before {
content: "";
position: absolute;
inset: 0;
padding: 0.08125em;
border-radius: inherit;
background: linear-gradient(135deg, #ea580c, #e2e2e2);
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
pointer-events: none;
}
.outreach-search-chip-row { display: flex; align-items: center; justify-content: space-between; gap: 0.75em; width: 100%; }
.outreach-search-chip-query { display: flex; align-items: center; gap: 0.75em; min-width: 0; }
.outreach-search-chip-icon { flex: none; width: 1.5em; height: 1.5em; }
.outreach-search-chip-placeholder {
margin: 0;
overflow: hidden;
white-space: nowrap;
font-size: 0.875em;
color: #737373;
}
/* Query text is typed/held/deleted in real time by initChipTypewriter in
main.js (a vanilla-JS port of quacko_app's own useTypewriter — same
three PROMPT_EXAMPLES, same TYPE_MS/DELETE_MS/HOLD_MS/PAUSE_MS timings),
so — matching that real ``, which shows no caret while unfocused
— there's no CSS-driven reveal or blinking caret here to fight with it. */
.outreach-search-chip-toggle { display: flex; align-items: center; gap: 0.25em; flex: none; font-size: 0.75em; color: #0a0a0a; white-space: nowrap; }
.outreach-search-chip-toggle-track { display: flex; align-items: center; gap: 0.25em; margin-inline: 0.25em; }
.outreach-search-chip-toggle-track i { display: block; width: 1.6875em; height: 0.625em; border-radius: 0.3125em; background: #e5e5e5; font-style: normal; }
/* #F76A6E: quacko_app's own BOARD_COLORS[1], the default-selected middle
option — not the Figma mockup's #ff5e69. */
.outreach-search-chip-toggle-track i.is-active { background: #f76a6e; }
.outreach-search-chip-tools { display: flex; align-items: center; gap: 0.5em; }
.outreach-search-chip-tool {
display: flex;
align-items: center;
justify-content: center;
width: 2em;
height: 2em;
border: 0.0625em solid #e5e5e5;
border-radius: 999px;
}
/* size-4 (16px) icon in a size-9 (36px) button in quacko_app — 0.444 of
the button box, same ratio applied to this box's own 2em. */
.outreach-search-chip-tool svg { width: 0.889em; height: 0.889em; }
.outreach-search-chip-actions { display: flex; align-items: center; gap: 0.5em; }
.outreach-search-chip-pill {
display: flex;
align-items: center;
gap: 0.28em;
height: 2em;
padding-inline: 0.67em;
border: 0.0625em solid #e5e5e5;
background: #fff;
color: #000;
white-space: nowrap;
}
.outreach-search-chip-pill svg { flex: none; }
/* "15" credits pill: quacko_app's is `rounded-full`, `text-base
font-semibold` + a size-4 icon in its own size-9 pill — same 0.444
ratio as the tool icons above, and semibold, larger text to match. */
.outreach-search-chip-pill-credits { border-radius: 999px; font-size: 0.889em; font-weight: 600; }
.outreach-search-chip-pill-credits svg { width: 0.889em; height: 0.889em; }
/* "Match by" pill: quacko_app's is `rounded-card` (14px, not a full pill)
with `text-sm` + a muted size-3.5 Atom and size-4 ChevronDown. */
.outreach-search-chip-pill-match { border-radius: 0.875em; font-size: 0.778em; }
.outreach-search-chip-pill-match svg:first-child { width: 0.778em; height: 0.778em; }
.outreach-search-chip-pill-match svg:last-child { width: 0.889em; height: 0.889em; }
.outreach-search-chip-submit {
display: flex;
align-items: center;
justify-content: center;
width: 2em;
height: 2em;
flex: none;
background: #000;
border-radius: 999px;
}
.outreach-search-chip-submit svg { width: 0.889em; height: 0.889em; }
/* Connect pillar overlay — the "Message 1" composer block from
quacko_app's outreach wizard (step-message-setup.tsx's
MessageBlockView), same real-icons/real-copy/real-spacing-tokens reuse
as .outreach-search-chip above rather than a fresh mock. Same left/right
insets and font-size formula as .outreach-search-chip so its width
matches exactly, and — like that chip — bottom-anchored so its
.outreach-connect-chip-highlight's true bottom edge (0.375em past the
chip on every side) lands on .outreach-card's 32px bottom inset, same
alignment as .outreach-search-chip's own `bottom` value. Height is
otherwise intrinsic to the message text, so it grows upward from that
fixed bottom edge instead of stretching/centering. */
.outreach-connect-chip {
position: absolute;
z-index: 1;
left: 480px;
right: 48px;
bottom: calc(32px + 0.375em);
font-size: min(calc((min(100vw, 1200px) - 528px) * 0.021211), 24px);
filter: drop-shadow(0 20px 40px rgba(10, 6, 60, 0.35));
opacity: 1;
transform: scale(1) translateY(0);
transition: opacity 380ms cubic-bezier(0.22, 1, 0.36, 1), transform 380ms cubic-bezier(0.22, 1, 0.36, 1);
}
@media (prefers-reduced-motion: reduce) {
.outreach-connect-chip { transition: none; }
}
/* Mocks the Connect step's message composer specifically, so it only
makes sense floating over Connect's own photo. */
.outreach-demo-inner:not([data-active-pillar="connect"]) .outreach-connect-chip {
opacity: 0;
transform: scale(0.8) translateY(24px);
pointer-events: none;
}
@media (min-width: 1600px) {
.outreach-connect-chip { font-size: min(calc((100vw - 748px) * 0.021211), 24px); }
}
@media (max-width: 1023px) {
.outreach-connect-chip { display: none; }
}
.outreach-connect-chip-highlight {
position: absolute;
inset: -0.375em;
background: #f5f3f1;
opacity: 0.8;
border-radius: 1.1em;
}
/* All sizing below is scaled to 0.85× the original (a flat "S=0.85"
shrink — text and spacing both a bit smaller, so the whole card sits
shorter) per the user's request to make the message chip more compact.
Where a property sits on the SAME element as that element's own
font-size (templates/text/token/save/add-btn all set their own
font-size), only the font-size line below was actually edited — its
height/padding/gap em-numbers were deliberately left AS-IS, because an
em value resolves against its own element's font-size: cutting that
font-size alone already shrinks every other em property on the same
element (and on any child that doesn't set its own font-size) by the
same 0.85 automatically. Only the handful of properties that are
root-relative (no font-size in their own ancestor chain) — card
gap/padding, header gap/icon, count, emoji, divider margin — needed
their literal em number multiplied by 0.85 by hand. */
.outreach-connect-chip-card {
position: relative;
display: flex;
flex-direction: column;
gap: 0.85em;
width: 100%;
padding: 0.85em;
background: #fff;
border: 0.0625em solid #e5e5e5;
border-radius: 0.875em;
box-shadow: 0 1px 2px rgba(10, 6, 60, 0.06);
}
.outreach-connect-chip-header { display: flex; align-items: center; gap: 0.425em; }
.outreach-connect-chip-header > svg { flex: none; width: 0.85em; height: 0.85em; }
.outreach-connect-chip-title { font-size: 0.85em; line-height: 1.5em; font-weight: 500; color: #0a0a0a; }
.outreach-connect-chip-templates {
display: flex;
align-items: center;
gap: 0.375em;
flex: none;
margin-left: auto;
height: 2.25em;
padding-inline: 0.875em;
border: 0.0625em solid #e5e5e5;
border-radius: 999px;
font-size: 0.7438em; /* 0.875 * 0.85 */
font-weight: 500;
color: #0a0a0a;
white-space: nowrap;
}
.outreach-connect-chip-templates svg { flex: none; width: 1em; height: 1em; }
.outreach-connect-chip-box {
position: relative;
border: 0.0625em solid #e5e5e5;
border-radius: 0.875em;
background: #faf9f8;
}
.outreach-connect-chip-text {
margin: 0;
padding: 0.75em 0.75em 1.5em;
font-size: 0.7438em; /* 0.875 * 0.85 */
line-height: 1.4285em;
color: #0a0a0a;
font-weight: 400;
}
.outreach-connect-chip-text b { font-weight: 500; }
.outreach-connect-chip-count {
position: absolute;
right: 0.75em;
bottom: 0.5em;
font-size: 0.6375em; /* 0.75 * 0.85, root-relative (box sets no font-size) */
color: #737373;
}
.outreach-connect-chip-actions { display: flex; align-items: center; justify-content: space-between; gap: 0.5em; }
.outreach-connect-chip-tokens { display: flex; align-items: center; gap: 0.5em; }
.outreach-connect-chip-token {
display: flex;
align-items: center;
gap: 0.25em;
flex: none;
height: 1.75em;
padding-inline: 0.625em;
border: 0.0625em solid #e5e5e5;
border-radius: 999px;
font-size: 0.68em; /* 0.8 * 0.85 */
font-weight: 500;
color: #0a0a0a;
white-space: nowrap;
}
.outreach-connect-chip-token svg { flex: none; width: 0.875em; height: 0.875em; }
/* Matches .outreach-connect-chip-token's actual height — NOT the same
"1.75em" written there, because that em resolves against the token's
own font-size: 0.68em, i.e. 1.75 * 0.68 = 1.19em of the shared root
size. This element doesn't reduce its own font-size, so it needs the
already-multiplied 1.19em/0.595em values to land on the same physical
size instead of coming out 1.75/0.875 (too big) — same self-relative
trap as noted on .outreach-manage-chip-category/-tier above. */
.outreach-connect-chip-emoji {
display: flex;
align-items: center;
justify-content: center;
flex: none;
width: 1.19em;
height: 1.19em;
border: 0.0625em solid #e5e5e5;
border-radius: 999px;
}
.outreach-connect-chip-emoji svg { width: 0.595em; height: 0.595em; }
.outreach-connect-chip-save {
display: flex;
align-items: center;
gap: 0.25em;
flex: none;
font-size: 0.6375em; /* 0.75 * 0.85 */
font-weight: 500;
color: #737373;
white-space: nowrap;
}
.outreach-connect-chip-save svg { flex: none; width: 0.875em; height: 0.875em; }
.outreach-connect-chip-divider { border-top: 0.0625em solid #e5e5e5; margin-inline: -0.85em; }
.outreach-connect-chip-add { display: flex; gap: 0.5em; }
.outreach-connect-chip-add-btn {
display: flex;
flex: 1;
align-items: center;
justify-content: center;
gap: 0.5em;
height: 2.25em;
border: 0.0625em solid #e5e5e5;
border-radius: 999px;
font-size: 0.7438em; /* 0.875 * 0.85 */
font-weight: 500;
color: #0a0a0a;
}
.outreach-connect-chip-add-btn svg { flex: none; width: 1em; height: 1em; }
/* Manage pillar overlay — the "My creators" CRM table's first 3 real mock
rows (affiliate-crm/creators-view.tsx), same real-data reuse and same
positioning system (left/right insets, font-size formula, bottom-anchor
onto .outreach-card's 32px inset) as .outreach-search-chip/
.outreach-connect-chip above. */
.outreach-manage-chip {
position: absolute;
z-index: 1;
left: 480px;
right: 48px;
bottom: calc(32px + 0.375em);
font-size: min(calc((min(100vw, 1200px) - 528px) * 0.021211), 24px);
filter: drop-shadow(0 20px 40px rgba(10, 6, 60, 0.35));
opacity: 1;
transform: scale(1) translateY(0);
transition: opacity 380ms cubic-bezier(0.22, 1, 0.36, 1), transform 380ms cubic-bezier(0.22, 1, 0.36, 1);
}
@media (prefers-reduced-motion: reduce) {
.outreach-manage-chip { transition: none; }
}
.outreach-demo-inner:not([data-active-pillar="manage"]) .outreach-manage-chip {
opacity: 0;
transform: scale(0.8) translateY(24px);
pointer-events: none;
}
@media (min-width: 1600px) {
.outreach-manage-chip { font-size: min(calc((100vw - 748px) * 0.021211), 24px); }
}
@media (max-width: 1023px) {
.outreach-manage-chip { display: none; }
}
.outreach-manage-chip-highlight {
position: absolute;
inset: -0.375em;
background: #f5f3f1;
opacity: 0.8;
border-radius: 1.1em;
}
.outreach-manage-chip-card {
position: relative;
overflow: hidden;
width: 100%;
background: #fff;
border: 0.0625em solid #e5e5e5;
border-radius: 0.875em;
box-shadow: 0 1px 2px rgba(10, 6, 60, 0.06);
}
.outreach-manage-chip-table { width: 100%; table-layout: fixed; border-collapse: collapse; }
/* #e5e5e5 (same hex as every other line in this table) reads visibly
fainter against this row's warm #faf9f8 fill than it does against the
body rows' white — same line, less contrast, looks like a different
color. #e0dfde compensates so the header's own lines read as the same
weight as the body's. */
.outreach-manage-chip-table thead tr { height: 2.1em; background: #faf9f8; border-bottom: 0.0625em solid #e0dfde; }
/* th/td each set their own font-size (0.6875em/0.8125em of the chip's own
root em — shrunk from the original 0.75/0.875 so the whole table reads
smaller and rows can be shorter) to size their plain text correctly.
Every OTHER em value nested inside them — icons, the avatar, pills, the
tier badge — is resolving against that already-shrunk font-size, not
the chip's root, so each one below is deliberately written as
(intended-root-ratio / 0.6875 or 0.8125) instead of the plain
intended-root-ratio. Skipping that division was the exact bug that made
the emoji circle 25% oversized earlier and the L7/L6/L8 tier badge
nearly illegible here — see the comment on .outreach-connect-chip-emoji
above for the first instance of this same trap. */
.outreach-manage-chip-table th {
padding-inline: 0.5455em; /* 0.375 root / 0.6875 */
text-align: left;
font-size: 0.6875em;
font-weight: 500;
color: #737373;
white-space: nowrap;
}
.outreach-manage-chip-table th svg { flex: none; width: 1.1636em; height: 1.1636em; vertical-align: -0.2em; margin-left: 0.2909em; } /* 0.8 root / 0.6875 */
/* 30D GMV / 30D Live GMV: extra left padding shifts their numbers right,
off the Product category divider, without moving the column boundary
itself (right padding stays the base value above). */
.outreach-manage-chip-table th:nth-child(4),
.outreach-manage-chip-table th:nth-child(5) {
padding-left: 2.3273em; /* 1.6 root / 0.6875 */
}
.outreach-manage-chip-table tbody tr { height: 3.4em; }
.outreach-manage-chip-table tbody tr:not(:first-child) { border-top: 0.0625em solid #e5e5e5; }
.outreach-manage-chip-table td { padding-inline: 0.4615em; font-size: 0.8125em; color: #0a0a0a; vertical-align: middle; } /* 0.375 root / 0.8125 */
.outreach-manage-chip-table td:nth-child(4),
.outreach-manage-chip-table td:nth-child(5) {
padding-left: 1.9692em; /* 1.6 root / 0.8125 */
}
/* Creator column divider — same "pinned column" cue the real CRM table
uses (a border on the edge of its sticky Creator column) even though
nothing actually scrolls here. Split into two colors for the same
reason as thead's border-bottom above: the th portion sits on
#faf9f8 and needs the darker #e0dfde to read as the same line weight
as the td portion, which sits on white and uses the plain #e5e5e5
every other body-row line uses. */
.outreach-manage-chip-table th:first-child { border-right: 0.0625em solid #e0dfde; padding-left: 1.0909em; } /* 0.75 root / 0.6875 */
.outreach-manage-chip-table td:first-child { border-right: 0.0625em solid #e5e5e5; padding-left: 0.9231em; } /* 0.75 root / 0.8125 */
.outreach-manage-chip-creator { display: flex; align-items: center; gap: 0.5em; min-width: 0; }
.outreach-manage-chip-creator img { flex: none; width: 2.4615em; height: 2.4615em; border-radius: 999px; object-fit: cover; } /* 2 root / 0.8125 */
.outreach-manage-chip-creator-text { display: flex; flex-direction: column; min-width: 0; }
/* No own font-size — td's own 0.8125em already IS the intended
0.8125-root text size, so inheriting it directly (rather than writing
an em value here, which would re-multiply) is what's actually
correct. */
.outreach-manage-chip-name { overflow: hidden; font-weight: 500; color: #0a0a0a; white-space: nowrap; text-overflow: ellipsis; }
.outreach-manage-chip-handle { font-size: 0.8462em; color: #737373; } /* 0.6875 root / 0.8125 */
.outreach-manage-chip-star-cell { text-align: center; }
/* Reused on the "Starred" itself so its label centers over the star
icons below instead of following the other headers' left-align — needs
the extra specificity to win over .outreach-manage-chip-table th's own
text-align: left. */
.outreach-manage-chip-table th.outreach-manage-chip-star-cell { text-align: center; }
.outreach-manage-chip-star-cell svg { width: 1.3846em; height: 1.3846em; } /* 1.125 root / 0.8125 */
.outreach-manage-chip-categories { display: flex; flex-wrap: wrap; gap: 0.25em; }
.outreach-manage-chip-category {
display: inline-flex;
align-items: center;
/* height/padding/border are on this same element, so — once font-size
below lands its OWN font-size at 0.6875 root — these resolve against
that 0.6875, not root either: each is (intended-root / 0.6875). */
height: 1.8182em;
padding-inline: 0.8em;
border: 0.0909em solid #f5f3f1;
border-radius: 999px;
background: #faf9f8;
font-size: 0.8462em; /* 0.6875 root / 0.8125 (td's context) → own font-size lands at 0.6875 root */
font-weight: 500;
color: #737373;
white-space: nowrap;
}
.outreach-manage-chip-gmv { display: inline-flex; align-items: center; gap: 0.375em; }
.outreach-manage-chip-tier {
display: inline-flex;
flex: none;
align-items: center;
justify-content: center;
/* Same self-relative trap as .outreach-manage-chip-category above: once
font-size lands this element's own font-size at 0.4375 root, width/
height (intended 1.3125/0.8203 root) resolve against that 0.4375,
not root — each is (intended-root / 0.4375), i.e. 3em/1.875em. */
width: 3em;
height: 1.875em;
border-radius: 999px;
font-size: 0.5385em; /* 0.4375 root / 0.8125 (td's context) → own font-size lands at 0.4375 root */
font-weight: 700;
line-height: 1;
color: #fff;
}
/* Promos pillar overlay — the "Contest type" card grid from quacko_app's
contest editor (content/contest-editor-view.tsx, CONTEST_TYPES), same
real-icons/real-copy reuse and same positioning system as
.outreach-search-chip/.outreach-connect-chip/.outreach-manage-chip
above. Unlike those, nothing here sets its own font-size except the two
text leaves (-title/-desc) and the label, so every other dimension
below is a plain (real-px / 20) root em — no self-relative division
needed, since 1 chip-root em ≈ 20 real px here (cross-checked against
.outreach-manage-chip's own icon/tier-badge root ratios above). */
.outreach-promos-chip {
position: absolute;
z-index: 1;
left: 480px;
right: 48px;
bottom: calc(32px + 0.375em);
font-size: min(calc((min(100vw, 1200px) - 528px) * 0.021211), 24px);
filter: drop-shadow(0 20px 40px rgba(10, 6, 60, 0.35));
opacity: 1;
transform: scale(1) translateY(0);
transition: opacity 380ms cubic-bezier(0.22, 1, 0.36, 1), transform 380ms cubic-bezier(0.22, 1, 0.36, 1);
}
@media (prefers-reduced-motion: reduce) {
.outreach-promos-chip { transition: none; }
}
.outreach-demo-inner:not([data-active-pillar="promos"]) .outreach-promos-chip {
opacity: 0;
transform: scale(0.8) translateY(24px);
pointer-events: none;
}
@media (min-width: 1600px) {
.outreach-promos-chip { font-size: min(calc((100vw - 748px) * 0.021211), 24px); }
}
@media (max-width: 1023px) {
.outreach-promos-chip { display: none; }
}
.outreach-promos-chip-highlight {
position: absolute;
inset: -0.375em;
background: #f5f3f1;
opacity: 0.8;
border-radius: 1.1em;
}
.outreach-promos-chip-card {
position: relative;
width: 100%;
padding: 0.85em;
background: #fff;
border: 0.0625em solid #e5e5e5;
border-radius: 0.875em;
box-shadow: 0 1px 2px rgba(10, 6, 60, 0.06);
}
.outreach-promos-chip-label {
display: block;
font-size: 0.7em; /* 14px root */
font-weight: 500;
color: #0a0a0a;
margin-bottom: 0.5714em; /* 8px gap / 14px own font-size, self-relative */
}
.outreach-promos-chip-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.4em; } /* 8px root */
.outreach-promos-chip-item {
display: flex;
align-items: center;
gap: 0.4em; /* 8px root */
min-height: 3.4em; /* 68px root */
padding: 0.8em; /* 16px root */
border: 0.0625em solid #e5e5e5;
border-radius: 0.7em; /* 14px root */
background: #fff;
}
.outreach-promos-chip-item.is-active { background: #faf9f8; box-shadow: 0 1px 2px rgba(10, 6, 60, 0.06); }
.outreach-promos-chip-icon {
display: flex;
flex: none;
align-items: center;
justify-content: center;
width: 1.8em; /* 36px root */
height: 1.8em;
border-radius: 999px;
}
.outreach-promos-chip-icon svg { width: 1em; height: 1em; } /* 20px root */
.outreach-promos-chip-text { min-width: 0; flex: 1; }
.outreach-promos-chip-title-row { display: flex; align-items: center; gap: 0.2em; } /* 4px root */
.outreach-promos-chip-title-row svg { flex: none; width: 0.7em; height: 0.7em; } /* 14px root, matches title's own size below */
.outreach-promos-chip-title { min-width: 0; font-size: 0.7em; line-height: 1.1429em; font-weight: 500; color: #0a0a0a; } /* 14px root, 16px line-height */
.outreach-promos-chip-desc {
display: block;
margin-top: 0.3333em; /* 4px gap / 12px own font-size, self-relative — same trap as .outreach-manage-chip-tier above */
font-size: 0.6em; /* 12px root */
line-height: 1.0833em; /* 13px line-height */
color: #737373;
}
/* Insight pillar overlay — the brand-detail header card from quacko_app's
Social Intelligence (social-intelligence/brand-detail-view.tsx), same
real-icons/real-copy/real-mock-data reuse and positioning system as the
chips above. Two stacked cards instead of the real page's one, and every
gap/size tightened from the real row's much wider spacing (it's meant to
span a full page, gap-8 between stats) to fit chip width — same
no-nested-font-size convention as .outreach-promos-chip above, so
dimensions below are plain (real-px / 20) chip-root em unless commented
otherwise. */
.outreach-insight-chip {
position: absolute;
z-index: 1;
left: 480px;
right: 48px;
bottom: calc(32px + 0.375em);
display: flex;
flex-direction: column;
gap: 0.4em; /* 8px root */
font-size: min(calc((min(100vw, 1200px) - 528px) * 0.021211), 24px);
filter: drop-shadow(0 20px 40px rgba(10, 6, 60, 0.35));
opacity: 1;
transform: scale(1) translateY(0);
transition: opacity 380ms cubic-bezier(0.22, 1, 0.36, 1), transform 380ms cubic-bezier(0.22, 1, 0.36, 1);
}
@media (prefers-reduced-motion: reduce) {
.outreach-insight-chip { transition: none; }
}
.outreach-demo-inner:not([data-active-pillar="insight"]) .outreach-insight-chip {
opacity: 0;
transform: scale(0.8) translateY(24px);
pointer-events: none;
}
@media (min-width: 1600px) {
.outreach-insight-chip { font-size: min(calc((100vw - 748px) * 0.021211), 24px); }
}
@media (max-width: 1023px) {
.outreach-insight-chip { display: none; }
}
/* Sits behind both stacked cards as one shared warm backdrop, same visual
role as every other chip's -highlight — inset is relative to the flex
column's own box, which already wraps both cards + their gap. */
.outreach-insight-chip-highlight {
position: absolute;
inset: -0.375em;
background: #f5f3f1;
opacity: 0.8;
border-radius: 1.1em;
}
.outreach-insight-chip-card {
position: relative;
display: flex;
align-items: center;
gap: 0.5em; /* 10px root, real gap-4=16px */
padding: 0.75em; /* 15px root, real p-4=16px */
background: #fff;
border: 0.0625em solid #e5e5e5;
border-radius: 0.7em; /* 14px root, rounded-card */
box-shadow: 0 1px 2px rgba(10, 6, 60, 0.06);
}
.outreach-insight-chip-logo {
flex: none;
width: 2em; /* 40px root, real size-[58px] */
height: 2em;
border-radius: 0.35em;
border: 0.0625em solid #e5e5e5;
object-fit: cover;
}
.outreach-insight-chip-info { display: flex; flex-direction: column; gap: 0.15em; } /* 3px root */
.outreach-insight-chip-name { font-size: 0.9em; font-weight: 600; line-height: 1.2; color: #0a0a0a; } /* 18px root */
.outreach-insight-chip-rating {
display: flex;
align-items: center;
gap: 0.2em; /* 4px of this element's own font-size below, self-relative — but same ratio (0.286) either way since 4/14=0.286 */
font-size: 0.7em; /* 14px root */
color: #737373;
white-space: nowrap;
}
.outreach-insight-chip-rating svg { flex: none; width: 1em; height: 1em; } /* 14px, matches text size like the real size-3.5/text-sm pair */
/* Stats gap opened up well past the "shortened" 0.5em it started at — the
user's own complaint was that this side read too cramped, so this now
sits closer to (though still under) the real page's gap-8, not a small
nudge off the compact starting point. */
.outreach-insight-chip-stats { display: flex; align-items: center; gap: 1.1em; margin-left: auto; } /* 22px root, real gap-8=32px */
.outreach-insight-chip-stat { display: flex; flex-direction: column; gap: 0.1em; } /* 2px root */
.outreach-insight-chip-fav { align-items: center; }
.outreach-insight-chip-stat-label { font-size: 0.65em; color: #737373; white-space: nowrap; } /* 13px root */
.outreach-insight-chip-stat-value { font-size: 0.8em; font-weight: 600; color: #0a0a0a; white-space: nowrap; } /* 16px root */
.outreach-insight-chip-fav svg { width: 0.9em; height: 0.9em; } /* 18px root */
.outreach-card {
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
width: 100%;
max-width: 400px;
background: #fff;
border-radius: 24px;
padding: 40px 36px;
color: var(--color-ink);
box-shadow: 0 24px 60px rgba(10, 6, 60, 0.35);
}
.outreach-card h3 {
font-family: "Tomato Grotesk SemiBold", Arial, sans-serif;
font-size: 2rem;
font-weight: 600;
letter-spacing: -0.01em;
margin-bottom: 28px;
}
/* Single-open accordion replacing the old flat outreach-list checklist —
see the HTML comment above .outreach-accordion for why. Each row's panel
uses the "grid-template-rows: 0fr -> 1fr" trick so it can transition
height without JS ever measuring scrollHeight; .outreach-accordion-panel
is the animated grid track and .outreach-accordion-panel-inner is the
overflow:hidden layer that actually gets clipped mid-transition. */
/* Each item is an equal-height flex slot (flex:1) spreading the 5 rows
evenly across the card's full (stretched) height, same effect as the old
space-between — but now the item's own box spans its whole slot (divider
to divider) instead of just wrapping the button, so justify-content:
center below actually centers the icon+label in the middle of that slot
instead of leaving it pinned to the top with dead space underneath. */
.outreach-accordion { display: flex; flex-direction: column; flex: 1; }
.outreach-accordion-item { border-top: 1px solid var(--color-border); flex: 1; display: flex; flex-direction: column; justify-content: center; }
.outreach-accordion-item:first-child { border-top: none; }
.outreach-accordion-trigger {
display: flex;
align-items: center;
gap: 12px;
width: 100%;
/* padding-inline: 0 is load-bearing, not decoration — this is a real
|