/** Theme Name: Jingrui Design Core Author: Jingrui Design Author URI: https://ray-shi.jingruidesign.com/ Description: 本專案為 靜睿設計所 (Jingrui Design Studio) 獨家構建的企業級 WordPress 子主題架構，旨在為所有客戶專案奠定堅實的數位地基。作為驅動網站的核心引擎，本系統深度整合了高規格的安全性防護、SEO 結構優化與極致的載入效能。 我們透過標準化的開發邏輯，有效解決父主題更新可能帶來的兼容性風險，確保長期運維的穩定性與擴充彈性。這不僅是一套程式碼，更是靜睿設計所貫徹「慢構」精神，將設計美學與技術工藝完美結合，對每一份交付品質的絕對承諾。 Version: 1.0.0 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Text Domain: jingrui-design-core Template: astra */ /** * ============================================================================== * Project: 靜睿設計所 × 慢構 * Author: Ray Shih (施睿皇) - Jingrui Design Studio * Email: n8822314n@gmail.com * Contact: services@revonteso.com * Created: 2026-05-12 * * Copyright (c) 2026 Jingrui Design Studio. All rights reserved. * * Unauthorized use, reproduction, or distribution is prohibited. * ============================================================================== */ /* * 更新日誌 (Changelog): * [2026-08-06] 1.6.0 段落文字量較大的兩段（伍「調色」三段落、柒「裂痕」兩段 * 且字數明顯多於其他段落）原本配單張滿版圖片，畫面資訊量與文字量 * 不成比例，略顯單薄。改為 .hsh-block__media--collage 三張圖片 * 拼貼（一大搭配右側上下兩小），HTML 內對應新增兩張圖片 * （伍：HSH-B34 舞彩繽紛、HSH-B31 陽光來的正是時候；柒： * HSH-C18 窗櫺、HSH-C25 光影追蹤），增加視覺豐富度，其餘五段 * 文字量較短，維持原本單張出血大圖不變。 * [2026-05-13] 1.0.6 視覺進階控制：新增 `--jr-opacity` 變數與 `.is-bottom-25` 狀態類別，當頁面捲動至底部 25% 時平滑淡出，往上捲回時慢慢淡入。 * [2026-05-12] 1.0.5 色彩對比重構：移除 opacity，利用色彩相減特性，以冷霜白 (#f0f2f5) 作為基底，達成黑底白字、白底深墨灰的日系唯美視覺。 * [2026-05-12] 1.0.4 視覺唯美化：加入 opacity 屬性，將 difference 混合模式的死黑柔化為日系慢構灰。 * [2026-05-12] 1.0.3 優化視覺適應性：導入 mix-blend-mode 實現隨背景自動反色；設定字體繼承網站預設字型。 * [2026-05-12] 1.0.2 新增電腦版斷點限制、新增偽元素直式中文字、導入配合 JS 滾動計算的 CSS 變數。 * [2026-05-12] 1.0.1 修正線條高度，上下增加 5dvh 留白，提升呼吸感。 * [2026-05-12] 1.0.0 建立初始版本，實作全站 10% 裝飾線條。 */ /* 1. 定義全域變數 (Global Variables) */ :root { /* 核心優化：以冷霜白 (#f0f2f5) 取代純白，藉此在白底上反轉出溫潤的深墨灰 (#0f0d0a)，黑底上依然明亮 */ --jr-line-color: #f0f2f5; --jr-line-width: 1px; --jr-line-position: 15%; /* 交由 JavaScript 動態接管的留白變數 */ --jr-line-spacing-top: 25dvh; --jr-line-spacing-bottom: 10dvh; --jr-text-color: #f0f2f5; --jr-text-content: "從劇場到無框畫"; /* 新增：交由 CSS/JS 聯合控管的透明度變數，實現平滑淡出入 */ --jr-opacity: 1; } /* 2. 當頁面捲動至底部 25% 時，JS 會賦予 body 此類別，觸發透明度歸零 */ body.home.is-bottom-25 { --jr-opacity: 0; } /* 3. 僅在電腦版 (1440px 以上) 顯示線條與文字，僅限首頁body.home */ @media screen and (min-width: 1440px) { /* 裝飾主線條 */ body.home::before { content: ''; position: fixed; top: var(--jr-line-spacing-top); bottom: var(--jr-line-spacing-bottom); left: var(--jr-line-position); width: var(--jr-line-width); background-color: var(--jr-line-color); z-index: 9999; pointer-events: none; /* 核心優化：綁定透明度變數，並加入 opacity 平滑過渡設定 */ opacity: var(--jr-opacity); transition: top 0.1s ease-out, bottom 0.1s ease-out, opacity 0.8s ease-in-out; /* 核心優化：環境光適應技術 (自動反色) */ mix-blend-mode: difference; } /* 左側直式中文裝飾字 */ body.home::after { content: var(--jr-text-content); position: fixed; top: 50%; transform: translateY(-50%); left: calc(var(--jr-line-position) - 40px); /* 直式排版屬性 */ writing-mode: vertical-rl; text-orientation: upright; letter-spacing: 0.5em; color: var(--jr-text-color); font-size: 15px; font-weight: 300; /* 確保字體風格延續：強制繼承網站預設字型 */ font-family: inherit; z-index: 9999; pointer-events: none; /* 核心優化：綁定透明度變數，並加入 opacity 平滑過渡設定 */ opacity: var(--jr-opacity); transition: opacity 0.8s ease-in-out; /* 核心優化：環境光適應技術 (自動反色) */ mix-blend-mode: difference; } } /** * ============================================================================== * Project: 靜睿設計所 × 慢構 - 首頁標題角落框線裝飾 * Author: Ray Shih (施睿皇) - Jingrui Design Studio * Email: n8822314n@gmail.com * Contact: services@jingruidesign.com * Created: 2026-05-12 * * Copyright (c) 2026 Jingrui Design Studio. All rights reserved. * * Unauthorized use, reproduction, or distribution is prohibited. * ============================================================================== */ /* 操作流程：1. 將標題設為行內區塊並給予留白。2. 利用 ::before 繪製左下角邊框。3. 利用 ::after 繪製右上角邊框。 */ /* 1. 標題本體基礎設定 (Heading Base Setup) */ .index_box_text_an h2 { position: relative !important; /* 相對定位：作為偽元素的定位基準 */ display: inline-block !important; /* 行內區塊：讓容器寬度根據文字內容自動收縮，確保框線貼合 */ padding: 16px 24px !important; /* 內邊距：賦予文字與框線之間優雅的呼吸空間 */ margin: 0 !important; } /* 2. 左下角框線 (Bottom-Left Corner) */ .index_box_text_an h2::before { content: "" !important; position: absolute !important; /* 絕對定位 */ bottom: 0 !important; /* 貼齊底部 */ left: 0 !important; /* 貼齊左側 */ width: 24px !important; /* 框線水平延伸長度 */ height: 24px !important; /* 框線垂直延伸高度 */ border-bottom: 2px solid #fff !important; /* 底部實線：曜岩黑 */ border-left: 2px solid #fff !important; /* 左側實線：曜岩黑 */ pointer-events: none !important; /* 避免阻擋滑鼠選取文字 */ } /* 3. 右上角框線 (Top-Right Corner) */ .index_box_text_an h2::after { content: "" !important; position: absolute !important; /* 絕對定位 */ top: 0 !important; /* 貼齊頂部 */ right: 0 !important; /* 貼齊右側 */ width: 24px !important; /* 框線水平延伸長度 */ height: 24px !important; /* 框線垂直延伸高度 */ border-top: 2px solid #fff !important; /* 頂部實線：曜岩黑 */ border-right: 2px solid #fff !important; /* 右側實線：曜岩黑 */ pointer-events: none !important; /* 避免阻擋滑鼠選取文字 */ } /** * ============================================================================== * Project: 謝導演的侘寂網站 - 雙軌幾何等速貪食蛇流光 (Version 1.6.1 柔化尖刺版) * Author: Ray Shih (施睿皇) - Jingrui Design Studio * Feature: 導入頭部羽化 (Leading-Edge Feathering)，消除極端比例下的幾何尖刺 * ============================================================================== */ /* 1. 註冊自定義角度變數 */ @property --angle { syntax: ''; initial-value: 0deg; inherits: false; } /* 2. 容器基底設定：12px 外圓角 */ #index_banner_box .index_box_list { position: relative; border-radius: 12px; } /* 3. 雙重圓角遮罩引擎 */ #index_banner_box .index_box_list::after { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; pointer-events: none; z-index: 10; border-radius: inherit; padding: 3px; -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; } /* ============================================================================== 左側區塊 (順時針 / 12秒 / 反向幾何校正等速) ============================================================================== */ #index_banner_box .index_box_list:first-child::after { /* * 🎯 核心修正：頭部羽化演算法 * 30%: 尾部開始 (核心耀金, 透明度0) * 85%: 身體 (核心耀金, 實色) * 97%: 彗星頭部 (晨光金, 實色高光) * 100%: 尖刺柔化區 (晨光金, 透明度0，藉此將銳利斜角模糊化) */ background: conic-gradient(from var(--angle) at 50% 50%, rgba(200, 157, 60, 0) 30%, #C89D3C 85%, #E2C073 97%, rgba(226, 192, 115, 0) 100%); animation: kintsugiMathCW 12s linear infinite; } @keyframes kintsugiMathCW { 0% { --angle: 0deg; } 5.3% { --angle: 56.3deg; } 10.7% { --angle: 71.5deg; } 16.1% { --angle: 77.5deg; } 21.4% { --angle: 80.5deg; } 25% { --angle: 90deg; } 28.6% { --angle: 99.5deg; } 33.9% { --angle: 102.5deg; } 39.3% { --angle: 108.4deg; } 44.6% { --angle: 123.7deg; } 50% { --angle: 180deg; } 55.4% { --angle: 236.3deg; } 60.7% { --angle: 251.5deg; } 66.1% { --angle: 257.5deg; } 71.4% { --angle: 260.5deg; } 75% { --angle: 270deg; } 78.6% { --angle: 279.5deg; } 83.9% { --angle: 282.5deg; } 89.3% { --angle: 288.4deg; } 94.6% { --angle: 303.7deg; } 100% { --angle: 360deg; } } /* ============================================================================== 右側區塊 (逆時針 / 15.5秒 / 延遲 2.5秒 / 反向幾何校正等速) ============================================================================== */ #index_banner_box .index_box_list:last-child::after { /* 逆時針區塊同步套用頭部羽化演算法 */ background: conic-gradient(from var(--angle) at 50% 50%, rgba(200, 157, 60, 0) 30%, #C89D3C 85%, #E2C073 97%, rgba(226, 192, 115, 0) 100%); animation: kintsugiMathCCW 15.5s linear infinite; animation-delay: 2.5s; } @keyframes kintsugiMathCCW { 0% { --angle: 360deg; } 5.4% { --angle: 303.7deg; } 10.7% { --angle: 288.4deg; } 16.1% { --angle: 282.5deg; } 21.4% { --angle: 279.5deg; } 25% { --angle: 270deg; } 28.6% { --angle: 260.5deg; } 33.9% { --angle: 257.5deg; } 39.3% { --angle: 251.5deg; } 44.6% { --angle: 236.3deg; } 50% { --angle: 180deg; } 55.4% { --angle: 123.7deg; } 60.7% { --angle: 108.4deg; } 66.1% { --angle: 102.5deg; } 71.4% { --angle: 99.5deg; } 75% { --angle: 90deg; } 78.6% { --angle: 80.5deg; } 83.9% { --angle: 77.5deg; } 89.3% { --angle: 71.5deg; } 94.7% { --angle: 56.3deg; } 100% { --angle: 0deg; } } /** * ============================================================================== * Project: 謝導演的侘寂網站 - 子選單動態回推效果 (Version 1.1.3) * Author: Ray Shih (施睿皇) - Jingrui Design Studio * Website: jingrui-demo.com * Design Tokens: * - Base: #F8F6F0 (宣紙白), #E6E5E1 (清水灰) * - Gold: #E2C073 (晨光金), #C89D3C (核心耀金) * - Text: #585858 (溫潤深灰), #111820 (深邃墨藍) * ============================================================================== */ /* ============================================================================== PART 1: 頂部導覽列與天際金線 (全裝置適用，呼吸流轉效果) ============================================================================== */ .ast-primary-header-bar { position: relative; border-bottom: none; } .ast-primary-header-bar::after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 3.5px; background: linear-gradient( 90deg, rgba(248, 246, 240, 0) 0%, #C89D3C 45%, #E2C073 50%, #C89D3C 55%, rgba(248, 246, 240, 0) 100% ); background-size: 200% 100%; animation: goldenFlowBreathing 12s ease-in-out infinite alternate; pointer-events: none; } @keyframes goldenFlowBreathing { 0% { background-position: 200% 0; opacity: 0.6; } 50% { opacity: 1; } 100% { background-position: -200% 0; opacity: 0.6; } } /* ============================================================================== PART 2: 電腦版主選單互動 (呼吸感底線、日系虛線) - 僅 >= 1025px ============================================================================== */ @media (min-width: 1200px) { .main-header-menu { margin-top: 15px; } .main-header-menu > .menu-item { position: relative; } .main-header-menu > .menu-item:not(:last-child)::after { content: ''; position: absolute; right: 0; top: 50%; transform: translateY(-50%); height: 14px; border-right: 1px dashed rgba(88, 88, 88, 0.4); pointer-events: none; } .main-header-menu > .menu-item > a, .main-header-menu > .menu-item > .menu-link { padding-right: 24px !important; padding-left: 24px !important; color: #585858 !important; position: relative; transition: color 0.4s ease; } .main-header-menu > .menu-item:not(.menu-item-has-children) > a::after, .main-header-menu > .menu-item:not(.menu-item-has-children) > .menu-link::after { content: ''; position: absolute; bottom: -6px; left: 0; width: 0; height: 1px; background-color: #E2C073; opacity: 0; transition: width 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity 0.6s ease; } .main-header-menu > .menu-item:hover > a, .main-header-menu > .menu-item:hover > .menu-link { color: #111820 !important; } .main-header-menu > .menu-item:not(.menu-item-has-children):hover > a::after, .main-header-menu > .menu-item:not(.menu-item-has-children):hover > .menu-link::after { width: 100%; opacity: 1; } } /* ============================================================================== PART 3: 純淨毛玻璃子選單 (包含彈簧縮排回推效果) - 僅 >= 1025px ============================================================================== */ @media (min-width: 1025px) { #primary-site-navigation-desktop .main-navigation .sub-menu { background-color: rgba(248, 246, 240, 0.75) !important; backdrop-filter: blur(20px) saturate(150%) !important; -webkit-backdrop-filter: blur(20px) saturate(150%) !important; border: 1px solid rgba(230, 229, 225, 0.6) !important; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08) !important; border-radius: 8px !important; padding: 0 !important; } #primary-site-navigation-desktop .main-navigation .sub-menu::before, #primary-site-navigation-desktop .main-navigation .sub-menu::after { display: none !important; } /* --- 重點優化：拆分 Transition 屬性，賦予不同的生命力 --- */ #primary-site-navigation-desktop .main-navigation .sub-menu .menu-item .menu-link { color: #585858 !important; background-color: transparent !important; font-weight: 500 !important; padding: 12px 24px !important; /* 將 padding (位移) 設定為彈簧曲線，而顏色漸變維持平滑 */ transition: padding 0.5s cubic-bezier(0.34, 1.56, 0.64, 1), background-color 0.3s ease, color 0.3s ease !important; } #primary-site-navigation-desktop .main-navigation .sub-menu .menu-item:first-child .menu-link { border-top-left-radius: 8px !important; border-top-right-radius: 8px !important; } #primary-site-navigation-desktop .main-navigation .sub-menu .menu-item:last-child .menu-link { border-bottom-left-radius: 8px !important; border-bottom-right-radius: 8px !important; } /* --- 重點優化：透過增加 padding-left 產生縮排效果 --- */ #primary-site-navigation-desktop .main-navigation .sub-menu .menu-item:hover > .menu-link { background-color: rgba(226, 192, 115, 0.3) !important; color: #111820 !important; /* 預設是 24px，滑入時目標為 32px，搭配貝茲曲線會產生越過 32px 再拉回 32px 的回推感 */ padding: 12px 24px 12px 32px !important; } } /* ============================================================================== PART 4: 侘寂風細節 - 箭頭斜角、步入感位移與緊湊對齊 (僅 >= 1025px) ============================================================================== */ @media (min-width: 1025px) { .main-header-menu .menu-item-has-children .ast-arrow-svg { position: relative; top: 3px; left: -4px; transform: rotate(-45deg); fill: #585858; transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), fill 0.3s ease, left 0.3s ease !important; } .main-header-menu .menu-item-has-children:hover > a .ast-arrow-svg, .main-header-menu .menu-item-has-children:hover > .ast-header-navigation-arrow .ast-arrow-svg { transform: rotate(0deg); fill: #E2C073; left: -2px; } } /* ============================================================================== PART 5: 響應式毛玻璃配置 (平板與手機裝置 <= 921px) ============================================================================== */ @media (max-width: 921px) { .ast-primary-header-bar { background-color: rgba(248, 246, 240, 0.6) !important; backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px); } } /** * ============================================================================== * Project: 靜睿設計所 × 慢構 * Author: Ray Shih (施睿皇) - Jingrui Design Studio * Email: n8822314n@gmail.com * Contact: services@revonteso.com * Created: 2026-05-12 * * Copyright (c) 2026 Jingrui Design Studio. All rights reserved. * * Unauthorized use, reproduction, or distribution is prohibited. * ============================================================================== */ /* * 更新日誌 (Changelog): * [2026-05-12] 1.1.1 增強代碼可重用性：導入通用按鈕類別 .jr-btn (左至右) 與 .jr-btn-reverse (右至左)，整合現有 Astra 按鈕設定。 */ /* ----------------------------------------- */ /* 1. 全站按鈕與通用類別共用初始狀態 (Shared Initial State) */ /* ----------------------------------------- */ .ast-read-more-container a, .ast-related-post-cta .ast-related-post-link, .nav-links .nav-previous a, .nav-links .nav-next a, .jr-btn { position: relative !important; display: inline-flex !important; /* 行內彈性盒子 (Inline-flex): 解決內部文字與圖示的對齊衝突 */ align-items: center !important; /* 次軸對齊 (Align-items): 強制垂直居中 */ justify-content: center !important; /* 主軸對齊 (Justify-content): 水平居中 */ padding: 12px 24px !important; border: none !important; overflow: hidden !important; z-index: 1 !important; text-decoration: none !important; /* 字體與排版設定 (Typography & Layout Setup) */ color: #585858 !important; /* 初始文字顏色改為柔和的沉靜灰 (Muted Grey) */ letter-spacing: 0.15em !important; line-height: 1.5 !important; /* 使用漸層繪製上下底線，顏色改為淺灰白 (Light Grey/Beige) */ background-image: linear-gradient(#E6E5E1, #E6E5E1), linear-gradient(#E6E5E1, #E6E5E1) !important; background-repeat: no-repeat !important; background-size: 100% 1px, 100% 1px !important; /* 滑出時的共用動畫 (Shared Leave Animation) */ transition: color 0.6s cubic-bezier(0.4, 0, 0.2, 1) 0s, background-size 0.6s cubic-bezier(0.4, 0, 0.2, 1) 0.6s !important; } /* 針對 Astra 箭頭圖示的額外校正 (Arrow Icon Correction) */ .nav-links .nav-previous a span, .nav-links .nav-next a span, .jr-btn span { line-height: 1 !important; /* 歸零預設行高干擾 */ margin: 0 8px !important; /* 賦予箭頭與文字之間優雅的呼吸間距 */ } /* ----------------------------------------- */ /* 2. 共用偽元素背景設定 (Shared Pseudo-element Setup) */ /* ----------------------------------------- */ .ast-read-more-container a::before, .ast-related-post-cta .ast-related-post-link::before, .nav-links .nav-previous a::before, .nav-links .nav-next a::before, .jr-btn::before { content: "" !important; position: absolute !important; top: 0 !important; width: 0 !important; height: 100% !important; /* 半透明沙金色初始狀態 (Semi-transparent Sandy Gold) */ background-color: rgba(226, 192, 115, 0.2) !important; z-index: -1 !important; /* 滑出時的共用背景動畫 (Shared Background Leave Animation) */ transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1) 0s, background-color 0.6s cubic-bezier(0.4, 0, 0.2, 1) 0s !important; } /* ----------------------------------------- */ /* 3. 方向性獨立設定：由左至右 (Left to Right) */ /* 涵蓋：閱讀更多、相關文章、上一篇文章、通用按鈕預設 */ /* ----------------------------------------- */ .ast-read-more-container a, .ast-related-post-cta .ast-related-post-link, .nav-links .nav-previous a, .jr-btn:not(.jr-btn-reverse) { background-position: left top, left bottom !important; /* 底線向左收合與展開 */ } .ast-read-more-container a::before, .ast-related-post-cta .ast-related-post-link::before, .nav-links .nav-previous a::before, .jr-btn:not(.jr-btn-reverse)::before { left: 0 !important; /* 背景從左側開始延展 */ right: auto !important; /* 防呆設計 */ } /* ----------------------------------------- */ /* 4. 方向性獨立設定：由右至左 (Right to Left) */ /* 涵蓋：下一篇文章、通用反向按鈕 */ /* ----------------------------------------- */ .nav-links .nav-next a, .jr-btn.jr-btn-reverse { background-position: right top, right bottom !important; /* 底線向右收合與展開 */ } .nav-links .nav-next a::before, .jr-btn.jr-btn-reverse::before { right: 0 !important; /* 背景從右側開始延展 */ left: auto !important; /* 防呆設計 */ } /* ----------------------------------------- */ /* 5. 滑鼠懸停狀態共用設定 (Shared Hover States) */ /* ----------------------------------------- */ .ast-read-more-container a:hover, .ast-related-post-cta .ast-related-post-link:hover, .nav-links .nav-previous a:hover, .nav-links .nav-next a:hover, .jr-btn:hover { color: #111820 !important; /* 滑入後轉為深邃的曜岩黑，與沙金背景完美搭配 */ background-size: 0 1px, 0 1px !important; /* 寬度歸零，依據方向收合 */ /* 滑入時的動畫延遲設定 */ transition: color 0.6s cubic-bezier(0.4, 0, 0.2, 1) 0.6s, background-size 0.6s cubic-bezier(0.4, 0, 0.2, 1) 0s !important; } .ast-read-more-container a:hover::before, .ast-related-post-cta .ast-related-post-link:hover::before, .nav-links .nav-previous a:hover::before, .nav-links .nav-next a:hover::before, .jr-btn:hover::before { width: 100% !important; background-color: #E2C073 !important; /* 實心沙金色 */ /* 滑入時背景動畫延遲設定 */ transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1) 0.6s, background-color 0.6s cubic-bezier(0.4, 0, 0.2, 1) 0.6s !important; } /** * ============================================================================== * Project: 靜睿設計所 × 慢構 * Author: Ray Shih (施睿皇) - Jingrui Design Studio * Email: n8822314n@gmail.com * Contact: services@revonteso.com * Created: 2026-05-12 * * Copyright (c) 2026 Jingrui Design Studio. All rights reserved. * * Unauthorized use, reproduction, or distribution is prohibited. * ============================================================================== */ /* * 更新日誌 (Changelog): * [2026-05-12] 1.1.0 延伸設計：為文章彙整標題 (h1) 與相關文章標題 (h2) 導入「不規則三角形」的墨水微動效，強化侘寂美學。 */ /* ========================================= 5. 標題側邊：不規則三角形墨水印記 對象：h1.page-title.ast-archive-title, h2.ast-related-posts-title ========================================= */ /* 確保標題容器具有相對定位與適當的左側留白 */ .ast-archive-description .page-title.ast-archive-title, .ast-related-posts-title-section .ast-related-posts-title { position: relative; padding-left: 28px; /* 留出不規則三角形的空間 */ display: inline-flex; align-items: center; color: #0f0d0a; } /* 使用偽元素生成不規則三角形 */ .ast-archive-description .page-title.ast-archive-title::before, .ast-related-posts-title-section .ast-related-posts-title::before { content: ''; position: absolute; left: 0; top: 50%; /* 基礎尺寸與墨黑色 */ width: 14px; height: 16px; background-color: #0f0d0a; /* 核心技術：使用 clip-path 切割出略微傾斜、不對稱的三角形 */ clip-path: polygon(50% 0%, 100% 85%, 10% 100%); /* 微妙的變形與旋轉動畫，模擬手繪墨跡的呼吸感 */ animation: inkTriangleMorph 4s ease-in-out infinite alternate; } /* 定義不規則三角形的有機變形動畫 */ @keyframes inkTriangleMorph { 0% { clip-path: polygon(50% 0%, 100% 85%, 10% 100%); transform: translateY(-50%) rotate(0deg); } 100% { /* 頂點微移，創造液體流動或手繪不完美的錯覺 */ clip-path: polygon(40% 10%, 90% 100%, 0% 80%); transform: translateY(-50%) rotate(8deg); } } /** * ============================================================================== * Project: 靜睿設計所 × 慢構 * Author: Ray Shih (施睿皇) - Jingrui Design Studio * Email: n8822314n@gmail.com * Contact: services@revonteso.com * Created: 2026-05-12 * * Copyright (c) 2026 Jingrui Design Studio. All rights reserved. * * Unauthorized use, reproduction, or distribution is prohibited. * ============================================================================== */ /* * 更新日誌 (Changelog): * [2026-05-12] 1.0.6 新增文章列表視覺優化：縮放外框線動效、分類標籤底色、墨水圓點標題裝飾。 */ /* ========================================= 1. 圖片外框線動畫效果 (呼吸感) ========================================= */ .ast-blog-featured-section.post-thumb { position: relative; overflow: hidden; display: block; } /* 圖片本身的微放大過渡 */ .post-thumb-img-content img { transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94); } /* 利用 ::after 繪製內縮的外框線 */ .ast-blog-featured-section.post-thumb::after { content: ''; position: absolute; top: 15px; left: 15px; right: 15px; bottom: 15px; border: 1px solid rgba(240, 242, 245, 0.85); /* 唯美的冷霜白 */ opacity: 0; transform: scale(0.95); transition: all 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94); pointer-events: none; /* 確保不阻擋圖片點擊 */ } /* 滑鼠懸停：圖片放大，框線浮現並延展 */ .ast-blog-featured-section.post-thumb:hover img { transform: scale(1.03); } .ast-blog-featured-section.post-thumb:hover::after { opacity: 1; transform: scale(1); } /* ========================================= 2. 分類標籤背景底色 (侘寂留白) ========================================= */ .ast-taxonomy-container.cat-links.default a { background-color: #f0f2f5; /* 輕盈的淺灰白底 */ color: #0f0d0a; padding: 6px 14px; border-radius: 2px; font-size: 12px; letter-spacing: 0.05em; text-decoration: none; transition: background-color 0.3s ease, color 0.3s ease; display: inline-block; margin-bottom: 12px; } .ast-taxonomy-container.cat-links.default a:hover { background-color: #0f0d0a; color: #f0f2f5; } /* ========================================= 3. 標題左側不規則墨水圓點 ========================================= */ h2.entry-title.ast-blog-single-element { position: relative; padding-left: 20px; /* 留出墨水點的空間 */ } h2.entry-title.ast-blog-single-element::before { content: ''; position: absolute; left: 0; top: 55%; /* 垂直置中，並微調視覺重心 */ transform: translateY(-50%); width: 8px; height: 10px; background-color: #0f0d0a; /* 墨黑色 */ /* 核心技術：利用複合 border-radius 產生有機的不規則形狀 */ border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%; /* 加入微妙的有機變形動畫 */ animation: inkMorph 4s ease-in-out infinite alternate; } /* 定義墨水滴的變形動畫，營造生命力 */ @keyframes inkMorph { 0% { border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%; } 100% { border-radius: 60% 40% 30% 70% / 60% 50% 40% 50%; } } /** * ============================================================================== * Project: 靜睿設計所 × 慢構 * Author: Ray Shih (施睿皇) - Jingrui Design Studio * Email: n8822314n@gmail.com * Contact: services@revonteso.com * Created: 2026-05-12 * * Copyright (c) 2026 Jingrui Design Studio. All rights reserved. * * Unauthorized use, reproduction, or distribution is prohibited. * ============================================================================== */ /* * 更新日誌 (Changelog): * [2026-05-12] 1.0.7 優化單頁與相關文章 UI：新增圖片外框動效、分類標籤底色、標題墨水圓點。 */ /* ========================================= 1. 圖片外框線動畫效果 (框線浮現與圖片微距) ========================================= */ /* 鎖定單頁與相關文章的圖片容器 */ .post-thumb-img-content.post-thumb { position: relative; overflow: hidden; display: block; border-radius: 4px; /* 柔和的邊角，視需求可移除 */ } /* 圖片本體的 Hover 微放大，增加沉浸感 */ .post-thumb-img-content.post-thumb img { transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94); display: block; width: 100%; } /* 利用 ::after 繪製預先縮小的隱藏外框線 */ .post-thumb-img-content.post-thumb::after { content: ''; position: absolute; top: 15px; left: 15px; right: 15px; bottom: 15px; border: 1px solid rgba(240, 242, 245, 0.85); /* 慢構冷霜白 */ opacity: 0; transform: scale(0.95); transition: all 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94); pointer-events: none; /* 確保不阻礙底層 a 連結點擊 */ } /* 滑鼠懸停：圖片放大，外框線回歸原比例並浮現 */ .ast-post-format-:hover .post-thumb-img-content.post-thumb img, .ast-related-post:hover .post-thumb-img-content.post-thumb img { transform: scale(1.03); } .ast-post-format-:hover .post-thumb-img-content.post-thumb::after, .ast-related-post:hover .post-thumb-img-content.post-thumb::after { opacity: 1; transform: scale(1); } /* ========================================= 2. 分類標籤背景底色 (侘寂質感) ========================================= */ .ast-taxonomy-container.cat-links a { background-color: #f0f2f5; /* 輕盈的淺灰白底 */ color: #0f0d0a; /* 墨黑文字 */ padding: 4px 12px; border-radius: 2px; font-size: 13px; letter-spacing: 0.05em; text-decoration: none; transition: background-color 0.3s ease, color 0.3s ease; display: inline-block; margin-bottom: 12px; /* 與下方標題拉開呼吸空間 */ } .ast-taxonomy-container.cat-links a:hover { background-color: #0f0d0a; color: #f0f2f5; } /* ========================================= 3. 標題左側不規則墨水圓點 (動態呼吸感) 共用選擇器：單頁的 h1.entry-title 與 相關文章的 h3.entry-title ========================================= */ .entry-header .entry-title, .ast-related-post-title.entry-title { position: relative; padding-left: 24px; /* 留出墨水點的空間 */ } .entry-header .entry-title::before, .ast-related-post-title.entry-title::before { content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 10px; height: 10px; background-color: #0f0d0a; /* 墨色 */ /* 核心技術：複合 border-radius 產生有機形狀 */ border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%; /* 微妙的有機變形動畫 */ animation: inkMorph 4s ease-in-out infinite alternate; } /* 定義墨水滴的變形動畫 */ @keyframes inkMorph { 0% { border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%; } 100% { border-radius: 60% 40% 30% 70% / 60% 50% 40% 50%; } } /** * ============================================================================== * Project: 靜睿設計所 × 慢構 * Author: Ray Shih (施睿皇) - Jingrui Design Studio * Email: n8822314n@gmail.com * Contact: services@revonteso.com * Created: 2026-05-12 * * Copyright (c) 2026 Jingrui Design Studio. All rights reserved. * * Unauthorized use, reproduction, or distribution is prohibited. * ============================================================================== */ /* * 更新日誌 (Changelog): * [2026-05-12] 1.0.9 強化文章描述區塊 (Excerpt) 懸停動效：新增 Hover 左框線加粗、內文縮排退讓與淺灰底色高亮。 */ /* ========================================= 4. 文章摘要描述區塊優化 (日系留白與互動高亮) 共用選擇器：文章列表描述 與 相關文章描述 ========================================= */ .ast-excerpt-container.ast-blog-single-element p, p.ast-related-post-excerpt.entry-content.clear { color: #5D6670; /* 溫潤的深墨灰 */ font-size: 14px; line-height: 1.85; letter-spacing: 0.06em; /* 預留背景色出現時的內部留白 (Padding) */ padding: 10px 16px; /* 核心佈局：創造與上下元素的距離 */ margin-top: 18px; margin-bottom: 28px; /* 日系引言初始微設計 */ border-left: 2px solid rgba(15, 13, 10, 0.12); /* 預設極細框線 */ background-color: transparent; /* 預設透明底色 */ border-radius: 0 4px 4px 0; /* 右側微圓角，底色出現時更柔和 */ /* 設置平滑過渡動畫，包含內距、邊框、背景色與文字色 */ transition: all 0.45s cubic-bezier(0.25, 0.46, 0.45, 0.94); } /* 增加 Hover 時的深度互動 綁定父層 hover，讓滑鼠進入文章區塊時就觸發，體驗更佳 */ .ast-post-format-:hover .ast-excerpt-container.ast-blog-single-element p, .ast-related-post:hover p.ast-related-post-excerpt.entry-content.clear { border-left: 4px solid rgba(15, 13, 10, 0.4); /* 飾線加粗且微微加深 */ padding-left: 24px; /* 內文向右微縮排，產生退讓的空間感 */ background-color: #f4f5f7; /* 增加淺灰底色，營造高亮標記感 */ color: #33383D; /* 文字微微加深，引導視覺聚焦 */ } /** * ============================================================================== * Project: 靜睿設計所 × 慢構 * Author: Ray Shih (施睿皇) - Jingrui Design Studio * Email: n8822314n@gmail.com * Contact: services@jingruidesign.com * Created: 2026-05-11 * * Copyright (c) 2026 Jingrui Design Studio. All rights reserved. * * Unauthorized use, reproduction, or distribution is prohibited. * ============================================================================== */ /* 操作流程：針對 #footer_menu_h 的文字項目，使用 ::before 偽元素建立隱藏的半透明白色背景 (rgba)。本次針對 transition 屬性延長秒數至 0.8s，並套用 cubic-bezier 緩動曲線，達成極致柔和的滑順展開與收合動畫。 */ /* 針對電腦版 (Screen Width / 螢幕寬度 1025px 以上) */ @media (min-width: 1025px) { #footer_menu_h .elementor-widget-container .elementor-icon-list-items { display: flex !important; /* 顯示模式 (Display Mode): 彈性盒子 (Flexbox) */ flex-direction: row !important; /* 排列方向 (Flex Direction): 水平橫向 (Row) */ justify-content: flex-start !important; /* 主軸對齊 (Justify Content): 靠前對齊 (Flex-start) */ gap: 20px !important; /* 元素間距 (Gap) */ margin: 0 !important; padding: 0 !important; } #footer_menu_h .elementor-widget-container .elementor-icon-list-item { display: flex !important; margin: 0 !important; padding: 0 !important; } #footer_menu_h .elementor-widget-container .elementor-icon-list-item:first-child { margin-left: 0 !important; padding-left: 0 !important; } #footer_menu_h .elementor-widget-container .elementor-icon-list-item:last-child { margin-right: 0 !important; padding-right: 0 !important; } /* 項目文字基本設定，加入相對定位與內距 */ #footer_menu_h .elementor-widget-container .elementor-icon-list-text { writing-mode: vertical-lr !important; /* 書寫模式 (Writing Mode): 直書由左至右 */ letter-spacing: 0.8em !important; /* 字元間距 (Letter Spacing) */ line-height: 40px !important; /* 行高 (Line Height) */ position: relative !important; /* 相對定位 (Relative Positioning): 作為偽元素的對齊參考點 */ padding: 15px 10px !important; /* 內邊距 (Padding): 讓背景延展時有足夠的包覆空間 */ z-index: 1 !important; /* 確保文字層級在背景之上 */ transition: color 0.8s cubic-bezier(0.4, 0, 0.2, 1) !important; /* 轉場效果 (Transition): 同步延長文字變色時間至 0.8s，套用平滑緩動 */ } /* 偽元素半透明背景動畫設定 (Semi-transparent Background Animation Setup) */ #footer_menu_h .elementor-widget-container .elementor-icon-list-text::before { content: "" !important; /* 偽元素必須的 content 屬性 */ position: absolute !important; /* 絕對定位 (Absolute Positioning) */ top: 0 !important; /* 從頂部開始 (Start from Top) */ left: 0 !important; /* 靠左對齊 (Align Left) */ width: 100% !important; /* 寬度填滿文字區塊 (Full Width) */ height: 0 !important; /* 初始高度為 0 (Initial Height is 0) */ background-color: rgba(255, 255, 255, 0.8) !important; /* 背景色 (Background Color): 80% 不透明度的白色 */ z-index: -1 !important; /* 放置於文字後方 (Send to Back) */ transition: height 0.8s cubic-bezier(0.4, 0, 0.2, 1) !important; /* 轉場效果 (Transition): 時間延長至 0.8s，使用緩動曲線呈現起步平穩、結尾柔和的動畫 */ } /* 滑鼠懸停時的變化 (Hover State) */ #footer_menu_h .elementor-widget-container .elementor-icon-list-text:hover::before { height: 100% !important; /* 滑入時，高度由上而下延展至 100% (Expand to 100% Height) */ } /* 防止背景讓淺色文字消失，懸停時將文字轉為深灰色 */ #footer_menu_h .elementor-widget-container .elementor-icon-list-text:hover { color: #3a3a3a !important; /* 懸停時文字顏色 (Hover Text Color) */ } } /* 針對平板與手機版 (Screen Width / 螢幕寬度 1024px 以下) */ @media (max-width: 1024px) { #footer_menu_h .elementor-widget-container .elementor-icon-list-items { display: flex !important; flex-direction: row !important; flex-wrap: wrap !important; justify-content: center !important; gap: 20px !important; margin: 0 !important; padding: 0 !important; } #footer_menu_h .elementor-widget-container .elementor-icon-list-item { display: flex !important; margin: 0 !important; padding: 0 !important; } #footer_menu_h .elementor-widget-container .elementor-icon-list-text { writing-mode: horizontal-tb !important; /* 恢復水平橫書 (Horizontal Writing) */ letter-spacing: normal !important; line-height: normal !important; position: relative !important; padding: 10px 15px !important; z-index: 1 !important; transition: color 0.8s cubic-bezier(0.4, 0, 0.2, 1) !important; } /* 手機版互動背景 (Mobile Interactive Background) */ #footer_menu_h .elementor-widget-container .elementor-icon-list-text::before { content: "" !important; position: absolute !important; top: 0 !important; left: 0 !important; width: 100% !important; height: 0 !important; background-color: rgba(255, 255, 255, 0.8) !important; /* 80% 不透明度的白色 */ z-index: -1 !important; transition: height 0.8s cubic-bezier(0.4, 0, 0.2, 1) !important; } #footer_menu_h .elementor-widget-container .elementor-icon-list-text:hover::before, #footer_menu_h .elementor-widget-container .elementor-icon-list-text:active::before { height: 100% !important; } #footer_menu_h .elementor-widget-container .elementor-icon-list-text:hover, #footer_menu_h .elementor-widget-container .elementor-icon-list-text:active { color: #3a3a3a !important; } } /** * ============================================================================== * Project: 靜睿設計所 × 慢構 * Author: Ray Shih (施睿皇) - Jingrui Design Studio * Email: n8822314n@gmail.com * Contact: services@revonteso.com * Created: 2026-05-12 * * Copyright (c) 2026 Jingrui Design Studio. All rights reserved. * * Unauthorized use, reproduction, or distribution is prohibited. * ============================================================================== */ /* * 更新日誌 (Changelog): * [2026-05-12] 1.1.2 首頁精選文章區塊：針對 .index_archive_box (HFE Posts) 建立獨立 CSS 模組，延續圖片呼吸框線、標題墨跡、摘要懸停與沙金按鈕之侘寂美學。 */ /* ========================================= 首頁精選文章區塊 (.index_archive_box) 獨立樣式模組 ========================================= */ /* ----------------------------------------- */ /* 一、 圖片外框線動畫效果 (框線浮現與圖片微距) */ /* ----------------------------------------- */ .index_archive_box .hfe-post-image { position: relative; overflow: hidden; display: block; border-radius: 4px; /* 柔和的邊角 */ } .index_archive_box .hfe-post-image img { transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94); display: block; width: 100%; } .index_archive_box .hfe-post-image::after { content: ''; position: absolute; top: 15px; left: 15px; right: 15px; bottom: 15px; border: 1px solid rgba(240, 242, 245, 0.85); /* 慢構冷霜白 */ opacity: 0; transform: scale(0.95); transition: all 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94); pointer-events: none; } /* ----------------------------------------- */ /* 二、 標題左側不規則墨水圓點 (動態呼吸感) */ /* ----------------------------------------- */ .index_archive_box .hfe-post-title { position: relative; padding-left: 24px; /* 留出墨水點的空間 */ } .index_archive_box .hfe-post-title::before { content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 10px; height: 10px; background-color: #0f0d0a; /* 墨色 */ border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%; animation: inkMorph 4s ease-in-out infinite alternate; } @keyframes inkMorph { 0% { border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%; } 100% { border-radius: 60% 40% 30% 70% / 60% 50% 40% 50%; } } /* ----------------------------------------- */ /* 三、 文章摘要描述區塊優化 (日系留白與互動高亮) */ /* ----------------------------------------- */ .index_archive_box .hfe-post-excerpt { color: #5D6670; /* 溫潤的深墨灰 */ font-size: 14px; line-height: 1.85; letter-spacing: 0.06em; padding: 10px 16px; margin-top: 18px; margin-bottom: 28px; border-left: 2px solid rgba(15, 13, 10, 0.12); /* 預設極細框線 */ background-color: transparent; border-radius: 0 4px 4px 0; transition: all 0.45s cubic-bezier(0.25, 0.46, 0.45, 0.94); } /* ----------------------------------------- */ /* 四、 閱讀更多按鈕 (沙金漸層與曜岩黑動效) */ /* ----------------------------------------- */ .index_archive_box .hfe-read-more { position: relative; display: inline-flex; align-items: center; justify-content: center; padding: 12px 24px; border: none; overflow: hidden; z-index: 1; text-decoration: none; color: #585858; letter-spacing: 0.15em; line-height: 1.5; background-image: linear-gradient(#E6E5E1, #E6E5E1), linear-gradient(#E6E5E1, #E6E5E1); background-repeat: no-repeat; background-size: 100% 1px, 100% 1px; background-position: left top, left bottom; transition: color 0.6s cubic-bezier(0.4, 0, 0.2, 1) 0s, background-size 0.6s cubic-bezier(0.4, 0, 0.2, 1) 0.6s; } .index_archive_box .hfe-read-more::before { content: ""; position: absolute; top: 0; left: 0; width: 0; height: 100%; background-color: rgba(226, 192, 115, 0.2); /* 半透明沙金 */ z-index: -1; transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1) 0s, background-color 0.6s cubic-bezier(0.4, 0, 0.2, 1) 0s; } /* ----------------------------------------- */ /* 五、 統一綁定卡片懸停 (Hover) 觸發事件 */ /* ----------------------------------------- */ /* 當滑鼠進入整張卡片時，同步觸發圖片、摘要與按鈕的連動效 */ .index_archive_box .hfe-post-card:hover .hfe-post-image img { transform: scale(1.03); } .index_archive_box .hfe-post-card:hover .hfe-post-image::after { opacity: 1; transform: scale(1); } .index_archive_box .hfe-post-card:hover .hfe-post-excerpt { border-left: 4px solid rgba(15, 13, 10, 0.4); padding-left: 24px; /* 退讓感縮排 */ background-color: #f4f5f7; color: #33383D; } .index_archive_box .hfe-post-card:hover .hfe-read-more { color: #111820; background-size: 0 1px, 0 1px; transition: color 0.6s cubic-bezier(0.4, 0, 0.2, 1) 0.6s, background-size 0.6s cubic-bezier(0.4, 0, 0.2, 1) 0s; } .index_archive_box .hfe-post-card:hover .hfe-read-more::before { width: 100%; background-color: #E2C073; /* 實心沙金 */ transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1) 0.6s, background-color 0.6s cubic-bezier(0.4, 0, 0.2, 1) 0.6s; } /** * ============================================================================== * Project: 靜睿設計所 × 慢構 * Author: Ray Shih (施睿皇) - Jingrui Design Studio * Email: n8822314n@gmail.com * Contact: services@jingruidesign.com * Created: 2026-05-13 * * Copyright (c) 2026 Jingrui Design Studio. All rights reserved. * * Unauthorized use, reproduction, or distribution is prohibited. * ============================================================================== */ /* * 更新日誌 (Changelog): * [2026-05-13] 1.0.1 修正毛玻璃遮色片效果為深色霧面，調整背景色彩與透明度以達到預期視覺質感。 * [2026-05-12] 1.0.0 實作頂部 Banner 毛玻璃遮色片效果，優化透明度層次與點擊穿透問題，移除多餘雜訊以確保純淨質感。 */ /* ========================================= 全站展覽主題 Banner 區塊 (.in_banner_mak) Sitewide Exhibition Theme Banner Block ========================================= */ /* 1. 確保父容器有相對定位，才能完美限制遮色片的作用範圍 */ /* Ensure the parent container has relative positioning to perfectly limit the scope of the mask */ .in_banner_mak { position: relative !important; overflow: hidden !important; } /* 2. 毛玻璃遮色片核心效果 */ /* Core frosted glass mask effect */ .in_banner_mak::before { content: "" !important; position: absolute !important; top: 0 !important; left: 0 !important; width: 100% !important; height: 100% !important; /* 調整透明度：不要太穿透，提高色彩佔比來加強實體質感 */ /* Adjust transparency: prevent excessive punch-through, increase color proportion to enhance physical texture */ /* 這裡使用深色色碼，達到深色霧面效果 (Dark matte effect) */ background-color: rgba(30, 30, 30, 0.5) !important; /* 核心毛玻璃濾鏡：適度模糊與提升飽和度，維持極致純淨的無雜訊效果 */ /* Core frosted glass filter: moderate blur and increased saturation to maintain an ultra-pure, noise-free effect */ backdrop-filter: blur(5px) saturate(120%) !important; -webkit-backdrop-filter: blur(5px) saturate(120%) !important; /* 防呆機制：解決層級覆蓋導致上方主選單或連結無法點擊的問題 */ /* Failsafe mechanism: solve the issue where layer overlapping causes the top main menu or links to be unclickable */ z-index: 0 !important; pointer-events: none !important; /* 讓滑鼠事件完全穿透遮色片 / Allow mouse events to completely pass through the mask */ } /* 3. 確保內文層級高於毛玻璃，維持文字銳利度 */ /* Ensure the content layer is higher than the frosted glass to maintain text sharpness */ .in_banner_mak > .elementor-element, .in_banner_mak .elementor-widget-container { position: relative !important; z-index: 1 !important; } /** * ============================================================================== * Project: [謝導演的作品 - 搜尋無結果頁面 日系樣式重構] * Author: Ray Shih (施睿皇) - Jingrui Design Studio * Email: n8822314n@gmail.com * Contact: services@jingruidesign.com * Created: 2026-05-13 * Version: 1.0.2 * * Copyright (c) 2026 Jingrui Design Studio. All rights reserved. * * Unauthorized use, reproduction, or distribution is prohibited. * ============================================================================== */ /* 更新日誌： 2026-05-13 (v1.0.2): Ray - 擴充 CSS 作用域，將樣式同步應用於 `body.blog` (文章彙總頁) 與 `body.archive.category` (文章分類頁)。 2026-05-13 (v1.0.1): Ray - 修正 CSS 污染 Header/Footer 區塊的問題。 操作流程： 1. 嚴格鎖定 `#content` 作用域，確保 `.ast-container` 樣式僅在主內容區生效。 2. 不變動現有 HTML 結構（DOM），利用 CSS 絕對定位 (absolute positioning) 組合表單與按鈕。 3. 利用逗號 `,` 串接多個 body class 選擇器，維持代碼簡潔。 */ /* 1. 外部容器：鎖定在主內容區 (#content)，加入白底、微圓角與柔和陰影 */ body.archive.category #content.site-content > .ast-container, body.blog #content.site-content > .ast-container { background-color: #ffffff; border-radius: 16px; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.03); padding: 60px 40px; margin: 40px auto; } /* 確保 H1 主標題下方有適當的日系留白 (Whitespace) */ body.archive.category #content .ast-archive-description, body.blog #content .ast-archive-description { margin-bottom: 40px; border-bottom: 1px solid #f3f4f6; /* 極細分隔線 */ padding-bottom: 20px; text-align: center; } /* 2. 無結果區塊排版：置中與日系文字設定 */ body.archive.category #content .no-results.not-found, body.blog #content .no-results.not-found { text-align: center; padding-top: 20px; } /* 說明文字：低對比度與優雅字距 (letter-spacing) */ body.archive.category #content .no-results .page-content p, body.blog #content .no-results .page-content p { color: #6b7280; font-size: 15px; letter-spacing: 0.1em; font-weight: 300; margin-bottom: 40px; } /* 3. 搜尋表單重構：不動 HTML，透過 CSS Flexbox 置中佈局 */ body.archive.category #content .no-results .search-form, body.blog #content .no-results .search-form { display: flex; justify-content: center; margin: 0 auto; max-width: 480px; } /* 將 label 設為相對定位容器 */ body.archive.category #content .no-results .search-form label, body.blog #content .no-results .search-form label { position: relative; width: 100%; display: block; margin: 0; } /* 輔助文字隱藏，確保無障礙功能 (Accessibility) 運作但不干擾視覺 */ body.archive.category #content .no-results .search-form .screen-reader-text, body.blog #content .no-results .search-form .screen-reader-text { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; } /* 輸入框：膠囊設計，使用 !important 覆蓋 WordPress 預設樣式 */ body.archive.category #content .no-results .search-form .search-field, body.blog #content .no-results .search-form .search-field { width: 100%; padding: 16px 50px 16px 24px !important; border: 1px solid #e5e7eb !important; border-radius: 30px !important; font-size: 15px; color: #374151; background-color: #fcfcfc; box-shadow: none !important; transition: border-color 0.3s ease, background-color 0.3s ease; } /* 輸入框 Focus (聚焦) 狀態 */ body.archive.category #content .no-results .search-form .search-field:focus, body.blog #content .no-results .search-form .search-field:focus { border-color: #9ca3af !important; background-color: #ffffff; outline: none; } /* 放大鏡圖示按鈕：絕對定位至輸入框右側 */ body.archive.category #content .no-results .search-form .ast-search-submit, body.blog #content .no-results .search-form .ast-search-submit { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); background: transparent !important; border: none !important; color: #9ca3af; cursor: pointer; padding: 10px; display: flex; align-items: center; justify-content: center; box-shadow: none !important; transition: color 0.3s ease; } body.archive.category #content .no-results .search-form .ast-search-submit:hover, body.blog #content .no-results .search-form .ast-search-submit:hover { color: #4b5563; } /* 約束 SVG icon 的大小 */ body.archive.category #content .no-results .search-form .ast-search-submit svg, body.blog #content .no-results .search-form .ast-search-submit svg { width: 20px; height: 20px; fill: currentColor; /* 讓 SVG 繼承文字顏色 */ } /* 強制隱藏多餘的原生 submit 按鈕 */ body.archive.category #content .no-results .search-form input[type="submit"], body.blog #content .no-results .search-form input[type="submit"] { display: none !important; } /** * ============================================================================== * Project: [謝導演的作品 - 日系筆墨返回頂端按鈕] * Author: Ray Shih (施睿皇) - Jingrui Design Studio * Email: n8822314n@gmail.com * Contact: services@jingruidesign.com * Created: 2026-05-13 * Version: 1.0.3 * * Copyright (c) 2026 Jingrui Design Studio. All rights reserved. * * Unauthorized use, reproduction, or distribution is prohibited. * ============================================================================== */ /* 更新日誌： 2026-05-13 (v1.0.3): Ray - 取消半透明背景，回歸純粹墨黑與純白箭頭。利用 stroke 屬性將 Astra 預設銳利 SVG 箭頭柔化。保留捲軸高度監聽與呼吸動畫。 2026-05-13 (v1.0.2): Ray - 導入毛玻璃半透明濾鏡與呼吸動畫。 2026-05-13 (v1.0.1): Ray - 修正按鈕尺寸。 2026-05-13 (v1.0.0): Ray - 初始化代碼。 操作流程： 1. 取消 backdrop-filter，改回實體色。 2. 針對 SVG 加入 stroke-linejoin: round 進行視覺柔化。 3. 配合 JS .is-visible 類別控制淡入淡出。 */ /* 僅針對桌機版生效 */ @media (min-width: 922px) { /* 水墨呼吸動態：不規則 -> 圓形 -> 不規則 */ @keyframes ink-breathe { 0% { border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; } 50% { border-radius: 50%; box-shadow: 2px 4px 15px rgba(0, 0, 0, 0.1); } 100% { border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; } } /* 覆寫 Astra 預設行為，改用 opacity 支援平滑動畫 */ #ast-scroll-top.ast-scroll-to-top-right { display: flex !important; opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; /* 隱藏時不可點擊 */ transform: translateY(20px) !important; /* 初始位置微幅下沉 */ width: 50px !important; height: 50px !important; line-height: 50px !important; /* 實體墨黑背景，提升對比度 */ background-color: #1a1a1a !important; border: none !important; /* 動態綁定 */ animation: ink-breathe 6s ease-in-out infinite !important; transition: opacity 0.8s ease, visibility 0.8s ease, transform 0.8s cubic-bezier(0.25, 0.8, 0.25, 1), background-color 0.5s ease !important; align-items: center !important; justify-content: center !important; padding: 0 !important; } /* 當 JS 加入 .is-visible 時的顯示狀態 (緩緩浮現) */ #ast-scroll-top.ast-scroll-to-top-right.is-visible { opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; transform: translateY(0) !important; } /* 懸停效果 (Hover)：色澤轉為日系金，並微幅上浮 */ #ast-scroll-top.ast-scroll-to-top-right.is-visible:hover { background-color: #c5a059 !important; /* 實體日系金 */ transform: translateY(-4px) !important; box-shadow: 0 8px 20px rgba(197, 160, 89, 0.3) !important; } /* 中間箭頭：純白設定 + 邊角柔化黑科技 */ #ast-scroll-top .ast-icon.icon-arrow svg { width: 22px !important; height: 22px !important; /* 回歸純白填色 */ fill: #ffffff !important; /* SVG 邊角柔化設定：透過外框線讓銳角變圓潤 */ stroke: #ffffff !important; stroke-width: 1.5px !important; /* 增加箭頭份量感 */ stroke-linejoin: round !important; /* 轉折處圓滑 */ stroke-linecap: round !important; /* 端點圓滑 */ transition: fill 0.5s ease, stroke 0.5s ease !important; position: relative; z-index: 2; } /* 維持無障礙語意標籤隱藏 */ #ast-scroll-top .screen-reader-text { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; } } /** * ============================================================================== * Project: 文章列表左右排列組合 UI (全站文章列表頁 + 單篇文章頁通用) * Author: Ray (施睿皇) - Jingrui Design Studio * Email: jingrui.ray@gmail.com * Contact: services@jingruidesign.com * Created: 2026-08-04 16:50 * Updated: 2026-08-04 20:40 * Version: 1.11.0 * * Copyright (c) 2026 Jingrui Design Studio. All rights reserved. * * Unauthorized use, reproduction, or distribution is prohibited. * ============================================================================== * * 【架構判讀】 * 完整往上追溯 DOM 才發現：真正把文章「框住」的元件不是 #primary / #main， * 而是更上層的 .ast-container（Elementor Kit 外框，max-width:1000px， * 左右各 40px 內距，置中顯示）。v1.0.0 只加寬了 #primary/#main/.ast-article-post * 到 1140px，但它們仍被包在 .ast-container 這個 1000px 外框「裡面」， * 所以無法真正出框滿版。這一版改用「跳框(Break-out)」技巧，讓每一篇文章 * 自己脫離 .ast-container 的寬度限制，直接以視窗(100vw)為畫布， * 不論外層框架多寬都能保證左右完全貼齊螢幕邊緣。 * * 【操作流程】 * 1. 完全不修改 HTML 結構，僅用 CSS 重新排列/跳框既有元素。 * 2. 貼上位置：外觀 → 自訂 → 額外 CSS，或子佈景主題 style.css 最下方。 * （若 v1.0.0 已貼上，請直接整段取代，勿疊加兩份，避免規則互相打架。） * 3. 排列邏輯： * - 手機 (< 545px)：圖片上／文字下，圖片維持滿版貼邊，文字左右留內距。 * - 平板 (545px–1023px)：圖文「同一行」左右並排，方向固定（圖左文右）， * 圖片貼齊外側螢幕邊緣，文字僅在外側留內距。 * - 桌機 (≥ 1024px)：圖文同一行左右並排 + 奇偶交錯（Z 字型畫廊節奏）， * 每一篇文章各自跳出 1000px 外框，圖片永遠貼齊視窗邊緣，達到「出框滿版」。 * * 【更新日誌 Update Log】 * v1.0.0 (2026-08-04 16:50) 初版：Grid 左右分欄、響應式斷點、交錯排列組合。 * v1.1.0 (2026-08-04 17:07) 重大更新： * - 新增「跳框滿版」機制，文章脫離 .ast-container 1000px 外框限制，改以 100vw 為畫布。 * - 圖片一律貼齊視窗邊緣滿版，不再受外框內距侷限。 * - 移除 v1.0.0 對 #primary/#main/.ast-article-post 的 1140px 加寬規則（已被跳框機制取代， * 舊規則與新版 100vw 設定會互相衝突，故整段移除）。 * - 手機版新增圖片滿版貼邊處理（先前僅維持主題原生堆疊，圖片仍受限外框）。 * - 文字區塊新增依交錯方向切換的外側內距，避免文字貼齊螢幕邊緣影響閱讀。 * v1.1.1 (2026-08-04 17:15) 修正： * - 補上 grid-auto-rows: min-content，嘗試修正文字列被圖片跨列需求「撐大」的問題。 * v1.1.2 (2026-08-04 17:22) 修正（根本原因）： * - 找到真正原因：Grid 對「跨列項目」的軌道成長演算法，即使軌道設為 min-content， * 仍屬於「內容導向」軌道，還是會被撐大以容納圖片的固定比例高度，v1.1.1 治標不治本。 * - 改用「圖片跟隨文字」策略：圖片 align-self:stretch、height:100%， * 不再用 aspect-ratio 強制圖片自訂高度，而是讓圖片高度完全依文字實際內容決定， * 並保留 min-height 保底（依斷點 240px／320px／380px），避免文字過短時圖片被壓扁。 * 如此一來 Grid 列高只由文字內容決定，不會反過來被圖片撐大，文字自然置中。 * v1.1.3 (2026-08-04 17:28) 修正（真正根因）： * - 找到 v1.1.2 仍不準確的原因：我自己加的 min-height（240/320/380px）保底值， * 本身就是一個「明確尺寸」，一樣會觸發 Grid 撐大文字列的問題，等於自己打自己。 * - 移除所有 min-height 保底值，改加 min-height:0 明確解除瀏覽器對圖片原生比例的 * 自動最小尺寸判斷。現在圖片高度 100% 完全跟隨文字實際內容，兩者互不強迫， * Grid 列不再被撐大，文字與圖片自然等高、對齊。（後續實測發現此法仍不夠可靠，見 v1.2.0） * v1.2.0 (2026-08-04 17:38) 架構調整（改用絕對定位，徹底根治）： * - 實測發現：即使圖片 height:100% + min-height:0，瀏覽器仍會用 的「原生像素比例」 * 作為跨列項目的最小尺寸貢獻依據，Grid 只要偵測到圖片是跨列項目，就會撐大文字列， * 這是 Grid 規格本身的行為，光靠調整圖片 CSS 無法根治。 * - 改採業界常見的作法：圖片改成 position:absolute（脫離 Grid 版面計算，不再是 * Grid item，自然不會影響列高），直接貼齊 .post-content 的實際高度（100%）， * 寬度固定為 50%。文字維持在 Grid 內正常排列，列高完全由文字內容決定。 * 兩者高度自然一致、對齊，且不再依賴任何演算法巧門，穩定可靠。 * v1.3.0 (2026-08-04 17:45) 新增： * - 移除全站 body 淡紫色底圖，改為純白背景，消除頁首區域殘留的色塊， * 視覺與滿版排版風格統一（此設定為全站套用，非僅本分類頁）。 * v1.4.0 (2026-08-04 18:05) 修正（設計師實測回報：陰影仍在、頁首留白過大）： * - 已用瀏覽器逐一比對原始碼，確認所有選擇器與實際 HTML class 100% 相符 * （設計師提供的截圖為 DevTools 檢查元素的框線提示，非頁面本身的視覺瑕疵， * 實際套用後排版已正確運作，特此記錄避免日後誤判）。 * - 找到真正的陰影來源：.ast-container 這個「白卡片外框」本身自帶 * box-shadow:0 10px 40px rgba(0,0,0,.03)，滿版化後仍殘留在頁首/標題區 * 周圍，一併關閉。 * - 找到頁首留白過大的來源：#primary 外層 .ast-container 本身有 * margin-top:40px + padding-top:60px，加上 #primary 自己的 * margin-top:64px，三層預留空間（共 164px）是主題為「透明頁首」設計的 * 避讓值，淡紫色底圖拿掉後失去視覺依託而顯得空洞，已收緊為更合理的比例。 * v1.5.0 (2026-08-04 18:30) 修正（設計師實測回報：標題小圖示與分隔線壓縮跑框）： * - 找到本檔案裡另外兩個既有裝飾模組與本次滿版排版打架： * (1) 標題左側墨水圓點：原本 `padding-left:20px` 是為窄版單欄設計，搭配 * `::before { left:0 }` 剛好貼齊文字。現在標題改用 6vw/8vw 內距， * 圓點仍停在 left:0，等於卡在文字前方一大段空白裡，變成「飄在外面」 * 的小圖示。已將圓點位置改為 `left: calc(6vw - 20px)`（偶數篇對應 * `calc(8vw - 20px)`），手機版固定貼齊 4px，讓圖示重新貼合文字。 * (2) 規格說明文字的日系引言邊框：內層 `

` 自帶 `border-left` + * `padding:10px 16px`，疊加在外層容器已經給的 6vw/8vw 內距之上， * 等於雙重內縮，造成文字被過度壓窄、且與標題/按鈕的左邊界對不齊。 * 已移除內層 `

` 的 padding 與 border-left，讓標題、內文、按鈕 * 共用同一條左邊界，畫面更整齊、不再壓縮。 * v1.6.0 (2026-08-04 18:50) 重大修正（設計師實測回報：其他頁面頂部出現空白色塊）： * - 找到根因：v1.3.0～v1.5.0 的 body / .ast-container / #primary 全站規則， * 以及全部 .ast-article-post 相關規則，都「沒有限定作用範圍」，導致連 * 「光影交會」等其他 Elementor 客製頁面也被套用，破壞了那些頁面原本的 * 頂部留白與背景設計，出現背景沒填滿的空白區塊。 * - 修正方式：所有規則統一加上 `body.category-daily-abstract` 前綴， * 鎖定只在本分類頁生效。其餘分類頁（都會美學系列／大師傳世系列）與 * 其他客製頁面完全不受影響，維持原樣。若之後確認要將此排版套用到其他 * 分類頁，屆時再另外評估擴大範圍，不會再無意間波及全站。 * v1.7.0 (2026-08-04 19:20) 重大擴充（設計師需求：套用到全站文章列表頁 + 修正頂部空白／分隔線／置中）： * - 【範圍擴大】v1.6.0 鎖定的 `body.category-daily-abstract` 太窄，只涵蓋單一分類。 * 改用 `:is(body.blog, body.archive)` 涵蓋主網誌頁與所有分類/標籤/日期封存頁， * 一次套用到全部文章系列（抽象輕賞／都會美學／大師傳世…），不用每個分類各貼一次。 * 容器/背景類規則（背景色、.ast-container 陰影、頂部留白）額外加上 * `body.single-post`，讓單篇文章頁也一併受惠；.ast-article-post 排版規則 * 則維持只在 body.blog/body.archive 生效（單篇文章頁本身沒有 .ast-article-post * 這個 class，即使掛上也不會有作用，但保持選擇器單純、語意清楚）。 * - 【真正找到頂部空白元凶】追蹤 DOM 才發現：#primary 上方其實還有一個 * `.astra-advanced-hook-1468` 區塊——Astra 主題「Hook／Custom Layout」功能 * 掛載的全域 Elementor 範本，內部完全是空的容器（沒有放任何元件），卻用 * `min-height:320px` 硬撐出一大塊空白，這才是設計師回報「上方距離太高」的 * 主要來源（比 v1.4.0 處理過的 #primary/.ast-container 留白大得多）。 * 這個空塊同時存在於文章列表頁「和」單篇文章頁，兩種頁面都受影響。 * 不能直接刪除或隱藏到 0——因為透明頁首（.site-header，position:absolute， * 桌機實測高度約 200px）需要靠它「墊底」，避免選單文字蓋到標題。改為依尺寸 * 縮小到剛好夠用的高度：手機 100px／平板 160px／桌機 220px，大幅縮短空白， * 同時保留足夠的頁首避讓空間，不會造成選單與標題重疊。 * - 【移除列表分隔線】`.ast-article-inner` 主題預設帶一條 `border-bottom:1px * solid #ddd`，滿版設計下看起來像多餘的切割線，直接移除，改用留白本身 * 做視覺區隔。 * - 【文字改為真正垂直置中】排查發現 `align-content:center` 本身沒有失效， * 只是桌機版 min-height:320px 太貼近文字實際內容高度，可分配的置中空間只剩 * 20px 左右，視覺上幾乎等於「靠上」。桌機版（≥1024px）將 `.post-content` * 的 min-height 加大到 440px，讓文字與圖片之間有足夠垂直呼吸空間， * 置中效果才會真正被看見；平板維持 320px（欄寬較窄，320px 已足夠）。 * v1.8.0 (2026-08-04 19:45) 新增（設計師需求：手機列表內距＋手機選單美化）： * - 【手機文字內距加大】手機版文字內距從 24px 加大到 32px，並在圖片後第一個 * 文字區塊（分類標籤）額外加 20px 上內距，解決「文字過於貼齊邊界」—— * 原本圖片是滿版貼邊、文字卻只留 24px，兩者反差讓文字顯得特別侷促。 * 標題左側墨水圓點位置同步從 4px 調整到 12px，維持與文字的相對距離。 * - 【找到手機選單子選單幾乎看不見的真正原因】追蹤到 Astra 手機選單子選單 * 連結預設用 `var(--ast-global-color-7)`（實際色值 #e6e5e1，近乎全白）， * 這是給「選單疊在深色圖片上」情境設計的淺色文字，但本站手機選單面板是 * 白色系背景，淺灰字疊白底幾乎等於隱形——「都會美學系列」「大師傳世 * 系列」等非目前分類的選項，設計師點開選單根本看不到字。直接覆寫為深色， * 並讓「目前所在分類」改用品牌金色 + 加粗，兩種狀態清楚可辨。 * - 【子選單層級感 + 選單面板美化】子選單加淺米色底 + 左側金色重點線， * 一眼就能分辨這是主選單展開出的子分類；選單面板整體加柔和陰影， * 跟下方頁面內容做出區隔；漢堡選單/展開箭頭的預設 3px 金色虛線 * focus 外框，改成柔和圓角光暈，兼顧無障礙與質感。 * - 此區塊（第 6 節）為全站頁首共用元件，不加 body class 範圍限制， * 所有頁面的手機選單都會一併受惠，不需要也不應該分頁面套用。 * v1.9.0 (2026-08-04 20:05) 修正（設計師實測回報：項目符號超出邊界＋選單需再美化）： * - 【手機版標題圓點超出邊界】v1.7.0/v1.8.0 都是用 left 數值手動微調圓點 * 位置，但螢幕越窄，絕對定位換算出來的座標就越容易貼出容器邊界。 * 與其持續為不同機型微調數值打地鼠，手機版直接隱藏這顆裝飾用圓點， * 乾淨俐落；桌機／平板版本的圓點不受影響，繼續保留。 * - 【手機選單第二輪美化】設計師截圖顯示子選單目前選中項目是一塊生硬的 * 灰色矩形（Astra 預設樣式，範圍延伸到選單最右邊，四四方方沒有圓角）， * 看起來像未完成的預設狀態而非刻意設計。改為內縮邊界 + 圓角的金色淡底 * 「膠囊」提示，質感更細緻；同時發現主選單一級項目（無框留白／歲月 * 金繼…）完全沒有 hover/觸控回饋，點下去畫面毫無變化，加上淡金色回饋； * 選單面板底部加圓角，讓整塊選單像從頁首自然掀開的卡片，不是硬生生 * 截斷的長方形。 * ※ 提醒：設計師這次提供的截圖，子選單文字仍是淺灰色幾乎看不見， * 這正是 v1.8.0 已經修好、但尚未上傳部署到線上主機的舊版效果—— * 只要把這份檔案重新上傳到 wp-content/themes/jingrui-design-core/style.css， * v1.8.0 的深色文字修正就會一併生效，不需要額外處理。 * v1.10.0 (2026-08-04 20:20) 簡化（設計師回饋：選單樣式太複雜，乾淨簡約即可）： * - 拿掉 v1.9.0 加的圓角膠囊底色、左側金色重點線、子選單淺底色、 * 主選單 hover/active 底色回饋、選單面板陰影與圓角、focus 光暈樣式， * 全部移除，回到接近主題預設的簡約風格。 * - 只保留一項真正必要的修正：子選單文字顏色（原本 #e6e5e1 近乎全白， * 疊在白底面板上看不見，這不是可以取捨的「裝飾」，是實際的可讀性 * 缺陷，故繼續保留）。目前選中分類改用純文字變金色 + 加粗標示狀態， * 不額外加底色/邊框/圓角，跟其餘裝飾一起收斂掉。 * v1.11.0 (2026-08-04 20:40) 新增（設計師需求：/map/ /faq/ /contact/ /about/ * 四頁標題區塊手機版排版跑掉）： * - 找到根因：四頁共用同一個 Elementor 全域元件（.elementor-element-c0eb7d5）， * 一顆桌機版 80px 的超大裝飾英文字（ABOUT/MAP/FAQ/CONTACT），疊在中文 * 標題後方當背景襯字。手機版容器只剩約 200px 寬，80px 字級的英文單字 * 放不下，瀏覽器在字母中間硬生生換行（CONTACT 被拆成 CON/TAC/T 三行）， * 版面整個跑掉，這正是設計師截圖看到的畫面。 * - 手機版把裝飾字級縮到 36px，四個單字裡最長的 CONTACT 也能一行放完， * 不再從字母中間斷開；同時把裝飾字容器 (.elementor-element-d9611ab) * 原本配合桌機兩行高度校準的 margin-bottom:-40px 疊字效果， * 等比例調整為 -6px，避免手機版裝飾字變矮之後整個蓋住中文標題。 * - 這一節（第 7 節）跟文章列表系統完全無關，是四個獨立靜態頁的共用 * 頁首元件，選擇器直接鎖定 Elementor 元件 ID，不需要、也不應該加 * body class 範圍限制。 * * 【版本差異說明 v1.0.0 → v1.1.0】 * 舊版：容器最寬只能到 1140px，且仍受 .ast-container(1000px) 限制，實際上沒有真正滿版。 * 新版：每篇文章各自用 margin-left/right: calc(50% - 50vw) 跳出所有外層容器， * 寬度改為 100vw，圖片可以真正貼齊螢幕左右邊緣；文字則改為只在「外側」 * （面向螢幕邊緣的那一側）加內距，內側（面向圖片的一側）維持 0， * 確保圖文之間的間距只靠 grid 的 column-gap 控制，畫面更乾淨。 * ============================================================================== */ /* ------------------------------------------------------------------------ * 0. 移除「本分類頁」的淡紫色底色（body 背景圖） * 原本 body 有一張 1px 淡紫色底圖（repeat-y 直向重複），在原本「有外框」 * 的版型裡用來襯托白色內容卡片；現在文章已經出框滿版、內容直接貼齊視窗， * 這塊淡紫色底在標題／頁首區域會變成一塊「多餘的色塊」，故直接關閉， * 改為純白背景，讓整頁視覺更乾淨、與滿版排版一致。 * * 【重要修正 v1.6.0】v1.3.0～v1.5.0 這幾條規則寫成不分頁面全站套用 * （選擇器只有 body / .ast-container / #primary，沒有加上分類頁的 * body class），結果連「光影交會」等其他 Elementor 客製頁面的頂部 * 留白／背景也被一起改動，造成那些頁面頂端出現「背景沒填滿的空白區塊」。 * 這是設計師實測回報才抓到的連帶影響，現在全部加上 * `body.category-daily-abstract` 前綴，鎖定只在本分類頁生效， * 不會再波及其他頁面。 * ------------------------------------------------------------------------ */ :is(body.blog, body.archive, body.single-post) { background-image: none !important; background-color: #ffffff !important; } /* .ast-container 是原本「白色卡片」外框本身，除了寬度限制外， 還帶了一圈很淡的陰影（box-shadow: 0 10px 40px rgba(0,0,0,.03)）， 目的是讓白卡片在淡紫色背景上有「浮起來」的層次感。 現在背景已經改純白、文章也出框滿版，這圈陰影反而變成頁首/標題 區塊周圍一圈說不出所以然的灰霧，一併關閉，畫面才會真正乾淨無框。 （同 v1.6.0 修正：加上 body.category-daily-abstract 範圍限制） */ :is(body.blog, body.archive, body.single-post) .ast-container { box-shadow: none !important; } /* 頁首下方的留白過大：實測發現 #primary 外面還包了一層 .ast-container， 本身就有 margin-top:40px + padding-top:60px，加上 #primary 自己的 margin-top:64px，三層疊加共 164px，這是主題為了讓「透明頁首（絕對定位， 蓋在內容上方）」保留避讓空間所設計的預留值。淡紫色底圖還在的時候，這段 留白會被襯色填滿，看起來是刻意的呼吸感；底色拿掉後就變成一大塊「莫名的 空白」，故將三層留白一併收緊，頁首與標題區的距離更合理、更貼近滿版設計 的緊湊感，同時仍保留足夠空間讓透明頁首不會壓到標題文字。 （同 v1.6.0 修正：加上 body.category-daily-abstract 範圍限制， 避免壓縮到其他頁面原本為各自版型設計的頂部留白，導致版面跑掉。） */ :is(body.blog, body.archive, body.single-post) #content .ast-container { margin-top: 0 !important; padding-top: 24px !important; } :is(body.blog, body.archive, body.single-post) #primary { margin-top: 16px !important; } /* ------------------------------------------------------------------------ * 0.5【v1.7.0 新增】真正的巨大空白元凶：Elementor 全域鉤子區塊 * 追蹤發現：#primary 上方其實還有一個 `.astra-advanced-hook-1468` 區塊 * （Astra 主題「Custom Layout／Hook」功能掛載的 Elementor 全域範本， * ID 1468，桌機實測高度固定 320px），內部是完全空的 Elementor 容器 * （e-con-inner 裡面沒有任何元件），本身沒有任何視覺內容，卻用 * min-height:320px 硬撐出一大塊空白，這才是設計師回報「上方距離太高」 * 的主要來源（比 v1.6.0 處理過的 #primary/.ast-container 留白還大很多）。 * 保留它是因為透明頁首（.site-header，position:absolute）需要靠這塊 * 空間「墊底」，避免選單/漢堡選單蓋到標題文字；桌機版頁首本身高度約 * 200px，故只縮小、不刪除，分尺寸給予剛好夠用的高度 + 適度呼吸空間： * 手機縮到 100px、平板 160px、桌機 220px（原本不分尺寸統一 320px）。 * 此區塊為全站共用範本，只在文章列表頁與單篇文章頁被掛載，故直接鎖定 * 在 :is(body.blog, body.archive, body.single-post) 範圍內覆寫即可， * 不會影響其他自訂頁面（如「光影交會」使用的是不同 ID 的鉤子區塊）。 * ------------------------------------------------------------------------ */ :is(body.blog, body.archive, body.single-post) .astra-advanced-hook-1468 .elementor-element-5646747 { min-height: 100px !important; } @media (min-width: 545px) { :is(body.blog, body.archive, body.single-post) .astra-advanced-hook-1468 .elementor-element-5646747 { min-height: 160px !important; } } @media (min-width: 1024px) { :is(body.blog, body.archive, body.single-post) .astra-advanced-hook-1468 .elementor-element-5646747 { min-height: 220px !important; } } /* ------------------------------------------------------------------------ * 1. 跳框滿版核心機制（所有尺寸共用） * 不論外層 .ast-container / #primary / #main 多寬， * 每篇文章都以 100vw 為畫布，確保左右真正貼齊視窗邊緣。 * * 【v1.6.0 一併修正】以下所有 .ast-article-post 選擇器同步加上 * body.category-daily-abstract 前綴。理由：其他分類頁用的是同一套 * Astra 文章迴圈、class 完全相同，先前沒加範圍限制的話，這整組出框 * 滿版設計會「順便」套用到那些頁面（例如聯絡頁「光影交會」），造成 * 上方空白區塊、背景無法填滿。鎖定只在本分類頁生效，其餘頁面維持原樣。 * ------------------------------------------------------------------------ */ :is(body.blog, body.archive) .ast-article-post { width: 100vw !important; max-width: 100vw !important; margin-left: calc(50% - 50vw) !important; margin-right: calc(50% - 50vw) !important; padding-left: 0 !important; padding-right: 0 !important; box-sizing: border-box; overflow: hidden; /* 防止極端寬螢幕下的次像素誤差造成橫向捲動 */ } :is(body.blog, body.archive) .ast-article-post .ast-article-inner, :is(body.blog, body.archive) .ast-article-post .post-content { padding-left: 0 !important; padding-right: 0 !important; } /* 圖片永遠滿版貼邊，不留任何內距（各尺寸皆適用） */ :is(body.blog, body.archive) .ast-article-post .post-content > .ast-blog-featured-section.post-thumb { padding: 0 !important; overflow: hidden; } :is(body.blog, body.archive) .ast-article-post .post-content > .ast-blog-featured-section.post-thumb .post-thumb-img-content, :is(body.blog, body.archive) .ast-article-post .post-content > .ast-blog-featured-section.post-thumb a { display: block; width: 100%; height: 100%; } :is(body.blog, body.archive) .ast-article-post .post-content > .ast-blog-featured-section.post-thumb img { display: block; width: 100%; object-fit: cover; transition: transform 0.5s ease; } :is(body.blog, body.archive) .ast-article-post .post-content > .ast-blog-featured-section.post-thumb:hover img { transform: scale(1.04); } /* 【v1.7.0 新增】移除每篇文章之間的預設分隔線 `.ast-article-inner` 主題預設帶 border-bottom:1px solid #ddd， 在滿版設計裡看起來像一條多餘的切割線，設計師要求整段拿掉， 改用文章之間的留白本身作為視覺區隔即可，畫面更乾淨。 （不分尺寸皆適用，故不放在任何 media query 裡。） */ :is(body.blog, body.archive) .ast-article-post .ast-article-inner { border-bottom: none !important; } /* ------------------------------------------------------------------------ * 2. 手機（< 545px）：圖片上／文字下，圖片滿版貼邊，文字兩側加內距 * ------------------------------------------------------------------------ */ @media (max-width: 544px) { /* 【v1.8.0 調整】內距從 24px 加大到 32px，並且第一個文字區塊（標籤） 額外加 20px 上內距，讓圖片與文字之間有真正的呼吸空間——原本 24px 加上圖片緊貼文字上緣，設計師實測回報「文字過於貼齊邊界」。 */ :is(body.blog, body.archive) .ast-article-post .post-content > .cat-links, :is(body.blog, body.archive) .ast-article-post .post-content > .entry-title, :is(body.blog, body.archive) .ast-article-post .post-content > .ast-excerpt-container, :is(body.blog, body.archive) .ast-article-post .post-content > .read-more, :is(body.blog, body.archive) .ast-article-post .post-content > .entry-content { padding-left: 32px !important; padding-right: 32px !important; } :is(body.blog, body.archive) .ast-article-post .post-content > .cat-links { padding-top: 20px !important; } :is(body.blog, body.archive) .ast-article-post .post-content > .ast-blog-featured-section.post-thumb img { height: auto; aspect-ratio: 4 / 3; } :is(body.blog, body.archive) .ast-article-post .ast-article-inner { padding-bottom: 32px; } } /* ------------------------------------------------------------------------ * 3. 平板 + 桌機（≥ 545px）：圖文「同一行」左右並排 * ------------------------------------------------------------------------ */ @media (min-width: 545px) { :is(body.blog, body.archive) .ast-article-post .post-content { position: relative; /* 作為圖片絕對定位的基準 */ display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); row-gap: 14px; align-content: center; min-height: 320px; /* 文字太短時，圖片仍有基本展示高度 */ } /* 圖片改用絕對定位，完全脫離 Grid 列高計算 ----------------------------------- * 原因：無論圖片用 aspect-ratio 還是 height:100%，只要它以「跨列」方式放在 * Grid 裡，瀏覽器都會用它的原生比例反過來撐大文字所在的列，導致標題/按鈕 * 被推到圖片下緣以外。絕對定位的元素不參與 Grid 版面計算，圖片高度改成 * 直接貼齊 .post-content 實際高度（由文字內容決定），兩者才能真正同高、置中。 */ :is(body.blog, body.archive) .ast-article-post .post-content > .ast-blog-featured-section.post-thumb { position: absolute; top: 0; left: 0; width: 50%; height: 100%; } :is(body.blog, body.archive) .ast-article-post .post-content > .ast-blog-featured-section.post-thumb img { width: 100%; height: 100%; } :is(body.blog, body.archive) .ast-article-post .post-content > .cat-links { grid-column: 2; grid-row: 1; } :is(body.blog, body.archive) .ast-article-post .post-content > .entry-title { grid-column: 2; grid-row: 2; } :is(body.blog, body.archive) .ast-article-post .post-content > .ast-excerpt-container { grid-column: 2; grid-row: 3; } :is(body.blog, body.archive) .ast-article-post .post-content > .read-more { grid-column: 2; grid-row: 4; } :is(body.blog, body.archive) .ast-article-post .post-content > .entry-content { grid-column: 2; grid-row: 5; } /* 文字欄：內側（面向圖片）0 內距，外側（面向螢幕邊緣）加大內距，維持可讀性 */ :is(body.blog, body.archive) .ast-article-post .post-content > .cat-links, :is(body.blog, body.archive) .ast-article-post .post-content > .entry-title, :is(body.blog, body.archive) .ast-article-post .post-content > .ast-excerpt-container, :is(body.blog, body.archive) .ast-article-post .post-content > .read-more, :is(body.blog, body.archive) .ast-article-post .post-content > .entry-content { position: relative; /* 確保文字疊在圖片之上的正常文件流層級 */ padding-left: 6vw; padding-right: 8vw; max-width: 640px; /* 避免超寬螢幕下文字量測過寬，維持閱讀舒適度 */ } /* 【v1.6.0 一併修正】原本把「分隔線上方留白」放在 .ast-article-inner 的 padding-bottom，圖片只填滿 .post-content 高度、抓不到這段留白，導致 圖片下緣停在分隔線前方一大截，留下設計師說的「太多空白」。 改把留白直接搬進 .post-content 自己的 padding-bottom：圖片是絕對定位、 height:100% 是以 .post-content 的「padding box」為準，所以圖片會自動 跟著撐滿這段留白，貼齊到分隔線正上方，不再留空。 */ :is(body.blog, body.archive) .ast-article-post .post-content { padding-bottom: 32px; } :is(body.blog, body.archive) .ast-article-post .ast-article-inner { padding-bottom: 0; /* 留白已搬進 .post-content，這裡歸零避免重複堆疊 */ } :is(body.blog, body.archive) .ast-article-post { margin-bottom: 0 !important; /* 滿版分隔線已提供視覺區隔，不再額外堆疊外距 */ } } /* ------------------------------------------------------------------------ * 4. 桌機（≥ 1024px）：奇偶交錯，形成 Z 字型畫廊節奏 = 排列組合 * ------------------------------------------------------------------------ */ @media (min-width: 1024px) { /* 【v1.7.0 新增】桌機文字垂直置中效果加強 原本 min-height:320px 是給「圖片有基本展示高度」的保底值，但桌機欄寬較寬， 文字（標籤+標題+摘要+按鈕）加總高度常常已經逼近 320px，導致 align-content: center 雖然有作用，可分配的多餘空間卻只剩 20px 左右，視覺上幾乎等於「靠上」， 這正是設計師回報「文字應該水平置中，目前靠上」的成因。桌機版加大列高保底值 到 440px，讓文字與圖片之間有足夠的垂直呼吸空間，置中效果才會真正被看見。 */ :is(body.blog, body.archive) .ast-article-post .post-content { min-height: 440px; } /* 偶數篇：圖片換到右側（left:auto; right:0），文字換到左欄 */ :is(body.blog, body.archive) .ast-article-post:nth-of-type(even) .post-content > .ast-blog-featured-section.post-thumb { left: auto; right: 0; } :is(body.blog, body.archive) .ast-article-post:nth-of-type(even) .post-content > .cat-links, :is(body.blog, body.archive) .ast-article-post:nth-of-type(even) .post-content > .entry-title, :is(body.blog, body.archive) .ast-article-post:nth-of-type(even) .post-content > .ast-excerpt-container, :is(body.blog, body.archive) .ast-article-post:nth-of-type(even) .post-content > .read-more, :is(body.blog, body.archive) .ast-article-post:nth-of-type(even) .post-content > .entry-content { grid-column: 1; } /* 交錯後外側/內側對調：偶數篇文字改在左側，外側(左)加大內距、內側(右)縮小 */ :is(body.blog, body.archive) .ast-article-post:nth-of-type(even) .post-content > .cat-links, :is(body.blog, body.archive) .ast-article-post:nth-of-type(even) .post-content > .entry-title, :is(body.blog, body.archive) .ast-article-post:nth-of-type(even) .post-content > .ast-excerpt-container, :is(body.blog, body.archive) .ast-article-post:nth-of-type(even) .post-content > .read-more, :is(body.blog, body.archive) .ast-article-post:nth-of-type(even) .post-content > .entry-content { padding-left: 8vw; padding-right: 6vw; } } /* ------------------------------------------------------------------------ * 5. 修正既有裝飾樣式（標題墨水圓點、摘要引言邊框）與滿版排版的衝突 * ------------------------------------------------------------------------ */ @media (min-width: 545px) { /* 標題左側墨水圓點：原本貼齊 left:0 是給 20px 窄內距用的， 現在文字內距改成 6vw，圓點要跟著移到文字正前方，不能停在原地。 */ :is(body.blog, body.archive) .ast-article-post .post-content > .entry-title::before { left: calc(6vw - 20px); } /* 摘要文字的引言邊框：內層

自己的 padding/border-left 拿掉， 避免跟外層容器的 6vw/8vw 內距疊加，造成雙重壓縮與左邊界對不齊。 */ :is(body.blog, body.archive) .ast-article-post .post-content > .ast-excerpt-container p { padding: 0; margin: 0; border-left: none; } } @media (min-width: 1024px) { /* 偶數篇文字換到左側、內距改成 8vw，圓點位置要跟著換算 */ :is(body.blog, body.archive) .ast-article-post:nth-of-type(even) .post-content > .entry-title::before { left: calc(8vw - 20px); } } @media (max-width: 544px) { /* 【v1.9.0 修正】設計師實測回報：手機版標題前方的墨水圓點會超出邊界 （螢幕越窄，圓點的絕對定位換算出來的位置就越容易貼出容器外）。 與其一直微調數值跟著不同機型打地鼠，手機版直接隱藏這個裝飾圓點， 乾淨俐落，桌機/平板版本不受影響、繼續保留圓點裝飾。 */ :is(body.blog, body.archive) .ast-article-post .post-content > .entry-title::before { display: none !important; } :is(body.blog, body.archive) .ast-article-post .post-content > .ast-excerpt-container p { padding: 0; margin: 0; border-left: none; } } /* ========================================================================== * 6.【v1.10.0 簡化】手機選單／子選單（全站頁首共用，不限文章列表頁） * 設計師回饋 v1.9.0 太複雜（圓角膠囊、左側色線、陰影、hover 底色…）， * 要求「乾淨簡約即可」。這裡只保留一個必要的可讀性修正，其餘裝飾全部 * 拿掉，回到接近主題預設、純粹靠文字顏色分辨狀態的簡約風格。 * ========================================================================== */ /* 【唯一保留的修正，其餘裝飾一律移除】子選單文字幾乎看不見的問題： Astra 手機選單子選單連結預設用 var(--ast-global-color-7)（實際色值 #e6e5e1，近乎全白），是給「選單疊在深色圖片上」設計的淺色文字，但本站 選單面板是白色系背景，淺灰字疊白底幾乎等於隱形。這是真的看不見、 不是可以保留的設計，所以只做這一項必要修正。 */ .ast-builder-menu-mobile .main-navigation .menu-item .sub-menu .menu-link, .ast-builder-menu-mobile .main-navigation .menu-item .sub-menu .menu-link .menu-text, .ast-mobile-popup-drawer .main-header-menu .menu-item .sub-menu .menu-link, .ast-mobile-popup-drawer .main-header-menu .menu-item .sub-menu .menu-link .menu-text { color: #3a3a3a !important; } /* 目前選中的分類只用文字變金色 + 加粗來標示，不加底色、不加邊框、 不加圓角，維持跟主題其他狀態一致的簡約語彙。 */ .ast-builder-menu-mobile .main-navigation .menu-item .sub-menu .menu-item.current-menu-item > a, .ast-builder-menu-mobile .main-navigation .menu-item .sub-menu .menu-item.current-menu-item > .menu-link, .ast-builder-menu-mobile .main-navigation .menu-item .sub-menu .menu-item.current-menu-item > .menu-link .menu-text { color: #936f24 !important; font-weight: 600; background-color: transparent !important; } /* ========================================================================== * 7.【v1.11.0 新增】/map/ /faq/ /contact/ /about/ 四頁上方標題區塊 * 手機版排版修正（Elementor 全域範本，四頁共用同一組元件 ID） * ========================================================================== */ /* 四個頁面的標題區都共用同一個 Elementor 元件：一顆超大裝飾用英文字 （ABOUT／MAP／FAQ／CONTACT，桌機版 font-size:80px），疊在中文標題 （歲月金繼／隙光影跡／留白解語／光影交會）後方當背景襯字。 桌機版容器夠寬，單字都能一行放完；但手機版容器只有約 200px 寬， 80px 字級的英文單字放不下，瀏覽器只好在字母中間硬生生換行 （例如 CONTACT 被拆成 CON / TAC / T 三行），版面整個跑掉。 解法：手機版把裝飾字級大幅縮小到 36px，四個單字裡最長的 CONTACT （7 個字母）也能在容器寬度內一行顯示完整，不再從字母中間斷開。 */ @media (max-width: 544px) { .elementor-element-c0eb7d5 .elementor-heading-title { font-size: 36px !important; line-height: 1.2 !important; } /* 裝飾字原本的容器 (.elementor-element-d9611ab) 帶了 margin-bottom:-40px， 是設計師特意讓下方中文標題「疊上」裝飾字尾端，做出圖層交疊的美術效果。 這個 -40px 是配合桌機版裝飾字換行後的高度（兩行、共 104px 行高） 校準出來的數字；手機版裝飾字縮小成一行、高度大幅變矮之後，同樣的 -40px 拉力就會整個蓋住中文標題的字。改成 -6px，維持一點點刻意的 圖層交疊感，但不會蓋到看不清楚。 */ .elementor-element-d9611ab { margin-bottom: -6px !important; } } /** * ============================================================================== * Project: 靜睿設計所 × 慢構 — 謝炳昌導演「影我歲月」自傳頁 (authorship) * Author: Ray (施睿皇) – Jingrui Design Studio * Email: n8822314n@gmail.com * Contact: services@revonteso.com * Created: 2026-08-06 17:41 * Version: 1.7.0（本次更新：編號改橫式置於圖片上方、標題全數改直式並依標點斷行、 * 新增區塊進場緩動動畫與部分區塊侘寂流動線條背景） * * 更新日誌 (Changelog): * [2026-08-06] 1.7.0 四項調整： * (1) 編號與圖片重疊會擋到照片、也讓人分心，改為橫式文字，從 * position:absolute 疊圖改為正常文件流，透過 .hsh-block 的 * grid-template-rows: auto 1fr 讓編號固定排列在圖片正上方， * 並以 row-gap／padding 預留呼吸留白，不再與畫面爭奪視覺焦點。 * (2) 標題全數（七段）統一改為直式書寫，不再保留橫式錯位版本； * HTML 端在原本的頓號／逗號位置改用
斷行，讓標題依語意 * 斷成多欄直書（例如「浪漫」「神秘」「多義」各自一欄），更貼近 * 日系雜誌大字直書的閱讀節奏。一般段落（圖左文右）靠齊文字欄 * 內側（左側），反轉段落（圖右文左）靠齊內側（右側）。 * (3) 新增區塊進場緩動動畫：.hsh-block／.hsh-marker 預設 * opacity:0 並下移，透過 HTML 內嵌的 IntersectionObserver * script 於捲動進入視窗時加上 .is-inview，觸發 CSS transition * 淡入＋回位，取代生硬的一次性載入。 * (4) 貳、肆、陸（原直式標題三段）的文字欄背景疊加一層極淡的 * 手繪感流動線條 SVG（.hsh-block__text--flow），呼應侘寂氛圍， * 線條僅作裝飾、不影響文字對比與可讀性。 * [2026-08-06] 1.6.0 段落文字量較大的兩段（伍「調色」三段落、柒「裂痕」兩段 * 且字數明顯多於其他段落）原本配單張滿版圖片，畫面資訊量與文字量 * 不成比例，略顯單薄。改為 .hsh-block__media--collage 三張圖片 * 拼貼（一大搭配右側上下兩小），HTML 內對應新增兩張圖片 * （伍：HSH-B34 舞彩繽紛、HSH-B31 陽光來的正是時候；柒： * HSH-C18 窗櫺、HSH-C25 光影追蹤），增加視覺豐富度，其餘五段 * 文字量較短，維持原本單張出血大圖不變。 * [2026-08-06] 1.5.0 上一版只把貳、肆、陸（直式標題那三段）的編號改成黑字， * 壹、參、伍、柒仍是金色，造成七段裡只有三段套用新配色。這次 * 取消「僅 .hsh-block--reverse」的限定範圍，七段編號（數字＋ * 小標）統一改為與標題相同的墨黑色（--hsh-ink）＋ Hina Mincho， * 並統一使用淺色光暈（原本只用於貳肆陸）取代深色陰影，確保黑字 * 疊在各種明暗不一的照片上都維持可讀性。 * [2026-08-06] 1.4.0 (1) 裝飾編號從單純數字（壹～柒）改為「數字＋兩字小標」 * （例如：壹／色彩），HTML 端 .hsh-block__num 內拆成 * .hsh-block__num-digit／.hsh-block__num-label 兩個子元素，各自 * 獨立套用 writing-mode: vertical-rl，外層改用 flex column 直向 * 堆疊，避免同一段直書文字流內數字與小標無法拉開視覺層級的問題。 * (2) 貳、肆、陸編號一度改為黑字＋淺色光暈（1.5.0 已擴大至全部七段）。 * [2026-08-06] 1.3.0 電腦版（≥1025px）拿掉 .hsh-story 的 max-width／左右留白， * 讓圖片直接貼齊瀏覽器左右邊緣（滿版出血）；標題新增三種變化： * .hsh-title--offset-up／--offset-down 讓標題脫離段落齊頭對齊、 * 刻意錯位；.hsh-title--vertical 讓標題改為直式書寫並靠齊圖文 * 交界處，呼應日式編輯排版的字體節奏。三種樣式僅在桌機生效， * 於 ≤1024px 平板／手機斷點內明確重置回橫式、正常對齊，確保 * 先前已驗證過的平板／手機單欄排版不受影響。 * [2026-08-06] 1.2.0 實測 Elementor「平板」預覽寬度為 768px，先前僅在 ≤767px 才切 * 換單欄，導致平板（768–1024px）仍套用雙欄網格，圖文欄寬被壓縮至 * 320–340px 左右，中文襯線長段落與大圖在平板上過度擁擠、可讀性差。 * 修正為 ≤1024px（涵蓋平板直向與大部分橫向）一律改為單欄堆疊， * 並在其中再依 ≤600px（手機）進一步收斂字級與留白，兩種尺寸各自 * 有合適的呼吸感，不再共用同一組「平板」數值。 * [2026-08-06] 1.1.0 建立 .hsh-story 七段式編輯風格排版樣式（初版）。 * * 說明／為什麼這樣寫： * /authorship/（post ID 2147）頁面以自訂 HTML 區塊（Elementor Custom HTML * widget）承載謝導七段訪談內文，版面設計參考日式編輯排版風格： * 大字級直書／橫書標題、非對稱圖文比例、細線分隔、留白呼吸感。外層 Elementor * Container 本身 content_width 已設為 full（滿版），因此 .hsh-story 只要拿掉 * 自己的 max-width／padding，圖片就能直接貼齊瀏覽器邊緣，不需要額外的 * calc(50% - 50vw) 出血技巧。配色與字體皆沿用全站既有設計語彙（Hina Mincho * 標題、Noto Serif 內文，金／墨／米白色階），確保與全站視覺一致。 * * Copyright (c) 2026 Jingrui Design Studio. All rights reserved. * * Unauthorized use, reproduction, or distribution is prohibited. * ============================================================================== */ .hsh-story { --hsh-gold: #936f24; --hsh-gold-light: #e2c073; --hsh-ink: #1a1a1a; --hsh-gray: #585858; --hsh-divider: #e6e5e1; max-width: none; margin: 0; padding: 100px 0; box-sizing: border-box; } /* * 單段落區塊：滿版雙欄，圖片貼齊瀏覽器邊緣，文字欄自留內距 ── 僅桌機（≥1025px）套用。 * grid-template-rows: auto 1fr 讓編號（第一列）與圖片（第二列）在同一欄位縱向堆疊， * row-gap 提供編號與圖片之間的呼吸留白；文字欄橫跨兩列並置中對齊。 */ .hsh-story .hsh-block { position: relative; display: grid; grid-template-columns: 64% 36%; grid-template-rows: auto 1fr; align-items: center; column-gap: 0; row-gap: 22px; padding: 90px 0; border-top: 1px solid var(--hsh-divider); } .hsh-story .hsh-block:first-child { border-top: none; padding-top: 0; } .hsh-story .hsh-block--reverse { grid-template-columns: 36% 64%; } .hsh-story .hsh-block__num { grid-column: 1; grid-row: 1; } .hsh-story .hsh-block__media { grid-column: 1; grid-row: 2; } .hsh-story .hsh-block__text { grid-column: 2; grid-row: 1 / 3; } .hsh-story .hsh-block--reverse .hsh-block__num { grid-column: 2; grid-row: 1; } .hsh-story .hsh-block--reverse .hsh-block__media { grid-column: 2; grid-row: 2; } .hsh-story .hsh-block--reverse .hsh-block__text { grid-column: 1; grid-row: 1 / 3; } /* * 編號區塊：橫式，固定排列在圖片正上方（非疊圖），與圖片之間留有呼吸空間， * 與段落頂端也留一點距離，避免緊貼分隔線。數字＋小標同列並排，字色與標題 * 一致（墨黑），不需要再處理疊圖可讀性的陰影／光暈。 */ .hsh-story .hsh-block__num { display: flex; flex-direction: row; align-items: baseline; gap: 14px; padding: 4px 0 18px; } .hsh-story .hsh-block__num-digit { writing-mode: horizontal-tb; font-family: "Hina Mincho", serif; font-size: 22px; letter-spacing: 0.35em; color: var(--hsh-ink); line-height: 1; } .hsh-story .hsh-block__num-label { writing-mode: horizontal-tb; font-family: "Hina Mincho", serif; font-size: 13px; letter-spacing: 0.3em; color: var(--hsh-ink); opacity: 0.7; line-height: 1; } .hsh-story .hsh-block__media { overflow: hidden; background: #eee; } .hsh-story .hsh-block__media img { display: block; width: 100%; height: 100%; max-height: 80vh; object-fit: cover; aspect-ratio: 3 / 4; transition: transform 1.2s ease; } /* 偶數段落改為橫幅比例，製造非對稱的圖片節奏 */ .hsh-story .hsh-block:nth-child(even) .hsh-block__media img { aspect-ratio: 16 / 10; } .hsh-story .hsh-block__media:hover img { transform: scale(1.04); } /* * 多圖拼貼（僅用於文字量明顯較多的段落，目前為伍／柒）： * 取代單張滿版大圖，用一大搭配右側上下兩小的不對稱拼貼，讓文字量大的段落 * 也有相對豐富的視覺資訊量，呼應段落本身較長的閱讀份量。個別圖片改用 * aspect-ratio:auto／height:100% 撐滿各自的網格儲存格，覆蓋掉單圖版本的 * 固定長寬比設定。 */ .hsh-story .hsh-block__media--collage { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 10px; aspect-ratio: 3 / 4; background: none; } .hsh-story .hsh-block__media--collage .hsh-media-item { overflow: hidden; background: #eee; } .hsh-story .hsh-block__media--collage .hsh-media-item img { width: 100%; height: 100%; aspect-ratio: auto; max-height: none; object-fit: cover; display: block; transition: transform 1.2s ease; } .hsh-story .hsh-block__media--collage .hsh-media-item:hover img { transform: scale(1.04); } .hsh-story .hsh-block__media--collage .hsh-media-item:first-child { grid-column: 1; grid-row: 1 / 3; } .hsh-story .hsh-block__media--collage .hsh-media-item:nth-child(2) { grid-column: 2; grid-row: 1; } .hsh-story .hsh-block__media--collage .hsh-media-item:nth-child(3) { grid-column: 2; grid-row: 2; } .hsh-story .hsh-block__text { position: relative; padding: 0 6vw; } .hsh-story .hsh-block__text p { font-family: "Noto Serif", serif; font-size: 16px; line-height: 2.1; letter-spacing: 0.03em; color: var(--hsh-gray); text-align: justify; margin: 0 0 22px; position: relative; z-index: 1; } .hsh-story .hsh-block__text p:last-child { margin-bottom: 0; } /* * 標題（七段統一直式）：整段改為直式書寫，遇到原本的頓號／逗號位置在 HTML * 端已改為
斷行，讓標題依語意拆成多欄直書文字（如「浪漫／神秘／多義」 * 各自一欄），取代先前橫式＋錯位的版本。一般段落（圖左文右）靠齊文字欄 * 內側（左側，緊鄰圖文交界）；反轉段落（圖右文左）則靠齊內側（右側）。 */ .hsh-story .hsh-title--vertical { writing-mode: vertical-rl; text-orientation: mixed; font-family: "Hina Mincho", serif; font-weight: 400; font-size: clamp(28px, 3.2vw, 48px); line-height: 1.9; letter-spacing: 0.14em; color: var(--hsh-ink); width: fit-content; max-height: 60vh; margin: 0 auto 6vw 0; position: relative; z-index: 1; } .hsh-story .hsh-block--reverse .hsh-title--vertical { margin: 0 0 6vw auto; } /* * 區塊進場緩動動畫：預設隱藏並下移，捲動進入視窗時（由 HTML 內嵌的 * IntersectionObserver 加上 .is-inview）淡入回位，避免整頁一次性生硬出現。 * 若瀏覽器不支援 IntersectionObserver，script 端會直接補上 .is-inview， * 不影響內容顯示。 */ .hsh-story .hsh-block, .hsh-story .hsh-marker { opacity: 0; transform: translateY(36px); transition: opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1), transform 0.9s cubic-bezier(0.22, 1, 0.36, 1); } .hsh-story .hsh-block.is-inview, .hsh-story .hsh-marker.is-inview { opacity: 1; transform: translateY(0); } @media (prefers-reduced-motion: reduce) { .hsh-story .hsh-block, .hsh-story .hsh-marker { opacity: 1; transform: none; transition: none; } } /* * 侘寂流動線條背景（僅貳、肆、陸文字欄）：極淡手繪感 SVG 曲線，疊在文字欄 * 背景，不影響文字對比。z-index 排序確保線條在文字 z-index:1 之下。 */ .hsh-story .hsh-block__text--flow { position: relative; } .hsh-story .hsh-block__text--flow::before { content: ""; position: absolute; inset: -10% -6vw; background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%20500%20900'%3E%3Cpath%20d%3D'M-20%2C80%20C120%2C40%20180%2C180%20320%2C140%20C420%2C110%20460%2C220%20520%2C180'%20stroke%3D'%23e2c073'%20stroke-width%3D'1.2'%20fill%3D'none'%20opacity%3D'0.55'%2F%3E%3Cpath%20d%3D'M-40%2C320%20C100%2C260%20160%2C400%20300%2C360%20C400%2C330%20480%2C420%20540%2C380'%20stroke%3D'%23e2c073'%20stroke-width%3D'1'%20fill%3D'none'%20opacity%3D'0.4'%2F%3E%3Cpath%20d%3D'M-30%2C560%20C110%2C520%20190%2C640%20330%2C600%20C430%2C570%20470%2C660%20520%2C630'%20stroke%3D'%23936f24'%20stroke-width%3D'1'%20fill%3D'none'%20opacity%3D'0.32'%2F%3E%3Cpath%20d%3D'M-20%2C780%20C130%2C740%20200%2C840%20340%2C810%20C430%2C790%20470%2C860%20520%2C840'%20stroke%3D'%23e2c073'%20stroke-width%3D'1.2'%20fill%3D'none'%20opacity%3D'0.45'%2F%3E%3C%2Fsvg%3E"); background-repeat: no-repeat; background-position: center; background-size: cover; opacity: 0.6; pointer-events: none; z-index: 0; } /* 段落間的引言式標記（創作守則與心法）── 作為全篇的呼吸與轉折點 */ .hsh-story .hsh-marker { display: flex; align-items: center; justify-content: center; gap: 24px; padding: 56px 6vw; } .hsh-story .hsh-marker::before, .hsh-story .hsh-marker::after { content: ""; flex: 1; height: 1px; background: var(--hsh-divider); max-width: 220px; } .hsh-story .hsh-marker span { font-family: "Hina Mincho", serif; font-size: 15px; letter-spacing: 0.5em; color: var(--hsh-gold); white-space: nowrap; padding-left: 0.5em; } /* * 平板＋手機共用斷點（≤1024px）： * 實測 Elementor 內建「平板」預覽寬度為 768px，先前僅在 ≤767px 才切 * 換單欄，導致平板（768–1024px）仍套用雙欄網格，圖文欄寬被壓縮到難以 * 閱讀。因此平板與手機統一先在此改為單欄堆疊（編號在上、圖片居中、文字在下， * HTML 原始順序本就是編號→圖片→文字，單欄下自然依序堆疊），編號維持橫式 * 「數字／小標」並排。這裡也把桌機限定的滿版出血、標題直式、流動線條背景、 * 進場動畫全部重置／關閉，平板與手機維持單純好讀的橫式標題、正常留白與 * 一次到位顯示，不套用桌機的編輯感版面實驗。 */ @media (max-width: 1024px) { .hsh-story { max-width: none; padding: 56px 24px 40px; } .hsh-story .hsh-block, .hsh-story .hsh-block--reverse { display: block; padding: 48px 0; } .hsh-story .hsh-block__num { display: flex; flex-direction: row; align-items: baseline; gap: 10px; padding: 0; margin-bottom: 14px; } .hsh-story .hsh-block__num-digit, .hsh-story .hsh-block__num-label { writing-mode: horizontal-tb; color: var(--hsh-gold); text-shadow: none; opacity: 1; } .hsh-story .hsh-block__num-digit { font-size: 15px; letter-spacing: 0.4em; } .hsh-story .hsh-block__num-label { font-size: 13px; letter-spacing: 0.3em; opacity: 0.75; } .hsh-story .hsh-block__media { margin-bottom: 28px; } .hsh-story .hsh-block__media img, .hsh-story .hsh-block:nth-child(even) .hsh-block__media img { max-height: none; aspect-ratio: 4 / 3; } .hsh-story .hsh-block__media--collage { aspect-ratio: 4 / 3; gap: 6px; } .hsh-story .hsh-block__text { padding: 0; } .hsh-story .hsh-block__text--flow::before { display: none; } .hsh-story .hsh-title--vertical, .hsh-story .hsh-block--reverse .hsh-title--vertical { writing-mode: horizontal-tb; text-orientation: initial; font-size: clamp(24px, 4vw, 32px); line-height: 1.6; letter-spacing: 0.06em; width: auto; max-height: none; margin: 0 0 20px; } .hsh-story .hsh-block__text p { font-size: 16px; line-height: 2; } .hsh-story .hsh-marker { padding: 44px 0; gap: 18px; } .hsh-story .hsh-block, .hsh-story .hsh-marker { opacity: 1; transform: none; transition: none; } } /* 手機（≤600px）：在單欄堆疊的基礎上，再收斂留白與字級，避免版面過於鬆散 */ @media (max-width: 600px) { .hsh-story { padding: 40px 20px 24px; } .hsh-story .hsh-block, .hsh-story .hsh-block--reverse { padding: 36px 0; } .hsh-story .hsh-block__num-digit { font-size: 13px; letter-spacing: 0.35em; } .hsh-story .hsh-block__num-label { font-size: 12px; letter-spacing: 0.25em; } .hsh-story .hsh-title--vertical { font-size: 22px; letter-spacing: 0.05em; margin-bottom: 16px; } .hsh-story .hsh-block__text p { font-size: 15px; line-height: 1.95; } .hsh-story .hsh-marker { padding: 32px 0; gap: 14px; } .hsh-story .hsh-marker span { font-size: 13px; letter-spacing: 0.35em; } }