/* meemamae.com — maximum silly */ :root { --pink: #ff5d8f; --pink-l: #ffd6e3; --blue: #4d96ff; --blue-l: #d6e8ff; --yellow: #ffd93d; --yellow-l: #fff3c4; --green: #6bcb77; --purple: #b892ff; --ink: #3d2b1f; --display: 'Baloo 2', 'Comic Sans MS', 'Chalkboard SE', cursive; --body: 'Gaegu', 'Comic Sans MS', 'Chalkboard SE', cursive; } * { box-sizing: border-box; } /* The polaroids are rotated, so their painted corners stick out past the grid. Clipping on too — body alone doesn't stop the document scrolling. */ html { overflow-x: clip; } body { margin: 0; position: relative; /* anchor for the margin drawings */ max-width: 100vw; overflow-x: clip; font-family: var(--body); font-size: 21px; line-height: 1.55; color: var(--ink); background: radial-gradient(circle at 12% 8%, #fff0f6 0 22%, transparent 22%), radial-gradient(circle at 88% 22%, #e8f4ff 0 20%, transparent 20%), radial-gradient(circle at 20% 78%, #fffbe0 0 24%, transparent 24%), linear-gradient(170deg, #fff6fb 0%, #eef7ff 50%, #fff9ec 100%); background-attachment: fixed; overflow-x: hidden; } /* ----------------------------------------- drawings in the margins --- */ /* Only on screens wide enough to have empty margins. They sit at z-index 0, under main (z-index 1), so text and photos always pass over them. */ .side-doodles { display: none; } @media (min-width: 1240px) { .side-doodles { display: block; position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; } .sd { position: absolute; opacity: 0.5; filter: saturate(0.85); } .sd-loaf { top: 7%; left: 1.5%; width: 190px; } .sd-cup { top: 15%; right: 2%; width: 140px; } .sd-paws { top: 27%; left: 3%; width: 100px; } .sd-yarn { top: 39%; right: 1.5%; width: 210px; } .sd-leaf { top: 52%; left: 2%; width: 130px; } .sd-sit { top: 64%; right: 2.5%; width: 165px; } .sd-cup2 { top: 78%; left: 2.5%; width: 125px; } /* wider still: nudge them further out so they clear the content */ @media (min-width: 1560px) { .sd-loaf { left: 4%; } .sd-cup { right: 5%; } .sd-paws { left: 6%; } .sd-yarn { right: 4%; } .sd-leaf { left: 5%; } .sd-sit { right: 6%; } .sd-cup2 { left: 5.5%; } } /* --- the loaf cat breathes and dreams --- */ .breathe { transform-box: fill-box; transform-origin: bottom center; animation: breathe 4s ease-in-out infinite; } @keyframes breathe { 0%, 100% { transform: scaleY(1) scaleX(1); } 50% { transform: scaleY(1.05) scaleX(0.985); } } .zzz text { animation: zzzFloat 3.4s ease-in-out infinite; } .zzz text:last-child { animation-delay: 0.9s; } @keyframes zzzFloat { 0% { opacity: 0; transform: translate(0, 6px); } 35% { opacity: 0.9; } 100% { opacity: 0; transform: translate(8px, -16px); } } /* --- cups bob, steam curls --- */ .tip { transform-box: fill-box; transform-origin: bottom center; animation: tipToe 5s ease-in-out infinite; } @keyframes tipToe { 0%, 100% { transform: rotate(-3deg) translateY(0); } 50% { transform: rotate(3deg) translateY(-5px); } } .steam2 path { opacity: 0; transform-box: fill-box; transform-origin: bottom center; animation: steamUp 3.6s ease-in-out infinite; } .steam2 path:nth-child(2) { animation-delay: 1.5s; } /* --- paw prints appear one after another, then start over --- */ .pawprint { opacity: 0; animation: stepStep 6s linear infinite; } .p2 { animation-delay: 0.6s; } .p3 { animation-delay: 1.2s; } .p4 { animation-delay: 1.8s; } .p5 { animation-delay: 2.4s; } @keyframes stepStep { 0% { opacity: 0; } 8% { opacity: 0.95; } 55% { opacity: 0.95; } 75% { opacity: 0; } 100% { opacity: 0; } } /* --- the yarn cat --- */ .yarn { transform-box: fill-box; transform-origin: center; animation: rollYarn 3.6s ease-in-out infinite; } @keyframes rollYarn { 0%, 100% { transform: translateX(0) rotate(0deg); } 45% { transform: translateX(16px) rotate(150deg); } 55% { transform: translateX(16px) rotate(160deg); } } .paw-swipe { transform-box: fill-box; transform-origin: left center; animation: swipe 3.6s ease-in-out infinite; } @keyframes swipe { 0%, 30%, 100% { transform: rotate(0deg); } 40% { transform: rotate(-26deg); } 50% { transform: rotate(6deg); } } .tail2 { transform-box: fill-box; transform-origin: bottom right; animation: wag 2.1s ease-in-out infinite; } /* --- leaf sprig sways --- */ .sway { transform-box: fill-box; transform-origin: bottom center; animation: swaySprig 5.5s ease-in-out infinite; } @keyframes swaySprig { 0%, 100% { transform: rotate(-4deg); } 50% { transform: rotate(4deg); } } /* --- sitting cat: tail going, occasional blink --- */ .tail3 { transform-box: fill-box; transform-origin: 8% 96%; animation: wag 2.6s ease-in-out infinite; } .sd-eyes circle { transform-box: fill-box; transform-origin: center; animation: catBlink 5.2s ease-in-out infinite; } } /* ------------------------------------------------- floaty sky emojis --- */ .sky { position: fixed; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; } .sky span { position: absolute; top: 100%; font-size: 2rem; opacity: 0.55; animation: rise linear infinite; } .sky span:nth-child(1) { left: 4%; animation-duration: 19s; animation-delay: 0s; } .sky span:nth-child(2) { left: 14%; animation-duration: 25s; animation-delay: -4s; } .sky span:nth-child(3) { left: 24%; animation-duration: 16s; animation-delay: -9s; } .sky span:nth-child(4) { left: 33%; animation-duration: 28s; animation-delay: -2s; } .sky span:nth-child(5) { left: 43%; animation-duration: 21s; animation-delay: -13s; } .sky span:nth-child(6) { left: 52%; animation-duration: 17s; animation-delay: -6s; } .sky span:nth-child(7) { left: 61%; animation-duration: 26s; animation-delay: -17s; } .sky span:nth-child(8) { left: 70%; animation-duration: 20s; animation-delay: -11s; } .sky span:nth-child(9) { left: 79%; animation-duration: 23s; animation-delay: -3s; } .sky span:nth-child(10) { left: 87%; animation-duration: 18s; animation-delay: -15s; } .sky span:nth-child(11) { left: 93%; animation-duration: 27s; animation-delay: -8s; } .sky span:nth-child(12) { left: 48%; animation-duration: 30s; animation-delay: -21s; } .sky span:nth-child(13) { left: 9%; animation-duration: 22s; animation-delay: -18s; } .sky span:nth-child(14) { left: 29%; animation-duration: 24s; animation-delay: -7s; } .sky span:nth-child(15) { left: 57%; animation-duration: 19s; animation-delay: -12s; } .sky span:nth-child(16) { left: 66%; animation-duration: 29s; animation-delay: -25s; } .sky span:nth-child(17) { left: 75%; animation-duration: 21s; animation-delay: -5s; } .sky span:nth-child(18) { left: 97%; animation-duration: 25s; animation-delay: -19s; } @keyframes rise { 0% { transform: translateY(0) rotate(0deg); } 100% { transform: translateY(-115vh) rotate(360deg); } } /* --------------------------------------------------------------- hero --- */ .hero { position: relative; z-index: 1; text-align: center; padding: 46px 18px 26px; } .sun { width: 120px; height: 120px; cursor: pointer; } /* spin the rays only — a whole spinning face looks unwell */ .sun .rays { transform-box: fill-box; transform-origin: center; animation: spin 14s linear infinite; } .title { font-family: var(--display); font-weight: 800; font-size: clamp(2.6rem, 11vw, 6rem); line-height: 1; margin: 10px 0 4px; letter-spacing: 2px; } /* every letter bounces on its own little schedule */ .title span { display: inline-block; animation: letter 1.5s ease-in-out infinite; animation-delay: calc(var(--i) * 0.08s); color: var(--pink); text-shadow: 3px 3px 0 #fff, 6px 6px 0 rgba(0, 0, 0, 0.08); } .title span:nth-child(6n+2) { color: var(--yellow); } .title span:nth-child(6n+3) { color: var(--green); } .title span:nth-child(6n+4) { color: var(--blue); } .title span:nth-child(6n+5) { color: var(--purple); } .title span:nth-child(6n) { color: #ffa62b; } @keyframes letter { 0%, 100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(-16px) rotate(4deg); } } .subtitle { font-family: var(--display); font-size: clamp(1.6rem, 6vw, 2.6rem); margin: 0 0 6px; } .subtitle b { background: linear-gradient(90deg, #ff5d8f, #ffa62b, #ffd93d, #6bcb77, #4d96ff, #b892ff, #ff5d8f); background-size: 300% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: rainbow 4s linear infinite; } @keyframes rainbow { to { background-position: 300% 0; } } .tagline { font-size: 1.15rem; margin: 0; } .blink { animation: blink 1.1s steps(2, start) infinite; } @keyframes blink { 50% { opacity: 0.25; } } /* --------------------------------------------------------------- cards --- */ main { position: relative; z-index: 1; } .card { max-width: 760px; margin: 30px auto; padding: 26px 30px 30px; border: 5px solid var(--ink); border-radius: 28px; box-shadow: 9px 9px 0 rgba(61, 43, 31, 0.22); transform: rotate(-1deg); } .card:nth-of-type(even) { transform: rotate(1deg); } .card.pink { background: var(--pink-l); } .card.blue { background: var(--blue-l); } .card.yellow { background: var(--yellow-l); text-align: center; } .card.green { background: #ddf7de; } .card.purple { background: #ece3ff; } .card.orange { background: #ffe6cc; } .card h2 { font-family: var(--display); font-size: clamp(1.7rem, 5vw, 2.4rem); margin: 0 0 12px; animation: wobble 3s ease-in-out infinite; transform-origin: center; } @keyframes wobble { 0%, 100% { transform: rotate(-2deg); } 50% { transform: rotate(2deg); } } .card p { margin: 0 0 14px; } .card p:last-child { margin-bottom: 0; } .fakts { margin: 0; padding-left: 4px; list-style: none; } .fakts li { margin-bottom: 13px; padding: 11px 15px; background: #fff; border: 3px dashed var(--blue); border-radius: 16px; transition: transform 0.15s ease; } .fakts li:hover { transform: scale(1.03) rotate(-1deg); } .fakts li:last-child { margin-bottom: 0; } /* ------------------------------------------------- the two toys 🐱đŸĩ --- */ .toy { position: relative; text-align: center; margin-top: 18px; } .toy-says { margin: 4px 0 0 !important; font-size: 1.05rem; font-weight: 700; min-height: 1.6em; } .pet-cat, .matcha-cup { width: min(210px, 62vw); height: auto; cursor: pointer; overflow: visible; transition: transform 0.2s ease; } .pet-cat:hover, .matcha-cup:hover { transform: scale(1.05); } .pet-cat:focus-visible, .matcha-cup:focus-visible { outline: 4px dashed var(--pink); outline-offset: 6px; } /* --- cat --- */ .tail { transform-box: fill-box; transform-origin: 6% 94%; animation: wag 1.9s ease-in-out infinite; } @keyframes wag { 0%, 100% { transform: rotate(-8deg); } 50% { transform: rotate(13deg); } } .eye, .sd-eyes circle { transform-box: fill-box; transform-origin: center; animation: catBlink 4.8s ease-in-out infinite; } @keyframes catBlink { 0%, 91%, 100% { transform: scaleY(1); } 95% { transform: scaleY(0.08); } } /* pupils drift side to side, so he looks around while he waits */ .pupil { transform-box: fill-box; transform-origin: center; animation: lookAbout 7s ease-in-out infinite; } @keyframes lookAbout { 0%, 22% { transform: translateX(0); } 32%, 46% { transform: translateX(2.6px); } 56%, 72% { transform: translateX(-2.6px); } 82%, 100% { transform: translateX(0); } } .ear { transform-box: fill-box; transform-origin: bottom center; animation: twitch 5.5s ease-in-out infinite; } .earR { animation-delay: 1.4s; } @keyframes twitch { 0%, 88%, 100% { transform: rotate(0deg); } 92% { transform: rotate(-11deg); } 96% { transform: rotate(6deg); } } .bell { transform-box: fill-box; transform-origin: top center; animation: ding 4.2s ease-in-out infinite; } @keyframes ding { 0%, 86%, 100% { transform: rotate(0deg); } 90% { transform: rotate(-13deg); } 94% { transform: rotate(9deg); } 97% { transform: rotate(-4deg); } } .whiskers path { transform-box: fill-box; transform-origin: center; animation: whiskerSway 4.5s ease-in-out infinite; } .whiskers path:last-child { animation-delay: 0.5s; } @keyframes whiskerSway { 0%, 100% { transform: rotate(-1.6deg); } 50% { transform: rotate(1.6deg); } } .eyes-happy { opacity: 0; transition: opacity 0.18s ease; } .tongue { opacity: 0; transform-box: fill-box; transform-origin: top center; transform: scaleY(0.2); } /* --- being petted: a whole little routine --- */ .pet-cat.happy .eyes { opacity: 0; } .pet-cat.happy .eyes-happy { opacity: 1; } /* body squishes down and springs up, like a purring cat */ .pet-cat.happy { animation: purr 0.42s ease-in-out 3; } @keyframes purr { 0%, 100% { transform: scale(1.05) translateY(0) rotate(0deg); } 30% { transform: scale(1.08, 1.02) translateY(3px) rotate(-1.5deg); } 65% { transform: scale(1.04, 1.1) translateY(-8px) rotate(1.5deg); } } /* ears flatten back the way a happy cat's do */ .pet-cat.happy .ear { animation: earFlatten 1.3s ease-in-out; } .pet-cat.happy .earR { animation: earFlattenR 1.3s ease-in-out; } @keyframes earFlatten { 0%, 100% { transform: rotate(0deg); } 25%, 75% { transform: rotate(-24deg); } } @keyframes earFlattenR { 0%, 100% { transform: rotate(0deg); } 25%, 75% { transform: rotate(24deg); } } /* tail goes wild */ .pet-cat.happy .tail { animation: wagFast 0.28s ease-in-out infinite; } @keyframes wagFast { 0%, 100% { transform: rotate(-16deg); } 50% { transform: rotate(22deg); } } /* making biscuits */ .pet-cat.happy .paw { transform-box: fill-box; transform-origin: center; animation: knead 0.44s ease-in-out 3; } .pet-cat.happy .pawR { animation-delay: 0.22s; } @keyframes knead { 0%, 100% { transform: translateY(0) scaleX(1); } 50% { transform: translateY(-9px) scaleX(0.92); } } /* the bell actually rings */ .pet-cat.happy .bell { animation: dingHard 0.3s ease-in-out 4; } @keyframes dingHard { 0%, 100% { transform: rotate(0deg); } 25% { transform: rotate(-26deg); } 75% { transform: rotate(22deg); } } /* and a blep at the end */ .pet-cat.happy .tongue { animation: blep 1.3s ease-in-out; } @keyframes blep { 0%, 45% { opacity: 0; transform: scaleY(0.2); } 60%, 88% { opacity: 1; transform: scaleY(1); } 100% { opacity: 0; transform: scaleY(0.2); } } .pet-cat.happy .whiskers path { animation: whiskerPerk 0.5s ease-in-out 2; } @keyframes whiskerPerk { 0%, 100% { transform: rotate(0deg); } 50% { transform: rotate(-6deg); } } /* --- matcha --- */ .steam path { opacity: 0; transform-box: fill-box; transform-origin: bottom center; animation: steamUp 3.2s ease-in-out infinite; } .steam .s2 { animation-delay: 0.7s; } .steam .s3 { animation-delay: 1.4s; } @keyframes steamUp { 0% { opacity: 0; transform: translateY(10px) scaleY(0.7); } 35% { opacity: 0.85; } 100% { opacity: 0; transform: translateY(-16px) scaleY(1.2); } } .whisk { transform-box: fill-box; transform-origin: 50% 12%; animation: hover-whisk 3s ease-in-out infinite; } @keyframes hover-whisk { 0%, 100% { transform: translateY(0) rotate(-4deg); } 50% { transform: translateY(-5px) rotate(4deg); } } .leaf { transform-box: fill-box; transform-origin: bottom left; animation: swayLeaf 4.5s ease-in-out infinite; } @keyframes swayLeaf { 0%, 100% { transform: rotate(-5deg); } 50% { transform: rotate(5deg); } } .scoop { transform-box: fill-box; transform-origin: right center; animation: scoopRock 6s ease-in-out infinite; } @keyframes scoopRock { 0%, 100% { transform: rotate(-2deg); } 50% { transform: rotate(2deg); } } .liquid, .bowl, .foam circle { transform-box: fill-box; transform-origin: center; } /* --- whisking it: dip, beat, froth, slosh --- */ .matcha-cup.whisking .whisk { animation: whiskIt 1.15s cubic-bezier(.3,.1,.3,1); } @keyframes whiskIt { 0% { transform: translateY(0) rotate(0deg); } 14% { transform: translateY(26px) rotate(0deg); } 26% { transform: translateY(26px) rotate(-27deg); } 38% { transform: translateY(26px) rotate(27deg); } 50% { transform: translateY(26px) rotate(-24deg); } 62% { transform: translateY(26px) rotate(24deg); } 74% { transform: translateY(26px) rotate(-14deg); } 86% { transform: translateY(20px) rotate(6deg); } 100% { transform: translateY(0) rotate(0deg); } } .matcha-cup.whisking .liquid { animation: swirl 1.15s ease-in-out; } @keyframes swirl { 0%, 100% { transform: scaleX(1) scaleY(1) translateX(0); } 20% { transform: scaleX(0.9) scaleY(1.45) translateX(-4px); } 40% { transform: scaleX(1.07) scaleY(0.72) translateX(4px); } 60% { transform: scaleX(0.93) scaleY(1.3) translateX(-3px); } 80% { transform: scaleX(1.04) scaleY(0.86) translateX(2px); } } /* the whole bowl rocks with the effort */ .matcha-cup.whisking .bowl { animation: bowlRock 1.15s ease-in-out; } @keyframes bowlRock { 0%, 100% { transform: rotate(0deg); } 25% { transform: rotate(-2.2deg); } 55% { transform: rotate(2.2deg); } 80% { transform: rotate(-1deg); } } /* foam blooms bubble by bubble */ .matcha-cup.whisking .foam circle { animation: froth 0.85s ease-out; } .matcha-cup.whisking .foam circle:nth-child(2) { animation-delay: 0.09s; } .matcha-cup.whisking .foam circle:nth-child(3) { animation-delay: 0.18s; } .matcha-cup.whisking .foam circle:nth-child(4) { animation-delay: 0.27s; } .matcha-cup.whisking .foam circle:nth-child(5) { animation-delay: 0.36s; } @keyframes froth { 0% { transform: scale(0.3) translateY(4px); opacity: 0.2; } 45% { transform: scale(1.8) translateY(-2px); opacity: 1; } 70% { transform: scale(0.85); opacity: 0.9; } 100% { transform: scale(1); opacity: 1; } } .matcha-cup.whisking .steam path { animation-duration: 1.1s; } /* hearts / bubbles the toys throw off */ .toy-pop { position: absolute; z-index: 30; pointer-events: none; font-size: 1.5rem; animation: toyPop 1.1s ease-out forwards; } @keyframes toyPop { 0% { opacity: 1; transform: translate(-50%, 0) scale(0.6) rotate(0deg); } 100% { opacity: 0; transform: translate(-50%, -90px) scale(1.3) rotate(22deg); } } /* -------------------------------------------------------------- doodles --- */ .doodle { width: 120px; height: 120px; display: block; } .rainbow { width: min(260px, 62vw); height: auto; margin: 26px auto 6px; } .doodle-row { display: flex; justify-content: center; align-items: center; gap: clamp(18px, 6vw, 60px); margin: 26px auto 10px; flex-wrap: wrap; } .spin { animation: spin 14s linear infinite; } .spin-slow { animation: spin 26s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } .bounce { animation: bounceD 1.7s ease-in-out infinite; } @keyframes bounceD { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-22px); } } .wiggle { animation: wiggleD 2.2s ease-in-out infinite; } @keyframes wiggleD { 0%, 100% { transform: rotate(-7deg); } 50% { transform: rotate(7deg); } } .float-slow { animation: floatD 4s ease-in-out infinite; } @keyframes floatD { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(9px); } } .pulse { animation: pulseD 1.3s ease-in-out infinite; } @keyframes pulseD { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.16); } } /* -------------------------------------------------------------- gallery --- */ .gallery-wrap { text-align: center; margin: 44px auto 10px; padding: 0 14px; } .gallery-title { font-family: var(--display); font-size: clamp(2rem, 8vw, 3.4rem); margin: 0; color: var(--purple); text-shadow: 3px 3px 0 #fff, 6px 6px 0 rgba(0, 0, 0, 0.08); animation: wobble 3.4s ease-in-out infinite; } .gallery-sub { margin: 2px 0 26px; font-size: 1.05rem; } .gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 34px 30px; max-width: 1020px; margin: 0 auto; padding: 10px 6px; } .polaroid { --tiltX: 0deg; --tiltY: 0deg; --lift: 0px; --pop: 1; position: relative; margin: 0; background: #fff; padding: 13px 13px 6px; border: 4px solid var(--ink); border-radius: 10px; cursor: pointer; box-shadow: 8px 8px 0 rgba(61, 43, 31, 0.2); transform: rotate(var(--rest, 0deg)) translateY(var(--lift)) scale(var(--pop)) rotateX(var(--tiltX)) rotateY(var(--tiltY)); transition: box-shadow 0.25s ease, transform 0.25s cubic-bezier(.2, .8, .3, 1.2); } /* each one pinned up a bit wonky */ .t1 { --rest: -3deg; } .t2 { --rest: 2.5deg; } .t3 { --rest: -1.5deg; } .t4 { --rest: 3deg; } .t5 { --rest: -2.5deg; } .t6 { --rest: 1.5deg; } .t7 { --rest: -3.5deg; } .t8 { --rest: 2deg; } .t9 { --rest: -2deg; } .polaroid:hover, .polaroid:focus-visible { --lift: -12px; --pop: 1.05; z-index: 5; box-shadow: 16px 20px 0 rgba(255, 93, 143, 0.4); outline: none; } /* while the pointer is actually steering it, drop the easing so it tracks 1:1 */ .polaroid.tilting { transition: box-shadow 0.25s ease; } .frame { position: relative; overflow: hidden; border-radius: 4px; } .polaroid img { display: block; width: 100%; height: auto; background: var(--pink-l); transition: transform 0.5s cubic-bezier(.2, .8, .3, 1); } .polaroid:hover img { transform: scale(1.07); } /* glossy sweep that follows the cursor across the photo */ .shine { position: absolute; inset: 0; pointer-events: none; opacity: 0; background: radial-gradient( circle at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0.18) 28%, transparent 62% ); transition: opacity 0.3s ease; } .polaroid:hover .shine { opacity: 1; } /* little sticker peeking off the corner */ .sticker { position: absolute; top: -16px; right: -14px; z-index: 6; font-size: 2rem; transform: rotate(14deg); filter: drop-shadow(2px 2px 0 rgba(0, 0, 0, 0.18)); transition: transform 0.35s cubic-bezier(.2, .8, .3, 1.4); } .polaroid:hover .sticker { transform: rotate(-20deg) scale(1.35); } .polaroid figcaption { font-size: 1.02rem; line-height: 1.35; padding: 9px 4px 4px; } /* The 3D depth is only worth having where there's a cursor to steer it. On touch it just renders the photo, sticker and caption larger than their layout boxes, so they spill out of the white frame and look misaligned. */ @media (hover: hover) and (pointer: fine) { .gallery { perspective: 1000px; } .polaroid { transform-style: preserve-3d; } .frame { transform: translateZ(28px); } .polaroid figcaption { transform: translateZ(14px); } .sticker { transform: translateZ(46px) rotate(14deg); } .polaroid:hover .sticker { transform: translateZ(46px) rotate(-20deg) scale(1.35); } } /* --- photos springing in as you scroll to them --- */ .polaroid.hidden-yet { opacity: 0; transform: rotate(var(--rest, 0deg)) translateY(70px) scale(0.86); } .polaroid.popped { animation: popIn 0.75s cubic-bezier(.2, .9, .3, 1.3) backwards; animation-delay: var(--pop-delay, 0s); } @keyframes popIn { 0% { opacity: 0; transform: rotate(calc(var(--rest, 0deg) * 5)) translateY(70px) scale(0.86); } 60% { opacity: 1; transform: rotate(calc(var(--rest, 0deg) * 0.4)) translateY(-12px) scale(1.06); } 100% { opacity: 1; transform: rotate(var(--rest, 0deg)) translateY(0) scale(1); } } .gallery-hint { margin: 22px 0 0; font-size: 1.1rem; } /* ----------------------------------------------------------- lightbox --- */ /* An author `display` beats the UA stylesheet's [hidden]{display:none}, so the hidden attribute needs saying again here or the overlay covers every page. */ .lightbox[hidden] { display: none; } .lightbox { position: fixed; inset: 0; z-index: 500; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(61, 43, 31, 0.82); backdrop-filter: blur(7px); animation: fadeIn 0.25s ease; } @keyframes fadeIn { from { opacity: 0; } } .lightbox.closing { animation: fadeOut 0.2s ease forwards; } @keyframes fadeOut { to { opacity: 0; } } .lb-frame { margin: 0; max-width: min(560px, 92vw); background: #fff; padding: 14px 14px 8px; border: 5px solid var(--ink); border-radius: 12px; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.45); animation: zoomIn 0.42s cubic-bezier(.2, .9, .3, 1.35); } @keyframes zoomIn { 0% { opacity: 0; transform: scale(0.55) rotate(-11deg); } 70% { opacity: 1; transform: scale(1.04) rotate(2deg); } 100% { opacity: 1; transform: scale(1) rotate(0deg); } } .lb-frame img { display: block; width: 100%; max-height: 68vh; object-fit: contain; border-radius: 5px; background: var(--pink-l); } .lb-frame figcaption { padding: 10px 4px 4px; font-size: 1.08rem; line-height: 1.35; text-align: center; } .lightbox button { position: absolute; font-size: 1.6rem; line-height: 1; background: #fff; border: 4px solid var(--ink); border-radius: 50%; width: 60px; height: 60px; cursor: pointer; box-shadow: 0 5px 0 rgba(0, 0, 0, 0.3); transition: transform 0.15s ease; } .lightbox button:hover { transform: scale(1.16) rotate(9deg); } .lightbox button:active { transform: scale(0.94); } .lightbox button:focus-visible { outline: 4px dashed var(--yellow); outline-offset: 4px; } .lb-close { top: 18px; right: 18px; } .lb-prev { left: 14px; top: 50%; margin-top: -30px; } .lb-next { right: 14px; top: 50%; margin-top: -30px; } @media (max-width: 620px) { .lb-prev { left: 12px; top: auto; bottom: 20px; margin: 0; } .lb-next { right: 12px; top: auto; bottom: 20px; margin: 0; } } /* ------------------------------------------------------ disco mode đŸĒŠ --- */ /* the secret you get for clicking the sun */ body.disco { animation: disco 3s linear infinite; } @keyframes disco { to { filter: hue-rotate(360deg); } } body.disco .polaroid { animation: discoSpin 2.4s ease-in-out infinite; } @keyframes discoSpin { 0%, 100% { transform: rotate(var(--rest, 0deg)) scale(1); } 50% { transform: rotate(calc(var(--rest, 0deg) * -3)) scale(1.05); } } /* sparkles that follow the mouse */ .sparkle { position: fixed; z-index: 400; pointer-events: none; font-size: 1.1rem; animation: sparkleOut 0.9s ease-out forwards; } @keyframes sparkleOut { 0% { opacity: 1; transform: translate(-50%, -50%) scale(1) rotate(0deg); } 100% { opacity: 0; transform: translate(-50%, -140%) scale(0.2) rotate(180deg); } } /* -------------------------------------------------------- mini button --- */ .mini-button { font-family: var(--display); font-size: 1.15rem; font-weight: 800; color: var(--ink); background: var(--yellow); border: 4px solid var(--ink); border-radius: 16px; padding: 9px 22px; margin: 0 0 26px; cursor: pointer; box-shadow: 0 6px 0 #d9a400; transition: transform 0.1s ease, box-shadow 0.1s ease, background 0.2s ease; } .mini-button:hover { background: #ffe57a; transform: rotate(-2deg); } .mini-button:active { transform: translateY(6px); box-shadow: 0 0 0 #d9a400; } .mini-button:focus-visible { outline: 4px dashed var(--blue); outline-offset: 4px; } /* --------------------------------------------------------------- button --- */ .big-button { font-family: var(--display); font-size: clamp(1.3rem, 5vw, 2rem); font-weight: 800; color: #fff; background: var(--pink); border: 5px solid var(--ink); border-radius: 20px; padding: 14px 34px; cursor: pointer; box-shadow: 0 8px 0 #c9184a, 8px 12px 0 rgba(61, 43, 31, 0.22); transition: transform 0.08s ease, box-shadow 0.08s ease, background 0.2s ease; animation: bounceD 2.4s ease-in-out infinite; } .big-button:hover { background: #ff3d78; } .big-button:active { transform: translateY(8px); box-shadow: 0 0 0 #c9184a, 8px 4px 0 rgba(61, 43, 31, 0.22); } .big-button:focus-visible { outline: 4px dashed var(--blue); outline-offset: 5px; } .button-says { min-height: 1.7em; margin: 16px 0 0 !important; font-size: 1.25rem; font-weight: 700; color: #c9184a; } /* confetti bits the button throws */ .confetti { position: fixed; z-index: 999; font-size: 1.9rem; pointer-events: none; animation: fall 2.6s linear forwards; } @keyframes fall { 0% { transform: translateY(0) rotate(0deg); opacity: 1; } 100% { transform: translateY(104vh) rotate(760deg); opacity: 0; } } /* --------------------------------------------------------------- footer --- */ footer { position: relative; z-index: 1; text-align: center; padding: 40px 18px 56px; font-size: 1.15rem; } footer .heart { width: 74px; height: 74px; margin: 0 auto 8px; } footer p { margin: 4px 0; } .bye { font-family: var(--display); font-size: 1.7rem; color: var(--pink); animation: wobble 2s ease-in-out infinite; } /* ------------------------------------------------------------ calm mode --- */ /* if someone's system says they don't want motion, everything holds still */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; } .sky { display: none; } /* never leave a photo stuck invisible if the reveal never animates */ .polaroid.hidden-yet { opacity: 1; transform: rotate(var(--rest, 0deg)); } }