From 08116538a79875621dcd05ce6f6569cc62443b95 Mon Sep 17 00:00:00 2001
From: 魏曹先生 <1992414357@qq.com>
Date: Sun, 16 Aug 2026 07:59:16 +0800
Subject: feat: add grid background pattern to non-hero sections

---
 index.html | 85 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++------
 1 file changed, 78 insertions(+), 7 deletions(-)

diff --git a/index.html b/index.html
index 3f784cf..ad74749 100644
--- a/index.html
+++ b/index.html
@@ -47,7 +47,40 @@
                 overflow-x: hidden;
             }
 
-            /* Dashed lines along the container (1080px) edges, excluding hero */
+            /* 田字格背景（hero 以下的内容区） */
+            body > section:not(.hero):not(.cta-banner) {
+                background-image:
+                    linear-gradient(
+                        to right,
+                        rgba(212, 168, 75, 0.03) 1px,
+                        transparent 1px
+                    ),
+                    linear-gradient(
+                        to bottom,
+                        rgba(212, 168, 75, 0.03) 1px,
+                        transparent 1px
+                    ),
+                    linear-gradient(
+                        to right,
+                        rgba(212, 168, 75, 0.015) 1px,
+                        transparent 1px
+                    ),
+                    linear-gradient(
+                        to bottom,
+                        rgba(212, 168, 75, 0.015) 1px,
+                        transparent 1px
+                    );
+                background-size:
+                    40px 40px,
+                    40px 40px,
+                    20px 20px,
+                    20px 20px;
+                background-position:
+                    calc(50% - 540px + 20px) 0,
+                    calc(50% - 540px) 0,
+                    calc(50% - 540px + 10px) 0,
+                    calc(50% - 540px + 10px) 0;
+            }
             body > section:not(.hero) {
                 position: relative;
             }
@@ -265,6 +298,11 @@
                     40px 40px,
                     20px 20px,
                     20px 20px;
+                background-position:
+                    calc(50% - 540px + 20px) 0,
+                    calc(50% - 540px) 0,
+                    calc(50% - 540px + 10px) 0,
+                    calc(50% - 540px + 10px) 0;
                 pointer-events: none;
                 z-index: 0;
             }
@@ -453,7 +491,7 @@
 
             .code-demo {
                 padding: 5rem 1.5rem;
-                background: #241c16;
+                background-color: #241c16;
                 display: flex;
                 align-items: center;
                 justify-content: center;
@@ -770,11 +808,44 @@
             .cta-banner {
                 padding: 4rem 1.5rem;
                 text-align: center;
-                background: linear-gradient(
-                    135deg,
-                    rgba(212, 168, 75, 0.06),
-                    transparent
-                );
+                background-image:
+                    linear-gradient(
+                        to right,
+                        rgba(212, 168, 75, 0.03) 1px,
+                        transparent 1px
+                    ),
+                    linear-gradient(
+                        to bottom,
+                        rgba(212, 168, 75, 0.03) 1px,
+                        transparent 1px
+                    ),
+                    linear-gradient(
+                        to right,
+                        rgba(212, 168, 75, 0.015) 1px,
+                        transparent 1px
+                    ),
+                    linear-gradient(
+                        to bottom,
+                        rgba(212, 168, 75, 0.015) 1px,
+                        transparent 1px
+                    ),
+                    linear-gradient(
+                        135deg,
+                        rgba(212, 168, 75, 0.06),
+                        transparent
+                    );
+                background-size:
+                    40px 40px,
+                    40px 40px,
+                    20px 20px,
+                    20px 20px,
+                    100% 100%;
+                background-position:
+                    calc(50% - 540px + 20px) 0,
+                    calc(50% - 540px) 0,
+                    calc(50% - 540px + 10px) 0,
+                    calc(50% - 540px + 10px) 0,
+                    0 0;
                 display: flex;
                 flex-direction: column;
                 align-items: center;
-- 
cgit