:root {
color-scheme: light dark;
--sky-top: #fff6e0;
--sky-bottom: #e3f4ff;
--surface: #ffffff;
--surface-edge: #ffffff;
--ink: #2b1b3d;
--ink-muted: #5e5470;
--petal: #ffffff;
--center: #ffc93c;
--glow: #ffe58a;
--shadow-tint: #2b1b3d;
--accent-daisy: #ffc93c;
--accent-berry: #ff5c8a;
--accent-sky: #3db8ff;
--accent-leaf: #5ed37a;
--accent-tangerine: #ff8a3d;
--accent-grape: #7c4dff;
--button-ink: #2b1b3d;
--button-ink-on-grape: #ffffff;
--center-deep: #f7a21b;
--petal-shade: #efe7fb;
--petal-line: #cbbde3;
--face-ink: #2b1b3d;
--cheek: #ff8fab;
--sparkle: #ffffff;
--stem: #45b866;
--stem-deep: #2f9a52;
--title-outline: #2b1b3d;
--title-glow: transparent;
--sun: #ffe9a8;
--hill-far: #c6efb6;
--hill-near: #99de8f;
--hill-shade: #7ccf7a;
--ground: #8fd98a;
--ground-ink: #2b1b3d;
--star: #ffffff;
--blob-strength: 0.55;
--scenery-daisy-glow: 0;
--ambient-opacity: 0.85;
--font-display: "Fredoka", "Fredoka Fallback", ui-rounded, system-ui, sans-serif;
--font-body: "Nunito", "Nunito Fallback", ui-rounded, system-ui, sans-serif;
--text-title: clamp(2.75rem, 1.9rem + 4.25vw, 4.5rem);
--text-tagline: clamp(1.125rem, 1.05rem + 0.4vw, 1.375rem);
--text-intro: clamp(1rem, 0.96rem + 0.2vw, 1.125rem);
--text-game: clamp(1.375rem, 1.33rem + 0.2vw, 1.5rem);
--text-body: 1rem;
--text-button: 1.125rem;
--text-small: 1rem;
--radius-card: 24px;
--radius-media: 16px;
--radius-panel: 28px;
--radius-pill: 999px;
--edge: 6px;
--button-depth: 5px;
--card-max: 380px;
--gap: clamp(1.25rem, 0.9rem + 1.6vw, 2rem);
--gutter: clamp(1rem, 0.5rem + 2.5vw, 3rem);
--ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
--ease-out: cubic-bezier(0.22, 1, 0.36, 1);
--ease-in-out: cubic-bezier(0.45, 0, 0.55, 1);
--dur-fast: 150ms;
--dur-med: 300ms;
--dur-slow: 600ms;
--dur-reduced: 150ms;
--stagger-title: 40ms;
--stagger-card: 70ms;
--stagger-regrow: 30ms;
--dur-drift-min: 18s;
--dur-drift-max: 30s;
--dur-wander-min: 6s;
--dur-wander-max: 12s;
--dur-pulse-min: 2s;
--dur-pulse-max: 4s;
--dur-blob: 70s;
--dur-sway: 4s;
--dur-blink: 120ms;
--blink-gap-min: 4s;
--blink-gap-max: 9s;
--dur-pluck: 1.2s;
--dur-delighted: 1s;
--dur-burst: 520ms;
--dur-steam: 1.5s;
--dur-shine: 5s;
--dur-wiggle: 420ms;
--lift: -8px;
--tilt-max: 6deg;
--media-zoom: 1.04;
}
@media (prefers-color-scheme: dark) {
:root {
--sky-top: #1b1438;
--sky-bottom: #0e2a3a;
--surface: #2a2150;
--surface-edge: #3a2f6b;
--ink: #fff6e0;
--ink-muted: #c9bfe0;
--petal: #f4eeff;
--center: #ffd65c;
--glow: #ffe58a;
--shadow-tint: #000000;
--center-deep: #f5a524;
--petal-shade: #ddd2f5;
--petal-line: #8e7fc0;
--cheek: #ff8fab;
--stem: #3faa5f;
--stem-deep: #2a8a4c;
--title-outline: #120b2b;
--title-glow: #ffe58a59;
--sun: #3a2f6b;
--hill-far: #22305a;
--hill-near: #1a2c4a;
--hill-shade: #15253f;
--ground: #132a3c;
--ground-ink: #fff6e0;
--star: #fff6e0;
--blob-strength: 0.35;
--scenery-daisy-glow: 1;
--ambient-opacity: 1;
}
}
@font-face {
font-family: "Fredoka";
font-style: normal;
font-weight: 300 700;
font-display: swap;
src: url("/assets/fonts/fredoka.99d6c78e04.woff2") format("woff2");
unicode-range:
U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191,
U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: "Nunito";
font-style: normal;
font-weight: 200 1000;
font-display: swap;
src: url("/assets/fonts/nunito.ba344451ea.woff2") format("woff2");
unicode-range:
U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191,
U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: "Fredoka Fallback";
src: local("Arial"), local("Helvetica"), local("Arimo"), local("Liberation Sans");
size-adjust: 101.99%;
ascent-override: 95.5%;
descent-override: 23.14%;
line-gap-override: 0%;
}
@font-face {
font-family: "Nunito Fallback";
src: local("Arial"), local("Helvetica"), local("Arimo"), local("Liberation Sans");
size-adjust: 98.06%;
ascent-override: 103.1%;
descent-override: 36%;
line-gap-override: 0%;
}
*,
*::before,
*::after {
box-sizing: border-box;
}
html {
-webkit-text-size-adjust: 100%;
text-size-adjust: 100%;
}
body {
margin: 0;
min-height: 100vh;
min-height: 100dvh;
display: flex;
flex-direction: column;
background: var(--sky-bottom);
color: var(--ink);
font-family: var(--font-body);
font-size: var(--text-body);
font-weight: 500;
line-height: 1.5;
overflow-x: clip;
}
h1,
h2,
p {
margin: 0;
}
img,
svg {
display: block;
max-width: 100%;
}
a {
color: inherit;
}
.visually-hidden {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
border: 0;
}
:focus-visible {
outline: 3px solid var(--ink);
outline-offset: 2px;
box-shadow: 0 0 0 2px var(--surface);
}
:focus:not(:focus-visible) {
outline: none;
}
.text-link {
color: var(--ground-ink);
font-weight: 700;
text-decoration-line: underline;
text-decoration-style: wavy;
text-decoration-color: var(--accent-berry);
text-decoration-thickness: 2px;
text-underline-offset: 0.3em;
border-radius: 4px;
&:hover {
text-decoration-style: solid;
}
& .icon-external {
display: inline-block;
width: 0.85em;
height: 0.85em;
margin-inline-start: 0.3em;
vertical-align: -0.05em;
}
}
.accent-daisy {
--accent: var(--accent-daisy);
--accent-ink: var(--button-ink);
}
.accent-berry {
--accent: var(--accent-berry);
--accent-ink: var(--button-ink);
}
.accent-sky {
--accent: var(--accent-sky);
--accent-ink: var(--button-ink);
}
.accent-leaf {
--accent: var(--accent-leaf);
--accent-ink: var(--button-ink);
}
.accent-tangerine {
--accent: var(--accent-tangerine);
--accent-ink: var(--button-ink);
}
.accent-grape {
--accent: var(--accent-grape);
--accent-ink: var(--button-ink-on-grape);
}
.i-0 {
--i: 0;
}
.i-1 {
--i: 1;
}
.i-2 {
--i: 2;
}
.i-3 {
--i: 3;
}
.i-4 {
--i: 4;
}
.i-5 {
--i: 5;
}
.i-6 {
--i: 6;
}
.i-7 {
--i: 7;
}
.i-8 {
--i: 8;
}
.i-9 {
--i: 9;
}
.i-10 {
--i: 10;
}
.i-11 {
--i: 11;
}
.i-12 {
--i: 12;
}
.i-13 {
--i: 13;
}
.i-14 {
--i: 14;
}
.i-15 {
--i: 15;
}
.i-16 {
--i: 16;
}
.i-17 {
--i: 17;
}
.i-18 {
--i: 18;
}
.i-19 {
--i: 19;
}
.i-20 {
--i: 20;
}
.i-21 {
--i: 21;
}
.i-22 {
--i: 22;
}
.i-23 {
--i: 23;
}
.fill-petal {
fill: var(--petal);
}
.fill-center {
fill: var(--center);
}
.fill-center-deep {
fill: var(--center-deep);
}
.fill-face-ink {
fill: var(--face-ink);
}
.fill-cheek {
fill: var(--cheek);
}
.fill-sparkle {
fill: var(--sparkle);
}
.fill-stem {
fill: var(--stem);
}
.fill-hill-far {
fill: var(--hill-far);
}
.fill-hill-near {
fill: var(--hill-near);
}
.fill-hill-shade {
fill: var(--hill-shade);
}
.stroke-petal-line {
stroke: var(--petal-line);
}
.stroke-center-deep {
stroke: var(--center-deep);
}
.stroke-face-ink {
stroke: var(--face-ink);
}
.stroke-stem {
stroke: var(--stem);
}
.stroke-stem-deep {
stroke: var(--stem-deep);
}
.stop-petal {
stop-color: var(--petal);
}
.stop-petal-shade {
stop-color: var(--petal-shade);
}
.stop-center {
stop-color: var(--center);
}
.stop-center-deep {
stop-color: var(--center-deep);
}
.stop-glow {
stop-color: var(--glow);
}
.stop-shadow-tint {
stop-color: var(--shadow-tint);
}
.sky {
position: fixed;
inset: 0;
z-index: -1;
overflow: hidden;
pointer-events: none;
background: linear-gradient(to bottom, var(--sky-top), var(--sky-bottom));
}
.blob {
position: absolute;
width: 70vmax;
aspect-ratio: 1;
border-radius: 50%;
opacity: var(--blob-strength);
background: radial-gradient(closest-side, color-mix(in srgb, var(--blob-color) 60%, transparent), transparent);
animation: blob-drift var(--dur-blob) var(--ease-in-out) infinite alternate;
}
.blob-1 {
--blob-color: var(--accent-daisy);
top: -30vmax;
left: -22vmax;
}
.blob-2 {
--blob-color: var(--accent-berry);
top: 18vh;
right: -38vmax;
animation-delay: calc(var(--dur-blob) * -0.4);
}
.blob-3 {
--blob-color: var(--accent-sky);
bottom: -40vmax;
left: 5vw;
animation-delay: calc(var(--dur-blob) * -0.75);
}
@keyframes blob-drift {
from {
transform: translate(0, 0) scale(1);
}
to {
transform: translate(7vmax, 5vmax) scale(1.1);
}
}
.main {
position: relative;
flex: 1;
overflow: clip;
}
.main > :not(.ambient) {
position: relative;
z-index: 1;
}
.ambient {
position: sticky;
top: 0;
height: 100vh;
margin-bottom: -100vh;
overflow: hidden;
pointer-events: none;
opacity: var(--ambient-opacity);
}
.drift {
--dur: calc(var(--dur-drift-min) + (var(--dur-drift-max) - var(--dur-drift-min)) * var(--t));
position: absolute;
top: -10vh;
left: var(--x);
width: var(--size);
height: calc(var(--size) * 1.8);
border-radius: 50% 50% 50% 50% / 70% 70% 30% 30%;
background:
linear-gradient(to right, transparent 46%, color-mix(in srgb, var(--petal-line) 45%, transparent) 50%, transparent 54%) center 15% /
100% 60% no-repeat,
linear-gradient(to bottom, var(--petal) 40%, var(--petal-shade));
box-shadow:
0 0 0 1px color-mix(in srgb, var(--petal-line) 60%, transparent),
0 3px 8px color-mix(in srgb, var(--shadow-tint) 10%, transparent);
opacity: var(--o);
animation: petal-drift var(--dur) linear infinite;
animation-delay: calc(var(--dur) * var(--phase) * -1);
}
.drift:nth-child(1) {
--x: 4%;
--size: 16px;
--o: 0.85;
--t: 0.2;
--phase: 0.1;
--y: 12%;
--r: 30deg;
}
.drift:nth-child(2) {
--x: 22%;
--size: 12px;
--o: 0.7;
--t: 0.7;
--phase: 0.55;
--y: 48%;
--r: -40deg;
}
.drift:nth-child(3) {
--x: 46%;
--size: 18px;
--o: 0.8;
--t: 0.45;
--phase: 0.3;
--y: 78%;
--r: 75deg;
}
.drift:nth-child(4) {
--x: 66%;
--size: 14px;
--o: 0.75;
--t: 0.9;
--phase: 0.8;
--y: 22%;
--r: -15deg;
}
.drift:nth-child(5) {
--x: 84%;
--size: 17px;
--o: 0.85;
--t: 0.35;
--phase: 0.05;
--y: 62%;
--r: 120deg;
}
.drift:nth-child(6) {
--x: 12%;
--size: 11px;
--o: 0.6;
--t: 1;
--phase: 0.68;
--y: 88%;
--r: 200deg;
}
.drift:nth-child(7) {
--x: 34%;
--size: 15px;
--o: 0.8;
--t: 0.1;
--phase: 0.9;
--y: 8%;
--r: -70deg;
}
.drift:nth-child(8) {
--x: 56%;
--size: 13px;
--o: 0.7;
--t: 0.6;
--phase: 0.42;
--y: 36%;
--r: 160deg;
}
.drift:nth-child(9) {
--x: 76%;
--size: 19px;
--o: 0.85;
--t: 0.25;
--phase: 0.2;
--y: 92%;
--r: 20deg;
}
.drift:nth-child(10) {
--x: 92%;
--size: 12px;
--o: 0.65;
--t: 0.8;
--phase: 0.6;
--y: 40%;
--r: -110deg;
}
.drift:nth-child(11) {
--x: 28%;
--size: 16px;
--o: 0.75;
--t: 0.55;
--phase: 0.75;
--y: 70%;
--r: 95deg;
}
.drift:nth-child(12) {
--x: 60%;
--size: 14px;
--o: 0.8;
--t: 0.15;
--phase: 0.95;
--y: 58%;
--r: -160deg;
}
@media (max-width: 639px) {
.drift:nth-child(n + 7) {
display: none;
}
}
@keyframes petal-drift {
0% {
transform: translate(0, 0) rotate(0deg);
}
25% {
transform: translate(9vw, 30vh) rotate(100deg);
}
50% {
transform: translate(6vw, 60vh) rotate(190deg);
}
75% {
transform: translate(17vw, 90vh) rotate(260deg);
}
100% {
transform: translate(14vw, 122vh) rotate(360deg);
}
}
@media (prefers-color-scheme: dark) {
.drift {
--wander: calc(var(--dur-wander-min) + (var(--dur-wander-max) - var(--dur-wander-min)) * var(--t));
--pulse: calc(var(--dur-pulse-min) + (var(--dur-pulse-max) - var(--dur-pulse-min)) * var(--phase));
top: var(--y);
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--glow);
box-shadow:
0 0 8px 2px color-mix(in srgb, var(--glow) 70%, transparent),
0 0 22px 8px color-mix(in srgb, var(--glow) 22%, transparent);
animation:
firefly-wander var(--wander) var(--ease-in-out) infinite alternate,
firefly-pulse var(--pulse) var(--ease-in-out) infinite alternate;
animation-delay: calc(var(--wander) * var(--phase) * -1), calc(var(--pulse) * var(--t) * -1);
}
}
@keyframes firefly-wander {
0% {
transform: translate(0, 0);
}
35% {
transform: translate(26px, -20px);
}
70% {
transform: translate(-14px, -38px);
}
100% {
transform: translate(20px, 14px);
}
}
@keyframes firefly-pulse {
from {
opacity: 0.12;
}
to {
opacity: 1;
}
}
.site-header {
position: relative;
isolation: isolate;
padding: clamp(1.25rem, 0.6rem + 2.5vw, 2.75rem) var(--gutter) clamp(2.25rem, 1rem + 4vw, 5rem);
text-align: center;
}
.header-scene {
position: absolute;
inset: 0;
z-index: -1;
overflow: hidden;
pointer-events: none;
}
.sun {
position: absolute;
top: -40%;
left: 50%;
width: min(110vw, 900px);
aspect-ratio: 1;
translate: -50% 0;
border-radius: 50%;
background: radial-gradient(closest-side, var(--sun), color-mix(in srgb, var(--sun) 40%, transparent) 55%, transparent);
}
.stars {
position: absolute;
inset: 0 0 35%;
opacity: 0;
background:
radial-gradient(circle, var(--star) 0 1.2px, transparent 2px) 8% 18% / 3px 3px no-repeat,
radial-gradient(circle, var(--star) 0 1px, transparent 2px) 21% 52% / 3px 3px no-repeat,
radial-gradient(circle, var(--star) 0 1.4px, transparent 2px) 33% 12% / 4px 4px no-repeat,
radial-gradient(circle, var(--star) 0 1px, transparent 2px) 72% 22% / 3px 3px no-repeat,
radial-gradient(circle, var(--star) 0 1.4px, transparent 2px) 86% 48% / 4px 4px no-repeat,
radial-gradient(circle, var(--star) 0 1px, transparent 2px) 93% 10% / 3px 3px no-repeat,
radial-gradient(circle, var(--star) 0 1px, transparent 2px) 58% 6% / 3px 3px no-repeat,
radial-gradient(circle, var(--star) 0 1.2px, transparent 2px) 14% 70% / 3px 3px no-repeat;
}
@media (prefers-color-scheme: dark) {
.stars {
opacity: 0.8;
}
}
.meadow {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: clamp(110px, 60px + 12vw, 230px);
mask-image: linear-gradient(to bottom, var(--ink) 45%, transparent 98%);
}
.meadow-daisies {
filter: drop-shadow(
0 0 calc(6px * var(--scenery-daisy-glow)) color-mix(in srgb, var(--glow) calc(var(--scenery-daisy-glow) * 80%), transparent)
);
}
.masthead {
display: grid;
justify-items: center;
}
.logo-wrap {
width: clamp(84px, 58px + 7vw, 140px);
aspect-ratio: 1;
margin-bottom: clamp(-0.5rem, -0.2rem - 0.5vw, -0.2rem);
}
.daisy--header {
width: 100%;
height: 100%;
overflow: visible;
filter: drop-shadow(0 6px 10px color-mix(in srgb, var(--shadow-tint) 14%, transparent));
}
.title {
font-family: var(--font-display);
font-size: var(--text-title);
font-weight: 700;
line-height: 1.04;
letter-spacing: 0.01em;
padding: 0.06em 0.1em 0.12em;
}
.word {
display: inline-block;
white-space: nowrap;
}
.letter {
display: inline-block;
color: var(--letter);
-webkit-text-stroke: 0.15em var(--title-outline);
paint-order: stroke fill;
text-shadow:
0 0.08em 0 var(--title-outline),
0 0.16em 0.22em color-mix(in srgb, var(--shadow-tint) 22%, transparent),
0 0 0.5em var(--title-glow);
animation: letter-pop var(--dur-slow) var(--ease-spring) backwards;
animation-delay: calc(var(--dur-fast) + var(--i) * var(--stagger-title));
}
.letter:nth-child(3n + 1) {
rotate: -4deg;
translate: 0 0.02em;
}
.letter:nth-child(3n + 2) {
rotate: 3deg;
translate: 0 -0.04em;
}
.letter:nth-child(3n) {
rotate: -1deg;
translate: 0 0.03em;
}
.t-daisy {
--letter: var(--accent-daisy);
}
.t-berry {
--letter: var(--accent-berry);
}
.t-sky {
--letter: var(--accent-sky);
}
.t-leaf {
--letter: var(--accent-leaf);
}
.t-tangerine {
--letter: var(--accent-tangerine);
}
.t-grape {
--letter: var(--accent-grape);
}
@keyframes letter-pop {
from {
opacity: 0;
transform: translateY(0.5em) scale(0.5);
}
60% {
opacity: 1;
}
to {
transform: none;
}
}
.tagline {
margin-top: clamp(0.15rem, 0.1rem + 0.4vw, 0.5rem);
font-size: var(--text-tagline);
font-weight: 700;
color: var(--ink);
animation: rise-in var(--dur-slow) var(--ease-out) backwards;
animation-delay: calc(var(--dur-slow) + var(--dur-fast));
}
.daisy--header {
animation: logo-arrive var(--dur-slow) var(--ease-spring) backwards;
}
@keyframes logo-arrive {
from {
opacity: 0;
transform: scale(0.6) rotate(-20deg);
}
}
@keyframes rise-in {
from {
opacity: 0;
transform: translateY(10px);
}
}
.coffee-pill {
position: absolute;
top: clamp(0.75rem, 0.5rem + 1vw, 1.25rem);
right: var(--gutter);
z-index: 2;
display: inline-flex;
align-items: center;
gap: 0.4rem;
min-height: 44px;
padding: 0.35rem 0.85rem 0.35rem 0.6rem;
border-radius: var(--radius-pill);
background: var(--accent-daisy);
color: var(--button-ink);
font-family: var(--font-display);
font-size: 1rem;
font-weight: 600;
text-decoration: none;
box-shadow:
0 3px 0 color-mix(in oklab, var(--accent-daisy) 70%, var(--shadow-tint)),
0 8px 16px -6px color-mix(in srgb, var(--shadow-tint) 30%, transparent);
transition: translate var(--dur-fast) var(--ease-out);
& .icon-coffee {
width: 1.6rem;
height: 1.6rem;
overflow: visible;
}
& .icon-external {
width: 0.8rem;
height: 0.8rem;
}
&:active {
translate: 0 2px;
}
}
@media (max-width: 559px) {
.coffee-pill {
padding-inline: 0.55rem;
}
.coffee-pill-label {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
}
}
.intro {
width: min(100% - 2 * var(--gutter), 38rem);
margin: clamp(-1.25rem, -0.4rem - 1.5vw, -0.5rem) auto clamp(1.75rem, 1rem + 2.5vw, 3rem);
padding: 0.75rem 1.4rem;
border-radius: var(--radius-panel);
background: var(--surface);
color: var(--ink);
font-size: var(--text-intro);
font-weight: 600;
line-height: 1.45;
text-align: center;
text-wrap: balance;
box-shadow:
0 0 0 1px color-mix(in srgb, var(--shadow-tint) 6%, transparent),
0 8px 20px -10px color-mix(in srgb, var(--shadow-tint) 30%, transparent);
animation: rise-in var(--dur-slow) var(--ease-out) backwards;
animation-delay: calc(var(--dur-slow) + var(--dur-med));
}
.game-grid {
--cols: 1;
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: calc(var(--gap) + 0.5rem) var(--gap);
max-width: calc(var(--cols) * var(--card-max) + (var(--cols) - 1) * var(--gap) + 2 * var(--gutter));
margin: 0 auto;
padding: 0.75rem var(--gutter) clamp(3rem, 2rem + 4vw, 5rem);
list-style: none;
}
@media (min-width: 640px) {
.game-grid {
--cols: 2;
}
}
@media (min-width: 1024px) {
.game-grid {
--cols: 3;
}
}
@media (min-width: 1600px) {
.game-grid {
--cols: 4;
}
}
.card-slot {
display: flex;
flex: 0 1 calc((100% - (var(--cols) - 1) * var(--gap)) / var(--cols));
min-width: 0;
animation: pop-in var(--dur-slow) var(--ease-spring) backwards;
animation-delay: calc(var(--dur-med) + min(var(--i), 8) * var(--stagger-card));
}
.card-slot.is-waiting {
animation: none;
opacity: 0;
}
.card-slot.is-revealed {
animation: pop-in var(--dur-slow) var(--ease-spring) backwards;
animation-delay: calc(var(--j, 0) * var(--stagger-card));
}
@keyframes pop-in {
from {
opacity: 0;
transform: translateY(16px) scale(0.9);
}
}
.card {
--angle: -1deg;
position: relative;
display: flex;
flex: 1;
flex-direction: column;
min-width: 0;
padding: 8px;
border: var(--edge) solid var(--surface-edge);
border-radius: var(--radius-card);
background: var(--surface);
box-shadow:
0 0 0 1px color-mix(in srgb, var(--shadow-tint) 7%, transparent),
0 2px 0 color-mix(in srgb, var(--shadow-tint) 6%, transparent),
0 10px 18px -8px color-mix(in srgb, var(--shadow-tint) 22%, transparent),
0 24px 40px -22px color-mix(in srgb, var(--shadow-tint) 34%, transparent);
rotate: var(--angle);
transform: perspective(900px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg));
transition:
rotate var(--dur-med) var(--ease-spring),
translate var(--dur-med) var(--ease-spring),
transform var(--dur-med) var(--ease-out);
}
.card-slot:nth-child(4n + 2) .card {
--angle: 0.75deg;
}
.card-slot:nth-child(4n + 3) .card {
--angle: -0.5deg;
}
.card-slot:nth-child(4n + 4) .card {
--angle: 1deg;
}
.card::after {
content: "";
position: absolute;
inset: calc(-1 * var(--edge));
z-index: -1;
border-radius: inherit;
box-shadow:
0 26px 44px -16px color-mix(in srgb, var(--accent) 75%, transparent),
0 12px 22px -12px color-mix(in srgb, var(--shadow-tint) 34%, transparent);
opacity: 0;
transition: opacity var(--dur-med) var(--ease-out);
pointer-events: none;
}
.card-media {
position: relative;
overflow: hidden;
aspect-ratio: 16 / 9;
border-radius: var(--radius-media);
background: color-mix(in srgb, var(--accent) 30%, var(--surface));
isolation: isolate;
& img {
width: 100%;
height: 100%;
object-fit: cover;
transition: scale var(--dur-med) var(--ease-out);
}
}
.card-media-link {
position: absolute;
inset: 0;
z-index: 2;
}
.card-shine {
position: absolute;
top: -60%;
left: -40%;
z-index: 1;
width: 180%;
aspect-ratio: 1;
background: radial-gradient(closest-side, color-mix(in srgb, var(--sparkle) 42%, transparent), transparent 65%);
opacity: 0;
translate: var(--shine-x, 0) var(--shine-y, 0);
transition: opacity var(--dur-med) var(--ease-out);
pointer-events: none;
}
.card-body {
display: flex;
flex: 1;
flex-direction: column;
gap: 0.35rem;
padding: 0.85rem 0.45rem 0.25rem;
}
.card-title {
font-family: var(--font-display);
font-size: var(--text-game);
font-weight: 600;
line-height: 1.15;
color: var(--ink);
}
.card-desc {
margin-bottom: 0.85rem;
color: var(--ink-muted);
font-size: var(--text-body);
line-height: 1.45;
}
.card .btn {
margin-top: auto;
}
.card-flourish {
position: absolute;
top: -15px;
right: -13px;
z-index: 3;
width: 32px;
color: var(--accent);
rotate: 14deg;
filter: drop-shadow(0 2px 0 color-mix(in srgb, var(--shadow-tint) 25%, transparent));
transition:
rotate var(--dur-slow) var(--ease-spring),
scale var(--dur-slow) var(--ease-spring);
pointer-events: none;
}
.badge-new {
position: absolute;
top: -14px;
left: -14px;
z-index: 3;
display: grid;
place-items: center;
width: 62px;
aspect-ratio: 1;
overflow: hidden;
border: 3px solid var(--surface);
border-radius: 50%;
background: var(--accent);
color: var(--accent-ink);
font-family: var(--font-display);
font-size: 1.05rem;
font-weight: 700;
line-height: 1;
rotate: -14deg;
box-shadow:
inset 0 0 0 3px var(--accent),
inset 0 0 0 4.5px color-mix(in srgb, var(--accent-ink) 35%, transparent),
0 4px 10px -2px color-mix(in srgb, var(--shadow-tint) 35%, transparent);
&::after {
content: "";
position: absolute;
inset: -30%;
background: linear-gradient(115deg, transparent 38%, color-mix(in srgb, var(--sparkle) 75%, transparent) 50%, transparent 62%);
translate: -110% 0;
animation: badge-shine var(--dur-shine) var(--ease-in-out) infinite;
}
}
.badge-text {
position: relative;
}
@keyframes badge-shine {
0%,
72% {
translate: -110% 0;
}
100% {
translate: 110% 0;
}
}
.is-coming-soon .card-media img {
filter: grayscale(0.5) saturate(0.85) blur(2.5px) brightness(1.04);
scale: 1.08;
}
.soon-veil {
position: absolute;
inset: 0;
display: grid;
place-items: center;
background: color-mix(in srgb, var(--surface) 30%, transparent);
&::before,
&::after {
content: "";
position: absolute;
background: color-mix(in srgb, var(--accent) 70%, var(--surface));
box-shadow: 0 0 0 2px color-mix(in srgb, var(--surface) 50%, transparent);
}
&::before {
inset: 0 auto 0 calc(50% - 14px);
width: 28px;
}
&::after {
inset: calc(50% - 14px) 0 auto;
height: 28px;
}
}
.soon-label {
position: relative;
z-index: 1;
padding: 0.4rem 1.1rem 0.45rem;
border: 2px dashed color-mix(in srgb, var(--accent) 60%, var(--ink));
border-radius: var(--radius-pill);
background: var(--surface);
color: var(--ink);
font-family: var(--font-display);
font-size: 1.35rem;
font-weight: 700;
rotate: -5deg;
box-shadow: 0 6px 14px -6px color-mix(in srgb, var(--shadow-tint) 40%, transparent);
}
.pill-soon {
margin-top: auto;
padding: 0.75rem 1rem;
border: 2px dashed color-mix(in srgb, var(--accent) 55%, var(--surface));
border-radius: var(--radius-pill);
background: color-mix(in srgb, var(--accent) 20%, var(--surface));
color: var(--ink);
font-family: var(--font-display);
font-size: var(--text-button);
font-weight: 600;
line-height: 1.2;
text-align: center;
cursor: default;
}
@media (hover: hover) and (pointer: fine) {
.card.is-live:hover::after {
opacity: 1;
}
}
.card.is-live:has(.btn-play:focus-visible)::after {
opacity: 1;
}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
.card.is-live:hover {
--angle: 0deg;
translate: 0 var(--lift);
}
.card.is-live:hover .card-media img {
scale: var(--media-zoom);
}
.card.is-live:hover .card-shine {
opacity: 1;
}
.card.is-live:hover .btn-play {
animation: wiggle var(--dur-wiggle) var(--ease-spring);
}
.card.is-live:hover .icon-play {
translate: 3px 0;
}
.card.is-live:hover .card-flourish {
rotate: 104deg;
scale: 1.15;
}
}
@media (prefers-reduced-motion: no-preference) {
.card.is-live:has(.btn-play:focus-visible) {
--angle: 0deg;
translate: 0 var(--lift);
}
}
.card.is-tilting {
transition:
rotate var(--dur-med) var(--ease-spring),
translate var(--dur-med) var(--ease-spring),
transform var(--dur-fast) var(--ease-out);
}
.btn {
--btn-color: var(--accent);
--btn-ink: var(--accent-ink);
position: relative;
display: block;
padding-bottom: var(--button-depth);
border-radius: var(--radius-pill);
color: var(--btn-ink);
text-decoration: none;
touch-action: manipulation;
-webkit-tap-highlight-color: transparent;
&::before {
content: "";
position: absolute;
inset: var(--button-depth) 0 0;
border-radius: inherit;
background: color-mix(in oklab, var(--btn-color) 68%, var(--shadow-tint));
box-shadow: 0 8px 16px -6px color-mix(in srgb, var(--btn-color) 60%, transparent);
}
&:focus-visible {
outline-offset: 3px;
}
}
.btn-face {
position: relative;
display: flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
min-height: 3rem;
padding: 0.65rem 1.4rem;
border-radius: inherit;
background: var(--btn-color);
color: var(--btn-ink);
font-family: var(--font-display);
font-size: var(--text-button);
font-weight: 600;
line-height: 1.1;
box-shadow:
inset 0 2px 0 color-mix(in srgb, var(--sparkle) 45%, transparent),
inset 0 -2px 0 color-mix(in srgb, var(--shadow-tint) 10%, transparent);
transition: transform var(--dur-med) var(--ease-spring);
& .icon {
flex: none;
width: 1.3rem;
height: 1.3rem;
transition: translate var(--dur-fast) var(--ease-spring);
}
}
.btn:active .btn-face {
transform: translateY(var(--button-depth)) scale(1.03, 0.93);
transition-duration: calc(var(--dur-fast) / 3);
}
@keyframes wiggle {
0% {
rotate: 0deg;
}
20% {
rotate: -3deg;
}
45% {
rotate: 2.5deg;
}
70% {
rotate: -1.5deg;
}
100% {
rotate: 0deg;
}
}
.btn-coffee {
--btn-color: var(--accent-daisy);
--btn-ink: var(--button-ink);
display: inline-block;
& .icon-coffee {
width: 1.7rem;
height: 1.7rem;
overflow: visible;
}
& .icon-external {
width: 0.9rem;
height: 0.9rem;
}
}
.btn-home {
--btn-color: var(--accent-sky);
--btn-ink: var(--button-ink);
display: inline-block;
}
.icon-coffee .wisp {
opacity: 0;
transform-box: fill-box;
transform-origin: center bottom;
}
@media (prefers-reduced-motion: no-preference) {
:is(.btn-coffee, .coffee-pill):is(:hover, :focus-visible) .wisp {
animation: steam var(--dur-steam) var(--ease-out) infinite;
}
:is(.btn-coffee, .coffee-pill):is(:hover, :focus-visible) .wisp-2 {
animation-delay: calc(var(--dur-steam) / -3);
}
:is(.btn-coffee, .coffee-pill):is(:hover, :focus-visible) .wisp-3 {
animation-delay: calc(var(--dur-steam) / -1.5);
}
}
@keyframes steam {
0% {
opacity: 0;
translate: 0 3px;
scale: 0.8 1;
}
35% {
opacity: 0.9;
}
100% {
opacity: 0;
translate: 0 -5px;
scale: 1.1 1;
}
}
.empty-state {
position: relative;
width: min(100% - 2 * var(--gutter), 560px);
margin: clamp(4.5rem, 3rem + 6vw, 7rem) auto clamp(3rem, 2rem + 4vw, 5rem);
}
.empty-daisy {
position: absolute;
top: 0;
left: 50%;
z-index: 0;
width: clamp(140px, 110px + 10vw, 196px);
aspect-ratio: 1;
translate: -50% -66%;
rotate: -6deg;
& .daisy {
width: 100%;
height: 100%;
overflow: visible;
}
}
.empty-card {
position: relative;
z-index: 1;
overflow: hidden;
padding: clamp(2.75rem, 2rem + 3vw, 3.75rem) clamp(1.25rem, 0.75rem + 2vw, 2.5rem) 0;
border: var(--edge) solid var(--surface-edge);
border-radius: var(--radius-card);
background: var(--surface);
text-align: center;
rotate: -0.75deg;
box-shadow:
0 0 0 1px color-mix(in srgb, var(--shadow-tint) 7%, transparent),
0 12px 22px -10px color-mix(in srgb, var(--shadow-tint) 24%, transparent),
0 30px 56px -26px color-mix(in srgb, var(--accent-daisy) 80%, transparent);
}
.empty-title {
font-family: var(--font-display);
font-size: clamp(1.6rem, 1.3rem + 1.4vw, 2.2rem);
font-weight: 700;
line-height: 1.12;
text-wrap: balance;
}
.empty-text {
max-width: 30ch;
margin: 0.6rem auto 0;
color: var(--ink-muted);
font-size: var(--text-intro);
text-wrap: balance;
}
.empty-garden {
display: flex;
align-items: flex-end;
justify-content: center;
gap: clamp(1.5rem, 1rem + 3vw, 3rem);
height: 76px;
margin-top: 1.4rem;
}
.seedling {
display: block;
width: 64px;
margin-bottom: -6px;
& .sprout {
width: 100%;
height: auto;
overflow: visible;
}
}
.seedling-1 {
width: 46px;
}
.seedling-3 {
width: 52px;
scale: -1 1;
}
.sprout-leaves {
transform-box: view-box;
transform-origin: 40px 40px;
animation: sway var(--dur-sway) var(--ease-in-out) infinite alternate;
}
.seedling-2 .sprout-leaves {
animation-delay: calc(var(--dur-sway) / -3);
}
.seedling-3 .sprout-leaves {
animation-delay: calc(var(--dur-sway) / -1.4);
}
.support {
width: min(100% - 2 * var(--gutter), 42rem);
margin: clamp(1rem, 0.5rem + 2vw, 2rem) auto clamp(4rem, 3rem + 4vw, 6rem);
}
.support-card {
position: relative;
padding: 3rem clamp(1.25rem, 0.75rem + 2vw, 2.5rem) 1.75rem;
border: var(--edge) solid var(--surface-edge);
border-radius: var(--radius-panel);
background: var(--surface);
text-align: center;
rotate: 0.5deg;
box-shadow:
0 0 0 1px color-mix(in srgb, var(--shadow-tint) 7%, transparent),
0 12px 24px -12px color-mix(in srgb, var(--shadow-tint) 26%, transparent);
}
.support-art {
position: absolute;
top: 0;
left: 50%;
display: grid;
place-items: center;
width: 76px;
aspect-ratio: 1;
translate: -50% -50%;
border: 4px solid var(--surface);
border-radius: 50%;
background: var(--accent-daisy);
color: var(--button-ink);
box-shadow: 0 8px 16px -6px color-mix(in srgb, var(--shadow-tint) 35%, transparent);
& .icon-coffee {
width: 44px;
height: 44px;
overflow: visible;
}
& .wisp {
opacity: 0.8;
}
}
.support-title {
font-family: var(--font-display);
font-size: clamp(1.4rem, 1.2rem + 1vw, 1.8rem);
font-weight: 700;
line-height: 1.15;
}
.support-pitch {
max-width: 34rem;
margin: 0.5rem auto 1.4rem;
color: var(--ink-muted);
text-wrap: pretty;
}
.site-footer {
position: relative;
z-index: 2;
margin-top: auto;
padding: 1.4rem var(--gutter) 1.6rem;
background: var(--ground);
color: var(--ground-ink);
text-align: center;
&::before {
content: "";
position: absolute;
right: 0;
bottom: calc(100% - 1px);
left: 0;
height: 18px;
background: radial-gradient(circle at 50% 100%, var(--ground) 0 68%, transparent 70%) 0 0 / 36px 18px repeat-x;
}
}
.footer-inner {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: 0.4rem 1.75rem;
font-size: var(--text-small);
font-weight: 600;
}
.footer-line {
display: inline-flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: 0.2rem 0.5rem;
}
.daisy-dot {
display: inline-block;
width: 1.1em;
height: 1.1em;
}
.lost {
display: grid;
flex: 1;
place-items: center;
padding: clamp(6rem, 4rem + 6vw, 8rem) var(--gutter) clamp(3rem, 2rem + 4vw, 5rem);
}
.lost-card {
position: relative;
width: min(100%, 30rem);
padding: clamp(4.5rem, 3.5rem + 3vw, 5.5rem) clamp(1.25rem, 0.75rem + 2vw, 2.5rem) 2rem;
border: var(--edge) solid var(--surface-edge);
border-radius: var(--radius-card);
background: var(--surface);
text-align: center;
rotate: 0.75deg;
box-shadow:
0 0 0 1px color-mix(in srgb, var(--shadow-tint) 7%, transparent),
0 12px 24px -12px color-mix(in srgb, var(--shadow-tint) 26%, transparent);
animation: pop-in var(--dur-slow) var(--ease-spring) backwards;
}
.lost-daisy {
position: absolute;
top: 0;
left: 50%;
width: clamp(130px, 110px + 6vw, 170px);
aspect-ratio: 1;
translate: -50% -58%;
rotate: 8deg;
& .daisy {
width: 100%;
height: 100%;
overflow: visible;
}
}
.lost-title {
font-family: var(--font-display);
font-size: clamp(1.6rem, 1.3rem + 1.4vw, 2.1rem);
font-weight: 700;
line-height: 1.15;
text-wrap: balance;
}
.lost-text {
margin: 0.5rem 0 1.5rem;
color: var(--ink-muted);
font-size: var(--text-intro);
}
.daisy .sway {
transform-box: view-box;
transform-origin: 120px 120px;
animation: sway var(--dur-sway) var(--ease-in-out) infinite alternate;
}
.daisy .sway-b {
animation-delay: calc(var(--dur-sway) / -2);
}
@keyframes sway {
from {
rotate: -3deg;
}
to {
rotate: 3deg;
}
}
.daisy .petal {
transform-box: view-box;
transform-origin: 120px 120px;
transition:
opacity var(--dur-fast) var(--ease-out),
scale var(--dur-fast) var(--ease-out);
}
.daisy .petal.is-plucked {
opacity: 0;
scale: 0.3;
}
.daisy.is-regrowing .petal {
animation: regrow var(--dur-slow) var(--ease-spring) backwards;
animation-delay: calc(var(--i, 0) * var(--stagger-regrow));
}
@keyframes regrow {
from {
opacity: 0;
scale: 0;
}
}
.daisy.is-regrowing {
animation: delighted-bounce var(--dur-slow) var(--ease-spring);
}
@keyframes delighted-bounce {
40% {
scale: 1.12;
}
}
.daisy .eyes {
transform-box: fill-box;
transform-origin: center;
transition: scale calc(var(--dur-blink) / 2) linear;
}
.daisy.is-blinking .eyes {
scale: 1 0.1;
}
.daisy .face {
display: none;
}
.daisy:not([data-face]) .face-neutral,
.daisy[data-face="neutral"] .face-neutral,
.daisy[data-face="delighted"] .face-delighted,
.daisy[data-face="puzzled"] .face-puzzled,
.daisy[data-face="eager"] .face-eager {
display: inline;
}
.js .daisy--header {
cursor: pointer;
-webkit-tap-highlight-color: transparent;
}
.fx-layer {
position: fixed;
inset: 0;
z-index: 50;
overflow: hidden;
pointer-events: none;
}
.fx-petal {
position: absolute;
top: var(--y);
left: var(--x);
width: var(--w);
height: var(--h);
margin: calc(var(--h) / -2) 0 0 calc(var(--w) / -2);
border-radius: 50% 50% 50% 50% / 62% 62% 38% 38%;
background: linear-gradient(to bottom, var(--petal), var(--petal-shade));
box-shadow:
0 0 0 1px var(--petal-line),
0 3px 6px color-mix(in srgb, var(--shadow-tint) 15%, transparent);
rotate: var(--a);
}
.fx-petal.is-plucked-petal {
animation: flutter var(--dur-pluck) var(--ease-in-out) forwards;
}
@keyframes flutter {
0% {
transform: translate(0, 0) rotate(0deg) scale(1);
}
12% {
transform: translate(calc(var(--dx) * 0.08), -14px) rotate(14deg) scale(1.12);
}
40% {
transform: translate(calc(var(--dx) * 0.45), 18vh) rotate(-40deg) scale(1);
}
70% {
transform: translate(calc(var(--dx) * 0.7), 38vh) rotate(30deg) scale(0.95);
opacity: 1;
}
100% {
transform: translate(var(--dx), 62vh) rotate(var(--spin)) scale(0.9);
opacity: 0;
}
}
.fx-petal.is-burst-petal {
animation: burst var(--dur-burst) var(--ease-spring) forwards;
}
@keyframes burst {
from {
transform: translateY(0) scale(0.2);
opacity: 1;
}
65% {
opacity: 1;
}
to {
transform: translateY(calc(-1 * var(--d))) scale(1);
opacity: 0;
}
}
.card.is-launching {
animation: squash var(--dur-med) var(--ease-spring);
}
@keyframes squash {
35% {
scale: 0.97;
}
}
.is-hidden :is(.blob, .drift, .sway, .sprout-leaves),
.is-hidden .badge-new::after {
animation-play-state: paused;
}
@media (prefers-reduced-motion: reduce) {
.blob,
.daisy .sway,
.sprout-leaves,
.badge-new::after {
animation: none;
}
.drift {
top: var(--y);
rotate: var(--r);
animation: none;
}
.letter,
.daisy--header,
.tagline,
.intro,
.card-slot,
.card-slot.is-revealed,
.lost-card {
animation: fade-in var(--dur-reduced) linear backwards;
animation-delay: initial;
}
.card,
.card-media img,
.btn-face,
.card-flourish,
.coffee-pill {
transition: none;
}
.btn:active .btn-face {
transform: none;
}
.card.is-launching,
.daisy.is-regrowing {
animation: none;
}
.daisy .petal {
transition: opacity var(--dur-reduced) linear;
}
.daisy .petal.is-plucked {
scale: 1;
}
.daisy.is-regrowing .petal {
animation: fade-in var(--dur-reduced) linear backwards;
}
}
@keyframes fade-in {
from {
opacity: 0;
}
}