Design language tweaks v3
This commit is contained in:
@@ -138,7 +138,7 @@
|
||||
<TestimonialsSection testimonials={content.testimonials} seedKey="/" />
|
||||
<FounderStorySection founderStory={content.founderStory} />
|
||||
<InfoSection info={content.info} />
|
||||
<BookingSection booking={content.booking} />
|
||||
<BookingSection booking={content.booking} variant="card-stepper" />
|
||||
<InstagramSection instagram={content.instagram} />
|
||||
<Footer footer={content.footer} />
|
||||
{/if}
|
||||
|
||||
@@ -0,0 +1,922 @@
|
||||
<script lang="ts">
|
||||
import { onMount } from 'svelte';
|
||||
import Icon from '$lib/components/Icon.svelte';
|
||||
import PageHeader from '$lib/components/PageHeader.svelte';
|
||||
import VariantApplicationFields from '$lib/components/contact-form-variants/VariantApplicationFields.svelte';
|
||||
|
||||
type VariantTab = {
|
||||
id: string;
|
||||
index: string;
|
||||
label: string;
|
||||
kicker: string;
|
||||
};
|
||||
|
||||
const variantTabs: VariantTab[] = [
|
||||
{ id: 'variant-1', index: '01', label: 'Improved current', kicker: 'Familiar, lighter, clearer' },
|
||||
{ id: 'variant-2', index: '02', label: 'Split hero + form', kicker: 'Story on the left, action on the right' },
|
||||
{ id: 'variant-3', index: '03', label: 'Card stepper', kicker: 'Application flow with stronger rhythm' },
|
||||
{ id: 'variant-4', index: '04', label: 'Conversational', kicker: 'More guided, more human' },
|
||||
{ id: 'variant-5', index: '05', label: 'Trust-first', kicker: 'Reassurance before friction' },
|
||||
{ id: 'variant-6', index: '06', label: 'Ultra-minimal', kicker: 'Quiet luxury version' }
|
||||
];
|
||||
|
||||
let activeVariant = variantTabs[0].id;
|
||||
|
||||
onMount(() => {
|
||||
const sections = Array.from(document.querySelectorAll<HTMLElement>('.variant-showcase'));
|
||||
|
||||
const observer = new IntersectionObserver(
|
||||
(entries) => {
|
||||
const visible = entries
|
||||
.filter((entry) => entry.isIntersecting)
|
||||
.sort((a, b) => b.intersectionRatio - a.intersectionRatio)[0];
|
||||
|
||||
if (visible?.target?.id) {
|
||||
activeVariant = visible.target.id;
|
||||
}
|
||||
},
|
||||
{
|
||||
rootMargin: '-18% 0px -45% 0px',
|
||||
threshold: [0.2, 0.35, 0.55]
|
||||
}
|
||||
);
|
||||
|
||||
sections.forEach((section) => observer.observe(section));
|
||||
|
||||
return () => observer.disconnect();
|
||||
});
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
<title>Contact Form Variants | Goodwalk</title>
|
||||
<meta
|
||||
name="description"
|
||||
content="Six conversion-focused Goodwalk contact form variants for internal review before updating the live Meet and Greet flow."
|
||||
/>
|
||||
</svelte:head>
|
||||
|
||||
<main class="variants-page">
|
||||
<PageHeader
|
||||
variant="green"
|
||||
eyebrow="Internal review page"
|
||||
title="Contact Form Variants"
|
||||
subtitle="Six conversion-focused ways to frame the same Goodwalk application flow, all on one page, without touching the live contact route."
|
||||
>
|
||||
<div class="variants-hero-chips">
|
||||
<span class="variants-hero-chip">
|
||||
<Icon name="fas fa-paw" />
|
||||
Premium, calm, small-dog focused
|
||||
</span>
|
||||
<span class="variants-hero-chip">
|
||||
<Icon name="fas fa-heart" />
|
||||
Free Meet & Greet CTA in every version
|
||||
</span>
|
||||
<span class="variants-hero-chip">
|
||||
<Icon name="fas fa-mobile-screen-button" />
|
||||
Mobile-first comparison
|
||||
</span>
|
||||
</div>
|
||||
</PageHeader>
|
||||
|
||||
<div class="variants-switcher-wrap">
|
||||
<nav class="variants-switcher" aria-label="Contact form variants">
|
||||
{#each variantTabs as tab}
|
||||
<a
|
||||
href={`#${tab.id}`}
|
||||
class:active={activeVariant === tab.id}
|
||||
class="variants-switcher-tab"
|
||||
aria-current={activeVariant === tab.id ? 'page' : undefined}
|
||||
title={tab.kicker}
|
||||
>
|
||||
<span class="variants-switcher-index">{tab.index}</span>
|
||||
<span class="variants-switcher-label">{tab.label}</span>
|
||||
</a>
|
||||
{/each}
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
<section id="variant-1" class="variant-showcase">
|
||||
<div class="page-inner">
|
||||
<div class="variant-intro">
|
||||
<div>
|
||||
<span class="variant-kicker">01. Improved current</span>
|
||||
<h2>Keep the friendly Goodwalk feel, but lighten the weight and improve the rhythm.</h2>
|
||||
</div>
|
||||
<p>
|
||||
This is the safest replacement direction. It still feels recognisably Goodwalk, but the hierarchy is clearer,
|
||||
the trust cues breathe more, and the form reads more like an application than an enquiry box.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<article class="variant-surface variant-surface--current">
|
||||
<div class="variant-surface-head">
|
||||
<div class="variant-proof-row" aria-label="Application highlights">
|
||||
<span class="variant-proof-pill">
|
||||
<Icon name="fas fa-comment-dots" />
|
||||
Reply within 24 hours
|
||||
</span>
|
||||
<span class="variant-proof-pill">
|
||||
<Icon name="fas fa-heart" />
|
||||
Nervous dogs welcome
|
||||
</span>
|
||||
<span class="variant-proof-pill">
|
||||
<Icon name="fas fa-handshake" />
|
||||
Free Meet & Greet first
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<VariantApplicationFields
|
||||
idPrefix="variant-one"
|
||||
layout="carded"
|
||||
eyebrow="Current direction, modernised"
|
||||
title="Book your free Meet & Greet"
|
||||
subtitle="A friendlier two-step application with calmer spacing, lighter surfaces, and a clearer handoff."
|
||||
lead="Start with the dog, then the owner. Enough detail for a thoughtful recommendation, without making the first step feel heavy."
|
||||
submitLabel="Request a free Meet & Greet"
|
||||
/>
|
||||
</article>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="variant-2" class="variant-showcase variant-showcase--warm">
|
||||
<div class="page-inner">
|
||||
<div class="variant-intro">
|
||||
<div>
|
||||
<span class="variant-kicker">02. Split hero + form</span>
|
||||
<h2>Put the emotional reassurance and brand story beside the action.</h2>
|
||||
</div>
|
||||
<p>
|
||||
Better when the primary objection is trust. The left panel does the calming and framing; the right panel asks
|
||||
for details once the page already feels safe.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="variant-split-layout">
|
||||
<article class="variant-split-story">
|
||||
<div class="variant-split-photo">
|
||||
<img src="/images/founder-image-aless-goodwalk.jpg" alt="Aless from Goodwalk" />
|
||||
</div>
|
||||
<div class="variant-split-copy">
|
||||
<span class="variant-story-kicker">Book with confidence</span>
|
||||
<h3>Your dog starts with a real person, not a platform.</h3>
|
||||
<p>
|
||||
Every enquiry goes to Aless. If your dog would thrive in Tiny Gang, we will say so. If they need more space,
|
||||
time, or a calmer first step, we will say that too.
|
||||
</p>
|
||||
<ul class="variant-story-list">
|
||||
<li>Small-dog aware matching, not one-size-fits-all scheduling</li>
|
||||
<li>Free Meet & Greet before anything starts</li>
|
||||
<li>Strong fit for tiny dogs, nervous dogs, and routine-focused owners</li>
|
||||
</ul>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article class="variant-surface variant-surface--split">
|
||||
<VariantApplicationFields
|
||||
idPrefix="variant-two"
|
||||
eyebrow="Meet Aless first"
|
||||
title="Tell us about your dog"
|
||||
subtitle="The trust-building version: softer emotional framing, then a simple two-step application."
|
||||
lead="Tell us who your dog is, how they tend to feel around other dogs, and what kind of support you want from the week."
|
||||
submitLabel="Book a free Meet & Greet"
|
||||
/>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="variant-3" class="variant-showcase">
|
||||
<div class="page-inner">
|
||||
<div class="variant-intro">
|
||||
<div>
|
||||
<span class="variant-kicker">03. Card-based stepper</span>
|
||||
<h2>Make the guided application structure feel deliberate and premium.</h2>
|
||||
</div>
|
||||
<p>
|
||||
This version leans into progression and sequencing. Strong if you want the form to feel curated and higher-value
|
||||
rather than like a standard contact action.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="variant-stepper">
|
||||
<div class="variant-step-cards" aria-label="Application steps">
|
||||
<article class="variant-step-card variant-step-card--active">
|
||||
<span class="variant-step-number">1</span>
|
||||
<strong>Dog fit</strong>
|
||||
<p>Temperament, location, and Tiny Gang suitability.</p>
|
||||
</article>
|
||||
<article class="variant-step-card">
|
||||
<span class="variant-step-number">2</span>
|
||||
<strong>Owner details</strong>
|
||||
<p>Just enough to reply and arrange the Meet & Greet.</p>
|
||||
</article>
|
||||
<article class="variant-step-card">
|
||||
<span class="variant-step-number">3</span>
|
||||
<strong>Warm follow-up</strong>
|
||||
<p>Personal reply from Aless within 24 hours.</p>
|
||||
</article>
|
||||
</div>
|
||||
|
||||
<article class="variant-surface variant-surface--stepper">
|
||||
<VariantApplicationFields
|
||||
idPrefix="variant-three"
|
||||
layout="carded"
|
||||
eyebrow="Structured application"
|
||||
title="Apply for the right Goodwalk fit"
|
||||
subtitle="A more premium, card-led two-step flow for owners who like process and clarity."
|
||||
lead="A more structured application flow for owners who want clarity, process, and a sense that their dog will be matched thoughtfully."
|
||||
submitLabel="Start the Meet & Greet process"
|
||||
/>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="variant-4" class="variant-showcase variant-showcase--green">
|
||||
<div class="page-inner">
|
||||
<div class="variant-intro variant-intro--light">
|
||||
<div>
|
||||
<span class="variant-kicker">04. Conversational form</span>
|
||||
<h2>Sound more like Goodwalk speaking directly to the owner.</h2>
|
||||
</div>
|
||||
<p>
|
||||
This version is the warmest. Strongest if conversion improves when the interaction feels personal and guided,
|
||||
especially for worried owners and first-time dog-walking clients.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="variant-conversation-shell">
|
||||
<article class="variant-conversation-note">
|
||||
<span class="variant-conversation-pill">A calmer first step</span>
|
||||
<p>
|
||||
We are not looking for perfect answers here. Just enough context to understand your dog properly and point you
|
||||
toward the right walk, visit, or Meet & Greet conversation.
|
||||
</p>
|
||||
</article>
|
||||
|
||||
<article class="variant-surface variant-surface--conversation">
|
||||
<VariantApplicationFields
|
||||
idPrefix="variant-four"
|
||||
tone="conversational"
|
||||
eyebrow="A calmer conversation"
|
||||
title="Let’s start with your dog"
|
||||
subtitle="This one feels the most personal: Goodwalk voice first, application structure underneath."
|
||||
lead="Tell us about your dog as if you were introducing them to us in person."
|
||||
submitLabel="Talk it through with Aless"
|
||||
/>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="variant-5" class="variant-showcase">
|
||||
<div class="page-inner">
|
||||
<div class="variant-intro">
|
||||
<div>
|
||||
<span class="variant-kicker">05. Trust-first form</span>
|
||||
<h2>Lead with reassurance before asking for any effort.</h2>
|
||||
</div>
|
||||
<p>
|
||||
Best when the core conversion barrier is “Can I trust you with my dog?” rather than “Do I understand the service?”
|
||||
The form still matters, but the trust panel leads the page.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="variant-trust-layout">
|
||||
<aside class="variant-trust-panel" aria-label="Why Goodwalk feels safe">
|
||||
<div class="variant-trust-panel-top">
|
||||
<span class="variant-story-kicker">Why this feels easier</span>
|
||||
<h3>Owners do not have to guess what kind of care their dog will get.</h3>
|
||||
</div>
|
||||
|
||||
<div class="variant-trust-points">
|
||||
<article class="variant-trust-point">
|
||||
<Icon name="fas fa-user-check" />
|
||||
<div>
|
||||
<strong>Personal reply from Aless</strong>
|
||||
<p>Not a team inbox, not an anonymous handoff.</p>
|
||||
</div>
|
||||
</article>
|
||||
<article class="variant-trust-point">
|
||||
<Icon name="fas fa-dog" />
|
||||
<div>
|
||||
<strong>Tiny-dog aware recommendations</strong>
|
||||
<p>Especially important if your dog is small, sensitive, or easily overwhelmed.</p>
|
||||
</div>
|
||||
</article>
|
||||
<article class="variant-trust-point">
|
||||
<Icon name="fas fa-comments" />
|
||||
<div>
|
||||
<strong>Meet first, decide second</strong>
|
||||
<p>The free Meet & Greet keeps the first step low-pressure and genuinely helpful.</p>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
|
||||
<blockquote class="variant-trust-quote">
|
||||
“You know exactly who is caring for your dog. Your dog knows who is at the door.”
|
||||
</blockquote>
|
||||
</aside>
|
||||
|
||||
<article class="variant-surface variant-surface--trust">
|
||||
<VariantApplicationFields
|
||||
idPrefix="variant-five"
|
||||
layout="carded"
|
||||
eyebrow="Trust-first application"
|
||||
title="Start with a safe first step"
|
||||
subtitle="Lead with reassurance, then move into a guided two-step Meet and Greet request."
|
||||
lead="Tell us what kind of dog you have, what week-to-week support would help most, and whether Tiny Gang feels like the right fit."
|
||||
submitLabel="Request your free Meet & Greet"
|
||||
/>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="variant-6" class="variant-showcase variant-showcase--minimal">
|
||||
<div class="page-inner">
|
||||
<div class="variant-intro">
|
||||
<div>
|
||||
<span class="variant-kicker">06. Ultra-minimal premium</span>
|
||||
<h2>Cut almost everything back and let spacing, typography, and reassurance do the work.</h2>
|
||||
</div>
|
||||
<p>
|
||||
The quietest option. Strong if the brand is confident enough to convert with restraint rather than explanation.
|
||||
Probably best for a higher-trust audience or repeat referrals.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<article class="variant-minimal-shell">
|
||||
<div class="variant-minimal-copy">
|
||||
<span class="variant-story-kicker">Free Meet & Greet</span>
|
||||
<h3>Start with the right fit.</h3>
|
||||
<p>
|
||||
Tell us about your dog, your area, and the kind of support you need. We will come back with a calm next step,
|
||||
not a hard sell.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="variant-minimal-divider" aria-hidden="true"></div>
|
||||
|
||||
<VariantApplicationFields
|
||||
idPrefix="variant-six"
|
||||
tone="minimal"
|
||||
eyebrow="Quiet premium version"
|
||||
title="Book the right first meeting"
|
||||
subtitle="A stripped-back two-step flow where spacing, copy, and confidence do most of the work."
|
||||
lead=""
|
||||
submitLabel="Book the free Meet & Greet"
|
||||
/>
|
||||
</article>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<style>
|
||||
.variants-page {
|
||||
background: var(--off-white);
|
||||
}
|
||||
|
||||
.variants-hero-chips {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
flex-wrap: wrap;
|
||||
gap: 10px;
|
||||
margin-top: 28px;
|
||||
}
|
||||
|
||||
.variants-hero-chip {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
min-height: 38px;
|
||||
padding: 8px 14px;
|
||||
border-radius: 999px;
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
border: 1px solid rgba(255, 255, 255, 0.14);
|
||||
color: #fff;
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.variants-hero-chip :global(.icon) {
|
||||
color: var(--yellow);
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.variants-switcher-wrap {
|
||||
position: sticky;
|
||||
top: 12px;
|
||||
z-index: 25;
|
||||
padding: 14px var(--space-container-x) 0;
|
||||
}
|
||||
|
||||
.variants-switcher {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
max-width: var(--max-w);
|
||||
margin: 0 auto;
|
||||
padding: 10px;
|
||||
overflow-x: auto;
|
||||
border-radius: 24px;
|
||||
background: rgba(248, 247, 242, 0.9);
|
||||
box-shadow:
|
||||
inset 0 0 0 1px rgba(17, 20, 24, 0.06),
|
||||
0 16px 30px rgba(17, 20, 24, 0.08);
|
||||
backdrop-filter: blur(10px);
|
||||
scrollbar-width: none;
|
||||
}
|
||||
|
||||
.variants-switcher::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.variants-switcher-tab {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
min-height: 44px;
|
||||
padding: 0 14px;
|
||||
border-radius: 999px;
|
||||
color: #50555c;
|
||||
font-family: var(--font-head);
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
line-height: 1.2;
|
||||
white-space: nowrap;
|
||||
transition:
|
||||
background 0.18s ease,
|
||||
color 0.18s ease,
|
||||
transform 0.18s cubic-bezier(0.22, 1, 0.36, 1);
|
||||
}
|
||||
|
||||
.variants-switcher-tab.active {
|
||||
background: var(--gw-green);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.variants-switcher-index {
|
||||
color: var(--yellow-soft);
|
||||
font-size: 10px;
|
||||
letter-spacing: 0.08em;
|
||||
}
|
||||
|
||||
.variant-showcase {
|
||||
scroll-margin-top: 116px;
|
||||
padding: 40px 0 72px;
|
||||
}
|
||||
|
||||
.variant-showcase--warm {
|
||||
background: linear-gradient(180deg, rgba(245, 239, 230, 0.7), rgba(248, 247, 242, 0));
|
||||
}
|
||||
|
||||
.variant-showcase--green {
|
||||
background: linear-gradient(180deg, rgba(33, 48, 33, 0.96), rgba(33, 48, 33, 0.92));
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.variant-showcase--minimal {
|
||||
background: linear-gradient(180deg, rgba(255, 255, 255, 0.65), rgba(248, 247, 242, 0));
|
||||
}
|
||||
|
||||
.variant-intro {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1.1fr) minmax(280px, 0.9fr);
|
||||
gap: 22px;
|
||||
align-items: end;
|
||||
margin-bottom: 28px;
|
||||
}
|
||||
|
||||
.variant-intro--light h2,
|
||||
.variant-intro--light p {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.variant-kicker {
|
||||
display: inline-block;
|
||||
margin-bottom: 10px;
|
||||
color: var(--gw-green);
|
||||
font-family: var(--font-head);
|
||||
font-size: 11px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.08em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.variant-showcase--green .variant-kicker {
|
||||
color: var(--yellow);
|
||||
}
|
||||
|
||||
.variant-intro h2 {
|
||||
margin: 0;
|
||||
color: #0f1115;
|
||||
font-family: var(--font-head);
|
||||
font-size: clamp(28px, 3.4vw, 44px);
|
||||
line-height: 1.04;
|
||||
letter-spacing: -0.04em;
|
||||
text-wrap: balance;
|
||||
}
|
||||
|
||||
.variant-intro p {
|
||||
margin: 0;
|
||||
color: #50555c;
|
||||
font-size: 16px;
|
||||
line-height: 1.65;
|
||||
}
|
||||
|
||||
.variant-surface,
|
||||
.variant-split-story,
|
||||
.variant-conversation-note,
|
||||
.variant-trust-panel,
|
||||
.variant-minimal-shell {
|
||||
border-radius: 32px;
|
||||
background: linear-gradient(180deg, rgba(251, 251, 251, 0.98), rgba(247, 248, 246, 1));
|
||||
box-shadow:
|
||||
inset 0 0 0 1px rgba(17, 20, 24, 0.06),
|
||||
0 22px 52px rgba(17, 20, 24, 0.1);
|
||||
}
|
||||
|
||||
.variant-surface {
|
||||
padding: 28px;
|
||||
}
|
||||
|
||||
.variant-proof-row {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 10px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.variant-proof-pill {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
min-height: 38px;
|
||||
padding: 8px 14px;
|
||||
border-radius: 999px;
|
||||
background: rgba(33, 48, 33, 0.06);
|
||||
box-shadow: inset 0 0 0 1px rgba(17, 20, 24, 0.05);
|
||||
color: var(--gw-green);
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.variant-proof-pill :global(.icon) {
|
||||
color: var(--yellow-soft);
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.variant-split-layout,
|
||||
.variant-trust-layout {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(300px, 0.95fr) minmax(0, 1.05fr);
|
||||
gap: 22px;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.variant-split-story {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.variant-split-photo {
|
||||
aspect-ratio: 4 / 3;
|
||||
background: #e7dcc8;
|
||||
}
|
||||
|
||||
.variant-split-photo img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
object-position: center top;
|
||||
}
|
||||
|
||||
.variant-split-copy {
|
||||
display: grid;
|
||||
gap: 14px;
|
||||
padding: 24px 24px 26px;
|
||||
}
|
||||
|
||||
.variant-story-kicker {
|
||||
color: var(--gw-green);
|
||||
font-family: var(--font-head);
|
||||
font-size: 11px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.08em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.variant-split-copy h3,
|
||||
.variant-trust-panel h3,
|
||||
.variant-minimal-copy h3 {
|
||||
margin: 0;
|
||||
color: #10161a;
|
||||
font-family: var(--font-head);
|
||||
font-size: clamp(24px, 2vw, 32px);
|
||||
line-height: 1.08;
|
||||
letter-spacing: -0.03em;
|
||||
}
|
||||
|
||||
.variant-split-copy p,
|
||||
.variant-conversation-note p,
|
||||
.variant-minimal-copy p {
|
||||
margin: 0;
|
||||
color: #4d535a;
|
||||
font-size: 15px;
|
||||
line-height: 1.65;
|
||||
}
|
||||
|
||||
.variant-story-list {
|
||||
display: grid;
|
||||
gap: 10px;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.variant-story-list li {
|
||||
position: relative;
|
||||
padding-left: 20px;
|
||||
color: #2f3134;
|
||||
font-size: 14px;
|
||||
line-height: 1.55;
|
||||
}
|
||||
|
||||
.variant-story-list li::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 8px;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 50%;
|
||||
background: var(--yellow-soft);
|
||||
}
|
||||
|
||||
.variant-stepper {
|
||||
display: grid;
|
||||
gap: 18px;
|
||||
}
|
||||
|
||||
.variant-step-cards {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
gap: 14px;
|
||||
}
|
||||
|
||||
.variant-step-card {
|
||||
padding: 20px;
|
||||
border-radius: 26px;
|
||||
background: rgba(255, 255, 255, 0.8);
|
||||
box-shadow:
|
||||
inset 0 0 0 1px rgba(17, 20, 24, 0.06),
|
||||
0 12px 26px rgba(17, 20, 24, 0.05);
|
||||
}
|
||||
|
||||
.variant-step-card--active {
|
||||
background: linear-gradient(180deg, rgba(255, 209, 0, 0.18), rgba(255, 255, 255, 0.95));
|
||||
}
|
||||
|
||||
.variant-step-number {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 34px;
|
||||
height: 34px;
|
||||
margin-bottom: 14px;
|
||||
border-radius: 12px;
|
||||
background: var(--gw-green);
|
||||
color: var(--yellow);
|
||||
font-family: var(--font-head);
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.variant-step-card strong {
|
||||
display: block;
|
||||
margin-bottom: 6px;
|
||||
color: #10161a;
|
||||
font-family: var(--font-head);
|
||||
font-size: 15px;
|
||||
line-height: 1.25;
|
||||
}
|
||||
|
||||
.variant-step-card p {
|
||||
margin: 0;
|
||||
color: #5d636a;
|
||||
font-size: 13px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.variant-conversation-shell {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(260px, 0.72fr) minmax(0, 1.28fr);
|
||||
gap: 22px;
|
||||
align-items: start;
|
||||
}
|
||||
|
||||
.variant-conversation-note {
|
||||
padding: 24px;
|
||||
background:
|
||||
radial-gradient(circle at top right, rgba(255, 209, 0, 0.14), rgba(255, 209, 0, 0) 34%),
|
||||
linear-gradient(180deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.08));
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.variant-conversation-pill {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
min-height: 30px;
|
||||
padding: 0 12px;
|
||||
margin-bottom: 14px;
|
||||
border-radius: 999px;
|
||||
background: rgba(255, 209, 0, 0.15);
|
||||
color: var(--yellow);
|
||||
font-family: var(--font-head);
|
||||
font-size: 11px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.08em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.variant-surface--conversation {
|
||||
background: linear-gradient(180deg, rgba(251, 251, 251, 0.99), rgba(248, 247, 242, 1));
|
||||
}
|
||||
|
||||
.variant-trust-panel {
|
||||
display: grid;
|
||||
gap: 22px;
|
||||
padding: 28px;
|
||||
background:
|
||||
radial-gradient(circle at top right, rgba(255, 209, 0, 0.18), rgba(255, 209, 0, 0) 36%),
|
||||
linear-gradient(180deg, rgba(255, 250, 240, 0.96), rgba(247, 243, 232, 0.96));
|
||||
}
|
||||
|
||||
.variant-trust-panel-top {
|
||||
display: grid;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.variant-trust-points {
|
||||
display: grid;
|
||||
gap: 14px;
|
||||
}
|
||||
|
||||
.variant-trust-point {
|
||||
display: grid;
|
||||
grid-template-columns: 42px minmax(0, 1fr);
|
||||
gap: 12px;
|
||||
align-items: start;
|
||||
}
|
||||
|
||||
.variant-trust-point :global(.icon) {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 42px;
|
||||
height: 42px;
|
||||
border-radius: 14px;
|
||||
background: linear-gradient(135deg, var(--gw-green), var(--green-mid));
|
||||
color: var(--yellow);
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.variant-trust-point strong {
|
||||
display: block;
|
||||
margin-bottom: 4px;
|
||||
color: #11171b;
|
||||
font-family: var(--font-head);
|
||||
font-size: 14px;
|
||||
line-height: 1.25;
|
||||
}
|
||||
|
||||
.variant-trust-point p {
|
||||
margin: 0;
|
||||
color: #575d63;
|
||||
font-size: 14px;
|
||||
line-height: 1.55;
|
||||
}
|
||||
|
||||
.variant-trust-quote {
|
||||
margin: 0;
|
||||
padding-top: 18px;
|
||||
border-top: 1px solid rgba(17, 20, 24, 0.08);
|
||||
color: #202427;
|
||||
font-family: var(--font-head);
|
||||
font-size: 18px;
|
||||
line-height: 1.45;
|
||||
letter-spacing: -0.02em;
|
||||
}
|
||||
|
||||
.variant-minimal-shell {
|
||||
max-width: 880px;
|
||||
margin: 0 auto;
|
||||
padding: 36px;
|
||||
background: rgba(251, 251, 251, 0.92);
|
||||
}
|
||||
|
||||
.variant-minimal-copy {
|
||||
display: grid;
|
||||
gap: 12px;
|
||||
max-width: 42rem;
|
||||
}
|
||||
|
||||
.variant-minimal-divider {
|
||||
width: 100%;
|
||||
height: 1px;
|
||||
margin: 24px 0 28px;
|
||||
background: rgba(17, 20, 24, 0.08);
|
||||
}
|
||||
|
||||
@media (hover: hover) {
|
||||
.variants-switcher-tab:hover {
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
.variant-intro,
|
||||
.variant-split-layout,
|
||||
.variant-trust-layout,
|
||||
.variant-conversation-shell {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.variant-step-cards {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.variants-switcher-wrap {
|
||||
top: 8px;
|
||||
padding: 10px var(--space-container-x-mobile) 0;
|
||||
}
|
||||
|
||||
.variants-switcher {
|
||||
border-radius: 20px;
|
||||
}
|
||||
|
||||
.variant-showcase {
|
||||
scroll-margin-top: 104px;
|
||||
padding: 28px 0 56px;
|
||||
}
|
||||
|
||||
.variants-hero-chips {
|
||||
gap: 8px;
|
||||
margin-top: 22px;
|
||||
}
|
||||
|
||||
.variants-hero-chip {
|
||||
font-size: 12px;
|
||||
padding: 8px 12px;
|
||||
}
|
||||
|
||||
.variant-intro {
|
||||
gap: 14px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.variant-intro h2 {
|
||||
font-size: 28px;
|
||||
}
|
||||
|
||||
.variant-intro p {
|
||||
font-size: 15px;
|
||||
line-height: 1.58;
|
||||
}
|
||||
|
||||
.variant-surface,
|
||||
.variant-split-story,
|
||||
.variant-conversation-note,
|
||||
.variant-trust-panel,
|
||||
.variant-minimal-shell {
|
||||
border-radius: 24px;
|
||||
}
|
||||
|
||||
.variant-surface,
|
||||
.variant-trust-panel,
|
||||
.variant-minimal-shell {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.variant-split-copy {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.variant-proof-row {
|
||||
gap: 8px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.variant-proof-pill {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.variant-minimal-divider {
|
||||
margin: 20px 0 24px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user