feat: 提交第一版代码

assets/css/site.css

@@ -0,0 +1,874 @@
+:root {
+  --bg: #fffdfb;
+  --surface: #ffffff;
+  --surface-soft: #f8f9fd;
+  --surface-accent: #f4f7ff;
+  --line: #ece7e2;
+  --line-strong: #d8dde8;
+  --text: #2d2a28;
+  --muted: #8e8a87;
+  --muted-strong: #686461;
+  --accent: #f28877;
+  --brand: #7aa0ff;
+  --brand-strong: #4b76eb;
+  --brand-soft: #eef3ff;
+  --footer: #313238;
+  --footer-muted: #b8bcc6;
+  --shadow-soft: 0 22px 70px rgba(38, 52, 90, 0.08);
+  --shadow-card: 0 14px 48px rgba(43, 53, 84, 0.08);
+  --radius-xl: 36px;
+  --radius-lg: 24px;
+  --radius-md: 18px;
+  --content: 1320px;
+  --nav-h: 104px;
+}
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+html {
+  scroll-behavior: smooth;
+}
+
+body {
+  margin: 0;
+  min-width: 320px;
+  background: var(--bg);
+  color: var(--text);
+  font-family: Manrope, "PingFang SC", "Microsoft YaHei", "Noto Sans SC", sans-serif;
+  text-rendering: optimizeLegibility;
+}
+
+img {
+  display: block;
+  max-width: 100%;
+}
+
+a {
+  color: inherit;
+  text-decoration: none;
+}
+
+button {
+  font: inherit;
+}
+
+.page-shell {
+  position: relative;
+  overflow-x: clip;
+}
+
+.container {
+  width: min(calc(100% - 48px), var(--content));
+  margin: 0 auto;
+}
+
+.site-header {
+  position: sticky;
+  top: 0;
+  z-index: 100;
+  background: rgba(255, 253, 251, 0.9);
+  backdrop-filter: blur(16px);
+}
+
+.site-header::after {
+  content: "";
+  position: absolute;
+  inset: auto 0 0;
+  height: 1px;
+  background: rgba(26, 29, 38, 0.08);
+}
+
+.site-nav {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 24px;
+  min-height: var(--nav-h);
+}
+
+.brand {
+  display: inline-flex;
+  align-items: center;
+  gap: 14px;
+  min-width: 0;
+}
+
+.brand-mark {
+  width: 34px;
+  height: 34px;
+  flex: none;
+}
+
+.brand-copy {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  white-space: nowrap;
+  font-size: 16px;
+  font-weight: 700;
+  letter-spacing: 0.01em;
+}
+
+.brand-copy strong {
+  color: var(--brand-strong);
+}
+
+.brand-copy span {
+  color: #1f2430;
+}
+
+.nav-links {
+  display: inline-flex;
+  align-items: center;
+  gap: 34px;
+  flex-wrap: wrap;
+}
+
+.nav-link {
+  position: relative;
+  padding: 8px 0;
+  font-size: 13px;
+  font-weight: 700;
+  color: #44423f;
+  letter-spacing: 0.04em;
+}
+
+.nav-link.current {
+  color: var(--brand);
+}
+
+.nav-link.current::after {
+  content: "";
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: -10px;
+  margin: auto;
+  width: 18px;
+  height: 2px;
+  border-radius: 999px;
+  background: currentColor;
+}
+
+.locale-pill {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 12px;
+  border: 1px solid var(--line);
+  border-radius: 999px;
+  background: var(--surface);
+  color: var(--muted);
+  font-size: 12px;
+  font-weight: 700;
+}
+
+.locale-pill svg {
+  width: 10px;
+  height: 10px;
+}
+
+.menu-toggle {
+  display: none;
+  align-items: center;
+  justify-content: center;
+  width: 46px;
+  height: 46px;
+  border: 0;
+  border-radius: 14px;
+  background: var(--surface);
+  box-shadow: 0 8px 24px rgba(49, 50, 56, 0.08);
+  color: var(--text);
+}
+
+.mobile-menu {
+  display: none;
+  padding: 0 0 24px;
+}
+
+.mobile-menu.is-open {
+  display: block;
+}
+
+.mobile-menu a {
+  display: block;
+  padding: 14px 18px;
+  border-radius: 16px;
+  font-size: 15px;
+  font-weight: 700;
+}
+
+.mobile-menu a.current {
+  background: var(--brand-soft);
+  color: var(--brand-strong);
+}
+
+.hero {
+  padding: 92px 0 60px;
+}
+
+.hero.centered {
+  text-align: center;
+}
+
+.hero-copy {
+  max-width: 920px;
+  margin: 0 auto;
+}
+
+.eyebrow {
+  margin: 0 0 28px;
+  color: var(--accent);
+  font-size: 17px;
+  font-weight: 800;
+  letter-spacing: 0.08em;
+}
+
+.hero-title {
+  margin: 0;
+  font-size: clamp(40px, 5vw, 72px);
+  line-height: 1.15;
+  font-weight: 800;
+  letter-spacing: -0.03em;
+}
+
+.hero-subtitle {
+  max-width: 640px;
+  margin: 18px auto 0;
+  color: #a7a29e;
+  font-size: 14px;
+  line-height: 1.9;
+  letter-spacing: 0.04em;
+}
+
+.hero-actions {
+  display: flex;
+  justify-content: center;
+  gap: 18px;
+  margin-top: 44px;
+  flex-wrap: wrap;
+}
+
+.btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 10px;
+  min-height: 48px;
+  padding: 0 24px;
+  border-radius: 999px;
+  border: 1px solid transparent;
+  font-size: 13px;
+  font-weight: 800;
+  letter-spacing: 0.06em;
+  transition: transform 180ms ease, box-shadow 180ms ease, background 180ms ease;
+}
+
+.btn:hover {
+  transform: translateY(-1px);
+}
+
+.btn-outline {
+  border-color: rgba(122, 160, 255, 0.4);
+  color: var(--brand);
+  background: rgba(255, 255, 255, 0.72);
+}
+
+.btn-primary {
+  background: linear-gradient(135deg, #7aa0ff, #5f84ef);
+  color: #fff;
+  box-shadow: 0 14px 34px rgba(95, 132, 239, 0.28);
+}
+
+.btn-ghost {
+  background: var(--surface);
+  border-color: var(--line);
+  color: var(--muted-strong);
+}
+
+.section {
+  padding: 122px 0;
+}
+
+.section.compact {
+  padding-top: 88px;
+  padding-bottom: 88px;
+}
+
+.section-head {
+  margin: 0 auto 58px;
+  text-align: center;
+}
+
+.section-title {
+  margin: 0;
+  font-size: clamp(26px, 3.3vw, 48px);
+  line-height: 1.18;
+  letter-spacing: -0.02em;
+}
+
+.section-copy {
+  max-width: 780px;
+  margin: 22px auto 0;
+  color: var(--muted-strong);
+  font-size: 15px;
+  line-height: 1.95;
+}
+
+.split-hero,
+.split-section {
+  display: grid;
+  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
+  gap: 56px;
+  align-items: center;
+}
+
+.stacked-copy {
+  max-width: 560px;
+}
+
+.statement {
+  font-size: clamp(34px, 4.5vw, 56px);
+  line-height: 1.2;
+  letter-spacing: -0.03em;
+  margin: 0;
+}
+
+.lead {
+  margin: 20px 0 0;
+  color: var(--muted-strong);
+  font-size: 16px;
+  line-height: 1.95;
+}
+
+.art-panel {
+  position: relative;
+  border-radius: var(--radius-xl);
+  background: linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(244, 247, 255, 0.96));
+  border: 1px solid rgba(216, 221, 232, 0.7);
+  box-shadow: var(--shadow-soft);
+  overflow: hidden;
+}
+
+.art-panel::before,
+.art-panel::after {
+  content: "";
+  position: absolute;
+  border-radius: 999px;
+}
+
+.art-panel::before {
+  width: 240px;
+  height: 240px;
+  top: -80px;
+  right: -60px;
+  background: radial-gradient(circle, rgba(122, 160, 255, 0.26), rgba(122, 160, 255, 0));
+}
+
+.art-panel::after {
+  width: 180px;
+  height: 180px;
+  left: -50px;
+  bottom: -40px;
+  background: radial-gradient(circle, rgba(242, 136, 119, 0.18), rgba(242, 136, 119, 0));
+}
+
+.art-panel img {
+  width: 100%;
+  height: auto;
+}
+
+.art-panel.photo img {
+  height: 100%;
+  min-height: 100%;
+  object-fit: cover;
+}
+
+.intro-ribbon {
+  display: inline-flex;
+  align-items: center;
+  gap: 10px;
+  margin-bottom: 22px;
+  padding: 10px 16px;
+  border-radius: 999px;
+  background: var(--surface);
+  border: 1px solid var(--line);
+  color: var(--muted);
+  font-size: 12px;
+  font-weight: 800;
+  letter-spacing: 0.08em;
+}
+
+.grid-two {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 30px;
+}
+
+.grid-three {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 30px;
+}
+
+.feature-card,
+.info-card,
+.teacher-card,
+.timeline-card,
+.value-card,
+.download-card {
+  position: relative;
+  min-height: 100%;
+  border-radius: var(--radius-lg);
+  background: var(--surface);
+  border: 1px solid rgba(216, 221, 232, 0.85);
+  box-shadow: var(--shadow-card);
+}
+
+.feature-card,
+.info-card,
+.timeline-card,
+.value-card {
+  padding: 34px;
+}
+
+.feature-card.soft {
+  background: linear-gradient(180deg, #ffffff, #fafbff);
+}
+
+.feature-card h3,
+.info-card h3,
+.timeline-card h3,
+.value-card h3,
+.download-card h3 {
+  margin: 0 0 16px;
+  font-size: 28px;
+  line-height: 1.22;
+  letter-spacing: -0.02em;
+}
+
+.feature-card p,
+.info-card p,
+.timeline-card p,
+.value-card p,
+.download-card p {
+  margin: 0;
+  color: var(--muted-strong);
+  font-size: 15px;
+  line-height: 1.9;
+}
+
+.feature-card .mini-link,
+.download-card .mini-link {
+  display: inline-flex;
+  margin-top: 26px;
+  color: var(--brand);
+  font-size: 13px;
+  font-weight: 800;
+  letter-spacing: 0.06em;
+}
+
+.icon-wrap {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 68px;
+  height: 68px;
+  margin-bottom: 24px;
+  border-radius: 20px;
+  background: linear-gradient(180deg, rgba(122, 160, 255, 0.15), rgba(122, 160, 255, 0.05));
+}
+
+.icon-wrap img {
+  width: 34px;
+  height: 34px;
+}
+
+.headline-card {
+  padding: 44px;
+}
+
+.headline-card .statement {
+  font-size: clamp(28px, 4vw, 50px);
+}
+
+.headline-card .lead {
+  max-width: 540px;
+}
+
+.quote-card {
+  padding: 48px;
+  text-align: center;
+}
+
+.quote-card .statement {
+  font-size: clamp(30px, 4vw, 52px);
+}
+
+.quote-card .lead {
+  max-width: 700px;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.visual-stack {
+  display: grid;
+  gap: 24px;
+}
+
+.visual-stack.dual {
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+}
+
+.visual-stack .art-panel {
+  padding: 24px;
+}
+
+.visual-stack .art-panel.photo {
+  padding: 0;
+}
+
+.art-caption {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 20px;
+  margin-top: 22px;
+  padding-top: 18px;
+  border-top: 1px solid rgba(216, 221, 232, 0.7);
+}
+
+.art-caption strong {
+  font-size: 18px;
+  letter-spacing: -0.01em;
+}
+
+.art-caption span {
+  color: var(--muted);
+  font-size: 13px;
+  letter-spacing: 0.05em;
+}
+
+.timeline {
+  display: grid;
+  gap: 28px;
+}
+
+.timeline-card {
+  display: grid;
+  grid-template-columns: 200px minmax(0, 1fr);
+  gap: 28px;
+  align-items: center;
+}
+
+.timeline-tag {
+  color: var(--accent);
+  font-size: 18px;
+  font-weight: 800;
+  letter-spacing: 0.08em;
+}
+
+.timeline-card .statement {
+  font-size: clamp(24px, 3vw, 42px);
+}
+
+.teacher-grid {
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  gap: 24px;
+}
+
+.teacher-card {
+  padding: 22px;
+}
+
+.teacher-card .portrait {
+  margin-bottom: 18px;
+  border-radius: 22px;
+  overflow: hidden;
+  border: 1px solid rgba(216, 221, 232, 0.75);
+  background: linear-gradient(160deg, #eef3ff, #fff6f1);
+}
+
+.teacher-card .portrait img {
+  width: 100%;
+  aspect-ratio: 0.86;
+  object-fit: cover;
+}
+
+.teacher-card h3 {
+  margin: 0;
+  font-size: 24px;
+}
+
+.teacher-meta {
+  margin-top: 6px;
+  color: var(--brand-strong);
+  font-size: 13px;
+  font-weight: 800;
+  letter-spacing: 0.08em;
+}
+
+.teacher-bio {
+  margin-top: 16px;
+  color: var(--muted-strong);
+  font-size: 14px;
+  line-height: 1.85;
+}
+
+.teacher-note {
+  margin: 0 auto 34px;
+  max-width: 840px;
+  color: var(--muted);
+  text-align: center;
+  font-size: 14px;
+  line-height: 1.9;
+}
+
+.pill-list,
+.value-list {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 14px;
+  margin-top: 28px;
+}
+
+.pill-list span,
+.value-list span {
+  display: inline-flex;
+  align-items: center;
+  min-height: 42px;
+  padding: 0 18px;
+  border-radius: 999px;
+  background: var(--surface);
+  border: 1px solid var(--line);
+  color: var(--muted-strong);
+  font-size: 13px;
+  font-weight: 800;
+  letter-spacing: 0.05em;
+}
+
+.cta-band {
+  padding: 42px;
+  text-align: center;
+}
+
+.cta-band h3 {
+  margin: 0;
+  font-size: clamp(28px, 4vw, 42px);
+  line-height: 1.25;
+}
+
+.cta-band p {
+  max-width: 760px;
+  margin: 18px auto 0;
+  color: var(--muted-strong);
+  font-size: 15px;
+  line-height: 1.95;
+}
+
+.cta-band .hero-actions {
+  margin-top: 30px;
+}
+
+.download-grid {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 24px;
+}
+
+.download-card {
+  padding: 32px;
+}
+
+.download-meta {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  margin-bottom: 22px;
+}
+
+.download-icon {
+  width: 56px;
+  height: 56px;
+  border-radius: 18px;
+  background: linear-gradient(135deg, rgba(122, 160, 255, 0.16), rgba(122, 160, 255, 0.03));
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.download-icon img {
+  width: 30px;
+  height: 30px;
+}
+
+.site-footer {
+  margin-top: 120px;
+  background: var(--footer);
+  color: #fff;
+}
+
+.footer-main {
+  display: grid;
+  grid-template-columns: 1.35fr 0.8fr 0.8fr;
+  gap: 48px;
+  padding: 60px 0 40px;
+}
+
+.site-footer h3 {
+  margin: 0 0 18px;
+  font-size: 18px;
+  letter-spacing: -0.01em;
+}
+
+.site-footer p,
+.site-footer a {
+  color: var(--footer-muted);
+  font-size: 14px;
+  line-height: 2;
+}
+
+.footer-links {
+  display: grid;
+  gap: 6px;
+}
+
+.social-row {
+  display: flex;
+  gap: 12px;
+  margin-top: 24px;
+}
+
+.social-row a {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 38px;
+  height: 38px;
+  border-radius: 50%;
+  border: 1px solid rgba(255, 255, 255, 0.22);
+}
+
+.social-row svg {
+  width: 16px;
+  height: 16px;
+  fill: currentColor;
+}
+
+.footer-bottom {
+  border-top: 1px solid rgba(255, 255, 255, 0.1);
+  padding: 22px 0 30px;
+  color: rgba(255, 255, 255, 0.46);
+  font-size: 12px;
+  text-align: center;
+}
+
+.bg-wash {
+  position: relative;
+}
+
+.bg-wash::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  background:
+    radial-gradient(circle at 12% 12%, rgba(122, 160, 255, 0.08), transparent 24%),
+    radial-gradient(circle at 88% 18%, rgba(242, 136, 119, 0.08), transparent 22%),
+    radial-gradient(circle at 78% 86%, rgba(122, 160, 255, 0.05), transparent 24%);
+  pointer-events: none;
+}
+
+.bg-wash > * {
+  position: relative;
+}
+
+@media (max-width: 1180px) {
+  .site-nav {
+    min-height: 88px;
+  }
+
+  .nav-links,
+  .locale-pill {
+    display: none;
+  }
+
+  .menu-toggle {
+    display: inline-flex;
+  }
+
+  .split-hero,
+  .split-section,
+  .grid-three,
+  .teacher-grid,
+  .download-grid,
+  .footer-main,
+  .timeline-card {
+    grid-template-columns: 1fr;
+  }
+
+  .grid-two,
+  .visual-stack.dual {
+    grid-template-columns: 1fr;
+  }
+
+  .timeline-card {
+    gap: 18px;
+  }
+
+  .timeline-tag {
+    font-size: 15px;
+  }
+}
+
+@media (max-width: 760px) {
+  :root {
+    --nav-h: 84px;
+  }
+
+  .container {
+    width: min(calc(100% - 32px), var(--content));
+  }
+
+  .hero {
+    padding: 64px 0 32px;
+  }
+
+  .section {
+    padding: 82px 0;
+  }
+
+  .feature-card,
+  .info-card,
+  .timeline-card,
+  .value-card,
+  .download-card,
+  .teacher-card,
+  .headline-card,
+  .quote-card,
+  .cta-band {
+    padding: 26px;
+  }
+
+  .brand-copy {
+    gap: 6px;
+    font-size: 14px;
+  }
+
+  .hero-actions {
+    flex-direction: column;
+    align-items: stretch;
+  }
+
+  .btn {
+    width: 100%;
+  }
+
+  .site-footer {
+    margin-top: 82px;
+  }
+}

assets/images/logo-mark.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40" fill="none">
+  <rect x="2" y="2" width="36" height="36" rx="18" fill="#7AA0FF"/>
+  <path d="M12 15.5h5v9h-5zm11 0h5v9h-5zM17.5 12h5v5h-5zm0 12h5v5h-5z" fill="#fff"/>
+  <path d="M9.5 26.5c1.5-2.9 4.2-4.2 7-4.2h7c2.7 0 5.4 1.3 7 4.2" stroke="#fff" stroke-width="2" stroke-linecap="round"/>
+</svg>

assets/js/site.js

@@ -0,0 +1,9 @@
+const toggle = document.querySelector("[data-menu-toggle]");
+const menu = document.querySelector("[data-mobile-menu]");
+
+if (toggle && menu) {
+  toggle.addEventListener("click", () => {
+    const isOpen = menu.classList.toggle("is-open");
+    toggle.setAttribute("aria-expanded", String(isOpen));
+  });
+}