/* ========================================================================== JUST DOG — Woodmart color layer 頁面底維持 Woodmart 原本的白色。只覆寫「顏色」。間距、padding、字型、字級、圓角全部沿用 Woodmart 原設定。 放在 child theme，於 woodmart-style 之後載入。 ========================================================================== */ /* 1. 色票 (Tokens) ------------------------------------------------------- */ :root { /* Neutrals */ --jd-white: #FFFFFF; /* page background, same as Woodmart */ --jd-cream-0: #FFFDF8; /* optional warm panel */ --jd-cream-50: #FBF6EC; /* optional section bg */ --jd-cream-100: #F5ECDD; --jd-cream-200: #EADFCC; --jd-cream-300: #978169; /* control borders */ /* Ink — warm brown text */ --jd-ink-900: #3B2A1F; --jd-ink-700: #5C4A3C; --jd-ink-500: #7A6656; /* Butter — primary CTA */ --jd-butter-100: #FDF1C6; --jd-butter-300: #FBE08A; --jd-butter-400: #F6D063; /* Sky — handwritten headline blue */ --jd-sky-100: #DCEEFA; --jd-sky-300: #A9D3F0; --jd-sky-600: #80CACB; /* operator 2026-09-27 「所有的 #2f6dae 取代為 #80cacb」 — was #2F6DAE (the spec file is NO LONGER byte-identical). Token name kept: it now holds the teal */ --jd-sky-700: #2A5F99; /* Blush — hearts & sale */ --jd-blush-100: #FBE0E6; --jd-blush-400: #EE7A98; /* graphic only, never text */ --jd-blush-600: #BC3F67; /* Mint / leaf */ --jd-mint-100: #D4EEDF; --jd-mint-400: #8CCBA6; --jd-leaf-700: #356E3F; /* Status */ --jd-success-bg: #E3F2E8; --jd-error-bg: #FBE3E0; --jd-error: #B03A35; /* Semantic */ --jd-bg-page: var(--jd-white); --jd-bg-surface: var(--jd-white); --jd-text: var(--jd-ink-700); --jd-text-title: var(--jd-ink-900); --jd-text-muted: var(--jd-ink-500); --jd-border: var(--jd-cream-200); --jd-primary: var(--jd-butter-300); --jd-primary-hover: var(--jd-butter-400); --jd-on-primary: var(--jd-ink-900); --jd-accent: var(--jd-sky-600); --jd-accent-hover: var(--jd-sky-700); --jd-sale: var(--jd-blush-600); } /* 2. 對應到 Woodmart 變數 ------------------------------------------------- Claude Code：先 grep 父主題確認每個變數名稱存在，不存在的刪掉並回報。 */ :root, body { --wd-primary-color: var(--jd-accent); --wd-alternative-color: var(--jd-sale); --wd-text-color: var(--jd-text); --wd-title-color: var(--jd-text-title); --wd-entities-title-color: var(--jd-text-title); --wd-entities-title-color-hover: var(--jd-accent); --wd-link-color: var(--jd-accent); --wd-link-color-hover: var(--jd-accent-hover); --wd-widget-title-color: var(--jd-text-title); --wd-main-bgcolor: var(--jd-bg-page); --bgcolor-white: var(--jd-bg-surface); --bgcolor-gray-100: var(--jd-cream-100); --bgcolor-gray-200: var(--jd-cream-100); --bgcolor-gray-300: var(--jd-cream-200); --brdcolor-gray-200: var(--jd-border); --brdcolor-gray-300: var(--jd-border); --brdcolor-gray-500: var(--jd-cream-300); --color-gray-300: var(--jd-cream-300); --color-gray-400: var(--jd-text-muted); --color-gray-500: var(--jd-text-muted); --color-gray-600: var(--jd-text); --color-gray-700: var(--jd-text); --color-gray-800: var(--jd-text-title); --color-gray-900: var(--jd-text-title); /* Buttons */ --btn-default-bgcolor: var(--jd-cream-100); --btn-default-bgcolor-hover: var(--jd-cream-200); --btn-default-color: var(--jd-text-title); --btn-default-color-hover: var(--jd-text-title); --btn-accented-bgcolor: var(--jd-primary); --btn-accented-bgcolor-hover: var(--jd-primary-hover); --btn-accented-color: var(--jd-on-primary); --btn-accented-color-hover: var(--jd-on-primary); /* Forms */ --wd-form-bg: var(--jd-bg-surface); --wd-form-color: var(--jd-text-title); --wd-form-placeholder-color: var(--jd-text-muted); --wd-form-brd-color: var(--jd-cream-300); --wd-form-brd-color-focus: var(--jd-accent); /* Notices */ --notices-success-bg: var(--jd-success-bg); --notices-success-color: var(--jd-leaf-700); --notices-warning-bg: var(--jd-error-bg); --notices-warning-color: var(--jd-error); } /* 3. 直接覆寫（Woodmart 未用變數的地方）只改顏色 -------------------------- */ body { background-color: var(--jd-bg-page); color: var(--jd-text); } /* Price */ .price, .amount { color: var(--jd-text-title); } .price del, .price del .amount { color: var(--jd-text-muted); } .price ins, .price ins .amount { color: var(--jd-sale); } /* Product labels */ .product-label.onsale { background-color: var(--jd-sale); color: var(--jd-white); } .product-label.new { background-color: var(--jd-mint-100); color: var(--jd-leaf-700); } .product-label.featured{ background-color: var(--jd-butter-300); color: var(--jd-ink-900); } .product-label.out-of-stock { background-color: var(--jd-cream-100); color: var(--jd-text-muted); } /* Stock */ .stock.in-stock { color: var(--jd-leaf-700); } .stock.out-of-stock { color: var(--jd-error); } /* Rating stars */ .star-rating span::before { color: var(--jd-butter-400); } .star-rating::before { color: var(--jd-cream-200); } /* Cart count bubble */ .wd-tools-count { background-color: var(--jd-blush-600); color: var(--jd-white); } /* Wishlist heart when added */ .wd-wishlist-btn a.added::before, .wd-wishlist-btn a:hover::before { color: var(--jd-blush-600); } /* Error / required */ .required, .woocommerce-invalid label { color: var(--jd-error); } .woocommerce-error { background-color: var(--jd-error-bg); color: var(--jd-error); } .woocommerce-info { background-color: var(--jd-sky-100); color: var(--jd-ink-900); } /* Focus ring */ :focus-visible { outline-color: var(--jd-accent); } /* Selection */ ::selection { background: var(--jd-butter-300); color: var(--jd-ink-900); } /* Footer */ .footer-container, .wd-prefooter { background-color: var(--jd-cream-100); } .copyrights-wrapper { background-color: var(--jd-cream-100); color: var(--jd-text-muted); border-color: var(--jd-border); } /* 4. 淡色底 utility（Elementor 區塊 / 分類圓圈 / 商品圖底可加 class） --- */ .jd-bg-butter { background-color: var(--jd-butter-100); } .jd-bg-sky { background-color: var(--jd-sky-100); } .jd-bg-blush { background-color: var(--jd-blush-100); } .jd-bg-mint { background-color: var(--jd-mint-100); } .jd-bg-cream { background-color: var(--jd-cream-50); } /* 奶油區塊底（選用） */ .jd-bg-panel { background-color: var(--jd-cream-0); } .jd-text-accent { color: var(--jd-accent); } /* 手寫藍標題 */