/* Theme Name: Site 13 Daylight Showcase (Flatsome Child) Description: site-13 daylight-game-showcase 設計系統移植到 Flatsome。版面在 UX Builder 編輯,設計 token 與元件樣式留在本檔。 Author: vn-site-template Template: flatsome Version: 0.8.1 Requires at least: 6.0 Requires PHP: 7.4 Text Domain: site-13-flatsome-child */ /* ══════════════════════════════════════════════════════════════════ Site 13 · Daylight Card Room — Flatsome port ------------------------------------------------------------------ 規則沒有改變,只是換了掛載點: Gutenberg → Flatsome / UX Builder .wp-block-columns → .row .wp-block-column → .col (外層,負責 gutter) — → .col-inner (內層,負責卡片外觀) var(--wp--preset--*) → var(--s13-*) 色值單一事實來源仍是 repo 根目錄的 palettes.json。 ══════════════════════════════════════════════════════════════════ */ /* ── 1a. 原始 token ──────────────────────────────────────────────── 預設(紅金)寫在這裡;另外 7 組配色由 sync-palettes.py 產生到 assets/css/palettes.css,靠上的 .s13-palette-* class 覆寫。這一層只放「字面色值」,不放任何 var() 引用 — 理由見 1b。 */ :root { --s13-primary: #c8102e; --s13-secondary: #e0cfa0; --s13-accent: #faf2e0; --s13-surface: #ffffff; --s13-text: #1a1012; --s13-highlight: #c8961e; /* FSE 版有兩處寫死淺底假設,style variation 的 JSON 蓋不掉(見 DESIGN.md 「深底那套的兩個已知限制」)。移植時把它們也變成 token,深底配色就能一起翻,限制在這個版本消失。 */ --s13-hover-mix: black; /* 主按鈕 hover 的混色方向 */ --s13-bar-shadow: rgba(0, 0, 0, .12); /* 手機底欄陰影 */ --s13-gutter: clamp(1.25rem, 4vw, 3rem); /* 與配色無關,不會被覆寫 */ /* z-index 級距。原本散落 9999 / 10000 這種任意值,新增元件時只能往上加碼。集中成三層之後,層級關係在這裡一眼看得完。 */ --s13-z-sticky: 100; /* sticky header 之類 */ --s13-z-mobile-cta: 200; /* 手機底部 CTA,必須蓋過內容但低於跳過連結 */ --s13-z-skip: 300; /* skip-link,鍵盤使用者的第一個焦點,永遠最上層 */ } /* ── 1b. 衍生 token ──────────────────────────────────────────────── 必須宣告在 body,不能放 :root。自訂屬性裡的 var() 是在「宣告它的那個元素」上完成代換的:寫在 :root 的話,--s13-muted 會在 :root 就被算成紅金那組的 text 色並向下繼承, 之後 body.s13-palette-navy 改掉 --s13-text 也救不回來,切配色時灰字與線條會留在舊配色。宣告在 body 就跟覆寫落在同一個元素上。 --wp--preset--color--* 是相容別名:demo/ 的靜態 HTML、舊 pattern 貼進 UX Builder 的 HTML 區塊,都還在用那組變數名,留著可以直接沿用。 */ body { --s13-muted: color-mix(in srgb, var(--s13-text) 62%, transparent); --s13-hairline: 1px solid var(--s13-secondary); --wp--preset--color--primary: var(--s13-primary); --wp--preset--color--secondary: var(--s13-secondary); --wp--preset--color--accent: var(--s13-accent); --wp--preset--color--surface: var(--s13-surface); --wp--preset--color--text: var(--s13-text); --wp--preset--color--highlight: var(--s13-highlight); } /* ── 2. 基底 ───────────────────────────────────────────────────────*/ body { background: var(--s13-surface); color: var(--s13-text); } h1, h2, h3, h4, .site-13-kicker, .site-13-step-number { font-weight: 800; letter-spacing: -.02em; color: var(--s13-text); } /* ── 2b. 字型優先權 ──────────────────────────────────────────────── Flatsome 的 Customizer 排版設定輸出成