<!DOCTYPE html>
<html lang="zh-TW">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="好和工作坊 — 身心靈療癒空間。解惑諮詢、靈氣療癒、催眠療癒，陪伴你回到內在的安定與豐盛。" />
<meta name="keywords" content="好和工作坊,身心靈,療癒,解惑諮詢,靈氣,催眠,台北" />
<meta property="og:title" content="好和工作坊 — 好生活，一起過" />
<meta property="og:description" content="透過能量療癒與深度諮詢，陪伴你找回內在的平靜與力量。" />
<meta property="og:type" content="website" />
<title>好和工作坊 — 好生活，一起過</title>
<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=Noto+Serif+TC:wght@300;400;500;600&family=Noto+Sans+TC:wght@300;400;500&family=Cormorant+Garamond:ital,wght@0,300;0,400;1,300;1,400&display=swap" rel="stylesheet" />
<style>
/* ─── TOKENS ─── */
:root {
--sand: #f5f0e8;
--linen: #ede5d8;
--sage: #b8c4b1;
--moss: #7a8f72;
--clay: #c4a882;
--warm: #8c7355;
--deep: #3d3530;
--ink: #2a2420;
--mist: rgba(245,240,232,0.92);
--fs-xs: 0.75rem;
--fs-sm: 0.875rem;
--fs-base: 1rem;
--fs-md: 1.125rem;
--fs-lg: 1.375rem;
--fs-xl: 1.75rem;
--fs-2xl: 2.5rem;
--fs-3xl: 3.5rem;
--fs-4xl: 5rem;
--ease-gentle: cubic-bezier(0.25, 0.46, 0.45, 0.94);
--ease-silk: cubic-bezier(0.16, 1, 0.3, 1);
}
/* ─── RESET ─── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 16px; }
body {
font-family: 'Noto Sans TC', sans-serif;
background: var(--sand);
color: var(--ink);
line-height: 1.8;
font-weight: 300;
overflow-x: hidden;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
/* ─── TEXTURE OVERLAY ─── */
body::before {
content: '';
position: fixed;
inset: 0;
background-image:
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
pointer-events: none;
z-index: 9999;
opacity: 0.6;
}
/* ─── WEAVE PATTERN ─── */
.weave-bg {
background-image:
repeating-linear-gradient(
0deg,
transparent,
transparent 18px,
rgba(180,160,130,0.06) 18px,
rgba(180,160,130,0.06) 19px
),
repeating-linear-gradient(
90deg,
transparent,
transparent 18px,
rgba(180,160,130,0.06) 18px,
rgba(180,160,130,0.06) 19px
);
}
/* ─── TYPOGRAPHY ─── */
.serif { font-family: 'Noto Serif TC', serif; }
.italic { font-family: 'Cormorant Garamond', serif; font-style: italic; }
/* ─── NAV ─── */
nav {
position: fixed;
top: 0; left: 0; right: 0;
z-index: 100;
padding: 1.5rem 3rem;
display: flex;
align-items: center;
justify-content: space-between;
transition: background 0.4s var(--ease-gentle), padding 0.4s var(--ease-gentle);
}
nav.scrolled {
background: var(--mist);
backdrop-filter: blur(12px);
padding: 1rem 3rem;
border-bottom: 1px solid rgba(180,160,130,0.2);
}
.nav-logo {
font-family: 'Noto Serif TC', serif;
font-size: var(--fs-md);
font-weight: 500;
letter-spacing: 0.12em;
color: var(--deep);
}
.nav-logo span {
font-family: 'Cormorant Garamond', serif;
font-style: italic;
font-size: var(--fs-lg);
color: var(--warm);
margin-right: 0.3em;
}
.nav-links {
display: flex;
gap: 2.5rem;
align-items: center;
}
.nav-links a {
font-size: var(--fs-sm);
letter-spacing: 0.1em;
color: var(--deep);
opacity: 0.7;
transition: opacity 0.25s;
position: relative;
}
.nav-links a::after {
content: '';
position: absolute;
bottom: -3px; left: 0; right: 0;
height: 1px;
background: var(--warm);
transform: scaleX(0);
transform-origin: left;
transition: transform 0.3s var(--ease-gentle);
}
.nav-links a:hover { opacity: 1; }
.nav-links a:hover::after { transform: scaleX(1); }
.nav-cta {
font-size: var(--fs-sm);
letter-spacing: 0.12em;
padding: 0.55rem 1.4rem;
border: 1px solid var(--warm);
color: var(--warm) !important;
opacity: 1 !important;
border-radius: 2rem;
transition: background 0.25s, color 0.25s !important;
}
.nav-cta:hover {
background: var(--warm);
color: var(--sand) !important;
}
.nav-cta::after { display: none !important; }
/* hamburger */
.hamburger {
display: none;
flex-direction: column;
gap: 5px;
cursor: pointer;
padding: 4px;
}
.hamburger span {
display: block; width: 22px; height: 1.5px;
background: var(--deep);
transition: transform 0.3s, opacity 0.3s;
}
.hamburger.open span:nth-child(1) { transform: rotate(45deg) translate(4.5px, 4.5px); }
.hamburger.open span:nth-child(2) { opacity: 0; }
.hamburger.open span:nth-child(3) { transform: rotate(-45deg) translate(4.5px, -4.5px); }
/* mobile nav drawer */
.mobile-nav {
display: none;
position: fixed;
top: 0; left: 0; right: 0; bottom: 0;
background: var(--mist);
backdrop-filter: blur(20px);
z-index: 99;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 2.5rem;
opacity: 0;
pointer-events: none;
transition: opacity 0.4s var(--ease-gentle);
}
.mobile-nav.open {
opacity: 1;
pointer-events: all;
}
.mobile-nav a {
font-family: 'Noto Serif TC', serif;
font-size: var(--fs-xl);
color: var(--deep);
letter-spacing: 0.08em;
}
/* ─── HERO ─── */
#hero {
min-height: 100svh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
padding: 8rem 2rem 5rem;
position: relative;
overflow: hidden;
}
.hero-ring {
position: absolute;
border-radius: 50%;
border: 1px solid rgba(180,160,130,0.18);
animation: breathe 8s ease-in-out infinite;
}
.hero-ring:nth-child(1) { width: 480px; height: 480px; animation-delay: 0s; }
.hero-ring:nth-child(2) { width: 680px; height: 680px; animation-delay: 1.5s; }
.hero-ring:nth-child(3) { width: 900px; height: 900px; animation-delay: 3s; }
@keyframes breathe {
0%, 100% { transform: scale(1); opacity: 0.5; }
50% { transform: scale(1.03); opacity: 1; }
}
.hero-eyebrow {
font-family: 'Cormorant Garamond', serif;
font-style: italic;
font-size: var(--fs-md);
color: var(--warm);
letter-spacing: 0.2em;
margin-bottom: 1.5rem;
opacity: 0;
animation: fadeUp 1s var(--ease-silk) 0.3s forwards;
}
.hero-title {
font-family: 'Noto Serif TC', serif;
font-size: clamp(var(--fs-2xl), 6vw, var(--fs-4xl));
font-weight: 300;
color: var(--deep);
line-height: 1.35;
letter-spacing: 0.06em;
margin-bottom: 1.8rem;
opacity: 0;
animation: fadeUp 1s var(--ease-silk) 0.5s forwards;
}
.hero-title em {
font-family: 'Cormorant Garamond', serif;
font-style: italic;
font-weight: 300;
color: var(--warm);
}
.hero-sub {
font-size: var(--fs-md);
color: var(--warm);
font-weight: 300;
letter-spacing: 0.05em;
max-width: 480px;
line-height: 2;
margin-bottom: 3rem;
opacity: 0;
animation: fadeUp 1s var(--ease-silk) 0.7s forwards;
}
.hero-actions {
display: flex;
gap: 1.2rem;
flex-wrap: wrap;
justify-content: center;
opacity: 0;
animation: fadeUp 1s var(--ease-silk) 0.9s forwards;
}
.btn-primary {
font-size: var(--fs-sm);
letter-spacing: 0.14em;
padding: 0.9rem 2.2rem;
background: var(--warm);
color: var(--sand);
border-radius: 3rem;
border: none;
cursor: pointer;
transition: background 0.3s, transform 0.2s;
display: inline-block;
}
.btn-primary:hover {
background: var(--deep);
transform: translateY(-2px);
}
.btn-ghost {
font-size: var(--fs-sm);
letter-spacing: 0.14em;
padding: 0.9rem 2.2rem;
background: transparent;
color: var(--deep);
border-radius: 3rem;
border: 1px solid rgba(60,50,40,0.3);
cursor: pointer;
transition: border-color 0.3s, transform 0.2s;
display: inline-block;
}
.btn-ghost:hover {
border-color: var(--warm);
color: var(--warm);
transform: translateY(-2px);
}
.hero-scroll {
position: absolute;
bottom: 2.5rem;
left: 50%;
transform: translateX(-50%);
display: flex;
flex-direction: column;
align-items: center;
gap: 0.5rem;
opacity: 0;
animation: fadeUp 1s var(--ease-silk) 1.3s forwards;
}
.hero-scroll span {
font-size: var(--fs-xs);
letter-spacing: 0.2em;
color: var(--warm);
opacity: 0.6;
text-transform: uppercase;
}
.scroll-line {
width: 1px; height: 40px;
background: linear-gradient(to bottom, var(--warm), transparent);
animation: scrollPulse 2s ease-in-out infinite;
}
@keyframes scrollPulse {
0%, 100% { opacity: 0.4; height: 30px; }
50% { opacity: 0.9; height: 50px; }
}
/* ─── SECTION BASE ─── */
section { padding: 7rem 2rem; }
.container { max-width: 1080px; margin: 0 auto; }
.section-tag {
font-family: 'Cormorant Garamond', serif;
font-style: italic;
font-size: var(--fs-sm);
color: var(--warm);
letter-spacing: 0.25em;
text-transform: uppercase;
margin-bottom: 1rem;
}
.section-title {
font-family: 'Noto Serif TC', serif;
font-size: clamp(var(--fs-xl), 3.5vw, var(--fs-3xl));
font-weight: 300;
color: var(--deep);
line-height: 1.4;
letter-spacing: 0.04em;
}
.divider {
width: 48px; height: 1px;
background: var(--clay);
margin: 2rem 0;
}
.divider.center { margin: 2rem auto; }
/* ─── REVEAL ANIMATION ─── */
.reveal {
opacity: 0;
transform: translateY(32px);
transition: opacity 0.9s var(--ease-silk), transform 0.9s var(--ease-silk);
}
.reveal.visible {
opacity: 1;
transform: translateY(0);
}
.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.22s; }
.reveal-delay-3 { transition-delay: 0.34s; }
.reveal-delay-4 { transition-delay: 0.46s; }
@keyframes fadeUp {
from { opacity: 0; transform: translateY(24px); }
to { opacity: 1; transform: translateY(0); }
}
/* ─── ABOUT ─── */
#about {
background: var(--linen);
}
.about-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 5rem;
align-items: center;
}
.about-visual {
position: relative;
aspect-ratio: 3/4;
max-height: 520px;
}
.about-card {
background: var(--sand);
border-radius: 2px;
width: 100%; height: 100%;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
position: relative;
}
.about-mandala {
width: 240px; height: 240px;
opacity: 0.18;
}
.about-float {
position: absolute;
bottom: -1.5rem; right: -1.5rem;
background: var(--warm);
color: var(--sand);
padding: 1.5rem;
font-family: 'Noto Serif TC', serif;
font-size: var(--fs-sm);
letter-spacing: 0.08em;
line-height: 2;
max-width: 180px;
text-align: center;
}
.about-text .section-title { margin-bottom: 1.5rem; }
.about-text p {
color: var(--warm);
font-size: var(--fs-base);
line-height: 2.2;
margin-bottom: 1.4rem;
}
.about-stats {
display: flex;
gap: 3rem;
margin-top: 2.5rem;
}
.stat-item {}
.stat-num {
font-family: 'Cormorant Garamond', serif;
font-size: var(--fs-3xl);
font-weight: 300;
color: var(--warm);
line-height: 1;
}
.stat-label {
font-size: var(--fs-xs);
letter-spacing: 0.15em;
color: var(--deep);
opacity: 0.55;
margin-top: 0.3rem;
}
/* ─── PHILOSOPHY STRIP ─── */
#philosophy {
background: var(--deep);
padding: 5rem 2rem;
text-align: center;
overflow: hidden;
position: relative;
}
#philosophy::before {
content: '';
position: absolute;
inset: 0;
background-image:
repeating-linear-gradient(
45deg,
transparent,
transparent 40px,
rgba(255,255,255,0.015) 40px,
rgba(255,255,255,0.015) 41px
);
}
.phil-quote {
font-family: 'Cormorant Garamond', serif;
font-style: italic;
font-size: clamp(var(--fs-xl), 3.5vw, var(--fs-3xl));
color: var(--linen);
font-weight: 300;
line-height: 1.7;
max-width: 780px;
margin: 0 auto 1.5rem;
letter-spacing: 0.03em;
}
.phil-attr {
font-size: var(--fs-sm);
letter-spacing: 0.2em;
color: var(--clay);
opacity: 0.8;
}
.phil-deco {
font-family: 'Cormorant Garamond', serif;
font-size: 4rem;
color: var(--clay);
opacity: 0.3;
line-height: 0.5;
margin-bottom: 1.5rem;
display: block;
}
/* ─── SERVICES ─── */
#services {
background: var(--sand);
}
.services-header {
text-align: center;
margin-bottom: 4.5rem;
}
.services-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1.5px;
background: rgba(180,160,130,0.15);
border: 1px solid rgba(180,160,130,0.15);
}
.service-card {
background: var(--sand);
padding: 3rem 2.5rem;
transition: background 0.35s var(--ease-gentle);
cursor: default;
position: relative;
overflow: hidden;
}
.service-card::before {
content: '';
position: absolute;
bottom: 0; left: 0; right: 0;
height: 2px;
background: var(--warm);
transform: scaleX(0);
transition: transform 0.4s var(--ease-gentle);
}
.service-card:hover { background: var(--linen); }
.service-card:hover::before { transform: scaleX(1); }
.service-icon {
font-family: 'Cormorant Garamond', serif;
font-size: 2.8rem;
color: var(--clay);
opacity: 0.7;
margin-bottom: 1.5rem;
line-height: 1;
}
.service-name {
font-family: 'Noto Serif TC', serif;
font-size: var(--fs-lg);
font-weight: 400;
color: var(--deep);
letter-spacing: 0.05em;
margin-bottom: 1rem;
}
.service-desc {
font-size: var(--fs-sm);
color: var(--warm);
line-height: 2;
opacity: 0.9;
}
.service-tag {
display: inline-block;
margin-top: 1.5rem;
font-size: var(--fs-xs);
letter-spacing: 0.15em;
color: var(--warm);
border-bottom: 1px solid currentColor;
padding-bottom: 1px;
}
/* ─── PRODUCTS ─── */
#products {
background: var(--linen);
}
.products-header {
margin-bottom: 3.5rem;
}
.products-grid {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 1rem;
}
.product-item {
text-align: center;
padding: 2rem 1rem;
background: var(--sand);
border-radius: 2px;
transition: transform 0.3s var(--ease-gentle), box-shadow 0.3s;
}
.product-item:hover {
transform: translateY(-4px);
box-shadow: 0 12px 32px rgba(60,50,40,0.08);
}
.product-glyph {
font-size: 2rem;
margin-bottom: 1rem;
display: block;
}
.product-name {
font-family: 'Noto Serif TC', serif;
font-size: var(--fs-sm);
font-weight: 400;
color: var(--deep);
letter-spacing: 0.06em;
line-height: 1.6;
}
/* ─── TESTIMONIALS ─── */
#testimonials {
background: var(--sand);
text-align: center;
}
.testimonials-header { margin-bottom: 4rem; }
.testimonials-track {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 2rem;
}
.testimonial-card {
background: var(--linen);
padding: 2.5rem 2rem;
text-align: left;
position: relative;
}
.testimonial-card::before {
content: '"';
font-family: 'Cormorant Garamond', serif;
font-size: 5rem;
color: var(--clay);
opacity: 0.3;
position: absolute;
top: 0.5rem; left: 1.5rem;
line-height: 1;
}
.testimonial-text {
font-size: var(--fs-sm);
color: var(--deep);
line-height: 2.1;
opacity: 0.85;
margin-bottom: 1.5rem;
padding-top: 1rem;
}
.testimonial-author {
font-size: var(--fs-xs);
letter-spacing: 0.15em;
color: var(--warm);
}
/* ─── CTA BAND ─── */
#cta {
background: linear-gradient(135deg, var(--warm) 0%, var(--clay) 100%);
padding: 6rem 2rem;
text-align: center;
position: relative;
overflow: hidden;
}
#cta::before {
content: '';
position: absolute;
inset: 0;
background-image:
repeating-linear-gradient(
0deg, transparent, transparent 20px,
rgba(255,255,255,0.04) 20px, rgba(255,255,255,0.04) 21px
),
repeating-linear-gradient(
90deg, transparent, transparent 20px,
rgba(255,255,255,0.04) 20px, rgba(255,255,255,0.04) 21px
);
}
.cta-inner { position: relative; }
.cta-pre {
font-family: 'Cormorant Garamond', serif;
font-style: italic;
font-size: var(--fs-md);
color: rgba(245,240,232,0.75);
letter-spacing: 0.2em;
margin-bottom: 1.2rem;
}
.cta-title {
font-family: 'Noto Serif TC', serif;
font-size: clamp(var(--fs-xl), 4vw, var(--fs-3xl));
font-weight: 300;
color: var(--sand);
line-height: 1.45;
letter-spacing: 0.05em;
margin-bottom: 2.5rem;
}
.btn-light {
display: inline-block;
font-size: var(--fs-sm);
letter-spacing: 0.14em;
padding: 1rem 2.5rem;
background: var(--sand);
color: var(--warm);
border-radius: 3rem;
transition: background 0.3s, transform 0.2s;
}
.btn-light:hover {
background: var(--deep);
color: var(--sand);
transform: translateY(-2px);
}
/* ─── FAQ ─── */
#faq {
background: var(--linen);
}
.faq-header { margin-bottom: 3.5rem; }
.faq-list { max-width: 720px; }
.faq-item {
border-bottom: 1px solid rgba(180,160,130,0.3);
}
.faq-q {
width: 100%;
text-align: left;
background: none;
border: none;
padding: 1.6rem 0;
font-family: 'Noto Serif TC', serif;
font-size: var(--fs-md);
font-weight: 400;
color: var(--deep);
letter-spacing: 0.04em;
cursor: pointer;
display: flex;
justify-content: space-between;
align-items: center;
gap: 1rem;
}
.faq-q:hover { color: var(--warm); }
.faq-icon {
flex-shrink: 0;
width: 20px; height: 20px;
position: relative;
}
.faq-icon::before,
.faq-icon::after {
content: '';
position: absolute;
background: currentColor;
transition: transform 0.35s var(--ease-gentle);
}
.faq-icon::before { width: 12px; height: 1px; top: 50%; left: 50%; transform: translate(-50%,-50%); }
.faq-icon::after { width: 1px; height: 12px; top: 50%; left: 50%; transform: translate(-50%,-50%); }
.faq-item.open .faq-icon::after { transform: translate(-50%,-50%) rotate(90deg); opacity: 0; }
.faq-a {
max-height: 0;
overflow: hidden;
transition: max-height 0.5s var(--ease-gentle), padding 0.35s;
font-size: var(--fs-sm);
color: var(--warm);
line-height: 2.1;
padding: 0;
}
.faq-item.open .faq-a {
max-height: 300px;
padding-bottom: 1.5rem;
}
/* ─── FOOTER ─── */
footer {
background: var(--ink);
padding: 5rem 2rem 3rem;
color: rgba(245,240,232,0.55);
}
.footer-inner {
max-width: 1080px;
margin: 0 auto;
display: grid;
grid-template-columns: 2fr 1fr 1fr;
gap: 4rem;
padding-bottom: 3rem;
border-bottom: 1px solid rgba(255,255,255,0.07);
}
.footer-brand h3 {
font-family: 'Noto Serif TC', serif;
font-size: var(--fs-lg);
font-weight: 400;
color: var(--linen);
letter-spacing: 0.08em;
margin-bottom: 1rem;
}
.footer-brand p {
font-size: var(--fs-sm);
line-height: 2;
max-width: 280px;
}
.footer-col h4 {
font-size: var(--fs-xs);
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--linen);
margin-bottom: 1.2rem;
}
.footer-col li {
margin-bottom: 0.7rem;
}
.footer-col a {
font-size: var(--fs-sm);
transition: color 0.2s;
}
.footer-col a:hover { color: var(--clay); }
.footer-bottom {
max-width: 1080px;
margin: 2rem auto 0;
display: flex;
justify-content: space-between;
align-items: center;
font-size: var(--fs-xs);
letter-spacing: 0.1em;
}
.footer-bottom span { opacity: 0.45; }
/* ─── PROGRESS BAR ─── */
.reading-bar {
position: fixed;
top: 0; left: 0;
height: 2px;
background: var(--clay);
width: 0%;
z-index: 101;
transition: width 0.1s linear;
}
/* ─── MOBILE ─── */
@media (max-width: 768px) {
nav { padding: 1.2rem 1.5rem; }
nav.scrolled { padding: 0.9rem 1.5rem; }
.nav-links { display: none; }
.hamburger { display: flex; }
.mobile-nav { display: flex; }
#hero { padding: 6rem 1.5rem 4rem; }
.hero-ring:nth-child(1) { width: 280px; height: 280px; }
.hero-ring:nth-child(2) { width: 420px; height: 420px; }
.hero-ring:nth-child(3) { width: 560px; height: 560px; }
section { padding: 5rem 1.5rem; }
.about-grid {
grid-template-columns: 1fr;
gap: 3rem;
}
.about-visual { max-height: 320px; }
.about-float { bottom: -1rem; right: -0.5rem; padding: 1rem; max-width: 140px; }
.about-stats { gap: 2rem; }
.services-grid { grid-template-columns: 1fr; }
.products-grid { grid-template-columns: repeat(3, 1fr); }
.testimonials-track { grid-template-columns: 1fr; }
.footer-inner {
grid-template-columns: 1fr;
gap: 2.5rem;
}
.footer-bottom {
flex-direction: column;
gap: 0.8rem;
text-align: center;
}
}
@media (max-width: 480px) {
.products-grid { grid-template-columns: repeat(2, 1fr); }
.hero-actions { flex-direction: column; align-items: center; }
.about-stats { flex-direction: column; gap: 1.5rem; }
}
</style>
</head>
<body class="weave-bg">
<!-- Reading progress -->
<div class="reading-bar" id="readingBar"></div>
<!-- NAV -->
<nav id="nav">
<div class="nav-logo">
<span>好和</span>工作坊
</div>
<ul class="nav-links">
<li><a href="#about">關於</a></li>
<li><a href="#services">服務</a></li>
<li><a href="#products">能量商品</a></li>
<li><a href="#testimonials">回饋</a></li>
<li><a href="#faq">Q&A</a></li>
<li><a href="#cta" class="nav-cta">預約諮詢</a></li>
</ul>
<div class="hamburger" id="hamburger" aria-label="選單">
<span></span><span></span><span></span>
</div>
</nav>
<!-- MOBILE DRAWER -->
<div class="mobile-nav" id="mobileNav">
<a href="#about" onclick="closeMobile()">關於</a>
<a href="#services" onclick="closeMobile()">服務</a>
<a href="#products" onclick="closeMobile()">能量商品</a>
<a href="#testimonials" onclick="closeMobile()">回饋</a>
<a href="#faq" onclick="closeMobile()">Q&A</a>
<a href="#cta" onclick="closeMobile()" style="color:var(--warm)">預約諮詢</a>
</div>
<!-- HERO -->
<section id="hero">
<div class="hero-ring"></div>
<div class="hero-ring"></div>
<div class="hero-ring"></div>
<p class="hero-eyebrow">Hoho Life · 好和工作坊</p>
<h1 class="hero-title serif">
當你願意回到自己<br><em>生命的光就在那裡</em>
</h1>
<p class="hero-sub">
身心靈能量療癒空間<br>
陪伴你從迷霧中看見方向，找回內在的安定與豐盛
</p>
<div class="hero-actions">
<a href="#services" class="btn-primary">探索服務</a>
<a href="#about" class="btn-ghost">了解好和</a>
</div>
<div class="hero-scroll">
<span>向下探索</span>
<div class="scroll-line"></div>
</div>
</section>
<!-- ABOUT -->
<section id="about">
<div class="container">
<div class="about-grid">
<div class="about-visual reveal">
<div class="about-card">
<!-- decorative mandala SVG -->
<svg class="about-mandala" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<g fill="none" stroke="#8c7355" stroke-width="0.8">
<circle cx="100" cy="100" r="90"/>
<circle cx="100" cy="100" r="70"/>
<circle cx="100" cy="100" r="50"/>
<circle cx="100" cy="100" r="30"/>
<circle cx="100" cy="100" r="10"/>
<line x1="100" y1="10" x2="100" y2="190"/>
<line x1="10" y1="100" x2="190" y2="100"/>
<line x1="27" y1="27" x2="173" y2="173"/>
<line x1="173" y1="27" x2="27" y2="173"/>
<line x1="63.4" y1="10" x2="136.6" y2="190"/>
<line x1="10" y1="63.4" x2="190" y2="136.6"/>
<line x1="136.6" y1="10" x2="63.4" y2="190"/>
<line x1="10" y1="136.6" x2="190" y2="63.4"/>
<path d="M100 10 Q130 55 100 100 Q70 55 100 10"/>
<path d="M190 100 Q145 130 100 100 Q145 70 190 100"/>
<path d="M100 190 Q70 145 100 100 Q130 145 100 190"/>
<path d="M10 100 Q55 70 100 100 Q55 130 10 100"/>
</g>
</svg>
<div class="about-float serif">
身心靈<br>一體<br>自在好生活
</div>
</div>
</div>
<div class="about-text">
<p class="section-tag reveal">About · 關於好和</p>
<h2 class="section-title serif reveal reveal-delay-1">
調整能量<br>讓生命更平靜<br>更豐盛
</h2>
<div class="divider reveal reveal-delay-2"></div>
<p class="reveal reveal-delay-2">
「好和」以調整能量，協助你更平靜、更健康、更豐盛喜悅為使命。每一個人的內在都存在著身、心、靈三個層次——當這三者能量運作和諧，你將是健康且完整的。
</p>
<p class="reveal reveal-delay-3">
我們相信，真正的療癒不是逃避，而是陪伴你看見自己，走到你滿意的軌道，好好過你的人生，拿回自己的力量。
</p>
<div class="about-stats reveal reveal-delay-4">
<div class="stat-item">
<div class="stat-num italic">10+</div>
<div class="stat-label">年 療癒陪伴</div>
</div>
<div class="stat-item">
<div class="stat-num italic">500+</div>
<div class="stat-label">位 個案服務</div>
</div>
<div class="stat-item">
<div class="stat-num italic">20+</div>
<div class="stat-label">種 療癒工具</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- PHILOSOPHY STRIP -->
<section id="philosophy">
<div class="container" style="text-align:center">
<span class="phil-deco reveal">"</span>
<p class="phil-quote reveal reveal-delay-1">
如果愛不能喚醒你，那麼生命便會用痛苦喚醒你。<br>直到你願意醒來，為自己做出改變。
</p>
<p class="phil-attr reveal reveal-delay-2">— 好和工作坊 · 核心信念</p>
</div>
</section>
<!-- SERVICES -->
<section id="services">
<div class="container">
<div class="services-header">
<p class="section-tag reveal">Services · 服務項目</p>
<h2 class="section-title serif reveal reveal-delay-1">從內在出發<br>找到屬於你的療癒路徑</h2>
<div class="divider center reveal reveal-delay-2"></div>
</div>
<div class="services-grid">
<div class="service-card reveal">
<div class="service-icon italic">✦</div>
<h3 class="service-name serif">解惑諮詢</h3>
<p class="service-desc">
陪伴你看見影響人生的七要素，結合能量學與心理學工具，聚焦關鍵問題，找到突破口與新的可能性。獲美國 IAPC 與英國 CAMBMS 國際證照認可。
</p>
<span class="service-tag">一對一 · 線上/面對面</span>
</div>
<div class="service-card reveal reveal-delay-1">
<div class="service-icon italic">◎</div>
<h3 class="service-name serif">靈氣療癒</h3>
<p class="service-desc">
透過學習靈氣，卸除焦慮緊張的情緒與身心煩惱，恢復原有的自在平衡。對現代人大加分的能量療癒工具，讓身心系統重新呼吸。
</p>
<span class="service-tag">個人療癒 · 培訓課程</span>
</div>
<div class="service-card reveal reveal-delay-2">
<div class="service-icon italic">∞</div>
<h3 class="service-name serif">催眠療癒</h3>
<p class="service-desc">
深入潛意識層次，解開長期慣性與限制性信念。在安全的引導空間中，讓你接觸到那個更完整的自己，整合所有內在面向。
</p>
<span class="service-tag">個人療癒 · 執行師培訓</span>
</div>
<div class="service-card reveal reveal-delay-3">
<div class="service-icon italic">◇</div>
<h3 class="service-name serif">冥想工作坊</h3>
<p class="service-desc">
給自己一點時間，享受身心靈釋放的感覺。透過引導冥想與鬆身活動，讓緊繃的神經系統回到當下，感受呼吸帶來的安定。
</p>
<span class="service-tag">團體 · 定期活動</span>
</div>
<div class="service-card reveal reveal-delay-4">
<div class="service-icon italic">✧</div>
<h3 class="service-name serif">合一覺醒課程</h3>
<p class="service-desc">
提高生命視野角度，陪伴自己與他人用更廣的視角看待生命問題。每一天都是一個新的開始，讓光的課程引領你走向更豐盛的生命。
</p>
<span class="service-tag">系列課程 · 深度學習</span>
</div>
<div class="service-card reveal reveal-delay-4">
<div class="service-icon italic">○</div>
<h3 class="service-name serif">SRT 靈性回歸</h3>
<p class="service-desc">
與個案一對一諮詢療癒，提供最適合的方式與途徑，獲得有力的支援與能量清理，協助靈性層次的深度轉化。
</p>
<span class="service-tag">個案 · 預約制</span>
</div>
</div>
</div>
</section>
<!-- PRODUCTS -->
<section id="products">
<div class="container">
<div class="products-header">
<p class="section-tag reveal">Energy Products · 五感能量商品</p>
<h2 class="section-title serif reveal reveal-delay-1">開啟五感<br>讓每日平衡又開心</h2>
<div class="divider reveal reveal-delay-2"></div>
<p style="color:var(--warm);font-size:var(--fs-sm);line-height:2;max-width:480px;" class="reveal reveal-delay-3">
藉由五感能量商品，讓我們身心靈一體，自在好生活。每一件商品都承載著對生活品質的細膩關注。
</p>
</div>
<div class="products-grid">
<div class="product-item reveal">
<span class="product-glyph">🌿</span>
<div class="product-name serif">七色線香</div>
</div>
<div class="product-item reveal reveal-delay-1">
<span class="product-glyph">🍵</span>
<div class="product-name serif">安化黑茶</div>
</div>
<div class="product-item reveal reveal-delay-2">
<span class="product-glyph">🛁</span>
<div class="product-name serif">奇楠葉除障沐浴包</div>
</div>
<div class="product-item reveal reveal-delay-3">
<span class="product-glyph">◯</span>
<div class="product-name serif">太公線香座</div>
</div>
<div class="product-item reveal reveal-delay-4">
<span class="product-glyph">✦</span>
<div class="product-name serif">解惑卡</div>
</div>
</div>
</div>
</section>
<!-- TESTIMONIALS -->
<section id="testimonials">
<div class="container">
<div class="testimonials-header">
<p class="section-tag reveal">Stories · 真實回饋</p>
<h2 class="section-title serif reveal reveal-delay-1">他們如何<br>找回自己的光</h2>
<div class="divider center reveal reveal-delay-2"></div>
</div>
<div class="testimonials-track">
<div class="testimonial-card reveal">
<p class="testimonial-text">
「解惑諮詢的威力，不僅僅是你帶來的這個問題而已，很多時候它會在各層面去協助我們破除長期以來我們的慣性。這次諮詢直指核心，讓我看到一直知道卻沒有去直視面對的問題。」
</p>
<div class="testimonial-author">— L. 小姐 · 解惑諮詢學員</div>
</div>
<div class="testimonial-card reveal reveal-delay-1">
<p class="testimonial-text">
「培訓讓我明白，除了我所熟悉的自己外，還有一個我不太熟悉的自己。當我去整合內在所有面向，內在會有一股力量長出，讓我感覺更踏實。」
</p>
<div class="testimonial-author">— S. 先生 · 解惑諮詢教練培訓</div>
</div>
<div class="testimonial-card reveal reveal-delay-2">
<p class="testimonial-text">
「雖然表面上只是問一個重點問題，透過層層引導，會發現到非常深處的自己。諮詢過程讓我再次感受到宇宙的奧妙，並知道照顧好自己，就能成為別人的光。」
</p>
<div class="testimonial-author">— A. 小姐 · 個案諮詢</div>
</div>
</div>
</div>
</section>
<!-- CTA -->
<section id="cta">
<div class="container">
<div class="cta-inner">
<p class="cta-pre reveal">準備好了嗎</p>
<h2 class="cta-title serif reveal reveal-delay-1">
給自己一個機會<br>重新看見內在的光
</h2>
<a href="https://www.hoho-life.com/consulting" target="_blank" rel="noopener" class="btn-light reveal reveal-delay-2">
立即預約諮詢
</a>
</div>
</div>
</section>
<!-- FAQ -->
<section id="faq">
<div class="container">
<div class="faq-header">
<p class="section-tag reveal">FAQ · 常見問題</p>
<h2 class="section-title serif reveal reveal-delay-1">你可能想知道</h2>
<div class="divider reveal reveal-delay-2"></div>
</div>
<ul class="faq-list">
<li class="faq-item reveal">
<button class="faq-q serif" aria-expanded="false">
解惑諮詢和一般心理諮商有什麼不同？
<span class="faq-icon"></span>
</button>
<div class="faq-a">
解惑諮詢結合能量學與心理學工具，除了處理表面問題，更深入探索影響人生的七要素，協助你看見問題背後的能量模式與慣性。獲美國 IAPC 與英國 CAMBMS 國際雙證照認可，是一套獨特且完整的系統。
</div>
</li>
<li class="faq-item reveal reveal-delay-1">
<button class="faq-q serif" aria-expanded="false">
第一次接觸能量療癒，我適合從哪個服務開始？
<span class="faq-icon"></span>
</button>
<div class="faq-a">
建議從「個人解惑諮詢」開始。這是最直接、最個人化的入口，教練會根據你目前的狀況引導你，找到最適合的方向。如果你喜歡群體能量，也可以先參加我們的冥想工作坊體驗看看。
</div>
</li>
<li class="faq-item reveal reveal-delay-2">
<button class="faq-q serif" aria-expanded="false">
療癒課程可以線上進行嗎？
<span class="faq-icon"></span>
</button>
<div class="faq-a">
可以。解惑諮詢提供線上與面對面兩種方式。無論身處何地，能量的連結不受空間限制。面對面服務位於台北，請預約後確認場地細節。
</div>
</li>
<li class="faq-item reveal reveal-delay-3">
<button class="faq-q serif" aria-expanded="false">
我可以如何購買能量商品？
<span class="faq-icon"></span>
</button>
<div class="faq-a">
能量商品可透過官方網站訂購，也可前往工作坊現場選購。七色線香、安化黑茶、解惑卡等商品皆為精選品項，歡迎聯繫我們了解詳情。
</div>
</li>
<li class="faq-item reveal reveal-delay-4">
<button class="faq-q serif" aria-expanded="false">
如何聯繫好和工作坊預約服務？
<span class="faq-icon"></span>
</button>
<div class="faq-a">
歡迎透過官網預約頁面、電話 02-2602-1091（AM 10:00 – PM 6:00），或 Email yungfan1989@gmail.com 與我們聯繫。我們會在一個工作天內回覆。
</div>
</li>
</ul>
</div>
</section>
<!-- FOOTER -->
<footer>
<div class="footer-inner">
<div class="footer-brand">
<h3 class="serif">好和工作坊</h3>
<p>
以調整能量，協助你更平靜、更健康、更豐盛喜悅為使命。<br>
好生活，一起過。
</p>
<div style="margin-top:1.5rem;font-size:0.75rem;letter-spacing:0.12em;color:var(--clay);opacity:0.7;">
Hoho Life · 台北市
</div>
</div>
<div class="footer-col">
<h4>服務</h4>
<ul>
<li><a href="https://www.hoho-life.com/consulting" target="_blank" rel="noopener">解惑諮詢</a></li>
<li><a href="https://www.hoho-life.com/reiki" target="_blank" rel="noopener">靈氣療癒</a></li>
<li><a href="https://www.hoho-life.com/consult" target="_blank" rel="noopener">催眠療癒</a></li>
<li><a href="https://www.hoho-life.com/course" target="_blank" rel="noopener">課程介紹</a></li>
<li><a href="https://www.hoho-life.com/event" target="_blank" rel="noopener">近期活動</a></li>
</ul>
</div>
<div class="footer-col">
<h4>關於</h4>
<ul>
<li><a href="https://www.hoho-life.com/about" target="_blank" rel="noopener">品牌故事</a></li>
<li><a href="https://www.hoho-life.com/product" target="_blank" rel="noopener">能量商品</a></li>
<li><a href="mailto:yungfan1989@gmail.com">聯繫我們</a></li>
</ul>
<div style="margin-top:1.8rem;font-size:0.75rem;line-height:2.2;color:rgba(245,240,232,0.4);">
02-2602-1091<br>
AM 10:00 – PM 6:00
</div>
</div>
</div>
<div class="footer-bottom">
<span>© 2025 好和工作坊 Hoho Life. All rights reserved.</span>
<span style="font-family:'Cormorant Garamond',serif;font-style:italic;color:var(--clay);opacity:0.5;">好生活，一起過。</span>
</div>
</footer>
<script>
// ─── NAV SCROLL ───
const nav = document.getElementById('nav');
const readingBar = document.getElementById('readingBar');
window.addEventListener('scroll', () => {
nav.classList.toggle('scrolled', window.scrollY > 60);
const doc = document.documentElement;
const pct = (window.scrollY / (doc.scrollHeight - doc.clientHeight)) * 100;
readingBar.style.width = pct + '%';
}, { passive: true });
// ─── HAMBURGER ───
const hamburger = document.getElementById('hamburger');
const mobileNav = document.getElementById('mobileNav');
hamburger.addEventListener('click', () => {
hamburger.classList.toggle('open');
mobileNav.classList.toggle('open');
document.body.style.overflow = mobileNav.classList.contains('open') ? 'hidden' : '';
});
function closeMobile() {
hamburger.classList.remove('open');
mobileNav.classList.remove('open');
document.body.style.overflow = '';
}
// ─── REVEAL ON SCROLL ───
const reveals = document.querySelectorAll('.reveal');
const observer = new IntersectionObserver((entries) => {
entries.forEach(e => {
if (e.isIntersecting) {
e.target.classList.add('visible');
observer.unobserve(e.target);
}
});
}, { threshold: 0.12, rootMargin: '0px 0px -40px 0px' });
reveals.forEach(el => observer.observe(el));
// ─── FAQ ACCORDION ───
document.querySelectorAll('.faq-q').forEach(btn => {
btn.addEventListener('click', () => {
const item = btn.closest('.faq-item');
const isOpen = item.classList.contains('open');
// close all
document.querySelectorAll('.faq-item').forEach(i => {
i.classList.remove('open');
i.querySelector('.faq-q').setAttribute('aria-expanded', 'false');
});
// toggle clicked
if (!isOpen) {
item.classList.add('open');
btn.setAttribute('aria-expanded', 'true');
}
});
});
// ─── SUBTLE HERO PARALLAX ───
const rings = document.querySelectorAll('.hero-ring');
window.addEventListener('scroll', () => {
const y = window.scrollY;
rings.forEach((r, i) => {
r.style.transform = `translateY(${y * (0.08 + i * 0.04)}px)`;
});
}, { passive: true });
</script>
</body>
</html>