Refine public site UI and privacy build

Author: NextWeb4

about.html

@@ -0,0 +1,114 @@
+* { margin:0; padding:0; box-sizing:border-box; }
+body {
+    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "SF Pro Display", "SF Pro Text", "Helvetica Neue", Arial, sans-serif;
+    color: #e5e5e7;
+    background-color: #1a1a1e;
+    line-height: 1.47059;
+    font-weight: 400;
+    letter-spacing: -0.022em;
+    padding: 0;
+    margin: 0;
+    min-height: 100vh;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    position: relative;
+    background-attachment: fixed;
+    background-size: cover;
+    background-position: center;
+    background-repeat: no-repeat;
+    transition: background-image 0.5s ease-in-out;
+}
+body::before {
+    content: '';
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0, 0, 0, 0.5);
+    backdrop-filter: blur(2px);
+    z-index: -1;
+    pointer-events: none;
+}
+.apple-blog {
+    max-width: 1200px;
+    width: 100%;
+    padding: 40px 24px 60px;
+    position: relative;
+    z-index: 1;
+}
+.blog-header { margin-bottom:30px; padding:0 12px; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; }
+.blog-header h1 { font-size:36px; font-weight:600; letter-spacing:-0.015em; line-height:1.2; color:#ffffff; margin-right:20px; flex:1 1 auto; text-shadow:0 2px 10px rgba(0,0,0,0.3); }
+.blog-header h1 .thin { font-weight:400; color:rgba(255,255,255,0.8); display:block; font-size:24px; margin-top:4px; }
+.search-wrapper { position:relative; max-width:320px; width:100%; flex-shrink:0; }
+.search-container { display:flex; align-items:center; background-color:rgba(60,60,70,0.3); backdrop-filter:blur(10px); border-radius:50px; padding:8px 18px; border:0.5px solid rgba(255,255,255,0.1); width:100%; transition:box-shadow 0.2s ease, background-color 0.2s ease; }
+.search-container:focus-within { box-shadow:0 0 0 4px rgba(10,132,255,0.3); background-color:rgba(80,80,90,0.4); }
+.search-icon { font-size:20px; color:rgba(255,255,255,0.8); margin-right:12px; cursor:pointer; }
+.search-input { flex:1; border:none; background:transparent; font-size:17px; font-weight:400; color:#ffffff; outline:none; font-family:inherit; min-width:150px; }
+.search-input::placeholder { color:rgba(255,255,255,0.5); }
+.clear-btn { font-size:18px; color:rgba(255,255,255,0.8); cursor:pointer; padding:0 6px; visibility:hidden; }
+.search-container.has-text .clear-btn { visibility:visible; }
+.clear-btn:hover { color:#ffffff; }
+.suggestions { position:absolute; top:100%; left:0; right:0; background:rgba(40,40,45,0.95); backdrop-filter:blur(20px); border-radius:20px; margin-top:8px; padding:8px 0; border:0.5px solid rgba(255,255,255,0.1); max-height:300px; overflow-y:auto; z-index:1000; display:none; box-shadow:0 10px 30px rgba(0,0,0,0.3); }
+.suggestion-item { padding:10px 18px; color:#e5e5e7; cursor:pointer; display:flex; justify-content:space-between; align-items:center; font-size:15px; transition:background 0.1s; }
+.suggestion-item:hover, .suggestion-item.selected { background:rgba(255,255,255,0.1); }
+.suggestion-item .suggestion-date { font-size:13px; color:rgba(255,255,255,0.5); margin-left:12px; white-space:nowrap; }
+.suggestion-main { min-width:0; display:flex; flex-direction:column; gap:3px; }
+.suggestion-title { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
+.suggestion-excerpt { max-width:420px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:12px; color:rgba(255,255,255,0.52); }
+.back-link { display:inline-flex; align-items:center; gap:8px; margin-bottom:20px; color:rgba(255,255,255,0.8); text-decoration:none; font-size:17px; background:rgba(60,60,70,0.3); backdrop-filter:blur(10px); padding:8px 18px; border-radius:40px; border:0.5px solid rgba(255,255,255,0.1); transition:background-color 0.2s; }
+.back-link:hover { background:rgba(80,80,90,0.4); }
+.article-layout { display:flex; gap:30px; align-items:flex-start; }
+.main-column { flex:2; min-width:0; }
+.side-column { flex:1; min-width:240px; background:rgba(40,40,45,0.3); backdrop-filter:blur(16px); border-radius:28px; padding:24px 20px; border:0.5px solid rgba(255,255,255,0.1); box-shadow:0 8px 24px rgba(0,0,0,0.2); }
+.article-card { background:rgba(40,40,45,0.4); backdrop-filter:blur(16px); border-radius:36px; padding:40px; border:0.5px solid rgba(255,255,255,0.1); box-shadow:0 20px 40px rgba(0,0,0,0.3); }
+.article-title { font-size:42px; font-weight:600; color:#ffffff; margin-bottom:16px; line-height:1.2; text-shadow:0 2px 10px rgba(0,0,0,0.3); }
+.article-meta { display:flex; gap:16px; font-size:17px; color:rgba(255,255,255,0.6); margin-bottom:30px; padding-bottom:20px; border-bottom:1px solid rgba(255,255,255,0.1); }
+/* 文章内容区域 - 自动换行核心样式 */
+.article-content {
+    color: rgba(255,255,255,0.9);
+    font-size: 18px;
+    line-height: 1.6;
+    margin-bottom: 40px;
+    word-wrap: break-word;
+    overflow-wrap: break-word;
+    word-break: break-word;
+    white-space: normal;
+}
+.article-content p {
+    margin-bottom: 1.2em;
+}
+/* 确保文章内的图片、表格等元素不会溢出 */
+.article-content img {
+    max-width: 100%;
+    height: auto;
+}
+.article-content table {
+    max-width: 100%;
+    overflow-x: auto;
+    display: block;
+}
+.article-content pre {
+    white-space: pre-wrap;
+    word-wrap: break-word;
+}
+.password-overlay { text-align:center; padding:40px; background:rgba(255,255,255,0.1); backdrop-filter:blur(16px); border-radius:36px; margin-bottom:30px; }
+.password-input { background:#3a3a3c; border:1px solid #4a4a4e; color:#e5e5e7; border-radius:30px; padding:12px 20px; font-size:16px; width:min(100%, 300px); margin:12px auto 20px; display:block; }
+.password-btn { background:#0a84ff; color:white; border:none; border-radius:30px; padding:12px 30px; font-size:16px; cursor:pointer; }
+.error-message { color:#ff6b6b; margin-top:10px; }
+.side-title { font-size:20px; font-weight:600; color:#ffffff; margin-bottom:20px; padding-bottom:10px; border-bottom:1px solid rgba(255,255,255,0.1); }
+.related-list { list-style:none; }
+.related-item { margin-bottom:16px; padding-bottom:12px; border-bottom:0.5px solid rgba(255,255,255,0.1); }
+.related-item:last-child { border-bottom:none; }
+.related-link { display:flex; justify-content:space-between; align-items:center; text-decoration:none; color:rgba(255,255,255,0.9); transition:background-color 0.2s; padding:8px 10px; border-radius:12px; margin:-8px -10px; }
+.related-link:hover { background-color:rgba(255,255,255,0.1); }
+.related-title { font-size:16px; font-weight:450; max-width:70%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
+.related-date { font-size:14px; color:rgba(255,255,255,0.6); background:rgba(255,255,255,0.1); padding:2px 10px; border-radius:30px; border:0.5px solid rgba(255,255,255,0.2); }
+.no-related { color:rgba(255,255,255,0.5); font-style:italic; text-align:center; padding:20px 0; }
+.nav-buttons { display:flex; justify-content:space-between; margin-top:30px; gap:20px; }
+.nav-button { background:rgba(60,60,70,0.3); backdrop-filter:blur(10px); border:0.5px solid rgba(255,255,255,0.1); color:white; padding:12px 24px; border-radius:40px; text-decoration:none; font-size:16px; transition:background 0.2s; flex:1; text-align:center; min-width:120px; }
+.nav-button:hover:not(.disabled) { background:rgba(80,80,90,0.4); }
+.nav-button.disabled { opacity:0.3; pointer-events:none; background:rgba(40,40,45,0.2); }
+@media (max-width:800px) { .article-layout { flex-direction:column; } .main-column, .side-column { width:100%; } .side-column { margin-top:30px; } }
+@media (max-width:600px) { .article-card { padding:30px 20px; } .article-title { font-size:32px; } }