diff --git a/website/src/styles/global.css b/website/src/styles/global.css index 9aed354..d4f95db 100644 --- a/website/src/styles/global.css +++ b/website/src/styles/global.css @@ -421,19 +421,11 @@ input[type="range"] { accent-color: var(--primary); } .bg-scene { position: fixed; inset: 0; z-index: 0; pointer-events: none; background: var(--bg); } .bg-scene::before { content: ''; position: absolute; inset: 0; - background: - radial-gradient(45% 42% at 12% 4%, rgba(38,192,255,0.14), transparent 60%), - radial-gradient(38% 36% at 90% 8%, rgba(230,0,194,0.10), transparent 60%), - radial-gradient(50% 44% at 82% 96%, rgba(255,161,62,0.10), transparent 62%), - radial-gradient(42% 40% at 6% 96%, rgba(0,204,61,0.08), transparent 60%); + /* portrait 式:页面基本纯色,仅在顶部极淡微光,不做整页彩洗 */ + background: radial-gradient(60% 22% at 50% 0%, rgba(120,150,255,0.06), transparent 60%); } .bg-scene canvas { display: none; } -.bg-shade { - position: absolute; inset: 0; - /* 浅色下无需暗角,仅微光保证文字层次;深色同理 */ - background: radial-gradient(120% 60% at 50% 0%, transparent 55%, rgba(0,0,0,0.12) 100%); -} -[data-theme="dark"] .bg-shade { background: radial-gradient(120% 60% at 50% 0%, transparent 55%, rgba(0,0,0,0.55) 100%); } +.bg-shade { position: absolute; inset: 0; background: transparent; } .page-landing { position: relative; z-index: 1; height: 100vh; height: 100dvh; overflow: hidden; diff --git a/website/src/styles/home.css b/website/src/styles/home.css index 742c233..540d349 100644 --- a/website/src/styles/home.css +++ b/website/src/styles/home.css @@ -29,10 +29,10 @@ .pt-split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 6vw, 88px); align-items: center; } .pt-stage { border-radius: 44px; min-height: clamp(320px, 40vh, 460px); display: grid; place-items: center; padding: clamp(30px, 5vw, 56px); position: relative; overflow: hidden; } .pt-stage::before { content: ''; position: absolute; inset: 0; } -.pt-stage.blue { background: linear-gradient(160deg, #dfe9ff, #e6efff 45%, #f3eeff); } -.pt-stage.blue::before { background: radial-gradient(60% 50% at 16% 20%, rgba(98,132,255,.32), transparent 60%), radial-gradient(50% 44% at 96% 90%, rgba(230,160,255,.28), transparent 60%); } -.pt-stage.orange { background: linear-gradient(160deg, #ffefe2, #ffe9f2 45%, #f1ebff); } -.pt-stage.orange::before { background: radial-gradient(60% 50% at 14% 18%, rgba(255,150,80,.30), transparent 60%), radial-gradient(50% 44% at 96% 90%, rgba(255,100,160,.24), transparent 60%); } +.pt-stage.blue { background: radial-gradient(70% 70% at 18% 22%, #dbe7ff, #e9eefb 55%, #f4f4fc); } +.pt-stage.blue::before { background: radial-gradient(52% 46% at 12% 24%, rgba(120,160,255,.22), transparent 60%); } +.pt-stage.orange { background: radial-gradient(70% 70% at 18% 22%, #ffe9d6, #fdecec 55%, #f7f1fb); } +.pt-stage.orange::before { background: radial-gradient(52% 46% at 12% 24%, rgba(255,170,90,.22), transparent 60%); } .pt-window { position: relative; width: min(360px, 92%); background: var(--surface); border: 1px solid var(--border); border-radius: 24px; box-shadow: var(--shadow-md), 0 0 0 1px rgba(255,255,255,.4); padding: 22px; } .pt-window-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; } .pt-win-title { font-size: 15px; font-weight: 700; color: var(--heading); }