diff --git a/themes/ITStudioMainSite/assets/css/about-hero.css b/themes/ITStudioMainSite/assets/css/about-hero.css deleted file mode 100644 index 793b697..0000000 --- a/themes/ITStudioMainSite/assets/css/about-hero.css +++ /dev/null @@ -1,589 +0,0 @@ -/* ========================================= - 工作室介绍页 - 旧首页视觉 - ========================================= */ - -.site-main { - position: relative; -} - -body.intro-about { - -ms-overflow-style: none; - scrollbar-width: none; -} - -body.intro-about::-webkit-scrollbar { - width: 0; - height: 0; - display: none; -} - -html:has(body.intro-about) { - -ms-overflow-style: none; - scrollbar-width: none; -} - -html:has(body.intro-about)::-webkit-scrollbar { - width: 0; - height: 0; - display: none; -} - -body.intro-about .site-header, -body.intro-about .site-footer { - display: none !important; -} - -body.intro-about .hero-section { - min-height: 100vh; -} - -body.intro-about .about-theme-toggle { - position: fixed; - top: 18px; - right: 18px; - z-index: 40; - width: 72px; - height: 72px; - background: transparent !important; - border: none !important; - border-radius: 0; - color: color-mix(in srgb, var(--text-primary) 82%, var(--color-primary) 18%); - box-shadow: none; - backdrop-filter: none; - -webkit-backdrop-filter: none; -} - -body.intro-about .about-theme-toggle::before { - display: none; - content: none; -} - -body.intro-about .about-theme-toggle svg { - width: 60px; - height: 60px; -} - -body.intro-about .about-theme-toggle:hover, -body.intro-about .about-theme-toggle:focus-visible { - background: transparent !important; - border: none !important; - color: color-mix(in srgb, var(--text-primary) 72%, var(--color-primary) 28%); - box-shadow: none; -} - -body.intro-about .about-theme-toggle:hover { - transform: translateY(-1px); -} - -body.intro-about .about-theme-toggle:hover::before, -body.intro-about .about-theme-toggle:focus-visible::before { - display: none; -} - -.hero-section { - padding: 40px 0; - background-color: var(--bg-body); - position: relative; - overflow: visible; - background-image: none; - min-height: calc(100vh - var(--header-height)); - display: flex; - align-items: center; - isolation: isolate; - z-index: 1; -} - -.hero-scroll-indicator { - position: absolute; - left: 50%; - bottom: 28px; - transform: translateX(-50%); - display: flex; - flex-direction: column; - align-items: center; - gap: 8px; - z-index: 4; - color: var(--text-secondary); - font-family: var(--font-mono); - font-size: 0.9rem; - letter-spacing: 0.12em; - text-transform: uppercase; - opacity: 0; - pointer-events: none; - transition: opacity 0.45s var(--ease-in-out), transform 0.45s var(--ease-in-out); -} - -.hero-scroll-indicator .scroll-arrow { - width: 18px; - height: 18px; - border-right: 2px solid currentColor; - border-bottom: 2px solid currentColor; - transform: rotate(45deg); - animation: hero-scroll-bounce 1.6s ease-in-out infinite; -} - -.hero-scroll-indicator .scroll-text { - font-size: 0.7rem; - letter-spacing: 0.3em; -} - -@keyframes hero-scroll-bounce { - 0%, 100% { transform: translateY(0) rotate(45deg); opacity: 0.5; } - 50% { transform: translateY(6px) rotate(45deg); opacity: 1; } -} - -@media (min-width: 900px) { - .home-hero-initial .site-header { - transform: translateY(-100%); - } - - .home-hero-initial .site-header, - .home-hero-scrolled .site-header { - position: fixed; - left: 0; - right: 0; - width: 100%; - } - - .home-hero-initial .hero-scroll-indicator { - opacity: 1; - transform: translateX(-50%) translateY(0); - } - - .home-hero-scrolled .hero-scroll-indicator { - opacity: 0; - transform: translateX(-50%) translateY(10px); - } -} - -.hero-waves { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 140vh; - opacity: 0.5; - pointer-events: none; - z-index: 2; - mix-blend-mode: screen; - filter: saturate(1.08); - display: block; - -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0.9) 55%, rgba(0, 0, 0, 0.35) 75%, rgba(0, 0, 0, 0) 100%); - mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0.9) 55%, rgba(0, 0, 0, 0.35) 75%, rgba(0, 0, 0, 0) 100%); - -webkit-mask-repeat: no-repeat; - mask-repeat: no-repeat; - -webkit-mask-size: 100% 100%; - mask-size: 100% 100%; -} - -html:not([data-theme="dark"]) .hero-waves { - opacity: 0.55; - mix-blend-mode: multiply; - filter: saturate(1.2); -} - -[data-theme="dark"] .hero-waves { - opacity: 0.5; - mix-blend-mode: screen; - filter: saturate(1.08); -} - -.hero-section::after { - display: none; -} - -.hero-content { - max-width: 800px; - margin: 0 auto; - text-align: center; - position: relative; - z-index: 1; - display: flex; - flex-direction: column; - align-items: center; -} - -.hero-title { - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - gap: clamp(2px, 0.6vw, 10px); - margin: 0 0 1.2rem; - overflow: visible; - --hero-title-gradient: linear-gradient(135deg, var(--text-primary) 0%, var(--color-primary) 100%); - width: 100%; -} - -.hero-title-svg { - display: block; - width: min(88vw, 900px); - margin: 0 auto; - aspect-ratio: 3 / 2; - background-image: var(--hero-title-gradient); - -webkit-mask: url("../../resources/title.svg") center / contain no-repeat; - mask: url("../../resources/title.svg") center / contain no-repeat; - filter: - drop-shadow(0 10px 24px rgba(12, 20, 32, 0.25)) - drop-shadow(0 0 18px rgba(120, 190, 255, 0.28)); - position: relative; - transform: translateY(-8px) scale(1.06); - transform-origin: center; -} - -.hero-title-svg::before { - content: ""; - position: absolute; - inset: -6% -4%; - background: - radial-gradient(circle at 30% 35%, rgba(255, 255, 255, 0.35), transparent 55%), - radial-gradient(circle at 70% 45%, rgba(140, 205, 255, 0.28), transparent 60%), - linear-gradient(180deg, rgba(255, 255, 255, 0.25), rgba(255, 255, 255, 0)); - -webkit-mask: url("../../resources/title.svg") center / contain no-repeat; - mask: url("../../resources/title.svg") center / contain no-repeat; - opacity: 0.22; - filter: blur(6px); - mix-blend-mode: screen; - pointer-events: none; -} - -html:not([data-theme="dark"]) .hero-title-svg::before { - opacity: 0; -} - -.hero-title-svg::after { - content: ""; - position: absolute; - left: 0; - right: 0; - top: 100%; - height: 55%; - background-image: var(--hero-title-gradient); - -webkit-mask: url("../../resources/title.svg") center / contain no-repeat; - mask: url("../../resources/title.svg") center / contain no-repeat; - transform: scaleY(-1); - opacity: 0.18; - filter: blur(2px); -} - -.hero-title-text { - position: absolute; - width: 1px; - height: 1px; - padding: 0; - margin: -1px; - overflow: hidden; - clip: rect(0, 0, 0, 0); - white-space: nowrap; - border: 0; -} - -.hero-description { - font-size: 1.5rem; - color: var(--text-secondary); - margin-bottom: 3rem; - font-family: var(--font-mono); - min-height: 3.6em; -} - -.stream-char { - transition: opacity 0.4s ease; -} - -.services-provided { - margin-top: 0; - position: relative; - z-index: 2; -} - -.services-section { - padding: 80px 0; - background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, var(--bg-body) 55%); - position: relative; - z-index: 3; -} - -.services-provided h2 { - font-size: 1.8rem; - margin-bottom: 1.5rem; - padding-bottom: 1rem; - border-bottom: none; - color: var(--text-primary); - display: flex; - align-items: center; -} - -.services-provided h2::before { - content: "$"; - color: var(--color-primary); - margin-right: 10px; - font-family: var(--font-mono); - font-weight: 800; -} - -.services-grid-box { - display: grid; - grid-template-columns: repeat(4, 1fr); - gap: 24px; - padding: 0 10px; -} - -.service-item { - background: transparent; - border: none; - border-radius: var(--radius-md); - padding: 32px 24px; - display: flex; - flex-direction: column; - align-items: center; - text-align: center; - transition: none; - text-decoration: none; - pointer-events: none; - cursor: default; -} - -.service-item:hover { - transform: none; - box-shadow: none; -} - -.service-icon { - margin-bottom: 1.5rem; - --svc-stroke: #2f3d4f; - --svc-muted: #5f7288; - --svc-accent: var(--color-primary); - --svc-soft: rgba(9, 105, 218, 0.12); - --svc-soft-strong: rgba(9, 105, 218, 0.2); - color: var(--svc-stroke); -} - -[data-theme="dark"] .service-icon { - --svc-stroke: #c4d1de; - --svc-muted: #93a4b7; - --svc-soft: rgba(88, 166, 255, 0.16); - --svc-soft-strong: rgba(88, 166, 255, 0.26); -} - -.service-item.service-resources .service-icon { - --svc-accent: #2f7de1; - --svc-soft: rgba(47, 125, 225, 0.14); - --svc-soft-strong: rgba(47, 125, 225, 0.24); -} - -.service-item.service-mirror .service-icon { - --svc-accent: #1f9d8d; - --svc-soft: rgba(31, 157, 141, 0.14); - --svc-soft-strong: rgba(31, 157, 141, 0.24); -} - -.service-item.service-git .service-icon { - --svc-accent: #8b5cf6; - --svc-soft: rgba(139, 92, 246, 0.14); - --svc-soft-strong: rgba(139, 92, 246, 0.24); -} - -.service-item.service-minecraft .service-icon { - --svc-accent: #2e9b45; - --svc-soft: rgba(46, 155, 69, 0.14); - --svc-soft-strong: rgba(46, 155, 69, 0.24); -} - -.service-item.service-forum .service-icon { - --svc-accent: #d97706; - --svc-soft: rgba(217, 119, 6, 0.14); - --svc-soft-strong: rgba(217, 119, 6, 0.24); -} - -.service-item.service-repair .service-icon { - --svc-accent: #d94f45; - --svc-soft: rgba(217, 79, 69, 0.14); - --svc-soft-strong: rgba(217, 79, 69, 0.24); -} - -.service-item.service-workshop .service-icon { - --svc-accent: #c58a00; - --svc-soft: rgba(197, 138, 0, 0.14); - --svc-soft-strong: rgba(197, 138, 0, 0.24); -} - -.service-item.service-campus .service-icon { - --svc-accent: #0f8fb8; - --svc-soft: rgba(15, 143, 184, 0.14); - --svc-soft-strong: rgba(15, 143, 184, 0.24); -} - -[data-theme="dark"] .service-item.service-resources .service-icon { - --svc-accent: #7db5ff; - --svc-soft: rgba(125, 181, 255, 0.18); - --svc-soft-strong: rgba(125, 181, 255, 0.28); -} - -[data-theme="dark"] .service-item.service-mirror .service-icon { - --svc-accent: #5edac7; - --svc-soft: rgba(94, 218, 199, 0.18); - --svc-soft-strong: rgba(94, 218, 199, 0.28); -} - -[data-theme="dark"] .service-item.service-git .service-icon { - --svc-accent: #b9a0ff; - --svc-soft: rgba(185, 160, 255, 0.18); - --svc-soft-strong: rgba(185, 160, 255, 0.28); -} - -[data-theme="dark"] .service-item.service-minecraft .service-icon { - --svc-accent: #6fda83; - --svc-soft: rgba(111, 218, 131, 0.18); - --svc-soft-strong: rgba(111, 218, 131, 0.28); -} - -[data-theme="dark"] .service-item.service-forum .service-icon { - --svc-accent: #f5b04d; - --svc-soft: rgba(245, 176, 77, 0.18); - --svc-soft-strong: rgba(245, 176, 77, 0.28); -} - -[data-theme="dark"] .service-item.service-repair .service-icon { - --svc-accent: #ff8a80; - --svc-soft: rgba(255, 138, 128, 0.18); - --svc-soft-strong: rgba(255, 138, 128, 0.28); -} - -[data-theme="dark"] .service-item.service-workshop .service-icon { - --svc-accent: #ffd166; - --svc-soft: rgba(255, 209, 102, 0.18); - --svc-soft-strong: rgba(255, 209, 102, 0.28); -} - -[data-theme="dark"] .service-item.service-campus .service-icon { - --svc-accent: #68d5ff; - --svc-soft: rgba(104, 213, 255, 0.18); - --svc-soft-strong: rgba(104, 213, 255, 0.28); -} - -.service-icon .service-symbol { - width: 90px; - height: 90px; - display: block; -} - -.service-icon .svc-stroke, -.service-icon .svc-muted, -.service-icon .svc-accent { - fill: none; - stroke-linecap: round; - stroke-linejoin: round; -} - -.service-icon .svc-stroke { - stroke: var(--svc-stroke); - stroke-width: 2.2; -} - -.service-icon .svc-muted { - stroke: var(--svc-muted); - stroke-width: 2.05; -} - -.service-icon .svc-accent { - stroke: var(--svc-accent); - stroke-width: 2.3; -} - -.service-icon .svc-soft { - fill: var(--svc-soft); -} - -.service-icon .svc-soft-strong { - fill: var(--svc-soft-strong); -} - -.service-icon .svc-dot { - fill: var(--svc-accent); -} - -.service-icon .svc-dot-muted { - fill: var(--svc-muted); -} - -.service-item span { - font-weight: 600; - color: var(--text-primary); - font-size: 1.25rem; -} - -@media (max-width: 1100px) { - .services-grid-box { - grid-template-columns: repeat(2, 1fr); - } -} - -@media (max-width: 768px) { - body.intro-about .about-theme-toggle { - top: 12px; - right: 12px; - } - - .hero-title { - margin-bottom: 1rem; - } - - .hero-title-svg { - width: min(92vw, 560px); - transform: translateY(-6px) scale(1.03); - } - - .hero-description { - font-size: 1rem; - } - - .services-section { - padding: 28px 0; - } - - .hero-section { - min-height: auto; - padding: 16px 0 16px; - } - - .hero-waves { - display: none; - } - - .hero-scroll-indicator { - display: none; - } -} - -@media (max-width: 600px) { - .services-grid-box { - grid-template-columns: repeat(2, minmax(0, 1fr)); - gap: 16px; - } - - .service-item { - padding: 12px 8px; - border: none; - background: transparent; - box-shadow: none; - } - - .service-item:hover { - transform: none; - border-color: transparent; - box-shadow: none; - } - - .service-icon { - margin-bottom: 0.75rem; - } - - .service-icon .service-symbol { - width: 64px; - height: 64px; - } - - .service-item span { - font-size: 1rem; - } -} diff --git a/themes/ITStudioMainSite/assets/css/intro.css b/themes/ITStudioMainSite/assets/css/intro.css deleted file mode 100644 index 5de7c5b..0000000 --- a/themes/ITStudioMainSite/assets/css/intro.css +++ /dev/null @@ -1,408 +0,0 @@ -/* ========================================= - Introduction Page (About) - ========================================= */ - -.intro-page { - position: relative; - overflow: hidden; - background-color: var(--bg-body); - background-image: - linear-gradient(160deg, var(--intro-glow-primary), transparent 55%), - linear-gradient(330deg, var(--intro-glow-accent), transparent 50%); - --intro-glow-primary: rgba(9, 105, 218, 0.14); - --intro-glow-accent: rgba(142, 136, 199, 0.14); -} - -[data-theme="dark"] .intro-page { - --intro-glow-primary: rgba(88, 166, 255, 0.22); - --intro-glow-accent: rgba(142, 136, 199, 0.2); -} - -.intro-page::before { - display: none; -} - -.intro-about .site-header { - background-color: rgba(14, 22, 36, 0.78); - border-bottom-color: rgba(255, 255, 255, 0.06); -} - -html:not([data-theme="dark"]) .intro-about .site-header { - background-color: rgba(246, 249, 252, 0.9); - border-bottom-color: rgba(36, 41, 47, 0.08); -} - -.intro-page > * { - position: relative; - z-index: 1; -} - -.intro-step { - padding: 120px 0; - scroll-margin-top: 110px; -} - -.intro-hero { - padding-top: 140px; - padding-bottom: 120px; -} - -.intro-hero-grid, -.intro-grid, -.intro-join-grid { - display: grid; - grid-template-columns: 1.05fr 0.95fr; - gap: 64px; - align-items: center; -} - -.intro-grid.reverse .intro-media, -.intro-grid.reverse .intro-join-media { - order: -1; -} - -.intro-copy { - display: flex; - flex-direction: column; - gap: 16px; -} - -.intro-hero .intro-copy { - gap: 14px; -} - -.intro-brand-mark { - position: relative; - width: min(420px, 100%); - margin-bottom: 2px; -} - -.intro-brand-svg { - display: block; - width: min(76vw, 360px); - aspect-ratio: 3 / 2; - background-image: linear-gradient(135deg, var(--text-primary), var(--color-primary)); - -webkit-mask: url("../../resources/title.svg") center / contain no-repeat; - mask: url("../../resources/title.svg") center / contain no-repeat; - filter: - drop-shadow(0 10px 24px rgba(12, 20, 32, 0.24)) - drop-shadow(0 0 16px rgba(120, 190, 255, 0.24)); -} - -.intro-brand-text { - position: absolute; - width: 1px; - height: 1px; - padding: 0; - margin: -1px; - overflow: hidden; - clip: rect(0, 0, 0, 0); - white-space: nowrap; - border: 0; -} - -.intro-title { - font-size: clamp(2.6rem, 4vw, 4rem); - font-weight: 800; - letter-spacing: -0.02em; - line-height: 1.15; - margin-bottom: 0; - background: linear-gradient(120deg, var(--text-primary), var(--color-primary)); - -webkit-background-clip: text; - -webkit-text-fill-color: transparent; -} - -.intro-heading { - font-size: clamp(2rem, 3vw, 2.8rem); - font-weight: 700; - letter-spacing: -0.01em; - margin-bottom: 0.5rem; -} - -.intro-lead { - font-size: 1.2rem; - color: var(--text-secondary); -} - -.intro-sub, -.intro-text { - color: var(--text-secondary); - font-size: 1.05rem; -} - -.intro-cta-group { - display: flex; - gap: 16px; - flex-wrap: wrap; - margin-top: 4px; -} - -.intro-btn { - display: inline-flex; - align-items: center; - justify-content: center; - padding: 12px 20px; - border-radius: var(--radius-sm); - border: 1px solid var(--color-primary); - font-weight: 600; - font-size: 1rem; - color: var(--text-primary); - background-color: transparent; - transition: all var(--duration-fast); -} - -.intro-btn--primary { - background: linear-gradient(120deg, var(--color-primary), var(--color-primary-light)); - color: #fff; - border-color: transparent; - box-shadow: var(--shadow-sm); -} - -.intro-btn--primary:hover { - transform: translateY(-1px); - box-shadow: var(--shadow-md); -} - -.intro-btn--ghost:hover { - color: var(--color-primary); - border-color: var(--color-primary); -} - -.intro-stats { - display: flex; - flex-wrap: wrap; - gap: 24px; - margin-top: 8px; -} - -.intro-stat { - display: flex; - flex-direction: column; - gap: 4px; - padding: 12px 16px; - border-radius: var(--radius-sm); - border: 1px solid var(--border-default); - background-color: var(--bg-card); - min-width: 120px; -} - -.stat-number { - font-size: 1.4rem; - font-weight: 700; - color: var(--text-primary); -} - -.stat-label { - font-size: 0.9rem; - color: var(--text-secondary); -} - -.intro-media, -.intro-hero-media, -.intro-join-media { - display: grid; - grid-template-columns: repeat(2, 1fr); - gap: 16px; -} - -.intro-hero-media { - align-items: stretch; -} - -.media-card { - min-height: 200px; - border-radius: var(--radius-md); - border: 1px dashed var(--border-default); - background-color: var(--bg-card); - display: flex; - align-items: center; - justify-content: center; - text-align: center; - font-family: var(--font-mono); - font-size: 0.9rem; - color: var(--text-secondary); - padding: 16px; -} - -.media-card--tall { - grid-row: span 2; - min-height: 420px; -} - -.media-card--wide { - grid-column: span 2; - min-height: 240px; -} - -.intro-points { - display: flex; - flex-direction: column; - gap: 12px; - margin-top: 12px; -} - -.intro-points li, -.intro-list li { - position: relative; - padding-left: 18px; - color: var(--text-secondary); -} - -.intro-points li::before, -.intro-list li::before { - content: ""; - position: absolute; - left: 0; - top: 0.55em; - width: 6px; - height: 6px; - border-radius: 50%; - background-color: var(--color-primary); -} - -.intro-org-grid, -.intro-feature-grid, -.intro-adv-grid { - display: grid; - gap: 16px; - margin-top: 16px; -} - -.intro-org-grid, -.intro-feature-grid { - grid-template-columns: repeat(3, 1fr); -} - -.intro-adv-grid { - grid-template-columns: repeat(2, 1fr); -} - -.intro-card { - border-radius: var(--radius-md); - border: 1px solid var(--border-default); - background-color: var(--bg-card); - padding: 20px; - display: flex; - flex-direction: column; - gap: 8px; -} - -.intro-card h3 { - font-size: 1.1rem; - font-weight: 600; -} - -.intro-card p { - color: var(--text-secondary); - font-size: 0.95rem; -} - -.intro-list { - display: flex; - flex-direction: column; - gap: 10px; - margin-top: 4px; -} - -.intro-join { - padding-bottom: 140px; -} - -.intro-join-grid { - align-items: start; -} - -.intro-join-content { - display: flex; - flex-direction: column; - gap: 16px; -} - -.intro-join-media { - grid-template-columns: repeat(3, 1fr); -} - -/* Stream text characters */ -.stream-char { - transition: opacity 0.4s ease; -} - -/* Animations */ -.intro-animate { - transition: opacity 0.8s var(--ease-in-out), transform 0.8s var(--ease-in-out); - transition-delay: var(--delay, 0s); -} - -body.has-intro-animations .intro-animate { - opacity: 0; - transform: translateY(30px); -} - -body.has-intro-animations .intro-step.is-active .intro-animate { - opacity: 1; - transform: translateY(0); -} - -@media (prefers-reduced-motion: reduce) { - .intro-animate { - transition: none !important; - opacity: 1 !important; - transform: none !important; - } -} - -/* Responsive */ -@media (max-width: 1100px) { - .intro-hero-grid, - .intro-grid, - .intro-join-grid { - grid-template-columns: 1fr; - } - - .intro-grid.reverse .intro-media, - .intro-grid.reverse .intro-join-media { - order: 0; - } - - .intro-org-grid, - .intro-feature-grid { - grid-template-columns: repeat(2, 1fr); - } - - .intro-adv-grid { - grid-template-columns: 1fr; - } - - .intro-join-media { - grid-template-columns: repeat(2, 1fr); - } -} - -@media (max-width: 768px) { - .intro-step { - padding: 80px 0; - } - - .intro-hero { - padding-top: 110px; - } - - .intro-brand-svg { - width: min(86vw, 320px); - } - - .intro-title { - font-size: 2.2rem; - } - - .intro-cta-group { - flex-direction: column; - align-items: flex-start; - } - - .intro-org-grid, - .intro-feature-grid, - .intro-join-media { - grid-template-columns: 1fr; - } -} diff --git a/themes/ITStudioMainSite/assets/js/hero-waves.js b/themes/ITStudioMainSite/assets/js/hero-waves.js deleted file mode 100644 index 19b34fe..0000000 --- a/themes/ITStudioMainSite/assets/js/hero-waves.js +++ /dev/null @@ -1,166 +0,0 @@ -(() => { - const main = document.querySelector('.site-main'); - const heroSection = document.querySelector('.hero-section'); - const servicesSection = document.querySelector('.services-section'); - const canvas = document.querySelector('.hero-waves'); - if (!main || !canvas) return; - - const ctx = canvas.getContext('2d'); - if (!ctx) return; - - const prefersReduced = window.matchMedia('(prefers-reduced-motion: reduce)'); - let width = 0; - let height = 0; - let dpr = 1; - let rafId = null; - let pageVisible = document.visibilityState !== 'hidden'; - let heroVisible = true; - - const waveDefs = [ - { yRatio: 0.3, amplitude: 24, wavelength: 940, speed: 0.5, alpha: 0.98 }, - { yRatio: 0.45, amplitude: 14, wavelength: 1020, speed: 0.58, alpha: 0.92 }, - { yRatio: 0.65, amplitude: 10, wavelength: 1160, speed: 0.6, alpha: 0.9 }, - ]; - - const palettes = { - light: { - gradient: ['#d6e8fa', '#a7c8e8', '#6f9fc8', '#4f84b6', '#376e9f'], - waves: ['rgba(124, 167, 205, 0.96)', 'rgba(90, 143, 190, 0.97)', 'rgba(62, 118, 169, 0.98)'], - }, - dark: { - gradient: ['#0d1117', '#111d2b', '#14334d', '#17507a', '#1b6aa6'], - waves: ['rgba(90, 165, 225, 0.9)', 'rgba(65, 140, 210, 0.88)', 'rgba(50, 120, 190, 0.86)'], - }, - }; - - const getTheme = () => (document.documentElement.getAttribute('data-theme') === 'dark' ? 'dark' : 'light'); - - const getCoverageHeight = () => { - if (servicesSection) { - const coverage = servicesSection.offsetTop + servicesSection.offsetHeight * 0.5; - return Math.min(coverage, main.scrollHeight); - } - if (heroSection) { - return heroSection.offsetHeight; - } - return main.scrollHeight; - }; - - const resize = () => { - dpr = Math.min(window.devicePixelRatio || 1, 2); - width = main.clientWidth; - height = Math.max(1, Math.round(getCoverageHeight())); - canvas.width = Math.floor(width * dpr); - canvas.height = Math.floor(height * dpr); - canvas.style.width = `${width}px`; - canvas.style.height = `${height}px`; - ctx.setTransform(dpr, 0, 0, dpr, 0, 0); - }; - - const drawBackground = (palette) => { - const gradient = ctx.createLinearGradient(0, 0, 0, height); - gradient.addColorStop(0, palette.gradient[0]); - gradient.addColorStop(0.35, palette.gradient[1]); - gradient.addColorStop(0.55, palette.gradient[2]); - gradient.addColorStop(0.75, palette.gradient[3]); - gradient.addColorStop(1, palette.gradient[4]); - ctx.fillStyle = gradient; - ctx.fillRect(0, 0, width, height); - }; - - const drawWave = (palette, wave, time, index) => { - const yBase = height * wave.yRatio; - const phase = time * wave.speed; - const prevAlpha = ctx.globalAlpha; - ctx.globalAlpha = wave.alpha ?? 1; - ctx.beginPath(); - ctx.moveTo(0, height); - for (let x = 0; x <= width; x += 18) { - const theta = (x / wave.wavelength) * Math.PI * 2 + phase; - const y = yBase + Math.sin(theta) * wave.amplitude; - ctx.lineTo(x, y); - } - ctx.lineTo(width, height); - ctx.closePath(); - ctx.fillStyle = palette.waves[index % palette.waves.length]; - ctx.fill(); - ctx.globalAlpha = prevAlpha; - }; - - const render = (timestamp) => { - if (!pageVisible || !heroVisible || prefersReduced.matches) { - rafId = null; - return; - } - - const palette = palettes[getTheme()]; - const time = timestamp * 0.001; - ctx.clearRect(0, 0, width, height); - drawBackground(palette); - waveDefs.forEach((wave, index) => drawWave(palette, wave, time, index)); - rafId = requestAnimationFrame(render); - }; - - const stop = () => { - if (rafId) { - cancelAnimationFrame(rafId); - rafId = null; - } - }; - - const drawStatic = () => { - const palette = palettes[getTheme()]; - ctx.clearRect(0, 0, width, height); - drawBackground(palette); - waveDefs.forEach((wave, index) => drawWave(palette, wave, 0, index)); - }; - - const start = () => { - stop(); - resize(); - if (prefersReduced.matches || !pageVisible || !heroVisible) { - drawStatic(); - return; - } - rafId = requestAnimationFrame(render); - }; - - const onResize = () => { - resize(); - if (prefersReduced.matches) { - drawStatic(); - } - }; - - const themeObserver = new MutationObserver(() => { - if (prefersReduced.matches) { - drawStatic(); - } - }); - - themeObserver.observe(document.documentElement, { attributes: true, attributeFilter: ['data-theme'] }); - prefersReduced.addEventListener('change', start); - window.addEventListener('resize', onResize); - window.addEventListener('load', onResize); - - const updateVisibility = () => { - pageVisible = document.visibilityState !== 'hidden'; - if (pageVisible && heroVisible) { - start(); - } else { - stop(); - } - }; - - document.addEventListener('visibilitychange', updateVisibility); - - if (typeof IntersectionObserver !== 'undefined') { - const visibilityObserver = new IntersectionObserver((entries) => { - heroVisible = entries.length === 0 || entries[0].isIntersecting; - updateVisibility(); - }, { threshold: 0.01 }); - visibilityObserver.observe(canvas); - } - - start(); -})(); diff --git a/themes/ITStudioMainSite/assets/js/home-hero.js b/themes/ITStudioMainSite/assets/js/home-hero.js deleted file mode 100644 index aa26089..0000000 --- a/themes/ITStudioMainSite/assets/js/home-hero.js +++ /dev/null @@ -1,191 +0,0 @@ -(() => { - const hero = document.querySelector('.hero-section'); - if (!hero) return; - - const body = document.body; - const header = document.querySelector('.site-header'); - const titleSvg = hero.querySelector('.hero-title-svg'); - const scrollIndicator = hero.querySelector('.hero-scroll-indicator'); - const scrollArrow = scrollIndicator ? scrollIndicator.querySelector('.scroll-arrow') : null; - const scrollText = scrollIndicator ? scrollIndicator.querySelector('.scroll-text') : null; - - const desktopQuery = window.matchMedia('(min-width: 900px)'); - const reducedMotionQuery = window.matchMedia('(prefers-reduced-motion: reduce)'); - const anime = window.anime; - const hasAnime = typeof anime === 'function'; - - let arrowPulse = null; - let didIntro = false; - let ticking = false; - - const stopArrowPulse = () => { - if (!arrowPulse) return; - arrowPulse.pause(); - arrowPulse = null; - }; - - const startArrowPulse = () => { - if (!hasAnime || reducedMotionQuery.matches || !scrollArrow) return; - stopArrowPulse(); - scrollArrow.style.animation = 'none'; - anime.remove(scrollArrow); - anime.set(scrollArrow, { - translateY: 0, - opacity: 0.5, - rotate: 45, - }); - arrowPulse = anime({ - targets: scrollArrow, - translateY: [0, 6, 0], - opacity: [0.5, 1, 0.5], - rotate: 45, - duration: 1600, - easing: 'easeInOutSine', - loop: true, - }); - }; - - const clearInlineState = () => { - if (header) { - header.style.transform = ''; - } - if (scrollIndicator) { - scrollIndicator.style.opacity = ''; - scrollIndicator.style.transform = ''; - } - }; - - const animateScrollState = (isAtTop) => { - if (!hasAnime || reducedMotionQuery.matches) return; - - if (header) { - anime.remove(header); - anime({ - targets: header, - translateY: isAtTop ? '-100%' : '0%', - duration: isAtTop ? 500 : 380, - easing: isAtTop ? 'easeInOutCubic' : 'easeOutCubic', - }); - } - - if (scrollIndicator) { - anime.remove(scrollIndicator); - anime({ - targets: scrollIndicator, - opacity: isAtTop ? 1 : 0, - duration: isAtTop ? 380 : 260, - easing: isAtTop ? 'easeOutCubic' : 'easeOutQuad', - }); - } - }; - - const applyState = (animated) => { - if (!desktopQuery.matches) { - body.classList.remove('home-hero-initial', 'home-hero-scrolled'); - stopArrowPulse(); - clearInlineState(); - return; - } - - const isAtTop = window.scrollY <= 6; - body.classList.toggle('home-hero-initial', isAtTop); - body.classList.toggle('home-hero-scrolled', !isAtTop); - - if (animated) { - animateScrollState(isAtTop); - } else if (hasAnime) { - if (header) { - anime.remove(header); - } - if (scrollIndicator) { - anime.remove(scrollIndicator); - } - } - - if (isAtTop) { - startArrowPulse(); - } else { - stopArrowPulse(); - } - }; - - const playIntro = () => { - if (didIntro || !hasAnime || reducedMotionQuery.matches || !desktopQuery.matches || window.scrollY > 6) { - return; - } - - didIntro = true; - if (titleSvg) { - anime.set(titleSvg, { opacity: 0, translateY: 14, scale: 1.01 }); - } - if (scrollArrow) { - anime.set(scrollArrow, { opacity: 0, translateY: 8, rotate: 45 }); - } - if (scrollText) { - anime.set(scrollText, { opacity: 0, translateY: 8 }); - } - - const timeline = anime.timeline({ - easing: 'easeOutCubic', - }); - - if (titleSvg) { - timeline.add({ - targets: titleSvg, - opacity: 1, - translateY: -8, - scale: 1.06, - duration: 860, - easing: 'easeOutExpo', - }); - } - - if (scrollArrow || scrollText) { - timeline.add({ - targets: [scrollArrow, scrollText].filter(Boolean), - opacity: (el) => (el === scrollArrow ? [0, 1] : [0, 1]), - translateY: 0, - rotate: (el) => (el === scrollArrow ? 45 : 0), - duration: 420, - delay: anime.stagger(80), - }, '-=300'); - } - - timeline.finished.then(() => { - startArrowPulse(); - }); - }; - - const onScroll = () => { - if (ticking) return; - ticking = true; - window.requestAnimationFrame(() => { - applyState(true); - ticking = false; - }); - }; - - const onResize = () => { - applyState(false); - }; - - const onReducedMotionChange = () => { - if (reducedMotionQuery.matches) { - stopArrowPulse(); - if (scrollArrow) { - scrollArrow.style.animation = 'none'; - } - } else if (window.scrollY <= 6 && desktopQuery.matches) { - startArrowPulse(); - } - applyState(false); - }; - - applyState(false); - playIntro(); - - window.addEventListener('scroll', onScroll, { passive: true }); - window.addEventListener('resize', onResize); - desktopQuery.addEventListener('change', onResize); - reducedMotionQuery.addEventListener('change', onReducedMotionChange); -})(); diff --git a/themes/ITStudioMainSite/assets/js/intro-scroll.js b/themes/ITStudioMainSite/assets/js/intro-scroll.js deleted file mode 100644 index 1f1fb8a..0000000 --- a/themes/ITStudioMainSite/assets/js/intro-scroll.js +++ /dev/null @@ -1,31 +0,0 @@ -(() => { - const steps = document.querySelectorAll('.intro-step'); - if (!steps.length) return; - - const markActive = () => { - const vh = window.innerHeight; - steps.forEach((step) => { - const rect = step.getBoundingClientRect(); - const isActive = rect.top < vh * 0.8 && rect.bottom > vh * 0.2; - step.classList.toggle('is-active', isActive); - }); - }; - - markActive(); - document.body.classList.add('has-intro-animations'); - - const observer = new IntersectionObserver( - (entries) => { - entries.forEach((entry) => { - entry.target.classList.toggle('is-active', entry.isIntersecting); - }); - }, - { - threshold: 0.35, - rootMargin: '0px 0px -15% 0px', - } - ); - - steps.forEach((step) => observer.observe(step)); - window.addEventListener('resize', markActive); -})(); diff --git a/themes/ITStudioMainSite/docs/plugin-split-plan.md b/themes/ITStudioMainSite/docs/plugin-split-plan.md index c93ff86..ee8aa24 100644 --- a/themes/ITStudioMainSite/docs/plugin-split-plan.md +++ b/themes/ITStudioMainSite/docs/plugin-split-plan.md @@ -57,7 +57,7 @@ CPT 注册从主题挪到插件后，重写规则改变，必须在插件激活 2. `itstudio_register_acf_fields()`(308-403)：`group_itstudio_content_priority` → 插件1；`group_itstudio_recruitment_article` → 插件3。 ## 四、留在主题的部分（纯展示） -`itstudio_theme_setup`、评论禁用(21-60)、favicon/bootstrap 脚本(76-101)、`enqueue_scripts`(103)、`register_sidebars`(192)、`intro_body_class`(215)、`archive_document_title`(1040)、各 `*_fallback` 渲染(1052-1204、3907)。 +`itstudio_theme_setup`、评论禁用(21-60)、favicon/bootstrap 脚本(76-101)、`enqueue_scripts`(103)、`register_sidebars`(192)、`archive_document_title`(1040)、各 `*_fallback` 渲染(1052-1204、3907)。 **建议删除**：`itstudio_apply_site_identity()`(62-74)——每次强制覆写站点标题/副标题，反模式。 diff --git a/themes/ITStudioMainSite/functions.php b/themes/ITStudioMainSite/functions.php index a44b270..6c11e0a 100644 --- a/themes/ITStudioMainSite/functions.php +++ b/themes/ITStudioMainSite/functions.php @@ -704,21 +704,6 @@ function itstudio_enqueue_scripts() { )); } - // 仅在工作室介绍页加载（包含 /about fallback） - $is_about = is_page('about') || is_page_template('page-about.php'); - if (!$is_about && is_404()) { - global $wp; - $request = isset($wp->request) ? trim($wp->request, '/') : ''; - $is_about = ($request === 'about'); - } - - if ($is_about) { - wp_enqueue_style('itstudio-about-hero', get_template_directory_uri() . '/assets/css/about-hero.css', array('itstudio-content'), '2.1.2'); - wp_enqueue_script('itstudio-animejs', get_template_directory_uri() . '/assets/js/vendor/anime.min.js', array(), '3.2.2', true); - wp_enqueue_script('itstudio-about-hero-waves', get_template_directory_uri() . '/assets/js/hero-waves.js', array('itstudio-animejs'), '1.0.0', true); - wp_enqueue_script('itstudio-about-hero', get_template_directory_uri() . '/assets/js/home-hero.js', array('itstudio-animejs'), '1.0.0', true); - } - // 仅在便民服务页加载（包含 /services fallback） $is_services = is_page('services') || is_page_template('page-services.php'); if (!$is_services && is_404()) { @@ -765,22 +750,6 @@ function itstudio_register_sidebars() { } add_action('widgets_init', 'itstudio_register_sidebars'); -function itstudio_intro_body_class($classes) { - $is_about = is_page('about') || is_page_template('page-about.php'); - if (!$is_about && is_404()) { - global $wp; - $request = isset($wp->request) ? trim($wp->request, '/') : ''; - $is_about = ($request === 'about'); - } - - if ($is_about) { - $classes[] = 'intro-about'; - } - - return $classes; -} -add_filter('body_class', 'itstudio_intro_body_class'); - function itstudio_archive_document_title($parts) { if (is_post_type_archive('announcement')) { $parts['title'] = '公告通知'; @@ -792,57 +761,6 @@ function itstudio_archive_document_title($parts) { } add_filter('document_title_parts', 'itstudio_archive_document_title', 20); -// Fallback: render /about even if the page isn't created in WP admin. -function itstudio_about_fallback() { - if (!is_404()) { - return; - } - - global $wp; - $request = isset($wp->request) ? trim($wp->request, '/') : ''; - if ($request !== 'about') { - return; - } - - $template = locate_template('page-about.php'); - if ($template) { - global $wp_query; - if ($wp_query) { - $wp_query->is_404 = false; - $wp_query->is_page = true; - $wp_query->is_singular = true; - $virtual_post = new WP_Post((object) array( - 'ID' => 0, - 'post_type' => 'page', - 'post_parent' => 0, - 'post_title' => __('工作室介绍', 'itstudio'), - 'post_status' => 'publish', - 'post_name' => 'about', - 'post_content' => '', - )); - $wp_query->post = $virtual_post; - $wp_query->posts = array($virtual_post); - $wp_query->queried_object = $virtual_post; - $wp_query->queried_object_id = 0; - $wp_query->post_count = 1; - $wp_query->found_posts = 1; - $wp_query->max_num_pages = 1; - global $post; - $post = $virtual_post; - setup_postdata($post); - } - add_filter('document_title_parts', function ($parts) { - $parts['title'] = __('工作室介绍', 'itstudio'); - return $parts; - }); - status_header(200); - nocache_headers(); - include $template; - exit; - } -} -add_action('template_redirect', 'itstudio_about_fallback'); - // Fallback: render /news via archive.php even if the page isn't created in WP admin. function itstudio_news_fallback() { if (!is_404()) { diff --git a/themes/ITStudioMainSite/index.php b/themes/ITStudioMainSite/index.php index dd56a18..6a6e391 100644 --- a/themes/ITStudioMainSite/index.php +++ b/themes/ITStudioMainSite/index.php @@ -19,7 +19,7 @@

- +
diff --git a/themes/ITStudioMainSite/page-about.php b/themes/ITStudioMainSite/page-about.php deleted file mode 100644 index ede0941..0000000 --- a/themes/ITStudioMainSite/page-about.php +++ /dev/null @@ -1,45 +0,0 @@ - - -
- -
- -
-
-

- - -

-
-
- -
-
- -