/* ============================================================ Influeri — Layout C · "Spotlight" home (composition layer) Loads LAST in , after: styles.css → heart.css → heart-mark.css → bg-fx.css → hero-variants.css → logo-marquee.css → process.css → flow-blocks.css → studio-deck.css → case-cards.css → home-flagship.css so this file wins. It adds ONLY the page-level glue Layout C needs: · the spotlight hero shell (the .hv3 hero recomposed for the home — centred copy, the cursor spotlight wash, dual counter-flowing marquees), with the heart-mark moved to its own decorative band below · the canonical section set's rhythm: a logos marquee, the heart-mark band, the process WALKTHROUGH, the flow-blocks demo, the features grid, the case-cards CAROUSEL, and the testimonials carousel — each mounted component keeps its own visual styling; these rules only seat the hosts in the home's .section / .wrap rhythm. Reuses the shared chrome (.nav, .nav__sheet, .section, .wrap, .sec-head, .kicker, .sec-title, .sec-lede, .features/.feature, .quotes*, .btn*, .final, footer) from styles.css + home-flagship.css — never forks them. Tokens from styles.css :root. ============================================================ */ /* ---------- HERO — recompose the hv3 Spotlight Marquee for the home ---------- */ /* The hero reuses the existing .hv .hv3 markup + hero-variants.js (the .hv3__spot --mx/--my cursor wash + dual .marquee rows). These overrides only retune it for a real landing hero and seat the heart-mark inside it. */ .hero-spot { border-bottom: 1px solid var(--line); padding-top: clamp(56px, 8vw, 96px); padding-bottom: clamp(56px, 8vw, 92px); min-height: auto; } /* the home hero leads with copy, not a variation label */ .hero-spot .hv__label { display: none; } .hero-spot .hv__inner { max-width: 820px; } .hero-spot .hero__badge { margin-bottom: 18px; } .hero-spot .hv__title { font-family: var(--font-display); font-size: clamp(34px, 5.4vw, 60px); line-height: 1.05; letter-spacing: -0.028em; margin: 0 0 16px; } /* keep the gradient an ACCENT — a single emphasised word, not the whole line */ .hero-spot .hv__title em { font-style: normal; background: #0b0b0b; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } .hero-spot .hv__sub { font-size: clamp(16px, 1.6vw, 18px); } /* the prompt sits below the copy; marquees run beneath the whole inner */ .hero-spot .hv__prompt { margin-top: 6px; } /* lift the marquees off the prompt a touch and dim them so the copy leads */ .hero-spot .marquee { margin-top: 26px; opacity: 0.9; } .hero-spot .marquee + .marquee { margin-top: 14px; } /* ---------- HEART-MARK · dedicated aesthetic band (moved out of the hero) ---------- */ .heart-band { position: relative; overflow: hidden; text-align: center; background: radial-gradient(120% 92% at 50% 8%, rgba(11, 11, 11, 0.06), transparent 60%), var(--white); } .heart-band__inner { max-width: 780px; margin: 0 auto; } .heart-band__title { font-size: clamp(28px, 4vw, 46px); } .heart-band__title em { font-style: normal; background: #0b0b0b; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } .heart-band__lede { margin: 14px auto 0; } .heart-band__mark { max-width: 480px; margin: clamp(24px, 4vw, 48px) auto 0; } @media (max-width: 760px) { .heart-band__mark { max-width: 320px; } } /* ---------- LOGOS · brand marquee band ---------- */ /* logo-marquee.js self-mounts on [data-logo-marquee] and clones the track; logo-marquee.css owns the motion/fade. These rules only give the band a caption and seat it under the hero with a quiet top rule. */ .logos-band { border-bottom: 1px solid var(--line); text-align: center; } .logos-band__cap { margin: 0 0 clamp(10px, 1.5vw, 16px); font-size: 14px; color: var(--muted, #8a8a8a); letter-spacing: 0.01em; } .logos-band__cap strong { color: var(--primary); font-weight: 700; } .logos-band .logo-marquee { max-width: 1080px; margin-inline: auto; } /* ---------- mounted SECTION blocks — seat each component in a .section ---------- */ /* The component CSS (logo-marquee.css / process.css / flow-blocks.css / case-cards.css) carries each treatment's own visual styling; these rules only give the mounted hosts room inside the home's .wrap rhythm. */ .spot-block { margin-top: var(--sec-block-gap); } /* process · guided WALKTHROUGH host — self-contained (max-width 1080, margin auto) */ .spot-block .proc-wt { margin-top: 8px; } /* flow-blocks · 3-block live demo. We reuse the .fb-block markup WITHOUT the .fb section wrapper (which carries its own padding + background), so the blocks sit cleanly in the .section. The .fb-block grid, padding, reveal and the .fb-block + .fb-block border divider all come from flow-blocks.css; this only re-declares the container width the .fb__wrap normally provides. */ .fb-blocks { position: relative; max-width: 1180px; margin: 0 auto; } /* case-cards · CAROUSEL host — re-declare the elevation tokens the showcase's page wrapper provides, so the prominent card keeps its intended depth (graceful: absent = a flatter card, never broken). */ .spot-block.cc { margin-top: var(--sec-block-gap); --shadow-card: 0 1px 2px rgba(11, 11, 11, 0.06), 0 10px 22px -12px rgba(11, 11, 11, 0.20); --shadow-hover: 0 2px 6px rgba(11, 11, 11, 0.07), 0 16px 30px -12px rgba(11, 11, 11, 0.18); --shadow-focus: 0 3px 10px rgba(11, 11, 11, 0.07), 0 22px 40px -14px rgba(11, 11, 11, 0.22); } .spot-block .ss-hint { display: block; text-align: center; margin-top: 16px; font-size: 13px; color: var(--muted, #9a9a9a); } /* ============================================================ NEW SECTION COMPONENTS — seat each treatment's host in the .section / .wrap / .spot-block rhythm. Each component's own CSS (cards.css / creator-cards.css / success-stories.css / trending-creators.css) carries the treatment's visual styling; these rules only (a) give the hosts room and (b) re-declare the elevation tokens the showcase page wrappers (.tcm / .ss / .cc) normally provide, so cards keep their intended depth on this page (graceful: absent ⇒ flatter card, never broken — the same pattern .spot-block.cc already uses for case-cards). ============================================================ */ /* shared elevation tokens for the new card sections (match the showcase wrappers' values) — scoped to the new blocks so nothing else shifts. */ .spot-why .spot-block, .spot-creators .spot-block, .spot-metrics .spot-block { --shadow-card: 0 1px 2px rgba(11, 11, 11, 0.06), 0 10px 22px -12px rgba(11, 11, 11, 0.20); --shadow-hover: 0 2px 6px rgba(11, 11, 11, 0.07), 0 16px 30px -12px rgba(11, 11, 11, 0.18); --shadow-focus: 0 3px 10px rgba(11, 11, 11, 0.07), 0 22px 40px -14px rgba(11, 11, 11, 0.22); } /* WHY INFLUERI · cards bento — the bento grid fills the .wrap width; a soft pink→gold wash anchors it to the spotlight layout (accent only). */ .spot-why .cds-bento { margin-top: 4px; } /* CREATORS READY TO MATCH · creator-cards compact list-row — the directory rows sit centred in the wrap; cap the column so dense rows stay readable. */ .spot-creators .cc-rows { max-width: 920px; margin-inline: auto; } .spot-creators .cc-row { cursor: pointer; } .spot-creators .cc-row:focus-visible { outline: 2px solid var(--pink, #0b0b0b); outline-offset: 3px; } /* BRANDS · success-stories metric — the 3-up big-number grid fills the wrap; the count-up + reduce path are owned by success-stories.js. */ .spot-metrics .ss-metric { margin-top: 4px; } /* TRENDING RIGHT NOW · trending-creators depth stack — the solo vertical lane is already max-width:440px / centred by trending-creators.css; give the band a quiet pink→gold backdrop so the focal card reads against the white. */ .spot-trending { position: relative; overflow: hidden; text-align: center; background: radial-gradient(120% 88% at 50% 6%, rgba(130, 130, 130, 0.06), transparent 58%), var(--white); } .spot-trending .spot-depth { margin-inline: auto; } /* TRENDING STRIP (marquee, ported from home.html) + Studio popup overlay */ .spot-trending-strip { overflow: hidden; --card-w: 300px; --gap: 22px; } .spot-trending-strip .trending__rows { display: flex; flex-direction: column; gap: 8px; } .spot-trending-strip .tcm-rail { padding: 22px 0 28px; margin: 4px 0; } .spot-trending-strip .creator { cursor: pointer; } .spot-trending-strip .creator:hover { box-shadow: 0 8px 28px rgba(0,0,0,0.13); } .spot-trending-strip .creator:focus-visible { outline: 2px solid var(--pink, #0b0b0b); outline-offset: 3px; } /* ---- Studio popup: the studio card IS the modal. Center the WHOLE deck (card + Like/Dislike/Chat actions) on a dimmed backdrop — no extra panel. ---- */ .trend-studio-overlay { position: fixed; inset: 0; z-index: 1000; display: none; align-items: center; justify-content: center; padding: clamp(12px, 3vw, 32px); background: rgba(12, 10, 20, 0.58); -webkit-backdrop-filter: blur(7px); backdrop-filter: blur(7px); opacity: 0; transition: opacity .28s ease; } .trend-studio-overlay.is-open { display: flex; opacity: 1; } /* transparent centering wrapper — no panel chrome; just holds the deck + close. Scoped to .sd-modal-panel (not a bare `div` tag) because studio-chat.js parks its own .ca-scrim/.ca-pane elements as siblings inside this overlay when holder:overlay — a tag selector would grab those too, override their position:absolute, and turn them into extra flex items that push this panel off-center. */ .trend-studio-overlay > .sd-modal-panel { position: relative; width: min(780px, 96vw); overflow: visible; transform: translateY(12px) scale(.985); transition: transform .3s cubic-bezier(.22,.61,.36,1); } .trend-studio-overlay > .sd-modal-panel::-webkit-scrollbar { display: none; } .trend-studio-overlay.is-open > .sd-modal-panel { transform: none; } /* one clean close — floats over the backdrop, clear of the card */ .trend-studio-close { position: fixed; top: 18px; right: 22px; z-index: 5; width: 42px; height: 42px; border-radius: 50%; border: 1px solid rgba(255,255,255,.28); background: rgba(18,16,26,.55); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); color: #fff; font-size: 21px; line-height: 1; cursor: pointer; display: grid; place-items: center; transition: transform .15s, background .15s; } .trend-studio-close:hover { transform: scale(1.08); background: rgba(18,16,26,.82); } /* shrink the whole deck as a unit (zoom) so the 3-card stacked SWIPE animation is preserved — just smaller and centered. mount() puts .sd-root ON the stage. */ #trendStudioStage.sd-root { zoom: 0.68; } #trendStudioStage .deck-wrap { margin: 6px auto 12px; max-width: 1000px; } #trendStudioStage .deck { height: clamp(560px, 72vh, 720px); } #trendStudioStage .card__close { display: none; } /* drop the card's decorative × */ /* .toast is position:fixed, which zoom mislocates — anchor it inside the (zoomed) stage so the "Chat with @…" confirmation is actually visible */ #trendStudioStage .toast { position: absolute; bottom: 8px; } @media (max-width: 560px) { #trendStudioStage.sd-root { zoom: 0.5; } } @media (prefers-reduced-motion: reduce) { .trend-studio-overlay, .trend-studio-overlay > .sd-modal-panel { transition: none; } } /* ============================================================ REDUCED MOTION — the hv3 cursor wash + marquees already freeze via hero-variants.css (@media reduce → .marquee__track { animation: none }), and heart-mark/bg-fx receive reduce=true from the page JS so they skip the cursor follow / ambient. The mounted components own their own reduce paths (logo-marquee freezes; flow-blocks shows static end-states; the case-cards carousel becomes a scroll-snap strip; testimonials drop autoplay; the process walkthrough reveals all blocks). The four new section components also own their reduce paths: cards bento is static; creator-cards list-row shows the final match % (no count-up); success-stories metric shows the final numbers; trending-creators depth stack becomes a plain scrollable lane. This block is the page-level guarantee that the spotlight wash + the new-section reveals hold still. ============================================================ */ @media (prefers-reduced-motion: reduce) { .hero-spot .hv3__spot { background-position: 50% 38%; } .hero-spot .marquee { opacity: 1; } } /* ---------- flow-hero polish + section chrome (Layout C) ---------- The spotlight hero runs the cinematic flow as .hh[data-noheart]. Its min-height + the deck/dashboard vertical offsets live in flow-results.css (shared by both flow homes). Here we only trim the dead space above the copy and drop two bits of chrome per request. */ .hh[data-noheart] { padding-top: clamp(22px, 3.2vw, 46px); } /* hide the small interaction-hint captions under the card sections (must out-specify the `.spot-block .ss-hint { display:block }` rule above) */ .spot-block .ss-hint, .ss-hint { display: none; } /* customer-cases carousel: drop the dwell/time progress bar, keep the dots */ .cc-car__progress { display: none; } /* [data-copy] always above the overlay (z-index 4); contains margin bleed + gives a clean gap before the prompt card. */ .hv-flow[data-noheart] [data-copy] { position: relative; z-index: 20; padding-bottom: 1px; /* BFC: prevents last-child margin from bleeding below */ margin-bottom: 14px; /* clean gap between copy block and prompt card */ } .hv-flow[data-noheart] [data-copy] .hv__sub { margin-bottom: 8px; } /* ---- Try-it-yourself: stacked symmetrical layout, note under the button row ---- */ .hv-flow[data-noheart] .hh__try { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; margin-top: 10px; } .hv-flow[data-noheart] .hh__try-row { display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; } .hv-flow[data-noheart] .hh__try .hh__try-note { margin-left: 0; font-size: 13px; color: #8a8a93; } @keyframes try-glow { 0%, 100% { box-shadow: 0 0 0 0 rgba(11, 11, 11, 0); } 50% { box-shadow: 0 0 0 5px rgba(11, 11, 11, 0.10), 0 8px 24px rgba(11, 11, 11, 0.12); } } .hv-flow[data-noheart] .hh__try-btn { animation: try-glow 2.8s ease-in-out 0.9s infinite; } /* Try-it-yourself: always visible — never hide on aria-pressed */ .hh__try .hh__try-btn[aria-pressed="true"] { display: inline-flex; } /* flow results: transparent background — the page bg is already light, no frosted pane needed for these no-heart heroes */ .hh[data-noheart] .ru, .hv-flow[data-noheart] .ru { background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; } /* ============================================================ Explore · Block 1 override — single creator column (spotlight only) The spotlight Block 1 ([data-spot-match]) reuses the shared .fb-match / .prompt-card chrome and the .ru__creator card, then stacks the cards in one centred vertical column where the Estimated Results card used to sit. JS (home-spotlight.js · buildSpotMatch) handles the type → match → reveal loop. ============================================================ */ .spot-col { width: 100%; max-width: 380px; margin: 0 auto; display: flex; flex-direction: column; gap: 12px; padding: clamp(14px, 1.8vw, 26px) 0; } .spot-col__card { will-change: transform, opacity; } @media (prefers-reduced-motion: reduce) { .spot-col { opacity: 1 !important; } .spot-col__card { opacity: 1 !important; transform: none !important; } }