console-dev/app/assets/styles/RoxyMascot.CDqPSf2d.css

/* 站点吉祥物：CSS分层造型、头部摇摆和眨眼动画。 */
/* 导入方：app/components/home/RoxyMascot.vue。 */
.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: var(--radius-md);
  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;
}
/* 动画 roxy-head-sway-65169a82 的关键帧；动画名称与引用该名称的选择器需要同步维护。 */
@keyframes roxy-head-sway-65169a82 {
  0%,
  to {
    transform: rotate(-4deg);
  }
  45%,
  55% {
    transform: rotate(4deg);
  }
}
/* 动画 roxy-blink-65169a82 的关键帧；动画名称与引用该名称的选择器需要同步维护。 */
@keyframes roxy-blink-65169a82 {
  0%,
  43%,
  47%,
  to {
    scale: 1;
  }
  45% {
    scale: 1 0.08;
  }
}
/* 视口条件 (width<768px) 下的响应式覆盖；保留相对基础规则的层叠顺序。 */
@media (width<768px) {
  .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;
  }
}