diff --git a/assets/css/home.css b/assets/css/home.css new file mode 100644 index 0000000..574d4fd --- /dev/null +++ b/assets/css/home.css @@ -0,0 +1,705 @@ +/* + * SewJoy Theme - Homepage Stylesheet + * + * Design tokens mirror the homepage-wireframe.pen variables: + * surface cream #F8F5F0 accent #C8956C + * text primary #1A1A1A text muted #8C7B6E + * border #E8E0D5 text secondary #3D3530 + */ + +: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; +} + +body.home-page { + margin: 0 !important; + padding: 0 !important; + background-color: var(--cream); + color: var(--text-primary); + font-family: var(--font-body); + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + width: 100% !important; + max-width: none !important; + /* Body-level centering via grid: place the .home grid item in the + horizontal middle of the viewport. !important guards against + any plugin stylesheet that might reset display. */ + display: grid !important; + grid-template-columns: 100% !important; + justify-items: center !important; +} + +.home { + /* Two redundant centering mechanisms: + 1) Grid parent (justify-items: center above) treats .home as a + grid item and centers it horizontally. + 2) margin: 0 auto also centers .home within the body's grid cell, + serving as a fallback if grid is somehow disabled. + Either alone is sufficient; both together is bulletproof. */ + width: 1440px !important; + max-width: 100% !important; + margin-left: auto !important; + margin-right: auto !important; + background-color: var(--cream); + box-sizing: border-box; + position: relative; +} + +/* ============================================ + NAV + ============================================ */ +.home-nav { + display: flex; + align-items: center; + justify-content: space-between; + height: 72px; + padding: 0 64px; + background-color: var(--cream); +} + +.home-nav__logo { + font-family: var(--font-body); + font-size: 16px; + font-weight: 500; + letter-spacing: 3px; + color: var(--text-primary); + text-decoration: none; +} + +.home-nav__menu-list { + list-style: none; + margin: 0; + padding: 0; + display: flex; + gap: 40px; +} + +.home-nav__menu-list a { + font-size: 13px; + font-weight: 400; + color: var(--text-primary); + text-decoration: none; + transition: color 0.15s ease; +} + +.home-nav__menu-list a:hover { + color: var(--accent); +} + +.home-nav__icons { + display: flex; + gap: 24px; + align-items: center; +} + +.home-nav__icon { + background: none; + border: 0; + padding: 4px; + font-size: 16px; + color: var(--text-primary); + cursor: pointer; + line-height: 1; +} + +.home-nav__divider { + height: 1px; + background-color: var(--border); +} + +/* ============================================ + SECTION BREAKS + ============================================ */ +.section-break { + height: 48px; + background-color: var(--white); +} + +/* ============================================ + HEROES (shared) + ============================================ */ +.hero { + position: relative; + background-color: var(--cream); + overflow: hidden; +} + +.hero--primary { + height: 400px; +} + +.hero--secondary { + height: 600px; +} + +.hero__content { + position: relative; + z-index: 2; + width: 560px; + margin-left: 80px; + padding-top: 40px; + display: flex; + flex-direction: column; + justify-content: center; + gap: 22px; +} + +.hero--secondary .hero__content { + gap: 18px; +} + +.hero__heading { + margin: 0; + font-family: var(--font-display); + font-weight: 700; + color: var(--text-primary); + font-size: clamp(36px, 4vw, 44px); + line-height: 1.1; + letter-spacing: -0.5px; +} + +.hero__heading--large { + font-size: clamp(40px, 4.5vw, 52px); + line-height: 1.05; +} + +.hero__sub { + margin: 0; + font-size: 14px; + color: var(--text-soft); + line-height: 1.5; +} + +.hero__placeholder { + height: 40px; + background-color: var(--dark); + border-radius: 4px; + width: 100%; + max-width: 280px; +} + +.hero__big-number { + position: absolute; + top: 50px; + right: 240px; + transform: translateY(0); + font-family: var(--font-display); + font-weight: 700; + font-size: clamp(180px, 22vw, 280px); + color: var(--accent); + opacity: 0.15; + line-height: 1; + pointer-events: none; + user-select: none; + z-index: 1; +} + +.hero--secondary .hero__big-number { + top: 80px; + right: 240px; + font-size: clamp(220px, 26vw, 380px); +} + +.hero__caption { + position: absolute; + right: 80px; + bottom: 30px; + font-size: 11px; + font-weight: 500; + letter-spacing: 2px; + color: var(--text-muted); + z-index: 2; +} + +.hero--primary .hero__caption { + bottom: 30px; +} + +.hero--secondary .hero__caption { + bottom: 50px; +} + +/* ============================================ + HERO 1 — Badges + ============================================ */ +.hero__badges { + list-style: none; + margin: 0; + padding: 0; + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: 24px; +} + +.hero-badge { + display: flex; + flex-direction: column; + align-items: flex-start; + gap: 8px; +} + +.hero-badge__dot { + width: 18px; + height: 18px; + border-radius: 50%; + background-color: var(--accent); + flex-shrink: 0; +} + +.hero-badge__body { + display: flex; + flex-direction: column; + gap: 2px; +} + +.hero-badge__title { + font-size: 11px; + font-weight: 700; + letter-spacing: 1px; + color: var(--text-primary); +} + +.hero-badge__desc { + font-size: 11px; + color: var(--text-soft); + line-height: 1.4; +} + +/* ============================================ + HERO 2 — Features & CTA + ============================================ */ +.hero__features { + list-style: none; + margin: 0; + padding: 0; + display: flex; + flex-direction: column; + gap: 18px; +} + +.hero-feature { + display: flex; + align-items: center; + gap: 14px; +} + +.hero-feature__icon { + width: 22px; + height: 22px; + display: inline-flex; + align-items: center; + justify-content: center; + border: 1px solid var(--text-primary); + border-radius: 50%; + font-size: 12px; + color: var(--text-primary); +} + +.hero-feature__label { + font-size: 12px; + font-weight: 600; + letter-spacing: 1px; + color: var(--text-primary); +} + +.cta-button { + display: inline-flex; + align-items: center; + gap: 8px; + padding: 14px 28px; + background-color: var(--dark); + color: var(--white); + border-radius: 4px; + font-size: 13px; + font-weight: 600; + text-decoration: none; + transition: background-color 0.15s ease, transform 0.15s ease; + align-self: flex-start; + margin-top: 8px; +} + +.cta-button:hover { + background-color: #333; + color: var(--white); + text-decoration: none; + transform: translateY(-1px); +} + +/* ============================================ + TAILORED BOND + ============================================ */ +.tailored-bond { + background-color: var(--cream); + padding: 56px 0; +} + +.tailored-bond__header { + text-align: center; + margin-bottom: 32px; + padding: 0 64px; +} + +.tailored-bond__heading { + margin: 0 0 6px; + font-family: var(--font-display); + font-size: clamp(26px, 3vw, 32px); + font-weight: 700; + letter-spacing: 3px; + color: var(--text-primary); +} + +.tailored-bond__subtitle { + margin: 0; + font-size: 13px; + color: var(--text-muted); +} + +.tailored-bond__cards { + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: 24px; + padding: 0; /* aligns flush with page edges per spec */ +} + +/* Bond cards: 360 tall, tonal progression */ +.bond-card { + position: relative; + height: 360px; + border-radius: 6px; + padding: 70px 28px 30px; + overflow: hidden; + transition: transform 0.2s ease, box-shadow 0.2s ease; +} + +.bond-card:hover { + transform: translateY(-4px); + box-shadow: 0 8px 24px rgba(44, 36, 22, 0.08); +} + +.bond-card--personal { background-color: #F2EDE0; } +.bond-card--parent-kid { background-color: #F0E8DC; } +.bond-card--pet { background-color: #E8DFD0; } + +.bond-card__num { + position: absolute; + top: 22px; + left: 28px; + font-family: var(--font-display); + font-size: 13px; + color: #B8A99A; + letter-spacing: 1px; +} + +.bond-card__body { + position: relative; + z-index: 2; + max-width: 200px; + display: flex; + flex-direction: column; + gap: 5px; +} + +.bond-card__index { + font-family: var(--font-display); + font-size: 13px; + color: #B8A99A; + letter-spacing: 1px; +} + +.bond-card__title-cn { + margin: 0; + font-family: var(--font-display); + font-size: 20px; + font-weight: 700; + color: var(--text-primary); +} + +.bond-card__title-en { + font-size: 11px; + font-weight: 600; + letter-spacing: 1.5px; + color: var(--text-muted); +} + +.bond-card__desc { + margin: 6px 0 0; + font-size: 11px; + color: var(--text-muted); + line-height: 1.5; +} + +.bond-card__cta { + position: absolute; + bottom: 26px; + left: 28px; + display: inline-flex; + align-items: center; + gap: 6px; + font-size: 11px; + font-weight: 600; + letter-spacing: 1.5px; + color: var(--text-primary); + text-decoration: none; + z-index: 2; +} + +.bond-card__cta:hover { + color: var(--accent); + text-decoration: none; +} + +.bond-card__big-num { + position: absolute; + top: 30px; + right: -20px; + font-family: var(--font-display); + font-size: clamp(160px, 16vw, 220px); + font-weight: 700; + color: var(--accent); + opacity: 0.15; + line-height: 1; + pointer-events: none; + user-select: none; + z-index: 1; +} + +/* ============================================ + FOOTER + ============================================ */ +.home-footer { + background-color: var(--cream); + padding: 40px 64px 24px; + display: flex; + flex-direction: column; + gap: 24px; +} + +.home-footer__top { + display: flex; + align-items: center; + justify-content: space-between; + width: 100%; +} + +.home-footer__logo-group { + display: flex; + flex-direction: column; + gap: 8px; +} + +.home-footer__logo { + font-size: 16px; + font-weight: 500; + letter-spacing: 3px; + color: var(--text-primary); +} + +.home-footer__tagline { + font-size: 10px; + font-weight: 500; + letter-spacing: 2px; + color: var(--text-muted); +} + +.home-footer__socials { + list-style: none; + margin: 0; + padding: 0; + display: flex; + gap: 12px; +} + +.home-footer__socials a { + display: flex; + align-items: center; + justify-content: center; + width: 32px; + height: 32px; + border-radius: 50%; + background-color: var(--white); + border: 1px solid var(--border); + color: var(--text-primary); + text-decoration: none; + font-size: 12px; + font-weight: 600; + transition: background-color 0.15s ease, color 0.15s ease; +} + +.home-footer__socials a:hover { + background-color: var(--dark); + color: var(--white); +} + +.home-footer__divider { + height: 1px; + background-color: var(--border); + width: 100%; +} + +.home-footer__grid { + display: grid; + grid-template-columns: repeat(4, 1fr); + gap: 32px; +} + +.home-footer__col h4 { + margin: 0 0 14px; + font-size: 11px; + font-weight: 600; + letter-spacing: 2px; + color: var(--text-primary); +} + +.home-footer__col ul { + list-style: none; + margin: 0; + padding: 0; + display: flex; + flex-direction: column; + gap: 10px; +} + +.home-footer__col a { + font-size: 12px; + color: var(--text-muted); + text-decoration: none; + transition: color 0.15s ease; +} + +.home-footer__col a:hover { + color: var(--accent); +} + +.home-footer__bottom { + display: flex; + justify-content: space-between; + align-items: center; + font-size: 11px; + color: var(--text-muted); +} + +/* ============================================ + RESPONSIVE + ============================================ */ +@media screen and (max-width: 1024px) { + .home-nav { + padding: 0 32px; + } + + .home-nav__menu-list { + gap: 24px; + } + + .hero__content { + margin-left: 40px; + width: 480px; + } + + .hero__big-number { + right: 40px; + } + + .hero__caption { + right: 40px; + } + + .tailored-bond__cards { + grid-template-columns: repeat(2, 1fr); + } + + .home-footer__grid { + grid-template-columns: repeat(2, 1fr); + } +} + +@media screen and (max-width: 720px) { + .home-nav { + height: 60px; + padding: 0 20px; + } + + .home-nav__menu { + display: none; + } + + .hero--primary, + .hero--secondary { + height: auto; + min-height: 360px; + padding: 60px 0 40px; + } + + .hero__content { + width: calc(100% - 40px); + margin: 0 20px; + padding-top: 0; + } + + .hero__big-number { + font-size: 140px; + right: 0; + opacity: 0.1; + } + + .hero--secondary .hero__big-number { + font-size: 180px; + } + + .hero__caption { + right: 20px; + bottom: 20px; + } + + .hero__badges { + grid-template-columns: 1fr; + gap: 14px; + } + + .section-break { + height: 32px; + } + + .tailored-bond { + padding: 40px 20px; + } + + .tailored-bond__header { + padding: 0; + margin-bottom: 24px; + } + + .tailored-bond__cards { + grid-template-columns: 1fr; + gap: 16px; + } + + .home-footer { + padding: 32px 20px 20px; + } + + .home-footer__top { + flex-direction: column; + align-items: flex-start; + gap: 20px; + } + + .home-footer__grid { + grid-template-columns: 1fr 1fr; + gap: 24px; + } + + .home-footer__bottom { + flex-direction: column; + align-items: flex-start; + gap: 8px; + } +} \ No newline at end of file diff --git a/front-page.php b/front-page.php new file mode 100644 index 0000000..1aa3269 --- /dev/null +++ b/front-page.php @@ -0,0 +1,267 @@ + + +> + + + + + + + + + +> + + +
+ + + + + + +
+
+

MAKE CREATION WEARABLE

+

Timeless pieces. Designed by you. Made to be loved.

+ +
    +
  • + +
    + CUSTOM MADE + Design your unique style in just 3 steps +
    +
    • +
  • + +
    + PREMIUM QUALITY + Carefully selected fabrics & craftsmanship +
    +
    • +
  • + +
    + SUSTAINABLE + Made to order, less waste, more care +
    +
    • +
+ + +
+ + +
CRAFTED FOR MAKERS
+
+ + + + +
+
+

Sew Your Style,
Wear Your Story.

+

DIY Clothing Kit. Made for Everyone.

+ +
    +
  • + + GLOBAL DESIGNS +
    • +
  • + + BEGINNER FRIENDLY +
    • +
+ + + Shop the Collection + + +
+ + +
DESIGNED BY YOU
+
+ + + + +
+
+

TAILORED FOR EVERY BOND

+

为每一份珍贵的爱，量身定制

+
+ +
+
+ +
+ 01 +

个人系列

+ PERSONAL +

为自己设计
独一无二的风尚

+
+ + DESIGN NOW + + + +
+ +
+ +
+ 02 +

亲子系列

+ PARENT & KID +

爱的服装穿搭
记录成长的每一刻

+
+ + DESIGN NOW + + + +
+ +
+ +
+ 03 +

主宠系列

+ PET +

舒适的同时兼具
给主子最好的爱

+
+ + DESIGN NOW + + + +
+
+
+ + + + +
+ + + + \ No newline at end of file diff --git a/functions.php b/functions.php index ece3c45..054fdf3 100644 --- a/functions.php +++ b/functions.php @@ -42,6 +42,21 @@ add_action( 'widgets_init', 'sewjoy_theme_widgets_init' ); * Enqueue scripts and styles. */ function sewjoy_theme_scripts() { + if ( is_front_page() ) { + // Homepage is self-contained — only load the home stylesheet. + 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.5' + ); + return; + } + // Main theme stylesheet (style.css from theme root). wp_enqueue_style( 'sewjoy-theme-style',