/* jdtheme26 — HOME PAGE SECTION TITLES (2026-09-28). Operator: 「"來 JUST DOG 逛逛"改成粗體 ---> 這個要特別做首頁標題css」 — one style sheet for the titles of the home page's sections, so every new section gets the same title by using three classes (first use: the store block 「來 JUST DOG 逛逛」):
add jd-home-head--center for a centred title

來 JUST DOG 逛逛

bold heading, a yellow spark on its left VISIT JUST DOG hand-written English, pink, tilted, a yellow spark on its right
The English is printed AFTER the heading in the HTML (the heading is what search engines and screen readers should meet first); on screen it sits ABOVE the heading (CSS order). Sparks = assets/img/jd-title-spark.webp (strokes spread to the left; mirrored for the right side). Decoration only. Tokens: --jd-home-title-* below; change them here to restyle every home title at once. */ .jd-home-head { --jd-home-title-color: var(--jd-ink-900, #3b2a1f); --jd-home-title-size: 24px; /* operator 2026-09-29 「首頁中文標題改24px」 — ONE size for every home title, every width */ --jd-home-title-weight: 700; --jd-home-eyebrow-color: #fea1ab; /* operator 2026-09-28 (history: #d6ecdf → #c07a85 → #fea1ab) */ --jd-home-eyebrow-size: 20px; /* operator 2026-09-29 「英文副標改20px」 */ --jd-home-eyebrow-tilt: -4deg; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; margin: 0 0 18px; } .jd-home-head--center { align-items: center; text-align: center; } body .jd-home-head .jd-home-title { order: 2; display: inline-flex; align-items: center; gap: 12px; margin: 0; font-size: var(--jd-home-title-size); font-weight: var(--jd-home-title-weight); line-height: 1.3; color: var(--jd-home-title-color); } body .jd-home-head .jd-home-title::before { content: ""; flex: none; width: 20px; height: 30px; /* the picture is 120 × 181 */ background: url("../img/jd-title-spark.webp") center / contain no-repeat; } .jd-home-head .jd-home-eyebrow { order: 1; display: inline-flex; align-items: center; gap: 12px; margin: 0 0 0 6px; font-family: "Gaegu", var(--jd-font-display, sans-serif); font-size: var(--jd-home-eyebrow-size); font-weight: 700; /* Gaegu 700 is not loaded → the browser thickens the 400 cut a little (marker lettering) */ line-height: 1.1; letter-spacing: .1em; white-space: nowrap; color: var(--jd-home-eyebrow-color); transform: rotate(var(--jd-home-eyebrow-tilt)); transform-origin: left bottom; } .jd-home-head--center .jd-home-eyebrow { margin-left: 0; transform-origin: center bottom; } .jd-home-head .jd-home-eyebrow::after { content: ""; flex: none; width: 16px; height: 24px; background: url("../img/jd-title-spark.webp") center / contain no-repeat; transform: scaleX(-1) rotate(-8deg); } @media (max-width: 768px) { body .jd-home-head .jd-home-title { gap: 10px; } body .jd-home-head .jd-home-title::before { width: 17px; height: 26px; } } /* ---- Titles DRAWN with GenJyuuGothic-P-Bold (SIL OFL 1.1) since 2026-09-30 (before: NaikaiFont Bold, StarPandaKids); inc/jd-home-titles.php ---- The heading's real text is moved out of sight (still read by search engines and screen readers); the drawing takes its place and its colour (currentColor). Size: the drawing is 1em high in the font's own units and is shown at --jd-home-title-art-scale × the heading's font size. --jd-home-title-art-bold thickens the strokes (0 = the face as drawn). */ /* defaults; a block may set its own --jd-home-title-art-scale / --jd-home-title-art-bold */ body :is(h1, h2).jd-home-title--drawn { max-width: 100%; } /* the pieces of one title: side by side, wrapping piece by piece when the column is narrow */ body :is(h1, h2).jd-home-title--drawn .jd-home-title__arts { display: flex; flex-wrap: wrap; flex: 0 1 auto; min-width: 0; max-width: 100%; justify-content: inherit; gap: .28em .1em; } body :is(h1, h2).jd-home-title--drawn .jd-home-title__text { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } /* the drawing is as wide as the title needs at (font size × scale); in a narrower column it shrinks as a whole (never squeezed, never cut) */ body :is(h1, h2).jd-home-title--drawn .jd-home-title__art { display: block; flex: 0 1 auto; min-width: 0; width: calc(1em * var(--jd-home-title-art-scale, 1) * var(--jd-title-w)); /* scale 1: a drawn character is as big as a 24px character */ max-width: 100%; aspect-ratio: var(--jd-title-w) / 1; height: auto; line-height: 0; } body :is(h1, h2).jd-home-title--drawn .jd-home-title__art svg { display: block; width: 100%; height: 100%; overflow: visible; } body :is(h1, h2).jd-home-title--drawn .jd-home-title__art svg path { stroke: currentColor; stroke-width: var(--jd-home-title-art-bold, 0); /* extra thickness in font units; 0 = the face as drawn (the Bold weight is bold already) */ stroke-linejoin: round; } /* ---- plain variant (2026-09-29, the intro block above the category grid): no sparks, nothing tilted; the English line may carry its own icon ---- */ body .jd-home-head--plain .jd-home-title::before, .jd-home-head--plain .jd-home-eyebrow::after { content: none; } .jd-home-head--plain .jd-home-eyebrow { transform: none; margin-left: 0; } .jd-home-head--center .jd-home-title { justify-content: center; } /* second spark picture (2026-09-29, operator's jd_icon03.webp: two strokes) on the right of an English line — also in the plain variant */ .jd-home-head .jd-home-eyebrow.jd-home-eyebrow--spark2::after { content: ""; flex: none; width: 24px; height: 24px; margin-top: -8px; background: url("../img/jd-title-spark-2.webp") center / contain no-repeat; transform: none; } /* the store block's English line sits beside nothing any more (it is above the heading) — it follows the common 20px too */ /* the same small icon on BOTH sides of an English line (2026-09-29): the left one is the mirror image */ .jd-home-head .jd-home-eyebrow.jd-home-eyebrow--spark2-both::before { content: ""; flex: none; width: 24px; height: 24px; margin-top: -8px; background: url("../img/jd-title-spark-2.webp") center / contain no-repeat; transform: scaleX(-1); }