, `copyrights2` =
links + ); WoodMart's grid (.wd-grid-g, 2 columns ≥1025px, 1 column below) does the
columns. `.wd-col-start` is `display: contents` so its two
become grid items of the
container and the Copyright line can span both columns. Colours: tokens only.
===================================================================== */
.copyrights-wrapper.wd-copyrights { /* two classes: WoodMart's inline `.wd-copyrights{padding-block:20px}` prints after our stylesheet */
padding-bottom: 60px; /* operator: 下方增加 padding 60px */
color: var(--jd-text); /* ink-700 (was muted ink-500): enough contrast for 11px text on #FAE8E8 */
font-size: 11px;
}
.copyrights-wrapper .wd-grid-g {
align-items: center;
row-gap: 5px; /* operator: the two rows 5px apart (was 14px) */
}
.copyrights-wrapper .wd-col-start {
display: contents;
}
.copyrights-wrapper p,
.copyrights-wrapper a {
font-size: 11px;
line-height: 1.6; /* 2026-09-29: the site-wide default is 1.6 again (1.5 from 2026-09-27) */
}
.copyrights-wrapper p {
margin: 0;
}
.copyrights-wrapper a {
color: inherit;
text-decoration: none;
}
.copyrights-wrapper a:hover,
.copyrights-wrapper a:focus-visible {
color: var(--jd-accent);
text-decoration: underline;
}
.jd-legal-copyright { grid-column: 1 / -1; grid-row: 1; text-align: left; } /* operator: left-aligned (was centred) */
.jd-legal-company { grid-column: 1; grid-row: 2; }
.copyrights-wrapper .wd-col-end {
grid-column: 2;
grid-row: 2;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: flex-end;
gap: 10px 22px;
}
.jd-legal-links {
display: inline-flex;
align-items: center;
gap: 10px;
white-space: nowrap;
}
.jd-legal-sep { opacity: .55; }
.copyrights-wrapper .jd-payment-methods { display: block; width: 200px; height: auto; } /* operator: 200px wide */
/* ≤1024px: WoodMart drops to one column and centres the text — stack, all centred: Copyright / company / legal links / payment cards (each on its own line) */
@media (max-width: 1024px) {
.jd-legal-copyright { grid-column: 1; grid-row: 1; text-align: center; } /* operator: centred on phones (left on desktop) */
.jd-legal-company { grid-column: 1; grid-row: 2; text-align: center; }
.copyrights-wrapper .wd-col-end { /* operator: links and payment strip on separate lines, both centred */
grid-column: 1; grid-row: 3;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 10px;
}
}
/* ---- Social icons under the footer logo (2026-09-26) ---------------------------------------------------
4 Font Awesome icons (`` …) in the footer HTML block (cms_block 1071396), in
a WPBakery Raw HTML element right after the logo image. Round #EEB3BC chips (operator) on the #FAE8E8 footer. */
/* Footer logo (first widget of the footer HTML block): 250px wide (operator 2026-09-27 「footer logo改250px」; was 190px since 2026-09-26; the image element is 220x57
with a srcset up to 800w — `sizes` says 220px, so a 1x screen stretches the 220w file by 14 %, 2x screens get the 768w / 800w file). */
.footer-column-1 .wd-image img {
width: 250px;
max-width: 100%;
height: auto;
}
.jd-social {
--jd-social-bg: #EEB3BC; /* operator-given chip colour — NOT a palette token (exception, like --jd-footer-bg #FAE8E8) */
display: flex;
flex-wrap: wrap;
gap: 32px; /* operator 2026-09-27 「4個social icons gap改成32px」 (was 12px) */
margin: 0 0 20px;
padding: 0;
list-style: none;
}
.jd-social li { margin: 0; }
.jd-social a {
display: inline-flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border-radius: 50%;
background-color: var(--jd-social-bg);
color: var(--jd-ink-900);
font-size: 18px;
line-height: 1;
text-decoration: none;
transition: background-color .2s, color .2s, transform .2s;
}
.jd-social a:hover,
.jd-social a:focus-visible {
background-color: var(--jd-accent);
color: var(--jd-white);
transform: translateY(-2px);
}
.jd-social i { pointer-events: none; }
@media (prefers-reduced-motion: reduce) {
.jd-social a { transition: none; }
.jd-social a:hover { transform: none; }
}
/* ---- 聯絡我們 column (2026-09-27; footer-4 core text widget ``, replaces the demo "Footer Menu" links + the
demo address/phone/fax icon list of the logo column). WoodMart already gives the widget list its 15px rhythm; here only the text colour
is aligned with the link colour of the other footer columns, and the opening hours keep "12:00～21:00" together (no orphan "21:00"). */
.footer-column .jd-contact li { color: var(--jd-text-muted); }
.footer-column .jd-contact .jd-nowrap { white-space: nowrap; }
/* ---- footer list items 13 px (operator 2026-09-27: 「footer的li 字集都改成 font-size: 13px」) ---------------------------------------
The link / text lists of the footer columns (關於我們, 購物說明, 聯絡我們). Not the copyright bar (11 px, its own rules) and not the social chips
(`.jd-social` sizes its icon on the ). */
.wd-footer .footer-column .widget :is(.menu, .jd-contact) li,
.wd-footer .footer-column .widget :is(.menu, .jd-contact) li a { font-size: 13px; }
/* ---- pink arc above the footer on EVERY page except the home page (operator 2026-09-27: 「目前只有首頁的footer上方有弧形的粉紅底色裝飾，請在其他所有頁面都加上這個」) ----
The home page gets its arc from a WoodMart "sweet wave" row divider (50 px high, white wave laid over a #FAE8E8 row, viewBox 0 0 1920 80, stretched to the
page width, touching the footer). Other pages have no such row, so the same shape — the pink side of that curve — is drawn by a pseudo-element on the footer:
an SVG mask filled with the footer colour token, 50 px high, standing on the footer's top edge. The footer gets a small top margin so the arc's peak
(37 px) does not touch the content's own bottom padding (40 px). `body.home` keeps its row divider (no double arc). */
body:not(.home) .wd-footer.footer-container {
position: relative;
margin-top: 20px;
}
body:not(.home) .wd-footer.footer-container::before {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 100%;
height: 50px;
pointer-events: none;
background-color: var(--jd-footer-bg);
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1920 80' preserveAspectRatio='none'%3E%3Cpath d='M1920,60s-169.5,20-510,20S850.5,20,510,20,0,60,0,60V80H1920Z'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1920 80' preserveAspectRatio='none'%3E%3Cpath d='M1920,60s-169.5,20-510,20S850.5,20,510,20,0,60,0,60V80H1920Z'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
}
/* ---- footer column widths, desktop (operator 2026-09-27: 「footer-column-1 加寬，並且縮短 footer-column-2,3,4 之間的間距，因為目前234選單欄位離太遠不美觀」) ----
WoodMart lays the four columns on a 12-track grid, 3 tracks each (4 equal columns, link columns 305 px apart at 1192 px). Now 5 / 2 / 2 / 3:
the logo column takes the width the two short link columns (關於我們, 購物說明 — longest item ≈ 77 px) do not need, the three menu columns move together
(≈ 204 px apart), 聯絡我們 keeps its 3 tracks because the address line needs them. ≤1024 px keeps WoodMart's own 2-column / 1-column stacking. */
@media (min-width: 1025px) {
.wd-footer .footer-sidebar > .footer-column-1 { grid-column: auto / span 5; }
.wd-footer .footer-sidebar > .footer-column-2,
.wd-footer .footer-sidebar > .footer-column-3 { grid-column: auto / span 2; }
.wd-footer .footer-sidebar > .footer-column-4 { grid-column: auto / span 3; }
}
/* ---- phones and tablets upright (up to 1024px): footer logo and social icons centred (operator 2026-09-29) ----
Centred on the WINDOW: on tablets WoodMart puts the footer columns two by two, so the logo column is given the whole row there and the
three link columns stand side by side under it. Phones already stack the logo column on a row of its own. */
@media (min-width: 768px) and (max-width: 1024px) {
.wd-footer .footer-sidebar > .footer-column-1 { grid-column: 1 / -1; }
.wd-footer .footer-sidebar > :is(.footer-column-2, .footer-column-3, .footer-column-4) { grid-column: auto / span 4; }
}
@media (max-width: 1024px) {
.wd-footer .footer-column-1 .wd-image { display: block; text-align: center; }
.wd-footer .footer-column-1 .wd-image img { margin-inline: auto; }
.wd-footer .footer-column-1 .jd-social { justify-content: center; }
}
/* column heading that is a link (聯絡我們 -> /contact-us/, 2026-09-30): same look as the other headings */
.footer-container .widget-title a { color: inherit; text-decoration: none; transition: opacity .2s ease; }
.footer-container .widget-title a:is(:hover, :focus-visible) { color: inherit; opacity: .65; }
/* ---- a page that ENDS with a full-width coloured band meets the footer directly (operator 2026-09-30: 「最後一個區塊直接銜接到footer的粉紅色，
不要有白色底在中間 … 目前和未來的page不要有相同問題」) ----
Applies automatically when the last row of the page content is a WPBakery full-width row holding a band: the theme's .paper-band, a
picture-background band (…__bg layers such as the FAQ's closing block), or any row given the class jd-band-last. Then the white spacing
under it (the row's margin, the content's 40px, the footer's 20px) is removed and the band's colour layer reaches under the footer, so the
footer's pink curve sits on the band's colour. Pages that end with text keep their spacing. */
/* (:has() may not be nested, so "the page ends with a band" is written as two plain :has() conditions) */
body:not(.home):has(.entry-content .wpb-content-wrapper > .vc_row[data-vc-full-width]:nth-last-child(2) :is(.paper-band, [class*="__bg"])) .main-page-wrapper > .wd-content-layout,
body:not(.home):has(.entry-content .wpb-content-wrapper > .vc_row.jd-band-last:nth-last-child(2)) .main-page-wrapper > .wd-content-layout { padding-bottom: 0; }
body:not(.home):has(.entry-content .wpb-content-wrapper > .vc_row[data-vc-full-width]:nth-last-child(2) :is(.paper-band, [class*="__bg"])) .wd-footer.footer-container,
body:not(.home):has(.entry-content .wpb-content-wrapper > .vc_row.jd-band-last:nth-last-child(2)) .wd-footer.footer-container { margin-top: 0; }
body:not(.home) .entry-content .wpb-content-wrapper > .vc_row[data-vc-full-width]:nth-last-child(2):has(.paper-band, [class*="__bg"]),
body:not(.home) .entry-content .wpb-content-wrapper > .vc_row.jd-band-last:nth-last-child(2) { margin-bottom: 0 !important; padding-bottom: 60px; }
body:not(.home) .entry-content .wpb-content-wrapper > .vc_row[data-vc-full-width]:nth-last-child(2) .paper-band:last-child { margin-bottom: 0; }
body:not(.home) .entry-content .wpb-content-wrapper > .vc_row[data-vc-full-width]:nth-last-child(2) .paper-band:last-child::before { bottom: -60px; }
/* a picture band (three layers: upper edge picture / colour / lower edge picture, e.g. the FAQ's closing block) that ends the page drops its
lower edge picture - the colour layer runs down to the footer instead of fading to white */
body:not(.home) .entry-content .wpb-content-wrapper > .vc_row[data-vc-full-width]:nth-last-child(2) [class*="__bg"] > img:last-child:not(:first-child) { display: none; }