/* Home page — hero with cursor-tracking shimmer, feature cards, CTA. */
.hero {
position: relative;
/* Fill the viewport below the sticky header so "How it works"
sits below the fold and only appears once you scroll. */
min-height: calc(100svh - 64px);
display: flex;
align-items: center;
padding-block: clamp(48px, 8vw, 96px);
overflow: hidden;
}
/* Soft blob in the background that drifts toward the cursor. The mask
feathers the edges (top, sides, and especially the bottom) so the halo
dissolves into the canvas instead of cutting sharply at the section
boundary when you scroll past it. The bottom fade has to complete
*before* the hero's overflow clip, otherwise the residual mask alpha
reads as a horizontal seam against the cream canvas in light mode. */
.hero__halo {
position: absolute;
inset: -10% -10% -5% -10%;
pointer-events: none;
filter: blur(70px);
opacity: 0.55;
z-index: 0;
background:
radial-gradient(40% 40% at calc(50% + var(--cursor-x, 0px) * 0.06) calc(34% + var(--cursor-y, 0px) * 0.04),
var(--sh-lavender) 0%, transparent 70%),
radial-gradient(35% 35% at calc(72% - var(--cursor-x, 0px) * 0.04) calc(60% + var(--cursor-y, 0px) * 0.04),
var(--sh-sky) 0%, transparent 75%),
radial-gradient(30% 30% at calc(28% + var(--cursor-x, 0px) * 0.03) calc(70% - var(--cursor-y, 0px) * 0.03),
var(--sh-rose) 0%, transparent 75%);
-webkit-mask-image: linear-gradient(to bottom,
transparent 0%, #000 12%, #000 42%, transparent 88%);
mask-image: linear-gradient(to bottom,
transparent 0%, #000 12%, #000 42%, transparent 88%);
transition: background 200ms ease-out;
}
html.dark .hero__halo { opacity: 0.5; }
.hero__grid {
position: relative;
z-index: 1;
display: grid;
gap: var(--s48);
align-items: center;
}
@media (min-width: 920px) {
.hero__grid { grid-template-columns: 1.05fr 1fr; gap: var(--s64); }
}
.hero__eyebrow {
display: inline-flex;
align-items: center;
gap: var(--s8);
padding: 6px 12px;
border-radius: 999px;
background: var(--surface);
border: 1px solid var(--border-subtle);
font-size: 13px;
color: var(--fg-muted);
box-shadow: var(--shadow-soft);
}
.hero__eyebrow::before {
content: '';
width: 8px; height: 8px; border-radius: 50%;
background: conic-gradient(from 0deg,
var(--sh-rose), var(--sh-lavender), var(--sh-periwinkle),
var(--sh-sky), var(--sh-mint), var(--sh-rose));
box-shadow: 0 0 8px rgba(179, 136, 214, 0.6);
}
.hero h1 {
margin-top: var(--s16);
font-family: var(--font-display);
font-weight: 700;
font-size: clamp(40px, 6.6vw, 72px);
line-height: 1.04;
letter-spacing: -0.025em;
}
/* Seamlessly looping gradient: the palette starts AND ends on rose, the
background tile is exactly twice as wide as the text, and the animation
shifts by exactly one tile — so the end of one cycle lines up pixel-for-
pixel with the start of the next. */
.hero h1 em {
font-style: italic;
background: linear-gradient(95deg,
var(--sh-rose), var(--sh-lavender), var(--sh-periwinkle),
var(--sh-sky), var(--sh-mint), var(--sh-rose));
background-size: 200% 100%;
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
animation: shimmer-text 18s linear infinite;
}
@keyframes shimmer-text {
from { background-position: 0% 0; }
to { background-position: 200% 0; }
}
.hero__lede {
margin-top: var(--s24);
font-size: clamp(17px, 1.6vw, 20px);
line-height: 1.55;
color: var(--fg-muted);
max-width: 52ch;
}
.hero__ctas {
margin-top: var(--s32);
display: flex;
flex-wrap: wrap;
gap: var(--s12);
}
.hero__ctas-note {
margin-top: var(--s12);
font-size: 13px;
color: var(--fg-muted);
}
/* The big "bubble" — cursor-tracked iridescent ring around a polaroid stack. */
.bubble-frame {
--ring-thickness: 6px;
--tilt-x: 0deg;
--tilt-y: 0deg;
position: relative;
aspect-ratio: 1 / 1;
width: min(440px, 92%);
margin-inline: auto;
border-radius: 50%;
padding: var(--ring-thickness);
background: conic-gradient(
from calc(var(--shimmer-angle, 0deg)),
var(--sh-rose), var(--sh-lavender), var(--sh-periwinkle),
var(--sh-sky), var(--sh-mint), var(--sh-rose)
);
filter: drop-shadow(0 30px 40px rgba(63, 47, 85, 0.18));
transform: perspective(900px) rotateX(var(--tilt-y)) rotateY(var(--tilt-x));
transition: transform 220ms ease-out;
will-change: transform, background;
}
.bubble-frame__inner {
position: relative;
width: 100%;
height: 100%;
border-radius: 50%;
background: var(--surface);
overflow: hidden;
display: grid;
place-items: center;
}
/* Stylised polaroid stack inside the bubble — stand-in for screenshots. */
.polaroid-stack {
position: relative;
width: 78%;
aspect-ratio: 1 / 1;
}
.polaroid {
position: absolute;
inset: 0;
margin: auto;
width: 78%;
height: 92%;
background: var(--polaroid);
border-radius: var(--radius-md);
padding: 10px 10px 28px 10px;
box-shadow:
0 22px 35px rgba(63, 47, 85, 0.14),
0 8px 16px rgba(63, 47, 85, 0.08);
display: flex;
flex-direction: column;
gap: 8px;
/* Composes with `transform` below — pointer-tracked parallax. */
translate: var(--parallax-x, 0) var(--parallax-y, 0);
transition: translate 180ms ease-out;
}
/* Dark mode: stronger shadow + a tight outline so the three stacked
polaroids read as distinct cards instead of merging into one slab. */
html.dark .polaroid {
box-shadow:
0 26px 45px rgba(0, 0, 0, 0.65),
0 6px 16px rgba(0, 0, 0, 0.5),
0 0 0 1px rgba(0, 0, 0, 0.35);
}
.polaroid__photo {
flex: 1;
border-radius: 10px;
background: linear-gradient(135deg, var(--sh-lavender), var(--sh-sky));
}
.polaroid__caption {
font-family: var(--font-display);
font-style: italic;
font-size: 13px;
color: var(--fg-muted);
text-align: center;
padding-top: 4px;
}
.polaroid--back { transform: rotate(-8deg) translate(-8%, 4%); }
.polaroid--mid { transform: rotate(4deg) translate(6%, -3%); }
.polaroid--front { transform: rotate(-2deg); z-index: 2; }
/* Mock "photos" — inline SVG illustrations matching each caption. Each is
a single soft-pastel scene at 200×200, sized cover so it fills the
polaroid photo area regardless of the polaroid's exact dimensions. */
/* Sunday picnic — warm sky, low sun, rolling green hills. */
.polaroid--back .polaroid__photo {
background:
url('data:image/svg+xml;utf8,') center / cover no-repeat;
}
/* First snow — pale cool sky, soft flakes, white drifts, tiny pines. */
.polaroid--mid .polaroid__photo {
background:
url('data:image/svg+xml;utf8,') center / cover no-repeat;
}
/* That walk home — dusk gradient sky, moon, distant silhouettes. */
.polaroid--front .polaroid__photo {
background:
url('data:image/svg+xml;utf8,') center / cover no-repeat;
}
/* Sections. */
section.block { padding-block: clamp(64px, 8vw, 112px); }
section.block + section.block { padding-top: 0; }
.section-eyebrow {
font-family: var(--font-body);
font-weight: 700;
font-size: 12px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--accent-strong);
}
.section-title {
margin-top: var(--s8);
font-family: var(--font-display);
font-weight: 700;
font-size: clamp(28px, 4vw, 44px);
line-height: 1.12;
letter-spacing: -0.015em;
max-width: 22ch;
}
.section-lede {
margin-top: var(--s12);
font-size: 17px;
line-height: 1.6;
color: var(--fg-muted);
max-width: 60ch;
}
/* Feature grid. */
.features {
margin-top: var(--s48);
display: grid;
gap: var(--s24);
}
@media (min-width: 720px) { .features { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 980px) { .features { grid-template-columns: repeat(3, 1fr); } }
.feature {
position: relative;
padding: var(--s32);
border-radius: var(--radius-lg);
background: var(--surface);
border: 1px solid var(--border-subtle);
box-shadow: var(--shadow-soft);
transition: transform 180ms ease, box-shadow 200ms ease, border-color 200ms ease;
overflow: hidden;
}
.feature:hover {
transform: translateY(-2px);
border-color: var(--border-strong);
box-shadow: var(--shadow-lift);
}
.feature__icon {
width: 44px; height: 44px;
border-radius: 14px;
display: grid; place-items: center;
font-size: 22px;
background: var(--surface-alt);
color: var(--accent-strong);
margin-bottom: var(--s16);
}
.feature__title { font-family: var(--font-display); font-weight: 600; font-size: 20px; }
.feature__body { margin-top: var(--s8); color: var(--fg-muted); font-size: 15px; line-height: 1.55; }
/* "How it works" — three soft steps. */
.steps {
margin-top: var(--s48);
display: grid;
gap: var(--s24);
counter-reset: step;
}
@media (min-width: 720px) { .steps { grid-template-columns: repeat(3, 1fr); } }
.step {
background: var(--surface);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-lg);
padding: var(--s32);
position: relative;
}
.step::before {
counter-increment: step;
content: counter(step);
position: absolute;
top: var(--s24); right: var(--s24);
font-family: var(--font-display);
font-weight: 700;
font-size: 36px;
color: var(--surface-alt);
line-height: 1;
}
.step__title { font-family: var(--font-display); font-weight: 600; font-size: 18px; }
.step__body { margin-top: var(--s8); color: var(--fg-muted); font-size: 15px; line-height: 1.55; }
/* "Here's how it goes." — three little animated scenes that tell the user
story (gather → post → shimmer). Each scene reveals on scroll-in via
the .in-view class added by story.js. Hover puts the scene into a
playful second-stage animation. */
.story__scenes {
margin-top: var(--s48);
display: grid;
gap: var(--s48) var(--s32);
list-style: none;
padding: 0;
}
@media (min-width: 760px) {
.story__scenes { grid-template-columns: repeat(3, 1fr); }
}
.story__scene {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--s24);
text-align: center;
}
.story__caption {
font-family: var(--font-display);
font-weight: 600;
font-size: 18px;
line-height: 1.4;
max-width: 24ch;
color: var(--fg-default);
}
.scene {
position: relative;
width: 200px;
height: 200px;
display: grid;
place-items: center;
}
.scene__bubble {
--shimmer-angle: 0deg;
--ring-thickness: 5px;
width: 130px;
height: 130px;
border-radius: 50%;
padding: var(--ring-thickness);
background: conic-gradient(
from var(--shimmer-angle),
var(--sh-rose), var(--sh-lavender), var(--sh-periwinkle),
var(--sh-sky), var(--sh-mint), var(--sh-rose)
);
animation: shimmer-rotate 18s linear infinite;
filter: drop-shadow(0 14px 22px rgba(63, 47, 85, 0.16));
position: relative;
transition: filter 300ms ease, transform 300ms ease;
}
.scene__bubble::before {
content: '';
display: block;
width: 100%;
height: 100%;
border-radius: 50%;
background: var(--surface);
}
html.dark .scene__bubble {
filter: drop-shadow(0 14px 22px rgba(0, 0, 0, 0.5));
}
/* Scene 1 — Cadence: two pills, the "Weekly" one painted with the
iridescent shimmer to read as the selected option. */
.scene--cadence {
display: flex;
flex-direction: column;
gap: 12px;
align-items: center;
justify-content: center;
}
.cadence-pill {
font-family: var(--font-display);
font-weight: 500;
font-size: 15px;
padding: 10px 26px;
border-radius: 999px;
background: var(--surface);
color: var(--fg-muted);
border: 1px solid var(--border-subtle);
min-width: 124px;
text-align: center;
opacity: 0;
transform: translateY(8px) scale(0.92);
transition: opacity 600ms ease,
transform 600ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
.story__scene.in-view .cadence-pill {
opacity: 1;
transform: translateY(0) scale(1);
}
.story__scene.in-view .cadence-pill:nth-child(1) { transition-delay: 120ms; }
.story__scene.in-view .cadence-pill:nth-child(2) { transition-delay: 280ms; }
.cadence-pill--selected {
--shimmer-angle: 0deg;
background: conic-gradient(
from var(--shimmer-angle),
var(--sh-rose), var(--sh-lavender), var(--sh-periwinkle),
var(--sh-sky), var(--sh-mint), var(--sh-rose)
);
color: var(--fg-default);
border-color: transparent;
font-weight: 600;
box-shadow: 0 8px 20px rgba(63, 47, 85, 0.2);
}
html.dark .cadence-pill--selected {
box-shadow: 0 10px 24px rgba(0, 0, 0, 0.5);
}
/* Live-feeling motion: the selected pill rotates its iridescent fill AND
gently "breathes" up and down; the unselected pill bobs softly out of
phase so the pair never sits still. Both kick in after the entrance
transition has settled (700ms delay matches the entry duration). */
.story__scene.in-view .cadence-pill--selected {
animation:
shimmer-rotate 12s linear infinite,
cadence-breath 3.6s ease-in-out 700ms infinite;
}
.story__scene.in-view .cadence-pill:not(.cadence-pill--selected) {
animation: cadence-bob 4s ease-in-out 900ms infinite;
}
@keyframes cadence-breath {
0%, 100% { transform: translateY(0) scale(1); box-shadow: 0 8px 20px rgba(63, 47, 85, 0.2); }
50% { transform: translateY(-4px) scale(1.04); box-shadow: 0 14px 28px rgba(63, 47, 85, 0.28); }
}
@keyframes cadence-bob {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-2px); }
}
.story__scene:hover .scene--cadence .cadence-pill--selected {
animation-play-state: paused;
transform: translateY(-6px) scale(1.07);
transition: transform 280ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
/* Scene 2 — Post: a polaroid lands inside the bubble. */
.scene__polaroid {
position: absolute;
top: 50%; left: 50%;
width: 64px; height: 76px;
border-radius: 6px;
background: var(--polaroid);
padding: 4px 4px 14px 4px;
box-shadow:
0 16px 26px rgba(63, 47, 85, 0.24),
0 6px 12px rgba(63, 47, 85, 0.12);
transform: translate(-50%, 110%) rotate(10deg);
opacity: 0;
transition: transform 750ms cubic-bezier(0.34, 1.56, 0.64, 1),
opacity 500ms ease;
}
html.dark .scene__polaroid {
box-shadow:
0 18px 28px rgba(0, 0, 0, 0.65),
0 4px 10px rgba(0, 0, 0, 0.5),
0 0 0 1px rgba(0, 0, 0, 0.3);
}
.scene__polaroid-photo {
display: block;
width: 100%; height: 100%;
border-radius: 3px;
background: linear-gradient(135deg, var(--sh-rose), var(--sh-lavender));
}
.story__scene.in-view .scene__polaroid {
transform: translate(-50%, -50%) rotate(-4deg);
opacity: 1;
transition-delay: 280ms;
}
.story__scene:hover .scene--post .scene__polaroid {
transform: translate(-50%, -50%) rotate(-2deg) scale(1.08);
transition-duration: 380ms;
transition-delay: 0ms;
}
/* Scene 3 — Reveal: four polaroids fly in from far positions and converge
in a small overlapping stack inside the bubble. Tight 150ms stagger
reads as "everyone's posts arrive together". The bubble does a one-shot
pulse the moment they all land. */
.scene--reveal .scene__bubble {
animation: shimmer-rotate 14s linear infinite;
}
.reveal-polaroid {
position: absolute;
top: 50%; left: 50%;
width: 40px; height: 48px;
margin: -24px 0 0 -20px; /* centre via negative margins */
border-radius: 5px;
background: var(--polaroid);
padding: 3px 3px 10px 3px;
box-shadow:
0 16px 28px rgba(63, 47, 85, 0.3),
0 6px 12px rgba(63, 47, 85, 0.14);
opacity: 0;
transition: transform 800ms cubic-bezier(0.34, 1.56, 0.64, 1),
opacity 500ms ease;
z-index: 1;
}
html.dark .reveal-polaroid {
box-shadow:
0 18px 30px rgba(0, 0, 0, 0.68),
0 4px 10px rgba(0, 0, 0, 0.5),
0 0 0 1px rgba(0, 0, 0, 0.35);
}
.reveal-polaroid::before {
content: '';
display: block;
width: 100%; height: 100%;
border-radius: 3px;
background: linear-gradient(135deg, var(--sh-rose), var(--sh-lavender));
}
.reveal-polaroid--2::before { background: linear-gradient(135deg, var(--sh-sky), var(--sh-mint)); }
.reveal-polaroid--3::before { background: linear-gradient(135deg, var(--sh-lavender), var(--sh-periwinkle)); }
.reveal-polaroid--4::before { background: linear-gradient(135deg, var(--sh-mint), var(--sh-sky)); }
/* Far starting positions, way outside the scene. */
.reveal-polaroid--1 { transform: translate(-130px, -110px) rotate(-32deg); }
.reveal-polaroid--2 { transform: translate( 130px, -100px) rotate( 34deg); }
.reveal-polaroid--3 { transform: translate(-120px, 120px) rotate( 22deg); }
.reveal-polaroid--4 { transform: translate( 130px, 110px) rotate(-28deg); }
/* Resting positions — small fan stacked over the bubble. */
.story__scene.in-view .reveal-polaroid { opacity: 1; }
.story__scene.in-view .reveal-polaroid--1 { transform: translate(-26px, -18px) rotate(-10deg); transition-delay: 320ms; }
.story__scene.in-view .reveal-polaroid--2 { transform: translate( 22px, -16px) rotate( 11deg); transition-delay: 380ms; }
.story__scene.in-view .reveal-polaroid--3 { transform: translate(-22px, 18px) rotate( 5deg); transition-delay: 440ms; }
.story__scene.in-view .reveal-polaroid--4 { transform: translate( 26px, 16px) rotate( -6deg); transition-delay: 500ms; }
/* Hover — fan the stack open like spreading photos on a table. */
.story__scene:hover .scene--reveal .reveal-polaroid {
transition-duration: 450ms;
transition-delay: 0ms;
}
.story__scene:hover .scene--reveal .reveal-polaroid--1 { transform: translate(-44px, -22px) rotate(-16deg) scale(1.06); }
.story__scene:hover .scene--reveal .reveal-polaroid--2 { transform: translate( 40px, -20px) rotate( 17deg) scale(1.06); }
.story__scene:hover .scene--reveal .reveal-polaroid--3 { transform: translate(-36px, 24px) rotate( 9deg) scale(1.06); }
.story__scene:hover .scene--reveal .reveal-polaroid--4 { transform: translate( 42px, 22px) rotate(-10deg) scale(1.06); }
/* Sparkles — twinkle in around the polaroid stack once it lands, with a
~1100ms delay so they appear in concert with the bubble pulse. */
.reveal-sparkle {
position: absolute;
color: var(--sh-periwinkle);
text-shadow:
0 0 10px var(--sh-lavender),
0 0 18px color-mix(in oklab, var(--sh-rose) 60%, transparent);
opacity: 0;
pointer-events: none;
z-index: 2;
}
.reveal-sparkle--1 { top: 8%; right: 14%; font-size: 22px; }
.reveal-sparkle--2 { bottom: 12%; left: 10%; font-size: 14px; }
.reveal-sparkle--3 { top: 42%; right: 4%; font-size: 12px; }
.reveal-sparkle--4 { top: 18%; left: 8%; font-size: 16px; }
html.dark .reveal-sparkle {
color: var(--sh-lavender);
text-shadow:
0 0 12px var(--sh-lavender),
0 0 22px color-mix(in oklab, var(--sh-rose) 70%, transparent);
}
.story__scene.in-view .reveal-sparkle {
animation: reveal-twinkle 3.2s ease-in-out infinite;
animation-delay: 1100ms;
}
.story__scene.in-view .reveal-sparkle--2 { animation-delay: 1500ms; }
.story__scene.in-view .reveal-sparkle--3 { animation-delay: 1900ms; }
.story__scene.in-view .reveal-sparkle--4 { animation-delay: 2300ms; }
@keyframes reveal-twinkle {
0%, 100% { opacity: 0; transform: scale(0.5) rotate(0deg); }
50% { opacity: 0.95; transform: scale(1.1) rotate(45deg); }
}
/* CTA block. */
.cta-card {
margin-top: var(--s48);
padding: clamp(32px, 5vw, 64px);
border-radius: var(--radius-xl);
text-align: center;
background:
radial-gradient(60% 80% at 50% 0%, color-mix(in oklab, var(--sh-lavender) 35%, transparent), transparent 70%),
var(--surface);
border: 1px solid var(--border-subtle);
box-shadow: var(--shadow-soft);
}
.cta-card h2 { font-family: var(--font-display); font-weight: 700; font-size: clamp(24px, 3.4vw, 36px); }
.cta-card p { color: var(--fg-muted); margin-top: var(--s12); }
.cta-card .hero__ctas { justify-content: center; margin-top: var(--s24); }