公告2026-07-22 09:05
个人使用
* { box-sizing: border-box; letter-spacing: 0; }
body {
margin: 0;
padding: 0;
background: #f4f1ee;
color: #302d29;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
.page { width: 100%; overflow: hidden; }
.inner { width: calc(100% - 40px); max-width: 1080px; margin: 0 auto; }
.topbar { background: #fffdfb; border-bottom: 1px solid #e9dfd7; }
.topbar-inner { min-height: 66px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.brand { margin: 0; color: #322e2a; font-size: 15px; font-weight: 750; }
.brand strong { display: inline-block; margin-right: 10px; padding: 6px 8px; border-radius: 6px; background: #f4a276; color: #382017; }
.status { margin: 0; color: #5f756c; font-size: 12px; font-weight: 650; }
.status-mark { display: inline-block; width: 8px; height: 8px; margin-right: 7px; border-radius: 50%; background: #568570; box-shadow: 0 0 0 4px #e4eee9; }
.hero { background: #fff6ef; border-bottom: 1px solid #ebddd3; }
.hero-inner { min-height: 570px; display: flex; align-items: center; justify-content: space-between; gap: 72px; padding-top: 68px; padding-bottom: 72px; }
.hero-copy { max-width: 660px; }
.eyebrow { margin: 0 0 17px; color: #b65b31; font-size: 12px; line-height: 20px; font-weight: 800; }
h1 { margin: 0; max-width: 650px; color: #2e2b27; font-size: 58px; line-height: 1.1; font-weight: 780; }
.lead { margin: 24px 0 0; color: #615a54; font-size: 18px; line-height: 1.85; }
.hero-note { margin: 28px 0 0; padding-left: 14px; border-left: 3px solid #df8050; color: #766a62; font-size: 13px; line-height: 1.7; }
.relay-visual { position: relative; flex: 0 0 260px; width: 260px; height: 260px; }
.ring { position: absolute; left: 50%; top: 50%; border: 1px solid #eab596; border-radius: 50%; transform: translate(-50%, -50%); }
.ring-one { width: 230px; height: 230px; }
.ring-two { width: 168px; height: 168px; border-color: #d9a78c; }
.ring-three { width: 104px; height: 104px; background: #ffffff; border-color: #e18a5d; box-shadow: 0 14px 36px rgba(130, 73, 44, 0.13); }
.relay-core { position: absolute; left: 50%; top: 50%; width: 64px; height: 64px; margin: -32px 0 0 -32px; display: flex; align-items: center; justify-content: center; border-radius: 8px; background: #e88654; color: #ffffff; }
.relay-core p { margin: 0; font-size: 14px; font-weight: 800; }
.node { position: absolute; width: 12px; height: 12px; border: 3px solid #fff6ef; border-radius: 50%; background: #557d6d; box-shadow: 0 0 0 1px #8da99d; }
.node-one { left: 22px; top: 76px; }
.node-two { right: 14px; top: 112px; background: #df8050; box-shadow: 0 0 0 1px #df8050; }
.node-three { left: 98px; bottom: 8px; }
.node-four { right: 56px; top: 26px; background: #df8050; box-shadow: 0 0 0 1px #df8050; }
.summary { background: #ffffff; border-bottom: 1px solid #e8dfd8; }
.summary-inner { display: flex; min-height: 116px; align-items: stretch; }
.summary-item { flex: 1; padding: 26px 28px; border-right: 1px solid #eee6e0; }
.summary-item:last-child { border-right: 0; }
.summary-value { margin: 0; color: #a9532e; font-size: 22px; line-height: 1.3; font-weight: 760; }
.summary-label { margin: 7px 0 0; color: #7b746e; font-size: 12px; line-height: 1.5; }
.section { padding: 88px 0; background: #fffdfb; }
.section-alt { background: #f5f3f0; border-top: 1px solid #e8dfd8; border-bottom: 1px solid #e8dfd8; }
.section-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 60px; margin-bottom: 42px; }
.section-title-wrap { max-width: 500px; }
.kicker { margin: 0 0 10px; color: #b65b31; font-size: 12px; font-weight: 800; }
.section-title { margin: 0; color: #302d29; font-size: 36px; line-height: 1.25; font-weight: 760; }
.section-description { max-width: 500px; margin: 0; color: #726b65; font-size: 15px; line-height: 1.8; }
.principles { display: flex; gap: 18px; }
.principle { flex: 1; min-height: 218px; padding: 26px; background: #ffffff; border: 1px solid #e5dcd5; border-radius: 8px; }
.principle-index { margin: 0 0 30px; color: #b65b31; font-size: 12px; font-weight: 800; }
.principle-title { margin: 0 0 10px; color: #37332f; font-size: 19px; font-weight: 750; }
.principle-text { margin: 0; color: #746d67; font-size: 14px; line-height: 1.75; }
.steps { display: flex; gap: 0; border-top: 1px solid #d8cec7; }
.step { position: relative; flex: 1; padding: 30px 24px 0 0; }
.step-mark { position: absolute; left: 0; top: -5px; width: 9px; height: 9px; border-radius: 50%; background: #df8050; box-shadow: 0 0 0 5px #fff4ec; }
.step-index { margin: 0 0 17px; color: #a9532e; font-size: 11px; font-weight: 800; }
.step-title { margin: 0 0 8px; color: #38342f; font-size: 16px; font-weight: 750; }
.step-text { margin: 0; color: #756e68; font-size: 13px; line-height: 1.7; }
.about { display: flex; align-items: center; gap: 70px; }
.about-copy { flex: 1.1; }
.about-copy .section-title { max-width: 560px; }
.about-text { margin: 22px 0 0; color: #706963; font-size: 15px; line-height: 1.9; }
.console { flex: 0.9; padding: 24px; background: #2d2f2c; border-radius: 8px; box-shadow: 0 18px 44px rgba(31, 30, 27, 0.18); }
.console-head { display: flex; justify-content: space-between; padding-bottom: 15px; border-bottom: 1px solid #474b47; }
.console-head p { margin: 0; color: #aeb4af; font-family: Consolas, monospace; font-size: 11px; }
.console-line { margin: 17px 0 0; color: #d9ded9; font-family: Consolas, "Courier New", monospace; font-size: 13px; line-height: 1.8; }
.console-line strong { color: #efa279; font-weight: 650; }
.console-value { color: #91b49f; }
.questions { border-top: 1px solid #dfd6cf; }
.question { display: flex; gap: 40px; padding: 24px 0; border-bottom: 1px solid #e6ddd6; }
.question-title { flex: 0 0 260px; margin: 0; color: #393530; font-size: 15px; font-weight: 750; }
.question-answer { flex: 1; margin: 0; color: #746d67; font-size: 14px; line-height: 1.75; }
.contact { padding: 78px 0; background: #31322f; color: #f8f5f2; }
.contact-inner { display: flex; justify-content: space-between; align-items: center; gap: 60px; }
.contact-copy { max-width: 690px; }
.contact-title { margin: 0; color: #fffaf6; font-size: 34px; line-height: 1.3; font-weight: 760; }
.contact-text { margin: 14px 0 0; color: #c4c4be; font-size: 15px; line-height: 1.8; }
.contact-note { flex: 0 0 250px; padding: 17px 19px; background: #3d3f3b; border-left: 3px solid #ef9a6f; border-radius: 4px; color: #dddcd7; font-size: 13px; line-height: 1.7; }
.contact-note p { margin: 0; }
.contact-note-title { margin-bottom: 5px !important; color: #fff5ee; }
.footer { padding: 27px 0; background: #262724; }
.footer-inner { display: flex; justify-content: space-between; gap: 24px; }
.footer p { margin: 0; color: #9fa19c; font-size: 12px; }
@media (max-width: 860px) {
.hero-inner { gap: 38px; }
h1 { font-size: 46px; }
.relay-visual { flex-basis: 210px; width: 210px; height: 210px; }
.ring-one { width: 200px; height: 200px; }
.ring-two { width: 146px; height: 146px; }
.section-head, .about { display: block; }
.section-description { margin-top: 18px; }
.console { margin-top: 34px; }
.principles { flex-wrap: wrap; }
.principle { flex-basis: calc(50% - 9px); }
.steps { flex-wrap: wrap; row-gap: 36px; }
.step { flex-basis: 50%; }
}
@media (max-width: 620px) {
.inner { width: calc(100% - 28px); }
.topbar-inner { min-height: 60px; }
.brand { font-size: 13px; }
.hero-inner { min-height: 0; display: block; padding-top: 58px; padding-bottom: 58px; }
h1 { font-size: 40px; }
.lead { font-size: 16px; }
.relay-visual { width: 190px; height: 190px; margin: 44px auto 0; }
.ring-one { width: 184px; height: 184px; }
.ring-two { width: 136px; height: 136px; }
.summary-inner, .principles, .steps, .contact-inner, .footer-inner { display: block; }
.summary-item { border-right: 0; border-bottom: 1px solid #eee6e0; }
.summary-item:last-child { border-bottom: 0; }
.section { padding: 68px 0; }
.section-title { font-size: 30px; }
.principle { min-height: 0; margin-top: 12px; }
.principle:first-child { margin-top: 0; }
.step { padding-right: 0; margin-top: 34px; }
.step:first-child { margin-top: 0; }
.question { display: block; }
.question-title { margin-bottom: 10px; }
.contact { padding: 64px 0; }
.contact-title { font-size: 29px; }
.contact-note { margin-top: 28px; }
.footer p + p { margin-top: 8px; }
}
PR Personal Relay
自用服务正常运行
PERSONAL API RELAY · FOR BUILDERS
个人 API 中转站
最初只是为了让我自己的项目稳定跑起来。既然机器还有余量,也愿意分给真正需要的朋友,一起少走弯路,多聊技术。
非商业项目 · 自用优先 · 有余量时开放体验额度
API