/* ============================================================================ 整頁的背景：一整片連續的底 ＋ 陽光斑塊 ＋ 紙的顆粒。 為什麼要有這個（2026-09-02）：飼主說首頁「像 PPT」。量出來的原因之一是 **五段各自一個純色、硬邊切齊** —— 換一段換一個底色，就是投影片的長相。 index.html 裡原本有句註解說「交替底色是不像投影片的關鍵」，實際看是反的。 兩層，由下往上： 1. 連續的底 html.bgFlow 整頁一個慢慢變的暖色漸層，段落自己不帶底色 2. 紙的顆粒 html.bgGrain 很細的雜訊，純色才不會平得像數位投影片 ⚠️ 還有第三層「陽光斑塊」（html.bgSun），2026-09-02 做好之後**關掉了**。 關掉的理由不是效能，是飼主兩次都說看不出效果： 先是「這些效果不是很明顯，我也看不太懂效果」，我把亮度從 .55 開到 1（最大） 再問一次，回覆是「還是欣賞不慣那陽光的美感，感覺不出甚麼效果」。 **看不出來的效果沒有留著的理由** —— 它每一格都要重畫一層滿版的漸層。 程式碼整段留著沒刪：想試就在 的 class 加回 bgSun，或用 bg.html 開關比對。 ⚠️ 陽光和顆粒都在**內容底下**（z-index:-1），只染紙、不染卡片和字。 本來想用 mix-blend-mode 讓光也落在卡片上，但： - 疊在字上會把黑字變灰黃，看不清楚 - 整頁一層 blend 在捲動時要一直重算，長頁面會卡 放底下就沒有這兩個問題。 數字都是變數，飼主在 bg.html 上自己調，調好再寫回這裡。 三層各自用 上的 class 開關，方便比對。 ============================================================================ */ :root{ /* ⚠️ 這個值 2026-09-02 從 .55 調到 1。 .55 的時候把畫面切一半（左關右開）拍下來，**左右看不出差別** —— 飼主的原話是「這些效果不是很明顯，我也看不太懂效果」。 質感這種東西的前提是「至少感覺得到」，看不見的效果只是在耗效能。 要再調就用 bg.html 拉，不要憑感覺改這個數字。 */ --sunA: 1; /* 光有多亮 0～1 */ --sunRot: -18deg; /* 光斜多少 */ --sunX: 62%; /* 光在左右哪裡 */ --sunPara:.22; /* 光跟著捲動的程度：0 = 釘死，越大移越快 */ /* ⚠️ 陽光整層預設是關的（首頁的 class 沒有 bgSun），理由見最上面 */ --sunY: 0px; /* 由 背景.js 從捲動位置算出來，不要手動改 */ --grain: .045; /* 顆粒多重 0～.12 */ } /* ---- 1. 連續的底 ---------------------------------------------------------- */ /* 漸層掛在 html 上：html 的高度 = 整份文件的高度，所以 0% 是頁首、100% 是頁尾， 不管頁面多長都剛好鋪滿一次。 */ /* ⚠️ 這條漸層是**整頁唯一的底**（2026-09-02 飼主：「幫我整個頁面做個漸變色， 用我原本的底色下去做漸變同色系」）。上面的每一張紙都是半透明的色調， 它們不蓋掉這條漸層，只是讓它深一點淺一點。 顏色全部從 --paper #F7EEE1 出發，只動明度和飽和度，不換色相（都在 33~38 度的暖橘）： 頂 #FEFCF9 幾乎純白 開場那一屏最亮，字最清楚 ↓ #FBF3E6 ↓ #F9EAD3 ↓ #F8E0BC ↓ #F7D7A8 底 #F6CE96 暖杏色 比頂端暗 63 階、黃色差 99 階 ⚠️ 幅度。第一版只從 253 走到 234（差 19 階），飼主看了說「希望明顯一點， 就像之前那個開陽光效果的感覺」，還附了參考圖 —— 那張圖底部是很清楚的暖杏色。 **同色系不等於幾乎沒差。** 現在藍色通道從 249 走到 150，差 99 階，一眼看得出來。 ⚠️ 但深的那一端不能再深了：內文 #4A3A30 和淡字 #9B8574 都還要看得清楚， 而且卡片（--clipBg #FDEDDE）要能從背景浮起來。再深卡片就融進去了。 ⚠️ 不要在中間插入跟原色色相不同的顏色（例如偏粉或偏灰）—— 整頁只有一個色相才叫「同色系漸變」，混色會變成髒。 ⚠️ 掛在 html 上，因為 html 的高度就是整份文件的高度：0% 是頁首、100% 是頁尾， 不管頁面多長都剛好鋪滿一次。掛在 body 上會被內容高度影響。 */ html.bgFlow{ background:linear-gradient(180deg, #FEFCF9 0%, #FBF3E6 18%, #F9EAD3 40%, #F8E0BC 62%, #F7D7A8 82%, #F6CE96 100%); /* ⚠️ 不要加 background-attachment:fixed。 加了漸層就黏在**螢幕**上，捲動時背景完全不變 —— 那不是「整頁的漸變」， 是「每一屏都長一樣」。預設的 scroll 才會讓 0% 對到頁首、100% 對到頁尾。 2026-09-02 加了又拿掉。 */ } html.bgFlow body.hasPet{ background:transparent } /* 段落自己的底色拿掉。用列舉的寫法把特異性拉高，不用 !important。 */ html.bgFlow section.band-paper, html.bgFlow section.band-kraft, html.bgFlow section.band-glow{ background:transparent } /* ⚠️ .foot 是 div 不是 section，而且自己有 #FDFAF5 實色底 —— 漏掉的話頁面最後一大段會把漸層整片蓋成白的（2026-09-02 踩到）。 */ html.bgFlow .foot{ background:transparent } /* ---- 2. 陽光斑塊 ---------------------------------------------------------- */ /* 兩層：外面 #bgSun 剛好等於畫面大小、超出去的一律裁掉； 裡面 .sun 故意做得比畫面大很多（400vh），上面放幾塊光，捲動時用 translate 慢慢往上帶，不同的光就會依序飄過畫面；旋轉之後四個角也不會露白。 ⚠️ 一定要有外面那層裁切。第一版沒有，超出畫面的部分把整頁撐出**橫向捲軸**。 */ #bgSun{ position:fixed; inset:0; overflow:hidden; z-index:-1; pointer-events:none; display:none; } #bgSun .sun{ position:absolute; left:-30vw; right:-30vw; top:-150vh; height:400vh; transform:translate3d(0, var(--sunY), 0) rotate(var(--sunRot)); will-change:transform; background: radial-gradient(ellipse 30% 9% at var(--sunX) 34%, rgba(255,222,168,var(--sunA)) 0%, rgba(255,222,168,0) 70%), radial-gradient(ellipse 18% 5% at calc(var(--sunX) + 9%) 41%, rgba(255,214,150,calc(var(--sunA) * .55)) 0%, rgba(255,214,150,0) 72%), radial-gradient(ellipse 26% 8% at calc(var(--sunX) - 14%) 60%, rgba(255,222,168,calc(var(--sunA) * .85)) 0%, rgba(255,222,168,0) 70%), radial-gradient(ellipse 32% 9% at calc(var(--sunX) + 4%) 82%, rgba(255,222,168,var(--sunA)) 0%, rgba(255,222,168,0) 70%); } html.bgSun #bgSun{ display:block } /* ---- 3. 紙的顆粒 ---------------------------------------------------------- */ /* 顆粒是一張 160×160 的 SVG 雜訊直接寫在這裡（不用另外載圖），鋪滿整個畫面。 釘在畫面上不跟著捲 —— 紙的紋理本來就不該跟著內容跑。 */ /* ⚠️ 顆粒 2026-09-02 從內容底下（z-index:-1）搬到內容上面（15）。 原因：首頁改成「一疊紙」之後，每一段有自己不透明的紙色，顆粒在底下就被蓋住了。 搬到上面等於整頁蓋一層 4.5% 的細雜訊，字和圖也會有一點點 —— 紙上印的東西本來就這樣。 15 是在那排貓（20）和逗貓棒（59）之下。 */ #bgGrain{ position:fixed; inset:0; z-index:15; pointer-events:none; display:none; opacity:var(--grain); background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); background-size:160px 160px; } html.bgGrain #bgGrain{ display:block } /* 使用者設定「減少動態效果」：光就不要跟著捲動了 */ @media (prefers-reduced-motion: reduce){ #bgSun .sun{ transform:rotate(var(--sunRot)) } }