shanghai-residences/src/index.css

@import 'tailwindcss';
@import './styles/input.css';

/* 定义字体 */
@font-face {
  font-family: 'SourceHanSerifCN';
  src: url('/fonts/SourceHanSerifCN-Bold-2.otf') format('opentype');
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'DingTalk-JinBuTi';
  src: url('/fonts/DingTalk-JinBuTi.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* *{ */
/* margin: 0;
    padding: 0; */
/* box-sizing: border-box; */
/* } */

body {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  background-color: #000;
  font-family: 'SourceHanSerifCN', serif;
}

#root {
  width: 100%;
  height: 100%;
}

button:not([disabled]) {
  cursor: pointer;
}

img,
video {
  max-width: unset;
}

/* 自定义滚动条样式 */
.custom-scrollbar {
  scrollbar-width: thin;
  scrollbar-color: rgba(139, 115, 85, 0.6) transparent;
}

.custom-scrollbar::-webkit-scrollbar {
  width: 8px;
}

.custom-scrollbar::-webkit-scrollbar-track {
  background: transparent;
  margin: 0;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
  background: linear-gradient(to bottom, rgba(139, 115, 85, 0.8), rgba(107, 93, 71, 0.8));
  border-radius: 4px;
  border: none;
  transition: background 0.3s ease;
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(to bottom, rgba(139, 115, 85, 1), rgba(107, 93, 71, 1));
  box-shadow: 0 2px 8px rgba(139, 115, 85, 0.4);
}

.custom-scrollbar::-webkit-scrollbar-thumb:active {
  background: linear-gradient(to bottom, rgba(107, 93, 71, 1), rgba(91, 79, 61, 1));
}

/* 多选题面板滚动条样式 - 金色主题 */
.quiz-scrollbar {
  scrollbar-width: thin;
  scrollbar-color: rgba(212, 197, 169, 0.7) transparent;
}

.quiz-scrollbar::-webkit-scrollbar {
  width: 10px;
}

.quiz-scrollbar::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.1);
  border-radius: 5px;
  margin: 8px 0;
}

.quiz-scrollbar::-webkit-scrollbar-thumb {
  background: linear-gradient(to bottom, rgba(212, 197, 169, 0.8), rgba(240, 190, 117, 0.8));
  border-radius: 5px;
  border: 2px solid rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}

.quiz-scrollbar::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(to bottom, rgba(240, 190, 117, 0.9), rgba(212, 197, 169, 0.9));
  box-shadow: 0 2px 8px rgba(240, 190, 117, 0.5);
  border-color: rgba(240, 190, 117, 0.3);
}

.quiz-scrollbar::-webkit-scrollbar-thumb:active {
  background: linear-gradient(to bottom, rgba(240, 190, 117, 1), rgba(212, 197, 169, 1));
}

/* 搜索图标动画 */
@keyframes search-pulse {
  0%,
  100% {
    transform: translate(-50%, -50%) scale(1) rotate(0deg);
    opacity: 1;
  }
  50% {
    transform: translate(-50%, -50%) scale(1.1) rotate(5deg);
    opacity: 0.8;
  }
}

.animate-search {
  animation: search-pulse 2s ease-in-out infinite;
}

/* 三个点加载动画 */
@keyframes dot-bounce {
  0%,
  80%,
  100% {
    transform: scale(0);
    opacity: 0.5;
  }
  40% {
    transform: scale(1);
    opacity: 1;
  }
}

.animate-dots > span {
  animation: dot-bounce 1.4s ease-in-out infinite both;
}

.animate-dots > span:nth-child(1) {
  animation-delay: -0.32s;
}

.animate-dots > span:nth-child(2) {
  animation-delay: -0.16s;
}

.animate-dots > span:nth-child(3) {
  animation-delay: 0s;
}
/* 页面过渡动画 - 确保初始状态为透明，避免闪烁 */
.page-transition-wrapper > div[data-framer-name] {
  opacity: 0;
}

/* 鲁迅页面滚动条样式 - 古典文化风格 */
.luxun-scrollbar {
  scrollbar-width: thin;
  scrollbar-color: rgba(212, 175, 55, 0.85) rgba(250, 245, 235, 0.08);
}

.luxun-scrollbar::-webkit-scrollbar {
  width: 14px;
}

.luxun-scrollbar::-webkit-scrollbar-track {
  background: linear-gradient(to bottom, rgba(250, 245, 235, 0.06), rgba(240, 235, 225, 0.04));
  border-radius: 12px;
  border: 1.5px solid rgba(139, 115, 71, 0.2);
  margin: 6px 2px;
  box-shadow:
    inset 0 0 8px rgba(139, 115, 71, 0.08),
    inset 0 0 2px rgba(255, 255, 255, 0.1);
}

.luxun-scrollbar::-webkit-scrollbar-thumb {
  background: linear-gradient(
    to bottom,
    rgba(240, 190, 117, 0.95),
    rgba(212, 175, 55, 0.95),
    rgba(184, 134, 11, 0.95)
  );
  border-radius: 12px;
  border: 2px solid rgba(250, 245, 235, 0.4);
  box-shadow:
    inset 0 1px 3px rgba(255, 255, 255, 0.25),
    inset 0 -1px 2px rgba(139, 115, 71, 0.2),
    0 2px 6px rgba(139, 115, 71, 0.25),
    0 0 10px rgba(212, 175, 55, 0.15);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
}

/* 滚动条滑块内部装饰线效果 */
.luxun-scrollbar::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(
    to bottom,
    rgba(255, 215, 140, 1),
    rgba(240, 190, 117, 1),
    rgba(212, 175, 55, 1)
  );
  box-shadow:
    inset 0 1px 4px rgba(255, 255, 255, 0.35),
    inset 0 -1px 3px rgba(139, 115, 71, 0.25),
    0 3px 8px rgba(139, 115, 71, 0.35),
    0 0 14px rgba(212, 175, 55, 0.3);
  border-color: rgba(250, 245, 235, 0.6);
  transform: scaleX(1.05);
}

.luxun-scrollbar::-webkit-scrollbar-thumb:active {
  background: linear-gradient(
    to bottom,
    rgba(184, 134, 11, 1),
    rgba(139, 115, 71, 1),
    rgba(107, 93, 71, 1)
  );
  box-shadow:
    inset 0 2px 5px rgba(0, 0, 0, 0.4),
    inset 0 -1px 2px rgba(139, 115, 71, 0.3),
    0 1px 3px rgba(139, 115, 71, 0.3);
  border-color: rgba(250, 245, 235, 0.2);
}

/* 点一点图标动画 - 手指点击动画（上下移动模拟点击） */
@keyframes finger-bounce {
  0%,
  100% {
    transform: translateY(0) translateX(0);
  }
  50% {
    transform: translateY(-10px) translateX(5px);
  }
}

.animate-finger-bounce {
  animation: finger-bounce 1.2s ease-in-out infinite;
}

/* 点一点图标动画 - 手指左右摆动（横向引导点击） */
@keyframes finger-shake {
  0%,
  100% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(-12px);
  }
}

.animate-finger-shake {
  animation: finger-shake 1s ease-in-out infinite;
}