/* ================================================================
LUUA DESIGN SYSTEM
================================================================ */
:root {
/* Canvas — warm paper, never white */
--paper: #FFFFFF;
--paper-deep: #FAFAFA;
--paper-shadow: #F0F0F0;
--ink: #1A1A1A;
--graphite: #4A4A4A;
--mist: #D4CEC2;
/* Brand colors — used like punctuation */
--lime: #C4D82E;
--teal: #2DD4BF;
--blue: #5B9BD5;
--purple: #A855F7;
--pink: #EC4899;
--orange: #F97316;
--yellow: #EAB308;
/* The signature gradient — logo + hero only */
--luua-gradient: linear-gradient(90deg, #C4D82E 0%, #2DD4BF 25%, #5B9BD5 50%, #A855F7 75%, #EC4899 100%);
/* Motion — breathing, never bouncy */
--ease-breath: cubic-bezier(0.25, 0.1, 0.25, 1);
--ease-exhale: cubic-bezier(0.65, 0, 0.35, 1);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
background: var(--paper);
color: var(--ink);
font-family: 'Inter', system-ui, sans-serif;
font-size: 17px;
line-height: 1.65;
overflow-x: hidden;
cursor: none;
position: relative;
}
/* LAYER 1 — (removed for clean white background) */
/* body::before grain texture removed */
/* body::after vignette removed — page is now pure white */
@keyframes ambientDrift {
0%, 100% { transform: scale(1) translate(0, 0); }
50% { transform: scale(1.1) translate(20px, -10px); }
}
/* Cursor watercolor paint canvas (JS-drawn) */
#paintCanvas {
position: fixed;
inset: 0;
width: 100vw;
height: 100vh;
pointer-events: none;
z-index: 3;
mix-blend-mode: multiply;
}
/* Custom cursor — soft pulsing circle with color cycling */
.cursor {
position: fixed;
width: 18px;
height: 18px;
border-radius: 50%;
background: rgba(236, 72, 153, 0.4);
pointer-events: none;
z-index: 9999;
transform: translate(-50%, -50%);
transition: width 0.25s ease-out, height 0.25s ease-out, background-color 1.5s ease-in-out, box-shadow 1.5s ease-in-out;
will-change: left, top, transform;
animation: cursorPulse 2s ease-in-out infinite;
box-shadow: 0 0 12px rgba(236, 72, 153, 0.3);
}
@keyframes cursorPulse {
0%, 100% { transform: translate(-50%, -50%) scale(1); }
50% { transform: translate(-50%, -50%) scale(1.2); }
}
.cursor.hovering {
width: 32px;
height: 32px;
animation: cursorPulseHover 1.5s ease-in-out infinite;
}
@keyframes cursorPulseHover {
0%, 100% { transform: translate(-50%, -50%) scale(1); }
50% { transform: translate(-50%, -50%) scale(1.15); }
}
/* Splash particles */
.splash-particle {
position: fixed;
pointer-events: none;
border-radius: 50%;
mix-blend-mode: multiply;
will-change: transform, opacity;
z-index: 3;
}
@media (pointer: coarse) {
body { cursor: auto; }
.cursor { display: none; }
}
/* Typography */
.display {
font-family: 'Fraunces', Georgia, serif;
font-weight: 400;
letter-spacing: -0.02em;
line-height: 1.02;
}
.handwritten {
font-family: 'Kalam', 'Caveat', cursive;
font-weight: 400;
}
.caveat { font-family: 'Caveat', cursive; }
/* Rainbow word treatment (from brand refs) */
.rainbow-word span:nth-child(1) { color: var(--lime); }
.rainbow-word span:nth-child(2) { color: var(--teal); }
.rainbow-word span:nth-child(3) { color: var(--blue); }
.rainbow-word span:nth-child(4) { color: var(--purple); }
.rainbow-word span:nth-child(5) { color: var(--pink); }
/* ================================================================
NAV
================================================================ */
nav.top-nav {
position: fixed;
top: 16px;
left: 50%;
transform: translateX(-50%);
width: calc(100% - 48px);
max-width: 1320px;
padding: 16px 32px 16px 36px;
display: flex;
align-items: center;
justify-content: space-between;
z-index: 100;
backdrop-filter: blur(20px) saturate(1.2);
-webkit-backdrop-filter: blur(20px) saturate(1.2);
background: rgba(255, 255, 255, 0.82);
border: 1px solid rgba(26, 26, 26, 0.06);
border-radius: 999px;
box-shadow: 0 4px 20px rgba(26, 26, 26, 0.04);
transition: box-shadow 0.5s var(--ease-breath), background 0.5s var(--ease-breath);
}
nav.top-nav.scrolled {
background: rgba(255, 255, 255, 0.95);
box-shadow: 0 12px 40px rgba(26, 26, 26, 0.1);
}
.logo {
display: flex;
align-items: center;
cursor: none;
transition: transform 0.5s var(--ease-breath);
}
.logo img {
height: 42px;
width: auto;
display: block;
transition: transform 0.5s var(--ease-breath), filter 0.5s var(--ease-breath);
}
.logo:hover img {
transform: rotate(-1.5deg) scale(1.04);
filter: drop-shadow(0 4px 12px rgba(168, 85, 247, 0.25));
}
.nav-links {
display: flex;
gap: 36px;
list-style: none;
align-items: center;
}
.nav-links a {
color: var(--ink);
text-decoration: none;
font-size: 17px;
font-weight: 500;
position: relative;
padding: 8px 4px;
transition: color 0.3s;
}
.nav-links a::after {
content: '';
position: absolute;
left: 0; bottom: 0;
width: 100%; height: 2px;
background: var(--luua-gradient);
transform: scaleX(0);
transform-origin: left;
transition: transform 0.5s var(--ease-breath);
}
.nav-links a:hover::after { transform: scaleX(1); }
.nav-tools {
display: flex;
gap: 16px;
align-items: center;
font-size: 16px;
}
.nav-tools button.nav-cart {
background: none;
border: none;
font-family: inherit;
font-size: 16px;
font-weight: 500;
color: var(--ink);
cursor: none;
display: flex;
align-items: center;
gap: 8px;
padding: 10px 16px;
border-radius: 100px;
transition: background 0.3s;
}
.nav-tools button.nav-cart:hover { background: rgba(26, 26, 26, 0.06); }
.lang-toggle {
display: inline-flex;
background: rgba(26, 26, 26, 0.05);
padding: 4px;
border-radius: 100px;
gap: 3px;
}
.lang-toggle button {
background: transparent;
border: none;
padding: 8px 18px;
border-radius: 100px;
font-family: 'Inter', sans-serif;
font-size: 14px;
font-weight: 600;
color: var(--graphite);
cursor: none;
letter-spacing: 0.08em;
transition: all 0.4s var(--ease-breath);
}
.lang-toggle button.active {
background: var(--ink);
color: var(--paper);
}
/* ================================================================
ACT 1 — THE ARRIVAL (Cinematic Scroll Reveal)
================================================================ */
.act-arrival {
min-height: 200vh; /* Extended height for scroll animation */
position: relative;
overflow: hidden;
}
/* Video Background Layer */
.hero-video-container {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100vh;
z-index: 0;
overflow: hidden;
transform: scale(0.6);
transform-origin: center center;
border-radius: 24px;
opacity: 0.3;
transition: transform 0.1s ease-out, opacity 0.1s ease-out, border-radius 0.1s ease-out;
will-change: transform, opacity, border-radius;
}
.hero-video {
width: 100%;
height: 100%;
object-fit: cover;
}
.hero-video-overlay {
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(250, 247, 242, 0.85) 0%, rgba(250, 247, 242, 0.6) 50%, rgba(250, 247, 242, 0.3) 100%);
transition: opacity 0.1s ease-out;
will-change: opacity;
}
/* Watercolor Blobs Container */
.hero-blobs {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100vh;
pointer-events: none;
z-index: 1;
transition: opacity 0.15s ease-out;
will-change: opacity;
}
/* Hero Content (Foreground) */
.hero-content {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: clamp(80px, 12vw, 120px) clamp(20px, 4vw, 40px) clamp(60px, 8vw, 80px);
text-align: center;
z-index: 2;
transition: opacity 0.1s ease-out, transform 0.1s ease-out;
will-change: opacity, transform;
}
/* After scroll completes, unfix elements */
.act-arrival.scroll-complete .hero-video-container,
.act-arrival.scroll-complete .hero-blobs,
.act-arrival.scroll-complete .hero-content {
position: absolute;
top: auto;
bottom: 0;
}
/* Generative watercolor blobs — pure SVG, bleeding edges via turbulence filters */
.hero-wash, .hero-wash-2 { display: none; }
.hero-blobs .watercolor-blob {
position: absolute;
pointer-events: none;
mix-blend-mode: multiply;
filter: url(#watercolorFilter);
will-change: transform;
}
.hero-blob-1 {
top: 5%; left: -8%;
width: 30vw; height: 30vw;
background: radial-gradient(circle at 40% 40%, var(--pink) 0%, var(--pink) 15%, rgba(236, 72, 153, 0.6) 35%, transparent 65%);
opacity: 0.28;
animation: blobDrift1 22s infinite ease-in-out;
border-radius: 50% 40% 55% 45%;
}
.hero-blob-2 {
top: 35%; right: -12%;
width: 32vw; height: 32vw;
background: radial-gradient(circle at 60% 50%, var(--purple) 0%, var(--purple) 12%, rgba(168, 85, 247, 0.55) 40%, transparent 70%);
opacity: 0.24;
animation: blobDrift2 28s infinite ease-in-out;
border-radius: 45% 55% 40% 60%;
}
.hero-blob-3 {
bottom: -8%; left: 10%;
width: 28vw; height: 28vw;
background: radial-gradient(circle at 50% 40%, var(--teal) 0%, var(--teal) 14%, rgba(45, 212, 191, 0.5) 38%, transparent 68%);
opacity: 0.26;
animation: blobDrift3 25s infinite ease-in-out;
border-radius: 55% 45% 50% 50%;
}
.hero-blob-4 {
display: none;
}
.hero-blob-5 {
top: 8%; right: 10%;
width: 22vw; height: 22vw;
background: radial-gradient(circle at 50% 50%, var(--yellow) 0%, var(--yellow) 8%, rgba(234, 179, 8, 0.4) 30%, transparent 60%);
opacity: 0.2;
animation: blobDrift5 26s infinite ease-in-out;
border-radius: 50% 45% 55% 50%;
}
@keyframes blobDrift1 {
0%, 100% { transform: translate(0, 0) scale(1) rotate(0deg); border-radius: 50% 40% 55% 45%; }
33% { transform: translate(40px, -30px) scale(1.15) rotate(8deg); border-radius: 55% 45% 50% 50%; }
66% { transform: translate(-30px, 40px) scale(0.9) rotate(-6deg); border-radius: 45% 55% 45% 55%; }
}
@keyframes blobDrift2 {
0%, 100% { transform: translate(0, 0) scale(1) rotate(0deg); border-radius: 45% 55% 40% 60%; }
50% { transform: translate(-50px, 30px) scale(1.1) rotate(-10deg); border-radius: 55% 45% 55% 45%; }
}
@keyframes blobDrift3 {
0%, 100% { transform: translate(0, 0) scale(1) rotate(0deg); border-radius: 55% 45% 50% 50%; }
50% { transform: translate(30px, -40px) scale(1.08) rotate(7deg); border-radius: 50% 50% 55% 45%; }
}
@keyframes blobDrift4 {
0%, 100% { transform: translate(-50%, -50%) scale(1) rotate(0deg); border-radius: 48% 52% 45% 55%; }
50% { transform: translate(-45%, -55%) scale(1.2) rotate(15deg); border-radius: 55% 45% 50% 50%; }
}
@keyframes blobDrift5 {
0%, 100% { transform: translate(0, 0) scale(0.95) rotate(0deg); }
50% { transform: translate(-20px, 20px) scale(1.1) rotate(-8deg); }
}
/* Floating splatter sparkles (real paint drops) */
.splatter { display: none; }
.hero-tagline {
font-family: 'Fraunces', serif;
font-style: italic;
font-weight: 400;
font-size: clamp(18px, 2.5vw, 26px);
letter-spacing: 0.25em;
text-transform: uppercase;
color: var(--graphite);
margin-bottom: 48px;
opacity: 0;
animation: fadeUp 1.4s 0.6s var(--ease-breath) forwards;
position: relative;
z-index: 3;
}
.hero-logo-big {
font-family: 'Kalam', cursive;
font-size: clamp(120px, 18vw, 240px);
font-weight: 700;
letter-spacing: -0.04em;
line-height: 0.95;
margin-bottom: 32px;
display: flex;
justify-content: center;
position: relative;
z-index: 3;
width: 100%;
max-width: 900px;
}
.hero-logo-big img {
width: 100%;
height: auto;
display: block;
opacity: 0;
transform: scale(0.94) translateY(16px);
animation: logoPaint 1.8s 0.3s var(--ease-breath) forwards;
position: relative;
z-index: 1;
filter: drop-shadow(0 10px 30px rgba(168, 85, 247, 0.15));
}
@keyframes logoPaint {
0% {
opacity: 0;
transform: scale(0.94) translateY(16px);
-webkit-mask-image: linear-gradient(90deg, black 0%, black 0%, transparent 0%, transparent 100%);
mask-image: linear-gradient(90deg, black 0%, black 0%, transparent 0%, transparent 100%);
}
20% {
opacity: 1;
}
100% {
opacity: 1;
transform: scale(1) translateY(0);
-webkit-mask-image: linear-gradient(90deg, black 0%, black 100%, transparent 100%, transparent 100%);
mask-image: linear-gradient(90deg, black 0%, black 100%, transparent 100%, transparent 100%);
}
}
.hero-logo-big::before {
display: none;
}
@keyframes logoBloom {
0%, 100% { transform: translate(-50%, -50%) scale(0.9) rotate(0deg); border-radius: 48% 52% 45% 55%; }
50% { transform: translate(-50%, -50%) scale(1.08) rotate(5deg); border-radius: 55% 45% 52% 48%; }
}
@keyframes fadeUp {
to { opacity: 1; transform: translateY(0); }
}
.hero-headline {
max-width: 1000px;
font-family: 'Fraunces', serif;
font-weight: 400;
font-size: clamp(32px, 4.5vw, 58px);
line-height: 1.1;
letter-spacing: -0.025em;
color: var(--ink);
position: relative;
z-index: 3;
opacity: 0;
transform: translateY(30px);
animation: fadeUp 1.6s 0.9s var(--ease-breath) forwards;
}
.hero-headline em {
font-style: italic;
background: var(--luua-gradient);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
padding: 0 4px;
}
/* ================================================================
WHAT IS LUUA — Dictionary definition card
================================================================ */
.act-whatis {
padding: clamp(80px, 12vw, 140px) clamp(20px, 4vw, 40px);
position: relative;
display: flex;
align-items: center;
justify-content: center;
min-height: 90vh;
overflow: hidden;
}
/* =============================================
COLLAGE ASSEMBLY — each piece starts off-screen/invisible
and enters on .assembled, as if placed by hand
============================================= */
/* Newspaper strips — fall from above, slightly rotate into position */
.newspaper-strip {
opacity: 0;
transform: translateY(-80px) rotate(0deg) scale(0.85);
transition:
opacity 0.5s var(--ease-breath),
transform 0.9s var(--ease-breath);
}
.assembled .newspaper-strip {
opacity: 1;
transform: translate(0, 0) rotate(var(--rest-rot, 0deg)) scale(1);
}
.assembled .news-1 { transition-delay: 0.05s; }
.assembled .news-2 { transition-delay: 0.12s; }
.assembled .news-3 { transition-delay: 0.2s; }
.assembled .news-4 { transition-delay: 0.28s; }
.assembled .news-5 { transition-delay: 0.18s; }
.assembled .news-6 { transition-delay: 0.25s; }
.assembled .news-7 { transition-delay: 0.32s; }
/* Cardboard — slides up from below with a soft settle */
.cardboard-card {
opacity: 0;
transform: translateY(60px) rotate(-1.5deg) scale(0.94);
transition:
opacity 0.7s var(--ease-breath) 0.35s,
transform 1.1s var(--ease-breath) 0.35s;
}
.assembled .cardboard-card {
opacity: 1;
transform: translateY(0) rotate(0) scale(1);
}
/* Paper card — lifts up and settles onto the cardboard */
.paper-card {
opacity: 0;
transform: translateY(40px) rotate(1.5deg) scale(0.96);
transition:
opacity 0.6s var(--ease-breath) 0.65s,
transform 1s var(--ease-breath) 0.65s;
}
.assembled .paper-card {
opacity: 1;
transform: translateY(0) rotate(0) scale(1);
}
/* Washi tape pieces — drop in from their respective sides with a tilt wobble */
.whatis-washi {
opacity: 0;
transition:
opacity 0.5s var(--ease-breath),
transform 0.7s cubic-bezier(0.34, 1.25, 0.64, 1); /* slight overshoot like it's being pressed down */
}
.whatis-washi-1 {
transform: translate(-40px, -40px) rotate(-50deg) scale(0.8);
}
.whatis-washi-2 {
transform: translateY(40px) rotate(10deg) scale(0.8);
}
.whatis-washi-3 {
transform: translate(40px, -40px) rotate(50deg) scale(0.8);
}
.assembled .whatis-washi-1 {
opacity: 0.92;
transform: rotate(-32deg) scale(1);
transition-delay: 1.05s;
}
.assembled .whatis-washi-2 {
opacity: 0.92;
transform: rotate(-8deg) scale(1);
transition-delay: 1.15s;
}
.assembled .whatis-washi-3 {
opacity: 0.92;
transform: rotate(28deg) scale(1);
transition-delay: 1.25s;
}
/* Content inside — letter-by-line reveal */
.whatis-logo-row {
opacity: 0;
transform: translateY(14px) scale(0.96);
transition: opacity 0.7s var(--ease-breath) 1.4s, transform 0.9s var(--ease-breath) 1.4s;
}
.whatis-definition {
opacity: 0;
transform: translateY(10px);
transition: opacity 0.6s var(--ease-breath) 1.65s, transform 0.7s var(--ease-breath) 1.65s;
}
.whatis-body {
opacity: 0;
transform: translateY(10px);
transition: opacity 0.6s var(--ease-breath) 1.85s, transform 0.7s var(--ease-breath) 1.85s;
}
.assembled .whatis-logo-row,
.assembled .whatis-definition,
.assembled .whatis-body {
opacity: 1;
transform: translateY(0) scale(1);
}
/* Brush waves only draw themselves after the card is placed */
.brush-waves path {
animation-play-state: paused;
}
.assembled .brush-waves path {
animation-play-state: running;
animation-delay: calc(1.5s + (var(--stroke-idx, 0) * 0.18s)) !important;
}
.brush-waves path:nth-child(1) { --stroke-idx: 0; }
.brush-waves path:nth-child(2) { --stroke-idx: 1; }
.brush-waves path:nth-child(3) { --stroke-idx: 2; }
.brush-waves path:nth-child(4) { --stroke-idx: 3; }
.brush-waves path:nth-child(5) { --stroke-idx: 4; }
/* Language toggle enters last */
.whatis-lang-toggle {
opacity: 0;
transform: translateX(-50%) translateY(20px);
transition: opacity 0.5s var(--ease-breath) 2.2s, transform 0.6s var(--ease-breath) 2.2s;
}
.assembled .whatis-lang-toggle {
opacity: 1;
transform: translateX(-50%) translateY(0);
}
/* =============================================
IDLE BREATHING MICRO-MOTIONS (run forever after assembly)
Each piece has a tiny, slow, unique sway — like a real collage hanging in a breeze
============================================= */
.assembled .newspaper-strip { animation: stripSway 11s ease-in-out infinite; }
.assembled .news-1 { animation-duration: 9s; animation-delay: 2.5s; }
.assembled .news-2 { animation-duration: 11s; animation-delay: 2.8s; }
.assembled .news-3 { animation-duration: 13s; animation-delay: 2.3s; }
.assembled .news-4 { animation-duration: 10s; animation-delay: 3s; }
.assembled .news-5 { animation-duration: 12s; animation-delay: 2.6s; }
.assembled .news-6 { animation-duration: 14s; animation-delay: 3.2s; }
.assembled .news-7 { animation-duration: 10s; animation-delay: 2.9s; }
@keyframes stripSway {
0%, 100% { transform: rotate(var(--rest-rot, 0deg)) translateY(0); }
50% { transform: rotate(calc(var(--rest-rot, 0deg) + 1.5deg)) translateY(-2px); }
}
.assembled .whatis-washi-1 { animation: washiSway1 7s ease-in-out infinite 3s; }
.assembled .whatis-washi-2 { animation: washiSway2 9s ease-in-out infinite 3.5s; }
.assembled .whatis-washi-3 { animation: washiSway3 8s ease-in-out infinite 3.2s; }
@keyframes washiSway1 { 0%, 100% { transform: rotate(-32deg) scale(1); } 50% { transform: rotate(-31deg) scale(1.01); } }
@keyframes washiSway2 { 0%, 100% { transform: rotate(-8deg) scale(1); } 50% { transform: rotate(-7deg) scale(1.01); } }
@keyframes washiSway3 { 0%, 100% { transform: rotate(28deg) scale(1); } 50% { transform: rotate(29deg) scale(1.01); } }
/* Whole stage gets a very subtle floating breath */
.assembled .cardboard-card { animation: cardBreath 14s ease-in-out infinite 3s; }
.assembled .paper-card { animation: paperBreath 16s ease-in-out infinite 3.2s; }
@keyframes cardBreath {
0%, 100% { transform: translateY(0) rotate(0); }
50% { transform: translateY(-3px) rotate(0.3deg); }
}
@keyframes paperBreath {
0%, 100% { transform: translateY(0) rotate(0); }
50% { transform: translateY(-2px) rotate(-0.2deg); }
}
/* Soft gradient background that bleeds through */
.act-whatis::before {
display: none;
}
.whatis-stage {
position: relative;
width: 100%;
max-width: 980px;
display: flex;
align-items: center;
justify-content: center;
perspective: 1200px;
padding: 8% 7%;
}
/* Newspaper strips — fake printed text using repeating-linear-gradient */
.newspaper-strip {
position: absolute;
background:
repeating-linear-gradient(
90deg,
#2a2a2a 0, #2a2a2a 3px, transparent 3px, transparent 5px,
#2a2a2a 5px, #2a2a2a 7px, transparent 7px, transparent 9px,
#2a2a2a 9px, #2a2a2a 13px, transparent 13px, transparent 16px
),
repeating-linear-gradient(
0deg,
transparent 0, transparent 6px,
rgba(200, 200, 200, 0.3) 6px, rgba(200, 200, 200, 0.3) 8px
),
#EEE9DD;
background-size: 100% 7px, 100% 8px, 100% 100%;
filter: blur(0.3px) contrast(0.85);
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.12);
}
.news-1 {
--rest-rot: -8deg;
top: -4%;
left: 12%;
width: 22%;
height: 28%;
clip-path: polygon(0% 10%, 8% 0%, 28% 3%, 52% 1%, 76% 6%, 100% 2%, 96% 30%, 100% 58%, 92% 100%, 72% 96%, 48% 100%, 24% 94%, 4% 100%, 0% 74%, 4% 40%);
}
.news-2 {
--rest-rot: 15deg;
top: 2%;
left: 22%;
width: 8%;
height: 16%;
clip-path: polygon(0% 8%, 15% 0%, 42% 4%, 70% 0%, 100% 6%, 94% 44%, 100% 82%, 76% 100%, 50% 96%, 22% 100%, 0% 92%, 4% 50%);
}
.news-3 {
--rest-rot: -18deg;
top: 10%;
left: -3%;
width: 14%;
height: 68%;
clip-path: polygon(0% 6%, 18% 0%, 42% 3%, 68% 1%, 100% 5%, 96% 28%, 100% 52%, 94% 76%, 100% 96%, 78% 100%, 52% 96%, 26% 100%, 0% 94%, 6% 68%, 0% 44%, 4% 20%);
}
.news-4 {
--rest-rot: -10deg;
bottom: 0%;
left: 8%;
width: 16%;
height: 36%;
clip-path: polygon(0% 10%, 14% 2%, 38% 0%, 68% 4%, 100% 0%, 96% 32%, 100% 60%, 92% 100%, 66% 96%, 38% 100%, 12% 96%, 0% 80%, 4% 48%);
}
.news-5 {
--rest-rot: 12deg;
top: 14%;
right: -2%;
width: 10%;
height: 48%;
clip-path: polygon(0% 8%, 20% 0%, 52% 4%, 80% 0%, 100% 6%, 96% 36%, 100% 68%, 94% 100%, 68% 96%, 34% 100%, 0% 94%, 4% 60%, 0% 32%);
}
.news-6 {
--rest-rot: 22deg;
top: 20%;
right: 6%;
width: 10%;
height: 42%;
clip-path: polygon(0% 6%, 28% 0%, 62% 4%, 100% 0%, 94% 28%, 100% 60%, 96% 94%, 64% 100%, 32% 96%, 0% 100%, 4% 66%, 0% 36%);
}
.news-7 {
--rest-rot: -6deg;
bottom: 4%;
right: 18%;
width: 12%;
height: 20%;
clip-path: polygon(0% 10%, 16% 0%, 44% 4%, 72% 0%, 100% 8%, 96% 44%, 100% 78%, 72% 100%, 40% 96%, 12% 100%, 0% 82%, 4% 46%);
}
/* Cardboard layer — brown torn paper backing */
.cardboard-card {
position: absolute;
width: 96%;
height: 92%;
left: 2%;
top: 4%;
background:
radial-gradient(ellipse at 30% 40%, rgba(180, 130, 85, 0.35), transparent 60%),
radial-gradient(ellipse at 70% 60%, rgba(160, 110, 70, 0.3), transparent 60%),
linear-gradient(135deg, #C49269 0%, #B8845A 30%, #A67850 60%, #C49269 100%);
clip-path: polygon(
1% 4%, 6% 1%, 14% 3%, 22% 0%, 32% 2%, 42% 1%, 52% 3%, 62% 0%, 72% 2%, 82% 1%, 92% 3%, 99% 1%,
100% 8%, 98% 18%, 100% 28%, 97% 38%, 100% 50%, 98% 62%, 100% 72%, 97% 82%, 100% 92%, 99% 98%,
92% 97%, 82% 100%, 72% 98%, 62% 100%, 52% 97%, 42% 100%, 32% 98%, 22% 100%, 12% 97%, 4% 100%, 1% 96%,
3% 86%, 0% 76%, 2% 66%, 0% 54%, 2% 42%, 0% 30%, 2% 18%, 0% 10%
);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
z-index: 1;
}
.cardboard-card::before {
content: '';
position: absolute;
inset: 0;
background-image:
repeating-linear-gradient(90deg,
transparent 0, transparent 8px,
rgba(120, 80, 50, 0.15) 8px, rgba(120, 80, 50, 0.15) 9px);
mix-blend-mode: multiply;
}
.cardboard-card::after {
content: '';
position: absolute;
inset: 0;
background-image:
repeating-linear-gradient(0deg,
transparent 0, transparent 14px,
rgba(90, 60, 40, 0.08) 14px, rgba(90, 60, 40, 0.08) 15px);
mix-blend-mode: multiply;
}
/* White paper card — the main content surface (drives the stage height) */
.paper-card {
position: relative;
width: 100%;
background: #FAFAF6;
clip-path: polygon(
2% 5%, 8% 2%, 16% 4%, 26% 1%, 36% 3%, 46% 1%, 56% 3%, 66% 1%, 76% 3%, 86% 2%, 94% 4%, 100% 3%,
99% 12%, 100% 22%, 98% 32%, 100% 42%, 98% 52%, 100% 62%, 98% 72%, 100% 82%, 98% 94%,
92% 97%, 82% 100%, 72% 97%, 62% 100%, 52% 97%, 42% 100%, 32% 98%, 22% 100%, 12% 98%, 2% 100%,
0% 92%, 2% 82%, 0% 72%, 2% 62%, 0% 52%, 2% 42%, 0% 32%, 2% 22%, 0% 14%
);
box-shadow: 0 14px 30px rgba(0, 0, 0, 0.08);
padding: 6% 7%;
display: flex;
flex-direction: column;
justify-content: center;
z-index: 2;
}
/* Washi tape pieces */
.whatis-washi {
position: absolute;
width: 130px;
height: 38px;
background: #D4C5A7;
background-image:
linear-gradient(90deg,
rgba(255, 255, 255, 0.15) 0%,
transparent 50%,
rgba(0, 0, 0, 0.08) 100%);
box-shadow: 0 3px 8px rgba(0, 0, 0, 0.12);
opacity: 0.92;
}
.whatis-washi::before {
content: '';
position: absolute;
inset: 0;
background-image:
repeating-linear-gradient(90deg,
transparent 0, transparent 4px,
rgba(150, 130, 90, 0.2) 4px, rgba(150, 130, 90, 0.2) 5px);
}
.whatis-washi-1 {
top: 3%;
left: 13%;
transform: rotate(-32deg);
z-index: 10;
}
.whatis-washi-2 {
bottom: 4%;
left: 42%;
transform: rotate(-8deg);
z-index: 10;
width: 150px;
}
.whatis-washi-3 {
top: 6%;
right: 10%;
transform: rotate(28deg);
z-index: 10;
width: 120px;
}
/* Content inside the paper card */
.whatis-content {
display: grid;
grid-template-columns: 1.05fr 0.95fr;
gap: 24px;
width: 100%;
align-items: center;
}
.whatis-left {
display: flex;
flex-direction: column;
gap: 16px;
position: relative;
z-index: 5;
}
.whatis-logo-row {
display: flex;
align-items: flex-end;
gap: 0;
margin-bottom: -4px;
}
.whatis-logo-row img {
height: clamp(60px, 9vw, 120px);
width: auto;
display: block;
}
.whatis-definition {
font-family: 'Fraunces', serif;
font-style: italic;
font-weight: 300;
font-size: clamp(15px, 1.3vw, 19px);
color: var(--graphite);
letter-spacing: 0.01em;
line-height: 1;
}
.whatis-definition .underlined {
position: relative;
font-style: italic;
color: var(--ink);
}
.whatis-definition .underlined::after {
content: '';
position: absolute;
left: 0;
right: 0;
bottom: -4px;
height: 4px;
background-image: url("data:image/svg+xml;utf8,");
background-size: 60px 6px;
background-repeat: repeat-x;
}
.whatis-body {
font-family: 'Fraunces', serif;
font-size: clamp(14px, 1.2vw, 18px);
line-height: 1.55;
color: var(--ink);
max-width: 460px;
margin-top: 8px;
}
.whatis-body strong {
font-weight: 600;
}
/* Rainbow brush strokes flowing from the logo */
.whatis-right {
position: relative;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.brush-waves {
width: 100%;
height: 100%;
display: block;
}
.brush-waves path {
fill: none;
stroke-width: 14;
stroke-linecap: round;
stroke-dasharray: 600;
stroke-dashoffset: 600;
animation: drawBrush 2.2s var(--ease-breath) forwards;
}
.brush-waves path:nth-child(1) { stroke: var(--pink); animation-delay: 0.2s; }
.brush-waves path:nth-child(2) { stroke: var(--purple); animation-delay: 0.4s; }
.brush-waves path:nth-child(3) { stroke: var(--blue); animation-delay: 0.6s; }
.brush-waves path:nth-child(4) { stroke: var(--teal); animation-delay: 0.8s; }
.brush-waves path:nth-child(5) { stroke: var(--lime); animation-delay: 1.0s; }
@keyframes drawBrush {
to { stroke-dashoffset: 0; }
}
/* Language toggle inside the card */
.whatis-lang-toggle {
position: absolute;
bottom: -48px;
left: 50%;
transform: translateX(-50%);
display: inline-flex;
gap: 4px;
background: rgba(255, 255, 255, 0.85);
backdrop-filter: blur(12px);
padding: 4px;
border-radius: 999px;
border: 1px solid rgba(26, 26, 26, 0.08);
box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06);
z-index: 20;
}
.whatis-lang-toggle button {
background: transparent;
border: none;
padding: 8px 18px;
border-radius: 999px;
font-family: 'Inter', sans-serif;
font-size: 13px;
font-weight: 500;
color: var(--graphite);
cursor: none;
letter-spacing: 0.05em;
transition: all 0.4s var(--ease-breath);
}
.whatis-lang-toggle button.active {
background: var(--ink);
color: var(--paper);
}
@media (max-width: 1000px) {
.whatis-content {
grid-template-columns: 1fr;
gap: 20px;
}
.whatis-right {
height: 90px;
order: 2;
}
.whatis-logo-row img {
height: 64px;
}
}
@media (max-width: 680px) {
.whatis-washi-1 { width: 80px; height: 26px; }
.whatis-washi-2 { width: 100px; height: 26px; }
.whatis-washi-3 { width: 80px; height: 26px; }
.whatis-logo-row img { height: 54px; }
.paper-card { padding: 8% 9%; }
}
/* ================================================================
ACT 2 — THE TENSION
================================================================ */
/* ================================================================
ACT 2 — TENSION
Compact transitional divider with slow horizontal ticker
================================================================ */
.act-tension {
min-height: auto;
padding: 32px 0 28px;
display: flex;
flex-direction: column;
align-items: center;
background: var(--paper);
position: relative;
overflow: hidden;
}
.act-tension::before {
display: none;
}
/* Hairline dividers above and below the ticker, using a fade mask */
.act-tension::after {
content: '';
position: absolute;
left: 0; right: 0;
top: 0;
height: 1px;
background: linear-gradient(90deg,
transparent 0%,
rgba(26, 26, 26, 0.08) 20%,
rgba(26, 26, 26, 0.08) 80%,
transparent 100%);
pointer-events: none;
}
.tension-ticker {
position: relative;
width: 100%;
overflow: hidden;
padding: 8px 0;
z-index: 1;
/* Edge fade mask so words appear to drift in from offscreen */
-webkit-mask-image: linear-gradient(90deg, transparent 0%, black 10%, black 90%, transparent 100%);
mask-image: linear-gradient(90deg, transparent 0%, black 10%, black 90%, transparent 100%);
}
.tension-track {
display: flex;
gap: 80px;
width: max-content;
animation: tickerDrift 60s linear infinite;
will-change: transform;
}
.tension-track:hover {
animation-play-state: paused;
}
@keyframes tickerDrift {
from { transform: translateX(0); }
to { transform: translateX(-50%); }
}
.tension-word {
font-family: 'Fraunces', serif;
font-weight: 400;
font-style: italic;
font-size: clamp(28px, 3vw, 44px);
line-height: 1;
letter-spacing: -0.015em;
opacity: 0.55;
transition: opacity 0.7s var(--ease-breath), transform 0.7s var(--ease-breath);
white-space: nowrap;
cursor: none;
}
.tension-word:hover {
opacity: 1;
transform: translateY(-2px);
}
/* Color cycling — repeat the palette across any number of words */
.tension-track > .tension-word:nth-child(6n+1) { color: var(--pink); }
.tension-track > .tension-word:nth-child(6n+2) { color: var(--blue); }
.tension-track > .tension-word:nth-child(6n+3) { color: var(--orange); }
.tension-track > .tension-word:nth-child(6n+4) { color: var(--purple); }
.tension-track > .tension-word:nth-child(6n+5) { color: var(--teal); }
.tension-track > .tension-word:nth-child(6n+6) { color: var(--pink); }
.tension-statement {
font-family: 'Fraunces', serif;
font-size: clamp(22px, 2.4vw, 32px);
font-weight: 500;
letter-spacing: -0.015em;
color: var(--graphite);
text-align: center;
margin-top: 4px;
opacity: 0.85;
}
.tension-statement .period {
background: var(--luua-gradient);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
@media (max-width: 680px) {
.act-tension { padding: 36px 0 32px; gap: 16px; }
.tension-track { gap: 56px; animation-duration: 50s; }
.tension-word { font-size: 24px; }
.tension-statement { font-size: 18px; }
}
/* ================================================================
ACT 3 — THE PROMISE (word morph)
================================================================ */
.act-promise {
min-height: 60vh;
padding: 100px 40px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
position: relative;
overflow: hidden;
}
.promise-bloom {
position: absolute;
top: 50%; left: 50%;
width: 50vw; height: 50vw;
max-width: 600px; max-height: 600px;
transform: translate(-50%, -50%);
background: radial-gradient(circle at 50% 50%,
rgba(168, 85, 247, 0.4) 0%,
rgba(45, 212, 191, 0.3) 25%,
rgba(236, 72, 153, 0.25) 50%,
rgba(196, 216, 46, 0.15) 75%,
transparent 90%);
mix-blend-mode: multiply;
filter: url(#watercolorFilter);
z-index: 0;
animation: promiseBloom 14s infinite ease-in-out;
border-radius: 48% 52% 46% 54%;
}
@keyframes promiseBloom {
0%, 100% {
transform: translate(-50%, -50%) scale(0.8) rotate(0deg);
border-radius: 48% 52% 46% 54%;
opacity: 0.6;
}
33% {
transform: translate(-50%, -50%) scale(0.95) rotate(6deg);
border-radius: 55% 45% 52% 48%;
opacity: 0.8;
}
66% {
transform: translate(-50%, -50%) scale(0.88) rotate(-4deg);
border-radius: 45% 55% 50% 50%;
opacity: 0.7;
}
}
.promise-content {
position: relative;
z-index: 2;
text-align: center;
max-width: 900px;
}
.promise-headline {
font-family: 'Fraunces', serif;
font-weight: 400;
font-size: clamp(32px, 4vw, 56px);
letter-spacing: -0.025em;
line-height: 1.15;
color: var(--ink);
margin-bottom: 20px;
}
.promise-headline .morph-word {
display: inline-block;
min-width: 200px;
font-style: italic;
background: var(--luua-gradient);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
position: relative;
text-align: left;
}
.promise-headline .morph-word::before {
content: '';
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%, -50%) scale(0.7);
width: 140%; height: 200%;
background: radial-gradient(ellipse at 50% 50%,
rgba(236, 72, 153, 0.35) 0%,
rgba(168, 85, 247, 0.3) 30%,
rgba(45, 212, 191, 0.2) 60%,
transparent 85%);
mix-blend-mode: multiply;
filter: url(#watercolorFilter);
opacity: 0;
z-index: -1;
pointer-events: none;
transition: opacity 1.2s var(--ease-breath), transform 1.4s var(--ease-breath);
border-radius: 50%;
}
.promise-headline .morph-word.bloomed::before {
opacity: 1;
transform: translate(-50%, -50%) scale(1);
}
.promise-subline {
font-family: 'Fraunces', serif;
font-style: italic;
font-weight: 300;
font-size: 17px;
color: var(--graphite);
margin-top: 28px;
}
/* ================================================================
SEL BRIDGE — "simple and effective social-emotional development tools"
Sits between Act 3 (Promise) and Act 4 (Ecosystem)
================================================================ */
.act-sel {
padding: 140px 60px 160px;
position: relative;
min-height: 90vh;
display: flex;
flex-direction: column;
justify-content: center;
overflow: hidden;
}
.act-sel::before {
display: none;
}
.sel-headline {
font-family: 'Kalam', 'Caveat', cursive;
font-weight: 700;
font-size: clamp(22px, 3.75vw, 52px);
line-height: 1.15;
letter-spacing: -0.015em;
color: var(--ink);
text-align: center;
max-width: 900px;
margin: 0 auto 60px;
position: relative;
z-index: 2;
}
.sel-headline .accent {
color: var(--purple);
display: inline-block;
position: relative;
}
.sel-split {
display: grid;
grid-template-columns: 1.1fr 0.9fr;
gap: 80px;
align-items: center;
max-width: 1400px;
margin: 0 auto;
width: 100%;
position: relative;
z-index: 2;
}
.sel-split-image {
position: relative;
width: 100%;
}
.sel-split-image img {
width: 110%;
height: auto;
display: block;
filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.1));
}
.sel-callout-title {
font-family: 'Open Sans', 'Inter', sans-serif;
font-weight: 800;
font-size: clamp(42px, 5.5vw, 78px);
line-height: 1.0;
letter-spacing: -0.025em;
color: var(--ink);
margin-bottom: 32px;
}
.sel-callout-title .accent {
color: var(--teal);
font-family: 'Kalam', cursive;
font-weight: 700;
font-style: normal;
}
.sel-callout-body {
font-family: 'Open Sans', 'Inter', sans-serif;
font-weight: 400;
font-size: clamp(15px, 1.1vw, 17px);
line-height: 1.6;
color: var(--ink);
max-width: 480px;
margin-bottom: 36px;
}
.sel-callout-body strong {
font-weight: 700;
color: var(--ink);
}
.sel-shop-btn {
display: inline-flex;
align-items: center;
justify-content: center;
background: var(--teal);
color: var(--paper);
border: none;
padding: 16px 44px;
border-radius: 100px;
font-family: 'Open Sans', 'Inter', sans-serif;
font-weight: 700;
font-size: 14px;
letter-spacing: 0.1em;
text-transform: uppercase;
text-decoration: none;
cursor: none;
transition: transform 0.5s var(--ease-breath), box-shadow 0.5s var(--ease-breath), background 0.5s var(--ease-breath);
box-shadow: 0 8px 20px rgba(45, 212, 191, 0.3);
}
.sel-shop-btn:hover {
transform: translateY(-3px) scale(1.03);
box-shadow: 0 14px 32px rgba(45, 212, 191, 0.45);
}
/* Reveal animation — the headline paints in word-by-word, the right column slides up */
.sel-headline .word {
display: inline-block;
opacity: 0;
transform: translateY(20px);
transition: opacity 0.7s var(--ease-breath), transform 0.9s var(--ease-breath);
/* preserve space between words */
margin-right: 0.25em;
}
.sel-headline .word:last-child {
margin-right: 0;
}
.act-sel.revealed .sel-headline .word {
opacity: 1;
transform: translateY(0);
}
.act-sel.revealed .sel-headline .word:nth-child(1) { transition-delay: 0.05s; }
.act-sel.revealed .sel-headline .word:nth-child(2) { transition-delay: 0.15s; }
.act-sel.revealed .sel-headline .word:nth-child(3) { transition-delay: 0.25s; }
.act-sel.revealed .sel-headline .word:nth-child(4) { transition-delay: 0.35s; }
.act-sel.revealed .sel-headline .word:nth-child(5) { transition-delay: 0.45s; }
.act-sel.revealed .sel-headline .word:nth-child(6) { transition-delay: 0.55s; }
.sel-split-image,
.sel-callout-title,
.sel-callout-body,
.sel-shop-btn {
opacity: 0;
transform: translateY(24px);
transition: opacity 0.9s var(--ease-breath), transform 1s var(--ease-breath);
}
.act-sel.revealed .sel-split-image { opacity: 1; transform: translateY(0); transition-delay: 0.85s; }
.act-sel.revealed .sel-callout-title { opacity: 1; transform: translateY(0); transition-delay: 1.0s; }
.act-sel.revealed .sel-callout-body { opacity: 1; transform: translateY(0); transition-delay: 1.2s; }
.act-sel.revealed .sel-shop-btn { opacity: 1; transform: translateY(0); transition-delay: 1.4s; }
/* Idle breath on the headline accent word */
.act-sel.revealed .sel-headline .accent {
animation: selAccentBreath 6s ease-in-out infinite 2s;
}
@keyframes selAccentBreath {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-2px); }
}
@media (max-width: 900px) {
.act-sel { padding: 100px 32px 120px; }
.sel-headline { margin-bottom: 60px; }
.sel-split {
grid-template-columns: 1fr;
gap: 40px;
}
.sel-split-image { order: 1; max-width: 500px; margin: 0 auto; }
.sel-split-right { order: 2; }
}
/* ================================================================
PRODUCTS SECTION
================================================================ */
.products-section {
padding: 100px 48px 120px;
background: var(--paper);
position: relative;
}
.products-split {
display: flex;
align-items: center;
gap: 60px;
max-width: 1320px;
margin: 0 auto;
}
.products-text {
flex: 1;
max-width: 560px;
}
.products-title {
font-family: 'Fraunces', serif;
font-size: clamp(32px, 4vw, 48px);
font-weight: 400;
font-style: italic;
line-height: 1.2;
letter-spacing: -0.02em;
color: var(--ink);
margin-bottom: 28px;
}
.products-title .accent {
color: var(--purple);
font-weight: 500;
}
.products-body {
font-family: 'Open Sans', 'Inter', sans-serif;
font-weight: 400;
font-size: clamp(15px, 1.1vw, 17px);
line-height: 1.7;
color: var(--ink);
margin-bottom: 36px;
}
.products-body strong {
font-weight: 700;
color: var(--ink);
}
.products-shop-btn {
display: inline-flex;
align-items: center;
justify-content: center;
background: var(--teal);
color: var(--paper);
border: none;
padding: 16px 44px;
border-radius: 100px;
font-family: 'Open Sans', 'Inter', sans-serif;
font-weight: 700;
font-size: 14px;
letter-spacing: 0.1em;
text-transform: uppercase;
text-decoration: none;
cursor: none;
transition: transform 0.5s var(--ease-breath), box-shadow 0.5s var(--ease-breath), background 0.5s var(--ease-breath);
box-shadow: 0 8px 20px rgba(45, 212, 191, 0.3);
}
.products-shop-btn:hover {
transform: translateY(-3px) scale(1.03);
box-shadow: 0 14px 32px rgba(45, 212, 191, 0.45);
}
.products-image {
flex: 1.2;
position: relative;
}
.products-image img {
width: 110%;
height: auto;
display: block;
filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.08));
}
/* Reveal animations */
.products-text,
.products-image {
opacity: 0;
transform: translateY(30px);
transition: opacity 0.9s var(--ease-breath), transform 1s var(--ease-breath);
}
.products-section.revealed .products-text {
opacity: 1;
transform: translateY(0);
transition-delay: 0.1s;
}
.products-section.revealed .products-image {
opacity: 1;
transform: translateY(0);
transition-delay: 0.3s;
}
/* Mobile responsive */
@media (max-width: 900px) {
.products-split {
flex-direction: column;
gap: 40px;
}
.products-text {
text-align: center;
max-width: 100%;
}
.products-image {
order: -1;
max-width: 500px;
margin: 0 auto;
}
.products-image img {
width: 100%;
}
}
/* ================================================================
WELLNESS INITIATIVE SECTION
================================================================ */
.wellness-section {
padding: 100px 48px 120px;
background: var(--paper);
position: relative;
}
.wellness-split {
display: flex;
align-items: center;
gap: 60px;
max-width: 1320px;
margin: 0 auto;
}
.wellness-image {
flex: 1.3;
position: relative;
}
.wellness-image img {
width: 108%;
height: auto;
display: block;
filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.08));
transition: transform 0.1s ease-out;
}
.wellness-text {
flex: 1;
max-width: 520px;
}
.wellness-title {
font-family: 'Fraunces', serif;
font-size: clamp(36px, 4.5vw, 56px);
font-weight: 600;
line-height: 1.1;
letter-spacing: -0.02em;
color: var(--ink);
margin-bottom: 28px;
}
.wellness-title .accent {
color: var(--teal);
font-weight: 600;
}
.wellness-body {
font-family: 'Open Sans', 'Inter', sans-serif;
font-weight: 400;
font-size: clamp(15px, 1.1vw, 17px);
line-height: 1.7;
color: var(--ink);
margin-bottom: 20px;
}
.wellness-body-sub {
font-family: 'Open Sans', 'Inter', sans-serif;
font-weight: 400;
font-size: clamp(15px, 1.1vw, 17px);
line-height: 1.7;
color: var(--ink);
margin-bottom: 36px;
}
.wellness-btn {
display: inline-flex;
align-items: center;
justify-content: center;
background: var(--teal);
color: var(--paper);
border: none;
padding: 16px 44px;
border-radius: 100px;
font-family: 'Open Sans', 'Inter', sans-serif;
font-weight: 700;
font-size: 14px;
letter-spacing: 0.1em;
text-transform: uppercase;
text-decoration: none;
cursor: none;
transition: transform 0.5s var(--ease-breath), box-shadow 0.5s var(--ease-breath), background 0.5s var(--ease-breath);
box-shadow: 0 8px 20px rgba(45, 212, 191, 0.3);
}
.wellness-btn:hover {
transform: translateY(-3px) scale(1.03);
box-shadow: 0 14px 32px rgba(45, 212, 191, 0.45);
}
/* Reveal animations */
.wellness-text,
.wellness-image {
opacity: 0;
transform: translateY(30px);
transition: opacity 0.9s var(--ease-breath), transform 1s var(--ease-breath);
}
.wellness-section.revealed .wellness-image {
opacity: 1;
transform: translateY(0);
transition-delay: 0.1s;
}
.wellness-section.revealed .wellness-text {
opacity: 1;
transform: translateY(0);
transition-delay: 0.3s;
}
/* Mobile responsive */
@media (max-width: 900px) {
.wellness-split {
flex-direction: column;
gap: 40px;
}
.wellness-text {
text-align: center;
max-width: 100%;
}
.wellness-image {
max-width: 500px;
margin: 0 auto;
}
.wellness-image img {
width: 100%;
}
}
/* ================================================================
FUNDRAISING SECTION
================================================================ */
.act-fundraising {
padding: 80px 24px 100px;
background: var(--paper);
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}
.fundraising-banner-image {
width: 100%;
max-width: 900px;
margin: 0 auto;
}
.fundraising-banner-image img {
width: 100%;
height: auto;
display: block;
}
.fundraising-img-es {
display: none;
}
/* Fundraising Tagline */
.fundraising-tagline {
font-family: 'Kalam', 'Caveat', cursive;
font-size: clamp(24px, 4vw, 42px);
font-weight: 400;
color: var(--ink);
text-align: center;
max-width: 900px;
margin: 50px auto 60px;
line-height: 1.3;
}
.fundraising-tagline .accent-pink {
color: #e91e63;
}
.fundraising-tagline .accent-gold {
color: #d4a400;
font-style: italic;
}
/* Fundraising Steps - Three Circles */
.act-fundraising .fundraising-steps {
display: flex !important;
justify-content: center;
align-items: flex-start;
gap: 40px;
width: 100%;
max-width: 1200px;
margin: 0 auto;
flex-wrap: wrap;
padding: 0 24px;
box-sizing: border-box;
}
.act-fundraising .fundraising-step {
position: relative;
width: 320px;
display: flex;
flex-direction: column;
align-items: center;
}
.step-decorations {
position: absolute;
inset: -20px;
pointer-events: none;
z-index: 0;
}
.step-circle {
position: relative;
z-index: 1;
width: 260px;
height: 260px;
border-radius: 50%;
background:
url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='paper'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.04' numOctaves='5' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23paper)'/%3E%3C/svg%3E"),
linear-gradient(135deg, #f5f3f0 0%, #e8e4df 100%);
background-blend-mode: overlay;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 30px;
text-align: center;
box-shadow:
0 4px 20px rgba(0, 0, 0, 0.08),
inset 0 2px 4px rgba(255, 255, 255, 0.5);
}
.step-number {
font-family: 'Fraunces', serif;
font-size: 28px;
font-weight: 600;
color: var(--ink);
margin-bottom: 8px;
}
.step-text {
font-family: 'Open Sans', 'Inter', sans-serif;
font-size: 15px;
line-height: 1.5;
color: var(--graphite);
}
.step-text strong {
font-weight: 700;
color: var(--ink);
}
/* Step 1 Decorations - Orange Brush Strokes */
.step-1 .brush-strokes {
position: absolute;
width: 100%;
height: 100%;
background:
radial-gradient(ellipse 60px 20px at 10% 30%, #f5a623 0%, transparent 70%),
radial-gradient(ellipse 50px 15px at 15% 50%, #f5a623 0%, transparent 70%),
radial-gradient(ellipse 55px 18px at 8% 70%, #f5a623 0%, transparent 70%),
radial-gradient(ellipse 40px 15px at 85% 65%, #90c74b 0%, transparent 70%),
radial-gradient(ellipse 35px 12px at 80% 80%, #90c74b 0%, transparent 70%);
opacity: 0.8;
}
.step-1 .heart-icon {
position: absolute;
top: 10px;
right: 35px;
width: 48px;
height: 48px;
background: #fff;
border-radius: 10px;
box-shadow: 0 3px 12px rgba(0,0,0,0.18);
display: flex;
align-items: center;
justify-content: center;
animation: heartBeat 1.2s ease-in-out infinite;
}
.step-1 .heart-icon svg {
width: 28px;
height: 28px;
}
@keyframes heartBeat {
0%, 100% {
transform: scale(1);
box-shadow: 0 3px 12px rgba(0,0,0,0.18);
}
15% {
transform: scale(1.18);
box-shadow: 0 6px 24px rgba(233, 30, 99, 0.4);
}
30% {
transform: scale(1);
box-shadow: 0 3px 12px rgba(0,0,0,0.18);
}
45% {
transform: scale(1.12);
box-shadow: 0 5px 18px rgba(233, 30, 99, 0.3);
}
60% {
transform: scale(1);
box-shadow: 0 3px 12px rgba(0,0,0,0.18);
}
}
/* Step 2 Decorations - Pink/Purple Watercolor */
.step-2 .watercolor-splash {
position: absolute;
width: 100%;
height: 100%;
background:
radial-gradient(ellipse 80px 60px at 10% 20%, rgba(233, 30, 99, 0.3) 0%, transparent 70%),
radial-gradient(ellipse 60px 50px at 15% 75%, rgba(156, 39, 176, 0.25) 0%, transparent 70%),
radial-gradient(ellipse 50px 40px at 90% 60%, rgba(233, 30, 99, 0.2) 0%, transparent 70%);
}
.step-2 .stars-decoration {
position: absolute;
width: 100%;
height: 100%;
}
.step-2 .stars-decoration::before,
.step-2 .stars-decoration::after {
content: '✦';
position: absolute;
font-size: 24px;
color: #ffd54f;
animation: starShine 2s ease-in-out infinite;
}
.step-2 .stars-decoration::before {
top: 10px;
right: 50px;
animation-delay: 0s;
animation-duration: 2.2s;
}
.step-2 .stars-decoration::after {
bottom: 30px;
right: 20px;
font-size: 18px;
animation-delay: 0.7s;
animation-duration: 2.5s;
}
@keyframes starShine {
0%, 100% {
transform: scale(1) rotate(0deg);
opacity: 0.6;
filter: drop-shadow(0 0 2px rgba(255, 213, 79, 0.3));
}
25% {
transform: scale(1.2) rotate(5deg);
opacity: 0.85;
}
50% {
transform: scale(1.5) rotate(0deg);
opacity: 1;
filter: drop-shadow(0 0 8px rgba(255, 213, 79, 0.8));
}
75% {
transform: scale(1.2) rotate(-5deg);
opacity: 0.85;
}
}
/* Step 3 Decorations - Blue Watercolor + Rocket */
.step-3 .watercolor-splash.blue {
position: absolute;
width: 100%;
height: 100%;
background:
radial-gradient(ellipse 100px 80px at 85% 70%, rgba(33, 150, 243, 0.35) 0%, transparent 70%),
radial-gradient(ellipse 60px 50px at 70% 85%, rgba(0, 188, 212, 0.3) 0%, transparent 70%),
radial-gradient(ellipse 50px 40px at 15% 80%, rgba(233, 30, 99, 0.2) 0%, transparent 70%),
radial-gradient(ellipse 40px 35px at 20% 30%, rgba(255, 235, 59, 0.25) 0%, transparent 70%);
}
.step-3 .stars-decoration {
position: absolute;
width: 100%;
height: 100%;
}
.step-3 .stars-decoration::before,
.step-3 .stars-decoration::after {
content: '✦';
position: absolute;
font-size: 22px;
color: #ffd54f;
animation: starShine 2s ease-in-out infinite;
}
.step-3 .stars-decoration::before {
top: 5px;
right: 60px;
animation-delay: 0.3s;
}
.step-3 .stars-decoration::after {
top: 25px;
right: 35px;
font-size: 16px;
animation-delay: 0.8s;
}
.step-3 {
position: relative;
}
.step-3 .rocket-icon {
position: absolute;
font-size: 38px;
z-index: 10;
transition: none;
will-change: transform;
/* Initial position - will be controlled by JS */
top: 50%;
left: 50%;
transform: translate(-50%, -50%) rotate(45deg);
filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.2));
animation: rocketBob 3s ease-in-out infinite;
}
@keyframes rocketBob {
0%, 100% { filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.2)); }
50% { filter: drop-shadow(0 4px 12px rgba(249, 115, 22, 0.4)); }
}
/* Responsive */
@media (max-width: 900px) {
.fundraising-steps {
flex-direction: column;
align-items: center;
}
}
/* ================================================================
TESTIMONIALS SECTION
================================================================ */
.testimonials-section {
padding: 100px 0 120px;
background: var(--paper);
position: relative;
overflow: hidden;
}
.testimonials-header {
text-align: center;
max-width: 900px;
margin: 0 auto 60px;
padding: 0 48px;
}
.testimonials-title {
font-family: 'Fraunces', serif;
font-size: clamp(36px, 5vw, 56px);
font-weight: 400;
color: var(--ink);
margin-bottom: 20px;
line-height: 1.2;
}
.testimonials-title strong {
font-weight: 700;
}
.testimonials-subtitle {
font-family: 'Open Sans', 'Inter', sans-serif;
font-size: clamp(16px, 1.2vw, 18px);
line-height: 1.6;
color: var(--ink);
opacity: 0.85;
}
.testimonials-carousel {
position: relative;
width: 100%;
overflow: hidden;
padding: 40px 0 60px;
}
.testimonials-track {
display: flex;
gap: 30px;
padding: 20px 0;
animation: scroll-testimonials 40s linear infinite;
width: max-content;
}
.testimonials-track:hover {
animation-play-state: paused;
}
@keyframes scroll-testimonials {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-50%);
}
}
.testimonial-card {
flex-shrink: 0;
width: 320px;
transition: transform 0.4s var(--ease-breath);
}
/* Scattered playful rotations and offsets */
.testimonial-card:nth-child(8n+1) {
transform: rotate(-3deg) translateY(15px);
}
.testimonial-card:nth-child(8n+2) {
transform: rotate(2deg) translateY(-10px);
}
.testimonial-card:nth-child(8n+3) {
transform: rotate(-1.5deg) translateY(20px);
}
.testimonial-card:nth-child(8n+4) {
transform: rotate(3.5deg) translateY(-5px);
}
.testimonial-card:nth-child(8n+5) {
transform: rotate(-2.5deg) translateY(8px);
}
.testimonial-card:nth-child(8n+6) {
transform: rotate(1.5deg) translateY(-15px);
}
.testimonial-card:nth-child(8n+7) {
transform: rotate(-4deg) translateY(12px);
}
.testimonial-card:nth-child(8n+8) {
transform: rotate(2.5deg) translateY(-8px);
}
.testimonial-card:hover {
transform: scale(1.05) rotate(0deg) translateY(0) !important;
z-index: 10;
}
.testimonial-card img {
width: 100%;
height: auto;
display: block;
filter: drop-shadow(0 8px 24px rgba(0, 0, 0, 0.12));
}
/* Reveal animations */
.testimonials-header {
opacity: 0;
transform: translateY(30px);
transition: opacity 0.8s var(--ease-breath), transform 0.9s var(--ease-breath);
}
.testimonials-section.revealed .testimonials-header {
opacity: 1;
transform: translateY(0);
}
/* Mobile responsive */
@media (max-width: 768px) {
.testimonials-section {
padding: 80px 0 100px;
}
.testimonial-card {
width: 280px;
}
.testimonials-track {
gap: 20px;
}
}
/* ================================================================
ACT 4 — THE ECOSYSTEM
================================================================ */
.act-ecosystem {
padding: 160px 48px;
background: var(--paper);
position: relative;
}
.section-label {
font-family: 'Caveat', cursive;
font-size: 28px;
color: var(--purple);
margin-bottom: 12px;
transform: rotate(-2deg);
display: inline-block;
}
.section-title {
font-family: 'Fraunces', serif;
font-size: clamp(44px, 6vw, 80px);
font-weight: 400;
letter-spacing: -0.03em;
line-height: 1.05;
margin-bottom: 20px;
max-width: 900px;
}
.section-intro {
font-size: 19px;
line-height: 1.6;
color: var(--graphite);
max-width: 640px;
margin-bottom: 80px;
}
.ecosystem-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 40px;
max-width: 1400px;
margin: 0 auto;
}
.eco-card {
position: relative;
padding: 48px 40px;
background: var(--paper);
border-radius: 8px;
min-height: 480px;
display: flex;
flex-direction: column;
justify-content: space-between;
overflow: hidden;
cursor: none;
transition: transform 0.5s var(--ease-breath);
}
.eco-card::before {
content: '';
position: absolute;
inset: 0;
background-color: #FFFFFF;
z-index: -1;
clip-path: polygon(
2% 3%, 8% 1%, 15% 4%, 23% 2%, 32% 5%, 42% 2%, 51% 4%, 62% 2%, 72% 5%, 82% 3%, 90% 5%, 98% 2%,
99% 12%, 97% 22%, 98% 32%, 96% 42%, 98% 52%, 97% 62%, 98% 72%, 96% 82%, 98% 92%,
92% 98%, 82% 96%, 72% 98%, 62% 97%, 52% 99%, 42% 97%, 32% 99%, 22% 97%, 12% 99%, 4% 97%,
2% 88%, 4% 78%, 2% 68%, 4% 58%, 2% 48%, 4% 38%, 2% 28%, 4% 18%
);
box-shadow: 0 20px 40px rgba(0,0,0,0.08);
transition: transform 0.6s var(--ease-breath), box-shadow 0.6s var(--ease-breath);
}
.eco-card:hover { transform: translateY(-8px) rotate(0deg); }
.eco-card:hover::before { box-shadow: 0 30px 60px rgba(0,0,0,0.14); }
.eco-card-1 { transform: rotate(-2deg); }
.eco-card-2 { transform: rotate(1deg); }
.eco-card-3 { transform: rotate(-1.5deg); }
.eco-washi {
position: absolute;
top: -14px;
width: 120px;
height: 32px;
border-radius: 2px;
opacity: 0.85;
transform: rotate(-6deg);
}
.eco-card-1 .eco-washi { left: 20px; background: var(--teal); }
.eco-card-2 .eco-washi { right: 30px; background: var(--pink); transform: rotate(4deg); }
.eco-card-3 .eco-washi { left: 40px; background: var(--lime); transform: rotate(-3deg); }
.eco-illustration {
height: 220px;
margin-bottom: 32px;
display: flex;
align-items: center;
justify-content: center;
position: relative;
}
/* Journal illustration */
.journal-stack {
position: relative;
width: 180px; height: 220px;
transform: rotate(-8deg);
transition: transform 0.6s var(--ease-breath);
}
.eco-card:hover .journal-stack { transform: rotate(-4deg) scale(1.05); }
.journal-book {
position: absolute;
width: 140px;
height: 180px;
border-radius: 4px;
box-shadow: 0 12px 24px rgba(0,0,0,0.15);
overflow: hidden;
}
.journal-book::after {
content: '';
position: absolute;
left: 4px; top: 0; bottom: 0;
width: 2px;
background: rgba(0,0,0,0.2);
}
.journal-book-1 { background: linear-gradient(135deg, var(--pink), var(--purple)); top: 20px; left: 0; transform: rotate(-8deg); }
.journal-book-2 { background: linear-gradient(135deg, var(--teal), var(--blue)); top: 10px; left: 20px; transform: rotate(2deg); }
.journal-book-3 { background: linear-gradient(135deg, var(--lime), var(--teal)); top: 0; left: 40px; transform: rotate(6deg); }
.journal-book .cover-label {
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%, -50%);
color: white;
font-family: 'Kalam', cursive;
font-weight: 700;
font-size: 18px;
text-align: center;
line-height: 1.1;
}
/* Phone illustration */
.phone-mockup {
width: 140px;
height: 280px;
border-radius: 24px;
background: #1A1A1A;
padding: 8px;
box-shadow: 0 20px 40px rgba(0,0,0,0.25);
transform: rotate(-5deg);
position: relative;
transition: transform 0.6s var(--ease-breath);
}
.eco-card:hover .phone-mockup { transform: rotate(-2deg) scale(1.05); }
.phone-screen {
width: 100%;
height: 100%;
border-radius: 18px;
background: var(--paper);
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
position: relative;
}
.breath-circle {
width: 80px; height: 80px;
border-radius: 50%;
background: radial-gradient(circle, var(--teal) 0%, transparent 70%);
animation: breatheCircle 4s infinite ease-in-out;
}
@keyframes breatheCircle {
0%, 100% { transform: scale(0.7); opacity: 0.8; }
50% { transform: scale(1); opacity: 1; }
}
/* Programs illustration */
.programs-viz {
display: flex;
gap: 8px;
align-items: center;
}
.program-dot {
width: 60px; height: 60px;
border-radius: 50%;
position: relative;
}
.program-dot::before {
content: '';
position: absolute;
inset: -12px;
border-radius: 50%;
border: 2px dashed currentColor;
opacity: 0.3;
animation: rotate 20s infinite linear;
}
@keyframes rotate { to { transform: rotate(360deg); } }
.program-dot-1 { background: var(--pink); color: var(--pink); }
.program-dot-2 { background: var(--teal); color: var(--teal); margin-top: 20px; }
.program-dot-3 { background: var(--purple); color: var(--purple); margin-top: -10px; }
.eco-card-label {
font-family: 'Caveat', cursive;
font-size: 22px;
color: var(--graphite);
margin-bottom: 6px;
}
.eco-card-title {
font-family: 'Fraunces', serif;
font-size: 32px;
font-weight: 400;
letter-spacing: -0.02em;
line-height: 1.1;
margin-bottom: 16px;
}
.eco-card-desc {
font-size: 15px;
color: var(--graphite);
line-height: 1.6;
margin-bottom: 24px;
}
.eco-card-link {
font-family: 'Caveat', cursive;
font-size: 24px;
color: var(--ink);
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 6px;
transition: gap 0.4s var(--ease-breath);
cursor: none;
}
.eco-card-link:hover { gap: 14px; }
/* ================================================================
RIPPLE SECTION
================================================================ */
.act-ripple {
padding: 160px 48px;
position: relative;
overflow: hidden;
background: var(--paper);
}
.ripple-bg {
position: absolute;
inset: 0;
background:
radial-gradient(ellipse at 25% 40%, rgba(236, 72, 153, 0.15), transparent 45%),
radial-gradient(ellipse at 75% 30%, rgba(168, 85, 247, 0.13), transparent 45%),
radial-gradient(ellipse at 50% 80%, rgba(45, 212, 191, 0.12), transparent 45%);
pointer-events: none;
animation: ambientDrift 25s infinite ease-in-out;
}
.ripple-layout {
max-width: 1400px;
margin: 0 auto;
position: relative;
z-index: 2;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 80px;
align-items: center;
}
.ripple-rings {
position: relative;
aspect-ratio: 1;
max-width: 560px;
}
.ripple-ring {
position: absolute;
inset: 0;
border-radius: 50%;
border: 1.5px solid;
animation: rippleExpand 4s infinite;
}
.ripple-ring:nth-child(1) { border-color: var(--pink); animation-delay: 0s; }
.ripple-ring:nth-child(2) { border-color: var(--purple); animation-delay: 1s; }
.ripple-ring:nth-child(3) { border-color: var(--blue); animation-delay: 2s; }
.ripple-ring:nth-child(4) { border-color: var(--teal); animation-delay: 3s; }
@keyframes rippleExpand {
0% { transform: scale(0.3); opacity: 1; }
100% { transform: scale(1); opacity: 0; }
}
.ripple-center {
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%, -50%);
width: 160px; height: 160px;
border-radius: 50%;
background: var(--luua-gradient);
box-shadow: 0 20px 60px rgba(168, 85, 247, 0.3);
display: flex;
align-items: center;
justify-content: center;
z-index: 3;
}
.ripple-center::before {
content: '';
position: absolute;
inset: -20px;
border-radius: 50%;
background: var(--luua-gradient);
filter: blur(30px);
opacity: 0.4;
z-index: -1;
}
.ripple-center-text {
font-family: 'Kalam', cursive;
color: white;
font-size: 22px;
font-weight: 700;
text-align: center;
line-height: 1.1;
}
.ripple-labels { pointer-events: none; }
.ripple-label {
position: absolute;
font-family: 'Caveat', cursive;
font-size: 22px;
color: var(--graphite);
background: var(--paper);
padding: 6px 14px;
border-radius: 20px;
}
.ripple-label-1 { top: 12%; left: 8%; transform: rotate(-4deg); color: var(--pink); }
.ripple-label-2 { top: 18%; right: 12%; transform: rotate(3deg); color: var(--purple); }
.ripple-label-3 { bottom: 16%; left: 14%; transform: rotate(-2deg); color: var(--blue); }
.ripple-label-4 { bottom: 10%; right: 8%; transform: rotate(4deg); color: var(--teal); }
.ripple-content .section-label { color: var(--pink); }
.ripple-content .section-title {
font-size: clamp(40px, 5vw, 64px);
margin-bottom: 28px;
}
.ripple-content p {
font-size: 18px;
color: var(--graphite);
line-height: 1.7;
margin-bottom: 20px;
max-width: 520px;
}
.ripple-content p strong {
color: var(--ink);
font-weight: 500;
background: linear-gradient(180deg, transparent 65%, rgba(196, 216, 46, 0.4) 65%);
padding: 0 4px;
}
/* ================================================================
BENEFITS / OUTCOMES — Dual Perspective
================================================================ */
.act-outcomes {
padding: 160px 48px;
background: var(--paper);
}
.outcomes-header {
max-width: 1000px;
margin: 0 auto 80px;
text-align: center;
}
.outcomes-grid {
max-width: 1200px;
margin: 0 auto;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 40px;
}
.outcome-column {
background: white;
padding: 56px 48px;
border-radius: 4px;
position: relative;
box-shadow: 0 16px 40px rgba(0,0,0,0.06);
}
.outcome-column::before {
content: '';
position: absolute;
top: -8px; left: 20%; right: 20%;
height: 24px;
background: var(--pink);
opacity: 0.7;
transform: rotate(-1deg);
border-radius: 2px;
}
.outcome-column:nth-child(2)::before {
background: var(--teal);
transform: rotate(1deg);
}
.outcome-icon {
width: 64px; height: 64px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 28px;
font-size: 28px;
}
.outcome-column:nth-child(1) .outcome-icon {
background: rgba(236, 72, 153, 0.1);
color: var(--pink);
}
.outcome-column:nth-child(2) .outcome-icon {
background: rgba(45, 212, 191, 0.1);
color: var(--teal);
}
.outcome-kicker {
font-family: 'Caveat', cursive;
font-size: 28px;
margin-bottom: 8px;
}
.outcome-column:nth-child(1) .outcome-kicker { color: var(--pink); }
.outcome-column:nth-child(2) .outcome-kicker { color: var(--teal); }
.outcome-title {
font-family: 'Fraunces', serif;
font-size: 32px;
font-weight: 400;
letter-spacing: -0.02em;
line-height: 1.1;
margin-bottom: 32px;
}
.outcome-list {
list-style: none;
display: flex;
flex-direction: column;
gap: 18px;
}
.outcome-list li {
padding-left: 28px;
position: relative;
font-size: 16px;
line-height: 1.5;
color: var(--graphite);
}
.outcome-list li::before {
content: '';
position: absolute;
left: 0; top: 8px;
width: 12px; height: 12px;
border-radius: 50%;
background: currentColor;
opacity: 0.7;
}
.outcome-column:nth-child(1) .outcome-list li::before { background: var(--pink); }
.outcome-column:nth-child(2) .outcome-list li::before { background: var(--teal); }
.outcome-list li strong {
color: var(--ink);
font-weight: 600;
}
/* ================================================================
SHOP — The Diorama
================================================================ */
.act-shop {
padding: 160px 40px;
background: var(--paper);
position: relative;
overflow: hidden;
}
.shop-watercolor-wash, .shop-watercolor-wash-2 { display: none; }
.shop-generative-bg {
position: absolute;
inset: 0;
pointer-events: none;
overflow: hidden;
}
.shop-blob {
position: absolute;
mix-blend-mode: multiply;
filter: url(#watercolorFilter);
}
.shop-blob-1 { top: 10%; left: 5%; width: 40vw; height: 40vw; background: radial-gradient(circle, var(--pink) 5%, rgba(236, 72, 153, 0.4) 30%, transparent 60%); opacity: 0.25; animation: blobDrift1 24s infinite ease-in-out; border-radius: 50% 40% 55% 45%; }
.shop-blob-2 { top: 30%; right: 8%; width: 45vw; height: 45vw; background: radial-gradient(circle, var(--teal) 5%, rgba(45, 212, 191, 0.4) 30%, transparent 60%); opacity: 0.28; animation: blobDrift2 27s infinite ease-in-out; border-radius: 45% 55% 40% 60%; }
.shop-blob-3 { bottom: 5%; left: 30%; width: 38vw; height: 38vw; background: radial-gradient(circle, var(--purple) 5%, rgba(168, 85, 247, 0.4) 30%, transparent 60%); opacity: 0.24; animation: blobDrift3 22s infinite ease-in-out; border-radius: 55% 45% 50% 50%; }
.shop-blob-4 { top: 50%; left: 50%; width: 30vw; height: 30vw; background: radial-gradient(circle, var(--lime) 5%, rgba(196, 216, 46, 0.4) 30%, transparent 60%); opacity: 0.22; animation: blobDrift4 29s infinite ease-in-out; border-radius: 48% 52% 45% 55%; }
.shop-header {
max-width: 1200px;
margin: 0 auto 80px;
position: relative;
z-index: 2;
}
.shop-diorama {
max-width: 1400px;
margin: 0 auto;
position: relative;
z-index: 2;
display: grid;
grid-template-columns: repeat(12, 1fr);
grid-auto-rows: 120px;
gap: 16px;
}
.product-card {
position: relative;
background: #FFFFFF;
border-radius: 4px;
box-shadow: 0 20px 40px rgba(0,0,0,0.12);
overflow: hidden;
cursor: none;
transition: transform 0.6s var(--ease-breath), box-shadow 0.6s var(--ease-breath);
padding: 20px;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.product-card::before {
content: '';
position: absolute;
top: -12px;
width: 60px; height: 22px;
background: var(--yellow);
opacity: 0.85;
transform: rotate(-5deg);
}
.product-card:nth-child(odd)::before { left: 15%; background: var(--pink); }
.product-card:nth-child(even)::before { right: 15%; background: var(--teal); transform: rotate(4deg); }
.product-card:hover {
transform: translateY(-10px) rotate(0deg) !important;
box-shadow: 0 30px 60px rgba(0,0,0,0.18);
}
.product-1 { grid-column: 1 / 4; grid-row: 1 / 4; transform: rotate(-3deg); }
.product-2 { grid-column: 4 / 7; grid-row: 1 / 3; transform: rotate(2deg); }
.product-3 { grid-column: 7 / 10; grid-row: 1 / 4; transform: rotate(-1deg); }
.product-4 { grid-column: 10 / 13; grid-row: 1 / 3; transform: rotate(3deg); }
.product-5 { grid-column: 4 / 7; grid-row: 3 / 5; transform: rotate(-2deg); }
.product-6 { grid-column: 10 / 13; grid-row: 3 / 5; transform: rotate(1deg); }
.product-7 { grid-column: 1 / 5; grid-row: 4 / 6; transform: rotate(1deg); }
.product-8 { grid-column: 7 / 10; grid-row: 4 / 6; transform: rotate(-2deg); }
.product-visual {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
position: relative;
min-height: 80px;
}
/* SVG product illustrations */
.product-journal-cover {
width: 80px; height: 110px;
border-radius: 2px;
position: relative;
box-shadow: 0 6px 12px rgba(0,0,0,0.2);
}
.product-journal-cover .bloom {
position: absolute;
inset: 0;
border-radius: 2px;
background: linear-gradient(135deg, var(--pink), var(--purple), var(--teal), var(--lime));
opacity: 0.8;
}
.product-journal-cover .label {
position: absolute;
inset: 14px;
background: white;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-family: 'Kalam', cursive;
font-weight: 700;
text-align: center;
font-size: 9px;
color: var(--ink);
padding: 4px;
}
.product-bottle {
width: 50px; height: 100px;
background: linear-gradient(180deg, #fff 0%, #fff 20%, var(--paper-shadow) 100%);
border-radius: 6px 6px 12px 12px;
position: relative;
box-shadow: 0 6px 12px rgba(0,0,0,0.2);
}
.product-bottle::before {
content: '';
position: absolute;
top: -8px; left: 50%;
transform: translateX(-50%);
width: 22px; height: 12px;
background: var(--graphite);
border-radius: 4px 4px 0 0;
}
.product-bottle .label {
position: absolute;
top: 30px; left: 4px; right: 4px;
padding: 6px 4px;
background: var(--lime);
font-family: 'Kalam', cursive;
font-size: 10px;
font-weight: 700;
text-align: center;
color: var(--ink);
}
.product-tote {
width: 90px; height: 90px;
background: #F0F0F0;
border: 1.5px solid var(--ink);
border-radius: 2px;
position: relative;
margin-top: 20px;
}
.product-tote::before, .product-tote::after {
content: '';
position: absolute;
top: -20px;
width: 3px; height: 30px;
background: var(--ink);
border-radius: 2px;
}
.product-tote::before { left: 18px; }
.product-tote::after { right: 18px; }
.product-tote .tote-text {
position: absolute;
inset: 14px;
font-family: 'Kalam', cursive;
font-size: 12px;
font-weight: 700;
text-align: center;
color: var(--ink);
display: flex;
flex-direction: column;
justify-content: center;
line-height: 1;
}
.product-hat {
width: 90px; height: 50px;
position: relative;
}
.product-hat .crown {
position: absolute;
top: 0; left: 15px; right: 15px;
height: 35px;
background: var(--lime);
border-radius: 30px 30px 4px 4px;
}
.product-hat .brim {
position: absolute;
bottom: 0; left: 0; right: 0;
height: 8px;
background: var(--lime);
border-radius: 30px;
filter: brightness(0.85);
}
.product-hat .emblem {
position: absolute;
top: 10px; left: 50%;
transform: translateX(-50%);
font-family: 'Kalam', cursive;
font-size: 11px;
font-weight: 700;
color: var(--ink);
}
.product-hoodie {
width: 90px; height: 100px;
position: relative;
}
.product-hoodie .body {
position: absolute;
top: 12px; left: 0; right: 0; bottom: 0;
background: #F0F0F0;
border: 1.5px solid var(--ink);
border-radius: 8px 8px 4px 4px;
}
.product-hoodie .hood {
position: absolute;
top: 0; left: 20px; right: 20px;
height: 25px;
background: #F0F0F0;
border: 1.5px solid var(--ink);
border-radius: 50% 50% 0 0;
}
.product-hoodie .text {
position: absolute;
top: 45px; left: 0; right: 0;
font-family: 'Kalam', cursive;
font-size: 13px;
font-weight: 700;
text-align: center;
color: var(--ink);
}
.product-card-info {
position: relative;
z-index: 1;
}
.product-name {
font-family: 'Kalam', cursive;
font-size: 16px;
font-weight: 400;
margin-bottom: 4px;
color: var(--ink);
}
.product-price {
font-family: 'Caveat', cursive;
font-size: 20px;
color: var(--blue);
font-weight: 600;
transform: rotate(-3deg);
display: inline-block;
}
.product-quote {
font-family: 'Fraunces', serif;
font-style: italic;
font-size: 13px;
line-height: 1.4;
color: var(--graphite);
}
/* Shop CTA */
.shop-cta-row {
max-width: 1000px;
margin: 80px auto 0;
text-align: center;
position: relative;
z-index: 2;
}
/* ================================================================
FLEXIBLE / VALUE SUPPORT SECTION
================================================================ */
.act-value {
padding: 160px 48px;
background: var(--paper);
position: relative;
}
.value-layout {
max-width: 1280px;
margin: 0 auto;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 100px;
align-items: center;
}
.value-visual {
position: relative;
aspect-ratio: 4/5;
}
.polaroid {
position: absolute;
background: #FFFFFF;
padding: 12px 12px 50px;
box-shadow: 0 20px 40px rgba(0,0,0,0.15);
transition: transform 0.6s var(--ease-breath);
}
.polaroid .img-placeholder {
width: 100%;
aspect-ratio: 1;
position: relative;
overflow: hidden;
}
.polaroid .washi {
position: absolute;
width: 80px; height: 22px;
opacity: 0.75;
transform: rotate(-4deg);
}
.polaroid .caption {
position: absolute;
bottom: 14px; left: 12px; right: 12px;
font-family: 'Caveat', cursive;
font-size: 18px;
text-align: center;
color: var(--graphite);
}
.polaroid-1 {
top: 0; left: 5%;
width: 55%;
transform: rotate(-5deg);
z-index: 3;
}
.polaroid-1 .img-placeholder {
background: linear-gradient(135deg, #FFD6A5, #FDB5B5, #FFC6E5);
}
.polaroid-1 .washi { top: -10px; left: -15px; background: var(--teal); }
.polaroid-2 {
top: 20%; right: 0;
width: 50%;
transform: rotate(4deg);
z-index: 2;
}
.polaroid-2 .img-placeholder {
background: linear-gradient(135deg, #B8E4E0, #C5D6E8, #D8C6F0);
}
.polaroid-2 .washi { top: -10px; right: -15px; background: var(--pink); transform: rotate(5deg); }
.polaroid-3 {
bottom: 5%; left: 15%;
width: 50%;
transform: rotate(-3deg);
z-index: 4;
}
.polaroid-3 .img-placeholder {
background: linear-gradient(135deg, #D8E4A5, #B0D5A0, #A5D8C5);
}
.polaroid-3 .washi { bottom: 40px; right: -15px; background: var(--lime); transform: rotate(-8deg); }
.value-visual:hover .polaroid-1 { transform: rotate(-7deg) translateY(-4px); }
.value-visual:hover .polaroid-2 { transform: rotate(6deg) translateY(-4px); }
.value-visual:hover .polaroid-3 { transform: rotate(-5deg) translateY(-4px); }
.value-splash {
position: absolute;
top: 30%; left: 30%;
width: 80%; height: 80%;
background: radial-gradient(circle, rgba(196, 216, 46, 0.3), transparent 70%);
filter: blur(30px);
z-index: 1;
}
.value-content .section-label { color: var(--teal); }
.value-content .section-title {
font-size: clamp(40px, 5vw, 64px);
margin-bottom: 28px;
}
.value-content p {
font-size: 17px;
line-height: 1.7;
color: var(--graphite);
margin-bottom: 20px;
}
.value-features {
list-style: none;
display: flex;
flex-direction: column;
gap: 20px;
margin-top: 40px;
}
.value-features li {
display: flex;
align-items: flex-start;
gap: 20px;
padding: 20px;
background: white;
border-radius: 4px;
border-left: 3px solid;
box-shadow: 0 6px 16px rgba(0,0,0,0.04);
transition: transform 0.4s var(--ease-breath);
}
.value-features li:nth-child(1) { border-color: var(--pink); }
.value-features li:nth-child(2) { border-color: var(--teal); }
.value-features li:nth-child(3) { border-color: var(--purple); }
.value-features li:hover { transform: translateX(6px); }
.value-feature-icon {
flex-shrink: 0;
width: 40px; height: 40px;
display: flex;
align-items: center;
justify-content: center;
font-size: 24px;
}
.value-feature-text {
font-family: 'Fraunces', serif;
font-size: 17px;
line-height: 1.4;
color: var(--ink);
}
.value-feature-text strong {
display: block;
font-weight: 600;
margin-bottom: 2px;
}
/* ================================================================
SEGMENTATION — Four Audiences
================================================================ */
.act-segments {
padding: 160px 48px;
background: var(--paper);
position: relative;
overflow: hidden;
}
.act-segments::before {
display: none;
}
.segments-header {
max-width: 1200px;
margin: 0 auto 80px;
text-align: center;
}
.segments-grid {
max-width: 1400px;
margin: 0 auto;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 24px;
}
.segment-card {
position: relative;
background: white;
padding: 48px 32px;
border-radius: 4px;
cursor: none;
transition: transform 0.5s var(--ease-breath), box-shadow 0.5s var(--ease-breath);
box-shadow: 0 12px 30px rgba(0,0,0,0.06);
overflow: hidden;
}
.segment-card:hover {
transform: translateY(-8px);
box-shadow: 0 24px 50px rgba(0,0,0,0.12);
}
.segment-card::before {
content: '';
position: absolute;
inset: 0;
background: var(--segment-color, var(--pink));
opacity: 0;
transition: opacity 0.6s;
z-index: -1;
}
.segment-card:hover::before { opacity: 0.04; }
.segment-badge {
width: 56px; height: 56px;
border-radius: 50%;
margin-bottom: 24px;
position: relative;
background: var(--segment-color);
}
.segment-badge::before {
content: '';
position: absolute;
inset: -8px;
border-radius: 50%;
background: var(--segment-color);
opacity: 0.2;
filter: blur(8px);
}
.segment-card:nth-child(1) { --segment-color: var(--pink); }
.segment-card:nth-child(2) { --segment-color: var(--teal); }
.segment-card:nth-child(3) { --segment-color: var(--purple); }
.segment-card:nth-child(4) { --segment-color: var(--orange); }
.segment-label {
font-family: 'Caveat', cursive;
font-size: 22px;
color: var(--segment-color);
margin-bottom: 4px;
}
.segment-title {
font-family: 'Fraunces', serif;
font-size: 26px;
font-weight: 500;
letter-spacing: -0.02em;
line-height: 1.15;
margin-bottom: 16px;
}
.segment-desc {
font-size: 15px;
line-height: 1.6;
color: var(--graphite);
margin-bottom: 32px;
}
.segment-cta {
font-family: 'Caveat', cursive;
font-size: 22px;
color: var(--ink);
display: inline-flex;
align-items: center;
gap: 6px;
transition: gap 0.4s var(--ease-breath);
text-decoration: none;
cursor: none;
}
.segment-card:hover .segment-cta { gap: 14px; color: var(--segment-color); }
/* ================================================================
FUNDRAISING
================================================================ */
.act-fundraising {
padding: 160px 48px;
background: var(--paper);
position: relative;
overflow: hidden;
}
.fundraising-header {
max-width: 1100px;
margin: 0 auto 100px;
}
.fundraising-header .section-label { color: var(--orange); }
.fundraising-headline-group {
display: grid;
grid-template-columns: 1.2fr 1fr;
gap: 80px;
align-items: end;
}
.fundraising-header p {
font-size: 18px;
line-height: 1.7;
color: var(--graphite);
max-width: 480px;
}
.fundraising-steps {
max-width: 1200px;
margin: 0 auto;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 24px;
position: relative;
}
.fundraising-steps::before {
content: '';
position: absolute;
top: 60px; left: 12%; right: 12%;
height: 2px;
background: repeating-linear-gradient(90deg, var(--mist) 0, var(--mist) 8px, transparent 8px, transparent 16px);
z-index: 0;
}
.fund-step {
text-align: center;
position: relative;
z-index: 2;
}
.fund-step-circle {
width: 120px; height: 120px;
border-radius: 50%;
margin: 0 auto 24px;
position: relative;
display: flex;
align-items: center;
justify-content: center;
background: white;
box-shadow: 0 8px 24px rgba(0,0,0,0.1);
transition: transform 0.6s var(--ease-breath);
}
.fund-step:hover .fund-step-circle {
transform: scale(1.08) rotate(5deg);
}
.fund-step-circle::before {
content: '';
position: absolute;
inset: -20px;
border-radius: 50%;
opacity: 0.4;
filter: blur(20px);
z-index: -1;
}
.fund-step:nth-child(1) .fund-step-circle::before { background: var(--pink); }
.fund-step:nth-child(2) .fund-step-circle::before { background: var(--lime); }
.fund-step:nth-child(3) .fund-step-circle::before { background: var(--teal); }
.fund-step:nth-child(4) .fund-step-circle::before { background: var(--purple); }
.fund-step-num {
font-family: 'Fraunces', serif;
font-style: italic;
font-size: 44px;
font-weight: 500;
}
.fund-step:nth-child(1) .fund-step-num { color: var(--pink); }
.fund-step:nth-child(2) .fund-step-num { color: var(--lime); }
.fund-step:nth-child(3) .fund-step-num { color: var(--teal); }
.fund-step:nth-child(4) .fund-step-num { color: var(--purple); }
.fund-step-title {
font-family: 'Fraunces', serif;
font-size: 22px;
font-weight: 500;
margin-bottom: 10px;
letter-spacing: -0.01em;
}
.fund-step-desc {
font-size: 14px;
line-height: 1.55;
color: var(--graphite);
}
.fundraising-banner {
max-width: 1200px;
margin: 100px auto 0;
background: #FFFFFF;
padding: 56px 72px;
border-radius: 4px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 40px;
position: relative;
overflow: hidden;
}
.fundraising-banner::before {
content: '';
position: absolute;
top: -40px; right: -40px;
width: 200px; height: 200px;
background: var(--orange);
border-radius: 50%;
opacity: 0.12;
filter: blur(20px);
}
.fundraising-banner-text {
flex: 1;
}
.fundraising-banner-stat {
font-family: 'Fraunces', serif;
font-size: 56px;
font-weight: 500;
line-height: 1;
color: var(--orange);
margin-bottom: 8px;
letter-spacing: -0.02em;
}
.fundraising-banner-copy {
font-family: 'Fraunces', serif;
font-size: 22px;
line-height: 1.3;
max-width: 500px;
}
/* ================================================================
TESTIMONIALS / RIPPLE WALL
================================================================ */
.act-testimonials {
padding: 160px 40px;
background: var(--paper);
position: relative;
overflow: hidden;
}
.act-testimonials::before {
display: none;
}
.act-testimonials::after { display: none; }
.testimonials-header {
max-width: 1200px;
margin: 0 auto 80px;
text-align: center;
}
.testimonials-header .section-label { color: var(--purple); }
.testimonials-wall {
max-width: 1400px;
margin: 0 auto;
display: grid;
grid-template-columns: repeat(12, 1fr);
gap: 24px;
}
.testimonial {
background: #FFFFFF;
padding: 16px 16px 40px;
box-shadow: 0 16px 32px rgba(0,0,0,0.1);
position: relative;
transition: transform 0.6s var(--ease-breath);
cursor: none;
}
.testimonial:hover { transform: translateY(-6px) rotate(0deg) !important; }
.testimonial-1 { grid-column: 1 / 4; transform: rotate(-4deg); }
.testimonial-2 { grid-column: 4 / 7; margin-top: 40px; transform: rotate(3deg); }
.testimonial-3 { grid-column: 7 / 10; transform: rotate(-2deg); }
.testimonial-4 { grid-column: 10 / 13; margin-top: 60px; transform: rotate(4deg); }
.testimonial-5 { grid-column: 2 / 5; margin-top: 48px; transform: rotate(2deg); }
.testimonial-6 { grid-column: 5 / 9; margin-top: 24px; transform: rotate(-3deg); }
.testimonial-7 { grid-column: 9 / 12; margin-top: 48px; transform: rotate(2deg); }
.testimonial-washi {
position: absolute;
top: -12px; left: 20%;
width: 70px; height: 22px;
background: var(--pink);
opacity: 0.8;
transform: rotate(-4deg);
background-image: repeating-linear-gradient(90deg, rgba(255,255,255,0.25) 0 4px, transparent 4px 8px);
}
.testimonial-2 .testimonial-washi { background: var(--teal); left: 60%; transform: rotate(6deg); }
.testimonial-3 .testimonial-washi { background: var(--lime); left: 10%; transform: rotate(-6deg); }
.testimonial-4 .testimonial-washi { background: var(--purple); left: 55%; transform: rotate(5deg); }
.testimonial-5 .testimonial-washi { background: var(--orange); left: 30%; transform: rotate(-3deg); }
.testimonial-6 .testimonial-washi { background: var(--blue); left: 40%; transform: rotate(3deg); }
.testimonial-7 .testimonial-washi { background: var(--pink); left: 25%; transform: rotate(-5deg); }
.testimonial-photo {
width: 100%;
aspect-ratio: 4/3;
margin-bottom: 16px;
position: relative;
overflow: hidden;
}
.testimonial-1 .testimonial-photo { background: linear-gradient(135deg, #FFB5B5, #FFC5E5, #D5B5FF); }
.testimonial-2 .testimonial-photo { background: linear-gradient(135deg, #B5E5E0, #FFF5B5, #FFD8A5); }
.testimonial-3 .testimonial-photo { background: linear-gradient(135deg, #D5FFB5, #B5E5D5, #B5D5FF); }
.testimonial-4 .testimonial-photo { background: linear-gradient(135deg, #FFC5B5, #FFD5E5, #D5C5FF); }
.testimonial-5 .testimonial-photo { background: linear-gradient(135deg, #B5D5E5, #C5E5B5, #FFEBB5); }
.testimonial-6 .testimonial-photo { background: linear-gradient(135deg, #D5C5FF, #FFB5D5, #FFD5A5); }
.testimonial-7 .testimonial-photo { background: linear-gradient(135deg, #C5D5FF, #B5FFC5, #FFD5B5); }
.testimonial-photo::after {
content: '';
position: absolute;
inset: 0;
background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.4), transparent 60%);
}
.testimonial-quote {
font-family: 'Caveat', cursive;
font-size: 20px;
line-height: 1.35;
color: var(--blue);
padding: 0 4px;
margin-bottom: 10px;
}
.testimonial-author {
font-family: 'Inter', sans-serif;
font-size: 12px;
font-weight: 500;
color: var(--graphite);
padding: 0 4px;
letter-spacing: 0.04em;
text-transform: uppercase;
}
/* ================================================================
APP PREVIEW
================================================================ */
.act-app {
padding: 160px 48px;
background: var(--paper);
position: relative;
overflow: hidden;
}
.app-layout {
max-width: 1280px;
margin: 0 auto;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 100px;
align-items: center;
}
.app-phone-container {
position: relative;
aspect-ratio: 3/4;
display: flex;
align-items: center;
justify-content: center;
}
.app-phone {
width: 280px;
height: 560px;
border-radius: 40px;
background: #1A1A1A;
padding: 12px;
box-shadow: 0 40px 80px rgba(0,0,0,0.25);
transform: rotate(-4deg);
position: relative;
z-index: 3;
}
.app-phone::before {
content: '';
position: absolute;
top: 24px; left: 50%;
transform: translateX(-50%);
width: 100px; height: 26px;
background: #1A1A1A;
border-radius: 14px;
z-index: 5;
}
.app-screen {
width: 100%; height: 100%;
border-radius: 28px;
background: #FFFFFF;
padding: 60px 24px 24px;
display: flex;
flex-direction: column;
align-items: center;
position: relative;
overflow: hidden;
}
.app-screen-title {
font-family: 'Fraunces', serif;
font-size: 18px;
font-weight: 500;
margin-bottom: 4px;
color: var(--ink);
}
.app-screen-subtitle {
font-family: 'Caveat', cursive;
font-size: 16px;
color: var(--graphite);
margin-bottom: 36px;
}
.app-breath-circle {
width: 160px; height: 160px;
border-radius: 50%;
background: radial-gradient(circle,
rgba(168, 85, 247, 0.4) 0%,
rgba(45, 212, 191, 0.3) 50%,
rgba(196, 216, 46, 0.2) 100%);
margin-bottom: 28px;
animation: breatheBig 4s infinite ease-in-out;
display: flex;
align-items: center;
justify-content: center;
font-family: 'Fraunces', serif;
font-style: italic;
font-size: 17px;
color: var(--ink);
}
@keyframes breatheBig {
0%, 100% { transform: scale(0.8); }
50% { transform: scale(1); }
}
.app-emotions {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
width: 100%;
margin-bottom: 28px;
}
.app-emotion {
aspect-ratio: 1;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
color: white;
font-family: 'Kalam', cursive;
font-weight: 700;
}
.app-emotion:nth-child(1) { background: var(--pink); }
.app-emotion:nth-child(2) { background: var(--teal); }
.app-emotion:nth-child(3) { background: var(--purple); }
.app-practice-row {
width: 100%;
background: white;
padding: 14px;
border-radius: 16px;
font-family: 'Inter', sans-serif;
font-size: 12px;
color: var(--ink);
box-shadow: 0 4px 12px rgba(0,0,0,0.06);
margin-bottom: 10px;
display: flex;
align-items: center;
gap: 10px;
}
.app-practice-icon {
width: 28px; height: 28px;
border-radius: 50%;
background: var(--lime);
flex-shrink: 0;
}
.app-practice-row:nth-child(2) .app-practice-icon { background: var(--pink); }
/* Floating sparkles around phone */
.app-sparkle {
position: absolute;
font-family: 'Fraunces', serif;
font-size: 24px;
color: var(--yellow);
}
.app-sparkle-1 { top: 10%; right: 15%; animation: twinkle 3s infinite; }
.app-sparkle-2 { bottom: 15%; left: 10%; animation: twinkle 3s infinite 1.5s; color: var(--pink); }
.app-sparkle-3 { top: 40%; left: 5%; animation: twinkle 3s infinite 0.8s; color: var(--teal); }
.app-sparkle-4 { top: 60%; right: 8%; animation: twinkle 3s infinite 2.2s; color: var(--purple); }
@keyframes twinkle {
0%, 100% { opacity: 0.3; transform: scale(0.8); }
50% { opacity: 1; transform: scale(1.2); }
}
.app-content .section-label { color: var(--purple); }
.app-content .section-title {
font-size: clamp(40px, 5vw, 64px);
margin-bottom: 28px;
}
.app-content p {
font-size: 17px;
line-height: 1.7;
color: var(--graphite);
margin-bottom: 24px;
max-width: 520px;
}
.app-features {
list-style: none;
margin: 32px 0 48px;
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 16px;
max-width: 520px;
}
.app-features li {
padding: 14px 16px 14px 44px;
font-size: 14px;
color: var(--ink);
font-weight: 500;
background: white;
border-radius: 24px;
position: relative;
border: 1px solid rgba(0,0,0,0.06);
}
.app-features li::before {
content: '';
position: absolute;
left: 14px; top: 50%;
transform: translateY(-50%);
width: 16px; height: 16px;
border-radius: 50%;
background: var(--purple);
}
.app-download-row {
display: flex;
gap: 12px;
flex-wrap: wrap;
}
.app-download-btn {
padding: 10px 20px;
background: var(--ink);
color: white;
border-radius: 30px;
display: flex;
align-items: center;
gap: 8px;
text-decoration: none;
font-size: 13px;
transition: transform 0.4s;
cursor: none;
}
.app-download-btn:hover { transform: scale(1.04); }
/* ================================================================
INVITATION — Final CTA / Contact
================================================================ */
.act-invitation {
padding: 160px 48px;
background: var(--paper);
text-align: center;
position: relative;
overflow: hidden;
}
.act-invitation::before {
display: none;
}
.invitation-question {
font-family: 'Fraunces', serif;
font-weight: 400;
font-size: clamp(40px, 6vw, 80px);
letter-spacing: -0.03em;
line-height: 1.1;
max-width: 900px;
margin: 0 auto 80px;
}
.invitation-question em {
font-style: italic;
background: var(--luua-gradient);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.invitation-form-wrapper {
max-width: 720px;
margin: 0 auto 100px;
padding: 48px;
background: white;
border-radius: 4px;
box-shadow: 0 20px 50px rgba(0,0,0,0.08);
position: relative;
}
.invitation-form-wrapper::before {
content: '';
position: absolute;
top: -14px; left: 30%;
width: 80px; height: 28px;
background: var(--lime);
opacity: 0.85;
transform: rotate(-4deg);
}
.invitation-form-wrapper::after {
content: '';
position: absolute;
top: -14px; right: 25%;
width: 80px; height: 28px;
background: var(--pink);
opacity: 0.85;
transform: rotate(5deg);
}
.invitation-form-kicker {
font-family: 'Caveat', cursive;
font-size: 24px;
color: var(--purple);
margin-bottom: 6px;
}
.invitation-form-title {
font-family: 'Fraunces', serif;
font-size: 32px;
font-weight: 500;
margin-bottom: 32px;
}
.invitation-form {
display: flex;
gap: 12px;
max-width: 520px;
margin: 0 auto;
}
.invitation-input {
flex: 1;
background: transparent;
border: none;
border-bottom: 2px solid var(--mist);
padding: 12px 4px;
font-family: 'Fraunces', serif;
font-style: italic;
font-size: 18px;
color: var(--ink);
outline: none;
transition: border-color 0.4s;
}
.invitation-input:focus { border-color: var(--purple); }
.invitation-input::placeholder { color: var(--mist); }
.btn-primary {
background: var(--lime);
color: var(--ink);
border: none;
padding: 12px 32px;
border-radius: 100px;
font-family: 'Inter', sans-serif;
font-weight: 600;
font-size: 15px;
cursor: none;
transition: all 0.4s var(--ease-breath);
display: inline-flex;
align-items: center;
gap: 6px;
letter-spacing: 0.02em;
}
.btn-primary:hover {
transform: scale(1.04);
box-shadow: 0 8px 20px rgba(196, 216, 46, 0.4);
}
.invitation-alt {
font-family: 'Caveat', cursive;
font-size: 20px;
color: var(--graphite);
margin-bottom: 20px;
}
.invitation-contact {
display: flex;
justify-content: center;
gap: 40px;
font-size: 14px;
color: var(--graphite);
flex-wrap: wrap;
}
.invitation-contact a {
color: var(--ink);
text-decoration: none;
border-bottom: 1.5px solid var(--lime);
padding-bottom: 2px;
}
/* ================================================================
TORN PAPER DIVIDERS — SVG-masked section edges
================================================================ */
.torn-top, .torn-bottom {
position: absolute;
left: 0; right: 0;
height: 40px;
z-index: 5;
pointer-events: none;
background-color: var(--paper);
}
.torn-top {
top: -1px;
-webkit-mask-image: url("data:image/svg+xml;utf8,");
mask-image: url("data:image/svg+xml;utf8,");
-webkit-mask-size: 100% 100%;
mask-size: 100% 100%;
}
.torn-top.white-paper { background-color: #fff; }
.torn-top.deep-paper { background-color: var(--paper-deep); }
/* ================================================================
FOOTER (Combined Invitation + Footer)
================================================================ */
footer.act-invitation-footer {
background:
url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E"),
linear-gradient(180deg, #e8e4df 0%, #ddd8d2 100%);
background-blend-mode: overlay;
color: var(--ink);
padding: 100px 48px 60px;
position: relative;
overflow: hidden;
}
/* Invitation Top Section */
.invitation-top {
max-width: 800px;
margin: 0 auto 80px;
text-align: center;
}
footer.act-invitation-footer .invitation-question {
font-family: 'Fraunces', serif;
font-size: clamp(32px, 5vw, 56px);
font-weight: 300;
line-height: 1.2;
color: var(--ink);
margin-bottom: 50px;
}
footer.act-invitation-footer .invitation-question em {
font-style: italic;
color: var(--teal);
}
footer.act-invitation-footer .invitation-form-wrapper {
margin-bottom: 40px;
}
footer.act-invitation-footer .invitation-form-kicker {
font-family: 'Caveat', cursive;
font-size: 22px;
color: var(--graphite);
margin-bottom: 8px;
}
footer.act-invitation-footer .invitation-form-title {
font-family: 'Open Sans', 'Inter', sans-serif;
font-size: 16px;
font-weight: 500;
color: var(--ink);
margin-bottom: 20px;
}
footer.act-invitation-footer .invitation-form {
display: flex;
gap: 12px;
max-width: 500px;
margin: 0 auto;
}
footer.act-invitation-footer .invitation-input {
flex: 1;
padding: 14px 18px;
border: 1px solid #ccc;
background: #fff;
font-family: 'Open Sans', 'Inter', sans-serif;
font-size: 14px;
border-radius: 6px;
}
footer.act-invitation-footer .invitation-input:focus {
outline: none;
border-color: var(--teal);
box-shadow: 0 0 0 3px rgba(45, 212, 191, 0.15);
}
footer.act-invitation-footer .invitation-alt {
font-family: 'Caveat', cursive;
font-size: 20px;
color: var(--graphite);
margin-bottom: 12px;
}
footer.act-invitation-footer .invitation-contact {
display: flex;
gap: 30px;
justify-content: center;
flex-wrap: wrap;
}
footer.act-invitation-footer .invitation-contact a {
font-family: 'Open Sans', 'Inter', sans-serif;
font-size: 14px;
color: var(--ink);
text-decoration: none;
transition: color 0.3s;
}
footer.act-invitation-footer .invitation-contact a:hover {
color: var(--teal);
}
/* Footer Bottom Row */
.footer-bottom-row {
max-width: 1200px;
margin: 0 auto;
display: flex;
align-items: center;
justify-content: space-between;
padding-top: 40px;
border-top: 1px solid rgba(0,0,0,0.08);
flex-wrap: wrap;
gap: 30px;
}
.footer-cta {
flex-shrink: 0;
}
.book-call-btn {
display: inline-block;
background: var(--lime);
color: var(--ink);
text-decoration: none;
padding: 14px 36px;
border-radius: 6px;
font-family: 'Open Sans', 'Inter', sans-serif;
font-weight: 700;
font-size: 14px;
letter-spacing: 0.08em;
transition: transform 0.3s, box-shadow 0.3s;
}
.book-call-btn:hover {
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(197, 217, 61, 0.4);
}
/* Social Icons */
.footer-social {
display: flex;
gap: 20px;
align-items: center;
justify-content: center;
flex: 1;
}
.social-link {
display: block;
width: 60px;
height: 60px;
transition: transform 0.4s var(--ease-breath);
}
.social-link:hover {
transform: scale(1.1) rotate(-5deg);
}
.social-link img {
width: 100%;
height: 100%;
object-fit: contain;
}
/* Legal Section */
.footer-legal {
text-align: right;
flex-shrink: 0;
}
.copyright {
font-family: 'Open Sans', 'Inter', sans-serif;
font-size: 13px;
font-weight: 500;
color: var(--ink);
margin-bottom: 10px;
}
.legal-links {
display: flex;
flex-direction: column;
gap: 6px;
align-items: flex-end;
}
.legal-links a {
font-family: 'Open Sans', 'Inter', sans-serif;
font-size: 12px;
color: #666;
text-decoration: none;
transition: color 0.3s;
}
.legal-links a:hover {
color: var(--ink);
}
/* Mobile responsive */
@media (max-width: 800px) {
footer.act-invitation-footer {
padding: 60px 24px 40px;
}
.invitation-top {
margin-bottom: 50px;
}
footer.act-invitation-footer .invitation-form {
flex-direction: column;
}
.footer-bottom-row {
flex-direction: column;
text-align: center;
gap: 30px;
}
.footer-legal {
text-align: center;
}
.legal-links {
align-items: center;
}
}
/* ================================================================
FLOATING "BREATHE WITH ME" BUTTON
================================================================ */
.breathe-fab {
position: fixed;
bottom: 32px; right: 32px;
width: 72px; height: 72px;
border-radius: 50%;
background: var(--paper);
box-shadow: 0 12px 30px rgba(0,0,0,0.15);
cursor: none;
z-index: 50;
display: flex;
align-items: center;
justify-content: center;
border: none;
transition: transform 0.5s var(--ease-breath);
}
.breathe-fab::before {
content: '';
position: absolute;
inset: 8px;
border-radius: 50%;
background: var(--luua-gradient);
animation: breatheFab 4s infinite ease-in-out;
}
.breathe-fab::after {
content: '';
position: absolute;
inset: -4px;
border-radius: 50%;
background: var(--luua-gradient);
filter: blur(16px);
opacity: 0.4;
animation: breatheFab 4s infinite ease-in-out;
z-index: -1;
}
@keyframes breatheFab {
0%, 100% { transform: scale(0.85); }
50% { transform: scale(1); }
}
.breathe-fab-icon {
position: relative;
z-index: 2;
color: white;
font-family: 'Kalam', cursive;
font-size: 10px;
font-weight: 700;
text-align: center;
line-height: 1;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.breathe-fab:hover { transform: scale(1.08); }
/* Breath overlay */
.breath-overlay {
position: fixed;
inset: 0;
background: rgba(26, 26, 26, 0.9);
backdrop-filter: blur(20px);
z-index: 200;
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
pointer-events: none;
transition: opacity 0.6s var(--ease-breath);
}
.breath-overlay.active {
opacity: 1;
pointer-events: auto;
}
.breath-close {
position: absolute;
top: 32px; right: 32px;
background: none;
border: 1.5px solid rgba(255,255,255,0.3);
color: white;
width: 44px; height: 44px;
border-radius: 50%;
cursor: none;
font-size: 20px;
display: flex; align-items: center; justify-content: center;
}
.breath-content { text-align: center; color: white; }
.breath-title {
font-family: 'Fraunces', serif;
font-style: italic;
font-size: 28px;
margin-bottom: 60px;
font-weight: 300;
}
.breath-orb {
width: 220px; height: 220px;
margin: 0 auto 40px;
border-radius: 50%;
background: radial-gradient(circle, rgba(196, 216, 46, 0.6), rgba(168, 85, 247, 0.4), transparent 70%);
display: flex;
align-items: center;
justify-content: center;
transition: transform 4s var(--ease-breath);
}
.breath-orb.inhale { transform: scale(1.4); }
.breath-instruction {
font-family: 'Fraunces', serif;
font-size: 40px;
font-weight: 300;
font-style: italic;
letter-spacing: 0.02em;
min-height: 60px;
}
.breath-timer {
font-family: 'Caveat', cursive;
font-size: 24px;
margin-top: 24px;
color: rgba(255,255,255,0.6);
}
/* ================================================================
RESPONSIVE
================================================================ */
@media (max-width: 1200px) {
.nav-links { gap: 22px; }
.nav-links a { font-size: 14px; }
}
@media (max-width: 1100px) {
.ecosystem-grid { grid-template-columns: 1fr; max-width: 500px; }
.eco-card { transform: rotate(0) !important; }
.product-card { transform: rotate(0) !important; }
.testimonial { transform: rotate(0) !important; }
.polaroid { transform: none !important; position: relative !important; top: auto !important; left: auto !important; right: auto !important; bottom: auto !important; width: 100% !important; max-width: 340px; margin: 0 auto 20px; }
.value-visual { display: flex; flex-direction: column; align-items: center; aspect-ratio: auto; }
.ripple-layout, .value-layout, .app-layout { grid-template-columns: 1fr; gap: 60px; }
.outcomes-grid, .fundraising-headline-group { grid-template-columns: 1fr; gap: 40px; }
.segments-grid { grid-template-columns: repeat(2, 1fr); }
.testimonials-wall { grid-template-columns: repeat(6, 1fr); }
.testimonial-4, .testimonial-5, .testimonial-6, .testimonial-7 { margin-top: 20px; }
.testimonial-1 { grid-column: 1 / 4; }
.testimonial-2 { grid-column: 4 / 7; }
.testimonial-3 { grid-column: 1 / 4; }
.testimonial-4 { grid-column: 4 / 7; }
.testimonial-5 { grid-column: 1 / 4; }
.testimonial-6 { grid-column: 4 / 7; }
.testimonial-7 { grid-column: 2 / 6; }
.shop-diorama { grid-template-columns: repeat(6, 1fr); }
.product-1 { grid-column: 1 / 4; grid-row: 1 / 4; }
.product-2 { grid-column: 4 / 7; grid-row: 1 / 3; }
.product-3 { grid-column: 1 / 4; grid-row: 4 / 7; }
.product-4 { grid-column: 4 / 7; grid-row: 3 / 5; }
.product-5 { grid-column: 1 / 4; grid-row: 7 / 9; }
.product-6 { grid-column: 4 / 7; grid-row: 5 / 8; }
.product-7 { grid-column: 1 / 7; grid-row: 9 / 11; }
.product-8 { grid-column: 1 / 7; grid-row: 11 / 13; }
.fundraising-steps { grid-template-columns: repeat(2, 1fr); }
.fundraising-steps::before { display: none; }
}
@media (max-width: 820px) {
.nav-links { display: none; }
nav.top-nav { padding: 10px 16px 10px 20px; }
}
@media (max-width: 680px) {
nav.top-nav { padding: 10px 14px 10px 18px; width: calc(100% - 24px); }
.nav-tools button span { display: none; }
.hero-logo-big { font-size: 30vw; }
.act-arrival, .act-tension, .act-promise, .act-ecosystem, .act-ripple,
.act-outcomes, .act-shop, .act-value, .act-segments, .act-fundraising,
.act-testimonials, .act-app, .act-invitation { padding-left: 20px; padding-right: 20px; }
.segments-grid { grid-template-columns: 1fr; }
.fundraising-banner { flex-direction: column; padding: 40px 24px; text-align: center; }
.invitation-form { flex-direction: column; }
.footer-top { grid-template-columns: 1fr 1fr; }
.testimonials-wall { grid-template-columns: 1fr; }
.testimonial-1,.testimonial-2,.testimonial-3,.testimonial-4,
.testimonial-5,.testimonial-6,.testimonial-7 { grid-column: 1; margin-top: 0; }
.shop-diorama { grid-template-columns: 1fr; }
.product-card { grid-column: 1 !important; grid-row: auto !important; min-height: 240px; }
.app-features { grid-template-columns: 1fr; }
}