feat 修改內容

index.html

@@ -44,50 +44,53 @@
             </div>
         </section>
         <section id="mission" class="mission-section">
-            <h2 class="section-title">成立的初衷</h2>
+            <div class="mission-zigzag">
-            <div class="mission-layout">
+                <div class="mission-row mission-row--intro">
-                <div class="mission-visual">
+                    <div class="mission-row__visual">
-                    <div class="logo-wrapper">
+                        <div class="logo-wrapper">
-                        <img src="./img/logo.png" alt="SECHSKIES Logo Concept">
+                            <img src="./img/logo.png" alt="SECHSKIES Logo Concept">
-                        <span class="caption">
+                            <span class="caption">
-                            <span class="arrow-icon" aria-hidden="true">↑</span>
+                                <span class="arrow-icon" aria-hidden="true">↑</span>
-                            設計語彙：六角、黃海與初心
+                                設計語彙：六角、黃海與初心
-                        </span>
+                            </span>
+                        </div>
+                    </div>
+                    <div class="mission-row__body">
+                        <h2 class="section-title mission-block-title">成立的初衷</h2>
+                        <p class="mission-lead">
+                            以推廣 <span class="mark_b mark_y">SECHSKIES 水晶男孩</span> 為核心，旨在透過 <span
+                                class="mark_b">專業的視覺策展</span> 宣傳成員魅力與 <span
+                                class="mark_b">小黃們的應援活動</span>。我們不滿足於傳統的追星模式，而是嘗試以水晶男孩為 <span class="mark_b">靈感主軸</span>，延伸至
+                            <span class="mark_b">網頁開發、視覺設計與內容企劃</span>
+                            等多重領域，將對偶像的喜愛轉化為 <span class="mark_b">實質的專業養分</span>。在這裡，你不只能探索他們的 <span
+                                class="mark_b">傳奇軌跡</span>，更能見證追星如何激發 <span class="mark_b">創作潛能</span>。
+                        </p>
                     </div>
                 </div>
 
-                <div class="mission-content">
+                <div class="mission-row mission-row--concept">
-                    <p>
+                    <div class="mission-row__body">
-                        以推廣 <span class="mark_b mark_y">SECHSKIES 水晶男孩</span> 為核心，旨在透過 <span
+                        <h3 class="mission-logo-heading">LOGO 設計理念</h3>
-                            class="mark_b">專業的視覺策展</span> 宣傳成員魅力與 <span
+                        <p>
-                            class="mark_b">小黃們的應援活動</span>。我們不滿足於傳統的追星模式，而是嘗試以水晶男孩為 <span class="mark_b">靈感主軸</span>，延伸至
+                            <span class="mark_b">「晶」</span>字發想來自<span class="mark_b">六角形的水晶</span>，為了強調水晶男孩<span
-                        <span class="mark_b">網頁開發、視覺設計與內容企劃</span>
+                                class="mark_b">初心為六人</span>。上半部形似<span class="mark_b">數字
-                        等多重領域，將對偶像的喜愛轉化為 <span class="mark_b">實質的專業養分</span>。在這裡，你不只能探索他們的 <span
+                                6</span>，搭配演唱會必備的<span class="mark_b">手燈圖案</span>，代表粉絲和水晶<span
-                            class="mark_b">傳奇軌跡</span>，更能見證追星如何激發 <span class="mark_b">創作潛能</span>。
+                                class="mark_b">密不可分的關係</span>。<br>色彩配置發想來自回歸舞台成員脫下眼罩的剎那，整個場地從<span
-                    </p>
+                                class="mark_b mark_y">一片漆黑瞬間發亮</span>，映入眼簾的是一片<span
-
+                                class="mark_b">黃色海洋</span>。以此片段為契機，設計成<span
-                    <div class="logo-concept">
+                                class="mark_b">黑色系與黃色系</span>的色彩搭配，來記錄那瞬間的感動。
-                        <h3>LOGO 設計理念</h3>
+                        </p>
-                        <div class="logo-concept-media-row">
+                    </div>
-                            <p>
+                    <div class="mission-row__visual">
-                                <span class="mark_b">「晶」</span>字發想來自<span class="mark_b">六角形的水晶</span>，為了強調水晶男孩<span
+                        <div class="mission-moment-wrap">
-                                    class="mark_b">初心為六人</span>。上半部形似<span class="mark_b">數字
+                            <div class="mission-gif-frame" role="group" aria-label="回歸演唱會／黃色氣球海（16：9）">
-                                    6</span>，搭配演唱會必備的<span class="mark_b">手燈圖案</span>，代表粉絲和水晶<span
+                                <!-- 若改為 GIF 動圖，將底下 src 換成 ./img/mission-balloon-sea.gif 即可 -->
-                                    class="mark_b">密不可分的關係</span>。<br>色彩配置發想來自回歸舞台成員脫下眼罩的剎那，整個場地從<span
+                                <img src="./img/黃色海洋.gif" alt="無限挑戰 六六歌2 放送畫面：全場黃色氣球海">
-                                    class="mark_b mark_y">一片漆黑瞬間發亮</span>，映入眼簾的是一片<span
-                                    class="mark_b">黃色海洋</span>。以此片段為契機，設計成<span
-                                    class="mark_b">黑色系與黃色系</span>的色彩搭配，來記錄那瞬間的感動。
-                            </p>
-                            <div class="mission-moment-wrap">
-                                <div class="mission-gif-frame" role="group" aria-label="回歸演唱會／黃色氣球海（16：9）">
-                                    <!-- 若改為 GIF 動圖，將底下 src 換成 ./img/mission-balloon-sea.gif 即可 -->
-                                    <img src="./img/黃色海洋.gif" alt="無限挑戰 六六歌2 放送畫面：全場黃色氣球海">
-                                </div>
-                                <span class="caption">
-                                    <span class="arrow-icon" aria-hidden="true">↑</span>
-                                    回歸演唱會的動人瞬間-黃色氣球海
-                                </span>
                             </div>
+                            <span class="caption">
+                                <span class="arrow-icon" aria-hidden="true">↑</span>
+                                回歸演唱會的動人瞬間-黃色氣球海
+                            </span>
                         </div>
                     </div>
                 </div>

style.css

@@ -404,50 +404,94 @@ section {
 
 }
 
-/* 首頁：成立的初衷 — 標題與全站一致置中；其下雙欄（文 7 : 圖 3） */
+/* 首頁：成立的初衷 — 兩列鋸齒（上：Logo｜初衷；下：理念｜黃海）；文案欄 z-index 高於媒體 */
-.mission-section>.section-title {
+.mission-section .mission-zigzag {
-    margin-bottom: 1.5rem;
+    margin-top: 0;
 }
 
-.mission-section .mission-layout {
+.mission-section .mission-row {
     display: grid;
-    grid-template-columns: minmax(200px, 3fr) minmax(0, 7fr);
+    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
-    gap: 2rem;
+    gap: 2rem 2.5rem;
     align-items: start;
 }
 
-.mission-content>p,
+.mission-section .mission-row + .mission-row {
-.mission-content .logo-concept-media-row>p,
+    margin-top: 2.75rem;
-.mission-content .logo-concept .logo-concept-media-row p {
+    padding-top: 2.75rem;
+    border-top: 1px solid rgba(255, 204, 0, 0.45);
+}
+
+.mission-section .mission-row__visual {
+    position: relative;
+    z-index: 1;
+    min-width: 0;
+}
+
+.mission-section .mission-row__body {
+    position: relative;
+    z-index: 2;
+    min-width: 0;
+}
+
+.mission-section .mission-lead,
+.mission-section .mission-row__body > p {
     color: #4a4a4a;
     font-size: 1rem;
-    line-height: 1.6;
+    line-height: 1.65;
     text-align: left;
+    margin: 0;
+}
+
+.mission-section h2.section-title.mission-block-title {
+    text-align: left;
+    text-transform: none;
+    letter-spacing: 0.12em;
     margin: 0 0 1rem;
 }
 
-.mission-content .logo-concept {
+.mission-section .mission-block-title::after {
-    margin-top: 1.75rem;
+    content: "";
-    padding-top: 0;
+    display: block;
+    width: 3.25rem;
+    height: 4px;
+    margin: 0.55rem 0 0;
+    background: linear-gradient(90deg, var(--primary), #ffe066);
+    border-radius: 2px;
 }
 
-.mission-content .logo-concept h3 {
+.mission-section .mission-logo-heading {
     font-size: 1.08rem;
     letter-spacing: 0.18em;
     color: var(--primary);
     margin: 0 0 0.85rem;
     font-weight: 800;
     text-transform: uppercase;
+    text-align: center;
     padding: 0.65rem 0;
     border-top: 2px solid rgba(255, 204, 0, 0.5);
     border-bottom: 2px solid rgba(255, 204, 0, 0.5);
 }
 
-.mission-section .logo-concept-media-row {
+.mission-section .mission-row--concept .mission-row__body > p {
-    display: grid;
+    text-align: center;
-    grid-template-columns: minmax(0, 1fr) minmax(240px, 46%);
+}
-    gap: 1.5rem;
+
-    align-items: start;
+.mission-section .mission-row--intro .logo-wrapper {
+    position: sticky;
+    top: 1.25rem;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    text-align: center;
+}
+
+.mission-section .logo-wrapper img {
+    width: 100%;
+    max-width: min(320px, 100%);
+    height: auto;
+    display: block;
+    object-fit: contain;
 }
 
 .mission-section .mission-gif-frame {
@@ -475,7 +519,7 @@ section {
     min-width: 0;
 }
 
-.mission-section .mission-visual .caption,
+.mission-section .logo-wrapper .caption,
 .mission-section .mission-moment-wrap .caption {
     display: flex;
     flex-direction: row;
@@ -490,7 +534,7 @@ section {
     text-align: left;
 }
 
-.mission-section .mission-visual .arrow-icon,
+.mission-section .logo-wrapper .arrow-icon,
 .mission-section .mission-moment-wrap .arrow-icon {
     flex-shrink: 0;
     font-size: 0.95rem;
@@ -619,44 +663,19 @@ section {
     color: inherit;
 }
 
-.mission-visual {
-    align-self: start;
-}
-
-.mission-visual .logo-wrapper {
-    position: sticky;
-    top: 1.25rem;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    text-align: center;
-}
-
-.mission-visual .logo-wrapper img {
-    width: 100%;
-    max-width: min(320px, 100%);
-    height: auto;
-    display: block;
-    object-fit: contain;
-}
-
 @media (max-width: 900px) {
-    .mission-section .mission-layout {
+    .mission-section .mission-row {
         grid-template-columns: 1fr;
         gap: 1.75rem;
     }
 
-    .mission-visual .logo-wrapper {
+    .mission-section .mission-row--intro .logo-wrapper {
         position: static;
     }
 
-    .mission-visual .logo-wrapper img {
+    .mission-section .logo-wrapper img {
         max-width: 260px;
     }
-
-    .mission-section .logo-concept-media-row {
-        grid-template-columns: 1fr;
-    }
 }
 
 /* 作品列表表格 */