Skip to content

Q
qiyouxue
Commit b80c7dca authored by tao355667's avatar tao355667
Browse files
Options

feat: refine Qiyouxue visual design

parent ad00ed3a
Hide whitespace changes
Inline Side-by-side
Showing with 72 additions and 73 deletions
public/admin/style.css
View file @ b80c7dca
:root {
--primary: #0868AC;
--primary-dark: #164A72;
--primary: #1473E6;
--primary-dark: #073B83;
--deep: #103C5B;
--light: #EEF7FC;
--light: #F1F7FF;
--bg: #FCFDFC;
--surface: #fff;
--text: #142033;
--muted: #6b7280;
--border: #E2E8F0;
--danger: #c04444;
font-family: "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
font-family: "Microsoft YaHei", "PingFang SC", "Hiragino Sans GB", sans-serif;
}
* { box-sizing: border-box; }
body { margin: 0; color: var(--text); background: var(--bg); }
......@@ -33,13 +33,13 @@ button, .button { min-height: 40px; padding: 0 17px; display: inline-flex; align
#captcha-image { width: 132px; height: 46px; flex: 0 0 auto; cursor: pointer; background: var(--light); border: 1px solid var(--border); border-radius: 9px; }
input, textarea, select { width: 100%; padding: 11px 13px; color: var(--text); background: white; border: 1px solid var(--border); border-radius: 9px; }
input:focus, textarea:focus, select:focus { outline: 2px solid rgba(20,115,230,.14); border-color: var(--primary); }
.topbar { min-height: 68px; padding: 12px 28px; position: sticky; top: 0; z-index: 10; display: flex; align-items: center; justify-content: space-between; gap: 22px; color: white; background: #071D3B; }
.topbar { min-height: 68px; padding: 12px 28px; position: sticky; top: 0; z-index: 10; display: flex; align-items: center; justify-content: space-between; gap: 22px; color: white; background: #4F94D4; }
.topbar > div:first-child { display: flex; align-items: center; gap: 13px; }
.topbar strong { color: var(--primary); font-size: 19px; }
.topbar span { font-size: 13px; opacity: .76; }
.top-actions { display: flex; align-items: center; gap: 9px; }
.topbar .ghost { color: white; border-color: rgba(255,255,255,.24); }
.pending-badge { padding: 5px 10px; color: #ffe49b; background: rgba(255,206,94,.12); border: 1px solid rgba(255,206,94,.3); border-radius: 999px; }
.pending-badge { padding: 5px 10px; color: #9fd8ff; background: rgba(67,183,232,.12); border: 1px solid rgba(67,183,232,.3); border-radius: 999px; }
.view { width: min(1120px, calc(100% - 40px)); margin: 0 auto; padding: 44px 0 70px; }
.view-head { margin-bottom: 26px; display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.view-head p { margin: 0 0 5px; color: var(--primary-dark); font-size: 11px; font-weight: 700; letter-spacing: .16em; }
......@@ -54,8 +54,8 @@ input:focus, textarea:focus, select:focus { outline: 2px solid rgba(20,115,230,.
.article-row code { color: #9a8d7e; }
.status { padding: 2px 8px; border-radius: 999px; }
.status.live { color: #0D966A; background: #DFF8EE; }
.status.new-draft { color: #916300; background: #fff2c7; }
.status.edited-draft { color: #9c4c22; background: #ffeadc; }
.status.new-draft { color: #145da8; background: #eaf3ff; }
.status.edited-draft { color: #0d7794; background: #e8f9fc; }
.row-actions { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.row-actions button:disabled { cursor: default; opacity: .48; transform: none; }
.row-more-actions summary { min-height: 34px; padding-inline: 13px; font-size: 12px; }
......@@ -90,7 +90,7 @@ input:focus, textarea:focus, select:focus { outline: 2px solid rgba(20,115,230,.
.editor-titlebar > .status { margin-bottom: 4px; padding: 6px 12px; font-size: 13px; }
.back-button { min-height: auto; width: max-content; padding: 0; color: var(--muted); background: transparent; border-radius: 0; }
.back-button:hover { color: var(--primary-dark); }
.version-note { margin: -12px 0 18px; padding: 13px 16px; color: #6b5a4f; background: #F8EEE6; border: 1px solid var(--border); border-radius: 11px; font-size: 13px; }
.version-note { margin: -12px 0 18px; padding: 13px 16px; color: #365a78; background: #eef7ff; border: 1px solid var(--border); border-radius: 11px; font-size: 13px; }
.auto-meta { margin: 0; padding: 11px 13px; color: var(--muted); background: #F7F9FC; border-radius: 9px; font-size: 12px; }
.editor-head { margin-bottom: 13px; display: flex; align-items: center; justify-content: space-between; gap: 15px; }
.editor-head > div { display: flex; align-items: center; gap: 9px; }
......@@ -112,7 +112,7 @@ input:focus, textarea:focus, select:focus { outline: 2px solid rgba(20,115,230,.
.more-actions[open] summary { color: var(--primary-dark); border-color: var(--primary); }
.action-menu { min-width: 180px; padding: 7px; position: absolute; right: 0; bottom: calc(100% + 8px); display: grid; gap: 2px; background: white; border: 1px solid var(--border); border-radius: 11px; box-shadow: 0 14px 36px rgba(75,34,26,.16); }
.menu-action { width: 100%; min-height: 38px; padding: 0 11px; justify-content: flex-start; color: var(--text); background: transparent; border-radius: 7px; font-size: 13px; }
.menu-action:hover { background: #FAF1EA; }
.menu-action:hover { background: #f1f7ff; }
.menu-action.danger { color: var(--danger); }
.menu-action.danger:hover { background: #fff0f0; }
#message { margin-left: 8px; color: var(--muted); font-size: 13px; }
......@@ -134,7 +134,7 @@ input:focus, textarea:focus, select:focus { outline: 2px solid rgba(20,115,230,.
.manager-create input { min-width: 0; }
.manager-create button { flex: 0 0 auto; white-space: nowrap; }
.category-manager-list { margin-top: 8px; display: grid; gap: 8px; }
.category-manager-row { padding: 13px 14px; background: #FAF7F1; border: 1px solid var(--border); border-radius: 11px; }
.category-manager-row { padding: 13px 14px; background: #f5f9fd; border: 1px solid var(--border); border-radius: 11px; }
.category-row-main { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.category-row-name { min-width: 0; display: grid; gap: 3px; }
.category-row-name strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
......@@ -151,9 +151,9 @@ input:focus, textarea:focus, select:focus { outline: 2px solid rgba(20,115,230,.
.category-inline-actions button, .replacement-options button { min-height: 32px; padding-inline: 11px; font-size: 12px; }
.confirm-danger { color: white; background: var(--danger); }
.replacement-options button { color: var(--primary-dark); background: white; border: 1px solid var(--border); }
.replacement-options button:hover { border-color: var(--primary); background: #FBEAE6; }
.replacement-options button:hover { border-color: var(--primary); background: #eaf3ff; }
.build-card { width: min(780px, 100%); }
#build-log { max-height: 62vh; margin: 0; padding: 18px; overflow: auto; color: var(--muted); background: #faf7f1; white-space: pre-wrap; font-size: 12px; }
#build-log { max-height: 62vh; margin: 0; padding: 18px; overflow: auto; color: var(--muted); background: #f5f9fd; white-space: pre-wrap; font-size: 12px; }
@media (max-width: 760px) {
.topbar, .view-head, .article-row { align-items: flex-start; flex-direction: column; }
.top-actions { width: 100%; flex-wrap: wrap; }
......
public/favicon.png
View replaced file @ ad00ed3a View file @ b80c7dca
public/favicon.png

166 KB | W: | H:

public/favicon.png

117 KB | W: | H:

public/favicon.png
public/favicon.png
public/favicon.png
public/favicon.png
  • 2-up
  • Swipe
  • Onion skin
public/og-cover.svg
View file @ b80c7dca
<svg xmlns="http://www.w3.org/2000/svg" width="1200" height="630" viewBox="0 0 1200 630">
<rect width="1200" height="630" fill="#FCFDFC"/>
<rect x="0" y="0" width="18" height="630" fill="#F6B900"/>
<rect x="740" y="70" width="360" height="490" rx="32" fill="#EEF7FC" stroke="#DCE8EF" stroke-width="2"/>
<circle cx="920" cy="245" r="96" fill="#0868AC"/>
<rect x="0" y="0" width="18" height="630" fill="#43D4E8"/>
<rect x="740" y="70" width="360" height="490" rx="32" fill="#F1F7FF" stroke="#DCE8EF" stroke-width="2"/>
<circle cx="920" cy="245" r="96" fill="#1473E6"/>
<path d="M854 230h132M854 258h132M880 200l40-32 40 32" fill="none" stroke="#fff" stroke-width="15" stroke-linecap="round"/>
<circle cx="1010" cy="145" r="25" fill="#F6B900"/>
<text x="82" y="118" fill="#0868AC" font-family="sans-serif" font-size="20" font-weight="700" letter-spacing="4">QIYOUXUE · 1 ON 1</text>
<text x="82" y="255" fill="#172B3A" font-family="sans-serif" font-size="76" font-weight="800">先看清问题</text>
<text x="82" y="355" fill="#0868AC" font-family="sans-serif" font-size="76" font-weight="800">再规划每一步</text>
<text x="82" y="442" fill="#4B5E6B" font-family="sans-serif" font-size="28">小学 · 初中 · 高中在线一对一个性化辅导</text>
<rect x="82" y="508" width="210" height="54" rx="9" fill="#F6B900"/>
<text x="187" y="543" text-anchor="middle" fill="#172B3A" font-family="sans-serif" font-size="20" font-weight="700">启优学一对一</text>
<circle cx="1010" cy="145" r="25" fill="#43D4E8"/>
<text x="82" y="118" fill="#1473E6" font-family="sans-serif" font-size="20" font-weight="700" letter-spacing="4">QIYOUXUE · 1 ON 1</text>
<text x="82" y="255" fill="#142033" font-family="sans-serif" font-size="76" font-weight="800">先看清问题</text>
<text x="82" y="355" fill="#1473E6" font-family="sans-serif" font-size="76" font-weight="800">再规划每一步</text>
<text x="82" y="442" fill="#526070" font-family="sans-serif" font-size="28">小学 · 初中 · 高中在线一对一个性化辅导</text>
<rect x="82" y="508" width="210" height="54" rx="9" fill="#43D4E8"/>
<text x="187" y="543" text-anchor="middle" fill="#142033" font-family="sans-serif" font-size="20" font-weight="700">启优学一对一</text>
</svg>
public/site.webmanifest
View file @ b80c7dca
......@@ -5,6 +5,6 @@
"start_url": "/",
"display": "standalone",
"background_color": "#FCFDFC",
"theme_color": "#0868AC",
"theme_color": "#1473E6",
"lang": "zh-CN"
}
src/components/ArticleListing.astro
View file @ b80c7dca
......@@ -26,16 +26,15 @@ const pages = paginationWindow(currentPage, lastPage);
{items.length ? (
<div class="article-grid">
{items.map((item, index) => (
{items.map((item) => (
<article class="article-card" data-reveal>
<a href={`/articles/${item.id}/`} aria-label={`阅读：${item.data.title}`}>
<div class="article-card__meta">
<span>{item.data.category}</span><time datetime={fmtDate(item.data.date)}>{fmtDate(item.data.date)}</time>
</div>
<div class="article-card__index">{String((currentPage - 1) * 9 + index + 1).padStart(2, "0")}</div>
<h2>{item.data.title}</h2>
<p>{item.data.excerpt}</p>
<strong>阅读全文 <span>↗</span></strong>
<strong>阅读全文</strong>
</a>
</article>
))}
......
src/components/ArticlesView.astro
View file @ b80c7dca
......@@ -3,4 +3,4 @@ import Base from "../layouts/Base.astro"; import Header from "./Header.astro"; i
interface Props { items: Article[]; categories: CategoryInfo[]; totalCount: number; activeSlug: string | null; activeName: string | null; currentPage: number; lastPage: number; basePath: string; }
const {items,categories,totalCount,activeSlug,activeName,currentPage,lastPage,basePath}=Astro.props as Props; const heading=activeName??"学习资讯"; const pageSuffix=currentPage>1?`｜第${currentPage}页`:""; const title=`${heading}${pageSuffix}｜${site.brand.name}`; const description=activeName?`启优学${activeName}分类文章，分享学情判断、学科方法与家庭学习规划。`:"启优学学习资讯：关于小初高学情判断、学习方法、阶段复习和在线一对一服务的公开说明。"; const keywords=[heading,"学习方法","学情诊断","在线一对一",site.brand.name]; const pageUrl=new URL(`${basePath}${currentPage>1?`/page/${currentPage}`:""}/`,Astro.site).href; const jsonLd={"@context":"https://schema.org","@type":"CollectionPage",name:heading,description,url:pageUrl,inLanguage:"zh-CN",mainEntity:{"@type":"ItemList",itemListElement:items.map((item,index)=>({"@type":"ListItem",position:(currentPage-1)*PAGE_SIZE+index+1,name:item.data.title,url:new URL(`/articles/${item.id}/`,Astro.site).href}))}};
---
<Base {title} {description} {keywords} {jsonLd}><Header /><main id="main-content"><section class="page-hero"><div class="container page-hero__inner" data-reveal><div class="breadcrumb"><a href="/">首页</a> / <a href="/articles/">学习资讯</a>{activeName&&` / ${activeName}`}</div><div class="eyebrow"><span></span>LEARNING NOTES</div><h1>{heading}</h1><p>{description}</p></div></section><section class="section-pad section-blue"><div class="container"><ArticleListing {items} {categories} {totalCount} {activeSlug} {currentPage} {lastPage} {basePath} /></div></section></main><Footer /></Base>
<Base {title} {description} {keywords} {jsonLd}><Header /><main id="main-content"><section class="page-hero"><div class="container page-hero__inner" data-reveal><div class="breadcrumb"><a href="/">首页</a> / <a href="/articles/">学习资讯</a>{activeName&&` / ${activeName}`}</div><h1>{heading}</h1><p>{description}</p></div></section><section class="section-pad section-blue"><div class="container"><ArticleListing {items} {categories} {totalCount} {activeSlug} {currentPage} {lastPage} {basePath} /></div></section></main><Footer /></Base>
src/components/CTA.astro
View file @ b80c7dca
......@@ -3,4 +3,4 @@ import { site } from "../data/site";
interface Props { title?: string; text?: string; }
const { title = "先了解学情，再决定怎么学", text = "准备学生年级、意向学科、近期试卷或错题与阶段目标，领取一对一专属学情分析。" } = Astro.props;
---
<section class="cta-band"><div class="container cta-band__inner" data-reveal><div><div class="eyebrow eyebrow--light"><span></span>START WITH LEARNING PROFILE</div><h2>{title}</h2><p>{text}</p></div><div class="cta-band__actions"><a class="button button--yellow" href="/contact/">预约学情分析 <span>↗</span></a><a class="text-link text-link--light" href={`tel:${site.contact.phone}`}>电话 {site.contact.phoneDisplay}</a></div></div></section>
<section class="cta-band"><div class="container cta-band__inner" data-reveal><div><h2>{title}</h2><p>{text}</p></div><div class="cta-band__actions"><a class="button button--white" href="/contact/">预约学情分析</a><a class="text-link text-link--light" href={`tel:${site.contact.phone}`}>电话 {site.contact.phoneDisplay}</a></div></div></section>
src/components/ContactDialog.astro
View file @ b80c7dca
---
import { site } from "../data/site";
---
<dialog class="contact-dialog" data-contact-dialog aria-labelledby="contact-dialog-title"><div class="contact-dialog__panel"><button class="contact-dialog__close" type="button" data-contact-dialog-close aria-label="关闭联系方式弹窗">×</button><div class="contact-dialog__heading"><div class="eyebrow"><span></span>COURSE CONSULTATION</div><h2 id="contact-dialog-title">从一次学情沟通开始</h2><p>准备学生年级、地区、意向学科、当前情况与阶段目标，我们会协助梳理下一步。</p></div><div class="contact-dialog__grid"><article><span>01</span><h3>官方电话</h3><a class="contact-dialog__primary" href={`tel:${site.contact.phone}`}>{site.contact.phoneDisplay}</a><p>周一至周日 · 7×24 小时</p></article><article><span>02</span><h3>微信小程序</h3><strong>启优学一对一</strong><p>搜索小程序名称提交咨询</p></article><article><span>03</span><h3>联系邮箱</h3><a class="contact-dialog__primary contact-dialog__email" href={`mailto:${site.contact.email}`}>{site.contact.email}</a><p>服务反馈与商务合作</p></article><article><span>04</span><h3>官方网站</h3><a class="contact-dialog__primary contact-dialog__website" href={`https://${site.contact.website}/`}>{site.contact.website}</a><p>启优学官方信息窗口</p></article></div></div></dialog>
<dialog class="contact-dialog" data-contact-dialog aria-labelledby="contact-dialog-title"><div class="contact-dialog__panel"><button class="contact-dialog__close" type="button" data-contact-dialog-close aria-label="关闭联系方式弹窗">×</button><div class="contact-dialog__heading"><h2 id="contact-dialog-title">从一次学情沟通开始</h2><p>准备学生年级、地区、意向学科、当前情况与阶段目标，我们会协助梳理下一步。</p></div><div class="contact-dialog__grid"><article><h3>官方电话</h3><a class="contact-dialog__primary" href={`tel:${site.contact.phone}`}>{site.contact.phoneDisplay}</a><p>周一至周日 · 7×24 小时</p></article><article><h3>微信小程序</h3><strong>启优学一对一</strong><p>搜索小程序名称提交咨询</p></article><article><h3>联系邮箱</h3><a class="contact-dialog__primary contact-dialog__email" href={`mailto:${site.contact.email}`}>{site.contact.email}</a><p>服务反馈与商务合作</p></article><article><h3>官方网站</h3><a class="contact-dialog__primary contact-dialog__website" href={`https://${site.contact.website}/`}>{site.contact.website}</a><p>启优学官方信息窗口</p></article></div></div></dialog>
src/components/Footer.astro
View file @ b80c7dca
---
import logo from "../../pic/启优学LOGO-白底.jpg";
import logo from "../../pic/启优学LOGO-白色透明.png";
import { site } from "../data/site";
---
<footer class="site-footer"><div class="container footer-grid">
<div class="footer-brand"><a href="/" class="footer-logo" aria-label="启优学首页"><img src={logo.src} width="1725" height="970" loading="lazy" alt="启优学一对一" /></a><p>优质师资直达，个性化辅导看得见。</p><div class="footer-tags"><span>小学</span><span>初中</span><span>高中</span></div></div>
<div class="footer-brand"><a href="/" class="footer-logo" aria-label="启优学首页"><img src={logo.src} width="1214" height="910" loading="lazy" alt="启优学一对一" /></a><p>优质师资直达，个性化辅导看得见。</p><div class="footer-tags"><span>小学</span><span>初中</span><span>高中</span></div></div>
<div><h2>了解启优学</h2><a href="/about/">关于我们</a><a href="/methodology/">教学服务</a><a href="/articles/">学习资讯</a><a href="/faq/">常见问题</a></div>
<div><h2>学习需求</h2>{site.services.map((item) => <a href={`/services/${item.slug}/`}>{item.name}</a>)}</div>
<div class="footer-contact"><h2>课程咨询</h2><a class="footer-phone" href={`tel:${site.contact.phone}`}>{site.contact.phoneDisplay}</a><p>周一至周日 · 7×24 小时</p><a href={`mailto:${site.contact.email}`}>{site.contact.email}</a><a class="footer-arrow" href="/contact/">预约学情分析 <span>↗</span></a></div>
<div class="footer-contact"><h2>课程咨询</h2><a class="footer-phone" href={`tel:${site.contact.phone}`}>{site.contact.phoneDisplay}</a><p>周一至周日 · 7×24 小时</p><a href={`mailto:${site.contact.email}`}>{site.contact.email}</a><a class="footer-arrow" href="/contact/">预约学情分析</a></div>
</div><div class="container footer-bottom"><p>© {new Date().getFullYear()} 启优学一对一</p><p><a href="https://beian.miit.gov.cn/" rel="nofollow">冀ICP备2025133748号-7</a> · 具体课程、教师、时间与费用以咨询确认方案为准</p></div></footer>
src/components/Header.astro
View file @ b80c7dca
---
import logo from "../../pic/启优学LOGO-白底.jpg";
import logo from "../../pic/启优学LOGO-透明.png";
import { site } from "../data/site";
import { categoryToSlug, getCategoryNames } from "../lib/articles";
const path = Astro.url.pathname;
......@@ -9,9 +9,9 @@ const nav = site.nav.map((item) => item.href === "/articles/" ? { ...item, child
---
<header class="site-header" data-header>
<div class="container site-header__inner">
<a class="brand" href="/" aria-label="启优学首页"><img src={logo.src} width="1725" height="970" alt="启优学一对一" /></a>
<nav class="desktop-nav" aria-label="主导航"><ul>{nav.map((item) => <li class="nav-item"><a class="nav-link" href={item.href} aria-current={isActive(item.href) ? "page" : undefined}>{item.label}</a><div class="nav-dropdown"><ul>{item.children.map((child) => <li><a href={child.href}>{child.label}<span aria-hidden="true">↗</span></a></li>)}</ul></div></li>)}</ul></nav>
<a class="button button--small header-cta" href="/contact/">预约学情分析 <span>↗</span></a>
<a class="brand" href="/" aria-label="启优学首页"><img src={logo.src} width="1214" height="910" alt="启优学一对一" /></a>
<nav class="desktop-nav" aria-label="主导航"><ul>{nav.map((item) => <li class="nav-item"><a class="nav-link" href={item.href} aria-current={isActive(item.href) ? "page" : undefined}>{item.label}</a><div class="nav-dropdown"><ul>{item.children.map((child) => <li><a href={child.href}>{child.label}</a></li>)}</ul></div></li>)}</ul></nav>
<a class="button button--small header-cta" href="/contact/">预约学情分析</a>
<details class="mobile-nav"><summary aria-label="打开导航菜单"><span></span><span></span><span></span></summary><nav data-mobile-nav aria-label="移动端导航">{nav.map((item) => <div class="mobile-nav__group"><a class="mobile-nav__primary" href={item.href} aria-current={isActive(item.href) ? "page" : undefined}>{item.label}</a><div class="mobile-subnav">{item.children.map((child) => <a href={child.href}>{child.label}</a>)}</div></div>)}<a class="button" href="/contact/">预约学情分析</a></nav></details>
</div>
</header>
src/components/SectionHeading.astro
View file @ b80c7dca
---
interface Props { eyebrow: string; title: string; description?: string; align?: "left" | "center"; light?: boolean; }
const { eyebrow, title, description, align = "left", light = false } = Astro.props;
interface Props { title: string; description?: string; align?: "left" | "center"; light?: boolean; }
const { title, description, align = "left", light = false } = Astro.props;
---
<div class:list={["section-heading", `section-heading--${align}`, { "section-heading--light": light }]} data-reveal>
<div class="eyebrow"><span></span>{eyebrow}</div><h2>{title}</h2>{description && <p>{description}</p>}
<h2>{title}</h2>{description && <p>{description}</p>}
</div>
src/layouts/Base.astro
View file @ b80c7dca
---
import "../styles/global.css";
import logo from "../../pic/启优学LOGO-白底.jpg";
import logo from "../../pic/启优学LOGO-透明.png";
import { getImage } from "astro:assets";
import { site } from "../data/site";
import ContactDialog from "../components/ContactDialog.astro";
......@@ -10,13 +10,12 @@ const cleanMeta = (value: string) => value.replace(/<[^>]*>/g, " ").replace(/\s+
const metaTitle = cleanMeta(title); const metaDescription = cleanMeta(description);
const metaKeywords = (typeof keywords === "string" ? keywords.split(",") : keywords).map((keyword) => cleanMeta(keyword)).filter(Boolean).join(",");
const optimizedLogo = await getImage({ src: logo, width: 480, format: "webp" });
const optimizedFavicon = await getImage({ src: logo, width: 128, height: 128, fit: "cover", format: "png" });
const canonical = new URL(Astro.url.pathname, Astro.site).href; const ogImage = new URL(image, Astro.site).href;
const organizationLd = { "@context": "https://schema.org", "@type": ["EducationalOrganization", "Organization"], "@id": new URL("/#organization", Astro.site).href, name: site.brand.name, alternateName: [site.brand.shortName, site.brand.englishName], legalName: site.brand.legalName, url: new URL("/", Astro.site).href, logo: new URL(optimizedLogo.src, Astro.site).href, slogan: site.brand.tagline, description: site.home.subhead, telephone: site.contact.phone, email: site.contact.email, areaServed: { "@type": "Country", name: "中国" } };
const websiteLd = { "@context": "https://schema.org", "@type": "WebSite", "@id": new URL("/#website", Astro.site).href, url: new URL("/", Astro.site).href, name: site.brand.name, inLanguage: "zh-CN", publisher: { "@id": new URL("/#organization", Astro.site).href } };
const webPageLd = { "@context": "https://schema.org", "@type": "WebPage", "@id": `${canonical}#webpage`, url: canonical, name: metaTitle, description: metaDescription, inLanguage: "zh-CN", isPartOf: { "@id": new URL("/#website", Astro.site).href }, about: { "@id": new URL("/#organization", Astro.site).href }, primaryImageOfPage: { "@type": "ImageObject", url: ogImage, caption: imageAlt } };
const pageLd = Array.isArray(jsonLd) ? jsonLd : [jsonLd]; const serializedLd = JSON.stringify([organizationLd, websiteLd, webPageLd, ...pageLd.filter((item) => Object.keys(item).length > 0)]).replace(/</g, "\\u003c");
---
<!doctype html><html lang="zh-CN"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1" /><meta name="theme-color" content="#FCFDFC" /><meta name="color-scheme" content="light" /><title>{metaTitle}</title><meta name="description" content={metaDescription} /><meta name="keywords" content={metaKeywords} /><meta name="robots" content={noindex ? "noindex,nofollow" : "index,follow,max-image-preview:large,max-snippet:-1,max-video-preview:-1"} /><link rel="canonical" href={canonical} /><link rel="icon" href={optimizedFavicon.src} type="image/png" sizes="128x128" /><link rel="apple-touch-icon" href={optimizedFavicon.src} /><link rel="manifest" href="/site.webmanifest" /><link rel="alternate" hreflang="zh-CN" href={canonical} /><link rel="alternate" hreflang="x-default" href={canonical} /><meta property="og:type" content={ogType} /><meta property="og:title" content={metaTitle} /><meta property="og:description" content={metaDescription} /><meta property="og:url" content={canonical} /><meta property="og:image" content={ogImage} /><meta property="og:image:alt" content={imageAlt} /><meta property="og:site_name" content={site.brand.name} /><meta property="og:locale" content="zh_CN" />{publishedTime && <meta property="article:published_time" content={publishedTime} />}{modifiedTime && <meta property="article:modified_time" content={modifiedTime} />}{articleSection && <meta property="article:section" content={articleSection} />}{articleAuthor && <meta property="article:author" content={articleAuthor} />}<meta name="twitter:card" content="summary_large_image" /><meta name="twitter:title" content={metaTitle} /><meta name="twitter:description" content={metaDescription} /><meta name="twitter:image" content={ogImage} /><script type="application/ld+json" set:html={serializedLd} is:inline></script></head><body><a class="skip-link" href="#main-content">跳到主要内容</a><slot /><ContactDialog /><script is:inline>
<!doctype html><html lang="zh-CN"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1" /><meta name="theme-color" content="#1473E6" /><meta name="color-scheme" content="light" /><title>{metaTitle}</title><meta name="description" content={metaDescription} /><meta name="keywords" content={metaKeywords} /><meta name="robots" content={noindex ? "noindex,nofollow" : "index,follow,max-image-preview:large,max-snippet:-1,max-video-preview:-1"} /><link rel="canonical" href={canonical} /><link rel="icon" href="/favicon.png" type="image/png" sizes="512x512" /><link rel="apple-touch-icon" href="/favicon.png" /><link rel="manifest" href="/site.webmanifest" /><link rel="alternate" hreflang="zh-CN" href={canonical} /><link rel="alternate" hreflang="x-default" href={canonical} /><meta property="og:type" content={ogType} /><meta property="og:title" content={metaTitle} /><meta property="og:description" content={metaDescription} /><meta property="og:url" content={canonical} /><meta property="og:image" content={ogImage} /><meta property="og:image:alt" content={imageAlt} /><meta property="og:site_name" content={site.brand.name} /><meta property="og:locale" content="zh_CN" />{publishedTime && <meta property="article:published_time" content={publishedTime} />}{modifiedTime && <meta property="article:modified_time" content={modifiedTime} />}{articleSection && <meta property="article:section" content={articleSection} />}{articleAuthor && <meta property="article:author" content={articleAuthor} />}<meta name="twitter:card" content="summary_large_image" /><meta name="twitter:title" content={metaTitle} /><meta name="twitter:description" content={metaDescription} /><meta name="twitter:image" content={ogImage} /><script type="application/ld+json" set:html={serializedLd} is:inline></script></head><body><a class="skip-link" href="#main-content">跳到主要内容</a><slot /><ContactDialog /><script is:inline>
const header=document.querySelector('[data-header]');const syncHeader=()=>header?.classList.toggle('is-scrolled',scrollY>12);addEventListener('scroll',syncHeader,{passive:true});syncHeader();const observer='IntersectionObserver'in window?new IntersectionObserver(entries=>entries.forEach(entry=>{if(entry.isIntersecting){entry.target.classList.add('is-visible');observer.unobserve(entry.target)}}),{threshold:.08}):null;document.querySelectorAll('[data-reveal]').forEach(el=>observer?observer.observe(el):el.classList.add('is-visible'));document.querySelectorAll('[data-mobile-nav] a').forEach(link=>link.addEventListener('click',()=>link.closest('details')?.removeAttribute('open')));const dialog=document.querySelector('[data-contact-dialog]');const mobile=()=>matchMedia('(max-width:760px),(hover:none) and (pointer:coarse)').matches;document.addEventListener('click',event=>{const trigger=event.target.closest('[data-open-contact]');const phone=event.target.closest('a[href^="tel:"]');if(!dialog||(!trigger&&(!phone||mobile())))return;event.preventDefault();dialog.showModal()});dialog?.querySelector('[data-contact-dialog-close]')?.addEventListener('click',()=>dialog.close());dialog?.addEventListener('click',event=>{if(event.target===dialog)dialog.close()});
</script></body></html>
src/lib/cms-api.ts
View file @ b80c7dca
......@@ -132,7 +132,7 @@ function captchaSvg(code: string): string {
const colors = ["#8E1C17", "#6F1511", "#D1251A", "#5c3a2e"];
const randomBetween = (min: number, max: number) => crypto.randomInt(min, max + 1);
const pick = <T>(items: T[]): T => items[crypto.randomInt(items.length)];
let content = `<rect width="${width}" height="${height}" fill="#F4E6D6"/>`;
let content = `<rect width="${width}" height="${height}" fill="#EAF3FF"/>`;
for (let index = 0; index < 4; index += 1) {
content += `<line x1="${randomBetween(0, width)}" y1="${randomBetween(0, height)}" x2="${randomBetween(0, width)}" y2="${randomBetween(0, height)}" stroke="${pick(colors)}" stroke-width="1" opacity="0.45"/>`;
}
......
src/pages/404.astro
View file @ b80c7dca
---
import Base from "../layouts/Base.astro"; import Header from "../components/Header.astro"; import Footer from "../components/Footer.astro";
---
<Base title="页面未找到｜启优学" description="你访问的页面不存在。" noindex><Header /><main id="main-content"><section class="not-found"><div class="container" data-reveal><span>404</span><div class="eyebrow"><span></span>PAGE NOT FOUND</div><h1>这一页暂时找不到了</h1><p>可以返回首页，继续了解启优学在线一对一课程与教学服务。</p><a class="button button--yellow" href="/">返回首页</a></div></section></main><Footer /></Base>
<Base title="页面未找到｜启优学" description="你访问的页面不存在。" noindex><Header /><main id="main-content"><section class="not-found"><div class="container" data-reveal><span>404</span><h1>这一页暂时找不到了</h1><p>可以返回首页，继续了解启优学在线一对一课程与教学服务。</p><a class="button" href="/">返回首页</a></div></section></main><Footer /></Base>
src/pages/about/index.astro
View file @ b80c7dca
......@@ -2,4 +2,4 @@
import Base from "../../layouts/Base.astro"; import Header from "../../components/Header.astro"; import Footer from "../../components/Footer.astro"; import CTA from "../../components/CTA.astro"; import SectionHeading from "../../components/SectionHeading.astro"; import { site } from "../../data/site";
const title=`关于启优学｜${site.brand.name}`; const description="了解启优学一对一的品牌定位、教育理念、师资匹配方式与在线个性化教学服务。";
---
<Base {title} {description}><Header /><main id="main-content"><section class="page-hero"><div class="container page-hero__inner" data-reveal><div class="breadcrumb"><a href="/">首页</a> / 关于我们</div><div class="eyebrow"><span></span>ABOUT QIYOUXUE</div><h1>打破地域壁垒<br /><em>让优质教育触手可及</em></h1><p>{site.about.position}</p></div></section><section id="position" class="section-pad section-white"><div class="container about-intro-layout"><div><SectionHeading eyebrow="OUR POSITION" title={site.about.heading} /></div><div class="story-column">{site.about.story.map((paragraph,index)=><p data-reveal><span>0{index+1}</span>{paragraph}</p>)}</div></div></section><section class="stat-band"><div class="container stat-grid">{site.home.stats.map(stat=><div data-reveal><strong>{stat.value}</strong><p>{stat.label}</p></div>)}</div></section><section id="advantages" class="section-pad section-blue"><div class="container"><SectionHeading eyebrow="TEACHING ADVANTAGES" title="从看见问题，到看见每一步进展" description="诊断、匹配、互动、回放、反馈与复盘，共同组成可以持续调整的学习服务。" /><div class="advantage-grid">{site.about.advantages.map((item,index)=><article data-reveal><span>0{index+1}</span><h3>{item.title}</h3><p>{item.desc}</p></article>)}</div></div></section><section class="section-pad principle-section"><div class="container principle-layout"><div><div class="eyebrow eyebrow--light"><span></span>EDUCATION PRINCIPLES</div><h2>我们的教育理念</h2><p>成绩是阶段结果，理解力、方法和主动思考能力则陪伴更久。</p></div><div>{[["启发引导","拒绝单向灌输，通过提问与反馈培养主动思考。"],["因材施教","从真实学情出发，为不同学生确定不同任务。"],["能力优先","关注知识掌握，也重视方法、表达与学习习惯。"],["长期陪伴","固定教师持续跟踪，在阶段复盘中稳步调整。"]].map(([name,text],index)=><article data-reveal><span>0{index+1}</span><div><h3>{name}</h3><p>{text}</p></div></article>)}</div></div></section><section class="section-pad vision-section"><div class="container vision-card" data-reveal><span>QIYOUXUE · OUR VISION</span><blockquote>“{site.about.vision}”</blockquote><div><i></i><p>因材施教不是一句口号，而是每一次诊断、匹配与调整。</p></div></div></section><CTA /></main><Footer /></Base>
<Base {title} {description}><Header /><main id="main-content"><section class="page-hero"><div class="container page-hero__inner" data-reveal><div class="breadcrumb"><a href="/">首页</a> / 关于我们</div><h1>打破地域壁垒<br /><em>让优质教育触手可及</em></h1><p>{site.about.position}</p></div></section><section id="position" class="section-pad section-white"><div class="container about-intro-layout"><div><SectionHeading title={site.about.heading} /></div><div class="story-column">{site.about.story.map((paragraph)=><p data-reveal>{paragraph}</p>)}</div></div></section><section class="stat-band"><div class="container stat-grid">{site.home.stats.map(stat=><div data-reveal><strong>{stat.value}</strong><p>{stat.label}</p></div>)}</div></section><section id="advantages" class="section-pad section-blue"><div class="container"><SectionHeading title="从看见问题，到看见每一步进展" description="诊断、匹配、互动、回放、反馈与复盘，共同组成可以持续调整的学习服务。" /><div class="advantage-grid">{site.about.advantages.map((item)=><article data-reveal><h3>{item.title}</h3><p>{item.desc}</p></article>)}</div></div></section><section class="section-pad principle-section"><div class="container principle-layout"><div><h2>我们的教育理念</h2><p>成绩是阶段结果，理解力、方法和主动思考能力则陪伴更久。</p></div><div>{[["启发引导","拒绝单向灌输，通过提问与反馈培养主动思考。"],["因材施教","从真实学情出发，为不同学生确定不同任务。"],["能力优先","关注知识掌握，也重视方法、表达与学习习惯。"],["长期陪伴","固定教师持续跟踪，在阶段复盘中稳步调整。"]].map(([name,text])=><article data-reveal><div><h3>{name}</h3><p>{text}</p></div></article>)}</div></div></section><section class="section-pad vision-section"><div class="container vision-card" data-reveal><blockquote>“{site.about.vision}”</blockquote><p>因材施教不是一句口号，而是每一次诊断、匹配与调整。</p></div></section><CTA /></main><Footer /></Base>
src/pages/contact/index.astro
View file @ b80c7dca
---
import Base from "../../layouts/Base.astro"; import Header from "../../components/Header.astro"; import Footer from "../../components/Footer.astro"; import { site } from "../../data/site"; const title=`联系我们｜${site.brand.name}`; const description=`联系启优学一对一，咨询课程安排、教师匹配和学习方案。客服电话 ${site.contact.phoneDisplay}。`;
---
<Base {title} {description}><Header /><main id="main-content"><section class="contact-hero"><div class="container contact-hero__grid"><div data-reveal><div class="breadcrumb"><a href="/">首页</a> / 联系我们</div><div class="eyebrow eyebrow--light"><span></span>CONTACT QIYOUXUE</div><h1>{site.contact.heading}</h1><p>{site.contact.intro}</p><div class="hero__actions"><a class="button button--yellow" href={`tel:${site.contact.phone}`}>电话咨询 <span>↗</span></a><a class="button button--ghost" href={`mailto:${site.contact.email}`}>发送邮件</a></div></div><div class="contact-hours" data-reveal><span>7×24</span><strong>服务时间</strong><p>周一至周日</p></div></div></section><section class="section-pad section-blue"><div class="container contact-grid"><article data-reveal><span>01</span><h2>客服电话</h2><a class="contact-big-link" href={`tel:${site.contact.phone}`}>{site.contact.phoneDisplay}</a><p>课程咨询与服务反馈</p></article><article data-reveal><span>02</span><h2>微信小程序</h2><strong class="contact-big-link">启优学一对一</strong><p>搜索小程序名称提交预约</p></article><article data-reveal><span>03</span><h2>联系邮箱</h2><a class="contact-big-link contact-big-link--small" href={`mailto:${site.contact.email}`}>{site.contact.email}</a><p>商务合作与服务反馈</p></article><article data-reveal><span>04</span><h2>官方网站</h2><a class="contact-big-link contact-big-link--small" href={`https://${site.contact.website}`}>{site.contact.website}</a><p>官方课程与服务信息</p></article></div></section><section class="section-pad section-white"><div class="container visit-grid"><div><div class="eyebrow"><span></span>BEFORE WE TALK</div><h2>准备这些信息<br />让沟通更聚焦</h2><p>无需制作复杂材料，近期试卷或错题和最关心的问题就足够开始。</p></div><ol>{[["学生年级与地区","帮助确认学段、教材与当前可匹配资源"],["意向学科与教材进度","了解目前正在学习的内容与具体章节"],["近期试卷或错题","定位知识缺口、方法与学习习惯问题"],["当前情况与阶段目标","确定近期任务与适合的检查方式"]].map(([name,text],index)=><li><span>0{index+1}</span><div><strong>{name}</strong><p>{text}</p></div></li>)}</ol></div></section><section class="contact-bottom"><div class="container"><p>QIYOUXUE · PERSONAL LEARNING</p><h2>先看清问题<br />再规划每一步</h2><a class="button button--yellow" href={`tel:${site.contact.phone}`}>立即联系 {site.contact.phoneDisplay}</a></div></section></main><Footer /></Base>
<Base {title} {description}><Header /><main id="main-content"><section class="contact-hero"><div class="container contact-hero__grid"><div data-reveal><div class="breadcrumb"><a href="/">首页</a> / 联系我们</div><h1>{site.contact.heading}</h1><p>{site.contact.intro}</p><div class="hero__actions"><a class="button" href={`tel:${site.contact.phone}`}>电话咨询</a><a class="button button--ghost" href={`mailto:${site.contact.email}`}>发送邮件</a></div></div><div class="contact-hours" data-reveal><span>7×24</span><strong>服务时间</strong><p>周一至周日</p></div></div></section><section class="section-pad section-blue"><div class="container contact-grid"><article data-reveal><h2>客服电话</h2><a class="contact-big-link" href={`tel:${site.contact.phone}`}>{site.contact.phoneDisplay}</a><p>课程咨询与服务反馈</p></article><article data-reveal><h2>微信小程序</h2><strong class="contact-big-link">启优学一对一</strong><p>搜索小程序名称提交预约</p></article><article data-reveal><h2>联系邮箱</h2><a class="contact-big-link contact-big-link--small" href={`mailto:${site.contact.email}`}>{site.contact.email}</a><p>商务合作与服务反馈</p></article><article data-reveal><h2>官方网站</h2><a class="contact-big-link contact-big-link--small" href={`https://${site.contact.website}`}>{site.contact.website}</a><p>官方课程与服务信息</p></article></div></section><section class="section-pad section-white"><div class="container visit-grid"><div><h2>准备这些信息<br />让沟通更聚焦</h2><p>无需制作复杂材料，近期试卷或错题和最关心的问题就足够开始。</p></div><ol>{[["学生年级与地区","帮助确认学段、教材与当前可匹配资源"],["意向学科与教材进度","了解目前正在学习的内容与具体章节"],["近期试卷或错题","定位知识缺口、方法与学习习惯问题"],["当前情况与阶段目标","确定近期任务与适合的检查方式"]].map(([name,text])=><li><div><strong>{name}</strong><p>{text}</p></div></li>)}</ol></div></section><section class="contact-bottom"><div class="container"><h2>先看清问题<br />再规划每一步</h2><a class="button button--white" href={`tel:${site.contact.phone}`}>立即联系 {site.contact.phoneDisplay}</a></div></section></main><Footer /></Base>
src/pages/faq/index.astro
View file @ b80c7dca
......@@ -2,4 +2,4 @@
import Base from "../../layouts/Base.astro"; import Header from "../../components/Header.astro"; import Footer from "../../components/Footer.astro"; import CTA from "../../components/CTA.astro"; import { site } from "../../data/site";
const title=`常见问题｜${site.brand.name}`; const description="启优学一对一关于课程适配、覆盖学段与科目、教师匹配、课堂回放、课后反馈和咨询预约的常见问题。"; const jsonLd={"@context":"https://schema.org","@type":"FAQPage",mainEntity:site.faq.map(item=>({"@type":"Question",name:item.q,acceptedAnswer:{"@type":"Answer",text:item.a}}))};
---
<Base {title} {description} {jsonLd}><Header /><main id="main-content"><section class="page-hero"><div class="container page-hero__inner" data-reveal><div class="breadcrumb"><a href="/">首页</a> / 常见问题</div><div class="eyebrow"><span></span>PARENTS OFTEN ASK</div><h1>关于在线一对一<br /><em>家长关心的问题</em></h1><p>从课程适配、教师匹配到课堂反馈，把重要信息公开说明。</p></div></section><section class="section-pad section-blue"><div class="container faq-layout"><aside data-reveal><span>01 — {String(site.faq.length).padStart(2,"0")}</span><h2>启优学一对一 FAQ</h2><p>具体课程、教师、时间与费用，以咨询后双方确认的信息为准。</p><a class="button button--outline" href="/contact/">预约咨询</a></aside><div class="faq-list">{site.faq.map((item,index)=><details data-reveal open={index===0}><summary><span>{String(index+1).padStart(2,"0")}</span><strong>{item.q}</strong><i></i></summary><div><p>{item.a}</p></div></details>)}</div></div></section><CTA /></main><Footer /></Base>
<Base {title} {description} {jsonLd}><Header /><main id="main-content"><section class="page-hero"><div class="container page-hero__inner" data-reveal><div class="breadcrumb"><a href="/">首页</a> / 常见问题</div><h1>关于在线一对一<br /><em>家长关心的问题</em></h1><p>从课程适配、教师匹配到课堂反馈，把重要信息公开说明。</p></div></section><section class="section-pad section-blue"><div class="container faq-layout"><aside data-reveal><h2>启优学一对一 FAQ</h2><p>具体课程、教师、时间与费用，以咨询后双方确认的信息为准。</p><a class="button button--outline" href="/contact/">预约咨询</a></aside><div class="faq-list">{site.faq.map((item,index)=><details data-reveal open={index===0}><summary><strong>{item.q}</strong><i></i></summary><div><p>{item.a}</p></div></details>)}</div></div></section><CTA /></main><Footer /></Base>
src/pages/index.astro
View file @ b80c7dca
......@@ -12,20 +12,20 @@ const latest = (await getPublishedArticles()).slice(0, 3);
const jsonLd = [{ "@context": "https://schema.org", "@type": "Service", name: "启优学在线一对一个性化辅导", provider: { "@id": new URL("/#organization", Astro.site).href }, areaServed: { "@type": "Country", name: "中国" }, audience: { "@type": "EducationalAudience", educationalRole: "student" }, description: site.home.subhead }, { "@context": "https://schema.org", "@type": "FAQPage", mainEntity: site.faq.slice(0, 4).map((item) => ({ "@type": "Question", name: item.q, acceptedAnswer: { "@type": "Answer", text: item.a } })) }];
---
<Base title={site.seo.title} jsonLd={jsonLd}><Header /><main id="main-content">
<section class="home-hero"><div class="container home-hero__grid"><div class="home-hero__copy" data-reveal><div class="hero-label"><span>QIYOUXUE · 1 ON 1</span><i></i><strong>小初高在线辅导</strong></div><h1>不是多上一节课<br /><em>是让每一步更适合孩子</em></h1><p>{site.home.subhead}</p><div class="hero__actions"><a class="button button--yellow" href="/contact/">免费领取学情分析 <span>↗</span></a><a class="button button--outline" href="#workflow">了解学习流程</a></div><div class="hero__proof"><span>固定教师</span><span>互动课堂</span><span>课程回放</span><span>阶段复盘</span></div></div><div class="home-hero__visual" data-reveal><div class="image-frame"><Image src={heroImage} widths={[580, 760, 980]} sizes="(max-width: 760px) 100vw, 52vw" alt="启优学老师与学生在线一对一互动学习" format="webp" loading="eager" fetchpriority="high" /></div><div class="hero-note hero-note--top"><span>01</span><strong>先诊断</strong><small>再制定方案</small></div><div class="hero-note hero-note--bottom"><span>✓</span><strong>课后反馈</strong><small>进展清楚可见</small></div></div></div><div class="container stage-ruler" aria-label="覆盖学段"><span>小学 1—6 年级</span><i></i><span>初中 1—3 年级</span><i></i><span>高中 1—3 年级</span></div></section>
<section class="home-hero"><div class="container home-hero__grid"><div class="home-hero__copy" data-reveal><div class="hero-label"><strong>小初高在线辅导</strong></div><h1>不是多上一节课<br /><em>是让每一步更适合孩子</em></h1><p>{site.home.subhead}</p><div class="hero__actions"><a class="button" href="/contact/">免费领取学情分析</a><a class="button button--outline" href="#workflow">了解学习流程</a></div><div class="hero__proof"><span>固定教师</span><span>互动课堂</span><span>课程回放</span><span>阶段复盘</span></div></div><div class="home-hero__visual" data-reveal><div class="image-frame"><Image src={heroImage} widths={[580, 760, 980]} sizes="(max-width: 760px) 100vw, 52vw" alt="启优学老师与学生在线一对一互动学习" format="webp" loading="eager" fetchpriority="high" /></div></div></div><div class="container stage-ruler" aria-label="覆盖学段"><span>小学 1—6 年级</span><i></i><span>初中 1—3 年级</span><i></i><span>高中 1—3 年级</span></div></section>
<section class="stat-band"><div class="container stat-grid">{site.home.stats.map((stat) => <div data-reveal><strong>{stat.value}</strong><p>{stat.label}</p></div>)}</div><p class="data-note">师资数据来源于启优学一对一教务系统内部统计，截至 2026 年 7 月；相关数据会随师资及业务情况动态更新。</p></section>
<section id="services" class="section-pad section-blue"><div class="container"><div class="section-intro-row"><SectionHeading eyebrow="LEARNING NEEDS" title="从当前最需要解决的问题开始" description="课程不按统一模板推进。先看学生现在在哪里，再决定近期先做什么。" /><a class="text-link" href="/services/">查看全部学习需求 <span>↗</span></a></div><div class="need-grid">{site.services.map((item) => <a class="need-card" href={`/services/${item.slug}/`} data-reveal><div><span>{item.index}</span><small>{item.kicker}</small></div><h3>{item.name}</h3><p>{item.intro}</p><strong>了解适配方式 ↗</strong></a>)}</div></div></section>
<section id="services" class="section-pad section-blue"><div class="container"><div class="section-intro-row"><SectionHeading title="从当前最需要解决的问题开始" description="课程不按统一模板推进。先看学生现在在哪里，再决定近期先做什么。" /><a class="text-link" href="/services/">查看全部学习需求</a></div><div class="need-grid">{site.services.map((item) => <a class="need-card" href={`/services/${item.slug}/`} data-reveal><h3>{item.name}</h3><p>{item.intro}</p><strong>了解适配方式</strong></a>)}</div></div></section>
<section id="workflow" class="section-pad section-white"><div class="container learning-map"><div class="learning-map__copy"><SectionHeading eyebrow="A VISIBLE LEARNING LOOP" title="学习不是一条直线，而是一轮轮看见问题、解决问题" description="启优学把一次辅导拆成四个可理解的环节，家长知道为什么这样安排，学生知道下一步做什么。" /><a class="button button--outline" href="/methodology/">查看完整教学服务</a></div><div class="learning-map__steps">{site.workflow.map((item, index) => <article data-reveal><span>{item.number}</span><div><small>{index === 0 ? "START" : index === 3 ? "REVIEW" : "NEXT"}</small><h3>{item.title}</h3><p>{item.desc}</p></div><i>{index < 3 ? "↓" : "↻"}</i></article>)}</div></div></section>
<section id="workflow" class="section-pad section-white"><div class="container learning-map"><div class="learning-map__copy"><SectionHeading title="学习不是一条直线，而是一轮轮看见问题、解决问题" description="启优学把一次辅导拆成四个可理解的环节，家长知道为什么这样安排，学生知道下一步做什么。" /><a class="button button--outline" href="/methodology/">查看完整教学服务</a></div><div class="learning-map__steps">{site.workflow.map((item) => <article data-reveal><div><h3>{item.title}</h3><p>{item.desc}</p></div></article>)}</div></div></section>
<section id="teachers" class="section-pad teacher-section"><div class="container teacher-layout"><div><div class="eyebrow eyebrow--light"><span></span>TEACHER MATCHING</div><h2><em>20000+</em> 签约严选教师<br />匹配的不只是学科</h2><p>综合学生所在地区、学段、学科、教材进度、当前基础、阶段目标与沟通特点进行匹配。教师录取率约 3%，85% 以上来自 985 / 211 或重点师范院校，均要求持有教师资格证。</p><div class="teacher-tags"><span>平均 5—8 年一线经验</span><span>固定教师持续跟进</span><span>分学段分学科匹配</span></div></div><div class="teacher-ledger" data-reveal><div class="ledger-head"><span>MATCHING PROFILE</span><strong>匹配维度</strong></div>{["所在地区与教材版本", "学生学段与意向学科", "当前基础与具体薄弱点", "阶段目标与可用学习时间", "授课节奏与沟通特点"].map((item, index) => <div><span>0{index + 1}</span><strong>{item}</strong><i>✓</i></div>)}</div></div></section>
<section id="teachers" class="section-pad teacher-section"><div class="container teacher-layout"><div><h2><em>20000+</em> 签约严选教师<br />匹配的不只是学科</h2><p>综合学生所在地区、学段、学科、教材进度、当前基础、阶段目标与沟通特点进行匹配。教师录取率约 3%，85% 以上来自 985 / 211 或重点师范院校，均要求持有教师资格证。</p><div class="teacher-tags"><span>平均 5—8 年一线经验</span><span>固定教师持续跟进</span><span>分学段分学科匹配</span></div></div><div class="teacher-ledger" data-reveal><div class="ledger-head"><strong>匹配维度</strong></div>{["所在地区与教材版本", "学生学段与意向学科", "当前基础与具体薄弱点", "阶段目标与可用学习时间", "授课节奏与沟通特点"].map((item) => <div><strong>{item}</strong></div>)}</div></div></section>
<section class="section-pad section-yellow"><div class="container feedback-layout"><div class="feedback-board" data-reveal><div class="feedback-board__head"><span>本节学习反馈</span><strong>数学 · 函数基础</strong></div><div class="feedback-score"><span>掌握情况</span><strong>继续巩固</strong></div><ul><li><i></i><div><strong>本节内容</strong><p>梳理函数概念与自变量取值范围</p></div></li><li><i></i><div><strong>课堂观察</strong><p>概念理解清楚，分类讨论仍容易遗漏</p></div></li><li><i></i><div><strong>下节安排</strong><p>从同类错题检查分类讨论步骤</p></div></li></ul></div><div><SectionHeading eyebrow="FEEDBACK AFTER CLASS" title="不是上完就结束，学习进展需要被记录" description="课程支持回放；课后反馈会说明学习内容、课堂表现、仍需巩固的问题及后续安排。具体反馈形式以实际课程方案为准。" /><div class="feedback-points"><span>课堂互动</span><span>课程回放</span><span>错题复盘</span><span>阶段沟通</span></div></div></div></section>
<section class="section-pad section-accent"><div class="container feedback-layout"><div class="feedback-board" data-reveal><div class="feedback-board__head"><span>本节学习反馈</span><strong>数学 · 函数基础</strong></div><div class="feedback-score"><span>掌握情况</span><strong>继续巩固</strong></div><ul><li><div><strong>本节内容</strong><p>梳理函数概念与自变量取值范围</p></div></li><li><div><strong>课堂观察</strong><p>概念理解清楚，分类讨论仍容易遗漏</p></div></li><li><div><strong>下节安排</strong><p>从同类错题检查分类讨论步骤</p></div></li></ul></div><div><SectionHeading title="不是上完就结束，学习进展需要被记录" description="课程支持回放；课后反馈会说明学习内容、课堂表现、仍需巩固的问题及后续安排。具体反馈形式以实际课程方案为准。" /><div class="feedback-points"><span>课堂互动</span><span>课程回放</span><span>错题复盘</span><span>阶段沟通</span></div></div></div></section>
<section class="section-pad section-white"><div class="container faq-preview"><div><SectionHeading eyebrow="PARENTS OFTEN ASK" title="开始一对一辅导前，家长通常会问" description="把课程适配、教师匹配和学习反馈的重要信息公开说明。" /><a class="text-link" href="/faq/">查看全部常见问题 <span>↗</span></a></div><div class="faq-list">{site.faq.slice(0, 4).map((item, index) => <details data-reveal open={index === 0}><summary><span>{String(index + 1).padStart(2, "0")}</span><strong>{item.q}</strong><i></i></summary><div><p>{item.a}</p></div></details>)}</div></div></section>
<section class="section-pad section-white"><div class="container faq-preview"><div><SectionHeading title="开始一对一辅导前，家长通常会问" description="把课程适配、教师匹配和学习反馈的重要信息公开说明。" /><a class="text-link" href="/faq/">查看全部常见问题</a></div><div class="faq-list">{site.faq.slice(0, 4).map((item, index) => <details data-reveal open={index === 0}><summary><strong>{item.q}</strong><i></i></summary><div><p>{item.a}</p></div></details>)}</div></div></section>
{latest.length > 0 && <section class="section-pad section-blue"><div class="container"><div class="section-intro-row"><SectionHeading eyebrow="LEARNING NOTES" title="学习资讯与家长指南" description="围绕学情判断、学科方法、阶段复习和在线学习服务的公开说明。" /><a class="text-link" href="/articles/">查看全部资讯 <span>↗</span></a></div><div class="article-grid">{latest.map((item, index) => <article class="article-card" data-reveal><a href={`/articles/${item.id}/`}><div class="article-card__meta"><span>{item.data.category}</span><time>{fmtDate(item.data.date)}</time></div><div class="article-card__index">0{index + 1}</div><h2>{item.data.title}</h2><p>{item.data.excerpt}</p><strong>阅读全文 ↗</strong></a></article>)}</div></div></section>}
{latest.length > 0 && <section class="section-pad section-blue"><div class="container"><div class="section-intro-row"><SectionHeading title="学习资讯与家长指南" description="围绕学情判断、学科方法、阶段复习和在线学习服务的公开说明。" /><a class="text-link" href="/articles/">查看全部资讯</a></div><div class="article-grid">{latest.map((item) => <article class="article-card" data-reveal><a href={`/articles/${item.id}/`}><div class="article-card__meta"><span>{item.data.category}</span><time>{fmtDate(item.data.date)}</time></div><h2>{item.data.title}</h2><p>{item.data.excerpt}</p><strong>阅读全文</strong></a></article>)}</div></div></section>}
<CTA />
</main><Footer /></Base>
src/pages/methodology/index.astro
View file @ b80c7dca
......@@ -2,4 +2,4 @@
import Base from "../../layouts/Base.astro"; import Header from "../../components/Header.astro"; import Footer from "../../components/Footer.astro"; import CTA from "../../components/CTA.astro"; import SectionHeading from "../../components/SectionHeading.astro"; import { site } from "../../data/site";
const title=`教学服务｜${site.brand.name}`; const description="了解启优学一对一从学情沟通、问题诊断、教师匹配到课堂反馈与阶段复盘的教学服务流程。";
---
<Base {title} {description}><Header /><main id="main-content"><section class="page-hero"><div class="container page-hero__inner" data-reveal><div class="breadcrumb"><a href="/">首页</a> / 教学服务</div><div class="eyebrow"><span></span>TEACHING SERVICE</div><h1>不从一套课程开始<br /><em>从孩子当前的问题开始</em></h1><p>通过学情沟通和诊断，把宽泛目标拆成近期任务，再匹配教师、开展互动课堂并持续复盘。</p></div></section><section id="workflow" class="section-pad section-white"><div class="container"><SectionHeading eyebrow="LEARNING LOOP" title="四步形成可持续调整的学习闭环" description="每一轮课堂与反馈，都会成为下一轮安排的依据。" align="center" /><div class="method-flow">{site.workflow.map((item,index)=><article data-reveal><div><span>{item.number}</span><i>{index<3?"→":"↻"}</i></div><h2>{item.title}</h2><p>{item.desc}</p></article>)}</div></div></section><section id="delivery" class="section-pad delivery-section"><div class="container delivery-layout"><div><SectionHeading eyebrow="VISIBLE FEEDBACK" title="课堂过程有记录，下一步有依据" description="学习服务不仅是一节在线课，也包含课堂互动、课程回放、课后记录和阶段沟通。" light /></div><div class="delivery-grid">{[["01","学情沟通","年级、教材、试卷、错题与目标等基础信息"],["02","课堂互动","提问、作答、即时纠错与难度调整"],["03","课后反馈","本节内容、掌握情况、仍需巩固的问题"],["04","阶段复盘","结合课堂与练习表现调整后续安排"]].map(([num,name,text])=><article data-reveal><span>{num}</span><h3>{name}</h3><p>{text}</p></article>)}</div></div></section><section class="section-pad section-blue"><div class="container"><SectionHeading eyebrow="SERVICE BOUNDARIES" title="把重要信息提前说清楚" align="center" /><div class="principle-grid">{[["适配","一对一更适合问题较明确、需要个别讲解节奏或持续反馈的学生。"],["透明","实际课程、教师、时间、费用与反馈形式以双方确认的方案为准。"],["共同参与","学习效果还会受到基础、频率、练习、周期与家庭配合等因素影响。"]].map(([name,text],index)=><article data-reveal><span>0{index+1}</span><h3>{name}</h3><p>{text}</p></article>)}</div></div></section><CTA /></main><Footer /></Base>
<Base {title} {description}><Header /><main id="main-content"><section class="page-hero"><div class="container page-hero__inner" data-reveal><div class="breadcrumb"><a href="/">首页</a> / 教学服务</div><h1>不从一套课程开始<br /><em>从孩子当前的问题开始</em></h1><p>通过学情沟通和诊断，把宽泛目标拆成近期任务，再匹配教师、开展互动课堂并持续复盘。</p></div></section><section id="workflow" class="section-pad section-white"><div class="container"><SectionHeading title="四步形成可持续调整的学习闭环" description="每一轮课堂与反馈，都会成为下一轮安排的依据。" align="center" /><div class="method-flow">{site.workflow.map((item)=><article data-reveal><h2>{item.title}</h2><p>{item.desc}</p></article>)}</div></div></section><section id="delivery" class="section-pad delivery-section"><div class="container delivery-layout"><div><SectionHeading title="课堂过程有记录，下一步有依据" description="学习服务不仅是一节在线课，也包含课堂互动、课程回放、课后记录和阶段沟通。" light /></div><div class="delivery-grid">{[["学情沟通","年级、教材、试卷、错题与目标等基础信息"],["课堂互动","提问、作答、即时纠错与难度调整"],["课后反馈","本节内容、掌握情况、仍需巩固的问题"],["阶段复盘","结合课堂与练习表现调整后续安排"]].map(([name,text])=><article data-reveal><h3>{name}</h3><p>{text}</p></article>)}</div></div></section><section class="section-pad section-blue"><div class="container"><SectionHeading title="把重要信息提前说清楚" align="center" /><div class="principle-grid">{[["适配","一对一更适合问题较明确、需要个别讲解节奏或持续反馈的学生。"],["透明","实际课程、教师、时间、费用与反馈形式以双方确认的方案为准。"],["共同参与","学习效果还会受到基础、频率、练习、周期与家庭配合等因素影响。"]].map(([name,text])=><article data-reveal><h3>{name}</h3><p>{text}</p></article>)}</div></div></section><CTA /></main><Footer /></Base>
src/pages/services/[slug].astro
View file @ b80c7dca
......@@ -3,4 +3,4 @@ import Base from "../../layouts/Base.astro"; import Header from "../../component
export function getStaticPaths(){return site.services.map(service=>({params:{slug:service.slug},props:{service}}));} type Service=(typeof site.services)[number]; const {service}=Astro.props as {service:Service}; const related=site.services.filter(item=>item.slug!==service.slug);
const jsonLd={"@context":"https://schema.org","@type":"Service",name:service.name,serviceType:"在线一对一个性化辅导",description:service.seoDescription,provider:{"@id":new URL("/#organization",Astro.site).href},areaServed:{"@type":"Country",name:"中国"}};
---
<Base title={service.seoTitle} description={service.seoDescription} keywords={service.seoKeywords} {jsonLd}><Header /><main id="main-content"><section class="service-hero"><div class="container service-hero__inner"><div data-reveal><div class="breadcrumb"><a href="/">首页</a> / <a href="/services/">学科辅导</a> / {service.name}</div><div class="service-hero__tag"><span>{service.index}</span>{service.kicker}</div><h1>{service.name}<br /><em>{service.intro}</em></h1><div class="hero__actions"><a class="button button--yellow" href="/contact/">预约学情分析 <span>↗</span></a><a class="button button--outline" href="#capabilities">了解课程重点</a></div></div><div class="plan-sheet" data-reveal><div><small>PERSONAL LEARNING PLAN</small><strong>个性化阶段方案</strong></div>{service.capabilities.map((item,index)=><article><span>0{index+1}</span><div><small>{item.label}</small><p>{item.value}</p></div><i>✓</i></article>)}<p>示意内容 · 实际方案以学情沟通后确认为准</p></div></div></section><section id="capabilities" class="section-pad section-blue"><div class="container service-cap-layout"><div><div class="eyebrow"><span></span>HOW IT WORKS</div><h2>把宽泛目标<br />拆成可检查的任务</h2><p>{service.seoDescription}</p></div><div class="service-cap-grid">{service.capabilities.map((item,index)=><article data-reveal><span>0{index+1}</span><h3>{item.label}</h3><p>{item.value}</p></article>)}</div></div></section><section class="section-pad section-white"><div class="container service-feature-layout"><div class="service-symbol" data-reveal><small>QIYOUXUE</small><strong>{service.index}</strong><span>1 ON 1</span></div><div><div class="eyebrow"><span></span>COURSE FOCUS</div><h2>课程如何围绕学生展开</h2><ul class="large-check-list">{service.features.map((feature,index)=><li data-reveal><span>0{index+1}</span><p>{feature}</p></li>)}</ul></div></div></section><section class="section-pad process-section"><div class="container"><div class="section-heading section-heading--center section-heading--light"><div class="eyebrow"><span></span>LEARNING PROCESS</div><h2>四步形成学习闭环</h2><p>课程、教师、时间与学习结果受多种因素影响，具体安排以双方确认的方案为准。</p></div><div class="process-grid">{service.process.map((step,index)=><article data-reveal><span>0{index+1}</span><h3>{step}</h3><i>{index<3?"→":"↻"}</i></article>)}</div></div></section><nav class="related-services" aria-label="其他学习需求"><div class="container">{related.map(item=><a href={`/services/${item.slug}/`}><span>{item.index}</span><strong>{item.name}</strong><i>↗</i></a>)}</div></nav><CTA title={`先判断${service.name}是否适合孩子`} text="准备近期试卷、错题、教材进度和阶段目标，从一次学情沟通开始。" /></main><Footer /></Base>
<Base title={service.seoTitle} description={service.seoDescription} keywords={service.seoKeywords} {jsonLd}><Header /><main id="main-content"><section class="service-hero"><div class="container service-hero__inner"><div data-reveal><div class="breadcrumb"><a href="/">首页</a> / <a href="/services/">学科辅导</a> / {service.name}</div><h1>{service.name}<br /><em>{service.intro}</em></h1><div class="hero__actions"><a class="button" href="/contact/">预约学情分析</a><a class="button button--outline" href="#capabilities">了解课程重点</a></div></div><div class="plan-sheet" data-reveal><div><strong>个性化阶段方案</strong></div>{service.capabilities.map((item)=><article><div><small>{item.label}</small><p>{item.value}</p></div></article>)}<p>示意内容 · 实际方案以学情沟通后确认为准</p></div></div></section><section id="capabilities" class="section-pad section-blue"><div class="container service-cap-layout"><div><h2>把宽泛目标<br />拆成可检查的任务</h2><p>{service.seoDescription}</p></div><div class="service-cap-grid">{service.capabilities.map((item)=><article data-reveal><h3>{item.label}</h3><p>{item.value}</p></article>)}</div></div></section><section class="section-pad section-white"><div class="container service-feature-layout"><div><h2>课程如何围绕学生展开</h2><ul class="large-check-list">{service.features.map((feature)=><li data-reveal><p>{feature}</p></li>)}</ul></div></div></section><section class="section-pad process-section"><div class="container"><div class="section-heading section-heading--center section-heading--light"><h2>四步形成学习闭环</h2><p>课程、教师、时间与学习结果受多种因素影响，具体安排以双方确认的方案为准。</p></div><div class="process-grid">{service.process.map((step)=><article data-reveal><h3>{step}</h3></article>)}</div></div></section><nav class="related-services" aria-label="其他学习需求"><div class="container">{related.map(item=><a href={`/services/${item.slug}/`}><strong>{item.name}</strong></a>)}</div></nav><CTA title={`先判断${service.name}是否适合孩子`} text="准备近期试卷、错题、教材进度和阶段目标，从一次学情沟通开始。" /></main><Footer /></Base>
src/pages/services/index.astro
View file @ b80c7dca
......@@ -3,4 +3,4 @@ import Base from "../../layouts/Base.astro"; import Header from "../../component
const title = `学科辅导｜${site.brand.name}`; const description = "启优学一对一覆盖基础巩固、偏科补弱、校内同步、阶段复习与升学冲刺等小初高学习需求。";
const jsonLd = { "@context": "https://schema.org", "@type": "ItemList", name: "启优学学科辅导", itemListElement: site.services.map((item, index) => ({ "@type": "ListItem", position: index + 1, name: item.name, url: new URL(`/services/${item.slug}/`, Astro.site).href })) };
---
<Base {title} {description} {jsonLd}><Header /><main id="main-content"><section class="page-hero"><div class="container page-hero__inner" data-reveal><div class="breadcrumb"><a href="/">首页</a> / 学科辅导</div><div class="eyebrow"><span></span>SUBJECT SUPPORT</div><h1>同一个年级<br /><em>也应该有不同的学习路径</em></h1><p>覆盖小学、初中和高中常见校内学科。从当前基础、教材进度和具体问题出发，确定近期最需要解决的任务。</p></div></section><nav class="anchor-nav"><div class="container">{site.services.map((item) => <a href={`#${item.slug}`}><span>{item.index}</span>{item.name}</a>)}</div></nav><section class="section-pad section-blue"><div class="container service-list">{site.services.map((item) => <article id={item.slug} class="service-detail"><div class="service-detail__content" data-reveal><div class="service-detail__summary"><div class="eyebrow"><span></span>{item.kicker}</div><h2>{item.name}</h2><p class="lead">{item.intro}</p><a class="button button--outline" href={`/services/${item.slug}/`}>查看适配方式 <span>↗</span></a></div><div class="service-detail__delivery"><ul>{item.features.map((feature) => <li><span>✓</span>{feature}</li>)}</ul><div class="capability-pills">{item.capabilities.map((capability) => <span>{capability.label}</span>)}</div></div></div></article>)}</div></section><section class="section-pad section-white"><div class="container"><SectionHeading eyebrow="STAGES & SUBJECTS" title="学段不同，学习重点也不同" description="小学关注基础与习惯，初中梳理知识结构与偏科问题，高中更重视知识体系、题型方法与复习节奏。" align="center" /><div class="stage-grid">{[["小学","1—6 年级","语文 · 数学 · 英语"],["初中","1—3 年级","语数英 · 物理 · 化学 · 道法 · 地理"],["高中","1—3 年级","语数英 · 物化生 · 政史地"]].map(([name,grade,subjects])=><article data-reveal><span>{grade}</span><h3>{name}</h3><p>{subjects}</p></article>)}</div></div></section><CTA title="不确定孩子适合哪种学习安排？" text="先提供年级、教材进度、近期试卷与最希望解决的问题，再判断一对一是否适合。" /></main><Footer /></Base>
<Base {title} {description} {jsonLd}><Header /><main id="main-content"><section class="page-hero"><div class="container page-hero__inner" data-reveal><div class="breadcrumb"><a href="/">首页</a> / 学科辅导</div><h1>同一个年级<br /><em>也应该有不同的学习路径</em></h1><p>覆盖小学、初中和高中常见校内学科。从当前基础、教材进度和具体问题出发，确定近期最需要解决的任务。</p></div></section><nav class="anchor-nav"><div class="container">{site.services.map((item) => <a href={`#${item.slug}`}>{item.name}</a>)}</div></nav><section class="section-pad section-blue"><div class="container service-list">{site.services.map((item) => <article id={item.slug} class="service-detail"><div class="service-detail__content" data-reveal><div class="service-detail__summary"><h2>{item.name}</h2><p class="lead">{item.intro}</p><a class="button button--outline" href={`/services/${item.slug}/`}>查看适配方式</a></div><div class="service-detail__delivery"><ul>{item.features.map((feature) => <li>{feature}</li>)}</ul><div class="capability-pills">{item.capabilities.map((capability) => <span>{capability.label}</span>)}</div></div></div></article>)}</div></section><section class="section-pad section-white"><div class="container"><SectionHeading title="学段不同，学习重点也不同" description="小学关注基础与习惯，初中梳理知识结构与偏科问题，高中更重视知识体系、题型方法与复习节奏。" align="center" /><div class="stage-grid">{[["小学","1—6 年级","语文 · 数学 · 英语"],["初中","1—3 年级","语数英 · 物理 · 化学 · 道法 · 地理"],["高中","1—3 年级","语数英 · 物化生 · 政史地"]].map(([name,grade,subjects])=><article data-reveal><span>{grade}</span><h3>{name}</h3><p>{subjects}</p></article>)}</div></div></section><CTA title="不确定孩子适合哪种学习安排？" text="先提供年级、教材进度、近期试卷与最希望解决的问题，再判断一对一是否适合。" /></main><Footer /></Base>
src/styles/global.css
View file @ b80c7dca
:root{--brand-blue:#0868ac;--brand-blue-dark:#164a72;--brand-blue-light:#2f86c7;--brand-yellow:#f6b900;--brand-yellow-soft:#fff5d6;--bg-page:#fcfdfc;--bg-card:#fff;--bg-blue-soft:#eef7fc;--bg-yellow-soft:#fff8e7;--text-primary:#172b3a;--text-secondary:#4b5e6b;--text-muted:#7b8a94;--border:#dce8ef;--divider:#e8eff3;--primary-hover:#075a95;--yellow-hover:#e5ac00;--shadow-card:0 6px 24px rgba(22,74,114,.06);--shadow-hover:0 10px 32px rgba(22,74,114,.1);--container:1220px}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;color:var(--text-primary);background:var(--bg-page);font-family:"Noto Sans SC","PingFang SC","Microsoft YaHei",system-ui,sans-serif;font-size:16px;line-height:1.75;-webkit-font-smoothing:antialiased}body,button,input,textarea{font-family:inherit}a{color:inherit;text-decoration:none}img,svg{display:block;max-width:100%}button{color:inherit}address{font-style:normal}h1,h2,h3,p,ul,ol,blockquote{margin-top:0}h1,h2,h3,strong{line-height:1.25}h1,h2,h3{font-family:"HarmonyOS Sans SC","Source Han Sans SC","PingFang SC",sans-serif}::selection{color:#fff;background:var(--brand-blue)}.container{width:min(calc(100% - 48px),var(--container));margin-inline:auto}.section-pad{padding:104px 0}.section-white{background:#fff}.section-blue,.section-muted{background:var(--bg-blue-soft)}.section-yellow{background:var(--bg-yellow-soft)}.skip-link{position:fixed;z-index:1000;top:12px;left:12px;padding:10px 16px;color:#fff;background:var(--brand-blue-dark);transform:translateY(-150%)}.skip-link:focus{transform:none}[data-reveal]{opacity:0;transform:translateY(18px);transition:opacity .65s ease,transform .65s ease}[data-reveal].is-visible{opacity:1;transform:none}
.eyebrow{display:flex;align-items:center;gap:10px;margin-bottom:16px;color:var(--brand-blue);font-size:11px;font-weight:800;letter-spacing:.16em}.eyebrow>span{width:28px;height:2px;background:var(--brand-yellow)}.eyebrow--light,.section-heading--light .eyebrow{color:#d8eefb}.section-heading{max-width:700px}.section-heading--center{margin-inline:auto;text-align:center}.section-heading--center .eyebrow{justify-content:center}.section-heading h2{margin-bottom:20px;font-size:clamp(34px,4vw,54px);letter-spacing:-.045em}.section-heading>p{margin:0;color:var(--text-secondary);font-size:17px}.section-heading--light h2{color:#fff}.section-heading--light>p{color:#c9deea}.section-intro-row{display:flex;align-items:end;justify-content:space-between;gap:50px;margin-bottom:48px}.text-link{color:var(--brand-blue);font-weight:750;white-space:nowrap}.text-link span{color:var(--brand-yellow)}.text-link--light{color:#fff}
.button{display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:52px;padding:0 25px;border:1px solid var(--brand-blue);border-radius:9px;color:#fff;background:var(--brand-blue);font-size:14px;font-weight:800;letter-spacing:.02em;transition:background .2s,border-color .2s,transform .2s}.button:hover{border-color:var(--primary-hover);background:var(--primary-hover);transform:translateY(-2px)}.button--small{min-height:42px;padding:0 18px;font-size:13px}.button--yellow{border-color:var(--brand-yellow);color:var(--text-primary);background:var(--brand-yellow)}.button--yellow:hover{border-color:var(--yellow-hover);background:var(--yellow-hover)}.button--outline{color:var(--brand-blue);background:#fff}.button--outline:hover{color:#fff}.button--ghost{border-color:rgba(255,255,255,.55);background:transparent}.button--white{border-color:#fff;color:var(--brand-blue-dark);background:#fff}.hero__actions{display:flex;flex-wrap:wrap;gap:12px}
.site-header{position:sticky;z-index:100;top:0;height:76px;border-bottom:1px solid rgba(220,232,239,.8);background:rgba(252,253,252,.96);transition:box-shadow .25s}.site-header.is-scrolled{box-shadow:0 8px 24px rgba(22,74,114,.08)}.site-header__inner{display:flex;align-items:center;height:100%;gap:24px}.brand{width:132px;height:62px;overflow:hidden}.brand img{width:100%;height:100%;object-fit:cover;object-position:center}.desktop-nav{margin-left:auto}.desktop-nav>ul{display:flex;margin:0;padding:0;list-style:none}.nav-item{position:relative}.nav-link{position:relative;display:block;padding:27px 13px 24px;color:#304957;font-size:14px;font-weight:650}.nav-link::after{position:absolute;right:13px;bottom:16px;left:13px;height:2px;content:"";background:var(--brand-yellow);transform:scaleX(0);transition:transform .25s}.nav-link:hover,.nav-link[aria-current=page]{color:var(--brand-blue)}.nav-link:hover::after,.nav-link[aria-current=page]::after{transform:scaleX(1)}.nav-dropdown{position:absolute;top:calc(100% - 4px);left:50%;visibility:hidden;width:220px;padding-top:10px;opacity:0;transform:translate(-50%,8px);transition:.2s}.nav-item:hover .nav-dropdown,.nav-item:focus-within .nav-dropdown{visibility:visible;opacity:1;transform:translate(-50%,0)}.nav-dropdown ul{margin:0;padding:8px;border:1px solid var(--border);border-radius:10px;background:#fff;box-shadow:var(--shadow-hover);list-style:none}.nav-dropdown a{display:flex;justify-content:space-between;padding:10px 12px;border-radius:7px;font-size:13px}.nav-dropdown a:hover{color:var(--brand-blue);background:var(--bg-blue-soft)}.mobile-nav{display:none;margin-left:auto}.mobile-nav summary{display:grid;width:40px;height:40px;padding:10px;cursor:pointer;list-style:none}.mobile-nav summary span{height:2px;background:var(--brand-blue-dark)}
.home-hero{overflow:hidden;padding:56px 0 0;background:#fff}.home-hero__grid{display:grid;grid-template-columns:.9fr 1.1fr;align-items:center;gap:48px}.hero-label{display:flex;align-items:center;gap:12px;margin-bottom:25px;color:var(--brand-blue);font-size:11px;font-weight:800;letter-spacing:.12em}.hero-label i{width:1px;height:15px;background:var(--border)}.hero-label strong{color:var(--text-secondary);letter-spacing:.04em}.home-hero h1{margin-bottom:25px;font-size:clamp(46px,5.6vw,76px);line-height:1.1;letter-spacing:-.06em}.home-hero h1 em,.page-hero h1 em{color:var(--brand-blue);font-style:normal}.home-hero__copy>p{max-width:600px;margin-bottom:32px;color:var(--text-secondary);font-size:18px}.hero__proof{display:flex;flex-wrap:wrap;gap:16px;margin-top:30px}.hero__proof span{display:flex;align-items:center;gap:8px;color:var(--text-secondary);font-size:13px}.hero__proof span::before{width:6px;height:6px;border-radius:50%;content:"";background:var(--brand-yellow)}.home-hero__visual{position:relative}.image-frame{overflow:hidden;border:1px solid var(--border);border-radius:32px 8px 32px 8px;background:var(--bg-blue-soft);box-shadow:0 24px 60px rgba(22,74,114,.12)}.image-frame img{width:100%;aspect-ratio:1.22;object-fit:cover}.hero-note{position:absolute;display:grid;grid-template-columns:auto 1fr;column-gap:10px;padding:14px 17px;border:1px solid var(--border);border-radius:12px;background:#fff;box-shadow:var(--shadow-hover)}.hero-note>span{grid-row:1/3;display:grid;place-items:center;width:36px;height:36px;border-radius:50%;color:var(--brand-blue-dark);background:var(--brand-yellow);font-weight:900}.hero-note strong{font-size:14px}.hero-note small{color:var(--text-muted)}.hero-note--top{top:28px;left:-28px}.hero-note--bottom{right:-18px;bottom:30px}.stage-ruler{display:flex;align-items:center;justify-content:center;gap:25px;margin-top:50px;padding:20px 0;border-top:1px solid var(--divider);color:var(--brand-blue-dark);font-size:14px;font-weight:750}.stage-ruler i{width:5px;height:5px;border-radius:50%;background:var(--brand-yellow)}
.stat-band{padding:46px 0;color:#fff;background:var(--brand-blue-dark)}.stat-grid{display:grid;grid-template-columns:repeat(4,1fr)}.stat-grid>div{padding:0 30px;border-right:1px solid rgba(255,255,255,.18);text-align:center}.stat-grid>div:last-child{border:0}.stat-grid strong{display:block;color:var(--brand-yellow);font-size:clamp(30px,4vw,48px);font-weight:850;letter-spacing:-.04em}.stat-grid p{margin:8px 0 0;color:#d9e8f1;font-size:13px}.data-note{max-width:900px;margin:24px auto 0;color:#abc5d6;font-size:11px;text-align:center}.need-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}.need-card{display:flex;min-height:320px;padding:28px;flex-direction:column;border:1px solid var(--border);border-radius:16px;background:#fff;box-shadow:var(--shadow-card);transition:.25s}.need-card:hover{border-color:#b9d7e8;box-shadow:var(--shadow-hover);transform:translateY(-3px)}.need-card>div{display:flex;align-items:center;justify-content:space-between;color:var(--brand-blue)}.need-card>div>span{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;color:var(--brand-blue-dark);background:var(--brand-yellow);font-weight:900}.need-card small{font-size:10px;letter-spacing:.12em}.need-card h3{margin:54px 0 14px;font-size:27px}.need-card p{color:var(--text-secondary)}.need-card>strong{margin-top:auto;color:var(--brand-blue);font-size:13px}.learning-map{display:grid;grid-template-columns:.9fr 1.1fr;gap:90px}.learning-map__copy{position:sticky;top:120px;align-self:start}.learning-map__copy .button{margin-top:30px}.learning-map__steps{position:relative}.learning-map__steps::before{position:absolute;top:25px;bottom:25px;left:29px;width:2px;content:"";background:var(--border)}.learning-map__steps article{position:relative;display:grid;grid-template-columns:60px 1fr 28px;align-items:center;gap:20px;padding:26px 0;border-bottom:1px solid var(--divider)}.learning-map__steps article>span{z-index:1;display:grid;place-items:center;width:58px;height:58px;border:2px solid var(--brand-blue);border-radius:50%;color:var(--brand-blue);background:#fff;font-weight:900}.learning-map__steps article:last-child>span{border-color:var(--brand-yellow);color:var(--text-primary);background:var(--brand-yellow)}.learning-map__steps small{color:var(--text-muted);font-size:10px;letter-spacing:.16em}.learning-map__steps h3{margin:3px 0 5px;font-size:24px}.learning-map__steps p{margin:0;color:var(--text-secondary)}.learning-map__steps article>i{color:var(--brand-yellow);font-size:22px;font-style:normal}.teacher-section{color:#fff;background:var(--brand-blue-dark)}.teacher-layout{display:grid;grid-template-columns:1fr .9fr;gap:80px;align-items:center}.teacher-layout h2{margin-bottom:22px;font-size:clamp(38px,4.6vw,60px);letter-spacing:-.05em}.teacher-layout h2 em{color:var(--brand-yellow);font-style:normal}.teacher-layout>div>p{color:#c7dce9;font-size:17px}.teacher-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:26px}.teacher-tags span{padding:7px 11px;border:1px solid rgba(255,255,255,.2);border-radius:6px;color:#e3f0f6;font-size:12px}.teacher-ledger{padding:26px;border:1px solid rgba(255,255,255,.18);border-radius:18px;background:#fff;color:var(--text-primary);box-shadow:0 22px 50px rgba(5,35,55,.22)}.ledger-head{display:flex;justify-content:space-between;padding-bottom:20px;border-bottom:2px solid var(--brand-blue-dark)}.ledger-head span{color:var(--brand-blue);font-size:10px;letter-spacing:.14em}.teacher-ledger>div:not(:first-child){display:grid;grid-template-columns:40px 1fr auto;gap:14px;padding:16px 0;border-bottom:1px solid var(--divider)}.teacher-ledger>div:not(:first-child)>span{color:var(--text-muted);font-size:12px}.teacher-ledger i{color:var(--brand-blue);font-style:normal}.feedback-layout{display:grid;grid-template-columns:1fr 1fr;gap:90px;align-items:center}.feedback-board{overflow:hidden;border:1px solid #e9d99e;border-radius:16px;background:#fff;box-shadow:var(--shadow-card)}.feedback-board__head{display:flex;align-items:center;justify-content:space-between;padding:20px 24px;color:#fff;background:var(--brand-blue-dark)}.feedback-board__head span{font-size:12px}.feedback-score{display:flex;align-items:center;justify-content:space-between;padding:18px 24px;border-bottom:1px solid var(--divider)}.feedback-score strong{color:var(--brand-blue)}.feedback-board ul{margin:0;padding:8px 24px 20px;list-style:none}.feedback-board li{display:flex;gap:14px;padding:16px 0;border-bottom:1px solid var(--divider)}.feedback-board li:last-child{border:0}.feedback-board li>i{width:9px;height:9px;margin-top:7px;border:2px solid var(--brand-yellow);border-radius:50%}.feedback-board li p{margin:4px 0 0;color:var(--text-secondary);font-size:13px}.feedback-points{display:flex;flex-wrap:wrap;gap:9px;margin-top:26px}.feedback-points span{padding:8px 12px;border:1px solid #ebd996;border-radius:8px;background:#fff;color:var(--brand-blue-dark);font-size:12px;font-weight:750}.faq-preview,.faq-layout{display:grid;grid-template-columns:.65fr 1.35fr;gap:80px}.faq-preview>div:first-child{position:sticky;top:110px;align-self:start}.faq-list details{border-bottom:1px solid var(--border)}.faq-list summary{display:grid;grid-template-columns:38px 1fr 24px;gap:14px;align-items:center;padding:23px 0;cursor:pointer;list-style:none}.faq-list summary>span{color:var(--brand-blue);font-size:12px}.faq-list summary>strong{font-size:17px}.faq-list summary>i{position:relative;width:18px;height:18px}.faq-list summary>i::before,.faq-list summary>i::after{position:absolute;top:8px;left:3px;width:12px;height:2px;content:"";background:var(--brand-blue)}.faq-list summary>i::after{transform:rotate(90deg);transition:.2s}.faq-list details[open] summary>i::after{transform:none}.faq-list details>div{padding:0 38px 20px 52px;color:var(--text-secondary)}
.page-hero{min-height:430px;padding:92px 0 78px;background:var(--bg-blue-soft)}.page-hero__inner{max-width:930px}.breadcrumb{margin-bottom:34px;color:var(--text-muted);font-size:12px}.breadcrumb a:hover{color:var(--brand-blue)}.page-hero h1{margin-bottom:24px;font-size:clamp(45px,6vw,72px);line-height:1.12;letter-spacing:-.055em}.page-hero p{max-width:760px;margin:0;color:var(--text-secondary);font-size:18px}.anchor-nav{position:sticky;z-index:20;top:76px;border-block:1px solid var(--border);background:rgba(255,255,255,.96)}.anchor-nav .container{display:grid;grid-template-columns:repeat(4,1fr)}.anchor-nav a{padding:18px;border-right:1px solid var(--border);color:var(--text-secondary);font-size:13px;text-align:center}.anchor-nav a span{margin-right:8px;color:var(--brand-blue)}.service-list{display:grid;gap:18px}.service-detail{scroll-margin-top:150px;border:1px solid var(--border);border-radius:16px;background:#fff}.service-detail__content{display:grid;grid-template-columns:.85fr 1.15fr;gap:60px;padding:46px}.service-detail__summary h2{margin-bottom:16px;font-size:40px}.service-detail__summary .lead{color:var(--text-secondary);font-size:17px}.service-detail__delivery ul{margin:0 0 24px;padding:0;list-style:none}.service-detail__delivery li{display:flex;gap:12px;padding:12px 0;border-bottom:1px solid var(--divider);color:var(--text-secondary)}.service-detail__delivery li span{color:var(--brand-blue);font-weight:900}.capability-pills{display:flex;flex-wrap:wrap;gap:8px}.capability-pills span{padding:7px 11px;border-radius:6px;background:var(--bg-blue-soft);color:var(--brand-blue);font-size:12px}.stage-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:45px}.stage-grid article{padding:32px;border-top:4px solid var(--brand-yellow);background:var(--bg-blue-soft)}.stage-grid span{color:var(--brand-blue);font-size:12px}.stage-grid h3{margin:18px 0 9px;font-size:32px}.stage-grid p{margin:0;color:var(--text-secondary)}
.service-hero{padding:86px 0;background:#fff}.service-hero__inner{display:grid;grid-template-columns:1fr .85fr;gap:75px;align-items:center}.service-hero__tag{display:flex;align-items:center;gap:12px;margin-bottom:22px;color:var(--brand-blue);font-size:11px;font-weight:800;letter-spacing:.12em}.service-hero__tag span{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;color:var(--text-primary);background:var(--brand-yellow)}.service-hero h1{font-size:clamp(44px,5vw,68px);letter-spacing:-.05em}.service-hero h1 em{display:block;margin-top:16px;color:var(--text-secondary);font-size:18px;font-style:normal;font-weight:450;letter-spacing:0;line-height:1.7}.plan-sheet{padding:26px;border:1px solid var(--border);border-radius:16px;background:var(--bg-blue-soft);box-shadow:var(--shadow-card)}.plan-sheet>div:first-child{display:flex;align-items:end;justify-content:space-between;padding-bottom:18px;border-bottom:2px solid var(--brand-blue-dark)}.plan-sheet>div:first-child small{color:var(--brand-blue);font-size:9px;letter-spacing:.12em}.plan-sheet article{display:grid;grid-template-columns:36px 1fr auto;gap:12px;align-items:center;padding:14px 0;border-bottom:1px solid var(--border)}.plan-sheet article>span{color:var(--text-muted);font-size:11px}.plan-sheet article small{color:var(--brand-blue)}.plan-sheet article p{margin:2px 0 0}.plan-sheet article i{color:var(--brand-blue);font-style:normal}.plan-sheet>p{margin:15px 0 0;color:var(--text-muted);font-size:10px}.service-cap-layout{display:grid;grid-template-columns:.8fr 1.2fr;gap:70px}.service-cap-layout>div:first-child>h2{font-size:43px}.service-cap-layout>div:first-child>p{color:var(--text-secondary)}.service-cap-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.service-cap-grid article{padding:25px;border:1px solid var(--border);border-radius:12px;background:#fff}.service-cap-grid span{color:var(--brand-blue);font-size:11px}.service-cap-grid h3{margin:24px 0 9px}.service-cap-grid p{margin:0;color:var(--text-secondary)}.service-feature-layout{display:grid;grid-template-columns:.65fr 1.35fr;gap:80px;align-items:center}.service-symbol{display:grid;place-items:center;aspect-ratio:1;border:2px solid var(--brand-blue);border-radius:50%;color:var(--brand-blue);background:var(--bg-blue-soft)}.service-symbol strong{font-size:90px}.service-symbol small,.service-symbol span{letter-spacing:.18em}.large-check-list{margin:0;padding:0;list-style:none}.large-check-list li{display:grid;grid-template-columns:50px 1fr;gap:20px;padding:22px 0;border-bottom:1px solid var(--divider)}.large-check-list span{color:var(--brand-blue);font-size:12px}.large-check-list p{margin:0;font-size:18px}.process-section,.delivery-section,.principle-section{color:#fff;background:var(--brand-blue-dark)}.process-grid,.method-flow{display:grid;grid-template-columns:repeat(4,1fr);margin-top:48px}.process-grid article{padding:25px;border-right:1px solid rgba(255,255,255,.18)}.process-grid span{color:var(--brand-yellow);font-size:12px}.process-grid h3{margin:45px 0 12px;font-size:23px}.process-grid i{color:var(--brand-yellow);font-style:normal}.related-services{background:var(--bg-blue-soft)}.related-services .container{display:grid;grid-template-columns:repeat(3,1fr)}.related-services a{display:grid;grid-template-columns:40px 1fr auto;padding:25px;border-right:1px solid var(--border)}.related-services span,.related-services i{color:var(--brand-blue);font-style:normal}
.about-intro-layout{display:grid;grid-template-columns:.8fr 1.2fr;gap:90px}.story-column p{position:relative;padding:0 0 26px 45px;border-bottom:1px solid var(--divider);color:var(--text-secondary);font-size:17px}.story-column p span{position:absolute;left:0;color:var(--brand-blue);font-size:11px}.advantage-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:45px}.advantage-grid article{padding:28px;border:1px solid var(--border);border-radius:14px;background:#fff}.advantage-grid article>span{color:var(--brand-blue);font-size:11px}.advantage-grid h3{margin:30px 0 10px;font-size:21px}.advantage-grid p{margin:0;color:var(--text-secondary)}.principle-layout{display:grid;grid-template-columns:.8fr 1.2fr;gap:90px}.principle-layout h2{font-size:46px}.principle-layout>div:first-child>p{color:#c7dce9}.principle-layout article{display:grid;grid-template-columns:45px 1fr;gap:16px;padding:19px 0;border-bottom:1px solid rgba(255,255,255,.16)}.principle-layout article>span{color:var(--brand-yellow);font-size:11px}.principle-layout article h3{margin:0 0 6px}.principle-layout article p{margin:0;color:#c7dce9}.vision-section{background:var(--bg-yellow-soft)}.vision-card{padding:58px;border:1px solid #eadb9e;border-radius:18px;background:#fff}.vision-card>span{color:var(--brand-blue);font-size:11px;letter-spacing:.16em}.vision-card blockquote{max-width:950px;margin:25px 0;font-size:clamp(28px,4vw,48px);font-weight:800;line-height:1.35}.vision-card>div{display:flex;gap:14px;align-items:center}.vision-card i{width:35px;height:3px;background:var(--brand-yellow)}.vision-card p{margin:0;color:var(--text-secondary)}.method-flow article{padding:25px;border-right:1px solid var(--border)}.method-flow article>div{display:flex;justify-content:space-between}.method-flow span,.method-flow i{color:var(--brand-blue);font-style:normal}.method-flow h2{margin:45px 0 12px;font-size:26px}.method-flow p{color:var(--text-secondary)}.delivery-layout{display:grid;grid-template-columns:.7fr 1.3fr;gap:75px}.delivery-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.delivery-grid article{padding:25px;border:1px solid rgba(255,255,255,.18);border-radius:12px}.delivery-grid span{color:var(--brand-yellow);font-size:11px}.delivery-grid h3{margin:30px 0 8px}.delivery-grid p{margin:0;color:#c7dce9}.principle-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:40px}.principle-grid article{padding:30px;border:1px solid var(--border);border-radius:14px;background:#fff}.principle-grid span{color:var(--brand-blue);font-size:11px}.principle-grid h3{margin:30px 0 10px}.principle-grid p{margin:0;color:var(--text-secondary)}.faq-layout aside{position:sticky;top:120px;align-self:start}.faq-layout aside>span{color:var(--brand-blue);font-size:11px;letter-spacing:.15em}.faq-layout aside h2{font-size:38px}.faq-layout aside p{color:var(--text-secondary)}
.contact-hero{padding:95px 0;color:#fff;background:var(--brand-blue-dark)}.contact-hero__grid{display:grid;grid-template-columns:1fr auto;gap:60px;align-items:center}.contact-hero__grid>div:first-child{max-width:760px}.contact-hero h1{font-size:clamp(46px,6vw,72px);letter-spacing:-.055em}.contact-hero p{color:#c7dce9;font-size:18px}.contact-hours{display:grid;place-items:center;width:190px;aspect-ratio:1;border:1px solid rgba(255,255,255,.25);border-radius:50%}.contact-hours span{color:var(--brand-yellow);font-size:48px;font-weight:900}.contact-hours strong{margin-top:-35px}.contact-hours p{margin:-35px 0 0;font-size:13px}.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}.contact-grid article{min-height:250px;padding:30px;border:1px solid var(--border);border-radius:14px;background:#fff}.contact-grid article>span{color:var(--brand-blue);font-size:11px}.contact-grid h2{margin:30px 0 15px}.contact-big-link{display:block;color:var(--brand-blue-dark);font-size:30px;font-weight:850}.contact-big-link--small{font-size:20px}.contact-grid article>p{margin-top:12px;color:var(--text-muted)}.visit-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:90px}.visit-grid h2{font-size:46px}.visit-grid>div>p{color:var(--text-secondary)}.visit-grid ol{margin:0;padding:0;list-style:none}.visit-grid li{display:grid;grid-template-columns:50px 1fr;gap:20px;padding:18px 0;border-bottom:1px solid var(--divider)}.visit-grid li>span{color:var(--brand-blue);font-size:11px}.visit-grid li p{margin:5px 0 0;color:var(--text-secondary)}.contact-bottom{padding:90px 0;color:#fff;background:var(--brand-blue-dark);text-align:center}.contact-bottom>div>p{color:#b9d5e5;font-size:11px;letter-spacing:.18em}.contact-bottom h2{font-size:52px}.article-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.article-card{border:1px solid var(--border);border-radius:14px;background:#fff}.article-card>a{display:flex;min-height:340px;padding:26px;flex-direction:column}.article-card__meta{display:flex;justify-content:space-between;color:var(--text-muted);font-size:11px}.article-card__meta span{color:var(--brand-blue)}.article-card__index{margin:34px 0 15px;color:var(--brand-yellow);font-size:28px;font-weight:900}.article-card h2{font-size:21px}.article-card p{color:var(--text-secondary)}.article-card>a>strong{margin-top:auto;color:var(--brand-blue);font-size:12px}
.article-layout{display:grid;grid-template-columns:250px 1fr;gap:40px}.article-sidebar{align-self:start;padding:24px;border:1px solid var(--border);border-radius:12px;background:#fff}.article-sidebar h2{font-size:18px}.article-sidebar a{display:flex;justify-content:space-between;padding:8px 0;color:var(--text-secondary);font-size:13px}.article-sidebar a:hover,.article-sidebar a.is-active{color:var(--brand-blue)}.article-list-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.pagination{display:flex;justify-content:center;gap:8px;margin-top:40px}.pagination a,.pagination span{display:grid;place-items:center;width:38px;height:38px;border:1px solid var(--border);border-radius:6px;background:#fff}.pagination [aria-current=page]{color:#fff;background:var(--brand-blue)}.article-detail-head{padding:90px 0;color:#fff;background:var(--brand-blue-dark)}.article-detail-head__inner{max-width:960px}.article-detail-category{display:inline-block;margin-bottom:20px;padding:6px 10px;border-radius:5px;color:var(--text-primary);background:var(--brand-yellow);font-size:11px}.article-detail-head h1{font-size:clamp(40px,5vw,64px)}.article-detail-head__inner>p{color:#c7dce9;font-size:18px}.article-detail-meta{display:flex;gap:20px;color:#a9c6d7;font-size:12px}.article-detail-layout{display:grid;grid-template-columns:220px minmax(0,760px);justify-content:center;gap:70px;padding:70px 0}.article-detail-layout aside{color:var(--text-muted);font-size:13px}.article-detail-layout aside a{color:var(--brand-blue);font-weight:750}.article-prose{font-size:17px}.article-prose h2{margin-top:45px;font-size:30px}.article-prose h3{margin-top:30px}.article-prose p,.article-prose li{color:var(--text-secondary)}.article-prose img{border-radius:12px}.article-prose a{color:var(--brand-blue);text-decoration:underline}.article-prose blockquote{margin:25px 0;padding:20px;border-left:4px solid var(--brand-yellow);background:var(--bg-yellow-soft)}
.cta-band{padding:78px 0;color:#fff;background:var(--brand-blue)}.cta-band__inner{display:flex;align-items:center;justify-content:space-between;gap:60px}.cta-band h2{margin-bottom:14px;font-size:clamp(34px,4vw,52px)}.cta-band p{max-width:720px;margin:0;color:#d8eaf5}.cta-band__actions{display:flex;align-items:center;gap:22px;flex-shrink:0}.site-footer{padding:70px 0 0;color:#c7dce9;background:#103c5b}.footer-grid{display:grid;grid-template-columns:1.4fr .7fr .8fr 1fr;gap:50px}.footer-logo{display:block;width:150px;height:74px;overflow:hidden;border-radius:4px}.footer-logo img{width:100%;height:100%;object-fit:cover}.footer-brand>p{max-width:330px;margin-top:18px}.footer-tags{display:flex;gap:7px}.footer-tags span{padding:5px 9px;border:1px solid rgba(255,255,255,.18);border-radius:5px;font-size:11px}.footer-grid h2{margin:0 0 18px;color:#fff;font-size:15px}.footer-grid>div:not(:first-child)>a{display:block;margin:9px 0;color:#b8d0df;font-size:13px}.footer-grid a:hover{color:var(--brand-yellow)}.footer-phone{color:var(--brand-yellow)!important;font-size:23px!important;font-weight:850}.footer-contact p{font-size:12px}.footer-arrow{margin-top:22px!important;color:#fff!important}.footer-bottom{display:flex;justify-content:space-between;gap:30px;margin-top:55px;padding:22px 0;border-top:1px solid rgba(255,255,255,.13);font-size:11px}.footer-bottom p{margin:0}.contact-dialog{width:min(920px,calc(100% - 32px));padding:0;border:0;border-radius:18px;background:transparent}.contact-dialog::backdrop{background:rgba(9,35,52,.68)}.contact-dialog__panel{position:relative;padding:38px;border:1px solid var(--border);border-radius:18px;background:#fff}.contact-dialog__close{position:absolute;top:14px;right:15px;width:38px;height:38px;border:0;border-radius:50%;background:var(--bg-blue-soft);font-size:24px;cursor:pointer}.contact-dialog__heading{max-width:640px}.contact-dialog__heading h2{margin-bottom:10px;font-size:36px}.contact-dialog__heading p{color:var(--text-secondary)}.contact-dialog__grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:28px}.contact-dialog__grid article{padding:22px;border:1px solid var(--border);border-radius:12px;background:var(--bg-blue-soft)}.contact-dialog__grid article>span{color:var(--brand-blue);font-size:10px}.contact-dialog__grid h3{margin:18px 0 8px}.contact-dialog__grid p{margin:6px 0 0;color:var(--text-muted);font-size:12px}.contact-dialog__primary{color:var(--brand-blue-dark);font-size:21px;font-weight:850}.contact-dialog__email,.contact-dialog__website{font-size:15px}.not-found{display:grid;place-items:center;min-height:70vh;padding:80px 0;background:var(--bg-blue-soft);text-align:center}.not-found>div>span{display:block;color:var(--brand-yellow);font-size:100px;font-weight:900}.not-found .eyebrow{justify-content:center}
:root{--brand-blue:#1473e6;--brand-blue-dark:#276fb5;--brand-blue-light:#43b7e8;--brand-accent:#43d4e8;--brand-accent-soft:#eaf8ff;--bg-page:#fff;--bg-card:#fff;--bg-blue-soft:#f1f7ff;--bg-accent-soft:#f5faff;--text-primary:#1f2937;--text-secondary:#526070;--text-muted:#8491a3;--border:#d8e5f4;--divider:#e6edf6;--primary-hover:#0e61c8;--accent-hover:#25b9dd;--shadow-card:0 6px 24px rgba(20,115,230,.06);--shadow-hover:0 10px 32px rgba(20,115,230,.1);--container:1220px}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;color:var(--text-primary);background:var(--bg-page);font-family:"Microsoft YaHei","PingFang SC","Hiragino Sans GB",sans-serif;font-size:16px;line-height:1.75;-webkit-font-smoothing:antialiased}body,button,input,textarea{font-family:inherit}a{color:inherit;text-decoration:none}img,svg{display:block;max-width:100%}button{color:inherit}address{font-style:normal}h1,h2,h3,p,ul,ol,blockquote{margin-top:0}h1,h2,h3,strong{line-height:1.25}h1,h2,h3{font-family:inherit}::selection{color:#fff;background:var(--brand-blue)}.container{width:min(calc(100% - 48px),var(--container));margin-inline:auto}.section-pad{padding:104px 0}.section-white{background:#fff}.section-blue,.section-muted{background:var(--bg-blue-soft)}.section-accent{background:var(--bg-accent-soft)}.skip-link{position:fixed;z-index:1000;top:12px;left:12px;padding:10px 16px;color:#fff;background:var(--brand-blue);transform:translateY(-150%)}.skip-link:focus{transform:none}[data-reveal]{opacity:0;transform:translateY(18px);transition:opacity .65s ease,transform .65s ease}[data-reveal].is-visible{opacity:1;transform:none}
.eyebrow{display:flex;align-items:center;gap:10px;margin-bottom:16px;color:var(--brand-blue);font-size:11px;font-weight:800;letter-spacing:.16em}.eyebrow>span{width:28px;height:2px;background:var(--brand-accent)}.eyebrow--light,.section-heading--light .eyebrow{color:#d8eefb}.section-heading{max-width:700px}.section-heading--center{margin-inline:auto;text-align:center}.section-heading--center .eyebrow{justify-content:center}.section-heading h2{margin-bottom:20px;font-size:clamp(34px,4vw,54px);letter-spacing:-.045em}.section-heading>p{margin:0;color:var(--text-secondary);font-size:17px}.section-heading--light h2{color:#fff}.section-heading--light>p{color:#c9deea}.section-intro-row{display:flex;align-items:end;justify-content:space-between;gap:50px;margin-bottom:48px}.text-link{color:var(--brand-blue);font-weight:750;white-space:nowrap}.text-link span{color:var(--brand-accent)}.text-link--light{color:#fff}
.button{display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:52px;padding:0 25px;border:1px solid var(--brand-blue);border-radius:9px;color:#fff;background:var(--brand-blue);font-size:14px;font-weight:800;letter-spacing:.02em;transition:background .2s,border-color .2s,transform .2s}.button:hover{border-color:var(--primary-hover);background:var(--primary-hover);transform:translateY(-2px)}.button--small{min-height:42px;padding:0 18px;font-size:13px}.button--accent{border-color:var(--brand-accent);color:var(--text-primary);background:var(--brand-accent)}.button--accent:hover{border-color:var(--accent-hover);background:var(--accent-hover)}.button--outline{color:var(--brand-blue);background:#fff}.button--outline:hover{color:#fff}.button--ghost{border-color:rgba(255,255,255,.55);background:transparent}.button--white{border-color:#fff;color:var(--brand-blue-dark);background:#fff}.hero__actions{display:flex;flex-wrap:wrap;gap:12px}
.site-header{position:sticky;z-index:100;top:0;height:76px;border-bottom:1px solid rgba(220,232,239,.8);background:rgba(252,253,252,.96);transition:box-shadow .25s}.site-header.is-scrolled{box-shadow:0 8px 24px rgba(7,59,131,.08)}.site-header__inner{display:flex;align-items:center;height:100%;gap:24px}.brand{width:132px;height:62px;overflow:hidden}.brand img{width:100%;height:100%;object-fit:cover;object-position:center}.desktop-nav{margin-left:auto}.desktop-nav>ul{display:flex;margin:0;padding:0;list-style:none}.nav-item{position:relative}.nav-link{position:relative;display:block;padding:27px 13px 24px;color:#304957;font-size:14px;font-weight:650}.nav-link::after{position:absolute;right:13px;bottom:16px;left:13px;height:2px;content:"";background:var(--brand-accent);transform:scaleX(0);transition:transform .25s}.nav-link:hover,.nav-link[aria-current=page]{color:var(--brand-blue)}.nav-link:hover::after,.nav-link[aria-current=page]::after{transform:scaleX(1)}.nav-dropdown{position:absolute;top:calc(100% - 4px);left:50%;visibility:hidden;width:220px;padding-top:10px;opacity:0;transform:translate(-50%,8px);transition:.2s}.nav-item:hover .nav-dropdown,.nav-item:focus-within .nav-dropdown{visibility:visible;opacity:1;transform:translate(-50%,0)}.nav-dropdown ul{margin:0;padding:8px;border:1px solid var(--border);border-radius:10px;background:#fff;box-shadow:var(--shadow-hover);list-style:none}.nav-dropdown a{display:flex;justify-content:space-between;padding:10px 12px;border-radius:7px;font-size:13px}.nav-dropdown a:hover{color:var(--brand-blue);background:var(--bg-blue-soft)}.mobile-nav{display:none;margin-left:auto}.mobile-nav summary{display:grid;width:40px;height:40px;padding:10px;cursor:pointer;list-style:none}.mobile-nav summary span{height:2px;background:var(--brand-blue-dark)}
.home-hero{overflow:hidden;padding:56px 0 0;background:#fff}.home-hero__grid{display:grid;grid-template-columns:.9fr 1.1fr;align-items:center;gap:8px}.hero-label{display:flex;align-items:center;margin-bottom:20px;color:var(--brand-blue);font-size:14px;font-weight:600}.home-hero h1{margin-bottom:25px;font-size:clamp(46px,5.6vw,76px);line-height:1.1;letter-spacing:-.04em}.home-hero h1 em,.page-hero h1 em{color:var(--brand-blue);font-style:normal}.home-hero__copy{position:relative;z-index:2}.home-hero__copy>p{max-width:600px;margin-bottom:32px;color:var(--text-secondary);font-size:18px}.hero__proof{display:flex;flex-wrap:wrap;gap:16px;margin-top:30px}.hero__proof span{display:flex;align-items:center;gap:8px;color:var(--text-secondary);font-size:13px}.hero__proof span::before{width:6px;height:6px;border-radius:50%;content:"";background:var(--brand-accent)}.home-hero__visual{position:relative;margin-left:-36px}.image-frame{position:relative;overflow:hidden;background:#fff}.image-frame::before{position:absolute;z-index:1;inset:0 auto 0 0;width:18%;content:"";background:rgba(255,255,255,.64);filter:blur(18px);transform:translateX(-50%)}.image-frame img{width:100%;aspect-ratio:1.22;object-fit:cover;mix-blend-mode:multiply}.stage-ruler{display:flex;align-items:center;justify-content:center;gap:25px;margin-top:32px;padding:20px 0;border-top:1px solid var(--divider);color:var(--brand-blue-dark);font-size:14px;font-weight:750}.stage-ruler i{width:5px;height:5px;border-radius:50%;background:var(--brand-accent)}
.stat-band{padding:46px 0;background:#eaf4ff}.stat-grid{display:grid;grid-template-columns:repeat(4,1fr)}.stat-grid>div{padding:0 30px;border-right:1px solid #c8def5;text-align:center}.stat-grid>div:last-child{border:0}.stat-grid strong{display:block;color:var(--brand-blue);font-size:clamp(30px,4vw,48px);font-weight:700;letter-spacing:-.03em}.stat-grid p{margin:8px 0 0;color:#315575;font-size:13px}.data-note{max-width:900px;margin:24px auto 0;color:#67819a;font-size:11px;text-align:center}.need-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}.need-card{display:flex;min-height:280px;padding:28px;flex-direction:column;border:1px solid var(--border);border-radius:16px;background:#fff;box-shadow:var(--shadow-card);transition:.25s}.need-card:hover{border-color:#b9d7fa;box-shadow:var(--shadow-hover);transform:translateY(-3px)}.need-card h3{margin:12px 0 14px;font-size:27px}.need-card p{color:var(--text-secondary)}.need-card>strong{margin-top:auto;color:var(--brand-blue);font-size:13px}.learning-map{display:grid;grid-template-columns:.9fr 1.1fr;gap:90px}.learning-map__copy{position:sticky;top:120px;align-self:start}.learning-map__copy .button{margin-top:30px}.learning-map__steps article{padding:26px 0;border-bottom:1px solid var(--divider)}.learning-map__steps h3{margin:0 0 8px;font-size:24px}.learning-map__steps p{margin:0;color:var(--text-secondary)}.teacher-section{background:#eaf4ff}.teacher-layout{display:grid;grid-template-columns:1fr .9fr;gap:80px;align-items:center}.teacher-layout h2{margin-bottom:22px;font-size:clamp(38px,4.6vw,60px);letter-spacing:-.04em}.teacher-layout h2 em{color:var(--brand-blue);font-style:normal}.teacher-layout>div>p{color:var(--text-secondary);font-size:17px}.teacher-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:26px}.teacher-tags span{padding:7px 11px;border:1px solid #bfd8f3;border-radius:6px;color:#315575;background:#fff;font-size:12px}.teacher-ledger{padding:26px;border:1px solid #c8def5;border-radius:18px;background:#fff;color:var(--text-primary);box-shadow:var(--shadow-card)}.ledger-head{padding-bottom:20px;border-bottom:2px solid var(--brand-blue)}.teacher-ledger>div:not(:first-child){padding:16px 0;border-bottom:1px solid var(--divider)}.feedback-layout{display:grid;grid-template-columns:1fr 1fr;gap:90px;align-items:center}.feedback-board{overflow:hidden;border:1px solid #cfe3fb;border-radius:16px;background:#fff;box-shadow:var(--shadow-card)}.feedback-board__head{display:flex;align-items:center;justify-content:space-between;padding:20px 24px;color:#fff;background:#4f94d4}.feedback-board__head span{font-size:12px}.feedback-score{display:flex;align-items:center;justify-content:space-between;padding:18px 24px;border-bottom:1px solid var(--divider)}.feedback-score strong{color:var(--brand-blue)}.feedback-board ul{margin:0;padding:8px 24px 20px;list-style:none}.feedback-board li{padding:16px 0;border-bottom:1px solid var(--divider)}.feedback-board li:last-child{border:0}.feedback-board li p{margin:4px 0 0;color:var(--text-secondary);font-size:13px}.feedback-points{display:flex;flex-wrap:wrap;gap:9px;margin-top:26px}.feedback-points span{padding:8px 12px;border:1px solid #cfe3fb;border-radius:8px;background:#fff;color:var(--brand-blue-dark);font-size:12px;font-weight:750}.faq-preview,.faq-layout{display:grid;grid-template-columns:.65fr 1.35fr;gap:80px}.faq-preview>div:first-child{position:sticky;top:110px;align-self:start}.faq-list details{border-bottom:1px solid var(--border)}.faq-list summary{display:grid;grid-template-columns:1fr 24px;gap:14px;align-items:center;padding:23px 0;cursor:pointer;list-style:none}.faq-list summary>strong{font-size:17px}.faq-list summary>i{position:relative;width:18px;height:18px}.faq-list summary>i::before,.faq-list summary>i::after{position:absolute;top:8px;left:3px;width:12px;height:2px;content:"";background:var(--brand-blue)}.faq-list summary>i::after{transform:rotate(90deg);transition:.2s}.faq-list details[open] summary>i::after{transform:none}.faq-list details>div{padding:0 38px 20px 0;color:var(--text-secondary)}
.page-hero{min-height:430px;padding:92px 0 78px;background:var(--bg-blue-soft)}.page-hero__inner{max-width:930px}.breadcrumb{margin-bottom:34px;color:var(--text-muted);font-size:12px}.breadcrumb a:hover{color:var(--brand-blue)}.page-hero h1{margin-bottom:24px;font-size:clamp(45px,6vw,72px);line-height:1.12;letter-spacing:-.055em}.page-hero p{max-width:760px;margin:0;color:var(--text-secondary);font-size:18px}.anchor-nav{position:sticky;z-index:20;top:76px;border-block:1px solid var(--border);background:rgba(255,255,255,.96)}.anchor-nav .container{display:grid;grid-template-columns:repeat(4,1fr)}.anchor-nav a{padding:18px;border-right:1px solid var(--border);color:var(--text-secondary);font-size:13px;text-align:center}.anchor-nav a span{margin-right:8px;color:var(--brand-blue)}.service-list{display:grid;gap:18px}.service-detail{scroll-margin-top:150px;border:1px solid var(--border);border-radius:16px;background:#fff}.service-detail__content{display:grid;grid-template-columns:.85fr 1.15fr;gap:60px;padding:46px}.service-detail__summary h2{margin-bottom:16px;font-size:40px}.service-detail__summary .lead{color:var(--text-secondary);font-size:17px}.service-detail__delivery ul{margin:0 0 24px;padding:0;list-style:none}.service-detail__delivery li{display:flex;gap:12px;padding:12px 0;border-bottom:1px solid var(--divider);color:var(--text-secondary)}.service-detail__delivery li span{color:var(--brand-blue);font-weight:900}.capability-pills{display:flex;flex-wrap:wrap;gap:8px}.capability-pills span{padding:7px 11px;border-radius:6px;background:var(--bg-blue-soft);color:var(--brand-blue);font-size:12px}.stage-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:45px}.stage-grid article{padding:32px;border-top:4px solid var(--brand-accent);background:var(--bg-blue-soft)}.stage-grid span{color:var(--brand-blue);font-size:12px}.stage-grid h3{margin:18px 0 9px;font-size:32px}.stage-grid p{margin:0;color:var(--text-secondary)}
.service-hero{padding:86px 0;background:#fff}.service-hero__inner{display:grid;grid-template-columns:1fr .85fr;gap:75px;align-items:center}.service-hero h1{font-size:clamp(44px,5vw,68px);letter-spacing:-.04em}.service-hero h1 em{display:block;margin-top:16px;color:var(--text-secondary);font-size:18px;font-style:normal;font-weight:400;letter-spacing:0;line-height:1.7}.plan-sheet{padding:26px;border:1px solid var(--border);border-radius:16px;background:var(--bg-blue-soft);box-shadow:var(--shadow-card)}.plan-sheet>div:first-child{padding-bottom:18px;border-bottom:2px solid var(--brand-blue)}.plan-sheet article{padding:14px 0;border-bottom:1px solid var(--border)}.plan-sheet article small{color:var(--brand-blue)}.plan-sheet article p{margin:2px 0 0}.plan-sheet>p{margin:15px 0 0;color:var(--text-muted);font-size:10px}.service-cap-layout{display:grid;grid-template-columns:.8fr 1.2fr;gap:70px}.service-cap-layout>div:first-child>h2{font-size:43px}.service-cap-layout>div:first-child>p{color:var(--text-secondary)}.service-cap-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.service-cap-grid article{padding:25px;border:1px solid var(--border);border-radius:12px;background:#fff}.service-cap-grid h3{margin:0 0 9px}.service-cap-grid p{margin:0;color:var(--text-secondary)}.service-feature-layout{max-width:900px}.large-check-list{margin:0;padding:0;list-style:none}.large-check-list li{padding:22px 0;border-bottom:1px solid var(--divider)}.large-check-list p{margin:0;font-size:18px}.process-section,.delivery-section,.principle-section{color:#fff;background:#4f94d4}.process-grid,.method-flow{display:grid;grid-template-columns:repeat(4,1fr);margin-top:48px}.process-grid article{padding:25px;border-right:1px solid rgba(255,255,255,.24)}.process-grid h3{margin:0;font-size:23px}.related-services{background:var(--bg-blue-soft)}.related-services .container{display:grid;grid-template-columns:repeat(3,1fr)}.related-services a{padding:25px;border-right:1px solid var(--border);text-align:center}
.about-intro-layout{display:grid;grid-template-columns:.8fr 1.2fr;gap:90px}.story-column p{padding:0 0 26px;border-bottom:1px solid var(--divider);color:var(--text-secondary);font-size:17px}.advantage-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:45px}.advantage-grid article{padding:28px;border:1px solid var(--border);border-radius:14px;background:#fff}.advantage-grid h3{margin:0 0 10px;font-size:21px}.advantage-grid p{margin:0;color:var(--text-secondary)}.principle-layout{display:grid;grid-template-columns:.8fr 1.2fr;gap:90px}.principle-layout h2{font-size:46px}.principle-layout>div:first-child>p{color:#eef7ff}.principle-layout article{padding:19px 0;border-bottom:1px solid rgba(255,255,255,.24)}.principle-layout article h3{margin:0 0 6px}.principle-layout article p{margin:0;color:#eef7ff}.vision-section{background:var(--bg-accent-soft)}.vision-card{padding:58px;border:1px solid #cfe3fb;border-radius:18px;background:#fff}.vision-card blockquote{max-width:950px;margin:0 0 25px;font-size:clamp(28px,4vw,48px);font-weight:700;line-height:1.35}.vision-card p{margin:0;color:var(--text-secondary)}.method-flow article{padding:25px;border-right:1px solid var(--border)}.method-flow h2{margin:0 0 12px;font-size:26px}.method-flow p{color:var(--text-secondary)}.delivery-layout{display:grid;grid-template-columns:.7fr 1.3fr;gap:75px}.delivery-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.delivery-grid article{padding:25px;border:1px solid rgba(255,255,255,.25);border-radius:12px}.delivery-grid h3{margin:0 0 8px}.delivery-grid p{margin:0;color:#eef7ff}.principle-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:40px}.principle-grid article{padding:30px;border:1px solid var(--border);border-radius:14px;background:#fff}.principle-grid h3{margin:0 0 10px}.principle-grid p{margin:0;color:var(--text-secondary)}.faq-layout aside{position:sticky;top:120px;align-self:start}.faq-layout aside h2{font-size:38px}.faq-layout aside p{color:var(--text-secondary)}
.contact-hero{padding:95px 0;color:#fff;background:#4f94d4}.contact-hero__grid{display:grid;grid-template-columns:1fr auto;gap:60px;align-items:center}.contact-hero__grid>div:first-child{max-width:760px}.contact-hero h1{font-size:clamp(46px,6vw,72px);letter-spacing:-.04em}.contact-hero p{color:#eef7ff;font-size:18px}.contact-hours{display:grid;place-items:center;width:190px;aspect-ratio:1;border:1px solid rgba(255,255,255,.35);border-radius:50%}.contact-hours span{color:#fff;font-size:48px;font-weight:700}.contact-hours strong{margin-top:-35px}.contact-hours p{margin:-35px 0 0;font-size:13px}.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}.contact-grid article{min-height:250px;padding:30px;border:1px solid var(--border);border-radius:14px;background:#fff}.contact-grid h2{margin:0 0 15px}.contact-big-link{display:block;color:var(--brand-blue-dark);font-size:30px;font-weight:700}.contact-big-link--small{font-size:20px}.contact-grid article>p{margin-top:12px;color:var(--text-muted)}.visit-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:90px}.visit-grid h2{font-size:46px}.visit-grid>div>p{color:var(--text-secondary)}.visit-grid ol{margin:0;padding:0;list-style:none}.visit-grid li{padding:18px 0;border-bottom:1px solid var(--divider)}.visit-grid li p{margin:5px 0 0;color:var(--text-secondary)}.contact-bottom{padding:90px 0;color:#fff;background:#4f94d4;text-align:center}.contact-bottom h2{font-size:52px}.article-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.article-card{border:1px solid var(--border);border-radius:14px;background:#fff}.article-card>a{display:flex;min-height:300px;padding:26px;flex-direction:column}.article-card__meta{display:flex;justify-content:space-between;color:var(--text-muted);font-size:11px}.article-card__meta span{color:var(--brand-blue)}.article-card h2{margin-top:38px;font-size:21px}.article-card p{color:var(--text-secondary)}.article-card>a>strong{margin-top:auto;color:var(--brand-blue);font-size:12px}
.article-layout{display:grid;grid-template-columns:250px 1fr;gap:40px}.article-sidebar{align-self:start;padding:24px;border:1px solid var(--border);border-radius:12px;background:#fff}.article-sidebar h2{font-size:18px}.article-sidebar a{display:flex;justify-content:space-between;padding:8px 0;color:var(--text-secondary);font-size:13px}.article-sidebar a:hover,.article-sidebar a.is-active{color:var(--brand-blue)}.article-list-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.pagination{display:flex;justify-content:center;gap:8px;margin-top:40px}.pagination a,.pagination span{display:grid;place-items:center;width:38px;height:38px;border:1px solid var(--border);border-radius:6px;background:#fff}.pagination [aria-current=page]{color:#fff;background:var(--brand-blue)}.article-detail-head{padding:90px 0;color:#fff;background:#4f94d4}.article-detail-head__inner{max-width:960px}.article-detail-category{display:inline-block;margin-bottom:20px;padding:6px 10px;border-radius:5px;color:var(--text-primary);background:var(--brand-accent);font-size:11px}.article-detail-head h1{font-size:clamp(40px,5vw,64px)}.article-detail-head__inner>p{color:#eef7ff;font-size:18px}.article-detail-meta{display:flex;gap:20px;color:#e5f3ff;font-size:12px}.article-detail-layout{display:grid;grid-template-columns:220px minmax(0,760px);justify-content:center;gap:70px;padding:70px 0}.article-detail-layout aside{color:var(--text-muted);font-size:13px}.article-detail-layout aside a{color:var(--brand-blue);font-weight:750}.article-prose{font-size:17px}.article-prose h2{margin-top:45px;font-size:30px}.article-prose h3{margin-top:30px}.article-prose p,.article-prose li{color:var(--text-secondary)}.article-prose img{border-radius:12px}.article-prose a{color:var(--brand-blue);text-decoration:underline}.article-prose blockquote{margin:25px 0;padding:20px;border-left:4px solid var(--brand-accent);background:var(--bg-accent-soft)}
.cta-band{padding:78px 0;color:#fff;background:var(--brand-blue)}.cta-band__inner{display:flex;align-items:center;justify-content:space-between;gap:60px}.cta-band h2{margin-bottom:14px;font-size:clamp(34px,4vw,52px)}.cta-band p{max-width:720px;margin:0;color:#edf7ff}.cta-band__actions{display:flex;align-items:center;gap:22px;flex-shrink:0}.site-footer{padding:70px 0 0;color:#e4f2ff;background:#4f94d4}.footer-grid{display:grid;grid-template-columns:1.4fr .7fr .8fr 1fr;gap:50px}.footer-logo{display:block;width:150px;height:74px;overflow:hidden;border-radius:4px}.footer-logo img{width:100%;height:100%;object-fit:cover}.footer-brand>p{max-width:330px;margin-top:18px}.footer-tags{display:flex;gap:7px}.footer-tags span{padding:5px 9px;border:1px solid rgba(255,255,255,.3);border-radius:5px;font-size:11px}.footer-grid h2{margin:0 0 18px;color:#fff;font-size:15px}.footer-grid>div:not(:first-child)>a{display:block;margin:9px 0;color:#eef7ff;font-size:13px}.footer-grid a:hover{color:#fff}.footer-phone{color:#fff!important;font-size:23px!important;font-weight:700}.footer-contact p{font-size:12px}.footer-arrow{margin-top:22px!important;color:#fff!important}.footer-bottom{display:flex;justify-content:space-between;gap:30px;margin-top:55px;padding:22px 0;border-top:1px solid rgba(255,255,255,.25);font-size:11px}.footer-bottom p{margin:0}.contact-dialog{width:min(920px,calc(100% - 32px));padding:0;border:0;border-radius:18px;background:transparent}.contact-dialog::backdrop{background:rgba(31,64,96,.55)}.contact-dialog__panel{position:relative;padding:38px;border:1px solid var(--border);border-radius:18px;background:#fff}.contact-dialog__close{position:absolute;top:14px;right:15px;width:38px;height:38px;border:0;border-radius:50%;background:var(--bg-blue-soft);font-size:24px;cursor:pointer}.contact-dialog__heading{max-width:640px}.contact-dialog__heading h2{margin-bottom:10px;font-size:36px}.contact-dialog__heading p{color:var(--text-secondary)}.contact-dialog__grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:28px}.contact-dialog__grid article{padding:22px;border:1px solid var(--border);border-radius:12px;background:var(--bg-blue-soft)}.contact-dialog__grid h3{margin:0 0 8px}.contact-dialog__grid p{margin:6px 0 0;color:var(--text-muted);font-size:12px}.contact-dialog__primary{color:var(--brand-blue-dark);font-size:21px;font-weight:700}.contact-dialog__email,.contact-dialog__website{font-size:15px}.not-found{display:grid;place-items:center;min-height:70vh;padding:80px 0;background:var(--bg-blue-soft);text-align:center}.not-found>div>span{display:block;color:var(--brand-blue);font-size:100px;font-weight:700}
@media(max-width:1080px){.desktop-nav,.header-cta{display:none}.mobile-nav{display:block}.mobile-nav[open]>nav{position:absolute;top:76px;right:0;left:0;max-height:calc(100vh - 76px);padding:20px 24px 28px;overflow:auto;border-bottom:1px solid var(--border);background:#fff;box-shadow:var(--shadow-hover)}.mobile-nav__group{padding:12px 0;border-bottom:1px solid var(--divider)}.mobile-nav__primary{font-weight:800}.mobile-subnav{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}.mobile-subnav a{padding:5px 8px;border-radius:5px;background:var(--bg-blue-soft);font-size:12px}.mobile-nav nav>.button{width:100%;margin-top:18px}.brand{margin-right:auto}.home-hero__grid{gap:25px}.need-grid{grid-template-columns:1fr 1fr}.teacher-layout,.feedback-layout{gap:50px}.footer-grid{grid-template-columns:1.2fr 1fr 1fr}.footer-contact{grid-column:2/4}}
@media(max-width:760px){.container{width:min(calc(100% - 32px),var(--container))}.section-pad{padding:72px 0}.section-intro-row{display:block;margin-bottom:34px}.section-intro-row>.text-link{display:inline-block;margin-top:18px}.section-heading h2{font-size:36px}.home-hero{padding-top:38px}.home-hero__grid,.learning-map,.teacher-layout,.feedback-layout,.faq-preview,.faq-layout,.service-hero__inner,.service-cap-layout,.service-feature-layout,.about-intro-layout,.principle-layout,.delivery-layout,.contact-hero__grid,.visit-grid{grid-template-columns:1fr;gap:40px}.home-hero h1{font-size:45px}.home-hero__copy>p{font-size:16px}.home-hero__visual{margin-top:10px}.hero-note--top{top:10px;left:-8px}.hero-note--bottom{right:-5px;bottom:12px}.stage-ruler{gap:10px;font-size:11px}.stat-grid{grid-template-columns:1fr 1fr;row-gap:28px}.stat-grid>div:nth-child(2){border:0}.stat-grid strong{font-size:34px}.need-grid,.service-cap-grid,.stage-grid,.advantage-grid,.delivery-grid,.principle-grid,.article-grid,.article-list-grid,.contact-grid,.contact-dialog__grid{grid-template-columns:1fr}.need-card{min-height:260px}.need-card h3{margin-top:35px}.learning-map__copy,.faq-preview>div:first-child,.faq-layout aside{position:static}.teacher-layout h2{font-size:40px}.feedback-layout .feedback-board{order:2}.faq-list details>div{padding-left:0}.page-hero{min-height:auto;padding:68px 0}.page-hero h1{font-size:43px}.anchor-nav{top:76px;overflow:auto}.anchor-nav .container{width:max-content;grid-template-columns:repeat(4,150px)}.service-detail__content{grid-template-columns:1fr;gap:25px;padding:28px}.service-hero{padding:62px 0}.service-feature-layout{grid-template-columns:1fr}.service-symbol{max-width:260px;margin:auto}.process-grid,.method-flow{grid-template-columns:1fr 1fr}.process-grid article,.method-flow article{border-bottom:1px solid rgba(255,255,255,.18)}.related-services .container{display:block}.related-services a{border-bottom:1px solid var(--border)}.principle-layout h2,.visit-grid h2{font-size:38px}.contact-hours{display:none}.contact-grid article{min-height:auto}.contact-big-link{font-size:25px}.article-layout,.article-detail-layout{grid-template-columns:1fr}.article-sidebar{display:none}.article-detail-layout{padding:48px 16px}.cta-band__inner,.cta-band__actions{align-items:flex-start;flex-direction:column}.footer-grid{grid-template-columns:1fr 1fr}.footer-brand{grid-column:1/3}.footer-contact{grid-column:1/3}.footer-bottom{flex-direction:column}.contact-dialog__panel{padding:26px 20px}.contact-dialog__heading h2{font-size:29px}}
@media(max-width:760px){.container{width:min(calc(100% - 32px),var(--container))}.section-pad{padding:72px 0}.section-intro-row{display:block;margin-bottom:34px}.section-intro-row>.text-link{display:inline-block;margin-top:18px}.section-heading h2{font-size:36px}.home-hero{padding-top:38px}.home-hero__grid,.learning-map,.teacher-layout,.feedback-layout,.faq-preview,.faq-layout,.service-hero__inner,.service-cap-layout,.service-feature-layout,.about-intro-layout,.principle-layout,.delivery-layout,.contact-hero__grid,.visit-grid{grid-template-columns:1fr;gap:40px}.home-hero h1{font-size:45px}.home-hero__copy>p{font-size:16px}.home-hero__visual{margin-top:10px;margin-left:0}.stage-ruler{gap:10px;font-size:11px}.stat-grid{grid-template-columns:1fr 1fr;row-gap:28px}.stat-grid>div:nth-child(2){border:0}.stat-grid strong{font-size:34px}.need-grid,.service-cap-grid,.stage-grid,.advantage-grid,.delivery-grid,.principle-grid,.article-grid,.article-list-grid,.contact-grid,.contact-dialog__grid{grid-template-columns:1fr}.need-card{min-height:260px}.need-card h3{margin-top:0}.learning-map__copy,.faq-preview>div:first-child,.faq-layout aside{position:static}.teacher-layout h2{font-size:40px}.feedback-layout .feedback-board{order:2}.faq-list details>div{padding-left:0}.page-hero{min-height:auto;padding:68px 0}.page-hero h1{font-size:43px}.anchor-nav{top:76px;overflow:auto}.anchor-nav .container{width:max-content;grid-template-columns:repeat(4,150px)}.service-detail__content{grid-template-columns:1fr;gap:25px;padding:28px}.service-hero{padding:62px 0}.process-grid,.method-flow{grid-template-columns:1fr 1fr}.process-grid article,.method-flow article{border-bottom:1px solid rgba(255,255,255,.24)}.related-services .container{display:block}.related-services a{border-bottom:1px solid var(--border)}.principle-layout h2,.visit-grid h2{font-size:38px}.contact-hours{display:none}.contact-grid article{min-height:auto}.contact-big-link{font-size:25px}.article-layout,.article-detail-layout{grid-template-columns:1fr}.article-sidebar{display:none}.article-detail-layout{padding:48px 16px}.cta-band__inner,.cta-band__actions{align-items:flex-start;flex-direction:column}.footer-grid{grid-template-columns:1fr 1fr}.footer-brand{grid-column:1/3}.footer-contact{grid-column:1/3}.footer-bottom{flex-direction:column}.contact-dialog__panel{padding:26px 20px}.contact-dialog__heading h2{font-size:29px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}[data-reveal]{opacity:1;transform:none}}
@media print{.site-header,.site-footer,.cta-band,.mobile-nav{display:none}[data-reveal]{opacity:1;transform:none}}
.image-frame{aspect-ratio:1.22}.image-frame img{height:100%;aspect-ratio:auto}.article-tabs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:32px}.article-tab{display:flex;align-items:center;gap:8px;padding:8px 13px;border:1px solid var(--border);border-radius:7px;background:#fff;color:var(--text-secondary);font-size:13px}.article-tab span{color:var(--text-muted);font-size:11px}.article-tab:hover,.article-tab.active{border-color:var(--brand-blue);color:var(--brand-blue)}.article-tab.active{background:var(--brand-yellow-soft)}.article-empty{padding:60px;border:1px dashed var(--border);background:#fff;color:var(--text-muted);text-align:center}.article-pagination{display:flex;justify-content:center;gap:7px;margin-top:36px}.article-pagination>a,.article-pagination>span{display:grid;place-items:center;width:38px;height:38px;border:1px solid var(--border);border-radius:6px;background:#fff}.article-pagination .active{border-color:var(--brand-blue);color:#fff;background:var(--brand-blue)}
.brand{display:flex;width:108px;height:68px;align-items:center;overflow:visible}.brand img{width:100%;height:auto;max-height:66px;object-fit:contain}.footer-logo{display:flex;width:148px;height:100px;align-items:center;overflow:visible;border-radius:0}.footer-logo img{width:100%;height:auto;max-height:96px;object-fit:contain}
.image-frame{aspect-ratio:1.22}.image-frame img{height:100%;aspect-ratio:auto}.article-tabs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:32px}.article-tab{display:flex;align-items:center;gap:8px;padding:8px 13px;border:1px solid var(--border);border-radius:7px;background:#fff;color:var(--text-secondary);font-size:13px}.article-tab span{color:var(--text-muted);font-size:11px}.article-tab:hover,.article-tab.active{border-color:var(--brand-blue);color:var(--brand-blue)}.article-tab.active{background:var(--brand-accent-soft)}.article-empty{padding:60px;border:1px dashed var(--border);background:#fff;color:var(--text-muted);text-align:center}.article-pagination{display:flex;justify-content:center;gap:7px;margin-top:36px}.article-pagination>a,.article-pagination>span{display:grid;place-items:center;width:38px;height:38px;border:1px solid var(--border);border-radius:6px;background:#fff}.article-pagination .active{border-color:var(--brand-blue);color:#fff;background:var(--brand-blue)}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment