/* Outlier · styles/paper.css · the exercise book * * Everything the game is drawn on: the squared page, sticky notes, washi tape, inked * buttons and boxes, the pencil timer, gold star stickers, the red stamp, the manila * results envelope and the results slip, confetti, graphite specks, and the Genie's motion. * Plain CSS. The hand-drawn borders are small SVGs inlined as data URIs, drawn with * src/art/sketch.js. Fonts are only named here (the UI's @font-face loads them). * * VARIABLES (on :root, override on the game root) * --paper --paper-shade --grid --margin --biro --navy --pencil --red-pen --highlighter * --mg-blue --mg-teal --genie-top --genie-bottom --gold the SPEC palette * --note-number --note-shape --note-fractions --note-measures --note-words * --note-real-life --note-famous strand sticky-note colours * --manila --manila-dark --manila-light --slip envelope and slip paper * --sq: 22px one 5 mm square * --margin-x where the red margin line sits * --font-ui / --font-title / --font-hand Shantell Sans / Caveat / MathsGenie Hand * --ui-axes Shantell's INFM 100 + a little bounce * * PAGE * .paper-page the squared page: grid, grain, mottle, margin line, a rare smudge, * and the UI font. Size it as tall as the scene; the background moves * with it. On screens under 600 px the margin line moves in to 2 squares. * .paper-page--no-margin no red margin line * .paper-smudge a pencil smudge to drop anywhere (absolute; --smudge-w/-h) * * INK AND TEXT * .biro .pencil-text .red-pen ink colours (with the hand fonts) * .hand .title-hand .ui-hand MathsGenie Hand / Caveat / Shantell Sans with --ui-axes * .hl a highlighter swipe behind inline text; add .is-on to swipe it in * .hl-under a highlighter swipe under a line of text; .is-on to swipe * .pencil-note a fact written in pencil beside a landmark; .is-in pops it in * .grade / .grade--pencil a grade digit in red pen (Caveat) / pencil * * BOXES, BUTTONS, INPUTS (hand-inked borders via border-image) * .ink-box (.ink-box--2 .ink-box--3) a hand-drawn biro box * .ink-btn (.ink-btn--big .ink-btn--small) a hand-inked button: highlighter fill on hover and * :focus-visible (or .is-lit), presses down 2 px on * :active; every second button gets another hand's box * .ink-input the answer box: transparent, inked box (bolder on focus), * highlighter ::selection so a wrong guess left selected * looks highlighted * .grade-box (+ .is-filled .is-current) one of the header's seven boxes (they vary by position; * .is-current has a highlighter swipe, .is-filled pops) * .hl-chip the "Did you mean" highlighter chip (swipes in) * * PAPER PIECES * .sticky (--note, --tilt, --curl) a sticky note with a curled corner and soft shadow * .sticky--number … .sticky--famous strand colours * .sticky__tab a page-marker tab on the top edge (strand name) * .sticky.is-slap slaps on (page-turn arrival) * .sticky.is-shake a wrong-answer shake (restart by re-adding) * .washi (--washi, --washi-angle) a strip of washi tape with torn ends * .washi--stripes .washi--dots .washi--grid .washi--check * .pencil (--left 0..1, --pencil-len, --pencil-h) the pencil timer: *
*
* .pencil.is-danger red paint and a shake (the last 5 s) * .pencil-shaving (--dx --rot) a wood shaving that falls (one-shot) * .star-sticker (+ .is-slapped) wraps doodleSVG("star-sticker"): slap + shine sweep * .stamp (--stamp-tilt) (+ .is-thump) a red rubber stamp: frame, distressed ink, Caveat text * .stamp--round a round stamp * .envelope (--tear) the manila results envelope: *
*
*
…the .slip…
*
*
Outlier #12 results
*
*
* .envelope.is-torn the strip tears off along its perforation * .envelope.is-open the slip slides up out of it (--slide, default -72% of * the slip's height; below the envelope it stays hidden) * .slip the results slip (printed form, handwritten answers): * .slip__head .slip__title .slip__no .slip__rows .slip__row .slip__strand .slip__answer * .slip__grade .slip__total .slip__line .slip__foot * * CONFETTI AND SPECKS (absolute; place with left/top, since the animation owns transform; * set --dx --dy --rot --dur --delay (and --s0 --s1 scales), then add .og-fly or .og-burst) * .punch (.punch--grid .punch--note) hole-punch circles (--d size, --c colour) * .paper-strip (--c --w --h) paper strips * .confetti-star little gold stars * .speck graphite specks thrown from the caret * .og-fly fly from where it is to (--dx, --dy), spin --rot, fade * .og-burst fly out to (--dx, --dy) and hang (the 9's ring of stars) * * THE GENIE (built by src/art/genie.js): .og-genie[data-mood] and its parts. Moods, blinks, * sparkles, the sweat drop, arms, and the one-shot gestures .og-g-hop .og-g-spin .og-g-bob * .og-g-nod .og-g-shake-off .og-g-wave. .is-offscreen pauses it. * * SHAKES AND THE COUNTDOWN * .og-shake-small / .og-shake-big a page shake (7-8) / a screen shake (the 9); they use the * translate and rotate properties, so they stack on a camera * transform. Re-add the class to replay. * .count-digit (+ .is-in) the big pencil 3, 2, 1 (--count-size) * * DOODLES (src/art/doodles.js): .doodle sizes; .sk-draw draws marks on (pathLength 1); * --draw-ms and --draw-delay time it. * * MOTION: shakes, slaps, confetti, boils and the Genie's motion all stop under * prefers-reduced-motion. Nothing here animates unless a class asks for it, except the * Genie's hover and blink, which pause off screen. */ :root { --paper: #fbf8f1; --paper-shade: #f1ebdd; --grid: rgba(28, 120, 200, 0.16); --margin: #ef8f8f; --biro: #23407a; --navy: #002e5f; --pencil: #5d6470; --red-pen: #e0352b; --highlighter: #ffe45c; --mg-blue: #1cb0f6; --mg-teal: #46cbe3; --genie-top: #2FE4B7; --genie-bottom: #5CC1EA; --gold: #f6b800; --note-number: #fff1a8; --note-shape: #ffd3de; --note-fractions: #c9f2dc; --note-measures: #cfe6ff; --note-words: #ffdcad; --note-real-life: #e4d8ff; --note-famous: #ffe7a0; --manila: #e3c58e; --manila-dark: #c9a56a; --manila-light: #f4e6c6; --slip: #fffdf7; --sq: 22px; --margin-x: calc(var(--sq) * 3 + 1px); --font-ui: "Shantell Sans", "MathsGenie Hand", "Caveat"; --font-title: "Caveat", "Shantell Sans"; --font-hand: "MathsGenie Hand", "Shantell Sans"; --ui-axes: "INFM" 100, "BNCE" 30; } /* ------------------------------------------------------------------ the page */ .ink-box, .ink-btn, .ink-input, .grade-box, .hl-chip, .sticky, .stamp, .slip, .envelope, .pencil, .star-sticker { box-sizing: border-box; } .slip *, .envelope *, .sticky *, .pencil * { box-sizing: border-box; } .paper-page { position: relative; font-family: var(--font-ui); font-variation-settings: var(--ui-axes); background-color: var(--paper); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1500' height='2300'%3E%3Cfilter id='s' x='-50%25' y='-50%25' width='200%25' height='200%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.05 .5' numOctaves='2' seed='3' result='t'/%3E%3CfeGaussianBlur in='SourceGraphic' stdDeviation='9' result='b'/%3E%3CfeComposite in='b' in2='t' operator='in'/%3E%3C/filter%3E%3Cg transform='rotate(13.2 1180 640)' filter='url(%23s)'%3E%3Cellipse cx='1180' cy='640' rx='52' ry='15' fill='%235d6470' opacity='.16'/%3E%3Cellipse cx='1195.5799324077088' cy='636' rx='26' ry='9' fill='%235d6470' opacity='.12'/%3E%3C/g%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1100' height='3100'%3E%3Cfilter id='s' x='-50%25' y='-50%25' width='200%25' height='200%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.05 .5' numOctaves='2' seed='8' result='t'/%3E%3CfeGaussianBlur in='SourceGraphic' stdDeviation='9' result='b'/%3E%3CfeComposite in='b' in2='t' operator='in'/%3E%3C/filter%3E%3Cg transform='rotate(-20.6 240 2050)' filter='url(%23s)'%3E%3Cellipse cx='240' cy='2050' rx='81' ry='14' fill='%235d6470' opacity='.16'/%3E%3Cellipse cx='264.37788391602226' cy='2046' rx='41' ry='8' fill='%235d6470' opacity='.12'/%3E%3C/g%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='g' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' seed='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .36 0 0 0 0 .31 0 0 0 0 .22 0 0 0 .5 -.18'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='640' height='640'%3E%3Cfilter id='m' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.006 .011' numOctaves='3' seed='11' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .55 0 0 0 0 .46 0 0 0 0 .3 0 0 0 .2 -.07'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23m)'/%3E%3C/svg%3E"), linear-gradient(90deg, transparent calc(var(--margin-x) - 0.75px), var(--margin) calc(var(--margin-x) - 0.75px), var(--margin) calc(var(--margin-x) + 0.75px), transparent calc(var(--margin-x) + 0.75px)), linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px); background-size: 1500px 2300px, 1100px 3100px, 220px 220px, 640px 640px, 100% 100%, var(--sq) var(--sq), var(--sq) var(--sq); background-position: 0 0, 0 0, 0 0, 0 0, 0 0, 0 -1px, -1px 0; background-repeat: repeat, repeat, repeat, repeat, repeat-y, repeat, repeat; } @media (max-width: 600px) { :root { --margin-x: calc(var(--sq) * 2 + 1px); } } .paper-page--no-margin { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1500' height='2300'%3E%3Cfilter id='s' x='-50%25' y='-50%25' width='200%25' height='200%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.05 .5' numOctaves='2' seed='3' result='t'/%3E%3CfeGaussianBlur in='SourceGraphic' stdDeviation='9' result='b'/%3E%3CfeComposite in='b' in2='t' operator='in'/%3E%3C/filter%3E%3Cg transform='rotate(13.2 1180 640)' filter='url(%23s)'%3E%3Cellipse cx='1180' cy='640' rx='52' ry='15' fill='%235d6470' opacity='.16'/%3E%3Cellipse cx='1195.5799324077088' cy='636' rx='26' ry='9' fill='%235d6470' opacity='.12'/%3E%3C/g%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1100' height='3100'%3E%3Cfilter id='s' x='-50%25' y='-50%25' width='200%25' height='200%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.05 .5' numOctaves='2' seed='8' result='t'/%3E%3CfeGaussianBlur in='SourceGraphic' stdDeviation='9' result='b'/%3E%3CfeComposite in='b' in2='t' operator='in'/%3E%3C/filter%3E%3Cg transform='rotate(-20.6 240 2050)' filter='url(%23s)'%3E%3Cellipse cx='240' cy='2050' rx='81' ry='14' fill='%235d6470' opacity='.16'/%3E%3Cellipse cx='264.37788391602226' cy='2046' rx='41' ry='8' fill='%235d6470' opacity='.12'/%3E%3C/g%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='g' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' seed='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .36 0 0 0 0 .31 0 0 0 0 .22 0 0 0 .5 -.18'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='640' height='640'%3E%3Cfilter id='m' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.006 .011' numOctaves='3' seed='11' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .55 0 0 0 0 .46 0 0 0 0 .3 0 0 0 .2 -.07'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23m)'/%3E%3C/svg%3E"), linear-gradient(transparent, transparent), linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px); } .paper-smudge { position: absolute; width: var(--smudge-w, 180px); height: var(--smudge-h, 60px); pointer-events: none; background: radial-gradient(closest-side, rgba(93, 100, 112, 0.13), rgba(93, 100, 112, 0.05) 60%, transparent), radial-gradient(closest-side at 70% 40%, rgba(93, 100, 112, 0.08), transparent); filter: blur(2px); transform: rotate(var(--smudge-rot, -12deg)); mix-blend-mode: multiply; } /* ------------------------------------------------------------------ ink and text */ .biro { color: var(--biro); } .pencil-text { color: var(--pencil); } .red-pen { color: var(--red-pen); } .hand { font-family: var(--font-hand); font-weight: 400; } .title-hand { font-family: var(--font-title); } .ui-hand { font-family: var(--font-ui); font-variation-settings: var(--ui-axes); } .hl { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='40' viewBox='0 0 200 40' preserveAspectRatio='none'%3E%3Cpath d='M4.0 5.4L25.1 6.9L46.2 6.0L67.3 7.8L88.4 7.1L109.6 5.0L130.7 5.3L151.8 5.9L172.9 4.9L194.0 6.3L197.0 15.0L195.0 29.0L194.0 36.3L172.9 37.5L151.8 36.4L130.7 35.4L109.6 36.2L88.4 35.3L67.3 35.1L46.2 33.5L25.1 36.7L4.0 34.7L2.0 28.0L5.0 14.0Z' fill='%23ffe45c' opacity='.85'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-size: 0% 72%; background-position: 0 70%; padding: 0 0.12em; margin: 0 -0.12em; -webkit-box-decoration-break: clone; box-decoration-break: clone; transition: background-size 0.45s cubic-bezier(0.3, 0.6, 0.3, 1) var(--hl-delay, 0s); } .hl.is-on { background-size: 100% 72%; } .hl-under { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='40' viewBox='0 0 200 40' preserveAspectRatio='none'%3E%3Cpath d='M4.0 5.4L25.1 6.9L46.2 6.0L67.3 7.8L88.4 7.1L109.6 5.0L130.7 5.3L151.8 5.9L172.9 4.9L194.0 6.3L197.0 15.0L195.0 29.0L194.0 36.3L172.9 37.5L151.8 36.4L130.7 35.4L109.6 36.2L88.4 35.3L67.3 35.1L46.2 33.5L25.1 36.7L4.0 34.7L2.0 28.0L5.0 14.0Z' fill='%23ffe45c' opacity='.85'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-size: 0% 0.55em; background-position: 0 92%; padding-bottom: 0.08em; transition: background-size 0.5s cubic-bezier(0.3, 0.6, 0.3, 1) var(--hl-delay, 0s); } .hl-under.is-on { background-size: 100% 0.55em; } .pencil-note { font-family: var(--font-hand); color: var(--pencil); font-size: 1rem; line-height: 1.25; opacity: 0.92; text-shadow: 0 0 0.6px rgba(93, 100, 112, 0.6); } .pencil-note.is-in { animation: og-note-in 0.5s cubic-bezier(0.2, 0.8, 0.3, 1.2) both; } @keyframes og-note-in { from { opacity: 0; transform: translateY(6px) rotate(-2deg) scale(0.96); filter: blur(1px); } to { opacity: 0.92; transform: none; filter: none; } } .grade { font-family: var(--font-title); font-weight: 700; color: var(--red-pen); line-height: 1; } .grade--pencil { color: var(--pencil); font-weight: 600; } /* ------------------------------------------------------------------ inked boxes and buttons */ .ink-box { border: 12px solid transparent; border-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='64' viewBox='0 0 120 64'%3E%3Cpath d='M5.8 7.8C9.8 7.8 13.9 7.8 17.7 7.8C21.4 7.8 24.8 7.8 28.3 7.7S35.4 7.5 39 7.6S46 7.9 49.6 8S56.6 8.2 60.2 8.2S67.3 8.4 70.8 8.3S77.9 7.8 81.4 7.7S88.5 7.6 92 7.5S99 7.4 102.6 7.4C106.5 7.4 110.5 7.5 114.5 7.6M22.9 7.6C26.6 7.8 30.4 8.2 34.1 8.2S41.1 8 44.6 7.9S51.7 7.8 55.2 7.8S62.3 8 65.8 8.1S72.8 8.3 76.4 8.3S83.4 8 86.9 7.8S94.2 7.3 97.8 7.1M113.2 6.4C113.2 10 113.2 13.7 113.2 17.2S113.2 23.9 113.1 27.2S112.6 33.8 112.5 37.1S112.3 43.6 112.3 47.1C112.3 51.1 112.4 55.5 112.4 59.8M112.8 15.7C112.6 18.6 112.4 21.5 112.3 24.3S112.1 29.6 112.1 32.3C112.2 35.3 112.4 38.5 112.6 41.6M114.4 57.6C110.3 57.3 106 56.8 102.1 56.7C98.4 56.7 95 56.8 91.5 57S84.4 57.7 80.9 57.8S73.8 57.9 70.3 57.7S63.2 57 59.6 56.9S52.6 57 49 57.1S42 57.7 38.4 57.8S31.4 57.7 27.8 57.5S20.9 56.6 17.2 56.5C13.4 56.4 9.3 56.7 5.3 56.9M100.6 57.4C97 57.5 93.3 57.7 89.7 57.5S82.8 56.9 79.3 56.7S72.4 56.3 68.9 56.2S62 56.1 58.5 56.2S51.6 56.4 48.1 56.7S41.3 57.3 37.7 57.4S30.1 57.4 26.3 57.4M6.4 57.8C6.5 54.2 6.6 50.5 6.7 47S6.8 40.4 6.8 37.1S6.6 30.5 6.6 27.2S6.4 20.7 6.5 17.3C6.7 13.7 7.1 9.9 7.3 6.1' fill='none' stroke='%2323407a' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' /%3E%3C/svg%3E") 14 / 12px / 1px stretch; } .ink-box--2 { border-image-source: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='64' viewBox='0 0 120 64'%3E%3Cpath d='M47.6 6.7C51.2 6.7 54.7 6.7 58.3 6.8S65.4 7.1 68.9 7.2S76.1 7.3 79.6 7.4S86.7 7.8 90.3 7.8S97.4 7.5 100.9 7.5S109.9 6.7 111.6 7.4C112.2 7.6 112.3 7.8 112.6 8.4C113.3 10.2 112.9 16.3 112.8 20.2S112.5 28.1 112.4 32S112.2 39.9 112.1 43.8S112.3 54.4 111.8 55.5C111.7 55.7 111.7 55.7 111.5 55.8C110.3 56.2 103.9 56.1 100.1 56.2S92.5 56.3 88.7 56.3S81 56.5 77.2 56.5S69.6 56.4 65.7 56.3S58.1 56 54.3 55.9S46.6 55.8 42.8 55.8S35.2 55.8 31.3 55.9S23.7 56.4 19.9 56.5S10.1 57.2 8.5 56.5C7.9 56.3 7.7 56.1 7.5 55.6C6.7 53.9 7.4 47.7 7.4 43.8S7.8 35.9 7.9 32S7.8 24.1 7.8 20.2S7.1 10.1 7.7 8.5C7.9 8 8 7.9 8.5 7.6C9.9 6.9 15.4 7.1 18.9 7S25.9 7.1 29.4 7S36.4 6.8 39.8 6.9S46.8 7.1 50.3 7.2S57.3 7.3 60.8 7.3M63 6.9C67 6.8 71 6.5 75.1 6.5S83.2 6.9 87.2 7S95.3 7.1 99.3 7S109.2 5.6 111.5 6.5C112.6 6.9 113 7.3 113.5 8.3C114.4 10.5 113.5 16.3 113.5 20.2S113.4 28.1 113.3 32S113 39.9 113 43.8S114.2 53.5 113.4 55.7C113 56.7 112.5 57.1 111.5 57.6C109.3 58.5 103.8 58.1 99.9 58.1S92.3 57.6 88.5 57.5S80.8 57.3 77 57.3S69.4 57.3 65.5 57.3S57.9 57.6 54.1 57.7S46.4 57.8 42.6 57.6S35 57 31.1 56.9S23.5 57 19.7 57S10.2 57.8 8.2 57.1C7.3 56.8 7 56.3 6.6 55.7C6.2 54.7 6.5 53.1 6.4 51.8' fill='none' stroke='%2323407a' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' /%3E%3C/svg%3E"); } .ink-box--3 { border-image-source: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='64' viewBox='0 0 120 64'%3E%3Cpath d='M4.4 6.4C8.7 6.3 13.2 6.1 17.3 6C21.1 6 24.4 6 28 6S35.1 6.4 38.6 6.4S45.7 6.3 49.3 6.1S56.3 5.7 59.9 5.6S67 5.5 70.5 5.5S77.6 5.7 81.2 5.9S88.3 6.6 91.8 6.7S98.8 6.5 102.4 6.4C106.3 6.4 110.4 6.5 114.4 6.5M14.4 6.8C18.5 6.8 22.7 7 26.7 6.9S34.4 6.7 38.3 6.6S45.9 6.5 49.8 6.4S57.5 5.9 61.3 5.9S69 6.1 72.8 6.2S80.5 6.4 84.4 6.5S91.9 6.9 95.9 7C100 7.1 104.4 6.9 108.6 6.8M112.7 6.1C112.9 9.6 113 13.2 113.1 16.8S113.6 23.5 113.6 26.9S113.5 33.7 113.4 37.1S112.7 43.7 112.6 47.2C112.5 51 112.7 55.1 112.7 59M113.2 13.9C113.1 17 113 20.2 113 23.2S113.1 28.8 113.2 31.7S113.2 37.9 113.2 41M115.1 57C110.8 57.2 106.2 57.4 102.1 57.5C98.4 57.6 95 57.7 91.5 57.7S84.4 57.6 80.9 57.5S73.9 57.1 70.3 57.1S63.3 57.5 59.7 57.6S52.7 57.7 49.1 57.6S42.1 57.2 38.5 57.1S31.5 56.9 27.9 56.9S21 57 17.3 57C13.4 57.1 9.2 57 5.1 57M94.1 57.3C90.3 56.9 86.6 56.5 82.9 56.3S75.7 56.2 72.1 56.3S64.8 56.8 61.2 56.8S54.1 56.1 50.5 55.9S43.3 55.8 39.7 55.9S32.5 56.4 28.9 56.5S21.7 56.4 18.1 56.4S10.4 56.3 6.6 56.2M6.9 57.7C7 54.1 7.2 50.3 7.2 46.7S7.3 40 7.2 36.7S7 30 6.9 26.7S6.7 20 6.7 16.7S6.7 9.7 6.7 6.2M6.4 46.9C6.4 44 6.3 41.1 6.3 38.2S6.3 32.9 6.4 30.1S6.6 24.3 6.7 21.4' fill='none' stroke='%2323407a' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' /%3E%3C/svg%3E"); } .ink-btn { position: relative; isolation: isolate; display: inline-flex; align-items: center; justify-content: center; gap: 0.4em; min-height: 44px; padding: 2px 14px 4px; border: 12px solid transparent; border-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='64' viewBox='0 0 120 64'%3E%3Cpath d='M5.4 7.8C9.4 7.7 13.5 7.6 17.4 7.4C21 7.3 24.5 7 28 7S35.1 7.2 38.7 7.4S45.8 7.9 49.3 8S56.4 8.2 60 8.1S67.1 8 70.7 7.8S77.8 7.2 81.3 7.1S88.4 7.2 92 7.3S98.9 7.8 102.6 7.9C106.6 8 110.9 7.8 115 7.7M12 7.5C15.8 7.5 19.7 7.5 23.5 7.5S30.9 7.2 34.6 7.3S42 7.5 45.7 7.7S53.1 8.2 56.8 8.3S64.2 8.4 67.9 8.4S75.3 8.5 79 8.4S86.4 7.7 90.1 7.5S97.5 7.4 101.2 7.3S109 7.2 112.9 7.2M113.7 6.5C113.4 10.9 113.1 15.3 113 19.7S112.6 27.9 112.7 32S113 40.1 113.1 44.4C113.1 48.9 112.8 53.7 112.7 58.4M113.1 14.3C113.2 18.6 113.3 22.9 113.4 27.1S113.5 35.3 113.4 39.4S113.1 48.2 113 52.6M113.7 56.4C109.8 56.4 106 56.3 102.2 56.3S95.1 56.5 91.6 56.6S84.5 56.9 81 56.9S73.9 56.9 70.4 56.7S63.3 56.2 59.8 56.1S52.7 56 49.2 56.1S42.1 56.7 38.6 56.9S31.5 57.3 28 57.3S21 57.4 17.4 57.3C13.4 57.3 9.2 57.2 5.1 57.1M96.5 57.3C92.9 57.3 89.3 57.2 85.7 57.2S78.7 57.3 75.2 57.4S68.2 57.5 64.7 57.7S57.7 58.2 54.1 58.3S47.2 58.1 43.6 58S36.1 57.7 32.3 57.6M6.7 59.1C6.6 55.2 6.5 51.1 6.5 47.4C6.5 43.9 6.6 40.7 6.7 37.3S7.1 30.7 7.2 27.3S7.2 20.7 7.2 17.3C7.2 13.5 7.1 9.3 7 5.4M6.3 47.1C6.3 43.2 6.3 39.3 6.3 35.6S6.4 28.5 6.4 24.9S6.7 17.4 6.8 13.7' fill='none' stroke='%2323407a' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round' /%3E%3C/svg%3E") 14 / 12px / 1px stretch; background: none; color: var(--biro); font-family: var(--font-ui); font-variation-settings: var(--ui-axes); font-weight: 650; font-size: 1.15rem; line-height: 1.1; letter-spacing: 0.01em; cursor: pointer; user-select: none; -webkit-tap-highlight-color: transparent; transition: transform 0.07s ease-out; } .ink-btn:nth-of-type(2n) { border-image-source: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='64' viewBox='0 0 120 64'%3E%3Cpath d='M30.2 6.8C34 6.8 37.9 6.9 41.8 7S49.6 7.3 53.4 7.3S61.2 7.2 65.1 7.1S72.8 6.7 76.7 6.6S84.5 6.6 88.3 6.6S96.1 6.6 100 6.7S109.6 6 111.6 6.8C112.5 7.2 112.8 7.5 113.1 8.4C113.9 10.4 113 16.3 113 20.2S113 28.1 113.1 32S113.5 39.9 113.6 43.8S114.6 53.4 113.7 55.7C113.2 56.8 112.8 57.3 111.7 57.7C109.5 58.6 104 57.4 100.1 57.2S92.5 57 88.7 57S81 57.1 77.2 57.2S69.6 57.2 65.7 57.3S58.1 57.5 54.3 57.6S46.6 57.8 42.8 57.7S35.2 57.3 31.3 57.2S23.7 56.9 19.9 56.9S10.4 57.9 8.4 57.1C7.5 56.8 7.2 56.5 6.9 55.6C6 53.6 6.6 47.7 6.6 43.8S6.6 35.9 6.6 32S6.5 24.1 6.6 20.2S6.1 10.4 7 8.4C7.3 7.6 7.6 7.3 8.4 7C10.2 6.3 15.2 7.3 18.6 7.3S25.4 7.1 28.8 7S35.5 6.8 38.9 6.8S45.7 6.7 49.1 6.7S55.9 6.7 59.3 6.7M112.5 19.2C112.5 23.2 112.5 27.3 112.5 31.3S112.3 39.3 112.5 43.4S114 53.3 113.2 55.5C112.8 56.6 112.4 57 111.4 57.5C109.2 58.4 103.7 57.6 99.8 57.6S92.2 57.7 88.4 57.7S80.7 57.3 76.9 57.2S69.3 57 65.4 57S57.8 57 54 57.1S46.3 57.3 42.5 57.4S34.9 57.7 31 57.8S23.4 57.7 19.6 57.6S10.1 58.1 8.1 57.2C7.1 56.8 6.7 56.5 6.4 55.5C5.6 53.5 6.9 48.1 7 44.4S6.9 37 6.8 33.3S6.8 25.9 6.8 22.2' fill='none' stroke='%2323407a' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round' /%3E%3C/svg%3E"); } .ink-btn::before { content: ""; position: absolute; z-index: -1; inset: -6px -9px -5px -8px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='60' viewBox='0 0 200 60' preserveAspectRatio='none'%3E%3Cpath d='M6.0 8.7L26.7 8.5L47.3 9.9L68.0 9.2L88.7 8.2L109.3 7.5L130.0 8.4L150.7 8.1L171.3 6.3L192.0 6.2L195.0 23.0L193.0 37.0L192.0 51.6L171.3 51.1L150.7 51.1L130.0 49.3L109.3 47.6L88.7 48.8L68.0 47.6L47.3 48.9L26.7 48.1L6.0 48.6L4.0 36.0L7.0 22.0Z' fill='%23ffe45c' opacity='.8'/%3E%3Cpath d='M10.0 19.1L29.8 19.6L49.6 21.7L69.3 20.5L89.1 19.8L108.9 21.0L128.7 19.1L148.4 18.5L168.2 19.3L188.0 19.0L191.0 31.0L189.0 45.0L188.0 56.3L168.2 54.2L148.4 54.6L128.7 54.7L108.9 53.1L89.1 53.0L69.3 53.9L49.6 53.5L29.8 54.4L10.0 55.1L8.0 44.0L11.0 30.0Z' fill='%23ffd83a' opacity='.32'/%3E%3C/svg%3E") center / 100% 100% no-repeat; opacity: 0; transform: scaleX(0.35) skewX(-8deg); transform-origin: 0 50%; transition: opacity 0.1s, transform 0.22s cubic-bezier(0.3, 0.7, 0.3, 1); pointer-events: none; } .ink-btn:hover::before, .ink-btn:focus-visible::before, .ink-btn.is-lit::before { opacity: 1; transform: none; } .ink-btn:focus-visible { outline: none; } .ink-btn:active { transform: translateY(2px); } .ink-btn:disabled { opacity: 0.45; cursor: default; } .ink-btn:disabled::before { opacity: 0; } .ink-btn--big { font-size: 1.45rem; min-height: 56px; padding: 4px 22px 6px; } .ink-btn--small { font-size: 0.95rem; min-height: 34px; padding: 0 8px 2px; border-width: 10px; border-image-width: 10px; } .ink-input { display: block; width: 100%; min-height: 52px; padding: 2px 10px 4px; border: 12px solid transparent; border-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='64' viewBox='0 0 160 64'%3E%3Cpath d='M5.8 6.7C9.8 6.7 13.9 6.6 17.9 6.8S25.4 7.3 29.2 7.5S36.7 7.7 40.5 7.7S48 7.7 51.7 7.6S59.2 7.4 63 7.3S70.5 7.3 74.3 7.4S81.8 7.9 85.6 8S93.1 8 96.8 8S104.3 8 108.1 7.8S115.6 7.4 119.4 7.3S126.9 7.3 130.7 7.3S138 7.5 141.9 7.6C146.1 7.7 150.6 7.6 155 7.7M22 6.5C25.8 6.7 29.6 6.9 33.3 7.1S40.4 7.7 43.9 7.7S51 7.2 54.6 7.2S61.6 7.3 65.2 7.4S72.2 7.7 75.8 7.8S82.8 8 86.4 8S93.4 7.9 97 7.7S104.1 7.2 107.6 7.2S114.7 7.6 118.2 7.7S125.2 7.6 128.8 7.5S136.5 7.2 140.3 7M153.1 6.8C153.2 11.1 153.4 15.4 153.4 19.6S153.5 27.9 153.5 32S153.5 40.1 153.4 44.3C153.3 48.7 153 53.3 152.8 57.9M152.7 10C152.9 14.1 153.1 18.2 153.2 22.3S153.2 30.1 153.1 34.1S152.8 42.3 152.6 46.4M155.7 56.5C151.1 56.8 146.1 57.4 141.7 57.4C137.8 57.3 134.2 56.5 130.5 56.5S123 57 119.3 57.2S111.8 57.8 108.1 57.9S100.6 57.5 96.8 57.4S89.3 57 85.6 57.1S78.1 57.9 74.4 58S66.9 58 63.2 57.9S55.7 57 51.9 57S44.5 57.4 40.7 57.6S33.2 57.8 29.5 57.7S22.3 57.1 18.3 57C13.7 56.8 8.3 56.8 3.4 56.8M6.9 57.7C6.9 54.1 6.7 50.5 6.7 46.9S6.8 40.3 6.9 36.9S7.2 30.3 7.3 26.9S7.2 20.3 7.2 16.9S7 9.6 6.9 6' fill='none' stroke='%2323407a' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' /%3E%3C/svg%3E") 14 / 12px / 1px stretch; background: transparent; color: var(--biro); caret-color: var(--biro); font-family: var(--font-ui); font-variation-settings: var(--ui-axes); font-weight: 500; font-size: 1.4rem; line-height: 1.2; outline: none; border-radius: 0; -webkit-appearance: none; appearance: none; } .ink-input:focus { border-image-source: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='64' viewBox='0 0 160 64'%3E%3Cpath d='M5.8 6.9C10 6.9 14.2 6.9 18.2 6.7C22.1 6.6 25.7 6.4 29.5 6.1S36.9 5.5 40.7 5.5S48.1 5.9 51.9 6.1S59.4 6.2 63.1 6.2S70.6 6.3 74.3 6.2S81.8 5.6 85.5 5.5S93 5.4 96.7 5.5S104.2 6 107.9 6.2S115.4 6.5 119.2 6.5S126.6 6.6 130.4 6.5S137.7 6 141.6 6C145.7 6 150.2 6.4 154.5 6.6M21.7 6.5C25.7 6.6 29.8 6.7 33.7 6.7S41.2 7 45 6.9S52.4 6.6 56.2 6.4S63.6 5.7 67.4 5.6S74.8 6 78.6 6.2S86 6.5 89.8 6.7S97.2 7.2 101 7.2S108.9 6.8 112.8 6.6M152.6 5.5C152.6 9.3 152.6 13.1 152.7 16.8C152.8 20.3 153.1 23.5 153.2 26.9S153.2 33.6 153.1 37S153 43.5 152.9 47C152.7 50.9 152.5 55.3 152.2 59.4M152.8 11.3C152.7 15 152.6 18.8 152.6 22.4C152.6 25.6 152.6 28.5 152.6 31.7S152.5 38.5 152.4 41.9M154 57.3C149.8 57.4 145.5 57.7 141.4 57.7C137.5 57.7 133.9 57.3 130.2 57.3S122.8 57.2 119.1 57.3S111.6 57.5 107.9 57.6S100.5 58.1 96.7 58.2S89.3 58.2 85.6 58.1S78.1 57.7 74.4 57.6S67 57.5 63.2 57.6S55.8 57.9 52.1 58S44.6 58.3 40.9 58.2S33.5 57.8 29.8 57.7S22.5 57.3 18.6 57.3C14.2 57.2 9.3 57.4 4.7 57.4M141.6 57.2C137.4 56.8 133.2 56.2 129.2 56.1C125.4 56.1 121.8 56.6 118.1 56.7S110.8 56.9 107.1 56.9S99.7 57 96 56.8S88.7 55.9 85 55.8S77.6 56 73.9 56.2S66.6 56.8 62.9 56.9S55.5 57 51.8 57S44.5 56.7 40.8 56.6S33.5 56.3 29.7 56.4C25.6 56.6 21.3 57.3 17.1 57.8M7.6 58.1C7.6 54.5 7.6 50.8 7.5 47.3S7.1 40.5 7.1 37.1S7.2 30.3 7.2 26.9S7.3 20.2 7.3 16.8S7.3 9.5 7.3 5.9M7.2 53.1C7.1 49.4 7 45.5 6.9 41.8S6.7 34.7 6.7 31.1S7.1 24 7.2 20.4S7.2 12.6 7.3 8.8' fill='none' stroke='%2323407a' stroke-width='2.9' stroke-linecap='round' stroke-linejoin='round' /%3E%3C/svg%3E"); } .ink-input::placeholder { color: var(--pencil); opacity: 0.6; } .ink-input::selection { background: rgba(255, 228, 92, 0.85); color: var(--biro); } .grade-box { display: inline-grid; place-items: center; width: 40px; height: 40px; border: 8px solid transparent; border-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56' viewBox='0 0 56 56'%3E%3Cpath d='M6.2 7.1C10 7.1 13.8 7.3 17.5 7.2S24.5 7.1 27.9 7S34.8 6.7 38.4 6.6C42.3 6.5 46.5 6.6 50.5 6.6M18 7C20.9 7.1 23.9 7.3 26.8 7.3S32.3 7.3 35.1 7.2S41.2 7 44.2 6.9M49 5.8C48.9 9.6 48.8 13.6 48.6 17.4C48.5 20.9 48.1 24.4 48.1 27.9S48.3 34.8 48.5 38.4C48.6 42.2 48.8 46.2 48.9 50.1M48.7 16C48.8 19.4 49 22.9 49.1 26.3S49.1 32.7 49.1 36.1S49 43.3 49 46.9M49.4 49C45.7 48.8 41.9 48.4 38.2 48.3S31.2 48.5 27.6 48.5S20.7 48.7 17.1 48.8S9.6 49 5.8 49M37.5 48.8C34.7 48.8 32 48.7 29.3 48.7S24.2 48.7 21.6 48.6S16.2 48.6 13.5 48.6M6.4 50.9C6.5 46.7 6.7 42.3 6.7 38.4C6.7 34.7 6.7 31.4 6.7 27.9S6.5 21.1 6.5 17.5S6.9 9.9 7 6M6.2 48.4C6.3 44 6.4 39.4 6.5 35.1C6.6 31 6.8 27.1 6.9 23S7 14.5 7.1 10.2' fill='none' stroke='%2323407a' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round' /%3E%3C/svg%3E") 12 / 8px / 1px stretch; font-family: var(--font-title); font-weight: 700; font-size: 1.75rem; line-height: 1; color: var(--red-pen); } .grade-box:nth-child(3n + 2) { border-image-source: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56' viewBox='0 0 56 56'%3E%3Cpath d='M27 7C30.4 6.9 33.9 6.7 37.3 6.7S45.9 6.4 47.6 7.2C48.2 7.5 48.5 7.7 48.7 8.4C49.3 10.1 48.4 14.9 48.3 18.2S48 24.7 47.9 28S48 34.5 48.1 37.8S49.1 46 48.5 47.5C48.3 48.1 48.1 48.3 47.5 48.5C46 49.1 41.1 48.5 37.8 48.4S31.3 48.3 28 48.2S21.5 47.7 18.2 47.6S9.7 48.2 8.5 47.8C8.3 47.7 8.2 47.7 8.1 47.5C7.6 46.4 8 41 7.8 37.8S7.4 31.3 7.3 28S7.3 21.5 7.4 18.2S7 9.9 7.6 8.5C7.8 8 8 7.8 8.5 7.6C9.9 7 15 7.8 18.3 7.7S24.9 7.6 28.1 7.4S34.7 7 38 6.7M48.4 24.6C48.5 28.4 48.6 32.2 48.7 36S50.2 45.2 49.4 47.4C49 48.4 48.4 48.9 47.4 49.3C45.4 50.1 40.8 49.5 37.5 49.4S31 49.1 27.7 49S21.2 49.1 17.9 49S9.9 49.4 8.1 48.7C7.3 48.4 7 48.1 6.6 47.3C5.8 45.6 6.6 40.8 6.5 37.5S6.1 31 6.1 27.7S6.2 21.2 6.2 17.9S5.4 9.9 6.2 8C6.6 7.1 7.1 6.7 8.1 6.3C10.3 5.5 16.4 6.6 20.5 6.7' fill='none' stroke='%2323407a' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round' /%3E%3C/svg%3E"); } .grade-box:nth-child(3n) { border-image-source: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56' viewBox='0 0 56 56'%3E%3Cpath d='M6.3 7.2C10 7.2 13.8 7.3 17.4 7.3S24.4 7.2 27.9 7.2S34.8 7.1 38.5 7.1C42.3 7.1 46.5 7.1 50.5 7.1M11.9 7.4C15.4 7.4 19 7.3 22.5 7.3S29 7.3 32.3 7.3S39.4 7.6 42.9 7.8M49.1 6.9C48.9 10.6 48.7 14.3 48.6 17.9S48.5 24.8 48.4 28.3S48.4 35.1 48.4 38.7C48.5 42.6 48.6 46.7 48.8 50.6M49.1 49.3C45.5 49.1 41.9 48.8 38.3 48.7S31.4 48.6 28 48.5S21.2 48.5 17.7 48.6S10.4 48.7 6.7 48.8M41.5 49.2C38 49.3 34.5 49.3 31 49.3S24.2 49.3 20.7 49.3S13.7 49.3 10.2 49.2M7.1 49.2C7.2 45.5 7.3 41.9 7.4 38.3S7.7 31.4 7.7 27.9S7.5 21.1 7.3 17.5C7.2 13.7 7 9.8 6.8 6M7.5 46.3C7.5 43.2 7.4 40.1 7.3 37.1S7.3 31.4 7.2 28.5S7.2 22.5 7.2 19.6' fill='none' stroke='%2323407a' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round' /%3E%3C/svg%3E"); } .grade-box.is-filled { animation: og-pop 0.35s cubic-bezier(0.2, 0.9, 0.3, 1.4); } /* the round being played: the same biro box, with a highlighter swiped across it */ .grade-box.is-current { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='40' viewBox='0 0 200 40' preserveAspectRatio='none'%3E%3Cpath d='M4.0 5.4L25.1 6.9L46.2 6.0L67.3 7.8L88.4 7.1L109.6 5.0L130.7 5.3L151.8 5.9L172.9 4.9L194.0 6.3L197.0 15.0L195.0 29.0L194.0 36.3L172.9 37.5L151.8 36.4L130.7 35.4L109.6 36.2L88.4 35.3L67.3 35.1L46.2 33.5L25.1 36.7L4.0 34.7L2.0 28.0L5.0 14.0Z' fill='%23ffe45c' opacity='.85'/%3E%3C/svg%3E") 50% 55% / 104% 74% no-repeat; background-origin: border-box; } .hl-chip { position: relative; isolation: isolate; display: inline-flex; align-items: center; gap: 0.5em; padding: 0.2em 0.6em 0.3em; color: var(--biro); font-family: var(--font-ui); font-variation-settings: var(--ui-axes); font-weight: 600; } .hl-chip::before { content: ""; position: absolute; z-index: -1; inset: 0 -4px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='60' viewBox='0 0 200 60' preserveAspectRatio='none'%3E%3Cpath d='M6.0 8.7L26.7 8.5L47.3 9.9L68.0 9.2L88.7 8.2L109.3 7.5L130.0 8.4L150.7 8.1L171.3 6.3L192.0 6.2L195.0 23.0L193.0 37.0L192.0 51.6L171.3 51.1L150.7 51.1L130.0 49.3L109.3 47.6L88.7 48.8L68.0 47.6L47.3 48.9L26.7 48.1L6.0 48.6L4.0 36.0L7.0 22.0Z' fill='%23ffe45c' opacity='.8'/%3E%3Cpath d='M10.0 19.1L29.8 19.6L49.6 21.7L69.3 20.5L89.1 19.8L108.9 21.0L128.7 19.1L148.4 18.5L168.2 19.3L188.0 19.0L191.0 31.0L189.0 45.0L188.0 56.3L168.2 54.2L148.4 54.6L128.7 54.7L108.9 53.1L89.1 53.0L69.3 53.9L49.6 53.5L29.8 54.4L10.0 55.1L8.0 44.0L11.0 30.0Z' fill='%23ffd83a' opacity='.32'/%3E%3C/svg%3E") center / 100% 100% no-repeat; transform-origin: 0 50%; animation: og-swipe 0.32s cubic-bezier(0.3, 0.7, 0.3, 1) both; } @keyframes og-swipe { from { transform: scaleX(0.05); opacity: 0.6; } to { transform: none; opacity: 1; } } /* ------------------------------------------------------------------ sticky notes */ .sticky { --note: var(--note-number); --tilt: -1.2deg; --curl: 30px; position: relative; isolation: isolate; padding: 26px 26px 30px; color: var(--navy); font-family: var(--font-ui); font-variation-settings: var(--ui-axes); transform: rotate(var(--tilt)); } .sticky::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(135deg, color-mix(in srgb, var(--note) 55%, #fff) 0%, color-mix(in srgb, var(--note) 92%, #fff) 30%, color-mix(in srgb, var(--note) 86%, #8a6d2a) 47%, color-mix(in srgb, var(--note) 70%, #5a4310) 49.4%, transparent 50%) right bottom / var(--curl) var(--curl) no-repeat, linear-gradient(135deg, transparent 42%, rgba(90, 65, 10, 0.16) 49.5%, transparent 50%) right calc(var(--curl) * -0.12) bottom calc(var(--curl) * -0.12) / calc(var(--curl) * 1.3) calc(var(--curl) * 1.3) no-repeat, linear-gradient(180deg, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0) 14%), linear-gradient(185deg, rgba(0, 0, 0, 0) 55%, rgba(110, 80, 20, 0.05)), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='g' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' seed='4' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .36 0 0 0 0 .31 0 0 0 0 .22 0 0 0 .3 -.11'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E"), linear-gradient(var(--note), var(--note)); background-size: var(--curl) var(--curl), calc(var(--curl) * 1.3) calc(var(--curl) * 1.3), auto, auto, 220px 220px, auto; clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--curl)), calc(100% - var(--curl)) 100%, 0 100%); } .sticky::after { content: ""; position: absolute; inset: 0; z-index: -2; box-shadow: 0 1px 1px rgba(70, 50, 10, 0.1), 0 8px 14px -6px rgba(70, 50, 10, 0.26), 0 22px 34px -22px rgba(70, 50, 10, 0.4); clip-path: polygon(-40px -40px, calc(100% + 40px) -40px, calc(100% + 40px) calc(100% - var(--curl) * 0.6), calc(100% - var(--curl) * 0.6) calc(100% + 40px), -40px calc(100% + 40px)); background: radial-gradient(circle at 100% 100%, rgba(70, 50, 10, 0.18), transparent 70%) right bottom / var(--curl) var(--curl) no-repeat; } .sticky--number { --note: var(--note-number); } .sticky--shape { --note: var(--note-shape); } .sticky--fractions { --note: var(--note-fractions); } .sticky--measures { --note: var(--note-measures); } .sticky--words { --note: var(--note-words); } .sticky--real-life { --note: var(--note-real-life); } .sticky--famous { --note: var(--note-famous); } .sticky__tab { position: absolute; top: -15px; right: 30px; z-index: 1; padding: 3px 12px 9px; background: linear-gradient(180deg, color-mix(in srgb, var(--note) 70%, #6b4f12) 0%, color-mix(in srgb, var(--note) 82%, #6b4f12) 100%); color: color-mix(in srgb, var(--navy) 88%, var(--note)); font-family: var(--font-ui); font-variation-settings: var(--ui-axes); font-weight: 650; font-size: 0.8rem; letter-spacing: 0.04em; border-radius: 3px 3px 0 0; transform: rotate(1.5deg); box-shadow: 0 -1px 2px rgba(70, 50, 10, 0.12); clip-path: inset(-4px -4px 6px -4px); } .sticky.is-slap { animation: og-slap 0.42s cubic-bezier(0.2, 0.9, 0.25, 1.15) both; } @keyframes og-slap { 0% { transform: translate(40px, -30px) rotate(calc(var(--tilt) + 9deg)) scale(1.12); opacity: 0; } 55% { opacity: 1; } 78% { transform: rotate(calc(var(--tilt) - 0.8deg)) scale(0.985); } 100% { transform: rotate(var(--tilt)); } } .sticky.is-shake { animation: og-shake 0.38s cubic-bezier(0.36, 0.07, 0.19, 0.97) both; } @keyframes og-shake { 10%, 90% { transform: translateX(-2px) rotate(var(--tilt)); } 20%, 80% { transform: translateX(5px) rotate(calc(var(--tilt) + 0.6deg)); } 30%, 50%, 70% { transform: translateX(-9px) rotate(calc(var(--tilt) - 0.8deg)); } 40%, 60% { transform: translateX(9px) rotate(calc(var(--tilt) + 0.8deg)); } 100% { transform: rotate(var(--tilt)); } } /* ------------------------------------------------------------------ washi tape */ .washi { --washi: #8fc9f2; --washi-angle: -3deg; --washi-ink: color-mix(in srgb, var(--washi) 55%, #fff); position: absolute; width: var(--washi-w, 116px); height: var(--washi-h, 28px); background: linear-gradient(180deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0) 40%, rgba(0, 0, 0, 0.04)), var(--washi); opacity: 0.8; mix-blend-mode: multiply; transform: rotate(var(--washi-angle)); clip-path: polygon(0.3px 0.0%, 2.3px 11.1%, 4.9px 22.2%, 3.3px 33.3%, 2.6px 44.4%, 0.6px 55.6%, 2.9px 66.7%, 2.9px 77.8%, 0.5px 88.9%, 3.6px 100.0%, calc(100% - 1.6px) 100.0%, calc(100% - 3.8px) 88.9%, calc(100% - 1.6px) 77.8%, calc(100% - 2.7px) 66.7%, calc(100% - 4.1px) 55.6%, calc(100% - 2.4px) 44.4%, calc(100% - 2.0px) 33.3%, calc(100% - 0.4px) 22.2%, calc(100% - 2.5px) 11.1%, calc(100% - 4.2px) 0.0%); pointer-events: none; } .washi--stripes { background: linear-gradient(180deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0) 40%), repeating-linear-gradient(-55deg, var(--washi) 0 7px, var(--washi-ink) 7px 12px); } .washi--dots { background: radial-gradient(circle, var(--washi-ink) 0 2.2px, transparent 2.8px) 0 0 / 11px 11px, radial-gradient(circle, var(--washi-ink) 0 2.2px, transparent 2.8px) 5.5px 5.5px / 11px 11px, var(--washi); } .washi--grid { background: linear-gradient(var(--washi-ink) 1.5px, transparent 1.5px) 0 0 / 8px 8px, linear-gradient(90deg, var(--washi-ink) 1.5px, transparent 1.5px) 0 0 / 8px 8px, var(--washi); } .washi--check { background: repeating-conic-gradient(var(--washi) 0 25%, var(--washi-ink) 0 50%) 0 0 / 14px 14px; } /* ------------------------------------------------------------------ the pencil timer */ .pencil { --left: 1; --pencil-len: 240px; --pencil-h: 18px; --paint-hi: #ffe27a; --paint: #f7c62a; --paint-lo: #e0a800; --paint-edge: #b98600; position: relative; display: flex; align-items: center; width: calc(var(--pencil-len) + var(--pencil-h) * 3.3); height: var(--pencil-h); filter: drop-shadow(0 2px 1.5px rgba(60, 45, 10, 0.22)); } .pencil > i { display: block; height: 100%; flex: none; } .pencil__rubber { width: calc(var(--pencil-h) * 0.9); border-radius: calc(var(--pencil-h) * 0.32) 0 0 calc(var(--pencil-h) * 0.32); background: linear-gradient(180deg, rgba(255, 255, 255, 0.35), rgba(255, 255, 255, 0) 35%, rgba(0, 0, 0, 0.12)), #f59ab0; } .pencil__ferrule { width: calc(var(--pencil-h) * 1.05); background: linear-gradient(180deg, rgba(255, 255, 255, 0.75) 0%, rgba(255, 255, 255, 0.15) 30%, rgba(0, 0, 0, 0) 55%, rgba(0, 0, 0, 0.28) 100%), repeating-linear-gradient(90deg, #b9bec6 0 2px, #8e949d 2px 3px, #d7dbe0 3px 5px), #b9bec6; } .pencil__body { width: var(--pencil-len); transform-origin: 0 50%; transform: scaleX(var(--left)); background: linear-gradient(180deg, var(--paint-hi) 0 24%, var(--paint) 24% 52%, var(--paint-lo) 52% 80%, var(--paint-edge) 80% 100%); transition: background 0.3s; } .pencil__tip { position: relative; width: calc(var(--pencil-h) * 1.35); transform: translateX(calc((var(--left) - 1) * var(--pencil-len))); background: linear-gradient(180deg, rgba(255, 255, 255, 0.25), rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 0.14)), linear-gradient(90deg, #efcf9e, #e4b87d); clip-path: polygon(0 0, 100% 46%, 100% 54%, 0 100%); } .pencil__tip::before { content: ""; position: absolute; left: -1px; top: 0; width: 26%; height: 100%; background: linear-gradient(180deg, var(--paint-hi) 0 24%, var(--paint) 24% 52%, var(--paint-lo) 52% 80%, var(--paint-edge) 80% 100%); clip-path: polygon(0 0, 55% 0, 100% 12%, 45% 24%, 100% 38%, 40% 52%, 100% 64%, 45% 78%, 100% 90%, 55% 100%, 0 100%); transition: background 0.3s; } .pencil__tip::after { content: ""; position: absolute; right: 0; top: 0; width: 36%; height: 100%; background: linear-gradient(180deg, #7b818b, #3d424a 55%, #2b2f35); } .pencil.is-danger { --paint-hi: #ff8a7a; --paint: #ef4b3c; --paint-lo: #d0342a; --paint-edge: #a2241d; animation: og-pencil-shake 0.34s linear infinite; } /* --shake (1 to 5, one more each of the last seconds) makes it shake harder */ @keyframes og-pencil-shake { 0%, 100% { translate: 0 0; rotate: 0deg; } 25% { translate: calc(var(--shake, 1) * -0.9px - 0.6px) calc(var(--shake, 1) * 0.3px + 0.2px); rotate: calc(var(--shake, 1) * -0.45deg - 0.35deg); } 50% { translate: calc(var(--shake, 1) * 0.7px + 0.3px) calc(var(--shake, 1) * -0.3px - 0.2px); rotate: calc(var(--shake, 1) * 0.3deg + 0.2deg); } 75% { translate: calc(var(--shake, 1) * 0.9px + 0.6px) calc(var(--shake, 1) * 0.3px + 0.2px); rotate: calc(var(--shake, 1) * 0.45deg + 0.35deg); } } .pencil-shaving { position: absolute; width: 11px; height: 8px; pointer-events: none; border-radius: 60% 40% 55% 45%; background: radial-gradient(ellipse at 35% 45%, transparent 0 22%, #f0d3a2 26%, #d9ad70 52%, var(--paint, #f7c62a) 56% 68%, transparent 72%); animation: og-shaving 1.1s cubic-bezier(0.3, 0.2, 0.6, 1) forwards; } @keyframes og-shaving { from { transform: translate(0, 0) rotate(0); opacity: 1; } to { transform: translate(var(--dx, 8px), 46px) rotate(var(--rot, 220deg)); opacity: 0; } } /* ------------------------------------------------------------------ gold star sticker */ .star-sticker { display: inline-block; width: var(--star, 64px); height: var(--star, 64px); filter: drop-shadow(0 1.5px 1px rgba(80, 55, 0, 0.35)); transform: rotate(var(--star-tilt, -10deg)); } .star-sticker svg { display: block; width: 100%; height: 100%; overflow: visible; } .star-sticker .ss-shine { transform-box: fill-box; transform: translateX(-130%); } .star-sticker.is-slapped { animation: og-star-slap 0.42s cubic-bezier(0.2, 0.9, 0.3, 1.25) both; } .star-sticker.is-slapped .ss-shine { animation: og-shine 0.9s 0.3s cubic-bezier(0.4, 0, 0.2, 1) both; } .star-sticker.is-shiny .ss-shine { animation: og-shine 2.8s 0.6s ease-in-out infinite; } @keyframes og-star-slap { 0% { transform: scale(2.3) rotate(calc(var(--star-tilt, -10deg) - 25deg)); opacity: 0; } 60% { transform: scale(0.9) rotate(var(--star-tilt, -10deg)); opacity: 1; } 100% { transform: scale(1) rotate(var(--star-tilt, -10deg)); } } @keyframes og-shine { 0% { transform: translateX(-130%); } 60%, 100% { transform: translateX(130%); } } /* ------------------------------------------------------------------ red rubber stamp */ .stamp { --stamp-tilt: -9deg; display: inline-grid; place-items: center; padding: 0 0.26em 0.02em; border: 14px solid transparent; border-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='80' viewBox='0 0 120 80'%3E%3Cpath d='M12.8 4.3L106.7 4.3Q116.2 4.2 115.8 13.3L115.7 67.1Q116.2 76.1 106.8 76.4L12.8 76.2Q4.1 75.9 4.0 67.3L4.3 13.0Q4.3 3.8 13.1 3.9Z' fill='none' stroke='%23e0352b' stroke-width='5'/%3E%3Cpath d='M15.2 11.7L104.3 11.5Q108.5 11.2 108.7 15.6L108.3 64.2Q108.5 68.4 104.6 68.4L15.5 68.8Q11.5 68.3 11.5 64.4L11.5 15.7Q11.5 11.6 15.5 11.6Z' fill='none' stroke='%23e0352b' stroke-width='1.8'/%3E%3C/svg%3E") 18 / 14px / 0 stretch; color: var(--red-pen); font-family: var(--font-title); font-weight: 700; font-size: 4rem; line-height: 0.86; letter-spacing: 0.02em; transform: rotate(var(--stamp-tilt)); mix-blend-mode: multiply; opacity: 0.9; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -2.6 1.75'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='discrete' tableValues='0 .55 1 1 1 1 1'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E") 0 0 / 180px 180px; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -2.6 1.75'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='discrete' tableValues='0 .55 1 1 1 1 1'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E") 0 0 / 180px 180px; } .stamp > svg { width: 1em; height: 1em; } .stamp--round { border-width: 12px; border-image: none; border-radius: 50%; aspect-ratio: 1; padding: 0.18em; outline: 0.06em solid currentColor; outline-offset: -0.24em; box-shadow: inset 0 0 0 0.05em currentColor, 0 0 0 0.05em currentColor; border-color: transparent; } .stamp.is-thump { animation: og-thump 0.38s cubic-bezier(0.25, 0.9, 0.3, 1.1) both; } @keyframes og-thump { 0% { transform: scale(2.6) rotate(calc(var(--stamp-tilt) - 14deg)); opacity: 0; } 55% { transform: scale(0.94) rotate(var(--stamp-tilt)); opacity: 0.95; } 72% { transform: scale(1.03) rotate(var(--stamp-tilt)); } 100% { transform: scale(1) rotate(var(--stamp-tilt)); opacity: 0.9; } } /* ------------------------------------------------------------------ the results envelope */ .envelope { --tear: 15%; position: relative; width: var(--envelope-w, 340px); aspect-ratio: 1.55; filter: drop-shadow(0 2px 2px rgba(70, 50, 10, 0.18)) drop-shadow(0 14px 18px rgba(70, 50, 10, 0.22)); } .envelope > * { position: absolute; inset: 0; } .envelope__back { z-index: 1; background: linear-gradient(180deg, rgba(60, 40, 5, 0.25), rgba(60, 40, 5, 0) 26%), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='f' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.7' numOctaves='2' seed='5' stitchTiles='stitch' result='a'/%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.035 .09' numOctaves='2' seed='9' stitchTiles='stitch' result='b'/%3E%3CfeBlend in='a' in2='b' mode='multiply'/%3E%3CfeColorMatrix values='0 0 0 0 .4 0 0 0 0 .27 0 0 0 0 .1 0 0 0 .75 -.28'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E"), var(--manila-dark); background-size: auto, 240px 240px, auto; clip-path: polygon(0.0% calc(var(--tear) + -2.9px), 4.3% calc(var(--tear) + -6.6px), 6.3% calc(var(--tear) + -4.1px), 9.1% calc(var(--tear) + -8.3px), 13.7% calc(var(--tear) + -2.3px), 17.5% calc(var(--tear) + -7.7px), 21.5% calc(var(--tear) + -3.4px), 24.5% calc(var(--tear) + -6.6px), 26.5% calc(var(--tear) + -2.8px), 30.6% calc(var(--tear) + -6.3px), 33.2% calc(var(--tear) + -2.0px), 37.5% calc(var(--tear) + -6.5px), 41.7% calc(var(--tear) + -1.7px), 45.5% calc(var(--tear) + -6.8px), 47.4% calc(var(--tear) + -5.1px), 49.7% calc(var(--tear) + -6.7px), 52.4% calc(var(--tear) + -4.7px), 56.2% calc(var(--tear) + -6.8px), 60.9% calc(var(--tear) + -2.3px), 65.2% calc(var(--tear) + -6.2px), 68.0% calc(var(--tear) + -4.2px), 71.0% calc(var(--tear) + -8.3px), 75.3% calc(var(--tear) + -5.9px), 78.3% calc(var(--tear) + -8.4px), 81.4% calc(var(--tear) + -2.0px), 86.1% calc(var(--tear) + -6.8px), 90.4% calc(var(--tear) + -3.5px), 93.4% calc(var(--tear) + -8.1px), 98.0% calc(var(--tear) + -2.7px), 100.0% calc(var(--tear) + -5.5px), 100% 100%, 0% 100%); border-radius: 3px; } .envelope__inside { z-index: 2; inset: calc(var(--tear) + 8px) 6% 5% 6%; clip-path: inset(-600px -12px 0 -12px); } .envelope__inside > * { transition: transform 0.8s cubic-bezier(0.3, 0.7, 0.2, 1) 0.1s; } .envelope__front { z-index: 3; background: var(--manila); clip-path: polygon(0.0% calc(var(--tear) + 2.1px), 4.3% calc(var(--tear) + -1.6px), 6.3% calc(var(--tear) + 0.9px), 9.1% calc(var(--tear) + -3.3px), 13.7% calc(var(--tear) + 2.7px), 17.5% calc(var(--tear) + -2.7px), 21.5% calc(var(--tear) + 1.6px), 24.5% calc(var(--tear) + -1.6px), 26.5% calc(var(--tear) + 2.2px), 30.6% calc(var(--tear) + -1.3px), 33.2% calc(var(--tear) + 3.0px), 37.5% calc(var(--tear) + -1.5px), 41.7% calc(var(--tear) + 3.3px), 45.5% calc(var(--tear) + -1.8px), 47.4% calc(var(--tear) + -0.1px), 49.7% calc(var(--tear) + -1.7px), 52.4% calc(var(--tear) + 0.3px), 56.2% calc(var(--tear) + -1.8px), 60.9% calc(var(--tear) + 2.7px), 65.2% calc(var(--tear) + -1.2px), 68.0% calc(var(--tear) + 0.8px), 71.0% calc(var(--tear) + -3.3px), 75.3% calc(var(--tear) + -0.9px), 78.3% calc(var(--tear) + -3.4px), 81.4% calc(var(--tear) + 3.0px), 86.1% calc(var(--tear) + -1.8px), 90.4% calc(var(--tear) + 1.5px), 93.4% calc(var(--tear) + -3.1px), 98.0% calc(var(--tear) + 2.3px), 100.0% calc(var(--tear) + -0.5px), 100% 100%, 0% 100%); transition: background-color 0.2s; } .envelope__face { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0) 30%, rgba(60, 40, 5, 0.08)), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='80' viewBox='0 0 200 80'%3E%3Cg opacity='.34'%3E%3Cpath d='M13.7 29.7C15.2 27.1 16.4 24.3 18.2 22S22.4 17.7 24.8 16.1S30 13 32.9 12.2S38.9 10.8 41.9 11S48 11.7 50.8 12.9S56.3 15.8 58.5 17.9S62.5 22.4 63.8 25S66.1 30.5 66.6 33.3S67.3 39.1 67 41.9S66 47.5 64.9 50.1S62.3 55.1 60.4 57.2S56.3 61.1 53.9 62.4S48.8 64.6 46.2 65.1S40.8 65.5 38.1 65.2S32.9 64.1 30.5 63.1S25.7 60.8 23.7 59.2S19.6 55.6 18.1 53.5S15.3 48.7 14.5 46.1S13.5 40.6 13.7 37.9S14.5 32.4 15.6 29.9S18.5 25.2 20 22.8M28.1 22.9C30.8 22 33.4 20.5 36.1 20.2S41.8 20.1 44.4 20.7S49.7 22.6 51.9 24.1S56.2 27.8 57.6 30.1S60.2 35.3 60.5 38.1S60.6 43.9 59.8 46.7S57.5 52.1 55.7 54.4S51.4 58.7 48.8 60.1S42.9 62.5 39.9 62.6S33.4 62.1 30.6 60.9S25 57.5 23 55.2S19.5 49.8 18.6 46.9S17.5 40.7 17.9 37.7S19.3 31.5 20.9 29S24.8 24.1 27.2 22.5S32.8 20.5 35.5 19.5' fill='none' stroke='%233c4f78' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' /%3E%3Cpath d='M78 22Q84 18 90 22Q96 18 102 22Q108 18 114 22Q120 18 126 22Q132 18 138 22Q144 18 150 22Q156 18 162 22Q168 18 174 22Q180 18 186 22Q192 18 198 22' fill='none' stroke='%23324a7a' stroke-width='1.6'/%3E%3Cpath d='M78 31Q84 27 90 31Q96 27 102 31Q108 27 114 31Q120 27 126 31Q132 27 138 31Q144 27 150 31Q156 27 162 31Q168 27 174 31Q180 27 186 31Q192 27 198 31' fill='none' stroke='%23324a7a' stroke-width='1.6'/%3E%3Cpath d='M78 40Q84 36 90 40Q96 36 102 40Q108 36 114 40Q120 36 126 40Q132 36 138 40Q144 36 150 40Q156 36 162 40Q168 36 174 40Q180 36 186 40Q192 36 198 40' fill='none' stroke='%23324a7a' stroke-width='1.6'/%3E%3Cpath d='M78 49Q84 45 90 49Q96 45 102 49Q108 45 114 49Q120 45 126 49Q132 45 138 49Q144 45 150 49Q156 45 162 49Q168 45 174 49Q180 45 186 49Q192 45 198 49' fill='none' stroke='%23324a7a' stroke-width='1.6'/%3E%3Cpath d='M78 58Q84 54 90 58Q96 54 102 58Q108 54 114 58Q120 54 126 58Q132 54 138 58Q144 54 150 58Q156 54 162 58Q168 54 174 58Q180 54 186 58Q192 54 198 58' fill='none' stroke='%23324a7a' stroke-width='1.6'/%3E%3C/g%3E%3C/svg%3E") right 6% top calc(var(--tear) + 10%) / 42% auto no-repeat, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='f' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.7' numOctaves='2' seed='5' stitchTiles='stitch' result='a'/%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.035 .09' numOctaves='2' seed='9' stitchTiles='stitch' result='b'/%3E%3CfeBlend in='a' in2='b' mode='multiply'/%3E%3CfeColorMatrix values='0 0 0 0 .4 0 0 0 0 .27 0 0 0 0 .1 0 0 0 .75 -.28'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E"), var(--manila); background-size: auto, 42% auto, 240px 240px, auto; clip-path: polygon(0.0% calc(var(--tear) + 5.1px), 4.3% calc(var(--tear) + 0.5px), 6.3% calc(var(--tear) + 4.0px), 9.1% calc(var(--tear) + -1.0px), 13.7% calc(var(--tear) + 5.8px), 17.5% calc(var(--tear) + 0.4px), 21.5% calc(var(--tear) + 4.9px), 24.5% calc(var(--tear) + 0.8px), 26.5% calc(var(--tear) + 4.5px), 30.6% calc(var(--tear) + 1.9px), 33.2% calc(var(--tear) + 5.0px), 37.5% calc(var(--tear) + 1.5px), 41.7% calc(var(--tear) + 5.6px), 45.5% calc(var(--tear) + 1.2px), 47.4% calc(var(--tear) + 1.7px), 49.7% calc(var(--tear) + 1.6px), 52.4% calc(var(--tear) + 2.2px), 56.2% calc(var(--tear) + 1.3px), 60.9% calc(var(--tear) + 5.3px), 65.2% calc(var(--tear) + 2.1px), 68.0% calc(var(--tear) + 3.3px), 71.0% calc(var(--tear) + -0.9px), 75.3% calc(var(--tear) + 1.6px), 78.3% calc(var(--tear) + -1.2px), 81.4% calc(var(--tear) + 4.8px), 86.1% calc(var(--tear) + 0.9px), 90.4% calc(var(--tear) + 3.9px), 93.4% calc(var(--tear) + -0.6px), 98.0% calc(var(--tear) + 4.8px), 100.0% calc(var(--tear) + 2.1px), 100% 100%, 0% 100%); border-radius: 0 0 3px 3px; } .envelope__strip { z-index: 4; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='4'%3E%3Ccircle cx='3' cy='2' r='1.1' fill='%238a6f3c' opacity='.55'/%3E%3C/svg%3E") 0 calc(var(--tear) - 2px) / 12px 4px repeat-x, linear-gradient(180deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0) 70%), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='f' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.7' numOctaves='2' seed='5' stitchTiles='stitch' result='a'/%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.035 .09' numOctaves='2' seed='9' stitchTiles='stitch' result='b'/%3E%3CfeBlend in='a' in2='b' mode='multiply'/%3E%3CfeColorMatrix values='0 0 0 0 .4 0 0 0 0 .27 0 0 0 0 .1 0 0 0 .75 -.28'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E"), var(--manila); background-size: 12px 4px, auto, 240px 240px, auto; clip-path: polygon(0% 0%, 100% 0%, 100.0% calc(var(--tear) + -0.1px), 98.0% calc(var(--tear) + 2.7px), 93.4% calc(var(--tear) + -2.7px), 90.4% calc(var(--tear) + 1.9px), 86.1% calc(var(--tear) + -1.4px), 81.4% calc(var(--tear) + 3.4px), 78.3% calc(var(--tear) + -3.0px), 75.3% calc(var(--tear) + -0.5px), 71.0% calc(var(--tear) + -2.9px), 68.0% calc(var(--tear) + 1.2px), 65.2% calc(var(--tear) + -0.8px), 60.9% calc(var(--tear) + 3.1px), 56.2% calc(var(--tear) + -1.4px), 52.4% calc(var(--tear) + 0.7px), 49.7% calc(var(--tear) + -1.3px), 47.4% calc(var(--tear) + 0.3px), 45.5% calc(var(--tear) + -1.4px), 41.7% calc(var(--tear) + 3.7px), 37.5% calc(var(--tear) + -1.1px), 33.2% calc(var(--tear) + 3.4px), 30.6% calc(var(--tear) + -0.9px), 26.5% calc(var(--tear) + 2.6px), 24.5% calc(var(--tear) + -1.2px), 21.5% calc(var(--tear) + 2.0px), 17.5% calc(var(--tear) + -2.3px), 13.7% calc(var(--tear) + 3.1px), 9.1% calc(var(--tear) + -2.9px), 6.3% calc(var(--tear) + 1.3px), 4.3% calc(var(--tear) + -1.2px), 0.0% calc(var(--tear) + 2.5px)); border-radius: 3px 3px 0 0; transform-origin: 8% 0; } .envelope__label { position: absolute; left: 9%; bottom: 18%; max-width: 64%; padding: 8px 16px 10px; background: var(--slip); border-radius: 3px; box-shadow: 0 1px 1.5px rgba(70, 50, 10, 0.25); transform: rotate(-1.5deg); color: var(--biro); font-family: var(--font-title); font-weight: 700; font-size: 1.7rem; line-height: 1.05; } .envelope__label::after { content: ""; display: block; height: 1px; margin-top: 6px; background: repeating-linear-gradient(90deg, rgba(0, 46, 95, 0.28) 0 5px, transparent 5px 8px); } .envelope.is-torn .envelope__front { background-color: var(--manila-light); } .envelope.is-torn .envelope__strip { animation: og-tear 0.62s cubic-bezier(0.45, 0, 0.6, 1) forwards; } @keyframes og-tear { 0% { transform: none; opacity: 1; } 18% { transform: rotate(-2deg) translateY(-2px); } 99% { transform: translate(34%, -80%) rotate(18deg); opacity: 0; } 100% { transform: translate(34%, -80%) rotate(18deg); opacity: 0; display: none; } } .envelope.is-torn .envelope__strip { pointer-events: none; } .envelope.is-open .envelope__inside > * { transform: translateY(var(--slide, -72%)); } /* ------------------------------------------------------------------ the results slip */ .slip { position: relative; padding: 22px 22px 18px; color: var(--navy); background: linear-gradient(180deg, rgba(28, 176, 246, 0.12), rgba(28, 176, 246, 0.12)) 0 0 / 100% 6px no-repeat, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='g' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' seed='4' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .36 0 0 0 0 .31 0 0 0 0 .22 0 0 0 .3 -.11'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E"), var(--slip); background-size: 100% 6px, 220px 220px, auto; font-family: var(--font-ui); font-variation-settings: var(--ui-axes); box-shadow: 0 1px 1.5px rgba(40, 30, 5, 0.14), 0 14px 26px -14px rgba(40, 30, 5, 0.38); border-radius: 2px; } /* the printed double rule round the slip (and the cover), drawn with a ruler, not a CSS box */ .slip::before { content: ""; position: absolute; inset: 5px; border: 12px solid transparent; border-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='100' viewBox='0 0 160 100'%3E%3Cpath d='M2.8 6C5.9 6.1 9.1 6.1 12 6.1C14.7 6.1 17.1 6 19.6 6S24.6 6.1 27.1 6.1S32.1 6.2 34.6 6.2S39.7 6.3 42.2 6.3S47.2 6.2 49.7 6.2S54.7 6.2 57.2 6.2S62.3 6.3 64.8 6.3S69.8 6.4 72.3 6.4S77.3 6.4 79.8 6.4S84.9 6.3 87.4 6.3S92.4 6.3 94.9 6.3S99.9 6.5 102.5 6.5S107.5 6.5 110 6.5S115 6.4 117.5 6.4S122.5 6.3 125.1 6.3S130.1 6.4 132.6 6.5S137.6 6.5 140.1 6.5S145 6.5 147.7 6.4C150.5 6.4 153.7 6.4 156.7 6.3M154 3.9C154 6.7 154 9.6 154 12.3S153.9 17.4 153.9 19.9S153.8 24.9 153.7 27.4S153.7 32.5 153.7 35S153.8 40 153.8 42.5S153.7 47.6 153.7 50.1S153.6 55.1 153.6 57.6S153.6 62.7 153.6 65.2S153.7 70.2 153.7 72.7S153.7 77.8 153.7 80.3S153.6 85.3 153.6 87.8S153.7 93.3 153.7 96.1M157 94C153.8 94 150.5 93.9 147.5 93.9C144.8 93.9 142.5 93.8 140 93.8S134.9 93.8 132.4 93.8S127.4 93.9 124.9 93.9S119.9 93.9 117.4 93.8S112.4 93.8 109.9 93.8S104.9 93.7 102.4 93.6S97.3 93.6 94.8 93.6S89.8 93.6 87.3 93.6S82.3 93.7 79.8 93.7S74.8 93.6 72.3 93.6S67.3 93.6 64.8 93.6S59.7 93.5 57.2 93.5S52.2 93.5 49.7 93.5S44.7 93.5 42.2 93.5S37.2 93.6 34.7 93.6S29.7 93.6 27.2 93.6S22.1 93.6 19.6 93.5S14.7 93.4 12.1 93.4S6.6 93.4 3.9 93.4M6.4 97C6.3 93.9 6.3 90.6 6.2 87.6C6.2 85 6.1 82.6 6.1 80.1S6 75 6 72.5S6.1 67.5 6.1 65S6 59.9 6 57.4S5.9 52.4 5.9 49.9S5.9 44.8 5.9 42.3S6 37.3 6 34.7S6 29.7 6 27.2S5.9 22.1 5.9 19.6S5.9 14.7 5.9 12.1C6 9.1 6 5.9 6.1 2.8' fill='none' stroke='%23002e5f' stroke-opacity='.42' stroke-width='1.3' stroke-linecap='round'/%3E%3Cpath d='M6.5 9.5C9.7 9.5 13.1 9.6 16.1 9.6C18.8 9.6 21.1 9.6 23.6 9.6S28.6 9.5 31.1 9.5S36.1 9.4 38.6 9.4S43.6 9.5 46.1 9.5S51.1 9.6 53.6 9.5S58.6 9.4 61.1 9.4S66.1 9.3 68.6 9.3S73.6 9.4 76.1 9.4S81.2 9.5 83.7 9.4S88.7 9.4 91.2 9.3S96.2 9.2 98.7 9.2S103.7 9.4 106.2 9.4S111.2 9.4 113.7 9.4S118.7 9.3 121.2 9.3S126.2 9.2 128.7 9.2S133.7 9.3 136.2 9.3S141.1 9.4 143.7 9.4C146.5 9.4 149.7 9.3 152.6 9.2M150.4 6.6C150.4 9.8 150.4 13.1 150.4 16.1C150.5 18.8 150.6 21.1 150.6 23.7S150.6 28.7 150.6 31.2S150.6 36.2 150.6 38.7S150.6 43.7 150.6 46.2S150.7 51.3 150.7 53.8S150.7 58.8 150.7 61.3S150.7 66.3 150.7 68.8S150.6 73.8 150.6 76.3S150.6 81.3 150.6 83.9C150.6 86.7 150.6 89.7 150.6 92.6M152.8 90.5C149.6 90.5 146.3 90.4 143.3 90.4C140.5 90.4 138 90.4 135.4 90.4S130.1 90.6 127.5 90.6S122.2 90.6 119.6 90.6S114.3 90.6 111.6 90.6S106.4 90.6 103.7 90.6S98.5 90.8 95.8 90.8S90.5 90.8 87.9 90.7S82.6 90.7 80 90.7S74.7 90.7 72.1 90.7S66.8 90.8 64.2 90.8S58.9 90.8 56.3 90.8S51 90.7 48.4 90.7S43.1 90.8 40.4 90.8S35.2 90.8 32.5 90.8S27.3 90.8 24.6 90.7S19.4 90.6 16.7 90.6S10.8 90.7 7.8 90.8M9.3 93.3C9.3 90.2 9.3 86.8 9.3 83.9C9.4 81.2 9.4 78.9 9.4 76.3S9.5 71.3 9.5 68.8S9.5 63.8 9.4 61.3S9.3 56.3 9.3 53.8S9.3 48.7 9.4 46.2S9.4 41.2 9.5 38.7S9.5 33.7 9.5 31.2S9.6 26.2 9.6 23.7S9.5 18.7 9.5 16.1S9.5 10.5 9.5 7.8' fill='none' stroke='%23002e5f' stroke-opacity='.3' stroke-width='.75' stroke-linecap='round'/%3E%3C/svg%3E") 12 / 12px / 0 stretch; pointer-events: none; } .slip__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 0 6px 8px; border-bottom: 1.5px solid rgba(0, 46, 95, 0.5); } .slip__title { font-family: var(--font-title); font-weight: 700; font-size: 2rem; line-height: 1; color: var(--navy); } .slip__no { font-family: var(--font-hand); font-size: 1.15rem; color: var(--biro); } .slip__rows { margin: 4px 0 0; padding: 0; list-style: none; } .slip__row { display: grid; grid-template-columns: minmax(5.5em, auto) 1fr auto; align-items: center; gap: 10px; padding: 5px 6px; border-bottom: 1px dashed rgba(0, 46, 95, 0.22); cursor: pointer; -webkit-tap-highlight-color: transparent; } .slip__row:hover, .slip__row:focus-visible { background: rgba(255, 228, 92, 0.35); outline: none; } .slip__strand { font-size: 0.75rem; font-weight: 650; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(0, 46, 95, 0.66); } .slip__answer { font-family: var(--font-hand); font-size: 1.2rem; color: var(--biro); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .slip__grade { font-family: var(--font-title); font-weight: 700; font-size: 1.8rem; line-height: 1; color: var(--red-pen); min-width: 1.6em; text-align: center; } .slip__total { display: flex; justify-content: space-between; align-items: baseline; padding: 10px 6px 4px; font-weight: 700; font-size: 1.1rem; } .slip__total b { font-family: var(--font-title); font-size: 2.2rem; color: var(--red-pen); line-height: 1; } .slip__line { padding: 4px 6px 8px; font-size: 0.95rem; line-height: 1.3; color: var(--navy); } .slip__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 6px 2px; border-top: 1px solid rgba(0, 46, 95, 0.2); font-size: 0.9rem; color: rgba(0, 46, 95, 0.8); } /* ------------------------------------------------------------------ confetti and specks */ .punch, .paper-strip, .confetti-star, .speck { position: absolute; left: 0; top: 0; pointer-events: none; will-change: transform, opacity; } .punch { width: var(--d, 9px); height: var(--d, 9px); border-radius: 50%; background: var(--c, var(--slip)); box-shadow: 0 1px 1px rgba(40, 30, 5, 0.22), inset 0 -0.5px 0 rgba(0, 0, 0, 0.08); } .punch--grid { background: linear-gradient(var(--grid) 1px, transparent 1px) 1px 2px / 5px 5px, linear-gradient(90deg, var(--grid) 1px, transparent 1px) 2px 1px / 5px 5px, var(--paper); } .punch--note { background: var(--c, var(--note-shape)); } .paper-strip { width: var(--w, 5px); height: var(--h, 15px); background: var(--c, var(--note-measures)); box-shadow: 0 1px 1px rgba(40, 30, 5, 0.16); } .confetti-star { width: var(--d, 13px); height: var(--d, 13px); background: linear-gradient(135deg, #ffe27a, var(--gold) 55%, #c98a00); clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); } .speck { width: var(--d, 2.5px); height: var(--d, 2.5px); border-radius: 40% 60% 50% 50%; background: var(--pencil); opacity: 0.8; } .og-fly { animation: og-fly var(--dur, 1.2s) cubic-bezier(0.2, 0.6, 0.35, 1) var(--delay, 0s) both; } @keyframes og-fly { 0% { transform: translate(0, 0) rotate(0deg) scale(var(--s0, 1)); opacity: 1; } 75% { opacity: 1; } 100% { transform: translate(var(--dx, 0px), var(--dy, 140px)) rotate(var(--rot, 300deg)) scale(var(--s1, 1)); opacity: 0; } } .og-burst { animation: og-burst var(--dur, 0.9s) cubic-bezier(0.15, 0.8, 0.3, 1) var(--delay, 0s) both; } @keyframes og-burst { 0% { transform: translate(0, 0) scale(0.2) rotate(0deg); opacity: 0; } 20% { opacity: 1; } 70% { transform: translate(var(--dx, 0px), var(--dy, 0px)) scale(1.1) rotate(var(--rot, 90deg)); opacity: 1; } 100% { transform: translate(var(--dx, 0px), calc(var(--dy, 0px) + 22px)) scale(0.9) rotate(var(--rot, 90deg)); opacity: 0; } } @keyframes og-pop { 0% { transform: scale(0.4); } 70% { transform: scale(1.15); } 100% { transform: scale(1); } } /* ------------------------------------------------------------------ shakes and the countdown */ /* translate/rotate (not transform), so a shake composes with a camera transform */ .og-shake-small { animation: og-page-shake 0.36s cubic-bezier(0.36, 0.07, 0.19, 0.97) both; } .og-shake-big { animation: og-screen-shake 0.55s cubic-bezier(0.36, 0.07, 0.19, 0.97) both; } @keyframes og-page-shake { 20% { translate: -2px 1px; } 40% { translate: 3px -1px; } 60% { translate: -3px 0; } 80% { translate: 2px 1px; } } @keyframes og-screen-shake { 10% { translate: -7px 3px; rotate: -0.35deg; } 25% { translate: 8px -4px; rotate: 0.4deg; } 40% { translate: -6px 2px; rotate: -0.25deg; } 55% { translate: 5px -2px; rotate: 0.2deg; } 70% { translate: -3px 1px; } 85% { translate: 2px 0; } } .count-digit { font-family: var(--font-title); font-weight: 700; font-size: var(--count-size, 6rem); line-height: 1; color: var(--pencil); opacity: 0.9; text-shadow: 0 0 1px rgba(93, 100, 112, 0.5); } .count-digit.is-in { animation: og-count 0.9s cubic-bezier(0.2, 0.8, 0.3, 1) both; } @keyframes og-count { 0% { transform: scale(1.5) rotate(-8deg); opacity: 0; } 18% { transform: scale(1) rotate(-3deg); opacity: 0.9; } 80% { opacity: 0.9; } 100% { transform: scale(0.92) rotate(-3deg); opacity: 0; } } /* ------------------------------------------------------------------ doodles and marks */ .doodle { display: block; overflow: visible; } .sk-draw .sk-ink { stroke-dasharray: 1 1; stroke-dashoffset: 1.02; animation: og-draw var(--draw-ms, 380ms) cubic-bezier(0.35, 0.6, 0.35, 1) var(--draw-delay, 0ms) forwards; } .sk-draw .sk-ink + .sk-ink { animation-delay: calc(var(--draw-delay, 0ms) + var(--draw-ms, 380ms) * 0.7); } @keyframes og-draw { to { stroke-dashoffset: 0; } } /* ------------------------------------------------------------------ the Genie */ .og-genie { position: relative; display: block; pointer-events: none; } .og-genie__hover, .og-genie__act { width: 100%; height: 100%; } .og-genie__hover { animation: og-hover 3.6s ease-in-out infinite; will-change: transform; } .og-genie__act { transition: transform 0.45s cubic-bezier(0.3, 0.8, 0.3, 1.2); transform-origin: 50% 60%; } .og-genie__svg { display: block; width: 100%; height: 100%; overflow: visible; } @keyframes og-hover { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4.5%); } } .og-genie__look { transition: transform 0.4s cubic-bezier(0.3, 0.75, 0.3, 1); } .og-genie__eyepose { transform-box: fill-box; transform-origin: 50% 0; transition: transform 0.3s cubic-bezier(0.3, 0.8, 0.3, 1.3); } .og-genie__eyes { transform-box: fill-box; transform-origin: 50% 55%; animation: og-blink 5.6s 1.2s infinite; } @keyframes og-blink { 0%, 93.5%, 97.5%, 100% { transform: none; } 95.5% { transform: scaleY(0.08); } } .og-genie__arm { transform-box: fill-box; transition: transform 0.4s cubic-bezier(0.3, 1.5, 0.5, 1); } .og-genie__arm--l { transform-origin: 86% 18%; } .og-genie__arm--r { transform-origin: 16% 40%; } .og-genie__sparkle { transform-box: fill-box; transform-origin: 50% 50%; animation: og-twinkle 1.3s ease-in-out infinite; } .og-genie__sparkle:nth-child(2) { animation-delay: -0.22s; } .og-genie__sparkle:nth-child(3) { animation-delay: -0.5s; } .og-genie__sparkle:nth-child(4) { animation-delay: -0.75s; } .og-genie__sparkle:nth-child(5) { animation-delay: -0.95s; } .og-genie__sparkle:nth-child(6) { animation-delay: -1.1s; } @keyframes og-twinkle { 0%, 100% { transform: scale(0.5) rotate(0deg); opacity: 0.55; } 50% { transform: scale(1.12) rotate(18deg); opacity: 1; } } .og-genie__drop { transform-box: fill-box; transform-origin: 50% 0; animation: og-droop 2.8s ease-in infinite; } @keyframes og-droop { 0% { transform: translateY(-8px) scale(0.85); opacity: 0; } 14% { opacity: 1; } 70% { transform: translateY(12px) scale(1, 1.08); opacity: 1; } 100% { transform: translateY(22px) scale(0.9, 1.12); opacity: 0; } } /* moods */ .og-genie[data-mood="focus"] .og-genie__act { transform: rotate(4deg); } .og-genie[data-mood="happy"] .og-genie__act { animation: og-bounce 1.6s ease-in-out infinite; } .og-genie[data-mood="happy"] .og-genie__eyepose { transform: scaleY(0.9); } .og-genie[data-mood="thrilled"] .og-genie__act { animation: og-wiggle 1.2s ease-in-out infinite; } .og-genie[data-mood="thrilled"] .og-genie__eyepose { transform: scale(1.08, 0.94); } .og-genie[data-mood="thrilled"] .og-genie__arm--l { transform: translate(-2px, -40px) rotate(38deg); } .og-genie[data-mood="thrilled"] .og-genie__arm--r { transform: translate(4px, -20px) rotate(-24deg); } .og-genie[data-mood="sad"] .og-genie__act { transform: translateY(5%) rotate(-5deg) scale(0.97, 0.95); } .og-genie[data-mood="sad"] .og-genie__hover { animation-duration: 5.6s; } .og-genie[data-mood="sad"] .og-genie__arm--l { transform: rotate(-16deg); } .og-genie[data-mood="sad"] .og-genie__arm--r { transform: rotate(18deg); } .og-genie[data-mood="sad"] .og-genie__eyepose { transform: scale(0.96); } .og-genie[data-mood="celebrate"] .og-genie__act { animation: og-jump 0.95s cubic-bezier(0.3, 0, 0.4, 1) infinite; } .og-genie[data-mood="celebrate"] .og-genie__eyepose { transform: scale(1.06, 0.9); } .og-genie[data-mood="celebrate"] .og-genie__arm--l { animation: og-wave-l 0.95s ease-in-out infinite; transform: translate(-6px, -70px) rotate(56deg); } .og-genie[data-mood="celebrate"] .og-genie__arm--r { animation: og-wave-r 0.95s ease-in-out infinite; transform: translate(6px, -44px) rotate(-46deg); } @keyframes og-bounce { 0%, 100% { transform: translateY(0) scale(1); } 12% { transform: translateY(1%) scale(1.04, 0.95); } 35% { transform: translateY(-7%) scale(0.97, 1.03); } 58% { transform: translateY(0) scale(1.03, 0.97); } 70% { transform: translateY(0) scale(1); } } @keyframes og-wiggle { 0%, 100% { transform: rotate(0deg) translateY(0); } 25% { transform: rotate(-6deg) translateY(-3%); } 75% { transform: rotate(6deg) translateY(-3%); } } @keyframes og-jump { 0%, 100% { transform: translateY(0) scale(1.04, 0.95); } 40% { transform: translateY(-12%) scale(0.96, 1.05) rotate(-3deg); } 60% { transform: translateY(-12%) scale(0.98, 1.02) rotate(3deg); } } @keyframes og-wave-l { 0%, 100% { transform: translate(-6px, -70px) rotate(48deg); } 50% { transform: translate(-6px, -76px) rotate(68deg); } } @keyframes og-wave-r { 0%, 100% { transform: translate(6px, -44px) rotate(-38deg); } 50% { transform: translate(6px, -50px) rotate(-56deg); } } /* one-shot gestures (genie.gesture(name)) */ .og-genie[data-mood] .og-genie__act.og-g-hop { animation: og-hop 0.55s cubic-bezier(0.3, 0.6, 0.4, 1); } .og-genie[data-mood] .og-genie__act.og-g-hop-big { animation: og-hop-big 0.66s cubic-bezier(0.3, 0.6, 0.4, 1); } .og-genie[data-mood] .og-genie__act.og-g-flip { animation: og-flip 0.8s cubic-bezier(0.35, 0.1, 0.3, 1); } .og-genie[data-mood] .og-genie__act.og-g-spin { animation: og-spin 0.85s cubic-bezier(0.45, 0, 0.2, 1); } .og-genie[data-mood] .og-genie__act.og-g-bob { animation: og-bob 0.6s ease-in-out; } .og-genie[data-mood] .og-genie__act.og-g-nod { animation: og-nod 0.5s ease-in-out; } .og-genie[data-mood] .og-genie__act.og-g-shake-off { animation: og-shake-off 0.6s ease-in-out; } .og-genie[data-mood] .og-genie__act.og-g-wave { animation: og-wave-sway 1s ease-in-out; } .og-genie[data-mood] .og-genie__act.og-g-wave .og-genie__arm--r { animation: og-wave-arm 1s ease-in-out; } /* a miss: he flinches (squashes down, eyes wide) and a bead of sweat flicks off his head */ .og-genie[data-mood] .og-genie__act.og-g-flinch { animation: og-flinch 0.44s cubic-bezier(0.25, 0.7, 0.3, 1); } .og-genie__act.og-g-flinch .og-genie__eyepose, .og-genie__act.og-g-lean .og-genie__eyepose { transform-origin: 50% 50%; animation: og-eyes-wide 0.5s ease-out; } .og-genie__act.og-g-flinch .og-genie__sweat { transform-box: fill-box; transform-origin: 50% 100%; animation: og-sweat-flick 0.48s cubic-bezier(0.2, 0.6, 0.4, 1) both; } .og-genie__act.og-g-flinch .og-genie__drop { animation: none; } /* a near miss: he leans in for a closer look, eyes wide */ .og-genie[data-mood] .og-genie__act.og-g-lean { animation: og-lean 0.66s cubic-bezier(0.3, 0.7, 0.3, 1); } /* Pens down with nothing: he sinks, then droops */ .og-genie[data-mood] .og-genie__act.og-g-droop { animation: og-droop-down 0.7s cubic-bezier(0.3, 0.6, 0.4, 1); } @keyframes og-flinch { 0% { transform: none; } 16% { transform: translateY(8%) scale(1.14, 0.78); } 36% { transform: translate(-3%, -4%) scale(0.94, 1.08) rotate(-5deg); } 62% { transform: translateY(1%) scale(1.03, 0.97) rotate(2deg); } 100% { transform: none; } } @keyframes og-eyes-wide { 0% { transform: none; } 18% { transform: scale(1.3); } 65% { transform: scale(1.18); } 100% { transform: none; } } @keyframes og-sweat-flick { 0% { transform: translate(14px, 18px) scale(0.6); opacity: 0; } 14% { transform: translate(0, 0) scale(1); opacity: 1; } 50% { transform: translate(-34px, -38px) rotate(-30deg) scale(1); opacity: 1; } 100% { transform: translate(-70px, 34px) rotate(-70deg) scale(0.8); opacity: 0; } } @keyframes og-lean { 0% { transform: none; } 32% { transform: translate(6%, 3%) rotate(12deg) scale(1.04); } 72% { transform: translate(5%, 2%) rotate(10deg) scale(1.03); } 100% { transform: none; } } @keyframes og-droop-down { 0% { transform: none; } 40% { transform: translateY(12%) scale(1.06, 0.86) rotate(-4deg); } 100% { transform: translateY(5%) rotate(-5deg) scale(0.97, 0.95); } } @keyframes og-wave-sway { 0%, 100% { transform: rotate(0deg); } 30% { transform: rotate(-4deg) translateY(-3%); } 70% { transform: rotate(3deg) translateY(-2%); } } @keyframes og-wave-arm { 0%, 100% { transform: none; } 18% { transform: translate(4px, -34px) rotate(-38deg); } 36% { transform: translate(4px, -40px) rotate(-64deg); } 54% { transform: translate(4px, -36px) rotate(-30deg); } 72% { transform: translate(4px, -40px) rotate(-62deg); } 88% { transform: translate(2px, -18px) rotate(-24deg); } } @keyframes og-hop { 0%, 100% { transform: translateY(0) scale(1); } 15% { transform: translateY(2%) scale(1.06, 0.92); } 50% { transform: translateY(-16%) scale(0.95, 1.06); } 80% { transform: translateY(1%) scale(1.04, 0.95); } } /* a 4 and a 7: a bigger jump, a squash before and after */ @keyframes og-hop-big { 0%, 100% { transform: translateY(0) scale(1); } 14% { transform: translateY(3%) scale(1.09, 0.88); } 48% { transform: translateY(-27%) scale(0.94, 1.08) rotate(-4deg); } 80% { transform: translateY(2%) scale(1.07, 0.92); } } /* an 8: a jump with a backflip in it */ @keyframes og-flip { 0% { transform: translateY(0) rotate(0deg) scale(1); } 16% { transform: translateY(4%) rotate(8deg) scale(1.1, 0.86); } 52% { transform: translateY(-32%) rotate(-190deg) scale(0.96); } 82% { transform: translateY(2%) rotate(-360deg) scale(1.08, 0.9); } 100% { transform: translateY(0) rotate(-360deg) scale(1); } } @keyframes og-spin { 0% { transform: rotate(0deg) scale(1); } 20% { transform: rotate(-12deg) scale(1.02); } 85% { transform: rotate(372deg) scale(1.04); } 100% { transform: rotate(360deg) scale(1); } } @keyframes og-bob { 0%, 100% { transform: translateY(0); } 45% { transform: translateY(-7%); } } @keyframes og-nod { 0%, 100% { transform: rotate(0deg); } 35% { transform: rotate(7deg) translateY(2%); } 70% { transform: rotate(-3deg); } } @keyframes og-shake-off { 0%, 100% { transform: rotate(0deg); } 20% { transform: rotate(-8deg); } 40% { transform: rotate(7deg); } 60% { transform: rotate(-5deg); } 80% { transform: rotate(3deg); } } .og-genie.is-offscreen *, .og-genie.is-offscreen { animation-play-state: paused !important; } /* ------------------------------------------------------------------ reduced motion */ @media (prefers-reduced-motion: reduce) { .og-genie, .og-genie *, .sticky.is-slap, .sticky.is-shake, .pencil.is-danger, .pencil-shaving, .star-sticker.is-slapped, .star-sticker.is-slapped .ss-shine, .star-sticker.is-shiny .ss-shine, .stamp.is-thump, .grade-box.is-filled, .pencil-note.is-in, .hl-chip::before, .og-shake-small, .og-shake-big, .count-digit.is-in, .og-fly, .og-burst, .envelope.is-torn .envelope__strip { animation: none !important; transition: none !important; } .og-fly, .og-burst, .pencil-shaving, .speck { display: none; } .envelope.is-torn .envelope__strip { opacity: 0; } .sk-draw .sk-ink { animation: none; stroke-dashoffset: 0; } .hl, .hl-under, .envelope__inside > * { transition: none; } }