<!DOCTYPE html>

<head>

<title>Morris — 聲音裡的流動</title>

<style>

/* --- 基礎設定 --- */

:root {

--primary-color: #5D6D5E; /* 茶葉綠 */

--accent-color: #8C7B6C; /* 陶土/木頭色 */

--bg-color: #F7F5F0; /* 米白宣紙色 */

--text-color: #333333;

--light-text: #666666;

}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {

font-family: "Helvetica Neue", Helvetica, "PingFang TC", "Microsoft JhengHei", Arial, sans-serif;

background-color: var(--bg-color);

color: var(--text-color);

line-height: 1.8;

letter-spacing: 0.05em;

}

a { text-decoration: none; color: inherit; transition: 0.3s; }

ul { list-style: none; }

/* --- 導航列 --- */

header {

position: fixed;

top: 0;

width: 100%;

background: rgba(247, 245, 240, 0.95);

padding: 1.5rem 2rem;

display: flex;

justify-content: space-between;

align-items: center;

z-index: 1000;

box-shadow: 0 2px 10px rgba(0,0,0,0.05);

}

.logo { font-size: 1.5rem; font-weight: bold; color: var(--primary-color); }

nav ul { display: flex; gap: 2rem; }

nav a:hover { color: var(--primary-color); }

/* 手機選單按鈕 */

.menu-toggle { display: none; font-size: 1.5rem; cursor: pointer; }

/* --- 通用區塊 --- */

section { padding: 5rem 2rem; max-width: 1000px; margin: 0 auto; }

h2 { font-size: 2rem; margin-bottom: 2rem; color: var(--primary-color); text-align: center; }

h3 { font-size: 1.4rem; margin-bottom: 1rem; color: var(--accent-color); }

p { margin-bottom: 1.5rem; text-align: justify; }

/* --- 首頁 Hero --- */

#home {

height: 100vh;

display: flex;

flex-direction: column;

justify-content: center;

align-items: center;

text-align: center;

background: linear-gradient(180deg, rgba(247,245,240,0) 0%, rgba(93,109,94,0.1) 100%);

padding-top: 80px;

}

#home h1 { font-size: 3rem; margin-bottom: 1rem; color: var(--primary-color); }

#home .subtitle { font-size: 1.2rem; color: var(--light-text); margin-bottom: 2rem; }

#home .intro { max-width: 600px; margin: 0 auto 3rem; font-style: italic; }

.btn {

padding: 1rem 2.5rem;

background-color: var(--primary-color);

color: white;

border-radius: 50px;

font-size: 1.1rem;

border: 1px solid var(--primary-color);

}

.btn:hover { background-color: transparent; color: var(--primary-color); }

/* --- 服務 --- */

.service-card {

background: white;

padding: 2.5rem;

margin-bottom: 2rem;

border-radius: 8px;

box-shadow: 0 5px 20px rgba(0,0,0,0.03);

border-left: 5px solid var(--primary-color);

}

.service-meta {

margin-top: 1rem;

font-size: 0.9rem;

color: var(--light-text);

border-top: 1px solid #eee;

padding-top: 1rem;

}

/* --- FAQ --- */

.faq-item { margin-bottom: 2rem; }

.faq-q { font-weight: bold; color: var(--primary-color); margin-bottom: 0.5rem; display: block; }

/* --- 聯絡 --- */

#contact { text-align: center; }

.contact-info { margin-top: 2rem; padding: 2rem; background: white; display: inline-block; border-radius: 8px; text-align: left; }

.notice { font-size: 0.9rem; color: var(--light-text); margin-top: 1rem; }

/* --- Footer --- */

footer { text-align: center; padding: 2rem; background: var(--primary-color); color: white; margin-top: 3rem; }

/* --- 手機版 RWD --- */

@media (max-width: 768px) {

#home h1 { font-size: 2rem; }

nav { display: none; position: absolute; top: 70px; left: 0; width: 100%; background: white; padding: 1rem; text-align: center; box-shadow: 0 5px 10px rgba(0,0,0,0.1); }

nav.active { display: block; }

nav ul { flex-direction: column; gap: 1rem; }

.menu-toggle { display: block; }

}

</style>

</head>

<body>

<div class="logo">Morris</div>

<nav>

<ul>

</ul>

</nav>

</header>

<h1>Morris — 聲音裡的流動</h1>

<p class="subtitle">音樂、身體與內在的探索</p>

<p>你好，我是 Morris。在音符的流動裡，在身體的擺動中，我們找到與自己相遇的時刻。<br>

這不是關於預測未來，而是關於感受現在。</p>

</div>

</section>

<h2>關於 Morris</h2>

<p>你好，我是 Morris。</p>

<p>我是一個在聲音裡長大，也在身體裡尋找答案的人。</p>

<p>從小學習音樂，我著迷於聲音如何觸動人的內在 — 不只是耳朵聽到的，更是身體感受到的。巴赫能讓人靜定，爵士能讓人搖擺，電子音樂能帶人進入迷幻的流動。每一種音樂，都對應著身體不同的回應。</p>

<p>多年來，我探索各種音樂形式。我發現，音樂不只是用來「聽」的，更是用來「感受」的。當現場的音符響起，我看到人們的身體開始自然擺動，僵硬的肩膀放鬆了，緊繃的臉部線條柔和了。</p>

<p>我也浸潤於茶道，發現泡茶、品茶的過程，本身就是一種身體的靜心。後來，我開始學習東方的八字、六爻，也鑽研西方的 MBTI 性格學。不是為了算命，而是為了理解每個人獨特的內在結構。</p>

<p><strong>如果你也想要透過聲音與身體，更認識自己，歡迎與我展開一場對話。</strong></p>

</section>

<h3>01. 音樂引導與身體律動</h3>

<p>音樂不只是用耳朵聽，更是用身體感受。在這個體驗中，我會現場即興演奏——可能是鋼琴、電子琴或其他樂器——創造出當下的聲音氛圍。你不需要會跳舞，只需要讓身體跟著音樂自然流動。搖擺、擺動、靜止，任何反應都是對的。</p>

• 風格：古典、爵士到電子聲響<br>

• 時長：90–120 分鐘<br>

• 形式：一對一或 2–6 人小型團體

</div>

<h3>02. 茶藝體驗工作坊</h3>

<p>泡茶是一種儀式，也是一種靜心。在這個工作坊中，我們會學習基本的泡茶手法，但更重要的是——透過泡茶的過程，學習放慢、學習等待、學習在簡單的動作中找到專注。</p>

• 時長：2 小時<br>

• 形式：一對一或小型團體

</div>

<h3>03. 生命探索對談</h3>

<p>透過東方生辰分析與西方 MBTI，我們一起描繪你的內在地圖。針對你當下面臨的具體處境，我們分析其中的互動模式，不預測結果，而是看見「你與這件事的關係」。最後，建議適合你的靜心方法或生活調整。</p>

• 時長：90–120 分鐘<br>

• 形式：一對一（線上或到府）

</div>

<h3>04. 一日流動探索之旅</h3>

<p>一日的深度探索，從身體到內在。從音樂引導與身體律動開始，接著是茶道體驗，午後有一對一的生命探索對談，最後給你帶回家的靜心練習。</p>

• 時長：4–5 小時<br>

• 形式：一對一

</div>

</section>

<span class="faq-q">Q: 這是算命嗎？</span>

<p>A: 不是。我不預測未來，也不告訴你「一定會怎樣」。我的工作是用性格學的工具，幫助你「看見」自己的內在模式。未來怎麼走，取決於你的決定。</p>

</div>

<span class="faq-q">Q: 音樂現場是什麼樣子？</span>

<p>A: 我會在空間中即興演奏，創造當下的聲音氛圍。你不需要會跳舞，只需要讓身體跟著聲音自然反應。</p>

</div>

<span class="faq-q">Q: 需要準備什麼嗎？</span>

<p>A: 帶著一顆開放的心，以及一個想要了解自己的意願。穿著舒服的衣物，讓身體可以自在移動。</p>

</div>

<span class="faq-q">Q: 這是宗教嗎？</span>

<p>A: 不是。我所說的「修行」，指的是具體的練習方法，本質上是一種「內在訓練」，幫助你更認識自己。</p>

</div>

</section>

<h2>與 Morris 聯繫</h2>

<p>每一場對話，都是一次冒險。如果你準備好了，歡迎與我聯繫。</p>

<p><strong>Line：</strong>請私訊索取（採預約制）</p>

<p><strong>Email：</strong>[請填入你的 Email]</p>

預約須知：<br>

• 所有服務採預約制，請至少提前一週聯繫<br>

• 確認預約後，會提供詳細的地點或線上會議資訊<br>

• 如需取消或改期，請提前 48 小時告知

</div>

</section>

</footer>

// 手機版選單切換功能

document.querySelector('.menu-toggle').addEventListener('click', function() {

document.querySelector('nav').classList.toggle('active');

});

// 點擊選單後自動收起

document.querySelectorAll('nav a').forEach(link => {

link.addEventListener('click', () => {

document.querySelector('nav').classList.remove('active');

});

</script>

</body>

</html>