添加缺失样式

新增两个页面
2026-06-25 22:36:35 +08:00 · 2026-06-25 22:35:37 +08:00
9 changed files with 1235 additions and 103 deletions
@@ -0,0 +1,342 @@
+/*
+ * SewJoy Theme - Design Yours / Custom Design Flow Stylesheet
+ *
+ * Renders the "Custom Design Flow Light- Home" frame
+ * (design/homepage-wireframe.pen → M1SPz). Reuses home.css tokens for
+ * the cream surface + nav/footer + bond-card; adds the splash carousel,
+ * the three-series wrapper, and the Featured Designs card family.
+ *
+ * Design tokens mirrored for self-sufficiency.
+ */
+
+:root {
+    --cream:        #F8F5F0;
+    --dark:         #1A1A1A;
+    --white:        #FFFFFF;
+    --accent:       #C8956C;
+    --text-primary: #1A1A1A;
+    --text-muted:   #8C7B6E;
+    --text-soft:    #3D3530;
+    --border:       #E8E0D5;
+    --font-display: 'Playfair Display', Georgia, serif;
+    --font-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, 'PingFang SC', 'Microsoft YaHei', sans-serif;
+    --shadow-card:  0 2px 10px rgba(0, 0, 0, 0.06);
+    --shadow-hover: 0 8px 24px rgba(44, 36, 22, 0.08);
+}
+
+/* ============================================
+   DY SPLASH — 3-step carousel
+   ============================================ */
+.dy-splash {
+    position: relative;
+    width: 100%;
+    height: 480px;
+    background-color: var(--white);
+    overflow: hidden;
+}
+
+.dy-splash__viewport {
+    position: relative;
+    width: 100%;
+    height: 100%;
+}
+
+.dy-splash__slide {
+    position: absolute;
+    inset: 0;
+    opacity: 0;
+    transition: opacity 0.35s ease;
+    pointer-events: none;
+}
+
+.dy-splash__slide.is-active {
+    opacity: 1;
+    pointer-events: auto;
+}
+
+.dy-splash__image {
+    position: absolute;
+    inset: 0;
+    background-color: var(--slide-tone, #F0E8DC);
+}
+
+.dy-splash__overlay {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    width: 560px;
+    max-width: calc(100% - 80px);
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+    text-align: center;
+}
+
+.dy-splash__eyebrow {
+    font-family: var(--font-body);
+    font-size: 11px;
+    font-weight: 600;
+    letter-spacing: 3px;
+    color: var(--accent);
+}
+
+.dy-splash__title {
+    margin: 0;
+    font-family: var(--font-display);
+    font-size: clamp(36px, 5vw, 56px);
+    font-weight: 700;
+    line-height: 1.1;
+    color: var(--text-primary);
+}
+
+.dy-splash__desc {
+    margin: 0;
+    font-family: var(--font-body);
+    font-size: 15px;
+    font-weight: 400;
+    line-height: 1.5;
+    color: var(--text-soft);
+}
+
+/* Arrows */
+.dy-splash__arrow {
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+    width: 48px;
+    height: 48px;
+    border-radius: 50%;
+    background-color: rgba(255, 255, 255, 0.4);
+    border: 0;
+    color: var(--text-primary);
+    font-size: 32px;
+    font-weight: 700;
+    line-height: 1;
+    cursor: pointer;
+    transition: background-color 0.15s ease;
+    z-index: 2;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.dy-splash__arrow:hover {
+    background-color: rgba(255, 255, 255, 0.8);
+}
+
+.dy-splash__arrow--prev { left: 32px; }
+.dy-splash__arrow--next { right: 32px; }
+
+/* Dots */
+.dy-splash__dots {
+    position: absolute;
+    bottom: 22px;
+    left: 50%;
+    transform: translateX(-50%);
+    display: flex;
+    gap: 8px;
+    z-index: 2;
+}
+
+.dy-splash__dot {
+    width: 8px;
+    height: 8px;
+    border-radius: 4px;
+    background-color: var(--border);
+    border: 0;
+    padding: 0;
+    cursor: pointer;
+    transition: background-color 0.15s ease, width 0.2s ease;
+}
+
+.dy-splash__dot.is-active {
+    width: 32px;
+    background-color: var(--accent);
+}
+
+/* ============================================
+   DY THREE SERIES — reuses .bond-card* from home.css
+   ============================================ */
+.dy-three-series {
+    background-color: var(--cream);
+    padding: 56px 0;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 28px;
+}
+
+.dy-three-series__header {
+    text-align: center;
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+}
+
+.dy-three-series__heading {
+    margin: 0;
+    font-family: var(--font-display);
+    font-size: clamp(26px, 3vw, 32px);
+    font-weight: 700;
+    letter-spacing: 3px;
+    color: var(--text-primary);
+}
+
+.dy-three-series__subtitle {
+    margin: 0;
+    font-family: var(--font-body);
+    font-size: 13px;
+    color: var(--text-muted);
+}
+
+.dy-three-series__cards {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: 24px;
+    width: 100%;
+    padding: 0; /* matches home tailored-bond: align flush with page edges */
+}
+
+/* ============================================
+   DY FEATURED DESIGNS — 4 hardcoded cards
+   ============================================ */
+.dy-featured {
+    background-color: var(--white);
+    padding: 64px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 32px;
+}
+
+.dy-featured__header {
+    text-align: center;
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+}
+
+.dy-featured__heading {
+    margin: 0;
+    font-family: var(--font-display);
+    font-size: clamp(28px, 3.5vw, 36px);
+    font-weight: 700;
+    color: var(--text-primary);
+}
+
+.dy-featured__subhead {
+    margin: 0;
+    font-family: var(--font-body);
+    font-size: 14px;
+    font-weight: 400;
+    color: var(--text-muted);
+}
+
+.dy-featured__row {
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
+    gap: 24px;
+    width: 100%;
+}
+
+.dy-feat-card {
+    background-color: var(--white);
+    border-radius: 8px;
+    overflow: hidden;
+    box-shadow: var(--shadow-card);
+    transition: transform 0.2s ease, box-shadow 0.2s ease;
+}
+
+.dy-feat-card:hover {
+    transform: translateY(-4px);
+    box-shadow: var(--shadow-hover);
+}
+
+.dy-feat-card__media {
+    height: 220px;
+    background-color: var(--card-tone, #E8E0D5);
+}
+
+.dy-feat-card__body {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+    padding: 20px 24px;
+}
+
+.dy-feat-card__title {
+    margin: 0;
+    font-family: var(--font-display);
+    font-size: 18px;
+    font-weight: 700;
+    color: var(--text-primary);
+    line-height: 1.3;
+}
+
+.dy-feat-card__maker {
+    font-family: var(--font-body);
+    font-size: 11px;
+    font-weight: 400;
+    letter-spacing: 1px;
+    color: var(--text-muted);
+}
+
+.dy-feat-card__cta {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    padding-top: 10px;
+    font-family: var(--font-body);
+    font-size: 11px;
+    font-weight: 600;
+    letter-spacing: 1.5px;
+    color: var(--text-primary);
+    text-decoration: none;
+}
+
+.dy-feat-card__cta:hover {
+    color: var(--accent);
+}
+
+/* ============================================
+   RESPONSIVE
+   ============================================ */
+@media screen and (max-width: 1024px) {
+    .dy-splash { height: 400px; }
+    .dy-splash__overlay { width: 480px; }
+    .dy-splash__arrow--prev { left: 16px; }
+    .dy-splash__arrow--next { right: 16px; }
+
+    .dy-three-series__cards {
+        grid-template-columns: repeat(2, 1fr);
+    }
+
+    .dy-featured { padding: 48px 32px; }
+    .dy-featured__row {
+        grid-template-columns: repeat(2, 1fr);
+    }
+}
+
+@media screen and (max-width: 720px) {
+    .dy-splash { height: 380px; }
+    .dy-splash__overlay {
+        width: calc(100% - 80px);
+        gap: 12px;
+    }
+    .dy-splash__title { font-size: 32px; }
+    .dy-splash__desc { font-size: 14px; }
+    .dy-splash__arrow { width: 40px; height: 40px; font-size: 24px; }
+    .dy-splash__arrow--prev { left: 12px; }
+    .dy-splash__arrow--next { right: 12px; }
+
+    .dy-three-series { padding: 40px 20px; }
+    .dy-three-series__cards {
+        grid-template-columns: 1fr;
+    }
+
+    .dy-featured { padding: 36px 20px; }
+    .dy-featured__row {
+        grid-template-columns: 1fr;
+    }
+}
@@ -0,0 +1,324 @@
+/*
+ * SewJoy Theme - Shop / Product List Stylesheet
+ *
+ * Renders the Basic Shopping Flow frame (design/homepage-wireframe.pen →
+ * OsAkV → BSF Product Grid Light). Reuses home.css tokens for the cream
+ * surface + nav/footer; adds the filter bar, product card family, layout
+ * switcher, and pagination.
+ *
+ * Design tokens mirror home.css for self-sufficiency.
+ */
+
+:root {
+    --cream:        #F8F5F0;
+    --dark:         #1A1A1A;
+    --white:        #FFFFFF;
+    --accent:       #C8956C;
+    --text-primary: #1A1A1A;
+    --text-muted:   #8C7B6E;
+    --text-soft:    #3D3530;
+    --border:       #E8E0D5;
+    --font-display: 'Playfair Display', Georgia, serif;
+    --font-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, 'PingFang SC', 'Microsoft YaHei', sans-serif;
+    --shadow-card:  0 2px 8px rgba(0, 0, 0, 0.06);
+    --shadow-hover: 0 8px 24px rgba(44, 36, 22, 0.08);
+}
+
+/* ============================================
+   SHOP SECTION (lives inside .home)
+   ============================================ */
+.shop {
+    background-color: var(--cream);
+}
+
+/* ============================================
+   FILTER BAR / TOOLBAR
+   ============================================ */
+.shop__toolbar {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    height: 72px;
+    padding: 20px 64px;
+    background-color: var(--cream);
+    border-top: 1px solid transparent;
+}
+
+.shop__filters,
+.shop__sort-group {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+}
+
+.shop__spacer {
+    flex: 1 1 auto;
+}
+
+/* Filter pill (used for Style / Fabric / Sort / search input) */
+.filter-pill {
+    display: inline-flex;
+    align-items: center;
+    gap: 10px;
+    padding: 10px 14px;
+    background-color: var(--white);
+    border: 1px solid var(--border);
+    border-radius: 4px;
+    color: var(--text-primary);
+    font-family: inherit;
+    font-size: 12px;
+    font-weight: 400;
+    line-height: 1;
+    cursor: pointer;
+    transition: border-color 0.15s ease, color 0.15s ease;
+}
+
+.filter-pill:hover {
+    border-color: var(--accent);
+    color: var(--accent);
+}
+
+.filter-pill__caret {
+    font-size: 10px;
+    color: var(--text-muted);
+}
+
+.filter-pill--search {
+    width: 280px;
+    color: #B8A99A;
+    cursor: text;
+}
+
+.filter-pill--search::placeholder {
+    color: #B8A99A;
+    opacity: 1;
+}
+
+.filter-pill--search:hover {
+    color: var(--text-primary);
+    border-color: var(--border);
+}
+
+/* Layout switcher (segmented control: Waterfall / Grid / List) */
+.shop-layout {
+    display: flex;
+    align-items: center;
+    background-color: var(--white);
+    border: 1px solid var(--border);
+    border-radius: 4px;
+    overflow: hidden;
+}
+
+.shop-layout__btn {
+    padding: 10px 12px;
+    background-color: var(--white);
+    border: 0;
+    color: var(--text-muted);
+    font-size: 14px;
+    line-height: 1;
+    cursor: pointer;
+    transition: background-color 0.15s ease, color 0.15s ease;
+}
+
+.shop-layout__btn + .shop-layout__btn {
+    border-left: 1px solid var(--border);
+}
+
+.shop-layout__btn:hover {
+    color: var(--text-primary);
+}
+
+.shop-layout__btn.is-active,
+.shop-layout__btn.is-active:hover {
+    background-color: var(--dark);
+    color: var(--white);
+}
+
+/* ============================================
+   PRODUCT GRID (CSS columns waterfall)
+   ============================================ */
+.shop__grid {
+    display: block; /* reset from any inherited flex/grid */
+    padding: 24px 64px 32px;
+    columns: 3;
+    column-gap: 24px;
+}
+
+.product-card {
+    break-inside: avoid;
+    -webkit-column-break-inside: avoid;
+    page-break-inside: avoid;
+    display: block;
+    width: 100%;
+    margin: 0 0 24px;
+    background-color: var(--white);
+    border-radius: 6px;
+    overflow: hidden;
+    box-shadow: var(--shadow-card);
+    transition: transform 0.2s ease, box-shadow 0.2s ease;
+}
+
+.product-card:hover {
+    transform: translateY(-4px);
+    box-shadow: var(--shadow-hover);
+}
+
+.product-card__media {
+    display: block;
+    width: 100%;
+    height: var(--card-media-h, 400px);
+    background-color: var(--card-tone, #E8E0D5);
+}
+
+.product-card__body {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+    padding: 16px;
+}
+
+.product-card__title {
+    margin: 0;
+    font-family: var(--font-display);
+    font-size: 16px;
+    font-weight: 700;
+    color: var(--text-primary);
+    line-height: 1.3;
+}
+
+.product-card__price {
+    font-family: var(--font-body);
+    font-size: 13px;
+    font-weight: 600;
+    color: var(--accent);
+}
+
+/* ============================================
+   PAGINATION
+   ============================================ */
+.shop__pagination {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 16px;
+    padding: 24px 64px 40px;
+    background-color: var(--cream);
+}
+
+.shop__results {
+    font-size: 12px;
+    color: var(--text-muted);
+}
+
+.shop__pager {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+}
+
+.shop__page-link {
+    font-family: var(--font-body);
+    font-size: 12px;
+    font-weight: 400;
+    color: var(--text-muted);
+    text-decoration: none;
+    padding: 4px 8px;
+    border-radius: 3px;
+    transition: color 0.15s ease;
+    cursor: pointer;
+}
+
+.shop__page-link:hover {
+    color: var(--text-primary);
+}
+
+.shop__page-link.is-current,
+.shop__page-link.is-current:hover {
+    color: var(--text-primary);
+    font-weight: 600;
+    cursor: default;
+}
+
+.shop__page-link--nav {
+    font-weight: 600;
+    color: var(--text-primary);
+}
+
+.shop__page-link--nav:hover {
+    color: var(--accent);
+}
+
+.shop__page-link--ellipsis {
+    cursor: default;
+    padding: 4px 4px;
+}
+
+/* ============================================
+   RESPONSIVE
+   ============================================ */
+@media screen and (max-width: 1024px) {
+    .shop__toolbar {
+        padding: 20px 32px;
+        flex-wrap: wrap;
+        height: auto;
+        gap: 10px;
+    }
+
+    .shop__spacer {
+        flex-basis: 100%;
+        flex-grow: 0;
+        height: 0;
+    }
+
+    .shop__grid {
+        padding: 24px 32px;
+        columns: 2;
+        column-gap: 20px;
+    }
+
+    .shop__pagination {
+        padding: 20px 32px 32px;
+        flex-wrap: wrap;
+        gap: 12px;
+    }
+}
+
+@media screen and (max-width: 720px) {
+    .shop__toolbar {
+        padding: 16px 20px;
+    }
+
+    .shop__filters,
+    .shop__sort-group {
+        flex-wrap: wrap;
+        gap: 8px;
+    }
+
+    .filter-pill--search {
+        width: 100%;
+    }
+
+    .shop-layout {
+        display: none; /* hide layout switcher on mobile */
+    }
+
+    .shop__grid {
+        padding: 16px 20px 24px;
+        columns: 1;
+        column-gap: 0;
+    }
+
+    .product-card {
+        margin-bottom: 16px;
+    }
+
+    .shop__pagination {
+        flex-direction: column;
+        align-items: flex-start;
+        padding: 16px 20px 28px;
+    }
+
+    .shop__pager {
+        flex-wrap: wrap;
+    }
+}
@@ -0,0 +1,67 @@
+/*
+ * SewJoy Theme - Custom Design Flow splash carousel
+ *
+ * Cycles .dy-splash__slide children via the .is-active class. Left/right
+ * arrows and the 3 dots at the bottom both drive navigation, with
+ * wrap-around at the ends. Keyboard arrow support when the carousel
+ * region has focus.
+ */
+(function ($) {
+    'use strict';
+
+    $(function () {
+        var $splash = $('.dy-splash');
+        if (!$splash.length) {
+            return;
+        }
+
+        var $slides = $splash.find('.dy-splash__slide');
+        var $dots   = $splash.find('.dy-splash__dot');
+        var count   = $slides.length;
+
+        if (count === 0) {
+            return;
+        }
+
+        var current = 0;
+
+        function go(target) {
+            // Wrap-around so negative indices and >= count both loop.
+            var next = ((target % count) + count) % count;
+            if (next === current) {
+                return;
+            }
+            $slides.removeClass('is-active').eq(next).addClass('is-active');
+            $dots.removeClass('is-active').attr('aria-selected', 'false')
+                 .eq(next).addClass('is-active').attr('aria-selected', 'true');
+            current = next;
+        }
+
+        $splash.on('click', '.dy-splash__arrow--prev', function () {
+            go(current - 1);
+        });
+
+        $splash.on('click', '.dy-splash__arrow--next', function () {
+            go(current + 1);
+        });
+
+        $splash.on('click', '.dy-splash__dot', function () {
+            var target = parseInt($(this).attr('data-go'), 10);
+            if (!isNaN(target)) {
+                go(target);
+            }
+        });
+
+        // Keyboard arrow support — only when the carousel region is focused
+        // or its descendants are.
+        $splash.on('keydown', function (event) {
+            if (event.key === 'ArrowLeft') {
+                event.preventDefault();
+                go(current - 1);
+            } else if (event.key === 'ArrowRight') {
+                event.preventDefault();
+                go(current + 1);
+            }
+        });
+    });
+})(jQuery);
@@ -25,48 +25,7 @@

 <div class="home">

-    <!-- ============================================
-         NAV
-         ============================================ -->
-    <header class="home-nav" role="banner">
-        <a class="home-nav__logo" href="<?php echo esc_url( home_url( '/' ) ); ?>">
-            <?php bloginfo( 'name' ); ?>
-        </a>
-
-        <nav class="home-nav__menu" aria-label="<?php esc_attr_e( 'Primary', 'sewjoy-theme' ); ?>">
-            <?php
-            $fallback_items = array( 'SHOP', 'DESIGN YOURS', 'FABRICS', 'MEMBERSHIP', 'COMMUNITY', 'ABOUT' );
-            $has_menu       = has_nav_menu( 'menu-1' );
-
-            if ( $has_menu ) {
-                wp_nav_menu( array(
-                    'theme_location' => 'menu-1',
-                    'container'      => false,
-                    'menu_class'     => 'home-nav__menu-list',
-                    'depth'          => 1,
-                    'fallback_cb'    => false,
-                ) );
-            } else {
-                echo '<ul class="home-nav__menu-list">';
-                foreach ( $fallback_items as $item ) {
-                    printf(
-                        '<li><a href="%s">%s</a></li>',
-                        esc_url( home_url( '/' ) ),
-                        esc_html( $item )
-                    );
-                }
-                echo '</ul>';
-            }
-            ?>
-        </nav>
-
-        <div class="home-nav__icons" aria-label="<?php esc_attr_e( 'Account', 'sewjoy-theme' ); ?>">
-            <button type="button" class="home-nav__icon" aria-label="<?php esc_attr_e( 'Search', 'sewjoy-theme' ); ?>">⌕</button>
-            <button type="button" class="home-nav__icon" aria-label="<?php esc_attr_e( 'Wishlist', 'sewjoy-theme' ); ?>">♡</button>
-            <button type="button" class="home-nav__icon" aria-label="<?php esc_attr_e( 'Cart', 'sewjoy-theme' ); ?>">▢</button>
-        </div>
-    </header>
-    <div class="home-nav__divider" role="presentation"></div>
+    <?php require get_template_directory() . '/template-parts/home-nav.php'; ?>

    <!-- ============================================
         HERO 1 — MAKE CREATION WEARABLE
@@ -198,67 +157,9 @@
    </section>

    <!-- ============================================
-         FOOTER
+         FOOTER (shared with page-shop via template-part)
         ============================================ -->
-    <footer class="home-footer" role="contentinfo">
-        <div class="home-footer__top">
-            <div class="home-footer__logo-group">
-                <span class="home-footer__logo"><?php bloginfo( 'name' ); ?></span>
-                <span class="home-footer__tagline">HANDMADE GOODS</span>
-            </div>
-
-            <ul class="home-footer__socials" aria-label="<?php esc_attr_e( 'Social media', 'sewjoy-theme' ); ?>">
-                <li><a href="#" aria-label="Pinterest">P</a></li>
-                <li><a href="#" aria-label="Facebook">F</a></li>
-                <li><a href="#" aria-label="Instagram">I</a></li>
-                <li><a href="#" aria-label="YouTube">Y</a></li>
-            </ul>
-        </div>
-
-        <div class="home-footer__divider" role="presentation"></div>
-
-        <div class="home-footer__grid">
-            <div class="home-footer__col">
-                <h4>SHOP</h4>
-                <ul>
-                    <li><a href="#">Custom Clothing</a></li>
-                    <li><a href="#">Design Library</a></li>
-                    <li><a href="#">Gift Cards</a></li>
-                </ul>
-            </div>
-            <div class="home-footer__col">
-                <h4>BRAND</h4>
-                <ul>
-                    <li><a href="#">Our Story</a></li>
-                    <li><a href="#">Craftsmanship</a></li>
-                    <li><a href="#">Sustainability</a></li>
-                </ul>
-            </div>
-            <div class="home-footer__col">
-                <h4>HELP</h4>
-                <ul>
-                    <li><a href="#">Size Guide</a></li>
-                    <li><a href="#">Shipping</a></li>
-                    <li><a href="#">Returns</a></li>
-                </ul>
-            </div>
-            <div class="home-footer__col">
-                <h4>COMMUNITY</h4>
-                <ul>
-                    <li><a href="#">Makers Hub</a></li>
-                    <li><a href="#">Pattern Library</a></li>
-                    <li><a href="#">Tutorials</a></li>
-                </ul>
-            </div>
-        </div>
-
-        <div class="home-footer__divider" role="presentation"></div>
-
-        <div class="home-footer__bottom">
-            <span>© <?php echo esc_html( date( 'Y' ) ); ?> <?php bloginfo( 'name' ); ?></span>
-            <span>Privacy &nbsp;·&nbsp; Terms &nbsp;·&nbsp; Cookies</span>
-        </div>
-    </footer>
+    <?php require get_template_directory() . '/template-parts/home-footer.php'; ?>

 </div><!-- .home -->

@@ -52,7 +52,59 @@ function sewjoy_theme_scripts() {
            'sewjoy-theme-home',
            get_template_directory_uri() . '/assets/css/home.css',
            array( 'sewjoy-theme-style' ),
-            '1.0.5'
+            '1.0.6'
+        );
+        return;
+    }
+
+    if ( is_page_template( 'page-templates/page-shop.php' ) ) {
+        // Shop / product list page — reuses the home canvas + nav/footer,
+        // adds the filter bar, product card family, layout switcher, pagination.
+        wp_enqueue_style(
+            'sewjoy-theme-style',
+            get_stylesheet_uri()
+        );
+        wp_enqueue_style(
+            'sewjoy-theme-home',
+            get_template_directory_uri() . '/assets/css/home.css',
+            array( 'sewjoy-theme-style' ),
+            '1.0.6'
+        );
+        wp_enqueue_style(
+            'sewjoy-theme-shop',
+            get_template_directory_uri() . '/assets/css/shop.css',
+            array( 'sewjoy-theme-home' ),
+            '1.0.0'
+        );
+        return;
+    }
+
+    if ( is_page_template( 'page-templates/page-design.php' ) ) {
+        // Design Yours / Custom Design Flow landing — reuses the home
+        // canvas + nav/footer + bond-card markup; adds the 3-step splash
+        // carousel, the three-series wrapper, and Featured Designs cards.
+        wp_enqueue_style(
+            'sewjoy-theme-style',
+            get_stylesheet_uri()
+        );
+        wp_enqueue_style(
+            'sewjoy-theme-home',
+            get_template_directory_uri() . '/assets/css/home.css',
+            array( 'sewjoy-theme-style' ),
+            '1.0.6'
+        );
+        wp_enqueue_style(
+            'sewjoy-theme-design',
+            get_template_directory_uri() . '/assets/css/design.css',
+            array( 'sewjoy-theme-home' ),
+            '1.0.0'
+        );
+        wp_enqueue_script(
+            'sewjoy-theme-design',
+            get_template_directory_uri() . '/assets/js/design.js',
+            array( 'jquery' ),
+            '1.0.0',
+            true
        );
        return;
    }
@@ -0,0 +1,177 @@
+<?php
+/**
+ * Template Name: Design Yours
+ *
+ * Self-contained Design Yours / Custom Design Flow landing. Mirrors
+ * front-page.php and page-shop.php: own DOCTYPE, <head>, brand nav
+ * (from template-part), 3-step splash carousel, 3-series cards (reuses
+ * front-page's bond-card markup verbatim), 4 Featured Designs cards
+ * (hardcoded), footer (from template-part).
+ *
+ * @package SewJoy_Theme
+ */
+?>
+<!DOCTYPE html>
+<html <?php language_attributes(); ?>>
+<head>
+    <meta charset="<?php bloginfo( 'charset' ); ?>">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Playfair+Display:wght@400;700&display=swap" rel="stylesheet">
+    <?php wp_head(); ?>
+</head>
+
+<body <?php body_class( 'home-page' ); ?>>
+<?php wp_body_open(); ?>
+
+<div class="home home--design">
+
+    <?php require get_template_directory() . '/template-parts/home-nav.php'; ?>
+
+    <!-- ============================================
+         DY SPLASH — 3-step carousel (interactive via design.js)
+         ============================================ -->
+    <section class="dy-splash" aria-label="Design process">
+        <div class="dy-splash__viewport">
+
+            <article class="dy-splash__slide is-active" data-slide="0" style="--slide-tone: #F0E8DC;">
+                <div class="dy-splash__image" aria-hidden="true"></div>
+                <div class="dy-splash__overlay">
+                    <span class="dy-splash__eyebrow">STEP 01 OF 03</span>
+                    <h2 class="dy-splash__title">Choose Your Style</h2>
+                    <p class="dy-splash__desc">Start with a base style from our curated library — Classic Shirt, A-Line Dress, Casual Tee, and more.</p>
+                </div>
+            </article>
+
+            <article class="dy-splash__slide" data-slide="1" style="--slide-tone: #E8D8C8;">
+                <div class="dy-splash__image" aria-hidden="true"></div>
+                <div class="dy-splash__overlay">
+                    <span class="dy-splash__eyebrow">STEP 02 OF 03</span>
+                    <h2 class="dy-splash__title">Pick Your Fabric</h2>
+                    <p class="dy-splash__desc">Choose from over 40 premium fabrics — Linen, Silk, Cotton, Cashmere — all sustainably sourced.</p>
+                </div>
+            </article>
+
+            <article class="dy-splash__slide" data-slide="2" style="--slide-tone: #D9C9B0;">
+                <div class="dy-splash__image" aria-hidden="true"></div>
+                <div class="dy-splash__overlay">
+                    <span class="dy-splash__eyebrow">STEP 03 OF 03</span>
+                    <h2 class="dy-splash__title">Add Accessories</h2>
+                    <p class="dy-splash__desc">Complete your look with matching buttons, trims, and a personalized label — the final touch.</p>
+                </div>
+            </article>
+
+        </div>
+
+        <button type="button" class="dy-splash__arrow dy-splash__arrow--prev" aria-label="Previous slide">‹</button>
+        <button type="button" class="dy-splash__arrow dy-splash__arrow--next" aria-label="Next slide">›</button>
+
+        <div class="dy-splash__dots" role="tablist" aria-label="Choose slide">
+            <button type="button" class="dy-splash__dot is-active" data-go="0" aria-label="Slide 1" aria-selected="true"></button>
+            <button type="button" class="dy-splash__dot"           data-go="1" aria-label="Slide 2" aria-selected="false"></button>
+            <button type="button" class="dy-splash__dot"           data-go="2" aria-label="Slide 3" aria-selected="false"></button>
+        </div>
+    </section>
+
+    <!-- ============================================
+         DY THREE SERIES — reuse front-page bond-card markup
+         ============================================ -->
+    <section class="dy-three-series" aria-label="Three series">
+        <header class="dy-three-series__header">
+            <h2 class="dy-three-series__heading">START BY CHOOSE COLLECTION</h2>
+            <p class="dy-three-series__subtitle">为每一份珍贵的爱，量身定制</p>
+        </header>
+
+        <div class="dy-three-series__cards">
+            <article class="bond-card bond-card--personal">
+                <span class="bond-card__num" aria-hidden="true">01</span>
+                <div class="bond-card__body">
+                    <span class="bond-card__index">01</span>
+                    <h3 class="bond-card__title-cn">个人系列</h3>
+                    <span class="bond-card__title-en">PERSONAL</span>
+                    <p class="bond-card__desc">为自己设计<br>独一无二的风尚</p>
+                </div>
+                <a class="bond-card__cta" href="#">
+                    <span>DESIGN NOW</span>
+                    <span aria-hidden="true">→</span>
+                </a>
+                <span class="bond-card__big-num" aria-hidden="true">01</span>
+            </article>
+
+            <article class="bond-card bond-card--parent-kid">
+                <span class="bond-card__num" aria-hidden="true">02</span>
+                <div class="bond-card__body">
+                    <span class="bond-card__index">02</span>
+                    <h3 class="bond-card__title-cn">亲子系列</h3>
+                    <span class="bond-card__title-en">PARENT &amp; KID</span>
+                    <p class="bond-card__desc">爱的服装穿搭<br>记录成长的每一刻</p>
+                </div>
+                <a class="bond-card__cta" href="#">
+                    <span>DESIGN NOW</span>
+                    <span aria-hidden="true">→</span>
+                </a>
+                <span class="bond-card__big-num" aria-hidden="true">02</span>
+            </article>
+
+            <article class="bond-card bond-card--pet">
+                <span class="bond-card__num" aria-hidden="true">03</span>
+                <div class="bond-card__body">
+                    <span class="bond-card__index">03</span>
+                    <h3 class="bond-card__title-cn">主宠系列</h3>
+                    <span class="bond-card__title-en">PET</span>
+                    <p class="bond-card__desc">舒适的同时兼具<br>给主子最好的爱</p>
+                </div>
+                <a class="bond-card__cta" href="#">
+                    <span>DESIGN NOW</span>
+                    <span aria-hidden="true">→</span>
+                </a>
+                <span class="bond-card__big-num" aria-hidden="true">03</span>
+            </article>
+        </div>
+    </section>
+
+    <!-- ============================================
+         DY FEATURED DESIGNS — 4 hardcoded cards
+         ============================================ -->
+    <section class="dy-featured" aria-label="Featured designs">
+        <header class="dy-featured__header">
+            <h2 class="dy-featured__heading">Featured Designs</h2>
+            <p class="dy-featured__subhead">Get inspired by designs from our community of makers.</p>
+        </header>
+
+        <div class="dy-featured__row">
+            <?php
+            $featured = array(
+                array( 'Linen Wrap Dress',      'BY LENA M.', '#D9C9B0' ),
+                array( 'Silk Charmeuse Blouse', 'BY YUKI T.', '#E8D8C8' ),
+                array( 'Tailored Wool Blazer',  'BY ARIA K.', '#8A6E55' ),
+                array( 'Cotton Tee Bundle',     'BY NOOR S.', '#EFE6D6' ),
+            );
+            foreach ( $featured as $f ) {
+                list( $title, $maker, $tone ) = $f;
+                ?>
+                <article class="dy-feat-card" style="--card-tone: <?php echo esc_attr( $tone ); ?>;">
+                    <div class="dy-feat-card__media" aria-hidden="true"></div>
+                    <div class="dy-feat-card__body">
+                        <h3 class="dy-feat-card__title"><?php echo esc_html( $title ); ?></h3>
+                        <span class="dy-feat-card__maker"><?php echo esc_html( $maker ); ?></span>
+                        <a class="dy-feat-card__cta" href="#">
+                            <span>CUSTOMIZE</span>
+                            <span aria-hidden="true">→</span>
+                        </a>
+                    </div>
+                </article>
+                <?php
+            }
+            ?>
+        </div>
+    </section>
+
+    <?php require get_template_directory() . '/template-parts/home-footer.php'; ?>
+
+</div><!-- .home -->
+
+<?php wp_footer(); ?>
+</body>
+</html>
@@ -0,0 +1,148 @@
+<?php
+/**
+ * Template Name: Shop
+ *
+ * Self-contained Shop / product list page. Mirrors front-page.php: own
+ * DOCTYPE, <head>, brand nav (from template-part), banner (inline copy of
+ * the homepage Hero 1), filter bar, hardcoded 9-product waterfall grid,
+ * pagination, and footer (from template-part).
+ *
+ * @package SewJoy_Theme
+ */
+?>
+<!DOCTYPE html>
+<html <?php language_attributes(); ?>>
+<head>
+    <meta charset="<?php bloginfo( 'charset' ); ?>">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Playfair+Display:wght@400;700&display=swap" rel="stylesheet">
+    <?php wp_head(); ?>
+</head>
+
+<body <?php body_class( 'home-page' ); ?>>
+<?php wp_body_open(); ?>
+
+<div class="home home--shop">
+
+    <?php require get_template_directory() . '/template-parts/home-nav.php'; ?>
+
+    <!-- ============================================
+         BANNER — MAKE CREATION WEARABLE (reused from homepage Hero 1)
+         ============================================ -->
+    <section class="hero hero--primary" aria-labelledby="shop-hero-heading">
+        <div class="hero__content">
+            <h1 id="shop-hero-heading" class="hero__heading">MAKE CREATION WEARABLE</h1>
+            <p class="hero__sub">Timeless pieces. Designed by you. Made to be loved.</p>
+
+            <ul class="hero__badges">
+                <li class="hero-badge">
+                    <span class="hero-badge__dot" aria-hidden="true"></span>
+                    <div class="hero-badge__body">
+                        <span class="hero-badge__title">CUSTOM MADE</span>
+                        <span class="hero-badge__desc">Design your unique style in just 3 steps</span>
+                    </div>
+                </li>
+                <li class="hero-badge">
+                    <span class="hero-badge__dot" aria-hidden="true"></span>
+                    <div class="hero-badge__body">
+                        <span class="hero-badge__title">PREMIUM QUALITY</span>
+                        <span class="hero-badge__desc">Carefully selected fabrics &amp; craftsmanship</span>
+                    </div>
+                </li>
+                <li class="hero-badge">
+                    <span class="hero-badge__dot" aria-hidden="true"></span>
+                    <div class="hero-badge__body">
+                        <span class="hero-badge__title">SUSTAINABLE</span>
+                        <span class="hero-badge__desc">Made to order, less waste, more care</span>
+                    </div>
+                </li>
+            </ul>
+
+            <div class="hero__placeholder" aria-hidden="true"></div>
+        </div>
+
+        <div class="hero__big-number" aria-hidden="true">01</div>
+        <div class="hero__caption">CRAFTED FOR MAKERS</div>
+    </section>
+
+    <!-- ============================================
+         SHOP — filter bar + product grid + pagination
+         ============================================ -->
+    <section class="shop" aria-label="Product list">
+
+        <header class="shop__toolbar">
+            <div class="shop__filters">
+                <button type="button" class="filter-pill">Style Filter <span class="filter-pill__caret" aria-hidden="true">▾</span></button>
+                <button type="button" class="filter-pill">Fabric Filter <span class="filter-pill__caret" aria-hidden="true">▾</span></button>
+                <input type="text" class="filter-pill filter-pill--search" placeholder="Key word search…" />
+            </div>
+
+            <div class="shop__spacer" aria-hidden="true"></div>
+
+            <div class="shop__sort-group">
+                <button type="button" class="filter-pill">Sort: Featured <span class="filter-pill__caret" aria-hidden="true">▾</span></button>
+
+                <div class="shop-layout" role="group" aria-label="Layout switcher">
+                    <button type="button" class="shop-layout__btn is-active" aria-label="Waterfall view" aria-pressed="true">▤</button>
+                    <button type="button" class="shop-layout__btn" aria-label="Grid view" aria-pressed="false">▦</button>
+                    <button type="button" class="shop-layout__btn" aria-label="List view" aria-pressed="false">☰</button>
+                </div>
+            </div>
+        </header>
+
+        <div class="shop__grid">
+            <?php
+            // 9 products, hardcoded to match the Basic Shopping Flow wireframe
+            // (design/homepage-wireframe.pen → OsAkV frame → BSF Product Grid Light).
+            $products = array(
+                array( 'Linen Wrap Dress',   '$128', '#D9C9B0', 450 ),
+                array( 'Cotton Tee',         '$48',  '#EFE6D6', 390 ),
+                array( 'Silk Blouse',        '$156', '#E8D8C8', 490 ),
+                array( 'Tailored Trousers',  '$98',  '#B8A99A', 410 ),
+                array( 'Pleated Midi Skirt', '$88',  '#D9C9B0', 470 ),
+                array( 'Knit Cardigan',      '$112', '#C8956C', 430 ),
+                array( 'Denim Jacket',       '$138', '#8A6E55', 470 ),
+                array( 'Linen Shorts',       '$68',  '#EFE6D6', 390 ),
+                array( 'Silk Scarf',         '$42',  '#E8D8C8', 430 ),
+            );
+
+            foreach ( $products as $p ) {
+                list( $title, $price, $tone, $height ) = $p;
+                ?>
+                <article class="product-card"
+                         style="--card-tone: <?php echo esc_attr( $tone ); ?>; --card-media-h: <?php echo esc_attr( $height ); ?>px;">
+                    <div class="product-card__media" aria-hidden="true"></div>
+                    <div class="product-card__body">
+                        <h3 class="product-card__title"><?php echo esc_html( $title ); ?></h3>
+                        <span class="product-card__price"><?php echo esc_html( $price ); ?></span>
+                    </div>
+                </article>
+                <?php
+            }
+            ?>
+        </div>
+
+        <footer class="shop__pagination">
+            <span class="shop__results">Showing 9 of 124 products</span>
+
+            <nav class="shop__pager" aria-label="Pagination">
+                <a class="shop__page-link shop__page-link--nav" href="#">← Prev</a>
+                <a class="shop__page-link is-current" href="#" aria-current="page">1</a>
+                <a class="shop__page-link" href="#">2</a>
+                <a class="shop__page-link" href="#">3</a>
+                <span class="shop__page-link shop__page-link--ellipsis" aria-hidden="true">…</span>
+                <a class="shop__page-link shop__page-link--nav" href="#">Next →</a>
+            </nav>
+        </footer>
+
+    </section>
+
+    <?php require get_template_directory() . '/template-parts/home-footer.php'; ?>
+
+</div><!-- .home -->
+
+<?php wp_footer(); ?>
+</body>
+</html>
@@ -0,0 +1,71 @@
+<?php
+/**
+ * Shared brand footer.
+ *
+ * Used by front-page.php and page-templates/page-shop.php. Emits the
+ * cream-background footer: top row (logo + tagline / 4 social pills),
+ * 4-column link grid (SHOP / BRAND / HELP / COMMUNITY), bottom row
+ * (copyright + legal links).
+ *
+ * @package SewJoy_Theme
+ */
+?>
+<footer class="home-footer" role="contentinfo">
+    <div class="home-footer__top">
+        <div class="home-footer__logo-group">
+            <span class="home-footer__logo"><?php bloginfo( 'name' ); ?></span>
+            <span class="home-footer__tagline">HANDMADE GOODS</span>
+        </div>
+
+        <ul class="home-footer__socials" aria-label="<?php esc_attr_e( 'Social media', 'sewjoy-theme' ); ?>">
+            <li><a href="#" aria-label="Pinterest">P</a></li>
+            <li><a href="#" aria-label="Facebook">F</a></li>
+            <li><a href="#" aria-label="Instagram">I</a></li>
+            <li><a href="#" aria-label="YouTube">Y</a></li>
+        </ul>
+    </div>
+
+    <div class="home-footer__divider" role="presentation"></div>
+
+    <div class="home-footer__grid">
+        <div class="home-footer__col">
+            <h4>SHOP</h4>
+            <ul>
+                <li><a href="#">Custom Clothing</a></li>
+                <li><a href="#">Design Library</a></li>
+                <li><a href="#">Gift Cards</a></li>
+            </ul>
+        </div>
+        <div class="home-footer__col">
+            <h4>BRAND</h4>
+            <ul>
+                <li><a href="#">Our Story</a></li>
+                <li><a href="#">Craftsmanship</a></li>
+                <li><a href="#">Sustainability</a></li>
+            </ul>
+        </div>
+        <div class="home-footer__col">
+            <h4>HELP</h4>
+            <ul>
+                <li><a href="#">Size Guide</a></li>
+                <li><a href="#">Shipping</a></li>
+                <li><a href="#">Returns</a></li>
+            </ul>
+        </div>
+        <div class="home-footer__col">
+            <h4>COMMUNITY</h4>
+            <ul>
+                <li><a href="#">Makers Hub</a></li>
+                <li><a href="#">Pattern Library</a></li>
+                <li><a href="#">Tutorials</a></li>
+            </ul>
+        </div>
+    </div>
+
+    <div class="home-footer__divider" role="presentation"></div>
+
+    <div class="home-footer__bottom">
+        <span>© <?php echo esc_html( date( 'Y' ) ); ?> <?php bloginfo( 'name' ); ?></span>
+        <span>Privacy &nbsp;·&nbsp; Terms &nbsp;·&nbsp; Cookies</span>
+    </div>
+</footer>
@@ -0,0 +1,50 @@
+<?php
+/**
+ * Shared brand nav.
+ *
+ * Used by front-page.php and page-templates/page-shop.php. Emits the
+ * cream-background nav: SEWJOY logo (wp_nav_menu 'menu-1' with a hardcoded
+ * fallback) + 3 account icons + 1px hairline divider.
+ *
+ * @package SewJoy_Theme
+ */
+?>
+<header class="home-nav" role="banner">
+    <a class="home-nav__logo" href="<?php echo esc_url( home_url( '/' ) ); ?>">
+        <?php bloginfo( 'name' ); ?>
+    </a>
+
+    <nav class="home-nav__menu" aria-label="<?php esc_attr_e( 'Primary', 'sewjoy-theme' ); ?>">
+        <?php
+        $fallback_items = array( 'SHOP', 'DESIGN YOURS', 'FABRICS', 'MEMBERSHIP', 'COMMUNITY', 'ABOUT' );
+        $has_menu       = has_nav_menu( 'menu-1' );
+
+        if ( $has_menu ) {
+            wp_nav_menu( array(
+                'theme_location' => 'menu-1',
+                'container'      => false,
+                'menu_class'     => 'home-nav__menu-list',
+                'depth'          => 1,
+                'fallback_cb'    => false,
+            ) );
+        } else {
+            echo '<ul class="home-nav__menu-list">';
+            foreach ( $fallback_items as $item ) {
+                printf(
+                    '<li><a href="%s">%s</a></li>',
+                    esc_url( home_url( '/' ) ),
+                    esc_html( $item )
+                );
+            }
+            echo '</ul>';
+        }
+        ?>
+    </nav>
+
+    <div class="home-nav__icons" aria-label="<?php esc_attr_e( 'Account', 'sewjoy-theme' ); ?>">
+        <button type="button" class="home-nav__icon" aria-label="<?php esc_attr_e( 'Search', 'sewjoy-theme' ); ?>">⌕</button>
+        <button type="button" class="home-nav__icon" aria-label="<?php esc_attr_e( 'Wishlist', 'sewjoy-theme' ); ?>">♡</button>
+        <button type="button" class="home-nav__icon" aria-label="<?php esc_attr_e( 'Cart', 'sewjoy-theme' ); ?>">▢</button>
+    </div>
+</header>
+<div class="home-nav__divider" role="presentation"></div>
Author	SHA1	Message	Date
kyugao	3e70e2546d	添加缺失样式	2026-06-25 22:36:35 +08:00
kyugao	59a418e94b	新增两个页面	2026-06-25 22:35:37 +08:00