/* ========================================================================== 遇見提斯 Serendipity Pilates ── 主題元件覆寫層 -------------------------------------------------------------------------- 這一支只負責「Blocksy 自己輸出的元件」：頁首、頁尾版權列、表單、麵包屑、 文章列表與單篇。頁面內容區的樣式一律在 sp-styles.css，不要寫到這裡來。 載入順序：sp-fonts → sp-styles → sp-theme。 sp-styles 定義了所有 --sp-* 變數，這支直接沿用，不重新定義顏色。 ========================================================================== */ /* --- 1 把主題的排版接到品牌變數 ---------------------------------------- Blocksy 的字體設定 family 一律留 System Default，字檔由 functions.php 載入一次。這裡把主題輸出的變數改指到品牌字族，避免兩邊各載一次。 */ :root{ --theme-font-family: var(--sp-sans); --theme-button-font-family: var(--sp-sans); --theme-content-spacing: 24px; } /* 明體只用於 32px 以上。h3 以下一律無襯線，這是規範的自訂鐵則。 */ .entry-content h1, .entry-content h2, .ct-container h1, .page-title, .entry-title{ font-family: var(--sp-display); font-weight: 300; letter-spacing: .01em; } @media (max-width:689.98px){ /* 手機的 h1、h2 會落到 28px 與 24px，低於明體門檻，換回無襯線 */ .entry-content h1, .entry-content h2, .ct-container h1, .page-title, .entry-title{ font-family: var(--sp-sans); font-weight: 600; } } /* --- 2 焦點指示器 ------------------------------------------------------- 模板站的額外 CSS 曾用 *:focus-visible{outline:none!important} 把全站的 鍵盤焦點指示器消滅（WCAG 2.4.7 失敗）。那一行已經移除，這裡補回品牌色版本。 深色底的元件另外用奶油米，確保在 #422B24 上也看得見。 */ :is(a, button, input, select, textarea, summary, [tabindex]):focus-visible{ outline: 2px solid var(--sp-umber); outline-offset: 2px; border-radius: 2px; } .sp-footer :is(a, button):focus-visible, [class*="dark"] :is(a, button):focus-visible{ outline-color: var(--sp-cream); } /* --- 3 頁首 ------------------------------------------------------------- 高度、Logo 與選單的排列由 Blocksy 頁首建構器負責，這裡只做規範要求、 但客製器選不到的細節：中文字距、捲動後的底色與下緣線、CTA 的膠囊造型。 */ .ct-header [data-row] .ct-container{ align-items: center; } /* 手機與平板的頁首列高 64px → 76px。 Blocksy 客製器桌機給 80、手機給 64，但 Logo 兩邊都是 44px， 上下留白就變成桌機 18、手機只有 10。Logo 檔本身是零留白的 （圓弧最上緣就是圖片第一列），10px 在真機上再疊瀏海與網址列， 看起來就像頂到螢幕邊。76 = 44 + 16×2，留白回到接近桌機的水準。 改 --height 而不是加 padding：這是 Blocksy 自己的變數，min-height、 垂直置中、sticky 佔位與 #main 的起始位置都會跟著算，不會蓋到內容； 加 padding-top 則會變成上 16 下 4 的不對稱頁首。 選擇器用 #header 開頭（1,1,0）壓過客製器的 (0,3,0)，不必 !important， 也順便把規則鎖在真正的頁首上（.ct-header 這個 class 側邊選單面板也有）。 */ @media (max-width:999.98px){ #header [data-row="middle"]{ --height:76px; } } /* 品牌名：明體 20px，與圓形記號並排。 規範還要求記號旁有一行 SERENDIPITY PILATES 小字，那需要橫式 Logo SVG， 客戶尚未提供，目前先用站名單行代替（見上稿說明的待補清單）。 */ .ct-header .site-title{ font-family: var(--sp-display); font-weight: 300; font-size: 20px; line-height: 1.3; letter-spacing: .02em; } .ct-header .site-title a{ color: var(--sp-cocoa); text-decoration: none; } .ct-header .site-branding[data-logo="left"]{ gap: 12px; } /* 一級選單：16px、字距 0.05em，hover 只轉色不位移 */ .ct-header [data-id="menu"] .menu > li > a{ font-family: var(--sp-sans); font-weight: 500; font-size: 16px; letter-spacing: .05em; transition: color 300ms var(--sp-ease); } /* 下拉選單（單位介紹五館、課程資訊四項）。 選擇器一定要用 #header 開頭，不能用 .ct-header： 手機的側邊選單面板（div#offcanvas.ct-panel.ct-header）也帶著 ct-header， 用 .ct-header 會把這組「浮動卡片」的邊框、圓角與陰影， 一起套到面板裡那個直接展開的子選單上，看起來就是一個莫名的外框。 */ #header .sub-menu{ border-radius: var(--sp-radius-sm); border: 1px solid var(--sp-line); box-shadow: var(--sp-shadow); overflow: hidden; } /* 字級兩邊都要，只有 hover 是桌機才有的 */ #header .sub-menu li a, #offcanvas .sub-menu li a{ font-size: 15px; letter-spacing: .05em; transition: background-color 300ms var(--sp-ease); } #header .sub-menu li a:hover{ background: var(--sp-veil); } /* 手機側邊選單的子選單，上下各留 12，不要和母選單擠在一起。 收合時 Blocksy 會把它設成 display:none，margin 不會留下空白。 寫 margin-block 而不是 margin：右邊的 -10px 是 Blocksy 自己給的，要留著。 */ #offcanvas .sub-menu{ margin-block: 12px; } /* 頁首 CTA：全站唯一的常駐實色按鈕。 底色是赭棕不是金棕，金棕對白字只有 2.81:1（規範第 15 章定案值）。 */ .ct-header [data-id="button"] .ct-button{ background: var(--sp-umber); color: #FFFFFF; border-radius: 999px; min-height: 44px; padding: 0 28px; font-size: 16px; letter-spacing: .05em; transition: background-color 300ms var(--sp-ease); } .ct-header [data-id="button"] .ct-button:hover{ background: var(--sp-umber-hover); } /* 捲動吸附後補一條下緣線，讓頁首與內容分開。不縮放 Logo。 */ [data-sticky] .ct-header [data-row]{ border-bottom: 1px solid var(--sp-line); backdrop-filter: blur(8px); } /* 行動選單：模板預設是純白，這裡換成品牌底色並補分隔線 */ #offcanvas .ct-panel-inner{ background: var(--sp-cream); } #offcanvas .menu > li{ border-bottom: 1px solid var(--sp-line); } #offcanvas .menu > li > a{ min-height: 48px; /* 觸控目標 */ font-size: 16px; letter-spacing: .05em; } /* 漢堡鈕的實際命中區要滿 44×44。 data-id="trigger" 就在 button 自己身上，不是包在外層，選擇器不要寫成 > button。 */ .ct-header button[data-id="trigger"], .ct-header .ct-header-trigger, #offcanvas .ct-toggle-close{ min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; } /* --- 4 頁尾 ------------------------------------------------------------- 頁尾整塊（五館 NAP 與版權列）都由 Content Block 負責，掛在 blocksy:footer:before，樣式寫在 sp-styles.css 的 .sp-footer。 Blocksy 自己的