:root { --ink:#1c2420; --paper:#f5f2ea; --sand:#e7dfd1; --moss:#5d7055; --orange:#dd6b37; --line:rgba(28,36,32,.16); }
.article-body::before { content:""; display:block; width:100%; aspect-ratio:16/9; margin:0 0 2.5rem; background:linear-gradient(180deg,rgba(25,35,29,.05),rgba(25,35,29,.28)),url("https://images.unsplash.com/photo-1455390582262-044cdead277a?auto=format&fit=crop&w=1400&q=85") center/cover no-repeat; }
.article-body::after { content:"配图：书写与练习场景"; display:block; margin-top:-2rem; margin-bottom:2rem; color:#687069; font-size:.78rem; }
* { box-sizing:border-box; } html { scroll-behavior:smooth; } body { margin:0; color:var(--ink); background:var(--paper); font-family:"Noto Sans SC","PingFang SC",system-ui,sans-serif; line-height:1.65; } a { color:inherit; text-decoration:none; } .skip-link { position:absolute; left:-999px; } .skip-link:focus { left:1rem; top:1rem; z-index:10; padding:.5rem 1rem; background:#fff; }
.site-header { min-height:82px; padding:0 6vw; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line); background:rgba(245,242,234,.94); position:sticky; top:0; z-index:5; backdrop-filter:blur(9px); } .brand { display:flex; align-items:center; gap:.65rem; font-size:1.05rem; font-weight:700; letter-spacing:.1em; } .brand-mark { display:grid; place-items:center; width:34px; height:34px; background:var(--ink); color:var(--paper); font-family:serif; font-size:1.25rem; } .brand small { display:block; margin-top:-.25rem; font-size:.48rem; font-weight:500; letter-spacing:.18em; } .main-nav { display:flex; align-items:center; gap:1.75rem; font-size:.9rem; } .main-nav a:hover { color:var(--orange); } .nav-cta { padding:.55rem .9rem; border:1px solid var(--ink); } .menu-toggle { display:none; border:0; background:transparent; font:inherit; }
.hero { min-height:670px; padding:7rem 10vw 5rem; display:grid; grid-template-columns:1.1fr .9fr; gap:4rem; align-items:center; background:linear-gradient(108deg,#f5f2ea 0%,#f5f2ea 58%,#e6dccb 58%); overflow:hidden; } .eyebrow { margin:0 0: 1rem; color:var(--moss); font-size:.7rem; font-weight:700; letter-spacing:.18em; } h1,h2,h3,p { margin-top:0; } h1,h2,h3 { font-family:"Songti SC","STSong",serif; line-height:1.15; } h1 { margin-bottom:1.5rem; max-width:680px; font-size:clamp(3rem,6vw,5.6rem); font-weight:500; letter-spacing:.04em; } h1 em { color:var(--orange); font-style:normal; white-space:nowrap; } .hero-text { max-width:540px; font-size:1.04rem; color:#4e554f; } .hero-actions { display:flex; gap:1.5rem; align-items:center; margin:2rem 0 3rem; } .button { display:inline-block; padding:.8rem 1.25rem; font-size:.9rem; font-weight:700; } .button-primary { background:var(--ink); color:#fff; } .button-primary:hover { background:var(--orange); } .button-text span { margin-left:.4rem; } .hero-points { display:flex; padding:0; margin:0; list-style:none; gap:1.5rem; font-size:.8rem; } .hero-points li::before { content:"●"; color:var(--orange); margin-right:.35rem; font-size:.65rem; }
.hero-art { position:relative; min-height:410px; display:grid; place-items:center; } .paper { position:relative; width:min(330px,75vw); height:390px; padding:4rem 2rem; color:var(--ink); background:#fbfaf6; box-shadow:20px 22px 0 rgba(28,36,32,.12); transform:rotate(5deg); font-family:"Kaiti SC","STKaiti",cursive; } .paper span,.paper i { display:block; font-size:2rem; } .paper strong { display:block; margin:.25rem 0; font-size:3.1rem; font-weight:400; white-space:nowrap; } .paper i { margin-left:4rem; font-style:normal; } .stroke { position:absolute; height:4px; background:var(--orange); border-radius:100%; } .stroke-one { width:150px; left:3.5rem; top:15.5rem; transform:rotate(-8deg); } .stroke-two { width:95px; right:2.8rem; bottom:6.8rem; transform:rotate(44deg); } .hero-art > p { position:absolute; right:-1.4rem; bottom:0; margin:0; color:var(--moss); font-family:"Kaiti SC",serif; font-size:1.1rem; transform:rotate(-6deg); }
.section { padding:7rem 10vw; } .section-heading { max-width:560px; } h2 { margin-bottom:1.5rem; font-size:clamp(2.3rem,4vw,4rem); font-weight:500; letter-spacing:.04em; } .section-intro { color:#58615b; } .service-grid { display:grid; grid-template-columns:repeat(3,1fr); margin-top:3.5rem; border-top:1px solid var(--line); } .service-card { min-height:290px; padding:2rem 2rem 1rem 0; border-bottom:1px solid var(--line); } .service-card + .service-card { padding-left:2rem; border-left:1px solid var(--line); } .service-card.feature { background:var(--ink); color:#fff; padding-right:2rem; } .card-number { color:var(--orange); font-size:.8rem; font-weight:700; } .service-card h3 { margin:2.4rem 0 1rem; font-size:1.75rem; font-weight:500; } .service-card p { max-width:290px; font-size:.92rem; color:#677069; } .service-card.feature p { color:#d9dfd5; } .service-card a { font-size:.85rem; font-weight:700; } .service-card a:hover { color:var(--orange); }
.cases { background:var(--ink); color:#f7f4ee; } .cases .eyebrow { color:#bccbb1; } .case-grid { display:grid; grid-template-columns:1.1fr .9fr; grid-template-rows:220px 220px; gap:1rem; margin-top:3rem; } .case-card { position:relative; padding:1.6rem; overflow:hidden; background:#4e6053 center/cover no-repeat; display:flex; flex-direction:column; justify-content:flex-end; } .case-card:first-child { grid-row:span 2; } .case-card::before { content:""; position:absolute; inset:0; z-index:0; background:linear-gradient(180deg,rgba(20,28,24,.22) 0%,rgba(20,28,24,.78) 100%); } .case-a { background-image:url("https://images.unsplash.com/photo-1455390582262-044cdead277a?auto=format&fit=crop&w=1300&q=85"); } .case-b { background-image:url("https://images.unsplash.com/photo-1521737711867-e3b97375f902?auto=format&fit=crop&w=1200&q=85"); } .case-c { background-image:url("https://images.unsplash.com/photo-1450101499163-c8848c66ca85?auto=format&fit=crop&w=1200&q=85"); } .case-card p,.case-card h3,.case-card span { position:relative; z-index:1; } .case-card p { margin-bottom:auto; font-size:.68rem; letter-spacing:.13em; } .case-card h3 { margin-bottom:.3rem; font-size:clamp(1.35rem,2.5vw,2.2rem); font-weight:500; } .case-card span { font-size:.8rem; opacity:.85; }
.insights { display:grid; grid-template-columns:.8fr 1.2fr; gap:5rem; align-items:end; } .daily-card { padding:2.5rem; background:#e3d6c2; border-left:5px solid var(--orange); } .daily-date { color:var(--moss); font-size:.78rem; font-weight:700; letter-spacing:.08em; } .daily-card h3 { font-size:2rem; font-weight:500; } .daily-card > p:not(.daily-date) { font-size:1.05rem; } .daily-card a { font-size:.85rem; font-weight:700; }
.about { display:grid; grid-template-columns:1fr 1fr; gap:6rem; border-top:1px solid var(--line); } .about-copy { padding-top:3.2rem; color:#4e554f; font-size:1.03rem; } .about-copy p + p { color:var(--moss); font-family:"Songti SC",serif; font-size:1.35rem; }
.contact { padding:5rem 10vw; display:grid; grid-template-columns:1fr 1fr; gap:4rem; background:var(--orange); color:#fff; } .contact .eyebrow { color:#f9d5bb; } .contact h2 { margin:0; } .contact-details { display:flex; flex-direction:column; align-items:flex-start; gap:.4rem; font-size:1.25rem; } .contact-details p { margin:.4rem 0 1rem; font-size:.9rem; } .button-light { margin-top:.5rem; border:1px solid #fff; font-size:.85rem; } .button-light:hover { background:#fff; color:var(--orange); } .site-footer { padding:1.5rem 6vw; display:flex; justify-content:space-between; gap:1rem; color:#6c716c; font-size:.75rem; }
.news-hero { padding:6rem 10vw 4rem; border-bottom:1px solid var(--line); } .news-hero p:last-child { max-width:620px; color:#58615b; } .article-list { padding-top:3rem; padding-bottom:7rem; } .news-list { display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--line); border:1px solid var(--line); } .news-item { min-height:210px; padding:2rem; background:var(--paper); } .news-item:hover { background:#e9e2d6; } .news-item time { color:var(--moss); font-size:.75rem; font-weight:700; letter-spacing:.08em; } .news-item h2 { margin:1rem 0 .75rem; font-size:1.7rem; } .news-item p { margin:0; color:#5c635d; font-size:.92rem; } .article-hero { padding:5rem 10vw 3rem; background:#e7dfd1; } .article-hero .article-meta { color:var(--moss); font-size:.78rem; font-weight:700; letter-spacing:.08em; } .article-hero h1 { max-width:900px; margin:1rem 0 0; font-size:clamp(2.7rem,5vw,4.8rem); } .article-body { max-width:760px; padding-top:4rem; padding-bottom:5rem; font-size:1.05rem; } .article-body h2 { margin:2.6rem 0 1rem; font-size:2rem; } .article-body p { margin-bottom:1.25rem; } .article-body ul { margin:0 0 1.5rem; padding-left:1.3rem; } .article-body li { margin:.5rem 0; } .article-note { margin-top:2.5rem; padding:1.4rem 1.6rem; border-left:4px solid var(--orange); background:#ede6da; font-size:.95rem; }
@media (max-width:760px) { .site-header { min-height:67px; padding:0 5vw; } .menu-toggle { display:block; } .main-nav { display:none; position:absolute; left:0; top:67px; width:100%; padding:1rem 5vw 1.5rem; flex-direction:column; align-items:flex-start; gap:1rem; background:var(--paper); border-bottom:1px solid var(--line); } .main-nav.is-open { display:flex; } .hero { min-height:auto; padding:4.5rem 7vw 3rem; grid-template-columns:1fr; gap:2rem; background:var(--paper); } .hero-art { min-height:330px; } .hero-art > p { right:0; } .section { padding:4.5rem 7vw; } .service-grid,.insights,.about,.contact,.news-list { grid-template-columns:1fr; gap:2rem; } .service-card + .service-card { padding-left:0; border-left:0; } .service-card.feature { padding:2rem 1.25rem; margin:0 -1.25rem; } .case-grid { grid-template-columns:1fr; grid-template-rows:220px 180px 180px; } .case-card:first-child { grid-row:auto; } .about-copy { padding-top:0; } .contact { padding:4rem 7vw; } .article-hero { padding:4rem 7vw 2.5rem; } .article-body { padding-top:3rem; padding-bottom:4rem; } .site-footer { padding:1.2rem 7vw; flex-direction:column; } }