tutorial.css

* {
    padding: 0;
    margin: 0;
}
:root{
    --Side-Menu-BgColor: #3b4147;
    --Side-Menu-BgHoverColor: #abafb3;
    --Side-Menu-FontColor: #f0f0f0;
    --Side-Menu-HoverColor: #ffffff;
    --border-radius: 3px;
    --Side-Menu-TransitionTime: 0.2s;
    --Side-Menu-LineColor: #d19a66;
}
.content {
    background-color: #fefefe;
}
@font-face {
    font-family: SpaceClaim;
    src: url("SpaceClaim.ttf") format("truetype");
}
@font-face {
    font-family: Segoe;
    src: url("Segoe.ttf") format("truetype");
}
@font-face {
    font-family: SegoeB;
    font-weight: bold;
    src: url("SegoeB.ttf") format("truetype");
}

/* -------------------------- 开场动画关键帧（核心新增）-------------------------- */
/* 淡入动画：用于开场语、菜单项、主内容 */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}
/* 淡入上移动画：用于标题（更有层次感） */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px); /* 初始位置向下偏移 30px */
    }
    to {
        opacity: 1;
        transform: translateY(0); /* 回归正常位置 */
    }
}
/* 左滑淡入动画：用于侧边栏（从屏幕外滑入） */
@keyframes slideInLeft {
    from {
        opacity: 0;
        transform: translateX(-100%); /* 初始位置在屏幕左侧外 */
    }
    to {
        opacity: 1;
        transform: translateX(0); /* 滑到正常位置 */
    }
}

/* -------------------------- 侧边栏样式（添加动画）-------------------------- */
.Side-Menu-Box{
    position: fixed; /* 改为固定定位，避免滑入时影响布局 */
    top: 0;
    left: 0;
    z-index: 999; /* 确保侧边栏在最上层 */
    box-shadow: 2px 0px 8px 5px #cdd2d7;
    font-family: SpaceClaim;
    letter-spacing: 0.5px;
    font-weight: 400;
    min-height: 100vh;
    box-sizing: border-box;
    background-color: var(--Side-Menu-BgColor);
    /* 侧边栏开场动画：0.8秒滑入，结尾平滑 */
    animation: slideInLeft 0.8s ease-out forwards;
    opacity: 0; /* 初始透明，动画结束后显示 */
}
.Side-Menu-Box input[type='checkbox']{
    display: none;
}
/* 侧边栏菜单项：依次淡入（每个延迟 0.1 秒，更有节奏感） */
.Side-Menu{
    padding: 4px 12px;
    font-size: 20px;
    width: 200px;
    min-height: 100%;
    cursor: pointer;
    overflow: hidden;
    transition: width var(--Side-Menu-TransitionTime), background-color 0.2s;
    color: var(--Side-Menu-FontColor);
    animation: fadeIn 0.5s ease-out forwards;
    opacity: 0;
}
/* 为每个菜单项设置不同延迟，依次出现 */
.Side-Menu:nth-child(1) { animation-delay: 0.6s; } /* 首页 */
.Side-Menu:nth-child(2) { animation-delay: 0.7s; } /* 镜像源 */
.Side-Menu:nth-child(3) { animation-delay: 0.8s; } /* 教程 */
.Side-Menu:nth-child(4) { animation-delay: 0.9s; } /* 开发日志 */

.Side-Menu:hover{
    background-color: var(--Side-Menu-BgHoverColor);
    color: var(--Side-Menu-HoverColor); /*  hover 时字体变白，增强交互 */
}

/* -------------------------- 标题样式（添加动画）-------------------------- */
.BigTitle {
    display: inline-block;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 40px;
    font-weight: 999;
    color: #5da0b7;
    text-transform: uppercase;
    /* 标题动画：0.8秒淡入上移，延迟 0.3 秒（等侧边栏开始滑入后再动） */
    animation: fadeInUp 0.8s ease-out 0.3s forwards;
    opacity: 0; /* 初始透明 */
}

/* -------------------------- 开场语样式（新增）-------------------------- */
.opening-text {
    font-family: SegoeB;
    font-size: 24px;
    color: #3b4147;
    margin: 20px 0;
    padding-left: 2px;
    /* 开场语动画：1秒淡入，延迟 0.1 秒 */
    animation: fadeIn 1s ease-out 0.1s forwards;
    opacity: 0;
}

/* -------------------------- 主内容区域（调整布局+动画）-------------------------- */
.Content-Page{
    padding-top: 10px;
    padding-left: 20px;
    margin-left: 220px; /* 给侧边栏留空间，避免重叠 */
    overflow: hidden;
    /* 主内容淡入动画，延迟 0.5 秒（最后显示，避免混乱） */
    animation: fadeIn 1s ease-out 0.5s forwards;
    opacity: 0;
}
.Menu{
    text-decoration: none;
    color: var(--Side-Menu-FontColor);
}
.paragraph{
    padding: 10px 0 10px 0;
    line-height: 1.6; /* 优化文字行高，提升可读性 */
}

/* -------------------------------------- TUTORIAL STYLE ------------------------------------- */
/* 手账样式的Tip容器：圆角边框+复古底色 */
.Tip {
  background-color: #fdf5e6; /* 手账纸的米黄色 */
  border: 1px solid #d6b89d; /* 浅棕复古边框 */
  border-radius: 12px; /* 圆角，匹配手账柔和感 */
  padding: 15px;
  box-shadow: 3px 3px 8px rgba(139, 69, 19, 0.1); /* 轻微阴影，模拟手账纸张厚度 */
  margin: 10px 0;
  display: flex;
  align-items: center; /* 垂直居中对齐 */
  gap: 20px; /* p和h3之间的间距 */
}

/* 手账内容p：占主要宽度 */
.Tip p {
  flex: 1; /* 自动占满剩余宽度 */
  line-height: 1.8; /* 手账笔记的宽松行高 */
  color: #3b4147;
  font-size: 15px;
  margin: 0; /* 清除默认margin */
}

/* 手账右侧h3：装饰化样式 */
.Tip h3 {
  background-color: #fffacd; /* 浅黄贴纸底色 */
  border: 1px dashed #d6b89d; /* 虚线边框，模拟手账贴纸 */
  border-radius: 8px;
  padding: 8px 12px;
  font-family: "Comic Sans MS", cursive; /* 手写体字体，强化手账感 */
  font-size: 16px;
  color: #8b4513; /* 复古棕字体 */
  margin: 0; /* 清除默认margin */
  /* 可选：加个小折角装饰，更像手账贴纸 */
  position: relative;
}
/* 手账h3的折角装饰（可选） */
.Tip h3::after {
  content: "";
  position: absolute;
  bottom: 0;
  right: 0;
  width: 12px;
  height: 12px;
  background: linear-gradient(135deg, #fdf5e6, #fffacd, #d6b89d);
  border-top-left-radius: 4px;
  box-shadow: -1px -1px 2px rgba(139, 69, 19, 0.1);
}


.content-container {
  border: 2px solid #000; /* 黑色边框，匹配示例 */
  border-radius: 12px; /* 圆角，和示例一致 */
  overflow: hidden; /* 避免内部项的边框溢出圆角 */
}

/* 每个项的基础样式：分隔线+居中 */
.item {
  padding: 12px 0; /* 上下内边距，保证内容间距 */
  text-align: center; /* 文字居中，匹配示例 */
  font-size: 18px;
  border-bottom: 2px solid #000; /* 项之间的黑色分隔线 */
}

/* 主题项：白色背景 */
.theme {
  background-color: #c7e5f3;
}

/* 分支项：浅蓝色背景（匹配示例的浅蓝色） */
.branch {
  background-color: #fff;
}