/* ============================================================ Write Chinese Characters — design system 4 selectable color themes via [data-theme] on ============================================================ */ /* ---------- Theme: Ink & Vermilion (signature) ---------- */ [data-theme="vermilion"]{ --bg:#FAF6EF; --bg-soft:#F3ECE0; --surface:#FFFFFF; --surface-2:#FDFBF6; --text:#211D18; --muted:#7A7266; --border:#E8E0D2; --border-strong:#D9CFBD; --accent:#C63F2E; --accent-strong:#A93022; --accent-soft:#FBEAE6; --on-accent:#FFFFFF; --grid:#E3AA9F; --grid-strong:#D4837A; --hero-glow:#FBEADF; --footer-bg:#211D18; --footer-ink:#EDE7DB; --shadow:0 1px 2px rgba(60,42,28,.05), 0 8px 24px rgba(60,42,28,.07); --shadow-lg:0 2px 4px rgba(60,42,28,.06), 0 24px 64px rgba(60,42,28,.14); } /* ---------- Theme: Jade Scholar ---------- */ [data-theme="jade"]{ --bg:#F5F8F5; --bg-soft:#EBF1EC; --surface:#FFFFFF; --surface-2:#FAFCFA; --text:#16241E; --muted:#68786F; --border:#DEE8E0; --border-strong:#C7D7CC; --accent:#177E6B; --accent-strong:#10614F; --accent-soft:#E3F2ED; --on-accent:#FFFFFF; --grid:#A3C9BC; --grid-strong:#7CB2A2; --hero-glow:#E7F3ED; --footer-bg:#12211C; --footer-ink:#E2ECE6; --shadow:0 1px 2px rgba(22,52,42,.05), 0 8px 24px rgba(22,52,42,.07); --shadow-lg:0 2px 4px rgba(22,52,42,.06), 0 24px 64px rgba(22,52,42,.14); } /* ---------- Theme: Modern Indigo ---------- */ [data-theme="indigo"]{ --bg:#F8FAFC; --bg-soft:#EEF2F7; --surface:#FFFFFF; --surface-2:#FCFDFF; --text:#0F1B2D; --muted:#5D6B81; --border:#E3E9F0; --border-strong:#CFD9E4; --accent:#4F46E5; --accent-strong:#4038CB; --accent-soft:#EBEDFD; --on-accent:#FFFFFF; --grid:#ACB7EA; --grid-strong:#8D9CDE; --hero-glow:#EAEDFE; --footer-bg:#0F172A; --footer-ink:#E2E8F0; --shadow:0 1px 2px rgba(23,32,64,.05), 0 8px 24px rgba(23,32,64,.07); --shadow-lg:0 2px 4px rgba(23,32,64,.06), 0 24px 64px rgba(23,32,64,.14); } /* ---------- Theme: Playful Plum ---------- */ [data-theme="plum"]{ --bg:#FAF7FB; --bg-soft:#F2EBF6; --surface:#FFFFFF; --surface-2:#FDFBFE; --text:#231830; --muted:#776A85; --border:#EAE1F0; --border-strong:#DCCFE8; --accent:#9333EA; --accent-strong:#7A27C9; --accent-soft:#F4EAFB; --on-accent:#FFFFFF; --grid:#CFA9E5; --grid-strong:#B98BD7; --hero-glow:#F5EAFD; --footer-bg:#241A2E; --footer-ink:#EBE2F2; --shadow:0 1px 2px rgba(52,32,72,.05), 0 8px 24px rgba(52,32,72,.07); --shadow-lg:0 2px 4px rgba(52,32,72,.06), 0 24px 64px rgba(52,32,72,.14); } /* ---------- Base tokens ---------- */ :root{ --font-ui:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif; --font-kai:'LXGW WenKai','Kaiti SC','STKaiti','KaiTi','AR PL UKai CN','Noto Serif CJK SC',serif; --font-song:'Noto Serif SC','Songti SC','SimSun','Noto Serif CJK SC',serif; --font-sans-cjk:'Noto Sans CJK SC','PingFang SC','Microsoft YaHei',sans-serif; --r-sm:8px; --r-md:12px; --r-lg:16px; --r-xl:24px; } *,*::before,*::after{box-sizing:border-box} html{scroll-behavior:smooth} body{ margin:0; background:var(--bg); color:var(--text); font-family:var(--font-ui); font-size:16px; line-height:1.6; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; transition:background .25s ease, color .25s ease; } img,svg{display:block} a{color:inherit; text-decoration:none} h1,h2,h3,h4{margin:0; font-weight:800; letter-spacing:-.02em; line-height:1.12} p{margin:0} button{font-family:inherit; cursor:pointer} .container{max-width:1120px; margin:0 auto; padding:0 24px} /* ---------- Buttons ---------- */ .btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; border:1px solid transparent; border-radius:12px; padding:11px 20px; font-size:15px; font-weight:600; line-height:1.2; white-space:nowrap; transition:transform .15s ease, box-shadow .15s ease, background .15s ease, border-color .15s; } .btn:active{transform:translateY(1px)} .btn-primary{background:var(--accent); color:var(--on-accent); box-shadow:0 2px 10px color-mix(in srgb, var(--accent) 35%, transparent)} .btn-primary:hover{background:var(--accent-strong); transform:translateY(-1px); box-shadow:0 6px 18px color-mix(in srgb, var(--accent) 40%, transparent)} .btn-secondary{background:var(--surface); color:var(--text); border-color:var(--border-strong)} .btn-secondary:hover{border-color:var(--muted); transform:translateY(-1px)} .btn-ghost{background:transparent; color:var(--muted)} .btn-ghost:hover{color:var(--text); background:var(--bg-soft)} .btn-sm{padding:8px 14px; font-size:14px; border-radius:10px} .btn-lg{padding:15px 28px; font-size:16.5px; border-radius:14px} /* ---------- Sections & typography ---------- */ .section{padding:88px 0} .section.tint{background:var(--bg-soft)} .eyebrow{ display:inline-flex; align-items:center; gap:8px; font-size:12.5px; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:var(--accent); } .eyebrow::before{content:""; width:18px; height:2px; background:var(--accent); border-radius:2px} .section h2{font-size:clamp(28px,3.6vw,40px); margin:14px 0 12px} .section .lede{color:var(--muted); font-size:17.5px; max-width:640px} .center{text-align:center} .center .lede{margin:0 auto} .center .eyebrow::after{content:""; width:18px; height:2px; background:var(--accent); border-radius:2px} /* ---------- Cards ---------- */ .card{ background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); box-shadow:var(--shadow); } .card-hover{transition:transform .18s ease, box-shadow .18s ease} .card-hover:hover{transform:translateY(-3px); box-shadow:var(--shadow-lg)} /* ---------- Chips / pills ---------- */ .chip{ display:inline-flex; align-items:center; gap:6px; padding:6px 12px; border-radius:99px; background:var(--surface); border:1px solid var(--border); font-size:13px; font-weight:600; color:var(--muted); box-shadow:var(--shadow); } .chip .dot{width:7px; height:7px; border-radius:50%; background:var(--accent)} /* ---------- Feature grid ---------- */ .feat-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:44px} .feat{padding:26px} .feat .icon{ width:44px; height:44px; border-radius:12px; background:var(--accent-soft); color:var(--accent); display:grid; place-items:center; margin-bottom:16px; } .feat .icon svg{width:22px; height:22px} .feat h3{font-size:17px; margin-bottom:6px} .feat p{color:var(--muted); font-size:14.5px} .feat .tag{display:inline-block; margin-top:12px; font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--accent); background:var(--accent-soft); padding:3px 9px; border-radius:99px} /* ---------- Steps ---------- */ .steps{display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:44px} .step{padding:28px; position:relative} .step .num{ position:absolute; top:22px; right:24px; font-size:52px; font-weight:800; letter-spacing:-.04em; color:var(--accent-soft); line-height:1; } .step .k{font-size:12px; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:var(--accent); margin-bottom:10px} .step h3{font-size:19px; margin-bottom:8px} .step p{color:var(--muted); font-size:15px} /* ---------- Testimonials ---------- */ .quotes{display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:44px} .quote{padding:26px} .quote .stars{color:var(--accent); letter-spacing:2px; font-size:14px; margin-bottom:12px} .quote p{font-size:15px; line-height:1.65} .quote .who{display:flex; align-items:center; gap:12px; margin-top:18px} .avatar{ width:40px; height:40px; border-radius:50%; background:var(--accent-soft); color:var(--accent); display:grid; place-items:center; font-weight:700; font-size:15px; } .quote .who b{display:block; font-size:14px} .quote .who span{font-size:13px; color:var(--muted)} /* ---------- FAQ ---------- */ .faq{max-width:720px; margin:44px auto 0; display:grid; gap:12px} .faq details{background:var(--surface); border:1px solid var(--border); border-radius:14px; padding:18px 22px; box-shadow:var(--shadow)} .faq summary{font-weight:700; font-size:15.5px; cursor:pointer; list-style:none; display:flex; justify-content:space-between; align-items:center; gap:16px} .faq summary::-webkit-details-marker{display:none} .faq summary::after{content:"+"; font-size:20px; font-weight:600; color:var(--accent); transition:transform .2s} .faq details[open] summary::after{transform:rotate(45deg)} .faq details p{margin-top:10px; color:var(--muted); font-size:14.5px} /* ---------- CTA band ---------- */ .cta-band{ border-radius:var(--r-xl); padding:56px 48px; text-align:center; position:relative; overflow:hidden; background:linear-gradient(135deg, var(--accent) 0%, var(--accent-strong) 100%); color:#fff; box-shadow:var(--shadow-lg); } .cta-band h2{color:#fff; font-size:clamp(26px,3.4vw,38px)} .cta-band p{opacity:.85; margin:12px auto 28px; max-width:520px; font-size:16.5px} .cta-band .btn-light{background:#fff; color:var(--accent-strong)} .cta-band .btn-light:hover{transform:translateY(-1px)} .cta-band .grid-deco{position:absolute; inset:0; opacity:.12; pointer-events:none} /* ---------- Footer ---------- */ footer{background:var(--footer-bg); color:var(--footer-ink); margin-top:88px} .foot-inner{padding:56px 24px 36px; max-width:1120px; margin:0 auto} .foot-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:32px} .foot-grid h4{font-size:13px; letter-spacing:.08em; text-transform:uppercase; opacity:.6; margin-bottom:14px} .foot-grid a{display:block; font-size:14px; opacity:.85; padding:4px 0} .foot-grid a:hover{opacity:1} .foot-brand p{opacity:.6; font-size:13.5px; margin-top:12px; max-width:260px} .foot-roadmap{margin-top:44px; padding-top:24px; border-top:1px solid rgba(255,255,255,.12); display:flex; align-items:center; gap:12px; flex-wrap:wrap; font-size:13px} .foot-roadmap .pill{border:1px solid rgba(255,255,255,.2); border-radius:99px; padding:5px 12px; font-weight:600; opacity:.85} .foot-legal{margin-top:22px; font-size:12.5px; opacity:.45} /* ---------- Theme switcher ---------- */ .theme-switch{ position:fixed; right:20px; bottom:20px; z-index:100; background:var(--surface); border:1px solid var(--border); border-radius:99px; box-shadow:var(--shadow-lg); padding:8px 12px; display:flex; align-items:center; gap:10px; } .theme-switch .label{font-size:11px; font-weight:700; letter-spacing:.07em; text-transform:uppercase; color:var(--muted)} .theme-switch .dots{display:flex; gap:6px} .theme-switch button{ width:22px; height:22px; border-radius:50%; border:2px solid transparent; padding:0; transition:transform .15s ease; } .theme-switch button:hover{transform:scale(1.15)} .theme-switch button.active{border-color:var(--text); box-shadow:0 0 0 2px var(--surface) inset} /* ---------- Toast ---------- */ .toast{ position:fixed; left:50%; bottom:88px; transform:translateX(-50%) translateY(16px); background:var(--text); color:var(--bg); font-size:14px; font-weight:600; padding:11px 18px; border-radius:12px; box-shadow:var(--shadow-lg); opacity:0; pointer-events:none; transition:all .25s ease; z-index:120; max-width:90vw; } .toast.show{opacity:1; transform:translateX(-50%) translateY(0)} /* ---------- Worksheet paper & preview ---------- */ .paper-wrap{background:var(--bg-soft); border:1px solid var(--border); border-radius:var(--r-xl); padding:36px; display:grid; place-items:center} .paper{ background:#fff; border-radius:6px; box-shadow:var(--shadow-lg); width:100%; max-width:640px; position:relative; } .paper svg{width:100%; height:auto} .paper img{width:100%; height:auto} .paper.tilt{transform:rotate(-1.6deg)} .hero-sheet{position:relative} .hero-sheet .chip{position:absolute; box-shadow:var(--shadow-lg)} .hero-sheet .chip.c1{top:-14px; left:-18px} .hero-sheet .chip.c2{bottom:26px; right:-16px} .hero-sheet .chip.c3{bottom:-20px; left:14px} /* ---------- Maker layout ---------- */ .maker{display:grid; grid-template-columns:380px minmax(0,1fr); gap:24px; align-items:start; padding:36px 0 72px} .panel{padding:24px} .panel-step{padding:20px 0; border-top:1px solid var(--border)} .panel-step:first-child{border-top:none; padding-top:4px} .panel-step .st-head{display:flex; align-items:center; gap:10px; margin-bottom:14px} .panel-step .st-num{ width:24px; height:24px; border-radius:8px; background:var(--accent); color:var(--on-accent); font-size:13px; font-weight:700; display:grid; place-items:center; flex:none; } .panel-step .st-head h3{font-size:15.5px} .panel-step .st-head .hint{font-size:12.5px; color:var(--muted); margin-left:auto} textarea.chars{ width:100%; min-height:84px; resize:vertical; border:1px solid var(--border-strong); border-radius:12px; padding:12px 14px; font-family:var(--font-kai); font-size:20px; line-height:1.7; color:var(--text); background:var(--surface-2); outline:none; transition:border-color .15s, box-shadow .15s; } textarea.chars:focus{border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft)} .field-meta{display:flex; justify-content:space-between; margin-top:8px; font-size:12.5px; color:var(--muted)} .quick-add{display:flex; gap:8px; flex-wrap:wrap; margin-top:10px} .quick-add button{ border:1px dashed var(--border-strong); background:transparent; color:var(--muted); font-size:12.5px; font-weight:600; padding:5px 11px; border-radius:99px; transition:all .15s; } .quick-add button:hover{border-color:var(--accent); color:var(--accent); background:var(--accent-soft)} .toggle-row{display:flex; align-items:center; justify-content:space-between; padding:9px 0; font-size:14.5px; font-weight:500} .toggle-row .sub{display:block; font-size:12.5px; color:var(--muted); font-weight:400} .switch{position:relative; width:40px; height:24px; flex:none} .switch input{position:absolute; opacity:0; inset:0; margin:0; cursor:pointer} .switch .track{position:absolute; inset:0; background:var(--border-strong); border-radius:99px; transition:background .18s} .switch .track::after{ content:""; position:absolute; top:3px; left:3px; width:18px; height:18px; border-radius:50%; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.25); transition:transform .18s; } .switch input:checked + .track{background:var(--accent)} .switch input:checked + .track::after{transform:translateX(16px)} .seg{display:flex; background:var(--bg-soft); border:1px solid var(--border); border-radius:11px; padding:3px; gap:2px} .seg button{ flex:1; border:none; background:transparent; border-radius:8px; padding:7px 6px; font-size:13px; font-weight:600; color:var(--muted); transition:all .15s; white-space:nowrap; } .seg button:hover{color:var(--text)} .seg button.active{background:var(--surface); color:var(--text); box-shadow:var(--shadow)} .mode-hint{font-size:12.5px; color:var(--muted); margin-top:8px} .grid-opts{display:grid; grid-template-columns:repeat(5,1fr); gap:8px} .grid-opt{ border:1.5px solid var(--border); background:var(--surface-2); border-radius:12px; padding:8px 4px 6px; display:flex; flex-direction:column; align-items:center; gap:5px; transition:all .15s; cursor:pointer; } .grid-opt span{font-size:11px; font-weight:600; color:var(--muted)} .grid-opt:hover{border-color:var(--border-strong)} .grid-opt.active{border-color:var(--accent); background:var(--accent-soft)} .grid-opt.active span{color:var(--accent)} .grid-opt svg{width:36px; height:36px} .font-opts{display:grid; grid-template-columns:repeat(3,1fr); gap:8px} .font-opt{ border:1.5px solid var(--border); background:var(--surface-2); border-radius:12px; padding:10px 6px; text-align:center; transition:all .15s; cursor:pointer; } .font-opt .zh{font-size:24px; line-height:1.2} .font-opt span{display:block; font-size:11.5px; font-weight:600; color:var(--muted); margin-top:3px} .font-opt.active{border-color:var(--accent); background:var(--accent-soft)} .font-opt.active span{color:var(--accent)} .slider-row{display:flex; align-items:center; gap:12px} .slider-row input[type=range]{flex:1; accent-color:var(--accent)} .slider-row .val{font-size:13px; font-weight:700; color:var(--accent); min-width:52px; text-align:right} .swatches{display:flex; gap:10px; align-items:center} .swatch{width:26px; height:26px; border-radius:50%; border:2px solid var(--surface); box-shadow:0 0 0 1.5px var(--border-strong); cursor:pointer; padding:0} .swatch.active{box-shadow:0 0 0 2px var(--accent)} .maker-preview .toolbar{ display:flex; align-items:center; gap:10px; margin-bottom:16px; flex-wrap:wrap; } .maker-preview .meta{font-size:13.5px; color:var(--muted); font-weight:500} .maker-preview .spacer{flex:1} .preview-note{margin-top:14px; font-size:13px; color:var(--muted); text-align:center} /* ---------- Pricing ---------- */ .bill-toggle{display:inline-flex; align-items:center; gap:8px; background:var(--surface); border:1px solid var(--border); border-radius:99px; padding:6px 14px 6px 8px; box-shadow:var(--shadow); margin-top:24px} .bill-toggle button{border:none; background:transparent; padding:8px 18px; border-radius:99px; font-size:14px; font-weight:600; color:var(--muted)} .bill-toggle button.active{background:var(--accent); color:var(--on-accent)} .bill-toggle .save{font-size:12px; font-weight:700; color:var(--accent)} .plans{display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:40px; align-items:stretch} .plan{padding:30px; display:flex; flex-direction:column; position:relative} .plan.pop{border-color:var(--accent); box-shadow:0 0 0 1.5px var(--accent), var(--shadow-lg)} .plan .pop-badge{ position:absolute; top:-13px; left:50%; transform:translateX(-50%); background:var(--accent); color:var(--on-accent); font-size:11.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; padding:5px 14px; border-radius:99px; } .plan h3{font-size:18px} .plan .for{font-size:13.5px; color:var(--muted); margin:4px 0 18px} .plan .price{font-size:44px; font-weight:800; letter-spacing:-.03em} .plan .price small{font-size:15px; font-weight:600; color:var(--muted); letter-spacing:0} .plan ul{list-style:none; margin:20px 0 26px; padding:0; display:grid; gap:10px; flex:1} .plan li{display:flex; gap:10px; font-size:14.5px; color:var(--muted)} .plan li svg{width:18px; height:18px; color:var(--accent); flex:none; margin-top:2px} .plan .btn{width:100%} /* ---------- Templates strip ---------- */ .tpl-row{display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:44px} .tpl{overflow:hidden} .tpl .thumb{background:var(--bg-soft); border-bottom:1px solid var(--border); padding:22px 24px; display:grid; place-items:center; min-height:296px} .tpl .thumb svg{width:100%; height:auto; background:#fff; border-radius:6px; box-shadow:var(--shadow)} .tpl .body{padding:18px 22px; display:flex; align-items:center; gap:12px} .tpl .body h3{font-size:15.5px; flex:1} .tpl .body span{font-size:12.5px; color:var(--muted); font-weight:600} /* ---------- Hero ---------- */ .hero{padding:84px 0 72px; position:relative; overflow:hidden} .hero::before{ content:""; position:absolute; top:-220px; right:-140px; width:640px; height:640px; border-radius:50%; background:radial-gradient(circle, var(--hero-glow) 0%, transparent 68%); pointer-events:none; } .hero-grid{display:grid; grid-template-columns:1.05fr .95fr; gap:56px; align-items:center; position:relative} .hero h1{font-size:clamp(38px,5vw,58px); letter-spacing:-.03em; line-height:1.06; margin:18px 0 20px; text-wrap:balance} .hero h1 .hl{color:var(--accent); position:relative; white-space:nowrap} .hero .sub{font-size:18px; color:var(--muted); max-width:520px; margin-bottom:30px} .hero .actions{display:flex; gap:12px; flex-wrap:wrap; margin-bottom:22px} .hero .assurance{display:flex; gap:18px; flex-wrap:wrap; font-size:13.5px; color:var(--muted); font-weight:500} .hero .assurance span{display:inline-flex; align-items:center; gap:7px} .hero .assurance svg{width:15px; height:15px; color:var(--accent)} .hero-stats{display:flex; gap:36px; margin-top:44px; padding-top:28px; border-top:1px solid var(--border)} .hero-stats b{display:block; font-size:24px; letter-spacing:-.02em} .hero-stats span{font-size:13px; color:var(--muted); font-weight:500} /* ---------- Logos / trust bar ---------- */ .trust{padding:26px 0; border-top:1px solid var(--border); border-bottom:1px solid var(--border); background:var(--surface)} .trust-inner{display:flex; align-items:center; gap:32px; justify-content:space-between; flex-wrap:wrap} .trust .cap{font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--muted)} .trust .names{display:flex; gap:28px; flex-wrap:wrap; font-weight:700; font-size:15px; color:var(--border-strong); letter-spacing:.02em} /* ---------- Page header (inner pages) ---------- */ .page-head{padding:52px 0 8px} .page-head h1{font-size:clamp(30px,4vw,44px); margin:14px 0 10px} .page-head .lede{color:var(--muted); font-size:17px; max-width:600px} /* ---------- Responsive ---------- */ @media (max-width:1000px){ .hero-grid{grid-template-columns:1fr; gap:44px} .feat-grid,.steps,.quotes,.tpl-row,.plans{grid-template-columns:1fr 1fr} .maker{grid-template-columns:1fr} .foot-grid{grid-template-columns:1fr 1fr} } @media (max-width:640px){ .feat-grid,.steps,.quotes,.tpl-row,.plans{grid-template-columns:1fr} .section{padding:60px 0} .hero{padding:56px 0} .hero-stats{gap:20px; flex-wrap:wrap} .btn-sm{padding:7px 11px; font-size:13px} }