/* ========================================================= 大武山成年禮｜全站視覺精修層 v1（2026-10-14） 概念：等高線與海拔 —— 每一頁都是一段上山的路 載入位置：各頁 前（排在所有頁內樣式之後） ========================================================= */ /* 內文補字：原內文字型子集缺少的字（實測全站用到的字逐一比對後補上，避免改用系統字型而字形不一致） */ @font-face{font-family:"TAWU Embedded";src:url("/assets/fonts/sans-extra-400-v3.woff2") format("woff2");font-style:normal;font-weight:100 600;font-display:swap;unicode-range:U+4E58,U+4E7E,U+4F11,U+4F46,U+4F4E,U+4F73,U+4FBF,U+4FC3,U+4FD7,U+501A,U+5074,U+5207,U+52FF,U+5340,U+53EE,U+53F3,U+5433,U+5438,U+54AC,U+5668,U+5708,U+5716,U+5747,U+578B,U+588A,U+592A,U+5973,U+59A5,U+5B97,U+5BA4,U+5C11,U+5DE1,U+5DE6,U+5DE7,U+5E0C,U+5E2D,U+5FD7,U+600E,U+60A8,U+60DF,U+625B,U+626E,U+62CD,U+6307,U+63DB,U+647A,U+6548,U+65C1,U+6613,U+6631,U+665A,U+68C9,U+6B8A,U+6C57,U+6CE1,U+6D3D,U+6ED1,U+6EFF,U+6F6E,U+706B,U+708A,U+718A,U+71B1,U+71D2,U+723D,U+7248,U+724C,U+7279,U+73ED,U+7537,U+758A,U+7591,U+75C7,U+7642,U+76E1,U+76F4,U+7701,U+7720,U+7761,U+7897,U+7968,U+7981,U+79C1,U+7A7F,U+7B56,U+7B94,U+7D04,U+7D0D,U+7D44,U+7DE9,U+7E3D,U+7E43,U+8166,U+81C9,U+81E8,U+81F4,U+81FA,U+8212,U+82B1,U+84CB,U+85E5,U+868A,U+87F2,U+885B,U+8863,U+888B,U+8932,U+89BA,U+89F8,U+8A02,U+8A62,U+8AA4,U+8C8C,U+8D9F,U+8E1D,U+8ECA,U+8FEB,U+8FF0,U+8FF4,U+906E,U+9072,U+92C1,U+9589,U+9632,U+964D,U+9662,U+967D,U+96E8,U+9732,U+975C,U+978B,U+985E,U+99C1,U+9A5F,U+9ED1,U+9F4A} @font-face{font-family:"TAWU Embedded";src:url("/assets/fonts/sans-extra-700-v1.woff2") format("woff2");font-style:normal;font-weight:700 900;font-display:swap;unicode-range:U+4ED4,U+4FD7,U+514B,U+54E8,U+56CA,U+5716,U+573E,U+5747,U+5783,U+578B,U+588A,U+58FA,U+593E,U+5B97,U+5E95,U+600E,U+6253,U+65A4,U+6613,U+68C9,U+6C60,U+6ED1,U+6EFF,U+706B,U+71C8,U+725B,U+7761,U+7981,U+7B46,U+7BB1,U+7D04,U+7D44,U+81E8,U+85E5,U+8863,U+888B,U+8896,U+8932,U+896A,U+8D8A,U+906E,U+967D,U+96E8,U+978B,U+985E,U+9ED1,U+9F52} /* 內文全形標點：原內文字型的「，：；？！（）＋／｜」字寬不足全形，這裡用思源黑體繁中的全形字補上（只覆蓋這幾個字） */ @font-face{font-family:"TAWU Embedded";src:url("/assets/fonts/punct-tc-400.woff2") format("woff2");font-style:normal;font-weight:100 600;font-display:swap;unicode-range:U+FF0C,U+FF1A,U+FF1B,U+FF1F,U+FF01,U+FF08,U+FF09,U+FF0B,U+FF0F,U+FF5C} @font-face{font-family:"TAWU Embedded";src:url("/assets/fonts/punct-tc-700.woff2") format("woff2");font-style:normal;font-weight:700 900;font-display:swap;unicode-range:U+FF0C,U+FF1A,U+FF1B,U+FF1F,U+FF01,U+FF08,U+FF09,U+FF0B,U+FF0F,U+FF5C} /* 行前頁內文字型（Noto Sans TC Embedded）的補字：該頁實際用到、原子集缺少的字 */ @font-face{font-family:"Noto Sans TC Embedded";src:url("/assets/fonts/prep-extra-400-v2.woff2") format("woff2");font-style:normal;font-weight:400;font-display:swap;unicode-range:U+4E58,U+4E7E,U+4E9B,U+4F73,U+4FBF,U+5011,U+5074,U+5176,U+5207,U+52FF,U+5340,U+5341,U+53EE,U+53F2,U+53F3,U+5438,U+54AC,U+5668,U+56FA,U+5716,U+5747,U+578B,U+5805,U+588A,U+592A,U+5973,U+59A5,U+5BA4,U+5C11,U+5C4F,U+5DE6,U+5DE7,U+5E9C,U+5FD7,U+6163,U+6211,U+6307,U+63DB,U+647A,U+64CD,U+64D4,U+653F,U+6548,U+6551,U+6578,U+65BC,U+6613,U+66FF,U+670D,U+6771,U+68C9,U+696D,U+6BD4,U+6C57,U+6CE1,U+6E9D,U+6EAB,U+6F6E,U+706B,U+708A,U+7136,U+71B1,U+71DF,U+723D,U+7248,U+724C,U+73ED,U+7537,U+758A,U+7642,U+7686,U+7701,U+7720,U+7761,U+7897,U+793A,U+7968,U+7981,U+7A7F,U+7B56,U+7B94,U+7C3D,U+7D04,U+7D0D,U+7DCA,U+7DE9,U+7E23,U+7E43,U+7F72,U+8166,U+81E8,U+8212,U+84CB,U+85E5,U+868A,U+87F2,U+885B,U+8863,U+888B,U+8932,U+8986,U+8996,U+8A02,U+8AA4,U+8B77,U+8D77,U+8D9F,U+8E1D,U+8ECA,U+8F15,U+8FB2,U+8FD1,U+8FEB,U+906E,U+9072,U+91AB,U+91CE,U+91CF,U+92C1,U+9632,U+964D,U+9662,U+967D,U+96AA,U+96E8,U+9732,U+978B,U+984D,U+99C1,U+9A5F,U+9AD8,U+9F4A} @font-face{font-family:"Noto Sans TC Embedded";src:url("/assets/fonts/prep-extra-700-v1.woff2") format("woff2");font-style:normal;font-weight:700 900;font-display:swap;unicode-range:U+4ED4,U+514B,U+5373,U+54E8,U+56CA,U+5716,U+573E,U+5747,U+5783,U+578B,U+588A,U+58FA,U+593E,U+5E95,U+6253,U+627F,U+6578,U+65A4,U+6613,U+68C9,U+6C60,U+6E9D,U+6EFF,U+706B,U+71C8,U+725B,U+75D5,U+7761,U+793A,U+7981,U+7B46,U+7D04,U+7D44,U+85E5,U+8863,U+888B,U+8896,U+8932,U+896A,U+8D8A,U+906E,U+91CE,U+91CF,U+967D,U+96E8,U+978B,U+9802,U+985E,U+9ED1,U+9F52} /* 行前頁的內文字型（Noto Sans TC Embedded）也有相同的標點寬度問題，一併補上 */ @font-face{font-family:"Noto Sans TC Embedded";src:url("/assets/fonts/punct-tc-400.woff2") format("woff2");font-style:normal;font-weight:400;font-display:swap;unicode-range:U+FF0C,U+FF1A,U+FF1B,U+FF1F,U+FF01,U+FF08,U+FF09,U+FF0B,U+FF0F,U+FF5C} @font-face{font-family:"Noto Sans TC Embedded";src:url("/assets/fonts/punct-tc-700.woff2") format("woff2");font-style:normal;font-weight:700 900;font-display:swap;unicode-range:U+FF0C,U+FF1A,U+FF1B,U+FF1F,U+FF01,U+FF08,U+FF09,U+FF0B,U+FF0F,U+FF5C} @font-face{font-family:"Tawu Latin";src:url("/assets/fonts/ss4-roman-500.woff2") format("woff2");font-style:normal;font-weight:500;font-display:swap;unicode-range:U+0020-007E,U+00B7,U+00D7,U+2013-2026} @font-face{font-family:"Source Han Serif TC Embedded";src:url("/assets/fonts/serif-extra-v3.woff2") format("woff2");font-style:normal;font-weight:700;font-display:swap;unicode-range:U+4F0F,U+5343,U+53E4,U+58D1,U+5C0B,U+5CB8,U+5CED,U+5CEF,U+5CF6,U+5DE1,U+6749,U+6B4C,U+6CB3,U+6D04,U+6D41,U+6EAF,U+6F6E,U+6FE4,U+76F4,U+7A57,U+7D20,U+7FFC,U+86FB,U+8B20,U+8F2A,U+91CC,U+9435,U+9621,U+964C,U+96F2,U+96F6,U+975C,U+9BE8,U+FF0D} @font-face{font-family:"Tawu Latin";src:url("/assets/fonts/ss4-italic-500.woff2") format("woff2");font-style:italic;font-weight:500;font-display:swap;unicode-range:U+0020-007E,U+00B7,U+00D7,U+2013-2026} :root{ --t-pine:#143a30; --t-moss:#2c5a4a; --t-paper:#fbfaf6; --t-ink:#1d2925; --t-dawn:#c4974a; --t-hair:rgba(20,58,48,.13); --t-ease:cubic-bezier(.22,.7,.12,1); /* 陰影帶一點土色的暖意，貼近紙面而不冷硬 */ --muted:#58645f; --shadow:0 1px 0 rgba(96,72,36,.05),0 30px 60px -38px rgba(92,66,30,.34); --t-sand:#f1e9da; --t-warm:rgba(232,186,118,.18); } /* ---------- 文字排版 ---------- */ :root body h1,:root body h2,:root body h3{text-wrap:balance} :root body p,:root body li,:root body figcaption,:root body dd{text-wrap:pretty} ::selection{background:rgba(196,151,74,.32);color:inherit} /* 英文小標：改為細緻的斜體襯線、句首大寫，取代全大寫加寬字距 */ :root body .kicker,:root body .eyebrow,:root body .label,:root body .stage-no{ font-family:"Tawu Latin","TAWU Embedded","TAWU Symbols",serif!important; font-style:italic;font-synthesis:none; text-transform:none;letter-spacing:.015em; font-weight:500;font-size:clamp(15px,1.1vw,17px);line-height:1.5; } /* 數字：與思源宋體同源的 Source Serif，使年份與數據有刻印感 */ :root body .fact strong,:root body .time-year,:root body .card-no,:root body .stage-no, :root body .date-badge,:root body .phone-num{ font-family:"Tawu Latin","Source Han Serif TC Embedded","TAWU Embedded",serif!important; font-variant-numeric:lining-nums proportional-nums;font-feature-settings:"lnum","pnum";font-synthesis-weight:none; } :root body .fact strong{font-weight:500;letter-spacing:-.01em;font-size:clamp(34px,3.4vw,46px);line-height:1} /* ---------- 頁首導覽 ---------- */ :root body .tawu-site-header{background:rgba(251,250,246,.95);box-shadow:none;border-bottom:1px solid var(--t-hair);transition:background .4s var(--t-ease),box-shadow .4s} :root body.tawu-scrolled .tawu-site-header{background:rgba(251,250,246,.94);box-shadow:0 10px 30px -24px rgba(20,58,48,.5)} :root body .tawu-site-links{gap:0} :root body .tawu-site-links a{position:relative;background:none!important;border-radius:0;color:#4d645c;padding:10px 11px;transform:none!important;transition:color .3s} :root body .tawu-site-links a::after{content:"";position:absolute;left:11px;right:11px;bottom:4px;height:1.5px;background:var(--t-dawn);transform:scaleX(0);transform-origin:left center;transition:transform .5s var(--t-ease)} :root body .tawu-site-links a:hover{color:var(--t-pine)} :root body .tawu-site-links a:hover::after{transform:scaleX(1)} :root body .tawu-site-links a[aria-current="page"]{color:var(--t-pine);background:none!important} :root body .tawu-site-links a[aria-current="page"]::after{transform:scaleX(1);background:var(--t-pine)} :root body .tawu-site-links a:focus-visible{outline:2px solid var(--t-dawn);outline-offset:2px} :root body .tawu-mobile-menu summary{border-radius:999px;border-color:rgba(20,58,48,.3)} :root body .tawu-mobile-panel{border-radius:16px;background:#fbfaf6;border:1px solid var(--t-hair);box-shadow:0 30px 60px -30px rgba(20,58,48,.45);padding:8px;gap:0} :root body .tawu-mobile-panel a{border-radius:10px;text-align:left;padding:12px 14px;border-bottom:1px solid rgba(20,58,48,.07)} :root body .tawu-mobile-panel a:last-child{border-bottom:0} :root body .tawu-mobile-panel a[aria-current="page"]{background:var(--t-pine);color:#fff} /* ---------- 等高線：深色區塊的地形紋理 ---------- */ .tawu-contour-host{position:relative;isolation:isolate;overflow:hidden} .tawu-contour{display:block;position:absolute;inset:-8% -4%;z-index:-1;pointer-events:none; background:rgba(236,204,150,.13); -webkit-mask:url("/assets/contours.svg") center/cover no-repeat;mask:url("/assets/contours.svg") center/cover no-repeat} .tawu-contour.is-soft{background:rgba(236,204,150,.09)} .tawu-glow{display:block;position:absolute;z-index:-1;pointer-events:none;inset:0; background:radial-gradient(60% 70% at 82% 8%,rgba(240,190,112,.2),transparent 62%),radial-gradient(50% 60% at 6% 100%,rgba(196,151,74,.1),transparent 70%)} header.intro::after{display:none!important} @media (min-width:901px){@supports (animation-timeline:view()){ .tawu-contour{animation:tawu-contour-drift linear both;animation-timeline:view();animation-range:cover} @keyframes tawu-contour-drift{from{transform:translateY(-3.5%)}to{transform:translateY(3.5%)}} }} /* ---------- 卡片與區塊：由「浮起的圓角卡」改為貼紙面的版面 ---------- */ :root body .fact,:root body .ritual,:root body .card,:root body .support-card,:root body .culture-card, :root body .meaning-card,:root body .why-item,:root body .path-card,:root body .data-group, :root body .choice,:root body .outcome,:root body .key-tile,:root body .faq-list > *{box-shadow:none} :root body .fact{border:1px solid rgba(150,120,70,.16);background:linear-gradient(160deg,#fffdf8,#f6efe1)} :root body .ritual{background:linear-gradient(170deg,rgba(255,236,200,.07),rgba(255,255,255,.02));border:1px solid rgba(236,204,150,.18)} :root body .ritual .icon{border-radius:50%;box-shadow:0 0 0 6px rgba(196,151,74,.12)} /* 手機：數據改為 2×2，避免四張卡片直排過長 */ @media (max-width:560px){ :root body .facts{grid-template-columns:1fr 1fr;gap:10px} :root body .fact{padding:20px 16px} :root body .fact strong{font-size:32px} } @media (max-width:700px){ :root body .rituals{gap:10px} :root body .ritual{display:grid;grid-template-columns:44px 1fr;column-gap:16px;align-items:start;padding:18px 18px} :root body .ritual .icon{grid-row:span 2;margin:0} :root body .ritual h3{margin:2px 0 4px} :root body .ritual p{margin:0} } /* ---------- 照片 ---------- */ :root body figure img{transition:transform 1.8s var(--t-ease)} html.tawu-js body figure.reveal:not(.show) img{transform:scale(1.045)} :root body figcaption{letter-spacing:.02em} /* 進場：只淡入、不再整段上滑（降低千篇一律的動態） */ :root body .reveal{transform:none;transition:opacity 1s var(--t-ease)} /* ---------- 上一頁／下一頁 ---------- */ :root body .page-nav-card{transition:transform .6s var(--t-ease),box-shadow .6s var(--t-ease),background .4s} :root body .page-nav-card:hover{transform:translateY(-3px)} :root body .page-nav-arrow{transition:transform .5s var(--t-ease)} :root body .page-nav-card:hover .page-nav-arrow{transform:translateX(5px)} :root body .page-nav-card:focus-visible{outline:2px solid var(--t-dawn);outline-offset:4px} /* ---------- 頁尾 ---------- */ :root body > footer{position:relative;padding:64px 0 34px!important;background:#0f2b24;color:rgba(222,230,224,.62);line-height:1.8} :root body > footer .tawu-foot-title{display:block;margin:0 auto 14px;font-family:"Source Han Serif TC Embedded","Noto Serif TC",serif!important;font-weight:700;font-size:clamp(22px,2.2vw,28px);letter-spacing:.14em;color:#f3efe4} :root body > footer .tawu-foot-sub{display:block;margin-bottom:22px;font-size:13px;letter-spacing:.18em;color:rgba(222,230,224,.62)} :root body > footer .tawu-foot-sub::before{content:"";display:block;width:36px;height:1px;margin:0 auto 20px;background:var(--t-dawn)} /* ---------- 標題分句換行（不做動畫） ---------- */ :root body .tawu-phrase,:root body .tawu-word{font-family:inherit!important;font-weight:inherit} .tawu-phrase{display:inline-block;text-wrap:balance} .tawu-word{display:inline-block} :root body .quote p{text-wrap:balance} /* ---------- 無障礙：減少動態 ---------- */ @media (prefers-reduced-motion:reduce){ .tawu-contour{animation:none!important} :root body figure img{transition:none;transform:none!important} } /* 傳承小語：分句後行距收緊，讀起來是一句話 */ :root body .legacy-note strong{line-height:1.6;display:block;margin-bottom:6px} /* ========================================================= 楔子／首頁：敘事感的照片與「五個儀式」的步道 ========================================================= */ /* 大武山照片：放寬為接近滿版的電影比例，說明文字壓在照片上 */ :root body .intro .mountain-photo{margin-bottom:clamp(36px,5vw,64px);position:relative;width:min(1320px,calc(100vw - 40px));left:50%;translate:-50% 0;max-width:none;border-radius:18px;background:#173f35} :root body .feature-photo{position:relative} :root body .feature-photo figcaption{position:absolute;left:0;right:0;bottom:0;padding:70px clamp(18px,3vw,36px) clamp(16px,2.2vw,26px);background:linear-gradient(0deg,rgba(14,34,28,.78),rgba(14,34,28,.35) 55%,transparent);color:rgba(255,250,240,.92);font-size:clamp(13px,1.05vw,15px);letter-spacing:.04em;line-height:1.8;text-shadow:0 1px 12px rgba(0,0,0,.25)} :root body .feature-photo figcaption::before{content:"";display:inline-block;vertical-align:middle;width:22px;height:1px;margin:-3px 12px 0 0;background:var(--t-dawn)} @media (min-width:821px){ :root body .intro .mountain-photo img{aspect-ratio:21/9;height:auto;object-fit:cover;object-position:50% 38%} @supports (animation-timeline:view()){ :root body .feature-photo img{animation:tawu-photo-settle linear both;animation-timeline:view();animation-range:entry 0% cover 60%} @keyframes tawu-photo-settle{from{transform:scale(1.09)}to{transform:scale(1)}} } } @media (max-width:820px){ :root body .intro .mountain-photo{width:calc(100vw - 28px)} :root body .feature-photo figcaption{position:static;background:#173f35;padding:14px 18px 16px;color:rgba(255,250,240,.85)} } /* 五個儀式：一條金色步道串起每一站（寬螢幕） */ @media (min-width:901px){ :root body .rituals{position:relative} :root body .rituals::before{content:"";position:absolute;z-index:0;left:42px;right:calc((100% - 52px)/5 - 42px);top:50px;height:1px;pointer-events:none; background:repeating-linear-gradient(90deg,rgba(233,196,130,.55) 0 7px,transparent 7px 15px)} :root body .ritual{position:relative;z-index:1} :root body .ritual .icon{position:relative;z-index:2;box-shadow:0 0 0 7px #1d4a3d,0 0 0 8px rgba(233,196,130,.35)} } /* ========================================================= 回顧頁：歷屆海報像一面展覽牆 ========================================================= */ :root body .poster-grid{gap:clamp(30px,4vw,56px) clamp(16px,2.4vw,32px)} :root body .poster-card:not(.placeholder){aspect-ratio:auto;overflow:visible;background:none;box-shadow:none;border-radius:0} :root body .poster-card:not(.placeholder) img{aspect-ratio:2/3;height:auto;border-radius:10px;background:#e7e2d3; box-shadow:0 1px 0 rgba(96,72,36,.05),0 26px 44px -28px rgba(92,66,30,.5);transition:transform .8s var(--t-ease),box-shadow .8s var(--t-ease)} :root body .poster-card:not(.placeholder):hover img{transform:translateY(-6px) rotate(-.4deg);box-shadow:0 1px 0 rgba(96,72,36,.05),0 40px 60px -30px rgba(92,66,30,.55)} :root body .poster-card:focus-visible{outline:2px solid var(--t-dawn);outline-offset:6px;border-radius:12px} :root body .poster-cap{position:static;display:grid;grid-template-columns:auto 1fr;align-items:baseline;column-gap:10px;row-gap:2px;padding:16px 2px 0;background:none;color:var(--t-ink);font-weight:400;letter-spacing:0;text-shadow:none} .tawu-cap-year{font-family:"Tawu Latin",serif!important;font-size:clamp(20px,1.9vw,26px);font-weight:500;color:#173f35;line-height:1} :root body .tawu-cap-ed{font-size:13px;color:#7a6a4f;letter-spacing:.06em} :root body .tawu-cap-theme{grid-column:1/-1;font-family:"Source Han Serif TC Embedded","Noto Serif TC",serif!important;font-weight:700;font-size:clamp(15px,1.3vw,18px);letter-spacing:.08em;color:#24453b} .tawu-vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} @media (max-width:560px){:root body .tawu-cap-ed{font-size:12px}} @media (prefers-reduced-motion:reduce){:root body .feature-photo img{animation:none!important}} /* ========================================================= 緣起頁：隨捲動慢慢被點亮的時間軸 ========================================================= */ :root body div.timeline{max-width:1000px;grid-template-columns:150px 1fr} :root body .time-year{white-space:nowrap} :root body .time-year{font-size:clamp(30px,3.2vw,44px);font-weight:500;line-height:1;color:#7f5c27;padding-top:30px;letter-spacing:.01em} :root body .time-story{border-left:1px solid rgba(150,120,70,.28)} :root body .time-story::after{content:"";position:absolute;left:-1px;top:0;bottom:0;width:2px;background:linear-gradient(180deg,#c89d55,#b8893f);transform-origin:50% 0} :root body .time-story::before{background:#c89d55;box-shadow:0 0 0 6px rgba(200,157,85,.18);z-index:1;transition:background .6s} :root body .time-story h3{font-size:clamp(20px,2vw,25px);letter-spacing:.04em} @supports (animation-timeline:view()){ :root body .time-story::after{animation:tawu-tl-draw linear both;animation-timeline:view();animation-range:entry 60% cover 55%} :root body .time-story::before{animation:tawu-tl-dot linear both;animation-timeline:view();animation-range:entry 70% entry 100%} :root body .time-story > *{animation:tawu-tl-text linear both;animation-timeline:view();animation-range:entry 40% cover 35%} @keyframes tawu-tl-draw{from{transform:scaleY(0)}to{transform:scaleY(1)}} @keyframes tawu-tl-dot{from{background:#f3ece0;box-shadow:0 0 0 0 rgba(200,157,85,0)}to{background:#c89d55;box-shadow:0 0 0 6px rgba(200,157,85,.18)}} @keyframes tawu-tl-text{from{opacity:.25}to{opacity:1}} } @media (max-width:640px){ :root body div.timeline{grid-template-columns:84px 1fr} :root body .time-year{font-size:22px;padding-top:28px;padding-right:14px} } @media (prefers-reduced-motion:reduce){ :root body .time-story::after,:root body .time-story::before,:root body .time-story > *{animation:none!important} } /* 緣起／活動／團隊的開場：標題收斂一級，讓照片與文字更平衡 */ @media (min-width:821px){ :root body .opening h1{font-size:clamp(40px,4.5vw,64px);line-height:1.22} } /* 緣起：老照片像被輕輕放在桌上的檔案 */ :root body .archive{rotate:-1.4deg;transition:rotate .9s var(--t-ease)} :root body .archive:hover{rotate:0deg} @media (prefers-reduced-motion:reduce){:root body .archive{rotate:0deg}} /* ========================================================= 活動頁：三階段「越走越深」——由淺入深、彼此相連的一條路 ========================================================= */ :root body .path{gap:0;border-radius:20px;box-shadow:var(--shadow);position:relative;isolation:isolate} :root body .path-card{border-radius:0;box-shadow:none;min-height:300px;padding:clamp(28px,3vw,40px) clamp(24px,2.6vw,36px)} :root body .path-card:nth-child(1){background:#fdfaf3;border-radius:20px 0 0 20px} :root body .path-card:nth-child(2){background:#e1e9dd} :root body .path-card:nth-child(3){background:linear-gradient(160deg,#21503f,#143a30);border-radius:0 20px 20px 0} :root body .path-card::before{font-family:"Tawu Latin","Source Han Serif TC Embedded",serif!important;font-weight:400;font-size:clamp(46px,4.4vw,60px);line-height:1;color:#b8893f;margin-bottom:34px} :root body .path-card:nth-child(3)::before{color:#e3bf7c} :root body .path-card:nth-child(3) h3 span{color:#e3bf7c!important} /* 段與段之間的轉折：像步道上的箭頭，把前一段帶進下一段 */ :root body .path-card:not(:last-child)::after{content:"";position:absolute;z-index:2;top:50%;right:-15px;width:30px;height:30px;margin-top:-15px;transform:rotate(45deg);border-radius:0 6px 0 0;background:inherit;box-shadow:3px -3px 0 0 rgba(255,255,255,.0)} :root body .path-card:nth-child(1)::after{background:#fdfaf3} :root body .path-card:nth-child(2)::after{background:#e1e9dd} /* 第二、三階段的段落底色跟著加深 */ :root body .stage + .stage:not(.formal){background:#e9eee3} @media (max-width:900px){ :root body .path-card:nth-child(1){border-radius:20px 20px 0 0} :root body .path-card:nth-child(3){border-radius:0 0 20px 20px} :root body .path-card:not(:last-child)::after{top:auto;bottom:-15px;right:auto;left:50%;margin:0 0 0 -15px;border-radius:0 0 6px 0} :root body .path-card{min-height:auto} :root body .path-card::before{margin-bottom:18px} } /* ========================================================= 過場 Logo：慢慢淡出，而不是突然消失 ========================================================= */ :root body #tawu-loading-screen{transition:opacity 1.2s cubic-bezier(.4,0,.2,1),visibility 0s linear 1.2s} :root body #tawu-loading-screen.tawu-loader-hidden{opacity:0;visibility:hidden;transition:opacity 1.2s cubic-bezier(.4,0,.2,1),visibility 0s linear 1.2s} :root body #tawu-loading-screen .tawu-loader-box{transition:opacity .8s cubic-bezier(.4,0,.2,1),transform 1.2s var(--t-ease)} :root body #tawu-loading-screen.tawu-loader-hidden .tawu-loader-box{opacity:0;transform:translateY(-2.5vh) scale(.98)} /* ========================================================= 回顧頁背景影片：等影片真的開始播放才淡入，之前先顯示一張大武山照片 ========================================================= */ :root body .video-hero-bg{background:#0b2019 url("/assets/photos/p-273a97c3aa.jpg") center 40%/cover no-repeat} :root body .video-hero-bg iframe{opacity:0;transition:opacity 1.4s cubic-bezier(.4,0,.2,1)} :root body .video-hero.is-playing .video-hero-bg iframe{opacity:1} /* ========================================================= 報名頁：「1 月開放報名」更醒目（報名按鈕維持原本的呼吸光暈與腳印設計）； 年度時程改為與緣起頁一致的時間軸（它本來就是有先後順序的流程） ========================================================= */ :root body .date-badge{width:112px;height:112px;border-radius:16px;background:#f6efe1;box-shadow:inset 0 0 0 1px rgba(200,157,85,.35)} :root body .date-badge strong{font-family:"Tawu Latin","Source Han Serif TC Embedded",serif!important;font-weight:500;font-size:2.9rem;line-height:1;color:#173f35} :root body .date-badge span{font-size:.86rem;letter-spacing:.12em;color:#7a6a4f;font-weight:700} :root body .register-button:focus-visible{outline:2px solid #fff;outline-offset:4px} :root body section.timeline .time-row{position:relative;gap:clamp(16px,2.4vw,34px);padding-top:38px} :root body section.timeline .time-row::before{content:"";position:absolute;left:6px;right:0;top:12px;height:2px;background:linear-gradient(90deg,#c89d55,rgba(200,157,85,.18))} :root body section.timeline .time-item{position:relative;padding:0;border-top:0;background:none;border-radius:0} :root body section.timeline .time-item::before{content:"";position:absolute;top:-32px;left:0;width:14px;height:14px;border-radius:50%;background:#c89d55;box-shadow:0 0 0 6px rgba(200,157,85,.18)} :root body section.timeline .time-item:first-child::before{background:#173f35;box-shadow:0 0 0 6px rgba(23,63,53,.14)} :root body section.timeline .time-item strong{font-family:"Source Han Serif TC Embedded","Noto Serif TC",serif!important;font-weight:700;font-size:clamp(18px,1.6vw,21px);letter-spacing:.04em;margin-bottom:8px} :root body section.timeline .time-item p{font-size:.95rem;line-height:1.85} @media (max-width:900px){ :root body section.timeline .time-row{grid-template-columns:1fr;gap:28px;padding:4px 0 0 34px} :root body section.timeline .time-row::before{left:6px;right:auto;top:8px;bottom:8px;width:2px;height:auto;background:linear-gradient(180deg,#c89d55,rgba(200,157,85,.18))} :root body section.timeline .time-item::before{top:6px;left:-34px} } /* ========================================================= 易讀性：文字對比達 WCAG AA（2026-10-14 量測後調整，只改顏色） ========================================================= */ /* 淡灰說明文字：各頁變數統一加深一階 */ :root body{--muted:#58645f} /* 英文小標：淺色底用深金褐、磚紅；深色底用亮金（類別於建置時依實測背景加上） */ :root body .tawu-ink-gold{color:#7f5c27!important} :root body .tawu-ink-rust{color:#9c4f30!important} :root body .tawu-ink-goldlight{color:#e3bf7c!important} /* 活動頁三階段卡片副標（原為行內樣式） */ :root body .path-card h3 span{color:#8a5f22!important} :root body .page-nav-card.previous p{color:#58645f} /* 緣起頁「不只是一座山」說明文字：深綠底上改為淡色 */ :root body .meaning .section-head p{color:rgba(236,242,238,.82)} /* 團體合照說明：字下方的漸層加深 */ @media (min-width:821px){:root body figure.feature-photo.group-photo figcaption{background:linear-gradient(0deg,rgba(12,30,25,.9),rgba(12,30,25,.62) 60%,transparent)}} /* 頁尾小字、影片署名、報名提醒 */ :root body > footer{color:rgba(222,230,224,.76)} :root body .site-footer-note{opacity:1} :root body .video-hero-credit{color:rgba(255,255,255,.64)} :root body .link-note{color:rgba(255,255,255,.72)} :root body .nav-card small{opacity:.88} /* 手機點擊範圍：外觀不變，只把可點的區域擴大到 44px 以上 */ :root body .site-footer-note a,:root body .tawu-desktop-toggle,:root body .mail-btn{position:relative} :root body .site-footer-note a::after,:root body .tawu-desktop-toggle::after,:root body .video-hero-link::after,:root body .mail-btn::after{content:"";position:absolute;left:-6px;right:-6px;top:50%;height:44px;transform:translateY(-50%)} :root body .pack-hero-tag{color:#9c4f30} /* 第一屏內容一進頁面就完整顯示（不淡入）；捲動到下方的區塊才保留原本的淡入 */ html.tawu-first .reveal{opacity:1!important;transition:none!important} html.tawu-first figure.reveal img{transform:none!important;transition:none!important} /* 回顧頁手機版：影片拍攝署名置中，與上方 YouTube 連結對齊 */ @media (max-width:820px){ :root body .video-hero-credit{left:0;right:0;bottom:14px;padding:0 16px;text-align:center} :root body .video-hero-link{bottom:42px} } /* ========================================================= Global 英文頁（2026-10-15 新增段落）：與中文頁一致的時間軸、卡片與字體 ========================================================= */ /* 英文引言：英文用 pretty 換行，避免第一行過短 */ html[lang|="en"] body .quote p{text-wrap:pretty} /* Origins：四個年代改為與緣起頁、報名頁一致的橫向時間軸 */ :root body .origin-timeline{position:relative;gap:clamp(16px,2.4vw,34px);padding-top:40px} :root body .origin-timeline::before{content:"";position:absolute;left:6px;right:0;top:12px;height:2px;background:linear-gradient(90deg,#c89d55,rgba(200,157,85,.18))} :root body .origin-item{position:relative;background:none;border:0;border-radius:0;padding:0} :root body .origin-item::before{content:"";position:absolute;top:-34px;left:0;width:14px;height:14px;border-radius:50%;background:#c89d55;box-shadow:0 0 0 6px rgba(200,157,85,.18)} :root body .origin-item:last-child::before{background:#173f35;box-shadow:0 0 0 6px rgba(23,63,53,.14)} :root body .origin-item strong{font-family:"Tawu Latin","Source Han Serif TC Embedded",serif!important;font-weight:500;font-size:clamp(28px,2.6vw,36px);line-height:1;color:#7f5c27;margin-bottom:12px} :root body .origin-item h3{font-family:"Source Han Serif TC Embedded","Noto Serif TC",serif!important;font-size:18px;margin-bottom:8px} @media (max-width:900px){ :root body .origin-timeline{grid-template-columns:1fr;gap:26px;padding:4px 0 0 34px} :root body .origin-timeline::before{left:6px;right:auto;top:8px;bottom:8px;width:2px;height:auto;background:linear-gradient(180deg,#c89d55,rgba(200,157,85,.18))} :root body .origin-item::before{top:4px;left:-34px} } /* Programme：照片貼齊卡片上緣，文字與照片左緣對齊 */ :root body .pstage{padding:0;min-height:0;display:flex;flex-direction:column} :root body .pstage img{border-radius:0} :root body .pstage-body{padding:22px 24px 26px} /* Team：卡片與中文頁同樣的暖紙色；結語改用宋體 */ /* 兩套系統（營本部、小隊）：深綠色主卡片，是團隊的「結構」 */ :root body .team-card{position:relative;background:linear-gradient(150deg,#1f4c3f,#143a30);border:0;color:#fff;padding:34px 32px 32px;box-shadow:var(--shadow)} :root body .team-card h3{font-family:"Source Han Serif TC Embedded","Noto Serif TC",serif!important;color:#fff;font-size:24px} :root body .team-card p{color:rgba(236,242,238,.84)} :root body .team-card::after{content:"";position:absolute;left:32px;top:0;width:40px;height:3px;background:#c89d55;border-radius:0 0 3px 3px} /* 三項原則：不再是卡片，改為金色細線開頭的條列，是團隊運作的「原則」 */ :root body .team-principles{gap:0 clamp(24px,3vw,40px);margin-top:40px} :root body .team-principle{background:none;border:0;border-top:1px solid rgba(150,120,70,.35);border-radius:0;padding:18px 0 0} :root body .team-principle strong{font-family:"Source Han Serif TC Embedded","Noto Serif TC",serif!important;font-weight:700;font-size:18px;margin-bottom:6px} @media (max-width:900px){:root body .team-principles{gap:22px;margin-top:30px}} :root body .team-quote{font-family:"Source Han Serif TC Embedded","Noto Serif TC",serif!important;font-weight:700;letter-spacing:.005em;text-wrap:balance} @media (min-width:821px){:root body .team .feature-photo img{aspect-ratio:16/9;object-fit:cover;object-position:50% 45%}} /* 英文頁尾標題：英文不加寬字距 */ html[lang|="en"] body > footer .tawu-foot-title{letter-spacing:.02em} html[lang|="en"] body > footer .tawu-foot-sub{letter-spacing:.06em} /* 照片說明（電腦版疊在照片上）：字下方漸層加深，任何照片都能清楚閱讀 */ @media (min-width:821px){:root body figure.feature-photo figcaption{background:linear-gradient(0deg,rgba(12,30,25,.9),rgba(12,30,25,.62) 60%,transparent)}}