Add rounded corners and soft warm palette

Author: HiCodeHC

index.html

@@ -13,14 +13,14 @@
     --glass: rgba(255, 246, 230, 0.07);
     --glass-brd: rgba(255, 232, 200, 0.18);
     --glass-hi: rgba(255, 255, 255, 0.05);
-    --accent: #f6a823;
-    --accent-2: #ff6a3d;
-    --accent-grad: linear-gradient(135deg, #f6a823 0%, #ff7b3a 55%, #ff6a3d 100%);
-    --gold-line: linear-gradient(135deg, rgba(246,168,35,.55), rgba(255,106,61,.18));
-    --text: #f7efe0;
-    --muted: #cbb997;
-    --dim: #8f7f5f;
-    --radius: 18px;
+    --accent: #d9ae6b;
+    --accent-2: #c98b6f;
+    --accent-grad: linear-gradient(135deg, #d9ae6b 0%, #d09a72 55%, #c98b6f 100%);
+    --gold-line: linear-gradient(135deg, rgba(217,174,107,.45), rgba(201,139,111,.16));
+    --text: #f5ecdd;
+    --muted: #bfae90;
+    --dim: #8d7d62;
+    --radius: 24px;
   }
   * { margin: 0; padding: 0; box-sizing: border-box; }
   html { scroll-behavior: smooth; }
@@ -38,9 +38,9 @@
   .bg-wrap { position: fixed; inset: 0; z-index: -2; overflow: hidden;
     background: linear-gradient(160deg, #1d1509 0%, var(--bg) 40%, #1c120b 100%); }
   .bg-wrap .orb { position: absolute; border-radius: 50%; filter: blur(110px); mix-blend-mode: screen; }
-  .bg-wrap .orb.a { width: 520px; height: 520px; background: #ff9a3c; opacity: .34; top: -180px; left: -140px; }
-  .bg-wrap .orb.b { width: 460px; height: 460px; background: #ff5e3a; opacity: .30; bottom: -160px; right: -120px; }
-  .bg-wrap .orb.c { width: 300px; height: 300px; background: #f0c96a; opacity: .28; top: 38%; left: 58%; }
+  .bg-wrap .orb.a { width: 520px; height: 520px; background: #c8a26b; opacity: .28; top: -180px; left: -140px; }
+  .bg-wrap .orb.b { width: 460px; height: 460px; background: #b9896c; opacity: .26; bottom: -160px; right: -120px; }
+  .bg-wrap .orb.c { width: 300px; height: 300px; background: #d3ba8a; opacity: .24; top: 38%; left: 58%; }
   .grain { position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: .5;
     background-image: radial-gradient(rgba(255,255,255,.035) 1px, transparent 1px); background-size: 3px 3px; }
 
@@ -49,6 +49,7 @@
   /* ---- liquid glass panel ---- */
   .glass {
     background: var(--glass);
+    border-radius: var(--radius);
     -webkit-backdrop-filter: blur(16px) saturate(150%);
     backdrop-filter: blur(16px) saturate(150%);
     border: 1px solid var(--glass-brd);
@@ -60,38 +61,38 @@
   .nav { display: flex; align-items: center; justify-content: space-between; gap: 20px;
     padding: 10px 14px 10px 12px; border-radius: 999px; }
   .brand { display: flex; align-items: center; gap: 12px; font-weight: 800; font-size: 19px; letter-spacing: .5px; }
-  .brand img { width: 40px; height: 40px; border-radius: 12px; object-fit: cover;
-    box-shadow: 0 6px 20px rgba(246,168,35,.4); border: 1px solid var(--glass-brd); }
+  .brand img { width: 40px; height: 40px; border-radius: 16px; object-fit: cover;
+    box-shadow: 0 6px 20px rgba(217,174,107,.35); border: 1px solid var(--glass-brd); }
   .nav-links { display: flex; gap: 28px; color: var(--muted); font-size: 15px; }
   .nav-links a { opacity: .85; transition: opacity .25s, transform .25s; }
   .nav-links a:hover { opacity: 1; transform: translateY(-1px); color: var(--text); }
-  .nav-cta { background: var(--accent-grad); padding: 11px 24px; border-radius: 999px; font-size: 14px; font-weight: 700; color: #241505;
-    box-shadow: 0 10px 28px rgba(246,140,50,.45); transition: transform .25s, box-shadow .25s; }
-  .nav-cta:hover { transform: translateY(-2px); box-shadow: 0 14px 34px rgba(246,140,50,.55); }
+  .nav-cta { background: var(--accent-grad); padding: 11px 24px; border-radius: 999px; font-size: 14px; font-weight: 700; color: #3a2a15;
+    box-shadow: 0 10px 28px rgba(160,110,60,.35); transition: transform .25s, box-shadow .25s; }
+  .nav-cta:hover { transform: translateY(-2px); box-shadow: 0 14px 34px rgba(160,110,60,.45); }
 
   /* ---- hero ---- */
   .hero { text-align: center; padding: 96px 0 70px; }
-  .hero .logo-glass { width: 108px; height: 108px; margin: 0 auto 30px; border-radius: 28px; overflow: hidden;
+  .hero .logo-glass { width: 108px; height: 108px; margin: 0 auto 30px; border-radius: 32px; overflow: hidden;
     padding: 8px; }
-  .hero .logo-glass img { width: 100%; height: 100%; border-radius: 20px; object-fit: cover; display: block; }
-  .hero .badge { display: inline-flex; align-items: center; gap: 8px; color: #f3cf8a;
+  .hero .logo-glass img { width: 100%; height: 100%; border-radius: 24px; object-fit: cover; display: block; }
+  .hero .badge { display: inline-flex; align-items: center; gap: 8px; color: #e6cfa0;
     background: var(--glass); border: 1px solid var(--glass-brd); padding: 7px 18px; border-radius: 999px; font-size: 13px;
     -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); margin-bottom: 26px; }
-  .hero .badge .dot { width: 8px; height: 8px; border-radius: 50%; background: #ffb84d; box-shadow: 0 0 12px #ffb84d; }
+  .hero .badge .dot { width: 8px; height: 8px; border-radius: 50%; background: #e2b877; box-shadow: 0 0 12px #e2b877; }
   .hero h1 { font-size: clamp(44px, 8vw, 84px); line-height: 1.06; font-weight: 900; letter-spacing: 1px;
     background: var(--accent-grad); -webkit-background-clip: text; background-clip: text; color: transparent;
-    filter: drop-shadow(0 6px 22px rgba(246,140,50,.35)); }
+    filter: drop-shadow(0 6px 22px rgba(180,135,85,.3)); }
   .hero .sub { margin: 24px auto 0; max-width: 680px; color: var(--muted); font-size: 18px; }
-  .hero .sub b { color: #f0cd9a; font-weight: 600; }
+  .hero .sub b { color: #e6cfa0; font-weight: 600; }
   .hero .ctas { margin-top: 40px; display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }
   .btn { padding: 15px 36px; border-radius: 999px; font-size: 16px; font-weight: 700; display: inline-flex; align-items: center; gap: 8px;
     transition: transform .25s, box-shadow .25s, background .25s; }
-  .btn.primary { background: var(--accent-grad); color: #241505; box-shadow: 0 12px 32px rgba(246,140,50,.45); }
+  .btn.primary { background: var(--accent-grad); color: #3a2a15; box-shadow: 0 12px 32px rgba(160,110,60,.4); }
   .btn:not(.primary) { background: var(--glass); color: var(--text); border: 1px solid var(--glass-brd);
     -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
   .btn:hover { transform: translateY(-3px); }
   .hero .hint { margin-top: 28px; font-size: 13px; color: var(--dim); }
-  .hero .hint a { color: #f0c47f; border-bottom: 1px dashed currentColor; }
+  .hero .hint a { color: #dcc39a; border-bottom: 1px dashed currentColor; }
 
   /* ---- sections ---- */
   section { padding: 78px 0; }
@@ -104,9 +105,9 @@
   /* features (一级) */
   .features { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 22px; }
   .feat { padding: 32px 28px; } /* glass */
-  .feat .ico { width: 54px; height: 54px; border-radius: 16px; background: var(--accent-grad);
+  .feat .ico { width: 54px; height: 54px; border-radius: 18px; background: var(--accent-grad);
     display: grid; place-items: center; font-size: 24px; margin-bottom: 20px;
-    box-shadow: 0 10px 26px rgba(246,140,50,.4); }
+    box-shadow: 0 10px 26px rgba(160,110,60,.35); }
   .feat h3 { font-size: 20px; margin-bottom: 10px; }
   .feat p { color: var(--muted); font-size: 15px; }
 
@@ -120,8 +121,8 @@
   .adv-item p { color: var(--muted); font-size: 15px; }
 
   .trio { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 18px; margin-top: 40px; }
-  .trio-el { padding: 24px; display: flex; gap: 14px; align-items: flex-start; text-align: left; border-radius: 16px; } /* glass */
-  .trio-el .tick { color: #ffb84d; font-size: 22px; line-height: 1; }
+  .trio-el { padding: 24px; display: flex; gap: 14px; align-items: flex-start; text-align: left; border-radius: 20px; } /* glass */
+  .trio-el .tick { color: #e2b877; font-size: 22px; line-height: 1; }
   .trio-el .t-title { font-weight: 700; }
   .trio-el .t-desc { color: var(--muted); font-size: 13px; }
 
@@ -132,8 +133,8 @@
   .foot h4 { font-size: 15px; color: var(--text); margin-bottom: 16px; }
   .foot ul { list-style: none; }
   .foot li, .foot p { color: var(--muted); font-size: 14px; margin-bottom: 11px; }
-  .foot a:hover { color: #f0c47f; }
-  .foot .email { color: #f3cf8a; }
+  .foot a:hover { color: #dcc39a; }
+  .foot .email { color: #e6cfa0; }
 
   .disclaim { margin-top: 34px; padding: 26px 30px; color: var(--dim); font-size: 12.5px; line-height: 1.9; }
   .disclaim b { color: var(--muted); }