diff options
| -rw-r--r-- | index.html | 85 |
1 files changed, 78 insertions, 7 deletions
@@ -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; |