.roxy-mascot[data-v-65169a82] { --roxy-ink: #45465f; --roxy-hair: #779aca; --roxy-hair-light: #a8c4e4; --roxy-hair-dark: #5376a7; --roxy-skin: #ffe7d5; pointer-events: none; -webkit-user-select: none; user-select: none; isolation: isolate; width: 240px; height: 160px; position: relative; } .roxy-mascot[data-v-65169a82] *, .roxy-mascot[data-v-65169a82] :after, .roxy-mascot[data-v-65169a82] :before { box-sizing: border-box; position: absolute; } .roxy-shadow[data-v-65169a82] { background: #3d517721; border-radius: 50%; width: 176px; height: 9px; bottom: 8px; left: 48px; } .roxy-body[data-v-65169a82] { border: 2px solid var(--roxy-ink); background: #f4e8cd; border-radius: 42% 55% 20% 25%; width: 93px; height: 34px; top: 114px; left: 127px; overflow: hidden; transform: rotate(4deg); } .cape-fold[data-v-65169a82] { border-right: 2px solid #b6a98e; border-radius: 50%; width: 25px; height: 31px; top: -4px; left: 16px; transform: rotate(-14deg); } .cape-hem[data-v-65169a82] { background: #514957; border-radius: 70% 0 0; width: 41px; height: 16px; bottom: -2px; right: -2px; } .cape-hem[data-v-65169a82], .roxy-leg[data-v-65169a82] { border: 2px solid var(--roxy-ink); } .roxy-leg[data-v-65169a82] { transform-origin: 50% 100%; background: #f5dcc7; border-radius: 9px; width: 15px; height: 35px; } .leg-back[data-v-65169a82] { top: 94px; left: 190px; transform: rotate(22deg); } .leg-front[data-v-65169a82] { top: 101px; left: 203px; transform: rotate(42deg); } .roxy-leg i[data-v-65169a82] { border: 2px solid var(--roxy-ink); background: #6c5654; border-radius: 8px 8px 4px 4px; width: 21px; height: 23px; top: -8px; left: -4px; } .roxy-leg i[data-v-65169a82]:after { content: ""; border-top: 2px solid #c4a47c; bottom: 3px; left: 1px; right: 1px; } .roxy-sleeve[data-v-65169a82] { border: 2px solid var(--roxy-ink); background: #f4e8cd; border-radius: 50% 50% 35% 35%; width: 37px; height: 19px; top: 132px; } .sleeve-left[data-v-65169a82] { left: 65px; transform: rotate(-9deg); } .sleeve-right[data-v-65169a82] { left: 125px; transform: rotate(9deg); } .roxy-hand[data-v-65169a82] { background: var(--roxy-skin); border: 1.5px solid #a27f7a; border-radius: 45% 45% 48% 48%; width: 23px; height: 13px; top: 142px; } .hand-left[data-v-65169a82] { left: 70px; transform: rotate(-8deg); } .hand-right[data-v-65169a82] { left: 129px; transform: rotate(8deg); } .roxy-hand i[data-v-65169a82] { background: #d7af9b; width: 1px; height: 4px; top: 6px; left: 7px; box-shadow: 4px 0 #d7af9b; } .roxy-head[data-v-65169a82] { transform-origin: 59% 94%; width: 151px; height: 143px; animation: 5.6s ease-in-out infinite roxy-head-sway-65169a82; top: 4px; left: 29px; } .hair-back[data-v-65169a82] { border: 2px solid var(--roxy-ink); background: var(--roxy-hair-dark); border-radius: 48% 48% 28% 30%; width: 81px; height: 83px; top: 53px; left: 44px; } .roxy-face[data-v-65169a82] { border: 1.5px solid var(--roxy-ink); border-top: 0; border-radius: 36% 36% 46% 46%; width: 67px; height: 62px; top: 72px; left: 51px; box-shadow: inset 0 6px #efd0bd; } .roxy-ear[data-v-65169a82], .roxy-face[data-v-65169a82] { background: var(--roxy-skin); } .roxy-ear[data-v-65169a82] { border: 1.5px solid #a27f7a; border-radius: 50%; width: 12px; height: 16px; top: 103px; } .ear-left[data-v-65169a82] { left: 46px; } .ear-right[data-v-65169a82] { left: 111px; } .roxy-brow[data-v-65169a82] { border-top: 2px solid #637699; border-radius: 50%; width: 13px; height: 4px; top: 16px; } .brow-left[data-v-65169a82] { left: 10px; transform: rotate(-5deg); } .brow-right[data-v-65169a82] { right: 9px; transform: rotate(5deg); } .roxy-eye[data-v-65169a82] { border: 1.5px solid var(--roxy-ink); transform-origin: 50%; background: #fbfcff; border-top-width: 3px; border-radius: 42% 42% 46% 46%; width: 15px; height: 19px; animation: 7.8s linear infinite roxy-blink-65169a82; top: 24px; overflow: hidden; } .eye-left[data-v-65169a82] { left: 10px; transform: rotate(2deg); } .eye-right[data-v-65169a82] { right: 9px; transform: rotate(-2deg); } .roxy-eye i[data-v-65169a82] { background: #3d649c; border-radius: 45%; width: 10px; height: 15px; top: 0; left: 2px; box-shadow: inset 0 -5px #6a9ed4; } .roxy-eye i[data-v-65169a82]:before { background: #2c3d63; height: 9px; left: 3px; } .roxy-eye i[data-v-65169a82]:after, .roxy-eye i[data-v-65169a82]:before { content: ""; border-radius: 50%; width: 4px; top: 1px; } .roxy-eye i[data-v-65169a82]:after { background: #fff; height: 5px; left: 0; box-shadow: 6px 9px 0 -1px #d5edff; } .roxy-cheek[data-v-65169a82] { opacity: 0.55; background: #efa5a3; border-radius: 50%; width: 12px; height: 5px; top: 43px; } .cheek-left[data-v-65169a82] { left: 5px; } .cheek-right[data-v-65169a82] { right: 4px; } .roxy-nose[data-v-65169a82] { background: #dba996; border-radius: 50%; width: 3px; height: 2px; top: 41px; left: 32px; } .roxy-mouth[data-v-65169a82] { border-bottom: 1.5px solid #a66c75; border-radius: 0 0 50% 50%; width: 10px; height: 5px; top: 47px; left: 28px; } .roxy-fringe[data-v-65169a82] { background: var(--roxy-hair); border: 1.5px solid var(--roxy-ink); box-shadow: inset 4px 1px var(--roxy-hair-light); } .fringe-left[data-v-65169a82] { border-radius: 85% 12% 95% 10%; width: 34px; height: 44px; top: 66px; left: 44px; transform: rotate(7deg); } .fringe-middle[data-v-65169a82] { border-radius: 25% 20% 18% 95%; width: 24px; height: 34px; top: 65px; left: 73px; transform: rotate(-18deg); } .fringe-right[data-v-65169a82] { border-radius: 12% 85% 10% 95%; width: 31px; height: 46px; top: 65px; left: 92px; transform: rotate(-10deg); } .roxy-braid[data-v-65169a82] { width: 19px; height: 46px; top: 109px; } .braid-left[data-v-65169a82] { left: 34px; transform: rotate(13deg); } .braid-right[data-v-65169a82] { left: 120px; transform: rotate(-17deg); } .roxy-braid i[data-v-65169a82] { border: 1.5px solid var(--roxy-ink); background: var(--roxy-hair); width: 15px; height: 14px; box-shadow: inset 3px 1px var(--roxy-hair-light); border-radius: 55% 45%; } .roxy-braid i[data-v-65169a82]:first-child { top: 0; left: 0; transform: rotate(-23deg); } .roxy-braid i[data-v-65169a82]:nth-child(2) { top: 9px; left: 3px; transform: rotate(23deg); } .roxy-braid i[data-v-65169a82]:nth-child(3) { top: 18px; left: 0; transform: rotate(-23deg); } .roxy-braid i[data-v-65169a82]:nth-child(4) { top: 27px; left: 3px; transform: rotate(23deg); } .hair-tie[data-v-65169a82] { background: #d8bd73; border: 1px solid #65533e; border-radius: 2px; width: 15px; height: 5px; top: 35px; left: 2px; } .roxy-hat[data-v-65169a82] { width: 152px; height: 85px; top: 0; left: 0; transform: rotate(-8deg); } .hat-cone[data-v-65169a82] { background: #463d4a; width: 104px; height: 79px; top: 0; left: 31px; } .hat-cone[data-v-65169a82], .hat-cone[data-v-65169a82]:before { clip-path: polygon(3% 100%, 24% 29%, 62% 0, 58% 23%, 76% 53%, 100% 100%); } .hat-cone[data-v-65169a82]:before { content: ""; background: #79615c; inset: 3px; } .hat-seam[data-v-65169a82] { opacity: 0.8; border-left: 2px solid #ad9180; width: 27px; height: 38px; top: 22px; left: 41px; transform: rotate(24deg); } .hat-band[data-v-65169a82] { background: #e7d9ad; border: 2px solid #574958; border-radius: 40% 45% 10% 10%; width: 82px; height: 16px; top: 57px; left: 43px; transform: rotate(5deg); } .hat-brim[data-v-65169a82] { background: #8b7166; border: 2px solid #463d4a; border-radius: 50%; width: 148px; height: 19px; top: 68px; left: 3px; transform: rotate(3deg); box-shadow: inset 0 -5px #584952; } .hat-buckle[data-v-65169a82] { background: #544b5b; border: 3px solid #b39b69; border-radius: 3px; width: 13px; height: 15px; top: 60px; left: 96px; transform: rotate(5deg); } .roxy-staff[data-v-65169a82] { background: #b38c69; border: 1px solid #624d44; border-radius: 6px; width: 182px; height: 5px; top: 144px; left: 17px; transform: rotate(-3deg); } .staff-ring[data-v-65169a82] { border: 4px solid #aa845e; border-radius: 50%; width: 28px; height: 28px; top: -14px; left: -9px; box-shadow: 0 0 0 1px #624d44; } .staff-ring i[data-v-65169a82] { background: #c98fa9; border: 1px solid #914d66; border-radius: 30% 45% 35%; inset: 1px; transform: rotate(30deg); box-shadow: inset 3px 2px #f0c5d4; } @keyframes roxy-head-sway-65169a82 { 0%, to { transform: rotate(-4deg); } 45%, 55% { transform: rotate(4deg); } } @keyframes roxy-blink-65169a82 { 0%, 43%, 47%, to { scale: 1; } 45% { scale: 1 0.08; } } @media (width<=767px) { .roxy-eye[data-v-65169a82], .roxy-head[data-v-65169a82] { animation: none; } } @media (prefers-reduced-motion: reduce) { .roxy-eye[data-v-65169a82], .roxy-head[data-v-65169a82] { animation: none; } }